/* =====================================================================
   Braineering — homepage
   Rebuilt 1:1 from Figma "braineering-redesign", frame 249:519 (1512×6118).

   UNITS: 1rem = 10 design px. The root font size scales with the viewport,
   so every value below is the frame measurement divided by ten and the whole
   page reproduces the frame exactly at 1512px — and proportionally either
   side of it. Below 1024px a separate flow layout takes over.
   ===================================================================== */

html { font-size: 10px; }

:root {
  /*
    ONE KNOB FOR THE WHOLE PAGE.
    The frame is 1512px wide. At 1 the page reproduces it pixel for pixel; at .85
    everything — type, spacing, images, the lot — renders at 85% of that. Nothing
    else needs touching, and the proportions are identical either way.
  */
  --design-scale: .85;
}

@media (min-width: 1024px) {
  /* the frame, at --design-scale, centred; it fills narrower viewports instead */
  html { font-size: calc(min(100vw, 1512px * var(--design-scale)) / 151.2); }
}

:root {
  --blue: #007bff;
  --white: #fff;
  --black: #000;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: 200ms;
  --t-card: 320ms;   /* plate, mark and photo colour */
  --t-zoom: 520ms;   /* the photo's ease-in on hover */
  --t-slide: 620ms;  /* services slider */
  --ease-dot: cubic-bezier(.65, 0, .2, 1);
  --font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- reset ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--black);
  font-family: var(--font);
  font-variation-settings: 'YTLC' 500, 'wdth' 100;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
button, input { font: inherit; font-variation-settings: inherit; color: inherit; }
hr { border: 0; margin: 0; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; left: 1.6rem; top: -8rem; z-index: 300;
  padding: 1rem 1.8rem; background: var(--white); color: var(--black);
  border-radius: 1rem; font-size: 1.6rem; transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 1.6rem; }

/* =====================================================================
   Frame grid — the 1512px canvas, centred, with its edge colours carried
   out to the viewport either side of it.
   ===================================================================== */

.page {
  position: relative;
  width: 151.2rem;
  margin-inline: auto;
}

/* =====================================================================
   Background stack — frame layers 249:520 … 249:558, in paint order
   ===================================================================== */

.bg {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  width: 100vw;
  height: 611.8rem;
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--black);
  pointer-events: none;
}

/*
   The frame is 1512 wide, the viewport usually isn't. Layers keep their frame
   coordinates inside .bg__frame, which is centred and deliberately not clipped —
   the glows are far wider than the frame and spill into the margins on their own,
   so the background reads as full-bleed instead of a lit strip down the middle.
*/
.bg__frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: 151.2rem;
  height: 100%;
  margin-left: -75.6rem;
}

/* the flat colour bands run the full width */
.bg__fade,
.bg__assess,
.bg__white,
.bg__blue {
  left: 50%;
  transform: translateX(-50%);
  width: max(100vw, 153.7rem);
}

/* 249:520 — server render, clipped to the frame */
/*
   Anchored to the frame's left edge so the framing is unchanged, but running to
   the viewport's right edge rather than the frame's — otherwise the push-in gets
   clipped short of the screen on wide windows.
*/
.bg__rack {
  position: absolute;
  left: calc(50% - 75.6rem);
  right: 0;
  top: 10.4rem;
  height: 129.6rem;
  overflow: hidden;
}
/* the still is the frame's own render of this window */
.bg__rack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*
   The video is the source the frame's image fill was taken from, so it needs
   that fill's transform rather than the window's: 1920x1080 scaled to
   2484x1397 and offset to -276,-100. Solved by matching the first frame
   against the exported still.
*/
/*
   Anchored by its right edge rather than the frame's left: the rack sits 818
   design px in from the video's right edge, so pinning that offset keeps the
   rack flush with the screen at any width instead of leaving black beside it
   as the shot pushes in.
*/
.bg__rack video {
  position: absolute;
  right: -81.8rem;
  top: -10rem;
  width: 248.4rem;
  height: 139.7rem;
  max-width: none;
  object-fit: cover;
}

/* 249:521 — blurred #d9d9d9 plate on overlay; this is what lifts the rack */
.bg__lift {
  position: absolute;
  left: -14.6rem;
  top: 0;
  width: 173.2rem;
  height: 76rem;
  background: #d9d9d9;
  filter: blur(10rem);
  mix-blend-mode: overlay;
}

.bg__glow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg__glow img { flex: none; max-width: none; }

/* 249:522 / 523 / 524 — black blurred blobs */
.bg__glow--1 { left: -29rem; top: 15rem; width: 105.2438rem; height: 104.9118rem; }
.bg__glow--1 img { width: 138.812rem; height: 138.455rem; transform: rotate(3.88deg); }

.bg__glow--2 { left: 31.536rem; top: 26.275rem; width: 175.4029rem; height: 179.3819rem; }
.bg__glow--2 img { width: 174.985rem; height: 161.802rem; transform: rotate(-57.32deg); }

.bg__glow--3 { left: 48.5rem; top: 82.1rem; width: 113.6119rem; height: 113.904rem; }
.bg__glow--3 img { width: 138.812rem; height: 138.455rem; transform: rotate(-80.36deg); }

