@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap");

:root {
  --bg: #efede8;
  --surface-dark: #1a1916;
  --text: #1a1916;
  --muted: #6b6860;
  --hint: #9a9590;
  --light: #f0ede8;
  --light-muted: rgba(255, 255, 255, 0.45);
  --line: rgba(26, 25, 22, 0.12);
  --line-dark: rgba(255, 255, 255, 0.1);
  --radius: 20px;
  --radius-lg: 26px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --section-pad-y: clamp(80px, 9vw, 128px);
  --section-pad-x: clamp(20px, 4.5vw, 64px);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  /* clip (not hidden) contains any stray full-bleed element without creating a
     scroll container, so position: sticky/fixed keep working. Belt-and-braces
     against horizontal scroll on top of fixing the root causes below. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection {
  background: var(--surface-dark);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

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

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

/* ------------------------- Header — floating capsule ------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px clamp(20px, 4vw, 48px);
  /* keep the bar clear of rounded/notched screen corners in landscape */
  padding-left: max(clamp(20px, 4vw, 48px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 4vw, 48px), env(safe-area-inset-right));
  border-radius: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid rgba(26, 25, 22, 0.1);
  color: #1a1916;
  box-shadow: 0 10px 30px rgba(26, 25, 22, 0.12);
  transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out), border-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.site-header.is-scrolled {
  background: rgba(26, 25, 22, 0.88);
  color: #f0ede8;
  border-bottom-color: rgba(240, 237, 232, 0.12);
  box-shadow: 0 14px 40px rgba(26, 25, 22, 0.24);
}

.site-header.is-scrolled .nav-cta {
  background: #f0ede8;
  color: #1a1916;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  color: inherit;
  white-space: nowrap;
}

.wordmark-logo {
  display: inline-flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  /* Drop the emblem so the marble disc's optical center meets the wordmark's
     center line (percentage scales with the logo at both sizes). */
  transform: translateY(7.5%);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out);
}

/* Full size once scrolled past the hero; half size while over it. */
.site-header.is-scrolled .wordmark-logo {
  width: 100px;
  height: 100px;
}

.wordmark-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(0.6%, -3.3%);
}


.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 28px);
}

.site-nav a {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
  transition: color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.site-nav a:not(.nav-icon):not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s var(--ease-out);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  opacity: 1;
}

.site-nav a:not(.nav-icon):not(.nav-cta):hover::after,
.site-nav a:not(.nav-icon):not(.nav-cta):focus-visible::after {
  width: 100%;
}

.site-nav .nav-icon {
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1;
  display: inline-flex;
}

.site-nav .nav-cta {
  padding: 16px 32px;
  border-radius: 100px;
  background: #1a1916;
  color: #f0ede8;
  font-weight: 500;
  letter-spacing: 0.14em;
  opacity: 1;
  transition: background 0.3s ease, color 0.3s ease, transform 0.18s var(--ease-spring), box-shadow 0.2s ease;
}

.site-nav .nav-cta:hover,
.site-nav .nav-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 25, 22, 0.25);
}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint below. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* --------------------------------- Sections -------------------------------- */

.site-section,
.section-padding {
  padding: var(--section-pad-y) var(--section-pad-x);
}

.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.section-eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a8680;
}

.section-eyebrow.dark {
  color: rgba(255, 255, 255, 0.35);
}

.section-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-title em {
  font-style: italic;
}

.section-subtext {
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* Shared section heading system (Services, Team, etc.) */
.section-heading {
  max-width: 760px;
  margin: 0 0 clamp(36px, 4.5vw, 56px);
}

.section-heading.centered {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hint);
}

.section-heading h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--text);
}

.section-copy {
  margin: 24px auto 0;
  max-width: 540px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}

/* --------------------------------- Buttons --------------------------------- */

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  border-radius: 100px;
  border: 0;
  background: var(--light);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.button-dark {
  background: #1a1916;
  color: #f8f4ef;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.92);
  color: #1a1916;
}

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* dark base so nothing light flashes before the poster/video paints */
  background: var(--surface-dark);
}

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

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

.hero-overlay {
  /* heavier top stop keeps the light nav legible over bright footage */
  background: linear-gradient(
    to bottom,
    rgba(26, 25, 22, 0.68) 0%,
    rgba(26, 25, 22, 0.38) 22%,
    rgba(26, 25, 22, 0.32) 48%,
    rgba(26, 25, 22, 0.58) 100%
  );
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 96px 24px 64px;
}

.hero-eyebrow {
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.55);
  opacity: 0;
  animation: fadeUp 0.45s ease 0.12s forwards;
}

.hero h1 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(40px, 9.4vw, 100px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--light);
  text-wrap: balance;
}

.hero-line {
  display: block;
  opacity: 0;
}

.hero-line-1 {
  animation: fadeUp 0.5s ease 0.2s forwards;
}

.hero-line-2 {
  animation: fadeUp 0.5s ease 0.3s forwards;
}

.hero h1 em {
  font-style: italic;
}

.hero .hero-subtext {
  margin: 26px auto 0;
  max-width: 430px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: fadeUp 0.45s ease 0.4s forwards;
}

.hero .pill-button {
  margin-top: 42px;
  background: #f0ede8;
  color: #1a1916;
  opacity: 0;
  animation: scaleIn 0.38s var(--ease-spring) 0.52s forwards;
}

/* -------------------------------- Slideshow -------------------------------- */

#work .section-eyebrow {
  color: #9a9590;
}

#work .section-title em {
  font-style: italic;
}

/* Studio work stage: the 3:4 slideshow centred, flanked by the two vertical
   clips that fill the space either side. The slideshow keeps its own max-width
   so it stays the hero; the clips take the remaining width, matched to its
   height. Below 900px the clips drop away and the slideshow stands alone. */
.studio-stage {
  margin-top: clamp(30px, 4vw, 44px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 22px);
}

.studio-clip-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  align-self: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  background: #e7e4de;
  box-shadow: 0 12px 32px rgba(26, 25, 22, 0.09);
}

.studio-clip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .studio-clip-wrap {
    display: none;
  }

  /* Side clips are gone, so the slideshow stands alone and centred — centre the
     heading above it to match. Desktop keeps its left-aligned editorial heading. */
  #work .section-inner {
    text-align: center;
  }
}

.studio-slideshow {
  /* Constrained and centred: the shots are 3:4 portrait, so a full-width
     landscape band would crop them to a strip. Keeping the frame the same
     width as the image also keeps the arrows tight against it. */
  margin-top: 0;
  position: relative;
  flex: 0 0 auto;
  width: min(460px, 100%);
}

.studio-slides {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: #e7e4de;
  box-shadow: 0 24px 60px rgba(26, 25, 22, 0.1);
}

.studio-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.6s ease, transform 1.2s var(--ease-out);
}

.studio-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.studio-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(239, 237, 232, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #1a1916;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26, 25, 22, 0.16);
  transition: all 0.2s var(--ease-spring);
}

.studio-prev {
  left: 18px;
}

.studio-next {
  right: 18px;
}

.studio-nav:hover,
.studio-nav:focus-visible {
  transform: translateY(-50%) scale(1.1);
  background: #ffffff;
}

.studio-nav:active {
  transform: translateY(-50%) scale(0.93);
  transition: transform 0.08s ease;
}

.studio-dots {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.studio-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(26, 25, 22, 0.18);
  cursor: pointer;
  transition: width 0.3s var(--ease-out), background 0.3s ease;
}

.studio-dot.is-active {
  width: 24px;
  background: rgba(26, 25, 22, 0.75);
}

/* ---------------------------------- Hours ---------------------------------- */

/* Hours — same full-bleed dark treatment as the reviews section, sized to fill
   the viewport. Reuses .reviews-section for the background, centring and the
   decorative ring; these rules add the schedule rows. */
.hours-section {
  min-height: 0;
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hours-rows {
  position: relative;
  margin-top: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(420px, 100%);
}

.hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hours-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.hours-day {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--light-muted);
}

.hours-time {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400;
  line-height: 1;
  color: var(--light);
}

.hours-time.closed {
  font-style: italic;
  color: rgba(242, 238, 230, 0.45);
}

.hours-note {
  position: relative;
  margin: clamp(20px, 2.4vw, 28px) auto 0;
  max-width: 420px;
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--light-muted);
}

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

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.service-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: clamp(24px, 2.6vw, 30px) clamp(24px, 2.8vw, 32px);
  border: 1px solid rgba(26, 25, 22, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(26, 25, 22, 0.02);
  transition: transform 0.25s var(--ease-out), background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.service-card h3 {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  transition: transform 0.2s ease;
}

.service-card p {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.service-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(26, 25, 22, 0.12);
  font-size: 1.15rem;
  color: var(--hint);
  transition: all 0.25s var(--ease-spring);
}

.service-card:hover,
.service-card:focus-visible {
  background: #ffffff;
  border-color: rgba(26, 25, 22, 0.18);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(26, 25, 22, 0.09);
}

.service-card:hover .service-arrow,
.service-card:focus-visible .service-arrow {
  background: #1a1916;
  border-color: #1a1916;
  color: #f0ede8;
  transform: translateX(3px);
}

.service-card:hover h3,
.service-card:focus-visible h3 {
  transform: translateX(4px);
}

/* ------------------------------ Booking banner ----------------------------- */

/* Stage: the (now smaller) booking banner centred, flanked by a vertical clip on
   each side that matches its height. Clips drop away below 900px. */
/* Full-bleed black band holding the booking picture and the two clips. */
.booking-band {
  background: var(--surface-dark);
  padding: var(--section-pad-y) var(--section-pad-x);
}

.booking-stage {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 22px);
}

.booking-banner {
  position: relative;
  flex: 0 0 auto;
  width: min(620px, 100%);
  min-height: clamp(300px, 34vw, 360px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.booking-clip-wrap {
  flex: 1 1 0;
  min-width: 0;
  max-width: 260px;
  align-self: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #e7e4de;
}

.booking-clip {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .booking-clip-wrap {
    display: none;
  }
}

/* ---- Shared click-to-hear behaviour for every non-hero clip ----
   Clips autoplay muted; a click unmutes the tapped one (and mutes the rest, so
   only one plays sound at a time). The badge reflects muted/unmuted state. */
.clip-audio {
  position: relative;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Hover animation for every non-hero clip: the tile lifts with a deeper shadow
   while the footage slowly zooms in (the wrapper's overflow keeps it clean). */
.clip-audio video {
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.clip-audio:hover,
.clip-audio:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(20, 18, 16, 0.32);
}

.clip-audio:hover video,
.clip-audio:focus-within video {
  transform: scale(1.06);
}

.clip-audio:focus-visible {
  outline: 2px solid #1a1916;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .clip-audio,
  .clip-audio video {
    transition: none;
  }

  .clip-audio:hover,
  .clip-audio:focus-within {
    transform: none;
  }

  .clip-audio:hover video,
  .clip-audio:focus-within video {
    transform: none;
  }
}

.clip-sound {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(13, 12, 11, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  transition: background 0.2s ease;
}

.clip-audio:hover .clip-sound {
  background: rgba(13, 12, 11, 0.8);
}

.clip-audio.is-unmuted .clip-sound {
  background: #1a1916;
}

.booking-media,
.booking-media img,
.booking-overlay {
  position: absolute;
  inset: 0;
}

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

.booking-overlay {
  background: linear-gradient(to bottom, rgba(11, 11, 11, 0.35), rgba(11, 11, 11, 0.58));
}

/* Hover zooms only the picture itself — the tile, its arrows and the slideshow
   dots stay put (the container's overflow keeps the zoom cropped). */
.booking-media img {
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.booking-banner:hover .booking-media img,
.studio-slideshow:hover .studio-slide.is-active {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .booking-media img {
    transition: none;
  }

  .booking-banner:hover .booking-media img,
  .studio-slideshow:hover .studio-slide.is-active {
    transform: scale(1);
  }
}

.booking-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #f6f1ea;
  padding: 44px 24px;
}

.booking-content h2 {
  margin: 0 0 16px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(38px, 4.6vw, 54px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.booking-content p {
  margin: 0 0 30px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(246, 241, 234, 0.82);
}

/* ----------------------------------- Team ---------------------------------- */

.team.section-padding {
  /* 100% (not 100vw) so the vertical scrollbar's width can't push this past the
     viewport and create a sliver of horizontal scroll. */
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: var(--section-pad-y) 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 28px);
}

.team-card {
  position: relative;
  border: 1px solid rgba(26, 25, 22, 0.1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 2px rgba(26, 25, 22, 0.03);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.2s ease;
}

.team-image-wrap {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: #e7e4de;
}

.team-image-wrap img {
  /* slight overdraw crops the dark scan edge baked into the portrait assets */
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  margin: -4px;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.team-card:hover .team-image-wrap img {
  transform: scale(1.03);
}

.team-card:hover {
  transform: translateY(-5px);
  border-color: rgba(26, 25, 22, 0.16);
  box-shadow: 0 20px 44px rgba(26, 25, 22, 0.11);
}

/* Story slides up over the lower part of the whole card on hover — portrait and
   footer both — so the footer reads as disappearing behind it. Capped short of
   full height so the barber's face stays visible, and sheer not solid. */
.team-story {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  display: flex;
  flex-direction: column;
  /* Bottom-aligned so every line lands in the opaque part of the gradient
     rather than the transparent fade at the top of the panel. */
  justify-content: flex-end;
  padding: clamp(18px, 2vw, 24px);
  background: linear-gradient(
    to top,
    rgba(14, 12, 10, 0.94) 0%,
    rgba(14, 12, 10, 0.88) 58%,
    rgba(14, 12, 10, 0) 100%
  );
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(100%);
  /* click-through, so the controls inside opt back in below */
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.team-card:hover .team-story,
.team-card:focus-within .team-story,
.team-card.is-story-open .team-story {
  opacity: 1;
  transform: translateY(0);
}

.team-story h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.1;
  color: #f2eee6;
}

.team-story-rule {
  display: block;
  width: 34px;
  height: 2px;
  margin: 11px 0 14px;
  background: #f2eee6;
}

.team-story p {
  margin: 0 0 18px;
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.68;
  color: rgba(242, 238, 230, 0.8);
  /* Long bios scroll within the opaque lower zone rather than overflowing the
     panel or washing out over the transparent top of the gradient. */
  max-height: min(230px, 34vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 238, 230, 0.4) transparent;
}

.team-story p::-webkit-scrollbar {
  width: 5px;
}

.team-story p::-webkit-scrollbar-thumb {
  background: rgba(242, 238, 230, 0.35);
  border-radius: 999px;
}

.team-story-actions {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-story-book,
.team-story-ig {
  pointer-events: auto;
}

.team-story-book {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid #f2eee6;
  color: #f2eee6;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.team-story-book i {
  font-size: 15px;
  line-height: 1;
}

.team-story-book:hover,
.team-story-book:focus-visible {
  background: #f2eee6;
  color: #141210;
}

.team-story-ig {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(242, 238, 230, 0.28);
  color: #f2eee6;
  transition: background 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.55s cubic-bezier(0.2, 0.7, 0.2, 1),
    color 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.team-story-ig:hover,
.team-story-ig:focus-visible {
  background: #f2eee6;
  border-color: #f2eee6;
  color: #141210;
}

.team-story-ig svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.team-body {
  padding: clamp(24px, 2.8vw, 30px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.team-card:hover .team-body,
.team-card.is-story-open .team-body {
  opacity: 0;
  /* while the bio is showing, don't let the faded card face catch taps */
  pointer-events: none;
}

.team-body h3 {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

.team-body p {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hint);
}

.team-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.icon-pill {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(26, 25, 22, 0.14);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.18s var(--ease-spring);
}

.icon-pill:hover,
.icon-pill:focus-visible {
  background: #1a1916;
  border-color: #1a1916;
  color: #f0ede8;
  transform: translateY(-2px);
}

.icon-pill svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .team-story {
    transition: none;
  }
}

/* --------------------------------- Reviews --------------------------------- */

.reviews-section {
  background: var(--surface-dark);
  padding: var(--section-pad-y) var(--section-pad-x);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.reviews-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.reviews-section h2 {
  margin: 0;
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(44px, 5.5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--light);
}

.reviews-section h2 em {
  font-style: italic;
}

.reviews-section p {
  position: relative;
  margin: 18px auto 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--light-muted);
  max-width: 520px;
}

.reviews-section .pill-button {
  position: relative;
  margin-top: 32px;
}

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

.cs-contact-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
  max-width: 1280px;
  margin: 0 auto;
  box-shadow: 0 24px 60px rgba(26, 25, 22, 0.08);
}

.cs-contact-left {
  background: #e9e6e0;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4.4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
}

.cs-contact-right {
  background: #1a1916;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4.4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.cs-contact-eyebrow {
  margin: 0 0 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a8680;
}

.cs-contact-left h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1a1916;
}

.cs-contact-left h2 em {
  font-style: italic;
}

.cs-contact-left-copy {
  margin: 22px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #6b6860;
  max-width: 320px;
}

.cs-contact-detail-list {
  display: grid;
  gap: 14px;
}

.cs-contact-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  color: #3d3c39;
}

.cs-contact-detail i {
  font-size: 17px;
  color: #9a9590;
  line-height: 1;
}

.cs-contact-detail a:hover,
.cs-contact-detail a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cs-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.cs-circle-one {
  width: 320px;
  height: 320px;
  top: -100px;
  right: -100px;
}

.cs-circle-two {
  width: 260px;
  height: 260px;
  left: -80px;
  bottom: -80px;
}

.cs-contact-right-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 44px;
}

.cs-contact-right .cs-contact-eyebrow {
  color: rgba(255, 255, 255, 0.35);
}

.cs-contact-right h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #f0ede8;
}

.cs-contact-right-copy {
  margin: 18px 0 40px;
  max-width: 300px;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
}

.cs-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 100px;
  background: #f0ede8;
  color: #1a1916;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.cs-cta-button i {
  font-size: 15px;
  line-height: 1;
}

.cs-contact-divider {
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 32px;
}

.cs-contact-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.cs-contact-bottom p {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
}

.cs-contact-book-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
  border-bottom: 0.5px solid rgba(240, 237, 232, 0.3);
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #f0ede8;
  text-decoration: none;
}

.cs-contact-book-link:hover,
.cs-contact-book-link:focus-visible {
  border-bottom-color: rgba(240, 237, 232, 0.8);
}

/* --------------------------------- Location -------------------------------- */

.location-title {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(42px, 4.4vw, 58px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text);
}

.location-map-wrap {
  margin-top: 30px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(26, 25, 22, 0.08);
}

.location-map-wrap iframe {
  width: 100%;
  min-height: clamp(340px, 42vw, 440px);
  border: 0;
  filter: grayscale(0.25) saturate(0.85);
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Zoom only the map on hover — the framed tile stays put, like the pictures. */
.location-map-wrap:hover iframe {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .location-map-wrap iframe {
    transition: none;
  }

  .location-map-wrap:hover iframe {
    transform: scale(1);
  }
}

.location-details {
  margin-top: 30px;
  display: grid;
  gap: 14px;
}

.location-detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 300;
  color: #3d3c39;
}

.location-detail-row i {
  font-size: 17px;
  color: var(--hint);
}

.location-maps-button {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: 100px;
  border: 1px solid rgba(26, 25, 22, 0.22);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.location-maps-button:hover,
.location-maps-button:focus-visible {
  background: #1a1916;
  border-color: #1a1916;
  color: #f0ede8;
}

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

.site-footer {
  background: var(--surface-dark);
  color: var(--light);
  padding: clamp(56px, 6vw, 80px) var(--section-pad-x) calc(28px + env(safe-area-inset-bottom));
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-dark);
}

.footer-brand img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 22px;
  background: transparent;
  /* Navbar-logo treatment (no ring, emblem centered) shifted left so the
     disc sits directly above the "C" of "Chosen Studios". */
  transform: translate(calc(0.6% - 15.7px), -3.3%);
}

.footer-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 400;
  margin: 0 0 10px;
  color: var(--light);
}

.footer-tagline {
  margin: 0;
  max-width: 260px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(240, 237, 232, 0.6);
}

.footer-heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: rgba(240, 237, 232, 0.45);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin: 0 0 12px;
}

.footer-col a {
  color: rgba(240, 237, 232, 0.82);
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  transition: color 0.2s ease;
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: var(--light);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-social i {
  font-size: 18px;
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  color: rgba(240, 237, 232, 0.5);
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(240, 237, 232, 0.7);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: color 0.2s ease, gap 0.2s ease;
}

.footer-top-link:hover,
.footer-top-link:focus-visible {
  color: var(--light);
  gap: 10px;
}

/* ------------------------------ Reveal on scroll ---------------------------- */

.section-reveal {
  opacity: 1;
  transform: none;
}

/* --------------------------- Interactive elements --------------------------- */

.pill-button,
.button,
#contact .cs-cta-button,
#contact .cs-contact-book-link,
.site-nav a[href*="setmore"]:not(.nav-cta) {
  transition: transform 0.18s var(--ease-spring), background 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.pill-button:hover,
.pill-button:focus-visible,
.button:hover,
.button:focus-visible,
#contact .cs-cta-button:hover,
#contact .cs-cta-button:focus-visible {
  transform: scale(1.05) translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(26, 25, 22, 0.18);
}

.pill-button:active,
.button:active,
#contact .cs-cta-button:active,
#contact .cs-contact-book-link:active {
  transform: scale(0.97) translateY(0);
  filter: brightness(0.97);
  transition: transform 0.08s ease, filter 0.08s ease;
}

#contact .cs-cta-button:hover,
#contact .cs-cta-button:focus-visible {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#contact .cs-contact-book-link i {
  margin-left: 6px;
  transition: margin-left 0.2s ease;
}

