/* ==========================================================================
   StoryTeller Photography — design system
   Everything visual is controlled from the tokens in :root below.
   Change a token here and it updates everywhere on the site.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Colour — warm neutral palette carried over from the original site */
  --paper:        #fbf9f6;   /* page background, warm off-white          */
  --paper-alt:    #f2ece3;   /* alternating band background, warm sand   */
  --paper-deep:   #e7ded1;   /* subtle third tone                        */
  --ink:          #1c1916;   /* headings, warm near-black                */
  --ink-soft:     #4d463d;   /* body copy                                */
  --muted:        #8b8177;   /* captions, meta, placeholders             */
  --line:         #e2d9cc;   /* hairlines and borders                    */
  --accent:       #9a7d5c;   /* bronze — rules, hovers, small details    */
  --accent-deep:  #6f5942;   /* bronze, pressed / hover state            */
  --on-dark:      #f5f0e8;   /* text on the dark sections                */
  --on-dark-mute: #b0a595;

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.16vw, 1.06rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.40rem);
  --step-2:  clamp(1.50rem, 1.32rem + 0.90vw, 2.15rem);
  --step-3:  clamp(2.00rem, 1.60rem + 2.00vw, 3.40rem);
  --step-4:  clamp(2.60rem, 1.80rem + 4.00vw, 5.60rem);

  /* Space */
  --gutter:  clamp(1.25rem, 0.9rem + 1.8vw, 2.75rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --measure: 62ch;

  /* Shell */
  --wrap:      1320px;
  --wrap-slim: 940px;
  --wrap-text: 720px;
  --nav-h:     84px;
  --nav-h-sm:  64px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       0.6s;
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.35em; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: var(--gutter) 0;
}

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

::selection { background: var(--accent); color: var(--paper); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 1000;
  background: var(--ink); color: var(--on-dark);
  padding: 0.75rem 1.5rem; font-size: var(--step--1);
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. Layout helpers -------------------------------------------- */

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

.section       { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * 0.6); }
.band-alt      { background: var(--paper-alt); --reveal-cover: var(--paper-alt); }
.band-dark     { background: var(--ink); color: var(--on-dark-mute); --reveal-cover: var(--ink); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--on-dark); }

.center     { text-align: center; }
.center p   { margin-inline: auto; }
.stack > * + * { margin-top: 1.15em; }

/* Small uppercase label used above headings */
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::after {
  content: "";
  flex: 0 0 clamp(28px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.center .eyebrow { justify-content: center; }
.center .eyebrow::before {
  content: "";
  flex: 0 0 clamp(28px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 300;
}

.meta {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 4. Buttons --------------------------------------------------- */

.btn {
  --btn-fg: var(--paper);
  --btn-bg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 2.3em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left center;
}
.btn:hover, .btn:focus-visible { border-color: var(--accent); color: var(--paper); }

.btn-ghost { --btn-fg: var(--ink); --btn-bg: transparent; border-color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--paper); }

.btn-light { --btn-fg: var(--ink); --btn-bg: var(--paper); }
.btn-light:hover, .btn-light:focus-visible { color: var(--paper); }

.btn-outline-light { --btn-fg: var(--on-dark); --btn-bg: transparent; border-color: rgba(245,240,232,0.45); }

/* Underline text link with a wipe */
.link-u {
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 0.35em;
  position: relative;
  color: var(--ink);
}
.link-u::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 0.45s var(--ease);
}
.link-u:hover::after, .link-u:focus-visible::after {
  animation: wipe 0.7s var(--ease);
}
@keyframes wipe {
  0%   { transform: scaleX(1); transform-origin: right center; }
  49%  { transform: scaleX(0); transform-origin: right center; }
  50%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

/* ---------- 5. Header / navigation --------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: height 0.45s var(--ease), background-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease), color 0.45s var(--ease);
  color: var(--ink);
}

/* Transparent over a hero image, until scrolled */
.site-header[data-over-hero="true"]:not(.is-stuck) {
  color: var(--on-dark);
  background: linear-gradient(to bottom, rgba(20,17,14,0.42), rgba(20,17,14,0));
}
.site-header.is-stuck {
  height: var(--nav-h-sm);
  background: rgba(251,249,246,0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
.site-header.is-hidden { transform: translateY(-100%); }

/* With the mobile drawer open the background behind the header is the pale
   drawer, not the hero photo — so the wordmark and burger must go dark. */
body.nav-open .site-header,
body.nav-open .site-header[data-over-hero="true"] {
  color: var(--ink);
  background: transparent;
}
.site-header { transition-property: height, background-color, box-shadow, color, transform; }

.nav-inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
}

.brand {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}
.brand small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.48em;
  letter-spacing: 0.42em;
  margin-top: 0.5em;
  opacity: 0.72;
  font-weight: 300;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 0.4rem + 1.6vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list > li { margin: 0; position: relative; }

.nav-link {
  display: inline-block;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0.6rem 0;
  position: relative;
  color: currentColor;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0.15rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s var(--ease);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-item.is-open > .nav-link::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }

.nav-link .caret {
  display: inline-block;
  width: 0.42em; height: 0.42em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.2em) rotate(45deg);
  margin-left: 0.55em;
  transition: transform 0.35s var(--ease);
}
.nav-item.is-open .caret { transform: translateY(0.05em) rotate(-135deg); }

.drawer-group > button .caret {
  display: inline-block;
  width: 0.34em; height: 0.34em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.25em) rotate(45deg);
  transition: transform 0.35s var(--ease);
  flex: none;
  margin-right: 0.4em;
}
.drawer-group.is-open > button .caret { transform: translateY(0.05em) rotate(-135deg); }

/* Desktop dropdown */
.subnav {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, 8px);
  min-width: 190px;
  list-style: none;
  margin: 0;
  padding: 0.6rem 0;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 22px 48px -26px rgba(28,25,22,0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.35s var(--ease), visibility 0.3s;
}
.nav-item.is-open > .subnav {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
.subnav li { margin: 0; }
.subnav a {
  display: block;
  padding: 0.6rem 1.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), padding-left 0.3s var(--ease);
}
.subnav a:hover, .subnav a:focus-visible, .subnav a[aria-current="page"] {
  background: var(--paper-alt); color: var(--ink); padding-left: 1.85rem;
}

.nav-cta { display: inline-flex; }
.nav-cta .btn { padding: 0.85em 1.7em; }
.site-header[data-over-hero="true"]:not(.is-stuck) .nav-cta .btn {
  --btn-fg: var(--on-dark);
  --btn-bg: transparent;
  border-color: rgba(245,240,232,0.5);
}

/* Burger */
.burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  color: currentColor;
  position: relative;
}
.burger span {
  position: absolute; left: 10px;
  width: 24px; height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease), visibility 0.7s;
  visibility: hidden;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-list > li { margin: 0; border-bottom: 1px solid var(--line); }
.drawer-list > li > a,
.drawer-list > li > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  background: none; border: 0; text-align: left; cursor: pointer;
  line-height: 1.1;
}
.drawer-sub {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.drawer-sub > div { overflow: hidden; }
.drawer-group.is-open .drawer-sub { grid-template-rows: 1fr; }
.drawer-sub a {
  display: block;
  padding: 0.6rem 0 0.6rem 1.2rem;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
}
.drawer-sub li:last-child a { padding-bottom: 1.3rem; }

/* Staggered reveal of drawer items */
.drawer-list > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.drawer.is-open .drawer-list > li { opacity: 1; transform: none; }
.drawer.is-open .drawer-list > li:nth-child(1) { transition-delay: 0.14s; }
.drawer.is-open .drawer-list > li:nth-child(2) { transition-delay: 0.20s; }
.drawer.is-open .drawer-list > li:nth-child(3) { transition-delay: 0.26s; }
.drawer.is-open .drawer-list > li:nth-child(4) { transition-delay: 0.32s; }
.drawer.is-open .drawer-list > li:nth-child(5) { transition-delay: 0.38s; }
.drawer.is-open .drawer-list > li:nth-child(6) { transition-delay: 0.44s; }
.drawer.is-open .drawer-list > li:nth-child(7) { transition-delay: 0.50s; }

.drawer-foot {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .nav-list, .nav-cta { display: none; }
  .burger { display: block; }
}
@media (min-width: 1001px) {
  .drawer { display: none; }
}

/* ---------- 6. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: end center;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}
.hero-media {
  position: absolute; inset: 0;
  z-index: -2;
}
/* The hero fills the viewport, so its image wrapper must ignore the fixed
   aspect ratio every other image box uses. */
.hero-media .ph {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}
.hero-media .ph::after { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.hero-media picture { height: 100%; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: kenburns 24s var(--ease-soft) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(0, -1.5%, 0); }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(20,17,14,0.44) 0%, rgba(20,17,14,0.08) 28%,
      rgba(20,17,14,0.55) 72%, rgba(20,17,14,0.86) 100%);
}
.hero-inner {
  width: 100%;
  max-width: var(--wrap);
  padding: 0 var(--gutter) clamp(5.5rem, 13vh, 9rem);
  text-align: center;
  color: var(--on-dark);
}
.hero-inner p { margin-inline: auto; }
.hero h1 {
  color: var(--on-dark);
  font-style: italic;
  font-size: var(--step-4);
  margin-bottom: 0.35em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.28);
}
.hero .meta {
  color: rgba(245,240,232,0.92);
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}

/* Compact hero for interior pages */
.hero-sm { min-height: clamp(46vh, 52svh, 620px); }
.hero-sm .hero-inner { padding-bottom: clamp(2.75rem, 6vh, 5rem); }
.hero-sm h1 { font-size: var(--step-3); font-style: normal; }

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  color: rgba(245,240,232,0.75);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
@media (max-height: 780px) {
  .scroll-cue { display: none; }
}
.scroll-cue i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(245,240,232,0.85), rgba(245,240,232,0));
  transform-origin: top;
  animation: cue 2.4s var(--ease-soft) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* ---------- 7. Reveal on scroll ------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* The wipe reveal.
   This is deliberately done with a sliding cover rather than by clipping the
   panel itself. An element clipped to zero height has no visible area, and the
   browser then reports it as never intersecting the viewport — so the observer
   that removes the clip never fires, the panel stays hidden forever, and any
   lazily loaded image inside it is never requested. Covering the panel leaves
   the panel itself perfectly visible to the observer. */
[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  position: relative;
}
[data-reveal="mask"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--reveal-cover, var(--paper));
  transform-origin: center bottom;
  transition: transform 1.05s var(--ease);
  transition-delay: var(--delay, 0s);
  pointer-events: none;
}
[data-reveal="mask"].is-in::before { transform: scaleY(0); }

/* ---------- 8. Images ---------------------------------------------------- */

/* Wrapper keeps the exact aspect ratio so nothing shifts while loading,
   and holds the tiny blurred placeholder behind the real photo. */
.ph {
  position: relative;
  overflow: hidden;
  background: var(--paper-deep) center/cover no-repeat;
  aspect-ratio: var(--ar, 3 / 2);
}
.ph picture { display: contents; }
.ph img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.85s var(--ease), transform 0.9s var(--ease);
}
.ph img.is-loaded { opacity: 1; }
.js .ph::after {
  content: "";
  position: absolute; inset: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.ph.is-ready::after { opacity: 0; }

.ph-zoom img { transition: opacity 0.85s var(--ease), transform 1.1s var(--ease); }
.ph-zoom:hover img.is-loaded { transform: scale(1.045); }

.ar-portrait  { --ar: 2 / 3; }
.ar-square    { --ar: 1 / 1; }
.ar-landscape { --ar: 3 / 2; }
.ar-wide      { --ar: 16 / 9; }
.ar-tall      { --ar: 4 / 5; }

figure { margin: 0; }
figcaption {
  margin-top: 0.85rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 9. Marquee --------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: clamp(1.1rem, 2vw, 1.8rem);
  user-select: none;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  color: var(--ink-soft);
  padding-inline: 0.6em;
  white-space: nowrap;
}
.marquee-track span::after {
  content: "·";
  padding-left: 1.2em;
  color: var(--accent);
  font-style: normal;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 10. Editorial split ------------------------------------------ */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split.split-40 { grid-template-columns: 0.85fr 1.15fr; }
  .split.split-60 { grid-template-columns: 1.15fr 0.85fr; }
  .split.reverse > *:first-child { order: 2; }
}
.split.split-top { align-items: start; }
.split-media { position: relative; }
.split-media .stamp {
  position: absolute;
  right: clamp(-1rem, -2vw, -2rem);
  bottom: clamp(-1rem, -2vw, -2rem);
  background: var(--paper);
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--ink);
  box-shadow: 0 24px 50px -30px rgba(28,25,22,0.5);
  max-width: 62%;
}
.band-alt .split-media .stamp { background: var(--paper-alt); }

/* ---------- 11. Card grids ----------------------------------------------- */

.grid {
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* Four-up rows of photo cards: two across on a phone (one huge card per
   screen makes the page endless), four across from tablet width up. */
.grid-4 { grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 2.5rem); }
@media (min-width: 760px)  { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Five session types across the home page. Two up on a phone, then five. */
.grid-5 { grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2vw, 2rem); }
@media (min-width: 700px)  { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .grid-5 { grid-template-columns: repeat(5, 1fr); } }

/* Category / service card with an image and a wipe overlay */
.card-link {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--on-dark);
  isolation: isolate;
}
.card-link .ph { aspect-ratio: var(--ar, 4 / 5); }
.card-link::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,17,14,0.74) 0%, rgba(20,17,14,0.16) 46%, rgba(20,17,14,0.04) 100%);
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.card-link:hover::after { opacity: 0.82; }
.card-link .card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  z-index: 2;
}
.card-link h3 {
  color: var(--on-dark);
  font-size: var(--step-2);
  margin-bottom: 0.15em;
}
.card-link .card-more {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.9);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.card-link:hover .card-more,
.card-link:focus-visible .card-more { opacity: 1; transform: none; }
.card-link .card-more::after {
  content: "";
  width: 1.6em; height: 1px;
  background: currentColor;
}
@media (hover: none) {
  .card-link .card-more { opacity: 1; transform: none; }
}

/* Plain content card */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.band-alt .card { background: var(--paper); }
a.card:hover, a.card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 30px 55px -38px rgba(28,25,22,0.55);
  border-color: var(--accent);
}

/* ---------- 12. Pricing -------------------------------------------------- */

.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.9rem, 3.4vw, 3.2rem);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.price-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 34px 60px -40px rgba(28,25,22,0.5);
}
.price-card.is-featured { border-color: var(--accent); }
.price-card .tag {
  position: absolute;
  top: 0; right: clamp(1.5rem, 3vw, 2.6rem);
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--paper);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.5em 1.1em;
  border-radius: 999px;
}
.price-card h3 { margin-bottom: 0.1em; }
.price-card .price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--ink);
  line-height: 1;
  margin: 0.7rem 0 0.2rem;
}
.price-card .price sup {
  font-family: var(--font-sans);
  font-size: 0.32em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: super;
  margin-left: 0.5em;
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 2rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  flex: 1;
}
.price-card li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.7em;
  font-size: var(--step-0);
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 0.75em; height: 1px;
  background: var(--accent);
}

/* Add-on / à la carte rows */
.rows { border-top: 1px solid var(--line); }
.rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.rows dt, .rows .k { font-size: var(--step-0); color: var(--ink-soft); }
.rows dd, .rows .v {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- 13. Process / numbered steps --------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  counter-reset: step;
}
.steps li {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.6rem;
}
@media (min-width: 900px) {
  .steps-3 { grid-template-columns: repeat(3, 1fr); }
}
.steps h4 { margin-bottom: 0.3em; font-family: var(--font-sans); font-size: var(--step-0);
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; }
.steps p { font-size: var(--step--1); line-height: 1.7; color: var(--muted); }
.band-dark .steps li { border-color: rgba(245,240,232,0.18); }
.band-dark .steps h4 { color: var(--on-dark); }
.band-dark .steps p { color: var(--on-dark-mute); }

/* ---------- 14. Testimonial ---------------------------------------------- */

.quote {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.quote blockquote {
  margin: 0;
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.42;
  color: var(--ink);
}
.band-dark .quote blockquote { color: var(--on-dark); }
.quote cite {
  display: block;
  margin-top: 1.8rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.4;
  color: var(--accent);
  opacity: 0.34;
  display: block;
  margin-bottom: 1.2rem;
}

/* ---------- 15. Gallery -------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.4rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.filters button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.7em 1.5em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.filters button:hover { border-color: var(--accent); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* CSS columns give a natural masonry without any layout library */
.masonry {
  columns: 3 300px;
  column-gap: clamp(0.6rem, 1.4vw, 1.4rem);
}
.masonry > * {
  break-inside: avoid;
  margin-bottom: clamp(0.6rem, 1.4vw, 1.4rem);
}
@media (max-width: 620px) { .masonry { columns: 2 150px; } }

.tile {
  display: block;
  width: 100%;
  border: 0; padding: 0; background: none;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.tile .ph { aspect-ratio: var(--ar, 3 / 2); }
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(20,17,14,0.16);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile .tile-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 44px; height: 44px;
  border: 1px solid rgba(245,240,232,0.85);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--on-dark);
  opacity: 0;
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
  z-index: 2;
  font-size: 1.1rem;
  line-height: 1;
}
.tile:hover .tile-icon, .tile:focus-visible .tile-icon {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.tile.is-hidden { display: none; }

/* ---------- 16. Lightbox ------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(16,14,12,0.97);
  display: grid;
  /* minmax(0,1fr) — without the 0 minimum a tall photo forces the row to grow
     and the image spills off the bottom of the screen. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* The site header must get out of the way while a photo is open. */
body.lb-open .site-header,
body.lb-open .to-top { opacity: 0; pointer-events: none; }

.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem var(--gutter);
  color: var(--on-dark-mute);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
}
.lb-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
/* Absolute + auto margins centres the photo and lets max-width/max-height
   resolve against a box with a known size, so tall portraits always fit. */
.lb-stage img {
  position: absolute;
  inset: 0 clamp(3.5rem, 8vw, 6rem);
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9);
}
.lb-stage img.is-loaded { opacity: 1; transform: none; }

.lb-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(44px, 6vw, 60px);
  height: clamp(44px, 6vw, 60px);
  border: 1px solid rgba(245,240,232,0.28);
  border-radius: 50%;
  background: rgba(20,17,14,0.35);
  color: var(--on-dark);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.lb-btn:hover { background: var(--accent); border-color: var(--accent); }
.lb-prev { left: clamp(0.4rem, 2vw, 2rem); }
.lb-next { right: clamp(0.4rem, 2vw, 2rem); }
.lb-btn svg { width: 40%; height: 40%; }

.lb-close {
  border: 0; background: none; color: var(--on-dark);
  cursor: pointer; font-size: var(--step--1);
  letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.4rem;
}
.lb-close:hover { color: var(--accent); }

.lb-foot {
  padding: 1rem var(--gutter) 1.6rem;
  text-align: center;
  color: var(--on-dark-mute);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
}

/* ---------- 17. Contact -------------------------------------------------- */

.field { margin-bottom: 1.6rem; position: relative; }
.field label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
  appearance: none;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.7; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field .hint { font-size: var(--step--1); color: var(--muted); margin-top: 0.5rem; }

.form-note {
  font-size: var(--step--1);
  color: var(--muted);
  margin-top: 1.4rem;
  line-height: 1.65;
}
.form-status {
  margin-top: 1.2rem;
  padding: 0.9rem 1.2rem;
  border-left: 2px solid var(--accent);
  background: var(--paper-alt);
  font-size: var(--step--1);
  display: none;
}
.form-status.is-shown { display: block; }

