/* =============================================================
   Inspire Hospitality — Home v2 ("people, culture, guest experience")
   Redesigned homepage per the Homepage Webflow spec + v1 feedback:
   - photographic Six Arts hero graded into Amethyst Deep #36284A
   - tighter section rhythm (less dead space)
   - horizontal service accordion
   - arch-masked project cards with a restrained 人 (rén) motif
   - compact track record, personal founder note, booking form
   Layers on top of styles.css tokens; loaded after pages.css.
   ============================================================= */

:root {
  --amethyst: #36284A;
  --gold: #D8B36A;
  --gold-soft: rgba(216, 179, 106, 0.55);
  /* tightened rhythm — v1 feedback: too much space between sections */
  --sec-pad: clamp(44px, 5vw, 64px);
}

/* =============================================================
   HERO — dusk courtyard photograph, centred, one invitation
   ============================================================= */
.hero-six {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--amethyst);
  color: var(--text-primary);
  padding: clamp(120px, 14vh, 180px) 0 clamp(88px, 12vh, 140px);
  isolation: isolate;
}
.hero-six__media { position: absolute; inset: 0; z-index: 0; }
.hero-six__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  /* the courtyard photograph is already dusk-graded — lift it slightly so
     the garden reads, and let the lantern warmth through */
  filter: saturate(1.02) brightness(1.06) contrast(1.02);
  transform: scale(1.05);
  animation: heroSixDrift 30s var(--ease-in-out) infinite alternate;
}
@keyframes heroSixDrift {
  0%   { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.11) translate(-1.2%, -0.8%); }
}
/* Amethyst Deep grade — a light pull toward the brand palette only */
.hero-six__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--amethyst);
  mix-blend-mode: color;
  opacity: 0.22;
}
/* centred composition: a quiet radial pool behind the copy, dark base */
.hero-six__tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 54% at 50% 46%, rgba(26, 14, 32, 0.42) 0%, rgba(26, 14, 32, 0.10) 58%, transparent 78%),
    linear-gradient(180deg, rgba(54, 40, 74, 0.30) 0%, rgba(54, 40, 74, 0.06) 34%, rgba(38, 24, 50, 0.34) 72%, rgba(26, 14, 32, 0.78) 100%);
}
/* Light breaking through — dusk sky + lantern glow, no travelling bolt */
.hero-six__light {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 56% 42% at 50% 10%, rgba(229, 186, 196, 0.20) 0%, transparent 60%),
    radial-gradient(ellipse 34% 34% at 24% 78%, rgba(242, 211, 157, 0.16) 0%, transparent 62%),
    radial-gradient(ellipse 34% 34% at 78% 78%, rgba(242, 211, 157, 0.14) 0%, transparent 62%);
  animation: heroSixBreath 12s var(--ease-in-out) infinite alternate;
}
@keyframes heroSixBreath {
  from { opacity: 0.75; }
  to   { opacity: 1; }
}
.hero-six__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity: 0.35;
}
.hero-six__content {
  position: relative; z-index: 3;
  /* wide enough that "Management Company" (~907px at the title's max font
     size) never auto-wraps to a 3rd line — this element doubles as
     .container, whose own 64px side padding eats into max-width under
     border-box, so the budget has to include that padding twice */
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Full-sentence headline (v2 hero copy) reads as running prose rather
   than a 2-word lockup — smaller, tighter leading, wraps naturally. */
.hero-six__title--sentence {
  max-width: 18ch;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.14;
}
.hero-six__eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 16px; font-weight: 500; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(242, 235, 224, 0.85);
  margin: 0 0 24px;
}
/* symmetric rules either side of the centred eyebrow */
.hero-six__eyebrow::before,
.hero-six__eyebrow::after {
  content: ""; width: 48px; height: 1px;
  background: var(--gradient-golden);
  box-shadow: 0 0 12px rgba(242, 211, 157, 0.65);
}
.hero-six__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.5;
  color: rgba(242, 235, 224, 0.88);
  max-width: 44ch;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
}
.hero-six__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(46px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Fixed line breaks (not left to natural wrapping): 1 break / 2 lines on
   desktop — "Boutique Hotel" / "Management Company" — and 3 breaks /
   4 lines on mobile, one word per line. */
.hero-six__br--mobile-only { display: none; }
@media (max-width: 640px) {
  .hero-six__br--mobile-only { display: inline; }
}
/* the liked v1 "text highlight": italic word carries the gradient */
.hero-six__title em {
  font-style: italic;
  white-space: nowrap; /* break before "in others.", never inside it */
  background: var(--gradient-signature);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 26px rgba(229, 186, 196, 0.32));
}
.hero-six__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px;
  margin-top: clamp(26px, 3.4vw, 40px);
}
.hero-six__hairline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gradient-signature); opacity: 0.85; z-index: 4;
}

