/* ==========================================================================
   Encounter Production — Website
   styles.css — one stylesheet for the whole site

   HOW THIS FILE IS ORGANISED
   1. Font
   2. Design tokens  ← change colours, sizes and spacing here, nowhere else
   3. Reset & base
   4. Layout helpers
   5. Components (buttons, header, menu, footer, placeholders, video)
   6. Homepage sections
   7. Motion — switched off for visitors who ask their device for less motion

   DESIGN IDEA (v3) — "Warm studio, one light"
   A modern production company with an analogue soul. Warm darks, bone-white
   paper, one brass accent used sparingly. Archivo for everything, with a
   typewriter-style mono for small "liner note" details only.
   Stock photos and background video get a warm cinematic grade; client
   artwork is always shown exactly as delivered.
   ========================================================================== */


/* 1. FONT -----------------------------------------------------------------
   One typeface family — Archivo — used at two widths:
     • condensed + heavy, in capitals, for headlines (poster feel)
     • normal width + regular, for reading
   It lives inside the project (assets/fonts), licence included (SIL OFL). */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Mono — only for small details: track numbers, credits, project facts */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* 2. DESIGN TOKENS --------------------------------------------------------
   Colours of an analogue studio at night. Every text/background pairing
   passes WCAG AA contrast (4.5:1 or better for normal text).
   Brass is the only accent, kept for small details (the dot, active lines,
   labels). Hovers stay in the section's own black and off-white.
   On light backgrounds, use --brass-deep for any small brass text. */

:root {
  /* Palette */
  --ink: #100f0d;            /* warm black: hero, dark sections, text */
  --ink-2: #1c1a17;          /* a step up from ink, for layering */
  --green: #17211d;          /* studio green: featured work */
  --bone: #ece6dc;           /* alternate light sections */
  --paper-warm: #f7f5f0;     /* main background */
  --stone: #a9a399;          /* muted text on dark */
  --graphite: #5a554d;       /* muted text on light */
  --brass: #b48e58;          /* accent (text on dark only) */
  --brass-deep: #7a5a2c;     /* accent for small text on light */

  /* Older names kept so every existing rule keeps working */
  --black: var(--ink);
  --black-2: var(--ink-2);
  --white: var(--paper-warm);
  --paper: var(--bone);
  --grey-dark: var(--graphite);
  --grey-light: var(--stone);

  /* Active theme values — sections switch these (see .theme-dark etc.) */
  --bg: var(--white);
  --fg: var(--black);
  --fg-muted: var(--grey-dark);
  --line: rgb(16 15 13 / 0.13);
  --ph-bg: #e3ddd2;

  /* Depth: film grain, light from above, soft shadows */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  --glow: radial-gradient(70% 60% at 50% 0%, rgb(180 142 88 / 0.13), transparent 70%);
  --shadow-photo: 0 40px 70px -45px rgb(16 15 13 / 0.6), 0 1px 0 rgb(16 15 13 / 0.05);
  --shadow-deep: 0 60px 90px -50px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.06);

  /* Photo grade: warm, slightly faded. Client artwork never gets this. */
  --grade: saturate(0.62) sepia(0.14) contrast(1.05) brightness(0.97);

  /* Type */
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --headline-width: 82%;     /* how condensed the headlines are */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h2: clamp(2.25rem, 1.3rem + 3.6vw, 4.5rem);
  --fs-display: clamp(3.75rem, 1rem + 11.5vw, 11.5rem);

  /* Space */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);   /* top/bottom padding of sections */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem); /* left/right page margin */
  --max: 80rem;                                  /* widest the content gets */
  --header-h: 4rem;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 860px) {
  :root { --header-h: 4.75rem; }
}

/* Section themes: add one of these classes to a section to change its colours */
.theme-dark {
  --bg: var(--ink);
  --fg: var(--paper-warm);
  --fg-muted: var(--stone);
  --line: rgb(242 238 230 / 0.14);
  --ph-bg: #1f1d1a;
}

.theme-green {
  --bg: var(--green);
  --fg: var(--bone);
  --fg-muted: var(--stone);
  --line: rgb(236 230 220 / 0.16);
  --ph-bg: #22302a;
}

.theme-paper {
  --bg: var(--bone);
  --ph-bg: #ddd6ca;
}

/* Depth on chosen dark sections: add "has-grain" (film grain) and
   "has-glow" (soft warm light from above) */
.section.has-grain { background-image: var(--grain); background-size: 220px 220px; }
.section.has-grain.has-glow {
  background-image: var(--grain), var(--glow);
  background-size: 220px 220px, 100% 100%;
  background-repeat: repeat, no-repeat;
}
.section.has-glow { overflow: clip; }


/* 3. RESET & BASE --------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem); /* anchor links don't hide under the header */
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
address { font-style: normal; }

/* Big headlines: condensed, heavy, capitals */
h1, h2 {
  font-family: var(--font);
  font-stretch: var(--headline-width);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word; /* a very long word can never push the page sideways */
}

/* Smaller headings: normal width, normal capitalisation */
h3 {
  font-family: var(--font);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { text-wrap: pretty; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

/* Stock and studio photos get a warm cinematic grade, so photos from
   different photographers look like one set. New photos inside <picture>
   get it automatically. Client artwork is excluded (class "artwork"). */
picture img { filter: var(--grade); }
img.artwork, .artwork img { filter: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button { font: inherit; color: inherit; }
cite { font-style: normal; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 3px;
}

::selection { background: var(--brass); color: var(--ink); }

/* Hidden visually but still read by screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link — appears only when a keyboard user presses Tab */
.skip-link {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--white);
  color: var(--black);
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }


/* 4. LAYOUT HELPERS ------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
  background-color: var(--bg);
  color: var(--fg);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

/* Small label above a heading */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.h2 {
  font-size: var(--fs-h2);
  margin-top: 0.75rem;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
}


/* 5. COMPONENTS ----------------------------------------------------------- */

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.25rem;           /* 52px — comfortable to tap */
  padding: 0.9rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Solid: white on dark sections, black on light sections. Hover flips it. */
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--outline { border-color: var(--fg); color: var(--fg); }

/* Hover: filled buttons become outlined and outlined ones fill in,
   in the section's own colours (no accent colour) */
.btn--solid:hover { background: transparent; border-color: var(--fg); color: var(--fg); }
.btn--outline:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* Text link with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1.5px solid var(--fg);
}
.link-arrow span { transition: transform 0.25s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* Header & main menu ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

/* Logo — files in /assets/images/logo/. Black ("-ink") in the white header,
   off-white in the dark footer. Height sets the size; width follows automatically. */
.logo {
  display: inline-flex;
  flex-shrink: 0;
  padding-block: 0.5rem; /* bigger tap area */
}
.logo img { width: auto; }
.logo__mark { height: 36px; }               /* phones: big enough for the thin PRODUCTION line */
@media (min-width: 400px) { .logo__mark { height: 38px; } }
@media (min-width: 860px) { .logo__mark { height: 46px; } }

.logo--footer { flex-shrink: 1; max-width: 100%; }
.logo--footer img { width: clamp(13rem, 24vw, 24rem); max-width: 100%; height: auto; }

.site-nav ul {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem clamp(1.5rem, 3vw, 2.75rem);
}

.site-nav a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-muted);
  transition: color 0.2s var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--fg); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -1.5px 0 currentColor; }

/* "Book a session" shown as an outlined button in the desktop header */
.site-nav .nav-cta a {
  padding: 0.7rem 1.1rem;
  border: 1.5px solid var(--fg);
  color: var(--fg);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.site-nav .nav-cta a:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.nav-toggle { display: none; }

/* Without JavaScript the links simply wrap under the name — nothing breaks */
@media (max-width: 859.98px) {
  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    padding-block: 0.75rem;
  }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    background: none;
    border: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .nav-toggle__icon {
    position: relative;
    width: 24px;
    height: 10px;
  }
  .nav-toggle__icon::before,
  .nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s var(--ease), top 0.3s var(--ease);
  }
  .nav-toggle__icon::before { top: 0; }
  .nav-toggle__icon::after { top: 8px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 4px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 4px; transform: rotate(-45deg); }

  .js .site-nav {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 0 0;
    padding: var(--space-l) var(--gutter);
    background: var(--black);
    overflow-y: auto;
  }
  .js.menu-open .site-nav { display: block; }
  .js .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-nav li { border-bottom: 1px solid var(--line); }
  .js .site-nav a {
    display: block;
    padding-block: 1.1rem;
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    font-stretch: var(--headline-width);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    color: var(--white);
  }
  .js .site-nav a[aria-current="page"] { box-shadow: none; color: var(--grey-light); }
  .js .site-nav .nav-cta a { padding: 1.1rem 0; border: 0; background: none; }

  html.menu-open { overflow: hidden; } /* stop the page scrolling behind the menu */
}

