/* ===========================================================
   Closing Capture — Shared design system
   Extracted from homepage index.html; used by interior pages.
   Homepage itself uses an inline copy of this — keep in sync
   when making token changes.
   =========================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --slate:#181E2E; --slate-2:#1C2438; --slate-3:#23304A; --slate-4:#0E131F;
  --green:#10B981; --green-light:#6EE7B7; --green-deep:#0ea472;
  --seafoam:#F0FAF5; --seafoam-2:#E8F5EE;
  --ink:#1E2D3D; --ink-muted:#4A6275;
  --ink-on-dark:#C9D8E4; --ink-muted-on-dark:#7A9AB0;
  --rule:#C5DED4; --rule-dark:#2A3F58;
  --sans:'Sora',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--body);line-height:1.6;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
@media (max-width:900px){.wrap{padding:0 20px}}
@media (max-width:480px){.wrap{padding:0 18px}}

/* ============== NAV ============== */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(30,45,61,0.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1440px;margin:0 auto;padding:0 40px}
.nav-logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.nav-logo svg{width:28px;height:28px;flex-shrink:0}
.nav-wordmark-stack{display:flex;flex-direction:column;line-height:1;gap:3px}
.nav-wordmark{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:-0.01em;color:inherit}
.nav-tagline{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--green-deep);opacity:0.85}
.nav-links{display:flex;gap:26px;align-items:center;font-family:var(--sans);font-size:13.5px;color:var(--ink);font-weight:500}
.nav-links a:hover{color:var(--green-deep)}
.nav-links a.nav-active{color:var(--green-deep)}
.nav-cta{font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 16px;border-radius:8px;color:#fff;background:var(--slate);transition:all 0.3s var(--ease)}
.nav-links a.nav-cta:hover{background:var(--green);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,0.3)}
@media (max-width:900px){
  .nav-inner{padding:0 20px}
  .nav-links{display:none}

  /* Simple white top-drawer */
  .nav-links.mobile-open{
    display:flex;flex-direction:column;
    position:fixed;top:72px;left:0;right:0;
    background:#fff;
    padding:20px 24px 24px;gap:2px;z-index:199;
    border-bottom:1px solid rgba(30,45,61,0.08);
    box-shadow:0 20px 40px -12px rgba(24,30,46,0.12);
    animation:menuDrop 0.25s var(--ease) both;
  }
  @keyframes menuDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

  .nav-links.mobile-open a{
    font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);
    letter-spacing:-0.005em;
    padding:14px 4px;border-bottom:1px solid rgba(30,45,61,0.06);
    display:block;transition:color 0.2s var(--ease);
  }
  .nav-links.mobile-open a:hover{color:var(--green-deep)}
  .nav-links.mobile-open a:last-of-type{border-bottom:none}

  .nav-links.mobile-open a[href^="tel:"]{color:var(--green-deep);font-size:15.5px}

  .nav-links.mobile-open a.nav-cta{
    background:var(--slate);color:#fff!important;
    padding:14px 20px;margin-top:12px;
    border-radius:10px;font-size:14.5px;font-weight:600;
    text-align:center;border-bottom:none;
    transition:background 0.25s var(--ease);
  }
  .nav-links.mobile-open a.nav-cta:hover{background:var(--green);color:var(--slate)!important}

  /* Hamburger */
  .nav-hamburger{display:flex;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:6px;width:36px;height:36px;justify-content:center;align-items:center}
  .nav-hamburger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform 0.3s var(--ease),opacity 0.2s}
  .nav-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-hamburger.open span:nth-child(2){opacity:0}
  .nav-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
}
@media (min-width:901px){.nav-hamburger{display:none}}
@media (max-width:480px){
  .nav-inner{padding:0 18px;height:62px}
  .nav-cta{padding:8px 14px;font-size:12.5px}
  .nav-wordmark{font-size:14px}
  .nav-tagline{font-size:8.5px}
  .nav-links.mobile-open{top:62px;padding:18px 20px 22px}
  .nav-links.mobile-open a{font-size:16px;padding:13px 4px}
}

/* ============== TYPE PRIMITIVES ============== */
h1,.cc-h1{font-family:var(--sans);font-weight:700;color:var(--ink);line-height:1.02;letter-spacing:-0.035em;text-wrap:balance}
h2,.cc-h2{font-family:var(--sans);font-weight:700;color:var(--ink);line-height:1.02;letter-spacing:-0.03em;text-wrap:balance}
h3,.cc-h3{font-family:var(--sans);font-weight:600;color:var(--ink);letter-spacing:-0.015em;line-height:1.25}

em{color:var(--green-deep);font-style:italic;font-weight:400}
.dark em,.on-dark em{color:var(--green-light)}

.lbl,.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--green-deep);font-weight:600;display:inline-block}
.lbl.on-dark,.eyebrow.on-dark{color:var(--green-light)}

.hl{background:linear-gradient(135deg,var(--green-deep),var(--green-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ============== BUTTONS ============== */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:14px;font-weight:600;padding:14px 22px;border-radius:10px;transition:all 0.3s var(--ease);cursor:pointer;border:none;letter-spacing:-0.005em;text-decoration:none}
.btn-primary{background:var(--green);color:var(--slate);box-shadow:0 4px 16px rgba(16,185,129,0.28)}
.btn-primary:hover{background:var(--green-deep);color:#fff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(16,185,129,0.35)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(30,45,61,0.15)}
.btn-ghost:hover{border-color:var(--slate);background:var(--slate);color:#fff}
.btn svg{transition:transform 0.3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* Dark-surface variants */
.on-dark .btn-primary,.dark-section .btn-primary{background:#fff;color:var(--slate);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.on-dark .btn-primary:hover,.dark-section .btn-primary:hover{background:var(--green-light);color:var(--slate)}
.on-dark .btn-ghost,.dark-section .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.2)}
.on-dark .btn-ghost:hover,.dark-section .btn-ghost:hover{background:#fff;color:var(--slate);border-color:#fff}

/* ============== SHARED SECTION PATTERNS ============== */

/* Generic hero (full viewport, for interior pages) */
.page-hero{
  position:relative;
  min-height:100vh;min-height:100dvh;
  padding:140px 0 120px;
  overflow:hidden;background:#fff;
  display:flex;flex-direction:column;justify-content:center;
}

/* Animated ambient gradient background */
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(900px circle at 82% 12%, rgba(110,231,183,0.22), transparent 55%),
    radial-gradient(800px circle at 12% 88%, rgba(16,185,129,0.14), transparent 55%),
    radial-gradient(700px circle at 50% 50%, rgba(16,185,129,0.04), transparent 60%);
  animation:heroAmbient 28s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes heroAmbient{
  0%,100%{opacity:1;transform:translate(0,0)}
  33%{opacity:0.85;transform:translate(-28px,22px)}
  66%{opacity:0.95;transform:translate(22px,-20px)}
}

/* Subtle grid overlay, soft-masked to center */
.page-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(to right,rgba(30,45,61,0.55) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(30,45,61,0.55) 1px,transparent 1px);
  background-size:80px 80px;
  opacity:0.045;
  mask-image:radial-gradient(ellipse 75% 80% at 50% 45%,black 20%,transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 45%,black 20%,transparent 90%);
}

.page-hero .wrap{position:relative;z-index:3}
.page-hero-inner{max-width:820px}

/* Decorative floating brackets (logo mark motif) */
.hero-decor{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.hero-bracket{
  position:absolute;pointer-events:none;color:var(--green);
  opacity:var(--brk-op,0.35);
  animation:brkFloat 9s ease-in-out infinite;
  will-change:transform;
}
.hero-bracket svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 18px rgba(16,185,129,0.25))}
@keyframes brkFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-14px) rotate(2deg)}
  66%{transform:translateY(10px) rotate(-1.5deg)}
}
.hero-bracket.b1{top:14%;right:7%;width:90px;height:90px;--brk-op:0.42;animation-delay:-2s}
.hero-bracket.b2{top:66%;right:22%;width:58px;height:58px;--brk-op:0.28;animation-delay:-5s;animation-duration:11s}
.hero-bracket.b3{top:24%;left:5%;width:72px;height:72px;--brk-op:0.26;animation-delay:-3s;animation-duration:10s}
.hero-bracket.b4{top:70%;left:13%;width:98px;height:98px;--brk-op:0.34;animation-delay:-7s;animation-duration:12s}

