/* ============================================================================
   template.css — structure and components. Client-agnostic.
   Reads every value from tokens.css. You should not need to edit this file
   to re-skin the template.
   ========================================================================== */

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

html {
  /* ref: html { font-size: 62.5% } -> 1rem = 10px. NOT a fluid vw root. */
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

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

img { height: auto; }

button,
input,
textarea,
select { font: inherit; letter-spacing: inherit; color: inherit; }

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

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

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sr-only--focusable:focus {
  position: fixed; top: 1rem; left: 1rem;
  width: auto; height: auto;
  clip-path: none;
  padding: 1rem 1.6rem;
  background: var(--c-accent);
  color: var(--c-black);
  z-index: 999;
}

:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------- leading-trim
   Trims a line box down to the cap height, so display type can be aligned
   optically instead of by its (font-dependent) line box.
   ref implementation, reproduced verbatim:
     :before margin-bottom: calc((var(--lh) - 1em) / -2 + var(--fos))
     :after  margin-top:    calc((var(--lh) - 1em) / -2 + var(--foe))
   --fos / --foe are per-font vertical metrics from tokens.css.            */
.leading-trim::before,
.leading-trim::after {
  content: '';
  display: block;
  height: 0;
  overflow: hidden;
}
.leading-trim::before { margin-bottom: calc((var(--lh, 1) * 1em - 1em) / -2 + var(--fos, 0em)); }
.leading-trim::after { margin-top: calc((var(--lh, 1) * 1em - 1em) / -2 + var(--foe, 0em)); }
.leading-trim--block { display: block; }

/* ------------------------------------------------------------------ type */
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 200;
  color: var(--c-title);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  /* letter-spacing also appends a phantom space after the LAST glyph, which
     pushes centred display type off-centre. Cancel it. */
  margin-right: calc(var(--ls) * -1);
  --fos: var(--display-fos);
  --foe: var(--display-foe);
}
.h1 { font-size: var(--fs-d1); line-height: var(--lh-d1); --lh: var(--lh-d1); }
.h2 { font-size: var(--fs-d2); line-height: var(--lh-d2); --lh: var(--lh-d2); }
.h3 { font-size: var(--fs-d3); line-height: var(--lh-d3); --lh: var(--lh-d3); }
.h4 { font-size: var(--fs-d4); line-height: var(--lh-d4); --lh: var(--lh-d4); }

.body-text {
  --lh: var(--lh-body);
  --fos: var(--text-fos);
  --foe: var(--text-foe);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 46ch;
}
.text-small { font-size: var(--fs-small); }

/* Reading text in sentence case. The house style is uppercase everywhere
   (set on body); long-form copy reads more easily without it. Headings,
   labels, nav and buttons keep the uppercase. Delete this block to revert. */
.body-text,
.hero__tagline,
.intro__quote p,
.quotes__item p,
.services__desc,
.statement__copy {
  text-transform: none;
  letter-spacing: 0.01em;
}
/* body copy is 16px everywhere (client request); these two used the label size */
/* html-prefixed so it outranks the component rules further down the file */
html .services__desc,
html .statement__copy { font-size: var(--fs-body); line-height: 1.5; }
.text-accent { color: var(--c-accent); }
.text-white { color: var(--c-white); }
.text-center { text-align: center; }

/* ------------------------------------------------------------------ grid
   12 / 8 / 6 columns, zero gutter, edge to edge. Composition comes from
   column offsets, not from a page gutter — the reference has no gutter.  */
.section {
  position: relative;
  width: 100%;
  /* A title waiting to reveal sits at scale(1.35). On a full-width wrapper
     that pushes ~17% past the viewport on each side and produces REAL
     horizontal scroll (worst at short landscape sizes).
     overflow-x: clip contains it WITHOUT creating a scroll container, so
     position: sticky inside still works. overflow: hidden would break it —
     see the pitfalls note in the README. */
  overflow-x: clip;
}
.section--clip { overflow: hidden; }

.row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: 0 var(--grid-gutter);
  width: 100%;
}

/* span helpers: .col-1 .. .col-12 (capped by the active column count) */
.col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }

.start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; }
.start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; }
.start-8 { grid-column-start: 8; }

/* ref: .title-offset { margin-left: var(--grid-col) } with .5 step modifiers */
.title-offset { margin-left: var(--grid-col); }
.title-offset--0\.5 { margin-left: calc(var(--grid-col) * 0.5); }
.title-offset--1 { margin-left: calc(var(--grid-col) * 1); }
.title-offset--1\.5 { margin-left: calc(var(--grid-col) * 1.5); }
.title-offset--2 { margin-left: calc(var(--grid-col) * 2); }
.title-offset--2\.5 { margin-left: calc(var(--grid-col) * 2.5); }
.title-offset--3 { margin-left: calc(var(--grid-col) * 3); }
.title-offset--3\.5 { margin-left: calc(var(--grid-col) * 3.5); }
.title-offset--4 { margin-left: calc(var(--grid-col) * 4); }

/* split-line heading: each line its own colour + indent (ref signature).
   leading-trim removes the line box's natural descender space, so a heading
   needs explicit separation from whatever follows it. */
.title-lines { display: block; width: fit-content; margin-bottom: var(--sp-2); }
.title-lines__line { display: block; }
.title-lines__line--accent { color: var(--c-accent); }
.title-lines__line--white { color: var(--c-white); }

/* --------------------------------------------------------------- buttons
   ref: large SQUARE outline buttons (180px in the hero, 240px in the intro)
   with two stacked SVG rects. The second rect draws itself on hover by
   animating stroke-dashoffset. The label/icon is duplicated and rolls up.  */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-text);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  letter-spacing: var(--ls);
  text-transform: uppercase;
  color: var(--c-white);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* touch target floor — applies on every device, costs nothing on desktop */
  min-width: 44px;
  min-height: 44px;
}

.btn__outline {
  position: absolute;
  inset: 0;
  /* An <svg> with no viewBox is a replaced element with an intrinsic 300x150
     size, and `inset: 0` does NOT override that while width/height are auto —
     the outline renders 150px tall regardless of the button. Set both. */
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.btn__outline rect {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  x: 1px;
  y: 1px;
  vector-effect: non-scaling-stroke;
}
/* resting outline */
.btn__outline rect:first-child { stroke: var(--c-white-20); }
/* drawing outline — dash length is set from JS once the box is measured */
.btn__outline rect + rect {
  stroke: var(--c-accent);
  stroke-dasharray: var(--path-length, 1000px);
  stroke-dashoffset: var(--path-length, 1000px);
  transition: stroke-dashoffset var(--d-slow) var(--e-out);
}
.has-hover .btn:hover .btn__outline rect + rect,
.btn.is-active .btn__outline rect + rect,
.btn:focus-visible .btn__outline rect + rect { stroke-dashoffset: 0; }

/* label / icon roll — ref: two stacked clones, the second offset below */
.btn__content {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: var(--lh-btn);
}
.btn__label {
  display: block;
  transition: transform var(--d-slow) var(--e-out);
}
.btn__label--clone {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}
.has-hover .btn:hover .btn__label { transform: translateY(-100%); }
.has-hover .btn:hover .btn__label--clone { transform: translateY(0); }

.btn--square {
  width: var(--btn-size, 18rem);
  height: var(--btn-size, 18rem);
  flex-direction: column;
}
.btn--square-lg { --btn-size: 24rem; }

.btn--inline {
  padding: 1.4rem 2.4rem;
  min-height: 44px;
}

.btn__icon {
  display: block;
  width: 3rem;
  height: 3rem;
  stroke: currentColor;
  fill: none;
}

/* ---------------------------------------------------------------- header */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  min-height: var(--header-h);
  display: grid;
  /* minmax(0,1fr): side columns can never grow past half, so an over-wide
     nav can't shove the logo off centre (see fitHeaderNav in app.js) */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 2.4rem var(--sp-1) 1.2rem;   /* breathing room above the logo */
  transition: min-height var(--d-slow) var(--e-out), background var(--d-base) var(--e-out), padding var(--d-slow) var(--e-out);
}
/* a whisper of ground once it overlaps content, so the nav stays readable */
.is-scrolled .header {
  padding-top: 1.2rem;
  background: linear-gradient(180deg, rgb(247 241 236 / 0.72) 0%, rgb(247 241 236 / 0) 100%);
}
/* Brand lockup: monogram over wordmark, centred. Once the page scrolls the
   wordmark collapses away and only the mark is left, so the header stays out
   of the way of the content. */
.header__brand {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-width: 44px;
  min-height: 44px;
}
.header__mark {
  height: 5.2rem;              /* 2x the original 2.6rem mark */
  width: auto;
  transition: height var(--d-slow) var(--e-out);
}
.header__wordmark {
  /* the wordmark is a fine script — below ~3rem it stops being readable */
  height: 3.2rem;
  width: auto;
  opacity: 1;
  transition:
    height var(--d-slow) var(--e-out),
    opacity var(--d-base) var(--e-out),
    margin var(--d-slow) var(--e-out);
}
.is-scrolled .header__mark { height: 3rem; }
.is-scrolled .header__wordmark {
  height: 0;
  opacity: 0;
  margin-top: -0.8rem;
  pointer-events: none;
}
.header__nav {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-2);
}
/* Book: gold pill with a slow shimmer sweep, a soft pulsing glow and a
   nudging arrow, so the primary action reads at a glance */
