:root{
    --ground:#EDEFF3;
    --surface:#FFFFFF;
    --surface-2:#E2E7EC;
    --panel:#0B1725;
    --panel-2:#15293C;
    --line:#C9D2DB;
    --line-strong:#A9B6C3;
    --ink:#0B1725;
    --ink-2:#3A5064;
    --ink-3:#6C8093;
    --accent:#467100;
    --on-accent:#FFFFFF;
    --accent-2:#7EBA00;
    --on-panel:#E7EEF5;
    --on-panel-2:#9FB4C8;
    --on-panel-3:#6E879E;
    --panel-line:#23394F;

    --hdr-bg:#0B1725;
    --hdr-ink:#E7EEF5;
    --hdr-ink-2:#9FB4C8;
    --hdr-line:#23394F;
    --grid-dot:rgba(11,23,37,.11);
    --glow:rgba(126,186,0,.20);
    --fig:rgba(11,23,37,.17);
    --fig-accent:rgba(126,186,0,.34);

    --display:'Archivo','Helvetica Neue',Arial,sans-serif;
    --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
    --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;

    --gutter:clamp(20px,5vw,72px);
    --maxw:1180px;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#081320;
      --surface:#0E1D2C;
      --surface-2:#15293C;
      --panel:#05101B;
      --panel-2:#101F2E;
      --line:#1E3247;
      --line-strong:#2C4661;
      --ink:#E7EEF5;
      --ink-2:#A6BACC;
      --ink-3:#6E879E;
      --accent:#7EBA00;
      --on-accent:#0B1725;
      --accent-2:#7EBA00;
      --on-panel:#E7EEF5;
      --on-panel-2:#9FB4C8;
      --on-panel-3:#6E879E;
      --panel-line:#1B2E42;
      --hdr-bg:#101F2E;
      --hdr-line:#24394F;
      --grid-dot:rgba(231,238,245,.10);
      --glow:rgba(126,186,0,.26);
      --fig:rgba(231,238,245,.15);
      --fig-accent:rgba(126,186,0,.40);
    }
  }
  :root[data-theme="dark"]{
    --ground:#081320;
    --surface:#0E1D2C;
    --surface-2:#15293C;
    --panel:#05101B;
    --panel-2:#101F2E;
    --line:#1E3247;
    --line-strong:#2C4661;
    --ink:#E7EEF5;
    --ink-2:#A6BACC;
    --ink-3:#6E879E;
    --accent:#7EBA00;
    --on-accent:#0B1725;
    --accent-2:#7EBA00;
    --on-panel:#E7EEF5;
    --on-panel-2:#9FB4C8;
    --on-panel-3:#6E879E;
    --panel-line:#1B2E42;
    --hdr-bg:#101F2E;
    --hdr-line:#24394F;
    --grid-dot:rgba(231,238,245,.10);
    --glow:rgba(126,186,0,.26);
    --fig:rgba(231,238,245,.15);
    --fig-accent:rgba(126,186,0,.40);
  }

  *{box-sizing:border-box}
  body{
    margin:0;
    background:var(--ground);
    color:var(--ink);
    font-family:var(--body);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
  h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-0.025em;text-wrap:balance;margin:0}
  p{margin:0}
  a{color:inherit}
  ::selection{background:var(--accent-2);color:#0B1725}
  :focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}

  .eyebrow{
    font-family:var(--mono);font-size:11.5px;font-weight:500;
    letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);
    display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--line-strong);flex:none}
  .eyebrow.on-dark{color:var(--on-panel-3)}
  .eyebrow.on-dark::before{background:var(--panel-line)}

  /* ---------- header ---------- */
  header.site{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
    background:color-mix(in srgb,var(--hdr-bg) 93%,transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--hdr-line);
  }
  .navrow{display:flex;align-items:center;gap:28px;height:64px}
  .logo{display:flex;align-items:center;flex:none;text-decoration:none}
  .logo img{height:34px;width:auto}
  .flogo{display:inline-block;margin-bottom:20px}
  .flogo img{height:40px;width:auto}
  .logo .logo-light{display:none}
  .logo .logo-dark{display:block}
  .flogo .logo-light{display:block}
  .flogo .logo-dark{display:none}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .flogo .logo-light{display:none}
    :root:not([data-theme="light"]) .flogo .logo-dark{display:block}
  }
  :root[data-theme="dark"] .flogo .logo-light{display:none}
  :root[data-theme="dark"] .flogo .logo-dark{display:block}
  @media (max-width:520px){.logo img{height:28px}}
  nav.links{display:flex;gap:26px;margin-left:auto;font-size:14.5px}
  nav.links a{text-decoration:none;color:var(--hdr-ink-2)}
  nav.links a:hover{color:var(--hdr-ink)}
  .btn{
    font-family:var(--mono);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;
    text-decoration:none;padding:10px 16px;border:1px solid var(--ink);color:var(--ink);
    display:inline-block;white-space:nowrap;transition:background .18s,color .18s;
  }
  .btn:hover{background:var(--ink);color:var(--ground)}
  .btn.solid{background:var(--ink);color:var(--ground);border-color:var(--ink)}
  .btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#0B1725}
  .btn.ghost-dark{border-color:var(--panel-line);color:var(--on-panel)}
  .btn.ghost-dark:hover{background:var(--on-panel);color:var(--panel)}
  .btn.brand{background:var(--accent-2);border-color:var(--accent-2);color:#0B1725}
  header.site .btn.solid{background:var(--accent-2);border-color:var(--accent-2);color:#0B1725}
  header.site .btn.solid:hover{background:var(--hdr-ink);border-color:var(--hdr-ink);color:var(--hdr-bg)}
  header.site :focus-visible{outline-color:var(--accent-2)}
  .btn.brand:hover{filter:brightness(1.08)}
  @media (max-width:860px){nav.links{display:none}}

  /* ---------- hero backdrop ---------- */
  .herowrap{position:relative;overflow:hidden;isolation:isolate}
  .herowrap::before{
    content:"";position:absolute;inset:-40px 0 0;z-index:-2;pointer-events:none;
    background-image:radial-gradient(circle at center,var(--grid-dot) 1.1px,transparent 1.1px);
    background-size:30px 30px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 92%);
    mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 92%);
    animation:gridDrift 44s linear infinite;
  }
  @keyframes gridDrift{from{background-position:0 0}to{background-position:30px 30px}}

  /* drifting line-art of the things we build */
  .figs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%);
    mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 94%)}
  .fig{position:absolute;display:block;color:var(--fig);
    stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .fig .hot{stroke:var(--fig-accent)}
  .fig .dot{fill:currentColor;stroke:none}

  @keyframes fl1{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-14px,20px,0) rotate(4deg)}}
  @keyframes fl2{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(18px,-16px,0) rotate(-5deg)}}
  @keyframes fl3{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(10px,24px,0) rotate(-3deg)}}
  @keyframes fl4{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(-20px,-12px,0) rotate(5deg)}}
  @keyframes spin{to{transform:rotate(360deg)}}

  .f-browser {width:clamp(96px,11vw,156px);  top:10%;  right:4%;   animation:fl1 34s ease-in-out infinite}
  .f-cloud   {width:clamp(84px,9.5vw,132px); top:4%;   right:20%;  animation:fl2 41s ease-in-out infinite}
  .f-infinity{width:clamp(88px,10vw,140px);  top:38%;  right:14%;  animation:fl3 47s ease-in-out infinite}
  .f-phone   {width:clamp(44px,5vw,70px);    top:64%;  right:19%;  animation:fl4 38s ease-in-out infinite}
  .f-stack   {width:clamp(62px,7vw,96px);    bottom:8%;right:10%;  animation:fl2 52s ease-in-out infinite}
  .f-db      {width:clamp(52px,6vw,82px);    top:58%;  right:4%;   animation:fl1 44s ease-in-out infinite}
  .f-gear    {width:clamp(44px,5vw,66px);    top:27%;  right:26%;  animation:spin 90s linear infinite}
  .f-code    {width:clamp(62px,7vw,96px);    bottom:5%;left:3%;    animation:fl3 43s ease-in-out infinite}
  .f-graph   {width:clamp(56px,6.5vw,88px);  top:3%;   left:4%;    animation:fl4 49s ease-in-out infinite}

  /* below this the copy fills the column, so the figures would sit under the text */
  @media (max-width:1140px){.figs{display:none}}
  @media (prefers-reduced-motion:reduce){.fig{animation:none}}

  .glow{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
    background:radial-gradient(circle closest-side,var(--glow) 0%,transparent 72%)}
  .glow.a{width:min(54vw,680px);aspect-ratio:1;top:-24%;right:-8%;animation:glowA 26s ease-in-out infinite}
  .glow.b{width:min(40vw,520px);aspect-ratio:1;bottom:-34%;left:-10%;animation:glowB 34s ease-in-out infinite}
  @keyframes glowA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5%,7%,0) scale(1.14)}}
  @keyframes glowB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,-5%,0) scale(1.1)}}
  @media (prefers-reduced-motion:reduce){
    .herowrap::before,.glow{animation:none}
  }

  /* ---------- hero ---------- */
  .hero{padding-block:clamp(40px,6vw,78px) clamp(26px,3.6vw,44px)}
  .hero h1{
    font-size:clamp(38px,6.4vw,74px);line-height:1.02;font-weight:800;
    max-width:17ch;margin-bottom:26px;
  }
  .hero h1 em{font-style:normal;position:relative;white-space:nowrap}
  .hero h1 em::after{
    content:"";position:absolute;left:0;right:0;bottom:.06em;height:.11em;
    background:var(--accent-2);opacity:.85;z-index:-1;
  }
  .hero .lede{font-size:clamp(17px,2vw,20.5px);color:var(--ink-2);max-width:60ch;line-height:1.55}
  .hero .lede strong{color:var(--ink);font-weight:600}
  .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  .hero-note{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:16px}

  .claims{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border-block:1px solid var(--line);margin-top:clamp(30px,4vw,52px);
  }
  .claim{background:var(--ground);padding:22px 20px 24px 0}
  .claim + .claim{padding-left:26px}
  .claim .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px}
  .claim p{font-size:15.5px;color:var(--ink-2);max-width:34ch}

  /* ---------- hero video ---------- */
  .vidhero{background:#06111D}
  .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
    z-index:-3;filter:saturate(1.08) contrast(1.04) brightness(1.16);pointer-events:none}
  .heroscrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
    background:
      linear-gradient(100deg,rgba(6,17,29,.74) 0%,rgba(6,17,29,.58) 34%,rgba(6,17,29,.2) 64%,rgba(6,17,29,.04) 100%),
      linear-gradient(0deg,rgba(6,17,29,.7) 0%,rgba(6,17,29,.12) 32%,rgba(6,17,29,0) 54%)}
  .vidhero .figs,.vidhero .glow{display:none}
  .vidhero::before{opacity:.16;mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 80%)}
  .vidhero .hero h1{color:#FFFFFF}
  .vidhero .hero h1 em::after{opacity:1}
  .vidhero .hero .lede{color:#B9C9D8}
  .vidhero .hero .lede strong{color:#FFFFFF}
  .vidhero .hero-note{color:#8CA2B6}
  .vidhero .btn{color:#E7EEF5;border-color:rgba(231,238,245,.45)}
  .vidhero .btn:hover{background:#E7EEF5;color:#0B1725;border-color:#E7EEF5}
  .vidhero .btn.solid{background:var(--accent-2);border-color:var(--accent-2);color:#0B1725}
  .vidhero .btn.solid:hover{background:#8FD000;border-color:#8FD000}
  .vidhero .claims{background:transparent;gap:0;
    border-block:1px solid rgba(231,238,245,.22)}
  .vidhero .claim{background:transparent;padding:26px 30px 28px 26px;
    border-left:1px solid rgba(231,238,245,.22)}
  .vidhero .claim:first-child{border-left:0;padding-left:0}
  @media (max-width:760px){.vidhero .claim{border-left:0;padding:22px 0 24px}
    .vidhero .claim + .claim{border-top:1px solid rgba(231,238,245,.22)}}
  .vidhero .claim .k{color:var(--accent-2)}
  .vidhero .claim p{color:#B9C9D8}
  @media (max-width:760px){.herovid{object-position:70% 50%}}
  @media (prefers-reduced-motion:reduce){.herovid{display:none}
    .vidhero{background:#06111D url("media/hero-poster.jpg") center/cover no-repeat}}
  @media (max-width:760px){
    .claims{grid-template-columns:1fr}
    .claim{padding:18px 0}
    .claim + .claim{padding-left:0}
  }

  /* ---------- logos ---------- */
  .logos{padding-block:24px 34px}
  .logos .cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
  .logobelt{border-block:1px solid var(--line);padding-block:clamp(18px,2.4vw,26px)}
  .marquee{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .marquee + .marquee{margin-top:clamp(14px,2vw,24px)}
  .mtrack{display:flex;align-items:center;width:max-content;will-change:transform;
    animation:mscroll 46s linear infinite}
  .marquee.rev .mtrack{animation-direction:reverse}
  .marquee:hover .mtrack,.marquee:focus-within .mtrack{animation-play-state:paused}
  @keyframes mscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .mtrack img{--o:.72;flex:none;height:auto;display:block;
    margin-right:clamp(38px,5.2vw,72px);
    filter:grayscale(1);opacity:var(--o);transition:filter .22s ease,opacity .22s ease}
  .mtrack img:hover{filter:none;opacity:1}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .mtrack img{--o:.82;filter:grayscale(1) invert(1)}
    :root:not([data-theme="light"]) .mtrack img:hover{filter:grayscale(1) invert(1);opacity:1}
  }
  :root[data-theme="dark"] .mtrack img{--o:.82;filter:grayscale(1) invert(1)}
  :root[data-theme="dark"] .mtrack img:hover{filter:grayscale(1) invert(1);opacity:1}
  @media (prefers-reduced-motion:reduce){.mtrack{animation:none}}
  @media (max-width:640px){.mtrack img{margin-right:36px;max-height:30px;width:auto!important}}
  .logomore{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.03em;margin-top:16px}
  @media (max-width:900px){.logowall{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:520px){
    .logowall{grid-template-columns:repeat(2,1fr)}
    .lg{min-height:66px;padding:12px 10px}
    .lg[aria-hidden]{display:none}
    .lg:nth-child(n+9){display:none}
  }

  /* ---------- section base ---------- */
  section{scroll-margin-top:80px}
  .band{background:var(--surface);border-block:1px solid var(--line)}
  .band-soft{background:var(--surface-2);border-block:1px solid var(--line)}

  /* ---------- quick filter above the client success archive ---------- */
  .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:clamp(26px,3vw,38px)}
  .flabel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);margin-right:6px}
  .fchip{display:inline-block;text-decoration:none;cursor:pointer;
    font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-2);
    border:1px solid var(--line-strong);padding:8px 12px;background:transparent;
    transition:border-color .16s ease,color .16s ease,background .16s ease}
  .fchip:hover{border-color:var(--ink-3);color:var(--ink)}
  .fchip.on,.fchip.on:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .fchip:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
  .fnone{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-bottom:8px}
  .case[hidden]{display:none}

  /* A compact card: the headline and the problem, nothing else. */
  .case.compact .ba{margin-top:14px}
  .case.compact .ba p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
    overflow:hidden;line-clamp:5}

  /* ---------- a post, as a magazine feature ---------- */
  /* The masthead runs the full width of the page. With a featured image it is
     set over the photograph, which fills the band behind it under a scrim;
     without one it falls back to the page background. */
  .ftop{padding-block:clamp(22px,3vw,38px) clamp(34px,4.6vw,62px)}
  .fkick{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);display:flex;flex-wrap:wrap;gap:9px;align-items:baseline}
  .fkick a{color:var(--accent);text-decoration:none}
  .fkick a:hover{text-decoration:underline;text-underline-offset:3px}
  .fkick i{font-style:normal;color:var(--line-strong)}

  .ftitle{font-family:var(--display);font-size:clamp(26px,3.8vw,46px);line-height:1.07;
    font-weight:800;letter-spacing:-0.022em;max-width:none;margin:16px 0 0;text-wrap:balance}

  /* Wide, but stopped short of the full measure: a 130-character line of
     20px text is not a line anybody finishes. */
  .fstand{font-size:clamp(17.5px,1.95vw,21px);line-height:1.52;color:var(--ink-2);
    max-width:76ch;margin:22px 0 0}

  /* ---------- the hero, when the post has a featured image ---------- */
  .fthero{position:relative;isolation:isolate;display:flex;flex-direction:column;
    min-height:clamp(200px,16vw,240px);background:var(--panel);color:#FFFFFF}
  /* A flex item with auto side margins stops stretching and shrinks to its own
     content, so each .wrap in here would size itself and sit centred — which
     left the breadcrumb floating in the middle while the headline stayed left.
     width:100% puts the stretch back; max-width and the auto margins then
     centre the box itself, as they do everywhere else. */
  .fthero > .wrap{width:100%}
  .fthero .fthart{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
  .fthero .fthscrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      linear-gradient(180deg,rgba(6,17,29,.82) 0%,rgba(6,17,29,.52) 34%,rgba(6,17,29,.72) 72%,rgba(6,17,29,.9) 100%),
      linear-gradient(90deg,rgba(6,17,29,.5) 0%,rgba(6,17,29,.18) 55%,rgba(6,17,29,.34) 100%)}
  /* The words sit at the foot of the picture, where a cover line goes. On a
     two-line headline the masthead already fills the band, so the breadcrumb
     stays directly above it; the floor above only opens up for a short one. */
  .fthero .ftop{margin-top:auto;padding-block:clamp(14px,1.8vw,24px) clamp(34px,4vw,56px)}
  .fthero .crumb,.fthero .crumb a{color:#9FB4C8}
  .fthero .crumb a:hover{color:var(--accent-2)}
  .fthero .crumb b{color:#C6D5E2}
  .fthero .fkick{color:#9FB4C8}
  .fthero .fkick a{color:var(--accent-2)}
  .fthero .fkick i{color:rgba(255,255,255,.3)}
  .fthero .ftitle{color:#FFFFFF;text-shadow:0 1px 26px rgba(6,17,29,.5)}
  .fthero .fstand{color:#D7E3EE;max-width:80ch}

  /* The masthead ends on the writing. Who wrote it and where to send it both
     live in the rail beside the article, not over the photograph. */
  .fbyn{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
  .fbyr{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);margin-top:3px}

  /* The enquiry form's guard field. It was never given a rule, so it rendered
     as a visible, labelled input in the middle of the form — anyone who filled
     it in had their enquiry turned away. display:none rather than off-screen,
     because password managers fill what is merely off-screen. */
  .et-hp{display:none !important}

  .fshare{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .fsharel{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);margin-right:2px}
  /* Service tiles: soft rounded squares, the shape these buttons conventionally
     take. Auto-width while a button carries its name in type, a clean square
     once an icon is in place. */
  .fsharea{appearance:none;cursor:pointer;display:inline-flex;align-items:center;
    justify-content:center;gap:7px;
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    border:1px solid var(--line);border-radius:10px;background:var(--surface);
    color:var(--ink-2);padding:9px 12px;text-decoration:none;
    transition:border-color .16s ease,color .16s ease,box-shadow .16s ease}
  .fsharea:hover{border-color:var(--line-strong);color:var(--ink);
    box-shadow:0 2px 10px rgba(11,23,37,.07)}
  .fsharea:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
  /* With an icon in it the button becomes a square; the name moves to the
     accessible label and the tooltip, so nothing is lost. */
  .fsharea.hasicon,.fcopy{width:42px;height:42px;padding:0}
  .fsharea img{display:block;width:21px;height:21px;object-fit:contain}
  .hasicon .fsharet,.fcopy .fsharet{position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .fglyph{display:block;flex:0 0 auto}
  .fglyph-done,.fcopy.done .fglyph{display:none}
  .fcopy.done .fglyph-done{display:block}
  .fcopy.done{border-color:var(--accent);color:var(--accent)}

  /* The writing, with the contents rail beside it. */
  /* Contents on the left, the writing in the middle, and on a wide screen a
     third column for the invitation to talk. Below 1200px that column drops
     under the article, which is where someone finishing it is looking anyway. */
  .ftgrid{display:grid;gap:clamp(26px,3vw,42px)}
  @media (min-width:1060px){
    .ftgrid{grid-template-columns:174px minmax(0,1fr);align-items:start}
    .fside{grid-column:2}
  }
  @media (min-width:1200px){
    .ftgrid{grid-template-columns:174px minmax(0,1fr) 268px}
    .fside{grid-column:auto}
  }

  .ftoc{font-family:var(--mono)}
  @media (min-width:1060px){.ftoc{position:sticky;top:96px}}
  .ftocbox > summary{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
    cursor:pointer;padding-bottom:10px;border-bottom:1px solid var(--line);list-style:none}
  .ftocbox > summary::-webkit-details-marker{display:none}
  .ftocbox > summary::after{content:'+';float:right;color:var(--line-strong)}
  .ftocbox[open] > summary::after{content:'–'}
  @media (min-width:1060px){
    .ftocbox > summary{cursor:default;pointer-events:none}
    .ftocbox > summary::after{content:''}
  }
  /* A hairline runs the length of the list and the section being read takes it
     over in the accent colour — the reader's place, shown rather than counted. */
  .ftocbox ol{list-style:none;margin:12px 0 0;padding:0;border-left:1px solid var(--line)}
  .ftocbox li{margin:0}
  .ftocbox a{display:block;margin-left:-1px;padding:7px 0 7px 13px;
    border-left:2px solid transparent;
    font-size:12.5px;line-height:1.45;color:var(--ink-2);text-decoration:none;
    transition:color .16s ease,border-color .16s ease}
  .ftocbox a:hover{color:var(--ink)}
  .ftocbox a.on{border-left-color:var(--accent);color:var(--accent);font-weight:500}
  /* A long list scrolls inside the rail rather than running off the screen.
     The height is set outright rather than left to flex: the list lives inside
     a <details>, and a details element does not pass shrinking on to what it
     contains, so a flexed rail left the list at full height and painted it
     over the byline below. The 380px covers the sticky offset, the heading,
     the byline and share blocks under the list, and a margin at the foot. The
     script replaces this with a measured height, so the list runs to the foot
     of the screen whatever is under it; this is what stands before it runs. */
  @media (min-width:1060px){
    .ftocbox ol{overflow-y:auto;max-height:max(140px,calc(100vh - 380px));
      scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;
      overscroll-behavior:contain}
    .ftocbox ol::-webkit-scrollbar{width:6px}
    .ftocbox ol::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
    .ftocbox ol::-webkit-scrollbar-track{background:transparent}
  }
  .frailby{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);flex-shrink:0}
  .ftoc > .frailby:first-child{margin-top:0;padding-top:0;border-top:0}
  .frailk{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
  .fshare-rail{margin-top:16px;gap:6px;flex-shrink:0}
  .fshare-rail .fsharel{flex-basis:100%;margin-bottom:4px}

  /* ---------- the column beside the article ---------- */
  .fside{display:flex;flex-direction:column;gap:16px;align-self:start}
  @media (min-width:1200px){.fside{position:sticky;top:96px}}
  .fcard{border:1px solid var(--line);background:var(--surface-2);
    padding:clamp(18px,1.9vw,24px)}
  .fcardk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-3);margin:0 0 11px}
    /* .sec-prefixed: the section heading rule has the same weight and would
     otherwise win on order, blowing this up to a section title. */
  .sec .fcardh{font-family:var(--display);font-size:19px;line-height:1.22;font-weight:700;
    letter-spacing:-0.015em;color:var(--ink);margin:0 0 10px;max-width:none}
  .fcardp{font-size:14.5px;line-height:1.56;color:var(--ink-2);margin:0}
    /* The same button as the one in the header, so it reads as one family. */
  .fcardbtn{display:block;text-align:center;margin-top:17px;
    background:var(--accent-2);border:1px solid var(--accent-2);color:#0B1725;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
    padding:13px 14px;text-decoration:none;transition:filter .16s ease}
  .fcardbtn:hover{filter:brightness(1.08)}
  .fcardbtn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
  /* Named rather than badged: these are other people's marks, not ours. */
  .fai{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .fai a{display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    border:1px solid var(--line);border-radius:10px;background:var(--surface);
    color:var(--ink-2);padding:9px 12px;text-decoration:none;
    transition:border-color .16s ease,color .16s ease,box-shadow .16s ease}
  .fai a.hasicon{width:44px;height:44px;padding:0}
  .fai a img{display:block;width:22px;height:22px;object-fit:contain}
  .fai a:hover{border-color:var(--line-strong);color:var(--ink);
    box-shadow:0 2px 10px rgba(11,23,37,.07)}
  .fai a:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

  /* A tile holding someone else's mark keeps a light face whatever the theme:
     a logo drawn in black would otherwise disappear against a dark panel, and
     recolouring other people's marks is not ours to do. */
  .fsharea.hasicon,.fai a.hasicon,.fshare .fcopy{background:#FFFFFF;
    border-color:rgba(11,23,37,.14);color:#2A3F55}
  .fsharea.hasicon:hover,.fai a.hasicon:hover,.fshare .fcopy:hover{
    border-color:rgba(11,23,37,.32);color:#0B1725}
  .fshare .fcopy.done{border-color:var(--accent);color:var(--accent)}

  /* ---------- post body ---------- */
  /* --out is how far a figure, a table or a quote may lean out of the measure
     and into the margin beside it. */
  /* Nothing leans out of the measure until there is a margin to lean into. */
  .artbody{max-width:70ch;--out:0px}
  @media (min-width:1060px){.artbody{--out:clamp(0px,7vw,128px)}}
  /* Once the third column is there, the margin a figure used to lean into is
     spoken for. */
  @media (min-width:1200px){.artbody{--out:0px}}
  .artbody.hascap > p:first-child::first-letter{float:left;font-family:var(--display);
    font-size:3.5em;line-height:.8;font-weight:800;color:var(--ink);
    margin:7px 11px 0 0;padding:0}
  @media (max-width:560px){.artbody.hascap > p:first-child::first-letter{font-size:2.8em;margin-right:9px}}
  .artbody figure,.artbody .wp-block-image,.artbody table,.artbody .wideout{
    width:calc(100% + var(--out));margin-right:calc(var(--out) * -1);max-width:none}
  /* Prefixed with .sec because the section heading rule further down the file
     has the same weight and would otherwise win on order, blowing the body
     headings up to the size of a section title. */
  /* max-width:none because the section-heading rule caps itself at 20ch; a
     body heading is governed by the measure it sits in, not by that. */
  .sec .artbody h2{font-size:clamp(19px,2.1vw,24px);line-height:1.2;font-weight:800;
    letter-spacing:-0.016em;max-width:none;margin:clamp(34px,4vw,48px) 0 13px}
  .sec .artbody h3{font-size:clamp(16px,1.7vw,18.5px);line-height:1.32;font-weight:700;
    margin:clamp(25px,2.7vw,31px) 0 9px}
  .sec .artbody h4{font-size:16px;font-weight:700;margin:22px 0 8px}
  .artbody p{font-size:16.5px;line-height:1.72;color:var(--ink-2);margin-bottom:16px}
  .artbody ul{margin:0 0 20px;padding-left:19px}
  .artbody ol{margin:0 0 20px;padding-left:22px}
  .artbody li{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin-bottom:7px}
  .artbody li > ul,.artbody li > ol{margin:7px 0 0}
  .artbody > *:first-child{margin-top:0}
  .artbody > *:last-child{margin-bottom:0}

  /* Imported writing brings markup the hand-built pages never used — figures,
     quotes, tables, numbered lists, block-editor wrappers. Styled here so an
     imported post reads like the rest of the site rather than like raw HTML. */
  .sec .artbody h5,.sec .artbody h6{font-size:15px;font-weight:700;margin:20px 0 7px;color:var(--ink)}
  .artbody strong,.artbody b{color:var(--ink);font-weight:700}
  .artbody a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
  .artbody a:hover{text-decoration-color:var(--accent-2)}
  .artbody img{max-width:100%;height:auto;display:block}
  .artbody figure{margin:28px 0}
  .artbody figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
    color:var(--ink-3);margin-top:9px}
  /* A pull quote, not an indent: it leans out of the measure to the left so it
     reads as a break in the column rather than a nested aside. */
  .artbody blockquote{margin:clamp(30px,3.6vw,46px) 0;padding:0 0 0 clamp(14px,1.6vw,22px);
    border-left:3px solid var(--accent-2)}
  @media (min-width:1060px){.artbody blockquote{margin-left:clamp(-64px,-3.4vw,0px)}}
  .artbody blockquote p{font-family:var(--display);font-size:clamp(19px,2.2vw,26px);line-height:1.3;
    font-weight:700;letter-spacing:-0.015em;color:var(--ink);margin-bottom:12px}
  .artbody blockquote p:last-child{margin-bottom:0}
  .artbody blockquote cite{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;font-style:normal;color:var(--ink-3);margin-top:12px}
  .artbody hr{border:0;border-top:1px solid var(--line);margin:34px 0}
  .artbody pre{overflow-x:auto;background:var(--surface-2);border:1px solid var(--line);
    padding:16px;margin:0 0 20px;font-family:var(--mono);font-size:13px;line-height:1.6}
  .artbody code{font-family:var(--mono);font-size:.92em}
  .artbody table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
  .artbody th,.artbody td{border:1px solid var(--line);padding:9px 11px;text-align:left;
    vertical-align:top;color:var(--ink-2)}
  .artbody th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);font-weight:400}
  /* The block editor's columns were a narrow writing aid, not a layout. */
  .artbody .wp-block-columns{display:block}
  .artbody .wp-block-column{min-width:0;flex-basis:auto !important}
  .artbody .wp-block-image,.artbody .wp-block-embed{margin:28px 0}
  .artbody .wp-block-embed iframe{max-width:100%}


  /* ---------- the case study gate ---------- */
  /* The remainder still renders; it is just put out of reach and out of focus. */
  .locked{filter:blur(5px);opacity:.5;user-select:none;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.3) 74%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.3) 74%,transparent 100%)}
  .csbody .locked{max-height:460px;overflow:hidden}
  @media (prefers-reduced-motion:no-preference){.locked{transition:filter .2s ease}}

  .gatebar{border:1px solid var(--line-strong);background:var(--surface);
    padding:clamp(24px,3vw,34px);margin-top:-40px;position:relative;z-index:1;
    max-width:74ch;scroll-margin-top:90px}
  .gatebar .gatek{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3)}
  .gatebar h3{font-size:clamp(20px,2.3vw,26px);line-height:1.2;font-weight:700;margin:10px 0 10px;max-width:28ch}
  .gatebar p{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:62ch}
  .gatebtn{appearance:none;cursor:pointer;margin-top:20px;
    border:1px solid var(--ink);background:var(--ink);color:var(--surface);
    font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    padding:13px 22px;transition:opacity .16s ease}
  .gatebtn:hover{opacity:.86}
  .gatebtn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

  .gatemodal{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%}
  /* Hold the page still behind the dialog. */
  html.gate-open{overflow:hidden}
  .gatemodal::backdrop{background:rgba(6,17,29,.68);backdrop-filter:blur(3px)}
  .gatebox{position:relative;background:var(--surface);border:1px solid var(--line-strong);
    padding:clamp(24px,3.4vw,36px)}
  .gatebox .gatek{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3)}
  .gatebox h2{font-size:clamp(23px,2.8vw,30px);line-height:1.15;font-weight:800;margin:10px 0 0}
  .gatebox .gatelede{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin-top:12px;max-width:50ch}
  .gatebox .qform{margin-top:22px;max-width:none}
  .gatebox .qform :is(input,select)[aria-invalid="true"]{border-color:#B3261E}
  .gatebox .qform :is(input,select):user-invalid{border-color:#B3261E}
  .gateclose{position:absolute;top:10px;right:12px;appearance:none;background:none;border:0;
    cursor:pointer;font-size:26px;line-height:1;color:var(--ink-3);padding:6px 8px}
  .gateclose:hover{color:var(--ink)}
  .gateclose:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
  /* Scoped: a bare .qerror later in the sheet styles errors inside the form grid. */
  .gatebox > .qerror{font-family:var(--mono);font-size:12.5px;color:#B3261E;
    border-left:2px solid #B3261E;padding-left:12px;margin-top:18px}
  @media (max-width:560px){.gatemodal .qform{grid-template-columns:1fr}}
  @media (max-width:560px){.flabel{width:100%;margin-bottom:2px}}
  /* A section imported before band-soft existed, still sitting right under a
     media hero: treat it as the soft band so two dark blocks never stack. */
  .cshead + .band-dark{background:var(--surface-2);color:var(--ink);border-block:1px solid var(--line)}
  .cshead + .band-dark .eyebrow.on-dark{color:var(--ink-3)}
  .cshead + .band-dark .eyebrow.on-dark::before{background:var(--line-strong)}
  .cshead + .band-dark .sec .sub{color:var(--ink-2)}
  .band-dark{background:var(--panel);color:var(--on-panel)}
  .sec{padding-block:clamp(38px,5.2vw,68px)}
  .sec h2{font-size:clamp(28px,4.2vw,46px);line-height:1.08;max-width:20ch;margin:13px 0 0}
  .sec .sub{color:var(--ink-2);max-width:62ch;margin-top:14px;font-size:17px}
  .band-dark .sec .sub{color:var(--on-panel-2)}

  /* ---------- two paths ---------- */
  .paths{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:30px;border:1px solid var(--line)}
  .path{background:var(--surface);padding:clamp(26px,3.4vw,42px);display:flex;flex-direction:column;gap:14px}
  .path.alt{background:var(--surface-2)}
  .path .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .path h3{font-size:clamp(21px,2.6vw,28px);line-height:1.15}
  .path p{color:var(--ink-2);font-size:16px}
  .path ul{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
  .path li{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--line-strong);padding:5px 9px}
  .path .go{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:13px;color:var(--accent);text-decoration:none;letter-spacing:.03em}
  .path .go:hover{text-decoration:underline}
  @media (max-width:800px){.paths{grid-template-columns:1fr}}

  /* ---------- method ---------- */
  .method{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--panel-line);margin-top:32px;border:1px solid var(--panel-line)}
  .m{background:var(--panel);padding:clamp(22px,2.8vw,32px)}
  .m .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);display:block;margin-bottom:12px}
  .m h3{font-size:19px;line-height:1.25;margin-bottom:9px;color:var(--on-panel)}
  .m p{font-size:15.5px;color:var(--on-panel-2);line-height:1.58}
  .m.span2{grid-column:1/-1;background:var(--panel-2)}
  @media (max-width:760px){.method{grid-template-columns:1fr}.m.span2{grid-column:auto}}

  .loopwrap{margin-top:32px;overflow-x:auto}
  .loopwrap svg{display:block;min-width:600px;max-width:100%;height:auto}
  .loopcap{font-family:var(--mono);font-size:12px;color:var(--on-panel-3);margin-top:14px;letter-spacing:.02em}

  /* ---------- services ---------- */
  .svc{margin-top:28px;border-top:1px solid var(--line)}
  .svcrow{
    display:grid;grid-template-columns:minmax(180px,.9fr) 2.2fr;gap:clamp(16px,4vw,48px);
    padding-block:20px;border-bottom:1px solid var(--line);align-items:start;
  }
  .svcrow h3{font-size:clamp(19px,2.3vw,24px);line-height:1.2}
  .svcrow p{color:var(--ink-2);font-size:16px;max-width:60ch}
  .svcrow .stack{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:10px;letter-spacing:.03em}
  @media (max-width:700px){.svcrow{grid-template-columns:1fr;gap:10px}}

  /* ---------- proof ---------- */
  .cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:30px;border:1px solid var(--line)}
  .case{background:var(--surface);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column}
  .case .sector{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
  .case h3{font-size:21px;line-height:1.18;margin-bottom:16px}
  .case .ba{border-left:2px solid var(--line-strong);padding-left:14px;margin-bottom:14px}
  .case .ba .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px}
  .case .ba p{font-size:15px;color:var(--ink-2);line-height:1.55}
  .case .go{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--accent);text-decoration:none}
  .case .go:hover{text-decoration:underline}
  @media (max-width:900px){.cases{grid-template-columns:1fr}}

  /* ---------- work archive: photo cards ---------- */
  .wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);margin-top:30px}
  @media (max-width:980px){.wcards{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:620px){.wcards{grid-template-columns:1fr}}

  .wcard{position:relative;overflow:hidden;isolation:isolate;display:flex;
    min-height:clamp(290px,29vw,360px);background:#08161F;
    border:1px solid var(--line);text-decoration:none;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
  .wcard[hidden]{display:none}
  .wart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
    opacity:.5;transform:scale(1.02);
    transition:transform .55s cubic-bezier(.2,.6,.2,1),opacity .35s ease}
  .wscrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(6,17,29,.42) 0%,rgba(6,17,29,.74) 46%,rgba(6,17,29,.93) 100%);
    transition:opacity .35s ease}
  .wbody{position:relative;width:100%;display:flex;flex-direction:column;justify-content:flex-end;
    padding:clamp(22px,2.4vw,28px)}
  .wsector{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--accent-2);margin-bottom:12px}
  .wtitle{font-size:clamp(19px,2vw,23px);line-height:1.18;font-weight:700;color:#FFFFFF;margin:0 0 12px}
  .wlede{font-size:14.5px;line-height:1.55;color:#C6D5E2;
    display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .wgo{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
    color:var(--accent-2);display:inline-flex;align-items:center;gap:8px}
  .wgo i{font-style:normal;transition:transform .3s ease}

  .wcard:hover,.wcard:focus-visible{transform:translateY(-4px);border-color:var(--accent-2);
    box-shadow:0 16px 36px rgba(6,17,29,.3)}
  .wcard:hover .wart,.wcard:focus-visible .wart{transform:scale(1.09);opacity:.62}
  .wcard:hover .wscrim,.wcard:focus-visible .wscrim{opacity:.88}
  .wcard:hover .wgo i,.wcard:focus-visible .wgo i{transform:translateX(5px)}
  .wcard:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
  /* On a dark band the default edge disappears, so borrow the panel line. */
  .band-dark .wcard{border-color:var(--panel-line)}

  @media (prefers-reduced-motion:reduce){
    .wcard,.wart,.wgo i,.wscrim{transition:none}
    .wcard:hover,.wcard:focus-visible{transform:none}
    .wcard:hover .wart,.wcard:focus-visible .wart{transform:scale(1.02)}
  }

  /* ---------- standards ---------- */
  .qa{margin-top:28px;border-top:1px solid var(--panel-line)}
  .qa details{border-bottom:1px solid var(--panel-line)}
  .qa summary{
    cursor:pointer;list-style:none;padding-block:18px;
    font-family:var(--display);font-weight:700;font-size:clamp(17px,2.1vw,21px);
    letter-spacing:-0.015em;color:var(--on-panel);
    display:flex;align-items:center;gap:16px;
  }
  .qa summary::-webkit-details-marker{display:none}
  .qa summary::after{
    content:"+";margin-left:auto;font-family:var(--mono);font-weight:400;
    font-size:20px;color:var(--accent-2);flex:none;line-height:1;
  }
  .qa details[open] summary::after{content:"\2013"}
  .qa .ans{padding:0 0 24px;max-width:70ch;color:var(--on-panel-2);font-size:16px}

  /* ---------- engagements ---------- */
  .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:30px;border:1px solid var(--line)}
  .way{background:var(--surface);padding:clamp(22px,2.6vw,32px)}
  .way .t{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
  .way h3{font-size:20px;margin-bottom:10px}
  .way p{font-size:15.5px;color:var(--ink-2)}
  @media (max-width:860px){.ways{grid-template-columns:1fr}}

  /* ---------- close ---------- */
  .close{padding-block:clamp(42px,5.4vw,74px)}
  .close h2{font-size:clamp(28px,4.6vw,50px);line-height:1.05;max-width:18ch}
  .close p{color:var(--on-panel-2);margin-top:20px;max-width:52ch;font-size:17.5px}
  .close .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

  /* ---------- footer ---------- */
  footer.site{background:var(--ground);border-top:1px solid var(--line);padding-block:32px 40px;font-size:14.5px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
  .fgrid h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;font-weight:500}
  .fgrid a{display:block;color:var(--ink-2);text-decoration:none;padding-block:4px}
  .fgrid a:hover{color:var(--accent)}
  .fgrid address{font-style:normal;color:var(--ink-2);line-height:1.7}
  .fbot{
    display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;
    margin-top:28px;padding-top:18px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.03em;
  }
  .fbot .badge{border:1px solid var(--line-strong);padding:4px 9px}
  @media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
  @media (max-width:520px){.fgrid{grid-template-columns:1fr}}

  .draft{
    background:var(--hdr-bg);border-bottom:1px solid var(--hdr-line);
    font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--hdr-ink-2);
    padding-block:9px;
  }
  /* ---------- service pages ---------- */
  .crumb{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink-3);padding-block:18px 0}
  .crumb a{color:var(--ink-3);text-decoration:none}
  .crumb a:hover{color:var(--accent)}
  .crumb b{color:var(--ink-2);font-weight:400}

  .shero{padding-block:clamp(18px,2.4vw,28px) clamp(30px,4vw,54px)}
  .shero h1{font-size:clamp(34px,5.6vw,64px);line-height:1.03;font-weight:800;max-width:15ch;margin:16px 0 22px}
  .shero .lede{font-size:clamp(17px,1.9vw,20px);color:var(--ink-2);max-width:58ch;line-height:1.55}
  .shero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

  .chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0}
  .chips li{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-2);border:1px solid var(--line-strong);padding:5px 9px}

  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-line);border:1px solid var(--panel-line);margin-top:30px}
  .quote{background:var(--panel);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column}
  .quote .mark{display:block;font-family:var(--display);font-weight:700;font-size:26px;line-height:.8;color:var(--accent-2);margin-bottom:14px}
  .quote p{font-size:16.5px;line-height:1.5;color:var(--on-panel)}
  .quote .who{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-panel-3);margin-top:auto;padding-top:18px}
  @media (max-width:880px){.quotes{grid-template-columns:1fr}}

  .caps{display:grid;grid-template-columns:repeat(2,1fr);margin-top:30px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .caps .cap{background:var(--surface);padding:clamp(22px,2.6vw,30px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .caps .cap:last-child:nth-child(odd){grid-column:1 / -1}
  .caps .cap .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
  .caps .cap h3{font-size:18.5px;line-height:1.25;margin-bottom:9px}
  .caps .cap p{font-size:15.5px;color:var(--ink-2)}
  @media (max-width:740px){.caps{grid-template-columns:1fr}}

  .diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-line);border:1px solid var(--panel-line);margin-top:30px}
  .diff{background:var(--panel);padding:clamp(22px,2.6vw,30px)}
  .diff .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);display:block;margin-bottom:12px}
  .diff h3{font-size:18.5px;line-height:1.25;margin-bottom:9px;color:var(--on-panel)}
  .diff p{font-size:15.5px;color:var(--on-panel-2);line-height:1.58}
  @media (max-width:880px){.diffs{grid-template-columns:1fr}}

  .csgo{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
    color:var(--accent);text-decoration:none}
  .csgo:hover{text-decoration:underline}
  .band-dark .csgo{color:var(--accent-2)}
  .band-dark .cases{background:var(--panel-line);border-color:var(--panel-line)}
  .band-dark .case{background:var(--panel)}
  .band-dark .case .sector{color:var(--accent-2)}
  .band-dark .case h3{color:var(--on-panel)}
  .band-dark .case .ba{border-left-color:var(--panel-line)}
  .band-dark .case .ba .lbl{color:var(--on-panel-3)}
  .band-dark .case .ba p{color:var(--on-panel-2)}
  .band-dark .case .go{color:var(--accent-2)}

  /* ---------- case study: compact dossier ---------- */
  /* ---------- case study hero image ---------- */
  .cshead{position:relative;overflow:hidden;isolation:isolate;background:#08161F}
  .cshead .csart{position:absolute;inset:0;width:100%;height:100%;z-index:-2;
    object-fit:cover;pointer-events:none}
  .cshead .csscrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      linear-gradient(100deg,rgba(6,17,29,.95) 0%,rgba(6,17,29,.9) 38%,rgba(6,17,29,.74) 54%,rgba(6,17,29,.42) 68%,rgba(6,17,29,.6) 84%,rgba(6,17,29,.74) 100%),
      linear-gradient(0deg,rgba(6,17,29,.88) 0%,rgba(6,17,29,.3) 38%,rgba(6,17,29,0) 64%)}
  .cshead .crumb{color:#8CA2B6}
  .cshead .crumb a{color:#8CA2B6}
  .cshead .crumb a:hover{color:var(--accent-2)}
  .cshead .crumb b{color:#C6D5E2}
  .cshead .meta{color:#9FB4C8}
  .cshead .meta b{color:var(--accent-2)}
  .cshead h1{color:#FFFFFF}
  .cshead .lede{color:#D6E1EB}
  .cshead .btn{color:#E7EEF5;border-color:rgba(231,238,245,.45)}
  .cshead .btn:hover{background:#E7EEF5;color:#0B1725;border-color:#E7EEF5}
  .cshead .btn.solid{background:var(--accent-2);border-color:var(--accent-2);color:#0B1725}
  .cshead .btn.solid:hover{background:#8FD000;border-color:#8FD000}
  .cshead .metrail{border-top-color:var(--accent-2)}
  .cshead .metrail .mrow{border-bottom-color:rgba(231,238,245,.22)}
  .cshead .metrail .mv{color:var(--accent-2)}
  .cshead .metrail .mv.sm{color:#FFFFFF}
  .cshead .metrail .ml{color:#8CA2B6}

  /* The same treatment on a practice hero. */
  .cshead .csvid{object-fit:cover;background:#08161F}
  .cshead .shero{padding-bottom:clamp(34px,4.4vw,58px)}
  .cshead .eyebrow{color:#9FB4C8}
  .cshead .eyebrow::before{background:rgba(231,238,245,.45)}
  .cshead .shero h1{color:#FFFFFF}
  .cshead .shero .lede{color:#D6E1EB}
  .cshead .chips li{color:#C6D5E2;border-color:rgba(231,238,245,.3)}
  @media (prefers-reduced-motion:reduce){.cshead .csvid{display:none}}

  .csh{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.72fr);
    gap:clamp(24px,4.4vw,56px);align-items:end;
    padding-block:clamp(14px,2vw,22px) clamp(24px,3.2vw,38px)}
  @media (max-width:920px){.csh{grid-template-columns:1fr;align-items:start;gap:26px}}
  .csh .meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .csh .meta b{color:var(--accent);font-weight:400}
  .csh h1{font-size:clamp(29px,4.3vw,50px);line-height:1.05;font-weight:800;letter-spacing:-0.03em;
    max-width:18ch;margin:13px 0 15px}
  .csh .lede{font-size:clamp(15.5px,1.65vw,18px);color:var(--ink-2);max-width:60ch;line-height:1.55}
  .csh .row{display:flex;flex-wrap:wrap;gap:11px;margin-top:20px}
  .metrail{border-top:2px solid var(--accent)}
  .metrail .mrow{padding-block:11px;border-bottom:1px solid var(--line)}
  .metrail .mrow .mv{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,32px);
    letter-spacing:-0.03em;color:var(--accent);display:block;line-height:1.05}
  .metrail .mv.sm{font-size:clamp(17px,1.8vw,21px);color:var(--ink);letter-spacing:-0.02em}
  .metrail .mrow .ml{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);display:block;margin-top:6px}

  .csgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,272px);
    gap:clamp(26px,4.2vw,60px);align-items:start}
  @media (max-width:980px){.csgrid{grid-template-columns:1fr;gap:30px}}
  .csgrid.solo{grid-template-columns:minmax(0,1fr)}
  .csbody{max-width:70ch}
  .csect{padding-block:clamp(24px,2.8vw,38px);border-top:1px solid var(--line)}
  .csect:first-child{border-top:0;padding-top:0}
  .csect .eyebrow{margin-bottom:0}
  .csect h2{font-size:clamp(23px,2.7vw,32px);line-height:1.13;letter-spacing:-0.025em;margin:12px 0 16px}
  .csect p{font-size:16.5px;line-height:1.66;color:var(--ink-2);margin-bottom:15px}
  .csect p:last-child{margin-bottom:0}
  .csect .lead{color:var(--ink);font-weight:700}

  .csaside{position:sticky;top:92px}
  @media (max-width:980px){.csaside{position:static}}
  .stk{border-top:2px solid var(--accent);padding:0}
  .stk .sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:13px 0;border-bottom:1px solid var(--line)}
  .stk .sh .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .stk .tags{display:flex;flex-wrap:wrap;gap:9px 14px;padding-top:16px}
  .stk .tg{font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:.01em;color:var(--ink-2)}
  .stk .tg i{font-style:normal;color:var(--accent)}
  .stk .tg:nth-child(-n+2){color:var(--ink)}
  .stk .stkn{margin-top:18px;padding-top:13px;border-top:1px solid var(--line);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

  .endgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,4vw,56px);align-items:start}
  @media (max-width:860px){.endgrid{grid-template-columns:1fr;gap:28px}}
  .endgrid h3{font-size:clamp(20px,2.4vw,26px);line-height:1.15;margin-bottom:10px;color:var(--on-panel)}
  .endgrid > div > p{color:var(--on-panel-2);font-size:15.5px;max-width:46ch;line-height:1.56}
  .endgrid .act{margin-top:18px}
  .rellist{border-top:1px solid var(--panel-line)}
  .rellist a{display:block;border-bottom:1px solid var(--panel-line);padding:14px 0;text-decoration:none}
  .rellist a:hover h4{color:var(--accent-2)}
  .rellist .s{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--on-panel-3);display:block;margin-bottom:6px}
  .rellist h4{font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.25;
    letter-spacing:-0.01em;color:var(--on-panel);transition:color .15s}

  /* ---------- case study detail ---------- */
  .cshero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);
    gap:clamp(26px,5vw,64px);align-items:start;
    padding-block:clamp(18px,2.4vw,28px) clamp(34px,4.6vw,60px)}
  .cshero h1{font-size:clamp(32px,4.8vw,56px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;
    max-width:17ch;margin:14px 0 20px}
  .cshero .lede{font-size:clamp(16.5px,1.8vw,19px);color:var(--ink-2);max-width:56ch;line-height:1.58}
  .cshero .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  @media (max-width:900px){.cshero{grid-template-columns:1fr}}

  .factcard{border:1px solid var(--line);background:var(--surface);padding:clamp(20px,2.3vw,26px);margin-top:6px}
  .factrow{padding-block:14px;border-top:1px solid var(--line)}
  .factrow:first-child{border-top:0;padding-top:0}
  .factrow:last-child{padding-bottom:0}
  .factrow .ft{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);display:block;margin-bottom:7px}
  .factrow .fv{font-size:15px;color:var(--ink);line-height:1.45;display:block}
  .factrow .fv a{color:var(--accent);text-decoration:none}
  .factrow .fv a:hover{text-decoration:underline}
  .factrow .chips{margin:0}
  .factrow .chips li{font-size:11px;padding:4px 7px;border-color:var(--line)}

  .sect{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
    gap:clamp(20px,4vw,56px);align-items:start}
  @media (max-width:900px){.sect{grid-template-columns:1fr;gap:16px}}
  .sect .lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent);position:sticky;top:92px}
  .sect .lab .num{display:block;color:var(--ink-3);margin-bottom:7px;letter-spacing:.1em}
  .band-dark .sect .lab{color:var(--accent-2)}
  .band-dark .sect .lab .num{color:var(--on-panel-3)}
  @media (max-width:900px){.sect .lab{position:static}}

  .body h2{font-size:clamp(24px,3.1vw,36px);line-height:1.1;letter-spacing:-0.025em;margin-bottom:20px;max-width:18ch}
  .body > p{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin-bottom:15px;max-width:64ch}
  .body > p:last-child{margin-bottom:0}
  .band-dark .body h2{color:var(--on-panel)}
  .band-dark .body > p{color:var(--on-panel-2)}

  .buildlist{list-style:none;margin:4px 0 0;padding:0}
  .buildlist li{border-top:1px solid var(--line);padding-block:20px;
    display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:clamp(12px,2.4vw,28px)}
  .buildlist li:first-child{border-top:0;padding-top:0}
  .buildlist li:last-child{padding-bottom:0}
  .buildlist .bk{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .buildlist h3{font-size:18.5px;line-height:1.25;margin-bottom:8px}
  .buildlist p{font-size:15.5px;color:var(--ink-2);line-height:1.56;max-width:58ch}
  @media (max-width:700px){.buildlist li{grid-template-columns:1fr;gap:9px}}

  .ticks{list-style:none;margin:0;padding:0;max-width:62ch}
  .ticks li{position:relative;padding-left:30px;padding-block:13px;border-top:1px solid var(--line);
    font-size:16px;color:var(--ink-2);line-height:1.5}
  .ticks li:first-child{border-top:0;padding-top:0}
  .ticks li::before{content:"";position:absolute;left:3px;top:19px;width:12px;height:6px;
    border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  .ticks li:first-child::before{top:6px}
  .band-dark .ticks li{color:var(--on-panel-2);border-top-color:var(--panel-line)}
  .band-dark .ticks li::before{border-color:var(--accent-2)}

  .statbar{display:grid;gap:1px;background:var(--panel-line);border:1px solid var(--panel-line);margin-top:8px}
  .statbar .st{background:var(--panel);padding:clamp(22px,2.6vw,30px) 22px}
  .statbar .v{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.2vw,40px);letter-spacing:-0.035em;overflow-wrap:break-word;
    color:var(--accent-2);display:block;line-height:1;margin-bottom:12px}
  .statbar .l{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--on-panel-2);line-height:1.5;display:block}
  @media (max-width:820px){.statbar{grid-template-columns:repeat(2,1fr) !important}}
  @media (max-width:460px){.statbar{grid-template-columns:1fr !important}}

  .worklist{display:grid;grid-template-columns:repeat(2,1fr);margin-top:26px;
    border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .worklist a{display:block;background:var(--surface);padding:20px 22px;text-decoration:none;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .15s}
  .worklist a:hover{background:var(--surface-2)}
  .worklist .s{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent);display:block;margin-bottom:9px}
  .worklist h4{font-family:var(--display);font-weight:700;font-size:16.5px;line-height:1.28;
    letter-spacing:-0.01em;color:var(--ink);margin-bottom:7px}
  .worklist p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
  .worklist .wgo{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--accent);display:block;margin-top:12px}
  .worklist a:last-child:nth-child(odd){grid-column:1 / -1}
  .band-dark .worklist{border-color:var(--panel-line)}
  .band-dark .worklist a{background:var(--panel);border-color:var(--panel-line)}
  .band-dark .worklist a:hover{background:var(--panel-2)}
  .band-dark .worklist h4{color:var(--on-panel)}
  .band-dark .worklist p{color:var(--on-panel-2)}
  .band-dark .worklist .s,.band-dark .worklist .wgo{color:var(--accent-2)}
  @media (max-width:740px){.worklist{grid-template-columns:1fr}}

  .single-case{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
  .single-case > div{background:var(--surface);padding:clamp(24px,3vw,36px)}
  .single-case .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:12px}
  .single-case h3{font-size:clamp(20px,2.4vw,26px);line-height:1.18;margin-bottom:14px}
  .single-case p{color:var(--ink-2);font-size:16px}
  .single-case .after{background:var(--surface-2)}
  @media (max-width:800px){.single-case{grid-template-columns:1fr}}

  .offer{border:1px solid var(--line);background:var(--surface);padding:clamp(26px,3.4vw,42px);margin-top:30px;display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:center}
  .offer .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
  .offer h3{font-size:clamp(21px,2.6vw,28px);line-height:1.15;margin-bottom:12px}
  .offer p{color:var(--ink-2);font-size:16px;max-width:52ch}
  .offer .act{justify-self:end}
  @media (max-width:760px){.offer{grid-template-columns:1fr}.offer .act{justify-self:start}}

  .modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
  .mod{background:var(--surface);padding:clamp(20px,2.4vw,28px)}
  .mod .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:11px}
  .mod h3{font-size:18px;line-height:1.22;margin-bottom:8px}
  .mod p{font-size:15px;color:var(--ink-2);line-height:1.55}
  @media (max-width:900px){.modgrid{grid-template-columns:1fr 1fr}}
  @media (max-width:600px){.modgrid{grid-template-columns:1fr}}

  .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--panel-line);border:1px solid var(--panel-line);margin-top:30px}
  .spec{background:var(--panel);padding:clamp(20px,2.2vw,26px)}
  .spec h3{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
  .spec ul{list-style:none;margin:0;padding:0}
  .spec li{font-size:14.5px;color:var(--on-panel-2);line-height:1.4;padding-block:9px;border-top:1px solid var(--panel-line)}
  @media (max-width:980px){.specs{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.specs{grid-template-columns:1fr}}

  .connects{margin-top:28px}
  .connects .cap{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-panel-3);margin-bottom:14px}
  .connects .chips li{color:var(--on-panel-2);border-color:var(--panel-line)}
  .connects .chips{margin-top:0}

  .tblwrap{overflow-x:auto;margin-top:28px}
  .tbl{width:100%;min-width:680px;border-collapse:collapse;font-size:15.5px}
  .tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);text-align:left;font-weight:500;padding:0 20px 13px 0;border-bottom:1px solid var(--line-strong)}
  .tbl td{padding:17px 20px 17px 0;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.5}
  .tbl td:first-child{color:var(--ink);font-weight:600;font-family:var(--display);letter-spacing:-0.01em;width:24%}
  .tbl td:last-child{font-family:var(--mono);font-size:13px;color:var(--ink-3);width:24%;padding-right:0}

  .note{border-left:2px solid var(--accent-2);background:var(--panel-2);padding:clamp(22px,2.8vw,32px);margin-top:28px}
  .note h3{font-size:19.5px;color:var(--on-panel);margin-bottom:14px}
  .note ul{margin:0;padding:0;list-style:none}
  .note li{color:var(--on-panel-2);font-size:15.5px;line-height:1.55;padding-block:8px;border-top:1px solid var(--panel-line)}
  .note li:first-child{border-top:none;padding-top:0}
  .note li b{color:var(--on-panel);font-weight:600}

  .certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;list-style:none;padding:0}
  .certs li{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--ink-2);border:1px solid var(--line-strong);padding:8px 12px}
  .certs li b{color:var(--accent);font-weight:500}

  a.svcrow{text-decoration:none;color:inherit}
  a.svcrow:hover h3{color:var(--accent)}
  .svcrow .more{font-family:var(--mono);font-size:12.5px;color:var(--accent);margin-top:12px;display:inline-block;letter-spacing:.03em}
  a.svcrow:hover .more{text-decoration:underline}

  /* ---------- talk to an engineer ---------- */
  .talkgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,64px);align-items:start;margin-top:36px}
  @media (max-width:880px){.talkgrid{grid-template-columns:1fr;gap:38px}}

  .form{display:grid;gap:20px}
  .field{display:grid;gap:8px}
  .field > label,.fieldset > legend{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:0}
  .field input,.field textarea{
    width:100%;padding:13px 15px;border:1px solid var(--line-strong);background:var(--surface);
    color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;border-radius:0;
    transition:border-color .16s ease}
  .field textarea{min-height:128px;resize:vertical}
  .field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
  .field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

  .fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
  .seg{display:flex;flex-wrap:wrap;gap:8px}
  .seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .seg label{
    font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;cursor:pointer;
    border:1px solid var(--line-strong);padding:9px 13px;color:var(--ink-2);
    transition:border-color .16s ease,color .16s ease,background .16s ease}
  .seg label:hover{border-color:var(--ink-3)}
  .seg input:checked + label{border-color:var(--accent);color:var(--accent);background:var(--surface)}
  .seg input:focus-visible + label{outline:2px solid var(--accent-2);outline-offset:2px}

  .form .go{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
  .form button{
    font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
    padding:14px 22px;border:1px solid var(--accent-2);background:var(--accent-2);color:#0B1725;
    cursor:pointer;transition:filter .16s ease}
  .form button:hover{filter:brightness(1.07)}
  .formnote{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-3);margin-top:6px}

  /* ---------- quick contact form ---------- */
  .qform{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;max-width:560px}
  .qform .qf{display:grid;gap:7px}
  .qform .qf.wide{grid-column:1 / -1}
  .qform label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .qform input,.qform select{width:100%;padding:11px 13px;border:1px solid var(--line-strong);background:var(--surface);
    color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;border-radius:0;
    transition:border-color .16s ease}
  .qform select{appearance:none;cursor:pointer;padding-right:34px;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-size:6px 6px,6px 6px;background-position:calc(100% - 18px) 51%,calc(100% - 12px) 51%;background-repeat:no-repeat}
  .qform input::placeholder{color:var(--ink-3)}
  .qform input:focus,.qform select:focus{outline:none;border-color:var(--accent)}
  .qform input:focus-visible,.qform select:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
  .qform .qgo{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:2px}
  .qform button{appearance:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--surface);
    font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;
    transition:opacity .16s ease}
  .qform button:hover{opacity:.86}
  .qnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);line-height:1.6}
  @media (max-width:560px){.qform{grid-template-columns:1fr}}

  .band-dark .qform label,.band-dark .qnote,#close .qform label,#close .qnote{color:var(--on-panel-3)}
  .band-dark .qform input,.band-dark .qform select,#close .qform input,#close .qform select{background:var(--panel-2);border-color:var(--panel-line);color:var(--on-panel)}
  .band-dark .qform input::placeholder,#close .qform input::placeholder{color:var(--on-panel-3)}
  .band-dark .qform select option,#close .qform select option{background:var(--panel-2);color:var(--on-panel)}
  .band-dark .qform input:focus,.band-dark .qform select:focus,#close .qform input:focus,#close .qform select:focus{border-color:var(--accent-2)}
  .band-dark .qform button,#close .qform button{background:var(--accent-2);border-color:var(--accent-2);color:var(--panel)}

  .offer.withform{grid-template-columns:1fr}
  .offer.withform p{max-width:60ch}

  .qsent{border-left:2px solid var(--accent);padding:4px 0 4px 18px;margin-top:22px;max-width:560px}
  .qsent h3{font-size:19px;line-height:1.2;margin-bottom:8px}
  .qsent p{font-size:15px;color:var(--ink-2);line-height:1.56;margin-bottom:8px}
  .qsent p:last-child{margin-bottom:0}
  .band-dark .qsent,#close .qsent{border-left-color:var(--accent-2)}
  .band-dark .qsent h3,#close .qsent h3{color:var(--on-panel)}
  .band-dark .qsent p,#close .qsent p{color:var(--on-panel-2)}

  .sent{border:1px solid var(--accent);background:var(--surface);padding:clamp(24px,3.2vw,36px)}
  .sent .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
  .sent h3{font-size:clamp(20px,2.4vw,26px);line-height:1.15;margin-bottom:12px}
  .sent p{color:var(--ink-2);font-size:16px;margin-bottom:12px}
  .sent p:last-child{margin-bottom:0}

  .rail{display:grid;gap:26px}
  .railcard{border-left:2px solid var(--accent-2);padding-left:20px}
  .railcard h3{font-size:18.5px;line-height:1.25;margin-bottom:10px}
  .railcard p{font-size:15.5px;color:var(--ink-2);line-height:1.55}
  .steps{list-style:none;margin:0;padding:0;counter-reset:st}
  .steps li{position:relative;padding-left:34px;padding-block:9px;color:var(--ink-2);font-size:15.5px;line-height:1.5;border-top:1px solid var(--line)}
  .steps li:first-child{border-top:0;padding-top:0}
  .steps li::before{
    counter-increment:st;content:counter(st);position:absolute;left:0;top:9px;
    font-family:var(--mono);font-size:11px;color:var(--accent);
    border:1px solid var(--line-strong);width:20px;height:20px;display:grid;place-items:center}
  .steps li:first-child::before{top:0}
  .railmeta{font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--ink-3)}
  .railmeta a{color:var(--accent);text-decoration:none}
  .railmeta a:hover{text-decoration:underline}

  a.cap.caplink{text-decoration:none;color:inherit;transition:background .16s ease}
  a.cap.caplink:hover{background:var(--surface-2)}
  a.cap.caplink:hover h3{color:var(--accent)}
  .capgo{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--accent);display:block;margin-top:14px}
  a.cap.caplink:hover .capgo{text-decoration:underline}

  .phases{list-style:none;margin:32px 0 0;padding:0;position:relative}
  .phases::before{content:"";position:absolute;left:18px;top:26px;bottom:26px;width:1px;background:var(--line)}
  .phases li{position:relative;padding-left:60px;padding-block:17px}
  .phases .n{position:absolute;left:0;top:16px;width:37px;height:37px;border-radius:50%;
    border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;
    font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--accent)}
  .phases h3{font-size:18.5px;line-height:1.25;margin-bottom:7px}
  .phases p{color:var(--ink-2);font-size:15.5px;line-height:1.55;max-width:66ch}
  .phases .when{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-3);display:block;margin-top:8px}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--panel-line);
    border:1px solid var(--panel-line);margin-top:30px}
  .stat{background:var(--panel);padding:26px 20px 28px}
  .stat .v{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,40px);letter-spacing:-0.03em;
    color:var(--accent-2);line-height:1;display:block;margin-bottom:12px}
  .stat .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-panel-2);line-height:1.5}
  @media (min-width:821px){.statbar.n1{grid-template-columns:1fr}.statbar.n2{grid-template-columns:repeat(2,1fr)}.statbar.n3{grid-template-columns:repeat(3,1fr)}.statbar.n4{grid-template-columns:repeat(4,1fr)}}
  @media (min-width:821px){.stats.n1{grid-template-columns:1fr}.stats.n2{grid-template-columns:repeat(2,1fr)}.stats.n3{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:440px){.stats{grid-template-columns:1fr}}

  .outcomes{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--panel-line);
    border:1px solid var(--panel-line);margin-top:30px}
  .outcome{background:var(--panel);padding:24px 18px 26px;display:flex;flex-direction:column;gap:12px}
  .outcome .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--accent-2)}
  .outcome h3{font-size:17px;line-height:1.25;color:var(--on-panel)}
  .outcome p{font-size:14.5px;color:var(--on-panel-2);line-height:1.5}
  @media (max-width:980px){.outcomes{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.outcomes{grid-template-columns:1fr}}

  .deliv{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
  .deliv li{display:grid;grid-template-columns:minmax(150px,.7fr) 2fr;gap:clamp(14px,3vw,40px);
    padding-block:18px;border-bottom:1px solid var(--line);align-items:baseline}
  .deliv .t{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-0.015em;color:var(--ink)}
  .deliv .d{color:var(--ink-2);font-size:15.5px;line-height:1.55}
  @media (max-width:640px){.deliv li{grid-template-columns:1fr;gap:6px}}

  /* ---------- certifications ---------- */
  .certgrid{display:grid;grid-template-columns:repeat(5,1fr);margin-top:30px;
    border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .cert{background:var(--surface);padding:28px 18px 22px;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;gap:18px;text-align:center;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .cert img{height:72px;width:auto;display:block}
  .cert span{font-family:var(--mono);font-size:10.5px;line-height:1.55;letter-spacing:.02em;color:var(--ink-2);text-wrap:balance}
  @media (max-width:1040px){.certgrid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:700px){.certgrid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:440px){.certgrid{grid-template-columns:1fr}.cert{padding:22px 16px 18px}}

  /* ---------- expertise: honeycomb ---------- */
  .hive{margin-top:32px;display:flex;flex-direction:column;align-items:center;
    --hg:clamp(5px,0.8vw,9px);
    --hw:min(116px, calc((min(100vw,var(--maxw)) - 2*var(--gutter) - 5*var(--hg)) / 6));
    --hh:calc(var(--hw)*1.1547)}
  .hiverow{display:flex;gap:var(--hg)}
  .hiverow + .hiverow{margin-top:calc(var(--hh) * -0.255)}
  .hex{width:var(--hw);height:var(--hh);padding:1px;background:var(--line-strong);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);transition:background .18s ease,transform .18s ease}
  .hex > i{display:grid;place-items:center;width:100%;height:100%;
    background:var(--surface);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}
  .hex img{width:auto;height:auto;max-width:74%;max-height:42%;display:block;
    opacity:.9;transition:opacity .18s ease}
  .hex:hover{background:var(--accent-2);transform:translateY(-2px)}
  .hex:hover img{opacity:1}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .hex img{filter:invert(1) hue-rotate(180deg) brightness(1.06);opacity:.95}
  }
  :root[data-theme="dark"] .hex img{filter:invert(1) hue-rotate(180deg) brightness(1.06);opacity:.95}

  @media (prefers-reduced-motion:reduce){.hex{transition:none}.hex:hover{transform:none}}

  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- WordPress additions ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--ground);
  padding:12px 18px;font-family:var(--mono);font-size:13px}