/* 249:536 — the wash that carries the page from blue into white */
.bg__fade {
  position: absolute;
  top: 118.6rem;
  height: 170.7rem;
  background: linear-gradient(to top, #fff 81.925%, rgba(255, 255, 255, 0) 97.267%);
}

/*
   249:560 — the brand glow. In the frame it is painted after the hero copy and
   the story photos but before everything else, so it lives in its own layer at
   z-index 2 rather than inside .bg.
*/
.bg-mid {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 100vw;
  height: 611.8rem;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.bg__glow--4 { left: -69.31rem; top: 29.1rem; width: 287.225rem; height: 214.701rem; }
.bg__glow--4 img { width: 287.225rem; height: 214.701rem; }

/* 249:571 */
.bg__assess {
  position: absolute;
  top: 289.3rem;
  height: 61.1rem;
  background: url('../img/assessment-bg.png') 0 0 / 100% 100% no-repeat;
}

/* 249:557 / 249:558 */
.bg__white { position: absolute; top: 350.4rem; height: 174.4rem; background: var(--white); }
.bg__blue  { position: absolute; top: 522.4rem; height: 32.4rem; background: var(--blue); }

/* =====================================================================
   Shared type + buttons
   ===================================================================== */

.section-title {
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--black);
}
.section-title--light { color: var(--white); }

.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1rem solid currentColor;
  border-radius: 1rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.btn--ghost { color: var(--white); background: transparent; border-color: var(--white); }
.btn--ghost:hover,
.btn--ghost:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--white); }

.btn--solid { color: var(--black); background: var(--white); border-color: var(--white); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--white); }

.btn--outline { color: var(--black); background: transparent; border-color: var(--black); }
.btn--outline:hover,
.btn--outline:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* =====================================================================
   Header — 249:525 … 249:535
   ===================================================================== */

.site-header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 10.4rem;
  border-bottom: 0.1rem solid rgba(255, 255, 255, .4);
  transition: background-color var(--t) var(--ease), backdrop-filter var(--t) var(--ease);
}
.site-header.is-stuck { background: rgba(0, 0, 0, .82); backdrop-filter: blur(1rem); }

.site-header__inner { position: relative; width: 151.2rem; height: 100%; margin-inline: auto; }

/*
   249:682 — the blurred ellipse the frame parks over ABOUT US. It is the hover
   indicator for the nav, so it lives in one element that slides to whichever
   item the pointer is on. Sits before the links in the DOM, so it paints under
   the type without needing a negative z-index that the stuck header would clip.
*/
.nav-glow {
  position: absolute;
  left: 0;
  top: -33.3rem;
  width: 60rem;
  height: 64.4rem;
  margin-left: -30rem;
  background: url('../svg/ellipse-glow.svg') 0 0 / 100% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease), left 380ms var(--ease);
}
.nav-glow.is-on { opacity: 1; }

.site-header__logo { position: absolute; left: 10rem; top: 3.4rem; width: 26.6rem; height: 4.2rem; }
.site-header__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.site-nav { position: static; }
.site-nav__list { position: static; }

.nav-link {
  position: absolute;
  top: 4rem;
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  transition: color var(--t) var(--ease), font-weight var(--t) var(--ease);
}
/* the frame draws the hovered item in brand blue at medium weight */
.nav-link:hover, .nav-link:focus-visible { color: var(--blue); font-weight: 500; }

.site-nav__list li:nth-child(1) .nav-link { left: 61rem; }
.site-nav__list li:nth-child(2) .nav-link { left: 74.4rem; }
.site-nav__list li:nth-child(3) .nav-link { left: 88.3rem; }
.site-nav__list li:nth-child(4) .nav-link { left: 98.4rem; }

.support-btn {
  left: 113rem;
  top: 2.7rem;
  width: 17.3rem;
  height: 4.7rem;
  font-size: 1.6rem;
  font-weight: 200;
}

.lang {
  position: absolute;
  left: 139.1rem;
  top: 4rem;
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  transition: color var(--t) var(--ease);
}
.lang:hover { color: var(--blue); }

.nav-toggle { display: none; }

/* =====================================================================
   Sections — each is a transparent, exactly sized band
   ===================================================================== */

/* main must not open a stacking context — .bg-mid slots between its children */
main { position: static; }

.hero       { position: relative; height: 106.7rem; }
.hero, .services, .stories, .assessment, .partners, .contact { isolation: auto; }
.services   { position: relative; z-index: 3; height: 76.3rem; }
.stories    { position: relative; z-index: 3; height: 106.3rem; }
.assessment { position: relative; z-index: 3; height: 61.1rem; }
.partners   { position: relative; z-index: 3; height: 172rem; }
.contact    { position: relative; z-index: 3; height: 32.4rem; }
.site-footer{ position: relative; z-index: 3; height: 57rem; color: var(--white); }

/* ---------- hero ------------------------------------------------------ */

.hero__title {
  position: absolute;
  z-index: 1;
  left: 10rem;
  top: 22rem;
  width: 83.8rem;
  font-size: 9.6rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
}
.hero__title em { font-style: normal; color: var(--blue); }

.hero__sub {
  position: absolute;
  z-index: 1;
  left: 10rem;
  top: 56.6rem;
  width: 77rem;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  color: var(--white);
}

