/* ============================================================================
   RAWWW.ONLINE — temporary site
   Tokens lifted verbatim from the live rawww.online stylesheet so the stand-in
   reads as the same company. Mobile-first: every rule below is the phone rule,
   and the only media queries widen it.
   ========================================================================= */

:root {
  /* Brand — from rawww.online */
  --c-yellow: #ffd93b;
  --c-blue:   #2533ff;
  --c-teal:   #00727e;
  --c-orange: #ff7a45;
  --c-pink:   #feb7c2;
  --c-ink:    #0b0b0b;
  --c-paper:  #e5e7eb;

  --bg:        var(--c-ink);
  --surface-1: color-mix(in srgb, var(--c-paper) 6%, var(--c-ink));
  --surface-2: color-mix(in srgb, var(--c-paper) 12%, var(--c-ink));
  --text:      var(--c-paper);
  --text-mut:  color-mix(in srgb, var(--c-paper) 54%, transparent);
  --text-sec:  color-mix(in srgb, var(--c-paper) 72%, transparent);
  --line:      #f5f7fa24;
  --line-weak: #f5f7fa14;
  /* Blue is the brand colour and it is only ever a fill. The live site has
     no coloured text anywhere — every text colour on it is white, #e5e7eb or
     near-black — so #2533ff appears here as backgrounds, rules and dots, and
     white does the emphasis work. */
  --accent:    var(--c-blue);
  --on-accent: #ffffff;
  --accent-wash: color-mix(in srgb, var(--c-blue) 15%, transparent);

  /* Motion — same tempo as opntr.ee / rawww.online */
  --e: cubic-bezier(.22, 1, .36, 1);
  --t: .62s;

  /* Rhythm */
  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(4.5rem, 13vw, 9rem);
  --max: 82rem;

  --font-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Every Unbounded title on the page is set the same way: uppercase, 800, the
   same tracking. The live site does this and mixing in a sentence-case heading
   is what makes a type system read as two. The pull quote is the one Unbounded
   thing that is not a title, and it opts out below. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .98;
  margin: 0;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 999;
  background: var(--accent); color: var(--on-accent);
  padding: .75rem 1.25rem; border-radius: 999px; font-weight: 600;
}
.skip:focus { top: 1rem; }

/* ── Shared bits ───────────────────────────────────────────────────────── */

.section {
  padding: var(--sec) var(--gut);
  max-width: var(--max);
  margin-inline: auto;
}

.eyebrow {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: '';
  width: 1.6rem; height: 1px;
  background: var(--accent);
  flex: none;
}

.display {
  font-size: clamp(2.1rem, 8.5vw, 4.6rem);
  max-width: 18ch;
}

.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.tags li {
  font-size: .78rem;
  padding: .4rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-sec);
  white-space: nowrap;
}
.tags--sm li { font-size: .68rem; padding: .28rem .65rem; margin-top: 0; }
.tags--sm { margin-top: 1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  transition: transform .3s var(--e), background-color .3s var(--e), color .3s var(--e), border-color .3s var(--e);
}
/* The live site's primary CTA is a white pill with dark type; its nav CTA is
   the blue one. Both are here, used the same way. */
.btn--accent { background: #fff; color: var(--c-ink); }
.btn--ghost { border: 1px solid var(--line); color: var(--text); }
@media (hover: hover) {
  .btn--accent:hover { background: var(--accent); color: var(--on-accent); }
  .btn--ghost:hover { border-color: var(--text); color: var(--text); }
}

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--gut);
  padding-top: max(.9rem, env(safe-area-inset-top));
  transition: background-color .4s var(--e), transform .5s var(--e);
}
.nav.is-stuck {
  /* Opaque rather than blurred. A backdrop-filter on a fixed bar has to
     recomposite the strip behind it on every frame the page moves, and over a
     playing video that is exactly where the scroll starts dropping frames. */
  background: color-mix(in srgb, var(--c-ink) 94%, transparent);
  border-bottom: 1px solid var(--line-weak);
}
.nav.is-hidden { transform: translateY(-105%); }

.nav__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -.03em;
  display: inline-flex;
  align-items: baseline;
}
.nav__dot { color: var(--text); }
.nav__reg { font-size: .5em; vertical-align: super; margin-left: .05em; color: var(--text-mut); letter-spacing: 0; }

.nav__desk { display: none; }

