/* ============================================================
   Dr Natalie Aesthetics — Gibraltar

   Palette and type are hers (Brand Guidelines sections 2, 4, 5).
   The RATIO is not: chocolate is the dominant surface here and
   cream is the relief, which is the inverse of the pack's 60/25
   suggestion.

   The reasoning, if it ever needs defending: her own contrast
   table gives gold 2.1:1 on cream (fails, decorative only) and
   5.0:1 on chocolate (passes). A cream-dominant site therefore
   can't use gold for anything that matters, which is why the pack
   had to restrict it to hairlines. Going dark turns gold back into
   a usable colour — light, gradient and glow rather than a 1px
   rule. Nothing in the contrast table is broken by this; the half
   of it that was unusable becomes the half we build on.

   Palette   chocolate #4A3428 · cream #F7F2EB · gold #C6A66B
             deep gold #A88044 · taupe #B8A89B · charcoal #2B2B2B
             interface bronze #816C46 (adopted)
   Type      Cormorant Garamond SemiBold · Lato
   Signature The leader line, after the labelled anatomy prints on
             the clinic wall, plus the knockout hero.
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- section two, verbatim --- */
  --brown: #4A3428;
  --cream: #F7F2EB;
  --gold: #C6A66B;
  --deep-gold: #A88044;
  --taupe: #B8A89B;
  --charcoal: #2B2B2B;
  --bronze: #816C46;

  /* --- shades and tints of the above; no new hues --- */
  --brown-deep: #3B2921;
  --brown-deepest: #2E2017;
  --brown-lift: #5A4234;
  --cream-sink: #F0E9DF;
  --gold-pale: #D9BF93;          /* a tint of --gold, for light effects */
  --charcoal-soft: rgba(43, 43, 43, 0.78);
  --ink-warm: #3D3027;           /* charcoal walked toward the chocolate */

  --rule-gold: rgba(198, 166, 107, 0.55);
  --rule-taupe: rgba(184, 168, 155, 0.5);
  --rule-brown: rgba(74, 52, 40, 0.18);

  --on-brown: #F7F2EB;
  --on-brown-soft: rgba(247, 242, 235, 0.74);
  --on-brown-faint: rgba(247, 242, 235, 0.45);
  --rule-on-brown: rgba(198, 166, 107, 0.4);

  /* --- gold as light --- */
  --gold-grad: linear-gradient(140deg, #EBD9B4 0%, var(--gold-pale) 26%, var(--gold) 62%, var(--deep-gold) 100%);
  --gold-grad-deep: linear-gradient(120deg, var(--gold-pale) 0%, var(--gold) 40%, var(--deep-gold) 78%, #8A6B3C 100%);
  --glow-gold: 0 0 18px rgba(198, 166, 107, 0.38), 0 0 52px rgba(198, 166, 107, 0.18);
  --glow-gold-lift: 0 0 24px rgba(198, 166, 107, 0.55), 0 0 68px rgba(198, 166, 107, 0.28);

  /* film grain, so a flat fill reads as paper and light rather than
     a dead colour. Desaturated fractal noise, tiled at a fixed size. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='1' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='saturate' values='0' result='d'/%3E%3CfeComponentTransfer in='d'%3E%3CfeFuncR type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncG type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncB type='linear' slope='1.7' intercept='-0.35'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size: 220px 220px;

  /* Section surface: a flat chocolate base with two soft gold light pools.
     Deliberately NO vertical ramp — adjacent dark sections would each
     restart it and put a hard step at every boundary. */
  --surface-dark:
    radial-gradient(ellipse 95% 75% at 12% -5%, rgba(214, 182, 122, 0.2) 0%, transparent 62%),
    radial-gradient(ellipse 90% 70% at 90% 104%, rgba(198, 166, 107, 0.15) 0%, transparent 64%),
    var(--brown-deep);

  /* Same base tone as --surface-dark on purpose: only the light moves.
     Changing the base as well put a hard line at the boundary. */
  --surface-dark-alt:
    radial-gradient(ellipse 88% 68% at 84% -6%, rgba(198, 166, 107, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse 96% 78% at 8% 108%, rgba(214, 182, 122, 0.18) 0%, transparent 62%),
    var(--brown-deep);

  /* the hero stands alone at full height, so it keeps the ramp */
  --surface-hero:
    radial-gradient(ellipse 72% 62% at 12% -10%, rgba(214, 182, 122, 0.26) 0%, transparent 58%),
    radial-gradient(ellipse 66% 58% at 90% 106%, rgba(198, 166, 107, 0.2) 0%, transparent 60%),
    linear-gradient(168deg, var(--brown) 0%, var(--brown-deepest) 62%, #241A12 100%);

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Lato', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --hairline: 1px solid var(--rule-taupe);

  --sp-vast: clamp(6rem, 13vh, 9.5rem);
  --sp-lg: clamp(4rem, 9vw, 7rem);
  --sp-md: clamp(2.75rem, 5.5vw, 4.5rem);
  --gutter: clamp(1.4rem, 6vw, 4.5rem);
  --measure: 34rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  --header-h: 104px;

  /* Back-compat aliases for the private /admin and /edit surfaces,
     which still use the old variable names. Not for new public CSS. */
  --ink: var(--brown);
  --ink-soft: var(--charcoal-soft);
  --beige: var(--cream-sink);
  --beige-deep: #E6DCCE;
  --bronze-soft: var(--taupe);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { background: var(--cream); }

body {
  background: transparent;
  color: var(--charcoal);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 1100px) { body { font-size: 1.125rem; } }

/* grain over the cream ground; the dark sections paint their own over
   the top of this, so it never doubles up */
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: var(--grain);
  background-size: var(--grain-size);
  mix-blend-mode: multiply;
  opacity: 0.16;
  pointer-events: none;
}

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

a { color: inherit; }

::selection { background: var(--gold); color: var(--brown); }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brown);
  line-height: 1.14;
  text-wrap: balance;
}

/* ============================================================
   THE DARK SURFACE
   Chocolate is the default here, not the accent. Grain sits over
   every dark field so it reads as material.
   ============================================================ */

.on-brown {
  position: relative;
  isolation: isolate;
  background: var(--surface-dark);
  color: var(--on-brown);
}

.on-brown::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: var(--grain);
  background-size: var(--grain-size);
  mix-blend-mode: overlay;
  opacity: 0.3;
  pointer-events: none;
}

