/* ============================================================
   ONCE & EVER — GLOBAL STYLESHEET
   Shared across every page: reset, tokens, type, nav, footer,
   buttons, reveal/parallax animation classes, base layout.
   ============================================================ */

/* ============================================================
   BRAND TYPEFACES
   Headings ....... Playfair Display, italic
   Subheadings .... Glacial Indifference
   Glacial Indifference is not served by Google Fonts, so it is
   self-hosted. Drop these files into assets/fonts/ and it takes
   over automatically; until then the stack falls back to Jost,
   the closest geometric sans available from the CDN.
   ============================================================ */
@font-face {
  font-family: 'Perandory';
  src: url('../assets/fonts/Perandory-SemiCondensed.woff2') format('woff2'),
    url('../assets/fonts/Perandory-SemiCondensed.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Amoresa';
  src: url('../assets/fonts/Amoresa.woff2') format('woff2'),
    url('../assets/fonts/Amoresa.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  /* Two glyphs on one headline. Swapping a fallback in and out would
     shift the whole line, so the space is held until the file lands. */
  font-display: block;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../assets/fonts/GlacialIndifference-Regular.woff2') format('woff2'),
    url('../assets/fonts/GlacialIndifference-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../assets/fonts/GlacialIndifference-Bold.woff2') format('woff2'),
    url('../assets/fonts/GlacialIndifference-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../assets/fonts/GlacialIndifference-Italic.woff2') format('woff2'),
    url('../assets/fonts/GlacialIndifference-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Palette */
  --burgundy: #5A0D18;
  --deep-burgundy: #3B070F;
  --burgundy-light: #741A27;
  --gold: #C9A227;
  --gold-light: #E5CF8A;
  --ivory: #F7F3E8;
  --warm-white: #FCFAF4;
  --charcoal: #252323;
  --muted: #77716A;
  --white: #FFFFFF;

  --border: rgba(90, 13, 24, 0.2);
  --border-soft: rgba(37, 35, 35, 0.1);
  --gold-border: rgba(201, 162, 39, 0.4);
  --ivory-a: 247, 243, 232;

  /* Typography */
  --ff-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --ff-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --ff-sub: 'Glacial Indifference', 'Jost', 'Century Gothic', Futura, 'Inter', sans-serif;
  --ff-script: 'Parisienne', cursive;
  /* Hero headline only — a semi-condensed display serif, self-hosted. */
  --ff-hero: 'Perandory', 'Playfair Display', Georgia, serif;
  /* The decorative F and T of the hero headline — real swash capitals
     from a copperplate face, not the headline font enlarged. */
  --ff-swash: 'Amoresa', 'Parisienne', cursive;
  --ff-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --gap: clamp(1.5rem, 4vw, 4rem);
  --gap-lg: clamp(3rem, 8vw, 7rem);
  --page: clamp(1.25rem, 5vw, 6rem);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .6s;

  /* Chrome */
  --announce-h: 40px;
  --header-h: 80px;
}

/* ---------- RESET ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--announce-h));
}

body {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  background: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* any `display` declaration beats the UA rule for [hidden], so el.hidden
   silently stops working on images and flex/grid items without this */
[hidden] {
  display: none !important;
}

svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

em,
i.script {
  font-style: italic;
}

h1,
h2,
h3,
h4 {
  font-weight: 400;
}

::selection {
  background: var(--burgundy);
  color: var(--ivory);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  z-index: 9999;
  padding: .75rem 1.5rem;
  background: var(--deep-burgundy);
  color: var(--ivory);
  font-size: .85rem;
  letter-spacing: .04em;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* ---------- TYPE UTILITIES ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--burgundy);
  /* the gold rule that used to sit here carried part of the gap to the
     heading below, so the margin takes that space back */
  margin-bottom: 1.3rem;
  position: relative;
}

.eyebrow.on-dark {
  color: var(--gold-light);
}

.eyebrow.on-wine {
  color: rgba(var(--ivory-a), .72);
}

/* Small recurring ornament: thin gold line — diamond — thin gold line */
.gold-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 0 0 1.4rem;
  color: var(--gold);
}

.gold-ornament span {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--gold);
  opacity: .7;
}

.gold-ornament i {
  font-size: .6rem;
  transform: rotate(45deg);
  display: inline-block;
  border: 1px solid var(--gold);
  width: 7px;
  height: 7px;
}

.gold-ornament.on-dark {
  color: var(--gold-light);
}

.gold-ornament.on-dark span {
  background: var(--gold-light);
}

.gold-ornament.on-dark i {
  border-color: var(--gold-light);
}

.script-accent {
  font-family: var(--ff-script);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  color: inherit;
  display: block;
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--charcoal);
}

.section-title em {
  font-style: italic;
  color: var(--burgundy);
}

.section-title.on-dark,
.section-title.on-dark em {
  color: var(--ivory);
}

.section-note {
  max-width: 30ch;
  color: var(--muted);
  font-size: .95rem;
}

/* This head carries a two-line heading and a full paragraph rather than
   the short note the other sections use, so it runs wider and the title
   runs smaller — at the shared size "For moments that deserve" needs
   669px against the 592px the standard head allows, and wraps. */
