/* ==========================================================================
   Gill's Bar & Grill — "Chop House" design layer
   Visual language adapted from the Vito's Steakhouse moodboard.
   Palette and copy are unchanged from the previous build.
   ========================================================================== */

:root {
  /* Palette — unchanged */
  --ink:        #14110B;   /* page base            */
  --ink-deep:   #0D0B07;   /* recessed bands       */
  --ink-black:  #0A0805;   /* footer               */
  --panel:      #1C1810;   /* cards                */
  --gold:       #C8922A;   /* primary accent       */
  --gold-lt:    #E3B35A;   /* accent highlight     */
  --cream:      #F6EDD6;   /* display type         */
  --cream-2:    #F2E7CE;   /* body headings        */
  --sand:       #E6D9BC;   /* body copy strong     */
  --sand-2:     #D7C7A4;   /* body copy            */
  --sand-3:     #C6B696;   /* body copy muted      */
  --mute:       #B6A484;
  --mute-2:     #8A795C;
  --mute-3:     #6B5D44;
  --green:      #7FB069;

  --rule:       rgba(200, 146, 42, 0.16);
  --rule-soft:  rgba(200, 146, 42, 0.10);
  --rule-hard:  rgba(200, 146, 42, 0.38);
  --hair:       rgba(246, 237, 214, 0.08);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell: 1200px;
  --gutter: 40px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream-2);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sc-host { display: contents; }

.sm-vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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

/* --------------------------------------------------------------------------
   1. Layout shell
   -------------------------------------------------------------------------- */

.v-band {
  position: relative;
  padding: 116px var(--gutter);
  background: var(--ink);
  overflow: hidden;
}
.v-band--deep   { background: var(--ink-deep); }
.v-band--tight  { padding-top: 78px; padding-bottom: 78px; }
.v-band--flush-top    { padding-top: 0; }
.v-band--flush-bottom { padding-bottom: 0; }
.v-band--ruled  { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.v-band--fade   { background: linear-gradient(180deg, var(--ink-deep) 0%, var(--ink) 100%); }

.v-shell { position: relative; z-index: 1; max-width: var(--shell); margin: 0 auto; }
.v-shell--narrow { max-width: 920px; }
.v-shell--prose  { max-width: 760px; }
.v-shell--slim   { max-width: 640px; }

/* --------------------------------------------------------------------------
   2. The frame — hairline rules + crosshair corners
   The moodboard frames content in thin gold rules with small tick marks at
   the corners. Implemented as a decorative overlay so it never affects flow.
   -------------------------------------------------------------------------- */

.v-frame {
  position: absolute;
  inset: 34px 26px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
  z-index: 0;
}
.v-frame::before,
.v-frame::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--rule-hard);
}
.v-frame::before { top: -7px;    left: -7px;   border-right: 0; border-bottom: 0; }
.v-frame::after  { bottom: -7px; right: -7px;  border-left: 0;  border-top: 0; }

/* A single hairline used as a section divider, offset like the reference. */
.v-hair {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-hard) 18%, var(--rule-hard) 82%, transparent);
  border: 0;
  margin: 0;
}
.v-hair--left  { max-width: 340px; margin-right: auto; }
.v-hair--right { max-width: 440px; margin-left: auto; }

/* --------------------------------------------------------------------------
   3. Ornament — engraved line-art watermark
   The reference layers faint botanical engravings behind dark sections.
   Drawn here as an inline SVG data-URI so no new image assets are required.
   -------------------------------------------------------------------------- */

