/* ==========================================================================
   Accelerate2Value — site styles
   Palette and usage rules follow brand-sheet.html / the logo pack README.
   Structure:  0 fonts · 1 tokens · 2 base · 3 layout · 4 components
               5 sections · 6 footer · 7 responsive · 8 customer case
               9 print · 10 motion
   ========================================================================== */

/* ── 0. Fonts ──────────────────────────────────────────────────────────────
   Self-hosted, latin subset, taken from Google Fonts (both families are SIL
   Open Font License 1.1 — see assets/fonts/README.txt for the exact source
   and how to regenerate them).

   They used to arrive as a <link> to fonts.googleapis.com, which put a
   render-blocking stylesheet on a foreign origin in front of the first paint:
   the browser had to open a connection to googleapis.com, parse the CSS it
   returned, and only then discover the font URLs on a *second* foreign origin.
   Served from here they cost one connection the page has already opened, and
   the two the layout preloads are requested from the markup rather than
   discovered three hops in.

   The files are content-stable and cached immutable for a year, so a font that
   is ever replaced needs a NEW FILENAME — overwriting one in place leaves it
   stale in browser caches. */

/* Inter is a variable font: one file covers the whole 400-700 range we use. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins ships as static instances, so it needs one face per weight. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* brand */
  --navy:        #0b2a4a;
  --navy-light:  #123a63;
  --amber:       #f59e0b;
  --sky:         #4f9be0;
  --steel:       #2f6fb0;
  --slate:       #5b7186;
  --ink:         #0f172a;
  --cloud:       #f8fafc;

  /* derived */
  --navy-deep:   #071b30;
  --amber-soft:  #fbbf24;
  --line:        #e6ebf1;
  --line-dark:   rgba(255, 255, 255, .14);
  --muted:       #64748b;
  --white:       #ffffff;

  /* gradients */
  --grad-brand:  linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  --grad-accent: linear-gradient(120deg, var(--sky) 0%, var(--steel) 45%, var(--amber) 130%);
  --grad-text:   linear-gradient(100deg, var(--sky) 0%, #7bb8ee 35%, var(--amber) 92%);
  --grad-footer: linear-gradient(160deg, var(--navy-light) 0%, var(--navy) 40%, var(--navy-deep) 100%);

  /* type */
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-head: 'Poppins', 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;

  /* space & shape */
  --shell:   1180px;
  --gutter:  clamp(20px, 5vw, 40px);
  --r-sm:    10px;
  --r-md:    16px;
  --r-lg:    24px;
  --r-xl:    32px;

  /* elevation */
  --sh-sm: 0 2px 8px rgba(11, 42, 74, .06);
  --sh-md: 0 12px 32px rgba(11, 42, 74, .10);
  --sh-lg: 0 28px 64px rgba(11, 42, 74, .16);
  --sh-xl: 0 40px 90px rgba(7, 27, 48, .28);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* scroll-padding clears the fixed header when jumping to an anchor */
html { scroll-behavior: smooth; scroll-padding-top: 114px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.14;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.4rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--steel); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--amber); }

img, svg, video, canvas { max-width: 100%; display: block; }

/* Ordered lists are used for sequence semantics (steps, layers, stages), never
   for their native markers — the design supplies its own numbering. */
ul, ol { margin: 0; padding: 0; list-style: none; }

strong { font-weight: 600; color: var(--navy); }
em { font-style: normal; color: var(--steel); font-weight: 500; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: -80px; transform: translateX(-50%);
  z-index: 200; background: var(--amber); color: var(--navy);
  padding: 12px 22px; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--navy); }

/* ── 3. Layout ─────────────────────────────────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding: clamp(72px, 9vw, 128px) 0; }
/* keep content above the absolutely-positioned decorations */
.section > .shell { position: relative; z-index: 1; }

.section--tinted { background: var(--cloud); }

/* Section edges are hard and square — rounding is for cards and panels, not
   for the boundary between one section and the next. */
.section--dark {
  background: var(--grad-brand);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
}
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark strong { color: var(--white); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--light .lead { color: rgba(255, 255, 255, .75); }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--slate);
  line-height: 1.62;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel); margin: 0 0 18px;
}
.eyebrow--light { color: var(--sky); }
.eyebrow__dot {
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--amber); flex: none;
}

.amber { color: var(--amber); }

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.underline-amber {
  position: relative; white-space: nowrap;
  /* own stacking context, so the -1 stripe below sits behind the text
     but still in front of the section background */
  isolation: isolate;
}
.underline-amber::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .08em; height: .28em;
  background: linear-gradient(90deg, rgba(245, 158, 11, .55), rgba(245, 158, 11, .18));
  border-radius: 3px; z-index: -1;
}

/* decorative chevrons that bleed across section boundaries */
.deco-chevrons {
  position: absolute; top: -70px; width: 340px; height: 340px;
  pointer-events: none; opacity: .07; z-index: 0;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%230b2a4a' stroke-width='11' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 26 L46 60 L22 94'/%3E%3Cpath d='M56 26 L80 60 L56 94'/%3E%3Cpath d='M90 26 L114 60 L90 94'/%3E%3C/svg%3E");
}
.deco-chevrons--right { right: -90px; }
.deco-chevrons--left  { left: -110px; top: auto; bottom: -60px; transform: rotate(180deg); }
.deco-chevrons--light {
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%234f9be0' stroke-width='11' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 26 L46 60 L22 94'/%3E%3Cpath d='M56 26 L80 60 L56 94'/%3E%3Cpath d='M90 26 L114 60 L90 94'/%3E%3C/svg%3E");
}

/* ── 4. Components ─────────────────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .97rem;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn--accent {
  background: var(--amber); color: var(--navy);
  box-shadow: 0 10px 26px rgba(245, 158, 11, .32);
}
.btn--accent:hover {
  background: var(--amber-soft); color: var(--navy);
  transform: translateY(-2px); box-shadow: 0 16px 34px rgba(245, 158, 11, .42);
}
.btn--ghost {
  background: rgba(255, 255, 255, .06); color: var(--white);
  border-color: rgba(255, 255, 255, .38); backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .14); color: var(--white);
  border-color: var(--white); transform: translateY(-2px);
}
.btn--sm { padding: 11px 22px; font-size: .9rem; }

/* Customer-case button. It carries someone else's mark, which is drawn in its
   own colours, so it needs a white tile to sit on — over the navy hero and over
   the white sticky bar alike. Amber stays reserved for the CTA beside it. */
