/* ==========================================================================
   NEXIFY STUDIOS — site styles
   Palette sampled from image 1 (the lounge reference):
     forest wall   #05120b → #0c1a10      racing green  #1d4a36 / chair #3b6451
     gold lettering #f2c779 / #cc9b53 / #aa6920 / #764411      ivory #f3ead8
   Motion vocabulary (from the microinteractions.dev studies):
     UI state 220–250ms ease-out-quint · arrows 190ms ease-out-expo ·
     press 160ms scale .97 · transitions (reversible), never bounce.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/fonts/jost-latin-300-normal.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/fonts/jost-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/fonts/jost-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --forest-950: #050f0a;
  --forest-900: #08130d;
  --forest-850: #0b1a12;
  --forest-800: #0f2219;
  --forest-700: #142d21;
  --racing-600: #1d4a36;
  --racing-500: #2a5a44;
  --racing-400: #3b6451;

  --gold-100: #fbe6b0;
  --gold-200: #f2c779;
  --gold-300: #e0b066;
  --gold-400: #cc9b53;
  --gold-500: #aa6920;
  --gold-700: #764411;

  --ivory: #f3ead8;
  --ivory-2: #d9cfba;
  --muted: #a8a28f;
  --muted-2: #8b8775;

  --line: rgba(204, 155, 83, .2);
  --line-2: rgba(204, 155, 83, .38);
  --line-3: rgba(242, 199, 121, .7);
  --veil: rgba(5, 15, 10, .72);

  --danger: #e59a86;
  --success: #9fcfa8;

  --gold-metal: linear-gradient(180deg, #fbe3a6 0%, #f2c779 20%, #d6a55c 44%, #94591a 66%, #c58f47 84%, #efcb84 100%);
  --gold-flat: linear-gradient(180deg, #f2c779 0%, #cc9b53 55%, #b98339 100%);
  --gold-sheen: linear-gradient(105deg, transparent 35%, rgba(255, 246, 220, .6) 50%, transparent 65%);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --fs-display: clamp(3.1rem, min(7.6vw, 12.5svh), 7.6rem);
  --fs-h1: clamp(2.7rem, 5.4vw, 5rem);
  --fs-h2: clamp(2.2rem, 3.8vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 1.9vw, 1.85rem);
  --fs-lede: clamp(1.1rem, 1.35vw, 1.3rem);

  --container: 1280px;
  --gutter: clamp(16px, 4.2vw, 56px);
  --nav-h: 84px;
  --radius: 12px;      /* inputs, notices, small panels */
  --r-card: 18px;      /* cards, photos */
  --r-lg: 24px;        /* maps, large frames */
  --section: clamp(5rem, 10vw, 9.5rem);

  --ease-out: cubic-bezier(.23, 1, .32, 1);      /* ease-out-quint */
  --ease-expo: cubic-bezier(.19, 1, .22, 1);     /* ease-out-expo */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-press: 160ms;
  --t-ui: 240ms;
  --t-hover: 420ms;
  --t-image: 1100ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  background: var(--forest-900);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-variant-numeric: lining-nums;
  min-height: 100vh;
  background: var(--forest-900);
  color: var(--ivory-2);
  font: 400 1.0625rem/1.7 var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 600; color: var(--ivory); line-height: 1.06; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
main { display: block; outline: none; }
::selection { background: rgba(204, 155, 83, .35); color: var(--ivory); }

:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 200; padding: .7rem 1.1rem; background: var(--gold-200); color: var(--forest-950); font-weight: 500; transform: translateY(-160%); transition: transform var(--t-ui) var(--ease-out); }
.skip-link:focus { transform: none; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }

/* Fine grain over the whole page — keeps flat greens from banding. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font: 500 .74rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold-300);
}
.eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400)); }
.eyebrow--center::after { content: ""; width: 2.25rem; height: 1px; background: linear-gradient(90deg, var(--gold-400), transparent); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.15; }
.h2 em, .h1 em, .display em { font-style: italic; font-weight: 500; color: var(--gold-200); }
.lede { font-size: var(--fs-lede); font-weight: 300; line-height: 1.65; color: var(--ivory-2); }
.muted { color: var(--muted); }
.gold-text {
  background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head { display: grid; gap: 1.25rem; max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 2rem 4rem; }
.section-head--split > :last-child { justify-self: end; }
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; } .section-head--split > :last-child { justify-self: start; } }

/* Ornamental rule with a gem — echoes the divider under the title in image 1. */
.ornament { display: flex; align-items: center; justify-content: center; gap: .75rem; width: min(100%, 30rem); color: var(--gold-400); }
.ornament__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400) 70%, var(--gold-200)); }
.ornament__line:last-child { background: linear-gradient(270deg, transparent, var(--gold-400) 70%, var(--gold-200)); }
.ornament__gem { width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold-flat); box-shadow: 0 0 10px rgba(242, 199, 121, .55); }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 3.35rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: var(--btn-h); padding: 0 1.75rem;
  font: 500 .8rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  border-radius: 999px; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-hover) var(--ease-out),
              background-color var(--t-ui) var(--ease-out), border-color var(--t-ui) var(--ease-out), color var(--t-ui) var(--ease-out), opacity var(--t-ui);
}
.btn--sm { --btn-h: 2.75rem; padding: 0 1.25rem; font-size: .72rem; }
.btn--block { width: 100%; }

.btn--gold { color: var(--forest-950); background: var(--gold-flat); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .55), inset 0 -1px 0 rgba(90, 50, 10, .35), 0 6px 18px -10px rgba(204, 155, 83, .6); }
.btn--gold::before { /* metallic sheen that sweeps across on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-sheen); background-size: 250% 100%; background-position: 130% 0;
  transition: background-position 900ms var(--ease-out);
}
.btn--ghost { color: var(--ivory); border: 1px solid var(--line-2); background: rgba(8, 19, 13, .28); backdrop-filter: blur(6px); }
.btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(242, 199, 121, .12), rgba(204, 155, 83, .05)); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); }
.btn--quiet { color: var(--gold-200); padding-inline: .25rem; min-height: 2.75rem; letter-spacing: .18em; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
  .btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255, 240, 200, .6), inset 0 -1px 0 rgba(90, 50, 10, .35), 0 14px 32px -12px rgba(224, 176, 102, .65); }
  .btn--gold:hover::before { background-position: -30% 0; }
  .btn--ghost:hover { border-color: var(--line-3); }
  .btn--ghost:hover::before { opacity: 1; }
}
.btn:active { transform: translateY(0) scale(.97); transition-duration: var(--t-press); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }

/* Arrow that extends from a chevron (chevron-morph study, 190ms expo). */
.arrow { width: 1.05rem; height: 1.05rem; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.arrow__stem { transform-box: fill-box; transform-origin: left center; transform: scaleX(.4); opacity: 0; transition: transform 190ms var(--ease-expo), opacity 190ms var(--ease-expo); }
.arrow__head { transform: translateX(-3px); transition: transform 190ms var(--ease-expo); }
@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover > .arrow .arrow__stem, :is(a, button):hover .arrow .arrow__stem { transform: scaleX(1); opacity: 1; }
  :is(a, button):hover > .arrow .arrow__head, :is(a, button):hover .arrow .arrow__head { transform: translateX(0); }
}
:is(a, button):focus-visible .arrow .arrow__stem { transform: scaleX(1); opacity: 1; transition: none; }
:is(a, button):focus-visible .arrow .arrow__head { transform: none; transition: none; }
@media (hover: none) { .arrow__stem { transform: scaleX(1); opacity: 1; } .arrow__head { transform: none; } }

/* Text-swap label (text-swap study): both labels share one grid cell, so width never changes. */
.swap { display: inline-grid; overflow: hidden; }
.swap > span { grid-area: 1 / 1; transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out), filter 220ms var(--ease-out); }
.swap > span:last-child { transform: translateY(-120%); opacity: 0; filter: blur(4px); }
@media (hover: hover) and (pointer: fine) {
  :hover > .swap > span:first-child { transform: translateY(120%); opacity: 0; filter: blur(4px); }
  :hover > .swap > span:last-child { transform: none; opacity: 1; filter: none; }
}
:focus-visible > .swap > span:first-child { transform: translateY(120%); opacity: 0; transition: none; }
:focus-visible > .swap > span:last-child { transform: none; opacity: 1; filter: none; transition: none; }

/* Spinner + button states (loading / success) */
.btn__spinner { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; display: none; animation: spin .8s linear infinite; }
.btn.is-loading .btn__spinner { display: block; }
.btn.is-loading { pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Links ---------- */
/* Underline that grows from the side the pointer enters and leaves toward the side it exits. */
.link-line { position: relative; display: inline-block; color: var(--ivory); padding-block: .15rem; }
.link-line::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-flat);
  transform: scaleX(var(--ul, 0)); transform-origin: var(--ul-origin, left) center;
  transition: transform 360ms var(--ease-out);
}
.link-line:hover, .link-line:focus-visible { --ul: 1; color: var(--gold-100); }
.link-line--static::after { --ul: .35; }
.link-line--static:hover::after { --ul: 1; }

