/* =============================================================
   INYA PARTNERS — inya.css
   Design system derived from INYA_Partners_Brand_Guidelines_v3
   Palette : INYA Black #000000 · Rose Gold #B67A78
             Warm Ivory #F3EEE8 · Deep Copper #8F5E5B
   Type    : Didot (display) · Avenir (text)
             Web fallbacks: Bodoni Moda · Jost
   Voice   : "Use restraint: generous space, high contrast and one
              focal mark. The identity should feel assured, never
              ornamental."
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */
:root {
  /* Brand palette — digital master reference */
  --ink:          #000000;
  --rose:         #B67A78;
  --ivory:        #F3EEE8;
  --copper:       #8F5E5B;

  /* Derived neutrals */
  --ink-90:       #0B0A0A;
  --ink-70:       rgba(0,0,0,.70);
  --ink-55:       rgba(0,0,0,.55);
  --ink-38:       rgba(0,0,0,.38);
  --ink-14:       rgba(0,0,0,.14);
  --ink-08:       rgba(0,0,0,.08);
  --ivory-warm:   #FAF7F3;
  --ivory-deep:   #E9E1D8;
  --paper:        var(--ivory);

  /* On dark */
  --on-dark:      #F3EEE8;
  --on-dark-64:   rgba(243,238,232,.64);
  --on-dark-40:   rgba(243,238,232,.40);
  --on-dark-16:   rgba(243,238,232,.16);
  --on-dark-08:   rgba(243,238,232,.08);

  /* Type */
  --font-display: Didot, "Didot LT STD", "Bodoni 72", "Bodoni Moda", "Hoefler Text", Garamond, "Times New Roman", serif;
  --font-sans:    "Avenir Next", Avenir, Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-hero:      clamp(3.4rem, 11vw, 10rem);
  --fs-display:   clamp(2.4rem, 5.2vw, 4.75rem);
  --fs-h2:        clamp(1.9rem, 3.4vw, 3.1rem);
  --fs-h3:        clamp(1.25rem, 1.9vw, 1.7rem);
  --fs-lead:      clamp(1.05rem, 1.42vw, 1.375rem);
  --fs-body:      clamp(.95rem, 1.06vw, 1.0625rem);
  --fs-small:     .8125rem;
  --fs-label:     .6875rem;

  --track-label:  .26em;
  --track-nav:    .17em;
  --track-wide:   .1em;

  /* Space */
  --gutter:       clamp(1.5rem, 5vw, 5.5rem);
  --section-y:    clamp(5rem, 11vw, 11rem);
  --maxw:         84rem;
  --maxw-text:    46rem;

  --header-h:     clamp(100px, 12vh, 124px);

  /* Motion */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --dur:          .62s;
  --dur-fast:     .32s;

  /* The wordmark is rose gold, never white — see BRAND.md, Approved expressions.
     The ramp reproduces the metallic fall of the master lockup. */
  --rose-light:   #E0B4B0;
  --rose-deep:    #A16C69;
  --rose-metal:   linear-gradient(155deg,
                    #C08582 0%, #B67A78 22%, #D6A8A3 44%,
                    #A96F6C 62%, #C68E8A 82%, #96635F 100%);

  --hair:         1px solid var(--ink-14);
  --hair-dark:    1px solid var(--on-dark-16);

  color-scheme: light;
}

/* ---------- 2. Reset & base ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-90);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--rose); color: var(--ivory); }

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

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 999;
  background: var(--ink); color: var(--on-dark);
  padding: .75rem 1.25rem; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

.hero--film .hero__inner {
  align-self: end;
  padding-top: 0;
  padding-bottom: clamp(3rem, 7vh, 6rem);
}
/* The film carries the mark, so the copy steps out of the centre and sits
   low, leaving the frame to the picture. */
/* The film is far brighter than the generated plate it replaces, and the copy
   sits over its lit half, so the scrim is rebuilt as a deep foot that holds the
   text and lets the picture stay open above it. */
/* The copy that deep foot was built to hold is gone from the film hero, and
   it was burying the film's own tagline. Now it only backs the button and the
   nav, and the frame is shown whole at every size, so a full screen shows the
   lockup at the film's own proportion instead of blowing it up and cropping. */
.hero--film .hero__scrim {
  background:
    linear-gradient(to top,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.16) 9%, rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%, rgba(0,0,0,.38) 100%);
}
.hero--film .hero__video { object-fit: contain; }
.hero--film .hero__eyebrow {
  margin-bottom: clamp(1rem, 2vh, 1.75rem);
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 18px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.6);
}
.hero--film .hero__lead { color: rgba(255,255,255,.94); text-shadow: 0 1px 24px rgba(0,0,0,.55); }
/* Portrait crops the 16:9 frame to its centre band, which is the brightest part
   of the shot, so the foot has to carry more weight than it does on desktop. */
