/* ============================================================================
   SS Technologies
   Stylesheet for index.html

   ORGANISATION
     01  Design tokens .............. colour, type scale, spacing, shape
     02  Theming .................... dark mode (system + explicit override)
     03  Reset & base ............... element defaults
     04  Utilities .................. .mono, .eyebrow, .sr, .skip
     05  Layout shell ............... .shell, .content, .pad
     06  Components ................. logo, rail, buttons, badges, chips
     07  Sections ................... hero, models, services, process, …
     08  Overlays ................... job panel, scrim
     09  Footer
     10  Motion ..................... keyframes + reduced-motion opt-outs

   CONVENTIONS
     - Colour, spacing and type values come from tokens in §01. Add a token
       rather than hard-coding a new literal.
     - Dark-only surface literals (#0A101D, #172234 …) belong to the permanently
       dark chrome: the rail, the hero, and .sec.dark. They are intentionally
       fixed and do not participate in theming.
     - Section-scoped overrides read `.sec.dark .thing`, never `.thing.dark`.
     - Every animation has a `prefers-reduced-motion` opt-out in §10.
   ========================================================================= */


/* ============================================================================
   01  DESIGN TOKENS
   ========================================================================= */
:root{
  /* ---- palette: ink (fixed dark chrome) ---- */
  --ink:#070C16;
  --ink-2:#0D1423;
  --ink-3:#141D30;
  --rail:#05080F;

  /* ---- palette: surfaces (themed) ---- */
  --paper:#F5F7FB;
  --surface:#FFFFFF;
  --raised:#FAFBFE;
  --line:#DCE3EF;
  --line-soft:#EAEEF7;

  /* ---- palette: foreground (themed) ---- */
  --fg:#0D1423;
  --fg-muted:#57647C;
  --fg-dim:#7F8CA4;

  /* ---- palette: accent ---- */
  --electric:#2B5BFF;
  --electric-2:#5C83FF;
  --electric-soft:#E9EEFF;
  --signal:#FFC247;
  --good:#158257;

  /* ---- palette: on-dark foreground (fixed) ----
     Used inside .rail, .hero, .sec.dark and .panel-head. */
  --on-dark:#E8EDF7;
  --on-dark-muted:#A8B6CF;
  --on-dark-dim:#8494AF;
  --on-dark-line:#151F33;

  /* ---- section progress rail ----
     Low-contrast by design: it reads as a quiet position marker beside the
     page, not as a navigation panel competing with the content. */
  --rail-idle:#6B7B99;
  --rail-hover:#93A2BC;
  --rail-active:#E8EDF7;
  --rail-rule:#28364E;
  --rail-num:#5A6A86;

  /* ---- type scale ---- */
  --t-hero:clamp(34px,4.4vw,62px);
  --t-h2:clamp(25px,2.7vw,38px);
  --t-h3:19px;
  --t-lede:clamp(16.5px,1.25vw,19px);
  --t-body:16.5px;
  --t-sm:15px;
  --t-xs:13.5px;
  --t-mono:11px;

  /* ---- font stacks ---- */
  --font-display:"Manrope","Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter Tight",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;

  /* ---- shape & rhythm ---- */
  --r:6px;
  --r-lg:14px;
  --r-pill:99px;
  --pad:clamp(20px,3.4vw,56px);
  --sec-gap:clamp(54px,5.8vw,88px);
  --railw:232px;
  --shadow:0 1px 2px rgba(7,12,22,.05),0 16px 38px -24px rgba(7,12,22,.45);

  /* ---- motion ---- */
  --ease-out:cubic-bezier(.22,.9,.25,1);
  --ease-panel:cubic-bezier(.32,.72,0,1);
  --dur-fast:.15s;
  --dur-mid:.26s;
}



/* ============================================================================
   02  THEMING
   The same token overrides are declared twice on purpose: once for the system
   preference (skipped when the user has explicitly chosen light) and once for
   an explicit data-theme="dark", so a toggle wins in both directions.
   ========================================================================= */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#090F1C;
    --surface:#101928;
    --raised:#141E30;
    --line:#243145;
    --line-soft:#1B2639;
    --fg:#E8EDF7;
    --fg-muted:#94A3BD;
    --fg-dim:#77869F;
    --electric:#6E90FF;
    --electric-2:#8FA9FF;
    --electric-soft:#162344;
    --good:#4BC48C;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 20px 44px -26px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#090F1C;
  --surface:#101928;
  --raised:#141E30;
  --line:#243145;
  --line-soft:#1B2639;
  --fg:#E8EDF7;
  --fg-muted:#94A3BD;
  --fg-dim:#77869F;
  --electric:#6E90FF;
  --electric-2:#8FA9FF;
  --electric-soft:#162344;
  --good:#4BC48C;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 20px 44px -26px rgba(0,0,0,.9);
}


/* ============================================================================
   03  RESET & BASE
   ========================================================================= */
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" 1;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
}

p{margin:0}
a{color:inherit}
img,svg{max-width:100%}

:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
  border-radius:3px;
}
/* #main only receives focus programmatically (back-to-top), so it should not
   draw a ring around the entire page region. */
#main:focus,
#main:focus-visible{outline:none}

section{scroll-margin-top:96px}

/* the only form controls left are the job board's search box and practice
   select; the contact form was replaced by mailto routes */
input[type=search],
select{
  font:inherit;
  font-size:14.5px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--fg);
  min-width:0;
}
input[type=search]{flex:1;min-width:200px}


/* ============================================================================
   04  UTILITIES
   ========================================================================= */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.eyebrow{
  margin:0;
  font-family:var(--font-mono);
  font-size:var(--t-mono);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--electric);
}

/* visually hidden, still announced */
.sr{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* skip link, hidden until focused */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{
  width:auto;height:auto;clip:auto;
  left:20px;top:10px;z-index:300;
  background:var(--signal);
  color:#151004;
  padding:10px 17px;
  border-radius:var(--r);
  font-weight:600;
}

/* placeholder marker, remove when real content lands */
.placeholder{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-dim);
  border:1px dashed var(--line);
  border-radius:var(--r-pill);
  padding:7px 14px;
}


/* ============================================================================
   05  LAYOUT SHELL
   ========================================================================= */
/* The rail floats over the page rather than occupying a grid column. Sections
   keep their own full-bleed background and simply carry a left inset wide
   enough for the rail's gutter, so no strip of bare page shows beside them. */
