@view-transition {
  navigation: auto;
}

/* Self-hosted ExtraBold includes → (U+2192). Google Fonts' latin subset
   ships ↑/↓ but omits →, which caused company-list arrows to fall back
   to another face. Declared before other Host Grotesk faces so weight
   800 can resolve this file for the arrow glyph. */
@font-face{
  font-family:"Host Grotesk";
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url("/assets/fonts/HostGrotesk-ExtraBold.woff2") format("woff2"),
      url("/assets/fonts/HostGrotesk-ExtraBold.ttf") format("truetype");
}

/* Company-row clicks are handled by animateCompanyEnter in site.js, not
   by the browser's default shared-element view-transition. The native
   one interpolates the logo straight to its destination, but the motion
   here is deliberately staged -- left first, then up, with the logo
   dragging the incoming page up with it -- which the native transition
   has no way to express. `navigation: auto` above still applies to every
   other navigation on the site. */

:root{
    --cream:#FBF6E6;
    --cream-2:#F5EFDC;
    --pink:#FE3C01;
    --pink-dark:#BB2B00;
    --maxw: 700px;
  }
  :root[data-theme="dark"]{
    --cream:#212121;
    --cream-2:#2B2B2B;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    background:var(--cream);
    color:var(--pink);
    font-family:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  @media (min-width:1024px){
    body{font-size:20px;}
  }
  @media (min-width:1440px){
    body{font-size:20px;}
  }
  @media (min-width:1920px){
    body{font-size:20px;}
  }
  h1,h2,h3{
    font-family:"Host Grotesk", sans-serif;
    font-weight:800;
    color:var(--pink);
    line-height:1.15;
    margin:0;
  }
  a{color:var(--pink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px;}
  a:hover{color:var(--pink-dark);}
  p{color:var(--pink); margin:0 0 1rem;}
  button{font-family:inherit;}

  .page{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 1rem 5rem;
    flex:1 0 auto;
    width:100%;
    box-sizing:border-box;
  }
  @media (min-width:900px){
    .page{padding:0 2.5rem 6rem;}
  }
  @media (min-width:1024px){
    /* box-sizing:border-box means max-width includes the padding below,
       so this is 1014px (the target content width, matching images and
       text) + 2*3rem (48px) padding = 1110px. */
    .page{max-width:1110px; padding:0 3rem 7rem;}
  }
  @media (min-width:1440px){
    /* 1170px content width + 2*3rem (48px) padding = 1266px. */
    .page{max-width:1266px; padding:0 3rem 7.5rem;}
  }
  @media (min-width:1920px){
    /* 1404px content width + 2*3.5rem (56px) padding = 1516px. */
    .page{max-width:1516px; padding:0 3.5rem 8.5rem;}
  }

  #siteHeader, #siteFooter{
    width:100%;
    box-sizing:border-box;
    flex-shrink:0;
  }
  #siteHeader{
    position:sticky;
    top:0;
    z-index:1000;
    background:transparent;
  }
  /* On scroll, everything in the header except the CT logo fades out,
     leaving just CT persistently visible/clickable as a home button
     (it's already an <a href="/">, so no separate behavior needed there
     -- this only handles the visual fade). Toggled by site.js. */
  #siteHeader .top-row-right{
    transition:opacity 0.25s ease;
  }
  #siteHeader.scrolled .top-row-right{
    opacity:0;
    pointer-events:none;
  }
  /* Applied by site.js only when the real content scrolling behind CT
     is too close in color to CT's current (page-default) color to stay
     legible -- see initHeaderContrast. Not a general theme override:
     CT keeps its normal page color the rest of the time. */
  .logo.logo-contrast-dark{ color:#481C1E !important; }
  .logo.logo-contrast-light{ color:#E8E8E8 !important; }
  .top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    width:100%;
    margin:0 0 4.5rem;
    padding:1.5rem 1rem 0;
    box-sizing:border-box;
  }
  @media (min-width:900px){
    .top-row{padding:2rem 2.5rem 0;}
    .hero-img-primary{width:auto; margin-left:0; margin-right:0;}
  }
  @media (min-width:1024px){
    .top-row{padding:2.25rem 3rem 0;}
  }
  @media (min-width:1440px){
    .top-row{padding:2.5rem 3rem 0;}
  }
  @media (min-width:1920px){
    .top-row{padding:3rem 3.5rem 0;}
  }
  .logo{
    font-family:"Host Grotesk", sans-serif;
    font-weight:400;
    font-size:0.85rem;
    line-height:1;
    color:var(--pink);
    text-decoration:none;
    display:inline-block;
    border:none;
    background:none;
    padding:0;
    flex-shrink:0;
  }
  .top-row-right{
    display:flex;
    align-items:center;
    gap:2.475rem;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .clock{
    font-size:0.85rem;
    color:var(--pink);
    white-space:nowrap;
  }
  .theme-toggle{
    background:none;
    border:none;
    color:var(--pink);
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
  }
  /* Pink hover is desktop/mouse only so touch :hover stickiness
     cannot lock pink over non-home #481C1E after a tap.
     Color only — never blanket fill/stroke on .theme-toggle svg.
     Mail/resume/LinkedIn rect are stroke-only; fill:!important paints
     them as solid boxes. Icons use stroke/fill="currentColor". */
  @media (hover:hover){
    .theme-toggle:hover{
      color:var(--pink) !important;
    }
  }
  /* Non-home dark: sun (and sticky :hover) stay #E8E8E8 like logo/clock.
     Scoped off home so dark-mode sun there keeps --pink (incl. touch;
     no global white bleach). Other dark header icons: white hover on
     fine pointers only, also non-home. Color only (see pink hover). */
  [data-theme="dark"]:not(:has(#content .home-bio)) .theme-toggle.theme-icon,
  [data-theme="dark"]:not(:has(#content .home-bio)) .theme-toggle.theme-icon:hover{
    color:#E8E8E8 !important;
  }
  @media (hover:hover){
    [data-theme="dark"]:not(:has(#content .home-bio)) .theme-toggle:hover{
      color:#E8E8E8 !important;
    }
  }
  .theme-toggle svg{height:14px !important; width:auto; display:block;}
  .mail-icon-btn svg{height:13px !important;}
  .resume-icon-btn svg{height:17px !important;}
  .linkedin-box{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lang-toggle{
    font-size:0.85rem;
    font-weight:400;
    letter-spacing:0.02em;
  }

  .page-title{
    font-size:2rem;
    font-weight:800;
    margin-bottom:1.25rem;
  }
  /* On mobile, tighten the top margin to match other pages (4.5rem → 1.43rem,
     75% reduction). Restore at 700px and above. */
  @media (max-width:699px){
    .page-title{
      margin-top:1.43rem !important;
      margin-bottom:3.09rem !important;
    }
  }
  .cs-headline{
    font-size:2rem;
    font-weight:800;
    margin-bottom:1.25rem;
  }
  .home-bio{
    font-family:"Host Grotesk", sans-serif;
    font-weight:400;
    color:var(--pink);
    line-height:1.25;
    font-size:1.5rem;
    margin-bottom:2.75rem;
  }
  .principles-list{
    /* Match .body-copy paragraph spacing (p { margin: 0 0 1rem }) so the
       gap above the first principle equals the gap between the two lead
       paragraphs. */
    margin-top:1rem;
    margin-bottom:0;
    display:block !important;
  }
  .principle{
    /* Same line-height as body copy; no extra margin so consecutive
       principles read at paragraph leading. */
    line-height:1.6;
    margin-bottom:0;
    font-weight:400;
    display:block;
  }
  .principle b{
    font-weight:600;
  }
  /* Base font-size only, moved here (ahead of the desktop breakpoints
     below) so those breakpoints correctly win the cascade at desktop
     widths. The rest of each rule's styling (margin, line-height, etc.)
     stays where it already was, further down. */
  .lede{font-size:1.5rem;}
  .cs-lede{font-size:1.5rem;}
  .cs-subhead{font-size:1.5rem;}
  /* CTA labels (and the coming-soon note) match .cs-lede at every breakpoint. */
  .case-study-cta,
  .cs-note{font-size:1.5rem;}
  .pillar-full{max-width:38rem;}
  /* .pillar-quote and .pillar-detail ("So I..."/"At [company]...") are
     always 75% of .pillar-full's max-width at the matching breakpoint,
     so they read as a narrower column against the body copy around them. */
  .pillar-quote, .pillar-detail{max-width:28.5rem;}
  @media (min-width:700px){
    .page-title{font-size:2.5rem;}
    .cs-headline{font-size:2.5rem;}
    .home-bio{font-size:1.7rem;}
    .lede{font-size:1.7rem;}
  }
  @media (min-width:1024px){
    .page-title{font-size:3.5rem; max-width:63.375rem;}
    .cs-headline{font-size:3.5rem; max-width:63.375rem;}
    .home-bio{font-size:2.375rem; max-width:63.375rem;}
    .lede{font-size:2.3125rem; max-width:63.375rem;}
    .cs-lede{font-size:2.0625rem; max-width:63.375rem;}
    .cs-subhead{font-size:2.0625rem;}
    .case-study-cta,
    .cs-note{font-size:2.0625rem;}
    .cs-section{max-width:63.375rem;}
    .body-copy{max-width:47.53rem;}
    .leadership-block{max-width:63.375rem;}
    .pillar-full{max-width:63.375rem;}
    .pillar-quote, .pillar-detail{max-width:47.53125rem;}
  }
  @media (min-width:1440px){
    .page-title{font-size:3.875rem; max-width:73.125rem;}
    .cs-headline{font-size:3.875rem; max-width:73.125rem;}
    .home-bio{font-size:2.625rem; max-width:73.125rem;}
    .lede{font-size:2.5rem; max-width:73.125rem;}
    .cs-lede{font-size:2.25rem; max-width:73.125rem;}
    .cs-subhead{font-size:2.25rem;}
    .case-study-cta,
    .cs-note{font-size:2.25rem;}
    .cs-section{max-width:73.125rem;}
    .body-copy{max-width:54.84rem;}
    .leadership-block{max-width:73.125rem;}
    .pillar-full{max-width:73.125rem;}
    .pillar-quote, .pillar-detail{max-width:54.84375rem;}
  }
  @media (min-width:1920px){
    .page-title{font-size:4.5rem; max-width:87.75rem;}
    .cs-headline{font-size:4.5rem; max-width:87.75rem;}
    .home-bio{font-size:3rem; max-width:87.75rem;}
    .lede{font-size:2.75rem; max-width:87.75rem;}
    .cs-lede{font-size:2.5rem; max-width:87.75rem;}
    .cs-subhead{font-size:2.5rem;}
    .case-study-cta,
    .cs-note{font-size:2.5rem;}
    .cs-section{max-width:87.75rem;}
    .body-copy{max-width:65.81rem;}
    .leadership-block{max-width:87.75rem;}
    .pillar-full{max-width:87.75rem;}
    .pillar-quote, .pillar-detail{max-width:65.8125rem;}
  }

  .lede{margin-bottom:0.75rem; line-height:1.25;}

  .company-list{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0.083rem;
    margin-top:4.5rem;
    margin-bottom:3rem;
  }
  .company-row{
    display:flex;
    align-items:center;
    gap:1.35rem;
    text-decoration:none;
    font-size:2.8rem;
    line-height:1;
  }
  /* Home page only -- the password gate reuses .company-row too, and
     isn't part of this request. */
  body:has(#content .home-bio) .company-row{gap:2.025rem;}
  /* .company-list's 4.5rem/3rem margins are the same absolute size at
     every width, so on a phone they push the list much further down the
     viewport than they do on desktop. Trim both by a quarter for mobile
     and restore them from 700px up, where the original spacing reads
     correctly. Scoped to the home page because the password gate shares
     .company-list. */
  body:has(#content .home-bio) .company-list{
    margin-top:1.43rem;
    margin-bottom:0.95rem;
  }
  @media (min-width:700px){
    .company-row{font-size:3.4rem;}
    body:has(#content .home-bio) .company-list{
      margin-top:4.5rem;
      margin-bottom:3rem;
    }
  }
  @media (min-width:1024px){
    .company-row{font-size:4.75rem;}
    /* Nike, desktop only: another ~10% off the prior 72% (≈65% of the
       shared optical height). Keep .company-wordmark Nike in sync below. */
    body:has(#content .home-bio) .company-mark img[alt="Nike logo"]{height:65%;}
  }
  @media (min-width:1440px){
    .company-row{font-size:5.375rem;}
    /* The password gate's list sits in the narrow, fixed-width
       .gate-wrap column (26rem) rather than the full .page width, so it
       can't grow as large as the home page's list without "Foureyes" (an
       unbreakable word) overflowing and forcing "AI Native" to wrap. */
    .gate-company-list .company-row{font-size:4.9rem;}
  }
  @media (min-width:1920px){
    .company-row{font-size:6.25rem;}
    .gate-company-list .company-row{font-size:4.9rem;}
  }
  .company-row:hover .company-name{color:var(--pink-dark);}

  /* Every logo mark is sized to the same visual (optical) height rather
     than a shared bounding box -- the source marks have wildly different
     native aspect ratios (Stori is tall and narrow, Nike is a wide flat
     swoosh, Foureyes is a perfect square), so matching height and letting
     width follow each mark's own ratio is what makes them read as the
     same size, the way a real "as seen in" logo bar does. This replaced
     an earlier approach of a fixed-width box plus hand-tuned per-logo
     transform:scale() corrections, which drifted out of sync (Nike had
     no correction at all) and made the visible gap to each company name
     inconsistent, since the box's dead space (not the logo's own edge)
     is what the row's gap was actually measuring from. */
  .company-mark{
    height:0.55em;
    display:flex;align-items:center;
    flex-shrink:0;
  }
  .company-mark img{height:100%; width:auto; display:block;}
  /* Meta and Nike read heavier than the others at the same optical
     height, so they're dialed down slightly to match. */
  .company-mark img[alt="Meta logo"],
  .company-mark img[alt="Nike logo"]{height:80%;}
  /* Dark mode, mobile only: Nike at 90% of the shared 80% optical height
     (→72%). Desktop home keeps 65% via the min-width:1024px rule above. */
  @media (max-width:1023px){
    [data-theme="dark"] .company-mark img[alt="Nike logo"]{height:72%;}
  }
  .ai-native-icon-mark{
    display:block;
    width:0.55em;
    height:0.55em;
    -webkit-mask-image:url(/assets/img/logos/ai-native.svg);
    mask-image:url(/assets/img/logos/ai-native.svg);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:left center;
    mask-position:left center;
    background-color:#000000;
  }
  [data-theme="dark"] .ai-native-icon-mark{background-color:#BFC0C3;}
  [data-theme="dark"] .company-mark img,
  [data-theme="dark"] .company-wordmark img{filter:invert(1);}
  /* Hover: land on the same charcoal (#4C4C4C) as the AI Native mask.
     Light: black → invert → dim. Dark: already inverted (white) → dim.
     Declared after the base dark invert so hover wins the cascade. */
  :root:not([data-theme="dark"]) .company-row:hover .company-mark img{
    filter:invert(1) brightness(0.298);
  }
  [data-theme="dark"] .company-row:hover .company-mark img{
    filter:invert(1) brightness(0.298);
  }
  .company-row:hover .ai-native-icon-mark{background-color:#4C4C4C;}
  .company-name{
    font-weight:800;
    color:var(--pink);
  }
  /* Home company list: → is real Host Grotesk ExtraBold text (see HTML +
     self-hosted @font-face). Keep solid pink on gradient names; light + dark. */
  body:has(#content .home-bio) .company-arrow{
    font-family:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-weight:800;
    color:var(--pink);
    -webkit-text-fill-color:var(--pink);
  }
  body:has(#content .home-bio) .company-row:hover .company-arrow{
    color:var(--pink-dark);
    -webkit-text-fill-color:var(--pink-dark);
  }
  .company-name-gradient{
    background:linear-gradient(90deg, #FACD74 0%, #ED6A39 33%, #C13488 66%, #6058A6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  /* The generic .company-row:hover .company-name rule sets a solid color,
     which would paint over and hide the gradient entirely. Override with a
     darkened version of the same gradient instead, so hovering AI Native
     darkens consistently with how every other row darkens on hover. */
  .company-row:hover .company-name-gradient{
    background:linear-gradient(90deg, #B69554 0%, #AC4D29 33%, #8C2663 66%, #464079 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .section-block{margin-bottom:0;}
  /* On mobile home page, tighten margin before section title so it's
     visible without scrolling. Restore at 700px and above. */
  @media (max-width:699px){
    body:has(#content .home-bio) .section-block{
      margin-top:0.75rem;
    }
  }
  .section-title{
    font-size:0.8rem;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:5.625rem;
    margin-bottom:0.9rem;
  }
  .body-copy{}

  .pillar-links{display:flex; flex-direction:column; align-items:flex-start; gap:0.5rem; margin-top:1.25rem;}
  .pillar-links a{
    font-style:normal;
    font-weight:800;
    font-size:1.4rem;
    text-decoration:none;
  }
  .pillar-links a:hover{text-decoration:underline;}
  /* Below ~600px the full-size links wrap to two lines (worst case is
     "Quality and craft are a daily discipline" on narrow Android phones,
     ~360px wide). Sized to be the largest value that still keeps every
     link on one line at that width. */
  @media (max-width:599px){
    .pillar-links a{font-size:1.05rem;}
  }

  .link-item{
    font-weight:400;
    font-size:1.05rem;
  }
  .talk-list{display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem;}
  .talk-row{display:flex; align-items:center; gap:0.5rem;}
  .talk-row svg{height:16px; width:auto; display:block;}
  button.talk-row{
    background:none;
    border:none;
    padding:0;
    font-family:inherit;
    font-weight:400;
    font-size:1.05rem;
    color:var(--pink);
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:2px;
    text-align:left;
  }
  button.talk-row:hover{color:var(--pink-dark);}

  .footer-block{
    margin-top:8rem;
    width:100%;
    padding:0 1rem 1.5rem;
    box-sizing:border-box;
  }
  @media (min-width:900px){
    .footer-block{padding:0 2.5rem 2rem;}
  }
  @media (min-width:1024px){
    .footer-block{padding:0 3rem 2.25rem;}
  }
  @media (min-width:1440px){
    .footer-block{padding:0 3rem 2.5rem;}
  }
  @media (min-width:1920px){
    .footer-block{padding:0 3.5rem 3rem;}
  }
  .footer-divider{
    border-top:1.5px solid var(--pink);
    margin:1.25rem 0 0.75rem;
  }
  .footer-meta{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;
    font-size:0.85rem;
    font-weight:400;
  }
  .footer-location{display:inline-flex; align-items:center; gap:0.35rem; flex-wrap:wrap; text-transform:uppercase;}
  .footer-state-icon{display:inline-flex; align-items:center; color:var(--pink);}
  .footer-state-icon svg{height:0.75em; width:auto; display:block;}

  /* overflow-anchor:none so collapsing one pillar doesn't drag the
     viewport when another opens (mobile accordion jump). */
  .pillar-full{margin-bottom:3.85rem; overflow-anchor:none;}
  .pillar-full h3{font-size:1.35rem; margin-bottom:0.6rem;}
  /* Intro body under the principle heading matches that heading size.
     Margin below is 0 so the So I… gap is controlled only by the toggle. */
  .pillar-full > .pillar-body{font-size:1.35rem; margin-bottom:0;}
  .pillar-detail{
    margin-bottom:0.6rem;
  }
  @media (max-width:899px){
    .pillar-detail{
      margin-bottom:1rem;
    }
  }
  .pillar-toggle{
    all:unset;
    display:flex;
    align-items:center;
    gap:0.75rem;
    cursor:pointer;
    padding:0;
    /* 2× the h3 → intro gap (0.6rem). */
    margin-top:1.2rem;
    margin-bottom:0;
    color:inherit;
    text-align:left;
    /* Desktop: 3/4 of the intro .pillar-body above. Mobile: full width,
       matching that same intro copy. */
    max-width:75%;
  }
  @media (max-width:899px){
    .pillar-toggle{
      max-width:100%;
    }
  }
  /* So I… / expanded body / At [company]… match home .body-copy
     (body font-size: 17px → 20px on desktop). Toggle stays bold via <b>.
     Declared after .pillar-toggle's all:unset so font-size sticks. */
  .pillar-toggle,
  .pillar-content .pillar-body,
  .pillar-detail{
    font-size:1em;
  }
  .pillar-toggle-text{
    flex:1;
  }
  .pillar-toggle:hover:not([data-expanded="true"]) .pillar-toggle-text b{
    text-decoration:underline;
  }
  .pillar-toggle-arrow{
    width:1em;
    height:1em;
    flex-shrink:0;
    transition:transform 0.3s ease;
    display:block;
  }
  .pillar-toggle[data-expanded="true"] .pillar-toggle-arrow{
    transform:rotate(90deg);
  }
  .pillar-content{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
    opacity:0;
    transition:opacity 0.3s ease, max-height 0.3s ease;
    /* Don't let browser scroll anchoring fight the toggle scroll lock. */
    overflow-anchor:none;
    /* Same width rule as .pillar-toggle: 3/4 of intro copy on desktop,
       full width on mobile. */
    max-width:75%;
  }
  /* Instant sibling collapse while opening another pillar — applied only
     for one layout flush in togglePillar, then removed. */
  .pillar-content.pillar-content--instant{
    transition:none !important;
  }
  @media (max-width:899px){
    .pillar-content{
      max-width:100%;
    }
  }
  .pillar-toggle[data-expanded="true"] + .pillar-content{
    opacity:1;
    max-height:1000px;
  }
  .pillar-quote{
    margin:1.1rem 0 1.1rem;
  }
  .pillar-quote p{
    font-family:"Cormorant Infant", serif;
    font-style:italic;
    font-size:1.35rem;
    line-height:1.25;
    margin:0 0 0.4rem;
  }
  .pillar-quote-attribution{
    font-weight:700;
    font-size:0.85rem;
  }

  /* Height-only sizing (width follows each logo's own aspect ratio),
     same approach as .company-mark and for the same reason -- this is
     the destination .animateCompanyEnter measures against, so it needs
     to match .company-mark's rendered size exactly at every breakpoint
     or the logo visibly jumps size when the transition lands. These
     pixel heights are hand-calculated to match .company-mark's em-based
     height (0.55em of .company-row's font-size) at each matching
     breakpoint (700/1024/1440/1920, same as .company-row) -- if
     .company-row's font-size ever changes, these need recalculating. */
  .company-wordmark{
    margin:4.5rem 0 2.5rem;
    height:24.64px;
    display:flex;
    align-items:center;
  }
  /* On mobile case study pages, tighten the top margin to match the
     home page's reduced spacing (4.5rem → 1.43rem, 75% reduction).
     Restore at 700px and above. */
  @media (max-width:699px){
    .company-wordmark{
      margin-top:1.43rem;
      margin-bottom:1.88rem;
    }
  }
  .company-wordmark img{height:100%; width:auto; display:block;}
  @media (min-width:700px){
    .company-wordmark{height:29.92px;}
  }
  @media (min-width:1024px){
    .company-wordmark{height:41.8px;}
  }
  @media (min-width:1440px){
    .company-wordmark{height:47.3px;}
  }
  @media (min-width:1920px){
    .company-wordmark{height:55px;}
  }
  .company-wordmark img[alt="Meta logo"]{height:80%;}
  .company-wordmark img[alt="Nike logo"]{height:80%;}
  /* Sync with dark-mode mobile .company-mark Nike (72%) for enter animation. */
  @media (max-width:1023px){
    [data-theme="dark"] .company-wordmark img[alt="Nike logo"]{height:72%;}
  }
  @media (min-width:1024px){
    /* Match home .company-mark Nike (65%) so the enter animation doesn't jump. */
    .company-wordmark img[alt="Nike logo"]{height:65%;}
  }
  .role-meta{
    font-size:0.85rem;
    margin-bottom:2rem;
  }
  .role-meta div{margin-bottom:0.3rem;}
  .hero-img{
    width:100%;
    max-width:640px;
    overflow:hidden;
    margin-bottom:4.125rem;
    background:var(--cream-2);
  }
  .hero-img.rounded-corners{
    border-radius:9.8px;
  }
  /* Device-mockup video embed: fixed light-gray backdrop (not the
     theme-aware --cream-2 used elsewhere) so the phone mockup reads
     consistently in both light and dark mode, like a product photo. */
  .hero-img.nova-embed{
    aspect-ratio:1368/876;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#EEEEEE !important;
  }
  .hero-img.nova-embed video{
    height:78%;
    width:auto;
    max-width:90%;
    display:block;
  }
  .hero-img + .hero-img,
  .hero-img + .img-placeholder,
  .img-placeholder + .hero-img,
  .img-placeholder + .img-placeholder{
    margin-top:-3.375rem;
  }
  @media (min-width:1024px){
    /* .page itself is now wide enough (see .page above) to hold images at
       their full target size, so this is a plain max-width -- no need to
       break out of .page anymore. This keeps images and text sharing the
       exact same container, so they stay aligned to the same edges. */
    .hero-img{max-width:1014px;}
  }
  @media (min-width:1440px){
    .hero-img{max-width:1170px;}
  }
  @media (min-width:1920px){
    .hero-img{max-width:1404px;}
  }
  /* Vertical wipe reveal: images start clipped down to a sliver at the
     top edge, then grow downward to full height as they're scrolled to
     -- matching initScrollReveal in site.js, which adds .is-visible.
     The primary/header image on each page (.hero-img-primary) is
     excluded and stays always visible immediately -- above-the-fold
     content must not depend on a script finishing in time to be seen.
     This was tried once before and reverted (a not-yet-revealed image
     still reserves its full space but shows nothing, which looks like a
     blank gap if the reveal is ever slow or blocked) -- initScrollReveal
     already has solid fallbacks for that (an immediate on-load check,
     plus scroll/resize listeners), so the risk is accepted here as a
     deliberate tradeoff for the visual effect, the same way many sites
     with this kind of reveal do. */
  /* Image wipe-in only when scripting can reveal them; otherwise images
     stay fully visible so pages don't look empty without JS. */
  @media (scripting: enabled){
    .hero-img:not(.hero-img-primary), .img-placeholder{
      clip-path:inset(0 0 100% 0);
      transition:clip-path 1s ease;
    }
    .hero-img:not(.hero-img-primary).is-visible, .img-placeholder.is-visible{
      clip-path:inset(0 0 0% 0);
    }
  }
  .hero-img-primary{
    clip-path:inset(0 0 0% 0);
    margin-bottom:2rem;
    /* Flush with the viewport edges on mobile (breaking out of .page's
       side padding), unlike every other image on the page. Reset back
       to a normal inset image at 900px+, alongside .page's own padding
       change at that breakpoint. */
    width:calc(100% + 2rem);
    margin-left:-1rem;
    margin-right:-1rem;
  }
  .cs-section, .stat-row, .pillar-full, .body-copy, .leadership-block{
    color:var(--pink);
  }
  .section-title, .cs-section-label{
    color:#BB2B00;
  }
  [data-theme="dark"] .section-title, [data-theme="dark"] .cs-section-label{
    color:#FE6F43;
  }

  /* ---------- Case-study / company (Nike) / values page copy color ----------
     These three page types use a different text color from the header,
     footer, gate page, and home page, which all keep the original
     --pink/--pink-dark theme untouched. Scoped to the specific classes
     these three page types actually use. .section-title is the one
     exception -- the home page also uses that same class for its own
     "principles" label, so instead of targeting the class directly (which
     would recolor the home page too), it's scoped by sibling position:
     only a .section-title that comes after a .company-wordmark counts,
     and only company/case-study pages have a .company-wordmark. */
  .cs-headline,
  .page-title,
  .role-meta,
  .cs-lede,
  .lede,
  .cs-section, .cs-section p, .cs-section a,
  .cs-subhead,
  .stat-row, .stat-num, .stat-label,
  .pillar-full, .pillar-full h3, .pillar-full a,
  .pillar-body,
  .pillar-detail,
  .pillar-quote p,
  .pillar-quote-attribution,
  .leadership-block, .leadership-block p, .leadership-block a,
  .case-study-cta,
  .cs-note,
  .locked-cta{
    color:#481C1E;
  }
  .cs-section-label{
    color:#6F4A48;
  }
  /* .body-copy and .pillar-links are shared with the home page's own
     "principles" section, so -- same reasoning as .section-title above --
     they're scoped by sibling position instead of targeted directly. */
  .company-wordmark ~ .section-block .section-title{
    color:#6F4A48;
  }
  .company-wordmark ~ .section-block .body-copy,
  .company-wordmark ~ .section-block .body-copy p,
  .company-wordmark ~ .section-block .body-copy a,
  .company-wordmark ~ .section-block .pillar-links a{
    color:#481C1E;
  }
  .cs-section a:hover, .pillar-full a:hover,
  .locked-cta:hover{
    color:#6F4A48;
  }
  .company-wordmark ~ .section-block .body-copy a:hover,
  .company-wordmark ~ .section-block .pillar-links a:hover{
    color:#6F4A48;
  }
  [data-theme="dark"] .cs-headline,
  [data-theme="dark"] .page-title,
  [data-theme="dark"] .role-meta,
  [data-theme="dark"] .cs-lede,
  [data-theme="dark"] .lede,
  [data-theme="dark"] .cs-section, [data-theme="dark"] .cs-section p, [data-theme="dark"] .cs-section a,
  [data-theme="dark"] .cs-subhead,
  [data-theme="dark"] .stat-row, [data-theme="dark"] .stat-num, [data-theme="dark"] .stat-label,
  [data-theme="dark"] .pillar-full, [data-theme="dark"] .pillar-full h3, [data-theme="dark"] .pillar-full a,
  [data-theme="dark"] .pillar-body,
  [data-theme="dark"] .pillar-detail,
  [data-theme="dark"] .pillar-quote p,
  [data-theme="dark"] .pillar-quote-attribution,
  [data-theme="dark"] .leadership-block, [data-theme="dark"] .leadership-block p, [data-theme="dark"] .leadership-block a,
  [data-theme="dark"] .case-study-cta,
  [data-theme="dark"] .cs-note,
  [data-theme="dark"] .locked-cta{
    color:#E8E8E8;
  }
  [data-theme="dark"] .cs-section-label{
    color:#BFC0C3;
  }
  [data-theme="dark"] .company-wordmark ~ .section-block .section-title{
    color:#BFC0C3;
  }
  [data-theme="dark"] .company-wordmark ~ .section-block .body-copy,
  [data-theme="dark"] .company-wordmark ~ .section-block .body-copy p,
  [data-theme="dark"] .company-wordmark ~ .section-block .body-copy a,
  [data-theme="dark"] .company-wordmark ~ .section-block .pillar-links a{
    color:#E8E8E8;
  }
  [data-theme="dark"] .cs-section a:hover, [data-theme="dark"] .pillar-full a:hover,
  [data-theme="dark"] .locked-cta:hover{
    color:#BFC0C3;
  }
  /* Follow the same hover color as light mode for consistency across themes. */
  [data-theme="dark"] .company-wordmark ~ .section-block .body-copy a:hover,
  [data-theme="dark"] .company-wordmark ~ .section-block .pillar-links a:hover{
    color:#BFC0C3;
  }
  .hero-img img{width:100%; height:auto; display:block;}
  /* Text + leading →, matching the home company-row click pattern.
     No pill/border stroke. Size tracks .cs-lede (set with that scale).
     .cs-note is the non-link stand-in (e.g. “Case Study Coming Soon”). */
  .case-study-cta{
    display:inline-flex;
    align-items:center;
    /* Flex collapses trailing spaces in the arrow span; gap is the space. */
    gap:0.3em;
    font-weight:400;
    margin:0;
    padding:0;
    text-decoration:none;
    border:0;
    border-radius:0;
    background:none;
  }
  .cs-note{
    font-weight:400;
    margin:0;
  }
  /* Keep non-home CTA chrome at #481C1E on hover (underline only).
     Do not use color:inherit -- body is --pink, so inherit flipped
     these links pink/red on hover. Dark already pins #E8E8E8. */
  .case-study-cta:hover{text-decoration:underline; text-underline-offset:0.15em; background:none; color:#481C1E;}
  .case-study-cta:active,
  .case-study-cta:focus{color:#481C1E; outline:none;}
  [data-theme="dark"] .case-study-cta:hover{background:none; color:#E8E8E8;}
  [data-theme="dark"] .case-study-cta:active,
  [data-theme="dark"] .case-study-cta:focus{color:#E8E8E8; outline:none;}
  /* Host Grotesk ExtraBold → (self-hosted face includes this glyph). */
  .cta-arrow{
    font-family:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
    font-weight:800;
  }
  .locked-cta{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-weight:800;
    font-size:1.05rem;
    color:var(--pink);
    background:none;
    border:1.5px solid var(--pink);
    border-radius:10px;
    padding:0.6rem 1.1rem;
    margin:0.5rem 0 2.5rem;
  }
  .locked-cta:hover{background:var(--cream-2);}
  /* .case-study-cta is reused here for the home page's own CTA (same
     spacing/typography), but the home page keeps the site's pink
     treatment (constant across light/dark) rather than the muted
     case-study palette above, which is fixed per-theme. */
  body:has(#content .home-bio) .case-study-cta{color:var(--pink);}
  body:has(#content .home-bio) .case-study-cta:hover,
  body:has(#content .home-bio) .case-study-cta:active,
  body:has(#content .home-bio) .case-study-cta:focus{color:var(--pink);}

  /* line-height matches .home-bio and .lede so summaries read at the
     same leading as the rest of the large type. */
  .cs-lede{margin:1.75rem 0 2.25rem; line-height:1.25;}
  .cs-section-label{
    font-size:0.78rem;
    font-weight:800;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin-top:5.625rem;
    margin-bottom:0.6rem;
  }
  .cs-section{margin-bottom:2.0625rem;}
  .cs-section:has(+ .cs-section-label){margin-bottom:0;}
  /* line-height matches .home-bio. Without it these inherit body's 1.6,
     which reads far too loose for a wrapping title. */
  .cs-subhead{font-weight:700; margin-bottom:0.5rem; line-height:1.25;}
  .stat-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    gap:1.25rem;
    margin:1.5rem 0 5.15625rem;
  }
  .stat-row:has(+ .cs-section-label){margin-bottom:0;}
  /* Without this, a stat-row right after an image inherits the image's
     large 4.125rem bottom margin via margin collapsing, doubling the gap
     compared to text-to-image spacing (33px vs 66px). Pull it back down
     to match. */
  .hero-img + .stat-row, .img-placeholder + .stat-row{margin-top:-2.0625rem;}
  /* Summary stacks under the number. The 0.3rem gap matches the
     ROLE -> YEARS spacing in .role-meta so the pair reads as tight,
     while .stat-row's own gap keeps metrics apart as before. */
  .stat{display:flex; flex-direction:column; align-items:flex-start; gap:0.3rem; text-align:left;}
  .stat-num{font-family:"Cormorant Infant", serif; font-weight:700; font-size:2.4375rem; line-height:1; text-align:left; flex-shrink:0;}
  .stat-label{font-size:0.85rem; text-align:left; font-weight:700;}
  .img-placeholder{
    width:100%; max-width:640px;
    height:400px;
    background:#FFFFFF;
    margin:1.5rem 0 2.0625rem;
  }
  @media (min-width:1024px){
    .img-placeholder{max-width:780px; height:460px;}
  }
  @media (min-width:1440px){
    .img-placeholder{max-width:900px; height:520px;}
  }
  @media (min-width:1920px){
    .img-placeholder{max-width:1080px; height:600px;}
  }
  .leadership-block{
    margin-top:2.5rem;
  }

  .gate-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:26rem;
    margin:2.5625rem auto 0;
  }
  .gate-field{
    display:flex;
    align-items:center;
    gap:0.6rem;
    margin:1.5rem 0 0.75rem;
    width:100%;
  }
  .gate-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    height:1.4rem;
    margin-right:0.6rem;
    flex-shrink:0;
  }
  .gate-logo img{max-height:100%; width:auto; object-fit:contain;}
  [data-theme="dark"] .gate-logo img{filter:invert(1);}
  .gate-company-list{margin-top:2.5rem;}
  .gate-field input{
    flex:1;
    padding:0.7rem 0.9rem;
    border:1.5px solid var(--pink);
    border-radius:8px;
    font-size:1rem;
    background:transparent;
    color:var(--pink);
    font-family:inherit;
  }
  .gate-field input::placeholder{color:var(--pink); opacity:0.7;}
  .gate-field input:focus{outline:none; border-color:var(--pink-dark);}
  .gate-field button{
    background:var(--pink);
    color:var(--cream);
    border:none;
    border-radius:8px;
    padding:0.7rem 1.3rem;
    font-weight:700;
  }
  .gate-field button:hover{background:var(--pink-dark);}

  /* Pill-shaped variant with an inset circular arrow button, per reference design */
  .gate-field-pill{position:relative; transform:scale(0.75); transform-origin:left center;}
  .gate-field-pill input{
    width:100%;
    padding:1rem 4rem 1rem 1.5rem;
    border:2px solid #EA3337;
    border-radius:999px;
    box-sizing:border-box;
    background:transparent;
    color:var(--pink);
    font-size:1.1333rem;
  }
  .gate-field-pill input::placeholder{color:var(--pink); opacity:1;}
  .gate-field-pill input:focus{outline:none; border-color:#EA3337;}
  .gate-field-pill button{
    position:absolute;
    right:0.4rem;
    top:50%;
    transform:translateY(-50%);
    width:2.75rem;
    height:2.75rem;
    padding:0;
    border-radius:50%;
    background:#EA3337;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .gate-field-pill button:hover{background:#D4272B;}
  .gate-field-pill button svg{width:1.15rem; height:1.15rem; display:block;}
  [data-theme="dark"] .gate-field-pill input{border-color:#FFFFFF; color:#FFFFFF;}
  [data-theme="dark"] .gate-field-pill input::placeholder{color:#FFFFFF;}
  [data-theme="dark"] .gate-field-pill input:focus{border-color:#FFFFFF;}
  [data-theme="dark"] .gate-field-pill button{background:#FFFFFF;}
  [data-theme="dark"] .gate-field-pill button:hover{background:#E8E8E8;}
  [data-theme="dark"] .gate-field-pill button svg{stroke:var(--cream);}

  .gate-hint{font-size:0.95rem;}
  .gate-note{margin-top:1rem; font-size:0.9rem;}

  .flag-note{
    background:#FFF6EC;
    border:1px solid #E6B67A;
    border-radius:8px;
    padding:0.6rem 0.9rem;
    font-size:0.8rem;
    color:#8A5A1E;
    margin-bottom:1.5rem;
    max-width:38rem;
  }
  *{cursor:none !important;}
  input, textarea{cursor:text !important;}
  .custom-cursor{
    position:fixed;
    top:0; left:0;
    width:0; height:0;
    pointer-events:none;
    z-index:9999;
  }
  .custom-cursor::before{
    content:'';
    position:absolute;
    top:0; left:0;
    width:8px; height:8px;
    border-radius:50%;
    background:#481C1E;
    transform:translate(-50%,-50%) scale(1);
    transition:transform 0.15s ease, background 0.1s ease;
  }
  .custom-cursor.cursor-hover::before{
    transform:translate(-50%,-50%) scale(0.5);
  }
  .custom-cursor::after{
    content:'';
    position:absolute;
    top:0; left:0;
    width:24px; height:24px;
    border-radius:50%;
    border:0.5px solid #481C1E;
    background:transparent;
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    transition:transform 0.15s ease, opacity 0.15s ease, border-color 0.1s ease;
  }
  .custom-cursor.cursor-hover::after{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
  }
  /* Explicit dark/light states, toggled by site.js based on real-time
     pixel sampling of what's actually under the cursor (page theme when
     over plain background, the real image pixel when over an image) --
     see initCustomCursor for why this replaced mix-blend-mode. */
  .custom-cursor.cursor-on-dark::before{
    background:#E8E8E8;
  }
  .custom-cursor.cursor-on-dark::after{
    border-color:#E8E8E8;
  }
  @media (hover:none){
    body{cursor:auto;}
    .custom-cursor{display:none;}
  }

  /* ---------- Header/footer color for all non-home pages ----------
     Home page keeps the original --pink/--pink-dark header and footer.
     Every other page (case studies, company/Nike, values, and the
     password gate) gets the new palette instead. Scoped via :has(),
     checking for .home-bio -- the one element unique to the home
     page's markup -- rather than listing every other page type. */
  body:not(:has(#content .home-bio)) #siteHeader,
  body:not(:has(#content .home-bio)) #siteFooter,
  body:not(:has(#content .home-bio)) .logo,
  body:not(:has(#content .home-bio)) .theme-toggle,
  body:not(:has(#content .home-bio)) .footer-state-icon{
    color:#481C1E;
  }
  /* Light non-home: brown must beat pink hover !important (incl. sticky
     :hover after a theme tap). Scoped to :not([data-theme="dark"]) so
     this cannot override non-home dark white theme-icon rules.
     Color only — fill:!important on all .theme-toggle svg was filling
     stroke-only mail/resume/LinkedIn border into solid boxes. */
  :root:not([data-theme="dark"]):not(:has(#content .home-bio)) .theme-toggle,
  :root:not([data-theme="dark"]):not(:has(#content .home-bio)) .theme-toggle:hover{
    color:#481C1E !important;
  }
  body:not(:has(#content .home-bio)) .footer-divider{
    border-top-color:#481C1E;
  }
  [data-theme="dark"]:not(:has(#content .home-bio)) #siteHeader,
  [data-theme="dark"]:not(:has(#content .home-bio)) #siteFooter,
  [data-theme="dark"]:not(:has(#content .home-bio)) .logo,
  [data-theme="dark"]:not(:has(#content .home-bio)) .theme-toggle,
  [data-theme="dark"]:not(:has(#content .home-bio)) .footer-state-icon{
    color:#E8E8E8;
  }
  [data-theme="dark"]:not(:has(#content .home-bio)) .footer-divider{
    border-top-color:#E8E8E8;
  }

  /* ---------- Scroll-reveal text fade ----------
     Fades text in place (no movement) as it scrolls into view, reaching
     full opacity quickly. Applied per-element (not to whole section
     wrappers) so a label/subhead naturally reaches full opacity slightly
     before the paragraph beneath it, since each crosses the reveal
     threshold at its own scroll position -- see initScrollReveal in
     site.js. The page's headline and lede are NOT included here at
     all -- each page only ever has one of each, so initScrollReveal
     always treats it as "the first" and deliberately never reveals it
     (staying always visible instead, avoiding a flash of invisible
     content above the fold). Giving them opacity:0 here with no
     corresponding JS reveal would make them permanently invisible.
     Images are handled separately (via clip-path, not opacity) -- see
     the clip-path reveal rules above for how images fade/wipe in.

     Scoped to scripting:enabled so content stays fully visible when JS
     is blocked/unavailable (otherwise recruiters/corporate browsers can
     see a "broken" page with missing body copy). */
  @media (scripting: enabled){
    .cs-subhead,
    .cs-section p, .cs-section-label, .section-title, .stat-row,
    .pillar-full h3, .pillar-body, .pillar-detail, .pillar-quote p, .pillar-quote-attribution,
    body:not(:has(#content .home-bio)) .body-copy p, .leadership-block p{
      opacity:0;
      transition:opacity 0.5s ease;
    }
    .cs-subhead.is-visible,
    .cs-section p.is-visible, .cs-section-label.is-visible, .section-title.is-visible, .stat-row.is-visible,
    .pillar-full h3.is-visible, .pillar-body.is-visible, .pillar-detail.is-visible, .pillar-quote p.is-visible, .pillar-quote-attribution.is-visible,
    body:not(:has(#content .home-bio)) .body-copy p.is-visible, .leadership-block p.is-visible{
      opacity:1;
    }
    /* Home page's principles paragraphs fade in together as a single block
       (rather than staggered per-paragraph like everywhere else), with its
       CTA link fading in the same way once it's scrolled to next. */
    body:has(#content .home-bio) .body-copy,
    body:has(#content .home-bio) .case-study-cta{
      opacity:0;
      transition:opacity 0.5s ease;
    }
    body:has(#content .home-bio) .body-copy.is-visible,
    body:has(#content .home-bio) .case-study-cta.is-visible{
      opacity:1;
    }
    body:has(#content .home-bio) .principles-list{
      opacity:1;
    }
  }

  /* ---------- Desktop content text scale (1.25x) ----------
     Companion to the desktop image growth above -- these selectors
     didn't already have their own per-breakpoint sizing, so rather than
     scaling an existing tier, this adds one desktop-only override at
     1.25x their base size. Scoped the same way as the image change:
     desktop only (1024px+), and excluding the header, footer, and the
     password gate page, none of which are touched here. */
  @media (min-width:1024px){
    .section-title{font-size:1rem;}
    .pillar-links a{font-size:1.75rem;}
    .link-item{font-size:1.3125rem;}
    button.talk-row{font-size:1.3125rem;}
    .pillar-full h3{font-size:1.6875rem;}
    .pillar-full > .pillar-body{font-size:1.6875rem;}
    /* .pillar-toggle / expanded body / detail inherit body (20px) to
       match home .body-copy; no desktop upscale here. */
    .pillar-quote p{font-size:1.6875rem;}
    .pillar-quote-attribution{font-size:1.0625rem;}
    .role-meta{font-size:1.0625rem;}
    /* .case-study-cta / .cs-note size tracks .cs-lede in the type scale above. */
    .locked-cta{font-size:1.3125rem;}
    .cs-section-label{font-size:0.975rem;}
    .stat-num{font-size:3.046875rem;}
    .stat-label{font-size:1.0625rem;}
  }