/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --bg-0: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #fafafa;
  --bg-4: #f4f4f5;

  --text-0: #18181b;
  --text-1: #3f3f46;
  --text-2: #71717a;
  --text-3: #a1a1aa;

  --accent: #ea580c;
  --accent-hover: #f97316;
  --accent-soft: rgba(234, 88, 12, 0.1);
  --accent-glow: rgba(249, 115, 22, 0.22);
  --border: rgba(24, 24, 27, 0.08);
  --border-hover: rgba(24, 24, 27, 0.14);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Editorial navbar density (Stripe / Linear / Vercel tier).
     108px nav + 100px logo gives the brand mark a dominant anchor (~93%),
     readable 1rem center nav, and 42px controls aligned on one baseline.
     The right cluster sits TIGHT (gap = s2) so utility actions read as
     a unified control group, not scattered links. */
  --nav-h: 120px;
  --brand-logo-nav-h: 108px;
  --brand-logo-footer-h: 66px;
  --space-below-nav: 56px;
  --nav-control-h: 48px;
  --nav-link-fs: 1.12rem;
  --nav-link-gap: 6px;
  --nav-utility-fs: 1rem;
  --nav-cluster-gap: var(--s3);
  --nav-popover-w: 320px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:28px; --s8:32px;
  --s9:36px; --s10:40px; --s11:44px; --s12:48px;
  --s14:56px; --s16:64px; --s18:72px; --s20:80px; --s24:96px;

  /* Enterprise content container. One spine across the whole platform:
     nav, hero, every section, and the footer all resolve to the same
     max-width so content uses the full screen on 1440–1920px displays
     instead of floating in a narrow centered column. */
  --container-max: 1480px;
  --container-wide: 1600px;

  --sec-py: clamp(60px, 5.5vw, 88px);
  --sec-px: clamp(20px, 4vw, 72px);
  --sec-gap: var(--s12);
  --stack-sm: var(--s4);
  --stack-md: var(--s8);
  --stack-lg: var(--s12);

  color-scheme: light;
}

/* Consistent vertical rhythm between major blocks */
.section,
.clients-section,
.stats-section,
.marquee-section,
.rescue-section,
.illus-section,
.code-takeover-section,
.cta-section{
  scroll-margin-top:calc(var(--nav-h) + var(--s4));
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
  font-family:'DM Sans',sans-serif;
  background:#ffffff;
  color:var(--text-0);
  overflow-x:hidden;
  line-height:1.5;
  margin:0;padding:0;
}
html[dir="ltr"] body{direction:ltr;text-align:left}
html[dir="rtl"] body{direction:rtl;text-align:right}

/* Marketing routes that render the React chrome (SiteHeader is position:fixed)
   need top padding to clear the nav. Bare-marketing routes (/, /work/*)
   handle this themselves via their own static HTML / case-study.css rules. */
body.marketing-shell-page{
  padding-top:var(--nav-h);
}
html[dir="ltr"] .section,
html[dir="ltr"] .sec-header,
html[dir="ltr"] .sec-title,
html[dir="ltr"] .sec-desc,
html[dir="ltr"] .svc-card,
html[dir="ltr"] .illus-text{text-align:left}
html[dir="rtl"] .section,
html[dir="rtl"] .sec-header,
html[dir="rtl"] .sec-title,
html[dir="rtl"] .sec-desc,
html[dir="rtl"] .svc-card,
html[dir="rtl"] .illus-text{text-align:right}
img{display:block;max-width:100%}
img.brand-logo-img{
  max-width:none!important;
  max-height:none!important;
}
a{text-decoration:none;color:inherit}
button{border:none;cursor:pointer;font:inherit;background:none}

/* ═══════════════════════════════════════════
   NOISE OVERLAY
═══════════════════════════════════════════ */
body::after{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity:.025;pointer-events:none;z-index:9999;
}

/* ═══════════════════════════════════════════
   CONTAINER
═══════════════════════════════════════════ */
.wrap{
  width:100%;max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--sec-px);
}
/* Navbar wrap matches the page .wrap exactly so the logo's left edge
   aligns with the hero headline's left edge (and every section's
   content edge). One container width across the whole site = visual
   spine, not a header floating in its own padding system. */
.nav .wrap{
  padding-inline:var(--sec-px);
  max-width:var(--container-max);
}

/* ═══════════════════════════════════════════
   NAVIGATION — Stripe / Linear / Vercel tier
   Layout: [logo] | [primary nav]   [utility cluster] | [CTA]
   Density tokens live at :root (--nav-h, --nav-link-fs, etc.)
   SINGLE SOURCE OF TRUTH — no other CSS file should redefine .nav.
═══════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;
  height:var(--nav-h);
  z-index:1000;
  isolation:isolate;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:var(--border);
  box-shadow:0 1px 0 rgba(24,24,27,.04);
}

/* True 3-zone grid: 1fr | auto | 1fr.
   Equal-width left/right columns + auto center column = the center nav
   sits at the visual midline of the viewport regardless of how wide
   the logo or right cluster grow. Each child claims its zone via
   justify-self so the markup order stays semantic (logo → nav → utility). */
.nav-inner{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px,2.5vw,32px);
}

.nav-logo{
  display:flex;align-items:center;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.1rem;font-weight:700;letter-spacing:-.02em;
}
.nav-logo--brand{
  flex:0 0 auto;
  width:auto;
  max-width:min(260px,30vw);
  padding:0;
  display:flex;
  align-items:center;
  justify-self:start;
  cursor:pointer;
  text-decoration:none;
}
.brand-logo-img{
  display:block;
  width:auto!important;
  height:var(--brand-logo-nav-h)!important;
  min-height:var(--brand-logo-nav-h);
  max-width:min(300px,32vw)!important;
  object-fit:contain;
  object-position:left center;
  pointer-events:none;
}
.brand-logo-img--footer{
  width:auto!important;
  height:var(--brand-logo-footer-h)!important;
  min-height:var(--brand-logo-footer-h);
  max-width:min(440px,100%)!important;
}
.footer-brand-logo{
  display:block;line-height:0;
  width:fit-content;max-width:100%;
}
.nav-logo-mark{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#fb923c);
  display:grid;place-items:center;flex-shrink:0;
  font-size:.8rem;font-weight:800;color:#fff;
}

/* Primary nav — 4 items, true viewport-centered via grid auto column. */
.nav-links{
  display:flex;align-items:center;justify-content:center;
  gap:var(--nav-link-gap);
  list-style:none;flex-wrap:nowrap;min-width:0;
  margin:0;padding:0;
  justify-self:center;
}
.nav-links > li{display:flex;align-items:center;flex-shrink:0;position:relative}
.nav-links > li > a,
.nav-links > li > .nav-popover-trigger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:var(--nav-control-h);min-height:var(--nav-control-h);
  padding:0 16px;border-radius:10px;
  font-size:var(--nav-link-fs);font-weight:500;letter-spacing:-.01em;
  line-height:1;white-space:nowrap;
  color:var(--text-1);background:transparent;border:none;cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.nav-links > li > a:hover,
.nav-links > li > .nav-popover-trigger:hover,
.nav-links > li > .nav-popover-trigger[aria-expanded="true"]{
  color:var(--text-0);background:var(--bg-3);
}
.nav-links > li > a:focus-visible,
.nav-links > li > .nav-popover-trigger:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.nav-link-active,
.nav-links > li > a.nav-link-active,
.nav-links > li > .nav-popover-trigger.nav-link-active{
  color:var(--text-0);
  font-weight:600;
}
/* Active-state underline — calm 2px accent line under the link text. */
.nav-links > li{position:relative}
.nav-links > li > a.nav-link-active::after,
.nav-links > li > .nav-popover-trigger.nav-link-active::after{
  content:'';
  position:absolute;
  left:14px;right:14px;bottom:4px;
  height:2px;background:var(--accent);
  border-radius:2px;
  pointer-events:none;
}

/* Right-side cluster: utility links + lang switcher + dashboard + CTA.
   Tight gap (s2 = 8px) so Contact, EN/AR, Dashboard and the CTA read
   as one aligned utility group — not four floating elements. The CTA
   gets a tiny extra margin-inline-start so it visually crowns the
   group without breaking the cluster. */
.nav-right{
  display:flex;align-items:center;gap:var(--nav-cluster-gap);
  justify-self:end;
}
.nav-right .btn-cta.nav-cta-desktop{
  margin-inline-start:var(--s1);
}

/* Utility link — small ghost, intentionally less weight than the
   primary nav so it reads as "tool" rather than "destination". */
.nav-utility-link{
  display:inline-flex;align-items:center;gap:6px;
  height:var(--nav-control-h);
  padding:0 12px;border-radius:8px;
  font-size:var(--nav-utility-fs);font-weight:500;letter-spacing:-.005em;
  color:var(--text-2);
  transition:color .18s ease,background .18s ease;
}
.nav-utility-link:hover{color:var(--text-0);background:var(--bg-3)}
.nav-utility-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-utility-link--icon{
  width:var(--nav-control-h);height:var(--nav-control-h);
  padding:0;justify-content:center;
  position:relative;
}
.nav-utility-link--icon svg{
  width:18px;height:18px;
  stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Visually-hidden label for screen readers (sr-only pattern) */
.nav-utility-link--icon span{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Minimal text-only EN / AR — visually integrated, low-weight.
   Sits inside a subtle pill so it reads as a unified utility control,
   not three loose buttons. */
/* Language switcher removed site-wide — hidden on any legacy static page
   that may still contain the markup. */
.nav-lang-switch{display:none!important;}
.nav-lang-switch--legacy-unused{
  align-items:center;gap:4px;
  padding:0 10px;height:var(--nav-control-h);
  border-radius:8px;
  font-size:.84rem;font-weight:600;letter-spacing:.08em;
}
.nav-lang-btn{
  padding:4px 4px;border-radius:4px;
  color:var(--text-3);background:transparent;
  text-transform:uppercase;cursor:pointer;
  transition:color .18s ease;
  font:inherit;letter-spacing:inherit;
}
.nav-lang-btn:hover{color:var(--text-1)}
.nav-lang-btn[aria-pressed="true"]{color:var(--text-0)}
.nav-lang-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.nav-lang-sep{
  color:var(--text-3);opacity:.4;font-weight:400;
  user-select:none;font-size:.85em;
}

/* Legacy .lang-toggle / .lang-btn — kept for any unstyled fallbacks */
.lang-toggle{
  display:none;
}

/* Primary CTA — still primary, proportioned to the navbar control height. */
.btn-cta{
  display:inline-flex;align-items:center;gap:8px;
  min-height:var(--nav-control-h);
  padding:0 22px;border-radius:10px;
  font-size:1rem;font-weight:500;letter-spacing:-.005em;
  color:#fff;background:var(--accent);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 14px var(--accent-glow);
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;overflow:hidden;
}
.btn-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.08),transparent);
  pointer-events:none;
}
.btn-cta:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px var(--accent-glow);
}
.btn-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.btn-cta:hover svg{transform:translateX(3px)}

/* ─── Company popover (desktop) ────────────────
   Linear / Vercel-style: trigger button + panel anchored beneath it.
   Hidden by default. Opens on hover (with grace zone) and on click,
   controlled by /public/site/scripts/deep-nav.js. */
.nav-popover{position:relative}
.nav-popover-caret{
  width:10px;height:10px;
  opacity:.55;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-popover-trigger[aria-expanded="true"] .nav-popover-caret{
  transform:rotate(-180deg);opacity:1;
}

/* Panel = positioning + animation envelope (NO background, NO border).
   - top:100% touches the trigger (no dead-zone gap).
   - padding-top:10px is the visual breathing room AND keeps the hit
     area continuous, so cursor travel from trigger → panel never leaves
     the popover subtree once it's open.
   - All visible chrome (background, border, shadow) lives on the inner
     .nav-popover-list so the panel's bounding box is purely structural. */
.nav-popover-panel{
  position:absolute;top:100%;left:0;
  width:var(--nav-popover-w);
  padding-top:10px;
  pointer-events:none;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease;
  z-index:1100;
}
.nav-popover[data-popover-open="true"] .nav-popover-panel{
  opacity:1;transform:translateY(0);
  pointer-events:auto;
}
/* Company popover: anchor to the trigger's right edge so the panel
   never extends left over Work / Products / Journal. */
.nav-popover[data-popover-root="company"] .nav-popover-panel{
  left:auto;
  right:0;
}
/* Plain nav links stay above any open popover panel in a sibling item. */
.nav-links > li > a{
  position:relative;
  z-index:2;
}
.nav-links > li.nav-popover > .nav-popover-trigger{
  position:relative;
  z-index:2;
}
.nav-links > li.nav-popover[data-popover-open="true"]{
  z-index:3;
}

/* Inner card — clean editorial menu, NOT a heavy popover card.
   Subtle border, restrained shadow, integrated typography. */
.nav-popover-list{
  list-style:none;margin:0;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:
    0 1px 0 rgba(24,24,27,.04),
    0 14px 36px -16px rgba(24,24,27,.16),
    0 4px 12px -8px rgba(24,24,27,.06);
  padding:6px;
  display:flex;flex-direction:column;gap:1px;
}
.nav-popover-list > li{display:block}
.nav-popover-link{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:9px 11px;border-radius:8px;
  color:var(--text-1);
  transition:background .15s ease,color .15s ease;
  position:relative;
}
.nav-popover-link:hover,
.nav-popover-link:focus-visible{
  background:var(--bg-3);color:var(--text-0);outline:none;
}
.nav-popover-link:focus-visible{
  box-shadow:inset 0 0 0 2px var(--accent);
}
.nav-popover-link.nav-link-active{
  background:var(--bg-3);color:var(--text-0);
}
.nav-popover-link-title{
  font-size:.9rem;font-weight:600;letter-spacing:-.012em;
  line-height:1.25;
}
.nav-popover-link-desc{
  font-size:.78rem;font-weight:400;color:var(--text-2);
  line-height:1.4;
  letter-spacing:-.005em;
}
.nav-popover-link:hover .nav-popover-link-desc,
.nav-popover-link:focus-visible .nav-popover-link-desc{
  color:var(--text-1);
}

/* Footer "All services →" row — separates the picker items from the
   overview link with a hairline divider so users always have a path
   to the full landing page even after we narrow the menu down. */
.nav-popover-footer-row{
  margin-top:6px;padding-top:6px;
  border-top:1px solid var(--border);
}
.nav-popover-footer-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 11px;border-radius:8px;
  font-size:.82rem;font-weight:600;letter-spacing:-.005em;
  color:var(--text-1);
  transition:background .15s ease,color .15s ease,gap .2s ease;
}
.nav-popover-footer-link svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  opacity:.7;transition:opacity .2s ease,transform .2s ease;
}
.nav-popover-footer-link:hover,
.nav-popover-footer-link:focus-visible{
  background:var(--bg-3);color:var(--text-0);gap:10px;outline:none;
}
.nav-popover-footer-link:hover svg,
.nav-popover-footer-link:focus-visible svg{
  opacity:1;transform:translateX(2px);
}