.shell{position:relative;min-height:100vh}
.content{min-width:0}
.pad{padding-inline:var(--pad)}

@media(min-width:1100px){
  /* every full-bleed band indents its content, not its background */
  .topline,
  .hero,
  .sec{padding-left:calc(var(--railw) + var(--pad))}
  /* The footer keeps the full width: the rail steps aside there (it has no
     section left to track), so indenting would leave a dead empty gutter. */
  footer.page{padding-left:var(--pad)}
  /* The ticker is the one band the rail must not cross: its amber ground
     would sit behind the labels, which have no readable state against it.
     Margin, not padding, so the background itself stops at the gutter and
     the marquee still scrolls edge to edge inside what remains. */
  .ticker{margin-left:var(--railw);padding-left:0}
}

/* Host for the injected icon sprite. It must stay in the render tree for
   <use href="#id"> to resolve, so it is collapsed rather than display:none. */
#sprite{position:absolute;width:0;height:0;overflow:hidden}


/* ============================================================================
   06  COMPONENTS
   ========================================================================= */

/* ---- logo -------------------------------------------------------------- */
.logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:inherit;min-width:0;
}
/* The "Bridge" mark is square (64x64). The lockup now sits in a full-width
   header rather than a 264px rail, so it can run at brand-spec proportions. */
.logo svg.markimg{display:block;height:36px;width:36px;flex:none}
/* No line-height:1 here: it crops descenders and the comma in the tagline
   once overflow is hidden for ellipsis. Each line sets its own instead. */
.logo .wm{display:flex;flex-direction:column;min-width:0}
.logo .wm b{
  font-family:var(--font-display);
  font-weight:800;
  font-size:17px;
  line-height:1.15;
  letter-spacing:-.026em;
  white-space:nowrap;
}
/* Brand spec: DM Mono Medium, all caps, +22% tracking. */
.logo .wm i{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:9.5px;
  line-height:1.5;          /* room for the comma and descenders */
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--signal);
  margin-top:3px;
  white-space:nowrap;
}

/* ---- rail: section progress indicator ---------------------------------
   Deliberately NOT an admin sidebar: no panel, no background, no icons, no
   boxed rows. A continuous hairline track runs the height of the list; each
   section has a tick on it, and the section in view gets a filled marker,
   a brighter label and its index. Desktop only, hidden below 1100px. */
.rail{display:none}

@media(min-width:1100px){
  .rail{
    display:flex;flex-direction:column;justify-content:center;
    position:fixed;left:0;top:0;
    width:var(--railw);height:100vh;
    padding-left:var(--pad);
    z-index:60;
    /* Its own ink gutter, full height. The rail spans whatever sections
       happen to be on screen, so borrowing their ground meant the column
       was half dark and half light at every boundary, with no palette that
       could serve both. One fixed ground removes the problem outright. */
    background:var(--ink);
    border:0;border-right:1px solid var(--on-dark-line);
    pointer-events:none;
  }

  /* The mark stays visible after the topline scrolls away. It is aligned to
     the track's line, not the rail edge, so the column reads as one unit. */
  .rail .railmark{
    pointer-events:auto;
    display:block;width:34px;height:34px;
    /* -7px pulls the art's optical left edge onto the track line; the bare
       mark carries empty margin inside its 64x64 box. */
    margin:0 0 24px -7px;
    opacity:0;transform:translateY(-4px);
    transition:opacity .3s ease,transform .3s ease;
  }
  .rail.scrolled .railmark{opacity:1;transform:none}
  /* explicit px, not 100%: a percentage height on the replaced <svg> does not
     resolve reliably against the anchor and collapses the mark */
  .rail .railmark svg{display:block;width:34px;height:34px}

  .rail .track{
    position:relative;
    display:flex;flex-direction:column;
    padding-left:20px;
  }
  /* continuous hairline the ticks sit on */
  .rail .track::before{
    content:"";
    position:absolute;left:0;top:6px;bottom:6px;
    width:1px;
    background:var(--rail-rule);
    transition:background .28s ease;
  }

  .rail a{
    pointer-events:auto;
    position:relative;
    display:flex;align-items:baseline;gap:10px;
    padding:9.5px 0;
    text-decoration:none;
    color:var(--rail-idle);
    font-size:15px;font-weight:500;
    letter-spacing:-.008em;
    white-space:nowrap;
    transition:color .28s ease,transform .28s var(--ease-out);
  }
  /* tick on the track, becomes a filled marker when active */
  .rail a::before{
    content:"";
    position:absolute;left:-20px;top:50%;
    width:7px;height:1px;
    margin-top:-.5px;
    background:var(--rail-rule);
    transition:width .3s var(--ease-out),height .3s var(--ease-out),
               background .28s ease,margin .3s var(--ease-out),
               border-radius .3s ease;
  }
  .rail a .n{
    font-family:var(--font-mono);
    font-size:10.5px;
    color:var(--rail-num);
    letter-spacing:.06em;
    transition:color .28s ease;
  }

  .rail a:hover{color:var(--rail-hover);transform:translateX(2px)}
  .rail a:hover::before{width:12px;background:var(--rail-hover)}

  .rail a.here{color:var(--rail-active);transform:translateX(3px)}
  .rail a.here .n{color:var(--signal)}
  .rail a.here::before{
    left:-23px;
    width:7px;height:7px;
    margin-top:-3.5px;
    border-radius:50%;
    background:var(--signal);
  }


  /* The footer is the end of the page and repeats the whole link list, so
     there is nothing left for the rail to track. js/app.js slides it out.
     It translates rather than only fading: the rail paints its own ink
     gutter, and fading that in place just reveals the page ground behind it
     as a pale strip beside the dark footer. */
  .rail{
    opacity:1;transform:none;
    transition:opacity .32s ease,transform .32s var(--ease-out);
  }
  .rail.at-end{
    opacity:0;transform:translateX(-100%);
    pointer-events:none;
  }
}

/* ---- topline: logo + contact, above the hero -------------------------- */
.topline{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px 24px;
  padding-block:26px 6px;
  background:var(--ink);
  color:var(--on-dark);
}
.topline .logo{min-width:0;flex:0 1 auto}
.topline .logo .wm b,
.topline .logo .wm i{overflow:hidden;text-overflow:ellipsis}

