/* =========================================================================
   Sarv Studio
   ========================================================================= */

/* Flecha M is not on Google Fonts. Drop the font files into assets/fonts/
   (names below) or install it locally; Newsreader is used until then. */
@font-face {
  font-family: "Flecha M";
  src: local("Flecha M"), local("FlechaM-Regular"),
       url("../assets/fonts/FlechaM-Regular.woff2") format("woff2"),
       url("../assets/fonts/FlechaM-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Registered so the page colours can animate as sections scroll in */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #FFF6EF; }
@property --fg { syntax: "<color>"; inherits: true; initial-value: #141F16; }

:root {
  --cream: #FFF6EF;
  --green: #141F16;
  --green-soft: #243328;
  --paper: #FFFFFF;
  --stroke: #E9E0DA;

  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Flecha M", "Flecha Test M", "Newsreader", Georgia, "Times New Roman", serif; /* Flecha Test M: the trial build as installed (all weights) */

  /* Type scale */
  --fs-hero: clamp(3.25rem, 7.5vw, 6rem);          /* 96  Display Bold — hero */
  --fs-heading: 2rem;                              /* 32  Display Medium — section headings */
  --fs-card-name: clamp(1.5rem, 2.5vw, 2rem);      /* 32  Display Medium — profile card name */
  --fs-sub: clamp(1.0625rem, 1.875vw, 1.5rem);     /* 24  Display Regular — small titles, project & member names */
  --fs-tab: clamp(.8rem, 1.875vw, 1.5rem);         /* 24  Display Medium — service tabs */
  --fs-body: clamp(1rem, 1.5625vw, 1.25rem);       /* 20  Regular — paragraphs, quotes, bios */
  --fs-tag: clamp(.8125rem, 1.5625vw, 1.25rem);    /* 20  Regular — service tags */
  --fs-caption: clamp(.875rem, 1.5625vw, 1.25rem); /* 20  Regular — captions */
  --fs-chip: var(--fs-sub);                        /* 24  Display Regular — team names on green */
  --fs-button: clamp(.875rem, 1.25vw, 1rem);       /* 16  Medium — buttons */
  --fs-xs: clamp(.875rem, 1.25vw, 1rem);           /* 16  Regular — form service checkboxes */
  --fs-small: clamp(.9375rem, 1.4vw, 1.125rem);    /* 18  — client name & company, opening hours */

  /* Fixed sizes for the desktop hero (Figma frame 2172:333, 1440 wide) */
  --fs-24: 24px;                                   /* 24  Display 3XS Medium / Paragraph XL Regular, line 48 */
  --fs-80: 80px;                                   /* 80  hero title Bold, line 120 */
  --fs-16: 16px;                                   /* 16  Text S Medium, line 28 */
  --lh-48: 48px;
  --lh-120: 120px;
  --lh-28: 28px;

  --text-primary: #0A0A0A;                         /* Colors/Text/text-primary */
  --brand-primary: #283E2C;                        /* Colors/Brand/Primary/brand-primary-default */
  --text-secondary: #414244;                       /* Colors/Text/text-secondary */
  --text-tertiary: #737578;                        /* Colors/Text/text-tertiary */
  --text-placeholder: #939598;                     /* Colors/Text/text-placeholder */
  --border-default: #D5D6D7;                       /* Colors/Border/border-default */
  --space-xs: 40px;                                /* Spacing/space-xs */
  --space-5xs: 24px;                               /* Spacing/space-5xs */
  --space-9xs: 12px;                               /* Spacing/space-9xs */
  --space-10xs: 10px;                              /* Spacing/space-10xs */
  --space-12xs: 6px;                               /* Spacing/space-12xs */
  --space-5xl: 120px;                              /* Spacing/space-5xl */
  --radius-lg: 8px;                                /* Corner Radiuses/rounded-lg */
  --fs-48: 48px;                                   /* 48  Display XS Bold, line 80 */
  --fs-20: 20px;                                   /* 20  Text L Regular, line 36 */
  --fs-32: 32px;                                   /* 32  Display 2XS Bold, line 64 */
  --lh-80: 80px;
  --lh-64: 64px;
  --lh-40: 40px;
  --lh-36: 36px;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1240px;
  --margin: 16px;                                  /* page side margin; steps up with the window below */
  --nav-h: 72px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
}
/* the page's side margin: 16 on phones, 40 on tablets, then 52 / 64 / 80 on desktops, and 120 from 1440 up (the content
   stretches between the margins, it is never centred in a fixed width) */
@media (min-width: 601px) { :root { --margin: 40px; } }
@media (min-width: 901px) { :root { --margin: 52px; } }
@media (min-width: 1024px) { :root { --margin: 64px; } }
@media (min-width: 1280px) { :root { --margin: 80px; } }
@media (min-width: 1440px) { :root { --margin: 120px; } }

body {
  --bg: var(--cream);
  --fg: var(--green);
}
body[data-theme="dark"] {
  --bg: var(--green);
  --fg: var(--cream);
}
body {
  --muted: color-mix(in srgb, var(--fg) 74%, transparent);
  --faint: color-mix(in srgb, var(--fg) 42%, transparent);
  --line: color-mix(in srgb, var(--fg) 18%, transparent);
  transition: --bg .9s var(--ease-io), --fg .9s var(--ease-io);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

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

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--fg); color: var(--bg); padding: .5rem .9rem; border-radius: 4px;
}
.skip-link:focus { top: 1rem; }

.icon { width: 14px; height: 14px; flex: none; }

/* ---------- Type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.display--xl { font-size: var(--fs-hero); letter-spacing: -.025em; line-height: 1; }
.display--lg, .display--md { font-size: var(--fs-48); font-weight: 500; } /* section titles: 48 Medium (Display XS) */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 1.25rem;
  color: var(--text-primary); /* every eyebrow is the same black... */
}
main > [data-theme="dark"] .eyebrow { color: var(--paper); } /* ...and white on the dark sections, where black wouldn't show */
@media (min-width: 901px) { .eyebrow { font-size: var(--fs-24); font-weight: 500; } } /* eyebrows: a true 24 Medium */
.lead { color: var(--muted); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; max-width: 32em; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 3.2em;
  padding: 0 1.35em;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: var(--fs-button);
  font-weight: 500;
  white-space: nowrap;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out), background-color .45s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: currentColor;
  opacity: .12;
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: none; }
.btn .icon { width: .85em; height: .85em; transition: transform .5s var(--ease-out); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn--sm { height: 2.75em; padding: 0 1.1em; }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--ghost { border-color: var(--fg); color: var(--fg); }
.btn--dark { background: var(--green); color: var(--cream); }
.btn--block { width: 100%; }

.arrow {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  transition: background-color .35s, transform .35s var(--ease-out);
}
.arrow .icon { width: 16px; height: 16px; }
.arrow:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.arrow[data-dir="-1"]:hover { transform: translateX(-2px); }
.arrow[data-dir="1"]:hover { transform: translateX(2px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  /* the same colour as the page behind it (it follows the theme), fully opaque */
  background: var(--bg);
}
.nav__inner { max-width: none; padding-inline: var(--margin); height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }

.logo { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 10px; }
.nav__menu { grid-column: 2; }
.nav__cta { grid-column: 3; justify-self: end; }
.btn.nav__cta { background: var(--brand-primary); color: var(--paper); } /* the same green as the buttons in the page on light sections... */
body[data-theme="dark"] .btn.nav__cta { background: var(--fg); color: var(--bg); } /* ...and cream with dark text over the dark ones */
.mobile-menu .btn--solid { background: var(--brand-primary); color: var(--paper); } /* the menu's button matches the nav one */
body[data-theme="dark"] .mobile-menu .btn--solid { background: var(--fg); color: var(--bg); }
.logo__mark { display: none; } /* the old drawn leaf; the mark picture (.logo__img) replaces it everywhere */
.logo__leaf { fill: var(--fg); }
.logo__rib { stroke: var(--bg); stroke-width: 1.3; stroke-linecap: round; fill: none; }
.logo__trunk { stroke: var(--fg); stroke-width: 1.3; stroke-linecap: round; fill: none; }
.logo__img { display: block; width: auto; height: 33px; transition: filter .9s var(--ease-io); }
/* the picture is dark green: over a dark section it turns light, like the word beside it */
body[data-theme="dark"] .logo__img { filter: grayscale(1) invert(1) brightness(1.15) sepia(.12); }
.logo__word { font-family: var(--font-display); font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; }

.nav__links {
  display: flex; justify-content: center; gap: clamp(1.1rem, 2.2vw, 2.5rem);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-small);
  font-weight: 500;
}
.nav__links a { position: relative; padding-block: .35rem; opacity: .78; transition: opacity .3s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { opacity: 1; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }

.burger { display: none; grid-column: 3; grid-row: 1; justify-self: end; width: 40px; height: 40px; position: relative; }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--fg);
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 23px; }
body.menu-open .burger span:first-child { top: 19.5px; transform: rotate(45deg); }
body.menu-open .burger span:last-child { top: 19.5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease-io), visibility 0s linear .7s;
}
.mobile-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.mobile-menu li { overflow: hidden; }
.mobile-menu li a {
  display: block; font-family: var(--font-display); font-size: var(--fs-24); line-height: 1.25;
  transform: translateY(100%); transition: transform .7s var(--ease-out);
}
body.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-io); }
body.menu-open .mobile-menu li a { transform: none; }
body.menu-open .mobile-menu li:nth-child(1) a { transition-delay: .20s; }
body.menu-open .mobile-menu li:nth-child(2) a { transition-delay: .25s; }
body.menu-open .mobile-menu li:nth-child(3) a { transition-delay: .30s; }
body.menu-open .mobile-menu li:nth-child(4) a { transition-delay: .35s; }
body.menu-open .mobile-menu li:nth-child(5) a { transition-delay: .40s; }
body.menu-open .mobile-menu li:nth-child(6) a { transition-delay: .45s; }

/* ---------- Sections / frame ---------- */
.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-h) + 2.5rem) 3.5rem;
}

/* ---------- Reveal animations ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="split"], .js [data-reveal="words"], .js [data-reveal="stage"] { opacity: 1; transform: none; }

.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.split .w > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 55ms);
}
.split.is-in .w > span { transform: none; }

/* Services: one heading line per service in the same place; the active one wipes up in, the others wait below the
   mask (or leave above it, once passed) */
.services__title { display: grid; }
.services__line { grid-area: 1 / 1; }
.split .services__line:not(.is-active) .w > span { transform: translate3d(0, 110%, 0); transition-duration: .6s; transition-delay: calc(var(--i, 0) * 30ms); }
.split .services__line.is-before .w > span { transform: translate3d(0, -110%, 0); }

/* Body copy: the same split, but each word drifts up and fades instead of wiping */
.words .w { display: inline-block; }
.words .w > span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .32em, 0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 16ms);
}
.words.is-in .w > span { opacity: 1; transform: none; }
/* the Projects descriptions are long and sit alone on the screen, so they come in slower */
.work__copy.words .w > span {
  transition-duration: 1.3s, 1.3s;
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 45ms);
}