/* =============================================================
   Shared: tightened section shell + arch imagery
   ============================================================= */
.sec { position: relative; padding: var(--sec-pad) 0; }
.sec--cream { background: var(--cream); color: var(--ink); }
.sec--dark  { background: var(--bg-deep); color: var(--text-primary); }
/* cream-surface type colours (mirrors .section--cream in pages.css) */
.sec--cream .section-mark { color: var(--soft-charcoal); }
.sec--cream .display { color: var(--ink); }
.sec--cream .display em { --text-grad: var(--gradient-on-light); }
.sec--cream .section-head__lede { color: var(--soft-charcoal); }
.sec--cream .lede { color: var(--soft-charcoal); }
.sec--cream .btn--ghost {
  color: var(--ink);
  border-color: rgba(31, 27, 46, 0.30);
}
.sec--cream .btn--ghost:hover {
  border-color: rgba(31, 27, 46, 0.65);
  background: rgba(31, 27, 46, 0.04);
}

.arch {
  overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: var(--bg-raised);
}
.arch img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.arch:hover img { transform: scale(1.04); }

/* =============================================================
   I · WHO IS INSPIRE HOSPITALITY — one statement + founder note
   (copy fixed by "Inspire Hospitality Home Page Texts.pdf")
   ============================================================= */
/* standard section sub-line: serif statement under the display heading */
.section-sub {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.42;
  margin: 14px 0 0;
  color: var(--text-secondary);
  max-width: 42ch;
}
.sec--cream .section-sub { color: var(--ink-soft); }
.section-sub em {
  font-style: italic;
  font-weight: 300;
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sec--cream .section-sub em { background: var(--gradient-on-light); -webkit-background-clip: text; background-clip: text; }

.whois__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: nowrap;
  max-width: none;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.whois__head .display { margin-bottom: 0; max-width: 32ch; min-width: 0; }
.whois__cta { flex: 0 0 auto; margin-top: 0.3em; }

/* Emphasis words read as bold ink, not gradient/italic — matches the
   client's approved layout reference and keeps the statement legible. */
.whois__head .display em {
  font-style: normal;
  font-weight: 700;
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--plum);
  padding-right: 0;
}

.whois__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.whois__founder {
  position: relative;
  max-width: 54ch;
}

/* ---- Founder collage: single arch-framed portrait ---- */
.founder-collage {
  position: relative;
  margin: 0 auto clamp(16px, 2vw, 22px);
  max-width: 400px;
  width: 100%;
}
.founder__glow {
  position: absolute;
  inset: -12% -16% -8%;
  background:
    radial-gradient(ellipse 60% 55% at 30% 24%, rgba(242, 211, 157, 0.5) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 76% 80%, rgba(209, 169, 242, 0.35) 0%, transparent 66%);
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.founder-collage__main {
  position: relative;
  display: block;
  aspect-ratio: 3 / 3.4;
  overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: var(--amethyst);
  box-shadow: 0 28px 64px -30px rgba(31, 27, 46, 0.45);
  z-index: 1;
}
.founder-collage__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(0.9);
}
.founder-collage__name {
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--plum);
  text-align: center;
}

/* Scaled up so the column fills its half of the grid rather than
   leaving a well of empty space beside the portrait. */
.whois__founder-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 20px;
}
.whois__founder-copy {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.65;
  color: var(--soft-charcoal);
  margin: 0;
  max-width: 40ch;
}
.whois__founder-link { margin-top: clamp(20px, 2.4vw, 28px); }

