/* Novices Accounting & Tax Services - Responsive Site */
:root{
  --ink:#1c2340;        /* deep navy from image */
  --ink-900:#151a33;
  --gold:#b4a34b;       /* mustard/gold from image */
  --gold-700:#9a8b33;
  --paper:#ffffff;      /* white */
  --sky:#e9ecf5;
  --muted:#96a0ba;
  --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:#f7f8fb;
  line-height:1.6;
}

/* Header */
.topbar{
  background:var(--ink);
  color:var(--paper);
  padding:.5rem 1rem;
  display:flex;
  gap:1rem;
  justify-content:center;
  align-items:center;
  font-weight:600;
  letter-spacing:.4px;
}
.topbar a{color:var(--paper); text-decoration:none}
.topbar .dot{opacity:.3; margin:0 .5rem}

/* Navigation */
header.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(28,35,64,.9);
  backdrop-filter:saturate(180%) blur(8px);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem;
}
.brand{display:flex; gap:.6rem; align-items:center; color:#fff; text-decoration:none}
.brand .logo{
  width:36px; height:36px; border-radius:10px; 
  display:grid; place-items:center; box-shadow:var(--shadow)
}
.brand .logo:after{
  content:"n"; font-weight:900; font-size:22px; color:var(--ink);
}
.brand span{font-weight:800; font-size:1.05rem; letter-spacing:.5px}

/* Hero */
.hero{
  position:relative;
  min-height:30vh;
  display:grid;
  align-items:center;
  background: var(--ink);
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,35,64,.55) 0%, rgba(28,35,64,.75) 50%, rgba(28,35,64,.9) 100%),
    url("./assets/hero-banner.png") center/cover no-repeat;
  filter:saturate(90%);
}
.hero .wrap{position:relative; max-width:1100px; margin:0 auto; padding:4rem 1rem 5rem}
.hero h1{font-size: clamp(2rem, 4vw + 1rem, 3.4rem); line-height:1.1; margin:0 0 1rem; font-weight:900}
.hero p.big{font-size:clamp(1rem, 1.2vw + .8rem, 1.25rem); opacity:.95; max-width:60ch}
.badges{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0 2rem}
.badge{
  background:rgba(180,163,75,.18);
  color:#fff;
  padding:.4rem .7rem;
  border:1px solid rgba(180,163,75,.45);
  border-radius:999px;
  font-weight:700; letter-spacing:.4px;
  font-size:.9rem;
}
.cta{display:flex; gap:.8rem; flex-wrap:wrap}
.button{
  appearance:none; border:none; cursor:pointer;
  padding:.9rem 1.1rem; border-radius:12px; font-weight:800; letter-spacing:.3px;
  text-decoration:none; display:inline-flex; align-items:center; gap:.6rem;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.button--primary{ background:linear-gradient(135deg,var(--gold),var(--gold-700)); color:var(--ink); box-shadow:var(--shadow) }
.button--ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.25) }
.button:hover{ transform:translateY(-1px); filter:brightness(1.02) }

/* Sections */
.section{ padding:4rem 1rem; }
.container{ max-width:1100px; margin:0 auto }

.section h2{
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.2rem);
  margin:0 0 1.2rem;
  line-height:1.15;
}
.lead{ color:var(--ink-900); opacity:.85; max-width:70ch }

/* Services */
.grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:1.1rem;
  margin-top:2rem;
}
.card{
  grid-column: span 12;
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.4rem 1.2rem;
  border:1px solid #e7e9f3;
}
.card h3{ margin:.2rem 0 .4rem; font-size:1.15rem }
.card p{ margin:.2rem 0 0; color:#3c466b }

@media(min-width:700px){
  .card{ grid-column: span 6 }
}
@media(min-width:980px){
  .card{ grid-column: span 4 }
}

/* Callout */
.callout{
  background:linear-gradient(135deg, rgba(180,163,75,.14), rgba(180,163,75,.06));
  border:1px solid rgba(180,163,75,.30);
  padding:1.2rem; border-radius:14px;
}

/* Footer */
footer{
  background:var(--ink); color:#bfc6de; padding:1rem 1rem; margin-top:2rem;
}
footer .container {
  display: grid;
  gap: 1rem;
  align-items: center;

  /* Two rows: content and copyright */
  grid-template-rows: auto auto;
}

.copyright {
  grid-column: 1 / -1;    /* span the full width */
  justify-self: center;   /* center it horizontally */
  text-align: center;
}
small, .small{ font-size:.925rem; color:#b9c2e3 }

ul.clean{margin:.4rem 0 .2rem; padding-left:1.2rem}
ul.clean li{margin:.25rem 0}

hr.sep{border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(27,31,58,.4), transparent); margin:2rem 0}
/* Center ALL text across the site (overlay) */
html, body { text-align: center; }

/* Force typical text-bearing elements to center */
h1,h2,h3,h4,h5,h6,p,span,small,em,strong,a,li,dt,dd,blockquote,figcaption,caption,label,th,td {
  text-align: center !important;
}

/* Lists: keep bullets but center block */
ul,ol { list-style-position: inside; padding-left: 0; }

/* Tables: center them in the page */
table { margin-left: auto; margin-right: auto; }

/* Common flex/grid containers: center their items */
header .container,

.hero,
section .container,
.cards,
.cards-grid,
.card-grid,
footer .container,
.cta-row {
  justify-content: center !important;
  justify-items: center !important;
  text-align: center !important;
}

/* Buttons/inputs */
button, .button, input, select, textarea { text-align: center !important; }

/* Prevent full-width anchors from looking left-aligned */
a { display: inline-block; }