/* ============================================================
   ALLAVO — Luxury Web Design Studio
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('../fonts/cormorant-garamond.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }

/* ---------- Tokens ----------
   Palette: charcoal black ground with stony, sand-and-ochre accents. The
   nav's hover glow keeps the warm cream of the hero photograph's backlight. */
:root {
  --bg: #121110;
  --bg-2: #1C1A18;
  --bg-soft: #171514;
  --ivory: #F1EADB;
  --muted: rgba(241, 234, 219, 0.62);
  --faint: rgba(241, 234, 219, 0.35);
  --line: rgba(241, 234, 219, 0.13);
  --champagne: #C7A67C;
  --champagne-dim: rgba(199, 166, 124, 0.55);
  --backlight: 246, 228, 206;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-h: 5rem;
  color-scheme: dark;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.menu-open { overflow: hidden; }

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

[hidden] { display: none !important; }

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

:focus-visible {
  outline: 1px solid var(--champagne);
  outline-offset: 4px;
  border-radius: 1px;
}

::selection { background: var(--champagne); color: var(--bg); }

.container {
  width: min(100% - 2 * var(--gutter), 82.5rem);
  margin-inline: auto;
}

.container--narrow { width: min(100% - 2 * var(--gutter), 52rem); }

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

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: 0.005em; }

/* Cormorant runs light at small sizes — anchor sub-headings at regular weight */
h3 { font-weight: 400; }

h2 {
  font-size: clamp(2.1rem, 5vw, 4.25rem);
  line-height: 1.08;
  max-width: 18ch;
}

.label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 1.5rem;
}

.section-head { margin-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.section-head--center { text-align: center; }
.section-head--center h2 { margin-inline: auto; }
.section-head__note { color: var(--muted); margin-top: 1.5rem; }

/* ---------- Reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(2.25rem);
  transition:
    opacity 1.1s var(--ease) var(--d, 0s),
    transform 1.1s var(--ease) var(--d, 0s);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* split headline: words are masks, chars rise inside them */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-split] .c {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
[data-split].is-in .c { transform: translateY(0); }

/* parallax figures */
[data-parallax] { will-change: transform; }

/* media clip reveal */
[data-reveal-group] figure,
figure[data-reveal-group],
.why__media {
  overflow: hidden;
}

[data-reveal-group] img {
  transform: scale(1.14);
  transition: transform 1.6s var(--ease);
}

[data-reveal-group].is-in img { transform: scale(1.02); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.2rem 2.6rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ivory);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
  will-change: transform;
}

.btn span { position: relative; z-index: 1; transition: color 0.5s var(--ease); }

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ivory);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover { border-color: var(--ivory); }
.btn:hover::before { transform: translateY(0); }
.btn:hover span { color: var(--bg); }

.btn--solid { border-color: rgba(242, 239, 233, 0.28); }

/* ---------- Navigation ----------
   The nav belongs to the hero alone: debossed into the concrete, no bar, no
   scrim. It is absolutely positioned, so it scrolls away with the photograph
   and the rest of the page carries no header at all. */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

/* The hero render holds its nav at a 4%-of-viewport margin on both sides —
   wider than the page container on large screens. The nav follows the render,
   not the container, so the links always sit on the dark wall right of the
   lit slot (which ends at ~59% of the frame). */
.nav__inner {
  position: relative;
  width: calc(100% - 2 * max(1.25rem, 4vw));
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The lockup is set as live type, carved into the wall with the same dark
   ink and hairline of light as the links — an outlined emblem holding a
   serif A, then the wordmark. Sized to the render's own lockup. */
.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.6vw, 3.25rem);
  line-height: 1;
  color: rgba(26, 17, 14, 0.96);
  text-shadow: 0 1px 1px rgba(var(--backlight), 0.16);
}

.nav__emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.12em;
  height: 1.24em;
  border: 0.045em solid currentColor;
  font-weight: 400;
  padding-bottom: 0.06em;
}

.nav__wordmark {
  font-weight: 500;
  letter-spacing: 0.015em;
}

/* the menu overlay is dark, so the carved lockup must lift while it is open */
body.menu-open .nav__logo { color: var(--ivory); text-shadow: none; }