@media (max-width: 860px) {
  .whois__head { flex-direction: column; align-items: flex-start; }
  .whois__grid { grid-template-columns: 1fr; gap: 34px; }
  .founder-collage { max-width: 320px; }
  /* The portrait is 2:3; the desktop arch is 3/3.4, which trims a quarter of
     it. There is room to let the arch run taller once it is the only thing in
     the column, so the crop eases to ~11% and Elizabeth is not cut at the
     shoulders. */
  .founder-collage__main { aspect-ratio: 3 / 4; }
}

/* =============================================================
   (legacy) chapter reader styles — section removed 2026-07-14;
   .story__anchor is still used for the #founder deep link.
   ============================================================= */
.story { position: relative; }
/* invisible anchor so old #founder links land on this section */
.story__anchor { position: absolute; top: 0; }
.story .section-head { margin-bottom: clamp(22px, 3vw, 34px); }

/* ---- chapter ribbon: numbered serif words under one hairline ---- */
.story__chapters {
  --chapter-rotate: 6.5s; /* must match STORY_ROTATE_MS in home.js */
  display: flex;
  gap: 0 clamp(20px, 3.4vw, 52px);
  border-top: 1px solid rgba(31, 27, 46, 0.16);
  border-bottom: 1px solid rgba(31, 27, 46, 0.16);
  margin: 0 0 clamp(30px, 4vw, 50px);
  overflow-x: auto;
  scrollbar-width: none;
}
.story__chapters::-webkit-scrollbar { display: none; }
.chapter {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex: 0 0 auto;
  padding: clamp(14px, 1.6vw, 19px) 2px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chapter__index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--soft-charcoal);
  opacity: 0.7;
}
.chapter__word {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 25px);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--ink);
  transition: color 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.chapter:not(.is-active) .chapter__word { opacity: 0.4; }
.chapter:hover .chapter__word,
.chapter:focus-visible .chapter__word { opacity: 1; }
.chapter.is-active .chapter__word {
  background: var(--gradient-on-light);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.chapter:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}
/* progress hairline: fills under the active word while auto-rotating,
   holds full once the visitor takes over */
.chapter::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gradient-golden);
  transform: scaleX(0);
  transform-origin: left;
}
.chapter.is-active::after {
  animation: chapterProgress var(--chapter-rotate) linear forwards;
}
.story__chapters.is-manual .chapter.is-active::after {
  animation: none;
  transform: scaleX(1);
}
@keyframes chapterProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- the stage: text panel left, arched scene right ---- */
.story__stage {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.story__panels {
  position: relative;
  /* tall enough for the founder note so scenes don't jump */
  min-height: clamp(260px, 30vw, 340px);
  display: grid;
  align-content: center;
}
.chapter-panel { grid-area: 1 / 1; }
.chapter-panel[hidden] { display: none; }
.chapter-panel.is-active {
  animation: chapterPanelIn 0.6s var(--ease-out) both;
}
@keyframes chapterPanelIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chapter-panel__line {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  max-width: 24ch;
}
.chapter-panel__copy {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--soft-charcoal);
  max-width: 54ch;
  margin: 0;
}
.chapter-panel--founder .chapter-panel__copy {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--ink-soft);
}
.chapter-panel__sig {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 21px);
  color: var(--plum);
  margin: 14px 0 0;
}

/* ---- the framed scene: an arch echoing the courtyard gates ---- */
.story__media {
  max-width: 520px;
  width: 100%;
  justify-self: end;
  margin: 0;
}
.story__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(31, 27, 46, 0.4);
  background: var(--cream-deep);
}
.story__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.8s var(--ease-out), transform 7s var(--ease-in-out);
}
.story__scene.is-active {
  opacity: 1;
  transform: scale(1.06); /* slow push-in while the scene is up */
}
.story__caption {
  margin: 14px 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--ink-soft);
  text-align: center;
}

/* =============================================================
   II · WHAT WE DO — dark, horizontal image accordion
   ============================================================= */
/* The two atmospheric blooms are anchored at right/left: -10%, so they hang
   past the section edge. #book and .shaped already clip theirs; this one did
   not, which let the widest bloom set the body's content width — 143px wider
   than the viewport on desktop, 39px on mobile. body{overflow-x:hidden} hid
   the scrollbar but not the consequence: the mobile nav is laid out against
   that over-wide body, so its CTA ran off the right edge.

   clip on the x-axis only, not `overflow: hidden`: hidden would force the
   y-axis to a scroll container too and cut the bloom's vertical bleed into
   the sections above and below, which is a desktop appearance change. This
   removes the horizontal contribution and nothing else. */
