/* ============================================================
   Chef Mikey: Private Chef
   Aesthetic: monochrome editorial, after hamletmargar.com.
   Black & white, geometric sans display type (Urbanist as a
   free stand-in for Commuters Sans), grayscale photography,
   cinematic reveal animations.
   ============================================================ */

:root {
  /* Palette drawn from the S27 plate: bone, sea-green glaze, gold.
     The "black" is a deep sea-green-black: reads black, has depth. */
  --white: #f5f2ea;
  --white-deep: #ebe6da;
  --black: #0e1a18;
  --black-soft: #14231f;
  --gray: #6e6a62;
  --gray-light: #a8a399;

  /* Accents from Michael's brief: sea green, gold, terracotta, cobalt, burgundy.
     Used sparingly: restraint is the luxury signal. */
  --sea: #1d6b60;
  --sea-light: #4a9b8e;
  --gold: #c8a44d;
  --gold-light: #e0c377;
  --clay: #b4633a;
  --clay-deep: #9d5430;
  --cobalt: #1c4f8a;
  --burgundy: #6d2233;

  --line: rgba(14, 26, 24, 0.14);
  --line-light: rgba(245, 242, 234, 0.18);

  --font-display: "Urbanist", "Helvetica Neue", sans-serif;
  --font-body: "Inter", "Helvetica Neue", sans-serif;
  --font-serif: "EB Garamond", Garamond, Georgia, serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Fibonacci spacing scale (8·13·21·34·55·89·144px).
     Hidden order: you feel the proportion without naming it. */
  --sp-1: 0.5rem;
  --sp-2: 0.8125rem;
  --sp-3: 1.3125rem;
  --sp-4: 2.125rem;
  --sp-5: 3.4375rem;
  --sp-6: 5.5625rem;
  --sp-7: 9rem;

  --section-pad: clamp(var(--sp-5), 10vw, var(--sp-7));
  --container: 1240px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--black);
  background: var(--white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--black); color: var(--white); }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0.045em;
}

h1 { font-size: clamp(2.4rem, 6.5vw, 5rem); letter-spacing: 0.06em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.9rem); margin-bottom: 1.6rem; }
h3 { font-size: 1.05rem; letter-spacing: 0.14em; margin-bottom: 0.7rem; }

/* Outlined word: the hollow-type accent used across this genre */
h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
}

p { max-width: 60ch; font-size: 0.98rem; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1.4rem;
}

.centered { text-align: center; margin-left: auto; margin-right: auto; }

.lede { font-size: 1.08rem; color: var(--gray); }

/* ---------- Layout ---------- */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.container.narrow { max-width: 880px; }

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

.section-dark {
  background: var(--black);
  color: var(--white);
}

.section-dark .eyebrow { color: var(--gray-light); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

/* The inquiry column is much shorter than the form, so centring it left a
   large gap above the call toggle. Top-align just this section. */
#book .split { align-items: start; }

/* ---------- Monochrome imagery ----------
   All photography renders black & white and slowly
   colorizes on hover: the signature "b&w animation". */

.hero-media img,
.about-media img,
.service-media img,
.gallery-grid img {
  filter: grayscale(1) contrast(1.06);
  transition: filter 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

.about-media:hover img,
.service-card:hover .service-media img,
.gallery-grid figure:hover img {
  filter: grayscale(0) contrast(1);
}

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--black);
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  cursor: pointer;
}

/* Sliding-fill hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}

.btn-solid { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-solid::before { background: var(--white); }
.btn-solid:hover { color: var(--black); }
.btn-solid:hover::before { transform: translateY(0); }

.btn-ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn-ghost::before { background: var(--white); }
.btn-ghost:hover { color: var(--black); }
.btn-ghost:hover::before { transform: translateY(0); }

.btn-full { width: 100%; text-align: center; }

.text-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  color: var(--black);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--black);
  padding-bottom: 0.35rem;
  transition: opacity 0.3s ease;
}

.text-link:hover { opacity: 0.55; }

/* ---------- Header / Nav ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: rgba(244, 241, 234, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}

.nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: color 0.4s ease;
}

.site-header.scrolled .nav-brand { color: var(--black); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: opacity 0.3s ease, color 0.4s ease;
}

.site-header.scrolled .nav-links a { color: var(--black); }

.nav-links a:hover { opacity: 0.55; }

.nav-links .nav-cta {
  border: 1px solid currentColor;
  padding: 0.6rem 1.4rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 24px;
  position: relative;
  cursor: pointer;
  z-index: 110;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  color: var(--white);
  transition: all 0.3s ease;
}

.site-header.scrolled .nav-toggle span,
.site-header.menu-open .nav-toggle span { color: var(--black); }

.nav-toggle span:nth-child(1) { top: 6px; }
.nav-toggle span:nth-child(2) { top: 16px; }

.site-header.menu-open .nav-toggle span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.site-header.menu-open .nav-toggle span:nth-child(2) { top: 11px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  background: var(--black);
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(8, 8, 8, 0.55), rgba(8, 8, 8, 0.72));
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slow cinematic push-in */
  animation: kenburns 14s var(--ease-out) forwards;
}

