/* =========================================================================
   MANE ALCHEMIST SALON — Design System  v2 "Speakeasy"
   Palette from "Mane Alchemist Branding Kit"
   Rooms, not one dark hallway: each section carries its own velvet ground.
   Build: Cydnie Brown LLC
   ========================================================================= */

/* The display face is served by Adobe Fonts (Typekit project jmh2wyp), linked
   from head.html. It was self-hosted from an OTF off a piracy site; that file
   is gone. Do not reintroduce a local @font-face for it — an Adobe web project
   licenses delivery through their CDN, not extraction and self-hosting. */

:root {
  /* --- Brand palette (from the kit) ------------------------------------ */
  --onyx:          #1C1B1A;   /* Onyx Veil          */
  --emerald:       #1D5228;   /* Emerald Elixir     */
  --amber:         #9B4E19;   /* Smoked Amber       */
  --gold:          #917C5A;   /* Alchemist Gold     */
  --smoke:         #A59B91;   /* Velvet Smoke       */
  --sapphire:      #1E2842;   /* Midnight Sapphire  */
  --foundation:    #F0EBE1;   /* Foundation         */

  /* --- Derived grounds -------------------------------------------------- */
  --onyx-deep:     #100F0E;
  --onyx-lift:     #262322;
  --velvet:        #123320;   /* emerald, deepened to velvet */
  --velvet-lift:   #17421F;
  --midnight:      #151D33;   /* sapphire, deepened          */
  --midnight-lift: #1E2A47;
  --cellar:        #2A1710;   /* amber, deepened to cellar   */

  /* --- Vibrant accents (brand hues, lifted for hover) ------------------- */
  --amber-vivid:   #C4691F;
  --ember:         #E88A2E;
  --emerald-vivid: #2F9150;
  --jade:          #46B871;
  --brass:         #C7B08A;
  --brass-hi:      #EBD6A8;

  /* --- Rhythm ----------------------------------------------------------- */
  --pad:      clamp(1.25rem, 4.6vw, 4.75rem);
  --section:  clamp(5.5rem, 13vh, 11rem);
  --maxw:     88rem;

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.76, 0, 0.24, 1);

  /* --- Type ------------------------------------------------------------- */
  --f-display: 'acme-gothic-compressed', 'Archivo Narrow', 'Oswald', sans-serif;
  --f-serif:   'Cormorant Garamond', 'Newsreader', Georgia, serif;
  --f-body:    'Lora', Georgia, serif;
  --f-mono:    'Archivo Narrow', 'Helvetica Neue', sans-serif;
}

/* =========================================================================
   ROOM THEMES
   Every surface token is redefined per room, so components never hardcode a
   colour and a cream room is as legible as a velvet one.
   ========================================================================= */
.t-onyx, :root {
  --bg:          #1C1B1A;
  --bg-lift:     #262322;
  --ink:         #F0EBE1;
  --ink-dim:     rgba(240, 235, 225, 0.66);
  --ink-faint:   rgba(240, 235, 225, 0.68);
  --ink-ghost:   rgba(240, 235, 225, 0.15);
  --rule:        rgba(199, 176, 138, 0.2);
  --rule-strong: rgba(199, 176, 138, 0.4);
  --accent:      #C7B08A;   /* gold at rest   */
  --accent-hi:   #E88A2E;   /* amber on hover */
  --eyebrow:     #C7B08A;
  --glow: radial-gradient(70% 55% at 16% 10%, rgba(199,176,138,0.16), transparent 68%),
          radial-gradient(62% 52% at 88% 84%, rgba(29,82,40,0.11), transparent 70%);
}

/* Deepest black — the close of a page, the quiet between rooms */
.t-noir {
  --bg:          #100F0E;
  --bg-lift:     #1C1B1A;
  --ink:         #F0EBE1;
  --ink-dim:     rgba(240, 235, 225, 0.64);
  --ink-faint:   rgba(240, 235, 225, 0.68);
  --ink-ghost:   rgba(240, 235, 225, 0.14);
  --rule:        rgba(199, 176, 138, 0.18);
  --rule-strong: rgba(199, 176, 138, 0.36);
  --accent:      #C7B08A;
  --accent-hi:   #E88A2E;
  --eyebrow:     #C7B08A;
  --glow: radial-gradient(64% 50% at 50% 0%, rgba(199,176,138,0.15), transparent 70%),
          radial-gradient(58% 48% at 10% 92%, rgba(29,82,40,0.1), transparent 72%);
}

/* Velvet booth — Emerald Elixir, the signature room */
.t-velvet {
  --bg:          #123320;
  --bg-lift:     #17421F;
  --ink:         #F2EFE6;
  --ink-dim:     rgba(242, 239, 230, 0.74);
  --ink-faint:   rgba(242, 239, 230, 0.6);
  --ink-ghost:   rgba(242, 239, 230, 0.16);
  --rule:        rgba(199, 176, 138, 0.26);
  --rule-strong: rgba(199, 176, 138, 0.46);
  --accent:      #C7B08A;
  --accent-hi:   #E88A2E;
  --eyebrow:     #EBD6A8;
  --glow: radial-gradient(72% 58% at 14% 8%, rgba(235,214,168,0.14), transparent 66%),
          radial-gradient(64% 52% at 90% 88%, rgba(70,184,113,0.14), transparent 70%);
}

/* Leaf — the hosta from the original Squarespace hero, kept at its own
   darkness. An earlier pass pushed saturation 2.4x to make it "vibrant"; that
   read bright and broke the moody register, so it is back to a deep ground.
   It appears once per page at most, never as a repeating band. */
.t-leaf {
  --bg:          #0E1407;
  --bg-lift:     #16200C;
  --ink:         #F4F1E6;
  --ink-dim:     rgba(244, 241, 230, 0.94);
  --ink-faint:   rgba(244, 241, 230, 0.88);
  --ink-ghost:   rgba(244, 241, 230, 0.2);
  --rule:        rgba(235, 214, 168, 0.28);
  --rule-strong: rgba(235, 214, 168, 0.5);
  --accent:      #EBD6A8;
  --accent-hi:   #FFF0CB;
  --eyebrow:     #FFF0CB;
  --texture:       url('../img/room-leaf.jpg');
  --texture-blend: normal;
  /* the photograph is the visual; a green wash on top of it just muddied
     the leaf and read as a stray overlay */
  --glow: none;
}

/* Linen — Foundation, one step deeper. Lets the light rooms run longer
   without going flat, and keeps the palette on cream/gold/black. */