.approach { overflow-x: clip; }
.approach .section-head { margin-bottom: clamp(22px, 2.8vw, 32px); position: relative; z-index: 1; }
.approach > .container { position: relative; z-index: 1; }
.approach__title { font-size: clamp(40px, 4.8vw, 60px); }

/* horizontal accordion — the active panel expands sideways to
   reveal its copy; the others narrow into image spines */
.acc {
  display: flex;
  gap: clamp(10px, 1.2vw, 16px);
  height: clamp(380px, 48vh, 480px);
}
.acc__item {
  position: relative;
  flex: 1 1 0;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--hairline-soft);
  background: var(--bg-raised);
  cursor: pointer;
  transition: flex 0.85s var(--ease-in-out);
  isolation: isolate;
}
.acc__item.is-open { flex: 3.4 1 0; cursor: default; }
.acc__media { position: absolute; inset: 0; z-index: 0; }
.acc__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.62);
  transition: filter 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}
.acc__item.is-open .acc__media img { filter: saturate(0.85) brightness(0.48); }
.acc__item:not(.is-open):hover .acc__media img { filter: saturate(0.9) brightness(0.72); }
.acc__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* strong, fairly even veil (not just a bottom-anchored fade) so the
     centred text stays legible no matter what part of the photo it sits over */
  background: linear-gradient(180deg, rgba(26, 14, 32, 0.58) 0%, rgba(26, 14, 32, 0.46) 45%, rgba(26, 14, 32, 0.82) 100%);
}
/* Open panel: darker still, so the longer body copy stays easy to read */
.acc__item.is-open .acc__scrim {
  background: linear-gradient(180deg, rgba(26, 14, 32, 0.72) 0%, rgba(26, 14, 32, 0.62) 45%, rgba(26, 14, 32, 0.92) 100%);
}
.acc__head {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: clamp(18px, 2.4vw, 30px);
  background: none; border: 0; text-align: left;
  color: var(--text-primary);
}
.acc__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.14;
  margin: 0;
  max-width: 14ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
/* closed panels: still generous, but a touch smaller for a clean spine */
.acc__item:not(.is-open) .acc__name { font-size: clamp(21px, 2vw, 28px); }
.acc__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(18px, 2.4vw, 30px);
  padding-top: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: 0s;
  pointer-events: none;
}
.acc__item.is-open .acc__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
  pointer-events: auto;
}
/* when open, the head lifts to make room for the body copy — and stays
   flush left, matching the body copy beneath it */
.acc__item.is-open .acc__head { position: static; padding-bottom: 0; min-height: 0; align-items: flex-start; }
.acc__item.is-open .acc__name { text-align: left; max-width: none; }
.acc__item.is-open {
  display: flex; flex-direction: column; justify-content: center;
}
.acc__item.is-open .acc__body { position: static; }
.acc__quote {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(19px, 1.75vw, 25px);
  line-height: 1.35;
  color: var(--text-primary);
  margin: 10px 0 14px;
  max-width: 62ch;
  padding-left: 18px;
  border-left: 3px solid var(--peach);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.acc__copy {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(242, 235, 224, 0.82);
  margin: 0;
  max-width: 58ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.acc__copy + .acc__copy { margin-top: 0.85em; }

/* =============================================================
   III · PLACES WE'VE SHAPED — cream, arch cards, 人 undertone
   ============================================================= */
.shaped { overflow: hidden; }
.shaped .section-head { margin-bottom: clamp(20px, 2.6vw, 30px); }

/* header row: title left, portfolio CTA right (V2 mockup arrangement) */
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  flex-wrap: wrap;
  max-width: none;
}
.section-head--row .display { margin-bottom: 0; }
.shaped__cta { flex: 0 0 auto; margin-bottom: 8px; }

/* A gallery wall of arch-framed photographs — every place visible
   at once, echoing the courtyard arch of the hero. Even cards sit
   a step lower for editorial rhythm. Hover / focus wakes a card:
   the photo breathes, the engagement line and invitation rise,
   and the neighbours fall quiet. */
.works-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wplace {
  display: block;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 0.4s var(--ease-out);
}
.wplace:focus-visible { outline: 2px solid var(--plum); outline-offset: 5px; border-radius: 999px 999px var(--radius) var(--radius); }
/* the card in hand wakes; its neighbours fall quiet */
.works-gallery:hover .wplace:not(:hover) { opacity: 0.45; }

.wplace__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.1;
  overflow: hidden;
  border-radius: 999px 999px var(--radius) var(--radius);
  background: var(--amethyst);
  box-shadow: 0 24px 60px -30px rgba(31, 27, 46, 0.38);
}
.wplace__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1s var(--ease-out);
}
.wplace:hover .wplace__media img,
.wplace:focus-visible .wplace__media img { transform: scale(1.07); }
/* quiet plum grade so the keystone index always reads */
.wplace__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(31, 27, 46, 0.30), transparent 34%);
  transition: opacity 0.5s var(--ease-out);
}
.wplace:hover .wplace__veil,
.wplace:focus-visible .wplace__veil { opacity: 0.55; }
/* keystone number at the crown of the arch */
.wplace__index {
  position: absolute; top: clamp(16px, 2vw, 26px); left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 18px);
  color: rgba(242, 235, 224, 0.85);
  letter-spacing: 0.12em;
}

