/* ===========================================================
   Home only (index.html): the pinned hero + How we work scene, the hero
   video viewer and the stats. Driven by js/home-scene.js.
   Loaded after style.min.css, so old Home rules are overridden here with
   scoped selectors rather than edited there.
   Motion: things snap into place (--hs-snap), with transform/opacity only.
   =========================================================== */
.home-page{
  --hs-head: #0F1D07;
  --hs-ink: #11121A;
  --hs-ink-70: rgba(17,18,26,.7);
  --hs-ink-45: rgba(17,18,26,.45);
  --hs-ink-14: rgba(17,18,26,.14);
  --hs-ink-06: rgba(17,18,26,.06);
  --hs-bg: #ECE9E1; /* the page colour every page shares (--paper-alt) */
  --hs-card: #FFFFFF;
  --hs-accent: #4C7FC9;
  --hs-blue: #385C95;
  --hs-paper: #F4F2ED;
  --hs-snap: cubic-bezier(.34,1.45,.64,1);
  --hs-ease: cubic-bezier(.2,.7,.2,1);
  /* Bottom of the nav pill (22px + 59px), or of the 65px hamburger it
     collapses to below ~985px */
  --hs-band: 5.0625rem;
}
@media (max-width: 985px){ .home-page{ --hs-band: 5.4375rem; } }

/* ---------- Scene ---------- */
.hs{ position:relative; background: var(--hs-bg); transition: background-color .4s ease; }
.hs.home-blue-phase{ background: var(--hs-blue); }
html.js .hs{ height: 575vh; }  /* hero + five steps (the last, our clients) */
.hs-sticky{ position:relative; padding-top: var(--hs-band); }
html.js .hs-sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.hs-grid{
  position:relative; height:100%;
  max-width: 92.5rem; margin:0 auto; padding: 0 var(--logo-inset, 2.5rem);
  display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center;
  gap: clamp(2rem, 5vw, 5.5rem);
}
.hs-copy{ display:grid; min-width:0; }
.hs-panel{ padding-bottom: 2.5rem; }
html.js .hs-panel{ grid-area: 1 / 1; align-self:center; padding-bottom:0; will-change: transform, opacity; }
html.js .hs-panel:not(.hs-panel-hero){ opacity:0; }

/* Hero copy */
.hs-eyebrow{
  display:flex; align-items:center; gap:0.625rem; margin:0;
  font-size:0.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--hs-ink-70);
}
.hs-eyebrow::before{ content:""; flex:0 0 auto; align-self:flex-start; margin-top:.3em; width:0.5625rem; height:0.5625rem; border-radius:2px; background: var(--hs-accent); }
/* The square snaps into place as the headline comes in */
html.js .hs-eyebrow::before{ animation: hs-square-in .6s var(--hs-snap) both; }
@keyframes hs-square-in{ from{ transform: translate(0.3125rem,-0.375rem) rotate(28deg); } to{ transform:none; } }
.hs-title{
  margin: 1.25rem 0 0; max-width: 13ch;
  font-size: clamp(2.5rem, 5vw, 4.75rem); line-height:1.02; letter-spacing:-.025em; font-weight:600; color: var(--hs-head);
}
/* The headline comes in the way the Contact page's does (contact.css
   ctLineIn): each word rises a little and fades up with a small snap,
   a beat apart. A CSS animation, so it never waits on a script. */
.hs-w{ display:inline-block; }
.hs-wi{ display:inline-block; }
html.js .hs-title .hs-wi{ animation: hs-word-in .5s var(--hs-snap) both; }
html.js .hs-title .hs-w:nth-child(2) .hs-wi{ animation-delay:.035s; }
html.js .hs-title .hs-w:nth-child(3) .hs-wi{ animation-delay:.07s; }
html.js .hs-title .hs-w:nth-child(4) .hs-wi{ animation-delay:.105s; }
html.js .hs-title .hs-w:nth-child(5) .hs-wi{ animation-delay:.14s; }
html.js .hs-title .hs-w:nth-child(6) .hs-wi{ animation-delay:.175s; }
@keyframes hs-word-in{ from{ opacity:0; transform: translateY(.22em); } to{ opacity:1; transform:none; } }
.hs-sub{ margin: 1.375rem 0 0; max-width: 40ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height:1.5; font-weight:500; color: var(--hs-ink-70); }
.hs-ctas{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2rem; }
.hs-cue{ display:flex; align-items:center; gap:0.625rem; margin:3.25rem 0 0; font-size:0.8125rem; font-weight:500; color: var(--hs-ink-45); }
.hs-cue svg{ width:0.875rem; height:0.875rem; }

/* Buttons: the sitewide .btn/.btn-pill/.btn-outline (lift, --btn-fill
   hover fill, shadow and press all come from style.css), plus the
   brand star (style.css --bm-star) that rests small and turned, and
   snaps into place on hover/focus. */
.hs-btn{ gap:0.75rem; }
.hs-btn:focus-visible{ outline: 2px solid var(--hs-accent); outline-offset: 0.1875rem; }
.hs-btn-tile{
  display:inline-block; flex:none; width:0.8125rem; height:0.8125rem; background: var(--hs-accent);
  -webkit-mask: var(--bm-star) center / contain no-repeat;
          mask: var(--bm-star) center / contain no-repeat;
  transform: translate(-2px, 2px) rotate(-30deg) scale(.78);
  transition: transform .55s var(--hs-snap), background-color 0s linear .1s;
}
.btn-outline .hs-btn-tile{ background: var(--hs-ink); }
.hs-btn:hover .hs-btn-tile, .hs-btn:focus-visible .hs-btn-tile{ transform:none; }
.btn-pill.hs-btn:hover .hs-btn-tile, .btn-outline.hs-btn:hover .hs-btn-tile{ background: var(--hs-paper); }

/* Steps */
.hs-step-num{ margin:0; font-size:0.8125rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--hs-ink-45); font-variant-numeric: tabular-nums; }
.hs-step-num b{ color: var(--hs-ink); font-weight:700; }
/* The same square as the hero's eyebrow, so each step's label stands out */
.hs-step-num::before{ content:""; display:inline-block; width:0.5625rem; height:0.5625rem; margin-right:0.625rem; border-radius:2px; background:var(--hs-accent); vertical-align:0.06em; }
.hs.home-blue-phase .hs-step-num::before{ background: var(--hs-paper); }
html.js .hs-step-num::before{ transform: translate(0.3125rem,-0.375rem) rotate(28deg); transition: transform .6s var(--hs-snap), background-color .4s ease; }
html.js .hs-step.is-current .hs-step-num::before{ transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .hs-step-num::before{ transform:none; transition:none; } }
.hs-step h2{ margin-top:0.875rem; font-size: clamp(2.5rem, 4.6vw, 4.25rem); line-height:1.02; letter-spacing:-.025em; font-weight:600; color: var(--hs-head); }
.hs-step-sub{ margin:0.75rem 0 0; max-width:30ch; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height:1.35; font-weight:500; color: var(--hs-ink-70); }
.hs-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.625rem; max-width: 48ch; }
.hs-tags li{
  font-size:0.8438rem; font-weight:500; line-height:1.2; color: var(--hs-ink);
  padding:0.4375rem 0.8125rem; border-radius:62.4375rem; border:1px solid var(--hs-ink-14); background: rgba(255,255,255,.55);
}
.hs-tags .hs-tag-more{ display:none; color: var(--hs-ink-70); background:transparent; border-style:dashed; }

/* Stage (the cell is a plain box side by side; stacked, it's the size
   container the stage fits itself into, see Responsive) */
.hs-stage-cell{ position:relative; min-width:0; }
.hs-stage-wrap{ --hs-stage: min(44vw, calc(100svh - var(--hs-band) - 10.625rem), 37.5rem); position:relative; width: var(--hs-stage); }
.hs-stage{ position:relative; width:100%; aspect-ratio:1/1; }
.hs-stage::before{
  content:""; position:absolute; inset:-10%;
  background-image: radial-gradient(var(--hs-ink-14) 1px, transparent 1.3px); background-size:1.375rem 1.375rem;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.hs.is-watchable .hs-stage{ cursor:pointer; }
.hs-layer{ position:absolute; inset:0; }
.hs-stage.is-dim .hs-layer{ opacity:0; }
.hs-slot{ position:absolute; left:0; top:0; border:1.5px dashed var(--hs-ink-14); border-radius: calc(var(--S, 31.25rem) * .035); }
.hs-bridge{ position:absolute; background: var(--hs-head); border-radius:6.1875rem; }
.hs-mod{ position:absolute; left:0; top:0; will-change: transform, opacity; }
html.js .hs-mod, html.js #hsSlots{ opacity:0; }
.hs-mod-solid, .hs-mod-outline, .hs-mod-media{ position:absolute; inset:0; border-radius: calc(var(--S, 31.25rem) * .035); }
/* Square while the tiles still form the whole video (--hs-mr 0, set by
   js/home-scene.js), rounding off as they come apart... */
.hs-mod-media, .hs-mod-solid{ border-radius: calc(var(--S, 31.25rem) * .035 * var(--hs-mr, 1)); }
/* ...except the picture's own outer corners, which stay as round as the
   video's throughout. The tiles are scaled up by --hs-grow while they
   form it, so the radius is divided by that to look the same. */
.hs-mod{ --hs-ro: max(calc(var(--S, 31.25rem) * .035 * var(--hs-mr, 1)), calc(var(--S, 31.25rem) * .035 / var(--hs-grow, 1))); }
.hs-mod.is-c-tl .hs-mod-media, .hs-mod.is-c-tl .hs-mod-solid{ border-top-left-radius: var(--hs-ro); }
.hs-mod.is-c-tr .hs-mod-media, .hs-mod.is-c-tr .hs-mod-solid{ border-top-right-radius: var(--hs-ro); }
.hs-mod.is-c-bl .hs-mod-media, .hs-mod.is-c-bl .hs-mod-solid{ border-bottom-left-radius: var(--hs-ro); }
.hs-mod.is-c-br .hs-mod-media, .hs-mod.is-c-br .hs-mod-solid{ border-bottom-right-radius: var(--hs-ro); }
.hs-mod-solid{ background: var(--hs-card); border:1px solid var(--hs-ink-06); box-shadow: 0 1px 0 var(--hs-ink-06), 0 0.75rem 1.625rem -1rem rgba(17,18,26,.4); }
.hs-mod-outline{ border:1.5px dashed var(--hs-ink-45); opacity:0; }
.hs-mod.is-accent .hs-mod-solid{ background: var(--hs-accent); border-color:transparent; }
.hs-mod.is-accent .hs-mod-outline{ border-color: var(--hs-accent); }
.hs-mod-glyph{ position:absolute; left:14%; top:14%; width:15%; aspect-ratio:1; border-radius:50%; box-shadow: inset 0 0 0 1.5px var(--hs-ink-45); }
.hs-mod-glyph::after{ content:""; position:absolute; left:150%; top:30%; width:190%; height:40%; border-radius:2px; background: var(--hs-ink-14); }
.hs-mod.is-accent.is-solid .hs-mod-glyph{ box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9); }
.hs-mod.is-accent.is-solid .hs-mod-glyph::after{ background: rgba(255,255,255,.45); }
.hs-mod-label{
  position:absolute; left:14%; right:6%; bottom:12%; opacity:0;
  font-size: max(0.625rem, calc(var(--S, 31.25rem) * .028)); font-weight:600; line-height:1.1; color: var(--hs-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hs-mod.is-accent .hs-mod-label{ color: var(--hs-accent); }
.hs-mod.is-accent.is-solid .hs-mod-label{ color:#fff; }
/* The window onto the video: the poster slice (positioned by JS) until
   the canvas has a frame */
.hs-mod-media{ overflow:hidden; background: #0B1016; }
.hs-mod-media canvas{ display:block; width:100%; height:100%; opacity:0; }
.hs.hs-has-frames .hs-mod-media canvas{ opacity:1; }
/* The whole video the hero opens on (js/home-scene.js draws the film's
   full version into it, and fades it as the first scroll breaks it into
   the tiles beneath). Same corners as a tile; clicks go through to the
   stage, which opens the viewer. */
.hs-full{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  border-radius: calc(var(--S, 31.25rem) * .035); background:#0B1016;
  box-shadow: 0 1.875rem 3.75rem -2.25rem rgba(17,18,26,.5);
  will-change: opacity;
}
.hs-full canvas{ display:block; width:100%; height:100%; }
html.js .hs-full{ opacity:0; }
/* It comes in the way the Contact page's form card does (contact.css
   ctCardIn): a quick fade while it settles in from up-left, with a
   slight turn and a small snap */
@keyframes hs-full-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes hs-full-in{ from{ transform: translate(-1rem, -1.375rem) rotate(-1.4deg); } to{ transform:none; } }
.hs-full.is-in{ animation: hs-full-fade .3s var(--hs-ease) .1s backwards, hs-full-in .8s var(--hs-snap) .1s backwards; }
.hs-ring{ position:absolute; left:0; top:0; border:2px solid var(--hs-accent); border-radius: calc(var(--S, 31.25rem) * .035); opacity:0; pointer-events:none; }
.hs-ring.go{ animation: hs-ring .8s var(--hs-ease); }
@keyframes hs-ring{ from{ opacity:.9; transform:scale(1); } to{ opacity:0; transform:scale(1.4); } }
/* The one source video: present (so it keeps decoding) but never seen here */
.hs-video-home{ position:absolute; inset:0; opacity:0; pointer-events:none; overflow:hidden; border-radius: calc(var(--S, 31.25rem) * .035); }
.hs-video{ display:block; width:100%; height:100%; object-fit:cover; }
html:not(.js) .hs-video-home{ opacity:1; }

/* Pause and theatre mode (a plain four-corner icon) sit in the video's
   top-right corner, no backgrounds, in a soft see-through ink rather
   than solid black; theatre mode opens the larger viewer. It fades with
   the hero (js/home-scene.js) and comes in with the video card. */
.hs-video-actions{
  position:absolute; right:0.75rem; top:0.75rem; z-index:2;
  display:flex; align-items:center; justify-content:flex-end; gap:2px;
}
.hs-theatre{
  display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:0.625rem;
  background:none; color: rgba(17,18,26,.42);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.7));
  transition: transform .35s var(--hs-snap), color .2s ease;
}
.hs-theatre svg{ width:1.25rem; height:1.25rem; }
.hs-pause svg{ width:1.0625rem; height:1.0625rem; }
/* Over the film's dark (blue) frames: the same soft icons, in white */
.hs-video-actions.is-on-dark .hs-theatre{ color: rgba(255,255,255,.62); filter: drop-shadow(0 0 2px rgba(11,16,22,.35)); }
.hs-video-actions.is-on-dark .hs-theatre:hover, .hs-video-actions.is-on-dark .hs-theatre:focus-visible{ color: rgba(255,255,255,.92); }
.hs-video-actions.is-on-dark .hs-theatre:focus-visible{ outline-color: #fff; }
.hs-pause .icon-play, .hs-pause.is-paused .icon-pause{ display:none; }
.hs-pause.is-paused .icon-play{ display:block; }
.hs-theatre:hover, .hs-theatre:focus-visible{ transform: scale(1.15); color: rgba(17,18,26,.72); }
.hs-theatre:active{ transform: scale(.95); transition-duration:.12s; }
.hs-theatre:focus-visible{ outline:2px solid var(--hs-accent); outline-offset:2px; }
html.js .hs-video-actions{ animation: hs-full-fade .3s var(--hs-ease) .5s backwards; }
html:not(.js) .hs-video-actions{ display:none; }

/* Rail */
.hs-rail-wrap{
  position:absolute; left: var(--logo-inset, 2.5rem); right: var(--logo-inset, 2.5rem); bottom:1.75rem;
  display:flex; align-items:flex-end; gap: clamp(1.25rem, 3vw, 2.75rem); pointer-events:none;
}
html.js .hs-rail-wrap{ opacity:0; }
html.js .hs-rail-wrap:focus-within{ opacity:1 !important; pointer-events:auto !important; }
.hs-rail{ display:flex; gap: clamp(0.875rem, 2.4vw, 2rem); }
.hs-rail button{
  display:grid; gap:0.5rem; padding:0.375rem 0; text-align:left;
  font-size:0.7813rem; font-weight:600; letter-spacing:.04em; color: var(--hs-ink-45); font-variant-numeric: tabular-nums;
}
.hs-rail button[aria-current="step"], .hs-rail button:hover{ color: var(--hs-ink); }
.hs-rail button:focus-visible{ outline:2px solid var(--hs-accent); outline-offset:0.1875rem; border-radius:0.25rem; }
.hs-track{ display:block; width: clamp(2.75rem, 6vw, 5rem); height:2px; border-radius:2px; background: var(--hs-ink-14); overflow:hidden; }
.hs-track i{ display:block; height:100%; background: var(--hs-ink); transform: scaleX(0); transform-origin:left; }
/* The clients step's tab: named in full, filling like the others */
.hs-rail .hs-rail-work{ white-space:nowrap; }
.hs-rail-work > span:first-child{ display:inline-flex; align-items:center; gap:0.5rem; }
.hs-rail-work .hs-btn-tile{ width:0.6875rem; height:0.6875rem; }
.hs-rail-work:hover .hs-btn-tile, .hs-rail-work:focus-visible .hs-btn-tile, .hs-rail-work[aria-current="step"] .hs-btn-tile{ transform:none; }
.hs.home-blue-phase .hs-rail-work .hs-btn-tile{ background: var(--hs-paper); }

/* Our clients: a soft tile per client with its logo in one ink, centred
   (a logo wall), each opening its case study */
.hs-client-list{ display:grid; grid-template-columns: repeat(2, minmax(0, 13.5rem)); gap:0.75rem; margin:1.625rem 0 0; padding:0; list-style:none; }
.hs-client{
  display:flex; align-items:center; justify-content:center; aspect-ratio: 4 / 3; padding:1.25rem;
  border-radius:1.5rem; background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(17,18,26,.04);
  text-decoration:none; transition: transform .3s var(--hs-snap), background-color .3s ease;
}
.hs-client:hover, .hs-client:focus-visible{ transform: translateY(-2px); background: rgba(255,255,255,.85); }
.hs-client:focus-visible{ outline:2px solid var(--hs-accent); outline-offset:0.1875rem; }
.hs-client img{ display:block; width:auto; max-width:88%; }
/* HSA: its favicon (in one ink, like the other logos) beside its name */
.hs-client--hsa{ gap:0.625rem; }
.hs-client--hsa img{ height:1.0625rem; min-width:0; }
.hs-client--hsa .hs-client-mark{ flex:none; width:1.875rem; height:1.875rem; border-radius:0.375rem; }
/* (the name's box includes the tail of its g, so its letters sit high:
   nudged down to centre them on the favicon) */
.hs-client--hsa img:not(.hs-client-mark){ transform: translateY(10%); }
.hs-client--coastal img{ height:1.25rem; }
@media (max-width: 640px){
  .hs-client-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:0.5rem; margin-top:1rem; max-width: 22rem; }
  .hs-client{ aspect-ratio: 3 / 2; border-radius:1rem; padding:0.875rem; }
  .hs-client--hsa{ gap:0.4375rem; }
  .hs-client--hsa img{ height:0.75rem; }
  .hs-client--hsa .hs-client-mark{ width:1.375rem; height:1.375rem; border-radius:0.3125rem; }
  .hs-client--coastal img{ height:0.75rem; }
}
/* (on the blue the scene turns as it leaves) */
.hs.home-blue-phase .hs-clients .btn-outline{ color: var(--hs-paper); border-color: var(--hs-paper); --btn-fill: var(--hs-paper); }
.hs.home-blue-phase .hs-clients .btn-outline:hover{ color: var(--hs-ink); }
.hs.home-blue-phase .hs-clients .btn-outline .hs-btn-tile{ background: var(--hs-paper); }
.hs.home-blue-phase .hs-clients .btn-outline:hover .hs-btn-tile{ background: var(--hs-ink); }

/* On blue (the shared Home background phase, as the scene leaves) */
.hs .hs-step h2, .hs .hs-step-sub, .hs .hs-step-num, .hs .hs-step-num b, .hs .hs-tags li,
.hs .hs-rail button{ transition: color .4s ease, border-color .4s ease; }
.hs.home-blue-phase .hs-step h2, .hs.home-blue-phase .hs-step-num b,
.hs.home-blue-phase .hs-tags li,
.hs.home-blue-phase .hs-rail button[aria-current="step"]{ color: var(--hs-paper); }
.hs.home-blue-phase .hs-step-sub{ color: rgba(244,242,237,.8); }
.hs.home-blue-phase .hs-step-num, .hs.home-blue-phase .hs-rail button{ color: rgba(244,242,237,.6); }
.hs.home-blue-phase .hs-tags li{ background:transparent; border-color: rgba(244,242,237,.3); }
.hs.home-blue-phase .hs-track{ background: rgba(244,242,237,.25); }
.hs.home-blue-phase .hs-track i{ background: var(--hs-paper); }
.hs.home-blue-phase .hs-slot{ border-color: rgba(244,242,237,.25); }

/* ---------- Video viewer ---------- */
.hs-viewer{ position:fixed; inset:0; z-index:220; }
.hs-viewer[hidden]{ display:none; }
.hs-viewer-backdrop{ position:absolute; inset:0; background: rgba(11,16,22,.92); opacity:0; transition: opacity .3s ease; }
.hs-viewer.is-open .hs-viewer-backdrop{ opacity:1; }
.hs-viewer-panel{
  --pad: clamp(1rem, 4vw, 4rem);
  position:absolute; inset:0; display:grid; place-items:center; padding: var(--pad);
}
.hs-viewer-frame{
  position:relative; width: min(100%, calc((100svh - 2 * var(--pad)) * 16 / 9), 90rem); aspect-ratio: 16 / 9;
  border-radius: clamp(0.75rem, 1.1vw, 1.125rem); overflow:hidden; background:#0B1016;
  opacity:0; transform: translateY(0.875rem) scale(.94) rotate(-1deg);
  transition: transform .55s var(--hs-snap), opacity .25s ease;
}
.hs-viewer.is-open .hs-viewer-frame{ opacity:1; transform:none; }
.hs-viewer-frame .hs-video{ object-fit:contain; }
.hs-viewer-frame:fullscreen{ width:100vw; height:100vh; max-width:none; aspect-ratio:auto; border-radius:0; transform:none; }
.hs-viewer-frame:-webkit-full-screen{ width:100vw; height:100vh; max-width:none; aspect-ratio:auto; border-radius:0; transform:none; }
.hs-viewer-close{
  position:absolute; top: clamp(0.75rem, 2vw, 1.5rem); right: clamp(0.75rem, 2vw, 1.5rem);
  display:grid; place-items:center; width:3rem; height:3rem; border-radius:50%;
  background: var(--nav-bg, #0F1D07); color: var(--nav-fg, #F3EFE7); border:1px solid rgba(255,255,255,.12);
  transition: transform .35s var(--hs-snap);
}
.hs-viewer-close svg{ width:1rem; height:1rem; }
.hs-viewer-close:hover{ transform: rotate(90deg); }
.hs-viewer-close:active{ transform: scale(.94); }
.hs-viewer-close:focus-visible, .hs-viewer .hero-video-control:focus-visible{ outline:2px solid var(--hs-accent); outline-offset:0.1875rem; }

/* ---------- Stats: the number, then the label ----------
   The unit squares that sat under each number are gone (Cory: "get rid
   of squares below stats"). The figure column keeps its width (sized
   off --u) so the three numbers and labels still line up in columns. */
.home-page .hs-stats li{
  --u: clamp(0.6875rem, 1vw, 0.875rem);
  display:grid; grid-template-columns: calc(var(--u) * 14.6) minmax(0, 1fr); column-gap: clamp(1.125rem, 2.2vw, 2rem); align-items:center;
  padding: 1.375rem 0;
}
.hs-stat-fig{ display:grid; justify-items:start; row-gap: calc(var(--u) * .9); min-width:0; }
.hs-stat-num{ font-weight:700; font-size: clamp(2.375rem, 3.8vw, 3.5rem); letter-spacing:-.045em; line-height:1; color: var(--hs-ink); font-variant-numeric: tabular-nums; }
.home-page .hs-stats .stat-label{ display:block; max-width: 24ch; margin:0; line-height:1.4; }
.hs-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- App ecosystem (#homeApps, js/home-apps.js) ----------
   The statement and the app tiles the scene's modules turn into. Shares the
   scene's grid (.hs-sticky/.hs-grid/.hs-stage-wrap), so the carousel pins
   exactly where the modules were. */
.hx{ position:relative; background: var(--hs-bg); transition: background-color .4s ease; overflow-x: clip; }
.hx.home-blue-phase{ background: var(--hs-blue); }
html.js .hx{ height: 175vh; }
.hx-copy{ min-width:0; container-type: inline-size; }
.hx-statement{
  margin:0; font-weight:700; line-height:.98; letter-spacing:-.045em; color: var(--hs-head);
  font-size: clamp(2.125rem, 5vw, 5.75rem); font-size: clamp(1.875rem, 9.6cqi, 7rem);
  transition: color .4s ease;
}
.hx.home-blue-phase .hx-statement{ color: var(--hs-paper); }
.hx-line{ display:block; }
.hx-line-in{ display:inline-block; will-change: transform; }
.hx-line-2{ color: var(--hs-accent); transition: color .4s ease; }
.hx.home-blue-phase .hx-line-2{ color: #83D4CE; }
.hx-nowrap{ white-space:nowrap; }
.hx-star{ display:inline-block; width:.42em; height:.42em; margin-left:.12em; vertical-align: .38em; fill: currentColor; transform-origin: 50% 50%; }
/* Scrolls on and off like a How We Work step (js/home-apps.js renderLines) */
html.js .hx.is-live .hx-line{ opacity:0; }
html.js .hx.is-live .hx-statement{ will-change: transform; }
html:not(.js) .hx-stage-wrap{ display:none; }
.hx-stage{ position:relative; width:100%; aspect-ratio:1/1; }
.hx-ring{ position:absolute; left:50%; top:50%; width:0; height:0; perspective-origin: 0 0; }
/* (z-index: the ring's tiles are ordered by depth among themselves, all
   rows together, and stay within the ring) */
.hx-spin{ position:absolute; left:0; top:0; z-index:0; }
/* One perspective per row, its vanishing point at the row's own height
   (js/home-apps.js sets the perspective and the row's top) */
.hx-row{ position:absolute; left:0; top:0; width:0; height:0; }
.hx-row-in{ position:absolute; left:0; top:0; }
/* The rows' fixed copies (js/home-apps.js flyRows), in #hxFly */
.hx-frow{ position:absolute; width:0; height:0; }
/* One app tile (also the back face of a flying module) */
.hx-tile{
  position:absolute; left: calc(var(--T, 7.5rem) * -.5); top: calc(var(--T, 7.5rem) * -.5);
  width: var(--T, 7.5rem); height: var(--T, 7.5rem); border-radius: calc(var(--T, 7.5rem) * .17);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: calc(var(--T, 7.5rem) * .07);
  background: linear-gradient(160deg, #FFFFFF 0%, #F2EFE9 100%); color: var(--hs-ink);
  box-shadow: inset 0 -2px 0 rgba(17,18,26,.06), 0 1px 0 rgba(17,18,26,.06), 0 0.875rem 1.625rem -1rem rgba(17,18,26,.45);
  will-change: transform, opacity;
}
:is(.hx-spin, .hx-frow) .hx-tile{ opacity:0; }
.hx-tile img{ width:54%; height:54%; object-fit:contain; }
/* The ring tiles look like the original app-carousel video's: plain white
   squares, crisply edged, with the logo large; the ones set back on the
   inner ring (.hx-tile--in) are light grey */
:is(.hx-spin, .hx-frow) .hx-tile{ background:#FFFFFF; border-radius: calc(var(--T, 7.5rem) * .12); box-shadow: 0 0 0 1px rgba(17,18,26,.06), 0 0.75rem 1.5rem -1.125rem rgba(17,18,26,.4); }
:is(.hx-spin, .hx-frow) .hx-tile.hx-tile--in{ background:#ECECEE; }
:is(.hx-spin, .hx-frow) .hx-tile img{ width:60%; height:60%; }
:is(.hx-spin, .hx-frow) .hx-tile--mark img{ width:54%; height:54%; }
/* Brand marks fill their box edge to edge: ~25% padding each side, so they
   sit level with the app icons (which carry their own) */
.hx-tile--mark img, .hj-app.is-mark img{ width:50%; height:50%; }
.hx-tile svg{ width:34%; height:34%; color: var(--hs-ink-70); }
.hx-tile span{
  max-width:88%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size: max(0.5625rem, calc(var(--T, 7.5rem) * .105)); font-weight:600; line-height:1.1;
}
.hx-tile.is-accent{ background: var(--hs-accent); color:#fff; }
.hx-tile.is-accent svg{ color:#fff; }
/* The flying copies of the scene's modules (fixed, only while they travel) */
.hx-fly{ position:fixed; inset:0; z-index:6; pointer-events:none; display:none; }
.hx-fly.is-on{ display:block; }
/* (not a layer of its own: the flying copies are ordered by depth with
   the ring's tiles in the fixed rows beside them) */
.hx-fly-3d{ position:absolute; inset:0; }
.hx-clone{ position:absolute; width: var(--T, 7.5rem); height: var(--T, 7.5rem); will-change: transform, opacity; }
.hx-face{ position:absolute; left:0; top:0; width:100%; height:100%; }
html.js .hx-clone .hx-face{ opacity:1; }
.hx-clone .hs-mod-label{ opacity:1; }
.hx-face.hx-tile{ transform: scaleX(-1); }  /* reads the right way round once flipped */
.hx-clone.is-flipped .hx-face-front, .hx-clone:not(.is-flipped) .hx-face-back{ visibility:hidden; }
/* The scene's own modules step aside while their copies travel */
.hs-stage.hx-away #hsMods{ visibility:hidden; }
.hs-stage.hx-away #hsBridges{ opacity:0; transition: opacity .25s ease; }

/* ---------- Tile journey (js/home-journey.js) ----------
   The carousel's tiles fly on to the About photo and then to the Latest
   Insights cards. Two absolute layers inside #about (page coordinates);
   never clickable, and hidden (display:none) whenever nothing is flying. */
.home-page .about-section{ position:relative; }
.hj-layer{ position:absolute; left:0; top:0; width:100%; height:0; overflow-x:clip; pointer-events:none; z-index:4; }
.hj-l1, .hj-l2{ position:absolute; left:0; top:0; width:100%; height:0; display:none; }
.hj-l1.is-on, .hj-l2.is-on{ display:block; }
.hj-tile, .hj-lift{ position:absolute; left:0; top:0; will-change: transform, opacity; }
.hj-face{ position:absolute; inset: var(--g, 0px); }
/* Front: the app tile it was on the ring (the same look as .hx-tile) */
.hj-app{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7%;
  border-radius:17%; background: linear-gradient(160deg, #FFFFFF 0%, #F2EFE9 100%); color: var(--hs-ink);
  box-shadow: inset 0 -2px 0 rgba(17,18,26,.06), 0 1px 0 rgba(17,18,26,.06), 0 0.875rem 1.625rem -1rem rgba(17,18,26,.45);
}
.hj-app img{ width:54%; height:54%; object-fit:contain; }
.hj-app svg{ width:34%; height:34%; color: var(--hs-ink-70); }
.hj-app span{ max-width:88%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: var(--fs, 0.75rem); font-weight:600; line-height:1.1; }
.hj-app.is-accent{ background: var(--hs-accent); color:#fff; }
.hj-app.is-accent svg{ color:#fff; }
/* Back: its slice of the photo (mirrored so it reads right once flipped) */
.hj-pic, .hj-lift-pic, .hj-lift-card{ background-color: #D9D4CA; background-repeat:no-repeat; box-shadow: 0 0.625rem 1.375rem -0.875rem rgba(17,18,26,.5); }
.hj-pic{ transform: scaleX(-1); }
.hj-tile:not(.is-flipped) .hj-pic, .hj-tile.is-flipped .hj-app{ visibility:hidden; }
/* The gaps: photo slices from the start, no flip */
.hj-tile.is-gap .hj-pic{ transform:none; visibility:visible; }
.hj-tile.is-gap .hj-app{ display:none; }
/* Flight 2: photo slice in front, the article's image behind */
.hj-lift-card{ transform: scaleX(-1); }
.hj-lift:not(.is-flipped) .hj-lift-card, .hj-lift.is-flipped .hj-lift-pic{ visibility:hidden; }
/* A card someone tabs to is always shown in full */
.hj-on .news-card:focus-within{ opacity:1 !important; transform:none !important; pointer-events:auto !important; }

/* ---------- Responsive ----------
   Two layouts. Side by side (text left, tiles right) on desktops and
   landscape tablets; stacked on phones and portrait tablets, where the
   text always comes first and the tiles fill whatever the pinned screen
   has left below it (.hs-stage-cell is a size container, so the stage is
   min(its width, its height) and never pushes anything off screen).
   The same query is STACK in js/home-apps.js and js/home-journey.js. */

/* About, Latest Insights and the footer share the top of the page's
   edges and middle gap (see --page-edge in style.css): the same inset
   from the screen's sides as the hero's text and tiles, and the same
   space between the copy and the photo as between the hero's copy and
   its tiles. --container-wide is 100% here, so every column, card and
   the footer's puzzle measure from those edges. */
.home-page .about-section, .home-page .news-section{
  padding-left: var(--page-edge); padding-right: var(--page-edge); --container-wide: 100%;
}
.home-page .about-grid{ gap: var(--page-gap); }
/* Side by side: About is laid out like the hero above it (js/home-scene.js
   measures the hero): the copy ends where the hero's heading does and the
   photo is the hero visual's width, so it starts where that does. The
   services under each How We Work step run to the same edge. */
@media (min-width: 861px) and (min-aspect-ratio: 1/1), (min-width: 1101px){
  .home-page .about-grid{ display:grid; grid-template-columns: minmax(0, 1fr) var(--hs-stage-w, 45%); }
  .home-page .about-left{ max-width: var(--hs-text-w, none); }
  .home-page .hs-tags{ max-width: var(--hs-text-w, 48ch); }
}

@media (max-width: 860px), (max-width: 1100px) and (max-aspect-ratio: 1/1){
  .home-page{ --hs-stack-max: 27.5rem; --hs-rail-h: 3.75rem; }
  html.js .hs{ height: 525vh; }
  .hs-grid{
    display:flex; flex-direction:column; justify-content:center; align-items:stretch;
    gap: clamp(0.75rem, 2.4svh, 2.25rem);
    padding-top: clamp(0px, 1.2svh, 1rem); padding-bottom: var(--hs-rail-h);
  }
  .hs-copy{ flex:none; position:relative; }
  /* The copy's height is the step panels'; the taller hero panel hangs
     over the stage's box, and js/home-scene.js (placeStage) moves the
     stage down under it for the hero */
  html.js .hs-panel-hero{ position:absolute; left:0; right:0; top:0; }
  .hs-stage-wrap{ transform-origin: 50% 0; }
  .hs-video-actions{ right:0.625rem; top:0.625rem; transform: scale(var(--hs-ik, 1)); transform-origin: 100% 0; }
  .hs-stage-cell{
    flex: 1 1 0; min-height:0; max-height: var(--hs-stack-max);
    container-type: size; display:flex; justify-content:center; align-items:flex-start;
  }
  .hs-stage-wrap{ --hs-stage: max(6rem, min(100cqw, 100cqh, var(--hs-stack-max))); }
  html:not(.js) .hs-stage-cell{ container-type:normal; flex:none; max-height:none; }
  html:not(.js) .hs-stage-wrap{ --hs-stage: min(100%, 27.5rem); margin-bottom:2.5rem; }
  html.js .hs-panel{ align-self:start; }

  .hs-eyebrow{ font-size:0.75rem; letter-spacing:.08em; }
  .hs-title{ margin-top:0.75rem; font-size: clamp(1.875rem, 8.4vw, 2.5rem); max-width:none; }
  .hs-sub{ margin-top:0.75rem; font-size:1rem; max-width:40ch; }
  .hs-ctas{ margin-top:1.25rem; }
  .hs-cue{ display:none; }
  .hs-step h2{ margin-top:0.5rem; font-size: clamp(2rem, 8.4vw, 2.75rem); }
  .hs-step-sub{ margin-top:0.5rem; font-size:1.0625rem; }
  .hs-tags{ margin-top:0.875rem; gap:0.375rem; }
  .hs-tags li{ font-size:0.875rem; padding:0.375rem 0.75rem; }
  .hs-rail-wrap{ bottom:0.875rem; }

  /* The carousel: the statement first, the rings below it */
  .hx-grid{ padding-bottom: clamp(0.75rem, 3svh, 2.5rem); }
  /* (the cell only grows as tall as the rings need, so the statement and
     the rings centre together on tall screens) */
  .hx .hs-stage-cell{ max-height: min(32.5rem, 100vw - 2 * var(--logo-inset)); }
  .hx .hx-stage-wrap{ --hs-stage: max(7.5rem, min(100cqw, 100cqh, 32.5rem)); }
  .hx-statement{ font-size: clamp(1.625rem, 9.6cqi, 4.375rem); }

  /* About: the heading, the photo, the copy, then the stats */
  .home-page .about-section{ padding-top:3rem; padding-bottom:3.5rem; }
  .home-page .about-grid{ flex-direction:column; gap:1.75rem; }
  .home-page .about-left, .home-page .about-copy{ display:contents; }
  .home-page .about-section .section-heading{ order:1; margin:0; }
  .home-page .about-media{ order:2; aspect-ratio: 4/5; }
  .home-page .about-media img{ object-position: center top; }
  .home-page .about-body{ order:3; max-width: 62ch; }
  .home-page .about-body .btn{ margin-top:0.375rem; }
  .home-page .hs-stats{ order:4; }

  /* Latest Insights: the row runs to the screen's edges (the next card
     peeks in from the edge, not from a box inside the margin) */
  .home-page .news-heading-row{ max-width:none; margin-bottom:1.25rem; }
  .home-page .news-grid{ max-width:none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.375rem; scroll-padding: 0 var(--gutter); gap:1rem; }
  .home-page .news-card{ flex-basis: min(80vw, 21.25rem); }
}

/* Stacked, tablet-sized: bigger type, a bigger stage, stats in a row */
@media (min-width: 560px) and (max-width: 860px), (min-width: 560px) and (max-width: 1100px) and (max-aspect-ratio: 1/1){
  .home-page{ --hs-stack-max: 40rem; --hs-rail-h: 5.25rem; }
  .hs-grid{ gap: clamp(1.25rem, 3.4svh, 3rem); }
  .hs-eyebrow{ font-size:0.8125rem; letter-spacing:.12em; }
  .hs-title{ margin-top:1.125rem; font-size: clamp(2.75rem, 6.8vw, 4.25rem); max-width:17ch; }
  .hs-sub{ margin-top:1.125rem; font-size:1.1875rem; max-width:42ch; }
  .hs-ctas{ margin-top:1.75rem; }
  .hs-step h2{ margin-top:0.75rem; font-size: clamp(2.75rem, 6.6vw, 4rem); }
  .hs-step-sub{ margin-top:0.625rem; font-size:1.25rem; }
  .hs-tags{ margin-top:1.375rem; gap:0.5rem; max-width:60ch; }
  .hs-rail-wrap{ bottom:1.75rem; }
  .hx .hs-stage-cell{ max-height: min(37.5rem, 88vw); }
  .hx .hx-stage-wrap{ --hs-stage: max(7.5rem, min(88cqw, 100cqh, 37.5rem)); }

  .home-page .about-section{ padding-top:4rem; padding-bottom:4.5rem; }
  .home-page .about-grid{ gap:2.25rem; }
  .home-page .about-media{ aspect-ratio: 5/4; }
  .home-page .about-media img{ object-position: center 12%; }
  /* The three stats side by side: number, squares, then the label */
  .home-page .hs-stats{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.25rem, 4vw, 3rem); border-bottom: 1px solid rgba(17,18,26,.1); }
  .home-page .hs-stats li{ --u: clamp(0.625rem, 1.6vw, 0.875rem); grid-template-columns: minmax(0,1fr); row-gap:0.875rem; align-content:start; padding: 1.5rem 0 1.625rem; border-bottom:0; }
  .home-page .hs-stats .stat-label{ max-width:20ch; }

  .home-page .news-card{ flex-basis: calc((100vw - 2 * var(--gutter) - 2rem) / 2.25); }
}

/* Stacked with little height: the lede gives its room to the tiles */
@media (max-width: 860px) and (max-height: 650px){
  .hs-sub{ display:none; }
  .hs-title{ margin-top:0.625rem; }
  .hs-ctas{ margin-top:1rem; }
  .hs-tags{ margin-top:0.75rem; gap:0.3125rem; }
  .hs-tags li{ font-size:0.8438rem; padding:0.3125rem 0.6875rem; }
}
/* A small stage: Watch is just its play icon (its name stays) */
@container (max-width: 300px) or (max-height: 320px){
  #hsWatch{ width:2.25rem; padding:0; justify-content:center; }
}

@media (max-width: 620px){
  .hs-rail-name{ display:none; }
  .hs-tags li:nth-child(n+5):not(.hs-tag-more){ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0; }
  .hs-tags .hs-tag-more{ display:inline-block; }
  .hs-tags .hs-tag-more.is-none{ display:none; }
  /* The CTAs stay on one row */
  .hs-ctas{ gap:0.625rem; flex-wrap:nowrap; }
  .hs-btn{ padding-left:1.25rem; padding-right:1.25rem; }
}
/* Short or very narrow phones: three services, then "+N more" (tucked-away
   tags stay in the list for screen readers; js/home-scene.js counts them) */
@media (max-width: 620px) and (max-height: 700px), (max-width: 359px){
  .hs-tags li:nth-child(n+4):not(.hs-tag-more){ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0; }
}
@media (max-width: 559px){
  /* Stats: the figure (number + squares) beside its label */
  .home-page .about-section .section-heading{ font-size: clamp(1.75rem, 8.7vw, 2.5rem); }
  .home-page .hs-stats li{ --u: 0.625rem; column-gap:1rem; padding:1.125rem 0; }
}
@media (max-width: 440px){
  .hs-eyebrow-part{ display:block; }
  .hs-eyebrow-sep{ display:none; }
}
/* Narrow phones: the rail and its link keep to one row */
@media (max-width: 374px){
  .hs-rail-wrap{ gap:0.875rem; }
  .hs-rail{ gap:0.625rem; }
  .hs-track{ width:2.125rem; }
}
@media (max-width: 359px){
  .hs-ctas{ gap:0.5rem; }
  .hs-btn{ flex:1 1 auto; justify-content:center; gap:0.5625rem; padding-left:0.875rem; padding-right:0.875rem; font-size:0.875rem; }
  .home-page .hs-stats li{ --u: 0.5625rem; column-gap:0.875rem; }
  .home-page .hs-stats .stat-label{ font-size:0.9063rem; }
}

/* ---------- Reduced motion: everything is already in place ---------- */
@media (prefers-reduced-motion: reduce){
  html.js .hs-title .hs-wi{ animation:none; }
  html.js .hs-eyebrow::before{ animation:none; }
  .hs-btn-tile{ transform:none !important; transition:none !important; }
  .hs-theatre, .hs-viewer-close{ transition-property: opacity, background-color !important; }
  .hs-theatre:hover, .hs-theatre:focus-visible, .hs-viewer-close:hover{ transform:none; }
  html.js .hs-video-actions{ animation:none; }
  html.js .hs-panel{ transition: opacity .25s; }
  .hs-layer{ transition: opacity .2s; }
  .hs-ring.go, .hs-full.is-in{ animation:none; }
  .hs-viewer-frame{ transform:none !important; transition: opacity .15s ease; }
  .hs-viewer-backdrop{ transition: opacity .15s ease; }
  html.js .hx{ height:auto; }
}