/* Hole lot of fun · shared styles (Big Screen direction) */
:root {
  --cream: #f4ecd8;
  --paper: #fffaf0;
  --pine: #0f3d2e;
  --ink: #111714;
  --fair: #2e7d5b;
  --fair-d: #256a4c;
  --flag: #f5c542;
  --clay: #e8642c;
  --sky: #7fb6e6;
  --display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --script: "Yellowtail", "Brush Script MT", cursive;
  --body: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --wrap: min(1280px, calc(100% - 40px));
  --pop: .06em .06em 0 var(--clay);
  --edge: 3px solid var(--pine);
  --foot-bg: #0a2219;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; overflow-x: clip; }
body { background: var(--cream); color: var(--pine); font: 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; border-radius: 8px; }
.on-dark :focus-visible { outline-color: var(--flag); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--flag); padding: 10px 16px; border-radius: 999px; border: var(--edge); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* grain, like Koto */
body::after { content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { width: var(--wrap); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: .92; text-transform: uppercase; text-wrap: balance; font-variation-settings: "wdth" 108; letter-spacing: -.005em; }
h1, h2 { text-shadow: var(--pop); }
.script { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--clay); text-shadow: .045em .045em 0 var(--pine); font-variation-settings: normal; display: inline-block; line-height: .8; padding-right: .08em; }
.slant { display: inline-block; transform: skewX(-9deg); }
.kicker { display: inline-flex; align-items: center; gap: 9px; font: 700 12.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; padding: 9px 15px 9px 11px; border-radius: 999px; border: 2.5px solid currentColor; }
.kicker::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid currentColor; flex: none; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; }
section { position: relative; }
.pad { padding-block: clamp(76px, 9vw, 136px); }

/* buttons and pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 999px; border: var(--edge); cursor: pointer;
  font: 600 19px/1 var(--display); font-variation-settings: "wdth" 104; text-decoration: none; white-space: nowrap; user-select: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .2s; }
.btn-flag { background: var(--flag); color: var(--pine); box-shadow: 5px 5px 0 var(--pine); }
.btn-flag:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pine); }
.btn-flag:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--pine); }
.btn-ghost { background: var(--paper); color: var(--pine); box-shadow: 5px 5px 0 var(--pine); }
.btn-ghost:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--pine); background: #fff; }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translate(3px, -3px); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 2.5px solid var(--pine); font: 600 15px/1 var(--display); text-decoration: none; background: var(--paper); transition: background .2s, transform .3s var(--ease); }
.pill:hover { background: var(--flag); transform: translateY(-2px); }
kbd { font: 700 .8em/1 var(--body); padding: .35em .55em .3em; border-radius: 7px; background: var(--paper); border: 2px solid var(--pine); box-shadow: 0 2px 0 var(--pine); }
.sticker { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 2.5px solid var(--pine); box-shadow: 3px 3px 0 var(--pine); font: 600 15px/1.1 var(--display); background: var(--paper); }
.sticker svg { width: 16px; height: 16px; fill: currentColor; }

/* nav */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(244, 236, 216, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: var(--edge); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 96px; }
.brand img { height: 88px; width: auto; }
.nav-links { display: flex; gap: 8px; }
.nav .btn { padding: 12px 20px; font-size: 17px; box-shadow: 4px 4px 0 var(--pine); }

/* hero */
.hero { padding: clamp(36px, 4.5vw, 64px) 0 clamp(40px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(52px, 5.7vw, 92px); margin: 22px 0 24px; font-variation-settings: "wdth" 96; }
.hero h1 .script { font-size: 1.32em; display: block; margin-top: -.02em; transform: rotate(-4deg); transform-origin: left center; }
.hero .lede { max-width: 31ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-stickers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-stickers .sticker:nth-child(1) { background: var(--sky); transform: rotate(-3deg); }
.hero-stickers .sticker:nth-child(2) { background: var(--flag); transform: rotate(2deg); }
.hero-stickers .sticker:nth-child(3) { transform: rotate(-1.5deg); }

/* the bay: inflatable frame around the big screen */
.bay { position: relative; background: var(--fair); border: var(--edge); border-radius: 46% 46% 40px 40px / 92px 92px 40px 40px;
  padding: clamp(58px, 6.4vw, 84px) clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px);
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, .2), inset 0 -9px 0 rgba(0, 0, 0, .16), 9px 9px 0 var(--pine); color: var(--cream); }
.bay::before { content: ""; position: absolute; inset: 10px 10px auto; height: 52%; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1.5px), rgba(15, 61, 46, .22) calc(12.5% - 1.5px) 12.5%);
  -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%); }
