/* =========================================================================
   LOCAL CPA SERVICE — Shared Stylesheet
   Design system: Navy / Professional Blue / Muted Gold on warm off-white.
   Headings: Plus Jakarta Sans. Body: Inter.
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Color */
  --navy: #0B1F3A;
  --navy-700: #122A4E;
  --navy-600: #16345F;
  --blue: #1769AA;
  --blue-600: #1B5D93;
  --gold: #B9832A;
  --gold-light: #E8C077;
  --paper: #F7F8FA;
  --surface: #FFFFFF;
  --surface-tint: #F1F3F7;
  --border: #E1E5EC;
  --border-strong: #C9D0DC;
  --ink: #202733;
  --ink-muted: #5B6472;
  --ink-soft: #838C99;
  --success: #1F8A57;
  --error: #B3402A;
  --on-navy: #F4F6FA;
  --on-navy-muted: #AEB9CC;

  /* Type */
  --font-head: 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(11,31,58,0.06), 0 1px 1px rgba(11,31,58,0.04);
  --shadow-md: 0 8px 24px rgba(11,31,58,0.10);
  --shadow-lg: 0 20px 48px rgba(11,31,58,0.16);

  /* Layout */
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-pad: clamp(56px, 9vw, 108px);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{ margin:0; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font: inherit; }
input, select, textarea{ font: inherit; }
h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }

/* ---------- Base ---------- */
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--navy); line-height:1.15; font-weight:700; }
h1{ font-size: clamp(2.1rem, 3.6vw + 1rem, 3.4rem); letter-spacing:-0.01em; }
h2{ font-size: clamp(1.65rem, 1.6vw + 1.1rem, 2.35rem); letter-spacing:-0.01em; }
h3{ font-size: clamp(1.2rem, 0.6vw + 1rem, 1.5rem); }
h4{ font-size: 1.05rem; }
p{ color: var(--ink-muted); }
p.lede{ font-size: 1.15rem; line-height:1.65; color: var(--ink-muted); max-width: 62ch; }
strong{ color: var(--ink); }

.skip-link{
  position:absolute; left:-999px; top:auto; background:var(--navy); color:#fff; padding:12px 18px; border-radius: var(--r-sm); z-index:1000;
}
.skip-link:focus{ left:16px; top:16px; }

:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow{ max-width: var(--maxw-narrow); margin:0 auto; padding: 0 var(--gutter); }
.section{ padding-block: var(--section-pad); }
.section-tight{ padding-block: clamp(40px, 5vw, 64px); }
.section-alt{ background: var(--surface); }
.section-navy{ background: var(--navy); color: var(--on-navy); }
.section-navy h2, .section-navy h3{ color:#fff; }
.section-navy p{ color: var(--on-navy-muted); }
.section-tint{ background: var(--surface-tint); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-head);
  font-weight:600; font-size:0.86rem; color: var(--gold); margin-bottom:14px;
}
.eyebrow::before{ content:""; width:20px; height:2px; background: var(--gold); border-radius:2px; }

