:root {
  --ink: #080808;
  --bone: #f1ede6;
  --acid: #c8101e;
  --orange: #8f0711;
  --muted: #aaa39f;
  --line: rgba(241, 237, 230, 0.2);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.5;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 12px 16px;
  background: var(--acid);
  color: var(--ink);
  font: 700 12px "DM Mono", monospace;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 4px;
}
.skip-link:focus-visible {
  outline-color: var(--orange);
}
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.site-header {
  height: 108px;
  padding: 0 clamp(18px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
  background: var(--ink);
}
.brand {
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font:
    700 14px/11px "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.08em;
}
.brand b {
  font-size: 21px;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--acid);
  color: var(--acid);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.1em;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  mix-blend-mode: normal;
}
.site-header .brand-mark {
  width: 216px;
  height: 216px;
  border: 0;
  background: var(--ink);
  position: absolute;
  top: 48px;
  left: clamp(18px, 4vw, 64px);
  z-index: 2;
}
.site-header .brand > span:last-child {
  display: none;
}
.site-header nav {
  display: flex;
  gap: 28px;
}
.site-header nav a,
.header-cta {
  color: var(--bone);
  text-decoration: none;
  font:
    500 12px "DM Mono",
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-header nav a:hover,
.text-link:hover {
  color: var(--acid);
}
.header-cta {
  padding: 11px 14px;
  background: var(--acid);
  color: var(--ink);
}
.header-cta span {
  font-size: 16px;
}
.menu-toggle {
  display: none;
}
.hero {
  min-height: calc(100vh - 108px);
  padding-left: clamp(18px, 8vw, 130px);
  display: grid;
  grid-template-columns: 1.03fr 0.97fr;
  overflow: hidden;
}
.hero-copy {
  padding: clamp(70px, 13vw, 180px) 30px 70px 0;
  position: relative;
  z-index: 1;
}
.kicker {
  font:
    500 11px "DM Mono",
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--acid);
  margin: 0 0 28px;
}
.kicker span {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 8px;
}
.kicker.dark {
  color: #780b12;
}
h1,
h2,
h3 {
  font-family: "Barlow Condensed", Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.82;
  margin: 0;
}
h1 {
  font-size: clamp(85px, 12.6vw, 190px);
  font-weight: 900;
}
h1 em,
h2 em {
  font-style: italic;
  color: var(--acid);
}
.edge-crest {
  display: none;
}
.hero-shark-logo {
  display: none;
}
.hero-lede {
  max-width: 450px;
  color: #b8b8b1;
  font-size: clamp(15px, 1.25vw, 19px);
  margin: 34px 0;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.button {
  border: 0;
  cursor: pointer;
  text-decoration: none;
  padding: 15px 18px;
  font:
    800 18px "Barlow Condensed",
    sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.button-hot {
  background: var(--acid);
  color: var(--ink);
}
.button-hot:hover {
  background: var(--orange);
  color: white;
}
.button span {
  font-size: 25px;
}
.text-link {
  font:
    500 12px "DM Mono",
    monospace;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
  letter-spacing: 0.08em;
}
.text-link span {
  font-size: 19px;
  margin-left: 8px;
}
.hero-media {
  min-height: 580px;
  position: relative;
  overflow: hidden;
  background: #272824;
}
.hero-media:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #08080877, transparent 30%),
    linear-gradient(0deg, #08080855, transparent 40%);
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2);
}
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 clamp(18px, 8vw, 130px);
  background: var(--acid);
  color: var(--ink);
}
.proof-strip div {
  padding: 28px 20px;
  border-left: 1px solid #8f0711;
}
.proof-strip div:first-child {
  border: 0;
  padding-left: 0;
}
.proof-strip b {
  display: block;
  font:
    900 clamp(51.25px, 5.625vw, 82.5px)/0.8 "Barlow Condensed",
    sans-serif;
}
.proof-strip sup {
  font-size: 0.4em;
}
.proof-strip span {
  display: block;
  font-size: 13.75px;
  max-width: 130px;
  margin-top: 9px;
}
.section-dark {
  padding: clamp(76px, 12vw, 170px) clamp(18px, 8vw, 130px);
  position: relative;
}
.section-number {
  font:
    500 10px "DM Mono",
    monospace;
  color: var(--muted);
  letter-spacing: 0.15em;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  margin-top: 70px;
}
.intro h2,
.program-head h2,
.coach-copy h2,
.schedule-head h2,
.contact-section h2 {
  font-size: clamp(63px, 8.2vw, 130px);
}
.intro-grid > div {
  padding-top: 11px;
}
.lead {
  font-size: 23px !important;
  color: var(--bone) !important;
}
.intro-grid p {
  color: var(--muted);
  margin: 0 0 23px;
}
.program-section {
  background: var(--bone);
  color: var(--ink);
  padding: clamp(75px, 10vw, 140px) clamp(18px, 8vw, 130px);
}
.program-head {
  display: flex;
  justify-content: space-between;
  gap: 35px;
  align-items: flex-end;
  margin-bottom: 54px;
}
.program-head > p {
  max-width: 330px;
  margin: 0;
  color: #54554d;
}
.program-head h2 em,
.schedule-head h2 em {
  color: var(--acid);
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.program-card {
  min-height: 445px;
  position: relative;
  overflow: hidden;
  background: #21221e;
}
.program-card.feature {
  grid-row: span 2;
  min-height: 904px;
}
.program-card.wide-card {
  grid-column: span 2;
  min-height: 400px;
}
.program-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition:
    transform 0.5s,
    filter 0.5s;
}
.program-card.wide-card img {
  /* Day Classes: centre the wide group portrait on the people, not the mat. */
  object-position: center 35%;
  transform: scale(1.05);
  transform-origin: center 35%;
}
.program-card.wide-card:hover img {
  transform: scale(1.09);
}
.program-card:nth-child(2) img {
  object-position: center bottom;
  transform: scale(1.18);
  transform-origin: center bottom;
}
.program-card:nth-child(2):hover img {
  transform: scale(1.22);
}
.program-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #111 2%, transparent 70%);
}
.program-card:hover img {
  transform: scale(1.04);
  filter: grayscale(0.2);
}
.program-content {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  padding: 28px;
  color: var(--bone);
}
.program-content small {
  font:
    700 12px "DM Mono",
    monospace;
  letter-spacing: 0.1em;
  color: var(--acid);
}
.program-content h3 {
  font-size: clamp(52px, 5vw, 75px);
  margin: 10px 0;
}
.program-content p {
  font-size: 13px;
  max-width: 310px;
  margin: 0 0 17px;
}
.program-content a {
  color: var(--acid);
  font:
    500 12px "DM Mono",
    monospace;
  text-decoration: none;
}
.program-content a span {
  font-size: 20px;
  margin-left: 10px;
}
.day-program-desktop,
.hero-daytime-callout {
  display: none;
}
.coach-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.coach-image {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  background: #35352f;
}
.coach-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.02);
  transform-origin: center bottom;
  filter: grayscale(1);
}
.coach-image span,
.coach-image .professor-portrait-link {
  position: absolute;
  bottom: 24px;
  left: 24px;
  color: #fff;
  font:
    800 40px/0.8 "Barlow Condensed",
    sans-serif;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.coach-copy {
  padding: clamp(55px, 7vw, 95px) clamp(25px, 6vw, 95px);
  background: #171815;
}
/* Desktop: an intentional editorial composition for the Professor section. */
@media (min-width: 1100px) {
  .coach-section {
    grid-template-columns: 45% 55%;
    align-items: stretch;
    min-height: 640px;
  }
  .coach-image {
    min-height: 640px;
    display: block;
    background: #22231f;
  }
  .coach-image img {
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: center 42%;
  }
  .coach-image span,
.coach-image .professor-portrait-link {
    left: 30px;
    /* Third desktop lift: 39.675px × 1.20 = 47.61px. */
    bottom: 47.61px;
  }
  .coach-copy {
    padding: clamp(60px, 7vw, 110px) clamp(44px, 5vw, 86px);
    min-height: 640px;
    display: grid;
    place-content: center start;
    justify-items: start;
    text-align: left;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .coach-watermark {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    /* Professor-page logo #2: 2× its prior desktop size. */
    width: min(172%, 1232px);
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.15;
    mix-blend-mode: screen;
  }
  .coach-copy > :not(.coach-watermark) {
    position: relative;
    z-index: 1;
  }
  .coach-copy h2 {
    font-size: clamp(56px, 5vw, 82px);
  }
  .coach-copy blockquote {
    font-size: clamp(24px, 2.5vw, 36px);
    margin: 34px 0 18px;
  }
  .coach-copy .rank {
    font-size: 10px;
  }
  .coach-content > p:not(.kicker):not(.rank) {
    font-size: 16.1px;
    max-width: 410px;
  }
  .coach-copy .belt {
    width: min(210px, 100%);
  }
}
.coach-copy .belt {
  width: 210px;
  height: 13px;
  background: #111;
  margin: 37px 0 12px;
  position: relative;
}
.belt:before {
  content: "";
  position: absolute;
  inset: 0 0 0 74.6875%;
  background: var(--acid);
}
.belt i {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 4px;
  height: 100%;
  background: #fff;
}
.belt i:nth-of-type(1) {
  left: 74.6875%;
  width: 5px;
}
.belt i:nth-of-type(2) { left: calc(87.34375% - 10px); }
.belt i:nth-of-type(3) { left: calc(87.34375% - 2px); }
.belt i:nth-of-type(4) { left: calc(87.34375% + 6px); }
.belt i:nth-of-type(5) {
  right: 0;
  left: auto;
  width: 5px;
}
.rank {
  font:
    500 12.5px "DM Mono",
    monospace;
  letter-spacing: 0.09em;
  color: var(--muted);
}
blockquote {
  font:
    800 clamp(26px, 3vw, 42px)/0.93 "Barlow Condensed",
    sans-serif;
  text-transform: uppercase;
  margin: 50px 0 25px;
}
blockquote cite {
  display: block;
  color: var(--acid);
  font:
    500 11px "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  margin-top: 14px;
}
.coach-content > p:not(.kicker):not(.rank) {
  color: var(--muted);
  max-width: 450px;
}
.professor-bio {
  /* 16px browser default × 1.15: enlarge the Professor bio text box by 15%. */
  font-size: 18.4px;
}
.schedule-section {
  background: var(--acid);
  color: var(--bone);
  padding: clamp(75px, 10vw, 130px) clamp(18px, 8vw, 130px);
}
.schedule-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: end;
}
.schedule-grid {
  margin-top: 50px;
  border-top: 2px solid var(--bone);
}
.day {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: 22px;
  border-bottom: 1px solid #850b14;
  padding: 20px 0;
  align-items: center;
}
.day b {
  font:
    900 42px/0.8 "Barlow Condensed",
    sans-serif;
}
.day span {
  font-size: 13px;
}
.day span:last-child {
  color: #f2bbb9;
}
.schedule-label {
  display: block;
  margin-bottom: 4px;
  font: 800 10px/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.13em;
}
.schedule-session {
  display: block;
  font: inherit;
  font-weight: 600;
}
.schedule-session + .schedule-session {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(242, 187, 185, 0.28);
}
.schedule-session .schedule-time,
.schedule-session .schedule-title {
  display: inline;
  font: inherit;
  color: inherit;
}
.schedule-session .schedule-title + .schedule-time::before {
  content: " ";
}
.day-slot .schedule-label { color: var(--red); }
.evening-slot .schedule-label { color: #f2bbb9; }
.day-multi {
  grid-template-columns: 120px 1fr;
}
.day-single {
  grid-template-columns: 120px 1fr;
}
.schedule-classes {
  display: block;
  min-width: 0;
}
.schedule-classes span {
  white-space: nowrap;
}
.schedule-classes span:last-child {
  color: var(--bone);
}
.schedule-class {
  display: block;
  margin-bottom: 16px;
}
.schedule-class span {
  display: block;
}
.schedule-class .schedule-title {
  color: #f2bbb9;
}
.schedule-note {
  font:
    500 11px "DM Mono",
    monospace;
  max-width: 550px;
  margin: 28px 0 0;
  color: #f2bbb9;
}
.contact-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 9vw, 150px);
  padding: clamp(80px, 12vw, 165px) clamp(18px, 8vw, 130px);
  background: #171815;
}
.contact-section > div > p:not(.kicker) {
  color: var(--muted);
  max-width: 440px;
  font-size: 17px;
  margin: 30px 0;
}
.contact-steps {
  display: grid;
  gap: 9px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  color: #c6c6be;
  font-size: 13px;
}
.contact-steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.contact-steps b {
  color: var(--acid);
  font: 500 10px "DM Mono", monospace;
  letter-spacing: 0.1em;
}
.contact-details {
  display: grid;
  gap: 10px;
}
.contact-details a {
  color: var(--bone);
  font:
    500 12px "DM Mono",
    monospace;
  text-decoration: none;
}
.contact-details a:hover {
  color: var(--acid);
}
.lead-form {
  display: grid;
  gap: 18px;
  padding: 28px;
  background: #242520;
  color-scheme: dark;
}
.lead-form label {
  display: grid;
  gap: 7px;
  color: #adada6;
  font:
    500 10px "DM Mono",
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  border: 0;
  border-bottom: 1px solid #53544e;
  background: transparent;
  padding: 10px 0;
  color: white;
  outline: none;
  font:
    400 15px Manrope,
    sans-serif;
}
.lead-form .program-select {
  color-scheme: dark;
  padding: 6px 0;
  min-height: 155px;
}
.lead-form .program-select option {
  padding: 8px 10px;
}
.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;
}
.lead-form textarea {
  resize: vertical;
  min-height: 85px;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: var(--acid);
}
.form-status {
  font-size: 13px;
  color: var(--acid);
  margin: 0;
  min-height: 19px;
}
.form-help {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 28px clamp(18px, 4vw, 64px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font:
    500 10px "DM Mono",
    monospace;
}
footer .instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--bone);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
}
footer .instagram-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
footer .instagram-link .instagram-dot {
  fill: currentColor;
  stroke: none;
}
footer .brand-mark {
  width: 144px;
  height: 144px;
  border: 0;
}
.footer-logos {
  display: flex;
  align-items: center;
  gap: 18px;
}
.shark-logo {
  /* 122px × 1.15 = 140.3px. */
  width: 140.3px;
  height: 140.3px;
  display: block;
  /* The new source is a true alpha cutout—do not crop its red outer ring. */
  object-fit: contain;
  clip-path: none;
}
@media (max-width: 800px) {
  /* Keep every mobile section within the viewport rather than relying on
     clipped horizontal overflow. */
  .hero-copy,
  .program-section,
  .coach-copy,
  .schedule-section,
  .contact-section,
  .program-card,
  .schedule-slot,
  .lead-form {
    min-width: 0;
    max-width: 100%;
  }
  .site-header {
    height: 82px;
  }
  .site-header .brand-mark {
    /* Mobile first page logo #2: enlarge the prior crest size by 10%. */
    width: 126.72px;
    height: 126.72px;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
  }
  .site-header .brand > span:last-child {
    /* Mobile first page: retain the crest, remove the Windsor BJJ text. */
    display: none;
  }
  .site-header nav {
    display: none;
    position: absolute;
    top: 81px;
    left: 0;
    right: 0;
    background: var(--ink);
    padding: 18px;
    flex-direction: column;
    border-bottom: 1px solid var(--line);
  }
  .site-header nav.open {
    display: flex;
  }
  .header-cta {
    display: none;
  }
  .menu-toggle {
    display: block;
    background: transparent;
    color: var(--bone);
    border: 1px solid var(--line);
    padding: 8px;
    font:
      500 10px "DM Mono",
      monospace;
  }
  .hero {
    min-height: auto;
    padding: 0;
    grid-template-columns: 1fr;
  }
  .hero-copy {
    /* Clear the enlarged 115.2px mobile header crest before the first kicker. */
    padding: 94px 18px 55px;
  }
  .hero-copy h1 {
    /* The desktop scale starts at 85px, which pushes EDGE beyond a 320px
       phone. Keep the statement large while allowing the narrowest phones
       to contain each intentional line. */
    font-size: clamp(56px, 19vw, 85px);
  }
  .hero-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }
  .hero-actions .button {
    width: 100%;
    justify-content: space-between;
  }
  .hero-actions .text-link {
    align-self: flex-start;
  }
  .hero-media {
    /* The portrait keeps its proportions but no longer consumes most of a
       phone screen before the academy highlights begin. */
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .hero-media img {
    /* Preserve the top of Ron's portrait on every phone; any small crop is
       taken from the lower edge rather than the head and academy banner. */
    object-position: center top;
  }
  .proof-strip {
    grid-template-columns: 1fr 1fr;
    padding: 0 18px;
  }
  .proof-strip div:nth-child(3) {
    border-left: 0;
  }
  .proof-strip div {
    padding: 18px 11px;
  }
  .hero .proof-strip div {
    /* Override the shared centred desktop treatment: on a phone, begin the
       number and its label at the top of each red card. */
    justify-content: flex-start;
  }
  .proof-strip span {
    /* The mobile academy-stat labels need the same compact, athletic voice
       as the figures above them instead of the wider body-copy treatment. */
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin-top: 7px;
  }
  .intro-grid,
  .coach-section,
  .contact-section,
  .schedule-head {
    grid-template-columns: 1fr;
  }
  .intro-grid {
    gap: 35px;
    margin-top: 40px;
  }
  .program-head {
    display: grid;
  }
  .program-grid {
    grid-template-columns: 1fr;
  }
  .program-card.feature,
  .program-card {
    /* The source program photos are square. Keep one complete image per
       mobile card instead of enlarging and cropping it into a tall panel. */
    min-height: 0;
    aspect-ratio: 1 / 1;
    grid-row: auto;
  }
  .program-card.wide-card {
    grid-column: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .program-card img,
  .program-card.wide-card img,
  .program-card:nth-child(2) img {
    object-fit: contain;
    object-position: center;
    transform: none;
  }
  .program-content h3,
  .program-content p,
  .program-content small {
    overflow-wrap: anywhere;
  }
  .coach-image {
    /* Phone view: 500px made Professor Ron's portrait dominate the screen.
       A 400px panel still contains the complete portrait with object-fit. */
    min-height: 400px;
    display: grid;
    place-items: center;
  }
  .coach-image img {
    width: 90%;
    height: 90%;
    transform: none;
    object-fit: contain;
    object-position: center top;
  }
  .coach-copy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  /* Keep the Professor portrait label fully visible above the copy panel. */
  .professor-copy {
    margin-top: 0;
  }
  .coach-watermark {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: min(94%, 673px);
    height: auto;
    top: 55%;
    left: 58%;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: 0.15;
    mix-blend-mode: screen;
  }
  .coach-copy > :not(.coach-watermark) {
    position: relative;
    z-index: 1;
  }
  .day {
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: start;
  }
  .day b {
    grid-row: 1 / span 2;
  }
  .day:not(.day-multi) span:last-child {
    grid-column: 2;
    grid-row: 2;
  }
  .day-multi {
    grid-template-columns: 72px 1fr;
  }
  .day-single {
    grid-template-columns: 72px 1fr;
  }
  .schedule-classes {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Mirror the desktop program language in the phone schedule. */
  .schedule-section .day-class-title {
    display: block;
    margin-top: 4px;
    font-size: 0;
  }
  .schedule-section .day-class-title::after {
    content: "ACCELERATED TRAINING PROGRAM · ALL LEVELS";
    display: block;
    color: var(--bone);
    font: 700 10px/1.25 "DM Mono", monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .schedule-section .schedule-grid > .day:nth-child(1) .evening-slot .schedule-time::after,
  .schedule-section .schedule-grid > .day:nth-child(3) .evening-slot .schedule-time::after {
    content: "ACCELERATED TRAINING PROGRAM · ALL LEVELS";
    display: block;
    margin-top: 4px;
    color: var(--bone);
    font: 700 10px/1.25 "DM Mono", monospace;
    letter-spacing: 0.04em;
  }
  .schedule-section .schedule-grid > .day:nth-child(2) .evening-slot .schedule-session + .schedule-session .schedule-title,
  .schedule-section .schedule-grid > .day:nth-child(4) .evening-slot .schedule-session + .schedule-session .schedule-title {
    font-size: 0;
  }
  .schedule-section .schedule-grid > .day:nth-child(2) .evening-slot .schedule-session + .schedule-session .schedule-title::after,
  .schedule-section .schedule-grid > .day:nth-child(4) .evening-slot .schedule-session + .schedule-session .schedule-title::after {
    content: "BEGINNER ADULTS";
    font-size: 13px;
  }
  .saturday-schedule {
    display: grid !important;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  .saturday-schedule > b {
    display: block;
    grid-column: 1;
    grid-row: 1;
    margin-left: 0 !important;
    margin-bottom: 0;
  }
  .saturday-schedule .schedule-classes {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
  }
  .saturday-schedule .schedule-classes span {
    display: block;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .saturday-schedule .schedule-class {
    display: block;
    margin-bottom: 16px;
  }
  .day span:last-child {
    grid-column: 2;
  }
  .contact-section {
    gap: 50px;
  }
  .lead-form input,
  .lead-form select,
  .lead-form textarea {
    width: 100%;
    max-width: 100%;
  }
  footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .footer-logos {
    gap: 12px;
  }
  footer .brand-mark {
    width: 108px;
    height: 108px;
  }
  .shark-logo {
    /* 92px × 1.15 = 105.8px. */
    width: 105.8px;
    height: 105.8px;
  }
}

/* Keep the complete experience usable on narrow phones such as 320px-wide
   devices. These are layout safeguards only; tablet and desktop typography
   retain their established scale. */
@media (max-width: 360px) {
  .site-header .brand-mark {
    width: 112px;
    height: 112px;
  }
  .hero-copy {
    padding: 88px 16px 48px;
  }
  .hero-copy h1 {
    font-size: clamp(54px, 19vw, 68px);
  }
  .kicker {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .intro h2,
  .program-head h2,
  .coach-copy h2,
  .schedule-head h2,
  .contact-section h2 {
    font-size: clamp(52px, 17vw, 63px);
  }
  .program-content {
    padding: 22px;
  }
  .program-content h3 {
    font-size: clamp(42px, 15vw, 52px);
  }
  .day,
  .day-multi,
  .day-single,
  .saturday-schedule {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px;
  }
  .day span {
    font-size: 12px;
  }
  .contact-details a,
  .form-help {
    overflow-wrap: anywhere;
  }
}

/* Ron's desktop request: scale only the Professor Ron composition to 80%. */
@media (min-width: 801px) {
  /* Keep the complete desktop landing view inside the opening viewport. */
  .hero {
    height: calc(100svh - 108px);
    min-height: 0;
    /* Keep the large Shark watermark inside the first page so it cannot
       bleed into the Professor section below. */
    overflow: hidden;
  }
  .hero-copy {
    /* Reserve enough space for the enlarged JJM crest so the Windsor,
       Ontario rule begins entirely below it. */
    padding-top: clamp(260px, 30vh, 340px);
    padding-bottom: clamp(44px, 7vh, 76px);
    /* Keep the complete composition clear of the top header boundary. */
    transform: translateY(10%);
  }
  .hero-media {
    min-height: 0;
  }
  /* Keep the complete three-line hero statement inside its opening panel
     after reserving room for the enlarged crest above the kicker. */
  .hero-copy h1 {
    font-size: clamp(68px, 10vw, 152px);
  }
  /* Lift the complete text block from the Windsor, Ontario kicker downward
     to create clear breathing room above the following red panel. */
  .hero-content {
    transform: translateY(calc(-15% - 96px));
    position: relative;
    z-index: 1;
  }
  .hero-lede {
    margin: clamp(18px, 2vh, 28px) 0;
  }
  .site-header .brand-mark {
    display: none;
  }
  .edge-word {
    position: static;
    display: inline;
  }
  .hero-crests {
    position: absolute;
    /* Push the watermark clearly above and left of the hero copy, with half
       of its width already extending off the left edge. Move it up far enough
       for the original shark crest's Ron Dupuis signature to remain visible
       within the desktop hero panel. */
    /* Centre the crest's embedded Ron Dupuis signature in the clear band
       between the red call-to-action and the red statistics strip. */
    /* Position the desktop watermark 3/8 inch below its original reference (36 CSS pixels). */
    top: -180px;
    right: auto;
    left: -240px;
    transform: translateX(-50%);
    left: auto;
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.8vw, 28px);
    /* Use the Shark crest as a subdued background watermark. */
    opacity: 0.1;
    /* Keep the approved shark crest and Ron Dupuis signature legible over
       the desktop hero controls while remaining a background watermark. */
    z-index: 2;
    pointer-events: none;
  }
  .edge-crest {
    /* Remove logo #2 from the desktop hero; the Shark crest remains. */
    display: none;
    position: static;
    width: clamp(168px, 15vw, 234px);
    height: auto;
    transform: none;
  }
  .hero-shark-logo {
    display: block;
    /* Reduce the current desktop watermark scale by 10%. */
    width: clamp(861.84px, 76.95vw, 1200.42px);
    height: auto;
    object-fit: contain;
  }
  .hero-media img {
    object-position: center top;
  }
  .coach-section {
    /* `zoom: .9` scales from the top edge.  Match the logical panel height
       to that scale so the rendered Professor composition occupies one full
       desktop viewport and its centre lands at the monitor's vertical centre. */
    /* Give the desktop Professor composition an extra 10% of visible height
       so the red schedule panel begins below the viewport. */
    height: 122.223svh;
    min-height: 0;
    /* Pull the desktop Professor panel into the unused tail of the preceding
       section so the portrait and copy begin at the top of the monitor view. */
    margin-top: -5svh;
    /* Enlarge the complete Professor Ron composition from 80% to 90% while
       keeping it within the desktop viewport. */
    zoom: 0.9;
    width: 111.112%;
    /* A true portrait column: preserves Ron's full head-to-feet image without
       asking a tall source photo to fill a wide landscape crop. */
    grid-template-columns: 38% 62%;
  }
  .coach-image,
  .coach-copy {
    min-height: 0;
  }
  /* Keep the Professor portrait inside its own proportional frame. Rendering
     the actual image (rather than a background inside the zoomed panel) keeps
     the clearance above Ron's head intact at every desktop height. */
  .professor-portrait {
    background-image: none;
    background-color: #000;
    display: grid;
    place-items: end center;
  }
  .professor-portrait img {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;
    object-position: center top;
    /* The desktop Professor panel is zoomed to 90%, so 53.333 logical pixels
       produce a rendered half-inch (48px) upward image move. */
    transform: translateY(-80px);
  }
  /* Anchor the Professor Ron Dupuis label at the lower-right portrait corner.
     The panel is zoomed to 90%, so subtract 26.667 logical pixels to move
     its rendered position down exactly 24px (one quarter inch). */
  .professor-portrait .professor-portrait-link {
    left: auto;
    /* Pull the full label clear of the portrait's dark right-edge strip. */
    right: 120px;
    /* The 90% desktop zoom needs 26.667 logical pixels for an additional
       rendered quarter-inch (24px) upward label move. */
    bottom: calc(12.5% + 47.61px);
  }
  .coach-watermark {
    /* Shift the desktop watermark 1¾in left in the rendered layout. The
       enclosing panel is zoomed to 90%, so 186.667 logical pixels yield a
       168px (one-and-three-quarter-inch) visible shift. */
    left: calc(100% - 186.667px);
  }
  .coach-copy {
    padding: clamp(24px, 6vh, 60px) clamp(28px, 4vw, 72px);
    display: grid;
    place-content: center start;
  }
  /* Review adjustment: make every item in the Professor copy composition 15%
     larger, while lifting it slightly so the enlarged group stays balanced. */
  .coach-content {
    transform: translateY(-4%) scale(1.15);
    transform-origin: left center;
  }
  .coach-copy h2 {
    font-size: clamp(38px, 7vh, 72px);
  }
  .coach-copy blockquote {
    font-size: clamp(18px, 3vh, 30px);
    margin: clamp(16px, 3vh, 28px) 0 clamp(8px, 1.5vh, 16px);
  }
  .coach-copy .belt {
    margin: clamp(18px, 3vh, 30px) 0 clamp(6px, 1.5vh, 12px);
  }
  .coach-copy > p:not(.kicker):not(.rank) {
    font-size: clamp(12.65px, 1.84vh, 16.1px);
  }

  /* Keep the full weekly schedule comfortably inside a standard desktop
     monitor view without changing the mobile layout. It remains in its
     natural document flow rather than being vertically viewport-centered. */
  .schedule-section {
    /* Desktop compact schedule: fit the full weekly view in one monitor
       without changing the mobile layout. */
    padding: clamp(28px, 4vh, 44px) clamp(32px, 6vw, 96px);
    /* Cover the preceding panel above the desktop schedule so no prior-page
       strip remains visible at the top of this full-screen view. */
    margin-top: 0;
    min-height: 100svh;
    position: relative;
    z-index: 1;
    box-shadow: 0 -108px 0 var(--acid);
    display: flex;
    flex-direction: column;
  }
  /* Move all desktop schedule copy up one quarter inch (24px) while the
     full-screen red panel stays fixed in place. */
  .schedule-section > * {
    transform: translateY(-24px);
  }
  .schedule-head h2 {
    font-size: clamp(42px, 5vh, 64px);
  }
  .schedule-grid {
    margin-top: 16px;
    border-top: 2px solid var(--bone);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .day {
    grid-template-columns: 116px minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    padding: 9px 12px 9px 0;
    border-bottom-color: rgba(133, 11, 20, 0.8);
  }
  .day:hover {
    background: rgba(0, 0, 0, 0.12);
  }
  .day b {
    letter-spacing: 0.035em;
    color: var(--bone);
  }
  .day > span,
  .day .schedule-classes {
    min-height: 32px;
    padding-left: 12px;
    border-left: 2px solid rgba(242, 187, 185, 0.62);
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1.25;
  }
  .day > .schedule-slot {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .schedule-label {
    margin-bottom: 2px;
    font: 800 9px/1 "Barlow Condensed", sans-serif;
    letter-spacing: 0.13em;
  }
  /* Make class times more readable on the desktop schedule without changing
     the class titles or the mobile view. */
  .schedule-section .schedule-time {
    font-size: 14px;
  }
  /* Desktop-only schedule revision: Noon stands alone in Daytime slots.
     The class label remains available on mobile. */
  .schedule-section .day-class-title {
    display: none;
  }
  .day-slot .schedule-label { color: var(--red); }
  .evening-slot .schedule-label { color: #f2bbb9; }
  .schedule-slot strong {
    display: block;
    font: inherit;
    font-weight: 600;
  }
  .schedule-slot strong + strong {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(242, 187, 185, 0.28);
  }
  .schedule-session + .schedule-session {
    margin-top: 3px;
    padding-top: 3px;
  }
  .schedule-empty {
    border-left-color: transparent !important;
  }
  .day > span:first-of-type {
    color: var(--bone);
    font-weight: 600;
  }
  .day > span:last-child {
    color: #f2bbb9;
  }
  .day-single,
  .day-multi {
    grid-template-columns: 116px minmax(0, 1fr);
  }
  .day .schedule-classes {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .day b {
    font-size: 28px;
  }
  .schedule-class {
    margin-bottom: 5px;
  }
  .schedule-note {
    margin-top: 10px;
    max-width: 720px;
    padding: 8px 12px;
    border-left: 3px solid var(--red);
    background: rgba(0, 0, 0, 0.1);
  }
}

/* Desktop fit guard
   The editorial desktop treatment above was tuned to one tall monitor.  Its
   fixed viewport heights, zoom and negative offsets could place the next
   panel over the current one on laptop and shorter desktop displays.  Keep
   the look, but let each section own the space required by its content. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Keep the academy-highlights panel self-contained at every desktop width.
   Its individual facts can no longer escape the coloured panel when text
   wraps or browser zoom changes. */
.proof-strip {
  min-height: 144px;
  align-items: stretch;
}

.proof-strip div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 801px) {
  html {
    scroll-padding-top: 108px;
  }

  main > section[id] {
    scroll-margin-top: 108px;
  }
  /* Keep the free-class destination aligned to the viewport top. */
  #contact { scroll-margin-top: calc(-108px - clamp(80px, 12vw, 165px)); }

  .hero {
    height: calc(100svh - 108px);
    min-height: 0;
    padding-left: 0;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .hero-copy,
  .hero-media {
    grid-row: 1;
  }

  .hero-copy {
    grid-column: 1;
  }

  .hero-media {
    grid-column: 2;
  }

  .hero .proof-strip {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 110px;
  }

  .hero .proof-strip div {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .hero-copy {
    padding-top: clamp(96px, 13vh, 170px);
    padding-bottom: clamp(20px, 3vh, 36px);
    padding-left: clamp(18px, 8vw, 130px);
    transform: none;
  }

  .hero-content {
    transform: none;
  }

  .hero-copy h1 {
    font-size: clamp(58px, 8vw, 120px);
  }

  /* Keep the “Leverage Over Limits” page self-contained on desktop rather
     than letting the white Programs section appear at its lower edge. */
  .intro.section-dark {
    min-height: max(760px, calc(100svh + 160px));
  }

  .coach-section {
    height: auto;
    min-height: max(720px, calc(100svh - 108px));
    width: 100%;
    margin-top: 0;
    zoom: 1;
    grid-template-columns: minmax(320px, 38%) minmax(0, 62%);
  }

  /* The Professor panel is a complete navigation destination: it fills the
     post-header viewport rather than exposing the weekly schedule below. */
  #professor {
    min-height: calc(100svh - 108px);
  }

  .coach-image,
  .coach-copy {
    min-height: 0;
  }

  .professor-portrait img {
    width: 90%;
    height: 90%;
    transform: none;
  }

  .professor-portrait .professor-portrait-link {
    /* Move the lower-right Professor Ron label exactly 1/2in (48 CSS px)
       inward from each edge on desktop monitors. */
    right: calc(clamp(24px, 4vw, 72px) + 48px);
    bottom: calc(clamp(24px, 4vh, 48px) + 48px);
  }

  .coach-content {
    transform: none;
  }

  .schedule-section {
    /* Keep the red weekly-schedule panel filling a desktop monitor.  It can
       still grow naturally if its content needs more vertical space. */
    min-height: max(640px, 100svh);
    /* Leave enough top clearance for the heading to remain visible even when
       a browser restores the page a little way into this panel. */
    padding: clamp(80px, 10vh, 104px) clamp(32px, 6vw, 96px) 36px;
    margin-top: 0;
    box-shadow: none;
  }

  .schedule-section > * {
    transform: none;
  }

  /* Use the available desktop panel space for a schedule that can be read
     comfortably from across the room. */
  .schedule-head h2 {
    font-size: clamp(50px, 6.4vh, 76px);
  }

  .schedule-grid {
    margin-top: clamp(20px, 3vh, 32px);
  }

  .day {
    gap: clamp(20px, 2vw, 32px);
    padding: clamp(10px, 1.45vh, 16px) 12px clamp(10px, 1.45vh, 16px) 0;
  }

  .day b {
    font-size: clamp(34px, 4.4vh, 46px);
  }

  .day > span,
  .day .schedule-classes {
    min-height: 42px;
    font-size: clamp(13px, 1.2vw, 17px);
    line-height: 1.3;
  }

  .schedule-label {
    margin-bottom: 4px;
    font-size: clamp(10px, 0.9vw, 12px);
  }

  .schedule-section .schedule-time {
    font-size: clamp(15px, 1.25vw, 18px);
  }

  /* Desktop evening schedule: class names match their corresponding times. */
  .schedule-section .evening-slot .schedule-title {
    font-size: clamp(15px, 1.25vw, 18px);
  }

  /* Desktop refresh for the “Your Mat. Your Pace.” programs section.
     Preserve the mobile card stack, while giving desktop a clearer editorial
     header, stronger image contrast and a more deliberate call-to-action. */
  .programs-editorial {
    min-height: 100svh;
    padding: clamp(42px, 6vh, 72px) clamp(44px, 7vw, 128px);
    display: flex;
    flex-direction: column;
  }
  .programs-editorial .program-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: clamp(32px, 6vw, 92px);
    align-items: end;
    margin-bottom: clamp(22px, 3vh, 40px);
    padding-bottom: clamp(18px, 2.5vh, 32px);
    border-bottom: 2px solid var(--ink);
  }
  .programs-editorial .program-head h2 {
    font-size: clamp(58px, 6.5vw, 108px);
    line-height: 0.78;
    letter-spacing: -0.06em;
  }
  .programs-editorial .program-head > p {
    max-width: 440px;
    padding: 0 0 5px clamp(20px, 2vw, 34px);
    border-left: 3px solid var(--acid);
    font-size: clamp(14px, 1.05vw, 17px);
    line-height: 1.35;
  }
  .programs-editorial .program-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.4vw, 24px);
    flex: 1;
    min-height: 0;
  }
  .programs-editorial .program-card {
    min-height: 0;
    outline: 1px solid rgba(17, 18, 15, 0.18);
    outline-offset: -1px;
  }
  .programs-editorial .program-card.feature {
    grid-row: auto;
    min-height: 0;
  }
  .programs-editorial .program-card.wide-card {
    grid-column: auto;
    min-height: 0;
  }
  .programs-editorial .program-card::after {
    background: linear-gradient(0deg, rgba(9, 10, 8, 0.98) 2%, rgba(9, 10, 8, 0.52) 43%, rgba(9, 10, 8, 0.04) 78%);
  }
  .programs-editorial .program-content {
    padding: clamp(20px, 2vw, 34px);
  }
  .programs-editorial .program-content h3 {
    font-size: clamp(38px, 3.25vw, 58px);
    line-height: 0.78;
    letter-spacing: -0.055em;
  }
  .programs-editorial .program-content p {
    max-width: 360px;
    font-size: clamp(12px, 0.9vw, 14px);
    line-height: 1.38;
  }
  .programs-editorial .program-content a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 5px;
    padding-top: 14px;
    border-top: 1px solid rgba(242, 187, 185, 0.55);
    min-width: 112px;
    justify-content: space-between;
  }
  .programs-editorial .program-content a span {
    margin-left: 0;
  }

  /* Desktop conversion path for the Daytime Accelerated Training Program. */
  .day-program-mobile {
    display: none;
  }
  .day-program-desktop {
    display: inline;
  }
  .programs-editorial .wide-card .program-content > small,
  .programs-editorial .wide-card .program-content > p {
    display: none;
  }
  .programs-editorial .wide-card .day-program-pitch {
    display: block;
  }
  .programs-editorial .wide-card .day-program-pitch small {
    display: block;
    white-space: nowrap;
    font-size: clamp(7px, 0.55vw, 9px);
    letter-spacing: 0.03em;
  }
  .hero-daytime-callout {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    color: var(--acid);
    font: 700 clamp(10px, 0.8vw, 12px) "DM Mono", monospace;
    letter-spacing: 0.08em;
  }
  .hero-daytime-callout span {
    color: var(--bone);
  }
  .schedule-section .day-class-title {
    display: block;
    margin-top: 4px;
    color: #f2bbb9;
    font-size: 0;
  }
  .schedule-section .day-class-title::after {
    content: "ACCELERATED TRAINING PROGRAM · ALL LEVELS";
    color: var(--bone);
    font: 900 clamp(11px, 0.95vw, 14px)/1.2 "DM Mono", monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* Monday and Wednesday are the named accelerated evening sessions. */
  .schedule-section .schedule-grid > .day:nth-child(1) .evening-slot .schedule-time::after,
  .schedule-section .schedule-grid > .day:nth-child(3) .evening-slot .schedule-time::after {
    content: " · ACCELERATED TRAINING PROGRAM · ALL LEVELS";
    color: var(--bone);
    font: 900 clamp(11px, 0.95vw, 14px)/1.2 "DM Mono", monospace;
    letter-spacing: 0.06em;
  }
  /* Tuesday and Thursday 7–8 PM are the dedicated beginner adult sessions. */
  .schedule-section .schedule-grid > .day:nth-child(2) .evening-slot .schedule-session + .schedule-session .schedule-title,
  .schedule-section .schedule-grid > .day:nth-child(4) .evening-slot .schedule-session + .schedule-session .schedule-title {
    font-size: 0;
  }
  .schedule-section .schedule-grid > .day:nth-child(2) .evening-slot .schedule-session + .schedule-session .schedule-title::after,
  .schedule-section .schedule-grid > .day:nth-child(4) .evening-slot .schedule-session + .schedule-session .schedule-title::after {
    content: "BEGINNER ADULTS";
    font-size: clamp(15px, 1.25vw, 18px);
  }

  .schedule-note {
    margin-top: 16px;
    font-size: clamp(10px, 0.9vw, 12px);
  }
}

/* A short desktop monitor gets a compact, stacked Professor panel rather
   than clipped or overlapping content. */
@media (min-width: 801px) and (max-height: 760px) {
  .site-header {
    height: 82px;
  }

  html,
  main > section[id] {
    scroll-padding-top: 82px;
    scroll-margin-top: 82px;
  }
  #contact { scroll-margin-top: calc(-82px - clamp(80px, 12vw, 165px)); }

  .hero {
    min-height: calc(100svh - 82px);
  }

  .hero-copy {
    padding-top: clamp(150px, 20vh, 220px);
  }

  .coach-section {
    grid-template-columns: minmax(280px, 36%) minmax(0, 64%);
    min-height: 680px;
  }

  #professor {
    min-height: calc(100svh - 82px);
  }

  .coach-copy {
    padding-block: clamp(28px, 5vh, 48px);
  }

  .coach-copy h2 {
    font-size: clamp(38px, 6vh, 58px);
  }
}