@keyframes kenburns {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero-content { position: relative; padding: 7rem 1.5rem 4rem; }

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

/* Masked line reveal for the headline */
.hero h1 .line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0;
}

.hero h1 .line > span {
  display: inline-block;
  transform: translateY(112%);
}

html.js.loaded .hero h1 .line > span {
  animation: line-up 1.1s var(--ease-out) forwards;
}

html.js.loaded .hero h1 .line:nth-child(2) > span { animation-delay: 0.18s; }

@keyframes line-up {
  to { transform: translateY(0); }
}

/* No-JS fallback: headline simply visible */
html:not(.js) .hero h1 .line > span { transform: none; }

.hero-sub {
  margin: 2rem auto 3rem;
  font-size: 1.02rem;
  font-weight: 300;
  max-width: 46ch;
  color: rgba(244, 241, 234, 0.8);
}

.hero-actions {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.scroll-hint {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-hint span {
  display: block;
  width: 1px;
  height: 52px;
  background: rgba(244, 241, 234, 0.5);
  animation: drop 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes drop {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Marquee ---------- */

.marquee {
  background: var(--black);
  color: var(--white);
  border-top: 1px solid var(--line-light);
  overflow: hidden;
  padding: 1.3rem 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 26s linear infinite;
}

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

.marquee-track span {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee-track i {
  font-style: normal;
  color: var(--gray);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- About ---------- */

.about-media { position: relative; }

.about-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.about-media-accent {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  right: -1.5rem;
  bottom: -1.5rem;
  border: 1px solid var(--black);
  z-index: -1;
}

.about-copy p + p { margin-top: 1.2rem; }
.about-copy p { color: var(--gray); }

/* ---------- Services ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 4.5rem;
}

.service-card { text-align: left; }

.service-media {
  overflow: hidden;
  margin-bottom: 1.8rem;
}

.service-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-card:hover .service-media img { transform: scale(1.05); }

.service-card p { color: var(--gray-light); font-size: 0.92rem; }

.service-note {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Philosophy ---------- */

.philosophy .lede { margin: 0 auto; }

.philosophy-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 5rem;
  text-align: left;
}

.point {
  border-top: 1px solid var(--black);
  padding-top: 1.4rem;
}

.point-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 1rem;
}

.point h3 { font-size: 0.92rem; }

.point p { font-size: 0.92rem; color: var(--gray); }

/* ---------- Gallery ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 3.5rem;
  padding: 0 0.5rem;
}

.gallery-grid figure { overflow: hidden; }

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.gallery-grid figure:hover img { transform: scale(1.045); }

/* ---------- Testimonials ---------- */

.testimonial-track {
  position: relative;
  margin-top: 3rem;
  min-height: 240px;
}

.testimonial {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  text-align: center;
  pointer-events: none;
}

.testimonial.active { opacity: 1; pointer-events: auto; }

.testimonial p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.55;
  max-width: 38ch;
  margin: 0 auto 1.9rem;
}

.testimonial cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gray-light);
}

.testimonial-dots {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2.2rem;
}

.dot {
  width: 24px;
  height: 2px;
  border: none;
  background: rgba(244, 241, 234, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease;
}

.dot.active { background: var(--white); }

/* ---------- Contact ---------- */

.contact { background: var(--white-deep); }

.contact-copy p { color: var(--gray); }

.contact-details {
  list-style: none;
  margin-top: 2.2rem;
}

.contact-details li {
  display: flex;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}

.contact-details li span {
  min-width: 100px;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray);
  padding-top: 0.3rem;
}

.contact-details a { color: var(--black); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-details a:hover { border-color: var(--black); }

.contact-form {
  background: var(--white);
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--line);
}

.contact-form label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 1.3rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.55rem;
  padding: 0.8rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: normal;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line);
  outline: none;
  transition: border-color 0.3s ease;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--black); }

.form-success {
  margin-top: 1.2rem;
  text-align: center;
  color: var(--black);
  font-size: 0.9rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 4rem 0;
  text-align: center;
}

.footer-inner { display: grid; gap: 1rem; justify-items: center; }

.site-footer .nav-brand { color: var(--white); }

.site-footer p {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-light);
}

.footer-fine {
  font-size: 0.62rem !important;
  color: var(--gray) !important;
}

/* ---------- Reveal animation (only when JS is running) ---------- */

html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--stagger, 0s);
}

html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-media img { animation: none; }
  .marquee-track { animation: none; }
  .hero h1 .line > span { transform: none !important; animation: none !important; }
}