.t-linen {
  --bg:          #E7E0D3;
  --bg-lift:     #DCD3C2;
  --ink:         #1C1B1A;
  --ink-dim:     rgba(28, 27, 26, 0.78);
  --ink-faint:   rgba(28, 27, 26, 0.8);
  --ink-ghost:   rgba(28, 27, 26, 0.18);
  --rule:        rgba(124, 90, 46, 0.28);
  --rule-strong: rgba(124, 90, 46, 0.5);
  --accent:      #7C5A2E;
  --accent-hi:   #1D5228;
  --eyebrow:     #6E4F27;
  --texture:       url('../img/texture-linen.jpg');
  --texture-blend: multiply;
  --glow: radial-gradient(72% 56% at 12% 4%, rgba(145,124,90,0.2), transparent 66%),
          radial-gradient(60% 50% at 92% 96%, rgba(29,82,40,0.09), transparent 70%);
}

/* Foundation — the lit room. Cream ground, onyx ink, gold rules. */
.t-cream {
  --bg:          #F0EBE1;
  --bg-lift:     #E7E0D2;
  --ink:         #1C1B1A;
  --ink-dim:     rgba(28, 27, 26, 0.76);
  --ink-faint:   rgba(28, 27, 26, 0.74);
  --ink-ghost:   rgba(28, 27, 26, 0.16);
  --rule:        rgba(124, 90, 46, 0.24);
  --rule-strong: rgba(124, 90, 46, 0.46);
  --accent:      #7C5A2E;   /* gold, deepened to hold on cream */
  --accent-hi:   #1D5228;   /* emerald on hover */
  --eyebrow:     #7C5A2E;
  --texture:       url('../img/texture-linen.jpg');
  --texture-blend: multiply;
  --glow: radial-gradient(70% 55% at 88% 6%, rgba(145,124,90,0.16), transparent 66%),
          radial-gradient(60% 50% at 6% 94%, rgba(29,82,40,0.1), transparent 70%);
}

/* =========================================================================
   RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  max-width: 100vw;
  background: var(--onyx);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: clamp(0.92rem, 0.88rem + 0.16vw, 1.02rem);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--foundation); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [data-acc-head]:focus-visible {
  outline: 2px solid var(--accent-hi); outline-offset: 3px;
}

/* =========================================================================
   TYPE  — scaled for reading on a screen, not for a billboard
   ========================================================================= */
.display {
  font-family: var(--f-display); font-weight: 400;
  line-height: 0.92; letter-spacing: 0.022em; text-transform: uppercase;
  text-wrap: balance;
}
.d-hero { font-size: clamp(2.6rem, 6.2vw, 6rem); }
.d-1    { font-size: clamp(2.1rem, 4.4vw, 4rem); }
.d-2    { font-size: clamp(1.7rem, 3.2vw, 3rem); }
.d-3    { font-size: clamp(1.3rem, 2.1vw, 1.85rem); }

.serif { font-family: var(--f-serif); font-weight: 300; line-height: 1.16; letter-spacing: -0.018em; text-wrap: balance; }
.s-1 { font-size: clamp(1.55rem, 3vw, 2.7rem); }
.s-2 { font-size: clamp(1.3rem, 2.3vw, 1.95rem); }
.s-3 { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.italic { font-style: italic; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.95em;
  font-family: var(--f-mono); font-size: clamp(0.7rem, 0.5vw + 0.55rem, 0.76rem);
  font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--eyebrow); line-height: 1.4;
}
.eyebrow::before {
  content: ''; flex: 0 0 auto; width: 2.4em; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.center .eyebrow, .cta-band .eyebrow, .quote .eyebrow { justify-content: center; }
.cta-band .eyebrow::after, .quote .eyebrow::after {
  content: ''; flex: 0 0 auto; width: 2.4em; height: 1px;
  background: linear-gradient(270deg, transparent, currentColor);
}
.eyebrow--dim { color: var(--ink-faint); }

.lede { font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: 1.76; color: var(--ink-dim); max-width: 56ch; }
.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.amber { color: var(--accent); }
.gold  { color: var(--eyebrow); }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.shell--wide { max-width: 122rem; }
.grid { display: grid; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-12 { grid-template-columns: repeat(12, 1fr); }
.rule { height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--rule-strong), var(--rule) 55%, transparent); }
.center { text-align: center; }

@media (max-width: 1080px) { .g-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .g-12 { grid-template-columns: 1fr; }
}

/* Every section paints its own room + a drifting pool of light */
.section {
  position: relative; isolation: isolate;
  padding-block: var(--section);
  color: var(--ink);
  /* The leaf from the original site and a linen weave, carried as real
     texture rather than drawn lines. Each room sets its own. */
  background-color: var(--bg);
  background-image: var(--texture, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: var(--texture-blend, normal);
}
.section::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--glow); pointer-events: none;
  animation: pool 42s var(--ease-io) infinite alternate;
}
@keyframes pool {
  0%   { opacity: 0.75; transform: scale(1)    translate3d(0, 0, 0); }
  100% { opacity: 1;    transform: scale(1.16) translate3d(1.5%, -2%, 0); }
}

/* Rooms hand off through a graded edge rather than a hard cut: a soft shadow
   cast by the room above, closed with a brass hairline. This is what makes the
   sequence read as layered planes instead of stacked blocks. */
.section + .section { border-top: 0; }
.section + .section::after {
  content: ''; position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: clamp(64px, 9vh, 140px); pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, 0.5), rgba(10, 9, 8, 0)),
    linear-gradient(90deg, transparent, var(--rule-strong) 22%, var(--rule-strong) 78%, transparent) top left / 100% 1px no-repeat;
}
/* the light rooms take the shadow as a warm one, so it reads as paper depth */
.t-cream + .t-cream::after, .t-linen::after, .t-cream::after {
  background:
    linear-gradient(180deg, rgba(124, 90, 46, 0.16), rgba(124, 90, 46, 0)),
    linear-gradient(90deg, transparent, var(--rule-strong) 22%, var(--rule-strong) 78%, transparent) top left / 100% 1px no-repeat;
}

/* =========================================================================
   ATMOSPHERE
   ========================================================================= */
#grain {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none; opacity: 0.055; mix-blend-mode: overlay;
}
.smoke, .vignette { display: none; }   /* superseded by per-room glow */

/* =========================================================================
   PRELOADER + CURTAIN
   ========================================================================= */
.loader { position: fixed; inset: 0; z-index: 9900; background: var(--onyx-deep); display: grid; place-items: center; }
.loader__inner { text-align: center; }
.loader__mark { width: 54px; height: auto; margin-inline: auto; opacity: 0; }
.loader__word {
  margin-top: 1.2rem; font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--brass); opacity: 0;
}
.loader__bar { margin: 1.4rem auto 0; width: min(190px, 44vw); height: 1px; background: rgba(240,235,225,0.14); position: relative; overflow: hidden; }
.loader__bar span { position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: 0 50%; }

