/* Self-hosted Google Fonts (OFL), latin subset. Variable files carry both weights. */
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dm-serif-display-400-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: "Instrument Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/instrument-sans-400-600-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: "Libre Baskerville"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/libre-baskerville-400-700-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: "Parisienne"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/parisienne-400-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; }

/* Tokens mirror DESIGN.md. Layout follows findrealestate.com; forest/gold/ivory come from Mia's résumé. */
:root {
  --color-primary: #122B28;
  --color-primary-hover: #28463E;
  --color-tertiary: #7E6440;
  --color-tertiary-hover: #6E5636;
  --color-ornament: #B89A68;
  --color-secondary: #59625E;
  --color-neutral: #ECE3D2;
  --color-surface: #F7F4EC;
  --color-on-surface: #12211E;
  --color-on-primary: #F7F4EC;
  --color-on-tertiary: #FFFFFF;
  --color-on-primary-muted: #C9AE7E;
  --color-border: #E2D9C6;
  --color-error: #A3352B;
  --color-ghost: rgba(18, 43, 40, 0.2);       /* unrevealed scroll text */
  --color-rule-dark: rgba(247, 244, 236, 0.16);

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;   /* name + display headers */
  --font-heading: "Libre Baskerville", Georgia, serif;                     /* section headers, caps */
  --font-body: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif; /* descriptions + UI */
  --font-script: "Parisienne", "Segoe Script", cursive;                     /* header + footer navigation */

  --radius-xs: 2px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --nav-h: 72px;
  --measure: 720px;

    --ring: 0 0 0 3px rgba(18, 43, 40, 0.25);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Type scale — mirrors findrealestate.com: 1rem = 10px at 375px wide, then 0.5208vw from 768px (10px at 1920px+).
   Each token is [phone / desktop] in the reference's own rem values. Reading sizes get a px floor for legibility. */
html { font-size: 2.6666667vw; }
@media (min-width: 768px) { html { font-size: 0.5208333vw; } }
@media (min-width: 1920px) { html { font-size: 10px; } }
:root {
  --fs-hero: 5.4rem;            /* hero h1            5.4 / 14   */
  --fs-lede: 1.6rem;            /* hero text          1.6 / 3.2  */
  --fs-statement: 3rem;         /* why-us text        3   / 5.6  */
  --fs-title: 4.4rem;           /* section titles     4.4 / 7.2  */
  --fs-sub: 2.2rem;             /* quote, steps, arrows text 2.2 / 3.2 */
  --fs-item: max(15px, 1.6rem); /* services item text 1.6 / 2.4  */
  --fs-word: 6.4rem;            /* services big word (adapted for long words) */
  --fs-outro: 3.4rem;           /* outro title        3   / 7.2  */
  --fs-body: max(16px, 1.6rem);
  --fs-small: max(13px, 1.4rem);
  --fs-label: max(12px, 1.4rem);
  --fs-btn: max(14px, 1.5rem);
  --fs-years: 2.2rem;
  --fs-script-nav: 3.8rem;      /* menu links (script reads ~1.3× smaller than sans) */
  --fs-script-foot: 3.6rem;     /* footer links       3   / 3.2 sans → script */
  --fs-script-head: 3.4rem;     /* footer heading     1.6 / 3.2 sans → script */
  --margin: 2.5rem;             /* container padding  2.5 / 10   */
}
@media (min-width: 768px) {
  :root {
    --fs-hero: 14rem;
    --fs-lede: max(17px, 3.2rem);
    --fs-statement: max(28px, 5.6rem);
    --fs-title: max(34px, 7.2rem);
    --fs-sub: max(18px, 3.2rem);
    --fs-item: max(15px, 2rem);
    --fs-word: max(64px, 18rem);
    --fs-outro: max(34px, 7.2rem);
    --fs-body: max(16px, 1.8rem);
    --fs-small: max(13px, 1.6rem);
    --fs-label: max(12px, 1.6rem);
    --fs-btn: max(14px, 1.6rem);
    --fs-years: 2.8rem;
    --fs-script-nav: 7.2rem;
    --fs-script-foot: 4.4rem;
    --fs-script-head: 4.4rem;
    --margin: 10rem;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font: 400 var(--fs-body)/1.7 var(--font-body);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; } /* <picture> only wraps format sources; the <img> keeps its layout */
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }
[id] { scroll-margin-top: var(--nav-h); }

.container { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--margin); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 8px 16px; border-radius: var(--radius-xs);
}
.skip-link:focus { top: 16px; }

/* Shared section grammar (reference: small label left, big statement right) */
.section { padding-block: 160px; }
@media (max-width: 768px) { .section { padding-block: 96px; } }
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 48px;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.label {
  font-family: var(--font-heading); font-size: var(--fs-label); font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary);
}
.label--light { color: var(--color-on-primary); }
.title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-title); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-primary);
  overflow-wrap: anywhere; min-width: 0;
}
.title--light { color: var(--color-on-primary); }
.echo { color: var(--color-tertiary); }
.title--light .echo, .exp .echo, .outro .echo { color: var(--color-on-primary-muted); }

/* Buttons — pills with arrow, as in the reference */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  border-radius: var(--radius-full); border: 1px solid transparent;
  font: 600 var(--fs-btn)/1.2 var(--font-body); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:hover .arrow-icon { transform: translateX(3px); }
.btn:focus-visible { border-radius: var(--radius-full); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--accent { background: var(--color-tertiary); color: var(--color-on-tertiary); }
.btn--accent:hover { background: var(--color-tertiary-hover); }
.btn--cream { background: var(--color-on-primary); color: var(--color-primary); }
.btn--cream:hover { background: var(--color-neutral); }
.btn--ghost { color: var(--color-on-primary); border-color: rgba(247, 244, 236, 0.5); }
.btn--ghost:hover { background: rgba(247, 244, 236, 0.12); }
.btn--sm { min-height: 44px; padding: 10px 22px; }
.arrow-icon {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s ease;
}

/* Nav — MFV mark + hamburger at every width (desktop included). Hidden while the banner plays;
   JS adds .is-away until the banner has been scrolled past. Full-screen overlay menu. */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--color-surface); transition: box-shadow 0.3s ease, transform 0.6s var(--ease-out); }
.nav.is-away { transform: translateY(-110%); }
.nav.is-away:focus-within { transform: none; }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--color-border); }
.nav__inner {
  max-width: 1920px; margin-inline: auto; padding-inline: var(--margin);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand {
  font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: 0.04em;
  color: var(--color-primary); text-decoration: none;
}
.nav__cta { display: none; }
.nav__toggle {
  display: grid; place-content: center; gap: 8px;
  width: 48px; height: 48px; margin-right: -12px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.nav__toggle span { display: block; width: 28px; height: 1.6px; background: var(--color-primary); transition: transform 0.45s var(--ease-out); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(4.8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.8px) rotate(-45deg); }
.nav__links {
  position: fixed; left: 0; right: 0; top: var(--nav-h);
  height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h));
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: clamp(24px, 5vh, 64px) var(--margin) calc(32px + env(safe-area-inset-bottom));
  background: var(--color-surface);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.nav__links.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease, transform 0.45s var(--ease-out); }
.nav__links a:not(.btn) {
  padding: 0.12em 0; font-family: var(--font-script); font-size: var(--fs-script-nav); line-height: 1.1;
  text-decoration: none; color: var(--color-primary); transition: color 0.3s ease, transform 0.4s var(--ease-out);
}
.nav__links a:not(.btn):hover { color: var(--color-tertiary); transform: translateX(8px); }
.nav__links .btn, .nav__links .btn:hover { color: var(--color-on-primary); }
.nav__cta-mobile { display: flex; margin-top: auto; min-height: 56px; padding: 14px 32px 10px; font-family: var(--font-script); font-size: 26px; font-weight: 400; }
@media (max-width: 767px) { .nav__cta-mobile { width: 100%; } }
html.menu-open { overflow: hidden; }

/* Banner · reference opening sequence. JS sets one 0→1 variable per phase:
   --lead  centred headline + CTA lift away
   --rise  towers photo rises from below the fold to centre
   --line  outlined MIA draws in over it
   --fill  letters fill with the towers, photo fades
   --name  name + roles settle in
   --mist  ivory mist rises and wipes into the next section */
.intro {
  --lead: 0; --rise: 0; --line: 0; --fill: 0; --name: 0; --mist: 0;
  position: relative; height: 420vh;
}
.intro__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; display: grid; place-items: center; align-content: center; /* MIA + name + roles sit as one centred group */
}
.intro__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 18% 78%, rgba(184, 154, 104, 0.28), transparent 70%),
    radial-gradient(55% 45% at 85% 20%, rgba(18, 43, 40, 0.10), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, var(--color-neutral), transparent 75%),
    var(--color-surface);
  transform: scale(calc(1 + var(--rise) * 0.08));
}
.intro__lead {
  position: absolute; inset: 0;
  z-index: 3; padding-inline: var(--margin);
  display: grid; justify-items: center; align-content: center; gap: clamp(16px, 2.4vh, 24px); text-align: center;
  opacity: calc(1 - var(--lead));
  transform: translateY(calc(var(--lead) * -90px));
  pointer-events: none;
}
.intro__lead .btn { pointer-events: auto; }
.intro__headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.02em; text-wrap: balance;
  color: var(--color-primary);
}
.intro__lede { max-width: 71rem; font-size: var(--fs-lede); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-secondary); text-wrap: balance; }
.intro__lede strong { font-weight: 600; color: var(--color-primary); }
.intro__photo {
  position: absolute; left: 50%; top: 50%;
  width: min(56vh, 76vw); aspect-ratio: 4 / 5;
  border-radius: var(--radius-full) var(--radius-full) 0 0; overflow: hidden; z-index: 1;
  transform:
    translate(-50%, calc(-50% + (1 - var(--rise)) * 92vh))
    scale(calc(0.86 + var(--rise) * 0.14 + var(--fill) * 0.14));
  opacity: calc(1 - var(--fill) * 1.15);
}
.intro__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 22%; }
.intro__title { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; margin: 0; }
.intro__mark { display: grid; }
.intro__word {
  grid-area: 1 / 1;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(120px, 34vw, 560px); line-height: 0.82; letter-spacing: -0.02em;
}
@media (max-width: 600px) { .intro__word { font-size: 44vw; } }
.intro__word--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-tertiary);
  opacity: calc(var(--line) - var(--fill));
  transform: scale(calc(1.06 - var(--line) * 0.06));
}
.intro__word--fill {
  color: transparent;
  background:
    linear-gradient(rgba(18, 43, 40, 0.12), rgba(18, 43, 40, 0.12)),
    url("/images/towers-courtyard-1800.jpg") 50% 38% / cover no-repeat,
    var(--color-primary);
  background-image:
    linear-gradient(rgba(18, 43, 40, 0.12), rgba(18, 43, 40, 0.12)),
    image-set(url("/images/towers-courtyard-1800.avif") type("image/avif"), url("/images/towers-courtyard-1800.jpg") type("image/jpeg"));
  -webkit-background-clip: text; background-clip: text;
  opacity: var(--fill);
}
.intro__sub {
  margin-top: clamp(8px, 1.5vw, 20px);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 4.6vw, 76px); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--color-primary);
  opacity: var(--name);
  transform: translateY(calc((1 - var(--name)) * 24px));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--name) * 130% - 30%), transparent calc(var(--name) * 130%));
          mask-image: linear-gradient(90deg, #000 calc(var(--name) * 130% - 30%), transparent calc(var(--name) * 130%));
}
.intro__roles {
  position: relative; z-index: 2; margin-top: clamp(20px, 3.2vh, 40px);
  padding-inline: var(--margin); text-align: center; text-wrap: balance;
  font-size: var(--fs-lede); line-height: 1.5; color: var(--color-secondary);
  opacity: var(--name);
  transform: translateY(calc((1 - var(--name)) * 24px));
}
.intro__roles span { color: var(--color-ornament); padding-inline: 6px; }
.intro__mist {
  position: absolute; inset: -10% -10% auto; height: 200%; z-index: 4; pointer-events: none;
  background:
    radial-gradient(40% 12% at 20% 22%, var(--color-surface), transparent 70%),
    radial-gradient(45% 14% at 75% 18%, var(--color-surface), transparent 70%),
    radial-gradient(60% 14% at 50% 26%, var(--color-surface), transparent 72%),
    linear-gradient(180deg, transparent 0%, var(--color-surface) 30%, var(--color-surface) 100%);
  transform: translateY(calc(100% - var(--mist) * 130%));
}
@media (max-width: 600px) {
  .intro { height: 380vh; }
  .intro__photo { width: 76vw; }
  .intro__word--fill {
    background-image:
      linear-gradient(rgba(18, 43, 40, 0.12), rgba(18, 43, 40, 0.12)),
      image-set(url("/images/towers-courtyard-900.avif") type("image/avif"), url("/images/towers-courtyard-1800.jpg") type("image/jpeg"));
  }
}

