/* ==========================================================================
   Sport AI Foundation: shared static layer
   Tokens, reset, grid-line overlay, header, mobile menu, footer and the
   shared components (buttons, labels, gradient text, member cards, fields).

   Breakpoints (same as the original):
     desktop  >= 1440px                     (default rules in this file)
     tablet   810px to 1439.98px            @media (min-width: 810px) and (max-width: 1439.98px)
     phone    < 810px                       @media (max-width: 809.98px)
   Layouts are fluid inside each range. Desktop rules are the base and the
   tablet/phone blocks override them, mirroring the original's CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours (names follow the original's design tokens) */
  --c-navy-950: #021226;   /* rgb(2, 18, 38)   page background, dark text on light */
  --c-navy-900: #051940;   /* rgb(5, 25, 64)   desktop scrolled header, card gradient */
  --c-navy-800: #071c59;   /* rgb(7, 28, 89)   tablet/phone scrolled header */
  --c-teal: #32b4c6;       /* rgb(50, 180, 198) Contact Us button, borders */
  --c-green: #6bbf90;      /* rgb(107, 191, 144) hover, gradients */
  --c-lime: #96d077;       /* rgb(150, 208, 119) */
  --c-lime-2: #a2d36d;     /* rgb(162, 211, 109) */
  --c-white: #fff;
  --c-cream: #f1f0ee;      /* rgb(241, 240, 238) menu item hover */
  --c-stone: #e8e4e2;      /* rgb(232, 228, 226) */
  --c-grey-999: #999;      /* rgb(153, 153, 153) nav text, placeholders, footer tagline */
  --c-grey-808: #808080;   /* rgb(128, 128, 128) */
  --c-grey-737: #737373;   /* rgb(115, 115, 115) */
  --c-grey-666: #666;      /* rgb(102, 102, 102) footer small print */
  --c-grey-4d4: #4d4d4d;   /* rgb(77, 77, 77) */
  --c-grey-333: #333;      /* rgb(51, 51, 51) */
  --c-ink: #1a1a1a;        /* rgb(26, 26, 26) dark pill button */
  --c-black: #000;
  --c-focus: #09f;         /* rgb(0, 153, 255) focused input border */

  /* Gradients */
  --grad-pill: radial-gradient(67% 200% at 75.8% 82.5%, rgba(189, 242, 109, 0.65) 0%, rgba(7, 129, 230, 0.6) 100%);
  --grad-pill-hover: radial-gradient(67% 200% at 75.8% 82.5%, rgba(7, 129, 230, 0.6) 0%, rgba(189, 242, 109, 0.65) 100%);
  --grad-card: linear-gradient(180deg, var(--c-navy-900) 0%, var(--c-green) 35%, var(--c-navy-900) 65%, var(--c-navy-950) 100%);
  --grad-text-light-green: linear-gradient(90deg, var(--c-white) 16%, var(--c-green) 140%);
  --grad-text-dark-green: linear-gradient(90deg, var(--c-navy-950) 0%, var(--c-green) 133%);
  --grad-text-light-grey: linear-gradient(90deg, var(--c-white) 16%, var(--c-grey-4d4) 140%);

  /* Typography */
  --font-sans: "Urbanist", "Urbanist Placeholder", sans-serif;
  --font-serif: "Arapey", "Arapey Placeholder", serif;
  --font-inter-display: "Inter Display", "Inter Display Placeholder", sans-serif;

  /* Layout */
  --page-max: 1920px;
  --gutter: 72px;          /* section/footer side padding */
  --header-gutter: 72px;   /* header side padding (52px tablet, 22px phone) */
  --header-h: 140px;       /* header height at the top of the page */

  /* Motion defaults */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.44, 0, 0.56, 1);
  --dur-hover: 0.3s;
  --dur-underline: 0.7s;

  /* Motion curves measured on the original (Framer springs). Each spring
     is a duration plus an easing; browsers with CSS linear() get the exact
     sampled spring (below), older ones a close cubic-bezier.
     --spring-appear     stiffness 200, damping 40: appear slides, cursor
     --spring-underline  stiffness 500, damping 60: nav/footer underlines
     --spring-header     stiffness 200, damping 30: header settle
     --spring-bounce     duration 0.4, bounce 0.2 (1.5% overshoot): Contact Us,
                         menu panel and items, home 3x3 tiles
     --tween-button      0.3s ease [.44,0,.56,1]: pill buttons, card fades */
  --spring-appear: cubic-bezier(0.2, 0.75, 0.3, 1);
  --spring-appear-dur: 1200ms;
  --spring-underline: cubic-bezier(0.2, 0.75, 0.3, 1);
  --spring-underline-dur: 700ms;
  --spring-header: cubic-bezier(0.3, 0.6, 0.3, 1);
  --spring-header-dur: 800ms;
  --spring-bounce: cubic-bezier(0.3, 0.9, 0.4, 1.1);
  --spring-bounce-dur: 500ms;
  --tween-button: cubic-bezier(0.44, 0, 0.56, 1);
  --tween-button-dur: 300ms;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-appear: linear(0, 0.137, 0.335, 0.5, 0.626, 0.721, 0.792, 0.845, 0.884, 0.914, 0.935, 0.952, 0.964, 0.973, 0.98, 0.985, 0.989, 0.992, 0.994, 0.995, 0.997, 0.997, 0.998, 0.999, 1);
    --spring-underline: linear(0, 0.163, 0.387, 0.564, 0.692, 0.783, 0.847, 0.892, 0.924, 0.946, 0.962, 0.973, 0.981, 0.987, 0.991, 0.993, 0.995, 0.997, 0.998, 0.998, 1);
    --spring-header: linear(0, 0.109, 0.303, 0.488, 0.637, 0.748, 0.827, 0.882, 0.92, 0.946, 0.964, 0.976, 0.984, 0.989, 0.993, 0.995, 0.997, 0.998, 0.999, 0.999, 1);
    --spring-bounce: linear(0, 0.112, 0.331, 0.553, 0.732, 0.859, 0.939, 0.985, 1.006, 1.014, 1.015, 1.012, 1.009, 1.005, 1.003, 1.002, 1.001, 1, 1, 1, 1);
  }
}