.v-ornament {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-repeat: no-repeat;
  background-position: 6% 50%, 94% 50%;
  background-size: 300px, 360px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C8922A' stroke-width='.8'><circle cx='100' cy='100' r='72'/><circle cx='100' cy='100' r='58'/><path d='M100 28c-22 26-22 118 0 144 22-26 22-118 0-144z'/><path d='M28 100c26-22 118-22 144 0-26 22-118 22-144 0z'/><path d='M49 49c34 4 98 68 102 102-34-4-98-68-102-102z'/><path d='M151 49c-34 4-98 68-102 102 34-4 98-68 102-102z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C8922A' stroke-width='.8'><path d='M100 178c-30 0-52-24-52-54 0-26 20-44 30-62 6-11 14-24 22-34 8 10 16 23 22 34 10 18 30 36 30 62 0 30-22 54-52 54z'/><path d='M100 178V52'/><path d='M100 96c-14-8-24-18-30-30'/><path d='M100 96c14-8 24-18 30-30'/><path d='M100 134c-16-9-27-21-34-35'/><path d='M100 134c16-9 27-21 34-35'/><path d='M100 28c-6-8-6-16 0-22 6 6 6 14 0 22z'/></svg>");
}
.v-ornament--wide {
  background-position: -60px 50%, calc(100% + 70px) 50%;
  background-size: 460px, 520px;
  opacity: .12;
}
.v-ornament--single {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23C8922A' stroke-width='.8'><circle cx='100' cy='100' r='72'/><circle cx='100' cy='100' r='58'/><path d='M100 28c-22 26-22 118 0 144 22-26 22-118 0-144z'/><path d='M28 100c26-22 118-22 144 0-26 22-118 22-144 0z'/></svg>");
  background-position: 50% 50%;
  background-size: 620px;
  opacity: .07;
}

/* --------------------------------------------------------------------------
   4. Typography
   The signature of the reference: a small italic serif "eyebrow" sitting
   above an oversized, tightly-tracked display serif headline.
   -------------------------------------------------------------------------- */

.v-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 26px);
  letter-spacing: .01em;
  color: var(--sand-2);
  margin: 0 0 8px;
  line-height: 1.2;
}
.v-eyebrow--gold { color: var(--gold-lt); }

/* The all-caps micro label, kept for dense/utility contexts. */
.v-kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.v-display {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.02;
  color: var(--cream);
  margin: 0;
}
.v-display--xl { font-size: clamp(46px, 9vw, 126px); }
.v-display--lg { font-size: clamp(36px, 6.2vw, 86px); }
.v-display--md { font-size: clamp(30px, 4.4vw, 58px); }
.v-display--sm { font-size: clamp(24px, 3.2vw, 40px); letter-spacing: .02em; }
.v-display em { font-style: italic; text-transform: none; color: var(--gold-lt); }

.v-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 40px);
  /* Cormorant has deep descenders; 1.1 clipped the g in "group dining". */
  line-height: 1.24;
  color: var(--cream);
  margin: 0;
}

.v-lede {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--sand-3);
  margin: 0;
}
.v-lede--bright { color: var(--sand-2); }

.v-body {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--sand-3);
  margin: 0 0 18px;
}
.v-body:last-child { margin-bottom: 0; }
.v-body a { color: var(--gold-lt); text-decoration: none; font-weight: 600; }
.v-body a:hover { text-decoration: underline; }

