/*
Theme Name: Dr. Duct India
Theme URI: https://www.drductindia.com
Description: GeneratePress child theme for Dr. Duct India — industrial and commercial air cooling.
Author: Dr. Duct India
Author URI: https://www.drductindia.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: drduct
*/
/* ==========================================================================
   Dr. Duct India — Design System
   Clean corporate industrial. Palette sampled from the brand logo.
   Zero external dependencies beyond one webfont pair (degrades gracefully).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;

  /* Brand — sampled from logo pixels */
  --blue:        #0A5BAA;
  --blue-600:    #0951A0;
  --blue-700:    #07437F;
  --blue-800:    #063668;
  --cyan:        #0097CE;
  --cyan-400:    #00AFE4;
  --cyan-100:    #CDEEFA;
  --cyan-50:     #EAF7FD;

  /* Neutrals */
  --navy:        #0A2340;
  --navy-800:    #0D2B4C;
  --navy-900:    #071A31;
  --ink:         #0F1926;
  --body:        #46546C;
  --muted:       #6C7B94;
  --line:        #DEE7F1;
  --line-soft:   #EDF3F9;
  --bg:          #FFFFFF;
  --tint:        #F5F9FD;
  --tint-2:      #EBF3FA;

  /* Semantic */
  --green:       #067A55;
  --green-50:    #E6F6F0;
  --amber:       #B45309;
  --amber-50:    #FEF6E7;
  --red:         #C02626;
  --red-50:      #FDECEC;

  /* Type */
  --f-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Space + shape */
  --wrap: 1200px;
  --wrap-narrow: 820px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --sh-sm: 0 1px 2px rgba(10,35,64,.06), 0 1px 3px rgba(10,35,64,.05);
  --sh:    0 2px 4px rgba(10,35,64,.05), 0 6px 16px rgba(10,35,64,.07);
  --sh-lg: 0 4px 8px rgba(10,35,64,.05), 0 18px 40px rgba(10,35,64,.11);
  --sh-blue: 0 8px 24px rgba(10,91,170,.22);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  /* clip, NOT hidden — overflow-x:hidden silently breaks position:sticky */
  overflow-x:clip;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.68;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-.021em;
  font-weight:800;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 1.35rem + 3.1vw, 3.55rem); }