@media (min-width: 810px) and (max-width: 1439.98px) {
  :root { --header-gutter: 52px; }
}
@media (max-width: 809.98px) {
  :root { --gutter: 20px; --header-gutter: 22px; }
}

/* --------------------------------------------------------------------------
   2. Reset and body
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: inherit; }
html, body { margin: 0; padding: 0; }
body {
  position: relative;
  min-height: 100vh;
  background: var(--c-navy-950);
  color: var(--c-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.2;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: none; }
/* <picture> only offers the AVIF source: neither it nor its <source> adds a
   box (a <source> would otherwise become an empty flex item and take a
   gap), so the <img> keeps its place and every img rule applies as if it
   were unwrapped. */
picture { display: contents; }
source { display: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
main { display: block; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 8px;
  background: var(--c-teal); color: var(--c-white);
  font: 500 16px/1.2 var(--font-sans);
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--c-teal); outline-offset: 3px; }
/* These controls sit in overflow: hidden boxes (the clips of the slide-ups),
   which would cut an outer ring; their ring is drawn inside them instead
   (an element's own overflow never clips its own outline). The dark pill
   draws it on its border layer, above the rising fill. */
.btn-gradient:focus-visible { outline-offset: -4px; }
.footer-email:focus-visible { outline-offset: -2px; }
.btn-dark:focus-visible { outline: none; }
.btn-dark:focus-visible .btn-dark__border { outline: 2px solid var(--c-teal); outline-offset: -4px; }