/* Pages without the hero (legal) carry `is-scrolled` statically in their
   markup: the same nav set light against the charcoal ground. It is still
   absolute, so it scrolls away like everywhere else. */
.nav.is-scrolled .nav__logo { color: var(--ivory); text-shadow: none; }
.nav.is-scrolled .nav__links a { color: var(--muted); text-shadow: none; }

/* ---------- Overlay nav (home) ----------
   The hero photograph ships with the lockup and nav carved into its pixels,
   so at rest the page IS the render. The real links are invisible plates
   that JS registers precisely over the carved words (image-space boxes
   mapped through the object-fit: cover transform); on hover the plate's own
   type ignites over the carving with the backlight glow. */
.nav--overlay .nav__inner {
  position: static;
  width: auto;
  height: auto;
  display: block;
}

.nav--overlay .nav__links { display: block; }

.nav--overlay .nav__logo,
.nav--overlay .nav__links a {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0;
  color: transparent;
  text-shadow: none;
}

/* The lockup's two parts are their own plates, registered by JS over the
   carved emblem and wordmark. Invisible at rest (the carving in the
   photograph does the talking), they ignite together on hover. */
.nav--overlay .nav__emblem,
.nav--overlay .nav__wordmark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.4s var(--ease), text-shadow 0.5s var(--ease),
              border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}

.nav--overlay .nav__wordmark { border: 0; }

.nav--overlay .nav__logo:hover,
.nav--overlay .nav__logo:focus-visible {
  color: #FAF0E2;
  text-shadow:
    0 0 6px rgba(var(--backlight), 0.85),
    0 0 18px rgba(var(--backlight), 0.50),
    0 0 42px rgba(232, 200, 165, 0.30);
}

/* text-shadow cannot light a border — the emblem's square takes its glow
   from box-shadow instead, inside and out, like light bleeding from a seam */
.nav--overlay .nav__logo:hover .nav__emblem,
.nav--overlay .nav__logo:focus-visible .nav__emblem {
  box-shadow:
    0 0 6px rgba(var(--backlight), 0.55),
    0 0 18px rgba(var(--backlight), 0.30),
    inset 0 0 8px rgba(var(--backlight), 0.35);
}

/* no underline over the photograph — the render has none */
.nav--overlay .nav__links a::after { display: none; }

.nav--overlay .nav__links a:hover,
.nav--overlay .nav__links a:focus-visible {
  color: #FAF0E2;
  text-shadow:
    0 0 6px rgba(var(--backlight), 0.85),
    0 0 18px rgba(var(--backlight), 0.50),
    0 0 42px rgba(232, 200, 165, 0.30);
}

.nav__links { display: flex; gap: clamp(1.5rem, 1.95vw, 3rem); }

/* Type metrics measured off the hero render itself: font 1.35% of frame
   width, word gaps 1.95%, tracking 0.13em — the block then starts at ~64%
   of the viewport, clear of the lit slot at every desktop width. */
.nav__links a {
  font-size: clamp(0.9375rem, 1.35vw, 2.25rem);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(26, 17, 14, 0.96);
  position: relative;
  padding: 0.25rem 0;
  text-shadow: 0 1px 1px rgba(var(--backlight), 0.16);
  transition: color 0.4s var(--ease), text-shadow 0.5s var(--ease);
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

/* On hover the link glows as if lit from behind by the slot in the hero —
   the glow is text-shadow only, so nothing but the letters takes the light. */
.nav__links a:hover,
.nav__links a:focus-visible {
  color: #FAF0E2;
  text-shadow:
    0 0 6px rgba(var(--backlight), 0.85),
    0 0 18px rgba(var(--backlight), 0.50),
    0 0 42px rgba(232, 200, 165, 0.30);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 26px; height: 1px;
  margin-inline: auto;
  background: rgba(30, 21, 17, 0.92);
  transition: transform 0.45s var(--ease), opacity 0.3s, background-color 0.4s var(--ease);
}

body.menu-open .nav__toggle span { background: var(--ivory); }

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

/* full-screen menu (mobile) */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}

.menu.is-open { opacity: 1; pointer-events: auto; }

.menu__links { display: flex; flex-direction: column; gap: 0.5rem; }

.menu__links a {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 300;
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  transform: translateY(1.5rem);
  opacity: 0;
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease);
}

.menu.is-open .menu__links a { transform: none; opacity: 1; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.06s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.12s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.18s; }

.menu__links em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  color: var(--champagne);
}

.menu__foot {
  position: absolute;
  bottom: calc(2rem + env(safe-area-inset-bottom));
  left: var(--gutter);
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
}

/* ---------- Hero ----------
   A single photograph carries the hero: the concrete monolith with its lit
   slot and seated figure. The image holds the frame alone — the headline
   lives on for search and screen readers as visually-hidden text. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--hero-scale, 1));
  transform-origin: center;
  will-change: transform;
}

/* Dry-ice fog pouring from the slot's mouth across the floor, painted by
   initHeroMist(). Sits under the fade so it dissolves into the page with
   the photo. */
.hero__mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Carry the photograph into the page background so the hero's lower edge
   never reads as a seam. */
.hero__fade {
  position: absolute;
  inset: auto 0 0;
  height: 24vh;
  background: linear-gradient(
    to bottom,
    rgba(18, 17, 16, 0) 0%,
    rgba(18, 17, 16, 0.14) 32%,
    rgba(18, 17, 16, 0.58) 64%,
    var(--bg) 100%);
}

/* ---------- Section flow ----------
   Alternate sections breathe between --bg and a slightly warmer mid-tone.
   Every gradient starts and ends on --bg, so no boundary ever shows a seam
   and the page reads as one continuous surface. */
.manifesto,
.process {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg) 100%);
}

/* ---------- Manifesto ---------- */
.manifesto { padding: clamp(8rem, 18vw, 15rem) 0; }

.manifesto__text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.42;
  letter-spacing: 0.005em;
}

.manifesto__text .mw { opacity: 0.16; transition: opacity 0.35s linear; }
.manifesto__text .mw.is-lit { opacity: 1; }

/* ---------- Work ----------
   One project to a screen. The frame is inset from the page by a hairline of
   charcoal, the artwork is cropped to fill it, and the work holds the viewport
   on its own — the way the studio would show it to you, one at a time. */
.work { padding-bottom: clamp(3rem, 6vw, 5rem); }

.stage {
  --inset: clamp(0.5rem, 1vw, 0.875rem);
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: clamp(1.5rem, 4vh, 3rem);
}

.stage__frame {
  position: relative;
  display: block;
  width: 100%;
  height: min(84svh, 52rem);
  margin-inline: var(--inset);
  overflow: clip;
  background: var(--bg-2);
}

.stage__frame figure {
  height: 100%;
  /* the slow push in as the frame arrives — `scale` is free, the parallax
     owns `transform` on the image itself */
  scale: 1.07;
  transition: scale 1.8s var(--ease);
}

.stage__frame.is-in figure { scale: 1; }
.stage__frame:hover figure { scale: 1.02; }

.stage__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  scale: var(--zoom, 1);
}

/* Ground for the caption. Aureline's plate is near white where the name sits,
   so the foot is weighted hard and a wash is drawn in from the left as well —
   ivory type has to hold over any artwork, not only the dark ones. */
.stage__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(18, 17, 16, 0.96) 0%,
      rgba(18, 17, 16, 0.82) 22%,
      rgba(18, 17, 16, 0.3) 48%,
      rgba(18, 17, 16, 0) 68%),
    linear-gradient(
      to right,
      rgba(18, 17, 16, 0.7) 0%,
      rgba(18, 17, 16, 0) 55%);
}

.stage__caption {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 3.5vw, 3.5rem);
  right: clamp(1.5rem, 3.5vw, 3.5rem);
  bottom: clamp(1.75rem, 3.5vw, 3.25rem);
}

.stage__index {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--champagne);
  margin-bottom: 0.9rem;
}

.stage__name {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  line-height: 1.05;
}

.stage__tags {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.stage__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ivory);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.5s var(--ease);
}

.stage__cta em {
  font-style: normal;
  color: var(--champagne);
  transition: transform 0.5s var(--ease);
}

.stage__frame:hover .stage__cta { border-color: var(--champagne-dim); }
.stage__frame:hover .stage__cta em { transform: translateX(0.35rem); }