/* ---------- Responsive ---------- */

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

  .services-grid,
  .philosophy-points { grid-template-columns: 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .about-media { max-width: 480px; }

  .nav-toggle { display: block; }

  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.45s var(--ease-out), visibility 0s 0.45s;
  }

  .site-header.menu-open .nav-links {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.45s var(--ease-out), visibility 0s;
  }

  .nav-links a { color: var(--black) !important; font-size: 0.9rem; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CVW rebrand additions: Michael Sanchez
   Warm bone/ink palette, serif editorial accents (Nobu),
   clay color-panel moment for The Constitution (Momofuku).
   ============================================================ */

/* ---------- Accent link hover ---------- */

.text-link:hover { opacity: 1; color: var(--clay); border-color: var(--clay); }

/* ---------- Nav: Assessment tab ---------- */

.nav-links .nav-assess {
  border: 1px solid var(--clay);
  color: var(--white);
  padding: 0.6rem 1.4rem;
  transition: background 0.35s ease, color 0.35s ease, opacity 0.3s ease;
}

.site-header.scrolled .nav-links .nav-assess { color: var(--clay); }

.nav-links .nav-assess:hover {
  background: var(--clay);
  color: var(--white) !important;
  opacity: 1;
}

/* ---------- Statement (serif editorial moment) ---------- */

.statement { padding: clamp(4.5rem, 8vw, 7rem) 0; }

.statement-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
  line-height: 1.45;
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
  color: var(--black);
}

.statement-cite {
  display: block;
  text-align: center;
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gray);
}

/* ---------- Deep section variant (philosophy) ---------- */

.section-deep { background: var(--white-deep); }

/* ---------- Assessment band (the color panel) ---------- */

.band {
  background: var(--clay);
  color: var(--white);
  padding: var(--section-pad) 0;
}

.band .eyebrow { color: rgba(244, 241, 234, 0.75); }

.band h2 { color: var(--white); }

.band-copy p:not(.eyebrow) { color: rgba(244, 241, 234, 0.92); }

.band-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.band-quiz {
  border: 1px solid rgba(244, 241, 234, 0.4);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
}

.quiz-progress {
  display: block;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.7);
  margin-bottom: 1.1rem;
}

.quiz-q {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.3;
  margin-bottom: 1.6rem;
  color: inherit;
}

.quiz-opts { display: grid; gap: 0.7rem; }

.quiz-opt {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(244, 241, 234, 0.55);
  padding: 0.95rem 1rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.quiz-opt:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--clay-deep);
}

.quiz-more {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(244, 241, 234, 0.8);
  border-bottom: 1px solid rgba(244, 241, 234, 0.4);
  padding-bottom: 0.3rem;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.quiz-more:hover { color: var(--white); border-color: var(--white); }

/* ---------- Gallery captions ---------- */

.gallery-grid figure { position: relative; }

.gallery-grid figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem 0.9rem;
  background: linear-gradient(transparent, rgba(18, 17, 16, 0.72));
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.gallery-grid figure:hover figcaption { opacity: 1; }

/* ---------- Assessment page ---------- */

.assess-hero {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: clamp(9rem, 18vw, 13rem) 0 clamp(4rem, 8vw, 6rem);
}

.assess-hero .eyebrow { color: var(--gray-light); }

.assess-hero .hero-sub { margin: 1.8rem auto 0; }

.assess-hero h1 .line {
  display: block;
  overflow: hidden;
  padding: 0.06em 0;
}

.assess-hero h1 .line > span {
  display: inline-block;
  transform: translateY(112%);
}

html.js.loaded .assess-hero h1 .line > span {
  animation: line-up 1.1s var(--ease-out) forwards;
}

html.js.loaded .assess-hero h1 .line:nth-child(2) > span { animation-delay: 0.18s; }

html:not(.js) .assess-hero h1 .line > span { transform: none; }

/* ---------- Quiz card (assessment page stepper) ---------- */

.quiz-section { padding-top: clamp(3.5rem, 6vw, 5rem); }

.quiz-card {
  background: var(--clay);
  color: var(--white);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  max-width: 640px;
  margin: 0 auto;
}

.quiz-bar {
  height: 2px;
  background: rgba(244, 241, 234, 0.3);
  margin-bottom: 2.2rem;
}

.quiz-bar span {
  display: block;
  height: 100%;
  width: 8%;
  background: var(--white);
  transition: width 0.6s var(--ease-out);
}

.quiz-gate .capture-row { margin-top: 0.4rem; }

.quiz-note {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: rgba(244, 241, 234, 0.8);
}

.quiz-card .form-success { color: var(--white); text-align: left; }

/* ---------- Capture rows (email forms) ---------- */

.capture-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.capture-row input {
  flex: 1;
  min-width: 220px;
  padding: 0.95rem 1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--black);
  background: var(--white);
  border: 1px solid transparent;
  outline: none;
}

.capture-row .btn { white-space: nowrap; }

.quiz-card .btn-solid { background: var(--black); border-color: var(--black); }
.quiz-card .btn-solid:hover { color: var(--black); }

/* ---------- Plans (free vs membership) ---------- */

.plans {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 960px;
  margin: 4rem auto 0;
  align-items: start;
}

.plan {
  border: 1px solid var(--line-light);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
}

.plan-featured { border: 1px solid var(--clay); background: var(--black-soft); }

.plan h3 { margin-bottom: 0.4rem; }

.plan-price {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.plan-price small {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gray-light);
}

.plan-featured .plan-price { color: var(--clay); }
.plan-featured .plan-price small { color: rgba(244, 241, 234, 0.6); }

.plan ul {
  list-style: none;
  margin-bottom: 2rem;
}

.plan li {
  font-size: 0.92rem;
  color: rgba(244, 241, 234, 0.85);
  padding: 0.65rem 0 0.65rem 1.4rem;
  border-bottom: 1px solid var(--line-light);
  position: relative;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  color: var(--clay);
}

.plan-note {
  margin-top: 1.3rem;
  font-size: 0.82rem;
  color: var(--gray-light);
}

.plan .btn { width: 100%; text-align: center; }

.plan .btn-solid { background: var(--clay); border-color: var(--clay); }
.plan .btn-solid:hover { color: var(--clay-deep); }

/* ---------- Footer additions ---------- */

.footer-tag {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: rgba(244, 241, 234, 0.85) !important;
}

.footer-capture {
  width: 100%;
  max-width: 520px;
  margin: 1.2rem auto 0.6rem;
}

.footer-capture label {
  display: block;
  font-size: 0.8rem;
  color: var(--gray-light);
  margin-bottom: 0.9rem;
}

.footer-capture .form-success { color: var(--white); margin-top: 0.8rem; }

.footer-social {
  list-style: none;
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  margin: 0.8rem 0 0.4rem;
}

.footer-social a {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gray-light);
  transition: color 0.3s ease;
}

.footer-social a:hover { color: var(--white); }

/* ---------- Assessment page hero em stroke on dark stays white;
   fix outline color if band/hero ever sits on light ---------- */

.assess-hero h1 em { -webkit-text-stroke-color: var(--clay); }

/* ---------- Responsive additions ---------- */

@media (max-width: 900px) {
  .band-inner { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .nav-links .nav-assess { color: var(--clay) !important; }
}

/* ============================================================
   S27 additions: video cinematics + live assessment
   ============================================================ */

/* ---------- Hero & film video ---------- */

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  animation: kenburns 14s var(--ease-out) forwards;
}

.film {
  position: relative;
  height: clamp(320px, 55vh, 560px);
  overflow: hidden;
  background: var(--black);
}

.film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(0.7);
}

.film-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(rgba(18, 17, 16, 0.25), rgba(18, 17, 16, 0.45));
}

.film-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.4;
  color: var(--white);
  max-width: 26ch;
  padding: 0 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video { animation: none; }
}

/* ---------- Live dosha meter ---------- */

.quiz-meter {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 2.2rem;
}

.meter-row {
  display: grid;
  grid-template-columns: 3.6rem 1fr 3rem;
  align-items: center;
  gap: 0.9rem;
}

.meter-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.75);
}

.meter-track {
  height: 3px;
  background: rgba(244, 241, 234, 0.25);
  overflow: hidden;
}

.meter-track span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--white);
  transition: width 0.7s var(--ease-out);
}

.meter-val {
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: right;
  color: rgba(244, 241, 234, 0.7);
  transition: color 0.4s ease;
}

.meter-val.settled { color: var(--white); }

/* ---------- Per-answer insight ---------- */

.quiz-insight {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(244, 241, 234, 0.95);
  border-left: 2px solid rgba(244, 241, 234, 0.55);
  padding-left: 1rem;
  margin-bottom: 1.8rem;
}

/* ---------- Result (mini-profile before the gate) ---------- */

.result-title {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.result-read {
  font-size: 0.95rem;
  color: rgba(244, 241, 234, 0.92);
  margin-bottom: 1.8rem;
}

.result-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-bottom: 1.6rem;
}

.result-cols h4 {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.7);
  margin-bottom: 0.5rem;
}

.result-cols p {
  font-size: 0.88rem;
  color: rgba(244, 241, 234, 0.92);
}

.result-practice {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--white);
  border-left: 2px solid rgba(244, 241, 234, 0.55);
  padding-left: 1rem;
  margin-bottom: 2.2rem;
}

.quiz-gate { border-top: 1px solid rgba(244, 241, 234, 0.3); padding-top: 2rem; }

.quiz-restart {
  margin-top: 1.4rem;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.65);
  cursor: pointer;
  transition: color 0.3s ease;
}

.quiz-restart:hover { color: var(--white); }

@media (max-width: 560px) {
  .result-cols { grid-template-columns: 1fr; }
  .meter-row { grid-template-columns: 3rem 1fr 2.6rem; gap: 0.6rem; }
}

/* ============================================================
   Bio credentials + four-card experiences grid
   ============================================================ */

/* ---------- Credentials list (About) ---------- */

.cred-list {
  list-style: none;
  margin-top: 2.2rem;
  border-top: 1px solid var(--line);
}

.cred-list li {
  display: flex;
  gap: 1.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--gray);
}