.hero__btn { z-index: 3; top: 71.7rem; height: 7rem; }
.hero__btn--1 { left: 10rem; width: 29.5rem; }
.hero__btn--2 { left: 41.3rem; width: 39.6rem; }

.vendor-strip {
  position: absolute;
  z-index: 3;
  left: 9.9rem;
  top: 89.08rem;
  display: flex;
  align-items: center;
  gap: 8.9rem;
  height: 7.28rem;
}
.vendor-strip img { transition: opacity var(--t) var(--ease); }
.vendor-strip li:nth-child(1) img { width: 7.28rem;   height: 7.28rem; }
.vendor-strip li:nth-child(2) img { width: 13.27rem;  height: 7.004rem; }
.vendor-strip li:nth-child(3) img { width: 15.4086rem; height: 4.9716rem; }
.vendor-strip li:nth-child(4) img { width: 20.6rem;   height: 4.2rem; }
.vendor-strip li:nth-child(5) img { width: 14.3998rem; height: 5.1156rem; }
.vendor-strip li:nth-child(6) img { width: 15.8961rem; height: 2.9194rem; }
.vendor-strip li:hover img { opacity: .7; }

/* ---------- shared panel plumbing (assets/js/shapes.js) --------------- */

.panel { position: absolute; }
.panel__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--panel-bg, transparent);
  transition: background-color var(--t) var(--ease);
}
.panel__outline {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.panel__outline path {
  fill: none;
  stroke: var(--panel-stroke, transparent);
  stroke-width: 1;
  transition: stroke var(--t) var(--ease);
}
.panel:not(.is-shaped) .panel__outline { opacity: 0; }

/* ---------- services -------------------------------------------------- */

/* 249:675 — hairline under the hero */
.services::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.1rem;
  width: max(100vw, 151.2rem);
  height: 0.1rem;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .5);
}

.services .section-title { position: absolute; left: 9.9rem; top: 9.3rem; }

.service-card {
  cursor: pointer;
  touch-action: pan-y;      /* let the page scroll vertically, we take the sideways drag */
  user-select: none;
  left: 10rem;
  top: 19.9rem;
  width: 131.5rem;
  height: 46.5rem;
  --panel-stroke: #fefffe;
  z-index: 2;
}
.service-card__bg { background: var(--black); }

/* 249:584 — the photo is mirrored and hangs outside the card box */
.service-card__photo {
  position: absolute;
  left: 28.8rem;
  top: -10.6rem;
  width: 137.6rem;
  height: 76.8rem;
  max-width: none;
  object-fit: cover;
  transform: scaleX(-1);
  opacity: 0;
  transition: opacity var(--t-slide) var(--ease);
}
.service-card__photo.is-active { opacity: 1; }
/* 249:585 */
.service-card__veil {
  position: absolute;
  left: 0;
  top: 0;
  width: 112.2rem;
  height: 46.5rem;
  background: linear-gradient(80.343deg, #000 31.872%, rgba(0, 0, 0, 0) 103.92%);
}

.service-card__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* slides enter and leave from outside the card; without this their transform
     widens the document */
  overflow: hidden;
}
.service-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6rem);
  transition: opacity var(--t-slide) var(--ease),
              transform var(--t-slide) var(--ease),
              visibility var(--t-slide);
}
.service-slide.is-active { opacity: 1; visibility: visible; transform: none; }
/* the one being replaced leaves the other way */
.service-slide.is-leaving { opacity: 0; visibility: visible; transform: translateX(-6rem); }

.service-card__title,
.service-card__kicker,
.service-card__rule,
.service-card__body,
.service-card__btn { position: absolute; z-index: 2; }

.service-card__title  { left: 8.3rem; top: 4.7rem;  font-size: 4.8rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; color: var(--white); }
.service-card__kicker { left: 8.3rem; top: 10.8rem; width: 119.2rem; font-size: 2.4rem; line-height: 1.1; text-transform: uppercase; color: var(--white); }
.service-card__rule   { left: 8.3rem; top: 16.9rem; width: 85.3rem; height: 0.1rem; background: rgba(255, 255, 255, .42); }
.service-card__body   { left: 8.3rem; top: 20.4rem; width: 92.4rem; font-size: 3.6rem; line-height: 1.1; color: var(--white); }
.service-card__btn    { left: 8.3rem; top: 36.3rem; width: 29.5rem; height: 5.2857rem; font-size: 2rem; cursor: pointer; }

/*
   249:592 — the slide indicator. Four parallelograms sheared 34.17deg (the
   frame's 21.72px lean over 32px of height); the active one is filled and
   97 wide, the rest are outlined and 42.79. The row's total width does not
   change as the active one moves, so nothing shifts around it.
*/
.slider-dots {
  position: absolute;
  /* the shear makes each segment lean past its layout box, so the row's own
     left is nudged to put the ink where the frame has it */
  left: 112.2rem;
  top: 61.5rem;
  display: flex;
  align-items: stretch;
  gap: 0.85rem;
  height: 3.2rem;
}
.slider-dots__dot {
  width: 4.279rem;
  padding: 0;
  border: 0.1rem solid var(--white);
  border-radius: 0;
  background: transparent;
  transform: skewX(-34.17deg);
  cursor: pointer;
  transition: width var(--t-slide) var(--ease-dot),
              background-color var(--t-slide) var(--ease);
}
.slider-dots__dot.is-active { width: 9.7rem; background: var(--white); }
.slider-dots__dot:hover { background: rgba(255, 255, 255, .35); }
.slider-dots__dot.is-active:hover { background: var(--white); }
.slider-dots__dot:focus-visible { outline-offset: 4px; }