/* ---------- Hero ---------- */
.hero {
  padding-bottom: 6rem;
}
/* Scrim over the picture so the hero text stays readable */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* fades the picture into the next section */
    linear-gradient(to top, var(--cream) 0%, color-mix(in srgb, var(--cream) 55%, transparent) 9%, transparent 20%),
    /* keeps the text side clear */
    linear-gradient(100deg,
      var(--cream) 0%,
      var(--cream) 34%,
      color-mix(in srgb, var(--cream) 80%, transparent) 48%,
      color-mix(in srgb, var(--cream) 25%, transparent) 62%,
      transparent 72%);
}
.hero > .container { position: relative; z-index: 1; }
.hero__title { margin: .2rem 0 1.6rem; margin-left: -.04em; }
.hero__lead { margin-bottom: 2.25rem; max-width: 33rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Desktop hero mirrors Figma frame 2172:333 (1440x838). Like the services frame it is scaled as one
   piece by --s (set in initScale), so the text keeps its relative positions. Phones keep the old layout above. */
@media (min-width: 901px) {
  .hero {
    display: block;
    width: 100%; max-width: none;
    /* at least a full window tall, so the services frame stays below the fold until you scroll */
    height: max(calc(838px * var(--s, 1)), 100vh);
    height: max(calc(838px * var(--s, 1)), 100svh);
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .hero > .hero__content {
    position: absolute;
    left: var(--margin); top: calc(154px * var(--s, 1)); /* the text follows the window width like every other section; its height still follows the frame */
    width: 800px; max-width: none; /* Figma: the text block is 800 wide, so the paragraph runs two lines */
    transform: scale(var(--ws, 1)); transform-origin: 0 0;
    padding: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-xs);
    color: var(--text-primary);
  }
  .hero__heading { display: flex; flex-direction: column; gap: var(--space-5xs); }
  .hero .eyebrow {
    margin: 0;
    font-size: var(--fs-24); line-height: var(--lh-48);
    white-space: nowrap;
  }
  .hero__title {
    margin: 0;
    font-size: var(--fs-80); line-height: var(--lh-120); letter-spacing: 0;
    color: var(--brand-primary);
    white-space: nowrap;
  }
  .hero__lead {
    max-width: none; margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-24); line-height: var(--lh-48);
  }
  .hero__actions { flex-wrap: nowrap; gap: var(--space-5xs); }
  .hero .btn {
    height: auto;
    padding: var(--space-9xs) var(--space-5xs);
    gap: 0;
    font-size: var(--fs-16); line-height: var(--lh-28);
  }
  .hero .btn > span { padding-inline: 6px; }
  .hero .btn .icon { width: 24px; height: 24px; }
  .hero .btn--solid { background: var(--brand-primary); color: var(--paper); }
  /* Figma strokes sit inside the 52px box, so draw the ghost outline as an inset ring */
  .hero .btn { border: 0; }
  .hero .btn--ghost { box-shadow: inset 0 0 0 1px var(--brand-primary); color: var(--brand-primary); }
}

/* Garden illustration behind the hero and the services frame: cream on its left, so the text sits on clear ground.
   Desktop sits it bottom-right at 75% of the width, so the raised hand stays clear of the 800px hero paragraph;
   phones and tablets show the figure at the bottom, under the text (initArtFit sizes it to the space left; the sizes
   below are the fallback). Its own cream (#FEF8F1) is close enough to --cream to show no edge. */
.hero, .services__sticky {
  background: var(--cream) url("../assets/backgrounds/garden.webp?v=1") right bottom / 75% auto no-repeat;
}
.hero::before { display: none; }
@media (max-width: 900px) {
  .hero { background-size: 190% auto; }
  /* smaller here, so the raised hand stays right of the stacked tags (up to five, ~130px wide, ending ~670px down) */
  .services__sticky { background-size: 130% auto; }
}

/* ---------- Blank page ---------- */
.blank { min-height: 100vh; min-height: 100svh; }

/* ---------- Services (scroll-driven) ---------- */
.services {
  position: relative;
  height: calc(var(--count, 4) * 100vh);
  height: calc(var(--count, 4) * 100svh);
}
.services__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + 1.5rem) 2.5rem;
  overflow: hidden;
}
.services__inner { display: flex; flex-direction: column; }
.service__title { display: none; } /* phones only, see below */

.services__stage {
  position: relative;
  display: grid;
  margin-top: clamp(2.5rem, 9vh, 6rem);
}

/* Floating preview of the work behind each service */
.service { grid-area: 1 / 1; min-width: 0; }
.service:not(.is-active) { pointer-events: none; }
.service__desc { color: var(--muted); font-size: var(--fs-body); line-height: 1.5; max-width: 30em; margin-bottom: 1.25rem; }

/* The description washes in a word at a time, like the body copy elsewhere */
.service :is(.service__title, .service__desc) .w > span {
  opacity: 0;
  transform: translate3d(0, .32em, 0);
  transition: opacity .35s var(--ease-io), transform .35s var(--ease-io);
  transition-delay: 0ms;
}
.service.is-before :is(.service__title, .service__desc) .w > span { transform: translate3d(0, -.32em, 0); }
.service.is-active :is(.service__title, .service__desc) .w > span {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(180ms + var(--i, 0) * 16ms);
}

.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
/* Service tags: hug their content on one row (scrolls sideways if the screen is too narrow) */
.service .tags {
  flex-wrap: nowrap;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.service .tags::-webkit-scrollbar { display: none; }
.service .tag { flex: none; white-space: nowrap; }
.tag {
  padding: .45em .8em;
  font-size: var(--fs-tag);
  font-weight: 400;
  line-height: 1.2;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.service .tag {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .3s ease, transform .45s var(--ease-io);
}
.service.is-before .tag { transform: translate3d(0, -16px, 0); }
.service.is-active .tag {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .9s var(--ease-out);
  transition-delay: calc(380ms + var(--i, 0) * 60ms);
}
/* Hold everything until the section is revealed the first time */
.services__stage:not(.is-in) .service.is-active :is(.service__title, .service__desc) .w > span { opacity: 0; transform: translate3d(0, .32em, 0); }
.services__stage:not(.is-in) .service.is-active .tag { opacity: 0; transform: translate3d(0, 16px, 0); }

/* Desktop services mirrors Figma frame 2771:1607 (1440x980). Phones keep the old layout above. */
@media (min-width: 901px) {
  /* The 1440x980 Figma frame is a canvas pinned to the window's top, left and right edges.
     It scales as one piece (--s, set in initServices) so it always fits the window height
     and the artwork is never cropped; wider windows just stretch it, so the text keeps its
     120px left edge and the artwork stays on the right. */
  .services__sticky { padding: 0; justify-content: flex-start; align-items: flex-start; }
  /* one and a half windows of scrolling per service */
  .services { height: calc(var(--count, 4) * 150vh); height: calc(var(--count, 4) * 150svh); }
  .services__inner {
    position: relative;
    display: block;
    flex: none;
    width: calc(100% / var(--s, 1)); max-width: none;
    height: 980px;
    padding: 0;
    transform: scale(var(--s, 1));
    transform-origin: 0 0;
    color: var(--text-primary);
  }
  /* The text (head and stage) follows the window width (--ws) like every other section, the artwork keeps the frame's --s:
     inside the --s frame they are scaled once more by --k = --ws / --s. */
  .services__head {
    position: absolute;
    left: calc(var(--margin) / var(--s, 1)); right: calc(var(--margin) / var(--s, 1)); top: calc(var(--space-5xl) * var(--k, 1)); /* the page margin, in the frame's own px */
    transform: scale(var(--k, 1)); transform-origin: 0 0;
  }
  .services .eyebrow {
    margin: 0 0 var(--space-5xs);
    font-size: var(--fs-24); line-height: var(--lh-48);
  }
  .services .display--lg {
    /* two lines, broken after "Needs" (the two halves are about the same width, ~660px at 48px), so it keeps clear of
       the tree: at 1440x900 the longer line ends ~80px short of it */
    max-width: none; white-space: nowrap;
    font-size: var(--fs-48); font-weight: 500; line-height: var(--lh-80);
  }

  .services__stage {
    position: absolute;
    left: calc(var(--margin) / var(--s, 1)); top: 578px;
    width: 660px;
    margin: 0;
    transform-origin: 0 0;
  }
  /* (own rule, as specific as the reveal rule that would otherwise reset the transform) */
  .services .services__stage { transform: scale(var(--k, 1)); }
  .service__title {
    display: block;
    margin: 0 0 var(--space-5xs);
    font-family: var(--font-display);
    font-size: var(--fs-32); font-weight: 700; line-height: var(--lh-64);
  }
  .service__desc {
    max-width: none; margin: 0 0 var(--space-5xs);
    color: var(--text-primary);
    font-size: var(--fs-24); line-height: var(--lh-40);
  }
  .service .tags {
    flex-wrap: wrap;
    width: auto; max-width: none;
    overflow: visible;
    gap: var(--space-10xs);
  }
  .service .tag {
    padding: var(--space-12xs) var(--space-9xs);
    font-size: var(--fs-20); line-height: var(--lh-36);
    border-radius: var(--radius-lg);
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--paper);
  }
}

/* ---------- Projects ---------- */
/* Mirrors Figma frame 2557:885. On desktop every size is its Figma px value times --ws (window width / 1440,
   capped at 1), so the page matches the design at 1440 and scales down with the window.
   No overflow clipping on the section or .works: it would stop the title rows from sticking. */
.projects { min-height: 0; justify-content: flex-start; padding-bottom: 0; }
.projects__head { display: grid; gap: 1.5rem; margin-bottom: clamp(3rem, 9vh, 6rem); }
.projects__title { display: grid; gap: 1rem; }
.projects__head .eyebrow { margin: 0; }
.projects__head .display { margin: 0; }
.projects__lead { margin: 0; max-width: 46em; font-size: var(--fs-body); line-height: 1.6; color: var(--text-primary); }

.projects__inner { padding-inline: var(--gutter); }
.works { position: relative; }
.work { display: contents; } /* so each title row can stick against the whole list, not just its own category */
.work__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.work__tagline, .work__label { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--text-primary); transition: color .5s var(--ease-out); }
.work__tagline { font-weight: 700; } /* the label stays Medium */
.work__tagline { font-size: clamp(1.375rem, 4vw, 2rem); line-height: 1.25; }
.work__label { font-size: 1rem; line-height: 1.4; }
.work__copy { margin: 0; font-size: var(--fs-body); line-height: 1.6; color: var(--text-primary); }
/* the category's text on the left (label, tagline, copy, top to bottom), a 16:9 frame for its html motion on the
   right taking 3/5 of the row; the gap comes out of the text */
.work__intro {
  display: grid; grid-template-columns: minmax(0, 1fr) 60%; column-gap: 3rem; align-items: start;
}
.work__text { display: flex; flex-direction: column; gap: 1.25rem; }
.work__motion { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.work__motion > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; } /* watch-only: the wheel keeps scrolling the page */
.work__previews { display: flex; flex-direction: column; gap: 2rem; }
.works__rule { height: 1px; margin-block: clamp(2.5rem, 8vw, 5rem); background: var(--border-default); }

/* Preview pictures. A .preview is a box with the Figma size (--pw x --ph); each .tile inside is placed in
   Figma px (--x --y --w --h) and crops its picture the way Figma does (--iw --ih --il --it, in %). */
.preview { position: relative; width: 100%; aspect-ratio: var(--pw) / var(--ph); }
.tile {
  position: absolute; overflow: hidden;
  left: calc(var(--x) / var(--pw) * 100%); top: calc(var(--y) / var(--ph) * 100%);
  width: calc(var(--w) / var(--pw) * 100%); height: calc(var(--h) / var(--ph) * 100%);
  border-radius: calc(16px * var(--ws, 1));
  background: var(--paper);
}
.tile img {
  position: absolute; max-width: none;
  left: calc(var(--il) * 1%); top: calc(var(--it) * 1%);
  width: calc(var(--iw) * 1%); height: calc(var(--ih) * 1%);
}
.tile--flat { border-radius: 0; }
.tile--line { border: 1px solid var(--border-default); }
.preview--panel { overflow: hidden; background: var(--paper); border-radius: calc(16px * var(--ws, 1)); }
.preview--art img { display: block; width: 100%; height: auto; }
.tile--bare { border-radius: 0; background: none; } /* a cut-out (the iPhone) sitting straight on the page */
/* A tilted grid of app screens (Halazoon, Lila). The .screens panel is placed like a tile; inside it everything is in
   Figma px of the panel (--cw wide) through --u, so the grid scales with the preview. Each .screens__set is the
   bounding box Figma gives the rotated group (--bx --by --bw --bh); its rows are centred in it and turned by --rot.
   Screens are --sw x --sh with --sr corners, --gap apart in a row and --rgap between rows. */
