/* ============================================================
   ORANGE v3 — "warm editorial / friendly fintech"
   Fullscreen scroll-snap deck · cream base · logo orange
   ============================================================ */

:root {
  /* palette — sampled logo orange + colorhunt warm set */
  --orange:      #FC3600;   /* primary / CTA — from logo-horizontal.png */
  --orange-deep: #D62C00;
  --apricot:     #FFA559;   /* soft accent */
  --cream:       #FFE6C7;   /* palette base */
  --cream-hi:    #FFF4E6;   /* airy large fields */
  --ink:         #2E2A28;   /* warm charcoal — text */
  --ink-soft:    #6E6A66;
  --warm-dark:   #2A1A12;   /* warm near-black for duotone panel (never #000) */
  --graphite:    #26282C;   /* cool near-black — trust strip + services panel (neumorphism reference) */

  --f-display: "Google Sans Flex", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Google Sans Flex", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* type scale — 5 sizes, total. nothing else. */
  --fs-display: clamp(3rem, 7vw, 5.4rem);     /* every big heading: hero · section · closer */
  --fs-head:    clamp(1.35rem, 2.2vw, 1.6rem);/* step titles · glass question */
  --fs-lede:    clamp(1.05rem, 1.4vw, 1.2rem);/* lede · closer subline */
  --fs-body:    1rem;                          /* supporting paragraphs */
  --fs-mono:    12.5px;                        /* eyebrows · labels · stats · fine print */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --maxw: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  color: var(--ink);
  background: var(--cream-hi);
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.display { font-family: var(--f-display); font-weight: 700; line-height: 1.0; letter-spacing: -.025em; }
.display em { font-style: normal; color: var(--orange); }

/* ---- accessibility ---- */
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--cream-hi);
  padding: 10px 16px; border-radius: 10px; font: 600 14px/1 var(--f-body);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  width: 100%; max-width: var(--maxw); margin-inline: auto;  /* align to body content column, not screen edges */
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 60px);   /* match .panel-inner horizontal padding */
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand-logo { height: 38px; width: auto; }
.topnav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.topnav a { font-weight: 600; font-size: 15px; color: var(--ink); opacity: .82; transition: opacity .2s; }
.topnav a:hover { opacity: 1; }
.nav-cta {
  background: var(--ink); color: var(--cream-hi) !important;
  padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px;
  opacity: 1 !important; transition: transform .25s var(--ease), background .25s;
}
.nav-cta:hover { transform: translateY(-2px); background: var(--orange); }
/* topbar adapts on dark panels (body.theme-dark set by v3.js) */
body.theme-dark .topnav a { color: var(--cream-hi); }
body.theme-dark .nav-cta { background: var(--orange); }

/* ============================================================
   SLIDE DOTS
   ============================================================ */
.dots {
  position: fixed; right: clamp(16px, 2.4vw, 34px); top: 50%; z-index: 40;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 16px;
}
.dot { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.dot span {
  width: 8px; height: 8px; border-radius: 999px;
  background: currentColor; opacity: .3;
  transition: opacity .3s, transform .3s var(--ease);
}
.dot.is-active span { opacity: 1; transform: scale(1.5); }
.dot::after {
  content: attr(data-label);
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%) translateX(6px);
  font: 600 11px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; color: currentColor;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease);
}
.dot:hover::after { opacity: .85; transform: translateY(-50%) translateX(0); }
/* dot colour adapts per active panel theme */
.dots { color: var(--ink); }
body.theme-dark .dots { color: var(--cream-hi); }

/* ============================================================
   DECK + PANELS
   ============================================================ */
.deck {
  height: 100dvh; overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.deck::-webkit-scrollbar { display: none; }

.panel {
  position: relative; min-height: 100dvh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
}
.panel-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 120px clamp(20px, 5vw, 60px) 96px;
}

.eyebrow {
  font: 600 var(--fs-mono)/1 var(--f-mono); letter-spacing: .18em;
  color: var(--orange); margin-bottom: 22px;
}
.section-title { font-size: var(--fs-display); margin-bottom: 26px; }
.lede { font-size: var(--fs-lede); line-height: 1.5; max-width: 32ch; color: var(--ink-soft); }

/* atmosphere layers */
.mesh { display: none; }   /* background blobs removed */
.grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* ============================================================
   PANEL 1 — HERO
   ============================================================ */
/* cream studio cove — soft key light around the kiosk, gentle floor pool, warm cyclorama vignette
   (modelled on the reference photo: even cream backdrop, no stark-white spotlight) */
.panel--hero {
  background:
    radial-gradient(52% 66% at 68% 40%, rgba(255,255,255,.6), rgba(255,255,255,0) 66%),       /* key light — neutral white, no added warmth */
    radial-gradient(40% 20% at 67% 88%, rgba(255,252,246,.4), rgba(255,252,246,0) 74%),         /* faint floor pool */
    radial-gradient(130% 130% at 55% 44%, rgba(255,244,230,0) 58%, rgba(232,214,184,.24) 100%), /* gentle cream vignette */
    linear-gradient(180deg, var(--cream-hi) 0%, var(--cream) 100%);                              /* base: our cream tokens */
}
.panel--hero .panel-inner { padding-top: 100px; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center;
}
.hero-title { font-size: var(--fs-display); font-weight: 800; margin: 4px 0 26px; }  /* heavier weight compensates for dark-on-light optical thinning → matches panel 2's punch */
.hero-copy .lede { margin-bottom: 34px; }

/* "Find your nearest Orange" — rim-lit pill: clean white capsule with a warm glow top & bottom */
.find-pill {
  position: relative;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  max-width: max-content;
  padding: 18px 30px;
  background: #FFEFDC;                 /* warm cream, between --cream and --cream-hi */
  border-radius: 100px;               /* pill */
  color: var(--ink); text-decoration: none;
  font-family: var(--f-display); font-weight: 700;
  font-size: calc(var(--fs-head) - 6px); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 15px 35px rgba(46,42,40,.15);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* top-border highlight — a light line catching the top edge, fading out left & right */
.find-pill::before {
  content: ""; position: absolute; left: 50%; top: 1px; transform: translateX(-50%);
  width: 84%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  filter: blur(.5px); pointer-events: none;
}
/* soft low rim glow — a lighter tint of the cream hero backdrop, nudged low */
.find-pill::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  width: 42%; height: 4px; border-radius: 50%;
  background: rgba(255,248,238,.7); filter: blur(8px); opacity: .55;
  box-shadow: 0 0 12px rgba(255,248,238,.45); pointer-events: none;
}
.find-pill:hover { transform: translateY(-2px); box-shadow: 0 20px 45px rgba(46,42,40,.22); }
.find-pill__icon { width: 26px; height: 26px; flex: 0 0 auto; stroke: var(--orange); stroke-width: 2.5; fill: none; stroke-linecap: round; }

.hero-art { position: relative; display: grid; place-items: center end; }   /* push kiosk to the content's right edge */
.hero-kiosk { position: relative; z-index: 1; max-height: 58vh; width: auto; filter: drop-shadow(0 18px 20px rgba(46,42,40,.14)); }  /* leaves room for the trust strip below */
/* longer, softer studio shadow: dense core + wide diffuse spread — anchored under the right-aligned kiosk */
.hero-art::after {
  content: ""; position: absolute; right: 8%; bottom: 6%; z-index: 0;
  width: 58%; height: 64px;
  background:
    radial-gradient(ellipse 56% 100% at 50% 100%, rgba(46,42,40,.34), rgba(46,42,40,0) 70%),
    radial-gradient(ellipse 100% 64% at 50% 100%, rgba(46,42,40,.15), rgba(46,42,40,0) 76%);
  filter: blur(10px);
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 999px;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn span { transition: transform .25s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--solid { background: var(--orange); color: #fff; box-shadow: 0 12px 26px -10px rgba(252,54,0,.7); }
.btn--solid:hover { transform: translateY(-2px); background: var(--orange-deep); }
.btn--cream { background: var(--cream-hi); color: var(--orange); }
.btn--cream:hover { transform: translateY(-2px); }
.btn--ghost-light { border: 1.5px solid rgba(255,244,230,.5); color: var(--cream-hi); }
.btn--ghost-light:hover { border-color: var(--cream-hi); background: rgba(255,244,230,.1); }
.btn--ghost-cream { border: 1.5px solid rgba(255,244,230,.55); color: var(--cream-hi); }
.btn--ghost-cream:hover { background: rgba(255,244,230,.12); }

/* biller trust strip — v2 marquee pinned to the hero foot, v2 logo sizing */
.trust {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: var(--graphite);   /* same graphite as panel 2 — strip flows into the next slide */
  padding: 14px 0 18px; overflow: hidden;
}
/* edge fades in the bar's own color — keeps the dark band solid edge-to-edge */
.trust::before, .trust::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.trust::before { left: 0;  background: linear-gradient(to right, var(--graphite), transparent); }
.trust::after  { right: 0; background: linear-gradient(to left,  var(--graphite), transparent); }
.trust-track {
  display: flex; align-items: center; width: max-content;
  animation: trust-marquee 64s linear infinite;   /* 64s for 4 sets keeps the same px/sec as the old 32s/2-set loop */
}
/* 4 identical sets tile flush; -50% lands exactly on a set boundary AND keeps 2 sets always covering the viewport → seamless, no gap */
@keyframes trust-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trust-set {
  display: flex; align-items: center; gap: 34px; flex-shrink: 0;
  padding-right: 34px;   /* trailing space == gap, so the seam spacing matches the internal spacing */
}
.trust-set > span { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0 20px; }
.trust-set img { height: 17px; width: auto; max-width: 72px; object-fit: contain; display: block; }
/* per-logo size tuning — v2 ratios at 60% scale */
.trust .logo-kload img       { height: 43px; }
.trust .logo-manilawater img { height: 22px; }
.trust .logo-shopeepay img   { height: 22px; }
.trust .logo-grab img        { height: 13px; }
.trust .logo-maya img        { height: 13px; }
.trust .logo-palawanpay img  { height: 26px; max-width: none; }  /* wide wordmark — the 72px width cap was shrinking it */

/* ============================================================
   PANEL 3 — HOW IT WORKS (screenshot carousel)
   ============================================================ */
.panel--how {   /* hero's cream gradient, toned down — less orange */
  background:
    radial-gradient(52% 66% at 68% 40%, rgba(255,255,255,.65), rgba(255,255,255,0) 66%),     /* white key light */
    radial-gradient(40% 20% at 67% 88%, rgba(255,252,246,.4), rgba(255,252,246,0) 74%),        /* faint floor pool */
    radial-gradient(130% 130% at 55% 44%, rgba(255,244,230,0) 58%, rgba(232,214,184,.12) 100%),/* softened cream vignette */
    linear-gradient(180deg, var(--cream-hi) 0%, #FFEFDB 100%);                                  /* lighter, less-orange cream base */
}
.panel--how .panel-inner { text-align: center; padding-top: 90px; padding-bottom: 44px; }
.panel--how .section-title { margin-bottom: clamp(20px, 3vw, 32px); }   /* inherits var(--fs-display) — same as panel 2 */

.carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; max-width: 900px; margin: 0 auto; }
.carousel__viewport { grid-column: 2; overflow: visible; border-radius: 18px; }   /* neighbors peek instead of being clipped */
.carousel__track { display: flex; transition: transform .45s var(--ease); }
.carousel__slide { flex: 0 0 100%; opacity: .25; filter: blur(4px); transition: opacity .45s var(--ease), filter .45s var(--ease); }   /* frosted side slides */
.carousel__slide[aria-hidden="false"] { opacity: 1; filter: none; }   /* active slide full, sharp */
/* pressed-in plate — the screen sits sunk into a deep recess carved from the cream panel */
.carousel__img {
  width: 100%;
  background: var(--cream-hi);   /* matches the panel's cream background */
  border: 1px solid rgba(38,40,44,.1);   /* graphite (panel 2) at 10% */
  border-radius: 24px;
  padding: 24px;
  box-shadow:
    inset 11px 11px 24px rgba(214,194,160,.7),     /* recess — warm cream shadow, top-left */
    inset -11px -11px 24px rgba(214,194,160,.7);    /* same cream tone, bottom-right (no white edge) */
}
.carousel__img img { display: block; width: 100%; height: auto; border: 3px solid #fff; border-radius: 2px; box-shadow: 0 8px 20px -4px rgba(38,42,52,.32); }
.carousel__cap { margin-top: 16px; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); white-space: nowrap; max-width: none; margin-inline: auto; }
.carousel__n { font: 600 var(--fs-mono)/1 var(--f-mono); color: var(--orange); letter-spacing: .08em; margin-right: 6px; }
/* raised neumorphic nav buttons — light-surface twin of the circular service icons */
.carousel__nav {
  position: relative; z-index: 2;   /* stay above the peeking side slides */
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid transparent; color: var(--ink);
  background:
    linear-gradient(145deg, #FFF8EC, #F2E4CE) padding-box,    /* cream face — matches the panel */
    linear-gradient(135deg, rgba(255,251,243,.22) 0%, rgba(0,0,0,.2) 100%) border-box;   /* creamish-white top-left → softened dark bottom-right */
  cursor: pointer; transition: color .2s, transform .2s, box-shadow .2s;
  box-shadow: 6px 6px 14px rgba(214,194,160,.55), -5px -5px 12px rgba(255,251,243,.95);   /* warm cream shadow + creamish-white highlight */
}
.carousel__nav--prev { grid-column: 1; }
.carousel__nav--next { grid-column: 3; }
.carousel__nav:hover { color: var(--orange); transform: translateY(-1px); }
.carousel__nav:active { color: var(--orange); transform: none;
  box-shadow: inset 4px 4px 9px rgba(214,194,160,.6), inset -4px -4px 9px rgba(255,251,243,.95); }   /* pressed in */
.carousel__dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.carousel__dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(46,42,40,.25); cursor: pointer; transition: transform .25s var(--ease), background .25s; }
.carousel__dot.is-active { background: var(--orange); transform: scale(1.4); }

/* ============================================================
   PANEL 2 — SERVICES (what you can do)
   ============================================================ */
.panel--services { background: var(--graphite); }   /* cool graphite, sampled from the neumorphism reference */
.panel--services .panel-inner { padding-top: 76px; padding-bottom: 56px; text-align: center; }
.panel--services .section-title { margin-bottom: clamp(28px, 4vw, 38px); padding-bottom: 30px; color: var(--cream-hi); }
.svc-grid, .trust-grid {
  --grid-gap: clamp(20px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}   /* full content width — boxes align to the headline's left/right edges */
/* bordered feature boxes — icon disc + title on one row, description beneath */
.svc, .trust-pt {
  display: flex; flex-wrap: nowrap; align-items: center;   /* icon vertically centered against the text column */
  gap: 16px; text-align: left;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.svc:hover, .trust-pt:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.svc-text, .trust-pt-text { display: flex; flex-direction: column; }
/* glyph in a raised circular button, like the reference's controls */
.svc-icon, .trust-pt__ic {
  display: grid; place-items: center; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 50%;
  margin-right: 20px;   /* extra breathing room between the icon and the text */
  /* face (padding-box) + light-to-dark gradient ring (border-box behind a transparent border) */
  background:
    linear-gradient(135deg, #2D3036 0%, #202226 100%) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(0,0,0,.35) 100%) border-box;   /* upper-left light → lower-right dark */
  border: 1.5px solid transparent;
  box-shadow:
    8px 8px 18px rgba(12,13,15,.55),
    -6px -6px 14px rgba(118,124,136,.2),
    inset 0 1px 1px rgba(220,226,238,.05);
}
.svc-icon { color: #fff; }
.trust-pt__ic { color: var(--orange); }
.svc-icon svg, .trust-pt__ic svg { width: 24px; height: 24px; }
.svc h3, .trust-pt h3 { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--cream-hi); margin-bottom: 4px; }
.svc p, .trust-pt p { color: rgba(255,244,230,.6); font-size: var(--fs-body); line-height: 1.4; }

/* Center the 5th trust point on desktop to keep the 2-column layout balanced */
@media (min-width: 861px) {
  .trust-grid .trust-pt:last-child {
    grid-column: span 2;
    justify-self: center;
    width: 100%;
    max-width: calc(50% - var(--grid-gap) / 2);
  }
}

/* ============================================================
   PANEL 4 — WHERE (live map + search)
   ============================================================ */
.panel--where { background: var(--cream-hi); }
#kiosk-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background: #e9e4da; }   /* fullscreen map */

/* dark frosted backdrop for map alerts */
.map-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 26, 18, 0.45);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.map-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* title + glass search floating over the map */
.where-overlay {
  position: absolute; z-index: 1002;
  top: clamp(98px, 15vh, 156px);
  left: 50%; transform: translateX(-50%);   /* centered */
  width: max-content; max-width: calc(100% - 36px); text-align: center;
}
.where-title {   /* glass text — translucent letters, map showing through */
  display: inline-block; font-size: var(--fs-display); font-weight: 800; line-height: 1.05; white-space: nowrap;
  letter-spacing: -.01em; margin-bottom: 18px;
  color: rgba(255,255,255,.55);
  -webkit-text-stroke: .5px rgba(255,255,255,.85);
  filter: drop-shadow(0 12px 16px rgba(46,42,40,.45));   /* outer shadow, dropped lower */
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
.where-title__o {   /* "Orange" in orange glass */
  color: rgba(252,54,0,.55);
  -webkit-text-stroke: .5px rgba(252,54,0,.85);
}

/* glassmorphic search pill */
.map-search {
  display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 6px;
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.65); border-radius: 999px;
  box-shadow: 0 16px 40px -16px rgba(46,42,40,.45);
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease), border-color 0.2s, box-shadow 0.2s;
}
.map-search input {
  flex: 1; min-width: 0; font: 500 15px/1 var(--f-body); color: var(--ink);
  padding: 12px 14px; background: transparent; outline: none; border: 0;
}
.map-search input::placeholder { color: rgba(46,42,40,.55); }
.map-search input.is-empty { animation: nudge .4s; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.map-search button {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border: 0; cursor: pointer;
  background: var(--orange); color: #fff; border-radius: 50%;
  transition: background .2s, transform .2s;
}
.map-search button:hover { background: var(--orange-deep); transform: scale(1.05); }

/* Dim/blur search controls when alert toast is active */
body.has-map-alert .where-title,
body.has-map-alert .map-search {
  opacity: 0.25;
  filter: blur(3px);
  pointer-events: none;
}

/* glassmorphic map search toast alert (positioned above search bar inside overlay) */
.map-toast {
  margin-top: 16px;
  margin-bottom: 0;
  display: block;
  width: max-content;
  margin-inline: auto;
  background: rgba(255, 244, 230, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  padding: 12px 24px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 16px 36px rgba(46, 42, 40, 0.25);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.map-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.leaflet-container { font-family: var(--f-body); }
.kiosk-pin span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* ============================================================
   PANEL 5 — WHY ORANGE (trust)
   ============================================================ */
.panel--why { background: var(--graphite); }
.panel--why .panel-inner { text-align: center; padding-top: 96px; padding-bottom: 64px; }
.panel--why .section-title { color: var(--cream-hi); margin-bottom: clamp(32px, 5vw, 54px); }

.why-fee { margin-top: clamp(30px, 5vw, 52px); font: 500 var(--fs-mono)/1.5 var(--f-mono); color: rgba(255,244,230,.5); letter-spacing: .02em; }

/* ============================================================
   PANEL 6 — FAQ
   ============================================================ */
.panel--faq { background: var(--cream-hi); }
.panel--faq .panel-inner { text-align: center; padding-top: 96px; padding-bottom: 64px; }
.panel--faq .section-title { margin-bottom: clamp(32px, 5vw, 52px); }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 40px) clamp(28px, 4vw, 56px); text-align: left; max-width: 940px; margin: 0 auto; }
.faq-item h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-head); letter-spacing: -.01em; margin-bottom: 8px; }
.faq-item h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 10px; vertical-align: middle; }
.faq-item p { color: var(--ink-soft); font-size: var(--fs-body); line-height: 1.55; }

/* ============================================================
   PANEL 7 — SUPPORT / CONTACT (closing footer)
   ============================================================ */
.panel--contact { background: var(--graphite); color: var(--cream-hi); }
.contact-inner { display: grid; justify-content: center; justify-items: center; text-align: center; gap: 16px; max-width: 720px; margin: 0 auto; }
.contact-logo { height: 30px; width: auto; opacity: .95; }
.panel--contact .section-title { color: var(--cream-hi); margin-bottom: 0; white-space: nowrap; }
.panel--contact .lede { color: rgba(255,244,230,.7); margin: 0 auto; max-width: none; }
.contact-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 48px; margin-top: 10px; padding: 40px 0; }
.contact-row { display: inline-flex; align-items: center; gap: 18px; color: var(--cream-hi); font-size: var(--fs-body); }
a.contact-row, .contact-row a { transition: opacity .15s var(--ease); }
a.contact-row:hover, .contact-row a:hover { opacity: .85; text-decoration: underline; }
.contact-row__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; color: var(--orange); background: linear-gradient(135deg, #2D3036, #202226); box-shadow: 5px 5px 12px rgba(12,13,15,.5), -4px -4px 10px rgba(118,124,136,.18); }
.contact-row__ic svg { width: 20px; height: 20px; }
.contact-row > span:last-child { text-align: left; }
.contact-row__k { display: block; font: 600 var(--fs-mono)/1 var(--f-mono); color: rgba(255,244,230,.5); letter-spacing: .06em; margin-bottom: 3px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 14px; }
.contact-fine { font: 500 var(--fs-mono)/1.5 var(--f-mono); color: rgba(255,244,230,.55); letter-spacing: .03em; margin-top: 10px; }
@media (min-width: 861px) {
  .contact-row--email { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   REVEAL — staggered per panel
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.panel.is-in .reveal { opacity: 1; transform: none; }
.reveal[data-d="0"] { transition-delay: .04s; }
.reveal[data-d="1"] { transition-delay: .14s; }
.reveal[data-d="2"] { transition-delay: .26s; }
.reveal[data-d="3"] { transition-delay: .38s; }
.reveal[data-d="4"] { transition-delay: .5s; }
.reveal[data-d="5"] { transition-delay: .62s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .topnav a:not(.nav-cta) { display: none; }
  .dots { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-art { order: -1; }
  .hero-kiosk { max-height: 38vh; }
  .hero-title { font-size: clamp(2.8rem, 13vw, 4.4rem); }
  .panel-inner { padding: 104px clamp(20px,6vw,40px) 84px; }
  .find-pill { white-space: normal; font-size: calc(var(--fs-head) - 9px); padding: 16px 24px; gap: 18px; }   /* nowrap can overflow narrow phones */
  .svc-grid, .trust-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc, .trust-pt { padding: 18px 20px; }
  /* P3 carousel — nav buttons below image on phones */
  .carousel { grid-template-columns: 1fr; }
  .carousel__viewport { grid-column: 1; }
  .carousel__nav--prev { grid-row: 3; grid-column: 1; justify-self: start; margin-top: -2px; }
  .carousel__nav--next { grid-row: 3; grid-column: 1; justify-self: end; margin-top: -2px; }
  .carousel__dots { grid-row: 3; align-self: center; }
  .carousel__cap { white-space: normal; }   /* let captions wrap on narrow phones */
  /* P4 map stays fullscreen on phones */
  .where-title { white-space: normal; }   /* big title can wrap on narrow phones */
  /* P6 FAQ — single column */
  .faq-grid { grid-template-columns: 1fr; gap: 18px; }
  /* P7 contact rows stack */
  .contact-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    width: max-content;
    margin-inline: auto;
  }
  .panel--contact .section-title { white-space: normal; }
  .contact-inner { gap: 12px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; scroll-snap-type: y proximity; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .trust-track { animation: none; }
  * { transition-duration: .01ms !important; }
}