/* --------------------------------------------------------------------------
   3. Decorative vertical grid lines (whole page, over content, under header)
   Three 3px-wide SVG strips; the 0.4px white line at 30% opacity renders as
   a faint 2-pixel line. Positions: 352px from each side (tablet: 200px),
   plus the centre. They are invisible on white sections (white on white).
   -------------------------------------------------------------------------- */
.site-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.site-grid__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  height: 100%;
  overflow: hidden;
}
.site-grid__line line { stroke: #fff; stroke-opacity: 0.3; stroke-width: 0.4; }
.site-grid__line--1 { left: 352px; }
.site-grid__line--2 { left: calc(50% - 1.5px); }
.site-grid__line--3 { right: 352px; }
@media (min-width: 810px) and (max-width: 1439.98px) {
  .site-grid__line--1 { left: 200px; }
  .site-grid__line--3 { right: 200px; }
}

/* --------------------------------------------------------------------------
   4. Header (sticky). States: default (transparent) and .is-scrolled
   (rounded navy bar). main.js toggles .is-scrolled.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
}
.site-header__inner {             /* capped at 1920px and pinned left, like the original */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--page-max);
  padding: 20px var(--header-gutter);
}
.site-header__bar {               /* 100px band; becomes the rounded panel when scrolled */
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0);
}
.site-header__row {               /* logo | nav | button, as tall as the logo (70.2px) */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header__logo {
  position: relative;
  flex: none;
  display: block;
  width: 200px;
  aspect-ratio: 2.85 / 1;
}
.site-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Desktop nav */
.site-nav__list { display: flex; align-items: center; gap: 24px; }
.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 4px;            /* the original reserves a 4px gap after the label */
  font: 600 14px/20px var(--font-sans);
  letter-spacing: 0;
  color: var(--c-grey-999);
  white-space: pre;
  /* the original swaps the text colour instantly */
}
.site-nav__link::after {         /* underline, grows on hover */
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(95% - 0.5px);
  left: -0.5px;
  width: 1px;
  height: 1px;
  background: var(--c-white);
  opacity: 0;
  transition:
    width var(--spring-underline-dur) var(--spring-underline),
    left var(--spring-underline-dur) var(--spring-underline),
    opacity var(--spring-underline-dur) var(--spring-underline);
}
.site-nav__link:hover, .site-nav__link:focus-visible { color: var(--c-white); }
.site-nav__link:hover::after, .site-nav__link:focus-visible::after {
  left: -1px;
  width: 100%;
  opacity: 1;
  /* Growing, the original's opacity runs the same spring 70ms behind the
     width (measured); shrinking, both run together (base rule). */
  transition:
    width var(--spring-underline-dur) var(--spring-underline),
    left var(--spring-underline-dur) var(--spring-underline),
    opacity var(--spring-underline-dur) var(--spring-underline) 70ms;
}

/* Header Contact Us button ("Button-Big") */
.btn-contact {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: none;
  padding: 12px 14px;
  border-radius: 8px;
  background-color: var(--c-teal);
  color: var(--c-white);
  font: 500 18px/27px var(--font-sans);
  white-space: pre;
  overflow: hidden;
  transition: background-color var(--spring-bounce-dur) var(--spring-bounce);
}
.btn-contact:hover, .btn-contact:focus-visible { background-color: var(--c-green); }

/* Hamburger + mobile menu (tablet and phone) */
.site-header__menu { display: none; flex: none; }
.site-header__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  padding: 14px;
  border-radius: 12px;
  background-color: var(--c-teal);
}
.site-header__toggle img { width: 24px; height: 24px; }

/* The panel is a page-level layer after the header, like the original's
   overlay: main.js places it in document coordinates when it opens (10px
   under the icon, right edges aligned), so it scrolls away with the page
   and slides over the sticky header (z-index 11 > 10). The values below
   are the icon's place at the top of the page.
   overflow-anchor: none keeps the panel out of scroll anchoring. It is
   the first anchor candidate after the sticky header (even while hidden),
   so Chrome would anchor to it and not make up for the home header
   shrinking 9.8px at the variant switch (the original lands on 129 after
   scrollTo(0, 139), not 139). */
.mobile-menu {
  position: absolute;
  z-index: 11;
  overflow-anchor: none;
  top: 106px;                    /* header padding 20 + icon offset 24 + icon 52 + gap 10 */
  right: var(--header-gutter);
  width: 200px;                  /* 200px at tablet and phone (measured 772-972 at 1024) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--c-navy-950);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  will-change: transform, opacity;
  transition:
    opacity var(--spring-bounce-dur) var(--spring-bounce),
    transform var(--spring-bounce-dur) var(--spring-bounce),
    visibility 0s linear var(--spring-bounce-dur);
}
.mobile-menu::after {            /* 1px teal border drawn inside the box */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-teal);
  border-radius: inherit;
  pointer-events: none;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--spring-bounce-dur) var(--spring-bounce),
    transform var(--spring-bounce-dur) var(--spring-bounce),
    visibility 0s;
}
.mobile-menu.is-instant { transition: none; }   /* closed with the home header's variant switch */
/* Invisible "safe area" of the open panel (main.js initMenu): a clip-path
   triangle from the pointer on the icon to the panel's top corners. Empty
   (0 x 0) until main.js draws it; overflow-anchor as on the panel. */
.mobile-menu-safe {
  position: absolute;
  z-index: 11;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow-anchor: none;
}

/* Without JavaScript the panel shows while the icon or the panel is
   hovered or holds focus, fixed under the icon; ::before bridges the
   10px gap so the pointer can travel from the icon into the panel. */
html:not(.js) .mobile-menu { position: fixed; }
html:not(.js) .mobile-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
html:not(.js) .site-header:has(.site-header__menu:hover, .site-header__menu:focus-within) + .mobile-menu,
html:not(.js) .mobile-menu:hover,
html:not(.js) .mobile-menu:focus-within {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--spring-bounce-dur) var(--spring-bounce), transform var(--spring-bounce-dur) var(--spring-bounce), visibility 0s;
}
.mobile-menu__list { display: flex; flex-direction: column; align-items: flex-start; }
.mobile-menu__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 1px;
  border-radius: 8px;
}
.mobile-menu__link span {
  display: block;
  padding: 12px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0);
  font: 500 17px/25.5px var(--font-inter-display);
  color: var(--c-white);
  white-space: pre;
  transition:
    background-color var(--spring-bounce-dur) var(--spring-bounce),
    color var(--spring-bounce-dur) var(--spring-bounce);
}
.mobile-menu__link:hover span, .mobile-menu__link:focus-visible span {
  background-color: var(--c-cream);
  color: var(--c-grey-999);
}
.mobile-menu__cta { align-self: stretch; padding: 16px 14px; }

@media (max-width: 1439.98px) {
  .site-nav, .site-header__cta { display: none; }
  .site-header__menu { display: block; }
}
@media (min-width: 1440px) {
  .mobile-menu, .mobile-menu-safe { display: none; }
}