.wplace__cap {
  display: block;
  padding: clamp(14px, 1.8vw, 22px) 6px 0;
  text-align: center;
}
.wplace__name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  transition: opacity 0.4s var(--ease-out);
}
.wplace:hover .wplace__name,
.wplace:focus-visible .wplace__name {
  background: var(--gradient-on-light);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* the invitation rises only for the card in hand */
.wplace__more {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--plum);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.wplace:hover .wplace__more,
.wplace:focus-visible .wplace__more { opacity: 1; transform: translateY(0); }
.wplace__arrow { transition: transform 0.35s var(--ease-out); }
.wplace:hover .wplace__arrow { transform: translateX(4px); }

.shaped__actions { display: flex; justify-content: center; margin-top: clamp(28px, 3.4vw, 44px); }

@media (max-width: 1020px) {
  .works-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .works-gallery { grid-template-columns: 1fr; padding-bottom: 0; }
}
/* touch / coarse pointers: no hover to lean on — keep every card
   fully lit and the invitation visible */
@media (hover: none), (pointer: coarse) {
  .works-gallery:hover .wplace:not(:hover) { opacity: 1; }
  .wplace__more { opacity: 1; transform: none; }
}

/* =============================================================
   IV · TRACK RECORD — compact, numbers lead, no competing numerals
   ============================================================= */
.measured .container {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(30px, 4.4vw, 64px);
  align-items: center;
}
.measured__intro .section-head { margin-bottom: 0; }
.measured__intro .section-head__lede { margin-bottom: 0; }
/* editorial hairline ledger (V2 mockup): rows divided by rules, not boxes */
.mstats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.mstat {
  padding: clamp(16px, 2vw, 24px) 0;
  border-top: 1px solid var(--hairline-soft);
}
.mstat:nth-child(odd)  { padding-right: clamp(22px, 2.8vw, 40px); }
.mstat:nth-child(even) {
  padding-left: clamp(22px, 2.8vw, 40px);
  border-left: 1px solid var(--hairline-soft);
}
.mstat__num {
  display: flex;
  align-items: baseline;
  gap: 9px;
  line-height: 1;
  margin-bottom: 12px;
}
.mstat__value {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(42px, 4.4vw, 60px);
  background: var(--gradient-golden);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* word-led entries (Executive / International) sit on the same
   ledger but speak in a smaller serif so they never overflow */
.mstat__value--word {
  font-size: clamp(28px, 2.8vw, 40px);
  letter-spacing: 0.01em;
}
.mstat__unit {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-secondary);
}
.mstat__label {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 40ch;
}

/* =============================================================
   VI · BOOK A MEETING — dark gradient moment + form
   ============================================================= */
.book {
  position: relative;
  background: var(--bg-deepest);
  overflow: hidden;
  isolation: isolate;
}
.book__bloom {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(90px);
}
.book__bloom--lavender {
  top: -30%; right: -18%;
  background: radial-gradient(circle, rgba(209, 169, 242, 0.20) 0%, transparent 62%);
}
.book__bloom--gold {
  bottom: -34%; left: -16%;
  background: radial-gradient(circle, rgba(242, 211, 157, 0.14) 0%, transparent 62%);
}
.book .container { position: relative; z-index: 1; }
.book__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.book__title { margin: 0 0 14px; }
.book__lede {
  color: var(--text-secondary);
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.65;
  max-width: 34ch;
  margin: 0 0 clamp(22px, 2.6vw, 32px);
}
/* direct channels — the ledger hairlines make it read as contact details */
.book__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline-soft);
}
.bchannel {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.bchannel__label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--text-muted);
}
.bchannel__value {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease-out);
}
a.bchannel__value:hover { color: var(--peach); }
.book__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--text-faint);
  margin: 16px 0 0;
}