/* Tag */
.page-hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--green-deep);font-weight:600;
  margin-bottom:28px;padding:7px 14px;border-radius:999px;background:rgba(16,185,129,0.08);
  border:1px solid rgba(16,185,129,0.22);
  opacity:0;transform:translateY(16px);
  animation:heroFadeUp 0.8s var(--ease) forwards 0.25s;
}
.page-hero-tag::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulseDot 2s ease-in-out infinite;box-shadow:0 0 10px var(--green);
}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:0.4}}

/* H1 with blur reveal */
.page-hero h1{
  font-family:var(--sans);font-weight:700;color:var(--ink);
  font-size:clamp(48px,6.5vw,92px);
  line-height:0.98;letter-spacing:-0.04em;margin-bottom:28px;text-wrap:balance;
  opacity:0;transform:translateY(24px);filter:blur(8px);
  animation:heroFadeUpBlur 1.1s var(--ease) forwards 0.45s;
}

/* Subtitle */
.page-hero p{
  font-size:18px;line-height:1.6;max-width:620px;color:var(--ink);margin-bottom:36px;
  opacity:0;transform:translateY(16px);
  animation:heroFadeUp 0.9s var(--ease) forwards 0.7s;
}
.page-hero p b{color:var(--slate);font-weight:600}

/* Actions */
.page-hero-actions{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);
  animation:heroFadeUp 0.9s var(--ease) forwards 0.9s;
}

@keyframes heroFadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes heroFadeUpBlur{to{opacity:1;transform:translateY(0);filter:blur(0)}}

@media (max-width:900px){
  .page-hero{padding:120px 0 100px;min-height:100vh;min-height:100dvh}
  .page-hero h1{font-size:clamp(40px,10vw,68px)}
  .page-hero p{font-size:16.5px}
  .btn{padding:13px 18px;font-size:13.5px}
  .hero-bracket.b1{width:60px;height:60px;right:6%;top:17%}
  .hero-bracket.b2{width:44px;height:44px;right:12%;top:74%}
  .hero-bracket.b3{width:50px;height:50px;left:4%;top:28%}
  .hero-bracket.b4{width:66px;height:66px;left:8%;top:76%}
}
@media (max-width:480px){
  .page-hero{padding:100px 0 92px}
  .page-hero h1{font-size:42px;letter-spacing:-0.035em}
  .page-hero .page-hero-tag{font-size:10.5px;padding:7px 12px;margin-bottom:18px}
  .page-hero p{font-size:15.5px;margin-bottom:24px}
  .page-hero-actions{flex-direction:column;align-items:stretch;width:100%}
  .page-hero-actions .btn{justify-content:center;width:100%}
  .hero-bracket.b3,.hero-bracket.b4{display:none}
  .hero-bracket.b1{width:48px;height:48px}
  .hero-bracket.b2{width:36px;height:36px}
}

/* ============== FAQ (shared accordion) ============== */
.faq{padding:140px 0;background:#fff;position:relative}
.faq::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0.35;background:radial-gradient(900px circle at 50% 0%,rgba(16,185,129,0.05),transparent 55%)}
.faq .wrap{position:relative}
.faq-head{max-width:780px;margin:0 auto 56px;text-align:center}
.faq-head .lbl{margin-bottom:20px}
.faq-head h2{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:clamp(30px,4vw,50px);line-height:1.05;letter-spacing:-0.03em;text-wrap:balance}
.faq-head h2 em{color:var(--green-deep)}
.faq-head .sub{margin-top:18px;color:var(--ink-muted);font-size:16px;line-height:1.6}

