@media(max-width:700px){
  .logo img{height:40px}
}

/* ---- 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. */
  /* Just the swoosh from the lockup. Measured at 6.4:1 against the ink rail,
     so unlike the full logo it needs no light plate here. */
  .rail .railmark{
    pointer-events:auto;
    display:block;width:34px;height:34px;
    margin:0 0 24px 0;
    opacity:0;transform:translateY(-4px);
    transition:opacity .3s ease,transform .3s ease;
  }
  .rail.scrolled .railmark{opacity:1;transform:none}
  .rail .railmark img{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 (B): sticky translucent bar --------------------------- */
.topline{
  position:sticky;top:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px 24px;
  padding-block:16px;
  /* solid at rest; the blur only earns its keep once content is behind it,
     and a translucent bar over nothing just reads as washed-out grey */
  background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.07);
  color:var(--on-dark);
  transition:background .25s ease,padding .25s ease;
}
body.scrolled .topline{
  background:rgba(7,12,22,.82);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  padding-block:10px;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
}
.topline .logo{min-width:0;flex:0 1 auto}
.topline .logo img{height:42px}
.topmeta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;font-size:13.5px}
/* back on the dark hero ground */
.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;
  background:rgba(255,194,71,.06);
  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;
}
/* ============================================================================
   SS Technologies
   Stylesheet for index.html

   ORGANIZATION
     01  Design tokens .............. color, 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
     - Color, 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:#5B6880;

  /* ---- palette: accent ---- */
  --electric:#2B5BFF;
  --electric-2:#5C83FF;
  --electric-soft:#E9EEFF;
  /* --electric on --electric-soft measures 4.49:1, just under the 4.5 floor.
     Small text on that tint uses this darker step instead. */
  --electric-ink:#1D4ED8;
  --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:#707F9C;   /* 4.85:1 on the rail ink; #5A6A86 was 3.58:1 */

  /* ---- 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 -------------------------------------------------------------
   The supplied lockup is a single PNG containing mark, wordmark and the
   "Think Innovative..." tagline, so there is no HTML text to style. It is
   dark teal artwork with a transparent ground: it needs a light surface. */
.logo{
  display:inline-flex;align-items:center;
  text-decoration:none;color:inherit;min-width:0;
}
.logo img{
  display:block;
  width:auto;height:48px;          /* intrinsic 337x96, so ~169px wide */
  max-width:100%;
}
@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);                /* topline floats on the dark hero */
  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;
}

/* Very short portrait phones (iPhone SE, 568px tall) cannot fit ten rows at
   full comfort either; trim the row padding so the CTA stays above the fold
   while the tap targets remain usable. */
/* Short viewports. Ten links plus a CTA cannot fit under ~550px of height at
   usable tap sizes, so rather than shrinking rows past comfort the link list
   scrolls and the CTA is pinned to the bottom of the drawer: always reachable
   without hunting for it. The phone and email are dropped here because the
   page footer repeats both. */
@media(max-height:740px){
  .mobilenav{padding:70px 0 0;overflow:hidden;display:flex;flex-direction:column}
  .mobilenav .mnav-links{
    flex:1;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 22px;
  }
  .mobilenav a{padding:10px 0;font-size:15px}
  .mobilenav .mnav-foot{
    flex:none;margin-top:0;
    padding:12px 22px calc(12px + env(safe-area-inset-bottom));
    gap:0;
    border-top:1px solid #141E2E;
    background:var(--ink);
  }
  .mobilenav .mnav-foot a:not(.btn){display:none}
  .mobilenav .mnav-foot .btn{padding:12px 18px}
}

/* Phones in landscape are short but wide. Ten stacked links plus a CTA cannot
   fit ~320px of height, so the drawer widens and runs its links in two
   columns, trading the horizontal space that IS available for vertical room. */
@media(max-height:500px) and (min-width:500px){
  .mobilenav{
    width:min(420px,72vw);
    padding:58px 22px 16px;
  }
  .mobilenav .mnav-links{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:18px;
  }
  .mobilenav a{padding:8px 0;font-size:14.5px}
  .mobilenav .mnav-foot{padding-top:12px;gap:7px;font-size:13px}
  .mobilenav .mnav-foot .btn{padding:9px 16px;font-size:14px}
}

@media(max-width:1099px){
  .navtoggle{display:grid}
  /* keep the toggle above the drawer so the X is reachable to close it.
     position stays sticky: overriding it to relative would kill the pinned
     header on exactly the screens where it is most useful. */
  .topline{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-ink)}
.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-ink);
  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);
  /* the topline now sits directly above on the same ink ground and supplies
     its own lead-in, so the hero starts tighter than when it followed a band */
  padding-block:clamp(26px,3.2vw,48px) 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}
