/* Hallmark · genre: atmospheric · macrostructure: Marquee Hero (owner kept; knob deltas: hero carries an inline booking form, services as a typographic index, no section rules)
 * theme: custom · vibe: "dark charcoal, one purple, bold and quiet" · bg: oklch(16.5% 0.006 300) · brand: oklch(56% 0.24 300) / deep oklch(43% 0.2 300) / text oklch(74% 0.17 300)
 * display: Montserrat Alt1 700/800 · body: Figtree · logo: Montserrat Alt1 800 capitals · axes: dark / geometric-sans / chromatic-purple
 * nav: N10 bar → centred pill on scroll (owner request) · footer: Ft1 mast-headed · cta: C2 inline form-as-CTA (hero quick-book) + outlined secondary "Book a call" (Odoo Appointments) · enrichment: none (owner footage pending)
 * sections: hero · about (band: who we are + team photo, statement panel, intention card) · work (full-bleed, viewfinder hover, stories) · services (audience cards w/ photos + index + promises, all in one purple frame) · how it works (band) · pricing · testimonials (hidden) · contact · sticky phone bar
 * audit round 1 (2026-10-13): lighter hero tint, video pause controls, draft markers, Formspree, GoatCounter, favicon/OG
 * motion: hero copy fade · nav morph · hover colour/zoom on service rows + work
 * context: user-provided (keep colours, less AI-looking, more purple, bigger wordmark, easy to book; then: Book a call CTA, small events + businesses messaging, bring back Why + About, fuller)
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 * Tokens live in tokens.css. No gradients, glows or blob backgrounds (see CLAUDE.md).
 */

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

html {
  color-scheme: dark;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-lg));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-style: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; max-width: 12ch; }
h2 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.04; letter-spacing: -0.028em; max-width: 18ch; }
h3 { font-size: var(--text-lg); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
strong { color: var(--color-ink); font-weight: 600; }

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

[hidden] { display: none !important; }

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

.lede { font-size: var(--text-md); line-height: 1.55; max-width: 46ch; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85em 1.6em;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font: 600 var(--text-base) / 1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--color-brand-hover); transform: translateY(-1px); }
}
.btn:active { transform: translateY(0); background: var(--color-brand); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-sm { min-height: 40px; padding: 0.6em 1.15em; font-size: var(--text-sm); }

/* Secondary CTA (Book a call): outlined, quieter than the purple fill */
.btn.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-rule-2);
  transition: color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn.btn-on-brand { color: var(--color-on-brand); box-shadow: inset 0 0 0 1px var(--color-on-brand-2); }
@media (hover: hover) and (pointer: fine) {
  .btn.btn-ghost:hover { background: transparent; color: var(--color-brand-text); box-shadow: inset 0 0 0 1px var(--color-brand-text); }
  .btn.btn-on-brand:hover { background: var(--color-brand); color: var(--color-on-brand); box-shadow: inset 0 0 0 1px var(--color-on-brand); }
}
.btn.btn-ghost:active { background: transparent; }
.btn-block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  color: var(--color-ink);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-brand-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color var(--dur-micro) var(--ease-out);
}
.text-link:hover { color: var(--color-brand-text); text-decoration-thickness: 2px; }

/* Logo: dot + "LUXARO" inside a viewfinder frame (owner's "Viewfinder frame" mark, rebuilt in CSS
   so it stays sharp and takes the brand purple from tokens), set in the heading font with bold corners
   to match the heavy capitals. Four corners: two on .wordmark, two on .logo-frame. */
.wordmark {
  --corner: 0.5em;
  --stroke: max(3px, 0.13em);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0.55em 0.44em;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-wordmark);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark::before,
