/* The Palms Pet Resort & Spa proposal. Palette drawn from the client's logo and building:
   palm green, black and cream enamel, terracotta stucco. Chrome is one cream surface on every
   slide, so the logo always sits on a compatible uniform background. */

@font-face { font-family: 'Geist'; src: url('assets/fonts/geist-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('assets/fonts/instrument-serif-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('assets/fonts/jetbrains-mono-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #14130F;
  --ink-2: #1D1B16;
  --paper: #F5EFE3;
  --paper-2: #EDE4D2;
  --cream: #F5EFE3;
  --palm: #2A7358;
  --palm-ink: #1F5C46;
  --palm-glow: #7FD8AE;
  --sand: #E9CFA2;
  --terra: #9A4F28;
  --red: #9E1B1F;
  --txt-paper: #17160F;
  --txt-dark: #F5EFE3;
  --mut-paper: #4F4A3B;
  --mut-dark: #CFC7B6;

  /* Fluid type. 1600 wide: body about 18.6px, labels 14.2px, headings 25px.
     2096 wide: body about 21.6px. 1366 wide: body about 17.2px, labels 13.7px. */
  --fs-body: clamp(16px, calc(0.6vw + 9px), 24px);
  --fs-small: clamp(13px, calc(0.2vw + 11px), 16px);
  --fs-h3: clamp(22px, calc(1.1vw + 8px), 34px);
  --fs-h2: clamp(38px, 3.85vw, 62px);
  --fs-h1: clamp(56px, min(9.2vw, 15vh), 152px);

  --chrome-top: clamp(56px, 7.4vh, 74px);
  --chrome-bot: clamp(48px, 6.2vh, 56px);
  --gutter: clamp(18px, 3.6vw, 58px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ink);
  color: var(--txt-paper);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ul, ol, dl { margin: 0; }
a { color: inherit; }
em { font-family: 'Instrument Serif', 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

:focus-visible { outline: 3px solid var(--palm-ink); outline-offset: 2px; }
.slide.dark :focus-visible, .cover :focus-visible, .index-overlay :focus-visible { outline-color: var(--palm-glow); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cream); color: var(--ink); padding: 10px 14px; border-radius: 6px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: -0.125em; }
.ico-lg { font-size: 34px; color: var(--palm-ink); }

/* Deck frame */
.deck { position: fixed; inset: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ink); }
.stage-area { position: absolute; top: var(--chrome-top); bottom: var(--chrome-bot); left: 0; right: 0; }

/* Chrome: opaque cream on every slide */
.chrome { position: absolute; left: 0; right: 0; z-index: 10; background: var(--cream); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); }
.chrome-top { top: 0; height: var(--chrome-top); padding-top: env(safe-area-inset-top); border-bottom: 1px solid rgba(20, 19, 15, 0.14); }
.chrome-bottom { bottom: 0; height: var(--chrome-bot); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(20, 19, 15, 0.14); }
.chrome-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brandcore-mark { height: 24px; width: auto; }
.client-mark { height: 40px; width: auto; }
.chrome-brand .ico-x { font-size: 14px; color: #3A3629; }
.chrome-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: #3A3629; white-space: nowrap; }
.chrome-meta { display: flex; align-items: center; gap: 14px; }
.chrome-count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); color: var(--ink); }
.chrome-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(20, 19, 15, 0.35); background: transparent; color: var(--ink); border-radius: 999px; font: 600 var(--fs-small)/1 'Geist', sans-serif; cursor: pointer; }
.chrome-btn:disabled { opacity: 0.4; cursor: default; }
.chrome-btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chrome-foot { font-size: var(--fs-small); color: #3A3629; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chrome-nav { display: flex; gap: 10px; flex: none; }

/* Progress, rail, sweep */
.progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 11; background: rgba(20, 19, 15, 0.12); }
.progress span { display: block; height: 100%; background: var(--palm); transform-origin: left center; transform: scaleX(0); transition: transform 0.5s ease; }
.rail { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 9; display: flex; flex-direction: column; gap: 10px; padding: 10px 6px; border-radius: 999px; background: rgba(245, 239, 227, 0.94); }
.rail button { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; padding: 0; cursor: pointer; }
.rail button[aria-current="step"] { background: var(--ink); }
.sweep { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(90deg, transparent 0%, rgba(42, 115, 88, 0) 8%, #2A7358 40%, #7FD8AE 50%, #2A7358 60%, rgba(42, 115, 88, 0) 92%, transparent 100%); }

/* Slides: stacked, one active at a time */
.slide { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s; overflow: hidden; }
.slide.is-active { opacity: 1; visibility: visible; z-index: 2; transition-delay: 0s; }
.slide.is-leaving { opacity: 1; visibility: visible; z-index: 2; transition: none; }
.slide.is-boom-out { z-index: 4; }
.slide.is-entering { opacity: 1; visibility: visible; z-index: 3; transition: none; animation: enter-sweep 0.72s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.slide.is-entering.is-boom-in { animation: boom-in 0.65s cubic-bezier(0.2, 0.7, 0.1, 1) 0.25s both; }
@keyframes enter-sweep { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 7%), 0, 0); } to { opacity: 1; transform: none; } }
@keyframes boom-in { from { opacity: 0; transform: translate3d(calc(var(--dir, 1) * 4%), 0, 0) scale(0.98); } to { opacity: 1; transform: none; } }