/* Mobile: subtle "All services" link appears inside the Services group
   in the drawer so the mobile experience mirrors the desktop popover. */
.mobile-link-overview{
  font-weight:600;
  color:var(--text-1) !important;
  padding-top:10px;
  border-top:1px solid var(--border);
  margin-top:4px;
}

/* ─── Services mega popover (desktop) ──────────────────────────────
   Stripe / Linear-style 4-column dropdown. The popover panel widens
   to a fixed mega width and is anchored under the Services trigger
   with `right`-overflow safety: if the panel would exceed the viewport,
   `transform-origin` and `right:0` (set on the .nav-popover--mega root)
   keep it inside the wrap.
   The hover/click state is owned by the same controller used by the
   single-column Company popover — markup uses .nav-popover-panel +
   .nav-popover-panel--mega as a modifier so the open/close transition
   stays unified.
*/
.nav-popover--mega .nav-popover-panel--mega{
  width:min(1080px, calc(100vw - 64px));
  max-width:1080px;
}
@media(min-width:1100px){
  /* Anchor under the Services trigger but allow the panel to spill
     across more of the wrap, so all 4 columns get equal real estate. */
  .nav-popover--mega .nav-popover-panel--mega{
    left:-24px;
  }
}
.nav-popover-mega{
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:
    0 1px 0 rgba(24,24,27,.04),
    0 24px 64px -24px rgba(24,24,27,.18),
    0 8px 24px -16px rgba(24,24,27,.08);
  padding:22px 22px 0;
  display:flex;flex-direction:column;
}
.nav-popover-mega-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px 28px;
  padding-bottom:18px;
}
.nav-popover-mega-col{
  display:flex;flex-direction:column;gap:8px;
  min-width:0;
}
.nav-popover-mega-col-head{
  display:flex;align-items:baseline;gap:10px;
  padding:0 10px 8px;
  border-bottom:1px solid var(--border);
}
.nav-popover-mega-col-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.7rem;font-weight:600;
  letter-spacing:.14em;
  color:var(--accent);
  text-transform:uppercase;
}
.nav-popover-mega-col-label{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.78rem;font-weight:600;
  color:var(--text-1);
  letter-spacing:-.005em;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.nav-popover-mega-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:1px;
}
.nav-popover-mega-link{
  display:grid;gap:3px;
  padding:9px 10px;border-radius:8px;
  color:var(--text-1);
  transition:background .15s ease,color .15s ease;
}
.nav-popover-mega-link:hover,
.nav-popover-mega-link:focus-visible{
  background:var(--bg-3);color:var(--text-0);outline:none;
}
.nav-popover-mega-link:focus-visible{
  box-shadow:inset 0 0 0 2px var(--accent);
}
.nav-popover-mega-link.nav-link-active{
  background:var(--bg-3);color:var(--text-0);
}
.nav-popover-mega-link-title{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.92rem;font-weight:600;letter-spacing:-.012em;
  line-height:1.25;
}
.nav-popover-mega-link-desc{
  font-size:.78rem;font-weight:400;color:var(--text-2);
  line-height:1.45;letter-spacing:-.005em;
}
.nav-popover-mega-link:hover .nav-popover-mega-link-desc,
.nav-popover-mega-link:focus-visible .nav-popover-mega-link-desc{
  color:var(--text-1);
}
.nav-popover-mega-badge{
  display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:99px;
  font-size:.62rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(249,115,22,.10);
  border:1px solid rgba(249,115,22,.22);
}
.nav-popover-mega-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:14px 6px 14px 10px;
  border-top:1px solid var(--border);
  margin:0 -8px;
}
.nav-popover-mega-footer-meta{
  font-size:.74rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);
}

/* Mobile drawer — categorized services tree. Mirrors the mega popover
   so users get the same mental model on every breakpoint. */
.mobile-menu-group--services .mobile-menu-svc-cat{
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.mobile-menu-group--services .mobile-menu-svc-cat:first-of-type{
  margin-top:8px;border-top:0;padding-top:0;
}
.mobile-menu-svc-cat-label{
  display:flex;align-items:center;gap:8px;
  margin-bottom:6px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);
}
.mobile-menu-svc-cat-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;
  border-radius:99px;
  background:rgba(249,115,22,.10);
  color:var(--accent);
  font-size:.68rem;font-weight:700;letter-spacing:.04em;
}
.mobile-link-svc{
  font-size:1rem !important;
  padding:6px 0 !important;
}

/* ─── Hamburger / mobile menu ───────────────── */
.nav-hamburger{
  display:none;flex-direction:column;
  justify-content:center;align-items:center;
  gap:5px;padding:8px;cursor:pointer;
  width:40px;height:40px;flex-shrink:0;
}
.nav-hamburger span{
  display:block;width:22px;height:1.5px;
  background:var(--text-1);border-radius:2px;
  transition:all .3s ease;
}
.mobile-menu{
  display:none;position:fixed;inset:0;top:var(--nav-h);
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:99;padding:var(--s8) var(--sec-px);
  flex-direction:column;gap:var(--s8);
  overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu-group{
  display:flex;flex-direction:column;gap:0;
}
.mobile-menu-label{
  font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
  padding:0 0 var(--s3);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--s2);
}
.mobile-menu a.mobile-link{
  font-size:1.05rem;font-weight:500;color:var(--text-1);
  padding:var(--s4) 0;
  display:block;
  transition:color .2s ease;
  border-bottom:none;
}
.mobile-menu a.mobile-link:hover{color:var(--text-0)}
.mobile-menu a.mobile-link.mobile-link-active{color:var(--accent);font-weight:600}
.mobile-menu-cta{
  margin-top:auto;display:flex;flex-direction:column;gap:12px;
  padding-top:var(--s4);
}

@media(max-width:1180px){
  .nav-links > li > a,
  .nav-links > li > .nav-popover-trigger{padding:0 12px}
  .nav-utility-link{padding:0 8px}
  :root{--nav-cluster-gap: var(--s3)}
}
@media(max-width:1040px){
  .nav-utility-link[data-nav-utility="contact"]{display:none}
}

@media(max-width:900px){
  :root{
    --nav-h:88px;
    --brand-logo-nav-h:76px;
    --brand-logo-footer-h:58px;
    --space-below-nav:32px;
  }
  .nav-logo--brand{
    max-width:min(220px,52vw);
    padding-inline-end:8px;
  }
  .brand-logo-img{
    max-width:min(220px,52vw)!important;
  }
  .nav{
    background:rgba(255,255,255,.95)!important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border)!important;
  }
  .nav-links,
  .nav-utility-link,
  .nav-lang-switch,
  .lang-toggle{display:none!important}
  .nav-cta-desktop{display:none!important}
  .nav-hamburger{display:flex!important}
  .nav-inner{
    display:flex!important;
    justify-content:space-between;
    gap:0;
  }
  .nav-right{gap:var(--s2);margin-left:auto}
  .wrap{padding-inline:clamp(16px,4vw,40px)}
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero{
  min-height:auto;
  padding-top:calc(var(--nav-h) + clamp(16px,2.4vw,32px));
  padding-bottom:clamp(72px,9vw,120px);
  padding-left:var(--sec-px);
  padding-right:var(--sec-px);
  max-width:var(--container-max);margin-inline:auto;
  display:flex;flex-direction:column;justify-content:flex-start;
  position:relative;z-index:2;
  background:transparent;
  isolation:isolate;
}
/* Branded peach arc behind the home hero — same asymmetric curve used on
   the service pages, full-bleed and sitting behind the headline + the
   architecture workspace. */
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:100vw;
  height:100%;
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 420' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fdeee4'/%3E%3Cstop offset='1' stop-color='%23fef5ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0,0 L1440,0 L1440,250 C1180,372 720,430 380,392 C220,374 96,322 0,356 Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;
  pointer-events:none;
}

/* Grid background */
/* Space canvas — full fixed viewport */
#space-canvas,
#grid-canvas{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100vw !important;
  height:100vh !important;
  z-index:0 !important;
  pointer-events:none;
  display:block;
  background:#ffffff !important;
  border-radius:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}
/* hero-grid hidden — canvas replaces it */
.hero-grid{ display:none; }
.hero-glow{ display:none; }

/* Static home root must stack above #space-canvas (fixed z-index:0) */
#deep-static-root{
  position:relative;
  z-index:1;
  isolation:isolate;
}

/* Ensure all content sits above canvas. The nav is intentionally
   excluded — it owns its own fixed stacking context at a much higher
   z-index so the Company popover can render above hero text. */
.hero,
.marquee-section,
.section,
.clients-section,
.stats-section,
.cta-section,
.footer,
.rescue-section,
.illus-section,
.code-takeover-section{
  position:relative;
  z-index:1;
}

/* React (CMS) marketing pages render their content inside <main id="main">.
   Without this it sits *behind* the fixed white #space-canvas (z-index:0) and
   the whole page (Our Team, About/SECURD, Services, etc.) appears blank.
   Mirrors #deep-static-root for the static home. */
#main{
  position:relative;
  z-index:1;
}

.hero-content{position:relative;z-index:2}

html[dir="ltr"] .hero{
  align-items:flex-start;
  text-align:left;
}
html[dir="rtl"] .hero{
  align-items:flex-end;
  text-align:right;
}
html[dir="ltr"] .nav-inner{direction:ltr}
html[dir="rtl"] .nav-inner{direction:rtl}

.hero-badge{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:6px 14px;border-radius:100px;
  background:var(--bg-2);border:1px solid var(--border-hover);
  font-size:.75rem;font-weight:500;letter-spacing:.04em;
  color:var(--text-1);margin-bottom:var(--s8);
  opacity:1;
  animation:fadeUp .6s cubic-bezier(.23,1,.32,1) .05s both;
}
.hero-badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:#34d399;box-shadow:0 0 8px #34d39988;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.hero-eyebrow{
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.8rem;font-weight:500;
  letter-spacing:.14em;
  color:var(--accent);
  margin:0 0 var(--s6);
  opacity:1;
  animation:fadeUp .6s cubic-bezier(.23,1,.32,1) .05s both;
}

.hero-headline{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.9rem,7vw,6.2rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.04em;
  margin-bottom:var(--s8);
  max-width:17ch;
  opacity:1;
  animation:fadeUp .7s cubic-bezier(.23,1,.32,1) .1s both;
}
.hero-headline .hl{
  background:linear-gradient(135deg,var(--text-0) 30%,var(--accent) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-sub{
  font-size:clamp(1.08rem,1.5vw,1.32rem);
  line-height:1.6;
  color:var(--text-1);
  max-width:54ch;
  margin-bottom:var(--s6);
  font-weight:300;
  opacity:1;
  animation:fadeUp .6s cubic-bezier(.23,1,.32,1) .2s both;
}

.hero-kicker{
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.78rem;font-weight:500;
  letter-spacing:.1em;
  color:var(--text-3);
  margin:0 0 var(--s9);
  opacity:1;
  animation:fadeUp .6s cubic-bezier(.23,1,.32,1) .25s both;
}

.hero-actions{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  opacity:1;
  animation:fadeUp .6s cubic-bezier(.23,1,.32,1) .3s both;
}

/* ─── Hero architecture ecosystem ──────────────────────────────────
   A premium, ultra-minimal software-architecture visualization living
   on the RIGHT side of the hero. Infra modules (API, services, cloud,
   databases, pipelines) wired with hairline orthogonal links; slow
   orange data-flow pulses travel the paths. Monochrome + light gray
   (#e5e7eb range); brand orange only as a restrained accent.
   Built/animated by /site/scripts/hero-architecture.js.
*/
.hero-architecture{
  position:absolute;
  top:calc(var(--nav-h) + 4%);
  right:-9%;
  bottom:auto;
  width:min(38vw, 580px);
  height:min(66%, 500px);
  z-index:0;
  pointer-events:none;
  overflow:visible;
  contain:layout paint;
  opacity:1;
  /* Soft-fade the left edge so the ecosystem reads as a confident diagram
     pushed to the right, dissolving well clear of the headline text. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}
.hero-architecture-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

/* Infrastructure grid — faintest possible backdrop */
.ha-grid{
  fill:none;
  stroke:rgba(15,23,42,.035);
  stroke-width:1;
}

/* Connection links — hairline gray, soft highlight when active */
.ha-link{
  fill:none;
  stroke:#e5e7eb;
  stroke-width:1.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke 1.2s cubic-bezier(.4,0,.2,1);
}
.ha-link--active{
  stroke:rgba(234,88,12,.42);
}

/* Module box — white fill, light-gray outline */
.ha-node-box{
  fill:#ffffff;
  stroke:rgba(15,23,42,.10);
  stroke-width:1.1;
  transition:stroke 1s cubic-bezier(.4,0,.2,1);
}
.ha-node--active .ha-node-box{
  stroke:rgba(234,88,12,.5);
}
/* Type glyph inside each module — outlined, monochrome */
.ha-glyph{
  fill:none;
  stroke:rgba(15,23,42,.22);
  stroke-width:1.3;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke 1s cubic-bezier(.4,0,.2,1);
}
.ha-node--active .ha-glyph{
  stroke:rgba(234,88,12,.78);
}
/* Tiny status accent dot in the corner of each module */
.ha-node-acc{
  fill:rgba(15,23,42,.14);
  transition:fill 1s cubic-bezier(.4,0,.2,1);
}
.ha-node--active .ha-node-acc{
  fill:rgba(234,88,12,.95);
}

/* Module labels — small mono captions that make the field read as a real
   architecture diagram (not abstract shapes). Constant screen-size. */
.ha-label{
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:9px;
  letter-spacing:.02em;
  fill:rgba(15,23,42,.40);
  text-anchor:middle;
  dominant-baseline:hanging;
  transition:fill 1s cubic-bezier(.4,0,.2,1);
}
.ha-label--active{
  fill:rgba(234,88,12,.92);
}

/* Platform-cluster boundary — a faint dashed "production cluster" the
   services live inside. Public edge sits above; data tier below. */
.ha-boundary{
  fill:none;
  stroke:rgba(15,23,42,.09);
  stroke-width:1;
  stroke-dasharray:3 5;
}
.ha-boundary-label{
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:8.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  fill:rgba(15,23,42,.30);
}

/* Data-flow pulses — short lightning streaks traveling along the links.
   Drawn as straight line segments with butt (non-rounded) caps. */
.ha-pulse{
  fill:none;
  stroke:rgba(234,88,12,1);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ha-pulse-glow{
  fill:none;
  stroke:rgba(234,88,12,.22);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (prefers-reduced-motion: reduce){
  .ha-pulse,
  .ha-pulse-glow{display:none}
}

/* Tablet: keep the ecosystem on the right but a touch smaller. */
@media (max-width: 1024px){
  .hero-architecture{
    width:min(50vw, 520px);
    opacity:.8;
  }
}

@media (max-width: 720px){
  .hero{padding-bottom:clamp(96px,28vw,160px)}
  /* On phones the ecosystem fades fully behind the hero, very faint. */
  .hero-architecture{
    width:100%;
    right:0;
    height:64%;
    opacity:.22;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
    mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
  }
  /* Labels + cluster caption would just be noise behind the headline. */
  .ha-label,
  .ha-boundary-label{display:none}
}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:var(--r-sm);
  font-size:.82rem;font-weight:400;
  color:var(--text-1);
  border:1px solid var(--border-hover);
  transition:all .2s ease;
}
.btn-ghost:hover{color:var(--text-0);background:var(--bg-2);border-color:var(--border-hover)}

@keyframes fadeUp{
  from{transform:translateY(16px)}
  to{transform:translateY(0)}
}

/* ═══════════════════════════════════════════
   MARQUEE — TECH STACK
═══════════════════════════════════════════ */
.marquee-section{
  padding:var(--s12) 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-1);
  overflow:hidden;
  position:relative;
}
.marquee-label{
  text-align:center;
  font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--stack-md);
}
/* Marquee tracks are constrained to the same container as the headline
   and every other section, so the tech pills stop at the same vertical
   spine as the hero text instead of bleeding to the viewport edge.
   The section borders / background still span full width for rhythm. */
.marquee-wrap{
  display:flex;flex-direction:column;gap:10px;
  width:100%;max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--sec-px);
  mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%);
}
.marquee-track{overflow:hidden}
.marquee-inner{
  display:flex;gap:10px;width:max-content;
  animation:scrollLeft 32s linear infinite;
}
.marquee-track:nth-child(2) .marquee-inner{
  animation:scrollRight 28s linear infinite;
}
.marquee-wrap:hover .marquee-inner{animation-play-state:paused}
@keyframes scrollLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scrollRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ═══════════════════════════════════════════
   SECTION COMMONS
═══════════════════════════════════════════ */
.section{padding:var(--sec-py) 0}
.sec-label{
  display:inline-block;
  font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s3);
}
.sec-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.4rem,4.6vw,4.2rem);
  font-weight:800;line-height:1.04;
  letter-spacing:-.032em;margin-bottom:var(--s5);
  max-width:20ch;
}
.sec-title em{
  font-style:italic;font-weight:200;
  color:var(--text-1);
}
.sec-desc{
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.65;color:var(--text-1);
  max-width:58ch;font-weight:300;
}
.sec-header{margin-bottom:var(--sec-gap)}

/* ═══════════════════════════════════════════
   SERVICES — BENTO GRID
═══════════════════════════════════════════ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:var(--border);
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);
}
.svc-card{
  background:var(--bg-1);
  padding:clamp(28px,2.6vw,48px);
  position:relative;overflow:hidden;
  transition:background .3s ease;
}
.svc-card::before{
  content:'';position:absolute;
  top:-60px;left:-60px;
  width:160px;height:160px;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.svc-card:hover{background:var(--bg-2)}
.svc-card:hover::before{opacity:1}

.svc-card--a{grid-column:span 7}
.svc-card--b{grid-column:span 5}
.svc-card--c{grid-column:span 4}
.svc-card--d{grid-column:span 4}
.svc-card--e{grid-column:span 4}
.svc-card--f{grid-column:span 12}

.svc-icon{
  width:48px;height:48px;
  border-radius:var(--r-sm);
  background:var(--bg-3);
  border:1px solid var(--border-hover);
  display:grid;place-items:center;
  margin-bottom:var(--s7);
  transition:background .3s ease,border-color .3s ease;
}
.svc-card:hover .svc-icon{
  background:var(--bg-4);border-color:rgba(234,88,12,.3);
}
.svc-icon svg{
  width:20px;height:20px;
  stroke:var(--text-2);fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .3s ease;
}
.svc-card:hover .svc-icon svg{stroke:var(--accent)}
.svc-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.18rem,1.7vw,1.45rem);
  font-weight:700;letter-spacing:-.02em;
  margin-bottom:var(--s4);
}
.svc-body{
  font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.65;
  color:var(--text-1);font-weight:300;max-width:46ch;
}
.svc-card--a .svc-body{max-width:none}
.svc-card--f{
  display:flex;align-items:center;
  justify-content:space-between;gap:var(--s8);
  flex-wrap:wrap;
}
.svc-card--f .svc-body{max-width:60ch}
.svc-card--f .svc-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 20px;border-radius:var(--r-sm);
  font-size:.82rem;font-weight:500;
  color:var(--text-0);border:1px solid var(--border-hover);
  transition:all .2s ease;white-space:nowrap;flex-shrink:0;
}
.svc-card--f .svc-cta:hover{background:var(--bg-4);border-color:var(--border-hover)}
.svc-card--f .svc-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.svc-card--f .svc-cta:hover svg{transform:translateX(3px)}

/* ═══════════════════════════════════════════
   PORTFOLIO
═══════════════════════════════════════════ */
/* ── Homepage proof-of-capability section ────────────────────────────
   Compact "Selected Work" block that replaced the full portfolio grid.
   The homepage introduces proof; /work.html holds the full portfolio.
   Tighter vertical rhythm than .section so the homepage stays fast. */
.home-proof{
  padding-block:clamp(2.75rem,5vw,4rem);
}
.home-proof-head{
  max-width:60ch;margin-bottom:clamp(2rem,3.5vw,2.75rem);
}
.home-proof-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  font-weight:800;letter-spacing:-.035em;line-height:1.06;
  color:var(--text-0);margin:var(--s3) 0 var(--s4);
  max-width:20ch;
}
.home-proof-lead{
  font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6;
  color:var(--text-1);font-weight:300;margin:0;max-width:56ch;
}
.home-proof-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.1rem,2vw,1.6rem);
}
.home-proof-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg-1);
  transition:border-color .32s cubic-bezier(.22,.61,.36,1),transform .32s cubic-bezier(.22,.61,.36,1),box-shadow .32s cubic-bezier(.22,.61,.36,1);
}
.home-proof-card:hover{
  transform:translateY(-3px);
  border-color:rgba(24,24,27,.16);
  box-shadow:0 18px 40px -24px rgba(15,23,42,.26);
}
.home-proof-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.home-proof-frame{
  aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);
  border-bottom:1px solid var(--border);
  padding:clamp(12px,1.6vw,18px);
  display:flex;align-items:center;justify-content:center;
}
.home-proof-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  border-radius:7px;box-shadow:0 10px 26px -16px rgba(15,23,42,.24);
}
.home-proof-frame--metric{
  flex-direction:column;gap:var(--s2);text-align:center;
}
.home-proof-metric-value{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:800;
  letter-spacing:-.035em;line-height:1;color:var(--text-0);
}
.home-proof-metric-label{
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);
}
.home-proof-meta{
  padding:var(--s5) var(--s5) var(--s6);
}
.home-proof-name{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.15rem;font-weight:700;letter-spacing:-.02em;
  color:var(--text-0);margin:0 0 var(--s2);
}
.home-proof-line{
  font-size:.88rem;line-height:1.5;color:var(--text-1);
  font-weight:300;margin:0;
}
.home-proof-cta{
  margin-top:clamp(2rem,3.5vw,2.75rem);
  display:flex;justify-content:center;
}
.home-proof-cta-link{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:100px;
  border:1px solid var(--border);background:var(--bg-1);
  font-size:.92rem;font-weight:500;letter-spacing:.01em;
  color:var(--text-0);text-decoration:none;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.home-proof-cta-link:hover{
  border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);
}
.home-proof-cta-link svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease;
}
.home-proof-cta-link:hover svg{transform:translateX(4px)}
@media(max-width:880px){
  .home-proof-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .home-proof-grid{grid-template-columns:1fr}
  .home-proof-cta-link{width:100%;justify-content:center}
}

/* Standalone service detail pages generated under /services/*.html.
   These pages bypass the DB-backed Next route so navbar service links
   always open a real detail page in local/static environments. */
.service-detail-page{
  padding-top:calc(var(--nav-h) + var(--space-below-nav));
  background:var(--bg-0);
}
.service-detail-hero{
  /* The page already clears the fixed nav via padding-top (nav-h +
     space-below-nav), so the hero only needs a small, standard top gap.
     This keeps the same rhythm across every service page. */
  padding-block:clamp(12px,2vw,32px) clamp(48px,6vw,80px);
  /* Centered, symmetric hero across every service page */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.service-detail-back{
  display:inline-flex;align-items:center;
  margin-bottom:var(--s6);
  font-size:.82rem;font-weight:600;color:var(--text-2);
  transition:color .18s ease;
}
.service-detail-back:hover{color:var(--accent)}
.service-detail-hero .sec-title{
  max-width:16ch;
  margin-inline:auto;
  font-size:clamp(3rem,7.5vw,6.7rem);
  line-height:.95;
  text-wrap:balance;
}
.service-detail-hero .sec-desc{
  max-width:680px;
  margin-inline:auto;
  font-size:clamp(1rem,1.4vw,1.18rem);
  text-wrap:balance;
}
/* Force-center the hero title + lead on every service page. The global
   `html[dir] .sec-title{text-align:left/right}` rule has higher specificity
   than the centered hero, so we override it here with dir-scoped selectors. */
html[dir="ltr"] .service-detail-hero .sec-title,
html[dir="ltr"] .service-detail-hero .sec-desc,
html[dir="rtl"] .service-detail-hero .sec-title,
html[dir="rtl"] .service-detail-hero .sec-desc,
.service-detail-hero .sec-title,
.service-detail-hero .sec-desc{
  text-align:center;
}
.service-detail-tags{margin-top:var(--s6);justify-content:center}

/* ─── Service pages — soft peach curved band behind the hero ───
   A warm, full-bleed panel that arcs down into the white page, giving
   every service page (detail + index) the same branded curved header. */
.service-detail-hero,
.svc-arch-hero{
  position:relative;
  isolation:isolate;
}
.service-detail-hero::before,
.svc-arch-hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:calc(-1 * (var(--nav-h) + var(--space-below-nav)));
  transform:translateX(-50%);
  width:100vw;
  height:calc(100% + var(--nav-h) + var(--space-below-nav));
  background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 420' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fce3d2'/%3E%3Cstop offset='1' stop-color='%23fdeadd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0,0 L1440,0 L1440,250 C1180,372 720,430 380,392 C220,374 96,322 0,356 Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 100%;
  pointer-events:none;
}
/* The index hero peach band extends up behind the fixed nav — same as the
   service detail hero — so the nav sits on the hero color instead of a white
   strip. (Uses the shared .service-detail-hero/.svc-arch-hero ::before rule.) */
