:root{
    --paper:#FFFFFF;
    /* pastels mixed from the two hues in the logo: blue 209deg, orange 30deg */
    --wash-blue:#F4F8FC;
    --tint-blue:#E4EFF8;
    --wash-amber:#FDF8F3;
    --tint-amber:#FBEEE2;
    --mist:#F4F8FC;
    --ink:#0B0B0C;
    --ink-soft:#54565C;
    --ink-faint:#6C6F76;
    --line:#E1E7EC;
    --line-soft:#EDF1F4;
    --blue:#0057A8;
    --amber:#F07800;
    --amber-deep:#A85400;
    --f:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);
    --pad:clamp(20px,5vw,72px);
    --maxw:1180px;
  }
  *{box-sizing:border-box}
  /* author display rules otherwise beat the UA rule for [hidden] */
  [hidden]{display:none!important}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--f);font-size:17px;line-height:1.55;font-weight:400;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  h1,h2,h3,p,figure,blockquote{margin:0}
  a{color:inherit;text-decoration:none}
  /* height-only sizing plus a width="" attribute (a presentational hint) would
     stretch the logo, so preserve the intrinsic ratio globally */
  img{display:block;max-width:100%;height:auto}
  ::selection{background:#0B0B0C;color:#fff}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
  .eyebrow{
    display:inline-flex;align-items:flex-start;gap:9px;
    font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  }
  /* keeps the dot on the first line when the label wraps on a narrow screen */
  .eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);flex:0 0 auto;margin-top:.5em}
  .display{font-weight:500;letter-spacing:-.035em;line-height:1.03}
  .lede{color:var(--ink-soft);font-size:clamp(16.5px,1.35vw,20px);line-height:1.5}
  :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}

  /* ---------- buttons and links ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-height:48px;padding:0 26px;border:0;border-radius:100px;cursor:pointer;
    font-family:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;
    background:var(--ink);color:var(--paper);
    transition:transform .5s var(--ease),opacity .3s ease;
  }
  .btn:hover{transform:translateY(-1px);opacity:.88}
  .btn-quiet{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .btn-quiet:hover{border-color:var(--ink);opacity:1}
  .ulink{position:relative;display:inline-block;font-weight:500}
  .ulink::after{
    content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--amber);
    transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
  }
  .ulink:hover::after{transform:scaleX(1)}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:60;background:rgba(255,255,255,.66);
    backdrop-filter:saturate(1.7) blur(12px);-webkit-backdrop-filter:saturate(1.7) blur(12px);
    border-bottom:1px solid transparent;
    transition:border-color .45s ease,background .45s ease,backdrop-filter .45s ease;
  }
  header.pinned{
    border-bottom-color:var(--line);background:rgba(255,255,255,.9);
    backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  }
  /* without a composited backdrop filter the translucency would let the page
     text read through the bar, so go opaque instead */
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    header{background:#fff}
    header.pinned{background:#fff}
  }
  /* reading position, drawn on the header's own bottom edge */
  .scroll-progress{
    position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
    background:linear-gradient(90deg,var(--amber),var(--blue));
    opacity:0;transition:opacity .5s ease;pointer-events:none;
  }
  header.pinned .scroll-progress{opacity:1}
  /* vertical padding only: the side gutter comes from .wrap, and a `padding`
     shorthand here put the logo against the screen edge on phones */
  /* .pinned arrives after a few pixels (hairline, progress bar); .scrolled
     after 120px, when the links pull together into a pill, the bar compacts
     and the logo closes down to the star */
  .nav{position:relative;display:flex;align-items:center;gap:16px;min-height:70px;padding-top:10px;padding-bottom:10px;transition:min-height .5s var(--ease)}
  header.scrolled .nav{min-height:58px}
  header.pinned{box-shadow:0 1px 14px rgba(11,11,12,.05)}
  /* the logo sits in a box that narrows to the star mark once the page has
     moved, and opens again on hover, so the name is never more than a
     pointer away */
  .brand-box{display:block;overflow:hidden;height:46px;width:86px;transition:width .62s var(--ease),height .5s var(--ease)}
  /* the image keeps its size; the box shrinks around it, so the closed state
     shows the star in the top-left corner and clips the words below it */
  .brand-box img{height:46px;width:auto;max-width:none}
  header.scrolled .brand-box{height:34px;width:33px}
  header.scrolled a:hover .brand-box,header.scrolled a:focus-visible .brand-box{width:86px;height:46px}
  .nav-links{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;align-items:center;justify-content:space-between;
    width:100%;max-width:36rem;min-width:fit-content;height:42px;padding:0 10px;gap:14px;
    border-radius:30px;background:transparent;border:1px solid transparent;
    transition:max-width .5s var(--ease),gap .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
  }
  header.scrolled .nav-links{
    max-width:27rem;gap:2px;background:rgba(255,255,255,.92);border-color:var(--line);
    box-shadow:0 1px 10px rgba(11,11,12,.05);
  }
  .nav-links a{
    position:relative;z-index:1;font-size:15px;color:var(--ink-soft);white-space:nowrap;
    padding:8px 14px;border-radius:100px;transition:color .3s ease;
  }
  .nav-links a:hover{color:var(--ink)}
  .nav-links a.current{color:var(--blue)}
  /* the pill slides between links rather than fading in place */
  .nav-pill{
    position:absolute;z-index:0;top:50%;left:0;height:32px;width:0;translate:0 -50%;
    background:var(--tint-blue);border-radius:100px;
    opacity:0;transition:left .55s var(--ease),width .55s var(--ease),opacity .35s ease;
  }
  .nav-pill.on{opacity:1}
  .nav-end{margin-left:auto;display:flex;align-items:center;gap:12px}
  .nav-end .btn{min-height:42px;padding:0 20px;font-size:15px}
  .icon-btn{
    display:none;place-items:center;width:44px;height:44px;flex:0 0 auto;
    border:1px solid var(--line);border-radius:100px;color:var(--ink);
  }
  @media(max-width:860px){
    .nav-links{display:none}
    .icon-btn{display:grid}
  }

  /* ---------- hero ---------- */
  .hero{
    padding:clamp(44px,8vh,88px) 0 clamp(28px,5vh,48px);
    background:
      radial-gradient(46% 40% at 10% 16%, var(--tint-blue) 0%, transparent 62%),
      radial-gradient(38% 34% at 90% 6%, var(--tint-amber) 0%, transparent 58%);
  }
  /* headline arrives a word at a time; pure CSS animation so it needs no class
     toggle, and if the script never runs the h1 simply renders as normal text */
  .hero h1 .w{display:inline-block;animation:wordUp .8s var(--ease) both}
  @keyframes wordUp{from{opacity:0;transform:translateY(.34em)}to{opacity:1;transform:none}}
  .hero h1{font-size:clamp(35px,6.6vw,88px);max-width:17ch;margin:22px 0 0}
  .hero .lede{margin-top:26px;max-width:52ch}
  .hero-actions{margin-top:38px;display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
  .hero-note{margin-top:30px;font-size:14px;color:var(--ink-faint)}
  /* product announcement above the eyebrow; kept short enough to stay one
     line on a 320px phone */
  .news{
    display:flex;width:fit-content;max-width:100%;align-items:center;gap:10px;margin-bottom:26px;
    padding:4px 14px 4px 4px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.72);
    font-size:14px;color:var(--ink-soft);transition:border-color .3s ease,color .3s ease;
  }
  .news:hover{border-color:#C6D5E4;color:var(--ink)}
  .news-tag{padding:3px 10px;border-radius:100px;background:var(--tint-blue);color:var(--blue);font-size:12.5px;font-weight:500;letter-spacing:.02em}
  .news-arrow{transition:transform .45s var(--ease)}
  .news:hover .news-arrow{transform:translateX(3px)}
  .diagram{margin-top:clamp(28px,4vh,48px);width:100%;height:auto;overflow:visible}
  .diagram .edge{stroke:var(--line);stroke-width:1;fill:none;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.1s var(--ease) .25s forwards}
  .diagram .node{fill:var(--paper);stroke:#C9C9CF;stroke-width:1;opacity:0;animation:pop .8s var(--ease) forwards}
  .diagram .node.hot{stroke:var(--amber)}
  .diagram text{font-family:var(--f);font-size:12.5px;fill:var(--ink-faint);opacity:0;animation:pop .8s var(--ease) forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes pop{to{opacity:1}}

  /* ---------- numbers ---------- */
  .figures{border-top:1px solid var(--line);padding:clamp(36px,5vh,56px) 0}
  .figures-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
  .fig .n{font-size:clamp(40px,5.6vw,80px);font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
  .fig .k{margin-top:12px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .fig .d{margin-top:10px;font-size:15px;color:var(--ink-soft);max-width:30ch}
  @media(max-width:700px){
    .figures-grid{grid-template-columns:minmax(0,1fr);gap:30px}
    .fig{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline}
    .fig .n{font-size:44px;min-width:4ch}
    .fig .k{margin-top:0}
    .fig .d{grid-column:2;margin-top:2px}
  }

  /* ---------- client strip ---------- */
  .clients{padding:0 0 clamp(28px,4vh,44px)}
  .marquee{
    margin-top:clamp(18px,2.4vh,26px);overflow:hidden;
    /* the names fade out at both edges instead of being cut off */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  }
  .marquee-inner{display:flex;width:max-content;animation:marquee 58s linear infinite}
  /* the second row drifts the other way, a little slower, so the two never
     look locked together */
  .marquee+.marquee{margin-top:6px}
  .marquee.rev .marquee-inner{animation-direction:reverse;animation-duration:66s}
  .marquee:hover .marquee-inner{animation-play-state:paused}
  /* the trailing gap belongs to the track, so the two copies meet exactly and
     the loop has no visible seam */
  /* a fixed row height, so the strip is the same size whether or not the
     tallest logo has arrived yet */
  .marquee-track{
    display:flex;align-items:center;list-style:none;margin:0;height:68px;
    gap:clamp(38px,5.4vw,80px);padding:0 clamp(38px,5.4vw,80px) 0 0;
  }
  .marquee-track li{display:flex;align-items:center;flex:0 0 auto}
  /* an icon-only mark carries the company name beside it */
  .marquee-track li.with-name{gap:12px}
  /* each mark in its own colours, which is also how their brand rules want it */
  .marquee-track img{display:block;width:auto;max-width:190px;object-fit:contain}
  /* the width attribute is only a reservation; the real size comes from the inline height */
  .marquee-track img[width]{width:auto}
  /* clients whose logo file we do not have yet are set as type, in ink rather
     than grey so they carry the same weight as a coloured mark beside them */
  .wordmark{
    font-size:clamp(17px,1.7vw,22px);font-weight:500;letter-spacing:-.012em;
    color:var(--ink);white-space:nowrap;
  }
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* no motion: the strip becomes a plain wrapped list, one copy only */
  @media(prefers-reduced-motion:reduce){
    .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
    .marquee-inner{width:100%}
    .marquee-track{flex-wrap:wrap;row-gap:12px;padding-right:0;height:auto}
    .marquee-track[aria-hidden="true"]{display:none}
  }

  /* ---------- photographs ---------- */
  /* the tint shows while a lazy image is still arriving, instead of a hole */
  .band-photo,.careers-photo,.quote-photo,.jobs-head-photo{border-radius:18px;overflow:hidden;background:var(--tint-blue)}
  .photo-band{padding:0 0 clamp(32px,5vh,56px)}
  .band-photo img{width:100%;aspect-ratio:2/1;object-fit:cover}
  /* a slow settle as it arrives; the reveal script only runs with motion allowed */
  .js-reveal .band-photo img{transform:scale(1.05);transition:transform 1.6s var(--ease)}
  .js-reveal .band-photo.in img{transform:none}
  @media(max-width:700px){
    .band-photo,.careers-photo,.quote-photo{border-radius:14px}
    .band-photo img{aspect-ratio:4/3;object-position:50% 70%}
  }

  /* ---------- section shell ---------- */
  section{padding:clamp(52px,8vh,92px) 0}
  .shead{max-width:46ch}
  .shead h2{font-size:clamp(28px,4.2vw,56px);margin-top:20px}
  .shead p{margin-top:20px}

  /* ---------- services accordion ---------- */
  .acc{margin-top:clamp(28px,4vh,44px);border-top:1px solid var(--line)}
  .acc-item{border-bottom:1px solid var(--line)}
  .acc-btn{
    width:100%;display:flex;align-items:baseline;gap:clamp(16px,3vw,40px);
    padding:clamp(20px,2.6vh,30px) 0;background:none;border:0;cursor:pointer;text-align:left;
    font-family:inherit;color:var(--ink);
  }
  .acc-btn .num{font-size:13px;font-weight:500;color:var(--ink-faint);font-variant-numeric:tabular-nums;flex:0 0 auto;letter-spacing:.06em}
  .acc-btn .t{font-size:clamp(20px,2.5vw,32px);font-weight:500;letter-spacing:-.025em;line-height:1.15;flex-grow:1;transition:color .3s ease}
  .acc-btn:hover .t{color:var(--amber-deep)}
  .acc-item{position:relative}
  .acc-item::before{
    content:"";position:absolute;inset:0 calc(var(--pad) * -0.45);z-index:0;
    background:var(--tint-blue);opacity:0;transition:opacity .35s ease;pointer-events:none;border-radius:6px;
  }
  .acc-item:hover::before{opacity:.5}
  .acc-btn,.acc-panel{position:relative;z-index:1}
  .acc-btn .chev{flex:0 0 auto;width:22px;height:22px;position:relative;align-self:center}
  .acc-btn .chev::before,.acc-btn .chev::after{content:"";position:absolute;background:var(--ink)}
  .acc-btn .chev::before{left:0;top:10.5px;width:22px;height:1px}
  .acc-btn .chev::after{left:10.5px;top:0;width:1px;height:22px;transition:transform .5s var(--ease),opacity .4s ease}
  .acc-btn[aria-expanded="true"] .chev::after{transform:rotate(90deg);opacity:0}
  .acc-panel{overflow:hidden;height:0;opacity:0;transition:height .5s var(--ease),opacity .4s ease}
  .acc-panel .inner{padding:0 0 clamp(22px,3vh,34px) 0;max-width:62ch;color:var(--ink-soft)}
  .acc-panel .inner p+p{margin-top:12px}
  @media(min-width:861px){
    .acc-panel .inner{margin-left:calc(13px + 3vw)}
  }

  /* ---------- dark band ---------- */
  /* the one section that gets a deeper tint, so it still reads as its own band
     without a saturated dark block fighting the pastels */
  .band{background:var(--tint-blue);color:var(--ink)}
  .band .eyebrow{color:var(--ink-soft)}
  .band .eyebrow::before{background:var(--amber)}
  .band h2{font-size:clamp(28px,4.4vw,60px);max-width:20ch;margin-top:22px}
  .band p{margin-top:24px;max-width:56ch;color:var(--ink-soft);font-size:clamp(16.5px,1.3vw,19px)}
  .wave{margin-top:clamp(24px,4vh,40px);width:100%;height:80px;overflow:visible}
  @media(max-width:700px){.wave{height:44px;margin-top:32px}}
  .wave path{stroke:#B9CFE6;stroke-width:1;fill:none}
  .wave path.lit{stroke:var(--amber)}

  /* ---------- iCallStar ---------- */
  /* white into the palest blue, so it reads apart from the white process
     section that follows without a hard band */
  .product{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 35%,var(--wash-blue) 100%)}
  .product-brand{display:flex;align-items:center;gap:12px;font-size:clamp(22px,2vw,26px);font-weight:600;letter-spacing:-.025em;color:#0F2444}
  .product-brand img{height:40px;width:auto}
  .product-shot{margin:clamp(28px,4vh,48px) auto 0;max-width:1000px}
  .product-shot img{width:100%}
  @media(max-width:699px){
    .product-shot img{width:min(300px,86%);margin:0 auto}
  }
  .product-points{margin-top:clamp(28px,4vh,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
  .pt{border-top:1px solid var(--line);padding-top:22px}
  .pt h3{font-size:clamp(18px,1.6vw,21px);font-weight:500;letter-spacing:-.018em;line-height:1.25}
  .pt p{margin-top:10px;font-size:16px;color:var(--ink-soft);max-width:36ch}
  .product-for{margin-top:clamp(22px,3vh,32px);font-size:15px;color:var(--ink-faint);max-width:72ch}
  @media(max-width:860px){
    .product-points{grid-template-columns:minmax(0,1fr);gap:26px}
  }

  /* ---------- process ---------- */
  .proc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,90px);align-items:start}
  .proc-sticky{position:sticky;top:128px}
  .step{border-top:1px solid var(--line);padding:clamp(20px,2.6vh,30px) 0}
  .step:first-child{border-top:0;padding-top:0}
  .step .n{font-size:13px;font-weight:500;letter-spacing:.12em;color:var(--amber-deep);text-transform:uppercase}
  .step h3{font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;margin-top:12px}
  .step p{margin-top:12px;color:var(--ink-soft);max-width:52ch}
  @media(max-width:860px){
    .proc{grid-template-columns:minmax(0,1fr);gap:34px}
    .proc-sticky{position:static}
  }

  /* ---------- quote ---------- */
  .quote{background:var(--wash-amber)}
  .quote blockquote{font-size:clamp(26px,4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.12;max-width:26ch}
  .quote figcaption{margin-top:28px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .quote-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
  .quote-grid blockquote{font-size:clamp(26px,3.3vw,46px)}
  .quote-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
  @media(max-width:860px){
    .quote-grid{grid-template-columns:minmax(0,1fr);gap:36px}
    .quote-photo{aspect-ratio:3/2}
  }

  /* ---------- careers ---------- */
  .role{margin-top:clamp(30px,5vh,56px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(26px,4vh,40px) 0;display:flex;gap:clamp(20px,4vw,60px);align-items:flex-start;flex-wrap:wrap}
  .role .meta{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);min-width:150px}
  .role h3{font-size:clamp(21px,2.3vw,30px);font-weight:500;letter-spacing:-.02em}
  .role p{margin-top:12px;color:var(--ink-soft);max-width:56ch}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
  .rows{margin-top:clamp(20px,3vh,32px)}
  .row{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--line);align-items:baseline;flex-wrap:wrap}
  .row:last-child{border-bottom:1px solid var(--line)}
  .row dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);min-width:118px;margin:0}
  .row dd{margin:0;font-size:clamp(16px,1.3vw,18px);line-height:1.5}
  @media(max-width:560px){
    .row{display:block}
    .row dt{margin-bottom:8px}
  }
  /* Comfortable tap targets wherever the layout has gone compact — 860px is
     also where the desktop nav collapses, so below it assume a touch screen. */
  @media(max-width:860px){
    .row dd a,.hero-actions .ulink,.role .ulink,.foot p a,
    .crumb a,.joblink,.job-detail .applyinst a,.noresults a,.noresults .ulink{display:inline-block;padding:9px 0}
    .foot nav{gap:0}
    .foot nav a{padding:9px 0}
    .legal{padding-bottom:4px}
    .legal .ulink{display:inline-block;padding:8px 0}
  }
  /* scoped: an unscoped `form` rule leaks onto the careers filter form and the
     apply form on other pages */
  .contact-grid form{display:flex;flex-direction:column;gap:26px}
  .field{display:flex;flex-direction:column;gap:9px}
  .field label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
  .field input,.field textarea{
    font-family:inherit;font-size:17px;color:var(--ink);background:transparent;
    border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;
    transition:border-color .4s ease;
  }
  /* no drag handle: the box grows with the text instead (app.js) */
  .field textarea{resize:none;min-height:96px;overflow:hidden}
  .field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--ink)}
  .field input::placeholder,.field textarea::placeholder{color:#B6B6BC}
  @media(max-width:860px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:44px}}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(32px,4vh,48px) 0 calc(clamp(22px,3vh,32px) + env(safe-area-inset-bottom))}
  .foot{display:flex;gap:28px 48px;flex-wrap:wrap;align-items:flex-start}
  .foot img{height:40px;width:auto}
  .foot p{font-size:14.5px;color:var(--ink-soft);max-width:38ch;margin-top:14px}
  .foot p a{display:inline-block;padding:2px 0}
  .foot nav{display:flex;flex-direction:column;gap:5px}
  .foot nav a{font-size:14.5px;color:var(--ink-soft);padding:3px 0}
  .foot nav a:hover{color:var(--ink)}
  .foot .ttl{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
  .legal{margin-top:clamp(24px,3vh,36px);padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-faint)}
  .legal .ulink{display:inline-block;padding:3px 0}


  /* ---------- careers listing ---------- */
  .mist{background:var(--wash-blue)}
  .warm{background:var(--wash-amber)}
  .openings{margin-top:clamp(20px,3vh,30px);font-size:clamp(16px,1.3vw,18px);color:var(--ink-soft)}
  .openings strong{font-weight:500;color:var(--ink)}
  .acc-panel .jmeta{font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:14px}
  .acc-panel h4{margin:22px 0 0;font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .acc-panel ul{margin:10px 0 0;padding-left:1.15em}
  .acc-panel li{margin-top:7px}
  .acc-panel li::marker{color:var(--ink-faint)}
  .acc-panel .japply{margin-top:26px}
  .acc-panel .japply .btn{min-height:44px;font-size:15px;padding:0 22px}

  /* ---------- careers teaser on the home page ---------- */
  /* three grid children so a phone can put the photo between the heading and
     the list, while a wide screen stacks the text beside a tall photo */
  .careers-grid{
    display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    grid-template-areas:"head photo" "list photo";column-gap:clamp(36px,6vw,90px);align-items:start;
  }
  .careers-head{grid-area:head}
  .careers-list{grid-area:list}
  .careers-photo{grid-area:photo;margin-top:6px}
  .careers-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
  @media(max-width:860px){
    .careers-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "photo" "list"}
    .careers-photo{margin-top:clamp(28px,4vh,40px)}
    .careers-photo img{aspect-ratio:3/2;object-position:50% 88%}
  }
  .role-peek{list-style:none;margin:clamp(20px,3vh,30px) 0 0;padding:0;border-top:1px solid var(--line)}
  .role-peek li{border-bottom:1px solid var(--line)}
  .role-peek a{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;
    padding:19px 0;transition:padding-left .4s var(--ease)
  }
  .role-peek a:hover{padding-left:10px}
  .role-peek .rt{font-size:clamp(17px,1.6vw,21px);font-weight:500;letter-spacing:-.018em}
  .role-peek a:hover .rt{color:var(--blue)}
  .role-peek .rm{font-size:13.5px;color:var(--ink-faint)}

  /* ---------- apply ---------- */
  .apply-grid{margin-top:clamp(24px,4vh,40px);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,80px);align-items:start}
  .apply-form{display:flex;flex-direction:column;gap:24px;min-width:0}
  .apply-form .field{min-width:0}
  .field .opt{text-transform:none;letter-spacing:0;color:var(--ink-faint);font-size:12.5px}
  .field select{
    font-family:inherit;font-size:17px;color:var(--ink);background:transparent;
    border:0;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;
    appearance:none;-webkit-appearance:none;cursor:pointer;width:100%;max-width:100%;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
    background-position:calc(100% - 13px) 1.25em,calc(100% - 7px) 1.25em;
    background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:28px;
    transition:border-color .4s ease;
  }
  .field select:focus{outline:0;border-bottom-color:var(--ink)}
  .drop{
    position:relative;display:flex;flex-direction:column;gap:5px;
    border:1px dashed #C9C9CF;border-radius:10px;padding:22px 20px;background:rgba(255,255,255,.55);
    transition:border-color .3s ease,background .3s ease;
  }
  .drop:hover,.drop.over{border-color:var(--ink);background:#fff}
  .drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
  .drop input[type=file]:focus-visible+.drop-cta{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
  .drop-cta{font-size:16px;font-weight:500;color:var(--ink)}
  .drop-hint{font-size:13.5px;color:var(--ink-faint)}
  .picked{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
  .picked-name{font-weight:500;overflow-wrap:anywhere}
  .picked-clear{
    font-family:inherit;font-size:13px;color:var(--ink-soft);background:none;cursor:pointer;
    border:1px solid var(--line);border-radius:100px;padding:6px 13px;min-height:32px;
  }
  .picked-clear:hover{border-color:var(--ink);color:var(--ink)}
  .err{margin-top:10px;font-size:14.5px;color:#A32318}
  /* the honeypot: off-screen rather than display:none, so a form-filling bot
     still sees it while a person and a screen reader never do */
  .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .sendnote{font-size:13.5px;color:var(--ink-faint);max-width:52ch}
  /* shown once the application has been handed to their email app */
  .sent{
    display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;align-self:flex-start;
    background:var(--tint-blue);border-radius:12px;padding:14px 18px;font-size:16px;color:var(--ink-soft);
  }
  .sent strong{font-weight:500;color:var(--ink)}
  .apply-side{display:flex;flex-direction:column;gap:clamp(22px,3vh,32px)}
  .side-row{border-top:1px solid var(--line);padding-top:18px}
  .side-row h3{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .side-row p{margin-top:10px;font-size:16px;line-height:1.5}
  .side-row .small{font-size:14.5px;color:var(--ink-soft)}
  .side-row strong{font-weight:500;color:var(--ink)}
  @media(max-width:860px){
    .apply-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  }

  /* ---------- reveal ----------
     Content is visible by default. The script adds .js-reveal to <html> only
     when it is actually running, so a scripting failure leaves a readable page
     rather than a blank one. */
  .js-reveal .r{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js-reveal .r.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .scroll-progress{display:none}
    .hero h1 .w{animation:none}
    .js-reveal .r{opacity:1;transform:none}
    .diagram .edge{stroke-dashoffset:0}
    .diagram .node,.diagram text{opacity:1}
  }

  /* ==================== careers page ==================== */
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .jobs-head{padding:clamp(32px,5vh,56px) 0 clamp(20px,3vh,32px)}
  .crumb{font-size:13.5px;color:var(--ink-faint);margin-bottom:26px}
  .crumb span{margin:0 8px}
  .jobs-head h1{font-size:clamp(34px,5.2vw,68px);margin:20px 0 0}
  .jobs-head .lede{margin-top:20px;max-width:58ch}
  .jobs-head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(32px,5vw,80px);align-items:end}
  .jobs-head-photo{width:100%;aspect-ratio:3/2;object-fit:cover}
  /* on a phone the search matters more than the picture, so it goes */
  @media(max-width:860px){
    .jobs-head-grid{grid-template-columns:minmax(0,1fr)}
    .jobs-head-photo{display:none}
  }

  .jobs-layout{display:grid;grid-template-columns:232px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;padding-bottom:clamp(40px,6vh,72px)}
  .filters-inner{position:sticky;top:104px}
  .filters-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .filters > .filters-inner > .filters-top > h2{font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .filters-toggle{display:none}
  .filters-body{display:block;margin-top:8px}
  /* The separator is a box-shadow, not a border: a <legend> cuts a notch out of
     a fieldset border, and floating it to escape that notch made the first row
     lay out beside the float and overflow the column. No border, no notch, no
     float needed. */
  .fgroup{border-top:1px solid var(--line);padding:18px 0 12px}
  .flegend{font-size:14.5px;font-weight:500;letter-spacing:-.01em;margin:0 0 8px}
  .frow{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:14.5px;color:var(--ink-soft);min-height:32px}
  .frow:hover{color:var(--ink)}
  .frow input{
    appearance:none;-webkit-appearance:none;flex:0 0 auto;width:16px;height:16px;margin:0;
    border:1.5px solid #C2C7CE;border-radius:4px;background:#fff;cursor:pointer;
    transition:border-color .2s ease,background .2s ease;
  }
  .frow input:checked{background:var(--blue);border-color:var(--blue)}
  .frow input:checked::after{content:"";display:block;width:100%;height:100%;
    background:no-repeat center/10px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .fname{flex-grow:1}
  .fcount{font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}

  /* on a phone the facet list is long, so it gets a footer button carrying the
     live result count — otherwise you tick boxes with the results off-screen */
  .fdone{display:none}
  .fdone .btn{width:100%}

  .searchbar{position:relative;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:2px 0 12px;color:var(--ink-faint)}
  .searchbar input{
    flex-grow:1;min-width:0;font-family:inherit;font-size:clamp(16px,1.4vw,19px);color:var(--ink);
    background:transparent;border:0;padding:6px 0;
  }
  .searchbar input:focus{outline:0}
  .searchbar:focus-within{border-bottom-color:var(--ink);color:var(--ink)}
  .searchbar input::placeholder{color:#B0B4BA}
  .searchbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

  .resbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:22px}
  .count{font-size:14.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
  .clear-all{font-family:inherit;font-size:14px;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:6px 0;min-height:30px}
  .clear-all:hover{color:var(--ink);text-decoration:underline}
  .active-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
  .active-chips li{display:flex}
  .active-chips button{
    display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13.5px;color:var(--ink);
    background:var(--tint-blue);border:0;border-radius:100px;padding:8px 13px;cursor:pointer;min-height:32px;
    transition:background .25s ease;
  }
  .active-chips button:hover{background:#D3E4F4}
  .active-chips button::after{content:"\00d7";font-size:16px;line-height:1;color:var(--ink-soft)}

  .job-list{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
  .job{position:relative;border-bottom:1px solid var(--line);padding:clamp(24px,3.2vh,34px) 0;scroll-margin-top:110px}
  .job.hide{display:none}
  /* The deep-linked role is marked with a wash that fades out on every side and
     bleeds past the text column, so it reads as a glow rather than a box with a
     hard edge down the left. */
  .job::before{
    content:"";position:absolute;inset:-4px calc(var(--pad) * -0.55);z-index:0;pointer-events:none;
    opacity:0;transition:opacity 1.1s var(--ease);
    /* The wash fades in and out across the width, and the mask softens the top
       and bottom. Kept separate so an expanded role, which can be two thousand
       pixels tall, gets the same edges as a collapsed one. */
    background:linear-gradient(90deg,
      rgba(251,238,226,0) 0%,
      rgba(251,238,226,.95) 9%,
      rgba(251,238,226,.72) 48%,
      rgba(251,238,226,0) 88%);
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 52px,#000 calc(100% - 52px),rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 52px,#000 calc(100% - 52px),rgba(0,0,0,0) 100%);
  }
  .job.target::before{opacity:1}
  .job > *{position:relative;z-index:1}
  .job h3{font-size:clamp(20px,2.1vw,27px);font-weight:500;letter-spacing:-.024em;line-height:1.16}
  .job-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:13.5px;color:var(--ink-faint)}
  .job-meta span{display:inline-flex;align-items:center;gap:6px}
  .job-meta svg{opacity:.75;flex:0 0 auto}
  .job-meta .spon{color:var(--amber-deep);font-weight:500}
  .job-sum{margin-top:14px;color:var(--ink-soft);max-width:70ch}
  .chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0;padding:0}
  .chips li{font-size:12.5px;color:var(--ink-soft);background:var(--wash-blue);border:1px solid var(--line-soft);border-radius:100px;padding:5px 11px}
  .job-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px}
  .job-actions .btn{min-height:44px;font-size:15px;padding:0 22px}
  .joblink{font-size:14px;color:var(--ink-soft);padding:4px 0}
  .crumb a{display:inline-block;padding:3px 0}
  .job-detail .applyinst a,.noresults a,.noresults .ulink{padding:2px 0}
  .job-detail{overflow:hidden;height:0;opacity:0;transition:height .5s var(--ease),opacity .4s ease}
  .job-detail .inner{padding-top:22px;max-width:70ch}
  .job-detail h4{margin:20px 0 0;font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
  .job-detail h4:first-child{margin-top:0}
  .job-detail ul{margin:10px 0 0;padding-left:1.15em;color:var(--ink-soft)}
  .job-detail li{margin-top:7px}
  .job-detail li::marker{color:var(--ink-faint)}
  .job-detail .applyinst{margin-top:24px;font-size:15px;color:var(--ink-soft)}
  .noresults{margin-top:34px;font-size:clamp(16px,1.3vw,18px);color:var(--ink-soft);max-width:56ch}
  .noresults .ulink{font-family:inherit;font-size:inherit;color:var(--ink);background:none;border:0;cursor:pointer;padding:0}

  @media(max-width:860px){
    .jobs-layout{grid-template-columns:minmax(0,1fr);gap:22px}
    .filters-inner{position:static}
    .filters > .filters-inner > .filters-top > h2{display:none}
    .filters-toggle{
      display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-size:15px;font-weight:500;
      color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:100px;
      padding:0 20px;min-height:46px;cursor:pointer;
    }
    .filters-toggle::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease)}
    .filters-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-2px)}
    .filters-body{display:none;border-top:1px solid var(--line);margin-top:18px}
    .filters-body.open{display:block}
    .frow{min-height:40px;padding:8px 0}
    .fgroup:first-child{border-top:0;padding-top:0}
    .fdone{display:block;margin-top:20px;padding-bottom:4px}
  }