.header__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  padding: 0 1.8rem 0 2.2rem;
  border-radius: 0;
  background: var(--c-accent);
  color: #3B2E29;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  overflow: hidden;
  isolation: isolate;
  animation: cta-glow 2.8s ease-in-out infinite;
  transition: background-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.header__cta::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: skewX(-20deg);
  animation: cta-shine 3.2s ease-in-out infinite;
  z-index: -1;
}
.header__cta svg {
  width: 16px;
  height: 16px;
  animation: cta-nudge 1.6s ease-in-out infinite;
}
.has-hover .header__cta:hover { background: var(--c-accent-light); transform: translateY(-1px); }
.header__cta:focus-visible { outline: 1px solid var(--c-white); outline-offset: 3px; }
@keyframes cta-shine {
  0%, 55% { left: -60%; }
  100% { left: 130%; }
}
/* soft blurred glow — a hard spread ring read as a dark box over photos */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 6px 0 rgb(201 161 150 / 0.25); }
  50% { box-shadow: 0 0 22px 2px rgb(201 161 150 / 0.6); }
}
@keyframes cta-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .header__cta, .header__cta::before, .header__cta svg { animation: none; }
}

.header__meta {
  grid-column: 1;
  font-size: var(--fs-small);
  color: var(--c-accent);
}
.header__link {
  font-size: var(--fs-small);
  color: var(--c-white);
  position: relative;
  padding: 1rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.header__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.6rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.has-hover .header__link:hover::after { transform: scaleX(1); }

/* burger — phone only */
.header__burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.header__burger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--c-white);
  position: relative;
  transition: background var(--d-base) var(--e-out);
}
.header__burger span::before,
.header__burger span::after {
  content: '';
  position: absolute;
  left: 0; width: 22px; height: 1px;
  background: var(--c-white);
  transition: transform var(--d-base) var(--e-out);
}
.header__burger span::before { top: -6px; }
.header__burger span::after { top: 6px; }
/* nav doesn't fit beside the logo (narrow desktop, browser zoom, large
   default font): fall back to the burger at ANY width */
.header--compact .header__nav { display: none; }
.header--compact .header__burger { display: flex; grid-column: 3; justify-self: end; }
.is-menu-open .header__burger span { background: transparent; }
.is-menu-open .header__burger span::before { transform: translateY(6px) rotate(45deg); }
.is-menu-open .header__burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* full-screen menu (phone / tablet) */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 var(--sp-2) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  /* it now carries nav + contact + actions, so it must be able to scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-in-out), visibility 0s linear var(--d-slow);
}
.is-menu-open .menu {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--d-slow) var(--e-in-out), visibility 0s;
}

/* top bar: brand + the menu's own close control. The menu sits ABOVE the
   header, so the burger underneath cannot be reached while it is open. */
.menu__top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--header-h);
  margin: 0 calc(var(--sp-2) * -1);
  padding: 0 var(--sp-2);
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-rule);
}
.menu__brand {
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.menu__brand img { height: 3.6rem; width: auto; }
.menu__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--c-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1px var(--c-white-20);
  transition: color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.menu__close svg { width: 18px; height: 18px; }
.has-hover .menu__close:hover,
.menu__close:focus-visible { color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }

.menu__nav { display: block; padding-top: var(--sp-1); }
.menu__link {
  display: block;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-d4);
  line-height: 1.1;
  color: var(--c-accent);
  padding: 0.8rem 0;
  min-height: 48px;
}

/* contact block — same row anatomy as the contact section */
.menu__heading {
  color: var(--c-accent);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--c-rule);
}
.menu__details { display: block; }
.menu__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: var(--sp-1);
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--c-rule);
}
.menu__text { display: grid; gap: 0.2rem; min-width: 0; }
.menu__label { color: var(--c-accent); }
.menu__value {
  color: var(--c-white);
  display: flex;
  align-items: center;
  /* a tappable phone/social link must clear the 44px floor on its own */
  min-height: 44px;
  word-break: break-word;
}
a.menu__value { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.has-hover a.menu__value:hover { color: var(--c-accent); }
/* whole row is the tap target where there is a link */
.menu__row:has(a.menu__value) { min-height: 56px; }

.ico {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent-20);
}
.ico svg { width: 18px; height: 18px; }

.menu__actions { display: grid; gap: var(--sp-1); padding-top: var(--sp-1); }
.menu__book { width: 100%; }
.menu__quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-1); }
.menu__quick-btn { width: 100%; }

/* ------------------------------------------------------------------ hero
   ref: one viewport tall, centred, media overscanned to 111% of viewport. */
.hero {
  position: relative;
  /* min-height, not height: if the stack ever needs more room than one
     screen (short viewport), the hero grows instead of overlapping the logo */
  min-height: max(100svh, 520px);  /* svh, not vh — see README */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
/* Overscan written in vw so it stays a fraction of the VIEWPORT.
   ref: hero iframe 160rem wide on a 144rem viewport, full height.         */
.hero__media {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--overscan);
  /* the global img reset caps width at 100% — overscan must opt out */
  max-width: none;
  height: 100%;
  /* Centred with a margin offset, never with a CSS transform — a transform
     here would compound with the parallax transform and push it off centre. */
  margin-left: calc(var(--overscan) / -2);
  object-fit: cover;
  will-change: transform;
}
/* Scrim strength is a legibility requirement, not decoration: the display
   type is thin, light-weight and gold, and real client footage is rarely as
   dark as a design comp. A vertical wash plus a centre vignette keeps the
   title readable over any frame. Tune the alphas, not the type colour. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.42) 42%, rgb(0 0 0 / 0.82) 100%),
    radial-gradient(120% 78% at 50% 42%, rgb(0 0 0 / 0.1) 0%, rgb(0 0 0 / 0.6) 100%);
  z-index: 1;
}
/* The reference does NOT centre the hero stack — it places three bands at
   fixed fractions of the viewport height. Measured at 1440x900:
     title   y=298  -> 33.1%
     button  y=389  -> 43.2%   (overlaps the title's descender band)
     tagline y=689  -> 76.6%
   Reproduced as absolutely positioned rows. Each row centres its child with
   flexbox, never with a transform, so nothing compounds with the reveal
   transform on .animation--title.                                         */
.hero__inner {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  min-height: max(100svh, 520px);
  z-index: 2;
  text-align: center;
}
.hero__row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
/* Title, CTA and tagline flow as ONE centred column with fixed gaps, so
   none of them can touch at any viewport height (the reference's fixed
   percentage bands overlapped). */
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  /* clear the full header (logo + wordmark), measured in app.js */
  padding: calc(var(--header-full, 13rem) + var(--sp-2)) var(--sp-2) var(--sp-3);
}
.hero__row { position: static; }
/* the scroll cue is a hint, not a feature — keep it small */
.hero__cta .btn { --btn-size: 8rem; }
.hero__row--main {
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.hero__title { color: var(--c-accent); }

/* ---- hero typography treatment ------------------------------------------
   kicker with hairlines / letter-by-letter title with a slow gold shine /
   drawn rule / tagline ending in a cycling gold word                      */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: calc(var(--sp-2) * -1);   /* sit close over the title */
  font-size: var(--fs-small);
  letter-spacing: 0.32em;
  color: var(--c-accent-light);
}
.hero__kicker::before,
.hero__kicker::after {
  content: '';
  width: 4.8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent));
}
.hero__kicker::after { transform: scaleX(-1); }

/* The shine is painted per letter (a parent background-clip:text would not
   paint through letters that are mid-transform). Every letter carries the
   same gradient offset by its index, and one animated length (--shine)
   slides the light band across all of them in step. */
@property --shine {
  syntax: '<length>';
  inherits: true;
  initial-value: 0em;
}
.hero__title {
  --shine: 0em;
  filter: drop-shadow(0 2px 24px rgb(0 0 0 / 0.35));
}
.hero__title.is-revealed { animation: hero-shine 6s ease-in-out 1.8s infinite; }
.hero__char,
.hero__space { display: inline-block; white-space: pre; }
.hero__char {
  background: linear-gradient(100deg,
    var(--c-accent) 0, var(--c-accent) 44%,
    #f6e7c4 50%,
    var(--c-accent) 56%, var(--c-accent) 100%);
  /* tiles: solid gold everywhere, one soft light band per 30em period —
     wider than the title, so only one band is ever on the letters */
  background-size: 30em 100%;
  background-repeat: repeat-x;
  background-position: calc(var(--shine) - var(--i, 0) * 0.5em) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.35em) scale(1.08);
  transition:
    opacity 0.9s var(--e-out),
    filter 0.9s var(--e-out),
    transform 1.1s var(--e-out);
  transition-delay: calc(var(--i, 0) * 55ms + 100ms);
}
.hero__title.is-revealed .hero__char { opacity: 1; filter: none; transform: none; }
@keyframes hero-shine {
  0% { --shine: 0em; }
  40%, 100% { --shine: -30em; }
}

.hero__rule {
  display: block;
  width: 12rem;
  height: 1px;
  margin-top: calc(var(--sp-1) * -1);
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  transform: scaleX(0);
  transition: transform 1.2s var(--e-out) 0.5s, opacity 0.4s var(--e-out);
}
.hero__rule.is-revealed { transform: scaleX(1); }

.hero__tagline--rotate { font-size: calc(var(--fs-body) * 1.15); }
.hero__words {
  display: inline-grid;
  vertical-align: bottom;
  overflow: hidden;
  text-align: left;
}
.hero__word {
  grid-area: 1 / 1;
  color: var(--c-accent-light);
  font-style: italic;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.7s var(--e-out), opacity 0.5s var(--e-out);
}
.hero__word.is-active { opacity: 1; transform: none; }
.hero__word.is-leaving { opacity: 0; transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .hero__title.is-revealed { animation: none; }
  .hero__char { opacity: 1; filter: none; transform: none; transition: none; }
  .hero__rule { transform: none; }
}
@media (max-width: 667px) {
  .hero__kicker { letter-spacing: 0.14em; gap: 0.8rem; font-size: 1.1rem; white-space: nowrap; }
  .hero__kicker::before, .hero__kicker::after { width: 1.6rem; }
  .hero__tagline--rotate { font-size: var(--fs-body); max-width: 30ch; margin-inline: auto; }
}
.hero__tagline {
  font-size: var(--fs-body);   /* ref: .entrance__text is 13px */
  font-weight: 500;
  color: var(--c-white);
  line-height: 1.5;
}