.screens { container-type: inline-size; --u: calc(100cqw / var(--cw)); }
.screens__set {
  position: absolute; display: flex; align-items: center; justify-content: center;
  left: calc(var(--bx) * var(--u)); top: calc(var(--by) * var(--u));
  width: calc(var(--bw) * var(--u)); height: calc(var(--bh) * var(--u));
}
.screens__rot { flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(var(--rgap, 0) * var(--u)); transform: rotate(var(--rot)); }
.screens__row { display: flex; align-items: center; gap: calc(var(--gap) * var(--u)); }
.screens__row[style*="--rw"] { width: calc(var(--rw) * var(--u)); }
.screens .screens__row img {
  position: static; display: block; flex: none;
  width: calc(var(--sw) * var(--u)); height: calc(var(--sh) * var(--u));
  border-radius: calc(var(--sr) * var(--u));
}
/* Instagram cards: the three profile pictures are placed in Figma px like tiles, and the counts are live text on top
   of them (initWorks's neighbour initCounters changes the numbers). Sizes use cqw so the text scales with the block.
   The tilted cards run past the block's bottom edge, as in Figma. */
.preview--insta { container-type: inline-size; }
.ig {
  position: absolute;
  left: calc(var(--x) / var(--pw) * 100%); top: calc(var(--y) / var(--ph) * 100%);
  width: calc(var(--w) / var(--pw) * 100%); aspect-ratio: var(--w) / var(--h);
  transform: rotate(var(--rot, 0deg));
}
.ig > img { display: block; width: 100%; height: 100%; }
.ig--front > img { filter: drop-shadow(0 0 calc(20 / 1200 * 100cqw) rgba(0, 0, 0, .1)); }
.ig__nums {
  position: absolute; margin: 0;
  left: calc(var(--l) / var(--w) * 100%); top: calc(var(--t) / var(--h) * 100%);
  display: flex; align-items: center; gap: calc(var(--gap) / 1200 * 100cqw);
  height: calc(16 / 1200 * 100cqw);
  font-family: var(--font-body); font-weight: 500;
  font-size: calc(var(--fs) / 1200 * 100cqw); line-height: calc(var(--lh) / 1200 * 100cqw);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ig__nums--box { background: var(--paper); }
.ig__num { display: block; width: calc(var(--cw) / 1200 * 100cqw); transition: color .4s var(--ease-out); }
.ig__num.is-counting { color: var(--brand-primary); }

@media (min-width: 901px) {
  .projects {
    padding-top: calc(120px * var(--ws, 1));
    padding-bottom: calc(120px * var(--ws, 1));
  }
  .projects__inner { padding-inline: var(--margin); }
  .projects__head { gap: calc(48px * var(--ws, 1)); margin-bottom: calc(80px * var(--ws, 1)); }
  .projects__title { gap: calc(24px * var(--ws, 1)); }
  .projects__head .eyebrow {
    font-size: var(--fs-24); line-height: calc(48px * var(--ws, 1));
    font-weight: 500;
  }
  /* this heading and the Services one are always a true 48px Medium, whatever the window size */
  .projects__head .display--md {
    font-size: var(--fs-48); line-height: calc(80px * var(--ws, 1));
    font-weight: 500; letter-spacing: 0; color: var(--text-primary);
  }
  .projects__lead { max-width: none; margin-top: calc(16px * var(--ws, 1)); font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); }

  /* Figma frame 2986:378: the title (label 20/40 over a Medium tagline, 32/64 here, 48/80 in Figma) runs the full width, 80px above
     a row of copy beside the motion frame (763 of 1200, 40px apart). The title rows don't stick, so initWorks leaves them be. */
  .work__head { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: calc(8px * var(--ws, 1)); margin: 0 0 calc(80px * var(--ws, 1)); }
  .work__label { order: -1; font-size: calc(20px * var(--ws, 1)); line-height: calc(40px * var(--ws, 1)); }
  .work__tagline { font-weight: 500; font-size: calc(32px * var(--ws, 1)); line-height: calc(64px * var(--ws, 1)); } /* 32 / 64 Medium: a step under the 48 section titles */
  .work__intro { grid-template-columns: minmax(0, 1fr) calc(763 / 1200 * 100%); column-gap: calc(40px * var(--ws, 1)); }
  .work__copy {
    font-size: calc(20px * var(--ws, 1)); line-height: calc(40px * var(--ws, 1));
  }
  .work__previews { gap: calc(80px * var(--ws, 1)); }
  .work__previews--tight { gap: calc(40px * var(--ws, 1)); }
  /* Stacked cards: every category is a full-width card that sticks under the nav and the next one slides up over it,
     with a soft shadow on its top edge; initWorks fades the covered card out as the next one climbs, and lets a card
     too tall for the room under the nav stick by its bottom edge (--top). */
  .work {
    display: block; position: sticky; z-index: calc(var(--i, 0) + 1);
    top: var(--top, var(--nav-h));
    margin-inline: calc(-1 * var(--margin)); padding: calc(32px * var(--ws, 1)) var(--margin) calc(80px * var(--ws, 1));
    background: var(--bg);
    box-shadow: 0 -1px 0 var(--line), 0 -18px 36px -18px rgba(10, 10, 10, .14);
  }
  .work:first-child { box-shadow: none; }
  .works__rule { display: none; } /* the card edges take over from the dividers */
}

/* ---------- About + team ---------- */
/* Sized to its content, with a set space above and below the tree of names */
.about {
  --gap: 16px;         /* space between names */
  --tree-space: 80px;  /* space above and below the tree */
  --text-room: clamp(4rem, 11vh, 8.5rem); /* air above and below the copy */
  min-height: 0; justify-content: flex-start; overflow: clip;
  padding-top: calc(var(--nav-h) + var(--text-room));
  padding-bottom: calc(var(--tree-space) - var(--gap) / 2);
}
/* Who we are: two columns that stack on phones */
.about__intro { margin-bottom: calc(var(--text-room) * 1.6); text-align: left; }
.about__intro .eyebrow { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.intro__row {
  display: grid;
  /* 10:7 puts the right column's edge at 60% of the window: the gutter and the
     gap are both 5vw, so 0.1V + 0.85V * (10/17) = 0.6V */
  grid-template-columns: minmax(0, 10fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.intro__row + .intro__row { margin-top: calc(var(--text-room) * 1.5); }
.intro__row .display { text-wrap: pretty; }
.intro__row--open .display { line-height: 1.35; }
.intro__lead,
.intro__copy,
.intro__text p {
  font-size: var(--fs-body);
  line-height: 1.6;
  margin: 0;
  color: var(--fg);
}
.intro__copy { display: grid; gap: .35em; max-width: 34em; }
/* Our Origin: the studio line and the meaning of the name as one centred block under the title */
.intro__text { display: grid; gap: 0; margin-inline: auto; text-align: center; }
.intro__text p { color: var(--text-primary); }
.intro__lead { max-width: 30em; }

.intro__art { margin: 0; justify-self: start; }
.intro__art img { width: clamp(15rem, 22vw, 20rem); height: auto; border-radius: 4px; }

/* Desktop "Our Origin" mirrors Figma frame 2191:357 (1440 wide): 120px of padding, a centred title block, then the
   story (886px of text, the framed painting 236x299) with 80px between. Sizes are Figma px times --ws, as in Projects.
   The section after it is the team, 120px below. */
@media (min-width: 901px) {
  .about { padding-top: calc(120px * var(--ws, 1)); padding-bottom: calc(120px * var(--ws, 1)); } /* 120 at both ends, like every other section */
  .about__intro { max-width: none; padding-inline: var(--margin); margin-bottom: 0; padding-bottom: calc(120px * var(--ws, 1)); }
  .about__intro .eyebrow {
    margin: 0 0 calc(24px * var(--ws, 1)); text-align: center;
    line-height: calc(48px * var(--ws, 1));
  }
  .intro__row--open { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(80px * var(--ws, 1)); } /* 80 from the title down to the text */
  .intro__row--open .display { font-size: var(--fs-48); font-weight: 500; line-height: calc(80px * var(--ws, 1)); letter-spacing: 0; } /* every section title is the same 48 Medium, 48 / 80 */
  .intro__lead, .intro__copy {
    max-width: none;
    font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1));
    color: var(--text-primary);
  }
  .intro__lead { width: 100%; }
  /* every centred block of copy is 3/5 of the window wide (Origin, the team's intro) */
  .intro__text { width: 60vw; }
  .intro__text p { font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); }
  .intro__row + .intro__row--meaning {
    display: flex; align-items: center; justify-content: space-between; gap: 0;
    margin-top: calc(80px * var(--ws, 1));
  }
  .intro__copy { width: calc(886px * var(--ws, 1)); gap: 0; }
  .intro__art { justify-self: auto; flex: none; }
  .intro__art img { width: calc(236px * var(--ws, 1)); height: calc(299px * var(--ws, 1)); object-fit: cover; border-radius: 0; }
}

.about__head {
  margin-bottom: calc(var(--tree-space) - var(--gap) / 2 + var(--text-room));
  text-align: center;
}
.about__head .display { margin-bottom: calc(var(--text-room) + 1.25rem); } /* matches the space under the copy */
.about__copy {
  display: grid; gap: .5em;
  max-width: min(100%, 46em); /* both paragraphs settle into three even lines */
  margin-inline: auto;
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: 1.5;
  text-wrap: pretty;         /* both paragraphs fill the same measure; only short last lines are avoided */
}

/* Long copy: each word darkens as the block scrolls up the screen.
   --p (0 → 1) is set per block in js/main.js; each word lights in turn. */
[data-scroll-lit] .lit {
  --band: 12;   /* how many words are mid-way at any moment — wider reads softer */
  --floor: .34; /* resting opacity: readable on its own, still clearly unlit */
  /* where this word sits inside the travelling band, 0 → 1 */
  --t: clamp(0, calc((var(--p, 0) * (var(--n, 1) + var(--band)) - var(--i, 0)) / var(--band)), 1);
  /* smoothstep, so each word eases into and out of the band instead of ramping flat */
  opacity: calc(var(--floor) + (1 - var(--floor)) * var(--t) * var(--t) * (3 - 2 * var(--t)));
  /* smooths the per-frame steps; short enough not to lag the scroll */
  transition: opacity .2s linear;
}
.no-js [data-scroll-lit] .lit { opacity: 1; }

/* Playlist, under the team */
.playlist { margin-top: calc(var(--tree-space) + var(--text-room)); }
.playlist .eyebrow { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.playlist__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.playlist__head .lead { max-width: 34em; }
.playlist__embed { margin-top: clamp(2.5rem, 7vh, 5rem); border-radius: 12px; }
.playlist__embed iframe { display: block; width: 100%; border: 0; }
/* Gramophone beside the Spotify player. The picture is on white, so multiply melts that into the cream page. */
.playlist__art { display: block; height: auto; mix-blend-mode: multiply; pointer-events: none; }

.team__stage {
  --type: var(--fs-chip);
  --row: calc(var(--type) * 1.65 + var(--gap));
  position: relative;
}
/* One row per team member */
.team__forest {
  position: relative;
  height: calc(var(--rows, 7) * var(--row));
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out);
}
.team__wall {
  position: absolute; inset: 0;
  font-family: var(--font-display);
  font-size: var(--type);
  line-height: var(--row);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  color: color-mix(in srgb, var(--fg) 12%, transparent);
}
.team__row { height: var(--row); overflow: hidden; }
.team__row > span {
  display: inline-block;
  animation: drift var(--dur, 120s) linear infinite;
  animation-delay: var(--delay, 0s);
  animation-direction: var(--dirn, normal);
  will-change: transform;
}
@keyframes drift { to { transform: translate3d(-50%, 0, 0); } }

.team__tree { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.chip {
  position: absolute; left: 50%;
  top: calc(var(--r) * var(--row));
  height: var(--row);
  display: flex; align-items: center;
  transform: translateX(-50%);
}
.chip__btn {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type);
  font-weight: 400;
  line-height: 1;
  padding: .3em .55em .35em;
  white-space: nowrap;
  background: var(--green);
  color: var(--cream);
  border-radius: 2px;
  transform-origin: center bottom;
  transition: transform .5s var(--ease-out), background-color .35s, color .35s, opacity .5s;
}
button.chip__btn:hover, button.chip__btn:focus-visible { background: var(--green-soft); transform: scale(1.07); }
button.chip__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.chip__btn .sep { opacity: .55; margin-inline: .15em; }

.js .team__stage:not(.is-in) .chip__btn { opacity: 0; transform: translateY(8px) scale(.85); }
.team__stage.is-in .chip__btn {
  transition: transform .9s var(--ease-out), opacity .6s ease, background-color .35s, color .35s;
  transition-delay: calc(300ms + var(--n, 0) * 110ms);
}
.team__stage.is-in button.chip__btn:hover { transition-delay: 0ms; }

.team__hint {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  width: max-content;
  margin-top: .5rem;
  font-size: var(--fs-caption); color: var(--faint);
  background: var(--bg); padding: .15rem .6rem;
  white-space: nowrap;
  transition: opacity .5s;
}

.team__stage.is-open .team__forest { opacity: .4; filter: blur(1.5px); }
.team__stage.is-open .team__tree, .team__stage.is-open .team__hint { pointer-events: none; }
.team__stage.is-open .team__hint { opacity: 0; }

.member {
  /* Sits on the tree only, matching the page's content width */
  position: absolute; z-index: 6;
  left: var(--gutter); right: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  max-width: var(--maxw);
  align-content: center;
  margin-inline: auto;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(150px, 290px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--green);
  color: var(--cream);
  border-radius: 4px;
}
.member[hidden] { display: none; }
.member__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  transition: background-color .3s, transform .5s var(--ease-out);
}
.member__close .icon { width: 18px; height: 18px; }
.member__close:hover { background: rgba(252, 241, 235, .1); transform: rotate(90deg); }

.member__photo {
  position: relative;
  aspect-ratio: 4 / 4.3;
  overflow: hidden;
  border-radius: 2px;
  background:
    radial-gradient(120% 90% at 30% 20%, #efe0d4 0%, #c9b3a1 45%, #7d6a5b 100%);
  display: grid; place-items: center;
}
.member__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } /* faces sit in the upper middle of these portraits */
.member__initials { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5rem); color: var(--green); letter-spacing: -.03em; opacity: .85; }

.member__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-card-name); line-height: 1.15; margin: 0 0 .4rem; }
.member__role { font-size: var(--fs-body); font-weight: 400; margin-bottom: 1.25rem; opacity: .9; }
.member__bio { max-width: 30em; font-size: var(--fs-body); line-height: 1.5; color: var(--cream); margin-bottom: 0; }

.member [data-card-item] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .25s ease, transform .3s ease;
}
.member.is-shown [data-card-item] {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform 1s var(--ease-out);
  transition-delay: calc(320ms + var(--i, 0) * 70ms);
}

/* ---------- Testimonials ---------- */
.quote {
  position: relative;
  margin-top: clamp(2rem, 7vh, 5rem);
  padding-block: clamp(1rem, 4vh, 2.5rem);
  display: flex; flex-direction: column; align-items: center;
}
.quote__mark {
  position: absolute;
  width: clamp(64px, 8vw, 118px);
  height: auto;
  aspect-ratio: 132 / 96;
  fill: var(--fg);
  will-change: transform;
}
.quote__mark--close { right: 0; top: 0; }
.quote__mark--open { left: 0; bottom: 0; }

.quote__content, .quote__person { position: relative; z-index: 1; overflow: clip; }
/* the two curtains that close over a text block (see initTestimonials): parked outside it, in the page colour */
.quote__curtain { position: absolute; top: 0; bottom: 0; width: 51%; background: var(--bg); pointer-events: none; will-change: transform; }
.quote__curtain--l { left: 0; transform: translateX(-101%); }
.quote__curtain--r { right: 0; transform: translateX(101%); }
.quote__content { max-width: 30em; font-size: var(--fs-body); text-align: center; }
.quote__text {
  /* a fixed, generous height so the arrows, name and role never move from one comment to the next; a longer comment is cut with "..." */
  --lines: 6;
  height: calc(var(--lines) * 1.5em);
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 2rem;
  font-size: 1em; line-height: 1.5; text-wrap: pretty;
}
.quote__clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines);
  overflow: hidden; text-overflow: ellipsis;
}
.quote__meta { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem); }
.quote__person { min-width: 12rem; text-align: center; }
.quote__name { font-size: var(--fs-small); font-weight: 500; line-height: 1.4; }
.quote__role { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }

/* Desktop testimonial mirrors Figma frame 2785:1973 (1440x752): 120px of padding, a title, then the quote row
   (a mark each side, 80px gaps, the comment in the middle). Sizes are Figma px times --ws, as in Projects. */
/* The click animation moves each mark with `transform` on the .quote__mark box. The opening mark's half-turn is on
   the picture inside it: a turn on the box itself (even through the separate `rotate` property) would flip which
   way the box's translate goes, and the two marks would no longer meet in the middle. */
.quote__mark { display: block; z-index: 2; } /* above the text blocks and their curtains, so the marks are never covered as they fly together */
.quote__mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.quote__mark--open img { transform: rotate(180deg); }
.quote__mark img { filter: brightness(0); } /* the marks are drawn white; the section is cream now, so they print as dark as the text */
/* The listening figure, on white: multiply melts that into the cream page */
.testimonials__art { display: block; height: auto; mix-blend-mode: multiply; pointer-events: none; }
@media (min-width: 901px) {
  .testimonials {
    min-height: 0; justify-content: flex-start;
    padding-block: calc(120px * var(--ws, 1));
  }
  .testimonials > .container { max-width: none; padding-inline: var(--margin); }
  .testimonials .eyebrow {
    margin: 0 0 calc(24px * var(--ws, 1));
    font-size: var(--fs-24); line-height: calc(48px * var(--ws, 1));
    font-weight: 500;
  }
  .testimonials .display--md {
    margin: 0;
    font-size: var(--fs-48); line-height: calc(80px * var(--ws, 1));
    font-weight: 500; letter-spacing: 0; color: var(--text-primary);
  }
  /* the title across the top; under it the comment on the left and the listening figure on the right, as tall as the
     comment (~576 at 1440, so 630 wide at the picture's 1312:1199) */
  .testimonials > .container {
    display: grid; grid-template-columns: minmax(0, 1fr) calc(630px * var(--ws, 1));
    column-gap: calc(80px * var(--ws, 1)); align-content: start;
  }
  .testimonials .eyebrow, .testimonials .display--md { grid-column: 1 / -1; }
  .testimonials .quote { grid-column: 1; grid-row: 3; }
  .testimonials__art { grid-column: 2; grid-row: 3; align-self: stretch; width: 100%; height: auto; margin-top: calc(80px * var(--ws, 1)); object-fit: contain; } /* the comment's top margin too, so the two start level */

  /* the marks sit top-right and bottom-left of the comment (as on phones), so the text gets the column's full width */
  .quote {
    --m: calc(96px * var(--ws, 1));         /* a quote mark's width */
    margin-top: calc(80px * var(--ws, 1));
    padding: calc(var(--m) * 120 / 151 + 32px * var(--ws, 1)) 0;
    align-items: stretch;
    gap: calc(40px * var(--ws, 1));
    color: var(--text-primary);
  }
  .quote__mark { width: var(--m); aspect-ratio: 151 / 120; height: auto; }
  .quote__content { max-width: none; font-size: calc(24px * var(--ws, 1)); font-weight: 500; line-height: calc(40px * var(--ws, 1)); }
  .quote__text { --lines: 6; height: calc(var(--lines) * 40px * var(--ws, 1)); margin: 0; line-height: inherit; }
  .quote__meta { gap: calc(40px * var(--ws, 1)); }
  .quote .arrow { width: calc(40px * var(--ws, 1)); height: calc(40px * var(--ws, 1)); }
  .quote .arrow .icon--chev { width: calc(12px * var(--ws, 1)); height: calc(22px * var(--ws, 1)); }
  .quote__person { min-width: calc(124px * var(--ws, 1)); display: grid; gap: calc(8px * var(--ws, 1)); }
  .quote__name, .quote__role { font-size: calc(20px * var(--ws, 1)); line-height: calc(36px * var(--ws, 1)); color: var(--text-primary); }
  .quote__name { font-weight: 500; }
  .quote__role { font-weight: 400; }
}

/* Desktop team mirrors Figma frame 2419:599 (1440 wide): 120px of padding, a centred title block, the copy (996px, 24/48),
   then the tree of names (80px above and below, 10px between 56px-tall chips). Sizes are Figma px times --ws.
   The drifting names behind the tree and the "Click a name" hint are not in the frame and stay as they were. */
@media (min-width: 901px) {
  .about__head { max-width: none; padding-inline: var(--margin); padding-top: calc(120px * var(--ws, 1)); margin-bottom: calc(80px * var(--ws, 1)); }
  .about__head .eyebrow { margin: 0 0 calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); }
  .about__head .display { margin-bottom: calc(40px * var(--ws, 1)); font-size: var(--fs-48); font-weight: 500; line-height: calc(80px * var(--ws, 1)); letter-spacing: 0; } /* every section title is the same 48 Medium, 48 / 80 */
  .about__copy {
    width: 66vw; max-width: none; gap: 0; margin-inline: auto; /* a little wider than the other centred copy (60vw): from 64vw up no paragraph ends on a lone word */
    font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); text-wrap: initial;
    color: var(--text-primary);
  }
  .team__stage {
    --type: calc(20px * var(--ws, 1));
    --row: calc(66px * var(--ws, 1));
    padding-block: calc(80px * var(--ws, 1));
  }
  .chip__btn {
    font-family: var(--font-body); font-size: var(--type); font-weight: 400; line-height: calc(36px * var(--ws, 1));
    padding: calc(10px * var(--ws, 1));
    background: var(--brand-primary); color: var(--paper); border-radius: 0;
  }
  .chip { height: calc(56px * var(--ws, 1)); }
  button.chip__btn:hover, button.chip__btn:focus-visible { background: var(--green-soft); }
  .chip__btn--title { cursor: default; }
  .chip__btn .sep { margin-inline: 0; opacity: 1; padding-inline: .4em; } /* Figma's " | " is a pipe with a space each side */
  .team__wall { font-size: var(--type); }
  .team__forest { height: calc(var(--rows, 8) * var(--row) - 10px * var(--ws, 1)); } /* 10px between chips, none after the last */
}

/* Desktop playlist mirrors Figma frame 2425:722 (1440 wide): 120px of padding, the title left-aligned (eyebrow, title, the
   two-line description with 48px under the title), then 80px to the Spotify player (8px corners). The player is the real
   Spotify embed, so it keeps a true height (352px, the smallest that gets the full player) instead of scaling with the window. */
@media (min-width: 901px) {
  .playlist { max-width: none; padding-inline: var(--margin); margin-top: calc(240px * var(--ws, 1)); }
  .playlist .eyebrow { margin: 0 0 calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); }
  .playlist__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(40px * var(--ws, 1)); }
  .playlist__head .display { line-height: calc(80px * var(--ws, 1)); letter-spacing: 0; }
  .playlist__head .lead {
    max-width: none; color: var(--text-primary);
    font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1));
  }
  .playlist__embed { margin-top: calc(80px * var(--ws, 1)); border-radius: 8px; overflow: hidden; }
  /* the player and the gramophone side by side; the picture is as tall as the player (352) */
  .playlist__row { display: flex; align-items: center; gap: calc(40px * var(--ws, 1)); margin-top: calc(80px * var(--ws, 1)); }
  .playlist__row .playlist__embed { flex: 1; min-width: 0; margin-top: 0; }
  .playlist__art { flex: none; width: 352px; }
  .playlist__embed iframe { height: 352px; border-radius: 8px; } /* Spotify only draws its full player (cover, title, track list) at 352; below that it falls back to a compact bar */
}

