/* Landing page. It keeps the pieces of the original Webflow landing page (big GOLDEN COBRAS title,
   video, yellow section tabs, bordered square cards, yellow coach cards, the black Cobra Development
   Model band, the faded cobra behind the page) and tidies the flow between them:
   hero with the call to join > latest events > who we are and THRIVED > coaches >
   development path > schedule > story > news > join. */
.home .wrap, .home ~ .site-footer .wrap { max-width: 1320px; }
.bg-mark { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 0; }
.bg-mark img { width: min(420px, 60vw); height: auto; }
.home, .site-footer { position: relative; z-index: 1; }
.home-sec { padding: clamp(56px, 7.5vw, 112px) var(--gutter) 0; }
.home .tab { margin-bottom: clamp(18px, 2.2vw, 30px); }
.home .h2 { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.02em; }
.sec-lead { font-size: clamp(16px, 1.3vw, 18px); color: var(--grey-d); max-width: 60ch; margin: -6px 0 clamp(20px, 2.4vw, 30px); }

/* a tab with a link or controls at its right-hand end */
.tab-row { position: relative; }
.tab-link, .rail-nav { position: absolute; right: 0; top: 0; height: calc(100% - clamp(18px, 2.2vw, 30px) - 4px); display: flex; align-items: center; gap: 8px; }
.tab-link { font-weight: 700; font-size: 14px; text-decoration: none; padding-left: 12px; }
.tab-link .arrow { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tab-link:hover .arrow { transform: translateX(4px); } }

/* square buttons */
.sq-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--black); color: var(--white); font-weight: 700; font-size: 15px; text-decoration: none; padding: 15px 22px; border: 2px solid transparent; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.sq-btn:active { transform: scale(0.97); }
.sq-btn .arrow { transition: transform 200ms var(--ease-out); }
.sq-gold, .sq-yellow { background: var(--yellow); color: var(--black); }
.sq-line { background: none; border-color: var(--white); color: var(--white); }
.sq-yellow { font-size: clamp(16px, 1.7vw, 22px); letter-spacing: -0.01em; padding: 0.7em 1.2em; }
@media (hover: hover) and (pointer: fine) {
  .sq-btn:hover { background: var(--yellow); color: var(--black); }
  .sq-gold:hover, .sq-yellow:hover, .sq-line:hover { background: var(--white); color: var(--black); border-color: var(--white); }
  .sq-btn:hover .arrow { transform: translateX(4px); }
}

/* ---------- top: title, video with the call to join, age groups, latest events (black) ---------- */
.home-top { background: var(--black); color: var(--white); padding: 0 var(--gutter) clamp(48px, 6vw, 88px); overflow: hidden; }
.home-title { font-family: "Bai Jamjuree", sans-serif; text-transform: none; text-align: left; margin: 0; padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 2.6vw, 34px); line-height: 1; letter-spacing: -0.035em; }
.home-title span { display: block; }
.ht-name { font-weight: 700; color: var(--yellow); font-size: clamp(48px, 8.2vw, 116px); line-height: 0.95; }
.ht-sub { font-weight: 500; color: var(--white); font-size: clamp(22px, 3.3vw, 46px); line-height: 1.1; margin-top: 0.22em; letter-spacing: -0.02em; }
.home-video { position: relative; background: #111; overflow: hidden; display: grid; }
/* video and text share one grid cell: the box is at least the video's shape, and grows if the text needs more room, so nothing is ever cut off */
.home-video video { grid-area: 1 / 1; display: block; width: 100%; height: 100%; min-height: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.home-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.3) 100%); pointer-events: none; }
.home-video-in { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 64px); align-items: end; padding: clamp(18px, 3.4vw, 48px); }
.home-tag { font-weight: 700; font-size: clamp(28px, 4.3vw, 60px); line-height: 1.02; letter-spacing: -0.03em; }
.home-tag span { display: block; color: var(--yellow); }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(14px, 1.6vw, 22px); }
.home-ages { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px clamp(14px, 2.6vw, 40px); padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.home-ages span { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ice); margin-right: auto; }
.home-ages b { font-size: clamp(20px, 2.6vw, 34px); letter-spacing: -0.02em; line-height: 1; }
.home-block { margin-top: clamp(44px, 6vw, 84px); }