.curtain { position: fixed; inset: 0; z-index: 9800; pointer-events: none; display: grid; grid-template-columns: repeat(5, 1fr); }
.curtain span { background: var(--onyx-deep); transform: scaleY(0); transform-origin: 50% 100%; }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 7000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; padding: clamp(0.85rem, 1.8vw, 1.5rem) var(--pad);
  transition: transform .7s var(--ease-out), background-color .6s var(--ease-out),
              padding .6s var(--ease-out), backdrop-filter .6s var(--ease-out);
}
.nav.is-stuck {
  background: rgba(16, 15, 14, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  padding-block: clamp(0.6rem, 1.1vw, 0.9rem);
  border-bottom: 1px solid rgba(199, 176, 138, 0.2);
}
.nav.is-hidden { transform: translateY(-102%); }

.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand__word { display: block; padding-top: 2px; }
/* The lockup is two colours: the script is cream, the frame and SALON are
   Alchemist Gold. `brightness(0) invert(1)` flattened both to one white,
   which threw away the separation between the frame and the script and read
   as a smudge at nav size. The artwork carries its own colour now; the only
   filter left is a shadow, because the bar sits over photography. */
.brand__word img {
  height: clamp(74px, 7.6vw, 112px); width: auto; max-width: none;
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.6));
  opacity: 0.98;
  transition: opacity .4s ease, filter .5s ease, transform .6s var(--ease-out);
}
.brand:hover .brand__word img {
  opacity: 1; transform: translateY(-1px);
  filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.6)) brightness(1.12);
}
@media (max-width: 520px) { .brand__word img { height: 62px; } }
/* it only needs that scale over the hero; once the bar is stuck it steps back */
.nav.is-stuck .brand__word img { height: clamp(48px, 4.2vw, 64px); }

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__link {
  font-family: var(--f-mono); font-size: 0.63rem; letter-spacing: 0.22em;
  text-transform: uppercase; position: relative; padding-block: 4px;
  color: rgba(240, 235, 225, 0.64); transition: color .35s ease;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--ember), var(--brass-hi));
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease-out);
}
.nav__link:hover, .nav__link.is-active { color: var(--brass-hi); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: 0 50%; }

.nav__cta {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(199, 176, 138, 0.42);
  padding: 0.6rem 1.35rem; color: var(--foundation);
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  transition: color .4s ease, border-color .4s ease, box-shadow .5s ease;
}
.nav__cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--amber-vivid), var(--ember));
  transform: translateY(101%); transition: transform .55s var(--ease-out);
}
.nav__cta:hover {
  color: #1C1B1A; border-color: var(--ember);
  box-shadow: 0 0 26px rgba(232, 138, 46, 0.42);
}
.nav__cta:hover::before { transform: translateY(0); }

/* The bars stay 28x13; the button itself is a 48px target. */
.burger { display: none; position: relative; width: 48px; height: 48px; margin-right: -12px; }
.burger span { left: 50%; margin-left: -14px; width: 28px; }
.burger span { position: absolute; height: 1px; background: var(--foundation); transition: transform .5s var(--ease-io), background-color .4s ease; }
.burger:hover span { background: var(--ember); }
.burger span:nth-child(1) { top: calc(50% - 6.5px); }
.burger span:nth-child(2) { top: calc(50% + 6.5px); }
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-6.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 6900;
  background:
    radial-gradient(80% 60% at 50% 8%, rgba(199,176,138,0.16), transparent 70%),
    radial-gradient(70% 55% at 50% 100%, rgba(29,82,40,0.16), transparent 72%),
    #100F0E;
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0); visibility: hidden;
}
.menu__list { text-align: center; }
.menu__item { overflow: hidden; }
.menu__item a {
  display: block; font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.06; padding-block: 0.12em;
  transform: translateY(110%); color: var(--foundation);
  transition: color .35s ease, letter-spacing .5s var(--ease-out);
}
.menu__item a:hover { color: var(--ember); letter-spacing: 0.03em; }
.menu__foot { margin-top: 2.2rem; }

@media (max-width: 880px) { .nav__links { display: none; } .burger { display: block; } }

/* =========================================================================
   BUTTONS  — vibrant on hover, quiet at rest
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 0.95rem 2rem;
  border: 1px solid var(--rule-strong); color: var(--ink);
  font-family: var(--f-mono); font-size: 0.63rem; letter-spacing: 0.24em; text-transform: uppercase;
  transition: color .4s ease, border-color .4s ease, box-shadow .55s ease;
  will-change: transform;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--amber-vivid), var(--ember));
  transform: translateY(101%); transition: transform .6s var(--ease-out);
}
.btn:hover {
  color: #1C1B1A; border-color: var(--ember);
  box-shadow: 0 0 34px rgba(232, 138, 46, 0.4);
}
.btn:hover::before { transform: translateY(0); }
.btn__arrow { transition: transform .5s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--solid {
  background: linear-gradient(122deg, #8A7448 0%, var(--brass) 48%, #9C855C 100%);
  border-color: transparent; color: #17150F;
  box-shadow: 0 0 0 rgba(232, 138, 46, 0);
}
.btn--solid::before { background: linear-gradient(120deg, var(--ember), var(--brass-hi)); }
.btn--solid:hover { color: #2A1710; box-shadow: 0 0 40px rgba(232, 138, 46, 0.5); }

/* on the cream room the solid button goes emerald — amber on cream is a shout */
.t-cream .btn--solid { background: linear-gradient(120deg, var(--emerald), var(--emerald-vivid)); color: var(--foundation); }
.t-cream .btn--solid::before { background: linear-gradient(120deg, var(--emerald-vivid), var(--jade)); }
.t-cream .btn--solid:hover { color: #0C2412; box-shadow: 0 0 34px rgba(70, 184, 113, 0.45); }
.t-cream .btn:hover { color: var(--foundation); border-color: var(--emerald-vivid); box-shadow: 0 0 26px rgba(29, 82, 40, 0.3); }
.t-cream .btn::before { background: linear-gradient(120deg, var(--emerald), var(--emerald-vivid)); }

.btn--ghost { border-color: var(--rule); }
.btn--lg { padding: 1.2rem 2.7rem; font-size: 0.66rem; }

/* the CTA reads as an engraved brass plate: square, with an inset rule */
.btn--solid { position: relative; }
.btn--solid::after {
  content: ''; position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid rgba(28, 27, 26, 0.28);
  transition: border-color .45s ease;
}
.btn--solid:hover::after { border-color: rgba(28, 27, 26, 0.42); }

.tlink {
  position: relative; display: inline-block;
  font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding-bottom: 5px; color: var(--eyebrow); transition: color .35s ease;
}
.tlink::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform-origin: 100% 50%; transition: transform .5s var(--ease-out);
}
.tlink:hover { color: var(--accent-hi); }
.tlink:hover::after { transform: scaleX(0); }

/* =========================================================================
   MOTION PRIMITIVES
   ========================================================================= */
