/* ── On Deck Marketing: shared styles ── */
:root{
  --logo-nav-size: 54px;
  --logo-footer-size: 52px;
  --canvas:#EAEEF5;
  --cream:#F4F6FB;
  --white:#fff;
  --black:#000;
  --ink:#0B1A30;
  --muted:#4A5568;
  --faint:#636c77;
  --line:#D7DDE7;
  --navy:#004AAD;
  --navy-deep:#003481;
  --navy-tint:#E6EEF8;
  --orange:#FF751F;
  --orange-soft:#FFE8D8;
  --orange-text:#ad5015;    /* small text + icons on light surfaces (AA 4.5) */
  --orange-bright:#ffb282; /* small text + icons on navy/dark (AA 4.5) */
  --on-orange:var(--ink);
  --orange-ctx:var(--orange-text);   /* orange text/icons; overridden per surface below */           /* text sitting on an orange fill (6.49:1) */
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;}
html,body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--canvas);}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit;}
.page{max-width:1280px;margin:0 auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px;}

/* Type */
.eyebrow{font-family:'Inter';font-weight:500;font-size:14px;line-height:20px;letter-spacing:0.12em;color:var(--navy);text-transform:uppercase;}
.h-1{font-family:'Host Grotesk';font-weight:400;font-size:60px;line-height:64px;letter-spacing:-0.02em;color:var(--ink);}
.h-2{font-family:'Host Grotesk';font-weight:400;font-size:36px;line-height:44px;letter-spacing:-0.02em;color:var(--ink);}
.h-3{font-family:'Host Grotesk';font-weight:400;font-size:24px;line-height:32px;letter-spacing:-0.02em;color:var(--ink);}
.body{font-size:16px;line-height:24px;color:var(--muted);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;padding:8px 24px;min-height:48px;font-size:16px;line-height:24px;white-space:nowrap;transition:transform .15s ease, filter .15s ease;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);}
.btn-md{min-height:56px;}
.btn-primary{background:var(--orange);color:var(--on-orange);position:relative;overflow:hidden;}
.btn-primary::before{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);transform:skewX(-20deg);transition:left .8s ease;}
.btn-primary:hover::before{left:130%;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-dark{background:#000;color:#fff;}
.btn-outline-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);}
.btn-outline-light:hover{background:rgba(255,255,255,.08);}

/* Card shell */
.card{border-radius:20px;overflow:hidden;background:var(--white);}
.pad{padding:52px;}