@media (max-width: 767px) {
  .hero--film .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(0,0,0,.96) 0%, rgba(0,0,0,.93) 18%, rgba(0,0,0,.78) 34%,
        rgba(0,0,0,.46) 52%, rgba(0,0,0,.22) 70%, rgba(0,0,0,.46) 100%);
  }
}
.hero--film .hero__lead { max-width: 44rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Typographic primitives ------------------------ */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
  font-size: var(--fs-display);
}
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.008em; }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }

.label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
  line-height: 1.5;
}
.label--dark { color: var(--rose); }
.label--muted { color: var(--ink-38); }
.section--dark .label--muted, .board .label--muted { color: var(--on-dark-40); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: var(--maxw-text);
}

.prose { max-width: var(--maxw-text); color: var(--ink-70); }
.prose strong { color: var(--ink-90); font-weight: 600; }

.rule {
  width: 100%; height: 0; border: 0; border-top: var(--hair); margin: 0;
}

/* Underline-on-hover link */
.link {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: .45rem;
  position: relative;
  color: var(--ink-90);
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform var(--dur) var(--ease-out);
}
.link:hover::after { transform-origin: left; animation: linkSweep var(--dur) var(--ease-out); }
@keyframes linkSweep {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}
.link--rose { color: var(--copper); }
.link--dark { color: var(--on-dark); }

/* Button */
.btn {
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--ink);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--ivory); }
.btn--filled { background: var(--ink); color: var(--ivory); }
.btn--filled:hover { background: var(--copper); border-color: var(--copper); }
.btn--dark { border-color: var(--on-dark-40); color: var(--on-dark); }
.btn--dark:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* ---------- 4. Layout ---------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 104rem; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark .lead, .section--dark .prose { color: var(--on-dark-64); }
.section--dark .rule { border-top-color: var(--on-dark-16); }
.section--ivory-deep { background: var(--ivory-deep); }

.grid-2 {
  display: grid; gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }

.stack-sm > * + * { margin-top: 1rem; }
.stack-md > * + * { margin-top: 1.75rem; }
.stack-lg > * + * { margin-top: clamp(2.25rem, 4vw, 3.5rem); }

/* ---------- 5. Header ---------------------------------------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 130;
  min-height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
  color: var(--on-dark);
}
.header__inner {
  width: 100%; max-width: 104rem; margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(1rem, 2.5vw, 2.5rem);
}
/* Columns are assigned explicitly so the logo holds the page centre even when
   the menus are hidden and drop out of the grid flow. */
.header__inner > .nav--left { grid-column: 1; justify-self: start; }
.header__inner > .brandmark { grid-column: 2; justify-self: center; }
.header__inner > .header__right { grid-column: 3; justify-self: end; }
.header.is-solid {
  background: rgba(243,238,232,.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--ink-08);
  color: var(--ink-90);
}
.header.is-hidden { transform: translateY(-100%); }
.header { transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }

/* Logo */
.brandmark {
  display: flex; flex-direction: column; align-items: center;
  gap: .3rem; text-align: center; line-height: 1;
}
.brandmark__sym { width: clamp(62px, 5.2vw, 80px); height: auto; flex: none; }
.brandmark__sym path, .brandmark__sym circle { transition: stroke var(--dur) var(--ease); }
.brandmark__txt {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: .22em;
  line-height: 1;
  text-indent: .22em;
  color: var(--rose);
}
.header.is-solid .brandmark__txt { color: var(--copper); }
.brandmark__sub {
  display: block;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  margin-top: .3rem;
  color: var(--rose);
  opacity: .78;
  font-family: var(--font-sans);
  text-indent: .34em;
}
.header.is-solid .brandmark__sub { color: var(--copper); opacity: .72; }