/* ---------- event and news cards ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.feature-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.55); text-decoration: none; color: inherit; transition: border-color 200ms ease, transform 160ms var(--ease-out); }
.fc-photo { display: block; overflow: hidden; }
.fc-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms var(--ease-out); }
.fc-text { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px 18px 16px; flex: 1; border-top: 4px solid var(--yellow); }
.fc-title { font-weight: 700; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.22; letter-spacing: -0.015em; }
.fc-meta { font-size: 14px; color: var(--ice); }
.features.on-white .feature-card { border-color: var(--black); background: var(--white); }
.features.on-white .fc-meta { color: var(--grey-d); }
.feature-card:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .feature-card:hover { border-color: var(--yellow); } .features.on-white .feature-card:hover { border-color: var(--black); } .feature-card:hover .fc-photo img { transform: scale(1.05); } }

/* ---------- about and THRIVED ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.about-statement { font-weight: 700; font-size: clamp(24px, 3vw, 41px); line-height: 1.28; letter-spacing: -0.01em; text-wrap: pretty; }
.about-more { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--grey-d); }
.about-more .sq-btn { margin-top: 20px; }
.values-title { margin-top: clamp(40px, 5vw, 72px); font-weight: 700; font-size: 18px; }
.home .values { margin-top: 14px; gap: 10px; }
.home .value { background: var(--white); border: 1px solid var(--black); }
.home .value b { font-size: clamp(34px, 3.4vw, 46px); }

/* ---------- coaches: one row that scrolls sideways ---------- */
.rail-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: var(--black); color: var(--white); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
.rail-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .rail-btn:hover { background: var(--yellow); color: var(--black); } }
.coach-rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(230px, 23.6vw, 316px); grid-template-columns: none; gap: 14px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-color: #9a9a9a var(--wash); }
.coach-rail > li { scroll-snap-align: start; }
.coach-rail .coach-name { font-size: clamp(20px, 1.9vw, 25px); }
.coach-rail:focus-visible { outline: 3px solid var(--black); outline-offset: 4px; }

/* ---------- Cobra Development Model: band, then the path ---------- */
.loop-band { background: var(--black); color: var(--yellow); overflow: hidden; margin-top: clamp(56px, 7.5vw, 112px); padding-block: clamp(30px, 4.4vw, 60px); }
.loop-text { font-weight: 700; letter-spacing: -0.04em; line-height: 1; text-align: center; font-size: min(7.3vw, 108px); padding-inline: var(--gutter); }
.model-sec { padding-top: clamp(40px, 5vw, 72px); }
.model-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 5vw, 80px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.model-head p { font-size: clamp(16px, 1.25vw, 18px); color: var(--grey-d); }
.model-head .textlink { display: inline-flex; margin-top: 8px; color: var(--ink); }
.path { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr); gap: 0; align-items: stretch; }
/* The step between the two programs: a yellow track that draws itself, chevrons flowing along it, and a big arrow head. */
.path-link { --run: 140px; position: relative; align-self: center; width: 140px; height: 112px; display: grid; place-items: center; }
.pl-label { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); transition: opacity 400ms ease 600ms, transform 500ms var(--ease-out) 600ms; }
.pl-arrow { display: flex; align-items: center; width: 100%; height: 52px; }
.pl-track { position: relative; flex: 1; height: 26px; background: var(--yellow); overflow: hidden; transform-origin: left center; transition: transform 700ms var(--ease-out) 150ms; }
.pl-track i { position: absolute; top: 7px; left: 0; width: 11px; height: 11px; border-top: 3px solid var(--black); border-right: 3px solid var(--black); transform: translateX(-16px) rotate(45deg); animation: pl-flow 2s linear infinite; }
.pl-track i:nth-child(2) { animation-delay: -0.5s; }
.pl-track i:nth-child(3) { animation-delay: -1s; }
.pl-track i:nth-child(4) { animation-delay: -1.5s; }
@keyframes pl-flow { from { transform: translateX(-16px) rotate(45deg); } to { transform: translateX(var(--run)) rotate(45deg); } }
html.motion .path-link:not(.in) .pl-track { transform: scaleX(0); }
html.motion .path-link:not(.in) .pl-label { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .pl-track i { animation: none; transform: translateX(calc(var(--run) / 2)) rotate(45deg); }
  .pl-track i + i { display: none; }
  html.motion .path-link:not(.in) .pl-track, html.motion .path-link:not(.in) .pl-label { transform: none; }
}
.academy-card { display: grid; grid-template-columns: clamp(130px, 13vw, 180px) minmax(0, 1fr); border: 1px solid var(--black); background: var(--white); }
.ac-side { background: var(--black); color: var(--white); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ac-step { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); }
.ac-side h3 { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.3; letter-spacing: 0; }
.ac-side img { width: 100%; height: auto; margin-block: auto; padding-top: 10px; }
.ac-main { padding: 16px 18px 18px; display: flex; flex-direction: column; }
.ac-sub { font-weight: 700; font-size: clamp(15px, 1.2vw, 17px); margin-bottom: 14px; }
.ac-steps { display: grid; gap: 8px; }
.ac-steps.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.3; font-weight: 600; }
.ac-steps b { width: 34px; height: 34px; display: grid; place-items: center; background: var(--yellow); font-size: 16px; }
.ac-note { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--grey-d); }