/* ---------- project stories ------------------------------------------- */

.stories .section-title { position: absolute; left: 10rem; top: 5rem; }
.stories__lead {
  position: absolute;
  left: 9.9rem;
  top: 12rem;
  width: 100.2rem;
  font-size: 2.4rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.story-card {
  top: 22.7rem;
  width: 42.4rem;
  height: 47.8rem;
  --panel-bg: transparent;
  --panel-stroke: #000;
  --veil: var(--white);
}
.story-card--1 { left: 10rem; }
.story-card:hover, .story-card:focus-visible {
  --veil-gradient: linear-gradient(to bottom,
    #007bff 46.085%,
    rgba(33, 140, 255, .872) 53%,
    rgba(66, 157, 255, .742) 60%,
    rgba(94, 172, 255, .631) 66%,
    rgba(127, 189, 255, .501) 73%,
    rgba(160, 206, 255, .371) 80%,
    rgba(189, 221, 255, .260) 86%,
    rgba(222, 238, 255, .130) 93%,
    rgba(255, 255, 255, 0) 100%);
}
.story-card--2 { left: 54.4rem; --photo-alpha: .85; }
.story-card--3 { left: 98.8rem; }

/* 249:541 / 548 / 555 — each photo sits at its own offset inside the mask */
/*
   Two stacked photos per card. The base is the frame's own render — Figma's
   desaturation is not a luma matrix, so CSS grayscale() cannot reproduce it and
   matching the frame exactly means keeping that export. The colour layer is the
   original image fill, reframed to the same crop, and fades in on hover.
*/
.story-card__photo {
  position: absolute;
  max-width: none;
  object-fit: cover;
  filter: grayscale(1);
  opacity: var(--photo-alpha, 1);
  transition: transform var(--t-zoom) var(--ease);
}
.story-card__photo--color {
  filter: none;
  opacity: 0;
  transition: opacity var(--t-card) var(--ease), transform var(--t-zoom) var(--ease);
}
.story-card:hover .story-card__photo--color,
.story-card:focus-visible .story-card__photo--color { opacity: var(--photo-alpha, 1); }
.story-card--1 .story-card__photo { left: -20.7rem; top: 11.6rem; width: 71.9rem; height: 40.1rem; }
.story-card--2 .story-card__photo { left: -9.2rem;  top: 8.8rem;  width: 79.9rem; height: 44.5rem; object-position: bottom; }
.story-card--3 .story-card__photo { left: -30.9rem; top: 11.8rem; width: 81.2rem; height: 60.9rem; }

/* 249:542 / 549 / 556 */
.story-card__veil {
  position: absolute;
  left: -0.1rem;
  top: -1.4rem;
  width: 42.5rem;
  height: 28.1rem;
  background: linear-gradient(to bottom, var(--white) 46.085%, rgba(255, 255, 255, 0) 100%);
}

/*
   The blue plate is a second layer rather than a swapped gradient: browsers
   don't interpolate between two gradients, so cross-fading opacity is what
   makes the recolour animate instead of snap.
   Stops walk blue -> white -> transparent because Figma interpolates gradient
   stops non-premultiplied and CSS doesn't.
*/
.story-card__veil--blue {
  opacity: 0;
  background: linear-gradient(to bottom,
    #007bff 46.085%,
    rgba(33, 140, 255, .872) 53%,
    rgba(66, 157, 255, .742) 60%,
    rgba(94, 172, 255, .631) 66%,
    rgba(127, 189, 255, .501) 73%,
    rgba(160, 206, 255, .371) 80%,
    rgba(189, 221, 255, .260) 86%,
    rgba(222, 238, 255, .130) 93%,
    rgba(255, 255, 255, 0) 100%);
  transition: opacity var(--t-card) var(--ease);
}
.story-card:hover .story-card__veil--blue,
.story-card:focus-visible .story-card__veil--blue { opacity: 1; }

.story-card__title {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 4rem;
  width: 100%;
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--black);
  transition: color var(--t-card) var(--ease);
}
.story-card__title--two-line { left: 1.5rem; top: 2.5rem; width: 38.4rem; }

/* the page-level glow reaches the photos but not the card chrome */
.story-card__glow {
  position: absolute;
  top: -176.6rem;
  width: 287.225rem;
  height: 214.701rem;
  max-width: none;
}
.story-card--1 .story-card__glow { left: -79.309rem; }
.story-card--2 .story-card__glow { left: -123.709rem; }
.story-card--3 .story-card__glow { left: -168.109rem; }


.story-card__mark {
  position: absolute;
  z-index: 3;
  color: var(--black);
  transition: color var(--t-card) var(--ease);
}
.story-card--1 .story-card__mark { left: 33rem;  top: 40.61rem; width: 7.24133rem; height: 7.22065rem; }
.story-card--2 .story-card__mark { left: 32.5rem; top: 40.61rem; width: 8rem;      height: 7.2rem; }
.story-card--3 .story-card__mark { left: 32rem;  top: 40.61rem; width: 8.94255rem; height: 6.55257rem; }

