:root{
  --navy:#0A162A;
  --bg:#F7F8FB;
  --text:#0B1220;
  --muted:rgba(11,18,32,0.72);
  --white:#ffffff;
  --white-muted:rgba(255,255,255,0.78);
  --border-dark:rgba(255,255,255,0.12);
  --border:#E6E8EF;
  --accent:#F5B301;
  --shadow: 0 14px 40px rgba(10,22,42,0.10);
  --radius:16px;
  --max:1160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{flex:1 0 auto;}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--navy);
  border-bottom:1px solid var(--border-dark);
  height:76px;
}


.header-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  height:76px;
  padding:0;
}


.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  max-width:380px;
  min-width:0;
}

.brand-lockup{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-name{
  color:var(--white);
  font-weight:600;
  letter-spacing:0.6px;
  white-space:nowrap;
}


.brand-logo-clip{
  display:block;
  height:68px;
  width:auto;
  overflow:visible;
}


.brand-logo{
  display:block;
  height:68px;
  width:auto;
}


@media (max-width:520px){
  .site-header{height:64px;}
  .header-inner{height:64px;}
  .brand-logo-clip{height:58px;}
  .brand-logo{height:58px;}
}



.nav{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto;
}

.nav-link{
  color:var(--white-muted);
  font-size:14px;
  padding:8px 6px;
  border-radius:10px;
  text-decoration:none;
}

.nav-link:hover{
  color:var(--white);
  text-decoration:none;
  background:rgba(255,255,255,0.06);
}

.nav-link.active{
  color:var(--white);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:10px 14px;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
}

.btn-primary{
  background:var(--accent);
  color:#111;
  border-color:rgba(0,0,0,0.08);
}

.btn-primary:hover{
  text-decoration:none;
  filter:brightness(0.98);
}

.btn-secondary{
  background:transparent;
  color:var(--white);
  border:1px solid var(--border-dark);
}

.btn-secondary:hover{
  text-decoration:none;
  background:rgba(255,255,255,0.06);
}

.header-cta{white-space:nowrap}

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid var(--border-dark);
  background:transparent;
  color:#fff; /* SVG uses currentColor */
  cursor:pointer;
  padding:10px;
}

.nav-toggle-icon{display:block}

.nav-toggle span{
  display:block;
  height:2px;
  background:rgba(255,255,255,0.88);
  margin:5px 0;
  border-radius:2px;
}

.nav-drawer{
  display:none;
  border-top:1px solid var(--border-dark);
  background:var(--navy);
}

.nav-drawer-inner{
  padding:14px 0 18px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nav-drawer .nav-link{
  padding:12px 10px;
  border-radius:12px;
}

.nav-drawer-cta{
  margin-top:8px;
  width:fit-content;
}

.hero{
  background:var(--navy);
  color:var(--white);
  padding:34px 0 32px 0;
}

.hero-logo{
  height:88px;
  width:auto;
  display:block;
  margin:0 0 10px 0;
}

.hero h1{
  margin:0 0 16px 0;
  font-size:clamp(36px, 4.2vw, 60px);
  line-height:1.1;
  letter-spacing:-0.02em;
}

.hero-subhead{
  margin:0 0 14px 0;
  color:var(--white);
  font-size:18px;
  max-width:980px;
}

.hero-kicker{
  margin:0 0 18px 0;
  color:var(--white-muted);
  font-size:17px;
  max-width:980px;
}

.hero-reinforcement{
  margin:18px 0 0 0;
  color:var(--white-muted);
  font-size:16px;
  max-width:980px;
  border-left:3px solid rgba(245,179,1,0.65);
  padding-left:14px;
}

.hero-cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}

.section{
  padding:84px 0;
}

.section h2{
  font-size:32px;
  line-height:1.25;
  margin:0 0 18px 0;
  letter-spacing:-0.01em;
}

.page-hero{
  background:var(--navy);
  color:var(--white);
  padding:18px 0 18px 0;
  border-bottom:1px solid var(--border-dark);
}

/* Services & Pricing: match hero rhythm by tightening bottom padding on this page only */
.pricing-page .page-hero{padding-bottom:8px;}

/* Services & Pricing hero rhythm (scoped) */
.pricing-page .page-hero{padding-bottom:8px;}