/* Desktop nav */
.nav { display: none; align-items: center; flex-wrap: nowrap;
  gap: clamp(.9rem, 1.9vw, 2rem); }
.nav a { white-space: nowrap; }
.nav a {
  font-size: var(--fs-label);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  font-weight: 500;
  padding-block: .4rem;
  position: relative;
  opacity: .82;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav a.is-active { opacity: 1; }

.header__right { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

@media (min-width: 860px) {
  .nav { display: flex; }
  .burger { display: none !important; }
}

/* ---------- 6. Language toggle ------------------------------- */
.lang { display: flex; align-items: center; gap: .6rem; }
.lang__btn {
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .3rem 0;
  color: currentColor;
  opacity: .42;
  position: relative;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang__btn:hover { opacity: .78; }
.lang__btn[aria-pressed="true"] { opacity: 1; color: var(--rose); }
.lang__btn[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
}
.header.is-solid .lang__btn[aria-pressed="true"] { color: var(--copper); }
.lang__sep { width: 1px; height: 11px; background: currentColor; opacity: .26; }

/* ---------- 7. Hamburger ------------------------------------- */
.burger {
  width: 30px; height: 20px; position: relative; z-index: 130;
}
.burger span {
  position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur) var(--ease);
}
.burger span:nth-child(1) { top: 3px; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 17px; }
body.menu-open .burger span { background: var(--on-dark); }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 8. Mobile / tablet drawer ------------------------ */
.drawer {
  position: fixed; inset: 0; z-index: 120;
  background: var(--ink); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
body.menu-open .drawer { opacity: 1; visibility: visible; }
body.menu-open .header {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent; color: var(--on-dark);
  transform: none;
}
body.menu-open .header .lang { border-color: var(--on-dark-40); }
.drawer__nav { display: flex; flex-direction: column; gap: clamp(.9rem, 2.4vh, 1.6rem); }
.drawer__nav a {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7.6vw, 3.2rem);
  line-height: 1.05;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color var(--dur-fast) var(--ease);
}
body.menu-open .drawer__nav a { opacity: 1; transform: none; }
body.menu-open .drawer__nav a:nth-child(1) { transition-delay: .10s; }
body.menu-open .drawer__nav a:nth-child(2) { transition-delay: .16s; }
body.menu-open .drawer__nav a:nth-child(3) { transition-delay: .22s; }
body.menu-open .drawer__nav a:nth-child(4) { transition-delay: .28s; }
body.menu-open .drawer__nav a:nth-child(5) { transition-delay: .34s; }
.drawer__nav a:hover, .drawer__nav a.is-active { color: var(--rose); }
.drawer__foot {
  margin-top: clamp(2rem, 6vh, 4rem);
  padding-top: 1.75rem; border-top: var(--hair-dark);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  font-size: var(--fs-small); color: var(--on-dark-64);
}
.drawer__services { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: var(--hair-dark); }
.drawer__services a { font-size: var(--fs-small); letter-spacing: var(--track-wide); color: var(--on-dark-64); text-transform: uppercase; }
.drawer__services a:hover { color: var(--rose); }

/* ---------- 9. Hero ------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 42%, #17100F 0%, #0A0707 45%, #000 100%);
}
/* The 9:16 art plate — behaves like a video source would */
.hero__plate {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 9 / 16;
  min-width: 100%; min-height: 100%;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(86% 68% at 50% 46%, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 58%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.08) 24%, rgba(0,0,0,.10) 66%, rgba(0,0,0,.74) 100%);
}
.hero__inner {
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 6rem;
  display: flex; flex-direction: column; align-items: center;
  max-width: 62rem;
}
.hero__eyebrow {
  font-size: clamp(.5625rem, 2.1vw, var(--fs-label));
  max-width: 30rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-40);
  margin-bottom: clamp(1.75rem, 4vh, 3rem);
}
/* Master lockup — symbol, wordmark, descriptor, signature */
.lockup { display: flex; flex-direction: column; align-items: center; }
.lockup__sym {
  width: clamp(6rem, 15vw, 11.5rem);
  height: auto;
  margin-bottom: clamp(.9rem, 2.4vh, 1.9rem);
  filter: drop-shadow(0 0 26px rgba(182,122,120,.28));
}
.hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: .9;
  letter-spacing: .13em;
  text-indent: .13em;
  margin: 0;
  color: var(--rose);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__name {
    background: var(--rose-metal);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }
}
.lockup__partners {
  margin: clamp(.5rem, 1.4vh, 1rem) 0 0;
  font-size: clamp(.72rem, 1.9vw, 1.25rem);
  letter-spacing: .58em;
  text-indent: .58em;
  text-transform: uppercase;
  font-weight: 300;
  color: var(--rose);
  opacity: .95;
}
.lockup__rule {
  display: block; width: clamp(56px, 12vw, 104px); height: 1px;
  background: var(--rose);
  margin: clamp(.9rem, 2.4vh, 1.6rem) 0;
}
.hero__tagline {
  margin: 0;
  font-size: clamp(.6rem, 1.3vw, .8125rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--rose-light);
  text-indent: .42em;
}
.hero__lead {
  margin-top: clamp(1.6rem, 3.6vh, 2.6rem);
  font-size: var(--fs-lead);
  color: var(--on-dark-64);
  max-width: 40rem;
  line-height: 1.55;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: clamp(2rem, 4.4vh, 3rem); }
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1.5rem, 3.4vh, 2.6rem); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-size: .5625rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-dark-40);
}
.hero__scroll i { display: block; width: 1px; height: 46px; background: linear-gradient(to bottom, var(--on-dark-40), transparent); }
@media (max-height: 700px) {
  .hero__lead { display: none; }
}