#contact .cs-contact-book-link:hover i,
#contact .cs-contact-book-link:focus-visible i {
  margin-left: 10px;
}

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

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

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .cs-contact-wrap {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* Below this width the inline nav gets tight, so it collapses into a hamburger
   that opens a full-width slide-down panel. */
@media (max-width: 860px) {
  html {
    scroll-padding-top: 78px;
  }

  .site-header {
    padding: 8px clamp(16px, 4vw, 22px);
    padding-left: max(clamp(16px, 4vw, 22px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, 22px), env(safe-area-inset-right));
  }

  .wordmark {
    font-size: 20px;
    gap: 6px;
  }

  /* One compact logo size in both header states — the scroll-driven growth is a
     desktop flourish that would be oversized in a phone bar. */
  .wordmark-logo,
  .site-header.is-scrolled .wordmark-logo {
    width: 44px;
    height: 44px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Keep the wordmark and toggle above the panel so they stay tappable/visible
     over its backdrop while it's open. */
  .wordmark,
  .nav-toggle {
    position: relative;
    z-index: 2;
  }

  /* Nav becomes an overlay panel dropping from the top. It sits just below the
     header-bar content (z-index:1 vs 2) so the wordmark and toggle X stay on top
     of it, while its own solid backdrop keeps the links legible over the page. */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(env(safe-area-inset-top) + 68px) clamp(20px, 6vw, 40px)
      calc(env(safe-area-inset-bottom) + 30px);
    min-height: 100svh;
    max-height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(22, 21, 18, 0.98);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #f0ede8;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.42s var(--ease-out), opacity 0.32s ease, visibility 0.42s linear;
  }

  .site-header.nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .site-nav a {
    color: #f0ede8;
    opacity: 1;
    font-size: 15px;
    letter-spacing: 0.14em;
    padding: 17px 2px;
    border-bottom: 1px solid rgba(240, 237, 232, 0.1);
  }

  .site-nav a:not(.nav-icon):not(.nav-cta)::after {
    display: none;
  }

  .site-nav .nav-icon {
    font-size: 20px;
    gap: 10px;
  }

  .site-nav .nav-cta {
    margin-top: 22px;
    justify-content: center;
    padding: 15px 26px;
    background: #f0ede8;
    color: #1a1916;
    border-bottom: 0;
    letter-spacing: 0.14em;
  }

  /* Lock the toggle X to the intended colours regardless of scroll state. */
  .site-header.nav-open,
  .site-header.nav-open.is-scrolled {
    background: rgba(22, 21, 18, 0.98);
    color: #f0ede8;
  }
}

/* Very small phones: shrink the wordmark so it, the logo and the toggle share
   one row comfortably down to ~300px. */
@media (max-width: 360px) {
  .wordmark {
    font-size: 18px;
  }

  .wordmark-logo,
  .site-header.is-scrolled .wordmark-logo {
    width: 40px;
    height: 40px;
  }
}

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

  /* Let the 3:4 aspect-ratio derive height from the container width. A fixed
     height here made the browser compute width from height (560 x 3/4 = 420px),
     overflowing the slideshow and pushing the image off-center. */
  .studio-slides {
    height: auto;
    width: 100%;
  }

  .studio-nav {
    width: 40px;
    height: 40px;
  }

  .booking-stage {
    width: 100%;
  }

  .team.section-padding {
    width: calc(100% - 40px);
  }

  .cs-contact-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 36px;
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* Short / landscape viewports (e.g. a phone turned sideways): the tall hero
   padding would push the headline and button below the fold. Trim the vertical
   rhythm and cap the headline so the whole hero fits without scrolling. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero-content {
    padding: 82px 24px 40px;
  }

  .hero h1 {
    font-size: clamp(32px, 7vw, 60px);
  }

  .hero .hero-subtext {
    margin-top: 16px;
  }

  .hero .pill-button {
    margin-top: 22px;
  }

  .who-hero {
    min-height: min(96vh, 640px);
    padding-top: 110px;
    padding-bottom: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* -------------------------- In-page booking modal -------------------------- */

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out), visibility 0.25s var(--ease-out);
}