/* Two artifacts from the same identity follow each stage in an offset
   editorial pair: the wide shot leads and spans both rows, the caption
   holds the whitespace at the top of the narrow column, and the portrait
   hangs below it — deliberately deeper than its neighbour. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(3rem, 7vw, 6rem);
}

.duo figure {
  overflow: clip;
  background: var(--bg-2);
}

.duo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo__a {
  grid-row: 1 / 3;
  aspect-ratio: 3 / 2;
}

.duo__note {
  align-self: start;
  padding-block: 0.35rem clamp(1.25rem, 2.5vw, 2rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.duo__b { aspect-ratio: 4 / 5; }

@media (max-width: 700px) {
  .duo {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
  }
  .duo__a { grid-row: auto; }
  .duo__note { padding-block: 0.5rem 0.25rem; }
  .duo__b {
    width: 78%;
    justify-self: end;
  }
}

/* ---------- Process ---------- */
.process {
  padding: clamp(6rem, 12vw, 10rem) 0;
  border-top: 1px solid var(--line);
}

.process__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.process__step {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  position: relative;
}

.process__step::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 2.5rem; height: 1px;
  background: var(--champagne);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) calc(var(--d, 0s) + 0.3s);
}

.process__step.is-in::before { transform: scaleX(1); }

.process__num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--champagne);
  margin-bottom: 2.75rem;
}

.process__step h3 {
  font-size: 1.6rem;
  margin-bottom: 0.9rem;
}

.process__step p {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---------- Services ----------
   The chamber below is pulled up beneath this section, so the list carries the
   page ground on its own back (hiding the photograph's top edge) and trails a
   veil that dissolves downward. Scrolling lifts the veil away and the chamber
   swells up through it — the two sections share one surface, never an edge. */
.services {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--line);
}

.services::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 46vh;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    rgba(18, 17, 16, 0.88) 28%,
    rgba(18, 17, 16, 0.48) 58%,
    rgba(18, 17, 16, 0) 100%);
}

.services__list { list-style: none; }

.service { border-top: 1px solid var(--line); }
.service:last-child { border-bottom: 1px solid var(--line); }

.service a {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0.25rem;
  transition: padding-left 0.6s var(--ease);
}

.service a:hover { padding-left: 1.25rem; }

.service h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  transition: color 0.4s var(--ease);
}

.service p {
  color: var(--muted);
  font-size: 0.9375rem;
}

.service__arrow {
  font-family: var(--sans);
  font-size: 1.25rem;
  color: var(--champagne);
  opacity: 0;
  transform: translateX(-0.75rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.service a:hover .service__arrow { opacity: 1; transform: none; }

/* ---------- Why ----------
   A pinned, full-viewport chapter: the chamber after hours. The great light
   is off — only a warm ember traces the slot's inner edges, and the bench
   sits empty. The section is a tall scroll runway; while the frame holds,
   the manifesto assembles itself inside the dark slot, letters gathering
   where the light used to be. */
.why {
  position: relative;
  /* the runway is the writing's pace: fewer words, less scroll to hold you */
  height: 170vh;
  /* rides up under the services list, which hides its top edge */
  margin-top: -22vh;
}

.why__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* carry the photograph into the page ground at both edges — no seams */
.why__pin::before,
.why__pin::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 18vh;
  pointer-events: none;
}

.why__pin::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg), rgba(18, 17, 16, 0));
}

/* deeper fade at the foot: the frame dissolves into the page well before
   the next section arrives, so the unpin never shows an edge */
.why__pin::after {
  bottom: 0;
  height: 28vh;
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    rgba(18, 17, 16, 0.55) 45%,
    rgba(18, 17, 16, 0) 100%);
}