/* Hero art animation */
.art-spin { transform-origin: 50% 50%; animation: artSpin 68s linear infinite; }
.art-breathe { animation: artBreathe 11s var(--ease) infinite; transform-origin: 50% 50%; }
.art-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: artDraw 3.4s var(--ease-out) forwards; }
@keyframes artSpin { to { transform: rotate(360deg); } }
@keyframes artBreathe { 0%,100% { opacity: .58; transform: scale(1); } 50% { opacity: .92; transform: scale(1.03); } }
@keyframes artDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .art-spin, .art-breathe, .art-draw { animation: none; stroke-dashoffset: 0; }
}

/* Film grain */
.grain {
  position: absolute; inset: -100%; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 7s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ---------- 10. Services board (5 panels, no scroll) --------- */
.board {
  background: var(--ink);
  color: var(--on-dark);
  min-height: auto;
  display: flex; flex-direction: column;
}
.board__head {
  padding: calc(var(--header-h) + clamp(.9rem, 2.2vh, 1.6rem)) var(--gutter) clamp(.9rem, 2.2vh, 1.5rem);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  border-bottom: var(--hair-dark);
}
.board__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.05; }
.board__grid {
  --tiles: 6;
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: none;
  min-height: 0;
}
@media (min-width: 1024px) {
  .board { min-height: 62svh; }
  .board__grid { flex: 1 1 0; grid-template-rows: none; grid-template-columns: repeat(var(--tiles), minmax(0, 1fr)); }
}

