/* =============================================================
   CAPILANO BARBERSHOP — styles.css
   Vanilla CSS. Mobile-first. Design tokens via custom properties.
   Sections:
     1. Tokens / variables
     2. Reset & base
     3. Typography helpers
     4. Buttons
     5. Layout helpers
     6. Status strip
     7. Header & navigation
     8. Mobile menu
     9. Hero
    10. Value strip
    11. Services menu
    12. About
    13. Why choose
    14. Hours
    15. Location
    16. Final CTA
    17. Footer
    18. Mobile action bar
    19. Modal
    20. Reveal animation / reduced motion
    21. Responsive breakpoints
============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand colours */
  --black: #000000;
  --red: #F10104;
  --gold: #FED85E;
  --white: #FFFFFF;
  --navy: #03038A;          /* logo navy — text/accent colour */
  --navy-hover: #050572;
  --navy-bg: #0b182e;       /* deep midnight navy — dark section backgrounds */
  --navy-bg-2: #081321;     /* deeper navy — footer */
  --navy-rgb: 11, 24, 46;   /* --navy-bg as rgb, for gradients/overlays */

  /* Derived neutrals */
  --ink: #03038A;          /* primary dark text — logo navy (was near-black) */
  --paper: #ffffff;
  --paper-2: #f6f4f0;      /* warm off-white section */
  --paper-3: #ece8e1;      /* subtle divider fill */
  --muted: #474766;        /* muted body text — soft navy-grey (AA on paper) */
  --muted-light: #b8b2a8;  /* muted text on dark */
  --line: rgba(20, 17, 15, 0.12);
  --line-strong: rgba(20, 17, 15, 0.22);
  --line-dark: rgba(255, 255, 255, 0.14);

  --red-hover: #cc0103;

  /* Ornament colour — gold reads on dark sections; on light sections the
     heritage line-work switches to ink so it stays clearly visible. */
  --orn: var(--gold);

  /* Typography — heritage system inspired by the logo lettering
     --font-display : Bevan   → vintage slab serif for major section headings
     --font-accent  : Rye     → flared Tuscan barber-sign serif, used sparingly
                                 for the marquee headings & "CAPILANO"-style labels
     --font-condensed: Oswald → condensed UI type (nav, buttons, labels, tables)
     --font-body    : Inter   → body copy, forms, descriptions (unchanged) */
  --font-display: "Bevan", Rockwell, "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-accent: "Rye", "Bevan", Georgia, serif;
  --font-condensed: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1320px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* Spacing scale */
  --space-section: clamp(3.5rem, 8vw, 7rem);

  /* Radius / borders */
  --radius: 3px;
  --radius-lg: 6px;

  /* Motion */
  --t-fast: 0.18s ease;
  --t: 0.28s ease;

  /* Header height (used for scroll offset) */
  --header-h: 76px;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 44px); /* status strip + header offset for anchors */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px base — readable on mobile */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;        /* guard against accidental horizontal scroll */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Navy text-selection accent (small brand splash) */
::selection { background: var(--navy); color: var(--white); }

h1, h2, h3 { font-family: var(--font-accent); font-weight: 600; line-height: 1.05; margin: 0; }

/* Focus visibility (never removed without replacement) */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}
.statusbar :focus-visible,
.site-footer :focus-visible,
.hero__content :focus-visible { outline-color: var(--gold); }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  z-index: 1200;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* ---------- 3. TYPOGRAPHY HELPERS ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: var(--red);
  margin: 0 0 0.9rem;
}
.eyebrow--light { color: var(--gold); }
.eyebrow--navy { color: var(--navy); }
/* On dark backgrounds navy is too low-contrast for text — lift it. */
.why .eyebrow--navy, .cta .eyebrow--navy { color: #8a8aff; }

.section__title {
  font-size: clamp(1.85rem, 5vw, 3.1rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Two-tone gold + navy hairline, a recurring premium detail under headings */
.section__head .section__title { position: relative; }
.section__head .section__title::after {
  content: ""; display: block; width: 66px; height: 3px; margin: 1.1rem auto 0;
  background: linear-gradient(90deg, var(--gold) 0 50%, var(--navy) 50% 100%);
}

.section__intro {
  color: var(--muted);
  max-width: 54ch;
  margin: 1rem auto 0;
  font-size: 1.075rem;
}

/* ---------- 4. BUTTONS ---------- */
.btn {
  --btn-py: 0.85rem;
  --btn-px: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-condensed);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--red); color: var(--white); border-color: var(--red); }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }

.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn--gold-outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--gold-outline:hover { background: var(--gold); color: var(--black); }

.btn--lg { --btn-py: 1.05rem; --btn-px: 2.1rem; font-size: 1.02rem; min-height: 54px; }
.btn--sm { --btn-py: 0.7rem; --btn-px: 1.15rem; font-size: 0.86rem; min-height: 44px; }
.btn--block { width: 100%; }