/* ---------- Header & navigation ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  view-transition-name: site-header;
  transition: background-color 500ms var(--ease-out), border-color 500ms var(--ease-out), height 400ms var(--ease-out), backdrop-filter 500ms;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled, .site-header.is-solid { background: rgba(7, 17, 11, .82); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); border-bottom-color: var(--line); }
.site-header.is-scrolled { --nav-h: 72px; }
.site-header__inner { height: 100%; max-width: calc(1440px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 2rem; }

.brand { display: inline-flex; align-items: center; gap: .8rem; flex: none; }
.brand__mark { width: 30px; height: 39px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); transition: transform 600ms var(--ease-out); }
.brand:hover .brand__mark { transform: translateY(-1px) rotate(-2deg); }
.brand__word { display: grid; line-height: 1; }
.brand__name { font: 600 1.5rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; background: var(--gold-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand__sub { margin-top: .3rem; font: 400 .6rem/1 var(--sans); letter-spacing: .62em; text-transform: uppercase; color: var(--ivory-2); padding-left: .1em; }

/* Pill navigation (nav reference, in the house palette): an ivory capsule with antique-gold uppercase
   items, and a raised lighter-ivory "glide" pill with racing-green text that sits under the current
   page and slides to whatever is hovered or focused. */
.nav { margin-left: auto; }
.nav__pill {
  position: relative; display: flex; padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, #efe4cc, #e6d8bb);
  border: 1px solid rgba(204, 155, 83, .55);
  box-shadow: inset 0 1px 0 rgba(255, 252, 244, .7), inset 0 -1px 0 rgba(118, 68, 17, .14), 0 14px 32px -18px rgba(0, 0, 0, .9);
}
.nav__list { position: relative; z-index: 1; display: flex; gap: 2px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; height: 2.6rem; padding: 0 clamp(.85rem, 1.3vw, 1.25rem); border-radius: 999px;
  font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #7a4d17;
  transition: color 300ms var(--ease-out);
}
.nav__link:focus-visible { outline-offset: 1px; border-radius: 999px; }
.nav__link.is-glide { color: var(--racing-600); }
.nav__glide {
  position: absolute; left: 0; top: 5px; bottom: 5px; width: 1px; border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, #fffdf7, #fbf5e8);
  box-shadow: inset 0 -1px 0 rgba(118, 68, 17, .12), 0 4px 10px -4px rgba(80, 50, 15, .45), 0 1px 2px rgba(80, 50, 15, .25);
  transform-origin: 0 50%;
  transform: translateX(var(--gx, 0)); width: var(--gw, 0px); opacity: var(--go, 0);
  transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity 240ms var(--ease-out);
}
.nav__pill:not([data-ready]) .nav__glide { transition: none; }
/* Without JavaScript the current page still gets its raised pill. */
.nav__pill:not([data-ready]) .nav__link[aria-current="page"] { background: #fffdf7; color: var(--racing-600); }
.nav__link:focus-visible { outline-color: var(--racing-600); }
@media (hover: hover) and (pointer: fine) { .nav__link:not(.is-glide):hover { color: var(--gold-700); } }
.nav__cta { margin-left: .75rem; }

.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; margin-left: auto; margin-right: -.5rem; align-items: center; justify-content: center; }
.menu-toggle__bars { position: relative; width: 24px; height: 10px; }
.menu-toggle__bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--gold-200); transition: transform 320ms var(--ease-out), top 320ms var(--ease-out); }
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: 8.5px; right: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: 4.25px; right: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; padding: calc(var(--nav-h) + 2rem) var(--gutter) 2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 70% at 50% 0%, rgba(29, 74, 54, .55), transparent 60%), var(--forest-950);
  opacity: 0; visibility: hidden; transition: opacity 360ms var(--ease-out), visibility 0s 360ms;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity 360ms var(--ease-out); }
.mobile-menu__list { display: grid; gap: .25rem; }
.mobile-menu__list a {
  display: block; padding: .55rem 0; font: 500 clamp(2.1rem, 9vw, 3rem)/1.1 var(--serif); color: var(--ivory);
  border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px);
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out), color var(--t-ui);
}
.mobile-menu__list a[aria-current="page"] { color: var(--gold-200); }
.mobile-menu.is-open .mobile-menu__list a { opacity: 1; transform: none; }
.mobile-menu.is-open li:nth-child(2) a { transition-delay: 50ms; }
.mobile-menu.is-open li:nth-child(3) a { transition-delay: 100ms; }
.mobile-menu.is-open li:nth-child(4) a { transition-delay: 150ms; }
.mobile-menu.is-open li:nth-child(5) a { transition-delay: 200ms; }
.mobile-menu__foot { display: grid; gap: .35rem; font-size: .9rem; color: var(--muted); }
.mobile-menu__foot a { color: var(--gold-200); }

@media (max-width: 960px) {
  .nav, .nav__cta { display: none; }
  .menu-toggle { display: inline-flex; }
  :root { --nav-h: 68px; }
  .site-header.is-scrolled { --nav-h: 64px; }
}
html.menu-open { overflow: hidden; }
html.menu-open .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }

/* ==========================================================================
   HERO — composed on image 1
   The stage is a box with the photo's exact aspect ratio that always covers
   the hero, so the lamp glows and chair light stay pinned to the right pixels.
   ========================================================================== */
.hero {
  position: relative; height: max(600px, 100svh); min-height: 100vh; min-height: max(600px, 100svh);
  overflow: hidden; container-type: size; isolation: isolate;
  background: var(--forest-950);
}
.hero__stage { position: absolute; inset: 0; z-index: -1; }
.hero__frame {
  --ar: 1.7768; /* 1672 / 941 */
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * var(--ar))); aspect-ratio: 1672 / 941;
  transform: translate(-50%, -50%);
}
.hero__atmos { position: absolute; inset: 0; background: url("/images/hero/lounge-1000.webp") center / cover; filter: blur(28px) saturate(1.1); transform: scale(1.1); opacity: .9; }
.hero__img { position: absolute; inset: 0; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__lights { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.lamp { position: absolute; width: 11%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .55), rgba(242, 170, 80, .18) 45%, transparent 75%); }
.lamp--c1 { left: 37.6%; top: 2%; } .lamp--c2 { left: 50%; top: 5.5%; width: 13%; } .lamp--c3 { left: 62.8%; top: 2%; }
.lamp--l1 { left: 10.8%; top: 16%; width: 9%; } .lamp--l2 { left: 24%; top: 26.5%; width: 8%; }
.lamp--r1 { left: 77.2%; top: 25.5%; width: 8%; } .lamp--r2 { left: 84.8%; top: 19%; width: 9%; }
.hero__pool { position: absolute; left: 50%; top: 80%; width: 46%; aspect-ratio: 2.6; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 190, 110, .22), rgba(204, 155, 83, .07) 55%, transparent); mix-blend-mode: screen; }
.hero__dim { position: absolute; inset: 0; background: #020604; opacity: 0; pointer-events: none; }
.hero__shade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(75% 60% at 50% 42%, transparent 40%, rgba(3, 9, 6, .5) 100%),
    linear-gradient(180deg, rgba(3, 9, 6, .55) 0%, transparent 18%, transparent 52%, rgba(4, 11, 7, .55) 74%, rgba(5, 15, 10, .96) 100%); }

.hero__content { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-top: calc(var(--nav-h) + clamp(1rem, 10cqh, 9rem)); padding-bottom: clamp(1.5rem, 6cqh, 4rem); }

.hero__title { display: grid; justify-items: center; text-align: center; gap: clamp(.4rem, 1.2cqh, 1rem); }
.hero__kicker { display: flex; align-items: center; gap: 1rem; font: 500 clamp(1.15rem, 2cqw, 1.9rem)/1 var(--serif); color: var(--gold-200); letter-spacing: .02em; }
.hero__kicker .rule { width: clamp(3rem, 7cqw, 7.5rem); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-400) 40%, var(--gold-200)); }
.hero__kicker .rule--r { background: linear-gradient(270deg, transparent, var(--gold-400) 40%, var(--gold-200)); }
.hero__kicker .rule--l { transform-origin: right center; }
.hero__kicker .rule--r { transform-origin: left center; }
.hero__brand { font-size: var(--fs-display); font-weight: 600; line-height: .95; letter-spacing: -.012em; color: var(--gold-200); filter: drop-shadow(0 3px 2px rgba(40, 20, 0, .55)) drop-shadow(0 10px 28px rgba(0, 0, 0, .55)); }
.hero__word { display: inline-flex; padding-bottom: .12em; }
.hero__word + .hero__word { margin-left: .24em; }
.ch { display: inline-block; overflow: hidden; padding: .05em .005em .14em; margin-bottom: -.14em; }
.ch > span {
  display: inline-block;
  background: var(--gold-sheen), var(--gold-metal); background-size: 300% 100%, 100% 100%; background-position: 120% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .ornament { width: clamp(16rem, 44cqw, 38rem); margin-top: .2rem; }
.hero .ornament__line { transform-origin: right center; }
.hero .ornament__line:last-child { transform-origin: left center; }

.hero__base { grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2rem 22cqw; }
.hero__intro { max-width: 30rem; }
.hero__headline { font: 500 clamp(1.7rem, 2.6vw, 2.5rem)/1.12 var(--serif); color: var(--ivory); }
.hero__headline em { font-style: italic; color: var(--gold-200); }
.hero__headline .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__headline .line > span { display: block; }
.hero__actions { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem; }

@media (max-aspect-ratio: 4/5) {
  /* Portrait: use the chair-centred crop of image 1. */
  .hero__frame { --ar: .6716; aspect-ratio: 632 / 941; }
  .lamp--l1, .lamp--l2, .lamp--r1, .lamp--r2 { display: none; }
  .lamp--c1 { left: 17%; width: 30%; } .lamp--c2 { left: 50%; width: 34%; } .lamp--c3 { left: 83.5%; width: 30%; }
  .hero__pool { width: 120%; }
}
@media (max-width: 860px) {
  .hero__content { padding-top: calc(var(--nav-h) + 9cqh); }
  .hero__base { grid-template-columns: 1fr; gap: 1.4rem; }
  .hero__intro { max-width: 34rem; }
  .hero__actions { justify-self: stretch; justify-content: flex-start; }
  .hero__shade { background:
    radial-gradient(90% 50% at 50% 38%, transparent 40%, rgba(3, 9, 6, .45) 100%),
    linear-gradient(180deg, rgba(3, 9, 6, .6) 0%, transparent 16%, transparent 44%, rgba(4, 11, 7, .78) 62%, rgba(5, 15, 10, .98) 86%); }
}
@media (max-width: 520px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__kicker .rule { width: 2.2rem; }
}

/* ---------- Hero entrance: one coordinated sequence (~2.3s) ----------
   1 Atmosphere: the room surfaces from darkness (0–700ms)
   2 The chair is lit: a light opens on it and spreads to the room; lamps and floor pool glow (300–1500ms)
   3 Brand typography: kicker, rules, letters rise, ornament (700–1950ms)
   4 Headline (1180–2150ms)
   5 Buttons and navigation settle into place (1340–2320ms)
   Opacity and short translations only, no overshoot. Fill mode is "backwards", so every element ends in its
   normal state (hover transforms keep working). Nothing blocks input, and any input completes the sequence. */
@property --spot { syntax: "<percentage>"; inherits: false; initial-value: 130%; }
.hero__dim { background: radial-gradient(ellipse 58% 68% at 50% 64%, rgba(2, 6, 4, 0) var(--spot), rgba(2, 6, 4, .97) calc(var(--spot) + 45%)); }

.intro-full .hero__atmos { animation: in-fade 700ms var(--ease-out) backwards; }
.intro-full .hero__img { animation: in-img 1800ms var(--ease-expo) backwards; }
.intro-full .hero__dim { animation: in-spot 1500ms var(--ease-in-out) backwards; }
.intro-full .lamp { animation: in-lamp 900ms var(--ease-out) backwards; }
.intro-full .lamp--c2 { animation-delay: 450ms; } .intro-full .lamp--c1, .intro-full .lamp--c3 { animation-delay: 520ms; }
.intro-full .lamp--l2, .intro-full .lamp--r1 { animation-delay: 590ms; } .intro-full .lamp--l1, .intro-full .lamp--r2 { animation-delay: 650ms; }
.intro-full .hero__pool { animation: in-pool 1000ms var(--ease-out) 550ms backwards; }

.intro-full .hero__kicker-text { animation: in-up 700ms var(--ease-out) 700ms backwards; }
.intro-full .hero__kicker .rule { animation: in-rule 900ms var(--ease-expo) 720ms backwards; }
.intro-full .ch > span { animation: in-ch 850ms var(--ease-expo) backwards, sheen 1300ms var(--ease-in-out) backwards; }
.intro-full .hero__word .ch:nth-child(1) > span { animation-delay: 780ms, 1500ms; }
.intro-full .hero__word .ch:nth-child(2) > span { animation-delay: 806ms, 1500ms; }
.intro-full .hero__word .ch:nth-child(3) > span { animation-delay: 832ms, 1500ms; }
.intro-full .hero__word .ch:nth-child(4) > span { animation-delay: 858ms, 1500ms; }
.intro-full .hero__word .ch:nth-child(5) > span { animation-delay: 884ms, 1500ms; }
.intro-full .hero__word .ch:nth-child(6) > span { animation-delay: 910ms, 1500ms; }
.intro-full .hero__word + .hero__word .ch:nth-child(1) > span { animation-delay: 936ms, 1500ms; }
.intro-full .hero__word + .hero__word .ch:nth-child(2) > span { animation-delay: 962ms, 1500ms; }
.intro-full .hero__word + .hero__word .ch:nth-child(3) > span { animation-delay: 988ms, 1500ms; }
.intro-full .hero__word + .hero__word .ch:nth-child(4) > span { animation-delay: 1014ms, 1500ms; }
.intro-full .hero__word + .hero__word .ch:nth-child(5) > span { animation-delay: 1040ms, 1500ms; }
.intro-full .hero__word + .hero__word .ch:nth-child(6) > span { animation-delay: 1066ms, 1500ms; }
.intro-full .hero__word + .hero__word .ch:nth-child(7) > span { animation-delay: 1092ms, 1500ms; }
.intro-full .hero .ornament__line { animation: in-rule 900ms var(--ease-expo) 1050ms backwards; }
.intro-full .hero .ornament__gem { animation: in-gem 600ms var(--ease-out) 1150ms backwards; }

.intro-full .hero__headline .line > span { animation: in-line 900ms var(--ease-expo) backwards; }
.intro-full .hero__headline .line:nth-child(1) > span { animation-delay: 1180ms; }
.intro-full .hero__headline .line:nth-child(2) > span { animation-delay: 1250ms; }

.intro-full .hero__actions > :nth-child(1) { animation: in-up 800ms var(--ease-out) 1340ms backwards; }
.intro-full .hero__actions > :nth-child(2) { animation: in-up 800ms var(--ease-out) 1410ms backwards; }
.intro-full .site-header .brand { animation: in-down 800ms var(--ease-out) 1380ms backwards; }
.intro-full .nav__pill { animation: in-down 800ms var(--ease-out) 1440ms backwards; }
.intro-full .nav__cta, .intro-full .menu-toggle { animation: in-down 800ms var(--ease-out) 1520ms backwards; }

/* Arriving back on the home page from another page: a short settle, not the full show. */
.intro-short .hero__img { animation: in-img-short 900ms var(--ease-out) backwards; }
.intro-short .hero__title, .intro-short .hero__base { animation: in-up 700ms var(--ease-out) 120ms backwards; }

/* Reduced motion: the same order, as plain cross-fades with no movement (~1.6s).
   These beat the global reduced-motion rule (more specific, also !important). */
@media (prefers-reduced-motion: reduce) {
  .intro-calm .hero__img { animation: in-fade 600ms ease-out backwards !important; }
  .intro-calm .hero__dim { animation: in-calm-dim 1000ms ease-in-out backwards !important; }
  .intro-calm .hero__lights, .intro-calm .hero__pool { animation: in-fade 800ms ease-out 300ms backwards !important; }
  .intro-calm .hero__title { animation: in-fade 800ms ease-out 450ms backwards !important; }
  .intro-calm .hero__intro { animation: in-fade 700ms ease-out 750ms backwards !important; }
  .intro-calm .hero__actions { animation: in-fade 700ms ease-out 900ms backwards !important; }
  .intro-calm .site-header .brand, .intro-calm .nav__pill, .intro-calm .nav__cta, .intro-calm .menu-toggle { animation: in-fade 700ms ease-out 950ms backwards !important; }
}

/* Any interaction finishes the sequence immediately. */
html.intro-done .hero *, html.intro-done .site-header *,
html.intro-done .hero .hero__word .ch > span { animation-duration: 1ms !important; animation-delay: 0ms !important; }

@keyframes in-img { from { opacity: 0; transform: scale(1.06); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes in-img-short { from { opacity: .4; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes in-spot { from { --spot: -45%; opacity: 1; } 22% { --spot: -45%; opacity: .92; } 75% { --spot: 70%; opacity: .7; } to { --spot: 130%; opacity: 0; } }
@keyframes in-calm-dim { from { --spot: -45%; opacity: 1; } to { --spot: -45%; opacity: 0; } }
@keyframes in-lamp { from { opacity: 0; transform: scale(.6); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes in-pool { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes in-rule { from { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes in-gem { from { transform: rotate(-45deg) scale(0); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
@keyframes in-ch { from { transform: translateY(100%); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes sheen { from { background-position: 120% 0, 0 0; } to { background-position: -40% 0, 0 0; } }
@keyframes in-line { from { transform: translateY(105%); } to { transform: none; } }
@keyframes in-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes in-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }

/* Inner pages: a brief settle of the page header on arrival. */
.enter-page .page-hero__inner > * { animation: in-up 800ms var(--ease-out) both; }
.enter-page .page-hero__inner > :nth-child(2) { animation-delay: 70ms; }
.enter-page .page-hero__inner > :nth-child(3) { animation-delay: 140ms; }
.enter-page .page-hero__inner > :nth-child(4) { animation-delay: 210ms; }
.enter-page .page-hero__media img { animation: in-img-short 1200ms var(--ease-out) both; }

/* ---------- Scroll reveals (selected elements only) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1300ms var(--ease-expo); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0); }
[data-stagger] > * { --d: 0ms; }
[data-stagger] > :nth-child(2) { --d: 90ms; } [data-stagger] > :nth-child(3) { --d: 180ms; } [data-stagger] > :nth-child(4) { --d: 270ms; }
[data-stagger] > :nth-child(5) { --d: 360ms; } [data-stagger] > :nth-child(6) { --d: 450ms; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */


.framed { position: relative; }
.framed::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--line-2); border-radius: calc(var(--r-card) + 6px); pointer-events: none; transition: inset 900ms var(--ease-out); }
.framed:hover::before { inset: -8px 8px 8px -8px; }
.media { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-card); background: var(--forest-800); }
/* House photo grade: every photograph is muted, deepened and washed with forest green so stock
   and supplied images sit inside the same lounge palette as image 1. */
.media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) brightness(.86) contrast(1.06); transition: transform var(--t-image) var(--ease-out), filter var(--t-image) var(--ease-out), opacity 700ms var(--ease-out); }
.media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 60, 42, .38), rgba(14, 40, 28, .5) 60%, rgba(5, 15, 10, .75)); mix-blend-mode: multiply; }
.media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(80% 60% at 30% 20%, rgba(242, 199, 121, .12), transparent 60%); mix-blend-mode: soft-light; }
.media--native img { filter: none; }
.media--native::after { background: linear-gradient(180deg, transparent 55%, rgba(5, 15, 10, .5)); }
@media (hover: hover) and (pointer: fine) { .media--native:hover img { filter: brightness(1.04); }
  .media:not(.media--native):hover img { filter: saturate(.9) brightness(.94) contrast(1.06); } }
@media (hover: hover) and (pointer: fine) { .media:hover img, a:hover .media img, .zoom-parent:hover .media img { transform: scale(1.05); } }

img.is-loading { opacity: 0; }

/* Service cards */
.featured { background: linear-gradient(180deg, var(--forest-900), var(--forest-850)); }
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.svc-grid--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) and (min-width: 700px) { .svc-grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .svc-grid, .svc-grid--page { grid-template-columns: 1fr; } }

.svc-card {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  background: linear-gradient(180deg, rgba(20, 45, 33, .55), rgba(11, 26, 18, .9));
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: transform 600ms var(--ease-out), border-color var(--t-hover) var(--ease-out), box-shadow 600ms var(--ease-out), opacity 400ms var(--ease-out);
}
.svc-card::before { /* lamplight that follows the pointer */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease-out);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(242, 199, 121, .1), transparent 45%);
}
.svc-card__media { position: relative; overflow: hidden; aspect-ratio: 1 / .92; background: var(--forest-800); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.92) contrast(1.02); transition: transform var(--t-image) var(--ease-out), filter var(--t-image) var(--ease-out), opacity 700ms var(--ease-out); }
.svc-card__media::before { /* mirror-frame inset that appears on hover */
  content: ""; position: absolute; inset: 14px; z-index: 1; border: 1px solid rgba(242, 199, 121, .55); border-radius: 10px; opacity: 0; transform: scale(1.04); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); pointer-events: none;
}
.svc-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 19, 13, .1), rgba(8, 19, 13, .1) 50%, rgba(11, 26, 18, .85)), linear-gradient(0deg, rgba(29, 74, 54, .18), rgba(29, 74, 54, .18)); pointer-events: none; }
.svc-card__cat { position: absolute; left: 1rem; top: 1rem; z-index: 1; padding: .45rem .75rem; border-radius: 999px; font: 500 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-100); background: rgba(5, 15, 10, .6); backdrop-filter: blur(6px); border: 1px solid var(--line); }
.svc-card__body { display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem 1.4rem 1.5rem; flex: 1; }
.svc-card__title { font-size: 1.75rem; line-height: 1.05; }
.svc-card__desc { font-size: .95rem; color: var(--muted); line-height: 1.6; }
.svc-card__meta { display: flex; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.svc-card__meta > div { flex: 1; display: grid; gap: .2rem; }
.svc-card__meta > div + div { padding-left: 1rem; border-left: 1px solid var(--line); }
.svc-card__meta dt { font: 500 .62rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted-2); }
.svc-card__meta dd { font: 500 1.35rem/1.2 var(--serif); color: var(--gold-200); }
.svc-card__cta { align-self: flex-start; margin-top: .4rem; }
@media (hover: hover) and (pointer: fine) {
  .svc-card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(242, 199, 121, .06); }
  .svc-card:hover::before { opacity: 1; }
  .svc-card:hover .svc-card__media img { transform: scale(1.06); filter: saturate(1) contrast(1.04); }
  .svc-card:hover .svc-card__media::before { opacity: 1; transform: none; }
  .svc-card:hover .svc-card__cta { border-color: var(--line-3); }
  .svc-card:hover .svc-card__cta::before { opacity: 1; }
  .svc-card:hover .arrow__stem { transform: scaleX(1); opacity: 1; }
  .svc-card:hover .arrow__head { transform: none; }
}
.featured__foot { display: flex; justify-content: center; margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Gallery */
.gallery { background: var(--forest-850); }
.gallery__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 16vw, 15rem); gap: clamp(.6rem, 1.2vw, 1rem); }
.gallery__item { position: relative; isolation: isolate; overflow: hidden; margin: 0; border-radius: var(--r-card); background: var(--forest-800); }
.gallery__item:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.gallery__item:nth-child(2) { grid-column: span 5; grid-row: span 2; }
.gallery__item:nth-child(3) { grid-column: span 4; grid-row: span 2; }
.gallery__item:nth-child(4) { grid-column: span 4; grid-row: span 2; }
.gallery__item:nth-child(5) { grid-column: span 4; grid-row: span 2; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms var(--ease-out), filter 900ms var(--ease-out), opacity 700ms var(--ease-out); filter: saturate(.78) brightness(.84) contrast(1.06); }
.gallery__item::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 60, 42, .32), rgba(14, 40, 28, .42)); mix-blend-mode: multiply; transition: opacity 700ms var(--ease-out); }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5, 15, 10, .82)); opacity: .55; transition: opacity 600ms var(--ease-out); pointer-events: none; }
.gallery__item figcaption { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; z-index: 1; display: flex; align-items: center; gap: .75rem; font: 500 .68rem/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ivory); transform: translateY(8px); opacity: .0; transition: transform 600ms var(--ease-out), opacity 500ms var(--ease-out); }
.gallery__item figcaption::before { content: ""; width: 1.5rem; height: 1px; background: var(--gold-200); }
@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover img { transform: scale(1.05); filter: saturate(.92) brightness(.95) contrast(1.06); }
  .gallery__item:hover::before { opacity: .55; }
  .gallery__item:hover::after { opacity: 1; }
  .gallery__item:hover figcaption { transform: none; opacity: 1; }
}
@media (hover: none) { .gallery__item figcaption { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; }
  .gallery__item:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gallery__item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery__item:nth-child(4) { grid-row: span 2; }
  .gallery__item:nth-child(5) { grid-column: span 1; }
}

