:root{
  /* type scale */
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  /* spacing */
  --space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;
  --space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
  --radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --font-display:'Clash Display','Segoe UI',sans-serif;
  --font-body:'Satoshi','Helvetica Neue',sans-serif;
  --content:1120px;
  --transition:200ms cubic-bezier(.16,1,.3,1);
}
/* DARK (default) — deep navy */
[data-theme="dark"]{
  --bg:#08152b;--surface:#0e2140;--surface-2:#132a4f;--border:#22406e;
  --text:#e7eef8;--muted:#93a7c4;--faint:#5f7596;
  --action:#3b82f6;--action-hover:#60a5fa;      /* ACTION: bright blue CTAs pop on navy */
  --promise:#F2B705;--promise-soft:#ffcf3f;      /* PROMISE: gold identity, brackets */
  --navy-brand:#1b3a8f;                          /* brand navy from logo */
  --hero-scrim:rgba(6,14,32,.5);--hero-scrim-2:rgba(6,14,32,.94);
}
/* LIGHT */
[data-theme="light"]{
  --bg:#f4f7fc;--surface:#ffffff;--surface-2:#eaf0fa;--border:#d3ddee;
  --text:#0a1a33;--muted:#41536e;--faint:#8494ad;
  --action:#1b3a8f;--action-hover:#2b52c0;       /* ACTION: brand navy on light */
  --promise:#b98705;--promise-soft:#F2B705;
  --navy-brand:#1b3a8f;
  --hero-scrim:rgba(6,14,32,.42);--hero-scrim-2:rgba(6,14,32,.86);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--text);background:var(--bg)}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);line-height:1.1;text-wrap:balance;font-weight:700}
p{text-wrap:pretty;max-width:64ch}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.wrap{max-width:var(--content);margin:0 auto;padding:0 var(--space-6)}
.eyebrow{font-family:var(--font-body);font-weight:700;font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--promise);display:flex;align-items:center;gap:.6ch}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--promise);border-radius:2px}

/* Buttons — ACTION color */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55ch;font-weight:700;font-size:var(--text-sm);padding:.85em 1.5em;border-radius:var(--radius-full);transition:var(--transition);min-height:2.75rem}
.btn-primary{background:var(--action);color:#fff}
.btn-primary:hover{background:var(--action-hover);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--action);color:var(--action)}
.btn-hero-ghost{border:1.5px solid rgba(255,255,255,.38);color:#eef4f8}
.btn-hero-ghost:hover{border-color:#7eaaff;color:#a9c6ff}

/* Header */
header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:4.5rem}
.brand{display:flex;align-items:center;gap:.65ch;text-decoration:none}
.brand img{height:2.75rem;width:auto;max-width:220px;object-fit:contain}
/* Dark mode: invert the navy wordmark to white. Hue-rotate keeps the gold swoosh gold. */
[data-theme="dark"] .brand img{filter:invert(1) hue-rotate(180deg)}
/* Fallback text mark that shows if the logo image fails to load */
.brand-fallback{display:none;font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:.01em;color:var(--text)}
.brand-fallback b{color:var(--promise);font-weight:700}
.brand img.broken{display:none}
.brand:has(img.broken) .brand-fallback,.brand.no-img .brand-fallback{display:inline}
.nav-links{display:flex;align-items:center;gap:var(--space-8)}
.nav-links a{font-size:var(--text-sm);font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--action)}
.nav-cta{display:flex;align-items:center;gap:var(--space-4)}
.theme-btn{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:var(--radius-full);border:1px solid var(--border);color:var(--muted)}
.theme-btn:hover{color:var(--action);border-color:var(--action)}
.menu-btn{display:none}

/* Hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('hero.png') center/cover no-repeat;transform:scale(1.04)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(105deg,var(--hero-scrim-2) 0%,var(--hero-scrim) 55%,transparent 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:var(--space-24)}
.hero-inner{max-width:680px;color:#eef4f8}
.hero h1{font-size:var(--text-2xl);color:#fff;margin:var(--space-4) 0 var(--space-6);text-shadow:0 2px 24px rgba(6,14,32,.7)}
.hero h1 .act{color:#7eaaff;text-shadow:0 2px 20px rgba(6,14,32,.9)}          /* ACTION verb, brightened for contrast on photo */
.hero p.lead{font-size:var(--text-lg);color:#cddae3;margin-bottom:var(--space-3)}
.hero .identity{font-style:italic;font-family:var(--font-display);color:var(--promise-soft);font-size:var(--text-base);margin-bottom:var(--space-8)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}
.hero-micro{font-size:var(--text-sm);color:#cddae3;margin-top:var(--space-4)}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-10)}
.chip{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;padding:.5em 1em;border-radius:var(--radius-full);border:1px solid color-mix(in oklab,var(--promise) 55%,transparent);color:var(--promise-soft);background:color-mix(in oklab,var(--promise) 12%,transparent)} /* PROMISE: trust chips */

/* Sections */
section{padding-block:clamp(var(--space-16),8vw,var(--space-24))}
.sec-head{max-width:620px;margin-bottom:var(--space-12)}
.sec-head h2{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-4)}
.sec-head p{color:var(--muted)}
.center{text-align:center;margin-inline:auto}
.center .eyebrow{justify-content:center}

/* Problem strip */
.problem{background:var(--surface)}
.problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6)}
.problem-card{padding:var(--space-6);border-left:2px solid var(--promise)} /* PROMISE: structural mark */
.problem-card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.problem-card p{color:var(--muted);font-size:var(--text-sm)}