.faq-list{max-width:860px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--rule);transition:border-color 0.3s var(--ease)}
.faq-item:first-child{border-top:1px solid var(--rule)}
.faq-item.open{border-color:rgba(16,185,129,0.35)}
.faq-question{
  width:100%;background:none;border:none;text-align:left;padding:26px 4px;
  font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink);
  letter-spacing:-0.01em;line-height:1.35;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  transition:color 0.2s var(--ease);
}
.faq-question:hover{color:var(--green-deep)}
.faq-question:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.faq-question::after{
  content:'+';font-family:var(--sans);font-size:22px;font-weight:400;color:var(--green-deep);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:#fff;
  transition:transform 0.5s var(--ease),background 0.3s var(--ease),color 0.3s var(--ease),border-color 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.faq-question:hover::after{border-color:rgba(16,185,129,0.4)}
.faq-item.open .faq-question{color:var(--green-deep)}
.faq-item.open .faq-question::after{
  transform:rotate(45deg);background:var(--green);color:#fff;border-color:var(--green);
  box-shadow:0 0 20px rgba(16,185,129,0.35);
}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.5s var(--ease)}
.faq-answer-inner{padding:0 4px 28px;display:flex;gap:14px;align-items:flex-start}
.faq-answer-inner::before{content:'';flex-shrink:0;width:3px;align-self:stretch;background:linear-gradient(to bottom,var(--green),transparent);border-radius:2px;margin-top:2px}
.faq-answer p{font-size:15.5px;line-height:1.7;color:var(--ink-muted);max-width:68ch}
.faq-answer p b{color:var(--ink);font-weight:600}

.faq-foot{margin-top:48px;text-align:center;padding-top:32px;border-top:1px solid var(--rule)}
.faq-foot p{font-family:var(--sans);font-size:14px;color:var(--ink-muted);margin-bottom:14px}
.faq-foot a{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--green-deep);display:inline-flex;align-items:center;gap:8px;transition:gap 0.3s var(--ease)}
.faq-foot a:hover{gap:12px}
.faq-foot a svg{transition:transform 0.3s var(--ease)}

@media (max-width:900px){
  .faq{padding:80px 0}
  .faq-head{margin-bottom:40px}
  .faq-head h2{font-size:clamp(26px,7vw,38px)}
  .faq-question{font-size:15.5px;padding:22px 0;gap:14px}
  .faq-question::after{width:30px;height:30px;font-size:20px}
  .faq-answer-inner{padding:0 0 24px}
  .faq-answer p{font-size:14.5px}
}
@media (max-width:480px){
  .faq{padding:64px 0}
  .faq-question{font-size:15px;padding:20px 0}
  .faq-question::after{width:26px;height:26px;font-size:18px}
  .faq-answer p{font-size:14px}
}

