/* ============================================================
   COASTLINE CREATIVE 813
   Design system — tokens, type, layout, motion primitives
   ============================================================ */

/* ---------- Fonts ----------
   Bodoni Moda (SIL Open Font License) replaced the brand kit's The Seasons,
   which shipped as an unlicensed FSP DEMO build. Variable files, Latin subset,
   self-hosted from Google Fonts. Bodoni Moda's optical-size axis thins its
   hairlines at display sizes automatically. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/BodoniModa-Variable.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/BodoniModa-Italic-Variable.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand palette — exact from the kit's colour guide */
  --teal-900: #518481;
  --teal-700: #6ca9a7;
  --teal-500: #88b6bc;
  --teal-300: #bcd4d6;
  --sand:     #eadbc7;
  --cream:    #fbf4e9;

  /* Derived ink — the kit ships no dark value; this is the elevation lever */
  --ink:      #16211f;
  --ink-70:   rgba(22, 33, 31, .70);
  --ink-45:   rgba(22, 33, 31, .45);
  --ink-14:   rgba(22, 33, 31, .14);
  --ink-07:   rgba(22, 33, 31, .07);
  /* Text-safe derivatives (WCAG AA 4.5:1 on cream). The palette values stay
     for large type and decoration; small text uses these. */
  --ink-muted: rgba(22, 33, 31, .63);
  --teal-text: #497774;
  --teal-deep: #3b5f5d;

  --bg:       var(--cream);
  --fg:       var(--ink);

  /* Type */
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(3.4rem, 11vw, 11rem);
  --fs-d1:    clamp(2.6rem, 7vw, 6.5rem);
  --fs-d2:    clamp(2rem, 4.4vw, 3.8rem);
  --fs-d3:    clamp(1.5rem, 2.4vw, 2.2rem);
  --fs-body:  clamp(1rem, 1.06vw, 1.18rem);
  --fs-small: .78rem;
  --fs-micro: .68rem;

  --track-wide: .22em;
  --track-mid:  .12em;

  /* Space */
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --section: clamp(6rem, 14vh, 12rem);
  --maxw: 1680px;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
  --dur: .9s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 350;
  line-height: 1.62;
  /* Bodoni Moda's optical size would hit 96 at display sizes, where its
     hairlines vanish. Cap it (Montserrat has no opsz axis and ignores this). */
  font-variation-settings: "opsz" 36;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: .96; letter-spacing: -.015em; }
p { margin: 0; }
::selection { background: var(--teal-text); color: var(--cream); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.rule { height: 1px; background: var(--ink-14); border: 0; margin: 0; }

/* ---------- Type utilities ---------- */
.display { font-family: var(--display); font-weight: 400; }
.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-muted);
}
.lede { font-size: clamp(1.06rem, 1.5vw, 1.45rem); line-height: 1.5; color: var(--ink-70); max-width: 46ch; }
.num {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-mid);
  color: var(--teal-text);
  font-weight: 500;
}

/* ---------- Header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem var(--gutter);
  mix-blend-mode: difference;
  color: #fff;
  transition: padding .5s var(--ease);
}
/* The open mobile panel must not be blended into the hero behind it. */
.site-head.is-nav-open { mix-blend-mode: normal; }
.site-head.is-solid {
  mix-blend-mode: normal;
  color: var(--ink);
  background: rgba(251, 244, 233, .82);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--ink-07);
  padding-block: 1.05rem;
}
/* With the mobile menu open: backdrop-filter would make the header the
   containing block for the fixed panel and trap it at header height once the
   page is scrolled, and the solid header's ink text would vanish on the panel. */
.site-head.is-nav-open {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: transparent; border-color: transparent; color: var(--cream);
}
.site-head .brand { position: relative; z-index: 80; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand svg { width: 34px; height: auto; color: currentColor; }
.brand-name {
  font-family: var(--display);
  font-size: 1.06rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.4rem); }
