:root { --ink:#061823; --paper:#f4f7f6; --muted:#59707a; --green:#84f59a; --white:#fff; --line:#d8e2e1; --shell:min(1460px, calc(100% - 80px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; }
.shell { width:var(--shell); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; transform:translateY(-150%); background:var(--green); padding:10px 14px; font-weight:800; }
.skip-link:focus { transform:none; }
.site-header { position:absolute; z-index:10; inset:0 0 auto; height:112px; padding:20px 3.2vw; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:42px; color:white; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:98px; color:white; }
.brand-copy { display:flex; flex-direction:column; }
.brand-copy strong { font-size:25px; line-height:.82; letter-spacing:.035em; }
.brand-copy small { margin-top:9px; font-size:8px; letter-spacing:.27em; white-space:nowrap; }
.primary-nav { display:flex; justify-content:center; gap:34px; }
.primary-nav a { position:relative; padding:12px 0; text-decoration:none; font-size:14px; font-weight:750; }
.primary-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:2px; background:var(--green); transition:.25s; }
.primary-nav a:hover::after,.primary-nav a.active::after { right:0; }
.menu-toggle { display:none; }
.button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:25px; padding:0 34px; border:1px solid currentColor; color:white; text-transform:uppercase; text-decoration:none; letter-spacing:.08em; font-weight:850; font-size:13px; transition:.2s ease; cursor:pointer; }
.button:hover { transform:translateY(-2px); }
.button-solid { color:#04150c; background:var(--green); border-color:var(--green); box-shadow:0 10px 26px rgba(132,245,154,.18); }
.button-outline { background:transparent; }
.button-small { min-height:52px; padding-inline:28px; }
.hero { min-height:690px; position:relative; color:white; display:flex; align-items:center; background:url("assets/hero-triathlon.png") 57% center/cover no-repeat; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:23%; background:linear-gradient(transparent,rgba(3,15,22,.5)); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(1,17,27,.96) 0%,rgba(2,17,27,.69) 28%,rgba(2,17,27,.15) 58%,rgba(2,17,27,.08)),linear-gradient(180deg,rgba(2,16,25,.58),transparent 30%); }
.hero-content { position:relative; z-index:2; padding-top:108px; }
.eyebrow,.kicker { margin:0 0 17px; text-transform:uppercase; letter-spacing:.3em; font-weight:800; font-size:13px; }
.eyebrow span,.kicker span { display:block; width:42px; height:3px; background:var(--green); margin-bottom:23px; }
.hero h1 { margin:0; max-width:650px; font-size:clamp(60px,6.8vw,108px); line-height:.84; letter-spacing:-.055em; text-transform:uppercase; }
.hero-year { margin:12px 0 30px; font-size:32px; line-height:1; letter-spacing:.22em; font-weight:800; text-transform:uppercase; }
.event-facts { display:flex; flex-wrap:wrap; gap:28px; margin-bottom:30px; }
.event-facts > div { display:flex; align-items:center; gap:12px; min-width:160px; }
.event-facts svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.7; }
.event-facts span { font-size:13px; font-weight:750; text-transform:uppercase; line-height:1.2; }
.event-facts small { display:block; color:#b7c6ca; font-size:10px; letter-spacing:.08em; }
.hero-actions { display:flex; gap:20px; }
.hero-scroll { position:absolute; z-index:3; right:3.5vw; bottom:24px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; display:flex; align-items:center; gap:10px; opacity:.75; }
.section { padding-block:64px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }
.section-heading h2,.story h2,.athlete h2,.register h2 { margin:0; font-size:clamp(38px,4.4vw,66px); line-height:.98; letter-spacing:-.045em; }
.section-heading > a,.race-card a { color:#0a4f78; font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.06em; text-underline-offset:6px; }
.kicker { color:#44616d; margin-bottom:11px; font-size:11px; }
.kicker span { display:inline-block; vertical-align:middle; width:32px; height:2px; margin:0 12px 3px 0; }
.race-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.race-card { min-height:258px; position:relative; border-radius:3px; overflow:hidden; background-image:linear-gradient(100deg,rgba(1,17,26,.87),rgba(1,17,26,.2)),url("assets/hero-triathlon.png"); background-repeat:no-repeat; color:white; isolation:isolate; }
.race-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 28%,rgba(0,12,18,.78)); z-index:-1; }
.race-card > div { position:absolute; inset:auto 28px 26px; }
.race-card h3 { margin:2px 0 14px; font-size:28px; text-transform:uppercase; }
.race-card ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; font-weight:700; }
.race-card li span { display:inline-block; width:26px; color:var(--green); }
.race-number { margin:0; color:var(--green); font-size:11px; letter-spacing:.2em; font-weight:800; }
.race-card p:not(.race-number) { max-width:220px; line-height:1.5; }
.crop-swim { background-size:280%; background-position:33% 70%; }.crop-bike { background-size:250%; background-position:68% 70%; }.crop-road { background-size:220%; background-position:82% 60%; }.crop-run { background-size:250%; background-position:98% 70%; }
.story { position:relative; color:white; background:linear-gradient(90deg,rgba(1,17,27,.95) 0%,rgba(1,17,27,.78) 36%,rgba(1,17,27,.38)),url("assets/hero-triathlon.png") center 67%/cover no-repeat; }
.story-layout { min-height:330px; display:grid; grid-template-columns:1.05fr 1.4fr; align-items:center; gap:70px; }
.story-copy p:not(.kicker) { max-width:530px; color:#d2dcdf; line-height:1.6; }
.light { color:white; }
.feature-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.feature-row svg { width:58px; height:58px; fill:none; stroke:white; stroke-width:1.4; }
.feature-row strong { display:block; margin-top:12px; font-size:11px; line-height:1.4; text-transform:uppercase; letter-spacing:.08em; }
.athlete { display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:center; }
.athlete-copy > p:not(.kicker) { max-width:600px; color:var(--muted); line-height:1.7; font-size:17px; }
.info-pills { display:flex; gap:8px; flex-wrap:wrap; }
.info-pills span { border:1px solid var(--line); padding:9px 13px; border-radius:30px; font-size:12px; font-weight:700; }
.schedule { border-top:1px solid var(--ink); }
.schedule > div { display:grid; grid-template-columns:90px 1fr; gap:30px; padding:22px 5px; border-bottom:1px solid var(--line); }
.schedule time { color:#178446; font-weight:900; font-size:19px; }
.schedule span { color:var(--muted); }.schedule strong { display:block; color:var(--ink); text-transform:uppercase; font-size:13px; letter-spacing:.06em; }
.register { padding-block:80px; background:#061c28; color:white; }
.register-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; align-items:start; }
.register-layout > div > p:not(.kicker) { color:#b8c8cd; max-width:470px; line-height:1.6; }
.register-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.register-form label { font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.register-form input,.register-form select { display:block; width:100%; margin-top:8px; height:50px; border:1px solid #44606b; background:#0b2633; color:white; padding:0 14px; font:inherit; }
.register-form button { margin-top:19px; border:0; }
.form-message { grid-column:1/-1; min-height:24px; color:var(--green); }
.partners { display:flex; justify-content:space-between; gap:70px; padding-block:35px; }
.partners > div { display:flex; align-items:center; gap:38px; }
.partners small { color:#78909a; text-transform:uppercase; letter-spacing:.17em; }.partners strong { font-size:17px; }
footer { background:#03121a; color:white; padding-block:35px; } footer .shell { display:flex; align-items:center; justify-content:space-between; gap:20px; } footer a { text-underline-offset:5px; }.footer-brand .brand-copy strong { font-size:18px; }.footer-brand .brand-copy small { font-size:7px; }
@media (max-width:1100px) { .site-header { grid-template-columns:auto auto; justify-content:space-between; }.header-cta { display:none; }.menu-toggle { display:grid; width:44px; height:44px; place-content:center; gap:5px; border:1px solid rgba(255,255,255,.45); background:rgba(0,0,0,.15); }.menu-toggle span:not(.sr-only) { display:block; width:20px; height:2px; background:white; }.primary-nav { display:none; position:absolute; top:86px; right:28px; width:min(320px,calc(100% - 56px)); padding:20px; background:#061c28; flex-direction:column; gap:2px; box-shadow:0 20px 50px rgba(0,0,0,.3); }.primary-nav.open { display:flex; }.race-grid { grid-template-columns:1fr 1fr; }.story-layout { grid-template-columns:1fr; padding-block:55px; }.feature-row { padding-bottom:25px; }.partners { flex-direction:column; }.partners > div { flex-wrap:wrap; }.hero { min-height:760px; }}
@media (max-width:720px) { :root { --shell:calc(100% - 36px); }.site-header { height:88px; padding-inline:18px; }.brand-mark { width:64px; }.brand-copy strong { font-size:18px; }.brand-copy small { font-size:6px; }.hero { min-height:760px; align-items:end; background-position:66% center; }.hero-content { padding:120px 0 70px; }.hero h1 { font-size:58px; }.hero-year { font-size:20px; }.event-facts { display:grid; gap:15px; }.hero-actions { flex-direction:column; width:100%; }.hero-scroll { display:none; }.section-heading { align-items:start; gap:18px; }.section-heading > a { text-align:right; }.race-grid { grid-template-columns:1fr; }.race-card { min-height:240px; }.feature-row { grid-template-columns:1fr 1fr; }.athlete,.register-layout { grid-template-columns:1fr; gap:45px; }.register-form { grid-template-columns:1fr; }.partners > div { align-items:flex-start; flex-direction:column; gap:14px; border-bottom:1px solid var(--line); padding-bottom:25px; } footer .shell { flex-direction:column; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }