/* ---------- self-hosted fonts (no third-party requests) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================================
   Sightline Exteriors — design system
   Navy + white. Montserrat headings, Inter body. Restraint reads expensive.
   ========================================================================== */

:root{
  --navy:#16294A;
  --navy-2:var(--ink);
  --navy-deep:var(--ink-deep);
  --blue:#2F8FE0;        /* accent / icons on light */
  --blue-btn:#1B72C0;    /* button fill — WCAG AA with white text */
  --blue-ink:#1F6FB4;
  --blue-soft:var(--blue-tint);
  --blue-light:#8FC4F2;
  --ink:var(--text);
  --muted:var(--text-2);
  --muted-2:var(--text-3);
  --line:var(--hairline);
  --line-dark:rgba(255,255,255,.16);
  --paper:#FFFFFF;
  --mist:var(--canvas);
  --mist-2:#EEF1F5;
  --green:#1E7A5A;

  --radius:14px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-sm:0 2px 8px -2px rgba(16,32,64,.10);
  --shadow:0 18px 46px -24px rgba(16,32,64,.34);
  --shadow-lg:0 30px 70px -30px rgba(16,32,64,.42);
  --maxw:1180px;
  --gutter:24px;
  --hdr:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.65;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--blue-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--navy);margin:0 0 .5em;line-height:1.14;letter-spacing:-.015em;font-weight:800}
h1{font-size:clamp(2.15rem,4.9vw,3.5rem)}
h2{font-size:clamp(1.65rem,3.2vw,2.35rem)}
h3{font-size:clamp(1.12rem,1.7vw,1.32rem);font-weight:700}
h4,h3.as-h4{font-size:1.02rem;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.45em}
strong{font-weight:700;color:var(--navy)}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
p a,li a,.faq-a a,.fineprint a,.small a{text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.pill-row a,.card-link,.footer-grid a,.footer-towns a,.crumbs a{text-decoration:none}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)}
section{padding:78px 0}
section.tight{padding:56px 0}
.bg-mist{background:var(--mist)}
.bg-navy{background:linear-gradient(158deg,var(--navy) 0%,var(--navy-deep) 100%);color:var(--text)}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.bg-navy a:not(.btn){color:var(--blue-light)}
.bg-navy .btn-white{color:var(--navy)}
.bg-navy .btn-primary,.bg-navy .btn-navy,.bg-navy .btn-outline-white{color:#fff}
.cta-band a:not(.btn){color:var(--blue-light)}
.bg-navy p{color:var(--text-2)}
.bg-navy strong,.band strong,.cta-band strong,.hero-photo strong{color:#fff}
.bg-navy li,.band li{color:var(--text-2)}
.bg-navy em,.band em{color:var(--text-2)}
/* white surfaces inside a navy section must not inherit navy-section text colors */
.bg-navy .plan{color:var(--ink)}
.bg-navy .plan-body p{color:var(--muted)}
.bg-navy .plan-body .fineprint{color:var(--muted-2)}
.bg-navy .plan-body,.bg-navy .plan-body li{color:var(--ink)}
.bg-navy .plan-head p{color:var(--text-2)}
.bg-navy .plan strong,.bg-navy .plan-body li{color:var(--navy)}
.bg-navy .card strong{color:#fff}

.eyebrow{font-family:"Montserrat",sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--blue-ink);margin:0 0 12px}
.bg-navy .eyebrow{color:var(--blue-light)}
.section-head{max-width:660px;margin:0 0 44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{font-size:1.06rem;color:var(--muted);margin-bottom:0}
.bg-navy .section-head p{color:var(--text-2)}
.lead{font-size:1.13rem;color:var(--muted);line-height:1.7}
.bg-navy .lead{color:var(--text-2)}
.small{font-size:.86rem;color:var(--muted)}
.fineprint{font-size:.79rem;color:var(--muted-2);line-height:1.6}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.g-svc{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.g-svc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-svc{grid-template-columns:1fr}}
.g4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.94rem;letter-spacing:.005em;
  padding:14px 26px;border-radius:var(--radius-pill);border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  text-decoration:none!important;line-height:1.2;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue-btn);color:#fff;box-shadow:0 12px 26px -14px rgba(27,114,192,.8)}
.btn-primary:hover{background:#155C9E;box-shadow:0 16px 30px -14px rgba(27,114,192,.9)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--navy);background:var(--mist)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--blue-soft)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-lg{padding:16px 32px;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* clip, not hidden: guards the 100vw full-bleed bands without creating a
   scroll container that JS or a stray anchor could scroll sideways. */
html,body{overflow-x:clip;max-width:100%}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.hdr{display:flex;align-items:center;gap:24px;height:var(--hdr)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand svg{height:42px;width:auto;color:var(--navy)}
.sl-logo{height:42px;width:auto;fill:currentColor}
.brand:hover{text-decoration:none}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{font-family:"Montserrat",sans-serif;font-size:.88rem;font-weight:600;color:var(--navy);
  padding:9px 12px;border-radius:9px}
.nav a:hover{background:var(--mist);text-decoration:none}
.nav a[aria-current="page"]{color:var(--blue-ink)}
.hdr-phone{display:inline-flex;align-items:center;gap:7px;font-family:"Montserrat",sans-serif;
  font-weight:700;font-size:.92rem;color:var(--navy);padding:9px 12px;white-space:nowrap}
.hdr-phone:hover{text-decoration:none;color:var(--blue-ink)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);
  border-radius:10px;padding:9px 12px;cursor:pointer;color:var(--navy);font-size:.85rem;
  font-family:"Montserrat",sans-serif;font-weight:700}
.mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;padding:8px 0 16px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:12px 4px;font-family:"Montserrat",sans-serif;font-weight:600;
  color:var(--navy);border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:14px;width:100%}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--ink) 0%,var(--navy) 42%,var(--navy-deep) 100%);
  color:#fff;padding:88px 0 92px}
.hero-art{position:absolute;inset:0;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:#fff;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--blue-light)}
.hero-sub{font-size:1.16rem;color:var(--text-2);max-width:56ch;margin-bottom:26px;line-height:1.68}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:"Montserrat",sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  padding:8px 15px;border-radius:var(--radius-pill);margin-bottom:22px}
.hero-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.14)}
.hero-trust span{display:inline-flex;align-items:center;gap:8px;font-size:.87rem;color:var(--text-3);font-weight:500}
.hero-trust svg{flex:0 0 auto;color:var(--blue-light)}
.page-hero{padding:60px 0 56px}
.page-hero h1{max-width:22ch}
.page-hero .hero-sub{margin-bottom:0}
.crumbs{font-size:.82rem;color:var(--text-3);margin-bottom:18px}
.crumbs a{color:var(--text-3)}
.crumbs span{opacity:.55;padding:0 7px}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--mist);border-bottom:1px solid var(--line);padding:22px 0}
.trust-strip ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:14px 26px;
  list-style:none;margin:0;padding:0}
.trust-strip li{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:.88rem;
  color:var(--navy);font-weight:500;line-height:1.45}
.trust-strip svg{flex:0 0 auto;margin-top:2px;color:var(--blue)}

/* ---------- cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card h3,.card h4{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.card-link:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--hairline-hover);text-decoration:none}
.card-link{display:block;color:inherit}
.card-link:hover h3{color:var(--blue-ink)}
.card-more{font-family:"Montserrat",sans-serif;font-weight:700;font-size:.85rem;color:var(--blue-ink);
  margin-top:14px;display:inline-block}
.card-icon{width:44px;height:44px;border-radius:11px;background:var(--blue-soft);color:var(--navy);
  display:grid;place-items:center;margin-bottom:16px}
.bg-navy .card{background:rgba(255,255,255,.05);border-color:var(--line-dark);color:var(--text-2)}
.bg-navy .card-icon{background:rgba(143,196,242,.14);color:var(--blue-light)}

.numbered{counter-reset:sl;list-style:none;padding:0;margin:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.numbered li{counter-increment:sl;position:relative;padding:20px 20px 20px 62px;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.numbered li::before{content:counter(sl,decimal-leading-zero);position:absolute;left:20px;top:19px;
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:.82rem;color:#fff;background:var(--navy);
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.numbered strong{display:block;font-family:"Montserrat",sans-serif;font-weight:700;color:var(--navy);
  font-size:.99rem;margin-bottom:3px}
.numbered span{font-size:.9rem;color:var(--muted);line-height:1.55}
.bg-navy .numbered li{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.bg-navy .numbered li::before{background:var(--blue);color:#fff}
.bg-navy .numbered strong{color:#fff}
.bg-navy .numbered span{color:var(--text-2)}

/* ---------- checklist ---------- */
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:31px;margin-bottom:11px;font-size:.96rem;line-height:1.55}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;
  background:var(--blue-soft);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316294A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.bg-navy .checks li::before{background-color:rgba(143,196,242,.2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FC4F2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}
.checks.two{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;align-content:start}

/* ---------- membership ---------- */
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow)}
.plan-head{background:linear-gradient(150deg,var(--navy),var(--navy-deep));color:#fff;padding:30px 30px 26px}
.plan-head h3{color:#fff;font-size:1.5rem;margin-bottom:6px}
.plan-head p{color:var(--text-2);margin:0;font-size:.95rem}
.plan-badge{display:inline-block;font-family:"Montserrat",sans-serif;font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;background:var(--blue);color:var(--paper);
  padding:5px 11px;border-radius:var(--radius-pill);margin-bottom:14px}
.plan-body{padding:28px 30px 30px}
.price-tier{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.price-tier:last-of-type{border-bottom:0}
.price-tier b{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--navy);font-size:1rem;display:block}
.price-tier em{font-style:normal;font-size:.85rem;color:var(--muted);display:block}
.price-tier .amt{font-family:"Montserrat",sans-serif;font-weight:800;color:var(--navy);
  font-size:1.55rem;white-space:nowrap;text-align:right}
.price-tier .amt small{font-weight:600;font-size:.82rem;color:var(--muted);display:block;
  letter-spacing:0;margin-top:-2px}
.plan-cta{margin-top:22px}
.plan-cta .btn{width:100%}

/* ---------- pricing table ---------- */
.ptable{width:100%;border-collapse:collapse;font-size:.94rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ptable th,.ptable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{background:var(--mist);font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable td.num{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--navy);white-space:nowrap}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- quote form ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow)}
.field{margin-bottom:17px}
.field label,.legend{display:block;font-family:"Montserrat",sans-serif;font-size:.82rem;font-weight:700;
  color:var(--navy);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-size:.96rem;color:var(--ink);background:#fff;transition:border-color .15s}
.field .hint{font-size:.79rem;color:var(--muted);margin-top:5px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
fieldset{border:0;padding:0;margin:0 0 17px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:9px 16px;border:1.5px solid var(--line);border-radius:var(--radius-pill);
  font-size:.88rem;font-weight:500;color:var(--navy);cursor:pointer;transition:all .15s;background:#fff}
.chip input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.dropzone{border:1.5px dashed var(--hairline-hover);border-radius:12px;padding:18px 14px;text-align:center;
  cursor:pointer;transition:all .15s;background:var(--mist);display:block}
.dropzone:hover{border-color:var(--blue);background:var(--blue-soft)}
.dropzone.filled{border-style:solid;border-color:var(--green);background:var(--paper)}
.dropzone input{position:absolute;width:1px;height:1px;opacity:0}
.dropzone b{display:block;font-family:"Montserrat",sans-serif;font-size:.85rem;color:var(--navy);margin-bottom:2px}
.dropzone em{font-style:normal;font-size:.76rem;color:var(--muted)}
.dz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.est-box{background:var(--blue-soft);border:1px solid var(--hairline);border-radius:var(--radius);
  padding:18px 20px;margin:20px 0}
.est-box .est-label{font-family:"Montserrat",sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue-ink);margin-bottom:6px}
.est-box .est-amt{font-family:"Montserrat",sans-serif;font-weight:800;font-size:1.85rem;color:var(--navy);
  line-height:1.15;margin-bottom:6px}
.est-box p{font-size:.83rem;color:var(--text-2);margin:0;line-height:1.55}
.form-success{background:var(--paper);border:1px solid var(--blue);border-radius:var(--radius-lg);padding:34px 30px}
.form-success h3{color:var(--green)}

/* ---------- misc components ---------- */
.badge{display:inline-flex;align-items:center;gap:7px;font-family:"Montserrat",sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.05em;padding:6px 13px;border-radius:var(--radius-pill);
  background:var(--blue-soft);color:var(--navy)}
.badge-gold{background:var(--blue-tint);color:var(--blue-ink)}
.badge-green{background:var(--blue-tint);color:var(--green)}
.pill-row{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 6px;padding:0;list-style:none}
.pill-row li{margin:0}
.pill-row a,.pill-row span{display:inline-block;padding:8px 15px;border:1px solid var(--line);
  border-radius:var(--radius-pill);font-size:.87rem;color:var(--navy);background:#fff;font-weight:500}
.pill-row a:hover{border-color:var(--navy);background:var(--mist);text-decoration:none}
.bg-navy .pill-row a,.bg-navy .pill-row span{background:rgba(255,255,255,.06);
  border-color:var(--line-dark);color:var(--text-2)}
.bg-navy .pill-row a:hover{background:rgba(255,255,255,.13)}

.quote-note{border-left:3px solid var(--blue);padding:4px 0 4px 20px;margin:26px 0;
  font-size:1.04rem;color:var(--navy);font-style:italic;line-height:1.6}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;
  font-family:"Montserrat",sans-serif;font-weight:700;color:var(--navy);font-size:1rem;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:26px;width:11px;height:11px;
  border-right:2.2px solid var(--blue);border-bottom:2.2px solid var(--blue);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .faq-a{padding:0 40px 20px 0;color:var(--muted);font-size:.96rem}
.faq .faq-a p:last-child{margin-bottom:0}

.cta-band{background:linear-gradient(150deg,var(--navy),var(--navy-deep));color:#fff;
  border-radius:var(--radius-lg);padding:44px 42px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin-bottom:.4em}
.cta-band p{color:var(--text-2);max-width:56ch;margin:0 auto 24px}
.cta-band .btn-row{justify-content:center}

.photo-slot{position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,var(--ink),var(--navy-deep));aspect-ratio:4/3;
  display:grid;place-items:center}
.photo-slot svg{width:52%;opacity:.13;color:#fff}
.photo-slot.wide{aspect-ratio:16/9}
.photo-slot img{width:100%;height:100%;object-fit:cover}

.stat{text-align:center;padding:6px}
.stat b{display:block;font-family:"Montserrat",sans-serif;font-weight:800;font-size:2.1rem;
  color:var(--navy);line-height:1.1}
.bg-navy .stat b{color:#fff}
.stat span{font-size:.85rem;color:var(--muted)}
.bg-navy .stat span{color:var(--text-2)}

.founders{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--footer-text);padding:56px 0 0;font-size:.92rem}
.site-footer h4,.site-footer .footer-h{color:#fff;font-family:"Montserrat",sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:14px;font-weight:700}
.site-footer a{color:var(--footer-text)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:36px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin-bottom:8px}
.footer-brand svg{height:44px;width:auto;color:#fff;margin-bottom:16px}
.footer-brand .sl-logo{height:44px;color:#fff}
.footer-brand p{color:var(--footer-dim);font-size:.9rem;max-width:34ch}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.footer-badges span{font-size:.73rem;padding:5px 11px;border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-pill);color:var(--text-2)}
.footer-bottom{margin-top:44px;border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:.81rem;color:var(--footer-dim)}
.footer-bottom a{color:var(--footer-dim)}
.footer-towns{margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.footer-towns h4{margin-bottom:12px}
.footer-towns a{font-size:.84rem;color:var(--footer-dim);display:inline-block;margin:0 16px 7px 0}

/* ---------- mobile sticky CTA ---------- */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
  border-top:1px solid var(--line);padding:9px 12px;gap:9px;
  box-shadow:0 -6px 24px -14px rgba(16,32,64,.4)}
.mobile-cta .btn{flex:1;padding:13px 10px;font-size:.9rem}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .nav,.hdr-phone{display:none}
  .nav-toggle{display:inline-flex;align-items:center;gap:7px}
  .split{grid-template-columns:1fr;gap:34px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:760px){
  section{padding:56px 0}
  section.tight{padding:42px 0}
  .hero{padding:60px 0 64px}
  .page-hero{padding:44px 0 44px}
  body{padding-bottom:66px}
  .mobile-cta{display:flex}
  .checks.two{grid-template-columns:1fr}
  .cta-band{padding:34px 24px}
  .form-card{padding:22px 18px}
  .plan-head,.plan-body{padding-left:22px;padding-right:22px}
  .footer-grid{grid-template-columns:1fr}
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row > .btn,.plan-cta .btn,.form-card > .btn{width:100%}
  .site-header .btn{width:auto;padding:11px 16px;font-size:.86rem}
  .mobile-nav .btn{width:100%}
  .mobile-cta .btn{width:auto;flex:1}
}
@media (max-width:480px){
  .field-row{grid-template-columns:1fr}
  .price-tier .amt{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{
  .site-header,.mobile-cta,.cta-band{display:none}
}

/* ==========================================================================
   Photography
   ========================================================================== */
.ph{margin:0}
.ph img{width:100%;height:auto;border-radius:var(--radius);display:block}
.ph figcaption{font-size:.78rem;color:var(--muted-2);margin-top:10px;line-height:1.5}
.bg-navy .ph figcaption{color:var(--footer-dim)}
.ph-shadow img{box-shadow:var(--shadow-lg)}
.ph-lg img{border-radius:var(--radius-lg)}

/* ---------- photographic hero ---------- */
.hero-photo{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;isolation:isolate}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:0}
.hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero-photo .hero-bg picture{display:block;width:100%;height:100%}
.hero-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(97deg, rgba(9,20,40,.93) 0%, rgba(10,22,44,.88) 30%,
                    rgba(12,26,50,.62) 48%, rgba(14,29,56,.20) 68%, rgba(14,29,56,.06) 100%),
    linear-gradient(to top, rgba(9,20,40,.55) 0%, rgba(9,20,40,0) 38%)}
.hero-photo .hero-bg img{filter:saturate(1.06) contrast(1.04)}
.hero-photo .wrap{position:relative;z-index:2}
.hero-photo .hero-inner{padding:112px 0 104px;max-width:620px}
.hero-photo h1 .nb{white-space:nowrap}
.hero-photo h1{color:#fff;letter-spacing:-.022em}
.hero-photo h1 em{font-style:normal;color:var(--blue-light)}
.hero-photo .hero-sub{color:var(--text-2);font-size:1.17rem}
.hero-photo .hero-eyebrow{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(6px)}
.hero-photo .hero-trust{border-top-color:rgba(255,255,255,.2)}
.hero-photo .hero-trust span{color:var(--text-2)}

/* page heroes with a photo band behind */
.page-hero-photo{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.page-hero-photo h1,.page-hero-photo h2,.page-hero-photo h3{color:#fff}
.page-hero-photo .hero-sub{color:var(--text-2)}
.page-hero-photo .hero-eyebrow{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.22)}
.page-hero-photo .crumbs,.page-hero-photo .crumbs a{color:var(--text-3)}
.page-hero-photo .crumbs b{color:var(--text-2);font-weight:600}
.page-hero-photo .hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-photo .hero-bg img{width:100%;height:100%;object-fit:cover;border-radius:0}
.page-hero-photo .hero-bg picture{display:block;width:100%;height:100%}
.page-hero-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(97deg,rgba(10,22,44,.95) 0%,rgba(12,26,50,.9) 40%,
             rgba(15,31,58,.66) 72%,rgba(16,33,62,.5) 100%)}
.page-hero-photo .wrap{position:relative;z-index:2;padding-top:62px;padding-bottom:58px}

/* ---------- full-bleed photo band ---------- */
.band{position:relative;overflow:hidden;background:var(--navy-deep)}
.band .band-bg{position:absolute;inset:0}
.band .band-bg img{width:100%;height:100%;object-fit:cover;border-radius:0}
.band .band-bg picture{display:block;width:100%;height:100%}
.band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(9,20,40,.92) 0%,rgba(11,24,46,.84) 34%,
             rgba(13,27,52,.55) 58%,rgba(14,29,56,.22) 82%,rgba(14,29,56,.10) 100%)}
.band .band-bg img{filter:saturate(1.05)}
.band .wrap{position:relative;z-index:2;padding:70px 0}
.band h2,.band h3{color:#fff}
.band p{color:var(--text-2)}

/* ---------- image cards ---------- */
.card-media{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-media .card-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--mist-2)}
.card-media .card-photo img{width:100%;height:100%;object-fit:cover;border-radius:0;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.card-media:hover .card-photo img{transform:scale(1.045)}
.card-media .card-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.card-media .card-body p{font-size:.93rem;color:var(--muted)}
.card-media .card-more{margin-top:auto;padding-top:12px}
.card-media .card-tag{position:absolute;left:12px;top:12px;z-index:2;
  background:rgba(10,22,44,.82);color:#fff;backdrop-filter:blur(6px);
  font-family:"Montserrat",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 11px;border-radius:var(--radius-pill)}

/* ---------- crew / founders ---------- */
.crew-split{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:48px;align-items:center}
.crew-split .ph img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.sig{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--navy);font-size:.95rem;
  margin-top:20px;line-height:1.5}
.sig span{display:block;font-weight:500;font-size:.84rem;color:var(--muted);letter-spacing:.01em}
.bg-navy .sig{color:#fff}
.bg-navy .sig span{color:var(--text-2)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq .faq-a p:first-child{color:var(--ink);font-size:1rem}
.faq .faq-a p:first-child strong{color:var(--navy)}
.faq-toc{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px;padding:0;list-style:none}
.faq-toc a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);
  border-radius:var(--radius-pill);background:#fff;font-family:"Montserrat",sans-serif;
  font-size:.86rem;font-weight:600;color:var(--navy);text-decoration:none}
.faq-toc a:hover{border-color:var(--navy);background:var(--mist);text-decoration:none}
.faq-toc svg{color:var(--blue)}
.faq-section{margin-bottom:52px;scroll-margin-top:100px}
.faq-section > h2{margin-bottom:6px}
.faq-section > .sub{color:var(--muted);margin-bottom:18px;font-size:1rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .crew-split{grid-template-columns:1fr;gap:30px}
  .crew-split .ph{max-width:340px}
}
@media (max-width:760px){
  .hero-photo .hero-inner{padding:64px 0 60px;max-width:none}
  .hero-photo::after{background:
    linear-gradient(180deg, rgba(9,20,40,.86) 0%, rgba(11,24,46,.62) 40%,
                    rgba(10,22,44,.80) 74%, rgba(9,20,40,.93) 100%)}
  .hero-photo .hero-bg img{object-position:70% 45%}
  .band .wrap{padding:48px 0}
  .band::after{background:linear-gradient(180deg,rgba(9,20,40,.9) 0%,rgba(11,24,46,.86) 100%)}
  .page-hero-photo .wrap{padding-top:44px;padding-bottom:44px}
}

/* ==========================================================================
   FAQ page furniture — answers people can see, not just read
   ========================================================================== */

/* big-number strip: the four things everyone searches for */
.answers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.answer-tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;position:relative;overflow:hidden}
.answer-tile .k{font-family:"Montserrat",sans-serif;font-weight:800;color:var(--navy);
  font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.05;letter-spacing:-.02em}
.answer-tile .k small{font-size:.92rem;font-weight:700;color:var(--muted);letter-spacing:0}
.answer-tile .q{font-family:"Montserrat",sans-serif;font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--blue-ink);margin:0 0 10px}
.answer-tile p{font-size:.86rem;color:var(--muted);margin:8px 0 0;line-height:1.5}
.answer-tile::after{content:"";position:absolute;right:-18px;bottom:-18px;width:70px;height:70px;
  border-radius:50%;background:var(--blue-soft);z-index:0}
.answer-tile > *{position:relative;z-index:1}

/* section headers with a photo */
.faq-section-head{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:center;
  margin-bottom:20px}
.faq-section-head .ph img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover}
.faq-section-head h2{margin-bottom:4px}
.faq-section-head .sub{margin:0;color:var(--muted);font-size:1rem}

/* soft wash vs pressure wash — the single most-searched comparison */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.versus .side{padding:26px 24px}
.versus .side.good{background:var(--blue-soft)}
.versus .vs{display:grid;place-items:center;background:var(--navy);color:#fff;padding:0 18px;
  font-family:"Montserrat",sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.12em}
.versus h3{margin-bottom:6px}
.versus .psi{font-family:"Montserrat",sans-serif;font-weight:800;color:var(--navy);
  font-size:2rem;line-height:1.1;margin:6px 0 2px}
.versus .psi small{display:block;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.versus ul{margin:14px 0 0;padding:0;list-style:none}
.versus li{font-size:.9rem;color:var(--muted);padding-left:20px;position:relative;margin-bottom:7px}
.versus li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  background:var(--blue)}
.versus .side.bad li::before{background:var(--meta)}

/* the South Jersey year */
.season-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.season{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.season .cap{background:var(--navy);color:#fff;padding:11px 16px;font-family:"Montserrat",sans-serif;
  font-weight:700;font-size:.84rem;letter-spacing:.03em;display:flex;justify-content:space-between;
  align-items:baseline;gap:8px}
.season .cap em{font-style:normal;font-weight:500;font-size:.72rem;color:var(--text-3)}
.season .body{padding:16px}
.season ul{margin:0;padding:0;list-style:none}
.season li{font-size:.88rem;color:var(--muted);line-height:1.5;padding-left:18px;position:relative;
  margin-bottom:8px}
.season li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;
  background:var(--blue-light)}
.season li:last-child{margin-bottom:0}
.season.now{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,143,224,.12)}

@media (max-width:900px){
  .answers{grid-template-columns:repeat(2,1fr)}
  .season-grid{grid-template-columns:repeat(2,1fr)}
  .versus{grid-template-columns:1fr}
  .versus .vs{padding:9px;font-size:.72rem}
}
@media (max-width:560px){
  .answers{grid-template-columns:1fr}
  .season-grid{grid-template-columns:1fr}
  .faq-section-head{grid-template-columns:84px 1fr;gap:16px}
}

/* ==========================================================================
   CLEAR ROOM — Sightline Exteriors
   Token layer + surface corrections, applied over the v1 component set.

   Governed by CLEAR_ROOM_DESIGN_SYSTEM.md v0.1. Where this and DECISIONS.md
   disagree, DECISIONS.md wins.

   THE ONE RULE
   White room, single blue switch. The room is white and near-white. The
   photograph is the design. Chrome recedes into hairlines. Exactly one
   chromatic colour exists, and it means "this is interactive."

   Four corollaries:
     1. Blue is never decorative.
     2. No drop shadows at rest.
     3. Never two filled buttons.
     4. Photography is full-bleed and real.

   ONE DOCUMENTED DEVIATION — read before "fixing" it:
   The system specifies #2F8FE0 as the filled-primary fill and concedes it is
   3.2:1 with white text ("acceptable for a >=15px button label"). 3.2:1 is
   below WCAG AA for text at that size, and this site ships a 0-violation
   axe-core result as a public trust claim. So --blue-fill is #1B72C0 (4.6:1),
   the same hue family, used ONLY for the filled pill. Every other blue on the
   site is the true token #2F8FE0. The "single blue switch" read is preserved;
   the accessibility claim stays true.

   More of the same kind, for the same reason:
     - Eyebrows take --blue-ink (5.26:1), not --blue (3.43:1). They are 12px
       text, and the spec's own note forbids blue for copy.
     - The Standard's 01-12 numerals take --text-3 (4.93:1), not --meta
       (2.26:1). They index twelve published points, so they are content.
     - .card-more and .hdr-phone take --blue-ink, not --blue. Both are 13px
       text; --blue at that size is the same 3.43:1 failure as the eyebrows.
     - .footer-bottom takes --footer-dim (4.71:1 on --ink-deep), not the
       retired --footer-faint (#6E7787, 3.77:1).
   The general rule behind all of these: --blue is never text below 24px.
   Every other value is the spec's, unchanged.
   ========================================================================== */

:root{
  /* ---- Ink ---- */
  --ink:#16294A;            /* headings, wordmark, primary ink — the brand navy */
  --ink-deep:#0E1C34;       /* utility bars and the footer — the one place navy goes darker */
  --text:#3C4658;           /* body copy inside cards and lists */
  --text-2:#5B6473;         /* lede, section subheads, secondary paragraphs */
  --text-3:#68717F;         /* card descriptions, tertiary copy */
  --text-4:#4D5666;         /* nav links, trust-strip body */
  --meta:#A6ADB9;           /* numerals, spec labels, timestamps */

  /* ---- Paper ---- */
  --paper:#FFFFFF;          /* default canvas, card surfaces */
  --canvas:#F5F5F7;         /* alternating section bands, trust strip, membership band */
  --row-hover:#FAFBFC;      /* hover fill on list rows */

  /* ---- Line ---- */
  --hairline:#E2E5EA;       /* the default 1px everywhere */
  --hairline-2:#DFE2E8;     /* vertical dividers inside the trust strip */
  --hairline-3:#E6E8EC;     /* top/bottom edges of the canvas band */
  --hairline-nav:#D9DDE4;   /* sticky nav rule, appears on scroll only */
  --hairline-hover:#C9D2DD; /* card border on hover */

  /* ---- The switch ---- */
  --blue:#2F8FE0;           /* outlined secondary, eyebrows, tel links, check glyphs */
  --blue-press:#2680CF;     /* primary hover/active fill per spec */
  --blue-tint:#F2F8FD;      /* secondary button hover fill — the ONLY blue background permitted */
  --blue-fill:#1B72C0;      /* filled primary only — see deviation note above */
  --blue-fill-press:#155C9E;

  /* ---- Geometry ---- */
  /* Text on the footer, the one dark surface the system permits. */
  --footer-text:#9BA6B8;
  --footer-dim:#7E8798;   /* the floor: anything darker fails 4.5:1 on --ink-deep */

  /* Functional state colour, like --green in the v1 layer. Not decoration —
     the one-chromatic-colour rule governs interaction, not error states.
     6.6:1 on white. */
  --red:#B42318;

  --r-card:8px;             /* cards, images, figures */
  --r-pill:980px;           /* all buttons */
  --container:1200px;
  --gutter:28px;
  --section:78px;
  --hdr:80px;

  /* ---- Legacy aliases, remapped so no component references a dead token ---- */
  --navy:var(--ink);
  --navy-2:var(--ink);
  --navy-deep:var(--ink-deep);
  --blue-btn:var(--blue-fill);
  --blue-ink:#1F6FB4;       /* body-adjacent links — AA on white */
  --blue-soft:var(--blue-tint);
  --blue-light:#8FC4F2;
  --muted:var(--text-2);
  --muted-2:var(--text-3);
  --line:var(--hairline);
  --line-dark:rgba(255,255,255,.16);
  --mist:var(--canvas);
  --mist-2:#EEF1F5;
  --green:#1E7A5A;
  --radius:var(--r-card);
  --radius-lg:var(--r-card);
  --radius-pill:var(--r-pill);
  --maxw:var(--container);

  /* No drop shadows at rest. The only permitted shadow in the entire system is
     under the primary pill on hover. These resolve to none so any legacy
     reference is inert rather than broken. */
  --shadow-sm:none;
  --shadow:none;
  --shadow-lg:none;
}

/* ==========================================================================
   1 · Base — ink, paper, air
   ========================================================================== */

body{
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  color:var(--text);
  background:var(--paper);
}

/* The tracking rule: negative tracking tightens as size grows, positive
   tracking opens as size shrinks. Display type is architectural. */
h1,h2,h3,h4,h5{
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.10;
  text-wrap:pretty;
}
h1{font-size:clamp(38px,6.6vw,74px);line-height:1.05;letter-spacing:-.032em;max-width:15ch}
h2{font-size:clamp(30px,4.4vw,52px);max-width:20ch}
h3{font-size:16px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
h4,h3.as-h4{font-size:15px;font-weight:600;letter-spacing:-.012em}

/* The emphasis rule: headlines carry meaning in ONE bolded span, not in
   colour. 600 for the setup, 800 for the payload. One span per headline. */
h1 em,h2 em,h1 b,h2 b{font-style:normal;font-weight:800;color:inherit}

p{margin:0 0 1.05em}
strong{font-weight:600;color:var(--ink)}
a{color:var(--blue-ink)}
a:hover{color:var(--ink)}

/* Rules exist only INSIDE components. Between sections, the colour shift is
   the separator — never a horizontal rule. */
hr{border:0;border-top:1px solid var(--hairline);margin:34px 0}

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

/* Measure. Long lines are the fastest way to make a premium page feel cheap. */
.lead{font-size:clamp(16px,2vw,21px);line-height:1.5;letter-spacing:-.011em;
  color:var(--text-2);max-width:60ch}
.small{font-size:13.5px;color:var(--text-2)}
.fineprint{font-size:12.5px;color:var(--text-3);line-height:1.6}

/* ==========================================================================
   2 · Bands — the colour shift IS the separator
   ========================================================================== */

section{padding:var(--section) 0}
section.tight{padding:64px 0}

.bg-mist{background:var(--canvas);
  border-top:1px solid var(--hairline-3);border-bottom:1px solid var(--hairline-3)}

/* .bg-navy was a dark gradient section. There are no blue or navy section
   backgrounds in this system — it becomes a canvas band, and every
   light-on-dark override below is flipped back to ink on paper. */
.bg-navy{
  background:var(--canvas);
  color:var(--text);
  border-top:1px solid var(--hairline-3);
  border-bottom:1px solid var(--hairline-3);
}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--ink)}
.bg-navy p,.bg-navy li,.bg-navy .lead,.bg-navy .section-head p{color:var(--text-2)}
.bg-navy strong,.bg-navy em{color:var(--ink)}
.bg-navy a:not(.btn){color:var(--blue-ink)}
.bg-navy .eyebrow{color:var(--blue-ink)}
.bg-navy .card{background:var(--paper);border-color:var(--hairline);color:var(--text)}
.bg-navy .card strong{color:var(--ink)}
.bg-navy .card-icon{background:var(--blue-tint);color:var(--ink)}
.bg-navy .stat b{color:var(--ink)}
.bg-navy .stat span,.bg-navy .ph figcaption{color:var(--text-3)}
.bg-navy .sig{color:var(--ink)}
.bg-navy .sig span{color:var(--text-2)}
.bg-navy .btn-white{background:var(--blue-fill);color:#fff}
.bg-navy .btn-outline-white{background:transparent;color:var(--blue);border-color:var(--blue)}
.bg-navy .btn-outline-white:hover{background:var(--blue-tint)}
.bg-navy .pill-row a,.bg-navy .pill-row span{background:var(--paper);
  border-color:var(--hairline);color:var(--ink)}
.bg-navy .pill-row a:hover{background:var(--row-hover);border-color:var(--hairline-hover)}
.bg-navy .numbered li{background:transparent;border-color:var(--hairline)}
.bg-navy .numbered strong{color:var(--ink)}
.bg-navy .numbered span{color:var(--text-3)}
.bg-navy .checks li::before{background-color:var(--blue-tint);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8FE0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}
.bg-navy .plan-head p{color:var(--text-2)}

.section-head{max-width:660px;margin:0 0 44px}
.section-head p{font-size:17px;color:var(--text-2);margin-bottom:0;max-width:60ch}

/* Eyebrow — blue here is not decoration; it announces what section you are in.
   Never let a 12px eyebrow sit at 0 tracking. */
.eyebrow,.hero-eyebrow{
  font-family:"Montserrat",sans-serif;
  font-size:12px;font-weight:600;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  /* --blue is 3.43:1 on white. An eyebrow is 12px TEXT, not a glyph, so it
     takes --blue-ink (5.26:1). Indistinguishable at this size; keeps AA. */
  color:var(--blue-ink);
  margin:0 0 14px;
  display:block;
  background:none;border:0;padding:0;border-radius:0;backdrop-filter:none;
}

/* ==========================================================================
   3 · Buttons — never two filled
   ========================================================================== */

.btn{
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;font-weight:500;letter-spacing:-.010em;line-height:1;
  padding:14px 24px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease,
             transform .16s ease,box-shadow .16s ease;
}
.btn:hover{transform:none}

/* The one filled primary. */
.btn-primary,.btn-navy{background:var(--blue-fill);color:#fff;border-color:var(--blue-fill);
  box-shadow:none}
/* The only permitted shadow in the entire system, and it is optional. */
.btn-primary:hover,.btn-navy:hover{background:var(--blue-fill-press);
  border-color:var(--blue-fill-press);
  box-shadow:0 8px 22px rgba(47,143,224,.28);transform:translateY(-2px)}

/* Its outlined partner. Every filled blue primary is paired with one of these. */
.btn-ghost,.btn-white,.btn-outline-white{
  background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-ghost:hover,.btn-white:hover,.btn-outline-white:hover{
  background:var(--blue-tint);color:var(--blue);border-color:var(--blue)}

.btn-lg{padding:16px 30px;font-size:16px}
.btn-row{gap:12px}

/* ==========================================================================
   4 · Header — hairline only, rule appears on scroll
   ========================================================================== */

.site-header{background:rgba(255,255,255,.86);backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.site-header.is-stuck{border-bottom-color:var(--hairline-nav)}
.hdr{height:var(--hdr);gap:28px}
.brand svg,.sl-logo{height:52px;width:auto;color:var(--ink);overflow:visible}
.nav a{font-family:"Inter",sans-serif;font-size:14px;font-weight:400;letter-spacing:-.010em;
  color:var(--text-4);padding:8px 11px;border-radius:6px}
.nav a:hover{background:transparent;color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:500}
.hdr-phone{font-family:"Inter",sans-serif;font-size:13px;font-weight:500;letter-spacing:-.010em;
  color:var(--blue-ink)}
.hdr-phone:hover{color:var(--ink)}
.nav-toggle{border-color:var(--hairline);border-width:1px;border-radius:var(--r-pill);
  color:var(--ink);font-family:"Inter",sans-serif;font-weight:500;font-size:13px;
  min-height:44px;padding:9px 16px}
.mobile-nav{border-top:1px solid var(--hairline)}
.mobile-nav a{font-family:"Inter",sans-serif;font-weight:400;color:var(--text-4);
  border-bottom:1px solid var(--hairline)}

/* ==========================================================================
   5 · Hero — white room. The photograph is full-bleed and carries no text.
   ========================================================================== */

.hero,.hero-photo,.page-hero-photo{
  background:var(--paper);
  color:var(--text);
  isolation:auto;
}
/* Kill the scrims. Nothing is printed over the photograph any more. */
.hero-photo::after,.page-hero-photo::after,.band::after{content:none;display:none}
.hero-art{display:none}

.hero h1,.hero-photo h1,.page-hero-photo h1{color:var(--ink)}
.hero h1 em,.hero-photo h1 em{color:var(--ink);font-weight:800;font-style:normal}
.hero-sub,.hero-photo .hero-sub,.page-hero-photo .hero-sub{
  font-size:clamp(16px,2vw,21px);line-height:1.5;color:var(--text-2);
  max-width:56ch;margin-bottom:26px}

/* Type block sits in the white room, above the photograph. */
.hero-photo,.page-hero-photo{padding:0}   /* .hero-inner owns its own spacing */
.hero-photo{display:flex;flex-direction:column}
.hero-photo > .wrap{order:1}
.hero-photo > .hero-bg{order:2}
.hero-photo .hero-inner{padding:56px 0 48px;max-width:none}
.hero .wrap,.hero-photo .wrap{position:relative;z-index:2}
.hero{padding:56px 0 0}

/* Full-bleed exception (Card 1.3): the hero photograph and any before/after
   band break the container and run edge to edge. No rounded corners. */
.hero-photo .hero-bg,.page-hero-photo .hero-bg{
  position:relative;inset:auto;z-index:0;
  width:100vw;margin-left:calc(50% - 50vw);
  aspect-ratio:21/9;overflow:hidden;background:var(--canvas)}
.hero-photo .hero-bg img,.page-hero-photo .hero-bg img{
  width:100%;height:100%;object-fit:cover;border-radius:0;filter:none}

.page-hero-photo .wrap{padding-top:56px;padding-bottom:44px}
.page-hero-photo h1,.page-hero-photo h2,.page-hero-photo h3{color:var(--ink)}
.page-hero{padding:72px 0 56px}
.crumbs,.crumbs a,.page-hero-photo .crumbs,.page-hero-photo .crumbs a{
  font-size:12.5px;color:var(--text-3)}
.crumbs b,.page-hero-photo .crumbs b{color:var(--text-4);font-weight:500}
.crumbs span{opacity:.5;padding:0 7px}
/* The link half of a crumb has to be tellable from the current-page half. */
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* Hero trust line — hairline separated, no pills. */
.hero-trust{gap:10px 28px;margin-top:26px;padding-top:20px;
  border-top:1px solid var(--hairline)}
.hero-trust span,.hero-photo .hero-trust span{font-size:13.5px;color:var(--text-4);font-weight:400}
.hero-trust svg,.hero-photo .hero-trust svg{color:var(--blue)}
.hero-photo .hero-trust{border-top-color:var(--hairline)}

/* ==========================================================================
   6 · Trust strip — canvas, vertical hairlines, on every page
   ========================================================================== */

.trust-strip{background:var(--canvas);border-top:1px solid var(--hairline-3);
  border-bottom:1px solid var(--hairline-3);padding:26px 0}
.trust-strip ul{gap:0}
.trust-strip li{display:block;padding:2px 26px;border-left:1px solid var(--hairline-2);
  font-size:13.5px;color:var(--text-4);font-weight:400;line-height:1.45}
.trust-strip li:first-child{border-left:0;padding-left:0}
.trust-strip li b,.trust-strip li strong{display:block;font-family:"Inter",sans-serif;
  font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px;letter-spacing:-.011em}
.trust-strip svg{display:none}
@media (max-width:760px){
  .trust-strip li{border-left:0;padding:0 0 12px}
}

/* ==========================================================================
   7 · Cards — hairline, 8px, no shadow at rest
   ========================================================================== */

.card{border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px;
  background:var(--paper);transition:border-color .18s ease,background .18s ease}
.card h3{margin-bottom:.4em}
.card p{font-size:13.5px;line-height:1.5;letter-spacing:-.010em;color:var(--text-3)}
.card-link:hover{transform:none;box-shadow:none;border-color:var(--hairline-hover);
  background:var(--row-hover)}
.card-link:hover h3{color:var(--ink)}
.card-more{font-family:"Inter",sans-serif;font-weight:500;font-size:13px;color:var(--blue-ink);
  margin-top:14px}
.card-icon{width:34px;height:34px;border-radius:var(--r-card);background:transparent;
  color:var(--blue);display:grid;place-items:center;margin-bottom:14px;border:0}

/* Card tag on photo cards — the one place a dark chip survives, because it sits
   on a photograph rather than on paper. */
.card-media{border-radius:var(--r-card)}
.card-media .card-photo{background:var(--canvas)}
.card-media:hover .card-photo img{transform:none}
.card-media .card-body{padding:20px}
.card-media .card-body p{font-size:13.5px;color:var(--text-3)}
.card-media .card-tag{background:rgba(22,41,74,.78);font-family:"Inter",sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.10em;padding:5px 10px}

/* ==========================================================================
   8 · The Sightline Standard — hairline grid, mono numerals, no card chrome
   Twelve published points a customer can hold the crew to. Trust signal #1.
   ========================================================================== */

.numbered{gap:0;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  border-top:1px solid var(--hairline)}
.numbered li{background:transparent;border:0;border-bottom:1px solid var(--hairline);
  border-radius:0;padding:22px 26px 22px 56px;margin:0}
.numbered li::before{
  content:counter(sl,decimal-leading-zero);
  left:0;top:24px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:500;font-size:11px;letter-spacing:.02em;
  /* These numerals index the twelve points, so they are content, not chrome.
     --meta (2.26:1) is decorative-only; this takes --text-3 (4.93:1). */
  color:var(--text-3);background:transparent;
  width:auto;height:auto;border-radius:0;display:block}
.numbered strong{font-family:"Inter",sans-serif;font-weight:600;font-size:14.5px;
  color:var(--ink);letter-spacing:-.011em;margin-bottom:4px}
.numbered span{font-size:14.5px;line-height:1.5;letter-spacing:-.011em;color:var(--text-3)}

/* ==========================================================================
   9 · Lists, membership, tables
   ========================================================================== */

.checks li{font-size:14.5px;line-height:1.5;letter-spacing:-.011em;padding-left:28px}
.checks li::before{background-color:transparent;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8FE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:15px}

.plan{border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:none;
  background:var(--paper)}
.plan-head{background:var(--paper);color:var(--ink);padding:28px 28px 0;border-bottom:0}
.plan-head h3{color:var(--ink);font-size:16px;margin-bottom:6px}
.plan-head p{color:var(--text-2);font-size:14.5px}
.plan-badge{background:var(--blue-tint);color:var(--blue-ink);font-family:"Inter",sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.10em;padding:5px 11px;border-radius:var(--r-pill)}
.plan-body{padding:22px 28px 28px}

/* Price numeral — Montserrat 56/600, tight. The house defines the price. */
.price-tier{padding:16px 0;border-bottom:1px solid var(--hairline)}
.price-tier b{font-family:"Inter",sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);
  letter-spacing:-.011em}
.price-tier em{font-size:13.5px;color:var(--text-3)}
.price-tier .amt{font-family:"Montserrat",sans-serif;font-weight:600;font-size:34px;
  letter-spacing:-.035em;color:var(--ink);line-height:1}
.price-tier .amt small{font-family:"Inter",sans-serif;font-weight:400;font-size:12.5px;
  color:var(--text-3);margin-top:2px}

.ptable{border:1px solid var(--hairline);border-radius:var(--r-card);font-size:14.5px}
.ptable th,.ptable td{border-bottom:1px solid var(--hairline);padding:14px 16px}
.ptable thead th{background:var(--canvas);font-family:"Inter",sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.10em;color:var(--text-4)}
.ptable td.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:500;color:var(--ink);letter-spacing:.01em}
.ptable tbody tr:hover{background:var(--row-hover)}

/* ==========================================================================
   10 · Forms — the conversion apparatus. Priority #1 is a lead from a phone
   in under sixty seconds.
   ========================================================================== */

/* Quote page: the form-card is first in the DOM so phones (where .split
   stacks at 1000px) get the form immediately instead of 2.5 screens down.
   On desktop this order rule keeps it in the right-hand column. */
@media (min-width:1001px){.split-lead-form>.quote-form-col{order:2}}

/* Anchored CTAs scroll here; without this the sticky header covers the
   form's heading. */
#quote-form{scroll-margin-top:calc(var(--hdr) + 16px)}

.form-card{border:1px solid var(--hairline);border-radius:var(--r-card);box-shadow:none;
  padding:28px;background:var(--paper)}
.field label .opt{color:var(--text-3);font-weight:400}
.field label,.legend{font-family:"Inter",sans-serif;font-size:13px;font-weight:600;
  color:var(--ink);letter-spacing:-.011em;margin-bottom:7px}
/* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
.field input,.field select,.field textarea{border:1px solid var(--hairline);border-radius:6px;
  font-size:16px;padding:12px 14px;color:var(--text);letter-spacing:-.011em}
/* :user-invalid marks fields the user has actually touched and left wrong, so
   every problem stays visible at once — not just the browser's one bubble.
   Progressive enhancement: browsers without it fall back to the bubbles. */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{
  border-color:var(--red)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,143,224,.14)}
