/* PropertyMetrics NZ — homepage app frame (white + green).
   Built to the chosen mockup: light sidebar shell, serif statement,
   exploded data-layer stack, live cited figures, popular tools. */

:root {
  --afg: #1b4332;          /* brand green */
  --afg-mid: #2d6a4f;
  --afg-deep: #122f24;
  --afg-soft: #eaf2ed;     /* green-tinted wash */
  --af-ink: #17201b;
  --af-ink-soft: #5b665f;
  --af-line: #e6e9e6;
  --af-bg: #fbfcfb;        /* near-white */
  --af-card: #ffffff;
}

html, body { height: 100%; }
body.app-home {
  margin: 0;
  background: var(--af-bg);
  color: var(--af-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.app-home a { text-decoration: none; color: inherit; }

/* ── Frame ── */
.af { display: grid; grid-template-columns: 232px 1fr; min-height: 100dvh; }

/* Sidebar */
.af-side {
  border-right: 1px solid var(--af-line);
  background: var(--af-card);
  padding: 22px 14px;
  display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100dvh; box-sizing: border-box;
}
.af-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--af-ink); padding: 2px 10px;
}
.af-brand span { font-style: italic; font-weight: 500; color: var(--afg-mid); }
.af-nav { display: flex; flex-direction: column; gap: 2px; }
.af-nav a {
  font-size: 13.5px; font-weight: 600; color: var(--af-ink-soft);
  padding: 9px 10px; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.af-nav a:hover { background: var(--afg-soft); color: var(--afg); }
.af-nav a.on { background: var(--afg-soft); color: var(--afg); }
.af-nav a sup { font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--afg-mid); margin-left: 4px; }
.af-nav-foot { margin-top: auto; border-top: 1px solid var(--af-line); padding-top: 14px; }
.af-nav-foot a { font-size: 12.5px; font-weight: 500; }

/* Main column */
.af-main { min-width: 0; display: flex; flex-direction: column; }
.af-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(20px, 3.4vw, 44px);
  border-bottom: 1px solid var(--af-line);
  background: var(--af-card);
  position: sticky; top: 0; z-index: 40;
}
.af-search {
  display: flex; align-items: center; gap: 9px;
  width: min(420px, 46vw);
  font-family: inherit; font-size: 13px; color: var(--af-ink-soft);
  background: var(--af-bg); border: 1px solid var(--af-line); border-radius: 999px;
  padding: 9px 16px; cursor: text; text-align: left;
  transition: border-color 0.15s;
}
.af-search:hover { border-color: var(--afg-mid); }
.af-auth-mount { display: flex; align-items: center; }

/* Mobile masthead: brand + hamburger (hidden on desktop, sidebar shows there) */
.af-top-brand {
  display: none; align-items: center; margin-right: auto; text-decoration: none;
  font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--af-ink);
}
.af-top-brand span { font-style: italic; font-weight: 500; color: var(--afg-mid); }
.af-burger {
  display: none; width: 42px; height: 42px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
  border: 1px solid var(--af-line); border-radius: 10px; background: var(--af-bg); cursor: pointer;
}
.af-burger span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: var(--af-ink); }

/* Full-screen mobile menu (opened by the burger; inert until .open) */
.af-menu {
  position: fixed; inset: 0; z-index: 5000; background: #0c1f18;
  display: flex; flex-direction: column; justify-content: center;
  padding: 48px clamp(24px, 8vw, 72px);
  opacity: 0; pointer-events: none; transition: opacity 0.28s ease;
}
.af-menu.open { opacity: 1; pointer-events: auto; }
.af-menu-x {
  position: absolute; top: 20px; right: 22px; font-size: 34px; line-height: 1;
  color: rgba(255,255,255,0.7); background: none; border: none; cursor: pointer;
}
.af-menu-x:hover { color: #fff; }
.af-menu-links { display: flex; flex-direction: column; gap: 2px; }
.af-menu-links a {
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(30px, 7vw, 46px);
  font-weight: 600; letter-spacing: -0.015em; color: #f4f1ea; text-decoration: none;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.af-menu-links a.on { color: #74c69d; }
.af-menu-links a sup { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #74c69d; margin-left: 6px; }
.af-menu-foot { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 34px; }
.af-menu-foot a { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); text-decoration: none; }
.af-menu-foot a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .af-menu { transition: none; } }

/* ── Hero ── */
.af-hero {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(40px, 7vh, 84px) clamp(20px, 3.4vw, 44px) clamp(28px, 4vh, 48px);
}
.af-hero-copy .pm-eyebrow { margin-bottom: 20px; color: var(--afg-mid); }
.af-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(36px, 3.9vw, 58px);
  line-height: 1.06; letter-spacing: -0.02em;
  color: var(--af-ink); margin: 0 0 18px;
}
.af-h1 em { font-style: italic; font-weight: 500; color: var(--afg-mid); }
.af-sub { font-size: 15.5px; line-height: 1.65; color: var(--af-ink-soft); max-width: 52ch; margin: 0 0 26px; }

