/* Farmington Bay 2nd Campout — iOS-grade system on the kit palette */
:root{
  --forest:#22382E; --forest-2:#1B2D25; --cream:#F6EED3; --cream-2:#EFE5C6; --paper:#FFFCF3;
  --sage:#7C8359; --sage-2:#A4A979; --rust:#CB6D3D; --rust-2:#B25C31; --sun:#EAB761; --slate:#5E8593; --lodge:#664D3F; --grass:#495D3F;
  --ink:#22382E; --ink-2:#5B6A5A; --hair:rgba(34,56,46,.10); --hair-dark:rgba(246,238,211,.14);
  --pine:var(--forest); --pine-2:var(--grass); --night:var(--forest-2); --fire:var(--rust); --ember:var(--sun); --creek:var(--slate); --canvas:var(--cream); --canvas-2:var(--cream-2); --ink-soft:var(--ink-2); --line:var(--hair); --line-dark:var(--hair-dark);
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --shadow-card:0 1px 2px rgba(34,56,46,.06),0 18px 40px -22px rgba(34,56,46,.30);
  --shadow-float:0 10px 40px rgba(20,32,26,.35),0 2px 8px rgba(20,32,26,.25);
  --ease-out:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.4,.44,1);
  --display:'Barlow Condensed','Arial Narrow',sans-serif; --body:'Manrope',-apple-system,'SF Pro Text',system-ui,sans-serif;
  --tab-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--forest)}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.55;font-size:17px;min-height:100dvh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