/* 2 · Why */
.statement {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--fs-statement); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--color-primary);
}
.why__body {
  margin-top: 56px; max-width: var(--measure);
  display: grid; gap: 16px; color: var(--color-secondary);
}
.js [data-reveal] .w { opacity: 0.16; }
.arrows__quote [data-reveal] { color: var(--color-primary); }

/* 3 · Chevrons */
.arrows { text-align: center; padding-top: 40px; }
.arrows__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-title); line-height: 1; letter-spacing: -0.02em; color: var(--color-primary);
}
.arrows__row {
  margin: 72px auto; max-width: 1040px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.arrow {
  aspect-ratio: 1 / 1.05; overflow: hidden;
  clip-path: polygon(0 0, 66% 0, 100% 50%, 66% 100%, 0 100%, 34% 50%);
  margin-right: -14%;
}
.arrow img { width: 100%; height: 100%; object-fit: cover; }
.arrow { --a: 1; background: var(--color-neutral); }
.arrow img { opacity: var(--a); transform: translateX(calc((1 - var(--a)) * -24px)) scale(calc(1.08 - var(--a) * 0.08)); }
.js .arrow { --a: 0.06; }
.arrows__quote { max-width: 760px; margin-inline: auto; }
.arrows__quote p { font-size: var(--fs-sub); line-height: 1.3; letter-spacing: -0.01em; font-weight: 400; text-wrap: balance; }
@media (max-width: 600px) { .arrows__row { margin-block: 48px; } }

/* Arrive: rows and lists fade up once (reference step rows) */
.js [data-in] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.js [data-in].is-in { opacity: 1; transform: none; }
.js .steps__list li[data-in]:nth-child(2) { transition-delay: 0.06s; }
.js .steps__list li[data-in]:nth-child(3) { transition-delay: 0.12s; }
.js .steps__list li[data-in]:nth-child(4) { transition-delay: 0.18s; }
.js .steps__list li[data-in]:nth-child(5) { transition-delay: 0.24s; }
[data-zoom] img { transform: scale(var(--z, 1)); transform-origin: 50% 30%; will-change: transform; }

/* 4 · Steps */
.steps__intro { align-self: start; display: grid; gap: 32px; justify-items: start; }
.steps__label {
  font-family: var(--font-heading); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary); padding-bottom: 20px;
}
.steps__list { border-top: 1px solid var(--color-border); }
.steps__list li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: baseline;
  padding-block: 28px; border-bottom: 1px solid var(--color-border);
}
.steps__num { font-size: var(--fs-small); color: var(--color-secondary); }
.steps__list p { font-size: var(--fs-sub); line-height: 1.3; letter-spacing: -0.01em; }
.steps__list strong { font-family: var(--font-heading); font-weight: 700; font-size: 0.9em; color: var(--color-primary); }
.steps__list .echo { color: var(--color-secondary); }
@media (max-width: 600px) { .steps__list li { grid-template-columns: 40px minmax(0, 1fr); padding-block: 22px; } }

