/* ==========================================================================
   stevo.shots — Canadian Wedding Photography, based in Toronto
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography primitives
   4.  Buttons
   5.  Navigation + mobile menu
   6.  Hero (+ places strip)
   7.  About
   8.  Portfolio (+ lightbox)
   9.  Services / experience
   9b. Collections (pricing tiers)
   10. Instagram
   11. Contact
   12. Footer (+ mobile booking bar)
   12b. Supporting pages (pricing, FAQ, privacy, 404)
   13. Reveal animations
   14. Responsive
   15. Motion & print preferences
   ========================================================================== */

/* 1. TOKENS ============================================================== */

:root {
  /* Palette — warm white, champagne, charcoal, muted taupe. Nothing else. */
  --ivory:      #FBF9F5;
  --champagne:  #F2EBE1;
  --sand:       #E8DFD2;
  --ink:        #14110D;
  --ink-soft:   #4B443B;
  --taupe:      #9A8975;   /* decorative only: hairlines, rules, icons */
  --taupe-text: #736552;   /* the same hue deep enough to read: 5.4:1 on ivory, 4.8:1 on champagne */
  --line:       rgba(20, 17, 13, 0.13);
  --line-soft:  rgba(20, 17, 13, 0.07);
  --field-line: rgba(20, 17, 13, 0.5);   /* form underlines: 3.4:1 on champagne */

  /* Type */
  --serif: "Bodoni Moda", "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --sans:  "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter:     clamp(1.5rem, 5vw, 5.5rem);
  --measure:    1440px;
  --section-y:  clamp(6rem, 14vh, 12rem);
  --grid-gap:   clamp(1rem, 2.4vw, 2.75rem);

  /* Motion — slow, calm, never bouncy */
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --slow:  0.9s;

  /* A single restrained grade applied to every photograph so a mixed
     collection reads as one body of work. The hero is carried harder so it
     holds its own against the wordmark. Set any of these to `none` to show
     photographs exactly as exported. */
  --photo-grade:       saturate(0.88) contrast(1.02) sepia(0.05);
  --photo-grade-hover: saturate(1) contrast(1.03);
  --hero-grade:        saturate(0.85) contrast(1.22) brightness(0.93);
}

/* 2. RESET & BASE ======================================================== */

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

/* Smooth scrolling is switched on by main.js after load (html.is-smooth), so a
   page opened at a #fragment jumps straight there. */
html.is-smooth { scroll-behavior: smooth; }

html {
  scroll-padding-top: 5.5rem;
  scrollbar-gutter: stable;   /* locking scroll for the menu must not shift the layout */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-weight: 400;   /* 300 read as faint on Windows and Android screens */
  line-height: 1.75;
  letter-spacing: 0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

/* Anything the scripts hide stays hidden, whatever its display style. */
[hidden] { display: none !important; }

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

h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

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

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

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75rem 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* 3. TYPOGRAPHY PRIMITIVES ============================================== */

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.06;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

.display em {
  font-style: italic;
  font-weight: 400;
}

/* Small letterspaced caps — the connective tissue of the whole layout. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe-text);
  margin: 0;
}

.lede {
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.85;
  font-weight: 400;
}

.sec-head { margin-bottom: clamp(3rem, 7vh, 5.5rem); }

.sec-head__title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  margin-top: 1.5rem;
}

.sec-head--center { text-align: center; }
.sec-head .lede { margin-top: 1.75rem; }

/* 4. BUTTONS ============================================================= */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  background: none;
  transition: color 0.5s var(--ease), background-color 0.5s var(--ease),
              border-color 0.5s var(--ease), opacity 0.5s var(--ease);
}

/* Hairline-underlined link button — the primary editorial CTA. */
.btn--line {
  position: relative;
  padding-bottom: 0.6rem;
  color: var(--ink);
}
.btn--line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform-origin: right;
  transition: transform 0.7s var(--ease);
}
.btn--line:hover::after { transform: scaleX(0); transform-origin: left; }

.btn--pill {
  padding: 0.85rem 1.65rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
}

.btn--solid {
  padding: 1.15rem 2.75rem;
  background: var(--ink);
  color: var(--ivory);
  letter-spacing: 0.28em;
}

/* Hover softens the ink without losing contrast (9:1). */
.btn--pill:hover,
.btn--solid:hover { background: var(--ink-soft); }

.btn[aria-disabled="true"] { opacity: 0.55; cursor: progress; }

/* 5. NAVIGATION ========================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(1.1rem, 2.2vh, 1.9rem);
  background: transparent;
  transition: background-color 0.6s var(--ease), box-shadow 0.6s var(--ease),
              padding 0.6s var(--ease);
}

.nav.is-stuck {
  background: rgba(251, 249, 245, 0.93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: 0.9rem;
}

/* Without the script nothing adds .is-stuck, and with the menu open its links
   scroll under the header: in both cases the header needs its own ground. */
.no-js .nav { background: var(--ivory); box-shadow: 0 1px 0 var(--line-soft); }
body.is-locked .nav { background: var(--ivory); box-shadow: none; }

.nav__inner {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.nav__mark {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  letter-spacing: 0.01em;
  justify-self: start;
}

.nav__links {
  display: flex;
  gap: clamp(1.5rem, 2.6vw, 2.9rem);
  justify-self: center;
}

/* The page titles, set in the display serif like the wordmark and the
   mobile menu, so the header reads as one family. */
.nav__links a {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-block: 0.3rem;
  white-space: nowrap;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-current::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  justify-self: end;
}

/* Contact & social icons in the header: WhatsApp, Facebook, Instagram,
   Threads, TikTok, YouTube, Telegram, Email. Padding gives each a usable tap
   target. On phones the .nav__extra ones (Threads, Telegram, Email) step
   aside; the menu and the footer keep the full set. */
.nav__social {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.5vw, 0.4rem);
}
.nav__social a {
  display: inline-flex;
  padding: 0.4rem;
  color: var(--ink);
  transition: color 0.5s var(--ease);
}
.nav__social a:hover { color: var(--taupe-text); }
.nav__social svg { width: 17px; height: 17px; }
/* My account (sign in / create an account) */
.nav__account { display: inline-flex; padding: 0.4rem; color: var(--ink); transition: color 0.5s var(--ease); }
.nav__account:hover { color: var(--taupe-text); }
.nav__account svg { width: 20px; height: 20px; }

.nav__burger {
  display: none;
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.nav__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: transform 0.5s var(--ease), opacity 0.35s var(--ease);
}
.nav__burger span:nth-child(1) { top: 7px; }
.nav__burger span:nth-child(2) { top: 14px; }

.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile menu overlay. Content is centred when it fits and scrolls when it
   does not (landscape phones), without ever sliding under the nav. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.75rem;
  padding: 6rem var(--gutter) 2.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.menu > :first-child { margin-top: auto; }
.menu > :last-child { margin-bottom: auto; }
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }

/* The main pages: serif titles on hairlines, the current page marked. */
.menu__links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.menu__links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(1.7rem, min(8vw, 6vh), 2.4rem);
  font-size: clamp(1.7rem, min(8vw, 6svh), 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.menu__links a::after {
  content: "\2192";
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--taupe-text);
  transition: transform 0.4s var(--ease);
}
.menu__links a:hover::after,
.menu__links a:focus-visible::after { transform: translateX(4px); }
.menu__links a[aria-current="page"] { color: var(--taupe-text); }

/* Book: the call to action, then the secondary pages. */
.menu__book { display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; }
.menu__cta { text-align: center; padding: 1.05rem 1.5rem; }
.menu__more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.menu__more a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-text);
}

/* Every social icon (the header shows fewer on phones), centred under the rest. */
.social.menu__social {
  justify-content: center;
  gap: 0.25rem 0;
  margin-top: -0.75rem;
}
/* Eight across on a phone: each tap target shares the width (40px at most). */
.social.menu__social a { width: min(2.5rem, calc((100vw - 2 * var(--gutter)) / 8)); }
/* 6. HERO ================================================================ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding: clamp(6rem, 12vh, 9rem) var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
  text-align: center;
}

.hero__eyebrow { letter-spacing: 0.4em; }

/* The wordmark is split around a single tall portrait: "stevo." | photo | "shots". */
.hero__stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

.hero__mark {
  display: contents;
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
}

.hero__word {
  font-size: clamp(2.5rem, 8.6vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.028em;
  white-space: nowrap;
}
.hero__word--l { grid-area: 1 / 1; justify-self: end; }
.hero__word--r { grid-area: 1 / 3; justify-self: start; }

.hero__figure {
  grid-area: 1 / 2;
  overflow: hidden;
  overflow: clip;
  width: min(clamp(10rem, 26vw, 23rem), 40vh);
  width: min(clamp(10rem, 26vw, 23rem), 40svh);
  margin-inline: clamp(0.9rem, 2.2vw, 2rem);
}

.hero__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: var(--hero-grade);
}

.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vh, 2.75rem);
}

/* The page's h1: what we are and where, in the hero's letterspaced voice. */
.hero__desc {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 2.2;
  color: var(--ink);
}
.hero__desc span { display: block; font-size: 0.6875rem; color: var(--taupe-text); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.25rem;
}

/* Where we photograph — a single quiet line under the hero. */
.places {
  padding: clamp(2rem, 5vh, 3rem) var(--gutter);
  border-block: 1px solid var(--line-soft);
  text-align: center;
}
.places .eyebrow { margin-bottom: 1rem; }
.places__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}
.places__list li + li::before {
  content: "·";
  margin-inline: 0.75rem;
  color: var(--taupe);
}

/* The hero enters on CSS alone, so a slow or failed script never holds back
   the first thing anyone sees. */
.hero__eyebrow,
.hero__figure,
.hero__foot { animation: hero-in 1.15s var(--ease) both; }
.hero__figure { animation-delay: 0.1s; }
.hero__foot   { animation-delay: 0.2s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
}

/* 7. ABOUT =============================================================== */

.about { text-align: center; }

.about .eyebrow { margin-bottom: 1.75rem; }

.about__title {
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  margin-bottom: 2.25rem;
}

.about .lede { margin-inline: auto; }

/* The studio name — letterspaced capitals, set quieter than a display title. */
.about__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-left: 0.24em;   /* balances the trailing letter-space so it centres */
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

.about__story { max-width: 70ch; }

.about__pair {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  margin-top: clamp(4rem, 10vh, 8rem);
  text-align: left;
}

.about__fig--a { grid-column: 2 / span 5; }
.about__fig--b { grid-column: 8 / span 4; margin-top: clamp(3rem, 9vh, 7rem); }

.about__fig { overflow: hidden; overflow: clip; }

.about__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: var(--photo-grade);
}

.about__fig figcaption {
  margin-top: 1.1rem;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe-text);
}

/* 8. PORTFOLIO =========================================================== */

.portfolio { background: var(--ivory); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  margin-bottom: clamp(3rem, 7vh, 5rem);
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line-soft);
}

.filters__btn {
  position: relative;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-text);
  background: none;
  border: 0;
  padding: 0.5rem 0 0.45rem;
  cursor: pointer;
  transition: color 0.5s var(--ease);
}
.filters__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.filters__btn:hover { color: var(--ink); }
.filters__btn.is-active { color: var(--ink); }
.filters__btn.is-active::after { transform: scaleX(1); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(3rem, 7vh, 6rem) var(--grid-gap);
  grid-auto-flow: row dense;
}

.shot { position: relative; }

/* The clipping box sits around the photograph only, so the hover scale is
   cropped at the image's own edges and never crowds the caption. */
.shot__media { display: block; overflow: hidden; overflow: clip; }

/* Column spans */
.s--4  { grid-column: span 4; }
.s--5  { grid-column: span 5; }
.s--6  { grid-column: span 6; }
.s--7  { grid-column: span 7; }
.s--12 { grid-column: span 12; }

/* A staggered drop keeps the composition from settling into rows. */
.drop { margin-top: clamp(2rem, 8vh, 7rem); }

.shot img {
  width: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
}

/* Aspect ratios, held by the wrapper so a replacement photo of any
   proportion still lands in the same slot. */
.r--45   img { aspect-ratio: 4 / 5; }
.r--32   img { aspect-ratio: 3 / 2; }
.r--23   img { aspect-ratio: 2 / 3; }
.r--wide img { aspect-ratio: 16 / 7; }

.shot figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: 1.15rem;
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}

.shot figcaption span {
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe-text);
}

/* Specific enough (0,3,1) to win over the reveal rules in section 13. */
@media (hover: hover) {
  .shot:hover .shot__media img { filter: var(--photo-grade-hover); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shot:hover .shot__media img { transform: scale(1.035); }
}

.shot.is-hidden { display: none; }

/* The original portfolio waits behind "View More Work" in the All view;
   a category filter shows its photographs in full. Without JavaScript
   everything shows and the button never appears. */
html:not(.no-js) .grid[data-filter="all"]:not(.is-expanded) .shot--more { display: none; }
.more-work { margin-top: clamp(3rem, 7vh, 5rem); text-align: center; }
.more-work[hidden],
.no-js .more-work { display: none; }

a.shot__media { cursor: zoom-in; }

/* Lightbox — a modal <dialog>: the browser handles focus, Esc and the inert
   page behind it. Without JavaScript each photo link opens the image itself. */
.lightbox {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 8vh, 4.5rem) clamp(0.75rem, 5vw, 5rem);
  border: 0;
  background: rgba(20, 17, 13, 0.97);
  color: var(--ivory);
  overflow: hidden;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(20, 17, 13, 0.6); }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 100%;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  max-height: calc(100svh - 10rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__cap {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand);
  text-align: center;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.4s var(--ease);
}
.lightbox__btn:hover { opacity: 1; }
.lightbox__btn:focus-visible { outline-color: var(--ivory); }
.lightbox__close { top: 0.75rem; right: 0.75rem; }
.lightbox__prev  { left: 0.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: 0.25rem; top: 50%; transform: translateY(-50%); }

/* A filtered view is a short, even sequence rather than the full composed
   spread: pairs side by side in page order, an odd last photograph centred. */
@media (min-width: 761px) {
  .grid:not([data-filter="all"]) { grid-auto-flow: row; }
  .grid:not([data-filter="all"]) .shot { grid-column: span 6; margin-top: 0; }
  .grid:not([data-filter="all"]) .shot.is-solo { grid-column: 4 / span 6; }
  /* At half width a 16:7 panorama would be a sliver beside its row partner. */
  .grid:not([data-filter="all"]) .r--wide img { aspect-ratio: 3 / 2; }
}

/* 9. SERVICES ============================================================ */

.services { background: var(--champagne); }

.svc { border-top: 1px solid var(--line); }

.svc__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(11rem, 20%) 1fr;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(2rem, 4.5vh, 3.25rem);
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.7s var(--ease);
}

@media (hover: hover) {
  .svc__row:hover { padding-left: clamp(0.5rem, 1.5vw, 1.5rem); }
}

.svc__num {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--taupe-text);
}

.svc__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.svc__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.svc__note {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(0.875rem, 0.85rem + 0.15vw, 1rem);
  line-height: 1.8;
}

/* The experience rows sit on ivory; services keep champagne. Their names
   are short phrases, so the name column is wider than the services'. */
.experience { background: var(--ivory); }
.experience .svc__row { grid-template-columns: 4.5rem minmax(14rem, 34%) 1fr; }

/* Add-on rows lead with a price instead of a number. */
.svc--prices .svc__row { grid-template-columns: 5.5rem minmax(11rem, 20%) 1fr; }
.svc--prices .svc__num {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: 0;
  color: var(--ink);
}

/* 9b. COLLECTIONS (pricing tiers) ======================================= */

.collections { background: var(--champagne); }

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(2rem, 3.2vw, 3rem);
  background: var(--ivory);
  border: 1px solid var(--line-soft);
}

.tier__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1.1;
}

.tier__price {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier__price small {
  display: block;
  margin-top: 0.75rem;
  line-height: 1.7;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-text);
}

.tier__note { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.7; }

.tier__list { border-top: 1px solid var(--line); }
.tier__list li {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.tier__cta { margin-top: auto; padding-top: 1rem; }
.tier__cta .btn { width: 100%; text-align: center; }

/* The recommended collection, set in ink. */
.tier--feature { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.tier--feature .eyebrow,
.tier--feature .tier__price small { color: var(--sand); }
.tier--feature .tier__note { color: rgba(251, 249, 245, 0.8); }
.tier--feature .tier__list { border-top-color: rgba(251, 249, 245, 0.25); }
.tier--feature .tier__list li { border-bottom-color: rgba(251, 249, 245, 0.14); }
.tier--feature .btn--solid { background: var(--ivory); color: var(--ink); }
.tier--feature .btn--solid:hover { background: var(--sand); }
.tier--feature :focus-visible { outline-color: var(--ivory); }

.tier__from {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.tier--feature .tier__from { color: var(--sand); }

.collections__more {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  color: var(--ink-soft);
}

/* 10. INSTAGRAM ========================================================== */

.ig { text-align: center; }

.ig .eyebrow { margin-bottom: 1.5rem; }

.ig__handle {
  font-size: clamp(2.25rem, 6vw, 5rem);
  margin-bottom: clamp(3rem, 7vh, 5rem);
}

.ig__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.ig__grid a { display: block; }

.ig__grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: var(--photo-grade);
}

@media (hover: hover) {
  .ig__grid:hover img { opacity: 0.45; }
  .ig__grid img:hover { opacity: 1; }
}

.ig__cta { margin-top: clamp(3rem, 7vh, 5rem); }

/* 11. CONTACT ============================================================ */

.contact { background: var(--champagne); }

.contact__title {
  font-size: clamp(2.5rem, 7vw, 6rem);
  margin-top: 1.5rem;
}

.contact__cols {
  display: grid;
  grid-template-columns: minmax(14rem, 4fr) minmax(0, 7fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.info__block { margin-bottom: 2.25rem; }
.info__block:last-child { margin-bottom: 0; }

.info__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-text);
  margin-bottom: 0.6rem;
}

.info__value {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.65;
}

.info__value a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left 88%;
  transition: background-size 0.6s var(--ease);
}
.info__value a:hover { background-size: 100% 1px; }

/* Form — underline-only fields, no boxes, no shadows. */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-text);
  margin-bottom: 0.85rem;
}

.req { color: var(--ink); letter-spacing: 0; }

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field-line);
  border-radius: 0;
  padding: 0 0 0.75rem;
  width: 100%;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

.field textarea { resize: vertical; line-height: 1.75; }

/* Focus doubles the underline in ink (drawn with a shadow so nothing shifts). */
.field input:focus,
.field select:focus,
.field textarea:focus {
  /* Invisible normally; becomes a real ring in Windows High Contrast, where
     the shadow below is dropped. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 var(--ink);
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field .is-invalid {
  border-bottom-color: var(--taupe-text);
  box-shadow: 0 1px 0 var(--taupe-text);
}
/* ...and an invalid field still shows clearly when it has focus. */
.field .is-invalid:focus {
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 var(--ink);
}

.field__error {
  margin-top: 0.55rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--taupe-text);
}
.field__error:empty { display: none; }

/* Date inputs render a UA placeholder; keep it quiet until focused. */
.field input[type="date"] {
  color: var(--ink-soft);
  min-height: calc(1.75em + 0.75rem);   /* iOS collapses an empty date field otherwise */
}
.field input[type="date"]::-webkit-date-and-time-value { min-height: 1.75em; text-align: left; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.75; cursor: pointer; }

/* Spam trap — off-screen for people, still in the markup for bots. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: clamp(0.5rem, 2vh, 1.5rem);
}

.form__status {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.form__note {
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--taupe-text);
}
.form__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.form__intro { grid-column: 1 / -1; color: var(--ink-soft); }
.field label .opt { letter-spacing: 0.12em; text-transform: none; }

/* Outcome of a form post made without JavaScript (the server redirects to
   #inquiry-sent, #inquiry-error, ...). With JavaScript, #form-status is used. */
.form__notice {
  display: none;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink);
}
.form__notice:target { display: block; }
.form.is-live .form__notice { display: none; }   /* superseded by #form-status */

/* The select's drawn chevron vanishes in forced colours; use the native arrow. */
@media (forced-colors: active) {
  .field select { appearance: auto; -webkit-appearance: menulist; }
}

/* 12. FOOTER ============================================================= */

.foot {
  padding-block: clamp(3.5rem, 8vh, 6rem) clamp(1.75rem, 4vh, 2.5rem);
  border-top: 1px solid var(--line-soft);
}

/* Brand, line and icons, centred above the link columns. */
.foot__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.foot__mark {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.foot__meta,
.foot__copy {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-text);
}

/* Four columns: Studio, Book, Get in Touch, Legal. */
.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem clamp(1.5rem, 4vw, 3.5rem);
  max-width: 62rem;
  margin: clamp(2.75rem, 6vh, 4rem) auto 0;
  padding-top: clamp(2.25rem, 5vh, 3rem);
  border-top: 1px solid var(--line-soft);
}
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; min-width: 0; }
.foot__title {
  margin-bottom: 0.35rem;
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.foot__col a,
.foot__col span {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.foot__col span { color: var(--ink-soft); }
.foot__col a,
.foot__legal {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s var(--ease);
}
.foot__col a:hover,
.foot__col a:focus-visible,
.foot__col a[aria-current="page"],
.foot__legal:hover,
.foot__legal:focus-visible { background-size: 100% 1px; }

/* Copyright and the legal page, along the bottom edge. */
.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  max-width: 62rem;
  margin: clamp(2.5rem, 6vh, 3.5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}
.foot__legal-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.foot__legal {
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }
  .foot__base { max-width: 34rem; }
}
@media (max-width: 600px) {
  .foot__base { flex-direction: column; text-align: center; }
}
/* Social icons — footer and contact page. 44px targets around 22px marks. */
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}
.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--ink);
  transition: color 0.5s var(--ease), transform 0.5s var(--ease);
}
.social a:hover { color: var(--taupe-text); transform: translateY(-2px); }
.social svg { width: 22px; height: 22px; }

/* Mobile booking bar — phones and tablets lose the header CTA to the burger,
   so booking stays one tap away. main.js slides it in past the hero. */
.cta-bar { display: none; }

/* 12b. SUPPORTING PAGES (pricing, FAQ, privacy, 404) =================== */

/* Page banner — a full-width photograph under the header, in colour or (with
   .banner--mono) black and white, with the brand, the page title and a
   calligraphic line set over its lower part, clear of faces. */
.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 78vh;
  height: 78svh;
  min-height: 26rem;
  max-height: 52rem;
  overflow: hidden;
  overflow: clip;
  background: var(--ink);
  color: var(--ivory);
  text-align: center;
}
.banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.03) brightness(0.88);
}
.banner--mono .banner__img { filter: grayscale(1) contrast(1.08) brightness(0.86); }
/* Shade at the top for the header, and at the foot for the title. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 17, 13, 0.55) 0%, rgba(20, 17, 13, 0) 26%,
    rgba(20, 17, 13, 0) 48%, rgba(20, 17, 13, 0.62) 100%);
  pointer-events: none;
}
.banner__text {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) clamp(3rem, 9vh, 5.5rem);
  text-shadow: 0 1px 22px rgba(20, 17, 13, 0.35);
  animation: hero-in 1.15s var(--ease) both;
}
.banner__brand {
  margin-bottom: 1.1rem;
  padding-left: 0.5em;          /* balances the trailing letter-space */
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}
.banner__title {
  padding-left: 0.16em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 6.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* "Stevo Shots" in each banner opens the Instagram profile. */
.banner__brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  padding: 0.35rem 0;
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.6s var(--ease);
}
.banner__brand a:hover,
.banner__brand a:focus-visible { background-size: 100% 1px; }
.banner__brand svg { flex: none; opacity: 0.9; }

/* The calligraphic line — the one place the script face appears. Its
   swashes reach past the letters, so it keeps side room and wraps early. */
.banner__script {
  padding-inline: 0.5em;
  text-wrap: balance;
  margin-top: 0.9rem;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}

/* Home: the banner fills the first screen and carries the bookings. */
.banner--home {
  height: 100vh;
  height: 100svh;
  min-height: 36rem;
  max-height: none;
}
.banner--home::after {
  background: linear-gradient(180deg,
    rgba(20, 17, 13, 0.5) 0%, rgba(20, 17, 13, 0) 24%,
    rgba(20, 17, 13, 0) 38%, rgba(20, 17, 13, 0.72) 100%);
}
.banner--home .banner__text { padding-bottom: clamp(3rem, 8vh, 5rem); }
.banner--home .banner__script {
  margin: 0 0 0.6rem;
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  line-height: 1.05;
}
.banner--home .banner__title { font-size: clamp(1.15rem, 2.4vw, 1.9rem); letter-spacing: 0.28em; padding-left: 0.28em; }
.banner__sub {
  margin-top: 1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.9;
}
.banner__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1rem 2.25rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  text-shadow: none;
}
/* Light buttons over a photograph. */
.banner .btn--solid { background: var(--ivory); color: var(--ink); }
.banner .btn--solid:hover { background: var(--sand); }
.banner .btn--line { color: var(--ivory); }
.banner .btn--line::after { background: var(--ivory); }
.banner :focus-visible { outline-color: var(--ivory); }

/* Where the couple is in each photograph, so every crop keeps them. */
.banner--home .banner__img            { object-position: 50% 38%; }
.banner--contact .banner__img         { object-position: 50% 55%; }
.banner--pricing .banner__img         { object-position: 64% 30%; }
.banner--faq .banner__img             { object-position: 58% 28%; }
.banner--about .banner__img           { object-position: 45% 30%; }
.banner--terms .banner__img           { object-position: 45% 25%; }
.banner--wedding-inquiry .banner__img { object-position: 50% 58%; }
.banner--family .banner__img          { object-position: 50% 62%; }
.banner--privacy .banner__img         { object-position: 32% 35%; }

/* The intro under a banner needs no room for the fixed header. */
.page-hero--intro { padding-top: clamp(4rem, 10vh, 6.5rem); }

/* Over a banner the header starts light, then takes its usual ivory ground
   once the page scrolls or the menu opens. Without JavaScript the header
   keeps its ivory ground, so it stays ink throughout. */
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) { color: var(--ivory); }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .nav__social a,
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .nav__account { color: var(--ivory); }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .nav__mark,
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .nav__links a { text-shadow: 0 1px 14px rgba(20, 17, 13, 0.4); }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .nav__burger span { background: var(--ivory); }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .nav__cta { background: var(--ivory); color: var(--ink); }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) :focus-visible { outline-color: var(--ivory); }

.page-hero {
  padding: clamp(8rem, 20vh, 12rem) var(--gutter) clamp(3rem, 8vh, 5.5rem);
  text-align: center;
}
.page-hero__title {
  font-size: clamp(2.75rem, 7vw, 6rem);
  margin: 1.5rem auto 2rem;
}
.page-hero .lede { margin-inline: auto; }
.lede a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.page-cta { text-align: center; }
.page-cta .lede { margin: 0 auto 2.5rem; }

/* Rate cards (pricing page) — each service is a band of photo-topped
   columns: base rate, hourly rate and additions, or one column per session. */
.rate--alt { background: var(--champagne); }

.rate__head { text-align: center; margin-bottom: clamp(3rem, 7vh, 5rem); }
.rate__head .lede { margin: 1.75rem auto 0; }

.rate__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem) var(--grid-gap);
}
.rate__cols--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 62rem;
  margin-inline: auto;
}

.rate__col { display: flex; flex-direction: column; }

.rate__fig { overflow: hidden; overflow: clip; margin-bottom: 1.75rem; }
.rate__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: var(--photo-grade);
}

.rate__price {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.rate__price small {
  margin-left: 0.4rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe-text);
}

.rate__label {
  margin: 1rem 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.3;
}

.rate__list { border-top: 1px solid var(--line); }
.rate__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.rate__list li span { flex: none; color: var(--ink); white-space: nowrap; }

.rate__note { margin-top: 1rem; font-size: 0.875rem; color: var(--taupe-text); }

.rate__cta { margin-top: clamp(3rem, 7vh, 4.5rem); text-align: center; }

/* What the hourly model comes to — the sums couples would otherwise do. */
.rate__sums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(3rem, 7vh, 4.5rem);
  border-block: 1px solid var(--line);
  text-align: center;
}
.rate__sums div { padding: 1.75rem 1rem; }
.rate__sums div + div { border-left: 1px solid var(--line-soft); }
.rate__sums dt {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.rate__sums dd {
  margin: 0.6rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.1;
}
.rate__sums dd small {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.rate__sums-note { margin-top: 1.25rem; text-align: center; font-size: 0.875rem; color: var(--ink-soft); }

/* About — the founder: portrait beside a short Q&A, then traditions. */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.founder__fig { overflow: hidden; overflow: clip; }
.founder__fig img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 20%; }
.founder__fig figcaption {
  margin-top: 1.1rem;
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.founder__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.05;
  margin: 1rem 0 0.4rem;
}
.founder__role { font-family: var(--script); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--ink-soft); }
.founder__qa { margin-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--line); }
.founder__qa div { padding-block: 1.5rem; border-bottom: 1px solid var(--line-soft); }
.founder__qa dt { font-family: var(--serif); font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: 0.6rem; }
.founder__qa dd { margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* About — the team: a portrait, role, name, short bio and skills each. */
.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 4.5rem) var(--grid-gap);
}
.member { display: flex; flex-direction: column; gap: 0.7rem; }
.member__fig { overflow: hidden; overflow: clip; margin-bottom: 0.8rem; }
.member__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--photo-grade); }
.member__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.1;
}
.member__bio { color: var(--ink-soft); }
.member__skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
.member__skills li {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.traditions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 56rem;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
}
.traditions li {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Terms and Privacy — numbered sections in a readable column. */
.terms { max-width: 46rem; margin-inline: auto; counter-reset: clause; }
.terms p, .terms li { color: var(--ink-soft); }
.terms p + p { margin-top: 0.9rem; }
.terms ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.terms ul + p { margin-top: 0.9rem; }
.terms a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.section--terms { padding-top: 0; }

/* A numbered section. */
.terms__h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 2.75rem 0 0.85rem;
  counter-increment: clause;
}
.terms__h::before { content: counter(clause, decimal-leading-zero) "\2002"; color: var(--taupe-text); font-size: 0.75em; }

/* A heading inside a section. */
.terms__sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.75rem 0 0.6rem;
}
.terms__sub + p { margin-top: 0; }

.terms__note {
  margin-top: 3rem;
  padding: 1.5rem 1.75rem;
  background: var(--champagne);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* The business behind the terms: a quiet two-column card. */
.terms__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem 0;
  border-block: 1px solid var(--line);
}
.terms__facts div { min-width: 0; }
.terms__facts dt {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.terms__facts dd { margin: 0.2rem 0 0; color: var(--ink); overflow-wrap: anywhere; }

/* Contents: the section titles, numbered like the headings below. */
.terms__toc { margin-bottom: 1rem; }
.terms__toc-title {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe-text);
  margin-bottom: 1rem;
}
.terms__toc ol { counter-reset: toc; }
.terms__toc-list { columns: 2; column-gap: 2.5rem; }
.terms__toc-list li { break-inside: avoid; }
.terms__toc li {
  counter-increment: toc;
  padding: 0.3rem 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.terms__toc li::before { content: counter(toc, decimal-leading-zero) "\2002"; color: var(--taupe-text); font-size: 0.8em; }
.terms .terms__toc a { color: var(--ink); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.5s var(--ease); }
.terms .terms__toc a:hover, .terms .terms__toc a:focus-visible { background-size: 100% 1px; }

.terms__address { font-style: normal; color: var(--ink-soft); line-height: 1.9; }

@media (max-width: 700px) {
  .terms__facts { grid-template-columns: 1fr; }
  .terms__toc-list { columns: 1; }
}
/* Contact page — two inquiry cards, then the studio's details. */
.choose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 4rem) var(--grid-gap);
  max-width: 62rem;
  margin-inline: auto;
}
.choose__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.choose__card .rate__fig { width: 100%; margin-bottom: 0.75rem; }
.choose__card .rate__fig img { transition: transform 1.2s var(--ease), filter 1s var(--ease); }
.choose__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  line-height: 1.1;
}
.choose__note { max-width: 36ch; color: var(--ink-soft); }
.choose__card .btn { margin-top: 0.75rem; }
@media (hover: hover) {
  .choose__card:hover .rate__fig img { filter: var(--photo-grade-hover); transform: scale(1.03); }
  .choose__card:hover .btn--solid { background: var(--ink-soft); }
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem var(--grid-gap);
  padding-block: clamp(2.5rem, 6vh, 4rem);
  border-block: 1px solid var(--line);
  text-align: center;
}
.contact-list .info__block { margin: 0; }
.contact-list + .social { margin-top: clamp(2.5rem, 6vh, 4rem); }

/* Contact map: Google Maps in a fine gold double rule, softened toward the
   champagne palette. It loads only when scrolled near (loading="lazy"). */
.map { max-width: 64rem; margin: clamp(2.5rem, 6vh, 4rem) auto 0; }
.map__frame { position: relative; padding: 10px; background: var(--ivory); border: 1px solid rgba(176, 141, 76, 0.45); }
.map__frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(176, 141, 76, 0.22); pointer-events: none; }
.map__frame iframe { display: block; width: 100%; aspect-ratio: 16 / 7; min-height: 18rem; border: 0; background: var(--sand); filter: grayscale(0.5) sepia(0.12) contrast(0.97); }
.map__cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.5rem 1.5rem; margin-top: 1.1rem; color: var(--ink-soft); font-size: 0.9375rem; text-align: center; }
.map__cap a { color: var(--gold-text); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: underline; text-decoration-color: rgba(176, 141, 76, 0.5); text-underline-offset: 5px; }
.map__cap a:hover { text-decoration-color: var(--gold); }
.map + .social { margin-top: clamp(2.5rem, 6vh, 4rem); }
@media (max-width: 760px) { .map__frame iframe { aspect-ratio: 4 / 3; min-height: 0; } }

.faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.6rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--taupe-text);
}
.faq details[open] summary::after { content: "\2013"; }
.faq__a { max-width: 62ch; padding-bottom: 1.75rem; color: var(--ink-soft); }
.faq__a p + p { margin-top: 0.85rem; }
.faq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.faq-group + .faq-group { margin-top: clamp(3.5rem, 8vh, 5.5rem); }
.faq-group > .eyebrow { max-width: 52rem; margin: 0 auto 1.25rem; }

/* 12b. SUPPORTING PAGES (privacy, 404) ================================== */

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vh, 2rem) var(--gutter);
}

.legal {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(3rem, 9vh, 6rem) var(--gutter) var(--section-y);
}
.legal h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.014em;
  margin: 1.25rem 0 2rem;
}
.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 2.75rem 0 0.75rem;
}
.legal p,
.legal li { color: var(--ink-soft); }
.legal p + p { margin-top: 1rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: 0.6rem; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.missing {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  padding: var(--gutter);
  text-align: center;
}
.missing__title { font-size: clamp(2.5rem, 7vw, 5.5rem); }

/* Offers & Updates (/subscribe) — the sign-up form, its outcome notice and
   the unsubscribe panel (assets/js/subscribe.js). */
.banner--subscribe .banner__img { object-position: 62% 30%; }

.signup { display: grid; gap: clamp(1.75rem, 4vh, 2.5rem); min-width: 0; }

.signup__notice {
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--taupe);
  background: var(--ivory);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}
.signup__notice.is-good { border-left-color: var(--ink); }
.signup__notice:focus { outline: none; }
.signup__notice:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.signup__unsub { display: grid; gap: 1.25rem; }
.signup__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
}
.signup__unsub p { color: var(--ink-soft); }

/* Checkbox groups: a fieldset with the labels' look, square ink boxes. */
.choice {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.choice legend {
  margin-bottom: 0.85rem;
  padding: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.choice legend .opt { letter-spacing: 0.12em; text-transform: none; }
.choice--inline { grid-template-columns: repeat(auto-fit, minmax(10rem, max-content)); gap: 0.9rem 2.25rem; }
.choice--inline legend { grid-column: 1 / -1; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  line-height: 1.6;
  cursor: pointer;
}
.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  border: 1px solid var(--field-line);
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.check input::before {
  content: "";
  width: 0.62rem;
  height: 0.34rem;
  border: solid var(--ivory);
  border-width: 0 0 1.5px 1.5px;
  transform: translateY(-0.08rem) rotate(-45deg) scale(0);
  transition: transform 0.25s var(--ease);
}
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::before { transform: translateY(-0.08rem) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.check input.is-invalid { border-color: var(--taupe-text); box-shadow: 0 0 0 1px var(--taupe-text); }
.check span { color: var(--ink-soft); }
.check:hover input { border-color: var(--ink); }

@media (forced-colors: active) {
  .check input { appearance: auto; -webkit-appearance: checkbox; }
  .check input::before { content: none; }
}

/* 13. REVEAL ANIMATIONS ==================================================
   Everything below is inert until main.js has run and removed `no-js`, so a
   missing or broken script leaves the whole page visible. */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--delay, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Photographs settle in from a slightly wider crop. Filter and opacity keep
   their own transitions so the hover grade and Instagram dimming still ease. */
.reveal img {
  transform: scale(1.05);
  transition: transform 1.6s var(--ease), filter 1.4s var(--ease), opacity 0.8s var(--ease);
}
.reveal.is-in img { transform: none; }

/* The services rows keep their hover indent easing alongside the reveal. */
.svc__row.reveal {
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), padding-left 0.7s var(--ease);
  transition-delay: var(--delay, 0ms), var(--delay, 0ms), 0ms;
}

/* No JS: never leave the page blank. */
.no-js .reveal { opacity: 1; transform: none; }
.no-js .reveal img { transform: none; }

/* 14. RESPONSIVE ========================================================= */

/* Laptops and tablets keep the page titles in the header; only the header
   button steps aside, for the booking bar at the foot of the screen. */
@media (max-width: 1100px) {
  .nav__cta { display: none; }

  .cta-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 80;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(251, 249, 245, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 -1px 0 var(--line-soft);
    transform: translateY(110%);
    transition: transform 0.6s var(--ease);
  }
  .cta-bar.is-shown,
  .no-js .cta-bar { transform: none; }
  .cta-bar__main { flex: 1; padding: 1rem 1.25rem; text-align: center; }
  .cta-bar__alt { padding: 1rem 1.4rem; border: 1px solid var(--ink); color: var(--ink); text-align: center; }

  /* Room for the bar so it never covers the footer. */
  .foot { padding-bottom: calc(clamp(3.5rem, 8vh, 6rem) + 4.5rem); }
}

/* The overlay only exists alongside the burger. */
@media (min-width: 761px) {
  .menu { display: none; }
}

/* Laptop and tablet widths: the titles, five icons (and from 1101px the CTA)
   share one row, so the spacing tightens to keep air between them. */
@media (min-width: 761px) and (max-width: 1400px) {
  /* Centre the titles in the room between wordmark and icons, not on the
     page, so they never crowd the wider right-hand group. */
  .nav__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav__links { gap: 1.4rem; }
  .nav__social { gap: 0; }
  .nav__social a { padding: 0.35rem; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .nav__inner { gap: 0.75rem; }
  .nav__links { gap: 1.1rem; }
  .nav__social a { padding: 0.3rem; }
}
/* Tablets: Threads, Telegram and Email step aside in the header (as on
   phones; the menu and footer keep them) so the titles have room. */
@media (min-width: 761px) and (max-width: 1000px) {
  .nav__social .nav__extra { display: none; }
}

@media (max-width: 900px) {
  /* Stack: the wordmark rejoins as one line above the photograph. */
  .hero__stage { display: flex; flex-direction: column; align-items: center; gap: clamp(1.75rem, 4vh, 2.5rem); }
  .hero__mark { display: flex; align-items: baseline; justify-content: center; }
  .hero__word { font-size: clamp(2.75rem, 12.5vw, 5rem); }
  .hero__word--l, .hero__word--r { grid-area: auto; justify-self: auto; }
  .hero__figure {
    width: min(74vw, 20rem, 42vh);
    width: min(74vw, 20rem, 42svh);
    margin-inline: 0;
  }

  .about__pair { grid-template-columns: repeat(6, 1fr); }
  .about__fig--a { grid-column: 1 / span 4; }
  .about__fig--b { grid-column: 5 / span 2; }

  .contact__cols { grid-template-columns: 1fr; gap: clamp(3rem, 8vh, 5rem); }

  .tiers { grid-template-columns: minmax(0, 34rem); justify-content: center; }

  .rate__cols,
  .rate__cols--2 { grid-template-columns: minmax(0, 34rem); justify-content: center; }
  .rate__fig img { aspect-ratio: 3 / 2; }
  .rate__sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rate__sums div:nth-child(3) { border-left: 0; }
  .rate__sums div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }

  .choose { grid-template-columns: minmax(0, 30rem); justify-content: center; }
  .founder { grid-template-columns: minmax(0, 32rem); justify-content: center; }
  .team { grid-template-columns: minmax(0, 30rem); justify-content: center; }
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .contact-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 4.5rem; }

  /* Phones: the titles move into the burger menu. */
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__social .nav__extra { display: none; }

  /* Gallery becomes a clean vertical sequence — still generous, never cramped. */
  .grid { grid-template-columns: 1fr; gap: clamp(2.75rem, 8vh, 4.5rem); }
  .s--4, .s--5, .s--6, .s--7, .s--12 { grid-column: 1 / -1; }
  .drop { margin-top: 0; }
  .r--wide img { aspect-ratio: 3 / 2; }

  .about__pair { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vh, 4rem); }
  .about__fig--a, .about__fig--b { grid-column: 1 / -1; margin-top: 0; }
  .about__fig--b { width: 72%; margin-inline: auto 0; }

  .svc__row {
    grid-template-columns: 2.75rem 1fr;
    row-gap: 0.65rem;
    align-items: start;
  }
  .svc__note { grid-column: 2; }
  .svc--prices .svc__row { grid-template-columns: 4.25rem 1fr; }
  .experience .svc__row { grid-template-columns: 2.75rem 1fr; }

  .ig__grid { grid-template-columns: repeat(3, 1fr); }

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

  .filters {
    gap: 0.25rem 1.5rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }

  /* The 9–10px editorial labels read as refined on a large screen and as
     simply small on a handset — give them back a little size. */
  .shot figcaption { font-size: 0.75rem; }
  .shot figcaption span { font-size: 0.6875rem; }
  .foot__meta,
  .foot__copy,
  .foot__links { font-size: 0.6875rem; }
}