.tile {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(.85rem, 2.2vh, 1.9rem) var(--gutter);
  border-bottom: var(--hair-dark);
  overflow: hidden;
  min-height: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile:last-child { border-bottom: 0; }
@media (min-width: 1024px) {
  .tile {
    border-bottom: 0; border-right: var(--hair-dark);
    padding: clamp(1.15rem, 2.2vh, 1.9rem) clamp(.85rem, 1.35vw, 1.6rem);
    justify-content: flex-end;
  }
  .tile:last-child { border-right: 0; }
}
.tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg,
                rgba(182,122,120,.44) 0%,
                rgba(160,104,101,.20) 52%,
                rgba(143,94,91,.05) 100%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
/* rose gold rule on the leading edge, growing out of it */
.tile::after {
  content: ""; position: absolute; background: var(--rose);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease-out);
  left: 0; top: 0; bottom: 0; width: 2px;
  transform: scaleY(0); transform-origin: top;
}
.tile:hover::after, .tile:focus-visible::after { opacity: 1; transform: scaleY(1); }
@media (min-width: 1024px) {
  .tile::after {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px;
    transform: scaleX(0); transform-origin: left;
  }
  .tile:hover::after, .tile:focus-visible::after { transform: scaleX(1); }
}
.tile__num {
  font-family: var(--font-display);
  font-size: clamp(.8rem, 1.1vw, .95rem);
  letter-spacing: .2em;
  color: var(--rose);
  margin-bottom: .5rem;
  position: relative;
}
.tile__name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.75vw, 1.5rem);
  line-height: 1.12;
  position: relative;
  transition: transform var(--dur) var(--ease-out);
}
.tile__short {
  margin-top: .55rem;
  font-size: clamp(.75rem, .82vw, .8125rem);
  line-height: 1.5;
  color: var(--on-dark-40);
  position: relative;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile__go {
  position: relative;
  margin-top: clamp(.6rem, 1.4vh, 1.1rem);
  font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--rose);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.tile:hover .tile__go, .tile:focus-visible .tile__go { opacity: 1; transform: none; }
.tile:hover .tile__short { color: var(--on-dark-64); }
.tile__num { transition: color var(--dur) var(--ease); }
.tile:hover .tile__num, .tile:focus-visible .tile__num { color: var(--rose-light); }
@media (min-width: 1024px) {
  .tile__short { -webkit-line-clamp: 4; }
  .tile:hover .tile__name { transform: translateY(-2px); }
}
@media (max-width: 1023px) {
  .tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; }
  .tile__num { margin-bottom: 0; flex: none; width: 2.4rem; }
  .tile__body { min-width: 0; }
  .tile__go {
    position: absolute; right: var(--gutter); top: 50%; margin: 0;
    transform: translateY(-50%); opacity: .6;
    font-size: 0; letter-spacing: 0;
  }
  .tile__go::after { content: "\2192"; font-size: 1.05rem; display: block; }
  .tile:hover .tile__go { opacity: 1; transform: translateY(-50%); }
  .tile__body { padding-right: 2.25rem; flex: 1 1 auto; max-width: 44rem; }
  .tile__short { -webkit-line-clamp: 2; }
}
@media (max-width: 1023px) and (max-height: 900px) {
  .tile { padding-block: clamp(.5rem, 1.3vh, 1.1rem); }
  .tile__short { -webkit-line-clamp: 1; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .tile__short { display: none; }
}

/* ---------- 11. Editorial blocks ----------------------------- */
.eyebrow-row { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.eyebrow-row::after { content: ""; flex: 1; height: 1px; background: var(--ink-14); }
.section--dark .eyebrow-row::after { background: var(--on-dark-16); }

.serve__label {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-38); font-weight: 500;
}
.section--dark .serve__label { color: var(--on-dark-40); }
.serve__list { display: grid; gap: 0; margin-top: 1.25rem; }
.serve__item {
  display: grid; gap: .35rem 2rem; padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-top: var(--hair);
  align-items: baseline;
}
.section--dark .serve__item { border-top-color: var(--on-dark-16); }
.serve__item:last-child { border-bottom: var(--hair); }
.section--dark .serve__item:last-child { border-bottom-color: var(--on-dark-16); }
@media (min-width: 800px) { .serve__item { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.serve__term { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.serve__def { color: var(--ink-55); }
.section--dark .serve__def { color: var(--on-dark-64); }

.values { display: grid; gap: 1px; background: var(--on-dark-16); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } }
.value { background: var(--ink); padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem); }
.value__name {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: .06em;
  color: var(--rose);
  margin-bottom: .55rem;
}
.value__tag {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--on-dark-40);
  margin: 0 0 1.15rem;
  padding-bottom: 1.15rem;
  border-bottom: var(--hair-dark);
}
.value__desc { color: var(--on-dark-64); }

/* the same three-up on a light ground */
.values--light { background: var(--ink-14); }
.values--light .value { background: var(--paper); }
.values--light .value__name { color: var(--copper); }
.values--light .value__tag { color: var(--ink-38); border-bottom-color: var(--ink-14); }
.values--light .value__desc { color: var(--ink-55); }

/* mission statement */
.mission { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.5rem, 3vw, 2.25rem); }
.mission__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.1vw, 2.5rem);
  line-height: 1.24;
  max-width: 26ch;
  color: var(--on-dark);
  margin: 0;
}