.section-head{ max-width: 640px; margin-bottom: clamp(28px,4vw,44px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ margin-top:14px; }

hr.divider{ border:none; border-top:1px solid var(--border); margin: var(--section-pad) 0 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-head); font-weight:600; font-size:0.98rem;
  padding: 14px 26px; border-radius: var(--r-md); border:1px solid transparent;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{ background: var(--gold); color: var(--navy); }
.btn-primary:hover{ background: var(--gold-light); box-shadow: var(--shadow-md); }
.btn-secondary{ background: transparent; color:#fff; border-color: rgba(255,255,255,0.45); }
.btn-secondary:hover{ background: rgba(255,255,255,0.1); border-color:#fff; }
.btn-outline{ background: transparent; color: var(--navy); border-color: var(--border-strong); }
.btn-outline:hover{ border-color: var(--navy); background: var(--surface-tint); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 32px; font-size:1.05rem; }
.btn[disabled]{ opacity:0.55; cursor:not-allowed; transform:none; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 500; background: rgba(247,248,250,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container{ max-width: 1480px; }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  gap:16px; min-height:84px; padding-block:14px;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand img{ width:40px; height:40px; flex-shrink:0; }
.brand-text{ font-family: var(--font-head); font-weight:700; font-size:1.1rem; color: var(--navy); line-height:1.1; white-space:nowrap; }
.brand-text span{ color: var(--gold); }
.brand-tag{ display:block; font-family: var(--font-body); font-weight:500; font-size:0.6rem; letter-spacing:0.08em; color: var(--ink-soft); margin-top:2px; white-space:nowrap; }

.main-nav{ display:flex; align-items:center; flex-shrink:1; min-width:0; }
.main-nav > ul{ display:flex; align-items:center; gap:0; flex-wrap:nowrap; }
.main-nav a.nav-link{
  font-family: var(--font-head); font-weight:600; font-size:0.83rem; color: var(--ink); padding:8px 8px; border-radius: var(--r-sm);
  display:flex; align-items:center; gap:4px; transition: color .15s ease, background-color .15s ease; white-space:nowrap;
}
.main-nav a.nav-link:hover, .main-nav a.nav-link.active{ color: var(--navy); background: var(--surface-tint); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 8px); left:0; min-width:250px; background:#fff; border:1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding:10px; opacity:0; visibility:hidden; transform: translateY(6px); z-index: 50;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ display:block; padding:10px 12px; border-radius:8px; font-size:0.92rem; font-weight:500; color: var(--ink); }
.dropdown a:hover{ background: var(--surface-tint); color: var(--navy); }
.dropdown a small{ display:block; color: var(--ink-soft); font-weight:400; font-size:0.78rem; margin-top:2px; }

.header-cta{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-phone{
  display:flex; align-items:center; gap:6px; font-family: var(--font-head); font-weight:700; font-size:0.9rem;
  color: var(--navy); white-space:nowrap; flex-shrink:0; padding:8px 4px;
}
.header-phone svg{ flex-shrink:0; color: var(--gold); }
.header-phone:hover{ color: var(--blue); }
@media (max-width:1360px){ .brand-tag{ display:none; } }
@media (max-width:1220px){ .header-phone span{ display:none; } .header-phone{ padding:8px; } }

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; flex-shrink:0;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ content:""; display:block; width:22px; height:2px; background: var(--navy); border-radius:2px; position:relative; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle span{ margin:5px 0; }

@media (max-width: 1030px){
  .main-nav{ display:none; }
  .header-phone{ display:none; }
  .nav-toggle{ display:flex; }
}

/* Mobile drawer */
.mobile-nav{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:600; visibility:hidden;
}
.mobile-nav[data-open="true"]{ visibility:visible; }
.mobile-nav__scrim{ position:absolute; top:0; right:0; bottom:0; left:0; background: rgba(11,31,58,0.45); opacity:0; transition:opacity .22s ease; }
.mobile-nav[data-open="true"] .mobile-nav__scrim{ opacity:1; }
.mobile-nav__panel{
  position:absolute; top:0; right:0; height:100%; width:min(340px, 86vw); background:#fff; box-shadow: var(--shadow-lg);
  padding:24px; transform: translateX(100%); transition: transform .24s ease; display:flex; flex-direction:column; gap:4px; overflow-y:auto;
}
.mobile-nav[data-open="true"] .mobile-nav__panel{ transform: translateX(0); }
.mobile-nav__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.mobile-nav__close{ background:none; border:none; font-size:1.6rem; line-height:1; color:var(--navy); cursor:pointer; padding:6px; }
.mobile-nav a{ display:block; padding:13px 6px; font-family: var(--font-head); font-weight:600; font-size:1.02rem; color: var(--navy); border-bottom:1px solid var(--border); }
.mobile-nav .mn-sub a{ font-size:0.92rem; font-weight:500; padding-left:16px; color: var(--ink-muted); border-bottom:none; }
.mobile-nav__cta{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }

/* ---------- Hero slider ---------- */
.hero-slider{ position:relative; overflow:hidden; background: var(--navy); }
.hero-slide{
  position:relative; display:none; min-height: 620px; align-items:center;
}
.hero-slide.is-active{ display:flex; }
.hero-slide__media{ position:absolute; top:0; right:0; bottom:0; left:0; }
.hero-slide__media img{ width:100%; height:100%; object-fit:cover; }
.hero-slide__scrim{
  position:absolute; top:0; right:0; bottom:0; left:0;
  background: linear-gradient(100deg, rgba(11,31,58,0.94) 0%, rgba(11,31,58,0.82) 38%, rgba(11,31,58,0.42) 68%, rgba(11,31,58,0.20) 100%);
}
.hero-slide__content{ position:relative; z-index:2; padding-block: 90px; max-width:640px; }
.hero-slide__content .eyebrow{ color: var(--gold-light); }
.hero-slide__content h1{ color:#fff; }
.hero-slide__content p.lede{ color: var(--on-navy-muted); margin-top:18px; }
.hero-slide__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-slide__phone{ margin-top:26px; display:flex; align-items:center; gap:10px; color:#fff; font-family: var(--font-head); font-weight:600; }
.hero-slide__phone a{ color:#fff; font-size:1.05rem; }

.hero-controls{
  position:absolute; z-index:3; bottom:28px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:22px;
}
.hero-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.06);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background-color .18s ease, border-color .18s ease;
}
.hero-arrow:hover{ background: rgba(255,255,255,0.18); border-color:#fff; }
.hero-dots{ display:flex; gap:9px; }
.hero-dot{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.35); border:none; cursor:pointer; padding:0; transition: background-color .18s ease, transform .18s ease; }
.hero-dot.is-active{ background: var(--gold); transform: scale(1.25); }

@media (max-width: 720px){
  .hero-slide{ min-height: 560px; }
  .hero-slide__content{ padding-block: 70px 110px; max-width:none; }
  .hero-slide__scrim{ background: linear-gradient(180deg, rgba(11,31,58,0.5) 0%, rgba(11,31,58,0.88) 62%, rgba(11,31,58,0.96) 100%); }
  .hero-slide__actions{ flex-direction:column; align-items:stretch; }
}

/* ---------- Generic page hero (non-slider inner pages) ---------- */
.page-hero{ position:relative; background: var(--navy); color:#fff; overflow:hidden; }
.page-hero__media{ position:absolute; top:0; right:0; bottom:0; left:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; opacity:0.9; }
.page-hero__scrim{ position:absolute; top:0; right:0; bottom:0; left:0; background: linear-gradient(105deg, rgba(11,31,58,0.95) 10%, rgba(11,31,58,0.80) 45%, rgba(11,31,58,0.35) 100%); }
.page-hero__content{ position:relative; z-index:2; padding-block: 64px 70px; max-width:680px; }
.page-hero h1{ color:#fff; }
.page-hero p.lede{ color: var(--on-navy-muted); margin-top:16px; }
.page-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.breadcrumb{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; font-size:0.85rem; color: var(--on-navy-muted); margin-bottom:18px; }
.breadcrumb a{ color: var(--on-navy-muted); }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb span[aria-hidden]{ color: rgba(255,255,255,0.4); }
.breadcrumb .current{ color:#fff; }

/* Light variant breadcrumb used on white-hero pages like blog articles */
.breadcrumb.on-light{ color: var(--ink-soft); }
.breadcrumb.on-light a{ color: var(--ink-soft); }
.breadcrumb.on-light a:hover{ color: var(--navy); }
.breadcrumb.on-light .current{ color: var(--navy); }

/* ---------- Grid utilities ---------- */
.grid{ display:grid; gap: clamp(20px, 3vw, 32px); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items:center; }
.split.reverse .split__media{ order:2; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; } .split.reverse .split__media{ order:0; } }
.split__media img{ border-radius: var(--r-lg); box-shadow: var(--shadow-md); width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }
.split__body ul{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.split__body li{ display:flex; gap:12px; align-items:flex-start; color: var(--ink); font-weight:500; }
.split__body li::before{ content:"✓"; color: var(--gold); font-weight:700; flex-shrink:0; margin-top:1px; }

/* ---------- Cards: service (image-led) ---------- */
.service-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition: box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{ box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.service-card__media{ aspect-ratio: 16/10; overflow:hidden; }
.service-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.service-card:hover .service-card__media img{ transform: scale(1.05); }
.service-card__body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.service-card__body h3{ font-size:1.15rem; }
.service-card__body p{ font-size:0.95rem; flex:1; }
.service-card__link{ font-family: var(--font-head); font-weight:600; color: var(--blue); font-size:0.92rem; margin-top:4px; }
.service-card__link:hover{ color: var(--navy); }

/* Cards: who-we-help (flat icon list, deliberately different from service-card kit) */
.who-list{ border-top:1px solid var(--border); }
.who-row{
  display:grid; grid-template-columns: 60px 1fr; gap:18px; padding:22px 4px; border-bottom:1px solid var(--border); align-items:start;
}
.who-row__icon{
  width:52px; height:52px; border-radius:12px; background: var(--surface-tint); display:flex; align-items:center; justify-content:center; color: var(--blue);
}
.who-row h3{ font-size:1.05rem; margin-bottom:4px; }
.who-row p{ font-size:0.94rem; margin:0; }

/* Cards: simple bordered (used for differentiators / benefits) */
.tile{ padding:26px; border:1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.tile h3{ font-size:1.05rem; margin-bottom:8px; }
.tile p{ font-size:0.94rem; margin:0; }
.tile--dark{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); }
.tile--dark h3{ color:#fff; }
.tile--dark p{ color: var(--on-navy-muted); }

/* Location chips */
.loc-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.loc-chip{
  padding:12px 20px; border:1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-head); font-weight:600; font-size:0.92rem;
  background:#fff; color:var(--navy); transition: border-color .16s ease, background-color .16s ease;
}
.loc-chip:hover{ border-color: var(--gold); background: var(--surface-tint); }

/* ---------- Process steps (sequence only) ---------- */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; counter-reset: step; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:6px; }
.step__num{
  font-family: var(--font-head); font-weight:700; font-size:0.95rem; color: var(--gold); display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.step__num::before{ counter-increment: step; content: counter(step, decimal-leading-zero); font-size:1.6rem; color: var(--navy); }
.step h3{ font-size:1.12rem; margin-bottom:8px; }
.step p{ font-size:0.95rem; }
.steps.on-navy .step__num::before{ color:#fff; }
.steps.on-navy h3{ color:#fff; }
.steps.on-navy p{ color: var(--on-navy-muted); }

/* ---------- FAQ accordion ---------- */
.faq{ border-top:1px solid var(--border); }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:20px 4px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; cursor:pointer; font-family: var(--font-head); font-weight:600; color: var(--navy); font-size:1.02rem;
}
.faq-q .plus{ flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--border-strong); position:relative; transition: transform .2s ease, background-color .2s ease; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background: var(--navy); border-radius:2px; }
.faq-q .plus::before{ width:11px; height:2px; top:50%; left:50%; transform:translate(-50%,-50%); }
.faq-q .plus::after{ width:2px; height:11px; top:50%; left:50%; transform:translate(-50%,-50%); transition: opacity .2s ease; }
.faq-item[data-open="true"] .plus{ background: var(--navy); transform: rotate(90deg); }
.faq-item[data-open="true"] .plus::before{ background:#fff; }
.faq-item[data-open="true"] .plus::after{ opacity:0; }
.faq-a{ overflow:hidden; max-height:0; transition: max-height .25s ease; }
.faq-item[data-open="true"] .faq-a{ max-height: 600px; }
.faq-a p{ padding: 0 34px 20px 4px; font-size:0.96rem; }

/* ---------- CTA banners ---------- */
.cta-banner{
  background: var(--navy); border-radius: var(--r-lg); padding: clamp(32px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-banner::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle, rgba(201,153,58,0.25), transparent 70%); }
.cta-banner h2, .cta-banner h3{ color:#fff; }
.cta-banner p{ color: var(--on-navy-muted); margin-top:8px; max-width:46ch; }
.cta-banner__actions{ display:flex; gap:14px; flex-wrap:wrap; }
.cta-banner--gold{ background: linear-gradient(120deg, var(--gold) 0%, #A5761F 100%); }
.cta-banner--gold h2, .cta-banner--gold h3{ color: var(--navy); }
.cta-banner--gold p{ color: rgba(11,31,58,0.75); }
.cta-banner--gold .btn-secondary{ border-color: rgba(11,31,58,0.35); color: var(--navy); }
.cta-banner--gold .btn-secondary:hover{ background: rgba(11,31,58,0.08); border-color: var(--navy); }

/* ---------- Forms ---------- */
.form-card{ background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); padding: clamp(24px,4vw,40px); box-shadow: var(--shadow-md); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family: var(--font-head); font-weight:600; font-size:0.9rem; color: var(--navy); margin-bottom:7px; }
.field .help{ display:block; font-size:0.8rem; color: var(--ink-soft); margin-top:5px; }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border-strong); border-radius: var(--r-sm); background:#fff; color: var(--ink); font-size:0.98rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23,105,170,0.15); outline:none; }
.field textarea{ resize: vertical; min-height:110px; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color: var(--error); }
.field-error{ display:none; color: var(--error); font-size:0.82rem; margin-top:6px; font-weight:500; }
.field.has-error .field-error{ display:block; }
.checkbox-field{ display:flex; gap:10px; align-items:flex-start; margin-bottom:20px; }
.checkbox-field input{ width:18px; height:18px; margin-top:3px; flex-shrink:0; accent-color: var(--navy); }
.checkbox-field label{ font-family: var(--font-body); font-weight:400; font-size:0.88rem; color: var(--ink-muted); }
.checkbox-field a{ color: var(--blue); font-weight:600; }
.form-success{ display:none; background: rgba(31,138,87,0.08); border:1px solid rgba(31,138,87,0.35); color:#15693F; padding:18px 20px; border-radius: var(--r-md); font-weight:500; margin-bottom:20px; }
.form-success.is-visible{ display:block; }
.form-note{ font-size:0.82rem; color: var(--ink-soft); margin-top:14px; }

/* ---------- Testimonial placeholder ---------- */
.testimonial-slot{
  border:1px dashed var(--border-strong); border-radius: var(--r-lg); padding:32px; text-align:center; color: var(--ink-soft);
  background: var(--surface-tint); font-style:italic; font-size:0.95rem;
}
.testimonial-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; }
@media (max-width:980px){ .testimonial-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .testimonial-grid{ grid-template-columns: 1fr; } }
.testimonial-card{
  border:1px dashed var(--border-strong); border-radius: var(--r-lg); padding:26px; background: var(--surface-tint);
  display:flex; flex-direction:column; gap:14px;
}
.testimonial-card__mark{ color: var(--gold); opacity:0.6; }
.testimonial-card p{ font-style:italic; color: var(--ink-soft); font-size:0.92rem; flex:1; margin:0; }
.testimonial-card__by{ display:flex; flex-direction:column; gap:2px; border-top:1px dashed var(--border-strong); padding-top:12px; }
.testimonial-card__by strong{ font-family: var(--font-head); font-size:0.85rem; color: var(--ink-soft); font-weight:600; }
.testimonial-card__by span{ font-size:0.78rem; color: var(--ink-soft); }
.testimonial-note{ text-align:center; font-size:0.85rem; color: var(--ink-soft); margin-top:18px; }

/* ---------- Blog / article cards ---------- */
.article-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden; transition: box-shadow .2s ease; }
.article-card:hover{ box-shadow: var(--shadow-md); }
.article-card__media{ aspect-ratio:16/10; overflow:hidden; }
.article-card__media img{ width:100%; height:100%; object-fit:cover; }
.article-card__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.article-meta{ display:flex; gap:10px; align-items:center; font-size:0.78rem; color: var(--ink-soft); font-weight:600; font-family: var(--font-head); }
.article-meta .cat{ color: var(--blue); }
.article-card h3{ font-size:1.08rem; }
.article-card p{ font-size:0.93rem; }
.read-more{ font-family: var(--font-head); font-weight:600; color: var(--blue); font-size:0.9rem; margin-top:6px; }

.featured-article{ display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center; background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); overflow:hidden; }
.featured-article__media{ height:100%; }
.featured-article__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/11; }
.featured-article__body{ padding: clamp(22px,4vw,42px); }
@media (max-width:860px){ .featured-article{ grid-template-columns:1fr; } }

/* Article detail typography */
.article-body{ max-width: 720px; margin: 0 auto; }
.article-body h2{ margin-top:2.4em; margin-bottom:0.6em; font-size:1.5rem; }
.article-body h3{ margin-top:1.8em; margin-bottom:0.5em; font-size:1.2rem; }
.article-body p{ color: var(--ink); font-size:1.03rem; margin-bottom:1.2em; }
.article-body ul, .article-body ol{ margin: 0 0 1.4em; padding-left:1.3em; list-style:disc; color:var(--ink); }
.article-body ol{ list-style:decimal; }
.article-body li{ margin-bottom:0.5em; padding-left:4px; }
.article-body li::marker{ color: var(--gold); }
.article-header{ max-width:720px; margin: 0 auto 8px; }
.article-header .article-meta{ margin-bottom:16px; font-size:0.85rem; }
.article-header h1{ font-size: clamp(1.9rem, 2.6vw + 1rem, 2.7rem); }
.article-hero-img{ max-width:720px; margin: 28px auto 0; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-md); }
.article-hero-img img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.toc{ background: var(--surface-tint); border:1px solid var(--border); border-radius: var(--r-md); padding:22px 26px; margin: 1.6em 0; }
.toc p{ font-family: var(--font-head); font-weight:700; color: var(--navy); margin-bottom:10px; font-size:0.92rem; }
.toc ol{ list-style:decimal; padding-left:1.2em; }
.toc a{ color: var(--blue); font-size:0.94rem; }
.toc a:hover{ text-decoration:underline; }
.callout{ background: var(--surface-tint); border-left:3px solid var(--gold); border-radius: 0 var(--r-md) var(--r-md) 0; padding:18px 22px; margin: 1.6em 0; }
.callout p{ margin:0; color: var(--ink); font-size:0.98rem; }
.callout p strong{ color: var(--navy); }
.disclaimer{ font-size:0.85rem; color: var(--ink-soft); background: var(--surface-tint); border-radius: var(--r-md); padding:18px 22px; margin-top: 2.4em; }
.article-mid-cta{ margin: 2.4em 0; }
.author-box{ display:flex; gap:16px; align-items:center; margin-top:3em; padding-top:2em; border-top:1px solid var(--border); max-width:720px; margin-inline:auto; }
.author-box__avatar{ width:52px; height:52px; border-radius:50%; background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; flex-shrink:0; }
.author-box p{ margin:0; font-size:0.88rem; }
.author-box strong{ display:block; color:var(--navy); font-size:0.95rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: var(--on-navy-muted); padding-top: clamp(48px,6vw,80px); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:48px; }
@media (max-width:980px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-brand .brand-text{ color:#fff; }
.footer-brand p{ margin-top:14px; font-size:0.92rem; max-width:32ch; }
.footer-col h4{ color:#fff; font-size:0.9rem; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:0.9rem; color: var(--on-navy-muted); }
.footer-col a:hover{ color:#fff; }
.footer-contact li{ display:flex; gap:10px; font-size:0.9rem; align-items:flex-start; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding: 22px 0 28px; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between; font-size:0.82rem; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:18px; }
.footer-legal a{ color: var(--on-navy-muted); }
.footer-legal a:hover{ color:#fff; }
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%; background: var(--navy); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow: var(--shadow-md); opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:400;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }

/* ---------- Misc utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head); font-weight:600; font-size:0.78rem; color:var(--blue); background: rgba(23,105,170,0.08); padding:6px 12px; border-radius: var(--r-pill); }
.stat-row{ display:flex; gap:clamp(24px,5vw,56px); flex-wrap:wrap; }
.stat-row .stat b{ display:block; font-family:var(--font-head); font-size:1.8rem; color:var(--navy); }
.stat-row .stat span{ font-size:0.85rem; color:var(--ink-soft); }

@media (max-width:640px){
  body{ font-size:16px; }
  .section{ padding-block: clamp(44px, 10vw, 64px); }
}

/* Progressive-enhancement fallback for the rare browser without CSS Grid */
@supports not (display: grid){
  .grid, .footer-grid{ display:flex; flex-wrap:wrap; }
  .grid > *{ flex:1 1 260px; }
  .footer-grid > *{ flex:1 1 200px; }
  .split{ display:flex; flex-wrap:wrap; }
  .split > *{ flex:1 1 320px; }
  .steps{ display:flex; flex-wrap:wrap; gap:32px; }
  .steps > *{ flex:1 1 220px; }
  .who-row{ display:flex; gap:18px; }
  .featured-article{ display:flex; flex-wrap:wrap; }
  .form-row{ display:flex; flex-wrap:wrap; }
  .form-row > *{ flex:1 1 240px; }
}
