/* ==========================================================================
   The Branding Studio — v2
   Premise: the studio is monochrome. The work is where colour lives.
   ========================================================================== */

/* Athletics, three static faces. The weight ranges are stated so the browser
   never synthesises: the CSS below asks for 400–600, which all lands on
   Regular. Light and Black are declared for future use and are only ever
   downloaded if something actually renders in them. */
@font-face {
  font-family: "Athletics";
  src: url("../fonts/athletics-light.woff2") format("woff2");
  font-weight: 100 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Athletics";
  src: url("../fonts/athletics-regular.woff2") format("woff2"),
       url("../fonts/athletics-regular.woff") format("woff");
  font-weight: 351 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Athletics";
  src: url("../fonts/athletics-black.woff2") format("woff2");
  font-weight: 701 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #000000;
  --paper: #ffffff;
  --ash: #676767;
  --smoke: #999999;

  /* Surface-relative tokens. Flipped wholesale by .invert. */
  --bg: var(--ink);
  --fg: var(--paper);
  --dim: var(--smoke);
  --rule: transparent;
  --rule-faint: transparent;

  /* One typeface, three roles, all Athletics. */
  --display: "Athletics", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Athletics", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Athletics", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-mono: clamp(0.625rem, 0.6rem + 0.12vw, 0.75rem);
  --t-body: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --t-lead: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  --t-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
  --t-h2: clamp(2.25rem, 1.2rem + 4.4vw, 6rem);
  --t-h1: clamp(3rem, 1rem + 8vw, 11rem);
  --t-colossal: clamp(3.5rem, -0.5rem + 17vw, 18rem);

  --gutter: clamp(1.5rem, 1rem + 4vw, 6.5rem);
  --band: clamp(4.5rem, 2.5rem + 8vw, 13rem);
  --maxw: 1780px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-pill: 999px;
}

/* Single ground: the whole site sits on black. */
.invert {
  --bg: var(--ink);
  --fg: var(--paper);
  --dim: var(--smoke);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: #000; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip {
  border-radius: 0 0 var(--r-sm) 0;
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--paper); color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-family: var(--mono); font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.skip:focus { transform: translateY(0); }

/* ------------------------------------------------------- section machine -- */
.sect {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--band);
}
.sect--tight { padding-block: calc(var(--band) * 0.5); }
.sect--flush { padding-block: 0; }

.shell {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Registration marks. Print vernacular, borrowed honestly: this studio
   delivers artwork, so the page is marked up like artwork. */
.sect[data-marks]::before,


/* ---------------------------------------------------------------- type --- */
.mono, .eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.eyebrow { display: block; }

.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-wrap: balance;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 {
  font-size: var(--t-h3); font-family: var(--display);
  font-weight: 500; line-height: 1.05; letter-spacing: -0.03em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.25;
  letter-spacing: -0.025em;
  max-width: 26ch;
}

.prose p { max-width: 64ch; color: color-mix(in srgb, var(--fg) 76%, transparent); }
.prose p + p { margin-top: 1.15em; }

/* -------------------------------------------------------------- header --- */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  mix-blend-mode: difference;
  transition: transform 0.4s var(--ease);
}
.masthead.is-hidden { transform: translateY(-100%); }
/* Difference blending is what makes the header legible over any content, but
   it also cancels out the black of the open menu. Off while the menu is up. */
.masthead.is-menu { mix-blend-mode: normal; transform: none; }
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 108px;
}
.masthead__right {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 2.6vw, 3rem);
}
.logo { display: flex; align-items: center; color: #fff; }
.logo img { height: clamp(42px, 4.6vw, 68px); width: auto; }
.logo .wordmark {
  font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.4rem);
  letter-spacing: -0.01em; text-transform: uppercase; display: none;
}
.logo.is-missing img { display: none; }
.logo.is-missing .wordmark { display: block; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.75rem); }
.nav a {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  padding-block: 0.5rem; transition: color 0.25s var(--ease);
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: #fff; }

.nav-toggle {
  border-radius: var(--r-pill);
  display: none; color: #fff;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4); padding: 0.5rem 0.85rem;
}

/* ---------------------------------------------------- hero: type as lens --
   The reel plays inside the letterforms. An SVG mask knocks the wordmark out
   of a black plate; the video sits behind it. Nothing else on the screen.   */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 88svh, 1040px);
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: stretch;
  padding-block: clamp(7rem, 14vw, 12rem) clamp(2rem, 5vw, 4rem);
  background: var(--ink);
}