#collection-preview .section-head {
  max-width: 54rem;
}

#collection-preview .section-title {
  font-size: clamp(1.7rem, 3.4vw, 3.1rem);
}

#collection-preview .section-title em {
  font-weight: 700;
}

#collection-preview .section-note {
  max-width: 68ch;
}

.section-head {
  max-width: 46rem;
  margin: 0 auto var(--gap-lg);
  text-align: center;
  padding: 0 var(--page);
}

.section-head-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  max-width: none;
  text-align: left;
  padding: 0 var(--page);
}

.section-head-split .section-note {
  margin-left: auto;
  text-align: right;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.05rem 1.9rem;
  font-family: var(--ff-sans);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform .35s var(--ease),
    box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  border-radius: 2px;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-dark {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--gold);
}

.btn-dark:hover {
  background: var(--gold);
  color: var(--deep-burgundy);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -14px rgba(201, 162, 39, .55);
}

.btn-outline {
  background: transparent;
  color: var(--burgundy);
  border-color: var(--burgundy);
}

.btn-outline:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

.btn-light {
  background: var(--ivory);
  color: var(--burgundy);
  border-color: var(--ivory);
}

.btn-light:hover {
  background: var(--gold);
  color: var(--deep-burgundy);
  border-color: var(--gold);
  box-shadow: 0 14px 30px -14px rgba(201, 162, 39, .55);
}

.btn-text {
  padding: .3rem 0;
  color: var(--charcoal);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-soft);
}

.btn-text:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: none;
}

.btn-facebook {
  background: var(--burgundy);
  color: var(--ivory);
  border-color: var(--gold);
  padding: 1.3rem 2.6rem;
  font-size: .85rem;
  box-shadow: 0 18px 40px -18px rgba(90, 13, 24, .55);
}

.btn-facebook:hover {
  background: var(--gold);
  color: var(--deep-burgundy);
  box-shadow: 0 18px 40px -18px rgba(201, 162, 39, .5);
}

.arrow {
  display: inline-block;
  transition: transform .45s var(--ease), letter-spacing .45s var(--ease);
}

.btn:hover .arrow,
.btn-text:hover .arrow,
.link-arrow:hover .arrow {
  transform: translateX(6px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--burgundy);
  transition: color .3s var(--ease);
}

.link-arrow:hover {
  color: var(--gold);
}

/* ---------- ANNOUNCEMENT BAR ---------- */
.announce-bar {
  background: var(--deep-burgundy);
  color: var(--gold-light);
  height: var(--announce-h);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* A marquee that loops without a seam: the track holds two identical
   runs and slides exactly one run's width, so the reset lands on the
   same frame it left. Each run is at least a screen wide, which keeps
   the join off-screen on any monitor. */
.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-run {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(1.6rem, 4vw, 3rem);
  min-width: 100vw;
  padding-right: clamp(1.6rem, 4vw, 3rem);
  flex: 0 0 auto;
}

.marquee-run span {
  font-family: var(--ff-sub);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the same gold lozenge used in the section ornaments */
.marquee-sep {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {

  /* a run is only as wide as its content here, so it needs less time */
  .marquee-track {
    animation-duration: 18s;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* hold it still and centre the one run that remains */
  .marquee-track {
    animation: none;
  }

  .marquee-run {
    justify-content: center;
  }

  .marquee-run+.marquee-run {
    display: none;
  }
}

/* visually hidden, still announced — the marquee itself is decorative */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- HEADER / NAV ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--burgundy);
  border-bottom: 1px solid var(--gold-border);
  height: var(--header-h);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

/* The bar keeps its height the whole way down the page — only the colour
   deepens and a shadow lifts it off the content beneath. */
.site-header.is-scrolled {
  background: var(--deep-burgundy);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .55);
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--page);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  line-height: 1;
  /* the wordmark must never be what gives way when the header row
     runs short of room — as a flex item it was being squeezed to a
     sliver on narrow laptops */
  flex: 0 0 auto;
}

.brand-logo {
  height: 50px;
  width: auto;
  display: block;
}

.footer-brand .brand-logo {
  height: 52px;
}

.nav-desktop ul {
  display: flex;
  gap: 2.6rem;
}

.nav-desktop a {
  position: relative;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ivory);
  padding-bottom: .3rem;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .3s var(--ease);
}

.nav-desktop a:hover,
.nav-desktop a.is-active {
  color: var(--gold);
}

.nav-desktop a:hover::after,
.nav-desktop a.is-active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.nav-cta {
  padding: .8rem 1.4rem;
  font-size: .72rem;
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

.nav-cta:hover {
  background: var(--gold);
  color: var(--deep-burgundy);
  border-color: var(--gold);
}

/* Saved-designs (shortlist) button — injected by js/shop.js */
.shortlist-btn {
  position: relative;
  /* a 40px target — the heart glyph inside stays 20px */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  transition: color .3s var(--ease);
}

.shortlist-btn:hover {
  color: var(--gold);
}

.shortlist-btn svg {
  transition: fill .35s var(--ease);
  fill: none;
}

.shortlist-btn.has-items {
  color: var(--gold);
}

.shortlist-btn.has-items svg {
  fill: var(--gold);
}

.shortlist-btn svg {
  width: 20px;
  height: 20px;
}

.shortlist-count {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold-light);
  font-size: .6rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.shortlist-count.has-items {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--deep-burgundy);
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translate(-50%, 14px);
  z-index: 950;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: .95rem 1.5rem;
  background: var(--deep-burgundy);
  border: 1px solid var(--gold-border);
  color: var(--ivory);
  font-size: .82rem;
  letter-spacing: .04em;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 28px;
}