/* ---------- 12. Service detail page -------------------------- */
.page-head {
  background: var(--ink); color: var(--on-dark);
  padding: calc(var(--header-h) + clamp(4.5rem, 12vh, 9rem)) 0 clamp(3.5rem, 8vh, 6rem);
  position: relative; overflow: hidden;
}
.page-head__art {
  position: absolute; right: -8%; bottom: -18%;
  width: min(46vw, 36rem); opacity: .14; pointer-events: none;
}
.page-head__inner { position: relative; }
.page-head__num {
  font-family: var(--font-display); font-size: clamp(3rem, 9vw, 7rem);
  color: var(--rose); opacity: .32; line-height: 1; margin-bottom: .5rem;
}
.page-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.03; letter-spacing: -.01em;
  max-width: 20ch;
}
.page-head__kicker {
  margin-top: 1.4rem; font-size: var(--fs-small);
  letter-spacing: var(--track-wide); color: var(--on-dark-40); text-transform: uppercase;
  max-width: 52ch;
}
.page-head__lead { margin-top: 2rem; font-size: var(--fs-lead); color: var(--on-dark-64); max-width: 44rem; line-height: 1.55; }

.svc-body { padding-block: clamp(3.5rem, 8vw, 7rem); }
.svc-sec {
  display: grid; gap: 1rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: var(--hair);
}
.svc-sec:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 900px) { .svc-sec { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.svc-sec__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--ink-90);
}
@media (min-width: 900px) {
  /* the section label tracks the reader down long sections */
  .svc-sec__title, .block__title {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }
}
.svc-sec__content { color: var(--ink-70); max-width: 44rem; }

.deflist { display: grid; gap: 1.1rem; margin-top: 1.25rem; }
.deflist li { display: grid; gap: .25rem; padding-left: 1.5rem; position: relative; }
.deflist li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 7px; height: 1px; background: var(--rose);
}
.deflist b { font-weight: 600; color: var(--ink-90); }
.deflist span { color: var(--ink-55); }

.group { margin-top: 2rem; }
.group__label {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--copper); font-weight: 500;
  padding-bottom: .7rem; border-bottom: var(--hair); margin-bottom: 1.1rem;
}

.steps { counter-reset: s; display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.steps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: baseline; }
.steps li::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--font-display); color: var(--rose); font-size: .95rem; letter-spacing: .1em;
}
.steps b { font-weight: 600; color: var(--ink-90); }
.steps span { color: var(--ink-55); }

.note {
  margin-top: 1.5rem; padding: 1.15rem 1.4rem;
  border-left: 2px solid var(--rose); background: var(--ivory-warm);
  font-size: var(--fs-small); color: var(--ink-55);
}

.svc-nav {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center;
  padding-top: clamp(2rem, 4vw, 3rem); border-top: var(--hair);
}

/* Delivery-partner credit in a service page head */
.partner {
  margin-top: clamp(2rem, 4vh, 3rem);
  padding-top: 1.5rem;
  border-top: var(--hair-dark);
  max-width: 40rem;
}
.partner + .partner {
  margin-top: 1.5rem;
}
.partner__label {
  display: block;
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--on-dark-40);
}
.partner__name {
  display: inline-block; margin-top: .6rem;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--rose);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.partner__name:hover { border-bottom-color: var(--rose); }
.partner__blurb { margin-top: .8rem; font-size: var(--fs-small); line-height: 1.6; color: var(--on-dark-64); }

/* Other services strip */
.others { display: grid; gap: 1px; background: var(--ink-14); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 700px) { .others { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.other {
  background: var(--paper); padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: background var(--dur) var(--ease);
}
.other:hover { background: var(--ivory-warm); }
.other__num { font-family: var(--font-display); font-size: .8rem; letter-spacing: .2em; color: var(--rose); }
.other__name { font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; }

/* ---------- 13. About / Founder ------------------------------ */
.blocks { display: grid; gap: 0; }
.block {
  display: grid; gap: 1rem clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-top: var(--hair);
}
@media (min-width: 900px) { .block { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.block__title { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; }
.block__body { color: var(--ink-70); max-width: 44rem; }

.naming { display: grid; gap: 1px; background: var(--ink-14); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 760px) { .naming { grid-template-columns: repeat(3, 1fr); } }
.naming__item {
  background: var(--paper);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 11rem; gap: 1.5rem;
}
.naming__word { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: .1em; line-height: 1.1; color: var(--copper); }
.naming__role { margin-top: 0; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-38); }

.portrait {
  position: relative; aspect-ratio: 3 / 4;
  background: var(--ink); overflow: hidden;
  display: grid; place-items: center;
}
.portrait svg { width: 78%; height: auto; opacity: .9; }
.portrait__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.12) contrast(1.02); }
.portrait__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
  color: var(--on-dark-64); font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase;
}