.btn--case {
  background: var(--white); color: var(--navy);
  border-color: rgba(11, 42, 74, .10);
  box-shadow: 0 8px 22px rgba(11, 42, 74, .18);
  gap: 10px;
  /* The mark is a wordmark inside an oval, so roughly three quarters of its
     height is the ring and the air around the letters. It has to run taller
     than a plain lockup would to stay readable — the block padding comes down
     to match, keeping the button the same height as the CTA beside it. */
  padding: 7px 20px 7px 14px;
}
.btn--case:hover {
  color: var(--navy); border-color: rgba(11, 42, 74, .22);
  transform: translateY(-2px); box-shadow: 0 14px 30px rgba(11, 42, 74, .24);
}
/* On the case page the button points at the page being read: still a link back
   to the top, but it stops competing with the CTA. */
.btn--case[aria-current] { box-shadow: none; background: rgba(255, 255, 255, .88); }
.nav-case__logo { display: block; height: 28px; width: auto; flex: none; }
.nav-case__logo--text { font-weight: 700; font-size: .84rem; letter-spacing: .05em; }
.btn--full { width: 100%; }

.link-arrow { font-weight: 600; font-size: .95rem; display: inline-flex; gap: 7px; align-items: center; }
.link-arrow::after { content: '→'; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Tick list */
.tick-list { display: grid; gap: 12px; }
.tick-list li {
  position: relative; padding-left: 32px; font-size: .98rem; color: var(--slate); line-height: 1.55;
}
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: .35em;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(79, 155, 224, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6fb0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}

/* Avatar */
.avatar {
  display: grid; place-items: center; flex: none;
  width: 62px; height: 62px; border-radius: 20px;
  background: var(--grad-brand); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .04em;
  box-shadow: var(--sh-md);
}
.avatar--sm { width: 38px; height: 38px; border-radius: 12px; font-size: .7rem; }
/* portrait variant — same tile, cropped to fill */
.avatar--photo { display: block; object-fit: cover; background: var(--cloud); }
/* logo variant — the customer's mark on a white tile, standing in where there
   is no portrait. Padded and contained rather than cropped: a wordmark must
   not be cut off, and the marks are transparent PNGs of no fixed shape. */
.avatar--logo {
  width: auto; min-width: 38px; padding: 5px 9px;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
/* The tile is sized by the mark, not the other way round: a customer wordmark
   is landscape, and cropping one to a square is the one thing a logo may never
   do. The bounds are in px on the image — a percentage height does not resolve
   against a centred grid item, so the mark fell back to its intrinsic size and
   hung out of the tile it was supposed to sit in. */
.avatar--logo img { display: block; width: auto; height: auto; max-width: 86px; max-height: 26px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 18px 0;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; }

.site-header__logo { display: block; flex: none; }
/* Scales with the viewport so the lockup stays legible without crowding the nav.
   The brand sheet's minimum for the full horizontal lockup is 120px wide;
   the floor here lands around 205px. */
.logo { height: clamp(54px, 5.2vw, 68px); width: auto; transition: height .3s var(--ease); }
.logo--light { display: none; }

.site-header.is-stuck {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 1px 0 var(--line), 0 8px 30px rgba(11, 42, 74, .07);
  padding: 10px 0;
}
.site-header.is-stuck .logo--dark { display: none; }
.site-header.is-stuck .logo--light { display: block; }
/* The logo keeps its full size when the bar sticks — only the bar's own
   padding tightens, so the header slims without shrinking the brand. */

/* The gap scales because the logo does: at 1440 the lockup is at its 58px
   ceiling and takes room the links would otherwise have had. */
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(20px, 2vw, 30px); }
/* Buttons keep their size — a shrinking pill clips its own label. */
.site-nav .btn { flex: none; }
.site-nav a {
  font-size: .95rem; font-weight: 500; color: rgba(255, 255, 255, .88); position: relative;
  /* two-word links break over two lines once the case button takes its share of
     the row — they hold one line and the row tightens instead */
  white-space: nowrap;
}
.site-nav a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--amber); border-radius: 2px; transition: right .25s var(--ease);
}
.site-nav a:not(.btn):hover { color: var(--white); }
.site-nav a:not(.btn):hover::after { right: 0; }
.site-header.is-stuck .site-nav a:not(.btn) { color: var(--navy); }
.site-header.is-stuck .site-nav a:not(.btn):hover { color: var(--steel); }
.site-nav .btn { color: var(--navy); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px);
  padding: 13px 12px; flex-direction: column; justify-content: space-between;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--white); transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.site-header.is-stuck .nav-toggle { background: rgba(11, 42, 74, .07); }