/* ---------- 5. LAYOUT HELPERS ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }

.section__head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }

.section__actions {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  justify-content: center; margin-top: 2.25rem;
}
.section__actions--left { justify-content: flex-start; margin-top: 1.75rem; }

/* Gold hairline divider utility */
.rule-gold { height: 1px; background: var(--gold); border: 0; opacity: 0.8; }

/* ---------- 6. STATUS STRIP ---------- */
.statusbar {
  background: var(--navy-bg);
  color: var(--white);
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(254, 216, 94, 0.28);
}
.statusbar__inner {
  max-width: var(--maxw-wide);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  align-items: center;
  justify-content: space-between;
}
.statusbar__status { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.statusbar__note { margin: 0; display: inline-flex; align-items: center; gap: 0.9rem; color: var(--muted-light); }
.statusbar__note a { color: var(--white); text-decoration: none; font-weight: 600; }
.statusbar__note a:hover { color: var(--gold); }
.statusbar__pill {
  color: var(--gold);
  border: 1px solid rgba(254, 216, 94, 0.5);
  border-radius: 999px;
  padding: 0.1rem 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
/* Status dot — paired with text, never colour alone */
.status-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted-light);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
  flex: none;
}
.status-dot--open { background: #2ecc71; }
.status-dot--closed { background: var(--red); }

/* ---------- 7. HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t), background var(--t);
}
.site-header--scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.08); }

.site-header__inner {
  max-width: var(--maxw-wide);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
  font-family: var(--font-condensed);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.4rem 0;
  position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--red); }

.nav__cta { margin-left: 0.4rem; }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle__bar { width: 22px; height: 2px; background: var(--ink); transition: transform var(--t-fast), opacity var(--t-fast); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 8. MOBILE MENU ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 1100; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity var(--t); }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(88vw, 360px);
  background: var(--navy-bg); color: var(--white);
  padding: 1.25rem 1.5rem 2rem;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t);
  overflow-y: auto;
}
.mobile-menu.is-open .mobile-menu__overlay { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mobile-menu__logo { height: 40px; width: auto; background: var(--white); padding: 6px 8px; border-radius: var(--radius); }
.mobile-menu__close { background: transparent; border: 0; color: var(--white); font-size: 2rem; line-height: 1; cursor: pointer; width: 44px; height: 44px; }

.mobile-menu__list { list-style: none; margin: 0 0 auto; padding: 0; }
.mobile-menu__list li { border-bottom: 1px solid var(--line-dark); }
.mobile-menu__list a {
  display: block; padding: 1.05rem 0;
  font-family: var(--font-condensed); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.15rem;
  text-decoration: none; color: var(--white);
}
.mobile-menu__list a:hover { color: var(--gold); }
.mobile-menu__actions { display: grid; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- 9. HERO ---------- */
.hero { position: relative; background: var(--navy-bg); color: var(--white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; transform: scaleX(-1); }
.hero::after { /* readability + subtle vignette */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--navy-rgb),0.92) 0%, rgba(var(--navy-rgb),0.62) 55%, rgba(var(--navy-rgb),0.42) 100%);
}
.hero__content {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3.5rem, 12vw, 8rem) var(--gutter) clamp(3rem, 9vw, 6rem);
}
.hero__title {
  font-size: clamp(2.7rem, 10vw, 6rem);
  text-transform: uppercase; letter-spacing: 0.005em;
  margin-bottom: 1.25rem;
}
.hero__lead { max-width: 46ch; font-size: 1.12rem; color: #e6e2db; margin: 0 0 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 2rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; font-size: 0.98rem; }
.hero__phone, .hero__addr { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__phone { color: var(--gold); text-decoration: none; font-weight: 600; }
.hero__phone:hover { text-decoration: underline; }
.hero__addr { color: var(--muted-light); }

/* ---------- 10. VALUE STRIP ---------- */
.values { background: var(--navy-bg); border-top: 1px solid var(--line-dark); }
.values__list {
  max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter);
  list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
}
.values__item {
  color: var(--white);
  font-family: var(--font-condensed);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: clamp(0.92rem, 2.5vw, 1.1rem);
  text-align: center;
  padding: 1.15rem 0.5rem;
  border-bottom: 1px solid var(--line-dark);
  position: relative;
}
.values__item::before { content: "—"; color: var(--gold); margin-right: 0.6rem; }
.values__item:nth-child(odd) { border-right: 1px solid var(--line-dark); }

/* ---------- 11. SERVICES MENU ---------- */
.services { background: var(--paper); }
.menu { list-style: none; margin: 0 auto; padding: 0; max-width: 780px; }
.menu__row {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.menu__row:first-child { border-top: 1px solid var(--line); }
.menu__name {
  font-family: var(--font-condensed); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  white-space: nowrap;
}
.menu__dots { flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); min-width: 1.5rem; }
.menu__price {
  font-family: var(--font-condensed); font-weight: 700;
  font-size: clamp(1.1rem, 3.5vw, 1.4rem);
  color: var(--red);
  white-space: nowrap;
}
.menu__note { text-align: center; color: var(--muted); font-size: 0.98rem; margin: 1.75rem auto 0; max-width: 46ch; }

/* ---------- 12. ABOUT ---------- */
.about { background: var(--paper-2); }
.about__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about__media { position: relative; }
.about__img {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
.about__media::before { /* gold corner accent (top-left) */
  content: ""; position: absolute; left: -10px; top: -10px;
  width: 64px; height: 64px;
  border-top: 3px solid var(--gold); border-left: 3px solid var(--gold);
}
.about__media::after { /* navy corner accent (bottom-right) — brand splash */
  content: ""; position: absolute; right: -10px; bottom: -10px;
  width: 64px; height: 64px;
  border-bottom: 3px solid var(--navy); border-right: 3px solid var(--navy);
}
.about__body h2 { margin-bottom: 1.25rem; }
.about__body p { color: var(--muted); margin: 0 0 1.1rem; }

/* ---------- 13. WHY CHOOSE ---------- */
.why { background: var(--navy-bg); color: var(--white); }
.why .section__title { color: var(--white); }
/* Lift the navy half of the flourish so it reads on the dark section */
.why .section__head .section__title::after {
  background: linear-gradient(90deg, var(--gold) 0 50%, #8a8aff 50% 100%);
}
.why__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.why__card {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  transition: border-color var(--t), transform var(--t);
}
.why__card:hover { border-color: rgba(254,216,94,0.55); transform: translateY(-4px); }
.why__icon { display: inline-flex; color: var(--gold); margin-bottom: 1rem; }
.why__title {
  font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.why__card p { color: var(--muted-light); margin: 0; font-size: 0.98rem; }

/* ---------- 14. HOURS ---------- */
.hours { background: var(--paper); }
.hours__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.hours__disclaimer { color: var(--muted); font-size: 0.92rem; border-left: 3px solid var(--gold); padding-left: 0.9rem; }
.hours__table { width: 100%; border-collapse: collapse; }
.hours__table th, .hours__table td {
  padding: 1rem 0.5rem; text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 1.02rem;
}
.hours__table th {
  font-family: var(--font-condensed); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.hours__table td { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.hours__table tr:first-child th, .hours__table tr:first-child td { border-top: 1px solid var(--line); }
/* Current-day highlight (added by JS). Uses more than colour: weight + label + border. */
.hours__table tr.is-today th { color: var(--red); }
.hours__table tr.is-today td { color: var(--ink); font-weight: 600; }
.hours__table tr.is-today {
  background: linear-gradient(90deg, rgba(241,1,4,0.06), rgba(241,1,4,0));
  box-shadow: inset 3px 0 0 var(--red);
}
.hours__table tr.is-today th::after {
  content: "Today"; display: inline-block; margin-left: 0.6rem;
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); background: var(--red);
  padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: middle;
}

/* ---------- 15. LOCATION ---------- */
.location { background: var(--paper-2); }
.location__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.location__body p { color: var(--muted); }
.location__address { font-style: normal; margin: 1.5rem 0; line-height: 1.9; }
.location__address a { color: var(--red); font-weight: 600; text-decoration: none; }
.location__address a:hover { text-decoration: underline; }
/* Storefront photo card with a barber-pole (red/white/navy) top accent */
.location__photo {
  position: relative; margin: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
}
.location__photo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 2;
  background: repeating-linear-gradient(45deg,
    var(--red) 0 14px, var(--white) 14px 28px, var(--navy) 28px 42px, var(--white) 42px 56px);
}
.location__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.location__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 1.5rem 1.25rem 1rem;
  color: var(--white);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.82));
}
.location__caption-title { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; }
.location__caption-addr { color: var(--muted-light); font-size: 0.92rem; }

/* ---------- OUR WORK GALLERY ---------- */
.work { background: var(--paper); }
.work__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem;
}
.work__item {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}
.work__item::after { /* navy frame revealed on hover/focus — brand splash */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 0 solid var(--navy); border-radius: var(--radius-lg);
  transition: border-width var(--t-fast);
}
.work__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.work__item:hover img { transform: scale(1.04); }
.work__item:hover::after { border-width: 3px; }