.cred-list li span {
  flex-shrink: 0;
  min-width: 92px;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--clay);
  padding-top: 0.3rem;
}

/* ---------- Experiences: 2x2 grid for four cards ---------- */

.services-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
}

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

/* ---------- S27 brand emblem (statement section) ---------- */

.statement-mark {
  display: block;
  width: clamp(110px, 14vw, 150px);
  height: clamp(110px, 14vw, 150px);
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 2.2rem;
  filter: grayscale(0);
}

/* ---------- Experiences: four across ---------- */

.services-grid {
  grid-template-columns: repeat(4, 1fr);
  max-width: none;
}

.services-grid .service-card h3 { font-size: 0.92rem; }
.services-grid .service-card p { font-size: 0.86rem; }

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

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

/* ---------- Consultation scheduling embed ---------- */

.schedule .lede { margin: 0 auto; }

.schedule-embed {
  margin-top: 3rem;
  background: var(--white);
  border: 1px solid var(--line);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.schedule-embed iframe {
  width: 100%;
  height: 680px;
  border: 0;
  display: block;
}

.schedule-fallback {
  text-align: center;
  color: var(--gray);
  font-size: 0.95rem;
  max-width: 44ch;
}

.schedule-fallback a { color: var(--black); }

/* ---------- S27 mark: transparent PNG with lettering ---------- */

.statement-mark {
  width: clamp(150px, 18vw, 210px);
  height: auto;
  border-radius: 0;
  object-fit: unset;
}

/* ============================================================
   Real testimonials, inquiry-form spec, policies page
   ============================================================ */

.testimonial-source {
  text-align: center;
  margin: 1.6rem auto 0;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gray);
}

/* Five quotes vary in length: give the track room so the dots don't jump */
.testimonial-track { min-height: 300px; }

/* ---------- Inquiry form: terms checkbox ---------- */

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 0.82rem !important;
  line-height: 1.55;
  color: var(--gray) !important;
  margin-bottom: 1.6rem !important;
}

.check-row input[type="checkbox"] {
  width: auto;
  margin: 0.25rem 0 0;
  flex-shrink: 0;
  accent-color: var(--clay);
}

.check-row a { color: var(--black); }

/* ---------- Policies page ---------- */

.policy-page { padding-top: clamp(7rem, 14vw, 10rem); }

.policy-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: 2.5rem;
}

.policy-page h2 {
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}

.policy-page p { color: var(--gray); max-width: 68ch; }
.policy-page a { color: var(--black); }

.policy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 1.8rem;
  font-size: 0.92rem;
}

.policy-table th {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--clay);
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--black);
}

.policy-table td {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--gray);
}

.policy-table td:last-child { text-align: right; color: var(--black); }

.policy-rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4.5rem 0 3rem;
}

.policy-updated {
  margin-top: 3rem;
  font-size: 0.82rem !important;
  color: var(--gray-light) !important;
}

/* ============================================================
   BRAND LAYER: Gaudí as structure, not decoration
   Trencadís (broken tile) grid · Fibonacci proportion ·
   iridescence as behavior · catenary arches · desert light.
   Structure is unchanged; this is surface and geometry only.
   ============================================================ */

/* ---------- Desert light ----------
   A warm, low wash across pale sections: 4pm light, long and soft. */

.statement,
.about,
.gallery,
.contact {
  position: relative;
}

.statement::before,
.about::before,
.gallery::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 8%, rgba(200, 164, 77, 0.10), transparent 60%),
    radial-gradient(90% 70% at 5% 95%, rgba(29, 107, 96, 0.07), transparent 62%);
}

.statement > *,
.about > *,
.gallery > * { position: relative; z-index: 1; }

/* ---------- Iridescence ----------
   Nacre doesn't shine, it shifts. A slow spectral drift across the
   dark sections so the surface changes depending where you are in it. */

.section-dark,
.hero,
.film { position: relative; }

.section-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: linear-gradient(
    115deg,
    rgba(29, 107, 96, 0.20) 0%,
    rgba(28, 79, 138, 0.14) 22%,
    rgba(200, 164, 77, 0.10) 45%,
    rgba(109, 34, 51, 0.14) 68%,
    rgba(29, 107, 96, 0.20) 100%
  );
  background-size: 300% 300%;
  animation: nacre 26s ease-in-out infinite;
}

.section-dark > * { position: relative; z-index: 1; }

@keyframes nacre {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero gets the same shift, layered over the video */
.hero-media::after {
  background:
    linear-gradient(
      115deg,
      rgba(29, 107, 96, 0.28) 0%,
      rgba(28, 79, 138, 0.20) 30%,
      rgba(200, 164, 77, 0.12) 55%,
      rgba(109, 34, 51, 0.22) 80%,
      rgba(29, 107, 96, 0.28) 100%
    ),
    linear-gradient(rgba(8, 14, 13, 0.62), rgba(8, 14, 13, 0.74));
  background-size: 300% 300%, 100% 100%;
  animation: nacre 26s ease-in-out infinite;
}

/* The outlined hero word picks up gold rather than plain white */
h1 em { -webkit-text-stroke-color: var(--gold-light); }

/* ---------- Catenary arch ----------
   Gaudí's arch, used once, on the portrait. Structural, not ornamental. */

.about-media img {
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
}

.about-media-accent {
  border-color: var(--gold);
  border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  opacity: 0.55;
}

/* ---------- Trencadís gallery ----------
   Broken tiles of unequal size, reassembled into one whole surface.
   Tight grout lines. 4 columns × 6 rows, filled exactly. */

.gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(110px, 13vw, 190px);
  grid-auto-flow: dense;
  gap: 5px;
  padding: 0 5px;
}