.topmeta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;font-size:13.5px}
.topmeta a{color:var(--on-dark-dim);text-decoration:none;white-space:nowrap}
.topmeta a:hover{color:var(--signal)}
.topmeta .btn.sm{color:#fff}
.topmeta .live{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);
  border:1px solid #263449;
  border-radius:var(--r-pill);
  padding:6px 12px;
  white-space:nowrap;
}
.topmeta .live i{
  width:6px;height:6px;border-radius:50%;
  background:var(--signal);flex:none;
  animation:blip 2.4s ease-in-out infinite;
}
@media(max-width:700px){
  /* Phone: keep the logo only. The hero repeats this CTA a screen below, and
     the live badge and phone number both reappear in the footer. */
  .topmeta{display:none}
}

/* ---- mobile navigation ------------------------------------------------
   The rail is desktop-only, so below 1100px navigation lives here: a
   hamburger in the topline opening a full-height drawer. */
.navtoggle{
  display:none;
  width:44px;height:44px;              /* 44px minimum touch target */
  place-items:center;
  margin-left:auto;
  background:none;
  border:1px solid #263449;
  border-radius:var(--r);
  color:var(--on-dark);
  cursor:pointer;
}
.navtoggle .bars{display:grid;gap:4px;width:18px}
.navtoggle .bars i{
  display:block;height:2px;border-radius:2px;background:currentColor;
  transition:transform .26s var(--ease-out),opacity .2s ease;
}
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.navscrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(7,12,22,.6);
  opacity:0;transition:opacity .24s ease;
}
.navscrim.on{opacity:1}

.mobilenav{
  position:fixed;top:0;right:0;bottom:0;z-index:85;
  width:min(320px,86vw);
  display:flex;flex-direction:column;
  padding:88px 24px 28px;
  background:var(--ink);
  border-left:1px solid var(--on-dark-line);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .3s var(--ease-panel);
}
.mobilenav.on{transform:none}
.mobilenav a{
  display:block;
  padding:14px 0;                      /* comfortable touch rows */
  border-bottom:1px solid #141E2E;
  color:var(--on-dark-muted);
  text-decoration:none;
  font-size:16px;font-weight:500;
}
.mobilenav a:active,
.mobilenav a:hover{color:var(--signal)}
.mobilenav .mnav-foot{
  margin-top:auto;padding-top:24px;
  display:grid;gap:12px;
  font-size:14.5px;
}
.mobilenav .mnav-foot a{
  border-bottom:0;padding:0;
  color:var(--on-dark-dim);
}
.mobilenav .mnav-foot .btn{
  padding:14px 20px;
  color:#161005;
  justify-content:center;
}

@media(max-width:1099px){
  .navtoggle{display:grid}
  /* keep the toggle above the drawer so the X is reachable to close it */
  .topline{position:relative;z-index:90}
}
@media (prefers-reduced-motion: reduce){
  .mobilenav,.navscrim,.navtoggle .bars i{transition:none}
}

/* ---- touch sizing -----------------------------------------------------
   Pointer-coarse rather than a width query: it targets actual touch devices
   instead of a narrow desktop window, and leaves mouse users' density alone. */