.nav a {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding-block: .3rem;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  border: 1px solid currentColor; border-radius: 100px;
  padding: .62rem 1.15rem !important;
}
.nav-cta::after { display: none; }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(22,33,31,.46) 0%,
      rgba(22,33,31,.10) 26%,
      rgba(22,33,31,.44) 58%,
      rgba(22,33,31,.78) 100%);
}
/* Extra scrim behind the headline block so copy stays legible on bright media */
.hero-inner::before {
  content: ""; position: absolute; inset: auto -100vw 0 -100vw; height: 82%; z-index: -1;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(22,33,31,.30) 30%,
    rgba(22,33,31,.58) 62%,
    rgba(22,33,31,.74) 100%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2; height: 100%; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(3rem, 8vh, 6rem);
  color: var(--cream);
}
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  /* Capped by height too, so wide-but-short laptop screens don't push the
     first line up under the header. */
  font-size: min(var(--fs-hero), 13svh);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero h1 em { font-style: italic; text-transform: none; font-weight: 400; }
/* Light-on-dark and over video: sturdier hairlines */
.hero h1, .on-ink, .services, .stats, .site-foot { font-variation-settings: "opsz" 24; }
.hero-sub {
  margin-top: 1.6rem; max-width: 40ch;
  color: rgba(251, 244, 233, .82);
  font-size: clamp(.98rem, 1.15vw, 1.16rem);
}
.hero-foot {
  margin-top: clamp(2rem, 5vh, 3.4rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem;
}
.scroll-cue {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: rgba(251,244,233,.72);
}
.scroll-cue i {
  display: block; width: 54px; height: 1px; background: currentColor; position: relative; overflow: hidden;
}
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--cream);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%);} 55%,100% { transform: translateX(100%);} }
.hero-credit {
  position: absolute; z-index: 2; right: var(--gutter, 1.5rem); bottom: clamp(1.4rem, 4vh, 2.4rem);
  font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: rgba(251,244,233,.78);
}
.hero-credit span { color: rgba(251,244,233,.5); margin-right: .6em; }
@media (max-width: 720px) {
  /* Touch: the scroll cue earns little, so the credit takes its place */
  .hero .scroll-cue { display: none; }
  .hero-inner { padding-bottom: 7.5rem; }
  .hero-credit { left: var(--gutter); right: var(--gutter); bottom: 2.8rem; line-height: 1.7; }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-fg: var(--cream); --btn-bg: var(--ink);
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.05rem 1.9rem; border-radius: 100px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: 500;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--teal-text);
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border: 1px solid currentColor; }
.btn--light { --btn-bg: var(--cream); --btn-fg: var(--ink); }
.btn--light:hover { color: var(--cream); }
.btn i { display: block; width: 16px; height: 1px; background: currentColor; transition: width .45s var(--ease); }
.btn:hover i { width: 26px; }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--ink-14);
  padding-block: 1.5rem; background: var(--sand);
}
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: slide 38s linear infinite; }
.marquee span {
  font-family: var(--display); font-size: clamp(1.4rem, 2.6vw, 2.6rem);
  text-transform: uppercase; letter-spacing: .06em; color: var(--teal-text); white-space: nowrap;
}
.marquee span::after { content: "\00B7"; margin-left: 3.5rem; color: var(--ink-muted); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Featured work ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2.5rem, 6vh, 5rem); }
.sec-head h2 { font-family: var(--display); font-size: var(--fs-d1); text-transform: uppercase; font-weight: 400; }
.sec-head h2 em { font-style: italic; text-transform: none; }

