/* =====================================================================
   RESPONSIVE — all breakpoints in one place
   ===================================================================== */

@media(max-width:1180px){
  .a-wrap{grid-template-columns:220px minmax(0,1fr)}
  .a-side.right{display:none}
  .a-side.left{justify-self:start}
}

@media(max-width:1024px){
  .grid-4,.why,.hiring,.case-meta{grid-template-columns:repeat(2,1fr)}
  .services,.svc-grid,.cases,.grid-3,.posts,.quotes,.deliver,.models,.values{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr 1fr}
  .legal-summary{grid-template-columns:repeat(2,1fr)}
  .careers-page .why{grid-template-columns:1fr 1fr}
  .careers-page .steps{grid-template-columns:1fr 1fr}
  .careers-page .steps::before{display:none}
  .founder{grid-template-columns:300px 1fr}
  .founder .info{padding:34px}
  .proc-layout,.faq-layout,.legal-layout{grid-template-columns:1fr}
  .proc-layout .sticky,.faq-layout .sticky,.legal-layout .sticky{position:static}
  .service-overview-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .service-overview-index{position:static}
  .service-overview-index nav{display:flex;flex-wrap:wrap;gap:6px}
  .service-overview-index a{padding:7px 11px;border:1px solid var(--border);border-radius:999px;font-size:13px}
  .service-overview-index a.on{border:1px solid var(--brand-2)}
  /* Process page (mirrors process.html) */
  .phases{grid-template-columns:1fr}
  .ptoc{position:static;grid-template-columns:repeat(5,1fr);gap:8px}
  .ptoc a{justify-content:center;font-size:0;gap:0;padding:10px}
  .ptoc a i{font-size:12px}
  .ptoc .cta-box{display:none}
  .week{grid-template-columns:repeat(2,1fr)}
  .models{grid-template-columns:1fr}
  /* Contact page (mirrors contact.html) */
  .wrap{grid-template-columns:1fr}
  .side{position:static}
  .faq-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
  /* FAQ page (mirrors faq.html) */
  .faq-wrap{grid-template-columns:1fr;gap:30px}
  .cats{position:sticky;top:var(--nav-h);z-index:5;grid-auto-flow:column;grid-template-columns:none;overflow-x:auto;gap:8px;padding:10px 0;background:var(--bg);scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cats button{white-space:nowrap;border-color:var(--border)}
  .cats button small,.cats .help{display:none}
  .toc nav{display:flex;flex-wrap:wrap;gap:6px}
  .toc a{border:1px solid var(--border);border-radius:999px;padding:7px 12px;font-size:12.5px}
  .toc a.on{border-image:none;border-color:var(--brand)}
}

@media(max-width:860px){
  :root{--sec-pad:76px;--nav-h:72px}
  .p-hero{padding-top:130px}
  .home-hero{padding-top:130px;min-height:auto}
  .hero-grid{grid-template-columns:1fr;gap:70px}
  .hero-visual{max-width:520px;margin:0 auto}
  .dash{transform:none}
  .pill{flex-wrap:nowrap;max-width:100%}
  .pill b{white-space:nowrap;flex:none}
  .a-hero{padding-top:120px}
  .admin-bar .nav{top:46px}

  /* Full-screen mobile menu.
     The header itself expands to fill the viewport when open; the links panel is
     positioned *absolutely* inside it. (A nested position:fixed panel breaks because
     .nav has transform/backdrop-filter, which makes it the containing block.) */
  .nav{transition:background .35s}
  .nav-in{position:static}
  .nav.menu-open{bottom:0;background:var(--bg);backdrop-filter:none;overflow:hidden}
  .nav.menu-open .nav-in{border-bottom:1px solid var(--border)}
  .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;height:calc(100dvh - var(--nav-h));z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;padding:24px 24px 40px;background:var(--bg);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
  .nav-links::-webkit-scrollbar{display:none}
  .admin-bar .nav-links{height:calc(100dvh - var(--nav-h) - 46px)}
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-links li{width:100%;max-width:420px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(.08s + var(--i,0) * .06s)}
  .nav-links.open li{opacity:1;transform:none}
  .nav-links a{display:block;text-align:center;font-family:var(--font-head);font-size:26px;font-weight:600;color:var(--text);padding:16px;border-radius:14px}
  .nav-links a:hover,.nav-links a[aria-current]{background:var(--surface-hover);color:var(--brand-2)}
  .nav-links>.menu-item-has-children>a{justify-content:center}
  .nav-links>.menu-item-has-children>a::after{width:8px;height:8px}
  .nav-links .sub-menu,.nav-links>.menu-item-has-children:hover>.sub-menu,.nav-links>.menu-item-has-children:focus-within>.sub-menu{position:static;min-width:0;width:100%;padding:0 0 8px;display:grid;gap:0;background:transparent;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none}
  .nav-links .sub-menu li{max-width:none;opacity:1;transform:none;transition:none}
  .nav-links .sub-menu a{font-family:var(--font-body);font-size:17px;font-weight:500;color:var(--muted);padding:10px 14px;border-radius:8px}
  .nav-links .sub-menu a:hover,.nav-links .sub-menu a[aria-current]{color:var(--brand-2);background:var(--surface-hover)}
  .nav-links .m-cta{display:block;margin-top:24px}
  .nav-links .m-cta a{background:var(--grad);color:var(--on-grad);font-size:17px;border-radius:999px}
  body.no-scroll{overflow:hidden}
  .nav-right .btn{display:none}
  .burger{display:flex}

  /* Layouts → single column */
  .presence,.globe,.mission,.model,.commit,.svc-feat,.contact-layout,.featured,.newsletter,.a-wrap,.founder,.cta{grid-template-columns:1fr}
  .prose .contact-card{grid-template-columns:1fr}
  .map{max-width:520px;margin:0 auto;width:100%}
  .strip{justify-content:center;text-align:center}
  .strip-wrap{padding-block:60px}
  .tsl-card{padding:40px 24px}
  .svc-feat.rev>div:first-child{order:0}
  .service-overview{padding-block:56px}
  .service-overview .prose{margin-left:0;max-width:none}
  .service-overview .prose h2{margin-top:38px;font-size:26px}
  .service-overview .prose h2:first-child{font-size:32px}
  .service-overview .prose p:first-of-type{font-size:17px}
  .a-side.left{position:static}
  .founder .ph{aspect-ratio:16/9;font-size:56px}
  .founder .info{padding:28px 24px}
  .cta{padding:50px 30px}
  .f-grid{grid-template-columns:1fr 1fr}
  .quick,.alt{grid-template-columns:1fr}
  .form{padding:28px 22px}
  .form .row{grid-template-columns:1fr}
  .range{grid-template-columns:1fr 1fr}
  .group .q summary{padding:18px}
  .group .q .a{padding:0 18px 20px}
  .phase{grid-template-columns:1fr}
  .rail small{display:none}
  .rail b{font-size:12px}
  .qual{grid-template-columns:1fr}
  .role{grid-template-columns:1fr}
  .ben{grid-template-columns:1fr}
  .careers-page .role .btn{justify-self:start}
  .hero-stats{gap:24px}
  .featured .post-body{padding:28px}
  .newsletter{padding:30px}
  .newsletter form{flex-direction:column}
  .prose{font-size:16.5px}
  .prose table{display:block;overflow-x:auto}
  .hero-img{aspect-ratio:16/9;border-radius:20px}
  .case-results{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav a:last-child{text-align:left}
  .hubcard .clock{position:static;display:block;margin-bottom:10px}
  .tl .band{font-size:10px;padding:0 8px}
}

@media(max-width:560px){
  .services,.svc-grid,.cases,.grid-2,.grid-3,.grid-4,.posts,.quotes,.why,.values,.deliver,.models,.hiring,.f-grid,.facts,.case-meta{grid-template-columns:1fr}
  .legal-summary{grid-template-columns:1fr}
  .careers-page .why,.careers-page .steps,.bl{grid-template-columns:1fr}
  .tz{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .tz b{font-size:18px}
  .hub .time,.hub .clock{display:none}
  .steps em{display:none}
  .week,.qgrid{grid-template-columns:1fr}
  .rail b{display:none}
  .side .hub .time{display:none}
  .author{flex-direction:column}
  .sec-head{margin-bottom:34px}
  .legal-menu{flex-direction:column;gap:6px}
  /* Hero pill: keep the badge inline, let the text wrap under it neatly. */
  .pill{flex-wrap:wrap;font-size:12.5px;line-height:1.4;padding:8px 14px 8px 8px}
  .pill b{font-size:11px}
}

/* At ≤600px WordPress switches the admin bar to position:absolute (it scrolls
   away with the page), so the fixed nav must sit flush at the top — otherwise a
   permanent 46px gap is left above it. */
@media screen and (max-width:600px){
  .admin-bar .nav{top:0}
  .admin-bar .nav-links{height:calc(100dvh - var(--nav-h))}
}