.burger {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-content: center; gap: .38rem;
  margin-right: -.5rem;
}
.burger span {
  display: block;
  width: 1.35rem; height: 2px;
  background: var(--text);
  transition: transform .4s var(--e), opacity .3s var(--e);
}
body.menu-open .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Fullscreen menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--c-ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  padding: 6rem var(--gut) calc(2rem + env(safe-area-inset-bottom));
}
.menu[hidden] { display: none; }
.menu__list { display: flex; flex-direction: column; }
.menu__list a {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: clamp(1.75rem, 9.5vw, 3.25rem);
  line-height: 1.15;
  padding: .25rem 0;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  transition: color .3s var(--e);
}
.menu__list i {
  font-family: var(--font-body);
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--text-mut);
}
@media (hover: hover) { .menu__list a:hover { color: var(--text-mut); } }

.menu__foot {
  border-top: 1px solid var(--line-weak);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--text-mut);
}
.menu__soc { display: flex; gap: 1.25rem; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7.5rem var(--gut) 5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero__glow {
  position: absolute;
  z-index: -1;
  top: -20%; left: 50%;
  width: min(120vw, 60rem);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
      color-mix(in srgb, var(--c-blue) 30%, transparent) 0%,
      color-mix(in srgb, var(--c-blue) 12%, transparent) 40%,
      transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}
.hero__inner { max-width: var(--max); margin-inline: auto; width: 100%; }

.hero__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.75rem);
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: .6rem;
}
.hero__mark span {
  font-size: .42em;
  vertical-align: super;
  color: var(--text-mut);
  letter-spacing: 0;
}

.hero__title {
  /* 11vw is the ceiling "SOMETHING" fits under at 375px with the gutters on;
     the 2rem floor keeps it inside a 320px screen, where the gutter stops
     shrinking and the word would otherwise run off the edge. */
  font-size: clamp(2rem, 11vw, 8rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .92;
  text-transform: uppercase;
}
.hero__sub {
  margin-top: 1.75rem;
  max-width: 44ch;
  color: var(--text-sec);
  font-size: clamp(1rem, 3.6vw, 1.15rem);
}
.hero__sub strong { color: var(--text); font-weight: 600; }

.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero__scroll {
  position: absolute;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: var(--gut);
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .62rem;
  letter-spacing: .25em;
  color: var(--text-mut);
}
.hero__scroll i {
  display: block;
  width: 2.5rem; height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.hero__scroll i::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--text);
  animation: sweep 2.2s var(--e) infinite;
}
@keyframes sweep {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ── Ticker ────────────────────────────────────────────────────────────── */

/* A full-width electric-blue band. The live site spends its blue on large
   fills like this rather than on type, so this is where the page gets its
   colour. */
.ticker {
  overflow: hidden;
  padding: .9rem 0;
  background: var(--accent);
  user-select: none;
}
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__set { display: flex; flex: none; }
.ticker__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.9rem, 3.4vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
  padding-inline: .9rem;
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  color: var(--on-accent);
  white-space: nowrap;
}
.ticker__item::after {
  content: '✦';
  color: color-mix(in srgb, var(--on-accent) 55%, transparent);
  font-size: .6em;
}

/* ── Studio ────────────────────────────────────────────────────────────── */

.about__lead {
  margin-top: 1.5rem;
  max-width: 50ch;
  color: var(--text-sec);
  font-size: clamp(1rem, 3.6vw, 1.15rem);
}

.about__grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-weak);
  border: 1px solid var(--line-weak);
  border-radius: 1rem;
  overflow: hidden;
}
.stat {
  background: var(--bg);
  padding: 1.5rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
/* These are the live site's own four figures, and they are words rather than
   numbers ("Always", "2-4W", "Non-stop", "A+"), so this is sized for a short
   word instead of a two-digit count. */
.stat b {
  font-family: var(--font-display);
  /* Sized so "Non-stop", the longest of the four, stays on one line in a
     half-width cell on a 375px screen rather than breaking at its hyphen. */
  font-size: clamp(1.05rem, 4.3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -.03em;
  text-transform: uppercase;
}
/* Direct child only — the counter inside <b> is a span too, and shrinking it
   is what turned "50s" into a small 50 next to a large s. */
.stat > span { font-size: .8rem; color: var(--text-mut); line-height: 1.4; }

/* ── Accordion ─────────────────────────────────────────────────────────── */

.acc { margin-top: 3rem; border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }

.acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: left;
}
.acc__num {
  font-family: var(--font-body);
  font-style: normal;
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--text-mut);
  transition: color .3s var(--e);
}
.acc__title {
  font-size: clamp(1.6rem, 7vw, 3rem);
  text-transform: uppercase;
  color: var(--text-mut);
  transition: color .35s var(--e);
}
.acc__sign {
  position: relative;
  width: 1.4rem; height: 1.4rem;
  flex: none;
}
.acc__sign::before, .acc__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--text);
  transition: transform .45s var(--e), background-color .3s var(--e);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__item.is-open .acc__sign::after { transform: rotate(0deg); }