.slide.paper { background: var(--paper); color: var(--txt-paper); }
.slide.dark { background: radial-gradient(1100px 620px at 85% 8%, rgba(42, 115, 88, 0.22), transparent 62%), radial-gradient(900px 520px at 0% 100%, rgba(154, 79, 40, 0.14), transparent 62%), var(--ink); color: var(--txt-dark); }

.slide-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(18px, 3.2vh, 40px) var(--gutter) clamp(28px, 5vh, 56px); }

.kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: #3B3626; margin-bottom: 14px; }
.kicker-dark { color: var(--sand); }
.h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 0.98; letter-spacing: -0.045em; color: var(--txt-paper); margin-bottom: 16px; max-width: 30ch; }
.h2 em { color: var(--palm-ink); }
.h2-dark { color: var(--txt-dark); }
.h2-dark em { color: var(--palm-glow); }
.lede { font-size: var(--fs-body); line-height: 1.5; color: var(--mut-paper); max-width: 64ch; margin-bottom: 22px; }
.lede-dark { color: var(--mut-dark); }
.label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--palm-ink); margin-bottom: 6px; }
.slide.dark .label { color: var(--palm-glow); }
.fine { font-size: var(--fs-small); line-height: 1.45; color: var(--mut-paper); }
.slide.dark .fine { color: #BDB4A3; }
.src { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); line-height: 1.3; color: #5B5543; }
.plain { list-style: none; padding: 0; display: grid; gap: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); font: 600 var(--fs-small)/1 'Geist', sans-serif; text-decoration: none; cursor: pointer; }
.btn-disabled { background: #5C5647; cursor: not-allowed; }
.btn-call { background: var(--palm); color: #FFFFFF; width: 100%; }

/* 1 · Cover */
.cover { background: transparent; color: var(--txt-dark); }
.cover-photo { position: absolute; inset: 0; transition: opacity 0.45s ease; }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.cover-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 13, 11, 0.95) 0%, rgba(14, 13, 11, 0.84) 42%, rgba(14, 13, 11, 0.45) 76%, rgba(14, 13, 11, 0.62) 100%); transition: opacity 0.45s ease; }
.slide.is-boom-out .cover-photo, .slide.is-boom-out .cover-scrim, .slide.is-boom-out .cover-copy { opacity: 0; transition: opacity 0.45s ease 0.25s; }
.cover-layout { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(20px, 3vw, 56px); align-items: center; padding: clamp(18px, 3.4vh, 40px) var(--gutter); }
.cover-copy { min-width: 0; position: relative; z-index: 1; transition: opacity 0.45s ease; }
.cover-collab { display: inline-flex; align-items: center; gap: 12px; background: var(--cream); color: var(--ink); padding: 8px 14px; border-radius: 999px; font: 600 var(--fs-small)/1 'Geist', sans-serif; margin-bottom: 18px; }
.cover-collab img { height: 22px; width: auto; }
.cover-collab .ico { font-size: 14px; }
.cover-title { font-size: var(--fs-h1); font-weight: 600; line-height: 0.86; letter-spacing: -0.06em; color: var(--cream); margin: 12px 0 18px; }
.cover-payoff { display: block; font-family: 'Instrument Serif', 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 0.6em; line-height: 1.02; letter-spacing: -0.02em; color: var(--palm-glow); margin-top: 0.14em; }
.cover-payoff em { font-family: inherit; font-style: inherit; color: var(--palm-glow); }
.lede-dark.cover-lede { max-width: 58ch; }
.ticker { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; padding: 0; margin: 18px 0; }
.ticker li { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); line-height: 1.2; padding: 7px 12px; border: 1px solid rgba(245, 239, 227, 0.32); border-radius: 999px; color: var(--cream); }
.prepared { font-size: var(--fs-small); color: var(--mut-dark); margin-top: 6px; }
.scroll-cue { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); color: var(--sand); margin-top: 14px; }
.cover-stage { position: relative; width: 100%; height: min(72vh, 680px); min-height: 320px; overflow: hidden; border-radius: 4px; }
.cover-webgl { position: absolute; inset: 0; }
.cover-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.cover-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cover-stage.is-webgl .cover-fallback { display: none; }
.cover-stage:not(.is-webgl) .cover-canvas { display: none; }
.cover-caption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); color: var(--mut-dark); }

/* CSS medallion: reduced motion, no WebGL, and before the scene loads */
.tag { position: relative; width: min(80%, 430px); margin-top: 14%; }
.tag-ring { position: absolute; left: 50%; top: -17%; width: 21%; aspect-ratio: 1; transform: translateX(-50%); border: 9px solid #2A7358; border-radius: 50%; }
.tag-plate { position: relative; aspect-ratio: 2.6 / 1.8; width: 100%; background: #F5EFE3; border: 10px solid #2A7358; border-radius: 9% / 13%; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 6% 6%; text-align: center; }
.tag-plate img { width: 56%; height: auto; }
.tag-top, .tag-bottom { font-family: 'Geist', sans-serif; font-weight: 600; font-size: clamp(13px, 1.3vw, 17px); line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.tag-bottom { color: var(--palm-ink); }

/* 2 · Audit */
.findings { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px 20px; background: #FBF8F1; border: 1px solid rgba(20, 19, 15, 0.12); border-radius: 8px; }
.finding h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--txt-paper); }
.finding p { font-size: clamp(16px, calc(0.35vw + 10px), 19px); line-height: 1.45; color: var(--mut-paper); margin-bottom: 8px; }
.finding .src { margin-top: 4px; }
.sev { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.06em; padding: 7px 9px; border-radius: 4px; height: fit-content; white-space: nowrap; color: #FFFFFF; }
.sev-high { background: #9E1B1F; }
.sev-med { background: #8A5A12; }
.sev-low { background: #2A7358; }
.works { background: var(--ink-2); color: var(--cream); padding: 20px 24px; border-radius: 8px; }
.works h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 10px; color: var(--palm-glow); }
.works ul { padding-left: 1.1em; display: grid; gap: 6px; font-size: clamp(16px, calc(0.35vw + 10px), 19px); }

/* 3 · Gap */
.night { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-body); color: var(--sand); letter-spacing: 0.04em; margin-bottom: 12px; }
.night span { font-size: var(--fs-small); color: var(--mut-dark); }
.gap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 4px; }
.path { background: var(--ink-2); border: 1px solid rgba(245, 239, 227, 0.14); border-radius: 10px; padding: 22px 24px; }
.path-next { border-color: rgba(127, 216, 174, 0.55); }
.path h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; margin-bottom: 14px; color: var(--cream); }
.path ol { list-style: none; padding: 0; display: grid; gap: 12px; }
.path li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.path p { font-size: clamp(16px, calc(0.4vw + 10px), 20px); line-height: 1.45; color: var(--mut-dark); }
.path-next p { color: var(--cream); }
.step-n { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); font-weight: 600; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 239, 227, 0.12); color: var(--cream); }
.path-next .step-n { background: var(--palm); color: #FFFFFF; }
.tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.tally p { font-size: var(--fs-small); line-height: 1.35; color: var(--cream); padding: 12px 14px 14px; border-top: 2px solid var(--palm-glow); }
.tally strong { display: block; font-size: clamp(28px, 2.6vw, 42px); font-weight: 600; line-height: 1; color: var(--palm-glow); margin-bottom: 6px; }

/* 4 · Flagship */
.flagship-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); gap: 22px; align-items: start; }
.browser { background: var(--paper); color: var(--txt-paper); border-radius: 10px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); min-width: 0; }
.browser-bar { height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #E4DACA; }
.dots { display: inline-flex; gap: 5px; }
.dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #A59B88; }
.url { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: #4F4A3B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 4px; padding: 8px 10px 0; background: var(--paper-2); border-bottom: 1px solid rgba(20, 19, 15, 0.12); overflow-x: auto; }
.tabs [role="tab"] { font: 600 var(--fs-small)/1 'Geist', sans-serif; min-height: 44px; padding: 12px 16px; border: 0; background: transparent; color: #3F3A2C; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; }
.tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 -3px 0 var(--palm); }
.browser-view { height: clamp(360px, 60vh, 640px); overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: 20px; }
.browser p, .browser li, .browser label { font-size: clamp(16px, calc(0.3vw + 11px), 19px); line-height: 1.45; color: #2B2719; }
.browser .fine { font-size: var(--fs-small); color: #4F4A3B; }
.panel[hidden] { display: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.hero img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; border-radius: 6px; }
.hero-copy h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: #14130F; margin: 6px 0 10px; }
.hero-copy .btn { margin-top: 12px; }
.mini-kicker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); color: var(--palm-ink); text-transform: uppercase; letter-spacing: 0.05em; }
.mini-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.mini-card { background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.12); border-radius: 8px; padding: 14px 16px; }
.mini-card .label { color: var(--palm-ink); }
.card-title { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.2; color: #14130F; margin: 4px 0 6px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.svc { background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.1); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.svc img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.svc h4 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.2; color: #14130F; margin: 12px 14px 4px; }
.svc p { margin: 0 14px 14px; }
.svc-text { border-top: 4px solid var(--palm); padding-top: 14px; }
.svc-text h4 { margin-top: 0; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; line-height: 1; color: #4F4A3B; text-align: center; padding: 6px 0; }
.cal-cell { min-height: 84px; background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.1); border-radius: 6px; padding: 5px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell.is-blank { background: transparent; border-color: transparent; }
.cal-num { font-size: var(--fs-small); font-weight: 600; color: #3F3A2C; line-height: 1; }
.cal-chip { font: 600 13px/1.2 'Geist', sans-serif; min-height: 44px; padding: 6px 7px; border: 0; border-radius: 4px; background: var(--palm); color: #FFFFFF; text-align: left; cursor: pointer; }
.cal-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink) inset; }
.cal-detail { background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.12); border-radius: 8px; padding: 18px; }
.cal-detail h4 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.15; margin: 4px 0 8px; color: #14130F; }
.cal-date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); color: var(--palm-ink); margin-bottom: 8px; }
.seatbar { height: 12px; background: #E4DACA; border-radius: 999px; overflow: hidden; margin: 14px 0 6px; }
.seatbar span { display: block; height: 100%; width: 62%; background: var(--palm); }
.cal-detail .btn { margin-top: 12px; width: 100%; }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.res-card { background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.1); border-radius: 8px; padding: 18px; }
.res-card h4 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; color: #14130F; margin-bottom: 8px; }
.res-card .plain { margin-top: 10px; }
.res-card .btn { margin-top: 14px; }

