.k_F2_gnwAbXgmMlkaji3 {
  position: absolute;
  inset: var(--hero-graphic-top, 0) 0 0; /* a page can start the graphic lower */
  overflow: hidden;
  pointer-events: none;
}

/*
 * The photo, under the SVG on its own layers: clipped to the photo rays
 * (HeroGraphic sets the clip-path), drifting with the scroll (a GPU
 * transform, so it's never redrawn).
 */
.wW4aMm4WIjmvi1vSJ14l {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0);
}

.vk3UvjiT5B_bnqSKyDiD {
  position: absolute;
  will-change: transform;
}

.qo9MuHVguxdX9PYjwDqX {
  display: block;
  width: 100%;
  height: 100%;
}

.R8iHd2ruapGYc65_qmrB,
._aBaCF4PHiyV0E7T0HuC {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Behind the rays before they sweep in: the off-white, like the headline's band. */
.WZcYKzRTxLTrGITAHyXA {
  fill: transparent; /* the hero's own background (white to off-white) shows through */
}

.uQA6R1i5mJGwGzc6jhSR {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.uQA6R1i5mJGwGzc6jhSR * {
  vector-effect: non-scaling-stroke;
}

.hmdzMaMgqbyX6QT0prbp {
  fill: none;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

/* Load: counter-clockwise sweeps. */
.Wt70ZKFUkkFh11xyLrI5 {
  transition: transform var(--sweep-ms, 1500ms) cubic-bezier(0.45, 0, 0.2, 1);
}

/* Load: each ray settles from a slight turn as it is revealed. */
.pYPXyTHick9zuNhER27l {
  transition: transform calc(var(--sweep-ms, 1500ms) + 300ms) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rays-delay, 450ms);
}

/* Load: guide lines and rings are hidden, then fade in with the slice sweep. */
.MEAgfdmHsH4wElYf4LMA {
  opacity: 0;
  transition: opacity var(--sweep-ms, 1500ms) ease-in-out;
  transition-delay: var(--slices-delay, 150ms);
}

.k_F2_gnwAbXgmMlkaji3[data-loaded='true'] .MEAgfdmHsH4wElYf4LMA {
  opacity: 1;
}

/* Scroll motion is driven by --scroll; no transition so it tracks exactly. */
.iFLXX66VgVkPFdl5IgiL {
  will-change: transform;
}

/* ?labels=1 */
._aBaCF4PHiyV0E7T0HuC {
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

.RLKfBmTp8GgrH5uqHzO4,
.T2oD96n_tI1gTiTaSptq,
.k5cA37UhkeIw0Lr0tYv7,
.HpxBSaL5tyZdPWoFVvas {
  paint-order: stroke;
  stroke: #ffff7a;
  fill: #171717;
}

.RLKfBmTp8GgrH5uqHzO4 {
  font-size: 12px;
  stroke-width: 3px;
}

.T2oD96n_tI1gTiTaSptq {
  font-size: 20px;
  font-weight: 700;
  stroke-width: 4px;
  text-anchor: middle;
}

.k5cA37UhkeIw0Lr0tYv7 {
  font-size: 13px;
  font-weight: 700;
  stroke-width: 4px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.HpxBSaL5tyZdPWoFVvas {
  font-size: 10px;
  stroke-width: 3px;
}

/* Reduced motion, and mobile (under 768px), where the hero holds still: no load sweep. */
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .Wt70ZKFUkkFh11xyLrI5,
  .pYPXyTHick9zuNhER27l,
  .MEAgfdmHsH4wElYf4LMA {
    transition: none;
  }
}

/* Ported from the prototype's global .visually-hidden (index.css) — not available inside this component's Shadow DOM. */
.x7pI6GtrTkdiEN8LsKtt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Each word starts lower and transparent, then settles in, staggered by its index. */
.oAqVVt9oPEEOn9On4bWU {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition:
    opacity 700ms ease,
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--delay, 0ms) + var(--i) * 28ms);
}

.SwIC5ZnOrH1XanoedF06[data-shown='true'] .oAqVVt9oPEEOn9On4bWU {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .oAqVVt9oPEEOn9On4bWU {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * Over the bottom middle of the hero, above the photos and the case study:
 * at the bottom of the window when the hero runs on below it (the hero
 * starts at the top of the page), otherwise at the hero's own bottom.
 */
.eRVVR1YLYxHi1W7yB7WX {
  --gap: max(16px, 1.6vw);
  --loop: 3.6s;
  position: absolute;
  top: calc(min(100%, 100svh) - 128px - var(--gap));
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  appearance: none;
  cursor: pointer;
}

/* Only clickable while showing. */
.eRVVR1YLYxHi1W7yB7WX:not([data-visible='true']) {
  pointer-events: none;
}

.eRVVR1YLYxHi1W7yB7WX:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/*
 * Show and hide (data-visible): the circles expand out from the middle to
 * show (the white circle first, then the rings round it) and contract back
 * into it to hide (the rings first).
 */
.Fu4tQoEHuLG5JCUSx4Wh,
.YjoKqYzzdDFaM5ZXF7g8 {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 450ms cubic-bezier(0.55, 0, 0.75, 0.25),
    opacity 300ms ease;
}

.eRVVR1YLYxHi1W7yB7WX:not([data-visible='true']) .Fu4tQoEHuLG5JCUSx4Wh {
  opacity: 0;
  transform: scale(0.3);
}

.eRVVR1YLYxHi1W7yB7WX:not([data-visible='true']) .YjoKqYzzdDFaM5ZXF7g8 {
  opacity: 0;
  transform: scale(0);
  transition-delay: 120ms;
}

.eRVVR1YLYxHi1W7yB7WX[data-visible='true'] .Fu4tQoEHuLG5JCUSx4Wh,
.eRVVR1YLYxHi1W7yB7WX[data-visible='true'] .YjoKqYzzdDFaM5ZXF7g8 {
  transition:
    transform 800ms cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 400ms ease;
}

.eRVVR1YLYxHi1W7yB7WX[data-visible='true'] .Fu4tQoEHuLG5JCUSx4Wh {
  transition-delay: 160ms;
}

.gDhM1hJqZl7yh0ZIRblq {
  display: block;
  overflow: visible;
}

/* Figma: a ring of dots round the circle (see-through white, a little heavier than Figma's)… */
.ICd7hYumFWAoyUasks8B {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-opacity: 0.6;
  vector-effect: non-scaling-stroke; /* keeps its line and dots as it grows */
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.8);
  transition:
    stroke-opacity 250ms ease,
    transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
  stroke-dasharray: 1 3;
  stroke-linecap: round;
}

/* …the white circle (slightly see-through)… */
.aSFltlIIEvYLpZLtGGLA {
  fill: #fff;
  fill-opacity: 0.8;
  transition: fill-opacity 250ms ease;
}

/* Hovered (or focused): the dotted ring grows out to its full size, the circle grows a little… */
.VkVVVmaxLFov7vznHkMY {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.eRVVR1YLYxHi1W7yB7WX:is(:hover, :focus-visible) .VkVVVmaxLFov7vznHkMY {
  transform: scale(1.08);
}

.eRVVR1YLYxHi1W7yB7WX:is(:hover, :focus-visible) .ICd7hYumFWAoyUasks8B {
  transform: none;
}

/* …and the circle and the dotted ring turn solid white. */
.eRVVR1YLYxHi1W7yB7WX:is(:hover, :focus-visible) .ICd7hYumFWAoyUasks8B {
  stroke-opacity: 1;
}

.eRVVR1YLYxHi1W7yB7WX:is(:hover, :focus-visible) .aSFltlIIEvYLpZLtGGLA {
  fill-opacity: 1;
}

/* …and the blue double chevron in it. */
.lAer8qRwKNEnVDLFikBT {
  fill: var(--action-primary-default, #0073e6);
}

/* The pulse: rings grow out from the circle to a little past the dotted ring, fading as they go. */
.WhfaaNlOiHazWukQhtGm {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke; /* stays 1px as it grows */
  transform-box: fill-box;
  transform-origin: center;
  animation: WptTn5pPhgCPnYI8KUdQ var(--loop) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.cRcX8OwbsfQHcBu3PAJT {
  animation-delay: calc(var(--loop) * 0.35);
}

/* The circle swells a little with each pulse. */
.JDHv6hBx1uxmwZMUcw0L {
  transform-box: fill-box;
  transform-origin: center;
  animation: rUcWNxajsbrl7ifvASrA var(--loop) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* The chevrons lunge down and spring back. */
.lAer8qRwKNEnVDLFikBT {
  animation: ZDhYsybQAceiDwkPoQt7 var(--loop) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes WptTn5pPhgCPnYI8KUdQ {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.9);
  }
}

@keyframes rUcWNxajsbrl7ifvASrA {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: scale(1.08);
  }
  45% {
    transform: none;
  }
}

@keyframes ZDhYsybQAceiDwkPoQt7 {
  0%,
  50%,
  100% {
    transform: none;
  }
  22% {
    transform: translateY(5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eRVVR1YLYxHi1W7yB7WX:is(:hover, :focus-visible) .VkVVVmaxLFov7vznHkMY {
    transform: none;
  }

  .ICd7hYumFWAoyUasks8B {
    transition: stroke-opacity 250ms ease;
  }

  .Fu4tQoEHuLG5JCUSx4Wh,
  .YjoKqYzzdDFaM5ZXF7g8 {
    transition: opacity 300ms ease;
  }

  .eRVVR1YLYxHi1W7yB7WX:not([data-visible='true']) :is(.Fu4tQoEHuLG5JCUSx4Wh, .YjoKqYzzdDFaM5ZXF7g8) {
    transform: none;
  }

  .WhfaaNlOiHazWukQhtGm,
  .JDHv6hBx1uxmwZMUcw0L,
  .lAer8qRwKNEnVDLFikBT {
    animation: none;
  }

  .WhfaaNlOiHazWukQhtGm {
    opacity: 0;
  }
}

/*
 * Family, size, line height and letter spacing from the heading scale in
 * src/styles/tokens.css (fluid), weight 300 on every level, bold segment 500.
 * No colour: it inherits, so a heading over a photo or a dark section keeps working.
 *
 * A caller can override weight, size, line height or letter spacing with
 * --heading-weight, --heading-size, --heading-lh and --heading-ls, instead of
 * fighting this file's specificity.
 */
.AnCoFJ8dqLdtvNYgYJ8c {
  margin: 0;
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

.AnCoFJ8dqLdtvNYgYJ8c strong {
  font-weight: 500;
}

.kihAUuEH97K35xz6cF5Q {
  font-size: var(--heading-size, var(--type-h1-xl-size, 120px));
  line-height: var(--heading-lh, var(--type-h1-xl-lh, 138px));
  letter-spacing: var(--heading-ls, var(--type-h1-xl-ls, 0));
  font-weight: var(--heading-weight, 300);
}

.ZO8wGCha95QbCCjz9y98 {
  font-size: var(--heading-size, var(--type-h1-size, 100px));
  line-height: var(--heading-lh, var(--type-h1-lh, 102px));
  letter-spacing: var(--heading-ls, var(--type-h1-ls, 0));
  font-weight: var(--heading-weight, 300);
}

.rvI9SxHMiaGLzAJMzbig {
  font-size: var(--heading-size, var(--type-h2-size, 78px));
  line-height: var(--heading-lh, var(--type-h2-lh, 86px));
  letter-spacing: var(--heading-ls, var(--type-h2-ls, 0));
  font-weight: var(--heading-weight, 300);
}

.r2Jg3dBGd0P9QjLI9Yfm {
  font-size: var(--heading-size, var(--type-h3-size, 54px));
  line-height: var(--heading-lh, var(--type-h3-lh, 59px));
  letter-spacing: var(--heading-ls, var(--type-h3-ls, 0));
  font-weight: var(--heading-weight, 300);
}

.r17XUQYIaeIRyvMWxI9O {
  font-size: var(--heading-size, var(--type-h4-size, 42px));
  line-height: var(--heading-lh, var(--type-h4-lh, 50px));
  letter-spacing: var(--heading-ls, var(--type-h4-ls, 0));
  font-weight: var(--heading-weight, 300);
}

.qSZBs04FFwHO75mtLW1x {
  font-size: var(--heading-size, var(--type-h5-size, 29px));
  line-height: var(--heading-lh, var(--type-h5-lh, 38px));
  letter-spacing: var(--heading-ls, var(--type-h5-ls, 0));
  font-weight: var(--heading-weight, 300);
}

/*
 * A code component's Shadow DOM doesn't inherit the prototype's global
 * box-sizing reset — see the same note in ../GlassHeader/GlassHeader.module.css.
 */
.eGYx8lGAENeE07uoGHcq,
.eGYx8lGAENeE07uoGHcq *,
.eGYx8lGAENeE07uoGHcq *::before,
.eGYx8lGAENeE07uoGHcq *::after {
  box-sizing: border-box;
}

/*
 * Hero (Figma 2891:8745, 1728 × 1231 at full size): white space with the
 * headline, then the graphic, whose top-right corner (the radial's centre)
 * sits 321px down (Figma's 261px plus 60px more space above the headline),
 * plus --hero-extra above 768px.
 * The graphic covers the hero from that corner, so the hero keeps the design's shape (with a floor on short, narrow screens).
 * At rest the photo rays are solid colour; scrolling wipes the colour away
 * and brings in the featured case study (--reveal, set in Hero.tsx).
 */
.eGYx8lGAENeE07uoGHcq {
  --reveal: 0;
  position: relative;
  /* Above 768px, the white space is taller by this much (heroTop() in heroComposition.ts adds the same). */
  --hero-extra: 0px;
  height: calc(max(680px, 74.71vw) + var(--hero-extra)); /* 1291 / 1728, plus the extra */
  overflow: hidden;
  /* The white space: pure white on the left fading to the page's off-white on the right. */
  background: linear-gradient(90deg, #fff, var(--background-page, #f5f5f5));
  color: var(--text-primary, #171717);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/*
 * More white space above 768px: 120px at 768, growing with the window to
 * about 141px at 900, then at half that rate to 205px at 1728, then at half
 * that rate again to 216px at 2000. Ported from the prototype's Home.module.css.
 */
@media (min-width: 768px) {
  .eGYx8lGAENeE07uoGHcq {
    --hero-extra: clamp(120px, min(15.625vw, 70.31px + 7.8125vw, 137.81px + 3.90625vw), 215.94px);
  }
}

/*
 * From 2000px the white space stops growing: 587px tall in all, the graphic's
 * own 321 artboard px (which keep scaling with the window) less this.
 */
@media (min-width: 2001px) {
  .eGYx8lGAENeE07uoGHcq {
    --hero-extra: calc(587.47px - 18.5764vw);
  }
}

/* Headline: positioning only; type is shared/Heading's H1-XL, 120px at the largest viewport (bold segments Medium). 181px down, 990px wide. */
.oR2vB7Ot3QWZrj2F5O1M {
  position: absolute;
  z-index: 1;
  top: clamp(150px, 13.95vw, 279px); /* 241px at 1728 (Figma 181px, plus 60px); no further down after 2000 */
  left: var(--page-gutter, 20px); /* pulled from prototype */
  max-width: 12.6em; /* ~990px at 80px (a little extra for the word-by-word spans): wraps as in the design */
  margin: 0;
  text-wrap: pretty;
}

/* Above mobile: the headline 40px further down the white space (as the prototype). */
@media (min-width: 768px) {
  .oR2vB7Ot3QWZrj2F5O1M {
    top: calc(clamp(150px, 13.95vw, 279px) + 40px);
  }
}

/* 768–1190px: the headline's box narrower (12.6em → 11em), so it wraps sooner on mid-size screens. */
@media (min-width: 768px) and (max-width: 1190px) {
  .oR2vB7Ot3QWZrj2F5O1M {
    max-width: 11em;
  }
}

.pRKsDZcBLxIqYuwiG7xN {
  display: block;
}

/*
 * Shading over the photo (Hero.tsx clips it to the uncovered photo): Figma
 * 2913:8873's gradient, clear at the upper right and darkening to near black
 * at the lower left, behind the case study. CSS only; the photo is untouched.
 */
.SNTPvpkg_uOqfkv_TPlH {
  position: absolute;
  inset: var(--hero-graphic-top, 0) 0 0;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 0);
}

/*
 * The gradient itself, over the artboard (below heroTop()), moving exactly as
 * the photo does (HeroGraphic): it drifts up 70 artboard px over --scroll and
 * is 8.3% larger, about the radial's centre (its top-right corner).
 * --hero-unit is one artboard px on screen (set in Hero.tsx).
 */
.Fd39NzbYhnVKZQuvbQv9 {
  position: absolute;
  inset: calc(321 * var(--hero-unit, 1px) + var(--hero-extra)) 0 0;
  will-change: transform; /* its own layer: the drift never redraws the gradient */
  transform-origin: 100% 0;
  transform: translateY(calc(var(--scroll, 0) * -70 * var(--hero-unit, 1px))) scale(1.083);
  background: linear-gradient(243.54deg, rgb(15 15 15 / 0) 9.71%, rgb(15 15 15) 86.64%);
}

/*
 * Featured case study (Figma 2913:8873, at 1728 wide), low on the left over
 * the shaded photo: eyebrow, the title, then the copy with the button beside
 * it. Its layer covers the hero and is clipped to the wipe (Hero.tsx), so it
 * is uncovered with the photo; it can't be reached until the wipe has started.
 * Sizes are in cqw (1% of the hero's width), so it all scales together.
 */
.VF4vGROy2oHjJgFoYxvE {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 0);
  /* The case study's type and spacing scale with the hero's width (cqw: 1% of it). */
  container-type: inline-size;
}

.Wk4lnTaZSP5xG6Ad8rkK {
  /* The title's two weights: Medium for the name, ExtraLight for the rest. */
  --case-weight-strong: 500;
  --case-weight-light: 200;
  position: absolute;
  right: var(--page-gutter, 64px);
  bottom: max(32px, 3.07cqw); /* 53px at 1728 */
  left: var(--page-gutter, 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--text-inverse, #ffffff);
  pointer-events: auto;
}

/* The skip link's target: focused, not a control, so no ring of its own (its link has one). */
.Wk4lnTaZSP5xG6Ad8rkK:focus {
  outline: none;
}

/* Not shown before the wipe uncovers it, but still there to Tab to (focus scrolls the hero open, Hero.tsx). */
.eGYx8lGAENeE07uoGHcq:not([data-revealed='true']) .Wk4lnTaZSP5xG6Ad8rkK {
  opacity: 0;
  pointer-events: none;
}

/* Eyebrow tag (Raleway SemiBold, uppercase): outlined in white, white text, see-through. */
.axaerGksVjZlZjGRlE5F {
  padding: 5px 10px; /* 1px less, for the border */
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-size: clamp(11px, calc(0.98vw - 1px), 16px); /* 16px at most (reached at ~1728) */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 100px / 100% at 1728 (three lines), the name Medium and the rest ExtraLight. */
.lI1az4uyBND_WrTuSUBW {
  max-width: 6.6em;
  margin: max(16px, 1.4cqw) 0 0;
  font-size: max(40px, 5.787cqw);
  font-weight: var(--case-weight-light);
  line-height: 1;
}

/* Title size Smaller: about two thirds of Large (69px at 1728, 32px at least), wider so a longer title wraps less. */
.QPKFfBY98GFn7GLlBEaW {
  max-width: 9em;
  font-size: max(32px, 4cqw);
  line-height: 1.04;
}

.lI1az4uyBND_WrTuSUBW strong {
  font-weight: var(--case-weight-strong);
}

/* The copy and the button side by side, 63px under the title at 1728 (stacked when narrow). */
.dcUUFWCU9P8MJnUJ8vfI {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: max(20px, 1.97cqw) max(24px, 1.97cqw);
  margin-top: max(28px, 3.65cqw);
}

/* 22 / 32px Regular at 1728, 621px wide: sized from the hero's width. */
.aHm1PlvJXEll3msX_8It {
  max-width: max(300px, 35.94cqw);
  margin: 0;
  font-size: max(16px, 1.273cqw);
  font-weight: 400;
  line-height: 1.4545;
  text-wrap: pretty;
}

/* Figma CTA-primary 2913:8880: ExtraBold, 16px tall padding by 48px, 2.56px tracking. */
/* The Default size (Figma CTA-primary); the Large size keeps the shared Button's own. */
.xR0wm0rC_HVEIcMfVO7A:not([data-size='large']) {
  padding: 16px 48px;
  font-weight: 800;
  letter-spacing: 2.56px;
}

.xR0wm0rC_HVEIcMfVO7A:focus-visible {
  outline-color: var(--text-inverse, #ffffff);
}

/*
 * Intro, on top of the wipe: as the wipe starts (data-revealed), the
 * eyebrow, the copy and the button rise and fade in, one after another
 * (--d); the title comes in word by word (WordReveal).
 */
.Wk4lnTaZSP5xG6Ad8rkK [data-intro],
.wwyYZmJXcklQ1Q9qWovB[data-intro] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms ease,
    transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.eGYx8lGAENeE07uoGHcq[data-revealed='true'] .Wk4lnTaZSP5xG6Ad8rkK [data-intro],
.eGYx8lGAENeE07uoGHcq[data-revealed='true'] .wwyYZmJXcklQ1Q9qWovB[data-intro] {
  opacity: 1;
  transform: none;
  transition-delay: var(--d, 0ms);
}

.V9jLzpWOZ9nm30mXmm6e {
  display: inline-flex;
}

/*
 * The optional logo, sized as the cards size theirs: its measure in px at a 1728px hero (--logo-size),
 * scaling with the hero, never under --logo-min. Horizontal (a wordmark) by its width, Vertical
 * (a tall badge) by its height. With the text it sits above the eyebrow. In vw, not the feature's cqw,
 * since the corner logo sits outside the feature's size container (the hero is the window's width).
 */
.VZNrykXSjv4XAyr8aU7b {
  display: block;
  margin-bottom: max(20px, 1.85cqw);
  object-fit: contain;
}

.VZNrykXSjv4XAyr8aU7b[data-shape='horizontal'] {
  width: max(calc(var(--logo-min) * 1px), calc(var(--logo-size) / 17.28 * 1vw));
  height: auto;
}

.VZNrykXSjv4XAyr8aU7b[data-shape='vertical'] {
  width: auto;
  height: max(calc(var(--logo-min) * 1px), calc(var(--logo-size) / 17.28 * 1vw));
}

/*
 * Phones: scaling with the window from 1728 shrinks the logo to its minimum (250px at 1728 is about 56px at 390),
 * so here it is a fixed share of its size instead (250 → 140px), still never under the minimum.
 */
@media (max-width: 767px) {
  .VZNrykXSjv4XAyr8aU7b[data-shape='horizontal'] {
    width: max(calc(var(--logo-min) * 1px), calc(var(--logo-size) * 0.56px));
  }

  .VZNrykXSjv4XAyr8aU7b[data-shape='vertical'] {
    height: max(calc(var(--logo-min) * 1px), calc(var(--logo-size) * 0.56px));
  }
}

/* Bottom right: in the hero's corner, its foot level with the feature's (the button row's), over the graphic; comes in with the button. (The hero is not a size container, so vw stands in for the feature's cqw: the hero is the window's width.) */
.wwyYZmJXcklQ1Q9qWovB {
  position: absolute;
  z-index: 2;
  right: var(--page-gutter, 64px);
  bottom: max(32px, 3.07vw);
  margin: 0;
  pointer-events: auto;
}

.eGYx8lGAENeE07uoGHcq:not([data-revealed='true']) .wwyYZmJXcklQ1Q9qWovB {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .Wk4lnTaZSP5xG6Ad8rkK [data-intro],
  .wwyYZmJXcklQ1Q9qWovB[data-intro] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * Mobile (under 768px): the headline wraps to more lines than the white space
 * holds, so the graphic starts lower, under it, and the case study gets the
 * full width. The hero holds still here (Hero.tsx), and the headline is
 * there from the start rather than coming in word by word.
 */
@media (max-width: 767px) {
  /* The graphic's box always 630px tall, starting lower as the white space grows (--hero-graphic-top, set in Hero.tsx). */
  .eGYx8lGAENeE07uoGHcq {
    --hero-graphic-top: 170px;
    height: calc(var(--hero-graphic-top) + 630px);
  }

  .Wk4lnTaZSP5xG6Ad8rkK {
    right: var(--page-gutter, 64px);
  }

  /* The headline inside the gutters on both sides, over the mobile graphic. */
  .oR2vB7Ot3QWZrj2F5O1M {
    right: var(--page-gutter, 20px);
    z-index: 3;
  }

  /* The title the full width (the copy and button are under the hero: .featureMore). */
  .lI1az4uyBND_WrTuSUBW {
    max-width: none;
  }

  /* The headline's and case study title's words (WordReveal) and the case study's other parts, shown as they are. */
  .pRKsDZcBLxIqYuwiG7xN [aria-hidden] > span > span,
  .lI1az4uyBND_WrTuSUBW [aria-hidden] > span > span,
  .Wk4lnTaZSP5xG6Ad8rkK [data-intro] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*
 * Mobile only (Hero.tsx renders it there): the white space above the photos (their top edge
 * 630 × 321 / 1291 px below the graphic's top), on the hero's white-to-off-white, over the hero
 * graphic's upper part and behind the headline; the static graphic in it the full width, its foot
 * on the photos, cropped from the top.
 */
.RKWIdheYk2cQl92Vce1D {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* (2px over the photos' top edge, so no sliver of the rays under it shows along it.) */
  height: calc(var(--hero-graphic-top) + 630px * 321 / 1291 + 2px);
  /* Over the photos' shading (z-index 1) where it overlaps their edge; the headline over it. */
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(90deg, #fff, var(--background-page, #f5f5f5));
  pointer-events: none;
}

.RKWIdheYk2cQl92Vce1D img {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Mobile only (Hero.tsx renders it there): the photo area (from the photos' top edge, under the
 * mobile graphic, to the hero's foot) as one plain photo, cropped evenly to fill it: the Mobile image,
 * else the main one. Over the hero graphic (whose rays would show a wide photo only as a sliver here),
 * under the shade and the feature.
 */
.rz6hcYh_oCPjAAucWz_E {
  position: absolute;
  top: calc(var(--hero-graphic-top) + 630px * 321 / 1291);
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: calc(100% - var(--hero-graphic-top) - 630px * 321 / 1291);
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}

/*
 * Mobile only: soft black rising from the photo area's foot under the eyebrow and title (they sit in its
 * lower half), so white text keeps 4.5:1 / 3:1 over a bright photo (measured 2026-10-29: the eyebrow and
 * title fell to about 3.4:1 and 2.9:1 over the default photo without it).
 */
.Ys2yOZKuyqfeOU6VAQ0z {
  position: absolute;
  top: calc(var(--hero-graphic-top) + 630px * 321 / 1291);
  left: 0;
  z-index: 0;
  width: 100%;
  height: calc(100% - var(--hero-graphic-top) - 630px * 321 / 1291);
  background: linear-gradient(0deg, rgb(15 15 15 / 0.9) 0%, rgb(15 15 15 / 0.72) 38%, rgb(15 15 15 / 0.25) 62%, rgb(15 15 15 / 0) 80%);
  pointer-events: none;
}

/* Mobile only (Hero.tsx renders it there): the feature's copy and button on soft black, under the hero's photo. */
.bNApbOvn9yMi19h3MeyA {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 24px var(--page-gutter, 20px) 48px;
  background: var(--text-primary, #171717);
  color: var(--text-inverse, #ffffff);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* (Outside the hero, so the size is set here rather than from the hero's width.) */
.bNApbOvn9yMi19h3MeyA .aHm1PlvJXEll3msX_8It {
  max-width: none;
  font-size: var(--type-large-size, 18px);
}