.work-grid { display: grid; gap: clamp(2rem, 4vw, 4.5rem) clamp(1.4rem, 2.6vw, 3rem); grid-template-columns: repeat(12, 1fr); }
.work-item { grid-column: span 6; }
.work-item:nth-child(4n+1), .work-item:nth-child(4n+4) { grid-column: span 7; }
.work-item:nth-child(4n+2), .work-item:nth-child(4n+3) { grid-column: span 5; }
.work-item:nth-child(4n+3) { margin-top: clamp(0rem, 8vh, 7rem); }
.work-figure {
  position: relative; overflow: hidden; border-radius: 2px;
  aspect-ratio: 4 / 3; background: var(--teal-300);
}
.work-item:nth-child(odd) .work-figure { aspect-ratio: 3 / 4; }
.work-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.work-item:hover .work-figure img { transform: scale(1.045); }
.work-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.15rem; }
.work-client { font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-muted); }
.work-title { font-family: var(--display); font-size: var(--fs-d3); margin-top: .35rem; }
.work-desc { margin-top: .7rem; color: var(--ink-70); font-size: .95rem; max-width: 42ch; }
.work-result {
  display: inline-block; margin-top: .9rem;
  font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase;
  color: var(--teal-text); border-bottom: 1px solid var(--teal-300); padding-bottom: .25rem;
}

/* ---------- Services ---------- */
.services { background: var(--ink); color: var(--cream); }
.services .eyebrow { color: rgba(251,244,233,.5); }
.services .sec-head h2 { color: var(--cream); }
.svc-list { border-top: 1px solid rgba(251,244,233,.16); }
.svc {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.1fr) 3rem;
  gap: 1.5rem; align-items: start;
  padding-block: clamp(1.8rem, 3.4vw, 3rem);
  border-bottom: 1px solid rgba(251,244,233,.16);
  position: relative; isolation: isolate;
}
.svc::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -.5); z-index: -1;
  background: rgba(251,244,233,.045);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .6s var(--ease);
}
.svc:hover::before { transform: scaleY(1); transform-origin: top; }
.svc .num { color: var(--teal-500); }
.svc h3 { font-family: var(--display); font-size: var(--fs-d2); font-weight: 400; text-transform: uppercase; }
.svc p { color: rgba(251,244,233,.62); font-size: .98rem; }
.svc-arrow { justify-self: end; align-self: center; color: var(--teal-500); transition: transform .5s var(--ease); }
.svc:hover .svc-arrow { transform: translateX(8px); }

/* ---------- Dark band (events, any section on ink) ---------- */
.on-ink { background: var(--ink); color: var(--cream); }
.on-ink .eyebrow, .on-ink .work-client { color: rgba(251,244,233,.5); }
.on-ink .sec-head h2 em, .on-ink h1 em { color: var(--teal-500); }
.on-ink .lede { color: rgba(251,244,233,.72); }
.on-ink .film-desc { color: rgba(251,244,233,.62); }
.on-ink .film-credit { color: var(--teal-500); }

/* ---------- Films (vertical video cards) ---------- */
.film-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.2rem, 4vw, 3.5rem) clamp(1rem, 2.2vw, 2.4rem); }
.film-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.film-media {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 9 / 16; overflow: hidden; border-radius: 2px; background: var(--teal-300);
}
.film-media img, .film-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .6s var(--ease);
}
.film-media video { opacity: 0; }
.film-media video.is-on { opacity: 1; }
.film-media:hover img, .film-media:hover video { transform: scale(1.04); }
.film-media:focus-visible { outline: 2px solid var(--teal-900); outline-offset: 3px; }
.film-play {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 1;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem .5rem .8rem; border-radius: 100px;
  background: rgba(251,244,233,.92); color: var(--ink);
  font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; font-weight: 500;
  transition: background .45s var(--ease), color .45s var(--ease);
}
.film-play::before { content: ""; border-left: 7px solid currentColor; border-block: 4.5px solid transparent; }
.film-media:hover .film-play { background: var(--teal-text); color: var(--cream); }
.film .work-client { display: block; margin-top: 1.1rem; }
.film-title { font-size: clamp(1.2rem, 1.8vw, 1.65rem); margin-top: .35rem; line-height: 1.05; }
.film-desc { margin-top: .6rem; color: var(--ink-70); font-size: .92rem; }
.film-credit { margin-top: .6rem; font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--teal-text); }
.film-grid--5 .film-title { font-size: clamp(1.05rem, 1.4vw, 1.35rem); }