.skip:focus{left:0}
.et-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qerror{grid-column:1 / -1;font-family:var(--mono);font-size:11.5px;color:#C2410C;margin-top:6px}
.band-dark .qerror,#close .qerror{color:#FDBA74}
.alignwide{max-width:var(--maxw);margin-inline:auto}
.alignfull{max-width:none}
.navigation.pagination{margin-top:34px;font-family:var(--mono);font-size:13px}
.navigation.pagination .page-numbers{display:inline-block;padding:8px 12px;border:1px solid var(--line-strong);
  margin-right:6px;color:var(--ink-2);text-decoration:none}
.navigation.pagination .page-numbers.current{border-color:var(--accent);color:var(--accent)}
.links a.is-current{color:var(--accent-2)}

/* ------------------------------------------------------------------ bench --
   The Hire us page. One group per discipline family: a sticky header on the
   left, the disciplines as cards on the right. A card, not a table row —
   a row forced the name, the stack and the arrow onto one baseline, which
   left a corridor of dead space in the middle and pushed the arrow so far
   right it stopped reading as part of the same thing. */
.bench{margin-top:26px;border-top:1px solid var(--line-strong)}
.bgroup{border-bottom:1px solid var(--line);padding-block:clamp(22px,2.6vw,32px);
  display:grid;gap:clamp(16px,2vw,34px)}
@media (min-width:900px){.bgroup{grid-template-columns:232px minmax(0,1fr);align-items:start}}
.bgroup[hidden]{display:none}

.bghead{position:sticky;top:96px}
@media (max-width:899px){.bghead{position:static}}
.bgicon{display:block;color:var(--accent);margin-bottom:12px}
.bghead h3{font-family:var(--display);font-size:19px;line-height:1.2;font-weight:800;
  letter-spacing:-0.015em;margin:0 0 7px}
.bghead p{font-size:13.5px;line-height:1.5;color:var(--ink-3);margin:0;max-width:30ch}
.bgnum{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:16px 0 0;opacity:.6}

.bcards{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(244px,1fr))}
.bcard{display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);border-radius:13px;padding:15px 15px 13px;
  background:var(--surface);cursor:pointer;scroll-margin-top:110px;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.bcard:hover{border-color:var(--accent-2);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(11,23,37,.08)}