/* Legible even before the reel is restored. */


.hero > .shell { width: 100%; }





/* No blend-mode support: fall back to plain white on black. */
.hero__foot .lead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 0.9rem + 0.75vw, 1.75rem);
  text-wrap: balance;
}

/* The home proposition reads as one uninterrupted sentence, so it is set on
   a single line and sized off the viewport to fill the measure. Below the
   breakpoint one line would be unreadably small, so it wraps again.
   site.js trims the size further if a translation runs long. */
.hero__foot .lead--single {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1rem, 1.78vw, 1.9rem);
  letter-spacing: -0.022em;
  text-wrap: nowrap;
}
.hero__foot > .actions { margin-top: clamp(1.75rem, 3.2vw, 3rem); }

@media (max-width: 1000px) {
  .hero__foot .lead--single {
    white-space: normal;
    text-wrap: balance;
    max-width: 30ch;
    font-size: clamp(1.05rem, 0.9rem + 0.75vw, 1.6rem);
  }
}

.hero__scroll {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.6rem;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 2.5rem; background: currentColor;
  transform-origin: top;
  animation: drop 2.4s var(--ease) infinite;
}
@keyframes drop {
  0%, 100% { transform: scaleY(0.25); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------------------------------------------------------- statement ---- */
.statement { font-size: var(--t-colossal); line-height: 0.82; letter-spacing: -0.055em; }
.statement .indent { padding-left: 0.3em; }

/* --------------------------------------------------------------- buttons -- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* Two calls to action side by side need air between them, or they read as
   one wide object instead of a choice. */
.actions--wide { gap: clamp(0.75rem, 1.6vw, 1.75rem); }
.btn {
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid currentColor;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--fg); }

/* ------------------------------------------------------- the work index --- */
.index { border-top: 1px solid var(--rule); }

.index__row {
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 12rem minmax(0, 0.85fr) 2.5rem;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 2rem);
  padding: clamp(0.85rem, 1.6vw, 1.35rem) clamp(0.5rem, 1.2vw, 1.25rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.index__row:hover, .index__row:focus-visible {
  background: var(--fg); color: var(--bg); outline: none;
}
.index__row:hover .index__meta, .index__row:focus-visible .index__meta,
.index__row:hover .index__line, .index__row:focus-visible .index__line {
  color: var(--bg);
}

.index__meta {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); transition: color 0.4s var(--ease);
}

.index__name {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 0.9rem + 3.4vw, 5rem);
  line-height: 0.9; letter-spacing: -0.05em;
  transition: transform 0.5s var(--ease);
}
.index__row:hover .index__name { transform: translateX(0.3em); }

.index__line {
  color: var(--dim);
  font-size: clamp(0.85rem, 0.8rem + 0.22vw, 1rem);
  line-height: 1.3; transition: color 0.4s var(--ease);
}

/* The one place colour is allowed in: the work itself. */
.index__thumb {
  border-radius: var(--r-md);
  width: 12rem; aspect-ratio: 4 / 3; overflow: hidden;
  background: #0d0d0d;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.55s var(--ease);
}
.index__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  transition: filter 0.6s var(--ease);
  transform: scale(1.06);
}
.index__row:hover .index__thumb, .index__row:focus-visible .index__thumb {
  clip-path: inset(0 0 0 0);
}
.index__row:hover .index__thumb img { filter: none; }
.index__thumb.is-missing { visibility: hidden; }

