/* ── Design Tokens ── */
:root {
  --bg: #ffffff;
  --bg-alt: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --border: rgba(15,30,60,0.1);
  --text: #101a2e;
  --text-muted: #5b6577;
  --accent: #456777;
  --accent-2: #2e4650;
  --green: #62751a;
  --green-bright: #b2d234;
  --yellow: #b7791f;
  --red: #ed1165;
  --gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --radius: 16px;
  --radius-sm: 9px;
  --shadow: 0 4px 24px rgba(16,26,46,0.08);
  --shadow-lg: 0 20px 60px rgba(16,26,46,0.14);
  --font: 'Inter', system-ui, sans-serif;
  --t: 0.22s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
input, textarea, select, button { font-family: inherit; }

/* ── Typography ── */
h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.85rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.35; }
p { color: var(--text-muted); }

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.78rem 1.65rem;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), opacity var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 0 28px rgba(69,103,119,0.38);
}
.btn-primary:hover { box-shadow: 0 0 44px rgba(69,103,119,0.58); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-nav {
  background: var(--gradient);
  color: #fff;
  padding: 0.52rem 1.2rem;
  font-size: 0.87rem;
}

/* ── Nav Bar ── */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(1.5rem, 5vw);
  height: 66px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.logo-img { display: block; width: auto; max-width: 240px; object-fit: contain; }
.logo-p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--gradient);
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff;
}
.logo-accent { color: var(--accent); }

#main-nav {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-size: 0.9rem;
  font-weight: 500;
}
#main-nav a { color: var(--text-muted); transition: color var(--t); }
#main-nav a:hover { color: var(--text); }
#main-nav a.btn-nav, #main-nav a.btn-nav:hover { color: #fff; }
#main-nav button { font-family: inherit; }

.investment-request-dialog {
  width: min(92vw, 460px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.investment-request-dialog::backdrop {
  background: rgba(16,26,46,0.6);
  backdrop-filter: blur(4px);
}
.investment-request-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 2rem;
}
.investment-request-form h2 { padding-right: 2rem; }
.investment-request-form > p { line-height: 1.6; }
.investment-request-form label {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
}
.investment-request-form input[type='text'],
.investment-request-form input[type='tel'],
.investment-request-form input[type='email'] {
  width: 100%;
  padding: 0.82rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.investment-request-form input[type='text']:focus,
.investment-request-form input[type='tel']:focus,
.investment-request-form input[type='email']:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(69,103,119,0.14);
}
.investment-request-form .investment-request-confirmation {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.5;
}
.investment-request-confirmation input {
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}
.investment-request-submit {
  justify-content: center;
  margin-top: 0.5rem;
}
.investment-request-form .cf-turnstile { margin-top: 0.4rem; }
.investment-request-submit:disabled { opacity: 0.65; cursor: wait; }
.investment-request-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}
.investment-request-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  text-align: center;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--t);
}

/* ── Hero ── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 55% 45%;
  align-items: center;
  gap: 3rem;
  margin-top: -66px;
  min-height: 90vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 90% 40%, rgba(69,103,119,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 10% 90%, rgba(46,70,80,0.07) 0%, transparent 55%);
}

/* Hero background video — fills the hero, muted/looping/controls-free, with a white
   transparency overlay (opacity set in the admin) layered on top for text contrast.
   Both this and .hero-bg-overlay are absolutely positioned against .hero itself
   (position:relative) via inset:0, rather than via grid-column/grid-row placement:
   grid-row/-column placement for absolutely positioned items resolves against the
   grid's *explicit* row/column tracks only, and .hero has no grid-template-rows
   defined, so on mobile — where .hero-content and .hero-visual stack into two
   auto-generated rows instead of sharing one row side-by-side — a `grid-row: 1 / -1`
   span would collapse to just the first row instead of the full stack, leaving the
   video/overlay short of the hero's actual (taller, two-row) bottom edge. inset:0
   against the positioned .hero ancestor covers the full hero height regardless of
   how many rows it lays out in. */
.hero-bg-video-wrap {
  position: absolute;
  inset: 0;
  width: 150% !important;
  height: 130%;
  left: -20%;
  z-index: 0;
  overflow: hidden;
  background: #0b1a2b;
  pointer-events: none;
}
.hero-bg-video-wrap iframe,
.hero-bg-video-wrap > div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-content,
.hero-visual {
  position: relative;
  z-index: 2;
}
.hero-content {
  padding: 6rem max(1.5rem, 5vw) 5rem;
}

.hero-badge {
  display: inline-block;
  padding: 0.32rem 0.9rem;
  background: rgba(69,103,119,0.1);
  border: 1px solid rgba(69,103,119,0.28);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
}

.hero-content h1 { margin-bottom: 1.2rem; }

.hero-sub {
  font-size: 1.08rem;
  line-height: 1.72;
  max-width: 520px;
  margin-bottom: 2rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; }
.stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-label { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; overflow: visible; line-height: 1.4; }