@media (min-width: 560px) { .work__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .work__grid { grid-template-columns: repeat(5, 1fr); gap: 1rem; } }

/* ---------- 16. FINAL CTA ---------- */
.cta {
  background: var(--navy-bg); color: var(--white); text-align: center;
  position: relative;
  /* stacked red/gold edge lines removed — the single ornate .section-frame
     (button-style) is now the section's only border. */
}
.cta__inner { padding-block: var(--space-section); }
.cta__title { font-size: clamp(2rem, 6vw, 3.6rem); text-transform: uppercase; }
.cta__lead { max-width: 50ch; margin: 1.1rem auto 2rem; color: var(--muted-light); font-size: 1.08rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ---------- 17. FOOTER ---------- */
.site-footer { background: var(--navy-bg-2); color: var(--muted-light); }
.site-footer__grid {
  display: grid; gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.site-footer__logo-plate {
  display: inline-block; background: var(--white);
  padding: 0.75rem 0.9rem; border-radius: var(--radius);
  border: 1px solid rgba(254,216,94,0.35);
}
.site-footer__logo-plate img { height: 46px; width: auto; }
.site-footer__blurb { margin: 1.25rem 0 1.25rem; max-width: 40ch; font-size: 0.96rem; }
.site-footer__heading {
  font-family: var(--font-condensed); color: var(--white);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem;
  margin: 0 0 1rem;
}
.site-footer__contact .site-footer__heading:nth-of-type(2) { margin-top: 1.75rem; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.site-footer__nav a, .site-footer__contact a { color: var(--muted-light); text-decoration: none; }
.site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--gold); }
.site-footer__contact address { font-style: normal; line-height: 1.9; margin-bottom: 0.5rem; }
.site-footer__hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; border-bottom: 1px dotted var(--line-dark); padding-bottom: 0.5rem; }
.site-footer__hours span:last-child { color: #ded9d0; }

.social { list-style: none; display: flex; gap: 0.7rem; margin: 0; padding: 0; }
.social__link {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  color: var(--muted-light); transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.social__link:hover, .social__link:focus-visible { color: var(--black); background: var(--gold); border-color: var(--gold); }

.site-footer__bar { border-top: 1px solid var(--line-dark); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding-block: 1.4rem; font-size: 0.85rem; }
.site-footer__bar-inner p { margin: 0; }
.site-footer__made { color: var(--muted-light); } /* muted var is now navy — stay light on the dark footer */

/* ---------- 18. MOBILE ACTION BAR ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: none; grid-template-columns: 1fr 1fr;
  background: rgba(var(--navy-rgb),0.97);
  border-top: 1px solid rgba(254,216,94,0.35);
  padding: 0.5rem;
  gap: 0.5rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}
.action-bar__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; text-decoration: none;
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; font-size: 0.95rem; border-radius: var(--radius);
}
.action-bar__btn--call { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.4); }
.action-bar__btn--book { background: var(--red); color: var(--white); }

/* ---------- 19. MODAL ---------- */
.modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.modal[hidden] { display: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.modal__box {
  position: relative; z-index: 1; width: min(460px, 100%);
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--red);
  padding: 2.25rem 1.9rem 2rem;
  text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,0.35);
}
.modal__close { position: absolute; top: 0.5rem; right: 0.6rem; background: transparent; border: 0; font-size: 1.9rem; line-height: 1; cursor: pointer; width: 44px; height: 44px; color: var(--muted); }
.modal__close:hover { color: var(--ink); }
.modal__eyebrow { color: var(--red); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; font-weight: 700; margin: 0 0 0.4rem; }
.modal__title { font-size: 2rem; text-transform: uppercase; margin-bottom: 0.75rem; }
.modal__desc { color: var(--muted); margin: 0 0 1.5rem; }
.modal__desc a { color: var(--red); font-weight: 600; }

/* ---------- 20. REVEAL ANIMATION ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

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

/* ---------- CONTACT PAGE ---------- */
.contact-hero {
  background: var(--navy-bg); color: var(--white);
  padding-block: clamp(3rem, 9vw, 6rem);
  border-bottom: 1px solid var(--line-dark);
  position: relative;
  overflow: hidden;
}
.contact-hero__media { position: absolute; inset: 0; z-index: 0; }
.contact-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.contact-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--navy-rgb),0.9) 0%, rgba(var(--navy-rgb),0.66) 60%, rgba(var(--navy-rgb),0.46) 100%);
}
.contact-hero .container { position: relative; z-index: 1; }
.contact-hero::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 3px; z-index: 1;
  /* gold + navy split — brand splash */
  background: linear-gradient(90deg, var(--gold) 0 50%, var(--navy) 50% 100%);
}
.contact-hero__title { font-size: clamp(2.3rem, 7vw, 4.4rem); text-transform: uppercase; margin-bottom: 1.1rem; }
.contact-hero__lead { max-width: 52ch; color: #e6e2db; font-size: 1.1rem; margin: 0 0 2rem; }
.contact-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.contact-info { background: var(--paper); }
.info-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.info-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  background: var(--paper);
}
/* Alternate the top accent gold / navy — restrained brand splash */
.info-card:nth-child(even) { border-top-color: var(--navy); }
.info-card__icon { display: inline-flex; color: var(--red); margin-bottom: 0.75rem; }
.info-card__title {
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.info-card p, .info-card address { margin: 0.35rem 0; font-style: normal; color: var(--muted); line-height: 1.7; }
.info-card a { color: var(--red); text-decoration: none; font-weight: 600; }
.info-card a:hover { text-decoration: underline; }
.info-card__hours { list-style: none; margin: 0; padding: 0; }
.info-card__hours li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.92rem; padding: 0.28rem 0; border-bottom: 1px dotted var(--line); color: var(--ink); }
.info-card__hours span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.info-card__fine { font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; }