/* 5 · Credentials */
.creds { padding-top: 40px; }
.creds__aside { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.creds__small { width: min(260px, 70%); aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-full) var(--radius-full) 0 0; }
.creds__small img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 20%; }
.creds__large { margin-top: 48px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-neutral); }
.creds__large img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.creds__list { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.creds__list li { padding: 24px 24px 24px 0; border-bottom: 1px solid var(--color-border); display: grid; gap: 4px; }
.creds__list li:nth-child(even) { padding-left: 24px; border-left: 1px solid var(--color-border); }
.creds__list strong { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-label); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); }
.creds__list span { font-size: var(--fs-small); color: var(--color-secondary); }
@media (max-width: 900px) { .creds__small { display: none; } }
@media (max-width: 560px) {
  .creds__large { aspect-ratio: 4 / 5; }
  .creds__list { grid-template-columns: minmax(0, 1fr); }
  .creds__list li:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* 6 · Experience — the dark band */
.exp { background: var(--color-primary); color: var(--color-on-primary); padding-block: 120px 0; }
.exp__head { padding-bottom: 80px; }
.exp__row { position: relative; overflow: hidden; border-top: 1px solid var(--color-rule-dark); padding-block: 56px; }
.exp__row > .container { position: relative; z-index: 1; }
.exp__bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.6s var(--ease-out), transform 1.2s var(--ease-out);
}
.exp__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.exp__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-primary) 18%, rgba(18, 43, 40, 0.72) 60%, rgba(18, 43, 40, 0.86)); }
.exp__arrow {
  position: absolute; z-index: 1; right: var(--margin); top: 56px;
  width: clamp(48px, 6vw, 96px); height: auto;
  fill: none; stroke: var(--color-on-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: translateX(-24px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.exp__word {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 0.24em) / 0 3px;
  transition: background-size 0.7s var(--ease-out);
  display: inline;
}
@media (hover: hover) {
  .exp__row:hover .exp__bg { opacity: 0.34; transform: none; }
  .exp__row:hover .exp__arrow { opacity: 1; transform: none; }
  .exp__row:hover .exp__word { background-size: 100% 3px; }
}
@media (max-width: 900px) { .exp__arrow { display: none; } }
@media (hover: none) { .exp__bg { display: none; } } /* hover-only photos: skip the download on touch screens */
.exp__meta { display: flex; gap: 20px; align-items: flex-start; }
.exp__num {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  border: 1px solid var(--color-on-primary); font-size: var(--fs-small); font-weight: 600;
}
.exp__years { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-years); line-height: 1.3; color: var(--color-on-primary-muted); }
.exp__roles { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; max-width: 32ch; }
.exp__word {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-word); line-height: 0.95; letter-spacing: -0.04em;
  color: var(--color-on-primary);
  overflow-wrap: anywhere; min-width: 0;
}
.exp__points {
  margin-top: 36px; max-width: 760px;
  columns: 2; column-gap: 40px;
  color: rgba(247, 244, 236, 0.8); font-size: var(--fs-item); line-height: 1.5;
}
.exp__points li { break-inside: avoid; padding-left: 18px; position: relative; margin-bottom: 10px; }
.exp__points li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 9px; height: 1px; background: var(--color-on-primary-muted); }
@media (max-width: 900px) { .exp__row { padding-block: 40px; } }
@media (max-width: 640px) { .exp__points { columns: 1; } .exp { padding-top: 96px; } .exp__head { padding-bottom: 48px; } }

/* 7 · What I bring — slider in the testimonial layout */
.bring { background: var(--color-neutral); }
.bring__aside { display: grid; gap: 48px; align-content: start; }
.bring__photo { width: min(360px, 80%); aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-lg); }
.bring__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1.4s var(--ease-out); }
.js .bring__photo[data-in] { opacity: 1; transform: none; clip-path: inset(18% 22% 18% 22% round 16px); transition: clip-path 1.2s var(--ease-out); }
.js .bring__photo[data-in] img { transform: scale(1.18); }
.js .bring__photo[data-in].is-in { clip-path: inset(0 0 0 0 round 16px); }
.js .bring__photo[data-in].is-in img { transform: none; }
@media (max-width: 900px) { .bring__photo { width: min(320px, 70%); } }
.bring__panel { align-self: center; border-top: 1px solid var(--color-primary); padding-top: 28px; max-width: 640px; justify-self: end; width: 100%; }
.bring__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.bring__tabs button {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: transparent;
  font-size: var(--fs-small); font-weight: 600; color: var(--color-secondary); cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.bring__tabs button[aria-selected="true"] { border-color: var(--color-primary); color: var(--color-primary); }
.bring__tabs button:hover { border-color: var(--color-tertiary); }
.bring__tabs button:focus-visible { border-radius: var(--radius-full); }
.bring__slide p {
  font-family: var(--font-heading); font-weight: 400;
  font-size: var(--fs-sub); line-height: 1.25; letter-spacing: -0.02em; color: var(--color-primary);
}
.bring__slide h3 {
  margin-top: 28px;
  font-family: var(--font-heading); font-size: var(--fs-label); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-tertiary-hover); /* 5.4:1 on sand; base gold is 4.4:1 */
}
.js .bring__slide[hidden] { display: none; }
.bring__slide + .bring__slide { margin-top: 40px; }
.js .bring__slide + .bring__slide { margin-top: 0; }
.bring__slide:not([hidden]) { animation: slide-in 0.6s var(--ease-out); }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .bring__panel { justify-self: stretch; } }