.service-detail-body{
  border-top:1px solid var(--border);
  padding-top:var(--s8);
}
.service-detail-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:var(--s6);align-items:start;
}
.service-detail-card{
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(26px,4vw,48px);
  box-shadow:0 1px 0 rgba(24,24,27,.04);
}
.service-detail-card h2{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.7rem,3vw,2.7rem);
  letter-spacing:-.035em;
  margin:var(--s4) 0 var(--s6);
}
.service-detail-card ul{
  display:grid;gap:var(--s4);
  margin:0;padding:0;list-style:none;
}
.service-detail-card li{
  position:relative;padding-left:24px;
  color:var(--text-1);line-height:1.7;
}
.service-detail-card li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.service-detail-card--accent{
  background:linear-gradient(180deg,#fff 0%,#fff7ed 100%);
}
.service-detail-outcomes{
  display:grid;gap:var(--s3);
  margin:var(--s5) 0 var(--s6);
}
.service-detail-outcome{
  padding:14px 16px;border-radius:12px;
  background:#fff;border:1px solid var(--border);
  color:var(--text-1);font-weight:600;
}
@media(max-width:900px){
  .service-detail-grid{grid-template-columns:1fr}
  .service-detail-hero .sec-title{max-width:100%}
}

/* ─── Service detail — meta strip (category + index + premium badge) */
.service-detail-meta{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;
  margin:0 0 var(--s5);
}
.service-detail-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.78rem;font-weight:700;
  letter-spacing:.16em;
  color:var(--accent);
  text-transform:uppercase;
}
.service-detail-divider{
  width:24px;height:1px;background:var(--border);
}
.service-detail-cat{
  display:inline-flex;align-items:baseline;gap:8px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-2);
}
.service-detail-cat-num{
  font-size:.68rem;font-weight:700;
  color:var(--accent);
  letter-spacing:.14em;
}
.service-detail-badge{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:99px;
  font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}
.service-detail-badge--premium{
  color:var(--accent);
  background:rgba(249,115,22,.10);
  border:1px solid rgba(249,115,22,.22);
}
.service-detail-card-note{
  margin-top:var(--s4);
  font-size:.84rem;line-height:1.6;color:var(--text-2);
}

/* ─── Service detail — "Within this discipline" sibling cards */
.service-related,
.service-disciplines{
  border-top:1px solid var(--border);
  padding-block:clamp(56px,7vw,96px);
}
.service-related-header,
.service-disciplines-header{
  max-width:760px;margin-bottom:var(--s7);
}
.service-related-header .sec-title,
.service-disciplines-header .sec-title{
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:-.025em;
  margin:var(--s3) 0 var(--s4);
}
.service-related-lead,
.service-disciplines-lead{
  font-size:1rem;line-height:1.6;color:var(--text-2);
  max-width:64ch;
}
.service-related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--s5);
}
.service-related-card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(22px,2.6vw,32px);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:#fff;
  color:var(--text-1);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.service-related-card:hover{
  border-color:rgba(249,115,22,.4);
  transform:translateY(-2px);
  box-shadow:0 14px 32px -22px rgba(24,24,27,.18);
}
.service-related-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.service-related-card-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.84rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);
}
.service-related-card-cat{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);
}
.service-related-card-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.4rem;font-weight:600;letter-spacing:-.02em;
  line-height:1.2;color:var(--text-0);
  margin:0;
}
.service-related-card-desc{
  font-size:.94rem;line-height:1.55;color:var(--text-2);margin:0;
}
.service-related-card-cta{
  margin-top:auto;
  font-size:.84rem;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .2s ease;
}
.service-related-card:hover .service-related-card-cta{gap:9px}

/* ─── Service detail — "Related disciplines" cross-link */
.service-disciplines-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s5);
}
.service-discipline-card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg-1);
}
.service-discipline-head{
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:var(--s3);
  border-bottom:1px solid var(--border);
}
.service-discipline-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.84rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);
}
.service-discipline-label{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.05rem;font-weight:600;letter-spacing:-.012em;
  color:var(--text-0);margin:0;
}
.service-discipline-summary{
  font-size:.9rem;line-height:1.55;color:var(--text-2);margin:0;
}
.service-discipline-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.service-discipline-list a{
  font-size:.92rem;font-weight:500;
  color:var(--text-1);
  display:inline-flex;align-items:center;gap:6px;
  transition:color .18s ease,gap .2s ease;
}
.service-discipline-list a::before{
  content:"→";color:var(--accent);font-weight:700;
  transition:transform .2s ease;
}
.service-discipline-list a:hover{color:var(--accent);gap:9px}

/* ─── Service detail — closing CTA block ────────────────────────── */
.service-detail-cta{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-0),var(--bg-1));
  padding-block:clamp(56px,7vw,96px);
}
.service-detail-cta-inner{
  max-width:780px;margin-inline:auto;text-align:center;
}
.service-detail-cta-inner h2{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.9rem,3.4vw,2.9rem);
  letter-spacing:-.025em;line-height:1.1;
  color:var(--text-0);margin:0 0 var(--s4);
}
.service-detail-cta-inner p{
  font-size:1.05rem;line-height:1.65;color:var(--text-2);
  margin:0 0 var(--s6);
}
.service-detail-cta-actions{
  display:inline-flex;flex-wrap:wrap;gap:14px;justify-content:center;
}

/* ═══════════════════════════════════════════
   SERVICES INDEX — categorized architecture
═══════════════════════════════════════════ */
.services-architecture-page{background:var(--bg-0)}

/* Hero */
.svc-arch-hero{
  /* Nav clearance + a tight top gap so the headline starts high on the page
     instead of leaving a large empty band under the nav. */
  padding-block:calc(var(--nav-h) + clamp(12px,1.6vw,22px)) clamp(40px,5vw,68px);
}
.svc-arch-hero-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.6rem,5.8vw,5rem);
  letter-spacing:-.035em;line-height:1;
  color:var(--text-0);
  margin:var(--s4) 0 var(--s6);
  max-width:18ch;
}
.svc-arch-hero-title .line-bold{font-weight:600}
.svc-arch-hero-title .line-italic{
  font-weight:300;font-style:italic;color:var(--text-1);
}
.svc-arch-hero-sub{
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  line-height:1.6;color:var(--text-2);
  max-width:64ch;
}
.svc-arch-hero-stats{
  display:flex;align-items:center;flex-wrap:wrap;gap:18px;
  margin-top:var(--s7);
  padding-top:var(--s5);
  border-top:1px solid var(--border);
}
.svc-arch-hero-stat{
  display:flex;flex-direction:column;gap:2px;
}
.svc-arch-hero-stat strong{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.5rem;font-weight:600;letter-spacing:-.015em;
  color:var(--text-0);
}
.svc-arch-hero-stat span{
  font-size:.78rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);
}
.svc-arch-hero-stat-div{
  width:1px;height:32px;background:var(--border);
}

/* Table of contents */
.svc-toc{
  padding-block:clamp(28px,4vw,40px);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.svc-toc-label-head{margin-bottom:var(--s4);display:block}
.svc-toc-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;list-style:none;padding:0;margin:0;
}
.svc-toc-list a{
  display:flex;align-items:baseline;gap:10px;
  padding:12px 14px;border-radius:10px;
  color:var(--text-1);
  transition:background .18s ease,color .18s ease;
}
.svc-toc-list a:hover{background:var(--bg-3);color:var(--text-0)}
.svc-toc-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;
  color:var(--accent);min-width:22px;
}
.svc-toc-label{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.95rem;font-weight:600;
  letter-spacing:-.012em;flex:1;
}
.svc-toc-count{
  font-size:.74rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-3);
}

/* Discipline rows */
.svc-arch-categories{padding-block:clamp(56px,8vw,112px)}
.svc-cat-row{
  padding-block:clamp(48px,6vw,80px);
  border-bottom:1px solid var(--border);
}
.svc-cat-row:first-child{padding-top:0}
.svc-cat-row:last-child{border-bottom:0}
.svc-cat-row-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--s7);
  align-items:start;
  margin-bottom:var(--s7);
}
.svc-cat-row-meta{
  display:flex;flex-direction:column;gap:8px;
}
.svc-cat-row-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.4rem,4.8vw,4rem);
  font-weight:600;line-height:.9;
  letter-spacing:-.025em;
  color:var(--accent);
}
.svc-cat-row-count{
  font-size:.74rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);
}
.svc-cat-row-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.8rem,3.6vw,2.7rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.1;
  color:var(--text-0);margin:0 0 var(--s4);
}
.svc-cat-row-summary{
  font-size:1.02rem;line-height:1.6;color:var(--text-2);
  max-width:64ch;margin:0;
}
@media(max-width:900px){
  .svc-cat-row-head{grid-template-columns:1fr;gap:var(--s4)}
  .svc-cat-row-num{font-size:2.4rem}
}

/* Service cards inside a discipline row */
.svc-cat-row-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:var(--s5);
}
.svc-cat-card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(22px,2.4vw,30px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  color:var(--text-1);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  position:relative;
}
.svc-cat-card:hover{
  border-color:rgba(249,115,22,.4);
  transform:translateY(-2px);
  box-shadow:0 16px 36px -24px rgba(24,24,27,.18);
}
.svc-cat-card--premium{
  background:linear-gradient(180deg,#fff 0%,#fff7ed 100%);
  border-color:rgba(249,115,22,.28);
}
.svc-cat-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.svc-cat-card-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;
  color:var(--accent);
}
.svc-cat-card-badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:99px;
  font-size:.62rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
  background:rgba(249,115,22,.10);
  border:1px solid rgba(249,115,22,.22);
}
.svc-cat-card-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.2rem,1.6vw,1.4rem);
  font-weight:600;letter-spacing:-.018em;line-height:1.2;
  color:var(--text-0);margin:0;
}
.svc-cat-card-desc{
  font-size:.95rem;line-height:1.55;color:var(--text-2);margin:0;
}
.svc-cat-card-tags{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.svc-cat-card-tags li{
  padding:3px 9px;border-radius:99px;
  background:var(--bg-3);
  font-size:.7rem;font-weight:500;
  letter-spacing:.02em;
  color:var(--text-2);
}
.svc-cat-card-cta{
  margin-top:auto;
  font-size:.85rem;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
  transition:gap .2s ease;
}
.svc-cat-card:hover .svc-cat-card-cta{gap:9px}

/* Principles wrapper inherits from existing .svc-principles styles —
   nothing extra needed here. */

/* Closing CTA block (reused) */
.services-architecture-page .svc-engineering-close{
  border-top:1px solid var(--border);
}

/* Mobile breakpoint adjustments for the mega popover */
@media(max-width:1100px){
  .nav-popover-mega-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px 22px;
  }
}
@media(max-width:760px){
  .nav-popover--mega .nav-popover-panel--mega{
    /* On narrow screens we rarely show desktop popovers anyway, but
       keep the panel inside the viewport just in case. */
    width:calc(100vw - 32px);
  }
  .nav-popover-mega-grid{
    grid-template-columns:1fr;
  }
  .nav-popover-mega-footer{
    flex-direction:column;align-items:flex-start;gap:8px;
  }
}

/* ─── Services mega popover · FOCUSED variant ──────────────────────
   The focused popover replaces the categorized 4-column layout with
   a curated 2x2 grid of flagship practices + a "Dedicated Engineering
   Teams" callout. The remaining services live behind a quieter
   "View all services" pathway in the panel footer.

   Design intent: editorial entry point, not a catalog.
   The mega panel + outer chrome (border, shadow, animation envelope)
   are inherited from .nav-popover-panel and .nav-popover-mega above.
*/
.nav-popover--focused .nav-popover-panel--mega{
  width:min(580px, calc(100vw - 64px));
}
.nav-popover-mega--focused{
  padding:26px 26px 4px;
}
.nav-featured-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:0 8px var(--s4);
  border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.nav-featured-eyebrow{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-1);
}
.nav-featured-meta{
  font-size:.7rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);
}
.nav-featured-grid{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:12px;
}
.nav-featured-card{
  position:relative;
  display:flex;flex-direction:row;align-items:flex-start;gap:14px;
  padding:13px 38px 13px 14px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-1);
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.nav-featured-card::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%) scaleY(0);
  width:3px;height:60%;
  border-radius:0 3px 3px 0;
  background:var(--accent);
  transition:transform .18s ease;
}
/* Chevron affordance on the right of each row — mirrors the reference
   list style while keeping our own service content. */