main{flex:1}
img,svg,picture{display:block;max-width:100%}
a{color:var(--grass);text-decoration-thickness:1.5px;text-underline-offset:3px}
h1,h2,h3,.display{font-family:var(--display);font-weight:700;line-height:.96;letter-spacing:.005em;color:var(--forest)}
h1{font-size:clamp(52px,11vw,104px);text-transform:uppercase}
h2{font-size:clamp(36px,6vw,58px);text-transform:uppercase;margin-bottom:10px}
h3{font-size:clamp(22px,3vw,27px);line-height:1.05;margin-bottom:4px}
p{max-width:62ch}
.lead{font-size:1.08em;color:var(--ink-2);max-width:56ch;line-height:1.5}
.eyebrow{font:700 13px var(--body);color:var(--sage);margin-bottom:8px;letter-spacing:.01em}
.dark .eyebrow,.pine .eyebrow{color:var(--sage-2)}
.wrap{width:min(100% - 32px,720px);margin-inline:auto}
.wrap.wide{width:min(100% - 32px,1040px)}
section{padding:56px 0}
section.dark{background:var(--forest);color:#E9E3D0}
section.dark h2,section.dark h3{color:var(--cream)}
section.dark .lead{color:#B9C3B0}
section.pine{background:var(--forest);color:#E9E3D0}
section.pine h2,section.pine h3{color:var(--cream)}
section.slate{background:var(--slate);color:#F2F5F0}
section.slate h2,section.slate h3{color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation-duration:.001s!important;transition-duration:.001s!important}}

/* terrain sections: static topo behind copy (no motion cost) */
.topo-cream{background:var(--cream) url(/img/terrain/static/topo-valley-cream.svg) center/100% 100% no-repeat}
.topo-forest{background:var(--forest) url(/img/terrain/static/topo-valley-forest.svg) center/100% 100% no-repeat}
.topo-slate{background:var(--slate) url(/img/terrain/static/topo-creek-slate.svg) center/100% 100% no-repeat}
.divider{display:block;width:100%;height:clamp(96px,17vw,300px);margin:-1px 0;border:0;line-height:0;overflow:hidden;position:relative;z-index:1}
.divider.to-forest{background:var(--forest)}.divider.to-cream{background:var(--cream)}
.divider.forest{height:clamp(160px,26vw,420px)}
.divider img{display:block;width:100%;height:100%}

/* ---- floating pill tab bar ---- */
.tabbar{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));width:min(100% - 24px,440px);height:var(--tab-h);border-radius:999px;background:rgba(34,56,46,.84);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(246,238,211,.14);box-shadow:var(--shadow-float);display:flex;align-items:center;padding:6px}
.tabbar .hl{position:absolute;top:6px;bottom:6px;left:6px;width:60px;border-radius:999px;background:rgba(246,238,211,.16);transition:transform .42s var(--spring),width .3s var(--ease-out);pointer-events:none}
.tabbar a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;border-radius:999px;color:#C4CBB8;text-decoration:none;font:700 11px var(--body);letter-spacing:.01em;transition:color .25s,transform .15s}
.tabbar a:active{transform:scale(.92)}
.tabbar a svg{width:24px;height:24px;transition:transform .35s var(--spring)}
.tabbar a[aria-current]{color:var(--cream)}
.tabbar a[aria-current] svg{color:var(--sun);transform:translateY(-1px)}
.tabbar a.rsvp svg{color:var(--sun)}
body{padding-bottom:calc(var(--tab-h) + 30px + env(safe-area-inset-bottom))}
.tabbar .brand{display:none}
@media (min-width:768px){.tabbar{width:460px;height:68px}.tabbar a{font-size:12px}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;border:0;font:700 16.5px var(--body);cursor:pointer;text-decoration:none;color:#fff;background:var(--rust);transition:transform .16s var(--ease-out),background .16s,box-shadow .16s;box-shadow:0 10px 24px -12px rgba(203,109,61,.7)}
.btn:hover{background:var(--rust-2)}
.btn:active{transform:scale(.96)}
.btn.secondary{background:var(--forest);box-shadow:0 10px 24px -12px rgba(34,56,46,.6)}
.btn.tint{background:rgba(34,56,46,.08);color:var(--forest);box-shadow:none}
.btn.light{background:var(--cream);color:var(--forest);box-shadow:none}
.btn.glass{background:rgba(246,238,211,.16);color:var(--cream);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(246,238,211,.2);box-shadow:none}
.btn.sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:11px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn .cc-icon{width:20px;height:20px}

/* ---- cards & inset lists (iOS grouped) ---- */
.card{background:var(--paper);border-radius:var(--r-lg);padding:20px 20px;border:1px solid var(--hair);box-shadow:var(--shadow-card)}
.dark .card,.pine .card{background:rgba(246,238,211,.06);border-color:var(--hair-dark);box-shadow:none;color:inherit}
.inset{background:var(--paper);border-radius:var(--r-lg);border:1px solid var(--hair);box-shadow:var(--shadow-card);overflow:hidden}
.inset > *{padding:14px 18px;border-bottom:1px solid var(--hair)}
.inset > *:last-child{border-bottom:0}
.dark .inset,.pine .inset{background:rgba(246,238,211,.06);border-color:var(--hair-dark);box-shadow:none}
.dark .inset > *,.pine .inset > *{border-color:var(--hair-dark)}
.row{display:flex;align-items:center;gap:14px}
.row .ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(34,56,46,.07);color:var(--forest)}
.row .ico .cc-icon{width:22px;height:22px}
.dark .row .ico,.pine .row .ico{background:rgba(246,238,211,.1);color:var(--sun)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:800}
.row .t small{display:block;color:var(--ink-2);font-size:14px;line-height:1.4}
.dark .row .t small,.pine .row .t small{color:#B0BAA8}
.grid{display:grid;gap:14px}
@media (min-width:640px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.tag{display:inline-block;padding:3px 10px;border-radius:8px;font-size:12.5px;font-weight:800;background:var(--cream-2);color:var(--forest)}
.tag.night{background:var(--forest);color:var(--sun)}.tag.day{background:#F3E4B8;color:#6B4A00}.tag.fire{background:#F5D9C6;color:#7A2E06}

/* ---- press affordance ---- */
.press{transition:transform .18s var(--ease-out)}
.press:active{transform:scale(.975)}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---- scenes (kit) ---- */
.cc-scene{position:relative;overflow:hidden;aspect-ratio:2048/878;isolation:isolate;margin:0;background:var(--forest)}
.cc-scene>picture,.cc-scene>img,.cc-scene picture img{display:block;width:100%;height:100%;object-fit:cover}
.cc-scene>svg,.cc-scene>.cc-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cc-header{aspect-ratio:1942/809}
.scene-card{border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 60px -30px rgba(20,32,26,.6);border:1px solid var(--hair)}
.dark .scene-card,.pine .scene-card{border-color:var(--hair-dark)}
@media (max-width:640px){.scene-card .cc-scene{aspect-ratio:4/3}.scene-card .cc-scene>svg{display:none}}

/* ---- patches (kit sheets, CSS-cropped) ---- */
.patch{width:88px;aspect-ratio:683/682;display:inline-block;background-repeat:no-repeat;background-size:300% 200%;flex:none;transform-origin:center;filter:drop-shadow(0 6px 10px rgba(20,32,26,.28))}
.patch.lg{width:120px}.patch.sm{width:64px}
.cc-patch-button{border:0;padding:6px;background:transparent;color:inherit;cursor:pointer;border-radius:18px}
.cc-patch-button:active .patch{transform:rotate(4deg) scale(.97)}
.cc-stamp{animation:cc-stamp 520ms cubic-bezier(.2,.8,.25,1) both}
@keyframes cc-stamp{0%{transform:scale(1.35) rotate(-8deg);opacity:0}65%{transform:scale(.96) rotate(1deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.p-timeline-sunset{background-image:url(/img/patches/timeline-sheet.webp);background-position:0% 0%}
.p-timeline-moon-stars{background-image:url(/img/patches/timeline-sheet.webp);background-position:50% 0%}
.p-timeline-campfire{background-image:url(/img/patches/timeline-sheet.webp);background-position:100% 0%}
.p-timeline-sunrise-pancakes{background-image:url(/img/patches/timeline-sheet.webp);background-position:0% 100%}
.p-timeline-packed-truck{background-image:url(/img/patches/timeline-sheet.webp);background-position:50% 100%}
.p-timeline-pine-spare{background-image:url(/img/patches/timeline-sheet.webp);background-position:100% 100%}
.p-merit-kitchen-crew{background-image:url(/img/patches/merit-sheet.webp);background-position:0% 0%}
.p-merit-night-game-captain{background-image:url(/img/patches/merit-sheet.webp);background-position:50% 0%}
.p-merit-shopping-run{background-image:url(/img/patches/merit-sheet.webp);background-position:100% 0%}
.p-merit-cleanup-crew{background-image:url(/img/patches/merit-sheet.webp);background-position:0% 100%}
.p-merit-closing-thought{background-image:url(/img/patches/merit-sheet.webp);background-position:50% 100%}
.p-merit-coffee-stove-spare{background-image:url(/img/patches/merit-sheet.webp);background-position:100% 100%}
.p-place-lodge{background-image:url(/img/patches/places-a-sheet.webp);background-position:0% 0%}
.p-place-cabin{background-image:url(/img/patches/places-a-sheet.webp);background-position:50% 0%}
.p-place-tent-site{background-image:url(/img/patches/places-a-sheet.webp);background-position:100% 0%}
.p-place-amphitheater{background-image:url(/img/patches/places-a-sheet.webp);background-position:0% 100%}
.p-place-river-bridge{background-image:url(/img/patches/places-a-sheet.webp);background-position:50% 100%}
.p-place-ball-field{background-image:url(/img/patches/places-a-sheet.webp);background-position:100% 100%}
.p-place-parking{background-image:url(/img/patches/places-b-sheet.webp);background-position:0% 0%}
.p-place-entrance-sign{background-image:url(/img/patches/places-b-sheet.webp);background-position:50% 0%}
.p-extra-mile-marker{background-image:url(/img/patches/places-b-sheet.webp);background-position:100% 0%}
.p-extra-compass{background-image:url(/img/patches/places-b-sheet.webp);background-position:0% 100%}
.p-extra-volleyball{background-image:url(/img/patches/places-b-sheet.webp);background-position:50% 100%}
.p-extra-basketball{background-image:url(/img/patches/places-b-sheet.webp);background-position:100% 100%}
.p-game-capture-the-flag{background-image:url(/img/patches/games-sheet.webp);background-position:0% 0%}
.p-game-spotlight{background-image:url(/img/patches/games-sheet.webp);background-position:50% 0%}
.p-game-sardines{background-image:url(/img/patches/games-sheet.webp);background-position:100% 0%}
.p-game-kick-the-can{background-image:url(/img/patches/games-sheet.webp);background-position:0% 100%}
.p-game-werewolf{background-image:url(/img/patches/games-sheet.webp);background-position:50% 100%}
.p-game-ghost{background-image:url(/img/patches/games-sheet.webp);background-position:100% 100%}

/* ---- glyph motion (kit) ---- */
.cc-icon{display:inline-block;flex-shrink:0;vertical-align:middle;overflow:visible}
[data-ambient]{--bay2-play-state:paused}
[data-ambient].is-running{--bay2-play-state:running}
[data-ambient] .cc-motion{animation-play-state:paused}
[data-ambient].is-running .cc-motion{animation-play-state:running}
[data-ambient] .cc-flame{animation:cc-flame-morph 1.4s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:12px 19px}
[data-ambient] .cc-rays{animation:cc-ray-turn 48s linear infinite;animation-play-state:paused;transform-origin:12px 12px}
[data-ambient] .cc-drop{animation:cc-raindrop 1.5s linear infinite;animation-play-state:paused}
[data-ambient] .cc-drop-b{animation-delay:-.5s}[data-ambient] .cc-drop-c{animation-delay:-1s}
[data-ambient] .cc-sparkle{animation:cc-frost 4s ease-in-out infinite;animation-play-state:paused;transform-origin:12px 12px}
[data-ambient] .cc-waves{animation:cc-river 3s linear infinite;animation-play-state:paused}
[data-ambient].is-running :is(.cc-flame,.cc-rays,.cc-drop,.cc-sparkle,.cc-waves){animation-play-state:running}
.cc-smoke{animation:cc-smoke-rise 8s ease-out infinite;opacity:0}.cc-smoke.second{animation-delay:-4s}
.cc-scene-flame{animation:cc-scene-flicker 1.7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.cc-cloud-drift{animation:cc-cloud-drift 35s ease-in-out infinite alternate}
.cc-water-shimmer{animation:cc-water-shimmer 6s ease-in-out infinite alternate}
.cc-window-light{animation:cc-window-light 12s ease-in-out infinite alternate}
.cc-wheel{animation:cc-wheel-turn 22s linear infinite;transform-origin:413px 631px}
.cc-beam{position:absolute;left:37.7%;top:72.8%;width:42%;height:45%;background:#eab761;opacity:.16;mask-image:conic-gradient(from 70deg at 0 0,transparent 0deg,#000 3deg,#000 18deg,transparent 21deg);-webkit-mask-image:conic-gradient(from 70deg at 0 0,transparent 0deg,#000 3deg,#000 18deg,transparent 21deg);transform-origin:0 0;animation:cc-beam-sweep 9s ease-in-out infinite alternate;pointer-events:none}
.cc-beam.second{left:51.7%;top:73.1%;animation-duration:12s;animation-delay:-4s}.cc-beam.third{left:62.6%;top:73.5%;animation-duration:15s;animation-delay:-7s}
.cc-bump .cc-vote-arrow{animation:cc-vote-bump 320ms ease-out}
.cc-check-path{stroke-dasharray:30;stroke-dashoffset:0}
.cc-check input:not(:checked)~svg .cc-check-path{stroke-dashoffset:30}
.cc-check input:checked~svg .cc-check-path{animation:cc-check-draw 280ms ease-out}
@keyframes cc-vote-bump{50%{transform:translateY(-3px)}}
@keyframes cc-check-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes cc-flame-morph{from{d:path('M12 3C12 8 6 9 7 14C7 18 10 19 12 19C17 19 19 14 15 10C15 13 12 13 12 3Z');transform:scaleY(.98)}to{d:path('M13 2C11 8 6 10 7 14C7 18 10 19 12 19C17 19 18 14 16 9C15 12 13 12 13 2Z');transform:scaleY(1.03)}}
@keyframes cc-ray-turn{to{transform:rotate(360deg)}}
@keyframes cc-raindrop{0%{transform:translateY(-2px);opacity:0}25%{opacity:1}100%{transform:translateY(3px);opacity:0}}
@keyframes cc-frost{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.92)}}
@keyframes cc-river{to{transform:translateX(-12px)}}
@keyframes cc-smoke-rise{0%{transform:translate(0,10px);opacity:0}30%{opacity:.2}100%{transform:translate(25px,-55px);opacity:0}}
@keyframes cc-scene-flicker{from{transform:scale(.98,.97);opacity:.75}to{transform:scale(1.02,1.05);opacity:1}}
@keyframes cc-cloud-drift{to{transform:translateX(32px)}}
@keyframes cc-water-shimmer{from{opacity:.1;transform:translateX(-4px)}to{opacity:.35;transform:translateX(4px)}}
@keyframes cc-window-light{from{opacity:.06}to{opacity:.16}}
@keyframes cc-wheel-turn{to{transform:rotate(360deg)}}
@keyframes cc-beam-sweep{from{transform:rotate(-7deg);opacity:.10}to{transform:rotate(8deg);opacity:.22}}
@media(prefers-reduced-motion:reduce){.cc-stamp,.cc-bump .cc-vote-arrow,.cc-check-path,[data-ambient] *,#bay2-header .bay2-animated{animation:none!important;transition:none!important}.cc-smoke,.cc-beam{display:none}.cc-check input:checked~svg .cc-check-path{stroke-dashoffset:0}}

/* ---- forms ---- */
label{font-weight:800;display:block;margin-bottom:6px}
input[type=text],input[type=tel],input[type=number],textarea,select{width:100%;font:inherit;font-size:17px;padding:13px 14px;border-radius:var(--r-sm);border:1.5px solid rgba(34,56,46,.16);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--slate);outline:none;box-shadow:0 0 0 4px rgba(94,133,147,.18)}
textarea{min-height:96px;resize:vertical}
.field{margin-bottom:18px}
.hint{font-size:14px;color:var(--ink-2);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:12px;border:1.5px solid rgba(34,56,46,.14);background:#fff;font-weight:700;font-size:15px;user-select:none;transition:transform .15s var(--ease-out),background .15s,color .15s,border-color .15s}
.chip span .cc-icon{width:18px;height:18px}
.chip input:checked+span{background:var(--forest);border-color:var(--forest);color:#fff}
.chip input:active+span{transform:scale(.95)}
.chip input:focus-visible+span{outline:3px solid var(--sun);outline-offset:2px}
.stepper{display:inline-flex;align-items:center;border:1.5px solid rgba(34,56,46,.14);border-radius:12px;background:#fff;overflow:hidden}
.stepper button{width:46px;height:46px;border:0;background:transparent;font:700 24px var(--body);color:var(--forest);cursor:pointer;transition:background .12s}
.stepper button:active{background:rgba(34,56,46,.08)}
.stepper output{min-width:40px;text-align:center;font:700 24px var(--display)}
.msg{padding:14px 16px;border-radius:var(--r-sm);margin-top:14px;font-weight:700}
.msg.ok{background:#DCEBDF;color:#173B26}.msg.err{background:#F6DDD5;color:#7A2E12}

/* ---- sheet (RSVP done) ---- */
.sheet{background:var(--paper);border-radius:var(--r-xl);padding:28px 22px 26px;text-align:center;box-shadow:0 40px 80px -30px rgba(20,32,26,.5);border:1px solid var(--hair);animation:sheet-up .6s var(--spring) both}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:rgba(34,56,46,.18);margin:0 auto 18px}
.sheet .patches{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 6px}
@keyframes sheet-up{from{transform:translateY(40px) scale(.96);opacity:0}to{transform:none;opacity:1}}

/* ---- timeline with patches ---- */
.tl{list-style:none;display:grid;gap:10px}
.tl li{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;background:rgba(246,238,211,.06);border:1px solid var(--hair-dark);border-radius:var(--r-lg);padding:12px 14px}
.tl .patch{width:72px}
.tl time{font-family:var(--display);font-weight:700;font-size:22px;color:var(--sun);display:block;letter-spacing:.01em;text-transform:uppercase}
.tl p{color:#C9D0C0;margin-top:2px;font-size:15.5px}
.tl li.day time{color:#8FC7D6}

/* ---- countdown / weather ---- */
.count{display:flex;gap:8px;flex-wrap:wrap}
.count div{background:rgba(246,238,211,.07);border:1px solid var(--hair-dark);border-radius:14px;min-width:72px;padding:12px 10px;text-align:center}
.count b{display:block;font:700 42px var(--display);color:var(--cream);line-height:1}
.count small{font-size:12px;color:#A9B3A2;font-weight:700}
.count.over{font:700 30px var(--display);color:var(--sun)}
.wx{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wx>div{background:rgba(246,238,211,.07);border:1px solid var(--hair-dark);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:center}
.wx .cc-icon{width:34px;height:34px;color:var(--sun);flex:none}
.wx .d{font-weight:800;color:var(--cream);font-size:14px}
.wx .t{font:700 34px var(--display);color:var(--sun);line-height:1}
.wx .t small{font-size:13px;color:#A9B3A2;font-family:var(--body);font-weight:700}
.wx .r{font-size:13px;color:#B0BAA8}

footer{background:var(--forest);color:#A4A979;padding:28px 0 40px;font-size:14px}
footer a{color:#DDE6E0}
footer .in{width:min(100% - 32px,720px);margin-inline:auto;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}

/* ---- page hero: full-bleed scene to the top edge, title over it, safe-area aware ---- */
.page-hero{position:relative;overflow:hidden;background:var(--forest);min-height:clamp(400px,66vh,580px);display:flex;align-items:flex-end;isolation:isolate}
.page-hero .cc-scene{position:absolute;inset:0;aspect-ratio:auto;height:100%;width:100%}
.page-hero .shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(34,56,46,.28) 0%,rgba(34,56,46,0) 28%,rgba(34,56,46,.12) 52%,rgba(34,56,46,.9) 100%)}
.page-hero .in{position:relative;z-index:2;width:min(100% - 32px,1040px);margin-inline:auto;padding:calc(96px + env(safe-area-inset-top)) 0 28px;color:var(--cream)}
.page-hero h1{color:var(--cream);font-size:clamp(46px,10.5vw,92px);text-shadow:0 2px 24px rgba(0,0,0,.4);max-width:14ch}
.page-hero .lead{color:#E8E1CB;text-shadow:0 1px 14px rgba(0,0,0,.5);margin-top:8px;max-width:50ch}
.page-hero .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.page-hero .in>*{animation:rise .8s var(--ease-out) both}
.page-hero .in>*:nth-child(2){animation-delay:.12s}.page-hero .in>*:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (min-width:768px){.page-hero{min-height:clamp(440px,54vh,620px)}}
@media (prefers-reduced-motion:reduce){.page-hero .in>*{animation:none}}
/* first-run: keep every page's first text clear of the status bar */
main>section:first-child:not(.page-hero){padding-top:calc(48px + env(safe-area-inset-top))}

/* ---- add-to-home-screen sheet ---- */
.install-veil{position:fixed;inset:0;z-index:90;background:rgba(20,32,26,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .35s}
.install-veil.show{opacity:1;pointer-events:auto}
.install{width:min(100% - 20px,440px);background:var(--paper);border-radius:28px;padding:20px 20px calc(18px + env(safe-area-inset-bottom));margin-bottom:12px;transform:translateY(60px) scale(.97);transition:transform .55s var(--spring);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative}
.install-veil.show .install{transform:none}
.install .grab{width:40px;height:5px;border-radius:3px;background:rgba(34,56,46,.18);margin:0 auto 14px}
.install .appicon{width:72px;height:72px;border-radius:18px;margin:0 auto 10px;box-shadow:0 10px 24px rgba(20,32,26,.3)}
.install h3{font-size:26px;text-transform:uppercase;margin-bottom:6px}
.install p{font-size:15px;color:var(--ink-2);margin:0 auto;max-width:36ch}
.install .steps{list-style:none;display:grid;gap:8px;margin:14px 0 6px;text-align:left}
.install .steps li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:700}
.install .steps .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--forest);color:var(--cream);display:grid;place-items:center;font:700 14px var(--display)}
.install .steps .cc-icon{width:20px;height:20px;color:var(--rust)}
.install .row{display:flex;gap:10px;margin-top:16px}
.install .row .btn{flex:1}
/* the little demo: share → sheet → add, on a loop */
.demo{position:relative;width:220px;height:150px;margin:14px auto 4px;background:#EFE9D8;border-radius:22px;overflow:hidden;border:1px solid var(--hair)}
.demo .bar{position:absolute;left:0;right:0;bottom:0;height:44px;background:#F7F4EC;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-around;padding:0 14px}
.demo .bar span{width:16px;height:16px;border-radius:4px;background:rgba(34,56,46,.18)}
.demo .bar .share{width:20px;height:22px;background:none;border:2px solid #2E6BFF;border-top:0;border-radius:0 0 4px 4px;position:relative;animation:demo-share 7s infinite}
.demo .bar .share::after{content:"";position:absolute;left:50%;top:-11px;width:2px;height:16px;background:#2E6BFF;transform:translateX(-50%)}
.demo .bar .share::before{content:"";position:absolute;left:50%;top:-11px;width:8px;height:8px;border-left:2px solid #2E6BFF;border-top:2px solid #2E6BFF;transform:translateX(-50%) rotate(45deg)}
.demo .sheet{position:absolute;left:8px;right:8px;bottom:8px;background:#fff;border-radius:14px;box-shadow:0 -6px 24px rgba(0,0,0,.15);padding:8px;transform:translateY(120%);animation:demo-sheet 7s infinite}
.demo .sheet div{height:22px;border-radius:7px;background:#F1EEE6;margin-bottom:6px;display:flex;align-items:center;padding:0 8px;font:700 10.5px var(--body);color:var(--ink-2)}
.demo .sheet div.add{background:#F1EEE6;color:var(--forest);animation:demo-row 7s infinite}
.demo .sheet div.add::before{content:"+";display:inline-grid;place-items:center;width:14px;height:14px;border:1.5px solid currentColor;border-radius:3px;margin-right:6px;font-weight:800}
.demo .finger{position:absolute;width:22px;height:22px;border-radius:50%;background:rgba(203,109,61,.85);box-shadow:0 0 0 6px rgba(203,109,61,.25);left:99px;top:130px;animation:demo-finger 7s infinite}
@keyframes demo-share{0%,16%{transform:scale(1)}20%{transform:scale(.85)}24%,100%{transform:scale(1)}}
@keyframes demo-finger{0%{opacity:0;transform:translate(0,30px)}10%{opacity:1;transform:translate(0,0)}20%{transform:translate(0,0) scale(.8)}26%{opacity:0}40%{opacity:0;transform:translate(0,-64px)}52%{opacity:1;transform:translate(0,-64px)}60%{transform:translate(0,-64px) scale(.8)}68%{opacity:0}100%{opacity:0}}
@keyframes demo-sheet{0%,26%{transform:translateY(120%)}36%,90%{transform:translateY(0)}100%{transform:translateY(120%)}}
@keyframes demo-row{0%,58%{background:#F1EEE6}64%,88%{background:var(--forest);color:var(--cream)}100%{background:#F1EEE6}}
@media (prefers-reduced-motion:reduce){.demo *{animation:none!important}.demo .sheet{transform:none}}

/* ---- small ward mark, top-left of every hero, clear of the status bar ---- */
.ward-mark{position:absolute;z-index:5;left:14px;top:calc(12px + env(safe-area-inset-top));display:block;filter:drop-shadow(0 4px 12px rgba(20,32,26,.35))}
.ward-mark img{width:72px;height:auto;display:block}
@media (min-width:768px){.ward-mark{left:max(20px,calc((100% - 1040px)/2));top:18px}.ward-mark img{width:88px}}
/* ---- trip facts as a plain row, no boxes ---- */
.meta{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hair)}
.meta div{display:flex;align-items:center;gap:10px}
.meta .cc-icon{width:24px;height:24px;color:var(--rust);flex:none}
.meta b{display:block;font:700 22px var(--display);text-transform:uppercase;letter-spacing:.01em;line-height:1;color:var(--forest)}
.meta small{display:block;font-size:12.5px;color:var(--ink-2);font-weight:700;margin-top:2px}