.bcard:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

.bhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bname{font-size:16px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-0.01em}
.bgo{font-style:normal;color:var(--line-strong);font-size:15px;flex:none;
  transition:transform .16s ease,color .16s ease}
.bcard:hover .bgo,.bcard:focus-visible .bgo{color:var(--accent);transform:translateX(3px)}
.bsay{font-size:12.8px;line-height:1.5;color:var(--ink-3);margin-top:-2px}

/* One plate for the whole stack. The marks stand on it bare and at their own
   widths — several carry their own wordmark, and a box each both crowded them
   and made the row ragged. The plate keeps a light face in either theme:
   these are other companies' marks, drawn in their own colours, and
   recolouring them is not ours to do. */
.bplate{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 13px;
  padding:10px 11px;min-height:40px;border:1px solid rgba(11,23,37,.1);
  border-radius:9px;background:#FFFFFF}
.bmark{display:block;height:17px;width:auto;max-width:100px;object-fit:contain}
/* No rule between the marks and the names: when the plate wraps, a divider
   lands at the head of the second line and reads as a mistake. The change of
   register — colour logos, then grey mono — already separates them. */
.bwords{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;min-width:0}
.bwords em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;
  color:#5A7187;white-space:nowrap}
/* The separator trails its own word rather than leading the next one, so a
   wrap never starts a line with a stray dot. */
.bwords em:not(:last-child)::after{content:'\00B7';margin-left:7px;color:rgba(11,23,37,.3)}
/* A discipline with no marks to show gets no light plate — a white block of
   nothing but grey type is the loudest thing on the row in a dark theme. */
.bplate.nomark{background:transparent;border-color:var(--line)}
.bplate.nomark em{color:var(--ink-3);font-size:11px}
.bplate.nomark em:not(:last-child)::after{color:var(--line-strong)}

@media (prefers-reduced-motion:reduce){
  .bcard,.bgo{transition:none}
  .bcard:hover{transform:none}
}

/* Six primary links and a button is tight in the band just above the width
   where the nav hides, and it fell to two lines there. Close the gaps instead
   of letting the header grow. */
nav.links a{white-space:nowrap}
@media (max-width:1040px){nav.links{gap:18px;font-size:13.5px}}

/* ---------- hire: how an engagement is shaped ---------- */
.shapes{display:grid;gap:18px;margin-top:26px}
@media (min-width:860px){.shapes{grid-template-columns:repeat(3,1fr)}}
.shape{border-top:2px solid var(--ink);padding-top:16px}
.shape h3{font-size:18.5px;line-height:1.22;margin:0 0 9px}
.shape p{font-size:15.5px;line-height:1.56;color:var(--ink-2);margin:0 0 10px}
.shape dl{margin:0;font-family:var(--mono);font-size:12px;border-top:1px solid var(--line);padding-top:10px}
.shape dt{color:var(--ink-3);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:9px}
.shape dt:first-of-type{margin-top:0}
.shape dd{margin:3px 0 0;color:var(--ink)}

/* ---------- hire: sectors ---------- */
.inds{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.inds span{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-2);
  border:1px solid var(--line-strong);padding:8px 13px}

/* ---------- hire: the questions ----------
   Its own class rather than .qa: the dark-band .qa further up this file wins
   on source order, and these sit on a light band. */
.hireqa{margin-top:24px;max-width:72ch}
.hireqa details{border-top:1px solid var(--line)}
.hireqa details:last-of-type{border-bottom:1px solid var(--line)}
.hireqa summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;position:relative;
  font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.hireqa summary::-webkit-details-marker{display:none}
.hireqa summary::after{content:'+';position:absolute;right:4px;top:15px;color:var(--ink-3);font-weight:400}
.hireqa details[open] summary::after{content:'\2013'}
.hireqa summary:hover{color:var(--accent)}
.hireqa summary:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.hireqa .ans{padding:0 0 18px;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:66ch}
.hireqa .ans p{margin:0 0 10px}
.hireqa .ans p:last-child{margin-bottom:0}

/* The two buttons under the Hire us hero. page.php closes the hero before the
   content starts, so they arrive as their own wrap and have to be pulled back
   up under the lede. */
.heroact{margin-top:-10px;margin-bottom:clamp(24px,3vw,38px)}

/* The long form was only ever used inside .talkgrid, which gave it its width.
   Dropped into a plain wrap it ran the full column, so the measure lives on
   the form itself and the grid opts out of it. */
.form{max-width:620px}
.talkgrid .form{max-width:none}

/* And on a dark band its fields were still drawn for a light one — white
   slabs on near-black. The quick form already had this; the long one did not,
   because nothing had put it on a dark band before. */
.band-dark .form :is(.field > label,.fieldset > legend),
.band-dark .formnote{color:var(--on-panel-3)}
.band-dark .form :is(input,textarea){background:var(--panel-2);border-color:var(--panel-line);
  color:var(--on-panel)}
.band-dark .form :is(input,textarea)::placeholder{color:var(--on-panel-3)}
.band-dark .form :is(input,textarea):focus{border-color:var(--accent-2)}
.band-dark .form .seg label{border-color:var(--panel-line);color:var(--on-panel-2)}
.band-dark .form .seg label:hover{border-color:var(--on-panel-3)}
.band-dark .form .seg input:checked + label{border-color:var(--accent-2);color:var(--accent-2);
  background:var(--panel-2)}

/* A column of plain paragraphs inside a section. The page was doing this with
   a repeated inline margin on each one; this is the same thing, named. */
.prose{display:grid;gap:15px;margin-top:18px;max-width:62ch}
.prose p{margin:0;color:var(--ink-2);font-size:17px;line-height:1.6}
.band-dark .prose p{color:var(--on-panel-2)}

/* ---------- about: the five practices on one base ----------
   The heading says five practices with one delivery model underneath them,
   so the block draws that: five columns, each capped with an accent edge,
   sitting on a single bar that runs the width of all of them. */
.stackmap{margin-top:28px;display:grid;gap:10px}
.smrow{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
.smcol{display:flex;flex-direction:column;gap:7px;min-width:0;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-top:3px solid var(--accent);
  padding:15px 15px 14px;background:var(--surface);
  transition:transform .16s ease,border-color .16s ease}
.smcol:hover{transform:translateY(-3px);border-color:var(--line-strong);border-top-color:var(--accent-2)}
.smcol:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.smk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.smcol h3{font-family:var(--display);font-size:16.5px;line-height:1.2;margin:0;
  letter-spacing:-0.012em;font-weight:700}
.smcol p{font-size:13.2px;line-height:1.5;color:var(--ink-3);margin:0}
.smgo{margin-top:auto;padding-top:11px;font-family:var(--mono);font-size:11px;color:var(--accent)}
.smcol:hover .smgo{color:var(--accent-2)}
.smbase{border:1px solid var(--line);background:var(--surface-2);
  padding:14px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.smbase p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .smcol{transition:none}
  .smcol:hover{transform:none}
}