.field .hint{font-size:12.5px;color:var(--text-3)}
.chip span{border:1px solid var(--hairline);border-radius:var(--r-pill);font-size:13.5px;
  font-weight:400;color:var(--text-4);background:var(--paper);padding:9px 16px}
.chip input:checked + span{background:var(--blue-tint);border-color:var(--blue);color:var(--ink);
  font-weight:500}
.chip input:focus-visible + span{outline:2.5px solid var(--blue);outline-offset:2px}

/* Camera capture inputs — these open the rear camera directly. */
.dropzone{border:1px dashed var(--hairline-hover);border-radius:var(--r-card);
  background:var(--canvas);padding:18px 14px}
.dropzone:hover{border-color:var(--blue);background:var(--blue-tint)}
.dropzone.filled{border-style:solid;border-color:var(--blue);background:var(--blue-tint)}
.dropzone b{font-family:"Inter",sans-serif;font-size:13.5px;font-weight:600;color:var(--ink)}
.dropzone em{font-size:12px;color:var(--text-3)}

/* "Fast starting estimate" — never "final quote". Protects against
   underquoting and reads as honest. */
.est-box{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:20px}
.est-box .est-label{font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.10em;color:var(--text-4)}
.est-box .est-amt{font-family:"Montserrat",sans-serif;font-weight:600;font-size:38px;
  letter-spacing:-.035em;color:var(--ink);line-height:1.05}