.index__arrow {
  justify-self: end; font-family: var(--mono); font-size: 1.1rem;
  opacity: 0; transform: translateX(-0.6rem);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.index__row:hover .index__arrow, .index__row:focus-visible .index__arrow {
  opacity: 1; transform: translateX(0);
}

/* ------------------------------------------------------------- services --
   Six cards, two columns. The icon leads at full size, the number reads as a
   plate number under it, and every element in every card hangs off the same
   left edge — nothing is optically indented against anything else. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 5.5vw, 6rem) clamp(2rem, 4vw, 4.5rem);
}
.service { display: block; }
.service .icon { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
.service__no {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; color: var(--dim);
  margin-bottom: 0.85rem;
}
.service .h3 { max-width: 20ch; }
.service__body {
  margin-top: clamp(0.85rem, 1.4vw, 1.25rem);
  color: color-mix(in srgb, var(--fg) 72%, transparent);
  max-width: 46ch;
}
@media (max-width: 900px) { .services-grid { grid-template-columns: minmax(0, 1fr); } }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2rem; }
.tags li {
  border-radius: var(--r-pill);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 0.5rem 0.85rem; color: var(--dim);
}

/* ---------------------------------------------------------------- media --
   Case-study imagery arrives desaturated and resolves to full colour as it
   enters the viewport: the frame is the studio, the picture is the client.  */
.frame {
  border-radius: var(--r-lg);
  position: relative; background: #0b0b0b;
  border: 1px solid var(--rule-faint); overflow: hidden;
}
.frame img, .frame video {
  width: 100%; height: auto; display: block;
  filter: grayscale(100%) contrast(1.05);
  transition: filter 1s var(--ease);
}
/* no forced ratio and no cover: every asset is shown complete */
.frame--wide { aspect-ratio: auto; }
.frame.is-in img, .frame.is-in video { filter: none; }

.frame::after {
  content: attr(data-file);
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; color: var(--ash);
  background: repeating-linear-gradient(45deg, #0b0b0b 0 12px, #101010 12px 24px);
}
.frame.is-missing {
  aspect-ratio: auto; width: 100%;
  min-height: clamp(170px, 24vw, 340px);
}
.frame.is-missing::after { display: flex; }
.frame.is-missing img, .frame.is-missing video { display: none; }

.media-stack { display: grid; gap: clamp(0.5rem, 1.2vw, 1.25rem); }
.media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.5rem, 1.2vw, 1.25rem); }

/* ------------------------------------------------------------ pullquote -- */
.pull {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 0.9rem + 3.6vw, 5rem);
  line-height: 0.94; letter-spacing: -0.045em;
  max-width: 20ch; text-wrap: balance;
}

.testimonial { border-top: 1px solid var(--rule); padding-top: clamp(2rem, 4vw, 3.5rem); }
.testimonial blockquote {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.03em; max-width: 44ch;
}
.testimonial figcaption { margin-top: 1.5rem; }

/* -------------------------------------------------------- project pages -- */
.project-head { padding-block: clamp(6rem, 12vw, 12rem) clamp(2rem, 4vw, 4rem); }
.project-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 3rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 5rem);
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 5vw, 5rem);
}
.section-head .h3 { margin-bottom: 1.25rem; }

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem); align-items: start;
}

/* ------------------------------------------------------- embedded reel --- */
.filmstrip {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b0b0b;
}
.filmstrip iframe, .filmstrip video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  object-fit: cover;
}
.filmstrip__poster {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1.25rem;
  background: #000; color: #fff; cursor: pointer;
  transition: opacity 0.5s var(--ease);
}
.filmstrip__poster video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.5;
  filter: grayscale(100%) contrast(1.2);
}
.filmstrip__play {
  position: relative;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 1rem 2rem;
  font-size: var(--t-mono); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.filmstrip__poster:hover .filmstrip__play { background: #fff; color: #000; }
.filmstrip.is-playing .filmstrip__poster { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ reel CTA --- */
.reel {
  border-radius: var(--r-xl);
  display: block; position: relative; width: 100%;
  border: 1px solid var(--rule); padding: clamp(3rem, 8vw, 7rem) var(--gutter);
  text-align: center; overflow: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.reel:hover { background: var(--fg); color: var(--bg); }
.reel__label { font-size: clamp(2rem, 1rem + 5vw, 7rem); line-height: 0.9; }
.reel__meta { margin-top: 1.25rem; }

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, 0.97);
  display: none; align-items: center; justify-content: center;
  padding: var(--gutter);
}
.lightbox.is-open { display: flex; }
.lightbox__inner { width: min(1400px, 100%); aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
.lightbox iframe { width: 100%; height: 100%; border: 0; }
.lightbox__close {
  border-radius: var(--r-pill);
  position: absolute; top: var(--gutter); right: var(--gutter);
  color: #fff; font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4); padding: 0.5rem 0.9rem;
}

/* -------------------------------------------------------------- contact -- */
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--rule); padding-top: clamp(2rem, 4vw, 3.5rem);
}
.contact-grid a.big {
  font-family: var(--display);
  font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.75rem);
  letter-spacing: -0.03em; line-height: 1.15;
  border-bottom: 1px solid var(--rule); display: inline-block;
  transition: border-color 0.25s var(--ease);
}
.contact-grid a.big:hover { border-color: currentColor; }

/* --------------------------------------------------------------- footer -- */
.footer { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 5vw, 5rem) 2rem; overflow-x: clip; }
.footer__cta {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.75rem, -0.5rem + 12.5vw, 13rem);
  line-height: 0.82; letter-spacing: -0.055em;
  display: block; margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.footer__cta span { display: block; padding-bottom: 0.2em; margin-bottom: -0.2em; transition: transform 0.5s var(--ease); }
.footer__cta:hover span:last-child { transform: translateX(0.08em); }

.footer__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem; padding-top: 2.5rem; border-top: 1px solid var(--rule);
}
.footer__cols li + li { margin-top: 0.55rem; }
.footer__cols a { color: var(--dim); transition: color 0.25s var(--ease); }
.footer__cols a:hover { color: var(--fg); }

.footer__base {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--rule-faint);
}

/* -------------------------------------------------------------- reveals -- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* Line-by-line entrance for the colossal statements. */
/* The mask has to clear the descenders, so it is grown downwards and the
   extra height pulled back with a negative margin. Lines may overlap
   slightly; letters are never cut. */
.stagger span {
  display: block; overflow: hidden;
  padding-bottom: 0.24em; margin-bottom: -0.24em;
}
.stagger span > i {
  display: block; font-style: normal;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.stagger.is-in span > i { transform: translateY(0); }
.stagger.is-in span:nth-child(2) > i { transition-delay: 0.08s; }
.stagger.is-in span:nth-child(3) > i { transition-delay: 0.16s; }
.stagger.is-in span:nth-child(4) > i { transition-delay: 0.24s; }

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  .index__row { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 0.8fr) 2rem; }
  .index__thumb { display: none; }
  .section-head { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  /* The masthead blends with the page behind it, which turns any black panel
     inside it invisible. While the menu is open the blend is switched off and
     the panel is a solid black sheet; the logo, the toggle and the language
     switch are lifted above it so they stay usable. */
  .logo, .nav-toggle, .lang { position: relative; z-index: 2; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0; padding: 6.75rem var(--gutter) var(--gutter);
    background: var(--ink);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-101%); visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0.5s;
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav a {
    font-family: var(--display); font-size: clamp(2.25rem, 13vw, 4rem);
    font-weight: 500; line-height: 1; letter-spacing: -0.05em;
    text-transform: none; color: #fff; width: 100%;
    padding-block: 0.35em; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .index__row { grid-template-columns: 2.75rem minmax(0, 1fr); padding-inline: 0; }
  .index__arrow { display: none; }
  .index__line { grid-column: 2; margin-top: 0.4rem; }
  .index__row:hover .index__name { transform: none; }
  .section-head { grid-template-columns: 1fr; gap: 0.75rem; }
  .media-duo { grid-template-columns: 1fr; }
  .hero { height: 92svh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stagger span > i { transform: none; }
  .frame img, .frame video { filter: none; transform: none; }
}

@media print {
  .masthead, .hero { display: none; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Visual work grid — the projects carry the page, the type gets out of the way
   ========================================================================== */
.showcase { display: grid; gap: clamp(0.5rem, 1.2vw, 1.25rem); }
@media (min-width: 760px) {
  .showcase { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .showcase { grid-template-columns: repeat(3, 1fr); }
}

.showcase__item {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg);
  background: #0b0b0b;
  aspect-ratio: 1 / 1;
}

/* the tile is the frame: cover art fills it edge to edge */
.showcase__media,
video.showcase__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: #0b0b0b;
  filter: grayscale(100%) contrast(1.06);
  transition: filter 0.7s var(--ease), transform 1.2s var(--ease);
}
.showcase__item.is-in .showcase__media { filter: none; }
.showcase__item:hover .showcase__media { transform: scale(1.04); }

.showcase__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.18) 42%, rgba(0,0,0,0) 70%);
  transition: opacity 0.5s var(--ease);
}
.showcase__item:hover .showcase__veil { opacity: 0.55; }

.showcase__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 2.2vw, 2rem);
  color: #fff; z-index: 2;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.4em;
}
.showcase__name,
.showcase__code {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.5rem);
  line-height: 1.1; letter-spacing: -0.03em;
}
.showcase__code { color: rgba(255, 255, 255, 0.66); }

/* ------------------------------------------------------------- sectors --- */
.sector {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.sector:last-of-type { border-bottom: 1px solid var(--rule); }
.sector__line {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 0.95rem + 1.3vw, 2.25rem);
  line-height: 1.02; letter-spacing: -0.035em; margin-top: 1rem;
}
.sector__proof { margin-top: 1.75rem; display: grid; gap: 0.4rem; }
.sector__proof li {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  padding-top: 0.4rem; border-top: 1px solid var(--rule-faint);
}