.quote {
  margin-block: clamp(2.5rem, 5vw, 4rem);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 1px solid var(--rose);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  line-height: 1.3;
  color: var(--ink-90);
  max-width: 40rem;
}
.section--dark .quote { color: var(--on-dark); }

.facts { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); }
.fact { display: grid; gap: .3rem 2rem; padding-block: 1.15rem; border-top: var(--hair); }
.fact:last-child { border-bottom: var(--hair); }
@media (min-width: 760px) { .fact { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } }
.fact__k { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-38); padding-top: .28rem; }
.fact__v { color: var(--ink-70); }

.timeline { margin-top: clamp(2rem, 4vw, 3rem); }
.tl { display: grid; gap: .3rem 2rem; padding-block: clamp(1.15rem, 2.4vw, 1.6rem); border-top: var(--hair); position: relative; }
.tl:last-child { border-bottom: var(--hair); }
@media (min-width: 800px) { .tl { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); } }
.tl__yr { font-size: var(--fs-small); letter-spacing: var(--track-wide); color: var(--rose); padding-top: .18rem; font-variant-numeric: tabular-nums; }
.tl__role { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.25; }
.tl__org { color: var(--ink-55); font-size: var(--fs-small); margin-top: .25rem; }

/* ---------- 14. Contact -------------------------------------- */
.contact-list { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); }
.contact-row {
  display: grid; gap: .35rem 2rem; padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  border-top: var(--hair-dark); align-items: baseline;
}
.contact-row:last-child { border-bottom: var(--hair-dark); }
@media (min-width: 760px) { .contact-row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } }
.contact-row__k { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-40); }
.contact-row__v { font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.75rem); line-height: 1.3; }
.contact-row__v a { border-bottom: 1px solid var(--on-dark-16); padding-bottom: .18rem; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.contact-row__v a:hover { color: var(--rose); border-color: var(--rose); }

/* ---------- 15. Closing CTA ---------------------------------- */
.cta {
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(4rem, 10vw, 8rem);
  position: relative; overflow: hidden; text-align: center;
}
.cta__art { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(120vw, 70rem); opacity: .09; pointer-events: none; }
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.cta__title { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.05; max-width: 18ch; }
.cta__body { color: var(--on-dark-64); max-width: 42ch; }

/* ---------- 16. Footer --------------------------------------- */
.footer { background: var(--ink); color: var(--on-dark-64); padding-block: clamp(3rem, 6vw, 5rem); border-top: var(--hair-dark); }
.footer__top { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 860px) { .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.footer__brand .brandmark__txt { color: var(--rose); }
.footer__tag { margin-top: 1.5rem; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--rose); }
.footer__col h4 { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--on-dark-40); margin-bottom: 1.1rem; font-weight: 500; }
.footer__col a { display: block; padding-block: .32rem; font-size: var(--fs-small); transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--rose); }
.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: var(--hair-dark);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: var(--fs-small); color: var(--on-dark-40);
}

/* ---------- 17. Reveal on scroll ----------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 18. View transition ------------------------------ */
.view { animation: viewIn .5s var(--ease-out) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* ---------- 19. Print ---------------------------------------- */
@media print {
  .header, .drawer, .hero__scroll, .burger, .lang { display: none !important; }
  body { background: #fff; color: #000; }
  .section--dark, .board, .cta, .footer, .page-head { background: #fff !important; color: #000 !important; }
  .hero__name { background: none !important; -webkit-text-fill-color: #8F5E5B !important; color: #8F5E5B !important; }
}

/* ---------- Contact form ---------------------------------------- */
.cform { margin-top: clamp(2rem, 4vw, 3rem); max-width: 52rem; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cform__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } }
.cform__row { display: flex; flex-direction: column; }
.cform__row--wide { margin-top: 1.75rem; }
.cform__label {
  font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-55); margin-bottom: .5rem;
}
.cform__req { color: var(--rose); }
.cform__opt { text-transform: none; letter-spacing: 0; color: var(--ink-38); }
.cform__input {
  width: 100%; display: block;
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-14);
  border-radius: 0; padding: .55rem 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.cform__input:focus { outline: none; border-bottom-color: var(--rose); }
.cform__input:user-invalid { border-bottom-color: #A6453F; }
textarea.cform__input { resize: vertical; min-height: 8rem; line-height: 1.6; }
.cform__hint { margin-top: .55rem; font-size: var(--fs-small); color: var(--ink-38); }
.cform__consent {
  display: flex; gap: .8rem; align-items: flex-start;
  margin-top: 2rem; max-width: 44rem; line-height: 1.55; cursor: pointer;
}
.cform__consent input { margin-top: .3rem; flex: 0 0 auto; accent-color: var(--rose); }
.cform__privacy {
  margin-top: 1.5rem; max-width: 44rem;
  border-top: var(--hair); padding-top: 1rem;
}
.cform__privacy summary {
  cursor: pointer; font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-55);
}
.cform__privacy p { margin-top: .9rem; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-55); }
.cform__foot { margin-top: 2.25rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cform__status { font-size: var(--fs-small); margin: 0; }
.cform__status.is-ok { color: var(--ink); }
.cform__status.is-error { color: #A6453F; }
.cform__consent--opt { margin-top: 1rem; color: var(--ink-70); }

/* The stacked lockup is centred in the header, but the footer column is
   left-aligned, so the mark and the tagline must share that edge. */
.footer__brand .brandmark { align-items: flex-start; text-align: left; }
/* The letter-spacing indents only exist to optically centre the lockup;
   left-aligned they push the words off the shared edge. */
.footer__brand .brandmark__txt,
.footer__brand .brandmark__sub { text-indent: 0; }

/* Service tiles are bottom-anchored, so titles of one, two or three lines
   pushed the numbers to different heights. Reserving the tallest title and
   description makes every block the same height, and the whole row lines up. */
@media (min-width: 1024px) {
  /* the name is a span, so it needs a block box for min-height to apply */
  .tile__name { display: block; min-height: calc(3 * 1.12em); }
  .tile__short { -webkit-line-clamp: 3; min-height: calc(3 * 1.5em); }
}

/* The film ends on the lockup and the tagline, so it already makes the opening
   statement. Repeating it in type on top of the picture only fights it: the
   eyebrow and the lead step aside and the hero keeps the film and one button.
   The proposition is waiting in the section immediately below. */
.hero--film .hero__eyebrow,
.hero--film .hero__lead { display: none; }
/* The button drops below the film's own tagline, and the scroll cue steps
   out: at this depth it would sit on top of the button. */
.hero--film .hero__inner { padding-bottom: clamp(1.75rem, 4.5vh, 3rem); }
.hero--film .hero__scroll { display: none; }

/* A 16:9 film cannot fill a portrait screen without cropping its own lockup
   to pieces, so on narrow screens the frame is shown whole, sitting high with
   the button beneath it. */
@media (max-width: 767px) {
  .hero--film .hero__video { object-fit: contain; object-position: 50% 43%; }
  .hero--film .hero__scrim {
    background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%,
                rgba(0,0,0,0) 62%, rgba(0,0,0,.75) 100%);
  }
}

/* While the bar floats over the film, the film's own lockup is the mark on
   screen; showing the small one on top of it reads as two logos at once. It
   returns as soon as the bar turns solid. */
.header .brandmark { transition: opacity var(--dur) var(--ease); }
.header--over-film:not(.is-solid) .brandmark { opacity: 0; pointer-events: none; }

/* Landscape on a phone leaves the hero shorter than the film is wide, so the
   film's closing lockup and the button end up on top of each other. The film
   takes the upper band and the button sits clear underneath it. */
@media (orientation: landscape) and (max-height: 560px) {
  .hero--film .hero__video {
    object-fit: contain; object-position: 50% 0;
    height: 74%; top: 0; bottom: auto;
  }
  .hero--film .hero__inner { padding-bottom: clamp(.6rem, 2.5vh, 1.4rem); }
  .hero--film .hero__scrim {
    background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 20%,
                rgba(0,0,0,0) 64%, rgba(0,0,0,.7) 100%);
  }
}