.booking-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.booking-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 12, 11, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.booking-modal-panel {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  height: min(760px, 92vh);
  display: flex;
  background: #f0ebe1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(13, 12, 11, 0.5);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.3s var(--ease-out);
}

.booking-modal.is-open .booking-modal-panel {
  transform: none;
}

/* Full height, deliberately. Over-sizing this to push Setmore's promo past the
   panel edge also clipped the last stretch of the document — which on the
   customer-details step is where the Book button lives, making it unreachable.
   Content being usable wins over hiding their watermark. */
.booking-modal-frame {
  /* Absolute so an incoming frame overlays the outgoing one during a swap
     instead of stacking below it. */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.booking-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #fff;
  background: rgba(13, 12, 11, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.booking-modal-close:hover {
  background: rgba(13, 12, 11, 0.82);
  transform: scale(1.06);
}

.booking-modal-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.booking-modal-loader {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0ebe1;
}

/* Both the panel and the loader sit behind the frame, so in dark mode their
   cream showed as a bright flash whenever the frame had not painted yet. */
@media (prefers-color-scheme: dark) {
  .booking-modal-panel,
  .booking-modal-loader {
    background: #292929;
  }

  .booking-modal-loader span {
    border-color: rgba(255, 255, 255, 0.18);
    border-top-color: #fff;
  }
}

.booking-modal.is-loaded .booking-modal-loader {
  display: none;
}

.booking-modal-loader span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(26, 25, 22, 0.15);
  border-top-color: #1a1916;
  animation: booking-spin 0.8s linear infinite;
}

@keyframes booking-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  /* Smaller floating card on phones instead of a full-screen takeover, with a
     visible backdrop margin around it. */
  .booking-modal {
    padding: 18px;
  }

  .booking-modal-panel {
    width: 100%;
    height: min(78vh, 600px);
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-modal,
  .booking-modal-panel {
    transition: none;
  }

  .booking-modal-loader span {
    animation: none;
  }
}

/* ============================== Who We Are page ============================= */

:root {
  --gold: #c2a06a;
}

/* Scroll reveal (scoped to this page via .who-reveal) */
.who-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
  .who-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Hero: full-bleed image with dark wash ---- */
.who-hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px clamp(20px, 6vw, 80px) 100px;
  overflow: hidden;
  isolation: isolate;
}