.contact-lines { list-style: none; padding: 0; margin: 0; }
.contact-lines li {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.contact-lines .k {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-lines .v { font-family: var(--font-display); font-size: var(--step-1); color: var(--ink); }
.contact-lines a.v:hover { color: var(--accent); }

/* ---------- 18. Prose (terms etc.) --------------------------------------- */

.prose h2 { font-size: var(--step-2); margin-top: 2.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; }
.prose p, .prose li { font-size: var(--step-0); }
.prose ul { padding-left: 1.1em; }

/* ---------- 19. Footer --------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--on-dark-mute);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
}
.footer-top {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(245,240,232,0.14);
}
@media (min-width: 780px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-footer .brand { color: var(--on-dark); }
.site-footer h4 {
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 1.2rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55em; }
.site-footer a { transition: color 0.3s var(--ease); }
.site-footer a:hover { color: var(--accent); }
.site-footer p { color: var(--on-dark-mute); }

.socials { display: flex; gap: 0.7rem; margin-top: 1.6rem; }
.socials a {
  width: 42px; height: 42px;
  border: 1px solid rgba(245,240,232,0.24);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--on-dark-mute);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.socials a:hover {
  background: var(--accent); border-color: var(--accent);
  color: var(--paper); transform: translateY(-3px);
}
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
}
.footer-bottom .hst { color: var(--muted); }

.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 90;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
              background-color 0.35s var(--ease), color 0.35s var(--ease);
  box-shadow: 0 18px 34px -22px rgba(28,25,22,0.6);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.to-top svg { width: 15px; height: 15px; }

/* ---------- 20. Utilities & motion preferences --------------------------- */

.pad-top-nav { padding-top: var(--nav-h); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.center .cta-row { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="mask"]::before { display: none !important; }
  .hero-media img { animation: none; transform: scale(1.02); }
  @media (max-height: 780px) {
  .scroll-cue { display: none; }
}
.scroll-cue i { animation: none; }
}

@media print {
  .site-header, .drawer, .to-top, .lightbox, .scroll-cue, .socials { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-reveal="mask"]::before { display: none !important; }
}


/* ---------- 21. Sprout Studio embeds ------------------------------------
   Sprout injects its own booking button and lead form. These rules pull that
   markup into the site's own type and button styling so it doesn't look like
   a bolted-on widget. If Sprout changes its class names the embed still
   works — it just falls back to their default look.
   ------------------------------------------------------------------------ */

.sprout-book {
  margin: 1.8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

/* Whatever Sprout renders as its call to action, make it read as our button. */
.sprout-book a,
.sprout-book button,
.sprout-book input[type="button"],
.sprout-book input[type="submit"],
.sprout-book [class*="sprout"][role="button"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 1.05em 2.3em !important;
  font-family: var(--font-sans) !important;
  font-size: var(--step--1) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.sprout-book a:hover,
.sprout-book button:hover,
.sprout-book input[type="button"]:hover,
.sprout-book input[type="submit"]:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* The lead form on the contact page. */
.sprout-form { max-width: var(--measure); }
.sprout-form iframe { width: 100% !important; border: 0; display: block; }

.sprout-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.sprout-form select,
.sprout-form textarea {
  width: 100% !important;
  font-family: var(--font-sans) !important;
  font-size: var(--step-0) !important;
  font-weight: 300 !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 0.7rem 0 !important;
  box-shadow: none !important;
}
.sprout-form input:focus, .sprout-form select:focus, .sprout-form textarea:focus {
  outline: none !important;
  border-bottom-color: var(--accent) !important;
}
.sprout-form label {
  font-family: var(--font-sans) !important;
  font-size: var(--step--1) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.sprout-form input[type="submit"],
.sprout-form button[type="submit"] {
  width: auto !important;
  padding: 1.05em 2.3em !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--paper) !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  cursor: pointer;
}
.sprout-form input[type="submit"]:hover,
.sprout-form button[type="submit"]:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}


/* ---------- 22. Booking overlay -----------------------------------------
   Used when Sprout's own embed has not appeared. Keeps the booking flow on
   the site rather than sending the visitor away to another domain.
   ------------------------------------------------------------------------ */

.book-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(16,14,12,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.book-overlay.is-open { opacity: 1; }

.book-panel {
  position: relative;
  width: min(760px, 100%);
  height: min(88vh, 900px);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,0.8);
  transform: translateY(12px);
  transition: transform 0.4s var(--ease);
}
.book-overlay.is-open .book-panel { transform: none; }

.book-close {
  align-self: flex-end;
  margin: 0.6rem 0.8rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.5rem;
}
.book-close:hover { color: var(--accent); }
.book-panel iframe { flex: 1; width: 100%; border: 0; }