/* Booking call to action */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(5rem, 11vw, 9rem); text-align: center; }
.cta-band__bg { position: absolute; inset: 0; z-index: -1; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; filter: blur(2px) saturate(1.05); transform: scale(1.04); }
.cta-band__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 50%, rgba(5, 15, 10, .62), rgba(5, 15, 10, .92)); }
.cta-band__frame { position: absolute; inset: clamp(12px, 2vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg); pointer-events: none; z-index: -1; }
.cta-band__inner { display: grid; justify-items: center; gap: 1.5rem; max-width: 46rem; margin-inline: auto; }
.cta-band .lede { max-width: 36rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: .75rem; }
.cta-band__note { font-size: .82rem; color: var(--muted); letter-spacing: .04em; }

.social { display: flex; gap: .6rem; }
.social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ivory-2); transition: color var(--t-ui), border-color var(--t-ui), transform var(--t-ui) var(--ease-out), background-color var(--t-ui); }
.social svg { width: 1.15rem; height: 1.15rem; }
@media (hover: hover) { .social a:hover { color: var(--gold-100); border-color: var(--line-3); transform: translateY(-2px); background: rgba(242, 199, 121, .06); } }

/* ---------- Inner page header ---------- */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + clamp(4rem, 9vw, 8rem)) 0 clamp(3.5rem, 7vw, 6rem); border-bottom: 1px solid var(--line); }
.page-hero__media { position: absolute; inset: 0; z-index: -1; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.page-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 15, 10, .94) 0%, rgba(5, 15, 10, .78) 45%, rgba(5, 15, 10, .45) 100%), linear-gradient(0deg, var(--forest-900), transparent 40%); }
.page-hero--plain { background: radial-gradient(70% 120% at 80% 0%, rgba(29, 74, 54, .45), transparent 65%), var(--forest-900); }
.page-hero__inner { display: grid; gap: 1.4rem; max-width: 46rem; }
.page-hero .lede { max-width: 38rem; }
.crumbs { display: flex; gap: .6rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.crumbs a:hover { color: var(--gold-200); }

/* ---------- Services page ---------- */
.tabs { position: relative; display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 4vw, 3rem); }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; flex: none; display: inline-flex; align-items: baseline; gap: .5rem; min-height: 3.25rem; padding: 0 .1rem; font: 400 .8rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); transition: color var(--t-ui) var(--ease-out); }
.tabs__tab:hover { color: var(--ivory); }
.tabs__tab[aria-selected="true"] { color: var(--gold-100); }
.tabs__count { font: italic 500 .95rem/1 var(--serif); letter-spacing: 0; color: var(--gold-400); }
/* Sliding indicator (tab-indicator study): one line, one transform, 250ms quint. */
.tabs__line { position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--gold-flat); transform-origin: 0 0; pointer-events: none; transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); }
.tabs[data-ready] .tabs__line { transition: transform 250ms var(--ease-out); }
.tabs:not([data-ready]) .tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-flat); }
.svc-card.is-hidden { display: none; }
.svc-card.is-entering { animation: in-up 520ms var(--ease-out) both; }