.site-header.is-stuck .nav-toggle span { background: var(--navy); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── 5. Sections ───────────────────────────────────────────────────────── */

/* Hero */
.hero {
  position: relative;
  min-height: clamp(660px, 96vh, 940px);
  display: flex; align-items: center;
  padding: 180px 0 clamp(150px, 16vh, 220px);
  isolation: isolate;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }

/* Background layer order — the video must sit ABOVE the opaque brand gradient,
   or the gradient paints straight over it:
     0 gradient (opaque base)  1 mesh  2 video  3 chevron canvas  4 scrim      */
.hero__video {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero.has-video .hero__video { opacity: .62; }
.hero.has-video .hero__mesh { opacity: .45; }

.hero__gradient { position: absolute; inset: 0; z-index: 0; background: var(--grad-brand); }

/* slow-drifting colour mesh — stands in for the background video */
.hero__mesh {
  position: absolute; inset: -20%; z-index: 1;
  background:
    radial-gradient(42% 46% at 18% 26%, rgba(79, 155, 224, .55) 0%, transparent 62%),
    radial-gradient(38% 42% at 82% 22%, rgba(47, 111, 176, .55) 0%, transparent 64%),
    radial-gradient(46% 50% at 68% 82%, rgba(245, 158, 11, .30) 0%, transparent 60%),
    radial-gradient(40% 44% at 22% 78%, rgba(18, 58, 99, .75) 0%, transparent 66%);
  filter: blur(28px);
  animation: meshDrift 26s ease-in-out infinite alternate;
  transition: opacity 1.2s var(--ease);
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

.hero__flow { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: .5; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 4;
  /* Darkened at the top (so the nav stays legible) and from the left (so the
     headline does), but held flat toward the bottom — the video should still
     read right up to the hard edge, not ramp into black. */
  background:
    linear-gradient(180deg, rgba(7, 27, 48, .72) 0%, rgba(7, 27, 48, .32) 45%, rgba(7, 27, 48, .40) 100%),
    linear-gradient(90deg, rgba(7, 27, 48, .55) 0%, transparent 68%);
}

/* No fade-out at the bottom: the hero ends on a hard edge against the white
   below, and the stats strip is the only thing that crosses it. */

.hero__inner { position: relative; z-index: 2; max-width: 940px; }
.hero__title { color: var(--white); margin-bottom: 26px; }
.hero__lead {
  font-size: clamp(1.08rem, 1.55vw, 1.3rem);
  color: rgba(255, 255, 255, .84);
  max-width: 640px; line-height: 1.6;
}
.hero__lead strong { color: var(--white); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }

/* Stats — overlaps the hero above and the section below */
.stats-band { position: relative; z-index: 5; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(-130px, -11vw, -90px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.stat { padding: 34px 30px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat__num {
  display: block;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1;
  background: linear-gradient(135deg, var(--navy) 0%, var(--steel) 70%, var(--amber) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
/* the unit ("years", "weeks") rides along at label weight, opaque so it
   paints over the figure's clipped gradient */
.stat__unit { font-size: .48em; font-weight: 600; color: var(--slate); }
.stat__label { font-size: .9rem; color: var(--slate); line-height: 1.5; display: block; }

/* Intro / split */
.section--intro { padding-top: clamp(72px, 8vw, 110px); }
.split {
  display: grid; grid-template-columns: 1.35fr .85fr;
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.split__aside { display: grid; gap: 26px; position: sticky; top: 110px; }

.quote-card {
  position: relative;
  background: var(--grad-brand);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: 38px 34px 30px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.quote-card::after {
  content: ''; position: absolute; right: -60px; bottom: -70px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .38), transparent 68%);
}
.quote-card__mark {
  font-family: var(--font-head); font-size: 4.4rem; line-height: .6;
  color: var(--amber); display: block; margin-bottom: 6px;
}
.quote-card__text { font-size: 1.14rem; line-height: 1.5; font-weight: 500; }
.quote-card__by {
  display: flex; align-items: center; gap: 12px; margin-top: 24px;
  font-size: .84rem; color: rgba(255, 255, 255, .72); position: relative; z-index: 1;
}
.quote-card__by .avatar { background: rgba(255, 255, 255, .14); box-shadow: none; }

/* Problem grid */
.problem-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  margin-bottom: clamp(56px, 7vw, 88px);
}
.problem {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 28px 26px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.problem:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(79, 155, 224, .5); }
.problem h3 { color: var(--navy); margin-bottom: .45em; }
.problem p { font-size: .94rem; color: var(--slate); }

/* Mission panel — overlaps into the next section */
.mission-panel {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.5fr .8fr; align-items: center; gap: 40px;
  background: var(--grad-brand);
  color: rgba(255, 255, 255, .8);
  border-radius: var(--r-xl);
  padding: clamp(38px, 5vw, 62px);
  box-shadow: var(--sh-xl);
  margin-bottom: clamp(-150px, -12vw, -110px);
  overflow: hidden;
}
.mission-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 88% 8%, rgba(245, 158, 11, .26), transparent 60%);
}
.mission-panel > * { position: relative; z-index: 1; }
.mission-panel h3 { color: var(--white); font-size: clamp(1.5rem, 2.4vw, 2rem); }
.mission-list { display: grid; gap: 10px; margin-top: 22px; }
.mission-list li { position: relative; padding-left: 28px; font-size: .97rem; }
.mission-list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 12px; height: 2px; border-radius: 2px; background: var(--amber);
}

.mission-panel__aside { display: grid; place-items: center; }
.orbit { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.orbit__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .28);
  animation: spin 34s linear infinite;
}
.orbit__ring--2 { inset: 26px; border-style: solid; border-color: rgba(245, 158, 11, .34); animation-duration: 22s; animation-direction: reverse; }
.orbit__mark { width: 84px; height: auto; position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Value cards */
.section--value { padding-top: clamp(150px, 17vw, 210px); }
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.value-card {
  position: relative; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 40px 36px; box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.value-card__icon {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
  margin-bottom: 22px; color: var(--white);
}
.value-card__icon svg { width: 26px; height: 26px; }
.value-card__icon--biz { background: linear-gradient(135deg, var(--steel), var(--sky)); }
.value-card__icon--it  { background: linear-gradient(135deg, var(--navy), var(--steel)); }

/* Architecture layers — three equal cards in one row. */
.layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.layer {
  position: relative;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  /* No backdrop-filter here: the section behind is an opaque gradient, so it
     bought nothing visually, but combined with the section's overflow:hidden +
     border-radius it forced a compositing layer that made neighbouring content
     flicker or drop out while scrolling. */
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.layer:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(79, 155, 224, .5);
}
.layer h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: .5em; }
.layer__badge {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .82);
  border: 1px solid var(--line-dark);
}
.layer__badge--amber {
  background: rgba(245, 158, 11, .18); color: var(--amber-soft); border-color: rgba(245, 158, 11, .4);
}
.layer p { font-size: .97rem; margin: 0; }

/* Optional note under the layer cards */
.layers-note {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 18px;
  margin-top: 24px; padding: 20px 26px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
}
.layers-note__icon {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 13px;
  background: rgba(245, 158, 11, .16); color: var(--amber-soft);
}
.layers-note__icon svg { width: 21px; height: 21px; }
.layers-note h3 { font-size: 1.02rem; margin-bottom: .32em; }
.layers-note p { font-size: .93rem; margin: 0; }

/* Approach — a compact vertical flow of three steps joined by chevrons. */
.section--approach { padding-top: clamp(72px, 8vw, 108px); }
.section--approach .section-head { margin-bottom: clamp(30px, 3.4vw, 44px); }
/* A vertical flow of three full-width steps, joined by downward chevrons. The
   width lets the middle step hold its three stages side by side. */
/* Left-aligned with the section heading above it, not centred. */
.steps { display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 920px; }

/* The wrapper's left edge is the alignment line: the number badge sits on it,
   and the card is inset far enough for the badge to overlap its corner. */
.step { position: relative; padding-left: 38px; }

.step__num {
  position: absolute; left: 0; top: 16px; z-index: 2;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 19px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  color: var(--white); background: var(--grad-brand);
  box-shadow: var(--sh-md);
}

.step__body {
  position: relative;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 30px 22px 44px;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.step:hover .step__body {
  transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(79, 155, 224, .45);
}

/* the connecting chevron, centred in the gap below each card */
.step:not(:last-child) .step__body::after {
  content: '';
  position: absolute; left: 50%; bottom: -23px;
  width: 15px; height: 15px;
  border-top: 3px solid var(--sky);
  border-right: 3px solid var(--sky);
  border-radius: 2px;
  transform: translateX(-50%) rotate(135deg);
}
.step:nth-child(even) .step__num { background: linear-gradient(135deg, var(--steel), var(--sky)); }
.step:last-child .step__num { background: linear-gradient(135deg, var(--amber), #d97706); color: var(--navy); }
/* duration sits on the heading line rather than above it — saves a row per step */
.step h3 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-bottom: .38em;
}
.step p { color: var(--slate); font-size: .95rem; margin: 0; }

/* Steps and their stages share one quiet treatment for durations, so the
   top-level steps aren't emphasised over the stages inside them. */
.step__time, .substep__time {
  font-family: var(--font-body);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel); white-space: nowrap;
}

/* Stages nested inside a step (the three stages of "Project"), side by side. */
.substeps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 14px;
}
.substep {
  position: relative;
  background: var(--cloud);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.substep:hover { border-color: rgba(79, 155, 224, .5); background: #fff; }
.substep h4 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-size: .93rem; color: var(--navy); margin-bottom: .4em;
}
.substep p { font-size: .85rem; line-height: 1.5; }

/* Core values */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 34px 30px 30px; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--grad-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.value:hover { transform: translateY(-6px); box-shadow: var(--sh-md); }
.value:hover::before { transform: scaleX(1); }
.value__idx {
  font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1;
  color: rgba(11, 42, 74, .1); display: block; margin-bottom: 12px;
}
.value p { font-size: .94rem; color: var(--slate); margin: 0; }

/* Team */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.person {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 34px; box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.person:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.person__head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.person__head h3 { margin: 0 0 2px; }
.person__role { font-size: .88rem; color: var(--amber); font-weight: 600; margin: 0; }
.person > p { font-size: .96rem; color: var(--slate); }
/* Contact row: the address reads as the label, so it wraps to its own line
   on narrow cards rather than being squeezed against the LinkedIn link. */
.person__links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 22px; margin-top: 4px;
}
.person__mail {
  font-weight: 600; font-size: .95rem; color: var(--navy);
  border-bottom: 1px solid rgba(11, 42, 74, .22);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.person__mail:hover { color: var(--amber); border-bottom-color: var(--amber); }
/* LinkedIn glyph — sits at the far end of the row, so the address keeps the
   left edge whether or not the icon is there. */
.person__social {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--steel);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.person__social svg { width: 19px; height: 19px; display: block; }
.person__social:hover, .person__social:focus-visible {
  background: var(--steel); border-color: var(--steel); color: var(--white);
}

/* Sectors — overlaps into the contact band */
.sectors {
  position: relative; z-index: 2;
  margin-top: clamp(48px, 6vw, 76px);
  background: var(--cloud); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(34px, 4.5vw, 54px);
}
.sectors h3 { margin-bottom: .4em; }
.sectors > p { color: var(--slate); font-size: .98rem; }
/* Two columns rather than four: a row of logos needs the width a column of
   names didn't. */
.sector-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin: 30px 0 26px;
}
.sector {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 20px;
}
.sector h4 { color: var(--navy); margin-bottom: 8px; font-size: .95rem; }
.sector p { font-size: .86rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Client logos, in each company's own colours. A fixed box per mark with
   object-fit keeps a row of wildly different aspect ratios optically level. */
/* Sized so the widest sector — four marks — still holds one row, which is what
   keeps the two cards in a grid row the same height. */
.company-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 16px; }
.company {
  width: calc(92px * var(--mark-w, var(--mark, 1))); height: calc(36px * var(--mark, 1));
  /* Never wider than the card, whatever --mark-w asks for: between roughly
     620 and 655px the two-column sector grid is narrower than a stretched
     mark, and a flex item that can't fit would push the card open. */
  max-width: 100%;
  object-fit: contain; object-position: left center;
}
/* Optical size correction. One box for every mark is arithmetically fair but
   not optically — a heavy, compact wordmark shouts next to a wide, light one.
   `--mark` scales a single logo's box; object-fit does the rest, so it works
   whether the mark is limited by width or by height. Keyed by the slug the
   renderer puts in `data-company`. */
.company[data-company="abb"] { --mark: .8; }
/* `--mark-w` stretches the box on width alone. For an extreme lockup --mark is
   the wrong tool: Tommy Hilfiger is 566.9x31.5 in its viewBox — 18:1, the flag
   set between TOMMY and HILFIGER on one line — so contain always fits it by
   width and the extra height is dead space that the grid row still has to pay
   for. Widening instead is what makes the mark taller. It is the last logo in
   its sector, so this grows into the free space at the right of that row and
   stops ~26px short of wrapping the row at full width. */
.company[data-company="tommy-hilfiger"] { --mark-w: 2.3; }
/* Fallback for a company with no logo file — reads as a wordmark in the row. */
.company--text {
  display: inline-flex; align-items: center; height: 36px;
  font-weight: 700; font-size: .9rem; color: var(--slate);
  letter-spacing: .01em; opacity: .8;
}
.sectors__note { font-size: .95rem; color: var(--slate); margin: 0; }

/* Contact — the panel deliberately overhangs the footer */
.contact-band { position: relative; z-index: 4; padding-top: clamp(72px, 9vw, 120px); }
.contact-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 68px);
  background: var(--grad-brand);
  color: rgba(255, 255, 255, .8);
  border-radius: var(--r-xl);
  padding: clamp(38px, 5vw, 64px);
  box-shadow: var(--sh-xl);
  margin-bottom: clamp(-190px, -15vw, -140px);
  position: relative; overflow: hidden;
}
.contact-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 100% at 5% 100%, rgba(79, 155, 224, .34), transparent 62%),
              radial-gradient(50% 90% at 95% 0%, rgba(245, 158, 11, .22), transparent 60%);
}
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel h2 { color: var(--white); }

.contact-facts { display: grid; gap: 8px; margin-top: 28px; font-size: .95rem; }
.contact-facts a { color: var(--sky); }
.contact-facts a:hover { color: var(--amber); }
.contact-facts strong { color: var(--white); }

/* Form */
.contact-form { display: grid; gap: 18px; align-content: start; }
.field { display: grid; gap: 7px; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field label { font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .88); }
.field label span { color: var(--amber); }
.field input, .field textarea {
  font-family: var(--font-body); font-size: .97rem; color: var(--white);
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  padding: 13px 16px; width: 100%; resize: vertical;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .45); }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--amber); background: rgba(255, 255, 255, .13);
}
.field.has-error input, .field.has-error textarea { border-color: #fca5a5; }
.field__error { font-size: .82rem; color: #fca5a5; margin: 0; min-height: 0; }

.form-status { font-size: .92rem; margin: 4px 0 0; min-height: 1.4em; }
.form-status.is-ok { color: #6ee7b7; }
.form-status.is-error { color: #fca5a5; }

/* ── 6. Footer ─────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: var(--grad-footer);
  color: rgba(255, 255, 255, .68);
  padding: clamp(210px, 20vw, 270px) 0 0;
  overflow: hidden;
}
.site-footer__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 60% at 12% 18%, rgba(47, 111, 176, .55), transparent 60%),
    radial-gradient(50% 55% at 88% 12%, rgba(79, 155, 224, .32), transparent 62%),
    radial-gradient(70% 80% at 60% 118%, rgba(245, 158, 11, .30), transparent 60%);
}
.site-footer__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px;
  padding-bottom: 54px;
}
.site-footer__logo { height: clamp(52px, 5vw, 64px); width: auto; margin-bottom: 22px; }
.site-footer__brand p { font-size: .94rem; max-width: 34ch; }
.site-footer__col { display: grid; gap: 12px; align-content: start; }
.site-footer__col h4 {
  color: var(--white); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 6px;
}
.site-footer__col a { color: rgba(255, 255, 255, .72); font-size: .94rem; }
.site-footer__col a:hover { color: var(--amber); }
.site-footer__meta { font-size: .94rem; margin: 0; }

.site-footer__bar {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-dark);
  padding-top: 24px; padding-bottom: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .86rem;
}
.site-footer__bar p { margin: 0; }
.site-footer__legal a { color: rgba(255, 255, 255, .72); }
.site-footer__legal a:hover { color: var(--amber); }

/* ── 7. Responsive ─────────────────────────────────────────────────────── */

/* Five links and two buttons run out of row here, and the CTA is the one that
   would be pushed off the edge. The customer logo carries the case button on
   its own from this width down; the word goes to screen readers, so the button
   keeps "Customer case" as its accessible name. */
@media (max-width: 1200px) {
  .nav-case__label {
    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;
  }
  .btn--case { padding-inline: 15px; }
}

@media (max-width: 1080px) {
  /* tighten the nav so the larger logo and the links still share one row
     in the band between here and the 860px mobile breakpoint */
  .site-header__inner { gap: 18px; }
  .site-nav { gap: 18px; }
  .site-nav a { font-size: .9rem; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid  { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__aside { position: static; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  /* three columns get too narrow for the layer headings — stack them again */
  .layers { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }

  /* Six nav items plus the CTA stop fitting beside the logo here, so the menu
     collapses before the links start wrapping into the lockup. */
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--white);
    padding: 100px var(--gutter) 32px;
    box-shadow: var(--sh-lg);
    transform: translateY(-102%);
    transition: transform .34s var(--ease);
    max-height: 100vh; overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a:not(.btn) {
    color: var(--navy); font-size: 1.08rem; font-weight: 600;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { margin-top: 18px; }
  .site-nav .btn + .btn { margin-top: 10px; }

  /* The menu is a column with room to spare, so the word comes back and the
     case button reads as a labelled item like the links above it. */
  .nav-case__label {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip: auto; clip-path: none;
  }
  .btn--case { box-shadow: none; border-color: var(--line); }

  .value-grid, .team, .contact-panel, .mission-panel { grid-template-columns: 1fr; }
  /* the three stages run out of width once the card narrows this far */
  .substeps { grid-template-columns: 1fr; }
  .layers-note { flex-direction: column; gap: 14px; padding: 18px 20px; }
  .mission-panel__aside { display: none; }
  .contact-panel { margin-bottom: clamp(-160px, -18vw, -120px); }
  .deco-chevrons { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  /* keep the lockup clear of the menu button on narrow screens */
  .logo, .site-header.is-stuck .logo { height: 48px; }
  .hero { padding-top: 140px; min-height: 620px; }
  .stats { grid-template-columns: 1fr; margin-top: -70px; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .problem-grid, .values-grid, .sector-grid { grid-template-columns: 1fr; }
  /* no room for the badge to sit outside the card on narrow screens */
  .step { padding-left: 0; }
  .step__num { position: static; width: 50px; height: 50px; font-size: 1.3rem; border-radius: 16px; margin-bottom: 12px; }
  .step__body { padding: 22px; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__actions .btn { width: 100%; }
}

/* ── 8. Customer case ──────────────────────────────────────────────────── */
/* Shared by the teaser on the home page and by the case page itself
   (content/case-tennant/ -> case-tennant.html). */

/* Customer logo, with a wordmark standing in until the file is supplied.
   The card is a light tile even on the dark hero: a customer's mark is their
   own colour, and most of them are drawn for a white background. */
.customer-card {
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  display: grid; gap: 12px; justify-items: center; text-align: center;
  box-shadow: var(--sh-md);
}
.customer-logo { max-width: 240px; max-height: 92px; width: auto; height: auto; }
.customer-logo--text {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: .12em;
  color: var(--navy); line-height: 1;
}
.customer-logo--sm { max-width: 190px; max-height: 70px; }
.customer-logo--sm.customer-logo--text { font-size: 1.9rem; }
.customer-card__note {
  font-size: .84rem; color: var(--slate); margin: 0; max-width: 30ch;
  text-wrap: balance;
}
/* keeps a fact whole when a meta line wraps */
.nowrap { white-space: nowrap; }

/* Teaser band on the home page — the first of the two dark bands, between the
   white value section and the white approach section. It swapped places with
   the architecture section; both are dark, so the rhythm is unchanged. */
.case-teaser {
  position: relative;
  padding: clamp(64px, 8vw, 104px) 0;
  background: var(--grad-brand);
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
}
.case-teaser::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 70% at 88% 10%, rgba(245, 158, 11, .24), transparent 62%),
    radial-gradient(50% 60% at 6% 92%, rgba(79, 155, 224, .30), transparent 64%);
}
.case-teaser__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(36px, 5vw, 68px); align-items: center;
}
.case-teaser h2 { color: var(--white); }
.case-teaser .lead { color: rgba(255, 255, 255, .78); }
.case-teaser__text .mission-list { margin: 24px 0 30px; }
.case-teaser__aside { display: grid; gap: 18px; }
.case-teaser__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center;
}
.case-teaser__stats li {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: 16px 8px;
}
.case-teaser__num {
  display: block;
  /* The three figures must all hold one line in a third of the aside, which is
     only ~110px wide at the desktop grid. The widest ("3 months") sets the
     size — nowrap keeps it honest, so if a longer figure is ever added here it
     overflows visibly instead of quietly wrapping out of step with its
     neighbours. */
  white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.1;
  color: var(--white); margin-bottom: 6px;
}
.case-teaser__label { display: block; font-size: .78rem; color: rgba(255, 255, 255, .66); line-height: 1.4; }

/* The case page is one article on one surface — no alternating section tints
   apart from the timeline's band. */
.page-case main { background: var(--white); }
.page-case .contact-band { padding-top: clamp(44px, 5vw, 68px); }

/* Case hero — the page's own opening. Same layer order as the home hero, minus
   the chevron canvas: 0 gradient (opaque base)  1 mesh  2 video  3 scrim.
   The video and its scrim are only in the markup when the case supplies one. */
.case-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(124px, 14vh, 158px) 0 clamp(38px, 4.4vw, 56px);
  color: rgba(255, 255, 255, .82);
}
.case-hero__bg { position: absolute; inset: 0; z-index: -1; }
.case-hero__gradient { position: absolute; inset: 0; z-index: 0; background: var(--grad-brand); }

.case-hero__video {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.case-hero.has-video .case-hero__video { opacity: .72; }
.case-hero.has-video .case-hero__mesh { opacity: .32; }

.case-hero__scrim {
  position: absolute; inset: 0; z-index: 3;
  /* Still darker than the home hero's — this hero carries a headline, a lead,
     the customer card and the fact strip over the footage — but kept light
     enough that the footage reads through it. The weight sits top-left, behind
     the headline and the lead; the right side, which only carries the card, is
     nearly clear. */
  background:
    linear-gradient(180deg, rgba(7, 27, 48, .63) 0%, rgba(7, 27, 48, .36) 46%, rgba(7, 27, 48, .48) 100%),
    linear-gradient(90deg, rgba(7, 27, 48, .48) 0%, rgba(7, 27, 48, .09) 72%);
}

.case-hero__mesh {
  position: absolute; inset: -20%; z-index: 1;
  background:
    radial-gradient(40% 44% at 20% 24%, rgba(79, 155, 224, .5) 0%, transparent 62%),
    radial-gradient(38% 42% at 84% 18%, rgba(47, 111, 176, .5) 0%, transparent 64%),
    radial-gradient(44% 48% at 72% 88%, rgba(245, 158, 11, .26) 0%, transparent 60%);
  filter: blur(30px);
  animation: meshDrift 26s ease-in-out infinite alternate;
}

.case-hero__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 600; color: rgba(255, 255, 255, .74);
  margin-bottom: 18px;
}
.case-hero__back::before { content: '←'; transition: transform .2s var(--ease); }
.case-hero__back:hover { color: var(--white); }
.case-hero__back:hover::before { transform: translateX(-4px); }

.case-hero__grid {
  display: grid; grid-template-columns: 1.35fr .65fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.case-hero__title {
  color: var(--white);
  font-size: clamp(2rem, 4.1vw, 3rem);
  margin-bottom: 16px;
}
.case-hero__lead {
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  color: rgba(255, 255, 255, .82); line-height: 1.55; max-width: 58ch;
}
.case-hero__lead strong { color: var(--white); }

.case-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: clamp(26px, 3.2vw, 38px);
  /* Opaque, so the figures sit on a flat panel rather than on the footage —
     the video moving under them made them hard to read. #2e4863 is what
     --line-dark (white .14) resolves to over navy, so the 1px dividers and the
     border keep exactly the weight they had when the strip was translucent. */
  background: #2e4863;
  border: 1px solid #2e4863;
  border-radius: var(--r-md);
  overflow: hidden;
}
.case-facts li { background: var(--navy); padding: 20px 24px; display: grid; gap: 6px; }
.case-fact__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky);
}
.case-fact__value { font-family: var(--font-head); font-weight: 600; color: var(--white); font-size: 1.02rem; line-height: 1.3; }

/* Case body blocks */
.case-prose { max-width: 760px; color: var(--slate); margin-bottom: clamp(30px, 4vw, 44px); }
.section--dark .case-prose { color: rgba(255, 255, 255, .78); }

/* ── The article ──────────────────────────────────────────────────────────
   The case reads as one piece of writing, not as a stack of sections: a
   single measure down the page, sub-headings instead of section headers, and
   the customer quotes set into the flow. Only the timeline gets a band of its
   own. */
/* The blocks are paragraphs of one article, not sections of a page — they sit
   close together, and the heading's own margin does most of the separating. */
.article-block { position: relative; padding: clamp(16px, 1.8vw, 24px) 0; }
/* the first one carries the change of surface from the dark hero */
.article-block:first-child { padding-top: clamp(30px, 3.4vw, 44px); }
.article-block--band {
  background: var(--cloud);
  border-block: 1px solid var(--line);
  padding: clamp(26px, 3vw, 38px) 0;
  margin-block: clamp(14px, 1.6vw, 22px);
}

/* One column for everything in the article — text, screenshots, timeline and
   the company note all sit in the same shell as the hero above them, so the
   whole page shares one left and one right edge. */
.measure, .pullquote {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--gutter);
}

.article-block h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  margin: 0 0 .5em;
}
.article-h2--small { font-size: clamp(1.15rem, 1.6vw, 1.35rem) !important; }
.article-block h3 {
  font-size: 1.1rem;
  margin: 1.4em 0 .5em;
}
.article-block p { font-size: 1.05rem; line-height: 1.78; color: #33465c; }
.article-block .standfirst {
  font-size: clamp(1.1rem, 1.5vw, 1.24rem);
  line-height: 1.62; color: var(--slate); font-weight: 500;
  margin-bottom: 1.2em;
}
.article-block strong { color: var(--navy); }

.article-list { display: grid; gap: 10px; margin: 0 0 1.1em; }
.article-list li {
  position: relative; padding-left: 26px;
  font-size: 1.02rem; line-height: 1.6; color: #33465c;
}
.article-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 13px; height: 2px; border-radius: 2px; background: var(--amber);
}

/* Pull-quote — a customer voice in the margin of the story */
.pullquote { margin-top: clamp(20px, 2.2vw, 28px); }
.pullquote blockquote {
  margin: 0 0 14px; padding-left: 22px;
  border-left: 3px solid var(--amber);
  font-family: var(--font-head); font-weight: 600; font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.45;
  color: var(--navy); letter-spacing: -.01em;
  /* The quotation marks are drawn, not written: the `quote:` line in the
     content stays free of them, because it feeds the Word export as well and
     that adds its own. The opening mark hangs back into the padding, so the
     first line of text still starts on the same edge as the ones below it. */
  quotes: "“" "”";
  text-indent: -.42em;
}
.pullquote blockquote::before { content: open-quote; }
.pullquote blockquote::after { content: close-quote; }
.pullquote__pending {
  margin: 0 0 14px; padding-left: 22px;
  border-left: 3px dashed rgba(91, 113, 134, .45);
  font-size: 1.02rem; font-style: italic; color: var(--muted);
}
.pullquote figcaption {
  /* No left inset: the attribution starts on the amber rule, not on the text
     column the quote itself is indented to. The logo tile is a block of its own
     and reads as adrift when it hangs a rule-width inside the quote. */
  display: flex; align-items: center; gap: 12px;
  font-size: .86rem; color: var(--slate); line-height: 1.4;
}
.pullquote figcaption strong { color: var(--navy); font-weight: 600; }
.article-block--band .pullquote { margin-top: clamp(30px, 3.4vw, 44px); }

/* Project timeline — four dated milestones on one line */
.timeline {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.timeline::before {
  /* stops at the last dot rather than trailing past it */
  content: ''; position: absolute; top: 6px; left: 7px; right: calc(25% - 7px); height: 2px;
  background: linear-gradient(90deg, var(--sky), var(--steel) 60%, var(--amber));
  opacity: .45;
}
.tl { position: relative; padding-top: 26px; }
.tl__dot {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--steel);
}
.tl:last-child .tl__dot { border-color: var(--amber); }
.tl__time {
  display: block;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--steel); margin-bottom: 6px;
}
.tl h3 { font-size: 1.02rem; margin-bottom: .35em; }
.tl p { font-size: .89rem; line-height: 1.5; color: var(--slate); margin: 0; }

/* Screenshots. The frame is the same whether the image is there or not, so the
   page keeps its rhythm while the real screenshots are still being made. */
.shot { margin: clamp(22px, 2.8vw, 32px) 0 0; }
.shot img {
  width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); background: var(--white);
}
/* A photograph, not a screen capture. A screenshot is made wide and fills the
   measure on its own; a product shot is small at source, so it runs beside the
   text instead — floated right, with the paragraphs wrapping around it. The
   frame is dropped: the photo has its own edges. */
.shot--photo {
  float: right;
  width: min(40%, 260px);
  margin: 4px 0 16px clamp(20px, 2.4vw, 32px);
}
.shot--photo img {
  width: 100%;
  border: 0; border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.shot--photo figcaption { margin-top: 10px; font-size: .78rem; text-align: left; }
/* The float is confined to its own block, and a pull-quote never sets itself
   alongside one — without these it would hang into the quote below it, or into
   the next section. Nothing else on the page floats, so both are inert
   elsewhere. */
.article-block::after { content: ''; display: block; clear: both; }
.pullquote { clear: both; }

.shot__placeholder {
  display: grid; place-items: center;
  /* Shallower than a real screenshot will be — it marks the slot without
     leaving a page-sized hole in the middle of the case. */
  aspect-ratio: 16 / 3.4;
  border: 2px dashed rgba(91, 113, 134, .38);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgba(91, 113, 134, .05) 0 12px, transparent 12px 24px);
}
.shot__placeholder span {
  font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.shot figcaption { margin-top: 12px; font-size: .86rem; color: var(--muted); text-align: center; }

/* The two company profiles — the note that closes the article */
.company-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.company-panel {
  background: var(--cloud); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 32px);
}
.company-panel__head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.company-panel__logo { max-width: 180px; max-height: 54px; width: auto; height: auto; }
.company-panel__logo--text {
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .1em; color: var(--navy);
}
.company-panel__head h3 { margin: 0; }
.company-panel p { font-size: .92rem; color: var(--slate); }