/* 8 · Outro */
.outro { position: relative; min-height: 88vh; display: grid; place-items: center; overflow: hidden; background: var(--color-primary); }
.outro__bg { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; object-position: 50% 22%; opacity: 0.34; filter: saturate(0.7); transform: translateY(var(--py, 0px)); will-change: transform; }
.outro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 43, 40, 0.35), rgba(18, 43, 40, 0.82)); }
.outro__inner { position: relative; z-index: 1; text-align: center; padding-block: 120px; }
.outro__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-outro); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance;
  color: var(--color-on-primary);
}
.outro__actions { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* Footer */
.footer { background: var(--color-primary); color: var(--color-on-primary); padding-block: 88px 32px; border-top: 1px solid var(--color-rule-dark); }
.footer__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
.footer__heading { font-family: var(--font-script); font-size: var(--fs-script-head); line-height: 1; margin-bottom: 28px; }
.footer__contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer__contact dt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--color-on-primary-muted); margin-bottom: 8px; }
.footer__contact dt .card-icon { width: 18px; height: 18px; }
.footer__contact dd { font-size: max(15px, 2rem); overflow-wrap: anywhere; }
.footer__contact a { text-decoration: none; }
.footer__contact a:hover { color: var(--color-on-primary-muted); }
.footer__links { display: grid; gap: 6px; justify-items: start; align-content: start; }
.footer__links a { font-family: var(--font-script); font-size: var(--fs-script-foot); line-height: 1.2; text-decoration: none; }
.footer__links a:hover { color: var(--color-on-primary-muted); }
.footer__mark {
  margin-top: 72px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(64px, 17vw, 300px); line-height: 0.85; letter-spacing: -0.03em;
  color: var(--color-on-primary); white-space: nowrap;
}
.footer__legal {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 32px;
  font-size: var(--fs-small); color: rgba(247, 244, 236, 0.7);
}
@media (max-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__contact { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile + tablet (reference: stacked label → statement, always-visible affordances on touch) */
@media (max-width: 900px) {
  .label { margin-bottom: 4px; }
  .steps__intro { gap: 24px; }
  .bring__aside { gap: 32px; }
  .creds__large { margin-top: 32px; }
}
/* Touch devices can't hover: show the experience-row arrow + underline by default, arrow beside the word */
@media (hover: none), (max-width: 900px) {
  .exp__word { background-size: 100% 2px; }
  .exp__word::after {
    content: ""; display: inline-block; vertical-align: middle;
    width: 0.62em; height: 0.42em; margin-left: 0.22em; margin-top: -0.12em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M2 20h58M42 3l18 17-18 17' fill='none' stroke='%23F7F4EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.85;
  }
  .exp__arrow { display: none; }
}
@media (max-width: 640px) {
  .exp__meta { gap: 14px; }
  .footer__legal { flex-direction: column; gap: 6px; }
  .footer__mark { margin-top: 48px; }
  .outro { min-height: 76vh; }
  .outro__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
}

/* Outline button: ivory pill with a hairline (button-secondary) */
.btn--outline { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-border); }
.btn--outline:hover { background: var(--color-neutral); }
.card-icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.3s var(--ease-out);
}

/* Loader · the banner MIA in miniature: gold outline, forest fill rising, then the panel lifts away */
.loader { display: none; }
.is-loading .loader, .loader.is-done {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-content: center; justify-items: center; gap: 22px;
  background:
    radial-gradient(60% 50% at 18% 78%, rgba(184, 154, 104, 0.22), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, var(--color-neutral), transparent 75%),
    var(--color-surface);
  animation: loader-failsafe 0s linear 6s forwards; /* never strands a visitor if script.js fails */
}
.is-loading { overflow: hidden; }
.loader__mark { display: grid; }
.loader__word {
  grid-area: 1 / 1;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(110px, 24vw, 300px); line-height: 0.82; letter-spacing: -0.02em;
}
.loader__word--outline { color: transparent; -webkit-text-stroke: 1.5px var(--color-tertiary); animation: loader-draw 0.9s var(--ease-out) both; }
.loader__word--fill { color: var(--color-primary); clip-path: inset(100% 0 0 0); animation: loader-fill 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards; }
.loader__line {
  font-family: var(--font-heading); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-primary); text-align: center; padding-inline: 24px;
  animation: loader-rise 0.8s var(--ease-out) 0.9s both;
}
.loader__line .echo { color: var(--color-tertiary); }
.loader__rule { width: 120px; height: 1px; background: var(--color-ornament); transform-origin: left; animation: loader-rule 1.2s var(--ease-out) 0.3s both; }
.loader.is-done { transform: translateY(-100%); transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.1s; }
.loader.is-done > * { opacity: 0; transition: opacity 0.3s ease; }
@keyframes loader-draw { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes loader-fill { to { clip-path: inset(0 0 0 0); } }
@keyframes loader-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes loader-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-failsafe { to { visibility: hidden; } }

/* Digital card trigger · phones and tablets: a pill floating bottom-right */
.card-trigger {
  position: fixed; z-index: 45;
  right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px 0 15px;
  border: 1px solid rgba(247, 244, 236, 0.35); border-radius: var(--radius-full); /* ivory hairline keeps it visible on forest bands */
  background: var(--color-primary); color: var(--color-on-primary);
  font: 600 var(--fs-btn)/1 var(--font-body); letter-spacing: 0.01em; cursor: pointer;
  transition: background-color 0.3s ease, transform 0.45s var(--ease-out), opacity 0.4s ease;
}
.card-trigger:hover { background: var(--color-primary-hover); }
.card-trigger:hover .card-icon { transform: rotate(-6deg) scale(1.06); }
.card-trigger:focus-visible { border-radius: var(--radius-full); }
.card-trigger__extra { display: none; }
.is-loading .card-trigger, html.menu-open .card-trigger, html.card-open .card-trigger { opacity: 0; pointer-events: none; }
/* Desktop: a slim vertical tab on the right edge, inside the page margin */
@media (min-width: 1200px) {
  .card-trigger {
    right: 20px; bottom: auto; top: 54%;
    flex-direction: column; gap: 12px;
    width: 46px; min-height: 0; padding: 16px 0;
    transform: translateY(-50%);
  }
  .card-trigger:hover { transform: translate(-4px, -50%); }
  .card-trigger__label { writing-mode: vertical-rl; transform: rotate(180deg); }
  .card-trigger__extra { display: inline; }
}

/* Back to top · ivory disc with a gold ring that fills as the page is read; stacked above the card pill */
.to-top {
  position: fixed; z-index: 44;
  right: calc(16px + env(safe-area-inset-right)); bottom: calc(76px + env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-primary); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.4s ease, visibility 0s linear 0.4s, transform 0.5s var(--ease-out), background-color 0.3s ease, color 0.3s ease;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top > * { grid-area: 1 / 1; }
.to-top__ring { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke: var(--color-ornament); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progress, 0)); }
.to-top .arrow-icon { width: 16px; height: 16px; }
.to-top:hover { background: var(--color-primary); color: var(--color-on-primary); }
.to-top:hover .arrow-icon { transform: translateY(-3px); }
.to-top:focus-visible { border-radius: var(--radius-full); }
.is-loading .to-top, html.menu-open .to-top, html.card-open .to-top { opacity: 0; visibility: hidden; }
@media (min-width: 1200px) {
  .to-top { right: 20px; bottom: 28px; width: 46px; height: 46px; } /* same column as the card tab */
}