/* Two dark sections in a row would otherwise stack the identical light
   pattern and read as a repeating tile, so the second of any run mirrors
   it. Declared after .on-brown-flat's own rule below wins on order. */
.on-brown + .on-brown { background: var(--surface-dark-alt); }

.on-brown h1, .on-brown h2, .on-brown h3 { color: var(--on-brown); }
.on-brown :focus-visible { outline-color: var(--gold); }

/* a flatter variant for narrow bands where the light fall-off would
   be cropped to nothing. Two classes deep so it beats the sibling rule. */
.on-brown.on-brown-flat { background: var(--brown-deep); }

/* ============================================================
   THE LEADER LINE — the structural signature
   A tracked label, then a hairline gold rule running to the end of
   the measure. Borrowed from the labelled anatomy prints.
   ============================================================ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1.5rem;
}

.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-gold);
}

.section-head .eyebrow,
.eyebrow-center { justify-content: center; }

.eyebrow-center::before,
.section-head .eyebrow::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-gold);
}

/* on dark the label is gold and the rule catches a little light */
.on-brown .eyebrow { color: var(--gold); text-shadow: 0 0 18px rgba(198, 166, 107, 0.35); }
.on-brown .eyebrow::before,
.on-brown .eyebrow::after {
  background: linear-gradient(90deg, var(--gold), rgba(198, 166, 107, 0.12));
}
.on-brown .eyebrow::before { background: linear-gradient(270deg, var(--gold), rgba(198, 166, 107, 0.12)); }

