/* ==========================================================================
   MERIDIAN STUDIO — site.css
   Navigation · Scroll video hero · Sections · Footer
   ========================================================================== */

/* ====================================================== NAVIGATION ======= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: var(--on-ink);
  transition:
    background-color 0.7s var(--ease-out),
    color 0.7s var(--ease-out),
    backdrop-filter 0.7s var(--ease-out),
    border-color 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.15rem, 1.8vw, 1.9rem) var(--gutter);
}

/* Scrolled state: subtle wash + blur, never a heavy bar. */
.nav.is-solid {
  background: color-mix(in srgb, var(--bone) 82%, transparent);
  backdrop-filter: saturate(120%) blur(14px);
  -webkit-backdrop-filter: saturate(120%) blur(14px);
  color: var(--ink);
  border-bottom-color: var(--rule-dark);
}

/* Hides the bar when scrolling down mid-page; returns on scroll up. */
.nav.is-hidden { transform: translateY(-102%); }

.nav__logo {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin-right: auto;
}

.nav__logo-mark {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav__logo-sub {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.62;
}

.nav__links {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.75rem);
}

.nav__links a {
  position: relative;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding-block: 0.35rem;
  opacity: 0.82;
  transition: opacity 0.4s var(--ease-out);
}

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

.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav__toggle-bars { display: grid; gap: 5px; width: 20px; }
.nav__toggle-bars i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out), opacity 0.35s;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(3px) rotate(11deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child  { transform: translateY(-3px) rotate(-11deg); }

/* ---------------------------------------------------- language switch -- */
/* One word in the bar, the rest behind it. A <details>, so the toggle is the
   browser's own and it works with scripting off; script only adds Escape and
   outside-click, which <details> has no opinion about.

   No flags anywhere: a flag is a country, and Deutsch is not one country any
   more than Türkçe is only Turkey. */
.lang {
  position: relative;
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
  border-left: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.lang__current {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.4s var(--ease-out);
  /* The default triangle is replaced by the chevron below, and Safari needs
     the -webkit- form to drop it as well. */
  list-style: none;
}
.lang__current::-webkit-details-marker { display: none; }

.lang__current:hover,
.lang[open] .lang__current { opacity: 1; }

/* Drawn rather than typed, so it inherits the text colour on both the dark
   and the washed bar without a second rule. */
.lang__chev {
  width: 0.5em;
  height: 0.5em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.35s var(--ease-out);
}

.lang[open] .lang__chev { transform: translateY(0.1em) rotate(-135deg); }

/* Say the hiding out loud rather than leaving it to the engine. Chromium
   hides a closed <details>’s content by a route that an author `display`
   does not override, so the grid below is harmless there — but Firefox’s UA
   sheet uses display:none, which `display: grid` WOULD beat, leaving the
   panel permanently open. This one line removes the difference. */
.lang:not([open]) .lang__panel { display: none; }

/* Absolute, so opening it moves nothing in the bar. */
.lang__panel {
  position: absolute;
  top: calc(100% + 0.85rem);
  right: 0;
  z-index: 10;
  display: grid;
  gap: 0.15rem;
  min-width: 100%;
  padding: 0.5rem 0.25rem;
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--rule-light);
  box-shadow: 0 18px 40px -22px rgba(12, 10, 9, 0.75);
}

.lang__panel a {
  display: block;
  padding: 0.5rem 0.9rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.72;
  transition: opacity 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.lang__panel a:hover,
.lang__panel a:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--on-ink) 9%, transparent);
}

/* In the overlay it sits at the very bottom of the screen, so the panel has
   to open upward or it would fall off it. */
.lang--menu { width: 100%; }
.lang--menu .lang { border-left: 0; padding-left: 0; }
.lang--menu .lang__current { font-size: 0.75rem; letter-spacing: 0.18em; }
.lang--menu .lang__panel {
  top: auto;
  bottom: calc(100% + 0.85rem);
  left: 0;
  right: auto;
}