/* Placeholders ------------------------------------------------------------------
   Anything still missing is shown in a dashed, monospace style so it can't be
   mistaken for finished content. Search the project for "INSERT" or "VERIFY"
   to find every one. Remove these styles before launch. */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--ph-bg);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgb(0 0 0 / 0.05) 14px 15px);
  color: var(--fg-muted);
}
.theme-dark .ph {
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / 0.04) 14px 15px);
}

.ph__label {
  max-width: 30ch;
  margin: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed currentColor;
  background: var(--ph-bg);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.ph-text {
  padding: 0.1em 0.4em;
  outline: 1px dashed var(--fg-muted);
  outline-offset: 1px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  font-family: var(--font-mono);
  font-size: 0.8em;
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  color: var(--fg);
}
p.ph-text,
div.ph-text { display: block; padding: 0.75em 1em; }

.is-placeholder { border-style: dashed; cursor: not-allowed; }

/* Video: click-to-load YouTube (the heavy player only loads when someone presses play) */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--black-2);
  overflow: hidden;
}
.video img,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  background: rgb(0 0 0 / 0.3);
  border: 0;
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.video__play:hover { background: rgb(0 0 0 / 0.12); }
.video__play svg {
  width: 4.5rem;
  height: 4.5rem;
  padding: 1.35rem 1.25rem 1.35rem 1.5rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  transition: transform 0.3s var(--ease);
}
.video__play:hover svg { transform: scale(1.06); }

/* Footer ------------------------------------------------------------------------ */
.site-footer {
  padding-block: var(--space-xl) var(--space-l);
  background: var(--bg) var(--grain);
  background-size: 220px 220px;
  color: var(--fg);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--line);
}


.site-footer__cols {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  padding-block: var(--space-l);
}
@media (min-width: 700px) {
  .site-footer__cols { grid-template-columns: 2fr 1fr 2fr; }
}

.site-footer__heading {
  margin-bottom: var(--space-s);
  font-size: var(--fs-xs);
  font-stretch: 100%;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--fg-muted);
}

.footer-links a {
  display: inline-block;
  padding-block: 0.4rem;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.site-footer__text + .site-footer__text { margin-top: var(--space-s); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}


/* 6. HOMEPAGE SECTIONS ------------------------------------------------------ */

/* Hero ----------------------------------------------------------------------------
   What we do first (headline + one line), the footage in a frame beside it,
   and the four stages of the work along the bottom. The company name lives in
   the header and in the small line above the headline. */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(calc(100svh - var(--header-h)), 58rem);
  background-color: var(--bg);
  /* film grain + warm light falling towards the footage */
  background-image: var(--grain), radial-gradient(55% 70% at 76% 32%, rgb(180 142 88 / 0.15), transparent 72%);
  background-size: 220px 220px, 100% 100%;
  background-repeat: repeat, no-repeat;
  color: var(--fg);
  overflow: clip;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(1.25rem, 3vw, 3.5rem) clamp(2.25rem, 4vw, 3.5rem);
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 5vw, 5.5rem); }
}

/* Words */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgb(180 142 88 / 0.18);
}
.hero__title {
  max-width: 11ch;
  margin-top: var(--space-m);
  font-size: clamp(2.75rem, 1.4rem + 4.6vw, 6.25rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.hero__lede {
  max-width: 40ch;
  margin-top: var(--space-m);
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgb(247 245 240 / 0.86);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-l);
}

/* Laptops with short screens: a little tighter, so the stages stay in view */
@media (min-width: 960px) and (max-height: 860px) {
  .hero__inner { padding-block: 1.75rem 2rem; }
  .hero__title { font-size: clamp(2.75rem, 1rem + 4.2vw, 5.25rem); }
  .hero__lede { margin-top: var(--space-s); }
  .hero__actions { margin-top: var(--space-m); }
}

/* On narrow phones, buttons stack at full width (neater and easier to tap) */
@media (max-width: 519.98px) {
  .hero__actions .btn,
  .cta__inner .btn { flex: 1 1 100%; }
}

/* Footage in a frame */
.hero__frame { position: relative; margin: 0; }
.hero__frame::before {                 /* soft warm light behind the frame */
  content: "";
  position: absolute;
  inset: -12% -8% -6%;
  background: radial-gradient(closest-side, rgb(180 142 88 / 0.16), transparent);
  pointer-events: none;
}
.hero__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--ink-2);
  box-shadow: var(--shadow-deep);
}
@media (min-width: 960px) {
  .hero__media { aspect-ratio: 16 / 11; }
}
@media (min-width: 960px) and (max-height: 860px) {
  .hero__media { aspect-ratio: 16 / 10; }
}
.hero__media picture { position: absolute; inset: 0; }
.hero__media img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media img { object-position: 60% 50%; }
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero.has-video .hero__video { opacity: 1; }
.hero__media::after {                   /* grain + gentle vignette over the footage */
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--grain),
    radial-gradient(110% 95% at 50% 45%, transparent 60%, rgb(0 0 0 / 0.38) 100%);
  background-size: 220px 220px, auto;
  pointer-events: none;
}

