/* ==========================================================================
   Havenwatt — stylesheet
   --------------------------------------------------------------------------
   Order of this file:
     1. Design tokens
     2. Reset and base elements
     3. Layout utilities
     4. Motion (scroll reveals, split headings, parallax)
     5. Components (button, rise, icon, card, widget, slider, ...)
     6. Header
     7. Page sections, top to bottom
     8. Responsive
     9. Reduced motion

   Naming follows BEM: .block, .block__element, .block--variant.
   Change a colour or a size once in section 1 and it applies everywhere.

   The whole design is built on ONE idea worth understanding: a dark section
   does not restyle its children, it swaps two tokens. See `.is-inverted`
   at the end of section 1.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* --- Brand colours. These seven lines are the whole palette. --- */
  --color-surface: #f4f6f0; /* page background */
  --color-surface-2: #ffffff; /* raised surfaces */
  --color-surface-3: #dfe5d6; /* filled boxes, hovered buttons */
  --color-ink: #14201a; /* body text and dark sections */
  --color-ink-2: #1c2a23; /* dark section, one step lighter */
  --color-ink-3: #26362d; /* dark section, two steps lighter */
  --color-accent: #c8f04a; /* highlights */
  --color-accent-2: #9dc21f; /* icons on light backgrounds */

  /* Text opacities, derived from the ink above. Never hard-code a grey. */
  --ink-64: color-mix(in srgb, var(--color-ink) 64%, transparent);
  --ink-48: color-mix(in srgb, var(--color-ink) 48%, transparent);
  --ink-12: color-mix(in srgb, var(--color-ink) 12%, transparent);

  /* Glass and veils. Glass stays white on purpose: it sits on photos and
     videos, never on a flat surface, so it must not follow the inversion. */
  --glass: color-mix(in srgb, #ffffff 12%, transparent);
  --glass-hover: color-mix(in srgb, #ffffff 24%, transparent);
  --veil: color-mix(in srgb, #14201a 64%, transparent);
  --veil-0: color-mix(in srgb, #14201a 0%, transparent);

  /* Text laid directly over a photo. Always light, never inverted. */
  --on-media: #f4f6f0;
  --on-media-muted: color-mix(in srgb, #f4f6f0 64%, transparent);

  /* --- Typography --- */
  --font-heading: "Switzer", system-ui, sans-serif;
  --font-body: "Switzer", system-ui, sans-serif;
  --font-label: "Geist Mono", ui-monospace, monospace; /* small uppercase labels */

  --weight-normal: 400;
  --weight-medium: 500;

  /* Type scale. Redefined at each breakpoint in section 8 — that is the only
     place where sizes change, so a heading never needs its own media query. */
  --h1-size: 60px;
  --h1-height: 60px;
  --h1-letter: -2px;
  --h2-size: 48px;
  --h2-height: 52px;
  --h2-letter: -1.25px;
  --h3-size: 40px;
  --h3-height: 44px;
  --h3-letter: -1px;
  --h4-size: 32px;
  --h4-height: 36px;
  --h4-letter: -0.5px;
  --h5-size: 28px;
  --h5-height: 32px;
  --h5-letter: -0.5px;
  --h6-size: 24px;
  --h6-height: 28px;
  --h6-letter: -0.25px;
  --text-large: 20px;
  --text-large-height: 28px;
  --text-medium: 16px;
  --text-medium-height: 24px;
  --text-small: 14px;
  --text-small-height: 20px;
  --label-size: 11px;
  --label-height: 12px;
  --label-letter: 1.25px;

  /* --- Spacing --- */
  --gap-01: 4px;
  --gap-02: 8px;
  --gap-03: 12px;
  --gap-04: 16px;
  --gap-05: 20px;
  --gap-06: 24px;
  --gap-07: 32px;
  --gap-08: 48px;
  --gap-09: 64px;
  --gap-10: 80px;
  --gap-11: 120px;

  --section-padding: 120px; /* vertical rhythm of a section */
  --section-padding-large: 160px;
  --container-padding: 32px;
  --container-width: 1600px;

  /* --- Shapes --- */
  --radius-small: 24px;
  --radius-medium: 32px;
  --radius-large: 40px;
  --radius-pill: 1080px;

  --button-height: 48px;
  --button-height-small: 40px;
  --navbar-height: 48px;

  /* --- Motion. One duration and one curve per intent, reused everywhere. ---
     The curves are the CSS equivalents of the easing names used by the
     original design tool, so the feel is identical. */
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); /* power2.out */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); /* power3.out */
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); /* power4.out */
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* power1.inOut */
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); /* power2.inOut */
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); /* power3.inOut */
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); /* power4.inOut */

  --duration-fast: 300ms;
  --duration: 500ms;
  --duration-slow: 800ms;
}

/* A dark block does not restyle its children: it swaps surface and ink, and
   everything derived from them follows — muted text, filled buttons, borders.
   Applied to dark sections AND to sections sitting on a dark photo or video.

   Read one button to see why this is worth it:
     .btn--primary { --btn-fill: var(--color-ink); color: var(--color-surface) }
   On a light section that is a dark button with light text. Inside a dark
   section the same two lines produce a light button with dark text. No
   variant, no override. */
.is-inverted {
  --color-surface: #14201a;
  --color-surface-2: #1c2a23;
  --color-surface-3: #26362d;
  --color-ink: #f4f6f0;
  --color-accent-2: var(--color-accent);

  /* These three look redundant — they are not. A custom property is
     substituted where it is DECLARED, not where it is used: the copies up in
     :root already resolved var(--color-ink) against the dark ink, and children
     inherit that finished colour. Swapping --color-ink here does not reach
     them, so the derived tokens have to be declared again. */
  --ink-64: color-mix(in srgb, var(--color-ink) 64%, transparent);
  --ink-48: color-mix(in srgb, var(--color-ink) 48%, transparent);
  --ink-12: color-mix(in srgb, var(--color-ink) 12%, transparent);
}

/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* sticky header height + breathing room */
}

body {
  background-color: var(--color-surface);
  color: var(--ink-64);
  font-family: var(--font-body);
  font-size: var(--text-medium);
  line-height: var(--text-medium-height);
  font-weight: var(--weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* full-bleed media is wider than the viewport */
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

address {
  font-style: normal;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gap-04);
  z-index: 1000;
  padding: var(--gap-03) var(--gap-05);
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  color: var(--color-surface);
  transition: top var(--duration-fast) var(--ease-out-cubic);
}

.skip-link:focus {
  top: var(--gap-04);
}

/* --- Type components ------------------------------------------------------ */

.heading {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-wrap: balance;
}

.heading--h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-height);
  letter-spacing: var(--h1-letter);
}
.heading--h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-height);
  letter-spacing: var(--h2-letter);
}
.heading--h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-height);
  letter-spacing: var(--h3-letter);
}
.heading--h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-height);
  letter-spacing: var(--h4-letter);
}
.heading--h5 {
  font-size: var(--h5-size);
  line-height: var(--h5-height);
  letter-spacing: var(--h5-letter);
}
.heading--h6 {
  font-size: var(--h6-size);
  line-height: var(--h6-height);
  letter-spacing: var(--h6-letter);
}

/* The second half of a headline, one step quieter. This two-tone headline is
   the typographic signature of the design. */
.heading__muted {
  color: var(--ink-48);
}

.text {
  color: var(--ink-64);
}

.text--display {
  font-family: var(--font-heading);
  font-size: var(--h4-size);
  line-height: var(--h4-height);
  letter-spacing: var(--h4-letter);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  text-wrap: balance;
}

.text--large {
  font-size: var(--text-large);
  line-height: var(--text-large-height);
  font-weight: var(--weight-medium);
}

.text--medium {
  font-size: var(--text-medium);
  line-height: var(--text-medium-height);
}

.text--small {
  font-size: var(--text-small);
  line-height: var(--text-small-height);
}

.text--strong {
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

.label {
  font-family: var(--font-label);
  text-transform: uppercase;
  color: var(--color-ink);
  font-weight: var(--weight-medium);
}

.label--small {
  font-size: var(--label-size);
  line-height: var(--label-height);
  letter-spacing: var(--label-letter);
}

.label--large {
  font-size: var(--text-small);
  line-height: 16px;
  letter-spacing: var(--label-letter);
  color: var(--ink-48);
}

.small-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out-cubic);
}

.small-link:hover {
  color: var(--color-ink);
}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: calc(var(--container-width) * 0.75);
}

.container--tight {
  max-width: 712px;
}

.section {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-block: var(--section-padding);
  background-color: var(--color-surface);
  color: var(--ink-64);
  overflow: clip; /* keeps parallax media inside the rounded corners */
}

.section--rounded {
  border-radius: var(--radius-large);
}

.section--rounded-top {
  border-radius: var(--radius-large) var(--radius-large) 0 0;
}

.frame {
  position: relative;
  overflow: clip;
  background-color: var(--color-surface);
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
}

.section-content--tight {
  gap: var(--gap-08);
}

.section-content--relaxed {
  gap: var(--gap-11);
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-07);
}

.section-header--split {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--gap-08);
}

.section-header--center {
  align-items: center;
  text-align: center;
  gap: var(--gap-08);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

.stack--tight {
  gap: var(--gap-02);
}

.stack--center {
  align-items: center;
  text-align: center;
  gap: var(--gap-07);
  max-width: 668px;
  margin-inline: auto;
}

.stack--wide {
  gap: var(--gap-07);
  max-width: 720px;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: var(--gap-02);
  align-items: flex-start;
}

.buttons--row {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Full-bleed media behind a section: the photo or video fills the box. */
.section-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}

.media-fill {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--veil);
}

.overlay--strong {
  background-color: color-mix(in srgb, var(--color-ink) 72%, transparent);
}

/* Bottom half fades into the page background, so text stays readable. */
.gradient-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 50%;
  background-image: linear-gradient(180deg, var(--veil-0), var(--veil)),
    linear-gradient(180deg, var(--veil-0), var(--color-surface));
}

/* ==========================================================================
   4. Motion
   --------------------------------------------------------------------------
   Everything hidden here is scoped to `html.js`. If the scripts fail, the
   page renders fully — an animation must never be able to swallow content.
   ========================================================================== */

