/* ======================================================
   RESET
====================================================== */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family: var(--font-body);

  font-size: var(--fs-body);

  line-height: var(--lh-body);

  background: var(--limestone);
  color: var(--obsidian);

  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

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

button {
  font: inherit;
}

/* Base typography: any heading or paragraph, on any page, lands on the
   scale in the right typeface even without a class of its own. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);

  font-weight: 700;

  letter-spacing: -0.03em;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 600; }
h5, h6 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 600; }

p {
  font-size: var(--fs-body);

  line-height: var(--lh-body);
}

/* ======================================================
   VARIABLES
====================================================== */

:root {
  --padding: clamp(24px, 5vw, 80px);

  /* KANZO palette (2026-09-24) — the only colours on the site (plus pure
     white on the hero photo and the preloader). See the theme block below. */
  --mist: #bebebf;
  --pebble: #9fa4a2;
  --limestone: #dcdad9;
  --graphite: #494947;
  --gravel: #7b787a;
  --obsidian: #1a1a1a;

  --obsidian-rgb: 26, 26, 26;
  --limestone-rgb: 220, 218, 217;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* TYPEFACES (2026-09-24): Syne for headlines, Plus Jakarta Sans for
     everything else. Barlow Condensed survives only in the giant hero
     KANZO word, which stays exactly as it is. */
  --font-display: "Syne", "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  /* TYPE SCALE (2026-09-24) — desktop values here; tablet (≤1024px) and
     mobile (≤767px) below. Every font-size on the page comes from these,
     except the giant KANZO words (hero and footer), which are artwork. */
  --fs-display: 96px;  --lh-display: .95;
  --fs-h1: 72px;       --lh-h1: 1.02;
  --fs-h2: 56px;       --lh-h2: 1.08;
  --fs-h3: 40px;       --lh-h3: 1.12;
  --fs-h4: 30px;       --lh-h4: 1.15;
  --fs-h5: 24px;       --lh-h5: 1.2;
  --fs-lead: 20px;     --lh-lead: 1.55;
  --fs-body: 17px;     --lh-body: 1.6;
  --fs-small: 15px;    --lh-small: 1.55;
  --fs-nav: 15px;
  --fs-button: 15px;
  --fs-label: 13px;
  --fs-caption: 13px;  --lh-caption: 1.45;
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 72px;
    --fs-h1: 60px;
    --fs-h2: 48px;
    --fs-h3: 36px;
    --fs-h4: 28px;
    --fs-h5: 22px;
    --fs-lead: 19px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 52px;
    --fs-h1: 44px;
    --fs-h2: 36px;
    --fs-h3: 30px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-lead: 18px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-nav: 14px;
    --fs-button: 14px;
    --fs-label: 12px;
    --fs-caption: 12px;
  }
}

/* Narrow Android devices need a slightly tighter headline step so long
   Spanish words never create horizontal scrolling. */
@media (max-width: 360px) {
  :root { --fs-h1: 37px; }
}

/* ======================================================
   SECTIONS
====================================================== */

.section {
  position: relative;

  min-height: 92vh;

  padding: 150px var(--padding) 72px;

  display: grid;

  grid-template-columns:
    minmax(60px, 0.18fr)
    1fr;

  align-items: end;

  border-bottom: 1px solid var(--line);
}

.content {
  width: 100%;

  max-width: 1180px;
}

/* NUMBER */

.section-index {
  align-self: start;

  margin-top: 7px;

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.14em;

  color: var(--muted);
}

/* EYEBROW */

.eyebrow,
.section-label {
  display: block;

  margin-bottom: 32px;

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--muted);
}

/* TYPOGRAPHY */

.section h1,
.section h2 {
  margin: 0;

  max-width: 1120px;

  font-family: var(--font-display);

  font-weight: 700;

  letter-spacing: -0.03em;
}

.section h1 {
  font-size: var(--fs-h1);

  line-height: var(--lh-h1);
}

.section h2 {
  font-size: var(--fs-h2);

  line-height: var(--lh-h2);
}

/* ======================================================
   TEXT LINK
====================================================== */

.text-link {
  display: inline-flex;

  align-items: center;

  gap: 14px;

  margin-top: 48px;

  padding-bottom: 7px;

  border-bottom: 1px solid currentColor;

  font-size: var(--fs-button);

  font-weight: 600;

  line-height: 1;

  transition:
    gap 0.3s ease,
    color 0.3s ease;
}

.text-link:hover {
  gap: 22px;

  color: var(--muted);
}

/* ======================================================
   COLOR THEMES
====================================================== */

/* Every surface sets four roles, all from the palette:
   --surface (background), --text, --muted (eyebrows, numbers, secondary
   copy) and --line (hairlines). Light surfaces pair with GRAPHITE for muted
   text (PEBBLE with OBSIDIAN), dark ones with PEBBLE / MIST; every pair
   clears WCAG AA (4.5:1). */

:root,
.theme-limestone {
  --surface: var(--limestone);
  --text: var(--obsidian);
  --muted: var(--graphite);
  --line: rgba(var(--obsidian-rgb), .12);
  --line-strong: rgba(var(--obsidian-rgb), .22);
}

.theme-mist {
  --surface: var(--mist);
  --text: var(--obsidian);
  --muted: var(--graphite);
  --line: rgba(var(--obsidian-rgb), .14);
  --line-strong: rgba(var(--obsidian-rgb), .24);
}

.theme-pebble {
  --surface: var(--pebble);
  --text: var(--obsidian);
  --muted: var(--obsidian); /* GRAPHITE on PEBBLE is only 3.6:1 */
  --line: rgba(var(--obsidian-rgb), .16);
  --line-strong: rgba(var(--obsidian-rgb), .28);
}

.theme-graphite {
  --surface: var(--graphite);
  --text: var(--limestone);
  --muted: var(--mist);
  --line: rgba(var(--limestone-rgb), .14);
  --line-strong: rgba(var(--limestone-rgb), .28);
}

.theme-obsidian {
  --surface: var(--obsidian);
  --text: var(--limestone);
  --muted: var(--pebble);
  --line: var(--graphite);
  --line-strong: var(--gravel);
}

.theme-limestone,
.theme-mist,
.theme-pebble,
.theme-graphite,
.theme-obsidian {
  background: var(--surface);

  color: var(--text);
}

::selection {
  background: var(--obsidian);

  color: var(--limestone);
}

.theme-obsidian ::selection,
.theme-graphite ::selection {
  background: var(--limestone);

  color: var(--obsidian);
}

/* ======================================================
   02 — SERVICES (UI Vault sections/process/process-005)
   Intro, then a 400vh "story" whose stage sticks to the
   screen: tabs on the left, one panel at a time (copy +
   visual). Scrolling moves through the four panels
   (script.js sets .is-active and data-dir on each panel).
   Transitions are CSS: the panel slides and fades, the copy
   rises, the visual opens top-down (clip-path) and its
   pieces arrive one by one (--n). Below 950px the panels
   stack and each plays its entrance when it scrolls in.
====================================================== */

.services-section {
  padding: 150px var(--padding) 0;

  border-bottom: 1px solid var(--line);
}

.services-intro {
  max-width: 1500px;

  margin: 0 auto;
}

.services-intro h2 {
  margin: 0 0 28px;

  font-size: var(--fs-h1);

  line-height: var(--lh-h1);
}

.services-intro h2 em {
  color: var(--muted);

  font-style: normal;
}

.services-intro > p {
  max-width: 520px;

  margin: 0 0 0 auto;

  color: var(--muted);
}

.services-story {
  height: 400vh;
}

.services-sticky {
  position: sticky;

  top: 0;

  height: 100vh;

  max-width: 1600px;

  margin: 0 auto;

  /* the fixed navbar (72) + a little air; the stage starts right under it,
     so it sits close to the intro instead of floating mid-screen */
  padding-top: 104px;

  display: grid;

  grid-template-columns: 270px 1fr;

  gap: 3vw;

  align-items: start;
}

/* SIDE COLUMN — the tabs on top, the "next step" card at the bottom, the
   column as tall as the stage so the card closes its lower-left corner */

.services-side {
  height: min(calc(100vh - 150px), 720px);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 24px;
}

.services-next {
  padding: 22px 20px 20px;

  border: 1px solid var(--line-strong);

  border-radius: 4px;
}

.services-next small {
  display: block;

  color: var(--muted);

  font-size: var(--fs-caption);

  line-height: 1;

  letter-spacing: .08em;
}

.services-next p {
  margin: 12px 0 18px;

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

.services-next__cta {
  --fill: var(--graphite);
  --fill-text: var(--limestone);

  height: 46px;

  display: inline-flex;

  align-items: center;

  gap: 16px;

  padding: 0 5px 0 18px;

  border-radius: 999px;

  background: var(--obsidian);

  color: var(--limestone);

  font-size: var(--fs-button);

  font-weight: 600;

  line-height: 1;
}

.services-next__cta .hero-arrow {
  width: 36px;
  height: 36px;

  background: var(--limestone);

  color: var(--obsidian);

  font-size: var(--fs-body);
}

.services-next__cta:hover .hero-arrow {
  transform: rotate(45deg);
}

/* TABS — plain bordered boxes; the active one takes the text colour. A 2px
   bar along the bottom of each box fills as the sequence moves on (--fill,
   0 → 1, set in script.js): done tabs full, the active one filling with the
   scroll — or with the autoplay countdown — and the next ones empty. */

.services-tabs {
  display: grid;

  gap: 8px;
}

.services-tabs button {
  position: relative;

  overflow: hidden;

  width: 100%;

  padding: 16px 18px;

  border: 1px solid var(--line-strong);

  border-radius: 4px;

  background: none;

  color: var(--muted);

  text-align: left;

  cursor: pointer;

  transition:
    color .35s ease,
    border-color .35s ease;
}

.services-tabs button span {
  display: block;

  font-size: var(--fs-nav);

  font-weight: 500;

  line-height: 1.3;
}

.services-tabs button small {
  display: block;

  margin-top: 4px;

  font-size: var(--fs-caption);

  line-height: var(--lh-caption);
}

.services-tabs button:hover {
  color: var(--text);
}

.services-tabs button.is-active {
  border-color: var(--text);

  color: var(--text);
}

.services-tabs button.is-active span {
  font-weight: 600;
}

.services-tabs button:focus-visible {
  outline: 2px solid var(--text);

  outline-offset: 2px;
}

.services-tab__progress {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 2px;

  background: var(--text);

  transform: scaleX(var(--fill, 0));

  transform-origin: left;
}

/* STAGE + PANELS */

.services-stage {
  position: relative;

  height: min(calc(100vh - 150px), 720px);
}

.service-panel {
  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns: .7fr 1.3fr;

  gap: 4vw;

  align-items: stretch;

  opacity: 0;

  visibility: hidden;

  translate: 0 28px;

  transition:
    opacity .45s var(--ease-in-out),
    translate .75s var(--ease-out),
    visibility 0s linear .45s;
}

/* a panel already passed leaves upwards */
.service-panel[data-dir="past"] {
  translate: 0 -22px;
}

.service-panel.is-active {
  opacity: 1;

  visibility: visible;

  translate: 0 0;

  transition:
    opacity .45s var(--ease-in-out),
    translate .75s var(--ease-out),
    visibility 0s;
}

.service-copy {
  opacity: 0;

  translate: 0 30px;

  transition:
    opacity .7s var(--ease-out) .1s,
    translate .7s var(--ease-out) .1s;
}

.service-panel.is-active .service-copy {
  opacity: 1;

  translate: 0 0;
}

/* the copy starts level with the first tab */
.service-copy {
  padding-top: 18px;
}

.service-copy .eyebrow {
  margin-bottom: 20px;
}

.service-copy h3 {
  margin: 0 0 24px;

  font-size: var(--fs-h3);

  line-height: var(--lh-h3);

  font-weight: 700;
}

.service-copy p {
  max-width: 440px;

  margin: 0;

  color: var(--muted);
}

.service-copy > small {
  display: block;

  margin-top: 26px;

  color: var(--muted);

  font-size: var(--fs-caption);

  line-height: var(--lh-caption);

  letter-spacing: .04em;
}

/* VISUALS — shared */

.service-visual {
  position: relative;

  height: 100%;

  overflow: hidden;

  border-radius: 6px;

  background: var(--mist);

  clip-path: inset(0 0 100% 0);

  transition: clip-path .9s var(--ease-in-out);
}

.service-panel.is-active .service-visual {
  clip-path: inset(0 0 0 0);
}

/* the pieces laid over each picture arrive one by one */
.service-visual [style*="--n"] {
  opacity: 0;

  translate: 0 25px;

  transition:
    opacity .65s var(--ease-out),
    translate .65s var(--ease-out);

  transition-delay: calc(.25s + var(--n) * .07s);
}

.service-panel.is-active .service-visual [style*="--n"] {
  opacity: 1;

  translate: 0 0;
}

.service-photo {
  position: absolute;

  background-position: center;

  background-size: cover;

  filter: saturate(.55);
}

.service-visual img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: saturate(.55);
}

/* 01 — WEB: a workspace photo with a KANZO page floating over it */

.service-photo--main {
  inset: 0;

  background-image:
    linear-gradient(90deg, rgba(var(--obsidian-rgb), .02), rgba(var(--obsidian-rgb), .12)),
    url("../assets/images/services/workspace.webp");

  scale: 1.1;

  transition: scale 1.4s var(--ease-out);
}

.service-panel.is-active .service-photo--main {
  scale: 1;
}

.service-page {
  position: absolute;

  right: 7%;
  top: 14%;

  width: 60%;
  height: 72%;

  padding: 25px;

  background: var(--limestone);

  color: var(--obsidian);

  box-shadow: 0 28px 75px rgba(var(--obsidian-rgb), .18);
}

.service-page header {
  display: flex;

  justify-content: space-between;

  font-size: var(--fs-caption);

  line-height: 1;
}

.service-page header span {
  color: var(--graphite);
}

.service-page strong {
  display: block;

  margin: 40px 0 18px;

  font-family: var(--font-display);

  font-size: var(--fs-h4);

  line-height: var(--lh-h4);

  font-weight: 700;

  letter-spacing: -.03em;
}

.service-page img {
  position: absolute;

  right: 25px;
  bottom: 25px;

  width: 43%;
  height: 45%;
}

.service-page > small {
  position: absolute;

  left: 25px;
  bottom: 25px;

  color: var(--graphite);

  font-size: var(--fs-caption);
}

.service-tag {
  position: absolute;

  left: 20px;
  bottom: 20px;

  padding: 10px 15px;

  background: var(--limestone);

  color: var(--obsidian);

  font-size: var(--fs-caption);

  line-height: 1;
}

/* 02 — PRODUCTS: a mosaic of metric, photo, chart and systems tiles */

.service-visual--product {
  display: grid;

  grid-template-columns: 1.15fr .8fr .8fr;

  grid-template-rows: 1.1fr .9fr;

  gap: 8px;

  padding: 8px;
}

.service-tile {
  position: relative;

  overflow: hidden;

  padding: 25px;

  background: var(--limestone);

  color: var(--obsidian);
}

.service-tile small,
.service-tile span {
  font-size: var(--fs-caption);

  line-height: var(--lh-caption);
}

.service-tile--metric {
  grid-row: 1 / 3;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  background: var(--obsidian);

  color: var(--limestone);
}

.service-tile--metric small,
.service-tile--metric span {
  color: var(--pebble);
}

.metric-bar {
  height: 4px;

  margin-top: 16px;

  background: rgba(var(--limestone-rgb), .14);
}

.metric-bar i {
  display: block;

  width: 82%;
  height: 100%;

  background: var(--limestone);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 1.2s var(--ease-out) .5s;
}

.service-panel.is-active .metric-bar i {
  transform: scaleX(1);
}

/* weekly activity: seven bars that grow in turn, Friday's peak in obsidian */
.service-tile--chart {
  display: flex;

  flex-direction: column;
}

.service-tile--chart header {
  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 8px;
}

.service-tile--chart header b {
  font-size: var(--fs-caption);

  font-weight: 600;
}

.activity-bars {
  flex: 1;

  display: flex;

  align-items: flex-end;

  gap: 6px;

  margin-top: 18px;

  border-bottom: 1px solid rgba(var(--obsidian-rgb), .2);
}

.activity-bars span {
  flex: 1;

  height: var(--h);

  background: var(--pebble);

  border-radius: 2px 2px 0 0;

  transform: scaleY(0);

  transform-origin: bottom;

  transition: transform .8s var(--ease-out);

  transition-delay: calc(.45s + var(--i) * .06s);
}

.activity-bars span.is-peak {
  background: var(--obsidian);
}

.service-panel.is-active .activity-bars span {
  transform: scaleY(1);
}

.activity-days {
  display: flex;

  gap: 6px;

  margin: 8px 0 0;

  padding: 0;

  list-style: none;
}

.activity-days li {
  flex: 1;

  color: var(--graphite);

  font-size: var(--fs-caption);

  line-height: 1;

  text-align: center;
}

.service-tile--metric strong {
  font-family: var(--font-display);

  font-size: var(--fs-h1);

  line-height: var(--lh-h1);

  font-weight: 700;

  letter-spacing: -.04em;
}

.service-tile--photo {
  grid-column: 2 / 4;

  padding: 0;
}

/* the systems tile: circuit photo under a pebble veil */
.service-tile--systems {
  background: var(--pebble);
}

.service-tile--systems img {
  position: absolute;

  inset: 0;

  opacity: .35;

  mix-blend-mode: multiply;
}

.service-tile--systems span,
.service-tile--systems b {
  position: relative;
}

.service-tile--systems b {
  position: absolute;

  left: 22px;
  bottom: 22px;

  font-family: var(--font-display);

  font-size: var(--fs-h5);

  line-height: var(--lh-h5);

  font-weight: 600;
}

/* 03 — AUTOMATION: a flow of four nodes over a server-room photo */

.service-photo--servers {
  inset: 0;

  background-image:
    linear-gradient(90deg, rgba(var(--limestone-rgb), .9), rgba(var(--limestone-rgb), .3)),
    url("../assets/images/services/servers.webp");
}

/* the links are drawn edge-to-edge between the nodes by script.js, in the
   visual's own pixel space; each carries a gradient from its start node's
   colour to its end node's, a slow dash flow, and three pulses in turn */
.service-links {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.service-link {
  fill: none;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-dasharray: 6 8;

  opacity: 0;

  transition: opacity .6s ease .45s;
}

.service-panel.is-active .service-link {
  opacity: 1;

  animation: links-flow 1s linear infinite;
}

@keyframes links-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -14; }
}

.service-pulse {
  stroke: var(--limestone);

  stroke-width: 1.5;

  opacity: 0;

  transition: opacity .4s ease .9s;
}

.service-panel.is-active .service-pulse {
  opacity: 1;
}

/* "Running · 1,284 tasks automated this week": a limestone pill with a
   beating dot; the number climbs while the panel is showing (script.js) */
.automation-status {
  position: absolute;

  left: 20px;
  top: 20px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 10px 14px;

  border-radius: 999px;

  background: var(--limestone);

  color: var(--obsidian);

  font-size: var(--fs-caption);

  line-height: 1;

  box-shadow: 0 8px 24px rgba(var(--obsidian-rgb), .1);
}

.automation-status i {
  width: 8px;
  height: 8px;

  margin-right: 4px;

  border-radius: 50%;

  background: var(--obsidian);

  animation: status-pulse 1.8s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--obsidian-rgb), .35); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--obsidian-rgb), 0); }
}

.automation-status span:first-of-type::after {
  content: " ·";
}

.automation-status b {
  font-weight: 700;

  font-variant-numeric: tabular-nums;
}

.service-node {
  position: absolute;

  width: 118px;
  height: 118px;

  display: grid;

  place-content: center;

  border-radius: 50%;

  background: var(--limestone);

  color: var(--obsidian);

  text-align: center;

  box-shadow: 0 10px 40px rgba(var(--obsidian-rgb), .12);
}

.service-node small {
  margin-bottom: 4px;

  color: var(--graphite);

  font-size: var(--fs-caption);

  line-height: 1;

  letter-spacing: .06em;
}

.service-node b {
  font-size: var(--fs-body);

  font-weight: 600;

  line-height: 1.2;
}

/* each stage of the flow in its own palette colour; --node is also the
   start colour of the links leaving it (script.js reads it) */
/* the input is limestone like the page, its links start in GRAVEL so they
   still read on the light photo */
.service-node--1 { left: 4%;  top: 39%; --node: #7b787a; background: var(--limestone); }
.service-node--2 { left: 37%; top: 13%; --node: #1a1a1a; background: var(--obsidian); color: var(--limestone); }
.service-node--2 small { color: var(--pebble); }
.service-node--3 { left: 37%; bottom: 12%; --node: #494947; background: var(--graphite); color: var(--limestone); }
.service-node--3 small { color: var(--mist); }
.service-node--4 { right: 5%; top: 39%; --node: #9fa4a2; background: var(--pebble); }
.service-node--4 small { color: var(--obsidian); }

/* a soft ring breathes out of every node, one after the other */
.service-node::after {
  content: "";

  position: absolute;

  inset: 0;

  border: 1px solid var(--node);

  border-radius: 50%;

  opacity: 0;
}

.service-panel.is-active .service-node::after {
  animation: node-ripple 2.4s ease-out infinite;

  animation-delay: calc(1s + var(--n) * .6s);
}

@keyframes node-ripple {
  from { opacity: .7; scale: 1; }
  to   { opacity: 0;  scale: 1.35; }
}

/* 04 — GROWTH: stats and a growth line beside a team photo */

.service-photo--growth {
  top: 0;
  right: 0;

  width: 45%;
  height: 100%;

  background-image: url("../assets/images/services/growth.webp");

  scale: 1.08;

  transition: scale 1.6s var(--ease-out);
}

.service-panel.is-active .service-photo--growth {
  scale: 1;
}

.growth-card {
  position: absolute;

  left: 4%;

  width: 47%;

  padding: 22px 24px;

  background: var(--limestone);

  color: var(--obsidian);
}

.growth-card header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;
}

.growth-card small {
  color: var(--graphite);

  font-size: var(--fs-caption);

  line-height: 1;

  letter-spacing: .06em;
}

/* monthly reach: figure, delta chip and an area chart of the last 7 months */
.growth-card--reach {
  top: 6%;

  height: 58%;

  display: flex;

  flex-direction: column;
}

.growth-chip {
  padding: 5px 9px;

  border-radius: 999px;

  background: var(--obsidian);

  color: var(--limestone);

  font-size: var(--fs-caption);

  line-height: 1;
}

.growth-card--reach strong {
  margin: 10px 0 0;

  font-family: var(--font-display);

  font-size: var(--fs-h3);

  line-height: var(--lh-h3);

  font-weight: 700;

  letter-spacing: -.04em;
}

.growth-chart {
  position: relative;

  flex: 1;

  min-height: 0;

  margin-top: 12px;
}

.growth-chart svg {
  display: block;

  width: 100%;
  height: 100%;

  overflow: visible;
}

.growth-chart__area {
  fill: var(--pebble);

  opacity: 0;

  transition: opacity .8s ease 1.1s;
}

.growth-chart__line {
  fill: none;

  stroke: var(--obsidian);

  stroke-width: 2;

  vector-effect: non-scaling-stroke;

  stroke-dasharray: 1;

  stroke-dashoffset: 1;

  transition: stroke-dashoffset 1.4s var(--ease-in-out) .4s;
}

.service-panel.is-active .growth-chart__area {
  opacity: .55;
}

.service-panel.is-active .growth-chart__line {
  stroke-dashoffset: 0;
}

/* the current month: a dot at the end of the line (12/90 from the top) */
.growth-chart__dot {
  position: absolute;

  right: -5px;
  top: calc(12 / 90 * 100% - 5px);

  width: 10px;
  height: 10px;

  border: 2px solid var(--obsidian);

  border-radius: 50%;

  background: var(--limestone);

  scale: 0;

  transition: scale .4s var(--ease-out) 1.7s;
}

.service-panel.is-active .growth-chart__dot {
  scale: 1;
}

.growth-months {
  display: flex;

  justify-content: space-between;

  margin: 8px 0 0;

  padding: 0;

  list-style: none;
}

.growth-months li {
  color: var(--graphite);

  font-size: var(--fs-caption);

  line-height: 1;
}

/* conversion: the rate and the funnel it comes from */
.growth-card--funnel {
  bottom: 6%;

  display: flex;

  flex-direction: column;

  gap: 20px;
}

.growth-card--funnel header strong {
  font-family: var(--font-display);

  font-size: var(--fs-h4);

  line-height: var(--lh-h4);

  font-weight: 700;

  letter-spacing: -.03em;
}

.growth-funnel {
  display: grid;

  gap: 10px;

  margin: 0;

  padding: 0;

  list-style: none;
}

.growth-funnel li {
  display: grid;

  grid-template-columns: 1fr auto;

  row-gap: 5px;

  font-size: var(--fs-caption);

  line-height: 1;
}

.growth-funnel span {
  color: var(--graphite);
}

.growth-funnel b {
  font-weight: 600;
}

.growth-funnel i {
  grid-column: 1 / -1;

  position: relative;

  height: 6px;

  background: rgba(var(--obsidian-rgb), .08);
}

.growth-funnel i::after {
  content: "";

  position: absolute;

  inset: 0 auto 0 0;

  width: var(--w);

  min-width: 3px;

  background: var(--obsidian);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform .9s var(--ease-out);

  transition-delay: calc(.6s + var(--i) * .12s);
}

.service-panel.is-active .growth-funnel i::after {
  transform: scaleX(1);
}

/* STACKED (tablet / phone) */

@media (max-width: 950px) {
  .services-section {
    padding: 110px 24px 20px;
  }

  .services-intro {
    margin-bottom: 56px;
  }

  .services-intro > p {
    margin-left: 0;
  }

  .services-story {
    height: auto;
  }

  .services-sticky {
    position: relative;

    height: auto;

    padding-top: 0;

    /* panels first, then the "next step" card */
    display: flex;

    flex-direction: column;
  }

  .services-side {
    order: 2;

    height: auto;
  }

  .services-tabs {
    display: none;
  }

  .services-stage {
    height: auto;
  }

  .service-panel {
    position: relative;

    grid-template-columns: 1fr;

    gap: 30px;

    margin-bottom: 110px;

    visibility: visible;
  }

  .service-visual {
    height: 520px;
  }

  .service-page {
    width: 72%;
  }
}

@media (max-width: 600px) {
  .service-visual {
    height: 430px;
  }

  .service-visual--product {
    grid-template-columns: 1fr 1fr;
  }

  .service-tile--photo,
  .service-tile--chart {
    grid-column: 2;
  }

  .service-tile--systems {
    display: none;
  }

  .service-node {
    width: 84px;
    height: 84px;
  }

  .service-node--2,
  .service-node--3 {
    left: 35%;
  }

  .service-photo--growth {
    width: 42%;
  }

  .growth-card {
    width: 54%;

    padding: 16px;
  }

  /* every other month, so the labels don't run together */
  .growth-months li:nth-child(even) {
    visibility: hidden;
  }
}

/* ======================================================
   05 — WHY KANZO — stacked layout
   Pinned stage, top to bottom: header · one wide photo with
   the principle written on it (words bottom left, the card
   as glass on the right) · an index of the four principles.
   script.js sets .is-active / .is-under / data-dir and walks
   one step at a time (createStepper); the rest is CSS.
====================================================== */

.why-section {
  overflow-x: clip;

  border-bottom: 1px solid var(--line);
}

.why-track {
  height: 520vh;
}

.why-stage {
  --why-ease: cubic-bezier(.76, 0, .24, 1);

  position: sticky;

  top: 0;

  height: 100vh;

  max-width: 1600px;

  margin: 0 auto;

  padding: 100px var(--padding) 28px;

  display: grid;

  grid-template-rows: auto 1fr auto;

  gap: 24px;
}

/* HEADER */

.why-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 40px;
}

.why-header h2 {
  margin: 14px 0 0;

  font-size: var(--fs-h3);

  line-height: var(--lh-h3);
}

.why-header p {
  max-width: 360px;

  margin: 0;

  color: var(--muted);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

/* PANORAMA — the photo, the words on it, the card */

.why-panorama {
  position: relative;

  min-height: 0;

  overflow: hidden;

  border-radius: 20px;

  background: var(--obsidian);
}

.why-media {
  position: absolute;

  inset: 0;
}

/* photos: a curtain that rises — the new one is uncovered bottom-up while
   the picture inside slides the other way; the one it covers recedes and
   dims underneath */
.why-layer {
  position: absolute;

  inset: 0;

  overflow: hidden;

  clip-path: inset(100% 0 0 0);

  transition: clip-path 1.1s var(--why-ease);
}

.why-layer.is-active {
  z-index: 2;

  clip-path: inset(0 0 0 0);
}

.why-layer.is-under {
  z-index: 1;

  clip-path: inset(0 0 0 0);

  transition: none;
}

.why-layer img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(.55) brightness(.95);

  scale: 1.12;

  translate: 0 calc(14% + var(--why-drift, 0) * 1%);

  transition:
    scale 1.1s var(--why-ease),
    translate 1.1s var(--why-ease),
    filter 1.1s var(--why-ease);
}

.why-layer.is-active img {
  scale: 1;

  translate: 0 calc(var(--why-drift, 0) * 1%);
}

.why-layer.is-under img {
  scale: .94;

  translate: 0 calc(-4% + var(--why-drift, 0) * 1%);

  filter: saturate(.55) brightness(.5);
}

/* the words need a dark floor: strongest bottom left */
.why-shade {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background:
    linear-gradient(0deg, rgba(var(--obsidian-rgb), .78) 0%, rgba(var(--obsidian-rgb), .15) 60%),
    linear-gradient(90deg, rgba(var(--obsidian-rgb), .45) 0%, transparent 60%);
}

.why-words {
  position: absolute;

  z-index: 4;

  left: 40px;
  bottom: 36px;

  width: min(620px, 55%);

  color: var(--limestone);
}

.why-texts {
  display: grid;
}

/* all four stacked in one grid cell: the box takes the tallest one */
.why-text {
  grid-area: 1 / 1;

  align-self: end;

  opacity: 0;

  visibility: hidden;

  translate: 0 24px;

  filter: blur(4px);

  transition:
    opacity .45s ease,
    translate .45s ease,
    filter .45s ease,
    visibility 0s linear .45s;
}

.why-text[data-dir="past"] {
  translate: 0 -16px;
}

.why-text.is-active {
  opacity: 1;

  visibility: visible;

  translate: 0 0;

  filter: blur(0);

  transition:
    opacity .9s var(--ease-out) .35s,
    translate .9s var(--ease-out) .35s,
    filter .9s var(--ease-out) .35s,
    visibility 0s;
}

.why-text h3 {
  margin: 0;

  font-size: var(--fs-h1);

  line-height: var(--lh-h1);

  letter-spacing: -.04em;
}

.why-text p {
  max-width: 440px;

  margin: 18px 0 0;

  color: var(--mist);
}

/* the card: glass, top right of the photo */
.why-card {
  position: absolute;

  z-index: 4;

  top: 24px;
  right: 24px;

  width: 280px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  border: 1px solid rgba(var(--limestone-rgb), .22);

  border-radius: 14px;

  background: rgba(var(--obsidian-rgb), .35);

  backdrop-filter: blur(16px) saturate(1.2);

  -webkit-backdrop-filter: blur(16px) saturate(1.2);

  color: var(--limestone);
}

.why-card__label,
.why-card__title,
.why-card__small {
  transition:
    opacity .25s ease,
    translate .25s ease,
    filter .25s ease;
}

.why-card.is-swapping .why-card__label,
.why-card.is-swapping .why-card__title,
.why-card.is-swapping .why-card__small {
  opacity: 0;

  translate: 0 -8px;

  filter: blur(3px);
}

.why-card__label {
  color: var(--mist);

  font-size: var(--fs-caption);

  line-height: 1;

  letter-spacing: .14em;
}

.why-card__title {
  margin-top: 12px;

  font-family: var(--font-display);

  font-size: var(--fs-h5);

  line-height: var(--lh-h5);

  font-weight: 700;

  letter-spacing: -.02em;
}

.why-card__foot {
  margin-top: 18px;

  padding-top: 14px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-top: 1px solid rgba(var(--limestone-rgb), .18);

  font-size: var(--fs-caption);
}

.why-card__small {
  color: var(--mist);
}

.why-card__link {
  width: 32px;
  height: 32px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--limestone);

  color: var(--obsidian);

  font-size: var(--fs-small);

  transition: rotate .45s var(--ease-out);
}

.why-card__link:hover {
  rotate: 45deg;
}

/* INDEX — the four principles in a row; the active one fills its bar */

.why-index {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 12px;
}

.why-tab {
  position: relative;

  padding: 16px 0 18px;

  display: flex;

  align-items: baseline;

  gap: 14px;

  border: 0;

  background: none;

  color: var(--muted);

  text-align: left;

  cursor: pointer;

  transition: color .4s ease;
}

.why-tab:hover,
.why-tab.is-active {
  color: var(--text);
}

.why-tab__num {
  font-family: var(--font-display);

  font-size: var(--fs-caption);

  font-weight: 700;

  line-height: 1;
}

.why-tab__name {
  font-family: var(--font-display);

  font-size: var(--fs-h5);

  font-weight: 700;

  line-height: 1;

  letter-spacing: -.02em;
}

/* track + fill along the top of each tab */
.why-tab__bar {
  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 2px;

  background: var(--line-strong);
}

.why-tab__bar::after {
  content: "";

  position: absolute;

  inset: 0;

  background: var(--text);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform .9s var(--why-ease);
}

.why-tab.is-done .why-tab__bar::after,
.why-tab.is-active .why-tab__bar::after {
  transform: scaleX(1);
}

.why-tab:focus-visible {
  outline: 2px solid var(--text);

  outline-offset: 4px;
}

@media (max-width: 1000px) {
  .why-card {
    display: none;
  }

  .why-words {
    width: auto;

    right: 32px;
  }

  .why-tab {
    flex-direction: column;

    gap: 8px;
  }
}

/* phone: a plain stack — header, then each principle with its photo */
@media (max-width: 760px) {
  .why-track {
    height: auto;
  }

  .why-stage {
    position: relative;

    height: auto;

    padding: 90px 18px 70px;

    display: block;
  }

  .why-header {
    display: block;

    margin-bottom: 36px;
  }

  .why-header p {
    margin-top: 14px;
  }

  .why-panorama {
    height: 460px;
  }

  .why-words {
    left: 22px;
    right: 22px;
    bottom: 24px;
  }

  .why-layer:first-child {
    clip-path: none;
  }

  .why-index {
    margin-top: 18px;

    grid-template-columns: repeat(2, 1fr);
  }

  .why-tab {
    cursor: default;
  }
}

/* ======================================================
   SCROLL REVEAL — elements fade and rise into place as they
   scroll into view (script.js adds .reveal and, on arrival,
   .is-visible, with a small stagger in --reveal-delay).
   An animation, not a transition, so it never clashes with
   an element's own hover transitions; "backwards" fill, so
   once it has played the element is back to its own styles.
====================================================== */

.js .reveal:not(.is-visible) {
  opacity: 0;
}

.reveal.is-visible {
  animation: reveal-in 1.1s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0s) backwards;
}

/* from below: a longer rise and a softer focus pull */
@keyframes reveal-in {
  from {
    opacity: 0;

    translate: 0 48px;

    filter: blur(6px);
  }
}

/* ======================================================
   06 — PROCESS (UI Vault sections/process/process-006)
   Pinned stage: copy · four cards · a rail. The open card
   takes the room (flex-grow), the rest fold into strips;
   everything moves on one curve and one duration so the
   change reads as a single, calm motion (script.js only
   sets .is-active).
====================================================== */

.process-section {
  overflow-x: clip;

  border-bottom: 1px solid var(--line);
}

/* long enough that each of the four steps gets a real stretch of scroll */
.process-track {
  height: 560vh;
}

.process-pin {
  --process-ease: cubic-bezier(.65, 0, .35, 1);
  --process-time: .9s;

  position: sticky;

  top: 0;

  height: 100vh;

  max-width: 1800px;

  margin: 0 auto;

  padding: 104px var(--padding) 32px;

  display: grid;

  grid-template-columns: 30% 1fr;

  gap: 3vw;
}

/* COPY */

.process-copy {
  position: relative;

  display: flex;

  flex-direction: column;
}

.process-copy .eyebrow {
  margin-bottom: 28px;
}

.process-copy h2 {
  margin: 0;

  font-size: var(--fs-display);

  line-height: var(--lh-display);

  letter-spacing: -.045em;
}

.process-copy h2 em {
  color: var(--muted);

  font-style: normal;
}

.process-copy > p {
  max-width: 340px;

  margin: 28px 0 0;

  color: var(--muted);
}

/* the current step, bottom left; its three lines swap softly */
.process-step {
  margin-top: auto;
}

.process-step > * {
  transition:
    opacity .3s ease,
    translate .3s ease,
    filter .3s ease;
}

.process-step.is-swapping > * {
  opacity: 0;

  translate: 0 10px;

  filter: blur(4px);
}

.process-step strong {
  display: block;

  color: var(--mist);

  font-family: var(--font-display);

  font-size: var(--fs-display);

  line-height: .85;

  letter-spacing: -.05em;
}

.process-step span {
  display: block;

  margin-top: 12px;

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .18em;
}

.process-step p {
  margin: 8px 0 0;

  color: var(--muted);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

/* CARDS */

.process-cards {
  display: flex;

  gap: 8px;

  min-height: 0;
}

.process-card {
  position: relative;

  flex: 1 1 0;

  min-width: 84px;

  overflow: hidden;

  border-radius: 12px;

  background: var(--mist);

  color: var(--limestone);

  cursor: pointer;

  transition: flex-grow var(--process-time) var(--process-ease);
}

/* the open card takes most of the row; the others stay slim strips */
.process-card.is-active {
  flex-grow: 9;

  cursor: default;
}

.process-card img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  /* folded cards: dimmed and darker; the open one comes up to full light */
  filter: saturate(.35) brightness(.5);

  scale: 1.08;

  transition:
    scale 1.4s var(--ease-out),
    filter var(--process-time) var(--process-ease);
}

.process-card.is-active img {
  scale: 1;

  filter: saturate(.7) brightness(1);
}

.process-card__shade {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(var(--obsidian-rgb), .25),
    rgba(var(--obsidian-rgb), .05) 45%,
    rgba(var(--obsidian-rgb), .72)
  );
}

/* the name of each folded card: big, vertical, centred in its strip;
   it fades out as the card opens and the card's own text takes over */
.process-card__label {
  position: absolute;

  left: 50%;
  top: 50%;

  translate: -50% -50%;

  writing-mode: vertical-rl;

  rotate: 180deg;

  font-family: var(--font-display);

  font-size: var(--fs-h4);

  font-weight: 700;

  line-height: 1;

  letter-spacing: .08em;

  white-space: nowrap;

  opacity: 1;

  filter: blur(0);

  transition:
    opacity .5s ease .35s,
    filter .5s ease .35s;
}

.process-card.is-active .process-card__label {
  opacity: 0;

  filter: blur(6px);

  transition:
    opacity .3s ease,
    filter .3s ease;
}

/* the step's name above the open card's title */
.process-card__kicker {
  display: block;

  margin-bottom: 12px;

  color: var(--mist);

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .2em;
}

/* the text of the open card arrives once the card has opened */
.process-card__info {
  position: absolute;

  left: 26px;
  bottom: 26px;

  width: min(360px, 78%);

  opacity: 0;

  translate: 0 18px;

  filter: blur(4px);

  transition:
    opacity .3s ease,
    translate .3s ease,
    filter .3s ease;
}

.process-card.is-active .process-card__info {
  opacity: 1;

  translate: 0 0;

  filter: blur(0);

  transition:
    opacity .7s var(--ease-out) .45s,
    translate .7s var(--ease-out) .45s,
    filter .7s var(--ease-out) .45s;
}

.process-card h3 {
  margin: 0;

  font-size: var(--fs-h3);

  line-height: var(--lh-h3);
}

.process-card p {
  margin: 12px 0 0;

  color: var(--limestone);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

@media (max-width: 1100px) {
  .process-pin {
    grid-template-columns: 34% 1fr;
  }

  .process-card {
    min-width: 64px;
  }
}

/* phone: the four cards stacked, all open */
@media (max-width: 760px) {
  .process-track {
    height: auto;
  }

  .process-pin {
    position: relative;

    height: auto;

    padding: 90px 18px 70px;

    display: block;
  }

  .process-step {
    display: none;
  }

  .process-copy {
    margin-bottom: 48px;
  }

  .process-cards {
    display: grid;

    gap: 12px;
  }

  .process-card {
    height: 420px;

    cursor: default;
  }

  .process-card img {
    scale: 1;

    filter: saturate(.7) brightness(.95);
  }

  .process-card__info {
    opacity: 1;

    translate: none;

    filter: none;
  }

  .process-card__label {
    display: none;
  }
}

/* ======================================================
   09 — FAQ (UI Vault sections/FAQ/model-002)
   Sticky intro on the left, five questions on the right in
   a MIST tray; one open at a time, opening with the
   grid-rows 0fr → 1fr technique and the "+" turning to ×.
====================================================== */

.faq-section {
  padding: 150px var(--padding) 110px;

  border-bottom: 1px solid var(--line);
}

.faq-grid {
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1fr 1.05fr;

  gap: 7vw;

  align-items: start;
}

.faq-intro {
  position: sticky;

  top: 120px;
}

.faq-intro h2 {
  max-width: 640px;

  margin: 0;

  font-size: var(--fs-h1);

  line-height: var(--lh-h1);
}

.faq-intro p {
  max-width: 340px;

  margin: 24px 0 0;

  color: var(--muted);

  font-size: var(--fs-lead);

  line-height: var(--lh-lead);
}

.faq-contact {
  --fill: var(--obsidian);
  --fill-text: var(--limestone);

  margin-top: 34px;

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 12px 20px;

  border-radius: 999px;

  background: var(--mist);

  font-size: var(--fs-button);

  font-weight: 600;

  line-height: 1;
}

.faq-contact i {
  font-style: normal;

  font-size: var(--fs-lead);

  line-height: 1;
}

.faq-list {
  display: grid;

  gap: 6px;

  padding: 6px;

  border-radius: 16px;

  background: var(--mist);
}

.faq-item {
  overflow: hidden;

  border-radius: 12px;

  background: var(--limestone);
}

.faq-item h3 {
  margin: 0;

  font: inherit;

  letter-spacing: 0;
}

.faq-question {
  width: 100%;

  padding: 26px 28px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  border: 0;

  background: none;

  color: var(--obsidian);

  font-family: var(--font-body);

  font-size: var(--fs-h5);

  font-weight: 500;

  line-height: 1.3;

  text-align: left;

  cursor: pointer;
}

.faq-question:focus-visible {
  outline: 2px solid var(--obsidian);

  outline-offset: -4px;

  border-radius: 12px;
}

.faq-question i {
  flex: none;

  font-style: normal;

  font-size: var(--fs-h5);

  font-weight: 400;

  transition: rotate .45s var(--ease-out);
}

.faq-answer {
  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .55s var(--ease-out);
}

.faq-answer > div {
  overflow: hidden;
}

.faq-answer p {
  max-width: 680px;

  margin: 0;

  padding: 0 28px 26px;

  color: var(--graphite);

  opacity: 0;

  translate: 0 -6px;

  transition:
    opacity .35s ease,
    translate .45s var(--ease-out);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.is-open .faq-answer p {
  opacity: 1;

  translate: 0 0;

  transition-delay: .1s;
}

.faq-item.is-open .faq-question i {
  rotate: 45deg;
}

@media (max-width: 900px) {
  .faq-section {
    padding: 100px 20px 70px;
  }

  .faq-grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .faq-intro {
    position: relative;

    top: auto;
  }

  .faq-question {
    padding: 22px 20px;
  }

  .faq-answer p {
    padding: 0 20px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-answer p,
  .faq-question i {
    transition: none;
  }
}

/* ======================================================
   07 — TESTIMONIALS (UI Vault sections/testimonials/model-006)
   Left: the ask + two outline arrows. Right: one quote at a
   time in Syne, the author with a monogram, a progress bar
   that fills while each quote is on (7 s). The swap: the old
   quote rises and fades, the new one rises in and un-blurs.
====================================================== */

.testimonials-section {
  padding: 150px var(--padding) 140px;

  border-bottom: 1px solid var(--line);
}

.testimonials-section:focus-visible {
  outline: 2px solid var(--text);

  outline-offset: -8px;
}

.testimonials-inner {
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: minmax(320px, .85fr) minmax(0, 1.35fr);

  gap: clamp(60px, 8vw, 160px);

  align-items: center;
}

.testimonials-intro h2 {
  margin: 22px 0 0;

  font-size: var(--fs-h1);

  line-height: var(--lh-h1);

  font-weight: 500;
}

.testimonials-intro h2 strong {
  font-weight: 800;
}

.testimonials-intro > p {
  max-width: 420px;

  margin: 32px 0 0;

  color: var(--muted);

  font-size: var(--fs-lead);

  line-height: var(--lh-lead);
}

.testimonials-controls {
  display: flex;

  gap: 12px;

  margin-top: 44px;
}

.testimonials-button {
  --fill: var(--obsidian);
  --fill-text: var(--limestone);

  width: 64px;
  height: 64px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 1px solid var(--line-strong);

  border-radius: 50%;

  background: transparent;

  color: var(--obsidian);

  cursor: pointer;

  transition:
    color .45s var(--ease-out),
    border-color .45s var(--ease-out),
    translate .45s var(--ease-out);
}

.testimonials-button::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  border-radius: inherit;

  background: var(--obsidian);

  transform: scale(0);

  transition: transform .45s var(--ease-out);
}

.testimonials-button {
  position: relative;

  isolation: isolate;
}

.testimonials-button:hover,
.testimonials-button:focus-visible {
  color: var(--limestone);

  border-color: var(--obsidian);

  translate: 0 -3px;
}

.testimonials-button:hover::before,
.testimonials-button:focus-visible::before {
  transform: scale(1);
}

.testimonials-button:active {
  translate: 0 0;
}

.testimonials-button svg {
  width: 40%;
  height: 40%;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: translate .45s var(--ease-out);
}

.testimonials-button--prev:hover svg { translate: -3px 0; }
.testimonials-button--next:hover svg { translate: 3px 0; }

/* THE QUOTE */

.testimonials-stage {
  min-height: 460px;

  display: flex;

  align-items: center;
}

.testimonial {
  width: 100%;
}

.testimonial__mark {
  display: block;

  height: 64px;

  color: var(--graphite);

  font-family: var(--font-display);

  font-size: calc(var(--fs-display) * 1.25);

  font-weight: 800;

  line-height: 1;
}

.testimonial__quote {
  max-width: 860px;

  margin: 0;

  font-family: var(--font-display);

  font-size: var(--fs-h3);

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: -.03em;

  text-wrap: balance;
}

.testimonial__author {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 40px;
}

.testimonial__avatar {
  flex: none;

  width: 64px;
  height: 64px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--obsidian);

  color: var(--limestone);

  font-family: var(--font-display);

  font-size: var(--fs-body);

  font-weight: 700;

  line-height: 1;
}

.testimonial__who {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.testimonial__who strong {
  font-size: var(--fs-body);

  font-weight: 700;

  line-height: 1.3;
}

.testimonial__who span {
  color: var(--muted);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

/* progress: one bar per quote; the current one grows and fills over 7 s */
.testimonial__progress {
  display: flex;

  gap: 8px;

  margin-top: 44px;
}

.testimonial__progress span {
  position: relative;

  width: 28px;
  height: 2px;

  overflow: hidden;

  background: var(--line-strong);

  transition: width .45s var(--ease-out);
}

.testimonial__progress span.is-active {
  width: 64px;
}

.testimonial__progress span::after {
  content: "";

  position: absolute;

  inset: 0;

  background: var(--obsidian);

  transform: scaleX(0);

  transform-origin: left;
}

.testimonial__progress span.is-active::after {
  animation: testimonial-fill var(--testimonial-time, 7s) linear forwards;
}

.testimonials-section.is-paused .testimonial__progress span.is-active::after {
  animation-play-state: paused;
}

@keyframes testimonial-fill {
  to { transform: scaleX(1); }
}

/* the swap */
.testimonial__quote.is-leaving,
.testimonial__author.is-leaving {
  animation: testimonial-out .35s cubic-bezier(.4, 0, 1, 1) forwards;
}

.testimonial__quote.is-entering {
  animation: testimonial-in .8s var(--ease-out) backwards;
}

.testimonial__author.is-entering {
  animation: testimonial-in .8s var(--ease-out) .1s backwards;
}

@keyframes testimonial-out {
  to { opacity: 0; translate: 0 -18px; filter: blur(4px); }
}

@keyframes testimonial-in {
  from { opacity: 0; translate: 0 24px; filter: blur(6px); }
}

@media (max-width: 1150px) {
  .testimonials-inner {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .testimonials-stage {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .testimonials-section {
    padding: 100px 20px 90px;
  }

  .testimonials-button {
    width: 56px;
    height: 56px;
  }

  .testimonial__mark {
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial__quote.is-leaving,
  .testimonial__author.is-leaving,
  .testimonial__quote.is-entering,
  .testimonial__author.is-entering,
  .testimonial__progress span.is-active::after {
    animation: none;
  }

  .testimonial__progress span.is-active::after {
    transform: scaleX(1);
  }
}

/* ======================================================
   03 — SELECTED WORK (UI Vault sections/work/model-001)
   Header (title · line · "View all projects") over a grid:
   MIRA tall on the left, three cards on the right that
   rotate through WORK_PROJECTS (script.js) every 5 s.
   The cards are photos under an obsidian shade, so their
   copy is always light, whatever the section's theme.
====================================================== */

.work-section {
  padding: 150px var(--padding) 72px;

  border-bottom: 1px solid var(--line);
}

.work-head {
  display: grid;

  grid-template-columns: 1.15fr 1fr .8fr;

  align-items: end;

  gap: 40px;

  margin-bottom: 28px;
}

.work-head > * {
  min-width: 0;
}

.work-head h2 {
  margin: 0;

  font-size: var(--fs-h1);

  line-height: var(--lh-h1);
}

.work-head h2 span {
  color: var(--muted);
}

.work-head > p {
  margin: 0;

  padding-bottom: 8px;

  color: var(--muted);
}

/* "VIEW PROJECT" / "VIEW ALL PROJECTS": arrow in a ring that fills from the
   left on hover, like every other button on the site. --ring-fill is the
   sweep, --ring-text the arrow once covered: the section's text/surface in
   the header, limestone/obsidian on the photo cards. */
.work-link {
  --ring-fill: var(--text);
  --ring-text: var(--surface);

  display: inline-flex;

  align-items: center;

  gap: 16px;

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .08em;
}

.work-card .work-link {
  --ring-fill: var(--limestone);
  --ring-text: var(--obsidian);
}

.work-link i {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  width: 48px;
  height: 48px;

  display: grid;

  place-items: center;

  border: 1px solid currentColor;

  border-radius: 50%;

  font-size: var(--fs-lead);

  font-style: normal;

  transition:
    color .45s var(--ease-out),
    translate .45s var(--ease-out);
}

.work-link i::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background: var(--ring-fill);

  transform: scaleX(0);

  transform-origin: right;

  transition: transform .55s var(--ease-out);
}

.work-link:hover i,
.work-link:focus-visible i {
  color: var(--ring-text);

  translate: 3px 0;
}

.work-link:hover i::before,
.work-link:focus-visible i::before {
  transform: scaleX(1);

  transform-origin: left;
}

.work-link--all {
  justify-self: end;

  padding-bottom: 8px;
}

/* GRID */

.work-grid {
  display: grid;

  grid-template-columns: 1fr .58fr .58fr;

  grid-template-rows: 300px 360px;

  gap: 10px;
}

.work-card {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 8px;

  background: var(--obsidian);

  color: var(--limestone);
}

.work-card--feature {
  grid-row: 1 / 3;
}

.work-card--wide {
  grid-column: 2 / 4;
}

.work-card__media {
  position: absolute;

  inset: 0;

  z-index: -2;

  background-position: center;

  background-size: cover;

  transition:
    opacity .65s ease,
    transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

/* MIRA's picture is its landing, captured portrait with the phone up and to
   the right (its headline hidden): anchored right so the copy, bottom left,
   sits on the empty part */
.work-card--feature .work-card__media {
  background-position: right 35%;
}

.work-card__shade {
  position: absolute;

  inset: 0;

  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(var(--obsidian-rgb), .9) 0%,
    rgba(var(--obsidian-rgb), .55) 45%,
    rgba(var(--obsidian-rgb), .08) 100%
  );
}

.work-card--feature .work-card__shade {
  background: linear-gradient(
    90deg,
    rgba(var(--obsidian-rgb), .94),
    rgba(var(--obsidian-rgb), .45) 48%,
    rgba(var(--obsidian-rgb), .08)
  );
}

.work-card__copy {
  position: absolute;

  left: 32px;
  bottom: 30px;

  max-width: 300px;

  transition:
    opacity .55s ease,
    transform .55s ease;
}

.work-card h3 {
  margin: 0 0 7px;

  font-size: var(--fs-h4);

  line-height: var(--lh-h4);

  font-weight: 600;
}

.work-card small {
  display: block;

  margin-bottom: 18px;

  color: var(--mist);

  font-size: var(--fs-caption);

  line-height: var(--lh-caption);
}

.work-card p {
  margin: 0 0 22px;

  color: var(--limestone);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

.work-card:hover .work-card__media {
  transform: scale(1.025);
}

/* rotation: the old project fades and sinks, the new one rises */
.work-card.is-changing .work-card__media {
  opacity: 0;

  transform: scale(1.05);
}

.work-card.is-changing .work-card__copy {
  opacity: 0;

  transform: translateY(14px);
}

@media (max-width: 900px) {
  .work-section {
    padding: 110px 24px 44px;
  }

  .work-head {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 24px;
  }

  .work-head > p,
  .work-link--all {
    padding: 0;
  }

  .work-link--all {
    justify-self: start;
  }

  .work-grid {
    grid-template-columns: 1fr;

    grid-template-rows: none;
  }

  .work-card,
  .work-card--feature,
  .work-card--wide {
    grid-column: auto;

    grid-row: auto;

    min-height: 430px;
  }

  .work-card--wide {
    min-height: 360px;
  }
}

@media (max-width: 520px) {
  .work-card {
    min-height: 390px;
  }

  .work-card__copy {
    left: 22px;
    right: 22px;
    bottom: 24px;
  }
}

/* ======================================================
   SKELETON — while a photo is still loading, its box shows
   a slow shimmer instead of an empty dark hole: the hero's
   backgrounds and every Selected Work card (.is-loading,
   set and cleared in script.js). Dark tones only, because
   every photo here sits on OBSIDIAN: GRAPHITE with a GRAVEL
   sweep.
====================================================== */

/* the shimmer is its own layer (::after) over the photo, since the photos
   are set inline and would override a background on the box itself */
.hero-media::after,
.work-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background-color: var(--graphite);

  background-image: linear-gradient(
    100deg,
    transparent 20%,
    rgba(123, 120, 122, .55) 50%, /* GRAVEL */
    transparent 80%
  );

  background-size: 220% 100%;

  background-repeat: no-repeat;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .45s ease,
    visibility 0s linear .45s;
}

.hero-media::after {
  z-index: 1;
}

.work-card::after {
  z-index: -1; /* over the photo and its shade, under the copy */
}

.hero-media.is-loading::after,
.work-card.is-loading::after {
  opacity: 1;

  visibility: visible;

  animation: skeleton-shimmer 1.6s ease-in-out infinite;

  transition: none;
}

@keyframes skeleton-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* ======================================================
   BACK TO TOP — bottom right, once the hero has scrolled
   away (body.past-hero). An obsidian glass circle with a
   ring that fills with the page's scroll progress; on hover
   it fills with LIMESTONE from the left like every button.
   It rises above the footer's bottom bar while that bar is
   on screen (--to-top-lift, script.js).
====================================================== */

/* .to-top.btn-fill: .btn-fill (later in this file) sets position: relative,
   which would pull the button out of its fixed corner */
.to-top.btn-fill {
  --fill: var(--limestone);
  --fill-text: var(--obsidian);
  --to-top-lift: 0px;

  position: fixed;

  z-index: 1050;

  right: 24px;
  bottom: calc(24px + var(--to-top-lift));

  width: 52px;
  height: 52px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: rgba(var(--obsidian-rgb), .72);

  backdrop-filter: blur(18px) saturate(1.3);

  -webkit-backdrop-filter: blur(18px) saturate(1.3);

  color: var(--limestone);

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  translate: 0 12px;

  scale: .94;

  transition:
    color .45s var(--ease-out),
    opacity .4s var(--ease-out),
    translate .55s var(--ease-out),
    scale .55s var(--ease-out),
    bottom .45s var(--ease-out),
    visibility 0s linear .4s;
}

body.past-hero .to-top {
  opacity: 1;

  visibility: visible;

  translate: 0 0;

  scale: 1;

  transition:
    color .45s var(--ease-out),
    opacity .4s var(--ease-out),
    translate .55s var(--ease-out),
    scale .55s var(--ease-out),
    bottom .45s var(--ease-out),
    visibility 0s;
}

.to-top:focus-visible {
  outline: 2px solid var(--obsidian);

  outline-offset: 4px;
}

.to-top__arrow {
  position: relative;

  z-index: 1;

  width: 20px;
  height: 20px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

  transition: translate .45s var(--ease-out);
}

.to-top:hover .to-top__arrow {
  translate: 0 -2px;
}

/* scroll progress: a LIMESTONE ring that fills clockwise from the top */
.to-top__ring {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;
  height: 100%;

  rotate: -90deg;

  overflow: visible;

  pointer-events: none;
}

.to-top__ring circle {
  fill: none;

  stroke-width: 2.5;
}

.to-top__track {
  stroke: rgba(var(--limestone-rgb), .18);
}

.to-top__progress {
  stroke: var(--limestone);

  stroke-linecap: round;

  stroke-dasharray: 100;

  stroke-dashoffset: calc(100 - var(--to-top-progress, 0) * 100);
}

/* once filled, the ring turns obsidian so it still reads on limestone */
.to-top:hover .to-top__progress,
.to-top:focus-visible .to-top__progress {
  stroke: var(--obsidian);
}

.to-top:hover .to-top__track,
.to-top:focus-visible .to-top__track {
  stroke: rgba(var(--obsidian-rgb), .15);
}

@media (max-width: 767px) {
  .to-top {
    right: 16px;
    bottom: calc(16px + var(--to-top-lift));

    width: 46px;
    height: 46px;
  }
}

/* ======================================================
   FINAL CTA
====================================================== */

/* ======================================================
   10 — CONTACT / CTA
   Process's language: Syne display words, dimmed photo
   card, one curve. Left: the ask and two actions (the
   primary pill + the plain address). Right: what happens
   after writing — three steps that light up one by one
   as the card comes into view.
====================================================== */

.contact-section {
  padding: 150px var(--padding) 130px;
}

.contact-grid {
  max-width: 1500px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 1.1fr .9fr;

  gap: 6vw;

  align-items: stretch;
}

.contact-copy {
  display: flex;

  flex-direction: column;

  justify-content: center;
}

.contact-copy h2 {
  margin: 20px 0 0;

  font-size: var(--fs-display);

  line-height: var(--lh-display);

  letter-spacing: -.045em;
}

.contact-copy h2 em {
  color: var(--muted);

  font-style: normal;
}

.contact-copy > p {
  max-width: 460px;

  margin: 32px 0 0;

  color: var(--muted);

  font-size: var(--fs-lead);

  line-height: var(--lh-lead);
}

.contact-actions {
  margin-top: 44px;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 18px 32px;
}

.contact-primary {
  --fill: var(--graphite);
  --fill-text: var(--limestone);

  height: 60px;

  display: inline-flex;

  align-items: center;

  gap: 26px;

  padding: 0 7px 0 26px;

  border-radius: 999px;

  background: var(--obsidian);

  color: var(--limestone);

  font-size: var(--fs-button);

  font-weight: 600;

  line-height: 1;
}

.contact-primary .hero-arrow {
  width: 46px;
  height: 46px;

  background: var(--limestone);

  color: var(--obsidian);

  font-size: var(--fs-lead);
}

.contact-primary:hover .hero-arrow,
.contact-primary:focus-visible .hero-arrow {
  transform: rotate(45deg);
}

/* the address, quiet: an underline that draws in from the left on hover */
.contact-mail {
  position: relative;

  padding-bottom: 4px;

  font-size: var(--fs-body);

  font-weight: 500;

  line-height: 1.3;
}

.contact-mail::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background: currentColor;

  transform: scaleX(.3);

  transform-origin: left;

  transition: transform .55s var(--ease-out);
}

.contact-mail:hover::after,
.contact-mail:focus-visible::after {
  transform: scaleX(1);
}

/* THE CARD */

/* the card: a hairline border inside the photo, and steps as glass tiles
   joined by a timeline that draws down as they light up (.is-lit) */
.contact-card {
  position: relative;

  min-height: 560px;

  overflow: hidden;

  border-radius: 20px;

  background: var(--obsidian);

  color: var(--limestone);

  box-shadow: 0 30px 70px rgba(var(--obsidian-rgb), .18);
}

.contact-card::after {
  content: "";

  position: absolute;

  inset: 0;

  border: 1px solid rgba(var(--limestone-rgb), .14);

  border-radius: inherit;

  pointer-events: none;
}

.contact-card img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(.35) brightness(.5);

  scale: 1.08;

  transition: scale 1.8s var(--ease-out);
}

.contact-card.is-lit img {
  scale: 1;
}

.contact-card__shade {
  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(var(--obsidian-rgb), .2), rgba(var(--obsidian-rgb), .75));
}

.contact-card__body {
  position: relative;

  height: 100%;

  padding: 32px;

  display: flex;

  flex-direction: column;
}

.contact-card__kicker {
  color: var(--mist);

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .2em;
}

.contact-card__lead {
  margin: 14px 0 0;

  font-family: var(--font-display);

  font-size: var(--fs-h4);

  line-height: var(--lh-h4);

  font-weight: 700;

  letter-spacing: -.03em;
}

.contact-steps {
  --tile-gap: 10px;

  position: relative;

  margin: auto 0 0;

  padding: 0;

  display: grid;

  gap: var(--tile-gap);

  list-style: none;
}

/* the timeline behind the number circles: faint track + a line that draws */
.contact-steps::before,
.contact-steps::after {
  content: "";

  position: absolute;

  left: 38px; /* tile padding 18 + half the 40px circle */
  top: 38px;
  bottom: 38px;

  width: 1px;
}

.contact-steps::before {
  background: rgba(var(--limestone-rgb), .18);
}

.contact-steps::after {
  background: var(--limestone);

  transform: scaleY(0);

  transform-origin: top;

  transition: transform 1.2s cubic-bezier(.65, 0, .35, 1) .25s;
}

.contact-card.is-lit .contact-steps::after {
  transform: scaleY(1);
}

.contact-steps li {
  position: relative;

  display: grid;

  grid-template-columns: 40px 1fr;

  align-items: center;

  gap: 18px;

  padding: 16px 18px;

  border: 1px solid rgba(var(--limestone-rgb), .16);

  border-radius: 14px;

  background: rgba(var(--obsidian-rgb), .35);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  opacity: 0;

  translate: 28px 0;

  filter: blur(4px);

  transition:
    opacity .8s var(--ease-out),
    translate .8s var(--ease-out),
    filter .8s var(--ease-out),
    border-color .35s ease,
    background-color .35s ease;

  transition-delay: calc(.2s + var(--i) * .22s), calc(.2s + var(--i) * .22s), calc(.2s + var(--i) * .22s), 0s, 0s;
}

.contact-card.is-lit .contact-steps li {
  opacity: 1;

  translate: 0 0;

  filter: blur(0);
}

.contact-steps li:hover {
  border-color: rgba(var(--limestone-rgb), .45);

  background-color: rgba(var(--obsidian-rgb), .55);
}

/* the number in an outline circle that fills when its step lights up */
.contact-steps b {
  position: relative;

  z-index: 1;

  width: 40px;
  height: 40px;

  display: grid;

  place-items: center;

  border: 1px solid rgba(var(--limestone-rgb), .5);

  border-radius: 50%;

  background: var(--obsidian);

  color: var(--limestone);

  font-family: var(--font-display);

  font-size: var(--fs-caption);

  font-weight: 700;

  line-height: 1;

  transition:
    background-color .5s ease,
    color .5s ease,
    border-color .5s ease;

  transition-delay: calc(.55s + var(--i) * .22s);
}

.contact-card.is-lit .contact-steps b {
  border-color: var(--limestone);

  background: var(--limestone);

  color: var(--obsidian);
}

.contact-steps span {
  display: block;

  font-family: var(--font-display);

  font-size: var(--fs-h5);

  line-height: var(--lh-h5);

  font-weight: 700;

  letter-spacing: -.02em;
}

.contact-steps small {
  display: block;

  margin-top: 4px;

  color: var(--mist);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

@media (max-width: 900px) {
  .contact-section {
    padding: 100px 20px 80px;
  }

  .contact-grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }

  .contact-card {
    min-height: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card img,
  .contact-steps li,
  .contact-steps b,
  .contact-steps::after,
  .contact-mail::after {
    transition: none;
  }
}


/* ======================================================
   FOOTER — the MIRA footer model (UI Vault footer/model-001)
   Same layout and motion as MIRA's: four link columns (the
   last one social chips), the giant KANZO word that bleeds
   off the bottom and is cut by a full-width glass bar.
   KANZO palette: OBSIDIAN surface, LIMESTONE text, MIST
   links, the word in GRAPHITE. The shell fills the footer
   so the word and the bar always sit at the very bottom.
====================================================== */

.kz-footer {
  position: relative;

  overflow: hidden;

  min-height: 100vh;
}

.kz-footer__shell {
  width: min(88%, 1500px);

  min-height: calc(100vh - 90px);

  margin: 0 auto;

  padding-top: 120px;

  display: flex;

  flex-direction: column;
}

.kz-footer__grid {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1.3fr;

  gap: clamp(35px, 5vw, 90px);
}

.kz-footer__column h3 {
  margin: 0 0 24px;

  font-size: var(--fs-h5);

  line-height: var(--lh-h5);

  font-weight: 700;

  letter-spacing: -.02em;
}

.kz-footer__nav {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 15px;
}

.kz-footer__nav a,
.kz-footer__place {
  position: relative;

  display: inline-block;

  color: var(--mist);

  font-size: var(--fs-body);

  line-height: 1.3;
}

.kz-footer__nav a {
  transition:
    color .3s ease,
    translate .4s var(--ease-out);
}

.kz-footer__nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -4px;

  width: 100%;
  height: 1px;

  background: var(--limestone);

  transform: scaleX(0);

  transform-origin: right;

  transition: transform .4s var(--ease-out);
}

.kz-footer__nav a:hover {
  color: var(--limestone);

  translate: 4px 0;
}

.kz-footer__nav a:hover::after {
  transform: scaleX(1);

  transform-origin: left;
}

.kz-footer__place {
  color: var(--pebble);

  font-size: var(--fs-small);
}

/* SOCIAL — chips; each network's own colour on the icon, the whole chip
   takes it on hover */

.kz-footer__social {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  max-width: 360px;
}

.kz-footer__social a {
  min-height: 42px;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 0 14px;

  border: 1px solid rgba(var(--limestone-rgb), .14);

  border-radius: 8px;

  background: rgba(var(--limestone-rgb), .06);

  color: var(--limestone);

  font-size: var(--fs-small);

  font-weight: 600;

  transition:
    translate .35s var(--ease-out),
    background .35s ease,
    border-color .35s ease,
    color .35s ease;
}

.kz-footer__social svg {
  width: 18px;
  height: 18px;

  flex: none;
}

.kz-footer__social a:hover {
  translate: 0 -3px;

  border-color: transparent;

  background: var(--brand-fill, var(--limestone));

  color: var(--brand-ink, var(--obsidian));
}

.kz-footer__social--instagram { --brand-fill: linear-gradient(45deg, #fdf497, #fd5949 45%, #d6249f 60%, #285aeb 90%); --brand-ink: #fff; }
.kz-footer__social--whatsapp  { --brand-fill: #25d366; --brand-ink: #fff; }
.kz-footer__social--email     { --brand-fill: var(--limestone); --brand-ink: var(--obsidian); }

/* on the brand fill the coloured icons turn white like their label */
.kz-footer__social--instagram:hover path,
.kz-footer__social--whatsapp:hover path {
  fill: #fff;
}

.kz-footer__social a:focus-visible {
  outline: 2px solid var(--limestone);

  outline-offset: 3px;
}

/* THE WORD — the hero's KANZO again (same face, weight and tracking),
   centred across the footer and fading out vertically: solid at the top,
   dissolving into the obsidian towards the bar */

.kz-footer__brand {
  position: relative;

  margin-top: auto;

  padding-top: 60px;

  display: flex;

  justify-content: center;

  pointer-events: none;

  user-select: none;
}

.kz-footer__wordmark {
  color: var(--limestone);

  font-family: "Barlow Condensed", sans-serif;

  font-size: clamp(180px, 24vw, 390px); /* = the hero's KANZO */

  font-weight: 800;

  letter-spacing: -.06em;

  line-height: .8;

  white-space: nowrap;

  /* the vertical fade */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 92%);

  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 92%);
}

/* BOTTOM BAR — full page width, glass over the word */

.kz-footer__bottom {
  position: relative;

  z-index: 5;

  min-height: 90px;

  padding: 24px clamp(24px, 6vw, 96px);

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 30px;

  border-top: 1px solid rgba(var(--limestone-rgb), .14);

  background: rgba(var(--obsidian-rgb), .62);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: var(--mist);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

.kz-footer__legal {
  display: flex;

  flex-wrap: wrap;

  gap: 8px 28px;
}

.kz-footer__legal a {
  color: var(--limestone);

  transition: color .25s ease;
}

.kz-footer__legal a:hover {
  color: var(--mist);
}

.kz-footer__note {
  margin: 0;

  text-align: right;

  font-size: var(--fs-small);
}

.kz-footer a:focus-visible {
  outline: 2px solid var(--limestone);

  outline-offset: 5px;
}

@media (max-width: 1023px) {
  .kz-footer__shell {
    width: 90%;
  }

  .kz-footer__grid {
    grid-template-columns: repeat(2, 1fr);

    row-gap: 60px;
  }

}

@media (max-width: 767px) {
  .kz-footer__shell {
    width: 88%;

    padding-top: 80px;
  }

  .kz-footer__brand {
    padding-top: 48px;
  }

  .kz-footer__wordmark {
    font-size: 31vw; /* = the hero's KANZO on a phone */
  }

  .kz-footer__bottom {
    grid-template-columns: 1fr;

    gap: 14px;

    padding: 22px 24px;
  }

  .kz-footer__note {
    text-align: left;
  }
}

@media (max-width: 479px) {
  .kz-footer__grid {
    grid-template-columns: 1fr;

    gap: 48px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .kz-footer__nav a,
  .kz-footer__nav a::after,
  .kz-footer__social a {
    transition: none;
  }
}

/* ======================================================
   MOBILE MENU
====================================================== */

.menu-button {
  display: none;

  position: relative;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}

.menu-button span {
  position: absolute;

  left: 11px;

  width: 22px;

  height: 1px;

  background: var(--obsidian);

  transition:
    transform 0.3s ease,
    top 0.3s ease;
}

.menu-button span:first-child {
  top: 18px;
}

.menu-button span:last-child {
  top: 25px;
}

.menu-button.open span:first-child {
  top: 22px;

  transform: rotate(45deg);
}

.menu-button.open span:last-child {
  top: 22px;

  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;

  inset: 0;

  z-index: 900;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  padding: 120px 28px 40px;

  background: var(--limestone);

  color: var(--obsidian);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;

  visibility: visible;
}

.mobile-menu nav {
  display: flex;

  flex-direction: column;

  gap: 18px;
}

.mobile-menu a {
  font-family: var(--font-display);

  font-size: var(--fs-h1);

  font-weight: 700;

  letter-spacing: -0.03em;

  line-height: 1;

  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s var(--ease-out, ease);
}

.mobile-menu.open a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.open a:nth-child(2) { transition-delay: 40ms; }
.mobile-menu.open a:nth-child(3) { transition-delay: 80ms; }
.mobile-menu.open a:nth-child(4) { transition-delay: 120ms; }
.mobile-menu.open a:nth-child(5) { transition-delay: 160ms; }

@media (hover: none) and (pointer: coarse) {
  .site-logo,
  .site-nav__cta,
  .lang-btn,
  .mobile-menu a,
  .kz-footer__legal a,
  .text-link,
  .work-link {
    min-height: 44px;
  }

  .site-logo,
  .lang-btn,
  .kz-footer__legal a,
  .text-link,
  .work-link {
    display: inline-flex;
    align-items: center;
  }

  .btn-fill:active,
  .menu-button:active,
  .text-link:active,
  .work-link:active,
  .faq-question:active {
    transform: scale(.97);
    transition-duration: 100ms;
  }
}

/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 900px) {
  .section {
    min-height: 82vh;

    padding: 130px 24px 44px;

    grid-template-columns: 1fr;

    gap: 70px;
  }

  .section-index {
    margin: 0;
  }

  .eyebrow {
    margin-bottom: 24px;
  }

}

@media (max-width: 560px) {
  .section {
    min-height: 76vh;
  }

}


/* ======================================================
   BUTTON FILL — on hover the colour sweeps in from the left
   and, on leaving, carries on out to the right.
   Each button sets --fill (the sweep) and --fill-text.
====================================================== */

.btn-fill {
  position: relative;

  isolation: isolate;

  overflow: hidden;

  transition:
    color .45s var(--ease-out),
    border-color .45s var(--ease-out),
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out);
}

.btn-fill::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  border-radius: inherit;

  background: var(--fill, var(--obsidian));

  transform: scaleX(0);

  transform-origin: right;

  transition: transform .55s var(--ease-out);
}

.btn-fill:hover,
.btn-fill:focus-visible {
  color: var(--fill-text, var(--limestone));
}

.btn-fill:hover::before,
.btn-fill:focus-visible::before {
  transform: scaleX(1);

  transform-origin: left;
}

/* ======================================================
   TRANSITION — preloader (UI Vault features/model-005)
====================================================== */

html.is-loading body {
  overflow: hidden;
}

html:not(.js) .preloader {
  display: none;
}

/* White cover, black logo. Solid white until the grid is built, so the
   hero never flashes. */
.preloader {
  --preloader-bg: #fff;

  background: var(--preloader-bg);

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;
}

.preloader.has-grid {
  background: transparent;
}

.preloader-grid {
  position: absolute;

  inset: 0;

  display: grid;
}

.preloader-cell {
  background: var(--preloader-bg);

  /* covers the sub-pixel seams between cells */
  box-shadow: 0 0 0 1px var(--preloader-bg);

  transform: scale(1.02);

  will-change: transform, opacity;
}

.preloader-brand {
  position: relative;

  z-index: 2;

  width: clamp(220px, 34vw, 520px);

  opacity: 0;

  pointer-events: none;
}

/* the logo file is already black on transparent: used as is */
.preloader-brand img {
  display: block;

  width: 100%;

  height: auto;
}

/* ======================================================
   HERO (UI Vault hero/model-002)
====================================================== */

/* Full bleed: the photo covers the whole section, edge to edge, no frame. */
.hero {
  width: 100%;

  height: 100svh;

  min-height: 620px;
}

.hero-frame {
  position: relative;

  width: 100%;

  height: 100%;

  overflow: hidden;

  background: var(--obsidian);
}

/* IMAGE */

.hero-media {
  position: absolute;

  inset: 0;

  overflow: hidden;
}

/* the parallax moves the whole stack; the slides only fade */
.hero-slides {
  position: absolute;

  inset: 0;

  transform: scale(1.04);

  will-change: transform;
}

.hero-slide {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  opacity: 0;

  transition: opacity 1.2s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(var(--obsidian-rgb), .45) 0%,
    rgba(var(--obsidian-rgb), .27) 42%,
    rgba(var(--obsidian-rgb), .77) 100%
  );
}

.hero-light {
  position: absolute;

  inset: 0;

  background: radial-gradient(
    circle at 30% 25%,
    rgba(255, 255, 255, .12),
    transparent 32%
  );
}

/* ======================================================
   NAVBAR — the hero's menu, fixed for the whole page.
   Over the top of the hero it is bare (as in the model);
   as soon as the page scrolls (.is-scrolled) it becomes a
   full-width frosted strip, no borders, and "Start a
   project" slides in once the hero is gone (.past-hero).
====================================================== */

.site-nav {
  position: fixed;

  z-index: 1000;

  top: 0;
  left: 0;
  right: 0;

  /* always the full bar, from the first screen: a full-width frosted
     strip, pills centred, "Start a project" on the right */
  padding: 12px 31px;

  display: flex;

  align-items: center;

  transition:
    background-color .5s var(--ease-out),
    backdrop-filter .5s var(--ease-out);
}

/* the frosted strip switches on as soon as the page scrolls */
body.is-scrolled .site-nav,
.page-contact .site-nav {
  background: rgba(var(--obsidian-rgb), .38);

  backdrop-filter: blur(18px) saturate(1.3);

  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

/* Logo: the enso (../assets/images/brand/enso.svg, black on transparent → inverted to white).
   The brush circle only fills the middle ~45% of the SVG's box, so the image
   is scaled 2× inside a 42px slot: it reads as big as the model's ring.
   No animation: it is a plain link back to the top. */
.site-logo {
  width: 42px;
  height: 42px;

  margin-right: 62px;

  display: block;

  cursor: pointer;
}

.site-logo img {
  display: block;

  width: 100%;

  height: 100%;

  filter: invert(1);

  transform: scale(2);
}

.site-logo:focus-visible {
  outline: 2px solid #fff;

  outline-offset: 6px;

  border-radius: 50%;
}

/* the pills, centred in the bar */
.site-nav__links {
  position: absolute;

  top: 50%;
  left: 50%;

  translate: -50% -50%;

  display: flex;

  gap: 14px;
}

.site-nav__links a {
  --fill: var(--limestone);
  --fill-text: var(--obsidian);

  padding: 12px 20px;

  border: 1px solid rgba(255, 255, 255, .85);

  border-radius: 999px;

  background: rgba(255, 255, 255, .1);

  color: #fff;

  font-size: var(--fs-nav);

  font-weight: 500;

  line-height: 1;

  white-space: nowrap;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}

.site-nav__links a:hover {
  transform: translateY(-2px);
}

.site-nav__links a.is-active {
  --fill: var(--obsidian);
  --fill-text: var(--limestone);

  background: var(--limestone);

  border-color: var(--limestone);

  color: var(--obsidian);
}

/* this rule outranks .btn-fill:hover, so it has to repeat the hover text
   colour — otherwise the text stays obsidian on the obsidian fill */
.site-nav__links a.is-active:hover,
.site-nav__links a.is-active:focus-visible {
  color: var(--fill-text);
}

.site-nav__right {
  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 14px;
}

/* EN / ES switch — two small letters in a hairline pill; the active one
   is filled limestone */
.lang-switch {
  display: flex;

  padding: 3px;

  border: 1px solid rgba(255, 255, 255, .55);

  border-radius: 999px;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}

.lang-switch button {
  min-width: 34px;

  height: 30px;

  padding: 0 8px;

  border: 0;

  border-radius: 999px;

  background: none;

  color: #fff;

  font-family: var(--font-body);

  font-size: var(--fs-caption);

  font-weight: 600;

  letter-spacing: .06em;

  cursor: pointer;

  transition:
    background-color .35s var(--ease-out),
    color .35s var(--ease-out);
}

.lang-switch button:hover {
  background: rgba(255, 255, 255, .14);
}

.lang-switch button.is-active {
  background: var(--limestone);

  color: var(--obsidian);
}

.lang-switch button:focus-visible {
  outline: 2px solid #fff;

  outline-offset: 2px;
}

/* the copy inside the phone menu: dark on limestone, under the links */
.lang-switch--menu {
  display: none;

  align-self: flex-start;

  margin-top: 40px;

  border-color: rgba(var(--obsidian-rgb), .25);
}

.lang-switch--menu button {
  min-width: 48px;

  height: 38px;

  color: var(--obsidian);

  font-size: var(--fs-small);
}

.lang-switch--menu button.is-active {
  background: var(--obsidian);

  color: var(--limestone);
}

@media (max-width: 700px) {
  .site-nav .lang-switch {
    display: none;
  }

  .lang-switch--menu {
    display: flex;
  }
}

/* "Start a project": always in the bar (the hero no longer has its own) */
.site-nav__cta {
  --fill: var(--obsidian);
  --fill-text: var(--limestone);

  height: 48px;

  display: flex;

  align-items: center;

  gap: 20px;

  padding: 0 6px 0 22px;

  border-radius: 999px;

  background: var(--limestone);

  color: var(--obsidian);

  font-size: var(--fs-button);

  font-weight: 600;

  line-height: 1;

  white-space: nowrap;

  transition: color .45s var(--ease-out);
}

.site-nav__cta .hero-arrow {
  width: 36px;
  height: 36px;

  font-size: var(--fs-body);
}

/* the old mobile menu's burger, now white on the dark bar */
.site-nav .menu-button span {
  background: #fff;
}

body.menu-open .site-nav .menu-button span {
  background: var(--obsidian);
}

body.menu-open .site-nav {
  background: none;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;
}

body.menu-open .site-logo img {
  filter: none;
}

/* SOCIALS — bottom left of the hero: one big "social" button (outline ring,
   share-network icon). On hover, keyboard focus or tap (.is-open) the three
   networks come out of it and settle AROUND it on a quarter circle — right,
   up-right, up (the corner leaves no room below or to the left) — each in
   its original logo inside an outline ring.
   --orbit is the circle's radius, --angle each network's place on it. The
   list is an invisible quarter-disc over that arc, so the pointer can travel
   from the button to any network without the hover dropping. */

.hero-socials {
  --orbit: 86px;
  --social-size: 44px;

  position: absolute;

  z-index: 26;

  left: 29px;
  bottom: 28px;
}

.hero-socials__toggle {
  --fill: var(--limestone);
  --fill-text: var(--obsidian);

  z-index: 2; /* above the list's quarter-disc, which starts at its centre */

  width: 54px;
  height: 54px;

  display: grid;

  place-items: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, .6);

  border-radius: 50%;

  background: rgba(255, 255, 255, .1);

  color: #fff;

  cursor: pointer;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}

.hero-socials__toggle svg {
  width: 24px;
  height: 24px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;
}

/* open = the fill stays in */
.hero-socials:hover .hero-socials__toggle,
.hero-socials.is-open .hero-socials__toggle {
  color: var(--fill-text);

  border-color: var(--limestone);
}

.hero-socials:hover .hero-socials__toggle::before,
.hero-socials.is-open .hero-socials__toggle::before {
  transform: scaleX(1);

  transform-origin: left;
}

.hero-socials__toggle:focus-visible {
  outline: 2px solid #fff;

  outline-offset: 3px;
}

.hero-socials__list {
  position: absolute;

  /* the quarter-disc: from the button's centre, up and to the right */
  left: 50%;
  bottom: 50%;

  width: calc(var(--orbit) + var(--social-size));
  height: calc(var(--orbit) + var(--social-size));

  margin: 0;
  padding: 0;

  list-style: none;

  border-top-right-radius: 100%;

  visibility: hidden;

  pointer-events: none;

  transition: visibility 0s linear .5s;
}

.hero-socials:hover .hero-socials__list,
.hero-socials:focus-within .hero-socials__list,
.hero-socials.is-open .hero-socials__list {
  visibility: visible;

  pointer-events: auto;

  transition: visibility 0s;
}

/* each ring starts on the button's centre and flies out to its place on the
   circle, 60 ms after the one before; closing runs the other way round */
.hero-socials__list li {
  position: absolute;

  left: calc(var(--social-size) / -2);
  bottom: calc(var(--social-size) / -2);

  opacity: 0;

  scale: .4;

  translate: 0 0;

  transition:
    opacity .3s ease,
    translate .55s var(--ease-out),
    scale .55s var(--ease-out);
}

.hero-socials__list li:nth-child(1) { --angle: 0deg; }
.hero-socials__list li:nth-child(2) { --angle: 45deg; transition-delay: .06s; }
.hero-socials__list li:nth-child(3) { --angle: 90deg; transition-delay: .12s; }

.hero-socials:hover .hero-socials__list li,
.hero-socials:focus-within .hero-socials__list li,
.hero-socials.is-open .hero-socials__list li {
  opacity: 1;

  scale: 1;

  translate:
    calc(cos(var(--angle)) * var(--orbit))
    calc(sin(var(--angle)) * var(--orbit) * -1);
}

.hero-social {
  width: var(--social-size);
  height: var(--social-size);

  display: grid;

  place-items: center;

  border: 1px solid rgba(255, 255, 255, .6);

  border-radius: 50%;

  color: #fff;

  transition:
    transform .35s var(--ease-out),
    border-color .35s var(--ease-out);
}

.hero-social svg {
  width: 20px;
  height: 20px;
}

.hero-social:hover {
  transform: translateY(-2px);

  border-color: #fff;
}

.hero-social:focus-visible {
  outline: 2px solid #fff;

  outline-offset: 3px;
}

.hero-arrow {
  display: grid;

  place-items: center;

  border-radius: 50%;

  background: var(--obsidian);

  color: var(--limestone);

  font-style: normal;

  transition:
    transform .45s var(--ease-out),
    background .45s var(--ease-out),
    color .45s var(--ease-out);
}

.btn-fill:hover .hero-arrow,
.btn-fill:focus-visible .hero-arrow {
  transform: rotate(45deg);

  background: var(--limestone);

  color: var(--obsidian);
}

/* BRAND — the KANZO word: the model's type, set on the right and a bit lighter */

.hero-brand {
  position: absolute;

  z-index: 3;

  right: 30px;
  top: 31%;

  font-family: "Barlow Condensed", sans-serif;

  font-size: clamp(180px, 24vw, 390px);

  font-weight: 800;

  letter-spacing: -.06em;

  line-height: .8;

  color: rgba(255, 255, 255, .9);

  pointer-events: none;

  white-space: nowrap;
}

/* CENTER */

.hero-message {
  position: absolute;

  z-index: 12;

  left: 7%;
  top: 66%;

  color: #fff;
}

.hero-message__label {
  display: block;

  margin-bottom: 14px;

  font-size: var(--fs-label);

  font-weight: 600;

  line-height: 1;

  letter-spacing: .22em;
}

/* Display XL + 20% (asked for on 2026-09-24): 115 / 86 / 62px */
.hero-message h1 {
  margin: 0;

  font-family: var(--font-display);

  font-size: calc(var(--fs-display) * 1.2);

  font-weight: 700;

  line-height: var(--lh-display);

  letter-spacing: -.035em;
}

.hero-message h1 span {
  font-weight: 500;
}

/* SERVICES — only the titles show; the line underneath opens on hover
   (pointer) or on tap/Enter (.is-open, set in script.js). */

.hero-services {
  position: absolute;

  z-index: 20;

  right: 24px;
  bottom: 25px;

  width: 280px;

  display: flex;

  flex-direction: column;

  gap: 6px;
}

.hero-service {
  color: #fff;

  border: 1px solid rgba(255, 255, 255, .19);

  border-radius: 5px;

  background: rgba(var(--obsidian-rgb), .62);

  backdrop-filter: blur(22px);

  -webkit-backdrop-filter: blur(22px);

  transition:
    transform .5s var(--ease-out),
    background .5s var(--ease-out);
}

.hero-service:first-child {
  border-radius: 18px 18px 5px 5px;
}

.hero-service:last-child {
  border-radius: 5px 5px 18px 18px;
}

.hero-service:hover,
.hero-service.is-open {
  background: rgba(var(--obsidian-rgb), .78);
}

.hero-service__title {
  width: 100%;

  padding: 16px 18px;

  border: 0;

  background: none;

  color: inherit;

  font: 600 var(--fs-h5) / var(--lh-h5) var(--font-display);

  text-align: left;

  cursor: pointer;
}

.hero-service__title:focus-visible {
  outline: 2px solid #fff;

  outline-offset: -4px;

  border-radius: inherit;
}

.hero-service__detail {
  display: grid;

  grid-template-rows: 0fr;

  opacity: 0;

  transition:
    grid-template-rows .5s var(--ease-out),
    opacity .35s ease;
}

.hero-service__detail p {
  min-height: 0;

  overflow: hidden;

  margin: 0;

  padding: 0 18px;

  color: rgba(255, 255, 255, .75);

  font-size: var(--fs-small);

  line-height: var(--lh-small);
}

.hero-service.is-open .hero-service__detail {
  grid-template-rows: 1fr;

  opacity: 1;
}

.hero-service.is-open .hero-service__detail p {
  padding-bottom: 16px;
}

@media (hover: hover) {
  .hero-service:hover .hero-service__detail {
    grid-template-rows: 1fr;

    opacity: 1;
  }

  .hero-service:hover .hero-service__detail p {
    padding-bottom: 16px;
  }
}

/* SCROLL */

.hero-scroll {
  position: absolute;

  z-index: 12;

  /* bottom centre (the hero's CTA moved up into the navbar) */
  left: 50%;
  bottom: 18px;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 7px;

  color: rgba(255, 255, 255, .7);

  font-size: var(--fs-caption);

  line-height: 1;

  letter-spacing: .1em;
}

.hero-scroll span {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #fff;
}

/* Hidden until the preloader breaks (script.js reveals them).
   Without JS they are shown: the class is set by the script. */

.js .site-nav,
.js .hero-brand,
.js .hero-message,
.js .hero-services,
.js .hero-socials {
  opacity: 0;
}

/* 4 pills centred + the language switch + the CTA (longer in Spanish) need ~1280px; below that the burger takes over */
@media (max-width: 1279px) {
  .site-nav__links {
    display: none;
  }

  .menu-button {
    display: block;
  }
}

@media (max-width: 900px) {
  .hero-message {
    top: 66%;
  }

  .hero-services {
    width: 240px;
  }
}

@media (max-width: 700px) {
  .site-nav {
    padding: calc(10px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) 10px calc(18px + env(safe-area-inset-left));
  }

  .site-logo {
    width: 38px;
    height: 38px;

    margin-right: auto;
  }

  .site-nav__cta {
    height: 44px;

    gap: 14px;

    padding-left: 16px;
  }

  .site-nav__cta .hero-arrow {
    width: 29px;
    height: 29px;
  }

  .hero-socials {
    left: 15px;
    bottom: 15px;
  }

  .hero-socials__toggle {
    width: 46px;
    height: 46px;
  }

  /* smaller circle on a phone; the CTA above moves up to leave it room */
  .hero-socials {
    --orbit: 64px;
    --social-size: 38px;
  }

  .hero-social svg {
    width: 17px;
    height: 17px;
  }

  .hero-brand {
    top: 29%;

    right: 18px;

    font-size: 31vw;
  }

  /* raised: in Syne at 62px the headline takes three lines on a phone */
  .hero-message {
    left: 6%;
    top: 49%;
  }

  /* short phones: as low as it goes without meeting the service cards */
  @media (max-height: 720px) {
    .hero-brand {
      top: 26%;
    }

    .hero-message {
      top: 42%;
    }
  }

  .hero-services {
    width: 180px;

    right: 9px;
    bottom: 10px;
  }

  .hero-service__title {
    padding: 11px 12px;
  }

  .hero-service__detail p {
    padding-inline: 12px;
  }

  .hero-service.is-open .hero-service__detail p {
    padding-bottom: 11px;
  }

  .hero-scroll {
    display: none;
  }
}

/* Small phones: narrower service cards so the CTA and the open social row
   (both ~190px from the left) never run under them. */
@media (max-width: 389px) {
  .hero-services {
    width: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media.is-loading::after,
  .work-card.is-loading::after {
    animation: none;
  }

  .reveal.is-visible {
    animation: none;
  }

  .process-card,
  .process-card img,
  .process-card__info,
  .process-card__label,
  .process-step > *,
  .why-text,
  .why-layer,
  .why-layer img,
  .why-tab__bar::after,
  .why-card__label,
  .why-card__title,
  .why-card__small,
  .service-panel,
  .service-copy,
  .service-visual,
  .service-visual [style*="--n"],
  .service-photo--main,
  .service-photo--growth,
  .service-link,
  .services-tabs button,
  .metric-bar i,
  .activity-bars span,
  .growth-chart__area,
  .growth-chart__line,
  .growth-chart__dot,
  .growth-funnel i::after {
    transition: none;
  }

  .service-panel.is-active .service-link,
  .service-panel.is-active .service-node::after,
  .automation-status i {
    animation: none;
  }

  .service-pulse {
    display: none;
  }

  .btn-fill,
  .btn-fill::before,
  .hero-arrow,
  .hero-social,
  .site-nav,
  .site-nav__cta,
  .hero-slide,
  .hero-service__detail,
  .hero-socials__list,
  .hero-socials__list li,
  .to-top,
  .to-top__arrow,
  .hero-service {
    transition: none;
  }
}