:root {
  --ink: #20231d;
  --paper: #f5f0e5;
  --lime: #d9ff43;
  --orange: #f26a46;
  --line: #bbb7a9;
  --display: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --body: "DM Sans", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
::selection { background: var(--orange); color: var(--ink); }
.wrap { width: min(100% - 80px, 1380px); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 12px 16px; background: var(--lime); font-weight: 700; }
.skip-link:focus { top: 12px; }
.topline { background: var(--ink); color: var(--lime); text-align: center; padding: 7px 12px; font: 700 12px/1.2 var(--body); letter-spacing: .16em; }

.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 900 28px/.9 var(--display); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand-dot, .footer-brand span { color: #c94e30; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; background: var(--ink); color: var(--paper); font-size: 27px; transform: rotate(-8deg); }
.brand-mark span { color: var(--lime); font-size: 10px; position: absolute; right: 3px; top: 3px; }
.site-header nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 48px); }
.site-header nav a { font: 800 16px/1 var(--display); letter-spacing: .045em; text-decoration: none; white-space: nowrap; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-header .nav-status { border: 2px solid var(--ink); padding: 12px 16px; }
.nav-status span { margin-left: 8px; }

.hero { min-height: 670px; display: grid; grid-template-columns: 1.05fr .95fr; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.hero-copy { padding: clamp(48px, 6vw, 100px) 36px 60px 0; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow, .section-number { font: 800 13px/1.2 var(--body); letter-spacing: .12em; }
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow-line { width: 28px; height: 2px; background: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); }
h1 { font-size: clamp(76px, 8.9vw, 150px); line-height: .77; letter-spacing: -.035em; font-weight: 900; margin: 38px 0 0; }
h1 em, h2 em { font-style: normal; color: #c94e30; }
.hero-subtitle { font: 800 clamp(30px, 3.6vw, 56px)/1 var(--display); text-transform: uppercase; margin: 20px 0 24px; }
.hero-description { max-width: 490px; font-size: 17px; line-height: 1.6; margin-bottom: 26px; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 54px; padding: 14px 20px; font: 800 18px/1 var(--display); letter-spacing: .04em; text-decoration: none; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.button:hover { transform: translateY(-4px); }
.button-dark { background: var(--ink); color: var(--lime); }
.button-dark:hover { background: #3e4830; }
.fine-print { max-width: 190px; font-size: 11px; line-height: 1.4; font-weight: 600; }
.hero-art { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 600px; overflow: hidden; background: var(--lime); border-left: 2px solid var(--ink); }
.hero-art::before { content: ""; position: absolute; inset: 15px; border: 2px solid var(--ink); pointer-events: none; }
.art-orbit { position: absolute; border: 2px solid var(--ink); border-radius: 50%; width: 72%; aspect-ratio: 1; }
.art-orbit-two { width: 54%; }
.art-topline, .art-bottomline { position: absolute; z-index: 2; font: 800 14px/1 var(--display); letter-spacing: .14em; }
.art-topline { top: 42px; left: 42px; }
.art-bottomline { bottom: 43px; right: 42px; }
.art-spark { position: absolute; z-index: 2; color: var(--orange); font-size: 80px; line-height: 1; }
.art-spark-one { top: 15%; right: 11%; }
.art-spark-two { bottom: 17%; left: 9%; font-size: 44px; }
.dumbbell { position: relative; z-index: 1; width: min(100%, 570px); filter: drop-shadow(18px 22px 0 rgba(32,35,29,.14)); transform: rotate(-4deg); }
.art-seal { position: absolute; z-index: 3; bottom: 12%; right: 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 142px; height: 142px; text-align: center; background: var(--orange); border: 2px solid var(--ink); border-radius: 50%; transform: rotate(13deg); box-shadow: 7px 7px 0 var(--ink); }
.art-seal span { font: 900 47px/.85 var(--display); }
.art-seal small { font: 800 13px/1.05 var(--display); letter-spacing: .04em; margin-top: 8px; }

.ticker { overflow: hidden; background: var(--ink); color: var(--paper); border-bottom: 2px solid var(--ink); }
.ticker-inner { width: max-content; padding: 13px 0; font: 800 23px/1 var(--display); letter-spacing: .08em; word-spacing: .12em; animation: crawl 35s linear infinite; }
.ticker-inner span { color: var(--lime); margin: 0 18px; }
@keyframes crawl { to { transform: translateX(-50%); } }
.section-pad { padding-block: clamp(80px, 9vw, 140px); }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 9vw, 150px); }
.section-heading h2, .status h2 { font-size: clamp(65px, 7.5vw, 116px); line-height: .85; letter-spacing: -.025em; font-weight: 900; margin: 30px 0 0; }
.about-content { padding-top: 42px; }
.lead { font: 700 clamp(22px, 2.25vw, 32px)/1.3 var(--body); letter-spacing: -.035em; margin-bottom: 40px; }
.principle { display: grid; grid-template-columns: 54px 1fr; gap: 20px; border-top: 1px solid var(--line); padding: 22px 0; }
.principle:last-child { border-bottom: 1px solid var(--line); }
.principle-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%; font: 800 29px/1 var(--display); }
.principle h3 { font-size: 25px; line-height: 1; margin: 0 0 7px; }
.principle p { max-width: 360px; font-size: 14px; line-height: 1.55; margin: 0; }

.coach { background: var(--orange); border-block: 2px solid var(--ink); }
.coach-inner { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 630px; }
.coach-graphic { position: relative; display: flex; align-items: center; justify-content: center; min-height: 630px; overflow: hidden; border-right: 2px solid var(--ink); }
.coach-graphic::before, .coach-graphic::after { content: ""; position: absolute; width: 71%; aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; }
.coach-graphic::after { width: 88%; border-style: dashed; }
.coach-monogram { position: relative; z-index: 1; font: 900 clamp(230px, 32vw, 500px)/.7 var(--display); letter-spacing: -.08em; transform: rotate(-10deg); text-shadow: 10px 10px 0 var(--paper); }
.coach-monogram span { position: absolute; top: -15%; right: -20%; color: var(--lime); font-size: .25em; text-shadow: 4px 4px 0 var(--ink); }
.coach-graphic-label, .coach-graphic-bottom { position: absolute; z-index: 2; font: 800 15px/1 var(--display); letter-spacing: .13em; }
.coach-graphic-label { top: 37px; left: 0; }
.coach-graphic-bottom { bottom: 37px; right: 30px; }
.coach-copy { align-self: center; max-width: 600px; padding: 70px clamp(30px, 6vw, 100px); }
.coach-copy h2 { font-size: clamp(95px, 11vw, 175px); line-height: .75; letter-spacing: -.03em; font-weight: 900; margin: 35px 0 42px; }
.coach-copy h2 em { color: var(--paper); }
.coach-lead { font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.coach-copy > p:not(.coach-lead) { max-width: 430px; font-size: 16px; line-height: 1.65; }
.coach-ai { display: grid; gap: 7px; max-width: 430px; margin-top: 24px; padding: 16px 20px; background: var(--ink); color: var(--paper); transform: rotate(-2deg); }
.coach-ai strong { color: var(--lime); font: 900 32px/1 var(--display); letter-spacing: .03em; }
.coach-ai span { font-size: 12px; line-height: 1.5; font-weight: 600; }
.coach-signoff { display: inline-flex; align-items: center; gap: 22px; border-top: 2px solid var(--ink); margin-top: 24px; padding-top: 16px; font: 800 16px/1 var(--display); letter-spacing: .05em; }
.coach-signoff span { font-size: 26px; }

.status { position: relative; text-align: center; max-width: 900px; }
.status h2 { margin: 26px 0 32px; }
.status > p { max-width: 560px; margin: 0 auto 30px; font-size: 17px; line-height: 1.65; }
.status-star { position: absolute; top: 15%; right: 8%; color: var(--orange); font-size: clamp(60px, 8vw, 110px); line-height: 1; transform: rotate(-15deg); }
.button-outline { border: 2px solid var(--ink); }
.button-outline:hover { background: var(--lime); }
.site-footer { background: var(--ink); color: var(--paper); }
.footer-inner { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 22px; font: 800 13px/1.4 var(--display); letter-spacing: .09em; }
.footer-brand { font-size: 28px; letter-spacing: -.02em; }

@media (max-width: 1050px) {
  .wrap { width: min(100% - 48px, 1380px); }
  .hero { min-height: 0; }
  .hero-copy { padding-top: 60px; }
  h1 { font-size: clamp(72px, 9vw, 110px); }
  .hero-art { min-height: 560px; }
  .art-seal { width: 112px; height: 112px; }
  .art-seal span { font-size: 37px; }
  .about { gap: 48px; }
  .coach-inner, .coach-graphic { min-height: 550px; }
  .coach-copy { padding-inline: 42px; }
}
@media (max-width: 760px) {
  .wrap { width: min(100% - 36px, 1380px); }
  .site-header { min-height: 80px; flex-wrap: wrap; padding-block: 16px; }
  .site-header nav { gap: 18px; width: 100%; justify-content: space-between; }
  .site-header nav a { font-size: 14px; }
  .site-header .nav-status { padding: 9px 10px; }
  .hero, .about, .coach-inner { grid-template-columns: 1fr; }
  .hero-copy { padding: 64px 0 52px; }
  h1 { font-size: clamp(75px, 14vw, 125px); }
  .hero-art { border-left: 0; border-top: 2px solid var(--ink); min-height: 440px; }
  .dumbbell { max-width: 520px; }
  .about { gap: 26px; }
  .about-content { padding-top: 0; }
  .coach-graphic { min-height: 430px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .coach-monogram { font-size: 330px; }
  .coach-graphic-label { left: 20px; }
  .coach-copy { max-width: none; padding: 70px 16px 80px; }
  .coach-copy h2 { font-size: clamp(105px, 19vw, 160px); }
  .footer-inner { flex-wrap: wrap; padding-block: 28px; }
}
@media (max-width: 480px) {
  .topline { font-size: 10px; }
  .brand { font-size: 24px; }
  .brand-mark { width: 34px; height: 34px; }
  .site-header nav { gap: 8px; }
  .site-header nav a { font-size: 12px; }
  .nav-status span { margin-left: 2px; }
  .eyebrow { font-size: 11px; }
  h1 { font-size: clamp(64px, 16vw, 85px); }
  .hero-subtitle { font-size: 32px; }
  .hero-description { font-size: 15px; }
  .hero-art { min-height: 350px; }
  .hero-art::before { inset: 10px; }
  .art-topline { top: 29px; left: 27px; }
  .art-bottomline { bottom: 27px; right: 25px; }
  .art-topline, .art-bottomline { font-size: 10px; }
  .art-spark-one { font-size: 48px; }
  .art-seal { width: 90px; height: 90px; right: 6%; bottom: 12%; box-shadow: 4px 4px 0 var(--ink); }
  .art-seal span { font-size: 29px; }
  .art-seal small { font-size: 9px; margin-top: 4px; }
  .section-heading h2, .status h2 { font-size: clamp(60px, 13vw, 80px); }
  .lead { font-size: 22px; }
  .coach-graphic { min-height: 320px; }
  .coach-monogram { font-size: 250px; }
  .coach-copy h2 { font-size: clamp(95px, 20vw, 125px); }
  .status-star { right: 2%; top: 12%; font-size: 50px; }
  .footer-inner { display: grid; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker-inner { animation: none; }
  .button { transition: none; }
}
