/* ==========================================================================
   ARDEN  |  site.css
   Palette: soft sand, mocha green, a touch of watermelon pink.
   Shape rule: boxes are sharp, tags are pills, discs are circles.
   Layers:  grain 80 · loader 100 · nav 75 · menu 70 · cta 60
   ========================================================================== */

:root {
  --sand: #e7ddc8;
  --sand-2: #efe8d8;
  --sand-3: #d8ccb2;
  --green: #2c3729;
  --green-2: #3a4635;
  --moss: #6f7b5e;
  --ink: #1e251c;
  --ink-soft: rgba(30, 37, 28, 0.72);
  --melon: #f0627a;
  --melon-deep: #e04f69;
  --line: rgba(30, 37, 28, 0.18);
  --line-inv: rgba(231, 221, 200, 0.22);

  --serif: "Gambetta", "Iowan Old Style", Georgia, serif;
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1rem, 2vw, 1.75rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* paper grain, fixed and inert */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .15 0 0 0 0 .11 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--melon); outline-offset: 3px; }
::selection { background: var(--melon); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- type ----------------------------------------------------------------- */
.label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-soft);
}
.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.5vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.body { max-width: 56ch; color: var(--ink-soft); }
.body--indent { text-indent: 3.5em; }

/* monochrome logo, tinted by whatever sits behind it */
.logo {
  display: block;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* --- motion pre-states (only when JS confirmed motion is on) --------------- */
html.motion-on [data-split] { visibility: hidden; }
html.motion-on [data-reveal] { opacity: 0; }

/* --- loader --------------------------------------------------------------- */
.loader { display: none; }
html.is-loading .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--sand);
}
html.is-loading body { overflow: hidden; }
.loader__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 2 / 1;
  color: var(--ink);
  clip-path: inset(calc(100% - var(--fill, 0) * 1%) 0 0 0);
}
.loader__count {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.loader__count::before {
  content: "";
  width: 22px;
  height: 14px;
  border-left: 1px solid var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) left center / 100% 1px no-repeat;
}

/* --- nav bar (compact, centred) ------------------------------------------- */
.bar {
  position: fixed;
  top: 0.875rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 75;
  width: min(calc(100% - 2rem), 26.5rem);
  height: 3.25rem;
  padding: 0.375rem 0.375rem 0.375rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sand-2);
  box-shadow: 0 10px 30px -18px rgba(30, 37, 28, 0.55), inset 0 0 0 1px rgba(30, 37, 28, 0.08);
}
.bar__brand { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); height: 100%; }
.bar__mark { width: 2.5rem; height: 1.25rem; }
.bar__word { width: 4.6rem; height: 0.95rem; }
.bar__menu {
  height: 100%;
  min-width: 7.75rem;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--green);
  color: var(--sand-2);
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color 0.3s var(--ease);
}
.bar__menu:hover { background: var(--green-2); }
.bar__menu:active { transform: scale(0.98); }
.bar__lines { position: relative; width: 20px; height: 8px; }
.bar__lines::before,
.bar__lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}
.bar__lines::before { top: 0; }
.bar__lines::after { bottom: 0; }
.menu-open .bar__lines::before { transform: translateY(3.25px) rotate(45deg); }
.menu-open .bar__lines::after { transform: translateY(-3.25px) rotate(-45deg); }

/* --- full-screen menu ------------------------------------------------------ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--green);
  color: var(--sand-2);
  padding: 6rem var(--pad) var(--pad);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: end;
  gap: 2rem;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s var(--ease), visibility 0s linear 0.8s;
}
.menu-open .menu { visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; }
.menu__links a {
  display: block;
  width: fit-content;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 8.5vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), color 0.3s;
}
.menu-open .menu__links a { opacity: 1; transform: none; }
.menu-open .menu__links li:nth-child(1) a { transition-delay: 0.12s, 0.12s, 0s; }
.menu-open .menu__links li:nth-child(2) a { transition-delay: 0.18s, 0.18s, 0s; }
.menu-open .menu__links li:nth-child(3) a { transition-delay: 0.24s, 0.24s, 0s; }
.menu-open .menu__links li:nth-child(4) a { transition-delay: 0.3s, 0.3s, 0s; }
.menu__links a:hover,
.menu__links a[aria-current="page"] { color: var(--melon); }
.menu__aside { display: grid; gap: 1.5rem; padding-bottom: 0.75rem; }
.menu__aside .label { color: rgba(239, 232, 216, 0.6); margin-bottom: 0.3rem; }
.menu__aside a:hover { color: var(--melon); }

/* --- fixed CTA block ------------------------------------------------------- */
.cta {
  position: fixed;
  right: var(--pad);
  bottom: var(--pad);
  z-index: 60;
  width: clamp(13.5rem, 21vw, 19rem);
  height: 6.25rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: flex-end;
  background: var(--melon);
  color: var(--ink);
  font-weight: 500;
  transition: background-color 0.3s var(--ease), transform 0.6s var(--ease), opacity 0.4s;
}
.cta:hover { background: var(--melon-deep); }
.cta:active { transform: scale(0.985); }
.cta__glyph {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 22px;
  height: 14px;
  border-right: 1px solid currentColor;
  background: linear-gradient(currentColor, currentColor) right center / 100% 1px no-repeat;
  transition: transform 0.5s var(--ease);
}
.cta:hover .cta__glyph { transform: translateX(5px); }
.at-footer .cta,
.menu-open .cta,
body[data-page="contact"] .cta { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* --- hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding: 6rem var(--pad) clamp(1.5rem, 4vh, 2.75rem);
  color: #f6f0e2;
  background: linear-gradient(160deg, #56644f, #a39a78 55%, #d9c79c);
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22, 28, 20, 0.62), rgba(22, 28, 20, 0.12) 45%, rgba(22, 28, 20, 0) 70%);
}
.hero__copy { position: relative; max-width: min(62vw, 58rem); }
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.4vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hero__sub { margin-top: 1.25rem; max-width: 38ch; font-size: 1.0625rem; line-height: 1.45; color: rgba(246, 240, 226, 0.92); }

/* --- client logo wall ------------------------------------------------------ */
.clients {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}
.clients ul { display: contents; }
.clients li {
  height: clamp(8.5rem, 13vw, 11.5rem);
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line);
  transition: background-color 0.4s var(--ease);
}
.clients li:first-child { border-left: 0; }
.clients li:hover { background: var(--sand-2); }
.clients .logo { width: 68%; height: 52%; color: var(--ink); }

/* --- rail layout (sticky index left, content right) ------------------------ */
.rail { display: grid; grid-template-columns: minmax(16rem, 1fr) 2.25fr; }
.rail__side {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--line);
}
.rail__mark {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 62%;
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  color: var(--ink);
}
.index a,
.index__head {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  align-items: center;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
}
.index a { position: relative; opacity: 0.5; transition: opacity 0.4s; }
.index a:hover,
.index a.is-active { opacity: 1; }
.index a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--melon);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.index__head::before {
  content: "";
  width: 12px;
  height: 9px;
  border-left: 1px solid var(--ink);
  background: linear-gradient(var(--ink), var(--ink)) left center / 100% 1px no-repeat;
}
.rail__main { min-width: 0; }
.block {
  padding: clamp(4.5rem, 11vh, 8rem) var(--pad);
  border-bottom: 1px solid var(--line);
}
.block--top { padding-top: clamp(7rem, 16vh, 10rem); }
.block > .label { margin-bottom: 1.75rem; }
.block .display + .tags { margin-top: 2.5rem; }
.block .body { margin-top: 2rem; }

.tags { display: flex; align-items: center; flex-wrap: wrap; row-gap: 0.5rem; }
.tags span {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tags i { width: 1.25rem; height: 1px; background: var(--ink); }

/* what you get: large-type rows */
.gets { margin-top: 3rem; border-top: 1px solid var(--line); }
.gets li {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.6s var(--ease);
}
.gets li:hover { padding-left: 1rem; }
.gets h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.gets p { color: var(--ink-soft); max-width: 40ch; }

/* how we work: four ruled columns with a line that draws across */
.steps { position: relative; margin-top: 3.5rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.steps::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
}
.steps__draw {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--melon);
  transform: scaleX(var(--draw, 1));
  transform-origin: left;
}
.steps li { padding: 1.4rem 1.25rem 0 0; }
.steps li + li { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.steps h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.3vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; }
.steps p { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--ink-soft); }

/* text link with a hairline that slides */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-bottom: 0.3rem;
  font-weight: 500;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.link:hover { background-size: 0% 1px; background-position: right bottom; }

/* --- proof: the mark assembles --------------------------------------------- */
.proof { border-bottom: 1px solid var(--line); }
.proof__pin { position: relative; padding: clamp(4rem, 10vh, 7rem) var(--pad); }
.proof__canvas { display: none; }
.proof__static { width: min(70vw, 30rem); margin: 0 auto 3.5rem; color: var(--ink); aspect-ratio: 456 / 299; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.fact__n {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4.5rem, 10.5vw, 10rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.fact__t { margin-top: 0.9rem; max-width: 22ch; font-weight: 500; line-height: 1.35; }

.proof.is-live .proof__pin { height: 100dvh; padding: 0; overflow: hidden; }
.proof.is-live .proof__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.proof.is-live .proof__static { display: none; }
.proof.is-live .facts { display: block; }
.proof.is-live .fact { position: absolute; opacity: 0; }
.proof.is-live .fact:nth-child(odd) { left: clamp(1rem, 7vw, 7rem); bottom: 16vh; }
.proof.is-live .fact:nth-child(even) { right: clamp(1rem, 7vw, 7rem); top: 30vh; }

/* --- work: client discs on an arc ------------------------------------------ */
.work { border-bottom: 1px solid var(--line); }
.work__pin { position: relative; padding: clamp(4rem, 10vh, 7rem) var(--pad); display: flex; flex-direction: column; }
.work__head { order: -1; }
.work__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3rem; }
.work__meta,
.work__result { display: none; }
.work__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.disc-item__cap { margin-top: 1.25rem; }
.disc-item__cap h3 { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.1; }
.disc-item__cap p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-soft); }

.disc {
  --disc: var(--sand-2);
  --on: var(--ink);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--on);
  background:
    conic-gradient(from 20deg, rgba(255, 255, 255, 0.16), transparent 16%, rgba(255, 255, 255, 0.09) 33%, transparent 50%, rgba(255, 255, 255, 0.16) 68%, transparent 84%, rgba(255, 255, 255, 0.16)),
    var(--disc);
  box-shadow:
    0 38px 60px -34px rgba(30, 37, 28, 0.55),
    inset 0 0 0 1px rgba(30, 37, 28, 0.2),
    inset 0 0 0 0.7vh rgba(255, 255, 255, 0.07);
}
.disc--green { --disc: var(--green); --on: var(--sand-2); }
.disc--moss { --disc: var(--moss); --on: var(--sand-2); }
.disc--melon { --disc: var(--melon); }
.disc--sand { --disc: var(--sand-3); }
.disc__logo { position: absolute; left: 24%; top: 9%; width: 52%; height: 25%; }
.disc__rim { position: absolute; inset: 0; width: 100%; height: 100%; }
.disc__rim text { font-family: var(--sans); font-size: 5.4px; font-weight: 500; letter-spacing: 0.14em; fill: currentColor; opacity: 0.75; text-transform: uppercase; }
.disc__hub {
  position: absolute;
  inset: 37%;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: inset 0 2px 6px rgba(30, 37, 28, 0.3), 0 0 0 1px rgba(30, 37, 28, 0.25), 0 0 0 1.4vh rgba(255, 255, 255, 0.14), 0 0 0 calc(1.4vh + 1px) rgba(30, 37, 28, 0.14);
}

.work.is-live .work__pin { display: block; height: 100dvh; padding: 0; overflow: hidden; }
.work.is-live .work__head { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); margin: 0; z-index: 3; pointer-events: none; }
.work.is-live .work__head .h2 { display: none; }
.work.is-live .work__head .link { pointer-events: auto; margin: 0; }
.work.is-live .work__track { display: block; position: absolute; inset: 0; }
.work.is-live .disc-item {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(54vh, 46vw);
  margin: calc(min(54vh, 46vw) / -2) 0 0 calc(min(54vh, 46vw) / -2);
  will-change: transform;
  cursor: pointer;
}
.work.is-live .disc-item__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.work.is-live .work__meta {
  display: block;
  position: absolute;
  left: var(--pad);
  top: clamp(5rem, 11vh, 6.5rem);
  width: min(21rem, 30vw);
  z-index: 3;
}
.work__meta h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  padding-bottom: 0.9rem;
}
.work__meta dl { border-top: 1px solid var(--line); }
.work__meta div { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.work__meta dd { text-align: right; font-size: 0.8125rem; font-weight: 500; }
.work.is-live .work__result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  position: absolute;
  left: 45%;
  bottom: clamp(4.5rem, 10vh, 6rem);
  width: min(46rem, 50vw);
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
}
.work__result .label { margin-bottom: 0.6rem; }
.work__result p:not(.label) {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.work__count { position: absolute; right: var(--pad); top: clamp(5rem, 11vh, 6.5rem); z-index: 3; font-variant-numeric: tabular-nums; display: none; }
.work.is-live .work__count { display: block; }

/* --- inner pages: case blocks (services, work) ------------------------------ */
.case__meta { display: grid; gap: 0.15rem; margin-bottom: 2.25rem; }
.case__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.case__grid { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 9.5rem 1fr; gap: 2rem; }
.case__tile { aspect-ratio: 1; background: var(--sand-2); display: grid; place-items: center; }
.case__tile .logo { width: 70%; height: 62%; }
.case__grid .body { margin-top: 0; }
.rows { margin-top: 2rem; border-top: 1px solid var(--line); }
.rows div { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.rows dd { font-size: 0.9375rem; }
.case__grid--plain { grid-template-columns: 1fr; }

/* --- contact ---------------------------------------------------------------- */
.form { margin-top: 3.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2rem; max-width: 44rem; }
.field { display: grid; gap: 0.5rem; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.field input,
.field textarea {
  width: 100%;
  padding: 0.5rem 0 0.7rem;
  font: inherit;
  font-size: 1.125rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(30, 37, 28, 0.55);
  border-radius: 0;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(30, 37, 28, 0.55); }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--melon); box-shadow: 0 1px 0 var(--melon); }
.field__error { min-height: 1.1em; font-size: 0.8125rem; color: #a3233c; }
.field__help { font-size: 0.8125rem; color: var(--ink-soft); }
.btn {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 6.25rem;
  padding: 0.85rem 1rem;
  background: var(--melon);
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  transition: background-color 0.3s var(--ease);
}
.btn:hover { background: var(--melon-deep); }
.btn:active { transform: scale(0.99); }
.btn:hover .cta__glyph { transform: translateX(5px); }
.direct { margin-top: 3.5rem; }

/* --- footer (the one dark surface) ------------------------------------------ */
.foot { position: relative; background: var(--green); color: var(--sand-2); overflow: hidden; }
.foot__cta { padding: clamp(5rem, 14vh, 9rem) var(--pad) clamp(3rem, 8vh, 5rem); border-bottom: 1px solid var(--line-inv); }
.foot__cta .display { max-width: 16ch; font-size: clamp(2.6rem, 6.5vw, 6.5rem); line-height: 1; }
.foot__btn { width: clamp(15rem, 24vw, 21rem); margin-top: 3rem; }
.foot__grid { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; padding: clamp(3rem, 8vh, 5rem) var(--pad); }
.foot__links a {
  display: block;
  width: fit-content;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  transition: color 0.3s, transform 0.6s var(--ease);
}
.foot__links a:hover { color: var(--melon); transform: translateX(0.6rem); }
.foot .label { color: rgba(239, 232, 216, 0.6); margin-bottom: 0.6rem; }
.foot__col a:hover { color: var(--melon); }
.foot__base { display: flex; justify-content: space-between; gap: 1rem; padding: var(--pad); border-top: 1px solid var(--line-inv); font-size: 0.8125rem; }
.foot__mark { position: absolute; right: -4vw; bottom: -1px; width: 46vw; aspect-ratio: 2 / 1; color: rgba(239, 232, 216, 0.07); pointer-events: none; }

/* --- responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr; }
  .rail__side { display: none; }
  .hero__copy { max-width: 100%; padding-bottom: 5.5rem; }
  .cta { left: var(--pad); width: auto; height: 3.75rem; align-items: center; }
  .cta__glyph { top: 50%; margin-top: -7px; }
  .clients { grid-template-columns: repeat(6, 1fr); }
  .clients li { grid-column: span 2; border-left: 0; border-top: 1px solid var(--line); height: 7.5rem; }
  .clients li:nth-child(n + 4) { grid-column: span 3; }
  .clients li + li { border-left: 1px solid var(--line); }
  .clients li:nth-child(4) { border-left: 0; }
  .clients li:nth-child(-n + 3) { border-top: 0; }
  .gets li { grid-template-columns: 1fr; gap: 0.6rem; }
  .tags { gap: 0.5rem; }
  .tags i { display: none; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts { grid-template-columns: 1fr; }
  .proof.is-live .fact:nth-child(odd) { bottom: 14vh; }
  .proof.is-live .fact:nth-child(even) { top: auto; bottom: 14vh; right: auto; left: clamp(1rem, 7vw, 7rem); }
  .work__track { grid-template-columns: 1fr 1fr; }
  .work.is-live .disc-item { width: min(40vh, 78vw); margin: calc(min(40vh, 78vw) / -2) 0 0 calc(min(40vh, 78vw) / -2); top: 46%; }
  .work.is-live .work__meta { width: calc(100% - 2 * var(--pad)); top: 5rem; }
  .work.is-live .work__meta div:nth-child(n + 2) { display: none; }
  .work.is-live .work__result { grid-template-columns: 1fr; gap: 0.9rem; width: calc(100% - 2 * var(--pad)); bottom: 7.5rem; }
  .work.is-live .work__result div:first-child { display: none; }
  .work.is-live .work__head { display: none; }
  .work__count { top: auto !important; bottom: 5.75rem; }
  .case__grid { grid-template-columns: 1fr; }
  .case__tile { width: 9.5rem; }
  .rows div { grid-template-columns: 1fr; gap: 0.2rem; }
  .form { grid-template-columns: 1fr; }
  .menu { grid-template-columns: 1fr; align-content: end; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__links { grid-column: 1 / -1; }
  .foot__mark { width: 90vw; }
  .foot__base { padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}