/* ============================================================
   MSK Skating public front page (Views/Home/Landing.cshtml)
   Brand: Mission purple from the MSK logo, with the brochure's
   red-pink and blue as accents. Display type: Big Shoulders Display.
   ============================================================ */
:root {
  --deep: #22103b;
  --deep-2: #2a1446;
  --brand: #5b3490;
  --brand-press: #4a2877;
  --violet: #8b5fd6;
  --pink: #e2335a;
  --pink-press: #c7244a;
  --blue: #2f6fe4;
  --ground: #f5f4f9;
  --surface: #ffffff;
  --ink: #1d1628;
  --ink-2: #3f3752;
  --muted: #625b73;
  --hair: rgba(29, 22, 40, .1);
  --r: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: "Big Shoulders Display", "Rubik", system-ui, sans-serif;
  --body: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body.lp { margin: 0; background: var(--ground); color: var(--ink); font: 400 1rem/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
::selection { background: rgba(226, 51, 90, .25); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.lp-wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.lp-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 10px; }
.lp-skip:focus { left: 8px; }

/* ---------- Buttons ---------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid transparent;
  font: 600 .9375rem/1 var(--body); text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.lp-btn:active { transform: scale(.97); }
.lp-btn--lg { min-height: 52px; padding: 0 24px; font-size: 1rem; }
.lp-btn--accent { background: var(--pink); color: #fff; }
.lp-btn--accent:hover { background: var(--pink-press); color: #fff; }
.lp-btn--light { background: #fff; color: var(--brand); }
.lp-btn--light:hover { background: #f1eafb; color: var(--brand-press); }
.lp-btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.lp-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

/* ---------- Header ---------- */
.lp-nav { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top); transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.lp-nav.is-scrolled { background: rgba(34, 16, 59, .92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 6px 24px rgba(15, 6, 30, .25); }
.lp-nav-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 800 1.375rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.lp-brand img { width: 40px; height: auto; background: #fff; border-radius: 50%; padding: 3px; }
.lp-brand--dark { color: var(--ink); }
.lp-links { display: flex; gap: 4px; margin-left: auto; }
.lp-links a { padding: 8px 12px; border-radius: 999px; color: rgba(255, 255, 255, .86); text-decoration: none; font-weight: 500; font-size: .9375rem; }
.lp-links a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.lp-nav-cta { display: flex; align-items: center; gap: 8px; }
.lp-menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.375rem; }
.lp-menu { display: grid; gap: 4px; padding: 8px 16px 16px; background: rgba(34, 16, 59, .97); }
.lp-menu[hidden] { display: none; }
.lp-menu a:not(.lp-btn) { padding: 12px 8px; color: #fff; text-decoration: none; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lp-menu .lp-btn { margin-top: 8px; }

/* ---------- Hero ---------- */
.lp-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(72px + env(safe-area-inset-top) + 48px) 0 56px;
  background:
    radial-gradient(900px 520px at 85% 20%, rgba(226, 51, 90, .38), transparent 60%),
    radial-gradient(800px 600px at 10% 110%, rgba(47, 111, 228, .35), transparent 60%),
    linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 45%, #3a1a66 100%);
}
.lp-streaks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lp-streaks path { stroke: rgba(255, 255, 255, .05); stroke-width: 10; stroke-linecap: round; fill: none; }
.lp-streaks path:nth-child(odd) { stroke: rgba(226, 51, 90, .1); stroke-width: 6; }
/* ---- hero background animation: skaters gliding across in lanes, streaks flowing behind ---- */
.lp-streaks path { stroke-dasharray: 220 140; animation: lp-streak 6s linear infinite; }
.lp-streaks path:nth-child(2n) { animation-duration: 8s; }
.lp-streaks path:nth-child(3n) { animation-duration: 4.5s; }
@keyframes lp-streak { to { stroke-dashoffset: -720; } }
.lp-skaters { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lp-sk {
  position: absolute; left: 0; width: var(--s, 90px); height: auto; opacity: var(--o, .14);
  filter: brightness(0) invert(1) drop-shadow(-18px 0 0 rgba(255, 255, 255, .25)) drop-shadow(-36px 0 0 rgba(226, 51, 90, .18));
  transform: translateX(-30vw);
  animation: lp-glide var(--d, 14s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
/* a gentle stride bob on top of the glide */
.lp-sk--1 { top: 12%; --s: 150px; --o: .26; --d: 13s; --delay: -2s; }
.lp-sk--2 { top: 40%; --s: 90px;  --o: .18; --d: 18s; --delay: -9s; }
.lp-sk--3 { top: 56%; --s: 190px; --o: .22; --d: 11s; --delay: -6s; }
.lp-sk--4 { top: 78%; --s: 110px; --o: .2; --d: 15s; --delay: -12s; }
.lp-sk--5 { top: 28%; --s: 70px;  --o: .14; --d: 21s; --delay: -16s; }
@keyframes lp-glide {
  0%   { transform: translate(-30vw, 0) rotate(-2deg); }
  25%  { transform: translate(15vw, -6px) rotate(1deg); }
  50%  { transform: translate(60vw, 0) rotate(-2deg); }
  75%  { transform: translate(105vw, -6px) rotate(1deg); }
  100% { transform: translate(130vw, 0) rotate(-2deg); }
}
@media (max-width: 639.98px) {
  .lp-sk { --s: 64px; }
  .lp-sk--3 { --s: 90px; }
  .lp-sk--5 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-sk, .lp-streaks path { animation: none !important; }
  .lp-sk { display: none; }
}
.lp-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.lp-display { margin: 0; font: 900 clamp(3.5rem, 8.5vw, 6rem)/.9 var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.lp-display span { color: var(--pink); }
.lp-display--md { font-size: clamp(2.75rem, 6vw, 4.5rem); }
.lp-lead { max-width: 34rem; margin: 24px 0 0; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lp-hero-art { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 4 / 5; }
.lp-hero-photo { position: absolute; inset: 0 0 0 18%; margin: 0; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 4, 24, .45); transform: rotate(3deg); }
.lp-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.lp-hero-boot { position: absolute; left: 0; bottom: 6%; width: 46%; aspect-ratio: 1; margin: 0; border-radius: 50%; overflow: hidden; border: 6px solid var(--deep-2); box-shadow: 0 16px 40px rgba(10, 4, 24, .45); }
.lp-hero-boot img { width: 100%; height: 100%; object-fit: cover; }
.lp-hero-badge { position: absolute; right: -6%; bottom: 10%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 12px 30px rgba(10, 4, 24, .35); font-size: .8125rem; line-height: 1.25; }
.lp-hero-badge img { width: 40px; height: auto; }
.lp-hero-badge b { display: block; font-size: .9375rem; color: var(--brand); }
.lp-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 56px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.lp-stats > div { padding: 20px 16px 0 0; }
.lp-stats > div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .16); }
.lp-stats dt { order: 2; margin-top: 6px; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.lp-stats dd { order: 1; margin: 0; font: 800 clamp(2rem, 4vw, 3rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.lp-stats > div { display: flex; flex-direction: column; }

/* ---------- Sections ---------- */
.lp-section { padding: 96px 0; }
.lp-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; margin-bottom: 40px; }
.lp-head p { max-width: 30rem; margin: 0; color: var(--muted); font-size: 1.0625rem; }
.lp-h2 { margin: 0; font: 900 clamp(2.5rem, 5vw, 4rem)/.95 var(--display); text-transform: uppercase; color: var(--deep-2); letter-spacing: -.005em; }
.lp-center { text-align: center; margin-bottom: 40px; }
.lp-small { font-size: .875rem; color: var(--muted); }
.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.lp-tags li { padding: 4px 12px; border-radius: 999px; background: #efe9f7; color: var(--brand); font-size: .8125rem; font-weight: 600; }
.lp-tags--soft li { background: var(--surface); border: 1px solid var(--hair); color: var(--ink-2); font-weight: 500; }

/* disciplines */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 2px rgba(29, 22, 40, .05), 0 10px 30px rgba(29, 22, 40, .07); }
.lp-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--deep-2); }
.lp-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); transition: transform .6s var(--ease); }
.lp-card:hover .lp-card-img img { transform: scale(1.04); }
.lp-card-body { padding: 24px; }
.lp-card h3 { margin: 0 0 8px; font: 800 1.75rem/1 var(--display); text-transform: uppercase; color: var(--deep-2); }
.lp-card p { margin: 0; color: var(--ink-2); }

/* approach */
.lp-approach { background: var(--surface); }
.lp-approach-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.lp-approach-photo { margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.lp-approach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.lp-quote { margin: 0 0 24px; font: 900 clamp(2.25rem, 4.5vw, 3.75rem)/1 var(--display); text-transform: uppercase; color: var(--brand); text-wrap: balance; }
.lp-quote::before { content: "“"; color: var(--pink); }
.lp-quote::after { content: "”"; color: var(--pink); }
.lp-approach p { max-width: 36rem; color: var(--ink-2); font-size: 1.0625rem; }
.lp-points { display: grid; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-points li { display: flex; gap: 12px; align-items: flex-start; }
.lp-points i { color: var(--pink); font-size: 1.25rem; line-height: 1.3; }

/* coach */
.lp-coach { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: center; }
.lp-coach-photo { margin: 0; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(29, 22, 40, .08); }
.lp-coach-photo img { width: 100%; height: auto; max-height: 640px; object-fit: contain; }
.lp-lead-dark { margin: 20px 0 32px; font-size: 1.125rem; color: var(--ink-2); max-width: 44rem; }
.lp-coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.lp-coach-grid h3 { margin: 0 0 12px; font: 800 1.375rem/1 var(--display); text-transform: uppercase; color: var(--deep-2); }
.lp-timeline { margin: 0; padding: 0; list-style: none; background: linear-gradient(#d3c4ea, #d3c4ea) 0 0 / 2px 100% no-repeat; } /* the rail */
.lp-timeline li { position: relative; padding: 0 0 14px 18px; }
.lp-timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--ground); }
.lp-timeline b { display: block; }
.lp-timeline span { font-size: .875rem; color: var(--muted); }

/* events */
.lp-events { background: linear-gradient(180deg, var(--ground), #ece6f6); }
/* one feature event beside a stack of three, image left / text right */
.lp-event-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(3, auto); gap: 20px; }
.lp-event { position: relative; display: grid; grid-template-columns: 40% 1fr; overflow: hidden; border-radius: var(--r); background: var(--surface); box-shadow: 0 1px 2px rgba(29, 22, 40, .05), 0 10px 30px rgba(29, 22, 40, .07); }
.lp-event img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.lp-event-body { align-self: center; }
.lp-event--big { grid-row: span 3; display: flex; flex-direction: column; }
.lp-event--big img { flex: 1 1 auto; min-height: 320px; height: auto; }
.lp-event--big .lp-event-body { align-self: stretch; }
.lp-event--big h3 { font-size: 1.75rem; }
.lp-event-body { padding: 18px 20px 20px; }
.lp-event h3 { margin: 0 0 6px; font: 800 1.375rem/1.05 var(--display); text-transform: uppercase; color: var(--deep-2); }
.lp-event p { margin: 0; font-size: .9375rem; color: var(--ink-2); }

/* testimonials */
.lp-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lp-tquote { margin: 0; padding: 32px; border-radius: var(--r); background: var(--surface); box-shadow: 0 10px 30px rgba(29, 22, 40, .07); }
.lp-tquote blockquote { margin: 0 0 20px; font-size: 1.1875rem; line-height: 1.55; color: var(--ink); }
.lp-tquote blockquote::before { content: "“"; display: block; height: .5em; font: 900 4rem/1 var(--display); color: var(--pink); }
.lp-tquote figcaption b { display: block; }
.lp-tquote figcaption span { font-size: .875rem; color: var(--muted); }

/* gallery */
.lp-gallery-sec { padding-top: 0; }
/* 10 photos fill a 4-wide grid exactly: 5 wide tiles + 1 tall tile; "dense" packs the gaps */
.lp-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; gap: 12px; margin-top: 32px; }
.lp-gallery figure { margin: 0; border-radius: 16px; overflow: hidden; background: #e4ddf0; }
.lp-gallery figure:is(:nth-child(1), :nth-child(3), :nth-child(6), :nth-child(9), :nth-child(10)) { grid-column: span 2; }
.lp-gallery figure:nth-child(5) { grid-row: span 2; }
.lp-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lp-gallery figure:hover img { transform: scale(1.05); }

/* CTA */
.lp-cta { position: relative; overflow: hidden; padding: 88px 0; color: #fff; background: radial-gradient(700px 400px at 90% 0%, rgba(226, 51, 90, .35), transparent 60%), linear-gradient(140deg, var(--brand) 0%, var(--deep-2) 70%); }
.lp-cta-in { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.lp-contact { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 1.125rem; }
.lp-contact li { display: flex; align-items: center; gap: 12px; }
.lp-contact i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.lp-contact a { color: #fff; text-decoration: none; font-weight: 500; }
.lp-contact a:hover { text-decoration: underline; }
.lp-member { padding: 32px; border-radius: 24px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.lp-member img { width: 56px; height: auto; background: #fff; border-radius: 50%; padding: 4px; }
.lp-member h3 { margin: 16px 0 8px; font: 800 1.75rem/1 var(--display); text-transform: uppercase; }
.lp-member p { margin: 0 0 24px; color: rgba(255, 255, 255, .82); }

/* footer */
.lp-foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--hair); }
.lp-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.lp-foot p { margin: 0; font-size: .875rem; color: var(--muted); }
.lp-foot-link { font-weight: 600; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .lp-links { display: none; }
  .lp-menu-btn { display: grid; place-items: center; }
  .lp-nav-cta { margin-left: auto; }
  .lp-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .lp-hero-art { width: min(360px, 88%); }
  .lp-cards { grid-template-columns: 1fr 1fr; }
  .lp-approach-in, .lp-coach, .lp-cta-in { grid-template-columns: 1fr; gap: 40px; }
  .lp-approach-photo { max-width: 420px; }
  .lp-coach-photo { max-width: 360px; }
  .lp-event-grid { grid-template-columns: 1fr; }
  .lp-event--big { grid-row: auto; }
  .lp-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639.98px) {
  .lp-hide-sm { display: none; }
  .lp-nav-in { gap: 12px; height: 64px; }
  .lp-brand { font-size: 1.125rem; }
  .lp-brand img { width: 34px; }
  .lp-hero { padding-top: calc(64px + env(safe-area-inset-top) + 32px); }
  .lp-hero-actions .lp-btn { width: 100%; }
  .lp-stats { grid-template-columns: 1fr 1fr; }
  .lp-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .lp-stats > div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 20px; }
  .lp-section { padding: 64px 0; }
  .lp-cards, .lp-quotes, .lp-coach-grid { grid-template-columns: 1fr; }
  .lp-event { grid-template-columns: 38% 1fr; }
  .lp-event-body { padding: 14px 16px; }
  .lp-gallery { grid-auto-rows: 140px; }
  .lp-tquote, .lp-member { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}