.film-box {
  width: min(92vw, calc(80svh * 9 / 16)); max-width: none; padding: 0; border: 0;
  background: transparent; overflow: visible;
}
.film-box::backdrop { background: rgba(22,33,31,.9); backdrop-filter: blur(6px); }
.film-box video { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 2px; }
.film-box.is-wide { width: min(92vw, calc(80svh * 16 / 9), 1200px); }
.film-box.is-wide video { aspect-ratio: 16 / 9; }
.film-close {
  position: absolute; right: 0; bottom: calc(100% + .8rem);
  color: var(--cream); font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase;
}
.film-cap { margin-top: .9rem; color: rgba(251,244,233,.75); font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; }

/* ---------- Trusted by ---------- */
.logo-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0;
  border-top: 1px solid var(--ink-14); border-left: 1px solid var(--ink-14);
}
.logo-row li {
  list-style: none; display: grid; place-items: center;
  min-height: clamp(110px, 12vw, 170px); padding: clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--ink-14); border-bottom: 1px solid var(--ink-14);
  transition: background .45s var(--ease);
}
.logo-row img { width: auto; height: auto; max-height: clamp(36px, 4.4vw, 64px); max-width: 80%; opacity: .7; transition: opacity .45s var(--ease); }
.logo-row li:hover { background: var(--sand); }
.logo-row li:hover img { opacity: 1; }

/* ---------- Reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.8rem, 3.4vw, 3.4rem); }
.review { margin: 0; border-top: 1px solid var(--ink-14); padding-top: 1.6rem; }
.review-stars { color: var(--teal-text); letter-spacing: .3em; font-size: .78rem; }
.review blockquote { margin: 1.1rem 0 0; font-family: var(--display); font-size: clamp(1.15rem, 1.5vw, 1.42rem); line-height: 1.35; }
.review figcaption { margin-top: 1.3rem; font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-muted); }
.review figcaption b { display: block; color: var(--ink); font-weight: 500; margin-bottom: .2rem; }
.review--wide { max-width: 62rem; border: 0; padding: 0; }
.review--wide blockquote { font-size: var(--fs-d3); line-height: 1.25; }

/* ---------- Events ---------- */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3rem, 7vh, 5rem); }
.phase { border-top: 1px solid rgba(251,244,233,.18); padding-top: 1.5rem; }
.phase .num { color: var(--teal-500); }
.phase h3 { font-family: var(--display); font-size: var(--fs-d3); text-transform: uppercase; margin-top: .8rem; }
.phase p { margin-top: .8rem; color: rgba(251,244,233,.62); font-size: .95rem; max-width: 34ch; }

.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1.2rem); }
.photo-grid figure { margin: 0; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: var(--sand); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.photo-grid figure:hover img { transform: scale(1.04); }
.credits { display: flex; flex-wrap: wrap; gap: .7rem 2.2rem; margin-top: 2rem; padding: 0; }
.credits li { list-style: none; font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-muted); }
.credits a { color: var(--teal-text); border-bottom: 1px solid var(--teal-300); }

/* ---------- Studio sessions ---------- */
.studio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.4rem); }
.studio-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }

/* ---------- Stats ---------- */
.stats { background: var(--teal-deep); color: var(--cream); }
.stats .eyebrow { color: rgba(251,244,233,.78); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.stat-val { font-family: var(--display); font-size: clamp(2.8rem, 6.5vw, 5.6rem); font-weight: 400; line-height: .9; }
.stat-lbl { margin-top: .9rem; font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: rgba(251,244,233,.78); }

/* ---------- Split / About ---------- */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
/* Grid children default to min-width:auto, so a full-res image can blow out its
   track and crush the sibling column. Opt every grid item out of that. */
.split > *, .work-grid > *, .form-shell > *, .svc-detail > *, .stat-grid > *, .team-grid > * { min-width: 0; }
.split-media { grid-column: span 6; position: relative; overflow: hidden; aspect-ratio: 4/5; border-radius: 2px; background: var(--teal-300); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-body { grid-column: 8 / span 5; }
.split-body h2 { font-family: var(--display); font-size: var(--fs-d1); text-transform: uppercase; font-weight: 400; margin-bottom: 1.6rem; }
.split-body p + p { margin-top: 1.1rem; }

/* ---------- Experience list ---------- */
.exp { border-top: 1px solid var(--ink-14); }
.exp-row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 1.2rem;
  padding-block: 1.5rem; border-bottom: 1px solid var(--ink-14); align-items: baseline;
}
.exp-row h4 { font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.6rem); }
.exp-row p { color: var(--ink-70); font-size: .93rem; }
.exp-row span { font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--teal-text); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.6rem, 3vw, 3rem); }
.team-photo { aspect-ratio: 3/4; background: var(--sand); overflow: hidden; border-radius: 2px; position: relative; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .7s var(--ease), transform 1.1s var(--ease); }
.team-card:hover .team-photo img { filter: grayscale(0); transform: scale(1.04); }
.team-card h4 { font-family: var(--display); font-size: 1.35rem; margin-top: 1rem; }
.team-card span { font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-muted); }
.team-card p { margin-top: .8rem; color: var(--ink-70); font-size: .92rem; }
.team-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-lead .split-media img { filter: none; }
.team-lead .role { display: block; margin-bottom: 1.4rem; font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--teal-text); }

/* Compact row above the inquiry form */
.team-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.6rem); }
.team-mini img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; filter: grayscale(1); transition: filter .7s var(--ease); }
.team-mini figure { margin: 0; }
.team-mini figure:hover img { filter: grayscale(0); }
.team-mini figcaption { margin-top: .7rem; font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-muted); }
.team-mini figcaption b { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }

/* ---------- Service detail blocks ---------- */
.svc-detail { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(1.5rem,3vw,3rem); padding-block: clamp(3rem,7vh,6rem); border-bottom: 1px solid var(--ink-14); }
.svc-detail > .num { grid-column: span 1; }
.svc-detail-head { grid-column: span 5; }
.svc-detail-head h3 { font-family: var(--display); font-size: var(--fs-d2); text-transform: uppercase; font-weight: 400; margin-bottom: 1.1rem; }
.svc-detail ul { grid-column: 8 / span 5; margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
.svc-detail li { padding-block: .5rem; border-bottom: 1px solid var(--ink-14); font-size: .92rem; break-inside: avoid; }

/* ---------- Contact / multi-step form ---------- */
.form-shell { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(2rem,4vw,4rem); }
.form-aside { grid-column: span 4; position: sticky; top: 7rem; align-self: start; }
.form-main { grid-column: 6 / span 7; }
.steps { display: flex; gap: 1.6rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--ink-14); padding-bottom: 1rem; }
.steps li { list-style: none; font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-muted); display: flex; gap: .5rem; }
.steps li[aria-current="step"] { color: var(--teal-text); }
.step { display: none; }
.step.is-active { display: block; animation: stepIn .6s var(--ease) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px);} }
.field { margin-bottom: 1.7rem; }
.field label { display: block; font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--ink-muted); margin-bottom: .6rem; }
.field input, .field textarea {
  width: 100%; padding: .85rem 0; border: 0; border-bottom: 1px solid var(--ink-14);
  background: transparent; color: var(--ink); font: inherit; border-radius: 0;
  transition: border-color .4s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-text); }
.field textarea { min-height: 120px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block; padding: .65rem 1.15rem; border: 1px solid var(--ink-14); border-radius: 100px;
  font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase;
  transition: all .35s var(--ease);
}
.chip input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--teal-900); outline-offset: 2px; }
.form-nav { display: flex; gap: 1rem; margin-top: 2.4rem; }