/* Scrolled state */
.site-header.is-scrolled .site-header__inner { padding: 20px 52px; }
.site-header.is-scrolled .site-header__bar {
  height: auto;
  max-width: 1050px;
  padding: 10px 20px;
  border-radius: 12px;
  background-color: var(--c-navy-900);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
@media (min-width: 810px) and (max-width: 1439.98px) {
  .site-header.is-scrolled .site-header__bar {
    max-width: 900px;
    background-color: var(--c-navy-800);
    box-shadow: none;
  }
  .site-header.is-scrolled .site-header__logo { width: 199px; }
  /* The panel is the header's next sibling: 215px wide with the scrolled header */
  .site-header.is-scrolled + .mobile-menu { width: 215px; }
}
@media (max-width: 809.98px) {
  .site-header.is-scrolled .site-header__inner { padding: 20px 22px; }
  .site-header.is-scrolled .site-header__bar {
    max-width: 450px;
    background-color: var(--c-navy-800);
    box-shadow: none;
  }
}

/* --------------------------------------------------------------------------
   5. Text helpers
   -------------------------------------------------------------------------- */
/* Section label ("Who We Are", "Our services", ...). Colour follows context;
   add .label--dark on white sections. */
.label {
  font: 500 14px/20px var(--font-sans);
  letter-spacing: 0;
  color: var(--c-white);
}
.label--dark { color: var(--c-navy-950); }

/* Body text preset used across the site (20px / 1.2em / 500) */
.text-body {
  font: 500 20px/1.2em var(--font-sans);
  letter-spacing: 0;
}

/* Gradient text. Same box model as the original's text-fill spans:
   inline-block with padding/margin that compensates a line-height below 1.3em. */
.text-gradient {
  display: inline-block;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: var(--grad-text-light-green);
  padding: max(0em, calc((1.3em - 1lh) / 2));
  margin: min(0em, calc((1.3em - 1lh) / -2));
}
.text-gradient--light-green { background-image: var(--grad-text-light-green); }
.text-gradient--dark-green { background-image: var(--grad-text-dark-green); }
.text-gradient--light-grey { background-image: var(--grad-text-light-grey); }

/* --------------------------------------------------------------------------
   6. Shared components
   -------------------------------------------------------------------------- */

/* 6.1 Arrow icon (14px, used in pill buttons). Stroke follows currentColor. */
.icon-arrow {
  flex: none;
  width: 14px;
  height: 14px;
  overflow: visible;
  transition: transform var(--dur-hover) var(--ease-std);
}

/* 6.2 Gradient pill button ("Explore our domains", "Register for this course").
   On hover the two radial stops swap places over 300ms; the stops are
   registered colour properties so the gradient itself can transition. */
@property --pill-from { syntax: "<color>"; inherits: false; initial-value: rgba(189, 242, 109, 0.65); }
@property --pill-to { syntax: "<color>"; inherits: false; initial-value: rgba(7, 129, 230, 0.6); }
.btn-gradient {
  --pill-from: rgba(189, 242, 109, 0.65);
  --pill-to: rgba(7, 129, 230, 0.6);
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 10px 30px;
  border-radius: 44px;
  background: radial-gradient(67% 200% at 75.8% 82.5%, var(--pill-from) 0%, var(--pill-to) 100%);
  color: var(--c-white);
  font: 400 18px/1.2em var(--font-sans);
  letter-spacing: -0.05em;
  white-space: pre;
  user-select: none;
  transition:
    --pill-from var(--tween-button-dur) var(--tween-button),
    --pill-to var(--tween-button-dur) var(--tween-button);
}
.btn-gradient:hover, .btn-gradient:focus-visible {
  --pill-from: rgba(7, 129, 230, 0.6);
  --pill-to: rgba(189, 242, 109, 0.65);
}
.btn-gradient:hover .icon-arrow, .btn-gradient:focus-visible .icon-arrow { transform: rotate(45deg); }

/* 6.3 Dark pill button with border and rising "BG Fill".
   Links ("Register executive course", "Get more information first"): 40px
   tall, arrow turns 45deg on hover.
   Link buttons turn their teal border green on hover.
   Form submit buttons (Subscribe, "Register", "Start The Conversation"):
   add .btn-dark--submit: height from content (44px), white border, arrow
   does not turn. */
.btn-dark {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0;
  border-radius: 100px;
  background-color: var(--c-ink);
  color: var(--c-white);
  overflow: hidden;
  cursor: pointer;
}
.btn-dark--submit { height: auto; }
.btn-dark__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
}
.btn-dark__text {
  position: relative;
  z-index: 3;
  font: 500 20px/1.2em var(--font-sans);
  text-align: center;            /* original: --framer-text-alignment center */
  white-space: pre;
  transition: color var(--dur-hover) var(--ease-std);
}
.btn-dark__text--sm { font-size: 16px; line-height: 16px; text-transform: capitalize; }
.btn-dark .icon-arrow { position: relative; z-index: 3; transition: transform var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std); }
.btn-dark__border {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1.6px solid var(--c-teal);
  border-radius: 44px;
  pointer-events: none;
  transition: border-color var(--dur-hover) var(--ease-std);
}
.btn-dark__border--white { border-color: var(--c-white); }
.btn-dark__fill {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 100%;
  height: 20px;
  border-radius: 20px;
  background-color: var(--c-black);
  pointer-events: none;
  transition: top var(--dur-hover) var(--ease-std), height var(--dur-hover) var(--ease-std), background-color var(--dur-hover) var(--ease-std);
}
.btn-dark:hover .btn-dark__fill, .btn-dark:focus-visible .btn-dark__fill {
  top: -20px;
  height: calc(100% + 40px);
  background-color: var(--c-white);
}
.btn-dark:hover .btn-dark__text, .btn-dark:focus-visible .btn-dark__text,
.btn-dark:hover .icon-arrow, .btn-dark:focus-visible .icon-arrow { color: var(--c-navy-950); }
.btn-dark:not(.btn-dark--submit):hover .icon-arrow,
.btn-dark:not(.btn-dark--submit):focus-visible .icon-arrow { transform: rotate(45deg); }
/* Link buttons only: the teal border turns green (submit borders stay white) */
.btn-dark:not(.btn-dark--submit):hover .btn-dark__border,
.btn-dark:not(.btn-dark--submit):focus-visible .btn-dark__border { border-color: var(--c-green); }

/* 6.4 Teal button reused inside the mobile menu and elsewhere: see .btn-contact */

/* 6.5 Member / instructor card (vertical gradient frame, photo, italic name/role) */
.member-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 10px;
  border-radius: 16px;
  background: var(--grad-card);
  overflow: hidden;
}
.member-card__photo {
  position: relative;
  flex: none;                    /* original "Image" is flex: none: a fixed-height card never squeezes it */
  width: 100%;
  height: 390px;
  background-color: var(--c-white);
  overflow: hidden;
}
.member-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* override per card with style="object-position: ..." */
}
.member-card__body {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 25px;
  text-align: center;
}
/* Name and role keep their spaces like the original (pre-wrap at desktop and
   tablet), so the space before a <br> still takes room in the centred line.
   Phone: the original's default is a single unwrapped line (pre, width auto);
   cards whose original text wraps on phone opt back in on their page. */
.member-card__name,
.member-card__role {
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  letter-spacing: 0;
  color: var(--c-white);
}
.member-card__name { font: italic 500 20px/28px var(--font-sans); }
.member-card__role { font: italic 400 14px/20px var(--font-sans); }
@media (max-width: 809.98px) {
  .member-card__name, .member-card__role { width: auto; white-space: pre; }
}

/* 6.6 Form fields (footer newsletter, contact and course forms).
   The box is the label/wrapper; the 1px border is drawn inside it.
   The input itself is only as tall as the wrapper's content box, exactly
   like the original (descenders of the placeholder get clipped). */