/* --- Scroll reveals ------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
}

.js [data-reveal="fade"],
.js [data-reveal="fade-late"] {
  transform: translateY(8px);
  transition: opacity var(--duration) var(--ease-in-out-cubic),
    transform var(--duration) var(--ease-in-out-cubic);
  transition-delay: 200ms;
}

.js [data-reveal="fade-late"] {
  transition-delay: 500ms;
}

/* Direct children come in one after the other, 100ms apart. */
.js [data-reveal="stagger"] {
  opacity: 1; /* the parent stays visible, its children animate */
}

.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-in-out-cubic),
    transform var(--duration-fast) var(--ease-in-out-cubic);
  transition-delay: calc(500ms + var(--index, 0) * 100ms);
}

/* A text block: labels first, then paragraphs, then the split heading. */
.js [data-reveal="text"] {
  opacity: 1;
}

.js [data-reveal="text"] .label,
.js [data-reveal="text"] .text:not([data-split]) {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration) var(--ease-in-out-cubic),
    transform var(--duration) var(--ease-in-out-cubic);
}

.js [data-reveal="text"] .text:not([data-split]) {
  transform: none;
  transition-duration: var(--duration-fast);
  transition-delay: 200ms;
}

.js [data-reveal].is-in,
.js [data-reveal].is-in .label,
.js [data-reveal].is-in .text,
.js [data-reveal="stagger"].is-in > * {
  opacity: 1;
  transform: none;
}

/* --- Split headings -------------------------------------------------------
   main.js wraps every visual line of a [data-split] element in
   .line-mask > .line. The mask clips, the line slides up from 32%.
   Without JavaScript the element keeps its normal flow and stays readable. */

.line-mask {
  overflow: clip;
  display: block;
}

.js .line {
  display: block;
  transform: translateY(32%);
  opacity: 0;
  transition: transform 500ms var(--ease-out-quint),
    opacity var(--duration-fast) var(--ease-out-quint);
  transition-delay: calc(200ms + var(--line, 0) * 100ms),
    calc(300ms + var(--line, 0) * 100ms);
}

.js .is-in .line,
.js .line.is-in {
  transform: none;
  opacity: 1;
}

/* --- Parallax -------------------------------------------------------------
   main.js writes --parallax (-1 at the top of the travel, +1 at the bottom).
   The transform below turns that number into movement. Scaling up first is
   what stops the edges from showing while the image drifts. */

/* Order matters: translate first, then scale. Written the other way round
   the browser scales the offset too, and the image drifts 12% faster than
   the reference. */
[data-parallax] .media-fill {
  transform: translateY(calc(var(--parallax, 0) * 4%)) scale(1.08);
  will-change: transform;
}

[data-parallax="strong"] .media-fill {
  transform: translateY(calc(var(--parallax, 0) * 8%)) scale(1.12);
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- Icons ---------------------------------------------------------------- */

.icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: none;
}

.icon svg {
  width: 100%;
  height: 100%;
}

.icon--small {
  width: 16px;
  height: 16px;
}

.icon--xl {
  width: 48px;
  height: 48px;
}

.icon--accent {
  color: var(--color-accent-2);
}

/* --- Buttons --------------------------------------------------------------
   Structure:
     .btn            the box, carries the shape
     .btn__bg        the filled background (an ::after, so it can scale alone)
     .rise           the clipped label box holding two copies of the text

   On hover the background shrinks to 96% while the label slides up by its
   own height and the copy takes its place. */

.btn {
  --rise-height: var(--button-height); /* the label box matches the button */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-02);
  height: var(--button-height);
  padding-inline: var(--gap-05);
  border-radius: var(--radius-medium);
  font-size: var(--text-medium);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  white-space: nowrap;
  isolation: isolate;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--btn-fill, transparent);
  backdrop-filter: var(--btn-blur, none);
  transition: transform var(--duration) var(--ease-in-out-quad),
    opacity var(--duration) var(--ease-in-out-quad),
    background-color var(--duration) var(--ease-in-out-quad);
  transition-delay: 80ms;
}

.btn:hover::after {
  transform: scale(0.96);
  opacity: 0.96;
}

.btn--primary {
  --btn-fill: var(--color-ink);
  color: var(--color-surface);
}

.btn--surface {
  --btn-fill: var(--color-surface-3);
}

.btn--glass {
  --btn-fill: var(--glass);
  --btn-blur: blur(40px);
}

.btn--small {
  --rise-height: var(--button-height-small);
  height: var(--button-height-small);
  padding-inline: var(--gap-04);
  font-size: var(--text-small);
}

/* Label that slides up on hover. Two copies stacked in a clipped box:
   the first leaves through the top, the second arrives from the bottom. */
.rise {
  position: relative;
  display: block;
  height: var(--rise-height, 1.5em);
  overflow: clip;
}

.rise__label {
  display: block;
  line-height: var(--rise-height, inherit);
  transition: transform 400ms var(--ease-out-quint);
}