/* Home: tighten gap below trust-layer paragraph (scoped) */
.home-page .trust-bridge{margin-bottom:5px;}

/* Home: reduce top gap before the What We Do boxed section (scoped) */
.home-page .what-we-do-section{padding-top:52px;}

/* Home: micro-adjust the boxed section top padding without touching global section spacing */
#home-whatwedo{
  padding-top:24px;
  margin-top:0;
}

.page-hero h1{
  margin:0 0 10px 0;
  font-size:clamp(34px, 3.6vw, 50px);
  line-height:1.15;
  letter-spacing:-0.02em;
}

.lead{
  margin:0;
  color:var(--white-muted);
  font-size:17px;
  max-width:980px;
}

.prose{
  max-width:900px;
}

.prose p{
  margin:0 0 14px 0;
  color:var(--text);
}

.has-hero .prose p{ color:var(--text); }

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow: 0 1px 0 rgba(10,22,42,0.02);
}

.card-light{
  background:#ffffff;
}

.stack{
  display:grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap:18px;
}

.card h3{
  margin:0 0 12px 0;
  font-size:18px;
}

.focus-title{
  font-weight:600;
  margin:12px 0 6px 0;
}

.section-divider{
  height:1px;
  background:var(--border);
  margin:56px 0;
}

.callout{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  max-width:900px;
}

.callout h2, .callout h3{
  margin:0 0 10px 0;
}

.steps{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:18px;
  max-width:920px;
}

.step{
  display:flex;
  gap:14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 18px;
}

.step-num{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:var(--text);
  flex:0 0 auto;
}

.step-content h3{
  margin:0 0 6px 0;
  font-size:18px;
}

.step-content p{margin:0;color:var(--muted)}

.tier-grid{
  display:grid;
  align-items: start;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}

.tier-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  box-shadow: 0 1px 0 rgba(10,22,42,0.02);
  position:relative;
}

.tier-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(245,179,1,0.55);
}

.tier-title{
  margin:0 0 8px 0;
  font-size:18px;
  line-height:1.25;

  min-height:72px;
}

.tier-price{
  font-weight:600;
  margin:0 0 16px 0;
}

.tier-card h3{
  margin:14px 0 6px 0;
  font-size:14px;
  text-transform:none;
}

.tier-card p{
  margin:0 0 10px 0;
  color:var(--muted);
}

.tier-card ul{
  margin:0 0 10px 18px;
  color:var(--muted);
}

.tier-btn{
  margin-top:10px;
  width:fit-content;
}

.tier-badge{
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border-light);
  background:rgba(245,179,1,0.08);
  color:var(--text);
}

.form-shell{
  max-width:900px;
}

.intake-form{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
}

.fieldset{
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  margin:0 0 14px 0;
}

.fieldset legend{
  padding:0 10px;
  font-weight:600;
  color:var(--text);
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}

.field span{
  font-size:13px;
  color:var(--muted);
}

input, select, textarea{
  font:inherit;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(245,179,1,0.65);
  box-shadow: 0 0 0 4px rgba(245,179,1,0.14);
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.field-help{
  margin:0 0 10px 0;
  color:var(--muted);
  font-size:14px;
}

.checks, .radios{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.check, .radio{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--text);
}

.check input, .radio input{
  margin-top:2px;
}

.form-actions{
  margin-top:10px;
}

.hidden{display:none}
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.tagline{
  margin-top:26px;
  font-weight:600;
}

.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  color:rgba(11,18,32,0.72);
  font-size:14px;
}

@media (max-width: 980px){
  /* Mobile header: wordmark left + burger right; hide desktop links */
  .site-header .nav{display:none !important}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .header-cta{display:none !important}
  .stack{grid-template-columns:1fr}
  .tier-grid{grid-template-columns:1fr}
  .checks, .radios{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}  .hero{padding:56px 0 52px 0}
  .section{padding:64px 0}
}


@media (max-width: 560px){
  .brand-name{display:none;}
  .brand-logo{height:48px;}
}


/* Netlify honeypot field hidden */
.bot-field{display:none !important;}

/* Pricing card header + badge layout */
.tier-card{display:flex;flex-direction:column;}
.tier-header{min-height:86px;display:flex;flex-direction:column;gap:10px;}
.tier-badge{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
  border:1px solid var(--border);
  color:var(--muted);
  background:#fff;
}
/* Keep price row aligned */
.tier-price{margin-top:0;}

