/* ============================================================
   Handball Hamilton — site styles
   The fast-growing movement: dark, editorial, falcon-forward.
   Canvas #101010 · single accent electric-green #00d992.
   Inter + JetBrains Mono. Sharp buttons, big type, FAQ, stat band.
   ============================================================ */

:root{
  --canvas:#101010;
  --canvas-soft:#171717;
  --canvas-2:#1e1e1e;
  --hairline:#333230;
  --hairline-2:#262624;
  --ink:#f2f2f2;
  --ink-strong:#ffffff;
  --body:#bdbdbd;
  --mute:#8b949e;
  --accent:#00d992;
  --accent-soft:#2fd6a1;
  --accent-deep:#10b981;
  --on-accent:#06281f;
  --maxw:1200px;
  --gutter:32px;
  --mono:'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --dashed:1px dashed rgba(120,130,150,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{margin:0; font-family:var(--sans); font-size:16px; line-height:1.65; color:var(--body); background:var(--canvas); -webkit-font-smoothing:antialiased; font-feature-settings:"calt","rlig"}
img,svg{display:block; max-width:100%}
a{color:var(--accent-deep); text-decoration:none; transition:color .15s}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.skip{position:absolute; left:-9999px; background:var(--accent); color:var(--on-accent); padding:10px 16px; z-index:2000; font-weight:700}
.skip:focus{left:16px; top:16px}

/* mono helpers */
.eyebrow{display:inline-block; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); margin-bottom:18px}
.tag{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; color:var(--ink); border:1px solid var(--hairline); border-radius:999px; padding:5px 13px}
.tag .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(0,217,146,.16)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:100; background:rgba(16,16,16,.84); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--hairline)}
.nav .container{display:flex; align-items:center; gap:40px; height:78px}
.nav .brand img{height:50px; width:auto}
.nav .nav-links ul{list-style:none; padding:0; margin:0; display:flex; gap:28px; align-items:center}
.nav a.navlink{color:var(--body); font-size:13.5px; font-family:var(--mono); letter-spacing:.5px; transition:color .15s}
.nav a.navlink:hover{color:var(--accent)}
.nav .nav-cta{margin-left:auto}
.menu-toggle{display:none; background:transparent; border:none; color:var(--ink); padding:8px; cursor:pointer; margin-left:auto}
.mobile-menu{padding:8px 28px 20px; border-top:1px solid var(--hairline); background:var(--canvas)}
.mobile-menu a{display:block; padding:13px 0; color:var(--body); font-family:var(--mono); font-size:14px; border-bottom:1px solid var(--hairline-2)}
.mobile-menu a.cta{margin-top:12px; background:var(--accent); color:var(--on-accent); padding:13px; border-radius:4px; text-align:center; font-family:var(--sans); font-weight:700; border:none}

/* ---------- buttons (sharp, mono, with bracket arrow) ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:600; font-size:13.5px; letter-spacing:1px; text-transform:uppercase; padding:14px 22px; border-radius:4px; cursor:pointer; border:1px solid transparent; transition:background-color .15s,color .15s,border-color .15s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-soft); color:var(--on-accent)}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--hairline)}
.btn-outline:hover{border-color:var(--accent); color:var(--accent)}
.btn .arr{font-family:var(--mono); transition:transform .15s}
.btn:hover .arr{transform:translateX(3px)}
.btn-lg{padding:16px 26px; font-size:14px}

/* ---------- sections ---------- */
section{padding:96px 0}
.sec-label{display:flex; align-items:center; gap:14px; margin-bottom:30px}
.sec-label .n{font-family:var(--mono); font-size:13px; color:var(--mute)}
.sec-label .ln{flex:1; height:1px; background:var(--hairline)}
h2.title{font-size:clamp(30px,4vw,46px); line-height:1.05; margin:0; font-weight:600; letter-spacing:-1px; color:var(--ink-strong)}

/* ---------- hero (asymmetric, falcon bleeds off the right) ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--hairline); padding:0}
.hero::before{content:""; position:absolute; right:2%; top:-20%; width:680px; height:680px; background:radial-gradient(circle, rgba(0,217,146,.14) 0%, transparent 60%); pointer-events:none}
.hero-falcon{position:absolute; right:-70px; top:0; bottom:0; display:flex; align-items:center; z-index:0; pointer-events:none}
.hero-falcon img{width:600px; max-width:46vw; filter:drop-shadow(0 0 60px rgba(0,217,146,.28))}
.hero .container{position:relative; z-index:1; padding:48px 0 96px}
.hero-copy{max-width:660px}
.hero h1{font-size:clamp(44px,6.5vw,78px); line-height:.96; font-weight:700; letter-spacing:-2px; margin:0 0 22px; color:var(--ink-strong)}
.hero h1 .accent{color:var(--accent)}
.hero p.lede{font-size:19px; color:var(--body); max-width:520px; margin:0 0 28px; line-height:1.55}
.hero p.lede b{color:var(--ink); font-weight:600}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px}
.hero .chips{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- manifesto ---------- */
.manifesto{border-top:var(--dashed)}
.manifesto .big{font-size:clamp(26px,3.4vw,42px); line-height:1.22; font-weight:400; letter-spacing:-.6px; color:var(--ink); max-width:980px}
.manifesto .big b{color:var(--ink-strong); font-weight:600}
.manifesto .big .g{color:var(--accent); font-weight:600}
.manifesto .sub{margin-top:28px; max-width:620px; color:var(--mute); font-size:17px}

/* ---------- stat band ---------- */
.statband{border-top:var(--dashed); border-bottom:var(--dashed); padding:0}
.statband .grid{display:grid; grid-template-columns:repeat(4,1fr)}
.statband .s{padding:42px 26px; border-left:1px solid var(--hairline)}
.statband .s:first-child{border-left:none}
.statband .s .v{font-family:var(--mono); font-size:38px; font-weight:600; color:var(--accent); letter-spacing:-1px; line-height:1}
.statband .s .k{margin-top:10px; font-size:14px; color:var(--mute); line-height:1.4}

/* ---------- how it plays (editorial) ---------- */
.plays .rows{display:grid; gap:0; margin-top:8px}
.play{display:grid; grid-template-columns:120px 1fr; gap:34px; padding:30px 0; border-top:1px solid var(--hairline); align-items:baseline}
.play:first-child{border-top:none}
.play .idx{font-family:var(--mono); font-size:46px; font-weight:600; color:var(--accent); line-height:1; letter-spacing:-2px}
.play h3{margin:0 0 8px; font-size:24px; font-weight:600; color:var(--ink-strong); letter-spacing:-.4px}
.play p{margin:0; color:var(--body); font-size:16.5px; max-width:680px}

/* ---------- programs (pick your flight) ---------- */
.flights .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
.flight{border:1px solid var(--hairline); border-radius:8px; padding:30px 26px 28px; background:var(--canvas); position:relative; transition:border-color .18s, transform .18s, box-shadow .18s}
.flight:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 0 22px rgba(0,217,146,.12)}
.flight .fi{font-family:var(--mono); font-size:13px; color:var(--mute); display:flex; justify-content:space-between; margin-bottom:24px}
.flight .fi .age{color:var(--accent)}
.flight h3{margin:0 0 2px; font-size:27px; font-weight:600; color:var(--ink-strong); letter-spacing:-.5px}
.flight .nick{font-family:var(--mono); font-size:13px; color:var(--accent); margin-bottom:14px}
.flight p{margin:0 0 18px; color:var(--body); font-size:15px}
.flight .when{border-top:1px solid var(--hairline-2); padding-top:14px; font-family:var(--mono); font-size:13px; color:var(--mute); display:flex; align-items:center; gap:8px}
.flight .when b{color:var(--ink); font-weight:500}

/* ---------- FAQ accordion ---------- */
.faq .wrap{max-width:860px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq details:first-of-type{border-top:1px solid var(--hairline)}
.faq summary{list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:19px; font-weight:600; color:var(--ink); transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .pm{flex-shrink:0; width:26px; height:26px; position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:""; position:absolute; background:var(--accent); transition:transform .2s}
.faq summary .pm::before{left:0; right:0; top:12px; height:2px}
.faq summary .pm::after{top:0; bottom:0; left:12px; width:2px}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--accent)}
.faq .a{padding:0 4px 26px; color:var(--body); font-size:16px; max-width:680px}

