/* ==========================================================================
   Heartbreakers Barbershop — Stylesheet
   ==========================================================================
   Hand-written CSS, no framework, no build step.

   LOOK & FEEL
   Old-school American beer-label styling, in the spirit of a Coors Banquet
   label: warm parchment cream, deep navy, banquet red, antique gold, and a
   subtle paper-grain texture over everything. Heavy slab-serif headlines,
   a flowing retro script for accents, clean sans for body copy.

   HOW THIS FILE IS ORGANIZED (matches page order):
      1.  Design tokens (color, type, spacing)   <- edit here first
      2.  Reset + base elements
      3.  Paper textures & decorative rules
      4.  Layout helpers
      5.  Buttons
      6.  Announcement bar
      7.  Header (main + condensed sticky)
      8.  Mobile nav
      9.  Hero
      10. Info strip
      11. About
      12. Barber bio
      13. Services
      14. Gallery + lightbox
      15. Reviews
      16. Policy card
      17. Contact / hours / map
      18. Footer
      19. Page header (inner pages)
      20. Scroll reveal
      21. Responsive breakpoints
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Color: pulled from a Coors Banquet label ----
     Navy + cream + red + gold. Navy replaces the old near-black,
     which is what makes this read "vintage label" instead of "modern dark". */
  --navy:        #16233D;   /* darkest — header, dark sections, footer */
  --navy-soft:   #1D2E4E;   /* lifted navy — announcement bar, page headers */
  --navy-line:   #33456B;   /* hairlines on navy */

  --paper:       #FAF4E4;   /* lightest parchment */
  --cream:       #F1E7CD;   /* main light background */
  --cream-dim:   #E6D9B8;   /* alternating light background */

  --red:         #B3132B;   /* banquet red — primary CTA */
  --red-dark:    #8C0E20;

  --gold:        #C9A24B;   /* antique gold accent */
  --gold-light:  #E2C078;

  --text:         #22283C;  /* body text on light backgrounds */
  --text-muted:   #5E6275;
  --text-on-dark: #EFE6CF;
  --muted-on-dark:#A9B0C4;

  /* ---- Type ----
     Alfa Slab One = heavy slab serif, the "label headline" face
     Yellowtail    = flowing retro script, used only for short accents
     Bebas Neue    = condensed caps for nav, eyebrows, buttons, prices
     Inter         = body copy (kept for legibility at small sizes) */
  --font-display:   'Alfa Slab One', Georgia, serif;
  --font-script:    'Yellowtail', cursive;
  --font-condensed: 'Bebas Neue', Impact, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid type scale. Alfa Slab is much heavier and wider than a condensed
     face, so these headline sizes are deliberately smaller than they'd be
     for a condensed font — big slab type overwhelms a layout fast. */
  --text-xs:   0.78rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-lg:   1.075rem;
  --h3:        clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --h2-small:  clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --h2:        clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
  --h1-page:   clamp(1.9rem, 1.5rem + 2vw, 2.9rem);
  --h1-hero:   clamp(2.2rem, 1.4rem + 3.4vw, 4rem);

  --tracking-eyebrow: 0.22em;   /* wide letterspacing for small caps labels */

  /* ---- Spacing ---- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --section-y: clamp(64px, 8vw, 112px);

  /* ---- Misc ---- */
  --radius:     3px;    /* barely rounded — labels and signage have hard edges */
  --radius-lg:  6px;
  --max-width:  1180px;
  --max-narrow: 760px;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Textures (inline SVG, so they cost zero extra HTTP requests) ----
     --grain  = very fine speckle, the "tooth" of the paper
     --fibers = medium fiber structure
     --mottle = broad soft clouding, like uneven dye on old stock
     Layering all three is what reads as real paper rather than TV static. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--navy);   /* dark overscroll area, matches the footer */
}

body {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* Slab-serif headlines, mixed case. Uppercase is reserved for the hero and
   page titles (see those sections) — full uppercase slab everywhere is too
   shouty and eats horizontal space. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;      /* Alfa Slab ships a single weight */
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--navy);
}

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


/* --------------------------------------------------------------------------
   3. PAPER TEXTURES & DECORATIVE RULES
   --------------------------------------------------------------------------
   Two layers of texture:
     - body::after  = fine grain fixed over the entire viewport (film-grain look)
     - .section--*  = mottled paper wash that scrolls with the content
   Both are pointer-events:none so they never intercept clicks.
   To dial the effect up or down, change the `opacity` values below.
*/
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: 0.13;
  mix-blend-mode: multiply;
}

