/* RECIPE: skeleton=Stack · theme=Playfield (activity/sports/arts) */
:root{--bg:#F7FAF7;--card:#fff;--line:#E2EBE2;--ink:#12241A;--muted:#5F7568;
--lime:#B4E34A;--orange:#FF8A3D;--violet:#8B5CF6;--teal:#14B8A6;--wa:#25D366;
--d:'Space Grotesk',sans-serif;--b:'Inter',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--b);background:var(--bg);color:var(--ink);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:var(--d);line-height:1.1;letter-spacing:-.02em}
.wrap{max-width:940px;margin:0 auto;padding:0 18px}
section{padding:50px 0}
.tag{display:inline-block;font-family:var(--d);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--lime);padding:7px 15px;border-radius:6px;margin-bottom:14px;transform:rotate(-1deg)}
h2{font-size:clamp(1.6rem,6vw,2.4rem);text-transform:uppercase}
.lead{color:var(--muted);max-width:540px;margin:8px 0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--d);font-weight:700;font-size:.95rem;padding:15px 28px;border-radius:12px;min-height:52px;transition:.15s;border:2px solid var(--ink)}
.btn:active{transform:scale(.96)}
.btn-a{background:var(--lime);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn-o{background:#fff}
.reveal{opacity:0;transform:translateY(18px);transition:.5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

nav{position:sticky;top:0;z-index:30;background:rgba(247,250,247,.94);backdrop-filter:blur(10px);border-bottom:2px solid var(--ink)}
.nav-in{max-width:940px;margin:0 auto;padding:12px 18px;display:flex;justify-content:space-between;align-items:center}
.brand{font-family:var(--d);font-weight:700;font-size:1.05rem;text-transform:uppercase}
.btn-sm{min-height:42px;padding:9px 16px;font-size:.82rem}

/* hero */
.hero{padding:56px 0 34px;position:relative;overflow:hidden}
.hero h1{font-size:clamp(2.4rem,11vw,4.6rem);text-transform:uppercase}
.hero h1 .o{color:var(--orange)}
.hero .sub-role{font-family:var(--d);font-weight:700;font-size:1.05rem;margin:10px 0 4px;min-height:1.6em}
.hero .sub-role .cur{border-right:3px solid var(--orange);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{border-color:transparent}}
.loc{color:var(--muted);font-size:.88rem;margin-bottom:16px}
.hero p{max-width:520px;color:var(--muted);margin-bottom:24px}
.hctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badges span{font-size:.72rem;font-weight:700;border:2px solid var(--ink);border-radius:8px;padding:6px 12px;background:#fff}

/* marquee */
.mq{background:var(--ink);color:var(--lime);overflow:hidden;padding:13px 0;transform:rotate(-1deg);margin:8px -10px}
.mq-track{display:flex;gap:36px;width:max-content;animation:mq 18s linear infinite;font-family:var(--d);font-weight:700;text-transform:uppercase;font-size:.9rem;letter-spacing:.06em}
@keyframes mq{to{transform:translateX(-50%)}}

/* activities grid */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.act{border:2px solid var(--ink);border-radius:16px;padding:22px 18px;background:var(--card);transition:.15s;position:relative}
.act:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.act .em{font-size:1.8rem;display:block;margin-bottom:10px}
.act b{font-family:var(--d);font-size:1rem;display:block}
.act span{font-size:.78rem;color:var(--muted)}

/* stats */
.res{border:2px solid var(--ink);border-radius:20px;background:var(--lime);padding:30px 20px;box-shadow:6px 6px 0 var(--ink)}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;text-align:center}
.rgrid b{font-family:var(--d);font-size:2rem;display:block}
.rgrid span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* timeline zigzag */
.tl-item{border:2px solid var(--ink);border-radius:16px;background:#fff;padding:20px;margin-bottom:14px;max-width:88%}
.tl-item:nth-child(even){margin-left:auto;background:#FFF4EA}
.tl-item .yr{font-family:var(--d);font-weight:700;font-size:.72rem;background:var(--orange);color:#fff;border-radius:6px;padding:4px 10px;display:inline-block;margin-bottom:8px}
.tl-item h3{font-size:1rem}
.tl-item .org{font-size:.82rem;color:var(--teal);font-weight:600;margin-bottom:4px}
.tl-item p{font-size:.86rem;color:var(--muted)}

/* awards ticket style */
.aw{display:flex;align-items:center;gap:14px;border:2px dashed var(--ink);border-radius:14px;background:#fff;padding:16px 18px;margin-bottom:10px}
.aw .tr{font-size:1.5rem}
.aw b{font-family:var(--d);display:block;font-size:.95rem}
.aw span{font-size:.76rem;color:var(--muted)}
.aw .yr{margin-left:auto;font-family:var(--d);font-weight:700;color:var(--violet)}

/* quals compact */
.quals{display:grid;gap:10px}
.qual{display:flex;justify-content:space-between;gap:12px;border-bottom:2px solid var(--line);padding:13px 0;flex-wrap:wrap}
.qual b{font-family:var(--d)}
.qual span{color:var(--muted);font-size:.85rem}
.qual .yr{font-family:var(--d);font-weight:700;color:var(--orange)}

/* testimonials */
.tcard{border:2px solid var(--ink);border-radius:16px;background:#fff;padding:20px;margin-bottom:12px}
.tcard p{font-size:.9rem;color:var(--muted);margin-bottom:10px}
.tcard b{font-family:var(--d);font-size:.9rem}.tcard span{display:block;font-size:.75rem;color:var(--muted)}

/* job block */
.job{border:2px solid var(--ink);border-radius:20px;background:var(--ink);color:#F7FAF7;padding:30px 22px;box-shadow:6px 6px 0 var(--lime)}
.job h2{color:var(--lime)}
.jrow{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed rgba(255,255,255,.25);padding:11px 0;font-size:.9rem;flex-wrap:wrap}
.jrow span{color:#9FB3A6}.jrow b{font-weight:700}
.jrow .yes{color:var(--lime)}
.refs{margin-top:16px;display:grid;gap:10px}
.ref{border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:14px 16px;font-size:.86rem}
.ref b{font-family:var(--d);display:block}
.ref span{color:#9FB3A6;font-size:.78rem}

/* contact */
.contact{text-align:center;border:2px solid var(--ink);border-radius:20px;padding:36px 22px;background:linear-gradient(135deg,#F1FBDC,#EAF7F4)}
.contact p{color:var(--muted);margin:4px 0}
.cctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
footer{text-align:center;padding:24px;font-size:.75rem;color:var(--muted)}
footer a{color:var(--teal);font-weight:700}
.stick{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:2px solid var(--ink);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;gap:10px}
.stick .btn{flex:1;min-height:48px}
body{padding-bottom:86px}
@media(min-width:768px){
 .acts{grid-template-columns:repeat(3,1fr)}
 .rgrid{grid-template-columns:repeat(4,1fr)}
 .tgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.tcard{margin-bottom:0}
 .refs{grid-template-columns:1fr 1fr}
 .stick{display:none}body{padding-bottom:0}
 .hero{padding:80px 0 40px}
}

/* contact form (Laravel) */
.contact-form-wrap{margin-top:22px;text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
.contact-form .form_group{margin-bottom:12px}
.contact-form input,.contact-form textarea{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(0,0,0,.12);font:inherit;background:#fff}
.contact-form textarea{min-height:110px;resize:vertical}
.text-danger{color:#c0392b;font-size:.8rem;margin-top:4px}