/* ---------- About ---------- */
.statement { font: 500 clamp(1.8rem, 3.4vw, 3rem)/1.22 var(--serif); color: var(--ivory); max-width: 58rem; text-wrap: balance; }
.statement em { color: var(--gold-200); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.split--rev > :first-child { order: 2; }
.split .media { aspect-ratio: 4 / 4.4; }
.prose { display: grid; gap: 1.25rem; }
.prose p { color: var(--ivory-2); max-width: 36rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } .split .media { aspect-ratio: 4 / 3.2; } }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value { background: var(--forest-850); padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; gap: .9rem; align-content: start; transition: background-color 600ms var(--ease-out); }
.value:hover { background: var(--forest-800); }
.value h3 { font-size: 1.6rem; }
.value p { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr; } }

/* ---------- Visit page ---------- */
.contact-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact-faq__head { display: grid; gap: 1.5rem; align-content: start; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
@media (max-width: 860px) { .contact-faq { grid-template-columns: 1fr; } }

/* FAQ — one shared panel slides to the open question (faq-panel study, simplified). */
.faq { position: relative; display: grid; border-top: 1px solid var(--line); }
.faq__item { position: relative; border-bottom: 1px solid var(--line); }
.faq__q { margin: 0; }
.faq__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; text-align: left; font: 500 1.35rem/1.25 var(--serif); color: var(--ivory); transition: color var(--t-ui); }
.faq__btn:hover { color: var(--gold-100); }
.faq__icon { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 1px solid var(--line-2); border-radius: 50%; transition: transform 300ms var(--ease-out), border-color var(--t-ui); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: .65rem; height: 1px; background: var(--gold-200); translate: -50% -50%; transition: transform 300ms var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__btn[aria-expanded="true"] .faq__icon { transform: rotate(180deg); border-color: var(--line-3); }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-out); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 3rem 1.5rem 0; color: var(--muted); opacity: 0; transform: translateY(-4px); transition: opacity 260ms var(--ease-out), transform 300ms var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a p { opacity: 1; transform: none; transition-delay: 60ms; }
.no-js .faq__a { grid-template-rows: 1fr; }
.no-js .faq__a p { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-950); border-top: 1px solid var(--line); padding-top: clamp(4rem, 7vw, 6rem); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
.site-footer__brand { display: grid; gap: 1.4rem; align-content: start; }
.site-footer__brand p { max-width: 22rem; color: var(--muted); font-size: .95rem; }
.site-footer__h { font: 500 .7rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 1.25rem; }
.site-footer address { color: var(--ivory-2); margin-bottom: .75rem; }
.site-footer__contact { display: grid; gap: .5rem; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); padding-block: 1.75rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted-2); }
.site-footer__fine { display: flex; gap: .75rem; }
.site-footer__fine a:hover { color: var(--gold-200); }
.staff-link { color: var(--muted-2); opacity: .7; }
@media (max-width: 960px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   FORMS (booking, login)
   ========================================================================== */
.field { display: grid; gap: .5rem; }
.field__label { font: 500 .72rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-2); display: flex; justify-content: space-between; gap: 1rem; }
.field__opt { letter-spacing: .08em; text-transform: none; color: var(--muted-2); font-weight: 400; }
.input {
  width: 100%; min-height: 3.25rem; padding: .85rem 1rem; font-size: 1rem; color: var(--ivory);
  background: rgba(5, 15, 10, .55); border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color var(--t-ui) var(--ease-out), box-shadow var(--t-ui) var(--ease-out), background-color var(--t-ui);
}
textarea.input { min-height: 7.5rem; resize: vertical; line-height: 1.6; }
.input::placeholder { color: var(--muted-2); }
.input:hover { border-color: rgba(242, 199, 121, .5); }
.input:focus { outline: none; border-color: var(--gold-200); box-shadow: 0 0 0 3px rgba(242, 199, 121, .14); background: rgba(5, 15, 10, .75); }
.field.has-error .input { border-color: var(--danger); }
.field__error { font-size: .85rem; color: var(--danger); display: flex; gap: .4rem; align-items: center; min-height: 0; }
.field__error:empty { display: none; }
.field__hint { font-size: .82rem; color: var(--muted-2); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.notice { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: rgba(204, 155, 83, .06); font-size: .92rem; color: var(--ivory-2); }
.notice svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; color: var(--gold-200); fill: none; stroke: currentColor; stroke-width: 1.5; }
.notice--error { border-color: rgba(229, 154, 134, .5); background: rgba(229, 154, 134, .07); }
.notice--error svg { color: var(--danger); }

/* ==========================================================================
   BOOKING
   ========================================================================== */


/* Calendar + times */
.cal { border: 1px solid var(--line); background: rgba(11, 26, 18, .7); padding: 1rem 1rem 1.1rem; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal__title { font: 600 1.45rem/1 var(--serif); color: var(--ivory); }
.cal__nav { display: flex; gap: .35rem; }
.icon-btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-200); transition: background-color 190ms var(--ease-out), border-color 190ms, transform var(--t-press) var(--ease-out); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .arrow__stem { transform-origin: right center; }
.icon-btn--next .arrow__stem { transform-origin: left center; }
.icon-btn--prev .arrow__head { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover:not([disabled]) { background: rgba(242, 199, 121, .08); border-color: var(--line-3); } .icon-btn--prev:hover:not([disabled]) .arrow__head { transform: none; } }
.icon-btn:active:not([disabled]) { transform: scale(.96); }
.icon-btn[disabled] { opacity: .3; cursor: default; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal__dow { font: 500 .64rem/2.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); text-align: center; }
.cal__day { position: relative; aspect-ratio: 1; min-height: 2.75rem; display: grid; place-items: center; border-radius: 50%; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--ivory); transition: background-color 200ms var(--ease-out), color 200ms, transform var(--t-press) var(--ease-out); }
.cal__day::after { content: ""; position: absolute; bottom: 18%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold-400); opacity: 0; transition: opacity 200ms; }
.cal__day.has-slots::after { opacity: .9; }
.cal__day[disabled] { color: rgba(168, 162, 143, .35); cursor: default; text-decoration: none; }
.cal__day.is-full { color: rgba(168, 162, 143, .45); text-decoration: line-through; text-decoration-color: rgba(204, 155, 83, .4); }
.cal__day.is-today { box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) { .cal__day:not([disabled]):not([aria-pressed="true"]):hover { background: rgba(242, 199, 121, .1); } }
.cal__day:active:not([disabled]) { transform: scale(.94); }
.cal__day[aria-pressed="true"] { background: var(--gold-flat); color: var(--forest-950); font-weight: 500; }
.cal__day[aria-pressed="true"]::after { background: var(--forest-950); }
.cal__legend { display: flex; gap: 1.25rem; margin-top: .9rem; font-size: .78rem; color: var(--muted-2); }
.cal__legend span { display: inline-flex; gap: .45rem; align-items: center; }
.cal__legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-400); }