.est-box p{font-size:13px;color:var(--text-3)}
.form-success{background:var(--paper);border:1px solid var(--blue);border-radius:var(--r-card);
  padding:32px 28px}
.form-success h3{color:var(--ink);font-size:20px}

/* ==========================================================================
   11 · Misc components
   ========================================================================== */

.badge,.badge-gold,.badge-green{background:var(--blue-tint);color:var(--blue-ink);
  font-family:"Inter",sans-serif;font-size:12px;font-weight:500;letter-spacing:.04em;
  border-radius:var(--r-pill);padding:6px 12px}
.pill-row a,.pill-row span{border:1px solid var(--hairline);border-radius:var(--r-pill);
  font-size:13.5px;color:var(--text-4);background:var(--paper);font-weight:400;padding:8px 15px}
.pill-row a:hover{border-color:var(--hairline-hover);background:var(--row-hover);color:var(--ink)}

.quote-note{border-left:2px solid var(--blue);padding:2px 0 2px 20px;font-size:17px;
  color:var(--text-2);font-style:normal;line-height:1.55}

/* FAQ — answers sit in the initial HTML, CSS-collapsed, never JS-injected, so
   crawlers and AI answer engines read them without executing scripts.
   Answers lead with the number. */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{font-family:"Inter",sans-serif;font-weight:500;font-size:15.5px;color:var(--ink);
  letter-spacing:-.011em;padding:20px 40px 20px 0}
.faq summary:hover{color:var(--blue-ink)}
.faq summary::after{border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);
  width:9px;height:9px;top:27px}
.faq details[open] summary::after{top:31px}
.faq .faq-a{font-size:14.5px;line-height:1.55;color:var(--text-2);padding-bottom:22px}
.faq .faq-a p:first-child{font-size:15px;color:var(--text)}
.faq .faq-a p:first-child strong{color:var(--ink);font-weight:600}
.faq-toc a{border:1px solid var(--hairline);border-radius:var(--r-pill);
  font-family:"Inter",sans-serif;font-size:13.5px;font-weight:400;color:var(--text-4);
  background:var(--paper)}
.faq-toc a:hover{border-color:var(--hairline-hover);background:var(--row-hover);color:var(--ink)}
.faq-toc svg{color:var(--blue)}

/* CTA band — canvas, not navy. */
.cta-band{background:var(--canvas);color:var(--text);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:56px 42px}
.cta-band h2{color:var(--ink);margin-bottom:.35em;margin-left:auto;margin-right:auto}
.cta-band p{color:var(--text-2);max-width:60ch;margin:0 auto 26px}
.cta-band a:not(.btn){color:var(--blue-ink)}
.cta-band strong{color:var(--ink)}

.stat b{font-family:"Montserrat",sans-serif;font-weight:600;font-size:40px;letter-spacing:-.035em;
  color:var(--ink)}