.menu-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--ivory);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}

.menu-toggle.is-open span:first-child {
  transform: translateY(3px) rotate(45deg);
}

.menu-toggle.is-open span:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  /* `top` is set by js/main.js from the header's measured bottom edge —
     the announcement bar scrolls away, so a static offset gaps. */
  inset: calc(var(--header-h) + var(--announce-h)) 0 0 0;
  background: var(--deep-burgundy);
  z-index: 490;
  padding: 2.5rem var(--page);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s .4s;
  overflow-y: auto;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.mobile-nav a {
  font-family: var(--ff-display);
  font-size: 1.9rem;
  color: var(--ivory);
  transition: color .3s var(--ease);
}

.mobile-nav a:hover,
.mobile-nav a.is-active {
  color: var(--gold);
}

.mobile-nav-foot {
  margin-top: 2.5rem;
  font-size: .78rem;
  color: rgba(var(--ivory-a), .6);
  letter-spacing: .04em;
}

/* ---------- LAYOUT SHELLS ---------- */
main {
  display: block;
}

section {
  position: relative;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--page);
}

.section-pad {
  padding: var(--gap-lg) 0;
}

.on-charcoal {
  background: var(--charcoal);
  color: var(--ivory);
}

.on-wine {
  background: var(--burgundy);
  color: var(--ivory);
}

/* Thin gold rule used to visually stitch sections together */
.gold-rule {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border) 20%, var(--gold-border) 80%, transparent);
}

/* ---------- REVEAL / SCROLL ANIMATION ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-img {
  opacity: 0;
  transition: opacity 1s var(--ease) var(--d, 0s);
}

.reveal-img.is-visible {
  opacity: 1;
}

.reveal-img img {
  transform: scale(1.06);
  transition: transform 1.4s var(--ease) var(--d, 0s);
}

.reveal-img.is-visible img {
  transform: scale(1);
}

[data-speed] {
  will-change: transform;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--deep-burgundy);
  color: var(--ivory);
}

.footer-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--gap-lg) var(--page) 3rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-brand p {
  margin-top: 1rem;
  color: rgba(var(--ivory-a), .62);
  max-width: 26ch;
  font-size: .92rem;
}

.footer-col h4 {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--gold);
  margin-bottom: 1.2rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.footer-col a {
  color: rgba(var(--ivory-a), .78);
  font-size: .92rem;
  transition: color .3s var(--ease);
}

.footer-col a:hover {
  color: var(--gold);
}

.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.6rem var(--page) 2rem;
  border-top: 1px solid var(--gold-border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .78rem;
  color: rgba(var(--ivory-a), .55);
}

.footer-legal a {
  margin-left: 1.5rem;
  color: rgba(var(--ivory-a), .55);
  transition: color .3s var(--ease);
}

.footer-legal a:hover {
  color: var(--gold);
}

/* ---------- SHARED: CATEGORY RIBBON (under hero) ---------- */
/* A quiet editorial index between the cinematic hero and the ivory
   content below — it carries the page's own ivory rather than a lighter
   white, so it reads as breathing room rather than a navigation bar. */
.strip {
  background: var(--ivory);
}

.strip-track {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(1.5rem, 2.6vw, 1.9rem) var(--page);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.strip li {
  font-family: var(--ff-sub);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(90, 13, 24, .74);
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* a small antique-gold dot, not a rule or a bar */
.strip li:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .85;
  margin-left: clamp(1.4rem, 3vw, 2.6rem);
}

/* ---------- SHARED: EDITORIAL STATEMENT ---------- */
/* Photograph, two prints laid over a burgundy caption plate. The order
   of the layers is the composition: background, prints, plate. */
.statement {
  /* The studio section above ends in a full-height photograph, and this
     one opens with another. With nothing between them the two images met
     at a corner and read as one collage rather than two pictures — the
     page ground shows through instead, so this sits as its own banner.
     Sized to land on the same 76px band the category ribbon under the
     hero makes, and 64px at phone widths, so the two reads match. */
  margin-top: clamp(4rem, 5.3vw, 4.75rem);
  position: relative;
  overflow: hidden;
  /* the ground beneath the photograph, and the whole background if the
     image has yet to arrive */
  background: var(--ivory);
  min-height: clamp(32rem, 58vw, 44rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 8vw, 7rem) var(--page);
}

.statement-bg {
  position: absolute;
  inset: -4%;
  z-index: 0;
}

/* <picture> is inline with auto height, so height:100% on the image
   inside it resolves against nothing — give the wrapper a box first. */
.statement-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.statement-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Enough to seat the plate without putting the photograph out. The
     flowers, ribbon and wax seal have to stay legible at the edges. */
  background:
    radial-gradient(115% 82% at 50% 50%, rgba(37, 35, 35, .12) 0%, rgba(37, 35, 35, .5) 58%, rgba(37, 35, 35, .74) 100%),
    linear-gradient(180deg, rgba(59, 7, 15, .34) 0%, rgba(37, 35, 35, .08) 42%, rgba(59, 7, 15, .48) 100%);
}

.statement-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- the two prints ---- */
.statement-photos {
  display: flex;
  justify-content: center;
  /* they sit over the top edge of the plate below */
  margin-bottom: -3.4rem;
  z-index: 2;
}

.statement-photo {
  --rot: -6deg;
  width: clamp(148px, 15vw, 215px);
  padding: .55rem .55rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--gold-border);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .25);
  /* the entrance settles the tilt rather than snapping to it */
  opacity: 0;
  transform: rotate(calc(var(--rot) * 1.7)) translateY(18px);
  transition:
    opacity .85s var(--ease) var(--d, 0s),
    transform .85s var(--ease) var(--d, 0s),
    box-shadow .45s var(--ease);
}

.statement-photo.is-visible {
  opacity: 1;
  transform: rotate(var(--rot)) translateY(0);
}

.statement-photo:first-child {
  /* a little overlap, so they read as two prints set down by hand */
  margin-right: -1.4rem;
}

.statement-photo:last-child {
  --rot: 5deg;
  margin-top: 1.4rem;
  z-index: 1;
}

/* the frame animates; the photograph inside it stays put */
.statement-photo img {
  aspect-ratio: 4/5;
  object-fit: cover;
  transform: none;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .statement-photo:hover {
    transform: rotate(calc(var(--rot) * .35)) translateY(-4px) scale(1.02);
    box-shadow: 0 28px 58px rgba(0, 0, 0, .38);
    z-index: 3;
  }
}

/* ---- the caption plate ---- */
.statement-card {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--burgundy);
  color: var(--ivory);
  /* the top has to clear the prints overlapping it */
  padding: clamp(4.4rem, 7vw, 5.6rem) clamp(1.8rem, 5vw, 3.6rem) clamp(2.8rem, 5vw, 3.6rem);
  text-align: center;
  border: 1px solid rgba(201, 162, 39, .26);
  box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .8);
}

.statement-title {
  font-family: var(--ff-script);
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  line-height: 1.05;
  color: var(--gold-light);
}

.statement-card .gold-ornament {
  justify-content: center;
  margin: 1.3rem 0 1.4rem;
}

.statement-lede {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.35;
  color: var(--ivory);
  /* wide enough to hold the line together on a desktop plate — at 22ch it
     broke after "the", which is the worst place for it */
  max-width: 30ch;
  margin: 0 auto;
}

/* The opening line runs a size down from the statement it introduces, so
   the two read as one thought rather than two competing headings. It is
   its own <h2> rather than part of the lede, so the family, weight and
   slope are all set here — none of it is inherited any more. */
/* On the homepage the lead heading above carries the emphasis, so the
   statement steps down to sit under it. Scoped to the sibling pair, which
   leaves the about page's version of this card at its own size. */
.statement-lede-lead + .statement-lede {
  font-size: clamp(1.15rem, 1.95vw, 1.5rem);
}

.statement-lede-lead {
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.25;
  /* gold, so it reads as the opening flourish rather than a second
     sentence of the ivory statement below it */
  color: var(--gold-light);
  margin-bottom: .3rem;
}

.statement-card .eyebrow {
  color: var(--gold-light);
  opacity: .85;
  margin: 2.2rem 0 .9rem;
}

.statement-note {
  color: rgba(var(--ivory-a), .78);
  font-size: .92rem;
  line-height: 1.8;
  max-width: 44ch;
  margin: 0 auto;
}

.statement-note strong {
  color: var(--gold-light);
  font-weight: 600;
}

/* ---------- HOMEPAGE: FULL-BLEED HERO ---------- */
.hero-full {
  position: relative;
  /* The box takes the plates' own ratio so the whole photograph shows.
     Slides 1 and 2 are 3:2 and fit exactly; slide 3 is 16:9 and sits
     within it. Capped, so a wide screen does not get a 1280px hero. */
  width: 100%;
  aspect-ratio: 1536 / 1024;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  /* Copy sits centred in the left column so it balances the envelope
     on the right instead of stacking along the bottom edge. */
  align-items: center;
  /* sampled from the plates' edges, so any letterboxing reads as the
     photograph rather than as a bar */
  background: #2b0a10;
}

.hero-full-bg {
  position: absolute;
  /* flush, not overscanned: the overscan existed to give the parallax
     room to travel, and it cropped the plate to do it */
  inset: 0;
  z-index: 0;
}

/* ---------- HERO SLIDESHOW ---------- */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Cover, so the plate reaches both edges of the frame — contain left a
     band of ground down each side on a wide screen, since a 3:2 photograph
     cannot fill a 16:9 box. The box still takes the plate's ratio, so on a
     phone (and on a tall desktop window) cover and contain come out the
     same and nothing is cropped at all; only a wide, short window trims,
     and it trims top and bottom rather than the sides. */
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}

.hero-slide.is-current {
  opacity: 1;
}

/* The slow zoom is gone: it scaled each plate from 1.02 to 1.08, which is
   a crop by another name, and the plates are meant to be seen whole. */

.hero-dots {
  display: flex;
  gap: .7rem;
  margin-top: 2.4rem;
}

.hero-dot {
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
}

.hero-dot span {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(var(--ivory-a), .34);
  transition: background .5s var(--ease);
}

.hero-dot.is-current span {
  background: var(--gold);
}

.hero-dot:hover span {
  background: var(--gold-light);
}

.hero-full-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* sits over the slideshow plates */
  /* Darkens the left column for the copy and leaves the wax seal bright. */
  background:
    linear-gradient(90deg, rgba(59, 7, 15, .84) 0%, rgba(59, 7, 15, .58) 30%, rgba(37, 35, 35, .18) 56%, rgba(37, 35, 35, 0) 76%),
    linear-gradient(0deg, rgba(37, 35, 35, .34) 0%, rgba(37, 35, 35, 0) 38%);
}

.hero-full-content {
  position: relative;
  z-index: 1;
  /* The rest of the page sits on a 1440 grid, but the hero is full-bleed:
     centring the copy in a 1440 box walks it inward as the screen grows
     while the photograph keeps spreading, and above 1440 the headline
     ends up on the tray. The copy follows the page gutter instead. */
  max-width: none;
  width: 100%;
  padding: 0 var(--page);
  color: var(--ivory);
}

.hero-full-content .eyebrow {
  color: var(--gold-light);
}

.hero-full-content .gold-ornament {
  justify-content: flex-start;
}

.hero-full-title {
  font-family: var(--ff-display);
  /* The invitation in the photograph starts at a fixed 36% of the viewport,
     so the headline is sized in vw to keep clear of it at every width
     rather than colliding once the screen is wide enough. */
  font-size: clamp(2.7rem, 5.1vw, 7rem);
  line-height: 1.1;
  /* The swash F rises well above the cap line. In em, so the clearance
     tracks the headline at every breakpoint instead of being a pixel
     value that only holds at one width. */
  margin-top: .82em;
}

/* The two headline lines are set upright and in caps. Each is its own
   block, so the break is deliberate rather than left to the width —
   the script line underneath is where the flourish belongs. */
.hero-full-title .hero-line {
  display: block;
  font-family: var(--ff-hero);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .015em;
}

/* ---------- THE SWASH CAPITALS ---------- */
/* The F and T are real glyphs from a copperplate face, so the line still
   reads "For Moments That Matter" to a screen reader and to search — the
   letter is text, not a picture of a letter.
   line-height:0 keeps the oversized glyph from opening up the line box;
   it overhangs the line instead, which is the whole point of a swash. */
.hero-full-title .swash-letter {
  display: inline-block;
  font-family: var(--ff-swash);
  font-weight: 400;
  font-size: 1.1em;
  line-height: 0;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: baseline;
}

.hero-full-title .swash-f {
  margin-right: -.05em;
}

.hero-full-title .swash-t {
  margin-right: -.05em;
}

.hero-full-title .script-accent {
  /* Playfair bold italic here rather than the site's Parisienne: against a
     condensed display serif a monoline script reads thin, and the weight
     holds the line together. */
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  color: var(--gold-light);
  font-size: clamp(1.95rem, 3.7vw, 3.15rem);
  margin-top: .34rem;
}

.hero-full-lede {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  /* Breaks after "beautifully designed," — two even lines. Capped in vw as
     well, for the same reason the headline is: below about 1500px a fixed
     46ch runs past the invitation in the photograph. */
  max-width: min(46ch, 30vw);
  line-height: 1.75;
  color: rgba(var(--ivory-a), .86);
}

.hero-full-actions {
  margin-top: 2.2rem;
}

.hero-scroll {
  position: absolute;
  z-index: 1;
  left: var(--page);
  bottom: 1.6rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(var(--ivory-a), .7);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero-scroll span {
  width: 1px;
  height: 34px;
  background: rgba(var(--ivory-a), .4);
  position: relative;
  overflow: hidden;
}

.hero-scroll span::after {
  content: '';
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--gold);
  animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% {
    top: -100%;
  }

  60% {
    top: 100%;
  }

  100% {
    top: 100%;
  }
}

/* ---------- INTRO SECTION ---------- */
.intro {
  padding: var(--gap-lg) 0;
  overflow: hidden;
}

.intro-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--page);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

/* The three headline lines are set to break by hand, and the studio copy
   column is the narrowest on the page. Sized in vw so each line holds on
   one line down the whole two-column range rather than re-wrapping. */
.intro-studio .section-title {
  font-size: clamp(1.9rem, 3.35vw, 3.4rem);
}

/* The homepage treatment only. The about page uses the same markup and
   keeps the contained, gutter-aligned version above. */
.intro-studio {
  /* the plate runs to the edge of the screen, so the section carries no
     padding of its own — the copy column supplies its own */
  padding: 0;
}

.intro-studio .intro-grid {
  max-width: none;
  margin: 0;
  padding: 0;
  grid-template-columns: 1.28fr 1fr;
  gap: 0;
  /* stretch, not centre: the photograph fills the row the copy sets */
  align-items: stretch;
}

.intro-media {
  border: 1px solid var(--gold-border);
  overflow: hidden;
  aspect-ratio: 4/5;
}

/* <picture> is inline with auto height — the wrapper needs a box before
   the image inside it can fill one */
.intro-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The about page's visual is a square brand card, not a photograph, so it
   gets a square frame — a logo that has been cropped to fit reads as a
   mistake, and letterboxing one reads as an oversight. */
.intro-media-brand {
  aspect-ratio: 1/1;
}

/* The homepage plate only — the about page shares .intro-media and keeps
   its own framing. */
.intro-media-studio {
  /* full-bleed: no frame, no fixed ratio — it takes the height the copy
     column sets and runs flush to the edge of the screen */
  border: 0;
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(30rem, 46vw, 50rem);
  /* lifts as it arrives, a beat ahead of the copy beside it */
  transform: translateY(20px);
  transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s);
}

.intro-media-studio.is-visible {
  transform: translateY(0);
}

.intro-media-studio img {
  /* The frame is near-square now, so most of the photograph survives.
     Held left of centre to keep clear air outside the phone at the
     leading edge — at dead centre it reads as clipped. */
  object-position: 24% 50%;
}

.intro-studio .intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(3.5rem, 7vw, 6.5rem) var(--page) clamp(3.5rem, 7vw, 6.5rem) clamp(2rem, 5vw, 5.5rem);
}

.intro-copy .section-title {
  margin-bottom: 1.6rem;
}

.intro-text {
  color: var(--muted);
  max-width: 42ch;
  font-size: 1rem;
}

.intro-steps {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.intro-steps li {
  font-family: var(--ff-serif);
  font-size: 1.25rem;
  color: var(--charcoal);
  display: flex;
  align-items: baseline;
  gap: clamp(1.2rem, 2.4vw, 2.2rem);
}

.intro-steps span {
  font-family: var(--ff-sans);
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .1em;
}

.intro-copy .link-arrow {
  margin-top: 2.6rem;
  display: inline-flex;
}

/* ---------- COLLECTION CTA ---------- */
.collection-cta {
  text-align: center;
  margin-top: var(--gap);
  padding: 0 var(--page);
}

/* ---------- FINAL CTA (full-bleed) ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  /* a solid ground under the photograph — without it the page's ivory
     shows through anywhere the parallax leaves uncovered */
  background: var(--deep-burgundy);
  padding: clamp(5rem, 12vw, 9rem) var(--page);
}

.final-cta-bg {
  position: absolute;
  /* the overscan has to beat the parallax travel, and 4% of a short
     section is only a dozen pixels — far less than the drift */
  inset: -90px -2%;
  z-index: 0;
}

/* <picture> is inline with auto height — the wrapper needs a box first */
.final-cta-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.final-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(59, 7, 15, .76);
}

.final-cta-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--ivory);
}

.final-cta-title {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height: 1.16;
}

.final-cta-title .script-accent {
  /* Playfair rather than the script face — the line is long enough that a
     connected script goes soft at this size. */
  font-family: var(--ff-display);
  font-weight: 700;
  font-style: italic;
  color: var(--gold-light);
}

.final-cta-content p {
  margin: 1.4rem 0 2.2rem;
  font-size: 1.05rem;
  color: rgba(var(--ivory-a), .86);
}

/* ---------- PAGE HERO (text-forward pages) ---------- */
.page-hero {
  padding: clamp(4rem, 10vw, 7rem) var(--page) clamp(1rem, 4vw, 2rem);
  text-align: center;
}

.page-hero .section-title {
  max-width: 20ch;
  margin: 0 auto;
}

/* ---------- STEP LIST (how it works) ---------- */
.steps-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--gap-lg) var(--page);
  position: relative;
}

/* Only the How It Works list carries the spine — the contact page reuses
   .steps-page without one, and would otherwise get the inset and a row of
   nodes with nothing to sit on. */
.steps-page-tracked {
  padding-left: calc(var(--page) + 2.8rem);
}

/* The spine used to sit at a fixed offset inside the numeral column, which
   put it straight through the numerals as soon as their clamped size
   changed. It now runs down the margin, with a node per step. */
.steps-track {
  position: absolute;
  left: var(--page);
  top: calc(var(--gap-lg) + .8rem);
  bottom: calc(var(--gap-lg) + 2.6rem);
  width: 1px;
  background: var(--gold-border);
}

.steps-track-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: var(--gold);
  transition: height 1.4s var(--ease);
}

.step-block {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2.6rem 0;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}

/* :first-child never matched — the spine div is the first child of
   .steps-page, so the first step is the second. */
.steps-track+.step-block {
  padding-top: 0;
}

/* the node that sits each step on the spine */
.steps-page-tracked .step-block::before {
  content: '';
  position: absolute;
  left: calc(-2.8rem - 3.5px);
  top: 3.6rem;
  width: 7px;
  height: 7px;
  background: var(--ivory);
  border: 1px solid var(--gold-border);
  transform: rotate(45deg);
}

.steps-page-tracked .steps-track+.step-block::before {
  top: 1rem;
}

.step-block:last-child {
  border-bottom: none;
}

.step-num-big {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--burgundy);
  line-height: 1;
}