/* ---------- schedule ---------- */
.schedule-slider { position: relative; overflow: hidden; background: #111; color: var(--white); min-height: clamp(380px, 46vw, 620px); display: grid; align-items: end; }
.schedule-slider .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1100ms ease, transform 7s cubic-bezier(0.2, 0.6, 0.3, 1); }
.schedule-slider .slide.on { opacity: 1; transform: none; }
.schedule-slider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.2) 100%); }
.schedule-in { position: relative; z-index: 1; padding: clamp(20px, 3.6vw, 52px); max-width: 760px; }
.schedule-in p { margin-top: 10px; font-size: clamp(15px, 1.25vw, 18px); color: #EDEDED; max-width: 46ch; }
.schedule-in .sq-btn { margin-top: clamp(16px, 2vw, 26px); }

/* ---------- story (black, like a cinema) ---------- */
.story-band { background: var(--black); color: var(--white); margin-top: clamp(56px, 7.5vw, 112px); padding: clamp(48px, 6vw, 88px) var(--gutter); }
.story-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); align-items: start; }
.story-main { transition: filter 180ms ease, opacity 180ms ease; }
.story-main.swapping { filter: blur(6px); opacity: 0.6; }
.story-now { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.story-now span { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); }
.story-now b { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.3; }
.story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.story-pick { display: grid; grid-template-columns: 44% minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: var(--white); text-align: left; font: inherit; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out); }
.story-pick:active { transform: scale(0.98); }
.story-pick[aria-pressed="true"] { border-color: var(--yellow); background: rgba(255, 214, 0, 0.1); }
.sp-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-len { position: absolute; right: 6px; bottom: 6px; background: rgba(0, 0, 0, 0.8); font-size: 11px; font-weight: 700; padding: 1px 6px; }
.sp-text { font-size: clamp(13px, 1.05vw, 15px); font-weight: 600; line-height: 1.35; }
.story-pick[aria-pressed="true"] .sp-text { color: var(--yellow); }
@media (hover: hover) and (pointer: fine) { .story-pick:hover { border-color: rgba(255, 255, 255, 0.6); } .story-pick[aria-pressed="true"]:hover { border-color: var(--yellow); } }
@media (max-width: 900px) { .story-layout { grid-template-columns: minmax(0, 1fr); } }
.story-video { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.story-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.story-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.story-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.story-icon { position: relative; width: clamp(64px, 7vw, 92px); aspect-ratio: 1; background: var(--yellow); color: var(--black); display: grid; place-items: center; transition: transform 200ms var(--ease-out); }
.story-play:active .story-icon { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .story-play:hover .story-icon { transform: scale(1.08); } .story-play:hover img { transform: scale(1.02); } }

/* ---------- join (yellow) ---------- */
.join-band { background: var(--yellow); color: var(--black); margin-top: clamp(56px, 7.5vw, 112px); padding: clamp(48px, 6.5vw, 96px) var(--gutter); }
.join-head { font-size: clamp(40px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.04em; }
.join-lead { font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; margin-top: 12px; }
.join-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(24px, 3vw, 44px); }
.join-card { background: var(--white); border: 1px solid var(--black); padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.join-card h3 { font-size: clamp(21px, 2vw, 27px); letter-spacing: -0.02em; }
.join-card p { color: var(--grey-d); font-size: 16px; }
.join-card .sq-btn { margin-top: auto; align-self: flex-start; }
.join-card p + .sq-btn { margin-top: 14px; }
.join-card.pick { background: var(--black); color: var(--white); }
.join-card.pick p { color: var(--ice); }
.join-card.pick .sq-btn { background: var(--yellow); color: var(--black); }
.join-band :focus-visible { outline-color: var(--black); }
@media (hover: hover) and (pointer: fine) { .join-card .sq-btn:hover { background: var(--black); color: var(--yellow); } .join-card.pick .sq-btn:hover { background: var(--white); color: var(--black); } }

@media (max-width: 900px) {
  .features, .join-cards, .about-grid, .model-head, .path { grid-template-columns: minmax(0, 1fr); }
  .path-link { --run: 112px; width: 100%; height: 112px; }
  .pl-arrow { position: absolute; left: 50%; top: 50%; width: 112px; margin: -26px 0 0 -56px; transform: rotate(90deg); }
  .pl-label { top: 50%; left: calc(50% + 40px); right: auto; margin-top: -9px; text-align: left; }
  .home-video video { aspect-ratio: 1 / 1; }
  .home-video-in { padding-top: 96px; }
  .home-video-in { grid-template-columns: minmax(0, 1fr); }
  .coach-rail { grid-auto-columns: 70vw; }
  .ac-steps.two { grid-template-columns: minmax(0, 1fr); }
  .feature-card { flex-direction: row; }
  .fc-photo { flex: 0 0 34%; }
  .fc-photo img { height: 100%; aspect-ratio: 1; }
  .fc-text { border-top: 0; border-left: 4px solid var(--yellow); padding: 12px 14px; }
  .tab-link { position: static; height: auto; margin: -8px 0 16px; justify-content: flex-end; }
  .rail-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .schedule-slider .slide { transform: none; } .coach-rail { scroll-behavior: auto; } }
/* the menu bar lines up with the wider landing page content */
.site-header .wrap { max-width: 1320px; }

/* ---------- Cobra family: three celebration photos ---------- */
.family-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(16px, 5vw, 80px); align-items: end; margin-bottom: clamp(20px, 2.6vw, 34px); }
.family-head p { font-size: clamp(16px, 1.25vw, 18px); color: var(--grey-d); }
.family { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: clamp(8px, 1vw, 14px); }
.family figure { margin: 0; overflow: hidden; background: #111; }
.family img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.fam-a { grid-row: 1 / 3; }
.fam-a img { aspect-ratio: auto; }
.fam-b img, .fam-c img { aspect-ratio: 3 / 2; }
@media (hover: hover) and (pointer: fine) { .family figure:hover img { transform: scale(1.03); } }
@media (max-width: 900px) {
  .family-head { grid-template-columns: minmax(0, 1fr); }
  .family { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .fam-a { grid-row: auto; grid-column: 1 / 3; }
  .fam-a img { aspect-ratio: 3 / 2; }
}

/* ---------- The Mind on the Ice: book promo ---------- */
.book-promo { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: clamp(24px, 4vw, 64px); align-items: center; background: var(--black); color: var(--white); padding: clamp(24px, 4vw, 56px); border-bottom: 6px solid var(--yellow); }
.bp-cover { display: block; perspective: 1200px; }
.bp-cover img { display: block; width: 100%; max-width: 300px; margin-inline: auto; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1); transform: rotateY(-10deg); transition: transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bp-cover:hover img { transform: rotateY(0) translateY(-6px); } }
.bp-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); }
.book-promo .h2 { color: var(--white); margin-top: 8px; }
.bp-sub { margin-top: 10px; color: var(--ice); font-size: clamp(16px, 1.3vw, 18px); max-width: 56ch; }
.bp-quote { margin: 20px 0 0; padding-left: 16px; border-left: 4px solid var(--yellow); font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; line-height: 1.45; max-width: 52ch; }
.bp-actions { margin-top: 24px; }
@media (max-width: 900px) { .book-promo { grid-template-columns: minmax(0, 1fr); } .bp-cover img { max-width: 200px; transform: none; } }

.fc-meta > span { display: block; }

@media (max-width: 480px) { .home-ages { gap: 6px 14px; } .home-ages span { flex-basis: 100%; } .home-ages b { font-size: 24px; } }
@media (min-width: 901px) { .home-actions { margin-top: 0; } }