/* ----------------------------------------------------------------- intro */
.intro { padding: var(--sp-4) 0; }
.intro__head { position: relative; padding-bottom: var(--sp-3); }
.intro__kicker {
  font-size: var(--fs-small);
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
  margin-left: calc(var(--grid-col) * 0.5);
}
.intro__body {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  align-items: start;
}
/* All three children share grid row 1 so the copy and the quote sit OVER
   the picture, as they do on the reference. Without an explicit grid-row
   auto-placement pushes the picture to a second row and the overlap is lost.
   ref geometry inside this block: picture y=180 / copy y=660 / quote y=1053. */
.intro__media {
  grid-column: 3 / span 8;
  grid-row: 1;
  align-self: start;
  position: relative;
  overflow: hidden;
  aspect-ratio: 96 / 132;     /* ref: 960x1320 picture box */
}
.intro__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* The copy and the quote sit OVER this picture, so it needs a scrim — a
   bright client photograph (a white outfit, a pale studio wall) otherwise
   swallows the text completely. Weighted to the left and the bottom, where
   the copy, quote and stats actually land. Tune the alphas, not the type. */
.intro__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0.22) 38%, rgb(0 0 0 / 0.88) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.18) 42%, rgb(0 0 0 / 0.55) 100%);
}
.intro__copy {
  grid-column: 1 / span 4;
  grid-row: 1;
  align-self: start;
  z-index: 2;
  padding-left: calc(var(--grid-col) * 0.5);
  margin-top: 36rem;
}
/* the gold lead line needs air under it — leading-trim on the paragraph
   below removes the space it would otherwise inherit */
.intro__copy .text-small { display: block; margin-bottom: var(--sp-1); }
.intro__quote {
  grid-column: 7 / span 5;
  grid-row: 1;
  align-self: end;
  z-index: 2;
  padding-bottom: var(--sp-3);
}
.intro__quote p {
  font-size: var(--fs-quote);
  line-height: 1.45;
  color: var(--c-white);
  --lh: 1.45;
  --fos: var(--text-fos);
  --foe: var(--text-foe);
}
.intro__quote footer {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-accent);
}
.intro__btn { margin-top: var(--sp-3); }

/* --------------------------------------------------- pinned horizontal slider
   Desktop: the section is N viewports tall, an inner sticky pane holds the
   track, and the track translates on scroll progress (ref: .sticky-slider,
   5580px tall / 6.2 viewports at 1440).
   Phone: NOT pinned. Becomes a native scroll-snap swipe carousel — the page
   never freezes under the thumb. See README.                              */
.hslider { position: relative; }
.hslider__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hslider__track {
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
}
.hslider__panel {
  flex: 0 0 var(--vw100);
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  /* one explicit row filling the pane; both children are placed into it and
     centred individually. Relying on auto-placement here lets the row size
     itself to the media and the copy drifts to the bottom of the viewport. */
  grid-template-rows: 100%;
  position: relative;
}
.hslider__panel-media {
  grid-row: 1;
  grid-column: 7 / span 5;
  align-self: center;
  justify-self: start;
  height: 68svh;
  width: auto;
  aspect-ratio: 96 / 132;
  overflow: hidden;
}
.hslider__panel-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hslider__panel-body {
  grid-row: 1;
  grid-column: 2 / span 4;
  align-self: center;
  z-index: 2;
}
.hslider__index {
  font-size: var(--fs-small);
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.hslider__panel-body p { margin-top: var(--sp-2); }
.hslider__progress {
  position: absolute;
  left: 0; right: 0; bottom: var(--sp-2);
  height: 1px;
  background: var(--c-white-20);
}
.hslider__progress span {
  display: block;
  height: 100%;
  background: var(--c-accent);
  transform-origin: left;
  transform: scaleX(var(--hs-progress, 0));
}

/* -------------------------------------------------------------- services */
.services { padding: var(--sp-4) 0; }
.services__list { border-top: 1px solid var(--c-rule); }
.services__item {
  position: relative;
  border-bottom: 1px solid var(--c-rule);
}
.services__link {
  display: grid;
  /* num | thumb | name | description | arrow */
  grid-template-columns: auto 104px 1fr minmax(0, 30ch) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-1);
  min-height: 64px;
  transition: color var(--d-base) var(--e-out);
}
.services__thumb {
  display: block;
  width: 104px;
  height: 104px;
  overflow: hidden;
}
.services__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.01);
  transition: filter var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.has-hover .services__item:hover .services__thumb img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.06);
}
.services__num { font-size: var(--fs-small); color: var(--c-accent); }
.services__name {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-d4);
  line-height: 1;
  color: var(--c-white);
  --lh: 1;
  --fos: var(--display-fos);
  --foe: var(--display-foe);
  transition: color var(--d-base) var(--e-out), transform var(--d-slow) var(--e-out);
}
/* ref technique: hovering one row dims the others. Gated on real hover
   capability, never on width — touch devices keep every row at full
   strength and the description is shown inline instead.                   */
.has-hover .services__list:hover .services__item:not(:hover) .services__name { color: var(--c-white-40); }
.has-hover .services__item:hover .services__name { color: var(--c-accent); transform: translateX(var(--sp-1)); }
.services__desc {
  font-size: var(--fs-small);
  color: var(--c-white-40);
  max-width: 34ch;
}

/* --------------------------------------------------------------- gallery */
.gallery { padding: var(--sp-4) 0; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  align-items: start;
}
.gallery__card { position: relative; overflow: hidden; will-change: transform; }
.gallery__card img { width: 100%; height: auto; }
.gallery__card:nth-child(1) { grid-column: 2 / span 3; }
.gallery__card:nth-child(2) { grid-column: 6 / span 4; margin-top: var(--sp-4); }
.gallery__card:nth-child(3) { grid-column: 10 / span 2; margin-top: calc(var(--sp-4) * 2); }
.gallery__caption {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-white-40);
}

/* ----------------------------------------------------------- stats counters
   Values roll up from 0 when they enter view (data-counter in app.js).     */
.stats {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-rule);
}
.stats__item { display: grid; gap: 0.4rem; }
.stats__value {
  color: var(--c-accent);
  font-family: var(--font-display);
  font-weight: 200;
  line-height: 1;
  --lh: 1;
  --fos: var(--display-fos);
  --foe: var(--display-foe);
}
.stats__label { color: var(--c-white-40); }

/* ------------------------------------------------------------- credentials
   A heading and copy, a portrait feature, and a horizontal strip of
   certificates. The strip is a native scroll-snap carousel on EVERY
   viewport — certificates are naturally browsed sideways, and it needs no
   pin, no JS and no hover.                                                 */
.creds { padding: var(--sp-4) var(--sp-1); }

/* portrait | heading + copy + certificate index */
.creds__intro {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  align-items: center;
  margin-bottom: var(--sp-4);
}
.creds__feature { grid-column: 1 / span 6; margin: 0; }
.creds__feature-frame {
  overflow: hidden;
  border: 1px solid var(--c-accent-20);
  aspect-ratio: 3 / 4;
}
.creds__feature-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;   /* keep her face and the framed certificate */
  will-change: transform;
}
.creds__feature-cap {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  color: var(--c-white-40);
  letter-spacing: 0.08em;
}
.creds__feature-cap::before {
  content: '';
  width: 3.2rem;
  height: 1px;
  background: var(--c-accent);
}
.creds__head { grid-column: 8 / span 5; }
.creds__head > p { max-width: 46ch; margin-top: var(--sp-2); }

.creds__index { margin-top: var(--sp-3); }
.creds__index-head {
  display: flex;
  justify-content: space-between;
  color: var(--c-accent);
  letter-spacing: 0.08em;
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--c-rule);
}
.creds__list { list-style: none; margin: 0; padding: 0; }
.creds__row {
  display: grid;
  grid-template-columns: 4ch 1fr auto;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  min-height: 52px;
  padding: 1.2rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  color: var(--c-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--d-base) var(--e-out), padding var(--d-base) var(--e-out);
}
.creds__row-n { color: var(--c-accent); font-size: var(--fs-small); }
.creds__row-year { color: var(--c-white-40); font-size: var(--fs-small); }
.has-hover .creds__row:hover,
.creds__row:focus-visible { color: var(--c-accent); padding-left: 0.8rem; }

.creds__strip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  color: var(--c-accent);
  letter-spacing: 0.08em;
}
.creds__strip-hint { color: var(--c-white-40); }

/* continuously drifting strip — the track holds the set twice and wraps at
   the halfway point, so there is no start or end to bump against */
.creds__marquee {
  clear: both;
  overflow: hidden;
  padding-bottom: var(--sp-2);
  cursor: grab;
  /* fade the strip into the page edges rather than cutting it off */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  touch-action: pan-y;
}
.creds__marquee.is-dragging { cursor: grabbing; }
.creds__track {
  display: flex;
  gap: var(--sp-2);
  width: max-content;
  will-change: transform;
}
.creds__card { flex: 0 0 calc(var(--grid-col) * 3); }

.creds__open {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.creds__open img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-accent-20);
  transition: border-color var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out);
}
.has-hover .creds__open:hover img,
.creds__open:focus-visible img { border-color: var(--c-accent); }