.gallery-grid figure { height: 100%; }
.gallery-grid img { height: 100%; aspect-ratio: auto; }

/* Six tiles, 4 columns x 4 rows, filled exactly */
.gallery-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid figure:nth-child(2) { grid-column: span 2; grid-row: span 1; }
.gallery-grid figure:nth-child(3) { grid-column: span 1; grid-row: span 1; }
.gallery-grid figure:nth-child(4) { grid-column: span 1; grid-row: span 1; }
.gallery-grid figure:nth-child(5) { grid-column: span 2; grid-row: span 2; }
.gallery-grid figure:nth-child(6) { grid-column: span 2; grid-row: span 2; }

/* A tile catches the light when you touch it */
.gallery-grid figure { position: relative; }

.gallery-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  background: linear-gradient(
    130deg,
    rgba(200, 164, 77, 0.22) 0%,
    transparent 38%,
    rgba(74, 155, 142, 0.20) 72%,
    transparent 100%
  );
}

.gallery-grid figure:hover::after { opacity: 1; }

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(130px, 30vw, 210px);
  }
  .gallery-grid figure:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gallery-grid figure:nth-child(1),
  .gallery-grid figure:nth-child(6) { grid-column: span 2; grid-row: span 2; }
}

/* ---------- Gold where the brand touches ---------- */

.section-dark .eyebrow { color: var(--gold-light); }
.point-num { color: var(--gold); }
.service-note { color: var(--gold-light); }
.testimonial cite { color: var(--gold-light); }
.dot.active { background: var(--gold); }
.cred-list li span { color: var(--sea); }
.text-link { border-bottom-color: var(--gold); }
.text-link:hover { color: var(--sea); border-color: var(--sea); }
.statement-cite { color: var(--sea); }

/* Marquee: sea-green rule above, gold separators */
.marquee { border-top-color: rgba(200, 164, 77, 0.35); }
.marquee-track i { color: var(--gold); }

/* Footer keeps the gold thread */
.site-footer .footer-tag { color: var(--gold-light) !important; }
.footer-social a:hover { color: var(--gold-light); }

/* Film-band quote, lit warm */
.film-quote { color: var(--white); text-shadow: 0 2px 40px rgba(8, 14, 13, 0.5); }

/* ---------- Reduced motion: hold the sheen still ---------- */

@media (prefers-reduced-motion: reduce) {
  .section-dark::before,
  .hero-media::after { animation: none; }
}

/* ---------- Availability calendar ---------- */

.cal {
  border: 1px solid var(--line);
  background: var(--white);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.cal-month {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.cal-nav {
  background: none;
  border: 1px solid var(--line);
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: var(--black);
  font-size: 0.8rem;
  line-height: 1;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.cal-nav:hover { border-color: var(--sea); color: var(--sea); }

.cal-dow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-dow {
  margin-bottom: 3px;
}

.cal-dow span {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gray-light);
  padding-bottom: 0.3rem;
}

.cal-day {
  aspect-ratio: 1;
  border: 1px solid transparent;
  background: var(--white-deep);
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--black);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.cal-day:hover:not(:disabled) {
  background: var(--sea);
  color: var(--white);
}

.cal-day.is-past {
  background: transparent;
  color: var(--gray-light);
  opacity: 0.4;
  cursor: default;
}

/* Booked days: struck through with a soft burgundy: legible, not alarming */
.cal-day.is-busy {
  background: transparent;
  color: var(--gray-light);
  cursor: not-allowed;
  position: relative;
  overflow: hidden;
}

.cal-day.is-busy::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 1px;
  background: var(--burgundy);
  opacity: 0.5;
}

.cal-day.is-selected {
  background: var(--black);
  color: var(--white);
  border-color: var(--gold);
}

.cal-pad { aspect-ratio: 1; }

.cal-legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray);
}

.cal-key {
  width: 10px;
  height: 10px;
  display: inline-block;
  flex-shrink: 0;
}

.cal-key-open { background: var(--white-deep); border: 1px solid var(--line); }
.cal-key-busy { background: transparent; border: 1px solid var(--burgundy); opacity: 0.6; }

.cal-key-busy + * { margin-left: 0; }

.cal-status {
  margin-left: auto;
  color: var(--gray-light);
  letter-spacing: 0.14em;
  text-align: right;
}

