:root { --ink:#071922; --blue:#0d4358; --sea:#86b9c2; --mist:#eaf3f4; --sand:#f9f8f3; --line:rgba(7,25,34,.17); }
.package-card .package-price { color:white; font-family:"DM Serif Display",serif; font-size:31px; line-height:1; margin:12px 0 4px; } .package-price small { display:block; font-family:"DM Sans",sans-serif; font-size:9px; line-height:1; letter-spacing:.12em; text-transform:uppercase; color:var(--sea); margin-bottom:6px; } .package-price span { font-family:"DM Sans",sans-serif; color:#bed0d3; font-size:11px; letter-spacing:0; }
.package-card .package-detail { margin:0 0 10px; color:var(--sea); font-size:10px; font-weight:700; letter-spacing:.06em; }
.package-list { grid-template-columns:repeat(2,1fr); } .coming-soon { margin-top:auto; color:var(--sea); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }
.package-includes { grid-column:1 / -1; margin:8px 0 0; padding-top:21px; border-top:1px solid rgba(255,255,255,.2); color:#c5dadd; font-size:13px; font-weight:500; position:relative; }
.custom-callout { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:27px clamp(24px,8vw,130px); background:var(--sea); color:var(--ink); } .custom-callout p { margin:0; font-family:"DM Serif Display",serif; font-size:clamp(25px,3.2vw,42px); line-height:1; letter-spacing:-.04em; } .custom-callout a { display:flex; flex-direction:column; align-items:flex-end; color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; } .custom-callout a span { margin-top:2px; font-size:11px; font-weight:500; } @media (max-width: 620px) { .custom-callout { align-items:flex-start; flex-direction:column; } .custom-callout a { align-items:flex-start; white-space:normal; } }
.hero-copy,.custom-callout,.join { position:relative; overflow:hidden; } .hero-copy > :not(.wave-accent),.custom-callout > :not(.wave-accent),.join > :not(.wave-accent) { position:relative; } .wave-hero-copy { position:absolute; left:-50px; bottom:43px; width:180px; color:rgba(134,185,194,.43); transform:rotate(-9deg); } .wave-ripple-about { position:absolute; left:44%; top:42px; width:135px; color:var(--sea); opacity:.48; transform:rotate(6deg); } .custom-callout { position:relative; overflow:hidden; } .wave-callout { position:absolute; right:-25px; top:-17px; width:190px; color:rgba(255,255,255,.48); transform:rotate(-11deg); } .wave-ripple-testimonials { position:absolute; left:43%; bottom:47px; width:145px; color:var(--blue); opacity:.16; transform:rotate(8deg); } .wave-join { position:absolute; right:-72px; top:42px; width:235px; color:var(--sea); opacity:.55; transform:rotate(-10deg); }
.wave-accent { overflow:visible; pointer-events:none; } .wave-accent path { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; } .wave-hero { position:absolute; right:34px; bottom:44px; width:205px; color:rgba(255,255,255,.78); } .wave-hero-two { position:absolute; left:-70px; top:74px; width:180px; color:rgba(134,185,194,.58); transform:rotate(14deg); } .about,.packages,.testimonials { position:relative; overflow:hidden; } .wave-about { position:absolute; right:-42px; top:105px; width:215px; color:var(--sea); opacity:.58; transform:rotate(-8deg); } .wave-about-two { position:absolute; left:-94px; bottom:65px; width:200px; color:var(--blue); opacity:.16; transform:rotate(8deg); } .wave-packages { position:absolute; left:-70px; bottom:42px; width:230px; color:rgba(134,185,194,.32); transform:rotate(10deg); } .wave-testimonials { position:absolute; right:-55px; top:82px; width:220px; color:var(--blue); opacity:.2; transform:rotate(-10deg); } .wave-testimonials-two { position:absolute; left:30px; bottom:18px; width:150px; color:var(--sea); opacity:.6; transform:rotate(6deg); } .about-grid,.packages-intro,.package-list,.testimonial-heading,.quotes,.testimonials > .section-label { position:relative; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--sand); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; } .site-header { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,80px); border-bottom:1px solid var(--line); background:rgba(249,248,243,.95); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); } .brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:9px; font-weight:700; font-size:10px; line-height:1.03; letter-spacing:.1em; } .brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--blue); color:white; font-size:11px; letter-spacing:-.06em; } .brand em { font-size:7px; font-style:normal; letter-spacing:.2em; } .nav { display:flex; align-items:center; gap:clamp(16px,2.8vw,44px); } .nav a { text-decoration:none; color:var(--ink); font-size:13px; font-weight:600; } .nav .nav-cta { background:var(--ink); color:white; padding:11px 16px; } .nav-cta span { margin-left:5px; color:var(--sea); font-size:16px; } .menu-toggle { display:none; background:none; border:0; font-size:22px; }
.hero { min-height:calc(100vh - 82px); display:grid; grid-template-columns:1.08fr .92fr; position:relative; overflow:hidden; } .hero-copy { background:var(--blue); color:white; display:flex; flex-direction:column; justify-content:center; padding:clamp(60px,10vw,150px) clamp(24px,9vw,145px); } .eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:.17em; font-weight:700; margin:0 0 22px; color:var(--sea); } h1,h2,h3 { margin:0; line-height:.95; letter-spacing:-.055em; } h1,h2 { font-family:"DM Serif Display",serif; font-weight:400; } h1 { font-size:clamp(62px,8vw,126px); } h1 i,h2 i { font-weight:400; color:var(--sea); } .hero-text { max-width:345px; color:#d6e7e9; margin:28px 0 36px; } .button { display:inline-flex; align-items:center; justify-content:space-between; gap:34px; width:max-content; padding:14px 17px; font-weight:700; text-decoration:none; border:0; cursor:pointer; font-family:inherit; font-size:13px; } .button-light { background:white; color:var(--ink); } .button span { font-size:18px; color:var(--sea); } .hero-image-wrap { position:relative; min-height:450px; } .hero-image { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; object-position:58% center; filter:saturate(.8) contrast(1.04); } .hero-note { position:absolute; bottom:30px; left:-43px; background:var(--mist); padding:19px 26px 19px 18px; font-family:"DM Serif Display",serif; font-size:21px; line-height:1.05; color:var(--blue); } .hero-note span { display:block; font-family:"DM Sans"; font-size:10px; letter-spacing:.15em; color:#567a83; margin-bottom:6px; } .hero-side { position:absolute; right:17px; bottom:24px; color:white; font-size:9px; letter-spacing:.16em; writing-mode:vertical-rl; }
.section { padding:clamp(80px,10vw,145px) clamp(24px,8vw,130px); } .section-label { font-size:11px; text-transform:uppercase; letter-spacing:.15em; font-weight:700; display:flex; gap:14px; align-items:center; } .section-label span { color:var(--sea); } .about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,10vw,150px); align-items:center; max-width:1150px; margin:55px auto 0; } .about-image-box { position:relative; } .about-image-box img { display:block; width:100%; height:540px; object-fit:cover; object-position:42% center; filter:saturate(.75); } .image-stamp { position:absolute; right:-29px; top:35px; display:grid; place-content:center; height:114px; width:114px; border-radius:50%; text-align:center; background:var(--sea); color:var(--ink); font-size:10px; line-height:1.12; letter-spacing:.11em; font-weight:700; transform:rotate(11deg); } h2 { font-size:clamp(48px,5.5vw,82px); } .about-copy .eyebrow { margin-bottom:16px; } .about-copy > p:not(.eyebrow) { max-width:490px; margin:28px 0 0; color:#3d5057; } .text-link { display:inline-flex; gap:16px; margin-top:34px; color:var(--blue); text-decoration:none; font-size:13px; font-weight:700; border-bottom:1px solid var(--blue); padding-bottom:6px; }
.packages { background:var(--ink); color:white; display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(40px,8vw,120px); } .section-label-light { color:#d8eaec; } .packages-intro p { color:#afc6ca; max-width:350px; margin-top:30px; } .package-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#35525e; align-self:center; } .package-card { min-height:340px; background:var(--ink); padding:27px 23px; display:flex; flex-direction:column; } .package-card.featured { background:var(--blue); } .package-number { color:var(--sea); font-size:11px; letter-spacing:.14em; } .package-card h3 { font-family:"DM Serif Display"; font-size:37px; font-weight:400; margin-top:auto; } .package-card p { font-size:13px; color:#bed0d3; margin:15px 0 25px; } .package-card a { text-decoration:none; color:white; font-weight:700; font-size:12px; display:flex; justify-content:space-between; } .package-card a span { color:var(--sea); font-size:17px; }
.testimonials { background:var(--mist); } .testimonial-heading { display:flex; align-items:flex-end; justify-content:space-between; margin:45px 0 60px; gap:30px; } .testimonial-heading p { max-width:240px; margin:0; color:#52717a; } .quotes { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } figure { margin:0; padding:29px 28px 21px 0; min-height:260px; display:flex; flex-direction:column; } figure + figure { padding-left:28px; border-left:1px solid var(--line); } blockquote { margin:0; font-family:"DM Serif Display"; font-size:clamp(21px,2.05vw,30px); line-height:1.15; } figcaption { margin-top:auto; padding-top:28px; font-size:13px; font-weight:700; } .initial { display:inline-grid; place-items:center; background:var(--blue); color:white; width:25px; height:25px; border-radius:50%; margin-right:6px; font-size:10px; } figcaption small { color:#58747b; font-weight:400; }
.join { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,11vw,170px); padding:clamp(80px,10vw,145px) clamp(24px,12vw,190px); background:#fff; } .join-copy > p:not(.eyebrow) { color:#4b636a; max-width:355px; margin:29px 0 44px; } .contact-detail span { display:block; font-size:10px; letter-spacing:.14em; color:#5c7880; font-weight:700; margin-bottom:5px; } .contact-detail a { color:var(--blue); font-size:15px; font-weight:700; text-decoration:none; } .inquiry-form { display:flex; flex-direction:column; gap:20px; } label { color:var(--blue); font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; } input,select,textarea { display:block; width:100%; border:0; border-bottom:1px solid #a8bec3; padding:10px 0; border-radius:0; background:transparent; font-family:inherit; color:var(--ink); font-size:15px; outline:none; } textarea { resize:vertical; } input:focus,select:focus,textarea:focus { border-color:var(--blue); } ::placeholder { color:#91a6aa; } .button-dark { margin-top:7px; background:var(--ink); color:white; } .form-note { margin:0; font-size:11px; color:#6b8388; } footer { display:flex; justify-content:space-between; gap:20px; padding:26px clamp(24px,5vw,80px); background:var(--ink); color:#b5c9cc; font-size:11px; letter-spacing:.04em; } footer a { color:white; text-decoration:none; }
@media (max-width: 820px) { .site-header { height:68px; } .menu-toggle { display:block; } .nav { display:none; position:absolute; top:68px; left:0; right:0; padding:22px 24px; flex-direction:column; align-items:stretch; background:var(--sand); border-bottom:1px solid var(--line); } .nav.open { display:flex; } .nav .nav-cta { text-align:center; } .hero { grid-template-columns:1fr; } .hero-copy { min-height:520px; } .hero-image-wrap { height:390px; min-height:0; } .hero-note { left:20px; } .about-grid,.packages,.join { grid-template-columns:1fr; } .about-image-box { max-width:460px; } .about-image-box img { height:430px; } .package-list { max-width:630px; } .quotes { grid-template-columns:1fr; } figure,figure + figure { min-height:auto; padding:28px 0; border-left:0; border-bottom:1px solid var(--line); } .testimonial-heading { display:block; } .testimonial-heading p { margin-top:25px; } }
@media (max-width: 520px) { .hero-copy { min-height:490px; } .package-list { grid-template-columns:1fr; } .package-card { min-height:245px; } .section { padding-left:24px; padding-right:24px; } .join { padding-left:24px; padding-right:24px; } footer { flex-direction:column; } }

/* Two equal training options — no unused third card. */
@media (min-width: 521px) { .package-list { grid-template-columns:repeat(2, minmax(0, 1fr)); } }