:root {

     --white: #ffffff;

     --mist: #f4f8fb;

     --navy: #0d3358;

     --navy-deep: #274b70;

     --lake: #1f6fd6;

     --red: #d81f2a;

     --ink: #152233;

     --ink-soft: #4d5c70;

     --line: #dde6ee;

 }



 * {

     box-sizing: border-box;

     margin: 0;

     padding: 0;

 }



 html {

     scroll-behavior: smooth;

 }



 body {

     background: var(--white);

     color: var(--ink);

     font-family: "Huninn", sans-serif;

     line-height: 1.5;

 }



 h1,

 h2,

 h3 {

     color: var(--navy-deep);

     letter-spacing: -0.01em;

 }



 .mono {

     font-family: 'Roboto Mono', monospace;

 }



 a {

     color: inherit;

 }



 img {

     max-width: 100%;

     display: block;

 }



 .wrap {

     max-width: 1080px;

     margin: 0 auto;

     padding: 0 28px;

 }



 /* ---------- Buoy line divider (signature element) ---------- */

 .buoy-line {

     width: 100%;

     display: block;

 }



 /* ---------- Header ---------- */

 header {

     position: sticky;

     top: 0;

     z-index: 50;

     background: rgba(255, 255, 255, 0.92);

     backdrop-filter: blur(6px);

     border-bottom: 1px solid var(--line);

 }



 .nav {

     display: flex;

     align-items: center;

     justify-content: space-between;

     padding: 16px 28px;

     max-width: 1080px;

     margin: 0 auto;

 }



 .brand {

     display: flex;

     align-items: center;

     gap: 10px;

     font-family: 'Archivo Black', sans-serif;

     font-size: 18px;

     color: var(--navy-deep);

     text-decoration: none;

 }



 .brand .dot {

     width: 14px;

     height: 14px;

     border-radius: 50%;

     background: var(--red);

     box-shadow: 5px 0 0 var(--white), 5px 0 0 2px var(--navy), 10px 0 0 var(--navy);

 }



 nav ul {

     list-style: none;

     display: flex;

     gap: 28px;

 }



 nav a {

     text-decoration: none;

     font-size: 14px;

     font-weight: 600;

     color: var(--ink-soft);

     transition: color .15s;

 }



 nav a:hover {

     color: var(--red);

 }



 .nav-cta {

     background: var(--red);

     color: var(--white) !important;

     padding: 9px 18px;

     border-radius: 3px;

     font-weight: 600 !important;

 }



 .nav-cta:hover {

     background: #b5171f;

     color: var(--white) !important;

 }



 .burger {

     display: none;

 }



 /* ---------- Hero ---------- */

 .hero {

     position: relative;

     background: linear-gradient(180deg, var(--mist) 0%, var(--white) 100%);

     padding: 88px 0 0;

     overflow: hidden;

 }



 .hero-inner {

     align-items: center;

     padding-bottom: 56px;

 }



 .hero h1 {

     font-size: clamp(34px, 5vw, 56px);

     line-height: 1.04;

     margin-bottom: 20px;

 }



 .hero h1 span {

     color: var(--red);

 }



 .hero p {

     font-size: 17px;

     color: var(--ink-soft);

     margin-bottom: 28px;

 }



 .hero-actions {

     display: flex;

     gap: 14px;

     flex-wrap: wrap;

 }



 .btn {

     display: inline-block;

     padding: 13px 24px;

     border-radius: 3px;

     font-weight: 600;

     font-size: 14px;

     text-decoration: none;

     transition: transform .15s, box-shadow .15s;

 }



 .btn:hover {

     transform: translateY(-1px);

 }



 .btn-primary {

     background: var(--navy-deep);

     color: var(--white);

 }



 .btn-primary:hover {

     box-shadow: 0 8px 20px rgba(8, 37, 66, .25);

 }



 .btn-ghost {

     background: transparent;

     color: var(--navy-deep);

     border: 1.5px solid var(--navy-deep);

 }



 .hero-stats {

     display: flex;

     gap: 28px;

     margin-top: 36px;

     padding-top: 24px;

     border-top: 1px solid var(--line);

 }



 .stat-num {

     font-family: 'Roboto Mono', monospace;

     font-size: 26px;

     font-weight: 600;

     color: var(--navy-deep);

 }



 .stat-label {

     font-size: 12px;

     color: var(--ink-soft);

     text-transform: uppercase;

     letter-spacing: .05em;

 }



 /* Hero graphic: skier + wake lines */

 .hero-art {

     position: relative;

     aspect-ratio: 1/1;

     background: radial-gradient(circle at 60% 35%, #eaf2fc 0%, transparent 60%);

 }



 /* ---------- Section shared ---------- */

 section {

     padding: 72px 0;

 }



 .section-head {

     max-width: 560px;

     margin-bottom: 44px;

 }



 .section-head .eyebrow {

     margin-bottom: 14px;

 }



 .section-head h2 {

     font-size: clamp(26px, 3.4vw, 36px);

     margin-bottom: 14px;

 }



 .section-head p {

     color: var(--ink-soft);

     font-size: 16px;

 }



 /* ---------- Programs ---------- */

 .programs {

     background: var(--mist);

 }



 .program-grid {

     display: grid;

     grid-template-columns: repeat(3, 1fr);

     gap: 20px;

 }



 .program-card {

     background: var(--white);

     border: 1px solid var(--line);

     border-radius: 6px;

     padding: 28px 24px;

     position: relative;

     overflow: hidden;

 }



 .program-card::before {

     content: '';

     position: absolute;

     top: 0;

     left: 0;

     width: 100%;

     height: 4px;

     background: var(--card-accent, var(--lake));

 }



 .program-card:nth-child(1) {

     --card-accent: var(--red);

 }



 .program-card:nth-child(2) {

     --card-accent: var(--lake);

 }



 .program-card:nth-child(3) {

     --card-accent: var(--navy);

 }



 .program-card h3 {

     font-size: 18px;

     margin-bottom: 10px;

 }



 .program-card p {

     color: var(--ink-soft);

     font-size: 14.5px;

 }



 .card-tag {

     font-family: 'Roboto Mono', monospace;

     font-size: 11px;

     font-weight: 600;

     letter-spacing: .06em;

     color: var(--card-accent, var(--lake));

     text-transform: uppercase;

     margin-bottom: 12px;

     display: block;

 }



 /* ---------- Schedule ---------- */

 .schedule-table {

     width: 100%;

     border-collapse: collapse;

     font-size: 15px;

 }



 .schedule-table th {

     text-align: center;

     font-family: 'Roboto Mono', monospace;

     font-size: 11px;

     text-transform: uppercase;

     letter-spacing: .06em;

     color: var(--ink-soft);

     padding: 0 0 12px;

     border-bottom: 2px solid var(--navy-deep);

 }



 .schedule-table td {

     text-align: center;

     padding: 16px 0;

     border-bottom: 1px solid var(--line);

 }



 .schedule-table tr:last-child td {

     border-bottom: none;

 }



 .day-pill {

     display: inline-block;

     font-family: 'Roboto Mono', monospace;

     font-weight: 600;

     font-size: 13px;

     color: var(--navy-deep);

 }



 .slot-dot {

     display: inline-block;

     width: 8px;

     height: 8px;

     border-radius: 50%;

     background: var(--red);

     margin-right: 8px;

 }



 /* ---------- About / split ---------- */

 .about-inner {

     display: grid;

     grid-template-columns: 0.9fr 1.1fr;

     gap: 56px;

     align-items: center;

 }



 .about-visual {

     background: var(--navy-deep);

     border-radius: 8px;

     aspect-ratio: 4/3.2;

     position: relative;

     overflow: hidden;

 }



 .about-copy p {

     color: var(--ink-soft);

     margin-bottom: 16px;

     font-size: 16px;

 }



 .about-list {

     list-style: none;

     margin-top: 20px;

     display: flex;

     flex-direction: column;

     gap: 12px;

 }



 .about-list li {

     display: flex;

     align-items: baseline;

     gap: 10px;

     font-size: 15px;

 }



 .about-list li::before {

     content: '';

     width: 6px;

     height: 6px;

     background: var(--red);

     border-radius: 50%;

     flex-shrink: 0;

     transform: translateY(-3px);

 }



 /* ---------- Join / CTA ---------- */

 .join {

     background: var(--navy-deep);

     color: var(--white);

     text-align: center;

     position: relative;

     overflow: hidden;

 }



 .join h2 {

     color: var(--white);

     font-size: clamp(28px, 4vw, 40px);

     margin-bottom: 14px;

 }



 .join p {

     color: #b9c8db;

     max-width: 480px;

     margin: 0 auto 30px;

     font-size: 16px;

 }



 .join .btn-primary {

     background: var(--red);

 }



 .join .btn-primary:hover {

     box-shadow: 0 8px 24px rgba(216, 31, 42, .35);

 }



 /* ---------- Footer ---------- */

 footer {

     padding: 44px 0 32px;

 }



 .footer-inner {

     display: flex;

     justify-content: space-between;

     align-items: flex-start;

     flex-wrap: wrap;

     gap: 24px;

     padding-top: 32px;

     border-top: 1px solid var(--line);

 }



 .footer-brand {

     font-size: 16px;

     color: var(--navy-deep);

 }



 .footer-cols {

     display: flex;

     gap: 56px;

     flex-wrap: wrap;

 }



 .footer-col h4 {

     font-size: 12px;

     text-transform: uppercase;

     letter-spacing: .06em;

     color: var(--ink-soft);

     margin-bottom: 12px;

     font-weight: 600;

 }



 .footer-col a {

     display: block;

     text-decoration: none;

     color: var(--ink);

     font-size: 14px;

     margin-bottom: 8px;

 }



 .footer-col a:hover {

     color: var(--red);

 }



 .footer-bottom {

     margin-top: 36px;

     padding-top: 20px;

     border-top: 1px solid var(--line);

     font-size: 13px;

     color: var(--ink-soft);

     display: flex;

     justify-content: space-between;

     flex-wrap: wrap;

     gap: 10px;

 }



 /* ---------- Responsive ---------- */

 @media (max-width:820px) {

     nav ul {

         display: none;

     }



     .hero-inner {

         grid-template-columns: 1fr;

     }



     .hero-art {

         order: -1;

         max-width: 280px;

         margin: 0 auto;

     }



     .program-grid {

         grid-template-columns: 1fr;

     }



     .about-inner {

         grid-template-columns: 1fr;

     }



     .about-visual {

         order: -1;

     }



     .hero-stats {

         flex-wrap: wrap;

         gap: 22px;

     }



     .footer-inner {

         flex-direction: column;

     }

 }



 :focus-visible {

     outline: 2px solid var(--lake);

     outline-offset: 2px;

 }