.who-hero-media,
.who-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.who-hero-media img {
  filter: grayscale(0.3) contrast(1.02);
  transform: scale(1.04);
  animation: whoHeroDrift 18s ease-in-out infinite alternate;
}

@keyframes whoHeroDrift {
  to {
    transform: scale(1.12);
  }
}

.who-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 13, 11, 0.62) 0%, rgba(15, 13, 11, 0.5) 42%, rgba(15, 13, 11, 0.78) 100%);
}

.who-hero-inner {
  max-width: 900px;
}

.who-eyebrow {
  margin: 0 0 22px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
}

.who-hero h1 {
  margin: 0 auto;
  max-width: 15ch;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(48px, 7.4vw, 92px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: #f4f0e8;
}

.who-hero h1 em {
  font-style: italic;
}

.who-hero-rule {
  width: 46px;
  height: 2px;
  margin: 30px auto;
  background: var(--gold);
}

.who-lead {
  margin: 0 auto;
  max-width: 620px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(244, 240, 232, 0.82);
}

.who-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  color: rgba(244, 240, 232, 0.7);
  font-size: 22px;
  animation: whoBob 2.2s ease-in-out infinite;
}

@keyframes whoBob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 7px); }
}

/* ---- Shared section framing ---- */
.who-section {
  padding: clamp(84px, 10vw, 140px) var(--section-pad-x);
}

.who-kicker {
  margin: 0 0 14px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

.who-heading-center {
  max-width: 640px;
  margin: 0 auto clamp(44px, 5vw, 64px);
  text-align: center;
}

.who-heading-center h2,
.who-story-copy h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(38px, 5vw, 60px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

.who-heading-center h2 em,
.who-story-copy h2 em {
  font-style: italic;
}

/* ---- Story ---- */
.who-story-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5.5vw, 84px);
  align-items: center;
}

.who-story-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e7e4de;
  box-shadow: 0 30px 70px rgba(26, 25, 22, 0.14);
}

.who-story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.who-story-media:hover img {
  transform: scale(1.06);
}

.who-story-copy h2 {
  margin-top: 12px;
}

.who-story-copy p {
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--muted);
  max-width: 52ch;
}

/* ---- Mission pull-quote band ---- */
.who-quote {
  position: relative;
  padding: clamp(90px, 11vw, 150px) var(--section-pad-x);
  background: var(--surface-dark);
  text-align: center;
  overflow: hidden;
}

.who-quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(20px, 5vw, 60px);
  left: 50%;
  transform: translateX(-50%);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(120px, 20vw, 240px);
  line-height: 1;
  color: rgba(194, 160, 106, 0.16);
  pointer-events: none;
}

.who-quote blockquote {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #f4f0e8;
}

.who-quote cite {
  display: block;
  margin-top: 28px;
  font-family: "Jost", sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- Values ---- */
.who-values {
  background: #e9e6df;
}

.who-values-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}

.who-value {
  padding: clamp(30px, 3.2vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.3s ease;
}

.who-value:hover {
  transform: translateY(-6px);
  border-color: rgba(194, 160, 106, 0.5);
  box-shadow: 0 26px 54px rgba(26, 25, 22, 0.12);
}

.who-value-icon {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(194, 160, 106, 0.45);
  color: var(--gold);
  font-size: 24px;
}

.who-value h3 {
  margin: 22px 0 12px;
  font-family: "Cormorant Garamond", serif;
  font-size: 27px;
  font-weight: 400;
  color: var(--text);
}

.who-value p {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}

/* ---- Founders ---- */
.who-founders-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.8vw, 32px);
}

.who-founder {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}

.who-founder:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(26, 25, 22, 0.12);
}

.who-founder-media {
  aspect-ratio: 4 / 4.2;
  overflow: hidden;
  background: #e7e4de;
}

.who-founder-media img {
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  margin: -4px;
  object-fit: cover;
  filter: grayscale(0.15);
  transition: transform 0.7s var(--ease-out);
}

.who-founder:hover .who-founder-media img {
  transform: scale(1.05);
}

.who-founder-body {
  padding: clamp(26px, 2.8vw, 34px);
}

.who-founder-body h3 {
  margin: 0 0 5px;
  font-family: "Cormorant Garamond", serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--text);
}

.who-founder-role {
  margin: 0 0 18px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold);
}

.who-founder-body p {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
}

@media (max-width: 860px) {
  .who-story-inner,
  .who-values-grid,
  .who-founders-grid {
    grid-template-columns: 1fr;
  }

  .who-story-media {
    max-width: 460px;
    margin: 0 auto;
  }
}

/* ---- Long-form editorial article ---- */
.who-article {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 130px) var(--section-pad-x) clamp(60px, 7vw, 100px);
}

.who-chapter + .who-chapter {
  margin-top: clamp(60px, 7.5vw, 100px);
}

.who-chapter .who-kicker {
  text-align: center;
}

.who-chapter-title {
  margin: 0 0 clamp(26px, 3vw, 38px);
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
}

.who-chapter-title em {
  font-style: italic;
}

.who-body p {
  margin: 0 0 22px;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.85;
  color: #3b3934;
}

.who-body p:last-child {
  margin-bottom: 0;
}

/* Drop cap on the opening chapter */
.who-chapter--open .who-body > p:first-of-type::first-letter {
  float: left;
  font-family: "Cormorant Garamond", serif;
  font-size: 4.6em;
  line-height: 0.78;
  font-weight: 400;
  margin: 0.06em 0.12em 0 0;
  color: var(--gold);
}

/* Inline pull-quote between paragraphs */
.who-pull {
  margin: clamp(40px, 5vw, 64px) auto;
  max-width: 620px;
  text-align: center;
}

.who-pull::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 24px;
  background: var(--gold);
}

.who-pull p {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Full-bleed image break inside the article flow */
.who-break {
  position: relative;
  height: clamp(280px, 42vw, 480px);
  margin: clamp(70px, 8vw, 110px) 0;
  overflow: hidden;
}

.who-break img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.02);
}

.who-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 13, 11, 0.28);
}

/* Small caps intro line (the hook) */
.who-hook {
  max-width: 620px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--muted);
}

/* ---- Margin visuals flanking the article (desktop only) ---- */
.who-chapter {
  position: relative;
}

.who-side {
  position: absolute;
  width: clamp(160px, 15vw, 200px);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(26, 25, 22, 0.2);
}

.who-side img,
.who-side video {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(0.28) contrast(1.02);
}

.who-side figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 12px 8px;
  font-family: "Jost", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(244, 240, 232, 0.9);
  background: linear-gradient(to top, rgba(15, 13, 11, 0.7), rgba(15, 13, 11, 0));
}

.who-side--left {
  right: calc(100% + 40px);
}

.who-side--right {
  left: calc(100% + 40px);
}

/* Only show once the gutters are wide enough to hold them cleanly. The article
   is 720px and each visual sits 40px outside it and is up to 200px wide, so the
   viewport needs ~1200px before they fit without spilling into horizontal scroll. */
@media (max-width: 1240px) {
  .who-side {
    display: none;
  }
}

/* Discreet image credits */
.who-credits {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px var(--section-pad-x) 8px;
}

.who-credits-title {
  margin: 0 0 8px;
  font-family: "Jost", sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--hint);
}

.who-credits-list {
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--hint);
}

.who-credits-list a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================ Detail components ============================= */
:root { --gold: #c2a06a; }

/* Subpage hero (paper) */
.page-hero {
  padding: calc(var(--section-pad-y) + 64px) var(--section-pad-x) var(--section-pad-y);
  text-align: center;
}
.page-hero .who-kicker,
.page-hero .page-kicker {
  margin: 0 0 14px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}
.page-hero h1 {
  margin: 0 auto;
  max-width: 16ch;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
}
.page-hero h1 em { font-style: italic; }
.page-hero .page-lead {
  margin: 24px auto 0;
  max-width: 620px;
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}

.detail-section { padding: var(--section-pad-y) var(--section-pad-x); }
.detail-section.alt { background: #e9e6df; }
.detail-inner { max-width: 1180px; margin: 0 auto; }
.detail-head { max-width: 640px; margin: 0 0 clamp(36px, 4.5vw, 56px); }
.detail-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.detail-head .page-kicker { margin: 0 0 14px; font-family:"Jost",sans-serif; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--gold); }
.detail-head h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; color: var(--text);
}
.detail-head h2 em { font-style: italic; }
.detail-head p { margin: 18px 0 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--muted); }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2vw,26px); }
.feature {
  padding: clamp(26px,3vw,36px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.55);
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .3s ease;
}
.feature:hover { transform: translateY(-5px); border-color: rgba(194,160,106,0.45); box-shadow: 0 22px 46px rgba(26,25,22,0.1); }
.feature-icon {
  width: 52px; height: 52px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: 999px; border: 1px solid rgba(194,160,106,0.45); color: var(--gold); font-size: 23px;
}
.feature h3 { margin: 20px 0 10px; font-family:"Cormorant Garamond",serif; font-size:26px; font-weight:400; color:var(--text); }
.feature p { margin:0; font-size:14px; font-weight:300; line-height:1.7; color:var(--muted); }

/* Service detail rows */
.svc-list { display: grid; gap: clamp(16px,2vw,22px); }
.svc-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px 32px; align-items: start;
  padding: clamp(24px,2.6vw,32px);
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,0.5);
}
.svc-row-main h3 { margin: 0 0 6px; font-family:"Cormorant Garamond",serif; font-size: clamp(24px,2.4vw,30px); font-weight:400; color:var(--text); }
.svc-row-main .svc-meta { margin: 0 0 14px; font-family:"Jost",sans-serif; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--hint); }
.svc-row-main p { margin: 0 0 14px; font-size:14px; font-weight:300; line-height:1.7; color:var(--muted); max-width: 60ch; }
.svc-includes { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 16px; }
.svc-includes li { position:relative; padding-left: 20px; font-size:13px; font-weight:300; color:var(--muted); }
.svc-includes li::before { content:"\2713"; position:absolute; left:0; color:var(--gold); }
.svc-row-cta { display:flex; flex-direction:column; align-items:flex-end; gap:10px; white-space:nowrap; }
.svc-price { font-family:"Cormorant Garamond",serif; font-size: clamp(30px,3vw,40px); font-weight:400; color:var(--text); line-height:1; }

/* Process steps */
.steps { counter-reset: step; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(18px,2vw,28px); }
.step { position:relative; padding-top: 54px; }
.step::before {
  counter-increment: step; content: counter(step,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:"Cormorant Garamond",serif; font-size: 34px; color: var(--gold); line-height:1;
}
.step h3 { margin: 0 0 8px; font-family:"Cormorant Garamond",serif; font-size: 22px; font-weight:400; color:var(--text); }
.step p { margin:0; font-size:14px; font-weight:300; line-height:1.7; color:var(--muted); }

/* FAQ accordion */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style:none; cursor:pointer; padding: 22px 40px 22px 0; position:relative;
  font-family:"Cormorant Garamond",serif; font-size: clamp(19px,2vw,23px); font-weight:400; color:var(--text);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:"\002B"; position:absolute; right:6px; top:50%; transform: translateY(-50%);
  font-family:"Jost",sans-serif; font-size: 22px; font-weight:300; color: var(--gold); transition: transform .25s ease;
}
.faq-item[open] summary::after { content:"\2212"; }
.faq-item p { margin: 0 0 22px; font-size:15px; font-weight:300; line-height:1.75; color:var(--muted); max-width: 70ch; }

