:root{
    /* ---- The 4 brand colors — the only colors this site uses ---- */
    --bg:#000000;    --bg-rgb:0,0,0;         /* black   */
    --ink:#F4EFE4;   --ink-rgb:244,239,228;  /* white   */
    --muted:#8C8880; --muted-rgb:140,136,128;/* grey    */
    --red:#E2231C;   --red-rgb:226,35,28;    /* red     */
    /* Consistent shades of red, computed from --red (not new colors) —
       used for hover/active states so buttons feel interactive. */
    /* Hue/saturation-preserving lighter/darker shades of --red (computed
       server-side by rfth_shift_lightness() in functions.php and injected
       as an inline <style> override on every page load — these hardcoded
       values are only the pre-JS/no-Customizer-color-yet fallback and
       match the default red #E2231C exactly). A pure lightness shift
       reads as a brighter/darker RED; blending toward white/black instead
       desaturates it toward pink, which is why this replaced that
       approach — see the fuller explanation next to rfth_shift_lightness(). */
    --red-hover:#EA5752;
    --red-hover-rgb:234,87,82;
    --red-active:#AC1B15;
    --line: rgba(var(--ink-rgb),0.1); --maxw:1180px;
    --ease: cubic-bezier(.16,.84,.44,1);
  }
  *{ box-sizing:border-box; }
  /* Safety net: any image/video/iframe/embed that doesn't already have its
     own explicit sizing (team photos, etc. all do) is capped at its
     container's width, so WP-inserted content can never force horizontal
     overflow/scroll on narrow screens. */
  img, svg, video, iframe, embed, object{ max-width:100%; }
  .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  /* html (not just body) carries the background because on iOS Safari /
     Android Chrome the elastic "rubber-band" overscroll region beyond the
     top/bottom of the page is painted from the <html> box, not from any
     position:fixed element (the fixed WebGL canvas is pinned to the
     viewport and does NOT extend into that bounce area) — so if <html>'s
     own background isn't guaranteed black, a wedge of whatever's behind
     it (e.g. the browser's/parent theme's default white) flashes in for
     a moment while scrolling past the top/bottom on mobile. min-height:100%
     plus overscroll-behavior stop the page's own box from ever falling
     short of the viewport and, on browsers that support it, remove the
     bounce/glow entirely so there's nothing to reveal in the first place. */
  html{ scroll-behavior:smooth; background:var(--bg); min-height:100%; overscroll-behavior-y:none; }
  body{ margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:'Manrope', sans-serif; overflow-x:hidden; overscroll-behavior-y:none; position:relative; cursor:none; }
  @media (pointer:coarse){ body{ cursor:auto; } }
  ::selection{ background:var(--red); color:var(--bg); }
  h1,h2,h3{ font-family:'Fraunces', serif; font-weight:460; line-height:1.05; letter-spacing:-0.01em; margin:0; }
  em{ font-style:italic; font-weight:420; color:var(--red); }
  p{ margin:0; }
  a{ color:inherit; }

  /* Consistent brand-red focus outline everywhere, so keyboard/click focus
     never falls back to the browser/OS default ring (which can render as
     blue, green, etc. depending on the visitor's system settings). */
  a:focus, button:focus{ outline:none; }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

  /* loader */
  #loader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; transition:opacity .8s var(--ease), visibility .8s; }
  #loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  #loader svg{ width:30px; height:30px; }
  #loader-pct{ font-family:'Manrope'; font-weight:700; font-size:11px; letter-spacing:0.18em; color:var(--muted); font-variant-numeric:tabular-nums; }
  #loader-pct b{ color:var(--ink); font-weight:800; }
  #loader-bar{ width:140px; height:1px; background:var(--line); position:relative; overflow:hidden; }
  #loader-bar i{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--red); }

  #progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:var(--red); z-index:60; }

  /* ==========================================================================
     CUSTOM CURSOR — rebuilt from scratch.
     Fixes three real problems in the previous version:
     1. "Hangs" at the top-left corner on page load: the dot used to sit at
        (0,0) until the first mousemove, then visibly fly in. It now stays
        hidden (opacity:0) until the first real pointer position is known,
        then appears exactly under the cursor — see the matching JS.
     2. "Over-blinking": an infinite `cursorPulse` keyframe animation kept
        re-triggering the glow every 2.4s *while* `box-shadow` was also
        listed in `transition` — two different engines fighting over the
        same property — and `mix-blend-mode:difference` made the dot's
        rendered color invert against whatever the WebGL scene behind it
        was doing that frame, which reads as constant flicker over an
        animated background. Both are removed; the dot is one stable,
        non-inverting color with a fixed soft glow.
     3. Every state change (idle → hover → pressed) now runs through a
        single, short, consistent transition instead of competing
        animation/transition rules, so it feels smooth and intentional
        rather than glitchy. */
  #cursor{
    position:fixed; top:0; left:0; width:13px; height:13px; border-radius:50%;
    background:var(--red);
    border:1.5px solid transparent;
    box-shadow:0 0 10px rgba(var(--red-rgb),0.55), 0 0 22px rgba(var(--red-rgb),0.25);
    pointer-events:none; z-index:200;
    opacity:0; transform:translate(-50%,-50%) scale(1);
    transition:width .25s var(--ease), height .25s var(--ease),
      background-color .25s var(--ease), border-color .25s var(--ease),
      box-shadow .25s var(--ease), opacity .25s ease, transform .18s var(--ease);
  }
  #cursor.is-visible{ opacity:1; }
  /* Grown (hover) state: a hollow ring instead of a solid filled disc, so the
     link/button text underneath always stays fully legible instead of being
     covered by an opaque circle. */
  #cursor.grow{ width:42px; height:42px; background:transparent; border-color:var(--ink); box-shadow:none; }
  /* Subtle tactile squeeze while a mouse button is actually held down. */
  #cursor.is-down{ transform:translate(-50%,-50%) scale(0.7); }
  #cursor.grow.is-down{ transform:translate(-50%,-50%) scale(0.9); }
  @media (pointer:coarse){ #cursor{ display:none; } }
  @media (prefers-reduced-motion: reduce){ #cursor{ transition:opacity .25s ease; } }

  #webgl-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; background:var(--bg); }

  .grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.04; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* nav — clean, minimal, no heavy glass.
     Starts as a soft gradient over the hero, then becomes a solid, blurred
     bar as soon as the page scrolls so headline/section text passing
     underneath never visually collides with the logo or nav links. */
  .nav{ position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center; justify-content:space-between;
    padding:20px clamp(20px,4vw,56px); background:linear-gradient(to bottom, rgba(var(--bg-rgb),0.65), transparent);
    transition:background .35s ease, backdrop-filter .35s ease, padding .35s ease, box-shadow .35s ease; }
  .nav--scrolled{ background:rgba(var(--bg-rgb),0.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    padding-top:14px; padding-bottom:14px; box-shadow:0 1px 0 rgba(var(--ink-rgb),0.07); }
  .nav__brand{ display:flex; align-items:center; gap:10px; }
  /* Logo is always constrained to this height regardless of the source
     file's pixel dimensions — upload any resolution logo in the Customizer
     and it will render at this exact, consistent size. */
  .nav__logo{ height:58px; width:auto; max-width:280px; display:block; object-fit:contain; }
  @media (max-width:480px){ .nav__logo{ height:42px; max-width:200px; } }
  .nav__links{ display:flex; gap:clamp(16px,2.4vw,34px); }
  .nav__links a{ position:relative; text-decoration:none; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); font-weight:800; cursor:none; transition:color .25s ease, text-shadow .3s ease; padding-bottom:3px; text-shadow:0 0 8px rgba(var(--red-rgb),0.35); }
  .nav__links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--red); box-shadow:0 0 6px 1px rgba(var(--red-rgb),0.8); transition:right .3s var(--ease); }
  .nav__links a:hover{ color:var(--ink); text-shadow:0 0 12px rgba(var(--red-rgb),0.85), 0 0 22px rgba(var(--red-rgb),0.5); }
  .nav__links a.active{ color:var(--red); text-shadow:0 0 12px rgba(var(--red-rgb),0.9), 0 0 24px rgba(var(--red-rgb),0.55); }
  .nav__links a.active::after{ right:0; }
  .nav__cta{ font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--red); padding-bottom:3px; cursor:none; transition:color .25s ease, border-color .25s ease, text-shadow .3s ease; }
  /* No hover state was defined here before, so on hover it fell through
     to the browser's default link color (blue) instead of picking up any
     theme styling. Matched to the same red-glow treatment used by the
     About/Culture nav links (.nav__links a:hover) just above. */
  .nav__cta:hover{ color:var(--ink); border-color:var(--red-hover); text-shadow:0 0 12px rgba(var(--red-rgb),0.85), 0 0 22px rgba(var(--red-rgb),0.5); }
  .nav__burger{ display:none; width:28px; height:28px; border:none; background:none; cursor:none; position:relative; }
  .nav__burger span{ position:absolute; left:3px; right:3px; height:1.5px; background:var(--red); transition:transform .3s var(--ease), opacity .3s ease, background .3s ease; }
  .nav__burger span:nth-child(1){ top:9px; } .nav__burger span:nth-child(2){ top:14px; } .nav__burger span:nth-child(3){ top:19px; }
  .nav__burger.open span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
  .nav__burger.open span:nth-child(2){ opacity:0; }
  .nav__burger.open span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
  .nav__burger:hover span{ background:var(--red); }
  /* 8 nav links + CTA + logo genuinely don't fit in the ~780-1080px range
     (real tablets: iPad portrait 768-810px already gets the burger below
     this, but iPad landscape/small laptops around 1024-1080px do not) —
     switching to the hamburger menu well before that avoids the links
     visibly overlapping the CTA button or wrapping onto a second line. */
  @media (max-width:1100px){ .nav__links, .nav__cta{ display:none; } .nav__burger{ display:block; } }

  #mobileMenu{ position:fixed; inset:0; z-index:70; background:rgba(var(--bg-rgb),0.98); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; overflow-y:auto; padding:90px 20px 40px; }
  #mobileMenu.open{ opacity:1; visibility:visible; }
  /* Short/landscape phones (menu has 9 links + Contact): shrink the gap
     and type size so every link stays reachable without being clipped
     off-screen, instead of relying on overflow-y alone. */
  @media (max-height:560px){ #mobileMenu{ gap:14px; justify-content:flex-start; } #mobileMenu a{ font-size:18px; } }
  /* Same font treatment as the desktop nav links (.nav__links a) — Manrope,
     uppercase, extra-bold, letter-spaced — just sized up for a full-screen
     touch menu, so the site reads as one consistent typeface instead of
     switching to the serif/italic display font only on mobile. */
  #mobileMenu a{ font-family:'Manrope', sans-serif; font-size:clamp(20px,5.5vw,26px); font-style:normal; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; color:var(--ink); text-shadow:0 0 10px rgba(var(--red-rgb),0.35); }
  #mobileMenu a:hover{ color:var(--ink); text-shadow:0 0 14px rgba(var(--red-rgb),0.7); }

  #toTop{ position:fixed; right:clamp(14px,3vw,36px); bottom:26px; z-index:20; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
    background:rgba(var(--bg-rgb),0.5); display:flex; align-items:center; justify-content:center; cursor:none;
    opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease, border-color .3s ease; }
  #toTop.show{ opacity:1; transform:translateY(0); }
  #toTop:hover{ border-color:var(--red); }
  #toTop svg{ width:14px; height:14px; stroke:var(--ink); }

  .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--red); font-weight:700;    opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }

  main{ position:relative; z-index:10; }
  /* scroll-margin-top keeps nav-link jumps from landing a
     section's heading directly underneath the fixed header. */
  .section{ min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:130px clamp(20px,6vw,90px); max-width:var(--maxw); margin:0 auto; scroll-margin-top:90px; perspective:1400px; }
  .section--about, .section--culture, .section--leadership, .section--locations, .section--work{ min-height:auto; padding:100px clamp(20px,6vw,90px); }

  .section h1, .section h2{ margin-top:18px; clip-path:inset(0 0 100% 0); transform:translateY(14px); transition:clip-path .95s var(--ease) .1s, transform .95s var(--ease) .1s; }
  .section.is-visible h1, .section.is-visible h2{ clip-path:inset(0 0 0% 0); transform:translateY(0); }
  .lede{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s; max-width:560px; margin-top:22px; font-size:16.5px; line-height:1.7; color:var(--muted); }
  .section.is-visible .eyebrow, .section.is-visible .lede{ opacity:1; transform:translateY(0); }

  .section--hero .eyebrow{ transition-delay:1.0s; } .section--hero h1{ transition-delay:1.15s; }
  .section--hero .lede{ transition-delay:1.5s; } .section--hero .team-tagline{ transition-delay:1.75s; }
  .section--hero h1{ font-size:clamp(40px, 6.6vw, 86px); max-width:780px; }
  .hero-brand-red{ color:var(--red); font-weight:700; }

  /* team tagline — replaces the old "Scroll" cue.
     Effect 1: staggered fade/slide-up entrance (shares the section reveal system).
     Effect 2: a slow, continuous red glow pulse on each hashtag.
     Effect 3: a sequential "spotlight" cycle (driven by JS) that steps the
     bold-red emphasis from one hashtag to the next, in a loop. */
  .team-tagline{ margin-top:56px; max-width:100%; width:100%; font-size:clamp(13px,2.0vw,24px); letter-spacing:-0.01em; color:var(--muted); line-height:1.55;
    white-space:nowrap; overflow:hidden;
    opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .section.is-visible .team-tagline{ opacity:1; transform:translateY(0); }
  /* Below this width the line can no longer stay on one row at a legible
     size, so let it wrap onto multiple lines at a comfortable, fixed
     font-size instead of continuing to shrink toward unreadable. */
  @media (max-width:560px){
    .team-tagline{ white-space:normal; overflow:visible; font-size:15px; line-height:1.6; }
  }
  .team-tagline__prefix{ margin-right:0.2em; }
  .team-tagline__and{ margin:0 0.2em; font-style:italic; font-family:'Fraunces'; color:var(--muted); }
  .team-tag{ display:inline-block; font-weight:800; color:var(--ink); letter-spacing:0; cursor:none;
    text-shadow:0 0 8px rgba(var(--red-rgb),0.4); animation:tagGlow 3.2s ease-in-out infinite; transition:color .3s ease, text-shadow .3s ease, transform .3s var(--ease); }
  .team-tag:nth-of-type(1){ animation-delay:0s; }
  .team-tag:nth-of-type(2){ animation-delay:0.6s; }
  .team-tag:nth-of-type(3){ animation-delay:1.2s; }
  .team-tag.is-active{ color:var(--red); transform:translateY(-2px) scale(1.05); text-shadow:0 0 14px rgba(var(--red-rgb),0.95), 0 0 26px rgba(var(--red-rgb),0.55); }
  .team-tag:hover{ animation-play-state:paused; color:var(--ink); transform:translateY(-3px) scale(1.1);
    text-shadow:0 0 18px rgba(var(--red-rgb),1), 0 0 34px rgba(var(--red-rgb),0.65); }
  @keyframes tagGlow{ 0%,100%{ text-shadow:0 0 8px rgba(var(--red-rgb),0.35); } 50%{ text-shadow:0 0 14px rgba(var(--red-rgb),0.7); } }
  /* Reduced motion: keep the white->red color swap (it's a color change,
     not motion) but drop the pulsing glow keyframe and the lift/scale
     transform that rides along with .is-active, so nothing here still
     "moves". */
  @media (prefers-reduced-motion: reduce){
    .team-tag{ animation:none; }
    .team-tag.is-active{ transform:none; }
  }

  .section h2{ font-size:clamp(30px, 4.4vw, 50px); max-width:760px; }


  .about-lede{ max-width:760px; font-size:18px; }

  .culture-grid, .pillars{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease) .32s, transform .8s var(--ease) .32s; margin-top:48px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
  .section.is-visible .culture-grid, .section.is-visible .pillars{ opacity:1; transform:translateY(0); }
  .culture-grid{ grid-template-columns:repeat(3,1fr); }
  .pillars{ grid-template-columns:repeat(5,1fr); }
  .locations-grid{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease) .32s, transform .8s var(--ease) .32s; margin-top:48px; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:repeat(3,1fr); }
  .section.is-visible .locations-grid{ opacity:1; transform:translateY(0); }
  .locations-grid .cell{ display:flex; flex-direction:column; gap:6px; }
  .locations-grid .cell h3{ font-family:'Fraunces'; font-style:normal; font-weight:500; font-size:19px; }
  .locations-grid .cell h3.city--hq{ font-weight:700; color:var(--red); font-size:20px; }
  .locations-grid .cell span.loc-tag{ font-size:13.5px; color:var(--muted); letter-spacing:0.01em; }
  .locations-grid .cell span.loc-tag--hq{ font-weight:700; color:var(--red); letter-spacing:0.02em; }
  @media (max-width:960px){ .pillars{ grid-template-columns:repeat(2,1fr); } .culture-grid{ grid-template-columns:1fr; } .locations-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .pillars{ grid-template-columns:1fr; } .locations-grid{ grid-template-columns:1fr; } }

  .cell{ background:var(--bg); padding:30px 26px; transition:background .3s ease; min-height:100%; }
  .cell:hover{ background:rgba(var(--red-rgb),0.05); }
  .culture-grid .cell h3{ font-size:22px; font-style:italic; font-weight:700; color:var(--ink); margin-bottom:14px; }
  .culture-grid .cell p{ font-size:16.5px; line-height:1.75; color:var(--muted); font-weight:400; }

  .pillar-icon{ width:20px; height:20px; margin-bottom:20px; }
  .pillar-icon svg{ width:100%; height:100%; stroke:var(--red); }
  .cell h3.svc{ font-family:'Manrope'; font-weight:700; font-size:16.5px; letter-spacing:0.01em; margin-bottom:16px; text-transform:none; color:var(--ink); }
  .cell ul{ list-style:none; margin:0; padding:0; }
  .cell li{ font-family:'Manrope'; font-weight:400; font-size:15px; line-height:1.7; color:var(--muted); padding-left:18px; margin-bottom:11px; position:relative; }
  .cell li:last-child{ margin-bottom:0; }
  .cell li::before{ content:'•'; position:absolute; left:0; top:0; color:var(--red); font-size:15px; line-height:1.55; opacity:0.9; }

  .approach-steps{ margin-top:52px; display:flex; flex-direction:column; opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease) .32s, transform .8s var(--ease) .32s; }
  .section.is-visible .approach-steps{ opacity:1; transform:translateY(0); }
  .astep{ display:grid; grid-template-columns:60px 1fr; gap:26px; padding:28px 0; border-top:1px solid var(--line); }
  .approach-steps .astep:last-child{ border-bottom:1px solid var(--line); }
  .astep__num{ font-family:'Fraunces'; font-style:italic; color:var(--red); font-size:22px; }
  .astep h3{ font-family:'Manrope'; font-weight:700; font-size:19px; font-style:normal; margin-bottom:10px; letter-spacing:0.01em; color:var(--ink); }
  .astep p{ font-size:16px; line-height:1.8; color:var(--muted); max-width:560px; }

  /* --------------- SEQUENTIAL CYCLE HIGHLIGHT (culture / expertise / approach cards) --------------- */
  .cycle-tag{ transition:color .45s ease, text-shadow .45s ease; }
  .culture-grid .cell h3.cycle-tag.is-active,
  .cell h3.svc.cycle-tag.is-active,
  .astep h3.cycle-tag.is-active{
    color:var(--red);
    text-shadow:0 0 14px rgba(var(--red-rgb),0.85), 0 0 28px rgba(var(--red-rgb),0.45);
  }
  @media (prefers-reduced-motion: reduce){ .cycle-tag{ transition:none; } }

  /* ============ TEAM CAROUSEL (Leadership section) ============
     Horizontal, scroll-snap carousel — works with 1 to 12 cards without
     any code changes. Prev/Next buttons sit at the left and right edges
     of the section and simply scroll the track by one card-width. */
  .team-carousel-wrap{ position:relative; margin-top:52px;
    opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease) .32s, transform .8s var(--ease) .32s; }
  .section.is-visible .team-carousel-wrap{ opacity:1; transform:translateY(0); }
  .team-track-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch; -ms-overflow-style:none; scrollbar-width:none; }
  .team-track-viewport::-webkit-scrollbar{ display:none; }
  .team-track{ display:flex; align-items:flex-start; gap:15px; padding:4px 2px 18px; width:max-content; }

  /* Each person is one scroll-snap unit containing TWO separate bordered
     boxes stacked vertically: the profile card (photo/name/title), and —
     the profile card, in its bottom-right corner. */
  .team-member{ flex:0 0 auto; width:clamp(168px, 19vw, 216px); scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; }

  .team-card{ position:relative; border:1px solid var(--line); border-radius:4px;
    padding:18px 18px 66px; background:rgba(var(--ink-rgb),0.012); transition:border-color .3s ease, transform .3s var(--ease); }
  .team-card:hover{ border-color:rgba(var(--red-rgb),0.5); transform:translateY(-4px); }
  .team-card__photo{ width:100%; aspect-ratio:1/1; border-radius:6px; overflow:hidden; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center; background:var(--line);
    border:1px solid rgba(var(--ink-rgb),0.22); }
  .team-card__photo img{ width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(1) contrast(1.02); transition:filter .45s ease; }
  .team-card:hover .team-card__photo img{ filter:grayscale(0) contrast(1.02); }
  .team-card__initials{ font-family:'Fraunces'; font-weight:500; font-size:clamp(22px,3vw,30px); color:var(--bg); width:100%; height:100%;
    display:flex; align-items:center; justify-content:center; background:var(--ink); }
  .team-card h3{ font-family:'Manrope'; font-weight:700; font-size:14.5px; font-style:normal; line-height:1.3; min-height:calc(1.3em * 2); }
  .team-card span{ font-size:12px; font-weight:700; color:var(--ink) !important; display:block; margin-top:5px; line-height:1.5; min-height:calc(1.5em * 2); }
  .team-card span.team-card__title--red{ color:var(--red) !important; }

  /* Bio toggle — a circular red triangle-arrow badge overlapping the
     card's bottom-right corner, replacing the old separate button card.
     Points down at rest, flips to point up while its bio is open, with a
     glowing red ring that intensifies on hover/active. Colors are
     hardcoded hex + !important so this can never render off-red from a
     saved theme color or stale cache. */
  .team-bio-toggle{
    position:absolute; right:14px; bottom:24px; z-index:2;
    width:36px; height:36px; border-radius:50%; padding:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg) !important; border:1.5px solid var(--red) !important;
    box-shadow:0 4px 14px -4px rgba(var(--red-rgb),0.55);
    color:var(--red) !important; cursor:none;
    transition:box-shadow .3s ease, border-color .3s ease, background .3s ease, transform .35s var(--ease), color .3s ease;
  }
  .team-bio-toggle:hover{
    border-color:var(--red-hover) !important; color:var(--ink) !important; background:var(--red) !important;
    box-shadow:0 0 22px 2px rgba(var(--red-rgb),0.75);
    transform:scale(1.08);
  }
  .team-bio-toggle[aria-expanded="true"]{
    background:var(--red) !important; border-color:var(--red-hover) !important; color:var(--ink) !important;
    box-shadow:0 0 22px 3px rgba(var(--red-rgb),0.8);
  }
  .team-bio-toggle svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
  .team-bio-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

  /* Big shared rectangular bio panel — sits below the whole carousel, one
     panel shared by every member so it can be generously sized (150-200
     words needs real width/height, not a cramped per-card sliver) and
     reads clearly at any screen size. Height animates open via a
     grid-template-rows trick so it works with variable-length bios. */
  .team-bio-panel{
    display:grid; grid-template-rows:0fr; opacity:0; margin-top:0;
    transition:grid-template-rows .45s var(--ease), opacity .35s ease, margin-top .45s var(--ease);
  }
  .team-bio-panel.is-open{ grid-template-rows:1fr; opacity:1; margin-top:34px; }
  .team-bio-panel__inner{
    overflow:hidden; min-height:0; position:relative;
    border:1px solid rgba(var(--red-rgb),0.35); border-radius:12px;
    background:radial-gradient(circle at 0% 0%, rgba(var(--red-rgb),0.1), transparent 55%), var(--bg);
    box-shadow:0 24px 60px -20px rgba(var(--bg-rgb),0.65), 0 0 0 1px rgba(var(--ink-rgb),0.02) inset;
    padding:clamp(28px,4vw,44px) clamp(28px,4vw,48px);
  }
  .team-bio-panel__inner::before{
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--red), rgba(var(--red-rgb),0) 70%);
  }
  .team-bio-panel__quote{
    position:absolute; top:14px; right:64px; font-family:'Fraunces'; font-style:italic; font-size:88px;
    line-height:1; color:rgba(var(--red-rgb),0.1); pointer-events:none; user-select:none;
  }
  .team-bio-panel__close{
    position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%;
    border:1.5px solid rgba(var(--red-rgb),0.45) !important; background:rgba(var(--red-rgb),0.08) !important; display:flex; align-items:center; justify-content:center;
    cursor:none; color:var(--red-hover) !important; transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; z-index:1;
  }
  .team-bio-panel__close:hover{ border-color:var(--red) !important; background:var(--red) !important; color:var(--ink) !important; transform:rotate(90deg); }
  .team-bio-panel__close svg{ width:15px; height:15px; }
  .team-bio-panel__head{
    display:flex; align-items:center; gap:20px; padding-right:44px; position:relative;
    opacity:0; transform:translateY(10px); transition:opacity .5s ease .1s, transform .5s var(--ease) .1s;
  }
  .team-bio-panel.is-open .team-bio-panel__head{ opacity:1; transform:translateY(0); }
  .team-bio-panel__avatar{
    flex-shrink:0; width:120px; height:120px; border-radius:12px; overflow:hidden;
    border:2px solid var(--red); background:var(--ink);
    box-shadow:0 0 0 4px rgba(var(--red-rgb),0.14), 0 10px 26px -10px rgba(var(--red-rgb),0.5);
  }
  .team-bio-panel__avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
  .team-bio-panel__avatar span{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-weight:600; font-size:40px; color:var(--bg); }
  .team-bio-panel__id{ min-width:0; }
  /* Same heading treatment as the rest of the site (see the h1,h2,h3 rule
     above) instead of its own italic/bold variant, so the team member's
     name in the bio panel matches the homepage's heading + body font. */
  .team-bio-panel__id h4{ font-family:'Fraunces', serif; font-style:normal; font-weight:460; line-height:1.05; font-size:clamp(20px,2.6vw,25px); color:var(--ink); margin-top:6px; letter-spacing:-0.01em; }
  .team-bio-panel__id > span{ font-size:13px; font-weight:700; color:var(--ink); display:block; margin-top:4px; }
  .team-bio-panel__inner p{
    position:relative; margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
    font-size:15px; line-height:1.85; color:var(--muted); max-width:none;
    /* Lets a blank line typed in the Customizer's bio textarea render as an
       actual paragraph break here. By default a browser collapses newline
       characters inside a <p> into a single space, which is why line
       breaks typed into the field weren't showing up — pre-line respects
       them as line breaks while still collapsing runs of plain spaces and
       wrapping long lines normally, so it's safe with bios of any length. */
    white-space:pre-line;
    opacity:0; transform:translateY(10px); transition:opacity .5s ease .2s, transform .5s var(--ease) .2s;
  }
  .team-bio-panel.is-open .team-bio-panel__inner p{ opacity:1; transform:translateY(0); }

  @media (max-width:640px){
    .team-bio-panel__head{ flex-direction:column; align-items:flex-start; gap:14px; }
    .team-bio-panel__inner p{ font-size:14px; max-width:none; }
    .team-bio-panel__quote{ display:none; }
  }

  .team-nav{ position:absolute; top:calc(50% - 9px); transform:translateY(-50%); z-index:5; width:48px; height:48px; border-radius:50%;
    border:1.5px solid rgba(var(--red-rgb),0.35); background:rgba(var(--bg-rgb),0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    box-shadow:0 6px 18px -6px rgba(var(--bg-rgb),0.6);
    display:flex; align-items:center; justify-content:center; cursor:none; color:var(--ink); transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
  .team-nav:hover{ border-color:var(--red); background:rgba(var(--red-rgb),0.14); color:var(--ink); box-shadow:0 8px 22px -6px rgba(var(--red-rgb),0.55), 0 0 0 4px rgba(var(--red-rgb),0.12); transform:translateY(-50%) scale(1.06); }
  .team-nav:active{ transform:translateY(-50%) scale(0.92); }
  .team-nav svg{ width:17px; height:17px; transition:transform .25s var(--ease); }
  .team-nav--prev:hover svg{ transform:translateX(-2px); }
  .team-nav--next:hover svg{ transform:translateX(2px); }
  .team-nav--prev{ left:-20px; }
  .team-nav--next{ right:-20px; }
  @media (max-width:960px){ .team-nav--prev{ left:-12px; } .team-nav--next{ right:-12px; } }
  @media (max-width:640px){
    .team-nav{ width:40px; height:40px; }
    .team-nav--prev{ left:-6px; } .team-nav--next{ right:-6px; }
    .team-member{ width:clamp(140px, 42vw, 176px); }
  }

  .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; margin-top:52px; align-items:start; }
  @media (max-width:1000px){ .contact-grid{ gap:40px; } }
  .contact-info{ min-width:0; }
  .cta-btn{ display:inline-flex; align-items:center; gap:10px; margin-top:36px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--red);
    text-decoration:none; font-weight:600; font-size:14.5px; color:var(--ink); width:fit-content; background:none; cursor:none; font-family:'Manrope';
    opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .4s, color .3s ease; }
  .section.is-visible .cta-btn{ opacity:1; transform:translateY(0); }
  .cta-btn:hover{ color:var(--ink); }
  .cta-btn__email{ color:var(--red); font-weight:800; }
  /* Solid red submit button — used by the contact form, the Selected Work
     popup form, and the post-submit success popup's "Mail now" action.
     At-rest shadow kept neutral (not red-tinted) so the flat button reads
     as the exact same red as heading text (em/eyebrow) — the red-tinted
     glow used previously bled into the black background and made it look
     like a lighter/different red than the plain text. */
  .cta-btn--solid{ background:var(--red); color:var(--ink); border:none; padding:14px 28px; border-radius:3px; font-weight:700;
    box-shadow:0 4px 12px -4px rgba(var(--bg-rgb),0.55); transition:background .25s ease, box-shadow .25s ease, transform .2s ease; cursor:none; }
  .cta-btn--solid:hover{ background:var(--red-hover); color:var(--ink); box-shadow:0 10px 26px -6px rgba(var(--red-rgb),0.85); transform:translateY(-1px); }
  .cta-btn--solid:active{ transform:translateY(0); }
  .contact-meta{ margin-top:54px; display:flex; flex-wrap:wrap; gap:12px 28px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:26px;
    opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s; }
  .section.is-visible .contact-meta{ opacity:1; transform:translateY(0); }

  /* Office cards (Head office + additional cities like Mumbai, Bangalore)
     — sit below the map as a compact grid of lightweight cards. The head
     office card spans the full row (via --full) so the additional cities
     line up neatly beneath it, side by side. */
  .contact-offices{
    margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px;
    opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .54s, transform .8s var(--ease) .54s;
  }
  .section.is-visible .contact-offices{ opacity:1; transform:translateY(0); }
  .contact-offices__item{
    display:flex; gap:12px; padding:16px; border:1px solid var(--line); border-radius:8px;
    background:rgba(var(--ink-rgb),0.014); transition:border-color .3s ease, background .3s ease;
  }
  .contact-offices__item--full{ grid-column:1 / -1; }
  .contact-offices__item:hover{ border-color:rgba(var(--red-rgb),0.4); background:rgba(var(--red-rgb),0.04); }
  .contact-offices__item svg{ flex:0 0 auto; width:17px; height:17px; margin-top:2px; stroke:var(--red); }
  .contact-offices__text{ display:flex; flex-direction:column; gap:5px; min-width:0; }
  .contact-offices__city{ font-family:'Fraunces'; font-style:italic; font-weight:700; font-size:15px; color:var(--ink); }
  .contact-offices__addr{ font-size:12px; line-height:1.6; color:var(--muted); }
  .contact-offices__text a{ margin-top:2px; font-size:11.5px; font-weight:700; letter-spacing:0.02em; color:var(--ink); align-self:flex-start; border-bottom:1px solid rgba(var(--red-rgb),0.5); padding-bottom:1px; transition:color .2s ease, border-color .2s ease; }
  .contact-offices__text a:hover{ color:var(--ink); border-color:var(--ink); }

  @media (max-width:560px){
    .contact-offices{ grid-template-columns:1fr; }
  }

  /* Google Maps card — sits directly under the office address. A thin
     accent header + full-color, unfiltered map makes it read as a clear,
     clickable "open the map" card instead of a flat, greyed-out box. */
  .contact-map{ margin-top:28px; border:1px solid var(--line); border-radius:10px; overflow:hidden;
    opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease) .58s, transform .8s var(--ease) .58s, border-color .3s ease, box-shadow .3s ease;
    background:var(--bg); box-shadow:0 14px 34px -18px rgba(var(--bg-rgb),0.7); }
  .section.is-visible .contact-map{ opacity:1; transform:translateY(0); }
  .contact-map:hover{ border-color:rgba(var(--red-rgb),0.5); box-shadow:0 18px 40px -16px rgba(var(--red-rgb),0.28); }
  .contact-map__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:12px 16px; background:rgba(var(--red-rgb),0.08); border-bottom:1px solid var(--line); }
  .contact-map__head span{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink); }
  .contact-map__head span svg{ width:14px; height:14px; stroke:var(--red); flex:0 0 auto; }
  .contact-map__head a{ font-size:11.5px; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--red); padding-bottom:2px; cursor:none; transition:color .2s ease; }
  .contact-map__head a:hover{ color:var(--red); }
  .contact-map__frame{ height:240px; }
  .contact-map iframe{ width:100%; height:100%; border:0; display:block; }
  @media (max-width:480px){ .contact-map__frame{ height:200px; } }

  .form-wrap{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s; }
  .section.is-visible .form-wrap{ opacity:1; transform:translateY(0); }

  /* Contact form — laid out horizontally on desktop (Name + Email share a
     row) so the whole form reads at a glance; collapses to a single,
     full-width column on tablet/mobile for easy thumb-typing. */
  #contactForm{ display:flex; flex-direction:column; gap:22px; }
  .field-row{ display:flex; gap:18px; }
  .field-row .field{ flex:1 1 0; min-width:0; margin-bottom:0; }
  .field{ margin-bottom:0; }
  .field label{ display:block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--ink); margin-bottom:10px; }
  .field input, .field textarea{
    width:100%; display:block; background:rgba(var(--ink-rgb),0.02); border:1px solid rgba(var(--ink-rgb),0.28); border-radius:5px;
    padding:14px 16px; color:var(--ink); font-size:14px; outline:none; transition:border-color .25s ease, background .25s ease;
    resize:vertical; cursor:auto; font-family:'Manrope'; }
  .field input:focus, .field textarea:focus{ border-color:var(--ink); background:rgba(var(--ink-rgb),0.05); }
  .field textarea{ min-height:96px; }
  .contact-submit{ align-self:flex-start; }
  /* Explicit red Let's Connect button, using the site's single --red
     variable directly (also reinforced by rfthunder-color-fix.css).
     Neutral (non-red) at-rest shadow — see the note on .cta-btn--solid
     above for why. */
  .contact-submit{ background:var(--red); box-shadow:0 4px 12px -4px rgba(var(--bg-rgb),0.55); }
  .contact-submit:hover{ background:var(--red-hover); box-shadow:0 10px 26px -6px rgba(var(--red-rgb),0.85); }
  #formNote{ margin-top:14px; font-size:11.5px; color:var(--muted); }
  .rfth-hp{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .form-error{ margin-top:10px; font-size:12.5px; color:var(--red-hover); min-height:1px; }
  .contact-submit.is-loading, .cta-btn--solid.is-loading{ opacity:0.7; cursor:progress; }
  @media (max-width:640px){
    .field-row{ flex-direction:column; gap:18px; }
    .contact-submit{ align-self:stretch; text-align:center; justify-content:center; }
  }
  @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

  /* Extra breathing room below the contact form/button — keeps this clear
     region free of any opaque card so the full 3D thunder bolt (repositioned
     lower in rfthunder-home.js) can render fully visible instead of being
     hidden behind the map/form. */
  .section--contact{ padding-bottom:clamp(210px, 26vw, 340px); }
  @media (max-width:640px){ .section--contact{ padding-bottom:180px; } }

  footer{ position:relative; z-index:10; border-top:1px solid var(--line); padding:34px clamp(20px,6vw,90px); max-width:var(--maxw); margin:0 auto; }
  /* 1fr auto auto — copy stays flexible on the left, legal links + social
     icons pack together and sit flush at the far right of the row. */
  .footer-bottom{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; font-size:11px; color:var(--muted); }
  .footer-bottom__copy{ min-width:0; }
  .footer-tagline{ display:inline-block; margin-bottom:2px; color:rgba(var(--ink-rgb),0.7); }
  /* Legal links (Privacy / Terms / Cookies) — right-aligned, sitting
     directly beside the social icons at the far right of the footer. */
  .footer-legal{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; text-align:right; margin-right:20px; }
  .footer-legal__link{ font-size:11px; font-weight:600; letter-spacing:0.02em; color:var(--muted); text-decoration:none; white-space:nowrap; cursor:none; transition:color .25s ease; }
  .footer-legal__link:hover{ color:var(--ink); }
  .footer-legal__link + .footer-legal__link{ position:relative; padding-left:12px; }
  .footer-legal__link + .footer-legal__link::before{ content:''; position:absolute; left:0; top:50%; width:3px; height:3px; border-radius:50%; background:var(--line); transform:translateY(-50%); }
  /* LinkedIn / Instagram sit on the right-hand side of the footer row. */
  .footer-social{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }
  .footer-social a{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
    border:1px solid var(--line); color:var(--muted); cursor:none; transition:border-color .25s ease, color .25s ease, transform .25s var(--ease); }
  .footer-social a:hover{ color:var(--ink); border-color:var(--red); transform:translateY(-2px); }
  .footer-social svg{ width:16px; height:16px; }
  @media (max-width:820px){
    .footer-bottom{ grid-template-columns:1fr; justify-items:center; text-align:center; }
    .footer-social{ justify-content:center; }
    .footer-legal{ margin-right:0; justify-content:center; text-align:center; }
  }

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

  /* custom themed scrollbar */
  ::-webkit-scrollbar{ width:9px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--red), var(--red-active)); border-radius:0; border:2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--ink); }
  html{ scrollbar-color: var(--red) var(--bg); scrollbar-width: thin; }

  /* cursor label — small contextual word riding beside the dot on key hover targets */
  #cursor .curs-label{ position:absolute; left:20px; top:50%; transform:translateY(-50%); font-family:'Manrope'; font-weight:800; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); text-shadow:0 1px 4px rgba(var(--bg-rgb),0.9), 0 0 8px rgba(var(--bg-rgb),0.6); white-space:nowrap; opacity:0; transition:opacity .2s ease; }
  #cursor.grow .curs-label.show{ opacity:1; }

  /* 3D tilt cards — perspective on the grid parents; transform itself is no
     longer transitioned here because rfthunder-home.js now drives it every
     frame (scroll tilt + idle "steady cursor" drift + live hover) with its
     own smoothing — stacking a CSS transition on top would just add a
     second, laggier layer of easing on top of that. */
  .culture-grid, .pillars, .locations-grid{ perspective:1200px; }
  .culture-grid .cell, .pillars .cell, .locations-grid .cell{ transform-style:preserve-3d; transition:background .3s ease; will-change:transform; }

  /* Same site-wide JS-driven 3D tilt system (see rfthunder-home.js) also
     runs on these — give them the same 3D rendering context. Their own
     entrance-reveal animation (opacity/translateY) is untouched: the JS
     only starts moving an element's transform after its section has
     already finished revealing it.
     `.team-card` is intentionally NOT included: it used to get a
     continuous JS-driven transform like the rest of this list, but that
     could shift its corner "read bio" button by a few pixels between an
     unlucky mousedown/mouseup pair, which is what made the button need
     several clicks to register. It now only uses the plain CSS `:hover`
     lift/glow a few lines down — a single transition per hover, not a
     60fps rewrite — so the button's on-screen position is rock solid
     for the entire duration of a click. */
  .astep, .contact-offices__item, .work-card, .contact-map{ transform-style:preserve-3d; will-change:transform; }

  /* Refined hover polish — a soft red glow shadow that lifts each tilted
     card off the black background. This is a separate property from the
     transform the JS drives every frame, so the two never fight: the CSS
     transition here only ever animates box-shadow/border-color. */
  .cell, .team-card, .astep, .contact-offices__item, .work-card, .contact-map{
    transition:background .3s ease, border-color .3s ease, box-shadow .4s ease;
  }
  .cell:hover, .team-card:hover, .astep:hover, .contact-offices__item:hover{
    box-shadow:0 22px 46px -26px rgba(var(--red-rgb),0.55), inset 0 0 0 1px rgba(var(--red-rgb),0.14);
  }
  .work-card:hover, .contact-map:hover{
    box-shadow:0 26px 54px -24px rgba(var(--red-rgb),0.4);
  }
  .astep{ border-radius:4px; }

  @media (prefers-reduced-motion: reduce){
    .culture-grid .cell, .pillars .cell, .locations-grid .cell,
    .team-card, .astep, .contact-offices__item, .work-card, .contact-map{ transform:none !important; }
  }

  /* icon draw-in animation for pillar SVGs */
  .pillar-icon svg path, .pillar-icon svg rect, .pillar-icon svg circle{ stroke-dasharray:140; stroke-dashoffset:140; transition:stroke-dashoffset 1.3s var(--ease); }
  .section.is-visible .pillar-icon svg path,
  .section.is-visible .pillar-icon svg rect,
  .section.is-visible .pillar-icon svg circle{ stroke-dashoffset:0; }

  /* back-to-top progress ring */
  #toTop{ overflow:visible; }
  #toTop svg.ring{ position:absolute; inset:-1px; width:40px; height:40px; transform:rotate(-90deg); }
  #toTop svg.ring circle{ fill:none; stroke:var(--red); stroke-width:1.4; stroke-linecap:round; }
  #toTop svg.arrow{ position:relative; width:14px; height:14px; stroke:var(--ink); }

  /* Work / case-study section — a "card" with the copy on the left and an
     oval (pill-shaped), red "Click Here" button pinned to the right that
     opens the lead popup. */
  .work-card{ margin-top:48px; display:flex; align-items:center; justify-content:space-between; gap:32px;
    border:1px solid var(--line); border-radius:8px; padding:34px clamp(22px,4vw,44px); background:rgba(var(--ink-rgb),0.015);
    opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease) .32s, transform .8s var(--ease) .32s, border-color .3s ease; }
  .section.is-visible .work-card{ opacity:1; transform:translateY(0); }
  .work-card:hover{ border-color:rgba(var(--red-rgb),0.4); }
  /* Font style matched exactly to the site's standard body-copy paragraph
     style (the same ".lede" treatment used by lines like "Wherever your
     business is, we're never far away." under Locations) — Manrope,
     regular weight, not italic — instead of the earlier heading-style
     treatment. */
  .work-card__text{ opacity:1 !important; transform:none !important; margin-top:0 !important;
    font-family:'Manrope', sans-serif; font-size:16.5px; font-weight:400; font-style:normal;
    line-height:1.7; letter-spacing:normal; color:var(--muted); max-width:560px; }
  /* Solid brand red — the exact same var(--red) used for the site's red
     text accents (em, eyebrow labels, etc.), not a gradient/blended tone.
     rfthunder-color-fix.css forces this same value !important as a
     cache-proof safety net, so this base rule and that override always
     agree — see the note at the top of that file.
     At-rest shadow is a plain dark shadow (not red-tinted) — a red-tinted
     glow bleeding out into the black background made this button read as
     a visibly different/lighter red than the flat, glow-free red used in
     heading text (em/eyebrow), even though the fill itself was identical.
     The continuous pulsing glow animation and shimmer sweep are removed
     for the same reason — a static, flat button matches the text color
     exactly instead of shifting with an animation. */
  .work-cta-btn{ position:relative; overflow:hidden; flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; gap:12px;
    height:66px; padding:0 38px; border-radius:999px; border:none; background:var(--red); color:var(--ink);
    font-family:'Manrope'; font-weight:800; font-size:18px; letter-spacing:0.02em; white-space:nowrap;
    cursor:none; box-shadow:0 6px 16px -6px rgba(var(--bg-rgb),0.6); isolation:isolate;
    transition:background .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
  /* Hover — a different (lighter) shade of the same red, computed from
     --red via rfth_shift_lightness() in functions.php, so it stays
     visibly "the same red" rather than jumping to an unrelated color. The
     hover glow is intentional here — it's an interaction cue, not the
     button's resting appearance, so it no longer needs to match the flat
     heading-text red. */
  .work-cta-btn:hover{ background:var(--red-hover); box-shadow:0 14px 34px -8px rgba(var(--red-rgb),0.9), 0 0 0 6px rgba(var(--red-rgb),0.12);
    transform:translateY(-3px) scale(1.05); }
  .work-cta-btn:active{ transform:translateY(-1px) scale(0.97); box-shadow:0 6px 16px -6px rgba(var(--red-rgb),0.7); }
  .work-cta-btn__label{ display:inline-block; line-height:1; }
  .work-cta-btn svg{ display:block; width:20px; height:20px; margin:auto; flex:0 0 auto; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
  .work-cta-btn:hover svg{ transform:translateX(6px); }
  @media (max-width:640px){
    .work-card{ flex-direction:column; align-items:flex-start; gap:22px; padding:26px clamp(18px,5vw,30px); }
    .work-cta-btn{ margin-left:0; align-self:flex-end; height:52px; padding:0 24px; font-size:13.5px; }
  }

  /* Selected Work lead popup */
  .rfth-modal{ position:fixed; inset:0; z-index:150; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
  .rfth-modal.is-open{ opacity:1; visibility:visible; }
  .rfth-modal__overlay{ position:absolute; inset:0; background:rgba(var(--bg-rgb),0.78); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); cursor:none; }
  .rfth-modal__panel{ position:relative; z-index:1; max-width:460px; width:calc(100% - 40px); margin:8vh auto 0; background:var(--bg); border:1px solid var(--line); border-radius:6px;
    padding:40px clamp(24px,4vw,44px) 36px; max-height:84vh; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateY(18px); transition:transform .35s var(--ease); }
  .rfth-modal.is-open .rfth-modal__panel{ transform:translateY(0); }
  .rfth-modal__close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:none;
    color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:none; transition:border-color .25s ease, color .25s ease; }
  .rfth-modal__close:hover{ border-color:var(--red); color:var(--ink); }
  .rfth-modal__close svg{ width:15px; height:15px; }
  .rfth-modal__body h3{ font-family:'Fraunces'; font-weight:500; font-size:clamp(22px,3vw,28px); max-width:340px; }
  .rfth-modal__intro{ margin-top:16px; font-size:14px; line-height:1.75; color:var(--muted); max-width:360px; }
  .rfth-modal__body form{ margin-top:30px; display:flex; flex-direction:column; gap:22px; }
  .rfth-modal__note{ margin-top:18px; font-size:14px; line-height:1.7; color:var(--ink); }
  .rfth-modal__note:empty{ display:none; }
  @media (max-width:480px){ .rfth-modal__panel{ margin-top:5vh; padding:32px 22px 28px; } }

  /* Contact-form success popup */
  .rfth-modal__panel--success{ text-align:center; max-width:420px; }
  .rfth-modal__check{ width:52px; height:52px; margin:0 auto 18px; border-radius:50%; background:rgba(var(--red-rgb),0.14);
    border:1px solid rgba(var(--red-rgb),0.5); display:flex; align-items:center; justify-content:center; color:var(--ink); }
  .rfth-modal__check svg{ width:24px; height:24px; }
  .rfth-modal__panel--success h3{ max-width:none; }
  .rfth-modal__panel--success .rfth-modal__intro{ margin-left:auto; margin-right:auto; }
  .success-email{ color:var(--ink); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:none; }
  .success-email:hover{ color:var(--red); }
  .rfth-modal__panel--success .cta-btn--solid{ margin-top:26px; width:100%; justify-content:center; display:inline-flex; }