/* Digital card drawer · right-side sheet; bottom sheet on phones */
html.card-open { overflow: hidden; }
.card {
  position: fixed; inset: 0 0 0 auto; margin: 0;
  width: min(460px, 100%); max-width: none; height: 100%; max-height: none;
  padding: 0; border: 0; border-left: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-on-surface);
  opacity: 0; transform: translateX(40px) scale(0.98); transform-origin: 100% 50%;
  transition: opacity 0.42s ease, transform 0.42s var(--ease-out);
}
.card.is-open { opacity: 1; transform: none; }
.card::backdrop { background: rgba(18, 43, 40, 0); transition: background-color 0.42s ease; }
.card.is-open::backdrop { background: rgba(18, 43, 40, 0.38); }
.card__sheet {
  position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 28px; align-content: start;
  padding: 28px 32px calc(32px + env(safe-area-inset-bottom));
}
@media (max-width: 599px) {
  .card {
    inset: auto 0 0 0; width: 100%; height: min(92dvh, 100%);
    border-left: 0; border-top: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(48px); transform-origin: 50% 100%;
  }
  .card__sheet { padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); gap: 24px; }
}
.card__close {
  position: absolute; top: 16px; right: 16px;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-primary); cursor: pointer;
  transition: background-color 0.3s ease;
}
.card__close:hover { background: var(--color-neutral); }
.card__close:hover .card-icon { transform: rotate(90deg); }
.card__close:focus-visible { border-radius: var(--radius-full); }
.card__header { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: end; padding-right: 48px; }
.card__portrait { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-full) var(--radius-full) 0 0; background: var(--color-neutral); }
.card__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 20%; }
.card__name {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-sub); line-height: 1.05; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--color-primary);
}
.card__creds { margin-top: 6px; font-family: var(--font-heading); font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--color-tertiary); }
.card__roles { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--fs-item); color: var(--color-secondary); }
.card__roles li:not(:last-child)::after { content: "·"; padding-inline: 8px; color: var(--color-ornament); } /* trailing dot, so a wrapped line never starts with one */
.card__identity { display: grid; gap: 10px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.card__tagline { font-family: var(--font-heading); font-size: var(--fs-years); line-height: 1.3; letter-spacing: -0.01em; color: var(--color-primary); }
.card__summary { font-size: var(--fs-item); line-height: 1.6; color: var(--color-secondary); }
.card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card__action { min-height: 52px; padding-inline: 16px; gap: 10px; }
.card__action:hover .card-icon { transform: translateY(-2px); }
.card__action.is-done { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.card__details { display: grid; border-top: 1px solid var(--color-border); }
.card__details div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-item); }
.card__details dt { display: flex; align-items: center; gap: 8px; color: var(--color-secondary); }
.card__details dt .card-icon { width: 17px; height: 17px; color: var(--color-tertiary); }
.card__details dd { color: var(--color-primary); text-align: right; overflow-wrap: anywhere; }
.card__details a { text-decoration: none; }
.card__details a:hover { color: var(--color-tertiary); }
.card__block { display: grid; gap: 14px; }
.card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.card__chips li { padding: 8px 14px; border-radius: var(--radius-full); background: var(--color-neutral); color: var(--color-primary); font-size: var(--fs-label); font-weight: 600; line-height: 1.3; }
.card__credentials { border-top: 1px solid var(--color-border); }
.card__credentials li { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-item); color: var(--color-primary); }
.card__credentials li span:last-child { color: var(--color-secondary); text-align: right; }
.card__qr {
  grid-template-columns: 116px minmax(0, 1fr); gap: 20px; align-items: center;
  padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.card__qr img { width: 116px; height: 116px; opacity: 0; transform: scale(0.94); transition: opacity 0.6s ease 0.25s, transform 0.8s var(--ease-out) 0.25s; }
.card.is-open .card__qr img, .card-page .card__qr img { opacity: 1; transform: none; }
.card__qr p { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--color-secondary); }
.card__share { margin-top: 14px; gap: 8px; }
.card__share .card-icon { width: 17px; height: 17px; }
.card__footer { display: grid; gap: 10px; }
.card__toast {
  position: sticky; bottom: 0; justify-self: center;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: var(--radius-xs); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--fs-small);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s var(--ease-out);
}
.card__toast .card-icon { width: 16px; height: 16px; }
.card__toast.is-shown { opacity: 1; transform: none; }
.card__toast:empty { display: none; }
@media (max-width: 380px) { .card__actions { grid-template-columns: minmax(0, 1fr); } }

