/* =========================================================
   Bago — shared stylesheet
   Colours and fonts live in :root below; change them once here.
   ========================================================= */

/* Fonts are stored in the site itself (assets/fonts), not loaded from Google,
   so visitors' IP addresses aren't sent to Google (GDPR). Both fonts are free
   to self-host under the SIL Open Font License. Jost is one variable file for weights 300–500. */
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("../assets/fonts/jost-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url("../assets/fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Prata"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/prata-latin.woff2") format("woff2");
}

:root {
  /* Palette */
  --ink: #16202B;          /* main dark background */
  --ink-deep: #0D1620;     /* footer, cards */
  --line: #2F3D4B;         /* hairlines on dark */
  --slate: #45505C;
  --slate-2: #5A6673;
  --bar-low: #3A4856;
  --mute: #8A96A2;
  --mute-2: #A7B0B8;
  --mist: #C3CDD6;         /* body text on dark */
  --bone: #DCDCD4;
  --ivory: #F2F1EC;
  --paper: #F7F5F0;        /* headings on dark */
  --linen: #EDEAE2;        /* light sections */
  --linen-line: #C9C4B8;
  --linen-grid: #E2DDD2;

  /* Type */
  --serif: "Prata", Georgia, serif;
  --sans: "Jost", Helvetica, Arial, sans-serif;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --gutter: 24px;
  --maxw: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh; display: flex; flex-direction: column;  /* keeps the footer at the bottom on short pages */
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--paper); }
button { font: inherit; color: inherit; }
main { flex: 1; display: flex; flex-direction: column; }
main > :last-child { flex: 1; }  /* on short pages the last section fills the space above the footer */
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
:focus-visible { outline: 1px solid var(--mist); outline-offset: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
section[id] { scroll-margin-top: 70px; }

/* ---------- Shared text styles ---------- */
.container { max-width: var(--maxw); margin: 0 auto; }
.eyebrow {
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--mute-2);
}
.body-text { font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--mist); text-wrap: pretty; }
.numeral { font-family: var(--serif); font-size: 20px; color: var(--mute); }
.stack { display: flex; flex-direction: column; }

.btn {
  display: inline-block;
  font-size: 13px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  padding: 18px 30px; border: 0; cursor: pointer; transition: background .2s;
}
.btn--light { color: var(--ink); background: var(--linen); }
.btn--light:hover { color: var(--ink); background: var(--paper); }
.btn--dark { color: var(--paper); background: var(--ink); }
.btn--dark:hover { color: var(--paper); background: var(--line); }

.text-link {
  align-self: flex-start; display: flex; align-items: center; gap: 14px;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--paper);
  border-bottom: 1px solid var(--slate); padding-bottom: 8px; transition: border-color .2s;
}
.text-link:hover { border-color: var(--mist); }

/* Scroll reveal (driven by js/site.js) */
.reveal-pending { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s var(--ease-out); }
.reveal-in { opacity: 1; transform: none; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(22, 32, 43, .94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nav__inner {
  max-width: 1320px; margin: 0 auto; padding: 16px clamp(18px, 3vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--paper); }
.brand span { font-family: var(--serif); font-size: 18px; letter-spacing: .2em; }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 34px); }
.nav__link {
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute-2);
  transition: color .2s; white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--paper); }
.nav__link[aria-current="page"]:not(.nav__link--home) { border-bottom: 1px solid var(--mist); padding-bottom: 4px; }
.nav__cta {
  font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); background: var(--linen); padding: 11px 18px; transition: background .2s; white-space: nowrap;
}
.nav__cta:hover, .nav__cta[aria-current="page"] { background: var(--paper); color: var(--ink); }
.nav__toggle {
  display: none; background: none; border: 1px solid var(--slate); padding: 9px 14px; cursor: pointer;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--paper);
}

@media (max-width: 900px) {   /* below this the menu links don't fit beside the booking button */
  .nav__toggle { display: block; }
  .nav__inner { flex-wrap: wrap; }
  .nav__links {
    display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 6px; border-top: 1px solid var(--line);
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__link { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .nav__link[aria-current="page"]:not(.nav__link--home) { padding-bottom: 16px; border-bottom-color: var(--line); }
  .nav__cta { margin-top: 18px; padding: 16px 18px; text-align: center; font-size: 13px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink-deep); padding: 40px var(--gutter); }
.footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}
.footer .brand span { font-size: 15px; color: var(--mist); }
.footer__legal { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }

/* ---------- Three-column rule grid (Home “What we do”, Approach “Is this you?”) ---------- */
.rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rule-grid > * { display: flex; flex-direction: column; gap: 16px; padding: 40px 40px 0; border-left: 1px solid var(--line); }
.rule-grid > :first-child { padding-left: 0; border-left: 0; }
.rule-grid > :last-child { padding-right: 0; }
.rule-grid h3 { font-size: 26px; line-height: 1.3; }
.rule-grid--boxed > * { padding-bottom: 40px; border-bottom: 1px solid var(--line); gap: 18px; }
.rule-grid--boxed h3 { font-size: 28px; }
.rule-grid--boxed .numeral { font-size: 22px; }

@media (max-width: 900px) {
  .rule-grid { grid-template-columns: 1fr; border-top: 0; }
  .rule-grid > *, .rule-grid > :first-child, .rule-grid > :last-child {
    padding: 32px 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .rule-grid--boxed > * { border-bottom: 0; }
  .rule-grid--boxed > :last-child { border-bottom: 1px solid var(--line); }
}

/* =========================================================
   HOME
   ========================================================= */
.hero {
  min-height: 100vh; min-height: 100svh; padding: 96px var(--gutter) 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
}
.hero__row { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Animated logo stage — 340×360 artboard, scaled by --hs (set in js/home.js) */
.hero__wrap {
  --hs: 1.3;
  position: relative; margin: 0 auto; max-width: 100%;
  width: calc(340px * var(--hs)); height: calc(220px * var(--hs));
}
.stage {
  position: absolute; left: 50%; top: calc(-40px * var(--hs));
  width: 340px; height: 360px; margin-left: -170px;
  transform: scale(var(--hs)); transform-origin: 50% 0; overflow: hidden;
}
.stage > * { position: absolute; }
.stage__stem { left: 169px; top: 59.2px; width: 2px; height: 46px; background: var(--ivory); opacity: 0; transition: opacity .5s ease; }
.stage__wordclip { left: 0; right: 0; top: 160px; height: 65px; padding-top: 12px; overflow: hidden; }
.stage__word {
  text-align: center; font-family: var(--serif); font-size: 40px; line-height: 1;
  letter-spacing: .2em; text-indent: .2em; color: var(--ivory);
  transform: translateY(0); transition: transform 1.5s cubic-bezier(.22, .8, .24, 1);
}
.stage__line {
  left: 50%; top: 225px; height: 1px; width: var(--dw, 188px); background: var(--bone);
  transform: translateX(-50%); transition: width .9s cubic-bezier(.4, 0, .2, 1), background-color .9s ease;
}
.stage__ripple {
  left: 140px; top: 219px; width: 60px; height: 12px; border: 1px solid var(--mist); border-radius: 50%;
  transform: scale(3.2); opacity: 0; transition: opacity 1s ease-out, transform 1s ease-out;
}
.stage__ripple--2 { transition-delay: .18s; }
.stage__ring {
  left: 140.1px; top: 107.5px; width: 59.8px; height: 59.8px; border: 2px solid var(--ivory); border-radius: 50%;
  transform: translateY(74px); opacity: 0; transition: transform .6s ease-in, opacity .45s ease;
}
.stage__mark { inset: 0; opacity: 1; transform: none; transition: opacity .8s ease, transform .8s var(--ease-out); }
.stage__mark svg { position: absolute; left: 149px; top: 100px; }
.stage__desc {
  left: 0; right: 0; top: 237px; text-align: center; font-size: 10.5px; font-weight: 300; line-height: 1;
  letter-spacing: .38em; text-transform: uppercase; color: var(--bone); opacity: 1; transition: opacity 1.2s ease;
}
.stage__desc span { display: inline-block; text-indent: .38em; }

/* Phases 0–5 (no data-ph = final state, so the page reads fine without JS) */
.stage[data-ph="0"] .stage__stem, .stage[data-ph="1"] .stage__stem, .stage[data-ph="2"] .stage__stem { opacity: 1; }
.stage[data-ph="0"] .stage__ring { transform: none; opacity: 1; }
.stage[data-ph="1"] .stage__ring, .stage[data-ph="2"] .stage__ring {
  transform: translateY(57.7px); opacity: 1; transition: transform .42s cubic-bezier(.55, 0, 1, .45);
}
.stage[data-ph="0"] .stage__ripple, .stage[data-ph="1"] .stage__ripple { transform: scale(.6); opacity: 0; transition: opacity .1s ease, transform .1s ease; }
.stage[data-ph="2"] .stage__ripple { transform: scale(1); opacity: .8; transition: opacity .1s ease, transform .1s ease; }
.stage:is([data-ph="0"], [data-ph="1"], [data-ph="2"], [data-ph="3"]) .stage__word { transform: translateY(80px); }
.stage:is([data-ph="0"], [data-ph="1"], [data-ph="2"], [data-ph="3"], [data-ph="4"]) .stage__mark { opacity: 0; transform: translateY(8px); }
.stage:is([data-ph="0"], [data-ph="1"], [data-ph="2"], [data-ph="3"], [data-ph="4"]) .stage__line { width: 220px; background: var(--slate); }
.stage[data-desc="0"] .stage__desc { opacity: 0; }
.stage.is-reset, .stage.is-reset * { transition: none !important; }

.hero__head { width: 100%; display: flex; justify-content: center; margin-top: 22px; }
.hero h1 {
  font-size: clamp(32px, min(4.6vw, 6.4vh), 64px); line-height: 1.1; text-wrap: balance; max-width: 780px; text-align: center;
}
.hero__copy { width: 100%; max-width: 680px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.hero__rule { height: 1px; width: 120px; background: var(--bone); }
.hero__sub { font-family: var(--serif); font-size: clamp(18px, min(2vw, 3.2vh), 27px); line-height: 1.4; color: var(--mist); }
.hero__pick {
  font-family: var(--serif); font-size: clamp(26px, min(3.2vw, 4.6vh), 44px); line-height: 1.15; color: var(--ivory);
  clip-path: inset(0 0 0 0);
}
/* "We pick it for you.": hidden (data-tx="0"), then wiped in left to right (data-tx="1") */
.hero[data-tx="0"] .hero__pick { clip-path: inset(0 100% 0 0); }
.hero[data-tx="1"] .hero__pick { animation: pick-wipe 1.1s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes pick-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.what { padding: 140px var(--gutter) 120px; }
.what .container { display: flex; flex-direction: column; gap: 72px; }
.what__head { display: flex; flex-direction: column; gap: 22px; max-width: 820px; }
.what h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.22; text-wrap: balance; }
.what__lead { max-width: 640px; margin-top: 6px; }

.cta-band { background: var(--linen); color: var(--ink); padding: var(--gutter); }
.cta-band__box {
  border: 1px solid var(--linen-line); padding: clamp(48px, 7vw, 110px) var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center;
}
.cta-band h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.2; max-width: 840px; text-wrap: balance; }

@media (max-width: 600px) {
  .what { padding: 96px var(--gutter) 88px; }
  .what .container { gap: 48px; }
}

/* =========================================================
   APPROACH
   ========================================================= */
.approach-hero { min-height: 100vh; padding: 96px var(--gutter) var(--gutter); display: flex; }
.approach-hero__frame {
  flex: 1; border: 1px solid var(--line); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 56px; align-items: center;
  padding: clamp(28px, 4.5vw, 72px);
}
.approach-hero__intro { display: flex; flex-direction: column; gap: 32px; }
.kicker { display: flex; align-items: center; gap: 16px; }
.kicker i { width: 36px; height: 1px; background: var(--mute); }
.approach-hero h1 { font-size: clamp(36px, 4.2vw, 62px); line-height: 1.12; text-wrap: balance; }
.approach-hero__lead { font-size: 19px; font-weight: 300; line-height: 1.7; color: var(--mist); max-width: 540px; text-wrap: pretty; }
.approach-hero .btn { padding: 18px 28px; align-self: flex-start; }

.rate-card {
  border: 1px solid var(--line); background: var(--ink-deep); padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column; gap: 28px; min-width: 0;
}
.rate-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.rate-card__label { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--mute-2); }
.rate-card__label--dim { color: var(--mute); }
.rate-card__live { display: flex; align-items: center; gap: 10px; }
.rate-card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mist); transition: opacity .6s; }
.rate-card__bars {
  position: relative; height: 320px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--slate);
}
.rate-card__static { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--slate-2); }
.rate-card__bars span { flex: 1; transition: height .45s var(--ease-out), background .25s; }
.rate-card__days { display: flex; gap: 8px; margin-top: -16px; }
.rate-card__days span { flex: 1; text-align: center; font-size: 12.5px; letter-spacing: .06em; color: var(--mute); }
.rate-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.rate-card__stats > div { padding: 20px 20px 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rate-card__stats > div:first-child { padding-left: 0; border-left: 0; }
.rate-card__stats > div:last-child { padding-right: 0; }
.rate-card__stats small { font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.rate-card__stats strong { font-family: var(--serif); font-weight: 400; font-size: 40px; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .approach-hero { min-height: 0; padding: 88px 12px 12px; }
  .approach-hero__frame { gap: 40px; }
  .rate-card__bars { height: 220px; gap: 4px; }
  .rate-card__days { gap: 4px; }
  .rate-card__days span { font-size: 10.5px; letter-spacing: 0; }
  .rate-card__label { font-size: 11px; letter-spacing: .2em; }
  .rate-card__stats > div { padding: 16px 10px 0; }
  .rate-card__stats small { font-size: 10px; letter-spacing: .14em; }
  .rate-card__stats strong { font-size: 24px; }
}

.fit { padding: 120px var(--gutter); }
.fit .container { display: flex; flex-direction: column; gap: 64px; }
.fit h2 { font-size: clamp(36px, 4vw, 58px); line-height: 1.16; }
.section-head { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }

.lever { background: var(--linen); color: var(--ink); padding: 140px var(--gutter); }
.lever__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.lever h2 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.26; text-wrap: balance; }
.lever__rule { width: 64px; height: 1px; background: var(--slate-2); }
.lever p { font-size: 19px; font-weight: 300; line-height: 1.75; color: var(--slate); max-width: 780px; text-wrap: pretty; }

@media (max-width: 600px) {
  .fit { padding: 88px var(--gutter); }
  .fit .container { gap: 40px; }
  .lever { padding: 96px var(--gutter); }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services { padding: 108px var(--gutter) 88px; }
.services .container { display: flex; flex-direction: column; gap: 36px; }
.services .section-head { gap: 26px; }
.services h1 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.16; }
.services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: start; }
.svc-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.svc-list { --row-out: 20px; }
.svc-list button {
  position: relative; background: none; border: 0;
  padding: 19px var(--row-out); margin: 0 calc(-1 * var(--row-out));   /* hover area and highlight reach a little past the text */
  display: flex; align-items: baseline; gap: 26px; text-align: left; cursor: pointer; color: var(--mute);
  transition: color .25s, background-color .25s, box-shadow .25s;
}
/* The row under the mouse "pops out": dark panel, accent bar on the left, text nudged right */
.svc-list button::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--mist);
  transform: scaleY(0); transition: transform .25s var(--ease-out);
}
.svc-list button[aria-selected="true"] {
  z-index: 1; color: var(--paper); background: var(--ink-deep); box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.svc-list button[aria-selected="true"]::before { transform: scaleY(1); }
/* Dividing line under each row, aligned with the text (not the wider highlight) */
.svc-list button::after {
  content: ""; position: absolute; left: var(--row-out); right: var(--row-out); bottom: 0; height: 1px; background: var(--line);
}
.svc-list__num, .svc-list__name { transition: transform .25s var(--ease-out); }
.svc-list button[aria-selected="true"] :is(.svc-list__num, .svc-list__name) { transform: translateX(8px); }
.svc-list__num { font-family: var(--serif); font-size: 16px; width: 26px; color: var(--mute); flex-shrink: 0; }
.svc-list__name { flex: 1; font-family: var(--serif); font-size: 25px; line-height: 1.3; }
.svc-list__arrow { font-size: 18px; opacity: 0; transition: opacity .25s; }
.svc-list button[aria-selected="true"] .svc-list__arrow { opacity: 1; }
/* The card on the right fades in each time it changes */
@keyframes svc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.svc-panel .svc-card:not([hidden]) { animation: svc-in .35s var(--ease-out); }

.panel {
  position: relative; border: 1px solid var(--line); background: var(--ink-deep);
  transition: border-color .25s;
}
.step-panel { cursor: pointer; user-select: none; }
.step-panel:hover { border-color: var(--slate); }
.svc-card { padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; min-height: 510px; }
.svc-card__num { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--line); }
.svc-card h3 { font-size: 34px; line-height: 1.24; }
.svc-card p { font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--mist); text-wrap: pretty; }
.svc-card ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-card li {
  display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 300; color: var(--mist);
}
.svc-card li::before { content: ""; width: 18px; height: 1px; background: var(--mute); flex-shrink: 0; transform: translateY(-4px); }

.faq-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 56px; align-items: baseline;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 0; margin-top: 8px;
}
.faq-row h3 { font-size: 19px; line-height: 1.35; }
.faq-row p { font-size: 15.5px; font-weight: 300; line-height: 1.75; color: var(--mist); text-wrap: pretty; }

.process { padding: 64px var(--gutter) 120px; }
.process .container { display: flex; flex-direction: column; gap: 64px; }
.process h2 { font-size: clamp(36px, 4vw, 58px); line-height: 1.16; }
.process__body { display: flex; flex-direction: column; gap: 48px; }
.steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps__track, .steps__fill { position: absolute; left: 10%; top: 10px; height: 1px; }
.steps__track { right: 10%; background: var(--line); }
.steps__fill { width: 0; background: var(--mist); }
.steps button {
  position: relative; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--mute);
}
.steps button.is-done { color: var(--paper); }
.steps__dot {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--slate-2); background: var(--ink);
  transition: background .3s, border-color .3s;
}
.steps button.is-done .steps__dot { border-color: var(--paper); background: var(--mute); }
.steps button[aria-selected="true"] .steps__dot { background: var(--paper); }
.steps__label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-align: center; transition: color .3s; }
.step-card {
  padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 40px; align-items: center; min-height: 300px;
}
.step-card__num { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--slate); }
.step-card__text { display: flex; flex-direction: column; gap: 16px; }
.step-card h3 { font-size: 32px; line-height: 1.24; }
.step-card p { font-size: 18px; font-weight: 300; line-height: 1.75; color: var(--mist); text-wrap: pretty; }

@media (max-width: 600px) {
  .services { padding: 96px var(--gutter) 64px; }
  .services__grid { gap: 36px; }
  .svc-list { --row-out: 12px; }
  .svc-list button { gap: 16px; padding-top: 16px; padding-bottom: 16px; }
  .svc-list__name { font-size: 21px; }
  .svc-card { padding: 28px 24px; min-height: 0; }
  .svc-card h3 { font-size: 28px; }
  .svc-card p, .step-card p { font-size: 17px; }
  .process { padding: 48px var(--gutter) 96px; }
  .process .container { gap: 44px; }
  .steps__label { font-size: 9.5px; letter-spacing: .08em; padding: 0 2px; }
  .step-card { gap: 20px; min-height: 0; }
  .step-card__num { font-size: 48px; }
  .step-card h3 { font-size: 26px; }
}

/* =========================================================
   TEAM
   ========================================================= */
.team { min-height: calc(100vh - 140px); padding: 108px var(--gutter) 88px; }
.team .container { display: flex; flex-direction: column; gap: 30px; }
.team__head { display: flex; flex-direction: column; gap: 22px; }
.team__person { display: flex; flex-direction: column; gap: 8px; }
.team h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.1; }
.team__role { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
.team__socials { display: flex; gap: 10px; margin-top: 6px; }
.team__social {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--slate); color: var(--mist); transition: border-color .2s, color .2s;
}
.team__social:hover { border-color: var(--mist); color: var(--paper); }
.team__quote { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.45; text-wrap: pretty; max-width: 640px; }
.team__bio { display: flex; flex-direction: column; gap: 18px; margin-top: -12px; }
.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--line); }
.creds div { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 300; color: var(--paper); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--linen); color: var(--ink); padding: 96px var(--gutter) var(--gutter); }
.contact__frame {
  border: 1px solid var(--linen-line); padding: clamp(36px, 6vw, 96px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 64px; align-items: center;
}
.contact__intro { display: flex; flex-direction: column; gap: 28px; }
.contact__intro .btn { align-self: flex-start; margin-top: 8px; }
.contact .eyebrow { color: var(--slate); }
.contact h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.14; text-wrap: balance; }

/* The rising line, in the right-hand column (below the text when columns stack) */
.contact__visual { position: relative; height: 400px; }
.contact__graph { position: absolute; inset: 0; pointer-events: none; }
.contact__graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.contact__curve { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.contact__graph.is-drawn .contact__curve { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1); }
.contact__dot {
  position: absolute; right: -5px; top: calc(42.9% - 5px); width: 10px; height: 10px; border-radius: 50%;
  background: var(--mute); opacity: 0; transition: opacity .5s ease 2.3s;
}
.contact__graph.is-drawn .contact__dot { opacity: 1; }

@media (max-width: 1100px) {
  .contact__frame { gap: 40px; }
  .contact__visual { height: 260px; }
}

.form { display: flex; flex-direction: column; gap: 26px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 26px; }
.form label { display: flex; flex-direction: column; gap: 10px; }
.form__label { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--slate); }
.form__label em { font-style: normal; letter-spacing: .12em; text-transform: none; color: var(--slate-2); }
.form input, .form textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--mute); border-radius: 0; padding: 10px 0;
  font-family: var(--sans); font-size: 18px; font-weight: 300; color: var(--ink); outline: none; width: 100%;
}
.form input:focus, .form textarea:focus { border-bottom-color: var(--ink); }
.form textarea { line-height: 1.6; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: var(--mute); }
.form .btn { align-self: flex-start; margin-top: 8px; }
.form__error { font-size: 15px; color: #8A2E2E; }

.thanks { border: 1px solid var(--linen-line); padding: 44px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.thanks h2 { font-size: 32px; line-height: 1.24; }
.thanks p { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--slate); }

@media (max-width: 600px) {
  .contact { padding: 88px 12px 12px; }
  .contact__frame { padding: 36px 20px; gap: 32px; }
  .contact__visual { height: 200px; margin-right: 5px; }
  .thanks { padding: 28px; }
  .thanks h2 { font-size: 26px; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; padding: 120px var(--gutter); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.notfound h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.15; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
}