/* 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(22,22,22,.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(17,17,17,0)); }
.loc-belt-viewport::after { right: 0; background: linear-gradient(270deg, var(--black), rgba(17,17,17,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/cta-bg.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(17,17,17,.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(22,22,22,.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: #E7E7E7; color: var(--ink);
  border: 1px solid rgba(22,22,22,.3); }
.arm-web { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.arm-web circle { fill: none; stroke: rgba(22,22,22,.11); stroke-width: 1;
  vector-effect: non-scaling-stroke; }
.arm-spokes line { stroke: rgba(22,22,22,.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(22,22,22,.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(22,22,22,.3); background: rgba(247,247,247,.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(22,22,22,.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(17,17,17,.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); }
.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); }
.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(17,17,17,.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; }
}