/* KerbNab site — shared styles for the landing page and legal pages.
   Plain CSS, no build step: edit and re-drag the folder into Netlify.
   Design: warm off-white pages, coastal blue accent, a hero whose cycling
   word and photo swap in sync, a pale grey feature band and charcoal footer. */

:root {
  --blue: #1B6CA8;
  --green: #2E9E5B;
  --amber: #C68A1E;
  --yellow: #FFC42E;     /* brand accent — eyebrow, CTA, active map pin */
  --ink: #141E26;        /* also the charcoal map-section background */
  --muted: #4A5A64;
  --muted-2: #5D6E79;
  --line: #e3e8ec;
  --cream: #FDFCFA;      /* warm off-white page background */
  --pale-grey: #F6F8FA;  /* feature band */
  --pale-blue: #E3F0FA;
  --callout-bg: #EDF4FA;
  --card-bg: #F4F7F9;
  --photo-fallback: #E7F0F6;
  /* Fallback tints if a hero photo is missing (neutral coloured blocks) */
  --tint-blue: #DCEAF5;
  --tint-green: #DCEFE3;
  --tint-amber: #F3E7CF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--muted);
  line-height: 1.7;
  background: var(--cream);
  /* Sticky footer: on short pages the footer still sits at the viewport bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; }

a { color: var(--blue); }

h1, h2, h3 { color: var(--ink); }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Visually hidden but read by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Accessibility: skip link appears on keyboard focus */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--blue); color: #fff;
  padding: 8px 14px; font-weight: 600; border-radius: 0 0 8px 0; z-index: 30;
}
.skip-link:focus { left: 0; }

/* ---------- Header (no background — sits on the cream page) ---------- */

.site-header { background: transparent; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 18px; padding-bottom: 14px;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--blue); text-decoration: none;
}
.brand img { width: 40px; height: 40px; border-radius: 9px; display: block; }
.brand span { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.site-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted); text-decoration: none;
  font-weight: 600; font-size: 0.95rem; padding-bottom: 2px;
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a.active { color: var(--blue); border-bottom: 2px solid var(--blue); }

/* ---------- Landing layout ---------- */

.landing-main { flex: 1; display: flex; flex-direction: column; }

/* ---------- Hero: two columns ---------- */

/* Fills most of the viewport and centres its content, so the feature band
   follows at a natural distance instead of after a large void. */
.hero {
  padding: 48px 0;
  min-height: 82vh;
  display: flex;
  align-items: center;
}
/* Columns are grouped and centred (justify-content) rather than pinned to the
   screen edges, so the headline and photo read as one composition. */
.hero-grid {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 560px) 340px;
  grid-template-areas:
    "headline photo"
    "copy     photo"
    "actions  photo";
  justify-content: center;
  column-gap: 56px;
  align-items: center;
}
.hero-headline { grid-area: headline; }
.hero-copy     { grid-area: copy; }
.hero-actions  { grid-area: actions; }
.hero-photo    { grid-area: photo; align-self: center; }

.hero-headline {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem); /* ~52px desktop, scales down for tablet/mobile */
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.hero-copy {
  margin: 24px 0 0;
  max-width: 340px;
  font-size: 1.1rem;
  color: var(--muted-2);
}

.hero-actions { margin-top: 28px; }
.hero-note { margin: 15px 0 0; font-size: 0.92rem; color: var(--muted-2); }