@media (max-width: 480px) {
  .cal-legend { flex-wrap: wrap; }
  .cal-status { margin-left: 0; width: 100%; text-align: left; }
}

/* ============================================================
   LAYER TWO: more Garamond, more Gaudí
   The serif carries the voice; trencadís becomes a signature rule.
   ============================================================ */

/* ---------- Consultation booker ---------- */

.booker { width: 100%; text-align: left; }

.booker-step { margin-bottom: var(--sp-4); }

.booker-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sea);
  margin-bottom: var(--sp-2);
}

.booker-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(62px, 1fr);
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.booker-day {
  display: grid;
  gap: 1px;
  padding: 0.7rem 0.3rem;
  background: var(--white-deep);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-display);
  color: var(--black);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.booker-day span {
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
}

.booker-day strong {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.1;
}

.booker-day:hover:not(:disabled) { background: #dfd9cb; }

.booker-day.is-on {
  background: var(--black);
  border-color: var(--gold);
  color: var(--white);
}

.booker-day.is-on span { color: var(--gold-light); }

.booker-day.is-busy {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.booker-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 5px;
}

.booker-time {
  padding: 0.6rem 0.4rem;
  background: var(--white-deep);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--black);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.booker-time:hover { background: #dfd9cb; }

.booker-time.is-on {
  background: var(--sea);
  border-color: var(--gold);
  color: var(--white);
}

.booker-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: var(--sp-2);
}

.booker-form input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--black);
  background: var(--white-deep);
  border: 1px solid transparent;
  outline: none;
  transition: border-color 0.3s ease;
}

.booker-form input:focus { border-color: var(--sea); }

.booker-chosen {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gray);
  margin-bottom: var(--sp-2);
}

.booker-chosen.is-set { color: var(--sea); }

.booker-form button:disabled { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 560px) {
  .booker-fields { grid-template-columns: 1fr; }
}

/* ---------- Trencadís rule ----------
   The signature mark: broken glazed tile laid as a hairline band.
   His whole palette appears here, cobalt and burgundy included. */

.mosaic-rule {
  height: 9px;
  width: 100%;
  border: 0;
  margin: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--sea)        0px,   var(--sea)        23px,
    var(--white)      23px,  var(--white)      25px,
    var(--gold)       25px,  var(--gold)       38px,
    var(--white)      38px,  var(--white)      40px,
    var(--clay)       40px,  var(--clay)       71px,
    var(--white)      71px,  var(--white)      73px,
    var(--cobalt)     73px,  var(--cobalt)     84px,
    var(--white)      84px,  var(--white)      86px,
    var(--sea-light)  86px,  var(--sea-light)  115px,
    var(--white)      115px, var(--white)      117px,
    var(--burgundy)   117px, var(--burgundy)   135px,
    var(--white)      135px, var(--white)      137px,
    var(--gold-light) 137px, var(--gold-light) 149px,
    var(--white)      149px, var(--white)      151px
  );
}

/* ---------- Garamond, given more to do ---------- */

/* Numerals set in the serif read as engraved rather than typed */
.point-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

/* Section ledes speak in the serif voice */
.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.12rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  color: var(--gray);
}

/* A drop cap opens the chef's story */
.about-copy h2 + p::first-letter {
  font-family: var(--font-serif);
  font-size: 3.4rem;
  font-weight: 500;
  float: left;
  line-height: 0.82;
  padding: 0.1em 0.12em 0 0;
  color: var(--sea);
}

/* Service card notes in italic serif, quieter and warmer */
.service-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Gallery captions likewise */
.gallery-grid figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Plan prices */
.plan-price { font-family: var(--font-serif); font-weight: 500; }

/* ---------- Catenary echo on the experience cards ---------- */

.service-media img { border-radius: 50% 50% 0 0 / 9% 9% 0 0; }

/* ---------- Iridescence on the primary action ---------- */

.btn-solid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  background: linear-gradient(
    115deg,
    rgba(29, 107, 96, 0.55) 0%,
    rgba(28, 79, 138, 0.35) 35%,
    rgba(200, 164, 77, 0.45) 65%,
    rgba(109, 34, 51, 0.4) 100%
  );
  background-size: 220% 220%;
  animation: nacre 18s ease-in-out infinite;
}

.btn-solid:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .btn-solid::after { animation: none; }
}

/* ---------- Footer: review platforms + designer credit ---------- */

.footer-reviews {
  margin-top: var(--sp-3);
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
}

.footer-reviews-label {
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray);
}

.review-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
}

.review-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-light);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.review-chip svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.review-chip:hover { color: var(--white); border-color: currentColor; }