.why__label {
  position: absolute;
  top: clamp(2.5rem, 8vh, 5rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  /* sits over the lit slot, under the top fade: dark ink reads on both */
  color: rgba(52, 41, 33, 0.85);
}

/* The copy writes itself onto the lit slot — the photograph is the light,
   and the words settle into it like ink on stone. The column is narrow
   enough to stay inside the slot's width at every desktop size. */
.why__write {
  position: relative;
  width: min(15rem, 62vw);
  transform: translateY(-7vh);
  text-align: center;
  font-size: clamp(0.875rem, 1.05vw, 1.0625rem);
  line-height: 1.9;
  letter-spacing: 0.01em;
}

.why__write .ww { display: inline-block; white-space: nowrap; }

/* In flight a glyph is a soft umber shade; as it settles onto the lit stone
   it deepens to espresso, with a hairline of caught light beneath it. */
.why__write .wc {
  display: inline-block;
  opacity: 0;
  color: rgba(74, 58, 46, 0.7);
  transition: color 0.5s var(--ease), text-shadow 0.5s var(--ease);
  will-change: transform, opacity;
}

.why__write .wc.is-set {
  color: #33281F;
  text-shadow: 0 1px 0 rgba(250, 240, 224, 0.3);
}

/* ---------- CTA ----------
   No border above: the why chapter's frame fades to the page ground, and
   the silk rises out of the same ground — one continuous surface. */
.cta {
  position: relative;
  padding: clamp(8rem, 16vw, 13rem) 0;
  overflow: clip;
}

.cta__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url('../img/cta-silk.jpg');
  background-size: 100% 100%;
  opacity: 0.42;
  /* The silk was shot cool; pull it into the earthen palette. */
  filter: sepia(0.38) saturate(0.72) hue-rotate(-6deg) blur(14px);
}

/* ---------- Frosted slab ----------
   Hovering the button raises a pane of warm frosted glass behind the
   headline: the silk beneath it blurs and brightens to champagne, a faint
   rib texture catches the light, and one sheen slides across as it lands.
   Every edge feathers to nothing, so the pane never shows a boundary
   against the sections around it. */
/* Chromium does not fade backdrop-filter through an opacity transition (it
   pops in at full strength), so the pane animates the filter itself and the
   tint/sheen/rib layers fade on their own opacity. */
.cta__glass {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(68rem, 96vw);
  height: min(32rem, 78vh);
  transform: translate(-50%, -55%) scale(0.96);
  pointer-events: none;
  overflow: hidden;
  -webkit-backdrop-filter: blur(0px) brightness(1) saturate(1);
  backdrop-filter: blur(0px) brightness(1) saturate(1);
  --glass-ease: cubic-bezier(0.45, 0, 0.18, 1);
  transition:
    -webkit-backdrop-filter 1.4s var(--glass-ease),
    backdrop-filter 1.4s var(--glass-ease),
    transform 1.6s var(--glass-ease);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 28%, transparent 94%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 28%, transparent 94%);
}

/* One pass of caught light, driven by the hover transition — no loop. */
.cta__glass::before {
  content: '';
  position: absolute;
  inset: -25%;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(var(--backlight), 0.12) 50%,
    transparent 58%);
  transform: translateX(-45%);
  transition: opacity 1.4s var(--glass-ease), transform 2s var(--glass-ease);
}

/* Champagne tint and faint wide-pitch ribs — a suggestion of glazing. */
.cta__glass::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(var(--backlight), 0.05) 0 1px,
      transparent 1px 14px),
    radial-gradient(
      closest-side,
      rgba(var(--backlight), 0.16),
      rgba(var(--backlight), 0.05) 55%,
      transparent 80%);
  transition: opacity 1.4s var(--glass-ease);
}

.cta:has(.btn:hover) .cta__glass,
.cta:has(.btn:focus-visible) .cta__glass {
  -webkit-backdrop-filter: blur(18px) brightness(2) saturate(1.15);
  backdrop-filter: blur(18px) brightness(2) saturate(1.15);
  transform: translate(-50%, -55%) scale(1);
}

.cta:has(.btn:hover) .cta__glass::before,
.cta:has(.btn:focus-visible) .cta__glass::before {
  opacity: 1;
  transform: translateX(45%);
}

.cta:has(.btn:hover) .cta__glass::after,
.cta:has(.btn:focus-visible) .cta__glass::after {
  opacity: 1;
}

/* Sits above the columns, below the words: the top and bottom fade into the
   page, and a soft pool of charcoal keeps the headline off the lit silk. */
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 40rem 18rem at 50% 46%, rgba(18, 17, 16, 0.62), rgba(18, 17, 16, 0) 70%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 35%, transparent 70%, var(--bg) 100%);
}

.cta__inner {
  /* the words stay crisp on top of the frosted pane */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3rem;
}