.v-center { text-align: center; }
.v-center .v-hair { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 34px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.v-btn--solid {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 12px 34px rgba(200, 146, 42, .28);
}
.v-btn--solid:hover {
  background: var(--gold-lt);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(200, 146, 42, .38);
}
.v-btn--ghost {
  background: transparent;
  color: var(--cream-2);
  border-color: var(--rule-hard);
}
.v-btn--ghost:hover {
  background: rgba(200, 146, 42, .1);
  border-color: var(--gold);
  color: var(--gold-lt);
}
.v-btn--sm { padding: 12px 24px; font-size: 11px; letter-spacing: .14em; }
.v-btn--lg { padding: 20px 46px; font-size: 13.5px; }
.v-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.v-textlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-lt);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule-hard);
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.v-textlink:hover { color: var(--cream); border-color: var(--gold); gap: 14px; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.v-util {
  background: var(--ink-black);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.v-util__in {
  max-width: var(--shell); margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.v-status { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.v-status__dot { width: 6px; height: 6px; border-radius: 50%; }
.v-util__meta { display: flex; align-items: center; gap: 26px; color: var(--mute); }
.v-util__meta a { color: var(--gold-lt); text-decoration: none; font-weight: 700; }

.v-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(13, 11, 7, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateZ(0);
  border-bottom: 1px solid var(--rule);
}
.v-header__in {
  max-width: var(--shell); margin: 0 auto;
  padding: 14px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
/* Centred crest, mirroring the reference's centred logo lockup. */
.v-crest { grid-column: 2; justify-self: center; text-align: center; text-decoration: none; display: block; }
.v-crest__rule {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 4px;
}
.v-crest__rule span { display: block; width: 26px; height: 1px; background: var(--rule-hard); }
.v-crest__rule i { display: block; width: 4px; height: 4px; border: 1px solid var(--gold); transform: rotate(45deg); }
.v-crest__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  line-height: .96;
  color: var(--gold-lt);
}
.v-crest__sub {
  font-size: 8.5px; font-weight: 700; letter-spacing: .46em;
  color: var(--mute); margin-top: 5px; padding-left: .46em;
}

.v-nav { display: flex; align-items: center; gap: 2px; }
.v-nav--left  { grid-column: 1; justify-self: start; }
.v-nav--right { grid-column: 3; justify-self: end; }
.v-nav a {
  position: relative;
  color: var(--cream-2);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 10px 15px;
  transition: color .2s ease;
}
.v-nav a::after {
  content: ""; position: absolute;
  left: 15px; right: 15px; bottom: 4px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.v-nav a:hover { color: var(--gold-lt); }
.v-nav a:hover::after,
.v-nav a.is-active::after { transform: scaleX(1); }
.v-nav a.is-active { color: var(--gold-lt); }
.v-nav__phone { color: var(--mute) !important; letter-spacing: .1em !important; }
.v-nav .v-btn { margin-left: 12px; }
.v-nav .v-btn::after { display: none; }

.v-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
  grid-column: 3; justify-self: end;
}
.v-burger span { width: 24px; height: 1.5px; background: var(--gold-lt); }

.v-mobnav {
  display: none; flex-direction: column;
  padding: 10px 22px 24px; gap: 2px;
  border-top: 1px solid var(--rule-soft);
}
.v-mobnav a {
  color: var(--cream-2); text-decoration: none;
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  padding: 13px 4px; border-bottom: 1px solid var(--hair);
}
.v-mobnav .v-btn { margin-top: 16px; border-bottom: 0; }

.v-actionbar { display: none; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.v-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px var(--gutter) 0;
  background: var(--ink-deep);
  overflow: hidden;
}
.v-hero__in {
  position: relative; z-index: 2;
  max-width: 980px; width: 100%;
  animation: v-rise .95s cubic-bezier(.16, 1, .3, 1) both;
}
.v-hero__plate {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1160px;
  margin: 46px auto 0;
  /* hero-bg.jpg is 659x360 (1.83:1). At 2.625:1 the plate was cropping ~30%
     of the photo's height and cutting the head off the beer. 21/9.5 is 2.21:1,
     which crops only ~17% — enough to keep the froth in frame. */
  aspect-ratio: 21 / 9.5;
  /* The veil stays heavy at the very top and bottom so the plate blends into
     the band and the strapline keeps its contrast, but opens up through the
     middle and lower-middle so the photograph itself reads. */
  background-image:
    linear-gradient(180deg,
      rgba(13, 11, 7, .70) 0%,
      rgba(13, 11, 7, .04) 38%,
      rgba(13, 11, 7, .10) 62%,
      rgba(13, 11, 7, .52) 84%,
      rgba(13, 11, 7, .92) 100%),
    url('../assets/hero-bg.jpg');
  background-size: cover;
  /* Low % keeps the top of the photo — and the head on the beer — in frame. */
  background-position: center 22%;
  border-top: 1px solid var(--rule);
}
/* Interior pages reuse the hero, at a slightly shorter measure. */
.v-hero--page { padding-top: 78px; }
/* 21/9 ≈ 2.33, close to the functions image's native 2.36, so it sits almost
   uncropped rather than losing a fifth of its height. */
.v-hero--page .v-hero__plate { aspect-ratio: 21 / 9; margin-top: 40px; }

/* Functions hero plate — overhead celebration spread (food only, no interior).
   Two sources are stacked: the local file wins, and the generated image is the
   fallback shown until assets/function-hero.jpg exists on disk.
   Once you save that file, delete the third url() below. */
.v-hero__plate--functions {
  background-image:
    linear-gradient(180deg,
      rgba(13, 11, 7, .70) 0%,
      rgba(13, 11, 7, .04) 38%,
      rgba(13, 11, 7, .10) 62%,
      rgba(13, 11, 7, .52) 84%,
      rgba(13, 11, 7, .92) 100%),
    url('../assets/function-hero.jpg'),
    url('https://d8j0ntlcm91z4.cloudfront.net/user_3GkoYnysSn8BXNfnGDqfcG9czR7/hf_20260721_022202_bdf64c99-59e7-4a11-84a2-f53016ffa12a.png');
  background-position: center 50%;
}

.v-hero__strap {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase;
  color: var(--cream-2);
  /* Holds contrast now the veil beneath it is lighter. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .9), 0 0 4px rgba(0, 0, 0, .7);
}
.v-hero__strap em { font-style: normal; color: var(--gold-lt); }

.v-hero__meta {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  margin-top: 32px;
  font-size: 13px; font-weight: 600;
}
.v-hero__meta a { color: var(--sand-2); text-decoration: none; }
.v-hero__meta .v-div { width: 1px; height: 16px; background: var(--rule-hard); }

.v-cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  justify-content: center; margin-top: 34px;
}

@keyframes v-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Interior page hero — shorter, same language. */
.v-pagehead {
  position: relative;
  padding: 86px var(--gutter) 70px;
  background: var(--ink-deep);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   8. Section heading block
   -------------------------------------------------------------------------- */

.v-head { position: relative; z-index: 1; margin-bottom: 52px; }
.v-head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   9. Category tiles — the four-across image row from the reference
   -------------------------------------------------------------------------- */

.v-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px;
  position: relative;
  z-index: 1;
}
.v-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
  background: var(--panel);
}
.v-tile__img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
  filter: brightness(.78) saturate(.94);
}
.v-tile:hover .v-tile__img { transform: scale(1.09); filter: brightness(.95) saturate(1); }
.v-tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 11, 7, .3) 0%, rgba(13, 11, 7, 0) 34%, rgba(13, 11, 7, .92) 100%);
}
.v-tile__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 22px;
  text-align: center;
}
.v-tile__tag {
  display: inline-block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 10px;
}
.v-tile__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(21px, 2.2vw, 28px);
  color: var(--cream);
  line-height: 1.1;
  margin: 0;
}
.v-tile__price {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold-lt);
  margin-top: 8px;
}
.v-tile__desc {
  font-size: 12.5px; line-height: 1.55; color: var(--sand-2);
  margin: 0 auto; max-width: 240px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease, margin .4s ease;
}
.v-tile:hover .v-tile__desc { max-height: 92px; opacity: 1; margin-top: 10px; }
.v-tile::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(246, 237, 214, .18);
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.v-tile:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   10. Split feature (image beside text, offset frame)
   -------------------------------------------------------------------------- */