/* hover — the frame draws card 1 in this state */
.story-card:hover, .story-card:focus-visible { --veil: var(--blue); --panel-stroke: var(--blue); }
.story-card:hover .story-card__title, .story-card:focus-visible .story-card__title { color: var(--white); }
/* hover: colour fades in, the photo eases up a little, the mark turns blue */
.story-card:hover .story-card__photo,
.story-card:focus-visible .story-card__photo { transform: scale(1.06); }
.story-card:hover .story-card__mark,
.story-card:focus-visible .story-card__mark { color: var(--blue); }

.stories__note {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 78.6rem;
  width: 131.5rem;
  font-size: 2.4rem;
  line-height: 1.1;
  text-align: center;
}
.stories__btn { left: 56.4rem; top: 87.1rem; width: 38.4rem; height: 7rem; }

/* ---------- assessment ------------------------------------------------ */

.assessment__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 11.7rem;
  width: 112.5rem;
  font-size: 6.4rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
}
.assessment__body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 27.7rem;
  width: 129.6rem;
  font-size: 3.2rem;
  line-height: 1.1;
  text-align: center;
  color: var(--white);
}
.assessment__btn { left: 50rem; top: 43.2rem; width: 51.2rem; height: 8.5rem; }

/* ---------- partners -------------------------------------------------- */

.partners .section-title { position: absolute; left: 9.8rem; top: 13.4rem; }
.partners__lead {
  position: absolute;
  left: 9.8rem;
  top: 20.2rem;
  width: 100.2rem;
  font-size: 3.2rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.partner {
  left: 10.1rem;
  width: 131.5rem;
  height: 29.7rem;
  --panel-stroke: var(--blue);
  --tab-h: 6.1667rem;
}
.partner--1 { top: 29.9rem; }
.partner--2 { top: 68.2rem; }
.partner--3 { top: 104.3rem; }

.partner__bg {
  background-color: var(--white);
  /* the wash is rasterised straight from the frame — the SVG export of
     249:726 clips its own gradient mask and loses most of it */
  background-image: url('../img/partner-hover-glow.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.partner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  transition: opacity var(--t) var(--ease);
}
.partner:hover .partner__bg::after,
.partner:focus-within .partner__bg::after { opacity: 0; }

.partner__label {
  position: absolute;
  z-index: 2;
  left: 2.9rem;
  top: 0.7rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: var(--black);
}

.partner__logos { position: absolute; z-index: 2; inset: 0; }
.partner__logos li { position: absolute; }
.partner__logos img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(69%);          /* flat #b0b0b0, as the frame has it */
  transition: filter var(--t-card) var(--ease);
}
.partner:hover .partner__logos img,
.partner:focus-within .partner__logos img { filter: brightness(0) invert(0%); }

.partner--1 .partner__logos li:nth-child(1) { left: 48.29rem; top: 2.87rem; width: 15.2rem;   height: 2.39rem; }
.partner--1 .partner__logos li:nth-child(2) { left: 84.01rem; top: 2.87rem; width: 9.76rem;   height: 3.12rem; }
.partner--1 .partner__logos li:nth-child(3) { left: 114.31rem; top: 3.12rem; width: 12.8rem;  height: 2.63rem; }

.partner--2 .partner__logos li:nth-child(1) { left: 48.9rem;  top: 1.58rem; width: 21.89rem;  height: 4.84rem; }
.partner--2 .partner__logos li:nth-child(2) { left: 78rem;    top: 1.22rem; width: 5.4rem;    height: 5.5rem; }
.partner--2 .partner__logos li:nth-child(3) { left: 90.6rem;  top: 1.71rem; width: 8.6rem;    height: 4.52rem; }
.partner--2 .partner__logos li:nth-child(4) { left: 106.39rem; top: 2.07rem; width: 20.71rem; height: 3.86rem; }

.partner--3 .partner__logos li:nth-child(1) { left: 38.4rem;  top: 2.62rem; width: 19.28rem;  height: 3.54rem; }
.partner--3 .partner__logos li:nth-child(2) { left: 62.9rem;  top: 2.38rem; width: 14.04rem;  height: 4.09rem; }
.partner--3 .partner__logos li:nth-child(3) { left: 82.2rem;  top: 2.2rem;  width: 22.6rem;   height: 4.4rem; }
.partner--3 .partner__logos li:nth-child(4) { left: 109.99rem; top: 3.29rem; width: 17.11rem; height: 2.27rem; }

.partner__body {
  position: absolute;
  z-index: 2;
  left: 2.9rem;
  width: 124.9rem;
  font-size: 2rem;
  line-height: normal;
  color: var(--black);
}
.partner__body b { font-weight: 400; }
.partner--1 .partner__body { top: 11.1rem; }
.partner--2 .partner__body { top: 10.2rem; }
.partner--3 .partner__body { top: 11.1rem; }

/* 249:559 — in the hovered row the label sits on a solid blue plate */
.partner__more {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 42.6rem;
  height: 10.6rem;
  padding: 0 0 1.6rem 21rem;
  border-radius: 2.2rem;
  background: transparent;
  font-size: 2rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--blue);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.partner:hover .partner__more,
.partner:focus-within .partner__more { background: var(--blue); color: var(--white); }

.partners__note {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 146.5rem;
  width: 131.5rem;
  font-size: 2.4rem;
  line-height: 1.1;
  text-align: center;
}
.partners__btn { left: 55.4rem; top: 155rem; width: 40.5rem; height: 7rem; }

/* ---------- contact --------------------------------------------------- */

.contact .section-title { position: absolute; left: 9.8rem; top: 7.2rem; }
.contact__body {
  position: absolute;
  left: 9.8rem;
  top: 14rem;
  width: 72.9rem;
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--white);
}
.contact__btn { left: 102rem; top: 12.7rem; width: 39.6rem; height: 7rem; }
.contact .btn--solid:hover, .contact .btn--solid:focus-visible { background: var(--black); border-color: var(--black); color: var(--white); }

/* ---------- footer ---------------------------------------------------- */

.site-footer__logo { position: absolute; left: 10rem; top: 6.8rem; width: 26.6rem; height: 4.2rem; }
.site-footer__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }

.footer-nav .nav-link { top: 7.8rem; }
.footer-nav li:nth-child(1) .nav-link { left: 54rem; }
.footer-nav li:nth-child(2) .nav-link { left: 67.3rem; }
.footer-nav li:nth-child(3) .nav-link { left: 81.1rem; }
.footer-nav li:nth-child(4) .nav-link { left: 91.2rem; }

.back-to-top {
  position: absolute;
  left: 131.5rem;
  top: 7.8rem;
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--blue);
  transition: color var(--t) var(--ease);
}
.back-to-top:hover { color: var(--white); }

.site-footer__rule { position: absolute; left: 50%; width: max(100vw, 151.2rem); height: 0.1rem; transform: translateX(-50%); }
.site-footer__rule--1 { top: 16.1rem; background: rgba(255, 255, 255, .5); }
.site-footer__rule--2 { top: 47.6rem; background: rgba(255, 255, 255, .15); }

.newsletter__title { position: absolute; left: 9.9rem; top: 22.4rem; font-size: 2.4rem; font-weight: 300; line-height: 1.1; }
.social__title { position: absolute; right: 9.6rem; top: 22.4rem; font-size: 2.4rem; font-weight: 300; line-height: 1.1; }

.newsletter { position: absolute; left: 9.8rem; top: 27.8rem; width: 45.2rem; height: 5.3rem; }
.newsletter__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 40.5rem;
  height: 5.3rem;
  padding: 0 1.8rem;
  background: transparent;
  border: 0.1rem solid var(--white);
  border-radius: 1rem;
  color: var(--white);
  font-size: 2rem;
  font-weight: 600;
}
.newsletter__input::placeholder { color: rgba(255, 255, 255, .3); text-transform: lowercase; transition: color var(--t) var(--ease); }
.newsletter__input { transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.newsletter:hover .newsletter__input { border-color: var(--blue); color: var(--blue); }
.newsletter:hover .newsletter__input::placeholder { color: var(--blue); }
.newsletter__input:focus { outline: none; border-color: var(--blue); color: var(--blue); }
.newsletter.is-invalid .newsletter__input { border-color: #ff6b6b; }

.newsletter__submit {
  position: absolute;
  left: 25rem;
  top: 0;
  width: 20.2rem;
  height: 5.3rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 4.6rem;
  background: var(--white);
  border: 0.1rem solid var(--white);
  border-radius: 0 1rem 1rem 0;
  color: var(--black);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.newsletter:hover .newsletter__submit,
.newsletter__submit:focus-visible { background: var(--blue); border-color: var(--blue); color: var(--white); }

.newsletter__status { position: absolute; left: 9.9rem; top: 33.6rem; font-size: 1.5rem; color: #9ad2ff; }
.newsletter__status.is-error { color: #ff9d9d; }

.newsletter__consent {
  position: absolute;
  left: 9.9rem;
  top: 36.4rem;
  width: 50.6rem;
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.1;
}
.newsletter__consent a { text-decoration: underline; transition: color var(--t) var(--ease); }
.newsletter__consent a:hover { color: var(--blue); }

/* the items carry their own frame coordinates; the list must not become an
   invisible sheet over the whole footer or it eats clicks on the form */
.social__list { position: static; }
.social__list li { position: absolute; }
.social__list li:nth-child(1) { left: 125.1rem; top: 27.925rem; width: 2.4rem;   height: 1.9499rem; }
.social__list li:nth-child(2) { left: 129.9rem; top: 27.7rem;   width: 2.4rem;   height: 2.3997rem; }
.social__list li:nth-child(3) { left: 134.7rem; top: 27.7rem;   width: 2.4rem;   height: 2.3997rem; }
.social__list li:nth-child(4) { left: 139.5rem; top: 27.7rem;   width: 2.4003rem; height: 2.4rem; }
.social__list a { display: block; }
.social__list img { width: 100%; height: 100%; transition: transform var(--t) var(--ease), filter var(--t) var(--ease); }
.social__list a:hover img { transform: scale(1.12); }

.site-footer__copy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 49.3rem;
  width: 50.6rem;
  font-size: 1.6rem;
  font-weight: 200;
  line-height: 1.1;
  text-align: center;
}

/* =====================================================================
   Below 1024px — the exact frame stops being useful, so the same markup
   reflows into a single-column layout.
   ===================================================================== */

@media (max-width: 1023.98px) {

  body { font-size: 1.6rem; }

  .bg, .bg-mid { display: none; }
  .page, .site-header__inner { width: auto; }

  main { background:
      linear-gradient(180deg, #000 0%, #000 26%, #04203f 36%, #0057b8 48%, #007bff 58%, #4da5ff 68%, #fff 74%);
  }

  .shell, .hero, .services, .stories, .assessment, .partners, .contact, .site-footer {
    height: auto;
  }

  .hero, .services, .stories, .assessment, .partners, .contact, .site-footer {
    padding: 0 2.4rem;
  }

  .hero__title, .hero__sub, .hero__btn, .vendor-strip,
  .services .section-title, .service-card, .services__dots,
  .stories .section-title, .stories__lead, .story-card, .stories__note, .stories__btn,
  .assessment__title, .assessment__body, .assessment__btn,
  .partners .section-title, .partners__lead, .partner, .partners__note, .partners__btn,
  .contact .section-title, .contact__body, .contact__btn,
  .site-footer__logo, .footer-nav .nav-link, .back-to-top, .site-footer__rule,
  .newsletter__title, .social__title, .newsletter, .newsletter__consent,
  .newsletter__status, .site-footer__copy, .social__list, .social__list li,
  .story-card__title, .partner__label, .partner__body, .partner__more,
  .service-card__title, .service-card__kicker, .service-card__rule,
  .service-card__body, .service-card__btn, .partner__logos, .partner__logos li,
  .nav-link, .support-btn, .lang, .site-header__logo {
    /*
      Relative rather than static so the z-index that lifts panel content over
      .panel__bg still applies. The frame's per-element offsets are set by more
      specific selectors, so they need !important to be cleared here — this is a
      deliberate layout-mode switch, not a specificity patch.
    */
    position: relative;
    transform: none;
    inset: auto !important;
    width: auto;
  }

  .story-card__glow { display: none; }

  /* header */
  .site-header {
    display: flex;
    align-items: center;
    z-index: 200;
    height: 7.2rem;
    padding: 0 2.4rem;
    background: rgba(0, 0, 0, .9);
    backdrop-filter: blur(1rem);
  }
  .site-header__logo { width: 18rem; height: 3rem; }
  .nav-glow { display: none; }
  .nav-toggle {
    display: block;
    position: relative;
    z-index: 2;
    width: 4.4rem; height: 4.4rem;
    margin-left: auto;
    padding: 1rem;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 0.2rem; margin: 0.4rem 0; background: var(--white); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(0.6rem) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-0.6rem) rotate(-45deg); }

  .site-nav {
    position: fixed;
    left: 0; right: 0; top: 7.2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2.4rem;
    background: rgba(0, 0, 0, .96);
    backdrop-filter: blur(1.2rem);
    border-bottom: 0.1rem solid rgba(255, 255, 255, .18);
    opacity: 0; visibility: hidden; transform: translateY(-0.8rem);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
  }
  body.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }
  .site-nav__list { display: flex; flex-direction: column; gap: 2rem; }
  .nav-link { font-size: 2rem; }
  .support-btn { align-self: flex-start; width: 17.3rem; height: 4.7rem; }

  /* hero */
  .hero { padding-top: 11rem; padding-bottom: 4rem; }
  .hero__title { font-size: 4rem; line-height: 1.1; color: var(--white); }
  .hero__sub { margin-top: 2rem; font-size: 1.8rem; color: var(--white); }
  .hero__btn { display: flex; width: 100%; height: 6rem; margin-top: 1.6rem; font-size: 1.8rem; }
  .vendor-strip { flex-wrap: wrap; gap: 2.4rem 3.2rem; height: auto; margin-top: 4rem; }
  .vendor-strip img { height: 2.6rem; width: auto; }
  .vendor-strip li img { width: auto !important; height: 2.6rem !important; }

  /* services */
  .services { padding-top: 4rem; padding-bottom: 4rem; }
  .services::before { display: none; }
  .services .section-title { font-size: 3rem; color: var(--white); }
  .service-card { position: relative; width: 100%; height: auto; min-height: 46rem; margin-top: 2.4rem; }
  .service-card__photo { position: absolute; inset: 0 !important; width: 100%; height: 100%; transform: none; }
  .service-card__veil { position: absolute; inset: 0 !important; width: 100%; height: 100%; background: linear-gradient(120deg, #000 42%, rgba(0,0,0,.35) 100%); }
  .service-card__title, .service-card__kicker, .service-card__rule, .service-card__body, .service-card__btn { margin-left: 2.4rem; margin-right: 2.4rem; }
  .service-card__title { padding-top: 2.8rem; font-size: 2.8rem; }
  .service-card__kicker { font-size: 1.5rem; }
  .service-card__rule { width: auto; margin-top: 1.6rem; }
  .service-card__body { margin-top: 1.6rem; font-size: 1.7rem; }
  .service-card__btn { display: flex; width: 22rem; height: 5rem; margin-top: 2.4rem; margin-bottom: 4rem; font-size: 1.6rem; }
  .service-card__stage { position: relative; inset: auto; min-height: 34rem; overflow: hidden; }
  .service-slide { position: absolute; inset: 0; }
  .slider-dots { position: relative; left: auto !important; top: auto !important; margin: 2rem 0 0 auto; width: max-content; }
  .slider-dots__dot { width: 3rem; }
  .slider-dots__dot.is-active { width: 6.8rem; }

  /* stories */
  .stories { padding-top: 4rem; padding-bottom: 4rem; }
  .stories .section-title { font-size: 3rem; }
  .stories__lead { margin-top: 1rem; font-size: 1.7rem; }
  .story-card { position: relative; display: block; width: 100%; aspect-ratio: 424 / 478; margin-top: 2rem; }
  .story-card__photo { position: absolute; inset: 0 !important; width: 100% !important; height: 100% !important; }
  .story-card__photo--color { opacity: 0 !important; }
  .story-card:hover .story-card__photo--color { opacity: var(--photo-alpha, 1) !important; }
  .story-card__veil { position: absolute; left: 0 !important; top: 0 !important; width: 100%; height: 59%; }
  .story-card__title { position: absolute; left: 0 !important; top: 3rem !important; width: 100%; font-size: 2.2rem; }
  .story-card__mark { position: absolute; right: 2rem !important; bottom: 1.6rem !important; left: auto !important; top: auto !important; width: 5.6rem; height: auto; }
  .stories__note { margin-top: 3.2rem; font-size: 1.6rem; }
  .stories__btn { display: flex; width: 100%; height: 6rem; margin-top: 2.4rem; font-size: 1.7rem; }

  /* assessment */
  .assessment { padding-top: 5rem; padding-bottom: 5rem; background: linear-gradient(180deg, #000 0%, #002d63 60%, #0060cc 100%); text-align: center; }
  .assessment__title { font-size: 3rem; color: var(--white); }
  .assessment__body { margin-top: 1.6rem; font-size: 1.7rem; color: var(--white); }
  .assessment__btn { display: flex; width: 100%; height: 6.4rem; margin-top: 2.4rem; font-size: 1.7rem; }

  /* partners */
  .partners { padding-top: 4rem; padding-bottom: 4rem; background: var(--white); }
  .partners .section-title { font-size: 3rem; }
  .partners__lead { margin-top: 1rem; font-size: 1.8rem; }
  .partner { position: relative; width: 100%; height: auto; margin-top: 3.2rem; padding-bottom: 6.4rem; }
  .partner__bg { background-size: 100% 10rem; }
  .partner__label { position: relative; padding: 2.2rem 2rem 0; font-size: 1.8rem; white-space: normal; }
  .partner__logos { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; padding: 1.6rem 2rem 0; }
  .partner__logos li { position: relative; width: auto !important; height: 2.4rem !important; }
  .partner__logos img { width: auto; height: 100%; }
  .partner__body { position: relative; padding: 1.6rem 2rem 0; font-size: 1.5rem; }
  .partner__more { position: absolute; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100%; height: 5.6rem; padding: 0 2rem 1.6rem 0; }
  .partners__note { margin-top: 3.2rem; font-size: 1.6rem; text-align: center; }
  .partners__btn { display: flex; width: 100%; height: 6rem; margin-top: 2.4rem; font-size: 1.7rem; }

  /* contact */
  .contact { padding-top: 4rem; padding-bottom: 4rem; background: var(--blue); }
  .contact .section-title { font-size: 3rem; }
  .contact__body { margin-top: 1.4rem; font-size: 1.6rem; }
  .contact__btn { display: flex; width: 100%; height: 6rem; margin-top: 2.4rem; font-size: 1.7rem; }

  /* footer */
  .site-footer { padding-top: 3.2rem; padding-bottom: 3.2rem; background: var(--black); }
  .site-footer__logo { width: 18rem; height: 3rem; }
  .footer-nav ul { display: flex; flex-wrap: wrap; gap: 1.6rem 2.8rem; margin-top: 2.4rem; }
  .back-to-top { display: inline-block; margin-top: 1.6rem; }
  .site-footer__rule { display: block; width: 100%; transform: none; margin: 2.4rem 0; background: rgba(255, 255, 255, .25); }
  .newsletter__title { font-size: 1.8rem; }
  .newsletter { display: flex; width: 100%; max-width: 40.5rem; height: 5.3rem; margin-top: 1.6rem; }
  .newsletter__input { position: relative; inset: auto !important; flex: 1 1 0; min-width: 0; width: auto; border-radius: 1rem 0 0 1rem; border-right: 0; font-size: 1.7rem; }
  .newsletter__submit { position: relative; inset: auto !important; width: auto; padding: 0 2.4rem; text-align: center; font-size: 1.7rem; }
  .newsletter__status { margin-top: 1rem; }
  .newsletter__consent { margin-top: 1.6rem; font-size: 1.5rem; }
  .social__title { margin-top: 3.2rem; font-size: 1.8rem; }
  .social__list { display: flex; gap: 2.4rem; margin-top: 1.6rem; }
  .social__list li { width: 2.4rem; height: 2.4rem; }
  .site-footer__copy { margin-top: 3.2rem; font-size: 1.4rem; text-align: center; }
}