@font-face { font-family:'Lexend'; font-weight:300 800; font-style:normal; font-display:swap;
    src:url('../fonts/lexend.woff2') format('woff2'); }
  @font-face { font-family:'Source Sans 3'; font-weight:300 700; font-style:normal; font-display:swap;
    src:url('../fonts/source-sans-3.woff2') format('woff2'); }
  /* High-contrast editorial italic, used only on accent words. The tension
     between it and the geometric sans is the whole point. */
  @font-face { font-family:'Instrument Serif'; font-weight:400; font-style:italic; font-display:swap;
    src:url('../fonts/instrument-serif-italic.woff2') format('woff2'); }

  /* Bento Grids palette from ui-ux-pro-max, warmed slightly off the
     stock #F5F5F7 so it reads as daylight rather than screen grey. */
  :root {
    --ground: #F2F4F8;
    --ground-2: #E9EDF4;
    --card: #FFFFFF;
    --ink: #0C1220;
    --ink-2: #3D4759;
    --ink-3: #616C7D;
    --hair: #E2E7EF;
    --hair-2: #D2D9E4;

    --teal: #0D9488;
    /* Payoff-gradient stops. Aliased to the palette; tune only if the
       lightest stop misses 3:1 against the hero ground. */
    --grad-a: #0D9488;
    --grad-b: #2563EB;
    --grad-c: #7C3AED;
    --blue: #2563EB;
    --violet: #7C3AED;
    --coral: #F0616D;
    --amber: #E08A2C;

    --brand: #0F4C81;
    --brand-2: #1668B0;
    --on-brand: #FFFFFF;

    --sh-1: 0 1px 2px rgba(12,18,32,0.05);
    --sh-2: 0 2px 4px rgba(12,18,32,0.04), 0 8px 16px -6px rgba(12,18,32,0.08);
    --sh-3: 0 4px 8px rgba(12,18,32,0.04), 0 18px 40px -14px rgba(12,18,32,0.14);
    --sh-4: 0 8px 16px rgba(12,18,32,0.05), 0 34px 70px -22px rgba(12,18,32,0.20);

    --display: 'Lexend', ui-sans-serif, system-ui, sans-serif;
    --body: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
    --r: 22px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  body {
    margin: 0; background: var(--ground); color: var(--ink);
    font-family: var(--body); font-size: 17px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* clip, not hidden: `hidden` only removes the scrollbar, the content
       stays programmatically scrollable, so focusing an off-screen element
       can still shunt the whole page sideways. */
    overflow-x: clip;
  }
  h1,h2,h3,h4 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.028em; font-weight: 600; }
  p { margin: 0; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: rgba(37,99,235,0.16); }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

  .skip { position:absolute; left:-9999px; top:0; z-index:300; background: var(--brand); color:#fff; padding:10px 16px; }
  .skip:focus { left:16px; top:16px; }

  .wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 32px; }
  @media (max-width:640px){ .wrap{ padding:0 20px; } }

  /* ---------- NAV ---------- */
  /* Transparent at rest so the hero colour runs edge to edge with no
     seam under the bar; frosts only once content passes beneath it. */
  .nav { position: sticky; top:0; z-index:100; background: transparent; border-bottom:1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s, backdrop-filter .3s; }
  .nav.stuck { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px) saturate(1.6); border-bottom-color: var(--hair); box-shadow: 0 6px 20px -14px rgba(12,18,32,0.3); }
  .nav-in { display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px; }
  .brand { display:inline-flex; align-items:center; gap:10px; }
  .brand svg { width:28px; height:28px; display:block; }
  .brand span { font-family: var(--display); font-weight:600; font-size:18.5px; letter-spacing:-0.02em; }
  .nav-mid { display:flex; gap:34px; }
  .nav-mid a { font-size:15.5px; color: var(--ink-2); font-weight:500; transition: color .2s; }
  .nav-mid a:hover { color: var(--ink); }
  @media (max-width:900px){ .nav-mid{ display:none; } }

  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-weight:600; font-size:15.5px; height:46px; padding:0 24px; border-radius:100px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .26s, background .22s, border-color .22s; }
  .btn-primary { background: linear-gradient(180deg, var(--brand-2), var(--brand)); color:#fff; box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,0.22); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,0.3); }
  .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--hair-2); box-shadow: var(--sh-1); }
  .btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--hair-2); }
  .btn-sm { height:42px; font-size:15px; padding:0 20px; }

  /* ---------- HERO ---------- */
  /* One viewport. The hero is pulled up under the transparent nav, so the box
     is 74px taller than the fold and carries a matching top pad: that ends the
     section exactly at the fold while centring content in the space actually
     visible. svh, not vh -- vh measures the largest viewport and mobile browser
     chrome then pushes the bottom off screen. */
  .hero {
    position:relative; margin-top:-74px; overflow:clip;
    min-height: calc(100vh + 74px);
    min-height: calc(100svh + 74px);
    padding: 74px 0 0;
    display:grid; place-items:center;
  }
  .aurora { position:absolute; inset:-10% -20% auto -20%; height:820px; z-index:0; pointer-events:none; filter: blur(58px); opacity:1; }
  .aurora i { position:absolute; display:block; border-radius:50%; }
  .a1 { width:700px; height:580px; left:4%;  top:-110px; background: radial-gradient(circle at 50% 50%, rgba(13,148,136,.78), transparent 66%); animation: f1 18s ease-in-out infinite; }
  .a2 { width:780px; height:620px; left:31%; top:-170px; background: radial-gradient(circle at 50% 50%, rgba(37,99,235,.72), transparent 66%); animation: f2 22s ease-in-out infinite; }
  .a3 { width:620px; height:530px; right:6%; top:-80px; background: radial-gradient(circle at 50% 50%, rgba(124,58,237,.64), transparent 66%); animation: f3 20s ease-in-out infinite; }
  .a4 { width:520px; height:440px; right:24%; top:150px; background: radial-gradient(circle at 50% 50%, rgba(240,97,109,.50), transparent 66%); animation: f1 24s ease-in-out infinite reverse; }
  @keyframes f1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,26px) scale(1.08)} }
  @keyframes f2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-38px,20px) scale(1.06)} }
  @keyframes f3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(24px,-24px) scale(1.05)} }
  /* Daylight wash so the colour reads as light in the room, not paint. */
  .aurora::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(242,244,248,.10) 0%, rgba(242,244,248,.52) 56%, rgba(242,244,248,.92) 84%, var(--ground) 100%); }

  /* v4: composition moves from centred to a left-weighted two-column split.
     Centred stacks read as safe; the references all anchor the type to the
     left edge and let the object hold the right. */
  /* Single centred column. The payoff line gets a deliberately tighter gutter
     than the rest of the page so it runs closer to the frame edge than any
     other element -- the confidence comes from it not fitting comfortably. */
  .hero-in { position:relative; z-index:2; display:block; text-align:center;
             max-width:1560px; padding-left:20px; padding-right:20px; }
  .hero-copy { text-align:center; max-width:none; }

  .hero-eyebrow {
    display:block; font-size:11.5px; font-weight:600;
    letter-spacing:0.2em; text-transform:uppercase;
    color: var(--ink-3); margin:0 0 30px;
  }
  .hero .hero-copy .hero-cta { justify-content:center; margin-bottom:0; margin-top:38px; }
  .pill { display:inline-flex; align-items:center; gap:9px; height:36px; padding:0 16px 0 6px; border-radius:100px; background: rgba(255,255,255,.78); backdrop-filter: blur(12px); border:1px solid rgba(255,255,255,.9); box-shadow: var(--sh-2); font-size:14.5px; color: var(--ink-2); font-weight:500; margin-bottom:20px; }
  .pill b { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background: linear-gradient(180deg,var(--brand-2),var(--brand)); color:#fff; padding:5px 10px; border-radius:100px; }

  /* Type scale pushed hard. The reference headlines occupy far more of the
     fold than ours did; at 78px centred it read as a subheading. */
  .hero h1 { margin:0; font-weight:600; }

  /* Setup line stays flat ink and quiet. All the drama belongs to the payoff. */
  .hero h1 .setup {
    display:block;
    font-size: clamp(26px, 3.9vw, 58px);
    line-height:1.06; letter-spacing:-0.03em;
    color: var(--ink); margin:0 0 .06em;
  }

  /* Payoff line. Sized off the viewport, not a fixed value, and allowed to
     wrap on narrow screens rather than forcing horizontal overflow. */
  .hero h1 .payoff {
    display:block;
    font-size: clamp(3.1rem, 11.6vw, 10.5rem);
    line-height:0.9; letter-spacing:-0.045em;
    font-weight:700; text-transform:uppercase;
    /* The aurora becomes the substance of the type rather than wallpaper. */
    background-image: linear-gradient(104deg,
      var(--grad-a) 0%, var(--grad-b) 44%, var(--grad-c) 80%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
  /* Windows High Contrast strips background images, which would leave the
     payoff invisible. Hand the colour back. */
  @media (forced-colors: active) {
    .hero h1 .payoff { -webkit-text-fill-color: CanvasText; color: CanvasText; }
  }
  .hero h1 .grad { background: linear-gradient(104deg, var(--teal) 0%, var(--blue) 42%, var(--violet) 78%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  /* Serif italic runs larger and tighter: at matched size it optically reads
     smaller than the sans beside it. */
  .ital {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.13em;
    letter-spacing: -0.005em;
    padding-right: 0.04em;
  }
  /* Word mask reveal. Per the gsap domain: short headlines only, expo-style
     easing, ~15ms stagger. Done with CSS so no paid SplitText dependency. */
  .hero h1 .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; }
  .hero h1 .w > i { display:inline-block; font-style:normal; }
  /* Hidden start state is gated behind .js so the headline is never invisible
     when scripting or CSS animation is unavailable. */
  .js .hero h1 .w > i { transform: translateY(108%); opacity:0; animation: wordUp .82s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes wordUp { to { transform: translateY(0); opacity:1; } }
  .js .fade-seq { opacity:0; animation: fadeUp .7s cubic-bezier(.16,1,.3,1) forwards; }
  @keyframes fadeUp { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) {
    .js .hero h1 .w > i { transform:none; opacity:1; animation:none; }
    .js .fade-seq { opacity:1; animation:none; }
  }
  .hero .lede { font-size:19px; color: var(--ink-2); max-width:46ch; margin:0 0 18px; line-height:1.55; }
  .hero-cta { display:flex; gap:12px; justify-content:flex-start; flex-wrap:wrap; margin-bottom:14px; }
  .micro { font-size:14.5px; color: var(--ink-3); }

  /* Stats rail pinned under the hero, straight from the Moonbeam reference.
     Moves the proof numbers above the fold where they do some work. */
  .hero-rail {
    position:relative; z-index:2; margin-top:10px;
    border-top:1px solid var(--hair);
    display:grid; grid-template-columns: repeat(4, 1fr);
  }
  .hero-rail div { padding:10px 20px 2px 0; }
  .hero-rail .n {
    font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-0.03em;
    font-variant-numeric: tabular-nums; color: var(--ink);
  }
  .hero-rail .l {
    font-size:12px; letter-spacing:.08em; text-transform:uppercase;
    color: var(--ink-3); margin-top:3px;
  }
  @media (max-width: 760px) {
    .hero-rail { grid-template-columns: 1fr 1fr; }
    .hero-rail div { padding:14px 14px 4px 0; }
    .hero-rail .n { font-size:22px; }
  }

  /* ---------- HERO CENTREPIECE ----------
     Earth with live connection arcs between cities: the systems
     TechLiberty builds and keeps running, wherever they sit. */
  /* Film grain. Every reference render carries it; without it large flat
     gradients band and read as CSS rather than as a rendered surface.
     SVG turbulence keeps it a few hundred bytes instead of a bitmap. */
  .grain {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    opacity:.42; mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size:180px 180px;
  }
  @media (prefers-reduced-motion: reduce) { .grain { opacity:.3; } }

  .stage { position:relative; width:100%; max-width:none; margin:0; height:452px; z-index:2; }
  @media (max-width: 980px) { .stage { height:360px; margin-top:4px; } }
  .stage canvas { display:block; width:100%; height:100%; }
  .stage::after {
    content:""; position:absolute; left:50%; bottom:34px; transform:translateX(-50%);
    width:56%; height:34px; border-radius:50%; pointer-events:none;
    background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(12,18,32,.16), transparent 70%);
    filter: blur(14px);
  }
  @media (max-width:760px){ .stage{ height:330px; margin-top:26px; } }
  @media (max-width:480px){ .stage{ height:270px; } }

  /* Everything the hero shed lands here, immediately below the fold.
     Two columns on desktop: the copy and stats on the left, the globe on the
     right. This is a content section, not the hero, so a side-by-side split
     reads as composed rather than as an unbalanced hero. */
  .intro { padding: 74px 0 0; position:relative; }
  /* STICKY: the globe holds centre screen while the text column scrolls
     past it, then releases at the end of the section. */
  .intro-top {
    display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap:56px; align-items:start; margin-bottom:0;
  }
  .intro-copy { padding-bottom:64px; }
  .intro-globe {
    position:sticky;
    /* Half the viewport minus half the globe, so it sits optically centred
       without a transform (transforms and sticky interact badly). */
    top: calc(50vh - 230px);
    height:460px;
  }
  .stage { position:relative; width:100%; height:460px; margin:0; z-index:2; }
  @media (max-width: 940px) {
    .intro-top { grid-template-columns:1fr; gap:8px; }
    .intro-globe { position:static; height:auto; }
    .intro-copy { padding-bottom:0; }
    .stage { height:clamp(280px, 62vw, 380px); margin-top:26px; }
  }
  .intro-lede {
    font-size:20px; line-height:1.55; color: var(--ink-2);
    max-width:46ch; margin:0 0 30px;
  }
  .intro-top .hero-rail { margin-top:0; }



  /* ---------- BENTO ---------- */
  .bento { display:grid; grid-template-columns: repeat(6, 1fr); gap:18px; margin-top:14px; position:relative; z-index:2; text-align:left; }
  @media (max-width:1000px){ .bento{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width:600px){ .bento{ grid-template-columns: 1fr;} }
  .tile { background: var(--card); border:1px solid var(--hair); border-radius: var(--r); padding:26px; box-shadow: var(--sh-2); position:relative; overflow:hidden;
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s; }
  .tile:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }
  .t-wide { grid-column: span 3; }
  .t-third { grid-column: span 2; }
  .t-half { grid-column: span 3; }
  @media (max-width:1000px){ .t-wide,.t-third,.t-half{ grid-column: span 1; } }
  .tile h3 { font-size:19px; margin-bottom:8px; }
  .tile p { font-size:15.5px; color: var(--ink-2); }
  .tile .ic { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:#fff; box-shadow: var(--sh-2); }
  .tile .ic svg { width:22px; height:22px; }
  .ic-teal { background: linear-gradient(160deg,#14B8A6,#0D9488); }
  .ic-blue { background: linear-gradient(160deg,#3B82F6,#2563EB); }
  .ic-violet { background: linear-gradient(160deg,#8B5CF6,#7C3AED); }

  .statline { display:flex; align-items:baseline; gap:10px; }
  .statline .n { font-family:var(--display); font-size:40px; font-weight:700; letter-spacing:-0.03em;
    background: linear-gradient(150deg, var(--blue), var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric: tabular-nums; }
  .statline .l { font-size:15px; color: var(--ink-3); }

  /* ---------- SECTIONS ---------- */
  section { padding: 78px 0; position:relative; }
  @media (max-width:640px){ section{ padding:56px 0; } }
  .kick { display:inline-block; font-size:13.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px;
    background: linear-gradient(100deg, var(--teal), var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .sh { font-size: clamp(32px,4.4vw,50px); line-height:1.08; max-width:19ch; }
  .ss { font-size:19px; color: var(--ink-2); max-width:56ch; margin-top:18px; }
  .head { margin-bottom:44px; }
  /* Cards tip up from below rather than sliding: the parent supplies the
     perspective, so the entrance reads as depth instead of a slide. */
  .caps, .flow, .work, .quotes, .bento, .proof, .steps { perspective: 1200px; perspective-origin: 50% 0%; }
  .js .rise {
    opacity:0;
    transform: translateY(26px) rotateX(9deg) scale(.982);
    transform-origin: 50% 100%;
    transition: opacity .78s cubic-bezier(.16,1,.3,1), transform .78s cubic-bezier(.16,1,.3,1);
    will-change: transform, opacity;
  }
  .js .rise.on { opacity:1; transform: none; will-change: auto; }

  .stage-statement {
    position:absolute; right:0; bottom:54px; z-index:3;
    max-width:260px; margin:0; padding:13px 15px;
    color: var(--ink-2); font-size:15px; line-height:1.35;
    background: rgba(255,255,255,.72); backdrop-filter: blur(12px);
    border:1px solid rgba(210,217,228,.78); border-radius:16px;
    box-shadow: var(--sh-2);
  }
  .stage-statement span {
    display:block; margin-bottom:4px;
    color: var(--teal); font-size:11px; font-weight:800;
    letter-spacing:.12em; text-transform:uppercase;
  }
  @media (max-width: 940px) {
    .stage-statement { right:12px; bottom:40px; max-width:240px; font-size:14px; }
  }
  @media (max-width: 520px) {
    .stage-statement {
      left:50%; right:auto; bottom:18px; transform:translateX(-50%);
      width:min(320px, calc(100% - 24px)); max-width:none;
      text-align:center; font-size:13.5px; padding:11px 13px;
    }
    .stage-statement span { font-size:10px; }
    .stage-hint { display:none; }
  }
  /* Globe stage reacts to scroll and to being dragged. */
  .stage canvas { cursor: grab; touch-action: pan-y; }
  .stage canvas:active { cursor: grabbing; }
  .stage-hint {
    position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
    display:inline-flex; align-items:center; gap:7px;
    font-size:13px; color: var(--ink-3);
    background: rgba(255,255,255,.72); backdrop-filter: blur(10px);
    border:1px solid var(--hair); border-radius:100px; padding:6px 14px;
    box-shadow: var(--sh-1);
    opacity:0; transition: opacity .5s ease;
    pointer-events:none;
  }
  .stage-hint.show { opacity:1; }
  .stage-hint svg { width:15px; height:15px; }
  @media (prefers-reduced-motion: reduce) { .stage-hint { display:none; } }
  @media (prefers-reduced-motion: reduce){ .rise{opacity:1;transform:none;} }

  /* ---------- CAPABILITY CARDS ---------- */
  /* Grouped by practice area. The old flat grid repeated the same category
     label twelve times and never said what any discipline actually does. */
  .capgroup { margin-bottom: 34px; }
  .capgroup:last-child { margin-bottom: 0; }
  .cg-head { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
  .cg-head .bar { width:32px; height:4px; border-radius:3px; flex-shrink:0;
    background: linear-gradient(90deg, rgba(var(--tint),1), rgba(var(--tint),0.45)); }
  .cg-head h3 { font-size:18px; font-weight:600; letter-spacing:-0.02em; }
  .cg-head .num { font-size:13px; font-weight:600; color: rgba(var(--tint),1);
    background: rgba(var(--tint),0.10); padding:3px 10px; border-radius:100px; }
  .cg-head .rule { flex:1; height:1px; background: linear-gradient(90deg, var(--hair), transparent); }

  .caps { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
  @media (max-width:940px){ .caps{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width:600px){ .caps{ grid-template-columns:1fr;} }

  .cap { background: var(--card); border:1px solid var(--hair); border-radius:18px;
    padding:24px 22px 22px; display:flex; flex-direction:column; align-items:flex-start;
    overflow:hidden;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .3s; }
  .cap:hover { transform: translateY(-4px); }
  /* A colour bleed along the top edge, revealed on hover. */
  .cap::after { content:""; position:absolute; left:0; right:0; top:0; height:3px;
    background: linear-gradient(90deg, rgba(var(--tint),0.95), rgba(var(--tint),0.25));
    transform: scaleX(0); transform-origin: left;
    transition: transform .42s cubic-bezier(.16,1,.3,1); }
  .cap:hover::after { transform: scaleX(1); }
  .cap .dot { width:42px; height:42px; border-radius:13px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:18px;
    transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .cap:hover .dot { transform: scale(1.06) rotate(-3deg); }
  .cap .dot svg { width:20px; height:20px; }
  .cap h4 { font-family:var(--display); font-size:16.5px; font-weight:600;
    letter-spacing:-0.018em; margin:0 0 7px; }
  .cap .desc { font-size:14.5px; color: var(--ink-2); line-height:1.5; }
  /* Raised from 0.34 alpha, which computed to roughly 1.7:1 on white and was
     effectively unreadable. 0.85 on the tint clears 4.5:1 for all three. */
  .cap .idx { position:absolute; top:20px; right:20px; font-size:12px; font-weight:700;
    color: rgba(var(--tint),0.85); font-variant-numeric: tabular-nums;
    transition: color .3s; }
  .cap:hover .idx { color: rgba(var(--tint),1); }

  /* ---------- APPROACH ---------- */
  .flow { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
  @media (max-width:940px){ .flow{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width:560px){ .flow{ grid-template-columns:1fr;} }
  .fstep { background: var(--card); border:1px solid var(--hair); border-radius:18px; padding:26px 22px; box-shadow: var(--sh-1); position:relative; overflow:hidden;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
  .fstep:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
  .fstep::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background: linear-gradient(90deg,var(--teal),var(--blue),var(--violet)); opacity:.9; }
  .fstep .n { font-family:var(--display); font-size:13px; font-weight:700; color: var(--ink-3); letter-spacing:.06em; margin-bottom:14px; display:block; }
  .fstep h3 { font-size:17.5px; margin-bottom:8px; }
  .fstep p { font-size:15px; color: var(--ink-2); }

  /* ---------- WORK ---------- */
  .work { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
  @media (max-width:940px){ .work{ grid-template-columns:1fr; } }
  .job { background: var(--card); border:1px solid var(--hair); border-radius: var(--r); overflow:hidden; box-shadow: var(--sh-2);
    transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s; }
  .job:hover { transform: translateY(-5px); box-shadow: var(--sh-4); }
  .job .cover { height:172px; position:relative; overflow:hidden; }
  .cover svg { position:absolute; inset:0; width:100%; height:100%; }
  .c1 { background: linear-gradient(140deg,#0D9488,#0EA5E9); }
  .c2 { background: linear-gradient(140deg,#2563EB,#7C3AED); }
  .c3 { background: linear-gradient(140deg,#7C3AED,#F0616D); }
  .job .meta { padding:22px; }
  .job .tagline { font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--ink-3); }
  .job h3 { font-size:18px; margin:10px 0 8px; }
  .job p { font-size:15px; color: var(--ink-2); }

  /* ---------- PROOF ---------- */
  .proof { background: var(--card); border:1px solid var(--hair); border-radius:26px; padding:44px; box-shadow: var(--sh-3); display:grid; grid-template-columns: repeat(4,1fr); gap:28px; }
  @media (max-width:860px){ .proof{ grid-template-columns: repeat(2,1fr); padding:32px; } }
  .pstat .n { font-family:var(--display); font-size:44px; font-weight:700; letter-spacing:-0.035em; font-variant-numeric: tabular-nums;
    background: linear-gradient(150deg,var(--teal),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .pstat .l { font-size:15px; color: var(--ink-3); margin-top:4px; }

  /* ---------- CARD DEPTH ----------
     Cards carry a --tint matching their practice area. Everything below
     is driven off that one channel: a corner wash, a warmer border, and a
     coloured lift on hover. Kept low (4 to 9 percent) because on a light
     ground anything stronger stops reading as paper. */
  .t-it  { --tint: 13,148,136; }
  .t-eng { --tint: 37,99,235; }
  .t-tr  { --tint: 124,58,237; }
  .t-mix { --tint: 79,86,190; }

  .tile, .cap, .fstep, .quote, .job {
    position: relative;
    isolation: isolate;
  }
  .tile::before, .cap::before, .fstep::before, .quote::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; pointer-events: none;
    background:
      radial-gradient(130% 106% at 0% 0%, rgba(var(--tint, 79,86,190), 0.085), transparent 58%),
      radial-gradient(100% 80% at 100% 100%, rgba(var(--tint, 79,86,190), 0.05), transparent 62%);
  }
  /* Top inner highlight: the edge that makes a surface read as glass. */
  .tile, .cap, .fstep, .quote {
    box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,0.96);
    border-color: rgba(var(--tint, 79,86,190), 0.16);
  }
  .cap { box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,0.96); }
  .tile:hover, .cap:hover, .fstep:hover, .quote:hover {
    border-color: rgba(var(--tint, 79,86,190), 0.36);
    box-shadow:
      0 20px 44px -20px rgba(var(--tint, 79,86,190), 0.42),
      0 3px 8px rgba(12,18,32,0.05),
      inset 0 1px 0 rgba(255,255,255,0.98);
  }
  /* Icon chips get a matching halo so the colour has a source. */
  .tile .ic, .cap .dot { box-shadow: 0 6px 16px -6px rgba(var(--tint, 79,86,190), 0.55); }

  /* Ambient colour in the page behind each section, so the cards sit in a
     lit room rather than on flat grey. */
  /* Ambient glows sized so they can never leave the section box. They used
     to sit at negative offsets, which made the document wider than the
     viewport; clipping the section instead just moved the problem into
     overflow-clip-margin. Constraining the width is the fix that has no
     side effect on card hover shadows. */
  #solutions::before, #capabilities::before, #work::before, #proof::before {
    content: ""; position: absolute; pointer-events: none; z-index: -1;
    filter: blur(80px);
    width: min(760px, 64%);
  }
  #solutions::before {
    left: 0; top: 4%; height: 620px;
    background: radial-gradient(ellipse 54% 50% at 34% 50%, rgba(13,148,136,0.20), transparent 72%);
  }
  #capabilities::before {
    right: 0; top: 10%; height: 700px;
    background: radial-gradient(ellipse 54% 50% at 66% 50%, rgba(124,58,237,0.19), transparent 72%);
  }
  #work::before {
    left: 0; top: 8%; height: 640px;
    background: radial-gradient(ellipse 54% 50% at 34% 50%, rgba(37,99,235,0.19), transparent 72%);
  }
  #proof::before {
    right: 0; top: 6%; height: 660px;
    background: radial-gradient(ellipse 54% 50% at 66% 50%, rgba(240,97,109,0.17), transparent 72%);
  }

  /* ---------- SOCIAL PROOF ----------
     The landing pattern puts proof between the solutions and the CTA.
     Logos and quotes stay visibly unbranded until real ones are cleared. */
  .logos { display:flex; align-items:center; justify-content:center; gap:44px; flex-wrap:wrap; padding:26px 0 8px; }
  .logo-slot { display:flex; align-items:center; gap:9px; color: var(--ink-3); opacity:.62; transition: opacity .3s; }
  .logo-slot:hover { opacity:.9; }
  .logo-slot svg { width:26px; height:26px; }
  .logo-slot span { font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-0.02em; }

  .quotes { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:46px; }
  @media (max-width:940px){ .quotes{ grid-template-columns:1fr; } }
  .quote { background: var(--card); border:1px solid var(--hair); border-radius: var(--r); padding:28px; box-shadow: var(--sh-2); display:flex; flex-direction:column; gap:18px;
    transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
  .quote:hover { transform: translateY(-4px); box-shadow: var(--sh-4); }
  .stars { display:flex; gap:3px; color: var(--amber); }
  .stars svg { width:16px; height:16px; }
  /* The UA stylesheet gives blockquote a 40px side margin; it strangles
     the quote into a narrow column inside the card. */
  .quote blockquote { margin:0; }
  .quote p { font-size:16.5px; color: var(--ink); line-height:1.55; }
  .who { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px; }
  .who .av { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:600; font-size:14px; }
  .who .nm { font-size:15px; font-weight:600; }
  .who .rl { font-size:13.5px; color: var(--ink-3); }

  /* ---------- FORM ---------- */
  .form-card { background: var(--card); border-radius:24px; padding:34px; box-shadow: var(--sh-4); text-align:left; min-width:0; }
  /* Text inputs carry an intrinsic min-content width that will not shrink,
     which pushed the whole CTA band past the viewport on narrow phones.
     Because body clips overflow-x, that showed up as silently cropped
     content rather than a scrollbar. */
  .fld input, .fld textarea, .fld select { min-width: 0; }
  .cta-grid > * { min-width: 0; }
  .cta h2, .cta p { max-width: 100%; }
  .fg, .fc, .fc ul, .f-brand { min-width: 0; }
  .fld { margin-bottom:18px; }
  .fld label { display:block; font-size:14.5px; font-weight:600; color: var(--ink); margin-bottom:7px; }
  .fld label .opt { font-weight:400; color: var(--ink-3); }
  .fld input, .fld textarea, .fld select {
    width:100%; font-family:var(--body); font-size:16px; color: var(--ink);
    background: var(--ground); border:1px solid var(--hair-2); border-radius:12px;
    padding:13px 14px; transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .fld textarea { min-height:112px; resize:vertical; }
  .fld input:focus, .fld textarea:focus, .fld select:focus {
    outline:none; background: var(--card); border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(37,99,235,.14);
  }
  .fld .hint { font-size:13.5px; color: var(--ink-3); margin-top:6px; }
  .fld .err { display:none; font-size:13.5px; color:#B42318; margin-top:6px; font-weight:500; }
  .fld.bad input, .fld.bad textarea { border-color:#D92D20; background:#FFFBFA; }
  .fld.bad .err { display:block; }
  .fld.bad .hint { display:none; }
  .form-card .btn { width:100%; height:50px; }
  .btn[aria-busy="true"] { opacity:.72; cursor:progress; }
  .spin { width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: sp .7s linear infinite; }
  @keyframes sp { to { transform: rotate(360deg); } }
  .form-note { font-size:13.5px; color: var(--ink-3); margin-top:14px; text-align:center; }
  /* Honeypot: off-screen rather than display:none, because some bots skip
     fields that are explicitly hidden. Never focusable, never announced. */
  .hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
  .form-fail { display:none; font-size:14px; color:#B42318; background:#FEF3F2;
    border:1px solid #FDA29B; border-radius:10px; padding:11px 13px; margin-top:14px; }
  .form-fail.on { display:block; }
  .form-fail a { color:#B42318; font-weight:600; text-decoration:underline; }
.form-done { display:none; text-align:center; padding:34px 10px; }
  .form-done.on { display:block; animation: sentPanel .46s cubic-bezier(.16,1,.3,1) both; }
  .form-done .tick {
    position:relative; width:64px; height:64px; border-radius:50%;
    background: linear-gradient(160deg,#14B8A6,#0D9488);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 18px; color:#fff; box-shadow: 0 14px 30px -16px rgba(13,148,136,.95);
    transform: scale(.72);
  }
  .form-done.on .tick { animation: sentPop .58s cubic-bezier(.16,1,.3,1) .08s both; }
  .form-done .tick::after {
    content:""; position:absolute; inset:-9px; border-radius:50%;
    border:2px solid rgba(20,184,166,.38); opacity:0; transform:scale(.82);
  }
  .form-done.on .tick::after { animation: sentRing .84s ease-out .16s both; }
  .form-done .tick svg { width:30px; height:30px; stroke-dasharray:32; stroke-dashoffset:32; }
  .form-done.on .tick svg { animation: sentCheck .52s ease-out .28s forwards; }
  .form-done h3 { font-size:21px; margin-bottom:8px; }
  .form-done p { font-size:16px; color: var(--ink-2); }
  @keyframes sentPanel { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  @keyframes sentPop { 0% { transform:scale(.72); } 68% { transform:scale(1.08); } 100% { transform:scale(1); } }
  @keyframes sentRing { 0% { opacity:0; transform:scale(.82); } 35% { opacity:1; } 100% { opacity:0; transform:scale(1.45); } }
  @keyframes sentCheck { to { stroke-dashoffset:0; } }
  @media (prefers-reduced-motion: reduce) {
    .form-done.on, .form-done.on .tick, .form-done.on .tick::after, .form-done.on .tick svg { animation:none; }
    .form-done .tick { transform:none; }
    .form-done .tick svg { stroke-dashoffset:0; }
  }
  form.gone { display:none; }

  /* ---------- CTA ---------- */
  .cta { position:relative; border-radius:30px; overflow:hidden; padding:76px 44px; text-align:center;
    background: linear-gradient(135deg,#0B3A63 0%, #124E82 38%, #2F5FA8 70%, #6C4FBF 100%); color:#fff; box-shadow: var(--sh-4); }
  .cta::before { content:""; position:absolute; width:560px; height:460px; right:-120px; top:-140px; border-radius:50%;
    background: radial-gradient(circle at 50% 50%, rgba(240,97,109,.42), transparent 66%); filter: blur(50px); }
  .cta::after { content:""; position:absolute; width:520px; height:440px; left:-140px; bottom:-160px; border-radius:50%;
    background: radial-gradient(circle at 50% 50%, rgba(13,148,136,.46), transparent 66%); filter: blur(50px); }
  .cta > * { position:relative; z-index:2; }
  .cta-grid { position:relative; z-index:2; display:grid; grid-template-columns: 1fr 1fr; gap:52px; align-items:center; text-align:left; }
  @media (max-width:940px){ .cta-grid{ grid-template-columns:1fr; gap:36px; } }
  .cta h2 { font-size: clamp(30px,4.4vw,48px); line-height:1.08; max-width:19ch; margin:0 0 18px; }
  .cta p { font-size:19px; color: rgba(255,255,255,.86); max-width:48ch; margin:0 0 26px; }
  .cta-pts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .cta-pts li { display:flex; align-items:flex-start; gap:11px; font-size:16px; color: rgba(255,255,255,.9); }
  .cta-pts svg { width:20px; height:20px; flex-shrink:0; margin-top:2px; color:#7DE2D1; }
  .cta .btn-white { background:#fff; color:#0B3A63; box-shadow: var(--sh-3); }
  .cta .btn-white:hover { transform: translateY(-2px); }
  .cta .btn-clear { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.34); backdrop-filter: blur(8px); }
  .cta .btn-clear:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }

  /* ---------- FOOTER ---------- */
  footer { background: var(--card); border-top:1px solid var(--hair); padding:64px 0 34px; margin-top:24px; }
  .fg { display:grid; grid-template-columns: 1.6fr repeat(3,1fr); gap:44px; margin-bottom:48px; }
  @media (max-width:780px){ .fg{ grid-template-columns:1fr 1fr; gap:32px; } }
  .fg p { font-size:15px; color: var(--ink-3); margin-top:14px; max-width:32ch; }
  .fc h4 { font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--ink-3); margin:0 0 16px; }
  .fc ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  /* Padded to a 28px hit area. These measured 22px tall, under the 24px
     minimum in WCAG 2.5.8. Gap reduced to keep the visual rhythm identical. */
  .fc a { font-size:15.5px; color: var(--ink-2); transition: color .2s;
    display:inline-block; padding:5px 0; }
  .fc a:hover { color: var(--brand-2); }
  .fb { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:26px; border-top:1px solid var(--hair); font-size:14.5px; color: var(--ink-3); }
  .fb a { display:inline-block; padding:5px 2px; }
  .fb a { color: var(--ink-3); }
  .fb a:hover { color: var(--brand-2); }

  /* Screen-reader-only utility. Nothing uses it right now, but it is the
     standard hook for visually hidden labels and the parked chat widget
     needs it on return. */
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0; }

  /* ---------- SECOND-PAGE HELPERS ---------- */
  .page-hero { min-height:auto; padding:132px 0 8px; }
  .page-hero .payoff { font-size:clamp(2.6rem, 8vw, 6.4rem); }

  /* ---------- SMALL SCREENS ----------
     These live last on purpose. An identical-specificity rule later in the
     sheet beats an earlier one even inside a media query, so putting these
     next to the components they override silently did nothing. */
  @media (max-width: 620px) {
    .cta { padding: 52px 20px; border-radius: 22px; }
    .form-card { padding: 22px 18px; border-radius: 18px; }
    .proof { padding: 28px 20px; border-radius: 20px; }
    .cta-grid { gap: 30px; }
  }
  @media (max-width: 430px) {
    .wrap { padding: 0 16px; }
    .nav-in { height: 64px; gap: 10px; }
    .brand span { font-size: 16px; }
    .brand svg { width: 24px; height: 24px; }
    /* 44px floor: below that it fails the minimum touch target. Narrow the
       padding and text instead of the height. */
    .btn-sm { height: 44px; font-size: 13.5px; padding: 0 14px; }
    .hero { padding-top: 132px; }
    .hero .lede { font-size: 17px; }
    .tile, .quote, .job .meta { padding: 20px 18px; }
    .cap { padding: 20px 18px 18px; }
    .cg-head h3 { font-size: 16.5px; }
    .stat-item .n, .pstat .n { font-size: 34px; }
  }