/* Caption under the footage, with the Pause / Play button */
.hero__caption {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.hero__now { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; min-width: 0; }
.hero__now-stage { color: var(--fg); }
.hero__now-detail { color: var(--fg-muted); }
@media (max-width: 599.98px) { .hero__now-detail { display: none; } }
.hero__toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.85rem;
  background: none;
  color: var(--fg);
  border: 1px solid var(--line);
  font: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.hero__toggle:hover { border-color: var(--fg); }
.hero__toggle[hidden] { display: none; }
.hero__toggle-icon { position: relative; width: 9px; height: 11px; }
.hero__toggle[data-state="playing"] .hero__toggle-icon { border-inline: 3px solid currentColor; }   /* pause: two bars */
.hero__toggle[data-state="paused"] .hero__toggle-icon {                                           /* play: a triangle */
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The four stages along the bottom */
.hero__stages { position: relative; border-top: 1px solid var(--line); }
.hero__stages-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__stages-list li:nth-child(even) { border-left: 1px solid var(--line); }
.hero__stages-list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
.hero__stages-list li:nth-child(5) { grid-column: 1 / -1; }   /* fifth stage: full width on phones */
@media (min-width: 960px) {
  .hero__stages-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hero__stages-list li:nth-child(5) { grid-column: auto; }
  .hero__stages-list li + li { border-left: 1px solid var(--line); }
  .hero__stages-list li:nth-child(n + 3) { border-top: 0; }
}
.hero__stages a {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.3rem;
  height: 100%;
  padding: 1.1rem 1rem 1.35rem;
  text-decoration: none;
}
.hero__stages li:first-child a,
.hero__stages li:nth-child(3) a,
.hero__stages li:nth-child(5) a { padding-left: 0; }
@media (min-width: 960px) {
  .hero__stages li:nth-child(3) a,
  .hero__stages li:nth-child(5) a { padding-left: 1.25rem; }
  .hero__stages li + li a { padding-left: 1.25rem; }
}
.hero__stages a::before {               /* brass line on the stage being shown */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.hero__stage-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  transition: color 0.4s var(--ease);
}
.hero__stage-name {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-stretch: var(--headline-width);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.4s var(--ease);
}
.hero__stage-services { font-size: 0.8125rem; line-height: 1.45; color: var(--fg-muted); }
.hero__stages a:hover .hero__stage-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.hero.has-video .hero__stages a.is-active::before { transform: scaleX(1); }
.hero.has-video .hero__stages a.is-active .hero__stage-num { color: var(--brass); }

/* Full-width hero (homepage) ---------------------------------------------------------
   The footage fills the whole banner in black and white, darkened so the words
   always read; the words sit centred on top, and the four stages along the bottom. */
.hero--full { background-image: none; }
.hero--full .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  box-shadow: none;
  background-color: var(--ink);
}
.hero--full .hero__media img { filter: none; object-position: 50% 50%; } /* the vintage grade is baked into the still and the video */
.hero--full .hero__media::after {          /* grain + darkening, strongest at the bottom */
  background:
    var(--grain),
    radial-gradient(60% 55% at 50% 48%, rgb(16 15 13 / 0.35), transparent 72%),
    linear-gradient(rgb(16 15 13 / 0.6), rgb(16 15 13 / 0.52) 50%, rgb(16 15 13 / 0.88));
  background-size: 220px 220px, auto, auto;
}
.hero--full .hero__inner,
.hero--full .hero__stages { position: relative; z-index: 1; }
.hero--full .hero__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  padding-block: clamp(3.5rem, 9vh, 7rem);
}
.hero--full .hero__content { display: grid; justify-items: center; }
.hero--full .hero__kicker { justify-content: center; }
.hero--full .hero__title { max-width: 13ch; font-size: clamp(3rem, 1.2rem + 5.8vw, 7.5rem); text-wrap: balance; }
.hero--full .hero__lede { max-width: 44ch; }
.hero--full .hero__actions { justify-content: center; }
.hero--full .hero__toggle {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  right: var(--gutter);
  background: rgb(16 15 13 / 0.35);
  border-color: rgb(247 245 240 / 0.3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.hero--full .hero__toggle:hover { border-color: var(--fg); }
@media (max-width: 959.98px) {
  .hero--full .hero__inner { padding-top: 5.25rem; }   /* room for the Pause button above the words */
}
@media (min-width: 960px) and (max-height: 860px) {
  .hero--full .hero__inner { padding-block: 2.5rem; }
  .hero--full .hero__title { font-size: clamp(3rem, 1rem + 4.8vw, 6rem); }
}

/* Services — shown as the stages of a production -------------------------------
   Record → Shape → Finish → Film → Share. Shows that one team can take a project
   from the first take to the finished release, sound and picture, and help it
   reach people. */
.services__intro { max-width: 34ch; color: var(--fg-muted); }

.stages {
  display: grid;
  border-top: 1.5px solid var(--fg);
}
.stage {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--line);
}
.stage__head { display: flex; align-items: baseline; gap: 1rem; }
.stage__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--brass-deep);
}
.stage__name {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  font-stretch: var(--headline-width);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}
.stage__services { display: grid; gap: var(--space-m); }