/* magnifier badge, revealed on hover / focus */
.creds__zoom {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: var(--c-black);
  background: var(--c-accent);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.creds__zoom svg { width: 18px; height: 18px; }
.has-hover .creds__open:hover .creds__zoom,
.creds__open:focus-visible .creds__zoom { opacity: 1; transform: scale(1); }

.creds__caption {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-white-40);
  display: flex;
  gap: 0.8rem;
}
.creds__n { color: var(--c-accent); flex: none; }

/* reduced motion: no drift, plain scrollable list */
.creds__marquee.is-static { overflow-x: auto; cursor: default; }
.creds__marquee.is-static .creds__track { transform: none !important; }

/* ============================================================ lightbox
   Built in the site's own language: gold hairlines, Big Shoulders numerals,
   the same square outline controls as the rest of the page.            */
.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out);
}
.is-lightbox-open .lb { opacity: 1; }
.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(247 241 236 / 0.94);
  cursor: pointer;
}
.lb__panel {
  position: relative;
  width: min(104rem, 92vw);
  max-height: 92svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  transform: translateY(1.6rem);
  transition: transform var(--d-slow) var(--e-out);
}
.is-lightbox-open .lb__panel { transform: translateY(0); }

.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--c-rule);
}
.lb__index {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--c-accent);
  letter-spacing: var(--ls);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.lb__sep { color: var(--c-white-20); }
.lb__index span:last-child { color: var(--c-white-40); }

.lb__close {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0;
  color: var(--c-white); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--c-white-20);
  transition: color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.lb__close svg { width: 20px; height: 20px; }
.has-hover .lb__close:hover, .lb__close:focus-visible {
  color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent);
}

.lb__stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  min-height: 0;
}
.lb__figure { margin: 0; min-height: 0; display: grid; place-items: center; }
.lb__figure img {
  max-width: 100%;
  max-height: 62svh;
  width: auto;
  height: auto;
  border: 1px solid var(--c-accent-20);
  opacity: 0;
  transform: scale(1.03);
}
.lb__figure img.is-in {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-in-out-long);
}

/* square outline controls, matching .btn--square */
.lb__nav {
  position: relative;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  color: var(--c-white); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--c-white-20);
  transition: color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.lb__nav svg { width: 22px; height: 22px; }
.has-hover .lb__nav:hover, .lb__nav:focus-visible {
  color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent);
}

.lb__caption {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-white);
}
.lb__year { color: var(--c-accent); }
.lb__progress { height: 1px; background: var(--c-white-20); }
.lb__progress span {
  display: block; height: 100%;
  background: var(--c-accent);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--d-slow) var(--e-out);
}

/* ------------------------------------------------------------ testimonials */
.testimonials { padding: var(--sp-4) 0; }
/* the heading needs room to breathe above the quotes — leading-trim removes
   the descender space a title would normally carry */
.testimonials .title-lines { margin-bottom: var(--sp-3); }
.quotes {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  row-gap: var(--sp-4);
  padding-top: var(--sp-1);
}
.quotes__item:nth-child(odd) { grid-column: 2 / span 4; }
.quotes__item:nth-child(even) { grid-column: 7 / span 4; }
.quotes__item blockquote { margin: 0; }
.quotes__item p {
  font-size: var(--fs-quote);
  line-height: 1.45;
  color: var(--c-white);
  --lh: 1.45;
  --fos: var(--text-fos);
  --foe: var(--text-foe);
}
.quotes__item footer {
  margin-top: var(--sp-1);
  font-size: var(--fs-small);
  color: var(--c-accent);
}

/* ------------------------------------------------------ statement section
   ref "PERFECTION": an oversized word sitting BEHIND a centred portrait.  */
.statement {
  position: relative;
  padding: var(--sp-4) 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.statement__word {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: var(--fs-d1);
  line-height: var(--lh-d1);
  color: var(--c-accent);
  letter-spacing: var(--ls);
  white-space: nowrap;
  z-index: 1;
  --lh: var(--lh-d1);
  --fos: var(--display-fos);
  --foe: var(--display-foe);
}
.statement__portrait {
  grid-area: 1 / 1;
  z-index: 2;
  width: calc(var(--grid-col) * 3.5);
  max-width: 46rem;
  overflow: hidden;
}
.statement__portrait img { width: 100%; height: auto; }
.statement__copy {
  grid-area: 1 / 1;
  z-index: 3;
  align-self: end;
  justify-self: start;
  margin-left: var(--grid-col);
  max-width: 32ch;
  font-size: var(--fs-small);
  color: var(--c-white-40);
}

/* ------------------------------------------------------------------ form */
.contact { padding: var(--sp-4) 0; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--sp-2) 0;
}
.contact__head { grid-column: 2 / span 5; }
.contact__cta { margin-top: var(--sp-3); }
.contact__details {
  grid-column: 8 / span 4;
  align-self: end;
  border-top: 1px solid var(--c-rule);
}
.contact__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-1);
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--c-rule);
  min-height: 48px;
}
/* icon | stacked text — gold label on its own line above the value */
.contact__text { display: grid; gap: 0.2rem; min-width: 0; }
.contact__label {
  display: block;
  color: var(--c-accent);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.contact__text .contact__value { justify-self: start; word-break: break-word; }
.contact__value {
  color: var(--c-white);
  position: relative;
  /* inline-flex + min-height so the tappable box clears 44px even though the
     text itself is one short line */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0;
}
.contact__value::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.2rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.has-hover a.contact__value:hover::after { transform: scaleX(1); }

.btn--lg { padding: 2rem 3.2rem; }

/* Booking CTA: same language as the header Book pill — gold fill, shimmer
   sweep, pulsing glow, nudging arrow. Keeps the label roll on hover. */
.btn--cta {
  gap: 1.2rem;
  background: var(--c-accent);
  color: #3B2E29;
  font-weight: 500;
  overflow: hidden;
  isolation: isolate;
  animation: cta-glow 2.8s ease-in-out infinite;
  transition: background-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.btn--cta .btn__outline { display: none; }
.btn--cta::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: skewX(-20deg);
  animation: cta-shine 3.2s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
/* arrow drawn with a mask so it inherits the text colour */
.btn--cta::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cta-nudge 1.6s ease-in-out infinite;
}
.has-hover .btn--cta:hover { background: var(--c-accent-light); transform: translateY(-2px); }
.btn--cta:focus-visible { outline: 1px solid var(--c-white); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .btn--cta, .btn--cta::before, .btn--cta::after { animation: none; }
}

.contact__form { grid-column: 7 / span 4; display: grid; gap: var(--sp-2); }
.field { display: grid; gap: 0.8rem; }
.field label { font-size: var(--fs-small); color: var(--c-accent); }
.field input,
.field textarea {
  /* 16px floor on phones is enforced in tokens.css via --fs-body */
  font-size: max(var(--fs-body), 16px);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-rule);
  padding: 1.2rem 0;
  min-height: 44px;
  color: var(--c-white);
  transition: border-color var(--d-base) var(--e-out);
}
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--c-accent); }
.field textarea { resize: vertical; min-height: 96px; }

/* ---------------------------------------------------------------- footer */
.footer {
  padding: var(--sp-3) var(--sp-1) var(--sp-2);
  border-top: 1px solid var(--c-rule);
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--sp-2) 0;
  align-items: start;
}
/* three columns: mark | nav | visit (address + map) */
.footer__brand {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__mark { height: 12rem; width: auto; }
.footer__col { grid-column: 4 / span 2; }

.footer__visit { grid-column: 7 / span 6; }
.footer__visit h4 { font-size: var(--fs-small); color: var(--c-accent); margin-bottom: var(--sp-1); }
.footer__visit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-bottom: var(--sp-1);
}
.footer__address {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-style: normal;
  color: var(--c-white);
  line-height: 1.5;
}
.footer__directions {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.8rem;
  border: 1px solid var(--c-accent-40);
  color: var(--c-accent);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.has-hover .footer__directions:hover { background: var(--c-accent); color: #3B2E29; }
.footer__map {
  position: relative;
  /* half the height of the original 16:9 frame; a plain height (not
     aspect-ratio + min-height) so it can never push wider than its column */
  width: 100%;
  height: clamp(180px, 14vw, 240px);
  border: 1px solid var(--c-rule);
  overflow: hidden;
  background: #FFFCFA;
}
/* darken the stock Google tiles so the map sits in the black palette */
.footer__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.9);
}

