/* ==========================================================================
   TrendMarket — Hero
   Desktop layout is drawn on a 1536px canvas; --u scales it down linearly
   on smaller desktop screens. Phones, portrait tablets and windows under 1024px get the stacked layout.
   ========================================================================== */

/* One family, two weights, as in the logo: Montserrat Light (300) and Montserrat Black (900).
   A single self-hosted variable file (Latin subset: ë, ç, €), declared once per weight so the
   page can never render any other weight. Headings are Black with their red accents in Light. */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* palette: paper, ink, one crimson. --red is the logo's red (#B01031) and is used for
     everything on light grounds; --red-bright (below) is the same hue lifted for text on
     black, where the logo red would fall under 4.5:1. */
  --bg: #f6f3ed;
  --ink: #101010;
  --ink-soft: #3a3836;
  --muted: #6f6a64;                      /* small text on paper: 4.8:1 */
  --red: #b01031;
  --red-dark: #8c0c27;
  --black: #101010;

  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --serif-text: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --didone: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --mono: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --u: min(1px, 100vw / 1536);
  --canvas: calc(1536 * var(--u));
}

/* The unit is taken from the page's usable width, not 100vw: 100vw includes a
   classic (Windows) scrollbar, which pushed every 100vw-based box ~8px right of
   the fixed header. html is the size container, so 100cqw on body = the width
   left of the scrollbar; registering --u makes it compute to px on body, so
   descendants (even inside other containers) inherit a plain length. */
@property --u { syntax: "<length>"; inherits: true; initial-value: 1px; }
html { container-type: inline-size; scrollbar-gutter: stable; }   /* opening the menu (overflow: hidden) no longer reflows the page */
/* Up to 1536px the composition scales down with the width. On large monitors (wider than
   1536px and taller than 900px) it scales up with them, capped at 1.35x, instead of floating
   in empty margins. */
body {
  --u: min(1.35px, 100cqw / 1536, max(1px, 100vh / 900));
  --canvas: calc(1536 * var(--u));
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }
html { touch-action: manipulation; }   /* no double-tap zoom on phones: a quick second tap on a control is a tap */
/* touch screens: no pinch zoom either, only scrolling (iOS also gets the viewport and gesture
   lock in each page's <head> script) */
@media (hover: none) and (pointer: coarse) { html { touch-action: pan-x pan-y; } }
/* the home page ends on the dark footer: what shows past the page's edges (Safari's bars
   sliding, the bounce at the bottom) is dark too, never a line of paper */
html[data-has-intro] { background: var(--black); }

body {
  background:
    radial-gradient(120% 80% at 30% 20%, #fbf9f5 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* clip, not hidden: html is a size container, which stops body's overflow from
     passing to the viewport, and "hidden" would then make body the scroller and
     break every position: sticky (the intro pin, the services preview) */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
html { font-synthesis: none; font-weight: 300; }   /* Light is the default; Black is chosen per element */
em { font-style: normal; font-weight: 300; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Shared bits ---------- */

.arrow {
  position: relative;
  display: inline-block;
  width: calc(15 * var(--u));
  height: calc(2 * var(--u));
  background: currentColor;
  border-radius: 2px;
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-top: calc(2 * var(--u)) solid currentColor;
  border-right: calc(2 * var(--u)) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(24 * var(--u));
  border-radius: 999px;
  font-size: calc(14 * var(--u));
  font-weight: 300;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn .arrow { transition: transform .25s ease; }

/* Directional fill: a disc of the hover colour grows from the point where the pointer
   entered (--fx / --fy, set in main.js; centre for keyboard focus) and shrinks back toward
   where it left. Background and label stay put, so nothing reflows. */
/* every fill button names its hover ink explicitly: a fallback of currentColor would resolve
   to the parent's colour (ink on the hero) and the label would vanish into the ink fill */
.btn--fill { --fill-ink: #fff; position: relative; isolation: isolate; overflow: hidden; }
.btn--fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--fill, var(--ink));
  clip-path: circle(0 at var(--fx, 50%) var(--fy, 50%));
  transition: clip-path .55s cubic-bezier(.65, 0, .25, 1);
}
.btn--fill:focus-visible::before { clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); }
@media (hover: hover) { .btn--fill:hover::before { clip-path: circle(150% at var(--fx, 50%) var(--fy, 50%)); } }
.btn--fill:focus-visible { transform: none; color: var(--fill-ink); }
@media (hover: hover) { .btn--fill:hover { transform: none; color: var(--fill-ink); } }
.btn--fill { transition: color .35s ease .05s; }
.btn--red.btn--fill { --fill: var(--ink); }
.btn--dark.btn--fill { --fill: var(--red); }
.site-header.is-dark .btn--dark.btn--fill { --fill: var(--red); --fill-ink: #fff; }
.menu .btn--red.btn--fill { --fill: #fbf8f1; --fill-ink: var(--ink); }

.btn--dark { background: var(--ink); color: #fff; }
@media (hover: hover) { .btn--dark:hover { background: #222; } }

.btn--red { background: var(--red); color: #fff; }
@media (hover: hover) { .btn--red:not(.btn--fill):hover { background: var(--red-dark); } }

.btn--lg {
  height: calc(52 * var(--u));
  padding: 0 calc(34 * var(--u));
  font-size: calc(15 * var(--u));
}


/* ---------- Header ---------- */

.site-header {
  --hdr-fg: var(--ink);
  --hdr-bg: var(--bg);
  --hdr-line: rgba(16, 16, 16, .1);
  --pill-bg: rgba(16, 16, 16, .035);
  --pill-ink: var(--ink);
  --pill-on: #fbf8f1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* nav sits on the page's centre line */
  align-items: center;
  height: var(--header-h);
  padding-inline: calc((100% - var(--canvas)) / 2 + var(--hero-gutter));
  color: var(--hdr-fg);
  transition: transform .5s var(--ease-out), height .35s var(--ease-out), background-color .35s ease, color .35s ease, opacity .3s ease;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity .35s ease;
}
.site-header.is-compact { height: var(--header-compact); background-color: var(--hdr-bg); }
.site-header.is-compact::after { opacity: .1; }
.site-header.is-compact .logo__svg { height: calc(var(--header-compact) - 16px); }
.site-header.is-hidden { transform: translateY(-105%); }
.site-header.is-dark {
  --hdr-fg: #fbf8f1; --hdr-bg: var(--black); --hdr-line: rgba(251, 248, 241, .14);
  --pill-bg: rgba(251, 248, 241, .05); --pill-ink: #fbf8f1; --pill-on: var(--ink);
}
.site-header.is-dark .btn--dark { background: #fbf8f1; color: var(--ink); }
.site-header .logo { color: inherit; }
.site-header .logo__svg { transition: height .35s var(--ease-out); }

/* reading progress: a crimson hairline along the bottom edge of the compact bar */
.site-header__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  height: 2px;
  background: var(--red);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity .35s ease;
}
.site-header.is-compact .site-header__progress { opacity: 1; }

/* Text roll: the label slides up and an identical copy slides in from below. */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; }
.roll > span { display: block; transition: transform .55s cubic-bezier(.7, 0, .2, 1); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
a:focus-visible > .roll > span { transform: translateY(-100%); }
@media (hover: hover) { a:hover > .roll > span { transform: translateY(-100%); } }

/* Centre nav: one capsule; a pill slides to the hovered link, a crimson dot marks the
   section in view. The pill sits over the links and carries its own copy of the labels in
   the inverse colour, held still while the pill moves (main.js), so wherever it passes the
   text reads light on dark, also mid-slide. */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(5 * var(--u));
  border: 1px solid var(--hdr-line);
  border-radius: 999px;
  background: var(--pill-bg);
  font-size: max(13px, calc(14 * var(--u)));
  font-weight: 300;
  letter-spacing: -0.005em;
  transition: background-color .35s ease, border-color .35s ease;
  --pill-move: .38s cubic-bezier(.22, .8, .24, 1);     /* quick off the mark, so the pill keeps up with the pointer */
}
.nav a, .nav__ink > span {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(17 * var(--u));
  border-radius: 999px;
  transition: color .35s ease;
}
/* section in view: a crimson dot ahead of the label */
.nav a::before, .nav__ink > span::before {
  content: "";
  width: 5px; height: 5px;
  margin-left: -12px;
  border-radius: 50%;
  background: var(--red-bright);
  transform: scale(0);
  transition: transform .4s var(--ease-out), margin .4s var(--ease-out);
}
.nav a[aria-current]::before, .nav__ink > span[data-current]::before { transform: none; margin-left: 0; }
.nav__pill {
  position: absolute;
  z-index: 2;
  left: 0; top: calc(5 * var(--u));
  overflow: hidden;
  width: var(--pill-w, 0px);
  height: calc(36 * var(--u));
  border-radius: 999px;
  background: var(--pill-ink);
  transform: translateX(var(--pill-x, 0px));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--pill-move), width var(--pill-move), opacity .25s ease, background-color .35s ease;
}
.nav.is-hovering .nav__pill { opacity: 1; }
/* the labels inside the pill: laid out like the links, shifted back by the pill's own
   offset with the same timing, so they stay exactly over the links underneath */
.nav__ink {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  height: 100%;
  padding-left: calc(5 * var(--u));          /* = the nav's padding: the first link's offset */
  color: var(--pill-on);
  white-space: nowrap;
  transform: translateX(calc(-1 * var(--pill-x, 0px)));
  opacity: 0;
  transition: transform var(--pill-move), color .35s ease, opacity .1s ease;
}
.nav__ink > span { flex: none; height: 100%; }
/* in at once with the pill; out before the pill fades, so its light copy and the label
   underneath never show together (a smudged double word on fractional-scale screens) */
.nav.is-hovering .nav__ink { opacity: 1; transition: transform var(--pill-move), color .35s ease, opacity 0s; }

.header-actions {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  justify-self: end;
  grid-column: 3;                        /* stays right even when the nav is hidden */
}
.site-header .logo { justify-self: start; grid-column: 1; }

/* local time in Tirana with a live dot */
@keyframes pulse-ring { 0% { transform: scale(.4); opacity: .9; } 80%, 100% { transform: scale(1.5); opacity: 0; } }

/* header CTA: rolling label, the arrow exits right and re-enters from the left */
.btn--roll { overflow: hidden; }
.btn--roll .arrow { transition: none; }
@media (hover: hover) { .btn--roll:hover .arrow { transform: none; animation: arrow-loop .6s cubic-bezier(.7, 0, .2, 1); } }
@keyframes arrow-loop { 45% { transform: translateX(80%); opacity: 0; } 46% { transform: translateX(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (hover: hover) { .btn--roll:hover { transform: none; } }

/* menu button: two bars that slide past each other on hover */
.menu-btn {
  position: relative;
  display: grid;
  place-content: center;
  gap: calc(5 * var(--u));
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  min-width: 44px; min-height: 44px;     /* = the menu's close button, so the two swap in place */
  border: 1px solid var(--hdr-line);
  border-radius: 50%;
  background: var(--pill-bg);
  transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.menu-btn span { display: block; width: calc(16 * var(--u)); min-width: 14px; height: 1.5px; background: currentColor; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
@media (hover: hover) {
  .menu-btn:hover { background: var(--pill-ink); border-color: var(--pill-ink); color: var(--pill-on); }
  .menu-btn:hover span:first-child { transform: translateX(-3px); }
  .menu-btn:hover span:last-child { transform: translateX(3px); }
}

/* content starts below the fixed header */
.intro__pin, .case-page main { padding-top: var(--header-h); }

/* Brand lockup (assets/img/brand): stacked M + TRENDMARKET wordmark, used via the #tm-logo symbol.
   The mark and dot keep the brand red; the wordmark follows currentColor. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { display: inline-flex; color: var(--ink); }
.logo__svg { display: block; height: calc(66 * var(--u)); width: auto; aspect-ratio: 940 / 590; }

/* ---------- Hero ---------- */

.hero {
  /* unit for the hero copy (and the rail row that mirrors it): the width-based unit,
     or smaller on short windows so the copy block (624u, top to stats) ends 48px
     above the fold */
  --u-copy: min(var(--u), (100vh - 85 * var(--u) - 48px) / 624);
  --hero-h: max(480px, calc(100vh - 85 * var(--u)));
  position: relative;
  width: var(--canvas);
  height: max(480px, calc(100vh - 85 * var(--u)));
  height: max(480px, calc(100svh - 85 * var(--u)));
  margin: 0 auto;
}

.hero__content {
  /* The copy block is 624u tall from its top padding to the stats' bottom. On short
     windows (e.g. 1540x680) shrink it so the stats end 48px above the fold; on normal
     windows the width-based unit is the smaller one and nothing changes. Gutters and the
     column width come from :root, so the grid stays put. */
  --u: var(--u-copy);
  position: relative;
  z-index: 3;
  padding: calc(60 * var(--u)) 0 0 var(--hero-gutter);
}


.hero__title {
  margin: calc(24 * var(--u)) 0 0;
  padding-bottom: calc(26 * var(--u));   /* clears the j / p / f descenders above the lead */
  font-family: var(--didone); font-weight: 900;
  font-optical-sizing: none;
  line-height: 1;
}
/* leading leaves room for ë marks and the j / f / p descenders */
/* The lockup mirrors the logo: a Black line over a Light line at the same size, set tight
   (the Light line hangs .02em further left: its N has a wider side bearing than the I). */
.hero__title-sans, .hero__title em {
  display: block;
  font-size: calc(80 * var(--u));
  line-height: 1.02;
  white-space: nowrap;
}
.hero__title-sans { margin-left: -0.045em; color: var(--ink); font-weight: 900; letter-spacing: -0.035em; }
.hero__title em { margin-left: -0.065em; color: var(--red); font-style: normal; font-weight: 300; letter-spacing: -0.03em; }

.hero__lead {
  max-width: 30em;
  margin: calc(20 * var(--u)) 0 0;
  font-size: max(15.5px, calc(18 * var(--u)));
  line-height: 1.55;
  color: #3d3935;
}

.hero__ctas {
  display: flex;
  align-items: center;
  margin-top: calc(32 * var(--u));
}
/* primary CTA: the flat brand red; on hover ink floods in from where the pointer entered
   (.btn--fill), the label rolls and the arrow loops through */
.hero__ctas .btn--lg {
  gap: calc(16 * var(--u));
  height: max(52px, calc(58 * var(--u)));
  padding: 0 max(24px, calc(32 * var(--u)));
  font-size: max(15px, calc(16 * var(--u)));
}
.hero__ctas .btn--lg .arrow { width: calc(22 * var(--u)); min-width: 16px; }

/* hairline + crimson dot leading from the CTA to the play button */

/* play: a soft porcelain disc inside a thin crimson ring */

/* Stats: four equal columns split by hairlines, a display-serif figure over a
   two-line mono caption that echoes the eyebrow. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  width: max(var(--hero-col), 440px);
  margin-top: calc(44 * var(--u));
}
.stats li {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding: calc(2 * var(--u)) max(14px, calc(22 * var(--u))) calc(2 * var(--u)) max(14px, calc(20 * var(--u)));
  border-left: 1px solid #d9d3c9;
}
.stats li:first-child { padding-left: 0; border-left: 0; }
.stats strong {
  display: flex;
  align-items: flex-start;
  font-family: var(--didone);
  font-size: max(28px, calc(44 * var(--u)));
  font-weight: 900;
  line-height: .9;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stats strong b { font-weight: inherit; text-align: right; }
.stats strong i {
  margin: .06em 0 0 .06em;
  font-family: var(--sans);
  font-style: normal;
  font-size: .42em;
  font-weight: 300;
  line-height: 1;
  color: var(--red);
}
.stats__since strong { color: var(--red); }
.stats span::before {
  content: "";
  display: block;
  width: calc(22 * var(--u));
  height: 1px;
  margin: 0 0 calc(12 * var(--u));
  background: #cdc5ba;
}
.stats span {
  font-family: var(--mono); font-weight: 900;
  font-size: max(10.5px, calc(11 * var(--u)));
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .12em;
  white-space: nowrap;           /* two lines, broken only where the <br> is: the column widens to fit */
  color: var(--muted);
}

/* short desktop windows: drop the secondary reel row so the hero never overflows */

.hero__visual {
  position: absolute;
  z-index: 2;
  bottom: var(--hero-lift);
  right: var(--hero-gutter);             /* the M's right stem lands on the right gutter */
  /* As big as possible (790u), within two limits:
     - its top (M box = 0.848 x width tall) clears the eyebrow/rail row (≈100u);
     - its left foot (M box = 1.166 x width wide; foot top 0.175 x width above the
       bottom) either starts right of the text column, or sits below the stats. */
  width: min(
    calc(790 * var(--u)),
    calc((var(--hero-h) - 100 * var(--u) - var(--hero-lift)) / 0.848),
    max(
      calc((var(--canvas) - 2 * var(--hero-gutter) - var(--hero-col) - 24 * var(--u)) / 1.166),
      calc((var(--hero-h) - 624 * var(--u-copy) - 16px - var(--hero-lift)) / 0.175)
    )
  );
  height: auto;
  aspect-ratio: 790 / 706;
  margin: 0;
}
/* Two independent layers inside the M's original footprint (box = 1219 x 1090 artwork px).
   The girl's box comes from fitting her face to the previous composite, bottom-anchored. */
.hero__m {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: 116.6%;   /* 95% of the box height at the artwork's 815:593 ratio */
  aspect-ratio: 815 / 593;
  transform-origin: 0 0;
}
.hero__m img, .hero__girl img { display: block; width: 100%; height: 100%; }
.hero__m picture { display: block; width: 100%; height: 100%; }
/* solid white M the photo turns into on black (clip-path set from the M outline in JS) */
.hero__m-white {
  position: absolute;
  inset: 0;
  background: #fff;   /* = .stage__frame: the M opens seamlessly onto the white screen */
  opacity: 0;
  pointer-events: none;
}
/* the girl keeps her size but stays planted on the hero's bottom edge, so she steps
   out in front of the raised M instead of ending in mid-air */
.hero__girl {
  position: absolute;
  z-index: 2;
  left: 30.3%;
  bottom: calc(-1 * var(--hero-lift));
  width: 80.7%;
  height: 89.9%;
  container-type: inline-size;           /* the script below scales with her */
}
.hero__girl img { object-fit: contain; object-position: 50% 100%; }
/* the cut-out's arm runs off the artwork's right edge */
.hero__girl picture { display: block; height: 100%; }
/* past 1536px the canvas stops growing, so her edge no longer reaches the viewport edge */
@media (min-width: 1540px) {
  .hero__girl picture {
    -webkit-mask-image: linear-gradient(90deg, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 93%, transparent 100%);
  }
}

.hero__script {
  position: absolute;
  left: 58%;
  top: 62%;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 4.1cqi;                     /* 26px at full size (girl 637px wide) */
  line-height: 1.02;
  color: #f3efe9;
  transform: rotate(-24deg);
  transform-origin: left top;
  pointer-events: none;
}
.hero__script span:nth-child(2) { padding-left: .9em; }
.hero__script span:nth-child(3) { padding-left: 1em; }
.hero__script svg {
  position: absolute;
  left: -2.06em;
  top: 1.83em;
  width: 5em;
  height: 2.5em;
  color: #f3efe9;
  transform: rotate(24deg);
}

/* ---------- Load-in motion ---------- */

/* One hierarchy, ~1.2s in all, usable from the first frame: the artwork settles, the two
   headline lines rise out of their own baselines one after the other, then the lead, the
   CTA and the stats follow. The M and the girl never start invisible (they are the LCP). */
@media (prefers-reduced-motion: no-preference) {
  .hero__title-sans, .hero__title em { animation: line-up 1s cubic-bezier(.2, .8, .2, 1) both; }
  .hero__title em { animation-delay: .12s; }
  .hero__lead, .hero__ctas, .stats { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__lead { animation-delay: .32s; }
  .hero__ctas { animation-delay: .42s; }
  .stats { animation-delay: .52s; }
  .hero__m { animation: reveal 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__girl { animation: settle 1.2s .06s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes line-up { from { clip-path: inset(0 0 100% 0); transform: translateY(.5em); } to { clip-path: inset(-.1em -.2em -.25em -.2em); transform: none; } }
@keyframes settle { from { transform: translateY(14px); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes reveal { from { transform: scale(1.035); } }

/* ---------- Tablet / mobile: stacked layout ---------- */

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  :root, body { --u: 1px; --canvas: 100%; }

  .site-header { padding: 0 20px; }
  .logo__svg { height: 46px; }
  .nav, .header-actions .btn { display: none; }

  .hero { height: auto; padding-bottom: 32px; }
  .hero__content { --u: 1px; padding: 24px 20px 0; }
  .hero__title { margin-top: 20px; padding-bottom: 10px; }
  .hero__title-sans { font-size: clamp(36px, 12.4vw, 100px); }
  .hero__title em { font-size: clamp(36px, 12.4vw, 100px); }
  .hero__lead { font-size: 16px; line-height: 1.5; margin-top: 18px; }
  .hero__lead br { display: none; }
  .hero__ctas { flex-wrap: wrap; gap: 20px; }
  .stats { width: 100%; grid-template-columns: repeat(2, 1fr); row-gap: 24px; margin-top: 32px; }
  .stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stats strong { font-size: 32px; }
  .stats span { font-size: 10.5px; }
  @media (min-width: 600px) {
    .stats { grid-template-columns: repeat(4, max-content); }
    .stats li { padding-right: 32px; }
    .stats li:nth-child(odd):not(:first-child) { padding-left: 20px; border-left: 1px solid #d9d3c9; }
  }

  .hero__visual {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    width: calc(100% - 40px);
    height: auto;
    aspect-ratio: 1219 / 1090;
    margin: 32px 20px 0;
  }
  .hero__m { width: 100%; }
  .hero__visual { --hero-lift: 0px; }
  .hero__script { left: 56%; top: 60%; }
  .hero__script svg { display: none; }
}


/* ==========================================================================
   Below the hero — editorial system
   One 12-column grid, one type scale, one section rhythm.
   ========================================================================== */

:root, body {
  /* hero grid: one gutter on both sides (shared with the header), one text column */
  --hero-gutter: calc(84 * var(--u));
  --hero-col: calc(500 * var(--u));
  --hero-lift: 0px;                      /* raise the M off the bottom edge (0 = sits on it) */
  --section-y: calc(176 * var(--u));
  --gutter: calc(24 * var(--u));
  --fs-body: max(15px, calc(17 * var(--u)));
  --fs-small: max(13.5px, calc(14.5 * var(--u)));
  --fs-label: max(11.5px, calc(12 * var(--u)));     /* uppercase Black labels never go below 11.5px */
  --btn-h: max(48px, calc(56 * var(--u)));
  --hair: #d9d3c9;
  --hair-dark: #2a2523;
  --red-bright: #ef2b4f;                 /* the crimson lifted for text on black: 4.65:1 on #101010 */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --header-h: calc(85 * var(--u));
  --header-compact: max(58px, calc(66 * var(--u)));
}

.container {
  width: var(--canvas);
  margin: 0 auto;
  padding-inline: calc(84 * var(--u));
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.skip-link {
  position: fixed;
  left: 16px;
  top: -64px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  transition: top .25s var(--ease-out);
}
.skip-link:focus { top: 16px; }
main:focus { outline: none; }
.stage :focus-visible, .work :focus-visible, .contact :focus-visible, .footer :focus-visible { outline-color: #fff; }

.arrow--left { transform: rotate(180deg); }

/* ---------- Type ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--ink-soft);
}
.kicker i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.kicker--light { color: #d9d4ce; }
.kicker--light i { background: var(--red-bright); }

.h-serif {
  margin: calc(30 * var(--u)) 0 0;
  font-family: var(--serif-text);
  font-weight: 900;
  font-size: calc(64 * var(--u));
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.body {
  margin: 0;
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #4a4643;
}
.body--light { color: #bdb7b0; }

/* ---------- Controls ---------- */

.btn--outline {
  height: var(--btn-h);
  padding: 0 calc(30 * var(--u));
  gap: calc(22 * var(--u));
  border: 1px solid var(--ink);
  font-size: max(13px, calc(14.5 * var(--u)));
  font-weight: 300;
}
@media (hover: hover) { .btn--outline:hover { background: var(--ink); color: var(--bg); transform: none; } }
.btn--outline-light { border-color: rgba(255, 255, 255, .6); color: #fff; }
@media (hover: hover) { .btn--outline-light:hover { background: #fff; color: var(--black); } }


/* ---------- Showreel: signature M transition ---------- */

.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--black);
  color: #fff;
}
.stage__dark { display: none; }
/* frame 01: a plain white screen */
.stage__frame { position: absolute; inset: 0; background: #fff; opacity: var(--frame-op, 1); will-change: clip-path; }
/* The wordmark on the white (frame 02 wipes over it). Scrubbed from main.js once the white
   fills the screen: TREND, then MARKET rise from below the baseline (the svg's own edge is the
   mask), then the red dot lands with a small overshoot. --la / --lb / --ld run 0 → 1. */
.stage__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, calc(860 * var(--u)));
  height: auto;
  aspect-ratio: 931 / 84;
  overflow: hidden;
  color: var(--black);
  transform: translate(-50%, -50%);
}
.stage__logo-a, .stage__logo-b { transform-box: view-box; }
.stage__logo-a { transform: translateY(calc((1 - var(--la, 1)) * 84px)); }
.stage__logo-b { transform: translateY(calc((1 - var(--lb, 1)) * 84px)); }
.stage__logo-dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(var(--ld, 1));
}

/* ---------- Intro: hero + showreel as one pinned, scroll-scrubbed shot ----------
   JS adds .intro-on to <html> (motion allowed) and drives the custom properties.
   Layers inside the pin (one stacking context):
     1 hero copy · 2 rising dark · 3 showreel frame (M mask) · 4 the hero M · 5 showreel copy */

.intro-on .site-header:not(.is-compact) {
  opacity: var(--head-op, 1);
  visibility: var(--head-vis, visible);
}
.intro-on .intro { position: relative; }
/* scroll room for the pinned shot (inside the content box, so the sticky pin can use it) */
.intro-on .intro::after { content: ""; display: block; height: 274vh; height: 274svh; }   /* = main.js len() (desktop) */
.intro-on .intro__pin {
  /* p = 0 state, so first paint (before main.js) already matches the timeline */
  --frame-op: 0;
  --content: 0;
  --dark-y: 100%;
  position: sticky;
  top: min(0px, calc(100vh - var(--pin-h, 100vh)));
  top: min(0px, calc(100svh - var(--pin-h, 100svh)));
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
.intro-on .hero__content {
  z-index: 1;
  opacity: var(--hero-op, 1);
  transform: translateY(var(--hero-y, 0px));
}
/* the visual must not form a stacking context: the M rises above the dark (z 4),
   the girl stays on top (z 5) and is clipped by the rising dark from JS */
.intro-on .hero__visual { z-index: auto; }
.intro-on .hero__m { z-index: 4; will-change: transform, opacity; }
.intro-on .hero__girl { z-index: 5; }
.intro-on .stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 0;
  background: transparent;
  pointer-events: none;
}
.intro-on .stage__dark {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--black);
  transform: translateY(var(--dark-y, 100%));
  will-change: transform;
}
.intro-on .stage__frame { z-index: 3; }
.intro-on .stage__bar { z-index: 7; }
/* Frame 02 copy: sits between the eyes; lines rise in once the wipe has passed */
.stage__eyes { display: none; }
.intro-on .stage__eyes {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 6vh;                       /* eye line of the footage sits a little above centre */
  text-align: center;
  color: #fbf8f1;
  pointer-events: none;
}
.stage__eyes::before {                       /* a soft dark core so the words read over skin */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 26% 38% at 50% 46%, rgba(10, 8, 8, .5), rgba(10, 8, 8, 0) 70%);
  opacity: 0;
  transition: opacity .8s ease;
}
.stage__eyes-title {
  margin: 0;
  font-family: var(--serif-text);
  font-size: clamp(34px, calc(62 * var(--u)), 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stage__eyes-title em { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; color: var(--red-bright); }
.stage__line { display: block; overflow: hidden; padding: .04em .06em .1em; margin: -.04em -.06em -.1em; }
.stage__line > span { display: block; transform: translateY(110%); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.stage__line + .stage__line > span { transition-delay: .08s; }
.stage__eyes-sub {
  margin: calc(22 * var(--u)) 0 0;
  max-width: 22em;
  font-size: max(16px, calc(18 * var(--u)));
  line-height: 1.45;
  color: rgba(251, 248, 241, .94);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease .18s, transform .8s var(--ease-out) .18s;
}
.stage__eyes.is-in .stage__eyes-sub { opacity: 1; transform: none; }
.stage__eyes-count {
  margin: calc(28 * var(--u)) 0 0;
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-label);
  letter-spacing: .28em;
  color: rgba(251, 248, 241, .8);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease .25s, transform .6s ease .25s;
}
.stage__eyes-count span { color: #fff; }
.stage__eyes.is-in::before { opacity: 1; }
.stage__eyes.is-in .stage__line > span { transform: none; }
.stage__eyes.is-in .stage__eyes-count { opacity: 1; transform: none; }
/* upright screens show one eye: the words move to the lower third */
@media (orientation: portrait) {
  .intro-on .stage__eyes { justify-content: flex-end; padding-bottom: 120px; }
  .stage__eyes::before { background: linear-gradient(0deg, rgba(10, 8, 8, .7), rgba(10, 8, 8, 0) 55%); }
}



/* ---------- Section label: "← (03)  SHËRBIMET TONA" ---------- */

.label {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(22 * var(--u));
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ink-soft);
}
.label__num { letter-spacing: .04em; }
.label::before {                          /* an arrow pointing at the label, drawn as one shape so it stays crisp */
  content: "";
  position: absolute;
  left: calc(-50 * var(--u));
  top: 50%;
  width: max(16px, calc(20 * var(--u)));
  height: 10px;
  margin-top: -5px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h17.4M14.2 1.2 18.4 5l-4.2 3.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h17.4M14.2 1.2 18.4 5l-4.2 3.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.label--light { color: #cfc9c2; }
.label--light::before { background: var(--red-bright); }

.h-serif--light { color: #f3efe9; }
.h-serif--strong { font-weight: 900; letter-spacing: -0.02em; }
.h-serif em { font-style: normal; font-weight: 300; color: var(--red); letter-spacing: -0.01em; }
.h-serif--light em { color: var(--red-bright); }


.circle-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: max(40px, calc(52 * var(--u)));
  height: max(40px, calc(52 * var(--u)));
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: #fff;
  transition: background .3s ease, border-color .3s ease, transform .5s var(--ease-out);
}
.circle-btn .arrow { width: 14px; }
.circle-btn .arrow::after { width: 7px; height: 7px; }
.circle-btn--lg { width: max(52px, calc(72 * var(--u))); height: max(52px, calc(72 * var(--u))); }
.circle-btn--lg .arrow { width: 18px; }
.circle-btn--sm { width: max(34px, calc(40 * var(--u))); height: max(34px, calc(40 * var(--u))); }
.circle-btn--sm .arrow { width: 12px; }
.circle-btn--sm .arrow::after { width: 6px; height: 6px; }

/* ---------- (02) Showreel timeline bar ----------
   Dark on frame 01's white; .is-light (from main.js) once the eyes cover the screen. */

.stage__bar {
  position: absolute;
  left: calc(84 * var(--u));
  right: calc(84 * var(--u));
  bottom: calc(44 * var(--u));
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: end;
  gap: calc(48 * var(--u));
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-label);
  color: #4a4441;
  opacity: var(--content, 1);
  pointer-events: none;
  transition: color .3s ease;
}
.stage__bar.is-light { color: #cfc9c2; }
.stage__timeline { grid-column: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(18 * var(--u)); padding-bottom: 4px; }
.stage__track { position: relative; height: 1px; background: rgba(16, 16, 16, .18); transition: background-color .3s ease; }
.stage__track span { position: absolute; inset: 0 auto 0 0; width: var(--progress, 34%); background: var(--black); transition: background-color .3s ease; }
.stage__bar.is-light .stage__track { background: rgba(255, 255, 255, .22); }
.stage__bar.is-light .stage__track span { background: #fff; }
.stage__tags { justify-self: end; margin: 0; padding: 0; list-style: none; text-transform: uppercase; letter-spacing: .2em; line-height: 1.7; }

/* ---------- (03) Services ----------
   An editorial index: numbered names on the left in Light (the active one in crimson, with
   a crimson rule under it), a large still on
   the right that bleeds to the screen edge, a big Light numeral on it, and the active
   service's tag and line underneath. Stills change by wiping up over the previous one,
   which stays in place until it is covered (main.js orders them), so nothing flickers. */

.services { --bleed: calc(84 * var(--u) + (100cqw - var(--canvas)) / 2); padding: calc(var(--section-y) * .5) 0 calc(var(--section-y) * .75); }
/* the title runs across on one line; under it, the intro and the list on the left and the
   still on the right, as tall as the two of them together. Nothing pins: the section
   scrolls like the rest of the page, and the row crossing the middle of the screen (or
   the hovered one) is the active service. */
.services__pin {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: var(--gutter);
}
.services__head, .services__index { display: contents; }
.services__head > :first-child { grid-column: 1 / -1; grid-row: 1; }
.services__head .h-serif { font-size: calc(58 * var(--u)); white-space: nowrap; }
.services__aside { grid-column: 1 / span 6; grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: calc(32 * var(--u)); margin-top: calc(48 * var(--u)); }
.services__aside .body { margin: 0; }
.svc-list { grid-column: 1 / span 6; grid-row: 3; align-self: end; margin: calc(44 * var(--u)) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: calc(64 * var(--u)) 1fr auto;
  align-items: center;
  padding: calc(18 * var(--u)) 0;
  border-bottom: 1px solid var(--hair);
}
/* the active row's rule: crimson draws across from the left */
.svc::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--ease-out);
}
.svc.is-active::after { transform: none; }
.svc__num {
  font-family: var(--mono);
  font-weight: 900;
  font-size: max(12.5px, calc(13 * var(--u)));
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition: color .35s ease;
}
.svc__name {
  justify-self: start;
  font-size: calc(38 * var(--u));
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color .35s ease;
}
.svc__desc {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.svc__arrow {
  width: calc(26 * var(--u));
  min-width: 18px;
  color: var(--red);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .35s ease, transform .5s var(--ease-out);
}
.svc__arrow::after { width: calc(9 * var(--u)); height: calc(9 * var(--u)); min-width: 7px; min-height: 7px; }
.svc.is-active .svc__name { color: var(--red); }
/* the active name steps in (transform only: the row never reflows) */
.svc__name { transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  .svc__name { transition: color .35s ease, transform .6s var(--ease-out); }
}
.svc.is-active .svc__num { color: var(--red); }
.svc.is-active .svc__arrow { opacity: 1; transform: none; }

/* the still: right columns, bleeding off the screen edge */
.svc-preview {
  grid-column: 8 / -1;
  grid-row: 2 / span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: calc(48 * var(--u)) calc(-1 * var(--bleed)) 0 0;
}
.svc-preview__media {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-height: calc(420 * var(--u));
  overflow: hidden;
  background: #1a1716;
}
/* resting: hidden below its own bottom edge. .is-active wipes up; .is-shown (just left)
   stays fully visible underneath until the new one has landed. */
.svc-preview__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.08);
  filter: brightness(1.04) contrast(.96) saturate(.88);
}
.svc-preview__media img.is-shown { clip-path: inset(0); transform: scale(1.02); }
.svc-preview__media img.is-active { clip-path: inset(0); transform: scale(1.02); }
@media (prefers-reduced-motion: no-preference) {
  .svc-preview__media img.is-active { transition: clip-path .85s cubic-bezier(.7, 0, .2, 1), transform 1.6s var(--ease-out); }
}
/* a shade along the bottom for the numeral and the caption that sit on the photo */
.svc-preview__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 8, 8, .46) 0%, rgba(10, 8, 8, 0) 22%),
    linear-gradient(0deg, rgba(10, 8, 8, .74) 0%, rgba(10, 8, 8, .3) 34%, rgba(10, 8, 8, 0) 58%);
}
.svc-preview__big {
  position: absolute;
  left: calc(26 * var(--u));
  bottom: calc(10 * var(--u));
  z-index: 999;
  display: grid;
  overflow: hidden;
  font-size: calc(170 * var(--u));
  font-weight: 300;
  line-height: .82;
  letter-spacing: -0.05em;
  color: #fbf8f1;
  font-variant-numeric: tabular-nums;
}
.svc-preview__big span { grid-area: 1 / 1; transform: translateY(102%); }
.svc-preview__big span.is-active { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .svc-preview__big span { transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
  .svc-preview__big span.is-active { transition: transform .8s cubic-bezier(.2, .8, .2, 1) .1s; }
}
/* on the photo: the progress through the six along the top edge, the tag + line of the
   active service beside the numeral (the still keeps the full height beside the list) */
.svc-preview { position: relative; }
.svc-preview figcaption {
  position: absolute;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: calc(28 * var(--u)) calc(var(--bleed) + 28 * var(--u)) calc(10 * var(--u)) calc(272 * var(--u));
  pointer-events: none;
  color: #fbf8f1;
}
.svc-preview figcaption .svc__count { grid-row: 1; justify-self: end; }
/* the caption box starts level with the top of the numeral and grows upwards only if it must */
.svc-preview figcaption .svc-preview__caps { grid-row: 2; align-self: end; align-content: start; min-height: calc(128 * var(--u)); }
.svc-preview__caps { display: grid; }
.svc-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); }
.svc-cap.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .svc-cap { transition: opacity .25s ease, transform .4s var(--ease-out); }
  .svc-cap.is-active { transition: opacity .5s ease .12s, transform .7s var(--ease-out) .12s; }
}
.svc-cap b {
  display: block;
  font-family: var(--mono);
  font-weight: 900;
  font-size: max(12.5px, calc(13 * var(--u)));
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #fbf8f1;
}
.svc-cap b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--red-bright); vertical-align: .1em; }
.svc-cap span { display: block; max-width: 22em; margin-top: 10px; font-size: max(15px, calc(18 * var(--u))); line-height: 1.45; color: #ece7e0; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.svc__count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-weight: 900;
  font-size: max(12.5px, calc(13 * var(--u)));
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(251, 248, 241, .78);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.svc__count b { font-weight: 900; color: #fff; }
.svc__count i { position: relative; width: calc(96 * var(--u)); min-width: 64px; height: 2px; margin-left: 10px; background: rgba(251, 248, 241, .3); }
.svc__count i::after { content: ""; position: absolute; inset: 0; background: var(--red-bright); transform: scaleX(var(--svc-q, .1667)); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) { .svc__count i::after { transition: transform .6s var(--ease-out); } }

/* ---------- (04) Portfolio ----------
   A bento gallery of the six projects (left) beside the section's copy (right). Three
   tiles show at a time, one tall beside two stacked, on rounded dark cards with one
   gutter between them. main.js moves them: a column folds away in place (its picture
   stays put, the frame closes over it) while the next opens or slides in, and the set
   then slides up to the first again. Each tile is clipped with clip-path inset(... round),
   so every cut edge keeps its rounded corners. Without JS (or with reduced motion, until
   a project is pointed at) the six sit in a still two-column grid. */

.work { background: var(--black); color: #fff; padding: calc(var(--section-y) * .5) 0; }
.work__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.work__copy { grid-column: 9 / span 4; }
.work__copy .h-serif { font-size: calc(54 * var(--u)); text-wrap: balance; }
.work__copy .body { text-wrap: pretty; max-width: 25em; margin-top: calc(24 * var(--u)); font-size: max(16px, calc(19 * var(--u))); line-height: 1.55; color: #b9b3ac; }
/* after looking at the work, the way to start one: the same quiet outline button as the process */
.work__cta { margin-top: calc(36 * var(--u)); }

/* the gallery: a still grid first */
.pf {
  grid-column: 1 / span 7;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(12px, calc(20 * var(--u)));
  border-radius: max(18px, calc(28 * var(--u)));     /* = the tiles' corners; main.js reads it */
}
.pf-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: max(18px, calc(28 * var(--u)));
  background: #1c1a19;
}
.pf-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .5s ease; }
.pf-tile__cap {
  position: absolute;
  left: calc(22 * var(--u));
  bottom: calc(20 * var(--u));
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: rgba(16, 16, 16, .72);
  font-weight: 900;
  font-size: max(13px, calc(14 * var(--u)));
  color: #fbf8f1;
  white-space: nowrap;
  transition: opacity .35s ease, transform .5s var(--ease-out);
}
.pf-tile__cap b { font-size: .85em; color: var(--red-bright); font-variant-numeric: tabular-nums; }
.pf-pause { display: none; }

/* live: the tiles are placed and clipped by main.js. The gallery keeps its columns' full
   width; a short window lowers its height instead of narrowing it (main.js lays the tiles
   out in proportion to whatever size it gets). */
.pf.is-live { display: block; overflow: hidden; width: 100%; aspect-ratio: 1.4; max-height: calc(100vh - var(--header-h) - 64px); }
.pf.is-live .pf-tile { position: absolute; aspect-ratio: auto; border-radius: 0; will-change: transform, clip-path; }
.pf.is-live .pf-tile.is-dim img { filter: brightness(.45) saturate(.7); }
@media (hover: hover) {
  .pf.is-live .pf-tile__cap { opacity: 0; transform: translateY(8px); }
  .pf.is-live .pf-tile:hover .pf-tile__cap, .pf.is-live .pf-tile.is-hot .pf-tile__cap { opacity: 1; transform: none; }
  .pf-tile:hover img { transform: scale(1.035); }
}
/* pause / play, in the gallery's top corner (shown on hover / focus; always on touch screens) */
.pf.is-live .pf-pause {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16, 16, 16, .7);
  color: #fbf8f1;
  opacity: 0;
  transition: opacity .3s ease, background-color .3s ease;
}
.pf.is-live .pf-pause:focus-visible, .pf.is-live .pf-pause[aria-pressed="true"] { opacity: 1; }
@media (hover: hover) { .pf.is-live:hover .pf-pause { opacity: 1; } }
@media (hover: none) { .pf.is-live .pf-pause { opacity: .9; } }
@media (hover: hover) { .pf-pause:hover { background: var(--red); } }
.pf-pause span { position: relative; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.pf-pause[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }

/* ---------- (05) About ---------- */

.about {
  --ab-h: max(360px, min(calc((100svh - 150px) * .97), 42vw));   /* the photo's height */
  --ab-w: min(calc(var(--ab-h) * 1.42), 52vw);                   /* …and width */
  position: relative;
  padding: 0 0 calc(72 * var(--u));   /* top: flush on the black portfolio panel; bottom: air under the diamond's tip */
}
/* ~44 / 56 copy-to-visual; the copy block is centred on the photo, so the red line
   sits level with the diamond's left point */
.about__grid {
  display: grid;
  min-height: var(--ab-h);
  grid-template-columns: 44fr 56fr;
  column-gap: calc(40 * var(--u));
  align-items: center;
}
.about__copy { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding-bottom: calc(12 * var(--u)); }
/* hierarchy: two calmer ink lines, the red italic keeps its scale and sits close under them */
.about__copy .h-serif--stack {
  margin-top: calc(24 * var(--u));
  font-size: calc(54 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.about__copy .h-serif--stack .line:last-child { margin-top: -0.04em; }
.about__copy .h-serif--stack em { font-size: 1.2em; line-height: 1.02; letter-spacing: -0.02em; }
.about__copy .body { max-width: 27em; margin-top: calc(54 * var(--u)); line-height: 1.62; }

/* the photo, cut into a tilted diamond whose top and right corners run off the box */
/* it bleeds off the right edge of the screen, independent of the content column */
.about__media {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--ab-w);
  height: var(--ab-h);
  margin: 0;
}
.about__shape {
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(30% 0, 100% 0, 100% 30%, 48% 100%, 0 46%);
}
/* the picture is a little taller than the diamond so the parallax never shows an edge */
.about__shape picture {
  display: block;
  width: 100%;
  height: calc(100% + 32px);
  margin-top: -16px;
  transform: translate3d(0, var(--ab-par, 0px), 0);
}
/* crop: a touch closer and nudged left so all three silhouettes and the M sit inside the
   diamond; the print is lifted (lighter, softer blacks) so the shadows keep detail */
.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  filter: brightness(1.1) contrast(.9);
}
.js-reveal .about__media[data-reveal-media] img,
.about__media img { transform: scale(1.1) translateX(-4.5%); }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .about__media[data-reveal-media] img { transform: scale(1.16) translateX(-4.5%); transition: transform 1.8s var(--ease-out); }
  .js-reveal .about__media[data-reveal-media].is-in img { transform: scale(1.1) translateX(-4.5%); }
}
/* the figure caption sits on the photo's bottom line, starting just right of the
   diamond's lowest point (48% across) */
.about__fig {
  position: absolute;
  top: calc(var(--ab-h) - 1.4em);
  left: calc(100% - var(--ab-w) * .52 + 28px);
  right: 16px;                                          /* clear of the screen edge */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  margin: 0;
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.4;
  color: var(--ink-soft);
}
.about__fig::before { content: ""; width: 22px; height: 1px; background: var(--red); }
.about__fig b { font-weight: 300; color: var(--ink); }

/* ---------- (06) Process ---------- */

.process { background: var(--black); color: #fff; padding: calc(var(--section-y) * .5) 0; }
/* the heading reads as one row above the steps: title on one line on the left,
   description and button on the right; the four images then run in one line
   across the full width */
.process__inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
.process__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: end;
}
.process__head > :first-child { grid-column: 1 / span 7; }
.process__head .h-serif { font-size: calc(54 * var(--u)); white-space: nowrap; }
.process__aside {
  grid-column: 8 / span 5;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(28 * var(--u));
  padding-bottom: calc(6 * var(--u));
}
.process__aside .body { margin: 0; }
.process__aside .btn { flex: none; }
/* ---- The journey: four chapters, one visual, one timeline ----
   Desktop: the active chapter (oversized hairline number, serif title, copy) sits low on
   the left, the cinematic still fills the right, the timeline runs under both.
   Everything that changes is opacity / transform only; the panels and stills are
   stacked in one cell so switching never shifts layout. */
/* With motion the scroll steps through the chapters while they stay put. The whole section
   (heading, intro, button and chapters) pins when it fits the window (.is-pin-all); where
   it does not, as on phones, only the chapters pin (.is-pin-pj). Each track is the pinned
   block's own height plus three steps of scroll; main.js measures --pin-h and --pin-top
   (the top that centres the block). Without motion, or if even the chapters are taller
   than the window, nothing pins and the timeline is clicked / tapped instead. */
.process { --pj-step: 52vh; }
.pj-track { grid-column: 1 / -1; }
.process.is-pin-all .process__track { height: calc(var(--pin-h, 700px) + 3 * var(--pj-step)); }
.process.is-pin-all .process__inner { position: sticky; top: var(--pin-top, 10vh); }
.process.is-pin-pj .pj-track { height: calc(var(--pin-h, 600px) + 3 * var(--pj-step)); }
.process.is-pin-pj .pj { position: sticky; top: var(--pin-top, 12vh); }
.pj {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  margin-top: calc(40 * var(--u));
}
.pj__panels { grid-column: 1 / span 3; grid-row: 1; display: grid; align-self: end; }
.pj__panel {
  grid-area: 1 / 1;
  align-self: end;
  visibility: hidden;
  pointer-events: none;
}
.pj__panel.is-active { visibility: visible; pointer-events: auto; }
.pj__num {
  display: block;
  margin-left: -0.06em;                    /* optical: the 0's side bearing */
  font-size: calc(188 * var(--u));         /* fills more of its quarter, so the gap to the still reads as intent */
  font-weight: 300;
  line-height: .78;
  letter-spacing: -0.06em;
  color: #f3efe9;
  font-variant-numeric: tabular-nums;
}
.pj__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: calc(24 * var(--u)) 0 0;
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.pj__kicker i { width: 28px; height: 1px; background: #4a4441; }
.pj__title {
  margin: calc(10 * var(--u)) 0 0;
  font-family: var(--serif-text);
  font-size: calc(51 * var(--u));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #f3efe9;
}
.pj__text { min-height: 3.24em; max-width: 25em; margin: calc(16 * var(--u)) 0 0; font-size: var(--fs-small); line-height: 1.62; letter-spacing: .004em; color: #b6b0a9; }

/* the still: four images stacked, the active one fades up out of a slight push-in */
.pj__visual {
  grid-column: 4 / -1;                     /* ~25 / 75; its left edge sits on chapter 02's stop */
  grid-row: 1;
  position: relative;
  isolation: isolate;                      /* the stills' stacking order stays inside the frame */
  aspect-ratio: 2.8;
  margin: 0;
  overflow: hidden;
  border: 1px solid #2c2725;
  background: #0b0a0a;
}
.pj__visual picture { display: contents; }
.pj__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
}
.pj__img.is-active { opacity: 1; transform: none; }

/* timeline: one short bar per chapter, like story bars. Chapters passed are crimson, the
   current one fills as the scroll moves through it (--p, 0 to 1, set by main.js while the
   section is pinned; full otherwise), the ones ahead wait in grey. */
.pj__timeline {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  display: grid;
  --pj-gap: max(10px, calc(14 * var(--u)));
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--pj-gap);
  margin-top: calc(30 * var(--u));
}
.pj__stop {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: baseline;
  padding: 20px 0 6px;
  text-align: left;
  color: #c6c0b9;
}
.pj__stop.is-done, .pj__stop.is-active { --p: 1; }
.pj__stop::before, .pj__stop::after {     /* the bar, and its crimson fill */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 3px;
  background: #34302e;
}
.pj__stop::after { background: var(--red-bright); clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0 round 3px); }
.pj__stop-num { font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); letter-spacing: .18em; font-variant-numeric: tabular-nums; color: #9d978f; }
.pj__stop-name { font-size: max(14px, calc(17 * var(--u))); font-weight: 300; line-height: 1.2; letter-spacing: -0.012em; }
.pj__stop:focus-visible { color: #f3efe9; }
@media (hover: hover) { .pj__stop:hover { color: #f3efe9; } }
.pj__stop:focus-visible .pj__stop-num { color: #d9d4ce; }
@media (hover: hover) { .pj__stop:hover .pj__stop-num { color: #d9d4ce; } }
.pj__stop:focus-visible { outline: 1px solid var(--red-bright); outline-offset: 6px; }
.pj__stop.is-active { color: #f3efe9; }
.pj__stop.is-active .pj__stop-num { color: var(--red-bright); }

@media (prefers-reduced-motion: no-preference) {
  .pj__panel > * {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity .15s ease, transform .3s var(--ease-out);
  }
  .pj__panel.is-active > * { opacity: 1; transform: none; transition: opacity .45s ease .12s, transform .7s var(--ease-out) .12s; }
  .pj__panel.is-active > .pj__kicker { transition-delay: .15s; }
  .pj__panel.is-active > .pj__title { transition-delay: .18s; }
  .pj__panel.is-active > .pj__text { transition-delay: .22s; }
  /* the new still fades in on top of the old one, which leaves only once it is covered:
     no dark dip, and the photo has turned within the same half second as the stop */
  .pj__img { transition: opacity .01s linear .45s, transform 1.6s var(--ease-out); }
  .pj__img.is-active { z-index: 1; transition: opacity .45s ease, transform 1.6s var(--ease-out); }
  .pj__stop, .pj__stop-num { transition: color .3s ease; }
  .pj__stop::after { transition: clip-path .6s cubic-bezier(.65, 0, .25, 1); }       /* a click or tap fills it at once… */
  .is-pin-all .pj__stop::after, .is-pin-pj .pj__stop::after { transition: none; }   /* …the scroll fills it as it goes */
}
@media (prefers-reduced-motion: reduce) {
  .pj__panel:not(.is-active) { opacity: 0; }
}

/* ---------- (07) Clients ---------- */

/* a short band between two faint rules: the title (30%) and the marks (70%), joined
   by a hairline; fixed px rhythm so the band keeps its height across widths */
.clients { padding: 32px 0; }      /* 32 + 64 = 96px either side, the same beat as the panels around it */
.clients__inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);   /* title a third, the marks two thirds */
  align-items: center;
  padding-block: 64px;
  border-block: 1px solid rgba(16, 16, 16, .08);
}
.clients__head { padding-right: 64px; }   /* clear air before the divider */
.clients__head .h-serif {
  margin-top: 22px;
  font-size: clamp(28px, calc(40 * var(--u)), 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
/* the one crimson touch: same face, colour only */
.clients__head .h-serif em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--red); }
/* five equal cells between hairlines: every mark gets the same field, centred optically */
.clients__logos {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));   /* --n: the number of clients (set by the server), at most 6 a row */
  margin: 0;
  padding: 0;
  border-left: 1px solid rgba(16, 16, 16, .1);
  list-style: none;
}
.clients__logos li { display: flex; align-items: center; justify-content: center; min-height: 112px; padding-top: 4px; border-right: 1px solid rgba(16, 16, 16, .08); }   /* optical centre: wordmarks sit a hair low */
.clients__logos li:last-child { border-right: 0; }
/* dark grey at rest; each mark warms to its own colour on hover */
.wm {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  color: #4a4643;
  white-space: nowrap;
  transition: color .3s ease, opacity .3s ease, transform .35s var(--ease-out);
}
@media (hover: hover) {
  .clients__logos:hover .wm { opacity: .45; }
  .clients__logos li:hover .wm { opacity: 1; transform: translate3d(0, -2px, 0); }
}
.wm--vodafone i { transition: background-color .3s ease; }
@media (hover: hover) {
  .clients__logos li:hover .wm--vodafone { color: #e60000; }
  .clients__logos li:hover .wm--redbull { color: #db0a40; }
  .clients__logos li:hover .wm--audi { color: #000; }
  .clients__logos li:hover .wm--one, .clients__logos li:hover .wm--teg { color: var(--ink); }
}
.wm--vodafone { font-size: max(15px, calc(20 * var(--u))); font-weight: 900; letter-spacing: -0.02em; }
.wm--vodafone i { position: relative; width: 1.25em; height: 1.25em; border-radius: 50%; background: currentColor; }
.wm--vodafone i::after { content: ""; position: absolute; top: .24em; left: .5em; width: .42em; height: .42em; border-radius: 50% 50% 50% 0; background: var(--bg); }
.wm--one { font-size: max(22px, calc(31 * var(--u))); font-weight: 300; letter-spacing: -0.05em; }
.wm--redbull { font-size: max(17px, calc(24.5 * var(--u))); font-weight: 900; font-style: normal; letter-spacing: -0.04em; }
.wm--audi { font-size: max(18px, calc(23 * var(--u))); }
.wm--audi { gap: 0; }
.wm--audi i { width: 1.2em; height: 1.2em; border: max(2px, calc(3 * var(--u))) solid currentColor; border-radius: 50%; }
.wm--audi i + i { margin-left: -.36em; }
.wm--teg { font-size: max(20px, calc(29 * var(--u))); font-weight: 900; letter-spacing: -0.05em; }
.wm--plain { font-size: max(17px, calc(23 * var(--u))); font-weight: 900; letter-spacing: -0.03em; }   /* clients added from the dashboard */
@media (hover: hover) { .clients__logos li:hover .wm--plain { color: var(--ink); } }
/* a logo file from the dashboard: grey at rest like the drawn marks, its own colours on hover */
.wm--img { height: max(28px, calc(40 * var(--u))); max-width: 78%; }
.wm--img img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .78; transition: filter .3s ease, opacity .3s ease; }
@media (hover: hover) { .clients__logos li:hover .wm--img img { filter: none; opacity: 1; } }

/* ---------- (08) Contact ----------
   One editorial column on the left (label, three-line title, a solid CTA), the red
   portrait bleeding in from the right, and a hairline-ruled strip of direct details
   along the bottom. The portrait fades out to the left and toward the strip. */

.contact {
  position: relative;
  isolation: isolate;
  background: var(--black);
  color: #fff;
  overflow: hidden;
}
.contact__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 54%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 52%), linear-gradient(180deg, #000 40%, transparent 60%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 8%, #000 52%), linear-gradient(180deg, #000 40%, transparent 60%);
          mask-composite: intersect;
}
.contact__inner {
  display: flex;
  flex-direction: column;
  min-height: max(560px, calc(720 * var(--u)));
  padding-top: calc(120 * var(--u));
}
.contact__main { padding-bottom: calc(120 * var(--u)); }
.contact__title {
  margin: calc(30 * var(--u)) 0 0;
  font-family: var(--serif-text);
  font-weight: 900;
  font-size: calc(80 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
}
.contact__title .line { white-space: nowrap; }
.contact__title .line + .line { margin-top: calc(2 * var(--u)); }
.contact__title em { font-family: var(--serif); font-style: normal; font-weight: 300; letter-spacing: 0; color: var(--red-bright); }
.contact__lead { max-width: 27em; margin: calc(30 * var(--u)) 0 0; font-size: max(17px, calc(20 * var(--u))); line-height: 1.55; color: #e3ded7; }
/* the direct ways in, as large as the links they are */
.contact__ways {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: calc(64 * var(--u));
  margin: calc(64 * var(--u)) 0 0;
  padding-top: calc(24 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, .14);
  width: min(100%, calc(760 * var(--u)));
}
.contact__ways dt { font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .16em; color: #a9a39b; }
.contact__ways dd { margin: 10px 0 0; font-size: max(17px, calc(22 * var(--u))); letter-spacing: -0.01em; color: #fbf8f1; }
.contact__ways a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: color .3s ease, background-size .45s var(--ease-out); }
.contact__ways a:focus-visible { color: var(--red-bright); background-size: 100% 1px; }
@media (hover: hover) { .contact__ways a:hover { color: var(--red-bright); background-size: 100% 1px; } }

/* CTA: a solid pill; crimson wipes in from the left, the arrow steps forward */
.contact__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: calc(28 * var(--u));
  height: max(56px, calc(64 * var(--u)));
  margin-top: calc(52 * var(--u));
  padding: 0 7px 0 max(24px, calc(32 * var(--u)));
  border-radius: 999px;
  --fill: var(--red);
  --fill-ink: #fff;
  background: #f6f3ed;
  color: var(--black);
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 900;
  letter-spacing: -0.005em;
  overflow: hidden;
  transition: color .35s ease, background-size .55s var(--ease-out);
}
.contact__cta-icon {
  display: grid;
  place-items: center;
  width: max(42px, calc(50 * var(--u)));
  height: max(42px, calc(50 * var(--u)));
  border-radius: 50%;
  background: var(--black);
  color: #fff;
  transition: background-color .35s ease, color .35s ease;
}
.contact__cta-label { white-space: nowrap; }
.contact__cta-icon .arrow { width: 15px; height: 1.5px; transition: transform .45s var(--ease-out); }
.contact__cta-icon .arrow::after { width: 7px; height: 7px; border-width: 1.5px; }
.contact__cta:focus-visible .contact__cta-icon { background: #f6f3ed; color: var(--red); }
@media (hover: hover) { .contact__cta:hover .contact__cta-icon { background: #f6f3ed; color: var(--red); } }
.contact__cta:focus-visible .arrow { transform: translateX(4px); }
@media (hover: hover) { .contact__cta:hover .arrow { transform: translateX(4px); } }
.contact__cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* the closing panel: brand + studio line, three link columns and socials on one rule,
   sitting on the portrait's faded lower edge, then the legal line */
.contact__foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr;
  column-gap: var(--gutter);
  margin-top: auto;
  padding: calc(48 * var(--u)) 0 calc(56 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.contact__brand { display: flex; flex-direction: column; align-items: flex-start; gap: calc(32 * var(--u)); padding-right: calc(40 * var(--u)); }
.contact__brand .logo__svg { height: max(56px, calc(72 * var(--u))); }

/* links in the contact strip and the footer: a hairline that draws in on hover */
.footer__col a,
.footer__bottom nav a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: color .3s ease, background-size .45s var(--ease-out);
}
.footer__col a:focus-visible, .footer__bottom nav a:focus-visible { color: #fff; background-size: 100% 1px; }
@media (hover: hover) { .footer__col a:hover, .footer__bottom nav a:hover { color: #fff; background-size: 100% 1px; } }

/* ---------- Footer ----------
   Lead row: the mark and the studio line on one baseline. Then four quiet columns
   under mono labels, then the legal line. */

/* case pages keep a slim footer; on the home page the footer is the contact panel */
.footer { background: #050404; color: #fff; border-top: 1px solid #1a1615; }
.logo--light { color: #fbf8f1; }
.footer .logo__svg { height: max(64px, calc(88 * var(--u))); }
.footer__logo { display: inline-flex; margin-top: 44px; }

.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(14 * var(--u)); font-size: max(15px, calc(16 * var(--u))); color: #ddd7d0; }
.footer__col h3 {
  margin: 0 0 calc(12 * var(--u));
  font-family: var(--mono);
  font-size: max(12px, calc(12.5 * var(--u)));
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #a8a199;
}
/* social links read like the other columns (and the menu): a name and a small outward arrow */
.footer__col .ext { display: inline-block; width: 9px; height: 9px; margin-left: 6px; vertical-align: .05em; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .55; transition: transform .4s var(--ease-out), opacity .3s ease; }
.footer__col a:focus-visible .ext { opacity: 1; transform: translate(2px, -2px); color: var(--red-bright); }
@media (hover: hover) { .footer__col a:hover .ext { opacity: 1; transform: translate(2px, -2px); color: var(--red-bright); } }

/* under the footer logo: who we are, in two lines (where the newsletter was; there is no
   mailing list yet, so no sign-up is offered) */
.contact__tagline { max-width: 400px; margin: 0; font-size: max(15px, calc(16 * var(--u))); line-height: 1.55; color: #e5e1db; }

/* the closing signature: the wordmark across the whole measure */
.footer__wordmark { display: block; width: 100%; height: auto; aspect-ratio: 931 / 84; margin: calc(16 * var(--u)) 0 calc(44 * var(--u)); color: #fbf8f1; }
.footer__top { display: inline-flex; align-items: center; gap: 10px; color: #ddd7d0; transition: color .3s ease; }
.footer__top .arrow { width: 12px; transform: rotate(-90deg); transition: transform .4s var(--ease-out); }
.footer__top .arrow::after { width: 6px; height: 6px; }
@media (hover: hover) {
  .footer__top:hover { color: #fff; }
  .footer__top:hover .arrow { transform: rotate(-90deg) translateX(3px); }
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding: calc(24 * var(--u)) 0 calc(30 * var(--u));
  border-top: 1px solid var(--hair-dark);
  font-size: max(13px, calc(13.5 * var(--u)));
  color: #a8a199;
}
.footer__bottom nav { display: flex; gap: calc(28 * var(--u)); }

/* ---------- Case study pages ---------- */

.case__head { padding-top: calc(64 * var(--u)); }
.case__back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: calc(56 * var(--u));
  font-size: var(--fs-small);
  color: var(--ink-soft);
  transition: color .25s ease;
}
@media (hover: hover) { .case__back:hover { color: var(--red); } }
.case__back .arrow { width: 14px; }
.case__back .arrow::after { width: 7px; height: 7px; }
.case__title {
  margin: calc(28 * var(--u)) 0 0;
  font-weight: 900;
  font-size: calc(150 * var(--u));
  line-height: .9;
  letter-spacing: -0.03em;
}
.case__intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  margin-top: calc(56 * var(--u));
  align-items: start;
}
.case__intro .body { grid-column: 1 / span 5; font-size: max(16px, calc(20 * var(--u))); color: var(--ink); }
.case__meta { grid-column: 8 / span 5; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin: 0; }
.case__meta div { padding-top: 14px; border-top: 1px solid var(--hair); }
.case__meta dt { font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .22em; color: #6d6965; }
.case__meta dd { margin: 8px 0 0; font-size: var(--fs-small); }

.case__cover { position: relative; margin: calc(96 * var(--u)) 0 0; overflow: hidden; }
.case__cover--full { height: 82vh; height: 82svh; min-height: 420px; }
.case__cover--full img { width: 100%; height: 100%; object-fit: cover; }
.case__cover--contained { display: grid; place-items: center; padding: calc(120 * var(--u)) 20px; background: #ede8df; }
.case__cover--contained img { width: calc(640 * var(--u)); max-width: 100%; height: auto; }

.case__chapters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(80 * var(--u)) var(--gutter);
  margin-top: var(--section-y);
}
.chapter {
  display: grid;
  grid-template-columns: calc(64 * var(--u)) 1fr;
  padding-top: calc(24 * var(--u));
  border-top: 1px solid var(--hair);
}
.chapter__num { font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--red); padding-top: .5em; }
.chapter h2 { margin: 0; font-weight: 900; font-size: max(26px, calc(40 * var(--u))); letter-spacing: -0.02em; }
.chapter__pending { grid-column: 2; max-width: 28em; margin: 18px 0 0; font-size: var(--fs-body); line-height: 1.6; color: #6d6965; }
.chapter__pending span {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--red);
}

.case__gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  margin: var(--section-y) 0;
}
.case__shot { position: relative; margin: 0; overflow: hidden; }
.case__shot img { width: 100%; height: 100%; object-fit: cover; }
.case__shot--1 { grid-column: 1 / span 6; aspect-ratio: 3 / 2; }
.case__shot--2 { grid-column: 8 / span 4; margin-top: calc(180 * var(--u)); aspect-ratio: 4 / 3; }

.case__next { background: var(--black); color: #fff; }
.case__next-link { display: block; padding-top: calc(120 * var(--u)); padding-bottom: calc(120 * var(--u)); }
.case__next-title {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--u));
  margin-top: calc(28 * var(--u));
  font-family: var(--serif-text); font-weight: 900;
  font-size: calc(110 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color .3s ease;
}
.case__next-title .arrow { width: calc(64 * var(--u)); height: 2px; transition: transform .5s var(--ease-out); }
.case__next-title .arrow::after { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
@media (hover: hover) {
  .case__next-link:hover .case__next-title { color: var(--red-bright); }
  .case__next-link:hover .case__next-title .arrow { transform: translateX(12px); }
}

.footer--slim { padding-top: 0; }
.footer--slim .footer__bottom { margin-top: 0; border-top: 0; padding-top: 28px; }

[data-lines] .line { display: block; }

/* ---------- Full-screen menu (dialog) ---------- */

html.has-modal { overflow: hidden; }

.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 calc((100% - var(--canvas)) / 2 + var(--hero-gutter)) calc(44 * var(--u));   /* the header's gutters: logo and close land on the header's logo and menu button */
  border: 0;
  background: var(--black);
  color: #fbf8f1;
  overflow-y: auto;
  contain: strict;
  z-index: 70;                           /* non-modal: above the header, below the curtain */
}
.menu[open] { display: grid; grid-template-rows: auto 1fr auto; }
.menu::backdrop { background: transparent; }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.menu.is-compact .menu__top { height: var(--header-compact); }
.menu.is-compact .menu__top .logo__svg { height: calc(var(--header-compact) - 16px); }
.menu__close, .brief__close {
  position: relative;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(251, 248, 241, .4);
  border-radius: 50%;
  transition: background .3s ease, transform .5s var(--ease-out);
}
.menu__close span, .brief__close span {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 1.5px;
  margin: -0.75px 0 0 -8px;
  background: currentColor;
  transform: rotate(45deg);
}
.menu__close span + span, .brief__close span + span { transform: rotate(-45deg); }
@media (hover: hover) { .menu__close:hover, .brief__close:hover { transform: rotate(90deg); } }

/* Desktop: one full-width list (sized from the window height so all five rows,
   the header and the footer always fit) and a four-part footer. */
.menu[open] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  --row: clamp(56px, calc((100svh - var(--header-h) - 190px) / 5), calc(118 * var(--u)));
}
.menu__top { grid-column: 1 / -1; }
.menu__nav { align-self: center; min-width: 0; }
.menu__nav ol { margin: 0; padding: 0; list-style: none; }
.menu__nav li { border-bottom: 1px solid #2a2523; contain: layout style; }
.menu__nav li:last-child { border-bottom: 0; }   /* rules only between the rows */
.menu__nav a {
  display: grid;
  grid-template-columns: calc(40 * var(--u)) auto 1fr auto;
  align-items: baseline;                 /* the number sits on the label's baseline… */
  align-content: center;                 /* …and the line as a whole is centred in the row */
  column-gap: calc(20 * var(--u));
  height: var(--row);
  font-family: var(--serif-text); font-weight: 900;
  font-size: calc(var(--row) * .62);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color .35s ease;
}
.menu__num { font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); letter-spacing: .14em; color: #8f8982; transition: color .35s ease; }
.menu__label { transition: transform .5s var(--ease-out); will-change: transform; }
.menu__hint {
  justify-self: end;
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #8f8982;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .35s ease, transform .5s var(--ease-out);
}
.menu__arrow {
  position: relative;
  align-self: center;
  width: calc(42 * var(--u));
  min-width: 34px;
  aspect-ratio: 1;
  border: 1px solid #3a3431;
  border-radius: 50%;
  transition: background .35s ease, border-color .35s ease, transform .5s var(--ease-out);
}
.menu__arrow::before, .menu__arrow::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; }
.menu__arrow::before { width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; }
.menu__arrow::after { width: 6px; height: 6px; margin: -3px 0 0 -1px; background: none; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.menu__nav a:focus-visible { color: var(--red-bright); }
@media (hover: hover) { .menu__nav a:hover { color: var(--red-bright); } }
.menu__nav a:focus-visible .menu__label { font-style: normal; transform: translateX(calc(14 * var(--u))); }
@media (hover: hover) { .menu__nav a:hover .menu__label { font-style: normal; transform: translateX(calc(14 * var(--u))); } }
.menu__nav a:focus-visible .menu__num { color: var(--red-bright); }
@media (hover: hover) { .menu__nav a:hover .menu__num { color: var(--red-bright); } }
.menu__nav a:focus-visible .menu__hint { opacity: 1; transform: none; }
@media (hover: hover) { .menu__nav a:hover .menu__hint { opacity: 1; transform: none; } }
.menu__nav a:focus-visible .menu__arrow { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }
@media (hover: hover) { .menu__nav a:hover .menu__arrow { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); } }


.menu__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  margin-top: calc(28 * var(--u));
  padding-top: calc(24 * var(--u));
}
.menu__info { display: flex; gap: calc(56 * var(--u)); margin: 0; }
.menu__info dt { font-family: var(--mono); font-weight: 900; font-size: max(9px, calc(9.5 * var(--u))); text-transform: uppercase; letter-spacing: .2em; color: #8f8982; }
.menu__info dd { margin: 6px 0 0; font-size: var(--fs-small); color: #e6e0d8; }
.menu__info a { transition: color .3s ease; }
@media (hover: hover) { .menu__info a:hover { color: var(--red-bright); } }
.menu__social { display: flex; gap: calc(28 * var(--u)); margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .18em; color: #cfc9c2; }
.menu__social a { transition: color .3s ease; }
@media (hover: hover) { .menu__social a:hover { color: var(--red-bright); } }

/* Open / close are transitions on one class (.is-open), not keyframes, so they can be
   interrupted at any point and simply reverse from where they are.
   Choreography: the black panel covers the whole screen first and only then do the links,
   the still and the footer come in; on the way out they leave first and the panel then
   retracts. Menu text and page text therefore never share a frame (while the wipe is
   under way, the uncovered part of the page shows nothing of the menu but its edge). */
@media (prefers-reduced-motion: no-preference) {
  .menu { clip-path: inset(0 0 100% 0); transition: clip-path .5s cubic-bezier(.7, 0, .2, 1); }
  .menu.is-open { clip-path: inset(0 0 0 0); }
  .menu.is-closing { transition: clip-path .42s cubic-bezier(.6, 0, .8, .4) .16s; }
  .menu .menu__nav li, .menu .menu__foot, .menu .menu__preview { opacity: 0; transform: translateY(28px); transition: opacity .16s ease, transform .3s ease; }
  .menu.is-open .menu__nav li, .menu.is-open .menu__foot, .menu.is-open .menu__preview { opacity: 1; transform: none; transition: opacity .55s ease, transform .85s var(--ease-out); }
  .menu.is-open .menu__nav li:nth-child(1) { transition-delay: .46s; }
  .menu.is-open .menu__nav li:nth-child(2) { transition-delay: .5s; }
  .menu.is-open .menu__nav li:nth-child(3) { transition-delay: .54s; }
  .menu.is-open .menu__nav li:nth-child(4) { transition-delay: .58s; }
  .menu.is-open .menu__nav li:nth-child(5) { transition-delay: .62s; }
  .menu.is-open .menu__preview { transition-delay: .5s; }
  .menu.is-open .menu__foot { transition-delay: .66s; }
}

/* the section in view is marked in the list */
.menu__nav a[aria-current] .menu__num { color: var(--red-bright); }
.menu__nav a[aria-current] .menu__label::after { content: ""; display: inline-block; width: .14em; height: .14em; margin-left: .2em; border-radius: 50%; background: var(--red-bright); vertical-align: .08em; }

/* desktop: a still for the hovered / focused section beside the list */
.menu__preview { display: none; }
@media (min-width: 1181px), (min-width: 1024px) and (orientation: landscape) {
  .menu[open] { grid-template-columns: minmax(0, 1fr) min(30vw, calc(420 * var(--u))); column-gap: calc(64 * var(--u)); }
  .menu__nav { grid-column: 1; grid-row: 2; }
  .menu__preview {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    position: relative;
    height: min(calc(var(--row) * 5), 62vh);
    overflow: hidden;
    background: #1a1716;
  }
  .menu__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .45s ease, transform 1.2s var(--ease-out); }
  .menu__preview img.is-on { opacity: 1; transform: none; }
}

/* ---------- Project brief (dialog drawer) ---------- */

.brief {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(1180px, 100%);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}
.brief[open] { display: grid; grid-template-columns: 400px minmax(0, 1fr); }
/* narrow laptops: a slimmer pitch panel leaves the form its full width, so it still fits one screen */
@media (max-width: 1199px) {
  .brief[open] { grid-template-columns: 300px minmax(0, 1fr); }
  .brief .brief__panel { padding-inline: 32px; }
  .brief__aside { padding-inline: 24px; }
  .brief__live { border-radius: 14px; line-height: 1.35; }    /* two lines here: a rounded box instead of a stretched pill */
}
.brief::backdrop { background: rgba(16, 16, 16, .6); }
@media (prefers-reduced-motion: no-preference) {
  .brief[open] { animation: brief-in .55s var(--ease-out) both; }
  .brief[open].is-closing { animation: brief-out .38s cubic-bezier(.6, 0, .8, .4) both; }
  .brief[open]::backdrop { animation: fade-in .4s ease both; }
  .brief[open].is-closing::backdrop { animation: fade-out .38s ease both; }
}
@keyframes brief-in { from { transform: translateX(102%); } }
@keyframes brief-out { to { transform: translateX(102%); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* left: dark pitch panel — photo under a deep gradient, promise, process, contacts */
.brief__aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 0;
  padding: calc(40 * var(--u)) calc(48 * var(--u)) calc(44 * var(--u));
  background: var(--black);
  color: #fbf8f1;
  overflow: hidden;
}
.brief__photo { position: absolute; inset: 0; z-index: -2; }
.brief__photo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: grayscale(.2) contrast(1.05); }
.brief__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(16, 16, 16, .8);
}
.brief__logo { align-self: flex-start; width: auto; height: 52px; aspect-ratio: 940 / 590; color: #fbf8f1; }
.brief__live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(251, 248, 241, .18);
  border-radius: 999px;
  background: rgba(251, 248, 241, .06);
  font-family: var(--mono); font-weight: 900;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.brief__live-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #2fbf6b; }
.brief__live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #2fbf6b; opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .brief__live-dot::after { animation: pulse-ring 2.4s cubic-bezier(.2, .7, .2, 1) infinite; } }
.brief__quote {
  margin: 28px 0 0;
  font-family: var(--serif-text);
  font-size: clamp(28px, calc(38 * var(--u)), 40px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.brief__quote em { font-family: var(--serif); font-weight: 300; color: var(--red-bright); }
.brief__steps { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(251, 248, 241, .14); }
.brief__steps li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(251, 248, 241, .14);
  font-size: var(--fs-small);
  color: #e6e0d8;
}
.brief__steps span { font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); letter-spacing: .14em; color: var(--red-bright); }
.brief__contact { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 0; }
.brief__contact dt { font-family: var(--mono); font-weight: 900; font-size: max(9px, calc(9.5 * var(--u))); text-transform: uppercase; letter-spacing: .2em; color: #8f8982; }
.brief__contact dd { margin: 6px 0 0; font-size: var(--fs-small); }
.brief__contact a { transition: color .3s ease; }
@media (hover: hover) { .brief__contact a:hover { color: var(--red-bright); } }

/* ---- Right: the inquiry form ------------------------------------------------
   One spacing scale, one column grid. Every measure is a multiple of --s, the
   8px step, which tightens a little on short windows so the whole brief fits on
   one screen (--k: 1px at ≥ ~920px tall, .5px at ≤ ~690px).
     --s  : the 8px step  (8 → 4px)
     rows : label 16 · label→control 12 · control · section gap 32
   Controls keep fixed geometry: options 40px, inputs 48px, CTA 56px (mobile:
   options and inputs ≥ 44px for touch). */
.brief {
  --k: clamp(0px, (100dvh - 660px) / 300, 1px);
  --s: calc(4px + 4 * var(--k));                 /* 8px step */
  --gap-section: calc(16px + 16 * var(--k));     /* 32 → 16 */
  --gap-label: calc(8px + 4 * var(--k));         /* 12 → 8 */
  --h-option: calc(32px + 8 * var(--k));         /* 40 */
  --h-input: calc(36px + 12 * var(--k));         /* 48 */
  --h-cta: calc(44px + 12 * var(--k));           /* 56 */
  --line: #d4cdc2;
  --muted: #8a837a;
  --soft: #4a4540;
}
.brief__panel {
  position: relative;
  min-height: 0;
  padding: calc(24px + 16 * var(--k)) 48px calc(16px + 24 * var(--k));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brief__inner { max-width: 680px; margin: 0 auto; }

/* head: eyebrow and close share the first row; the title spans the grid */
.brief__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: calc(2 * var(--s));
}
.brief__eyebrow {
  margin: 0;
  font-family: var(--mono); font-weight: 900;
  font-size: 10.5px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--soft);
}
.brief__eyebrow span { color: var(--muted); letter-spacing: .12em; }
.brief__close {
  position: relative;
  width: 48px; height: 48px;
  margin: -12px 0;                               /* sits on the eyebrow row, barely growing it */
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}
@media (hover: hover) { .brief__close:hover { background: var(--ink); color: #fff; border-color: var(--ink); } }
.brief__close:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.brief__title {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--serif-text);
  font-size: calc(30px + 22 * var(--k));         /* 52 → 41 */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
.brief__title em { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; color: var(--red); }

.brief__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(4 * var(--s));
  row-gap: var(--gap-section);
  margin-top: calc(4 * var(--s));
}
.brief__form[hidden] { display: none; }

.field { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--wide { grid-column: 1 / -1; }

/* label row: fixed number column so every name starts on the same vertical */
.field__label {
  display: flex;
  align-items: baseline;
  width: 100%;
  height: 16px;
  margin: 0 0 var(--gap-label);
  padding: 0;
  font-family: var(--mono); font-weight: 900;
  font-size: 10.5px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--soft);
}
legend.field__label { float: left; }             /* lets the legend behave like any label row */
legend.field__label + * { clear: both; }
.field__num { flex: none; width: 32px; color: var(--red); letter-spacing: .08em; }
.field__name { flex: 1; }
.field__hint { margin-left: auto; text-transform: none; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* inputs: no boxes, one hairline, a crimson line that draws in on focus */
.field__input {
  display: block;
  width: 100%;
  height: var(--h-input);
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: linear-gradient(var(--red), var(--red)) left bottom / 0 1px no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.01em;
  transition: background-size .45s var(--ease-out), border-color .25s ease;
}
.field__input::placeholder { color: #b2aba1; font-weight: 300; opacity: 1; }
@media (hover: hover) { .field__input:hover { border-bottom-color: #a59e94; } }
.field__input:focus { outline: none; background-size: 100% 1px; border-bottom-color: var(--red); }
.field__input--area {
  height: calc(56px + 40 * var(--k));            /* 96 → 56: three lines, then two */
  padding: 12px 0;
  line-height: 24px;
  resize: none;
}

/* validation: quiet crimson note under the control, no layout shift */
.field__error {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  font-family: var(--mono); font-weight: 900;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .06em;
  color: var(--red);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.field__input:user-invalid { border-bottom-color: var(--red); }
.field__input:user-invalid ~ .field__error,
.was-validated .field__input:invalid ~ .field__error,
.was-validated fieldset:invalid > .field__error { opacity: 1; transform: none; }
.was-validated .field__input:invalid { border-bottom-color: var(--red); }

/* options: one geometry for services and budget */
.options { display: flex; flex-wrap: wrap; gap: var(--s); }
.option { position: relative; display: flex; flex: 1 1 auto; }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option__box {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h-option);
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--ink);
  pointer-events: none;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.option__dot {
  position: relative;
  flex: none;
  width: 12px; height: 12px;
  border: 1px solid #b9b2a7;
  border-radius: 50%;
  transition: border-color .25s ease, background-color .25s ease;
}
.option__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .3s var(--ease-out);
}
@media (hover: hover) {
  .option:hover .option__box { border-color: var(--ink); }
  .option:hover .option__dot { border-color: var(--ink); }
}
.option input:checked + .option__box { border-color: var(--red); background: #f8e9ec; color: #7d001f; }
.option input:checked + .option__box .option__dot { border-color: var(--red); background: var(--red); }
.option input:checked + .option__box .option__dot::after { transform: scale(1); }
/* budget is an ordered scale: always 3 + 2, each row filling the measure */
.options--budget .option { flex-basis: 30%; }
.option input:focus-visible + .option__box { outline: 2px solid var(--red); outline-offset: 2px; }
.was-validated fieldset:invalid .option__box { border-color: #e3b5be; }

/* footer: CTA left, the privacy note, the direct email right, on one axis (the message's
   underline above is the only rule) */
.brief__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--s)) calc(3 * var(--s));
  padding-top: var(--s);
}
.brief__submit {
  height: var(--h-cta);
  padding: 0 28px 0 32px;
  gap: 16px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.01em;
  box-shadow: none;
  transition: background-color .3s ease;
}
.brief__submit:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.brief__submit .arrow { width: 20px; }
.brief__alt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  text-align: right;
}
.brief__alt span { font-family: var(--mono); font-weight: 900; font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.brief__alt a {
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: color .25s ease, background-size .45s var(--ease-out);
}
@media (hover: hover) { .brief__alt a:hover { color: var(--red); } }
.brief__status { margin: calc(-2 * var(--s)) 0 0; font-size: 14px; color: var(--ink); }
.brief__status:empty { display: none; }
.brief__status.is-error { color: var(--red); }
.brief__form[aria-busy="true"] .brief__submit { opacity: .6; pointer-events: none; }

/* sent */
.brief__done { display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--s)); margin-top: calc(5 * var(--s)); padding-top: calc(4 * var(--s)); border-top: 1px solid var(--line); outline: none; }
.brief__done[hidden] { display: none; }
.brief__done h3 { margin: var(--s) 0 0; font-family: var(--serif-text); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
.brief__done p { max-width: 30em; margin: 0; color: var(--soft); }
.brief__done .btn { margin-top: var(--s); }
.brief__done-mark { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--red); }
.brief__done-mark::after { content: ""; position: absolute; left: 21px; top: 15px; width: 12px; height: 22px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .brief__done:not([hidden]) .brief__done-mark { animation: done-pop .5s var(--ease-out) both; }
}
@keyframes done-pop { from { transform: scale(.6); opacity: 0; } }

/* tablet and phone */
@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  .brief__panel { padding-inline: 40px; }
}
@media (max-width: 640px) {
  .brief { --h-option: 44px; --h-input: 48px; --h-cta: 56px; }
  .brief__panel { padding: 24px 24px 32px; }
  .brief__title { font-size: clamp(32px, 9.6vw, 40px); }
  .brief__form { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .brief__foot { flex-direction: column; align-items: stretch; }
  .brief__submit { width: 100%; }
  .brief__alt { align-items: flex-start; text-align: left; }
  .brief__eyebrow span { display: none; }
  /* services become a clean list; the budget a 2-column grid */
  .options .option { flex: 1 1 100%; }
  .options--budget .option { flex: 1 1 40%; }
  .options .option__box { justify-content: flex-start; padding: 0 16px; }
}
@media (max-width: 370px) {
  .brief__panel { padding-inline: 20px; }
  .option__box { padding: 0 14px; font-size: 13.5px; }
}

/* ---------- Page curtain (between home and case pages) ---------- */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--black);
  color: #fbf8f1;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(100%);
}
.curtain__logo { width: 120px; height: auto; aspect-ratio: 940 / 590; }
.is-entering .curtain { visibility: visible; transform: none; animation: curtain-out .85s .1s cubic-bezier(.7, 0, .2, 1) forwards; }
.is-leaving .curtain { visibility: visible; animation: curtain-in .5s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes curtain-out { to { transform: translateY(-100%); } }
@keyframes curtain-in { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  .menu { padding: 0 20px 24px; }
  /* the list and its call to action travel as one group, centred under the bar;
     rows stay compact (52-72px) and shrink with short screens */
  .menu[open] { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto 1fr; --row: clamp(52px, calc((100svh - var(--header-h) - 250px) / 5), 72px); }
  .menu__nav { grid-row: 3; }
  .menu .logo__svg { height: 46px; }   /* = the header's logo, so opening the menu does not resize it */
  .menu__hint { display: none; }
  .menu__nav a { grid-template-columns: 26px 1fr auto; column-gap: 10px; font-size: min(calc(var(--row) * .52), 8.8vw); white-space: nowrap; }
  /* footer, simplified: full-width CTA, then email and phone on one row, then socials */
  .menu__foot { grid-row: 4; flex-direction: column; align-items: stretch; gap: 20px; margin-top: 24px; padding-top: 0; }
  .menu__foot .btn { justify-content: center; }
  .menu__info { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
  .menu__info dt, .menu__info > div:nth-child(3) { display: none; }   /* the labels and the studio line: the links speak for themselves */
  .menu__info dd { margin: 0; }
  .menu__social { flex-wrap: wrap; gap: 10px 22px; }
  .brief { width: 100%; }
  .brief[open] { grid-template-columns: 1fr; }
  .brief__aside { display: none; }
}


/* ---------- Showreel frames that wipe in from the right (intro mode only) ---------- */

.stage__slide { display: none; background: #2a211d; }
/* the still of person 01 underneath, then the two videos that take turns (main.js):
   the incoming one is decoded before it comes forward, the outgoing one stays fully
   visible underneath until it is covered, so no frame between two people is ever dark */
.stage__poster, .stage__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.stage__video { z-index: 1; opacity: 0; transition: opacity 0s linear .32s; }
.stage__video.is-front { z-index: 2; opacity: 1; transition: none; }
.stage__video.is-front.is-fade { transition: opacity .3s cubic-bezier(.4, 0, .2, 1); }
.stage__slide:not(.is-live) .stage__video { visibility: hidden; }
/* upright screens: one eye fills the frame instead of a sliver of nose */
@media (orientation: portrait) { .stage__poster, .stage__video { object-position: 23% 50%; } }
.stage__video.is-cut { object-position: 50% 50%; }   /* the portrait cut is already centred on that strip */
.intro-on .stage__slide {
  display: block;
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--wipe, 100%));
}
.intro-on .stage__slide::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; bottom: 0;
  left: var(--wipe, 100%);
  width: 2px;
  background: var(--red-bright);
  opacity: var(--edge, 0);
}

/* ---------- Grain on soft source images ---------- */

.pj__visual::after,
.case__shot::after,
.case__cover--contained::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveals (JS adds .js-reveal; reduced motion skips them) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

  .js-reveal [data-lines] .line {
    display: block;
    opacity: 0;
    transform: translateY(.35em);
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 110ms);
  }
  .js-reveal [data-lines].is-in .line { opacity: 1; transform: none; }

  .js-reveal [data-reveal-media] { clip-path: inset(18% 0 0 0); transition: clip-path 1.3s var(--ease-out); }
  .js-reveal [data-reveal-media] img { transform: scale(1.12); transition: transform 1.6s var(--ease-out), opacity .7s ease; }
  .js-reveal [data-reveal-media].is-in { clip-path: inset(0 0 0 0); }
  .js-reveal [data-reveal-media].is-in img { transform: none; }

  /* Clients: the marks only fade in, one after another */
  .js-reveal .clients__logos[data-reveal] { opacity: 1; transform: none; }
  .js-reveal .clients__logos li { opacity: 0; transition: opacity .9s ease; }
  .js-reveal .clients__logos li:nth-child(2) { transition-delay: .08s; }
  .js-reveal .clients__logos li:nth-child(3) { transition-delay: .16s; }
  .js-reveal .clients__logos li:nth-child(4) { transition-delay: .24s; }
  .js-reveal .clients__logos li:nth-child(5) { transition-delay: .32s; }
  .js-reveal .clients__logos.is-in li { opacity: 1; }

  /* About: the diamond opens diagonally from its upper-left edge; the red line follows the ink lines */
  .js-reveal .about__media[data-reveal-media] { clip-path: none; }
  .js-reveal .about__media .about__shape {
    clip-path: polygon(30% 0, 30% 0, 0 46%, 0 46%, 0 46%);
    transition: clip-path 1.5s cubic-bezier(.7, 0, .2, 1) .1s;
  }
  .js-reveal .about__media.is-in .about__shape { clip-path: polygon(30% 0, 100% 0, 100% 30%, 48% 100%, 0 46%); }
  .js-reveal .about__copy [data-lines] .line { transform: translateY(.6em); }
  .js-reveal .about__copy [data-lines] .line:last-child { transition-delay: .42s; }
}

/* ---------- Touch targets (coarse pointers): invisible hit areas ----------
   Each small link gets a transparent ::before that extends its tappable box without
   moving anything; sizes stop at half the gap to the next target so they never overlap. */
@media (pointer: coarse) {
  .footer__col a, .footer__bottom nav a, .case__back, .menu__social a, .menu__info a { position: relative; }
  .footer__col a::before, .footer__bottom nav a::before, .case__back::before,
  .menu__social a::before, .menu__info a::before { content: ""; position: absolute; }
  .footer__col a::before { inset: -5px -10px; }                      /* 18 -> 28px (27px pitch) */
  .footer__col h3 + a::before { top: -8px; }
  .footer__bottom nav a::before { inset: -13px -10px; }              /* 17 -> 43px */
  .case__back::before { inset: -13px -10px; }                        /* 18 -> 44px */
  .menu__social a::before { inset: -16px -11px; }                    /* 12 -> 44px; half the 22px gap */
  .menu__info a::before { inset: -10px -14px; }                      /* 18 -> 38px */
}

/* ---------- Tablet & mobile ---------- */

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  :root, body { --header-h: 72px; --header-compact: 60px; --section-y: 104px; --gutter: 16px; --fs-body: 16px; --fs-small: 14px; --fs-label: 11.5px; --btn-h: 52px; }
  .container { padding-inline: 20px; }

  .label::before { display: none; }
  .h-serif { font-size: clamp(28px, 7.4vw, 56px); margin-top: 22px; }
  /* Montserrat Black runs wide: on narrow screens every heading may wrap */
  .h-serif, .services__head .h-serif, .process__head .h-serif, .clients__head .h-serif, .hero__title-sans, .hero__title em { white-space: normal; }
  .hero__title-sans, .hero__title em { font-size: clamp(30px, 7.6vw, 60px); }
  .stage__eyes-title { font-size: clamp(30px, 8.6vw, 60px); }
  .h-serif--stack { font-size: clamp(30px, 8.2vw, 58px); }
  .body br { display: none; }

  .intro-on .intro::after { height: 191vh; height: 191svh; }   /* = main.js len() (stacked) */
  .intro-on .hero { padding-bottom: 24px; }
  .stage__bar { left: 20px; right: 20px; bottom: 28px; grid-template-columns: 1fr; }
  .stage__timeline { grid-column: 1; }
  .stage__tags { display: none; }

  .services__head, .services__index, .about__grid, .process__inner, .clients__inner { grid-template-columns: 1fr; }
  .services__head > :first-child, .services__aside, .svc-list,
  .about__media, .about__copy, .process__head, .pj, .clients__head, .clients__logos { grid-column: 1; }
  .services__pin { display: block; }
  .services__head { display: block; }
  .services__head .h-serif { white-space: normal; }
  .svc-preview { margin-top: 0; }
  .svc-preview__media { flex: none; min-height: 0; }
  .services__aside { display: block; margin-top: 0; padding-top: 24px; }
  .services__head .h-serif { font-size: clamp(26px, 7vw, 50px); }
  .services__index { display: grid; margin-top: 40px; }
  .svc-list { grid-row: auto; margin-top: 0; }
  .svc-preview { grid-row: 1; }
  /* the list reads in full: every name in ink with its line under it; the row crossing the
     middle of the screen turns crimson and drives the sticky still above the list */
  .svc { grid-template-columns: 40px 1fr auto; padding: 18px 0; }
  .svc__num { align-self: start; padding-top: .55em; }
  .svc__name { font-size: clamp(22px, 5.6vw, 34px); }
  .svc.is-active .svc__name { color: var(--red); }
  .svc__desc { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; grid-column: 2 / -1; margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
  .svc__arrow { width: 18px; grid-row: 1; grid-column: 3; }
  .svc-preview {
    grid-row: 1;
    grid-column: 1;
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -20px;
    padding: 0 0 14px;
    background: var(--bg);
  }
  .svc-preview__media { aspect-ratio: 16 / 9; }
  .svc-preview__big { left: 18px; bottom: 6px; font-size: clamp(56px, 16vw, 96px); }
  .svc-preview figcaption { display: none; }

  /* portfolio: the copy first, then the gallery across the full width */
  .work__inner { display: flex; flex-direction: column; align-items: stretch; }
  .work__copy { order: -1; }
  .work__copy .h-serif { font-size: clamp(28px, 7.4vw, 50px); }
  .work__copy .body { font-size: 16px; }
  .work__cta { display: none; }   /* stacked, the copy comes before the gallery: a call to start a project would precede the work */
  .pf { margin-top: 36px; }
  .pf.is-live { aspect-ratio: .92; max-height: 78vh; max-height: 78svh; }
  .pf-tile__cap { left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 12px; font-size: 12px; line-height: 1.25; gap: 6px; white-space: normal; }

  .about { padding: calc(var(--section-y) * .5) 0 var(--section-y); }
  .about__grid { row-gap: 36px; }
  .about__copy, .about__media, .about__fig { grid-row: auto; grid-column: 1; }
  .about__copy { margin-top: 0; }
  .about__copy .h-serif--stack { margin-top: 22px; font-size: clamp(28px, 7.4vw, 50px); }
  .about__copy .h-serif--stack em { font-size: 1em; }
  .about__copy .body { margin-top: 34px; }
  .about__grid { min-height: 0; }
  .about__media { position: static; width: 100%; height: auto; aspect-ratio: 5 / 4; }
  .about__fig { position: static; width: auto; justify-self: end; margin: -46px 0 0; letter-spacing: .14em; }

  .process__head { grid-template-columns: 1fr; }
  .process__head > :first-child, .process__aside { grid-column: 1; }
  .process__head .h-serif { font-size: clamp(26px, 7vw, 50px); }
  .process__aside { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 24px; }
  /* phones / tablets: still, timeline, then the chapter */
  .pj { grid-template-columns: 1fr; margin-top: 40px; }
  .pj__visual { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; }
  .pj__timeline { --pj-gap: 8px; grid-row: 2; margin-top: 24px; }
  .pj__stop { grid-template-columns: 1fr; row-gap: 4px; padding-top: 16px; }
  .pj__stop-name { font-size: 12.5px; }
  .pj__panels { grid-column: 1; grid-row: 3; margin-top: 32px; }
  .pj__panel { padding-right: 0; align-self: start; }
  .pj__num { font-size: clamp(72px, 22vw, 120px); }
  .pj__kicker { margin-top: 20px; }
  .pj__title { margin-top: 10px; font-size: clamp(26px, 6.6vw, 38px); }
  .pj__text { min-height: 0; margin-top: 12px; }

  .clients__inner { padding-block: 56px; }
  .clients__head { padding-right: 0; }
  .clients__head .h-serif { margin-top: 18px; font-size: clamp(24px, 6.4vw, 40px); }
  .clients__logos { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 28px 24px; margin: 32px 0 0; padding: 32px 0 0; border-left: 0; border-top: 1px solid rgba(16, 16, 16, .1); }

  /* the portrait leads, the title rises over its fading lower edge */
  .contact__bg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.05;
    object-position: 62% 20%;
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .contact__inner { min-height: 0; margin-top: -34vw; padding-top: 0; }
  .contact__cta { margin-top: 32px; }
  .contact__main { padding-bottom: 56px; }
  .contact__title { font-size: clamp(26px, 7.4vw, 48px); }
  .contact__title .line { white-space: normal; }
  .contact__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 40px 0 48px; }
  .contact__brand { grid-column: 1 / -1; padding-right: 0; gap: 28px; }
  .footer__col { overflow-wrap: anywhere; }

  .footer .logo__svg { height: 64px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 0 28px; }

  .case__title { font-size: clamp(36px, 10vw, 96px); }
  .case__intro { grid-template-columns: 1fr; row-gap: 32px; }
  .case__intro .body, .case__meta { grid-column: 1; }
  .case__cover--full { height: 62vh; min-height: 320px; }
  .case__cover--contained { padding: 56px 20px; }
  .case__chapters { grid-template-columns: 1fr; gap: 40px; }
  .chapter { grid-template-columns: 40px 1fr; }
  .case__gallery { grid-template-columns: 1fr; row-gap: 24px; }
  .case__shot--1, .case__shot--2 { grid-column: 1; margin-top: 0; }
  .case__shot--2 { width: 72%; justify-self: end; }
  .case__next-link { padding-top: 72px; padding-bottom: 72px; }
  .case__next-title { font-size: clamp(36px, 9vw, 80px); gap: 20px; }
  .case__next-title .arrow { width: 36px; }
  .case__next-title .arrow::after { width: 12px; height: 12px; }

}

@media (max-width: 639px) {
  /* five marks: two over three on a six-column grid, each centred in its cell, none left alone */
  .clients__logos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 0; }
  .clients__logos li { grid-column: span 2; justify-content: center; }
  .clients__logos li:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 379px) {
  .clients__logos { zoom: .86; }      /* Red Bull and Audi keep a clear gap in 93px cells */
}

/* ---------- Mobile audit fixes ---------- */

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  :root, body { --fs-label: 11.5px; }
  .stats span { font-size: 10.5px; }

  /* a menu jump lands with the section label clear of the 60px header */
  #sherbimet, #portofoli, #rreth { scroll-margin-top: 24px; }

  /* iOS Safari zooms into any field set under 16px */

  /* the portrait never outgrows a short screen; the title still rises over its lower third */
  .contact__bg { aspect-ratio: auto; height: min(105vw, 80vh); height: min(105vw, 80svh); }
  .contact__inner { margin-top: calc(min(105vw, 80vh) * -.324); margin-top: calc(min(105vw, 80svh) * -.324); }

  .menu__social { row-gap: 28px; }

}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference), (max-width: 1180px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
  .js-reveal .about__media .about__shape { transition-duration: .9s; transition-delay: 0s; }
}
/* ---------- Phones: the stats become a slim column beside a larger M ----------
   The column sits in the empty corner above the M's left foot and left of its first
   stem (26.3% across the artwork). The M runs to the right screen edge and is sized so
   that stem clears the column: stem x = 100% - .737 * M width >= 20 + 72 + 10px. */
@media (max-width: 599px) {
  .stats {
    position: absolute;
    left: 20px;
    top: calc(100% + 20px);
    width: 86px;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2.4vw, 14px);
    margin: 0;
  }
  .stats li, .stats li:nth-child(odd) { gap: 4px; padding: 0; border-left: 0; }
  .stats strong { font-size: clamp(20px, 5.8vw, 26px); }
  .stats span { font-size: 10px; line-height: 1.35; letter-spacing: .06em; color: #4a4541; }
  .stats span::before { width: 14px; margin-bottom: 6px; }

  .hero__visual { width: min(100%, (100% - 116px) / .737); margin: 20px 0 0 auto; }
  /* without the intro, the black reel starts on the foot's bottom line (8.8% of the M's height) */
  .hero { padding-bottom: 0; }
  html:not(.intro-on) .hero__visual { margin-bottom: calc(min(100%, (100% - 116px) / .737) * -0.06); }
  html:not(.intro-on) .stage { z-index: 3; }   /* the reel's top edge cuts the girl and the stem on that line */
}
/* the room above the foot shrinks with the M (.767 x its width): tighten the column */
@media (max-width: 374px) {
  .stats { gap: 6px; }
  .stats li, .stats li:nth-child(odd) { gap: 4px; }
  .stats span::before { margin-bottom: 4px; }
}

/* narrowest phones: the M is smaller still, so the column starts closer to the button and
   sets a little tighter, keeping the last figure clear of the M's foot */
@media (max-width: 359px) {
  .stats { top: calc(100% + 10px); gap: 5px; }
  .stats strong { font-size: 19px; }
  .stats span { line-height: 1.25; }
  .stats span::before { margin-bottom: 3px; }
  .contact__cta.contact__cta { gap: 16px; padding-left: 26px; }
}

/* ---------- Tablets and phones on their side: use the width ---------- */

@media (min-width: 640px) and (max-width: 1023px), (min-width: 640px) and (max-width: 1180px) and (orientation: portrait) {
  .hero__visual { width: min(calc(100% - 40px), 82vh * 1219 / 1090); width: min(calc(100% - 40px), 82svh * 1219 / 1090); margin: 32px 20px 0 auto; }

  .svc-preview__media { aspect-ratio: auto; height: min(56.25vw, 36vh); height: min(56.25vw, 36svh); }

  /* tablets: a wider gallery under the copy */
  .pf.is-live { aspect-ratio: 1.3; max-height: 70vh; max-height: 70svh; }

  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; }
  .about__copy { grid-column: 1; grid-row: 1; }
  .about__media { grid-column: 2; grid-row: 1; aspect-ratio: auto; height: min((100vw - 80px) / 2, 80vh); height: min((100vw - 80px) / 2, 80svh); }
  .about__fig { grid-column: 2; grid-row: 2; }
  .about__copy .h-serif--stack { font-size: clamp(28px, 4.4vw, 46px); }
  .about__copy .body { margin-top: 26px; }

  .pj__visual { aspect-ratio: auto; height: min((100vw - 40px) * 10 / 16, 58vh); height: min((100vw - 40px) * 10 / 16, 58svh); }

  .clients__logos { display: flex; flex-wrap: nowrap; justify-content: space-between; }

  .contact__foot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Refinements: one type scale, one image frame, clearer hierarchy ---------- */

/* Process: the chapter copy reads at body size, the kicker sits closer to its title */
.pj__text { font-size: max(15px, calc(16.5 * var(--u))); line-height: 1.6; color: #d1cbc4; }
.pj__kicker { letter-spacing: .2em; }
.pj__stop-name { font-size: max(14.5px, calc(16 * var(--u))); }

/* Contact: a heavier call to action, a tighter gap to the link rule */
.contact__cta { height: max(62px, calc(78 * var(--u))); gap: calc(36 * var(--u)); padding-left: max(30px, calc(40 * var(--u))); font-size: max(16px, calc(18 * var(--u))); }
.contact__cta-icon { width: max(48px, calc(62 * var(--u))); height: max(48px, calc(62 * var(--u))); }
.contact__main { padding-bottom: calc(96 * var(--u)); }

/* ---------- 404 ---------- */

.notfound { background: var(--black); color: #fbf8f1; }
.notfound__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
  min-height: 100vh;
  min-height: 100svh;
  width: var(--canvas);
  margin: 0 auto;
  padding: 48px calc(84 * var(--u));
}
.notfound .logo__svg { height: 56px; margin-bottom: 32px; }
.notfound .label::before { display: none; }
.notfound__title {
  margin: 0;
  font-family: var(--serif-text);
  font-weight: 900;
  font-size: clamp(34px, calc(96 * var(--u)), 104px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.notfound__title em { font-style: normal; color: var(--red-bright); }
@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) { .notfound__main { padding: 40px 20px; } .notfound__title br { display: none; } }

/* ---------- Stacked layouts: contact ways, client cells ---------- */

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  .contact__lead { font-size: 17px; }
  .contact__lead br { display: none; }
  .contact__cta { height: 68px; gap: 28px; padding-left: 30px; font-size: 17px; }
  .contact__cta-icon { width: 54px; height: 54px; }
  .contact__ways { grid-template-columns: 1fr; row-gap: 18px; width: 100%; margin-top: 40px; padding-top: 20px; }
  .contact__ways dd { font-size: 18px; }
  .contact__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* phones: the four social names sit two by two, on the columns above */
  .footer__col--social { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; justify-items: start; }
  .footer__col--social h3 { grid-column: 1 / -1; }
  .footer__col--mail a { grid-column: 1 / -1; white-space: nowrap; }   /* the address on one line */
  .clients__logos li { min-height: 0; padding-top: 0; border-right: 0; }
  .footer__wordmark { margin: 8px 0 24px; }
}
@media (min-width: 640px) and (max-width: 1023px), (min-width: 640px) and (max-width: 1180px) and (orientation: portrait) {
  .contact__ways { grid-template-columns: repeat(3, max-content); column-gap: 40px; }
  .contact__foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__col--social { grid-column: auto; display: flex; }
}

/* narrowest phones: the timeline keeps its four numbered stops; the names stay for screen
   readers (the active chapter's name is right below, in full) */
@media (max-width: 374px) {
  .pj__timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pj__stop-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .notfound__title { font-size: 30px; }
}
@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  .process { --pj-step: 46vh; }
}

/* Services, desktop composition: the active row's crimson rule runs on across the gap and
   meets the still, so the list and its picture read as one piece; the active name steps in. */
@media (min-width: 1181px), (min-width: 1024px) and (orientation: landscape) {
  .svc.is-active::after { right: calc(-1 * ((100% - 5 * var(--gutter)) / 6 + 2 * var(--gutter))); }
  .svc.is-active .svc__name { transform: translateX(calc(16 * var(--u))); }
  .svc.is-active .svc__arrow { transform: translateX(calc(8 * var(--u))); }
}

/* Services, desktop: the whole index — label, title, intro, six rows and the still — is one
   screen. The section is exactly the screen's height with the block centred under the
   header; on short screens the block's own unit shrinks so it still fits (the 12 columns,
   gutters and the still's bleed keep the page's unit, so nothing shifts sideways).
   760 = the block's height in units (at full size, plus what the text minimums add on short screens). */
@media (min-width: 1181px), (min-width: 1024px) and (orientation: landscape) {
  /* one-screen sections (services, portfolio): the room for the header (85u) and a margin
     (64px) is shared equally above and below the block, as the header hides while scrolling
     down; the top never gets less than the compact header (shown on scrolling up) + 8px */
  :root {
    --frame-pad-top: max((var(--header-h) + 64px) / 2, var(--header-compact) + 8px);
    --frame-pad-bottom: calc(var(--header-h) + 64px - var(--frame-pad-top));
  }
  .services {
    --u-page: var(--u);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: var(--frame-pad-top) 0 var(--frame-pad-bottom);
  }
  .services__pin { --u: min(var(--u-page), (100vh - var(--header-h) - 64px) / 760); }
}

/* Language switch: AL | EN, in the header's capsule style; the language on screen is
   filled. Two links: the same page at its Albanian and its English address. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  height: calc(46 * var(--u));
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--hdr-line);
  border-radius: 999px;
  background: var(--pill-bg);
  transition: border-color .35s ease, background-color .35s ease;
}
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-weight: 900;
  font-size: max(11.5px, calc(12 * var(--u)));
  letter-spacing: .1em;
  color: inherit;
  opacity: .62;
  transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
@media (hover: hover) { .lang-switch a:hover { opacity: 1; } }
.lang-switch a:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
.lang-switch a[aria-current="true"] { background: var(--pill-ink); color: var(--pill-on); opacity: 1; }
/* read by screen readers, not shown */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* narrow laptops: the centred nav, the switch, the header CTA and the menu button do not
   all fit; the CTA goes (it is in the hero, services, process, contact and the menu) */
@media (max-width: 1279px) { .header-actions .btn { display: none; } }

/* Portfolio, desktop: like services, one screen: the gallery and the copy centred under
   the header (the gallery's max height above leaves the same room). */
@media (min-width: 1181px), (min-width: 1024px) and (orientation: landscape) {
  .work { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: var(--frame-pad-top) 0 var(--frame-pad-bottom); }
  /* the copy, centred on the gallery, starts a column earlier; its left padding keeps the
     gap and the room for the label's arrow */
  .work__copy { grid-column: 8 / span 5; padding-left: calc(64 * var(--u)); }
}
/* narrow laptops: half and half, so the copy keeps a comfortable measure */
@media (min-width: 1181px) and (max-width: 1279px), (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
  .pf { grid-column: 1 / span 6; }
  .work__copy { grid-column: 7 / span 6; padding-left: calc(64 * var(--u)); }
}

/* the brief's honeypot: off screen for people, still filled in by form-filling bots */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Legal pages: privacy, terms, cookies ----------
   A quiet document on paper: a slim top bar, the title with a crimson dot, tabs between the
   three documents, a sticky list of sections beside a 68ch column, and a dark footer band. */
.legal { background: var(--bg); color: var(--ink); }
.legal-top { border-bottom: 1px solid var(--hair); --hdr-line: rgba(16, 16, 16, .1); --pill-bg: rgba(16, 16, 16, .035); --pill-ink: var(--ink); --pill-on: #fbf8f1; }
.legal-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.legal-top .logo__svg { height: 52px; }
.legal-top__actions { display: flex; align-items: center; gap: 20px; }
.legal-top__back { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
@media (hover: hover) { .legal-top__back:hover { color: var(--red); } }
.legal-top__arrow { font-size: 16px; transition: transform .3s var(--ease-out); }
@media (hover: hover) { .legal-top__back:hover .legal-top__arrow { transform: translateX(-3px); } }
.legal-top .lang-switch { height: 40px; min-height: 40px; }

.legal-main { padding: 72px 0 96px; }
.legal-main:focus { outline: none; }
.legal-head { max-width: 900px; }
.legal-title { margin: 22px 0 0; font-size: clamp(38px, 5.2vw, 76px); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.legal-title em { font-style: normal; font-weight: 300; color: var(--red); }
.legal-updated { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.legal-updated::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.legal-lead { max-width: 60ch; margin: 22px 0 0; font-size: max(17px, calc(20 * var(--u))); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.legal-tabs a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--hair); border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--ink-soft); transition: border-color .25s ease, color .25s ease, background-color .25s ease; }
@media (hover: hover) { .legal-tabs a:hover { border-color: var(--ink); color: var(--ink); } }
.legal-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fbf8f1; font-weight: 900; }

.legal-grid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 110px); margin-top: 64px; }
.legal-toc { position: sticky; top: 28px; align-self: start; }
.legal-toc p { margin: 0 0 14px; font-family: var(--mono); font-weight: 900; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.legal-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--hair); }
.legal-toc a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.35; color: var(--ink-soft); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.legal-toc a span { font-family: var(--mono); font-weight: 900; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
@media (hover: hover) { .legal-toc a:hover { color: var(--ink); border-left-color: var(--red); } }

.legal-doc { max-width: 68ch; min-width: 0; }
.legal-sec { scroll-margin-top: 24px; padding-top: 34px; border-top: 1px solid var(--hair); }
.legal-sec + .legal-sec { margin-top: 44px; }
.legal-sec h2 { display: flex; align-items: baseline; gap: 16px; margin: 0 0 16px; font-size: max(22px, calc(28 * var(--u))); font-weight: 900; line-height: 1.2; letter-spacing: -0.02em; }
.legal-sec__num { flex: none; font-family: var(--mono); font-weight: 900; font-size: 12px; letter-spacing: .1em; color: var(--red); }
.legal-sec p, .legal-list li { font-size: max(16px, calc(17 * var(--u))); line-height: 1.75; color: #2c2a28; }
.legal-sec p { margin: 0; }
.legal-sec p + p, .legal-sec p + ul, .legal-sec ul + p { margin-top: 14px; }
.legal-sec a, .legal-contact a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (hover: hover) { .legal-sec a:hover, .legal-contact a:hover { color: var(--red); } }
.legal-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.legal-list li { position: relative; padding-left: 26px; }
.legal-list li::before { content: ""; position: absolute; left: 2px; top: .8em; width: 11px; height: 2px; border-radius: 1px; background: var(--red); }

/* what the site keeps in the browser: one card per item */
.legal-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.legal-store { padding: 18px 20px; border: 1px solid var(--hair); border-radius: 14px; background: rgba(255, 255, 255, .45); }
.legal-store code { display: inline-block; padding: 3px 9px; border-radius: 6px; background: var(--ink); color: #fbf8f1; font: 900 13px/1.4 var(--mono); letter-spacing: .02em; }
.legal-store dl { display: grid; gap: 10px; margin: 14px 0 0; }
.legal-store dt { font-family: var(--mono); font-weight: 900; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.legal-store dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: #2c2a28; }

.legal-contact { margin-top: 56px; padding: 26px 28px; border-radius: 18px; background: var(--ink); color: #fbf8f1; }
.legal-contact p { margin: 0; font-size: 17px; line-height: 1.6; }
.legal-contact b { font-weight: 900; margin-right: 6px; }
.legal-contact a { color: #fbf8f1; text-decoration-color: var(--red-bright); }
@media (hover: hover) { .legal-contact a:hover { color: var(--red-bright); } }

.legal-foot { background: var(--black); color: #b9b3ac; font-size: 13px; }
.legal-foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 28px; }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.legal-foot a { color: #e6e1da; text-decoration: none; }
.legal-foot a[aria-current="page"] { color: var(--red-bright); }
@media (hover: hover) { .legal-foot a:hover { color: var(--red-bright); } }

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  .legal-top .logo__svg { height: 42px; }
  .legal-top__back { font-size: 0; gap: 0; }               /* the arrow alone on small screens */
  .legal-top__arrow { font-size: 20px; }
  .legal-main { padding: 44px 0 72px; }
  .legal-grid { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .legal-toc { display: none; }
  .legal-stores { grid-template-columns: minmax(0, 1fr); }
  .legal-contact { padding: 22px; }
}
/* the brief's privacy note, between the send button and the direct email */
.brief__privacy { flex: 1 1 180px; max-width: 250px; margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.brief__privacy a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 2px; }
@media (hover: hover) { .brief__privacy a:hover { color: var(--red); } }

/* ---------- Phones: mobile polish ---------- */

@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  /* Showreel eyes: the thin crimson accent keeps a dark halo over skin, the line under it
     keeps the page gutter, and the eye counter is the only counter on screen */
  .stage__eyes-title em { text-shadow: 0 0 2px rgba(10, 8, 8, .4), 0 2px 20px rgba(10, 8, 8, .75); }
  /* the shade reaches up behind the whole copy block, not only the bottom of the frame */
  .stage__eyes::before { background: linear-gradient(0deg, rgba(10, 8, 8, .82) 0%, rgba(10, 8, 8, .62) 48%, rgba(10, 8, 8, 0) 78%); }
  .stage__eyes-sub { padding-inline: 20px; }
  .stage__timeline { transition: opacity .4s ease; }
  .stage__bar.is-light .stage__timeline { opacity: 0; }

  /* Services: rows passing under the sticky still dissolve instead of being cut mid-line */
  .svc-preview::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 28px;
    background: linear-gradient(var(--bg), rgba(246, 243, 237, 0));
    pointer-events: none;
  }

  /* Portfolio: the tile number reads at the caption's size */
  .pf-tile__cap b { font-size: 1em; }

  /* Cookies table: labels at the site's 11.5px floor */
  .legal-store dt { font-size: 11.5px; }
}

@media (max-width: 640px) {
  /* Brief: a label that wraps grows its row instead of running into the options, and each
     error note hangs in a gap tall enough to hold it */
  .field__label { height: auto; min-height: 16px; font-size: 11px; }
  .field__hint { flex: none; padding-left: 12px; white-space: nowrap; }
  .brief__form { row-gap: 36px; }
  .field__error { margin-top: 7px; font-size: 11px; }
  /* the message shows its whole placeholder: three lines */
  .field__input--area { height: 96px; }
}

@media (max-width: 599px) {
  /* Hero stats: readable labels without the hairline above each, so the column still ends
     above the M's foot */
  .stats span { font-size: 11px; line-height: 1.25; letter-spacing: .03em; }
  .stats span::before { display: none; }
  .stats li, .stats li:nth-child(odd) { gap: 3px; }
}

/* Touch: 44px targets, through invisible hit areas where the drawn control stays small */
@media (pointer: coarse) {
  .lang-switch a { position: relative; }
  .lang-switch a::before { content: ""; position: absolute; inset: -5px 0; }
  .legal-top .lang-switch { height: 44px; min-height: 44px; }
  .legal-top__back { position: relative; }
  .legal-top__back::before { content: ""; position: absolute; inset: -10px -12px; }
  .pf.is-live .pf-pause { width: 44px; height: 44px; right: 12px; top: 12px; }
  .contact__ways a { position: relative; }
  .contact__ways a::before { content: ""; position: absolute; inset: -10px -4px; }
  .footer__top { position: relative; }
  .footer__top::before { content: ""; position: absolute; inset: -14px -8px; }
  .legal-foot__inner, .legal-foot nav { row-gap: 28px; }        /* room for the hit areas between rows */
  .legal-foot a { position: relative; }
  .legal-foot a::before { content: ""; position: absolute; inset: -14px -8px; }
}

/* Services, stacked: the list's last rule is the section's end, a short beat before the portfolio */
@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  .services { padding-bottom: 40px; }
}

/* ---------- Phones: the cinematic hero ----------
   The M with the girl in front of it at the top, on the paper of the page, which turns to
   a dark ground for the copy right under it: eyebrow, headline (white, then crimson), lead
   and the button (the figures are left to the larger screens). On the first scroll the M sets off down to the
   middle of the screen while the dark rises over the girl and the copy, turns white and
   opens into the showreel, as on desktop. */
.hero__eyebrow { display: none; }
@media (max-width: 599px) {
  .hero, .intro-on .hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    /* the M's box: its width (below) and its height under the 22px it tucks up under the header */
    /* the M and the girl as wide as the screen (the M's right stem 12px from the edge); shorter
       phones scale it down below, so the button stays on the first screen */
    --vis-w: calc(100vw - 12px);
    --vis-h: calc(var(--vis-w) * .894 - 40px);
    padding: 0;
    /* paper behind the M and the girl; from about her shoulders it eases into the dark of
       the copy (an eased ramp, no visible band), reaching it on the M's foot line, so the copy
       that rises under the foot sits on the full dark */
    --foot: calc(var(--vis-h) - var(--vis-w) * .06);   /* the bottom line of the M's foot */
    /* the steps are the oklab mixes of --bg and --black (80, 46, 18, 5% paper) written out:
       color-mix() is not in Safari before 16.2, and without it the whole background was
       dropped, leaving the white copy on white. Solid dark under the gradient as a last guard */
    background-color: var(--black);
    background-image: linear-gradient(180deg,
      var(--bg) calc(var(--foot) * .38),
      #c2bfbb calc(var(--foot) * .5),
      #6f6e6b calc(var(--foot) * .62),
      #323231 calc(var(--foot) * .74),
      #191919 calc(var(--foot) * .84),
      var(--black) calc(var(--foot) * .92));
  }
  /* the copy in the dark under the image: the spare height splits evenly above and below it
     (auto margins, each side at least 24px), with a little more room under the button on
     taller screens, so the block sits a touch above the middle. It sits above the girl's
     dark foot (z 6; it fades out on the first scroll) */
  .hero__content { position: relative; flex: none; order: 1; margin: auto 0; padding: 24px 20px max(24px, 11vh - 30px); padding-bottom: max(24px, 11svh - 30px); color: #fbf8f1; }
  .intro-on .hero__content { z-index: 6; }

  .hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: var(--mono);
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(251, 248, 241, .86);
  }
  .hero__eyebrow::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--red-bright); }
  .hero__title { margin-top: 6px; padding-bottom: 6px; }   /* ~11px from the eyebrow to the headline's accents */
  .hero__title em { margin-top: 4px; }      /* a breath between the white line and the crimson one */
  .hero__title-sans { color: #fbf8f1; }
  .hero__title em { color: var(--red-bright); font-weight: 900; letter-spacing: -0.035em; }
  .hero__title-sans, .hero__title em { font-size: clamp(30px, 9.4vw, 46px); }
  /* the lead: brighter and a touch larger, so it reads on the dark */
  .hero__lead { max-width: 34ch; margin-top: 14px; font-size: 17px; line-height: 1.55; color: rgba(251, 248, 241, .94); }
  .hero__ctas { margin-top: 26px; }

  /* the button: balanced padding (a little less on the arrow side), a soft crimson glow and a
     lit top edge; pressing settles it slightly (scale and a tighter glow) and the arrow steps on;
     where there is a pointer, a deeper crimson floods in from the pointer */
  .hero__ctas .btn--lg {
    --fill: #8c0c27;
    height: 56px;
    gap: 16px;
    padding: 0 24px 0 30px;
    font-size: 16px;
    letter-spacing: .005em;
    box-shadow: 0 16px 30px -18px rgba(227, 23, 62, .75), inset 0 1px 0 rgba(255, 255, 255, .16);
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s cubic-bezier(.2, .7, .2, 1), color .35s ease .05s;
    -webkit-tap-highlight-color: transparent;
  }
  /* the arrow: it glides 5px on and stretches a touch, then eases home; no loop */
  .hero__ctas .btn--lg .arrow { width: 20px; transform-origin: 0 50%; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
  .hero__ctas .btn--lg:active {
    transform: scale(.97);
    box-shadow: 0 8px 18px -12px rgba(227, 23, 62, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
    transition-duration: .2s;
  }
  .hero__ctas .btn--lg:active .arrow { transform: translateX(5px) scaleX(1.12); transition-duration: .25s; }
  .hero__ctas .btn--lg:focus-visible { outline: 2px solid #fbf8f1; outline-offset: 3px; }
  @media (hover: hover) {
    .hero__ctas .btn--lg:hover { transform: translateY(-1px); box-shadow: 0 20px 34px -18px rgba(227, 23, 62, .85), inset 0 1px 0 rgba(255, 255, 255, .2); }
    .hero__ctas .btn--lg:hover .arrow { animation: none; transform: translateX(5px) scaleX(1.12); }
    .hero__ctas .btn--lg:hover:active { transform: scale(.97); }
  }

  .stats { display: none; }

  /* the girl sits under the same grey-to-dark haze as the paper behind her: from her chest it
     greys and darkens, solid dark well before her cut-out ends. The gradient is masked by her
     own cut-out (drawn like the image: contained, bottom-centred), so the M behind her keeps
     its colour */
  .hero__girl::after {
    content: "";
    position: absolute;
    inset: 0 0 -1px;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0) 24%, rgba(52, 52, 51, .42) 44%, rgba(30, 30, 30, .74) 62%, rgba(16, 16, 16, .94) 76%, var(--black) 86%);
    -webkit-mask: url("../img/hero-girl-700.webp") 50% 100% / contain no-repeat;
            mask: url("../img/hero-girl-700.webp") 50% 100% / contain no-repeat;
    -webkit-mask-image: image-set(url("../img/hero-girl-700.avif") type("image/avif"), url("../img/hero-girl-700.webp") type("image/webp"));
            mask-image: image-set(url("../img/hero-girl-700.avif") type("image/avif"), url("../img/hero-girl-700.webp") type("image/webp"));
    pointer-events: none;
  }
  .hero__script { z-index: 1; left: 52%; }  /* the signature stays bright above that black, in from the screen edge */
  /* her box's bottom edge on the dark: a solid strip, so no lighter hairline can show there
     (Safari draws the masked edge a pixel short) */
  .hero__girl::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    z-index: 1;
    height: 4px;
    background: var(--black);
    pointer-events: none;
  }
  /* the M and the girl at the top, the M's right stem on the screen edge; as large as the
     screen allows. The girl's box starts with empty air above her head: it tucks 40px up
     under the header */
  .hero__visual, html:not(.intro-on) .hero__visual {
    position: relative;
    order: 0;
    width: var(--vis-w);
    margin: -40px 0 0 auto;
  }
}


/* Phones: About's photo as a whole diamond, centred, with its caption centred under the tip
   (the desktop kite, cut to run off the screen's top and right edges, floated mid-page here) */
@media (max-width: 639px) {
  .about { padding-bottom: 72px; }
  .about__media { width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
  .about__shape { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 25% 25%); }
  .js-reveal .about__media .about__shape { clip-path: polygon(50% 0, 50% 0, 0 50%, 0 50%, 25% 25%); }
  .js-reveal .about__media.is-in .about__shape { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 25% 25%); }
  .about__media img,
  .js-reveal .about__media[data-reveal-media].is-in img { transform: scale(1.04); object-position: 50% 40%; }
  .js-reveal .about__media[data-reveal-media] img { transform: scale(1.1); }
  .about__fig { justify-self: center; justify-content: center; margin: 4px 0 0; text-align: center; letter-spacing: .14em; }
  .about__fig::before { display: none; }
}

/* Browsers without the small / dynamic viewport units (Safari < 15.4, Chrome < 108): the
   custom properties above that use them would be invalid where they are read, so they get
   the same sizes in vh here (the window's full height, near enough for these) */
@supports not (height: 1svh) {
  .about { --ab-h: max(360px, min(calc((100vh - 150px) * .97), 42vw)); }
  .menu[open] { --row: clamp(56px, calc((100vh - var(--header-h) - 190px) / 5), calc(118 * var(--u))); }
  .brief { --k: clamp(0px, (100vh - 660px) / 300, 1px); }
}
@media (max-width: 1023px), (max-width: 1180px) and (orientation: portrait) {
  @supports not (height: 1svh) {
    .menu[open] { --row: clamp(52px, calc((100vh - var(--header-h) - 250px) / 5), 72px); }
  }
}

/* the narrowest phones: the hero's eyebrow keeps to one line (it wrapped "TIRANË" alone at 320px) */
@media (max-width: 359px) {
  .hero__eyebrow { gap: 10px; letter-spacing: .22em; }
  .hero__eyebrow::before { width: 20px; }
}

/* Phones with less height (iPhone 13/14 with Safari's bars ~664px, SE ~553px): the copy under
   the larger M sits a little tighter, so the button stays on the first screen; the shortest
   screens give the M a little less width for the same reason */
@media (max-width: 599px) and (max-height: 760px) {
  .hero__content { padding-top: 14px; }
  .hero__lead { margin-top: 10px; font-size: 16px; line-height: 1.5; }
  .hero__ctas { margin-top: 18px; }
}
@media (max-width: 599px) and (max-height: 650px) {
  .hero, .intro-on .hero { --vis-w: 90vw; }
}
@media (max-width: 599px) and (max-height: 600px) {
  .hero, .intro-on .hero { --vis-w: 72vw; }
}

/* Phones: the pinned intro covers the tallest viewport (Safari's bars collapse as soon as the
   visitor scrolls, and a pin sized to the small viewport left a strip of the page's paper under
   it), on the dark of the hero's copy; and its run is shorter (set at the end of this file = main.js len() on phones) */
@media (max-width: 599px) {
  .intro-on .intro::after { height: 133vh; height: 133svh; }
  /* what lies behind the pinned shot is dark as well: a seam under the pin (sub-pixel rounding,
     or Safari's bars collapsing / expanding) then never shows the paper as a light line */
  .intro-on .intro { background: var(--black); }
  .intro-on .intro__pin { top: min(0px, calc(100vh - var(--pin-h, 100vh))); top: min(0px, calc(100lvh - var(--pin-h, 100lvh))); min-height: 100vh; min-height: 100lvh; background: linear-gradient(var(--bg) 50%, var(--black) 50%); }
  .intro-on .stage { height: 100vh; height: 100lvh; }
}
.brief__title:focus { outline: none; }
.menu:focus { outline: none; }   /* the menu itself holds focus when opened by a tap or a click */

/* ==========================================================================
   Phones (≤767px): mobile refinement. Every rule below is inside this width, so
   tablets in landscape, laptops and desktops are untouched.
   ========================================================================== */

/* Intro: its run on phones (= main.js len(): 161vh on phones, 171vh from 600 to 767px) */
@media (max-width: 767px) {
  .intro-on .intro::after { height: 171vh; height: 171svh; }
}
@media (max-width: 599px) {
  .intro-on .intro::after { height: 161vh; height: 161svh; }
}

/* Hero: on taller phones the three figures come back as one row under the button, on the
   dark, so the copy block fills the screen instead of floating in it; the M sits closer */
@media (max-width: 599px) and (min-height: 740px) {
  .hero .stats {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0;
    margin: 30px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(251, 248, 241, .14);
  }
  .hero .stats li, .hero .stats li:nth-child(odd) { gap: 6px; padding: 0 0 0 14px; border-left: 1px solid rgba(251, 248, 241, .14); }
  .hero .stats li:first-child { padding-left: 0; border-left: 0; }
  .hero .stats .stats__since { display: none; }
  .hero .stats strong { font-size: clamp(24px, 7vw, 30px); color: #fbf8f1; }
  .hero .stats strong i { color: var(--red-bright); }
  .hero .stats span { font-size: 10.5px; line-height: 1.35; letter-spacing: .08em; color: rgba(251, 248, 241, .72); white-space: normal; }
  .hero .stats span br { display: none; }
}
@media (max-width: 599px) {
  /* the lead and the eyebrow at full strength on the dark */
  .hero__lead { color: #f3efe9; }
  .hero__eyebrow { color: #f3efe9; }
  /* headline: each line kept whole, balanced if it must wrap */
  .hero__title-sans, .hero__title em { text-wrap: balance; }
  .hero__content { padding-bottom: max(20px, 7svh - 24px); }
}

@media (max-width: 767px) {
  /* ---- Services: the active row reads in full under the still (main.js) ---- */
  .svc { padding: 16px 0; }
  .svc__name { transition: color .35s ease; }
  .svc.is-active .svc__arrow { color: var(--red); }
  .svc__desc { color: #5f5a54; }
  .svc.is-active .svc__desc { color: var(--ink-soft); }
  .svc-preview__big { left: 20px; bottom: 10px; }
  /* the still's lower edge is a crisp hairline the rows slide under */
  .svc-preview__media { box-shadow: 0 1px 0 rgba(16, 16, 16, .06); }

  /* ---- Portfolio: titles on a shade at the foot of each tile, larger and always legible ---- */
  .pf-tile::after {
    content: "";
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(180deg, rgba(10, 8, 8, 0) 0%, rgba(10, 8, 8, .55) 55%, rgba(10, 8, 8, .82) 100%);
    pointer-events: none;
  }
  .pf-tile__cap, .pf.is-live .pf-tile__cap {
    left: 14px;
    right: 14px;
    bottom: 13px;
    max-width: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
    opacity: 1;
    transform: none;
  }
  .pf-tile__cap b { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; }
  .work__copy .body { color: #c9c3bb; }

  /* ---- About: the headline, the copy and the diamond closer together ---- */
  .about__grid { row-gap: 28px; }
  .about__copy .body { margin-top: 22px; color: var(--ink-soft); }

  /* ---- Process: one large still, then the chapter; fewer competing sizes, a shorter run ---- */
  .process { --pj-step: 52vh; }
  .pj { margin-top: 32px; }
  .pj__visual { border-radius: 14px; }
  .pj__timeline { margin-top: 18px; }
  .pj__stop { padding-top: 14px; padding-bottom: 8px; min-height: 48px; }
  .pj__stop-name { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  .pj__panels { margin-top: 22px; }
  .pj__num { font-size: clamp(52px, 15vw, 68px); }
  .pj__kicker { margin-top: 12px; }
  .pj__title { margin-top: 8px; font-size: clamp(24px, 6.4vw, 30px); }
  .pj__text { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: #ddd7d0; }

  /* ---- Clients: a hairline wall of equal cells (five marks: two over three) ---- */
  .clients__inner { padding-block: 48px; }
  .clients__logos:has(> li:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    margin-top: 28px;
    padding: 0;
    border: 1px solid rgba(16, 16, 16, .09);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(16, 16, 16, .09);
    zoom: 1;
  }
  .clients__logos:has(> li:nth-child(5):last-child) li { grid-column: span 2; min-height: 84px; background: var(--bg); }
  .clients__logos:has(> li:nth-child(5):last-child) li:nth-child(-n+2) { grid-column: span 3; min-height: 96px; }
  .wm { color: #3f3b38; }
  .wm--vodafone { font-size: 17px; }
  .wm--one { font-size: 25px; }
  .wm--redbull { font-size: 18px; }
  .wm--audi { font-size: 17px; }
  .wm--teg { font-size: 22px; }

  /* ---- Contact: the call to action leads, the ways in sit tighter under it ---- */
  .contact__lead { color: #e9e4dd; }
  .contact__cta { width: 100%; justify-content: space-between; padding-right: 7px; }
  .contact__ways { margin-top: 32px; row-gap: 16px; }
  .contact__ways dt { color: #b9b3ab; }
  .contact__main { padding-bottom: 40px; }
  .contact__foot { padding-top: 36px; }

  /* ---- Project form: readable labels and placeholders, services two by two ---- */
  .field__label { font-size: 11.5px; }
  .field__input::placeholder { color: #857e74; }
  .field__error { font-size: 11.5px; }
  .brief .options:not(.options--budget) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief .options:not(.options--budget) .option__box { height: auto; min-height: var(--h-option); padding: 8px 12px; white-space: normal; line-height: 1.2; font-size: 13.5px; }
  .brief .options:not(.options--budget) .option:last-child { grid-column: 1 / -1; }
  .field__input { font-size: 16px; }          /* iOS never zooms into a field of 16px or more */
  .field__input:focus { scroll-margin-block: 96px; }

  /* ---- Global: small text no lighter than the page's muted ink, comfortable tap areas ---- */
  .label { font-size: 11.5px; }
  .footer__bottom { font-size: 12.5px; }
}

/* narrowest phones: the process timeline keeps its numbers only (≤374, as before) and the
   form's service options stay one per row where two would crowd */
@media (max-width: 359px) {
  .brief .options:not(.options--budget) { grid-template-columns: minmax(0, 1fr); }
  .brief .options:not(.options--budget) .option:last-child { grid-column: auto; }
  .clients__logos:has(> li:nth-child(5):last-child) li { min-height: 74px; }
  .wm--redbull { font-size: 16px; }
  .wm--audi { font-size: 15px; }
}