.nav-featured-card::after{
  content:"";
  position:absolute;
  right:16px;top:50%;
  width:8px;height:8px;
  border-right:2px solid var(--accent);
  border-top:2px solid var(--accent);
  transform:translateY(-50%) rotate(45deg);
  opacity:.4;
  transition:opacity .18s ease,right .18s ease;
}
.nav-featured-card:hover::after,
.nav-featured-card:focus-visible::after{
  opacity:1;right:13px;
}
.nav-featured-card:hover,
.nav-featured-card:focus-visible{
  background:rgba(249,115,22,.07);
  border-color:rgba(249,115,22,.18);
  color:var(--text-0);outline:none;
}
.nav-featured-card:hover::before,
.nav-featured-card:focus-visible::before{
  transform:translateY(-50%) scaleY(1);
}
.nav-featured-card:focus-visible{
  box-shadow:inset 0 0 0 2px var(--accent);
}
.nav-featured-card.nav-link-active{
  background:rgba(249,115,22,.07);color:var(--text-0);
}
.nav-featured-card-head{
  display:none;
}
.nav-featured-card-num{
  display:none;
}
.nav-featured-card-body{
  display:flex;flex-direction:column;gap:3px;flex:1;
}
.nav-featured-card-title{
  font-size:1.02rem;font-weight:600;letter-spacing:-.012em;
  line-height:1.25;
}
.nav-featured-card-desc{
  font-size:.82rem;font-weight:400;color:var(--text-2);
  line-height:1.5;letter-spacing:-.005em;
}
.nav-featured-card:hover .nav-featured-card-desc,
.nav-featured-card:focus-visible .nav-featured-card-desc{
  color:var(--text-1);
}
.nav-featured-card--flagship{
  background:transparent;
  border-color:transparent;
}
.nav-featured-card--flagship:hover{
  background:rgba(249,115,22,.07);
  border-color:rgba(249,115,22,.18);
}
.nav-featured-flag{
  position:absolute;top:8px;right:10px;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  opacity:.55;
  pointer-events:none;
  display:none;
}
.nav-featured-card--flagship .nav-featured-flag{display:none}

/* Embedded teams callout — visually distinct from the featured grid
   so users register Dedicated Teams as a *partnership* rather than
   "another service". Kept restrained: no hard color block, just a
   subtle inset card with a long-term engagement pill. */
.nav-featured-callout{
  display:grid;gap:6px;
  margin-top:10px;
  padding:14px 16px 16px;
  border-radius:10px;
  background:var(--bg-3);
  border:1px solid var(--border);
  color:var(--text-1);
  transition:background .15s ease,border-color .15s ease;
}
.nav-featured-callout:hover,
.nav-featured-callout:focus-visible{
  background:var(--bg-2);
  border-color:rgba(24,24,27,.16);
  outline:none;
}
.nav-featured-callout:focus-visible{
  box-shadow:inset 0 0 0 2px var(--accent);
}
.nav-featured-callout.nav-link-active{
  background:var(--bg-2);color:var(--text-0);
}
.nav-featured-callout-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;
}
.nav-featured-callout-eyebrow{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}
.nav-featured-callout-title{
  font-size:.96rem;font-weight:600;letter-spacing:-.012em;
  color:var(--text-0);
}
.nav-featured-callout-desc{
  font-size:.78rem;font-weight:400;color:var(--text-2);
  line-height:1.45;
}
.nav-featured-callout-cta{
  margin-top:6px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:600;color:var(--accent);
  transition:gap .2s ease;
}
.nav-featured-callout-cta svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.nav-featured-callout:hover .nav-featured-callout-cta{gap:9px}

/* Premium / engagement badge variants — used in the mega popover,
   featured grid, and mobile drawer. Variants share the same compact
   pill shape; the variant token is the color. */
.nav-popover-mega-badge--premium{
  color:var(--accent);
  background:rgba(249,115,22,.10);
  border-color:rgba(249,115,22,.22);
}
.nav-popover-mega-badge--engagement{
  color:#0f766e;
  background:rgba(20,184,166,.10);
  border-color:rgba(20,184,166,.28);
}

/* Focused popover — narrower screens collapse to a single column */
@media(max-width:760px){
  .nav-popover--focused .nav-popover-panel--mega{
    width:calc(100vw - 32px);
  }
  .nav-featured-grid{grid-template-columns:1fr}
  .nav-featured-head{
    flex-direction:column;align-items:flex-start;gap:4px;
  }
}

/* ─── Mobile drawer · focused service cards ──────────────────────── */
.mobile-menu-group--services .mobile-menu-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.mobile-menu-label-meta{
  font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
}
.mobile-svc-featured-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;margin:8px 0 12px;
}
.mobile-svc-featured-grid--single{
  grid-template-columns:1fr;margin-top:0;
}
.mobile-svc-featured{
  display:flex;flex-direction:column;gap:6px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text-1) !important;
  transition:background .18s ease,border-color .18s ease;
}
.mobile-svc-featured:hover{
  background:var(--bg-3);border-color:rgba(24,24,27,.16);
}
.mobile-svc-featured--flagship{
  background:linear-gradient(180deg,#fff 0%,#fff7ed 100%);
  border-color:rgba(249,115,22,.22);
}
.mobile-svc-featured-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  min-height:18px;
}
.mobile-svc-featured-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--accent);
}
.mobile-svc-featured-title{
  font-size:.95rem;font-weight:600;letter-spacing:-.012em;
  color:var(--text-0);
}
.mobile-svc-featured-desc{
  font-size:.78rem;font-weight:400;color:var(--text-2);
  line-height:1.45;
}
.mobile-svc-badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:99px;
  font-size:.6rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;
}
.mobile-svc-badge--premium{
  color:var(--accent);
  background:rgba(249,115,22,.10);
  border-color:rgba(249,115,22,.22);
}
.mobile-svc-badge--engagement{
  color:#0f766e;
  background:rgba(20,184,166,.10);
  border-color:rgba(20,184,166,.28);
}

/* ─── Services index · flagship Code Rescue block ─────────────────
   Sits between the hero pillars and the practice TOC. Not a hero
   replacement — a *strategic feature* that gives Code Rescue the
   visual weight of a flagship engagement without dominating the page. */
.svc-flagship{padding-block:clamp(28px,4vw,52px) clamp(20px,3vw,32px)}
.svc-flagship-card{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
  padding:clamp(28px,3.6vw,48px);
  border-radius:var(--r-xl);
  border:1px solid rgba(249,115,22,.28);
  background:linear-gradient(180deg,#fff 0%,#fff7ed 60%,#ffedd5 100%);
  box-shadow:
    0 1px 0 rgba(24,24,27,.04),
    0 22px 56px -28px rgba(249,115,22,.18);
  position:relative;
  overflow:hidden;
}
.svc-flagship-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#fbbf24,var(--accent));
  opacity:.85;
}
.svc-flagship-meta{
  grid-column:1 / -1;
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  margin-bottom:var(--s2);
}
.svc-flagship-eyebrow{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);
}
.svc-flagship-divider{width:24px;height:1px;background:rgba(249,115,22,.4)}
.svc-flagship-tag{
  font-size:.74rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-2);
}
.svc-flagship-body{display:flex;flex-direction:column;gap:var(--s4)}
.svc-flagship-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2rem,3.8vw,3.2rem);
  letter-spacing:-.025em;line-height:1.05;
  color:var(--text-0);margin:0;
}
.svc-flagship-lead{
  font-size:1.05rem;line-height:1.6;color:var(--text-1);
  max-width:60ch;margin:0;
}
.svc-flagship-bullets{
  list-style:none;padding:0;margin:0;
  display:grid;gap:8px;
}
.svc-flagship-bullets li{
  position:relative;padding-left:22px;
  font-size:.95rem;line-height:1.55;color:var(--text-1);
}
.svc-flagship-bullets li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}
.svc-flagship-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:var(--s2);
}
.svc-flagship-side{
  padding:clamp(20px,2.4vw,28px);
  border-radius:var(--r-lg);
  background:#fff;
  border:1px solid rgba(249,115,22,.18);
  display:flex;flex-direction:column;gap:var(--s4);
  align-self:start;
}
.svc-flagship-outcomes{
  list-style:none;padding:0;margin:0;
  display:grid;gap:8px;
}
.svc-flagship-outcomes li{
  padding:10px 14px;border-radius:10px;
  background:var(--bg-1);
  border:1px solid var(--border);
  font-size:.92rem;font-weight:600;color:var(--text-1);
}
.svc-flagship-note{
  font-size:.84rem;line-height:1.55;color:var(--text-2);margin:0;
}
@media(max-width:900px){
  .svc-flagship-card{grid-template-columns:1fr;gap:var(--s5)}
}

/* ─── Services index · hero pillars (Build / Scale / Recover / Optimize) */
.svc-arch-hero-pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:18px;
  margin-top:var(--s7);
  padding-top:var(--s5);
  border-top:1px solid var(--border);
}
.svc-arch-hero-pillar{
  display:flex;flex-direction:column;gap:4px;
  padding-right:18px;
  border-right:1px solid var(--border);
}
.svc-arch-hero-pillar:last-child{border-right:0}
.svc-arch-hero-pillar-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}
.svc-arch-hero-pillar strong{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.6rem;font-weight:600;letter-spacing:-.02em;
  color:var(--text-0);
}
.svc-arch-hero-pillar span:not(.svc-arch-hero-pillar-num){
  font-size:.84rem;line-height:1.45;color:var(--text-2);
}
@media(max-width:760px){
  .svc-arch-hero-pillar{
    border-right:0;border-bottom:1px solid var(--border);
    padding-right:0;padding-bottom:14px;
  }
  .svc-arch-hero-pillar:last-child{border-bottom:0;padding-bottom:0}
}

/* ─── Services index · card badges (premium / engagement / featured) */
.svc-cat-card-badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:99px;
  font-size:.62rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;
}
.svc-cat-card-badge--premium{
  color:var(--accent);
  background:rgba(249,115,22,.10);
  border-color:rgba(249,115,22,.22);
}
.svc-cat-card-badge--engagement{
  color:#0f766e;
  background:rgba(20,184,166,.10);
  border-color:rgba(20,184,166,.28);
}
.svc-cat-card-badge--featured{
  color:var(--text-1);
  background:var(--bg-3);
  border-color:var(--border);
}
.svc-cat-card--featured{
  border-color:rgba(24,24,27,.12);
}
.svc-cat-card--engagement{
  background:linear-gradient(180deg,#fff 0%,#f0fdfa 100%);
  border-color:rgba(20,184,166,.22);
}

/* ─── Service detail · badge variants for meta strip + sibling cards */
.service-detail-badge--engagement{
  color:#0f766e;
  background:rgba(20,184,166,.10);
  border:1px solid rgba(20,184,166,.28);
}
.service-detail-badge--featured{
  color:var(--text-1);
  background:var(--bg-3);
  border:1px solid var(--border);
}
.service-related-card-badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:99px;
  font-size:.62rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;
}
.service-related-card-badge--premium{
  color:var(--accent);
  background:rgba(249,115,22,.10);
  border-color:rgba(249,115,22,.22);
}
.service-related-card-badge--engagement{
  color:#0f766e;
  background:rgba(20,184,166,.10);
  border-color:rgba(20,184,166,.28);
}
.service-related-card--premium{
  border-color:rgba(249,115,22,.22);
  background:linear-gradient(180deg,#fff 0%,#fff7ed 100%);
}
.service-related-card--engagement{
  border-color:rgba(20,184,166,.22);
  background:linear-gradient(180deg,#fff 0%,#f0fdfa 100%);
}

/* Footer service link · subtle inline tag */
.footer-link-tag{
  display:inline-flex;align-items:center;
  margin-left:6px;padding:1px 7px;border-radius:99px;
  font-size:.58rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
  color:#0f766e;
  background:rgba(20,184,166,.12);
  border:1px solid rgba(20,184,166,.28);
  vertical-align:middle;
}
.footer-link-tag--premium{
  color:var(--accent);
  background:rgba(249,115,22,.12);
  border-color:rgba(249,115,22,.26);
}

/* ═══════════════════════════════════════════
   DEEP SECURD — product brand
═══════════════════════════════════════════ */
.securd-brand-section{
  padding:var(--sec-py) 0;
  border-top:1px solid var(--border);
  background:var(--bg-0);
}
.securd-brand-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--s10);
  align-items:center;
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  background:var(--bg-1);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.securd-brand-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
}
.securd-brand-glow{
  position:absolute;
  inset:18% 12%;
  background:radial-gradient(ellipse at center,rgba(249,115,22,.10) 0%,transparent 72%);
  filter:blur(20px);
  pointer-events:none;
  opacity:.6;
}
.securd-brand-logo{
  position:relative;
  z-index:1;
  width:min(100%,320px);
  height:auto;
  object-fit:contain;
}
.securd-brand-copy .sec-desc{max-width:42ch}
.securd-brand-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s4);
  margin-top:var(--s6);
}
.client-logo--featured img{
  filter:none!important;
  opacity:1!important;
  max-height:56px;
}
.client-logo--featured{
  background:linear-gradient(135deg,rgba(249,115,22,.08),var(--bg-1));
}
.client-logo--featured a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
@media(max-width:900px){
  .securd-brand-card{grid-template-columns:1fr;text-align:center}
  .securd-brand-actions{justify-content:center}
  .clients-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══════════════════════════════════════════
   CLIENTS MARQUEE
═══════════════════════════════════════════ */
.clients-section{
  padding:var(--sec-py) 0;
  border-top:1px solid var(--border);
}
.clients-logos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);
  margin-top:var(--stack-lg);
}
.client-logo{
  min-height:104px;
  padding:var(--s8) var(--s6);
  background:var(--bg-1);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.client-logo img{
  width:auto;
  height:auto;
  max-width:min(120px,82%);
  max-height:48px;
  object-fit:contain;
  object-position:center;
  filter:grayscale(1) brightness(1.12);
  opacity:.88;
  transition:filter .25s ease,opacity .25s ease,transform .25s ease;
}
.client-logo:hover{background:var(--bg-2)}
.client-logo:hover img{
  filter:grayscale(0.85) brightness(1);
  opacity:0.95;
  transform:none;
}

.clients-section--trust{
  padding:clamp(48px,6vw,72px) 0;
}
.clients-trust-desc{
  max-width:36rem;
  margin-top:var(--s4);
}
.clients-logos--trust{
  margin-top:var(--s8);
  grid-template-columns:repeat(5,minmax(0,1fr));
  background:transparent;
  border:none;
  gap:var(--s2);
}
.clients-logos--trust .client-logo{
  min-height:80px;
  padding:var(--s5) var(--s4);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-md);
}
.clients-logos--trust .client-logo img{
  max-height:42px;
  opacity:1;
  filter:none;
}
.clients-logos--trust .client-logo:hover{
  background:var(--bg-2);
  border-color:var(--border);
}
.clients-logos--trust .client-logo:hover img{
  opacity:1;
  transform:scale(1.07);
}