.acc__item.is-open .acc__sign::before,
.acc__item.is-open .acc__sign::after { background: var(--text); }
.acc__item.is-open .acc__title { color: var(--text); }
.acc__item.is-open .acc__num { color: var(--text); }

@media (hover: hover) {
  .acc__head:hover .acc__title { color: var(--text); }
}

/* Panels are open in CSS on purpose: a reader whose JavaScript never lands
   still gets all three service descriptions. Closing them is app.js's job. */
.acc__panel { overflow: hidden; }
.acc__body { padding-bottom: 2rem; max-width: 58ch; }
.acc__body p { color: var(--text-sec); }

/* ── Slider ────────────────────────────────────────────────────────────── */

.work__head { display: grid; gap: 1.5rem; }
.work__note { color: var(--text-mut); font-size: .9rem; max-width: 40ch; }
.work__note span { color: var(--text); white-space: nowrap; }

.slider { margin-top: 2.5rem; }
.slider__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--gut);
  margin-inline: calc(var(--gut) * -1);
  padding-bottom: .5rem;
  cursor: grab;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

/* Belt to the dragstart listener's braces: no text selection while dragging the
   strip, and no native drag on the logos or the card links. */
.slider__track { user-select: none; -webkit-user-select: none; }
.slider__track img,
.slider__track a { -webkit-user-drag: none; }
.slider__track.is-dragging a { pointer-events: none; }

.card {
  flex: 0 0 min(78vw, 22rem);
  scroll-snap-align: center;
  --card-tint: var(--c-blue);
}
.card__link {
  display: block;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--surface-1);
  transition: border-color .4s var(--e), transform .5s var(--e);
}
.card__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 80% at 50% 40%, color-mix(in srgb, var(--card-tint) 55%, transparent) 0%, transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--card-tint) 26%, var(--c-ink)) 0%, var(--c-ink) 80%);
}
/* Each product's own logo, sitting on the brand wash. They arrive with their
   own backgrounds baked in, so they are given a radius and a shadow and left
   alone rather than recoloured. */
.card__logo {
  position: relative;
  z-index: 1;
  width: clamp(4.5rem, 17vw, 6rem);
  height: auto;
  border-radius: 1.1rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  transition: transform .5s var(--e);
}

.card__body { padding: 1.25rem 1.1rem 1.5rem; }
.card__body h3 { font-size: 1.2rem; }
.card__body p { margin-top: .5rem; color: var(--text-mut); font-size: .88rem; }
.card__go {
  display: inline-block;
  margin-top: 1rem;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mut);
}

@media (hover: hover) {
  .card__link:hover { border-color: color-mix(in srgb, var(--card-tint) 60%, transparent); }
  .card__link:hover .card__logo { transform: translateY(-5px) scale(1.04); }
}

.slider__ui {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.slider__bar {
  flex: 1;
  height: 2px;
  background: var(--line-weak);
  border-radius: 2px;
  overflow: hidden;
}
.slider__bar i {
  display: block;
  height: 100%;
  width: 20%;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left;
}
.slider__btns { display: flex; gap: .5rem; }
.slider__btns button {
  width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color .3s var(--e), background-color .3s var(--e), color .3s var(--e);
}
.slider__btns button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) {
  .slider__btns button:not(:disabled):hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
}

/* ── Quote ─────────────────────────────────────────────────────────────── */

.quote { text-align: left; }
.quote__text {
  margin: 2.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  text-transform: none; /* a quote, not a title */
  max-width: 26ch;
}
.quote__by { margin-top: 1.5rem; color: var(--text-mut); font-size: .9rem; }
.quote__logos {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-weak);
}
.quote__logos span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.9rem, 3.6vw, 1.15rem);
  color: var(--text-mut);
  letter-spacing: -.01em;
}

/* ── Contact ───────────────────────────────────────────────────────────── */