.field {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 22px 28px;
  border-radius: 10px;
  background: transparent;
  overflow: hidden;
}
.field::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--field-border, var(--c-white));
  border-radius: inherit;
  pointer-events: none;
}
.field:focus-within::after { border-color: var(--c-focus); }
.field__input {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: 400 16px/24px var(--font-sans);
  letter-spacing: 0;
  color: var(--c-white);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
}
.field__input::placeholder { color: var(--c-grey-999); opacity: 1; }
.field--textarea { height: auto; padding: 0; align-items: stretch; }
.field--textarea .field__input {
  width: 100%;
  height: auto;
  padding: 22px 28px;
  white-space: break-spaces;
  resize: vertical;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  overflow: hidden;
}
.site-footer__newsletter,
.site-footer__bottom {
  width: 100%;
  max-width: var(--page-max);
  padding: 60px var(--gutter) 90px;
}
.site-footer__newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.site-footer__heading {
  font: 500 20px/1.2em var(--font-sans);
  color: var(--c-white);
  text-align: left;
  white-space: pre;
}
.newsletter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  padding-top: 28px;
}
.newsletter__fields {
  display: flex;
  gap: 24px;
  width: 100%;
}
.newsletter__fields .field { flex: 1 0 0px; width: 1px; }
.newsletter__submit { width: 25%; }
.newsletter__submit .btn-dark__inner { padding: 14px 24px; }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 24%;
}
.site-footer__col--left { align-items: flex-start; }
.site-footer__col--right { align-items: flex-end; }

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.footer-links--right { align-items: flex-end; }
.footer-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 1px;
  overflow: hidden;
  font: 500 20px/1.2em var(--font-sans);
  color: var(--c-white);
  white-space: pre;
}
.footer-link__icon { flex: none; width: 16px; height: 16px; }
.footer-link::after {            /* underline grows from the left (right column: from the right) */
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -1px;
  width: 1px;
  height: 1px;
  background: var(--c-white);
  transition: width var(--spring-underline-dur) var(--spring-underline);
}
.footer-links--right .footer-link::after { left: auto; right: -1px; }
.footer-link:hover::after, .footer-link:focus-visible::after { width: 100%; }

.site-footer__copy {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.site-footer__copy img { flex: none; width: 20px; height: 20px; object-fit: contain; }
.site-footer__copy p,
.site-footer__note {
  font: 500 14px/20px var(--font-sans);
  color: var(--c-grey-666);
}
.site-footer__copy p { flex: none; width: 285px; text-align: left; }
.site-footer__note { width: 100%; text-align: right; white-space: pre; }

.site-footer__cta {
  flex: 1 0 0px;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  overflow: hidden;
}
.site-footer__tagline {
  width: 635px;
  max-width: 100%;
  font: 500 20px/1.2em var(--font-sans);
  color: var(--c-grey-999);
  text-align: center;
}
.site-footer__reach {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.site-footer__reach-label {
  font: 500 20px/1.2em var(--font-sans);
  color: var(--c-grey-666);
  white-space: pre;
}
.footer-email {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  font: 700 40px/52px var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--c-white);
  text-align: left;
  white-space: pre;
}
.footer-email::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -1px;
  width: 1px;
  height: 2px;
  background: var(--c-white);
  transition: width var(--dur-underline) var(--ease-out);
}
/* The original CSS defines a hover state that grows this underline to 100%,
   but the live site showed no change on hover, so it is not enabled here. */

@media (min-width: 810px) and (max-width: 1439.98px) {
  .site-footer__newsletter,
  .site-footer__bottom { flex-wrap: wrap; padding: 50px 72px 60px; }
  .newsletter__submit { width: 35%; }
  .site-footer__cta { flex: none; order: 0; width: 100%; padding-bottom: 50px; }
  .site-footer__col--left { order: 1; width: 50%; }
  .site-footer__col--right { order: 2; width: 50%; }
}
@media (max-width: 809.98px) {
  .site-footer { padding-top: 40px; }
  .site-footer__newsletter,
  .site-footer__bottom { flex-wrap: wrap; padding: 0 20px 50px; }
  .newsletter__fields { flex-direction: column; }
  .newsletter__fields .field { flex: none; width: 100%; }
  .newsletter__submit { width: 100%; }
  .site-footer__cta { flex: none; order: 0; width: 100%; gap: 40px; padding: 50px 0 80px; }
  .site-footer__tagline { width: 100%; }
  /* The original's phone footer shows only the newsletter and the tagline */
  .site-footer__col, .site-footer__reach { display: none; }
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}