/* ========================================================================== Rolling Bear BJJ — vertical single page Palette lifted from the current WordPress site: navy #141b38 · cyan #0096cc · coral #d7505e · slate #434960 · mist #e6e6eb No external fonts, no frameworks, no build step. ========================================================================== */ :root{ --navy:#141b38; --navy-900:#0b0f22; --navy-800:#101632; --navy-700:#1b2245; --navy-600:#252d55; --cyan:#0096cc; --cyan-400:#21b6ec; --cyan-700:#066aab; --coral:#d7505e; --coral-600:#c33f4d; --slate:#434960; --mist:#e6e6eb; --white:#fff; --ink:var(--white); --ink-dim:#a8b0cc; --hairline:rgba(255,255,255,.12); --hud-h:76px; --ann-h:34px; --sticky:calc(var(--ann-h) + var(--hud-h)); --pad-x:clamp(1.25rem, 4.5vw, 6rem); --sec-y:clamp(4.5rem, 9vw, 9rem); --ease:cubic-bezier(.22,.61,.36,1); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif; /* ---- third-party schedule height ---- The embed is cross-origin, so its content height cannot be read from this page (same-origin policy) and it does not post its height out. */ --embed-schedule-h:680px; --embed-schedule-h-sm:720px; } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--sans); background:var(--navy-900); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* NB: do NOT use overflow-x:hidden here — it makes its own scroll container, which freezes window.scrollY and kills the sticky header, progress bar and scroll-spy. Each .panel already clips its own overflow. */ } img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} h1,h2,h3,p,blockquote,figure,ul{margin:0} ul{list-style:none;padding:0} button,input,select,textarea{font:inherit;color:inherit} .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;top:.5rem;left:.5rem;z-index:999; transform:translateY(-200%); background:var(--cyan);color:#fff;padding:.6rem 1rem;border-radius:6px;font-weight:700; transition:transform .18s var(--ease); } .skip-link:focus{transform:none} :focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px;border-radius:4px} /* ============================ Announcement ============================== */ .announce{ position:fixed;inset:0 0 auto 0;height:var(--ann-h);z-index:60; background:var(--coral); display:flex;align-items:center;overflow:hidden; } .announce__track{ display:flex;gap:3rem;white-space:nowrap; padding-left:1rem; font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; animation:marquee 26s linear infinite; } @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.33%)}} /* ================================= HUD ================================= */ .hud{ position:fixed;top:var(--ann-h);left:0;right:0;height:var(--hud-h);z-index:55; display:flex;align-items:center;gap:1.5rem; padding:0 var(--pad-x); background:rgba(11,15,34,.55); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid transparent; transition:background .3s var(--ease),border-color .3s var(--ease); } .hud.is-stuck{ background:rgba(11,15,34,.92); border-bottom-color:var(--hairline); } .hud__brand{display:flex;align-items:center;flex:0 0 auto} /* wordmark is 360x79 — rendered at half size, i.e. exactly 2x density */ .hud__brand img{width:198px;height:auto;object-fit:contain} .hud__nav{display:flex;gap:.3rem;margin-left:auto} .hud__nav a{ padding:.5rem .9rem;border-radius:999px; font-size:.98rem;font-weight:600;color:var(--ink-dim); transition:color .2s var(--ease),background .2s var(--ease); } .hud__nav a:hover{color:#fff;background:rgba(255,255,255,.07)} .hud__nav a[aria-current="true"]{color:#fff;background:rgba(0,150,204,.22)} .hud__actions{display:flex;align-items:center;gap:.75rem} .hud__instagram,.hud__phone{ display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px; border:1px solid var(--hairline);border-radius:50%;color:var(--ink-dim); background:rgba(255,255,255,.045);transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease); } .hud__instagram:hover,.hud__phone:hover{color:#fff;border-color:rgba(33,182,236,.55);background:rgba(0,150,204,.16);transform:translateY(-1px)} .hud__burger{ display:none;width:42px;height:42px;border:1px solid var(--hairline); background:transparent;border-radius:10px;cursor:pointer; flex-direction:column;justify-content:center;align-items:center;gap:4px; } .hud__burger span{display:block;width:17px;height:2px;background:#fff;border-radius:2px;transition:.22s var(--ease)} .hud__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .hud__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .hud__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ============================== Mobile nav ============================== */ .mnav{ position:fixed;inset:var(--sticky) 0 0 0;z-index:54; background:var(--navy-900); padding:1.5rem var(--pad-x) 2rem; display:flex;flex-direction:column;gap:.15rem; overflow-y:auto; } .mnav[hidden]{display:none} .mnav nav{display:flex;flex-direction:column} .mnav a{ padding:.9rem 0;border-bottom:1px solid var(--hairline); font-size:1.35rem;font-weight:700;letter-spacing:-.02em; } .mnav__call{ margin-top:1.25rem;border:0!important; background:var(--cyan);text-align:center;border-radius:12px; padding:1rem!important;font-size:1rem!important; } /* ====================== Scroll progress (top hairline) ================== */ .rail{ position:fixed;top:0;left:0;right:0;z-index:70; height:3px;pointer-events:none; } .rail__bar{height:100%;background:transparent} .rail__fill{ display:block;height:100%;width:0; background:linear-gradient(90deg,var(--cyan),var(--cyan-400)); box-shadow:0 0 12px rgba(33,182,236,.8); } .rail__count{display:none} /* ============================== Scroll hint ============================= */ .hint{ position:absolute;left:var(--pad-x);top:50%;bottom:auto;z-index:5; display:flex;align-items:center;gap:.6rem; font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-dim);transform:translateY(-50%); transition:opacity .4s var(--ease); } .hint svg{width:11px;height:52px;animation:nudge 1.9s var(--ease) infinite} @keyframes nudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}} .hint.is-gone{opacity:0} /* ================================ Sections ============================== */ .track{display:block} .panel{ position:relative; overflow:hidden; background:var(--navy); /* A target needs one offset for the fixed announcement + HUD. Keeping it here (rather than on both the page and the panel) prevents anchors from stopping an extra header-height too early. */ scroll-margin-top:calc(var(--sticky) + 1rem); } .panel:nth-of-type(even){background:var(--navy-800)} /* thin cyan seam between sections */ .panel + .panel::before{ content:"";position:absolute;z-index:3;top:0;left:var(--pad-x);right:var(--pad-x);height:1px; background:linear-gradient(to right,transparent,var(--cyan),transparent); opacity:.6;pointer-events:none; } .panel__inner{ position:relative;z-index:2; width:100%;max-width:1320px;margin:0 auto; padding:var(--sec-y) var(--pad-x); } .panel__bg{position:absolute;inset:0;z-index:0} .panel__bg img{width:100%;height:100%;object-fit:cover} /* Background video sits ABOVE the fallback image but BELOW the tint overlay. z-index 1 keeps it over .panel__bg (0) and under .panel__inner (2). If the video never loads, the image underneath is simply what you see. */ .panel__vid{ position:absolute;inset:0;z-index:1; overflow:hidden;pointer-events:none; } /* An iframe can't use object-fit, so cover is done with aspect-ratio: pin the height to the container and let width overflow, centred — which crops the sides rather than letterboxing. The container is always taller than 16:9 here (hero min-height is 100svh and the content pushes past it), so this is the correct branch; the media query handles ultrawide displays where the container finally becomes wider than 16:9. */ .panel__vid iframe{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); aspect-ratio:16/9; height:100%;width:auto; border:0;pointer-events:none; } @media (min-aspect-ratio:16/9){ .panel__vid iframe{width:100%;height:auto} } /* the tint has to ride on top of the video too */ .panel--hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(11,15,34,.92) 0%,rgba(11,15,34,.68) 45%,rgba(11,15,34,.42) 100%), radial-gradient(120% 90% at 78% 24%,rgba(0,150,204,.16),transparent 62%); } .panel__bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(11,15,34,.95) 0%,rgba(11,15,34,.78) 48%,rgba(11,15,34,.40) 100%), radial-gradient(120% 90% at 82% 22%,rgba(0,150,204,.20),transparent 62%); } .panel__bg--soft::after{ background:linear-gradient(90deg,rgba(11,15,34,.96),rgba(11,15,34,.88)); } /* ---- reveal on scroll ---- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.is-in{opacity:1;transform:none} /* ============================== Typography ============================== */ .eyebrow{ display:flex;align-items:center;gap:.6rem; font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase; color:var(--cyan-400);margin-bottom:1.1rem; } .eyebrow i{display:block;width:26px;height:2px;background:currentColor;border-radius:2px} .eyebrow--coral{color:var(--coral)} .display{ font-size:clamp(2.6rem,6vw,5.4rem); line-height:.94;letter-spacing:-.035em;font-weight:800; margin-bottom:1.15rem; } .display__l1,.display__l2,.display__l3{display:block} .display__l1{font-size:.42em;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-dim)} .display__l2{color:var(--cyan-400)} .display__l3 em{font-style:normal;color:var(--ink-dim)} .h-xl{ font-size:clamp(2rem,4.6vw,3.9rem); line-height:1.02;letter-spacing:-.03em;font-weight:800; margin-bottom:1.2rem; } .h-xl em{font-style:normal;color:var(--cyan-400)} .lede{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.6;color:#d3d8ea;margin-bottom:1rem;max-width:52ch} .body{font-size:.95rem;line-height:1.7;color:var(--ink-dim);margin-bottom:1rem;max-width:58ch} .fineprint{font-size:.8rem;line-height:1.6;color:#8d95b5} /* ================================ Buttons =============================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.9rem 1.5rem;border-radius:999px;border:1px solid transparent; font-size:.88rem;font-weight:800;letter-spacing:.065em;text-transform:uppercase;cursor:pointer; transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease); white-space:nowrap; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--accent{background:var(--cyan);color:#fff;box-shadow:0 8px 30px -10px rgba(0,150,204,.8)} .btn--accent:hover{background:var(--cyan-400)} .btn--coral{background:var(--coral);color:#fff;box-shadow:0 8px 30px -10px rgba(215,80,94,.8)} .btn--coral:hover{background:var(--coral-600)} .btn--ghost{background:rgba(255,255,255,.07);border-color:var(--hairline);color:#fff} .btn--ghost:hover{background:rgba(255,255,255,.13)} .btn--outline{background:transparent;border-color:var(--cyan);color:var(--cyan-400)} .btn--outline:hover{background:rgba(0,150,204,.12)} .btn--lg{padding:1.05rem 1.9rem;font-size:.95rem} .btn--xl{padding:1.25rem 2.45rem;font-size:1.08rem;font-weight:800} .btn--sm{padding:.6rem 1.05rem;font-size:.78rem} .btn--block{width:100%} .link-arrow{ display:inline-flex;align-items:center;gap:.45rem; font-size:.82rem;font-weight:700;color:var(--cyan-400); border-bottom:1px solid rgba(33,182,236,.4);padding-bottom:2px; } .link-arrow::after{content:"→";transition:transform .2s var(--ease)} .link-arrow:hover::after{transform:translateX(4px)} /* ================================ Layout ================================ */ .grid-2{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(1.75rem,4vw,4.5rem);align-items:center; } .grid-2--faq{grid-template-columns:.85fr 1.15fr;align-items:start} .grid-2--trial{grid-template-columns:.9fr 1.1fr;align-items:start} /* =============================== 01 Hero ================================ */ .panel--hero{min-height:100svh;display:flex;align-items:center} .panel--hero .panel__inner{ padding-top:calc(var(--sticky) + clamp(1.5rem,3vw,2.5rem)); padding-bottom:clamp(2.5rem,4vw,3.5rem); } .hero__grid{ display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(1.75rem,4vw,4rem);align-items:center; } .hero__copy{min-width:0} .hero__aside{min-width:0} .hero__lede{ font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6; color:#d3d8ea;max-width:42ch;margin-bottom:1.5rem; } .hero__cta{display:flex;flex-wrap:wrap;gap:.75rem} /* ---- stats: stacked number over label, divided into a rule of four. The old version set the label beside the number on a shared baseline, which left the two-line label visually unanchored. ---- */ .stats{ display:grid;grid-template-columns:repeat(4,1fr); margin-top:clamp(1.75rem,3.5vw,2.75rem); border-top:1px solid var(--hairline); } .stat{ position:relative; padding:clamp(1rem,1.8vw,1.4rem) clamp(.85rem,1.6vw,1.5rem); } .stat + .stat::before{ content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px; background:var(--hairline); } .stat::after{ content:"";position:absolute;left:0;top:-1px;width:0;height:2px; background:var(--cyan); transition:width .5s var(--ease); } .stat:hover::after{width:100%} .stat__n{ display:block; font-size:clamp(2.1rem,3.4vw,3rem);font-weight:800;letter-spacing:-.045em; line-height:1;color:#fff;margin-bottom:.5rem; } .stat__n sup{font-size:.44em;top:-.75em;position:relative;color:var(--cyan-400);margin-left:.04em} .stat__l{ display:block; font-size:.72rem;line-height:1.4;font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:var(--ink-dim); } /* =============================== 02 About =============================== */ .define{ background:linear-gradient(160deg,var(--navy-700),var(--navy-800)); border:1px solid var(--hairline);border-radius:20px; padding:clamp(1.4rem,2.4vw,2.2rem); box-shadow:0 30px 70px -40px #000; } .define__q{ font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:800;letter-spacing:-.02em; margin-bottom:.9rem;color:#fff; } .define__q em{color:var(--cyan-400);font-style:normal} .define__eyebrow{font-size:.64rem!important;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--cyan-400)!important} .define p{font-size:.9rem;line-height:1.68;color:var(--ink-dim);margin-bottom:.8rem} .define strong{color:#fff} .define__list{display:grid;gap:.55rem;margin:1.1rem 0 1.25rem} .define__list li{position:relative;padding-left:1.15rem;font-size:.8rem;line-height:1.5;color:#d3d8ea} .define__list li::before{content:"";position:absolute;left:0;top:.48rem;width:.44rem;height:.44rem;border-radius:50%;background:var(--cyan)} .define__media{margin-top:1.1rem;border-radius:14px;overflow:hidden;aspect-ratio:16/9} .define__media img{width:100%;height:100%;object-fit:cover} .about-intro{max-width:31ch;margin:0 0 1.2rem;font-size:clamp(1.2rem,2vw,1.5rem);font-weight:650;line-height:1.55;color:#e5e9f5} .about-reason{max-width:52ch;margin:0 0 1.65rem;font-size:1rem;line-height:1.7;color:var(--ink-dim)} .about-photos{position:relative;min-height:clamp(23rem,38vw,31rem);padding:0 0 2rem 2rem}.about-photos__main,.about-photos__detail{overflow:hidden;border:1px solid var(--hairline);border-radius:20px;background:var(--navy-700);box-shadow:0 30px 70px -40px #000}.about-photos__main{height:100%}.about-photos__main img,.about-photos__detail img{width:100%;height:100%;object-fit:cover}.about-photos__detail{position:absolute;left:0;bottom:0;width:45%;aspect-ratio:1/1;transform:rotate(-3deg)} @media (max-width:1180px){.about-photos{max-width:680px;min-height:30rem}}@media (max-width:560px){.about-photos{min-height:23rem;padding:0 0 1.25rem 1.25rem}.about-photos__detail{width:46%}.about-intro{font-size:clamp(1.12rem,5vw,1.35rem)}} /* =============================== 03 Values ============================== */ .values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.75rem);margin-top:2rem} .value{ position:relative;padding:clamp(1.5rem,2.4vw,2.25rem); border:1px solid var(--hairline);border-radius:18px; background:rgba(255,255,255,.035); transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease); } .value:hover{transform:translateY(-6px);border-color:rgba(33,182,236,.5);background:rgba(0,150,204,.09)} .value__n{ display:block;font-size:.72rem;font-weight:800;letter-spacing:.2em; color:var(--cyan);margin-bottom:.85rem; } .value__icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:1.15rem;border:1px solid rgba(33,182,236,.35);border-radius:50%;background:rgba(0,150,204,.14);color:var(--cyan-400);font-size:1.35rem;font-weight:800;line-height:1} .value h3{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:800;letter-spacing:-.025em;margin-bottom:.7rem} .value p{font-size:.88rem;line-height:1.65;color:var(--ink-dim)} /* ============================== 04 Programs ============================= */ .progs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,1.8vw,1.5rem);margin-top:1.75rem} .prog{ position:relative;display:flex;flex-direction:column;min-height:34rem; border:1px solid var(--hairline);border-radius:18px;overflow:hidden; background:var(--navy-700);isolation:isolate;color:inherit;text-decoration:none; transition:transform .3s var(--ease),border-color .3s var(--ease); } .prog:hover{transform:translateY(-6px);border-color:rgba(33,182,236,.45)} .prog__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy-600)} .prog__media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(3,8,24,.28),rgba(3,8,24,.6));pointer-events:none} .prog__media img,.prog__media video{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s var(--ease)} .prog:hover .prog__media img,.prog:hover .prog__media video{transform:scale(1.03)} .prog__body{position:relative;z-index:1;min-height:0;margin-top:auto;padding:clamp(1.2rem,2vw,1.7rem);display:flex;flex-direction:column;gap:.7rem;flex:0 0 auto;background:linear-gradient(145deg,rgba(7,68,116,.7),rgba(9,17,47,.82));border-top:1px solid rgba(255,255,255,.15);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);text-shadow:0 1px 12px rgba(0,0,0,.7)} .prog__body h3{ display:flex;flex-wrap:wrap;align-items:center;gap:.55rem; font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:800;letter-spacing:-.02em; } .prog__body p{font-size:.85rem;line-height:1.65;color:var(--ink-dim)} .prog__body strong{color:#fff} .prog__meta{font-size:.8rem!important;color:#8d95b5!important} .prog__body .link-arrow{margin-top:auto;align-self:flex-start} .progs__more{display:flex;width:fit-content;margin:0 0 1.4rem;text-transform:uppercase;letter-spacing:.05em} .tag{ font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:.28rem .55rem;border-radius:999px; background:rgba(0,150,204,.22);color:var(--cyan-400); } .tag--soon{background:rgba(215,80,94,.2);color:var(--coral)} .chips{display:flex;flex-wrap:nowrap;gap:.25rem;width:100%} .chips li{ flex:1 1 0;white-space:nowrap;text-align:center;font-size:.6rem;font-weight:600;color:var(--ink-dim); border:1px solid var(--hairline);border-radius:999px;padding:.28rem .2rem; } .chips b{color:var(--cyan-400)} /* =============================== 05 Women =============================== */ .stamp{ display:inline-flex;flex-direction:column;gap:.2rem; border-left:3px solid var(--coral);padding-left:1rem;margin-top:1.5rem; } .stamp b{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1} .stamp span{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .women__photo{max-width:31rem;aspect-ratio:4/3;overflow:hidden;margin:1.5rem 0;border:1px solid rgba(240,98,146,.34);border-radius:16px;background:var(--navy-700);box-shadow:0 26px 60px -38px #000}.women__photo img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s var(--ease)}.women__photo:hover img{transform:scale(1.025)} /* ============================= 06 Schedule ============================== */ .panel--schedule .panel__inner{ padding-top:clamp(2.5rem,4vw,4rem); padding-bottom:clamp(2.5rem,4vw,4rem); } .sched{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem);margin-top:1.5rem} /* ---- native schedule, populated from the cached BJJLink data ---- */ .sched__native{ border:1px solid var(--hairline);border-radius:18px;overflow:hidden; background:rgba(11,15,34,.68); backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%); box-shadow:0 30px 70px -40px #000; } .sched__embedhead{ display:flex;align-items:baseline;justify-content:space-between;gap:1rem; padding:.85rem 1.15rem; background:linear-gradient(160deg,var(--navy-700),var(--navy-800)); border-bottom:1px solid var(--hairline); } .sched__embedhead h3{font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:#fff} .sched__embedhead span{ font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--cyan-400); } .schedule-scroll-hint{ display:none;align-items:center;gap:.55rem;padding:.7rem 1rem 0; font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#d3d8ea; } .schedule-scroll-hint.is-visible{display:flex} .schedule-scroll-hint span{font-size:1.1rem;line-height:1;color:var(--cyan-400);animation:schedule-nudge 1.8s ease-in-out infinite} @keyframes schedule-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(.35rem)}} .schedule-board{ display:grid;grid-template-columns:repeat(7,minmax(145px,1fr));gap:.7rem; align-items:start;grid-auto-rows:max-content;overflow-x:auto; padding:clamp(.8rem,1.5vw,1.15rem) clamp(.8rem,1.5vw,1.15rem) clamp(1.2rem,2vw,1.75rem); scrollbar-color:var(--cyan) transparent; } .schedule-day{ align-self:start;min-width:145px;height:max-content;border:1px solid var(--hairline);border-radius:12px; background:rgba(255,255,255,.055);overflow:hidden; } .schedule-day__name{ display:block;padding:.7rem .75rem;border-bottom:1px solid var(--hairline); font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-400); } .schedule-day__classes{display:flex;flex-direction:column;gap:.55rem;padding:.65rem} .schedule-class{ display:flex;flex-direction:column;gap:.32rem;padding:.62rem; border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--class-color,var(--cyan)); border-radius:8px;background:rgba(0,0,0,.17); } .schedule-class__time{font-size:.65rem;font-weight:800;letter-spacing:.04em;color:#d3d8ea} .schedule-class__name{font-size:.76rem;font-weight:750;line-height:1.35;color:#fff} .schedule-day__empty{padding:.2rem .1rem;font-size:.75rem;color:var(--ink-dim)} .schedule-board__loading,.schedule-board__error{grid-column:1/-1;padding:1rem;text-align:center;font-size:.85rem;color:var(--ink-dim)} .schedule-board__error{color:#ffc3ca} @media (max-width:760px){ .schedule-board{grid-template-columns:repeat(7,minmax(175px,1fr));} } /* free-trial prompt below the timetable */ .sched__trial{ display:grid;grid-template-columns:1fr auto; gap:1rem clamp(1.5rem,3vw,2.5rem);align-items:center; border:1px solid var(--hairline);border-radius:18px; padding:clamp(1.25rem,2vw,1.8rem); background:rgba(11,15,34,.72); backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%); } .sched__trial h3{font-size:clamp(1.28rem,2vw,1.55rem);font-weight:800;letter-spacing:-.025em;margin-bottom:.4rem;grid-column:1} .sched__trial p{font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.65;color:#d3d8ea;grid-column:1;max-width:62ch} .sched__trial .btn{grid-column:2;grid-row:1/span 2;white-space:nowrap;font-size:1rem;padding:1.02rem 1.6rem} @media (max-width:760px){ .sched__trial{grid-template-columns:1fr} .sched__trial .btn{grid-column:1;grid-row:auto;justify-self:start} } /* =========================== Trial booking modal ======================== */ .trial-modal{ position:fixed;inset:0;z-index:100;display:grid;place-items:center; padding:clamp(.5rem,1vw,1rem);background:rgba(3,6,17,.9); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .trial-modal[hidden]{display:none} .trial-modal__dialog{ position:relative;display:flex;flex-direction:column;width:min(100%,1400px);height:auto;max-height:calc(100svh - 1rem);overflow:hidden; border:1px solid rgba(255,255,255,.18);border-radius:22px; background:linear-gradient(145deg,rgba(19,31,70,.985),rgba(10,15,38,.985)); box-shadow:0 36px 100px rgba(0,0,0,.55); } .trial-modal__close{ position:absolute;z-index:2;top:.9rem;right:.9rem;display:grid;place-items:center;width:2.45rem;height:2.45rem;padding:0; border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(8,13,34,.62);color:#f6f8ff; font-size:1.35rem;font-weight:300;line-height:1;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease); } .trial-modal__close:hover,.trial-modal__close:focus-visible{background:rgba(215,80,94,.32);border-color:rgba(255,173,183,.8);transform:rotate(90deg);outline:none} .trial-modal__chooser{ position:relative;isolation:isolate;overflow:hidden;padding:clamp(2rem,5vw,4.5rem); background: linear-gradient(rgba(12,19,48,.88),rgba(12,19,48,.9)), radial-gradient(circle at 10% 5%,rgba(33,182,236,.28),transparent 32%), radial-gradient(circle at 96% 96%,rgba(215,80,94,.3),transparent 38%), url("../img/rb-roll-1200.webp") center/cover no-repeat; } .trial-modal__chooser::before{ content:"";position:absolute;z-index:-1;width:28rem;height:28rem;right:-12rem;top:-15rem; border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 3rem rgba(33,182,236,.045),0 0 0 7rem rgba(33,182,236,.025); } .trial-modal__chooser .h-xl{font-size:clamp(2.55rem,4.6vw,5.1rem);line-height:.98} .trial-modal__chooser .body{max-width:53ch;margin:1.25rem 0 2rem;font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.65;color:#e1e5f3} .trial-modal__choices{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem} .trial-choice{ display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;min-height:225px;padding:1.55rem; border:1px solid rgba(255,255,255,.18);border-radius:17px;background:rgba(6,11,31,.64);color:#fff; text-align:left;text-transform:uppercase;cursor:pointer;transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease); } .trial-choice:nth-child(1){background:linear-gradient(145deg,rgba(0,150,204,.26),rgba(6,11,31,.74))} .trial-choice:nth-child(2){background:linear-gradient(145deg,rgba(215,80,94,.26),rgba(6,11,31,.74))} .trial-choice:hover,.trial-choice:focus-visible{transform:translateY(-4px) scale(1.01);background:rgba(0,150,204,.28);border-color:rgba(33,182,236,.78);outline:none} .trial-choice:nth-child(2):hover,.trial-choice:nth-child(2):focus-visible{background:rgba(215,80,94,.3);border-color:rgba(255,159,169,.85)} .trial-choice span{font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-400)} .trial-choice:nth-child(2) span{color:#ffabb4} .trial-choice b{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.08;letter-spacing:-.04em} .trial-choice i{margin-top:auto;font-size:.94rem;font-style:normal;font-weight:650;color:#d3d8ea} @media (max-width:540px){ .trial-modal{padding:.35rem} .trial-modal__dialog{max-height:calc(100svh - .7rem)} .trial-modal__choices{grid-template-columns:1fr} .trial-choice{min-height:155px;padding:1.2rem} } @media (min-width:541px) and (max-height:820px){ .trial-modal{padding:.35rem} .trial-modal__dialog{max-height:calc(100svh - .7rem)} } /* ============================== 07 Reviews ============================== */ .revs{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(.85rem,1.5vw,1.25rem);margin-top:1.5rem; } .rev{ display:flex;flex-direction:column;gap:.65rem; padding:clamp(1.1rem,1.7vw,1.5rem); border:1px solid var(--hairline);border-radius:16px; background:rgba(255,255,255,.035); transition:transform .3s var(--ease),border-color .3s var(--ease); } .rev:hover{transform:translateY(-4px);border-color:rgba(33,182,236,.4)} .rev__stars{color:#f5b942;font-size:.85rem;letter-spacing:.12em} .rev blockquote p{font-size:.87rem;line-height:1.68;color:#d3d8ea} .rev footer{margin-top:auto;font-size:.78rem;color:var(--ink-dim)} .rev footer b{color:#fff;font-weight:700} /* ================================ 08 FAQ ================================ */ .faq{display:flex;flex-direction:column} .faq details{border-bottom:1px solid var(--hairline)} .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.05rem 0;cursor:pointer;list-style:none; font-size:clamp(.92rem,1.25vw,1.05rem);font-weight:700;letter-spacing:-.01em; transition:color .2s var(--ease); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";flex:0 0 auto; font-size:1.35rem;font-weight:400;line-height:1;color:var(--cyan-400); transition:transform .25s var(--ease); } .faq details[open] summary{color:var(--cyan-400)} .faq details[open] summary::after{transform:rotate(45deg)} .faq summary:hover{color:var(--cyan-400)} .faq details p{ font-size:.87rem;line-height:1.7;color:var(--ink-dim); padding:0 2.5rem 1.15rem 0; } /* =============================== 09 Trial =============================== */ .contact{display:flex;flex-direction:column;margin-top:1.75rem;border-top:1px solid var(--hairline)} .contact__row{ display:flex;flex-direction:column;gap:.25rem; padding:.95rem 0;border-bottom:1px solid var(--hairline); transition:padding-left .25s var(--ease); } .contact__row:hover{padding-left:.5rem} .contact__k{font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-400)} .contact__v{font-size:1rem;font-weight:700;line-height:1.4} /* ---- hero lead-capture form ---- */ .leadform{ border:1px solid var(--hairline);border-radius:20px;overflow:hidden; background:rgba(11,15,34,.58); backdrop-filter:blur(14px) saturate(135%); -webkit-backdrop-filter:blur(14px) saturate(135%); box-shadow:0 34px 80px -40px #000; } .leadform__head{ padding:1.15rem clamp(1.1rem,1.8vw,1.5rem); border-bottom:1px solid var(--hairline); } .leadform__h{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.35rem;color:#fff} .leadform__sub{font-size:.8rem;line-height:1.5;color:#d3d8ea} .leadform__form{padding:1rem clamp(1.1rem,1.8vw,1.5rem) 1.2rem} .leadform__names{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} .leadform__field{display:flex;flex-direction:column;gap:.32rem;margin-bottom:.72rem} .leadform__field label{font-size:.7rem;line-height:1.35;font-weight:800;letter-spacing:.02em;color:#fff} .leadform__field label span{font-weight:700;color:var(--cyan-400)} .leadform__field input,.leadform__field select,.leadform__field textarea{ width:100%;min-height:2.55rem;padding:.55rem .7rem; border:1px solid rgba(255,255,255,.2);border-radius:8px; background:rgba(255,255,255,.1);color:#fff; transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease); } .leadform__field select{appearance:auto} .leadform__field textarea{min-height:8.5rem;resize:vertical;line-height:1.5} .leadform__field select option{color:var(--navy-900);background:#fff} .leadform__field input:focus,.leadform__field select:focus,.leadform__field textarea:focus{ border-color:var(--cyan-400);background:rgba(255,255,255,.15);outline:none; box-shadow:0 0 0 3px rgba(33,182,236,.18); } .leadform__trap{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important} .leadform__notice{font-size:.68rem;line-height:1.48;color:#c3cae0;margin:.15rem 0 .8rem} .leadform__submit{width:100%;text-transform:uppercase} .leadform__recaptcha{margin:.55rem 0 0;text-align:center;font-size:.57rem;line-height:1.45;color:#8f98b5}.leadform__recaptcha a{color:#b9c3df;text-decoration:underline;text-underline-offset:2px} .leadform__submit[disabled]{cursor:wait;opacity:.68} .leadform__status{min-height:1.2em;margin-top:.65rem;text-align:center;font-size:.75rem;line-height:1.4;color:#d9f5ff} .leadform__status--error{color:#ffc3ca} .leadform__count{align-self:flex-end;margin-top:-.15rem;color:#9fa9c4;font-size:.62rem;font-weight:750;letter-spacing:.05em} .leadform--contact{height:100%;scroll-margin-top:calc(var(--sticky) + 1rem);background:linear-gradient(150deg,rgba(18,28,63,.86),rgba(9,14,35,.78))} .leadform--contact .leadform__head{background:linear-gradient(100deg,rgba(0,150,204,.16),rgba(215,80,94,.08))} .leadform--contact .leadform__head .eyebrow{margin-bottom:.65rem} .trial-location{grid-column:1/-1;margin-top:clamp(.5rem,1.5vw,1.2rem)} .trial-location .location-map iframe{height:clamp(270px,28vw,360px)} @media (max-width:440px){.leadform__names{grid-template-columns:1fr;gap:0}} .grecaptcha-badge{visibility:hidden!important} /* ---- closing "book now" block (the single info form lives in the hero) ---- */ .booknow{ border:1px solid var(--hairline);border-radius:20px; padding:clamp(1.25rem,2.2vw,2rem); background:linear-gradient(160deg,var(--navy-700),var(--navy-800)); box-shadow:0 30px 70px -40px #000; } .booknow__h{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:800;letter-spacing:-.02em;margin-bottom:.5rem} .booknow__sub{font-size:.85rem;line-height:1.6;color:var(--ink-dim);margin-bottom:1.25rem} .booknow__grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1rem} .bookcard{ display:flex;flex-direction:column;gap:.3rem; padding:1.1rem;border:1px solid var(--hairline);border-radius:14px; background:rgba(255,255,255,.04); transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease); } .bookcard:hover{transform:translateY(-3px);border-color:rgba(33,182,236,.55);background:rgba(0,150,204,.1)} .bookcard__k{font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-400)} .bookcard b{font-size:1rem;font-weight:800;letter-spacing:-.02em;line-height:1.25} .bookcard i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--ink-dim)} .booknow__or{margin-top:.85rem;text-align:center;font-size:.82rem;color:var(--ink-dim)} .booknow__or a{color:var(--cyan-400);font-weight:700} /* ---- closing location map ---- */ .location-map{ overflow:hidden;border:1px solid var(--hairline);border-radius:20px; background:linear-gradient(160deg,var(--navy-700),var(--navy-800)); box-shadow:0 30px 70px -40px #000; } .location-map iframe{display:block;width:100%;height:clamp(320px,34vw,460px);border:0;filter:saturate(.85) contrast(1.04)} .location-map__link{ display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1rem 1.15rem;color:#fff;font-size:.86rem;font-weight:800; transition:background .2s var(--ease),color .2s var(--ease); } .location-map__link span{color:var(--cyan-400);font-size:1.15rem} .location-map__link:hover{background:rgba(0,150,204,.13);color:var(--cyan-400)} /* ---- Instagram feed ---- */ .instagram__head{display:flex;align-items:end;justify-content:space-between;gap:1.5rem} .instagram__head .btn{margin-bottom:.5rem;white-space:nowrap} .instagram-feed{display:grid;grid-template-columns:repeat(5,1fr);gap:.65rem;margin-top:1.7rem} .instagram-post{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:13px;background:var(--navy-700)} .instagram-post::after{content:"↗";position:absolute;right:.55rem;bottom:.45rem;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:rgba(6,10,26,.72);color:#fff;font-size:.9rem;opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .2s var(--ease)} .instagram-post img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease),filter .3s var(--ease)} .instagram-post:hover img{transform:scale(1.06);filter:brightness(.82)} .instagram-post:hover::after{opacity:1;transform:none} .instagram-feed__fallback{grid-column:1/-1;padding:1.2rem;border:1px solid var(--hairline);border-radius:13px;color:var(--cyan-400);font-size:.9rem;font-weight:700;text-align:center} @media (max-width:900px){.instagram__head{align-items:start;flex-direction:column}.instagram-feed{grid-template-columns:repeat(4,1fr)}.instagram-post:nth-child(n+9){display:none}} @media (max-width:520px){.instagram-feed{grid-template-columns:repeat(2,1fr)}} .foot{ max-width:1320px;margin:0 auto; display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between; padding:1.25rem var(--pad-x) 2.25rem; font-size:.72rem;color:#8d95b5; } .foot a{color:var(--cyan-400);font-weight:700} .foot__links{display:flex;flex-wrap:wrap;gap:1.25rem} .foot__links a{transition:color .2s var(--ease)} .foot__links a:hover{color:#fff} /* ============================== Responsive ============================== */ @media (max-width:1180px){ .grid-2,.grid-2--faq,.grid-2--trial{grid-template-columns:1fr} .progs,.revs,.values{grid-template-columns:repeat(2,1fr)} .hero__grid{grid-template-columns:1fr;gap:2rem} .hero__lede{max-width:56ch} .panel--hero{min-height:0} .stats{grid-template-columns:repeat(2,1fr)} .stat:nth-child(3)::before,.stat:nth-child(3){border-top:0} .stat:nth-child(n+3){border-top:1px solid var(--hairline)} .stat:nth-child(odd)::before{display:none} } @media (min-width:641px) and (max-width:1180px){ .panel--hero .hint{left:auto;right:100px;top:26%;bottom:auto;transform:translateY(-50%)} } @media (max-width:1023px){ .hud__nav{display:none} .hud__actions{margin-left:auto} .hud__burger{display:flex} .panel__bg::after{ background:linear-gradient(to bottom,rgba(11,15,34,.80),rgba(11,15,34,.95)); } } @media (min-width:1024px) and (max-width:1320px){ .hud{gap:.65rem;padding-inline:clamp(1rem,2.2vw,2rem)} .hud__brand img{width:168px} .hud__nav{gap:.08rem} .hud__nav a{padding:.45rem .52rem;font-size:.78rem} .hud__actions{gap:.45rem} .hud__actions .btn--sm{padding:.58rem .78rem;font-size:.69rem} } @media (max-width:640px){ .progs,.revs,.values{grid-template-columns:1fr} .stats{grid-template-columns:1fr} .stat + .stat::before{display:none} .stat + .stat{border-top:1px solid var(--hairline)} .display{font-size:clamp(2.3rem,11vw,3.4rem)} .hud{gap:.75rem} .hud__brand img{width:118px} .hud__actions{gap:.45rem} .hud__actions .btn--sm{padding:.55rem .65rem;font-size:.7rem} .hud__instagram,.hud__phone{width:36px;height:36px} .hint{position:absolute;left:var(--pad-x);top:50%;bottom:auto;transform:translateY(-50%);gap:.45rem;font-size:.68rem} .hint svg{width:9px;height:44px} } @media (max-width:520px){ .hud{gap:.35rem;padding-inline:.75rem} .hud__brand img{width:96px} .hud__actions{gap:.28rem} .hud__actions .btn--sm{padding:.48rem .45rem;font-size:.58rem;letter-spacing:.03em} .hud__instagram,.hud__phone{width:31px;height:33px} .hud__burger{width:35px;height:35px} } @media (max-width:360px){ .hud__brand img{width:92px} .hud__actions{gap:.35rem} .hud__actions .btn--sm{padding:.5rem .52rem;font-size:.64rem} .hud__instagram,.hud__phone{width:33px;height:34px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} } /* ============================== About page ============================== */ .about-page{background:var(--navy-900);color:var(--ink)} .about-page__nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--pad-x);border-bottom:1px solid var(--hairline);background:rgba(10,15,38,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .about-page__brand img{display:block;width:clamp(155px,16vw,208px);height:auto} .about-page__inner{width:min(100% - (var(--pad-x) * 2),1180px);margin:0 auto} .about-page__hero{padding:clamp(4.5rem,9vw,8rem) 0 clamp(3.5rem,7vw,6rem);background:radial-gradient(circle at 86% 16%,rgba(0,150,204,.22),transparent 33%),linear-gradient(155deg,var(--navy-800),var(--navy-900))} .about-page__hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6.5rem);align-items:center} .about-page__lede{max-width:56ch;margin:1.45rem 0 1.8rem;font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.7;color:#dce1ef} .about-page__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem} .about-page__hero-media,.about-page__media-card,.about-page__facility-media{overflow:hidden;border:1px solid var(--hairline);border-radius:20px;background:var(--navy-700);box-shadow:0 30px 70px -40px #000} .about-page__hero-media{aspect-ratio:4/3}.about-page__hero-media img,.about-page__media-card img,.about-page__facility-media img{width:100%;height:100%;object-fit:cover} .about-page__section{padding:clamp(4rem,8vw,7rem) 0;border-top:1px solid var(--hairline)} .about-page__section[id],.programs-page__section[id],.programs-page__modality[id],.programs-page__format-card[id]{scroll-margin-top:calc(var(--hud-h) + 1.5rem)} .about-page__section--team{background:rgba(255,255,255,.025)} .about-page__story{display:grid;grid-template-columns:.28fr 1fr;gap:clamp(1.5rem,5vw,5rem)} .about-page__label{display:flex;align-items:baseline;gap:.65rem;color:var(--cyan-400)} .about-page__label span{font-size:.72rem;font-weight:800;letter-spacing:.14em}.about-page__label p{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase} .about-page__copy-grid{display:grid;grid-template-columns:minmax(0,64ch);gap:1.5rem;margin-top:1.6rem}.about-page__copy-grid p{font-size:.94rem;line-height:1.72;color:var(--ink-dim)} .about-page__facility{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}.about-page__media-card{aspect-ratio:4/5} .about-page__coach-media{position:relative;min-height:clamp(27rem,43vw,38rem);padding:0 2.2rem 2.2rem 0}.about-page__coach-media .about-page__media-card{height:100%}.about-page__coach-detail{position:absolute;right:0;bottom:0;width:46%;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hairline);border-radius:16px;background:var(--navy-700);box-shadow:0 25px 60px -35px #000}.about-page__coach-detail img{width:100%;height:100%;object-fit:cover} .about-page__coach-media--single{padding:0}.about-page__coach-media--single .about-page__media-card{aspect-ratio:auto} .about-page__instructors-head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,6rem);align-items:end;margin-bottom:clamp(2rem,5vw,3.5rem)}.about-page__instructors-head>p{max-width:52ch;margin-bottom:.45rem;font-size:clamp(.96rem,1.4vw,1.08rem);line-height:1.7;color:var(--ink-dim)} .about-page__instructors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.about-page__instructor{display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--hairline);border-radius:20px;background:linear-gradient(155deg,rgba(30,42,81,.83),rgba(13,19,45,.92));box-shadow:0 26px 70px -48px #000}.about-page__instructor--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(1.2rem,3vw,2.4rem);background:linear-gradient(135deg,rgba(0,150,204,.14),rgba(30,42,81,.75) 48%,rgba(13,19,45,.96))} .about-page__instructor-placeholder{position:relative;display:grid;min-height:15rem;place-content:center;gap:.75rem;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--hairline);background:radial-gradient(circle at 50% 35%,rgba(0,181,241,.22),transparent 24%),linear-gradient(145deg,rgba(36,54,101,.96),rgba(12,18,42,.98))}.about-page__instructor-placeholder::before,.about-page__instructor-placeholder::after{position:absolute;content:"";z-index:-1;border:1px solid rgba(255,255,255,.08);border-radius:50%}.about-page__instructor-placeholder::before{width:15rem;height:15rem;top:-7rem;right:-4rem}.about-page__instructor-placeholder::after{width:10rem;height:10rem;bottom:-6rem;left:-2rem}.about-page__instructor-placeholder span{font-family:var(--sans);font-size:clamp(3.1rem,5vw,4.6rem);font-weight:800;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.32)}.about-page__instructor-placeholder figcaption{font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-400)} .about-page__instructor-photo{overflow:hidden;aspect-ratio:16/10;border-bottom:1px solid var(--hairline);background:var(--navy-700)}.about-page__instructor-photo img{width:100%;height:100%;object-fit:cover}.about-page__instructor-photo--portrait img{object-position:center 28%}.about-page__instructor-photo--leo img{object-position:center 3%}.about-page__instructor-photo--tim img{object-position:center 14%}.about-page__instructor-photo--tree img{object-position:center 5%}.about-page__instructor-photo--walid img{object-position:center} .about-page__instructor-copy{padding:clamp(1.35rem,2.5vw,2rem)}.about-page__instructor--featured .about-page__instructor-copy{padding:0 clamp(.25rem,1vw,1rem)}.about-page__instructor-role{display:flex;flex-wrap:wrap;gap:.45rem .65rem;align-items:center;margin-bottom:1rem;font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-400)}.about-page__instructor-role span{display:inline-flex;align-items:center;min-height:1.8rem;padding:.35rem .65rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.045);color:#dce1ef}.about-page__instructor-copy h3{margin-bottom:.85rem;font-size:clamp(1.3rem,2.25vw,1.85rem);font-weight:800;line-height:1.15;letter-spacing:-.035em}.about-page__instructor-copy>p:not(.about-page__instructor-role){font-size:.88rem;line-height:1.72;color:var(--ink-dim)}.about-page__instructor-copy>p:not(.about-page__instructor-role)+p{margin-top:.85rem} .about-page__instructor-copy--with-photo,.about-page__instructor-copy--with-gallery{display:flex;flex:1;flex-direction:column}.about-page__instructor-secondary{position:relative;overflow:hidden;margin-top:auto;padding-top:1.25rem}.about-page__instructor-secondary img{width:100%;aspect-ratio:3/2;object-fit:cover;border:1px solid var(--hairline);border-radius:13px}.about-page__instructor-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:auto;padding-top:1.25rem}.about-page__instructor-gallery figure{overflow:hidden;aspect-ratio:1;border:1px solid var(--hairline);border-radius:13px;background:var(--navy-700)}.about-page__instructor-gallery img{width:100%;height:100%;object-fit:cover} .about-page__lineage{background:rgba(255,255,255,.025)}.about-page__lineage .h-xl{margin-bottom:1.6rem}.about-page__lineage-media{display:block;overflow:hidden;border:1px solid var(--hairline);border-radius:20px;background:#fff;box-shadow:0 30px 70px -40px #000}.about-page__lineage-media img{display:block;width:100%;height:auto}.about-page__lineage-copy{max-width:920px;margin:1.5rem auto 0;padding:1.2rem 1.35rem;border-left:3px solid var(--cyan-400);border-radius:0 14px 14px 0;background:rgba(255,255,255,.035);font-size:clamp(.92rem,1.3vw,1.02rem);line-height:1.75;color:#cdd3e3} .about-page__facility address{margin:1.35rem 0;font-size:.93rem;line-height:1.6;font-style:normal;font-weight:700;color:#fff}.about-page__facility-gallery{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.about-page__facility-gallery figure{overflow:hidden;min-height:0;aspect-ratio:1/1;border:1px solid var(--hairline);border-radius:16px;background:var(--navy-700);box-shadow:0 20px 50px -35px #000}.about-page__facility-gallery .about-page__facility-main{grid-column:1/-1;aspect-ratio:16/9}.about-page__facility-gallery img{width:100%;height:100%;object-fit:cover} .about-page__cta{padding:clamp(4rem,8vw,6.5rem) 0;text-align:center;background:linear-gradient(130deg,rgba(0,150,204,.19),rgba(215,80,94,.15))}.about-page__cta .about-page__inner{max-width:660px}.about-page__cta .h-xl{margin:.6rem 0}.about-page__cta p:not(.eyebrow){margin:0 0 1.5rem;color:#dce1ef} .about-page__footer{display:flex;justify-content:space-between;gap:1rem;padding:1.35rem var(--pad-x);font-size:.74rem;color:var(--ink-dim)}.about-page__footer a{color:var(--cyan-400);font-weight:700} @media (max-width:1050px){.about-page__instructors{grid-template-columns:1fr}.about-page__instructor--featured{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @media (max-width:800px){.about-page__hero-grid,.about-page__instructor--featured,.about-page__facility,.about-page__instructors-head{grid-template-columns:1fr}.about-page__instructors-head{gap:1rem}.about-page__hero-media{max-width:700px}.about-page__story{grid-template-columns:1fr;gap:1rem}.about-page__label{display:none}.about-page__coach-media{max-width:620px;min-height:clamp(25rem,105vw,36rem)}} @media (max-width:520px){.about-page__nav .btn{font-size:.72rem;padding:.65rem .8rem}.about-page__copy-grid{grid-template-columns:1fr;gap:.85rem}.about-page__footer{flex-direction:column}.about-page__actions{align-items:flex-start;flex-direction:column}.about-page__instructor--featured{padding:.8rem}.about-page__instructor--featured .about-page__instructor-copy{padding:.8rem}.about-page__coach-media{min-height:25rem;padding:0 1.35rem 1.35rem 0}.about-page__coach-detail{width:50%}.about-page__instructor-placeholder{min-height:12rem}.about-page__facility-gallery{gap:.55rem}.about-page__facility-gallery figure{border-radius:12px}} /* ============================= Programs page ============================ */ .programs-page{background:var(--navy-900);color:var(--ink)} .programs-page__nav{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;padding:1rem var(--pad-x);border-bottom:1px solid var(--hairline);background:rgba(10,15,38,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} .programs-page__nav nav{display:flex;justify-content:center;gap:clamp(.6rem,1.5vw,1.35rem)}.programs-page__nav nav a{font-size:.72rem;font-weight:750;color:var(--ink-dim);transition:color .2s var(--ease)}.programs-page__nav nav a:hover,.programs-page__nav nav .is-current{color:var(--cyan-400)} .programs-page__hero{padding:clamp(4.5rem,9vw,8rem) 0 clamp(3.5rem,7vw,6rem);background:radial-gradient(circle at 88% 12%,rgba(215,80,94,.2),transparent 32%),linear-gradient(155deg,var(--navy-800),var(--navy-900))}.programs-page__hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6.5rem);align-items:center}.programs-page__hero-media{aspect-ratio:16/10;overflow:hidden;border:1px solid var(--hairline);border-radius:20px;box-shadow:0 30px 70px -40px #000}.programs-page__hero-media img{width:100%;height:100%;object-fit:cover} .programs-page__section{padding:clamp(4rem,8vw,7rem) 0;border-top:1px solid var(--hairline)}.programs-page__section--kids{background:rgba(255,255,255,.025)} .programs-page__section-head{display:grid;grid-template-columns:1fr .75fr;gap:clamp(2rem,6vw,6rem);align-items:end}.programs-page__section-head>p{font-size:.98rem;line-height:1.7;color:var(--ink-dim);margin-bottom:.7rem} .programs-page__levels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.programs-page__level{padding:clamp(1.25rem,2vw,1.8rem);border:1px solid var(--hairline);border-radius:18px;background:rgba(255,255,255,.035)}.programs-page__level>span{display:block;margin-bottom:2.25rem;font-size:.7rem;font-weight:800;letter-spacing:.16em;color:var(--cyan-400)}.programs-page__level h3{font-size:clamp(1.25rem,2vw,1.65rem);font-weight:800;letter-spacing:-.03em}.programs-page__duration{margin:.45rem 0 1rem;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}.programs-page__level p:last-child{font-size:.86rem;line-height:1.68;color:var(--ink-dim)} .programs-page__adult-division{margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--hairline)}.programs-page__section-head--compact{align-items:end}.programs-page__section-head--compact .h-xl,.programs-page__formats-head .h-xl{font-size:clamp(2rem,4.8vw,4.4rem)} .programs-page__modalities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}.programs-page__modality{position:relative;overflow:hidden;padding:clamp(1.35rem,2.5vw,2rem);border:1px solid var(--hairline);border-radius:18px;background:linear-gradient(150deg,rgba(30,42,81,.9),rgba(13,19,45,.96))}.programs-page__modality::after{position:absolute;content:"";width:10rem;height:10rem;right:-5rem;bottom:-6rem;border:1px solid rgba(0,181,241,.16);border-radius:50%}.programs-page__modality>span{display:block;margin-bottom:clamp(2rem,4vw,3.5rem);font-size:.68rem;font-weight:850;letter-spacing:.16em;color:var(--cyan-400)}.programs-page__modality h4{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:800;letter-spacing:-.035em}.programs-page__modality>p:not(.programs-page__duration){position:relative;z-index:1;font-size:.86rem;line-height:1.68;color:var(--ink-dim)} .programs-page__primary-actions{justify-content:center}.programs-page__formats-head{max-width:760px}.programs-page__format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem}.programs-page__format-card{overflow:hidden;border:1px solid var(--hairline);border-radius:20px;background:linear-gradient(155deg,rgba(30,42,81,.8),rgba(13,19,45,.96));box-shadow:0 28px 70px -48px #000}.programs-page__format-card--women{border-color:rgba(240,98,146,.32);background:linear-gradient(155deg,rgba(96,43,78,.48),rgba(13,19,45,.96))}.programs-page__format-card figure{overflow:hidden;aspect-ratio:16/9;border-bottom:1px solid var(--hairline);background:var(--navy-700)}.programs-page__format-card img{width:100%;height:100%;object-fit:cover}.programs-page__format-copy{padding:clamp(1.35rem,2.5vw,2rem)}.programs-page__format-kicker{margin-bottom:.8rem;font-size:.67rem;font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-400)}.programs-page__format-card--women .programs-page__format-kicker{color:#f7a6bf}.programs-page__format-copy h4{margin-bottom:.75rem;font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;line-height:1.18;letter-spacing:-.035em}.programs-page__format-copy>p:last-of-type{font-size:.9rem;line-height:1.72;color:var(--ink-dim)}.programs-page__format-cta{margin-top:1.25rem}.programs-page__format-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.25rem} .programs-page__kids-grid,.programs-page__women-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}.programs-page__kids-media{overflow:hidden;border:1px solid var(--hairline);border-radius:20px;background:var(--navy-700);box-shadow:0 30px 70px -40px #000}.programs-page__kids-media{aspect-ratio:4/5}.programs-page__kids-media img{width:100%;height:100%;object-fit:cover}.programs-page__women-gallery{display:grid;gap:.8rem}.programs-page__women-gallery figure{overflow:hidden;aspect-ratio:16/10;border:1px solid var(--hairline);border-radius:18px;background:var(--navy-700);box-shadow:0 24px 60px -40px #000}.programs-page__women-gallery img{width:100%;height:100%;object-fit:cover} .programs-page__kids-list{margin-top:1.4rem;border-top:1px solid var(--hairline)}.programs-page__kids-list article{display:grid;grid-template-columns:1.2fr .65fr 2fr;gap:1rem;align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--hairline)}.programs-page__kids-list b{font-size:.9rem}.programs-page__kids-list span{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-400)}.programs-page__kids-list p{font-size:.77rem;line-height:1.55;color:var(--ink-dim)} .programs-page__cta{padding:clamp(4rem,8vw,6.5rem) 0;text-align:center;background:linear-gradient(130deg,rgba(0,150,204,.19),rgba(215,80,94,.15))}.programs-page__cta .about-page__inner{max-width:660px}.programs-page__cta .h-xl{margin:.6rem 0}.programs-page__cta p:not(.eyebrow){margin:0 0 1.5rem;color:#dce1ef} @media (max-width:1000px){.programs-page__nav{grid-template-columns:auto auto;justify-content:space-between}.programs-page__nav nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;padding-bottom:.15rem}.programs-page__hero-grid,.programs-page__kids-grid,.programs-page__women-grid{grid-template-columns:1fr}.programs-page__hero-media{max-width:780px}.programs-page__levels,.programs-page__modalities{grid-template-columns:1fr}.programs-page__level>span,.programs-page__modality>span{margin-bottom:1rem}.programs-page__section-head{grid-template-columns:1fr;gap:.75rem}} @media (max-width:720px){.programs-page__format-grid{grid-template-columns:1fr}.programs-page__format-actions{align-items:stretch;flex-direction:column}.programs-page__format-actions .btn{text-align:center}} @media (max-width:620px){.programs-page__nav{gap:.75rem}.programs-page__nav .btn{font-size:.7rem;padding:.62rem .75rem}.programs-page__nav nav{gap:1rem}.programs-page__kids-list article{grid-template-columns:1fr;gap:.25rem}} /* ======================= Archived events + policy pages ======================= */ .archive-page{background:var(--navy-900);color:var(--ink)} .archive-page__hero{padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(3.5rem,7vw,5.5rem);background:radial-gradient(circle at 85% 14%,rgba(0,150,204,.2),transparent 34%),linear-gradient(155deg,var(--navy-800),var(--navy-900))} .archive-page__hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:center} .archive-page__hero-media{overflow:hidden;aspect-ratio:16/10;border:1px solid var(--hairline);border-radius:20px;background:var(--navy-700);box-shadow:0 30px 70px -40px #000} .archive-page__hero-media img{width:100%;height:100%;object-fit:cover} .archive-page__notice{display:inline-flex;margin:0 0 1rem;padding:.5rem .8rem;border:1px solid rgba(215,80,94,.38);border-radius:999px;background:rgba(215,80,94,.12);font-size:.68rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:#ffb5be} .archive-page__meta{margin-top:1rem;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-400)} .archive-page__content{max-width:900px} .archive-page__content>h2{margin:2.5rem 0 .8rem;font-size:clamp(1.55rem,3vw,2.3rem);font-weight:800;letter-spacing:-.035em} .archive-page__content>h2:first-child{margin-top:0} .archive-page__content h3{margin:1.7rem 0 .55rem;font-size:clamp(1.1rem,2vw,1.4rem);font-weight:800} .archive-page__content p,.archive-page__content li{font-size:clamp(.91rem,1.25vw,1rem);line-height:1.75;color:var(--ink-dim)} .archive-page__content p+p{margin-top:1rem} .archive-page__content ul{display:grid;gap:.45rem;margin:1rem 0 0;padding-left:1.2rem} .archive-page__content a{color:var(--cyan-400);font-weight:750;text-decoration:underline;text-underline-offset:.18em} .archive-page__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.6rem 0 0} .archive-page__card{padding:clamp(1.15rem,2vw,1.65rem);border:1px solid var(--hairline);border-radius:17px;background:rgba(255,255,255,.035)} .archive-page__card h3{margin:0 0 .6rem;font-size:1.08rem}.archive-page__card p{font-size:.86rem;line-height:1.65;color:var(--ink-dim)} .archive-page__policy-section{padding:1.7rem 0;border-bottom:1px solid var(--hairline)} .archive-page__policy-section:first-child{padding-top:0}.archive-page__policy-section:last-child{border-bottom:0} .archive-page__policy-section h2{margin:0 0 .75rem;font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.025em} .archive-page__policy-section h3{margin:1.25rem 0 .45rem;font-size:1.02rem} .archive-page__policy-section p,.archive-page__policy-section li{font-size:.91rem;line-height:1.72;color:var(--ink-dim)} .archive-page__policy-section ul{display:grid;gap:.4rem;margin:.8rem 0 0;padding-left:1.2rem} @media (max-width:800px){.archive-page__hero-grid{grid-template-columns:1fr}.archive-page__hero-media{max-width:720px}.archive-page__cards{grid-template-columns:1fr}} /* ============================ SEO service pages ============================ */ .service-page{background:var(--navy-900);color:var(--ink)} .service-page__hero{padding:clamp(3.4rem,7vw,6.5rem) 0 clamp(3.7rem,7vw,6rem);background:radial-gradient(circle at 84% 13%,rgba(0,150,204,.22),transparent 34%),linear-gradient(155deg,var(--navy-800),var(--navy-900))} .service-page__hero--coral{background:radial-gradient(circle at 84% 13%,rgba(215,80,94,.22),transparent 34%),linear-gradient(155deg,var(--navy-800),var(--navy-900))} .service-page__breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(2.2rem,4vw,3.5rem);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim)} .service-page__breadcrumb a{color:var(--cyan-400)}.service-page__breadcrumb span{opacity:.6} .service-page__hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,6vw,6rem);align-items:center} .service-page__hero-media{overflow:hidden;aspect-ratio:16/10;border:1px solid var(--hairline);border-radius:22px;background:var(--navy-700);box-shadow:0 32px 80px -46px #000} .service-page__hero-media--portrait{aspect-ratio:4/3}.service-page__hero-media img{width:100%;height:100%;object-fit:cover} .service-page__hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem} .service-page__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:rgba(255,255,255,.025)} .service-page__fact{padding:1.25rem clamp(1rem,3vw,2rem);border-right:1px solid var(--hairline);text-align:center}.service-page__fact:last-child{border-right:0}.service-page__fact b{display:block;font-size:clamp(1.05rem,2vw,1.35rem);font-weight:850;letter-spacing:-.025em}.service-page__fact span{display:block;margin-top:.3rem;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-400)} .service-page__section{padding:clamp(4rem,8vw,7rem) 0;border-top:1px solid var(--hairline)} .service-page__section--soft{background:rgba(255,255,255,.025)} .service-page__section-head{display:grid;grid-template-columns:1fr .8fr;gap:clamp(2rem,6vw,6rem);align-items:end;margin-bottom:2rem}.service-page__section-head>p{max-width:58ch;font-size:clamp(.95rem,1.35vw,1.05rem);line-height:1.75;color:var(--ink-dim)} .service-page__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem} .service-page__cards--two{grid-template-columns:repeat(2,minmax(0,1fr))} .service-page__card{position:relative;overflow:hidden;padding:clamp(1.35rem,2.5vw,2rem);border:1px solid var(--hairline);border-radius:19px;background:linear-gradient(150deg,rgba(30,42,81,.86),rgba(13,19,45,.96))}.service-page__card>span{display:block;margin-bottom:clamp(1.6rem,4vw,3rem);font-size:.68rem;font-weight:850;letter-spacing:.14em;color:var(--cyan-400)}.service-page__card h3{margin-bottom:.7rem;font-size:clamp(1.3rem,2.3vw,1.8rem);font-weight:850;line-height:1.15;letter-spacing:-.035em}.service-page__card p{font-size:.88rem;line-height:1.7;color:var(--ink-dim)}.service-page__card a{display:inline-flex;margin-top:1.1rem;font-size:.7rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-400)} .service-page__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center} .service-page__copy p{margin-top:1rem;font-size:clamp(.94rem,1.3vw,1.04rem);line-height:1.78;color:var(--ink-dim)} .service-page__copy .h-xl{margin-bottom:1.25rem} .service-page__media{overflow:hidden;aspect-ratio:4/3;border:1px solid var(--hairline);border-radius:20px;background:var(--navy-700);box-shadow:0 30px 70px -44px #000}.service-page__media img{width:100%;height:100%;object-fit:cover} .service-page__checklist{display:grid;gap:.7rem;margin-top:1.4rem}.service-page__checklist li{position:relative;padding-left:1.7rem;font-size:.9rem;line-height:1.65;color:#dce1ef}.service-page__checklist li::before{position:absolute;content:"✓";left:0;top:.02rem;font-weight:900;color:var(--cyan-400)} .service-page__faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.service-page__faq details{padding:1.15rem 1.25rem;border:1px solid var(--hairline);border-radius:15px;background:rgba(255,255,255,.03)}.service-page__faq summary{cursor:pointer;font-size:.94rem;font-weight:800;line-height:1.4;color:#fff}.service-page__faq details p{margin-top:.8rem;font-size:.86rem;line-height:1.68;color:var(--ink-dim)} .service-page__area-list{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}.service-page__area-list li{padding:.5rem .75rem;border:1px solid var(--hairline);border-radius:999px;background:rgba(255,255,255,.035);font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#dce1ef} .service-page__cta{padding:clamp(4rem,8vw,6.5rem) 0;text-align:center;background:linear-gradient(130deg,rgba(0,150,204,.19),rgba(215,80,94,.15))}.service-page__cta .about-page__inner{max-width:720px}.service-page__cta .h-xl{margin:.6rem 0}.service-page__cta p:not(.eyebrow){margin:0 auto 1.5rem;max-width:58ch;color:#dce1ef} .service-page__footer{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.5rem var(--pad-x);font-size:.74rem;color:var(--ink-dim)}.service-page__footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1rem}.service-page__footer a{color:var(--cyan-400);font-weight:750} @media (max-width:900px){.service-page__hero-grid,.service-page__section-head,.service-page__split{grid-template-columns:1fr}.service-page__hero-media{max-width:760px}.service-page__cards{grid-template-columns:1fr}.service-page__cards--two,.service-page__faq{grid-template-columns:1fr}} @media (max-width:620px){.service-page__facts{grid-template-columns:1fr}.service-page__fact{border-right:0;border-bottom:1px solid var(--hairline)}.service-page__fact:last-child{border-bottom:0}.service-page__hero-actions{align-items:flex-start;flex-direction:column}.programs-page__primary-actions{align-items:center}.service-page__footer{grid-template-columns:1fr}.service-page__footer-links{justify-content:flex-start}}