/* =================================================================
   JSM Brand Exposure — Homepage rebuild
   Plain CSS. Design tokens first, then base, layout, components,
   then sections top-to-bottom.
   ================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Neulis Sans";
  src: url("../assets/fonts/NeulisSans-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("../assets/fonts/NeulisSans-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("../assets/fonts/NeulisSans-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("../assets/fonts/NeulisSans-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("../assets/fonts/NeulisSans-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("../assets/fonts/NeulisSans-ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neulis Sans";
  src: url("../assets/fonts/NeulisSans-Black.otf") format("opentype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (sampled from the approved design) */
  --orange:      #f6692f;
  --orange-dark: #e2551c;
  --blue:        #94c1ff;   /* CTA-bar highlight (cut costs / boost ROI / 'Excellent') */
  --lime:        #cfe948;
  --navy:        #050532;   /* deep footer / hero base */
  --navy-2:      #0c0a2e;
  --ink:         #201f2f;   /* headings */
  --body:        #111111;   /* body copy (black) */
  --body-light:  #c7c7d6;   /* body copy on dark */
  --line:        #e8e8ef;
  --bg:          #ffffff;
  --bg-soft:     #eef3fc;   /* pale blue section bg */
  --bg-grey:     #f6f7fa;

  /* Type scale (fluid) */
  --h1: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem);
  --h2: clamp(2rem, 1.4rem + 2.4vw, 3.3rem);
  --h3: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --h4: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --eyebrow: 0.8rem;

  /* Layout */
  --container: 1500px;
  --container-header: 1440px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 6vw, 6.5rem);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 24px 60px -28px rgba(16, 16, 60, 0.35);
  --shadow-card: 0 18px 44px -26px rgba(16, 16, 60, 0.28);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Neulis Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: var(--body);
  background: var(--bg);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
/* Balance body paragraphs sitewide so they don't end in a single-word orphan line. */
p { text-wrap: balance; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  /* Equal line rule: balance multi-line headings so each line is roughly
     the same length (e.g. wraps "business" onto the next line). */
  text-wrap: balance;
}
h1 { font-size: var(--h1); font-weight: 700; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
.accent  { color: var(--orange); }
.accent-blue { color: var(--blue); }
.accent-green { color: #00c3a2; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
/* Offset anchor-jumps so the fixed header doesn't cover the target. */
section[id] { scroll-margin-top: 100px; }
.section--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
/* Halve the vertical gap between two adjacent sections. */
.section--tight-bottom { padding-bottom: calc(var(--section-y) / 2); }
.section--tight-top { padding-top: calc(var(--section-y) / 2); }

/* Small bold label above a section heading (e.g. case study "Executive
   summary") — sentence case, not the uppercase/orange kicker style. */
.eyebrow {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .5rem;
}
.section-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); text-align: center; }
/* Brands intro copy needs more room for its longer paragraph (+50% over the default 760px). */
#brands .section-head { max-width: 1140px; }
/* Pull the Brands section 75px closer to the promise section above it, and
   tighten the gap below it (above the leader-quote divider) by 25px. */
#brands { padding-top: calc(var(--section-y) - 75px); padding-bottom: calc(var(--section-y) - 25px); }
/* Add extra clearance above the final project CTA on the About page. */
#project-cta-about { margin-top: 75px; }
/* Add extra clearance above the project CTA on the Solutions page. */
#project-cta-solutions { margin-top: 40px; }
/* Pull the "Committed to quality" heading 65px closer to the section above it. */
#committed-to-quality { padding-top: calc(var(--section-y) - 65px); }
/* Pull the "Merch for every business department" heading 100px closer to the section above it.
   max(0px, …) since --section-y can be smaller than 100px at narrower viewports — a bare
   calc() would go negative there, which is invalid and silently falls back to the un-pulled value. */
#solutions { padding-top: max(0px, calc(var(--section-y) - 100px)); }
/* Pull the "In-house manufacturing" heading 35px closer to the solutions slider above it. */
#what-we-do { padding-top: max(0px, calc(var(--section-y) - 35px)); }
.section-head p { margin-top: 1rem; font-size: var(--lead); }
.lead { font-size: var(--lead); color: var(--body); }
/* Equal line rule applied to subheadings / lead copy too. */
.section-head p, .lead { text-wrap: balance; }

/* ---------- Legal / policy pages (Terms, Cookie Policy, Privacy Policy) ---------- */
.legal-content { max-width: 900px; margin: 0 auto; }
.legal-content > * + * { margin-top: 1.4rem; }
.legal-content h2 { font-size: 1.6rem; margin-top: 2.6rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.2rem; margin-top: 2rem; }
.legal-content p, .legal-content li { color: var(--body); line-height: 1.7; }
.legal-content a { color: var(--orange); text-decoration: underline; }
.legal-content strong { color: var(--ink); }
.legal-updated { color: var(--body); font-size: .9rem; margin-bottom: 2rem; display: block; }
.legal-content .legal-num { color: var(--orange); font-weight: 700; }

/* Standard (round) bullets, recoloured orange and indented — used for the plain
   <ul> lists (privacy policy's "In short" / rights / opt-out lists, etc). */
.legal-content ul {
  padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem;
  list-style: none;
}
.legal-content ul li { position: relative; padding-left: 1.7rem; }
.legal-content ul li::before {
  content: "\2022"; position: absolute; left: .3rem; color: var(--orange); font-weight: 700;
}

/* Numbered bullets, recoloured orange and indented — used for the terms clauses,
   the privacy policy table of contents, and any other ordered list. */
.legal-content ol {
  padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem;
  list-style: none; counter-reset: legal-item;
}
.legal-content ol li { position: relative; padding-left: 2.4rem; counter-increment: legal-item; }
.legal-content ol li::before {
  content: counter(legal-item) "."; position: absolute; left: 0; color: var(--orange); font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.71rem 1.2rem;
  border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); }

/* CTA pair: pill + arrow circle */
.cta-row { display: inline-flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.arrow-circle {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid #fff;
  color: var(--ink);
  background: transparent; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s, border-color .2s;
  flex: none;
}
.arrow-circle svg { width: 18px; height: 18px; }
.arrow-circle:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); }
.arrow-circle--lime { border-color: var(--lime); color: var(--lime); }
.arrow-circle--lime:hover { background: var(--lime); color: var(--navy); }
/* Icon circles and ghost buttons on light/white sections use a black border
   for contrast (:not(:hover) so the orange hover state is preserved). */
.split .arrow-circle:not(:hover),
.cases-actions .arrow-circle:not(:hover),
.project-cta .arrow-circle:not(:hover),
.testi-controls .arrow-circle:not(:hover),
.sslider-nav .arrow-circle:not(:hover),
.feature-row ~ .cta-row .arrow-circle:not(:hover),
.promise--simple .arrow-circle:not(:hover),
.split .btn--ghost,
.feature-row ~ .cta-row .btn--ghost,
.promise--simple .btn--ghost { border-color: #000; color: #000; }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--orange);
}
.text-link svg { width: 16px; height: 16px; transition: transform .2s; }
.text-link:hover svg { transform: translateX(4px); }

/* =================================================================
   HEADER
   ================================================================= */