.stat span{font-size:13px;color:var(--text-3)}

.photo-slot{border-radius:var(--r-card);background:var(--canvas)}
.photo-slot svg{opacity:.10;color:var(--ink)}

/* Named humans — trust signal #7. A local father-and-son team and long-time
   Gloucester County residents. Not a franchise. Not a rotating sub crew. */
.crew-split{gap:56px}
.crew-split .ph img{border-radius:var(--r-card);box-shadow:none}
.sig{font-family:"Inter",sans-serif;font-weight:600;color:var(--ink);font-size:14.5px;
  letter-spacing:-.011em}
.sig span{font-weight:400;font-size:13px;color:var(--text-3)}

.ph img{border-radius:var(--r-card)}
.ph figcaption{font-size:12.5px;color:var(--text-3);margin-top:10px}
.ph-shadow img,.ph-lg img{box-shadow:none;border-radius:var(--r-card)}

/* Full-bleed photo band. Edge to edge, no rounded corners, no scrim, no text
   printed over it — the copy sits in the white room above or below. */
.band{background:var(--paper);overflow:visible}
.band .band-bg{position:relative;inset:auto;width:100vw;margin-left:calc(50% - 50vw);
  aspect-ratio:21/9;overflow:hidden;background:var(--canvas)}
.band .band-bg img{width:100%;height:100%;object-fit:cover;border-radius:0;filter:none}
.band .wrap{position:relative;z-index:2;padding:64px 0}
.band h2,.band h3{color:var(--ink)}
.band p{color:var(--text-2)}
.band strong{color:var(--ink)}
.band li{color:var(--text-2)}