/* Contact form */
.contact-form-section { background: var(--paper-2); }
.contact-form-wrap { max-width: 760px; }
.form { margin-top: 0.5rem; }
.form__row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.field { display: flex; flex-direction: column; }
.field--spacer { display: none; }
.field label { font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; margin-bottom: 0.45rem; }
.req { color: var(--red); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.8rem 0.9rem; min-height: 48px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(241,1,4,0.14);
}
.field [aria-invalid="true"] { border-color: var(--red); background: #fff7f7; }
.field__error { color: var(--red); font-size: 0.85rem; font-weight: 600; margin-top: 0.35rem; min-height: 1em; }

.field--check { flex-direction: row; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.2rem; }
.field--check input { min-height: auto; width: 20px; height: 20px; margin-top: 0.2rem; accent-color: var(--red); flex: none; }
.field--check label { text-transform: none; letter-spacing: normal; font-family: var(--font-body); font-weight: 400; font-size: 0.95rem; color: var(--muted); margin: 0; line-height: 1.5; }

.form__notice {
  background: #fff4f4; border: 1px solid var(--red); border-left-width: 4px;
  color: #8a0002; padding: 1rem 1.1rem; border-radius: var(--radius);
  margin: 0 0 1.5rem; font-weight: 500;
}
.form__notice a { color: var(--red); font-weight: 700; }
.form__hint { color: var(--muted); font-size: 0.92rem; margin-top: 1rem; }
.form__hint a { color: var(--red); font-weight: 600; }

@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .field--spacer { display: block; }
}
@media (min-width: 720px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .info-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 21. RESPONSIVE ---------- */

/* Tablet and up */
@media (min-width: 720px) {
  .values__list { grid-template-columns: repeat(4, 1fr); }
  .values__item { border-right: 1px solid var(--line-dark); border-bottom: 0; }
  .values__item:last-child { border-right: 0; }
  .values__item:nth-child(odd) { border-right: 1px solid var(--line-dark); }

  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 0.85fr 1fr; }
  .hours__grid { grid-template-columns: 1fr 1fr; }
  .location__grid { grid-template-columns: 1.1fr 0.9fr; }
  .site-footer__grid { grid-template-columns: 1.4fr 0.8fr 1fr; }
}

/* Desktop */
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: repeat(4, 1fr); }
  .hero__content { padding-block: clamp(5rem, 10vw, 9rem); }
}

/* Mobile navigation swap */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .action-bar { display: grid; }
  /* keep footer clear of the sticky action bar */
  .site-footer { padding-bottom: 72px; }
}

/* When mobile menu open, lock background scroll */
body.menu-open { overflow: hidden; }

/* Very small screens */
@media (max-width: 380px) {
  .statusbar__note .statusbar__pill { display: none; } /* keep strip tidy on tiny screens */
  .hero__actions .btn { width: 100%; }
}

/* =============================================================
   22. HERITAGE BRAND SYSTEM
   A cohesive decorative language taken from the Capilano Barbershop
   logo — vintage serif typography, arabesque patterning, scrollwork
   dividers, framed-signage headings, panel framing and barbershop
   emblems — applied consistently across both pages.
   Sub-sections:  A Typography · B Patterns · C Heading ornaments
                  D Panels & image framing · E Buttons · F Hero
                  G Header/nav · H Footer · I Mobile
   Line ornaments are rendered with CSS mask() so a single asset
   recolours by context (var(--orn): gold on dark, ink on light).
   All purely-decorative layers use pointer-events:none / aria-hidden.
============================================================= */
.deco { pointer-events: none; }

/* Masked line-ornament helper: shape from SVG, colour from --orn */
.orn-mask {
  background-color: var(--orn); pointer-events: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ---- A. TYPOGRAPHY (heritage serif system) ---- */
/* Bevan & Rye are single-weight faces — never request synthetic bold */
h1, h2, h3 { font-weight: 400; }
/* Rye is a more decorative face than Bevan — give headings a little more
   leading so multi-line section titles stay crisp. */
.section__title { line-height: 1.12; letter-spacing: 0.005em; }
.hero__title, .cta__title, .contact-hero__title {
  font-family: var(--font-accent); font-weight: 400; line-height: 1.04; letter-spacing: 0.01em;
}
.hero__title { line-height: 1; }
/* "CAPILANO"-style hero label in the flared accent face (used sparingly) */
.hero .eyebrow { font-family: var(--font-accent); font-size: 1rem; letter-spacing: 0.14em; }

/* ---- B. PATTERNS (arabesque lattice from the logo corners) ---- */
/* Light sections switch ornament line-work to ink for visibility */
.services, .about, .hours, .work, .location,
.contact-info, .contact-form-section { --orn: var(--ink); }

/* Value strip (dark) — subtle continuity texture behind short labels */
.values { position: relative; }
.values::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") center / 104px 104px repeat;
  opacity: 0.09;
}
.values__list { position: relative; z-index: 1; }