/* Hero visual — lot card */
.hero-visual { display: flex; justify-content: center; align-items: flex-start; }

.lot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  width: 400px;
  box-shadow: var(--shadow-lg);
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.lot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.lot-title {
  font-size: var(--lot-title-font-size, 0.75rem);
  font-weight: var(--lot-title-font-weight, 600);
  color: var(--red);
  animation: pulse-badge 1.2s ease-in-out infinite;
}
/* No negative top margin here: .lot-description is the first child of
   #lot-view-stack, which has overflow:hidden (a BFC), so a negative top
   margin no longer collapses into the spacing above it the way it would in
   normal flow — it just shifts the text above the stack's clipped box and
   gets cut off. The 1rem bottom margin already on .lot-mode-toggle provides
   the gap above, so no extra top margin is needed here. */
.lot-description {
  font-size: var(--lot-description-font-size, 0.72rem);
  font-weight: var(--lot-description-font-weight, 400);
  color: var(--text-muted);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(178,210,52,0.1);
  border: 1px solid rgba(178,210,52,0.25);
  border-radius: 100px;
  padding: 0.15rem 0.55rem;
  animation: pulse-badge 1.2s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* The hero lot now uses an SVG map traced from the provided reference image,
   with the live cells absolutely positioned over the matching parking bays
   so both server-rendered and client-rendered states align to the same lot
   geometry. */
.lot-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1131 / 1398;
  background-image: url('/images/hero-lot-map.svg');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 0.9rem;
  border-radius: calc(var(--radius) - 0.2rem);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
}

.lspace {
  --lspace-x-trim: var(--live-lspace-x-trim, 0.8842%);
  position: absolute;
  left: calc(var(--space-x) - var(--lspace-x-trim));
  top: var(--space-y);
  width: calc(var(--space-w) + var(--lspace-x-trim));
  height: var(--space-h);
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: default;
  transition: background-color var(--t), box-shadow var(--t), transform var(--t);
  overflow: visible;
}
.lspace-num {
  display: none;
}
.lspace.open {
  background: rgba(178,210,52,0.12);
  box-shadow: inset 0 0 0 1px rgba(178,210,52,0.4);
}
.lspace.occupied {
  background: rgba(237,17,101,0.13);
  box-shadow: inset 0 0 0 1px rgba(237,17,101,0.4);
}
.lspace.occupied::after {
  content: '';
  position: absolute;
  inset: 12%;
  color: rgba(69,103,119,0.55);
  border-radius: var(--radius-sm);
  border: 1.5px solid currentColor;
  transform: scale(var(--live-lspace-occupied-scale, 1));
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}
@supports ((mask-image: url('/images/lspace-occupied-shape-horizontal.svg')) or (-webkit-mask-image: url('/images/lspace-occupied-shape-horizontal.svg'))) {
  .lspace.occupied::after {
    border: 0;
    border-radius: 0;
    background-color: currentColor;
    -webkit-mask-image: url('/images/lspace-occupied-shape-horizontal.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-image: url('/images/lspace-occupied-shape-horizontal.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
  }
  .lspace[data-orientation="vertical"].occupied::after {
    -webkit-mask-image: url('/images/lspace-occupied-shape-vertical.svg');
    mask-image: url('/images/lspace-occupied-shape-vertical.svg');
  }
}
@media (forced-colors: active) {
  .lspace.occupied::after {
    color: CanvasText;
    -webkit-mask-image: none;
    mask-image: none;
    background-color: transparent;
    border: 1px solid CanvasText;
    border-radius: var(--radius-sm);
  }
  @supports ((mask-image: url('/images/lspace-occupied-shape-horizontal.svg')) or (-webkit-mask-image: url('/images/lspace-occupied-shape-horizontal.svg'))) {
    .lspace.occupied::after {
      forced-color-adjust: none;
      background-color: CanvasText;
      border: 0;
      border-radius: 0;
      -webkit-mask-image: url('/images/lspace-occupied-shape-horizontal.svg');
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: 100% 100%;
      mask-image: url('/images/lspace-occupied-shape-horizontal.svg');
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: 100% 100%;
    }
    .lspace[data-orientation="vertical"].occupied::after {
      -webkit-mask-image: url('/images/lspace-occupied-shape-vertical.svg');
      mask-image: url('/images/lspace-occupied-shape-vertical.svg');
    }
  }
}

.lspace-tooltip {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: var(--text);
  color: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
  max-width: 5.75rem;
  white-space: normal;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 5;
}
.lspace-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--text);
}
.lspace[data-tooltip-side="left"] .lspace-tooltip {
  left: auto;
  right: calc(100% + 8px);
}
.lspace[data-tooltip-side="left"] .lspace-tooltip::after {
  left: 100%;
  right: auto;
  transform: translate(-1px, -50%);
  border-right-color: transparent;
  border-left-color: var(--text);
}
.lspace-tooltip-plate {
  font-family: 'Courier New', monospace;
  font-weight: 700;
}
.lspace-tooltip-image {
  width: 100px;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}
.lspace:hover .lspace-tooltip,
.lspace:focus-visible .lspace-tooltip {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 960px) {
  .lspace-tooltip {
    top: auto;
    right: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
  }
  .lspace-tooltip::after {
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-right-color: transparent;
    border-left-color: transparent;
    border-top-color: var(--text);
  }
  .lspace[data-tooltip-side="left"] .lspace-tooltip {
    right: auto;
    left: 50%;
  }
  .lspace[data-tooltip-side="left"] .lspace-tooltip::after {
    left: 50%;
    transform: translateX(-50%);
    border-left-color: transparent;
    border-top-color: var(--text);
  }
  .lspace[data-tooltip-vertical="bottom"] .lspace-tooltip {
    top: calc(100% + 6px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .lspace[data-tooltip-vertical="bottom"] .lspace-tooltip::after {
    top: auto;
    bottom: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-top-color: transparent;
    border-bottom-color: var(--text);
  }
}

/* Live View mode toggle (Spot Availability vs Operations) */
.lot-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: -0.3rem 0 1rem;
}
.lot-mode-label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); transition: color var(--t); }
.lot-mode-label.is-active { color: var(--accent-2); }
.lot-toggle-switch { position: relative; display: inline-block; width: 38px; height: 21px; flex-shrink: 0; }
.lot-toggle-switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.lot-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--green-bright);
  border-radius: 100px;
  transition: background var(--t);
}
.lot-toggle-slider::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--t);
  box-shadow: 0 1px 3px rgba(16,26,46,0.3);
}
.lot-toggle-switch input:checked + .lot-toggle-slider { background: var(--accent); }
.lot-toggle-switch input:checked + .lot-toggle-slider::before { transform: translateX(17px); }
.lot-toggle-switch input:focus-visible + .lot-toggle-slider { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wraps the two .lot-view panels (Spot Availability / Operations) so the
   card animates smoothly to its new height when live-view.js toggles
   between them, instead of jumping instantly the way plain `hidden`
   toggling would. JS sets an explicit pixel height (locking the current
   size, then transitioning to the incoming panel's size) and clears it
   back to `auto` once the transition finishes so the box still tracks
   content/viewport changes at rest. */
.lot-view-stack {
  overflow: hidden;
  transition: height var(--t);
}

/* Live View — Operations panel */
.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ops-box {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 64px;
  justify-content: center;
}
.ops-box-occupancy { flex-direction: row; align-items: center; gap: 0.6rem; }
.ops-box-value { font-size: 1.15rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.ops-box-label { font-size: 0.66rem; color: var(--text-muted); }

.ops-donut {
  --ops-pct: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--red) calc(var(--ops-pct) * 1%), var(--surface) 0);
}
.ops-donut-value {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--text);
}

.ops-status { display: flex; flex-direction: column; gap: 0.4rem; }
.ops-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text);
}
.ops-legend { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--text-muted); }
.ops-legend-item { display: flex; align-items: center; gap: 0.2rem; }
.ops-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ops-dot-registered { background: var(--accent); }
.ops-dot-unregistered { background: var(--green-bright); }
.ops-dot-violations { background: var(--red); }

.ops-bar {
  display: flex;
  width: 100%;
  height: 30px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ops-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  transition: width var(--t);
  white-space: nowrap;
  overflow: hidden;
}
.ops-bar-registered { background: var(--accent-2); }
.ops-bar-unregistered { background: var(--green-bright); }
.ops-bar-violations { background: var(--red); }
.ops-bar-percents {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* ── Venue Strip ── */
.venue-strip {
  padding: 2.25rem max(1.5rem, 5vw);
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.strip-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 1.2rem;
}
.strip-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem;
}
.strip-item {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── Sections ── */
.section { padding: 6rem max(1.5rem, 5vw); }
.section-alt { background: var(--bg-alt); }
.section-dark {
  background: linear-gradient(145deg, #eef2f8 0%, #e6ebf3 100%);
}
.section-inner { max-width: 1100px; margin: 0 auto; }

.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 4rem;
}
.section-header h2 { margin: 0.6rem 0 0.8rem; }
.section-header p { font-size: 1.05rem; line-height: 1.7; }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── How It Works Steps ── */
.steps {
  display: flex;
  align-items: flex-start;
}
.step {
  flex: 1;
  text-align: center;
  padding: 0 1.75rem;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--gradient);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1.2rem;
  box-shadow: 0 0 28px rgba(69,103,119,0.3);
}
.step h3 { margin-bottom: 0.55rem; }

.step-connector {
  flex-shrink: 0;
  width: 72px;
  height: 2px;
  background: var(--border);
  margin-top: 28px;
  position: relative;
}
.step-connector::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -4px;
  border: 5px solid transparent;
  border-left-color: var(--border);
}

/* ── Feature Grid ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.feature-card:hover {
  border-color: rgba(69,103,119,0.4);
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(69,103,119,0.1);
}
.feature-icon { font-size: 2rem; margin-bottom: 1rem; display: block; }
.feature-card h3 { margin-bottom: 0.55rem; }

/* ── Products — Stacked Scroll Cards ── */
.products-section { padding-bottom: 0; }
.products-section .section-inner { margin-bottom: 2rem; }

.stack {
  position: relative;
}

.stack-card {
  position: sticky;
  top: 66px;
  min-height: min(560px, calc(100vh - 66px));
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-top: 3px solid var(--accent);
  box-shadow: 0 -30px 60px rgba(16,26,46,0.12);
  transform: scale(var(--stack-scale, 1));
  transform-origin: top center;
  filter: brightness(calc(1 - var(--stack-dim, 0)));
  will-change: transform, filter;
  overflow: hidden;
  margin-bottom: 10px;
  /* Animates the card growing/shrinking when a read-more toggle expands or
     collapses its pds-blocks (see public/js/pds-read-more.js). */
  transition: height var(--pds-expand-t, 0.4s ease);
}

.stack-card:last-child { margin-bottom: 0; }

/* Background image box, sized/positioned via admin-configurable CSS custom
   properties. The box itself is anchored at the configured position and
   sized to the configured width/height, fading into the card's solid
   background color via a linear gradient towards the right so the image
   blends smoothly into the surrounding card. */
.stack-card-bg {
  position: absolute;
  top: var(--stack-bg-pos-y, 50%);
  left: var(--stack-bg-pos-x, 50%);
  z-index: 0;
  pointer-events: none;
  width: var(--stack-bg-width, 33%);
  height: var(--stack-bg-height, 100%);
  overflow: hidden;
}
/* The image lives on ::before (not directly on .stack-card-bg) so it can be
   scaled slightly beyond an exact `cover` fit and clipped by the parent's
   overflow:hidden above. A plain `background-size: cover` only leaves slack
   to pan along whichever single axis the box is proportionally wider/taller
   than the source image on - the other axis is pinned with zero slack, so
   for the box's default narrow/tall shape (34% wide, 100% tall) any
   landscape or square photo ends up height-bound and the focal-y admin
   field has no visible effect at all no matter what it's set to. Scaling
   the already-`cover`-fitted image up a bit further around the configured
   focal point (`transform-origin` matching `background-position`) adds
   real slack in both axes, so focal-x and focal-y both always move the
   image regardless of the source photo's aspect ratio. */
.stack-card-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--stack-bg-image);
  background-repeat: no-repeat;
  background-position: var(--stack-bg-focal-x, 50%) var(--stack-bg-focal-y, 50%);
  background-size: cover;
  transform: scale(1.25);
  transform-origin: var(--stack-bg-focal-x, 50%) var(--stack-bg-focal-y, 50%);
}
.stack-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent var(--stack-bg-fade-start, 0%),
    var(--bg-alt) var(--stack-bg-fade, 60%)
  );
}

.stack-card-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  /* Nudges the whole inner block (media column + text column) 40px to the
     right of its centered position. `left` on a relatively-positioned
     element is a fixed px offset (not a %), so it stays exactly 40px at
     every viewport width instead of scaling with the card - the box is
     still centered/sized exactly as before, it's just shifted afterwards.
     Any bit that bleeds past the card's right padding as a result is
     clipped flush by .stack-card's overflow:hidden, the same bleed
     technique .pds-grid uses below. */
  left: 2.5rem;
  display: grid;
  /* When a background image is configured, --stack-media-col resolves to the
     right edge of its position/width box (clamped to a sane range) so the
     text column never starts underneath the image. Without an image it
     falls back to the icon-only 96px column. */
  grid-template-columns: clamp(96px, var(--stack-media-col, 0%), 70%) 1fr;
  gap: 2.5rem;
  align-items: start;
}

.stack-card-media { display: flex; justify-content: center; }
.stack-icon-image {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 0 34px rgba(69,103,119,0.35);
}

.stack-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.stack-title { margin-bottom: 0.75rem; }
.stack-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 2rem;
}

/* Shifts stack-card-body (and, compounding, the pds-grid nested inside it)
   left by the same amount so the whole text column - and the grid a little
   further still - sits closer to the card's media column. */
.stack-card-body {
  --stack-card-shift: 1.25rem;
  margin-left: calc(-1 * var(--stack-card-shift));
}

.pds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  /* Bleed past the stack-card-inner's right edge, extending an extra
     --pds-grid-bleed so the grid reads visually wider than the card's inner
     content column. The left edge shifts left by the same amount as
     stack-card-body (see --stack-card-shift above) instead of clearing back
     under the media column. */
  --pds-grid-bleed: 2rem;
  margin-right: calc(-1 * var(--pds-grid-bleed));
  margin-left: calc(-1 * var(--stack-card-shift));
}
.pds-block {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  max-height: 320px;
  overflow: hidden;
  transition: max-height var(--pds-expand-t, 0.4s ease);
}
.pds-block.is-expanded { max-height: none; }
/* Fades the bottom of an overflowing (collapsed) pds-block into its own
   background so clipped text doesn't end abruptly, and clears once expanded. */
