:root { --cream:#f6f0e5; --ink:#17333a; --deep:#102d34; --aqua:#6fe0d0; --mint:#c9f0e3; --coral:#ff886e; --gold:#ecc765; --line:#8aa8a6; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:#b6d2ce; font-family:Arial,Helvetica,sans-serif; }
.cooler-page { width:min(1280px,calc(100% - 32px)); margin:24px auto; overflow:hidden; background:var(--cream); box-shadow:0 30px 90px #163b3a66; }
.hero { padding:24px clamp(22px,5vw,66px) clamp(56px,7vw,90px); background:radial-gradient(circle at 12% 30%,#ffffff 0,transparent 29rem),linear-gradient(145deg,#effbf7,#c2eee3); }
.hero nav,.cooler-page footer { display:flex; justify-content:space-between; gap:20px; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; }
.hero nav a { color:#1e5358; }
.hero nav a,.cooler-page footer a { display:inline-flex; min-height:44px; align-items:center; padding-inline:8px; margin-inline:-8px; text-underline-offset:4px; }
.hero-grid { display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:clamp(30px,5vw,70px); margin-top:72px; }
.eyebrow,.section-label { margin:0 0 18px; color:#166a68; font-size:10px; font-weight:800; letter-spacing:2px; }
.hero h1,.why h2,.lid h2,.moments h2,.system h2,.prototype h2 { margin:0; font:700 clamp(44px,6.6vw,84px)/.94 Georgia,serif; letter-spacing:-2.5px; }
.deck { margin:30px 0; font:20px/1.55 Georgia,serif; }
.quick-specs { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid #699793; }
.quick-specs span { padding:18px 10px 18px 0; font-size:10px; line-height:1.4; text-transform:uppercase; letter-spacing:.8px; }
.quick-specs strong { display:block; color:#095b5d; font-size:18px; }
figure { margin:0; }
.hero figure { transform:rotate(1.5deg); }
img { display:block; width:100%; height:auto; }
.hero img { border:10px solid #f8f6ee; box-shadow:0 22px 48px #245a5940; }
figcaption { padding-top:10px; color:#4e6c6b; font-size:11px; line-height:1.4; }
.why { padding:clamp(64px,9vw,116px) clamp(22px,7vw,92px); background:var(--cream); }
.why h2 { max-width:1040px; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,7vw,100px); margin-top:48px; }
.why-grid p { margin:0; font:18px/1.7 Georgia,serif; }
.lid { display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:clamp(38px,7vw,92px); padding:clamp(50px,7vw,88px); color:#f6fbf8; background:var(--deep); }
.lid figure { position:relative; }
.lid img { border-radius:50%; box-shadow:0 0 0 1px #9de3d4,0 25px 60px #00141680; }
.lid figcaption { color:#a7c7c2; }
.lid h2 { font-size:clamp(42px,5.5vw,70px); }
.lid-copy>p:not(.section-label) { color:#cce0dc; line-height:1.7; }
.lid ul { margin:28px 0 0; padding:0; list-style:none; border-top:1px solid #52747a; }
.lid li { padding:14px 0; border-bottom:1px solid #52747a; color:var(--mint); font-size:13px; text-transform:uppercase; letter-spacing:.8px; }
.moments { padding:clamp(62px,8vw,104px) clamp(22px,7vw,92px); background:#edc763; }
.moments .section-label { color:#684f09; }
.moment-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:48px; }
.moment-grid article { min-height:260px; padding:26px; background:#fffaf0; border:1px solid #7f6b38; }
.moment-grid span { color:#a84d39; font-size:11px; font-weight:bold; }
.moment-grid h3 { margin:50px 0 12px; font:700 30px/1 Georgia,serif; }
.moment-grid p { margin:0; line-height:1.6; }
.system { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,100px); padding:clamp(66px,9vw,116px) clamp(22px,7vw,92px); background:#f5eee2; }
.system h2 { font-size:clamp(42px,5.5vw,70px); }
.system-list { border-top:1px solid var(--line); }
.system-list article { padding:24px 0; border-bottom:1px solid var(--line); }
.system-list h3 { margin:0 0 8px; font-size:23px; }
.system-list p { margin:0; line-height:1.65; }
.prototype { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,7vw,90px); padding:clamp(60px,8vw,100px) clamp(22px,7vw,92px); color:#f4fcf9; background:#176567; }
.prototype h2 { font-size:clamp(42px,5.2vw,68px); }
.prototype .section-label { color:#b9f6e6; }
.prototype ol { margin:0; padding:0; list-style:none; counter-reset:test; }
.prototype li { display:grid; grid-template-columns:160px 1fr; gap:24px; padding:23px 0; border-top:1px solid #8cc7c0; }
.prototype li::before { counter-increment:test; content:"0" counter(test); color:var(--gold); font-size:11px; font-weight:bold; grid-column:1/-1; margin-bottom:-12px; }
.prototype strong { font-size:16px; }
.prototype span { color:#d1e8e3; line-height:1.55; }
.cooler-page footer { padding:14px clamp(20px,4vw,50px); color:#b2ceca; background:#0c282d; }
.cooler-page footer a { color:#e8f9f4; }
.cooler-page h1,.cooler-page h2,.cooler-page h3 { text-wrap:balance; }
.cooler-page p,.cooler-page li,.cooler-page figcaption { text-wrap:pretty; }
@media (max-width:880px) { .hero-grid,.lid,.system,.prototype { grid-template-columns:1fr; } .hero-copy { max-width:720px; } .moment-grid { grid-template-columns:1fr 1fr; } .lid figure { max-width:680px; } }
@media (max-width:600px) { .cooler-page { width:100%; margin:0; box-shadow:none; } .hero-grid { margin-top:42px; } .hero h1 { font-size:53px; } .why-grid,.moment-grid { grid-template-columns:1fr; } .quick-specs strong { font-size:16px; } .why,.lid,.moments,.system,.prototype { padding-inline:22px; } .moment-grid article { min-height:210px; } .prototype li { grid-template-columns:1fr; gap:8px; } .cooler-page footer { align-items:flex-start; flex-direction:column; padding-block:4px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }