/* ============================================================================
   NOBLE MOBILE — the Visit page
   ---------------------------------------------------------------------------
   A quiet page. The homepage earns its scroll with pinned scenes and a zoom;
   this one has a job — where we are, how to get there, how to reach someone —
   and everything here is in service of doing that quickly.

   It shares base.css and scenes.css with the homepage, so the type, the tokens,
   the drifting field, the nav, the buttons, the social marks and the footer are
   all the same objects. Only what is particular to this page lives here.
   ========================================================================= */

/* The homepage is one pinned scene after another and never scrolls normally;
   this page does, so it needs the ordinary rhythm those scenes replaced. */
.page main { display: block; }

.page section { position: relative; }

/* Everything marked data-r comes up on approach — js/visit.js. Held at zero
   here so nothing is seen at rest for a frame and then re-animated; the script
   restores it immediately if GSAP is missing or motion is turned down, and the
   <noscript> block on the page covers scripting being off entirely. */
.page [data-r] { opacity: 0; will-change: transform, opacity; }


/* ═══════════════════════════════════════════════════ the welcome ════════ */
.vhero {
  min-height: min(86vh, 760px);
  display: grid;
  align-items: center;
  padding: clamp(120px, 18vh, 190px) 0 clamp(50px, 8vh, 90px);
}
.vhero__wrap { display: grid; justify-items: start; gap: clamp(16px, 2.4vh, 28px); }

/* The page names itself at the same scale the homepage's SERVICES does, rather
   than as the hairline eyebrow it was. Same gold, same tracking, same case —
   only the size changes. */
.vhero__kicker {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.vhero__title {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 6.4rem);
  letter-spacing: -.05em;
  line-height: .98;
}
.vhero__lead { max-width: 52ch; }
.vhero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }


/* ═══════════════════════════════════════════════════ the counters ═══════ */
/* The locations are the last thing on the page now — the message card that
   used to follow them is gone — so the breathing room before the footer is
   theirs. */
.vplaces { padding: clamp(40px, 7vh, 90px) 0 clamp(80px, 13vh, 150px); }
.vplaces__head {
  display: grid; gap: 12px;
  max-width: 46ch;
  margin-bottom: clamp(30px, 5vh, 54px);
}

.places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}

/* A card, not a panel: the map is part of it rather than something sitting
   inside it, which is why the frame clips and the body is the only padded
   part. */
.place {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: clamp(16px, 1.5vw, 24px);
  overflow: hidden;
  background: linear-gradient(168deg, #fff, rgba(255, 255, 255, .74));
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 22px 44px -34px rgba(28, 24, 16, .42);
  transition: box-shadow .55s var(--ease), transform .55s var(--ease);
}
.place:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px var(--gold-soft),
    0 34px 60px -34px rgba(28, 24, 16, .45);
}

.place__map {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.place__map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  /* the embed arrives saturated; this seats it in the page's own light without
     touching anything about the map itself */
  filter: saturate(.86) contrast(.97);
}

/* The branch that has no map yet. It says so, rather than showing a picture of
   somewhere it is not. */
.place__map--soon {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background:
    repeating-linear-gradient(135deg, rgba(22,22,28,.028) 0 14px, transparent 14px 28px),
    var(--ink);
}
.place__map--soon p {
  margin: 0;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.place__pin {
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  box-shadow: inset 0 0 0 1.5px var(--line-2);
}

.place__body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 34px);
}
.place__name {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.place__addr {
  margin: 0;
  font-style: normal;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text-2);
}
.place__fact { margin-top: 4px; }

/* Anything not yet known is marked as not yet known, and never filled in with
   something plausible. */
.is-todo {
  color: var(--text-3);
  font-style: italic;
}
.place__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.place__acts .btn { padding: 11px 20px; font-size: .82rem; }

.place--soon { opacity: .92; }


/* ═══════════════════════════════════════════════════ narrower ══════════ */
@media (max-width: 900px) {
  .places { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  /* this is the only way back on a phone, so it stays */
  .page .nav__cta { display: inline-flex; }
  .vhero { min-height: 0; padding-top: clamp(100px, 16vh, 150px); }
  .place__acts .btn { min-height: 44px; }
}

/* a phone on its side: the two stores go back to side by side, so each map
   and its address fit in one screen rather than two */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1000px) {
  .vhero { padding-top: 84px; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .place__body { padding: 16px; gap: 8px; }
  .place__name { font-size: 1.4rem; }
}


/* ═══════════════════════════════════════════════ reduced motion ════════ */
@media (prefers-reduced-motion: reduce) {
  .page [data-r] { opacity: 1 !important; transform: none !important; }
  .place:hover, .btn:hover, .soc__btn:hover { transform: none; }
}