.pds-block.is-overflowing {
  padding-bottom: 3rem;
}
.pds-block.is-overflowing::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3rem;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
  transition: opacity var(--pds-expand-t, 0.4s ease);
}
.pds-block.is-overflowing.is-expanded::after { opacity: 0; }
.pds-block.pds-video.is-overflowing { padding-bottom: 1.5rem; }
.pds-block.pds-video.is-overflowing::after { content: none; }
.pds-read-more {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  z-index: 1;
  margin: 0 auto;
  display: block;
  width: fit-content;
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  cursor: pointer;
}
.pds-read-more:hover,
.pds-read-more:focus-visible { text-decoration: underline; }
.pds-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.pds-problem { border-top: 3px solid var(--red); }
.pds-problem .pds-label { color: var(--red); }
.pds-data { border-top: 3px solid var(--yellow); }
.pds-data .pds-label { color: var(--yellow); }
.pds-solution { border-top: 3px solid var(--green); }
.pds-solution .pds-label { color: var(--green); }
.pds-video { border-top: 3px solid var(--accent); }
.pds-video .pds-label { color: var(--accent); }

.pds-video-thumb {
  position: relative;
  display: block;
  width: 120%;
  height: 100%;
  left: -24px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) / 2);
  overflow: hidden;
  padding: 0;
  background: var(--bg-alt);
  cursor: pointer;
}
.pds-video-thumb.is-image {
  aspect-ratio: 1 / 1;
  background: #000;
}
.pds-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pds-video-thumb.is-image img {
  object-fit: contain;
}
.pds-video-thumb .pds-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  background: rgba(16,26,46,0.35);
}
.pds-video-thumb.is-image .pds-watch-overlay {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(16,26,46,0.45);
  transition: background var(--t);
}
.pds-video-thumb.is-image:hover .pds-watch-overlay,
.pds-video-thumb.is-image:focus-visible .pds-watch-overlay {
  background: rgba(16,26,46,0.6);
}
.pds-video-thumb:hover,
.pds-video-thumb:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.pds-video-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* ── Fullscreen video modal ── */
.pds-video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
}
.pds-video-modal.is-open { display: flex; }
.pds-video-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
}
.pds-video-modal-content iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pds-video-modal-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pds-video-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}
.pds-video-modal-close:hover { background: rgba(255,255,255,0.22); }

.pds-block p { font-size: 0.92rem; line-height: 1.6; }
.pds-stat {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.pds-source {
  font-size: 0.74rem !important;
  color: var(--text-muted);
  opacity: 0.75;
  margin-top: 0.6rem;
  font-style: italic;
}
.pds-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pds-source a:hover,
.pds-source a:focus-visible {
  opacity: 1;
}

/* ── For Managers (two-col) ── */
.two-col-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
}
.two-col-text .eyebrow { display: block; margin-bottom: 0.5rem; }
.two-col-text h2 { margin-bottom: 0.85rem; }
.two-col-intro { font-size: 1rem; line-height: 1.7; margin-bottom: 2rem; }

.benefit-list { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; }
.benefit-list li { display: flex; gap: 1rem; align-items: flex-start; }
.benefit-icon {
  font-size: 1rem;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
}
.benefit-list strong { display: block; font-size: 0.97rem; color: var(--text); margin-bottom: 0.2rem; }
.benefit-list p { font-size: 0.9rem; line-height: 1.6; }

/* Dashboard card */
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: var(--shadow-lg);
}
.dash-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: -0.4rem;
}
.dash-card-header {
  font-size: calc(var(--dash-card-header-font-size, 0.75) * 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
}
.dash-card-header.is-live {
  color: var(--red);
  animation: dash-card-header-pulse 1.2s ease-in-out infinite;
}
@keyframes dash-card-header-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(237,17,101,0); }
  50% { opacity: 0.78; text-shadow: 0 0 12px rgba(237,17,101,0.35); }
}
.dash-card-desc {
  font-size: calc(var(--dash-card-desc-font-size, 0.82) * 1rem);
  color: var(--text-muted);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.2rem;
}
@media (prefers-reduced-motion: reduce) {
  .dash-card-header.is-live {
    animation: none;
  }
}
.dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.87rem;
}
.dash-label { color: var(--text-muted); }
.dash-value { font-weight: 700; color: var(--text); }
.dash-value.accent { color: var(--accent); }
.dash-value.green { color: var(--green); }
.dash-value.yellow { color: var(--yellow); }
.dash-bar-wrap {
  height: 7px;
  background: var(--surface-2);
  border-radius: 100px;
  overflow: hidden;
}
.dash-bar {
  height: 100%;
  background: var(--gradient);
  border-radius: 100px;
}
.dash-events {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  margin-top: 0.2rem;
}
.event-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}
.event-plate {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  background: var(--surface-2);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.78rem;
}
.event-action {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 100px;
}
.event-action.entry {
  background: rgba(69,103,119,0.12);
  color: var(--accent);
}
.event-action.exit {
  background: rgba(178,210,52,0.1);
  color: var(--green);
}
.event-time { color: var(--text-muted); margin-left: auto; }