.rise__label--copy {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

/* Without JavaScript the label slides as one block. */
.btn:hover .rise:not(.is-split) .rise__label,
.result:hover .rise:not(.is-split) .rise__label {
  transform: translateY(-100%);
}

.btn:hover .rise:not(.is-split) .rise__label--copy,
.result:hover .rise:not(.is-split) .rise__label--copy {
  transform: translateY(0);
}

/* With JavaScript each letter slides on its own. --letter is 0 in the middle
   of the word and 1 at both ends, so the centre leads and the edges follow.
   The whole stagger fits in 20ms: it is meant to be felt, not seen. */
.rise__letter {
  display: inline-block;
  white-space: pre;
  transition: transform 400ms var(--ease-out-quint);
  transition-delay: calc(var(--letter, 0) * 20ms);
}

.btn:hover .rise.is-split .rise__letter,
.result:hover .rise.is-split .rise__letter {
  transform: translateY(-100%);
}

/* Variant with a rail: the icon rotates and a bar sweeps across. */
.btn--rail {
  overflow: clip;
}

.btn--rail .btn__arrow {
  transition: transform var(--duration) var(--ease-in-out-cubic);
}

.btn--rail:hover .btn__arrow {
  transform: rotate(-45deg);
}

/* Round icon button (slider arrows) */
.round-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height);
  height: var(--button-height);
  border-radius: 50%;
  background-color: var(--color-surface-3);
  color: var(--color-ink);
  transition: background-color var(--duration-fast) var(--ease-out-cubic),
    transform var(--duration-fast) var(--ease-out-cubic);
}

.round-btn:hover {
  background-color: var(--color-ink);
  color: var(--color-surface);
}

.round-btn[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
}

/* --- Glass widget --------------------------------------------------------- */

.widget {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 280px;
  height: 280px;
  padding: var(--gap-06);
  border-radius: var(--radius-small);
}

.widget--glass {
  background-color: var(--glass);
  backdrop-filter: blur(40px);
  color: var(--on-media);
}

.widget--glass .heading {
  color: var(--on-media);
}

.widget__foot {
  display: flex;
  align-items: center;
  gap: var(--gap-02);
  color: var(--on-media-muted);
}

/* --- Service card (solutions) --------------------------------------------- */

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  padding: var(--gap-07);
  border-radius: var(--radius-medium);
  overflow: clip;
  color: var(--on-media);
  isolation: isolate;
}

.service__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.service::after {
  /* Dark gradient so the label stays readable on any photo */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    180deg,
    transparent 40%,
    color-mix(in srgb, #000 55%, transparent)
  );
}

/* The link covers the whole card: the entire card is clickable. */
.service__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.service__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-01);
}

.service__body .heading,
.service__body .text {
  color: var(--on-media);
}

.service__body .heading__muted {
  color: var(--on-media-muted);
}

/* --- Spotlight card (tabs and process steps) ------------------------------ */

.spotlight {
  display: flex;
  gap: var(--gap-02);
  min-height: 616px; /* photo half fills the card, as in the reference */
  padding: var(--gap-02);
  border-radius: var(--radius-large);
  background-color: var(--color-surface-2);
}

.spotlight--light {
  background-color: var(--color-surface-2);
}

.spotlight__media {
  flex: 1 1 55%;
  border-radius: calc(var(--radius-large) - var(--gap-02));
  overflow: clip;
}

.spotlight__body {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-08);
  padding: var(--gap-06);
}

/* --- Result card (case studies) ------------------------------------------- */

.result {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-medium);
  overflow: clip;
  color: var(--on-media);
  isolation: isolate;
}

.result__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.result__media .media-fill {
  transition: transform var(--duration) var(--ease-in-out-cubic);
}

.result:hover .media-fill {
  transform: scale(1.08);
}

.result::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, #000 25%, transparent),
    color-mix(in srgb, #000 60%, transparent)
  );
}

.result__link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.result__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--gap-08);
  padding: var(--gap-07);
}

.result__body .heading {
  color: var(--on-media);
}

.result__body .heading__muted {
  color: var(--on-media-muted);
}

.result__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-04);
}

.result__meta .text {
  color: var(--on-media-muted);
}

.result__cta {
  color: var(--on-media);
}

/* --- Small pieces --------------------------------------------------------- */

.story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-01);
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-02);
}

.nav-item {
  color: var(--ink-64);
  transition: color var(--duration-fast) var(--ease-out-cubic);
}

.nav-item:hover {
  color: var(--color-ink);
}

.nav-item--large {
  font-size: var(--text-large);
  line-height: var(--text-large-height);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.rating {
  display: flex;
  flex-direction: column;
  gap: var(--gap-02);
}

.rating__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-accent-2);
}

.rating__stars svg {
  width: 16px;
  height: 16px;
}

/* --- Background video control --------------------------------------------- */

.video-toggle {
  position: absolute;
  right: var(--gap-07);
  bottom: var(--gap-07);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height);
  height: var(--button-height);
  border-radius: 50%;
  background-color: var(--glass);
  backdrop-filter: blur(40px);
  color: var(--on-media);
  transition: background-color var(--duration-fast) var(--ease-out-cubic);
}

.video-toggle:hover {
  background-color: var(--glass-hover);
}