.wordmark::after,
.logo-frame::before,
.logo-frame::after {
  content: "";
  position: absolute;
  width: var(--corner);
  height: var(--corner);
  border: 0 solid var(--color-brand);
}
.wordmark::before { top: 0; left: 0; border-top-width: var(--stroke); border-left-width: var(--stroke); }
.wordmark::after { right: 0; bottom: 0; border-right-width: var(--stroke); border-bottom-width: var(--stroke); }
.logo-frame { position: absolute; inset: 0; pointer-events: none; }
.logo-frame::before { top: 0; right: 0; border-top-width: var(--stroke); border-right-width: var(--stroke); }
.logo-frame::after { bottom: 0; left: 0; border-bottom-width: var(--stroke); border-left-width: var(--stroke); }
.logo-dot {
  flex: none;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background: var(--color-brand);
}

/* ---------- Header: full-width bar → centred pill on scroll (N10) ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  padding: var(--space-sm) var(--page-gutter) 0;
  pointer-events: none;
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: var(--page-max);
  min-height: var(--nav-h);
  margin-inline: auto;
  padding: 0.625rem 0;
  background: transparent;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 0 transparent;
  backdrop-filter: blur(0);
  pointer-events: auto;
  transition:
    max-width var(--dur-nav) var(--ease-nav),
    padding var(--dur-nav) var(--ease-nav),
    border-radius var(--dur-nav) var(--ease-nav),
    background-color var(--dur-nav) var(--ease-nav),
    border-color var(--dur-nav) var(--ease-nav),
    box-shadow var(--dur-nav) var(--ease-nav),
    backdrop-filter var(--dur-nav) var(--ease-nav);
}
/* Collapsed: a rounded rectangle (echoes the square viewfinder logo), equal padding on both sides,
   buttons rounded concentrically (outer --radius-md minus padding ≈ --radius-sm) */
.site-header.is-floating .nav-inner,
.nav-inner:has(.site-nav.open) {
  padding-inline: var(--space-sm);
  background: var(--color-glass);
  border-color: var(--color-rule-2);
  box-shadow: 0 18px 40px -18px var(--color-shadow);
  backdrop-filter: blur(14px);
}

.nav-toggle {
  display: grid;
  place-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  margin-right: calc(var(--space-sm) * -1); /* icon lines up with the logo frame inset */
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--dur-short) var(--ease-in-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav.open {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 var(--space-sm);
}
.site-nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.site-nav a:not(.btn):hover { color: var(--color-brand-text); }
/* Header buttons: same height as the logo frame, medium weight, no hover jump inside the bar */
.site-header .btn { min-height: 40px; padding-inline: 1.1em; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .site-header .btn:hover { transform: none; }
}
.nav-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }

@media (min-width: 60rem) {
  .site-header.is-floating .nav-inner { max-width: 50rem; }
  .nav-ctas { display: flex; gap: var(--space-xs); margin: 0 0 0 var(--space-xs); }
  .nav-inner { flex-wrap: nowrap; gap: var(--space-xl); }
  .nav-toggle { display: none; }
  .site-nav,
  .site-nav.open {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    width: auto;
    padding: 0;
  }
  .site-nav a:not(.btn) { min-height: 40px; border: 0; font-size: var(--text-sm); }
}

/* ---------- Media slots (swap .media-placeholder for <img>/<video>) ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-2);
  border-radius: var(--radius-sm);
}
.media > img,
.media > video,
.media > .media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-sm);
  color: var(--color-ink-3);
}
.placeholder-label { font-size: var(--text-sm); font-weight: 500; }
.play {
  position: relative;
  width: 52px;
  height: 52px;
  border: var(--rule-hair) solid currentColor;
  border-radius: 50%;
}
.play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent currentColor;
}

/* ---------- Shared field look (hero quick-book + contact form) ---------- */
.qb-field input,
.qb-field select,
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75em 0.9em;
  background: var(--color-bg);
  color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  font: inherit;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.qb-field input:hover,
.qb-field select:hover,
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--color-ink-3); }
.qb-field input:focus,
.qb-field select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-brand); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(38rem, 100svh, 60rem);
  padding-top: calc(var(--nav-h) + var(--space-2xl));
}
.hero-media { position: absolute; inset: 0; border-radius: 0; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-veil);
}