.contact__sub { margin-top: 1.5rem; max-width: 42ch; color: var(--text-sec); }
.contact__mail {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 5.6vw, 2.4rem);
  letter-spacing: -.03em;
  color: var(--text);
  border-bottom: 4px solid var(--accent);
  padding-bottom: .2rem;
  word-break: break-word;
  transition: border-color .35s var(--e);
}
@media (hover: hover) { .contact__mail:hover { border-color: var(--text); } }

.contact__row {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.contact__row a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-size: .85rem;
  color: var(--text-sec);
  transition: border-color .3s var(--e), color .3s var(--e);
}
@media (hover: hover) {
  .contact__row a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
  }
}

/* ── Mega footer ───────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line-weak);
  background: var(--surface-1);
  overflow: hidden;
}
.foot__top {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--sec) var(--gut) 0;
  display: grid;
  gap: 3rem;
}
.foot__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.04em;
}
.foot__logo span { font-size: .45em; vertical-align: super; color: var(--text-mut); letter-spacing: 0; }
.foot__pitch { margin-top: 1rem; color: var(--text-mut); font-size: .9rem; max-width: 34ch; }
.foot__mail {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--text);
  font-size: .9rem;
  border-bottom: 2px solid var(--accent);
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
}
.foot__col h4 {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 1rem;
}
.foot__col li { margin-bottom: .6rem; }
.foot__col a { font-size: .92rem; color: var(--text-sec); transition: color .25s var(--e); }
@media (hover: hover) { .foot__col a:hover { color: var(--text); } }

/* The bending wordmark */
.arc {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 800;
  /* "RAWWW.®" measures 6.55em wide in Unbounded 800 at this tracking, so 15vw
     would span the viewport exactly and clip, because the outer characters
     tilt 18° at full arc and a tilted glyph is wider than an upright one. 12.5vw
     leaves room for the bow. The cap stops it running away on wide screens. */
  font-size: min(12.5vw, 11.5rem);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: 0;
  user-select: none;
}
.arc__char { display: inline-block; will-change: transform; }

.foot__bottom {
  max-width: var(--max);
  margin-inline: auto;
  padding: 1.5rem var(--gut) calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-weak);
  display: grid;
  gap: 1rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mut);
}
.foot__legal { display: flex; gap: .5rem; flex-wrap: wrap; }
.foot__legal a {
  display: inline-flex;
  background: var(--text);
  color: var(--bg);
  border-radius: 999px;
  padding: .35rem .85rem;
}
.foot__credit a {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  padding: .2rem .65rem;
  display: inline-flex;
}

/* ── Showreel band ─────────────────────────────────────────────────────── */

.reel {
  position: relative;
  min-height: min(80svh, 34rem);
  display: grid;
  place-items: center;
  padding: var(--sec) var(--gut);
  overflow: hidden;
  isolation: isolate;
}

.reel__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  /* Sized so the child can be measured against this box rather than the
     viewport, which is what lets a 16:9 embed cover a band of any shape. */
  container-type: size;
}
.reel__media iframe,
.reel__media video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@supports (width: 1cqw) {
  .reel__media iframe {
    /* Two jobs at once. Cover, for something that cannot be object-fit:
       overshoot on whichever axis is short and let the band crop the rest.
       Then overscan the result, because an embed still paints its own title
       bar across the top and its logo and loop button along the bottom no
       matter what modestbranding claims. Scaling past the frame pushes that
       chrome outside the crop, which is the only reliable way to get a clean
       rectangle of picture out of a player built to be clicked. */
    --overscan: 1.4;
    width: calc(max(100cqw, 177.7778cqh) * var(--overscan));
    height: calc(max(100cqh, 56.25cqw) * var(--overscan));
  }
}

.reel__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%),
    color-mix(in srgb, var(--c-ink) 62%, transparent);
}

.reel__body {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}
.reel__title { max-width: 14ch; }
.eyebrow--mid { justify-content: center; margin-bottom: 0; }

/* ── Showreel lightbox ─────────────────────────────────────────────────── */

.lb {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--gut);
  background: color-mix(in srgb, var(--c-ink) 90%, transparent);
  backdrop-filter: blur(10px);
}
.lb[hidden] { display: none; }

.lb__frame {
  width: min(100%, 64rem);
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
}
.lb__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lb__close {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: var(--gut);
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  transition: background-color .3s var(--e), border-color .3s var(--e);
}
.lb__close span {
  grid-area: 1 / 1;
  display: block;
  width: 1.1rem; height: 1.5px;
  background: var(--text);
}
.lb__close span:first-child { transform: rotate(45deg); }
.lb__close span:last-child { transform: rotate(-45deg); }
@media (hover: hover) {
  .lb__close:hover { background: var(--accent); border-color: var(--accent); }
}