/* ── Clients logo marquee (home "Teams building in production") ──
   Same scrolling mechanic as the tech marquee: a single track of logos
   in full brand color that drifts horizontally and pauses on hover. */
.clients-marquee{
  margin-top:var(--s8);
}
.clients-marquee .marquee-track{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.clients-marquee .marquee-track::-webkit-scrollbar{display:none}
.clients-marquee .marquee-inner{
  gap:var(--s2);
  animation:none;
  width:max-content;
  padding-bottom:2px;
}
.clients-marquee .client-logo{
  flex-shrink:0;
  width:auto;
  min-width:172px;
  min-height:92px;
  padding:var(--s5) var(--s8);
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease;
}
.clients-marquee .client-logo:hover{
  background:var(--bg-2);
  border-color:var(--border-hover);
}
.clients-marquee .client-logo img{
  width:auto;height:auto;
  max-width:140px;max-height:48px;
  object-fit:contain;object-position:center;
  filter:none;opacity:1;
  transition:transform .25s ease;
}
.clients-marquee .client-logo:hover img{transform:scale(1.06)}
@media (max-width:600px){
  .clients-marquee .client-logo{min-width:140px;min-height:78px;padding:var(--s4) var(--s6)}
}

.credibility-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--border);
  margin-top:var(--s8);
}
.credibility-item{
  background:var(--bg-1);
  padding:var(--s6) var(--s5);
}
.credibility-label{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-0);
  margin-bottom:var(--s2);
}
.credibility-body{
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-1);
  font-weight:300;
  margin:0;
}

@media (max-width:899px){
  .clients-logos--trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .credibility-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:599px){
  .clients-logos--trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .credibility-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   STATS
═══════════════════════════════════════════ */
.stats-section{
  padding:var(--sec-py) 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--bg-1);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border);
}
.stat-item{
  background:var(--bg-1);
  padding:clamp(28px,3vw,48px) clamp(24px,3vw,40px);
  position:relative;overflow:hidden;
}
.stat-item::after{
  content:'';position:absolute;
  bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .3s ease;
}
.stat-item:hover::after{opacity:1}
.stat-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:800;letter-spacing:-.04em;
  line-height:1;margin-bottom:var(--s3);
  background:linear-gradient(135deg,var(--text-0),var(--text-1));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.stat-label{
  font-size:.8rem;font-weight:400;
  color:var(--text-2);letter-spacing:.02em;
}

/* ═══════════════════════════════════════════
   PROCESS
═══════════════════════════════════════════ */
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);margin-top:var(--sec-gap);
}
.process-step{
  background:var(--bg-1);
  padding:clamp(28px,3vw,40px);
  position:relative;
  transition:background .3s ease;
}
.process-step:hover{background:var(--bg-2)}
.step-num{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:3rem;font-weight:800;
  letter-spacing:-.04em;line-height:1;
  color:var(--text-3);margin-bottom:var(--s6);
  transition:color .3s ease;
}
.process-step:hover .step-num{color:var(--accent)}
.step-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.05rem;font-weight:700;letter-spacing:-.02em;
  margin-bottom:var(--s3);
}
.step-body{
  font-size:.82rem;line-height:1.6;color:var(--text-1);font-weight:300;
}

/* ═══════════════════════════════════════════
   SPACE ILLUSTRATION SECTION
═══════════════════════════════════════════ */
.illus-section{
  position:relative;
  overflow:hidden;
  padding:var(--sec-py) 0;
  border-top:1px solid var(--border);
  background:#ffffff;
}

.illus-section::before,
.illus-section::after{
  display:none;
}

/* Centered header */
.illus-head{
  max-width:760px;margin:0 auto clamp(40px,5vw,64px);
  text-align:center;
}
.illus-head .sec-label{margin-bottom:var(--s3)}
.illus-head .sec-title{margin-bottom:var(--s5)}
.illus-head .sec-desc{margin-inline:auto;max-width:58ch}

/* Capability cards — clean 2×2 (→ 4-up on wide) feature grid */
.capability-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(16px,1.6vw,24px);
}
.capability-card{
  position:relative;
  padding:clamp(28px,2.6vw,40px);
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fff 0%,var(--bg-3) 100%);
  transition:border-color .3s ease,transform .3s cubic-bezier(.23,1,.32,1),box-shadow .3s ease;
}
.capability-card:hover{
  border-color:rgba(234,88,12,.28);
  transform:translateY(-4px);
  box-shadow:0 22px 48px -28px rgba(234,88,12,.4);
}
.capability-icon{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;margin-bottom:var(--s5);
  background:var(--accent-soft);
  border:1px solid rgba(234,88,12,.2);
}
.capability-icon svg{
  width:22px;height:22px;
  fill:none;stroke:var(--accent);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.capability-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.18rem;font-weight:700;letter-spacing:-.02em;
  color:var(--text-0);margin-bottom:var(--s3);
}
.capability-body{
  font-size:.95rem;line-height:1.6;color:var(--text-1);font-weight:300;
}

.illus-cta{
  margin-top:clamp(40px,4vw,56px);
  display:flex;justify-content:center;
}

@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media(min-width:1100px){
  .capability-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:560px){
  .capability-grid{grid-template-columns:1fr}
  .illus-cta .btn-cta{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════
   RESCUE SECTION — fix existing code
═══════════════════════════════════════════ */
.rescue-section{
  padding:var(--sec-py) 0;
  border-top:1px solid var(--border);
  background:var(--bg-1);
  position:relative;overflow:hidden;
}
.rescue-section::before{
  content:'';position:absolute;
  right:-200px;top:-200px;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(251,191,36,.04) 0%,transparent 60%);
  pointer-events:none;
}
.rescue-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.rescue-cards{
  display:flex;flex-direction:column;gap:var(--s3);
}
.rescue-card{
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s6);
  display:flex;gap:var(--s5);
  align-items:flex-start;
  transition:border-color .3s ease,background .3s ease,transform .3s cubic-bezier(.23,1,.32,1);
  cursor:default;
}
.rescue-card:hover{
  background:var(--bg-3);
  border-color:var(--border-hover);
  transform:translateX(4px);
}
.rescue-card-icon{
  width:40px;height:40px;flex-shrink:0;
  border-radius:var(--r-sm);
  display:grid;place-items:center;
  border:1px solid;
}
.rescue-card-icon svg{
  width:18px;height:18px;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.icon--bug{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.2)}
.icon--bug svg{stroke:#f87171}
.icon--wrench{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.2)}
.icon--wrench svg{stroke:#fbbf24}
.icon--plus{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.2)}
.icon--plus svg{stroke:#34d399}
.icon--speed{background:rgba(234,88,12,.1);border-color:rgba(234,88,12,.25)}
.icon--speed svg{stroke:var(--accent)}
.rescue-card-content{}
.rescue-card-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.95rem;font-weight:700;letter-spacing:-.02em;
  margin-bottom:var(--s2);
}
.rescue-card-body{
  font-size:.82rem;line-height:1.6;
  color:var(--text-1);font-weight:300;
}