.burst { position: absolute; z-index: 3; left: -46px; top: -58px; width: 124px; height: 124px; display: grid; place-items: center; text-align: center; transform: rotate(-12deg); }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.burst span { position: relative; font: 700 15px/1 var(--display); font-variation-settings: "wdth" 96; color: var(--pine); text-transform: uppercase; }
.burst span b { display: block; font-size: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }
.hud { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: nowrap; padding-left: clamp(40px, 5vw, 64px); }
.hud-title { font: 700 clamp(16px, 1.55vw, 22px)/1 var(--display); white-space: nowrap; font-variation-settings: "wdth" 112; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.hud-title .slant { color: var(--flag); text-shadow: 2px 2px 0 var(--pine); }
.live { width: 10px; height: 10px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 3px rgba(232, 100, 44, .35); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.chips { display: flex; gap: 6px; }
.chips .chip-hud:first-child { min-width: 0; }
.chip-hud { font: 600 12px/1 var(--body); letter-spacing: .05em; text-transform: uppercase; padding: 7px 10px; min-width: 9.6em; text-align: center; border-radius: 999px; background: rgba(15, 61, 46, .55); border: 2px solid rgba(244, 236, 216, .35); white-space: nowrap; }
.screen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: var(--edge); background: #0b2a20; box-shadow: 0 0 0 6px #0b2a20; }
.screen canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.controls { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 16px; margin-top: 18px; align-items: stretch; }
.swing-row { display: flex; align-items: center; gap: 14px; }
.meter { flex: 1; height: 22px; border-radius: 999px; border: var(--edge); background: var(--paper); overflow: hidden; position: relative; }
.meter i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--flag), var(--clay)); border-right: 3px solid var(--pine); }
.meter i[style*="--p: 0;"], .meter i:not([style]) { border-right: 0; }
.btn-swing { padding: 15px 22px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn-swing.is-charging { background: var(--clay); color: var(--paper); transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--pine); }
.result { margin-top: 12px; min-height: 3.1em; font-size: 15.5px; line-height: 1.4; color: var(--cream); }
.result kbd { color: var(--pine); }
.board { background: var(--flag); color: var(--pine); border: var(--edge); border-radius: 20px; padding: 12px 14px 10px; transform: rotate(2deg); box-shadow: 4px 4px 0 var(--pine); }
.board h2 { font-size: 17px; text-shadow: none; display: flex; justify-content: space-between; align-items: baseline; }
.board h2 small { font: 600 11px/1 var(--body); letter-spacing: .08em; }
.board ol { margin-top: 8px; display: grid; gap: 4px; }
.board li { display: flex; align-items: center; gap: 9px; font: 600 16px/1.2 var(--display); font-variation-settings: "wdth" 104; }
.board li .pos { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--paper); border: 2px solid var(--pine); flex: none; }
.board li .yd { margin-left: auto; }
.board li.empty { opacity: .55; }
.board button { margin-top: 6px; background: none; border: 0; font: 600 12px/1 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; color: var(--pine); }