/* ---------- Navbar ---------- */
nav.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border-radius:20px;padding:10px 24px;min-height:80px;box-shadow:0 1px 0 rgba(11,26,48,.04);}
nav.nav .logo{display:flex;align-items:center;gap:12px;}
nav.nav .logo img{height:var(--logo-nav-size);width:auto;transition:height .2s ease, transform .35s cubic-bezier(.2,.7,.2,1);}
nav.nav .logo:hover img{transform:rotate(-4deg) scale(1.04);}
nav.nav .menu{display:flex;align-items:center;gap:2px;}
nav.nav .menu a{padding:10px 10px;font-size:15px;color:var(--muted);border-radius:8px;position:relative;white-space:nowrap;}
nav.nav .menu a:hover{color:var(--navy);background:var(--navy-tint);}
nav.nav .menu a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);}
nav.nav .menu a:hover::after{transform:scaleX(1);}
nav.nav .menu a.active{color:var(--navy);background:var(--navy-tint);}
nav.nav .menu a.active::after{transform:scaleX(1);}
nav.nav .nav-actions{display:flex;align-items:center;gap:12px;}
nav.nav .phone{padding:10px 12px;color:var(--ink);font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
nav.nav .phone svg{color:var(--orange);}

/* ---------- Footer ---------- */
.footer{padding:52px;background:#000;color:#fff;border-radius:20px;display:flex;flex-direction:column;gap:64px;overflow:hidden;}
.footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;}
.footer .brand .logo-row{display:flex;align-items:center;gap:12px;}
.footer .brand .logo-row img{height:var(--logo-footer-size);width:auto;background:#fff;border-radius:10px;padding:6px 10px;transition:height .2s ease, transform .35s cubic-bezier(.2,.7,.2,1);}
.footer .brand .logo-row:hover img{transform:rotate(-4deg) scale(1.04);}
.footer .brand p{color:rgba(255,255,255,.7);font-size:16px;line-height:24px;max-width:380px;margin-top:24px;}
.footer .brand .meta{margin-top:24px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:rgba(255,255,255,.7);}
.footer .brand .meta a{color:#fff;}
.footer .brand .socials{margin-top:24px;display:flex;gap:10px;}
.footer .brand .socials a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.footer .brand .socials a:hover{background:var(--orange);}
.footer .col h4{font-size:13px;letter-spacing:0.12em;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.footer .col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer .col a{color:rgba(255,255,255,.65);font-size:15px;font-weight:300;}
.footer .col a:hover{color:var(--orange);}
.footer .wordmark{font-family:'Host Grotesk';font-weight:500;font-size:280px;line-height:.85;letter-spacing:-0.05em;background:linear-gradient(180deg, var(--navy) 0%, var(--orange) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:16px;text-align:left;background-size:200% 200%;animation:gradShift 9s ease-in-out infinite;}
@keyframes gradShift{
  0%,100%{background-position:0% 0%;}
  50%{background-position:100% 100%;}
}
.footer .bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;color:rgba(255,255,255,.65);font-weight:300;}
.footer .bottom a{color:rgba(255,255,255,.65);margin-right:24px;}

/* ---------- Page hero (reusable smaller hero for non-home pages) ---------- */
.page-hero{position:relative;border-radius:20px;overflow:hidden;background:#0a1730;padding:80px 52px 64px;color:#fff;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;}
.page-hero .bg{position:absolute;inset:0;background:url('assets/hero-bg.jpg') center/cover no-repeat;}
.page-hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(0,52,129,.92) 0%, rgba(0,74,173,.7) 60%, rgba(0,52,129,.55) 100%);}
.page-hero .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);background-size:48px 48px;}
.page-hero .content{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;max-width:840px;}
.page-hero .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.7);letter-spacing:0.06em;}
.page-hero .crumbs a:hover{color:var(--orange);}
.page-hero .crumbs .sep{color:rgba(255,255,255,.4);}
.page-hero h1{font-family:'Host Grotesk';font-weight:400;font-size:72px;line-height:1.04;letter-spacing:-0.03em;color:#fff;}
.page-hero h1 em{font-style:normal;color:var(--orange);}
.page-hero .lede{font-size:19px;line-height:30px;color:rgba(255,255,255,.88);max-width:680px;}
.page-hero .lede strong{color:var(--orange);font-weight:500;}
.page-hero .pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-size:13px;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);align-self:flex-start;}
.page-hero .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,117,31,.25);animation:pillPulse 2s ease-in-out infinite;}

/* ───────────── Motion system ───────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition:none !important; }
  .reveal{opacity:1;transform:none;}
}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.delay-1{transition-delay:.08s;}
.reveal.delay-2{transition-delay:.16s;}
.reveal.delay-3{transition-delay:.24s;}
.reveal.delay-4{transition-delay:.32s;}
.reveal.delay-5{transition-delay:.4s;}
.reveal.delay-6{transition-delay:.48s;}

@keyframes pillPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,117,31,.35);}
  50%{box-shadow:0 0 0 8px rgba(255,117,31,0);}
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes wordRise { to { opacity:1; transform:none; } }
@keyframes floatIn  { to { opacity:1; transform:none; } }
@keyframes drift{
  0%   { transform: translate(0,0) scale(1); opacity:.9; }
  100% { transform: translate(40px,30px) scale(1.15); opacity:1; }
}

/* Page hero entrance */
.page-hero h1 .word{display:inline-block;opacity:0;transform:translateY(40px);animation:wordRise .9s cubic-bezier(.2,.7,.2,1) forwards;}
.page-hero .pill,.page-hero .crumbs,.page-hero .lede{opacity:0;transform:translateY(16px);animation:floatIn .8s cubic-bezier(.2,.7,.2,1) forwards;}
.page-hero .pill{animation-delay:.1s;}
.page-hero .crumbs{animation-delay:.2s;}
.page-hero .lede{animation-delay:.6s;}
.page-hero .bg{transform:scale(1.06);animation:bgZoom 14s ease-out infinite alternate;}
@keyframes bgZoom{ from { transform:scale(1.06);} to { transform:scale(1.14) translate(-2%, -1%);} }

/* ── Responsive layer ── */
.mobile-bar{display:none;}
nav.nav .hamburger{display:none;}
@media(max-width:900px){
  nav.nav .menu a{padding:10px 8px;font-size:13px;}
  nav.nav .phone{display:none;}
}
@media(max-width:768px){
  .page{padding:12px 12px 84px;gap:12px;}
  .page{padding-bottom:calc(84px + env(safe-area-inset-bottom));}
  nav.nav{padding:10px 16px;min-height:64px;position:relative;z-index:60;}
  nav.nav .logo img{height:44px;}
  nav.nav .menu{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:16px;flex-direction:column;align-items:stretch;padding:12px;box-shadow:0 24px 48px -16px rgba(11,26,48,.3);}
  nav.nav.open .menu{display:flex;}
  nav.nav .menu a{padding:14px;font-size:16px;}
  nav.nav .nav-actions{display:none;}
  nav.nav .hamburger{display:flex;width:44px;height:44px;border-radius:10px;background:var(--cream);align-items:center;justify-content:center;color:var(--ink);}
  .page-hero{padding:48px 24px 40px;min-height:0;}
  .page-hero h1{font-size:clamp(38px,9vw,84px);line-height:1.05;}
  .page-hero .lede{font-size:16px;line-height:26px;}
  .h-1{font-size:clamp(32px,7.5vw,60px);line-height:1.08;}
  .h-2{font-size:clamp(24px,6vw,36px);line-height:1.2;}
  .page section{display:block;padding:32px 20px;}
  .page section.hero{padding:0;}
  .page section > * + *{margin-top:20px;}
  .page section [class*="grid"]:not(.grid-overlay),.page .stats,.page .tiers,.page .channels,.page .months,.page .badges,.page .nums,.page .industries,.page .compare,.page .track,.page .timeline,.page .ch-grid{display:grid !important;grid-template-columns:1fr !important;gap:12px !important;}
  .page .stats-row,.page .ctas,.page .row{flex-wrap:wrap;}
  .footer{padding:32px 20px;}
  .footer .top{grid-template-columns:1fr;gap:32px;}
  .footer .wordmark{font-size:clamp(56px,20vw,280px);}
  table{display:block;overflow-x:auto;}
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;min-height:56px;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 16px rgba(11,26,48,.15);}
  .mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#fff;}
  .mobile-bar .mb-call{background:var(--orange);}
  .mobile-bar .mb-plan{background:var(--navy);}
}


/* ── Accessibility: focus visibility (WCAG 2.4.7) ── */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px;border-radius:4px;}
.hero :focus-visible,.page-hero :focus-visible,.cta :focus-visible,.notfor :focus-visible,
.guarantee :focus-visible,.footer :focus-visible,.diff :focus-visible,.closer :focus-visible,
.featured :focus-visible,.problem .right :focus-visible,.calendar :focus-visible,
.stat-banner :focus-visible,.math :focus-visible,.tier.popular :focus-visible,
.case.feature :focus-visible,.sp-block.dark :focus-visible{outline:3px solid #fff;outline-offset:2px;}
.btn-primary:focus-visible,.mobile-bar .mb-call:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}

/* ── Accessibility: skip link (WCAG 2.4.1) ── */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy);color:#fff;
  padding:14px 22px;border-radius:0 0 12px 0;font-size:15px;font-weight:500;}
.skip-link:focus{left:0;}

/* ── Landmark wrapper: nav/main/footer are siblings inside .page ── */
.page > main{display:flex;flex-direction:column;gap:20px;}
@media(max-width:768px){.page > main{gap:12px;}}

/* ── Accessibility: contextual orange resolution ──
   --orange-ctx is the ONLY token used for orange text/icons. Its value is
   resolved by the surface it lands on, so contrast cannot regress by omission. */
.hero,.page-hero,.cta,.notfor,.guarantee,.diff,.featured,.stat-banner,.calendar,.rule7,
.problem .right,.tier.popular,.opt.win,.case.feature,.case2.dark,.sp-block.dark,
.testi .quote-card,.kpi.feature,.stat-card.feature,.pricing .compare .item.win,
.founder .pic,.fit .yes-col,.nbprob .pcard.feat,.ai-mock,.results-table,
.roofprob .cost-card,.calc .out,.math .total,.closer.on-navy,
.compare-tbl thead th.win,.stats3 .s.feat,.nbprob .pcard.feat,.fit .yes-col,.feat .right,
.notfor .item,.month,.touch,.rule7 .callout,.closer .bdg,.diff .col.us{--orange-ctx:var(--orange-bright);}
.calc,.math,.agg,.svc.feature,.ch.feature,.ncell.feat,.month.peak,.closer.on-orange,
.radius .home.lit,.btn-primary,.mobile-bar .mb-call{--orange-ctx:var(--on-orange);}
.closer .btn-white,.blitz-hero .pill,.compare td.odm{--orange-ctx:var(--orange-text);}

/* inset panels on navy: keep backdrops dark so white + accent text stay >=4.5 */
.notfor .item{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.14);}
.svc.dark .ic,.ch.dark .ic{background:rgba(0,0,0,.28);}