/* =====================================================================
   CTRL+ALT+DEPART — lander styles
   Brand bible: brand/option-3-ctrl-alt-depart/BRAND-BIBLE.md
   RULE: grain + jitter live on ART and decor only. Prices, CTAs and the
   Fine Print Department sit on opaque fills and never jitter/rotate/grain.
   ===================================================================== */
:root {
  --paper: #F4F0E6; --paper-hi: #FBF8F0; --toner: #161514; --stapler: #C8221A;
  --highlight: #E6FF3B; --pink: #FF5EA8; --ballpoint: #2447C9; --pool: #19B7C9;
  --manila: #E8CF94; --smudge: #5E5A52;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', 'Courier New', monospace;
  --hand: 'Permanent Marker', 'Comic Sans MS', cursive;
  --spring: cubic-bezier(.3,1.6,.5,1);
  --slap: cubic-bezier(.2,1.8,.4,1);
  --swipe: cubic-bezier(.6,0,.2,1);
  --header-h: 60px;
  --callbar-h: 58px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-snap-type: y proximity; scroll-padding-top: var(--header-h); overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--toner); font: 400 16px/1.55 var(--body); overflow-x: clip; padding-bottom: var(--callbar-h); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ballpoint); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--toner); color: var(--highlight); padding: 8px 12px; font: 700 14px var(--mono); }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px dashed var(--ballpoint); outline-offset: 3px; }

/* ---------- grain: a BACKGROUND layer under content (never over text) ---------- */
.grain { position: relative; isolation: isolate; }
.grain::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .08; mix-blend-mode: multiply; }

/* ---------- shared atoms ---------- */
.mono-tag { display: inline-block; background: var(--toner); color: var(--paper); font: 700 11px/1 var(--mono); letter-spacing: .1em; padding: 6px 8px 5px; text-transform: uppercase; }
.mono-tag--inline { margin-bottom: 14px; }

/* keycap (motion #1 Keycap Press) */
.keycap { appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 3px solid var(--toner); border-radius: 12px; background: var(--stapler); color: var(--paper); cursor: pointer; text-decoration: none;
  font: 400 22px/1 var(--display); letter-spacing: .045em; text-transform: uppercase; padding: 15px 22px 14px; min-height: 54px;
  box-shadow: 0 7px 0 var(--toner); transform: translateY(0); transition: transform .22s var(--spring), box-shadow .22s var(--spring); max-width: 100%; white-space: nowrap; }
.keycap::before { content: ""; position: absolute; inset: 4px 6px 9px; border-radius: 7px; border-top: 2px solid rgba(255,255,255,.3); pointer-events: none; }
.keycap:hover { transform: translateY(2px); box-shadow: 0 5px 0 var(--toner); }
.keycap:active, .keycap.is-pressed { transform: translateY(6px); box-shadow: 0 1px 0 var(--toner); transition-duration: .09s; transition-timing-function: ease-in; }
.keycap:focus-visible { outline: 3px dashed var(--ballpoint); outline-offset: 6px; }
.keycap__arr { font-family: var(--mono); font-size: 18px; }
.keycap__legend { position: absolute; left: 8px; top: 6px; font: 700 8px/1 var(--mono); letter-spacing: .06em; opacity: .65; }
.keycap--full { width: 100%; }
.keycap--paper { background: var(--paper-hi); color: var(--toner); }
.keycap--paper::before { border-top-color: rgba(255,255,255,.9); }
.keycap--hl { background: var(--highlight); color: var(--toner); }
.keycap--hl::before { border-top-color: rgba(255,255,255,.55); }
.keycap--sm { font-size: 17px; min-height: 40px; padding: 10px 14px 8px; border-radius: 9px; box-shadow: 0 5px 0 var(--toner); }
.keycap--sm:hover { box-shadow: 0 3px 0 var(--toner); }
.keycap--sm:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--toner); }
.keycap[disabled] { cursor: progress; }

.textlink { appearance: none; background: none; border: 0; padding: 6px 0; cursor: pointer; font: 700 14px/1.2 var(--mono); color: var(--ballpoint); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.textlink:hover { text-decoration-style: wavy; }

/* highlighter swipe (motion #4) */
.hl { position: relative; z-index: 0; padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl::before { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.1em; top: .14em; bottom: .02em; background: var(--highlight);
  transform-origin: left center; transform: scaleX(0) rotate(-1deg); border-radius: 2px 8px 3px 10px / 6px 3px 9px 2px; transition: transform .55s var(--swipe) .1s; }
.hl.is-in::before, .no-io .hl::before { transform: scaleX(1) rotate(-1deg); }

/* ransom scraps (bible §4): 1-2 words per headline, -4..+4deg, aria carries plain text */
.scrap { display: inline-block; padding: .02em .14em 0; margin: 0 .02em; line-height: 1.02; box-shadow: 3px 3px 0 rgba(22,21,20,.28); }
.scrap.s1 { background: var(--paper-hi); color: var(--toner); font-family: Georgia, 'Times New Roman', serif; font-weight: 700; transform: rotate(-3deg); border: 1px solid rgba(22,21,20,.2); }
.scrap.s2 { background: var(--stapler); color: var(--paper); font-family: 'Archivo Black', 'Arial Black', sans-serif; transform: rotate(2deg); }
.scrap.s3 { background: var(--toner); color: var(--highlight); font-family: var(--mono); font-weight: 700; letter-spacing: -.04em; transform: rotate(-1.5deg); }
.scrap.s4 { background: var(--pink); color: var(--toner); font-family: Georgia, serif; font-style: italic; font-weight: 700; transform: rotate(3deg); }
.scrap.s5 { background: var(--pool); color: var(--toner); transform: rotate(-2deg); }
.ransom { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; gap: .03em; vertical-align: baseline; }
.ransom i { display: inline-block; font-style: normal; padding: .03em .07em 0; line-height: 1; box-shadow: 2px 2px 0 rgba(22,21,20,.3); }
.ransom .r1 { background: var(--paper-hi); font-family: Georgia, serif; font-weight: 700; transform: rotate(-4deg); border: 1px solid rgba(22,21,20,.18); }
.ransom .r2 { background: var(--stapler); color: var(--paper); font-family: 'Archivo Black', sans-serif; transform: rotate(3deg); }
.ransom .r3 { background: var(--toner); color: var(--highlight); font-family: var(--mono); font-weight: 700; transform: rotate(-2deg); }
.ransom .r4 { background: var(--pink); font-family: Georgia, serif; font-style: italic; font-weight: 700; transform: rotate(4deg); }
.ransom .r5 { background: var(--paper-hi); color: var(--ballpoint); font-family: Verdana, sans-serif; font-weight: 700; transform: rotate(-3deg); border: 1px solid rgba(22,21,20,.18); }
.ransom .ransom__dot { font: inherit; align-self: flex-end; margin-left: .02em; }
.ransom .r6 { background: var(--pool); font-family: Impact, 'Arial Narrow', sans-serif; transform: rotate(2deg); }

/* photocopy jitter (motion #3): 4 frames @120ms, steps(1), then rests. Never on prices/CTAs/legal. */
@keyframes jitter {
  0%   { translate: 0 0; rotate: 0deg; }
  25%  { translate: 1.2px -.7px; rotate: .3deg; }
  50%  { translate: -.9px .6px; rotate: -.25deg; }
  75%  { translate: .5px 1px; rotate: .15deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
.is-jitter { animation: jitter .48s steps(1) 1; }

/* masking tape (motion #5 Tape Slap) */
.tape { position: absolute; z-index: 4; width: 92px; height: 26px; background: rgba(232,207,148,.86); pointer-events: none;
  clip-path: polygon(0 8%,6% 0,10% 12%,14% 0,90% 0,94% 14%,100% 4%,96% 50%,100% 96%,92% 88%,86% 100%,8% 100%,4% 86%,0 100%,4% 50%); }
.tape--tl { top: -10px; left: -22px; rotate: -20deg; }
.tape--tr { top: -10px; right: -22px; rotate: 18deg; }
.tape--br { bottom: -8px; right: -20px; rotate: -16deg; }
.tape--bl { bottom: -8px; left: -20px; rotate: 14deg; }
.is-slapped .tape { animation: slap .26s var(--slap) both; }
.is-slapped .tape + .tape { animation-delay: .12s; }
@keyframes slap { from { opacity: 0; scale: 1.35; } to { opacity: 1; scale: 1; } }
.is-slapped.copy-frame { animation: bump .3s .18s var(--slap) both; }
@keyframes bump { 0%,100% { translate: 0 0; } 40% { translate: 0 2px; } }

/* sticky notes (motion #6 Sticky Peel). The note body holding a PRICE never flutters. */
.sticky { position: relative; background: var(--highlight); color: var(--toner); padding: 12px 12px 16px; box-shadow: 0 10px 14px -10px rgba(22,21,20,.45); }
.sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, rgba(22,21,20,.18) 50%, rgba(255,255,255,.55) 72%); transform-origin: 100% 100%; transition: transform .3s var(--slap); }
.sticky:hover::after { transform: scale(1.7) rotate(-4deg); }
.sticky--pink { background: var(--pink); }
.sticky--yellow { background: var(--highlight); }
.sticky__small { display: block; font: 400 14px/1 var(--hand); }
.sticky__price { display: block; font: 400 52px/.95 var(--display); letter-spacing: .01em; margin: 2px 0 2px; }
.sticky__fine { display: block; font: 700 10px/1.25 var(--mono); letter-spacing: .04em; }
.sticky--flutter { animation: flutter 3s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes flutter { 0%,100% { rotate: 2.5deg; } 50% { rotate: 1deg; skew: -1deg 0deg; } }

/* photocopy frame + copier scan bar (motion #9) */
.copy-frame { position: relative; background: var(--paper-hi); border: 3px solid var(--toner); padding: 8px; box-shadow: 8px 8px 0 var(--toner); }
.copy-frame__art { position: relative; overflow: hidden; background: var(--toner); }
.copy-frame__art img, .copy-frame__art video { width: 100%; height: 100%; object-fit: cover; }
.copy-frame__art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .12; mix-blend-mode: multiply; }
.copy-frame__scan { position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(214,255,250,0) 18%, rgba(214,255,250,.8) 50%, rgba(214,255,250,0) 82%, transparent); mix-blend-mode: screen; }
.is-scanning .copy-frame__scan { animation: scan 1.4s ease-in-out both; }
@keyframes scan { 0% { opacity: 1; transform: translateY(-110%); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(300%); } }
.copy-frame__cap { display: flex; justify-content: space-between; font: 700 10px/1 var(--mono); letter-spacing: .1em; color: var(--smudge); padding: 8px 2px 0; }

/* ====================== HEADER: memo strip ====================== */
.memo { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 3px solid var(--toner); height: var(--header-h); }
.memo__in { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.memo__brand { display: block; width: 184px; flex: none; }
.memo__brand svg { width: 100%; height: auto; }
.memo__line { display: none; font: 700 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.memo__line span { color: var(--smudge); }
.memo__agenda { flex: none; padding-left: 26px; }
@media (min-width: 900px) {
  :root { --header-h: 68px; }
  .memo__brand { width: 220px; }
  .memo__line { display: block; }
}

/* ====================== HERO ====================== */
.hero { padding: 26px 16px 44px; background: var(--paper); }
.hero__in { max-width: 1240px; margin: 0 auto; display: grid; gap: 26px; }
.hero__kicker { font: 700 11px/1.5 var(--mono); letter-spacing: .08em; color: var(--smudge); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.hero__kicker .mono-tag { color: var(--highlight); }
.hero__title { font: 400 clamp(44px, 12.6vw, 112px)/.92 var(--display); letter-spacing: .005em; text-transform: uppercase; margin-top: 14px; }
.hero__title .ransom { font-size: .92em; }
.hero__sub { font: 600 clamp(17px, 2.2vw, 21px)/1.45 var(--body); font-stretch: 112%; max-width: 34ch; margin-top: 16px; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 22px; }
.hero__facts { font: 400 13px/1.3 var(--mono); color: var(--smudge); }
.hero__facts b { color: var(--toner); }
.hero__cue { font: 400 22px/1 var(--hand); color: var(--stapler); margin-top: 22px; rotate: -3deg; display: inline-block; }
.hero__cue span { display: inline-block; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%,100% { translate: 0 0; } 50% { translate: 0 5px; } }
.hero__stage { position: relative; }
.hero__backsheet { display: none; }
.hero__frame { margin: 4px 6px 0 0; rotate: .6deg; }
.hero__frame .copy-frame__art { aspect-ratio: 4 / 5; }
.hero__poster { display: block; width: 100%; height: 100%; }
.hero__video { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.hero__video.is-playing { opacity: 1; }
.hero__sticky { position: absolute; z-index: 5; right: -6px; top: -18px; width: 124px; text-align: center; rotate: 4deg; }
.hero__clinch { position: absolute; z-index: 6; left: -10px; bottom: -34px; width: 118px; }
.clinch img { width: 100%; height: auto; filter: drop-shadow(3px 5px 0 rgba(22,21,20,.25)); }
@media (min-width: 900px) {
  .hero { padding: 48px 28px 70px; min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; }
  .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
  .hero__title { font-size: clamp(54px, 5.4vw, 92px); }
  .hero__stage { display: grid; justify-items: end; padding: 30px 40px 40px 0; }
  .hero__backsheet { display: block; position: absolute; left: 0; top: 14%; width: 74%; rotate: -4deg; box-shadow: 6px 6px 0 var(--toner); }
  .hero__backsheet .copy-frame__art { aspect-ratio: 16 / 9; }
  .hero__backsheet .tape--tl { top: -12px; left: 30%; rotate: -8deg; }
  .hero__frame { width: min(360px, calc((100svh - var(--header-h) - 170px) * 9 / 16)); rotate: 2deg; margin: 0; }
  .hero__frame .copy-frame__art { aspect-ratio: 9 / 16; }
  .hero__sticky { width: 140px; right: -54px; top: -26px; }
  .hero__clinch { width: 160px; left: -96px; bottom: -40px; }
}

/* ====================== AGENDA SCENES ====================== */
.agenda { position: relative; }
.scene { min-height: calc(100svh - var(--header-h)); scroll-snap-align: start; padding: 54px 16px 40px; display: grid; align-items: center; background: var(--paper); border-top: 2px dashed rgba(22,21,20,.35); }
.scene:nth-of-type(2) { background: #F1ECDF; }
.scene__in { max-width: 1180px; width: 100%; margin: 0 auto; display: grid; gap: 22px; }
.scene__art { margin: 0 12px 0 4px; }
.scene__art .copy-frame__art { aspect-ratio: 16 / 11; }
.scene__tab { position: absolute; z-index: 5; top: -17px; left: 14px; background: var(--toner); color: var(--paper); font: 700 11px/1 var(--mono); letter-spacing: .1em; padding: 7px 10px 6px; }
.price { position: absolute; z-index: 5; right: -14px; bottom: -22px; width: 118px; text-align: center; rotate: -3deg; }
.price .sticky__price { font-size: 46px; }
.scene__name { font: 700 12px/1.35 var(--mono); letter-spacing: .1em; color: var(--stapler); text-transform: uppercase; }
.scene__name span { color: var(--smudge); letter-spacing: .04em; }
.scene__title { font: 400 clamp(36px, 9.4vw, 68px)/1.02 var(--display); text-transform: uppercase; margin-top: 8px; letter-spacing: .005em; }
.checks { display: grid; gap: 11px; margin: 18px 0 22px; }
.checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; font: 500 15px/1.42 var(--body); }
.checks b { font-weight: 800; }
.checks__box { width: 24px; height: 24px; margin-top: 1px; border: 2.5px solid var(--toner); border-radius: 5px; background: var(--paper-hi); box-shadow: 0 3px 0 var(--toner); display: grid; place-items: center; }
.checks__box svg { width: 17px; height: 17px; fill: none; stroke: var(--stapler); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.is-in .checks__box svg, .no-io .checks__box svg { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease-out; }
.is-in .checks li:nth-child(2) svg { transition-delay: .25s; }
.is-in .checks li:nth-child(3) svg { transition-delay: .5s; }
.scene__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.scene__note { font: 400 11.5px/1.5 var(--mono); color: var(--paper); margin-top: 16px; max-width: 52ch; }
@media (max-width: 899px) {
  .scene { padding-top: 70px; padding-bottom: 46px; }
  .price { top: -18px; bottom: auto; right: -10px; width: 104px; padding: 10px 8px 12px; rotate: 4deg; }
  .price .sticky__price { font-size: 40px; }
  .price .sticky__fine { font-size: 9px; }
  .scene__actions .keycap { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .scene { padding: 70px 96px 70px 32px; }
  .scene__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
  .scene--flip .scene__art { order: 2; }
  .scene__art .copy-frame__art { aspect-ratio: 1 / 1; }
  .scene__art { max-width: 560px; justify-self: center; width: 100%; }
  .price { width: 136px; right: -34px; bottom: -30px; }
  .price .sticky__price { font-size: 56px; }
  .checks li { font-size: 16.5px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .scene__art { max-width: 470px; }
  .scene__title { font-size: 54px; }
}

/* dark scene (item 4): toner sheet */
.scene--dark { background: var(--toner); color: var(--paper); border-top-color: rgba(244,240,230,.3); }
.scene--dark.grain::before { mix-blend-mode: screen; opacity: .1; filter: invert(1); }
.scene--dark .scene__name { color: var(--highlight); }
.scene--dark .scene__name span { color: #BDB7AA; }
.scene--dark .checks__box { background: var(--paper); border-color: var(--paper); box-shadow: 0 3px 0 #6b665d; }
.scene--dark .hl { color: var(--toner); }
.scene--dark .hl::before { top: -.06em; bottom: -.08em; }
.scene--dark a.resort-link, .scene--dark .textlink { color: var(--highlight); }
.scene--dark .copy-frame { box-shadow: 8px 8px 0 var(--highlight); border-color: var(--paper); }
.scene--dark .keycap { border-color: var(--paper); box-shadow: 0 7px 0 #6b665d; }
.scene--dark .keycap:hover { box-shadow: 0 5px 0 #6b665d; }
.scene--dark .keycap:active { box-shadow: 0 1px 0 #6b665d; }
.scene--dark .scrap.s1 { color: var(--toner); }

/* pager: keycaps 1-4 (mobile: docked under the header; desktop: right rail) */
.pager { position: fixed; z-index: 30; display: flex; align-items: center; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; }
.pager.is-active { opacity: 1; pointer-events: auto; }
.pager__key, .pager__arrow { appearance: none; position: relative; overflow: hidden; width: 38px; height: 34px; border: 2.5px solid var(--toner); border-radius: 7px; background: var(--paper-hi); color: var(--toner);
  box-shadow: 0 4px 0 var(--toner); font: 700 15px/1 var(--mono); cursor: pointer; padding: 0; transition: transform .2s var(--spring), box-shadow .2s var(--spring); }
.pager__key span { position: relative; z-index: 1; }
.pager__arrow { font-size: 16px; }
.pager__key:active, .pager__arrow:active { transform: translateY(4px); box-shadow: 0 0 0 var(--toner); }
.pager__key.is-active { background: var(--highlight); transform: translateY(2px); box-shadow: 0 2px 0 var(--toner); }
.pager__fill { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--stapler); transform: translateX(-101%); }
@media (max-width: 899px) {
  .pager { top: calc(var(--header-h) + 8px); left: 50%; translate: -50% -6px; background: var(--paper); border: 2px solid var(--toner); padding: 5px 7px 8px; border-radius: 10px; box-shadow: 3px 3px 0 var(--toner); }
  .pager.is-active { translate: -50% 0; }
  .pager__arrow { display: none; }
}
@media (min-width: 900px) {
  .pager { right: 22px; top: 50%; translate: 8px -50%; flex-direction: column; gap: 9px; }
  .pager.is-active { translate: 0 -50%; }
  .pager__key, .pager__arrow { width: 44px; height: 40px; }
}

/* ====================== THE ESCAPE PROTOCOL ====================== */
.protocol { background: var(--highlight); border-top: 3px solid var(--toner); border-bottom: 3px solid var(--toner); padding: 58px 16px 64px; scroll-snap-align: start; }
.protocol::before { opacity: .1 !important; }
.protocol__in { max-width: 1180px; margin: 0 auto; }
.protocol__title { font: 400 clamp(42px, 10vw, 92px)/.95 var(--display); text-transform: uppercase; }
.protocol__sub { font: 600 18px/1.4 var(--body); margin-top: 10px; }
.protocol .hl::before { background: var(--paper); }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; margin: 34px 0 34px; counter-reset: s; }
.step { position: relative; background: var(--paper-hi); border: 3px solid var(--toner); padding: 36px 14px 16px; box-shadow: 6px 6px 0 var(--toner); }
.step:nth-child(odd) { rotate: -.6deg; } .step:nth-child(even) { rotate: .8deg; }
.step__key { position: absolute; top: -20px; left: 12px; display: grid; place-items: center; width: 46px; height: 42px; background: var(--paper-hi); border: 3px solid var(--toner); border-radius: 9px; box-shadow: 0 6px 0 var(--toner); font: 700 20px/1 var(--mono); transition: transform .12s ease-in, box-shadow .12s ease-in; }
.step__key.is-down { transform: translateY(5px); box-shadow: 0 1px 0 var(--toner); background: var(--stapler); color: var(--paper); }
.step__icon { width: 96px; height: 96px; margin: -6px auto 8px; object-fit: contain; }
.step__name { font: 400 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.step__desc { font: 500 14px/1.45 var(--body); margin-top: 6px; }
.protocol__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.protocol__or { font: 700 14px/1.3 var(--mono); }
.protocol__or a { color: var(--toner); }
@media (min-width: 900px) {
  .protocol { padding: 90px 32px 96px; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .step__icon { width: 130px; height: 130px; }
}

/* ====================== FOOTER: THE FINE PRINT DEPARTMENT ====================== */
.footer { padding: 46px 16px 64px; background: var(--paper); }
.footer__in { max-width: 1180px; margin: 0 auto; display: grid; gap: 40px; }
.footer__brand img { width: 240px; height: auto; }
.footer__strap { font: 700 11px/1 var(--mono); letter-spacing: .12em; margin-top: 10px; }
.footer__tag { font: 400 22px/1.1 var(--hand); color: var(--stapler); margin-top: 14px; rotate: -2deg; display: inline-block; }
.fineprint { position: relative; margin-right: 16px; margin-bottom: 14px; }
.fineprint::before, .fineprint::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--toner); }
.fineprint::before { background: #FFF3A8; transform: translate(7px, 7px); z-index: 1; }
.fineprint::after { background: #FFC6DF; transform: translate(14px, 14px); z-index: 0; }
/* the sheet holding the legal text: opaque white, no rotation, no grain, no jitter, 100% opacity */
.fineprint__sheet { position: relative; z-index: 2; background: #fff; border: 2px solid var(--toner); padding: 16px 16px 18px; }
.fineprint__head { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 700 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--toner); padding-bottom: 8px; margin-bottom: 12px; }
.fineprint__head span:first-child { color: var(--stapler); }
.fineprint p { font: 400 12.5px/1.62 var(--mono); color: var(--toner); }
.fineprint p + p { margin-top: 9px; }
.fineprint a { color: var(--ballpoint); }
@media (min-width: 900px) {
  .footer { padding: 70px 32px 90px; }
  .footer__in { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
  .fineprint p { font-size: 13px; }
}

/* ====================== CALL BAR ====================== */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: var(--callbar-h); padding: 0 12px env(safe-area-inset-bottom); background: var(--toner); color: var(--paper); border-top: 3px solid var(--highlight);
  display: flex; align-items: center; justify-content: center; gap: 10px 16px; }
.callbar__line { font: 700 11px/1.2 var(--mono); letter-spacing: .08em; }
.callbar__long { display: none; }
.callbar__key { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--highlight); color: var(--toner); font: 400 22px/1 var(--display); letter-spacing: .04em; padding: 8px 12px 6px; border-radius: 8px; border: 2px solid var(--toner);
  box-shadow: 0 4px 0 #6f7a1c; animation: ring 8s var(--spring) 2s infinite; white-space: nowrap; }
.callbar__key svg { width: 18px; height: 18px; fill: var(--toner); }
.callbar__key:active { transform: translateY(4px); box-shadow: 0 0 0 #6f7a1c; }
@keyframes ring { 0%, 94%, 100% { transform: translateY(0); box-shadow: 0 4px 0 #6f7a1c; } 96% { transform: translateY(4px); box-shadow: 0 0 0 #6f7a1c; } }
@media (max-width: 359px) { .callbar__line { display: none; } }
@media (min-width: 640px) { .callbar__long { display: inline; } .callbar__short { display: none; } .callbar__line { font-size: 12px; letter-spacing: .1em; } }

/* ====================== LEAD FORM: FORM CAD-43 ====================== */
.sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(22,21,20,.62); opacity: 0; transition: opacity .3s; }
.sheet-backdrop.is-open { opacity: 1; }
.sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; top: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 22px 10px 24px; transform: translateY(104%); transition: transform .45s cubic-bezier(.2,1.1,.3,1); }
.sheet.is-open { transform: translateY(0); }
.sheet__clip { position: absolute; top: 4px; left: 50%; width: 120px; height: 34px; margin-left: -60px; z-index: 3; background: linear-gradient(#cfccc4, #8f8b83); border: 3px solid var(--toner); border-radius: 8px 8px 4px 4px; }
.sheet__clip::after { content: ""; position: absolute; left: 44px; right: 44px; top: 7px; height: 8px; border-radius: 4px; background: var(--toner); }
.sheet__paper { position: relative; max-width: 560px; margin: 0 auto; background: #FFFDF7; border: 3px solid var(--toner); padding: 34px 18px 22px;
  box-shadow: 6px 6px 0 #EFE6C9, 9px 9px 0 var(--toner), 12px 12px 0 #F7C4DB, 15px 15px 0 var(--toner); }
.sheet__close { position: absolute; z-index: 10; top: 8px; right: 8px; width: 40px; height: 40px; border: 2.5px solid var(--toner); border-radius: 8px; background: var(--paper); box-shadow: 0 3px 0 var(--toner); font: 400 26px/1 var(--body); cursor: pointer; }
.sheet__fh { display: flex; flex-wrap: wrap; gap: 3px 12px; font: 700 10.5px/1.4 var(--mono); letter-spacing: .08em; border-bottom: 2px solid var(--toner); padding: 0 44px 8px 0; }
.sheet__title { font: 400 clamp(38px, 10vw, 50px)/1 var(--display); text-transform: uppercase; margin: 16px 0 4px; }
.field { display: block; margin-top: 16px; }
.field__lab { display: block; font: 700 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.field__lab i { font-style: normal; font-weight: 400; color: var(--smudge); text-transform: none; letter-spacing: 0; }
.field input, .field select { width: 100%; border: 0; border-bottom: 2px solid var(--ballpoint); border-radius: 0; background: transparent; padding: 8px 2px 6px; color: var(--ballpoint); font: 400 21px/1.25 var(--hand); }
.field input[type=email], .field input[type=tel], .field input[type=date] { font: 400 18px/1.4 var(--mono); }
.field select { font: 700 14px/1.4 var(--mono); appearance: none; padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232447C9' stroke-width='2'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; cursor: pointer; }
.field input::placeholder { color: rgba(36,71,201,.36); }
.field input:focus, .field select:focus { outline: none; background-color: rgba(230,255,59,.45); }
.field__sms { display: block; font: 400 11.5px/1.45 var(--mono); color: var(--toner); margin-top: 6px; }
.field__err { display: block; font-style: normal; }
.is-error .field__err:not(:empty) { display: inline-block; margin-top: 8px; background: var(--highlight); color: var(--toner); font: 400 15px/1.2 var(--hand); padding: 6px 10px 7px; rotate: -1.5deg; box-shadow: 0 6px 8px -6px rgba(22,21,20,.5); }
.is-error input { border-bottom-color: var(--stapler); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.dates { margin-top: 18px; }
.toggle { display: flex; gap: 10px; align-items: center; cursor: pointer; font: 500 14.5px/1.3 var(--body); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__sw { flex: none; width: 48px; height: 28px; border: 2.5px solid var(--toner); border-radius: 15px; background: var(--paper); position: relative; transition: background .2s; }
.toggle__sw::after { content: ""; position: absolute; top: 2.5px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--toner); transition: transform .22s var(--spring); }
.toggle input:checked + .toggle__sw { background: var(--highlight); }
.toggle input:checked + .toggle__sw::after { transform: translateX(19px); }
.toggle input:focus-visible + .toggle__sw { outline: 3px dashed var(--ballpoint); outline-offset: 3px; }
.toggle__lab i { color: var(--smudge); font-style: normal; font-size: 13px; }
.dates__cal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dates__cal[hidden] { display: none; }

.approver { margin-top: 18px; font: 700 11px/1.3 var(--mono); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.approver__sig { font: 400 24px/1 var(--hand); color: var(--ballpoint); border-bottom: 2px solid var(--ballpoint); min-width: 150px; padding: 0 6px 2px; rotate: -2deg; display: inline-block; }
.approver__sig.is-signed { animation: sign .4s ease-out; }
@keyframes sign { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* SIGNATURE REQUIRED: verbatim consent, 13px Space Mono, toner on paper. Never rotated/grained. */
.sig { margin: 22px 0 20px; border: 2px solid var(--toner); padding: 22px 12px 12px; position: relative; background: #fff; }
.sig legend { font: 700 10.5px/1 var(--mono); letter-spacing: .1em; background: var(--toner); color: var(--paper); padding: 5px 8px; position: absolute; top: -11px; left: 10px; }
.cb { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 10px; font: 400 13px/1.55 var(--mono); color: var(--toner); margin-top: 10px; cursor: pointer; }
.cb + .cb { margin-top: 14px; }
.cb input { appearance: none; width: 24px; height: 24px; border: 2.5px solid var(--toner); border-radius: 4px; background: #fff; margin: 1px 0 0; cursor: pointer; }
.cb input:checked { background: var(--highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23161514' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat; }
.cb input:focus-visible { outline: 3px dashed var(--ballpoint); outline-offset: 2px; }
.cb .field__err { grid-column: 2; }
.leadform__submit .typing { display: none; gap: 4px; margin-left: 6px; }
.leadform__submit.is-busy .typing { display: inline-flex; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
.leadform__status { font: 700 13px/1.4 var(--mono); min-height: 1.2em; margin-top: 12px; }
.leadform__status.is-bad { color: var(--stapler); }

/* success: FILED stamp (motion #7) + ticket print (motion #8) */
.sheet__success { position: relative; text-align: center; padding-top: 6px; }
.stamp { position: absolute; z-index: 4; top: 64px; right: 0; font: 400 44px/1 var(--display); letter-spacing: .08em; color: var(--stapler); border: 6px double var(--stapler); padding: 6px 14px 2px; rotate: -6deg; mix-blend-mode: multiply; pointer-events: none; }
.success__kicker { font: 700 11px/1.3 var(--mono); letter-spacing: .1em; color: var(--smudge); text-align: left; }
.success__title { font: 400 clamp(32px, 8.5vw, 42px)/1 var(--display); text-transform: uppercase; margin: 10px 0 18px; text-align: left; max-width: 11ch; outline: none; }
.ticket { position: relative; margin: 0 auto 22px; max-width: 360px; }
.ticket__slot { display: block; height: 8px; margin: 0 -6px; background: var(--toner); border-radius: 4px; }
.ticket__paper { margin: -2px 10px 0; background: var(--paper); border: 2px solid var(--toner); border-top: 0; padding: 16px 14px 18px; position: relative;
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 18px 100% repeat-x; padding-bottom: 24px; }
.is-printing .ticket__paper { animation: print .9s steps(6) .45s both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.ticket__head { font: 700 12px/1.3 var(--mono); letter-spacing: .14em; }
.ticket__digits { display: flex; justify-content: center; gap: 5px; margin: 12px 0 14px; }
.ticket__digits:empty { display: none; }
.kc { display: inline-grid; place-items: center; min-width: 34px; height: 42px; padding: 0 6px; background: var(--paper-hi); border: 2.5px solid var(--toner); border-radius: 7px; box-shadow: 0 4px 0 var(--toner); font: 700 21px/1 var(--mono); color: var(--toner); }
.kc--hash { background: transparent; border-color: transparent; box-shadow: none; min-width: 16px; padding: 0; }
.kc--gap { width: 6px; min-width: 6px; padding: 0; border: 0; box-shadow: none; background: none; }
.ticket__held { font: 600 15px/1.4 var(--body); }
.countdown { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 10px 0 14px; perspective: 300px; }
.countdown .kc { background: var(--toner); color: var(--highlight); border-color: var(--toner); box-shadow: 0 4px 0 #57534a; min-width: 38px; height: 48px; font-size: 25px; }
.countdown__sep { font: 700 24px/1 var(--mono); }
.kc--flap.is-flip { animation: flap .32s ease-in-out; }
@keyframes flap { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
.countdown.is-low .kc { background: var(--stapler); color: var(--paper); }
.ticket__call { font: 600 15px/1.45 var(--body); }
.ticket__call a { font-weight: 800; color: var(--ballpoint); white-space: nowrap; }
.ticket__fine { font: 400 11.5px/1.45 var(--mono); color: var(--smudge); margin-top: 10px; }
.success__foot { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 22px 0 6px; }
.success__note { font: 400 19px/1.15 var(--hand); width: 170px; text-align: left; rotate: -3deg; animation: flutter 3s ease-in-out infinite; }
.success__clinch { width: 130px; margin-bottom: -10px; }
.sheet__done { margin-top: 10px; }
@media (min-width: 700px) {
  .sheet { top: 0; display: grid; place-items: start center; padding: 48px 20px 60px; transform: translateY(40px); opacity: 0; transition: transform .35s var(--spring), opacity .25s; }
  .sheet.is-open { transform: translateY(0); opacity: 1; }
  .sheet__clip { position: relative; top: 18px; left: auto; margin: 0 auto; }
  .sheet__paper { padding: 40px 30px 28px; width: 100%; }
  .sheet { justify-items: center; }
}

/* ====================== RESORT DRAWER: manila folder ====================== */
.resort-backdrop { position: fixed; inset: 0; z-index: 64; background: rgba(22,21,20,.55); opacity: 0; transition: opacity .4s; }
.resort-backdrop.is-open { opacity: 1; }
.resort-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: min(92vw, 460px); background: var(--manila); border-left: 3px solid var(--toner); box-shadow: -10px 0 0 rgba(22,21,20,.25);
  transform: translateX(105%); transition: transform .5s cubic-bezier(.2,1,.3,1); }
.resort-drawer.is-open { transform: translateX(0); }
.resort-drawer__tab { position: absolute; top: 18px; left: -3px; transform: translateX(-100%); max-width: 46vw; background: var(--manila); border: 3px solid var(--toner); border-right: 0; border-radius: 10px 0 0 10px; padding: 8px 10px; font: 700 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resort-drawer__staple { position: absolute; top: 14px; left: 16px; width: 34px; height: 8px; border: 2.5px solid #8f8b83; border-bottom: 0; border-radius: 2px 2px 0 0; rotate: -10deg; z-index: 2; }
.resort-drawer__close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; border: 2.5px solid var(--toner); border-radius: 8px; background: var(--paper); box-shadow: 0 3px 0 var(--toner); font: 400 26px/1 var(--body); cursor: pointer; }
.resort-drawer__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 60px 16px 40px; }
.resort-drawer__swipe { display: none; }
.rd-memo { font: 700 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--toner); padding-bottom: 8px; margin-bottom: 14px; }
.rd-hero { position: relative; background: #fff; border: 2.5px solid var(--toner); padding: 6px; rotate: -1deg; box-shadow: 5px 5px 0 var(--toner); }
.rd-hero img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.rd-hero__clip { position: absolute; top: -14px; right: 26px; width: 30px; height: 24px; background: var(--toner); border-radius: 3px 3px 0 0; }
.rd-sect { margin-top: 20px; }
.rd-sect__h { font: 400 22px/1.05 var(--display); letter-spacing: .03em; margin-bottom: 8px; }
.rd-sect__n { font-family: var(--mono); font-size: 15px; color: var(--stapler); }
.rd-overview { font: 500 14.5px/1.55 var(--body); }
.rd-list { display: grid; gap: 8px; }
.rd-item { display: flex; gap: 10px; align-items: center; background: var(--paper-hi); border: 2px solid var(--toner); padding: 6px; }
.rd-item img { width: 54px; height: 54px; object-fit: cover; flex: none; border: 1.5px solid var(--toner); }
.rd-item > span { display: flex; flex-direction: column; min-width: 0; }
.rd-item__t { font: 800 14px/1.2 var(--body); }
.rd-item__d { font: 400 12.5px/1.3 var(--body); color: var(--smudge); }
.rd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rd-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--toner); background: #fff; padding: 3px; }
.rd-cta { margin-top: 24px; }
.rd-src { display: block; font: 400 11px/1.4 var(--mono); color: var(--smudge); margin-top: 14px; text-align: center; }
@media (max-width: 899px) {
  .resort-drawer__swipe.is-flash { display: block; position: absolute; z-index: 4; left: 50%; bottom: 20px; translate: -50% 0; background: var(--toner); color: var(--highlight); font: 700 12px/1 var(--mono); padding: 10px 12px; border-radius: 6px; white-space: nowrap; animation: hint 2.8s ease forwards; }
  @keyframes hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* ====================== reduced motion ====================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hl::before { transform: scaleX(1) rotate(-1deg); }
  .checks__box svg { stroke-dashoffset: 0; }
  .copy-frame__scan { display: none; }
  .sheet, .sheet.is-open { transform: none; opacity: 1; }
}