.hero-copy {
  position: relative;
  z-index: var(--z-raised);
  padding-bottom: var(--space-2xl);
  animation: rise var(--dur-long) var(--ease-out) both;
}
.hero-copy h1,
.hero-sub { text-shadow: 0 2px 28px var(--color-text-shade); }
.hero-sub { max-width: 46ch; margin: var(--space-lg) 0 var(--space-xl); font-size: var(--text-md); line-height: 1.55; }

.quick-book {
  display: grid;
  gap: var(--space-sm);
  max-width: 58rem;
  padding: var(--space-sm);
  background: var(--color-glass);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
}
.qb-field { display: grid; gap: var(--space-2xs); }
.qb-field input,
.qb-field select,
.field input[type="date"] { height: 48px; line-height: 1.2; }
.qb-field span { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; }

.qb-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--space-sm); }
.qb-actions .btn,
.nav-ctas .btn { padding-inline: var(--space-sm); }

@media (min-width: 40rem) {
  .quick-book { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .qb-actions { grid-column: 1 / -1; }
  .qb-actions .btn,
  .nav-ctas .btn { padding-inline: 1.4em; }
}
@media (min-width: 60rem) {
  .quick-book { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .qb-actions { grid-column: auto; display: flex; }
}

/* Pause/play for autoplaying video (accessibility: moving content must be pausable) */
.video-toggle {
  position: absolute;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 40px;
  padding: 0 var(--space-sm);
  background: var(--color-glass);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font: 500 var(--text-sm) / 1 var(--font-body);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.video-toggle:hover { border-color: var(--color-brand-text); }
.video-toggle-icon { position: relative; width: 12px; height: 12px; flex: none; }
.video-toggle-icon::before,
.video-toggle-icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 12px;
  background: currentColor;
}
.video-toggle-icon::before { left: 1px; }
.video-toggle-icon::after { right: 1px; }
.video-toggle[aria-pressed="true"] .video-toggle-icon::before {
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  background: none;
}
.video-toggle[aria-pressed="true"] .video-toggle-icon::after { display: none; }
.hero-toggle { top: calc(var(--nav-h) + var(--space-xl)); right: var(--page-gutter); }
.hero-toggle .video-toggle-label,
.tile-toggle .video-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tile-toggle { top: var(--space-sm); right: var(--space-sm); width: 40px; justify-content: center; padding: 0; }
@media (min-width: 60rem) {
  .hero-toggle { top: auto; bottom: var(--space-2xl); }
  .hero-toggle .video-toggle-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Draft copy: example wording or numbers to confirm (see OWNER-NOTES.md). Remove the class once confirmed. */
.draft {
  text-decoration: underline dashed var(--color-brand-text) 1px;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: none;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Sections: one surface, no rules ---------- */
.section { padding-block: var(--section-pad); }
/* Bands: full-width lighter-charcoal strips (How it works, About)
   that alternate with the page colour. Never put two bands next to each other. */
.band { background: var(--color-bg-2); }
.section-title { margin-bottom: var(--space-2xl); }
.section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-2xl);
}
.section-bar .section-title { margin: 0; }
.section-head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
/* A short follow-up paragraph under the lede (e.g. the team line in Who we are) keeps the lede's column width */
.section-head > p:not(.lede) { max-width: 52ch; margin: 0; }

/* ---------- About (who we are + why) ---------- */
/* Intro: copy beside the team photo, which sits in a thin purple frame */
.about-intro { display: grid; gap: var(--space-2xl); margin-bottom: var(--space-3xl); }
.about-intro .section-head { margin-bottom: 0; }
.team-photo { aspect-ratio: 4 / 3; border: var(--rule-hair) solid var(--color-brand); }
@media (min-width: 60rem) {
  .about-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
}

/* The intention: one card, photo edge to edge on one side, copy centred on the other.
   The card is --color-bg because a --color-bg-2 card would vanish on the band. */
.why-lead { display: grid; overflow: hidden; background: var(--color-bg); border-radius: var(--radius-md); }
.why-media { aspect-ratio: 4 / 3; border-radius: 0; }
.why-media > img { object-position: 50% 30%; }
.why-lead-copy { align-self: center; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.why-lead-copy::before { content: ""; display: block; width: 2.5rem; height: 3px; margin-bottom: var(--space-lg); background: var(--color-brand); }
.why-lead-copy h3 { margin-bottom: var(--space-md); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.03em; }
.why-lead-copy p { max-width: 42ch; margin: 0; font-size: var(--text-md); line-height: 1.55; }

@media (min-width: 48rem) {
  .why-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .why-media { aspect-ratio: auto; min-height: 26rem; }
}

/* The statement reads as a sentence, not a heading: body font, sentence case */
.meaning {
  margin: 0 0 var(--space-3xl);
  padding: clamp(2rem, 1rem + 4vw, 4.5rem);
  background: var(--color-brand-deep);
  border-radius: var(--radius-md);
  color: var(--color-on-brand);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}


/* ---------- Services: who it's for ---------- */
.audience { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.audience-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-2);
  border-radius: var(--radius-md);
}
.audience-media { aspect-ratio: 16 / 9; border-radius: 0; }
.audience-copy { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.audience-card h3 { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.audience-card h3::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--color-brand);
}
.audience-card p { max-width: 44ch; }

@media (min-width: 48rem) {
  .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Services: typographic index ---------- */
/* The whole Services section (title, audience cards, index, promises) sits in one thin purple frame */
.services-frame {
  padding: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  border: var(--rule-hair) solid var(--color-brand);
  border-radius: var(--radius-md);
}
.service-list { margin: 0; padding: 0; list-style: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.service-row {
  display: grid;
  gap: var(--space-sm) var(--space-xl);
  padding-block: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.service-row h3 {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  transition: color var(--dur-short) var(--ease-out);
}
.service-row p { max-width: 34ch; margin: 0; font-size: var(--text-md); }
.service-thumb { aspect-ratio: 16 / 9; margin-top: var(--space-sm); }

@media (hover: hover) and (pointer: fine) {
  .service-row:hover h3 { color: var(--color-brand-text); }
  .service-thumb > img,
  .work-item .media > :is(img, video) { transition: transform var(--dur-long) var(--ease-out); }
  .service-row:hover .service-thumb > img,
  .work-item:hover .media > :is(img, video) { transform: scale(1.04); }
  .work-item:hover figcaption strong { color: var(--color-brand-text); }
}

.promises {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}
.promises li { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.promises strong {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.promises span:not(.draft) { display: block; max-width: 42ch; }
@media (min-width: 48rem) {
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .service-row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 15rem);
    align-items: center;
    padding-block: var(--space-lg);
  }
  .service-thumb { aspect-ratio: 16 / 10; margin: 0; }
}

/* ---------- Work: full-bleed (breaks the page's column on purpose), wide video lead + portrait photos ---------- */
.section-wide { padding-bottom: var(--space-2xl); }
.work-wrap { max-width: 112rem; margin-inline: auto; padding-inline: clamp(0.5rem, 1.5vw, 1.5rem); }
.work-grid { display: grid; gap: var(--space-xl) var(--space-sm); }
.work-item { display: flex; flex-direction: column; margin: 0; }
.work-item .media { aspect-ratio: 4 / 5; }
.work-item:first-child .media { aspect-ratio: 16 / 9; }
.work-item figcaption {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding-inline: var(--space-2xs);
  color: var(--color-ink-3);
  font-size: var(--text-sm);
}
.work-item figcaption strong { color: var(--color-ink); font-weight: 500; transition: color var(--dur-short) var(--ease-out); }
.work-item .meta { font-variant-numeric: tabular-nums; }

.story-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 36px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-brand-text);
  font: 500 var(--text-sm) / 1 var(--font-body);
  cursor: pointer;
}
.story-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }

@media (min-width: 40rem) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-item:first-child,
  .work-item:last-child { grid-column: 1 / -1; }
  .work-item:last-child .media { aspect-ratio: 16 / 9; }
}
@media (min-width: 60rem) {
  .work-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .work-item:nth-child(1) { grid-column: 1 / 9; grid-row: 1; }
  .work-item:nth-child(2) { grid-column: 9 / 13; grid-row: 1; }
  .work-item:nth-child(2) .media { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  .work-item:nth-child(n + 3) { grid-column: span 3; grid-row: 2; }
  .work-item:last-child .media { aspect-ratio: 4 / 5; }
}

/* Viewfinder corners: the logo's frame "focuses" in around footage on hover/focus.
   script.js injects <span class="vf"><i></i>×4</span> into .work-item .media and .service-thumb. */
.vf { position: absolute; inset: var(--space-md); z-index: var(--z-raised); pointer-events: none; }
.vf i {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border: 0 solid var(--color-brand);
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; transform: translate(-10px, -10px); }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; transform: translate(10px, -10px); }
.vf i:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; transform: translate(10px, 10px); }
.vf i:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; transform: translate(-10px, 10px); }
.service-thumb .vf { inset: var(--space-xs); }
.service-thumb .vf i { width: 1.1rem; height: 1.1rem; }
.work-item:hover .vf i,
.work-item:focus-within .vf i,
.service-row:hover .vf i { opacity: 1; transform: none; }

/* ---------- Testimonials: real quotes only (slots to fill) ---------- */
.quotes { display: grid; gap: var(--space-md); }
.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xl);
  margin: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--color-bg-2);
  border-radius: var(--radius-md);
}
.quote blockquote { margin: 0; }
.quote blockquote p { color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; }
/* Quotation marks are added here in brand purple; type testimonial text without quote marks */
.quote blockquote p::before { content: "\201C"; color: var(--color-brand-text); }
.quote blockquote p::after { content: "\201D"; color: var(--color-brand-text); }
.quote-lead blockquote p {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.quote figcaption { color: var(--color-ink-3); font-size: var(--text-sm); }
.quote figcaption strong { display: block; color: var(--color-ink); font-weight: 500; }
@media (min-width: 60rem) {
  .quotes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; }
  .quote-lead { grid-row: span 2; }
}

/* ---------- How it works: on a band (see .band), a different rhythm from the sections around it ---------- */
.steps-flow { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.steps-flow li { position: relative; padding-top: var(--space-2xl); border-top: 2px solid var(--color-rule-2); counter-increment: flow; }
/* The step number: small and quiet at the right end of the line, so the icon leads */
.steps-flow li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: calc(-0.5em - 1px);
  right: 0;
  padding-left: var(--space-sm);
  background: var(--color-bg-2);
  color: var(--color-ink-3);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1;
}
/* Step icons: purple line drawings sitting on the divider at the start of each step */
.step-icon {
  position: absolute;
  top: calc(-1.5rem - 1px);
  left: 0;
  box-sizing: content-box;
  width: 3rem;
  height: 3rem;
  padding-right: var(--space-md);
  background: var(--color-bg-2);
  fill: none;
  stroke: var(--color-brand-text);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.steps-flow h3 { margin-bottom: var(--space-sm); }
.steps-flow p { max-width: 34ch; }
@media (min-width: 48rem) { .steps-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .steps-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Starting-from pricing ---------- */
.price-grid { display: grid; gap: var(--space-md); }
.price {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--color-bg-2);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-md);
}
.price-feature { border-color: var(--color-brand); }
.price-amount { margin: 0; color: var(--color-ink-2); }
.price-amount .draft,
.price-amount strong {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.price ul { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.price li { position: relative; padding-left: var(--space-lg); }
.price li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--color-brand);
}
.price .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 60rem) { .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Contact: purple panel + form ---------- */
.contact-grid { display: grid; gap: var(--space-md); }

.contact-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--color-brand-deep);
  border-radius: var(--radius-md);
  color: var(--color-on-brand-2);
}
.contact-panel h2 { margin-bottom: var(--space-lg); color: var(--color-on-brand); }
.contact-panel p { max-width: 36ch; font-size: var(--text-md); line-height: 1.5; }
.contact-panel :focus-visible { outline-color: var(--color-on-brand); }
.contact-panel .btn { align-self: flex-start; margin-top: var(--space-lg); }

.contact-lines { margin: auto 0 0; padding: var(--space-2xl) 0 0; list-style: none; }
.contact-lines a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-md);
  min-height: 56px;
  border-top: var(--rule-hair) solid var(--color-brand-line);
  color: var(--color-on-brand);
  font-size: var(--text-md);
  font-weight: 600;
}
.contact-lines a span { color: var(--color-on-brand-2); font-size: var(--text-sm); font-weight: 400; }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.contact-form {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--color-bg-2);
  border-radius: var(--radius-md);
}
.form-row { display: grid; }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-xs); }
.field label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; }
.optional { color: var(--color-ink-3); font-weight: 400; }
.field textarea { resize: vertical; }
.field ::placeholder { color: var(--color-ink-3); opacity: 1; }
.field.invalid input,
.field.invalid select,
.field.invalid textarea { border-color: var(--color-error); }
.field input:disabled,
.field select:disabled,
.field textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.error { min-height: 1.25em; color: var(--color-error); font-size: var(--text-sm); }

.contact-form .btn { margin-top: var(--space-sm); }

.form-success {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-3);
  border-radius: var(--radius-sm);
  color: var(--color-success);
  font-weight: 500;
}

.form-failure {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-3);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-weight: 500;
}
.form-failure a { color: var(--color-ink); text-decoration: underline; }

@media (min-width: 40rem) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
}
@media (min-width: 60rem) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Footer: mast-headed (Ft1) ---------- */
.site-footer { padding-block: var(--space-2xl) var(--space-xl); }
.footer-grid {
  display: grid;
  gap: var(--space-lg) var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.wordmark-lg { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem); justify-self: start; }
.footer-tag { margin: 0; color: var(--color-ink-3); font-size: var(--text-sm); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.footer-links a:hover { color: var(--color-brand-text); }
.footer-small { margin: 0; color: var(--color-ink-3); font-size: var(--text-sm); }

@media (min-width: 48rem) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .footer-links { grid-column: 2; grid-row: 1; justify-self: end; }
  .footer-tag { grid-column: 1; grid-row: 2; }
  .footer-small { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ---------- "What it meant" story dialog ---------- */
.story-dialog {
  width: min(40rem, calc(100% - var(--space-xl)));
  max-height: calc(100dvh - var(--space-2xl));
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--color-bg-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  color: var(--color-ink-2);
}
.story-dialog::backdrop { background: var(--color-veil-strong); backdrop-filter: blur(6px); }
.story-dialog[open] { animation: rise var(--dur-long) var(--ease-out) both; }
.story-body h3 { margin-bottom: var(--space-md); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.03em; }
.story-meaning { color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; }
.story-facts { display: grid; gap: var(--space-md); margin: var(--space-xl) 0; }
.story-facts div { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.story-facts dt { color: var(--color-brand-text); font-size: var(--text-sm); font-weight: 500; }
.story-facts dd { margin: var(--space-2xs) 0 0; color: var(--color-ink); }
.story-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- Sticky actions bar (phones) ---------- */
.mobile-cta {
  position: fixed;
  right: var(--space-sm);
  bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  left: var(--space-sm);
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-glass);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px -18px var(--color-shadow);
  backdrop-filter: blur(14px);
  transform: translateY(calc(100% + var(--space-xl)));
  transition: transform var(--dur-long) var(--ease-out);
}
.mobile-cta .btn { min-height: 44px; padding-inline: var(--space-sm); font-size: var(--text-sm); }
.mobile-cta.is-visible { transform: none; }
@media (min-width: 60rem) { .mobile-cta { display: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    transition-duration: 150ms !important;
  }
  .hero-copy,
  .story-dialog[open] { animation-name: fade; }
  .vf i { transform: none !important; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Heading style: Montserrat, all caps (owner preview, 2026-10-24) ----------
   Capitals need neutral tracking instead of the tight negative spacing used for
   sentence-case headings. Keep capital headings to about 4 words; quotes and the
   purple statement stay in sentence case. */
:is(h1, h2, h3, .why-lead-copy h3, .service-row h3, .story-body h3, .promises strong) {
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.08;
}
h1 { line-height: 1; letter-spacing: -0.01em; max-width: 14ch; }