.site-header {
  /* Absolute (not fixed) — overlays the hero's own gradient at the top of the
     page so the two look like one continuous background, but still scrolls
     away normally with the page instead of sticking. */
  position: absolute; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.header-bar--top { padding-block: 1.1rem; }
.header-bar--top .container,
.header-bar--bottom .container {
  max-width: var(--container-header);
}
.header-bar--top .container {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.site-header .logo img { height: 51px; width: auto; }
/* Bottom bar's background spans the full viewport width; its .container
   keeps the nav (and the separator rule above it) aligned with the
   logo/arrow-circle edges above. */
.header-bar--bottom .container { border-top: 1.5px solid #fff; padding-block: .85rem; }
.main-nav { width: 100%; }
.main-nav > ul { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2.2vw, 2.2rem); }
.main-nav a, .nav-toggle-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: #fff; font-weight: 600; font-size: .95rem;
  padding-block: .4rem;
}
.main-nav .has-menu > a::after {
  content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--orange);
  border-bottom: 1.5px solid var(--orange); transform: rotate(45deg) translateY(-2px);
}
/* Hover + current page highlight. */
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: #E9FF5D; }
/* ---- Nav dropdown ---- */
.main-nav .has-menu { position: relative; }
.main-nav .submenu { list-style: none; }
.main-nav .has-menu > .submenu {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  display: flex; flex-direction: column; gap: 2px;
  background: #0c0a2e; border: 0;
  border-top: 3px solid var(--orange);   /* orange stroke curving around the top */
  border-radius: 26px; padding: .55rem; margin-top: .35rem;
  box-shadow: 0 26px 54px -26px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 200;
}
/* Invisible hover bridge so the menu doesn't close in the gap. */
.main-nav .has-menu::before {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: .6rem;
}
.main-nav .has-menu:hover > .submenu,
.main-nav .has-menu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .submenu a { padding: .55rem .85rem; border-radius: 9px; font-size: .92rem;
  white-space: nowrap; width: 100%; color: #fff; }
.main-nav .submenu a::after { content: none; }
.main-nav .submenu a:hover { background: rgba(255,255,255,.1); color: #E9FF5D; }
.main-nav .submenu a[aria-current="page"] { color: #E9FF5D; }
.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-actions .arrow-circle { border-color: #fff; color: #fff; }

/* "Our products" nav item: text + small lime icon circle, as a CTA-style
   link rather than a dropdown trigger. */
.main-nav .nav-cta { gap: .6rem; }
.main-nav .nav-cta .arrow-circle { width: 26px; height: 26px; border-width: 2.25px; }
.main-nav .nav-cta .arrow-circle svg { width: 12px; height: 12px; stroke-width: 3; }

/* Slight shrink + shadow once scrolled past the top. */
.site-header.scrolled {
  box-shadow: 0 10px 30px -18px rgba(16,16,60,.4);
}
.site-header.scrolled .header-bar--top { padding-block: .7rem; }
.site-header.scrolled .header-bar--bottom .container { padding-block: .6rem; }
/* Logo always white (orange variant only used if ever needed). */
.site-header .logo .logo-org { display: none; }

/* mobile toggle */
.nav-toggle {
  display: none; background: none; border: 0; width: 44px; height: 44px;
  color: #fff;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 24px; height: 3px; background: currentColor;
  position: relative; transition: .25s;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after  { position: absolute; top: 7px; }

/* =================================================================
   HERO
   ================================================================= */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  /* Default page-banner backdrop. Homepage covers this with its own
     .hero-bg parallax layer; .hero--eco (sustainability) and
     .case-study-hero both override it below with their own background. */
  background: url("../assets/img/page-hero-bg.jpg") center center / cover no-repeat;
}
/* Backdrop lives on its own oversized layer (rather than .hero's background)
   so scroll parallax can translate it with a transform — cheap/GPU-friendly,
   unlike animating background-position. Overshoots top/bottom so the parallax
   travel never exposes an edge; cover: fits width by default, but never lets
   the top-to-bottom fill fall short either — whichever axis needs more
   scaling wins, so the gradient always covers the full section height. */
.hero-bg {
  position: absolute;
  inset: -16.7% -7.5%;
  height: 133.4%;
  background: url("../assets/img/hero-parallax-bg 3.jpg") center center / cover no-repeat;
  will-change: transform;
  z-index: 0;
}
.hero .container {
  position: relative; z-index: 1;
  padding-top: clamp(8rem, 12vw, 11rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
  display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 1rem;
}
.hero h1 { color: #fff; font-weight: 700; max-width: 12ch; margin-top: 65px; margin-bottom: 1.4rem; }
.hero h1 .accent { color: #E9FF5D; font-weight: 700; }
.hero p { color: #fff; font-size: var(--lead); max-width: 46ch; margin-bottom: 2rem; }
.hero .cta-row .arrow-circle { border-color: #fff; color: #fff; }
.hero .cta-row .arrow-circle:hover { background:#fff; color: var(--navy); border-color:#fff; }
/* Decorative product cluster (bottle, earbuds case, phone) — three separate
   layers at slightly different scroll-parallax rates instead of one flattened
   image, for a subtle sense of depth. Positioned to match where each product
   sits in the original flattened artwork. Hidden below tablet where there's
   no room for it beside the copy without forcing the text to shrink. */
.hero-media { position: relative; justify-self: end; align-self: center; width: 100%; max-width: 744px; aspect-ratio: 1800 / 1654; }
.hero-layer { position: absolute; width: 100%; will-change: transform; }
.hero-layer img { width: 100%; height: auto; display: block; }
/* Static per-layer nudges live on the <img>, not the .hero-layer div — the
   scroll-parallax script (main.js) sets an inline transform: translateY(...)
   directly on .hero-layer on load and on scroll, which would otherwise wipe
   out any transform set here via the stylesheet. Each product also drifts
   continuously along its own small loop (independent of scroll) via the
   float-* keyframes below — the base offset is baked into each keyframe
   step since the animation drives the img's whole transform. Durations and
   negative delays are staggered per product so the three don't move in sync. */
/* left uses calc(...+30px) rather than a transform on .hero-layer itself —
   main.js sets an inline transform on .hero-layer on load/scroll (parallax
   translateY/rotate/scale), which would immediately overwrite any transform
   set here via the stylesheet. calc() on left shifts the whole layer (img,
   .hero-shop trigger, and .hero-shop__tip together) without touching a
   property JS ever writes to. */
.hero-layer--bottle { width: 25%; left: calc(33% + 30px); top: 18%; z-index: 1; }
.hero-layer--bottle img { animation: float-bottle 9s ease-in-out infinite; animation-delay: -3s; }
.hero-layer--headphones { width: 17%; left: calc(47% + 30px); top: 9.5%; z-index: 2; }
.hero-layer--headphones img { animation: float-headphones 7s ease-in-out infinite; animation-delay: -1.5s; }
.hero-layer--phone { width: 23%; left: calc(56.5% + 30px); top: 19%; z-index: 3; }
.hero-layer--phone img { animation: float-phone 8s ease-in-out infinite; animation-delay: -4s; }
@keyframes float-bottle {
  0%   { transform: translateX(-65px) translateY(0) rotate(-40deg); }
  25%  { transform: translateX(-61px) translateY(-7px) rotate(-39deg); }
  50%  { transform: translateX(-65px) translateY(-10px) rotate(-40deg); }
  75%  { transform: translateX(-69px) translateY(-4px) rotate(-41deg); }
  100% { transform: translateX(-65px) translateY(0) rotate(-40deg); }
}
@keyframes float-headphones {
  0%   { transform: translateX(-97px) translateY(10px); }
  33%  { transform: translateX(-93px) translateY(3px); }
  66%  { transform: translateX(-100px) translateY(4px); }
  100% { transform: translateX(-97px) translateY(10px); }
}
@keyframes float-phone {
  0%   { transform: translateX(-65px) translateY(0); }
  50%  { transform: translateX(-65px) translateY(-8px); }
  100% { transform: translateX(-65px) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layer--bottle img, .hero-layer--headphones img, .hero-layer--phone img { animation: none; }
}
/* "Shop this product" hover window on each hero product. The invisible
   .hero-shop trigger is cropped/rotated to roughly hug each product's own
   silhouette (not just the whole layer's rectangle — sized from the PNGs'
   actual alpha bounds) rather than sitting on the product, at the position
   marked out in the hero motion-reference sketch. Two separate links share
   one href: .hero-shop is the shaped mouse/touch hover+click target (hidden
   from a11y tree since it has no visible content of its own) and
   .hero-shop__tip is the one real, keyboard-reachable link — it's the
   visible window and reveals itself on its own :focus-visible too. */
.hero-shop { position: absolute; z-index: 5; cursor: pointer; }
/* Each inset box is matched to its <img>'s static CSS nudge (translateX/Y,
   rotate) below so the trigger tracks the actual rendered product instead of
   the pre-offset layer box. */
.hero-layer--bottle .hero-shop { top: 3%; right: 5%; bottom: 2%; left: 4%; transform: translateX(-65px) rotate(-40deg); }
.hero-layer--headphones .hero-shop { top: 3%; right: 5%; bottom: 4%; left: 5%; transform: translateX(-97px) translateY(10px); }
.hero-layer--phone .hero-shop { top: 2%; right: 3%; bottom: 2%; left: 4%; transform: translateX(-65px); }
.hero-shop__tip {
  position: absolute; top: -14%; left: 50%; z-index: 6; text-decoration: none;
  background: #190b25; color: #fff; border: 1.5px solid #fff;
  font-size: .95rem; font-weight: 700; line-height: 1.25;
  padding: .75rem 1.1rem; border-radius: 14px; width: max-content; max-width: 180px; text-align: center;
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.6);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(6px) scale(.92);
  transition: opacity .2s, transform .2s;
}
/* The shared -14%/50% offsets assume a layer box the product roughly fills
   center-to-center — false for the bottle, whose -40deg rotation puts its
   cap at the layer's upper-left and base at the lower-right, with the
   logo/label sitting around the mid-body (~40-45% across, ~49-53% down the
   layer, after accounting for the rotate+translateX on the img). That mid-
   body point also happens to sit below the headphones' visible bottom edge,
   so it's naturally clear of the headphones layer without needing extra
   horizontal correction the way the cap position (higher up) did. */
.hero-shop__tip--bottle { top: calc(44% - 70px); left: calc(40% - 50px); }
.hero-layer:has(.hero-shop:hover) .hero-shop__tip,
.hero-layer:has(.hero-shop:focus-visible) .hero-shop__tip,
.hero-shop__tip:hover, .hero-shop__tip:focus-visible {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0) scale(1);
}
@media (max-width: 1024px) {
  /* Below desktop there's no room for the media cluster beside the copy, so
     instead of hiding it (as before), stack copy then media in one column
     and let the section grow to fit — swapping in a background shot at a
     taller aspect ratio, built for this narrower/taller viewport. */
  /* 130vh was leaving a large empty gap below the product cluster before the
     next section starts (the copy+media content doesn't naturally reach
     that height on tablet) — cut roughly in half. Mobile keeps its own
     calc(130vh - 300px) override further down, unaffected by this value.
     Homepage only (.hero--home) — the parallax product cluster is what
     needs this extra room; every other page's .hero (hero--center,
     notebook-hero, post-hero-band, etc.) was inheriting this unnecessarily
     and ended up with a large empty gap below its text-only content. */
  .hero--home { min-height: 115vh; }
  /* hero-bg-mobile.jpg was extended with extra gradient below the box
     specifically so this can bias toward the bottom of the image instead of
     center — that crops from the top (mostly empty gradient) rather than
     symmetrically off both ends, which is what pulls the box up into view
     instead of it sitting low/half-cropped in the frame. Backed off from a
     full "bottom" anchor (100%) to 55% so more of the image's bottom edge
     itself gets cropped away too (tablet only — mobile has its own 40%
     override further down). */
  .hero-bg { background-image: url("../assets/img/hero-bg-mobile.jpg"); background-position: center 55%; }
  .hero .container { grid-template-columns: 1fr; }
  .hero h1 { margin-top: 15px; }
  .hero-media { display: block; position: relative; margin: 3rem auto 0; max-width: min(480px, 90%); }
  /* The trigger/tip pixel offsets above are tuned against the ~744px desktop
     cluster; at mobile's much smaller rendered size they'd drift badly, and
     there's no hover state to reveal them on touch anyway. Tapping a product
     still navigates straight through .hero-shop, so drop the floating CTA
     box here rather than risk a misaligned/overlapping mess — but visually
     hide it (not display:none), since .hero-shop__tip is the one real,
     keyboard/screen-reader-reachable link (.hero-shop is aria-hidden,
     tabindex="-1" — a decorative mouse/touch hit-shape only). display:none
     would drop the link from the tab order and a11y tree entirely, leaving
     keyboard/AT users with no way to reach it here at all. */
  .hero-shop__tip {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}
/* Phone only (tablet keeps the 130vh set above) — pull the bottom of the
   hero up 300px, since the stacked copy+media content doesn't need quite as
   much room at this width. */
@media (max-width: 600px) {
  .hero--home { min-height: calc(130vh - 300px); }
  /* The mobile hero-bg's own "cover" sizing is width-based at this aspect
     ratio (image is proportionally narrower/taller than the phone hero box),
     so scaling the WIDTH to 130% with height:auto (preserving the image's
     aspect ratio) scales the whole graphic — box included — up by the same
     130%, still centered via the background-position set above. */
  .hero-bg { background-size: 130% auto; }
  /* Nudge back down from the tablet+mobile "center bottom" set above —
     mobile-only override, tablet keeps that bottom anchor as-is. */
  .hero-bg { background-position: center 40%; }
}

/* Simple "close" cross shown top-right of a hero — used on detail-style pages
   (case studies, blog posts) to return to their listing page. */
/* Tracks the header container's right edge (same edge the arrow-circle button
   sits on) instead of a fixed px-from-viewport offset, so it stays under the
   nav rather than drifting mid-hero as the window is resized. */
.hero-close { position: absolute; top: clamp(9rem, 11vw, 10rem);
  right: max(var(--gutter), calc((100vw - var(--container-header)) / 2 + var(--gutter)));
  z-index: 5; width: 84px; height: 84px; display:grid; place-items:center; color:#fff;
  transition: color .2s; }
.hero-close svg { width: 44px; height: 44px; }
.hero-close:hover { color: var(--orange); }

.reviews-bar .review-rating { height: 28px; width: auto; }

/* Centred, text-only hero variant (e.g. Solutions page). */
.hero--center .container { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero--center .hero-copy { max-width: 820px; }
.hero--center h1, .hero--center p { max-width: none; margin-inline: auto; }
.hero--center .cta-row { justify-content: center; }

/* Cut-costs banner overlapping the hero bottom */
.banner-wrap { position: relative; z-index: 5; margin-top: -2.5rem; }
.cut-banner {
  background: #0c0a1f;
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.cut-banner h3 { color:#fff; font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
.cut-banner .right { display: flex; align-items: center; gap: 1rem; font-weight: 600; }
.cut-banner .right .label { text-align: right; white-space: nowrap; font-weight: 700; font-size: 22px; }

/* =================================================================
   CLIENT LOGOS (marquee)
   ================================================================= */
.clients { text-align: center; }
.clients h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: clamp(2rem,4vw,3rem); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 0.8rem; }
/* Duration is set per-row in JS so every row scrolls at the same px/sec
   regardless of logo count; 55s here is just a fallback before JS runs.
   Base direction is reversed (L→R) so the default/top/single-line rows
   scroll left-to-right; .marquee--reverse (bottom row of a 2-line pair)
   flips back to normal (R→L). */
.marquee-track { display: flex; width: max-content; will-change: transform;
                 animation: scroll-x 55s linear infinite reverse; }
.marquee--reverse .marquee-track { animation-direction: normal; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Two identical groups; each carries a trailing gap (padding-right) so a
   -50% translate equals exactly one group width = a seamless, glitch-free loop. */
.marquee-group { display: flex; align-items: center;
                 gap: clamp(3rem, 6vw, 5.5rem); padding-right: clamp(3rem, 6vw, 5.5rem); }
.marquee-track img { height: 156px; width: auto; transition: transform .2s; }
.marquee-track img:hover { transform: scale(1.06); }
@keyframes scroll-x { to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .marquee-track img { height: 78px; }
  .marquee-group { gap: clamp(1.5rem, 3vw, 2.75rem); padding-right: clamp(1.5rem, 3vw, 2.75rem); }
}

/* =================================================================
   SOLUTIONS BY ROLE (cards)
   ================================================================= */
.role-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem;
}
.role-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.6rem 1.1rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: transparent; }
.role-card .icon { width: 56px; height: 56px; display: grid; place-items: center;
  background: #fff4ef; border-radius: 14px; }
.role-card .icon img { width: 30px; height: 30px; }
.role-card h4 { font-size: 1rem; color: var(--ink); }

/* =================================================================
   SOLUTION SLIDER
   ================================================================= */
.solution-slider { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sslider-tabs { display: flex; gap: clamp(1.25rem,3vw,2.5rem); justify-content: space-between; flex-wrap: wrap;
                border-bottom: 2px solid var(--line); margin-bottom: 2.6rem; }
.sslider-tabs button {
  background: none; border: 0; padding: .9rem 0 1.4rem; color: var(--body); font-weight: 600;
  display: inline-flex; align-items: center; gap: .65rem; position: relative; font-size: 1.2rem;
}
/* Inactive tabs show the black-outline icon; the active tab swaps to the
   colour icon and turns its word orange. */
.sslider-tabs button img { width: 28px; height: 28px; }
.sslider-tabs button .ico-col { display: none; }
.sslider-tabs button.active .ico-blk { display: none; }
.sslider-tabs button.active .ico-col { display: inline-block; }
.sslider-tabs button.active { color: var(--orange); }
.sslider-tabs button.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background: var(--orange); border-radius:3px;
}
.sslide {
  display: none;
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: url("../assets/img/slider/slider-grads-01.jpg") center / cover no-repeat;
  padding: clamp(1.5rem,3vw,2.5rem) clamp(2rem,5vw,3.5rem);
  min-height: 0;
  align-items: center;
}
/* Alternate gradient on every other slide. */
.sslide--alt { background-image: url("../assets/img/slider/slider-grads-02.jpg"); }
.sslide.active { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.sslide .copy h3 { font-size: 62px; margin-bottom: 1rem; }
.sslide .copy h3 .accent { display:block; }
.sslide .copy p { max-width: 42ch; margin-bottom: 1.6rem; }
/* Tight-cropped square product images sit large in the frame and bleed into
   the slide's vertical padding, so they fill the module without growing it. */
.sslide .visual { align-self: center; display: flex; align-items: center; justify-content: center; }
.sslide .visual img {
  width: auto; height: auto; max-width: 100%; max-height: 480px; object-fit: contain;
  margin-block: calc(-1 * clamp(1.5rem,3vw,2.5rem));
}
.sslider-nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.6rem; }
.sslider-dots { display: flex; align-items: center; gap: .5rem; justify-content: center; }
.sslider-dots span { width: 9px; height: 9px; border-radius: 999px; background: #f0c4b3; transition: .2s; }
.sslider-dots span.active { width: 26px; background: var(--orange); }

/* =================================================================
   MEDIA / TEXT split sections (decoration, webshop, brands, why-jsm)
   ================================================================= */
.split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}
/* Image side alternates: .split = image right, .split--reverse = image left.
   Order-based so it's independent of HTML source order. */
.split .copy { order: 1; }
.split .media { order: 2; }
.split--reverse .copy { order: 2; }
.split--reverse .media { order: 1; }
/* Pin the split section titles to roughly three balanced lines. */
.split .copy h2 { margin-bottom: 1.3rem; max-width: 22ch; }
/* Shorter titles need a tighter measure to balance across three lines. */
.split .copy h2.balance-3 { max-width: 19ch; }
/* Pale green band for the sustainability split section. */
.section--eco { background: #e9f1e7; }
.split .copy p + p { margin-top: 1rem; }
.split .copy .cta-row { margin-top: 2rem; }
.split .media img { width: 100%; border-radius: var(--radius); }
.split .media.rounded img { border-radius: var(--radius); }
/* Square crop for the in-house print photo. */
.split .media--square img { aspect-ratio: 1 / 1; object-fit: cover; }
/* Bare image (transparent PNG product render) — no shadow or rounding. */
.split .media--bare img { box-shadow: none; border-radius: 0; }
/* Show the full image without cropping the sides. */
.split .media--contain img { object-fit: contain; }

/* ---------- Top brands grid ---------- */
.brand-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
.brand-card { aspect-ratio:1; border-radius:20px; display:grid; place-items:center;
  padding:1.4rem; cursor:pointer;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.brand-card img { max-width:78%; max-height:54px; width:auto; filter: brightness(0) invert(1);
  transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.brand-card--light img { filter:none; }            /* Stanley: dark logo on light tile */
.brand-card img[alt="Helly Hansen"] { transform: translateX(10px); }  /* nudge right */

/* Intro animation: tiles fade + scale up into place when scrolled into view,
   cascading diagonally (top-left first → bottom-right last) via per-tile
   delay set in JS. */
.brand-card { opacity:0; transform: scale(.8); transform-origin:center; }
.brand-grid.is-visible .brand-card { opacity:1; transform: scale(1); }
.brand-grid.is-visible .brand-card {
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }

/* Hover state: lift the tile, pop the logo, add depth. */
.brand-card:hover { transform: translateY(-6px); box-shadow:0 18px 36px -18px rgba(16,16,60,.55); }
.brand-card:hover img { transform: scale(1.08); }
.brand-card:hover img[alt="Helly Hansen"] { transform: translateX(10px) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .brand-card { opacity:1 !important; transform:none !important; transition:none; }
}

/* =================================================================
   SUSTAINABILITY PROMISE
   ================================================================= */
/* Full-bleed width with a small gutter so the rounded corners stay visible. */
.promise-wrap { padding-inline: var(--gutter); }
/* Outer box is the positioning context and is NOT clipped, so the bottle can
   overflow the rounded frame. */
.promise { position: relative; color: #fff; isolation: isolate; }
/* The card holds the video background + copy and clips them to rounded corners. */
.promise-card { position: relative; border-radius: clamp(16px, 2vw, 28px); overflow: hidden; }
.promise .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.promise-card::after { content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(90deg, rgba(8,18,10,.92) 0%, rgba(8,18,10,.6) 45%, rgba(8,18,10,.15) 100%); }
/* Left padding lines the content up with the .container edge of the sections
   above (those sit in a 1440px centred container). */
.promise .inner { padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(3rem, 7vw, 6rem) max(var(--gutter), calc((100vw - var(--container)) / 2)); display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.promise h2 { color:#fff; margin-bottom: 1.4rem; }
.promise h2 .accent { color:#E9FF5D; }
.promise .leaf-mark { width:48px; height:48px; margin-bottom: 1.2rem; }
.promise p { color: #fff; max-width: 46ch; }
.promise .copy p + p { margin-top: 1.1rem; }
.promise .cta-row { margin-top: 2rem; }
.promise .arrow-circle { color: #fff; }   /* white arrow on the dark panel */
/* Partner logos (already white) in a 2x2 grid below a stroke. */
/* Logos centred under the stroke, in two rows. */
.promise .certs { display:flex; flex-direction:column; align-items:center; gap:1.5rem;
  max-width:46ch; margin-top:1.8rem; padding-top:1.8rem; border-top:2px solid #fff; }
.promise .cert-row { display:flex; align-items:center; justify-content:center; gap:3rem; }
.promise .cert-row--tight { gap:1.2rem; }                 /* bottom 2 logos closer */
.promise .certs img { height:30px; width:auto; opacity:.95; }
.promise .certs img.cert-lg { height:39px; }              /* CleanHub 30% bigger */
.promise .certs img.cert-inv { filter: brightness(0) invert(1); height:40.5px; }  /* whiten + 35% bigger */
.promise .certs img.cert-race { height:50.6px; }          /* Race to Zero larger */

/* Pulsing image hotspots pinned to the bleed bottle image — wide desktop only
   (>1300px, see the RESPONSIVE section). Below that the card is too narrow for
   this absolute bleed treatment without cropping/squashing the bottle, so it
   switches to an in-flow stacked image + a plain static feature list instead. */
.promise .hotspots { position:absolute; inset:0; z-index:3; pointer-events:none;
  transform: translateX(-200px); }
.promise .hotspot { position:absolute; transform:translate(-50%,-50%);
  background:none; border:0; padding:0; pointer-events:auto; cursor:pointer; }
/* Lime ring dot with a hole in the middle — sized off --dot in em-like px so the
   hole and pulse ring scale with it instead of drifting off at smaller sizes. */
.promise .hotspot { --dot: clamp(13px, 1.1vw + 6px, 20px); }
.promise .hotspot .dot { display:grid; place-items:center; width:var(--dot); height:var(--dot); border-radius:50%;
  background:var(--lime); position:relative; box-shadow:0 0 0 5px rgba(207,233,72,.2); }
.promise .hotspot .dot::before { content:""; width:35%; height:35%; border-radius:50%; background:#0e3a2b; }
.promise .hotspot .dot::after { content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--lime); z-index:-1; animation: hotspot-pulse 2s ease-out infinite; }
@keyframes hotspot-pulse { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(3.2);opacity:0} }
/* Green window with white text, opening to the left of the dot. */
.promise .hotspot .tip { position:absolute; right:calc(100% + 16px); top:50%;
  transform:translateY(-50%) translateX(8px); background:#14583f; color:#fff;
  font-size:1rem; font-weight:700; line-height:1.25; padding:1rem 1.2rem; border-radius:16px;
  width:max-content; max-width:250px; box-shadow:0 18px 44px -20px rgba(0,0,0,.6);
  display:flex; align-items:center; gap:.7rem; text-align:left;
  opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; }
.promise .hotspot .tip img { width:32px; height:32px; flex:none; }
/* Open this window to the right of the dot instead of the left. */
.promise .hotspot--right .tip { right:auto; left:calc(100% + 16px); }
.promise .hotspot:hover .tip, .promise .hotspot:focus-visible .tip {
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
/* Bottle overflows the frame edges (top, bottom and slightly right). The div
   spans the card height so the image can be sized relative to it. Wide desktop
   only (>1300px) — see the RESPONSIVE section for why and what replaces it. */
.promise .bottle { position: absolute; top: 0; bottom: 0; left: 55%; right: 0;
  display: flex; align-items: center; justify-content: center; z-index: 2; pointer-events: none;
  transform: translateX(-200px); }
.promise .bottle img { height: 122%; width: auto; max-height: none; flex-shrink: 0;
  /* flex-shrink:0: this flex box (left:55%;right:0) is narrower than the image's
     flex-basis width, and without it flexbox shrinks the width alone — height
     stays at 122% — which visibly squashes/distorts the bottle instead of
     letting it crop against the card's overflow:hidden edge (the intended
     "bleed" look, per above). */
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.promise .bottle-stacked { display: none; position: relative; }
/* Below 1300px (see RESPONSIVE): same pins as the desktop .hotspots, positioned
   relative to this uncropped stacked image instead of the cropped bleed one —
   percentages here are tuned against the source image, not the bleed crop, so
   they don't match the desktop .hotspot inline styles directly. Always-on
   (no hover on touch) rather than pulsing-dot-reveals-on-hover like desktop. */
.promise .hotspots--stacked { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.promise .hotspots--stacked .tip {
  opacity: 1; visibility: visible; transform: translateY(-50%);
  max-width: 148px; font-size: .74rem; line-height: 1.2; padding: .5rem .7rem;
}
.promise .hotspots--stacked .hotspot--right .tip { transform: translateY(-50%); }

/* Simplified "Our promise" variant (About us): same rounded-card shape, but a
   plain centred message on a pale gradient instead of the video + hotspots. */
.promise--simple .promise-card {
  background: url("../assets/img/about/sustainable-grads-landscape-3-02.2.svg") center / cover no-repeat;
}
/* No dark video-darkening overlay needed on the pale gradient. */
.promise--simple .promise-card::after { content: none; }
.promise--simple .inner {
  display: block; text-align: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.5rem, 4vw, 3rem);
}
.promise--simple .copy { max-width: 840px; margin-inline: auto; }
.promise--simple .leaf-mark { width: 120px; height: 120px; margin-inline: auto; }
.promise--simple h2 { color: var(--ink); }
.promise--simple p { color: var(--body); max-width: none; margin-inline: auto; }
.promise--simple .cta-row { justify-content: center; }
.promise-simple-tote, .promise-simple-notebook {
  position: absolute; z-index: 2; filter: drop-shadow(0 20px 30px rgba(0,0,0,.2));
}
.promise-simple-tote {
  left: clamp(-2rem, -5vw, -1rem); bottom: clamp(-3.5rem, -7vw, -2rem);
  width: clamp(220px, 26vw, 460px); transform: rotate(-10deg);
}
.promise-simple-notebook {
  right: clamp(-1rem, -3vw, -0.5rem); top: clamp(-2.5rem, -5vw, -1.5rem);
  width: clamp(140px, 16vw, 280px); transform: rotate(10deg);
}

/* =================================================================
   STAT BADGE (30+ years over image)
   ================================================================= */
.media.stat { position: relative; }
.stat-badge {
  /* Sits at the bottom-left, straddling the picture's bottom edge (half over,
     half below). 25% smaller than the original sizing. */
  position: absolute; left: 2rem; bottom: 0; transform: translateY(50%);
  background: url("../assets/img/bg-3.jpg") center / cover no-repeat;
  color:#fff; padding: 1.2rem 1.95rem; border-radius: 16px; box-shadow: var(--shadow);
  text-align: center;
}
.stat-badge strong { display:block; font-size: clamp(1.2rem, 1.65vw, 1.58rem); font-weight: 800; line-height: 1.12; }
.stat-badge span { display:block; font-size: clamp(1.2rem, 1.65vw, 1.58rem); font-weight: 800; line-height: 1.12; color:#fff; }
/* Same badge anchored to the picture's bottom-right instead of bottom-left. */
.stat-badge--right { left: auto; right: 2rem; }
/* Homepage "Why JSM" badge only: stays bottom-left on desktop, but switches
   to the bottom-right corner on tablet/mobile once .split stacks to one
   column (same 860px breakpoint that stack switches on). */
@media (max-width: 860px) {
  .stat-badge--mobile-right { left: auto; right: 2rem; }
}
/* Caption variant: centered multi-line label (e.g. an event name). */
.stat-badge--caption { text-align: center; }
.stat-badge--caption strong { max-width: 15ch; margin-inline: auto; }

/* =================================================================
   OUR WORK / CASE STUDIES
   ================================================================= */
.cases-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.case-card {
  position: relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 1.1 / 1;
  background: radial-gradient(120% 120% at 70% 10%, #2a1550 0%, #0c0a2e 55%, #050532 100%);
  display:flex; align-items:flex-end; padding: clamp(1.5rem,3vw,2.2rem); color:#fff;
}
.case-card::after { content:""; position:absolute; inset:auto -10% -30% auto; width:60%; height:50%;
  background: radial-gradient(circle, rgba(246,105,47,.65), transparent 70%); z-index:0; }
.case-card .product { position:absolute; inset:0; display:grid; place-items:center; padding: 2rem; }
.case-card .product img { max-height: 70%; width:auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
.case-card .meta { position: relative; z-index:2; width: 100%; }
/* Photo case cards: image fills the card with a bottom gradient for the label. */
.case-card--photo { background:none; }
.case-card--photo .product { position:absolute; inset:0; padding:0; display:block; z-index:0; }
.case-card--photo .product img { max-height:none; width:100%; height:100%; object-fit:cover; filter:none;
  transition: transform .4s ease; }
.case-card--photo::after { inset:0; width:auto; height:auto; z-index:1;
  background: linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,0) 70%); }
/* Rollover: photo zooms in slightly and the card lifts, cueing that it's clickable. */
.case-card--photo { transition: transform .3s ease, box-shadow .3s ease; }
.case-card--photo:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(16,16,60,.35); }
.case-card--photo:hover .product img { transform: scale(1.06); }
.case-card h3 { color:#fff; font-size: clamp(1.4rem,2.4vw,2rem); }
.case-card .meta span { display:block; color: rgba(255,255,255,.7); font-size:.9rem; }
.case-card .case-blurb { margin-top:.5rem; color: rgba(255,255,255,.92);
  font-size:.95rem; line-height:1.4; }
.cases-actions { display:flex; justify-content:center; margin-top: 2.4rem; }

/* =================================================================
   CASE STUDY TEMPLATE (individual case-study-*.html pages)
   ================================================================= */
/* Shared hero background across every case study. Matches the live site's
   bright, saturated blue gradient — only a very light scrim in the top-left
   corner to keep the logo/nav legible. */
.case-study-hero {
  /* cover: fits top-to-bottom by default, but never lets width fall short
     either — whichever axis needs more scaling wins, so on very wide/short
     containers it fills width as a minimum instead of gapping the sides.
     Aspect ratio is always preserved; only the overflow axis is cropped. */
  background: url("../assets/img/case-studies/case-study-hero-bg-2.svg") center center / cover no-repeat, #eaf5fc;
  margin-bottom: 100px;
}
/* The header overlays the top of the hero, so equal-looking whitespace above and
   below the hero copy needs extra padding-top to compensate for the header's own
   height (which isn't part of the hero's padding box). Keeps header height as-is. */
.case-study-hero .container { padding-top: clamp(12rem, 16vw, 13.6rem); padding-bottom: clamp(3.25rem, 5vw, 4rem); }
@media (max-width: 860px) {
  /* Desktop's 250px-from-right offset was tuned for the centred container and
     lands mid-hero once the layout goes full-width. Pin it top-right under
     the hamburger instead, on both mobile and tablet. */
  .case-study-hero .hero-close { top: 5rem; right: calc(var(--gutter) - 17px); left: auto; }
}
.case-hero-badge { display:inline-flex; align-items:center; justify-content:center; margin-bottom: .5rem; }
.case-hero-badge img { height: 72px; width: auto; }
/* The badge already sits right above the title — the sitewide .hero h1
   top margin (added to compensate for the removed hero eyebrow) would
   otherwise reopen a large gap here. */
.case-study-hero h1 { margin-top: 0; }
/* "At a glance" section: heading followed by its body copy split into two columns. */
.case-glance-title { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.case-glance-columns { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,3rem); }
@media (max-width: 720px) { .case-glance-columns { grid-template-columns: 1fr; } }
.case-split-cards { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2rem); }
.case-card-block { background: linear-gradient(135deg, #f6eef1, #fdf3f4); border-radius: var(--radius);
  padding: clamp(1.75rem,3vw,2.5rem); }
.case-card-block h3 { margin-bottom: .8rem; }
.case-card-block p { color: var(--body); }
.case-card-block p + p { margin-top: 1em; }
/* Wraps .case-split-cards in a soft full-width gradient panel, with the cards
   themselves knocked back to solid white so they sit on top of it. */
.case-challenge-bg {
  /* cover (not a fixed 140% auto) so the gradient always fills the box no
     matter how tall it gets — a fixed size under-covered it at tablet widths
     and any time the cards' text pushed the panel taller than expected. */
  background: url("../assets/img/case-studies/beige-pink-grads-landscape-03.svg") center / cover no-repeat;
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(2rem, 3.5vw, 3rem);
}
.case-challenge-bg .case-card-block { background: #fff; }
.case-full-image { border-radius: var(--radius); overflow:hidden; aspect-ratio: 21/9; }
.case-full-image img { width:100%; height:100%; object-fit:cover; display:block; }
.case-bullets { list-style:none; padding:0; margin: 1.2rem 0 1.6rem; display:flex; flex-direction:column; gap:.9rem; }
.case-bullets li { position:relative; padding-left: 1.8rem; color: var(--body); text-wrap: balance; }
.case-bullets li::before { content:""; position:absolute; left:0; top:.45em; width:9px; height:9px;
  border-radius:50%; background: var(--orange); }
.case-services { display:grid; grid-template-columns:1fr 1fr; gap: clamp(1.5rem,3vw,2rem); }
.case-service-card .media { aspect-ratio: 1.6/1; border-radius: var(--radius); overflow: hidden; display: block; transition: box-shadow .2s ease; }
.case-service-card .media:hover { box-shadow: 0 0 0 5px var(--orange); }
.case-service-card .media img { width:100%; height:100%; object-fit:cover; border-radius: 0; }
.case-service-card h3 { margin: 1.2rem 0 .8rem; font-size: 22px; }
.case-service-card .arrow-circle:not(:hover) { border-color: #000; color: #000; }
.case-service-card--reverse { text-align: right; }
.case-service-card--reverse .cta-row { justify-content: flex-end; }
@media (max-width: 720px) {
  .case-split-cards, .case-services { grid-template-columns: 1fr; }
  /* Once the two service cards stack, the "reverse" card's right-alignment reads as
     inconsistent — align both cards' buttons to the left. */
  .case-service-card--reverse { text-align: left; }
  .case-service-card--reverse .cta-row { justify-content: flex-start; }
}

/* =================================================================
   BLOG POST "DISCOVER MORE" CAROUSEL (individual blog-post-*.html pages)
   ================================================================= */
.discover-carousel { position: relative; }
.discover-track {
  display: flex; gap: 2rem; margin-top: clamp(2.5rem, 4vw, 3.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  /* Fade the edge cards so the row reads as scrollable rather than cut off. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.discover-track::-webkit-scrollbar { display: none; }
.discover-track .blog-card { flex: 0 0 calc((100% - 4rem) / 3); scroll-snap-align: start; }
.discover-controls { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.75rem; }
.discover-controls .arrow-circle:not(:hover) { border-color: #000; color: #000; }
.discover-controls .arrow-circle[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
@media (max-width: 900px) {
  .discover-track .blog-card { flex: 0 0 calc((100% - 2rem) / 2); }
}
@media (max-width: 600px) {
  .discover-track .blog-card { flex: 0 0 85%; }
}

/* =================================================================
   "Let's start your project" CTA band
   ================================================================= */
/* Full-bleed banner: SVG background spans the viewport; inner .container keeps
   the text/buttons centred at a readable width. Extra bottom padding leaves
   room for the dark reviews bar to overlap the banner's lower edge. */
.project-cta { background: url("../assets/img/project-banner-bg.svg") center / cover no-repeat;
  text-align:center; border-radius: var(--radius);
  padding-block: clamp(3.5rem,7vw,6rem) clamp(5rem,9vw,8rem); }

/* Full-width solution banner (e.g. Procurement): gradient SVG background with a
   standard split (copy + floating cutout image) inside an inner .container. */
.solution-banner { background: url("../assets/img/solutions/procurement-bg.svg") center / cover no-repeat;
  border-radius: var(--radius); padding-block: clamp(2.5rem,5vw,4rem);
  margin: 0 clamp(1rem, 3vw, 2.5rem); }
.solution-banner .media img { filter: drop-shadow(0 24px 40px rgba(16,16,60,.25)); }
/* Eyebrow + heading accent match the body text here (no orange highlight). */
.solution-banner .eyebrow { color: var(--ink); }
.solution-banner h2 .accent { color: inherit; }
/* Balance the heading across 3 lines (works with the global text-wrap: balance). */
.solution-banner h2 { max-width: 15ch; }

/* Floating product accent overlapping a media image's bottom-right edge. */
.media.has-overlap { position: relative; overflow: visible; }
.split .media.has-overlap img.media-overlap {
  position: absolute; right: 7%; bottom: 0; transform: translateY(50%);
  width: clamp(110px, 30%, 175px); height: auto; aspect-ratio: auto; object-fit: contain;
  border-radius: 0; filter: drop-shadow(0 22px 34px rgba(0,0,0,.3)); z-index: 3; max-height: none;
}
/* Lighter shadow for the events keyring overlap. */
.split .media.has-overlap img.media-overlap--soft { filter: drop-shadow(0 10px 16px rgba(0,0,0,.18)); }
/* Sit higher so only the keyring's legs hang below the picture edge. */
.split .media.has-overlap img.media-overlap--legs { right: 3%; transform: translateY(18%); }
/* Overlap anchored to the picture's bottom-left corner instead of bottom-right. */
.split .media.has-overlap img.media-overlap--left {
  left: 6%; right: auto; width: clamp(140px, 34%, 220px);
  transform: translateY(14%);
}
/* Wide, shallow-angled pen straddling the picture's bottom edge. */
.split .media.has-overlap img.media-overlap--pen {
  left: 50%; right: auto; bottom: 0; transform: translate(-50%, 42%);
  width: clamp(200px, 55%, 340px);
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.28));
}
/* Branded webshop feature image with pulsing hotspots (corporate webshop page). */
.webshop-figure-wrap { padding-inline: var(--gutter); }
/* Twice the size, pulled up so its top edge overlaps the dark hero slightly.
   The negative margin only affects this figure, so the hero text stays put. */
.webshop-figure { position: relative; max-width: min(1520px, 100%); margin-inline: auto; margin-top: calc(-1 * clamp(1.5rem, 4vw, 3.5rem) - 50px); z-index: 2; }
.webshop-figure > img { width: 100%; height: auto; display: block; }
.webshop-figure .hotspot { position: absolute; transform: translate(-50%,-50%); background:none; border:0; padding:0; cursor:pointer; z-index:2; }
.webshop-figure .hotspot .dot { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--orange); position:relative; box-shadow:0 0 0 5px rgba(246,105,47,.2); }
.webshop-figure .hotspot .dot::before { content:""; width:7px; height:7px; border-radius:50%; background:#fff; }
.webshop-figure .hotspot .dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--orange); z-index:-1; animation: hotspot-pulse 2s ease-out infinite; }
.webshop-figure .hotspot .tip { position:absolute; right:calc(100% + 16px); top:50%; transform:translateY(-50%) translateX(8px); background:var(--orange); color:#fff; font-size:.95rem; font-weight:700; line-height:1.25; padding:.85rem 1.1rem; border-radius:14px; width:max-content; max-width:230px; box-shadow:0 18px 44px -20px rgba(0,0,0,.6); text-align:left; opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; z-index:3; }
.webshop-figure .hotspot--right .tip { right:auto; left:calc(100% + 16px); }
.webshop-figure .hotspot:hover .tip, .webshop-figure .hotspot:focus-visible .tip { opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }

/* Full-width dark statement bar. */
.statement-bar { background: var(--navy-2); color: #fff; border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem) 30px; text-align: center; }
.statement-bar p { color: #fff; font-weight: 700; line-height: 1.3; white-space: nowrap; font-size: clamp(0.8rem, 2.55vw, 2.1rem); }

/* Four-column feature row with thin vertical dividers between columns. */
.feature-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature-col { padding-inline: clamp(1.25rem, 2.5vw, 2.75rem); }
.feature-col:first-child { padding-left: 0; }
.feature-col:last-child { padding-right: 0; }
.feature-col + .feature-col { border-left: 1px solid var(--line); }
.feature-col h4 { font-size: var(--h4); font-weight: 700; color: var(--ink); margin-bottom: .7rem; }
.feature-col p { color: var(--body); max-width: 30ch; }
.feature-row--center .feature-col { text-align: center; }
.feature-row--center .feature-col p { margin-inline: auto; }
/* Six-card "What is a branded webshop" grid. */
.webshop-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.webshop-card { text-align: center; }
.webshop-card img { width: 100%; aspect-ratio: 1.25 / 1; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 1.4rem; }
.webshop-card h4 { font-size: var(--h4); font-weight: 700; color: var(--ink); margin-bottom: .6rem; }
.webshop-card p { color: var(--body); max-width: 34ch; margin-inline: auto; }
.webshop-quote { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.webshop-quote .arrow-circle:not(:hover) { border-color: #000; color: #000; }

/* =================================================================
   WEBSHOP PROMO BANNER — cross-sell card promoting the Corporate
   Webshop solution, placed under a feature grid on other solution
   pages. Desktop is a wide landscape crop of the tablet/phone mockup
   photo with copy on its left; tablet & mobile switch to a taller
   portrait crop with everything centred and stacked, scaling fluidly
   with clamp() rather than jumping between fixed sizes.
   ================================================================= */
.webshop-promo-wrap { padding-inline: var(--gutter); margin-top: clamp(2.5rem, 5vw, 4rem); }
/* aspect-ratio keeps the full photo in frame at typical desktop widths; the
   min-height floor only kicks in once the card gets narrow enough that the
   title/CTA row, icon row and copy start wrapping onto extra lines — without
   it, overflow:hidden clips that wrapped content instead of the card
   growing to fit it (the image just crops a little more at those widths). */
.webshop-promo { position: relative; isolation: isolate; color: #fff;
  border-radius: clamp(16px, 2vw, 28px); overflow: hidden;
  /* Explicit width:100% pins the card to the wrap's padding box — without
     it, browsers can resolve width from the min-height/aspect-ratio pair
     instead of from the parent, pushing the right edge past the viewport. */
  width: 100%; max-width: 100%;
  aspect-ratio: 2790 / 1162; min-height: clamp(760px, 45vw, 1162px);
  display: flex; align-items: center; }
.webshop-promo .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.webshop-promo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5,5,30,.55) 0%, rgba(5,5,30,.2) 45%, rgba(5,5,30,0) 70%); }
.webshop-promo .inner { width: 100%; padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem) clamp(2rem, 3.5vw, 3rem) max(var(--gutter), calc((100vw - var(--container)) / 2)); }
/* justify-content:flex-start (not space-between) keeps the CTA buttons
   right next to the title as in the mock-up, instead of pushed out toward
   the phone on the card's far right. */
/* max-width caps the row to the card's dark/readable left-hand zone (the
   ::after gradient below is solid through ~45% and clear by 70%) so CTAs
   wrap onto their own line at narrower desktop widths instead of running
   under the phone/tablet mockup on the right. */
.webshop-promo .top-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1rem 2.5rem; max-width: min(900px, 58%); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.webshop-promo .brand { display: flex; align-items: center; gap: .8rem; }
.webshop-promo .brand h3 { color: #fff; font-size: 52.8px; font-weight: 800; line-height: 1.1; }
.webshop-promo .cta-row { flex-wrap: wrap; }
/* Icon beside its two-line label, wrapping onto multiple lines (instead of
   a single fixed-width row) once the card is too narrow for all three. */
.webshop-promo .icon-row { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 3.5vw, 3rem); max-width: min(900px, 58%); margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.webshop-promo .icon-item { display: flex; flex-direction: row; align-items: flex-start; gap: .7rem; max-width: 22ch; }
.webshop-promo .icon-item img { width: 33px; height: 33px; flex: none; }
.webshop-promo .icon-item span { font-size: 21px; font-weight: 700; line-height: 1.2; }
.webshop-promo .copy { color: #fff; font-size: 18px; line-height: 1.35; max-width: min(1080px, 58%); }
.webshop-promo .copy strong { font-weight: 700; }

@media (max-width: 1024px) {
  /* Match the source artwork's own proportions (tall portrait) rather than a
     guessed min-height — that keeps the busy tablet/phone mockup area of the
     photo in the empty middle of the card instead of behind the heading or
     copy. The heading pins to the top and the icon/copy block to the bottom
     of that space (via .icon-row's auto top margin), leaving the mockup to
     show through the gap between them. */
  .webshop-promo { min-height: 0; aspect-ratio: 1154 / 3057; align-items: stretch; text-align: center; }
  .webshop-promo::after { background: linear-gradient(180deg, rgba(5,5,30,.6) 0%, rgba(5,5,30,.05) 22%, rgba(5,5,30,0) 45%, rgba(5,5,30,.2) 62%, rgba(5,5,30,.94) 100%); }
  .webshop-promo .inner { max-width: none; height: 100%; display: flex; flex-direction: column; }
  .webshop-promo .top-row { justify-content: center; max-width: none; margin-bottom: 0; }
  .webshop-promo .brand { flex-direction: column; gap: .5rem; }
  .webshop-promo .cta-row { justify-content: center; }
  .webshop-promo .icon-row { flex-wrap: wrap; justify-content: center; max-width: none; text-align: left; margin-top: auto; }
  .webshop-promo .icon-item { flex-direction: row; align-items: flex-start; gap: .7rem; }
  .webshop-promo .copy { text-align: left; max-width: 60ch; margin-inline: auto; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  /* Shorten the card so its bottom edge comes up — the icon/copy block is
     content-sized (auto row), so shrinking the card shrinks the empty 1fr
     photo row between it and the heading, pulling it up snug under the
     mockup image instead of leaving a tall gap below the ipad. */
  .webshop-promo { aspect-ratio: 1154 / 1800; }
  /* Card matches the source photo's own aspect ratio at this breakpoint, so
     there's no overflow for object-position to shift — oversize the image
     by exactly the offset (flush at the top this time, so the extra spills
     off the bottom edge instead) to pan it down, clearing the phone mockup
     from behind the title. */
  .webshop-promo .bg { height: calc(100% + 350px); }
  .webshop-promo .brand { flex-direction: row; gap: .6rem; }
  /* Each point stacked on its own line (3 lines total), each label kept to
     a single line instead of wrapping into a centred two-line block. */
  .webshop-promo .icon-row { flex-direction: column; align-items: flex-start; max-width: 60ch; margin-inline: auto; gap: .6rem; }
  .webshop-promo .icon-item { max-width: none; white-space: nowrap; }
  .webshop-promo .icon-item span { white-space: nowrap; }
  .webshop-promo .icon-item br { display: none; }
  /* The heading and icon/copy block were pinned to the very top/bottom of
     the card, leaving the mid-height gradient (a solid pink/purple band in
     the source photo, not overlaid by the readability gradient) exposed as
     a bare gap above and below the mockup photo. Pin the heading to the
     bottom of the top 22% readability band and the icon/copy block to the
     top of the bottom 38% band instead, so both sit flush against the
     photo with no gap — any leftover slack lands at the card's outer edges
     instead of next to the photo. */
  .webshop-promo .inner { display: grid; grid-template-rows: 22% 1fr auto auto; }
  /* Title + logo centred, pinned a fixed 50px from the card's top edge. */
  .webshop-promo .top-row { grid-row: 1; align-self: start; justify-content: center; margin-top: 50px; }
  .webshop-promo .icon-row { grid-row: 3; align-self: start; }
  .webshop-promo .copy { grid-row: 4; align-self: start; }
}
@media (max-width: 600px) {
  /* Stack the three icon items full-width instead of wrapping side by side. */
  .webshop-promo .icon-row { flex-direction: column; align-items: stretch; }
  .webshop-promo .icon-item { max-width: none; width: 100%; }
  .webshop-promo .brand { flex-direction: row; gap: .35rem; }
}
/* ---------- Brand pop-up modal ---------- */
body.modal-open { position: fixed; width: 100%; overflow: hidden; }
.brand-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem); }
.brand-modal[hidden] { display: none; }
.brand-modal__backdrop { position: absolute; inset: 0; background: rgba(8,6,24,.6); opacity: 0; transition: opacity .2s ease; }
.brand-modal.is-open .brand-modal__backdrop { opacity: 1; }
.brand-modal__dialog { position: relative; z-index: 1; background: #fff; border-radius: var(--radius); max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; padding: clamp(1.75rem, 4vw, 3rem); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); transform: translateY(14px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.brand-modal.is-open .brand-modal__dialog { transform: none; opacity: 1; }
.brand-modal__close { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.brand-modal__close svg { width: 20px; height: 20px; }
.brand-modal__close:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.brand-modal__logo { height: 52px; width: auto; margin-bottom: 1.4rem; }
.brand-modal__title { margin-bottom: 1rem; }
.brand-modal__copy { color: var(--body); margin-bottom: 1.8rem; }
.brand-modal__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 2vw, 1.1rem); margin-bottom: 1.8rem; }
/* contain (not cover): these are product photos on their own white background,
   not full-bleed lifestyle shots — cropping to fill the box was cutting off
   straps/collars, so scale the whole image down to fit instead. */
.brand-modal__gallery img { width: 100%; aspect-ratio: 1.3 / 1; object-fit: contain; background: #f7f7f9; border-radius: var(--radius-sm); }
.brand-modal__cta { justify-content: flex-start; }
.brand-modal .btn--ghost { border-color: var(--ink); color: var(--ink); }
.brand-modal .btn--ghost:hover { background: var(--ink); color: #fff; }
.brand-modal .arrow-circle:not(:hover) { border-color: #000; color: #000; }
@media (max-width: 520px) { .brand-modal__gallery { grid-template-columns: 1fr; } }

/* Gated PDF download modal: form-first variant of the .brand-modal shell,
   used on the Resources page's "Explore. Download." grid. */
.gated-download__dialog {
  background: url("../assets/img/resources/blue-pink-grads-landscape-01.3.svg") center / cover no-repeat;
}
.gated-download__meta { font-weight: 400; color: var(--body); font-size: 25px; }
.gated-download__form .cf-turnstile { margin-top: .3rem; }
.gated-download__error {
  color: #c0392b; background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.25);
  border-radius: 10px; padding: .7rem 1rem; font-size: .9rem; margin-bottom: 1.1rem;
}
.gated-download__error[hidden] { display: none; }
.gated-download__success[hidden] { display: none; }
.gated-download__video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; margin-top: 1.4rem; background: #000; }
.gated-download__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* "What we create in-house" technique grid (3 columns). */
.technique-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.25rem); }
.technique-grid .webshop-card { text-align: center; display: flex; flex-direction: column; }
.technique-grid .webshop-card p { max-width: none; margin-inline: auto; }
/* Clickable brand images: orange 5px ring on hover. */
.technique-grid .webshop-card img[data-brand-modal] { cursor: pointer; transition: box-shadow .2s ease; }
.technique-grid .webshop-card img[data-brand-modal]:hover { box-shadow: 0 0 0 5px var(--orange); }
.technique-grid .webshop-card .cta-row { justify-content: center; margin-top: auto; padding-top: 1.2rem; }
.technique-grid .webshop-card .arrow-circle:not(:hover) { border-color: #000; color: #000; }
/* Lilac call-to-action card that fills the final grid cell. */
.technique-cta { background: linear-gradient(150deg, #f1e9fb 0%, #f7eef7 55%, #fbf0f0 100%); border-radius: var(--radius-sm); padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
.technique-cta h3 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); font-weight: 700; color: var(--ink); line-height: 1.08; margin-bottom: 1rem; }
.technique-cta p { color: var(--body); margin-bottom: 1.8rem; max-width: 26ch; }
.technique-cta .arrow-circle:not(:hover) { border-color: #000; color: #000; }
@media (max-width: 900px) { .technique-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .technique-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .webshop-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .webshop-cards { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .feature-row { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2rem, 5vw, 3rem); }
  .feature-col { padding-inline: clamp(1rem, 3vw, 2rem); }
  .feature-col:nth-child(odd) { padding-left: 0; border-left: 0; }
  .feature-col:nth-child(even) { padding-right: 0; }
}
@media (max-width: 460px) {
  .feature-row { grid-template-columns: 1fr; row-gap: clamp(1.5rem, 6vw, 2.5rem); }
  .feature-col { padding-inline: 0; border-left: 0; }
}

/* ---------- FAQ accordion ---------- */
/* Divider line above the FAQ heading (matches live site: 2px solid, light grey). */
.faq-divider { border: 0; border-top: 2px solid var(--line); width: 100%; margin-block: clamp(2.5rem, 5vw, 4rem); }
/* Rounded grey pill rows, stacked with a gap (rather than a bordered flat
   list), each holding its own question + answer. */
.faq-list { width: 100%; display: flex; flex-direction: column; gap: .9rem; }
/* Left-aligned "See all FAQs" button (pill + arrow circle) below the accordion. */
.faq-cta { display: inline-flex; align-items: center; gap: .85rem; margin-top: clamp(2rem, 4vw, 3rem); }
.faq-cta .arrow-circle:not(:hover) { border-color: #000; color: #000; }
.faq-item { background: #ececec; border-radius: var(--radius); padding-inline: clamp(1.4rem, 2.5vw, 1.8rem); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-size: var(--h4); font-weight: 700; color: #666; letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Circular orange-ring chevron: a rotated border-corner (the standard CSS
   arrow trick) inside a bordered circle, flipped 180° when the item opens. */
.faq-icon {
  position: relative; flex: 0 0 auto; width: 32px; height: 32px;
  border-radius: 50%; border: 1.5px solid var(--orange);
  transition: transform .25s ease;
}
.faq-icon::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: translate(-50%, -50%) rotate(45deg);
}
.faq-item[open] .faq-icon { transform: rotate(180deg); }
.faq-answer { padding: 0 0 1.6rem; }
.faq-answer p { color: var(--body); font-size: var(--lead); line-height: 1.55; }
.faq-answer p + p { margin-top: 1em; }
.faq-answer a { color: var(--orange); text-decoration: none; transition: opacity .2s; }
.faq-answer ul { margin: .6rem 0 .6rem 1.3rem; }
.faq-answer li { margin: .25rem 0; }
.faq-answer a:hover { opacity: .7; }

.project-cta h2 { margin-bottom: 1rem; }
.project-cta p { max-width: 52ch; margin: 0 auto 2rem; font-size: var(--lead); }
.project-cta .cta-row { justify-content:center; }

/* =================================================================
   REVIEWS.IO bar
   ================================================================= */
/* No top padding: the bar is pulled up via negative margin to half-overlap the
   banner above it. */
.reviews-section { padding-top: 0; }
.reviews-bar { background:#0c0a1f; color:#fff; border-radius: var(--radius);
  padding: clamp(1.3rem,3vw,2rem) clamp(1.6rem,4vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  position: relative; z-index: 2; margin-top: clamp(-3.25rem, -5vw, -2.5rem); }
.reviews-bar .left { display:flex; align-items:center; gap:1.2rem; }
.reviews-bar .right { display:flex; align-items:center; gap:1rem; font-weight:600; }

/* =================================================================
   NPS panel
   ================================================================= */
.nps { position:relative; color:#fff; border-radius: var(--radius); overflow:hidden; isolation:isolate; }
.nps .bg { position:absolute; inset:0; z-index:-2; }
.nps .bg img { width:100%; height:100%; object-fit:cover; }
.nps::after { content:""; position:absolute; inset:0; z-index:-1; background: rgba(8,8,28,.55); }
.nps .inner { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center;
  padding: clamp(2.5rem,5vw,4rem); }
.nps-gauge { justify-self:center; width: 320px; height:320px; border-radius:50%; display:grid; place-items:center;
  background: conic-gradient(var(--lime) 0 94%, rgba(255,255,255,.12) 94% 100%); }
.nps-gauge .inner-circle { width: 280px; height:280px; border-radius:50%; background:#0c0a1f;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:1.4rem; }
.nps-gauge strong { font-size: 6rem; font-weight:800; color:#fff; line-height:1; }
.nps-caption { color:#fff; font-size:1rem; line-height:1.3; text-align:center; }
/* Halve the gap between the NPS section and the review carousel below it. */
.nps-section { padding-bottom: clamp(1.25rem, 2vw, 2rem); }
.testi-section { padding-top: clamp(1.75rem, 3vw, 3.25rem); }
.nps h2 { color:#fff; margin-bottom:1rem; }
.nps p { color: #fff; max-width: 50ch; margin-bottom: 1.6rem; }
.nps .copy p:first-of-type { margin-bottom: 0.5rem; }

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.testi-track-wrap { overflow: hidden; }
.testi-track { display:flex; gap: 1.6rem; transition: transform .5s ease; }
.testi-card { background:#fff; border-radius: var(--radius-sm);
  padding: 1.8rem; flex: 0 0 calc((100% - 3.2rem)/3); }
.testi-card .who { display:flex; align-items:center; gap:.9rem; margin-bottom:.4rem; }
.testi-card .avatar { width:46px; height:46px; border-radius:50%; background:#e9e9f2; flex:none; }
.testi-card .who strong { color:var(--ink); display:block; font-size:1rem; }
.testi-card .who span { font-size:.85rem; }
.testi-card .stars { height:15px; width:auto; display:block; margin-bottom:.8rem; }
.testi-card p { color: var(--body); }
.testi-controls { display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-top:1.6rem; }
.testi-dots { display:flex; align-items:center; gap:.5rem; }
.testi-dots span { width:9px;height:9px;border-radius:999px;background:#f0c4b3; transition:.2s; }
.testi-dots span.active { width:26px; background:var(--orange); }

/* =================================================================
   CONTACT
   ================================================================= */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items:stretch; }
.contact-form h2 { margin-bottom: 1.6rem; }
.contact-form .field { margin-bottom: 1.3rem; }
.contact-form .field-row { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-label { display:block; font-weight:700; color:var(--ink); margin-bottom:.5rem; }
.field-label .req { color: var(--orange); font-weight:700; font-size:.85em; }
.sublabel { display:block; font-size:.82rem; color:#555; margin-bottom:.35rem; }
.field-help { color: var(--body); margin:-.1rem 0 .6rem; }
.contact-form input, .contact-form select, .contact-form textarea {
  width:100%; background: var(--bg-grey); border:1px solid var(--line); border-radius:10px;
  padding:.85rem 1rem; font:inherit; color:var(--body); transition: border-color .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline:0; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(246,105,47,.15); }
.contact-form textarea { min-height: 190px; resize: vertical; }
/* Custom dropdown chevron: bigger, heavier, with breathing room on the right. */
.contact-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 3.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201f2f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 20px;
}
.char-count { font-size:.82rem; color:#666; font-weight:600; margin-top:.45rem; }
.cf-turnstile { margin: 0 0 1.3rem; }
.contact-form .btn { margin-top:.4rem; }

/* =================================================================
   GRAVITY FORMS (global reskin)
   Every real form on the site (Contact, Whitepaper download, and the 6
   Resources-page lead-gates) is a raw [gravityforms] shortcode with no
   theme markup of its own, so it renders with GF's own "Orbital" theme
   styling by default. Nothing here ever reskinned that to match the
   .contact-form design system above — these rules do, using GF's stable
   structural classes (not its Orbital CSS-variable API, which is newer
   and less certain to hold across GF versions). Applies everywhere a
   form is embedded: the contact section, the whitepaper modal, and the
   Resources-page gated-download/video modals.
   ================================================================= */
.gform_wrapper { font: inherit; color: var(--body); margin: 0; }
.gform_wrapper .gform_heading { margin-bottom: 1.3rem; }
.gform_wrapper .gform_fields { display: block; }
.gform_wrapper .gfield { margin-bottom: 1.3rem !important; padding: 0 !important; }
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
  display: block; font-weight: 700; color: var(--ink); margin-bottom: .5rem;
  font-size: 1rem; line-height: 1.3;
}
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_text { color: var(--orange); font-weight: 700; font-size: .85em; }
.gform_wrapper .gform-field-label--type-sub {
  display: block; font-size: .82rem; font-weight: 400; color: #555; margin-bottom: .35rem;
}
.gform_wrapper .gfield_description,
.gform_wrapper .instruction { color: var(--body); font-size: .88rem; margin: .3rem 0 0; }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100% !important; background: var(--bg-grey) !important; color: var(--body) !important;
  border: 1px solid var(--line) !important; border-radius: 10px !important;
  padding: .85rem 1rem !important; font: inherit !important; line-height: 1.4 !important;
  transition: border-color .2s, box-shadow .2s; box-shadow: none !important; height: auto !important;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  outline: 0; border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(246,105,47,.15) !important;
}
.gform_wrapper textarea { min-height: 190px; resize: vertical; }

/* Name field: First/Last side by side, Prefix/Suffix (unused) collapsed out of the way. */
.gform_wrapper .ginput_container_name { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gform_wrapper .name_prefix,
.gform_wrapper .name_suffix { display: none; }
.gform_wrapper .name_first,
.gform_wrapper .name_last { grid-column: span 1; }

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea { border-color: var(--orange) !important; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message { color: var(--orange); font-size: .85rem; margin-top: .4rem; font-weight: 600; }
.gform_wrapper .gform_validation_errors { display: none; } /* per-field messages above already cover this */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer { margin: .4rem 0 0; padding: 0; border: 0; }
.gform_wrapper .gform_button {
  display: inline-flex !important; align-items: center; gap: .6rem;
  padding: .71rem 1.2rem !important; border-radius: 999px !important;
  font-weight: 600 !important; font-size: .95rem !important; font-family: inherit !important;
  background: var(--orange) !important; color: #fff !important; border: 2px solid transparent !important;
  box-shadow: none !important; transition: transform .2s ease, background-color .2s ease; cursor: pointer;
}
.gform_wrapper .gform_button:hover { background: var(--orange-dark) !important; transform: translateY(-2px); }
.gform_wrapper .gform_ajax_spinner { margin-left: .6rem; }

.contact-aside { display:flex; flex-direction:column; gap: clamp(1.5rem,3vw,2rem); height:100%; }
/* Map grows to fill the remaining height so the right column matches the form. */
.map-embed { flex:1; min-height: 300px; border-radius: var(--radius); overflow:hidden; }
.map-embed iframe { display:block; width:100%; height:100%; border:0; }
.book-call { background: url("../assets/img/careers/bg-pink-beige-03.svg") center / cover no-repeat;
  border-radius: var(--radius); min-height: 300px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  text-align:center; color:var(--ink); transition: transform .25s ease; }
.book-call:hover { transform: translateY(-4px); }
.book-call h3 { font-size: clamp(2rem,4vw,3.2rem); font-weight:800; }
.book-call .arrow-circle { border-color:#000; color:#000; }
.book-call:hover .arrow-circle { background: var(--orange); border-color: var(--orange); color:#fff; }

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

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer { position:relative; color:#fff; overflow:hidden;
  background: url("../assets/img/footer-bg.jpg") center / cover no-repeat; }
.site-footer .inner { padding: clamp(3rem,6vw,5rem) var(--gutter) 2rem; }
.footer-logo { display:flex; justify-content:center; margin-bottom:2.2rem; }
.footer-logo img { height: 72px; }
.follow-bar { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.1rem 1.6rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom: 3rem; }
.follow-bar h3 { color:#fff; font-size: clamp(1.1rem,2vw,1.4rem); }
.follow-bar .socials { display:flex; gap:.8rem; }
.follow-bar .socials a { width:40px;height:40px;border-radius:10px; display:grid;place-items:center;
  background: transparent; color: #E9FF5D; transition:.2s; }
.follow-bar .socials a:hover { transform: translateY(-2px); }
.follow-bar .socials img { width:28px; height:28px; }
.footer-cols { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
  border-top: 2px solid #fff; padding-top: calc(2.5rem + 12px); }
.footer-cols h4 { color:#fff; font-size:22px; margin-bottom:1.1rem; letter-spacing:.04em; }
.footer-contact .phone { color: #E9FF5D; font-weight:500; margin-bottom:.4rem; display:inline-block; }
.footer-contact .email { color: #E9FF5D; display:inline-block; margin-bottom:1rem; }
.footer-contact address { font-style:normal; color: rgba(255,255,255,.7); line-height:1.55; }
.footer-cols ul li { margin-bottom:.7rem; }
.footer-cols ul a { color: rgba(255,255,255,.75); font-size:18px; transition:.2s; }
.footer-cols ul a:hover { color:#fff; }
.footer-legal { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:2px solid #fff; margin-top:2.5rem; padding-top:1.5rem;
  font-size:.85rem; color: rgba(255,255,255,.6); }
.footer-legal .links { display:flex; gap:1.4rem; flex-wrap:wrap; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1024px) {
  .role-grid { grid-template-columns: repeat(3, 1fr); }
  .nps .inner { grid-template-columns: 1fr; justify-items:center; text-align:center; }
}
/* Below 1300px the card is too narrow for the absolute bleed-bottle + pinned
   hotspots without cropping/squashing the bottle against the copy — even with
   the fluid easing this fought at the lower end of desktop, not just tablet/
   mobile, so the stacked treatment now starts here instead of at 1024px.
   Swap to an ordinary in-flow bottle image below the cert logos (grows the
   card/section height to fit, same as any other copy block — no manual height
   math needed) and a plain static feature list instead of pins on the bottle. */
@media (max-width: 1300px) {
  .promise .inner { grid-template-columns: 1fr; }
  .promise .bottle, .promise .hotspots { display: none; }
  .promise .bottle-stacked { display: block; margin: 2.5rem auto 0; max-width: min(280px, 70%); }
  .promise .bottle-stacked img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); }
}
@media (max-width: 860px) {
  .nav-toggle { display:block; }
  /* The bar itself collapses to nothing visible (no border/padding) when
     closed; .main-nav is positioned absolute so it doesn't need any height
     from this bar. Kept in flow (not display:none) so .main-nav's
     top:100% has something to anchor to. */
  .header-bar--bottom { position: relative; }
  .header-bar--bottom .container { border-top: 0; padding-block: 0; }
  /* Full-width dropdown anchored under the header, not a slide-in drawer. */
  .main-nav { position: absolute; top: 100%; left: 0; width: 100%;
    max-height: 0; overflow: hidden;
    background: #0c0a2e; border-top: 0 solid var(--orange);
    flex-direction: column; align-items: stretch; padding: 0 2rem;
    transition: max-height .35s ease, border-top-width .2s ease; margin: 0; }
  .main-nav.open { max-height: min(2000px, calc(100vh - 90px)); overflow-y: auto;
    border-top-width: 3px; padding: 1.5rem 2rem 2rem; }
  .main-nav > ul { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.2rem; }
  .main-nav a, .site-header.scrolled .main-nav a { color:#fff; }
  /* Dropdown becomes a static, indented list inside the slide-in panel. */
  .main-nav .has-menu::before { content: none; }
  .main-nav .has-menu > .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; min-width: 0;
    padding: .6rem 0 0 1rem; margin: .4rem 0 0; gap: .2rem; }
  .main-nav .submenu a { padding: .35rem 0; font-size: .9rem; color: rgba(255,255,255,.8); }
  .header-actions .btn--primary,
  .header-actions .btn--ghost-light,
  .header-actions .arrow-circle { display:none; }
  .split, .sslide.active, .cases-grid, .testi-card { grid-template-columns: 1fr; }
  .hero--center .container { text-align: center; }
  /* Stacked on mobile/tablet: image always first, then copy (title + text),
     for every split variant — desktop keeps its left/right alternation. */
  .split .media, .split--reverse .media { order: 1; }
  .split .copy, .split--reverse .copy { order: 2; }
  /* Solutions page "Procurement solutions that deliver real ROI" only:
     image goes below the copy on tablet/mobile instead of the sitewide
     image-first stacking order above. */
  #procurement .split .media { order: 2; }
  #procurement .split .copy { order: 1; }
  /* Every .media-overlap product cutout is position:absolute and hangs
     below its .media box's own bottom edge (that's the point of it on
     desktop, where it overlaps into empty space next to the copy column).
     On mobile the copy column stacks directly underneath instead, so
     without reserved space here the cutout image overlaps the heading
     below it. Reserving space on the .media box itself (rather than
     margin-top on .copy) fixes every has-overlap instance site-wide in one
     rule, regardless of which page/section or which overlap variant
     (--legs, --pen, --left, etc.) is used — sized to comfortably clear the
     tallest/lowest-hanging variant (the plain default, e.g. the Sales
     notebook: translateY(50%) on a tall ~968px-native-height image). */
  .split .media.has-overlap { margin-bottom: 110px; }
  .testi-card { flex: 0 0 100%; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .role-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-bar, .cut-banner { flex-direction: column; align-items:flex-start; }
  .cut-banner .right { align-self: flex-end; }
  .footer-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .promise .hotspot .dot::after { animation: none; }
  * { scroll-behavior: auto; }
}

/* ============================================================
   SUSTAINABILITY PAGE
   ============================================================ */

/* Eco hero — green gradient */
.hero--eco { background: url("../assets/img/sustainability/sustainability-background-2.2.svg") center / cover no-repeat, linear-gradient(120deg, #0b3b2b 0%, #1f7a4d 55%, #6fbf3f 100%); }
.hero--eco h1 .accent { color: #E9FF5D; }

/* Certification logos strip */
.certs-strip {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap;
  margin-top: calc(clamp(2.5rem, 5vw, 4rem) + 65px);
}
.certs-strip img { height: 56px; width: auto; }
.certs-strip img.cert-sedex { height: 31px; }
.certs-strip img.cert-citation { height: 67px; }

/* Partnership card (CleanHub / Climeworks) */
/* Tighten the gap between the eco-pills row and the Climeworks card to match the stat-tile gutter */
#eco-materials { padding-bottom: 0; }
#climeworks { padding-top: clamp(1rem, 2.5vw, 1.75rem); }
.partnership-card {
  display: grid;
  /* First column sized so the right column's left edge lines up with the text
     in the stat tile below: 50% - card gap + (stat gap / 2) + stat-tile padding */
  grid-template-columns: calc(50% - clamp(1.5rem, 4vw, 3rem) + clamp(1rem, 2.5vw, 1.75rem) / 2 + clamp(1.5rem, 3vw, 2.25rem)) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: linear-gradient(135deg, #f6eef1, #fdf3f4);
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
/* CleanHub partnership card uses a beige/pink gradient photo background */
#partnerships .partnership-card {
  background: url("../assets/img/sustainability/cleanhub-card-bg.jpg") center / cover no-repeat;
}
#partnerships .faq-divider { margin-top: calc(clamp(2.5rem, 5vw, 4rem) - 30px); }
#leader-quote .faq-divider { margin-bottom: calc(clamp(2.5rem, 5vw, 4rem) + 55px); }
#climeworks .partnership-card {
  background: url("../assets/img/sustainability/climeworks-card-bg.jpg") center / cover no-repeat;
}
.partnership-card .cleanhub-logo { max-width: 396px; width: 100%; height: auto; }
.partnership-card .cleanhub-logo[src*="cleanhub"] { max-width: 297px; }
.partnership-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.partnership-brand .eyebrow { display: block; margin-bottom: 1rem; }
/* Centre the divider in the existing column gap without shifting the copy
   column's text (which is aligned to the stat-tiles below). */
.partnership-copy {
  border-left: 1px solid #000;
  margin-left: calc(clamp(1.5rem, 4vw, 3rem) / -2);
  padding-left: calc(clamp(1.5rem, 4vw, 3rem) / 2);
}
.partnership-copy h3 { margin-bottom: .75rem; }
.partnership-copy p { color: var(--body); }

/* Stat tiles */
.stat-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1rem, 2.5vw, 1.75rem);
}
.stat-tiles--two { grid-template-columns: repeat(2, 1fr); }
.stat-tile {
  background: #faf5ef; border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* Three-up CleanHub stat tiles use decorative pink/beige backgrounds */
.stat-tiles:not(.stat-tiles--two) .stat-tile { background-size: cover; background-position: center; }
.stat-tiles:not(.stat-tiles--two) .stat-tile:nth-child(1) { background-image: url("../assets/img/sustainability/stat-bg-01.svg"); }
.stat-tiles:not(.stat-tiles--two) .stat-tile:nth-child(2) { background-image: url("../assets/img/sustainability/stat-bg-02.svg"); }
.stat-tiles:not(.stat-tiles--two) .stat-tile:nth-child(3) { background-image: url("../assets/img/sustainability/stat-bg-03.svg"); }
.stat-tile img { height: 40px; margin-bottom: 1.25rem; }
/* Barcode icon SVG has intrinsic left whitespace — nudge it flush with the number/caption */
.stat-tile img[src$="stat-icon-1.svg"] { margin-left: -3px; }
/* Three-up CleanHub tiles: icon in its own left column, number + caption stacked on the right. */
.stat-tiles:not(.stat-tiles--two) .stat-tile { display: flex; align-items: center; gap: 1.25rem; text-align: left; }
.stat-tiles:not(.stat-tiles--two) .stat-tile img { height: 40px; margin-bottom: 0; flex: none; }
.stat-tiles:not(.stat-tiles--two) .stat-tile img[src$="stat-icon-1.svg"] { margin-left: 0; }
.stat-tile .num {
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800;
  color: var(--ink); line-height: 1.05; margin-bottom: .4rem;
}
.stat-tile p { color: var(--body); max-width: 22ch; }
/* Climeworks stat pair uses beige/pink gradient photo backgrounds */
.stat-tiles--two .stat-tile { background-size: cover; background-position: center; background-repeat: no-repeat; }
.stat-tiles--two .stat-tile:first-child { background-image: url("../assets/img/sustainability/climeworks-stat-bg-1.jpg"); }
.stat-tiles--two .stat-tile:last-child { background-image: url("../assets/img/sustainability/climeworks-stat-bg-2.jpg"); }
/* Text-only second tile in the Climeworks pair: fill the width, larger copy */
.stat-tiles--two .stat-tile:last-child p { max-width: none; font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.2; font-weight: 600; }
/* First tile: barcode, number and caption in one horizontal, vertically-centred row */
.stat-tiles--two .stat-tile:first-child { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.stat-tiles--two .stat-tile:first-child img { margin-bottom: 0; height: 48.4px; transform: translateY(-3px); }
.stat-tiles--two .stat-tile:first-child .num { margin-bottom: 0; }

/* Sustainability promise — soft green panel + timeline */
.sustainability-promise {
  background: #dfebe0 url("../assets/img/sustainability/sustainable-grads-landscape-2-02.svg") center / cover no-repeat;
  border-radius: var(--radius);
  margin: var(--section-y) clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
}
/* Scroll-based horizontal timeline */
.h-timeline { position: relative; margin-top: clamp(3rem, 5vw, 4.5rem); }
.h-timeline__line { position: absolute; left: 0; right: 0; top: 8px; height: 4px; background: rgba(14,58,43,.16); border-radius: 4px; }
.h-timeline__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: #1f7a4d; border-radius: 4px; transition: width .1s linear; }
.h-timeline__steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 2vw, 1.75rem); padding-top: 40px; }
.ht-step { position: relative; text-align: center; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.ht-step.is-active { opacity: 1; transform: none; }
.ht-dot { position: absolute; top: -39px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: #dfebe0; border: 3px solid #1f7a4d; transition: background .3s ease; }
.ht-step.is-active .ht-dot { background: #1f7a4d; }
.ht-year { display: block; font-size: clamp(1.1rem, 1.8vw, 1.6rem); font-weight: 800; color: var(--ink); margin-bottom: .5rem; min-height: 1.2em; }
.ht-step h4 { font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.ht-step p { color: var(--body); font-size: .92rem; }
@media (max-width: 820px) { .h-timeline__steps { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; padding-top: 0; } .h-timeline__line { display: none; } .ht-dot { display: none; } }
@media (max-width: 480px) { .h-timeline__steps { grid-template-columns: repeat(2, 1fr); } }

/* Eco pills */
.eco-pills {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: calc(clamp(.75rem, 2vw, 1.25rem) + 5px);
}
.eco-pill {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
  background: #f6eef1; border-radius: var(--radius-sm);
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.4rem; font-weight: 700;
  color: var(--ink); font-size: 1rem;
}
/* Decorative pink/beige backgrounds — middle SVG (02) repeats on both centre pills */
.eco-pill { background-size: cover; background-position: center; background-repeat: no-repeat; }
.eco-pill:nth-child(1) { background-image: url("../assets/img/sustainability/stat-bg-01.svg"); }
.eco-pill:nth-child(2) { background-image: url("../assets/img/sustainability/stat-bg-02.svg"); }
.eco-pill:nth-child(3) { background-image: url("../assets/img/sustainability/stat-bg-02.svg"); }
.eco-pill:nth-child(4) { background-image: url("../assets/img/sustainability/stat-bg-03.svg"); }
.eco-pill span { text-wrap: balance; }
.eco-pill img { height: 48px; width: 48px; flex: none; }

/* Greener — same split setup as "Building better business": copy left, cards right.
   Narrow the copy column so the card grid gets more width / bigger boxes. */
.greener-split { grid-template-columns: 0.72fr 1.28fr; }
.greener-split .greener-cards { order: 2; }
/* Greener cards */
.greener-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: 0;
}
.greener-col { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.75rem); }
/* Stagger the left column down so the two columns don't line up in a strict grid. */
.greener-col--down { margin-top: clamp(2rem, 5vw, 3.5rem); }
.greener-card {
  background: #f6eef1; border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* Decorative blue/yellow backgrounds on the four greener cards */
.greener-card { background-size: cover; background-position: center; background-repeat: no-repeat; }
.greener-card--1 { background-image: url("../assets/img/sustainability/greener-bg-01.svg"); }
.greener-card--2 { background-image: url("../assets/img/sustainability/greener-bg-02.svg"); }
.greener-card--3 { background-image: url("../assets/img/sustainability/greener-bg-03.svg"); }
.greener-card--4 { background-image: url("../assets/img/sustainability/greener-bg-04.svg"); }
.greener-card img { height: 52.8px; margin-bottom: 1.1rem; }
/* ISO certification badge is a wider colour lockup — give it a touch more height */
/* The badge SVG has ~31% empty space below the artwork inside its square viewBox,
   which inflates the gap to the caption. Pull the caption up to match the icon cards. */
.greener-card img.greener-badge {
  height: 135.72px; margin-bottom: -19.5px;
  /* The badge artwork also sits inset ~12% from the SVG's left edge; pull it back
     so the visible logo aligns with the caption text below. */
  margin-left: -16.6px;
}
.greener-card p { color: var(--ink); font-weight: 600; }

/* Arrow-circles in section-head CTAs on light backgrounds need a black border */
.greener-section .section-head .arrow-circle:not(:hover) { border-color: #000; color: #000; }

/* Responsive — sustainability page */
@media (max-width: 900px) {
  .partnership-card { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .greener-cards { grid-template-columns: repeat(2, 1fr); }
  .eco-pills { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .stat-tiles, .stat-tiles--two { grid-template-columns: 1fr; }
  .eco-pills { grid-template-columns: 1fr; }
  .greener-cards { grid-template-columns: 1fr; }
  .greener-col--down { margin-top: 0; }
}

/* =================================================================
   ABOUT US
   ================================================================= */
/* Full-bleed wrapper (matches the width of the full-bleed green/promise sections). */
.stats-ticker-wrap { padding-inline: var(--gutter); }
.stats-ticker {
  display: grid; grid-template-columns: repeat(4, 1fr);
  text-align: center;
  background: url("../assets/img/about/beige-pink-grads-landscape-01.svg") center / cover no-repeat;
  border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.25rem);
}
.stats-ticker .stat-item + .stat-item { border-left: 2px solid #000; }
.stats-ticker .num { font-size: 72px; font-weight: 900; color: #000; line-height: 1; margin-bottom: .5rem; }
.stats-ticker .stat-item p { color: var(--body); font-weight: 600; font-size: 22px; max-width: 12ch; margin-inline: auto; }

/* Leader quote: portrait + pull quote, reusing the .split grid. */
.leader-quote .copy { display: flex; flex-direction: column; justify-content: center; }
.leader-photo { aspect-ratio: 1 / 1; background: #dceaf7; }
.leader-photo img { width: 100%; height: 100%; object-fit: cover; }
/* The glyph sits high in its line box, leaving a lot of empty space below it
   at this large size — pull the copy up to close that gap. */
.quote-mark { font-size: 160px; line-height: 1; color: var(--line); font-weight: 700; display: block; margin-bottom: -60px; }
.quote-text { font-size: 32px; font-weight: 400; line-height: 1.15; color: var(--ink); margin-top: 0; }
.quote-name { margin-top: 1.3rem; font-weight: 700; color: var(--orange); }
.quote-name span { display: block; font-weight: 500; color: var(--body); }

@media (max-width: 860px) {
  .stats-ticker { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .stats-ticker .num { font-size: clamp(2.2rem, 7vw, 72px); }
  .stats-ticker .stat-item:nth-child(2n+1) { border-left: 0; }
  .stats-ticker .stat-item:nth-child(n+3) { border-top: 2px solid #000; padding-top: 1.5rem; }
}
@media (max-width: 600px) {
  .stats-ticker { grid-template-columns: 1fr; }
  .stats-ticker .stat-item { border-left: 0 !important; border-top: 2px solid #000; padding-top: 1.5rem; }
  .stats-ticker .stat-item:first-child { border-top: 0; padding-top: 0; }
}
/* Black dividers between the core-values columns (rather than the shared light-grey line). */
#core-values .feature-col + .feature-col { border-left: 2px solid #000; }