/* The Garrison Barber & Goods — modern rebuild of the Wix original */

@font-face {
  font-family: "Bebas Neue";
  src: url("assets/fonts/headline.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans Cond";
  src: url("assets/fonts/nimbus-sans-con.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* THE GARRISON — palette taken from the shop's own logo artwork
     (#bda868 gold, #7e8034 olive, #5c5942 khaki) and the oxblood
     storefront facade. Oxblood carries every action because gold on
     light fails contrast; gold is the accent on dark ground only. */
  --red: #8F5330;
  --red-dark: #74411F;
  --red-bright: #A6633A;
  --gold: #BDA868;
  --leather: #8F5330;
  --leather-dark: #74411F;
  --leather-light: #A6633A;
  --chrome: #372E2C;
  --gold-deep: #9C8949;
  --olive: #7E8034;
  --khaki: #5C5942;
  --dark: #1A1714;
  --ink: #14120F;
  --grey: #9A9287;
  --grey-text: #6B655C;
  --card: #F6F3ED;
  --paper: #F1EDE4;
  --line: rgba(20,20,20,.12);
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "Montserrat", Helvetica, Arial, sans-serif;
  --cond: "Nimbus Sans Cond", "Arial Narrow", sans-serif;
  --shadow-card: 0 2px 6px rgba(0,0,0,.06), 0 12px 28px rgba(0,0,0,.09);
  --shadow-card-hover: 0 4px 10px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.14);
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: #111; background: #fff; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 30px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(195,58,48,.28); }
.btn-red:hover { background: var(--red-dark); }
.btn-ghost { border: 1.5px solid #1b1b1b; color: #1b1b1b; background: transparent; }
.btn-ghost:hover { background: #1b1b1b; color: #fff; }
.btn-ghost-red { border: 1.5px solid var(--red); color: var(--red); background: transparent; }
.btn-ghost-red:hover { background: var(--red); color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(18,18,18,.96);
  backdrop-filter: blur(12px);
  height: 79px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.14);
}
.header-inner {
  max-width: 1265px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 63px; height: auto; }
.brand span {
  font-family: var(--cond);
  font-size: 20px;
  letter-spacing: 1px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.main-nav { display: flex; gap: 26px; margin-left: auto; }
.main-nav a {
  font-family: var(--cond);
  font-size: 18px;
  color: #fff;
  transition: color .15s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--red); }
.header-socials { display: flex; gap: 14px; align-items: center; }
.header-socials .soc { color: #fff; width: 24px; height: 24px; transition: color .15s ease, transform .15s ease; }
.header-socials .soc:hover { color: var(--red); transform: scale(1.12); }
.header-socials svg { width: 100%; height: 100%; }
.nav-toggle { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: #000;
  overflow: hidden;
  min-height: clamp(650px, calc(100svh - 79px), 790px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 72px 24px 78px;
  isolation: isolate;
  box-shadow: inset 0 -1px rgba(255,255,255,.08);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/hero.jpg?v=13482ec4") center center/cover no-repeat;
  filter: saturate(.9) contrast(1.02);
  transform: scale(1.004);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,7,7,.96) 0%, rgba(7,7,7,.89) 26%, rgba(7,7,7,.64) 47%, rgba(7,7,7,.15) 73%, rgba(7,7,7,.08) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.5) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1265px, 100%);
  margin: 0 auto;
}
.hero-copy { width: min(650px, 51vw); }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 17px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.25px;
  text-transform: uppercase;
}
.hero-eyebrow span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--red-bright);
}
.hero-eyebrow span:first-child::after {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(255,255,255,.4);
}
.hero-headline {
  font-family: var(--display);
  font-weight: 700;
  max-width: 650px;
  font-size: clamp(62px, 6.15vw, 96px);
  line-height: .9;
  color: #fff;
  letter-spacing: .8px;
  text-wrap: balance;
  text-shadow: 0 3px 7px rgba(0,0,0,.4), 0 14px 45px rgba(0,0,0,.38);
}
.hero-sub {
  font-family: var(--display);
  font-weight: 700;
  max-width: 610px;
  font-size: clamp(20px, 2.05vw, 30px);
  line-height: 1.04;
  color: var(--red-bright);
  margin-top: 18px;
  letter-spacing: 2px;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.hero-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.8);
  max-width: 570px;
  margin: 18px 0 0;
  padding-left: 17px;
  border-left: 2px solid rgba(214,74,62,.8);
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 25px;
}
.hero-actions .btn { margin: 0; }
.btn-hero {
  min-width: 242px;
  font-size: 14px;
  padding: 14px 27px;
  letter-spacing: .25px;
}
.btn-hero-secondary {
  min-width: 145px;
  padding: 13px 22px;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  background: rgba(10,10,10,.18);
  backdrop-filter: blur(5px);
  font-size: 14px;
}
.btn-hero-secondary:hover {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.hero-proof {
  display: flex;
  align-items: center;
  gap: 17px;
  width: fit-content;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hero-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;   /* never let the images spill past the container onto the text */
  margin: 0;
}
/* 54px rendered the Las Vegas Bee award art as an unreadable smudge — these are
   the strongest trust signal on the page. 96px is the largest that still fits
   beside the "Two-Time Winner" caption in this two-column hero. */
.hero-badges img {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.55));
  transition: transform .25s ease;
}
.hero-badges img:hover { transform: scale(1.05); }
.hero-proof p { color: #fff; font-size: 12.5px; line-height: 1.45; }
.hero-proof strong {
  display: block;
  max-width: 250px;
  font-size: 11.5px;
  letter-spacing: .65px;
  text-transform: uppercase;
}
.hero-proof span {
  display: block;
  color: rgba(255,255,255,.57);
  margin-top: 2px;
}
.hero-watermark {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 1;
  color: rgba(255,255,255,.48);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.8px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ---------- section headings ---------- */
.kicker {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #9C9C9A;
  text-align: center;
  margin-bottom: 12px;
}
.h-display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 60px);
  text-align: center;
  letter-spacing: 1px;
  color: var(--red);
  text-wrap: balance;
}
.h-display::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin: 18px auto 0;
  background: var(--red);
  transform: skewX(-24deg);
  border-radius: 1px;
}
.section-sub {
  font-size: clamp(16px, 1.6vw, 20px);
  text-align: center;
  color: #1b1b1b;
  max-width: 760px;
  margin: 12px auto 0;
  line-height: 1.55;
}

/* ---------- gallery ---------- */
.gallery {
  position: relative;
  padding: 84px 20px 68px;
  background: linear-gradient(180deg, #fff 0%, #fff 66%, #fbfaf8 100%);
}
.gallery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 38px;
  background: var(--red);
  opacity: .55;
}
.gallery-grid {
  max-width: 1220px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.gallery-grid button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1;
}
.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}
.gallery-grid button:hover img { transform: scale(1.06); filter: brightness(1.06); }

/* ---------- gallery marquee (homepage): two rows drifting opposite ways ---------- */
.gallery-marquee {
  margin: 40px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* dissolve at the edges instead of hard-cutting */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-row {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: gallery-slide 68s linear infinite;
  will-change: transform;
}
.marquee-row.row-b { animation-duration: 86s; animation-direction: reverse; }
/* clicking a moving target is miserable — hold still while they look */
/* Keep the marquee moving on hover (Logan's call, 2026-08-18). It still pauses
   on keyboard focus so a keyboard user can actually reach a photo, and the
   reduced-motion block further down turns the animation off entirely. */
.gallery-marquee:focus-within .marquee-row { animation-play-state: paused; }

.marquee-row button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  width: 262px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.07);
  transition: transform .3s ease, box-shadow .3s ease;
}
.marquee-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease, filter .45s ease;
}
.marquee-row button:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.marquee-row button:hover img { transform: scale(1.07); filter: brightness(1.05); }
.marquee-row button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

@keyframes gallery-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 760px) {
  .gallery-marquee { gap: 10px; margin-top: 30px; }
  .marquee-row { gap: 10px; animation-duration: 46s; }
  .marquee-row.row-b { animation-duration: 58s; }
  .marquee-row button { width: 156px; border-radius: 10px; }
}

/* motion-sensitive visitors: stop the drift, keep every photo reachable */
@media (prefers-reduced-motion: reduce) {
  .marquee-row { animation: none; overflow-x: auto; scrollbar-width: none; }
  .marquee-row::-webkit-scrollbar { display: none; }
  .gallery-marquee { -webkit-mask-image: none; mask-image: none; }
}