.times { display: grid; gap: 1.25rem; align-content: start; min-height: 12rem; }
.times__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.times__date { font: 600 1.45rem/1.1 var(--serif); color: var(--ivory); }
.times__zone { font-size: .78rem; color: var(--muted-2); white-space: nowrap; }
.times__group { display: grid; gap: .6rem; }
.times__group-label { font: 500 .66rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-300); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .45rem; }
.slot { position: relative; min-height: 2.9rem; border: 1px solid var(--line-2); font-size: .92rem; font-variant-numeric: tabular-nums; color: var(--ivory); background: rgba(11, 26, 18, .6); transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms, transform var(--t-press) var(--ease-out); }
@media (hover: hover) { .slot:hover:not([disabled]):not([aria-pressed="true"]) { border-color: var(--gold-200); background: rgba(242, 199, 121, .08); } }
.slot:active:not([disabled]) { transform: scale(.96); }
.slot[aria-pressed="true"] { background: var(--gold-flat); color: var(--forest-950); border-color: transparent; font-weight: 500; }
.slot[disabled] { color: rgba(168, 162, 143, .4); border-style: dashed; border-color: rgba(204, 155, 83, .14); text-decoration: line-through; cursor: not-allowed; background: transparent; }
.slots .slot { animation: in-up 380ms var(--ease-out) both; }
.slot-skel { min-height: 2.9rem; background: linear-gradient(90deg, rgba(20, 45, 33, .5) 0%, rgba(40, 80, 60, .45) 50%, rgba(20, 45, 33, .5) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.times__empty { padding: 1.5rem; border: 1px dashed var(--line-2); color: var(--muted); font-size: .95rem; text-align: center; }

/* Details form */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Review */
.review { border: 1px solid var(--line); background: rgba(11, 26, 18, .7); }
.review__row { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1rem; align-items: baseline; padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--line); }
.review__row:last-child { border-bottom: 0; }
.review dt { font: 500 .68rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.review dd { color: var(--ivory); overflow-wrap: anywhere; }
.review dd small { display: block; color: var(--muted); font-size: .85rem; }
.review__edit { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-200); min-height: 2.75rem; padding-inline: .25rem; }
@media (max-width: 560px) { .review__row { grid-template-columns: 1fr auto; } .review__row dt { grid-column: 1 / -1; } }


/* Confirmation */
.confirm__seal { width: 5.5rem; height: 5.5rem; }
.confirm__seal circle { fill: none; stroke: var(--gold-300); stroke-width: 1.2; stroke-dasharray: 202; stroke-dashoffset: 202; animation: draw 1000ms var(--ease-out) 100ms forwards; }
.confirm__seal path { fill: none; stroke: var(--gold-100); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 600ms var(--ease-out) 800ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.confirm__ref { display: inline-grid; gap: .35rem; padding: .9rem 1.6rem; border: 1px dashed var(--line-3); }
.confirm__ref span { font: 500 .66rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.confirm__ref strong { font: 600 1.7rem/1 var(--serif); letter-spacing: .12em; color: var(--gold-100); }
.status-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem; border-radius: 99px; font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-100); background: rgba(204, 155, 83, .12); border: 1px solid var(--line-2); }
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-200); animation: pulse 2s var(--ease-in-out) infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ==========================================================================
   BOOK PILL (button reference): gold capsule + dark disc with a ↗ arrow.
   On hover the arrow leaves through the top-right and returns from the bottom-left.
   ========================================================================== */
.btn-book {
  --h: 3.15rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .95rem; height: var(--h); padding: 0 5px 0 1.55rem; border-radius: 999px;
  font: 600 .76rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; color: var(--forest-950);
  background: var(--gold-flat);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, .6), inset 0 -1px 0 rgba(90, 50, 10, .35), 0 8px 22px -12px rgba(204, 155, 83, .7);
  user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-ui) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.btn-book::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-sheen); background-size: 250% 100%; background-position: 130% 0; transition: background-position 900ms var(--ease-out); }
.btn-book__disc { flex: none; display: grid; place-items: center; width: calc(var(--h) - 10px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--forest-950); color: var(--gold-200); box-shadow: inset 0 0 0 1px rgba(242, 199, 121, .18); transition: background-color var(--t-ui) var(--ease-out); }
.btn-book__disc svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-book--sm { --h: 2.7rem; padding-left: 1.15rem; gap: .75rem; font-size: .68rem; }
.btn-book--block { display: flex; width: 100%; justify-content: space-between; --h: 3.4rem; padding-left: 1.6rem; }
/* Card buttons (service and barber cards): compact, full card width, label centred, disc on the right. */
.btn-book--card { --h: 2.6rem; display: grid; grid-template-columns: calc(var(--h) - 10px) 1fr calc(var(--h) - 10px); align-items: center; align-self: stretch; width: 100%; padding: 0 5px; gap: .5rem; font-size: .68rem; }
.btn-book--card .btn-book__label { grid-column: 2; text-align: center; }
.btn-book--card .btn-book__disc { grid-column: 3; }
@keyframes arrow-through { 0% { transform: none; } 45% { transform: translate(140%, -140%); } 46% { transform: translate(-140%, 140%); opacity: 0; } 50% { opacity: 1; } 100% { transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .btn-book:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .6), inset 0 -1px 0 rgba(90, 50, 10, .35), 0 14px 30px -12px rgba(224, 176, 102, .7); }
  .btn-book:hover::before { background-position: -30% 0; }
  .btn-book:hover .btn-book__disc svg { animation: arrow-through 560ms var(--ease-out); }
}
.btn-book:focus-visible .btn-book__disc svg { animation: arrow-through 560ms var(--ease-out); }
.btn-book:active { transform: scale(.97); transition-duration: var(--t-press); }

/* Placeholder text — missing business details are shown, never invented. */
.ph { font-style: italic; color: var(--muted); border-bottom: 1px dashed currentColor; padding-bottom: 1px; }

.mini-rating { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); }
.mini-rating .star { width: 1rem; height: 1rem; }
.mini-rating strong { color: var(--ivory); font-weight: 500; margin-right: .1rem; }

/* ==========================================================================
   MEET OUR BARBERS
   ========================================================================== */
.barbers { background: radial-gradient(60% 70% at 100% 0%, rgba(29, 74, 54, .3), transparent 70%), var(--forest-900); }
.barber-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (max-width: 1100px) { .barber-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  .barber-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80%, 20rem);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .5rem; scroll-padding-inline: var(--gutter);
  }
  .barber-grid::-webkit-scrollbar { display: none; }
  .barber { scroll-snap-align: start; }
}
.barber {
  --mx: 50%; --my: 0%;
  position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(20, 45, 33, .55), rgba(11, 26, 18, .95));
  transition: transform 600ms var(--ease-out), border-color var(--t-hover) var(--ease-out), box-shadow 600ms var(--ease-out);
}
.barber::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 500ms var(--ease-out); background: radial-gradient(380px circle at var(--mx) var(--my), rgba(242, 199, 121, .1), transparent 45%); }
.barber__media { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--forest-800); }
.barber__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03); transition: transform var(--t-image) var(--ease-out), filter var(--t-image) var(--ease-out), opacity 700ms var(--ease-out); }
.barber__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(11, 26, 18, .92)); }
.barber__loc { position: absolute; left: .9rem; top: .9rem; z-index: 1; padding: .45rem .75rem; border-radius: 999px; font: 500 .6rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-100); background: rgba(5, 15, 10, .62); backdrop-filter: blur(6px); border: 1px solid var(--line); }
.barber__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .6rem; padding: 0 1.3rem 1.35rem; margin-top: -2.6rem; flex: 1; }
.barber__spec { font: 500 .66rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-300); }
.barber__name { font-size: 1.9rem; line-height: 1; }
.barber__bio { font-size: .92rem; line-height: 1.55; color: var(--muted); }
.barber .btn-book:not(.btn-book--card) { align-self: flex-start; }
.barber__body > .btn-book { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .barber:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .85); }
  .barber:hover::before { opacity: 1; }
  .barber:hover .barber__media img { transform: scale(1.05); filter: saturate(1) contrast(1.05); }
}
.barber:has(.btn-book:active), .svc-card:has(.btn-book:active) { transform: scale(.99); transition-duration: var(--t-press); }
.barbers__empty { padding: 2rem; border: 1px dashed var(--line-2); border-radius: 18px; color: var(--muted); text-align: center; }

/* ==========================================================================
   LOCATION SHOWCASE (location reference): ivory band, alternating map + details.
   ========================================================================== */
.locations { --ink: #17241b; --ink-2: #4b5146; --rule: rgba(23, 36, 27, .14); --bronze: #8a5a1f;
  background: radial-gradient(70% 60% at 0% 0%, #fbf5e8, transparent 70%), var(--ivory); color: var(--ink-2); }
.locations .eyebrow { color: var(--bronze); }
.locations .eyebrow::before { background: linear-gradient(90deg, transparent, var(--bronze)); }
.locations .h2 { color: var(--ink); }
.locations .h2 em { color: var(--bronze); }
.locations .link-line { color: var(--ink); }
.locations .link-line:hover, .locations .link-line:focus-visible { color: var(--bronze); }
.locations .ph { color: #8b8167; }
.locations :focus-visible { outline-color: var(--bronze); }
.loc-list { display: grid; gap: clamp(4rem, 9vw, 8rem); }
.loc { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5.5vw, 5.5rem); align-items: center; scroll-margin-top: calc(var(--nav-h) + 2rem); }
.loc--flip .loc__map { order: 2; }
@media (max-width: 900px) { .loc { grid-template-columns: 1fr; } .loc--flip .loc__map { order: 0; } }

.map { --px: 50%; --py: 50%; position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 24px; background: #0b1a12;
  box-shadow: 0 50px 70px -45px rgba(8, 19, 13, .7), 0 0 0 1px rgba(23, 36, 27, .08); }
.map--1 { --px: 51.5%; --py: 47%; } .map--2 { --px: 45%; --py: 53%; } .map--3 { --px: 55%; --py: 48%; }
.map img { width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease-out), opacity 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .loc:hover .map img { transform: scale(1.03); } }
.map__badge { position: absolute; left: 1rem; top: 1rem; padding: .5rem .85rem; border-radius: 999px; font: 500 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-100); background: rgba(5, 15, 10, .66); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.map__pin { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; }
.map__head { position: absolute; left: -1.5rem; top: calc(-1.5rem - 2.15rem); width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--gold-flat); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .6), 0 10px 18px -6px rgba(0, 0, 0, .7); }
.map__head svg { width: 1.3rem; height: 1.3rem; transform: rotate(45deg); fill: none; stroke: var(--forest-950); stroke-width: 1.7; stroke-linecap: round; }
.map__label { position: absolute; left: 0; top: .8rem; transform: translateX(-50%); padding: .45rem .8rem; border-radius: 999px; white-space: nowrap; font: 600 .6rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-100); background: rgba(5, 15, 10, .82); border: 1px solid var(--line-2); }
.map__pulse { position: absolute; left: -1.1rem; top: -.4rem; width: 2.2rem; height: .8rem; border-radius: 50%; background: rgba(242, 199, 121, .45); animation: pin-pulse 2.4s var(--ease-out) infinite; }
@keyframes pin-pulse { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.js .loc[data-reveal] { opacity: 1; transform: none; }
.js .loc[data-reveal] .map__head { translate: 0 -28px; opacity: 0; transition: translate 900ms var(--ease-expo) 350ms, opacity 400ms var(--ease-out) 350ms; }
.js .loc[data-reveal] .map__label { opacity: 0; transition: opacity 500ms var(--ease-out) 750ms; }
.js .loc[data-reveal] .loc__body > * { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.js .loc[data-reveal].is-in .map__head, .js .loc[data-reveal].is-in .map__label { translate: none; opacity: 1; }
.js .loc[data-reveal].is-in .loc__body > * { opacity: 1; transform: none; }
.js .loc[data-reveal].is-in .loc__body > :nth-child(2) { transition-delay: 60ms; } .js .loc[data-reveal].is-in .loc__body > :nth-child(3) { transition-delay: 120ms; }
.js .loc[data-reveal].is-in .loc__body > :nth-child(4) { transition-delay: 180ms; } .js .loc[data-reveal].is-in .loc__body > :nth-child(n+5) { transition-delay: 240ms; }

.loc__body { display: grid; gap: 1.4rem; align-content: center; }
.loc__count, .loc__sub { display: flex; align-items: center; gap: .9rem; font: 500 .74rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); }
.slash { width: 1px; height: 1.1em; background: currentColor; transform: rotate(24deg); }
.loc__name { font: 600 clamp(2.5rem, 4.6vw, 4.2rem)/.95 var(--serif); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.loc__details { display: grid; border-top: 1px solid var(--rule); }
.loc__details > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.loc__details dt, .loc__hours dt { font: 500 .66rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.loc__details dd { color: var(--ink); overflow-wrap: anywhere; }
.rating { display: flex; align-items: center; gap: 1rem; }
.rating__num { font: 600 clamp(3.6rem, 6vw, 4.8rem)/.9 var(--serif); letter-spacing: -.01em;
  background: linear-gradient(180deg, #e9bd70 0%, #c58f47 45%, #8a5a1f 80%, #b98339 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rating__num.is-empty { background: none; color: rgba(23, 36, 27, .28); }
.rating .star { width: 2rem; height: 2rem; filter: drop-shadow(0 2px 3px rgba(118, 68, 17, .3)); }
.rating__rule { width: 1px; height: 3rem; background: var(--rule); margin-inline: .25rem; }
.rating__label { font: 500 .66rem/1.6 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); }
.rating__src { margin-top: -.8rem; font-size: .85rem; color: var(--ink-2); }
.loc__hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin-top: -.4rem; }
.loc__hours > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: .92rem; }
.loc__hours dd { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.loc__hours .is-today dt { color: var(--bronze); display: inline-flex; align-items: center; gap: .45rem; }
.loc__hours .is-today dt::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-400); }
@media (max-width: 520px) { .loc__hours { grid-template-columns: 1fr; } .loc__details > div { grid-template-columns: 1fr; gap: .3rem; } }
.loc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .4rem; }

/* ---------- Footer lists ---------- */
.site-footer__list { display: grid; gap: .85rem; }
.site-footer__list span { display: block; margin-top: .2rem; font-size: .85rem; color: var(--muted); }
.site-footer__cta { align-self: start; }

/* ==========================================================================
   BOOKING PANEL — a modal <dialog> that slides in from the right.
   ========================================================================== */
html.bk-open { overflow: hidden; padding-right: var(--sbw, 0px); }
html.bk-open .site-header { padding-right: var(--sbw, 0px); }
.bk {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--ivory-2); overflow: hidden;
}
.bk::backdrop { background: rgba(2, 7, 4, .58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.bk[open]::backdrop { animation: bk-fade 420ms var(--ease-out) both; }
.bk.is-closing::backdrop { animation: bk-fade 320ms var(--ease-in-out) reverse both; }
.bk__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 35rem); display: flex; flex-direction: column;
  background: radial-gradient(90% 40% at 100% 0%, rgba(29, 74, 54, .5), transparent 70%), var(--forest-900);
  border-left: 1px solid var(--line-2); border-radius: var(--r-lg) 0 0 var(--r-lg); overflow: hidden; box-shadow: -40px 0 80px -30px rgba(0, 0, 0, .8);
}
.bk[open] .bk__panel { animation: bk-in 560ms var(--ease-expo) both; }
.bk.is-closing .bk__panel { animation: bk-out 340ms var(--ease-in-out) both; }
@keyframes bk-in { from { transform: translateX(104%); } to { transform: none; } }
@keyframes bk-out { from { transform: none; } to { transform: translateX(104%); } }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }

.bk__head { padding: 1.1rem clamp(1.1rem, 4vw, 1.75rem) 0; display: grid; gap: .55rem; }
.bk__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bk__step { font: 500 .66rem/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-300); }
.bk__close { flex: none; width: 2.75rem; height: 2.75rem; margin-right: -.4rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--ivory); transition: background-color var(--t-ui), border-color var(--t-ui), transform var(--t-ui) var(--ease-out); }
.bk__close svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (hover: hover) { .bk__close:hover { background: rgba(242, 199, 121, .08); border-color: var(--line-3); transform: rotate(90deg); } }
.bk__title { font-size: clamp(1.9rem, 5vw, 2.4rem); line-height: 1.05; }
.bk__title:focus { outline: none; }
.bk__progress { height: 2px; margin-top: .55rem; background: var(--line); overflow: hidden; }
.bk__progress span { display: block; height: 100%; background: var(--gold-flat); transform-origin: 0 50%; transform: scaleX(0); transition: transform 500ms var(--ease-out); }

.bk__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.4rem clamp(1.1rem, 4vw, 1.75rem) 1.5rem; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.bk__loading { display: flex; align-items: center; gap: .75rem; color: var(--muted); }
.bk__loading .btn__spinner { display: block; }
.bk-step { display: grid; gap: 1.25rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.bk-step.is-in-fwd { animation: bk-step-fwd 460ms var(--ease-out) both; }
.bk-step.is-in-back { animation: bk-step-back 460ms var(--ease-out) both; }
@keyframes bk-step-fwd { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes bk-step-back { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.bk__error { margin-top: 1rem; font-size: .9rem; color: var(--danger); }
.bk__error:empty { display: none; }
.bk-pending { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; font-size: .88rem; color: var(--muted); }

.bk__foot { border-top: 1px solid var(--line); padding: .9rem clamp(1.1rem, 4vw, 1.75rem) calc(.9rem + env(safe-area-inset-bottom)); display: grid; gap: .8rem; background: rgba(5, 15, 10, .5); }
.bk__sum { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.6rem; }
.bk__sum span { padding: .35rem .65rem; border-radius: 999px; font-size: .76rem; line-height: 1.1; color: var(--ivory-2); border: 1px solid var(--line); background: rgba(20, 45, 33, .5); animation: in-fade 300ms var(--ease-out) both; }
.bk__sum .is-empty { border-style: dashed; color: var(--muted-2); background: none; }
.bk__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bk__nav [data-bk-next] { margin-left: auto; min-width: 10rem; border-radius: 999px; }
.bk__foot.is-done .bk__sum { display: none; }

/* Options (locations, barbers, services) */
.bk-opts { display: grid; gap: .55rem; }
.opt-group { margin: 1rem 0 .15rem; font: 500 .66rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-300); }
.opt-group:first-child { margin-top: 0; }
.opt__avail { display: flex; align-items: center; gap: .45rem; margin-top: .2rem; font-size: .78rem; line-height: 1.2; color: var(--ivory-2); }
.opt__avail::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
.is-free-today .opt__avail { color: var(--success); } .is-free-today .opt__avail::before { background: var(--success); box-shadow: 0 0 8px rgba(159, 207, 168, .6); }
.is-later .opt__avail { color: var(--gold-200); } .is-later .opt__avail::before { background: var(--gold-400); }
.is-booked-out .opt__avail { color: var(--muted); } .is-booked-out .opt__avail::before { background: transparent; border: 1px solid var(--muted-2); }
.opt {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .95rem; align-items: center;
  padding: .7rem 2.6rem .7rem .7rem; border-radius: 14px; border: 1px solid var(--line); background: rgba(15, 34, 25, .55); cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; appearance: none; }
.opt__num { width: 3rem; text-align: center; font: italic 500 1.5rem/1 var(--serif); color: var(--gold-300); }
.opt__avatar, .opt__thumb { width: 3.4rem; height: 3.4rem; object-fit: cover; border-radius: 50%; }
.opt__thumb { border-radius: 10px; }
.opt__avatar--any { display: grid; place-items: center; background: rgba(204, 155, 83, .1); border: 1px solid var(--line-2); }
.opt__avatar--any svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--gold-200); stroke-width: 1.4; stroke-linecap: round; }
.opt__text { display: grid; gap: .15rem; min-width: 0; }
.opt__name { font: 600 1.25rem/1.15 var(--serif); color: var(--ivory); }
.opt__meta { font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt__price { font: 500 1.15rem/1 var(--serif); color: var(--gold-200); white-space: nowrap; }
.opt:not(:has(.opt__price)) { grid-template-columns: auto minmax(0, 1fr); }
.opt__check { position: absolute; right: .9rem; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -.6rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color var(--t-ui), border-color var(--t-ui); }
.opt__check svg { width: .7rem; height: .7rem; fill: none; stroke: var(--forest-950); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; transition: stroke-dashoffset 300ms var(--ease-out) 60ms; }
@media (hover: hover) { .opt:hover { border-color: var(--line-2); background: rgba(20, 45, 33, .75); } }
.opt:active { transform: scale(.99); }
.opt:has(input:checked) { border-color: var(--gold-300); background: linear-gradient(110deg, rgba(204, 155, 83, .15), rgba(20, 45, 33, .75) 65%); }
.opt:has(input:checked) .opt__check { background: var(--gold-flat); border-color: transparent; }
.opt:has(input:checked) .opt__check svg { stroke-dashoffset: 0; }
.opt:has(input:focus-visible) { outline: 2px solid var(--gold-200); outline-offset: 2px; }

/* Date & time inside the panel */
.bk .cal { border-radius: 14px; }
.bk .times { min-height: 0; }
.times__notice { padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(204, 155, 83, .08); font-size: .88rem; color: var(--gold-100); }
.bk .slots { grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); }
.bk .slot { border-radius: 999px; }
.bk .times__empty { border-radius: 12px; }
.cal__grid.is-loading .cal__day:not([disabled]) { opacity: .6; }

.bk .review { border-radius: 14px; }
.bk .review__row { grid-template-columns: 6.5rem minmax(0, 1fr) auto; padding: .9rem 1rem; }
@media (max-width: 480px) { .bk .review__row { grid-template-columns: 1fr auto; } .bk .review__row dt { grid-column: 1 / -1; } }

.bk-done { justify-items: center; text-align: center; gap: 1.1rem; padding-top: .5rem; }
.bk-done .review { width: 100%; text-align: left; }
.bk-done__lead { max-width: 28rem; color: var(--ivory-2); }
.bk-done__lead strong { color: var(--ivory); font-weight: 500; }
.bk-done > :not(.confirm__seal) { animation: in-up 600ms var(--ease-out) both; }
.bk-done > :nth-child(2) { animation-delay: 250ms; } .bk-done > :nth-child(3) { animation-delay: 330ms; }
.bk-done > :nth-child(4) { animation-delay: 410ms; } .bk-done > :nth-child(5) { animation-delay: 490ms; }

@media (max-width: 560px) {
  .bk__panel { width: 100%; border-left: 0; border-radius: 0; }
}

/* /booking (fallback page — the panel opens on top of it) */
.booking-page { min-height: 70svh; display: grid; align-content: center; justify-items: center; gap: 1.4rem; text-align: center; padding: calc(var(--nav-h) + 4rem) var(--gutter) 5rem;
  background: radial-gradient(60% 60% at 50% 30%, rgba(29, 74, 54, .45), transparent 70%), var(--forest-900); }
.booking-page .lede { max-width: 32rem; }

/* ---------- Staff login ---------- */
.login { min-height: 100svh; display: grid; place-items: center; padding: 2rem var(--gutter); background: radial-gradient(60% 60% at 50% 30%, rgba(29, 74, 54, .5), transparent 70%), var(--forest-950); }
.login__card { width: min(100%, 25rem); display: grid; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 2.5rem); border: 1px solid var(--line-2); background: rgba(8, 19, 13, .9); animation: in-up 700ms var(--ease-out) both; }
.login__brand { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.login__brand .brand__mark { width: 40px; height: 52px; }
.login__brand h1 { font-size: 1.9rem; }
.login__brand p { font-size: .9rem; color: var(--muted); }
.login__back { text-align: center; font-size: .85rem; color: var(--muted); }

/* ---------- 404 ---------- */
.notfound { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 3rem) var(--gutter) 4rem; }
.notfound__inner { display: grid; justify-items: center; gap: 1.4rem; max-width: 34rem; }
.notfound__num { font: 600 clamp(5rem, 14vw, 9rem)/1 var(--serif); }

/* ==========================================================================
   PAGE TRANSITIONS — cross-document View Transitions (progressive enhancement)
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 260ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease-out) 60ms both; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); filter: blur(2px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   REDUCED MOTION — content appears immediately; only colour/opacity changes remain.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  .btn, .svc-card, .media img, .gallery__item img, .svc-card__media img, .opt, .barber, .barber__media img, .btn-book, .slot, .cal__day, .icon-btn { transition-property: color, background-color, border-color, opacity, box-shadow !important; }
  .btn:hover, .btn:active, .svc-card:hover { transform: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
  .js .loc[data-reveal] .loc__body > *, .js .loc[data-reveal] .map__head, .js .loc[data-reveal] .map__label { opacity: 1; transform: none; translate: none; }
  .map__pulse { display: none; }
  .swap > span { transition: opacity 150ms linear !important; filter: none !important; transform: none !important; }
  .swap > span:last-child { opacity: 0; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Utilities */
.section--flush { padding-top: 0; }
.statement { margin-top: 1.5rem; }
.faq-title { margin: 1.25rem 0 2rem; }
.page-hero--compact { padding-top: calc(var(--nav-h) + clamp(2.25rem, 5vw, 4rem)); padding-bottom: clamp(2rem, 3.5vw, 3rem); }
.page-hero--compact .h1 { font-size: clamp(2.4rem, 4.4vw, 4rem); }