.fact-list { display: grid; gap: 7px; margin: 14px 0 16px; }
.fact-list li {
  position: relative; padding-left: 22px; font-size: .9rem; color: var(--slate); line-height: 1.45;
}
.fact-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 2px; border-radius: 2px; background: var(--amber);
}

/* Closing CTA — reuses the contact panel's overhang of the footer */
/* One column, so the panel's two-column gap would space the lines apart —
   the rhythm comes from the elements' own margins instead. */
.contact-panel--cta {
  grid-template-columns: 1fr; gap: 0;
  text-align: center; justify-items: center;
  max-width: 780px; margin-inline: auto;
}
.contact-panel--cta .eyebrow { justify-content: center; }
.contact-panel--cta h2 { margin-bottom: .55em; }
.contact-panel--cta p { max-width: 62ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 30px; }

@media (max-width: 1080px) {
  .case-facts { grid-template-columns: repeat(2, 1fr); }
  .case-teaser__inner { grid-template-columns: 1fr; }
  .case-hero__grid { grid-template-columns: 1fr; }
  .customer-card { justify-items: start; text-align: left; }
}

@media (max-width: 860px) {
  .case-teaser__text .btn { width: 100%; }
  .company-grid { grid-template-columns: 1fr; }
  /* the timeline turns into two rows; the connecting line only reads on one */
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 22px 24px; }
  .timeline::before { display: none; }
}