.gallery-cta { text-align: center; margin-top: 32px; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10,10,10,.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-img {
  max-width: min(88vw, 1100px);
  max-height: 84vh;
  border-radius: 8px;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: var(--red); }
.lb-close { top: 22px; right: 26px; font-size: 32px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #bbb;
  font-size: 13px;
  letter-spacing: 1px;
}

/* ---------- locations ---------- */
.locations { padding: 64px 20px 72px; background: #F2F2EF; }
.loc-grid {
  max-width: 1265px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.loc-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.loc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.loc-card img {
  width: 100%;
  aspect-ratio: 403/300;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.loc-card:hover img { transform: scale(1.035); filter: contrast(1.03); }
.loc-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.loc-label { font-size: 12px; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.loc-name { font-family: var(--display); font-weight: 700; font-size: 28px; margin-top: 4px; color: #1b1b1b; letter-spacing: .5px; }
.loc-addr { font-size: 14px; margin-top: 8px; line-height: 1.55; color: var(--grey-text); }
.loc-hours-label { font-weight: 700; font-size: 13px; margin-top: 14px; text-transform: uppercase; letter-spacing: .5px; }
.loc-hours { list-style: none; font-size: 14px; line-height: 1.65; margin-top: 4px; color: var(--grey-text); }
.loc-btns { display: flex; gap: 12px; margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
/* Two buttons share a ~256px card. At 14px + 20px side padding the labels
   wrapped to 2 lines ("Get Directions", "Book N. Las Vegas"), leaving the red
   and outline buttons at mismatched heights. Match the site's 12px button
   scale, let them shrink, and keep every label on one line. */
.loc-btns .btn {
  padding: 12px 12px;
  font-size: 11px;
  letter-spacing: .85px;
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}

/* ---------- team parallax ---------- */
.team-parallax {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: url("assets/banner-cta.avif?v=13482ec4") center 44%/cover no-repeat fixed;
  overflow: hidden;
}
.team-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,.28), rgba(10,10,10,.5) 34%, rgba(10,10,10,.58) 50%, rgba(10,10,10,.5) 66%, rgba(10,10,10,.28)),
    linear-gradient(180deg, rgba(10,10,10,.2), rgba(10,10,10,.35));
}
.team-parallax-inner {
  position: relative;
  width: min(720px, calc(100% - 40px));
  padding: 48px 38px 52px;
}
.team-parallax-inner::before,
.team-parallax-inner::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 58px;
  height: 2px;
  background: var(--red-bright);
  transform: translateX(-50%) skewX(-24deg);
}
.team-parallax-inner::before { top: 18px; }
.team-parallax-inner::after { bottom: 18px; }
.parallax-kicker {
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.parallax-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(45px, 5.3vw, 72px);
  line-height: .98;
  color: #fff;
  letter-spacing: 2px;
  margin-top: 12px;
  text-wrap: balance;
  text-shadow: 0 3px 6px rgba(0,0,0,.55), 0 10px 30px rgba(0,0,0,.65);
}
.parallax-sub {
  color: var(--red-bright);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  margin-top: 13px;
  letter-spacing: .5px;
}

/* ---------- team / shops ---------- */
.shops-wrap { padding: 26px 0 10px; }
.shop-section { padding: 40px 20px 26px; }
.shop-heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 54px);
  color: var(--red);
  text-align: center;
  letter-spacing: 1.5px;
  text-wrap: balance;
}
.shop-heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 3.5px;
  margin: 12px auto 0;
  background: var(--red);
  transform: skewX(-24deg);
  border-radius: 1px;
  opacity: .85;
}
.shop-addr { text-align: center; font-size: 15px; color: var(--grey-text); margin: 12px 0 8px; }
.shop-toggle { display: none; }
.barber-grid {
  max-width: 1080px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.barber-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 34px 32px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.barber-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.barber-photo {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.barber-role {
  margin-top: 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--grey-text);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.barber-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  color: #1b1b1b;
  margin-top: 2px;
  letter-spacing: .5px;
}
.barber-bio { font-size: 13px; line-height: 1.55; margin-top: 10px; text-align: left; width: 100%; max-width: 420px; }
.barber-bio .bio-handle { display: block; text-align: center; color: var(--red); font-weight: 700; margin-bottom: 6px; transition: opacity .15s ease; }
a.bio-handle:hover { opacity: .75; text-decoration: underline; }
.barber-bio .bio-rule { display: block; text-align: center; color: #d8d5d0; letter-spacing: -1px; margin-bottom: 8px; }
.barber-bio .bio-line { display: block; margin-top: 5px; color: #333; }
.barber-bio .bio-line strong { color: #111; }
.btn-book { margin-top: 18px; padding: 12px 44px; font-size: 14px; }

/* ---------- trust / reviews ---------- */
.trust { padding: 72px 20px 64px; background: #F2F2EF; }
.trust-flex {
  max-width: 1160px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: 300px 1fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.trust-awards {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  justify-content: center;
}
.trust-awards img { width: 150px; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.review-card {
  display: block;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.review-head { display: flex; align-items: baseline; gap: 12px; }
.review-rating { font-size: 44px; font-weight: 700; color: #1b1b1b; line-height: 1; }
.review-meta { font-size: 13px; color: var(--grey-text); }
.review-stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; margin-top: 2px; }
.review-quotes { list-style: none; margin-top: 16px; }
.review-quotes li {
  font-size: 13.5px;
  line-height: 1.5;
  color: #333;
  padding: 9px 0;
  border-top: 1px solid #eee;
}
.review-quotes li::before { content: "\201C"; color: var(--red); font-weight: 700; margin-right: 4px; }
.trust-google { text-align: center; margin-top: 26px; font-size: 14px; }
.trust-google a { color: var(--red); font-weight: 700; }
.trust-google a:hover { text-decoration: underline; }
.quotes {
  max-width: 1000px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.quote {
  background: #fff;
  border-left: 4px solid var(--red);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 24px 26px;
}
.quote blockquote { font-size: 15.5px; line-height: 1.65; font-style: italic; color: #222; }
.quote figcaption { margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--red); }

/* ---------- cta ---------- */
.cta { padding: 64px 20px 12px; }
.cta-band {
  background:
    radial-gradient(circle at 50% 0%, rgba(195,58,48,.18), transparent 42%),
    var(--dark);
  color: #fff;
  margin-top: 44px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cta-cols {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  /* auto-fit, not a hardcoded 3. Booking going live added a fourth column, and a fixed
     repeat(3) silently wrapped the fourth onto its own row where it sat orphaned. */
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 30px;
  padding: 52px 24px;
  text-align: center;
}
.cta-col h2 { font-family: var(--display); font-weight: 700; font-size: 33px; letter-spacing: 1.5px; }
.cta-col p { font-size: 15px; margin-top: 8px; color: #cfcfcf; }
.cta-col .btn { margin-top: 16px; }
.cta-phone { margin-top: 10px; }
.cta-phone a { color: var(--red); }
.cta-phone a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.site-footer { background: var(--dark); color: var(--grey); padding: 60px 24px 30px; border-top: 1px solid #2c2c2c; }
.footer-cols {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.f-col h6 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 14px; letter-spacing: .5px; }
.f-col p { font-size: 14px; line-height: 1.7; margin-bottom: 6px; }
.f-col a:hover { color: #fff; }
.copyright {
  text-align: center;
  font-size: 13px;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid #333;
}

/* ---------- interior pages ---------- */
.page-head { padding: 64px 20px 8px; }
.page-head .section-sub { color: var(--grey-text); }

.services { padding: 40px 20px 72px; }
.service-grid {
  max-width: 1080px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 38px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.service-name { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: 1px; color: #1b1b1b; }
.service-price { font-family: var(--display); font-weight: 700; font-size: 44px; color: var(--red); margin-top: 8px; }
.service-desc { font-size: 14px; line-height: 1.6; color: #444; margin: 14px 0 20px; }
.service-card .btn { margin-top: auto; padding: 12px 40px; }

.blog { padding: 40px 20px 72px; }
.blog-grid {
  max-width: 1160px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ececea;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-date { font-size: 12px; color: var(--grey-text); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; }
.post-title { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: .5px; color: #1b1b1b; margin-top: 6px; line-height: 1.1; }
.post-desc { font-size: 13.5px; line-height: 1.55; color: #444; margin-top: 10px; }
.post-more { color: var(--red); font-weight: 700; font-size: 13.5px; margin-top: auto; padding-top: 14px; }

.article { max-width: 760px; margin: 0 auto; padding: 64px 22px 72px; }
.article-title { text-align: center; }
.article-title::after { margin-bottom: 4px; }
.article-date { text-align: center; margin-top: 14px; }
.article-hero { width: 100%; border-radius: var(--radius); margin: 28px 0 8px; box-shadow: var(--shadow-card); }
.article-body { margin-top: 22px; }
.article-body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .5px;
  color: var(--red);
  margin: 30px 0 10px;
}
.article-body p { font-size: 15.5px; line-height: 1.75; color: #222; margin-bottom: 14px; }
.article-body ul { margin: 0 0 14px 22px; }
.article-body li { font-size: 15.5px; line-height: 1.7; color: #222; margin-bottom: 8px; }
.article-back { margin-top: 34px; }
.article-back a { color: var(--red); font-weight: 700; font-size: 14.5px; }
.article-back a:hover { text-decoration: underline; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .header-inner { gap: 14px; }
  .header-socials { display: none; }
  .main-nav {
    position: fixed;
    top: 79px;
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;
    gap: 0;
    padding: 8px 0 14px;
    display: none;
    z-index: 80;
    box-shadow: 0 18px 30px rgba(0,0,0,.35);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 13px 26px; font-size: 20px; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 44px;
    height: 44px;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
  }
  .nav-toggle span { display: block; width: 24px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .hero {
    min-height: 700px;
    padding: 64px 24px 70px;
  }
  .hero::before { background-position: 62% center; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(7,7,7,.96) 0%, rgba(7,7,7,.9) 38%, rgba(7,7,7,.66) 65%, rgba(7,7,7,.2) 100%),
      linear-gradient(180deg, rgba(0,0,0,.18), transparent 40%, rgba(0,0,0,.52));
  }
  .hero-copy { width: min(650px, 65vw); }
  .hero-headline { font-size: clamp(58px, 8.5vw, 78px); }
  .hero-watermark { display: none; }

  .kicker { font-size: 11px; letter-spacing: 3px; }
  .h-display { letter-spacing: .5px; padding: 0 10px; }
  .h-display::after { margin-top: 14px; }

  /* mobile gallery: swipeable snap carousel */
  .gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 8px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid button {
    flex: 0 0 78vw;
    scroll-snap-align: center;
    aspect-ratio: 1;
    border-radius: 14px;
  }
  .loc-grid, .cta-cols, .footer-cols, .quotes, .service-grid, .blog-grid { grid-template-columns: 1fr; }
  .trust-flex { grid-template-columns: 1fr; }
  .trust-awards { flex-direction: row; }
  .barber-grid { grid-template-columns: 1fr; max-width: 480px; }
  .team-parallax { background-attachment: scroll; }

  /* compact mobile shops: collapsed accordions */
  .shop-section { padding: 14px 16px; }
  .shop-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    border: 0;
    background: var(--dark);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    text-align: left;
    box-shadow: var(--shadow-card);
  }
  .shop-toggle img { width: 108px; height: 84px; object-fit: cover; flex: 0 0 108px; }
  .shop-toggle .st-text { flex: 1; padding: 8px 0; }
  .shop-toggle .st-name { font-family: var(--display); font-size: 24px; color: #fff; letter-spacing: 1px; display: block; }
  .shop-toggle .st-count { font-size: 12.5px; color: #b9b9b9; display: block; margin-top: 2px; }
  .shop-toggle .st-chev { margin-right: 16px; color: var(--red); font-size: 20px; transition: transform .25s ease; }
  .shop-section.open .st-chev { transform: rotate(90deg); }
  .shop-section .shop-heading, .shop-section .shop-addr { display: none; }
  .shop-section .barber-grid { display: none; }
  .shop-section.open .barber-grid { display: grid; margin-top: 20px; }
}

@media (max-width: 640px) {
  .site-header { height: 70px; }
  .header-inner { padding: 0 16px; }
  .brand { gap: 9px; }
  .brand img { width: 49px; }
  .brand span { font-size: 17px; letter-spacing: .7px; }
  .main-nav { top: 70px; }

  .hero {
    min-height: 710px;
    padding: 54px 18px 54px;
    text-align: center;
  }
  .hero::before { background-position: 72% center; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(7,7,7,.82) 0%, rgba(7,7,7,.74) 40%, rgba(7,7,7,.86) 100%),
      linear-gradient(90deg, rgba(7,7,7,.8), rgba(7,7,7,.48));
  }
  .hero-copy { width: 100%; }
  .hero-eyebrow {
    justify-content: center;
    gap: 9px;
    margin-bottom: 15px;
    font-size: 9px;
    letter-spacing: 1.45px;
  }
  .hero-eyebrow span:first-child { gap: 9px; }
  .hero-eyebrow span:first-child::after { width: 18px; }
  .hero-headline {
    max-width: 500px;
    margin: 0 auto;
    font-size: clamp(51px, 15.2vw, 66px);
    line-height: .91;
  }
  .hero-sub {
    max-width: 470px;
    margin: 16px auto 0;
    font-size: clamp(19px, 6vw, 25px);
    letter-spacing: 1.35px;
  }
  .hero-body {
    max-width: 480px;
    margin: 16px auto 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    line-height: 1.55;
  }
  .hero-actions {
    flex-direction: column;
    gap: 9px;
    width: min(100%, 330px);
    margin: 22px auto 0;
  }
  .hero-actions .btn { width: 100%; }
  .hero-proof {
    justify-content: center;
    gap: 12px;
    max-width: 340px;
    margin: 23px auto 0;
    padding-top: 16px;
    text-align: left;
  }
  .hero-badges { gap: 8px; }
  .hero-badges img { width: 74px; }
  .hero-proof p { font-size: 10.5px; }
  .hero-proof strong { font-size: 10px; letter-spacing: .35px; }

  .gallery { padding-top: 74px; }
  .team-parallax {
    min-height: 390px;
    background-position: 24% center;
  }
  .team-parallax::before {
    background: linear-gradient(90deg, rgba(10,10,10,.62), rgba(10,10,10,.48));
  }
  .team-parallax-inner {
    width: calc(100% - 28px);
    padding: 44px 16px 48px;
  }
  .parallax-kicker { font-size: 9px; letter-spacing: 3px; }
  .parallax-headline { font-size: clamp(42px, 13vw, 56px); }
  .parallax-sub { font-size: 13px; letter-spacing: .2px; }

  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-close { top: 12px; right: 12px; }
}

/* ==========================================================================
   THE GARRISON — EDITORIAL EDITION, 2026
   Real staff, real storefronts, real cuts. Generated imagery is restricted
   to the non-representational brand texture used in atmospheric backgrounds.
   ========================================================================== */

:root {
  --red: #8F5330;
  --red-dark: #74411F;
  --red-bright: #A6633A;
  --gold: #BDA868;
  --leather: #8F5330;
  --leather-dark: #74411F;
  --leather-light: #A6633A;
  --chrome: #372E2C;
  --gold-deep: #9C8949;
  --olive: #7E8034;
  --khaki: #5C5942;
  --dark: #14120F;
  --ink: #14120F;
  --grey: #9A9287;
  --grey-text: #6B655C;
  --card: #F6F3ED;
  --paper: #F1EDE4;
  --bone: #FAF7F0;
  --line: rgba(18, 18, 17, .15);
  --shadow-card: 0 12px 36px rgba(18, 18, 17, .10);
  --shadow-card-hover: 0 18px 52px rgba(18, 18, 17, .17);
  --radius: 2px;
}

::selection { color: #fff; background: var(--red); }
body {
  overflow-x: hidden;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(rgba(18,18,17,.2) .5px, transparent .5px);
  background-size: 8px 8px;
}

.btn {
  border-radius: 1px;
  padding: 14px 27px;
  font-size: 12px;
  letter-spacing: 1.45px;
  text-transform: uppercase;
}
.btn-red { box-shadow: 7px 7px 0 rgba(179,38,45,.18); }
.btn-red:hover { box-shadow: 3px 3px 0 rgba(179,38,45,.22); }
.btn-light {
  color: var(--ink);
  background: var(--bone);
  box-shadow: 7px 7px 0 rgba(255,255,255,.14);
}
.btn-light:hover { color: #fff; background: var(--red); }

.site-header {
  height: 76px;
  background: rgba(13,13,12,.95);
  box-shadow: none;
}
.header-inner { max-width: 1380px; padding: 0 28px; gap: 22px; }
.brand img { width: 58px; }
.brand span { font-family: var(--display); font-size: 23px; letter-spacing: 1.6px; }
.main-nav { gap: 24px; }
.main-nav a {
  position: relative;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  background: var(--red);
  transition: right .2s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after { right: 0; }
.header-socials { gap: 10px; }
.header-socials .soc { width: 18px; height: 18px; }
.header-book {
  flex: 0 0 auto;
  padding: 11px 17px 10px;
  color: #fff;
  background: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  transition: background-color .2s ease, transform .2s ease;
}
.header-book:hover { background: var(--red-bright); transform: translateY(-1px); }

/* Homepage hero: the room and the cuts are all actual The Garrison photography. */
.hero {
  min-height: clamp(700px, calc(100svh - 76px), 860px);
  padding: 74px 28px 80px;
  background: #090909;
}
.hero::before {
  background: url("assets/hero.jpg?v=13482ec4") 53% center/cover no-repeat;
  filter: grayscale(1) contrast(1.08) brightness(.64);
}
.hero::after {
  background:
    linear-gradient(90deg, rgba(6,6,6,.98) 0%, rgba(6,6,6,.91) 33%, rgba(6,6,6,.65) 57%, rgba(6,6,6,.32) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 55%, rgba(0,0,0,.8));
}
.hero-inner {
  max-width: 1380px;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .72fr);
  align-items: center;
  gap: clamp(42px, 6vw, 96px);
}
.hero-copy { width: auto; max-width: 700px; }
.hero-eyebrow { margin-bottom: 20px; font-size: 9.5px; letter-spacing: 2.5px; }
.hero-eyebrow span:first-child { color: #fff; }
.hero-eyebrow span:first-child::after { background: var(--red-bright); }
.hero-headline {
  max-width: 760px;
  font-size: clamp(72px, 7vw, 112px);
  line-height: .84;
  letter-spacing: .5px;
}
.hero-sub {
  max-width: 620px;
  color: #fff;
  font-size: clamp(22px, 2vw, 31px);
  line-height: 1;
  margin-top: 23px;
}
.hero-body {
  max-width: 590px;
  color: rgba(255,255,255,.74);
  border-color: var(--red);
}
.hero-proof { border-top-color: rgba(255,255,255,.15); }
/* NOTE: the badge width lives ONLY in the base rule (.hero-badges img, ~line
   256) and the mobile media query. An unconditional re-declaration used to sit
   here; because it came AFTER the media query with equal specificity it won at
   every width, so phones kept the 96px desktop badges. Two 96px badges + gap
   overflow the squeezed flex column and printed straight over the
   "two-time Best of Central California winner" text. Do not re-add it. */
.hero-real-work {
  position: relative;
  min-height: 520px;
  align-self: stretch;
}
.hero-work {
  position: absolute;
  overflow: hidden;
  background: #171716;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 26px 65px rgba(0,0,0,.46);
}
.hero-work::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.35);
  pointer-events: none;
}
.hero-work img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.04); }
.hero-work figcaption {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  padding: 12px 15px;
  color: #fff;
  background: rgba(12,12,11,.88);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.hero-work-main {
  inset: 18px 40px 46px 8px;
  transform: rotate(2.5deg);
}
/* was right:-10px, which combined with the -4deg rotation pushed the corner
   past the hero's right edge and clipped the card at the viewport */
.hero-work-detail {
  width: 44%;
  height: 42%;
  right: 8px;
  bottom: 0;
  transform: rotate(-4deg);
}
.hero-watermark { right: 18px; bottom: 20px; letter-spacing: 2.2px; }

.section-index {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto 20px;
  color: var(--red);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.kicker { color: #77746e; font-size: 10px; letter-spacing: 3.3px; }
.h-display {
  color: var(--ink);
  font-size: clamp(48px, 5.4vw, 78px);
  line-height: .92;
}
.h-display::after { width: 72px; height: 5px; margin-top: 20px; }
.section-sub { max-width: 690px; color: var(--grey-text); font-size: 15px; }
.section-lead {
  max-width: 1280px;
  margin: 0 auto 38px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: start;
}
.section-lead .section-index { width: auto; margin: 0; }
.section-lead > p:last-child {
  max-width: 580px;
  color: var(--grey-text);
  font-size: 14px;
  line-height: 1.7;
}

.gallery { padding: 96px 20px 84px; background: var(--bone); }
.gallery::before { display: none; }
.gallery-marquee {
  max-width: 1500px;
  margin: 48px auto 0;
  gap: 11px;
}
.marquee-row { gap: 11px; }
.marquee-row button { width: 280px; border-radius: 1px; box-shadow: none; }
.gallery-cta { margin-top: 38px; }

.locations { padding: 94px 24px 94px; background: var(--paper); }
.locations > .section-index { margin-bottom: 18px; }
.loc-grid { max-width: 1280px; gap: 18px; margin-top: 42px; }
.loc-card { border: 1px solid rgba(18,18,17,.12); box-shadow: none; }
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.loc-card img { aspect-ratio: 16/10; filter: saturate(.78) contrast(1.04); }
.loc-body { padding: 25px 25px 28px; }
.loc-label { font-size: 9px; letter-spacing: 2px; }
.loc-name { font-size: 32px; }
.loc-addr, .loc-hours { font-size: 12.5px; }
.loc-hours-label { font-size: 10px; letter-spacing: 1.2px; }

.team-feature {
  position: relative;
  min-height: 760px;
  padding: 90px max(26px, calc((100vw - 1320px) / 2));
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(13,13,12,.96), rgba(13,13,12,.82)),
    url("assets/garrison-brand-texture.jpg?v=13482ec4") center/cover no-repeat;
  color: #fff;
}
.team-feature::before {
  content: "GARRISON";
  position: absolute;
  right: -22px;
  bottom: -60px;
  color: rgba(255,255,255,.035);
  font-family: var(--display);
  font-size: min(29vw, 420px);
  line-height: .7;
  pointer-events: none;
}
.team-feature-media { position: relative; min-height: 580px; }
.team-portrait {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  background: #242422;
  box-shadow: 0 28px 70px rgba(0,0,0,.36);
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.72) contrast(1.04);
}
.team-portrait figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 16px 13px;
  color: #fff;
  background: linear-gradient(transparent, rgba(8,8,8,.94) 32%);
}
.team-portrait strong,
.team-portrait span { display: block; }
.team-portrait strong { font-family: var(--display); font-size: 19px; letter-spacing: .6px; }
.team-portrait span { color: rgba(255,255,255,.65); font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; }
.team-founder { inset: 16px 26% 44px 2%; transform: rotate(-2deg); z-index: 2; }
/* z-index needed: the founder card (z-index 2) spans to 74% and was covering
   the left half of this card's caption, so "Shaun Moua / Las Vegas Manager"
   read as "...ua / ...anager". Sits above the founder's empty top-right
   corner, not its face. */
.team-manager-one { width: 38%; height: 42%; top: 0; right: 0; transform: rotate(3deg); z-index: 4; }
.team-manager-two { width: 40%; height: 43%; right: 2%; bottom: 4px; transform: rotate(-2deg); z-index: 3; }
.team-feature-copy { position: relative; z-index: 2; max-width: 520px; min-width: 0; }
.team-feature-copy .section-index { width: auto; margin: 0 0 42px; color: rgba(255,255,255,.45); }
.parallax-kicker { color: var(--red-bright); }
.team-feature .parallax-headline {
  margin-top: 17px;
  font-size: clamp(60px, 6.5vw, 92px);
  line-height: .85;
  text-shadow: none;
}
.team-feature .parallax-sub { color: #fff; font-size: 15px; }
.team-feature-body {
  max-width: 460px;
  margin: 18px 0 27px;
  color: rgba(255,255,255,.68);
  font-size: 13.5px;
  line-height: 1.75;
}

.home-shop-directory { padding: 78px 24px 102px; background: var(--bone); }
.home-shop-grid { max-width: 1280px; margin: 0 auto; display: grid; gap: 1px; background: var(--line); }
/* Rows used to be sized by each photo's intrinsic aspect ratio, and because
   the image landed in the WIDER column on even cards (source order fills
   columns; `order` only moves it visually) the three rows came out 270 /
   720 / 360px tall around 99px of copy — 621px of dead space on the middle
   one. Now: the image is absolutely positioned so it can't drive row height,
   the row height is fixed, and explicit grid-column placement keeps the photo
   in the narrower column on both sides. */
.home-shop-card {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  min-height: 330px;
  background: var(--bone);
}
/* grid-row: 1 is required — with only grid-column set, auto-placement can't
   move backwards to fill column 1 on the reversed cards and starts a second
   row instead, stacking photo above copy (a 544px card). */
.home-shop-card .home-shop-image { grid-column: 1; grid-row: 1; }
.home-shop-card .home-shop-copy { grid-column: 2; grid-row: 1; }
.home-shop-card:nth-child(even) { grid-template-columns: 1.2fr .8fr; }
.home-shop-card:nth-child(even) .home-shop-image { grid-column: 2; grid-row: 1; }
.home-shop-card:nth-child(even) .home-shop-copy { grid-column: 1; grid-row: 1; }
.home-shop-image { position: relative; overflow: hidden; min-height: 330px; }
.home-shop-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.03); transition: transform .5s ease; }
.home-shop-card:hover .home-shop-image img { transform: scale(1.025); }
.home-shop-image span {
  position: absolute;
  left: 18px;
  top: 14px;
  color: #fff;
  font-family: var(--display);
  font-size: 42px;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.home-shop-copy { display: flex; flex-direction: column; justify-content: center; padding: 36px clamp(28px, 5vw, 72px); }
.home-shop-copy > p { color: var(--red); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.home-shop-copy h5 { margin-top: 5px; font-family: var(--display); font-size: clamp(38px, 4vw, 58px); line-height: 1; }
.home-shop-copy address { margin-top: 12px; color: var(--grey-text); font-size: 13px; font-style: normal; }
.home-shop-copy div { display: flex; gap: 24px; margin-top: 26px; }
.home-shop-copy a {
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.home-shop-copy a:last-child { color: var(--ink); border-bottom: 1px solid currentColor; }

.shops-wrap { padding: 56px 0 80px; background: var(--bone); }
.shop-section { padding: 48px 24px 40px; }
.shop-heading { color: var(--ink); font-size: clamp(48px, 5.4vw, 70px); }
.shop-heading::after { width: 70px; height: 5px; }
.shop-addr { font-size: 12px; letter-spacing: .35px; }
.barber-grid { max-width: 1280px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.barber-card {
  position: relative;
  align-items: stretch;
  padding: 22px;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(18,18,17,.11);
  box-shadow: none;
}
.barber-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 48px;
  height: 4px;
  background: var(--red);
}
.barber-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.barber-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* headshots are pre-cropped square, face-aware, by build.py's source assets
     (eyes on the upper third) — do not re-anchor the crop here */
  object-position: center;
  filter: saturate(.78) contrast(1.02);
}
.barber-role { margin-top: 18px; color: var(--red); font-size: 8.5px; letter-spacing: 2px; }
.barber-name { font-size: 32px; line-height: 1; }
.barber-bio { max-width: none; font-size: 11.5px; }
.barber-bio .bio-handle { text-align: left; }
.barber-bio .bio-rule { text-align: left; overflow: hidden; }
.btn-book { align-self: flex-start; padding: 11px 24px; }

.trust { padding: 98px 24px 88px; background: var(--paper); }
.trust-flex { max-width: 1180px; gap: 16px; }
.review-card, .quote { border-radius: 1px; box-shadow: none; border: 1px solid rgba(18,18,17,.11); }
.review-card:hover { box-shadow: var(--shadow-card-hover); }
.quote { border-left: 4px solid var(--red); }

.cta { padding: 88px 20px 14px; background: var(--bone); }
.cta-band {
  position: relative;
  margin-top: 48px;
  overflow: hidden;
  background: #121211;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background: url("assets/garrison-brand-texture.jpg?v=13482ec4") 65% center/cover no-repeat;
}
.cta-cols { position: relative; z-index: 1; max-width: 1280px; padding: 66px 24px; }
.cta-col {
  padding: 16px 28px;
  border-right: 1px solid rgba(255,255,255,.15);
}
.cta-col:last-child { border-right: 0; }
@media (max-width: 900px) { .cta-col { border-right: 0; } }
.cta-col h2 { font-size: 38px; }
.cta-col p { font-size: 12px; }

.site-footer { padding: 68px 28px 30px; background: #0d0d0c; }
.footer-cols { max-width: 1280px; grid-template-columns: 1.2fr .85fr 1.15fr 1fr; gap: 42px; }
.footer-brand img { width: 92px; }
.footer-brand p { max-width: 300px; margin-top: 18px; color: #aaa7a0; font-size: 12.5px; line-height: 1.75; }
.f-col h6 { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; }
.f-col p { font-size: 11.5px; }

/* Interior page heroes */
.page-hero {
  position: relative;
  min-height: 640px;
  padding: 74px 28px 66px;
  overflow: hidden;
  background: #111110;
  color: #fff;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .32;
  background: url("assets/garrison-brand-texture.jpg?v=13482ec4") center/cover no-repeat;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12,12,11,.95), rgba(12,12,11,.72) 48%, rgba(12,12,11,.42));
}
.page-hero-inner {
  width: min(1320px, 100%);
  min-height: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .83fr 1.17fr;
  align-items: center;
  gap: clamp(42px, 7vw, 100px);
}
.page-hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.page-hero-copy { position: relative; z-index: 3; }
.page-hero-copy .kicker { margin-bottom: 18px; color: var(--red-bright); text-align: left; }
.page-hero-index {
  margin-bottom: 48px;
  color: rgba(255,255,255,.42);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
}
.page-hero-title {
  max-width: 620px;
  font-family: var(--display);
  font-size: clamp(68px, 7.5vw, 112px);
  line-height: .84;
  letter-spacing: .4px;
  text-wrap: balance;
}
.page-hero-sub { max-width: 540px; margin-top: 24px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.75; }
.page-hero-note {
  display: inline-block;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 2px solid var(--red);
  color: #fff;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.page-hero-media { position: relative; min-width: 0; }
.page-hero-collage { position: relative; min-height: 510px; }
.page-hero-photo {
  position: absolute;
  overflow: hidden;
  background: #242422;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 28px 68px rgba(0,0,0,.4);
}
.page-hero-photo::before {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.3);
  pointer-events: none;
}
/* Hero photos are pre-cropped square and subject-aware, and the collage cards
   are close to square, so cover has almost nothing to trim. Centre is correct
   here — the old default clipped the top of the head on portrait sources. */
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.8) contrast(1.05); }
.page-hero-photo figcaption {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  max-width: 90%;
  padding: 11px 14px;
  color: #fff;
  background: rgba(12,12,11,.9);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}
.page-hero-photo.photo-primary { inset: 16px 28% 40px 0; z-index: 2; transform: rotate(-1.8deg); }
/* Same fix as .team-manager-one: needs z-index so the primary card stops
   covering its caption. Inset from the right so the 2.8deg rotation doesn't
   push the corner off the edge of the viewport. */
.page-hero-photo.photo-secondary { width: 40%; height: 44%; top: 0; right: 2%; transform: rotate(2.8deg); z-index: 4; }
.page-hero-photo.photo-tertiary { width: 42%; height: 45%; right: 1%; bottom: 0; z-index: 3; transform: rotate(-2deg); }
.location-hero-collage .page-hero-photo.photo-primary { inset: 24px 20% 25px 0; }
.location-hero-collage .page-hero-photo.photo-secondary { width: 45%; height: 38%; }
.location-hero-collage .page-hero-photo.photo-tertiary { width: 47%; height: 39%; }
.page-hero-graphic {
  height: 460px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  transform: rotate(1.5deg);
  box-shadow: 0 28px 68px rgba(0,0,0,.4);
}
.page-hero-graphic img { width: 100%; height: 100%; object-fit: cover; }

/* Editorial gallery layout */
.gallery-grid {
  max-width: 1280px;
  margin-top: 0;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 8px;
}
.gallery-grid button { border-radius: 0; aspect-ratio: auto; }
.gallery-grid button:nth-child(1),
.gallery-grid button:nth-child(6) { grid-column: span 2; grid-row: span 3; }
.gallery-grid button:nth-child(2),
.gallery-grid button:nth-child(3),
.gallery-grid button:nth-child(4),
.gallery-grid button:nth-child(5),
.gallery-grid button:nth-child(7),
.gallery-grid button:nth-child(8) { grid-row: span 2; }
.gallery-grid button:nth-child(n+9) { grid-row: span 2; }

.blog { padding: 92px 24px 100px; background: var(--bone); }
.blog-grid { max-width: 1280px; gap: 16px; margin-top: 0; }
.post-card { border-radius: 0; box-shadow: none; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.post-card img { aspect-ratio: 4/3; filter: saturate(.78) contrast(1.04); }
.post-card-body { padding: 25px 24px 28px; }
.post-title { font-size: 29px; }

.article { max-width: none; margin: 0; padding: 0 0 100px; background: var(--bone); }
.article-masthead {
  position: relative;
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #111;
}
.article-masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.86));
}
.article-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  box-shadow: none;
  filter: saturate(.72) contrast(1.08);
}
.article-masthead-copy {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 150px 0 60px;
  color: #fff;
}
.article-masthead-copy .kicker { color: var(--red-bright); text-align: left; }
.article-title {
  max-width: 900px;
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(62px, 8vw, 112px);
  line-height: .88;
  text-align: left;
  text-wrap: balance;
}
.article-date { margin-top: 18px; color: rgba(255,255,255,.62); text-align: left; }
.article-layout {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 72px;
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: clamp(46px, 8vw, 110px);
  justify-content: center;
}
.article-aside {
  position: sticky;
  top: 110px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}
.article-aside span { color: var(--grey-text); font-size: 8px; font-weight: 700; letter-spacing: 1.7px; }
.article-aside a { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.article-body { margin-top: 0; }
.article-body h3 { color: var(--ink); font-size: 36px; line-height: 1; }
.article-body h3::before { content: "/"; margin-right: 9px; color: var(--red); }
.article-body p, .article-body li { font-size: 15px; line-height: 1.85; }
.article-legal { max-width: 900px; margin: 0 auto; padding: 76px 24px 100px; }
.article-legal .article-body { max-width: 760px; margin: 0 auto; }

@media (max-width: 1120px) {
  .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(290px, .62fr); gap: 35px; }
  .hero-real-work { min-height: 470px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .barber-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .site-header { height: 72px; }
  .main-nav { top: 72px; }
  .header-book { margin-left: auto; }
  .nav-toggle { margin-left: 0; }
  .hero {
    min-height: 730px;
    padding-top: 68px;
  }
  .hero-inner { display: block; }
  .hero-copy { max-width: 720px; }
  .hero-real-work {
    position: absolute;
    right: 0;
    top: 50%;
    width: 36%;
    min-height: 400px;
    transform: translateY(-45%);
    opacity: .72;
  }
  .hero-copy { position: relative; z-index: 2; width: min(680px, 72vw); }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(6,6,6,.98) 0%, rgba(6,6,6,.92) 52%, rgba(6,6,6,.56) 100%),
      linear-gradient(180deg, rgba(0,0,0,.15), transparent 50%, rgba(0,0,0,.76));
  }
  .team-feature { grid-template-columns: 1fr 1fr; gap: 45px; min-height: 680px; }
  .team-feature-media { min-height: 500px; }
  .home-shop-card,
  .home-shop-card:nth-child(even) { grid-template-columns: .85fr 1.15fr; }
  .home-shop-card:nth-child(even) .home-shop-image { order: 0; }
  .page-hero { min-height: 700px; }
  .page-hero-inner { grid-template-columns: .82fr 1.18fr; gap: 35px; }
  .page-hero-title { font-size: clamp(62px, 9.2vw, 88px); }
  .page-hero-collage { min-height: 470px; }
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    overflow: visible;
    padding: 0;
  }
  .gallery-grid button { flex: initial; scroll-snap-align: unset; }
  .loc-grid, .cta-cols, .quotes, .service-grid, .blog-grid { grid-template-columns: 1fr; }
  .loc-grid { max-width: 700px; }
  .loc-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .loc-card img { height: 100%; aspect-ratio: auto; }
  .blog-grid { max-width: 720px; }
}

@media (max-width: 720px) {
  .site-header { height: 68px; }
  .header-inner { padding: 0 14px; }
  .brand img { width: 47px; }
  .brand span { font-size: 18px; }
  .header-book { padding: 9px 11px 8px; font-size: 8px; }
  .main-nav { top: 68px; }
  .hero {
    min-height: 730px;
    padding: 58px 18px 52px;
    text-align: left;
  }
  .hero::before { background-position: 59% center; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(6,6,6,.94), rgba(6,6,6,.66)),
      linear-gradient(180deg, rgba(6,6,6,.38), rgba(6,6,6,.9));
  }
  .hero-copy { width: 100%; }
  .hero-eyebrow { justify-content: flex-start; }
  .hero-headline { margin: 0; font-size: clamp(58px, 17vw, 79px); }
  .hero-sub { margin-left: 0; font-size: 21px; }
  .hero-body { margin-left: 0; padding-left: 13px; border-left: 2px solid var(--red); }
  .hero-actions { align-items: stretch; width: min(100%, 360px); margin-left: 0; }
  .hero-proof { justify-content: flex-start; margin-left: 0; }
  .hero-real-work { display: none; }
  .hero-watermark { display: none; }
  .section-index { width: calc(100% - 30px); }
  .gallery, .locations, .trust, .blog { padding-left: 15px; padding-right: 15px; }
  .marquee-row button { width: 172px; }
  .team-feature {
    min-height: auto;
    padding: 66px 18px 72px;
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .team-feature-media { min-height: 470px; order: 2; }
  .team-feature-copy .section-index { margin-bottom: 30px; }
  .team-feature .parallax-headline { font-size: clamp(40px, 15vw, 61px); overflow-wrap: break-word; }
  .home-shop-directory { padding: 54px 15px 72px; }
  .home-shop-card,
  .home-shop-card:nth-child(even) { display: block; min-height: 0; }
  .home-shop-card:nth-child(even) .home-shop-image { order: 0; }
  .home-shop-image { height: 210px; }
  .home-shop-copy { padding: 28px 23px 34px; }
  .home-shop-copy h5 { font-size: 40px; }
  .home-shop-copy div { flex-direction: column; gap: 12px; align-items: flex-start; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-brand { padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .cta-cols { padding: 35px 20px; }
  .cta-col { padding: 26px 12px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .cta-col:last-child { border-bottom: 0; }
  .page-hero { min-height: auto; padding: 61px 17px 54px; }
  .page-hero-inner { display: block; min-height: 0; }
  .page-hero-index { margin-bottom: 28px; }
  .page-hero-title { font-size: clamp(60px, 18vw, 78px); }
  .page-hero-sub { margin-top: 19px; font-size: 13px; }
  .page-hero-media { margin-top: 44px; }
  .page-hero-collage { min-height: 380px; }
  .page-hero-graphic { height: 260px; }
  .section-lead { display: block; margin-bottom: 28px; }
  .section-lead .section-index { margin-bottom: 14px; }
  .locations .loc-card { display: flex; }
  .locations .loc-card img { height: auto; aspect-ratio: 16/10; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 155px;
    gap: 5px;
  }
  .gallery-grid button:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gallery-grid button:nth-child(1),
  .gallery-grid button:nth-child(6),
  .gallery-grid button:nth-child(11) { grid-column: span 2; grid-row: span 2; }
  .shop-section { padding: 12px 15px; }
  .barber-grid { grid-template-columns: 1fr; max-width: 480px; }
  .barber-card { padding: 18px; }
  .article-masthead { min-height: 590px; }
  .article-masthead-copy { width: calc(100% - 34px); padding-bottom: 45px; }
  .article-title { font-size: clamp(56px, 16vw, 78px); }
  .article-layout { width: calc(100% - 34px); display: block; padding-top: 50px; }
  .article-aside { position: static; padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
  .article-body h3 { font-size: 31px; }
  .article-body p, .article-body li { font-size: 14px; }
}

@media (max-width: 430px) {
  .brand span { display: none; }
  .hero { min-height: 755px; }
  .hero-eyebrow { display: block; line-height: 1.7; }
  .hero-eyebrow span { display: block; }
  .hero-eyebrow span:first-child::after { display: none; }
  .hero-headline { font-size: clamp(57px, 18vw, 72px); }
  .hero-proof span { display: none; }
  .team-feature-media { min-height: 410px; }
  .page-hero-collage { min-height: 330px; }
  /* Captions stay ON at mobile (Logan's call, 2026-08-18). They are the only
     thing naming what each photo is, so hiding them costs more than the space. */
  .page-hero-photo figcaption {
    display: block;
    font-size: 9px;
    letter-spacing: .12em;
    padding: 5px 8px;
  }
  .shop-toggle img { width: 92px; flex-basis: 92px; }
  .shop-toggle .st-name { font-size: 21px; }
}

/* ============================================================
   THE GARRISON — video hero + film section
   ============================================================ */

.hero-video { position: relative; overflow: hidden; }

.hero-video .hero-media {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-video .hero-video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  display: block;
}
.hero-video .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,9,8,.94) 0%, rgba(10,9,8,.78) 38%, rgba(10,9,8,.30) 68%, rgba(10,9,8,.42) 100%),
    linear-gradient(0deg, rgba(10,9,8,.75) 0%, rgba(10,9,8,0) 45%);
}
.hero-video .hero-inner { position: relative; z-index: 2; }
.hero-video .hero-copy { max-width: 46rem; }
.hero-video .hero-watermark { position: relative; z-index: 2; }

/* No motion for people who ask for none: freeze on the poster. */
@media (prefers-reduced-motion: reduce) {
  .hero-video .hero-video-el { display: none; }
  .hero-video .hero-media {
    background-image: url("/assets/hero-poster.jpg?v=13482ec4");
    background-size: cover;
    background-position: center 55%;
  }
}

@media (max-width: 860px) {
  .hero-video .hero-scrim {
    background:
      linear-gradient(0deg, rgba(10,9,8,.93) 0%, rgba(10,9,8,.70) 45%, rgba(10,9,8,.55) 100%);
  }
  .hero-video .hero-copy { max-width: none; }
}

/* ---------- The film ---------- */

.film {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem);
  background: #0f0e0d;
  color: #f4f1ec;
}
.film-copy .parallax-headline { margin: .35rem 0 .75rem; }

.film-player { position: relative; }

.film-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  line-height: 0;
}
.film-poster img {
  width: 100%; height: auto; display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
  filter: saturate(.92) brightness(.86);
}
.film-poster:hover img, .film-poster:focus-visible img {
  transform: scale(1.03);
  filter: saturate(1) brightness(.95);
}
.film-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(4rem, 7vw, 5.5rem); height: clamp(4rem, 7vw, 5.5rem);
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(244,241,236,.94);
  color: #0f0e0d;
  transition: transform .3s ease, background .3s ease;
}
.film-poster:hover .film-play { transform: translate(-50%, -50%) scale(1.08); }
.film-play svg { width: 45%; height: 45%; margin-left: 6%; }
.film-label {
  position: absolute; left: 1.25rem; bottom: 1.1rem;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: #f4f1ec; line-height: 1;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}
.film-poster video, .film-player video {
  width: 100%; height: auto; display: block; border-radius: 4px;
}

@media (max-width: 860px) {
  .film { grid-template-columns: 1fr; }
}

/* ============================================================
   THE GARRISON — gold accents on dark ground
   Gold (#BDA868) reads ~7:1 on the near-black surfaces and fails
   on the cream ones, so it is scoped to dark sections only.
   ============================================================ */

.hero-video .hero-eyebrow,
.hero-video .hero-eyebrow span,
.hero-video .hero-sub,
.film .parallax-kicker,
.film .film-label,
.team-parallax .parallax-kicker,
.site-footer h6 {
  color: var(--gold);
}

.hero-video .hero-watermark { color: rgba(189,168,104,.34); }

.hero-video .hero-eyebrow span::after,
.film .parallax-kicker::after { background: var(--gold); }

/* Secondary hero button: gold hairline rather than plain white */
.hero-video .btn-hero-secondary {
  border-color: rgba(189,168,104,.55);
  color: #F6F3ED;
}
.hero-video .btn-hero-secondary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #14120F;
}

/* Film play button in brand gold */
.film-play { background: var(--gold); color: #14120F; }
.film-poster:hover .film-play { background: #D2BC7C; }

/* Footer social icons pick up gold on hover */
.site-footer a:hover { color: var(--gold); }

/* Testimonial attribution: name in oxblood, role muted underneath */
.quote-role {
  display: block;
  margin-top: .2rem;
  font-family: var(--body);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-text);
  font-weight: 500;
}

/* ============================================================
   Elliott Chester, owner feature
   ============================================================ */

.elliott-section {
  position: relative;
  min-height: 840px;
  overflow: hidden;
  isolation: isolate;
  color: var(--paper);
  background: var(--chrome);
}
.elliott-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/garrison-brand-texture.jpg?v=13482ec4") center/cover no-repeat;
  opacity: .16;
}
.elliott-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 18%, transparent), transparent 46%),
    linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--ink) 48%, transparent));
}
.elliott-inner {
  width: min(1380px, 100%);
  min-height: 840px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, .88fr);
  align-items: stretch;
}
.elliott-figure {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.elliott-figure::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 11%;
  width: min(72%, 540px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 50%;
}
.elliott-cutout {
  position: relative;
  z-index: 1;
  width: min(790px, 124%);
  max-width: none;
  height: auto;
  margin: 0 0 -20px -8vw;
  filter: drop-shadow(28px 16px 30px color-mix(in srgb, var(--ink) 58%, transparent));
}
.elliott-cutout.reveal { transition-delay: .08s; }
.elliott-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  min-width: 0;
  padding: 90px clamp(28px, 5vw, 72px) 90px 0;
}
.elliott-copy::before {
  content: "";
  position: absolute;
  top: 9%;
  right: 0;
  width: 1px;
  height: 82%;
  background: color-mix(in srgb, var(--gold) 32%, transparent);
}
.elliott-eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.elliott-eyebrow::before {
  content: "";
  flex: 0 0 42px;
  height: 2px;
  background: var(--leather-light);
}
.elliott-title {
  margin-top: 23px;
  font-family: var(--display);
  font-size: clamp(76px, 7.2vw, 114px);
  font-weight: 400;
  line-height: .82;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-wrap: balance;
}
.elliott-title span { display: block; }
.elliott-title span:last-child { color: var(--gold); }
.elliott-title.reveal { transition-delay: .13s; }
.elliott-quote {
  max-width: 500px;
  margin-top: 38px;
  padding-left: 23px;
  border-left: 3px solid var(--leather-light);
}
.elliott-quote blockquote {
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.5;
}
.elliott-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: color-mix(in srgb, var(--paper) 66%, transparent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.elliott-quote figcaption strong { color: var(--paper); }
.elliott-quote figcaption span {
  display: flex;
  align-items: center;
  gap: 12px;
}
.elliott-quote figcaption span::before {
  content: "";
  width: 24px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 54%, transparent);
}
.elliott-quote.reveal { transition-delay: .2s; }
.elliott-signature {
  width: clamp(230px, 26vw, 390px);
  height: auto;
  margin: 10px 0 -24px clamp(70px, 10vw, 155px);
  opacity: .78;
  rotate: -4deg;
  filter: invert(93%) sepia(12%) saturate(219%) hue-rotate(358deg) brightness(103%) contrast(93%);
}
.elliott-signature.reveal { transition-delay: .27s; }

/* ============================================================
   Branded footer
   ============================================================ */

.site-footer {
  position: relative;
  padding: 0;
  color: var(--paper);
  background: var(--chrome);
  border-top: 5px solid var(--leather);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/garrison-brand-texture.jpg?v=13482ec4") center/cover no-repeat;
  opacity: .07;
}
.footer-frame {
  position: relative;
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 58px);
}
.footer-hero {
  min-height: 365px;
  padding: clamp(64px, 7vw, 96px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
  align-items: center;
  gap: clamp(55px, 8vw, 120px);
}
.footer-brand-block {
  display: grid;
  grid-template-columns: clamp(135px, 14vw, 184px) minmax(0, 430px);
  align-items: center;
  gap: clamp(30px, 4vw, 58px);
}
.footer-brand-block img {
  width: 100%;
  height: auto;
}
.footer-brand-block p {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.85;
}
.footer-callout {
  padding-left: clamp(32px, 5vw, 70px);
  border-left: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
}
.footer-callout > p {
  margin-bottom: 19px;
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
/* Inherits .btn .btn-red sizing from the site's button component so it matches
   every other button. Only the colour lock and centring are local. */
.footer-phone-cta {
  background: var(--leather);
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
}
.footer-phone-cta:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.footer-ledger {
  display: grid;
  grid-template-columns: .9fr 1.45fr .75fr;
  border-top: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.footer-detail {
  min-width: 0;
  padding: 37px clamp(24px, 3vw, 45px);
  border-right: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
}
.footer-detail:first-child { padding-left: 0; }
.footer-detail:last-child {
  padding-right: 0;
  border-right: 0;
}
.footer-label {
  margin-bottom: 17px;
  color: var(--gold);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.footer-email {
  color: var(--paper);
  font-size: 13px;
  line-height: 1.6;
}
.footer-hiring {
  margin-top: 8px;
  color: color-mix(in srgb, var(--paper) 62%, transparent);
  font-size: 11px;
  line-height: 1.6;
}
.footer-hiring:empty { display: none; }
.footer-location-list p {
  color: color-mix(in srgb, var(--paper) 68%, transparent);
  font-size: 11px;
  line-height: 1.65;
}
.footer-location-list p:first-child {
  margin-bottom: 5px;
  color: var(--paper);
  font-weight: 700;
}
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.footer-socials p {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: 11px;
  line-height: 1.6;
}
.footer-bottom {
  padding: 25px 0 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: color-mix(in srgb, var(--paper) 52%, transparent);
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.footer-bottom .copyright {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  text-align: left;
}

@media (max-width: 980px) {
  .elliott-section,
  .elliott-inner { min-height: 780px; }
  .elliott-inner { grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr); }
  .elliott-cutout { width: min(700px, 132%); margin-left: -12vw; }
  .elliott-copy { padding-right: 28px; }
  .elliott-title { font-size: clamp(68px, 9vw, 88px); }

  .footer-hero {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .footer-callout {
    padding: 38px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
    border-left: 0;
  }
  .footer-ledger { grid-template-columns: 1fr 1fr; }
  .footer-detail:nth-child(2) { padding-right: 0; border-right: 0; }
  .footer-detail:last-child {
    grid-column: 1 / -1;
    padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  }
}

@media (max-width: 720px) {
  .elliott-section { min-height: 0; }
  .elliott-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .elliott-copy {
    order: 1;
    width: 100%;
    padding: 70px 20px 18px;
  }
  .elliott-copy::before { display: none; }
  .elliott-eyebrow { max-width: 290px; }
  .elliott-title {
    max-width: 620px;
    font-size: clamp(63px, 20vw, 92px);
  }
  .elliott-quote { max-width: 480px; margin-top: 30px; }
  .elliott-signature {
    width: min(300px, 74vw);
    margin: 8px 0 -11px clamp(34px, 12vw, 82px);
  }
  .elliott-figure {
    order: 2;
    min-height: min(112vw, 520px);
    overflow: hidden;
  }
  .elliott-figure::before {
    left: 50%;
    top: 12%;
    width: min(77vw, 390px);
    translate: -50% 0;
  }
  .elliott-cutout {
    width: auto;
    height: min(112vw, 520px);
    margin: 0 0 -14px;
  }

  .footer-frame { padding: 0 20px; }
  .footer-hero { min-height: 0; padding: 62px 0 52px; }
  .footer-brand-block {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 25px;
  }
  /* min-height:78px removed 2026-08-18: it was sized for the old two-line
     label-over-number layout. The button is a standard .btn now. */
  .footer-ledger { grid-template-columns: 1fr; }
  .footer-detail,
  .footer-detail:first-child,
  .footer-detail:nth-child(2),
  .footer-detail:last-child {
    grid-column: auto;
    padding: 28px 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  }
  .footer-detail:last-child { border-bottom: 0; }
}

@media (max-width: 500px) {
  .footer-brand-block {
    grid-template-columns: 1fr;
    gap: 23px;
  }
  .footer-brand-block img { width: 140px; }
  .footer-brand-block p { max-width: 340px; }
  .footer-phone-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* Footer readability pass: the leather texture is a high-contrast photo, so it
   reads louder than its opacity suggests. Calm it and lift the body text. */
.site-footer::before { opacity: .035 !important; }
.site-footer .footer-detail,
.site-footer .footer-ledger p,
.site-footer .footer-ledger a,
.site-footer .footer-brand-block p { color: rgba(246, 243, 237, .88) !important; }
.site-footer .footer-label { color: var(--gold) !important; opacity: 1 !important; }
.site-footer .footer-bottom { color: rgba(246, 243, 237, .70) !important; }

/* ============================================================
   Single-location layout. The stock grid is repeat(3, 1fr), so one
   card lands in the left third and reads like a mistake. One shop
   gets a wide horizontal card instead: storefront left, details right.
   ============================================================ */

.loc-grid-single {
  grid-template-columns: 1fr;
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}

.loc-card-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  text-align: left;
}
.loc-card-wide img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  aspect-ratio: auto;
  object-fit: cover;
}
.loc-card-wide .loc-body {
  padding: clamp(1.8rem, 3vw, 2.9rem);
  justify-content: center;
}
.loc-card-wide .loc-name { font-size: clamp(28px, 3vw, 38px); line-height: 1.05; }
.loc-card-wide .loc-addr { max-width: 34ch; }
.loc-card-wide .loc-hours { margin-bottom: .25rem; }
.loc-card-wide .loc-btns { margin-top: 1.6rem; padding-top: 0; }
.loc-card-wide:hover { transform: none; }
.loc-card-wide:hover img { transform: none; }

@media (max-width: 860px) {
  .loc-card-wide { grid-template-columns: 1fr; }
  .loc-card-wide img { min-height: 220px; aspect-ratio: 16/10; }
}

/* ============================================================
   Parallax behind Elliott. A real shop photo drifts slowly behind the
   cutout and the signature. JS sets --plx from scroll position; if JS
   never runs, or the visitor asks for reduced motion, it degrades to a
   plain fixed image with no movement.
   ============================================================ */

.elliott-section::before {
  background-image:
    linear-gradient(0deg, color-mix(in srgb, var(--ink) 55%, transparent), color-mix(in srgb, var(--ink) 55%, transparent)),
    url("assets/elliott-parallax.jpg?v=13482ec4") !important;
  background-size: cover !important;
  background-position: center calc(50% + var(--plx, 0px)) !important;
  opacity: .55 !important;
  will-change: background-position;
}

/* The cutout drifts the opposite way at a smaller amplitude, so Elliott
   separates from the room behind him instead of sliding with it. */
.elliott-figure { transform: translate3d(0, calc(var(--plx, 0px) * -0.35), 0); }

@media (prefers-reduced-motion: reduce) {
  .elliott-section::before { background-position: center 50% !important; }
  .elliott-figure { transform: none; }
}

/* ============================================================
   Trust: one honest Google rating card. No review count is shown
   because none was verifiable, and an invented one is worse than none.
   ============================================================ */

.trust-flex-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  flex-wrap: wrap;
  margin-top: 2rem;
}
.trust-flex-rating .review-card {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.6rem;
  border: 1px solid rgba(18,18,17,.14);
  border-radius: 3px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.trust-flex-rating .review-card:hover {
  border-color: var(--leather);
  transform: translateY(-2px);
}
.trust-flex-rating .review-head { display: flex; align-items: center; gap: .9rem; }
.trust-flex-rating .review-rating {
  font-family: var(--display);
  font-size: clamp(38px, 4vw, 52px);
  line-height: .9;
  color: var(--leather);
}
.trust-flex-rating .review-meta {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey-text);
  line-height: 1.5;
}
.trust-flex-rating .review-stars { color: var(--gold); letter-spacing: .1em; font-size: .95rem; }
.trust-flex-rating .review-quotes { display: none; }
.trust-note {
  max-width: 30ch;
  text-align: left;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--grey-text);
  margin: 0;
}
@media (max-width: 700px) {
  .trust-flex-rating { flex-direction: column; }
  .trust-note { text-align: center; max-width: 42ch; }
}

/* ============================================================
   Footer phone: the number IS the button. The previous version stacked a
   small "Call the shop" label above the number inside the same box, which
   read as a label looking for a field. Hours sit underneath and do real work.
   ============================================================ */

.footer-callout { display: flex; flex-direction: column; align-items: flex-end; gap: .85rem; }
.footer-callout-line {
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
/* Sizing comes from .btn .btn-red so this matches every other button on the
   site. Only the leather colour lock is local. A duplicate rule here used to
   set a 36px display face, which is what made it twice the height of the rest. */
.footer-phone-cta {
  background: var(--leather);
  color: #fff !important;
  text-align: center;
  white-space: nowrap;
}
.footer-phone-cta:hover { background: var(--leather-dark); }
.footer-hours {
  margin: 0;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246,243,237,.66);
}
@media (max-width: 860px) {
  .footer-callout { align-items: flex-start; }
}

/* ============================================================
   Live open/closed status + per-day hours in the footer.
   Ported from the Perfect Blend Fine Cigars build. Computed in the
   SHOP's timezone, not the visitor's, so someone browsing from the
   east coast still sees Las Vegas hours.
   ============================================================ */

.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246,243,237,.82);
}
.footer-status .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #8A8A8A;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  flex: 0 0 auto;
}
.footer-status .dot.open { background: #4ADE80; animation: garrison-pulse 2.4s infinite; }
.footer-status .dot.closed { background: #8A8A8A; }
@keyframes garrison-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-status .dot.open { animation: none; }
}

.footer-hours-list { list-style: none; margin: 0; padding: 0; }
.footer-hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 5px 0;
  font-size: 12.5px;
  color: rgba(246,243,237,.72);
  border-bottom: 1px solid rgba(246,243,237,.08);
}
.footer-hours-list li:last-child { border-bottom: 0; }
.footer-hours-list li.today {
  color: var(--gold);
  font-weight: 600;
}
.footer-hours-list li.today span:first-child::after {
  content: " · today";
  font-weight: 400;
  opacity: .7;
  text-transform: lowercase;
}

/* ============================================================
   Parallax overscan. The layer used to be inset:0 with the background
   POSITION shifted, so a 70px shift on a cover-sized image slid the photo
   off its own box and exposed the section colour underneath. The layer is
   now 120px taller than the section on each side and moves by TRANSFORM,
   so there is always image beyond the frame no matter where it sits.
   ============================================================ */
.elliott-section::before {
  inset: -120px 0 !important;          /* overscan top and bottom, flush sides */
  background-position: center center !important;
  background-size: cover !important;
  transform: translate3d(0, var(--plx, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .elliott-section::before { transform: none; }
}

/* ============================================================
   Parallax, final. Two separate causes of the brown wash:
   1. the layer sat at opacity .55 over a BROWN section colour, so 45% of
      what you saw was the brown, not the photo;
   2. the section itself was --chrome (brown), so any edge showed brown.
   The layer is now fully opaque and darkened by its own gradient, the
   section ground is near-black, and the photo is scaled past cover so
   there is image to spare in every direction.
   ============================================================ */
.elliott-section { background: var(--ink); }
.elliott-section::before {
  opacity: 1 !important;
  background-image:
    linear-gradient(0deg,
      color-mix(in srgb, var(--ink) 62%, transparent),
      color-mix(in srgb, var(--ink) 62%, transparent)),
    url("assets/elliott-parallax.jpg?v=13482ec4") !important;
  background-size: cover, auto 132% !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* ============================================================
   Mobile touch targets. Footer links and the header call button were
   14 to 27px tall, well under the 44px a thumb needs. Padding grows the
   hit area without changing how any of it looks.
   ============================================================ */
@media (max-width: 860px) {
  .site-footer a:not(.footer-phone-cta):not(.btn) {
    display: inline-block;
    padding: 9px 0;
    min-height: 24px;
  }
  .footer-socials { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .footer-bottom { gap: 4px; }
  .footer-bottom a { padding: 9px 0; }

  .header-book {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* The hero note wrapped mid phone-number on narrow screens. */
  .page-hero-note { line-height: 1.7; }
}

/* The gallery hero captions read a touch small at 9px once they were turned
   back on for mobile. 10px keeps them legible without crowding the photos. */
@media (max-width: 430px) {
  .page-hero-photo figcaption { font-size: 10px; letter-spacing: .1em; }
}

/* ============================================================
   Parallax on narrow screens, 2026-08-18.
   `background-size: auto 132%` locks the photo's scale to HEIGHT. That is
   correct on a wide desktop box, but on a phone the layer is 375 x 1194,
   so the 1600 x 1076 photo rendered at 2343 x 1576 and only 16% of its
   width was ever on screen — a 6x zoom into the bare wood column at dead
   centre. It read as "the image behind Elliott is gone", because nothing
   in that crop looks like a room.
   `cover` scales to the box's own aspect instead, which restores the full
   height of the shop and roughly 21% of its width, and the focal point is
   pulled left to 28% so Elliott stands in the middle of his own chair row
   rather than against a blank column. Darkening goes 62% -> 72% because the
   tighter crop puts more bright mirror behind the headline.
   Desktop keeps `auto 132%`: it is right there and already signed off.
   ============================================================ */
@media (max-width: 900px) {
  .elliott-section::before {
    background-image:
      linear-gradient(0deg,
        color-mix(in srgb, var(--ink) 72%, transparent),
        color-mix(in srgb, var(--ink) 72%, transparent)),
      url("assets/elliott-parallax.jpg?v=13482ec4") !important;
    background-size: cover, cover !important;
    background-position: center center, 28% center !important;
  }
}