/* 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(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/cb-stock-35.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(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: #ECECEC; 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(22,22,22,.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; }
  /* Layout gate 2026-11-06: centred on the whole pin button (dot + label),
     her edge pins threw the tapped Polaroid off the phone: Virginia (flip, 22%)
     opened at x -27 on a 360 screen and x -9 even at 440, Philadelphia ran
     9px past the right edge at 360. On a phone the Polaroid sits over its own
     label instead, flush with the label's outer edge, so it always lands inside
     the map. Same Polaroid, same tilt; only the anchor moves. Desktop untouched. */
  .arm-pol { left: auto; right: 0; transform-origin: 100% 100%;
    transform: rotate(-8deg) scale(.86); }
  .arm-spot.flip .arm-pol { left: 0; right: auto; transform-origin: 0 100%; }
  .arm-spot.pol-s .arm-pol { transform-origin: 100% 0; }
  .arm-spot.pol-s.flip .arm-pol { transform-origin: 0 0; }
  .arm-spot:hover .arm-pol, .arm-spot:focus-visible .arm-pol,
  .arm-spot.is-show .arm-pol { transform: 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; }
}