/* ============== FINAL CTA ============== */
.final{padding:140px 0 160px;background:var(--slate);color:var(--ink-on-dark);position:relative;overflow:hidden}
.final::before{content:'';position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:1200px;height:1200px;max-width:150vw;max-height:150vw;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,0.1) 0%,transparent 55%);pointer-events:none}
.final .wrap{position:relative;text-align:center}
.final .lbl{font-family:var(--sans);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--green-light);font-weight:600;margin-bottom:28px;display:inline-flex;align-items:center;gap:12px}
.final .lbl::before,.final .lbl::after{content:'';width:24px;height:1px;background:var(--green-light)}
.final h2{font-family:var(--sans);font-weight:700;color:#fff;font-size:clamp(34px,5.2vw,64px);line-height:1.05;letter-spacing:-0.03em;margin-bottom:22px}
.final h2 em{font-style:italic;font-weight:500;padding-right:0.08em;
  background:linear-gradient(135deg,var(--green-light),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.final p{max-width:580px;margin:0 auto 48px;font-size:17px;color:var(--ink-on-dark)}
.final-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.final .btn-primary{background:#fff;color:var(--slate);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.final .btn-primary:hover{background:var(--green-light);color:var(--slate)}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,0.2)}
.final .btn-ghost:hover{background:#fff;color:var(--slate);border-color:#fff}
@media (max-width:900px){
  .final{padding:96px 0}
  .final h2{font-size:clamp(28px,7.5vw,44px)}
  .final p{font-size:15.5px;margin-bottom:28px}
  .final-actions{flex-direction:column;align-items:stretch;gap:10px}
  .final-actions .btn{justify-content:center;width:100%}
}

/* ============== FOOTER ============== */
.foot{
  background:var(--slate-4);
  padding:52px 0 32px;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-muted-on-dark);
  position:relative;
  border-top:1px solid rgba(255,255,255,0.04);
  overflow:hidden;
}
.foot::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60%;max-width:720px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(110,231,183,0.4),transparent);
}
.foot .wrap{position:relative;z-index:1}
.foot-top{
  display:flex;justify-content:space-between;align-items:center;
  gap:32px;flex-wrap:wrap;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.foot .cap{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.foot .cap svg{width:28px;height:28px;flex-shrink:0}
.cap-stack{display:flex;flex-direction:column;line-height:1;gap:4px}
.cap-name{font-family:var(--sans);font-weight:700;font-size:15px;color:#fff;letter-spacing:-0.005em}
.cap-tag{font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--green-light);opacity:0.85}
.foot-nav{display:flex;gap:28px;flex-wrap:wrap}
.foot-nav a{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-muted-on-dark);transition:color 0.25s var(--ease)}
.foot-nav a:hover{color:#fff}
.foot-bottom{padding-top:24px;display:flex;justify-content:center}
.foot-legal{
  font-family:var(--sans);font-size:11.5px;letter-spacing:0.02em;
  color:var(--ink-muted-on-dark);line-height:1.6;text-align:center;
  max-width:780px;opacity:0.7;margin:0;
}
@media (max-width:900px){
  .foot{padding:40px 0 28px}
  .foot-top{flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:24px}
  .foot-nav{gap:20px}
  .foot-legal{text-align:left;font-size:11px}
  .foot-bottom{justify-content:flex-start}
}

/* ============== STEP FLOW (.howto pattern) ============== */
.howto{padding:140px 0;background:#fff}
.howto-head{text-align:center;max-width:860px;margin:0 auto 64px}
.howto-head .lbl{margin-bottom:18px}
.howto-head h2{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:clamp(28px,3.6vw,46px);line-height:1.05;letter-spacing:-0.025em;text-wrap:balance}
.howto-head h2 em{color:var(--green-deep)}
.howto-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:1180px;margin:0 auto}
.howto-flow::before{content:'';position:absolute;top:36px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--green) 15%,var(--green) 85%,transparent);z-index:0}
.step{position:relative;z-index:1;text-align:center;padding:0 12px}
.step-num{width:72px;height:72px;margin:0 auto 24px;border-radius:50%;background:#fff;border:2px solid var(--green);color:var(--green-deep);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:28px;letter-spacing:-0.02em;box-shadow:0 8px 20px -8px rgba(16,185,129,0.4),inset 0 0 0 6px rgba(16,185,129,0.05)}
.step h3{font-family:var(--sans);font-size:22px;font-weight:600;color:var(--ink);letter-spacing:-0.02em;margin-bottom:14px;line-height:1.2;text-wrap:balance}
.step p{font-size:15px;line-height:1.65;color:var(--ink-muted);max-width:40ch;margin:0 auto}
@media (max-width:900px){
  .howto{padding:80px 0}
  .howto-head{margin-bottom:44px}
  .howto-head h2{font-size:clamp(26px,7vw,38px)}
  .howto-flow{grid-template-columns:1fr;gap:0;max-width:520px;padding-left:0}
  .howto-flow::before{display:block;left:35px;right:auto;top:36px;bottom:36px;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--green) 8%,var(--green) 92%,transparent)}
  .step{text-align:left;padding:0 0 44px 0;display:grid;grid-template-columns:72px 1fr;column-gap:22px;align-items:start}
  .step:last-child{padding-bottom:0}
  .step-num{margin:0;width:72px;height:72px;font-size:26px;grid-row:span 2}
  .step h3{font-size:20px;margin-bottom:10px;text-align:left}
  .step p{font-size:14.5px;line-height:1.6;text-align:left;max-width:none;margin:0}
}
@media (max-width:480px){
  .howto{padding:64px 0}
  .howto-flow::before{left:28px}
  .step{grid-template-columns:58px 1fr;column-gap:18px;padding-bottom:36px}
  .step-num{width:58px;height:58px;font-size:22px;border-width:2px}
  .step h3{font-size:18px;margin-bottom:8px}
  .step p{font-size:14px}
}

/* ============== REVEAL ANIMATIONS ============== */
.rv{opacity:0;transform:translateY(20px);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease)}
.rv.vis{opacity:1;transform:translateY(0)}