/* editorial underline fields — hairline ledger rather than a boxed card */
.book__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.6vw, 46px) clamp(36px, 4.4vw, 60px);
  margin-bottom: clamp(32px, 4vw, 46px);
}
.bfield { position: relative; display: flex; flex-direction: column; gap: 9px; }
.bfield label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--text-muted);
  transition: color 0.35s var(--ease-out);
}
.bfield input,
.bfield textarea {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.6vw, 23px);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 4px 2px 12px;
  transition: border-color 0.4s var(--ease-out);
}
.bfield input:focus,
.bfield textarea:focus { outline: none; }
.bfield input:not(:placeholder-shown),
.bfield textarea:not(:placeholder-shown) { border-bottom-color: rgba(255, 255, 255, 0.32); }
.bfield--message { grid-column: 1 / -1; }
.bfield__phone-row { display: flex; gap: 12px; }
.bfield__code {
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 4px 2px 12px;
  flex: 0 0 auto;
  width: 6.4em;
  cursor: pointer;
  transition: border-color 0.4s var(--ease-out);
}
/* Country picker — same hairline-ledger treatment as the text fields. */
.bfield__select {
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.6vw, 23px);
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 4px 2px 12px;
  width: 100%;
  cursor: pointer;
  transition: border-color 0.4s var(--ease-out);
}
.bfield__select:focus { outline: none; }
.bfield__select:valid { border-bottom-color: rgba(255, 255, 255, 0.32); }
/* native dropdown panels paint on white — keep their type dark */
.bfield__code option,
.bfield__select option,
.bfield__select optgroup { color: var(--ink); }
.bfield__phone-row #hb-phone { flex: 1 1 auto; min-width: 0; }
.bfield textarea {
  resize: vertical;
  min-height: 3.4em;
  line-height: 1.5;
}
/* absolutely positioned so the focus gradient (.bfield::after, bottom: 0)
   still hugs the textarea's underline */
.bfield__count {
  position: absolute;
  right: 2px;
  bottom: -20px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  transition: color 0.3s var(--ease-out);
}
.bfield--message.is-over .bfield__count { color: var(--rose); }
.bfield--message.is-over textarea { border-bottom-color: var(--rose); }
.bfield input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary);
  transition: background-color 999999s;
}
/* focus: the signature gradient sweeps along the underline */
.bfield::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gradient-signature);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease-out);
}
.bfield:focus-within::after { transform: scaleX(1); }
.bfield:focus-within label { color: var(--peach); }

.book__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.book__status { font-size: 13px; color: var(--peach); min-height: 1.2em; margin: 0; }

/* ---- Calendar popup ---- */
.hb-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.hb-modal.is-open { display: flex; }
.hb-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 8, 20, 0.7);
  backdrop-filter: blur(4px);
}
.hb-modal__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--bg-mid);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7);
}
.hb-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.hb-modal__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0;
}
.hb-modal__title em { font-style: italic; color: var(--peach); }
.hb-modal__close {
  background: none; border: 1px solid var(--hairline);
  border-radius: 999px;
  width: 38px; height: 38px; flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 17px; line-height: 1;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.hb-modal__close:hover { border-color: rgba(209, 169, 242, 0.7); color: var(--text-primary); }
.hb-modal__tz {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 18px;
}
.hb-modal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 34px);
}
.hb-modal__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-soft);
}
.hb-modal__picked {
  font-family: var(--font-serif); font-style: italic;
  font-size: 15px; color: var(--text-secondary); margin: 0;
}
.hb-modal__picked strong { color: var(--peach); font-weight: 500; }
.hb-modal__status {
  font-size: 13px; color: var(--rose); min-height: 1.2em;
  margin: 10px 0 0; text-align: right;
}

/* =============================================================
   Footer tightening (feedback: dead space, no tagline)
   ============================================================= */
.footer .footer__inner { padding-block: clamp(36px, 5vw, 56px); }

/* =============================================================
   Reveal helper (matches script.js scroll-reveal)
   ============================================================= */

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1020px) {
  .story__stage,
  .measured .container,
  .book__grid { grid-template-columns: 1fr; gap: 38px; }
  .story__panels { min-height: 0; padding-bottom: 8px; }
  .story__media { order: -1; max-width: 480px; justify-self: center; }

  /* Accordion becomes a vertical stack; the open card grows.

     height:auto on both is load-bearing, not tidying. The desktop rules set
     `.acc { height: clamp(380px,48vh,480px) }` and `.acc__item { height:100% }`
     — correct for a row of panels that share one band, wrong once they stack.
     Left in place, .acc stayed 405px tall while its three children needed
     1230px, so the panels overflowed their own container by 845px and painted
     straight over the section below, and every closed panel rendered 405px
     tall (100% of .acc) instead of the 96px spine intended here. */
  .acc { flex-direction: column; min-height: 0; height: auto; }
  .acc__item { min-height: 96px; height: auto; flex: none; transition: min-height 0.7s var(--ease-in-out); }
  .acc__item.is-open { min-height: 420px; flex: none; }
}
@media (max-width: 640px) {
  /* 92svh left the courtyard shot (3:2) in a 1:2 box — only a third of the
     frame survived, and nothing below the fold hinted there was more page.
     80svh shows more of the photograph and lets the next section peek. */
  .hero-six { min-height: 80svh; }
  /* the glow is drawn to bleed past the arch; at this width -16% reaches
     outside the viewport, so pull the horizontal bleed in and keep the top
     and bottom as designed */
  .founder__glow { inset: -12% -6% -8%; }
  .mstats { grid-template-columns: 1fr; }
  .mstat:nth-child(odd)  { padding-right: 0; }
  .mstat:nth-child(even) { padding-left: 0; border-left: 0; }
  .book__fields { grid-template-columns: 1fr; gap: 26px; }
  .hb-modal__grid { grid-template-columns: 1fr; }

  /* ---- Touch ergonomics, continued (see styles.css) ---- */

  /* 10–11px uppercase micro-labels: fine on a monitor, squinty in the hand.
     Letter-spacing eases with the size bump so "Location" still fits its
     88px column. */
  .bchannel__label { font-size: 12px; letter-spacing: 0.18em; }
  .bfield label { font-size: 12px; letter-spacing: 0.18em; }
  .bfield__count { font-size: 12px; }

  /* was 28px tall; padding lifts it to a thumb-sized row without moving the
     text off its baseline. (.link-arrow, which the founder link also uses,
     is handled once for every page in pages.css.) */
  .bchannel__value { display: inline-block; padding: 8px 0; }

  /* The country-code select bottoms out at 15px. iOS Safari zooms the whole
     page in when a focused control is under 16px, and it does not zoom back
     out — the visitor is left mid-form on a page wider than the screen. This
     is the only control on the site under the threshold. */
  .bfield__code { font-size: 16px; }

  /* dismissing the calendar is the one control a visitor must never miss */
  .hb-modal__close { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-six__media img, .hero-six__light { animation: none; }
  .acc__item, .acc__body { transition: none; }
  .wplace, .wplace__media img, .wplace__more { transition: none; }
  .works-gallery:hover .wplace:not(:hover) { opacity: 1; }
  /* scenes swap instantly, no push-in, no paced progress line */
  .story__scene { transition: none; }
  .story__scene.is-active { transform: none; }
  .chapter-panel.is-active { animation: none; }
  .chapter.is-active::after { animation: none; transform: scaleX(1); }
}