/* Color 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 h2{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:#6F7F9B;          /* 4.7:1 on the panel ground; #5F6E88 was 3.7:1 */
  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:clamp(40px,4.4vw,64px) 0 0;padding:0;
  list-style:none;                 /* semantic <ul>, presented as a stat row */
  border-top:1px solid #16202F;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.strip li{padding:22px 22px 24px 0;border-right:1px solid #16202F}
.strip li: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 color */
.lw:nth-child(3n+2) .mark{background:rgba(255,194,71,.16);color:#8A5A00}
.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-ink);
  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)}
/* About runs on ink, where --fg-muted measures 3.28:1 */
.sec.dark .split .intro{color:var(--on-dark-muted)}

/* ---- 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:#8A5A00}
.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 uses the same knockout logo as the header, so it needs no plate:
   the artwork reads directly on the ink ground (measured 12.1:1). */
footer.page .logo{display:inline-flex;margin-bottom:18px}
footer.page .logo img{height:44px}
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 color 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:var(--on-dark-dim);   /* 6.5:1 on the footer ink */
  margin-bottom:3px;
}
/* h3 on accessibility.html, h4 on index.html: the level differs because the
   preceding section headings differ, but they render identically. */
footer.page h3,
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}
/* labeled 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}
}

/* ============================================================================
   11  DOCUMENT PAGE  (accessibility.html)
   A single readable column on paper, reusing the site's shell, topline and
   footer. Long-form prose rather than the marketing sections.
   ========================================================================= */
.content--doc{background:var(--paper)}
/* The doc page has no rail, so cancel the rail-gutter inset that .sec and
   .topline carry for the home page and center the column instead. */
@media(min-width:1100px){
  .content--doc .topline,
  .content--doc .sec,
  .content--doc footer.page{padding-left:var(--pad)}
}
/* Left-aligned, not centred: the topline logo and the footer both start at
   the page's --pad inset, and a centred column drifts hundreds of pixels away
   from them on a wide screen. The 74ch cap still holds the line length. */
.content--doc .doc{margin-inline:0}

.doc{max-width:74ch;padding-block:clamp(36px,4vw,64px) clamp(48px,5vw,80px)}
.doc h1{font-size:var(--t-h2);margin-top:14px;letter-spacing:-.032em}
.doc-meta{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);
}
.doc h2{
  font-size:21px;letter-spacing:-.03em;
  margin-top:clamp(34px,3.4vw,46px);
  padding-top:22px;
  border-top:1px solid var(--line);
}
.doc h3{font-size:16.5px;letter-spacing:-.022em;margin-top:20px}
.doc p{margin-top:14px;color:var(--fg-muted);font-size:var(--t-sm);line-height:1.72}
.doc p a{color:var(--electric);text-decoration:underline;text-underline-offset:.15em}
.doc p a:hover{color:var(--fg)}

.doc-list{
  margin:14px 0 0;padding-left:20px;
  display:grid;gap:11px;
  color:var(--fg-muted);font-size:var(--t-sm);line-height:1.72;
}
.doc-list li::marker{color:var(--electric)}

/* the two published scan results */
.scans{
  display:grid;gap:14px;margin-top:22px;
  grid-template-columns:1fr;
}
/* the doc column is ~74ch, so two cards only fit above this width */
@media(min-width:620px){
  .scans{grid-template-columns:1fr 1fr}
}
.scan{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:20px 22px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.scan-tag{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-dim);
}
.scan-n{
  font-family:var(--font-display);font-weight:800;
  font-size:40px;line-height:1.1;letter-spacing:-.045em;
  margin-top:6px;
  font-variant-numeric:tabular-nums;
}
.scan-n--bad{color:#B4321F}     /* 5.9:1 on white */
.scan-n--good{color:#0C6B46}    /* 5.4:1 on white */
.scan-sub{margin-top:2px;font-size:13.5px;color:var(--fg-muted)}
.scan .lk{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:16px;
  font-weight:600;font-size:14px;
  color:var(--electric);
  text-decoration:none;
}
.scan .lk:hover{text-decoration:underline}
.scan .lk svg{
  width:14px;height:14px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* "How we test" — a real description list, term + explanation */
.testlist{margin:18px 0 0;display:grid;gap:16px}
.testlist > div{
  display:grid;gap:4px;
  padding-left:16px;
  border-left:2px solid var(--line);
}
.testlist dt{font-weight:600;font-size:var(--t-sm);color:var(--fg)}
.testlist dd{margin:0;color:var(--fg-muted);font-size:var(--t-sm);line-height:1.7}