/* marquee ribbons */
.ribbons { position: relative; height: clamp(118px, 11vw, 150px); overflow: hidden; margin-top: 0; }
.ribbon { position: absolute; left: -5%; width: 110%; border-block: var(--edge); overflow: hidden; }
.ribbon.a { top: 20%; background: var(--clay); color: var(--paper); transform: rotate(-2.4deg); z-index: 2; }
.ribbon.b { top: 30%; background: var(--flag); color: var(--pine); transform: rotate(2deg); }
.track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.ribbon.b .track { animation-direction: reverse; animation-duration: 42s; }
.track span { display: inline-flex; align-items: center; gap: 22px; padding: 14px 22px 14px 0; font: 700 clamp(22px, 2.4vw, 32px)/1 var(--display); font-variation-settings: "wdth" 115; text-transform: uppercase; white-space: nowrap; }
.track span i { font-style: normal; display: inline-block; transform: skewX(-9deg); }
.track svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ribbon.a .track svg { fill: var(--flag); }
.ribbon.b .track svg { fill: var(--clay); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* occasions */
.sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head h2 { font-size: clamp(44px, 5.4vw, 84px); margin-top: 18px; }
.sec-head .lede { max-width: 34ch; justify-self: end; text-wrap: pretty; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.tile { display: flex; flex-direction: column; border: var(--edge); border-radius: 30px; padding: 20px 20px 22px; box-shadow: 6px 6px 0 var(--pine); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tile:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 9px 9px 0 var(--pine); }
.tile .art { aspect-ratio: 3 / 2; margin: 0 -4px 14px; border-radius: 20px; background: rgba(255, 250, 240, .35); border: 2.5px solid rgba(15, 61, 46, .25); overflow: hidden; }
.tile .art svg { width: 100%; height: 100%; }
.tile .kick { font: 700 12px/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.tile h3 { font-size: clamp(36px, 2.9vw, 46px); margin: 8px 0 12px; font-variation-settings: "wdth" 98; }
.tile p { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
.tile .pill { margin-top: auto; align-self: flex-start; }
.t-sky { background: var(--sky); color: var(--pine); }
.t-flag { background: var(--flag); color: var(--pine); }
.t-fair { background: var(--fair-d); color: var(--cream); }
.t-fair .art { background: rgba(15, 61, 46, .3); border-color: rgba(244, 236, 216, .25); }
.t-fair .pill { color: var(--pine); }
.t-clay { background: var(--clay); color: var(--ink); }

/* everyone */
.everyone { background: var(--flag); border-block: var(--edge); text-align: center; overflow: hidden; }
.everyone h2 { font-size: clamp(58px, 9.6vw, 156px); margin: 22px 0 0; }
.everyone h2 .script { font-size: .78em; display: block; transform: rotate(-3deg); margin-top: -.05em; }
.everyone .lede { max-width: 40ch; margin: clamp(30px, 3.5vw, 48px) auto 0; text-wrap: balance; }
.everyone .lede + .lede { margin-top: 10px; }
.everyone .lede strong { font-weight: 700; }
.spark { position: absolute; fill: var(--paper); stroke: var(--pine); stroke-width: 1.4; }

/* what turns up */
.kit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.kit-art { position: relative; }
.kit-art svg { width: 100%; height: auto; }
.kit h2 { font-size: clamp(42px, 4.8vw, 74px); margin: 18px 0 18px; }
.kit .points { display: grid; gap: 14px; margin-top: 24px; }
.kit .points p { padding-left: 18px; border-left: 4px solid var(--clay); }
.kit .points strong { font-family: var(--display); font-weight: 600; font-size: 1.12em; }
.kit-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kit-list li { display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px 11px 12px; border-radius: 999px; border: var(--edge); box-shadow: 3px 3px 0 var(--pine); font: 600 17px/1 var(--display); font-variation-settings: "wdth" 104; background: var(--paper); }
.kit-list li:nth-child(4n+1) { background: var(--sky); transform: rotate(-1.5deg); }
.kit-list li:nth-child(4n+2) { background: var(--flag); transform: rotate(1deg); }
.kit-list li:nth-child(4n+3) { background: var(--paper); transform: rotate(-.5deg); }
.kit-list li:nth-child(4n+4) { background: #f6b896; transform: rotate(1.5deg); }
.kit-list svg { width: 22px; height: 22px; flex: none; }
/* hover: tile pops up and straightens, shadow grows, icon wiggles. The ::after keeps the hover area still while the tile lifts, so it can't flicker. */
.kit-list li { position: relative; cursor: default; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .2s ease; }
.kit-list li::after { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) {
  .kit-list li:hover { transform: translateY(-4px) rotate(0deg) scale(1.06); box-shadow: 5px 7px 0 var(--pine); }
  .kit-list li:hover svg { animation: kit-icon .55s cubic-bezier(.3, 1.6, .5, 1) 1; }
}
@keyframes kit-icon { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-16deg) scale(1.3); } 60% { transform: rotate(10deg) scale(1.2); } 100% { transform: rotate(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .kit-list li, .kit-list li:hover { transition: none; transform: none; } .kit-list li:hover svg { animation: none; } }

/* how it works */
.how { background: var(--pine); color: var(--cream); }
.how h2 { font-size: clamp(46px, 5.6vw, 88px); margin-top: 18px; }
.how h2 .script { color: var(--flag); text-shadow: .045em .045em 0 var(--clay); }
.how .kicker { color: var(--flag); }
.steps-wrap { position: relative; margin-top: clamp(120px, 11vw, 150px); }
.flight { position: absolute; z-index: 2; left: 7%; width: 86%; top: -142px; height: 200px; overflow: visible; pointer-events: none; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.step { border: 3px solid var(--cream); border-radius: 30px; padding: 26px 26px 30px; color: var(--pine); box-shadow: 7px 7px 0 rgba(244, 236, 216, .22); }
.step:nth-child(1) { background: var(--flag); }
.step:nth-child(2) { background: var(--sky); transform: translateY(28px); }
.step:nth-child(3) { background: #f6b896; }
.ball-num { width: 78px; height: 78px; margin-bottom: 22px; }
.step h3 { font-size: clamp(28px, 2.4vw, 36px); text-transform: none; line-height: 1; margin-bottom: 10px; }
.step p { font-size: 17px; }

/* price */
.price .sec-head { margin-bottom: clamp(30px, 4vw, 48px); }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); background: var(--paper); border: var(--edge); border-radius: 34px; box-shadow: 9px 9px 0 var(--pine); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: calc(41% - 20px); width: 40px; height: 40px; border-radius: 50%; background: var(--cream); border: var(--edge); z-index: 2; }
.ticket::before { top: -21px; clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: -21px; clip-path: inset(0 0 50% 0); }
.stub { background: var(--flag); border-radius: 31px 0 0 31px; border-right: 3px dashed var(--pine); padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.stub .from { font: 700 15px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.stub .big { font: 700 clamp(96px, 11vw, 168px)/.85 var(--display); font-variation-settings: "wdth" 112; text-shadow: .05em .05em 0 var(--clay); display: block; transform: skewX(-8deg); margin: 10px 0 18px -4px; }
.stub p { max-width: 30ch; font-size: 16px; }
.incl { padding: clamp(26px, 3.5vw, 48px) clamp(24px, 3.5vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.incl li { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; font: 600 clamp(18px, 1.7vw, 22px)/1.25 var(--display); font-variation-settings: "wdth" 102; }
.incl li + li { border-top: 2px solid rgba(15, 61, 46, .12); }
.incl li .dots { flex: 1; border-bottom: 3px dotted rgba(15, 61, 46, .35); transform: translateY(-5px); min-width: 20px; }
.incl li b { font-weight: 600; white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--pine); background: #cfe9d9; font-size: .82em; }
.incl li b.alt { background: var(--sky); }
.ticket .burst { left: auto; right: -30px; top: -78px; width: 132px; height: 132px; transform: rotate(10deg); }

/* faq */
.faq { background: var(--sky); border-block: var(--edge); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq h2 { font-size: clamp(46px, 5.4vw, 84px); margin: 18px 0 18px; }
.faq-side { position: sticky; top: 136px; }
.qs { display: grid; gap: 16px; }
details { background: var(--paper); border: var(--edge); border-radius: 26px; box-shadow: 5px 5px 0 var(--pine); transition: background .2s; }
details[open] { background: #fff; }
summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px 20px 26px; font: 600 clamp(20px, 1.8vw, 25px)/1.15 var(--display); font-variation-settings: "wdth" 104; border-radius: 23px; }
summary::-webkit-details-marker { display: none; }
summary .plus { width: 40px; height: 40px; flex: none; border-radius: 50%; border: var(--edge); background: var(--flag); display: grid; place-items: center; transition: transform .35s var(--ease), background .2s; }
summary .plus svg { width: 16px; height: 16px; stroke: var(--pine); stroke-width: 3.2; stroke-linecap: round; }
details[open] summary .plus { transform: rotate(135deg); background: var(--clay); }
details .ans { padding: 0 26px 24px; max-width: 58ch; font-size: 17px; }

/* quote */
.quote { background: var(--fair-d); color: var(--cream); }
.quote-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.quote .kicker { color: var(--flag); }
.quote h2 { font-size: clamp(52px, 6.4vw, 104px); margin: 18px 0 22px; text-shadow: .06em .06em 0 var(--pine); }
.quote h2 .script { color: var(--flag); text-shadow: .045em .045em 0 var(--clay); }
.quote .lede { max-width: 36ch; }
.call { margin-top: 26px; font-size: 18px; }
.call a { font: 700 26px/1.2 var(--display); text-decoration: none; border-bottom: 3px solid var(--flag); }
.form { background: var(--paper); color: var(--pine); border: var(--edge); border-radius: 34px; padding: clamp(24px, 3vw, 40px); box-shadow: 10px 10px 0 var(--clay); }
.form fieldset { border: 0; }
.form legend, .form .lbl { display: block; font: 700 12.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.chips-r { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 11px 17px; border-radius: 999px; border: 2.5px solid var(--pine); font: 600 16px/1 var(--display); font-variation-settings: "wdth" 102; background: #fff; transition: background .2s, color .2s, transform .25s var(--ease); }
.chip:hover span { background: #fdf0c7; }
.chip input:checked + span { background: var(--pine); color: var(--cream); transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--clay); }
.chip input:focus-visible + span { outline: 3px solid var(--clay); outline-offset: 3px; }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.field { display: flex; flex-direction: column; }
.field + .field { margin-top: 0; }
.form .full { margin-top: 20px; }
.form input[type=date], .form input[type=text] { width: 100%; min-width: 0; display: block; -webkit-appearance: none; appearance: none; padding: 15px 16px; border-radius: 16px; border: var(--edge); background: #fff; font-size: 17px; color: var(--pine); min-height: 56px; }
.form input:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.form input::placeholder { color: rgba(15, 61, 46, .45); }
.form .btn { width: 100%; margin-top: 26px; font-size: 21px; padding: 19px 26px; }
.note { margin-top: 14px; font-size: 14.5px; text-align: center; opacity: .8; }

/* ---------- multi-page bits ---------- */
.nav-links a[aria-current="page"] { background: var(--pine); color: var(--cream); }

/* closing band on home + about: points at the quote page */
.cta-band { background: var(--fair-d); color: var(--cream); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.cta-band .kicker { color: var(--flag); }
.cta-band h2 { font-size: clamp(52px, 6.4vw, 104px); margin: 18px 0 22px; text-shadow: .06em .06em 0 var(--pine); }
.cta-band h2 .script { color: var(--flag); text-shadow: .045em .045em 0 var(--clay); }
.cta-band .lede { max-width: 38ch; }
.cta-actions { display: grid; gap: 14px; justify-items: stretch; }
.cta-actions .btn { width: 100%; }
.btn-xl { font-size: 23px; padding: 22px 30px; }
.cta-actions .note { text-align: left; color: rgba(244, 236, 216, .8); margin-top: 2px; }
.btn-dark { background: var(--pine); color: var(--cream); border-color: var(--cream); box-shadow: 5px 5px 0 var(--flag); }
.btn-dark:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--flag); }

/* ---------- page heads (quote + about) ---------- */
.page-head { padding: clamp(48px, 6vw, 88px) 0 clamp(36px, 4vw, 56px); position: relative; }
.page-head h1 { font-size: clamp(56px, 7.4vw, 124px); margin: 22px 0 22px; }
.page-head h1 .script { font-size: .8em; }
.page-head .lede { max-width: 46ch; }
.crumbs { display: flex; gap: 8px; align-items: center; font: 600 15px/1 var(--display); }
.crumbs a { text-decoration: none; opacity: .7; }
.crumbs a:hover { opacity: 1; text-decoration: underline; }

/* ---------- quote page ---------- */
.q-wrap { padding-bottom: clamp(80px, 9vw, 136px); }
.q-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.q-grid .form { display: flex; flex-direction: column; gap: 22px; padding: 32px 28px; border-radius: 28px; box-shadow: 8px 8px 0 var(--pine); }
.form h2.form-title { font-size: clamp(30px, 3vw, 40px); margin-bottom: 26px; text-shadow: .06em .06em 0 var(--flag); }
.form .step-n { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--flag); border: 2px solid var(--pine);
  font: 700 13px/1 var(--display); letter-spacing: 0; vertical-align: middle; }
.form .group + .group { margin-top: 28px; }
.side { position: sticky; top: 128px; display: grid; gap: 18px; }
.side-card { background: var(--pine); color: var(--cream); border: var(--edge); border-radius: 30px; padding: clamp(22px, 2.6vw, 32px); box-shadow: 8px 8px 0 var(--flag); }
.side-card h3 { font-size: 26px; margin-bottom: 16px; color: var(--flag); }
.next { display: grid; gap: 16px; counter-reset: n; }
.next li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.next li::before { counter-increment: n; content: counter(n); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--flag); color: var(--pine);
  font: 700 16px/1 var(--display); border: 2.5px solid var(--cream); }
.next b { display: block; font: 600 18px/1.2 var(--display); margin-bottom: 3px; }
.next span { color: rgba(244, 236, 216, .8); font-size: 15.5px; }
.promise { display: flex; flex-wrap: wrap; gap: 8px; }
.promise li { font: 600 14.5px/1 var(--display); padding: 9px 13px; border-radius: 999px; background: var(--paper); border: 2.5px solid var(--pine); box-shadow: 3px 3px 0 var(--pine); }
.side .call { margin-top: 0; padding: 20px 24px; border-radius: 24px; border: var(--edge); background: var(--flag); box-shadow: 6px 6px 0 var(--pine); }
.side .call a { border-color: var(--pine); }
.q-faq { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- branded date picker ---------- */
.dp { position: relative; }
.dp-field { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px 13px 16px; border-radius: 16px; border: var(--edge);
  background: #fff; color: var(--pine); font: 500 17px/1.2 var(--body); text-align: left; cursor: pointer; transition: background .2s, box-shadow .25s var(--ease); }
.dp-field:hover { background: #fdf6e1; }
.dp-field[aria-expanded="true"] { box-shadow: 4px 4px 0 var(--pine); background: #fdf6e1; }
.dp-field:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.dp-val.is-empty { color: rgba(15, 61, 46, .45); }
.dp-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--flag); border: 2.5px solid var(--pine); }
.dp-ico svg { width: 18px; height: 18px; }
.dp-pop { position: absolute; z-index: 40; top: calc(100% + 12px); left: 0; width: 344px; max-width: calc(100vw - 32px); background: var(--paper); color: var(--pine);
  border: var(--edge); border-radius: 26px; padding: 16px 16px 14px; box-shadow: 8px 8px 0 var(--pine); transform-origin: 30px -10px; }
.dp-pop[hidden] { display: none; }
.dp-pop.is-open { animation: dp-in .32s var(--ease); }
@keyframes dp-in { from { opacity: 0; transform: translateY(-8px) scale(.96) rotate(-1deg); } to { opacity: 1; transform: none; } }
.dp-pop::before { content: ""; position: absolute; top: -10px; left: 34px; width: 16px; height: 16px; background: var(--paper); border-left: var(--edge); border-top: var(--edge); transform: rotate(45deg); border-radius: 4px 0 0 0; }
.dp-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; gap: 8px; margin-bottom: 10px; }
.dp-title { text-align: center; font: 700 22px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; text-shadow: .06em .06em 0 var(--flag); }
.dp-nav { width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--pine); background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 3px 3px 0 var(--pine);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.dp-nav:hover:not(:disabled) { background: var(--flag); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pine); }
.dp-nav:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pine); }
.dp-nav:disabled { opacity: .3; cursor: default; box-shadow: none; }
.dp-nav svg { width: 18px; height: 18px; }
.dp-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.dp-grid th { font: 700 11.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 8px 0 6px; opacity: .6; }
.dp-grid th.we { color: var(--clay); opacity: .9; }
.dp-grid td { padding: 0; text-align: center; }
.dp-day { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: none; color: var(--pine); cursor: pointer;
  font: 600 16px/1 var(--display); font-variation-settings: "wdth" 100; display: grid; place-items: center; position: relative; transition: background .15s, transform .2s var(--ease), border-color .15s; }
.dp-day:hover:not(:disabled) { background: #fdf0c7; border-color: var(--pine); }
.dp-day.is-we { background: rgba(232, 100, 44, .08); }
.dp-day.is-today::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--clay); }
.dp-day.is-out { opacity: .35; }
.dp-day:disabled { color: rgba(15, 61, 46, .28); cursor: not-allowed; background: none; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(15, 61, 46, .2); }
.dp-day[aria-selected="true"] { background: var(--flag); border: 2.5px solid var(--pine); box-shadow: 2px 2px 0 var(--pine); transform: rotate(-4deg) scale(1.04); color: var(--pine); }
/* the pin: a tiny flag pops up on the chosen day */
.dp-day[aria-selected="true"]::before { content: ""; position: absolute; top: -9px; right: 2px; width: 2px; height: 14px; background: var(--pine); border-radius: 2px; }
.dp-day[aria-selected="true"]::after { content: ""; position: absolute; top: -9px; right: -7px; width: 9px; height: 7px; background: var(--clay); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dp-day:focus-visible { outline: 3px solid var(--clay); outline-offset: 1px; }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 2px dashed rgba(15, 61, 46, .18); }
.dp-hint { font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.dp-hint svg { width: 13px; height: 13px; fill: var(--flag); stroke: var(--pine); stroke-width: 1.5; }
.dp-clear { font: 600 14px/1 var(--display); background: none; border: 0; padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--pine); }
html.dp-open main { z-index: 70; }          /* lift the page layer above the sticky nav while the sheet is open */
.dp-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(15, 61, 46, .4); display: none; }
@media (max-width: 560px) {
  .dp-pop { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; max-width: none; border-radius: 28px; padding-bottom: 18px; z-index: 210; }
  .dp-pop::before { display: none; }
  .dp-pop.is-open { animation: dp-up .38s var(--ease); }
  @keyframes dp-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .dp-scrim.is-on { display: block; z-index: 205; }
  .dp-day { font-size: 17px; }
}

/* ---------- about page ---------- */
.about-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.story { background: var(--paper); border-block: var(--edge); }
.story-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.story h2, .promises h2, .patch h2 { font-size: clamp(44px, 5.4vw, 84px); margin: 18px 0 0; }
.story-copy { display: grid; gap: 18px; font-size: clamp(18px, 1.4vw, 21px); }
.draft { position: relative; padding: 22px 24px 20px; border-radius: 22px; border: 2.5px dashed var(--clay); background: #fff5ec; font-size: 16px; }
.draft b { display: block; font: 700 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--clay); margin-bottom: 10px; }
.draft ul { list-style: disc; padding-left: 20px; display: grid; gap: 6px; }
.promises .tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(32px, 4vw, 52px); }
.promise-card { border: var(--edge); border-radius: 28px; padding: 26px 22px 24px; box-shadow: 6px 6px 0 var(--pine); display: grid; gap: 12px; align-content: start; }
.promise-card:nth-child(1) { background: var(--sky); }
.promise-card:nth-child(2) { background: var(--flag); transform: rotate(.6deg); }
.promise-card:nth-child(3) { background: #fffaf0; }
.promise-card:nth-child(4) { background: var(--clay); color: var(--ink); transform: rotate(-.6deg); }
.promise-card .ico { width: 54px; height: 54px; border-radius: 16px; background: var(--paper); border: 2.5px solid var(--pine); display: grid; place-items: center; }
.promise-card .ico svg { width: 30px; height: 30px; }
.promise-card h3 { font-size: 27px; }
.promise-card p { font-size: 16px; }
.patch { background: var(--sky); border-block: var(--edge); }
.patch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.patch .lede { margin-top: 20px; max-width: 40ch; }
.radius { position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; margin-inline: auto; }
.radius svg { width: 100%; height: 100%; }
@media (max-width: 1040px) {
  .q-grid, .cta-grid, .about-head .wrap, .story-grid, .patch-grid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .promises .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .promises .tiles4 { grid-template-columns: minmax(0, 1fr); }
  .promise-card { transform: none !important; }
}

/* smooth scroll: Lenis base styles (lenis@1.3.23/dist/lenis.css), same setup as askclara.com */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }   /* Lenis does the easing; native smooth-scroll would fight it */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* footer reveal, after askclara.com: the page is a card that lifts off a fixed footer.
   main sits above (z 10) with a rounded bottom + soft shadow, and a bottom margin equal
   to the footer's height (--foot-h, measured in JS) so the footer is uncovered as you reach the end. */
main { position: relative; z-index: 10; background: var(--cream); margin-bottom: var(--foot-h, 0px);
  border-radius: 0 0 32px 32px; overflow: clip; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.foot { --foot-bg: #0a2219; position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; background: var(--foot-bg); color: var(--cream);
  padding: clamp(96px, 9vw, 128px) 0 28px; overflow: hidden; isolation: isolate;
  box-shadow: 0 -48px 0 var(--foot-bg); }          /* fills the gap behind main's rounded bottom corners */
.foot.is-static { position: relative; }               /* footer taller than the screen: just let it scroll */
.foot::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .45; mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E") 0 0 / 180px 180px; }
.foot > .wrap { position: relative; z-index: 2; }
.foot-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.foot-mark { position: relative; display: grid; place-items: center; width: clamp(200px, 20vw, 260px); }
.foot-mark img { position: relative; width: 100%; height: auto; }
.foot-say { font: 700 clamp(40px, 5.2vw, 80px)/.92 var(--display); font-variation-settings: "wdth" 112; text-transform: uppercase; text-shadow: .06em .06em 0 var(--clay); }
.foot-say .script { color: var(--flag); font-size: 1.05em; text-shadow: .045em .045em 0 var(--clay); }
.foot-cols { display: flex; flex-wrap: wrap; gap: 28px clamp(40px, 6vw, 88px); margin-top: clamp(30px, 3.4vw, 44px); }
.foot-cols h4 { margin-bottom: 16px; font: 700 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 236, 216, .45); }
.foot-cols ul { display: grid; gap: 11px; }
.foot-cols a, .foot-cols li { color: rgba(244, 236, 216, .75); text-decoration: none; font-size: 16px; transition: color .2s; }
.foot-cols a:hover { color: var(--flag); }
.foot-base { margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid rgba(244, 236, 216, .12); font-size: 13.5px; color: rgba(244, 236, 216, .45);
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; }
.foot-base a { color: rgba(244, 236, 216, .7); }

/* reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.step.rv.in:nth-child(2) { transform: translateY(28px); }

/* responsive */
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .art { aspect-ratio: 16 / 9; }
}
@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(54px, 10vw, 96px); }
  .hero .lede { max-width: 40ch; }
  .bay-col { max-width: 760px; width: 100%; margin-inline: auto; }
  .kit-grid, .faq-grid, .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-side { position: static; }
  .kit-art { max-width: 560px; margin-inline: auto; width: 100%; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .sec-head .lede { justify-self: start; }
  .foot-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(2), .step.rv.in:nth-child(2) { transform: none; }
  .flight { display: none; }
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .stub { border-right: 0; border-bottom: 3px dashed var(--pine); border-radius: 31px 31px 0 0; }
  .ticket::before, .ticket::after { top: auto; bottom: auto; left: auto; }
  .ticket::before { display: none; }
  .ticket::after { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav .wrap { height: 80px; }
  .brand img { height: 72px; }
  .nav .btn { padding: 10px 15px; font-size: 15px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .controls { grid-template-columns: minmax(0, 1fr); }
  .board { transform: rotate(1deg); }
  .bay { border-radius: 44% 44% 28px 28px / 60px 60px 28px 28px; }
  .burst { left: -2px; top: -50px; width: 96px; height: 96px; }
  .hud { padding-left: 84px; }
  .burst span { font-size: 13px; }
  .burst span b { font-size: 18px; }
  .chips .chip-hud:first-child { display: none; }
  .swing-row { flex-wrap: wrap; }
  .meter { flex-basis: 100%; }
  .btn-swing { width: 100%; }
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .incl li { flex-wrap: wrap; }
  .incl li .dots { display: none; }
  .incl li b { margin-left: auto; }
  .ticket .burst { right: 6px; top: -60px; width: 108px; height: 108px; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero h1 { font-size: clamp(44px, 13vw, 60px); }
  .kicker { font-size: 11px; letter-spacing: .12em; }
  main { border-radius: 0 0 24px 24px; }
  .foot { padding-top: 72px; }
  .foot-mark { width: 180px; }
  .foot-cols { gap: 28px 36px; }
  .foot-cols > div { min-width: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track, .burst svg, .live { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn, .tile, .pill, summary .plus, .chip span { transition: none; }
}


/* ===== mobile menu (shown at 860px and below, where the header links are hidden) ===== */
.nav-toggle { display: none; flex: none; width: 46px; height: 46px; padding: 0; place-items: center; border-radius: 50%; border: 2.5px solid var(--pine); background: var(--paper); box-shadow: 3px 3px 0 var(--pine); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--pine); transition: transform .25s ease, background .2s ease; }
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after { top: 7px; }
.nav.is-open .nav-toggle { background: var(--flag); }
.nav.is-open .nav-toggle .bars { background: transparent; }
.nav.is-open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav .wrap { gap: 10px; }
  .nav .btn { margin-left: auto; }
  .nav-links { display: flex; flex-direction: column; gap: 10px; position: absolute; top: 100%; left: 0; right: 0; padding: 16px 20px 22px; background: var(--cream); border-bottom: var(--edge); box-shadow: 0 16px 24px rgba(15, 61, 46, .16);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .nav.is-open .nav-links { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav-links .pill { justify-content: space-between; width: 100%; min-height: 52px; padding: 14px 20px; font-size: 18px; }
  .nav-links .pill::after { content: "\2192"; font-weight: 700; }
}

/* ===== performance: animations only run while on screen ===== */
.is-paused, .is-paused * { animation-play-state: paused !important; }
@media (max-width: 860px), (pointer: coarse) {
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(244, 236, 216, .97); }
  main { box-shadow: none; }
}

/* ===== small-screen polish ===== */
@media (max-width: 1040px) { .bay-col { margin-top: 28px; } }
@media (max-width: 640px) {
  .hero-stickers { margin-bottom: 8px; }
  .form .btn { font-size: 17px; padding-inline: 16px; }
}

/* ===== performance: skip rendering sections that are far off screen; lighter crowd on small screens ===== */
/* (content-visibility removed: its estimated heights made anchor links land in the wrong place) */
@media (max-width: 860px) {
  .crowd .sway, .crowd .clink, .crowd .pump, .crowd .lift { animation: none; }
}

/* compact footer on phones so the page-lifts-off-the-footer reveal fits a phone screen */
@media (max-width: 640px) {
  .foot { padding: 40px 0 18px; }
  .foot-top { gap: 14px; }
  .foot-mark { width: 92px; justify-self: start; }
  .foot-say { font-size: clamp(34px, 10.5vw, 44px); }
  .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 18px; }
  .foot-cols > div { min-width: 0; }
  .foot-cols > div:last-child { grid-column: 1 / -1; }
  .foot-cols h4 { margin-bottom: 8px; font-size: 11px; }
  .foot-cols ul { gap: 6px; }
  .foot-cols a, .foot-cols li { font-size: 14.5px; }
  .foot-cols > div:last-child ul { grid-template-columns: 1fr 1fr; gap: 6px 18px; }
  .foot-base { margin-top: 20px; padding-top: 14px; font-size: 12px; gap: 4px; }
}

/* burst: keep the lettering clear of the spinning points */
.burst { width: 134px; height: 134px; }
.burst span { font-size: 13px; letter-spacing: .01em; }
.burst span b { font-size: 20px; }
.burst span { text-shadow: 0 0 4px #f5c542, 0 0 4px #f5c542, 0 0 2px #f5c542; }
.ticket .burst { width: 140px; height: 140px; }
@media (max-width: 640px) {
  .burst { left: -6px; top: -56px; width: 112px; height: 112px; }
  .burst span { font-size: 11px; }
  .burst span b { font-size: 16px; }
  .ticket .burst { width: 116px; height: 116px; }
  .hud { padding-left: 94px; gap: 6px; }
  .hud-title { font-size: 16px; }
  .chip-hud { white-space: nowrap; }
  .ribbons { height: 156px; }
  .ribbon.a { top: 6%; }
  .ribbon.b { top: 44%; }
}
.burst span b { font-size: 17px; }
@media (max-width: 640px) {
  .burst span { font-size: 10.5px; }
  .burst span b { font-size: 13.5px; }
  .hud { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 640px) { .burst span b { font-size: 12.5px; } .burst span { font-size: 10px; } }
.swing-note { display: none; margin-top: 8px; font-size: 13.5px; color: var(--cream); opacity: .8; text-align: center; }
@media (hover: hover) and (pointer: fine) { .swing-note { display: block; } }

/* quote form: validation + sent state */
.field-err { margin-top: 8px; font-size: 14.5px; font-weight: 600; color: #b3411a; }
.field input[aria-invalid="true"] { border-color: #b3411a; }
.sent { margin-top: 18px; padding: 18px 20px; border-radius: 22px; border: var(--edge); background: var(--flag); box-shadow: 5px 5px 0 var(--pine); display: grid; gap: 4px; }
.sent b { font: 700 22px/1.15 var(--display); }
.sent em { margin-top: 6px; font-size: 13px; font-style: normal; opacity: .75; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn[hidden] { display: none; }


/* Quote form: matches the Framer form */
@media (max-width: 1199px) { .q-grid { grid-template-columns: minmax(0, 1fr); } }
.form legend, .form .lbl { font: 700 14px/1.2 var(--body); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.form legend { margin-bottom: 10px; }
.q-grid .form .chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 14px; border: 2px solid var(--pine); border-radius: 999px; background: var(--cream); transition: background .2s; }
.q-grid .form .chip:hover { background: #fdf0c7; }
.q-grid .form .chip input { position: static; flex: none; width: 18px; height: 18px; margin: 0; opacity: 1; -webkit-appearance: none; appearance: none; border: 2px solid var(--pine); border-radius: 50%; background: #fff; transition: background .2s; }
.q-grid .form .chip input:checked { background: var(--flag); }
.q-grid .form .chip input:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
.q-grid .form .chip span, .q-grid .form .chip:hover span, .q-grid .form .chip input:checked + span { padding: 0; border: 0; background: none; color: var(--pine); box-shadow: none; transform: none; font: 700 15px/1.2 var(--body); font-variation-settings: normal; }
.q-grid .form input[type=date], .q-grid .form input[type=text] { height: 52px; padding: 0 16px; border: 2px solid var(--pine); border-radius: 14px; font: 400 16px/1.2 var(--body); color: var(--pine); }
.q-grid .form input::placeholder { color: #6b7f76; }
.q-grid .form .btn { margin-top: 0; padding: 16px 24px; font: 600 18px/1 var(--display); box-shadow: 4px 4px 0 var(--pine); }
.q-grid .form .note { margin-top: 0; text-align: left; font-size: 14px; color: #4a6a5e; opacity: 1; }
.extra { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 700 15px/1.3 var(--body); }
.extra input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pine); }
.offer { display: grid; gap: 4px; padding: 14px 18px; border: 2px solid var(--pine); border-radius: 14px; background: var(--flag); font-size: 15px; }
.offer b { font: 700 19px/1.15 var(--display); }

.sent[hidden] { display: none; }

/* Hero headline: one phrase per line */
#hero-title .ln { display: block; }
#hero-title .ln .script { display: inline-block; font-size: 1.22em; margin-top: 0; line-height: .8; }

/* What it costs: words in place of a price */
.stub .big.words { font-size: clamp(46px, 4.9vw, 70px); line-height: .98; margin: 14px 0 16px; }
.stub .btn { align-self: flex-start; margin-top: 20px; padding: 13px 22px; font-size: 17px; border-color: var(--pine); box-shadow: 4px 4px 0 var(--clay); }
.stub .btn:hover { box-shadow: 6px 6px 0 var(--clay); }

/* Game: first-go hole-in-one offer */
.ace { display: grid; gap: 4px; justify-items: start; margin-top: 12px; padding: 14px 16px; border: 3px solid var(--flag); border-radius: 18px; background: rgba(15, 61, 46, .75); color: var(--cream); font-size: 15px; }
.ace[hidden], .offer[hidden] { display: none; }
.ace b { font: 700 20px/1.15 var(--display); color: var(--flag); }
.ace .btn { margin-top: 8px; padding: 11px 18px; font-size: 16px; }

/* Occasions: five tiles */
.t-paper { background: var(--paper); color: var(--pine); }
.t-paper .art svg { overflow: visible; }
@media (min-width: 1181px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .tile { padding: 16px 16px 18px; }
  .tile h3 { font-size: clamp(26px, 2.25vw, 36px); }
}
@media (min-width: 641px) and (max-width: 1180px) {
  .tile.t-paper { grid-column: 1 / -1; }
  .tile.t-paper .art { aspect-ratio: 16 / 5; }
}

/* Header on the narrowest phones: keep the logo's proportions */
.brand img { object-fit: contain; }
@media (max-width: 359px) {
  .nav .btn { padding: 10px 12px; font-size: 14px; }
  .nav .btn .arr { display: none; }
}

/* Indoor or outdoor: photos in a big-screen frame, matching the game */
.setups { position: relative; background: var(--sky); border-block: var(--edge); overflow: hidden; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.setup { margin: 0; padding: 12px 14px 18px; background: var(--fair); border: var(--edge); border-radius: 30px; box-shadow: 8px 8px 0 var(--pine); color: var(--cream); }
.setup:nth-child(1) { rotate: -.6deg; }
.setup:nth-child(2) { rotate: .6deg; }
.setup-hud { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; }
.setup-hud .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 2px var(--pine); flex: none; }
.setup-hud .name { font: 700 clamp(22px, 2.3vw, 30px)/1 var(--display); text-transform: uppercase; color: var(--flag); text-shadow: .06em .06em 0 var(--pine); transform: skewX(-8deg); font-variation-settings: "wdth" 108; }
.setup-screen { padding: 7px; background: var(--pine); border-radius: 20px; }
.setup-screen img { display: block; width: 100%; height: auto; border-radius: 14px; }
.setup figcaption { padding: 14px 8px 0; font-size: 16px; line-height: 1.45; }
@media (max-width: 860px) { .setup-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .setup:nth-child(n) { rotate: none; } }