:root{
    --bg:#f7f6f2;
    --bg-2:#ffffff;
    --ink:#0a0b0a;
    --ink-2:#3a3d3a;
    --ink-3:#7a7d78;
    --rule:rgba(10,11,10,0.10);
    --rule-soft:rgba(10,11,10,0.06);
    --accent:#1F5FD6;                 /* brand blue — truer blue, less violet */
    --accent-2:#8DAAF2;               /* light blue, for dark backgrounds */
    --accent-blue:#1F5FD6;            /* highlight blue */
    --accent-blue-2:#5E92F4;          /* highlight blue on dark */
    --sans:'Geist', system-ui, sans-serif;
    --serif:'Instrument Serif', Georgia, serif;
    --mono:'JetBrains Mono', monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    letter-spacing:-0.005em;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
  .container{max-width:1320px;margin:0 auto;padding:0 48px}
  .narrow{max-width:840px;margin:0 auto;padding:0 48px}
  .mono{font-family:var(--mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase}
  .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}

  /* ── Nav ─────────────────────────────────── */
  .nav{position:sticky;top:16px;z-index:50;margin:16px 24px 0;border-radius:999px;background:rgba(247,246,242,0.85);backdrop-filter:blur(16px);border:1px solid var(--rule)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 24px}
  .logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;letter-spacing:-0.015em}
  .logo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
  .logo-img{height:34px;width:auto;display:block}
  .nav-links{display:flex;gap:4px;font-size:13.5px}
  .nav-links a{display:inline-flex;align-items:center;padding:8px 14px;color:var(--ink-2);transition:all 0.15s;border-radius:999px;letter-spacing:-0.005em}
  .nav-links a:hover{color:var(--ink);background:rgba(10,11,10,0.04)}
  .nav-links a.active{color:var(--ink);background:rgba(10,11,10,0.06)}
  .nav-cta{font-size:13.5px;padding:9px 16px;background:var(--ink);color:var(--bg);border-radius:999px;display:inline-flex;align-items:center;gap:6px;transition:all 0.15s}
  .nav-cta:hover{background:var(--accent)}
  /* hamburger — hidden on desktop, shown ≤860px */
  .nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border-radius:999px;flex:0 0 auto}
  .nav-burger:hover{background:rgba(10,11,10,0.04)}
  .burger-line{display:block;width:20px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
  .nav-mobile{display:none}
  .nav-mobile-link{text-align:left;padding:13px 16px;border-radius:12px;font-size:16px;color:var(--ink-2);font-weight:500;letter-spacing:-0.01em;transition:background .15s,color .15s}
  .nav-mobile-link:hover{background:rgba(10,11,10,0.04);color:var(--ink)}
  .nav-mobile-link.active{background:rgba(10,11,10,0.06);color:var(--ink)}
  .nav-mobile-cta{margin-top:8px;text-align:center;padding:14px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:500;font-size:15px;transition:background .15s}
  .nav-mobile-cta:hover{background:var(--accent)}

  /* ── Hero ─────────────────────────────────── */
  .hero{padding:96px 0 0}
  .hero h1{
    font-family:var(--sans);
    font-weight:400;
    font-size:128px;
    line-height:0.93;
    letter-spacing:-0.045em;
    margin:0;
    text-wrap:balance;
    max-width:1180px;
  }
  .hero h1 .ac{color:var(--accent)}
  .hero h1 .ser{font-weight:600;letter-spacing:-0.02em;color:var(--accent-blue)}
  .hero h1.hero-home{font-size:88px;line-height:0.96;letter-spacing:-0.04em;max-width:1180px}
  .hero-tagline{font-size:30px;line-height:1.3;font-weight:300;letter-spacing:-0.015em;color:var(--ink-2);margin:28px 0 0;max-width:760px;text-wrap:balance}
  .hero-row{display:grid;grid-template-columns:1fr 480px;gap:64px;margin-top:80px;align-items:end;padding-bottom:48px;border-bottom:1px solid var(--rule)}
  .hero-lede{font-size:22px;line-height:1.4;color:var(--ink-2);max-width:540px;font-weight:300}
  .hero-cta{display:flex;gap:16px;margin-top:32px;align-items:center}
  .btn-primary{background:var(--ink);color:var(--bg);padding:14px 22px;border-radius:999px;font-size:14px;display:inline-flex;gap:8px;align-items:center;transition:all 0.18s;font-weight:500}
  .btn-primary:hover{background:var(--accent)}
  .btn-ghost{padding:14px 6px;font-size:14px;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center;transition:color 0.15s;font-weight:500}
  .btn-ghost:hover{color:var(--ink)}
  .btn-ghost .arr{transition:transform 0.2s}
  .btn-ghost:hover .arr{transform:translateX(4px)}

  .hero-meta{display:flex;flex-direction:column;gap:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--bg-2)}
  .meta-row{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:18px 24px;align-items:center}
  .meta-row + .meta-row{border-top:1px solid var(--rule)}
  .meta-row .k{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3)}
  .meta-row .v{font-size:15px;line-height:1.4;color:var(--ink);font-weight:400}
  .meta-row .v .ser{color:var(--accent-blue);font-size:18px;font-weight:600}

  .marquee{padding:48px 0;border-bottom:1px solid var(--rule)}
  .marquee-row{display:flex;align-items:center;justify-content:space-between;gap:48px;color:var(--ink-3)}
  .marquee-row .label{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase}
  .logos-row{display:flex;gap:48px;align-items:center;flex:1;justify-content:flex-end}
  .logo-ph{height:24px;padding:0 14px;background:var(--rule-soft);border-radius:6px;display:flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3)}

  /* ── Services ──────────────────────────────── */
  .services-section{padding:160px 0 120px;border-bottom:1px solid var(--rule)}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:64px;margin-bottom:80px}
  .sec-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
  .sec-eyebrow::before{content:"";width:32px;height:1px;background:var(--accent)}
  .sec-head h2{font-family:var(--sans);font-weight:400;font-size:72px;line-height:0.98;letter-spacing:-0.035em;margin:24px 0 0;max-width:780px;text-wrap:balance}
  .sec-head h2 .ser{font-weight:600;color:var(--accent-blue);letter-spacing:-0.015em}

  .svc-stack{display:flex;flex-direction:column;gap:0}
  .svc-card{display:grid;grid-template-columns:120px 1fr 1.4fr 80px;gap:48px;padding:48px 16px;border-top:1px solid var(--rule);align-items:center;cursor:pointer;transition:padding 0.25s,background 0.2s;border-radius:0;position:relative}
  .svc-card:last-child{border-bottom:1px solid var(--rule)}
  .svc-card:hover{background:var(--bg-2)}
  .svc-card:hover .svc-arr{background:var(--accent);color:var(--bg-2);transform:rotate(-45deg)}
  .svc-n{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--ink-3)}
  .svc-title{font-size:36px;font-weight:400;line-height:1.02;letter-spacing:-0.025em;color:var(--accent)}
  .svc-title .ser{font-weight:600;color:var(--accent-blue)}
  .svc-body{font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:520px;font-weight:300}
  .svc-arr{width:48px;height:48px;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:18px;transition:all 0.25s;color:var(--ink-2);margin-left:auto}

  /* ── Pain / why ────────────────────────────── */
  .why{padding:160px 0;background:var(--ink);color:var(--bg);border-radius:48px;margin:80px 24px;overflow:hidden;position:relative}
  .why .container{max-width:1280px;padding:0 64px}
  .why-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:start}
  .why-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-2);display:flex;align-items:center;gap:10px;margin-bottom:40px}
  .why-eyebrow::before{content:"";width:32px;height:1px;background:var(--accent-2)}
  .why h2{font-family:var(--sans);font-weight:400;font-size:64px;line-height:1.04;letter-spacing:-0.03em;margin:0;text-wrap:balance;color:var(--bg)}
  .why h2 .ser{color:var(--accent-blue-2);font-weight:600}
  .why-side{font-size:18px;line-height:1.5;color:rgba(247,246,242,0.7);font-weight:300}

  /* ── Process ──────────────────────────── */
  .process-section{padding:120px 0;border-bottom:1px solid var(--rule)}
  .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:64px;border-top:1px solid var(--rule);padding-top:48px}
  .pstep-n{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--accent);margin-bottom:24px}
  .pstep-t{font-size:30px;font-weight:400;letter-spacing:-0.025em;line-height:1.02;margin-bottom:16px}
  .pstep-t .ser{font-weight:600;color:var(--accent-blue)}
  .pstep-b{font-size:14.5px;line-height:1.55;color:var(--ink-2);font-weight:300;margin-bottom:24px}
  .pstep-d{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);padding-top:16px;border-top:1px solid var(--rule-soft)}

  /* ── Case studies ──────────────────────── */
  .cases-section{padding:120px 0;border-bottom:1px solid var(--rule)}
  .case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .case-card{background:var(--bg-2);border:1px solid var(--rule);border-radius:24px;padding:36px;cursor:pointer;transition:all 0.25s;position:relative;display:flex;flex-direction:column;min-height:320px}
  .case-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 32px rgba(10,11,10,0.06)}
  .case-card-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:32px}
  .case-card-metric{font-size:42px;font-weight:400;line-height:1.04;letter-spacing:-0.03em;color:var(--accent);margin-bottom:8px;text-wrap:balance}
  .case-card-metric .ser{font-weight:600}
  .case-card-metric-l{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:32px}
  .case-card h3{font-size:24px;font-weight:400;line-height:1.15;letter-spacing:-0.02em;margin:0 0 12px;text-wrap:balance}
  .case-card p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0;font-weight:300}
  .case-card .read-more{margin-top:auto;padding-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}

  /* ── Manifesto / pull quote ───────────── */
  .pull{padding:200px 0;text-align:center;border-bottom:1px solid var(--rule)}
  .pull p{font-family:var(--sans);font-size:64px;line-height:1.05;font-weight:300;letter-spacing:-0.03em;max-width:1100px;margin:0 auto;text-wrap:balance}
  .pull p .ser{color:var(--accent-blue);font-weight:600;letter-spacing:-0.02em}
  .pull .sig{margin-top:40px;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}

  /* ── Statement sections ─────────────────────── */
  .statement{padding:128px 0;border-bottom:1px solid var(--rule)}
  .statement.alt{background:var(--bg-2)}
  .statement-grid{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
  .statement-label{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);padding-top:14px;display:flex;align-items:center;gap:10px}
  .statement-label::before{content:"";width:32px;height:1px;background:var(--accent)}
  .statement-body{font-size:34px;line-height:1.32;font-weight:300;letter-spacing:-0.02em;color:var(--ink);max-width:920px;text-wrap:pretty}
  .statement-body p{margin:0 0 28px}
  .statement-body p:last-child{margin-bottom:0}
  .statement-body .ser{color:var(--accent-blue);font-weight:600}
  .placeholder-note{font-size:16px !important;color:var(--ink-3) !important;font-family:var(--mono);letter-spacing:0.02em;line-height:1.5;margin-top:8px !important;text-transform:none}

  .audience{margin-top:48px;border-top:1px solid var(--rule)}
  .audience-row{display:grid;grid-template-columns:1fr 280px;gap:32px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:baseline}
  .audience-who{font-size:24px;font-weight:400;letter-spacing:-0.02em;color:var(--ink)}
  .audience-what{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);text-align:right}

  /* ── CTA strip ──────────────────────────── */
  .cta-strip{padding:120px 0;background:var(--bg-2);border-bottom:1px solid var(--rule)}
  .cta-strip .row{display:flex;justify-content:space-between;align-items:center;gap:48px}
  .cta-strip h2{font-family:var(--sans);font-weight:400;font-size:64px;line-height:1.02;letter-spacing:-0.03em;margin:0;max-width:780px;text-wrap:balance}
  .cta-strip h2 .ser{color:var(--accent-blue);font-weight:600}
  .cta-sub{font-size:19px;line-height:1.45;color:var(--ink-2);font-weight:300;margin:20px 0 0;max-width:520px}

  /* ── Footer ──────────────────────────── */
  footer{padding:80px 0 32px}
  .footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:48px;margin-bottom:80px}
  footer h3{font-family:var(--sans);font-weight:300;font-size:64px;line-height:0.98;letter-spacing:-0.035em;margin:0 0 32px;max-width:560px}
  footer h3 .ser{color:var(--accent-blue);font-weight:600}
  .footer-col h4{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;font-weight:400}
  .footer-col a{display:block;padding:6px 0;color:var(--ink-2);font-size:14px;transition:color 0.15s}
  .footer-col a:hover{color:var(--accent)}
  .footer-col span.static{display:block;padding:6px 0;color:var(--ink-2);font-size:14px}
  .footer-bot{display:flex;justify-content:space-between;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-3)}
  footer .container{position:relative}
  .footer-mark{position:absolute;right:48px;bottom:116px;margin:0}
  .footer-mark img{width:96px;height:96px;display:block}

  /* ── Sub-pages ──────────────────────── */
  .page-head{padding:120px 0 80px;border-bottom:1px solid var(--rule)}
  .page-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:32px;display:flex;align-items:center;gap:10px}
  .page-eyebrow::before{content:"";width:32px;height:1px;background:var(--accent)}
  .page-head h1{font-family:var(--sans);font-weight:400;font-size:104px;line-height:0.95;letter-spacing:-0.04em;margin:0;max-width:1100px;text-wrap:balance}
  .page-head h1 .ser{color:var(--accent-blue);font-weight:600;letter-spacing:-0.02em}
  .page-head .lede{font-size:22px;line-height:1.4;color:var(--ink-2);max-width:680px;margin-top:32px;font-weight:300}

  .svc-detail{padding:80px 0;border-bottom:1px solid var(--rule)}
  .svc-detail-row{display:grid;grid-template-columns:120px 1fr 360px;gap:64px;align-items:start}
  .svc-detail-n{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--accent)}
  .svc-detail-title{font-family:var(--sans);font-size:56px;font-weight:400;letter-spacing:-0.035em;line-height:0.98;margin:0 0 24px}
  .svc-detail-title .ser{color:var(--accent-blue);font-weight:600}
  .svc-detail-body{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:560px;font-weight:300;margin-bottom:40px}
  .svc-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
  .svc-detail-list .item{padding:14px 0;border-top:1px solid var(--rule);font-size:15px;display:flex;align-items:center;gap:12px}
  .svc-detail-list .item .num{font-family:var(--mono);font-size:11px;color:var(--accent);min-width:32px}
  .svc-side{background:var(--bg-2);border:1px solid var(--rule);border-radius:20px;padding:32px}
  .svc-side h5{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:400}
  .svc-side .price{font-family:var(--sans);font-size:44px;font-weight:400;letter-spacing:-0.03em;line-height:1;color:var(--ink)}
  .svc-side .price-l{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.08em;text-transform:uppercase;margin-top:8px;margin-bottom:28px}
  .svc-side .divider{border-top:1px solid var(--rule);margin:24px 0}
  .svc-side .fit{font-size:14.5px;line-height:1.55;color:var(--ink-2);font-weight:300}

  /* Case full page */
  .case-full{padding:56px 0;border-top:1px solid var(--rule)}
  .case-full:last-child{border-bottom:1px solid var(--rule)}
  .case-full-row{display:grid;grid-template-columns:200px 1fr 300px;gap:48px;align-items:start}
  .case-full-meta{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.75;letter-spacing:0.04em}
  .case-full-meta .lbl{color:var(--ink-3);text-transform:uppercase;letter-spacing:0.1em;font-size:10px;display:block;margin-bottom:4px}
  .case-full-title{font-size:44px;font-weight:400;letter-spacing:-0.03em;line-height:1.02;margin:0 0 20px;text-wrap:balance}
  .case-full-title .ser{color:var(--accent-blue);font-weight:600}
  .case-full-body{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:560px;font-weight:300}
  .case-full-actions{display:flex;align-items:center;gap:14px;margin-top:28px}
  .try-btn{font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:999px;background:var(--ink);color:var(--bg);border:1px solid var(--ink);opacity:0.35;cursor:not-allowed}
  .soon-tag{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);padding:7px 12px;border:1px solid var(--rule);border-radius:999px}
  .case-full-metric{background:var(--bg-2);border:1px solid var(--rule);border-radius:16px;padding:28px;text-align:right}
  .case-full-metric .v{font-size:42px;color:var(--accent);font-weight:400;line-height:1.04;letter-spacing:-0.03em;text-wrap:balance}
  .case-full-metric .v .ser{font-weight:600}
  .case-full-metric .l{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px}

  /* About */
  .letter{padding:120px 0;border-bottom:1px solid var(--rule)}
  .letter-inner{max-width:760px;margin:0 auto;padding:0 48px}
  .letter h2{font-family:var(--sans);font-size:48px;font-weight:400;letter-spacing:-0.03em;line-height:1.04;margin:0 0 48px;text-wrap:balance}
  .letter h2 .ser{color:var(--accent-blue);font-weight:600}
  .letter p{font-size:20px;line-height:1.6;color:var(--ink);margin:0 0 28px;font-weight:300}
  .letter p .ser{color:var(--accent-blue);font-size:22px;font-weight:600}
  .letter .sig{font-family:var(--serif);font-style:italic;font-size:28px;margin-top:48px;color:var(--ink-2)}

  .team-section{padding:120px 0;border-bottom:1px solid var(--rule)}
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .person{}
  .portrait{width:100%;aspect-ratio:4/5;background:var(--bg-2);border:1px solid var(--rule);border-radius:16px;margin-bottom:20px;display:flex;align-items:flex-end;padding:18px;font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3);background-image:linear-gradient(135deg,rgba(10,11,10,0.02) 0%,transparent 50%,rgba(10,11,10,0.04) 100%)}
  .person-name{font-size:22px;font-weight:400;letter-spacing:-0.02em;line-height:1.1}
  .person-role{font-family:var(--mono);font-size:11px;color:var(--accent);margin-top:8px;line-height:1.5;letter-spacing:0.06em;text-transform:uppercase}
  .person-note{font-size:14px;color:var(--ink-2);margin-top:12px;line-height:1.5;font-weight:300}

  /* Mission page */
  .mission-wrap{padding:24px 0 0}
  .mission-box{background:var(--ink);color:var(--bg);border-radius:48px;margin:0 24px;padding:128px 0;overflow:hidden}
  .mission-box .container{max-width:1120px}
  .mission-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-2);display:flex;align-items:center;gap:10px;margin-bottom:40px}
  .mission-eyebrow::before{content:"";width:32px;height:1px;background:var(--accent-2)}
  .mission-statement{font-family:var(--sans);font-size:56px;line-height:1.1;font-weight:400;letter-spacing:-0.03em;margin:0;max-width:1000px;text-wrap:balance;color:var(--bg)}
  .mission-statement .ser{color:var(--accent-blue-2);font-weight:600}

  .beliefs{padding:120px 0;border-bottom:1px solid var(--rule)}
  .beliefs-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:48px;border-top:1px solid var(--rule);padding-top:56px}
  .belief-n{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;color:var(--accent);margin-bottom:24px}
  .belief p{font-size:28px;line-height:1.3;font-weight:300;letter-spacing:-0.02em;color:var(--ink);margin:0;text-wrap:pretty}
  .belief p .ser{color:var(--accent-blue);font-weight:600}

  .working-toward{padding:128px 0;border-bottom:1px solid var(--rule)}
  .wt-grid{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start}
  .wt-grid .sec-eyebrow{padding-top:14px}
  .wt-statement{font-size:44px;line-height:1.18;font-weight:300;letter-spacing:-0.025em;color:var(--ink);margin:0;max-width:900px;text-wrap:balance}
  .wt-statement .ser{color:var(--accent-blue);font-weight:600}

  /* Contact */
  .contact-section{padding:80px 0}
  .contact-grid{display:grid;grid-template-columns:1fr 380px;gap:80px;align-items:start}
  .form-row{margin-bottom:28px}
  .form-row label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
  .form-row input,.form-row textarea,.form-row select{font:inherit;font-family:var(--sans);font-size:18px;background:var(--bg-2);border:1px solid var(--rule);padding:14px 16px;border-radius:12px;color:var(--ink);outline:none;width:100%;transition:border 0.15s}
  .form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--accent)}
  .form-row textarea{resize:none;min-height:120px;line-height:1.55}
  .form-2col{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .pill-row{display:flex;flex-wrap:wrap;gap:8px}
  .pill{padding:10px 16px;border:1px solid var(--rule);background:var(--bg-2);border-radius:999px;font-size:13.5px;cursor:pointer;transition:all 0.15s;color:var(--ink-2)}
  .pill:hover{border-color:var(--ink-2);color:var(--ink)}
  .pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .err{font-family:var(--mono);font-size:10px;color:#c54a4a;margin-top:6px;letter-spacing:0.06em;text-transform:uppercase}
  .submit{background:var(--ink);color:var(--bg);padding:16px 28px;border-radius:999px;font-size:14px;display:inline-flex;gap:8px;align-items:center;margin-top:16px;transition:all 0.15s;font-weight:500}
  .submit:hover{background:var(--accent)}
  .sent{padding:48px;background:var(--bg-2);border:1px solid var(--accent);border-radius:24px;font-size:24px;line-height:1.45;font-weight:300}
  .sent .ser{color:var(--accent-blue);font-size:28px;font-weight:600}

  .contact-side{background:var(--bg-2);border:1px solid var(--rule);border-radius:20px;padding:32px}
  .contact-side h4{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-weight:400}
  .contact-side .v{font-size:16px;color:var(--ink);margin-bottom:24px;line-height:1.5}
  .contact-side .v a{color:var(--accent);border-bottom:1px solid var(--accent-2)}
  .contact-side .v:last-child{margin-bottom:0}

  .back-to-canvas{position:fixed;bottom:20px;left:20px;z-index:100;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;opacity:0.92;transition:opacity 0.15s}
  .back-to-canvas:hover{opacity:1}

  /* ════════════════════════════════════════════════
     RESPONSIVE — hamburger nav (≤860), tablet (≤1024), mobile (≤640)
     ════════════════════════════════════════════════ */

  /* ── Hamburger nav ─────────────────────────── */
  @media (max-width: 1024px){
    .nav{margin:12px 16px 0}
    .nav-inner{padding:8px 8px 8px 18px}
    .nav-links{display:none}
    .nav-cta{display:none}
    .nav-burger{display:flex}
    .nav.open{border-radius:24px}
    .nav.open .nav-inner{border-bottom:1px solid var(--rule)}
    .nav.open .nav-mobile{display:flex;flex-direction:column;padding:8px;gap:2px}
    .nav.open .burger-line:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
    .nav.open .burger-line:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
    .logo-img{height:30px}
  }

  /* ── Tablet ────────────────────────────────── */
  @media (max-width: 1024px){
    .container{padding:0 32px}
    .narrow{padding:0 32px}

    .hero{padding:72px 0 0}
    .hero h1{font-size:84px}
    .hero h1.hero-home{font-size:60px}
    .hero-tagline{font-size:24px}
    .hero-row{grid-template-columns:1fr;gap:40px;margin-top:48px}
    .hero-meta{max-width:540px}

    .marquee-row{flex-direction:column;align-items:flex-start;gap:20px}
    .logos-row{flex-wrap:wrap;gap:18px;justify-content:flex-start}

    .services-section{padding:96px 0 80px}
    .sec-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:56px}
    .sec-head h2{font-size:52px}
    .svc-card{grid-template-columns:1fr auto;grid-template-areas:"n arr" "title arr" "body body";gap:6px 24px;padding:36px 12px;align-items:start}
    .svc-n{grid-area:n}
    .svc-title{grid-area:title}
    .svc-body{grid-area:body;max-width:none;margin-top:14px}
    .svc-arr{grid-area:arr;align-self:start;margin:0}

    .why{padding:112px 0;margin:64px 24px;border-radius:36px}
    .why .container{padding:0 40px}
    .why-grid{grid-template-columns:1fr;gap:40px}
    .why h2{font-size:46px}

    .process-section{padding:96px 0}
    .process-grid{grid-template-columns:1fr 1fr;gap:44px 40px}

    .cases-section{padding:96px 0}

    .pull{padding:140px 0}
    .pull p{font-size:48px}

    .statement{padding:96px 0}
    .statement-grid{grid-template-columns:1fr;gap:24px}
    .statement-label{padding-top:0}
    .statement-body{font-size:28px}
    .audience-row{grid-template-columns:1fr;gap:6px}
    .audience-what{text-align:left}

    .cta-strip{padding:96px 0}
    .cta-strip .row{flex-direction:column;align-items:flex-start;gap:32px}
    .cta-strip h2{font-size:48px}

    .footer-grid{grid-template-columns:1fr 1fr;gap:48px 32px}
    footer h3{font-size:48px;max-width:none}
    .footer-mark{position:static;display:flex;justify-content:flex-end;margin-top:40px}

    .page-head{padding:88px 0 56px}
    .page-head h1{font-size:76px}

    .svc-detail-row{grid-template-columns:1fr;gap:32px}
    .svc-detail-title{font-size:48px}
    .svc-side{max-width:480px}

    .case-full-row{grid-template-columns:1fr;gap:28px}
    .case-full-metric{max-width:320px}

    .letter{padding:96px 0}
    .letter h2{font-size:38px}

    .team-section{padding:96px 0}
    .team-grid{grid-template-columns:1fr 1fr;gap:28px}

    .mission-box{padding:96px 0;border-radius:36px}
    .mission-statement{font-size:44px}
    .beliefs{padding:96px 0}
    .beliefs-grid{grid-template-columns:1fr;gap:40px}
    .working-toward{padding:96px 0}
    .wt-grid{grid-template-columns:1fr;gap:24px}
    .wt-grid .sec-eyebrow{padding-top:0}
    .wt-statement{font-size:38px}

    .contact-grid{grid-template-columns:1fr;gap:48px}
    .contact-side{max-width:480px}
  }

  /* ── Mobile ────────────────────────────────── */
  @media (max-width: 640px){
    .container{padding:0 20px}
    .narrow{padding:0 20px}

    .hero{padding:48px 0 0}
    .hero h1{font-size:50px;line-height:0.98}
    .hero h1.hero-home{font-size:38px;line-height:1.03}
    .hero-tagline{font-size:20px;margin-top:20px}
    .hero-row{margin-top:36px;padding-bottom:36px;gap:32px}
    .hero-lede{font-size:18px}
    .hero-cta{flex-wrap:wrap;gap:12px}
    .meta-row{grid-template-columns:1fr;gap:4px;padding:14px 18px}

    .marquee{padding:32px 0}

    .services-section{padding:64px 0 56px}
    .sec-head h2{font-size:36px}
    .svc-card{padding:28px 4px}
    .svc-title{font-size:28px}
    .svc-body{font-size:15px}
    .svc-arr{width:40px;height:40px;font-size:15px}

    .why{padding:72px 0;margin:48px 16px;border-radius:28px}
    .why .container{padding:0 24px}
    .why h2{font-size:33px}
    .why-side{font-size:16px}

    .process-section{padding:64px 0}
    .process-grid{grid-template-columns:1fr;gap:36px;padding-top:36px}
    .pstep-t{font-size:26px}

    .cases-section{padding:64px 0}
    .case-grid{grid-template-columns:1fr;gap:16px}
    .case-card{padding:28px;min-height:0}
    .case-card-metric{font-size:36px}

    .pull{padding:88px 0}
    .pull p{font-size:31px}

    .statement{padding:64px 0}
    .statement-body{font-size:22px}
    .statement-body p{margin-bottom:20px}
    .audience-who{font-size:20px}

    .cta-strip{padding:64px 0}
    .cta-strip h2{font-size:33px}
    .cta-sub{font-size:17px}

    footer{padding:56px 0 28px}
    .footer-grid{grid-template-columns:1fr;gap:36px;margin-bottom:48px}
    footer h3{font-size:40px}
    .footer-bot{flex-direction:column;gap:10px}
    .footer-mark{margin-top:32px}
    .footer-mark img{width:72px;height:72px}

    .page-head{padding:64px 0 44px}
    .page-head h1{font-size:46px}
    .page-head .lede{font-size:18px}
    .page-eyebrow{margin-bottom:24px}

    .svc-detail{padding:56px 0}
    .svc-detail-title{font-size:36px}
    .svc-detail-body{font-size:16px}
    .svc-detail-list{grid-template-columns:1fr}

    .case-full{padding:40px 0}
    .case-full-title{font-size:30px}
    .case-full-metric{max-width:none}
    .case-full-actions{flex-wrap:wrap}

    .letter{padding:64px 0}
    .letter h2{font-size:29px}
    .letter p{font-size:18px}
    .letter .sig{font-size:24px}

    .team-section{padding:64px 0}
    .team-grid{grid-template-columns:1fr;gap:24px}
    .portrait{aspect-ratio:3/2}

    .mission-box{padding:64px 0;border-radius:28px;margin:0 16px}
    .mission-box .container{padding:0 24px}
    .mission-statement{font-size:32px}
    .beliefs{padding:64px 0}
    .beliefs-grid{gap:32px;padding-top:36px}
    .belief p{font-size:23px}
    .working-toward{padding:64px 0}
    .wt-statement{font-size:30px}

    .contact-section{padding:56px 0}
    .form-2col{grid-template-columns:1fr;gap:0}
    .sent{padding:32px;font-size:20px}
    .back-to-canvas{bottom:14px;left:14px}
  }

/* ── Native form pills (radio/checkbox styled as buttons; no JS) ── */
.pill input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pill{user-select:none}
.pill:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill:focus-within{border-color:var(--ink-2)}
/* anchor cards keep the same look as the old clickable divs */
a.svc-card,a.case-card{text-decoration:none;color:inherit}