/* ---------- shared primitives ---------- */

.section { padding: var(--sp-lg) var(--gutter); }

.section-title {
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  margin-bottom: 1.25rem;
}

.section-head { max-width: 44rem; margin: 0 auto var(--sp-md); }
.section-head.is-centered { text-align: center; }

.section-intro { color: var(--charcoal); }

/* gold display type, filled with the gradient rather than flat */
.gold-fill {
  color: transparent;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- buttons ----------
   Square, always. The pill shape is what made the old ones look
   templated; the glow is not the problem, so the glow stays. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: background-color 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), box-shadow 0.35s var(--ease);
}

.btn-solid {
  background: var(--brown);
  color: var(--cream);
  border-color: var(--brown);
}
.btn-solid:hover { background: var(--bronze); border-color: var(--bronze); }

.on-brown .btn-solid {
  background: transparent;
  color: var(--gold);
  border-color: var(--rule-on-brown);
}
.on-brown .btn-solid:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown);
  box-shadow: var(--glow-gold);
}

.btn-ghost,
.btn-line {
  background: transparent;
  color: var(--brown);
  border-color: var(--rule-brown);
}
.btn-ghost:hover,
.btn-line:hover { border-color: var(--brown); background: var(--brown); color: var(--cream); }

.on-brown .btn-ghost,
.on-brown .btn-line {
  color: var(--gold);
  border-color: var(--rule-on-brown);
}
.on-brown .btn-ghost:hover,
.on-brown .btn-line:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown);
  box-shadow: var(--glow-gold);
}

/* the primary ask: a lit gold slab with a slow specular sweep */
.btn-gold {
  background: var(--gold-grad);
  /* paint the gradient under the transparent border too; with the default
     padding-box origin it tiles into the border and leaves a dark sliver
     of the far end down the left edge */
  background-origin: border-box;
  color: var(--brown);
  border-color: transparent;
  font-size: 0.9375rem;
  padding: 1.1rem 2.9rem;
  box-shadow: var(--glow-gold);
}

.btn-gold:hover { box-shadow: var(--glow-gold-lift); }

/* ---------- the tracked underline link ---------- */

.h-uplink,
.uplink {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bronze);
  border-bottom: 1px solid var(--rule-gold);
  padding-bottom: 0.4rem;
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease), text-shadow 0.28s var(--ease);
}
.h-uplink:hover,
.uplink:hover { color: var(--brown); border-color: var(--brown); }

.on-brown .h-uplink,
.on-brown .uplink { color: var(--gold); border-color: var(--rule-on-brown); }
.on-brown .h-uplink:hover,
.on-brown .uplink:hover {
  color: var(--gold-pale);
  border-color: var(--gold-pale);
  text-shadow: 0 0 20px rgba(198, 166, 107, 0.6);
}

/* ---------- the arch — flat geometry, framing photography only ---------- */

.arch {
  border-radius: 999px 999px 0 0;
  padding: clamp(0.4rem, 1vw, 0.65rem);
  border: 1px solid var(--rule-gold);
  background: var(--cream);
}

.arch-inner {
  height: 100%;
  width: 100%;
  border-radius: 999px 999px 0 0;
  position: relative;
  overflow: hidden;
}

.arch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px 999px 0 0;
}

.on-brown .arch { background: transparent; border-color: var(--rule-on-brown); }

/* ============================================================
   LIQUID GLASS
   A pane over the hero grainient. Chromium only: the head script
   in index.html sets .liquid-glass on <html> after a UA + support
   check, and everything else keeps the plain blurred pane.
   ============================================================ */