/* Digital card page (/card): the drawer's sheet on its own, centred on a linen band */
.card-page { background: var(--color-neutral); padding: 48px 16px; }
.card-page .card__sheet {
  width: min(560px, 100%); height: auto; overflow: visible; margin-inline: auto;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.card-page .card__header { padding-right: 0; }
/* Phones: one column in the drawer order (contact and current roles, then expertise, credentials, QR, card, CTAs) */
.card-page .card__col, .card-page .card__group { display: contents; }
.card-page .card__col > .card__block { order: 1; }
.card-page .card__footer, .card-page .card__toast { order: 2; }
/* Tablet and desktop: landscape, like the calling card it is. Every column runs the full height,
   its blocks spread evenly, so no column stops short */
@media (min-width: 768px) {
  .card-page { display: grid; place-items: center; min-height: 100svh; }
  .card-page .card__sheet { width: min(1320px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; padding: 40px; }
  .card-page .card__col, .card-page .card__group { display: grid; gap: 28px; align-content: space-between; min-width: 0; }
  .card-page .card__group { align-content: start; }
  .card-page .card__col > .card__block, .card-page .card__footer { order: 0; }
  .card-page .card__qr { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .card-page .card__qr img { width: 88px; height: 88px; }
  /* Portrait tablets: identity beside credentials, then contact and current roles side by side underneath */
  .card-page .card__col:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; align-content: start; }
  .card-page .card__toast { grid-column: 1 / -1; }
}
/* Desktop and landscape tablets: three columns */
@media (min-width: 1024px) {
  /* uneven widths, so the three columns come out close in height */
  .card-page .card__sheet { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr); gap: 28px 32px; padding: 36px; }
  .card-page .card__col:nth-of-type(2) { grid-column: auto; grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 28px; align-content: space-between; }
  .card-page .card__group { display: contents; } /* middle column spreads its blocks one by one */
}
@media (min-width: 1200px) {
  /* 176rem = 1320px at 1440; grows with the type so columns keep their proportions */
  .card-page .card__sheet { width: min(max(176rem, 1180px), 100%); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr); gap: 28px 48px; padding: 44px 48px; }
  .card-page .card__header { grid-template-columns: 120px minmax(0, 1fr); }
}
@media (min-width: 1600px) {
  .card-page .card__sheet { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.75fr); }
}
@media (max-width: 599px) {
  .card-page { background: var(--color-surface); padding: 0; }
  .card-page .card__sheet { border: 0; border-radius: 0; }
}

/* Business card · 3.5 × 2 in flip card (card/bcard.js), in the Digital Card and at /card/view.
   Type is set in cqw so the card scales as one piece on screen and prints at true size. */
.bcard {
  --flip: 0deg; --tilt-x: 0deg; --tilt-y: 0deg;
  container-type: inline-size; perspective: 1400px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bcard.is-flipped { --flip: 180deg; }
.bcard__inner {
  position: relative; aspect-ratio: 3.5 / 2; transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(calc(var(--flip) + var(--tilt-y)));
  transition: transform 1.1s var(--ease-out);
}
.bcard.is-in { animation: bcard-arrive 1.2s var(--ease-out) backwards; } /* on the wrapper, so it never fights the flip transition */
.pcard__face {
  --fs-card-name: 8.6cqw; --fs-card-creds: 3.1cqw; --fs-card-text: 3.5cqw; --fs-card-tag: 4.2cqw;
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--radius-lg);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pcard__face > :not(.pcard__mono) { position: relative; } /* text paints above the monogram */
.pcard__face--front {
  display: grid; align-content: center; justify-items: start; gap: 5cqw; padding: 0 8cqw;
  background: var(--color-primary); color: var(--color-on-primary);
}
.pcard__mono {
  position: absolute; right: -2cqw; bottom: -7cqw;
  font-family: var(--font-display); font-size: 32cqw; line-height: 0.82; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px var(--color-ornament); opacity: 0.35;
}
.pcard__name { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-card-name); line-height: 1.02; letter-spacing: -0.01em; }
.pcard__creds { margin-top: 2.4cqw; font-family: var(--font-heading); font-size: var(--fs-card-creds); letter-spacing: 0.14em; color: var(--color-on-primary-muted); }
.pcard__rule { width: 12cqw; height: 1px; background: var(--color-ornament); transform-origin: left; }
.pcard__roles { max-width: 76cqw; text-wrap: balance; font-size: var(--fs-card-text); line-height: 1.5; color: var(--color-on-primary); }
.pcard__face--back {
  display: grid; grid-template-columns: minmax(0, 1fr) 24cqw; grid-template-rows: auto 1fr; gap: 4cqw 6cqw; align-items: end;
  padding: 7cqw 8cqw;
  background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-border);
  transform: rotateY(180deg);
}
.pcard__tagline { grid-column: 1 / -1; align-self: start; font-family: var(--font-heading); font-size: var(--fs-card-tag); line-height: 1.3; }
.pcard__contact { display: grid; gap: 1.6cqw; font-size: var(--fs-card-text); line-height: 1.3; }
.pcard__qr { width: 100%; height: auto; }