/* Services */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.svc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);transition:var(--transition)}
.svc:hover{border-color:var(--action);transform:translateY(-4px)}
.svc-ic{width:2.75rem;height:2.75rem;margin-bottom:var(--space-4);color:var(--action)}
.svc h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.svc p{color:var(--muted);font-size:var(--text-sm)}
.svc .tag{display:inline-block;margin-top:var(--space-4);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--promise)}
.svc.specialty{border-style:dashed}

/* Plan / 3 steps */
.plan{background:var(--surface)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-8)}
.step{position:relative;padding-top:var(--space-6)}
.step .num{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);color:var(--promise);line-height:1} /* PROMISE: number label */
.step h3{font-size:var(--text-lg);margin:var(--space-3) 0 var(--space-2)}
.step p{color:var(--muted);font-size:var(--text-sm)}
.sec-cta{margin-top:var(--space-10);display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;justify-content:center}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-6)}
.why{display:flex;gap:var(--space-4);align-items:flex-start}
.why svg{flex:none;width:1.6rem;height:1.6rem;color:var(--action);margin-top:.15rem}
.why h3{font-size:var(--text-base);margin-bottom:var(--space-2)}
.why p{color:var(--muted);font-size:var(--text-sm)}

/* Portfolio / socials */
.socials{background:var(--surface)}
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);margin-top:var(--space-8)}
.social{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);font-weight:600;font-size:var(--text-sm);transition:var(--transition)}
.social:hover{border-color:var(--action);color:var(--action);transform:translateY(-2px)}
.social svg{width:1.4rem;height:1.4rem;flex:none}

/* Form / funnel */
.funnel{background:linear-gradient(180deg,var(--bg),var(--surface-2))}
.funnel-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-16);align-items:start}
.funnel-copy h2{font-size:var(--text-xl);margin:var(--space-3) 0 var(--space-4)}
.funnel-copy p{color:var(--muted);margin-bottom:var(--space-6)}
.funnel-copy .contact-line{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);font-size:var(--text-sm)}
.funnel-copy .contact-line svg{width:1.2rem;height:1.2rem;color:var(--promise);flex:none} /* PROMISE: identity marks */
.funnel-copy .contact-line a.act{color:var(--action);font-weight:700}
.next-list{list-style:none;margin:0 0 var(--space-6);padding:0}
.next-list li{display:flex;gap:var(--space-3);align-items:flex-start;margin-bottom:var(--space-3);font-size:var(--text-sm);color:var(--muted)}
.next-list .n{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.75rem;background:color-mix(in oklab,var(--promise) 16%,transparent);color:var(--promise);margin-top:.1rem}
.next-list b{color:var(--text);font-weight:700}
.funnel-trust{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.funnel-trust .chip{color:var(--promise);background:color-mix(in oklab,var(--promise) 10%,transparent)}
form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-8)}
.form-head{margin-bottom:var(--space-6)}
.form-head h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.form-head p{color:var(--muted);font-size:var(--text-sm)}
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2)}
.field label .req{color:var(--action)}
.field label .opt{color:var(--faint);font-weight:500}
.field .hint,.reach-hint{display:block;font-size:var(--text-xs);color:var(--faint);font-weight:500}
.reach-hint{margin:-.25rem 0 var(--space-4)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field input,.field textarea,.field select{width:100%;min-height:3rem;padding:.85em 1em;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--bg);color:var(--text);transition:var(--transition);font-size:1rem}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--action)}
.field input.bad,.field textarea.bad,.field select.bad{border-color:#e05555}
.field textarea{min-height:7.5rem;resize:vertical}
.svc-checks{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.check{display:flex;align-items:center;gap:.65ch;font-size:var(--text-sm);font-weight:500;min-height:2.75rem;padding:.7em .85em;border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);-webkit-tap-highlight-color:transparent}
.check:hover{border-color:var(--action)}
.check input{width:1.15rem;height:1.15rem;flex:none;accent-color:var(--action)}
.check.on{border-color:var(--action);background:color-mix(in oklab,var(--action) 10%,transparent)}
.form-submit{width:100%;justify-content:center;margin-top:var(--space-2);min-height:3.25rem;font-size:var(--text-base)}
.form-submit:disabled{opacity:.7;cursor:wait;transform:none}
.form-note{font-size:var(--text-xs);color:var(--faint);margin-top:var(--space-3);text-align:center;max-width:none}
.form-msg{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;display:none}
.form-msg.ok{display:block;background:color-mix(in oklab,var(--action) 15%,transparent);color:var(--action)}
.form-msg.err{display:block;background:color-mix(in oklab,#e05555 18%,transparent);color:#ff9a9a}
[data-theme="light"] .form-msg.err{color:#9b1c1c}

/* Footer */
footer{background:var(--surface);border-top:1px solid var(--border);padding-block:var(--space-12)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-8)}
.foot .brand img{height:2.2rem;width:auto}
/* footer inherits the same dark-mode invert as the header logo */
.foot p{color:var(--muted);font-size:var(--text-sm);max-width:36ch;margin-top:var(--space-3)}
.foot-col h4{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--promise);margin-bottom:var(--space-4)}
.foot-col a,.foot-col span{display:block;color:var(--muted);font-size:var(--text-sm);margin-bottom:var(--space-2)}
.foot-col a:hover{color:var(--action)}
.foot-legal{margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid var(--border);color:var(--faint);font-size:var(--text-xs);text-wrap:pretty;max-width:none}

@media(max-width:860px){
  .funnel-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .nav-links{display:none}
  .menu-btn{display:grid;place-items:center;width:2.4rem;height:2.4rem;color:var(--text)}
  .nav-links.open{display:flex;position:absolute;top:4.5rem;left:0;right:0;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--border);padding:var(--space-6);gap:var(--space-4)}
}
@media(max-width:640px){
  .svc-checks,.field-row{grid-template-columns:1fr}
  form{padding:var(--space-6)}
  .nav-cta .btn-primary{padding:.7em 1.05em}
  .check{min-height:3rem}
}
@media(max-width:400px){
  .nav-cta .btn-primary{font-size:.8rem}
}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:var(--space-4);max-width:780px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}
.faq-item h3{font-size:var(--text-base);margin-bottom:var(--space-2)}
.faq-item p{color:var(--muted);font-size:var(--text-sm);max-width:none}