.video-toggle__play {
  display: none;
}

.video-toggle.is-paused .video-toggle__play {
  display: inline-flex;
}

.video-toggle.is-paused .video-toggle__pause {
  display: none;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  pointer-events: none; /* the bar catches clicks, the empty space does not */
}

.site-header > * {
  pointer-events: auto;
}

/* --- Announcement strip --------------------------------------------------- */

/* The strip opts OUT of the inversion, and that is the whole trick.
   `.is-inverted` on the bar swaps --color-ink for a light tone so the nav can
   sit on a dark section. The strip does not follow: its background is always
   the accent, a light colour. Without these re-declarations the panel inherits
   "text for dark backgrounds" while sitting on lime — the title came out at
   1.20:1 and the icons, painted with the accent itself, at 1.00:1.

   The list mirrors `.is-inverted` line for line, with the light values: a
   custom property is substituted where it is DECLARED, so the derived --ink-*
   tokens have to be declared again here too. */
.promo {
  --color-surface: #f4f6f0;
  --color-surface-2: #ffffff;
  --color-surface-3: #dfe5d6;
  --color-ink: #14201a;
  /* Icons: the regular --color-accent-2 is olive on lime (1.59:1). On this
     background they take the ink instead — 9.5:1. */
  --color-accent-2: var(--color-ink);
  --ink-64: color-mix(in srgb, var(--color-ink) 64%, transparent);
  --ink-48: color-mix(in srgb, var(--color-ink) 48%, transparent);
  --ink-12: color-mix(in srgb, var(--color-ink) 12%, transparent);

  position: relative;
  background-color: var(--color-accent);
  color: var(--color-ink);
  transition: transform var(--duration) var(--ease-in-out-cubic);
}

/* Scrolled past the top: the strip tucks away behind the bar. */
.site-header.is-scrolled .promo {
  transform: translateY(-32px);
}

.promo__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-02);
  width: 100%;
  height: 32px;
}

/* Lime is a light background: ink at 48% only reaches 2.90:1 on it. The 64%
   token — already in the palette — gives 4.55:1 without inventing a value. */
.promo .heading__muted {
  color: var(--ink-64);
}

.promo__chevron {
  transition: transform var(--duration-fast) linear;
}

.promo.is-open .promo__chevron {
  transform: rotate(-180deg);
}

.promo__panel {
  height: 0;
  overflow: clip;
  background-color: var(--color-accent);
  transition: height var(--duration) var(--ease-in-out-quart);
}

.promo__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--gap-08);
  padding-block: var(--gap-08);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-in-out-cubic);
  transition-delay: 400ms;
}

.promo.is-open .promo__content {
  opacity: 1;
}

.promo__left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
  align-items: flex-start;
  max-width: 480px;
}

.promo__right {
  display: flex;
  flex-direction: column;
  gap: var(--gap-06);
}

.incentives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-06);
  margin: 0;
}

.incentives__item {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
}

/* --- Navigation bar ------------------------------------------------------- */

.navbar {
  padding: var(--gap-04) var(--container-padding) 0;
  transition: transform var(--duration) var(--ease-in-out-cubic);
  transition-delay: 100ms;
}

.site-header.is-scrolled .navbar {
  transform: translateY(-32px);
}

.navbar__inner {
  /* 10 of the 12 columns: the bar never spans the full container. */
  width: 87%;
  max-width: calc(var(--container-width) * 0.83);
  margin-inline: auto;
  border-radius: var(--radius-small);
  background-color: var(--glass);
  backdrop-filter: blur(40px);
  color: var(--ink-64);
  overflow: clip;
  transition: background-color var(--duration-fast) var(--ease-out-cubic);
}

/* Solid while a panel is open, so the links stay readable. */
.navbar__inner.is-solid {
  background-color: var(--color-surface);
}

.navbar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  padding-inline: var(--gap-02);
}

.navbar__left,
.navbar__right {
  display: flex;
  align-items: center;
  gap: var(--gap-02);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-02);
  padding-inline: var(--gap-03);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-large);
  font-weight: var(--weight-medium);
  letter-spacing: -0.5px;
}

.brand__mark {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: var(--color-accent-2);
}

.brand--large {
  font-size: var(--h4-size);
  letter-spacing: var(--h4-letter);
  padding-inline: 0;
}

.brand--large .brand__mark {
  width: 32px;
  height: 32px;
}

.nav {
  display: flex;
  align-items: center;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-01);
  height: var(--button-height-small);
  padding-inline: var(--gap-04);
  border-radius: var(--radius-medium);
  color: var(--ink-64);
  transition: color var(--duration-fast) var(--ease-out-cubic),
    background-color var(--duration-fast) var(--ease-out-cubic);
}

.nav__link:hover,
.nav__link[aria-expanded="true"] {
  color: var(--color-ink);
}

.nav__link--icon {
  gap: var(--gap-02);
}

/* --- Mega-menu panels ----------------------------------------------------- */

.panels {
  height: 0;
  overflow: clip;
  transition: height var(--duration-fast) var(--ease-out-quart);
}

.panel {
  display: none;
  opacity: 0;
  padding: var(--gap-02);
  transition: opacity 200ms var(--ease-out-cubic);
}

.panel.is-open {
  display: block;
}

.panel.is-visible {
  opacity: 1;
}

.panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--gap-08);
  padding: var(--gap-06);
  border-radius: var(--radius-small);
  background-color: var(--color-surface-2);
}

.panel__featured {
  display: flex;
  flex-direction: column;
  gap: var(--gap-02);
}

.featured {
  display: flex;
  align-items: center;
  gap: var(--gap-04);
  padding: var(--gap-04);
  border-radius: var(--radius-small);
  transition: background-color var(--duration-fast) var(--ease-out-cubic);
}

.featured:hover {
  background-color: var(--color-surface-3);
}

.featured .icon {
  color: var(--color-accent-2);
}

.featured__text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-01);
}

.panel__main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-08);
}

.panel__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-02);
  width: 100%;
}

.panel__grid .service {
  padding: var(--gap-05);
}

.panel__footer {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-04);
  padding: var(--gap-04) var(--gap-06);
}

/* --- Mobile menu ---------------------------------------------------------- */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--button-height-small);
  height: var(--button-height-small);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface-3);
}

.burger span {
  display: block;
  width: 16px;
  height: 2px;
  margin-inline: auto;
  background-color: var(--color-ink);
  transition: transform var(--duration-fast) var(--ease-out-cubic);
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  opacity: 0;
  transition: opacity 220ms var(--ease-out-cubic);
  transition-delay: 100ms;
}

.mobile-menu.is-open {
  display: block;
}

.mobile-menu.is-visible {
  opacity: 1;
}

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-07);
  padding: var(--gap-06);
}

/* Dimmer behind an open panel */
.nav-veil {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--veil);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-out-cubic);
}

.nav-veil.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   7. Page sections, top to bottom
   ========================================================================== */

/* --- Hero -----------------------------------------------------------------
   Sticky, full height. As the next section rides over it, main.js writes
   --hero-progress (0 → 1) and the two rules below consume it: the video
   fades to 32% while the text drifts up 200px. */

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  justify-content: center;
  padding-top: 200px;
  padding-bottom: var(--section-padding);
}

.hero .section-media .media-fill {
  opacity: calc(1 - var(--hero-progress, 0) * 0.68);
  transform: scale(calc(1 + var(--hero-progress, 0) * 0.08));
}

.hero .section-content {
  opacity: calc(1 - var(--hero-progress, 0) * 0.76);
  transform: translateY(calc(var(--hero-progress, 0) * -200px));
}

.hero__container {
  position: relative;
  z-index: 2;
}

.hero .section-header--split {
  align-items: flex-end;
}

.hero__summary {
  display: flex;
  flex-direction: column;
  gap: var(--gap-07);
  max-width: 460px;
}

/* --- Pitch ---------------------------------------------------------------- */

.pitch {
  z-index: 2;
  margin-top: calc(var(--container-padding) * -1);
  border-radius: var(--radius-large) var(--radius-large) 0 0;
}

.capsule {
  position: relative;
  width: 87%; /* same 10 columns as the navigation bar */
  margin-inline: auto;
  height: 800px;
  border-radius: var(--radius-pill);
  overflow: clip;
  color: var(--on-media);
}

.capsule .media-fill {
  position: absolute;
  inset: 0;
}

.capsule__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--gap-07);
  text-align: center;
  color: var(--on-media-muted);
}

.capsule__badge {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-02);
  height: var(--button-height);
  padding-inline: var(--gap-05);
  border-radius: var(--radius-medium);
  background-color: var(--glass);
  backdrop-filter: blur(40px);
  font-weight: var(--weight-medium);
}

.capsule__time {
  color: var(--on-media-muted);
}

/* --- Solutions slider -----------------------------------------------------
   Native scroll-snap. The padding on the track is doubled by a spacer in
   main.js: a scroll container ignores its own end padding, which would
   otherwise make the last card unreachable. */

.slider {
  display: flex;
  flex-direction: column;
  gap: var(--gap-07);
}

.slider__track {
  display: flex;
  gap: var(--gap-04);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Without this the browser snaps the first card to the very edge of the
     box and eats the left padding on load. */
  scroll-padding-inline-start: var(--container-padding);
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Bleed to the screen edges, so a card can sit under the gutter. */
  margin-inline: calc(var(--container-padding) * -1);
  padding-inline-start: var(--container-padding);
}

/* A scroll container may ignore its own end padding, which would leave the
   last card unreachable. This flex item is real content, so it always counts.
   Check it with: track.scrollWidth - track.clientWidth >= needed offset. */
.slider__track::after {
  content: "";
  flex: 0 0 calc(var(--container-padding) - var(--gap-04));
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  flex: 0 0 42%; /* 2.33 cards visible, same rhythm as the reference */
  scroll-snap-align: start;
}

.slider__controls {
  display: flex;
  gap: var(--gap-02);
}

/* --- Why switch (tabs) ---------------------------------------------------- */

.switch .tabs-slider {
  display: flex;
  flex-direction: column;
  gap: var(--gap-08);
}

.tabs-nav {
  display: flex;
  gap: var(--gap-02);
  align-self: center;
  padding: var(--gap-02);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface-2);
}

.tab-btn {
  height: var(--button-height-small);
  padding-inline: var(--gap-04);
  border-radius: var(--radius-medium);
  color: var(--ink-64);
  transition: background-color var(--duration-fast) var(--ease-out-cubic),
    color var(--duration-fast) var(--ease-out-cubic);
}

.tab-btn:hover {
  color: var(--color-ink);
}

.tab-btn.is-active {
  background-color: var(--color-surface-3);
  color: var(--color-ink);
}

/* Native horizontal scrolling, like the solutions slider. The tabs drive it
   with scrollTo, but dragging and swiping work on their own — including with
   JavaScript off, which a transform-based track cannot do.

   The side padding is what centres a card: half the leftover width, plus the
   gutter cancelled by the negative margin. Cards therefore peek in from both
   edges of the screen, exactly like the reference. */
.tabs-viewport {
  --tab-card: min(955px, 68vw);
  --tab-gap: var(--gap-10);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-inline: calc(var(--container-padding) * -1);
  padding-inline-start: calc((100% - var(--tab-card)) / 2 + var(--container-padding));
}

.tabs-viewport::-webkit-scrollbar {
  display: none;
}

.tabs-track {
  display: flex;
  gap: var(--tab-gap);
}

/* End padding of a scroll container is not part of its scrollable width: the
   last card would stop short of the centre. This spacer is a real flex item,
   so it always counts. Measured check:
   viewport.scrollWidth - viewport.clientWidth >= offset needed by card 4. */
.tabs-track::after {
  content: "";
  flex: 0 0 calc((100vw - var(--tab-card)) / 2 + 2px);
  /* Cancel the flex gap in front of the spacer: what it adds to the
     scrollable width is then exactly the padding the last card needs. */
  margin-inline-start: calc(var(--tab-gap) * -1);
}

.tabs-track .spotlight {
  flex: 0 0 var(--tab-card);
  width: var(--tab-card);
  scroll-snap-align: center;
  opacity: 0.4;
  transition: opacity 750ms var(--ease-in-out-cubic);
}

.tabs-track .spotlight.is-active {
  opacity: 1;
}

/* --- Story ---------------------------------------------------------------- */

.story {
  min-height: 100vh;
  justify-content: flex-end;
}

.story .container {
  position: relative;
  z-index: 3;
}

/* --- Process -------------------------------------------------------------- */

.process__layout {
  display: grid;
  grid-template-columns: 332px minmax(0, 1fr);
  gap: var(--gap-08);
  align-items: start;
}

.process__sidebar {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-02);
}

.step-link {
  display: flex;
  align-items: center;
  gap: var(--gap-06);
  padding: var(--gap-04) var(--gap-06);
  border-radius: var(--radius-large);
  color: var(--ink-64);
  transition: background-color var(--duration-fast) var(--ease-out-cubic),
    color var(--duration-fast) var(--ease-out-cubic);
}

.step-link__num {
  font-family: var(--font-label);
  font-size: var(--text-small);
  color: var(--ink-48);
}

.step-link:hover {
  color: var(--color-ink);
}

.step-link.is-active {
  background-color: var(--color-surface-3);
  color: var(--color-ink);
}

.step-link.is-active .step-link__num {
  color: var(--color-ink);
}

.process__slides {
  display: flex;
  flex-direction: column;
  gap: var(--gap-09);
}

/* --- Statement ------------------------------------------------------------ */

.statement {
  min-height: 100vh;
  justify-content: center;
}

.statement .container {
  position: relative;
  z-index: 2;
}

/* --- Cases ---------------------------------------------------------------- */

.cases__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-02);
}

/* --- FAQ ------------------------------------------------------------------
   Native <details>: open, close and keyboard support come for free. main.js
   only adds the height animation and closes the other entries. */

.faq__list {
  display: flex;
  flex-direction: column;
}

.qa {
  border-bottom: 1px solid var(--ink-12);
}

.qa__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-06);
  padding-block: var(--gap-06);
  cursor: pointer;
  list-style: none;
}

.qa__question::-webkit-details-marker {
  display: none;
}

.qa__sign {
  position: relative;
  flex: none;
  width: var(--button-height);
  height: var(--button-height);
  border-radius: 50%;
  background-color: var(--color-surface-3);
}

/* Two bars make the plus; the vertical one rotates to 90° when open. */
.qa__sign i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  background-color: var(--color-ink);
}

.qa__sign i:last-child {
  transform: rotate(90deg);
  transition: transform var(--duration-fast) var(--ease-in-out-cubic);
}

.qa[open] .qa__sign i:last-child {
  transform: rotate(180deg);
}

.qa__answer {
  padding-bottom: var(--gap-06);
  max-width: 720px;
}

/* Height is animated by main.js; this keeps the closed state clean. */
.js .qa__answer {
  overflow: clip;
}

.help-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-08);
  padding: var(--gap-07);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface-3);
}

/* --- Closing call to action ----------------------------------------------- */

.cta {
  min-height: 616px;
  justify-content: center;
}

.cta .container {
  position: relative;
  z-index: 2;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;
  padding-block: var(--container-padding);
  border-radius: var(--radius-large) var(--radius-large) 0 0;
  background-color: var(--color-surface);
}

.footer__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-11);
}

.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--gap-11);
}

.footer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-08);
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-08);
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-02);
  margin-top: var(--gap-04);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--gap-08);
}

.footer__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-04);
  flex-wrap: wrap;
}

.footer__extra {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-08);
}

.footer__note {
  max-width: 672px;
}

.footer__rating {
  width: 320px;
  flex: none;
}

/* ==========================================================================
   8. Responsive
   --------------------------------------------------------------------------
   Three breakpoints, matching the original: 991px, 767px and 479px.
   Most of the work happens in the tokens — sizes shrink once, everywhere.
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --h1-size: 56px;
    --h1-height: 56px;
    --h2-size: 40px;
    --h2-height: 44px;
    --h3-size: 36px;
    --h3-height: 40px;
    --h4-size: 28px;
    --h4-height: 32px;
    --h5-size: 24px;
    --h5-height: 28px;
    --h6-size: 20px;
    --h6-height: 24px;
    --section-padding: 80px;
    --section-padding-large: 96px;
  }

  .navbar__top {
    padding-inline: var(--gap-02);
  }

  .nav,
  .nav__link--icon {
    display: none;
  }

  .burger {
    display: flex;
  }

  .hero {
    padding-top: 160px;
  }

  .capsule {
    height: 480px;
  }

  .process__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-08);
  }

  .process__sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .slider__slide {
    flex-basis: 64%;
  }

  .footer__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap-08) var(--gap-06);
  }

  .footer__extra {
    flex-direction: column;
    gap: var(--gap-06);
  }

  .footer__rating {
    width: auto;
  }
}

@media (max-width: 767px) {
  :root {
    --h1-size: 40px;
    --h1-height: 40px;
    --h1-letter: -1.25px;
    --h2-size: 32px;
    --h2-height: 36px;
    --h2-letter: -1px;
    --h3-size: 28px;
    --h3-height: 32px;
    --h3-letter: -0.5px;
    --h4-size: 24px;
    --h4-height: 28px;
    --h4-letter: -0.25px;
    --h5-size: 20px;
    --h5-height: 24px;
    --h6-size: 16px;
    --h6-height: 24px;
    --text-large: 16px;
    --text-large-height: 24px;
    --text-small: 12px;
    --text-small-height: 16px;
    --label-size: 10px;
    --label-height: 10px;
    --label-letter: 1px;
    --section-padding: 64px;
    --section-padding-large: 80px;
    --container-padding: 24px;
    --radius-large: 24px;
    --radius-medium: 20px;
    --radius-small: 16px;
    --navbar-height: 40px;
    --gap-10: 48px;
    --gap-11: 64px;
  }

  .section-content {
    gap: var(--gap-09);
  }

  .section-header--split {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    padding-top: 120px;
  }

  .hero__summary {
    max-width: none;
  }

  .promo__content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-07);
  }

  .incentives {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-04);
  }

  .navbar__inner {
    border-radius: 20px;
  }

  .brand {
    font-size: var(--text-medium);
  }

  .spotlight {
    flex-direction: column;
    min-height: 0;
  }

  .spotlight__media {
    aspect-ratio: 4 / 3;
  }

  .spotlight__body {
    gap: var(--gap-06);
    padding: var(--gap-05);
  }

  .tabs-nav {
    align-self: flex-start;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }

  .tabs-viewport {
    --tab-card: min(342px, 84vw);
    --tab-gap: var(--gap-07);
  }

  .slider__slide {
    flex-basis: min(342px, 84vw);
  }

  .capsule {
    height: 400px;
  }

  .capsule__badge {
    height: var(--button-height-small);
    font-size: var(--text-small);
  }

  .widget {
    width: 100%;
    height: auto;
    min-height: 200px;
    padding: var(--gap-05);
  }

  .cases__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .result__body {
    padding: var(--gap-05);
  }

  .result__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-04);
  }

  .help-box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-06);
    padding: var(--gap-06);
  }

  .footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-06);
  }

  .footer__links {
    grid-template-columns: minmax(0, 1fr);
  }

  .video-toggle {
    right: var(--gap-05);
    bottom: var(--gap-05);
    width: var(--button-height-small);
    height: var(--button-height-small);
  }
}

@media (max-width: 479px) {
  .buttons--row {
    flex-direction: column;
    align-items: stretch;
  }

  .buttons--row .btn {
    justify-content: center;
  }

  .process__sidebar {
    flex-direction: column;
  }
}

/* ==========================================================================
   9. Reduced motion
   --------------------------------------------------------------------------
   Visitors who ask for less movement get the final state immediately.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal],
  .js [data-reveal] > *,
  .js [data-reveal] .label,
  .js [data-reveal] .text,
  .js .line {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-parallax] .media-fill,
  [data-parallax="strong"] .media-fill {
    transform: none;
  }

  .hero .section-media .media-fill,
  .hero .section-content {
    opacity: 1;
    transform: none;
  }
}