.cta h2 { max-width: 15ch; }

/* ---------- Enquiry ---------- */
.enquiry {
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(7rem, 13vw, 11rem);
}

.form { display: flex; flex-direction: column; gap: 2.5rem; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

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

.field label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.9rem;
}

.field__opt {
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--faint);
  opacity: 0.7;
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ivory);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.65rem 0 0.9rem;
  transition: border-color 0.5s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.field textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--champagne);
}

.field__select { position: relative; }

.field__select::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.field__select select { width: 100%; cursor: pointer; }
.field__select select:invalid { color: var(--faint); }
.field__select option { color: var(--ivory); background: var(--bg-2); }

.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-bottom-color: rgba(196, 108, 94, 0.65); }

.form__actions { margin-top: 0.5rem; }

.form__notice {
  font-size: 0.9375rem;
  color: var(--champagne);
  border: 1px solid var(--line);
  padding: 1.1rem 1.4rem;
}

.form__notice a { text-decoration: underline; text-underline-offset: 3px; }

/* confirmation */
.confirm {
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 0;
  animation: confirm-in 1.1s var(--ease) both;
}

@keyframes confirm-in {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: none; }
}

.confirm__rule {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--champagne);
  margin: 0 auto 2.5rem;
}

.confirm h3 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin-bottom: 1.5rem;
}

.confirm p { color: var(--muted); max-width: 30rem; margin-inline: auto; }

.confirm__mail { margin-top: 2rem; }

.confirm__mail a {
  color: var(--champagne);
  border-bottom: 1px solid var(--champagne-dim);
  padding-bottom: 2px;
  transition: color 0.4s, border-color 0.4s;
}

.confirm__mail a:hover { color: var(--ivory); border-color: var(--ivory); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}

.footer__logo img { height: 1.6rem; width: auto; opacity: 0.9; }

.footer__nav { display: flex; gap: 2rem; }

.footer__nav a {
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease), text-shadow 0.5s var(--ease);
}

/* The footer repeats the four nav links, so it takes the same backlight. */
.footer__nav a:hover {
  color: #FAF0E2;
  text-shadow:
    0 0 6px rgba(var(--backlight), 0.85),
    0 0 18px rgba(var(--backlight), 0.50),
    0 0 42px rgba(232, 200, 165, 0.30);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  font-size: 0.8125rem;
  color: var(--faint);
}

.footer__bottom a { color: var(--muted); transition: color 0.4s; }
.footer__bottom a:hover { color: var(--ivory); }

.footer__legal { display: flex; gap: 1.75rem; }

/* ---------- Legal pages ---------- */
.legal {
  padding: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(5rem, 10vw, 8rem);
}

.legal h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 3rem; }
.legal h2 { font-size: 1.5rem; margin: 2.75rem 0 1rem; max-width: none; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.25rem; margin-top: 0.75rem; }
.legal p + p { margin-top: 1rem; }
.legal .legal__updated { font-size: 0.875rem; color: var(--faint); margin-bottom: 3rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav__links,
  .nav--overlay .nav__links { display: none; }
  .nav__toggle { display: flex; }

  /* the crops are framed for a wide screen; a phone needs its own */
  .stage {
    min-height: auto;
    padding-block: clamp(0.75rem, 2vh, 1.5rem);
  }

  .stage__frame { height: min(72svh, 34rem); }

  .stage:nth-of-type(1) {
    --zoom: 1.85;
    --pos: center 30%;
  }

  .stage:nth-of-type(2),
  .stage:nth-of-type(3) {
    --zoom: 1.3;
    --pos: center;
  }

  .process__list { grid-template-columns: 1fr 1fr; }

  .service a { grid-template-columns: 1fr auto; }
  .service p { grid-column: 1 / -1; margin-top: -0.5rem; }

  .form__row { grid-template-columns: 1fr; }

  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .process__list { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-split] .c,
  [data-reveal-group] img,
  .menu__links a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__img { transform: none !important; }
  .manifesto__text .mw { opacity: 1; }
  .why { height: auto; }

  .why__pin { position: relative; }
  .why__write .wc {
    opacity: 1 !important;
    transform: none !important;
    color: #33281F;
  }
  .confirm { animation: none; }

  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}