/* Load-in: headline, copy and badges rise/fade once */
.hero-headline { animation: rise-in 0.6s ease 0.1s both; }
.hero-copy     { animation: rise-in 0.6s ease 0.25s both; }
.hero-actions  { animation: rise-in 0.6s ease 0.4s both; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Cycling word ---------- */

/* The mask is one line tall and clips the stack. Its width is set by the
   widest word inside the stack, so the headline never shifts horizontally. */
.word-mask {
  display: inline-block;
  overflow: hidden;
  height: 1.08em;
  vertical-align: bottom;
}
.word-stack {
  display: block;
  /* 5 keyframe stops, snapping between each (steps(1,end)); ~2.5s per word,
     10s total. The value is held for each 2.5s window then jumps. */
  animation: word-cycle 10s steps(1, end) infinite;
  will-change: transform;
}
.word {
  display: block;
  height: 1.08em;
  line-height: 1.08;
  font-weight: 600;
}
.word-blue  { color: var(--blue); }
.word-green { color: var(--green); }
.word-amber { color: var(--amber); }

@keyframes word-cycle {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-1.08em); }
  50%  { transform: translateY(-2.16em); }
  75%  { transform: translateY(-3.24em); }
  100% { transform: translateY(-4.32em); } /* repeated first word -> seamless */
}

/* ---------- Hero photo (swaps in sync with the word) ---------- */

.hero-photo {
  position: relative;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--photo-fallback);
}
.free-pill {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: var(--green); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 12px; border-radius: 999px; line-height: 1.6;
}
/* Each slot cross-fades on the same 10s cycle. Negative delays offset each by
   2.5s so the visible photo always matches the current word. Slot backgrounds
   are the fallback coloured blocks shown if a photo is missing. */
.photo-slot {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;
  animation: photo-fade 10s linear infinite;
  will-change: opacity;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tint-blue  { background: var(--tint-blue); }
.tint-green { background: var(--tint-green); }
.tint-amber { background: var(--tint-amber); }

.slot-1 { animation-delay: 0s; }      /* sofas   — full at t=0.0s */
.slot-2 { animation-delay: -7.5s; }   /* plants  — full at t=2.5s */
.slot-3 { animation-delay: -5s; }     /* shelves — full at t=5.0s */
.slot-4 { animation-delay: -2.5s; }   /* chairs  — full at t=7.5s */

@keyframes photo-fade {
  0%    { opacity: 1; }
  22.5% { opacity: 1; }
  25%   { opacity: 0; }   /* faded out exactly as the word snaps */
  97.5% { opacity: 0; }
  100%  { opacity: 1; }   /* faded back in just as its word arrives */
}

/* ---------- Badges ---------- */

/* The two badges share one line at ANY width, shrinking together rather than
   wrapping. At 58px the row is 410px wide, which is more than a 390px phone has
   to give (350px after .wrap's padding), so it used to break onto two lines.

   They flex in the ratio of their LAYOUT widths per unit of VISIBLE button
   height — Apple 2.99, Google 3.85 (see .badge-play below for why Google's is
   larger). Sizing them by that ratio is what keeps their visible buttons the
   same height as the row narrows, instead of drifting apart.

   max-width is the natural 410px, so on desktop this renders identically to the
   fixed 58px/86px it replaces; below that it just scales down. */
.badges {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: nowrap; max-width: 410px;
}
.badge-appstore { flex: 299 1 0; min-width: 0; }
.badge-play     { flex: 385 1 0; min-width: 0; }
.badge-appstore img, .badge-play img { width: 100%; height: auto; display: block; }
/* Where those 299 / 385 flex numbers come from — matching the two badges is not
   simply "same height", because the two files are built differently:
     Apple  — artwork fills its viewBox edge to edge. Visible button 2.992:1,
              so layout width per unit of visible height = 2.99.
     Google — ships 41px of transparent clear space on ALL FOUR sides of a
              646x250 canvas, so the visible button is 564x168 (3.357:1) and
              only 67.2% of the file's height. Its layout width per unit of
              VISIBLE height is therefore 2.584 / 0.672 = 3.85.
   Giving them equal heights would draw Google's button at 67% of Apple's, which
   is what made them look mismatched before.

   Google's button stays wider (~194px vs ~173px at full size) because its
   artwork is a genuinely longer shape. That can only be "fixed" by distorting
   it, which their brand terms forbid — equal height is the match that matters.

   The leftover transparent margin is not waste: Google requires clear space of
   at least 1/4 the badge height around it, and this supplies most of that on
   top of the flex gap. */

/* ---------- Landing feature band ---------- */

.features { background: var(--pale-grey); padding: 26px 0; }
.feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  max-width: 960px; margin: 0 auto;
}
.feature h2 { margin: 0 0 4px; color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--muted-2); font-size: 12.5px; line-height: 1.55; }

/* ---------- Legal / document pages ---------- */

.page-title-wrap { max-width: 600px; margin: 0 auto; width: 100%; padding: 26px 20px 0; }
.page-title-wrap h1 {
  margin: 0; font-size: 1.75rem;
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
}
.page-title-wrap.title-wide { max-width: 900px; }

main.doc { max-width: 600px; margin: 0 auto; width: 100%; padding: 6px 20px 56px; }
main.doc.doc-wide { max-width: 900px; }
.updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 18px; }

main.doc h2 { font-size: 0.94rem; margin: 32px 0 8px; }
main.doc h3 { font-size: 0.9rem; margin: 20px 0 6px; }
main.doc p, main.doc li { font-size: 1rem; }
main.doc li { margin-bottom: 6px; }

main.doc table { border-collapse: collapse; width: 100%; margin: 10px 0; }
main.doc th, main.doc td {
  text-align: left; padding: 9px 10px;
  border-bottom: 1px solid var(--line); font-size: 0.93rem; vertical-align: top;
}
main.doc th { color: var(--muted); font-weight: 600; }
ol.steps { padding-left: 22px; }
ol.steps li { margin-bottom: 10px; }

.callout {
  background: var(--callout-bg); border-left: 4px solid var(--blue);
  border-radius: 6px; padding: 14px 16px; margin: 14px 0;
}
.callout p { margin: 0; }

/* Delete-account: task cards */
.method-card {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 22px; margin: 18px 0;
  counter-increment: method;
}
.method-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.method-head::before {
  content: counter(method);
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.method-head h2 { margin: 0; font-size: 1.02rem; }
.method-card > :last-child { margin-bottom: 0; }

.keep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; align-items: start; }
.keep-card { background: var(--card-bg); border-radius: 12px; padding: 18px 20px; }
.keep-card h2 { margin: 0 0 8px; font-size: 1.02rem; }
.keep-card > :last-child { margin-bottom: 0; }
.keep-card table { margin: 0; }
.keep-card th, .keep-card td { font-size: 0.88rem; padding: 8px 8px 8px 0; }
.doc-wide > p, .doc-wide > .callout { max-width: 640px; }

/* Legal hub cards (legal.html) */
.cards { display: grid; gap: 16px; margin-top: 20px; }
.doc-card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 22px; text-decoration: none;
  color: var(--muted); transition: border-color 0.15s ease;
}
.doc-card:hover { border-color: var(--blue); }
.doc-card h3 { margin: 0 0 4px; color: var(--blue); font-size: 1.02rem; }
.doc-card span { color: var(--muted); font-size: 0.95rem; }
.lead-muted { font-size: 1.05rem; color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: #8D9BA5; margin-top: auto; }
.site-footer .wrap { padding-top: 20px; padding-bottom: 20px; }
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.footer-brand img { width: 26px; height: 26px; display: block; }
.footer-brand span { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a {
  color: #8D9BA5; text-decoration: none;
  font-weight: 600; font-size: 0.9rem;
}
.footer-links a:hover { text-decoration: underline; color: #fff; }
.site-footer .copyright { color: #7A8993; font-size: 0.8rem; margin: 14px 0 0; text-align: center; }

/* ---------- Responsive ---------- */

/* Stack the hero on small screens: headline, then photo, then copy, then badges */
@media (max-width: 640px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "headline"
      "photo"
      "copy"
      "actions";
    row-gap: 0;
    justify-items: start;
  }
  /* The stack above is left-aligned (justify-items: start) so the headline and
     copy keep a common left edge. The photo is the exception: at 340px it reads
     as a lone block shoved against the left margin, so centre just it. */
  .hero-photo { margin: 22px 0 4px; justify-self: center; }
  .hero-copy { max-width: 340px; }
}

@media (max-width: 700px) {
  .feature-grid { grid-template-columns: 1fr; gap: 18px; }
  .keep-grid { grid-template-columns: 1fr; }
  .footer-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer .copyright { text-align: left; }
}

@media (max-width: 480px) {
  .brand span { font-size: 1.15rem; }
  .site-nav { gap: 14px; }
  .page-title-wrap h1 { font-size: 1.5rem; }
}

/* ---------- Reduced motion: stop everything, show static state ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Show only the first word and first photo, statically */
  .word-stack { animation: none !important; transform: none !important; }
  .photo-slot { animation: none !important; opacity: 0 !important; }
  .slot-1 { opacity: 1 !important; }
  .hero-headline, .hero-copy, .hero-actions {
    animation: none !important; opacity: 1; transform: none;
  }
}

/* ================================================================
   CHARCOAL MAP SECTION
   ================================================================
   A dark band directly under the cream hero, with an interactive phone.

   The handoff from the section above is option (c): the charcoal block is
   pulled UP over the cream one and given rounded top corners and a soft
   shadow, so it reads as a card lifting off the page.

   Why that over a divider graphic or a colour gradient: the section above is
   warm off-white (#FDFCFA), not pure white, and fading that into #141E26 runs
   through a muddy grey-brown that reads as a rendering fault. A diagonal SVG
   divider means extra markup that has to be re-cut whenever the palette moves.
   The lifted card is pure CSS, needs no assets, and doubles as the resting
   state for the rise-in animation: the section is already "lifting", so the
   scroll reveal simply finishes the gesture.
   ================================================================ */

.mapsec {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: #fff;
  margin-top: -34px;              /* the overlap that creates the lift */
  border-radius: 34px 34px 0 0;
  padding: clamp(56px, 8vw, 104px) 0 clamp(60px, 9vw, 112px);
  min-height: 90vh;
  display: flex;
  align-items: center;
  box-shadow: 0 -18px 44px rgba(20, 30, 38, 0.16);
}

/* Column widths are fixed and the pair is CENTRED, rather than the text column
   being a stretchy 1fr. That is what lines the headline up with the hero above
   (475px in from the left at 1920px wide) and the feature cards below (473px).
   A 1fr column pins the text to the .wrap edge at 423px instead, which reads as
   a 50px indent jump between three stacked sections. 590 + 88 + 280 = 958 is
   what produces that match — change one, re-check the other two. */
.mapsec-grid {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 590px) 280px;
  justify-content: center;
  column-gap: clamp(32px, 6vw, 88px);
  align-items: center;
}

/* ---- Left column ---- */

.mapsec-eyebrow {
  margin: 0 0 18px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--yellow);
}

.mapsec-title {
  margin: 0;
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.125rem);   /* ~50px desktop */
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;                                /* overrides the global h2 ink */
}
.mapsec-title em {
  font-style: italic;
  color: var(--yellow);
}

.mapsec-lede {
  margin: 20px 0 0;
  max-width: 32ch;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.06rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.mapsec-cta {
  display: inline-block;
  margin-top: 30px;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.mapsec-cta:hover  { background: #FFD25C; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 196, 46, 0.26); }
.mapsec-cta:active { transform: translateY(0); }

/* ---- The phone ---- */

.phone-col { justify-self: center; }

.phone {
  position: relative;
  width: 280px;
  height: 570px;
  padding: 12px;
  border-radius: 42px;
  background: #0B1319;
  box-shadow:
    0 0 0 2px #26333D,
    0 30px 60px rgba(0, 0, 0, 0.45);
}

.phone-notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 104px; height: 22px;
  border-radius: 0 0 14px 14px;
  background: #0B1319;
  z-index: 3;
}

.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 31px;
  overflow: hidden;      /* clips the map art and any card near an edge */
  background: #EDF1EE;
}

.map-art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- Pins ----
   Positioned by the --x / --y custom properties set inline on each button, so
   moving a pin is a one-number edit in the HTML and never touches this file. */

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
}
.pin:focus { outline: none; }
.pin.is-active,
.pin:hover,
.pin:focus-visible { z-index: 2; }   /* the open card sits above its neighbours */