@media (pointer:coarse){
  /* footer and contact link lists: pad rows out to a thumb-sized target */
  footer.page ul a,
  .cdl a,
  .mobilenav .mnav-foot a{
    display:inline-block;
    padding-block:9px;
  }
  footer.page ul{gap:2px}
  footer.page ul.fcontact{gap:8px}

  /* leadership "Email" links */
  .person .lk{padding-block:10px}

  /* filter pills and hero jump pills */
  .fpill,
  .modelnav button{min-height:44px;padding-block:11px}

  /* job rows are already tall; keep the whole row tappable */
  .jobrow{min-height:56px}

  /* social tiles */
  .social a{width:44px;height:44px}
}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;
  border:0;
  border-radius:var(--r);
  background:var(--electric);
  color:#fff;
  font-family:var(--font-body);
  font-weight:600;font-size:15px;
  letter-spacing:-.005em;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(43,91,255,.9);
  transition:transform .14s ease,background .14s ease,box-shadow .14s ease;
}
.btn:hover{transform:translateY(-2px);background:#1B48E8}
.btn.amber{
  background:var(--signal);
  color:#161005;
  box-shadow:0 10px 22px -12px rgba(255,194,71,.9);
}
.btn.amber:hover{background:#FFCF6B}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.sm{padding:10px 18px;font-size:14px}

.ico{
  width:18px;height:18px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- badges & chips ---------------------------------------------------- */
.badge{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;
  border-radius:var(--r-pill);
  white-space:nowrap;
}
.b-ft{background:var(--electric-soft);color:var(--electric)}
.b-c2c{background:#FFF2D6;color:#8A5A00}
.b-c2h{background:#DEF3E9;color:#0C6B46}
.b-tp{background:#F1E5FF;color:#6B31B8}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .b-c2c{background:#3A2B06;color:#FFC247}
  :root:not([data-theme="light"]) .b-c2h{background:#0C3325;color:#4BC48C}
  :root:not([data-theme="light"]) .b-tp{background:#2A1A44;color:#C7A6FF}
}
:root[data-theme="dark"] .b-c2c{background:#3A2B06;color:#FFC247}
:root[data-theme="dark"] .b-c2h{background:#0C3325;color:#4BC48C}
:root[data-theme="dark"] .b-tp{background:#2A1A44;color:#C7A6FF}

.chip{
  font-family:var(--font-mono);
  font-size:10.5px;
  padding:5px 10px;
  border-radius:var(--r-pill);
  background:var(--electric-soft);
  color:var(--electric);
  white-space:nowrap;
}


/* ============================================================================
   07  SECTIONS
   ========================================================================= */

/* ---- section frame ----------------------------------------------------- */
.sec{padding-block:var(--sec-gap)}
.sec.alt{background:var(--surface);border-block:1px solid var(--line)}
.sec.dark{background:var(--ink);color:var(--on-dark)}

.shead{max-width:58ch}
.shead h2{font-size:var(--t-h2);margin-top:14px;letter-spacing:-.032em}
.shead p{margin-top:15px;color:var(--fg-muted);font-size:var(--t-lede)}
.sec.dark .shead p{color:var(--on-dark-muted)}
.sec.dark .eyebrow{color:var(--signal)}

.headrow{display:grid;gap:22px;align-items:end}
@media(min-width:960px){.headrow{grid-template-columns:1fr auto}}

/* ---- hero -------------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);
  color:var(--on-dark);
  padding-block:clamp(46px,5.6vw,80px) 0;
}
.hero .dots{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 22% 8%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 100% 80% at 22% 8%,#000,transparent 78%);
}
.hero .glow-a,
.hero .glow-b{position:absolute;border-radius:50%;pointer-events:none;filter:blur(24px)}
.hero .glow-a{
  width:800px;height:800px;top:-380px;right:-220px;
  background:radial-gradient(circle,rgba(43,91,255,.4),transparent 66%);
}
.hero .glow-b{
  width:560px;height:560px;bottom:-300px;left:-180px;
  background:radial-gradient(circle,rgba(255,194,71,.14),transparent 68%);
}
.hero .inner{
  position:relative;
  display:grid;gap:44px;
  grid-template-columns:1fr;
  align-items:center;
}
.hero .inner > *{min-width:0}
@media(min-width:1080px){
  .hero .inner{
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);
    gap:clamp(36px,4vw,68px);
  }
}

.tagline{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 16px 7px 10px;
  border:1px solid #1F2C42;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#AFBCD4;
}
.tagline i{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--signal);
  box-shadow:0 0 0 4px rgba(255,194,71,.15);
  animation:blip 2.4s ease-in-out infinite;
}

.hero h1{font-size:var(--t-hero);margin:24px 0 0;max-width:12ch;letter-spacing:-.035em}
/* Colour alone carries the emphasis; the underline read as a stray rule under
   the headline, especially where descenders crossed it. */
.hero h1 u{
  color:var(--signal);
  text-decoration:none;
}
.hero .lede{margin-top:20px;max-width:52ch;font-size:var(--t-lede);color:var(--on-dark-muted)}

.modelnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.modelnav button{
  padding:9px 15px;
  border:1px solid #1F2C42;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.035);
  color:#AFBCD4;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:var(--dur-fast);
}
.modelnav button:hover{
  border-color:var(--signal);
  color:var(--signal);
  background:rgba(255,194,71,.07);
}
/* the two practices the firm leads with sit ahead of the hiring models */
.modelnav button.lead{
  border-color:rgba(255,194,71,.45);
  background:rgba(255,194,71,.1);
  color:var(--signal);
}
.modelnav button.lead:hover{background:rgba(255,194,71,.2);border-color:var(--signal)}

.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero .assure{
  display:flex;flex-wrap:wrap;gap:9px 24px;
  margin-top:24px;
  font-size:var(--t-xs);
  color:var(--on-dark-dim);
}
.hero .assure span{display:inline-flex;align-items:center;gap:8px}
.hero .assure svg{
  width:14px;height:14px;flex:none;
  stroke:#4BC48C;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- hero panel: tabs -------------------------------------------------- */
.tabs{
  display:flex;gap:2px;
  padding:8px 8px 0;
  border-bottom:1px solid #172234;
  background:rgba(255,255,255,.02);
}
.tabs button{
  flex:1;
  padding:11px 10px;
  background:none;border:0;
  border-radius:var(--r) var(--r) 0 0;
  border-bottom:2px solid transparent;
  color:var(--on-dark-dim);
  font:600 13px var(--font-body);
  white-space:nowrap;
  cursor:pointer;
  transition:color .16s,border-color .16s;
}
.tabs button:hover{color:#D5DEEE}
.tabs button[aria-selected="true"]{
  color:#fff;
  border-bottom-color:var(--signal);
  background:rgba(255,255,255,.035);
}
.tabpanel[hidden]{display:none}

/* ---- hero panel: pipeline ---------------------------------------------- */
.pipe{padding:18px 20px 4px}
.pipe .ph{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.pipe .ph h3{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--on-dark)}
.pipe .ph span{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:#6F7F9B;
}

.stage{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  gap:4px 12px;align-items:center;
  width:100%;
  padding:9px 10px;
  border:0;border-radius:var(--r);
  background:none;
  color:inherit;font:inherit;text-align:left;
  cursor:pointer;
  transition:background .2s;
}
.stage:hover{background:rgba(255,255,255,.03)}
.stage.on{background:rgba(255,255,255,.05)}
.stage .idx{
  grid-row:1;
  font-family:var(--font-mono);font-size:10px;
  color:#5F6E88;
  transition:color .2s;
}
.stage.on .idx{color:var(--signal)}
.stage .lbl{
  grid-row:1;
  font-size:14px;font-weight:500;
  color:#9AA9C2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .2s;
}
.stage.on .lbl{color:#fff;font-weight:600}
.stage .val{
  grid-row:1;
  font-family:var(--font-mono);font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--on-dark-dim);
  transition:color .2s;
}
.stage.on .val{color:var(--signal)}
.stage .track{
  grid-row:2;grid-column:1/-1;
  height:5px;border-radius:3px;
  background:#141E2E;
  overflow:hidden;
}
.stage .fill{
  display:block;height:100%;width:0;
  border-radius:3px;
  background:linear-gradient(90deg,var(--electric),var(--electric-2));
  transition:width .85s var(--ease-out),background .3s;
}
.stage.on .fill{background:linear-gradient(90deg,var(--electric-2),var(--signal))}

.pipe .caption{
  margin-top:8px;
  padding:13px 10px 14px;
  border-top:1px solid #141E2E;
  font-size:13px;color:#9AA9C2;
  min-height:62px;
}
.pipe .caption b{color:var(--on-dark);font-weight:600;display:block;margin-bottom:4px;font-size:13.5px}
.pipe .ratio{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:13px 10px 16px;
  border-top:1px solid #141E2E;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#6F7F9B;
}
.pipe .ratio b{color:var(--signal);font-weight:500}

/* ---- hero panel: live feed --------------------------------------------- */
.feedwrap{
  position:relative;
  padding:1px;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(255,194,71,.5),rgba(43,91,255,.4) 42%,rgba(255,255,255,.06) 78%);
}
.feed{background:#0A101D;border-radius:calc(var(--r-lg) - 1px);overflow:hidden}
.feed .fh{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid #172234;
}
.feed .fh h2{font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.feed .fh span{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);
}
/* live indicator on the "updated daily" badge */
.feed .fh span::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 0 rgba(255,194,71,.55);
  animation:feedpulse 2.1s ease-out infinite;
}

.feed ul{list-style:none;margin:0;padding:0}
.feed li{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;
  gap:4px 14px;align-items:center;
  padding:14px 20px;
  border-bottom:1px solid #141E2E;
  transition:background .15s;
}
.feed li:last-child{border-bottom:0}
.feed li:hover{background:rgba(255,255,255,.025)}
.feed li b{font-size:14.5px;font-weight:600;letter-spacing:-.012em;transition:color .3s}
.feed li em{font-style:normal;display:block;font-size:12.5px;color:var(--on-dark-dim);margin-top:3px}
.feed li .rt{
  font-family:var(--font-mono);font-size:12px;
  color:#C6D2E6;
  justify-self:end;white-space:nowrap;
  transition:color .3s;
}

/* staggered entrance: JS sets --d per row and adds .in */
.feed li.in{animation:feedrow .52s var(--ease-out) both;animation-delay:var(--d,0ms)}

/* rolling highlight: JS moves .lit down the list */
.feed li.lit{background:rgba(255,194,71,.055)}
.feed li.lit b{color:#fff}
.feed li.lit .rt{color:var(--signal)}
.feed li.lit::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 12%,rgba(255,194,71,.14) 46%,transparent 78%);
  transform:translateX(-100%);
  animation:feedsheen .9s cubic-bezier(.3,.7,.3,1) forwards;
}

.feed .ff{
  padding:14px 20px;
  border-top:1px solid #172234;
  background:rgba(255,255,255,.02);
}
.feed .ff a{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:14px;
  color:var(--signal);
  text-decoration:none;
  transition:gap var(--dur-fast);
}
.feed .ff a:hover{gap:12px}

/* ---- hero stat strip --------------------------------------------------- */
.strip{
  position:relative;
  margin-top:clamp(40px,4.4vw,64px);
  border-top:1px solid #16202F;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.strip div{padding:22px 22px 24px 0;border-right:1px solid #16202F}
.strip div:last-child{border-right:0}
.strip b{
  display:block;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(23px,2.1vw,30px);
  letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.strip span{display:block;margin-top:5px;font-size:var(--t-xs);color:var(--on-dark-dim)}

/* ---- ticker ------------------------------------------------------------ */
.ticker{
  background:var(--signal);
  color:#161005;
  overflow:hidden;
  border-block:1px solid rgba(0,0,0,.14);
}
.ticker div{display:flex;width:max-content;animation:slide 50s linear infinite}
.ticker span{
  padding:12px 19px;
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.ticker span::after{
  content:"";display:inline-block;
  width:4px;height:4px;
  background:currentColor;opacity:.42;
  border-radius:1px;
  margin-left:19px;
  vertical-align:middle;
}

/* ---- hiring models ----------------------------------------------------- */
.models{
  display:grid;gap:18px;margin-top:42px;
  grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
}
.model{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:13px;
  padding:26px 24px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.sec.alt .model{background:var(--raised)}
.model::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--electric);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.model:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--electric)}
.model:hover::before{transform:scaleX(1)}
.model .mi{
  width:42px;height:42px;
  border-radius:var(--r);
  display:grid;place-items:center;
  background:var(--electric-soft);
  color:var(--electric);
}
.model .mi svg{
  width:21px;height:21px;
  stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.model .tag{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-dim);
}
.model h3{font-size:21px;letter-spacing:-.03em}
.model p{color:var(--fg-muted);font-size:var(--t-sm);flex:1}
.model dl{
  margin:0;
  display:grid;gap:8px;
  padding-top:15px;
  border-top:1px solid var(--line);
  font-size:13.5px;
}
.model dl div{display:flex;justify-content:space-between;gap:12px}
.model dt{color:var(--fg-dim)}
.model dd{margin:0;font-weight:600;text-align:right}

/* featured model card sits on ink */
.model.feature{background:var(--ink);border-color:#1A2437;color:var(--on-dark)}
.model.feature p{color:var(--on-dark-muted)}
.model.feature .tag{color:var(--signal)}
.model.feature dl{border-top-color:#1F2B3F}
.model.feature dt{color:var(--on-dark-dim)}
.model.feature .mi{background:rgba(255,194,71,.13);color:var(--signal)}
.model.feature::before{background:var(--signal)}
.model.feature:hover{border-color:var(--signal)}

/* ---- services ---------------------------------------------------------- */
.svc{
  display:grid;gap:1px;margin-top:42px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media(min-width:1000px){.svc{grid-template-columns:repeat(3,1fr)}}
.svc article{
  display:flex;flex-direction:column;gap:11px;
  padding:28px 26px;
  background:var(--surface);
  transition:background .18s ease;
}
.sec.alt .svc article{background:var(--raised)}
.svc article:hover{background:var(--electric-soft)}
.svc .si{width:34px;height:34px;color:var(--electric)}
.svc .si svg{
  width:34px;height:34px;
  stroke:currentColor;fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.svc h3{font-size:var(--t-h3);letter-spacing:-.028em}
.svc p{color:var(--fg-muted);font-size:var(--t-sm);flex:1}
.svc .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;min-width:0}

/* ---- process timeline -------------------------------------------------- */
.steps{display:grid;gap:0;margin-top:46px;grid-template-columns:1fr}
/* Two columns from 900px, four only once there is genuinely room. The SLA
   pills are nowrap, so four narrow columns cannot compress and would push a
   horizontal scrollbar onto the page just above the rail's breakpoint. */
@media(min-width:900px){.steps{grid-template-columns:repeat(2,1fr);column-gap:32px}}
@media(min-width:1240px){.steps{grid-template-columns:repeat(4,1fr)}}
/* Column layout so the SLA pills line up across all four steps regardless of
   how long each paragraph runs; the paragraph takes the slack. */
.step{
  position:relative;
  display:flex;flex-direction:column;
  padding:32px 24px 26px 0;
}
@media(min-width:900px){.step{padding-right:32px}}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#1E2B3F}
.step::after{
  content:"";position:absolute;top:-7px;left:0;
  width:16px;height:16px;border-radius:50%;
  background:var(--ink);
  border:2px solid var(--signal);
}
.step:first-child::after{background:var(--signal)}
.step .n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;color:var(--signal)}
.step h3{font-size:var(--t-h3);margin:12px 0 9px;letter-spacing:-.028em}
/* No flex:1 here. The paragraph stays its natural height and the pill's
   margin-top:auto absorbs the leftover space, which is what puts every pill
   on the same baseline once the grid stretches all four steps to equal height.
   Giving the paragraph flex-grow instead would consume that space and leave
   the pill wherever the text happened to end. */
.step p{
  color:var(--on-dark-muted);font-size:var(--t-sm);
  padding-bottom:18px;
}
.step .sla{
  display:inline-flex;align-items:center;gap:8px;
  /* auto top margin pins the pill to the bottom of the column */
  margin-top:auto;
  align-self:flex-start;
  /* Keep every pill one line tall. At mid widths some of these labels wrap and
     others do not; the pills stay bottom-aligned but differ in height, which
     reads as misalignment. Shrinking the tracking slightly is less costly than
     letting the row go ragged. */
  white-space:nowrap;
  padding:6px 12px;
  border:1px solid #1C4534;
  border-radius:var(--r-pill);
  background:rgba(21,130,87,.14);
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#9DE3C2;
}

/* ---- industries -------------------------------------------------------- */
.inds{
  display:grid;gap:13px;margin-top:42px;
  grid-template-columns:repeat(auto-fit,minmax(226px,1fr));
}
@media(min-width:900px){.inds{grid-template-columns:repeat(3,1fr)}}
.ind{
  display:flex;flex-direction:column;gap:6px;
  padding:22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.sec.alt .ind{background:var(--raised)}
.ind b{font-family:var(--font-display);font-weight:800;font-size:16.5px;letter-spacing:-.028em}
.ind span{color:var(--fg-muted);font-size:14px}
.ind .dotrow{display:flex;gap:4px;margin-bottom:5px}
.ind .dotrow i{width:15px;height:4px;border-radius:2px;background:var(--line)}
.ind .dotrow i:first-child{background:var(--electric)}
.ind:nth-child(2) .dotrow i:nth-child(-n+2){background:var(--electric)}
.ind:nth-child(3) .dotrow i:nth-child(-n+3){background:var(--electric)}

/* ---- clients ----------------------------------------------------------- */
.logowall{
  display:grid;gap:1px;margin-top:42px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media(min-width:900px){.logowall{grid-template-columns:repeat(3,1fr)}}
.sec.dark .logowall{background:var(--line-soft);border-color:var(--line)}

.lw{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:24px 22px;
  background:var(--surface);
  transition:background .18s;
}
.sec.alt .lw{background:var(--raised)}
.sec.dark .lw{background:var(--ink-2)}
.lw:hover{background:var(--electric-soft)}
.sec.dark .lw:hover{background:var(--ink-3)}
/* Sector glyph standing in for a client logo. MSAs prohibit naming the
   client, so the tile marks the vertical rather than the brand. */
.lw .mark{
  display:grid;place-items:center;
  width:40px;height:40px;flex:none;
  margin-bottom:2px;
  border-radius:var(--r);
  background:var(--electric-soft);
  color:var(--electric);
}
.lw .mark svg{
  width:21px;height:21px;
  stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* rotate the accent so the wall does not read as one flat colour */
.lw:nth-child(3n+2) .mark{background:rgba(255,194,71,.16);color:#B07C0A}
.lw:nth-child(3n) .mark{background:rgba(21,130,87,.13);color:var(--good)}
.sec.dark .lw .mark{background:rgba(255,255,255,.06);color:var(--on-dark)}

.lw .name{
  font-family:var(--font-display);font-weight:800;font-size:16px;
  letter-spacing:-.028em;
}
.lw .what{font-size:13.5px;color:var(--fg-muted)}
.sec.dark .lw .what{color:var(--on-dark-dim)}
.lw .since{
  margin-top:auto;padding-top:8px;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);
}

.testi{
  display:grid;gap:16px;margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
}
.tcard{
  display:flex;flex-direction:column;gap:16px;
  padding:26px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.sec.alt .tcard{background:var(--raised)}
.tcard blockquote{
  margin:0;
  font-family:var(--font-display);font-weight:700;font-size:17.5px;
  line-height:1.44;letter-spacing:-.024em;
}
.tcard blockquote::before{
  content:"\201C";
  color:var(--signal);
  font-size:32px;line-height:0;
  vertical-align:-.2em;
  margin-right:3px;
}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:4px}
.tcard .who .av{
  width:36px;height:36px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--electric-soft);
  color:var(--electric);
  font-family:var(--font-mono);font-size:12px;
}
.tcard .who b{display:block;font-size:14.5px;font-weight:600}
.tcard .who span{display:block;font-size:13px;color:var(--fg-muted)}

/* ---- leadership -------------------------------------------------------- */
.team{
  display:grid;gap:18px;margin-top:42px;
  grid-template-columns:repeat(auto-fit,minmax(242px,1fr));
}
@media(min-width:1100px){.team{grid-template-columns:repeat(4,1fr)}}
.person{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
}
.sec.alt .person{background:var(--raised)}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--electric)}
.person .photo{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#0F2E8F,#2B5BFF);
}
.person:nth-child(2) .photo{background:linear-gradient(150deg,#0D1423,#3F6BFF)}
.person:nth-child(3) .photo{background:linear-gradient(150deg,#6B4100,#FFC247)}
.person:nth-child(4) .photo{background:linear-gradient(150deg,#08402B,#158257)}
.person .photo::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.14) 1px,transparent 0);
  background-size:15px 15px;
}
.person .photo b{
  position:relative;z-index:1;
  font-family:var(--font-display);font-weight:800;font-size:40px;
  color:#fff;letter-spacing:-.04em;
}
.person .info{display:flex;flex-direction:column;gap:7px;flex:1;padding:20px 20px 22px}
.person h3{font-size:18px;letter-spacing:-.03em}
.person .role{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--electric);
  min-height:2.6em;line-height:1.35;
}
.person p{color:var(--fg-muted);font-size:14.5px;flex:1}
.person .lk{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:4px;
  font-weight:600;font-size:13.5px;
  color:var(--fg-dim);
  text-decoration:none;
}
.person .lk:hover{color:var(--electric)}
.person .lk svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* A long skill label ("Python automation") is wider than a phone-width panel,
   and chips are nowrap by default, so let them break rather than overflow. */
@media(max-width:520px){
  .chip{white-space:normal}
  .panel-body .chips{gap:7px}
}

/* ---- careers / job board ----------------------------------------------- */
.jobs-bar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:16px}
.fpill{
  padding:9px 17px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--fg-muted);
  font-family:var(--font-body);font-weight:600;font-size:13.5px;
  cursor:pointer;
  transition:var(--dur-fast);
}
.fpill:hover{border-color:var(--electric);color:var(--electric)}
.fpill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.searchrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:13px}
.tally{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--fg-dim)}

.joblist{
  margin-top:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.sec.alt .joblist{background:var(--raised)}
.jobrow{
  display:grid;grid-template-columns:1fr auto;
  gap:8px 22px;align-items:center;
  width:100%;
  padding:19px clamp(18px,2.2vw,26px);
  background:none;
  border:0;border-bottom:1px solid var(--line-soft);
  color:inherit;font:inherit;text-align:left;
  cursor:pointer;
  transition:background .14s;
}
.jobrow:last-child{border-bottom:0}
.jobrow:hover{background:var(--electric-soft)}
.jobrow h3{font-size:18px;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* marks the practices the firm leads with; these rows sort to the top */
.jobrow .hot{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 8px;
  border-radius:var(--r-pill);
  background:rgba(255,194,71,.18);
  color:#8A5A00;
}
.jobrow.feat{box-shadow:inset 3px 0 0 var(--signal)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .jobrow .hot{background:#3A2B06;color:var(--signal)}
}
:root[data-theme="dark"] .jobrow .hot{background:#3A2B06;color:var(--signal)}
.jobrow .meta{
  display:flex;flex-wrap:wrap;gap:4px 16px;
  margin-top:6px;
  font-size:13.5px;color:var(--fg-muted);
}
.jobrow .meta .rt{color:var(--good);font-weight:600}
.jobrow .right{display:flex;align-items:center;gap:15px;justify-self:end}
.arrow{
  width:19px;height:19px;flex:none;
  color:var(--fg-dim);
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .16s,color .16s;
}
.jobrow:hover .arrow{transform:translateX(4px);color:var(--electric)}
.joblist-empty{padding:40px clamp(18px,2.2vw,26px);color:var(--fg-muted)}
.joblist-empty a{color:var(--electric)}
@media(max-width:660px){
  .jobrow{grid-template-columns:1fr}
  .jobrow .right{justify-self:start}
}

/* ---- about ------------------------------------------------------------- */
.split{display:grid;gap:42px;grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:clamp(38px,4.4vw,76px)}}

/* Attributed pull-quote. It follows the intro rather than preceding it, so the
   reader has the context before the claim. */
.quote{
  margin:30px 0 0;padding-left:22px;
  border-left:4px solid var(--signal);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(20px,1.9vw,26px);
  line-height:1.25;letter-spacing:-.03em;
}
/* Quote marks go on the text span, not the blockquote: an ::after on the
   blockquote lands after <cite> and drops the closing mark onto its own line. */
.quote q{quotes:"\201C" "\201D"}
.quote cite{
  display:block;margin-top:12px;
  font-family:var(--font-mono);font-style:normal;font-weight:500;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);
}
.sec.dark .quote cite{color:var(--on-dark-dim)}

/* Hard facts under the quote: cheap credibility the prose cannot supply. */
.proof{
  display:flex;flex-wrap:wrap;gap:12px 34px;
  margin:30px 0 0;padding-top:24px;
  border-top:1px solid var(--line);
}
.sec.dark .proof{border-top-color:#1E2B3F}
.proof div{display:grid;gap:5px}
.proof dt{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-dim);
}
.sec.dark .proof dt{color:var(--on-dark-dim)}
.proof dd{
  margin:0;
  font-family:var(--font-display);font-weight:800;
  font-size:16px;letter-spacing:-.02em;
}

.pillars{
  display:grid;gap:2px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.sec.dark .pillars{background:var(--line-soft);border-color:var(--line)}
.pillar{
  display:grid;grid-template-columns:auto 1fr;gap:17px;
  padding:22px 24px;
  background:var(--surface);
}
.sec.dark .pillar{background:var(--ink-2)}
.pillar .mk{
  width:34px;height:34px;
  border-radius:var(--r);
  display:grid;place-items:center;
  background:var(--electric-soft);
  color:var(--electric);
  font-family:var(--font-mono);font-size:11px;
}
.sec.dark .pillar .mk{background:rgba(255,194,71,.13);color:var(--signal)}
.pillar h3{font-size:17px;margin-bottom:6px;letter-spacing:-.028em}
.pillar p{color:var(--fg-muted);font-size:14.5px}
.sec.dark .pillar p{color:var(--on-dark-muted)}

/* A section heading that sits directly in a .split column rather than inside
   a .shead wrapper, used by About and Contact. */
.split h2{font-size:var(--t-h2);margin-top:14px;letter-spacing:-.032em}
.split .intro{margin-top:18px;color:var(--fg-muted);font-size:var(--t-lede)}

/* ---- contact ----------------------------------------------------------- */
.cdl{display:grid;gap:20px;margin-top:28px}
/* the postal address reads as body copy, not as a bold value like the rest */
.cdl dd.addr{font-weight:400;font-size:15.5px;color:var(--fg-muted)}
.cdl dt{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-dim);
}
.cdl dd{margin:6px 0 0;font-size:17px;font-weight:600}
.cdl a{color:var(--electric);text-decoration:none}
.sec.dark .cdl a{color:var(--signal)}
.cdl a:hover{text-decoration:underline}

/* Contact routes. The form was never wired to anything, so it is replaced by
   two explicit paths: clients to info@, candidates to hr@. Each mailto opens
   prefilled, which does the job the form's fields were pretending to do. */
.routes{display:grid;gap:16px}

.route{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:26px 24px 24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease;
}
.route:hover{transform:translateY(-2px);border-color:var(--electric)}
.sec.dark .route{background:var(--ink-2);border-color:var(--line)}

.rtag{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--electric);
}
.route:nth-child(2) .rtag{color:#B07C0A}
.sec.dark .route:nth-child(2) .rtag{color:var(--signal)}

.route h3{margin-top:10px;font-size:20px;letter-spacing:-.03em}
.route > p{margin-top:9px;font-size:14.5px;color:var(--fg-muted)}
.sec.dark .route > p{color:var(--on-dark-muted)}

.rlist{
  list-style:none;
  margin:16px 0 20px;padding:0;
  display:grid;gap:7px;
  font-size:13.5px;color:var(--fg-muted);
}
.sec.dark .rlist{color:var(--on-dark-muted)}
.rlist li{display:flex;align-items:center;gap:9px}
.rlist li::before{
  content:"";
  width:5px;height:5px;flex:none;
  border-radius:50%;
  background:var(--electric);
}
.route:nth-child(2) .rlist li::before{background:var(--signal)}

/* the address block keeps its own smaller treatment */
.route .btn{margin-top:auto}


/* ---- back to top ------------------------------------------------------
   The page is long and mobile has no rail to jump from. Appears once the
   reader is well past the hero; sits clear of the job panel (z-index 100). */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:75;
  display:grid;place-items:center;
  width:48px;height:48px;
  border:1px solid var(--on-dark-line);
  border-radius:50%;
  /* amber, not ink: the button spends most of its life over the dark footer
     and a dark circle on a dark ground is invisible there */
  background:var(--signal);
  color:var(--ink);
  border-color:var(--signal);
  cursor:pointer;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.55);
  opacity:0;transform:translateY(10px);
  transition:opacity .25s ease,transform .25s var(--ease-out),
             background .16s ease,color .16s ease;
}
.totop.on{opacity:1;transform:none}
.totop:hover{background:#FFCF6B;transform:translateY(-2px)}
.totop svg{
  width:20px;height:20px;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(min-width:1100px){
  /* clear of the rail gutter, and a touch larger where there is room */
  .totop{right:28px;bottom:28px}
}
@media (pointer:coarse){
  .totop{width:52px;height:52px}
}
/* keep the floating button clear of the footer's last line, which it would
   otherwise sit on top of once the page is scrolled to the very bottom */
@media(max-width:900px){
  .fbot{padding-bottom:56px}
}
@media (prefers-reduced-motion: reduce){
  .totop{transition:opacity .25s ease}
}


/* ============================================================================
   08  OVERLAYS: job detail panel
   ========================================================================= */
.scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(7,12,22,.68);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
.scrim.on{opacity:1;pointer-events:auto}

.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(660px,100%);
  background:var(--paper);
  transform:translateX(101%);
  transition:transform .3s var(--ease-panel);
  overflow-y:auto;
  box-shadow:-30px 0 70px -34px rgba(0,0,0,.7);
}
.panel.on{transform:none}

.panel-head{
  position:sticky;top:0;z-index:2;
  padding:26px 30px 24px;
  background:var(--ink);
  color:var(--on-dark);
}
.panel-head h2{
  font-size:clamp(22px,2.6vw,30px);
  margin-top:12px;padding-right:46px;
  letter-spacing:-.034em;
}
.panel-head .badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.panel-eyebrow{color:var(--signal)}
.badge-skill{background:#18233A;color:#B4C1D8}
.panel-summary{font-size:var(--t-lede)}

.closex{
  position:absolute;top:20px;right:22px;
  width:36px;height:36px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  border:0;border-radius:var(--r);
  color:var(--on-dark);
  cursor:pointer;
}
.closex:hover{background:rgba(255,255,255,.16)}
.closex svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

.panel-body{padding:28px 30px 44px;display:grid;gap:26px}
.panel-body > *{min-width:0}
.panel-body h3{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-dim);
}
.panel-body ul{
  margin:0;padding-left:20px;
  display:grid;gap:9px;
  color:var(--fg-muted);font-size:var(--t-sm);
}
.panel-body ul li::marker{color:var(--electric)}

.facts{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),1fr));
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  min-width:0;
}
.facts > div{background:var(--surface);padding:14px 16px;min-width:0}
.facts dt{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);
}
.facts dd{margin:5px 0 0;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}

.apply{
  padding:26px;
  background:var(--ink);
  color:var(--on-dark);
  border-radius:var(--r-lg);
  min-width:0;
}
.apply h3{color:var(--signal)}
.apply p{
  margin-bottom:20px;
  font-size:var(--t-sm);
  color:var(--on-dark-muted);
  overflow-wrap:anywhere;
}
.apply code{font-family:var(--font-mono);font-size:13px;color:var(--signal)}
.apply .acts{display:flex;flex-wrap:wrap;gap:11px}


/* ============================================================================
   09  FOOTER
   ========================================================================= */
footer.page{
  background:var(--rail);
  color:var(--on-dark-dim);
  padding-block:48px 26px;
  font-size:14px;
}
.fgrid{display:grid;gap:36px 32px;grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
/* the brand column carries the blurb and social row, so it gets extra width */
@media(min-width:1000px){
  .fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr}
}
footer.page .logo{color:var(--on-dark);margin-bottom:16px}
footer.page .blurb{max-width:34ch;margin:0;line-height:1.7}

/* Social row. Declared after `footer.page ul`, which sets display:grid, so
   this must re-assert flex or the icons stack vertically. */
footer.page ul.social{
  display:flex;flex-wrap:wrap;gap:9px;
  list-style:none;margin:20px 0 0;padding:0;
}
.social a{
  display:grid;place-items:center;
  width:34px;height:34px;
  border:1px solid #1F2C42;
  border-radius:var(--r);
  color:var(--on-dark-dim);
  transition:color .16s,border-color .16s,background .16s,transform .16s;
}
/* `footer.page a:hover` sets colour to --signal and would otherwise win here,
   painting the glyph the same amber as the tile it sits on. */
footer.page .social a:hover{
  color:var(--ink);
  background:var(--signal);
  border-color:var(--signal);
  transform:translateY(-2px);
}
.social svg{width:16px;height:16px;display:block}

/* label above each contact value */
.flabel{
  display:block;
  font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#5C6B85;
  margin-bottom:3px;
}
footer.page h4{
  margin-bottom:15px;
  font-family:var(--font-mono);
  font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-dark);
}
footer.page ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* labelled contact entries need more room than a plain link list */
footer.page ul.fcontact{gap:14px;line-height:1.55}
footer.page a{color:var(--on-dark-dim);text-decoration:none}
footer.page a:hover{color:var(--signal)}
.fbot{
  margin-top:38px;padding-top:20px;
  border-top:1px solid var(--on-dark-line);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:12.5px;
}


/* ============================================================================
   10  MOTION
   Keyframes, then every reduced-motion opt-out in one place.
   ========================================================================= */
@keyframes blip{
  0%,100%{opacity:1}
  50%{opacity:.22}
}
@keyframes slide{
  to{transform:translateX(-50%)}
}
@keyframes feedpulse{
  0%{box-shadow:0 0 0 0 rgba(255,194,71,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,194,71,0)}
  100%{box-shadow:0 0 0 0 rgba(255,194,71,0)}
}
@keyframes feedrow{
  from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
@keyframes feedsheen{
  to{transform:translateX(100%)}
}

@media (prefers-reduced-motion: reduce){
  .shell{transition:none}
  .ticker div{animation:none}
  .tagline i,
  .topmeta .live i{animation:none}
  .panel,
  .scrim{transition:none}
  .feed .fh span::before{animation:none}
  .feed li.in{animation:none}
  .feed li.lit::after{animation:none;display:none}
}