.split-line { display: block; overflow: hidden; }
.split-char, .split-word { display: inline-block; will-change: transform; }
/* Every photograph carries the same grade, so the set reads as one campaign
   rather than a mix of shoots: shadows deepened, highlights pulled back. */
.reveal-media, .stack-media__b { position: relative; overflow: hidden; }
.reveal-media img, .stack-media__b img, .hero__media img, .phero__media img, .cta-band__media img {
  filter: saturate(0.86) contrast(1.1) brightness(0.92);
}
.reveal-media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* framed media sits inside a brass hairline and its own vignette */
.reveal-media::after, .stack-media__b::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(199, 176, 138, 0.22),
              inset 0 -60px 70px -40px rgba(16, 15, 14, 0.7);
  transition: box-shadow .8s var(--ease-out);
}
.split__media:hover .reveal-media::after {
  box-shadow: inset 0 0 0 1px rgba(199, 176, 138, 0.5),
              inset 0 -60px 70px -40px rgba(16, 15, 14, 0.55);
}
[data-rise] { will-change: transform, opacity; }
[data-illuminate] .split-word { color: var(--ink-ghost); }

.ar-1 { aspect-ratio: 1/1; } .ar-3-4 { aspect-ratio: 3/4; } .ar-2-3 { aspect-ratio: 2/3; }
.ar-4-5 { aspect-ratio: 4/5; } .ar-16-9 { aspect-ratio: 16/9; } .ar-3-2 { aspect-ratio: 3/2; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--onyx-deep); }
.hero__media { position: absolute; inset: -8% 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 30%); will-change: transform; }
/* a thin brass mat, the way a gallery frames a print */
.hero::after, .cta-band::after {
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  inset: clamp(10px, 1.5vw, 22px);
  border: 1px solid rgba(199, 176, 138, 0.24);
}
.hero__media { animation: drift-in 32s var(--ease-io) infinite alternate; }
@keyframes drift-in {
  0%   { transform: scale(1)     translate3d(0, 0, 0); }
  100% { transform: scale(1.055) translate3d(-0.8%, -1%, 0); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(16,15,14,0.86) 0%, rgba(16,15,14,0.40) 32%, rgba(16,15,14,0.72) 72%, rgba(16,15,14,0.96) 100%),
    linear-gradient(90deg, rgba(16,15,14,0.74) 0%, rgba(16,15,14,0.06) 58%, rgba(28,27,26,0.55) 100%),
    radial-gradient(64% 50% at 44% 40%, rgba(199,176,138,0.18), transparent 72%);
}
.hero__body { position: relative; z-index: 2; width: 100%; padding-top: clamp(7.5rem, 15vh, 10rem); padding-bottom: clamp(2.5rem, 7vh, 5rem); }
.hero__title { max-width: 15ch; }
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.8rem; margin-top: clamp(1.6rem, 4vh, 2.8rem);
  padding-top: 1.4rem; border-top: 1px solid rgba(199, 176, 138, 0.26);
}
.hero__sub { max-width: 40ch; }

.phero { position: relative; min-height: 74svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--onyx-deep); }
.phero__media { position: absolute; inset: -8% 0; z-index: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 30%); }
.phero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(16,15,14,0.9) 0%, rgba(16,15,14,0.4) 38%, rgba(16,15,14,0.96) 100%),
    linear-gradient(90deg, rgba(16,15,14,0.7) 0%, rgba(16,15,14,0.05) 60%, rgba(18,51,32,0.4) 100%);
}
.phero__body { position: relative; z-index: 2; width: 100%; padding-top: clamp(7.5rem, 15vh, 10rem); padding-bottom: clamp(2.5rem, 7vh, 5rem); }

.scroll-cue {
  position: absolute; z-index: 3; right: calc(var(--pad) * 0.3); top: 50%;
  transform: translateY(-50%) rotate(90deg); transform-origin: 100% 50%;
  display: flex; align-items: center; gap: 0.8rem;
  font-family: var(--f-mono); font-size: 0.52rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(240, 235, 225, 0.42);
}
.scroll-cue__line { width: 54px; height: 1px; background: rgba(199,176,138,0.34); position: relative; overflow: hidden; }
.scroll-cue__line::after { content: ''; position: absolute; inset: 0; background: var(--ember); animation: cue 2.6s var(--ease-io) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@media (max-width: 1100px) { .scroll-cue { display: none; } }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee {
  position: relative; overflow: hidden; white-space: nowrap;
  padding-block: clamp(1.4rem, 3vw, 2.6rem);
  color: var(--ink);
  background-color: var(--bg);
  background-image: var(--texture, none);
  background-size: cover; background-position: center;
  background-blend-mode: var(--texture-blend, normal);
  border-block: 1px solid var(--rule);
}
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__item {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(1.4rem, 3.2vw, 2.8rem); line-height: 1; padding-inline: 0.45em;
  display: inline-flex; align-items: center; gap: 0.45em;
}
.marquee__item .dot { width: 0.16em; height: 0.16em; background: var(--accent-hi); display: inline-block; transform: rotate(45deg); }
.marquee--outline .marquee__item { color: transparent; -webkit-text-stroke: 1px var(--rule-strong); }
.marquee--sm .marquee__item { font-size: clamp(0.9rem, 1.6vw, 1.25rem); letter-spacing: 0.06em; }

/* =========================================================================
   THE ESSENCE
   A selectable panel, deliberately NOT another row list. It sits directly
   above the service index, which is a row list, so the two have to read as
   different kinds of object.
   ========================================================================= */
.essence__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4.5vw, 3.2rem);
}

.essence__tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.essence__tab {
  position: relative; isolation: isolate;
  display: flex; align-items: baseline; gap: 0.6em;
  width: 100%; padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(0.5rem, 1vw, 0.9rem);
  text-align: left; color: var(--ink-faint);
  transition: color .4s ease;
}
.essence__tab + .essence__tab,
.essence__tabs li + li .essence__tab { border-left: 1px solid var(--rule); }
.essence__tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--ease-out);
}
.essence__tab::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent));
  transition: opacity .5s ease;
}
.essence__tab:hover { color: var(--ink-dim); }
.essence__tab:hover::before { opacity: 1; }
.essence__tab.is-active { color: var(--ink); }
.essence__tab.is-active::after { transform: scaleX(1); }
.essence__n {
  font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.18em;
  color: var(--accent); flex: 0 0 auto;
}
.essence__label {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(0.78rem, 1.15vw, 1rem); line-height: 1; letter-spacing: 0.02em;
}

/* A 4:5 frame here ran ~675px tall, so the picture and the principle beside
   it could not be read in one view. Shorter and narrower: the panel leads. */
.essence__stage {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.4vw, 3.5rem); align-items: center;
  padding-top: clamp(1.75rem, 3.2vw, 2.75rem);
}
.essence__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.essence__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* The box is 4/3 and these photographs are 2/3, so half the height is cut.
     Centre is right for most of them and cuts the head off others, hence the
     per-frame override. */
  object-position: var(--focal, 50% 50%);
  opacity: 0; transform: scale(1.06);
  transition: opacity .9s var(--ease-out), transform 1.4s var(--ease-out);
}
.essence__frame.is-active { opacity: 1; transform: scale(1); }

.essence__panels { position: relative; }
.essence__panel { }
.essence__count {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.22em;
  color: var(--accent); margin-bottom: 1.1rem;
}
.essence__count span { color: var(--ink-faint); }
.essence__title { margin-bottom: 1.1rem; }
.essence__lead { margin-bottom: 1rem; }
.essence__body { font-size: 0.92rem; line-height: 1.75; max-width: 46ch; }

@media (max-width: 900px) {
  .essence__tabs { grid-template-columns: repeat(5, 1fr); }
  .essence__tab { flex-direction: column; gap: 0.45em; padding-inline: 0.4rem; }
  .essence__label { font-size: 0.62rem; }
  .essence__stage { grid-template-columns: 1fr; }
  .essence__media { aspect-ratio: 3 / 2; }
}
@media (max-width: 520px) {
  .essence__label { display: none; }
  .essence__tab { align-items: center; justify-content: center; padding-block: 0.9rem; }
  .essence__n { font-size: 0.66rem; }
}

/* =========================================================================
   SERVICE ROWS
   ========================================================================= */
.svc { position: relative; border-top: 1px solid var(--rule); }
.svc__row {
  display: grid; grid-template-columns: 3.4rem minmax(0,1fr) minmax(0, 24rem) 2.5rem;
  gap: clamp(0.9rem, 2.2vw, 2rem); align-items: center;
  padding-block: clamp(1.2rem, 2.8vw, 2rem); border-bottom: 1px solid var(--rule);
  position: relative; isolation: isolate;
  transition: padding .55s var(--ease-out);
}
.svc__row::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 58%);
  transition: opacity .5s ease;
}
.svc__row:hover { padding-inline-start: clamp(0.5rem, 1.2vw, 1.2rem); }
.svc__row:hover::before { opacity: 1; }
.svc__idx { font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.18em; color: var(--ink-faint); }
.svc__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1; transition: color .45s ease; }
.svc__row:hover .svc__name { color: var(--accent-hi); }
.svc__desc { color: var(--ink-dim); font-size: 0.85rem; line-height: 1.62; }
.svc__price { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--eyebrow); white-space: nowrap; }
.svc__mark { justify-self: end; color: var(--ink-faint); transition: transform .55s var(--ease-out), color .4s ease; }
.svc__row:hover .svc__mark { transform: rotate(45deg); color: var(--accent-hi); }
[data-acc-head] { cursor: pointer; }
[data-acc-item].is-open .svc__mark { transform: rotate(45deg); color: var(--accent-hi); }
[data-acc-item].is-open .svc__name { color: var(--accent-hi); }
@media (max-width: 900px) {
  .svc__row { grid-template-columns: 2.6rem 1fr auto; }
  .svc__desc { grid-column: 2 / -1; }
}

/* =========================================================================
   SPLIT / EDITORIAL
   ========================================================================= */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.4rem, 2.8vw, 3.4rem); align-items: center; }
.split__media { grid-column: span 6; }
.split__body { grid-column: span 5; }
.split__body--offset { grid-column: 8 / span 5; }

.stack-media { position: relative; }
.stack-media__b {
  position: absolute; width: 44%; aspect-ratio: 3/4;
  right: -7%; bottom: -11%;
  border: 1px solid var(--rule-strong); overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}
.stack-media__b img { width: 100%; height: 100%; object-fit: cover; }

/* Narrow screens collapse the split, so the offset card has no gutter to hang
   into — it must tuck back inside the column. This block has to stay AFTER the
   base rules above or the desktop offset wins and the card leaves the page. */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split > * { grid-column: 1 / -1 !important; }
  .stack-media__b { width: 38%; right: 0; bottom: -6%; }
}

/* =========================================================================
   STEPS
   ========================================================================= */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: clamp(3.2rem, 8vw, 7rem) 1fr; gap: clamp(0.9rem, 2.4vw, 2.4rem); padding-block: clamp(1.5rem, 3vw, 2.4rem); border-top: 1px solid var(--rule); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__n { font-family: var(--f-display); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 0.82; color: transparent; -webkit-text-stroke: 1px var(--accent); }
.step__t { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1rem, 1.7vw, 1.35rem); letter-spacing: 0.02em; margin-bottom: 0.55rem; }

/* =========================================================================
   GALLERY STRIP
   Guest work, shown as work. No wash over it: an earlier duotone read as an
   accidental colour cast. The frames do the work instead, and the colour of
   the hair, which is the point of the picture, is left alone.
   ========================================================================= */
/* .strip is the positioning context for the arrows; the inner viewport does
   the clipping and the scrolling. Keeping overflow on the viewport rather than
   here is what stops a track wider than the page from overflowing the
   document, and it is also what lets the arrows and the ambient drift both
   drive one value, scrollLeft. */
.strip { position: relative; }
.strip__viewport {
  overflow-x: auto; overflow-y: hidden;
  /* No snapping while the ambient drift is running: snap quantises it into
     one-image jumps and the glide is the whole point. Snap is switched on
     once the visitor takes hold, where it helps a free swipe settle on an
     image edge. */
  scrollbar-width: none;              /* the arrows are the affordance */
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;     /* a swipe past the end must not navigate back */
}
.strip__viewport::-webkit-scrollbar { display: none; }
.strip.is-manual .strip__viewport { scroll-snap-type: x proximity; }
.strip__viewport:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.strip__track { display: flex; gap: clamp(0.9rem, 1.8vw, 1.75rem); }
.strip__item { scroll-snap-align: start; }

/* Square, like every other control here. Sits over the first and last image,
   inset far enough that it never covers a face at the centre of a frame. */
.strip__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--rule-strong);
  background: rgba(16, 15, 14, 0.72);
  color: var(--accent);
  cursor: pointer;
  transition: background .35s var(--ease-out), color .35s var(--ease-out),
              border-color .35s var(--ease-out), opacity .35s var(--ease-out);
}
.strip__nav:hover:not(:disabled) { background: rgba(16,15,14,0.9); color: var(--accent-hi); border-color: var(--accent); }
.strip__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.strip__nav:disabled { opacity: 0.28; cursor: default; }
.strip__nav--prev { left: clamp(0.4rem, 1.2vw, 1rem); }
.strip__nav--next { right: clamp(0.4rem, 1.2vw, 1rem); }
/* A light room needs the inverse, or a dark chip floats on cream */
.t-cream .strip__nav, .t-linen .strip__nav { background: rgba(240, 235, 225, 0.82); }
.t-cream .strip__nav:hover:not(:disabled),
.t-linen .strip__nav:hover:not(:disabled) { background: rgba(240, 235, 225, 0.95); }
.strip__item {
  flex: 0 0 clamp(200px, 24vw, 360px); aspect-ratio: 4 / 5;
  overflow: hidden; position: relative; isolation: isolate;
  background: var(--bg-lift);
}
.strip__item img {
  width: 100%; height: 100%; object-fit: cover;
  /* a correction, not a tint: no hue shift anywhere in here */
  filter: saturate(0.92) contrast(1.06) brightness(0.97);
  transition: filter .8s var(--ease-out), transform 1.2s var(--ease-out);
}
/* brass hairline, the same frame the editorial media carries */
.strip__item::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(199, 176, 138, 0.28);
  transition: box-shadow .6s var(--ease-out);
}
.strip__item:hover img { filter: saturate(1) contrast(1.02) brightness(1); transform: scale(1.04); }
.strip__item:hover::after { box-shadow: inset 0 0 0 1px rgba(235, 214, 168, 0.7); }

/* .strip--work is kept as a hook but no longer applies a separate treatment */
.strip--work .strip__item img { filter: saturate(0.92) contrast(1.06) brightness(0.97); }
.strip--work .strip__item:hover img { filter: saturate(1) contrast(1.02) brightness(1); transform: scale(1.04); }

/* =========================================================================
   QUOTE
   ========================================================================= */
.quote { position: relative; text-align: center; max-width: 26ch; margin-inline: auto; }
.quote__mark { font-family: var(--f-serif); font-size: clamp(3rem, 8vw, 6rem); line-height: 0.5; color: var(--accent); display: block; }

/* =========================================================================
   FACTS
   ========================================================================= */
.facts { border-top: 1px solid var(--rule); }
.fact { display: grid; grid-template-columns: 2.2rem 1fr; gap: 1.1rem; padding-block: clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid var(--rule); }
.fact__i { font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.16em; color: var(--eyebrow); padding-top: 0.5em; }
.fact__t { color: var(--ink-dim); font-size: 0.9rem; line-height: 1.62; }

/* =========================================================================
   CARDS
   ========================================================================= */
.card {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--rule); padding: clamp(1.3rem, 2.4vw, 2.1rem);
  background: var(--bg-lift);
  transition: border-color .5s ease, transform .7s var(--ease-out), box-shadow .6s ease;
}
.card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(70% 70% at 50% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 72%);
  transition: opacity .6s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 18px 46px rgba(0,0,0,0.34); }
.card:hover::after { opacity: 1; }
/* The inquiry panel that replaced the contact form. */
.inquire {
  border: 1px solid var(--rule); background: var(--bg-lift);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.inquire__btn { margin-top: 0.9rem; }
.inquire__addr { margin-top: 1rem; font-size: 0.9rem; overflow-wrap: break-word; }
@media (max-width: 900px) {
  .inquire__btn { width: 100%; justify-content: center; }
}


/* Aftercare lost its photograph (a shears frame that had nothing to do with
   shampoo) and does not need a replacement: the two bottles are the imagery.
   The intro holds the left, the products take the wider right. */
.aftercare {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 3.4vw, 3.6rem); align-items: start;
}
.aftercare__cards { align-content: start; }
@media (max-width: 900px) {
  .aftercare { grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 2.4rem); }
}

/* A product card leads with the bottle. The frame is square, like every other
   image on the site, and bleeds to the card's edges so the photograph is not a
   second box floating inside the first. */
.card--product { padding-top: 0; }
.card__media {
  margin: 0 calc(clamp(1.3rem, 2.4vw, 2.1rem) * -1) clamp(1.1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}
.card--product:hover .card__media img { transform: scale(1.04); }
.card__media img { transition: transform 1.1s var(--ease-out); }

.card__k { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.05rem, 1.7vw, 1.35rem); margin-bottom: 0.7rem; color: var(--ink); }

/* =========================================================================
   FORM
   ========================================================================= */
.form { display: grid; gap: 1.3rem; }
.field label { display: block; font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.5rem; }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-family: var(--f-body); font-size: 0.95rem;
  padding: 0.65rem 0; outline: none; border-radius: 0;
  transition: border-color .45s var(--ease-out), box-shadow .45s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field select { color: var(--ink-dim); }
.field select option { background: var(--onyx); color: var(--foundation); }

/* Honeypot. Off-screen rather than display:none, because a bot that fills
   forms will often skip a field it can see is not rendered. Real visitors
   never reach it: it is aria-hidden and out of the tab order. */
.hp {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* A field the server rejected. The rule is the only thing that changes colour,
   so the message stays legible against every room this form could sit in. */
.field [data-invalid] {
  border-color: var(--accent-hi);
  box-shadow: 0 1px 0 0 var(--accent-hi);
}

.form__status {
  font-size: 0.9rem; line-height: 1.7; margin: 0;
  padding-left: 0.9rem; border-left: 2px solid var(--rule-strong);
  color: var(--ink-dim);
}
.form__status[data-state="ok"]    { border-left-color: var(--accent); color: var(--ink); }
.form__status[data-state="error"] { border-left-color: var(--accent-hi); color: var(--ink); }

.form__fallback { display: inline-block; margin-top: 0.35rem; }

.form.is-sending { opacity: 0.72; }
.form.is-sending button[type="submit"] { cursor: progress; }
.form button[type="submit"][disabled] { opacity: 0.6; pointer-events: none; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent-hi); box-shadow: 0 1px 0 var(--accent-hi);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-ghost); }

/* =========================================================================
   CTA BAND
   ========================================================================= */
.cta-band { position: relative; overflow: hidden; text-align: center; padding-block: clamp(4.5rem, 12vh, 9rem); background: var(--bg); color: var(--ink); isolation: isolate; }
.cta-band__media { position: absolute; inset: -10% 0; z-index: 0; }
.cta-band__media img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.4;
  object-position: var(--focal, 50% 50%);
}
.cta-band__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(66% 62% at 50% 44%, rgba(199,176,138,0.18), transparent 70%),
    radial-gradient(90% 80% at 50% 50%, rgba(16,15,14,0.5), rgba(16,15,14,0.95));
}
.cta-band__body { position: relative; z-index: 2; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot {
  position: relative; border-top: 1px solid rgba(199,176,138,0.22);
  background-blend-mode: screen, normal, normal;
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(199,176,138,0.14), transparent 70%),
    radial-gradient(60% 55% at 88% 90%, rgba(199,176,138,0.16), transparent 72%),
    #100F0E;
  color: var(--foundation);
  --ink: #F0EBE1; --ink-dim: rgba(240,235,225,0.66);
  /* 0.36 measured 2.97:1 on this ground at 8.8px, under AA. 0.6 reads just
     as quiet and measures 6.26:1. The footer column headings, the legal row
     and the privacy link all inherit it. */
  --ink-faint: rgba(240,235,225,0.6);
  --rule: rgba(199,176,138,0.2); --rule-strong: rgba(199,176,138,0.38);
  --accent: #C7B08A; --accent-hi: #E88A2E; --eyebrow: #C7B08A;
}
/* Three columns, not four: the old footer stacked into one very long strip on
   a phone. Explore and Contact stay side by side down to 420px. */
.foot__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1.3fr;
  gap: clamp(1.75rem, 3.4vw, 3.4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.foot__tag { max-width: 20ch; color: var(--ink-dim); }
.foot__serving { font-size: 0.86rem; line-height: 1.75; max-width: 26ch; }
.foot__cta { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* social marks, drawn rather than set as text */
.foot__social { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -11px;
  color: var(--ink-dim); transition: color .4s ease, transform .5s var(--ease-out);
}
.foot__social li + li a { margin-left: 0; }
.foot__social a:hover { color: var(--accent-hi); transform: translateY(-2px); }
/* No filter here at all. The footer is the one place the lockup has room to
   be itself, so it runs at full size in its own gold and cream. */
.foot__lockup { height: clamp(124px, 12vw, 168px); width: auto; max-width: none; opacity: 1; }
.foot__h { font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.1rem; }
.foot__list li { margin-bottom: 0.55rem; }
.foot__list a { color: var(--ink-dim); font-size: 0.88rem; transition: color .35s ease; overflow-wrap: break-word; }
/* `anywhere` sat here and split the email mid-word, because it opens a break
   opportunity at every character and the line then fills greedily. The address
   carries a <wbr> after the @; `break-word` prefers that real opportunity and
   only cuts inside the domain if the column is too narrow to hold it at all. */
.foot__list a:hover { color: var(--brass-hi); }
.foot__bot {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.8rem; justify-content: space-between; align-items: center;
  padding-block: 1.5rem; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.foot__bot a:hover { color: var(--brass-hi); }
.foot__word {
  font-family: var(--f-display); text-transform: uppercase;
  font-size: clamp(2.2rem, 9vw, 7rem); line-height: 0.84;
  color: transparent; -webkit-text-stroke: 1px rgba(199,176,138,0.24);
  text-align: center; padding-bottom: clamp(0.8rem, 2.4vw, 2rem); user-select: none;
}
@media (max-width: 900px) {
  /* brand across the top, the two link columns beneath it side by side */
  .foot__top { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.5rem; }
  .foot__brand { grid-column: 1 / -1; align-items: center; text-align: center; }
  .foot__tag { max-width: 24ch; }
  .foot__social { justify-content: center; }
  .foot__social a { margin-left: 0; }
  .foot__cta { display: flex; justify-content: center; }
}
@media (max-width: 900px) {
  .foot__top    { padding-block: 2.2rem 1.6rem; }
  .locate       { padding-block: 2rem; gap: 1.4rem; }
  /* cap the height so a wider tablet does not turn the map into a tall band */
  .locate__map  { aspect-ratio: 16 / 9; max-height: 240px; }
  .foot__word   { font-size: clamp(2rem, 11vw, 3.4rem); padding-bottom: 0.6rem; }
  .locate__note { font-size: 0.82rem; max-width: 34ch; }
  .foot__cta    { padding-bottom: 2rem; }
  .foot__serving{ font-size: 0.82rem; }
  .foot__list a { font-size: 0.84rem; }
}

/* The two link columns stay side by side all the way down. Stacking them was
   what made the footer a very long strip on a phone. Contact takes the wider
   share because the email address is 28 characters and an even split broke it
   mid-word. Must sit after the 900px block above, which also sets this size. */
@media (max-width: 420px) {
  /* An even split is what these two columns actually get: .foot__brand spans
     both tracks, and a spanning item's min-content is handed equally to every
     track with an intrinsic minimum, so an uneven `fr` ratio here is ignored.
     The email is sized to fit the half rather than fought for a wider share. */
  /* minmax(0, …) so the domain's min-content cannot floor the tracks wider
     than the viewport on a very narrow phone; it breaks instead. */
  .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem 1.1rem; }
  .foot__list a { font-size: 0.8rem; }
  .foot__serving { font-size: 0.79rem; }
  .foot__bot { justify-content: center; text-align: center; }
}

/* =========================================================================
   SKIP LINK
   ========================================================================= */
.skip { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--foundation); color: var(--onyx); padding: 0.7rem 1.2rem; font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; }
.skip:focus { left: 1rem; top: 1rem; }

/* =========================================================================
   REDUCED MOTION
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .loader { display: none; }
  .split-char, .split-word, [data-rise] { transform: none !important; opacity: 1 !important; }
  [data-illuminate] .split-word { color: var(--ink) !important; }
  .menu__item a { transform: none; }
  .section::before { animation: none; }
}

/* =========================================================================
   TOUCH TARGETS
   Anything a finger has to hit gets at least ~44px of height. The type and
   the rules stay exactly where they were; only the hit area grows.
   ========================================================================= */
/* 900px, not 720: tablets are finger-driven and pointer detection is not
   dependable enough to be the only thing standing between a thumb and a link. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .tlink { padding-top: 15px; padding-bottom: 17px; }
  .tlink::after { bottom: 15px; }

  .foot__list li { margin-bottom: 0; }
  .foot__list a { display: inline-block; padding-block: 11px; }

  /* the legal row sits in spans, so the prose-link rule below never caught it */
  .foot__bot a { display: inline-block; padding-block: 13px; }
  .foot__bot   { padding-block: 0.75rem; }

  .essence__tab { min-height: 52px; }

  .svc__row[data-acc-head] { min-height: 56px; }

  .field input, .field textarea, .field select { padding-block: 0.85rem; }

  /* Prose links in body copy. `.muted a` outranks `.tlink` on specificity,
     so tlinks must be excluded here or they lose their larger target. */
  .muted a:not(.tlink):not(.btn),
  .fact__t a:not(.tlink):not(.btn),
  p a:not(.btn):not(.tlink):not(.nav__link) {
    display: inline-block; padding-block: 11px;
  }
}

/* =========================================================================
   SMALL-LABEL FLOOR
   The tracked micro-labels bottom out around 9px on a phone, which is below
   readable. Lift the floor without touching the desktop scale.
   ========================================================================= */
@media (max-width: 720px) {
  .foot__h        { font-size: 0.66rem; }
  .foot__bot      { font-size: 0.64rem; }
  .field label    { font-size: 0.66rem; letter-spacing: 0.2em; }
  .svc__idx,
  .fact__i,
  .essence__n,
  .essence__count { font-size: 0.68rem; }
  .svc__price     { font-size: 0.74rem; }
  .scroll-cue     { font-size: 0.62rem; }
  .brand__word small { font-size: 0.56rem; }
  .faint          { font-size: 0.8rem; }
}

/* fine print: small by intent, never below readable */
.fineprint { font-size: 0.78rem; line-height: 1.72; }
@media (max-width: 720px) {
  .fineprint { font-size: 0.84rem; }
  .loader__word { font-size: 0.74rem; }
}

/* THE FOUNDER
   Deliberately smaller than the old feature: one portrait at five columns, no
   stacked second image, no booking button of its own. The frame is 2:3, the
   photograph's own aspect, so cover has nothing to crop and nothing to stretch. */
.founder {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center;
}
.founder__media { position: relative; aspect-ratio: 2 / 3; overflow: hidden; max-width: 420px; }
.founder__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .founder { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.2rem); }
  .founder__media { max-width: 320px; }
}

/* =========================================================================
   THE TEAM — two mirrored rows
   Savanah and Lillian, one portrait to the left and one to the right, so
   neither reads as the one listed underneath the other. Identical frames,
   identical type, bios within a word of each other.

   The frame is capped at 460px because Lillian's photograph yields 989px of
   real pixels and anything wider starts upscaling it. A tighter crop was tried
   first and left only 480px, which the browser stretched into mush on a
   retina screen; that is what "distorted" looked like.
   ========================================================================= */
.duo { display: grid; gap: clamp(2.5rem, 6vw, 5rem); margin-top: clamp(2rem, 5vw, 3.25rem); }
.duo__member {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.duo__media {
  position: relative; width: 100%; max-width: 460px;
  aspect-ratio: 4 / 5; overflow: hidden;
  grid-column: 1; grid-row: 1;
}
.duo__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82) contrast(1.05) brightness(0.99);
}
.duo__body { grid-column: 2; grid-row: 1; max-width: 42ch; }
/* the second one turns around */
.duo__member--flip .duo__media { grid-column: 2; justify-self: end; }
.duo__member--flip .duo__body  { grid-column: 1; justify-self: end; }
.duo__name { margin: 0; }
.duo__role { margin: 0.6rem 0 0; }
.duo__bio {
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--rule);
  font-size: 0.95rem; line-height: 1.85;
}
@media (max-width: 900px) {
  .duo { gap: clamp(2.5rem, 7vw, 3.5rem); }
  /* stacked, and both lead with the portrait so neither is turned around */
  .duo__member, .duo__member--flip { grid-template-columns: 1fr; gap: 1.4rem; }
  .duo__member .duo__media, .duo__member--flip .duo__media {
    grid-column: 1; grid-row: 1; justify-self: start; max-width: 22rem;
  }
  .duo__member .duo__body, .duo__member--flip .duo__body {
    grid-column: 1; grid-row: 2; justify-self: start;
  }
}

/* =========================================================================
   FOUND US — stylised area map with a brass pin
   Drawn, not embedded: no third-party script, no tracking, and it holds the
   brand. The pin links out to real directions.
   ========================================================================= */
.locate {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  border-top: 1px solid var(--rule);
}
.locate__body { max-width: 46ch; }
.locate__body .locate__note { margin-inline: auto; }
.locate__map { width: min(100%, 860px); align-self: center; }
.locate__map {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--rule-strong); background: #0C0B0A;
}
/* Google's tiles arrive bright and cool. The filter corrects them; this veil
   settles them into the room. Both step back on hover so the map stays fully
   usable, and pointer-events stay off so it never blocks a drag. */
.locate__map::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 20, 7, 0.34), rgba(16, 15, 14, 0.42)),
    radial-gradient(85% 75% at 50% 50%, transparent 42%, rgba(16, 15, 14, 0.46) 100%);
  transition: opacity .7s var(--ease-out);
}
.locate__map:hover::before { opacity: 0.18; }
.locate__map iframe { width: 100%; height: 100%; display: block; border: 0; }
/* Google's own tiles are bright and cool; this settles them into the room
   without hiding anything a visitor needs to read. */
.locate__map iframe { filter: grayscale(0.6) contrast(1.06) brightness(0.78) sepia(0.22); }
.locate__map:hover iframe { filter: grayscale(0.06) contrast(1.02) brightness(1) sepia(0); }
.locate__map iframe { transition: filter .8s var(--ease-out); }
.locate__map::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(199, 176, 138, 0.22);
}
.locate__map svg { width: 100%; height: 100%; display: block; }
.locate__pin { transform-origin: center; animation: pin-drop 4.5s var(--ease-out) infinite; }
@keyframes pin-drop {
  0%, 62%, 100% { transform: translateY(0); }
  70%           { transform: translateY(-7px); }
  78%           { transform: translateY(0); }
}
.locate__halo { transform-origin: center; animation: halo 4.5s var(--ease-out) infinite; }
@keyframes halo {
  0%, 60%  { opacity: 0; transform: scale(0.4); }
  80%      { opacity: 0.55; transform: scale(1); }
  100%     { opacity: 0; transform: scale(1.7); }
}
.locate__body .foot__h { margin-bottom: 0.9rem; }
.locate__addr { font-family: var(--f-serif); font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; color: var(--ink); }
.locate__note { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.7; margin-top: 0.9rem; max-width: 40ch; }
@media (max-width: 820px) { .locate__map { aspect-ratio: 4 / 3; } }

/* =========================================================================
   MOVEMENT — a light sheen
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .locate__pin, .locate__halo { animation: none; }
}

/* The sheen effect painted headings through `background-clip:text` with a
   transparent fill. Its end keyframe left the gradient off-element, so the
   text rendered invisible. Removed; this guard makes the class inert. */
.sheen, .sheen.is-lit {
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: none !important;
}

/* The leading rule is a flex item, so a wrapping eyebrow left it orphaned on
   its own line. Below tablet the label goes back to being plain text. */
@media (max-width: 700px) {
  .eyebrow { display: block; }
  .eyebrow::before, .eyebrow::after { display: none; }
}

/* The graded room-join shadow is meant to be felt, not seen. Over a photograph
   it reads as a band across the image, so the leaf room takes the hairline
   only. */
.section.t-leaf + .section::after,
.section + .section.t-leaf::after {
  background:
    linear-gradient(90deg, transparent, var(--rule-strong) 22%, var(--rule-strong) 78%, transparent) top left / 100% 1px no-repeat;
  height: 1px;
}

/* Arrows are drawn, not typed. U+2197 in particular picks up emoji
   presentation on iOS, which put a blue glyph in the middle of the menu. */
.btn__arrow, .svc__mark { display: inline-flex; align-items: center; justify-content: center; }
.btn__arrow svg, .svc__mark svg { display: block; }