/* Each platform lights up in its own colour on hover */
.review-yelp:hover      { color: #d32323; }
.review-thumbtack:hover { color: #2f80ed; }
.review-bark:hover      { color: #18c3a1; }
.review-airbnb:hover    { color: #ff5a5f; }

/* ---------- Designer credit ---------- */

.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-light);
  width: 100%;
  max-width: 420px;
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-size: 0.6rem !important;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray) !important;
}

.footer-credit a {
  display: inline-flex;
  color: var(--gray);
  transition: color 0.3s ease;
}

.footer-credit svg { width: 13px; height: 13px; fill: currentColor; }

.footer-credit a:hover { color: #0a66c2; }

/* Failed submission: same slot as the success line, different voice */
.form-success.is-error { color: var(--burgundy); }
.form-success.is-error a { color: var(--burgundy); text-decoration: underline; }
.quiz-card .form-success.is-error,
.footer-capture .form-success.is-error { color: var(--gold-light); }
.quiz-card .form-success.is-error a,
.footer-capture .form-success.is-error a { color: var(--gold-light); }


/* ---------- Collapsed "book a call" disclosure ----------
   Keeps the page short by default; opens the full booker on tap. */

.call-toggle {
  /* Third child of the two-column .split grid. Without an explicit span it
     auto-places into column 1 / row 2, which stranded it under the left
     column with a void beside it and squeezed the open booker into half
     the page. Span both columns and cap the width instead. */
  grid-column: 1 / -1;
  width: 100%;
  max-width: 720px;
  margin: var(--sp-3) auto 0;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-2);
}

.call-toggle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sea);
  transition: color 0.3s ease;
}

.call-toggle summary::-webkit-details-marker { display: none; }
.call-toggle summary:hover { color: var(--black); }
.call-toggle summary:focus-visible {
  outline: 1px solid var(--sea);
  outline-offset: 4px;
}

.call-toggle-mark {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.3s var(--ease-out);
}

.call-toggle[open] .call-toggle-mark { transform: rotate(45deg); }

/* Open state reads as a card, matching .contact-form above it, so the
   booker looks deliberate rather than loose text under a rule. */
.call-toggle-body {
  margin-top: var(--sp-2);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--line);
}

.call-toggle-body .booker-step:last-of-type { margin-bottom: var(--sp-3); }

@media (max-width: 560px) {
  .call-toggle-body { padding: var(--sp-3) var(--sp-2); }
}

/* ============================================================
   Mobile menu fixes
   The wordmark was white-on-bone (invisible) once the overlay
   opened, and the page scrolled behind it.
   ============================================================ */

/* Freeze the page behind an open overlay */
body.menu-locked { overflow: hidden; }

@media (max-width: 900px) {
  /* Brand and hamburger must read against the bone overlay */
  .site-header.menu-open .nav-brand { color: var(--black); }
  .site-header.menu-open .nav-toggle span { color: var(--black); }

  /* Keep the brand and close button above the overlay */
  .site-header.menu-open .nav-brand { position: relative; z-index: 110; }

  /* The links sat in a sea of dead space. Pull them into a
     considered stack and give the panel a floor. */
  .nav-links {
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-7) var(--sp-4) var(--sp-5);
  }

  .nav-links a {
    font-family: var(--font-display);
    font-size: 1.05rem !important;
    letter-spacing: 0.26em;
  }

  /* Stagger the items in so the panel feels built, not dumped */
  .site-header.menu-open .nav-links li {
    animation: menu-in 0.45s var(--ease-out) both;
  }
  .site-header.menu-open .nav-links li:nth-child(1) { animation-delay: 0.06s; }
  .site-header.menu-open .nav-links li:nth-child(2) { animation-delay: 0.12s; }
  .site-header.menu-open .nav-links li:nth-child(3) { animation-delay: 0.18s; }
  .site-header.menu-open .nav-links li:nth-child(4) { animation-delay: 0.24s; }

  /* The S27 plate closes the panel, so it never reads as empty */
  .nav-links::after {
    content: "";
    display: block;
    width: 74px;
    height: 74px;
    margin-top: var(--sp-4);
    background: url("../img/s27-mark.png") center/contain no-repeat;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out) 0.3s;
  }

  .site-header.menu-open .nav-links::after { opacity: 0.85; }
}

@keyframes menu-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.menu-open .nav-links li { animation: none; }
}

/* ---------- Menu overlay containing-block fix ----------
   backdrop-filter turns .site-header into a containing block for its
   position:fixed children, so the full-screen menu got trapped inside the
   header bar once .scrolled applied. Drop the filter while the menu is
   open and the overlay escapes to the viewport as intended. */

.site-header.menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 900px) {
  /* Belt and braces: pin to the small viewport unit so iOS Safari's
     collapsing URL bar cannot clip the panel either. */
  .nav-links {
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------- Colour on approach (touch) ----------
   Mirrors the desktop hover: on phones the photo colourises when it
   reaches the middle of the screen, no tap required. */

@media (hover: none), (pointer: coarse) {
  .gallery-grid figure.in-view img,
  .service-media.in-view img,
  .about-media.in-view img {
    filter: grayscale(0) contrast(1);
  }

  /* The gold/teal sheen rides along with it */
  .gallery-grid figure.in-view::after { opacity: 1; }

  /* Captions surface with the colour instead of on hover */
  .gallery-grid figure.in-view figcaption { opacity: 1; }
}