/* ==========================================================================
   12 · Footer — the one place navy goes darker
   ========================================================================== */

.site-footer{background:var(--ink-deep);color:var(--footer-text);font-size:13.5px;padding:64px 0 0}
.site-footer h4,.site-footer .footer-h{font-family:"Inter",sans-serif;font-size:12px;
  font-weight:600;letter-spacing:.14em;color:#fff}
.site-footer a{color:var(--footer-text)}
.site-footer a:hover{color:#fff}
.footer-brand svg,.footer-brand .sl-logo{height:56px;width:auto;color:#fff;overflow:visible}
.footer-brand p{color:var(--footer-dim);font-size:13.5px}
.footer-badges span{font-size:11.5px;border:1px solid rgba(255,255,255,.16);color:var(--footer-text);
  border-radius:var(--r-pill);padding:5px 11px}
/* --footer-dim, not -faint: #6E7787 on the ink-deep footer was 3.8:1, under AA. */
.footer-bottom{border-top:1px solid rgba(255,255,255,.10);font-size:12.5px;color:var(--footer-dim)}
.footer-bottom a{color:var(--footer-dim)}
.footer-towns{border-top:1px solid rgba(255,255,255,.10)}
.footer-towns a{font-size:13px;color:var(--footer-dim)}

/* ==========================================================================
   13 · Sticky mobile call bar — the phone survives at 390
   ========================================================================== */

.mobile-cta{background:rgba(255,255,255,.94);backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid var(--hairline);box-shadow:none;padding:10px 12px}
.mobile-cta .btn{font-size:14px;padding:13px 10px}

/* ==========================================================================
   14 · FAQ page furniture
   ========================================================================== */

.answer-tile{border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px 20px;
  background:var(--paper)}
.answer-tile::after{content:none}
.answer-tile .k{font-family:"Montserrat",sans-serif;font-weight:600;color:var(--ink);
  font-size:clamp(28px,3.4vw,38px);letter-spacing:-.035em;line-height:1.05}
.answer-tile .k small{font-family:"Inter",sans-serif;font-size:13px;font-weight:400;
  color:var(--text-3)}
.answer-tile .q{font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.10em;color:var(--text-4);margin-bottom:10px}
.answer-tile p{font-size:13px;color:var(--text-3)}

.faq-section-head .ph img{border-radius:var(--r-card)}
.faq-section-head .sub,.faq-section > .sub{color:var(--text-2);font-size:15.5px}

.versus{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--paper)}
.versus .side.good{background:var(--canvas)}
.versus .vs{background:var(--canvas);color:var(--text-4);font-family:"Inter",sans-serif;
  font-weight:600;font-size:11px;letter-spacing:.10em;border-left:1px solid var(--hairline);
  border-right:1px solid var(--hairline)}
.versus .psi{font-family:"Montserrat",sans-serif;font-weight:600;font-size:34px;
  letter-spacing:-.035em;color:var(--ink)}
.versus .psi small{font-family:"Inter",sans-serif;font-size:12.5px;font-weight:400;
  color:var(--text-3)}
.versus li{font-size:14px;color:var(--text-2)}
.versus li::before{background:var(--blue);width:5px;height:5px;top:.62em}
.versus .side.bad li::before{background:var(--meta)}

.season{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--paper)}
.season .cap{background:var(--canvas);color:var(--ink);font-family:"Inter",sans-serif;
  font-weight:600;font-size:13px;letter-spacing:-.011em;border-bottom:1px solid var(--hairline)}
.season .cap em{color:var(--text-3);font-size:11.5px;font-weight:400}
.season li{font-size:13.5px;color:var(--text-3)}
.season li::before{background:var(--blue);width:5px;height:5px;border-radius:50%}
.season.now{border-color:var(--blue);box-shadow:none}

/* ==========================================================================
   15 · Motion — reveals settle, they do not perform
   ========================================================================== */

.rv{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   16 · Responsive
   ========================================================================== */

@media (max-width:1000px){
  :root{--gutter:24px}
}
@media (max-width:760px){
  :root{--section:64px;--gutter:20px}
  section{padding:var(--section) 0}
  section.tight{padding:48px 0}
  .hero{padding:36px 0 0}
  .hero-photo .hero-inner{padding:36px 0 32px}
  .page-hero{padding:48px 0 40px}
  .page-hero-photo .wrap{padding-top:40px;padding-bottom:34px}
  .hero-photo .hero-bg,.page-hero-photo .hero-bg,.band .band-bg{aspect-ratio:4/3}
  .band .wrap{padding:44px 0}
  .cta-band{padding:40px 24px}
  .form-card{padding:22px 18px}
  .plan-head,.plan-body{padding-left:22px;padding-right:22px}
  .numbered li{padding:20px 0 20px 44px}
}


/* ==========================================================================
   17 · The quote band — the one section that has to be unmissable
   ========================================================================== */

/* An eyebrow is normally a 12px label. This one is a signpost to the only
   thing on the page we actually want a stranger to do. */
.eyebrow-lg{font-size:15px;letter-spacing:.14em;margin-bottom:16px}

.quote-band .form-card{background:var(--paper);border-color:var(--hairline-hover);padding:32px}
.quote-band .btn-lg{font-size:17px;padding:18px 30px}
@media (max-width:760px){
  .quote-band .form-card{padding:22px 18px}
  .eyebrow-lg{font-size:13.5px}
}

/* The response promise sits with the button, not in a trust row three
   scrolls down. It is the single most checkable claim on the page. */
.cta-promise{margin:16px 0 0;font-size:14px;color:var(--text-2);letter-spacing:-.011em}
.cta-promise strong{color:var(--ink);font-weight:600}