:root { --ink:#142b51; --orange:#f26a21; --cream:#fff8e9; --yellow:#f8c52b; --coral:#ed5d3d; --blue:#2171c9; --paper:#f6ead0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"M PLUS Rounded 1c", sans-serif; overflow-x:hidden; }
.paper-grain { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }
.site-header { position:fixed; z-index:20; top:0; left:0; right:0; height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 max(20px, calc((100% - 1120px)/2)); background:rgba(255,248,233,.88); backdrop-filter:blur(12px); border-bottom:1px solid rgba(20,43,81,.12); }
.brand { display:flex; gap:9px; align-items:center; color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; letter-spacing:.04em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; color:white; background:var(--orange); border-radius:50% 50% 48% 48%; font-family:"Kiwi Maru"; font-size:15px; transform:rotate(-8deg); }
.header-cta { color:white; background:var(--ink); padding:11px 15px; border-radius:999px; font-size:11px; font-weight:800; text-decoration:none; box-shadow:3px 3px 0 var(--orange); transition:.2s ease; }
.header-cta:hover { transform:translateY(-2px); box-shadow:3px 5px 0 var(--orange); }
.section-shell { width:min(1120px, calc(100% - 40px)); margin:0 auto; }
.hero { min-height:840px; padding-top:128px; display:grid; grid-template-columns:.86fr 1.14fr; gap:55px; align-items:center; position:relative; }
.hero:before { content:""; position:absolute; width:430px; height:430px; right:-190px; top:100px; background:var(--yellow); border-radius:48% 52% 58% 42%; opacity:.5; z-index:-1; }
.hero-copy { padding-left:20px; position:relative; z-index:1; }
.eyebrow { margin:0 0 16px; color:var(--coral); font-size:11px; font-weight:800; letter-spacing:.17em; }
h1,h2 { margin:0; font-family:"Kiwi Maru", serif; font-weight:500; line-height:1.18; letter-spacing:.02em; }
h1 { font-size:clamp(43px, 6vw, 80px); color:var(--ink); text-shadow:4px 4px 0 rgba(242,106,33,.2); }
h2 { font-size:clamp(28px, 4vw, 48px); }
em { color:var(--orange); font-style:normal; }
.hero-lead { margin:24px 0 28px; font-size:clamp(16px, 2vw, 20px); line-height:1.9; font-weight:700; }
.hero-note { color:#7c6b52; font-size:11px; line-height:1.6; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; border:0; cursor:pointer; border-radius:999px; padding:16px 24px; font:800 14px "M PLUS Rounded 1c", sans-serif; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.button span { font-size:22px; line-height:0; }
.button-primary { color:white; background:var(--orange); box-shadow:5px 5px 0 var(--ink); }
.button-primary:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.button-secondary { color:white; background:var(--ink); box-shadow:4px 4px 0 var(--orange); }
.button-large { width:min(100%, 320px); padding:19px 28px; font-size:15px; }
.tape-card { position:relative; background:white; padding:12px; box-shadow:14px 18px 0 rgba(20,43,81,.12), 0 8px 30px rgba(20,43,81,.15); transform:rotate(2.5deg); }
.tape-card:before,.image-card:before { content:""; position:absolute; width:94px; height:23px; left:50%; top:-12px; transform:translateX(-50%) rotate(-3deg); background:rgba(248,197,43,.78); z-index:2; }
img { display:block; width:100%; height:auto; }
.section-block { padding:110px 0; position:relative; }
.section-block:after { content:"✦"; position:absolute; color:var(--yellow); font-size:38px; right:2%; top:120px; transform:rotate(15deg); }
.section-heading { display:flex; gap:18px; align-items:flex-start; margin-bottom:38px; }
.section-heading.align-right { justify-content:flex-end; text-align:right; }
.section-number { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:white; background:var(--blue); font-size:12px; font-weight:800; transform:rotate(-10deg); }
.image-card { width:min(650px, 100%); position:relative; padding:10px; background:#fff; box-shadow:10px 14px 0 rgba(20,43,81,.12), 0 8px 25px rgba(20,43,81,.10); }
.image-card img { border:1px solid rgba(20,43,81,.08); }
.tilt-left { margin-left:8%; transform:rotate(-1.5deg); }
.tilt-right { margin-left:auto; margin-right:8%; transform:rotate(1.5deg); }
.join { min-height:760px; padding-top:110px; padding-bottom:130px; display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center; }
.join-card { padding:44px 35px; text-align:center; background:#fff; border:2px solid var(--ink); box-shadow:10px 10px 0 var(--yellow); transform:rotate(-2deg); }
.join-card h2 { font-size:clamp(32px,4vw,52px); }
.join-card > p:not(.eyebrow):not(.join-footnote) { font-weight:800; margin:18px 0 28px; }
.join-footnote { margin:24px 0 0; color:#806f55; font-size:11px; line-height:1.7; }
.cta-art { transform:rotate(2deg); }
.site-footer { display:flex; justify-content:space-between; padding:26px max(20px, calc((100% - 1120px)/2)); color:#fff; background:var(--ink); font-size:11px; letter-spacing:.05em; }
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(20,43,81,.55); backdrop-filter:blur(5px); }
.modal-card { position:relative; width:min(430px,100%); padding:40px 30px 32px; text-align:center; background:var(--cream); border:3px solid var(--ink); box-shadow:9px 9px 0 var(--orange); animation:pop .25s ease-out; }
.modal-icon { width:50px; height:50px; display:grid; place-items:center; margin:0 auto 18px; color:white; background:var(--orange); border-radius:50%; font-size:25px; font-weight:800; }
.modal-card h2 { font-size:26px; }
.modal-card p:not(.eyebrow) { color:#5f584d; font-size:14px; line-height:1.9; }
.modal-close { position:absolute; top:8px; right:12px; border:0; color:var(--ink); background:transparent; font-size:28px; cursor:pointer; }
@keyframes pop { from { opacity:0; transform:scale(.94) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
@media (max-width:760px) { .site-header { height:58px; padding:0 16px; } .brand { font-size:10px; } .brand-mark { width:27px; height:27px; } .header-cta { padding:9px 12px; font-size:10px; box-shadow:2px 2px 0 var(--orange); } .section-shell { width:calc(100% - 28px); } .hero { display:flex; flex-direction:column; min-height:auto; padding-top:100px; gap:36px; align-items:stretch; } .hero-copy { padding-left:5px; } .hero-art { width:94%; margin:0 auto 26px; } .section-block { padding:70px 0; } .section-block:after { right:0; top:74px; font-size:25px; } .section-heading,.section-heading.align-right { display:block; text-align:left; margin-left:4px; } .section-number { margin-bottom:16px; } .section-heading h2 { font-size:30px; } .tilt-left,.tilt-right { width:94%; margin:0 auto; } .join { min-height:0; display:flex; flex-direction:column; padding-top:75px; gap:45px; } .join-card { padding:35px 20px; } .cta-art { width:94%; } .site-footer { padding:20px 16px; font-size:9px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }