/* ============================================================
   BAGARI — studio site, v2
   Work-led, motion-driven. Ink is the default ground; Stone is the
   alternate. Brandbook 03.0 colours and Futura 100 GEO carried over
   from v1; the price list, the tier bands and the decorative use of
   the drawings are not.

   Motion here is scroll-DRIVEN, never scroll-HIJACKED: native scrolling
   is left alone, so the trackpad, the keyboard, the scrollbar and the
   screen reader all behave. Everything below --p is progress 0→1 that
   JS writes onto an element; CSS decides what it means.
   ============================================================ */

/* ---------- type: Futura 100 GEO, self-hosted (see /brand/type/licence.txt) ----------
   One family covers Latin, Mkhedruli and Mtavruli. Text cut for body and
   UI, display cut for the large headings. */
@font-face {
  font-family: "Futura 100 GEO Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../brand/type/futura-text-400.woff2") format("woff2");
}
@font-face {
  font-family: "Futura 100 GEO Text";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../brand/type/futura-text-500.woff2") format("woff2");
}
@font-face {
  font-family: "Futura 100 GEO Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../brand/type/futura-text-600.woff2") format("woff2");
}
@font-face {
  font-family: "Futura 100 GEO Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../brand/type/futura-text-700.woff2") format("woff2");
}
@font-face {
  font-family: "Futura 100 GEO";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../brand/type/futura-display-600.woff2") format("woff2");
}
@font-face {
  font-family: "Futura 100 GEO";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../brand/type/futura-display-700.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  /* the five */
  --ink: #131512;
  --stone: #EDEBE4;
  --wine: #CB3534;        /* Redprint */
  --blue: #1F4E79;        /* Blueprint, for use on stone */
  --blue-lift: #5497D3;   /* the same signal lifted to carry text on ink */
  --wine-hover: #A32120;

  /* neutral steps — tints of the two grounds, not a further hue */
  --line-on-stone: #D6D2C6;
  --line-strong-on-stone: #C9C5B9;
  --muted-on-stone: #6A6A62;
  --line-on-ink: #26271F;
  --line-strong-on-ink: #38392F;
  --muted-on-ink: #8C8B82;

  /* ---- surface roles. REDPRINT is the ground, the way the reference floods
     its blue. Their blue is far darker than this red (white clears 7.97:1 on
     it, against 5.12:1 here), so two rules follow and are not negotiable:
     text on red is pure white, never stone, which only reaches 4.30:1; and
     nothing on red is dimmed, because no tint of white on this ground clears
     AA at small sizes. Hierarchy comes from size and weight instead. ---- */
  color-scheme: dark;
  --surface: var(--redprint);
  --text: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.95);
  --line: rgba(255, 255, 255, 0.28);
  --line-strong: rgba(255, 255, 255, 0.55);
  --kicker: #FFFFFF;
  --mark: #FFFFFF;
  --focus: #FFFFFF;
  --link: #FFFFFF;
  --primary-bg: #FFFFFF;
  --primary-fg: var(--redprint);
  --primary-hover-bg: var(--ink);
  --primary-hover-fg: #FFFFFF;
  --secondary: #FFFFFF;
  /* the relief section, and the contact band, drop to stone */
  --band-bg: var(--stone);
  --band-fg: var(--ink);
  --band-muted: var(--muted-on-stone);
  --band-line: var(--line-strong-on-stone);
  --band-kicker: var(--redprint);

  /* the three levels keep their identity from the brandbook */
  --blueprint: #1F4E79;
  --redprint: #CB3534;
  --blackprint: #171717;

  /* type */
  --font: "Futura 100 GEO Text", "Futura 100 GEO", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Futura 100 GEO", "Futura 100 GEO Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 8-pt base: 4 · 8 · 16 · 24 · 40 · 64 · 96 · 160 */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.5rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 10rem;

  --max: 100rem;
  --margin: clamp(1.25rem, 4vw, 4rem);
  --gutter: max(var(--margin), calc((100% - var(--max)) / 2));

  /* motion */
  --fast: 180ms;
  --medium: 560ms;
  --slow: 900ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* written by JS: scroll velocity, normalised and clamped */
  --vel: 0;
}

/* ---- Stone edition, reached by the switch only. The site commits to the
   red ground the way the reference commits to its blue; the switch is there
   for anyone who wants the quiet version, and it persists. ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --surface: var(--stone);
  --text: var(--ink);
  --muted: var(--muted-on-stone);
  --line: var(--line-on-stone);
  --line-strong: var(--line-strong-on-stone);
  --kicker: var(--redprint);
  --mark: var(--redprint);
  --focus: var(--blue);
  --link: var(--redprint);
  --primary-bg: var(--redprint);
  --primary-fg: #FFFFFF;
  --primary-hover-bg: var(--ink);
  --primary-hover-fg: #FFFFFF;
  --secondary: var(--ink);
  --band-bg: var(--ink);
  --band-fg: var(--stone);
  --band-muted: var(--muted-on-ink);
  --band-line: var(--line-strong-on-ink);
  --band-kicker: var(--blue-lift);
}

/* a section that drops to the opposite ground, so the page alternates the way
   the reference alternates flooded colour with near-white */
.relief {
  background: var(--band-bg);
  color: var(--band-fg);
  --surface: var(--band-bg);
  --text: var(--band-fg);
  --muted: var(--band-muted);
  --line: var(--band-line);
  --line-strong: var(--band-line);
  --kicker: var(--band-kicker);
  --mark: var(--band-kicker);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1875rem);
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Georgian is capitalised in the markup, as Mtavruli code points. Chrome
   resolves text-transform: uppercase on Mtavruli by mapping it BACK DOWN to
   Mkhedruli, so every box that uppercases its whole self must exempt it. */
.l { display: none; }
html[data-lang="en"] .l.en,
html[data-lang="ka"] .l.ka { display: inline; }
.l.ka,
.lt-opt[data-lang-opt="ka"] { text-transform: none; }

/* ---------- shared type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.85;
  text-wrap: balance;
}
.display .l.en { text-transform: uppercase; letter-spacing: -0.04em; }
.display .l.ka { letter-spacing: -0.005em; line-height: 0.92; }

.label {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.label .l.en { text-transform: uppercase; }

.lede {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  line-height: 1.35;
  font-weight: 400;
  text-wrap: pretty;
}

.muted { color: var(--muted); }

/* ---------- motion primitives ----------
   .rv          an element that reveals when it enters
   [data-scrub] an element JS gives --p (0→1) while it is in view
   Both are inert until JS adds .js, so the page is complete without it. */
.js .rv {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition:
    opacity var(--slow) var(--ease-out),
    transform var(--slow) var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}
.js .rv.is-in {
  opacity: 1;
  transform: none;
}

/* type that wipes up from behind a mask — the one reveal used on headlines */
.wipe { display: block; overflow: hidden; }
.wipe > span {
  display: block;
  transform: translate3d(0, 100%, 0);
  transition: transform var(--slow) var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}
.js .wipe.is-in > span,
html:not(.js) .wipe > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv,
  .js .rv.is-in { opacity: 1; transform: none; transition: none; }
  .wipe > span { transform: none !important; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- the drawings ----------
   Erekle's ink drawings are the studio's one uncopyable asset, so in v2 they
   are the visual system rather than a garnish: full-bleed, huge, and drawn on
   by the scroll itself. A single-fill mask takes its ink from the theme. */
.ink {
  display: block;
  background: var(--ink-colour, var(--text));
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
}
/* scrubbed: the wipe follows the scroll instead of a clock */
.js .ink[data-scrub] { clip-path: inset(0 calc(100% - (var(--p, 0) * 100%)) 0 0); }
html:not(.js) .ink[data-scrub] { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .js .ink[data-scrub] { clip-path: none; }
}

/* ---------- header ----------
   Laid out like the reference: nav split around a centred wordmark, with the
   switches and a filled call to action at the right edge. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--gutter);
  color: var(--text);
  pointer-events: none;
}
.site-header > *,
.header-panel > * { pointer-events: auto; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transition: opacity var(--medium) var(--ease);
}
/* Fully opaque, like the reference's solid bar with its rule. A translucent
   header turned to sludge over the inverted contact band, and the section
   heading underneath read straight through it. It stays transparent over the
   hero so that one reads full bleed. */
html.scrolled .site-header::before { opacity: 1; }

.header-panel { display: contents; }
/* the wordmark precedes the nav in the markup, and auto-placement will not
   backtrack to column 1 once column 2 is filled, so the row is pinned too */
.nav-left { grid-area: 1 / 1; }
.brand { grid-area: 1 / 2; }
.nav-right { grid-area: 1 / 3; }

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.06em;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: clamp(var(--s-3), 2.5vw, var(--s-5)); }
.nav-right { justify-content: flex-end; }
.site-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.site-nav a .l.en { text-transform: uppercase; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); }

.tools { display: flex; align-items: center; gap: var(--s-2); }
.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--s-2);
  background: none;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}
.tool .l.en { text-transform: uppercase; }
.tool svg { display: block; }

/* the filled action at the right edge, as the reference has it */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 var(--s-3);
  background: var(--primary-bg);
  color: var(--primary-fg);
  border: 1px solid var(--primary-bg);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.btn-cta .l.en { text-transform: uppercase; }
.btn-cta:hover {
  background: var(--primary-hover-bg);
  border-color: var(--primary-hover-bg);
  color: var(--primary-hover-fg);
}

/* ---------- sections ---------- */
.section { padding: clamp(var(--s-6), 10vh, var(--s-8)) var(--gutter); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  margin-bottom: clamp(var(--s-5), 6vh, var(--s-7));
  border-bottom: 1px solid var(--line-strong);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 0.9;
}
.section-head h2 .l.en { text-transform: uppercase; letter-spacing: -0.03em; }
.section-num { color: var(--kicker); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 0 var(--gutter) var(--s-5);
  overflow: clip;
}
.hero-inner {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 15vh;
  padding-bottom: clamp(var(--s-5), 6vh, var(--s-7));
}
.hero-eyebrow {
  color: var(--kicker);
  margin-bottom: clamp(var(--s-4), 4vh, var(--s-6));
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8.2vw, 8.5rem);
  line-height: 0.82;
  max-width: 14ch;
}
.hero h1 .l.en { text-transform: uppercase; letter-spacing: -0.05em; }
.hero h1 .l.ka { letter-spacing: -0.02em; line-height: 0.9; font-size: 0.86em; }

/* the signature: the drawing occupies the right of the hero and is drawn on
   by the scroll. It sits behind the type and bleeds off the top and right. */
/* The drawing is a grid item in the hero's first row rather than a free
   floating box, so its bottom edge IS the rule that closes the hero: no gap,
   and no detached fragment of the chin hanging above the line. */
.hero-art {
  grid-area: 1 / 1;
  justify-self: end;
  align-self: stretch;
  position: relative;
  width: min(42%, 38rem);
  margin-top: 11vh;
  z-index: -1;
  pointer-events: none;
}
.hero-art .ink {
  position: absolute;
  inset: 0;
  --art: url("../brand/art/bagari-art-the-look.svg");
  -webkit-mask-position: bottom right;
  mask-position: bottom right;
  opacity: 0.9;
}

.hero-foot {
  grid-area: 2 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
  color: var(--muted);
}
.hero-foot .label { color: var(--muted); }

.scroll-cue { display: inline-flex; align-items: center; gap: var(--s-2); }
.scroll-cue svg { animation: cue 2.4s var(--ease) infinite; }
@keyframes cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(0.3rem); opacity: 0.4; }
}

/* ---------- the marquee ----------
   A single strip of the studio's claims that leans with the scroll. The lean
   is the whole trick: it is the page acknowledging the reader's input. */
.marquee {
  overflow: clip;
  border-block: 1px solid var(--line-strong);
  padding-block: var(--s-4);
  transform: skewY(calc(var(--vel) * -0.6deg));
  transition: transform 240ms var(--ease-out);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--s-5);
  animation: slide 42s linear infinite;
  will-change: transform;
}
.marquee-item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.5vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.marquee-item .l.en { text-transform: uppercase; }
.marquee-item::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: var(--kicker);
  border-radius: 50%;
  flex: none;
}
@keyframes slide { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { transform: none; }
  .marquee-track { animation: none; }
}

/* ---------- statement ---------- */
.statement { max-width: 46ch; }
.statement p + p { margin-top: var(--s-4); }
.statement .display {
  font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  line-height: 1.02;
  margin-bottom: var(--s-5);
}

/* ---------- work ---------- */
.work-list { display: grid; gap: clamp(var(--s-5), 6vh, var(--s-7)); }

.work-item { position: relative; text-decoration: none; display: block; }
.work-figure {
  position: relative;
  overflow: clip;
  background: var(--line);
  aspect-ratio: 16 / 9;
}
.work-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06) translate3d(0, calc(var(--p, 0.5) * -3%), 0);
  transition: transform var(--medium) var(--ease-out);
}
.work-item:hover .work-figure img { transform: scale(1.02); }

/* the slot that stands in for a photograph until the art direction lands */
.slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 12px,
      color-mix(in srgb, var(--text) 6%, transparent) 12px 13px
    );
  border: 1px solid var(--line-strong);
  color: var(--muted);
  text-align: center;
  padding: var(--s-4);
}

.work-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-3);
  flex-wrap: wrap;
}
.work-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.work-title .l.en { text-transform: uppercase; }
.work-tags { color: var(--muted); }

/* the number is the point of the card: one measured result per project */
.work-result {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.work-result b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--mark);
}
.work-result span { color: var(--muted); max-width: 34ch; }

/* ---------- capabilities: the three levels, no prices ---------- */
.levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
}
.level {
  background: var(--surface);
  padding: clamp(var(--s-5), 5vh, var(--s-6)) clamp(var(--s-4), 4vw, var(--s-6));
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.level-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.level-name .l.en { text-transform: uppercase; }
.level[data-level="blueprint"] .level-name { color: var(--blue-lift); }
.level[data-level="redprint"] .level-name { color: var(--wine); }
.level[data-level="blackprint"] .level-name { color: var(--text); }
:root[data-theme="light"] .level[data-level="blueprint"] .level-name { color: var(--blue); }
.level-for { color: var(--muted); }
.level ul { display: grid; gap: var(--s-2); }
.level li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-2); }
.level li::before { content: "—"; color: var(--muted); }

/* ---------- studio ---------- */
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--s-5), 5vw, var(--s-7));
  align-items: start;
}
.studio-art { position: relative; }
.studio-art .ink {
  width: 100%;
  aspect-ratio: 4 / 5;
  --art: url("../brand/art/bagari-art-a-heart-in-my-hand.svg");
}
.studio-body p + p { margin-top: var(--s-4); }
.studio-body .display {
  font-size: clamp(1.5rem, 2.8vw, 2.5rem);
  line-height: 1.05;
  margin-bottom: var(--s-4);
}
figcaption { color: var(--muted); margin-top: var(--s-3); }

/* ---------- contact ---------- */
.contact {
  background: var(--band-bg);
  color: var(--band-fg);
  position: relative;
  overflow: clip;
}
.contact .section-head { border-color: var(--band-line); }
.contact .section-num { color: var(--band-kicker); }
.contact-art {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(50%, 40rem);
  pointer-events: none;
  opacity: 0.16;
}
.contact-art .ink {
  width: 100%;
  height: 100%;
  --art: url("../brand/art/bagari-art-trying-to-sleep.svg");
  --ink-colour: var(--band-fg);
  -webkit-mask-size: cover;
  mask-size: cover;
}
.contact > :not(.contact-art) { position: relative; z-index: 1; }
.contact h2.display {
  font-size: clamp(2.25rem, 7vw, 6rem);
  max-width: 16ch;
  margin-bottom: var(--s-5);
}
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3.25rem;
  padding: 0 var(--s-5);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  border: 1px solid transparent;
  transition:
    background var(--fast) var(--ease),
    color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}
.btn .l.en { text-transform: uppercase; }
/* Buttons take the surface roles, never a raw colour. Hardcoded to --wine the
   solid button was red on the red ground and disappeared entirely; the roles
   resolve to white on red, and to red on stone. */
.btn-solid {
  background: var(--primary-bg);
  border-color: var(--primary-bg);
  color: var(--primary-fg);
}
.btn-solid:hover {
  background: var(--primary-hover-bg);
  border-color: var(--primary-hover-bg);
  color: var(--primary-hover-fg);
}
.btn-ghost { border-color: currentColor; }
.btn-ghost:hover { background: var(--text); color: var(--surface); }
/* inside the inverted band the roles are the band's */
.contact .btn-solid {
  background: var(--wine);
  border-color: var(--wine);
  color: #FFFFFF;
}
.contact .btn-solid:hover { background: var(--wine-hover); border-color: var(--wine-hover); }
.contact .btn-ghost:hover { background: var(--band-fg); color: var(--band-bg); }

/* ---------- plates ----------
   Taken from Hermes Agent: their identity is antique engravings duotoned into
   one saturated colour and screened with a dither. They had to license the
   engravings. Erekle draws them, and hand-hatched ink already carries the
   texture their dither manufactures, so the drawings go onto a flooded brand
   ground and are left flat. No screen: a dither over a flat colour is noise,
   and the hatching already is the texture.

   This is why the work cards need no photography to stop looking unfinished. */
.plate {
  position: relative;
  overflow: clip;
  aspect-ratio: 3 / 2;
  background: var(--plate-bg);
  --plate-bg: var(--blackprint);
  --plate-fg: var(--stone);
}
.plate .ink {
  position: absolute;
  inset: clamp(var(--s-3), 3vw, var(--s-5));
  --ink-colour: var(--plate-fg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.plate-blue { --plate-bg: var(--blueprint); }
.plate-ink { --plate-bg: var(--ink); }
.plate-black { --plate-bg: var(--blackprint); }
.plate-square { aspect-ratio: 1; }

/* technical labels: mono for the Latin-only tics. Georgian has no mono cut in
   the family, so anything bilingual stays in Futura and only the numbers and
   markers take the machine voice. */
.tic {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--kicker);
}

/* the footer wordmark, set enormous and barely there */
.footer-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 17vw, 16rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--text);
  opacity: 0.06;
  text-align: center;
  user-select: none;
  margin-bottom: calc(-0.12em - var(--s-3));
  pointer-events: none;
}

/* ---------- case study ---------- */
.case-head { padding-top: clamp(7rem, 16vh, 11rem); }
.case-back { text-decoration: none; }
.case-back:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.case-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin: clamp(var(--s-4), 4vh, var(--s-6)) 0 var(--s-4);
}

/* the facts a procurement reader scans for, before any prose */
.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--s-4);
  margin-top: clamp(var(--s-5), 6vh, var(--s-6));
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-strong);
}
.case-meta dt { margin-bottom: var(--s-2); color: var(--muted); }
.case-meta dd { margin: 0; }
.case-meta a { text-underline-offset: 0.25em; }

.case-plate {
  aspect-ratio: 21 / 9;
  margin-block: clamp(var(--s-5), 7vh, var(--s-7));
}

.case-body { padding-top: 0; }
.case-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  padding-bottom: var(--s-3);
  margin-bottom: clamp(var(--s-4), 4vh, var(--s-5));
  border-bottom: 1px solid var(--line-strong);
}
.case-h .l.en { text-transform: uppercase; }

.case-prose { max-width: 60ch; margin-bottom: clamp(var(--s-6), 9vh, var(--s-7)); }
.case-prose p + p { margin-top: var(--s-4); }

.case-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(var(--s-4), 4vw, var(--s-6));
  margin-bottom: clamp(var(--s-6), 9vh, var(--s-7));
}
.case-steps li { display: grid; gap: var(--s-3); align-content: start; }
.case-steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.case-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 720px) {
  .case-plate { aspect-ratio: 3 / 2; }
}

/* ---------- footer ----------
   The reference's shape: the wordmark set enormous and nearly invisible
   behind, the studio's line and address at the left, link columns beside it,
   and a base row carrying the legal line. */
.site-footer {
  position: relative;
  overflow: clip;
  padding: clamp(var(--s-6), 9vh, var(--s-8)) var(--gutter) var(--s-4);
  border-top: 1px solid var(--line);
}
.footer-mark {
  position: absolute;
  left: 50%;
  bottom: -0.16em;
  transform: translateX(-50%);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 18vw, 17rem);
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: var(--text);
  opacity: 0.09;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.site-footer > :not(.footer-mark) { position: relative; z-index: 1; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 3fr));
  gap: clamp(var(--s-4), 4vw, var(--s-6));
  padding-bottom: clamp(var(--s-5), 7vh, var(--s-7));
}
.footer-brand { display: grid; gap: var(--s-3); align-content: start; }
.footer-brand .brand { text-align: left; font-size: 1.5rem; }
.footer-brand p { max-width: 26ch; }
.footer-brand a[href^="mailto:"] { overflow-wrap: anywhere; }
.footer-col { display: grid; gap: var(--s-2); align-content: start; }
.footer-col h3 { margin-bottom: var(--s-1); }
.footer-col a { text-decoration: none; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.site-footer .heart {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  fill: currentColor;
}

/* ---------- back to top ---------- */
.to-top {
  position: fixed;
  right: var(--margin);
  bottom: var(--margin);
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--text);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
html.show-top .to-top { display: inline-flex; }
.to-top:hover { background: var(--text); color: var(--surface); }
.to-top svg { display: block; }

/* ---------- phone ---------- */
.menu-toggle { display: none; }
.menu-close-icon { display: none; }

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

/* the Georgian call to action is long enough to burst the header row before
   the phone layout takes over; the Contact link already covers it */
@media (max-width: 1024px) {
  .btn-cta { display: none; }
}

@media (max-width: 900px) {
  .levels { grid-template-columns: 1fr; }
  .studio-grid { grid-template-columns: 1fr; }
  .hero-art { width: 52%; margin-top: 9vh; opacity: 0.75; }
}

@media (max-width: 720px) {
  .site-header {
    display: flex;
    justify-content: space-between;
    padding: var(--s-3) var(--margin);
  }
  .brand { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .menu-toggle {
    order: 2;
    /* the panel is fixed and comes later in the header, so without this it
       paints over the very button that closes it */
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid currentColor;
    border-radius: 0;
    cursor: pointer;
  }
  .menu-open-icon { display: block; }
  html.menu-open .menu-open-icon { display: none; }
  html.menu-open .menu-close-icon { display: block; }

  .header-panel {
    display: flex;
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-5);
    padding: var(--s-8) var(--margin) var(--s-6);
    background: var(--surface);
    color: var(--text);
    mix-blend-mode: normal;
  }
  html.menu-open .header-panel { display: flex; }
  .site-nav { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .site-nav a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 11vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1;
  }
  .site-nav a::after { display: none; }
  .tools { gap: var(--s-3); margin-top: var(--s-4); }

  .hero { min-height: 88svh; }
  .hero-inner { padding-top: 16vh; }
  /* on a phone the copy sits between the drawing and the rule, so there is
     no edge to meet: the drawing stays at the top instead of stretching
     down over the headline */
  .hero-art {
    align-self: start;
    width: 66%;
    height: 34vh;
    margin-top: 5vh;
    opacity: 0.6;
  }
  .hero-art .ink {
    -webkit-mask-position: top right;
    mask-position: top right;
  }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .section-head { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .btn { width: 100%; }
}