/* The page behind a modal does not scroll. */
body.lb-open { overflow: hidden; }

/* ── Legal pages ───────────────────────────────────────────────────────── */
/* privacy.html, terms.html, cookies.html. One reading column, the same type
   system as the rest of the site, and no motion: these are pages somebody
   opens to find one clause, not to be impressed. */

.legal {
  max-width: 48rem;
  margin-inline: auto;
  padding: 9rem var(--gut) var(--sec);
}

.legal__title {
  font-size: clamp(2rem, 8vw, 3.75rem);
  margin-bottom: 1.25rem;
}
.legal__lead {
  color: var(--text-sec);
  font-size: clamp(1rem, 3.4vw, 1.1rem);
  max-width: 46ch;
}
.legal__meta {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-weak);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mut);
}

.legal__body { margin-top: 3rem; }
.legal__body h2 {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-weak);
}
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin: 1.75rem 0 .6rem;
}
.legal__body p { margin-bottom: 1rem; color: var(--text-sec); }
.legal__body ul { margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.legal__body li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--text-sec);
}
.legal__body li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: .35rem; height: .35rem;
  border-radius: 50%;
  background: var(--accent);
}
.legal__body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-weak);
  width: 100%;
  font-size: .8rem;
  color: var(--text-mut);
}
@media (hover: hover) { .legal__back:hover { color: var(--text); } }

/* ── Consent banner ────────────────────────────────────────────────────── */
/* Same block as rawww.online runs, re-skinned in this site's tokens rather
   than the monorepo's. The z-index is the one the original uses: a consent
   dialog has to sit above every other fixed thing on the page, menu and
   lightbox included. */

.cc {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 2147483000;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1.35rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-2) 92%, var(--c-ink));
  color: var(--text);
  border: 1px solid var(--line-strong, var(--line));
  box-shadow: 0 14px 50px rgba(0, 0, 0, .55);
  font-size: .875rem;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--e), transform .5s var(--e);
}
.cc.is-in { opacity: 1; transform: none; }

.cc__title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}
.cc__text { margin: 0 0 1rem; color: var(--text-sec); }

.cc__legal {
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  font-size: .72rem;
}
.cc__legal a { color: var(--text-mut); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .cc__legal a:hover { color: var(--text); } }

.cc__prefs { display: grid; gap: .4rem; margin: 0 0 1rem; }
.cc__prefs[hidden] { display: none; }
.cc__row {
  display: flex;
  align-items: center;
  gap: .65rem;
  cursor: pointer;
  padding: .35rem 0;
}
.cc__row input {
  accent-color: var(--accent);
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.cc__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cc__btn {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  transition: background-color .3s var(--e), border-color .3s var(--e), color .3s var(--e);
}
.cc__btn[hidden] { display: none; }
.cc__btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
@media (hover: hover) {
  .cc__btn:hover { border-color: var(--text); }
  .cc__btn--primary:hover { background: #fff; border-color: #fff; color: var(--c-ink); }
}

/* The stand-in shown where a third-party embed would be, before consent. */
.cc-gate {
  display: grid;
  place-content: center;
  gap: 1rem;
  justify-items: center;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  color: var(--text-sec);
  font-size: .9rem;
}
.cc-gate p { max-width: 34ch; }

/* ── Wider viewports ───────────────────────────────────────────────────── */

@media (min-width: 48rem) {
  .about__grid { grid-template-columns: repeat(4, 1fr); }
  .foot__cols { grid-template-columns: repeat(4, 1fr); }
  .work__head { grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
  .work__note { text-align: right; }
  .card { flex-basis: 24rem; }
  .foot__bottom { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .foot__copy { text-align: center; }
  .foot__credit { text-align: right; }
}

@media (min-width: 62rem) {
  .burger { display: none; }
  .nav__desk {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: .9rem;
  }
  .nav__desk a { color: var(--text-sec); transition: color .25s var(--e); }
  .nav__desk a:hover { color: var(--text); }
  .nav__cta {
    background: var(--accent);
    color: var(--on-accent) !important;
    border-radius: 999px;
    padding: .65rem 1.25rem;
    font-weight: 600;
  }
  .foot__top { grid-template-columns: 1fr 1.6fr; gap: 4rem; }
  .acc__body { padding-left: 3.4rem; }
}

/* ── Reduced motion: nothing moves that the reader did not move ────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .arc { padding-block: 0 !important; }
}