/* ==========================================================================
   The Lone Line Project — design tokens & base styles
   Colors and type pairing sourced from the Figma file (MUSIC - GIAN).
   ========================================================================== */

/* Omnes — real font files from the graphist. Web-embed/commercial rights
   confirmed by the client. Still the standard width, not the "Semi
   Condensed" the Figma file specifies — ask the graphist for that family
   when it's available, standard width is the approved stand-in until then. */
@font-face {
  font-family: 'Omnes';
  src: url('../fonts/omnes/Omnes-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Omnes';
  src: url('../fonts/omnes/Omnes-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Omnes';
  src: url('../fonts/omnes/Omnes-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Omnes';
  src: url('../fonts/omnes/Omnes-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Omnes';
  src: url('../fonts/omnes/Omnes-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Vacer Sans — the original Figma-spec'd headings/wordmark font. Client has
   purchased a commercial license (Patrick Hand was the placeholder while
   that was pending — see git history). No "Medium" weight exists even in
   the commercial pack, so headings use Regular and the wordmark/logo name
   uses Bold, closest matches to the original design weights. */
@font-face {
  font-family: 'Vacer Sans';
  src: url('../fonts/vacer-sans/VacerSans-Light.woff2') format('woff2'),
       url('../fonts/vacer-sans/VacerSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vacer Sans';
  src: url('../fonts/vacer-sans/VacerSans-Regular.woff2') format('woff2'),
       url('../fonts/vacer-sans/VacerSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vacer Sans';
  src: url('../fonts/vacer-sans/VacerSans-Bold.woff2') format('woff2'),
       url('../fonts/vacer-sans/VacerSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colours (exact values pulled from the Figma "colour and imagrey" frame) */
  --color-primary: #808E75;
  --color-primary-dark: #6c7862;
  --color-dark: #000000;
  --color-white: #FFFFFF;
  --color-light: #F5F5F5;
  --color-muted: #C6CBC2;

  /* Typography.
     Figma's node-level "style" for most text objects is misleading — nearly
     every character actually has an inline style override (headings vs.
     body vs. emphasis runs packed into one text object). Resolving those
     overrides against the real file shows headings are Vacer Sans 500
     (confirmed, not Inter as a stale comment here used to claim for body
     copy) and body copy is actually Omnes SemiCond Light (300) at 20px/30px
     line-height — not Inter. --font-feature now points at Omnes to match;
     kept as a separate variable in case a real Inter delivery ever changes
     that. */
  --font-display: 'Vacer Sans', sans-serif;         /* headings — real font, commercially licensed */
  --font-wordmark: 'Vacer Sans', sans-serif;        /* logo lockup — real font, commercially licensed (Polymath Display never received) */
  --font-feature: 'Omnes', 'Barlow Semi Condensed', sans-serif; /* large feature paragraphs — resolved Figma override data shows Omnes Light, not Inter */
  --font-ui: 'Omnes', 'Barlow Semi Condensed', sans-serif; /* nav, buttons, labels — real font from graphist, cleared for production, standard width (not Semi Condensed) */
  --font-watermark: 'Caveat', cursive;              /* decorative handwritten labels — stands in for Bimbo Pro/Bilo */

  --container-max: 1400px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);
  --radius-btn: 4px;
  --nav-height: 90px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--color-dark);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
/* Figma: Vacer Sans Personal, weight 500, 40px/45px line-height (112.5%),
   0 letter-spacing — resolved from character-level style overrides, the
   same combination on every real heading across every page frame. */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 2.5rem; line-height: 1.125; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn img { width: 20px; height: 20px; }
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-white); }
.btn-white {
  background: var(--color-white);
  color: var(--color-primary);
}
.btn-white:hover { background: var(--color-light); }
.btn-ghost-link {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid currentColor;
  padding: 0.2rem 0;
}

/* ---- Site header / nav ---- */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-block: 1.5rem;
}
.site-header.is-solid {
  position: sticky;
  background: var(--color-white);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
}
.brand-logo {
  display: block;
  height: 34px;
  width: auto;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.primary-nav a:not(.btn) {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.primary-nav a:not(.btn):hover { color: var(--color-primary); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: .5rem;
  color: inherit;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Transparent header over the hero image (front page, pre-scroll): nav
   links and the mobile toggle need to be white to stay legible on a photo. */
.site-header:not(.is-solid) .primary-nav a:not(.btn),
.site-header:not(.is-solid) .nav-toggle {
  color: #fff;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed;
    inset: 0;
    background: var(--color-white);
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  .primary-nav.is-open { transform: translateX(0); }

  /* The open mobile menu always has a solid white background, regardless
     of the header's transparent/solid state — its links must stay dark. */
  .primary-nav.is-open a:not(.btn) { color: var(--color-dark) !important; }
}

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
.hero img, .hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  z-index: -1;
}
.hero-watermark {
  font-family: var(--font-watermark);
  font-weight: 500;
  font-size: clamp(2.5rem, 8vw, 5rem);
  text-transform: lowercase;
  color: rgba(245,245,245,.7);
  padding-block-end: 2rem;
  line-height: 1;
}

/* ---- Colour band / lead strip ---- */
.lead-band {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: 3rem;
  text-align: center;
}
.lead-band p {
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  max-width: 70ch;
  margin-inline: auto;
}

/* ---- Heading accent: the small double-bar mark repeated above major
   headings throughout the design (same motif as the logo lockup) ---- */
.heading-accent {
  display: flex;
  gap: 4px;
  height: 28px;
  margin-bottom: 1rem;
}
.heading-accent span { width: 9px; background: var(--color-dark); }
.is-centered .heading-accent { margin-inline: auto; }

/* Small recurring music-note flourish used as a section accent (Studio
   "Collaborations", Philosophy closing text) — exported directly from the
   Figma file rather than approximated. */
.music-flourish { width: 90px; height: auto; opacity: .6; margin-bottom: 1rem; }
.is-centered .music-flourish { margin-inline: auto; }

/* Typography hierarchy repeated in feature copy: a bold uppercase lead
   sentence, regular body copy, and an optional bold closing line. Verified
   against Figma's resolved character-level overrides (not just the
   misleading node-level default style) — Omnes SemiBold 600, UPPERCASE,
   0.1em letter-spacing, confirmed identically on every page frame. */
.lead-line {
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.closing-line {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
}
.closing-line.is-accent {
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* ---- Home intro: quick-link cards (left) beside the About Us copy (right) ---- */
.home-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 4.5rem;
}
.quick-links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.quick-link-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  text-align: left;
  background: var(--color-light);
  border-radius: 8px;
  padding: 1.5rem;
}
.quick-link-card .icon-circle {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
}
.quick-link-card .icon-circle img { width: 26px; height: 26px; }
.quick-link-card h3 {
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.quick-link-card p { color: #555; margin-bottom: .6rem; font-size: .95rem; font-weight: 300; }
.quick-link-card a.btn-ghost-link { font-size: .8rem; }

@media (max-width: 900px) {
  .home-intro { grid-template-columns: 1fr; }
}

/* ---- Feature sections (two-column text + image) ---- */
.feature-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: 5rem;
}
.feature-section.is-reversed .feature-media { order: -1; }
.feature-section.is-top-aligned { align-items: start; }
.feature-section .feature-media.is-stacked { display: flex; flex-direction: column; gap: 1.5rem; }
.feature-section .feature-media.is-stacked img:not(.music-flourish) { aspect-ratio: 4/3; object-fit: contain; }
.feature-copy h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 1.25rem;
}
.feature-copy p:not(.section-watermark) {
  font-family: var(--font-feature);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: #2b2b2b;
  white-space: pre-line;
  margin-bottom: 1.75rem;
}
.feature-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.feature-media img:not(.music-flourish) { border-radius: 2px; width: 100%; display: block; }
.feature-media > img:not(:only-child) { margin-bottom: 1.5rem; }
.feature-media.is-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feature-media.is-collage img { height: 100%; object-fit: contain; margin-bottom: 0; }

@media (max-width: 900px) {
  .feature-section { grid-template-columns: 1fr; }
  .feature-section.is-reversed .feature-media { order: 0; }
}

.section-watermark {
  font-family: var(--font-watermark);
  text-transform: lowercase;
  font-weight: 500;
  color: #d8d8d8;
  font-size: clamp(2.25rem, 5vw, 3.125rem);
  line-height: 1;
  text-align: center;
  padding-block: 1rem 0;
}

/* ---- Newsletter / Join the Line ---- */
.newsletter {
  background: var(--color-primary);
  color: var(--color-white);
  padding-block: 5rem;
  text-align: center;
}
.newsletter-ticket { width: 90px; margin: 0 auto 1.5rem; }
.newsletter h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
.newsletter p {
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1.25rem;
  line-height: 1.5;
  max-width: 65ch;
  margin: 0 auto 2rem;
  opacity: .95;
}
.newsletter-form {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 0 auto;
}
.newsletter-form input[type="email"] {
  flex: 1 1 280px;
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.08);
  color: var(--color-white);
  font-family: var(--font-ui);
}
.newsletter-form input::placeholder { color: var(--color-muted); }
.newsletter-note { margin-top: 1rem; font-size: .85rem; opacity: .8; }

/* ---- Site footer ---- */
.site-footer {
  background: var(--color-white);
  border-top: 1px solid #eee;
  padding-block: 2rem;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.5rem;
}
.footer-right { display: flex; align-items: center; gap: 1.75rem; }
.footer-social { display: flex; gap: .75rem; }
.footer-social a {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.footer-social img { width: 30px; height: 30px; }
.footer-join-link {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.footer-join-link:hover { color: var(--color-primary); }
.footer-downloads { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-muted);
}
.footer-bottom a:hover { color: var(--color-primary); }
.footer-legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }

@media (max-width: 700px) {
  .footer-right { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .footer-legal-links { flex-direction: column; gap: .5rem; }
}

/* ---- Cookie consent banner ---- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--color-dark, #14161a);
  color: #fff;
  padding: 1rem 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
}
.cookie-banner.is-hidden { display: none; }
.cookie-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.cookie-banner p { margin: 0; font-size: .9rem; max-width: 60ch; }
.cookie-banner a { color: #fff; text-decoration: underline; }
.cookie-banner .btn { flex-shrink: 0; }

/* ---- Page hero (interior pages) — left-aligned by default, matching the
   Figma pattern; add .is-centered for the Contact-style exception. ---- */
.page-hero {
  padding-block: calc(var(--nav-height) + 2rem) 2rem;
}
.page-hero .section-watermark { text-align: left; padding-block: 0 0.5rem; }
.page-hero h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin-bottom: 1rem; }
.page-hero .lead-line { max-width: 70ch; }
.page-hero p { max-width: 60ch; font-family: var(--font-feature); font-size: 1.25rem; font-weight: 300; line-height: 1.5; }

.page-hero.is-centered { text-align: center; }
.page-hero.is-centered .section-watermark,
.page-hero.is-centered .heading-accent { text-align: center; margin-inline: auto; }
.page-hero.is-centered p,
.page-hero.is-centered .lead-line { margin-inline: auto; }

/* ---- Journey (album) overview ---- */
.journey-overview { padding-block: 3rem 5rem; }
.journey-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.journey-media { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
.journey-media img { border-radius: 2px; width: 100%; aspect-ratio: 4/3; object-fit: contain; }
.journey-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: .1em;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}
.album-panel {
  background: var(--color-light);
  padding: 2.5rem;
  border-radius: 4px;
  position: relative;
}
.album-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.album-panel h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: .25rem; }
.album-panel .album-label { font-family: var(--font-ui); text-transform: uppercase; font-size: .8rem; color: #777; }
.album-panel .heading-accent { height: 22px; margin-bottom: 0; }
.album-panel .heading-accent span { width: 7px; }

/* The Figma table has a dashed "railway line" running down the left edge
   with a dot marking each track row — a small nod to the site's railway
   motif carried through from the imagery. */
.track-table { position: relative; padding-left: 1.75rem; }
.track-table::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 12px;
  bottom: 12px;
  border-left: 2px dashed rgba(0,0,0,.2);
}
.track-table-head {
  display: grid;
  grid-template-columns: 160px 1fr 260px;
  gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid rgba(0,0,0,.15);
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: .1em;
}
.track-row {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr 260px;
  align-items: center;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.track-row::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-dark);
}
.track-row .track-date { font-family: var(--font-ui); font-weight: 300; font-size: 1.25rem; color: #444; }
.track-row .track-thumb {
  display: block;
  width: 100%;
  max-width: 72px;
  border-radius: 2px;
  margin-bottom: .4rem;
}
/* Now only ever the "Coming Soon" tag in the links column of an unreleased
   row — released rows show their music-service links there instead. */
.track-row .track-status {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  padding: .3rem .8rem;
  border-radius: 2px;
}
.track-row .track-status.is-coming-soon { background: var(--color-dark); }
.track-info h4 { font-family: var(--font-ui); font-weight: 300; font-size: 1.25rem; margin: 0; text-align: center; }
.track-links { display: flex; align-items: center; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }
.track-links a {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .track-table-head { display: none; }
  .track-row { grid-template-columns: 1fr; gap: .4rem; }
  .track-info h4 { text-align: left; }
  .track-links { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .journey-grid { grid-template-columns: 1fr; }
}

/* ---- Story (single track) ---- */
.back-to-all-bar { background: var(--color-light); padding-block: 1rem; }
.back-to-all {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1.25rem;
  color: var(--color-primary);
}
.story-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 3rem;
}
.story-hero-layout img { border-radius: 2px; width: 100%; aspect-ratio: 4/3; object-fit: contain; }
.story-downloads { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

.behind-the-story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: 0 4rem;
}
.behind-the-story-layout h2 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.story-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.story-gallery img { border-radius: 2px; aspect-ratio: 4/5; object-fit: contain; }

@media (max-width: 900px) {
  .story-hero-layout,
  .behind-the-story-layout { grid-template-columns: 1fr; }
}

/* ---- Split hero: watermark/heading/copy on one side, image on the other
   (Studio, Story) — distinct from Home's full-bleed photographic .hero ---- */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: calc(var(--nav-height) + 2rem) 3rem;
}
.hero-split img { border-radius: 2px; width: 100%; aspect-ratio: 4/3; object-fit: contain; }
.hero-split .section-watermark { text-align: left; padding-block: 0 .5rem; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; }
}

/* ---- Studio: creative process steps ---- */
.process-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block: 2rem;
}
.process-steps button {
  background: var(--color-light);
  border: none;
  padding: .75rem 1.5rem;
  font-family: var(--font-ui);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 1.25rem;
  border-radius: 2px;
}
.process-steps button.is-active { background: var(--color-primary); color: var(--color-white); font-weight: 600; }
.process-panels .process-panel { display: none; font-family: var(--font-feature); font-size: 1.25rem; font-weight: 300; line-height: 1.5; max-width: 65ch; }
.process-panels .process-panel.is-active { display: block; }
.process-panels .process-panel p { margin: 0 0 .75em; }
.process-panels .process-panel p:last-child { margin-bottom: 0; }

/* ---- Simple content section (Studio/Philosophy blurbs) ---- */
.content-block { padding-block: 4rem; }
.content-block.bg-light { background: var(--color-light); }
.content-block.bg-dark { background: var(--color-dark); color: var(--color-white); }
.content-block h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 1.25rem; }
.content-block p { font-family: var(--font-feature); font-size: 1.25rem; font-weight: 300; line-height: 1.5; max-width: 70ch; white-space: pre-line; }
.content-block.is-centered { text-align: center; }
.content-block.is-centered p { margin-inline: auto; }

/* ---- Contact ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: 1rem 4rem;
  align-items: flex-start;
  position: relative;
}
.contact-layout::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(0,0,0,.1);
}
.contact-copy p { font-family: var(--font-feature); font-size: 1.25rem; font-weight: 300; line-height: 1.5; max-width: 55ch; }
.contact-hero img { width: 100%; aspect-ratio: 21/9; object-fit: contain; }
.contact-form { display: grid; gap: 1.1rem; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid #ccc;
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  background: transparent;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button { justify-self: flex-start; }
.form-notice { padding: 1rem 1.25rem; border-radius: 4px; margin-bottom: 1rem; }
.form-notice.success { background: #e7f0e4; color: #3d5236; }
.form-notice.error { background: #fbe6e6; color: #7a2b2b; }

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-layout::before { display: none; }
}

/* ---- Legal ---- */
.legal-content { padding-block: 3rem 5rem; }
.legal-content .prose { max-width: 75ch; font-family: var(--font-feature); font-size: 1.25rem; font-weight: 300; line-height: 1.5; }
.legal-content .prose p { margin-bottom: 1.25rem; }
.legal-content .prose ul { list-style: disc; margin: 0 0 1.25rem; padding-left: 1.5rem; }
.legal-content .prose li { margin-bottom: .5rem; }
/* Repeated section sub-headings ("Et autem sequi quas nostrum") are NOT
   the big Vacer Sans page-title style — Figma resolves them to the same
   Omnes SemiBold/UPPERCASE/tracked style as .lead-line. */
.legal-content .prose h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: .5rem;
}

/* ---- Utility ---- */
.mt-0 { margin-top: 0; }