/* ------------------------------------------------------ mobile overlay -- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(7rem, 18vh, 11rem) var(--gutter) clamp(2rem, 6vh, 3.5rem);
  background: var(--ink);
  color: var(--on-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), visibility 0.6s;
}

.menu.is-open { opacity: 1; visibility: visible; transform: none; }

.menu__links { display: grid; align-content: start; gap: 0.35rem; }

.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 12vw, 4.5rem);
  line-height: 1.18;
  border-bottom: 1px solid var(--rule-light);
  padding-block: 0.35em 0.2em;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}

.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: 0.09s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.15s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.21s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.27s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.33s; }

.menu__links span {
  font-family: var(--ff-sans);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  opacity: 0.58;
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--on-ink-mute);
}

/* ================================================ 01 · SCROLL VIDEO HERO = */
.hero {
  /* Must match scrollHeightDesktop in site-config.js — the component writes
     the same value inline once it boots, and a mismatch jumps the document
     height the moment it does. */
  --hero-scroll: 360vh;
  position: relative;
  height: var(--hero-scroll);
  background: var(--ink);
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;

  overflow: hidden;
  background: var(--ink);
  /* Values below are driven by ScrollFrameHero via style properties. */
  --p: 0;        /* scroll progress 0 → 1        */
  --text-o: 1;   /* hero copy opacity            */
  --text-y: 0px; /* hero copy translate          */
  --text-s: 1;   /* hero copy scale              */
  --vis-s: 1.06; /* visual scale (slow push-in)  */
}

.hero__visual {
  position: absolute;
  inset: 0;
  transform: scale(var(--vis-s));
  transform-origin: 50% 46%;
  will-change: transform;
}

.hero__visual > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown until the canvas holds its first frame. The component paints the
   poster over this from SITE_CONFIG.hero.poster; the gradient underneath is
   what stands in if that image is ever missing, so the hero is never a black
   rectangle on any path. */
.hero__placeholder {
  background:
    radial-gradient(120% 90% at 62% 34%, rgba(176, 141, 87, 0.30), transparent 62%),
    radial-gradient(90% 70% at 20% 88%, rgba(199, 183, 162, 0.14), transparent 70%),
    linear-gradient(180deg, #221D19 0%, #14110F 72%);
  background-size: cover;
  background-position: 50% 50%;
  transition: opacity 0.6s var(--ease-soft);
}

.hero.is-painted .hero__placeholder { opacity: 0; }

/* Deliberately NO transition. The canvas is revealed only once it already
   holds a frame, and that frame is the same picture the poster underneath is
   showing — so the handover has to be instant. Cross-fading instead leaves
   both layers half transparent over the dark ground, which reads as the
   picture dipping darker and coming back. */
.hero__canvas { opacity: 0; }
.hero.is-canvas .hero__canvas { opacity: 1; }

/* Legibility scrim — subtle, weighted to the bottom-left where the copy sits. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(12, 10, 9, 0.78) 0%, rgba(12, 10, 9, 0.34) 34%, rgba(12, 10, 9, 0) 62%),
    linear-gradient(to right, rgba(12, 10, 9, 0.46) 0%, rgba(12, 10, 9, 0) 52%),
    linear-gradient(to bottom, rgba(12, 10, 9, 0.42) 0%, rgba(12, 10, 9, 0) 26%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.13;
  mix-blend-mode: overlay;
}

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(5.5rem, 13vh, 10rem);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: var(--on-ink);
  opacity: var(--text-o);
  transform: translate3d(0, var(--text-y), 0) scale(var(--text-s));
  transform-origin: 0 100%;
  will-change: opacity, transform;
}

.hero__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, 0.72);
  margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.hero__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: -0.028em;
  max-width: 16ch;
}

.hero__title em { font-style: italic; color: #E8CFA6; }

.hero__sub {
  margin-top: clamp(1.5rem, 3.4vh, 2.5rem);
  max-width: 42ch;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: rgba(242, 237, 230, 0.8);
}

.hero__actions {
  margin-top: clamp(2rem, 4.4vh, 3.25rem);
}
.hero__actions > span { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Entrance stagger for the hero copy. */
.hero__eyebrow           { --d: 0; }
.hero__title .line:first-child { --d: 1; }
.hero__title .line:last-child  { --d: 2; }
.hero__sub               { --d: 3.2; }
.hero__actions           { --d: 4.4; }

/* Scroll affordance + live progress rail */
.hero__meta {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 5vh, 3.25rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(242, 237, 230, 0.62);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: var(--text-o);
  transition: opacity 0.4s linear;
}

.hero__meta-rail {
  position: relative;
  display: block;
  width: clamp(4rem, 9vw, 8rem);
  height: 1px;
  background: rgba(242, 237, 230, 0.22);
}

.hero__meta-rail i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  background: var(--gold);
  transform: scaleX(var(--p));
  transform-origin: left;
}

/* Reduced motion: the hero collapses to a single static screen. */
.hero.is-static { height: 100svh; }
.hero.is-static .hero__visual { transform: none; }
.hero.is-static .hero__content { opacity: 1; transform: none; }
.hero.is-static .hero__meta { display: none; }

/* ==================================================== 02 · POSITIONING == */
.positioning__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  grid-template-columns: 1fr;
}

.positioning__head {
  font-size: var(--fs-h2);
  max-width: 14ch;
}

.positioning__body { display: grid; gap: 1.75rem; max-width: 46ch; }
.positioning__body p:not(.lead) { color: var(--on-bone-mute); }

.positioning__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-dark);
}

.positioning__facts li { display: grid; gap: 0.35rem; }
.positioning__facts strong {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1;
}
.positioning__facts span {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-bone-mute);
}

@media (min-width: 62rem) {
  .positioning__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    grid-template-areas:
      "eyebrow ."
      "head    body";
    align-items: start;
  }
  .positioning__grid > .eyebrow { grid-area: eyebrow; }
  .positioning__head { grid-area: head; }
  .positioning__body { grid-area: body; padding-top: 0.9rem; }
}

/* ======================================================= 03 · SERVICES == */
.svc { border-top: 1px solid var(--rule-light); }

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--rule-light);
  transition: color 0.6s var(--ease-out);
}

/* Hover wash instead of a card. */
.svc__row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.5);
  background: rgba(242, 237, 230, 0.045);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.svc__row:hover::before { opacity: 1; }

.svc__num {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--on-ink-mute);
}

.svc__name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: transform 0.7s var(--ease-out), color 0.6s var(--ease-out);
}

.svc__desc { color: var(--on-ink-mute); max-width: 40ch; }

.svc__arrow {
  font-size: 1.25rem;
  opacity: 0;
  transform: translate(-0.5rem, 0.5rem);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}

.svc__row:hover .svc__name { transform: translateX(0.75rem); color: var(--gold); }
.svc__row:hover .svc__arrow { opacity: 1; transform: none; }

@media (min-width: 54rem) {
  .svc__row {
    grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 0.9fr) 2rem;
    align-items: center;
  }
  .svc__num { align-self: start; padding-top: 0.7rem; }
}

/* ======================================================= 04 · SHOWCASE == */
.case { margin-bottom: clamp(4rem, 2rem + 7vw, 9rem); }
.case:last-child { margin-bottom: 0; }

.case--wide {
  padding-inline: var(--gutter);
  max-width: calc(var(--wrap) + 8vw);
  margin-inline: auto;
}

.case__frame {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s var(--ease-out);
}

/* Mask reveal — the frame opens from the bottom edge as it enters. */
.case.reveal .case__frame { clip-path: inset(0 0 100% 0); }
.case.reveal.is-in .case__frame { clip-path: inset(0 0 0 0); }

.case--wide .case__frame { aspect-ratio: 16 / 9; }
.case--tall .case__frame { aspect-ratio: 4 / 5; }

.case__media {
  position: absolute;
  inset: -9% 0;
  display: block;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.case__media > * {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case__video { opacity: 0; transition: opacity 1s var(--ease-soft); z-index: 1; }
.case__video.is-live { opacity: 1; }

.case__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: 0.15;
  mix-blend-mode: overlay;
}

/* --- Placeholder art. Swap these for real photography when it lands. ----- */
.case__art--villa {
  background:
    radial-gradient(100% 80% at 60% 30%, rgba(199, 160, 104, 0.45), transparent 60%),
    linear-gradient(180deg, #2A2320 0%, #16120F 100%);
}

.case__art--amalfi {
  background:
    radial-gradient(60% 42% at 66% 68%, rgba(232, 190, 140, 0.75), transparent 64%),
    linear-gradient(180deg, #C98F63 0%, #A8674A 42%, #4C2E28 100%);
}
.case__art--amalfi::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 62%;
  height: 1px;
  background: rgba(255, 240, 220, 0.5);
}

.case__art--dubai {
  background:
    repeating-linear-gradient(90deg, rgba(232, 207, 166, 0.10) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #191B21 0%, #23262E 46%, #B08D57 100%);
}

.case__art--ibiza {
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(20, 17, 15, 0.35), transparent 65%),
    linear-gradient(180deg, #EFE7DA 0%, #D9CBB6 58%, #B49E82 100%);
}
.case__art--ibiza::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34%;
  height: 58%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  background: rgba(20, 17, 15, 0.14);
}

.case__art::after { pointer-events: none; }

/* --- Case meta ---------------------------------------------------------- */
.case__meta {
  display: grid;
  gap: 0.3rem 2rem;
  padding-top: clamp(1.1rem, 2vw, 1.75rem);
}

.case__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.case__place { color: var(--on-bone-mute); }

.case__disc,
.case__year {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-bone-mute);
}

@media (min-width: 54rem) {
  .case--wide .case__meta {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    border-top: 1px solid var(--rule-dark);
    padding-top: 1.4rem;
  }
  .case--wide .case__title { grid-row: span 2; }
  .case--wide .case__place { grid-column: 1; }
  .case--wide .case__disc { grid-column: 2; grid-row: 1; }
  .case--wide .case__year { grid-column: 3; grid-row: 1; }
}

.case-pair {
  display: grid;
  gap: clamp(2.5rem, 1rem + 6vw, 6rem);
}

@media (min-width: 54rem) {
  .case-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .case--offset { margin-top: clamp(3rem, 10vw, 9rem); }
}

/* ======================================================== 05 · PROCESS == */
.steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-dark);
}