/* Code terminal illustration inside rescue */
.rescue-terminal{
  background:#ffffff;
  border:1px solid var(--border-hover);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 16px 48px rgba(24,24,27,.08);
  position:sticky;top:calc(var(--nav-h) + 24px);
}
.terminal-bar{
  background:var(--bg-2);
  border-bottom:1px solid var(--border);
  padding:12px 16px;
  display:flex;align-items:center;gap:var(--s4);
}
.terminal-dots{display:flex;gap:6px}
.terminal-dot{
  width:10px;height:10px;border-radius:50%;
}
.td-red{background:#f87171}
.td-yellow{background:#fbbf24}
.td-green{background:#34d399}
.terminal-title{
  font-size:.72rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);
  margin-left:auto;
}
.terminal-body{
  padding:var(--s6);
  font-family:'Courier New',Courier,monospace;
  font-size:.78rem;line-height:1.8;
}
.t-comment{color:var(--text-3)}
.t-error{color:#f87171}
.t-warn{color:#fbbf24}
.t-ok{color:#34d399}
.t-fn{color:#a78bfa}
.t-str{color:#6ee7b7}
.t-num{color:#fbbf24}
.t-punct{color:var(--text-2)}
.t-kw{color:var(--accent)}
.terminal-cursor{
  display:inline-block;
  width:8px;height:14px;
  background:var(--accent);
  vertical-align:middle;
  animation:blink .9s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.rescue-cta-row{
  display:flex;align-items:center;gap:var(--s3);
  flex-wrap:wrap;margin-top:var(--s8);
}

@media(max-width:900px){
  .rescue-inner{grid-template-columns:1fr}
  .rescue-terminal{position:static}
}

/* ═══════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════ */
.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s6);
  margin-top:var(--s16);
}
.testi-card{
  background:var(--bg-1);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);
  position:relative;overflow:hidden;
  transition:border-color .3s ease,transform .35s cubic-bezier(.23,1,.32,1);
}
.testi-card:hover{border-color:var(--border-hover);transform:translateY(-4px)}
.testi-quote{
  font-size:5rem;line-height:.8;
  font-family:'Bricolage Grotesque',sans-serif;
  font-style:italic;font-weight:800;
  color:var(--accent);opacity:.12;
  position:absolute;top:16px;left:24px;
  pointer-events:none;user-select:none;
}
.testi-text{
  font-size:.88rem;line-height:1.7;
  color:var(--text-1);font-weight:300;
  margin-bottom:var(--s6);margin-top:var(--s4);
  position:relative;
}
.testi-footer{display:flex;align-items:center;gap:var(--s4)}
.testi-avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#fb923c);
  display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.85rem;font-weight:800;color:#fff;flex-shrink:0;
}
.testi-name{font-size:.82rem;font-weight:600;margin-bottom:2px}
.testi-role{font-size:.73rem;color:var(--text-2)}
.testi-stars{
  margin-left:auto;display:flex;gap:2px;color:#fbbf24;font-size:.75rem;
}

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.cta-section{
  padding:var(--sec-py) 0;
}
.cta-box{
  border-radius:var(--r-xl);
  border:1px solid rgba(234,88,12,.22);
  background:
    radial-gradient(140% 120% at 50% -20%, rgba(234,88,12,.12) 0%, rgba(234,88,12,0) 55%),
    linear-gradient(180deg,#fffaf6 0%,var(--bg-1) 70%);
  padding:clamp(56px,7vw,96px) clamp(32px,5vw,72px);
  text-align:center;
  position:relative;overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(234,88,12,.28);
}
.cta-box::before{
  content:'';position:absolute;
  top:-120px;left:50%;transform:translateX(-50%);
  width:520px;height:520px;
  background:radial-gradient(circle,rgba(234,88,12,.16),transparent 65%);
  pointer-events:none;
}
/* Faint engineering grid texture, masked so it fades toward the center */
.cta-grid{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(234,88,12,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,88,12,.06) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 30%, transparent 30%, #000 100%);
  mask-image:radial-gradient(80% 80% at 50% 30%, transparent 30%, #000 100%);
}
/* Precision corner brackets — a subtle "engineering blueprint" cue */
.cta-corner{
  position:absolute;width:26px;height:26px;pointer-events:none;z-index:1;
  border:2px solid rgba(234,88,12,.4);
}
.cta-corner--tl{top:20px;left:20px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.cta-corner--br{bottom:20px;right:20px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.cta-content{position:relative;z-index:2}
.cta-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:100px;margin-bottom:var(--s7);
  background:rgba(234,88,12,.08);
  border:1px solid rgba(234,88,12,.2);
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.cta-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:ctaPulse 2.4s ease-out infinite;
}
@keyframes ctaPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.cta-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.5rem,5.5vw,4.5rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.05;
  margin-bottom:var(--s6);
}
.cta-sub{
  font-size:clamp(1rem,1.6vw,1.12rem);
  color:var(--text-1);font-weight:300;
  max-width:46ch;margin:0 auto var(--s9);line-height:1.65;
}
.cta-actions{
  display:flex;align-items:center;justify-content:center;
  gap:var(--s3);flex-wrap:wrap;
}
.cta-trust{
  display:flex;align-items:center;justify-content:center;
  gap:var(--s6);flex-wrap:wrap;
  margin-top:var(--s9);
  padding-top:var(--s7);
  border-top:1px solid var(--border);
}
.cta-trust-item{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:500;color:var(--text-2);letter-spacing:.01em;
}
.cta-trust-item svg{
  width:16px;height:16px;flex-shrink:0;
  fill:none;stroke:var(--accent);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:560px){
  .cta-trust{gap:var(--s3) var(--s5)}
  .cta-actions .btn-cta,.cta-actions .btn-ghost{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════
   FOOTER  (4-column symmetric grid)
═══════════════════════════════════════════ */
.footer{
  border-top:1px solid var(--border);
  padding:var(--s10) 0 var(--s5);
  background:var(--bg-1);
  position:relative;
  z-index:2;
}
.footer .wrap{max-width:var(--container-max)}
.footer-grid{
  display:grid;
  /* Desktop: brand column wider; the three content columns share an
     identical track so headings and link rows line up symmetrically. */
  grid-template-columns:1.6fr repeat(3, minmax(160px, 1fr));
  column-gap:var(--s12);
  row-gap:var(--s10);
  align-items:start;
  margin-bottom:var(--s8);
}
.footer-col{display:flex;flex-direction:column;min-width:0}
/* Brand block aligns its content to the same top baseline as the
   column headings so the whole row reads on one line. */
.footer-brand{gap:0}
.footer-brand-logo{display:block;line-height:0;margin:0 0 var(--s4);cursor:pointer;position:relative;z-index:1}
.footer-brand-logo img{pointer-events:none}
.footer-tagline{
  font-size:.83rem;line-height:1.65;
  color:var(--text-2);font-weight:300;max-width:30ch;
  margin:0 0 var(--s5);
}
.footer-socials{display:flex;gap:var(--s2);position:relative;z-index:2}
.social-btn{
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--bg-2);border:1px solid var(--border);
  display:grid;place-items:center;
  color:var(--text-2);
  transition:all .2s ease;
  cursor:pointer;text-decoration:none;position:relative;z-index:1;
}
.social-btn:hover{background:var(--bg-3);border-color:var(--border-hover);color:var(--text-0)}
.social-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* Column heading — shared baseline + height so every column header
   sits on the exact same horizontal line. */
.footer-col-title{
  font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);
  margin:0 0 var(--s5);
  line-height:1;
  height:1em;
  display:flex;align-items:center;
}

/* Plain link list (Services + Company) — even rhythm */
.footer-links{display:flex;flex-direction:column;gap:var(--s3);margin:0;padding:0;list-style:none}
.footer-links a{
  font-size:.84rem;line-height:1.5;
  color:var(--text-2);font-weight:300;
  transition:color .15s ease;
}
.footer-links a:hover{color:var(--text-0)}

/* Structured contact list — same vertical rhythm as the link columns */
.footer-contact{
  display:flex;flex-direction:column;gap:var(--s4);
  margin:0;padding:0;list-style:none;
}
.footer-contact li{display:flex;flex-direction:column;gap:3px}
.footer-meta-label{
  font-size:.66rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);
}
.footer-meta-value{
  font-size:.83rem;line-height:1.5;
  color:var(--text-1);font-weight:400;
  transition:color .15s ease;
}
a.footer-meta-value:hover{color:var(--accent)}

/* Bottom strip */
.footer-bottom{
  padding-top:var(--s4);
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;
}
.footer-copy{font-size:.74rem;color:var(--text-3);font-weight:300;margin:0}
.footer-legal{display:flex;gap:var(--s5)}
.footer-legal a{font-size:.74rem;color:var(--text-3);transition:color .15s ease}
.footer-legal a:hover{color:var(--text-1)}

/* Tablet — brand spans the full top row; the three content columns
   sit beneath it in a symmetric 3-up grid. */
@media(max-width:980px){
  .footer-grid{
    grid-template-columns:repeat(3, 1fr);
    column-gap:var(--s8);
    row-gap:var(--s10);
  }
  .footer-brand{grid-column:1 / -1;max-width:560px}
  .footer-tagline{max-width:48ch}
}

/* Small tablet — two symmetric columns */
@media(max-width:720px){
  .footer-grid{grid-template-columns:1fr 1fr;column-gap:var(--s7)}
}

/* Mobile — stacked single column */
@media(max-width:560px){
  .footer{padding:var(--s9) 0 var(--s5)}
  .footer-grid{grid-template-columns:1fr;gap:var(--s7);margin-bottom:var(--s7)}
  .footer-brand{grid-column:auto;max-width:none}
  .footer-bottom{padding-top:var(--s4);justify-content:flex-start;gap:var(--s3)}
}

/* ═══════════════════════════════════════════
   SYMMETRY + CODE AESTHETIC
═══════════════════════════════════════════ */
#services.section{border-top:1px solid rgba(255,255,255,.06)}
#services .sec-header{text-align:center}
#services .sec-title,#services .sec-desc{margin-inline:auto}
.sec-label::before{content:"// ";color:rgba(234,88,12,.5)}
@media (prefers-reduced-motion:no-preference){
  .hero-headline::after{content:"|";display:inline-block;margin-left:2px;color:var(--accent);animation:blink 1.1s step-end infinite;font-weight:300}
}
@keyframes blink{50%{opacity:0}}
.btn-primary,.btn-cta.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 14px var(--accent-glow)}
.btn-primary:hover,.btn-cta.btn-primary:hover{box-shadow:0 0 0 1px rgba(234,88,12,.3),0 0 24px rgba(234,88,12,.08),inset 0 1px 0 rgba(255,255,255,.14),0 4px 14px var(--accent-glow)}
.process-step .step-num{box-shadow:0 0 18px rgba(234,88,12,.25)}
@media (min-width:901px){
  .process-step{position:relative}
  .process-step:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-1px;width:1px;height:42%;
    transform:translateY(-50%);
    border-right:1px dashed rgba(234,88,12,.25);pointer-events:none;
  }
  .stat-item{position:relative}
  .stat-item:not(:last-child)::before{
    content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:1px;height:48px;background:rgba(255,255,255,.1);
  }
}
.stat-num{font-variant-numeric:tabular-nums}
.testi-card{border-left:2px solid rgba(234,88,12,.5);position:relative}
.testi-card::before{
  content:"\"";font-size:64px;color:rgba(234,88,12,.12);
  font-family:Georgia,serif;line-height:1;position:absolute;top:8px;left:16px;
  pointer-events:none;user-select:none;
}

/* ═══════════════════════════════════════════
   CODE TAKEOVER SECTION
═══════════════════════════════════════════ */
.code-takeover-section{
  padding:var(--sec-py) 0;border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,247,237,.65) 0%,#ffffff 55%);
}
.code-takeover-section .sec-header{text-align:center;margin-bottom:var(--s12)}
.code-takeover-section .sec-title,.code-takeover-section .sec-desc{margin-inline:auto}
.code-takeover-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3vw,40px);
  align-items:stretch;margin-bottom:var(--s10);
}
.code-takeover-terminal{
  background:#ffffff;border:1px solid var(--border);
  border-radius:12px;padding:0;overflow:hidden;
  box-shadow:0 8px 32px rgba(24,24,27,.06);
}
.code-takeover-terminal-bar{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--border);background:var(--bg-2);
}
.code-takeover-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.code-takeover-dot--r{background:#ff5f57}
.code-takeover-dot--y{background:#febc2e}
.code-takeover-dot--g{background:#28c840}
.code-takeover-terminal-label{
  font-family:'Courier New',Consolas,monospace;font-size:12px;
  color:var(--text-3);margin-left:auto;white-space:nowrap;
}
.code-audit-output{
  padding:24px 28px 28px;font-family:'Courier New',Consolas,monospace;
  font-size:12.5px;line-height:1.65;color:var(--text-1);
  min-height:280px;white-space:pre-wrap;word-break:break-word;
  background:#fafafa;
}
.code-audit-output .audit-warn{color:#f59e0b}
.code-audit-output .audit-crit{color:#ef4444}
.code-audit-output .audit-info{color:#ea580c}
.code-takeover-divider{
  position:relative;width:1px;align-self:stretch;
  background:rgba(234,88,12,.2);min-height:200px;
}
.code-takeover-divider-dot{
  position:absolute;left:50%;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px rgba(234,88,12,.8);
  animation:codeTravel 2.5s ease-in-out infinite;
}
@keyframes codeTravel{
  0%{top:0%;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:100%;opacity:0}
}
@media (prefers-reduced-motion:reduce){.code-takeover-divider{display:none}}
.code-takeover-steps{display:flex;flex-direction:column;gap:var(--s6);justify-content:center;list-style:none;margin:0;padding:0}
.code-takeover-step{display:flex;gap:var(--s4);align-items:flex-start}
.code-takeover-step-num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(234,88,12,.4);
  display:grid;place-items:center;
  font-family:'Bricolage Grotesque',sans-serif;font-size:.75rem;font-weight:700;color:var(--accent);
}
.code-takeover-step-title{font-size:.92rem;font-weight:600;color:var(--text-0);margin-bottom:4px}
.code-takeover-step-body{font-size:.82rem;line-height:1.55;color:var(--text-1);font-weight:300}
.code-takeover-cta-wrap{text-align:center;margin:var(--s10) 0 var(--s12)}
.code-diff-strip{margin-top:var(--s4)}
.code-diff-panels{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);
}
.code-diff-panel{
  background:#ffffff;border:1px solid var(--border);
  border-radius:8px;overflow:hidden;
}
.code-diff-panel-head{
  padding:10px 16px;font-family:'Courier New',Consolas,monospace;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.code-diff-panel-head--before{color:rgba(239,68,68,.8)}
.code-diff-panel-head--after{color:#ea580c}
.code-diff-pre{
  padding:20px 24px;font-family:'Courier New','Fira Code',Consolas,monospace;
  font-size:13px;line-height:1.7;margin:0;overflow-x:auto;
  background:#f4f4f5;color:var(--text-0);
}
.code-diff-pre .c-comment{color:var(--text-2);font-style:italic}
.code-diff-pre .c-kw{color:#c792ea}
.code-diff-pre .c-str{color:#c3e88d}
.code-diff-pre .c-var{color:#82aaff}
.code-diff-pre .c-type{color:#ffcb6b}
.code-diff-pre .c-fn{color:#82aaff}
.code-diff-line{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.code-diff-line.revealed{opacity:1;transform:translateY(0)}
.code-diff-panel--before .code-diff-line{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .code-diff-line{opacity:1!important;transform:none!important;transition:none!important}
  .code-takeover-divider-dot{animation:none}
}

/* ═══════════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════════ */
/* Visible by default; hidden only after deep-home.js adds .js-ready */
[data-reveal]{
  opacity:1;transform:none;
}
html.js-ready [data-reveal]:not(.visible){
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.23,1,.32,1),transform .7s cubic-bezier(.23,1,.32,1);
}
html.js-ready [data-reveal].visible{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.40s}

/* ═══════════════════════════════════════════
   ENGINEERING METRICS GRID
   Shared by the unified pre-footer close (.home-close).
   Full-grid divider method: container owns top+left, cells own
   right+bottom, so lines stay clean at any column count.
═══════════════════════════════════════════ */
.eng-metrics-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin:0;
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.eng-metric{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.75rem);
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.eng-metric::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  margin-bottom:.35rem;
}
.eng-metric-value{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2.1rem,4vw,3.1rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--text-0);
  font-variant-numeric:tabular-nums;
}
.eng-metric-label{
  margin:0;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
  line-height:1.4;
}
/* Tablet */
@media (max-width:900px){
  .eng-metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Mobile */
@media (max-width:560px){
  .eng-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eng-metric-value{font-size:clamp(1.8rem,9vw,2.4rem)}
}

/* ═══════════════════════════════════════════
   HOMEPAGE REFACTOR — premium engineering layout
   (trust band · service pillars · journal signal ·
   process link · unified metrics + CTA close)
═══════════════════════════════════════════ */

/* ── Client trust band (moved above Services) ── */
.home-trust{
  padding:clamp(2rem,3.5vw,3rem) 0;
  border-bottom:1px solid var(--border);
}
.home-trust-label{
  text-align:center;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.7rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);
  margin:0 0 var(--s6);
}
.home-trust-marquee{margin:0}

/* ── Service pillars (4-up) ── */
.services-grid--pillars{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.svc-card--pillar{
  grid-column:auto;
  display:flex;flex-direction:column;
  color:inherit;text-decoration:none;
}
.svc-card--pillar .svc-body{
  max-width:none;flex:1;
  margin-bottom:var(--s6);
}
.svc-card--pillar-flagship::after{
  content:"Specialist";
  position:absolute;top:clamp(28px,2.6vw,48px);right:clamp(28px,2.6vw,48px);
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);
  padding:3px 8px;border-radius:100px;
  border:1px solid rgba(234,88,12,.3);background:var(--accent-soft);
}
.svc-pillar-cta{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:auto;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.74rem;letter-spacing:.03em;
  color:var(--text-3);
  transition:color .25s ease;
}
.svc-pillar-cta svg{
  width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease;
}
.svc-card--pillar:hover .svc-pillar-cta{color:var(--accent)}
.svc-card--pillar:hover .svc-pillar-cta svg{transform:translateX(4px)}
.svc-pillars-foot{
  display:flex;justify-content:center;
  margin-top:clamp(1.75rem,3vw,2.5rem);
}
.svc-pillars-all{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:100px;
  border:1px solid var(--border);background:var(--bg-1);
  font-size:.92rem;font-weight:500;color:var(--text-0);
  text-decoration:none;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.svc-pillars-all:hover{
  border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px);
}
.svc-pillars-all svg{
  width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease;
}
.svc-pillars-all:hover svg{transform:translateX(4px)}

/* ── Journal signal (single featured article) ── */
.home-journal-signal{
  padding:clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid var(--border);
}
.home-journal-signal .wrap{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap;
}
.journal-signal-card{
  display:block;text-decoration:none;color:inherit;
}
.journal-signal-kicker{
  display:block;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.72rem;letter-spacing:.12em;
  color:var(--accent);margin-bottom:var(--s3);
}
.journal-signal-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:var(--text-0);margin:0 0 var(--s3);
  transition:color .25s ease;
}
.journal-signal-card:hover .journal-signal-title{color:var(--accent)}
.journal-signal-meta{
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.74rem;letter-spacing:.04em;color:var(--text-3);
}
.journal-signal-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.82rem;font-weight:500;letter-spacing:.03em;
  color:var(--text-0);text-decoration:none;white-space:nowrap;
  transition:color .25s ease;
}
.journal-signal-link svg{
  width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease;
}
.journal-signal-link:hover{color:var(--accent)}
.journal-signal-link:hover svg{transform:translateX(4px)}

/* ── Process link (compressed) ── */
.home-process-link{
  padding:clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid var(--border);
}
.home-process-link-inner{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap;
}
.home-process-link-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
  color:var(--text-0);margin:var(--s3) 0 0;max-width:24ch;
}
.home-process-link-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono','Fira Code',monospace;
  font-size:.82rem;font-weight:500;letter-spacing:.03em;
  color:var(--text-0);text-decoration:none;white-space:nowrap;
  transition:color .25s ease;
}
.home-process-link-cta svg{
  width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .22s ease;
}
.home-process-link-cta:hover{color:var(--accent)}
.home-process-link-cta:hover svg{transform:translateX(4px)}

/* ── Unified close: metrics + CTA (final section) ── */
.home-close{
  padding:clamp(3.5rem,7vw,6rem) 0;
  border-top:1px solid var(--border);
  background:#ffffff;
}
.home-close-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-close-cta{
  text-align:center;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.home-close-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(2rem,4.5vw,3.2rem);
  font-weight:800;letter-spacing:-.04em;line-height:1.04;
  color:var(--text-0);margin:0 0 var(--s4);
}
.home-close-sub{
  font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.6;
  color:var(--text-1);font-weight:300;
  margin:0 auto var(--s7);max-width:42ch;
}
.home-close-btn{font-size:.95rem;padding:14px 28px}

/* Homepage refactor — responsive */
@media(max-width:900px){
  .services-grid--pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-close-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .services-grid--pillars{grid-template-columns:1fr}
  .home-close-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-journal-signal .wrap,
  .home-process-link-inner{flex-direction:column;align-items:flex-start}
  .home-close-btn{width:100%;justify-content:center}
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:900px){
  .svc-card--a,.svc-card--b{grid-column:span 12}
  .svc-card--c,.svc-card--d,.svc-card--e{grid-column:span 12}
  .svc-card--f{grid-column:span 12}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  /* footer-grid handled by its own breakpoints above */
  .clients-logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rescue-inner{grid-template-columns:1fr}
  .rescue-terminal{position:static}
  .code-takeover-grid{grid-template-columns:1fr}
  .code-takeover-divider{display:none}
  .code-diff-panels{grid-template-columns:1fr}
}
@media(max-width:600px){
  .portfolio-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:1fr}
  /* footer-grid mobile layout handled by its own ≤600px rule above */
  .hero-headline{font-size:clamp(2.6rem,10vw,4rem)}
  .sec-title{font-size:clamp(1.8rem,7vw,2.8rem)}
  .cta-title{font-size:clamp(2rem,8vw,3rem)}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-actions .btn-cta,.hero-actions .btn-ghost{width:100%;justify-content:center}
  .process-grid{grid-template-columns:1fr}
  .rescue-cards .rescue-card{padding:var(--s5)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════
   CONTACT PAGE OVERLAY
═══════════════════════════════════════════ */
.contact-overlay{
  position:fixed;inset:0;
  z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:var(--s4);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.contact-overlay.open{
  opacity:1;pointer-events:all;
}

/* Backdrop blur */
.contact-backdrop{
  position:absolute;inset:0;
  background:rgba(4,4,8,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* Modal card */
.contact-modal{
  position:relative;z-index:1;
  width:100%;max-width:620px;
  max-height:90svh;
  overflow-y:auto;
  background:var(--bg-1);
  border:1px solid var(--border-hover);
  border-radius:var(--r-xl);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 32px 80px rgba(0,0,0,.7),
    0 0 80px rgba(234,88,12,.08);
  transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.23,1,.32,1);
}
.contact-overlay.open .contact-modal{
  transform:translateY(0) scale(1);
}

/* Modal header */
.contact-modal-head{
  padding:clamp(24px,4vw,40px) clamp(24px,4vw,40px) 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  position:sticky;top:0;
  background:var(--bg-1);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  z-index:2;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.contact-modal-head.scrolled{border-color:var(--border)}

.contact-modal-close{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:var(--bg-3);border:1px solid var(--border);
  display:grid;place-items:center;flex-shrink:0;
  color:var(--text-2);cursor:pointer;
  transition:all .2s ease;margin-top:4px;
}
.contact-modal-close:hover{background:var(--bg-4);color:var(--text-0)}
.contact-modal-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.contact-modal-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.6rem,3.5vw,2.2rem);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
  margin-bottom:var(--s2);
}
.contact-modal-sub{
  font-size:.85rem;color:var(--text-1);font-weight:300;line-height:1.5;
}

/* Modal body */
.contact-modal-body{
  padding:clamp(20px,3vw,32px) clamp(24px,4vw,40px) clamp(24px,4vw,40px);
}

/* Info pills row */
.contact-info-row{
  display:flex;gap:var(--s3);flex-wrap:wrap;
  margin-bottom:var(--s8);
}
.contact-info-pill{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:7px 14px;border-radius:100px;
  background:var(--bg-2);border:1px solid var(--border);
  font-size:.75rem;font-weight:400;color:var(--text-2);
}
.contact-info-pill svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Form */
.contact-form{display:flex;flex-direction:column;gap:var(--s5)}

/* The `.form-row`/`.form-group` display rules below are author-level and would
   otherwise override the UA `[hidden]{display:none}` rule, leaving toggled
   inquiry blocks visible. Force-hide any hidden block inside the form. */
.contact-form [hidden]{display:none!important}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:480px){.form-row{grid-template-columns:1fr}}

.form-group{display:flex;flex-direction:column;gap:var(--s2)}
.form-label{
  font-size:.75rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);
}
.form-label span{color:var(--accent);margin-left:2px}

.form-input,
.form-select,
.form-textarea{
  width:100%;
  padding:11px 14px;
  border-radius:var(--r-sm);
  background:var(--bg-2);
  border:1px solid var(--border);
  color:var(--text-0);
  font-family:'DM Sans',sans-serif;
  font-size:.88rem;font-weight:300;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  appearance:none;-webkit-appearance:none;
}
.form-input::placeholder,
.form-textarea::placeholder{color:var(--text-3);font-weight:300}

.form-input:hover,
.form-select:hover,
.form-textarea:hover{
  background:var(--bg-3);
  border-color:var(--border-hover);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus{
  border-color:rgba(234,88,12,.5);
  box-shadow:0 0 0 3px rgba(234,88,12,.1);
  background:var(--bg-2);
}
.form-input.error,
.form-textarea.error{
  border-color:rgba(248,113,113,.5);
  box-shadow:0 0 0 3px rgba(248,113,113,.1);
}
.form-error-msg{
  font-size:.72rem;color:#f87171;
  display:none;margin-top:-var(--s1);
}
.form-group.has-error .form-error-msg{display:block}

.form-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5f6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
  cursor:pointer;
}
.form-select option{background:var(--bg-2);color:var(--text-0)}

.form-textarea{
  resize:vertical;
  min-height:120px;
  max-height:260px;
  line-height:1.6;
}

/* Budget chips */
.budget-chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.budget-chip{
  padding:7px 16px;border-radius:100px;
  font-size:.78rem;font-weight:500;
  color:var(--text-2);
  border:1px solid var(--border);
  background:var(--bg-2);
  cursor:pointer;
  transition:all .2s ease;
  user-select:none;
}
.budget-chip:hover{background:var(--bg-3);border-color:var(--border-hover);color:var(--text-0)}
.budget-chip.selected{
  background:var(--accent-soft);
  border-color:rgba(234,88,12,.4);
  color:var(--text-0);
}

/* Form divider */
.form-divider{
  height:1px;background:var(--border);
  margin:var(--s2) 0;
}

/* Submit button */
.form-submit{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 24px;
  border-radius:var(--r-sm);
  font-family:'DM Sans',sans-serif;
  font-size:.9rem;font-weight:500;
  color:#fff;background:var(--accent);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 16px var(--accent-glow);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  position:relative;overflow:hidden;
}
.form-submit::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.08),transparent);
  pointer-events:none;
}
.form-submit:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 28px var(--accent-glow);
}
.form-submit:active:not(:disabled){transform:translateY(0)}
.form-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.form-submit svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form-submit .spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  animation:spin .7s linear infinite;
  display:none;
}
.form-submit.loading .spinner{display:block}
.form-submit.loading .btn-text,.form-submit.loading svg{display:none}