/* ── Why Park-Kit ── */
.why-section { background: var(--bg); }

/* ── Contact ── */
.contact-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.contact-inner h2 { color: var(--text); margin-bottom: 0.75rem; }
.contact-inner > p { font-size: 1.03rem; margin-bottom: 2.5rem; }

.contact-form { text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group.full-width { margin-bottom: 1.5rem; }
.form-group label { font-size: 0.86rem; font-weight: 500; color: var(--text-muted); }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.72rem 1rem;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(69,103,119,0.14);
}
.form-group textarea { resize: vertical; }
select option { background: var(--surface); }
.btn-submit { width: 100%; justify-content: center; font-size: 1rem; padding: 0.95rem; margin-top: 0.5rem; }

/* ── Footer ── */
.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 3rem max(1.5rem, 5vw) 2rem;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
  flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-tagline { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }
.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.footer-links a { font-size: 0.88rem; color: var(--text-muted); transition: color var(--t); }
.footer-links a:hover { color: var(--text); }
.footer-copy {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ── Wizards Page ── */
.wizards-hero {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 5rem max(1.5rem, 5vw) 1rem;
}
.wizards-hero h1 { margin: 0.6rem 0 1rem; }
.wizards-hero-sub { font-size: 1.05rem; line-height: 1.7; }

.wizards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
}

.wizard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  display: flex;
  flex-direction: column;
}
.wizard-card:hover {
  border-color: rgba(69,103,119,0.4);
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(69,103,119,0.1);
}

.wizard-card-body {
  display: flex;
  flex-direction: column;
}

.wizard-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.4rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wizard-card-header:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

.wizard-card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  width: 100%;
}

.wizard-linkedin {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 0.6rem;
  border-radius: 50%;
  background: #0a66c2;
  color: #fff;
  transition: transform var(--t), box-shadow var(--t);
}
.wizard-linkedin:hover,
.wizard-linkedin:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10,102,194,0.35);
}
.wizard-linkedin svg { width: 16px; height: 16px; }

.wizard-card-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}
.wizard-card-chevron {
  width: 16px;
  height: 16px;
  color: var(--accent);
  transition: transform var(--t);
}
.wizard-card.is-open .wizard-card-chevron { transform: rotate(180deg); }

.wizard-photo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 0;
  padding: 0;
  background: var(--surface-2);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.wizard-photo-wrap.has-audio {
  cursor: pointer;
}
.wizard-photo-wrap.has-audio:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}
.wizard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: top;
  display: block;
  background: var(--surface-2);
}

.wizard-audio-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.wizard-audio-ring-track {
  fill: none;
  stroke: rgba(255,255,255,0.35);
  stroke-width: 4;
}
.wizard-audio-ring-progress {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 0.15s linear;
}
.wizard-audio-icon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  box-shadow: 0 4px 12px rgba(69,103,119,0.35);
  pointer-events: none;
}
.wizard-photo-wrap.is-playing .wizard-audio-icon::before { content: "⏸"; }
.wizard-photo-wrap.is-playing .wizard-audio-icon { background: var(--accent); }
.wizard-audio-icon::before { content: "▶"; }

.wizards-audio-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 620px;
  margin: 0 auto 2rem;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.9rem;
  text-align: center;
}
.wizards-audio-hint-icon { font-size: 1rem; }