/* Blog listing + article */
.page-hero{padding-block:clamp(var(--space-12),6vw,var(--space-20));border-bottom:1px solid var(--border)}
.page-hero h1{font-size:var(--text-2xl);margin:var(--space-3) 0 var(--space-4)}
.page-hero p{color:var(--muted)}
.crumbs{display:flex;flex-wrap:wrap;gap:.5ch;font-size:var(--text-xs);color:var(--faint);margin-bottom:var(--space-4)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--action)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.blog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);transition:var(--transition)}
.blog-card:hover{border-color:var(--action);transform:translateY(-4px)}
.blog-card .meta{font-size:var(--text-xs);color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:var(--space-3)}
.blog-card h2{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.blog-card p{color:var(--muted);font-size:var(--text-sm);flex:1}
.blog-card .more{margin-top:var(--space-4);font-weight:700;font-size:var(--text-sm);color:var(--action)}
.article-wrap{max-width:760px;margin:0 auto;padding-block:clamp(var(--space-12),6vw,var(--space-20))}
.article-wrap .meta{font-size:var(--text-xs);color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:var(--space-4)}
.article-wrap h1{font-size:var(--text-xl);margin-bottom:var(--space-6)}
.article-wrap .lede{font-size:var(--text-lg);color:var(--muted);margin-bottom:var(--space-8);max-width:none}
.article-body h2{font-size:var(--text-lg);margin:var(--space-10) 0 var(--space-4)}
.article-body h3{font-size:var(--text-base);margin:var(--space-8) 0 var(--space-3)}
.article-body p{margin-bottom:var(--space-4);color:var(--text);max-width:none}
.article-body ul,.article-body ol{margin:0 0 var(--space-4) 1.25rem;color:var(--muted)}
.article-body li{margin-bottom:var(--space-2)}
.article-body a{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--action-hover)}
.article-cta{margin-top:var(--space-12);padding:var(--space-8);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.article-cta h2{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.article-cta p{color:var(--muted);margin-bottom:var(--space-6);max-width:none}
.related{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border)}
.related h2{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.related a{display:block;color:var(--action);font-weight:600;margin-bottom:var(--space-2)}
.svc .more{display:inline-block;margin-top:var(--space-3);font-size:var(--text-sm);font-weight:700;color:var(--action)}
.svc .more:hover{color:var(--action-hover)}
.nav-links a[aria-current="page"]{color:var(--action)}