.service {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
.service__name {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-h3);
  font-weight: 650;
  line-height: 1.2;
}
.service__name a { text-decoration: none; }
.service__name a::after { content: ""; position: absolute; inset: 0; } /* whole block is clickable */
.service__arrow { color: var(--fg-muted); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.service__desc { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.55; max-width: 36ch; }
.service:hover .service__arrow { transform: translateX(5px); color: var(--fg); }
.service:hover .service__name a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.service:has(a:focus-visible) { outline: 3px solid var(--fg); outline-offset: 6px; }
.service a:focus-visible { outline: none; }

@media (min-width: 700px) {
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}
@media (min-width: 1100px) {
  .stages { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  .stage { border-bottom: 0; padding-bottom: 0; }
  .stage__name { font-size: clamp(2.25rem, 0.9rem + 2.1vw, 3.25rem); }
  .service__name { font-size: clamp(1.125rem, 0.75rem + 0.75vw, 1.375rem); }
}

/* Feature blocks — photo + text side by side, alternating sides ------------------ */
.feature__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
.feature__media img,
.feature__media > .ph { display: block; aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
.feature:not(.theme-dark) .feature__media img { box-shadow: var(--shadow-photo); }
.theme-dark .feature__media img { box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.8); }
.feature__body { display: grid; gap: var(--space-m); justify-items: start; }
.feature__body .h2 { margin-top: 0; }
.feature__body .lead { max-width: 38ch; }

@media (min-width: 900px) {
  .feature__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
  .feature--reverse .feature__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feature--reverse .feature__media { order: 2; }
}

/* How it works — four steps ---------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-l) var(--space-m);
}
.step {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-m);
  border-top: 1.5px solid var(--brass);
}
.step__num {
  color: var(--brass-deep);
  margin-bottom: var(--space-xs);
  font-size: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
  font-stretch: var(--headline-width);
  font-weight: 800;
  line-height: 0.9;
}
.step__title { font-size: var(--fs-h3); }
.step__text { color: var(--fg-muted); max-width: 34ch; }

@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Projects ---------------------------------------------------------------------------
   Filled in by assets/js/projects.js from assets/js/projects-data.js.
   Only the information a project actually has is shown. */

/* Small "liner note" labels */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.theme-dark .mono-label, .theme-green .mono-label { color: var(--brass); }
.mono-label { color: var(--brass-deep); }

.credits {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  max-width: 30rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
}
.credits div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; }
.credits dt { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; padding-top: 0.1em; }
.credits dd { margin: 0; color: var(--fg); }

.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.tags li {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Featured project on the homepage */
.project-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
@media (min-width: 900px) {
  .project-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.project-feature__art { position: relative; margin: 0; max-width: 30rem; }
.project-feature__art::before {          /* soft warm light behind the artwork */
  content: "";
  position: absolute;
  inset: -14% -12%;
  background: radial-gradient(closest-side, rgb(180 142 88 / 0.2), transparent);
  pointer-events: none;
}
.project-feature__art img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: var(--shadow-deep);
}
.project-feature__body { display: grid; gap: var(--space-m); justify-items: start; }
.project-title {
  font-size: clamp(3rem, 1.6rem + 5vw, 6.5rem);
  font-stretch: var(--headline-width);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.project-role { font-size: var(--fs-lead); line-height: 1.4; }
.project-actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; margin-top: var(--space-xs); }

/* Project cards (Work page) */
.project-grid {
  display: grid;
  gap: var(--space-xl) clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 640px) { .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-card { position: relative; display: grid; gap: var(--space-s); align-content: start; }
.project-card img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: var(--shadow-photo); transition: transform 0.4s var(--ease); }
.project-card:hover img { transform: translateY(-4px); }
/* An h2 for the page outline, styled like the smaller h3 headings */
.project-card__title { font-size: var(--fs-h3); font-weight: 650; font-stretch: normal; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; }
.project-card__title a { text-decoration: none; }
.project-card__title a::after { content: ""; position: absolute; inset: 0; }
.project-card:has(a:focus-visible) { outline: 3px solid var(--fg); outline-offset: 6px; }
.project-card a:focus-visible { outline: none; }

/* Case study page */
.page-head { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5rem); }
.breadcrumb { display: flex; gap: 0.6rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--fg); }
.page-title {
  margin-top: var(--space-m);
  font-size: clamp(3.5rem, 1.5rem + 8vw, 9rem);
  line-height: 0.88;
}
.page-head .project-role { margin-top: var(--space-m); max-width: 40ch; }