.v-split {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 60px;
  align-items: center;
}
/* Columns run full height and align on both top and bottom edges. Pair with
   .v-col on each child so the shorter column distributes its own content
   rather than floating with a ragged bottom edge. */
.v-split--even { align-items: stretch; }

.v-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
/* Takes up the slack, so whatever follows it is pushed to the column base. */
.v-col__grow { flex: 1; }
/* Pins an element to the base of its column. */
.v-col__end { margin-top: auto; }
.v-split__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  filter: brightness(.9);
}
.v-split__media::before {
  content: ""; position: absolute;
  inset: -18px -18px 18px 18px;
  border: 1px solid var(--rule-hard);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Stat / fact cards
   -------------------------------------------------------------------------- */

.v-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-soft); }
.v-stat {
  background: var(--ink-deep);
  padding: 32px 28px;
  transition: background .3s ease;
}
.v-stat:hover { background: var(--panel); }
.v-stat__fig {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--gold-lt);
}
.v-stat__label {
  font-size: 12px; line-height: 1.5; color: var(--mute); margin-top: 10px;
}

/* Four-across, centred variant used when the band carries no photograph.
   Hairline dividers between cells rather than filled panels, so the row reads
   as typography on the page rather than as a set of boxes. */
.v-stats--row {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.v-stats--row .v-stat {
  background: transparent;
  text-align: center;
  padding: 40px 24px;
  border-right: 1px solid var(--rule-soft);
}
.v-stats--row .v-stat:last-child { border-right: 0; }
.v-stats--row .v-stat:hover { background: rgba(200, 146, 42, .04); }
.v-stats--row .v-stat__fig { font-size: 46px; }
.v-stats--row .v-stat__label {
  margin-top: 14px;
  letter-spacing: .04em;
  max-width: 170px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   11b. Function packages — hairline-ruled list, no imagery
   -------------------------------------------------------------------------- */

.v-packages { position: relative; z-index: 1; }
.v-package {
  padding: 34px 4px;
  border-bottom: 1px solid var(--hair);
  transition: background .3s ease, padding .3s ease;
}
.v-package:last-child { border-bottom: 0; }
.v-package:hover { background: rgba(200, 146, 42, .035); }
.v-package__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 12px;
}
.v-package__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--cream);
  margin: 0;
}
.v-package__size {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  color: var(--gold-lt);
  white-space: nowrap;
}
.v-package__desc {
  font-size: 15px; line-height: 1.75; color: var(--sand-3);
  margin: 0; max-width: 620px;
}

/* --------------------------------------------------------------------------
   12. Info strip
   -------------------------------------------------------------------------- */

.v-strip {
  background: var(--ink-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--gutter);
}
.v-strip__grid {
  max-width: var(--shell); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.v-strip__cell {
  padding: 30px 26px;
  border-right: 1px solid var(--rule-soft);
  text-align: center;
}
.v-strip__cell:last-child { border-right: 0; }
.v-strip__label {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--gold); margin-bottom: 10px;
}
.v-strip__val { font-size: 13.5px; line-height: 1.65; color: var(--sand); }
.v-strip__val a { color: var(--sand); text-decoration: none; }

/* --------------------------------------------------------------------------
   13. Testimonial cards
   -------------------------------------------------------------------------- */

/* Even two-column grid. Rows share a height and each card's attribution is
   pinned to its base, so the cards line up regardless of quote length. */
.v-quotes {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}
/* Rating summary — overall score, stars and Google attribution. */
.v-rating {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
  text-decoration: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 40px;
  margin: 0 auto 48px;
  transition: border-color .3s ease, background .3s ease;
}
.v-rating:hover { border-color: var(--rule-hard); background: rgba(200, 146, 42, .04); }
.v-rating__score {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  color: var(--gold-lt);
}
.v-rating__meta { text-align: left; }
.v-rating__count {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mute); margin-top: 8px;
}
.v-rating__mark {
  display: flex; flex-direction: column; gap: 7px;
  padding-left: 28px; border-left: 1px solid var(--rule);
  text-align: left;
}
.v-rating__g {
  font-family: var(--sans); font-weight: 700; font-size: 17px;
  letter-spacing: -.01em; color: var(--sand);
}
.v-rating__g b { color: var(--gold); font-weight: 700; }
.v-rating__cta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-lt);
}
.v-stars--lg { font-size: 17px; letter-spacing: 5px; }

.v-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 36px 30px 28px;
  text-align: left;
  text-decoration: none;
}
a.v-quote:hover { border-color: var(--rule-hard); }
/* Pushes the star/attribution row to the bottom of every card. */
.v-quote__text { flex: 1; }
.v-quote__mark {
  font-family: var(--serif);
  font-size: 58px; line-height: .6;
  color: var(--gold);
  opacity: .45;
  margin-bottom: 14px;
  display: block;
}
.v-quote__text {
  font-family: var(--serif);
  font-size: 21px; line-height: 1.4;
  color: var(--cream-2);
  margin: 0 0 16px;
}
.v-quote__body { font-size: 13.5px; line-height: 1.7; color: var(--mute); margin: 0 0 20px; }
.v-quote__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--hair);
}
.v-stars { color: var(--gold); font-size: 13px; letter-spacing: 4px; }
.v-quote__who { font-size: 12px; letter-spacing: .1em; color: var(--mute-2); }

/* --------------------------------------------------------------------------
   14. Menu page — filter pills + two-column price list
   -------------------------------------------------------------------------- */