.wizard-name { margin: 0 0 0.25rem; }
.wizard-role {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.wizard-card-desc {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.wizard-card-desc-inner {
  padding: 0 1.4rem 1.4rem;
  border-top: 1px solid var(--border);
  margin: 0;
  padding-top: 1rem;
}
.wizard-writeup { font-size: 0.8rem; line-height: 1.65; text-align: left; }


/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Responsive ── */
/* Between the desktop 4-column pds-grid and the fully-stacked mobile layout,
   drop to 2 columns so blocks don't get too narrow to read while there's
   still room beside the media column. */
@media (max-width: 1500px) and (min-width: 961px) {
  .pds-grid {
    grid-template-columns: repeat(2, 1fr);
    /* The desktop right bleed is wider than the card's own padding, so at
       this narrower 2-column breakpoint it pushes the grid past the card's
       edge and eats the intended right padding. Drop it here so pds-blocks
       stay clear of the edge like they do on mobile. */
    margin-right: 0;
  }
}

/* .stack-card-inner stops growing at its 1400px max-width once the viewport
   is wide enough to give it room, but below that the card (and its bleed
   room) shrinks along with the viewport. Above the 2-column breakpoint the
   grid still bleeds its full --pds-grid-bleed, so between roughly 1500px
   and 1630px (before .stack-card-inner reaches 1400px) the bleed once again
   overflows the card's own padding and gets clipped by its overflow:hidden,
   cutting off the last pds-block's right padding. Drop the bleed here too,
   the same way the 2-column breakpoint above does. */
@media (max-width: 1630px) and (min-width: 1501px) {
  .pds-grid {
    margin-right: 0;
  }
}

/* --stack-media-col is a % of .stack-card-bg's own positioned box (the
   card's full padding-box), while .stack-card-inner's grid column sizes
   itself off its own (narrower, inset by the card's left/right padding)
   width. As the card shrinks on smaller laptop screens that fixed padding
   becomes a bigger share of the total width, so the same percentage yields
   a narrower media column than the image box actually occupies and the
   text column creeps left underneath the image. Add a flat buffer here to
   push the text column back clear of the image; this only widens the
   media column's floor (clamp's max/right padding are untouched, so the
   existing right-edge spacing at this breakpoint is unaffected). */
@media (max-width: 1500px) and (min-width: 961px) {
  .stack-card-inner {
    grid-template-columns: clamp(96px, calc(var(--stack-media-col, 0%) + 2.5rem), 70%) 1fr;
  }
}

@media (max-height: 860px) and (min-width: 961px) {
  /* On shorter laptop viewports the hero still sits 66px under the sticky
     header, but the lot-card column doesn't have the text column's extra top
     padding. Give the card its own header clearance plus enough slack for the
     upward phase of its float animation so Chrome doesn't clip the top edge. */
  .hero-visual {
    align-self: start;
    padding-top: 80px;
  }
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    /* .hero has a global -66px margin-top that pulls it up to sit behind
       the sticky header (for the bg video to extend underneath it). That
       exactly cancels the header's own 66px height, so this padding is the
       minimum needed for content to clear the header with zero extra gap —
       any more would add visible space, any less would hide content under
       the header. */
    padding-top: 66px;
    gap: 2rem;
  }
  .hero-visual { order: -1; }
  .lot-card { width: 100%; max-width: 340px; margin: 0 auto; }

  /* The card's rows (header + description + 7-row lot-grid) stay exactly
     as-is on mobile — instead the whole card is scaled down visually with
     transform so nothing is removed or reflowed. transform-origin is
     pinned to the top so the card stays flush with the header above, and
     the negative margin-bottom collapses the layout space the (visually)
     shrunk bottom of the card would otherwise still reserve (616px
     unscaled height * (1 - 0.8) scale ≈ 123px). The mobile float
     animation bounces downward only (never upward) so the card never tucks
     under the header, since it already sits flush with zero gap at rest. */
  .lot-card {
    transform: scale(0.8);
    transform-origin: top center;
    margin-bottom: -123px;
    animation: float-mobile 5s ease-in-out infinite;
  }
  @keyframes float-mobile {
    0%, 100% { transform: scale(0.8) translateY(0px); }
    50% { transform: scale(0.8) translateY(3px); }
  }

  /* On mobile the hero collapses to a single column, so the desktop-only
     left-shift used to keep the video centered behind the text column would
     otherwise crop/offset the background to one side. Let it fill the full
     width and use a flat white 50% overlay (instead of the admin-configured
     color/opacity) so text stays readable over the full-bleed video. */
  .hero-bg-video-wrap { left: 0; }
  .hero-bg-overlay { background-color: rgba(255, 255, 255, 0.5) !important; }
  .hero-content {
    /* The visual card already sits above with its own gap, so the content
       block doesn't need the large desktop top padding before the badge. */
    padding: 0 max(1.5rem, 5vw) 3rem;
  }

  .two-col-inner { grid-template-columns: 1fr; gap: 3rem; }

  .steps { flex-direction: column; align-items: center; gap: 2rem; }
  .step-connector {
    width: 2px;
    height: 44px;
    margin-top: 0;
  }
  .step-connector::after {
    right: -4px;
    top: auto;
    bottom: -6px;
    border: 5px solid transparent;
    border-top-color: var(--border);
    border-left-color: transparent;
  }

  /* The scroll-scaled sticky stack effect assumes each card is roughly the
     height of the viewport. On mobile, stacked single-column card content
     (icon + copy + problem/data/solution grid) is routinely taller than the
     screen, so pinning the card at a fixed viewport-height would hide
     content below the fold before the next card is scrolled over it.
     Keep the sticky pin (so cards still stack on top of one another like
     desktop), but cap the card at the viewport height and let its own
     content scroll internally - the page scroll only advances to the next
     card once the current one's content has been scrolled to the bottom. */
  .stack-card {
    height: calc(100vh - 66px);
    min-height: 0;
    align-items: stretch;
    margin-bottom: 10px;
  }

  .stack-card-inner {
    grid-template-columns: 1fr;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-content: start;
    /* The desktop right-shift only makes sense next to the two-column
       media/text layout; once the card stacks to a single column, keep the
       block flush with the edges instead of bleeding content off-screen. */
    left: 0;
  }
  .stack-card-media { justify-content: flex-start; }

  /* The left-shift only makes sense next to the media column; once the card
     stacks to a single column, keep the body/grid flush with the edge. The
     desktop right bleed also has to go here, since it's wider than the
     card's own padding and would otherwise clip the right padding away. */
  .stack-card-body,
  .pds-grid {
    margin-left: 0;
  }
  .pds-grid {
    margin-right: 0;
  }

  /* On mobile the left-anchored/positioned background box no longer makes
     sense alongside the single-column layout, so let the image fill the
     whole card and lay an admin-configurable color/opacity overlay over it
     (via --stack-mobile-overlay-color/-opacity, set on <body>) so the text
     stays readable instead of relying on the desktop side-fade gradient. */
  .stack-card-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .stack-card-bg::after {
    background: rgba(var(--stack-mobile-overlay-color, 255, 255, 255), var(--stack-mobile-overlay-opacity, 0.5));
  }
  .pds-grid {
    grid-template-columns: 1fr;
  }
  .wizards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  #main-nav {
    display: none;
    position: absolute;
    top: 66px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
    padding: 1.5rem max(1.5rem, 5vw);
    gap: 1.2rem;
    border-bottom: 1px solid var(--border);
    z-index: 99;
  }
  #main-nav.open { display: flex; }
  .nav-toggle { display: flex; }

  .form-row { grid-template-columns: 1fr; }

  .hero-stats { gap: 1.5rem; }
  .stat-value { font-size: 1.5rem; }

  .feature-grid { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-links { gap: 1rem; }

  .wizards-grid { grid-template-columns: 1fr; }
  .wizard-card-header { padding: 1rem 1.2rem; gap: 0.6rem; }
  .wizard-card-desc-inner { margin: 0; padding: 1rem 0 1.2rem; }
}

/* ── Admin ── */
.admin-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.admin-main {
  flex: 1;
  padding: 3rem max(1.5rem, 5vw) 5rem;
  background: var(--bg-alt);
}
.admin-inner { max-width: 1000px; margin: 0 auto; }

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.admin-topbar h1 { font-size: 1.8rem; }

.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid var(--border, #e2e2e2);
}
.admin-tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted, #666);
  padding: 0.7rem 1rem;
  border-bottom: 2px solid transparent;
}
.admin-tab-btn.active {
  color: var(--text, #111);
  border-bottom-color: var(--accent, #b2d234);
}
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }
.admin-stack-card-grid { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.admin-stack-card-icon-col { flex: 0 0 120px; }
.admin-stack-card-icon-col img,
.admin-stack-card-icon-col .admin-stack-card-emoji {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  border-radius: var(--radius, 12px);
  object-fit: cover;
  background: var(--gradient, #333);
}
.admin-stack-card-fields { flex: 1 1 320px; display: flex; flex-direction: column; gap: 0.7rem; }
.admin-user { font-size: 0.9rem; color: var(--text-muted); }

.admin-flash {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  border: 1px solid transparent;
}
.admin-flash.success {
  background: rgba(178,210,52,0.1);
  border-color: rgba(178,210,52,0.3);
  color: var(--green);
}
.admin-flash.error {
  background: rgba(237,17,101,0.08);
  border-color: rgba(237,17,101,0.3);
  color: var(--red);
}

.admin-card-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.admin-wizard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative;
}
.admin-wizard-card[draggable="true"] { cursor: grab; }
.admin-wizard-card.dragging { opacity: 0.5; }
.admin-wizard-drag-handle {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
}
.admin-add-card h2 { font-size: 1.15rem; margin-bottom: 1.1rem; }
.admin-add-card form {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
}
.admin-delete-btn {
  margin-right: auto;
  color: var(--red);
  border-color: rgba(237,17,101,0.3);
}
.admin-wizard-card form {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.5rem;
}
.admin-wizard-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin-top: 0.4rem;
  cursor: pointer;
}
.admin-wizard-photo-col img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.admin-fields { display: flex; flex-direction: column; gap: 0.9rem; }
.admin-fields .form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-fields label { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.admin-gradient-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.admin-gradient-stop {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.admin-gradient-stop label { font-size: 0.78rem; color: var(--text-muted); }
.admin-gradient-preview {
  flex: 1 1 160px;
  min-width: 120px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.admin-fields input[type="text"],
.admin-fields input[type="file"],
.admin-fields textarea {
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  color: var(--text);
  font-size: 0.92rem;
}
.admin-fields textarea { resize: vertical; min-height: 90px; }
.admin-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

.admin-login-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--bg-alt);
}
.admin-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2.4rem 2rem;
}
.admin-login-card h1 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.admin-login-card p { font-size: 0.9rem; margin-bottom: 1.6rem; }
.admin-login-card form { display: flex; flex-direction: column; gap: 1.1rem; }
.admin-login-card .btn-submit { margin-top: 0.4rem; }

@media (max-width: 640px) {
  .admin-wizard-card form { grid-template-columns: 1fr; }
  .admin-add-card form { grid-template-columns: 1fr; }
  .admin-wizard-photo-col { flex-direction: row; }
}