@media (max-width: 700px){
  .hero-logo{height:64px; margin-bottom:8px;}
}


/* Nav text-only wordmark */
.brand-wordmark{
  font-family: "Inter Tight", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  color: var(--white);
  text-decoration:none;
  line-height:1;
  letter-spacing:0.2px;
  white-space:nowrap;
  display:block;
  font-size:clamp(18px, 2.2vw, 30px);
  overflow:hidden;
  text-overflow:ellipsis;
}



/* About page logo placement */
.about-logo{
  max-width:720px;
  width:100%;
  margin: 0 0 28px 0;
}
.about-logo img{
  display:block;
  width:100%;
  height:auto;
  max-width:720px;
}


/* Nav wordmark responsiveness (Option B) */
@media (max-width: 980px){
  .brand{max-width:320px;}
  .brand-wordmark{font-size:clamp(16px, 2.6vw, 24px);}
}
@media (max-width: 700px){
  .brand{max-width:240px;}
}
@media (max-width: 560px){
  .brand-wordmark{display:none;}
}

/* Mobile: ensure brand wordmark remains visible (do not hide on small screens) */
@media (max-width: 980px){
  .brand{display:flex !important; visibility:visible !important; opacity:1 !important;}
  .brand-wordmark{display:block !important; visibility:visible !important; opacity:1 !important; color:#fff;}
  .brand svg, .brand svg *{fill:#fff; stroke:#fff;}
}

/* ====================================================
   UI POLISH PASS (CSS-only) — hierarchy, scanning, focus
   ==================================================== */

/* Hero: strengthen hierarchy + readability */
.hero h1{
  margin-bottom:14px;
}
.hero-subhead{
  font-size:17px;
  line-height:1.55;
  font-weight:500;
  max-width:920px;
}
.hero-kicker{
  font-size:16px;
  line-height:1.55;
  max-width:920px;
}
.hero-reinforcement{
  font-size:15px;
  line-height:1.6;
  max-width:920px;
}

/* Primary CTA: clearer affordance + keyboard focus */
.btn-primary{
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-link:focus-visible,
.nav-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(245,179,1,0.22);
  border-color: rgba(245,179,1,0.55);
}
.btn:active{ transform: translateY(1px); }

/* Services & Pricing: scanning rhythm */
.tier-grid{
  gap:22px;
}
.tier-card{
  padding:24px;
}
.tier-title{
  margin-bottom:10px;
}
.tier-card p{
  margin-bottom:12px;
}
.tier-card ul{
  margin-top:6px;
  margin-bottom:12px;
}
.tier-card li{
  margin:6px 0;
}

/* Decision aid / callout: visually distinct without adding noise */
.callout{
  box-shadow: 0 10px 26px rgba(10,22,42,0.06);
  border-color: rgba(10,22,42,0.10);
}

/* Section rhythm */
.section{
  padding:88px 0;
}
@media (max-width: 980px){
  .section{ padding:68px 0; }
}



/* ====================================================
   MOBILE POLISH (CSS-only) — readability, tap targets,
   spacing rhythm, tier scanability
   ==================================================== */

/* 1) Global mobile typography + container breathing room */
@media (max-width: 560px){
  .container{
    width: calc(100% - 32px);
  }

  body{
    line-height: 1.7;
  }

  .prose{
    max-width: 100%;
  }

  .prose p{
    margin-bottom: 16px;
  }
}

/* 2) Header / nav drawer: tap targets + spacing */
@media (max-width: 980px){
  .nav-drawer-inner{
    padding: 16px 0 22px 0;
    gap: 10px;
  }

  .nav-drawer .nav-link{
    padding: 14px 12px;
  }

  .nav-drawer-cta{
    margin-top: 10px;
  }

  .nav-toggle{
    width: 48px;
    height: 48px;
  }
}

/* 3) Hero: prevent over-wrapping + improve scanability */
@media (max-width: 560px){
  .hero{
    padding: 44px 0 40px 0;
  }

  .hero h1{
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.08;
    margin-bottom: 12px;
  }

  .hero-subhead{
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .hero-kicker{
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .hero-reinforcement{
    font-size: 14px;
    line-height: 1.65;
    padding-left: 12px;
    margin-top: 16px;
  }

  .hero-cta-row{
    margin-top: 18px;
    gap: 10px;
  }

  .btn{
    min-height: 44px;
    padding: 12px 14px;
  }
}

/* 4) Page hero: reduce density */
@media (max-width: 560px){
  .page-hero{
    padding: 16px 0 14px 0;
  }

  .page-hero h1{
    font-size: clamp(28px, 7.8vw, 36px);
    margin-bottom: 8px;
  }

  .lead{
    font-size: 15px;
    line-height: 1.6;
  }
}

/* 5) Cards / steps: spacing rhythm for reading */
@media (max-width: 560px){
  .card,
  .callout,
  .intake-form{
    padding: 18px;
  }

  .step{
    padding: 16px;
    gap: 12px;
  }

  .step-content h3{
    font-size: 17px;
  }

  .step-num{
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
}

/* 6) Services & Pricing: tier scanability */
@media (max-width: 980px){
  .tier-grid{
    gap: 16px;
  }
}

@media (max-width: 560px){
  .tier-card{
    padding: 18px;
  }

  .tier-header{
    min-height: auto;
    gap: 8px;
  }

  .tier-title{
    min-height: auto;
    font-size: 18px;
    margin-bottom: 8px;
  }

  .tier-price{
    margin-bottom: 14px;
  }

  .tier-card ul{
    margin-left: 18px;
  }

  .tier-btn{
    width: 100%;
    justify-content: center;
  }

  .tier-badge{
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* 7) Forms: mobile comfort */
@media (max-width: 560px){
  input, select, textarea{
    padding: 13px 12px;
    border-radius: 12px;
  }

  .fieldset{
    padding: 14px;
  }

  .field-help{
    font-size: 14px;
    line-height: 1.6;
  }

  .check, .radio{
    gap: 10px;
  }
}

/* 8) Footer: stack nicely on small screens */
@media (max-width: 560px){
  .footer-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 0;
  }
}


/* Homepage: What We Do visual pop (governed) */
.what-we-do .what-we-do-scope{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  box-shadow: 0 10px 26px rgba(10,22,42,0.04);
}
.what-we-do .what-we-do-title{
  font-size:36px;
  line-height:1.2;
  font-weight:700;
  margin:0 0 16px 0;
}
.what-we-do .what-we-do-thesis{
  margin:0 0 22px 0;
  color:var(--text);
}
.selective-elevation{
  padding-top:36px;
  padding-bottom:72px;
}
.selective-elevation .selective-title{
  margin:0 0 10px 0;
  font-size:22px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-0.01em;
}
.selective-elevation .selective-body{
  margin:0;
  max-width:900px;
}
@media (max-width: 980px){
  .what-we-do .what-we-do-scope{ padding:22px; }
  .what-we-do .what-we-do-title{ font-size:34px; }
  .selective-elevation{ padding-top:28px; padding-bottom:60px; }
}
@media (max-width: 560px){
  .what-we-do .what-we-do-title{ font-size:32px; }
}

/* Tier 2 norming label (editorial, no badge styling) */
.tier2-label{
  position:absolute;
  top:-22px;
  right:0;
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
}

@media (max-width: 560px){
  .tier2-label{
    top:-18px;
    font-size:12px;
  }
}



/* ====================================================
   Homepage "What We Do" visual hierarchy (governed)
   ==================================================== */

.what-we-do-section{
  /* restrained container treatment: very light neutral surface */
  background: rgba(10,22,42,0.02);
  border-top: 1px solid var(--border);
}

.what-we-do-wrap{
  background: #ffffff;
  border: 1px solid rgba(10,22,42,0.10);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 8px 22px rgba(10,22,42,0.05);
}

.what-we-do-heading{
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px 0;
}

.what-we-do-thesis{
  margin: 0 0 18px 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  max-width: 980px;
}

.what-we-do-subhead{
  margin: 18px 0 6px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.what-we-do-block p{
  margin: 0 0 12px 0;
  color: var(--muted);
}

.selective-elevation{
  margin-top: 18px;
  max-width: 900px;
}

.selective-elevation h3{
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.selective-elevation p{
  margin: 0;
  color: var(--muted);
}

/* ====================================================
   Global rhythm: reduce hero-to-first-section gap (~40%)
   ==================================================== */

.hero + .section,
.page-hero + .section{
  padding-top: 52px;
}


.page-hero + main > .section:first-child{
  padding-top: 52px;
}
@media (max-width: 980px){
  .hero + .section,
  .page-hero + .section{
    padding-top: 40px;
  }
}

@media (max-width: 560px){
  .what-we-do-heading{ font-size: 32px; }
  .what-we-do-wrap{ padding: 20px; }
}


/* --- Surgical fixes (Netlify + spacing + pricing label) --- */

/* Reduce gap between hero and first section (~40%) */
.hero + .section,
.page-hero + .section{
  padding-top: 22px;
}
@media (min-width: 900px){
  .hero + .section,
  .page-hero + .section{
    padding-top: 32px;
  }
}

/* Footer sits at bottom on short pages */
html, body{ height: 100%; }
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
main{ flex: 1 0 auto; }
.site-footer{ margin-top: auto; }

/* About-only sticky footer fix (scoped) */
.about-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.about-page main{
  flex: 1 0 auto;
}
.about-page footer{
  margin-top: auto;
}

/* Pricing fine print under cards */
.pricing-fineprint{
  margin-top: 14px;
  font-size: 13px;
  color: rgba(10,22,42,0.72);
}

/* Tier 2 editorial label (plain text above card, right-aligned) */
.tier2-slot .tier-card{
  width: 100%;
}
/* How it Works outcome callout prominence + alignment */
.callout{
  max-width: 920px;
  background: #F7F8FB;
  border: 1px solid rgba(10,22,42,0.14);
  box-shadow: 0 1px 0 rgba(10,22,42,0.04);
  margin-top: 14px; /* match step spacing */
}
.callout h3{
  font-weight: 700;
}
.callout p{
  font-size: 16px;
}

/* Mobile header: ensure wordmark and burger visible/positioned */
.brand-title, .brand-wordmark, .site-title{
  color: #FFFFFF;
}
@media (max-width: 780px){
  .header-inner{
    justify-content: space-between;
    gap: 12px;
  }
  .nav-toggle{
    margin-left: auto;
  }
  .nav-toggle span,
  .nav-toggle svg{
    color: #FFFFFF;
    fill: #FFFFFF;
  }
}

/* Example review samples framing */
.samples-intro{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.samples-disclaimer{
  margin-top: 28px;
  font-size: 13px;
  color: rgba(10,22,42,0.72);
}

/* Pricing page only: restore hero-to-cards breathing room without affecting other pages */
.pricing-page .pricing-cards-section{
  padding-top: 96px;
}

/* Pricing page only: let tier cards size naturally (no forced header/title min-heights or flex-stretch) */
.pricing-page .tier-card{
  display: block;
}
.pricing-page .tier-header{
  min-height: unset;
}
.pricing-page .tier-title{
  min-height: unset;
}


/* Mobile burger icon visibility (navy header) */
@media (max-width: 980px){
  .nav-toggle,
  .nav-toggle svg,
  .nav-toggle svg *{
    color: #ffffff;
    fill: #ffffff;
    stroke: #ffffff;
  }
  .nav-toggle span{
    background: #ffffff;
  }
}

/* Contact form confirmation secondary line */
.confirmation-subtext{
  margin: 6px 0 0 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
}

/* Pricing cards natural height (remove forced stretch) */
.tier-card{
  min-height: unset;
  height: auto;
}
.tier-card > *{
  flex: 0 0 auto;
}

/* Privacy page typography scale (scoped) */
.privacy-page main{
  font-size: 15px;
}
.privacy-page h1{ font-size: 34px; }
.privacy-page h2{ font-size: 22px; }
.privacy-page h3{ font-size: 18px; }
.privacy-page p, .privacy-page li{ font-size: 15px; }

/* Tier 1 card height cleanup (no extra blank space below CTA) */
.tier-grid .tier-card:first-child{
  justify-content: flex-start;
}

@media (max-width: 980px){
  #pricing-hero{
  padding:18px 0 18px 0;
}
}


/* Services & Pricing hero padding tune (scoped) */
#pricing-hero{
  padding:18px 0 18px 0;
}


/* Example Review intro container (scoped) */
.example-review-page .example-intro{
  width:90%;
  margin:0 auto;
  background:#fff;
}
.example-review-page .example-intro > :first-child{
  margin-top:0;
}
@media (max-width: 980px){
  .example-review-page .example-intro{
    width:100%;
  }
}


/* Example Review: match How It Works spacing below hero (scoped) */
.example-review-page .page-hero + main > .section:first-child{
  padding-top:52px;
}
@media (max-width: 980px){
  .example-review-page .page-hero + main > .section:first-child{
    padding-top:40px;
  }
}


/* Example Review intro card */
.example-intro-box {
  background: #ffffff;
  border-radius: 8px;
  padding: 28px 32px;
  margin: 24px 0 40px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
  .example-intro-box {
    padding: 22px 20px;
  }
}

/* Home: remove unintended bold on residual guidance sentence */
#home-whatwedo-residual{ font-weight:400; }

/* Home: keep Selective Elevation™ at bottom with consistent section rhythm */
.home-page .selective-elevation-section{
  /* Match Home surface + tighten and center content within the light-grey band */
  background: rgba(10,22,42,0.02);
  display: flex;
  align-items: center;
  padding: 36px 0;
  margin-top: 0;
}

/* Home: reduce excess whitespace between What We Do and Selective Elevation™ */
.home-page .what-we-do-section{
  padding-bottom: 28px;
}

/* Home: ensure What We Do card spans the same content width as other sections */
.home-page .what-we-do-wrap{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Home: reduce side padding inside Selective Elevation™ grey band (desktop + mobile values) */
.home-page .selective-elevation-section .container{
  width: min(var(--max), calc(100% - 24px));
}
@media (max-width: 980px){
  .home-page .selective-elevation-section{
    padding: 28px 0;
  }
  .home-page .selective-elevation-section .container{
    width: min(var(--max), calc(100% - 20px));
  }
}

@media (max-width: 560px){
  .home-page .selective-elevation-section .container{
    width: min(var(--max), calc(100% - 16px));
  }
}


/* --- HOMEPAGE READABILITY POLISH --- */

/* 1) Narrow What We Do card for better line length */
.home-page .what-we-do-wrap{
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* 2) Increase vertical spacing between subsection blocks */
.home-page .what-we-do-wrap h3{
  margin-top: 32px;
}
.home-page .what-we-do-wrap h3 + p{
  margin-top: 12px;
}

/* 3) Reduce emphasis on 'We focus on three areas:' */
.home-page .what-we-do-wrap p strong{
  font-weight: 400;
  font-size: 0.95em;
}

/* 4) Judgment Layer: quiet callout with subtle accent line */
.home-page .judgment-layer{
  margin-top: 72px;
}
.home-page .judgment-layer .container{
  position: relative;
  padding-left: 28px;
}
.home-page .judgment-layer .container::before{
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #F5B301;
  opacity: 0.7;
}

/* 5) Improve section separation */
.home-page .selective-elevation-section{
  margin-top: 72px;
}


/* FINAL MICRO-TWEAKS — HOMEPAGE ONLY */

/* Increase spacing above each 'We focus on three areas' subsection heading */
.home-page .what-we-do-wrap h3{
  margin-top: 44px;
}

/* Increase pause before Judgment Layer */
.home-page .judgment-layer{
  margin-top: 96px;
}


/* FINAL MICRO-TWEAK: What We Do intro spacing (homepage only) */

/* Separate the two intro sentences into distinct blocks */
.home-page .what-we-do-wrap p:first-of-type{
  margin-bottom: 14px;
}

/* Add clearer transition gap before 'We focus on three areas:' */
.home-page .what-we-do-wrap p:nth-of-type(2){
  margin-bottom: 18px;
}


/* EXAMPLE REVIEW PAGE — CENTERING + GAP FIX V2 (page-scoped only) */
.example-review-page .prose{
  margin-left: auto;
  margin-right: auto;
}

.example-review-page .section.sample-request-section{
  padding-top: 12px;
  padding-bottom: 84px;
}

.example-review-page .samples-disclaimer{
  margin-bottom: 10px;
}


/* Example Review micro adjustments */
.example-review-page .example-preform-note{
  text-align: center;
  margin-bottom: 6px;
}
.example-review-page .sample-request-section{
  padding-top: 10px; /* override large .section padding-top on this page */
  margin-top: 0;
}