.v-pills {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
  position: relative; z-index: 1;
}
.v-pill {
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.v-pill:hover { border-color: var(--gold); color: var(--gold-lt); }
.v-pill.is-on { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.v-switch { display: flex; justify-content: center; gap: 34px; margin-bottom: 34px; position: relative; z-index: 1; }
.v-switch button {
  font-family: var(--serif);
  font-size: 26px; font-weight: 600;
  color: var(--mute-2);
  background: none; border: 0; cursor: pointer;
  padding: 0 0 8px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.v-switch button:hover { color: var(--sand-2); }
.v-switch button.is-on { color: var(--gold-lt); border-color: var(--gold); }

.v-notice {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 4px;
  margin-bottom: 54px;
  position: relative; z-index: 1;
}
.v-notice__text { font-size: 12.5px; color: var(--mute); max-width: 560px; line-height: 1.6; }
.v-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.v-course { margin-bottom: 60px; scroll-margin-top: 130px; position: relative; z-index: 1; }
.v-course__head { text-align: center; margin-bottom: 8px; }
.v-course__note { font-size: 13px; color: var(--mute-2); text-align: center; margin: 10px 0 0; }
.v-course__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 0 56px;
  margin-top: 26px;
}
.v-item {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}
.v-item__name {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; color: var(--cream-2);
}
.v-item__desc { font-size: 12.5px; color: var(--mute-2); margin-top: 5px; line-height: 1.55; }
.v-item__price {
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  color: var(--gold-lt); white-space: nowrap;
}
.v-tag {
  font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 2px; padding: 2px 6px;
}

/* --------------------------------------------------------------------------
   15. Panels, cards, forms
   -------------------------------------------------------------------------- */

.v-panel {
  position: relative; z-index: 1;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 44px;
}
.v-panel--deep { background: linear-gradient(140deg, var(--panel), var(--ink-deep)); }

/* One card system used everywhere. Cards are flex columns of equal height
   within their row, with a consistent title, body and pinned footer link, so
   a short card and a long one still line up. */
.v-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 30px;
  transition: border-color .3s ease, transform .3s ease;
}
.v-card:hover { border-color: var(--rule-hard); transform: translateY(-3px); }
.v-card__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gold);
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.v-card__text { font-size: 14px; line-height: 1.75; color: var(--mute); margin: 0; }
.v-card__text + .v-card__text { margin-top: 10px; }
/* Pins a call-to-action to the base of the card, whatever the body length. */
.v-card__link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lt); text-decoration: none;
  transition: color .2s ease;
}
.v-card__link:hover { color: var(--cream); }
.v-card__phone {
  font-family: var(--serif);
  font-size: 30px; font-weight: 700;
  color: var(--gold-lt); text-decoration: none;
  transition: color .2s ease;
}
.v-card__phone:hover { color: var(--cream); }

/* Equal-height card row. */
.v-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: stretch;
  position: relative; z-index: 1;
}
/* Vertical stack whose cards divide the available height between them. */
.v-cardstack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.v-cardstack > .v-card { flex: 1; justify-content: center; }

/* Tick list used inside cards. */
.v-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.v-ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 14px; line-height: 1.6; color: var(--sand-2);
}
.v-ticks li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--gold-lt);
}

.v-field { display: block; margin-bottom: 20px; }
.v-label {
  display: block;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 9px;
}
.v-input,
.v-select,
.v-textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--cream-2);
  background: rgba(13, 11, 7, .7);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 14px 16px;
  transition: border-color .2s ease, background .2s ease;
}
.v-input:focus,
.v-select:focus,
.v-textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(13, 11, 7, .95);
}
.v-textarea { min-height: 130px; resize: vertical; }

.v-deflist { display: flex; flex-direction: column; }
/* When a definition list is the growing element of a column, share the extra
   height between the rows themselves. Using `space-between` here would put the
   gap *after* each divider, leaving the rules floating away from their row. */
.v-deflist.v-col__grow > .v-defrow { flex: 1; align-items: center; }
.v-defrow {
  display: flex; gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hair);
}
.v-defrow:last-child { border-bottom: 0; }
.v-defrow__key {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--gold); min-width: 92px;
}
.v-defrow__val { font-size: 14.5px; line-height: 1.7; color: var(--sand); }
.v-defrow__val a { color: var(--gold-lt); text-decoration: none; }

.v-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--ink);
}
/* As a direct child of an even split the map fills the row height instead,
   so its bottom edge lines up with the column beside it. */
.v-split--even > .v-map {
  aspect-ratio: auto;
  height: 100%;
  min-height: 340px;
}
.v-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.v-footer {
  background: var(--ink-black);
  border-top: 1px solid var(--rule);
  padding: 76px var(--gutter) 110px;
  position: relative;
  overflow: hidden;
}
.v-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--rule-soft);
  position: relative; z-index: 1;
}
.v-footer__label {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--gold); margin-bottom: 18px;
}
.v-footer__links { display: flex; flex-direction: column; gap: 12px; }
.v-footer__links a {
  color: var(--mute); text-decoration: none; font-size: 13.5px;
  transition: color .2s ease;
}
.v-footer__links a:hover { color: var(--gold-lt); }
.v-footer__list { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--mute); }
.v-footer__list a { color: var(--gold-lt); text-decoration: none; word-break: break-word; }
.v-footer__list strong { color: var(--sand); font-weight: 700; }
.v-footer__base {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  padding-top: 28px;
  position: relative; z-index: 1;
}
.v-footer__base span,
.v-footer__base a { font-size: 12px; color: var(--mute-3); text-decoration: none; letter-spacing: .04em; }
.v-footer__base a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   17. Scroll & block animations

   Everything here is progressive enhancement. The `.js-fx` class is added to
   <html> by scroll-fx.js only when motion is allowed, so with JS disabled or
   `prefers-reduced-motion: reduce` the page renders fully visible and static.
   -------------------------------------------------------------------------- */

:root { --fx-ease: cubic-bezier(.16, 1, .3, 1); }

/* --- Block reveals -------------------------------------------------------

   Reveals REPLAY. A block resets once it is well clear of the viewport and
   animates again on the way back, so scrolling up feels as alive as scrolling
   down. `--fx-dir` flips the direction of travel: a block below you enters
   from below (1), one above you enters from above (-1).
   -------------------------------------------------------------------------- */

.js-fx [data-fx] {
  --fx-dir: 1;
  opacity: 0;
  transition:
    opacity .85s var(--fx-ease),
    transform .85s var(--fx-ease),
    clip-path .95s var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
  will-change: opacity, transform;
}
.js-fx [data-fx].is-above { --fx-dir: -1; }

/* Drop the compositing layer once the reveal finishes. Leaving `will-change`
   on permanently makes the browser rasterise the element to a layer the size
   of its border box, which clips glyph descenders on tight line-heights. */
.js-fx [data-fx].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* rise — the default for headings and prose */
.js-fx [data-fx="rise"]  { transform: translateY(calc(34px * var(--fx-dir))); }
/* fade — for elements where movement would feel fussy */
.js-fx [data-fx="fade"]  { transform: none; }
/* lift — cards and tiles, with a touch of scale */
.js-fx [data-fx="lift"]  { transform: translateY(calc(28px * var(--fx-dir))) scale(.985); }
/* left / right — split layouts converging on the centre */
.js-fx [data-fx="left"]  { transform: translateX(-38px); }
.js-fx [data-fx="right"] { transform: translateX(38px); }
/* wipe — a curtain pull, used on full-bleed photo plates */
.js-fx [data-fx="wipe"]  { clip-path: inset(0 0 100% 0); opacity: 1; }
.js-fx [data-fx="wipe"].is-above { clip-path: inset(100% 0 0 0); }
/* rule — hairlines draw out from the centre */
.js-fx [data-fx="rule"]  { transform: scaleX(0); transform-origin: center; opacity: 1; }

/* --- Display headlines reveal line by line ------------------------------- */

.js-fx .v-display[data-fx-lines] { opacity: 1; }
/* The padding/negative-margin pair gives descenders (g, y, p) room to render
   inside the masked box without changing the layout position of the line. */
.fx-line {
  --fx-dir: 1;
  display: block;
  overflow: hidden;
  padding-bottom: .22em;
  margin-bottom: -.22em;
}
.fx-line.is-above { --fx-dir: -1; }
.fx-line > span {
  display: block;
  transform: translateY(calc(105% * var(--fx-dir)));
  transition: transform 1s var(--fx-ease);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-line.is-in > span { transform: none; }

/* --- Section ornaments drift and fade in --------------------------------- */

.js-fx .v-ornament { opacity: 0; transition: opacity 1.4s ease; }
.js-fx .v-ornament.is-in { opacity: .17; }
.js-fx .v-ornament--wide.is-in { opacity: .12; }
.js-fx .v-ornament--single.is-in { opacity: .07; }

/* --- Hairline frames draw themselves in ---------------------------------- */

.js-fx .v-frame { opacity: 0; transform: scale(1.015); transition: opacity 1.1s var(--fx-ease), transform 1.1s var(--fx-ease); }
.js-fx .v-frame.is-in { opacity: 1; transform: none; }

/* --- Sticky header condenses once you leave the hero --------------------- */

.v-header { transition: padding .35s var(--fx-ease), background .35s ease, box-shadow .35s ease; }
.v-header__in { transition: padding .35s var(--fx-ease); }
.v-crest__name { transition: font-size .35s var(--fx-ease); }
.v-crest__rule { transition: opacity .3s ease, max-height .35s var(--fx-ease); overflow: hidden; max-height: 20px; }
.is-stuck .v-header {
  background: rgba(10, 8, 5, .96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.is-stuck .v-header__in { padding-top: 8px; padding-bottom: 8px; }
.is-stuck .v-crest__name { font-size: 23px; }
.is-stuck .v-crest__rule { opacity: 0; max-height: 0; margin-bottom: 0; }

/* --- Scroll progress hairline across the top of the header --------------- */

.v-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 100; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  transform: scaleX(0); transform-origin: left;
  opacity: 0; transition: opacity .3s ease;
}
.is-stuck .v-progress { opacity: 1; }

/* --- Counters on the stat row -------------------------------------------- */

.v-stat__fig { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .v-progress { display: none; }
}

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .v-split { gap: 40px; }
  .v-course__list { gap: 0 34px; }
}

@media (max-width: 860px) {
  :root { --gutter: 22px; }

  .v-header__in { grid-template-columns: 1fr auto; }
  .v-nav--left, .v-nav--right { display: none !important; }
  .v-crest { grid-column: 1; justify-self: start; text-align: left; }
  .v-crest__rule { justify-content: flex-start; }
  .v-burger { display: flex !important; grid-column: 2; }
  .v-mobnav.open { display: flex !important; }
  .v-util__meta { display: none !important; }

  .v-actionbar {
    display: grid !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
    grid-template-columns: 1fr 1fr 1.3fr;
    background: rgba(10, 8, 5, .97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule-hard);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .v-actionbar a {
    text-align: center; padding: 13px 6px;
    color: var(--sand); text-decoration: none;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    border-right: 1px solid var(--rule-soft);
  }
  .v-actionbar a:last-child { background: var(--gold); color: var(--ink); border-right: 0; display: flex; align-items: center; justify-content: center; }

  .v-band { padding-top: 72px; padding-bottom: 72px; }
  .v-band--flush-top { padding-top: 0; }
  .v-band--flush-bottom { padding-bottom: 0; }
  .v-hero { padding-top: 64px; }
  .v-hero__plate { aspect-ratio: 16 / 10; margin-top: 34px; }
  .v-frame { inset: 18px 12px; }
  .v-ornament { background-size: 200px, 240px; opacity: .1; }
  .v-split__media::before { inset: -10px -10px 10px 10px; }
  .v-strip__cell { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .v-strip__cell:last-child { border-bottom: 0; }
  .v-quotes { grid-template-columns: 1fr; }
  .v-rating { gap: 20px; padding: 22px 24px; }
  .v-rating__mark { padding-left: 20px; }
  .v-stats--row { grid-template-columns: 1fr 1fr; }
  .v-stats--row .v-stat:nth-child(2) { border-right: 0; }
  .v-stats--row .v-stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .v-panel { padding: 28px; }
  .v-footer { padding-bottom: 120px; }
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  /* Paired form fields collapse to a single column. */
  .sm-2col { grid-template-columns: 1fr !important; }
  .v-band { padding-top: 56px; padding-bottom: 56px; }
  .v-band--flush-top { padding-top: 0; }
  .v-band--flush-bottom { padding-bottom: 0; }
  .v-display--xl { font-size: clamp(36px, 12vw, 58px); }
  .v-hero__strap { font-size: 9px; letter-spacing: .18em; bottom: 16px; }
  .v-stats { grid-template-columns: 1fr; }
  /* Re-assert after the .v-stats override above (equal specificity, later wins). */
  .v-stats--row { grid-template-columns: 1fr 1fr; }
  .v-stats--row .v-stat { padding: 28px 14px; }
  .v-stats--row .v-stat__fig { font-size: 34px; }
  .v-tiles { grid-template-columns: 1fr 1fr; }
  .v-tile { aspect-ratio: 4 / 5; }
  .v-course__list { grid-template-columns: 1fr; }
  .v-switch { gap: 22px; }
  .v-switch button { font-size: 21px; }
  .v-btn { padding: 15px 26px; font-size: 11.5px; }
}