/* ---------------------------------------------------------------- team --- */
.team {
  display: grid; gap: clamp(0.75rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.team__card {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg);
}
.team__photo { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.team__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(100%);
  transition: transform 1s var(--ease);
}
.team__card:hover .team__photo img { transform: scale(1.05); }
.team__meta { padding: clamp(0.75rem, 1.4vw, 1.1rem); }
.team__name {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  letter-spacing: -0.02em; line-height: 1.1;
}
.team__role {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); margin-top: 0.4rem; line-height: 1.35;
}

.founder {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: start;
}
.founder__photo {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule);
}
.founder__photo img { width: 100%; display: block; filter: grayscale(100%); }

@media (max-width: 900px) {
  .sector, .founder { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}


/* ---------------------------------------------------------- client wall -- */
.clients { margin-top: clamp(2rem, 4vw, 3.5rem); }
.clients img {
  width: 100%; height: auto; display: block;
  mix-blend-mode: screen;      /* the sheet's black ground disappears */
  filter: grayscale(100%);
}

.founder__photo img { width: 100%; height: auto; display: block; }


/* ------------------------------------------------------- language switch -- */
.lang {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.lang a { color: rgba(255, 255, 255, 0.45); transition: color 0.25s var(--ease); }
.lang a[aria-current="true"] { color: #fff; }
.lang a:hover { color: #fff; }
.lang span { color: rgba(255, 255, 255, 0.3); }

/* ------------------------------------------------------------- promise --- */
.promise {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.promise__item h3 { margin-bottom: 0.75rem; }
.promise__item p { color: color-mix(in srgb, var(--fg) 74%, transparent); max-width: 40ch; }


/* The hero claim must fit the measure, so it overrides the shared statement
   size. Raised specificity because .statement sets font-size too. */
.hero .hero__type {
  margin: 0;
  font-size: clamp(1.85rem, 8.55vw, 10.5rem);
  letter-spacing: -0.04em;
}
@media (max-width: 760px) {
  .hero .hero__type { line-height: 0.94; }
}


/* ==========================================================================
   Iconography — nine geometric marks on a 48 unit grid
   Stroked in currentColor so they belong to the type, not to a palette.
   Every animation is transform / opacity / dash only, runs once the row is
   on screen, and rests on the finished drawing: with motion off the icons
   are still complete.
   ========================================================================== */
.icon {
  --icon-size: clamp(2.25rem, 3.4vw, 3.25rem);
  display: block; flex: none;
  width: var(--icon-size); height: var(--icon-size);
  color: var(--fg);
}
.icon--lg { --icon-size: clamp(4.5rem, 7vw, 7rem); }
.icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.icon--lg svg { stroke-width: 1.05; }

/* Animated parts turn about the centre of the drawing unless told otherwise.
   Declaring the reference box explicitly keeps every engine in line. */
.icon svg * { transform-box: view-box; transform-origin: 24px 24px; }
.icon .ic-quarter { transform-origin: 19px 19px; }
.icon .ic-bar { transform-origin: 24px 39px; }
.icon .ic-orbit { transform-origin: 24px 27.5px; }

/* resting states */
.ic-bead { fill: var(--bg); }
.ic-turn { stroke-dasharray: 2.2 6.776; }   /* 14 dashes, so the ring closes */
.ic-track { opacity: 0.3; }
.ic-arc { stroke-dasharray: 103.67; stroke-dashoffset: 31; }
.ic-draw--1 { stroke-dasharray: 13; stroke-dashoffset: 0; }
.ic-draw--2 { stroke-dasharray: 9; stroke-dashoffset: 0; }

/* ---- motion, gated on arrival ---- */
.is-in .ic-turn { animation: ic-turn 26s linear infinite; }
.is-in .ic-breathe { animation: ic-breathe 5.5s var(--ease) infinite; }
.is-in .ic-breathe--slow { animation-duration: 7.5s; }
.is-in .ic-quarter { animation: ic-quarter 9s var(--ease) infinite; }

.is-in .ic-draw--1 { animation: ic-draw-1 6s var(--ease) infinite; }
.is-in .ic-draw--2 { animation: ic-draw-2 6s var(--ease) 0.35s infinite; }
.is-in .ic-rise { animation: ic-rise 3.6s var(--ease) infinite; }

.is-in .ic-wave { animation: ic-wave 3.8s var(--ease) infinite; }
.is-in .ic-wave--2 { animation-delay: 0.55s; }
.is-in .ic-wave--3 { animation-delay: 1.1s; }

.is-in .ic-orbit { animation: ic-orbit 11s var(--ease) infinite; }

.is-in .ic-bar { animation: ic-bar 4.6s var(--ease) infinite; }
.is-in .ic-bar--2 { animation-delay: 0.5s; }
.is-in .ic-bar--3 { animation-delay: 1s; }

.is-in .ic-node--1 { animation: ic-drift-1 6s var(--ease) infinite; }
.is-in .ic-node--2 { animation: ic-drift-2 6s var(--ease) 0.25s infinite; }
.is-in .ic-node--3 { animation: ic-drift-3 6s var(--ease) 0.5s infinite; }

.is-in .ic-arc { animation: ic-sweep 7s var(--ease) infinite; }

.is-in .ic-run { animation: ic-run 3.4s var(--ease) infinite; }
.is-in .ic-run--2 { animation-delay: 0.25s; }
.is-in .ic-run--3 { animation-delay: 0.5s; }

@keyframes ic-turn { to { transform: rotate(360deg); } }
@keyframes ic-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.14); opacity: 1; }
}
/* a square turned a quarter is the same square: the loop never jumps */
@keyframes ic-quarter { from { transform: rotate(0deg); } to { transform: rotate(90deg); } }
@keyframes ic-draw-1 {
  0%, 8% { stroke-dashoffset: 13; }
  38%, 84% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 13; }
}
@keyframes ic-draw-2 {
  0%, 14% { stroke-dashoffset: 9; }
  44%, 84% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 9; }
}
@keyframes ic-rise {
  0%, 100% { transform: translateY(2.5px); opacity: 0.3; }
  50% { transform: translateY(-2.5px); opacity: 1; }
}
@keyframes ic-wave {
  0% { opacity: 0.15; transform: translateX(-2.5px); }
  35%, 60% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0.15; transform: translateX(2.5px); }
}
/* equilateral, so a third of a turn lands exactly where it started */
@keyframes ic-orbit { from { transform: rotate(0deg); } to { transform: rotate(120deg); } }
@keyframes ic-bar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.52); }
}
@keyframes ic-drift-1 {
  0%, 100% { transform: translate(-1.8px, -1.4px); }
  50% { transform: translate(0, 0); }
}
@keyframes ic-drift-2 {
  0%, 100% { transform: translate(1.8px, -1.4px); }
  50% { transform: translate(0, 0); }
}
@keyframes ic-drift-3 {
  0%, 100% { transform: translate(0, 2.2px); }
  50% { transform: translate(0, 0); }
}
@keyframes ic-sweep {
  0% { stroke-dashoffset: 103.67; }
  45%, 80% { stroke-dashoffset: 31; }
  100% { stroke-dashoffset: 103.67; }
}
@keyframes ic-run {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(3.5px); opacity: 1; }
}

/* Motion is decoration here: switched off, the drawings stand on their own. */
@media (prefers-reduced-motion: reduce) {
  .icon *, .icon { animation: none !important; }
}

/* ---- the promise blocks lead with their mark ---- */
.promise__item .icon { margin-bottom: clamp(1.25rem, 2.2vw, 2rem); }


/* ==========================================================================
   Home hero
   ========================================================================== */
.hero-home { padding-top: clamp(9rem, 16vw, 15rem); }

@media (max-width: 760px) {
  /* The phone opens on the statement and nothing else: it sits in the middle
     of the screen, the two calls to action sit at the foot, and the reel and
     the work start below the fold. svh rather than vh so the browser's own
     chrome cannot crop the bottom. */
  .hero-home {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 0;
    padding-bottom: clamp(1.75rem, 6vw, 2.75rem);
    display: flex;
  }
  .hero-home > .shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 7.5rem;            /* clears the fixed masthead */
  }
  .hero-home__statement {
    flex: 1;
    display: flex;
    align-items: center;
  }
  /* The colossal clamp bottoms out at 56px, which is wider than the column on
     small phones: "Conectemos" is the widest unbreakable word in any headline
     at 5.23em, and it needs 50px or less at 320px. This tracks the column
     instead, and only bites below ~365px. */
  .statement { font-size: min(var(--t-colossal), calc(18vw - 9px)); }
  .hero-home .hero__foot > .actions { margin-top: 1.25rem; }
}