/* Paper wash shared by the light sections */
.section--paper,
.section--cream,
.section--cream-dim,
.policy-card,
.page-header,
.info-strip {
  position: relative;
  isolation: isolate;
}

.section--paper::before,
.section--cream::before,
.section--cream-dim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--fibers), var(--mottle);
  background-size: 300px 300px, 600px 600px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

/* Dark sections get a softer, cooler version of the same mottling */
.section--navy {
  position: relative;
  isolation: isolate;
}

.section--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--fibers), var(--mottle);
  background-size: 300px 300px, 600px 600px;
  opacity: 0.2;
  mix-blend-mode: overlay;
}

/* Double gold hairline — the classic label border, used to divide bands */
.rule-double {
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  height: 4px;
}


/* --------------------------------------------------------------------------
   4. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section { padding: var(--section-y) 0; }

/* Background variants — put one on a <section> to set its band color */
.section--paper     { background: var(--paper); }
.section--cream     { background: var(--cream); }
.section--cream-dim { background: var(--cream-dim); }
.section--navy      { background: var(--navy); color: var(--text-on-dark); }
.section--navy h1,
.section--navy h2,
.section--navy h3   { color: var(--paper); }

/* Eyebrow + heading pattern:
     <p class="eyebrow">Since 2022</p>
     <h2 class="section-title">Traditional Barbershop</h2>   */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-condensed);
  font-size: 0.95rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-sm);
}

.eyebrow::after {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: var(--gold);
}

.section--navy .eyebrow { color: var(--gold); }

.eyebrow--center { justify-content: center; }

.eyebrow--center::before {
  content: "";
  flex: 0 0 44px;
  height: 1px;
  background: var(--gold);
}

.section-title {
  font-size: var(--h2);
  margin-bottom: var(--space-md);
}

.section-head { margin-bottom: var(--space-xl); }

.section-head--center {
  text-align: center;
  max-width: var(--max-narrow);
  margin-left: auto;
  margin-right: auto;
}

.lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: var(--max-narrow);
}

.section--navy .lede { color: var(--muted-on-dark); }

/* Retro script accent, e.g. "Est. 2022" */
.script {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.3;
  color: var(--gold);
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 13px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease),
              color 0.2s var(--ease),
              border-color 0.2s var(--ease),
              transform 0.15s var(--ease);
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Banquet red — the main call to action */
.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.btn--gold:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* Outline for light backgrounds */
.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover {
  background: var(--navy);
  color: var(--paper);
}

/* Outline for dark backgrounds */
.btn--ghost {
  background: transparent;
  border-color: rgba(239,230,207,0.45);
  color: var(--paper);
}
.btn--ghost:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--navy);
}

.btn--sm {
  padding: 9px 18px;
  font-size: 0.92rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}


/* --------------------------------------------------------------------------
   6. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.announce {
  background: var(--red);
  color: rgba(250,244,228,0.9);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
}

.announce-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xs) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.announce strong {
  color: var(--paper);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.announce a:hover { color: #fff; text-decoration: underline; }

.announce-right {
  display: flex;
  gap: var(--space-lg);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--navy);
  border-bottom: 3px double var(--gold);   /* label-style double rule */
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.logo img { height: 54px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-left: auto;
}

.main-nav a {
  position: relative;
  padding: 4px 0;
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  transition: color 0.2s var(--ease);
}

.main-nav a:hover { color: var(--gold); }

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.main-nav a:hover::after,
.main-nav a.is-current::after { transform: scaleX(1); }
.main-nav a.is-current { color: var(--gold); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Condensed sticky header (slides down from the top) ---- */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(22,35,61,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold);
  transform: translateY(-100%);
  transition: transform 0.3s var(--ease);
}

.sticky-header.is-visible { transform: translateY(0); }

.sticky-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xs) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.sticky-header .logo img { height: 38px; }
.sticky-header .main-nav { gap: var(--space-lg); }


