/* location.html page geometry (flow layer lives in css/patterns.css; only
   location-specific composition here). Beautify pass 2026-07-18: cream
   editorial split hero + drive-time plate, drifting venue belt (own engine
   in location.js), staggered review columns, mirrored venue guide with
   ken-burns, hover index rows, the hover venue map, FAQ index panel. */

/* ---- hero slot, band 1: cream editorial split ---- */
.loc-hero { background: var(--cream); overflow: hidden; }
.loc-hero-wrap { max-width: 1200px; margin: 0 auto; padding: 150px 60px 96px;
  display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.loc-kicker { margin: 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.loc-h1 { margin: 22px 0 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 64px; line-height: 1.08; }
.loc-h1 em { font-family: var(--font-italic); font-style: normal; }
.loc-lede { margin: 26px 0 0; max-width: 540px; font-family: var(--font-pop);
  font-weight: 300; font-size: 16px; line-height: 1.6; letter-spacing: .02em; }
.loc-cta { display: flex; gap: 16px; margin-top: 36px; }
.loc-cta .btn { min-width: 180px; height: 48px; }
.loc-btn-fill { background: var(--ink); color: var(--cream-text); }
.loc-note { margin: 34px 0 0; padding-top: 18px;
  border-top: 1px solid rgba(46,42,37,.25); max-width: 540px;
  font-family: var(--font-pop); font-weight: 300; font-size: 13.5px;
  line-height: 1.6; opacity: .8; }
.loc-hero-photo { position: relative; margin: 0; }
.loc-hero-photo img,
.loc-hero-photo video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.loc-hero-plate { position: absolute; left: -34px; bottom: 34px;
  background: var(--black); color: var(--cream-text); padding: 20px 26px 22px; }
.loc-hero-plate b { display: block; font-family: var(--font-italic);
  font-weight: 400; font-size: 34px; line-height: 1; }
.loc-hero-plate span { display: block; margin-top: 9px; font-family: var(--font-pop);
  font-weight: 300; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .75; }

/* staggered load rise (hero only) */
.rise { opacity: 0; transform: translateY(26px); animation: loc-rise .9s ease forwards; }
.loc-hero-copy .rise:nth-child(1) { animation-delay: .05s; }
.loc-hero-copy .rise:nth-child(2) { animation-delay: .15s; }
.loc-hero-copy .rise:nth-child(3) { animation-delay: .25s; }
.loc-hero-copy .rise:nth-child(4) { animation-delay: .35s; }
.loc-hero-copy .rise:nth-child(5) { animation-delay: .45s; }
.loc-hero-photo.rise { animation-delay: .3s; }
@keyframes loc-rise { to { opacity: 1; transform: none; } }

/* ---- hero slot, band 2: the drifting venue belt ---- */
.loc-belt { background: var(--black); color: var(--cream-text); padding: 84px 0 88px; overflow: hidden; }
.loc-belt-head { max-width: 1200px; margin: 0 auto 44px; padding: 0 60px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.loc-belt-kicker { margin: 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.loc-belt-note { margin: 0; font-family: var(--font-italic); font-size: 21px; }
.loc-belt-viewport { position: relative; }
.loc-belt-viewport::before, .loc-belt-viewport::after { content: "";
  position: absolute; top: 0; bottom: 0; width: 90px; z-index: 1; pointer-events: none; }
.loc-belt-viewport::before { left: 0; background: linear-gradient(90deg, var(--black), rgba(25,22,19,0)); }
.loc-belt-viewport::after { right: 0; background: linear-gradient(270deg, var(--black), rgba(25,22,19,0)); }
.loc-belt-track { display: flex; gap: 30px; width: max-content;
  padding-right: 30px; will-change: transform; }
.loc-cell { margin: 0; flex: none; width: 264px; }
.loc-cell img,
.loc-cell video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  filter: grayscale(1) brightness(.72); transform: scale(.97);
  transition: filter .8s ease, transform .8s ease; }
.loc-cell img.lead,
.loc-cell video.lead { filter: none; transform: scale(1); }
.loc-cell figcaption { margin-top: 14px; opacity: .45; transition: opacity .6s ease; }
.loc-cell:has(img.lead) figcaption,
.loc-cell:has(video.lead) figcaption { opacity: 1; }
.loc-cell b { display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: 19px; line-height: 1.2; }
.loc-cell figcaption span { display: block; font-family: var(--font-pop);
  font-weight: 300; font-size: 12.5px; opacity: .65; margin-top: 4px; }

/* ---- reviews: full-bleed fixed image, one cream card, click to cycle ---- */
.loc-rev { position: relative; min-height: 100vh; padding: 110px 60px;
  background: url('../images/reviews-band.jpg') center 30% / cover fixed no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loc-rev::before { content: ""; position: absolute; inset: 0; background: rgba(19,19,19,.58); }
.loc-rev > * { position: relative; }
.lrev-kicker { margin: 0 0 16px; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream-text); opacity: .8; text-align: center; }
.lrev-title { margin: 0 0 52px; font-family: var(--font-serif); font-weight: 400;
  font-size: 46px; line-height: 1.1; color: var(--cream-text); text-align: center; }
.lrev-title em { font-family: var(--font-italic); font-style: normal; }
.lrev-card { width: 640px; max-width: 100%; margin: 0; background: var(--cream);
  color: var(--ink); padding: 46px 52px 40px; cursor: pointer;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.lrev-card:focus-visible { outline: 2px solid var(--cream-text); outline-offset: 4px; }
.lrev-stars { display: block; color: var(--accent); font-size: 15px; letter-spacing: .35em; }
.lrev-deck { display: grid; margin-top: 20px; }
.lrev-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s; }
.lrev-slide.is-on { opacity: 1; visibility: visible; }
.lrev-slide blockquote { margin: 0; font-family: var(--font-serif);
  font-size: 24px; line-height: 1.45; }
.lrev-who { margin: 22px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .06em; }
.lrev-who b { font-weight: 400; }
.lrev-who span { display: block; margin-top: 4px; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.lrev-foot { margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(46,42,37,.22); display: flex;
  align-items: baseline; justify-content: space-between; }
.lrev-hint { font-family: var(--font-pop); font-weight: 300; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.lrev-count { font-family: var(--font-italic); font-size: 19px; }

/* ---- venue guide: mirrored, numbered, ken-burns (gd base in patterns.css).
   Desktop-scoped so patterns.css's mobile single-column rules keep winning
   below the breakpoint (these selectors outrank them otherwise). ---- */
@media (min-width: 901px) {
  .loc-venues .gd-grid { grid-template-columns: 7fr 5fr; }
  .loc-venues .gd-stage { order: -1; }
}
.loc-venues .gd-item { justify-content: flex-start; gap: 22px; }
.loc-venues .gd-arrow { margin-left: auto; }
.gd-idx { flex: none; font-family: var(--font-italic); font-size: 16px; opacity: .8; }
.loc-venues .gd-media img.is-on,
.loc-venues .gd-media video.is-on { animation: loc-ken 14s ease-out forwards; }
@keyframes loc-ken { from { transform: scale(1); } to { transform: scale(1.07); } }

/* ---- what-we-offer: editorial index rows ---- */
.offer-list { margin-top: 56px; }
.offer-row { display: grid; grid-template-columns: 90px 1fr 240px 60px;
  gap: 0 40px; align-items: center; padding: 30px 0;
  border-top: 1px solid var(--line); color: inherit; text-decoration: none;
  transition: padding-left .35s ease; }
.offer-row:last-child { border-bottom: 1px solid var(--line); }
.offer-row:hover { padding-left: 16px; }
.offer-num { font-family: var(--font-italic); font-size: 20px; }
.offer-body h3 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 30px; line-height: 1.15; }
.offer-body p { margin: 10px 0 0; max-width: 520px; font-family: var(--font-pop);
  font-weight: 300; font-size: 14.5px; line-height: 1.6; }
.offer-cta { display: inline-block; margin-top: 12px; font-family: var(--font-pop);
  font-weight: 300; font-size: 13.5px; text-decoration: underline;
  text-underline-offset: 4px; }
.offer-media { height: 150px; overflow: hidden; }
.offer-media img,
.offer-media video { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); transition: filter .6s ease, transform .6s ease; }
.offer-row:hover .offer-media img,
.offer-row:hover .offer-media video { filter: none; transform: scale(1.05); }
.offer-arrow { font-family: var(--font-italic); font-size: 26px;
  justify-self: end; transition: transform .35s ease; }
.offer-row:hover .offer-arrow { transform: translateX(8px); }

/* ---- areas-served: zones list + the hover venue map (stone survey card;
   hovering or tapping a dot lifts a Polaroid of the booth at that venue) ---- */
.area-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 70px;
  margin-top: 56px; align-items: center; }
.zone { display: grid; grid-template-columns: 90px 1fr; gap: 0 40px;
  padding: 26px 0; border-top: 1px solid var(--line); }
.zone:last-of-type { border-bottom: 1px solid var(--line); }
.zone .fl-num { grid-row: 1 / span 2; }
.zone h3 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 25px; line-height: 1.2; }
.zone p { margin: 10px 0 0; grid-column: 2; max-width: 560px;
  font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.6; }
.arm { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px;
  justify-self: center; background: #ECE6DC; color: var(--ink);
  border: 1px solid rgba(46,42,37,.3); }
.arm-web { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arm-web circle { fill: none; stroke: rgba(46,42,37,.11); stroke-width: 1;
  vector-effect: non-scaling-stroke; }
.arm-spokes line { stroke: rgba(46,42,37,.26); stroke-width: 1;
  vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; }
.arm-hint, .arm-north, .arm-scale { position: absolute; margin: 0;
  font-family: var(--font-pop); font-weight: 300; font-size: 11px;
  letter-spacing: .28em; text-transform: uppercase; opacity: .55; }
.arm-hint { left: 26px; top: 24px; }
.arm-north { right: 26px; top: 24px; letter-spacing: 0; }
.arm-north::after { content: ""; position: absolute; left: 50%; top: calc(100% + 7px);
  width: 1px; height: 22px; background: currentColor; opacity: .7; }
.arm-scale { left: 26px; bottom: 24px; display: flex; align-items: center; gap: 12px; }
.arm-scale i { width: 64px; height: 1px; background: currentColor; position: relative; }
.arm-scale i::before, .arm-scale i::after { content: ""; position: absolute;
  top: -4px; width: 1px; height: 9px; background: currentColor; }
.arm-scale i::before { left: 0; }
.arm-scale i::after { right: 0; }
.arm-core { position: absolute; left: 50%; top: 53%; margin: 0;
  transform: translate(-50%, -50%); text-align: center; }
.arm-core svg { width: 22px; height: 22px; fill: var(--ink); opacity: .9;
  display: block; margin: 0 auto; }
.arm-core span { display: block; margin-top: 8px; font-family: var(--font-pop);
  font-weight: 300; font-size: 11.5px; letter-spacing: .3em;
  text-transform: uppercase; opacity: .85; padding-left: .3em; }
.arm-spot { position: absolute; left: var(--x); top: var(--y);
  transform: translate(-9px, -50%); display: flex; align-items: center; gap: 11px;
  padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
  z-index: 2; transition: opacity .35s ease; }
.arm-spot.flip { flex-direction: row-reverse;
  transform: translate(calc(9px - 100%), -50%); }
.arm:hover .arm-spot:not(:hover):not(.is-show) { opacity: .45; }
.arm-spot > i { position: relative; flex: none; width: 9px; height: 9px;
  border-radius: 50%; background: var(--ink); opacity: .85; }
.arm-spot > i::before { content: ""; position: absolute; inset: -11px;
  border-radius: 50%; background: rgba(46,42,37,.14); transform: scale(.4);
  opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.arm-spot:hover > i::before, .arm-spot:focus-visible > i::before,
.arm-spot.is-show > i::before { transform: scale(1); opacity: 1; }
.arm-name { border: 1px solid rgba(46,42,37,.3); background: rgba(244,241,235,.78);
  padding: 9px 13px; font-family: var(--font-mont); font-weight: 500;
  font-size: 12.5px; line-height: 1.2; letter-spacing: .03em; white-space: nowrap;
  transition: border-color .35s ease, background-color .35s ease; }
.arm-spot:hover .arm-name, .arm-spot:focus-visible .arm-name,
.arm-spot.is-show .arm-name { border-color: rgba(46,42,37,.6);
  background: var(--cream); }
.arm-spot:hover, .arm-spot.is-show { z-index: 7; }
.arm-spot:focus-visible { outline: none; }
.arm-pol { position: absolute; left: 50%; bottom: calc(100% + 14px); width: 186px;
  padding: 9px 9px 12px; background: #fff; color: var(--ink);
  box-shadow: 0 16px 36px rgba(46,42,37,.28); transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(-8deg) scale(.86); opacity: 0;
  visibility: hidden; pointer-events: none; z-index: 6;
  transition: opacity .3s ease, visibility .35s,
    transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.arm-spot:hover .arm-pol, .arm-spot:focus-visible .arm-pol,
.arm-spot.is-show .arm-pol { opacity: 1; visibility: visible;
  transform: translateX(-50%) rotate(-4deg) scale(1); }
.arm-spot.pol-s .arm-pol { bottom: auto; top: calc(100% + 14px);
  transform-origin: 50% 0; }
.arm-pol img,
.arm-pol video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.arm-pol em { display: block; margin-top: 9px; font-family: var(--font-italic);
  font-style: normal; font-size: 14.5px; line-height: 1.3; text-align: center; }

/* ---- local FAQ: question index driving a sticky answer panel (slides stack
   like lrev-deck, so without JS the first answer still shows) ---- */
.loc-faq { display: flex; align-items: center; min-height: 100vh; }
.loc-faq .fl-wrap { width: 100%; }
.lfx-grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 80px; align-items: start; }
.lfx-index { border-top: 1px solid var(--line); }
.lfx-ib { display: flex; align-items: baseline; gap: 22px; width: 100%;
  padding: 24px 4px; background: none; border: 0;
  border-bottom: 1px solid var(--line); color: inherit; text-align: left;
  cursor: pointer; opacity: .55;
  transition: opacity .35s ease, padding-left .35s ease; }
.lfx-ib:hover { opacity: .85; }
.lfx-ib.is-active { opacity: 1; padding-left: 14px; }
.lfx-inum { flex: none; font-family: var(--font-italic); font-size: 17px;
  color: var(--accent-lift); }
.lfx-it { font-family: var(--font-serif); font-weight: 400; font-size: 23px;
  line-height: 1.25; }
.lfx-panel { position: sticky; top: 100px; border: 1px solid var(--line);
  padding: 52px 54px 56px; }
.lfx-deck { display: grid; }
.lfx-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s; }
.lfx-slide.is-on { opacity: 1; visibility: visible; }
.lfx-pnum { display: block; font-family: var(--font-italic); font-size: 44px;
  line-height: 1; color: var(--accent-lift); }
.lfx-slide h3 { margin: 22px 0 0; font-family: var(--font-serif);
  font-weight: 400; font-size: 30px; line-height: 1.2; }
.lfx-slide p { margin: 20px 0 0; max-width: 440px; font-family: var(--font-pop);
  font-weight: 300; font-size: 15.5px; line-height: 1.8; letter-spacing: .02em;
  opacity: .85; }

/* ---- reduced motion: everything above settles instantly ---- */
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  .loc-belt-track { transform: none !important; }
  .loc-cell img,
  .loc-cell video { transform: none; transition: none; filter: grayscale(1) brightness(.85); }
  .loc-cell img.lead,
  .loc-cell video.lead { filter: none; }
  .loc-cell figcaption { opacity: 1; }
  .loc-venues .gd-media img.is-on,
  .loc-venues .gd-media video.is-on { animation: none; }
  .offer-row,
  .offer-media img,
  .offer-arrow,
  .lfx-ib,
  .lfx-slide,
  .lrev-slide,
  .arm-spot,
  .arm-spot > i::before,
  .arm-name,
  .arm-pol,
  .offer-media video { transition: none; }
}

/* ---- mobile (additive; kit breakpoint) ---- */
@media (max-width: 900px) {
  .loc-hero-wrap { grid-template-columns: 1fr; padding: 110px 22px 64px; gap: 44px; }
  .loc-h1 { font-size: clamp(38px, 11vw, 48px); }
  .loc-cta { flex-direction: column; align-items: flex-start; }
  .loc-cta .btn { width: 100%; max-width: 340px; }
  .loc-hero-plate { left: auto; right: 0; bottom: 22px; padding: 16px 20px 18px; }
  .loc-hero-plate b { font-size: 26px; }
  .loc-belt { padding: 60px 0 64px; }
  .loc-belt-head { padding: 0 22px; margin-bottom: 32px; }
  .loc-belt-note { font-size: 18px; }
  .loc-cell { width: 200px; }
  .loc-rev { min-height: 0; padding: 72px 22px 76px;
    background-attachment: scroll; }
  /* cover scales the background photo up hard at 390px, so the heading band
     lands on brighter pixels than it does on desktop. Lowest scrim that keeps
     the kicker >=4.5:1 and the title >=3:1 against the worst pixel measured
     there: .66 (desktop still clears at .58, so it keeps the photo as visible
     as legibility allows). BUILD: re-measure after swapping the photo. */
  .loc-rev::before { background: rgba(19,19,19,.66); }
  .lrev-title { font-size: clamp(34px, 9.5vw, 44px); margin-bottom: 36px; }
  .lrev-card { padding: 34px 26px 30px; }
  .lrev-slide blockquote { font-size: 20px; }
  .offer-row { grid-template-columns: 1fr; gap: 14px 0; padding: 24px 0; }
  .offer-row:hover { padding-left: 0; }
  .offer-num { font-size: 16px; }
  .offer-media { height: 200px; }
  .offer-arrow { display: none; }
  .area-grid { grid-template-columns: 1fr; gap: 48px; margin-top: 36px; }
  .zone { grid-template-columns: 1fr; gap: 6px 0; padding: 22px 0; }
  .zone .fl-num { grid-row: auto; }
  .zone p { grid-column: 1; }
  .arm { max-width: 400px; }
  .arm-hint, .arm-north, .arm-scale { display: none; }
  /* the centre label keeps its desktop width (141px) while the card drops to
     346px, which is what makes the nearest pin collide with it. Same shrink the
     pin labels already take on mobile, no new declarations. */
  .arm-core span { font-size: 10px; letter-spacing: .14em; padding-left: .14em; }
  .arm-spot { gap: 8px; }
  .arm-name { padding: 7px 10px; font-size: 10.5px; }
  .arm-pol { width: 150px; }
  .arm-pol em { font-size: 13px; }
  .loc-faq { min-height: 0; }
  .lfx-grid { grid-template-columns: 1fr; gap: 36px 0; margin-top: 36px; }
  .lfx-panel { position: static; padding: 34px 26px 38px; }
  .lfx-ib { padding: 20px 0; }
  .lfx-ib.is-active { padding-left: 10px; }
  .lfx-it { font-size: 20px; }
  .lfx-pnum { font-size: 34px; }
  .lfx-slide h3 { font-size: 24px; }
}

/* her accents on the location page's own bands (see style.css for the rule) */
.loc-kicker { color: var(--accent); }
.lrev-kicker { color: var(--accent-lift); opacity: 1; }
/* The venue belt is `.loc-belt { background: var(--black) }` and .loc-cell lives
   inside it, so both of these sit on DARK ground, not light: the red measured
   1.83:1 on the kicker and on all twelve cell captions, which left each caption
   title less legible than its own grey subtitle. */
.loc-belt-kicker { color: var(--accent-lift); }
.loc-cell figcaption b { color: var(--accent-lift); }

/* ---- the areas map below 1200 (2026-09-27, layout gate) ------------------
   This client's Lake Tahoe spot (18%/62%) sits level with the centre label,
   and the label UNDER the star met its pin box at every width where the map
   is under ~470px: 46x13px at 320, 34x9 at 360, 24x6 at 390, 11x3 at 430,
   8x2 at 440, and 48x6 at 950 / 36x3 at 1024 in the two-column band, where
   the kit's desktop map rules still apply to a phone-sized map (measured in
   WebKit and Chromium). The pin box was covering "CARSON". Nothing on this
   map sits above the star, so below 1200 the label goes there instead: same
   label, same type, the star does not move. At 1200 and up the map is 517px
   or wider and the kit's own placement is clear. */
@media (max-width: 1199px) {
  .arm-core span { position: absolute; bottom: calc(100% + 8px); left: 50%;
                   transform: translateX(-50%); margin: 0; white-space: nowrap; }
}
/* In the same band (901 to 1024) the map is 389 to 427px wide, narrower than
   the 430/440 phone maps where the kit already drops its three corner
   ornaments; kept at desktop size they collide, the Gardnerville pin box
   running through "Roughly fifty miles" (42x17px at 950, 20x16 at 1024). The
   kit's own rule, one breakpoint wider. */
@media (min-width: 901px) and (max-width: 1024px) {
  .arm-hint, .arm-north, .arm-scale { display: none; }
}