.pin-dot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(11, 19, 25, 0.35);
  transition: width 0.25s ease-out, height 0.25s ease-out, background-color 0.25s ease-out;
}
/* The tail: a small square rotated 45deg, tucked under the dot. */
.pin-dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 7px; height: 7px;
  margin-top: -4px;
  transform: translateX(-50%) rotate(45deg);
  background: inherit;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transition: background-color 0.25s ease-out;
}

.pin.is-active .pin-dot,
.pin:hover .pin-dot,
.pin:focus-visible .pin-dot {
  width: 26px; height: 26px;
  background: var(--yellow);
}

/* Keyboard users get a visible ring; mouse users do not. */
.pin:focus-visible .pin-dot { box-shadow: 0 0 0 4px rgba(255, 196, 46, 0.45); }

/* ---- The popup card ---- */

.pin-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 6px);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 170px;
  padding: 7px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(11, 19, 25, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.25s;
}
.pin.is-active .pin-card,
.pin:hover .pin-card,
.pin:focus-visible .pin-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

/* Placeholder item photo. Swap the inline --shot for a background-image to use
   a real one; nothing else needs changing. */
.pin-shot {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 7px;
  background: var(--shot, #CBD5DC);
  background-size: cover;
  background-position: center;
}

.pin-text { min-width: 0; text-align: left; line-height: 1.25; }
.pin-name {
  display: block;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pin-meta {
  display: block;
  margin-top: 1px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.64rem;
  color: var(--muted-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Scroll reveal ----
   The hidden state is scoped to .js-reveal, which ONLY the script adds. No JS
   (or reduced motion, where the script skips it) means no hidden state, so the
   section can never get stuck invisible. */

.mapsec.js-reveal .reveal,
.mapsec.js-reveal .phone-col {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mapsec.js-reveal .reveal    { transform: translateY(26px); }
.mapsec.js-reveal .phone-col { transform: translateY(38px) scale(0.96); }

.mapsec.js-reveal.is-visible .reveal,
.mapsec.js-reveal.is-visible .phone-col {
  opacity: 1;
  transform: none;
}

/* Staggered, so the eye lands on the headline before the phone arrives. */
.mapsec.js-reveal .mapsec-eyebrow { transition-delay: 0.05s; }
.mapsec.js-reveal .mapsec-title   { transition-delay: 0.12s; }
.mapsec.js-reveal .mapsec-lede    { transition-delay: 0.19s; }
.mapsec.js-reveal .mapsec-cta     { transition-delay: 0.26s; }
.mapsec.js-reveal .phone-col      { transition-delay: 0.16s; }

/* ---- Responsive ---- */

@media (max-width: 900px) {
  .mapsec {
    min-height: 0;
    margin-top: -26px;
    border-radius: 26px 26px 0 0;
    padding: clamp(48px, 9vw, 72px) 0 clamp(52px, 10vw, 80px);
  }
  .mapsec-grid {
    grid-template-columns: 1fr;   /* stack: copy on top, phone below */
    gap: 44px;
    justify-items: center;
    text-align: center;
  }
  .mapsec-lede { max-width: 34ch; margin-left: auto; margin-right: auto; }
  .phone-col { justify-self: center; }
}

@media (max-width: 420px) {
  /* Scale the whole phone rather than restyling its innards, so the map, pins
     and cards keep their proportions exactly. */
  .phone-col {
    height: 484px;                /* 570 * 0.85, so the wrapper does not overrun */
    display: flex;
    justify-content: center;
  }
  .phone { transform: scale(0.85); transform-origin: top center; }
}