/* 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. (The FAQ is the kit's
   shared block since 2026-10-07: script.js + css/patterns.css + css/services.css.) */

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

/* ---- 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,
  .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; }
  /* A .flip spot hangs its label LEFT of its dot, so a flip spot near the
     card's left edge has its centre near x=0, and a polaroid centred under it
     runs off the screen: Clifton at --x:16% opened a 162px card whose left
     edge sat at viewport x -38 at 390 (and further out at 360), and the
     section's overflow:hidden cut the photo and its caption off at the edge
     (Corre Memories layout gate, 2026-10-15). On phones the flip spots'
     polaroids anchor to the spot's left edge instead of its centre, which
     keeps the same card and the same pop inside the map; desktop, where the
     card is wide enough for the centred one, is untouched. The hidden-state
     transform is restated with the matching x so the pop does not slide.
     left is 14px, not 0: the card leans -4deg about its bottom-left corner,
     which carries its top-left corner 13px further left, and at 360 wide a
     card anchored at 0 still put that corner 6px off the screen. */
  .arm-spot.flip .arm-pol { left: 14px; transform-origin: 0 100%;
    transform: translateX(0) rotate(-8deg) scale(.86); }
  .arm-spot.flip:hover .arm-pol, .arm-spot.flip:focus-visible .arm-pol,
  .arm-spot.flip.is-show .arm-pol { transform: translateX(0) rotate(-4deg) scale(1); }
}

/* 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); }

/* Between 901 and 1024 the map is 389 to 427px wide, narrower than the 430/440
   phone maps where this kit already drops its three corner ornaments; kept at
   desktop size they collide with the pins (a pin box ran through "Roughly
   fifty miles" at 950 and 1024 on the Desert Glow build, 2026-09-27). The
   kit's own phone rule, one breakpoint wider. */
@media (min-width: 901px) and (max-width: 1024px) {
  .arm-hint, .arm-north, .arm-scale { display: none; }
}