@media (max-width: 620px) {
  /* Below this the measure is too narrow to read around a float: 60% of it is
     not a line, it is a column of two words. The photo goes back to a block. */
  .shot--photo { float: none; width: auto; max-width: 300px; margin: 20px auto 24px; }
  .shot--photo figcaption { text-align: center; }
  .case-facts { grid-template-columns: 1fr; }
  .case-teaser__stats { grid-template-columns: 1fr; }
  .cta-actions .btn { width: 100%; }
  .timeline { grid-template-columns: 1fr; }
  .article-block p, .article-list li { font-size: 1rem; }
}

/* ── 9. Print — the case page doubles as a PDF ─────────────────────────── */
@media print {
  /* The sheet margin is ours, not the browser's. A zero @page margin also stops
     Chrome, Edge and Firefox printing their own header and footer (the URL,
     the date, the page number) into that space — in Chrome the "Headers and
     footers" checkbox can still force them back on. */
  @page { margin: 0; }

  html { scroll-behavior: auto; }
  body {
    font-size: 9.5pt; line-height: 1.45; color: #000; background: #fff;
    padding: 12mm 14mm;
  }

  /* The shell's gutter would indent the hero past the article text below it —
     on paper the body padding is the only margin, so everything starts on one
     left edge. */
  .shell { max-width: none; padding-inline: 0; }

  /* The PDF is a document to hand over, not a draft to save toner on: the
     brand colours print as they look on screen. Browsers drop backgrounds in
     print unless they are told not to. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Interface, and anything that only makes sense on screen */
  .site-header, .nav-toggle, .skip-link, .case-hero__back, .contact-form,
  .shot--pending, .shot--screen, .cta-actions { display: none !important; }

  /* On paper the hero is a coloured band, not footage: a paused frame prints
     muddy behind the headline and the scrim would only darken it further. */
  .case-hero__video, .case-hero__scrim { display: none !important; }

  /* The coloured bands run to the edge of the sheet, cancelling the body's
     margin and putting it back as their own padding. */
  .case-hero, .page-case .case-hero {
    margin: -12mm -14mm 0 !important;
    padding: 14mm 14mm 10mm !important;
  }
  /* two classes, so this outranks the .article-block padding set further down —
     equal specificity would let that one win on source order and the band would
     lose its side padding */
  .article-block.article-block--band {
    margin-inline: -14mm;
    padding: 10pt 14mm !important;
  }
  .site-footer {
    margin: 0 -14mm -12mm; padding: 10pt 14mm 10mm !important;
  }

  /* Paper is a narrower column than the screen, and it has no scroll: the type
     comes down a size and the air between blocks comes out. */
  h1 { font-size: 20pt; }
  .article-block h2 { font-size: 13pt !important; }
  .article-block h3 { font-size: 10pt; margin-top: 1.2em; }
  .article-block p, .article-list li { font-size: 9.5pt !important; line-height: 1.45; }
  .lead, .case-hero__lead, .standfirst { font-size: 10pt !important; max-width: none; }
  .eyebrow { font-size: 7pt; margin-bottom: 5pt; }

  /* An A4 column is narrower than the tablet breakpoint, so the grids would
     collapse to one column and double the paper. On paper they keep them. */
  .company-grid { grid-template-columns: 1fr 1fr !important; }
  .case-facts { grid-template-columns: repeat(4, 1fr) !important; }
  .case-hero__grid { grid-template-columns: 1.4fr .6fr !important; }
  .timeline { grid-template-columns: repeat(4, 1fr) !important; gap: 12pt; }
  .timeline::before { display: block !important; top: 3pt; }
  .tl { padding-top: 13pt; }
  .tl__dot { width: 7pt; height: 7pt; border-width: 2pt; }
  .tl p, .company-panel p, .fact-list li { font-size: 8.6pt; }

  /* The measure is set by the paper, not by the layout */
  .measure, .pullquote { max-width: none; padding-inline: 0; }
  .article-block { padding: 8pt 0 !important; }
  .article-block--band { margin-block: 0; border-block: 1px solid #c9d3dd !important; }

  .pullquote { margin-top: 10pt; }
  .pullquote blockquote { font-size: 11pt; margin-bottom: 7pt; }
  .pullquote__pending { font-size: 9pt; margin-bottom: 7pt; }
  .pullquote figcaption { font-size: 8pt; }
  .avatar--sm { width: 20pt; height: 20pt; border-radius: 6pt; font-size: 6pt; }
  .avatar--logo { width: auto; min-width: 20pt; padding: 2pt 5pt; box-shadow: none; }
  .avatar--logo img { max-width: 46pt; max-height: 14pt; }

  .company-panel { padding: 9pt 11pt; border-radius: 4pt; }
  .company-panel__head { padding-bottom: 6pt; margin-bottom: 7pt; }
  .company-panel__logo { max-height: 22pt; }
  .company-panel__logo--text { font-size: 11pt; }
  .fact-list { gap: 3pt; margin: 6pt 0 4pt; }

  .case-hero__grid { gap: 12pt; }
  .case-facts { margin-top: 9pt; }
  .case-facts li { padding: 6pt 8pt; gap: 2pt; }
  .case-fact__label { font-size: 6.8pt; }
  .case-fact__value { font-size: 9pt; }
  .customer-card { padding: 8pt; gap: 6pt; }
  .customer-logo--text { font-size: 16pt; }
  .customer-card__note { font-size: 8pt; }

  .shot { margin-top: 8pt; }
  .shot img { max-height: 70mm; width: auto; margin-inline: auto; object-fit: contain; }
  /* On paper the float earns its keep — a 45mm photo beside the text costs no
     vertical space, and the case has an A4 page to stay inside. */
  .shot--photo { width: 45mm; margin: 0 0 6pt 6mm; }
  .shot--photo img { max-height: none; }
  .shot figcaption { margin-top: 4pt; font-size: 8pt; }

  .btn { padding: 5pt 11pt; font-size: 8.6pt; }

  .section, .case-teaser, .contact-band, .page-case .contact-band {
    padding: 10pt 0 !important;
  }
  /* the panel keeps its gradient, but stops hanging into the footer */
  .contact-panel { margin-bottom: 0 !important; padding: 14pt 16pt !important; }

  /* The footer closes the document with the contact details. Its navigation
     columns are dead links on paper; the brand and the contact block stay. */
  .site-footer__inner {
    display: flex; gap: 18pt; padding-bottom: 6pt; align-items: flex-start;
  }
  .site-footer__logo { height: 34pt; margin-bottom: 8pt; }
  .site-footer__brand p { font-size: 8pt; }
  nav.site-footer__col { display: none; }
  .site-footer__col { display: flex; flex-wrap: wrap; gap: 3pt 12pt; align-items: baseline; }
  .site-footer__col h4 { margin: 0; }
  .site-footer__bar { padding-top: 6pt; padding-bottom: 0; font-size: 7.4pt; }

  /* Keep a quote, a milestone or a company note on one page */
  .pullquote, .company-panel, .tl, .shot, .step { break-inside: avoid; }
  h2, h3 { break-after: avoid; }

  a { color: #000; text-decoration: none; }
}

/* ── 10. Motion ────────────────────────────────────────────────────────── */
/* Content is never hidden on load — no scroll-triggered reveals. The only
   motion is the ambient hero background and hover/focus feedback. */

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