/* Corporate social responsibility: a column (eyebrow, title, copy, two pictures). Desktop mirrors Figma frame 2428:110 */
.csr__copy { display: grid; gap: .35em; max-width: 46em; margin-top: 1.5rem; font-size: var(--fs-body); line-height: 1.6; color: var(--fg); }
.csr__copy p { margin: 0; }
.csr__gallery { display: grid; gap: 1rem; margin-top: clamp(2rem, 5vh, 3rem); }
.csr__img { margin: 0; overflow: hidden; border-radius: 16px; background: var(--paper); }
.csr__img img { display: block; width: 100%; height: auto; }
@media (min-width: 901px) {
  .csr { max-width: none; padding-inline: var(--margin); margin-top: calc(240px * var(--ws, 1)); text-align: left; }
  .csr .eyebrow { margin: 0 0 calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); }
  .csr .display { margin: 0; line-height: calc(80px * var(--ws, 1)); letter-spacing: 0; }
  .csr__copy {
    max-width: none; gap: 0; margin-top: calc(40px * var(--ws, 1));
    font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); color: var(--text-primary);
  }
  /* the two pictures are placed like the frame's 1200x637 box: 703 wide, a 24px gap, 472 wide */
  .csr__gallery { position: relative; display: block; margin-top: calc(40px * var(--ws, 1)); aspect-ratio: 1200 / 637; }
  .csr__img { position: absolute; top: 0; height: 100%; border-radius: calc(16px * var(--ws, 1)); }
  .csr__img--wide { left: 0; width: calc(703 / 1200 * 100%); }
  .csr__img--tall { left: calc(727 / 1200 * 100%); width: calc(472 / 1200 * 100%); }
  .csr__img img { position: absolute; max-width: none; width: 100%; }
  .csr__img--wide img { height: 111.27%; top: -11.26%; left: 0; }  /* Figma's crop of the tree picture */
  .csr__img--tall img { height: 100%; top: 0; left: 0; object-fit: cover; }
}

/* ---------- Contact ---------- */
.contact { justify-content: flex-start; padding-bottom: 1.25rem; }
.contact__grid {
  margin-block: auto;
  display: grid;
  /* left column never narrower than the button + opening hours row; the form takes what's left */
  grid-template-columns: minmax(auto, 1fr) minmax(320px, 500px);
  gap: clamp(2rem, 6vw, 8rem);
  align-items: center;
}
.contact__copy .lead { max-width: 30rem; margin-top: 1.25rem; }
/* under the lead: a title and the book-a-call button */
.contact__rush { margin-top: clamp(2.5rem, 8vh, 4.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
/* under the call button: the quieter ways in, the form (a pop-up) and WhatsApp */
.contact__alt { margin: 0; color: var(--text-secondary); }
.contact__link {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .3s var(--ease-out);
}
.contact__link:hover { color: var(--brand-primary); }
/* the picture where the form was; it is on white, so multiply melts that into the cream page */
.contact__art { display: block; height: auto; mix-blend-mode: multiply; pointer-events: none; }

/* The enquiry form in a pop-up (a native <dialog>: Esc and the close button shut it, so does a click outside) */
.form-dialog {
  width: min(533px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; background: none; color: var(--text-primary); overflow: visible;
}
/* the reel's blurred cream backdrop (--cream as rgb: ::backdrop can't read the page's variables everywhere) */
.form-dialog::backdrop { background: rgb(255 246 239 / .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.form-dialog[open] { animation: dialog-in .45s var(--ease-out); }
.form-dialog[open]::backdrop { animation: dialog-fade .45s var(--ease-out); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px); } }
@keyframes dialog-fade { from { opacity: 0; } }
.form-dialog .form {
  width: 100%; max-height: calc(100dvh - 32px); overflow: auto;
  box-shadow: 0 40px 80px -48px rgba(20, 31, 22, .35);
}
.form-dialog__close {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text-primary); cursor: pointer;
  transition: background-color .3s var(--ease-out);
}
.form-dialog__close:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.form-dialog__close .icon { width: 20px; height: 20px; }
html:has(.form-dialog[open]) { overflow: hidden; } /* the page stays put behind it */
@media (prefers-reduced-motion: reduce) { .form-dialog[open], .form-dialog[open]::backdrop { animation: none; } }
.hours { font-size: var(--fs-small); font-weight: 400; line-height: 1.45; white-space: nowrap; color: var(--muted); }

.form {
  background: var(--paper);
  color: var(--green);
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(20, 31, 22, .04), 0 40px 80px -48px rgba(20, 31, 22, .35);
}
.field { display: block; margin: 0 0 1.15rem; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; font-size: var(--fs-small); font-weight: 500; margin-bottom: .5rem; padding: 0; }
.input {
  width: 100%;
  font: inherit; font-size: var(--fs-small); font-weight: 400; color: inherit;
  background: #FCFAF8;
  border: 1px solid var(--stroke);
  border-radius: 3px;
  padding: .7rem .8rem;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.input::placeholder { color: rgba(20, 31, 22, .42); font-size: var(--fs-small); font-weight: 400; }
.input:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px rgba(20, 31, 22, .08); }
.input.is-invalid { border-color: #B4533E; box-shadow: 0 0 0 3px rgba(180, 83, 62, .1); }
.choices-field.is-invalid .field__label { color: #B4533E; }
.choices-field.is-invalid .choice span::before { border-color: #B4533E; opacity: 1; }
textarea.input { resize: vertical; min-height: 88px; }

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: flex; align-items: center; gap: .55rem;
  min-height: 36px;
  padding: .45rem .35rem;
  font-size: var(--fs-xs); font-weight: 400; line-height: 1.25;
  white-space: nowrap;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.choice span::before {
  content: ""; flex: none;
  width: 12px; height: 12px;
  border: 1px solid currentColor; border-radius: 50%;
  opacity: .7;
}
.choice span:hover { background: rgba(20, 31, 22, .05); }
/* Selected: the ring turns brand green and a dot fills it; the option itself keeps its look */
.choice input:checked + span::before {
  opacity: 1;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 2.5px var(--paper);
}
.choice input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }

.form .btn--block { margin-top: .6rem; }
.form__status { font-size: var(--fs-caption); margin-top: .75rem; min-height: 1.2em; text-align: center; }
.form__status.is-error { color: #B4533E; }

/* Desktop contact mirrors Figma frame 2491:1183 (1440 wide): 120px of padding, the copy and the contact lines on the left (80px
   apart), a 533px form card on the right, 80px between the columns. Sizes are Figma px times --ws. */
@media (min-width: 901px) {
  .contact { padding-block: calc(120px * var(--ws, 1)); justify-content: center; }
  .contact__grid { max-width: none; padding-inline: var(--margin); margin-block: 0; display: flex; align-items: center; gap: calc(40px * var(--ws, 1)); }
  .contact__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .contact__copy .eyebrow { margin: 0 0 calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); }
  .contact__copy .display { margin: 0; line-height: calc(80px * var(--ws, 1)); letter-spacing: 0; }
  .contact__copy .lead {
    max-width: none; margin: calc(40px * var(--ws, 1)) 0 0; color: var(--text-primary);
    font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1));
  }
  .contact__rush { margin-top: calc(48px * var(--ws, 1)); gap: calc(24px * var(--ws, 1)); }
  .contact .btn {
    height: auto; padding: calc(12px * var(--ws, 1)) calc(24px * var(--ws, 1)); gap: 0; border-radius: 4px;
    font-size: calc(16px * var(--ws, 1)); line-height: calc(28px * var(--ws, 1)); font-weight: 500; border: 0;
  }
  .contact .btn > span { padding-inline: calc(6px * var(--ws, 1)); }
  .contact .btn .icon { width: calc(24px * var(--ws, 1)); height: calc(24px * var(--ws, 1)); }
  .contact .btn--solid, .contact .btn--dark { background: var(--brand-primary); color: var(--paper); }
  /* the section's main button now the form is gone: a size up from the others */
  .contact .btn--lg { padding: calc(16px * var(--ws, 1)) calc(32px * var(--ws, 1)); font-size: calc(20px * var(--ws, 1)); line-height: calc(36px * var(--ws, 1)); }
  .contact__alt { font-size: calc(18px * var(--ws, 1)); line-height: calc(36px * var(--ws, 1)); }
  .contact__art { flex: none; width: calc(687px * var(--ws, 1)); } /* fallback; initContactArt sizes it to the copy height */
  .hours { margin: 0; font-size: calc(18px * var(--ws, 1)); line-height: calc(32px * var(--ws, 1)); color: var(--text-tertiary); }

  .form {
    flex: none; width: 533px;
    display: flex; flex-direction: column; gap: calc(40px * var(--ws, 1));
    padding: calc(40px * var(--ws, 1));
    background: var(--paper); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: none;
  }
  .field { margin: 0; }
  .field__label { margin: 0 0 calc(6px * var(--ws, 1)); font-size: calc(20px * var(--ws, 1)); font-weight: 500; line-height: calc(36px * var(--ws, 1)); color: var(--text-secondary); }
  .input {
    display: block; /* no inline gap under the box */
    background: var(--paper); border: 1px solid var(--border-default); border-radius: 8px;
    height: calc(48px * var(--ws, 1)); padding: calc(12px * var(--ws, 1)) calc(16px * var(--ws, 1));
    font-size: calc(18px * var(--ws, 1)); line-height: calc(32px * var(--ws, 1)); color: var(--text-primary);
  }
  .input::placeholder { color: var(--text-placeholder); font-size: calc(18px * var(--ws, 1)); }
  .input:focus { background: var(--paper); border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(40, 62, 44, .12); }
  textarea.input { height: calc(150px * var(--ws, 1)); min-height: 0; border-radius: 4px; resize: none; }
  .choices-field .field__label { margin-bottom: calc(20px * var(--ws, 1)); }
  .choices { display: flex; flex-wrap: wrap; gap: calc(20px * var(--ws, 1)); }
  .choice span {
    min-height: 0; padding: 0; gap: calc(8px * var(--ws, 1));
    font-size: calc(18px * var(--ws, 1)); line-height: calc(32px * var(--ws, 1)); color: var(--text-tertiary);
    background: none;
  }
  .choice span::before { width: calc(20px * var(--ws, 1)); height: calc(20px * var(--ws, 1)); opacity: 1; border-color: var(--border-default); }
  .choice span:hover { background: none; color: var(--text-secondary); }
  .choice input:checked + span { color: var(--text-secondary); }
  .choice input:checked + span::before { box-shadow: inset 0 0 0 calc(5px * var(--ws, 1)) var(--paper); }
  .form .btn--block { margin: 0; width: 100%; }
  .form__status { margin: calc(-20px * var(--ws, 1)) 0 0; min-height: 0; }
  .form__status:empty { display: none; } /* no gap for it until it has something to say */
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--green);
  color: var(--cream);
  padding-top: clamp(3rem, 9vh, 6.5rem);
  padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
}
.site-footer__mark {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 0 clamp(2.5rem, 7vh, 5rem);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.site-footer__about {
  max-width: 26em;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
}
.site-footer__col { min-width: 0; }
.site-footer__title {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 clamp(1.25rem, 3.5vh, 2rem);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.8vh, 1.65rem); }
.site-footer__list a {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: color-mix(in srgb, var(--cream) 88%, transparent);
  text-decoration: none;
  transition: color .3s ease;
}
.site-footer__list a:hover { color: var(--cream); }

/* the legal row: Privacy Policy and the copyright */
.site-footer__legal { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.site-footer__legal a { color: inherit; text-decoration: none; transition: opacity .3s ease; }
.site-footer__legal a:hover { opacity: .75; }
.site-footer__copy { margin: 0; }

/* Desktop footer mirrors Figma frame 2552:479 (1440 wide): 120px above and at the sides, 20px below; the name, then a row
   (524px about text, the Studio column, the Contact column, spread across the 1200px), then 80px down a ruled line with
   Privacy Policy on the left and the copyright on the right. Sizes are Figma px times --ws. */
@media (min-width: 901px) {
  .site-footer { padding-top: calc(120px * var(--ws, 1)); padding-bottom: calc(20px * var(--ws, 1)); color: var(--paper); }
  .site-footer > .container { max-width: none; padding-inline: var(--margin); }
  .site-footer__mark { margin: 0 0 calc(40px * var(--ws, 1)); font-size: calc(48px * var(--ws, 1)); font-weight: 700; line-height: calc(80px * var(--ws, 1)); letter-spacing: 0; }
  .site-footer__cols { display: flex; justify-content: space-between; align-items: flex-start; gap: 0; }
  .site-footer__about { flex: none; width: calc(524px * var(--ws, 1)); max-width: none; font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); }
  .site-footer__col { flex: none; }
  nav.site-footer__col { width: calc(200px * var(--ws, 1)); }
  div.site-footer__col { width: calc(242px * var(--ws, 1)); }
  .site-footer__title { margin: 0 0 calc(24px * var(--ws, 1)); font-size: calc(24px * var(--ws, 1)); line-height: calc(40px * var(--ws, 1)); font-weight: 500; }
  .site-footer__list { gap: calc(16px * var(--ws, 1)); }
  .site-footer__list a { font-size: calc(20px * var(--ws, 1)); line-height: calc(36px * var(--ws, 1)); color: var(--paper); }
  .site-footer__list a:hover { color: var(--paper); opacity: .75; }

  .site-footer__legal {
    margin-top: calc(80px * var(--ws, 1));
    padding-top: calc(20px * var(--ws, 1));
    border-top: 1px solid var(--border-default);
    font-size: calc(16px * var(--ws, 1)); line-height: calc(28px * var(--ws, 1)); font-weight: 300; white-space: nowrap;
  }
  /* the line spans the 1200px content, not the container's padding */
  .site-footer > .site-footer__legal { width: auto; margin-inline: var(--margin); padding-inline: 0; }
}

/* ---------- Privacy page (privacy.html) ---------- */
.legal-page__nav { display: flex; justify-content: space-between; align-items: center; height: var(--nav-h); }
.legal-page__back { font-size: var(--fs-16); line-height: var(--lh-28); }
.legal-page__back:hover { opacity: .75; }
.legal-page { max-width: calc(760px + var(--gutter) * 2); padding-block: 40px 120px; font-size: var(--fs-16); line-height: var(--lh-28); color: var(--text-primary); }
.legal-page__title { margin: 0; font-size: var(--fs-48); line-height: var(--lh-80); }
.legal-page__updated { margin-top: 8px; color: var(--muted); }
.legal-page h2 { margin: var(--space-xs) 0 16px; font-size: var(--fs-24); line-height: var(--lh-40); font-weight: 500; }
.legal-page p + p, .legal-page ul + p, .legal-page p + ul { margin-top: 16px; }
.legal-page > p:first-of-type + p { margin-top: 40px; }
.legal-page ul { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.legal-page a:not(.logo) { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .legal-page__title { font-size: var(--fs-32); line-height: var(--lh-48); }
  .legal-page { padding-block: 24px 80px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --nav-h: 64px; }
  .nav__menu, .nav__cta { display: none; }
  .burger { display: block; }

  /* Phones: picture becomes a band along the bottom that fades out at its top */
  .hero { justify-content: flex-start; }
  .hero::before {
    background: linear-gradient(to bottom,
      var(--cream) 0%,
      var(--cream) 40%,
      color-mix(in srgb, var(--cream) 55%, transparent) 55%,
      transparent 70%);
  }

  .contact__grid { grid-template-columns: 1fr; margin-block: 0; }
  .contact { justify-content: center; }

  .member { grid-template-columns: 1fr; gap: 1.25rem; }
  .member__photo { width: min(180px, 50%); aspect-ratio: 1; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .team__stage { --type: 11.5px; }
  .quote { padding-block: calc(clamp(64px, 8vw, 118px) * .73 + 1.25rem); }
  .quote__mark { width: 72px; }
  .choices { grid-template-columns: 1fr; }
  .work__head { flex-direction: column; align-items: flex-start; gap: .35rem; } /* no sticky rows on phones: the stack would eat the screen */

  .site-footer__cols { grid-template-columns: 1fr; gap: 2.5rem; }


  /* Phones: "Who we are" runs as one centred column */
  .about__intro, .csr { text-align: center; }
  .csr__copy { max-width: none; }
  .intro__row { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 5vh, 2.5rem); }
  .intro__copy, .intro__lead { max-width: none; }
  .intro__art { justify-self: center; }

  /* Phones: centre headings and text */
  .hero .container,
  .services__inner,
  .about__head,
  .testimonials .container,
  .contact__copy,
  .member__info,
  .footer { text-align: center; }
  .lead, .service__desc, .member__bio { margin-inline: auto; }
  .playlist, .playlist__head { text-align: center; }
  .playlist__head { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__actions { justify-content: center; }
  .member__photo { margin-inline: auto; }
  .footer { justify-content: center; }

  /* Phones: service tags on two rows */
  .service .tags {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0;
    width: auto;
    overflow: visible;
  }
  .service .tags::after { content: ""; flex-basis: 100%; order: 1; } /* line break between the rows */
  .service .tag--row2 { order: 2; margin-top: .5rem; }
}

/* Mobile hero mirrors Figma frame 2851:751 (393x844: 80px header + 764px hero, everything centred). True-px text; the
   553x311 artwork group is pinned right (it runs off the left edge) and sits 40px above the bottom. */
@media (max-width: 900px) {
  :root { --nav-h: 80px; }
  .nav__inner { padding-inline: var(--margin); display: flex; justify-content: space-between; }
  .logo { gap: 10px; }
  .logo__mark { display: none; }
  .logo__img { display: block; width: auto; height: 33px; }
  .logo__word { font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; }
  .burger { width: 24px; height: 24px; margin-right: 0; }
  .burger::before { content: ""; position: absolute; inset: -8px; } /* keeps the tap area at 40px */
  .burger span { left: 4px; right: 4px; height: 1.5px; }
  .burger span:nth-child(1) { top: 5px; }
  .burger span:nth-child(2) { top: 11.25px; }
  .burger span:nth-child(3) { top: 17.5px; }
  body.menu-open .burger span:nth-child(1) { top: 11.25px; transform: rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { top: 11.25px; transform: rotate(-45deg); }

  .hero {
    display: block; position: relative;
    min-height: max(844px, 100svh); height: auto;
    padding: calc(var(--nav-h) + 40px) var(--margin) 0;
    overflow: hidden;
  }
  .hero::before, .hero::after { display: none; }
  .hero > .hero__content {
    position: relative; z-index: 1; padding: 0; max-width: none; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
    text-align: center;
  }
  .hero__heading { display: flex; flex-direction: column; gap: 8px; align-items: center; }
  .hero .eyebrow { margin: 0; font-size: 14px; font-weight: 500; line-height: 28px; white-space: nowrap; }
  .hero__title {
    margin: 0; font-size: var(--fs-48); line-height: var(--lh-80); letter-spacing: 0; text-align: center;
    color: var(--brand-primary); white-space: nowrap;
  }
  .hero__lead { margin: 0; max-width: none; font-size: 14px; line-height: 28px; color: var(--text-primary); text-align: center; text-wrap: wrap; }
  .hero__actions { justify-content: center; flex-wrap: nowrap; gap: 16px; }
  @media (max-width: 400px) { .hero__actions { flex-wrap: wrap; } } /* the two buttons are 359px together: narrow phones stack them */
  .hero .btn {
    height: 40px; padding: 8px 16px; gap: 0; border: 0; border-radius: 4px;
    font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap;
  }
  .hero .btn--solid { background: var(--brand-primary); color: var(--paper); }
  .hero .btn--ghost { box-shadow: none; border: 1px solid var(--brand-primary); background: transparent; color: var(--brand-primary); }
  .hero .btn > span { padding-inline: 6px; }
  .hero .btn .icon { width: 16px; height: 16px; }
  .hero .btn--ghost > span { text-transform: none; }
}

/* Mobile services mirrors Figma frame 2851:821 (393x844: 80px header + 764px section, content starts 80px under the header).
   Same scroll model as before: the section pins and the four services swap as you scroll. */
.br-m, .m-only { display: none; }
@media (max-width: 900px) {
  .br-d, .d-only { display: none; }
  .m-only { display: inline; }
  .services__inner .display br.br-m { display: inline; }
  .services__sticky {
    align-items: flex-start; justify-content: flex-start;
    padding: calc(var(--nav-h) + 80px) 0 0;
  }
  .services__inner { width: 100%; padding-inline: var(--margin); color: var(--text-primary); text-align: left; }
  .services__head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .services .eyebrow { margin: 0; font-size: 14px; font-weight: 500; line-height: 28px; }
  .services .display--lg {
    font-size: 24px; line-height: 48px; font-weight: 500; text-align: left; letter-spacing: 0;
    max-width: none; text-wrap: wrap;
  }
  .services__stage { margin-top: var(--space-md, 48px); }
  .service__title {
    display: block; margin: 0 0 8px;
    font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 32px;
  }
  .service__desc {
    max-width: none; margin: 0 0 24px; margin-inline: 0;
    color: var(--text-primary); font-size: 14px; line-height: 24px;
  }
  .service .tags {
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start;
    width: auto; max-width: none; overflow: visible; gap: 10px; row-gap: 10px;
  }
  .service .tags::after { display: none; }
  .service .tag--row2 { order: 0; margin-top: 0; }
  .service .tag {
    padding: 4px 8px; font-size: 12px; font-weight: 400; line-height: 20px; border-radius: 4px;
    background: var(--brand-primary); border-color: var(--brand-primary); color: var(--paper);
  }
  /* Figma lists Identity first for this service */
  .service:first-child .tag:nth-child(3) { order: -1; }

}

/* Short phones (iPhone SE): tighten the stack */
@media (max-width: 900px) and (max-height: 720px) {
  .services__sticky { padding-top: calc(var(--nav-h) + 24px); }
  .services__stage { margin-top: 24px; }
}

/* Mobile Projects mirrors Figma frame 2785:1820 (393 wide): a plain stack, no sticky title rows. Each category is its
   title, copy and the flat pictures exported from Figma (.work__shots); the desktop tile previews are hidden. */
.work__shots { display: none; }
@media (max-width: 900px) {
  .projects { padding: 40px 0; scroll-margin-top: var(--nav-h); }
  .projects__inner { padding-inline: var(--margin); }
  .projects__head { gap: 0; margin-bottom: 40px; text-align: center; }
  .projects__title { gap: 8px; justify-items: center; }
  .projects__head .eyebrow { font-size: 14px; font-weight: 500; line-height: 28px; }
  .projects__lead { margin-top: 16px; font-size: 14px; line-height: 28px; }
  .projects__head .display--md {
    font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); text-wrap: balance;
  }
  .works { display: flex; flex-direction: column; gap: 16px; }
  /* Figma's divider is a zero-height line drawn 1px above its box, so it adds no height to the stack */
  .works__rule { position: relative; height: 0; margin: 24px 0; background: none; }
  .works__rule::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--border-default); }
  .work__head { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin: 0; position: static; height: auto; }
  .work__tagline { font-size: 16px; line-height: 32px; }
  .work__label { font-size: 12px; line-height: 24px; }
  .work__copy { margin: 0; font-size: 14px; line-height: 28px; color: var(--text-secondary); }
  .work__intro { grid-template-columns: 1fr; row-gap: 16px; margin: 0; } /* the frame drops under the copy, full width */
  .work__text { gap: 16px; }
  .work__previews { display: none; }
  .work__previews--all { display: flex; flex-direction: column; gap: 16px; } /* projects whose Figma layout is rebuilt in tiles show it on phones too, scaled down */
  .work__shots { display: flex; flex-direction: column; gap: 16px; }
  .work__shots img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
}

/* Mobile testimonial mirrors Figma frame 2854:1171 (393x844: 764px section under the 80px header, 40px of padding,
   everything centred). The quote block is a mark top-right, 40px of air, the comment and the name row, 40px of air,
   and a mark bottom-left. The curtain animation is unchanged. */
@media (max-width: 900px) {
  .testimonials { min-height: 624px; justify-content: flex-start; padding: 40px 0; text-align: center; }
  .testimonials > .container { padding-inline: var(--margin); }
  .testimonials .eyebrow { margin: 0 0 8px; font-size: 14px; line-height: 28px; font-weight: 500; }
  .testimonials .display--md {
    margin: 0 auto; font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; color: var(--text-primary);
    text-wrap: balance; /* two even lines */
  }
  .quote {
    margin: 40px 8px 0; padding: 72px 0; gap: 24px; /* 345px wide: 8px in from the 16px padding */
    align-items: stretch; color: var(--text-primary);
  }
  .quote__mark { width: 40px; aspect-ratio: 151 / 120; height: auto; }
  .quote__content { max-width: none; font-size: 14px; font-weight: 400; line-height: 28px; }
  .quote__text { --lines: 8; height: calc(var(--lines) * 28px); margin: 0; line-height: inherit; }
  .quote__meta { gap: 32px; } /* 40px from each icon to the name, less the 8px of padding on that side of the button */
  .quote .arrow { box-sizing: content-box; width: 16px; height: 16px; padding: 8px; }
  .quote .arrow .icon--chev { width: 5px; height: 9px; }
  .quote__person { min-width: 75px; display: grid; gap: 8px; }
  .quote__name, .quote__role { font-size: 12px; line-height: 20px; font-weight: 400; color: var(--text-primary); }
  /* under the comment */
  .testimonials > .container { display: flex; flex-direction: column; }
  .testimonials__art { order: 1; width: min(400px, 100%); margin: 40px auto 0; }
}

/* Mobile Our Origin mirrors Figma frame 2854:1410 (393 wide, 836px tall under the 80px header): 40px of padding, a centred
   title block (16px eyebrow, 24px heading on two lines, 14px lead), then the story (one paragraph per line, 14/28) and
   the 177x224 painting, 40px and 24px apart. */
@media (max-width: 900px) {
  .about { padding-top: 40px; padding-bottom: 40px; scroll-margin-top: var(--nav-h); } /* 40 at both ends, like every other section */
  .about__intro { margin-bottom: 0; padding-inline: var(--margin); padding-bottom: 80px; text-align: center; } /* 80 to the team, like the other blocks on phones */
  .about__intro .eyebrow { margin: 0 0 8px; font-size: 14px; line-height: 28px; font-weight: 500; }
  .intro__row--open { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .intro__row--open .display {
    margin: 0; font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); text-wrap: wrap;
  }
  .intro__lead, .intro__copy { max-width: none; width: 100%; margin: 0; font-size: 14px; line-height: 28px; color: var(--text-primary); }
  .intro__text { width: 100%; }
  .intro__text p { font-size: 14px; line-height: 28px; }
  .intro__row + .intro__row--meaning { margin-top: 40px; }
  .intro__row--meaning { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .intro__copy { gap: 0; }
  .intro__copy p { margin: 0; }
  .intro__art { justify-self: auto; flex: none; }
  .intro__art img { width: 177px; height: 224px; object-fit: cover; border-radius: 0; }
}

/* Mobile playlist mirrors Figma frame 2857:1829 (393 wide): a centred title block (16px eyebrow, 24px title, two-line 14/28
   description), 40px under it the 361x319 Spotify player. Spotify only draws its full player at 352px high, so the iframe keeps
   that height and the box crops it to the frame's 319. */
@media (max-width: 900px) {
  .playlist { margin-top: 80px; padding-inline: var(--margin); text-align: center; }
  .playlist .eyebrow { margin: 0 0 8px; font-size: 14px; line-height: 28px; font-weight: 500; }
  .playlist__head { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .playlist__head .display { margin: 0; font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); text-wrap: wrap; }
  .playlist__head .lead { max-width: none; margin: 0; font-size: 14px; line-height: 28px; color: var(--text-primary); }
  /* stacked: the gramophone sits between the text and the player */
  .playlist__row { display: flex; flex-direction: column; }
  .playlist__art { order: -1; width: 220px; margin: 32px auto 0; }
  .playlist__embed { margin-top: 24px; height: 319px; overflow: hidden; border-radius: 8px; }
  .playlist__embed iframe { height: 352px; border-radius: 8px; }
}

/* Mobile team mirrors Figma frame 2864:2384 (393 wide): a centred title block (16px eyebrow, 24px title, 14/28 copy in two
   paragraphs), 40px under it the tree of names: 80px of air, then 44px chips (14px text, 10px padding) 10px apart, centred.
   The drifting names behind the tree and the chip hover (darker green, a small grow) stay as on desktop. */
@media (max-width: 900px) {
  .about__head { max-width: none; padding: 0 var(--margin); margin-bottom: 40px; }
  .about__head .eyebrow { margin: 0 0 8px; font-size: 14px; line-height: 28px; font-weight: 500; }
  .about__head .display { margin: 0 0 24px; font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); text-wrap: wrap; }
  .about__copy { max-width: none; gap: 0; font-size: 14px; line-height: 28px; text-wrap: initial; color: var(--text-primary); }
  .team__stage {
    --type: 14px;
    --row: 54px;
    padding-block: 80px;
  }
  .team__wall { font-size: var(--type); }
  .team__forest { height: calc(var(--rows, 8) * var(--row) - 10px); }
  .chip { height: 44px; }
  .chip__btn {
    font-family: var(--font-body); font-size: var(--type); font-weight: 400; line-height: 24px;
    padding: 10px;
    background: var(--brand-primary); color: var(--paper); border-radius: 0;
  }
  button.chip__btn:hover, button.chip__btn:focus-visible { background: var(--green-soft); }
  .chip__btn--title { cursor: default; }
  .chip__btn .sep { margin-inline: 0; opacity: 1; padding-inline: .4em; } /* Figma's " | " is a pipe with a space each side */
}

/* Mobile CSR mirrors Figma frame 2857:1896 (393 wide): a centred title block (16px eyebrow, 24px title, 14/28 copy in two
   paragraphs), then the two pictures 40px apart, 361 wide and 327 / 487 tall, 8px corners. The tree picture keeps the
   crop Figma uses on desktop. */
@media (max-width: 900px) {
  .csr { margin-top: 80px; padding-inline: var(--margin); text-align: center; }
  .csr .eyebrow { margin: 0 0 8px; font-size: 14px; line-height: 28px; font-weight: 500; }
  .csr .display { margin: 0; font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); }
  .csr__copy { max-width: none; gap: 0; margin-top: 24px; font-size: 14px; line-height: 28px; color: var(--text-primary); }
  .csr__gallery { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }
  .csr__img { position: relative; width: 100%; border-radius: 8px; }
  .csr__img--wide { height: 327px; }
  .csr__img--tall { height: 487px; }
  .csr__img img { position: absolute; max-width: none; width: 100%; left: 0; }
  .csr__img--wide img { height: 111.27%; top: -11.26%; }
  .csr__img--tall img { height: 100%; top: 0; object-fit: cover; }
}