.af-searchwrap { position: relative; max-width: 520px; }
.af-searchbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--af-card);
  border: 1px solid var(--af-line);
  border-radius: 12px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 10px 30px -14px rgba(18, 47, 36, 0.25);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.af-searchbar:focus-within { border-color: var(--afg-mid); box-shadow: 0 0 0 4px var(--afg-soft), 0 10px 30px -14px rgba(18,47,36,0.25); }
.af-searchbar > svg { color: var(--af-ink-soft); flex-shrink: 0; }
.af-searchbar input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font-family: inherit; font-size: 15px; color: var(--af-ink); padding: 10px 0;
}
.af-go {
  border: none; cursor: pointer; font-family: inherit;
  background: var(--afg); color: #fff;
  font-size: 13.5px; font-weight: 700;
  padding: 12px 24px; border-radius: 9px;
  transition: background 0.15s;
}
.af-go:hover { background: var(--afg-mid); }
.af-sugs {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  background: var(--af-card); border: 1px solid var(--af-line); border-radius: 12px;
  box-shadow: 0 18px 44px -12px rgba(18,47,36,0.28);
  overflow: hidden; display: none;
}
.af-sugs.open { display: block; }
.af-sug { padding: 11px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; border-bottom: 1px solid var(--af-bg); }
.af-sug:last-child { border-bottom: none; }
.af-sug:hover, .af-sug.on { background: var(--afg-soft); color: var(--afg); }
.af-sug-none { padding: 12px 16px; font-size: 13px; color: var(--af-ink-soft); }
.af-browse { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--afg-mid); }
.af-browse:hover { color: var(--afg); }

/* ── Exploded layer stack ── */
.af-layers { margin: 0; min-width: 0; position: relative; }
.af-stack {
  position: relative;
  width: min(340px, 80%);
  aspect-ratio: 1;
  margin: 0 auto;
  transform-style: preserve-3d;
}
.af-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(18, 47, 36, 0.18);
  transform: rotateX(55deg) rotateZ(-42deg);
  box-shadow: 0 24px 44px -18px rgba(18, 47, 36, 0.35);
  object-fit: cover;
}
.af-l1 { z-index: 3; }
.af-l2 {
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, rgba(45,106,79,0.16) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(45,106,79,0.16) 0 1px, transparent 1px 34px),
    var(--afg-soft);
  translate: 34px 34px;
  opacity: 0.95;
}
.af-l3 {
  z-index: 1;
  background: linear-gradient(135deg, #dfe9e2, #f2f6f3);
  translate: 68px 68px;
  opacity: 0.9;
}
.af-chips { position: absolute; inset: 0; pointer-events: none; }
.af-chip {
  position: absolute;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--af-card);
  border: 1px solid var(--af-line);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 11.5px; font-weight: 600; color: var(--af-ink-soft);
  box-shadow: 0 8px 22px -10px rgba(18,47,36,0.25);
  white-space: nowrap;
}
.af-chip b { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--afg-mid); }
.af-chip:nth-child(1) { top: 4%;  right: 0; }
.af-chip:nth-child(2) { top: 30%; right: -2%; }
.af-chip:nth-child(3) { top: 56%; right: 2%; }
.af-chip:nth-child(4) { top: 82%; right: 8%; }
.af-layers .pm-specimen-caption { margin-top: 26px; }

/* ── Stat cards ── */
.af-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 0 clamp(20px, 3.4vw, 44px) clamp(28px, 4vh, 44px);
}
.af-stat {
  background: var(--af-card);
  border: 1px solid var(--af-line);
  border-radius: 14px;
  padding: 18px 20px 14px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.af-stat-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--af-ink-soft); }
.af-stat-val { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; color: var(--af-ink); }
.af-stat-sub { font-size: 12px; color: var(--af-ink-soft); }
.af-spark { width: 100%; height: 32px; margin-top: 2px; }
.af-stat-src { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--afg-mid); margin-top: auto; padding-top: 8px; }
.af-stat-src a { color: inherit; }

/* ── Popular tools ── */
.af-tools { padding: 0 clamp(20px, 3.4vw, 44px) clamp(44px, 6vh, 72px); }
.af-tools .pm-eyebrow { margin-bottom: 14px; color: var(--afg-mid); }
.af-tool-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.af-tool-row a {
  background: var(--af-card);
  border: 1px solid var(--af-line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}
.af-tool-row a:hover { border-color: var(--afg-mid); background: var(--afg-soft); }
.af-tool-row b { font-size: 13px; font-weight: 700; color: var(--af-ink); }
.af-tool-row span { font-size: 11.5px; color: var(--af-ink-soft); }

/* Adopted auth chip (auth.js appends into .af-auth-mount via .nav-inner) */
.af-auth-mount .pm-auth-nav-btn, .af-auth-mount #pm-auth-btn {
  background: var(--af-card) !important;
  border: 1px solid var(--af-line) !important;
  border-radius: 999px !important;
  color: var(--af-ink) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Footer sits flush in the main column */
.af-main footer.footer { margin-top: auto; }

/* ── Responsive ── */
@media (max-width: 1120px) {
  .af-stats { grid-template-columns: repeat(2, 1fr); }
  .af-tool-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .af { grid-template-columns: 1fr; }
  /* sidebar is replaced by the top-bar burger + full-screen menu on mobile */
  .af-side { display: none; }
  .af-top { gap: 12px; }
  .af-top-brand { display: flex; }
  .af-burger { display: flex; }
  .af-top .af-search { display: none; }   /* the hero carries the primary search */
  .af-hero { grid-template-columns: 1fr; }
  .af-layers { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .af-stats, .af-tool-row { grid-template-columns: 1fr 1fr; }
  .af-chip:nth-child(4) { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .af-stack:hover .af-l1 { transform: rotateX(55deg) rotateZ(-42deg) translateZ(18px); }
  .af-layer { transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1); }
}

/* ── Immersive six-layer stack (replaces the 3-layer draft) ── */
.af-stack { width: min(380px, 84%); aspect-ratio: 1; }
.afl {
  position: absolute; inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(18, 47, 36, 0.16);
  transform: rotateX(55deg) rotateZ(-42deg) translateZ(var(--lift, 0px));
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.4s, box-shadow 0.55s;
  overflow: hidden;
  background: var(--af-card);
}
.afl svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.afl[data-layer="aerial"]   { --lift: 150px; z-index: 6; box-shadow: 0 30px 54px -20px rgba(18,47,36,0.45); background: #143024; }
.afl[data-layer="parcels"]  { --lift: 120px; z-index: 5; background: rgba(255,255,255,0.88); }
.afl[data-layer="zoning"]   { --lift: 90px;  z-index: 4;
  background:
    linear-gradient(115deg, rgba(45,106,79,0.20) 0 38%, rgba(45,106,79,0.10) 38% 63%, rgba(82,183,136,0.16) 63% 100%);
}
.afl[data-layer="flood"]    { --lift: 60px;  z-index: 3;
  background:
    radial-gradient(90px 50px at 12% 88%, rgba(96,148,180,0.25), transparent 70%),
    rgba(240,246,243,0.92);
}
.afl[data-layer="schools"]  { --lift: 30px;  z-index: 2; background: rgba(250,252,251,0.94); }
.afl[data-layer="terrain"]  { --lift: 0px;   z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(45,106,79,0.10) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(45,106,79,0.10) 0 1px, transparent 1px 36px),
    linear-gradient(135deg, #eef4f0, #f8faf9);
}
.afl-tiles { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.afl-tiles img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stack breathes apart on hover; chips focus a single layer */
@media (prefers-reduced-motion: no-preference) {
  .af-layers:hover .afl { transform: rotateX(55deg) rotateZ(-42deg) translateZ(calc(var(--lift) * 1.35)); }
}
.af-layers[data-focus] .afl { opacity: 0.22; }
.af-layers[data-focus="aerial"]  .afl[data-layer="aerial"],
.af-layers[data-focus="parcels"] .afl[data-layer="parcels"],
.af-layers[data-focus="zoning"]  .afl[data-layer="zoning"],
.af-layers[data-focus="flood"]   .afl[data-layer="flood"],
.af-layers[data-focus="schools"] .afl[data-layer="schools"],
.af-layers[data-focus="terrain"] .afl[data-layer="terrain"] {
  opacity: 1;
  transform: rotateX(55deg) rotateZ(-42deg) translateZ(calc(var(--lift) * 1.35 + 26px));
  box-shadow: 0 34px 58px -18px rgba(18,47,36,0.5);
}

/* Chips are buttons now */
.af-chip { pointer-events: auto; cursor: pointer; font-family: inherit; text-align: left; transition: border-color 0.15s, transform 0.25s cubic-bezier(0.22,0.8,0.3,1); }
.af-chip:hover, .af-chip.on { border-color: var(--afg-mid); transform: translateX(-4px); }
.af-chip:nth-child(5) { top: 82%; right: 8%; display: flex; }
.af-chip:nth-child(6) { top: 96%; right: 16%; }
.af-chip:nth-child(1) { top: -6%; right: 4%; }
.af-chip:nth-child(2) { top: 17%; right: -3%; }
.af-chip:nth-child(3) { top: 40%; right: -5%; }
.af-chip:nth-child(4) { top: 62%; right: 0%; }

/* Entrance: layers assemble upward with a stagger */
.af-layers:not(.af-in) .afl { opacity: 0; transform: rotateX(55deg) rotateZ(-42deg) translateZ(-40px); }
.af-in .afl { transition-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  .af-layers:not(.af-in) .afl { opacity: 1; transform: rotateX(55deg) rotateZ(-42deg) translateZ(var(--lift)); }
  .af-layers:hover .afl { transform: rotateX(55deg) rotateZ(-42deg) translateZ(var(--lift)); }
}
@media (max-width: 880px) {
  .af-stack { width: min(320px, 74%); }
  .af-chip:nth-child(6) { display: none; }
}

/* ── Stack containment + direct layer interactivity ── */
.af-hero { align-items: center; }
.af-layers {
  height: min(680px, 84vh);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 8px;
}
.af-stack { width: min(280px, 58%); margin: auto auto 0; }
/* tighter lifts so the exploded run fits the figure top-to-bottom */
.afl[data-layer="aerial"]   { --lift: 128px; }
.afl[data-layer="parcels"]  { --lift: 102px; }
.afl[data-layer="zoning"]   { --lift: 76px; }
.afl[data-layer="flood"]    { --lift: 50px; }
.afl[data-layer="schools"]  { --lift: 24px; }
.afl { cursor: pointer; }
.afl:focus-visible { outline: 2px solid var(--afg-mid); outline-offset: 4px; }

/* chips: inside the frame, ladder down the right, clear of the caption */
.af-chips { inset: 0 0 56px 0; }
.af-chip:nth-child(1) { top: 2%;  right: 0; }
.af-chip:nth-child(2) { top: 18%; right: 2%; }
.af-chip:nth-child(3) { top: 34%; right: 0; }
.af-chip:nth-child(4) { top: 50%; right: 3%; }
.af-chip:nth-child(5) { top: 66%; right: 0; display: flex; }
.af-chip:nth-child(6) { top: 82%; right: 2%; display: flex; }
.af-layers .pm-specimen-caption { margin-top: 18px; }
@media (max-width: 880px) {
  .af-layers { height: auto; padding-top: 24px; }
  .af-stack { width: min(300px, 66%); }
  .af-chips { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .af-chip { position: static; }
}

/* ── Larger stack, honest layer visuals, quiet text labels ── */
/* two even columns only from tablet up; below 880px the hero stacks
   (this used to override the mobile single-column rule and squeeze the graphic) */
@media (min-width: 881px) { .af-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.af-layers { height: min(800px, 92vh); }
.af-stack { width: min(400px, 76%); }
.afl[data-layer="flood"] { background: rgba(244,249,247,0.95); }
.afl[data-layer="schools"] { background: rgba(252,253,252,0.95); }
.afl[data-layer="parcels"] { background: rgba(255,255,255,0.95); }
.afl[data-layer="terrain"] {
  background:
    repeating-linear-gradient(0deg, rgba(45,106,79,0.06) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(45,106,79,0.06) 0 1px, transparent 1px 36px),
    linear-gradient(135deg, #f0f5f1, #fafcfa);
}

/* labels: small grey text, no pill */
.af-chip, .af-chip:hover, .af-chip.on {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 2px 0;
  transform: none;
}
.af-chip { color: #8a938c; font-size: 11px; font-weight: 500; gap: 1px; }
.af-chip b { color: #6d7770; font-size: 10px; letter-spacing: 0.16em; }
.af-chip:hover, .af-chip.on { color: var(--afg); }
.af-chip:hover b, .af-chip.on b { color: var(--afg-mid); }
.af-chip::before {
  content: '';
  display: block; position: absolute; left: -34px; top: 50%;
  width: 26px; border-top: 1px solid #c3cbc5;
}
.af-chip:hover::before, .af-chip.on::before { border-color: var(--afg-mid); }
.af-chip:nth-child(1) { top: 4%;  right: 1%; }
.af-chip:nth-child(2) { top: 20%; right: 0; }
.af-chip:nth-child(3) { top: 36%; right: 1%; }
.af-chip:nth-child(4) { top: 52%; right: 0; }
.af-chip:nth-child(5) { top: 68%; right: 1%; }
.af-chip:nth-child(6) { top: 84%; right: 0; }
@media (max-width: 880px) {
  .af-layers { height: auto; }
  .af-stack { width: min(340px, 72%); }
  .af-chip::before { display: none; }
}

/* ═══ Layer materials v2: confident sheets, real isolation, lock-to-top ═══ */

/* crisper sheet edges, per-dataset accents, depth-scaled shadows */
.afl { border-radius: 10px; border-width: 1.5px; background: rgba(255,255,255,0.97); }
.afl[data-layer="aerial"]  { border-color: rgba(18,47,36,0.55);  box-shadow: 0 34px 56px -20px rgba(18,47,36,0.5); }
.afl[data-layer="parcels"] { border-color: rgba(45,106,79,0.55); box-shadow: 0 28px 48px -20px rgba(18,47,36,0.4); }
.afl[data-layer="zoning"]  { border-color: rgba(45,106,79,0.5);  box-shadow: 0 24px 42px -20px rgba(18,47,36,0.34);
  background: rgba(255,255,255,0.97); }
.afl[data-layer="flood"]   { border-color: rgba(66,116,152,0.55); box-shadow: 0 20px 36px -18px rgba(18,47,36,0.3); }
.afl[data-layer="schools"] { border-color: rgba(45,106,79,0.45); box-shadow: 0 16px 30px -16px rgba(18,47,36,0.26); }
.afl[data-layer="terrain"] { border-color: rgba(90,110,100,0.4); box-shadow: 0 12px 24px -14px rgba(18,47,36,0.22); }

/* taller resting explode so every sheet's band is visible */
.afl[data-layer="aerial"]   { --lift: 150px; }
.afl[data-layer="parcels"]  { --lift: 118px; }
.afl[data-layer="zoning"]   { --lift: 88px; }
.afl[data-layer="flood"]    { --lift: 58px; }
.afl[data-layer="schools"]  { --lift: 28px; }
.afl[data-layer="terrain"]  { --lift: 0px; }

/* FOCUS: chosen sheet rises above everything (real 3D occlusion in the
   preserve-3d stack); the rest compress into a quiet deck beneath */
.af-layers[data-focus] .afl {
  opacity: 0.45;
  transform: rotateX(55deg) rotateZ(-42deg) translateZ(calc(var(--lift) * 0.35));
}
.af-layers[data-focus="aerial"]  .afl[data-layer="aerial"],
.af-layers[data-focus="parcels"] .afl[data-layer="parcels"],
.af-layers[data-focus="zoning"]  .afl[data-layer="zoning"],
.af-layers[data-focus="flood"]   .afl[data-layer="flood"],
.af-layers[data-focus="schools"] .afl[data-layer="schools"],
.af-layers[data-focus="terrain"] .afl[data-layer="terrain"] {
  opacity: 1;
  transform: rotateX(55deg) rotateZ(-42deg) translateZ(200px);
  box-shadow: 0 44px 70px -22px rgba(18,47,36,0.55);
}
/* locked state: hold it there and mark the chip */
.af-locked .af-chip.on { color: var(--afg); }
.af-locked .af-chip.on b { color: var(--afg); }
.af-chip.on::after { content: '  \2715'; font-size: 9px; color: var(--afg-mid); visibility: hidden; }
.af-locked .af-chip.on::after { visibility: visible; }

/* Topo50 tiles carry orange road fills — pull them into the palette */
.afl[data-layer="terrain"] .afl-tiles img {
  filter: grayscale(0.45) sepia(0.3) hue-rotate(65deg) saturate(0.75) brightness(1.04);
}

/* 3x3 tile mosaics (fractional origin keeps the parcel dead centre) */
.afl-mosaic { position: absolute; inset: 0; overflow: hidden; }
.afl-mosaic img { display: block; }
.afl[data-layer="terrain"] .afl-mosaic img {
  filter: grayscale(0.45) sepia(0.3) hue-rotate(65deg) saturate(0.75) brightness(1.04);
}
.afd-plate .afl-mosaic { position: absolute; inset: 0; }

/* ═══ Layer-stack polish: legible parcels, flagship labels, snappier focus ═══ */

/* Kill the entrance stagger delay once the user interacts, so focus changes
   respond immediately instead of arriving up to ~450ms late (the delay from
   `.af-in .afl { transition-delay: calc(var(--i) * 90ms) }` was leaking into
   every hover/focus transition, which is what felt laggy). */
.af-layers:hover .afl,
.af-layers[data-focus] .afl { transition-delay: 0s; }

/* Parcel & envelope now reads as real cadastral linework rather than a ghost
   (inline strokes were #7d9186 at 0.9px — CSS overrides the presentation attr). */
.afl[data-layer="parcels"] svg path { stroke: #4a7c63; stroke-width: 1.15; }
.af-layers[data-focus="parcels"] .afl[data-layer="parcels"] svg path { stroke: #2d6a4f; stroke-width: 1.5; }

/* Aerial as the hero sheet: a crisp inner edge lifts the photo off the deck. */
.afl[data-layer="aerial"] {
  box-shadow: 0 34px 56px -20px rgba(18,47,36,0.55), inset 0 0 0 1px rgba(255,255,255,0.22);
}

/* Labels: readable by default, with the two flagship datasets carried in green
   so they clearly lead the schematic layers below them. Extra vertical padding
   enlarges each hit target so the pointer stops falling into dead gaps. */
.af-chip { color: #6b746d; padding: 6px 0; }
.af-chip b { color: #59635c; }
.af-chip[data-for="aerial"], .af-chip[data-for="parcels"] { color: #3c453e; }
.af-chip[data-for="aerial"] b, .af-chip[data-for="parcels"] b { color: var(--afg-mid); }
.af-chip:hover, .af-chip.on { color: var(--afg); }
.af-chip:hover b, .af-chip.on b { color: var(--afg); }

/* ═══ Feasibility build-potential hero (replaces the exploded layer stack) ═══ */
.af-feas{margin:0;align-self:center;justify-self:center;width:100%;max-width:560px;}
.feas-stage{position:relative;border-radius:16px;padding:6px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 10%,#f1f6f2,#e7efe8);
  border:1px solid #e6e9e6;box-shadow:0 24px 60px -30px rgba(18,47,36,0.4);}
.feas-svg{display:block;width:100%;height:auto;}
/* Three.js upgrade of the worked example: the canvas paints over the SVG,
   which keeps its place in the layout as the size-giver and instant fallback.
   visibility (not display) so the stage never collapses if the canvas dies. */
.feas-stage canvas.feas-3d{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:12px;}
.feas-stage.three .feas-svg{visibility:hidden;}

/* ═══ Develop ⇄ Invest flip: the same site, other side of the coin ═══ */
.af-feas{perspective:1400px;}
.feas-stage.flipping{transition:transform .38s ease-in-out;will-change:transform;}
/* the invest face: the analysis page's dark-instrument language, in the card */
.feas-invest{position:absolute;inset:6px;border-radius:12px;z-index:2;display:none;
  flex-direction:column;justify-content:center;padding:26px 30px;
  background:radial-gradient(130% 110% at 22% 0%,#16382c,#0c211a 68%);color:#fff;}
.feas-stage.invest .feas-invest{display:flex;}
.feas-stage.invest .feas-svg{visibility:hidden;}
.feas-stage.invest canvas.feas-3d,
.feas-stage.invest .feas-verdict,
.feas-stage.invest .feas-replay{display:none;}
/* When the 3D scene hosts the invest view (.three-invest), the canvas stays
   live — the flip is a camera swing into the dark-dressed suburb — and the
   full-bleed dark panel condenses into a compact numbers card over the scene.
   Without WebGL the rules above still give the full-bleed card: same content,
   graceful tiers. */
.feas-stage.invest.three-invest canvas.feas-3d{display:block;}
.feas-stage.invest.three-invest .feas-invest{
  top:auto;left:16px;right:auto;bottom:16px;width:auto;max-width:305px;
  padding:14px 17px;border-radius:12px;justify-content:flex-start;
  background:rgba(9,26,20,0.92);box-shadow:0 14px 34px -12px rgba(0,0,0,0.55);
}
.feas-stage.invest.three-invest .fi-spark{display:none;}   /* the 3D ribbon IS the chart */
.feas-stage.invest.three-invest .fi-big{font-size:26px;}
.feas-stage.invest.three-invest .fi-eyebrow{margin-bottom:6px;}
.feas-stage.invest.three-invest .fi-grid{gap:16px;margin:10px 0 0;padding-top:8px;}
.feas-stage.invest.three-invest .fi-note{margin-top:9px;}
/* hover tooltip for the touchable dwellings */
.feas-tip{position:absolute;z-index:4;pointer-events:none;background:rgba(18,47,36,0.94);color:#fff;
  font-size:11px;font-weight:600;padding:5px 10px;border-radius:8px;white-space:nowrap;
  transform:translate(-50%,-135%);opacity:0;transition:opacity .15s ease;}
.feas-tip.on{opacity:1;}
.fi-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#74c69d;margin-bottom:10px;}
.fi-big{font-family:"Fraunces",Georgia,serif;font-size:38px;font-weight:600;letter-spacing:-.01em;line-height:1;}
.fi-big span{font-size:15px;color:rgba(255,255,255,.55);margin-left:5px;font-family:'Inter',-apple-system,sans-serif;}
.fi-sub{font-size:12px;color:rgba(255,255,255,.6);margin-top:6px;}
.fi-grid{display:flex;gap:24px;margin:16px 0 4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);}
.fi-grid div{display:flex;flex-direction:column;gap:2px;font-size:13px;}
.fi-grid b{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.42);}
.fi-spark{width:min(250px,62%);height:46px;margin-top:12px;}
.fi-spark polyline{fill:none;stroke:#52b788;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.fi-note{font-size:10.5px;color:rgba(255,255,255,.4);margin-top:12px;}
/* the card's own flip chip (top-left; Replay owns top-right) */
.feas-flip{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;
  background:rgba(18,47,36,.92);color:#fff;border:0;border-radius:999px;padding:6px 13px;
  font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s;}
.feas-flip:hover{background:#122f24;}
.feas-stage.invest .feas-flip{background:rgba(255,255,255,.94);color:#122f24;}
/* header mode pill */
.af-modeflip{display:inline-flex;align-items:center;gap:2px;margin-right:6px;padding:3px;
  border:1px solid var(--af-line);border-radius:999px;background:var(--af-bg);cursor:pointer;flex-shrink:0;}
.af-modeflip .mf-opt{padding:4px 11px;border-radius:999px;font-size:11px;font-weight:600;color:#6b746d;transition:background .2s,color .2s;}
html:not([data-home-mode="invest"]) .af-modeflip .mf-dev{background:#1b4332;color:#fff;}
html[data-home-mode="invest"] .af-modeflip .mf-inv{background:#122f24;color:#fff;}
/* the copy cascade that makes the whole page read as flipped */
.af-hero-copy .pm-eyebrow,.af-hero-copy .af-h1,.af-hero-copy .af-sub,.af-hero-copy .af-go{transition:opacity .2s ease;}
.af-hero-copy.mode-fading .pm-eyebrow{opacity:0;}
.af-hero-copy.mode-fading .af-h1{opacity:0;transition-delay:.05s;}
.af-hero-copy.mode-fading .af-sub{opacity:0;transition-delay:.1s;}
.af-hero-copy.mode-fading .af-go{opacity:0;transition-delay:.14s;}
/* section emphasis follows the mode: develop leads with the feasibility tool,
   invest leads with rent + yield (the natural order of the stats grid) */
html:not([data-home-mode="invest"]) .af-tool-row a[href="/feasibility"]{order:-1;}
html[data-home-mode="invest"] .af-tool-row a[href="/yield-calculator"]{order:-1;}
html[data-home-mode="invest"] .af-nav a[href="/analysis"]{color:var(--afg);font-weight:700;}
@media (prefers-reduced-motion: reduce){.feas-stage.flipping{transition:none;}}
.feas-dw{transform-box:fill-box;transform-origin:50% 100%;}
/* Default state is the FINISHED graphic (safe if the reveal JS never fires).
   When .play is added, each part animates in; 'both' fill uses the from-state
   (hidden) during its delay, so the stagger still reads. */
.feas-stage.play .feas-parcel{animation:feasFadeIn .6s ease .1s both;}
.feas-stage.play .feas-setback{animation:feasFadeIn .6s ease .5s both;}
.feas-stage.play .feas-env{animation:feasFadeIn .6s ease 1.0s both;}
.feas-stage.play .feas-dw-a{animation:feasRiseIn .55s cubic-bezier(.22,.8,.3,1) 1.45s both;}
.feas-stage.play .feas-dw-b{animation:feasRiseIn .55s cubic-bezier(.22,.8,.3,1) 1.8s both;}
.feas-stage.play .feas-verdict{animation:feasRiseIn .5s ease 3.4s both;}
@keyframes feasFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes feasRiseIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){.feas-stage.play *{animation:none!important;}}
/* verdict readout */
.feas-verdict{position:absolute;left:16px;bottom:16px;background:rgba(18,47,36,0.94);color:#fff;
  border-radius:12px;padding:12px 15px;box-shadow:0 14px 34px -12px rgba(0,0,0,0.5);min-width:196px;}
.feas-v-top{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:#74c69d;margin-bottom:5px;}
.feas-dot{width:6px;height:6px;border-radius:50%;background:#52b788;animation:feasPulse 2s infinite;}
@keyframes feasPulse{0%,100%{box-shadow:0 0 0 0 rgba(82,183,136,.5);}70%{box-shadow:0 0 0 6px rgba(82,183,136,0);}}
.feas-v-big{font-family:"Fraunces",Georgia,serif;font-size:20px;font-weight:600;letter-spacing:-0.01em;line-height:1.1;color:#fff;}
.feas-v-sub{font-size:11px;color:rgba(255,255,255,0.62);margin-top:2px;}
.feas-v-grid{display:flex;gap:16px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,0.14);}
.feas-v-grid div{font-size:11px;color:rgba(255,255,255,0.82);display:flex;flex-direction:column;gap:1px;}
.feas-v-grid b{font-size:8.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.42);}
.feas-replay{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,0.92);border:1px solid #e6e9e6;border-radius:999px;padding:6px 12px;
  font-family:inherit;font-size:11px;font-weight:600;color:#1b4332;cursor:pointer;transition:background .15s;}
.feas-replay:hover{background:#fff;}
.feas-note{font-size:11px;color:#9aa39d;margin:10px 2px 0;}
.af-feas .pm-specimen-caption{margin-top:12px;}
@media (max-width:900px){.af-feas{max-width:520px;margin:8px auto 0;}}
/* On mobile the verdict overlay covered the whole card; drop it out of the
   overlay and stack it beneath the fully-shown SVG instead */
@media (max-width:880px){
  .feas-stage{overflow:visible;}
  .feas-verdict{position:static;left:auto;bottom:auto;min-width:0;margin:12px 4px 2px;
    box-shadow:0 12px 30px -16px rgba(0,0,0,0.45);}
}