.step {
  display: grid;
  gap: 0.65rem;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--rule-dark);
}

.step__num {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
  line-height: 1;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}

.step__name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.step__desc { color: var(--on-bone-mute); max-width: 34ch; }

@media (min-width: 54rem) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step {
    gap: 1.1rem;
    padding: clamp(2rem, 3vw, 3rem) clamp(1.25rem, 2vw, 2rem) clamp(3rem, 6vw, 6rem) 0;
    border-bottom: 0;
    border-right: 1px solid var(--rule-dark);
  }
  .step:last-child { border-right: 0; }
}

/* ====================================================== 06 · MANIFESTO == */
.manifesto .eyebrow { margin-bottom: clamp(2.5rem, 6vw, 5rem); }

.manifesto__quote {
  font-size: var(--fs-huge);
  line-height: 1.02;
  max-width: 22ch;
}

.manifesto__quote em { font-style: italic; color: var(--gold); }

/* ============================================================ 07 · CTA == */
.cta { text-align: center; }
.cta__inner { display: grid; justify-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.cta .eyebrow { margin-bottom: clamp(1rem, 3vw, 2.5rem); }
.cta__head { font-size: var(--fs-h2); }
.cta__sub { max-width: 30ch; color: var(--on-bone-mute); }
.cta__btn { margin-top: clamp(1rem, 2vw, 2rem); }

/* ============================================================= FOOTER === */
.foot { padding-block: clamp(4rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem); }

.foot__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}

.foot__brand { display: flex; align-items: baseline; gap: 0.45em; }

.foot__col { display: grid; gap: 0.55rem; align-content: start; }

.foot__col h4 {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  margin-bottom: 0.5rem;
}

.foot__col a,
.foot__col span { color: rgba(242, 237, 230, 0.82); font-size: 0.9375rem; }
.foot__col a { transition: color 0.4s var(--ease-out); }
.foot__col a:hover { color: var(--gold); }

.foot__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-light);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--on-ink-mute);
}

@media (min-width: 54rem) {
  .foot__inner { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
  .foot__legal { grid-column: 1 / -1; }
}

/* ========================================================== RESPONSIVE == */
@media (max-width: 61.99rem) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

@media (max-width: 53.99rem) {
  /* Must match scrollHeightMobile in site-config.js. The component writes the
     same value as an inline style once it boots; if the two disagree the
     document's height jumps the moment it does. */
  .hero { --hero-scroll: 300vh; }

  /* The overlay carries the language switch on a phone; two copies competing
     for a 375px bar is what pushes the CTA off it. */
  .nav__inner > .lang { display: none; }

  /* The contact section is the destination of every "Start a project" on the
     page, so on a phone it has to arrive as a whole screen. Left alone it was
     510px tall in an 812px viewport: the jump landed it under the bar and the
     footer pushed into the bottom third, which read as the section being cut
     short rather than as somewhere you had arrived.

     Filling the screen and centring the copy in it also spends the leftover
     height on both sides of the text instead of stacking it all above, which is
     what the section's own top padding did on its own.

     A full 100svh, not 100svh minus the bar: the jump lands the section at the
     very top of the viewport and lets it run up BEHIND the translucent bar, so
     subtracting the bar height would leave a strip of footer showing at the
     bottom. */
  .cta {
    min-height: 100svh;
    display: grid;
    align-content: center;
  }



  .hero__content { bottom: clamp(6.5rem, 16vh, 9rem); }

  .hero__title { max-width: 12ch; letter-spacing: -0.022em; }

  .hero__sub { max-width: 32ch; }

  .hero__actions > span { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .hero__meta {
    left: var(--gutter);
    right: var(--gutter);
    bottom: clamp(1.75rem, 4vh, 2.5rem);
    justify-content: space-between;
  }

  .positioning__facts { grid-template-columns: 1fr; gap: 1.25rem; }

  .manifesto__quote { max-width: 16ch; }
}

/* Coarse pointers get the autoplay fallback; the rail label changes meaning. */
.hero.is-fallback .hero__meta-rail { display: none; }