/* Mobile contact mirrors Figma frame 2858:2024 (393 wide): a centred title block (16px eyebrow, 24px title, 14/28 lead), 40px
   under it the contact lines (book a call, email, WhatsApp, linked inline), then the form card (16px padding, 24px between fields,
   8px corners). The contact lines are inside .contact__copy in the markup, so .contact__copy dissolves (display: contents) and
   everything is ordered in one column. */
@media (max-width: 900px) {
  .contact { min-height: 0; justify-content: flex-start; padding: 40px 0; scroll-margin-top: var(--nav-h); }
  .contact__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding-inline: var(--margin); text-align: center; }
  .contact__copy { display: contents; }
  .contact__copy .eyebrow { order: 1; margin: 0 0 8px; font-size: 14px; line-height: 28px; font-weight: 500; }
  .contact__copy .display { order: 2; margin: 0 0 24px; font-size: 24px; line-height: 48px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); text-wrap: wrap; }
  .contact__copy .lead { order: 3; max-width: none; margin: 0 0 40px; font-size: 14px; line-height: 28px; color: var(--text-primary); }
  .form { display: flex; flex-direction: column; gap: 24px; padding: 16px; background: var(--paper); border: 1px solid var(--border-default); border-radius: 8px; box-shadow: none; text-align: left; }
  .contact__rush { order: 4; margin: 0 0 40px; align-items: center; gap: 16px; }
  .contact .btn--lg { padding: 12px 24px; font-size: 16px; line-height: 28px; }
  .contact__alt { font-size: 12px; line-height: 24px; }
  .contact__art { order: 5; width: min(400px, 100%); margin: 0 auto; }
  .contact .btn { height: auto; padding: 8px 16px; gap: 0; border: 0; border-radius: 4px; font-size: 12px; line-height: 20px; font-weight: 500; }
  .contact .btn > span { padding-inline: 6px; }
  .contact .btn .icon { width: 24px; height: 24px; }
  .contact .btn--solid, .contact .btn--dark { background: var(--brand-primary); color: var(--paper); }
  .hours { margin: 0; font-size: 12px; line-height: 20px; color: var(--text-secondary); }

  .field { margin: 0; }
  .field__label { margin: 0 0 6px; font-size: 14px; font-weight: 500; line-height: 24px; color: var(--text-secondary); }
  .form .field:nth-child(1) .field__label { font-size: 16px; line-height: 28px; }
  .input {
    display: block; background: var(--paper); border: 1px solid var(--border-default); border-radius: 8px;
    height: 44px; padding: 10px 12px; font-size: 14px; line-height: 24px; color: var(--text-primary);
  }
  .input::placeholder { color: var(--text-placeholder); font-size: 14px; font-weight: 500; }
  .input:focus { background: var(--paper); border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(40, 62, 44, .12); }
  textarea.input { height: 106px; min-height: 0; border-radius: 4px; resize: none; } /* the field is 136px with its label and 6px gap */
  textarea.input::placeholder { font-weight: 400; }
  .choices-field .field__label { margin-bottom: 20px; }
  .choices { display: flex; flex-wrap: wrap; gap: 20px; }
  .choice span { min-height: 0; padding: 0; gap: 8px; font-size: 12px; line-height: 20px; color: var(--text-tertiary); background: none; }
  .choice span::before { width: 16px; height: 16px; opacity: 1; border-color: var(--border-default); }
  .choice span:hover { background: none; color: var(--text-secondary); }
  .choice input:checked + span { color: var(--text-secondary); }
  .choice input:checked + span::before { box-shadow: inset 0 0 0 4px var(--paper); }
  .form .btn--block { margin: 0; width: 100%; }
  .form__status { margin: -8px 0 0; min-height: 0; }
  .form__status:empty { display: none; }
}

/* Mobile footer mirrors Figma frame 2862:2340 (393 wide): 40px above, 16px at the sides, 20px below; the name (24px), then
   about text, Studio and Contact columns stacked 24px apart, then 40px down a ruled line with Privacy Policy on the left
   and the copyright on the right (12 / 20). */
@media (max-width: 900px) {
  .site-footer { padding: var(--space-xs) 0 20px; color: var(--paper); text-align: left; }
  .site-footer > .container { padding-inline: var(--margin); }
  .site-footer__mark { margin: 0 0 40px; font-size: 24px; font-weight: 500; line-height: 48px; letter-spacing: 0; text-align: left; }
  .site-footer__cols { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .site-footer__about { width: 100%; max-width: none; font-size: 14px; line-height: 28px; }
  nav.site-footer__col { width: 200px; }
  div.site-footer__col { width: 170px; }
  .site-footer__title { margin: 0 0 16px; font-size: 16px; line-height: 28px; font-weight: 500; }
  .site-footer__list { gap: 8px; }
  .site-footer__list a { font-size: 14px; line-height: 24px; color: var(--paper); }
  .site-footer__list a:hover { color: var(--paper); opacity: .75; }

  .site-footer__legal { margin-top: var(--space-xs); padding-top: var(--space-10xs); border-top: 1px solid var(--border-default); font-size: 12px; line-height: 20px; white-space: nowrap; }
  .site-footer > .site-footer__legal { width: auto; margin-inline: var(--margin); padding-inline: 0; } /* the line spans the 361px content, not the padding */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal], .split .w > span, .words .w > span { transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .team__row > span { animation: none; }
  [data-scroll-lit] .lit { opacity: 1 !important; transition: none !important; }
}

/* =========================================================================
   Projects as one reel: the heading and its lead, then the reel (motion/reel/, the six category motions back to back)
   as a 16:9 frame between the page margins, 48px under them. It stays that size; nothing pins or grows on scroll.
   ========================================================================= */
.projects { min-height: 0; display: block; }
.projects__pin .projects__head { margin-bottom: 0; }
.reel {
  position: relative; margin: 48px var(--margin) 0; aspect-ratio: 16 / 9;
  border-radius: 24px; overflow: hidden;
}
.reel > iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; } /* each motion fits its whole frame inside */
@media (max-width: 900px) { .reel { border-radius: 16px; margin-top: 24px; } }

/* =========================================================================
   Projects — tabs beside the reel. Left: the six categories in the reel's order, with a thin vertical bar along them
   that fills through each one as it plays (initReelTabs). Right: the reel, corners 8. A tab jumps the reel there.
   ========================================================================= */