/* Info grid (contact) */
.info-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2vw,26px); }
.info-card { padding: clamp(26px,3vw,34px); border:1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,0.55); }
.info-card i { font-size: 24px; color: var(--gold); }
.info-card h3 { margin: 16px 0 10px; font-family:"Cormorant Garamond",serif; font-size:24px; font-weight:400; color:var(--text); }
.info-card p, .info-card a { margin:0; font-size:14px; font-weight:300; line-height:1.7; color:var(--muted); }
.info-card a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

/* Hours table */
.hours-table { max-width: 520px; margin: 0 auto; }
.hours-table .hours-row { display:flex; justify-content:space-between; gap:24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hours-table .hours-row:last-child { border-bottom:0; }
.hours-table .hours-row.today { }
.hours-table .day { font-family:"Jost",sans-serif; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.hours-table .time { font-family:"Cormorant Garamond",serif; font-size: 22px; color: var(--text); }
.hours-table .time.closed { font-style:italic; color: var(--hint); }

@media (max-width: 860px) {
  .feature-grid, .steps, .info-grid { grid-template-columns: 1fr 1fr; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-row-cta { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 560px) {
  .feature-grid, .steps, .info-grid { grid-template-columns: 1fr; }
}

/* Barber profiles (team page) */
.profile { max-width: 1180px; margin: 0 auto; }
.profile + .profile { margin-top: clamp(56px, 7vw, 96px); }
.profile-reverse .who-story-media { order: 2; }
.profile-actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.profile-specialties { margin: 20px 0 0; }

/* ===================== Instagram DM "chat" widget ========================== */
/* A floating chat launcher (bottom-right) that opens a small popover whose CTA
   sends the visitor to the studio's Instagram DM. Injected on every page by
   script.js. Sits below the header (100) and booking modal (1000), so the
   mobile nav overlay and the booking modal both cover it when open. */
.cs-chat {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: calc(clamp(16px, 4vw, 28px) + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  font-family: "DM Sans", sans-serif;
  /* CRITICAL: the closed panel still occupies layout space, so this container
     is a large invisible box over the lower page. Without this it swallows taps
     on everything beneath it (Book, Instagram, etc.). Only the launcher and the
     open panel opt back into pointer events below. */
  pointer-events: none;
}

.cs-chat-launcher {
  order: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: #1a1916;
  color: #f0ede8;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(26, 25, 22, 0.28);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
  /* re-enable taps on the button itself (container is pointer-events:none) */
  pointer-events: auto;
}

.cs-chat-launcher:hover,
.cs-chat-launcher:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 16px 36px rgba(26, 25, 22, 0.34);
}

.cs-chat-launcher i {
  font-size: 26px;
  line-height: 1;
}

.cs-chat-launcher .cs-chat-ico-close {
  display: none;
}

.cs-chat.is-open .cs-chat-launcher .cs-chat-ico-open {
  display: none;
}

.cs-chat.is-open .cs-chat-launcher .cs-chat-ico-close {
  display: inline-flex;
}

/* Gentle "unread" pulse to invite a first tap; hidden once opened. */
.cs-chat-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #1a1916;
  box-shadow: 0 0 0 0 rgba(194, 160, 106, 0.55);
  animation: csChatPulse 2.4s ease-out infinite;
}

.cs-chat.is-open .cs-chat-badge {
  display: none;
}

@keyframes csChatPulse {
  0% { box-shadow: 0 0 0 0 rgba(194, 160, 106, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(194, 160, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 160, 106, 0); }
}

.cs-chat-panel {
  order: 1;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 116px);
  overflow-y: auto;
  border-radius: 22px;
  background: #f0ede8;
  box-shadow: 0 26px 60px rgba(13, 12, 11, 0.35);
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.3s var(--ease-out), opacity 0.25s ease, visibility 0.3s linear;
}

.cs-chat.is-open .cs-chat-panel {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Keep the widget out of the way while the full-screen mobile menu is open. */
body.nav-open .cs-chat {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.cs-chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #1a1916;
  color: #f0ede8;
}

.cs-chat-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #2a2824;
}

.cs-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(0.6%, -3.3%);
}

.cs-chat-head-text {
  line-height: 1.2;
}

.cs-chat-head-text strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 19px;
  font-weight: 500;
  font-style: italic;
}

.cs-chat-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(240, 237, 232, 0.62);
}

.cs-chat-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6fbf73;
}

.cs-chat-body {
  padding: 22px 20px 20px;
}

.cs-chat-bubble {
  margin: 0;
  background: #ffffff;
  border: 1px solid rgba(26, 25, 22, 0.08);
  border-radius: 4px 16px 16px 16px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: #3d3c39;
  box-shadow: 0 2px 8px rgba(26, 25, 22, 0.04);
}

.cs-chat-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 2px 18px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
}

.cs-chat-note i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 15px;
  color: var(--gold);
}

.cs-chat-note strong {
  font-weight: 500;
  color: var(--text);
}

.cs-chat-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 100px;
  background: #1a1916;
  color: #f0ede8;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.18s var(--ease-spring), box-shadow 0.2s ease, filter 0.2s ease;
}

.cs-chat-cta i {
  font-size: 18px;
  line-height: 1;
}

.cs-chat-cta:hover,
.cs-chat-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(26, 25, 22, 0.25);
}

.cs-chat-foot {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--hint);
}

@media (prefers-reduced-motion: reduce) {
  .cs-chat-panel,
  .cs-chat-launcher {
    transition: none;
  }

  .cs-chat-badge {
    animation: none;
  }
}