/* Design F — Neo-Brutalist: hard black borders, offset shadows, yellow, mono labels */
:root{--ink:#111;--yellow:#ffe14d;--paper:#fffdf5;--gray:#f0efe9;--disp:'Archivo Black',sans-serif;--body:'Archivo',sans-serif;--mono:'Space Mono',monospace;--bd:3px solid #111;--sh:6px 6px 0 #111}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--disp);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:40px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}h3{font-size:1.2rem}
.h2-note{font-family:var(--mono);font-size:.8rem;font-weight:400;color:#666;letter-spacing:.05em}
.sec{padding:90px 0}.sec-yellow{background:var(--yellow);border-top:var(--bd);border-bottom:var(--bd)}.sec-gray{background:var(--gray)}.sec-black{background:var(--ink);color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:700;font-size:.9rem;letter-spacing:.04em;padding:13px 22px;border:var(--bd);box-shadow:var(--sh);text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #111}.btn-lg{padding:16px 28px;font-size:1rem}
.btn-yellow{background:var(--yellow)}.btn-white{background:#fff}.btn-black{background:var(--ink);color:#fff;box-shadow:6px 6px 0 #999}.btn-black:hover{box-shadow:3px 3px 0 #999}
.sec-black .btn-white{border-color:#fff;box-shadow:6px 6px 0 #666}.sec-black .btn-yellow{border-color:#fff;box-shadow:6px 6px 0 #666}
/* header */
.hdr{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:var(--bd)}
.hdr-in{display:flex;align-items:center;gap:26px;height:70px}
.brand{font-family:var(--disp);font-size:1.4rem;text-decoration:none;color:var(--ink);line-height:.95}.brand span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em}
.nav{display:flex;gap:22px;margin-left:auto}.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.nav a:hover{background:var(--yellow)}
.hdr-cta{padding:9px 16px;font-size:.82rem}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}.burger span{display:block;width:26px;height:3px;background:var(--ink);margin:6px 0}
/* hero */
.hero{padding:80px 0;background:var(--paper);background-image:radial-gradient(#111 1px,transparent 1px);background-size:22px 22px}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.tag{font-family:var(--mono);font-size:.78rem;display:inline-block;background:#fff;border:var(--bd);padding:5px 10px;margin-bottom:24px}
.hero h1 mark{background:var(--yellow);padding:0 .1em;box-decoration-break:clone}
.hero p{font-size:1.1rem;margin:26px 0 30px;max-width:32rem;background:#fff;border:var(--bd);padding:16px 18px;box-shadow:var(--sh)}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{position:relative}
.frame{border:var(--bd);box-shadow:10px 10px 0 #111;background:#fff;padding:10px}.frame img{aspect-ratio:5/4.4;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.1)}
.sticker{position:absolute;font-family:var(--disp);font-size:.85rem;background:var(--yellow);border:var(--bd);padding:8px 14px;box-shadow:4px 4px 0 #111}
.s1{top:-14px;left:-18px;transform:rotate(-6deg)}.s2{bottom:-14px;right:-18px;transform:rotate(4deg);background:#fff}
/* ticker */
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;padding:12px 0;border-top:var(--bd);border-bottom:var(--bd)}
.ticker-track{display:flex;gap:28px;width:max-content;font-family:var(--disp);font-size:1rem;letter-spacing:.06em;animation:tk 30s linear infinite;white-space:nowrap}
@keyframes tk{to{transform:translateX(-50%)}}
/* boxes */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.box{background:#fff;border:var(--bd);box-shadow:var(--sh);padding:26px;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column;gap:10px}
.box:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 #111}
.box-yellow{background:var(--yellow)}.box-black{background:var(--ink);color:#fff;justify-content:center;align-items:flex-start}.box-black p{color:#ccc}
.num{font-family:var(--mono);font-size:.8rem;color:#666;font-weight:700}
.box p{color:#333;font-size:.95rem}.box small{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.q{font-size:1rem;flex:1;font-weight:500}.box>b:last-child{font-family:var(--mono);font-size:.78rem}
/* why */
.why-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.list{list-style:none;margin:28px 0 34px}.list li{padding:12px 0 12px 32px;border-bottom:2px solid #111;font-weight:600;position:relative}
.list li::before{content:"■";position:absolute;left:0;top:12px;font-size:.9rem}
/* team extras */
.assoc-row{display:flex;justify-content:center;align-items:center;gap:clamp(20px,4vw,50px);flex-wrap:wrap;margin:56px 0 24px}
.assoc-row img{height:56px;width:auto;object-fit:contain;background:#fff;border:var(--bd);padding:6px 10px}
.ins{text-align:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.04em}.ins a{color:var(--ink);font-weight:700}
/* contact */
.contact-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}.contact-in h2{margin:0;justify-content:center;color:var(--yellow)}.contact-in p{color:#bbb;font-family:var(--mono);font-size:.85rem}
.foot{background:var(--ink);color:#888;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;padding:20px 0;border-top:3px solid #333;text-align:center}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}.reveal.in{opacity:1;transform:none}
@media(max-width:1000px){.grid3{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.hero-in,.why-in{grid-template-columns:1fr;gap:44px}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);border-bottom:var(--bd);flex-direction:column;gap:0;padding:8px 24px 16px}.nav.open{display:flex}.nav a{padding:12px 0;border-bottom:2px solid #111}.burger{display:block;margin-left:auto}.hdr-cta{display:none}.s1{left:8px}.s2{right:8px}}
@media(max-width:560px){.grid3,.grid4{grid-template-columns:1fr}}