/* Services (light) — patterned side panels flanking the menu */
.services { position: relative; overflow: hidden; }
.services::before, .services::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 0; pointer-events: none;
  background: url("assets/decorative/heritage-pattern-ink.svg") center / 92px 92px repeat;
  opacity: 0.10;
}
.services::before { left: 0;  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.services::after  { right: 0; -webkit-mask-image: linear-gradient(270deg, #000, transparent); mask-image: linear-gradient(270deg, #000, transparent); }
.services > .container { position: relative; z-index: 1; }

/* Hours (light) — pattern zone behind the intro heading only */
.hours__intro { position: relative; }
.hours__intro::before {
  content: ""; position: absolute; left: -14px; top: -12px; width: 190px; height: 150px; z-index: 0; pointer-events: none;
  background: url("assets/decorative/heritage-pattern-ink.svg") top left / 82px 82px repeat;
  opacity: 0.13;
  -webkit-mask-image: radial-gradient(120px 120px at top left, #000, transparent 72%);
          mask-image: radial-gradient(120px 120px at top left, #000, transparent 72%);
}
.hours__intro > * { position: relative; z-index: 1; }

/* Final CTA (dark) — visible lattice (replaces the old 3.5% layer) */
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") center / 108px 108px repeat;
  opacity: 0.12;
}
.cta__inner { position: relative; z-index: 1; }

/* Contact-hero (dark) — gold lattice over the darkened photo */
.contact-hero__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") center / 110px 110px repeat;
  opacity: 0.14;
}

/* ---- C. HEADING ORNAMENTS (framed vintage signage) ---- */
/* Centred section heads: crossed-razor motif + serif title + short divider */
.section__head { position: relative; }
.section__head::before {
  content: ""; display: block; width: 42px; height: 42px; margin: 0 auto 0.7rem;
  background-color: var(--orn); pointer-events: none;
  -webkit-mask: url("assets/decorative/crossed-razors.svg") center / contain no-repeat;
          mask: url("assets/decorative/crossed-razors.svg") center / contain no-repeat;
}
.section__head .section__title::after {
  content: ""; display: block; width: 200px; max-width: 76%; height: 16px; margin: 1.1rem auto 0;
  background: none; background-color: var(--orn);
  -webkit-mask: url("assets/decorative/ornate-short-divider.svg") center / contain no-repeat;
          mask: url("assets/decorative/ornate-short-divider.svg") center / contain no-repeat;
}
/* Left-aligned heads (About, Hours, Location): serif title + left short divider */
.title-flourish { position: relative; }
.title-flourish::after {
  content: ""; display: block; width: 170px; max-width: 82%; height: 15px; margin: 0.95rem 0 0;
  background-color: var(--orn); pointer-events: none;
  -webkit-mask: url("assets/decorative/ornate-short-divider.svg") left center / contain no-repeat;
          mask: url("assets/decorative/ornate-short-divider.svg") left center / contain no-repeat;
}

/* ---- D. PANELS & IMAGE FRAMING (classic signwork) ---- */
/* Hours panel — gold rule + ornate corners */
.hours__panel {
  position: relative; padding: 1.4rem 1.35rem 0.6rem;
  border: 2px solid rgba(254, 216, 94, 0.55);
  border-radius: var(--radius);
}
.hours__panel::before, .hours__panel::after {
  content: ""; position: absolute; width: 40px; height: 40px; pointer-events: none;
  background-color: var(--orn);
  -webkit-mask: url("assets/decorative/ornate-corner.svg") center / contain no-repeat;
          mask: url("assets/decorative/ornate-corner.svg") center / contain no-repeat;
}
.hours__panel::before { top: 4px; left: 4px; }
.hours__panel::after  { bottom: 4px; right: 4px; transform: rotate(180deg); }

/* Contact info cards — subtle inner gold rule (double-border feel) */
.info-card { box-shadow: inset 0 0 0 1px rgba(254, 216, 94, 0.28); }

/* Services menu — a single short-divider flourish closing the list
   (the heading already carries its own divider above the menu). */
.services .menu { position: relative; }
.services .menu::after {
  content: ""; display: block; width: 190px; max-width: 60%; height: 15px; margin: 1.25rem auto 0;
  background-color: var(--orn); pointer-events: none;
  -webkit-mask: url("assets/decorative/ornate-short-divider.svg") center / contain no-repeat;
          mask: url("assets/decorative/ornate-short-divider.svg") center / contain no-repeat;
}

/* Feature-image framing */
.about__img { border: 2px solid rgba(254, 216, 94, 0.5); box-shadow: 12px 12px 0 -2px rgba(241, 1, 4, 0.12); }
.location__photo { border: 2px solid rgba(254, 216, 94, 0.45); }
.work__item { box-shadow: inset 0 0 0 1px rgba(254, 216, 94, 0.3); }

/* ---- E. BUTTONS (fine gold inner border) ---- */
.btn--primary { box-shadow: inset 0 0 0 1.5px rgba(254, 216, 94, 0.5); }
.btn--primary:hover { box-shadow: inset 0 0 0 1.5px rgba(254, 216, 94, 0.85); }

/* ---- F. HERO TREATMENT ---- */
.hero { position: relative; }
.hero__media { z-index: 0; }
.hero::after { z-index: 1; }
.hero::before { /* heritage pattern band along the bottom, away from faces/text */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 2; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") center bottom / 110px 110px repeat;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent);
}
.hero__content { position: relative; z-index: 3; }
.hero__arch { /* larger, accurate Capilano arch */
  display: block; width: 240px; max-width: 72%; height: 42px; margin: 0 0 1rem;
  background-color: var(--orn);
  -webkit-mask: url("assets/decorative/logo-inspired-arch.svg") left center / contain no-repeat;
          mask: url("assets/decorative/logo-inspired-arch.svg") left center / contain no-repeat;
}
.hero__flourish { /* short divider supporting the headline */
  display: block; width: 230px; max-width: 80%; height: 16px; margin: 1.2rem 0 0;
  background-color: var(--orn);
  -webkit-mask: url("assets/decorative/ornate-short-divider.svg") left center / contain no-repeat;
          mask: url("assets/decorative/ornate-short-divider.svg") left center / contain no-repeat;
}

/* ---- G. HEADER & NAVIGATION ---- */
.site-header { position: relative; border-bottom: 2px solid rgba(254, 216, 94, 0.5); }
.site-header::after { /* fine ornamental strip along the header base */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; pointer-events: none;
  background: url("assets/decorative/ornamental-border-strip.svg") center / auto 5px repeat-x;
  opacity: 0.5;
}

/* ---- H. FOOTER TREATMENT ---- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before { /* heritage pattern along the upper portion */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 240px; z-index: 0; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") top center / 112px 112px repeat;
  opacity: 0.10;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
}
.site-footer > * { position: relative; z-index: 1; }
.footer-ornament { /* medallion emblem centred on a scrollwork rule */
  height: clamp(74px, 10vw, 98px);
  border-bottom: 1px solid var(--line-dark);
  background:
    url("assets/decorative/decorative-medallion.svg") center / 58px 58px no-repeat,
    url("assets/decorative/ornamental-border-strip.svg") center / auto 12px repeat-x;
  pointer-events: none;
}
.site-footer__brandname { /* business name in the flared accent face */
  font-family: var(--font-accent); font-size: 1.6rem; line-height: 1;
  color: var(--gold); margin: 0 0 0.75rem;
}

/* ---- Standalone ornamental divider between sections (before the CTA) ---- */
.section-ornament {
  height: clamp(52px, 8vw, 78px);
  margin-top: clamp(1.75rem, 4vw, 3rem);
  background-color: var(--orn);
  -webkit-mask: url("assets/decorative/ornate-horizontal-divider.svg") center / min(300px, 72vw) auto no-repeat;
          mask: url("assets/decorative/ornate-horizontal-divider.svg") center / min(300px, 72vw) auto no-repeat;
  pointer-events: none;
}

/* CTA heading flourish + ornate corners */
.cta__title::after {
  content: ""; display: block; width: 210px; max-width: 74%; height: 16px; margin: 1.1rem auto 0;
  background-color: var(--gold); pointer-events: none;
  -webkit-mask: url("assets/decorative/ornate-short-divider.svg") center / contain no-repeat;
          mask: url("assets/decorative/ornate-short-divider.svg") center / contain no-repeat;
}
.cta__inner::before, .cta__inner::after {
  content: ""; position: absolute; width: 54px; height: 54px; pointer-events: none;
  background-color: var(--gold);
  -webkit-mask: url("assets/decorative/ornate-corner.svg") center / contain no-repeat;
          mask: url("assets/decorative/ornate-corner.svg") center / contain no-repeat;
}
.cta__inner::before { top: 6px; left: 6px; }
.cta__inner::after  { bottom: 6px; right: 6px; transform: rotate(180deg); }

/* Crossed-razor mark for the contact-hero heading (dark → gold) */
.ornament-blades {
  display: block; width: 40px; height: 40px; margin: 0 0 0.9rem;
  background-color: var(--gold);
  -webkit-mask: url("assets/decorative/crossed-razors.svg") center / contain no-repeat;
          mask: url("assets/decorative/crossed-razors.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Mobile-menu heritage: patterned panel + barber-pole emblem at the foot */
.mobile-menu__panel { position: relative; }
.mobile-menu__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") center / 94px 94px repeat;
  opacity: 0.07;
}
.mobile-menu__head, .mobile-menu__list, .mobile-menu__actions, .mobile-menu__ornament { position: relative; z-index: 1; }
.mobile-menu__ornament {
  margin-top: 1.6rem; padding-top: 1.4rem; height: 58px;
  border-top: 1px solid var(--line-dark);
  background: url("assets/decorative/barber-pole-ornament.svg") center 1.4rem / auto 40px no-repeat;
  pointer-events: none;
}
/* Outline button reads light on the dark menu panel */
.mobile-menu__actions .btn--outline { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.mobile-menu__actions .btn--outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ---- I. MOBILE ADJUSTMENTS (simplify, never strip the identity) ---- */
@media (max-width: 640px) {
  .services::before, .services::after { display: none; }   /* side bands off; heading + menu flourishes remain */
  .cta__inner::before, .cta__inner::after { display: none; } /* drop CTA corners */
  .hours__panel::before, .hours__panel::after { width: 32px; height: 32px; } /* smaller corners */
  .section__head::before { width: 34px; height: 34px; }
  .hero__arch { width: 190px; height: 34px; }
  .hero__flourish { width: 180px; }
  .about__img { box-shadow: 8px 8px 0 -2px rgba(241, 1, 4, 0.12); }
  .site-footer__brandname { font-size: 1.35rem; }
}

/* No continuous animation is introduced; ornaments are static and
   the global prefers-reduced-motion rule above still applies. */

/* =============================================================
   23. ORNATE FRAMING  (reference-inspired heritage plaques)
   Gold-framed buttons, crested & framed cards, grand section
   frames, heading wings, and floral damask on the navy sections.
   Frames use CSS border-image so a single SVG scales to any size.
============================================================= */

/* ---- Buttons: ornate gold frame (via a non-intrusive overlay) ---- */
.btn { position: relative; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 8px solid transparent;
  border-image: url("assets/decorative/frame-ornate.svg") 24 / 8px / 0 stretch;
}
.btn--sm::after { border-width: 6px; border-image-width: 6px; }
.btn--lg::after { border-width: 9px; border-image-width: 9px; }
/* the frame now supplies the gold line, so drop the old inset ring */
.btn--primary, .btn--primary:hover { box-shadow: none; }

/* ---- Cards: scrollwork crest + ornate gold frame ---- */
.why__card, .info-card { position: relative; overflow: visible; }
.why__card { padding-top: 2rem; }
.why__card::before, .info-card::before {           /* crest */
  content: ""; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 36px; pointer-events: none;
  background: url("assets/decorative/card-crest.svg") center / contain no-repeat;
}
.why__card::after, .info-card::after {             /* gold frame */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 12px solid transparent;
  border-image: url("assets/decorative/frame-ornate.svg") 24 / 11px / 0 stretch;
}
/* neutralise the older info-card accents so the frame reads cleanly */
.info-card { border: 1px solid rgba(254,216,94,0.22); box-shadow: none; padding-top: 2rem; }
.info-card:nth-child(even) { border-top-color: rgba(254,216,94,0.22); }

/* ---- Section frame (Why + Final CTA) ---- */
.why, .cta { position: relative; }
.section-frame {
  position: absolute; inset: 18px; pointer-events: none; z-index: 1;
  border: 14px solid transparent;
  /* same ornate frame as the buttons, scaled up for the section */
  border-image: url("assets/decorative/frame-ornate.svg") 24 / 14px / 0 stretch;
}
.why > .container, .cta__inner { position: relative; z-index: 2; }
/* the small CTA corner ornaments are superseded by the grand frame */
.cta__inner::before, .cta__inner::after { display: none; }

/* ---- Why section: floral damask behind the content ---- */
.why { overflow: hidden; }
.why::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") center / 132px 132px repeat;
  opacity: 0.10;
}

/* ---- Heading wings flanking the dark feature headings ---- */
.why .section__title, .cta__title {
  padding-inline: 118px;
  background:
    url("assets/decorative/heading-wing-l.svg") left center / 100px auto no-repeat,
    url("assets/decorative/heading-wing-r.svg") right center / 100px auto no-repeat;
}

/* ---- Mobile: scale the framing down, drop the wings ---- */
@media (max-width: 720px) {
  .why .section__title, .cta__title { padding-inline: 0; background: none; }
}
@media (max-width: 640px) {
  .section-frame { inset: 9px; border-width: 12px; border-image-width: 12px; }
  .why__card::before, .info-card::before { width: 86px; height: 30px; top: -11px; }
  .btn::after { border-width: 6px; border-image-width: 6px; }
}

/* ---- Deeper gold frame for outline buttons on LIGHT sections
        (bright brand gold reads too faint on white) ---- */
.services .btn--outline::after,
.hours .btn--outline::after,
.location .btn--outline::after {
  border-image-source: url("assets/decorative/frame-ornate-deep.svg");
}

/* ---- Contact info cards on a navy band (dark cards, like the Why cards,
        so the gold frames + crests pop like the reference) ---- */
.contact-info { background: var(--navy-bg); position: relative; overflow: hidden; }
.contact-info::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/decorative/damask-pattern.svg") center / 132px 132px repeat;
  opacity: 0.08;
}
.contact-info > .container { position: relative; z-index: 1; }
.info-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  border-color: rgba(254,216,94,0.22);
}
.info-card__title { color: var(--white); }
.info-card__icon { color: var(--gold); }
.info-card p, .info-card address { color: var(--muted-light); }
.info-card a { color: var(--gold); }
.info-card a:hover { color: var(--white); }
.info-card__hours li { color: #dcd7ce; border-bottom-color: var(--line-dark); }
.info-card__hours span:last-child { color: var(--muted-light); }
.info-card__fine { color: var(--muted-light); }