/* ---------- CTA band ---------- */
.ctaband{border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); background:linear-gradient(rgba(0,217,146,.05), rgba(0,217,146,.02))}
.ctaband .container{padding:64px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
.ctaband h2{font-size:clamp(28px,3.6vw,42px); margin:0; font-weight:600; letter-spacing:-1px; color:var(--ink-strong); max-width:680px; line-height:1.06}
.ctaband h2 .g{color:var(--accent)}

/* ---------- contact (form-forward: big form left, info rail right) ---------- */
.contact-grid{display:grid; grid-template-columns:1.3fr .78fr; gap:36px; align-items:start}
.contact-grid form.contact-form{order:1}
.contact-grid .contact-rail{order:2}
.contact-rail{border:1px solid var(--hairline); border-radius:8px; background:var(--canvas-soft); padding:26px 24px}
.contact-rail .rl{font-family:var(--mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin:0 0 18px}
.contact-info .info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px}
.contact-info .info-row .ico{width:40px; height:40px; border-radius:6px; border:1px solid var(--hairline); background:var(--canvas-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.contact-info .info-row b{display:block; font-size:12px; margin-bottom:3px; color:var(--mute); letter-spacing:1px; text-transform:uppercase; font-family:var(--mono); font-weight:500}
.contact-info .info-row a,.contact-info .info-row span{color:var(--ink); font-size:15.5px}
.contact-info .info-row a:hover{color:var(--accent)}
.contact-note{margin-top:20px; color:var(--mute); font-size:14px; line-height:1.6; border-left:2px solid var(--accent); padding-left:14px}
form.contact-form{background:var(--canvas-soft); border:1px solid var(--hairline); border-radius:8px; padding:30px; position:relative}
form.contact-form .field{margin-bottom:16px}
form.contact-form label{display:block; font-size:12px; font-weight:500; margin-bottom:7px; color:var(--mute); letter-spacing:.8px; text-transform:uppercase; font-family:var(--mono)}
form.contact-form input,form.contact-form select,form.contact-form textarea{width:100%; padding:12px 14px; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--canvas); border:1px solid var(--hairline); border-radius:4px}
form.contact-form input::placeholder,form.contact-form textarea::placeholder{color:#6a6a6a}
form.contact-form input:focus,form.contact-form select:focus,form.contact-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,217,146,.18)}
form.contact-form textarea{resize:vertical; min-height:130px}
form.contact-form .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
form.contact-form .submit-row{display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap}
form.contact-form .submit-row small{color:var(--mute); font-size:13px}
form.contact-form .honey{position:absolute; left:-9999px}
.form-success{background:rgba(0,217,146,.08); border:1px solid var(--accent); color:var(--accent); padding:13px 16px; border-radius:4px; margin-bottom:16px; font-weight:500; font-size:14.5px}
.form-error{background:#1d1414; border:1px solid #6b2b2b; color:#f0a3a3; padding:13px 16px; border-radius:4px; margin-bottom:16px; font-size:14.5px}
form.contact-form button[disabled]{opacity:.6; cursor:wait}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline); background:var(--canvas)}
footer .container{padding-top:0; padding-bottom:34px}
footer a{color:var(--body)} footer a:hover{color:var(--accent)}
.foot-hero{padding:60px 0 46px}
.foot-hero .big{font-size:clamp(34px,6.4vw,74px); font-weight:700; letter-spacing:-2.4px; line-height:.92; color:var(--ink-strong); margin:0; max-width:900px}
.foot-hero .big .g{color:var(--accent)}
.footer-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; margin:0 0 34px; padding-top:44px; border-top:1px solid var(--hairline)}
.brand-foot{display:flex; align-items:center; gap:13px}
.bfn{font-size:17px; font-weight:700; color:var(--ink-strong); letter-spacing:-.2px}
.bfsub{font-family:var(--mono); font-size:12px; color:var(--mute); margin-top:6px}
.footer-blurb{margin-top:16px; max-width:360px; color:var(--mute); font-size:14px; line-height:1.6}
.footer-grid h4{color:var(--ink); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; margin:0 0 14px; font-family:var(--mono); font-weight:500}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{margin-bottom:9px; font-size:14.5px}
.footer-bot{border-top:1px solid var(--hairline); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--mute)}
.footer-bot .mono{font-family:var(--mono); color:var(--accent)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  section{padding:68px 0}
  .hero .container{padding:40px 0 64px}
  .hero-copy{max-width:none}
  .hero-falcon{right:-90px; opacity:.14}
  .hero-falcon img{width:440px; max-width:62vw}
  .statband .grid{grid-template-columns:1fr 1fr}
  .statband .s:nth-child(3){border-left:none}
  .statband .s:nth-child(3),.statband .s:nth-child(4){border-top:1px solid var(--hairline)}
  .flights .grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr; gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
}
@media(max-width:760px){
  .nav .nav-links{display:none}
  .nav .nav-cta{display:none}
  .menu-toggle{display:inline-flex}
  .hero-falcon img{width:360px}
}
@media(max-width:600px){
  section{padding:54px 0}
  .hero h1{font-size:42px}
  .statband .grid{grid-template-columns:1fr 1fr}
  .play{grid-template-columns:1fr; gap:8px} .play .idx{font-size:34px}
  .footer-grid{grid-template-columns:1fr; gap:22px}
  form.contact-form .field-row{grid-template-columns:1fr}
  .ctaband .container{flex-direction:column; align-items:flex-start}
  .ctas .btn{width:100%; justify-content:center}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important; scroll-behavior:auto!important} }