/* --------------------------------------------------------------------------
   8. MOBILE NAV
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-bottom: 3px double var(--gold);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s var(--ease);
  }

  .main-nav.is-open { max-height: 380px; }

  .main-nav a {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--navy-line);
  }

  .main-nav a::after { display: none; }

  .nav-toggle { display: flex; }

  .sticky-header .main-nav { display: none; }
}


/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
  border-bottom: 3px double var(--gold);
}

/* Photo is desaturated then tinted by the navy scrim below, giving the
   whole hero a duotone, printed-poster look rather than a plain photo. */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.08) sepia(18%);
  opacity: 0.5;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(22,35,61,0.94) 0%, rgba(22,35,61,0.7) 45%, rgba(22,35,61,0.4) 100%),
    linear-gradient(to top, rgba(22,35,61,0.92) 0%, transparent 55%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: var(--section-y) 0;
}

.hero-content h1 {
  font-size: var(--h1-hero);
  line-height: 1.02;
  color: var(--paper);
  margin: var(--space-sm) 0 var(--space-md);
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.hero-rule {
  width: 88px;
  height: 4px;
  background: var(--gold);
  border-top: 1px solid var(--gold);
  margin-bottom: var(--space-lg);
}

.hero-text {
  max-width: 520px;
  margin-bottom: var(--space-lg);
  font-size: var(--text-lg);
  color: var(--text-on-dark);
}

.hero-notice {
  max-width: 480px;
  margin-bottom: var(--space-xl);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  border-left: 3px solid var(--gold);
  color: var(--paper);
}

.hero-notice strong { display: block; font-weight: 700; }

.hero-notice small {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted-on-dark);
}

.hero-notice a { text-decoration: underline; }
.hero-notice a:hover { color: var(--gold-light); }


/* --------------------------------------------------------------------------
   10. INFO STRIP
   -------------------------------------------------------------------------- */
.info-strip {
  background: var(--gold);
  color: var(--navy);
  border-bottom: 3px double var(--navy);
}

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.info-item {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border-right: 1px solid rgba(22,35,61,0.22);
}

.info-item:last-child { border-right: none; }

.info-item .label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  opacity: 0.75;
}

.info-item .value {
  font-family: var(--font-condensed);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.info-item a:hover { text-decoration: underline; }


/* --------------------------------------------------------------------------
   11. ABOUT
   -------------------------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.about-text p + p { margin-top: var(--space-md); }

.about-media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

/* thin gold keyline around photos, like a framed label illustration */
.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(22,35,61,0.12);
}

.about-media img:first-child { aspect-ratio: 3/4; margin-top: var(--space-xl); }
.about-media img:last-child  { aspect-ratio: 3/4; margin-bottom: var(--space-xl); }


/* --------------------------------------------------------------------------
   12. BARBER BIO
   -------------------------------------------------------------------------- */
.bio-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.bio-photo {
  position: relative;
  isolation: isolate;   /* keeps the offset frame inside this box */
}

.bio-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
}

.bio-photo::before {
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  z-index: 0;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
}

/* Photo on the right instead of the left — used for the second barber so
   the two bios mirror each other. Grid order is flipped, not the markup,
   so the photo still comes first in the HTML (better for screen readers). */
.bio-grid--reverse { grid-template-columns: 1.15fr 0.85fr; }
.bio-grid--reverse .bio-photo { order: 2; }
.bio-grid--reverse .bio-photo::before { inset: -14px 14px 14px -14px; }

/* gold hairline between the two barber bios */
.bio-divider {
  height: 1px;
  margin: var(--section-y) 0;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.5;
}

/* Placeholder frame shown when a barber's photo file isn't in
   images/ yet (triggered by the onerror attribute in the HTML). */
.bio-photo.is-missing {
  display: grid;
  place-items: center;
  min-height: 360px;
  background: rgba(250,244,228,0.04);
  border: 1px dashed var(--gold);
  border-radius: var(--radius);
}

.bio-photo.is-missing img { display: none; }
.bio-photo.is-missing::before { display: none; }

.bio-photo.is-missing::after {
  content: "Photo coming soon";
  font-family: var(--font-condensed);
  font-size: 1.1rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

/* Small gold pill, e.g. "Starting September" */
.badge {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 5px 14px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 100px;
  font-family: var(--font-condensed);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.bio-name { font-size: var(--h2); margin-bottom: var(--space-xs); }

.bio-role {
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--gold);
  margin-bottom: var(--space-md);
}

.bio-text {
  max-width: 54ch;
  margin-bottom: var(--space-lg);
  color: var(--muted-on-dark);
}


/* --------------------------------------------------------------------------
   13. SERVICES
   -------------------------------------------------------------------------- */
/* --- cards (home page preview) --- */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.service-card {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(22,35,61,0.07);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(22,35,61,0.14);
}

.service-card h3 { font-size: var(--h3); margin-bottom: var(--space-xs); }

.service-card p {
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.service-card .price {
  font-family: var(--font-condensed);
  font-size: 1.7rem;
  letter-spacing: 0.03em;
  color: var(--red);
}

/* --- menu-style list (services page) --- */
.service-list { max-width: 860px; margin: 0 auto; }

/* Printed-menu layout on a grid:
     line 1   name ......... price
     line 2   description
   The description always gets its own full-width line rather than being
   squeezed into a column between the name and the price — that squeeze is
   what made longer descriptions unreadable on narrow screens.
   Grid areas place the items, so the HTML order (name, desc, dots, price)
   doesn't have to match the visual order. */
.service-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "name dots price"
    "desc desc desc";
  align-items: baseline;
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(34,40,60,0.15);
}

.service-row:first-child { border-top: 1px solid rgba(34,40,60,0.15); }

.service-row h3 {
  grid-area: name;
  font-size: var(--h3);
}

.service-row .desc {
  grid-area: desc;
  max-width: 60ch;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* dotted leader between the name and the price */
.service-row .dots {
  grid-area: dots;
  border-bottom: 1px dotted rgba(34,40,60,0.4);
  transform: translateY(-4px);
}

.service-row .price {
  grid-area: price;
  font-family: var(--font-condensed);
  font-size: 1.55rem;
  letter-spacing: 0.03em;
  color: var(--red);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   14. GALLERY + LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.gallery-item {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: var(--cream-dim);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.gallery-item:hover img { transform: scale(1.06); }

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22,35,61,0.3);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.gallery-item:hover::after { opacity: 1; }

/* fallback tile when a photo file is missing */
.gallery-item.empty { display: flex; align-items: center; justify-content: center; }
.gallery-item.empty img { display: none; }
.gallery-item.empty::before {
  content: "photo coming soon";
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(11,18,32,0.95);
}

.lightbox.is-open { display: flex; }

.lightbox img {
  max-width: min(1000px, 92vw);
  max-height: 88vh;
  width: auto;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}

.lightbox-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--paper);
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-close:hover { background: rgba(255,255,255,0.2); }


/* --------------------------------------------------------------------------
   15. REVIEWS  (Trustindex widget renders into .reviews-slot)
   -------------------------------------------------------------------------- */
/* ---- Trustindex colour overrides ----
   The widget ships with a dark theme: light summary text and near-black
   review cards. The light text vanishes against our cream background, so
   recolour the summary to navy and warm the cards to match the palette.
   Delete this block if you switch the widget to a light theme in the
   Trustindex dashboard instead. */
.reviews-slot .ti-rating-text,
.reviews-slot .ti-rating,
.reviews-slot .ti-rating-large,
.reviews-slot .ti-footer,
.reviews-slot .ti-footer-grid {
  color: var(--navy) !important;
}

.reviews-slot .ti-footer a,
.reviews-slot .ti-rating-text a {
  color: var(--navy) !important;
}

/* review cards: deep navy instead of black, with a gold keyline */
.reviews-slot .ti-review-item > .ti-inner {
  background: var(--navy) !important;
  border: 1px solid rgba(201,162,75,0.35) !important;
  border-radius: var(--radius) !important;
}

.reviews-slot .ti-review-item .ti-review-text,
.reviews-slot .ti-review-item .ti-profile-name,
.reviews-slot .ti-review-item .ti-read-more {
  color: var(--text-on-dark) !important;
}


/* --------------------------------------------------------------------------
   16. POLICY CARD
   -------------------------------------------------------------------------- */
.policy-card {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-xl);
  background: var(--paper);
  border: 1px solid var(--gold);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(22,35,61,0.09);
}

.policy-card h2 { font-size: var(--h2-small); margin-bottom: var(--space-md); }

.policy-title { font-weight: 700; margin-bottom: var(--space-xs); }

.policy-list { margin-bottom: var(--space-md); color: var(--text-muted); }

.policy-list li {
  position: relative;
  margin-bottom: var(--space-xs);
  padding-left: var(--space-lg);
}

.policy-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--red);
  transform: rotate(45deg);   /* small diamond bullet */
}


/* --------------------------------------------------------------------------
   17. CONTACT / HOURS / MAP
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
}

.contact-block h2 { font-size: var(--h2-small); margin-bottom: var(--space-md); }

.contact-list li {
  margin-bottom: var(--space-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

.contact-list .label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--red);
}

.contact-list a:hover { color: var(--navy); text-decoration: underline; }

.hours-table { width: 100%; border-collapse: collapse; }

.hours-table th,
.hours-table td {
  padding: var(--space-xs) 0;
  text-align: left;
  border-bottom: 1px solid rgba(34,40,60,0.14);
  font-size: var(--text-sm);
}

.hours-table th {
  width: 68px;
  font-family: var(--font-condensed);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hours-table td { text-align: right; color: var(--text-muted); }
.hours-table tr.is-closed td { color: #9A9384; }

.map-embed {
  position: relative;
  padding-bottom: 78%;
  overflow: hidden;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(22,35,61,0.1);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--navy);
  border-top: 3px double var(--gold);
  color: var(--muted-on-dark);
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--navy-line);
}

.footer-logo { height: 56px; margin-bottom: var(--space-md); }

.footer-col h3 {
  margin-bottom: var(--space-md);
  font-family: var(--font-condensed);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-col li { margin-bottom: var(--space-xs); }
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  font-size: var(--text-xs);
}

.social-links { display: flex; gap: var(--space-md); }

/* Icons are inline SVG in the HTML (no icon font, no extra requests).
   They inherit the link colour via fill: currentColor, so hover just
   changes the anchor colour and the glyph follows. */
.social-links a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--navy-line);
  border-radius: 50%;
  color: var(--muted-on-dark);
  transition: background 0.2s var(--ease),
              border-color 0.2s var(--ease),
              color 0.2s var(--ease),
              transform 0.15s var(--ease);
}

.social-links a svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.social-links a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   19. PAGE HEADER (Services / Gallery)
   -------------------------------------------------------------------------- */
.page-header {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 88px) 0;
  text-align: center;
  background: var(--navy-soft);
  border-bottom: 3px double var(--gold);
  color: var(--text-on-dark);
}

/* Optional photo behind the title band — same duotone treatment as the
   home page hero, just dimmer since this band is shorter. Remove the
   <img class="page-header-bg"> and the scrim div from the HTML to go
   back to a flat navy band. */
.page-header-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.08) sepia(18%);
  opacity: 0.38;
}

.page-header-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(29,46,78,0.82) 0%, rgba(29,46,78,0.72) 100%);
}

/* keep the text above the photo + scrim */
.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  margin-bottom: var(--space-sm);
  font-size: var(--h1-page);
  color: var(--paper);
}

.page-header p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted-on-dark);
}

.page-header .script { display: block; margin-bottom: var(--space-2xs); }


/* --------------------------------------------------------------------------
   20. SCROLL REVEAL  (js/main.js adds .is-in when the element scrolls in)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   21. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .about-grid,
  .bio-grid,
  .bio-grid--reverse { grid-template-columns: 1fr; }

  /* stack the mirrored bio the same way as the first one */
  .bio-grid--reverse .bio-photo { order: 0; }

  .bio-photo { max-width: 420px; }
  .bio-photo::before,
  .bio-grid--reverse .bio-photo::before { inset: -10px -10px 10px 10px; }

  .bio-divider { margin: var(--space-xl) 0; }

  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .announce-inner { justify-content: center; }
  .announce-right { display: none; }

  .info-grid { grid-template-columns: 1fr; }
  .info-item {
    border-right: none;
    border-bottom: 1px solid rgba(22,35,61,0.22);
  }
  .info-item:last-child { border-bottom: none; }
}

@media (max-width: 620px) {
  .hero { min-height: 78vh; }

  .about-media img:first-child,
  .about-media img:last-child { margin: 0; }

  /* drop the dotted leader on small screens — name and price sit at
     opposite ends of the line, description underneath */
  .service-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name price"
      "desc desc";
  }

  .service-row .dots { display: none; }

  .footer-grid  { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; text-align: center; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
}