.step-block h3 {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: .7rem;
  color: var(--charcoal);
}

.step-block p {
  color: var(--muted);
  max-width: 52ch;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .step-block {
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  /* no room for a margin spine on a phone */
  .steps-page-tracked {
    padding-left: var(--page);
  }

  .steps-track,
  .steps-page-tracked .step-block::before {
    display: none;
  }
}

/* ---------- CONTACT / CONVERSION BLOCK ---------- */
.contact-cta {
  background: var(--burgundy);
  color: var(--ivory);
  text-align: center;
  padding: clamp(4rem, 9vw, 6rem) var(--page);
}

.contact-cta .eyebrow {
  color: var(--gold-light);
}

.contact-cta h1,
.contact-cta h2 {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  max-width: 18ch;
  margin: 0 auto;
  line-height: 1.16;
}

.contact-cta-steps {
  margin: 2rem auto 2.6rem;
  max-width: 30ch;
  font-size: 1.05rem;
  color: rgba(var(--ivory-a), .86);
  line-height: 1.9;
}

.contact-alt {
  margin-top: 1.8rem;
  font-size: .9rem;
  color: rgba(var(--ivory-a), .66);
}

.contact-alt a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .3s var(--ease);
}

.contact-alt a:hover {
  color: var(--gold-light);
}

/* ---------- CONTACT CHANNELS ---------- */
/* Four ways to reach the studio, set as an editorial index rather than a
   row of cards — hairline above each, gold mark, quiet label, the value
   itself doing the talking. */
.channels {
  padding: var(--gap-lg) var(--page);
  max-width: 1100px;
  margin: 0 auto;
}

.channels .section-head {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.channel-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
}

.channel {
  border-top: 1px solid var(--gold-border);
}

.channel a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: 1.5rem 0 .4rem;
  transition: color .3s var(--ease);
}

.channel-icon {
  color: var(--gold);
  transition: color .3s var(--ease), transform .45s var(--ease);
}

.channel-icon svg {
  width: 26px;
  height: 26px;
}

.channel-label {
  font-family: var(--ff-sub);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease);
}

.channel-value {
  font-family: var(--ff-serif);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--charcoal);
  /* the email is long and the columns are narrow */
  overflow-wrap: anywhere;
  transition: color .3s var(--ease);
}

/* the address is longer than the column is wide at some sizes */
.channel-value-sm {
  font-size: .95rem;
}

.channel a:hover .channel-value,
.channel a:focus-visible .channel-value {
  color: var(--burgundy);
}

.channel a:hover .channel-label,
.channel a:focus-visible .channel-label {
  color: var(--burgundy);
}

.channel a:hover .channel-icon,
.channel a:focus-visible .channel-icon {
  transform: translateY(-2px);
}