.case-video { margin-top: calc(-1 * clamp(1.5rem, 3vw, 3rem)); }
.case-video .video { box-shadow: var(--shadow-deep); }
.case-video figcaption { margin-top: var(--space-s); color: var(--fg-muted); font-size: var(--fs-sm); }

.case-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 900px) { .case-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
.case-grid .artwork { width: 100%; max-width: min(100%, 28rem); box-shadow: var(--shadow-photo); }
.case-text { display: grid; gap: var(--space-m); justify-items: start; }
.case-text .lead { max-width: 40ch; }

/* Closing call to action ---------------------------------------------------------- */
.cta__inner {
  display: grid;
  gap: var(--space-l);
  justify-items: start;
}
.cta__title {
  max-width: 18ch;
  font-size: clamp(2.5rem, 1.2rem + 5vw, 6rem);
  line-height: 0.92;
}

@media (min-width: 900px) {
  .cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

/* Closing band over a full-width black-and-white studio photo, text centred */
.cta--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 4rem + 12vw, 14rem);
}
.cta__bg { position: absolute; inset: 0; z-index: -1; }
.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.8);
}
.cta__bg::after {                /* darkens the photo so the text always reads */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(16 15 13 / 0.4), rgb(16 15 13 / 0.62));
}
.cta--photo .cta__inner { justify-items: center; text-align: center; }
.cta--photo .cta__title { max-width: 14ch; }
@media (min-width: 900px) {
  .cta--photo .cta__inner { grid-template-columns: minmax(0, 1fr); align-items: center; }
}


/* Contact page ------------------------------------------------------------------------
   Ways to reach us on the left, what to include on the right. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) clamp(2.5rem, 6vw, 7rem);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}
.contact-item {
  display: grid;
  gap: 0.6rem;
  padding-block: var(--space-m);
  border-top: 1px solid var(--line);
}
.contact-item:last-child { border-bottom: 1px solid var(--line); }
.contact-link {
  font-size: clamp(1.25rem, 0.95rem + 1.4vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
}
.contact-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.contact-address { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; margin-bottom: var(--space-s); }
.contact-brief .brief-list { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.brief-list li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
.brief-num { padding-top: 0.3rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--fg-muted); }
.brief-list p { margin-top: 0.25rem; color: var(--fg-muted); }
.contact-brief .btn { margin-top: var(--space-l); }
.contact-note { margin-top: var(--space-s); font-size: var(--fs-sm); color: var(--fg-muted); }

/* "Book a session" in the header, when you're on that page */
.site-nav .nav-cta a[aria-current="page"] { box-shadow: none; background: var(--fg); color: var(--bg); }
@media (max-width: 859.98px) {
  .js .site-nav .nav-cta a[aria-current="page"] { background: none; color: var(--grey-light); }
}