.phone { background: #14130F; border-radius: 34px; padding: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); }
.phone-screen { background: var(--paper); color: var(--txt-paper); border-radius: 24px; padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 480px; }
.phone-logo { height: 46px; width: auto; }
.phone-head { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: #14130F; }
.phone-photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.phone-card { background: #FFFFFF; border-radius: 10px; padding: 12px 14px; font-size: 16px; line-height: 1.4; color: #14130F; }
.phone-card .label { display: block; margin-bottom: 4px; }
.phone .fine { font-size: var(--fs-small); color: #4F4A3B; }
.mock-detail { display: none; }

/* 5 · System */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pillar { background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.12); border-top: 4px solid var(--palm); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pillar h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--txt-paper); }
.pillar p { font-size: clamp(16px, calc(0.35vw + 11px), 20px); line-height: 1.45; color: var(--mut-paper); }

/* 6 · Proof */
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.creds h3, .facts h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--cream); margin-bottom: 14px; }
.cred-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cred-grid li { background: #FFFFFF; border-radius: 8px; padding: 12px; aspect-ratio: 1.1; display: flex; align-items: center; justify-content: center; }
.cred-grid img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.creds .fine { color: #BDB4A3; }
.fact-list { list-style: none; padding: 0; display: grid; gap: 14px; }
.fact-list li { border-left: 3px solid var(--palm-glow); padding: 4px 0 4px 14px; }
.fact-list strong { display: block; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; color: var(--cream); }
.fact-list .src { color: #BDB4A3; display: block; margin-top: 4px; }

/* 7 · Roadmap */
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.phase { background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.12); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.phase-when { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); font-weight: 600; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--palm-ink); }
.phase h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; color: var(--txt-paper); }
.phase .plain li { font-size: clamp(16px, calc(0.35vw + 10px), 19px); line-height: 1.4; color: var(--mut-paper); display: flex; gap: 10px; }
.phase .plain li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--palm); }
.phase-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(20, 19, 15, 0.12); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; }
.phase-meta dt { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); line-height: 1.35; color: #4F4A3B; text-transform: uppercase; letter-spacing: 0.04em; }
.phase-meta dd { font-size: clamp(15px, calc(0.3vw + 11px), 18px); line-height: 1.4; color: var(--txt-paper); }