.channel-meta {
  margin-top: clamp(2.2rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem clamp(1.6rem, 4vw, 3rem);
  font-size: .88rem;
  color: var(--muted);
}

.channel-meta strong {
  font-family: var(--ff-sub);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-right: .6rem;
}

@media (max-width: 899px) {
  .channel-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .channel-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .channel a {
    /* a row rather than a stack once each one has the full width */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
    padding: 1.15rem 0;
  }

  .channel-icon {
    grid-row: span 2;
  }

  .channel-meta {
    flex-direction: column;
  }
}

/* ---------- VALUES ROW (about page) ---------- */
.values-row {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap-lg) var(--page);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.value-item {
  border-top: 1px solid var(--gold-border);
  padding-top: 1.4rem;
}

.value-item h3 {
  font-family: var(--ff-display);
  font-size: 1.5rem;
  margin-bottom: .8rem;
  color: var(--burgundy);
}

.value-item p {
  color: var(--muted);
  font-size: .95rem;
}

@media (max-width: 767px) {
  .values-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ============================================================
   BRAND TYPE ASSIGNMENT
   Kept in one block so the two brand faces stay easy to audit.
   ============================================================ */

/* Headings — Playfair Display, italic */
.section-title,
.hero-full-title,
.final-cta-title,
.contact-cta h1,
.contact-cta h2,
.statement-lede,
.step-block h3,
.value-item h3,
.payment-instructions h3,
.mobile-nav a,
.tpl-title,
.tpl-cta-name,
.tpl-about p.lede,
.tc-name,
.qv-title {
  font-style: italic;
}

/* Subheadings — Glacial Indifference */
.eyebrow,
.section-note,
.strip li,
.hero-full-lede,
.intro-text,
.contact-cta-steps,
.footer-col h4,
.filter-label,
.tc-style,
.tc-price,
.qv-index,
.qv-style,
.qv-meta h4,
.tpl-index,
.tpl-tagline,
.tpl-price span,
.tpl-cta-note,
.tpl-shot figcaption,
.included-row .label,
.feature-check {
  font-family: var(--ff-sub);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1199px) {
  :root {
    --header-h: 74px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* draw the header in a little so the full nav still fits a laptop */
  .header-inner {
    gap: 1rem;
  }

  .nav-desktop ul {
    gap: 1.7rem;
  }

  .nav-cta {
    padding: .8rem 1.15rem;
    font-size: .7rem;
    letter-spacing: .1em;
  }
}

@media (max-width: 1023px) {
  .nav-desktop {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

  .section-head-split {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-head-split .section-note {
    margin-left: 0;
    text-align: left;
  }

  /* matches the specificity of the .intro-studio rule above, or the
     homepage would never stack */
  .intro-grid,
  .intro-studio .intro-grid {
    grid-template-columns: 1fr;
  }

  .intro-media {
    aspect-ratio: 16/10;
  }

  .intro-media-brand {
    aspect-ratio: 1/1;
    max-width: 440px;
    margin: 0 auto;
  }

  /* Once stacked the copy is no longer beside anything, so it lines up
     with the page gutter like every other section instead of keeping the
     wider inset it needs next to the photograph. */
  .intro-studio .intro-copy {
    padding-left: var(--page);
    padding-right: var(--page);
  }

  /* Stacked, the plate stays full-bleed. A tablet is wide enough that an
     upright frame would run close to a screen tall, so it squares up
     here and only goes properly upright on a phone. */
  .intro-media-studio {
    aspect-ratio: 6/5;
    min-height: 0;
    height: auto;
  }
}

@media (max-width: 600px) {
  .intro-media-studio {
    aspect-ratio: 4/5;
  }
}

/* Tablet and phone both take the portrait plates, so the hero box takes
   their 9:16 ratio and the copy sits at the top, centred. At the desktop
   3:2 ratio an 820px tablet gave a 537px hero against 536px of copy —
   no room at all, and the eyebrow ran into the header. */
@media (max-width: 1023px) {
  .hero-full {
    width: 100%;
    aspect-ratio: 900 / 1600;
    max-height: 100vh;
    align-items: flex-start;
  }

  .hero-full-content {
    text-align: center;
    padding-top: clamp(1.5rem, 5vw, 2.6rem);
  }

  .hero-full-content .gold-ornament {
    justify-content: center;
  }

  .hero-full-title .hero-line,
  .hero-full-title .script-accent {
    text-align: center;
  }

  .hero-full-lede {
    margin-inline: auto;
  }

  .hero-dots {
    justify-content: center;
  }

  .hero-scroll {
    display: none;
  }

  /* The copy now sits at the top of the frame, and two of the three plates
     are bright there — the bride's dress on the second reads 1.2:1 against
     ivory unaided. So the wash is weighted to the top rather than the foot,
     and eases out by the middle so the tray, the seal and the pearls below
     keep their own light. */
  .hero-full-bg::after {
    background: linear-gradient(180deg,
      rgba(59, 7, 15, .56) 0%,
      rgba(59, 7, 15, .56) 38%,
      rgba(59, 7, 15, .34) 48%,
      rgba(59, 7, 15, .14) 60%,
      rgba(59, 7, 15, .04) 74%,
      rgba(59, 7, 15, 0) 100%);
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --page: 1.25rem;
  }

  body {
    font-size: 15px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding-bottom: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal a {
    margin-left: 0;
    margin-right: 1.4rem;
  }

  /* Phones: both prints stay whole and stay together — narrower, leaning
     less, overlapping a little less, and sitting a little higher over the
     plate so nothing below it is pushed out of the section. */
  .statement {
    min-height: 0;
  }

  .statement-photos {
    margin-bottom: -2.4rem;
  }

  .statement-photo {
    --rot: -4.5deg;
    width: clamp(120px, 34vw, 158px);
    padding: .4rem .4rem 1.15rem;
  }

  .statement-photo:first-child {
    margin-right: -1rem;
  }

  .statement-photo:last-child {
    --rot: 4deg;
    margin-top: 1rem;
  }

  .statement-card {
    padding-top: 3.6rem;
  }

  /* Too narrow for four categories on one line, so the row scrolls
     instead of breaking into ragged lines. It bleeds to both edges, and
     the category cut off at the right is what says there is more. */
  .strip-track {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .strip-track::-webkit-scrollbar {
    display: none;
  }

  .strip li:not(:last-child)::after {
    margin-left: 1.3rem;
  }

  /* the script line runs close to the edge at 375px — leave headroom
     in case Parisienne falls back to a wider cursive face */
  .hero-full-title .script-accent {
    font-size: 1.85rem;
  }

  .hero-full-lede {
    max-width: 38ch;
  }

  /* the plates are wide and short, so a phone sees a narrow upright
     slice — aim each one at its subject */
  .hero-slide {
    object-position: var(--fx-m, 50%) 50%;
  }

  .hero-dots {
    margin-top: 1.8rem;
  }

  .hero-scroll {
    display: none;
  }


  /* The eyebrow sits at 25% of the hero, inside the clear zone, and on the
     second plate that is the bride's dress — the brightest thing in the
     slideshow. A shadow carries it there without darkening the picture. */
  .hero-full-content .eyebrow,
  .hero-full-title {
    text-shadow: 0 1px 14px rgba(40, 0, 10, .6);
  }

  /* The eyebrow needs more than the soft drop: a tight halo as well, which
     is invisible against the dark plates and holds the gold caps together
     against the dress on the second. */
  .hero-full-content .eyebrow {
    text-shadow: 0 0 3px rgba(40, 0, 10, .85), 0 1px 14px rgba(40, 0, 10, .7);
  }
}