/* Services page -------------------------------------------------------------------
   One block per stage: title (and photo) on the left, its services on the right. */
.jump-nav { margin-top: var(--space-l); }
.jump-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.jump-nav a {
  display: inline-flex;
  gap: 0.5em;
  padding-block: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px solid transparent;
}
.jump-nav a span { color: var(--fg-muted); }
.jump-nav a:hover { border-bottom-color: currentColor; }

.svc-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) clamp(2.5rem, 6vw, 6rem);
  padding-block: var(--space-xl);
  border-top: 1.5px solid var(--fg);
}
.svc-stage:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 960px) {
  .svc-stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .svc-stage__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.svc-stage__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--brass-deep); }
.svc-stage__name { margin-top: 0.5rem; font-size: clamp(3rem, 1.8rem + 4.5vw, 6rem); line-height: 0.88; }
.svc-stage__intro { margin-top: var(--space-s); max-width: 30ch; font-size: var(--fs-lead); color: var(--fg-muted); }
.svc-stage__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: var(--space-l); box-shadow: var(--shadow-photo); }
@media (max-width: 959.98px) { .svc-stage__media img { aspect-ratio: 16 / 9; } }

.svc { padding-block: var(--space-l); border-top: 1px solid var(--line); }
.svc:first-child { padding-top: 0; border-top: 0; }
.svc__name { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 750; line-height: 1.1; }
.svc__desc { margin-top: var(--space-s); max-width: 48ch; font-size: var(--fs-lead); line-height: 1.5; }
.svc__lists { display: grid; gap: var(--space-m); margin-top: var(--space-m); }
@media (min-width: 640px) { .svc__lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); } }
.svc__list-title {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.svc__lists li { padding-block: 0.55rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.45; }

.cta__sub { max-width: 40ch; font-size: var(--fs-lead); line-height: 1.5; color: rgb(247 245 240 / 0.86); }
.cta--photo .cta__sub { margin-top: calc(-1 * var(--space-s)); }

/* About page --------------------------------------------------------------------- */
.about-intro { display: grid; gap: var(--space-l) clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 900px) { .about-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } }
.about-intro__statement { font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); line-height: 0.92; }
.about-intro__text { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--fg-muted); }
.about-why { display: grid; gap: var(--space-l) clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 900px) { .about-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; } }

.stage-links { border-top: 1.5px solid var(--fg); }
.stage-links a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem var(--space-s);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.stage-link__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--brass-deep); }
.stage-link__name { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); font-stretch: var(--headline-width); font-weight: 800; line-height: 0.95; text-transform: uppercase; }
.stage-link__svc { grid-column: 2; color: var(--fg-muted); font-size: var(--fs-sm); }
.stage-link__arrow { grid-row: 1; grid-column: 3; color: var(--fg-muted); transition: transform 0.25s var(--ease), color 0.25s var(--ease); }
.stage-links a:hover .stage-link__arrow { transform: translateX(5px); color: var(--fg); }
.stage-links a:hover .stage-link__name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
@media (min-width: 900px) {
  .stage-links a { grid-template-columns: 3rem minmax(0, 0.9fr) minmax(0, 1.1fr) auto; }
  .stage-link__svc { grid-column: 3; }
  .stage-link__arrow { grid-column: 4; }
}

.about-studio { display: grid; gap: var(--space-l) clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 900px) { .about-studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.about-studio__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-deep); filter: grayscale(1) contrast(1.08); }
.about-studio__text { display: grid; gap: var(--space-m); justify-items: start; }
.about-studio__text .contact-address { margin-bottom: 0; }
.about-studio__founder,
.about-studio__work { color: var(--fg-muted); }
.about-studio__work a:not(.link-arrow) { color: var(--fg); }


/* 7. MOTION ------------------------------------------------------------------------
   Subtle and optional. The JavaScript only hides sections that start below the
   screen, then fades them in as you scroll. Visitors who turn on "reduce motion"
   on their phone or computer see everything instantly. */

.reveal {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-pending {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal.is-pending { opacity: 1; transform: none; }
}