.footer__contact { grid-column: 7 / span 5; }
.footer__details { display: block; }
.footer__row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: var(--sp-1);
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-rule);
}
.footer__row:first-child { border-top: 1px solid var(--c-rule); }
.footer__text { display: grid; gap: 0.2rem; min-width: 0; }
.footer__label { color: var(--c-accent); }
.footer__value {
  color: var(--c-white);
  display: flex;
  align-items: center;
  min-height: 32px;
  word-break: break-word;
}
.has-hover a.footer__value:hover { color: var(--c-accent); }
.footer__col h4 { font-size: var(--fs-small); color: var(--c-accent); margin-bottom: var(--sp-1); }
.footer__col a { display: block; padding: 0.6rem 0; min-height: 44px; display: flex; align-items: center; }
.footer__legal {
  grid-column: 1 / -1;
  margin-top: var(--sp-2);
  padding-top: var(--sp-1);
  border-top: 1px solid var(--c-rule);
  font-size: var(--fs-small);
  color: var(--c-white-40);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ intro loader
   Shown only while html.is-loading (set by the inline gate in index.html).
   Sequence: mark rises out of a mask -> wordmark resolves -> hairline fills
   -> .is-loaded lifts the whole panel up and the hero reveals begin.       */
.loader { display: none; }
.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F1EC;
  transition: background-color 0.9s var(--e-in-out) 0.25s;
}
/* the header's own logo waits underneath until the loader's copy lands on it */
.is-loading .header__brand { opacity: 0; }
.is-loading:not(.is-loaded) body { overflow: hidden; }
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  transition: opacity 0.5s var(--e-out), transform 0.8s var(--e-in-out);
}
.loader__mark { overflow: hidden; padding: 0.4rem 0; }
.loader__mark img {
  display: block;
  height: 11rem;
  width: auto;
  animation: loader-rise 1.1s var(--e-out) 0.1s both;
}
.loader__word {
  height: 3.4rem;
  width: auto;
  animation: loader-fade 0.9s var(--e-out) 0.65s both;
}
.loader__bar {
  width: 14rem;
  height: 1px;
  margin-top: 1rem;
  background: var(--c-white-20);
  overflow: hidden;
  animation: loader-fade 0.6s var(--e-out) 0.8s both;
}
.loader__bar span {
  display: block;
  height: 100%;
  background: var(--c-accent);
  transform-origin: left;
  transform: scaleX(0);
  /* creeps to 85% on its own; .is-loaded completes it */
  animation: loader-fill 1.8s var(--e-out) 0.9s forwards;
}
.is-loaded .loader__bar span { animation: none; transform: scaleX(1); transition: transform 0.3s var(--e-out); }
/* hand-off: ground fades, bar fades, mark + wordmark fly to the header */
.is-loaded .loader { background-color: rgb(247 241 236 / 0); pointer-events: none; }
.is-loaded .loader__bar { animation: none; opacity: 0; transition: opacity 0.3s var(--e-out); }
.is-loaded .loader__mark { overflow: visible; }
.is-loaded .loader__mark img,
.is-loaded .loader__word {
  animation: none;
  transform-origin: 50% 50%;
  transition: transform 1.1s var(--e-in-out), opacity 0.6s var(--e-out);
}
@keyframes loader-rise {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
@keyframes loader-fade {
  from { opacity: 0; transform: translateY(0.8rem); }
  to { opacity: 1; transform: none; }
}
@keyframes loader-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(0.85); }
}
@media (max-width: 667px) {
  .loader__mark img { height: 8.4rem; }
  .loader__word { height: 2.8rem; }
}

/* ------------------------------------------------ mobile sticky Book Now */
.mbook { display: none; }
@media (max-width: 667px) {
  .mbook {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: calc(var(--z-header) + 1);
    display: block;
    /* full width, edge to edge; only the home-indicator inset is padded */
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    background: #F7F1EC;
    border-top: 1px solid var(--c-accent-40);
    transition: transform var(--d-slow) var(--e-out), opacity var(--d-base) var(--e-out);
  }
  /* Book takes half; Call and Text split the rest. Same height, same square
     corners, same hairline language as every other button on the site. */
  .mbook__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 0;
  }
  /* compact: 44px is the touch-target floor, nothing taller */
  .mbook__btn {
    width: 100%;
    min-height: 52px;
    padding: 0 1rem;
    font-size: 1.2rem;
    gap: 0.6rem;
  }
  .mbook__btn::after { width: 14px; height: 14px; }
  .mbook__quick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 52px;
    border: 0;
    border-left: 1px solid var(--c-accent-40);
    background: #F7F1EC;
    color: var(--c-accent);
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
  }
  .mbook__quick svg { width: 16px; height: 16px; }
  .mbook__quick:active { background: var(--c-accent); color: #3B2E29; }
  /* the menu and lightbox carry their own controls — step aside */
  .is-menu-open .mbook,
  .is-lightbox-open .mbook { transform: translateY(110%); opacity: 0; pointer-events: none; }
  /* keep the last of the page (footer legal line) clear of the bar */
  body { padding-bottom: calc(53px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   MOTION — reveal states
   Every reveal is a CSS transition toggled by an IntersectionObserver, which
   is how the reference does it (no animation library anywhere on that site).
   Durations and curves below are the reference's, verbatim.
   ========================================================================== */

/* base — ref: .animation--* { transition-duration: .4s; timing: easeOut } */
[class*='animation--'] {
  transition-duration: var(--d-base);
  transition-timing-function: var(--e-out);
}

/* fade-in — ref: transition-property opacity */
.animation--fade-in { transition-property: opacity; will-change: opacity; }
.animation--fade-in--inactive { opacity: 0; }
.animation--fade-in-slow { transition-duration: var(--d-slow); }

/* title — the circular clip wipe.
   ref: clip-path circle(29.5% at 50% 250%) -> circle(70.7% at 50% 50%)
        transform scale(1.35) translateY(0) -> scale(1) translateY(0)
        1.6s on the house curve. 70.7% ~= sqrt(2)/2, the radius that just
        covers the corners of a square.                                    */
.animation--title {
  clip-path: circle(70.7% at 50% 50%);
  transform: scale(1) translateY(0);
  transition:
    transform var(--d-reveal) var(--e-out),
    clip-path var(--d-reveal) var(--e-out);
  will-change: transform, clip-path;
}
.animation--title--inactive {
  clip-path: circle(29.5% at 50% 250%);
  transform: scale(var(--title-scale)) translateY(var(--title-translate-y));
}

/* text — line-split slide up with the 2 degree tilt.
   ref: .line translateY(230%) rotate(-2deg) -> 0, 2.4s easeInOutLong      */
.animation--text,
.animation--text .line {
  /* house ease-out (fast start) instead of the ref's easeInOutLong, whose
     slow first half read as the text lagging behind the scroll */
  transition: transform var(--d-text) var(--e-out);
}
.animation--text .line-mask {
  display: block;
  overflow: hidden;
}
.animation--text .line {
  display: block;
  transform-origin: left top;
  will-change: transform;
}
.animation--text--inactive .line {
  transform: translateY(var(--text-translate-y)) rotate(var(--text-rotate)) scale(var(--text-scale));
}

/* image-zoom-in — ref: scale(1.2) -> 1, 1.6s cubic-bezier(.7,0,.3,1) */
.animation--image-zoom-in {
  transition-duration: var(--d-reveal);
  transition-timing-function: var(--e-out);
  transition-property: transform;
  will-change: transform;
}
.animation--image-zoom-in--inactive { transform: scale(1.2); }

/* tape — masked slide-up of the inner content, 1.6s house curve, .4s delay */
.animation--tape { overflow: hidden; display: block; }
.animation--tape .btn__content,
.animation--tape .tape__inner {
  display: block;
  transform: translateY(0);
  transition: transform var(--d-reveal) var(--e-out);
  transition-delay: 0.1s;
}
.animation--tape--inactive .btn__content,
.animation--tape--inactive .tape__inner { transform: translateY(200%); }

/* button-in — outline draws, label fades */
.animation--button-in { transition-property: opacity; }
.animation--button-in--inactive { opacity: 0; }
.animation--button-in--inactive .btn__outline rect + rect { stroke-dashoffset: var(--path-length, 1000px); }

/* stagger helper */
[data-reveal-stagger] > * { transition-delay: calc(var(--i, 0) * 60ms); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* -------- tablet ---------------------------------------------------- */
@media (max-width: 979px) {
  /* Tablet: the desktop overlap (copy half on the photo, half on black) turns
     messy at this width. Photo left, copy + quote + stats right, no overlap. */
  .intro__body { align-items: start; column-gap: var(--sp-3); padding: 0 var(--sp-2); }
  .intro__media { grid-column: 1 / span 4; grid-row: 1 / span 2; aspect-ratio: 3 / 4; }
  .intro__media::after { display: none; }   /* no text on the photo, no scrim */
  .intro__copy {
    grid-column: 5 / span 4;
    grid-row: 1;
    margin-top: 0;
    padding-left: 0;
  }
  .intro__quote {
    grid-column: 5 / span 4;
    grid-row: 2;
    align-self: start;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    padding-bottom: 0;
    border-top: 1px solid var(--c-rule);
  }
  .hslider__panel-media { grid-column: 5 / span 4; }
  .hslider__panel-body { grid-column: 1 / span 4; padding-left: var(--sp-2); }
  .gallery__card:nth-child(1) { grid-column: 1 / span 4; }
  .gallery__card:nth-child(2) { grid-column: 5 / span 4; }
  .gallery__card:nth-child(3) { grid-column: 2 / span 4; }
  .services__link { grid-template-columns: auto 96px 1fr auto; }
  .services__desc { display: none; }
  .contact { padding-left: var(--sp-1); padding-right: var(--sp-1); }
  .contact__head { grid-column: 1 / span 8; }
  .contact__form { grid-column: 1 / span 8; }
  .contact__details { grid-column: 1 / span 8; margin-top: var(--sp-3); }
  /* too narrow for side by side: heading + index first, photo full width */
  .creds__intro { display: flex; flex-direction: column; align-items: stretch; }
  .creds__head { order: 1; }
  .creds__feature { order: 2; width: 100%; margin-top: var(--sp-3); }
  .creds__card { flex: 0 0 calc(var(--grid-col) * 4.5); }
  .quotes__item:nth-child(odd) { grid-column: 1 / span 5; }
  .quotes__item:nth-child(even) { grid-column: 4 / span 5; }
  .footer__brand { grid-column: 1 / span 3; }
  .footer__col { grid-column: 4 / span 3; }
  .footer__visit { grid-column: 1 / -1; }
}

/* -------- phone -----------------------------------------------------
   Designed as its own composition, not a reflow. See README.          */
@media (max-width: 667px) {
  .header { padding: 2rem var(--sp-1) 0.8rem; }
  .is-scrolled .header { padding-top: 0.8rem; }
  .header__meta { display: none; }
  .header__nav { display: none; }
  .header__burger { display: flex; grid-column: 3; justify-self: end; }

  .hero { min-height: 100svh; }
  .hero__cta .btn { --btn-size: 6.4rem; }

  /* single readable column everywhere */
  .intro { padding: var(--sp-3) 0; }
  .intro__kicker { margin-left: var(--sp-2); }
  .intro__body { display: block; }
  .intro__media {
    grid-column: auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    margin-bottom: var(--sp-3);
  }
  .intro__copy,
  .intro__quote {
    grid-column: auto;
    padding: 0 var(--sp-2);
    max-width: none;
  }
  /* must clear the desktop rule's 36rem top offset, which exists only to push
     the copy down over the bleeding picture. On a stacked phone layout it is
     360px of dead space. */
  .intro__copy {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: var(--sp-3);
  }
  .intro__copy .text-small { margin-bottom: var(--sp-1); }
  .intro__quote { padding-bottom: 0; margin-top: 0; padding-top: 0; border-top: 0; }
  /* undo the tablet side-by-side rules (they sit in the max-width: 979px block) */
  .intro__body { padding: 0; }
  .intro__btn { --btn-size: auto; width: 100%; }

  /* services: descriptions are always visible on touch — never hover-gated */
  .services { padding: var(--sp-3) 0; }
  /* thumb on the left, number + name + description stacked to its right */
  .services__link {
    grid-template-columns: 76px 1fr;
    grid-template-areas:
      'thumb num'
      'thumb name'
      'thumb desc';
    column-gap: var(--sp-1);
    row-gap: 0.4rem;
    padding: var(--sp-2);
    align-items: start;
    align-content: center;
  }
  .services__thumb { grid-area: thumb; width: 76px; height: 76px; align-self: center; }
  .services__thumb img { filter: none; transform: none; }
  .services__num { grid-area: num; }
  .services__name { grid-area: name; }
  /* display:block is REQUIRED here — the tablet block above hides the
     description, and that rule also matches at phone widths. Descriptions
     must never be hidden on touch; there is no hover to reveal them. */
  .services__desc { grid-area: desc; display: block; max-width: none; }
  .services__arrow { display: none; }

  /* gallery: one column, size variation kept for rhythm */
  .gallery { padding: var(--sp-3) 0; }
  .gallery__grid { display: block; padding: 0 var(--sp-2); }
  .gallery__card { margin: 0 0 var(--sp-3) !important; }
  .gallery__card:nth-child(2) { width: 78%; margin-left: auto !important; }
  .gallery__card:nth-child(3) { width: 62%; }

  /* statement: word above the portrait rather than behind it — at phone
     width the overlap makes both illegible */
  .statement { display: block; padding: var(--sp-3) var(--sp-2); }
  .statement__word {
    display: block;
    font-size: var(--fs-d2);
    white-space: normal;
    text-align: center;
    /* No negative overlap here. At phone width the portrait covers more than
       half the word and both become illegible — the desktop overlap only
       works because the word is far wider than the portrait. */
    margin-bottom: var(--sp-2);
    position: relative;
    z-index: 1;
  }
  .statement__portrait {
    width: 76%;
    max-width: none;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  .statement__copy {
    margin: var(--sp-2) 0 0;
    max-width: none;
    text-align: center;
  }

  /* stats sit side by side but with breathing room */
  .stats { gap: var(--sp-3); margin-top: var(--sp-2); }
  /* bigger counters on phones: two equal columns, large gold numerals */
  .stats__item { flex: 1 1 0; gap: 0.8rem; }
  .stats__value { font-size: 8rem; }
  .stats__label { font-size: 1.6rem; letter-spacing: 0.06em; }

  /* credentials: heading stacks, feature photo becomes a normal block,
     certificate strip stays a swipe carousel (it already was one) */
  .creds { padding: var(--sp-3) var(--sp-2); }
  .creds__intro { display: flex; flex-direction: column; margin-bottom: var(--sp-3); }
  .creds__feature { order: 2; width: 100%; margin-top: var(--sp-3); }
  .creds__head { order: 1; }
  .creds__strip-head { flex-direction: column; gap: 0.4rem; }
  .creds__marquee { margin-inline: calc(var(--sp-2) * -1); }
  .creds__track { gap: var(--sp-1); }
  .creds__card { flex: 0 0 76vw; }
  .creds__zoom { width: 36px; height: 36px; opacity: 1; transform: none; }

  /* lightbox: chevrons move below the image so the picture gets the width */
  .lb__panel { width: 94vw; gap: var(--sp-1); grid-template-rows: auto 1fr auto auto auto; }
  .lb__stage { grid-template-columns: 1fr; }
  .lb__figure img { max-height: 54svh; }
  .lb__nav {
    position: absolute;
    bottom: calc(var(--sp-2) * -1);
    width: 56px; height: 56px;
  }
  .lb__nav--prev { left: 0; }
  .lb__nav--next { right: 0; }
  .lb__caption { justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); text-align: center; }
  .lb__index { font-size: 2.6rem; }

  /* footer: mark centred above the details */
  .footer__brand { align-items: center; text-align: center; margin-bottom: var(--sp-3); }
  .footer__col { text-align: center; }
  .footer__col a { justify-content: center; }
  .footer__visit { margin-top: var(--sp-2); }
  .footer__visit h4 { text-align: center; }
  .footer__visit-row { flex-direction: column; align-items: stretch; }
  .footer__address { justify-content: center; text-align: left; }
  .footer__directions { justify-content: center; }
  .footer__map { height: 180px; }
  .footer__mark { height: 9rem; }
  .footer__contact { grid-column: auto; margin-top: var(--sp-2); }

  .testimonials { padding: var(--sp-3) var(--sp-2); }
  .quotes { display: block; }
  .quotes__item { margin-bottom: var(--sp-3); }
  .quotes__item:nth-child(odd),
  .quotes__item:nth-child(even) { grid-column: auto; }

  .contact { padding: var(--sp-3) var(--sp-2); }
  .contact__grid { display: block; }
  .contact__head { margin-bottom: var(--sp-3); }
  .contact__cta { margin-top: var(--sp-2); }
  .contact__cta .btn { width: 100%; }
  .contact__details { grid-column: auto; margin-top: var(--sp-2); }
  .contact__row { grid-template-columns: 40px 1fr; }
  .contact__form { display: grid; gap: var(--sp-2); }

  .footer { display: block; padding: var(--sp-3) var(--sp-2) var(--sp-2); }
  .footer__brand { margin-bottom: var(--sp-2); }
  .footer__col { margin-bottom: var(--sp-2); }
  .footer__legal { flex-direction: column; align-items: center; text-align: center; gap: 0.8rem; }
}

/* -------- short landscape (phone on its side) ------------------------
   ref gates this with a 13/9 aspect ratio; same idea here. A 100svh hero
   plus a long pin is the worst case on a short viewport.                */
@media (max-height: 500px) and (min-aspect-ratio: 13/9) {
  /* The hero's fixed-percentage bands do not survive a 390px-tall viewport —
     the tagline at 76.6% lands below the fold. Fall back to normal flow. */
  .hero {
    height: auto;
    min-height: 100svh;
    padding: calc(var(--header-h) + var(--sp-2)) 0 var(--sp-3);
    justify-content: center;
  }
  .hero__inner {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
  }
  .hero__row { position: relative; top: auto; left: auto; right: auto; }
  .hero__cta .btn { --btn-size: 5.6rem; }
  .hero__tagline { margin-top: 0; }

  .menu { padding-top: calc(var(--header-h) + var(--sp-1)); overflow-y: auto; }
  .menu__link { font-size: 2.6rem; }
}

/* -------- pinned slider -> carousel -------------------------------------
   Applies to phones AND to short landscape viewports. A 6-viewport pin on a
   390px-tall screen freezes the page for thousands of pixels of scrolling.
   The JS uses the same condition (see isCarousel() in app.js).           */
@media (max-width: 667px), (max-height: 500px) and (min-aspect-ratio: 13/9) {
  .hslider { height: auto !important; }
  .hslider__sticky {
    position: static;
    display: block;
    height: auto;
    overflow: visible;
  }
  .hslider__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;
    gap: var(--sp-2);
    padding: 0 var(--sp-2);
    height: auto;
  }
  .hslider__track::-webkit-scrollbar { display: none; }
  .hslider__panel {
    flex: 0 0 calc(var(--vw100) * 0.82);
    scroll-snap-align: center;
    display: block;
    height: auto;
  }
  .hslider__panel-media {
    grid-column: auto;
    height: auto;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: none;
    margin-bottom: var(--sp-2);
  }
  .hslider__panel-body { grid-column: auto; padding: 0; }
  .hslider__progress { position: static; margin: var(--sp-2) var(--sp-2) 0; }
}

/* ---- swipe cue (carousel only) ---------------------------------------- */
.hslider__hint { display: none; }
@media (max-width: 667px), (max-height: 500px) and (min-aspect-ratio: 13/9) {
  .hslider__sticky { position: relative; }
  .hslider__hint {
    position: absolute;
    right: var(--sp-2);
    /* vertical middle of the 3:4 image: 82vw wide -> 109vw tall -> half */
    top: calc(var(--vw100) * 0.82 * 4 / 3 / 2);
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--c-accent);
    cursor: pointer;
    transition: opacity var(--d-slow) var(--e-out);
    -webkit-tap-highlight-color: transparent;
  }
  .hslider__hint-ring {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border: 1px solid var(--c-accent);
    background: rgb(0 0 0 / 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  /* soft expanding halo */
  .hslider__hint-ring::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 0;
    border: 1px solid var(--c-accent);
    animation: hs-halo 2.2s var(--e-out) infinite;
  }
  .hslider__hint-ring svg {
    width: 22px;
    height: 22px;
    animation: hs-nudge 1.6s ease-in-out infinite;
  }
  .hslider__hint-label {
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    color: var(--c-white);
    text-shadow: 0 1px 6px rgb(0 0 0 / 0.8);
  }
  /* last panel: cue moves to the left edge and the arrow points back */
  .hslider__hint.is-back { right: auto; left: var(--sp-2); }
  .hslider__hint.is-back .hslider__hint-ring svg { scale: -1 1; }
}
@keyframes hs-nudge {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(5px); }
}
@keyframes hs-halo {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hslider__hint-ring::after,
  .hslider__hint-ring svg { animation: none; }
}
@media (max-height: 500px) and (min-aspect-ratio: 13/9) {
  /* landscape: 46vw panels at 16:10 */
  .hslider__hint { top: calc(var(--vw100) * 0.46 * 10 / 16 / 2); }
}

/* landscape phones are wide enough for two panels side by side */
@media (max-height: 500px) and (min-aspect-ratio: 13/9) {
  .hslider__panel { flex: 0 0 calc(var(--vw100) * 0.46); }
  .hslider__panel-media { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   FALLBACKS
   ========================================================================== */

/* <noscript> content: the page is rendered from site.config.js, so with
   scripting off this is all there is. Make it look deliberate. */
.noscript {
  max-width: 62ch;
  margin: 0 auto;
  padding: 12vh var(--sp-2) var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  font-size: max(var(--fs-body), 16px);
}
.noscript a { color: var(--c-accent); text-decoration: underline; }

/* If the JS never runs, nothing may stay invisible. */
.no-js [class*='--inactive'],
.no-js .animation--title--inactive,
.no-js .animation--text--inactive .line {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}
.no-js .hslider { height: auto !important; }
.no-js .hslider__sticky { position: static; height: auto; }
.no-js .hslider__track { flex-wrap: wrap; transform: none !important; }
.no-js .hslider__panel { flex: 0 0 100%; }

/* Reduced motion: no smooth scroll, no reveals, no parallax, no pin.
   Scrubbed values jump to their final state. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [class*='--inactive'] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .animation--text--inactive .line { transform: none !important; }
  .hero__media,
  .intro__media img,
  .gallery__card,
  .hslider__panel-media img { transform: none !important; }
  .hslider { height: auto !important; }
  .hslider__sticky { position: static; height: auto; overflow: visible; }
  .hslider__track { flex-wrap: wrap; transform: none !important; }
  .hslider__panel { flex: 0 0 100%; }
}

/* ------------------------------------------------- Ellys header overrides
   Client request: logo on the left, a little smaller, no "Katy, TX" text.
   The mark and wordmark sit side by side; the wordmark still folds away on
   scroll, leaving just the mark. */
.header__meta { display: none; }
.header__brand {
  grid-column: 1;
  justify-self: start;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
}
.header__mark { height: 4.2rem; }
.header__wordmark { height: 1.9rem; }
.is-scrolled .header__mark { height: 3rem; }
.is-scrolled .header__wordmark { height: 0; margin-top: 0; }
@media (max-width: 667px) {
  .header__mark { height: 3.6rem; }
  .header__wordmark { height: 1.6rem; }
}

/* ------------------------------------------------- Ellys refinements
   Client requests, Oct 2026. Kept together here so the template above stays
   untouched. */

/* service list photos in full colour (were black and white until hover) */
.services__thumb img,
.has-hover .services__item:hover .services__thumb img { filter: none; }

/* Real clients strip: photos must not start the browser's own image drag */
.creds__marquee { -webkit-user-select: none; user-select: none; }
.creds__marquee img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* ---- footer: brand | Brows | Lips & more | Brow care | Studio, then visit */
html .footer {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 56px clamp(24px, 3vw, 48px);
  padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 80px) 28px;
  text-align: left;
}
html .footer__brand { grid-column: auto; align-items: flex-start; text-align: left; margin: 0; gap: 22px; }
html .footer__mark { height: 8.6rem; }
.footer__blurb {
  margin: 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--c-white-40);
  color: rgb(59 46 41 / 0.66);
}
.footer__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.footer__book {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; white-space: nowrap;
  transition: background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.has-hover .footer__book:hover { background: var(--c-accent); color: #3B2E29; }
.footer__tel { font-size: 13px; letter-spacing: 0.14em; color: var(--c-white); white-space: nowrap; }
.has-hover .footer__tel:hover { color: var(--c-accent); }

html .footer__col { grid-column: auto; margin: 0; text-align: left; }
html .footer__col h4 {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--c-accent);
}
html .footer__col a {
  display: flex;
  justify-content: flex-start;
  min-height: 0;
  padding: 6px 0;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.1em;
  color: rgb(59 46 41 / 0.72);
  transition: color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.has-hover html .footer__col a:hover,
html.has-hover .footer__col a:hover { color: var(--c-accent); transform: translateX(4px); }

/* visit: address + directions on the left, wide map on the right */
html .footer__visit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 4fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding-top: 40px;
  border-top: 1px solid var(--c-rule);
}
html .footer__visit h4 { grid-column: 1; margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-align: left; }
html .footer__visit-row { grid-column: 1; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 18px; padding: 0; }
html .footer__address { justify-content: flex-start; font-size: 14px; }
html .footer__map { grid-column: 2; grid-row: 1 / span 2; height: 220px; }
html .footer__legal { grid-column: 1 / -1; margin-top: 0; flex-direction: row; justify-content: space-between; text-align: left; }

@media (max-width: 1100px) {
  html .footer { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html .footer__brand { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px; }
  html .footer__mark { height: 7rem; }
}
@media (max-width: 767px) {
  html .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 56px 20px 28px; }
  html .footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  .footer__blurb { margin: 0 auto; }
  .footer__quick { justify-content: center; }
  html .footer__col a { min-height: 40px; align-items: center; padding: 4px 0; }
  html .footer__visit { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 18px; }
  html .footer__map { grid-column: 1; grid-row: auto; height: 200px; }
  html .footer__legal { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
}

/* ---- pop-out menu: fits one screen, no scrolling --------------------------
   Phones: main links, then the booking buttons and contact.
   Tablet and desktop: main links | services (three groups) | book + contact. */
.menu__services { display: none; }
.menu__group-title {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--c-accent);
}
.menu__sub {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgb(59 46 41 / 0.76);
  transition: color var(--d-base) var(--e-out);
}
.has-hover .menu__sub:hover { color: var(--c-accent); }
.has-hover .menu__link { transition: color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out); }
.has-hover .menu__link:hover { color: var(--c-white); transform: translateX(8px); }

/* phones: no scrolling - links tighten with the screen height and only the
   call and visit rows stay (email and socials are in the footer) */
@media (max-width: 767px) {
  .menu { gap: clamp(10px, 2.2vh, 24px); }
  .menu__nav { padding-top: 0; }
  .menu__link { font-size: clamp(26px, 5.4vh, 44px); line-height: 1.05; padding: clamp(2px, 0.6vh, 8px) 0; min-height: 0; }
  .menu__details .menu__row:nth-child(n+3) { display: none; }
  .menu__row { padding: 4px 0; }
  .menu__heading { padding-bottom: 8px; }
}

@media (min-width: 768px) {
  .menu {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "top top top"
      "nav services contact"
      "nav services actions";
    column-gap: clamp(32px, 4.5vw, 90px);
    row-gap: 0;
    align-content: start;
    padding: 0 clamp(24px, 4vw, 64px) 32px;
    overflow-y: auto;
  }
  .menu__top { grid-area: top; margin: 0 calc(clamp(24px, 4vw, 64px) * -1) clamp(28px, 6vh, 64px); padding: 0 clamp(24px, 4vw, 64px); }
  .menu__nav { grid-area: nav; padding: 0; }
  .menu__link { font-size: clamp(36px, 6.4vh, 76px); line-height: 1.05; padding: clamp(4px, 0.8vh, 10px) 0; min-height: 0; }
  .menu__services {
    grid-area: services;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px clamp(20px, 2.4vw, 40px);
    align-content: start;
    padding-top: 10px;
  }
  .menu__contact { grid-area: contact; padding-top: 10px; }
  .menu__actions { grid-area: actions; align-self: start; padding-top: 22px; }
  .menu__heading { font-size: 11px; letter-spacing: 0.26em; padding-bottom: 12px; }
  .menu__row { padding: 6px 0; }
  .menu__value { min-height: 34px; font-size: 13px; }
  .menu__row:has(a.menu__value) { min-height: 0; }
  .menu__row .ico { width: 32px; height: 32px; }
  .menu__row { grid-template-columns: 32px 1fr; }
}

/* tablets: links + contact side by side, services in a row underneath */
@media (min-width: 768px) and (max-width: 1100px) {
  .menu {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "top top"
      "nav contact"
      "nav actions"
      "services services";
  }
  .menu__services { padding-top: clamp(24px, 4vh, 48px); }
  .menu__details .menu__row:nth-child(n+4) { display: none; }
}

/* ---- header Services drop-down (desktop) -------------------------------- */
.header__link--drop { gap: 6px; }
.header__link--drop svg { width: 13px; height: 13px; transition: transform var(--d-base) var(--e-out); }
.header__drop:hover .header__link--drop svg,
.header__drop:focus-within .header__link--drop svg { transform: rotate(180deg); }
.header__panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding: 0 clamp(20px, 4vw, 64px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--e-out), transform .25s var(--e-out), visibility 0s linear .3s;
  pointer-events: none;
}
/* invisible bridge so the pointer can travel from the link to the panel */
.header__panel::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; }
.header__drop:hover .header__panel,
.header__drop:focus-within .header__panel {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .25s var(--e-out), transform .25s var(--e-out), visibility 0s;
}
.header__panel-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: clamp(24px, 3vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px clamp(24px, 3vw, 48px);
  background: rgb(247 241 236 / 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--c-rule);
  border-top: 1px solid var(--c-accent-40);
  box-shadow: 0 30px 60px rgb(59 46 41 / 0.165);
}
.header__group-title {
  margin: 0 0 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--c-rule);
  font-size: 11px; font-weight: 500; letter-spacing: 0.26em; color: var(--c-accent);
}
.header__group a {
  display: block; padding: 6px 0;
  font-size: 12.5px; letter-spacing: 0.1em; color: rgb(59 46 41 / 0.78);
  transition: color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.header__group a:hover, .header__group a:focus-visible { color: var(--c-accent); transform: translateX(4px); }
.header__promo {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px;
  border: 1px solid var(--c-accent-40);
  background: radial-gradient(120% 120% at 100% 0%, rgb(140 95 84 / 0.16), transparent 60%);
}
.header__promo p { margin: 0; }
.header__promo-k { font-size: 10px; letter-spacing: 0.26em; color: rgb(59 46 41 / 0.66); }
.header__promo-t { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1; letter-spacing: 0.04em; color: var(--c-accent); }
.header__promo-d { font-size: 14px; line-height: 1.55; letter-spacing: 0.01em; text-transform: none; color: rgb(59 46 41 / 0.7); }
.header__promo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; margin-top: 6px; padding: 0 18px;
  background: var(--c-accent); color: #3B2E29;
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; white-space: nowrap;
}
.header__promo-btn:hover { background: var(--c-accent-light); }
.header__promo-all { font-size: 11px; letter-spacing: 0.2em; color: rgb(59 46 41 / 0.8); text-decoration: underline; text-underline-offset: 4px; }
.header__promo-all:hover { color: var(--c-accent); }
@media (max-width: 1180px) {
  .header__panel-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .header__promo { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
  .header__promo-d { display: none; }
  .header__promo-btn { margin-top: 0; }
}

/* ---- phone menu: Services swaps in the service list --------------------- */
.menu__back { display: none; }
@media (max-width: 767px) {
  .is-menu-svc .menu__nav,
  .is-menu-svc .menu__contact,
  .is-menu-svc .menu__actions { display: none; }
  .is-menu-svc .menu__services { display: block; columns: 2; column-gap: 20px; animation: menu-svc-in .35s var(--e-out) both; }
  .menu__group { break-inside: avoid; margin-bottom: 18px; }
  .menu__group-title { padding-bottom: 8px; margin-bottom: 6px; }
  .menu__sub { padding: 6px 0; font-size: 12.5px; }
  .menu__back {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; margin-bottom: 14px; padding: 0 16px;
    background: none; border: 1px solid var(--c-rule); color: var(--c-white);
    font: inherit; font-size: 11px; letter-spacing: 0.22em; cursor: pointer;
    column-span: all;
  }
}
@keyframes menu-svc-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.menu__link[data-menu-services]::after { content: none; }
@media (max-width: 767px) {
  .menu__link[data-menu-services]::after { content: ' →'; font-size: 0.6em; vertical-align: middle; }
}

/* menu: tighter on short screens so it still fits without scrolling */
@media (max-width: 767px) {
  .menu__link { font-size: clamp(26px, 4.8vh, 44px); }
}
@media (max-width: 767px) and (max-height: 720px) {
  .menu__heading { display: none; }
  .menu__link { padding: 1px 0; }
  .menu__actions { padding-top: 0; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .menu__services { padding-top: clamp(14px, 2.4vh, 40px); gap: 20px clamp(20px, 2.4vw, 40px); }
  .menu__sub { padding: 4px 0; }
  .menu__top { margin-bottom: clamp(20px, 4vh, 64px); }
}

/* phone menu: logo bar sits at the very top (no leftover header padding) and
   the services view is a tidy two-column grid under a full-width Back row */
@media (max-width: 767px) {
  .menu { padding-top: 0; }
  .is-menu-svc .menu__services {
    display: grid;
    columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "back back" "g1 g2" "g3 g2";
    gap: 0 20px;
    align-content: start;
  }
  .menu__back { grid-area: back; justify-self: start; margin-bottom: 18px; }
  .menu__group { margin-bottom: 18px; }
  .menu__group:nth-of-type(1) { grid-area: g1; }
  .menu__group:nth-of-type(2) { grid-area: g2; }
  .menu__group:nth-of-type(3) { grid-area: g3; }
  .menu__sub { letter-spacing: 0.06em; }
}
@media (max-width: 767px) and (max-height: 720px) {
  .menu__sub { padding: 3px 0; }
  .menu__group { margin-bottom: 12px; }
  .menu__back { margin-bottom: 12px; }
}

/* contact heading: room for "Book an / appointment" at every width */
@media (min-width: 1025px) {
  .contact__head { grid-column: 2 / span 6; }
  .contact__head .title-lines { font-size: min(var(--fs-d3), calc(var(--grid-col) * 1.05)); }
}

/* Real clients strip: one height for every photo, width follows the photo's
   own shape (nothing cropped), captions all on one line underneath */
.creds__card { flex: 0 0 auto; display: flex; flex-direction: column; }
.creds__open { width: auto; }
.creds__open img { width: auto; height: clamp(260px, 26vw, 420px); max-width: none; }
.creds__caption { width: 0; min-width: 100%; }
@media (max-width: 1024px) { .creds__card { flex: 0 0 auto; } .creds__open img { height: clamp(240px, 36vw, 360px); } }
@media (max-width: 667px) { .creds__card { flex: 0 0 auto; } .creds__open img { height: 300px; } }

/* ---- menu: Book / Call / Text always on screen ----------------------------
   The buttons sit straight under the links (phones) or at the top of the
   right-hand column (tablet, desktop); contact rows come after them and are
   trimmed on short screens. */
@media (max-width: 767px) {
  .menu__nav { order: 1; }
  .menu__actions { order: 2; padding-top: 0; }
  .menu__contact { order: 3; }
  .menu__services { order: 4; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .menu__contact { display: none; }
}
@media (min-width: 768px) {
  .menu { grid-template-areas: "top top top" "nav services actions" "nav services contact"; }
  .menu__actions { padding-top: 10px; }
  .menu__contact { padding-top: 26px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .menu { grid-template-areas: "top top" "nav actions" "nav contact" "services services"; }
}
@media (min-width: 768px) and (max-height: 780px) {
  .menu__details .menu__row:nth-child(n+4) { display: none; }
}
@media (min-width: 768px) and (max-height: 640px) {
  .menu__details .menu__row:nth-child(n+3) { display: none; }
  .menu__top { margin-bottom: 18px; }
}

/* menu: Instagram / TikTok icons under the buttons */
.menu__social { display: flex; gap: 10px; padding-top: 4px; }
.menu__social-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 16px 0 4px;
  border: 1px solid var(--c-rule);
  font-size: 11px; letter-spacing: 0.2em; color: var(--c-white);
  transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.menu__social-link .ico { width: 34px; height: 34px; box-shadow: none; }
.has-hover .menu__social-link:hover { border-color: var(--c-accent); color: var(--c-accent); }
@media (max-width: 767px) {
  .menu__social { justify-content: space-between; }
  .menu__social-link { flex: 1 1 0; justify-content: center; }
}

/* tablets on short screens: links + buttons on the left, services on the
   right, contact rows left out (they are in the footer) */
@media (min-width: 768px) and (max-width: 1100px) and (max-height: 820px) {
  .menu {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas: "top top" "nav services" "actions services";
  }
  .menu__contact { display: none; }
  .menu__services { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 4px; gap: 18px 24px; }
  .menu__actions { padding-top: 16px; }
}

/* header phone + Book beside the burger (tablet and desktop, burger mode) */
.header__quick { display: none; }
@media (min-width: 668px) {
  .header--compact .header__quick { display: flex; }
  .header__quick {
    grid-column: 3; grid-row: 1; justify-self: end;
    align-items: center; gap: 22px;
    margin-right: 66px;          /* room for the burger */
  }
  .header--compact .header__burger { grid-row: 1; }
}
.header__tel { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.14em; color: var(--c-white); white-space: nowrap; }
.header__tel svg { width: 17px; height: 17px; color: var(--c-accent); }
.has-hover .header__tel:hover { color: var(--c-accent); }
.header__qbook {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 0 18px;
  background: var(--c-accent); color: #3B2E29;
  font-size: 11px; font-weight: 500; letter-spacing: 0.18em; white-space: nowrap;
  animation: cta-glow 2.8s ease-in-out infinite;
  transition: background-color var(--d-base) var(--e-out);
}
.has-hover .header__qbook:hover { background: var(--c-accent-light); }
@media (prefers-reduced-motion: reduce) { .header__qbook { animation: none; } }

/* logo left, nav takes the rest of the row (pairs with fitHeaderNav) */
.header { grid-template-columns: auto minmax(0, 1fr) auto; }
.header__tel--nav { margin-left: 4px; }

/* scrolled header: solid frosted bar so links, phone and Book stay readable
   over photos */
.is-scrolled .header {
  background: rgb(247 241 236 / 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--c-rule);
  padding-bottom: 1.2rem;
}

/* drop-down: closes after a click (app.js initDrop), fully opaque panel */
.header__drop.is-closed .header__panel { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.header__drop.is-closed .header__link--drop svg { transform: none; }
.header__panel-inner { background: #FFFCFA; }
/* hover bridge lives on the link (below it), never over it */
.header__panel::before { content: none; }
.header__link--drop::before { content: ''; position: absolute; left: -12px; right: -12px; top: 100%; height: 40px; }