.reel-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 24px var(--margin) 0; align-items: center; }
.reel-row .reel { margin: 0; border-radius: 8px; }
.reel-tabs { position: relative; display: flex; flex-direction: column; padding-left: 20px; }
.reel-tabs__track { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--border-default); overflow: hidden; }
.reel-tabs__fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--fill, 0px); background: var(--text-primary); }
.reel-tab {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 28px; color: var(--text-tertiary);
  transition: color .35s var(--ease-out);
}
.reel-tab:hover, .reel-tab.is-active { color: var(--text-primary); }
/* the open tab's summary: Geist, left-aligned, under its title (8px on desktop, in the text black); it folds open and shut with the tab. It wraps
   inside the column instead of widening it (width 0 / min-width 100%). */
.reel-tab { display: grid; grid-template-rows: auto 0fr; transition: color .35s var(--ease-out), grid-template-rows .45s var(--ease-out); }
.reel-tab.is-active { grid-template-rows: auto 1fr; }
.reel-tab__title { display: block; }
.reel-tab__desc { display: block; overflow: hidden; width: 0; min-width: 100%; }
.reel-tab__desc > span {
  display: block; padding-top: 24px; white-space: normal; text-align: left;
  font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 28px; color: var(--text-secondary);
}
.reel-tab:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; border-radius: 2px; }
@media (min-width: 901px) {
  /* the tabs column is as wide as the longest tab (each stays on one line); the reel takes the rest */
  .reel-row { grid-template-columns: max-content minmax(0, 1fr); gap: calc(48px * var(--ws, 1)); margin-top: calc(48px * var(--ws, 1)); }
  .reel-tabs { padding-left: calc(24px * var(--ws, 1)); gap: calc(24px * var(--ws, 1)); } /* 24 between tabs */
  .reel-tab { font-size: calc(24px * var(--ws, 1)); line-height: calc(48px * var(--ws, 1)); white-space: nowrap; } /* tab titles 24 / 48 */
  .reel-tab__title { font-weight: 600; } /* a step up from Medium */
  .reel-tab.is-active .reel-tab__title { font-weight: 700; } /* and one more for the tab that's playing */
  /* the bold width is reserved on every title, so the column doesn't twitch as the playing tab changes */
  .reel-tab__title::after { content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; }
  .reel-tab__desc > span { padding-top: calc(8px * var(--ws, 1)); color: var(--text-primary); font-size: calc(20px * var(--ws, 1)); line-height: calc(40px * var(--ws, 1)); font-weight: 400; } /* 20 / 40 Regular */
}
@media (prefers-reduced-motion: reduce) { .reel-tab { transition: none; } }

/* Phones: instead of the list, one title at a time above the reel, with back / next either side; it follows the reel and
   moves it. Desktop keeps the list. */
.reel-carousel { display: none; }
@media (max-width: 900px) {
  .reel-tabs { display: none; }
  .reel-carousel { display: flex; align-items: flex-start; gap: 8px; } /* the arrows stay level with the title */
  .reel-carousel__view { flex: 1; min-width: 0; overflow: hidden; }
  .reel-carousel__track { display: flex; transform: translateX(calc(var(--i, 0) * -100%)); transition: transform .45s var(--ease-out); }
  .reel-carousel__slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; text-align: center; }
  .reel-carousel__title {
    display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 32px; color: var(--text-primary);
  }
  .reel-carousel__desc { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 28px; color: var(--text-primary); text-wrap: balance; } /* two even lines, no word left alone */
  .reel-carousel__btn {
    flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; /* no ring; a 32px tap area round a 14px arrow */
    border: 0; border-radius: 50%; background: transparent; color: var(--text-primary);
  }
  .reel-carousel__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .reel-carousel__btn { transition: background-color .25s var(--ease-out); }
  .reel-carousel__btn svg { transition: transform .25s var(--ease-out); }
  /* hover (only where there is a real pointer, so a tap doesn't leave it stuck on): a soft disc and the arrow
     nudging the way it points; a press shows the disc too */
  @media (hover: hover) {
    .reel-carousel__btn:hover { background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
    .reel-carousel__btn[data-dir="-1"]:hover svg { transform: translateX(-2px); }
    .reel-carousel__btn[data-dir="1"]:hover svg { transform: translateX(2px); }
  }
  .reel-carousel__btn:active { background: color-mix(in srgb, var(--text-primary) 10%, transparent); }
  .reel-carousel__btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .reel-carousel__track, .reel-carousel__btn, .reel-carousel__btn svg { transition: none; } }

/* =========================================================================
   Team — the team as polaroids (Figma 3026:281) on desktop; phones get them as a pile (below).
   A 1440x535 stage (Figma px x --ws), cards placed as in 3026:281, 40 lower. Each card (Figma 3068:965) is 275 wide and 375 tall:
   a 233 square photo, the name (20/40) and role (16/32), 20 of padding, on white with a hairline and 4px corners. They sit tilted and centred at their Figma points, most of
   them below the stage's bottom edge, which crops them. Hover lifts a card right up into the empty top (whole card in view) and squares it up,
   on top of the others, for as long as the pointer stays on it.
   ========================================================================= */
.polaroids { display: none; }
@media (min-width: 901px) {
  .team__stage { display: none; }
  .polaroids {
    --u: var(--ws, 1);
    display: block; position: relative; list-style: none; margin: 0 auto; padding: 0;
    width: calc(1440px * var(--u)); height: calc(535px * var(--u)); overflow: clip; /* clip, not hidden: nothing (find-in-page, focus) can scroll the cards up into view */
  }
  .polaroid {
    position: absolute; left: calc(var(--x) * 1px * var(--u)); top: calc(var(--y) * 1px * var(--u));
    width: calc(275px * var(--u)); box-sizing: border-box;
    padding: calc(20px * var(--u)); display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--border-default); border-radius: 4px;
    transform: translate(-50%, -50%) rotate(var(--r));
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
    will-change: transform;
  }
  /* hover: the card rises right up into the empty top of the stage, its top on the stage's top edge, so the whole card shows */
  .polaroid { --lift: calc(var(--y) * 1px * var(--u) - var(--h, calc(375px * var(--u))) / 2); } /* its top on the stage's top edge; --h is the card's height (main.js), 375 in Figma, more when a role wraps */
  .polaroid:hover {
    z-index: 10;
    transform: translate(-50%, -50%) translateY(calc(-1 * var(--lift))) rotate(0deg);
    box-shadow: 0 24px 48px -24px rgba(10, 10, 10, .25);
  }
  /* the lifted card keeps the distance it rose over under it as part of itself, so the pointer doesn't drop off it */
  .polaroid:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--lift); }
  .polaroid__photo { position: relative; aspect-ratio: 1; overflow: hidden; margin-bottom: calc(20px * var(--u)); }
  .polaroid__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
  .polaroid__photo img.is-cropped { inset: auto; left: var(--crop-l); top: var(--crop-t); width: var(--crop-s); height: var(--crop-s); object-fit: fill; }
  .polaroid__name, .polaroid__role { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--text-primary); }
  .polaroid__name, .polaroid__role { white-space: nowrap; } /* one line each, as in Figma */
  .polaroid__name { font-size: calc(20px * var(--u)); line-height: calc(40px * var(--u)); margin-bottom: calc(8px * var(--u)); }
  .polaroid__role { font-size: calc(16px * var(--u)); line-height: calc(32px * var(--u)); }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .polaroid { transition: none; } }


/* Team — phones: the polaroids as a pile (Figma 3064:389 card: 222 wide, a 200 photo, 10 of padding and gap,
   name 16/32, role 12/24). All sit on one spot; --d is each card's place in the pile (0 = front, straight), set by
   initPolaroidStack: the next three tilt out from behind, the rest wait straight at the back. The changing card swings
   out to the left, then slides back in behind all the others. */
.pstack { display: none; }
@media (max-width: 900px) {
  .team__stage { display: none; }
  .pstack { display: block; position: relative; list-style: none; margin: 0 auto; padding: 0; width: 222px; height: 340px; }
  .pstack__card {
    position: absolute; left: 0; top: 16px; width: 222px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 10px; padding: 10px;
    background: var(--paper); border: 1px solid var(--border-default); border-radius: 4px;
    transform-origin: 50% 90%;
    transition: transform .6s var(--ease-out), opacity .6s var(--ease-out);
    --rot: 0deg; --dx: 0px; z-index: 10;
    transform: translateX(var(--dx)) rotate(var(--rot));
  }
  .pstack__card[data-d="0"] { --rot: 0deg; z-index: 14; }
  .pstack__card[data-d="1"] { --rot: 6deg; --dx: 10px; z-index: 13; }
  .pstack__card[data-d="2"] { --rot: -7deg; --dx: -10px; z-index: 12; }
  .pstack__card[data-d="3"] { --rot: 3deg; --dx: 4px; z-index: 11; }
  .pstack__card[data-d="far"] { z-index: 5; } /* straight, right behind the pile (the front card covers it) */
  /* changing: the front card swings out to the left above the others, then tucks in behind them all */
  .pstack__card.is-leaving { z-index: 30; --rot: -10deg; --dx: -78%; transition-duration: .4s; }
  .pstack__card.is-tucking { z-index: 1; transition-duration: .55s; }
  .pstack__photo { position: relative; width: 200px; height: 200px; overflow: hidden; }
  .pstack__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
  .pstack__photo img.is-cropped { inset: auto; left: var(--crop-l); top: var(--crop-t); width: var(--crop-s); height: var(--crop-s); object-fit: fill; }
  .pstack__name, .pstack__role { margin: 0; font-family: var(--font-display); font-weight: 500; color: var(--text-primary); white-space: nowrap; }
  .pstack__name { font-size: 16px; line-height: 32px; }
  .pstack__role { font-size: 12px; line-height: 24px; margin-top: -2px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .pstack__card { transition: none; } }


/* Reel, full screen: a click lifts the reel out of the page to fill the window (the same element, fixed, so the film
   carries on where it was); the motion keeps its 16:9 inside, on the dark green. A small expand mark shows it's
   clickable; in full screen a close button sits top right. */
.reel { cursor: zoom-in; }
.reel:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }
.reel__expand {
  position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(10, 10, 10, .45); color: #fff; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.reel__expand svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .reel:hover .reel__expand { opacity: 1; } }
@media (hover: none) { .reel__expand { opacity: 1; } } /* touch: always shown, there is no hover to reveal it */
.reel__close {
  position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; display: none; place-items: center;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--green); /* by default no fill at all: just the very dark green cross */
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.reel__close .icon { width: 18px; height: 18px; stroke-width: 2; }
.reel__close:hover { background: color-mix(in srgb, var(--green) 12%, transparent); } /* hover: the light green wash the site's buttons get (their colour at 12%) */
.reel__close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.reel.is-full {
  position: fixed; inset: 0; z-index: 1000; margin: 0; width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto;
  border-radius: 0; background: #141F16; cursor: default;
}
.reel.is-full .reel__expand { display: none; }
.reel.is-full .reel__close { display: grid; }
html.reel-open { overflow: hidden; } /* the page doesn't scroll behind it */
@media (prefers-reduced-motion: reduce) { .reel__expand, .reel__close { transition: none; } }

/* Phones held upright: no full screen (a 16:9 film in a tall screen is a thin band). A tap brings the reel forward
   instead, full width in the middle of the screen over the page blurred behind it, with a note above asking for the
   phone to be turned; turning it opens full screen. */
.reel-backdrop {
  position: fixed; inset: 0; z-index: 999; display: none;
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.reel-backdrop.is-on { display: block; animation: reel-fade .3s var(--ease-out); }
.reel-backdrop__hint {
  position: absolute; left: 16px; right: 16px; margin: 0;
  bottom: calc(50% + (100vw - 32px) * 9 / 32 + 16px); /* just above the reel, which sits in the middle */
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  font-size: 14px; line-height: 28px; color: var(--text-primary);
}
.reel-backdrop__hint svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reel.is-view {
  position: fixed; z-index: 1000; left: 16px; right: 16px; top: 50%; margin: 0; width: auto;
  transform: translateY(-50%); cursor: default; box-shadow: 0 24px 60px -20px rgba(10, 10, 10, .35);
  animation: reel-fade .3s var(--ease-out);
}
.reel.is-view .reel__expand { display: none; }
.reel.is-view .reel__close { display: grid; top: 8px; right: 8px; width: 36px; height: 36px; }
@keyframes reel-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reel-backdrop.is-on, .reel.is-view { animation: none; } }