.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.glass {
  position: relative;
  isolation: isolate;
  background: rgba(58, 41, 32, 0.3);
  -webkit-backdrop-filter: blur(15px) saturate(1.15);
  backdrop-filter: blur(15px) saturate(1.15);
  border: 1px solid rgba(198, 166, 107, 0.32);
  border-radius: 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(46, 32, 23, 0.88); }
}

/* refraction layer: warps whatever is painted behind the pane */
.liquid-glass .glass {
  background: rgba(58, 41, 32, 0.2);
  -webkit-backdrop-filter: blur(2px) saturate(1.2);
  backdrop-filter: blur(2px) saturate(1.2);
}

.liquid-glass .glass::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  -webkit-backdrop-filter: url(#lg-refract);
  backdrop-filter: url(#lg-refract);
}

/* refractive rim: paired micro-bevels plus a slow specular drift */
.glass::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 2px 2px 0.5px -2.5px rgba(247, 242, 235, 0.7),
    inset -2px -2px 0.5px -2.5px rgba(247, 242, 235, 0.5),
    inset 1px 1px 1px -0.5px rgba(198, 166, 107, 0.4),
    inset -1px -1px 1px -0.5px rgba(198, 166, 107, 0.3),
    inset 0 0 9px 9px rgba(46, 32, 23, 0.12);
  background: linear-gradient(115deg,
    transparent 42%,
    rgba(217, 191, 147, 0.13) 50%,
    transparent 58%) 0 0 / 300% 100% no-repeat;
  animation: lg-sheen 10s ease-in-out infinite;
}

@keyframes lg-sheen {
  0%, 18% { background-position: 120% 0; }
  52%, 100% { background-position: -60% 0; }
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Warmer than the old near-black, but still a shade under --brown-deep:
     the bar has to stay readable as its own band when it is stuck over a
     brown section, and matching that base made it vanish into one. */
  background: linear-gradient(180deg, #432F24 0%, #35251B 100%);
  border-bottom: 1px solid rgba(198, 166, 107, 0.26);
  color: var(--on-brown);
}

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  min-height: var(--header-h);
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  list-style: none;
}
.nav-links-left { justify-content: flex-end; }
.nav-links-right { justify-content: flex-start; }

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--on-brown-soft);
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), text-shadow 0.25s var(--ease);
}
.nav-links a:hover { color: var(--gold); text-shadow: 0 0 18px rgba(198, 166, 107, 0.5); }

.nav-links a[aria-current="page"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.nav-links a.nav-cta {
  border: 1px solid rgba(198, 166, 107, 0.35);
  border-radius: 999px;
  padding: 0.55rem 1.35rem;
  white-space: nowrap;
  color: var(--gold);
}
.nav-links a.nav-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown) !important;
  box-shadow: var(--glow-gold);
  text-shadow: none;
}

.site-header :focus-visible { outline-color: var(--gold); }

/* ---------- the logo lockup, used as supplied ----------
   Section five: never recreated, re-spaced, re-coloured or boxed.
   The header is chocolate now, so it takes the gold variant.
   Clear space equals the cap height of DR NATALIE (~0.30 of the
   artwork height); at a 168px lockup that is 18px, and the 104px
   header leaves 21px above and below. */

.brand {
  display: block;
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: clamp(148px, 15vw, 168px);
  height: auto;
}

.site-footer .brand-mark { width: clamp(168px, 20vw, 212px); margin: 0 auto; }

.nav-toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  background: none;
  border: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  margin: 5px auto;
  background: var(--gold);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ---------- photo scrim ----------
   Section six: where type sits on a photograph, a chocolate brown
   gradient fading to transparent, not a flat grey box. */

.scrim { position: relative; overflow: hidden; }

.scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(46, 32, 23, 0.94) 0%,
    rgba(58, 41, 32, 0.86) 38%,
    rgba(74, 52, 40, 0.5) 68%,
    rgba(74, 52, 40, 0.12) 100%
  );
  pointer-events: none;
}

.scrim > img { width: 100%; height: 100%; object-fit: cover; }

.scrim-body { position: relative; z-index: 2; color: var(--on-brown); }

/* ---------- treatment menu rows ---------- */

.menu-group-title {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 1rem;
}

.on-brown .menu-group-title { color: var(--gold); }

.menu-list { list-style: none; }

.menu-list li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.85rem 0;
}
.menu-list li + li { border-top: 1px solid var(--rule-brown); }
.on-brown .menu-list li + li { border-top-color: rgba(198, 166, 107, 0.16); }

.menu-item small,
.menu-item .dna-mi-sub {
  display: block;
  font-size: 0.875rem;
  color: var(--charcoal-soft);
}
.on-brown .menu-item small,
.on-brown .menu-item .dna-mi-sub { color: var(--on-brown-soft); }

.menu-dots {
  flex: 1;
  border-bottom: 1px dotted var(--rule-gold);
  transform: translateY(-4px);
  min-width: 1.2rem;
}

.menu-price {
  font-size: 0.9375rem;
  color: var(--bronze);
  white-space: nowrap;
}
.on-brown .menu-price { color: var(--gold); }

/* ---------- captions ---------- */

.portrait-caption {
  font-size: 0.9375rem;
  color: var(--charcoal-soft);
  margin-top: 1rem;
}
.on-brown .portrait-caption { color: var(--on-brown-soft); }

/* ---------- instagram grid ---------- */

.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
  max-width: 62rem;
  margin: 0 auto;
}

@media (max-width: 720px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }

.ig-post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--brown-deep);
  transition: box-shadow 0.4s var(--ease);
}
.ig-post:hover { box-shadow: var(--glow-gold); }

.ig-post img { width: 100%; height: 100%; object-fit: cover; }

.ig-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  color: var(--cream);
  font-size: 0.75rem;
}

.ig-veil {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 0.9rem 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--on-brown);
  background: linear-gradient(to top, rgba(46, 32, 23, 0.92), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ig-post:hover .ig-veil,
.ig-post:focus-visible .ig-veil { opacity: 1; }

/* ---------- consultation / booking ---------- */

.consultation-card {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 68rem;
  margin: 0 auto;
}

.consultation-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--brown);
  margin-top: 1.4rem;
}
.on-brown .consultation-note { color: var(--gold); }

.booking-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.1rem;
  padding-left: clamp(0rem, 3vw, 2.5rem);
  border-left: 1px solid var(--rule-gold);
}

.booking-hint,
.booking-alt {
  font-size: 0.9375rem;
  color: var(--charcoal-soft);
  max-width: 26rem;
}
.on-brown .booking-hint,
.on-brown .booking-alt { color: var(--on-brown-soft); }

.booking-alt a { color: var(--bronze); text-decoration: none; border-bottom: 1px solid var(--rule-gold); }
.booking-alt a:hover { color: var(--brown); border-color: var(--brown); }

.on-brown .booking-alt a { color: var(--gold); border-color: var(--rule-on-brown); }
.on-brown .booking-alt a:hover { color: var(--gold-pale); border-color: var(--gold-pale); }

@media (max-width: 900px) {
  .consultation-card { grid-template-columns: 1fr; }
  .booking-panel {
    border-left: none;
    border-top: 1px solid var(--rule-gold);
    padding-left: 0;
    padding-top: 2rem;
  }
}

/* ---------- forms ---------- */

.consultation-form { display: flex; flex-direction: column; gap: 1.1rem; }

.consultation-form label { display: flex; flex-direction: column; gap: 0.4rem; }

.consultation-form label > span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.on-brown .consultation-form label > span { color: var(--gold); }

.consultation-form input,
.consultation-form select,
.consultation-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  min-height: 44px;
  color: var(--charcoal);
  background: var(--cream);
  border: 1px solid var(--rule-taupe);
  border-radius: 0;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease);
}

.consultation-form input:focus,
.consultation-form select:focus,
.consultation-form textarea:focus {
  outline: none;
  border-color: var(--bronze);
}

.on-brown .consultation-form input,
.on-brown .consultation-form select,
.on-brown .consultation-form textarea {
  background: rgba(247, 242, 235, 0.06);
  border-color: var(--rule-on-brown);
  color: var(--on-brown);
}
.on-brown .consultation-form input:focus,
.on-brown .consultation-form select:focus,
.on-brown .consultation-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(198, 166, 107, 0.35), var(--glow-gold);
}
.on-brown .consultation-form option { color: var(--charcoal); }

/* Safari paints a native select white whatever its background, which left
   cream text on white. Drawn by hand on dark, with a gold caret. */
.on-brown .consultation-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 52%, calc(100% - 0.9rem) 52%;
  background-size: 0.36rem 0.36rem;
  background-repeat: no-repeat;
}

.consultation-form textarea { resize: vertical; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }

.consultation-form .btn { align-self: flex-start; margin-top: 0.4rem; }

/* state colours stay inside the warm palette, never default web red */
.form-status {
  font-size: 0.9375rem;
  color: var(--bronze);
  min-height: 1.4em;
}
.on-brown .form-status { color: var(--gold); }
.form-status.is-error { color: #8C4A3A; }
.on-brown .form-status.is-error { color: #D9927E; }

/* ---------- contact ---------- */

.contact-map { max-width: 52rem; margin: var(--sp-md) auto 0; }

.contact-map iframe {
  width: 100%;
  height: clamp(240px, 34vw, 340px);
  border: 1px solid var(--rule-on-brown);
  border-radius: 0;
  display: block;
}

.contact-directions { margin-top: 1.4rem; }

.contact-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 62rem;
  margin: 0 auto;
}

.contact-line { color: var(--charcoal); }
.on-brown .contact-line { color: var(--on-brown-soft); }
.contact-line + .contact-line { margin-top: 0.3rem; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--brown-deepest);
  color: var(--on-brown);
  text-align: center;
  padding: var(--sp-md) var(--gutter) 2.5rem;
}

.footer-line {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.4rem 0 1.8rem;
  text-shadow: 0 0 22px rgba(198, 166, 107, 0.4);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-on-brown);
  color: var(--gold);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease), box-shadow 0.35s var(--ease);
}

.footer-social svg { width: 19px; height: 19px; }

.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--brown);
  box-shadow: var(--glow-gold);
}

.footer-legal {
  font-size: 0.8125rem;
  color: var(--on-brown-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  justify-content: center;
  align-items: center;
}

.footer-admin-links { display: inline-flex; gap: 1.1rem; }

.footer-admin-links a {
  color: var(--on-brown-faint);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s var(--ease);
}
.footer-admin-links a:hover { color: var(--gold); }

.site-footer :focus-visible { outline-color: var(--gold); }

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.rd-1 { transition-delay: 0.09s; }
.rd-2 { transition-delay: 0.18s; }

/* ---------- responsive nav ---------- */

@media (max-width: 900px) {
  :root { --header-h: 84px; }
  .nav { grid-template-columns: auto 1fr auto; row-gap: 0; padding-bottom: 0.25rem; }
  .brand { grid-column: 1; grid-row: 1; }
  .nav-toggle { display: block; }

  .nav-links {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0 1rem;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: flex; justify-content: center; padding: 0.6rem 0; }
  .nav-cta { display: inline-flex; margin-top: 0.7rem; }
  .nav-links-left { padding-bottom: 0; }
  .nav-links-right { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ig-veil { transition: none; }
  .glass::after { animation: none; background: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- large screens ---------- */
@media (min-width: 1700px) { html { font-size: 17.5px; } }
@media (min-width: 2100px) { html { font-size: 19px; } }
@media (min-width: 2500px) { html { font-size: 20px; } }

/* The privacy notice, linked where the details are actually collected. */
.henq-privacy {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.85;
}

.henq-privacy a { color: inherit; }