h2{ font-size:clamp(1.66rem, 1.2rem + 1.9vw, 2.5rem); }
h3{ font-size:clamp(1.19rem, 1.05rem + .6vw, 1.44rem); letter-spacing:-.014em; }
h4{ font-size:1.06rem; letter-spacing:-.008em; font-weight:700; }
p{ margin:0 0 1.05em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-700); text-decoration:underline; text-underline-offset:3px; }
strong,b{ font-weight:650; color:var(--ink); }
ul,ol{ margin:0 0 1.05em; padding-left:1.15em; }
li{ margin-bottom:.42em; }
li:last-child{ margin-bottom:0; }
small{ font-size:.86rem; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
table{ border-collapse:collapse; width:100%; }
figure{ margin:0; }
:focus-visible{ outline:3px solid var(--cyan-400); outline-offset:2px; border-radius:3px; }
::selection{ background:var(--cyan-100); color:var(--navy); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 var(--r) 0; font-weight:600;
}
.skip:focus{ left:0; }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.15rem,4vw,2rem); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.sec{ padding-block:clamp(3.2rem,7vw,5.6rem); }
.sec-sm{ padding-block:clamp(2.2rem,4.5vw,3.4rem); }
.sec-tint{ background:var(--tint); }
.sec-tint2{ background:var(--tint-2); }
.sec-navy{ background:var(--navy); color:#C3D4E6; }
.sec-navy h1,.sec-navy h2,.sec-navy h3,.sec-navy h4{ color:#fff; }
.sec-navy strong{ color:#fff; }
.sec-navy a{ color:var(--cyan-400); }

.sec-navy-tex{
  background:
    linear-gradient(rgba(7,26,49,.93), rgba(7,26,49,.965)),
    url('../img/duct-texture.jpg') center/cover no-repeat;
  color:#C3D4E6;
}
.sec-navy-tex h2,.sec-navy-tex h3,.sec-navy-tex h4{ color:#fff; }
.sec-navy-tex strong{ color:#fff; }

.grid{ display:grid; gap:clamp(1rem,2.2vw,1.6rem); }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-split{ grid-template-columns:1.05fr .95fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; }
.g-side{ grid-template-columns:1fr 340px; gap:clamp(1.8rem,4vw,3rem); align-items:start; }
@media (max-width:1000px){
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-split,.g-side{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .g2,.g3{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .g4{ grid-template-columns:1fr; }
}

/* ---------- 4. Section headers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-body); font-size:.775rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
  margin:0 0 .85rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--cyan); flex:none; }
.sec-navy .eyebrow,.sec-navy-tex .eyebrow{ color:var(--cyan-400); }
.sec-head{ max-width:768px; margin-bottom:clamp(1.9rem,4vw,2.9rem); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head.center .eyebrow::before{ display:none; }
.lead{ font-size:clamp(1.03rem,.98rem + .22vw,1.16rem); color:var(--body); line-height:1.62; }
.sec-navy .lead,.sec-navy-tex .lead{ color:#B4C8DD; }

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-body); font-size:.955rem; font-weight:650; line-height:1.2;
  padding:.86rem 1.5rem; border-radius:var(--r); border:1.5px solid transparent;
  cursor:pointer; text-decoration:none !important; text-align:center;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ flex:none; }
.btn-pri{ background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.btn-pri:hover{ background:var(--blue-700); color:#fff; box-shadow:0 10px 28px rgba(10,91,170,.3); }
.btn-cyan{ background:var(--cyan); color:#fff; }
.btn-cyan:hover{ background:#0086b8; color:#fff; }
.btn-out{ background:transparent; color:var(--blue); border-color:#BFD6EA; }
.btn-out:hover{ background:var(--cyan-50); border-color:var(--blue); color:var(--blue-700); }
.btn-light{ background:#fff; color:var(--blue); }
.btn-light:hover{ background:var(--cyan-50); color:var(--blue-700); }
.btn-ghost-l{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.34); }
.btn-ghost-l:hover{ background:rgba(255,255,255,.16); color:#fff; border-color:#fff; }
.btn-wa{ background:#1FA855; color:#fff; }
.btn-wa:hover{ background:#17853F; color:#fff; }
.btn-lg{ padding:1.02rem 1.9rem; font-size:1.02rem; }
.btn-sm{ padding:.6rem 1rem; font-size:.875rem; }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.btn-row.center{ justify-content:center; }

.tlink{ display:inline-flex; align-items:center; gap:.42rem; font-weight:650; font-size:.95rem; }
.tlink::after{ content:"→"; transition:transform .18s var(--ease); }
.tlink:hover{ text-decoration:none; }
.tlink:hover::after{ transform:translateX(4px); }

/* ---------- 6. Header ---------- */
.topbar{
  background:var(--navy-900); color:#9FB6CE; font-size:.83rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:40px; padding-block:.35rem; }
.topbar-l,.topbar-r{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.topbar a{ color:#CBDCEC; display:inline-flex; align-items:center; gap:.42rem; }
.topbar a:hover{ color:#fff; text-decoration:none; }
.topbar svg{ opacity:.72; flex:none; }
@media (max-width:900px){ .topbar-l .tb-hide{ display:none; } }
@media (max-width:620px){ .topbar-r{ display:none; } .topbar .wrap{ justify-content:center; } }

.site-head{ position:sticky; top:0; z-index:80; background:#fff; border-bottom:1px solid var(--line); }
.site-head.stuck{ box-shadow:var(--sh); }
.head-in{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:50px; width:auto; }
.brand:hover{ text-decoration:none; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:.15rem; }
.nav > li{ position:relative; list-style:none; margin:0; }
.nav{ padding:0; margin-block:0; margin-left:auto; }
.nav a.nav-l, .nav button.nav-l{
  display:inline-flex; align-items:center; gap:.32rem;
  font-family:var(--f-body); font-size:.935rem; font-weight:550; color:var(--ink);
  padding:.62rem .74rem; border-radius:var(--r-sm); background:none; border:0; cursor:pointer;
  white-space:nowrap; transition:color .16s, background .16s;
}
.nav a.nav-l:hover,.nav button.nav-l:hover,.nav li.open > .nav-l{ color:var(--blue); background:var(--cyan-50); text-decoration:none; }
.nav a.nav-l[aria-current="page"]{ color:var(--blue); font-weight:700; }
.nav a.nav-l[aria-current="page"]::after{
  content:""; position:absolute; left:.74rem; right:.74rem; bottom:-1px; height:2.5px; background:var(--cyan);
}
.caret{ width:9px; height:9px; transition:transform .18s var(--ease); opacity:.6; }
.nav li.open .caret{ transform:rotate(180deg); }

.drop{
  position:absolute; top:calc(100% + 8px); left:0; min-width:290px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  padding:.5rem; margin:0; list-style:none; z-index:90;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav li.open > .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.drop li{ margin:0; }
.drop a{
  display:block; padding:.6rem .8rem; border-radius:var(--r-sm);
  color:var(--ink); font-size:.915rem; font-weight:550; line-height:1.35;
}
.drop a:hover{ background:var(--cyan-50); color:var(--blue); text-decoration:none; }
.drop a span{ display:block; font-size:.795rem; font-weight:400; color:var(--muted); margin-top:.12rem; }
.drop a:hover span{ color:var(--blue-600); }
.drop-sep{ height:1px; background:var(--line-soft); margin:.4rem .5rem; }

.head-cta{ display:flex; align-items:center; gap:.6rem; flex:none; }
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#fff; cursor:pointer; padding:0; align-items:center; justify-content:center; flex:none;
}
.burger span{ display:block; width:19px; height:2px; background:var(--ink); position:relative; transition:.2s var(--ease); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:19px; height:2px; background:var(--ink); transition:.2s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1120px){
  .head-in{ min-height:66px; }
  .nav a.nav-l,.nav button.nav-l{ padding:.6rem .55rem; font-size:.9rem; }
  .head-cta .btn{ padding:.72rem 1.1rem; font-size:.9rem; }
}
@media (max-width:1000px){
  .burger{ display:flex; }
  .brand img{ height:42px; }
  .head-cta .btn-quote{ display:none; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(370px,88vw);
    background:#fff; flex-direction:column; align-items:stretch; gap:0;
    padding:1.1rem 1.1rem 2.5rem; overflow-y:auto; z-index:95;
    border-left:1px solid var(--line); box-shadow:-14px 0 40px rgba(10,35,64,.16);
    transform:translateX(102%); transition:transform .26s var(--ease); margin-left:0;
  }
  .nav.open{ transform:translateX(0); }
  .nav > li{ border-bottom:1px solid var(--line-soft); }
  .nav a.nav-l,.nav button.nav-l{ width:100%; justify-content:space-between; padding:.95rem .35rem; font-size:1rem; border-radius:0; }
  .nav a.nav-l[aria-current="page"]::after{ display:none; }
  .drop{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-radius:0; min-width:0;
    padding:0 0 .7rem .35rem; display:none;
  }
  .nav li.open > .drop{ display:block; }
  .nav-mob-cta{ margin-top:1.2rem; display:grid; gap:.6rem; }
  .scrim{ position:fixed; inset:0; background:rgba(7,26,49,.5); z-index:94; opacity:0; visibility:hidden; transition:.24s; }
  .scrim.on{ opacity:1; visibility:visible; }
}
@media (min-width:1001px){ .nav-mob-cta{ display:none; } }

/* ---------- 7. Heroes ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(950px 560px at 88% -8%, rgba(0,175,228,.16), transparent 62%),
    linear-gradient(168deg, #F7FBFE 0%, #EAF3FA 100%);
  border-bottom:1px solid var(--line);
}
.hero-in{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4.5vw,3.6rem);
  align-items:center; padding-block:clamp(2.6rem,5.5vw,4.6rem); }
.hero h1{ margin-bottom:1.05rem; }
.hero h1 .hl{ color:var(--blue); }
.hero-lead{ font-size:clamp(1.06rem,1rem + .34vw,1.22rem); color:#3C4B63; max-width:56ch; margin-bottom:1.6rem; }
.hero-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.pill{
  display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid #CFE3F2;
  border-radius:999px; padding:.42rem .85rem; font-size:.845rem; font-weight:600; color:var(--blue-700);
}
.pill svg{ color:var(--cyan); flex:none; }
.hero-fig{ position:relative; }
.hero-fig > img{
  width:100%; border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  border:6px solid #fff; object-fit:cover; aspect-ratio:4/3.35;
}
.hero-badge{
  position:absolute; bottom:-16px; left:-16px; background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:.95rem 1.15rem; display:flex; align-items:center; gap:.8rem;
  border:1px solid var(--line); max-width:270px;
}
.hero-badge .hb-n{ font-family:var(--f-head); font-size:1.72rem; font-weight:800; color:var(--blue); line-height:1; letter-spacing:-.03em; }
.hero-badge .hb-t{ font-size:.795rem; line-height:1.3; color:var(--body); }
@media (max-width:1000px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-fig{ order:-1; }
  .hero-fig > img{ aspect-ratio:16/10; }
  .hero-badge{ left:auto; right:8px; bottom:-14px; }
}

.phero{
  background:
    linear-gradient(rgba(7,26,49,.9), rgba(10,35,64,.94)),
    url('../img/duct-texture.jpg') center 30%/cover no-repeat;
  color:#B9CCE0; padding-block:clamp(2rem,4vw,3rem) clamp(2.4rem,5vw,3.6rem);
}
.phero h1{ color:#fff; margin-bottom:.85rem; max-width:20ch; }
.phero h1 .hl{ color:var(--cyan-400); }
.phero .eyebrow{ color:var(--cyan-400); }
.phero .lead,.phero p{ color:#B4C8DD; }
.phero strong{ color:#fff; }
.phero .phero-lead{ color:#B4C8DD; font-size:clamp(1.02rem,.98rem + .25vw,1.15rem); max-width:62ch; }
.phero.wide h1{ max-width:30ch; }
/* Two-column page hero, used on the product series pages so the unit is
   visible above the fold. Text first in the source order, so it still reads
   correctly when the columns stack on mobile. */
.phero-in{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.8rem,4vw,3.2rem);
  align-items:center; }
.phero-in h1{ max-width:26ch; }
.phero-fig{ margin:0; }
.phero-fig img{ width:100%; border-radius:var(--r-xl); background:#fff; padding:12px;
  box-shadow:var(--sh-lg); }
@media (max-width:1000px){ .phero-in{ grid-template-columns:1fr; } .phero-in h1{ max-width:none; } }

/* Breadcrumbs */
.crumbs{ font-size:.83rem; margin-bottom:1.4rem; }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.42rem; list-style:none; padding:0; margin:0; }
.crumbs li{ margin:0; display:flex; align-items:center; gap:.42rem; color:#8AA3BD; }
.crumbs li::after{ content:"/"; color:#5C7591; }
.crumbs li:last-child::after{ display:none; }
.crumbs a{ color:#B9CCE0; }
.crumbs a:hover{ color:#fff; }
.crumbs [aria-current]{ color:var(--cyan-400); font-weight:600; }
.crumbs-light li{ color:var(--muted); }
.crumbs-light li::after{ color:var(--line); }
.crumbs-light a{ color:var(--body); }
.crumbs-light a:hover{ color:var(--blue); }
.crumbs-light [aria-current]{ color:var(--blue); }

/* ---------- 8. Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.2vw,1.75rem);
  transition:border-color .2s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card-hover:hover{ border-color:#B7D5EC; box-shadow:var(--sh-lg); transform:translateY(-3px); }
.card h3{ margin-bottom:.5rem; }
.card p{ font-size:.955rem; }
.card-ico{
  width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--blue), var(--cyan)); color:#fff; margin-bottom:1.05rem; flex:none;
}
.card-ico svg{ width:25px; height:25px; }
.card-ico.soft{ background:var(--cyan-50); color:var(--blue); border:1px solid var(--cyan-100); }
.card-num{
  font-family:var(--f-head); font-size:.83rem; font-weight:800; letter-spacing:.06em;
  color:var(--cyan); margin-bottom:.7rem;
}
.card-nav{ display:block; color:inherit; }
.card-nav:hover{ text-decoration:none; }
.card-nav h3{ color:var(--ink); }
.card-nav:hover h3{ color:var(--blue); }
.card-list{ list-style:none; padding:0; margin:.9rem 0 0; font-size:.9rem; }
.card-list li{ padding-left:1.4rem; position:relative; margin-bottom:.4rem; }
.card-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:2px;
  background:var(--cyan);
}

/* Stat strip */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:#fff; padding:clamp(1.15rem,2.4vw,1.7rem); text-align:center; }
.stat-n{ font-family:var(--f-head); font-size:clamp(1.72rem,1.3rem + 1.5vw,2.5rem); font-weight:800;
  color:var(--blue); line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.stat-n .u{ font-size:.5em; color:var(--cyan); margin-left:.1em; }
.stat-t{ font-size:.845rem; color:var(--body); margin-top:.5rem; line-height:1.35; }
.sec-navy .stats,.sec-navy-tex .stats{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.16); }
.sec-navy .stat,.sec-navy-tex .stat{ background:rgba(255,255,255,.045); }
.sec-navy .stat-n,.sec-navy-tex .stat-n{ color:#fff; }
.sec-navy .stat-t,.sec-navy-tex .stat-t{ color:#A9C0D8; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* Trust bar */
.trustbar{ background:var(--tint); border-bottom:1px solid var(--line); padding-block:1.1rem; }
.trustbar ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 2.1rem; list-style:none; padding:0; margin:0; }
.trustbar li{ display:flex; align-items:center; gap:.5rem; font-size:.885rem; font-weight:600; color:var(--navy); margin:0; }
.trustbar svg{ color:var(--green); flex:none; }

/* ---------- 9. Feature rows ---------- */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; }
.frow + .frow{ margin-top:clamp(2.6rem,5vw,4.2rem); }
.frow img{ border-radius:var(--r-lg); box-shadow:var(--sh); width:100%; object-fit:cover; }
.frow.flip .frow-txt{ order:2; }
@media (max-width:860px){ .frow{ grid-template-columns:1fr; } .frow.flip .frow-txt{ order:0; } }

.checks{ list-style:none; padding:0; margin:1.2rem 0 0; }
.checks li{ position:relative; padding-left:2rem; margin-bottom:.72rem; font-size:.965rem; }
.checks li::before{
  content:""; position:absolute; left:0; top:.28em; width:20px; height:20px; border-radius:50%;
  background:var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067A55' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.sec-navy .checks li::before,.sec-navy-tex .checks li::before{
  background:rgba(0,175,228,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AFE4' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* Negative list — used where we say "do not buy this". A tick would be a lie. */
.checks-x li::before{
  background:#FDECEC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.sec-navy .checks-x li::before,.sec-navy-tex .checks-x li::before{
  background:rgba(255,140,130,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9A90' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- 10. Spec tables ---------- */
.tbl-wrap{ border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden; }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl{ min-width:640px; font-size:.925rem; }
.tbl caption{ text-align:left; padding:1.05rem 1.15rem; font-family:var(--f-head); font-weight:700;
  font-size:1.02rem; color:var(--ink); border-bottom:1px solid var(--line); background:var(--tint); }
.tbl th,.tbl td{ padding:.78rem 1rem; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.tbl thead th{
  background:var(--blue); color:#fff; font-family:var(--f-head); font-weight:700; font-size:.86rem;
  letter-spacing:.015em; white-space:nowrap; border-bottom:0; position:sticky; top:0;
}
.tbl thead th:first-child{ background:var(--blue-700); }
.tbl tbody th{
  font-family:var(--f-body); font-weight:600; color:var(--navy); background:var(--tint);
  white-space:normal; min-width:190px;
}
.tbl td{ font-variant-numeric:tabular-nums; color:var(--body); white-space:nowrap; }
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover td{ background:var(--cyan-50); }
.tbl tbody tr:hover th{ background:var(--tint-2); }
.tbl .hero-cell{ color:var(--blue); font-weight:700; }
/* Comparison tables carry sentences, not figures, so they must be allowed to
   wrap — .tbl td is nowrap by default for spec sheets. */
.tbl-text td{ white-space:normal; min-width:14ch; }
.tbl-text{ min-width:520px; }
.tbl-sizing td{ font-weight:600; color:var(--navy); }
.th-sub{ display:block; font-weight:600; text-transform:none; letter-spacing:0;
  font-size:.73rem; opacity:.8; margin-top:.15rem; }
.td-sub{ display:block; font-weight:500; color:var(--muted); font-size:.82rem; margin-top:.2rem; }
.tbl-note{ padding:.85rem 1.15rem; font-size:.82rem; color:var(--muted); background:var(--tint); border-top:1px solid var(--line); }
.scroll-hint{ display:none; font-size:.8rem; color:var(--muted); margin-top:.6rem; }
@media (max-width:760px){ .scroll-hint{ display:block; } }

/* Definition / mini spec list */
.dl{ display:grid; grid-template-columns:auto 1fr; gap:.05rem 1.1rem; margin:0; font-size:.925rem; }
.dl dt{ font-weight:600; color:var(--navy); padding:.44rem 0; border-bottom:1px solid var(--line-soft); }
.dl dd{ margin:0; padding:.44rem 0; border-bottom:1px solid var(--line-soft); text-align:right;
  font-variant-numeric:tabular-nums; }
.dl dt:last-of-type,.dl dd:last-of-type{ border-bottom:0; }

/* ---------- 11. Product cards ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.6rem); }
@media (max-width:1000px){ .pgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .pgrid{ grid-template-columns:1fr; } }
.pcard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; transition:.22s var(--ease); }
.pcard:hover{ border-color:#B7D5EC; box-shadow:var(--sh-lg); transform:translateY(-3px); }
.pcard-fig{ background:linear-gradient(160deg,#EDF5FB,#DCEBF6); padding:1.4rem; position:relative; }
.pcard-fig img{ width:100%; aspect-ratio:4/3; object-fit:contain; mix-blend-mode:multiply; }
.pcard-tag{ position:absolute; top:.9rem; left:.9rem; background:var(--blue); color:#fff;
  font-size:.71rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.3rem .62rem; border-radius:5px; }
.pcard-b{ padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.pcard-b h3{ margin-bottom:.35rem; }
.pcard-cap{ font-size:.86rem; color:var(--muted); margin-bottom:.9rem; }
.pcard .dl{ margin-bottom:1.15rem; }
.pcard-foot{ margin-top:auto; display:flex; gap:.6rem; }

/* ---------- 12. Applications ---------- */
.app-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem;
  border-top:3px solid var(--cyan); transition:.22s var(--ease); }
.app-card:hover{ box-shadow:var(--sh-lg); transform:translateY(-3px); border-top-color:var(--blue); }
.app-card h3{ font-size:1.08rem; display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.app-card h3 svg{ color:var(--blue); flex:none; width:22px; height:22px; }
.app-card p{ font-size:.9rem; margin-bottom:.75rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; padding:0; margin:0; }
.tags li{ font-size:.775rem; background:var(--tint-2); color:var(--navy); padding:.24rem .55rem;
  border-radius:5px; margin:0; }

/* ---------- 13. Process ---------- */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{ counter-increment:s; position:relative; padding:0 0 2rem 4.1rem; }
.step::before{
  content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-.15rem;
  width:50px; height:50px; border-radius:50%; background:#fff; border:2px solid var(--cyan);
  color:var(--blue); font-family:var(--f-head); font-weight:800; font-size:1.02rem;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.step::after{ content:""; position:absolute; left:25px; top:2.9rem; bottom:-.3rem; width:2px;
  background:linear-gradient(var(--cyan-100), var(--line)); }
.step:last-child{ padding-bottom:0; }
.step:last-child::after{ display:none; }
.step h3{ font-size:1.13rem; margin-bottom:.4rem; padding-top:.55rem; }
.step p{ font-size:.955rem; margin-bottom:0; }
.sec-navy-tex .step::before,.sec-navy .step::before{ background:var(--navy-900); color:var(--cyan-400); }
.sec-navy-tex .step::after,.sec-navy .step::after{ background:linear-gradient(rgba(0,175,228,.5), rgba(255,255,255,.08)); }

/* ---------- 14. Reviews + client logos ---------- */
.rev-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; margin-bottom:1.8rem; }
.g-badge{ display:flex; align-items:center; gap:.9rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:.9rem 1.25rem; box-shadow:var(--sh-sm); }
.g-badge .gm{ width:30px; height:30px; flex:none; }
.g-badge .gt{ font-size:.83rem; color:var(--muted); line-height:1.3; }
.g-badge .gt b{ display:block; font-family:var(--f-head); font-size:1rem; color:var(--ink); }
.stars{ display:inline-flex; gap:1px; color:#F5A623; }
.stars svg{ width:16px; height:16px; }

#reviews-widget{ min-height:60px; }
.rev-fallback{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.rev-fallback.solo{ grid-template-columns:1fr; }
.rev-solo{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.5vw,2.4rem); text-align:center; box-shadow:var(--sh-sm); }
.rev-solo .gm{ width:44px; height:44px; }
.rev-solo h3{ margin:.9rem 0 .55rem; }
.rev-solo p{ max-width:56ch; margin-inline:auto; }
@media (max-width:860px){ .rev-fallback{ grid-template-columns:1fr; } }
.rev-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem; }
.rev-card .stars{ margin-bottom:.8rem; }
.rev-card blockquote{ margin:0 0 1.1rem; font-size:.955rem; color:var(--body); }
.rev-who{ display:flex; align-items:center; gap:.75rem; }
.rev-av{ width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-weight:700; font-size:.92rem; }
.rev-who .rn{ font-weight:650; color:var(--ink); font-size:.9rem; line-height:1.25; }
.rev-who .rd{ font-size:.79rem; color:var(--muted); }

.setup-note{
  background:var(--amber-50);
  border:1px dashed #DCA85F; border-radius:var(--r); padding:1rem 1.15rem; font-size:.88rem; color:#7A4A08;
}
.setup-note b{ color:#6B3F05; }
.setup-note code{ background:#fff; border:1px solid #E8CFA6; border-radius:4px; padding:.1rem .35rem; font-size:.86em; }

.logos{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.logos li{ list-style:none; margin:0; background:#fff; aspect-ratio:16/9; display:flex;
  align-items:center; justify-content:center; padding:1.1rem; }
.logos img{ max-height:52px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.62; transition:.22s; }
.logos li:hover img{ filter:none; opacity:1; }
.logo-ph{ width:100%; height:46px; border:1.5px dashed #C9D8E7; border-radius:6px; display:flex;
  align-items:center; justify-content:center; font-size:.72rem; color:#9FB2C6; text-align:center; padding:.3rem; }
@media (max-width:900px){ .logos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .logos{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 15. FAQ (CSS-only, no JS) ---------- */
.faq{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  display:flex; align-items:flex-start; gap:1rem; cursor:pointer; list-style:none;
  padding:1.15rem 1.35rem; font-family:var(--f-head); font-weight:700; font-size:1.005rem;
  color:var(--ink); transition:background .16s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:var(--cyan-50); }
.faq summary::after{
  content:""; margin-left:auto; flex:none; width:20px; height:20px; margin-top:.15rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A5BAA' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/17px no-repeat;
  transition:transform .2s var(--ease);
}
.faq details[open] summary{ background:var(--tint); }
.faq details[open] summary::after{ transform:rotate(180deg); }
.faq .ans{ padding:0 1.35rem 1.35rem; font-size:.955rem; }
.faq .ans > *:first-child{ margin-top:0; }

/* ---------- 16. Forms ---------- */
.formcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.4rem,3vw,2.1rem); box-shadow:var(--sh); }
.formcard.on-navy{ box-shadow:var(--sh-lg); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fgrid .full{ grid-column:1/-1; }
@media (max-width:620px){ .fgrid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.36rem; }
.field label{ font-size:.855rem; font-weight:600; color:var(--navy); }
.field label .req{ color:var(--red); }
.field .hint{ font-size:.775rem; color:var(--muted); }
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:.955rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r); padding:.72rem .85rem; width:100%;
  transition:border-color .16s, box-shadow .16s;
}
.field textarea{ min-height:118px; resize:vertical; }
.field select{
  appearance:none; cursor:pointer; padding-right:2.4rem;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7B94' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .8rem center/16px no-repeat;
}
.field input:hover,.field select:hover,.field textarea:hover{ border-color:#BFD6EA; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,91,170,.14);
}
.field input::placeholder,.field textarea::placeholder{ color:#9FB0C4; }
.field.err input,.field.err select,.field.err textarea{ border-color:var(--red); background:var(--red-50); }
.field .emsg{ font-size:.79rem; color:var(--red); font-weight:600; display:none; }
.field.err .emsg{ display:block; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.83rem; color:var(--body); }
.consent input{ width:17px; height:17px; margin-top:.22rem; flex:none; accent-color:var(--blue); }
.form-msg{ display:none; border-radius:var(--r); padding:.9rem 1.1rem; font-size:.9rem; font-weight:550; margin-top:1rem; }
.form-msg.ok{ display:block; background:var(--green-50); color:#04543B; border:1px solid #A8DCC7; }
.form-msg.bad{ display:block; background:var(--red-50); color:#8C1B1B; border:1px solid #F0B4B4; }
.btn[data-loading="1"]{ pointer-events:none; opacity:.72; }
.btn[data-loading="1"] .btn-tx::after{
  content:""; display:inline-block; width:13px; height:13px; margin-left:.5rem; vertical-align:-2px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.form-alt{ margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line-soft);
  font-size:.855rem; color:var(--muted); text-align:center; }

/* ---------- 17. Calculator ---------- */
.calc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(1.4rem,3vw,2.2rem); align-items:start; }
@media (max-width:940px){ .calc{ grid-template-columns:1fr; } }
.calc-in{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.3rem,2.6vw,1.9rem); box-shadow:var(--sh-sm); }
.calc-out{ background:var(--navy); border-radius:var(--r-xl); padding:clamp(1.3rem,2.6vw,1.9rem);
  color:#B9CCE0; position:sticky; top:96px; }
@media (max-width:940px){ .calc-out{ position:static; } }
.calc-out h3{ color:#fff; }
.rng{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.35rem; }
.rng-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.rng-top label{ font-size:.885rem; font-weight:600; color:var(--navy); }
.rng-val{ font-family:var(--f-head); font-weight:800; font-size:1.13rem; color:var(--blue);
  font-variant-numeric:tabular-nums; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:99px;
  background:var(--line); outline:0; cursor:pointer; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--blue); border:3px solid #fff; box-shadow:0 1px 5px rgba(10,35,64,.32); cursor:grab; }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--blue);
  border:3px solid #fff; box-shadow:0 1px 5px rgba(10,35,64,.32); cursor:grab; }
input[type=range]:focus-visible::-webkit-slider-thumb{ outline:3px solid var(--cyan-400); outline-offset:2px; }

.res-hero{ text-align:center; padding:1.1rem 0 1.3rem; border-bottom:1px solid rgba(255,255,255,.14); margin-bottom:1.3rem; }
.res-hero .rl{ font-size:.79rem; text-transform:uppercase; letter-spacing:.13em; color:#8FA9C3; margin-bottom:.5rem; }
/* NOTE: this is .rval, NOT .rv — .rv is the scroll-reveal class (section 21)
   and would set opacity:0 on these numbers. Do not rename it back. */
.res-hero .rval{ font-family:var(--f-head); font-size:clamp(2.1rem,1.5rem + 2.4vw,3rem); font-weight:800;
  color:#3FDCA0; line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.res-hero .rs{ font-size:.85rem; color:#A9C0D8; margin-top:.55rem; }
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.13);
  border-radius:var(--r); overflow:hidden; margin-bottom:1.3rem; }
.cmp-col{ background:rgba(255,255,255,.05); padding:1rem .9rem; text-align:center; }
.cmp-col.win{ background:rgba(63,220,160,.12); }
.cmp-col .ch{ font-size:.775rem; text-transform:uppercase; letter-spacing:.1em; color:#8FA9C3; margin-bottom:.6rem; }
.cmp-col .cv{ font-family:var(--f-head); font-size:1.5rem; font-weight:800; color:#fff; line-height:1;
  font-variant-numeric:tabular-nums; }
.cmp-col.win .cv{ color:#3FDCA0; }
.cmp-col .cu{ font-size:.775rem; color:#8FA9C3; margin-top:.4rem; }
.res-rows{ margin-bottom:1.35rem; }
.res-row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.9rem; }
.res-row:last-child{ border-bottom:0; }
.res-row .k{ color:#A9C0D8; }
.res-row .v{ font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.rec{ background:rgba(0,175,228,.13); border:1px solid rgba(0,175,228,.3); border-radius:var(--r);
  padding:1.05rem 1.15rem; margin-bottom:1.2rem; }
.rec .rk{ font-size:.775rem; text-transform:uppercase; letter-spacing:.11em; color:var(--cyan-400); margin-bottom:.42rem; }
.rec .rval{ font-family:var(--f-head); font-size:1.24rem; font-weight:800; color:#fff; margin-bottom:.3rem; }
.rec .rq{ font-size:.86rem; color:#A9C0D8; }
.calc-disc{ font-size:.775rem; color:#7F97B1; line-height:1.5; }
/* Lower-power alternative. calculator.js toggles this with el.hidden, so this
   rule must NOT set a display value — an author display rule would beat the
   browser's [hidden] rule and the box would never hide. Guard added below. */
.res-alt{ border:1px dashed rgba(255,255,255,.28); border-radius:var(--r);
  padding:.8rem .95rem; margin-bottom:1.2rem; font-size:.85rem; color:#A9C0D8; }
.res-alt strong{ color:#fff; }
[hidden]{ display:none !important; }
.calc-in .field{ margin-bottom:1.15rem; }
.calc-in .field:last-child{ margin-bottom:0; }
.calc-legend{ font-family:var(--f-head); font-size:.8rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  padding-bottom:.6rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line-soft); }

/* ---------- 18. Misc blocks ---------- */
.note{ border-left:3px solid var(--cyan); background:var(--cyan-50); padding:1rem 1.2rem;
  border-radius:0 var(--r) var(--r) 0; font-size:.935rem; }
.note.warn{ border-left-color:#D9A13B; background:var(--amber-50); color:#6B3F05; }
.note.warn strong{ color:#5A3404; }
.note p:last-child{ margin-bottom:0; }

.cta-band{
  background:linear-gradient(122deg, var(--blue-800) 0%, var(--blue) 58%, var(--cyan) 128%);
  color:#fff; border-radius:var(--r-xl); padding:clamp(1.8rem,4vw,3rem);
  display:grid; grid-template-columns:1fr auto; gap:1.8rem; align-items:center;
}
.cta-band h2{ color:#fff; margin-bottom:.55rem; }
.cta-band p{ color:#D6EBF8; margin-bottom:0; max-width:56ch; }
@media (max-width:860px){ .cta-band{ grid-template-columns:1fr; } }

.pcta{ background:var(--tint); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; }
.pcta h3{ font-size:1.13rem; }
.pcta .dl{ margin-bottom:1.2rem; }

.toc{ background:var(--tint); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem 1.5rem; margin-bottom:2.2rem; }
.toc h2{ font-size:.83rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  font-family:var(--f-body); font-weight:700; margin-bottom:.75rem; }
.toc ol{ margin:0; padding-left:1.25rem; font-size:.935rem; }
.toc li{ margin-bottom:.32rem; }

.prose{ font-size:1.045rem; }
.prose h2{ margin-top:2.4rem; padding-top:.3rem; }
.prose h3{ margin-top:1.9rem; }
.prose > *:first-child{ margin-top:0; }
.prose figure{ margin:2rem 0; }
.prose figcaption{ font-size:.845rem; color:var(--muted); margin-top:.6rem; text-align:center; }
.prose .tbl-wrap{ margin:1.8rem 0; }

.aside-card{ background:var(--tint); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.35rem; position:sticky; top:96px; }
.aside-card h3{ font-size:1.02rem; }
.aside-card ul{ list-style:none; padding:0; margin:0; font-size:.915rem; }
.aside-card li{ padding:.44rem 0; border-bottom:1px solid var(--line-soft); }
.aside-card li:last-child{ border-bottom:0; }

.meta-row{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.845rem; color:var(--muted);
  padding-bottom:1.3rem; border-bottom:1px solid var(--line); margin-bottom:1.8rem; }
.meta-row span{ display:inline-flex; align-items:center; gap:.42rem; }

/* ---------- 19. Footer ---------- */
.site-foot{ background:var(--navy-900); color:#93ACC6; font-size:.925rem; padding-top:clamp(2.6rem,5vw,4rem); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:2rem clamp(1.5rem,3vw,2.6rem);
  padding-bottom:2.6rem; }
@media (max-width:980px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-brand img{ height:56px; margin-bottom:1.05rem; }
.foot-brand p{ font-size:.9rem; color:#8AA3BD; max-width:34ch; }
.foot-h{ font-family:var(--f-head); font-size:.79rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.13em; color:#fff; margin-bottom:1.05rem; }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin-bottom:.6rem; }
.site-foot a{ color:#A8C0D8; }
.site-foot a:hover{ color:#fff; text-decoration:none; }
.nap{ font-style:normal; }
.nap li{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.85rem; }
.nap svg{ color:var(--cyan-400); flex:none; margin-top:.24rem; }
.socials{ display:flex; gap:.55rem; margin-top:1.2rem; }
.socials a{ width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#BBD0E5; transition:.18s; }
.socials a:hover{ background:var(--blue); color:#fff; }
.foot-bot{ border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; align-items:center; justify-content:space-between;
  font-size:.845rem; color:#7B95B0; }
.foot-bot ul{ display:flex; flex-wrap:wrap; gap:.6rem 1.3rem; }
.foot-bot li{ margin:0; }

/* ---------- 20. Sticky mobile action bar ---------- */
.mobar{ display:none; }
@media (max-width:760px){
  .mobar{
    display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; bottom:0; left:0; right:0; z-index:70;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(10,35,64,.12);
    padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); gap:.45rem;
  }
  .mobar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem;
    padding:.5rem .3rem; border-radius:var(--r-sm); font-size:.735rem; font-weight:650; line-height:1.1;
    text-align:center;
  }
  .mobar .m-call{ background:var(--blue); color:#fff; }
  .mobar .m-wa{ background:#1FA855; color:#fff; }
  .mobar .m-q{ background:var(--tint-2); color:var(--blue-700); }
  .mobar a:hover{ text-decoration:none; color:#fff; }
  .mobar .m-q:hover{ color:var(--blue-700); }
  body{ padding-bottom:74px; }
}

/* ---------- 21. Reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.07s; } .rv-d2{ transition-delay:.14s; }
.rv-d3{ transition-delay:.21s; } .rv-d4{ transition-delay:.28s; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }
/* Never put .rv on horizontally-scrolled children — IntersectionObserver won't fire. */

/* ---------- 22. Utilities ---------- */
.center{ text-align:center; }
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.mt1{ margin-top:.9rem; } .mt2{ margin-top:1.6rem; } .mt3{ margin-top:2.4rem; }
.mb2{ margin-bottom:1.6rem; } .mb3{ margin-bottom:2.4rem; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nowrap{ white-space:nowrap; }
.txt-green{ color:var(--green); } .txt-blue{ color:var(--blue); } .txt-muted{ color:var(--muted); }
.fs-sm{ font-size:.895rem; } .fs-xs{ font-size:.815rem; }

@media print{
  .topbar,.site-head,.mobar,.site-foot,.cta-band,form{ display:none !important; }
  body{ font-size:11pt; padding:0; }
  .sec{ padding-block:1rem; }
  a::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555; }
}

/* Success tick badge — thank-you page */
.tick-badge{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;margin-bottom:1.1rem}
.tick-badge svg{width:32px;height:32px}

/* FAQ page — topic groups and jump box */
.faq-jump{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:1.3rem 1.5rem;margin-bottom:2.2rem}
.faq-jump .eyebrow{margin:0 0 .7rem}
.faq-jump .checks{columns:2;column-gap:2rem}
@media (max-width:640px){.faq-jump .checks{columns:1}}
.faq-group{margin:0 0 2.4rem}
.faq-group>h2{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:2px solid var(--line)}

/* Two-column check list — service areas */
.checks.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.6rem}
@media (max-width:560px){.checks.cols-2{grid-template-columns:1fr}}

/* Resources — numbered steps in prose, and clickable guide cards */
.prose ol.steps-num{list-style:none;counter-reset:s;padding:0;margin:1.2rem 0}
.prose ol.steps-num>li{counter-increment:s;position:relative;padding:0 0 .9rem 2.6rem;margin:0}
.prose ol.steps-num>li::before{content:counter(s);position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--cyan);color:#fff;font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;justify-content:center}
.card-hover{position:relative}
.card-link{color:inherit;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0}
.card-hover:hover .card-link{color:var(--cyan)}