/* Automatic motion: each side's content arrives whenever that side turns to face the viewer */
.bcard.is-in:not(.is-flipped) .pcard__id,
.bcard.is-in:not(.is-flipped) .pcard__roles,
.bcard.is-flipped .pcard__tagline,
.bcard.is-flipped .pcard__contact > div,
.bcard.is-flipped .pcard__qr { animation: bcard-rise 0.9s var(--ease-out) both; }
.bcard.is-in:not(.is-flipped) .pcard__id { animation-delay: 0.25s; }
.bcard.is-in:not(.is-flipped) .pcard__roles { animation-delay: 0.55s; }
.bcard.is-in:not(.is-flipped) .pcard__rule { animation: bcard-draw 0.9s var(--ease-out) 0.4s both; }
.bcard.is-in:not(.is-flipped) .pcard__mono { animation: bcard-mono 1.6s var(--ease-out) 0.2s both; }
.bcard.is-flipped .pcard__tagline { animation-delay: 0.3s; }
.bcard.is-flipped .pcard__contact > div:nth-child(1) { animation-delay: 0.42s; }
.bcard.is-flipped .pcard__contact > div:nth-child(2) { animation-delay: 0.48s; }
.bcard.is-flipped .pcard__contact > div:nth-child(3) { animation-delay: 0.54s; }
.bcard.is-flipped .pcard__contact > div:nth-child(4) { animation-delay: 0.6s; }
.bcard.is-flipped .pcard__qr { animation: bcard-qr 1s var(--ease-out) 0.5s both; }
@keyframes bcard-arrive { from { opacity: 0; transform: translateY(28px); } }
@keyframes bcard-rise { from { opacity: 0; transform: translateY(3cqw); } }
@keyframes bcard-draw { from { transform: scaleX(0); } }
@keyframes bcard-mono { from { opacity: 0; transform: translateX(6cqw); } }
@keyframes bcard-qr { from { opacity: 0; transform: scale(0.9); } }

/* Business card block inside the Digital Card */
.card__biz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.card__biz-actions .btn { gap: 8px; }
.card__biz-actions .card-icon { width: 17px; height: 17px; }
.card__biz-actions [aria-pressed="true"] .card-icon { transform: rotate(180deg); }

/* Digital Card arrival: blocks fade up one after another each time it opens (60ms stagger, as on the site) */
.card.is-open .card__sheet > :not(.card__toast),
.card-page .card__col > :not(.card__group),
.card-page .card__group > * { animation: card-arrive 0.9s var(--ease-out) calc(0.1s + var(--i, 0) * 60ms) both; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(28px); } }

/* Business card page (/card/view) */
.bcard-page { background: var(--color-neutral); }
.bcard-page__main {
  width: min(720px, 100%); margin-inline: auto; padding: 32px 16px 64px;
  display: grid; justify-items: start; gap: 16px;
}
.bcard-page__back { margin-bottom: 24px; }
.bcard-page__back:hover .arrow-icon { transform: translateX(-3px); }
.bcard-page__intro { max-width: 52ch; color: var(--color-secondary); }
.bcard-page__stage { width: 100%; margin-top: 24px; }
.bcard-page__actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 768px) { .bcard-page__main { padding-top: 64px; } }

@media print {
  @page { margin: 0.5in; }
  .bcard-page { background: none; }
  .bcard-page__main { display: block; width: auto; padding: 0; }
  .bcard-page__main > :not(.bcard-page__stage) { display: none; }
  .bcard-page__stage { margin: 0; }
  .bcard { width: 3.5in; perspective: none; animation: none !important; }
  .bcard__inner { aspect-ratio: auto; display: flex; gap: 0.4in; transform: none !important; transition: none; animation: none !important; }
  .pcard__face { position: relative; inset: auto; flex: none; width: 3.5in; aspect-ratio: 3.5 / 2; border-radius: 0; transform: none; }
  .pcard__face * { animation: none !important; }
}

/* Enquiry form */
.enquire__intro { margin-top: 24px; max-width: var(--measure); color: var(--color-secondary); }
.enquire__form { position: relative; margin-top: 48px; max-width: 880px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.field--full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--color-primary); }
.field input, .field textarea {
  display: block; width: 100%; padding: 12px 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-on-surface);
  font: 400 max(16px, var(--fs-body))/1.5 var(--font-body); letter-spacing: -0.01em;
  transition: border-color 0.3s ease;
}
.field textarea { min-height: 168px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-ornament); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--color-primary); border-radius: var(--radius-md); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field__error { margin-top: 6px; font-size: var(--fs-small); color: var(--color-error); }
.field__error:empty { display: none; }
.enquire__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquire__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.enquire__submit .btn:disabled { opacity: 0.6; cursor: progress; }
.enquire__status { font-size: var(--fs-small); color: var(--color-secondary); max-width: 52ch; }
.enquire__status[data-tone="ok"] { color: var(--color-primary); font-weight: 600; }
.enquire__status[data-tone="error"] { color: var(--color-error); }
@media (max-width: 640px) { .enquire__form { grid-template-columns: minmax(0, 1fr); margin-top: 36px; } }

/* Reduced motion: show every end state, no scroll choreography */
@media (prefers-reduced-motion: reduce) {
  .intro { height: auto; }
  .intro__stage { position: relative; height: auto; min-height: 100svh; padding-block: calc(var(--nav-h) + 40px) 120px; display: grid; gap: 48px; }
  .intro__lead { position: static; opacity: 1; transform: none; }
  .intro__photo, .intro__word--outline, .intro__mist { display: none; }
  .intro__word--fill, .intro__sub, .intro__roles { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
  .intro__roles { position: static; }
  .js [data-reveal] .w { opacity: 1 !important; }
  .js .arrow { --a: 1 !important; }
  .js [data-in] { opacity: 1; transform: none; clip-path: none; }
  [data-zoom] img, .outro__bg { transform: none !important; }
  .loader__word--fill { clip-path: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}