/* Section heading reveal (auto-applied to *-head wrappers via enhance.js) */
.rv-head{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv-head.vis{opacity:1;transform:translateY(0)}

/* Stagger reveal for card grids — observer adds .vis to each child with delay */
.rv-stagger{opacity:0;transform:translateY(22px);transition:opacity 0.9s var(--ease),transform 0.9s var(--ease)}
.rv-stagger.vis{opacity:1;transform:translateY(0)}
.rv-stagger:nth-child(1).vis{transition-delay:0s}
.rv-stagger:nth-child(2).vis{transition-delay:0.08s}
.rv-stagger:nth-child(3).vis{transition-delay:0.16s}
.rv-stagger:nth-child(4).vis{transition-delay:0.24s}
.rv-stagger:nth-child(5).vis{transition-delay:0.32s}
.rv-stagger:nth-child(6).vis{transition-delay:0.4s}
.rv-stagger:nth-child(7).vis{transition-delay:0.48s}
.rv-stagger:nth-child(8).vis{transition-delay:0.56s}

/* Premium hover lift for key interactive elements */
.lift-on-hover{transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease)}
.lift-on-hover:hover{transform:translateY(-4px)}

/* ============== SECTION-WIDE LOGO-MARK DECOR ============== */
/* enhance.js injects .section-decor into every non-hero section + the footer.
   Same visual treatment as the hero brackets — floating logo marks with
   the same green drop-shadow and float animation — so the motif lives
   throughout the page, not just the hero. */
section{position:relative}
.section-decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.section-bracket{
  position:absolute;color:var(--green);opacity:0;
  transition:opacity 1.2s var(--ease);
  animation:sectionBrkFloat 9s ease-in-out infinite;
  will-change:transform;
}
.section-bracket svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 16px rgba(16,185,129,0.22))}
.section-decor.vis .section-bracket{opacity:var(--sb-op,0.28)}
@keyframes sectionBrkFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-14px) rotate(2deg)}
  66%{transform:translateY(10px) rotate(-1.5deg)}
}
/* Placements — match the hero bracket visual weight */
.section-bracket.sb-tr{top:10%;right:5%;width:78px;height:78px;--sb-op:0.34;animation-delay:-2s;animation-duration:9s}
.section-bracket.sb-br{bottom:12%;right:8%;width:56px;height:56px;--sb-op:0.24;animation-delay:-5s;animation-duration:11s}
.section-bracket.sb-tl{top:14%;left:4%;width:66px;height:66px;--sb-op:0.26;animation-delay:-3s;animation-duration:10s}
.section-bracket.sb-bl{bottom:10%;left:6%;width:88px;height:88px;--sb-op:0.32;animation-delay:-7s;animation-duration:12s}
.section-bracket.sb-mr{top:48%;right:3%;width:44px;height:44px;--sb-op:0.20;animation-delay:-4s;animation-duration:13s}
.section-bracket.sb-ml{top:52%;left:3%;width:44px;height:44px;--sb-op:0.20;animation-delay:-9s;animation-duration:14s}

/* Dark sections get a lighter green */
.dark-section .section-bracket,
.included .section-bracket,
.final .section-bracket,
.steps-dark .section-bracket,
.narrative-dark .section-bracket,
.contact-section .section-bracket{
  color:var(--green-light);
}

@media (max-width:900px){
  .section-bracket.sb-tr{width:56px;height:56px;right:4%}
  .section-bracket.sb-br{width:42px;height:42px;right:6%}
  .section-bracket.sb-tl{width:48px;height:48px;left:3%}
  .section-bracket.sb-bl{width:62px;height:62px;left:4%}
  .section-bracket.sb-mr,.section-bracket.sb-ml{width:32px;height:32px}
}
@media (max-width:480px){
  .section-bracket.sb-ml,.section-bracket.sb-mr{display:none}
  .section-bracket.sb-tr{width:42px;height:42px}
  .section-bracket.sb-br{width:32px;height:32px}
  .section-bracket.sb-tl{width:38px;height:38px}
  .section-bracket.sb-bl{width:48px;height:48px}
}

/* Keep section content above decor */
section > .wrap{position:relative;z-index:1}

/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .page-hero-tag,.page-hero h1,.page-hero p,.page-hero-actions{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  .hero-bracket{
    opacity:var(--brk-op,0.35)!important;transform:none!important;filter:none!important;animation:none!important;
  }
  .rv,.rv-head,.rv-stagger{opacity:1!important;transform:none!important}
}

/* ============== CARD PRIMITIVES (reusable across pages) ============== */

/* Light card on white bg */
.card-light{
  padding:28px 26px 30px;background:#fff;border:1px solid var(--rule);border-radius:16px;
  transition:transform 0.4s var(--ease),box-shadow 0.4s var(--ease),border-color 0.4s var(--ease);
}
.card-light:hover{transform:translateY(-4px);border-color:rgba(16,185,129,0.35);box-shadow:0 20px 40px -18px rgba(24,30,46,0.18)}
.card-light h3{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-0.015em;margin-bottom:10px}
.card-light p{font-size:14.5px;line-height:1.55;color:var(--ink-muted)}

/* Dark card on slate bg */
.card-dark{
  padding:30px 30px 30px 32px;border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.025);border-radius:16px;
  transition:background 0.3s var(--ease),border-color 0.3s var(--ease);
  display:flex;gap:18px;align-items:flex-start;
}
.card-dark:hover{background:rgba(16,185,129,0.06);border-color:rgba(16,185,129,0.28)}
.card-dark-mark{flex-shrink:0;margin-top:6px;width:14px;height:14px;background:var(--green);transform:rotate(45deg);box-shadow:0 0 12px rgba(16,185,129,0.5)}
.card-dark h3{font-family:var(--sans);font-size:18px;font-weight:600;color:#fff;letter-spacing:-0.015em;margin-bottom:10px;line-height:1.25}
.card-dark p{font-size:14.5px;line-height:1.6;color:var(--ink-on-dark)}

/* Icon tile (for cards with icons) */
.icon-tile{width:44px;height:44px;border-radius:10px;background:rgba(16,185,129,0.1);color:var(--green-deep);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.icon-tile svg{width:22px;height:22px}

/* ============== UTILITIES ============== */
.cc-text-muted{color:var(--ink-muted)}
.cc-text-muted-dark{color:var(--ink-muted-on-dark)}
.cc-tabular{font-variant-numeric:tabular-nums;letter-spacing:0.02em}

/* ========================================================================
   MOBILE POLISH PASS
   Appended overrides. These win because they come last in the cascade.
   Goal: 375/390/768 should feel deliberately designed, not shrunk.
   ======================================================================== */

/* ----- Consistent gutter rhythm ----- */
@media (max-width:900px){.wrap{padding:0 32px}}
@media (max-width:700px){.wrap{padding:0 24px}}
@media (max-width:480px){.wrap{padding:0 20px}}

/* ----- Tap target expansion (≥40–44pt) ----- */
.nav-links a[href^="tel:"]{display:inline-flex;align-items:center;min-height:40px;padding:6px 4px}
.nav-cta{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.faq-foot a{padding:10px 0;display:inline-flex;align-items:center;gap:8px}

/* ----- Page hero H1 — proportional scale at narrow phones ----- */
@media (max-width:480px){
  .page-hero h1{font-size:clamp(30px,9vw,44px);letter-spacing:-0.04em;line-height:1.02}
  .page-hero p{font-size:16px;line-height:1.6}
}

/* ----- iPad portrait (700–900) polish ----- */
@media (min-width:700px) and (max-width:900px){
  .foot-top{gap:32px}
}

/* ----- Mobile shadow softening (lower blur = faster paint, crisper feel) ----- */
@media (max-width:900px){
  .office{box-shadow:0 14px 32px -14px rgba(24,30,46,0.16)}
  .positioning-panel{box-shadow:0 18px 40px -16px rgba(24,30,46,0.28)}
  .code-term{box-shadow:0 18px 40px -16px rgba(24,30,46,0.28),0 0 40px -15px rgba(16,185,129,0.08),0 1px 0 rgba(255,255,255,0.04) inset}
  .form-card,.sidebar-card,.glass-card{box-shadow:0 18px 40px -16px rgba(0,0,0,0.28)}
  .tc{box-shadow:none}
  .tc.featured{box-shadow:0 0 0 1px rgba(16,185,129,0.35),0 10px 26px rgba(16,185,129,0.08)}
}

/* ----- Eyebrow labels: bump to ensure AA at small sizes ----- */
@media (max-width:480px){
  .lbl,.eyebrow,.positioning-eye,.loss-eye{font-size:11px;letter-spacing:0.12em}
}

/* ----- Section rhythm: consistent 72px at 768, 56px at 375 ----- */
@media (min-width:700px) and (max-width:900px){
  .faq{padding:96px 0}
  .final{padding:96px 0 104px}
}

/* ----- FAQ tap targets and spacing ----- */
@media (max-width:480px){
  .faq-head{margin-bottom:32px}
  .faq-question{min-height:56px}
  .faq-answer p{font-size:14.5px}
}

/* ----- Final CTA locations row (4-column address grid above footer) ----- */
.final-locations{margin-top:72px;padding-top:36px;border-top:1px solid var(--rule-dark);display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:left;font-family:var(--sans);font-size:13px;color:var(--ink-muted-on-dark);line-height:1.55}
.final-locations b{display:block;color:#fff;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px;font-weight:600}
.final-locations a{color:var(--green-light)}
.final-locations a:hover{color:#fff}
.final-locations .foot-sub{display:inline-block;margin-top:6px;font-size:11.5px;color:var(--ink-muted-on-dark);opacity:0.72;letter-spacing:0}
@media (max-width:900px){.final-locations{grid-template-columns:1fr 1fr;margin-top:48px;padding-top:28px;gap:18px}}
@media (max-width:480px){.final-locations{grid-template-columns:1fr;gap:14px;margin-top:40px;padding-top:24px}}

/* ----- Scroll-to-top button (floating, bottom-right) ----- */
.scroll-top{
  position:fixed;bottom:24px;right:24px;
  width:48px;height:48px;border-radius:50%;
  background:var(--green);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(16,185,129,0.35),0 2px 6px rgba(24,30,46,0.12);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 0.3s var(--ease),transform 0.3s var(--ease),background 0.2s var(--ease),box-shadow 0.2s var(--ease),visibility 0s linear 0.3s;
  z-index:90;padding:0;
}
.scroll-top.visible{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity 0.3s var(--ease),transform 0.3s var(--ease),background 0.2s var(--ease),box-shadow 0.2s var(--ease),visibility 0s;
}
.scroll-top:hover{
  background:var(--green-deep);
  box-shadow:0 10px 24px rgba(16,185,129,0.5),0 4px 10px rgba(24,30,46,0.15);
  transform:translateY(-2px);
}
.scroll-top:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.scroll-top svg{width:20px;height:20px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:480px){
  .scroll-top{bottom:18px;right:18px;width:44px;height:44px}
  .scroll-top svg{width:18px;height:18px}
}