/* ---------- Footer ---------- */
.site-foot { background: var(--ink); color: var(--cream); padding-block: clamp(4rem, 9vh, 7rem) 2.5rem; }
.foot-cta h2 { font-family: var(--display); font-size: var(--fs-hero); font-weight: 400; text-transform: uppercase; line-height: .92; }
.foot-cta h2 em { font-style: italic; text-transform: none; color: var(--teal-500); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; margin-top: clamp(3rem,7vh,5rem); padding-top: 2.2rem; border-top: 1px solid rgba(251,244,233,.16); }
.foot-grid a, .foot-grid p { font-size: var(--fs-micro); letter-spacing: var(--track-mid); text-transform: uppercase; color: rgba(251,244,233,.6); }
.foot-grid a:hover { color: var(--cream); }
.foot-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* ---------- Progress bar + cursor ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--teal-900); z-index: 100; }
.spotlight {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px; border-radius: 50%;
  pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(circle, rgba(136,182,188,.55), transparent 62%);
  transition: opacity .5s var(--ease);
}

/* ---------- Reveal primitives ---------- */
[data-reveal] { will-change: transform, opacity; }
[data-reveal="fade"] { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-reveal="fade"].is-in { opacity: 1; transform: none; }
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; transform: translateY(105%); transition: transform 1.05s var(--ease); }
.is-in .line-mask > span, .line-mask.is-in > span { transform: none; }
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.word-mask > span { display: inline-block; transform: translateY(105%); transition: transform .95s var(--ease); }
.word-mask.is-in > span { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .work-item, .work-item:nth-child(4n+1), .work-item:nth-child(4n+2),
  .work-item:nth-child(4n+3), .work-item:nth-child(4n+4) { grid-column: 1 / -1; margin-top: 0; }
  .split-media, .split-body { grid-column: 1 / -1; }
  .form-aside, .form-main { grid-column: 1 / -1; position: static; }
  .svc-detail-head, .svc-detail ul { grid-column: 1 / -1; }
  .svc-detail > .num { grid-column: 1 / -1; }
  .film-grid, .film-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews { grid-template-columns: 1fr; max-width: 46rem; }
  .team-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc { grid-template-columns: 3.4rem 1fr; }
  .svc p, .svc-arrow { grid-column: 2; }
  .svc-arrow { justify-self: start; margin-top: .5rem; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem;
    position: fixed; inset: 0; background: var(--ink); color: var(--cream);
    padding: 6rem var(--gutter) var(--gutter); z-index: 70;
  }
  .nav.is-open a { font-size: 1.5rem; }
  .nav-toggle { display: block; z-index: 80; font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; }
  .film-grid, .film-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem .8rem; }
  .film-desc { font-size: .85rem; }
  .film-play { left: .6rem; bottom: .6rem; padding: .4rem .75rem .4rem .65rem; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phases { grid-template-columns: 1fr; }
  /* Five portraits can't share a phone's width; let the row scroll sideways */
  .team-mini { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; }
  .team-mini figure { scroll-snap-align: start; }
  .team-grid--4 { grid-template-columns: 1fr; gap: 3rem; }
  .exp-row { grid-template-columns: 1fr; }
  .svc-detail ul { columns: 1; }
  .hero { min-height: 540px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .line-mask > span, .word-mask > span { transform: none !important; }
  .spotlight { display: none; }
}

/* ---------- Draft notice ----------
   Present on every page while the site carries sample copy and stock imagery.
   Remove the DRAFT_NOTICE constant in build.py once real content lands. */
.draft-badge {
  position: fixed; left: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1.1rem;
  background: var(--ink); color: var(--cream);
  border-top-right-radius: 3px;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  max-width: calc(100vw - 2rem);
}
.draft-badge b { font-weight: 600; color: var(--teal-500); }
.draft-badge span { opacity: .72; letter-spacing: .1em; }
@media (max-width: 720px) {
  .draft-badge { font-size: .54rem; padding: .5rem .8rem; }
  .draft-badge span { display: none; }
}