/* 8 · Engagement */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-top: 12px; }
.level { position: relative; background: var(--ink-2); border: 1px solid rgba(245, 239, 227, 0.14); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.level-rec { background: #15261E; border-color: var(--palm-glow); box-shadow: 0 0 0 1px rgba(127, 216, 174, 0.35) inset; }
.rec-badge { position: absolute; top: -13px; right: 18px; background: var(--palm-glow); color: #0E1A14; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.06em; }
.level-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); color: var(--sand); }
.level h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; line-height: 1.1; color: var(--cream); }
.level > p { font-size: clamp(16px, calc(0.4vw + 10px), 20px); line-height: 1.45; color: var(--mut-dark); }
.level .plain li { font-size: clamp(16px, calc(0.35vw + 10px), 19px); line-height: 1.4; color: var(--cream); display: flex; gap: 10px; }
.level .plain li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--palm-glow); }
.level-fit { margin-top: auto; padding-top: 10px; font-size: clamp(16px, calc(0.35vw + 10px), 19px); font-weight: 600; line-height: 1.4; color: var(--palm-glow); }
.fine-note { margin-top: 18px; font-size: var(--fs-small); color: #BDB4A3; }

/* 9 · Close */
.close-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px; align-items: start; }
.close-main .lede { margin-bottom: 4px; }
.scheduler { margin-top: 20px; background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.12); border-radius: 10px; padding: 18px 20px; }
.scheduler h3 { font-size: clamp(20px, 1.8vw, 24px); font-weight: 600; line-height: 1.2; margin-bottom: 8px; color: #14130F; }
.slot-fieldset { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.slot-fieldset legend { padding: 0; margin-bottom: 8px; }
.slot-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slot-list li { position: relative; }
.slot-list input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.slot-list label { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 10px 14px; border: 1px solid rgba(20, 19, 15, 0.25); border-radius: 8px; cursor: pointer; font-size: clamp(16px, calc(0.3vw + 11px), 18px); font-weight: 600; color: #14130F; }
.slot-list label span { font-size: var(--fs-small); font-weight: 400; color: var(--mut-paper); }
.slot-list input:checked + label { border-color: var(--palm-ink); background: #E7F1EC; box-shadow: 0 0 0 2px var(--palm-ink) inset; }
.slot-list input:focus-visible + label { outline: 3px solid var(--palm-ink); outline-offset: 2px; }
.btn-draft { width: 100%; margin-top: 12px; background: var(--palm-ink); color: #FFFFFF; }
.btn-draft[aria-disabled="true"] { background: #5C5647; cursor: not-allowed; }
.rep-card { background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.12); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px rgba(20, 19, 15, 0.12); }
.rep-portrait { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: var(--paper-2); }
.rep-body { padding: 20px 22px 22px; }
.rep-body h3 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; line-height: 1.1; color: #14130F; }
.rep-role { margin: 4px 0 14px; font-size: var(--fs-body); color: var(--mut-paper); }
.contact-list { list-style: none; padding: 0; display: grid; gap: 6px; margin-bottom: 14px; }
.contact-list li { display: flex; align-items: center; gap: 10px; font-size: clamp(17px, 1.4vw, 20px); color: #14130F; }
.contact-list .ico { color: var(--palm-ink); font-size: 18px; }
.contact-list a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; color: #14130F; text-decoration: underline; text-underline-offset: 3px; }
.location { font-size: var(--fs-small); color: var(--mut-paper); margin-top: 10px; }
.location strong { color: #14130F; }
.rep-body .fine { margin-top: 6px; }

/* Index overlay */
.index-overlay { position: absolute; inset: 0; z-index: 20; background: var(--paper); padding: 24px var(--gutter); overflow-y: auto; overscroll-behavior: contain; color: var(--txt-paper); }
.index-overlay[hidden] { display: none; }
.index-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.index-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.index-grid button { width: 100%; min-height: 150px; text-align: left; background: #FFFFFF; border: 1px solid rgba(20, 19, 15, 0.12); border-top: 4px solid var(--palm); border-radius: 8px; padding: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; color: var(--txt-paper); font-family: inherit; }
.index-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); color: var(--palm-ink); }
.index-title { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; line-height: 1.2; color: #14130F; }
.index-desc { font-size: var(--fs-small); line-height: 1.4; color: var(--mut-paper); }

/* Responsive */
@media (max-width: 1100px) {
  .cover-layout { grid-template-columns: minmax(0, 1fr); align-content: start; overflow-y: auto; overscroll-behavior: contain; }
  .cover-stage { height: min(56vh, 520px); }
  .gap-grid, .levels, .phases, .close-layout, .proof-grid, .flagship-grid { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail { display: none; }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slide-scroll { overscroll-behavior: contain; }
}
@media (max-width: 900px) {
  .browser, .phone { display: none; }
  .mock-detail { display: block; background: var(--ink-2); color: var(--cream); padding: 18px 20px; border-radius: 8px; margin-top: 16px; }
  .mock-detail h4 { font-size: clamp(18px, 2.6vw, 22px); font-weight: 600; margin: 14px 0 4px; color: var(--palm-glow); }
  .mock-detail p, .mock-detail li { font-size: clamp(16px, 2.2vw, 19px); line-height: 1.45; color: var(--cream); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .findings { grid-template-columns: minmax(0, 1fr); }
  .chrome-foot { display: none; }
  .chrome-label { display: none; }
}
@media (max-width: 760px) {
  .chrome { padding: 0 14px; gap: 10px; }
  .client-mark { height: 34px; }
  .brandcore-mark { height: 20px; }
  .chrome-btn span { display: none; }
  .chrome-btn { min-width: 44px; padding: 0 12px; }
  .chrome-nav .chrome-btn span { display: inline; }
  .cover-layout { padding: 14px 16px 28px; gap: 16px; }
  .cover-stage { order: -1; height: min(46vh, 420px); min-height: 280px; }
  .cover-collab { font-size: 14px; }
  .cover-caption { font-size: 13px; }
  .svc-grid, .mini-cards, .res-grid, .slot-list, .index-grid, .cred-grid { grid-template-columns: minmax(0, 1fr); }
  .cred-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .tally { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .slide-scroll { padding: 16px 16px 36px; }
  .scheduler { padding: 16px; }
  .phase-meta { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .slide.is-entering, .slide.is-leaving, .cover-photo, .cover-scrim, .cover-copy, .progress span { transition: none !important; animation: none !important; }
  .sweep { display: none; }
}

/* Center fitting compositions between fixed global chrome; tall content keeps natural top flow. */
@media (min-width: 1101px) {
  #slide-3 > .slide-scroll, #slide-4 > .slide-scroll, #slide-5 > .slide-scroll, #slide-6 > .slide-scroll,
  #slide-7 > .slide-scroll, #slide-8 > .slide-scroll { display: grid; align-content: safe center; }
}