/* 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 gallery, slid through by hand ----
   Was the kit's drifting venue belt (greyscale cells, captions, a duplicated
   loop). Owner, 2026-10-01: a plain gallery you slide through, every photo in
   full colour, no captions, one serif title. First cut was a native
   scroll-snap strip, which the owner found did not slide on a press: at
   desktop widths the strip ran out of travel after a step or two and
   rewound. Now a LOOP: the script copies the set once on each side, every
   press slides the track exactly one photo (this transition), and past
   either end it is moved back a whole set with no transition, so the slide
   never runs out. The arrows are the pricing page's add-on carousel arrows,
   recoloured below for this light band.
   The band is her PAPER, not slate (owner, 2026-10-01, "background color
   white"): title and arrows in ink (12.6:1), the edge fades paper. */
.loc-belt { background: var(--cream); color: var(--ink); padding: 84px 0 88px; overflow: hidden; }
.loc-belt-title { margin: 0 auto 44px; max-width: 1200px; padding: 0 60px;
  font-family: var(--font-serif); font-weight: 400; font-size: 46px; line-height: 1.1;
  color: var(--ink); text-align: center; }
.loc-belt-title em { font-family: var(--font-italic); font-style: normal; }
.loc-belt-viewport { position: relative; }
.loc-belt-viewport::before, .loc-belt-viewport::after { content: "";
  position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.loc-belt-viewport::before { left: 0; background: linear-gradient(90deg, var(--cream), rgba(242,241,238,0)); }
.loc-belt-viewport::after { right: 0; background: linear-gradient(270deg, var(--cream), rgba(242,241,238,0)); }
.loc-belt .svc-carousel-arrow { border-color: rgba(46,42,37,.45); color: var(--ink); }
.loc-belt .svc-carousel-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--cream-text); }
.loc-belt .svc-carousel-arrow:focus-visible { outline-color: var(--accent); }
.loc-belt-stage { overflow: hidden; padding-left: 60px; touch-action: pan-y; }
.loc-belt-track { display: flex; gap: 30px; width: max-content; will-change: transform;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.loc-belt-track.is-jump { transition: none; }
.loc-cell { margin: 0; flex: none; width: 300px; }
.loc-cell img,
.loc-cell video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.loc-belt-nav { margin-top: 36px; }

/* ---- reviews: full-bleed fixed image, one cream card, click to cycle ---- */
.loc-rev { position: relative; min-height: 100vh; padding: 110px 60px;
  background: url('../images/po-guests-strips.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: #D6C3BD; 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(242,241,238,.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 { transition: none; }
  .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-title { padding: 0 22px; margin-bottom: 32px; font-size: clamp(34px, 9.5vw, 44px); }
  .loc-belt-viewport::before, .loc-belt-viewport::after { width: 22px; }
  .loc-belt-stage { padding-left: 22px; }
  .loc-belt-track { gap: 18px; }
  .loc-cell { width: 240px; }
  .loc-belt-nav { margin-top: 28px; }
  .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; }
  /* Vail and Breckenridge sit at x 16% and 26% (her real geography; the kit's
     flip pins were at 34% and 80%), so a Polaroid centred on their label hung
     23-35px off the left edge of the phone when tapped (final layout gate,
     2026-10-02). On phones the two flip pins anchor their Polaroid to the
     label's left edge instead, 14px in, which is the overhang of the -4deg
     tilt: same card, same tilt, same lift, now whole on screen from 360 up. */
  .arm-spot.flip .arm-pol { left: 14px; transform: 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: rotate(-4deg) scale(1); }
  .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 inquiry form on her slate (owner, 2026-10-02: "the blue color") ----
   THIS PAGE ONLY: location.css loads on the Contact page alone and last, so
   it outranks the kit's paper band in patterns.css, and every other page's
   form keeps the paper. Everything on the band is her paper #F2F1EE on
   #5E647A (5.19:1). The kit dims three things with opacity, re-measured on
   the slate in WebKit at 1440 and 390: placeholders and the date label at .9
   (4.58:1; the kit's .75 and .55 would be 3.7 and 2.9 here), the date picker
   icon .8 and inverted so it reads light. Checkboxes take a paper accent so
   the box shows on the slate. The select's dropdown list is the browser's
   own panel and stays ink on paper. */
.sec-contact-form { background: #5E647A; color: var(--cream-text); }
.sec-contact-form .field { color: var(--cream-text); border-bottom-color: rgba(242,241,238,.5); }
.sec-contact-form .field::placeholder { color: rgba(242,241,238,.9); }
.sec-contact-form .field:focus { border-bottom-color: var(--cream-text); }
.sec-contact-form .fd-label { opacity: .9; }
.sec-contact-form select.field {
  background-image: linear-gradient(45deg, transparent 50%, var(--cream-text) 50%),
                    linear-gradient(135deg, var(--cream-text) 50%, transparent 50%); }
.sec-contact-form select.field option { color: var(--ink); background: var(--cream); }
.sec-contact-form .field-date::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; }
.sec-contact-form .addon-picks { border-color: rgba(242,241,238,.5); }
.sec-contact-form .addon-picks legend,
.sec-contact-form .addon-picks label { color: var(--cream-text); }
.sec-contact-form .addon-picks input[type="checkbox"] { accent-color: var(--cream-text); }
.sec-contact-form .cf-form .btn { border-color: var(--cream-text); color: var(--cream-text); }
.sec-contact-form .cf-form .btn:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.sec-contact-form .cf-tel { border-bottom-color: rgba(242,241,238,.4); }
@media (hover: hover) { .sec-contact-form .cf-tel:hover { border-bottom-color: var(--cream-text); } }

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