@media (max-width: 600px) {
  /* Supporting-page header: the icons stay, the text button steps aside. */
  .page-head .btn { display: none; }

  /* Home banner on a phone: a shorter text block, so the couple's faces
     keep the upper half of the screen, and the two buttons on one line. */
  .banner--home .banner__text { padding-bottom: 2.25rem; }
  .banner--home .banner__script { font-size: 2.7rem; margin-bottom: 0.4rem; }
  .banner--home .banner__title { font-size: 0.95rem; letter-spacing: 0.2em; padding-left: 0.2em; }
  .banner__sub { margin-top: 0.7rem; font-size: 0.625rem; letter-spacing: 0.2em; }
  .banner--home .banner__ctas { gap: 0.9rem 1.4rem; margin-top: 1.4rem; }
  .banner--home .btn--solid { padding: 1rem 1.35rem; }
}

@media (max-width: 420px) {
  .nav__social { gap: 0; }
  .nav__social a { padding: 0.35rem; }
  .nav__actions { gap: 0.6rem; }
  .nav__account { padding: 0.35rem; }
  .hero__word { font-size: clamp(2.25rem, 12.5vw, 3.25rem); }
}
/* Small phones: TikTok and YouTube step aside in the header (they stay in the
   menu and footer) so the account icon and the menu button always fit. */
@media (max-width: 390px) {
  .nav__social a[href*="tiktok"], .nav__social a[href*="youtube"] { display: none; }
  .hero__desc { font-size: 0.6875rem; letter-spacing: 0.2em; }
}

/* 15. MOTION & PRINT PREFERENCES ======================================== */

/* Calm by default, still by request. */
@media (prefers-reduced-motion: reduce) {
  html.is-smooth { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__eyebrow, .hero__figure, .hero__foot { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal img { transform: none; }
}

@media print {
  .nav, .menu, .filters, .form, .signup__unsub, .hero__foot, .cta-bar, .lightbox, .chat-root { display: none; }
  body { background: #fff; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal img { transform: none !important; }
  .hero__eyebrow, .hero__figure { animation: none; }
}

/* 16. CHAT ASSISTANT ===================================================== */

/* The floating "Ask us" button and the chat panel (assets/js/chat.js).
   --chat-bottom lifts both above the booking bar while it shows. */
.chat-root {
  --chat-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  --chat-side: max(1.25rem, env(safe-area-inset-right));
}
.chat-root.is-lifted { --chat-bottom: calc(6rem + env(safe-area-inset-bottom)); }

.chat-launcher {
  position: fixed;
  right: var(--chat-side);
  bottom: var(--chat-bottom);
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.3rem 0.85rem 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px rgba(20, 17, 13, 0.6);
  transition: background-color 0.4s var(--ease), bottom 0.6s var(--ease);
}
.chat-launcher svg { width: 18px; height: 18px; flex: none; }
.chat-launcher:hover { background: var(--ink-soft); }
.chat-launcher:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.chat {
  position: fixed;
  right: var(--chat-side);
  bottom: calc(var(--chat-bottom) + 3.6rem);
  z-index: 95;
  width: min(25rem, calc(100vw - 2.5rem));
  height: min(40rem, calc(100vh - var(--chat-bottom) - 9.5rem));
  height: min(40rem, calc(100dvh - var(--chat-bottom) - 9.5rem));
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -25px rgba(20, 17, 13, 0.45);
  font-family: var(--sans);
  transition: bottom 0.6s var(--ease);
}
.chat[hidden] { display: none; }

.chat__head {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.85rem 0.6rem 0.85rem 1.25rem;
  background: var(--ink);
  color: var(--ivory);
}
.chat__heading { flex: 1; min-width: 0; }
.chat__eyebrow {
  margin: 0;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, 0.72);
}
.chat__title {
  margin: 0.1rem 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.15;
}
.chat__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
}
.chat__icon svg { width: 18px; height: 18px; }
.chat__icon:hover { background: rgba(251, 249, 245, 0.12); }
.chat__icon:focus-visible { outline: 2px solid var(--ivory); outline-offset: -3px; }

.chat__log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem 1.1rem 1.2rem;
}
.chat__log:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.chat__notice {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--taupe-text);
}
.chat__notice a, .chat__msg a, .chat__person a { text-decoration: underline; text-underline-offset: 2px; }

.chat__msg {
  position: relative;
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.chat__msg p, .chat__msg ul, .chat__msg ol { margin: 0; }
.chat__msg :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 0.55rem; }
.chat__msg ul, .chat__msg ol { padding-left: 1.2rem; }
.chat__msg ul { list-style: disc; }
.chat__msg ol { list-style: decimal; }
.chat__msg li + li { margin-top: 0.2rem; }
.chat__msg strong { font-weight: 500; }
.chat__msg--assistant {
  align-self: flex-start;
  background: var(--champagne);
  border-radius: 2px 14px 14px 14px;
}
.chat__msg--user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--ivory);
  border-radius: 14px 2px 14px 14px;
  white-space: pre-wrap;
}
.chat__msg--note { background: var(--sand); }

/* "Leave your details": a short form inside the conversation. */
.chat__handoff { width: 100%; max-width: 100%; background: var(--sand); }
.chat__handoff-title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.25; }
.chat__hform { display: grid; gap: 0.7rem; margin-top: 0.8rem; }
.chat__field { display: flex; flex-direction: column; gap: 0.3rem; }
.chat__field label {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.chat__opt { letter-spacing: 0.04em; text-transform: none; color: var(--taupe-text); }
.chat__field input, .chat__field select, .chat__field textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.4;
}
.chat__field textarea { resize: vertical; min-height: 4.5rem; }
.chat__field input:focus, .chat__field select:focus, .chat__field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.chat__field [aria-invalid="true"] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.chat__check { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.82rem; line-height: 1.45; cursor: pointer; }
.chat__check input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--ink); flex: none; }
.chat__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.chat__hstatus { min-height: 0; font-size: 0.82rem; color: var(--ink); }
.chat__hstatus:empty { display: none; }
.chat__fine { font-size: 0.72rem; color: var(--ink-soft); }
.chat__linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.chat__retry {
  display: block;
  justify-self: start;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.chat__retry:hover:not(:disabled) { background: var(--ink-soft); }
.chat__retry:disabled { opacity: 0.5; cursor: progress; }

.chat__chips { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.chat__chips-label {
  margin: 0.15rem 0 0.1rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.chat__chip {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.chat__chip:hover { border-color: var(--ink); background: rgba(20, 17, 13, 0.035); }

.chat__typing {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  gap: 5px;
  padding: 0.95rem 1rem;
  background: var(--champagne);
  border-radius: 2px 14px 14px 14px;
}
.chat__typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--taupe-text);
  animation: chat-dot 1.2s infinite ease-in-out;
}
.chat__typing i:nth-of-type(2) { animation-delay: 0.15s; }
.chat__typing i:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.chat__form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem 0.7rem 0.7rem 1.1rem;
  border-top: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}
.chat__form:focus-within { border-top-color: var(--ink); }
.chat__input {
  flex: 1;
  min-width: 0;
  max-height: 10rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  resize: none;
}
.chat__input:focus { outline: none; }
.chat__input::placeholder { color: var(--taupe-text); opacity: 1; }
.chat__count { align-self: center; font-size: 0.7rem; color: var(--taupe-text); font-variant-numeric: tabular-nums; }
.chat__send {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ivory);
  cursor: pointer;
}
.chat__send svg { width: 18px; height: 18px; }
.chat__send:hover:not(:disabled) { background: var(--ink-soft); }
.chat__send:disabled { opacity: 0.35; cursor: default; }
.chat__send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.chat__person {
  margin: 0;
  padding: 0 1.1rem 0.8rem;
  font-size: 0.74rem;
  color: var(--taupe-text);
}
.chat__person a { color: var(--ink); }

/* Phones: an icon-only button, and the panel fills the screen. */
@media (max-width: 600px) {
  .chat-launcher { padding: 0.95rem; }
  .chat-launcher__label { display: none; }
  .chat {
    inset: 0;
    width: auto;
    height: auto;
    z-index: 120;
    border: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html.chat-open, html.chat-open body { overflow: hidden; }
}

/* 17. ONLINE BOOKING ===================================================== */
/* /book (Choose -> Date & Time -> Details -> Review & Pay) and /booking. */

.banner--book .banner__img { object-position: 50% 58%; }
.section--book { padding-top: 0; }
.page-hero--plain { padding-top: clamp(8.5rem, 20vh, 11rem); }

.book { max-width: 76rem; margin-inline: auto; }
.book__notice {
  padding: 1.1rem 1.4rem;
  border-left: 2px solid var(--taupe);
  background: var(--champagne);
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.book__notice.is-good { border-left-color: var(--ink); color: var(--ink); }
.book__notice:focus { outline: none; }
.book__notice p + p { margin-top: 0.6rem; }
.book__notice a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.book__test {
  margin-bottom: 1.75rem;
  padding: 0.75rem 1.1rem;
  border: 1px dashed var(--taupe);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.book__aside { margin-top: 2rem; font-size: 0.9375rem; color: var(--ink-soft); }
.book__aside a, .book__tz a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Progress: five numbered steps on a hairline. */
.steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 clamp(2.5rem, 6vh, 3.75rem);
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.steps__item {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--taupe-text);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.5;
}
.steps__n { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; text-transform: none; }
.steps__item.is-done { border-top-color: var(--taupe); color: var(--ink-soft); }
.steps__item.is-current { border-top: 2px solid var(--ink); padding-top: calc(0.85rem - 1px); color: var(--ink); }

/* Main column and the order summary beside it. */
.book__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.book__main { min-width: 0; }
.book__step:focus, .book__title:focus { outline: none; }
.book__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 1.75rem;
}
.book__sub {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-text);
}
.book__block { margin-top: clamp(2rem, 5vh, 2.75rem); }
.book__tz { margin-bottom: 1.5rem; color: var(--ink-soft); }
.book__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.25rem, 5vh, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.field__note { margin-top: 0.75rem; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.6; }
.field__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Currency */
.currency { margin: 0 0 clamp(2rem, 5vh, 2.75rem); padding: 1.1rem 1.25rem; border: 1px solid var(--line); min-width: 0; }
.currency legend { padding: 0 0.5rem; font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text); }
.currency__options { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.currency__opt { position: relative; cursor: pointer; }
.currency__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.currency__opt span {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--line);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.currency__opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--ivory); }
.currency__opt input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
.currency__note { margin-top: 0.85rem; font-size: 0.875rem; color: var(--ink-soft); line-height: 1.6; }

/* Packages: selectable cards */
.pkgs { display: grid; gap: 0.75rem; }
.pkgs__group { margin: 1.25rem 0 0.15rem; font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text); }
.pkgs__group:first-child { margin-top: 0; }
.pkg {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  background: var(--ivory);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.pkg:hover { border-color: var(--taupe); }
.pkg:has(input:checked) { border-color: var(--ink); background: var(--champagne); box-shadow: inset 0 0 0 1px var(--ink); }
.pkg input, .time input {
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin: 0.3rem 0 0;
  border: 1px solid var(--field-line);
  border-radius: 50%;
  appearance: none; -webkit-appearance: none;
  display: grid; place-content: center;
  background: transparent;
  cursor: pointer;
}
.pkg input::before, .time input::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink); transform: scale(0); transition: transform 0.25s var(--ease); }
.pkg input:checked::before, .time input:checked::before { transform: scale(1); }
.pkg input:checked, .time input:checked { border-color: var(--ink); }
.pkg input:focus-visible, .time input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.pkg__body { display: grid; gap: 0.35rem; min-width: 0; flex: 1; }
.pkg__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pkg__name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.3; }
.pkg__price { font-size: 0.9375rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkg__summary { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.6; }
.pkg__meta { color: var(--taupe-text); font-size: 0.8125rem; letter-spacing: 0.02em; }

/* Extras */
.extras { display: grid; gap: 1rem; }
.extra { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.extra small { color: var(--taupe-text); font-size: 0.8125rem; }
.extra strong { font-weight: 500; color: var(--ink); }
.extra__qty {
  flex: none; width: 4.25rem; padding: 0.35rem 0.5rem;
  font: inherit; font-size: 0.9375rem; color: var(--ink);
  background: transparent; border: 1px solid var(--field-line); border-radius: 0;
}
.extra__qty:disabled { opacity: 0.4; }
.extras__note { color: var(--ink-soft); font-size: 0.9375rem; }

/* Radio and tick boxes inside .check: radios are round. */
.check input[type="radio"] { border-radius: 50%; }
.check input[type="radio"]::before { width: 0.5rem; height: 0.32rem; }

/* Calendar */
.cal { border: 1px solid var(--line); padding: clamp(1rem, 2.5vw, 1.5rem); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal__month { font-family: var(--serif); font-size: 1.35rem; }
.cal__nav {
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 1.1rem; cursor: pointer;
  transition: border-color 0.3s var(--ease);
}
.cal__nav:hover:not(:disabled) { border-color: var(--ink); }
.cal__nav:disabled { opacity: 0.3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.cal__dow { text-align: center; font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-text); padding-bottom: 0.4rem; }
.cal__day {
  aspect-ratio: 1;
  min-height: 2.5rem;
  border: 1px solid transparent;
  background: transparent;
  font: inherit; font-size: 0.9375rem;
  color: var(--taupe);
  cursor: default;
}
.cal__day.is-open { color: var(--ink); border-color: var(--line); background: var(--ivory); cursor: pointer; font-weight: 500; }
.cal__day.is-open:hover { border-color: var(--ink); }
.cal__day.is-selected { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.cal__day:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cal__status { margin-top: 0.9rem; font-size: 0.8125rem; color: var(--taupe-text); }
.times { margin-top: clamp(1.75rem, 4vh, 2.25rem); }
.times__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.6rem; }
.time {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.8rem 0.9rem; border: 1px solid var(--line); cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.time:hover { border-color: var(--taupe); }
.time:has(input:checked) { border-color: var(--ink); background: var(--champagne); }
.time span { display: grid; gap: 0.1rem; }
.time strong { font-weight: 500; }
.time small { font-size: 0.75rem; color: var(--taupe-text); }

/* Review */
.hold { margin-bottom: 1.5rem; padding: 0.9rem 1.15rem; background: var(--champagne); font-size: 0.9375rem; color: var(--ink-soft); }
.hold strong { color: var(--ink); font-weight: 500; }
.hold__left { font-variant-numeric: tabular-nums; }
.hold.is-over { border-left: 2px solid var(--taupe-text); display: grid; gap: 0.9rem; justify-items: start; }
.review { display: grid; border-top: 1px solid var(--line); }
.review__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
.review dt { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-text); padding-top: 0.2rem; }
.review dd { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); overflow-wrap: anywhere; }
.review dd a { text-decoration: underline; text-underline-offset: 3px; }
.review__edit { flex: none; align-self: flex-start; background: none; border: 0; padding: 0; font: inherit; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.review__edit:hover { color: var(--ink); }
.conversion { padding: 1.1rem 1.25rem; border: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-soft); }
.policy__list { display: grid; gap: 0.6rem; padding-left: 1.1rem; list-style: disc; color: var(--ink-soft); font-size: 0.9375rem; }
.policy__list a, .consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent em { font-style: normal; color: var(--taupe-text); }

/* Pay */
.pay { margin-top: clamp(2rem, 5vh, 2.75rem); display: grid; gap: 1rem; justify-items: start; }
.pay__btn { min-width: min(100%, 22rem); padding-block: 1.15rem; }
.pay__btn:disabled { opacity: 0.55; cursor: progress; }
.pay__note { font-size: 0.8125rem; color: var(--ink-soft); max-width: 38rem; line-height: 1.6; }
.paylogos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.paylogos img { display: block; width: 3.5rem; height: auto; aspect-ratio: 76 / 48; }

/* Session location: Google Maps suggestions, then the chosen place on a map. */
.place__box { position: relative; }
.place__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.35rem); margin: 0; padding: 0.35rem 0; list-style: none; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(20, 17, 13, 0.12); max-height: 22rem; overflow-y: auto; }
.place__opt { display: grid; gap: 0.1rem; padding: 0.7rem 1rem; cursor: pointer; }
.place__opt strong { font-weight: 500; color: var(--ink); font-size: 0.9375rem; }
.place__opt span { font-size: 0.8125rem; color: var(--ink-soft); }
.place__opt:hover, .place__opt.is-active { background: var(--champagne, #F2EBE1); }
.place__credit { padding: 0.45rem 1rem 0.2rem; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--taupe-text); text-align: right; }
.place__map { margin: 1rem 0 0; border: 1px solid var(--line); background: #fff; }
.place__map img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 300; object-fit: cover; background: #EEE9E1; }
.place__map figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 1rem; padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--ink-soft); }
.place__map figcaption a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Choosing how to pay: card (Stripe), PayPal or Interac e-Transfer. */
.paymethod__list { display: grid; gap: 0.6rem; }
.paymethod__item { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.95rem 1.1rem; border: 1px solid var(--line); cursor: pointer; transition: border-color 0.2s; }
.paymethod__item:hover { border-color: var(--taupe); }
.paymethod__item:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.paymethod__item input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--ink); }
.paymethod__item input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.paymethod__text { display: grid; gap: 0.2rem; min-width: 0; }
.paymethod__text strong { font-weight: 500; color: var(--ink); }
.paymethod__text small { font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.5; }
.cardform { padding: 1.25rem 1.35rem; border: 1px solid var(--line); background: #fff; }
.cardform__field { min-height: 3rem; }
.cardform__secure { margin-top: 0.85rem; font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.55; }
.cardform__secure::before { content: ""; display: inline-block; width: 0.7rem; height: 0.8rem; margin-right: 0.45rem; vertical-align: -0.05rem; border: 1.5px solid currentColor; border-radius: 2px 2px 3px 3px; box-shadow: inset 0 0.25rem 0 -0.1rem transparent; }
.etransfer { padding: 1.25rem 1.35rem; border: 1px solid var(--ink); }
.etransfer__note { margin-top: 0.85rem; font-size: 0.875rem; color: var(--ink-soft); }
.payments__receipt { display: block; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--ink-soft); font-style: normal; }
a.payments__receipt { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Order summary: stays in view beside the steps; a fold-out bar on phones. */
.summary { position: sticky; top: 6rem; min-width: 0; }
.summary__box { border: 1px solid var(--line); background: var(--ivory); }
.summary__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text);
}
.summary__head::-webkit-details-marker { display: none; }
.summary__total { font-family: var(--serif); font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary__body { padding: 0 1.25rem 1.25rem; border-top: 1px solid var(--line-soft); }
.summary__empty, .summary__when { padding-top: 1rem; color: var(--ink-soft); font-size: 0.9375rem; }
.summary__when { color: var(--ink); }
.summary__lines { display: grid; gap: 0.55rem; padding-top: 1rem; font-size: 0.875rem; }
.summary__lines div { display: flex; justify-content: space-between; gap: 1rem; }
.summary__lines dt { color: var(--ink-soft); }
.summary__lines dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.summary__lines .is-sub { padding-top: 0.55rem; border-top: 1px solid var(--line-soft); }
.summary__lines .is-total { padding-top: 0.55rem; border-top: 1px solid var(--line); font-weight: 500; color: var(--ink); }
.summary__lines .is-total dt { color: var(--ink); }
.summary__lines .is-today dt, .summary__lines .is-today dd { color: var(--ink); font-weight: 500; }
.summary__note { margin-top: 1rem; font-size: 0.75rem; color: var(--taupe-text); line-height: 1.6; }

/* /booking */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.payments { display: grid; gap: 0.5rem; padding: 0; list-style: none; }
.payments li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9375rem; }
.payments strong { font-weight: 500; white-space: nowrap; }
.manage .book__notice .btn { margin-top: 0.25rem; }
.terms__archived { max-width: 40rem; margin: 0 auto 1.25rem; padding: 0.8rem 1.1rem; border: 1px dashed var(--taupe); font-size: 0.875rem; color: var(--ink-soft); }
.terms__archived a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .book__cols { grid-template-columns: minmax(0, 1fr); }
  .summary { position: sticky; top: auto; bottom: 0; order: -1; z-index: 5; margin-inline: calc(var(--gutter) * -1); }
  .summary__box { border-inline: 0; box-shadow: 0 -1px 0 var(--line-soft); }
  .summary__head { padding-inline: var(--gutter); }
  .summary__body { padding-inline: var(--gutter); }
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.4rem; }
  .steps__label { display: none; }
  .steps__item.is-current .steps__label { display: block; position: absolute; margin-top: 2.6rem; }
  .steps { position: relative; padding-bottom: 1.6rem; }
}
@media (max-width: 600px) {
  .review__row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .book__nav { flex-wrap: wrap-reverse; }
  .book__nav .btn--solid { width: 100%; text-align: center; }
  .pay__btn { width: 100%; }
  .cal__day { min-height: 2.4rem; font-size: 0.875rem; }
}
@media print {
  .nav, .menu, .foot, .chat-launcher, .chat-root, #changes, #pay, .actions, .steps { display: none !important; }
  .book__cols { grid-template-columns: 1fr; }
  .summary { position: static; }
}

/* Receipt (/receipt): a printable document. */
.receipt-section { padding-top: clamp(7rem, 14vh, 9rem); }
.receipt { max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem); background: #fff; border: 1px solid var(--line); }
.receipt:focus { outline: none; }
.receipt__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.receipt__mark { font-family: var(--serif, Georgia, serif); font-size: 1.6rem; letter-spacing: 0.02em; color: var(--ink); }
.receipt__seller { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); }
.receipt__meta { text-align: right; }
.receipt__title { font-family: var(--serif, Georgia, serif); font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 400; color: var(--ink); }
.receipt__no { margin-top: 0.25rem; font-size: 0.875rem; color: var(--ink-soft); }
.receipt__sub { margin: 1.75rem 0 0.5rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: var(--taupe-text); }
.receipt__rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9375rem; }
.receipt__rows dt { color: var(--ink-soft); }
.receipt__rows dd { margin: 0; text-align: right; color: var(--ink); overflow-wrap: anywhere; }
.receipt__rows .is-strong dt, .receipt__rows .is-strong dd { color: var(--ink); font-weight: 500; }
.receipt__rows--money dd { white-space: nowrap; }
.receipt__note { margin-top: 1rem; font-size: 0.8125rem; color: var(--ink-soft); }
.receipt__foot { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-soft); }
.receipt__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.receipt__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1.5rem auto 0; max-width: 46rem; }
.receipt-section .book__test { max-width: 46rem; margin: 0 auto 1rem; }
@media (max-width: 560px) {
  .receipt__meta { text-align: left; }
  .receipt__rows > div { flex-direction: column; gap: 0.15rem; }
  .receipt__rows dd { text-align: left; }
}
@media print {
  .receipt-section { padding: 0; }
  .receipt { border: 0; padding: 0; max-width: none; }
  .receipt__actions, .cta-bar, .skip-link { display: none !important; }
}
/* 18. CLIENT ACCOUNTS (/account) ======================================== */
.acct-note { margin: 0 0 1.75rem; padding: 0.85rem 1.1rem; background: var(--champagne, #F2EBE1); font-size: 0.875rem; color: var(--ink-soft); }
.acct-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct-section { padding-top: clamp(7rem, 14vh, 9.5rem); }
.acct { max-width: 62rem; margin: 0 auto; }
.acct__loading { text-align: center; color: var(--ink-soft); }
.acct__card { max-width: 30rem; margin: 0 auto; padding: clamp(1.75rem, 5vw, 3rem); background: #fff; border: 1px solid var(--line); }
.acct__card--wide { max-width: 40rem; }
.acct__eyebrow { text-align: center; }
.acct__title { font-family: var(--serif); font-size: clamp(1.9rem, 4.5vw, 2.6rem); font-weight: 400; line-height: 1.15; text-align: center; color: var(--ink); }
.acct__title:focus { outline: none; }
.acct__lede { margin: 0.75rem auto 2rem; max-width: 30rem; text-align: center; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.65; }
.acct__form { display: grid; gap: 1.6rem; }
.acct__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.5rem; }
.acct__btn { width: 100%; justify-content: center; padding-block: 1.05rem; }
.acct__btn + .acct__btn { margin-top: 0.75rem; }
.acct__aside { font-size: 0.875rem; color: var(--ink-soft); text-align: center; }
.acct__aside a, .linkbtn { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.linkbtn:disabled { opacity: 0.5; cursor: default; }
.acct__or { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1rem; font-size: 0.8125rem; color: var(--ink-soft); }
.acct__or::before, .acct__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acct__checks { gap: 1rem; }
.acct .field label.check { margin-bottom: 0; font-size: 0.875rem; letter-spacing: normal; text-transform: none; color: var(--ink-soft); line-height: 1.6; }
.acct .field label.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct .field label.check em { font-style: normal; color: var(--taupe-text); }
.opt { letter-spacing: 0.05em; text-transform: none; color: var(--ink-soft); }

/* Progress: details -> verify -> created */
.acct__steps { display: flex; justify-content: center; gap: 0.5rem 1.25rem; flex-wrap: wrap; margin: 0 0 1.75rem; padding: 0; list-style: none; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.acct__steps li { display: flex; align-items: center; gap: 0.45rem; }
.acct__steps span { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line); font-size: 0.75rem; }
.acct__steps .is-current { color: var(--ink); font-weight: 500; }
.acct__steps .is-current span { background: var(--ink); border-color: var(--ink); color: var(--ivory, #FBF9F5); }
.acct__steps .is-done span { border-color: var(--ink); color: var(--ink); }

/* Password field with Show / Hide, and its live requirements */
.pw { position: relative; }
.pw input { padding-right: 3.5rem; }
.pw__toggle { position: absolute; right: 0; top: -0.15rem; background: none; border: 0; padding: 0.2rem 0; font: inherit; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-text); cursor: pointer; }
.pw__toggle:hover, .pw__toggle:focus-visible { color: var(--ink); }
.pwrules { display: grid; gap: 0.35rem; margin: 0.85rem 0 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--ink-soft); }
.pwrules li { display: flex; align-items: center; gap: 0.55rem; }
.pwrules li::before { content: ""; flex: none; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid var(--taupe); }
.pwrules li.is-ok { color: #2F6B3A; }
.pwrules li.is-ok::before { content: "\2713"; display: grid; place-items: center; font-size: 0.65rem; color: #fff; background: #2F6B3A; border-color: #2F6B3A; }
.pwrules li.is-bad { color: #A12A1C; }
.pwrules li.is-bad::before { border-color: #A12A1C; }

/* 6-digit code */
.code { border: 0; padding: 0; margin: 0; }
.code legend { width: 100%; margin-bottom: 0.85rem; text-align: center; font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text); }
.code__boxes { display: flex; justify-content: center; gap: clamp(0.35rem, 1.5vw, 0.6rem); }
.code__box { width: clamp(2.4rem, 11vw, 3rem); height: clamp(2.9rem, 13vw, 3.5rem); text-align: center; font-family: var(--serif); font-size: 1.6rem; color: var(--ink); background: #F6F3EE; border: 0; border-bottom: 2px solid var(--field-line, rgba(20,17,13,0.25)); border-radius: 0; }
.code__box:focus { outline: 2px solid transparent; border-bottom-color: var(--ink); background: #fff; }

/* Welcome */
.acct__welcome { text-align: center; }
.acct__mark { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.6rem; }

/* My Account */
.acct__home { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.acct__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem; }
.acct__head .acct__title, .acct__head .acct__lede, .acct__head .acct__eyebrow { text-align: left; margin-left: 0; }
.acct__head .acct__lede { margin: 0.5rem 0 0; }
.acct__headbtns { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.acct__panel { padding: clamp(1.25rem, 3.5vw, 2rem); background: #fff; border: 1px solid var(--line); }
.acct__sub { margin-bottom: 1.25rem; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text); }
.acct__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; }
.acct__empty { color: var(--ink-soft); }
.acct__empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.bk { padding: 1.1rem 0; border-top: 1px solid var(--line-soft); display: grid; gap: 0.35rem; }
.bk:first-child { border-top: 0; padding-top: 0; }
.bk__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.bk__title { font-family: var(--serif); font-size: 1.25rem; font-weight: 400; }
.bk__pill { flex: none; padding: 0.15rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; color: var(--ink-soft); }
.bk__pill--confirmed, .bk__pill--completed { border-color: #2F6B3A; color: #2F6B3A; }
.bk__pill--cancelled, .bk__pill--conflict { border-color: #A12A1C; color: #A12A1C; }
.bk__when { color: var(--ink); }
.bk__meta, .bk__pay { font-size: 0.875rem; color: var(--ink-soft); }
.bk__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin-top: 0.5rem; font-size: 0.875rem; }
.bk__links a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn--small { padding: 0.6rem 1rem; font-size: 0.6875rem; }
.acct__close { margin-top: 1.75rem; font-size: 0.875rem; color: var(--ink-soft); }
.acct__close summary { cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.acct__close p { margin: 0.75rem 0 1rem; }
@media (max-width: 760px) {
  .acct__grid, .acct__cols { grid-template-columns: minmax(0, 1fr); }
  .acct__card { border: 0; padding-inline: 0; background: transparent; }
}

/* ==========================================================================
   Website editing, new pages and client galleries
   ========================================================================== */

/* An announcement the owner can switch on (Website Settings). */
.announce { position: relative; z-index: 60; padding: 0.6rem var(--gutter); background: var(--ink); color: var(--ivory); text-align: center; font-size: 0.8125rem; letter-spacing: 0.04em; }
.announce a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
body.has-announce .nav:not(.is-stuck) { top: 2.6rem; }

/* Shown only in the dashboard's preview. */
.preview-ribbon { position: fixed; left: 50%; bottom: 1rem; z-index: 200; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 2rem); padding: 0.65rem 1.1rem; background: #7A4B00; color: #fff; font-size: 0.8125rem; text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.2); }

/* Links under a section. */
.sec-foot { margin-top: clamp(2.5rem, 6vh, 4rem); text-align: center; }
.collections__more .btn + .btn { margin-left: 1.25rem; }
.page-cta__alt { margin-top: 1.75rem; font-size: 0.875rem; color: var(--ink-soft); }
.page-cta__alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Client reviews (hidden until there are real ones). */
.reviews__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.review { margin: 0; padding: clamp(1.75rem, 3.5vw, 2.5rem); background: var(--ivory); border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 1.5rem; }
.review__quote { margin: 0; font-family: var(--serif); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.review__quote::before { content: "\201C"; display: block; font-size: 2.6rem; line-height: 0.6; color: var(--taupe); margin-bottom: 0.75rem; }
.review__by { display: grid; gap: 0.2rem; margin-top: auto; }
.review__name { font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; }
.review__meta { font-size: 0.8125rem; color: var(--taupe-text); }

/* Services. */
.svc-detail__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.svc-detail__label { margin-bottom: 1.25rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.8vw, 1.45rem); }
.svc-detail__facts { margin: 0; border-top: 1px solid var(--line); }
.svc-detail__facts div { padding-block: 1.1rem; border-bottom: 1px solid var(--line-soft); }
.svc-detail__facts dt { font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-text); }
.svc-detail__facts dd { margin: 0.35rem 0 0; color: var(--ink); }
.svc-detail__facts a, .rate__sums-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rate__cta .btn + .btn { margin-left: 1.25rem; }

/* Find Your Session (needs JavaScript: hidden without it). */
.guide { display: none; max-width: 52rem; margin-inline: auto; }
.guide.is-ready { display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); }
.guide__form { display: grid; gap: 1.75rem; }
.guide__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.guide__q legend { margin-bottom: 0.9rem; font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.35rem); }
.guide__q label { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0.6rem 0.6rem 0; padding: 0.7rem 1.1rem; border: 1px solid var(--line); background: var(--ivory); cursor: pointer; font-size: 0.9375rem; }
.guide__q label:has(input:checked) { border-color: var(--ink); background: #fff; }
.guide__q input { accent-color: var(--ink); }
.guide__result { padding: clamp(1.5rem, 4vw, 2.5rem); background: #fff; border: 1px solid var(--line); text-align: center; }
.guide__name { margin-top: 0.5rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.guide__price { margin-top: 0.35rem; font-size: 1.05rem; }
.guide__note { margin-top: 0.5rem; color: var(--ink-soft); }
.guide__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }

/* The Experience: preparation guide. */
.prep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.prep__item { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.prep__name { margin-bottom: 0.6rem; font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.prep__item p { color: var(--ink-soft); }
.rate__list--center { max-width: 40rem; margin-inline: auto; }
.rate__list--center li { justify-content: center; text-align: center; }

.banner--portfolio .banner__img { object-position: 50% 45%; }

/* Client galleries: opening one. */
.section--tight { padding-top: 0; }
.gal-open { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); max-width: 60rem; margin-inline: auto; align-items: start; }
.gal-open__form { grid-template-columns: minmax(0, 1fr); }
.gal-open__side { display: grid; gap: 0.85rem; justify-items: start; padding: clamp(1.5rem, 3vw, 2rem); background: var(--champagne); }
.gal-open__side p:not(.eyebrow) { color: var(--ink-soft); }
.field__note { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--taupe-text); }

/* A gallery. */
.gallery { padding-top: clamp(7.5rem, 18vh, 10rem); padding-bottom: var(--section-y); min-height: 70vh; }
.gallery__state { text-align: center; color: var(--ink-soft); padding-block: 3rem; }
.gallery__lock { max-width: 30rem; margin-inline: auto; grid-template-columns: minmax(0, 1fr); text-align: center; }
.gallery__lock-title { font-size: clamp(2rem, 4vw, 2.75rem); }
.gallery__lock-note { color: var(--ink-soft); }
.gallery__lock .field { text-align: left; }
.gallery__lock .form__foot { justify-content: center; flex-wrap: wrap; gap: 1rem; }
.gallery__head { text-align: center; margin-bottom: clamp(2.5rem, 6vh, 4rem); display: grid; gap: 0.75rem; justify-items: center; }
.gallery__title { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.gallery__message { max-width: 60ch; color: var(--ink-soft); white-space: pre-line; }
.gallery__meta { font-size: 0.8125rem; color: var(--taupe-text); }
.gallery__tools { display: flex; gap: 1.5rem; justify-content: center; margin-top: 0.5rem; }
.gallery__grid { columns: 3 18rem; column-gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.gallery__item { position: relative; break-inside: avoid; margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem); }
.gallery__open { display: block; width: 100%; padding: 0; border: 0; background: var(--sand); cursor: zoom-in; }
.gallery__open img { width: 100%; height: auto; }
.gallery__heart { position: absolute; right: 0.5rem; bottom: 0.5rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(251, 249, 245, 0.92); color: var(--ink); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.gallery__heart.is-on { background: var(--ink); color: var(--ivory); }
.gallery__empty { column-span: all; padding: 3rem 0; text-align: center; color: var(--ink-soft); }
.lightbox__actions { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); display: flex; gap: 0.75rem; }
.lightbox__actions .btn { background: var(--ivory); color: var(--ink); white-space: nowrap; }

@media (max-width: 900px) {
  .svc-detail__cols, .gal-open { grid-template-columns: minmax(0, 1fr); }
  .prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .prep { grid-template-columns: minmax(0, 1fr); }
  .rate__cta .btn + .btn, .collections__more .btn + .btn { margin: 1rem 0 0; }
  .rate__cta, .collections__more { display: flex; flex-direction: column; align-items: center; }
  .guide__q label { display: flex; margin-right: 0; }
  .gallery__grid { columns: 2 9rem; }
}

/* 19. READABILITY (18 Oct 2026) ===========================================
   One layer over everything above, so it can be reviewed (or removed) as a
   whole: body text 16-18px, uppercase labels and buttons no smaller than
   13px with calmer letter-spacing, Bodoni a touch heavier so its hairlines
   survive small sizes and photographs, the home heading in the readable
   italic serif instead of the script (the script stays for short accents in
   the page banners), banners that grow with their text instead of clipping
   it, a stronger shade behind white text, and a lighter phone header (the
   social icons stay in the menu and the footer). */

:root {
  --label-size: 0.8125rem;    /* 13px: the smallest uppercase text */
  --label-track: 0.12em;
}

/* Body text: 16px on phones rising to 18px, comfortable line spacing. */
body {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.7;
  letter-spacing: 0.005em;
}
main p, main li, main dd { text-wrap: pretty; overflow-wrap: break-word; }

/* Headings: the same Bodoni, one weight heavier, a little more line height. */
.display { font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.display em { font-weight: 500; }
.sec-head__title { font-size: clamp(2.25rem, 1.35rem + 4.2vw, 4.75rem); }
.page-hero__title { font-size: clamp(2.25rem, 1.35rem + 4.2vw, 4.75rem); }
.lede {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.7;
}
.sec-head .lede { margin-top: 1.25rem; }

/* Uppercase labels: one readable size and spacing everywhere. */
.eyebrow, .skip-link, .menu__more, .menu__foot,
.about__name, .about__fig figcaption, .filters__btn, .shot figcaption span, .lightbox__cap,
.svc__num, .tier__price small, .tier__from, .info__label, .field label,
.foot__copy, .foot__title, .foot__legal,
.rate__price small, .rate__sums dt, .founder__fig figcaption, .member__skills li, .traditions li,
.terms__sub, .terms__facts dt, .terms__toc-title, .choice legend,
.chat__eyebrow, .chat__field label, .chat__retry, .chat__chips-label,
.steps__item, .book__sub, .currency legend, .pkgs__group, .review dt, .review__edit,
.summary__head, .receipt__sub, .code legend, .acct__sub, .review__name, .svc-detail__facts dt {
  font-size: var(--label-size);
  letter-spacing: var(--label-track);
}
.eyebrow, .info__label, .field label, .foot__title, .terms__facts dt, .rate__sums dt { font-weight: 500; }
.cal__dow { font-size: 0.75rem; letter-spacing: 0.06em; }
.foot__meta, .foot__links { font-size: 0.875rem; }
.field input, .field select, .field textarea { font-size: 1rem; font-weight: 400; }

/* Buttons: 13px labels, calmer spacing, comfortable tap size. */
.btn { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.3; }
.btn--solid { padding: 1.05rem 2rem; letter-spacing: 0.1em; }
.btn--pill { padding: 0.8rem 1.4rem; font-size: 0.75rem; letter-spacing: 0.08em; }
.chat-launcher { font-size: 0.75rem; letter-spacing: 0.08em; }

/* Page banners grow with their text (never clip it) and shade the lower part
   so white text stays readable on bright and dark parts of the photograph. */
.banner {
  height: auto;
  min-height: clamp(26rem, 78vh, 52rem);
  min-height: clamp(26rem, 78svh, 52rem);
  max-height: none;
  padding-top: 6rem;          /* clear of the fixed header */
}
.banner::after {
  background: linear-gradient(180deg,
    rgba(20, 17, 13, 0.5) 0%, rgba(20, 17, 13, 0) 22%,
    rgba(20, 17, 13, 0) 38%, rgba(20, 17, 13, 0.55) 66%, rgba(20, 17, 13, 0.82) 100%);
}
.banner__text {
  width: 100%;
  max-width: 56rem;
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(2.75rem, 7vh, 4.5rem);
  text-shadow: 0 1px 2px rgba(20, 17, 13, 0.35), 0 2px 24px rgba(20, 17, 13, 0.45);
}
.banner__brand {
  margin-bottom: 0.85rem;
  padding-left: 0.22em;
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.22em;
}
.banner__title {
  padding-left: 0.06em;
  font-weight: 500;
  font-size: clamp(1.85rem, 1.05rem + 4.2vw, 4.25rem);
  line-height: 1.12;
  letter-spacing: 0.06em;
  text-wrap: balance;
}
.banner__script { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); line-height: 1.25; }

/* Home: brand label, then the main heading in the italic serif, then the
   supporting lines, then the two clearly separated actions. */
.banner--home {
  height: auto;
  min-height: max(36rem, 100vh);
  min-height: max(36rem, 100svh);
}
.banner--home::after {
  background: linear-gradient(180deg,
    rgba(20, 17, 13, 0.45) 0%, rgba(20, 17, 13, 0) 20%,
    rgba(20, 17, 13, 0) 34%, rgba(20, 17, 13, 0.5) 58%, rgba(20, 17, 13, 0.85) 100%);
}
.banner--home .banner__text { max-width: 62rem; padding-bottom: clamp(3rem, 8vh, 5rem); }
.banner--home .banner__script {
  margin: 0 0 1rem;
  padding-inline: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 1.5rem + 5.4vw, 5.75rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.banner--home .banner__title {
  padding-left: 0.16em;
  font-family: var(--sans);
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
}
.banner__sub {
  margin-top: 0.4rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-transform: none;
  opacity: 1;
}
.banner__ctas { gap: 1rem 2rem; margin-top: clamp(1.5rem, 4vh, 2.25rem); }
.banner--home .btn--solid { padding: 1.05rem 2rem; }

/* Phones: the heading wraps into two balanced lines, the actions stack, and
   the text block ends above the floating chat button. */
@media (max-width: 600px) {
  .banner { padding-top: 5rem; }
  .banner--home .banner__text { padding-bottom: 5.5rem; }
  .banner--home .banner__script { margin-bottom: 0.85rem; }
  .banner--home .banner__ctas { flex-direction: column; gap: 1.1rem; margin-top: 1.6rem; }
  .banner--home .btn--solid { padding: 1rem 1.75rem; }
  .banner__sub { margin-top: 0.35rem; }
}
/* Landscape phones: a short screen, so the home banner simply grows. */
@media (max-height: 500px) and (orientation: landscape) {
  .banner--home .banner__text { padding-bottom: 2rem; }
  .banner--home .banner__script { font-size: clamp(2.2rem, 1.2rem + 3.5vw, 3.25rem); }
}

/* Phone header: wordmark, account and menu only; the social icons live in
   the menu and the footer. */
@media (max-width: 760px) {
  .nav__social { display: none; }
  .nav__actions { gap: 0.4rem; }
  .nav__account { padding: 0.6rem; }
  .nav__mark { font-size: 1.25rem; }
  .menu__more, .menu__foot { letter-spacing: 0.08em; }
}

/* Phones and tablets: while the booking bar shows, the chat button sits at
   its right-hand end instead of floating over the text. */
@media (max-width: 1100px) {
  .cta-bar { padding-right: calc(var(--gutter) + 3.6rem); }
  .chat-root.is-lifted .chat-launcher { bottom: calc(0.85rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .cta-bar { gap: 0.5rem; }
  .cta-bar__main, .cta-bar__alt { padding: 0.95rem 0.8rem; font-size: 0.75rem; letter-spacing: 0.06em; }
}

/* The long studio introduction reads more easily left-aligned on a phone. */
@media (max-width: 600px) {
  .about__story { text-align: center; }
}

/* Balanced line breaks for the short hero lines. */
.banner__title, .banner__sub, .banner__brand { text-wrap: balance; }

/* Small, short phones (iPhone SE size): the text stays on the photograph,
   just more compact, so the couple's faces keep the upper part. */
@media (max-width: 600px) and (max-height: 760px) and (orientation: portrait) {
  .banner--home .banner__text { padding-bottom: 5rem; }
  .banner--home .banner__brand { margin-bottom: 0.5rem; }
  .banner--home .banner__script { font-size: clamp(2.15rem, 1.35rem + 4.4vw, 2.5rem); margin-bottom: 0.55rem; }
  .banner--home .banner__title { font-size: 0.8125rem; }
  .banner__sub { font-size: 0.9375rem; }
  .banner--home .banner__ctas { margin-top: 1.1rem; gap: 0.8rem; }
  .banner--home .btn--solid { padding: 0.9rem 1.5rem; }
}

/* The header's booking pill stays on one line; paragraphs keep a comfortable
   measure (about 60-68 characters) on wide screens. */
.nav__cta, .btn--pill { white-space: nowrap; }
.lede { max-width: 58ch; }

/* Enlarged text (browser text size up to 200%) and narrow screens: nothing
   may push the page wider than the screen. Grid columns can shrink below
   their longest word, and long words, addresses and labels wrap. */
main h1, main h2, main h3, .info__value, .svc__note { overflow-wrap: break-word; }
main a, main label, main figcaption, main span, main dt, main dd { overflow-wrap: anywhere; }
main .shot, main figure, .check, .check > * { min-width: 0; }
.btn--solid, .btn--line { max-width: 100%; white-space: normal; }
.rate__list li { flex-wrap: wrap; }
.rate__list li span { white-space: normal; }

@media (min-width: 761px) {
  .svc__row { grid-template-columns: min(4.5rem, 14%) minmax(min(11rem, 28%), 20%) minmax(0, 1fr); }
  .experience .svc__row { grid-template-columns: min(4.5rem, 14%) minmax(min(14rem, 32%), 34%) minmax(0, 1fr); }
  .svc--prices .svc__row { grid-template-columns: min(5.5rem, 16%) minmax(min(11rem, 28%), 20%) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .contact__cols { grid-template-columns: minmax(0, 1fr); }
  .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* Phone header: padding and wordmark capped against the screen width. */
  .nav__inner { padding-inline: min(var(--gutter), 6vw); gap: 0.5rem; }
  .nav__mark { font-size: min(1.25rem, 6vw); white-space: nowrap; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .svc__row,
  .experience .svc__row { grid-template-columns: minmax(2.75rem, auto) minmax(0, 1fr); }
  .svc--prices .svc__row { grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .contact-list { grid-template-columns: minmax(0, 1fr); }
}

/* 20. WEDDING ALBUMS (/albums) ========================================== */

/* Which part of a cover photo a cropped frame keeps (albums.json: coverPosition). */
.album-pos--top    { object-position: 50% 15%; }
.album-pos--upper  { object-position: 50% 32%; }
.album-pos--center { object-position: 50% 50%; }
.album-pos--lower  { object-position: 50% 70%; }
.album-pos--left   { object-position: 30% 35%; }   /* the couple stands left of centre */
.album-pos--right  { object-position: 70% 35%; }

.banner--albums .banner__img { object-position: 50% 55%; }

/* The couples: a cover, their names, the place and the number of photographs. */
.albums__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 6vh, 4.5rem) var(--grid-gap); }
.albums__card { display: grid; gap: 0.35rem; }
.albums__media { display: block; overflow: hidden; overflow: clip; margin-bottom: 1rem; background: var(--sand); }
.albums__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--photo-grade); transition: transform 1.2s var(--ease), filter 0.6s var(--ease); }
.albums__names { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.15; }
.albums__meta { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-text); }
.albums__card:focus-visible { outline-offset: 6px; }
/* Categories (Weddings, Small Weddings, Engagements): links to each, then each
   category's couples under its own title. */
.albums__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.25rem; margin-bottom: clamp(3rem, 7vh, 5rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-soft); }
.albums__cats a { padding-block: 0.4rem; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe-text); }
.albums__cats a:hover { color: var(--ink); }
.albums__group { scroll-margin-top: 6rem; }
.albums__group + .albums__group { margin-top: clamp(4.5rem, 10vh, 7.5rem); }
.albums__group-title { margin-bottom: clamp(1.75rem, 4vh, 2.75rem); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); text-align: center; }
@media (hover: hover) {
  .albums__card:hover .albums__media img { filter: var(--photo-grade-hover); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .albums__card:hover .albums__media img { transform: scale(1.035); }
}

/* One album: the photographs in rows that read left to right in the order of
   the day. Each row fills the width at one height; a photo's share of the row
   follows its shape (.ar-*: width / height x 100), so nothing is cropped beyond
   rounding. The last row keeps its height instead of stretching. */
.album { padding-top: 0; }
.album__count { margin-top: 1.25rem; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-text); }
.album__grid { --row: clamp(9rem, 26vw, 22rem); display: flex; flex-wrap: wrap; gap: clamp(0.5rem, 1.2vw, 1rem); }
.album__grid::after { content: ""; flex-grow: 1000; }
.album__shot { flex: var(--r, 1) 1 calc(var(--r, 1) * var(--row)); min-width: 0; }
.album__shot img { height: auto; aspect-ratio: var(--r, 1); }
.album__shot .shot__media { cursor: zoom-in; background: var(--sand); }
.ar-50 { --r: 0.5; } .ar-56 { --r: 0.5625; } .ar-60 { --r: 0.6; } .ar-67 { --r: 0.6667; } .ar-71 { --r: 0.7143; } .ar-75 { --r: 0.75; }
.ar-80 { --r: 0.8; } .ar-90 { --r: 0.9; } .ar-100 { --r: 1; } .ar-111 { --r: 1.1111; } .ar-125 { --r: 1.25; } .ar-133 { --r: 1.3333; }
.ar-140 { --r: 1.4; } .ar-150 { --r: 1.5; } .ar-160 { --r: 1.6; } .ar-178 { --r: 1.7778; } .ar-200 { --r: 2; }

.album__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1.5rem; margin-top: clamp(3.5rem, 8vh, 6rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.album__all { grid-column: 2; }
.album__step { display: grid; gap: 0.2rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.2; }
.album__step span { font-family: var(--sans); font-style: normal; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-text); }
.album__step--prev { grid-column: 1; justify-self: start; }
.album__step--next { grid-column: 3; justify-self: end; text-align: right; }
.album__step:hover { color: var(--ink-soft); }

/* Portfolio: the way into the albums. */
.albums-band { padding-top: 0; text-align: center; }
.albums-band .wrap { display: grid; justify-items: center; gap: 1.5rem; }
.albums-band .sec-head__title { margin-top: 0; }

@media (max-width: 1000px) {
  .albums__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .albums__list { grid-template-columns: minmax(0, 1fr); }
  .album__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .album__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .album__step--next { grid-column: 2; }
}

/* Six menu titles once Albums joins the menu: in the header, Threads, Telegram
   and Email step aside on every screen wide enough for the titles (the menu
   and footer keep them), and on small tablets TikTok and YouTube too. */
@media (min-width: 761px) {
  .nav:has(.nav__links a[href="/albums"]) .nav__social .nav__extra { display: none; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .nav:has(.nav__links a[href="/albums"]) .nav__social a:is([href*="tiktok"], [href*="youtube"]) { display: none; }
  .nav:has(.nav__links a[href="/albums"]) .nav__links { gap: 0.8rem; }
}

/* 21. REVIEWS (/reviews) ================================================= */

/* Gold for stars and quotation marks only: --gold-text reads at 4.8:1 on
   ivory, --gold-light sits on the darkened foot of a photograph. */
:root { --gold: #B08D4C; --gold-text: #8A6A2E; --gold-light: #EAD7A6; }

.banner--reviews .banner__img { object-position: 42% 40%; }

.stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.14em; white-space: nowrap; }
.stars__off { color: #D9CFC0; }
.reviews-score { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.9rem; margin-top: 1.5rem;
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-text); }

/* Testimonials: a feature (the photograph in black and white with the words in
   gold over its darkened foot) alternating with a split card (photograph
   beside the words). */
.testimonials__list { display: grid; gap: clamp(3.5rem, 9vh, 7rem); }
.testimonial { position: relative; margin: 0; scroll-margin-top: 6rem; }
.testimonial__media { overflow: hidden; overflow: clip; background: var(--sand); }
.testimonial__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: var(--photo-grade); }
.testimonial__mark { display: block; margin-bottom: -0.32em; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.5rem, 3.5rem + 4vw, 7rem); line-height: 1; color: var(--gold); }
.testimonial__quote { margin: 0; }
.testimonial__quote p, .testimonial__quote--soon { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); line-height: 1.45; text-wrap: pretty; }
.testimonial__by .stars { font-size: 1.3rem; }
.testimonial__by { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1.5rem; }
.testimonial__initials { font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); letter-spacing: 0.06em; }
.testimonial__link { display: inline-block; margin-top: 1.25rem; padding-bottom: 0.2rem; border-bottom: 1px solid currentColor; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }

.testimonial--feature .testimonial__media { aspect-ratio: 16 / 8; }
.testimonial--feature .testimonial__media img { filter: grayscale(1) contrast(1.06) brightness(0.95); }
.testimonial--feature .testimonial__body { position: absolute; inset: auto 0 0 0; padding: clamp(1.75rem, 4vw, 3.5rem);
  background: linear-gradient(to top, rgba(20, 17, 13, 0.9) 0%, rgba(20, 17, 13, 0.62) 58%, rgba(20, 17, 13, 0) 100%); color: var(--ivory); }
.testimonial--feature .testimonial__quote p, .testimonial--feature .testimonial__quote--soon { max-width: 42ch; color: var(--gold-light); }
.testimonial--feature .stars__off { color: rgba(251, 249, 245, 0.32); }

.testimonial--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(1.75rem, 5vw, 5rem); }
.testimonial--split .testimonial__media { aspect-ratio: 4 / 5; }
.testimonial--split:nth-child(4n) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.testimonial--split:nth-child(4n) .testimonial__media { order: 2; }
.testimonial--split .testimonial__initials { color: var(--ink); }

.testimonial--text { max-width: 46rem; margin-inline: auto; text-align: center; }
.testimonial--text .testimonial__by { justify-content: center; }

@media (max-width: 760px) {
  /* On phones the words follow the photograph on the page itself. */
  .testimonial--feature .testimonial__media { aspect-ratio: 4 / 5; }
  .testimonial--feature .testimonial__body { position: static; padding: 1.5rem 0 0; background: none; color: inherit; }
  .testimonial--feature .testimonial__quote p, .testimonial--feature .testimonial__quote--soon { color: inherit; }
  .testimonial--feature .stars__off { color: #D9CFC0; }
  .testimonial--split, .testimonial--split:nth-child(4n) { grid-template-columns: minmax(0, 1fr); }
  .testimonial--split:nth-child(4n) .testimonial__media { order: 0; }
}

/* A couple's own words on their album page, under the introduction. */
.album-quote { padding-bottom: clamp(3rem, 7vh, 5rem); }
.album-quote__box { display: grid; justify-items: center; gap: 1rem; max-width: 46rem; margin: 0 auto; text-align: center; }
.album-quote__text { margin: 0; }
.album-quote__text p { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.5; }
.album-quote__by { font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0.06em; }

/* Leave a review: the form, with stars to choose from. */
.review-form { max-width: 52rem; margin-inline: auto; }
.review-write .sec-head .lede { margin-inline: auto; }
.review-form .field label.check { margin-bottom: 0; font-size: 0.9375rem; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink-soft); line-height: 1.6; }
.rating { min-width: 0; margin: 0; padding: 0; border: 0; }
.rating legend { margin-bottom: 0.6rem; padding: 0; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe-text); }
/* Five radio buttons drawn as stars: the markup runs 5 to 1, shown 1 to 5, so a
   chosen star lights itself and the ones before it. */
.rating__stars { position: relative; display: inline-flex; flex-direction: row-reverse; gap: min(0.4rem, 1.5vw); max-width: 100%; }
.rating__stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rating__stars label { padding: 0.15rem; font-size: min(2.6rem, 13vw); line-height: 1; color: #CBBBA2; cursor: pointer; transition: color 0.2s var(--ease); }
.rating__stars label::before { content: "\2605"; }
.rating__stars label:hover, .rating__stars label:hover ~ label, .rating__stars input:checked ~ label { color: var(--gold); }
.rating__stars input:focus-visible + label { outline: 1px solid var(--ink); outline-offset: 2px; }
.rating.is-invalid .rating__stars label { color: #E2B8AE; }
.rating.is-invalid .rating__stars label:hover, .rating.is-invalid .rating__stars label:hover ~ label,
.rating.is-invalid .rating__stars input:checked ~ label { color: var(--gold); }


/* Each album's link to its couple's review (or to the review form). */
.albums__review { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.85rem; padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--line); font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); }
.albums__review:hover { color: var(--ink); border-bottom-color: currentColor; }
.albums__review .stars { font-size: 0.95rem; }
.album__review { margin-top: 1.75rem; }

/* Seven menu titles once Reviews joins: small tablets use the phone menu, and
   wider screens bring the titles a little closer (laptops also let TikTok and
   YouTube step aside in the header; the menu and footer keep them). */
@media (min-width: 761px) and (max-width: 1023px) {
  .nav:has(.nav__links a[href="/reviews"]) .nav__links { display: none; }
  .nav:has(.nav__links a[href="/reviews"]) .nav__burger { display: block; }
  .nav:has(.nav__links a[href="/reviews"]) .nav__inner { grid-template-columns: 1fr auto; }
}
@media (min-width: 1024px) {
  .nav:has(.nav__links a[href="/reviews"]) .nav__links { gap: clamp(1.25rem, 1.9vw, 2.4rem); }
}
@media (min-width: 1024px) and (max-width: 1300px) {
  .nav:has(.nav__links a[href="/reviews"]) .nav__links { gap: 1rem; }
  .nav:has(.nav__links a[href="/reviews"]) .nav__social a:is([href*="tiktok"], [href*="youtube"]) { display: none; }
}

/* A couple's place before their review arrives: their album and the way to share it. */
.testimonial__links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1.25rem; }
.testimonial__links .testimonial__link { margin-top: 0; }
/* Gold stars beside "Reviews" in the menus, from the published reviews. */
.nav-stars, .foot__col .nav-stars { color: var(--gold); font-size: max(0.8em, 12px); letter-spacing: 0.08em; vertical-align: 0.08em; margin-left: 0.2em; }
.albums__review-count { color: var(--ink-soft); }
@media (min-width: 1024px) and (max-width: 1300px) { .nav__links .nav-count { display: none; } }
.foot__col .nav-count { font-size: inherit; color: inherit; }
/* A couple's place before their review: their names and their day in the
   studio's words (no quotation marks or stars, so it never reads as a review). */
.testimonial__eyebrow { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.testimonial__names { margin-top: 0.5rem; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.1; }
.testimonial__story { max-width: 46ch; margin-top: 1rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.7; color: var(--ink-soft); }
.testimonial--feature .testimonial__eyebrow { color: var(--gold-light); }
.testimonial--feature .testimonial__story { color: rgba(251, 249, 245, 0.9); }
@media (max-width: 760px) {
  .testimonial--feature .testimonial__eyebrow { color: var(--gold-text); }
  .testimonial--feature .testimonial__story { color: var(--ink-soft); }
}
/* Under the Reviews heading: true numbers (Instagram, albums, photographs) in one dark pill. */
.reviews-proof { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 0.4rem; margin-top: 1.75rem;
  padding: 0.6rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--ivory); font-size: 0.9375rem; letter-spacing: 0.04em; }
.proof__item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.5rem; border-radius: 999px; color: var(--ivory); transition: color 0.3s var(--ease); }
.proof__item:hover { color: var(--gold-light); }
.proof__item svg { width: 1.1rem; height: 1.1rem; color: var(--gold); flex: none; }
.proof__item strong { font-weight: 600; color: var(--gold-light); }
.proof__dot { color: var(--gold); }
.reviews-proof :focus-visible { outline-color: var(--ivory); }
@media (max-width: 600px) {
  /* Phones: the three numbers stack inside a rounded card. */
  .reviews-proof { display: flex; flex-direction: column; gap: 0.2rem; max-width: 20rem; margin-inline: auto; border-radius: 1.5rem; padding: 0.9rem 1rem; }
  .proof__dot { display: none; }
}
.albums__review-sep { color: var(--taupe); }

/* The Stevo Shots Promise (/reviews): an ivory panel inside a fine gold frame,
   a portrait in a gold-lined mat beside six commitments with roman numerals. */
.promise { background: var(--ivory); }
.promise__frame { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem); background: linear-gradient(180deg, #FDFBF7 0%, var(--champagne) 100%); border: 1px solid rgba(176, 141, 76, 0.45); }
/* A second hairline just inside the first: the double rule of fine stationery. */
.promise__frame::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(176, 141, 76, 0.22); pointer-events: none; }
.promise__media { position: relative; margin: 0; }
.promise__media::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold); z-index: 0; pointer-events: none; }
.promise__media img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; filter: var(--photo-grade); }
.promise__body { position: relative; }
.promise__body .eyebrow { color: var(--gold-text); }
.promise__heading { margin-top: 1rem; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); }
.promise__heading em { color: var(--gold-text); }
.promise__lede { max-width: 44ch; margin-top: 1.1rem; color: var(--ink-soft); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.8; }
.promise__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.75rem); margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.promise__item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem; padding: 1.25rem 0; border-top: 1px solid rgba(176, 141, 76, 0.35); }
.promise__num { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.3; color: var(--gold); }
.promise__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.3; color: var(--ink); }
.promise__item p { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.7; }
.promise__cta { margin-top: clamp(1.5rem, 4vh, 2.25rem); }
@media (max-width: 1100px) { .promise__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .promise__frame { grid-template-columns: minmax(0, 1fr); }
  .promise__media { max-width: 26rem; margin-inline: auto; width: calc(100% - 14px); }
}
@media (max-width: 600px) {
  .promise__frame { padding: 1.75rem 1.25rem 2rem; }
  .promise__frame::before { inset: 6px; }
  .promise__media::after { inset: 10px -10px -10px 10px; }
  .promise__media { width: calc(100% - 10px); }
  .promise__item { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.6rem; }
}
/* A fine light ring keeps the chat button visible over dark sections such as the Promise. */
.chat-launcher { box-shadow: 0 0 0 1px rgba(251, 249, 245, 0.28), 0 12px 30px -12px rgba(20, 17, 13, 0.6); }
/* The studio's signature line for each wedding: gold serif italic, no quotation marks. */
.testimonial__tagline { max-width: 40ch; margin-top: 0.85rem; padding-left: 1rem; border-left: 1px solid var(--gold);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.45; color: var(--gold-text); }
.testimonial--feature .testimonial__tagline { color: var(--gold-light); }
@media (max-width: 760px) { .testimonial--feature .testimonial__tagline { color: var(--gold-text); } }

/* Rating: a short hint that becomes "5 of 5 · Exceptional" once chosen. */
.rating__hint { margin: -0.15rem 0 0.4rem; font-size: 0.875rem; color: var(--gold-text); }
.rating__stars label:hover, .rating__stars label:hover ~ label { transform: scale(1.08); }
.rating__stars label { transition: color 0.2s var(--ease), transform 0.2s var(--ease); }

/* Signature: the couple types their names; below it they appear as a handwritten
   signature with the stars they chose, exactly as the review will be signed. */
.signature__pad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; margin-top: 1rem; padding: 1.1rem 1.25rem 0.9rem;
  background: rgba(251, 249, 245, 0.7); border: 1px solid rgba(176, 141, 76, 0.35); border-bottom: 1px solid var(--gold); }
.signature__dash { font-family: var(--serif); font-size: 1.5rem; color: var(--taupe); }
.signature__name { font-family: var(--script); font-size: clamp(2.1rem, 1.6rem + 2vw, 2.9rem); line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.signature__name.is-empty { color: #C9BDA9; }
.signature__stars { font-size: 1.35rem; }

/* Published reviews: the couple's signature in script beside their stars. */
.testimonial__signature { font-family: var(--script); font-size: 1.45em; letter-spacing: 0; line-height: 1; }
.testimonial__dash { opacity: 0.6; }
.album-quote__by .testimonial__signature { font-size: 1.6em; }
/* Feature cards with a longer note: deeper shading reaching higher, so the label stays legible. */
@media (min-width: 761px) {
  .testimonial--feature.testimonial--story .testimonial__body { padding-top: clamp(4rem, 9vw, 7rem);
    background: linear-gradient(to top, rgba(20, 17, 13, 0.92) 0%, rgba(20, 17, 13, 0.78) 55%, rgba(20, 17, 13, 0.45) 82%, rgba(20, 17, 13, 0) 100%); }
  .testimonial--feature .testimonial__eyebrow { text-shadow: 0 1px 10px rgba(20, 17, 13, 0.6); }
}
/* A published review on a feature card: the photograph fills the whole card, as tall
   as the words need, with the words on its darkened left side. */
@media (min-width: 761px) {
  .testimonial--feature.testimonial--review { display: grid; }
  .testimonial--feature.testimonial--review > .testimonial__media,
  .testimonial--feature.testimonial--review > .testimonial__body { grid-area: 1 / 1; }
  .testimonial--feature.testimonial--review .testimonial__media { aspect-ratio: auto; min-height: clamp(32rem, 46vw, 42rem); }
  .testimonial--feature.testimonial--review .testimonial__body { position: relative; inset: auto; display: flex; flex-direction: column; justify-content: center;
    padding-right: 38%;
    background: linear-gradient(to right, rgba(20, 17, 13, 0.9) 0%, rgba(20, 17, 13, 0.8) 45%, rgba(20, 17, 13, 0.35) 75%, rgba(20, 17, 13, 0.1) 100%); }
  .testimonial--feature.testimonial--review .testimonial__names { color: var(--ivory); }
  .testimonial--feature.testimonial--review .testimonial__quote p { max-width: none; font-size: clamp(1.1rem, 0.85rem + 0.75vw, 1.5rem); }
  .testimonial--feature.testimonial--review .testimonial__initials { color: var(--ivory); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .testimonial--feature.testimonial--review .testimonial__body { padding-right: 18%; }
}
/* The score gets its own centred line above the numbers bar, slightly larger. */
.reviews-score { display: flex; width: 100%; font-size: 0.875rem; }
.reviews-score .stars { font-size: 1.35rem; }
.reviews-score + .reviews-proof { margin-top: 1rem; }

/* Confirm a review (/review-confirm): the writer's own words above the confirm form. */
.review-confirm { max-width: 46rem; margin: 0 auto; }
.review-confirm [hidden] { display: none !important; }
.review-confirm__card { padding: clamp(1.75rem, 4vw, 3rem); background: #fff; border: 1px solid rgba(176, 141, 76, 0.35); }
.review-confirm__card .stars { font-size: 1.35rem; }
.review-confirm__about { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); }
.review-confirm__form { margin-top: 2rem; }
.review-confirm__form .form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.review-confirm__note { margin-top: 2rem; text-align: center; font-family: var(--serif); font-size: 1.25rem; }

/* 17. SCROLLING STRIP (home) ============================================ */

.ticker { display: flex; overflow: hidden; padding-block: 1.1rem; background: var(--champagne); color: var(--ink); font-family: var(--serif); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); white-space: nowrap; }
.ticker__group { display: flex; flex: none; min-width: 100%; animation: ticker-run 75s linear infinite; }
.ticker__phrase { display: flex; flex: none; gap: 1.75rem; padding-right: 1.75rem; }
.ticker__star { color: var(--gold-text); }
.hero.is-stopped ~ .ticker .ticker__group { animation-play-state: paused; }
@keyframes ticker-run { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .ticker { justify-content: center; white-space: normal; }
  .ticker__group { flex: 0 1 auto; min-width: 0; animation: none; }
  .ticker__group + .ticker__group, .ticker__phrase + .ticker__phrase { display: none; }
  .ticker__phrase { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; padding-inline: var(--gutter); }
}
@media print {
  .ticker { display: none; }
}

/* 18. COPY-THE-MESSAGE WINDOW (Instagram, Facebook, TikTok, Threads) ===== */

.copy-note {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.5rem, 5vw, 2.25rem);
  border: 0;
  background: var(--ivory);
  color: var(--ink);
  overflow-y: auto;
}
.copy-note::backdrop { background: rgba(20, 17, 13, 0.55); }
.copy-note__close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.copy-note__title { margin: 0 2rem 0.75rem 0; font-size: clamp(1.6rem, 1.4rem + 1vw, 2rem); }
.copy-note__help { margin: 0 0 1rem; color: var(--ink-soft); line-height: 1.6; }
.copy-note__text {
  display: block;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  background: var(--champagne);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
}
.copy-note__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.25rem; }

/* 19. CENTRED INTRODUCTIONS ON PHONES ==================================== */

@media (max-width: 760px) {
  .sec-head, .sec-head .eyebrow, .sec-head h2 { text-align: center; }
  .lede, .promise__lede, .member__bio, .tier__note { text-align: center; margin-inline: auto; }
}
@media (max-width: 760px) {
  .member { text-align: center; }
  .member__skills { justify-content: center; }
  .promise__body > .eyebrow, .promise__heading, .promise__cta { text-align: center; }
}

/* Couples whose review has not arrived yet. */
.testimonial__pending { margin: 1rem 0 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); }
@media (min-width: 761px) { .testimonial--feature .testimonial__pending { color: var(--gold-light); } }

/* 20. RATING POPUP ======================================================= */

dialog.rate {
  --rate-blue: #4AA3FF;
  width: min(25rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.5rem, 5vw, 2rem);
  overflow-y: auto;
  border: 1px solid rgba(251, 249, 245, 0.16);
  border-radius: 28px;
  background: rgba(38, 34, 30, 0.78);
  color: var(--ivory);
  box-shadow: 0 24px 70px rgba(20, 17, 13, 0.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  animation: rate-in 0.35s var(--ease);
}
dialog.rate::backdrop {
  background: rgba(20, 17, 13, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@keyframes rate-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
dialog.rate :focus-visible { outline: 2px solid var(--rate-blue); outline-offset: 2px; }
dialog.rate .rate__logo { display: block; width: 72px; height: 72px; margin-bottom: 1.1rem; border-radius: 18px; }
dialog.rate .rate__title { margin: 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
dialog.rate .rate__help { margin: 0.5rem 0 0; color: rgba(251, 249, 245, 0.72); line-height: 1.5; }
dialog.rate .rate__form { margin: 0; }
dialog.rate .rate__stars { display: flex; justify-content: space-between; margin: 1.25rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid rgba(251, 249, 245, 0.14); }
dialog.rate .rate__star { position: relative; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; }
dialog.rate .rate__star input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
dialog.rate .rate__star input:focus-visible + svg { outline: 2px solid var(--rate-blue); outline-offset: 4px; border-radius: 6px; }
dialog.rate .rate__star svg { width: 34px; height: 34px; fill: transparent; stroke: var(--rate-blue); stroke-width: 1.6; stroke-linejoin: round; transition: fill 0.18s ease, transform 0.18s var(--ease); }
dialog.rate .rate__star.is-on svg { fill: var(--rate-blue); transform: scale(1.08); }
dialog.rate .rate__more[hidden] { display: none; }
dialog.rate .rate__label { display: block; margin-top: 1rem; font-size: 0.875rem; color: rgba(251, 249, 245, 0.72); }
dialog.rate .rate__comment { display: block; width: 100%; margin-top: 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid rgba(251, 249, 245, 0.2); border-radius: 12px; background: rgba(20, 17, 13, 0.35); color: var(--ivory); font: inherit; font-size: 1rem; resize: vertical; }
dialog.rate .rate__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
dialog.rate .rate__submit, dialog.rate .rate__later { display: block; width: 100%; min-height: 48px; margin-top: 1rem; border: 0; border-radius: 999px; font: inherit; font-weight: 500; cursor: pointer; }
dialog.rate .rate__submit { background: var(--rate-blue); color: var(--ink); }
dialog.rate .rate__submit:hover { background: #76BAFF; }
dialog.rate .rate__submit:disabled { opacity: 0.65; cursor: progress; }
dialog.rate .rate__later { background: rgba(251, 249, 245, 0.1); color: var(--ivory); }
dialog.rate .rate__later:hover { background: rgba(251, 249, 245, 0.18); }
dialog.rate .rate__status { margin: 0.75rem 0 0; font-size: 0.875rem; color: #FFB4A8; }
dialog.rate .rate__status:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  dialog.rate { animation: none; }
  dialog.rate .rate__star svg { transition: none; }
  dialog.rate .rate__star.is-on svg { transform: none; }
}
@media print { .rate { display: none; } }

/* 21. LOGO =============================================================== */

.brand { display: inline-flex; align-items: center; gap: 0.6em; font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: inherit; white-space: nowrap; }
.brand__mono { display: block; width: auto; height: 2.05em; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 0.18em; text-align: left; }
.brand__name { font-family: var(--serif); font-size: 1em; font-weight: 500; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
.brand__tag { font-family: var(--sans); font-size: 0.42em; font-weight: 500; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text); }
.nav__mark { display: inline-flex; align-items: center; flex: none; }
.brand__mono--light { display: none; }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .brand__mono--dark { display: none; }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .brand__mono--light { display: block; filter: drop-shadow(0 1px 8px rgba(20, 17, 13, 0.45)); }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .brand__tag { color: var(--sand); text-shadow: 0 1px 10px rgba(20, 17, 13, 0.5); }
.foot__mark { display: inline-block; }
.foot__mark .brand { font-size: clamp(1.5rem, 3vw, 2rem); }
.rate__logo { display: flex; font-size: 1.3rem; margin-bottom: 1.25rem; }
.rate__logo .brand__tag { color: var(--sand); }
@media (max-width: 600px) {
  .brand { font-size: 1.15rem; }
}

/* 22. HOME SLIDESHOW ===================================================== */

.banner--home.hero { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 100vh; min-height: 100svh; padding: 0; overflow: hidden; text-align: left; background: var(--ink); }
.hero .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: var(--photo-grade); transition: opacity 1.4s ease; }
.hero .hero__slide.is-active { opacity: 1; }
.banner--home.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; height: auto; pointer-events: none; background: linear-gradient(180deg, rgba(20, 17, 13, 0.42) 0%, rgba(20, 17, 13, 0) 20%), linear-gradient(90deg, rgba(20, 17, 13, 0.74) 0%, rgba(20, 17, 13, 0.56) 34%, rgba(20, 17, 13, 0.1) 62%, rgba(20, 17, 13, 0) 100%); }
.hero__text { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: var(--measure); margin-inline: auto; padding: 6rem var(--gutter) 5rem; color: var(--ivory); text-shadow: 0 1px 18px rgba(20, 17, 13, 0.45); }
.hero__text .hero__eyebrow { animation: none; margin: 0 0 1.1rem; color: var(--gold-light); font-family: var(--sans); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; }
.hero__title { max-width: 11em; margin: 0; font-family: var(--serif); font-size: clamp(2.75rem, 1.5rem + 3.3vw, 4.75rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
.hero__title em { display: block; color: var(--gold-light); font-style: italic; }
.hero__sub { max-width: 30rem; margin: 1.25rem 0 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.6; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1rem 1.75rem; margin-top: 2rem; text-shadow: none; }
.hero .btn--line::after { background: var(--ivory); }
.hero__controls { position: absolute; left: max(var(--gutter), calc((100% - var(--measure)) / 2 + var(--gutter))); bottom: 1.5rem; z-index: 2; display: flex; align-items: center; gap: 0.35rem; color: var(--ivory); }
.hero__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(251, 249, 245, 0.35); border-radius: 50%; background: rgba(20, 17, 13, 0.28); color: inherit; cursor: pointer; transition: background 0.2s ease; }
.hero__btn:hover { background: rgba(20, 17, 13, 0.55); }
.hero__count { min-width: 4.2em; font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.08em; text-align: center; text-shadow: 0 1px 8px rgba(20, 17, 13, 0.6); }
.hero__toggle { margin-left: 0.35rem; }
.hero__icon-play { display: none; }
.hero.is-stopped .hero__icon-play { display: block; }
.hero.is-stopped .hero__icon-pause { display: none; }
.hero__bar { position: absolute; inset: auto 0 0; z-index: 2; height: 2px; background: rgba(251, 249, 245, 0.2); }
.hero__fill { display: block; height: 100%; background: var(--gold-light); transform: scaleX(0); transform-origin: left; animation: hero-clock 6s linear forwards; }
.hero.is-paused .hero__fill { animation-play-state: paused; }
@keyframes hero-clock { to { transform: none; } }
.hero.is-calm .hero__toggle, .hero.is-calm .hero__bar { display: none; }
.no-js .hero__controls, .no-js .hero__bar { display: none; }

@media (max-width: 899px) {
  .banner--home.hero { align-items: flex-end; }
  .banner--home.hero::after { background: linear-gradient(180deg, rgba(20, 17, 13, 0.42) 0%, rgba(20, 17, 13, 0) 16%), linear-gradient(180deg, rgba(20, 17, 13, 0) 42%, rgba(20, 17, 13, 0.62) 62%, rgba(20, 17, 13, 0.84) 100%); }
  .hero__text { padding: 6rem var(--gutter) 5.25rem; }
  .hero__text .hero__eyebrow { margin-bottom: 0.7rem; font-size: 0.6875rem; letter-spacing: 0.2em; }
  .hero__title { font-size: clamp(2.35rem, 9.6vw, 3.25rem); }
  .hero__sub { margin-top: 0.8rem; font-size: 1rem; }
  .hero__ctas { gap: 0.9rem 1.4rem; margin-top: 1.25rem; }
  .hero__controls { bottom: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__slide { transition: none; }
}

/* Upright photographs in the slideshow: keep faces in view on wide screens. */
.hero .hero__slide--tall { object-position: 50% 24%; }

/* 23. FILMS ============================================================== */

.films { padding-top: clamp(8.5rem, 20vh, 12rem); }
.films__intro { max-width: 46rem; margin: 0 auto clamp(3.5rem, 9vh, 6.5rem); text-align: center; }
.films__intro .display { font-size: clamp(2.5rem, 6vw, 5rem); margin-top: 1.5rem; }
.films__intro .lede { margin: 1.75rem auto 0; }
.films__signature { margin-bottom: clamp(4.5rem, 11vh, 8.5rem); }
.films__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vh, 5.5rem) var(--grid-gap); align-items: start; }

.film-item { margin: 0; min-width: 0; }
.film { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--sand); color: var(--ivory); cursor: pointer; overflow: hidden; }
.film__poster { display: block; width: 100%; height: auto; transition: transform var(--slow) var(--ease), filter var(--slow) var(--ease); }
.film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 17, 13, 0.42), rgba(20, 17, 13, 0) 45%); pointer-events: none; }
.film:hover .film__poster, .film:focus-visible .film__poster { transform: scale(1.015); filter: brightness(0.94); }
.film:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.film__play { position: absolute; z-index: 1; left: clamp(1rem, 2vw, 1.5rem); bottom: clamp(1rem, 2vw, 1.5rem); display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.86; transition: opacity 0.4s ease; }
.film:hover .film__play, .film:focus-visible .film__play { opacity: 1; }
.film__play svg { width: 2.25rem; height: 2.25rem; flex: none; }
.film-item--signature .film__play { left: 50%; bottom: 50%; transform: translate(-50%, 50%); opacity: 1; font-size: 0.75rem; text-shadow: 0 1px 12px rgba(20, 17, 13, 0.5); }
.film-item--signature .film__play svg { width: 3.25rem; height: 3.25rem; }
.film-item--signature .film::after { background: rgba(20, 17, 13, 0.16); }
.film-item__cap { margin-top: 1rem; }
.film-item__title { font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 400; line-height: 1.25; }
.film-item__detail { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--taupe-text); }
.film-item--signature .film-item__cap { text-align: center; margin-top: 1.5rem; }

.films__invite { text-align: center; padding-block: clamp(5rem, 14vh, 10rem) var(--section-y); }
.films__invite .display { font-size: clamp(2.25rem, 5vw, 4rem); margin-bottom: 2.25rem; }

.fplay-open { overflow: hidden; }
.fplay { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0D0B09; color: var(--ivory); }
.fplay::backdrop { background: #0D0B09; }
.fplay[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.fplay__top { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem clamp(1rem, 3vw, 2rem); }
.fplay__count { font-size: 0.75rem; letter-spacing: 0.2em; color: var(--sand); }
.fplay__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.5rem; border: 0; background: none; color: var(--ivory); cursor: pointer; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.fplay__btn:hover { opacity: 1; }
.fplay__btn:focus-visible { outline: 1px solid var(--ivory); outline-offset: 2px; opacity: 1; }
.fplay__mid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 0; padding-inline: clamp(0.25rem, 2vw, 1.5rem); }
.fplay__holder { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; min-width: 0; container-type: size; }
.fplay__stage { --film-ratio: 1.7778; position: relative; aspect-ratio: var(--film-ratio); width: min(100cqw, calc(100cqh * var(--film-ratio))); background: #000; }
.fplay__video, .fplay__frame { display: block; width: 100%; height: 100%; border: 0; }
.fplay__video:focus { outline: none; }
.fplay__state { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--sand); text-align: center; pointer-events: none; }
.fplay__foot { padding: 0.9rem clamp(1rem, 3vw, 2rem) 1.1rem; text-align: center; }
.fplay__title { font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 400; }
.fplay__detail { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--sand); }
.fplay__prev svg, .fplay__next svg { width: 1.5rem; height: 1.5rem; }

@media (max-width: 760px) {
  .films__grid { grid-template-columns: minmax(0, 1fr); }
  .film__play { opacity: 1; }
  .fplay__mid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; padding-inline: 0; }
  .fplay__holder { grid-column: 1; grid-row: 1; }
  .fplay__prev, .fplay__next { grid-row: 2; justify-self: start; }
  .fplay__next { grid-column: 1; justify-self: end; }
  .fplay__prev { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .film__poster, .film__play { transition: none; }
  .film:hover .film__poster, .film:focus-visible .film__poster { transform: none; }
}

.films__chapter { margin-bottom: clamp(4.5rem, 11vh, 8rem); }
.films__chapter-title { font-family: var(--sans); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--taupe-text); text-align: center; margin-bottom: clamp(2rem, 5vh, 3.25rem); }

/* The top menu with Films in it: the logo keeps its full width and nothing touches. */
.nav__mark { min-width: max-content; }
@media (min-width: 1101px) and (max-width: 1800px) {
  .nav__links { gap: clamp(0.9rem, 1.55vw, 1.75rem); }
  .nav__social a[href*="tiktok"], .nav__social a[href*="youtube"] { display: none; }
}
/* Below this width eight titles no longer fit beside the logo: they move into the menu. */
@media (max-width: 1240px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__inner { grid-template-columns: 1fr auto; }
}
.film__play { white-space: nowrap; }
@media (max-width: 760px) { .film-item__cap { text-align: center; } }

/* 24. HOME FILM AND EDITORIAL SECTIONS =================================== */

.reel { position: relative; display: flex; align-items: center; min-height: min(100svh, 62rem); overflow: hidden; background: var(--ink); color: var(--ivory); }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 17, 13, 0.62), rgba(20, 17, 13, 0.22) 55%, rgba(20, 17, 13, 0.08)); }
.reel__text { position: relative; width: 100%; max-width: var(--measure); margin-inline: auto; padding: clamp(5rem, 12vh, 8rem) var(--gutter); }
.reel__label { color: var(--sand); }
.reel__title { margin-top: 1.5rem; font-size: clamp(2.75rem, 6.5vw, 5.75rem); line-height: 1.04; color: var(--ivory); }
.reel__lede { max-width: 30rem; margin-top: 1.75rem; line-height: 1.7; color: var(--ivory); }
.reel__link { display: inline-block; margin-top: 2.25rem; padding-bottom: 0.4rem; border-bottom: 1px solid currentColor; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory); }
.reel__link:hover { color: var(--sand); }
.reel__toggle { position: absolute; right: var(--gutter); bottom: 1.25rem; min-height: 2.75rem; padding: 0 0.5rem; border: 0; background: none; color: var(--ivory); cursor: pointer; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }
.reel__toggle:hover, .reel__toggle:focus-visible { opacity: 1; }

.marks { padding: clamp(4.5rem, 11vh, 8rem) var(--gutter) clamp(2rem, 5vh, 3.5rem); }
.marks__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--grid-gap); max-width: var(--measure); margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.marks__big { display: block; font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.1; }
.marks__small { display: block; margin-top: 0.75rem; font-family: var(--serif); font-style: italic; font-size: clamp(0.95rem, 1.2vw, 1.1rem); color: var(--ink-soft); }

.statement { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; max-width: var(--measure); margin: 0 auto; padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(5rem, 12vh, 9rem); }
.statement__a { grid-column: 1 / 6; grid-row: 1; width: 100%; height: auto; filter: grayscale(1); }
.statement__b { grid-column: 8 / 13; grid-row: 1; width: 100%; height: auto; margin-top: clamp(8rem, 26vh, 16rem); }
.statement__words { position: relative; z-index: 1; grid-column: 3 / 11; grid-row: 1; margin: 0; font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.16; text-align: center; color: var(--ink); text-shadow: 0 0 22px var(--ivory), 0 0 6px var(--ivory); }

.band { display: block; color: var(--ivory); }
.band__img { display: block; width: 100%; height: clamp(16rem, 52vh, 34rem); object-fit: cover; object-position: 50% 45%; }
.band__text { display: block; padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); background: #2B2926; text-align: center; }
.band__label { display: block; color: var(--sand); }
.band__title { display: block; margin-top: 1.25rem; font-size: clamp(3rem, 9vw, 7.5rem); text-transform: uppercase; color: var(--ivory); transition: color 0.4s ease; }
.band:hover .band__title { color: var(--sand); }

@media (max-width: 760px) {
  .reel { min-height: 100svh; }
  .reel__shade { background: rgba(20, 17, 13, 0.42); }
  .reel__text { text-align: center; }
  .reel__lede { margin-inline: auto; }
  .marks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement { display: block; }
  .statement__a { width: 72%; }
  .statement__words { margin: -2.5rem 0 2rem; }
  .statement__b { width: 66%; margin: 0 0 0 auto; }
}

/* The words sit clear of the photographs, so they always read cleanly. */
.marks__big { font-weight: 500; }
.statement { align-items: start; }
.statement__words { grid-column: 2 / 12; grid-row: 2; margin-top: clamp(2.5rem, 6vh, 4.5rem); text-shadow: none; }
.statement__b { margin-top: clamp(4rem, 12vh, 8rem); }
@media (max-width: 760px) {
  .statement__words { margin: 2.25rem 0; }
  .statement__b { margin: 0 0 0 auto; }
}

/* The wordmark wall and the Portfolio band: the whole photograph, never cropped. */
.marks { padding-bottom: clamp(3rem, 8vh, 5rem); }
.marks__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 3vw, 3rem); max-width: 60rem; align-items: center; }
.marks__item--half { grid-column: span 3; }
.marks__item--full { grid-column: 1 / -1; }
.marks__item--third { grid-column: span 2; }
.marks__big { font-size: clamp(2.25rem, 5.4vw, 4.5rem); font-weight: 400; line-height: 1; }
.marks__small { font-size: clamp(0.9rem, 1.4vw, 1.2rem); color: var(--taupe-text); }
.marks__item--caps .marks__big { letter-spacing: 0.06em; text-transform: uppercase; }
.marks__item--italic .marks__big { font-style: italic; font-size: clamp(1.9rem, 4.2vw, 3.5rem); }
.marks__item--sans .marks__big { font-family: var(--sans); font-weight: 500; letter-spacing: -0.02em; color: var(--ink-soft); }
.marks__item--script .marks__big { font-family: var(--script); font-size: clamp(2.5rem, 6vw, 5rem); }
.marks__item--bold .marks__big { font-weight: 700; letter-spacing: 0.02em; }
.marks__item--tight .marks__big, .marks__item--heavy .marks__big, .marks__item--wide .marks__big { font-size: clamp(1.25rem, 3.4vw, 2.75rem); }
.marks__item--tight .marks__big { letter-spacing: -0.03em; }
.marks__item--heavy .marks__big { font-weight: 800; letter-spacing: -0.02em; }
.marks__item--wide .marks__big { letter-spacing: 0.36em; margin-right: -0.36em; }
.band__img { height: auto; object-fit: initial; }
.marks__big { white-space: nowrap; }
@media (max-width: 760px) {
  .marks__list { gap: 2.25rem 0.75rem; }
  .marks__item--caps .marks__big { font-size: 1.6rem; }
  .marks__item--script .marks__big { font-size: 2.15rem; }
  .marks__item--bold .marks__big { font-size: 1.9rem; }
  .marks__item--tight .marks__big, .marks__item--heavy .marks__big { font-size: 1.1rem; }
  .marks__item--wide .marks__big { font-size: 1.05rem; letter-spacing: 0.24em; margin-right: -0.24em; }
}

/* 25. JOIN OUR TEAM ====================================================== */

.banner--careers .banner__img { object-position: 50% 62%; }
.banner--careers .banner__title { font-size: clamp(2.5rem, 6.4vw, 5.5rem); line-height: 1.06; }
.careers-intro { max-width: 46rem; margin: 0 auto; padding: clamp(4.5rem, 11vh, 7.5rem) var(--gutter); text-align: center; }
.careers-intro .lede { margin: 1.5rem 0 2.25rem; }
.careers-intro .btn--solid { display: inline-flex; }
.careers-jobs, .careers-apply { padding-block: clamp(4.5rem, 11vh, 8rem); background: var(--champagne); }
.careers-values, .careers-faq { padding-block: clamp(4.5rem, 11vh, 8rem); }
.wrap--form { max-width: 56rem; }
.careers-apply .sec-head .lede { margin-inline: auto; }

.job-none { max-width: 38rem; margin: 0 auto; text-align: center; }
.job-none__tag { font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--taupe-text); }
.job-none__title { margin-top: 1.25rem; font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.25; }
.job-none__text { margin: 1.25rem 0 2rem; color: var(--ink-soft); line-height: 1.7; }

.jobs { display: grid; gap: clamp(2rem, 5vh, 3rem); max-width: 56rem; margin: 0 auto; }
.job { padding: clamp(1.5rem, 4vw, 3rem); background: var(--ivory); }
.job__title { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 400; }
.job__text { margin-top: 0.75rem; color: var(--ink-soft); line-height: 1.7; white-space: pre-line; }
.job__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1.5rem 0; }
.job__facts dt { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe-text); }
.job__facts dd { margin: 0.25rem 0 0; }
.job__more { margin-bottom: 1.75rem; }
.job__more summary { cursor: pointer; font-size: 0.8125rem; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 3px; }
.job__label { margin-top: 1.25rem; font-family: var(--sans); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--taupe-text); }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vh, 3.25rem) var(--grid-gap); max-width: 68rem; margin: 0 auto; padding: 0; list-style: none; }
.value__title { font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; }
.value__text { margin-top: 0.6rem; color: var(--ink-soft); line-height: 1.7; }

.career-form { display: block; }
.career-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem var(--grid-gap); margin: 0 0 clamp(2.5rem, 6vh, 3.75rem); padding: 0; border: 0; min-width: 0; }
.career-set legend { display: block; width: 100%; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.6rem); }
.career-note { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--taupe-text); }
.career-rate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; }
.career-privacy { margin-bottom: 2.25rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--ivory); font-size: 0.9375rem; line-height: 1.7; color: var(--ink-soft); }
.career-privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.career-privacy__title { margin-bottom: 0.5rem; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; color: var(--ink); }
.career-check { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 1rem; color: var(--ink); cursor: pointer; }
.career-check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.3rem; }
.career-send { text-align: center; }
.career-send .form__status { margin-bottom: 1rem; }
.career-send .btn { display: inline-flex; min-width: 16rem; justify-content: center; }
.career-send .btn:disabled { opacity: 0.6; cursor: progress; }
.career-progress { height: 3px; margin-bottom: 1.25rem; background: var(--sand); }
.career-progress span { display: block; width: 0; height: 100%; background: var(--ink); transition: width 0.2s linear; }
.career-done { text-align: center; outline: none; }
.career-faq { padding-block: 1.5rem; border-top: 1px solid var(--line); }
.career-faq__q { font-family: var(--serif); font-size: clamp(1.1rem, 1.7vw, 1.35rem); font-weight: 400; }
.career-faq__a { margin-top: 0.5rem; color: var(--ink-soft); line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 900px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .values, .career-set, .job__facts { grid-template-columns: minmax(0, 1fr); }
  .values { text-align: center; }
  .career-rate__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .career-rate__row input { grid-column: 1 / -1; }
  .career-send .btn { width: 100%; min-width: 0; }
}
.career-form [hidden], .jobs[hidden], .job-none[hidden], .career-form[hidden], .career-done[hidden] { display: none; }
.banner--careers .banner__img { object-position: 50% 0%; }
@media (max-width: 760px) { .banner--careers .banner__img { object-position: 50% 62%; } }

/* 26. HOME PORTFOLIO: FEATURED STORIES =================================== */

.portfolio-home__head { padding: clamp(4.5rem, 11vh, 8rem) var(--gutter) clamp(2.5rem, 6vh, 4rem); text-align: center; }
.portfolio-home__title { margin-top: 1.25rem; font-size: clamp(2.75rem, 6vw, 5.25rem); }
.stories { position: relative; height: clamp(36rem, 84vh, 52rem); overflow: hidden; background: var(--ink); color: var(--ivory); }
.story { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s; }
.story.is-on { opacity: 1; visibility: visible; transition: opacity 1.1s ease; }
.story__bg { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; filter: blur(30px) brightness(0.55) saturate(0.85); }
.story__wide { position: absolute; left: 0; top: 19%; width: 42%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.story__tall { position: absolute; right: 9%; top: 7%; width: clamp(13rem, 19vw, 21rem); height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 24px 60px rgba(20, 17, 13, 0.32); }
.story__wide, .story__tall, .story__text { transform: translateY(14px); transition: transform 1.4s var(--ease); }
.story.is-on .story__wide, .story.is-on .story__tall, .story.is-on .story__text { transform: none; }
.story__text { position: absolute; left: 46%; top: 30%; width: 24%; }
.story__kicker { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.35rem); }
.story__names { margin-top: 0.75rem; font-family: var(--serif); font-size: clamp(1.75rem, 3.1vw, 3rem); font-weight: 400; line-height: 1.12; letter-spacing: 0.02em; text-transform: uppercase; }
.story__link { display: inline-block; margin-top: 1.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid currentColor; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; }
.story__link:hover { color: var(--sand); }
.stories__bar { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.stories__dots { display: flex; }
.stories__dot { position: relative; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.stories__dot::after { content: ""; position: absolute; left: 0.45rem; right: 0.45rem; top: 50%; height: 1px; background: var(--ivory); opacity: 0.45; }
.stories__dot.is-on::after { height: 2px; opacity: 1; }
.stories__arrow { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--ivory); cursor: pointer; }
.stories__arrow svg { width: 1.25rem; height: 1.25rem; }
.stories__pause { position: absolute; right: var(--gutter); min-height: 2.75rem; padding: 0 0.5rem; border: 0; background: none; color: var(--ivory); cursor: pointer; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; }
.stories__pause:hover, .stories__pause:focus-visible { opacity: 1; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { position: relative; display: block; height: clamp(22rem, 62vh, 38rem); overflow: hidden; color: var(--ivory); }
.tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.tile:hover .tile__img { transform: scale(1.025); }
.tile::after { content: ""; position: absolute; inset: 0; background: rgba(20, 17, 13, 0.34); }
.tile__text { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tile__kicker { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.5rem); }
.tile__title { margin-top: 0.4rem; font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: 0.04em; text-transform: uppercase; }
.portfolio-home__more { padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); text-align: center; }

@media (max-width: 760px) {
  .stories { height: max(40rem, 100svh); }
  .story__wide { top: 5%; width: 88%; }
  .story__tall { right: 6%; top: calc(5% + 40vw); width: 36%; }
  .story__text { left: 0; right: 0; top: auto; bottom: 5.5rem; width: auto; padding-inline: 1rem; text-align: center; }
  .stories__pause { right: 0.5rem; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { height: 20rem; }
}
@media (prefers-reduced-motion: reduce) {
  .story, .story.is-on, .story__wide, .story__tall, .story__text, .tile__img { transition: none; transform: none; }
}
/* Words low in the tile, clear of faces. */
.tile__text { justify-content: flex-end; padding-bottom: clamp(1.75rem, 5vh, 3rem); }
.tile::after { background: linear-gradient(to top, rgba(20, 17, 13, 0.66), rgba(20, 17, 13, 0) 55%); }
@media (max-width: 760px) { .stories { height: 40rem; } .story__text { bottom: 4.5rem; } }

/* Tiles that change picture, and the two films beneath them. */
.tile__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease, transform var(--slow) var(--ease); }
.tile__img.is-on { opacity: 1; }
.duo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); max-width: var(--measure); margin: 0 auto; padding: clamp(4rem, 10vh, 7rem) var(--gutter) 0; }
.duo__item { margin: 0; min-width: 0; }
.duo__item--low { margin-top: clamp(3rem, 9vh, 6.5rem); }
.duo__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sand); }
.duo__cap { display: block; margin-top: 1.25rem; text-align: center; }
.duo__kicker { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--taupe-text); }
.duo__title { display: block; margin-top: 0.3rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.8vw, 2.5rem); letter-spacing: 0.04em; text-transform: uppercase; }
.duo__pause { grid-column: 1 / -1; justify-self: center; min-height: 2.75rem; padding: 0 0.5rem; border: 0; background: none; color: var(--taupe-text); cursor: pointer; font-family: var(--sans); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; }
.duo__pause:hover, .duo__pause:focus-visible { color: var(--ink); }
@media (max-width: 760px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo__item--low { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .tile__img { transition: none; } }

/* 27. ONE LUXURY LOOK FOR EVERY PAGE ===================================== */

:root { --cream: #EFE6D6; --slate: #5F7377; --charcoal: #2F2D2B; }

/* Words: tall capitals with one italic word. */
.display, .banner__title, .page-hero__title, .sec-head__title { font-weight: 400; letter-spacing: 0.015em; line-height: 1.08; text-transform: uppercase; }
.display em, .banner__title em, .page-hero__title em, .sec-head__title em { font-style: italic; text-transform: none; letter-spacing: 0; }
.page-hero__title, .sec-head__title { font-size: clamp(2.25rem, 5vw, 4.25rem); }
.eyebrow { letter-spacing: 0.3em; }

/* Buttons: square-cornered, cream. */
.btn--solid, .nav__cta { border-radius: 0; }
.btn--solid { background: var(--cream); color: #4B443B; }
.btn--solid:hover { background: var(--charcoal); color: var(--ivory); }
.banner .btn--solid { background: var(--cream); color: #4B443B; }
html:not(.no-js) .has-banner:not(.is-locked) .nav:not(.is-stuck) .nav__cta { background: var(--cream); color: #4B443B; }

/* Header: two photographs, one in colour and one in black and white. */
.banner:not(.banner--home):not(.hero) { align-items: center; height: 100vh; height: 100svh; max-height: none; }
.banner:not(.banner--home):not(.hero) .banner__img { width: 50%; }
.banner:not(.banner--home):not(.hero) .banner__img--b { left: 50%; filter: grayscale(1) contrast(1.06) brightness(0.9); }
.banner:not(.banner--home):not(.hero)::after { background: rgba(20, 17, 13, 0.3); }
.banner:not(.banner--home):not(.hero) .banner__text { padding-bottom: 0; }
.banner:not(.banner--home):not(.hero) .banner__title { padding-left: 0; font-size: clamp(2.75rem, 8vw, 7rem); letter-spacing: 0.02em; }

/* The header stays still while the next section slides over it. */
.pin { position: relative; }
.pin > .banner, .pin > .hero, .pin > .reel { position: sticky; top: 0; z-index: 0; }
.pin > :not(.banner):not(.hero):not(.reel) { position: relative; z-index: 1; }
.pin > .pin { z-index: 1; }

/* The first words on a page: a dark panel. Colour names are redefined, so everything inside follows. */
.page-hero--intro, .panel-slate {
  --ink: #FBF9F5; --ink-soft: #E8DFD2; --taupe-text: #DCD2C2; --taupe: #DCD2C2;
  --line: rgba(251, 249, 245, 0.22); --line-soft: rgba(251, 249, 245, 0.12);
  color: var(--ink);
}
.page-hero--intro { position: relative; overflow: hidden; background: var(--charcoal); padding-block: clamp(5rem, 13vh, 9rem); }
.page-hero--intro > * { position: relative; z-index: 1; }
.page-hero--intro::before, .marks::before, .films__intro::before, .careers-intro::before {
  content: "Stevo Shots"; position: absolute; left: 50%; top: 50%; z-index: 0; transform: translate(-50%, -50%);
  font-family: var(--script); font-size: clamp(7rem, 24vw, 22rem); line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0.045; color: currentColor;
}
.marks, .films__intro, .careers-intro { position: relative; overflow: hidden; }
.marks__list, .films__intro > *, .careers-intro > * { position: relative; z-index: 1; }
.panel-slate { background: var(--slate); }

/* The closing invitation, over a photograph. */
.page-cta--photo {
  --ink: #FBF9F5; --ink-soft: #FBF9F5; --taupe-text: #F2EBE1;
  position: relative; overflow: hidden; display: flex; align-items: center; min-height: 92vh; min-height: 92svh; background: var(--charcoal); color: var(--ink);
}
.page-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.56) contrast(1.05); }
.page-cta--photo > .wrap { position: relative; z-index: 1; width: 100%; }
.page-cta--photo .display, .page-cta--photo .sec-head__title { font-size: clamp(2.5rem, 6.4vw, 5.5rem); }
.page-cta--photo a:not(.btn) { color: var(--ivory); }

/* A strip of photographs above the footer. */
.foot__strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.foot__strip img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }

/* Words and photographs rise softly into view as the page scrolls. */
.rise { opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--rise, 0ms); }
.rise.is-in { opacity: 1; transform: none; }

@keyframes pair-fade { 0%, 42% { opacity: 0; } 50%, 92% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 760px) {
  /* On a phone, the two photographs take turns instead of sharing a narrow screen. */
  .banner:not(.banner--home):not(.hero) .banner__img { width: 100%; }
  .banner:not(.banner--home):not(.hero) .banner__img--b { left: 0; animation: pair-fade 14s ease-in-out infinite; }
  .foot__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-hero__title, .sec-head__title { font-size: clamp(2rem, 9vw, 2.75rem); }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .banner__img--b { animation: none !important; }
  .pin > .banner, .pin > .hero, .pin > .reel { position: relative; }
}

/* A slate panel partway down the longer pages. */
.section.rate--alt:not(.page-cta):not(.review-write):not(.rate):not(:has(label)):not(:has(.founder__name)) {
  --ink: #FBF9F5; --ink-soft: #F2EBE1; --taupe-text: #E8DFD2; --taupe: #E8DFD2;
  --line: rgba(251, 249, 245, 0.24); --line-soft: rgba(251, 249, 245, 0.14);
  background: var(--slate); color: var(--ink);
}
.page-cta__bg { filter: grayscale(1) brightness(0.46) contrast(1.05); }

/* 28. PORTFOLIO PANELS =================================================== */

.portfolio.is-source { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.pf { position: relative; padding: clamp(5rem, 13vh, 9rem) var(--gutter); background: var(--ivory); color: var(--ink); }
.pf--dark, .pf--slate { --ink: #FBF9F5; --ink-soft: #E8DFD2; --taupe-text: #DCD2C2; }
.pf--dark { background: var(--charcoal); }
.pf--slate { background: var(--slate); }
.pf__head { margin-bottom: clamp(2.75rem, 7vh, 4.5rem); text-align: center; }
.pf__kicker { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.9vw, 1.6rem); color: var(--taupe-text); }
.pf__title { margin-top: 0.5rem; font-size: clamp(2.75rem, 7vw, 6rem); color: var(--ink); }
.pf__row { display: grid; max-width: var(--measure); margin: 0 auto; gap: var(--grid-gap); align-items: start; }
.pf__row--two { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.pf__row--two .pf-frame--tall { margin-top: clamp(4rem, 12vh, 8rem); }
.pf--flip .pf__row--two { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.pf--flip .pf__row--two .pf-frame--wide { order: 2; margin-top: clamp(4rem, 12vh, 8rem); }
.pf--flip .pf__row--two .pf-frame--tall { order: 1; margin-top: 0; }
.pf__row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf__row--three .pf-frame:nth-child(2) { margin-top: clamp(3rem, 9vh, 6rem); }
.pf-frame { margin: 0; min-width: 0; }
.pf-frame__open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--sand); overflow: hidden; cursor: zoom-in; }
.pf-frame--wide .pf-frame__open { aspect-ratio: 3 / 2; }
.pf-frame--tall .pf-frame__open { aspect-ratio: 2 / 3; }
.pf-frame__open img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.3s ease, transform 6s linear; transform: scale(1.04); }
.pf-frame__open img.is-on { opacity: 1; transform: none; }
.pf-frame__open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pf-frame__cap { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 1rem; font-size: 0.75rem; letter-spacing: 0.14em; color: var(--taupe-text); }
.pf-frame__cap > span:first-child { text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink); }

@media (max-width: 760px) {
  .pf__row--two, .pf--flip .pf__row--two, .pf__row--three { grid-template-columns: minmax(0, 1fr); }
  .pf__row--two .pf-frame--tall, .pf--flip .pf__row--two .pf-frame--wide, .pf__row--three .pf-frame:nth-child(2) { margin-top: 0; }
  .pf-frame__cap { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pf-frame__open img { transition: none; transform: none; } }

/* 29. THE OWNER: a dark studio wallpaper, a framed portrait and a formal title. */
.section.rate--alt:has(.founder__name) {
  --ink: #FBF9F5; --ink-soft: #E8DFD2; --taupe-text: #D8C7A8; --taupe: #B8A27C;
  --line: rgba(216, 199, 168, 0.28); --line-soft: rgba(216, 199, 168, 0.14);
  position: relative; overflow: hidden; isolation: isolate; background: #120F0C; padding-block: clamp(5.5rem, 14vh, 10rem);
}
.section.rate--alt:has(.founder__name)::before {
  content: ""; position: absolute; inset: -5%; z-index: -2;
  background: url("/assets/images/about-stevo-1200.webp") center / cover no-repeat;
  filter: blur(34px) brightness(0.34) saturate(0.8);
}
.section.rate--alt:has(.founder__name)::after {
  content: "Stevo Shots"; position: absolute; right: -2%; bottom: -4%; z-index: -1;
  font-family: var(--script); font-size: clamp(7rem, 20vw, 19rem); line-height: 1; white-space: nowrap; color: #D8C7A8; opacity: 0.07; pointer-events: none;
}
.founder__fig { position: relative; }
.founder__fig img { position: relative; z-index: 1; }
.founder__fig::before { content: ""; position: absolute; top: -1.1rem; left: -1.1rem; right: 1.1rem; aspect-ratio: 4 / 5; border: 1px solid rgba(216, 199, 168, 0.55); pointer-events: none; }
.founder__fig figcaption { position: relative; z-index: 1; margin-top: 1rem; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.6875rem; color: #D8C7A8; }
.founder__name { font-size: clamp(3rem, 6.5vw, 5.5rem); font-weight: 400; letter-spacing: 0.06em; line-height: 1.05; text-transform: uppercase; }
.founder__role { color: #D8C7A8; }
.founder__qa dt { color: var(--ink); }
@media (max-width: 760px) {
  .founder__fig::before { top: -0.6rem; left: -0.6rem; right: 0.6rem; }
  .section.rate--alt:has(.founder__name)::after { right: 50%; transform: translateX(50%); }
}
.founder__fig { overflow: visible; }
.founder__fig::before { aspect-ratio: 2 / 3; }

/* The owner: a light champagne wallpaper instead of the dark one. */
.section.rate--alt:has(.founder__name) {
  --ink: #14110D; --ink-soft: #4B443B; --taupe-text: #736552; --taupe: #9A8975;
  --line: rgba(115, 101, 82, 0.34); --line-soft: rgba(115, 101, 82, 0.18);
  background: linear-gradient(135deg, #F7F1E7 0%, #EADFCD 55%, #F4ECDF 100%); color: var(--ink);
}
.section.rate--alt:has(.founder__name)::before { background: none; filter: none; }
.section.rate--alt:has(.founder__name)::after { color: #8A7556; opacity: 0.1; }
.founder__fig::before { border-color: rgba(138, 117, 86, 0.65); }
.founder__fig figcaption, .founder__role { color: #736552; }

/* 30. SHOWCASE, CHANGING PHOTOGRAPHS AND MOVEMENT ======================== */

.show { position: relative; overflow: hidden; padding: clamp(5rem, 13vh, 9rem) var(--gutter); background: var(--ivory); }
.show__words { position: absolute; top: clamp(1.5rem, 5vh, 3.5rem); left: 0; white-space: nowrap; font-family: var(--serif); font-size: clamp(4rem, 12vw, 11rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); opacity: 0.045; pointer-events: none; will-change: transform; }
.show__head { position: relative; margin-bottom: clamp(2.5rem, 7vh, 4.5rem); text-align: center; }
.show__kicker { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.9vw, 1.6rem); color: var(--taupe-text); }
.show__title { margin-top: 0.5rem; font-size: clamp(2.25rem, 5.4vw, 4.75rem); }
.show__row { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--grid-gap); align-items: start; max-width: var(--measure); margin: 0 auto; }
.show__a, .show__b { will-change: transform; }
.show__b { margin-top: clamp(3.5rem, 11vh, 7rem); }
.show .duo__pause { display: block; margin: 2.25rem auto 0; }
.swap { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.swap--tall { aspect-ratio: 2 / 3; }
.swap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.swap img, .banner__img { transition: opacity 1.4s ease; }
.swap img.is-fading, .banner__img.is-fading { opacity: 0; }
.page-cta__bg { top: -12%; height: 124%; bottom: auto; will-change: transform; }
.banner:not(.banner--home):not(.hero) .banner__img { object-position: 50% 28%; }

@media (max-width: 760px) {
  .show__row { grid-template-columns: minmax(0, 1fr); }
  .show__b { margin-top: 0; width: 72%; margin-left: auto; }
  /* One photograph at a time on a phone; they change in turn. */
  .banner:not(.banner--home):not(.hero) .banner__img--b { display: none; animation: none; }
}

/* The opened menu: the same capitals and spacing as the rest of the website. */
.menu__links a { font-size: clamp(1.45rem, min(6.6vw, 5svh), 2.1rem); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.7rem 0.15rem; }
.menu__links .nav-count, .menu__links .nav-stars { text-transform: none; letter-spacing: 0; font-size: 0.6em; }
.menu__links a[aria-current="page"], .menu__links a:hover { color: var(--taupe-text); }
.menu__cta { border-radius: 0; }
/* The menu must open at every width where its button shows. */
@media (max-width: 1240px) { .menu { display: flex; } .menu[hidden] { display: none; } }

/* 31. FINISHING TOUCHES ================================================== */

/* The opening logo moment. */
@keyframes intro-veil { 0%, 72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
@keyframes intro-logo { 0% { opacity: 0; transform: translate(-50%, -46%) scale(0.96); } 30%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; visibility: hidden; transform: translate(-50%, -50%) scale(1.02); } }
html.intro-on::before { content: ""; position: fixed; inset: 0; z-index: 1000; background: #F3ECE0; pointer-events: none; animation: intro-veil 1.9s ease forwards; }
html.intro-on::after { content: ""; position: fixed; left: 50%; top: 50%; z-index: 1001; width: 126px; height: 160px; background: url("/assets/logo/stevo-shots-monogram-large.png") center / contain no-repeat; pointer-events: none; animation: intro-logo 1.9s ease forwards; }

/* The menu's photograph. */
.menu__photo { position: relative; flex: none; height: 24vh; height: 24svh; margin: -1.25rem calc(var(--gutter) * -1) 0; overflow: hidden; background: var(--sand); }
.menu__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0; transition: opacity 1.1s ease; }
.menu__photo img.is-on { opacity: 1; }
@media (min-width: 761px) {
  .menu { padding-right: calc(50% + 2.5rem); }
  .menu__photo { position: fixed; top: 0; right: 0; bottom: 0; width: 50%; height: auto; margin: 0; }
}

/* Big client quotes. */
.quotes { position: relative; height: clamp(34rem, 92vh, 56rem); overflow: hidden; background: var(--charcoal); color: var(--ivory); }
.quote { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
.quote.is-on { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
.quote__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(0.5) saturate(0.85); }
.quote__words { position: relative; max-width: 58rem; padding: 2rem var(--gutter) 5rem; text-align: center; }
.quote__text { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 3rem); line-height: 1.3; }
.quote__by { margin-top: 1.75rem; font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.5rem); letter-spacing: 0.08em; text-transform: uppercase; }
.quote__link { display: inline-block; margin-top: 1.25rem; padding-bottom: 0.35rem; border-bottom: 1px solid currentColor; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; }
.quotes__dots { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; }
.quotes .stories__pause { bottom: 1rem; }

/* Album parts. */
.album-part { flex: 0 0 100%; padding-block: clamp(3rem, 9vh, 6rem) clamp(1.5rem, 4vh, 2.5rem); text-align: center; }
.album-part:first-child { padding-top: clamp(1.5rem, 4vh, 2.5rem); }
.album-part__no { font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text); }
.album-part__title { margin-top: 0.75rem; font-size: clamp(2rem, 5vw, 4rem); }

/* The View circle. */
.view-dot { position: fixed; left: 0; top: 0; z-index: 80; display: flex; align-items: center; justify-content: center; width: 4.75rem; height: 4.75rem; border-radius: 50%; background: rgba(243, 236, 224, 0.92); color: #4B443B; font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.view-dot.is-on { opacity: 1; }

/* The grand footer. */
.foot__grand { margin-top: clamp(3rem, 8vh, 5rem); overflow: hidden; text-align: center; }
.foot__word { margin-top: clamp(1.5rem, 4vh, 2.5rem); font-family: var(--serif); font-size: clamp(3rem, 13.2vw, 13rem); line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.foot__word { font-size: clamp(2rem, 12.2vw, 11.4rem); }

/* Corrections. */
/* Sections that slide over a pinned photograph or film must cover it completely. */
.marks { background: var(--ivory); }
:where(.pin > :not(.banner):not(.hero):not(.reel):not(.pin)) { background: var(--ivory); }

/* The numbers bar on Reviews: clear on the dark panel. */
.page-hero--intro .reviews-proof { background: rgba(251, 249, 245, 0.07); border: 1px solid rgba(232, 223, 210, 0.35); border-radius: 0; }
.page-hero--intro .proof__item { color: #FBF9F5; }
.page-hero--intro .proof__item strong { color: #F2E3BE; }

/* The last invitation in the footer: simple and calm. */
.foot__grand { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--line-soft); }

/* Watermark: always the whole name, on every screen. */
.page-hero--intro::before, .marks::before, .films__intro::before, .careers-intro::before { font-size: clamp(4rem, 17vw, 18rem); }
.section.rate--alt:has(.founder__name)::after { right: 50%; bottom: 0.5rem; transform: translateX(50%); font-size: clamp(4rem, 17vw, 16rem); }

/* 32. WEDDINGS ACROSS CANADA ============================================= */

.canada-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(1.5rem, 4vh, 2.5rem) var(--grid-gap); max-width: 68rem; margin: 0 auto; padding: 0; list-style: none; }
.canada-zones__item { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.canada-zones__title { margin-bottom: 0.6rem; font-family: var(--serif); font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 400; }
.canada-zones__item p, .canada-steps p, .canada-promise li { color: var(--ink-soft); line-height: 1.7; }
.canada-note { margin-top: 2.5rem; text-align: center; }
.canada-note a, .canada-promise a, #weddings .lede a { text-decoration: underline; text-underline-offset: 3px; }
.canada-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); max-width: 68rem; margin: 0 auto; padding: 0; list-style: none; counter-reset: step; }
.canada-steps li { counter-increment: step; }
.canada-steps li::before { content: "0" counter(step); display: block; margin-bottom: 0.75rem; font-family: var(--serif); font-size: 2rem; color: var(--taupe-text); }
.canada-steps h3 { margin-bottom: 0.5rem; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.canada-promise { display: grid; gap: 1rem; max-width: 46rem; margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.canada-albums { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem var(--grid-gap); max-width: 60rem; margin: 0 auto; padding: 0; list-style: none; }
.canada-albums a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.canada-albums__names { font-family: var(--serif); font-size: 1.2rem; }
.canada-albums__kind { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe-text); }
.places__link { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .canada-steps { grid-template-columns: minmax(0, 1fr); text-align: center; } }

/* 33. LIMITED-TIME OFFER ================================================= */
/* In the site's own palette: the new price in charcoal, the old one in taupe with a
   fine gold line, and gold only for the small labels and frames. */

.offer-was { color: var(--taupe-text); font-size: 0.6em; margin-right: 0.35em; text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: 1px; }
.offer-now { color: var(--ink); }
.offer-extra { color: var(--gold-text); }
.offer-banner { position: relative; max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vh, 4rem); padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); text-align: center; background: var(--ivory); border: 1px solid var(--gold); outline: 1px solid rgba(176, 141, 76, 0.35); outline-offset: 6px; }
.offer-banner__tag, .offer-tag { margin: 0 0 0.8rem; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-text); }
.offer-banner__big { margin: 0 0 0.8rem; font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 400; line-height: 1.15; color: var(--ink); }
.offer-banner__big span { font-style: italic; font-size: 1.35em; color: var(--gold-text); margin-right: 0.1em; }
.offer-banner__small { max-width: 34rem; margin: 0 auto 1.4rem; color: var(--ink-soft); line-height: 1.7; }
.offer-banner__cta { margin: 0; }
.tier__price small .offer-was { font-size: 1em; }

/* The featured home card: ivory with a gold frame instead of black. */
.tier--feature { background: var(--ivory); color: var(--ink); border: 1px solid var(--gold); outline: 1px solid rgba(176, 141, 76, 0.35); outline-offset: 6px; }
.tier--feature .eyebrow, .tier--feature .tier__price small, .tier--feature .tier__from { color: var(--taupe-text); }
.tier--feature .tier__note { color: var(--ink-soft); }
.tier--feature .tier__list { border-top-color: var(--line); }
.tier--feature .tier__list li { border-bottom-color: var(--line-soft); }
.tier--feature .btn--solid { background: var(--ink); color: var(--ivory); }
.tier--feature .btn--solid:hover { background: var(--ink-soft); }
.tier--feature :focus-visible { outline-color: var(--ink); }
.tier--feature .offer-tag { color: var(--gold-text); }

/* The featured home card in an elegant charcoal grey, ivory text and a sand button. */
.tier--feature { --grey: #3F4246; background: linear-gradient(165deg, #474A4F 0%, #36393D 100%); color: var(--ivory); border: 1px solid #5A5E63; outline: 1px solid rgba(63, 66, 70, 0.4); outline-offset: 6px; }   /* ivory 9.6:1 */
.tier--feature .eyebrow, .tier--feature .tier__price small, .tier--feature .tier__from { color: var(--sand); }   /* 8.1:1 */
.tier--feature .offer-tag { color: var(--gold-light); }   /* 8.4:1 */
.tier--feature .offer-now { color: var(--ivory); }
.tier--feature .offer-was { color: rgba(251, 249, 245, 0.8); text-decoration-color: var(--gold-light); }
.tier--feature .tier__note { color: rgba(251, 249, 245, 0.88); }
.tier--feature .tier__list { border-top-color: rgba(251, 249, 245, 0.22); }
.tier--feature .tier__list li { border-bottom-color: rgba(251, 249, 245, 0.12); }
.tier--feature .btn--solid { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.tier--feature .btn--solid:hover { background: var(--ivory); border-color: var(--ivory); }
.tier--feature :focus-visible { outline-color: var(--ivory); }