/* Success state */
.contact-success{
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:var(--s16) var(--s8);
  gap:var(--s6);
}
.contact-success.show{display:flex}
.contact-form.hide{display:none}

.success-icon{
  width:64px;height:64px;border-radius:50%;
  background:rgba(52,211,153,.12);
  border:1px solid rgba(52,211,153,.25);
  display:grid;place-items:center;
  animation:popIn .5s cubic-bezier(.23,1,.32,1) forwards;
}
@keyframes popIn{
  from{transform:scale(0);opacity:0}
  to{transform:scale(1);opacity:1}
}
.success-icon svg{width:28px;height:28px;stroke:#34d399;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.success-title{
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.6rem;font-weight:800;letter-spacing:-.02em;
}
.success-body{font-size:.9rem;color:var(--text-1);font-weight:300;max-width:36ch;line-height:1.6}
.success-back{
  padding:10px 24px;border-radius:var(--r-sm);
  background:var(--bg-3);border:1px solid var(--border-hover);
  font-size:.85rem;font-weight:500;color:var(--text-0);
  cursor:pointer;transition:all .2s ease;
}
.success-back:hover{background:var(--bg-4)}

.nav-dashboard-link,
.nav-links a[href="/login"]{
  color:var(--accent);
  font-weight:500;
}
.nav-dashboard-link:hover{color:var(--text-0)}

.svc-pulse-bg{display:none!important}
.svc-pulse-line{animation:none!important}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE HARDENING — cross-device pass (phones, tablets, desktops)
   Appended last so it complements the per-section breakpoints above.
   Mobile-first safety + fixes for elements that lacked responsive rules.
═══════════════════════════════════════════════════════════════════════ */

/* — Global safety: never allow sideways scrolling on any device — */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* overflow-x:clip (not hidden) so it can't become a scroll container and
   break the page's position:sticky elements; hidden stays as legacy fallback. */
html,body{ overflow-x:hidden; overflow-x:clip; max-width:100%; }
body{ overflow-wrap:break-word; }
img,svg,video,canvas{ max-width:100%; }
/* Grid/flex children that hold long content can blow out their track —
   allow them to shrink (scoped, so the grid-centered navbar is untouched). */
.services-grid > *,.portfolio-grid > *,.testi-grid > *,
.process-grid > *,.footer-grid > *,.capability-grid > *,.rescue-inner > *{ min-width:0; }
.proj-thumb-photo,.brand-logo-img,.client-logo img,.tech-pill img{ height:auto; }

@media (max-width:768px){
  /* Journal teaser header: stack title and link instead of space-between. */
  .home-journal-head{ flex-direction:column; align-items:flex-start; gap:var(--s4,16px); }
  .home-journal-link{ align-self:flex-start; }

  /* Tighter, balanced vertical rhythm on small screens. */
  .section{ padding-top:clamp(48px,11vw,76px); padding-bottom:clamp(48px,11vw,76px); }

  /* Marquees stay inside the viewport. */
  .marquee-section,.marquee-wrap,.clients-marquee{ max-width:100vw; overflow:hidden; }

  /* Full-width primary actions read better under the thumb. */
  .rescue-cta-row{ flex-direction:column; align-items:stretch; }
  .rescue-cta-row .btn-cta,.rescue-cta-row .btn-ghost{ width:100%; justify-content:center; }
}

/* — Small phones — */
@media (max-width:480px){
  :root{ --sec-px:18px; }
  .wrap{ padding-inline:18px; }
  .hero-sub{ font-size:1rem; line-height:1.6; }
  .sec-desc{ font-size:.95rem; }
  .testi-grid,.credibility-grid,.rescue-cards{ grid-template-columns:1fr; }
  .portfolio-filters{ gap:8px; }
  .filter-btn{ padding:6px 13px; font-size:.74rem; }
  /* Comfortable tap targets for nav + footer links. */
  .mobile-link,.footer-links a,.footer-meta-value{ min-height:40px; display:flex; align-items:center; }
  .nav-hamburger{ width:44px; height:44px; }
}

/* — Very small / older phones (≤360px): prevent cramped headings — */
@media (max-width:360px){
  .hero-headline{ font-size:clamp(2.2rem,11vw,2.8rem); }
  .sec-title{ font-size:clamp(1.6rem,8vw,2.2rem); }
  .svc-card{ padding:24px; }
}

/* — Coarse-pointer (touch) devices: disable hover-only reveals so content
     that depends on :hover is always visible/usable on touch screens. — */
@media (hover:none){
  .proj-overlay{ opacity:1; background:rgba(255,255,255,.4); }
  .proj-overlay-btn{ transform:none; }
  .svc-card::before{ opacity:0; }
}

/* — Landscape phones / short viewports: cap hero height so the fold isn't
     dominated by a tall hero. — */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding-top:calc(var(--nav-h) + 16px); padding-bottom:48px; }
}