:root {
  font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#192925;
  background:#fff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0
}
a {
  color:inherit
}
header {
  max-width:1200px;
  margin:auto;
  padding:20px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px
}
.brand {
  text-decoration:none;
  font-weight:750;
  font-size:20px;
  display:flex;
  align-items:center;
  gap:12px
}
.brand img {
  width:48px;
  height:48px
}
nav {
  display:flex;
  gap:24px;
  align-items:center
}
nav a {
  text-decoration:none;
  font-size:15px;
  font-weight:600
}
.nav-dojo {
  background:#17382e;
  color:#fff;
  border-radius:6px;
  padding:10px 16px
}
main {
  max-width:1200px;
  margin:auto;
  padding:0 32px
}
.hero {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  align-items:center;
  gap:70px;
  padding:64px 0 80px
}
.eyebrow {
  font-size:13px;
  font-weight:750;
  letter-spacing:.12em;
  color:#bf3f19;
  margin:0 0 16px
}
h1 {
  font-size:clamp(38px,5vw,68px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:0 0 28px
}
h2 {
  font-size:36px;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 20px
}
h3 {
  font-size:25px;
  margin:0
}
p {
  max-width:620px;
  color:#586861
}
.hero p:not(.eyebrow) {
  font-size:18px
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px
}
.button {
  display:inline-block;
  padding:12px 22px;
  background:#d94a20;
  color:white;
  text-decoration:none;
  font-weight:700;
  border-radius:6px
}
.button.secondary {
  background:#fff;
  border:1px solid #b6c5bd;
  color:#1c4436
}
.hero-photo {
  position:relative;
  max-width:390px;
  justify-self:end
}
.hero-photo img {
  width:100%;
  height:430px;
  object-fit:cover;
  object-position:center;
  border-radius:12px
}
.hero-photo span {
  display:block;
  background:#17382e;
  color:white;
  font-size:14px;
  padding:12px 18px;
  margin:0 18px;
  border-radius:5px;
  position:relative;
  margin-top:-30px
}
.section {
  padding:64px 0;
  border-top:1px solid #e2e8e4;
  scroll-margin-top:20px
}
.coaches {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:36px;
  margin-top:36px
}
.coaches article {
  padding:28px;
  border:1px solid #dbe3df;
  border-radius:10px
}
.role {
  font-size:14px;
  color:#bd431e;
  margin:5px 0 20px;
  font-weight:650
}
blockquote {
  margin:0 0 22px;
  color:#53675c
}
ul {
  padding-left:20px;
  margin:0
}
li {
  margin:8px 0
}
.dojo-section {
  background:#17382e;
  color:#fff;
  margin:32px -32px 0;
  padding:44px 32px;
  border-radius:10px
}
.dojo-section .eyebrow {
  color:#ffad81
}
.dojo-section p {
  color:#c0d2c7
}
.trainers {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:28px
}
.trainers a {
  display:block;
  border:1px solid #ffffff38;
  padding:26px;
  border-radius:8px;
  text-decoration:none
}
.trainers a:hover {
  background:#ffffff0b
}
.trainers span {
  font-size:13px;
  color:#ffad81
}
.trainers h3 {
  margin:10px 0
}
.trainers p {
  margin:0;
  font-size:15px
}
.booking {
  margin-top:32px
}
.contact {
  display:flex;
  justify-content:space-between;
  gap:32px
}
address {
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:8px
}
footer {
  max-width:1200px;
  margin:auto;
  padding:24px 32px;
  font-size:14px;
  color:#65756b;
  border-top:1px solid #e2e8e4
}
@media(max-width:760px) {
  header {
    padding:16px 20px;
    flex-wrap:wrap
  }
  nav {
    gap:16px;
    flex-wrap:wrap
  }
  .brand {
    font-size:18px
  }
  main {
    padding:0 20px
  }
  .hero {
    grid-template-columns:1fr;
    gap:32px;
    padding:36px 0
  }
  .hero-photo {
    justify-self:start;
    max-width:100%;
    width:100%
  }
  .hero-photo img {
    height:360px
  }
  .coaches,.trainers {
    grid-template-columns:1fr
  }
  .section {
    padding:40px 0
  }
  h2 {
    font-size:30px
  }
  .dojo-section {
    margin:20px -4px 0;
    padding:28px 20px
  }
  .contact {
    flex-direction:column
  }
  footer {
    padding:20px
  }
}

/* Citrus visual system */
:root {
  --ink:#2b1712;
  --muted:#725047;
  --red:#c73314;
  --orange:#ff5b2e;
  --gold:#ffb21c;
  --cream:#fff7f2;
  --peach:#ffe3d3;
  --line:#f2c6b5;
  color:var(--ink);
  background:var(--cream)
}

body {
  background:linear-gradient(180deg,#fffaf6 0%,var(--cream) 100%)
}

header {
  padding-block:20px;
  border-bottom:1px solid #f6d7ca
}

.brand {
  color:var(--ink);
  font-weight:800;
  letter-spacing:-.025em
}

.brand img {
  width:50px;
  height:50px;
  filter:drop-shadow(0 6px 10px #c7331426)
}

nav a {
  color:#5f3329;
  font-size:14px;
  font-weight:750;
  transition:color .18s ease,transform .18s ease
}

nav a:not(.nav-dojo):hover {
  color:var(--red);
  transform:translateY(-1px)
}

.nav-dojo,
.button {
  background:var(--red);
  border-color:var(--red);
  border-radius:999px;
  box-shadow:0 5px 0 #93220e;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease
}

.nav-dojo:hover,
.button:hover {
  background:#a92610;
  box-shadow:0 2px 0 #7e1b0b;
  transform:translateY(3px)
}

.hero {
  position:relative;
  isolation:isolate;
  grid-template-columns:1.14fr .86fr;
  gap:64px;
  margin:32px 0 20px;
  padding:72px 64px;
  overflow:hidden;
  background:
    radial-gradient(circle at 77% 16%,#ffb21c 0 5%,transparent 5.2%),
    radial-gradient(circle at 88% 76%,#ff5b2e 0 18%,transparent 18.2%),
    linear-gradient(130deg,#fff0e7 0%,#fff9f5 58%,#ffe1cf 100%);
  border:1px solid #ffd1bd;
  border-radius:32px;
  box-shadow:0 24px 55px #c7331412
}

.hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:380px;
  height:380px;
  right:18%;
  bottom:-290px;
  border:34px solid var(--red);
  border-radius:50%;
  opacity:.14
}

.hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:94px;
  height:94px;
  top:28px;
  right:43%;
  border-radius:22px;
  background:linear-gradient(135deg,var(--orange),var(--gold));
  transform:rotate(18deg);
  opacity:.18
}

.eyebrow {
  color:var(--red);
  font-size:12px;
  font-weight:850;
  letter-spacing:.14em
}

h1,
h2,
h3 {
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif
}

h1 {
  max-width:670px;
  font-size:clamp(44px,5.6vw,76px);
  line-height:1.01;
  letter-spacing:-.055em
}

h2 {
  max-width:670px;
  font-size:clamp(34px,4vw,50px);
  line-height:1.08;
  letter-spacing:-.04em
}

h3 {
  font-size:28px;
  line-height:1.14
}

p {
  color:var(--muted)
}

.hero p:not(.eyebrow) {
  font-size:18px;
  line-height:1.75
}

.actions {
  gap:14px
}

.button {
  padding:13px 22px;
  font-weight:800
}

.button.secondary {
  background:#fffaf6;
  border-color:#efb8a4;
  color:var(--red);
  box-shadow:none
}

.button.secondary:hover {
  background:var(--peach);
  box-shadow:none;
  transform:translateY(-1px)
}

.trust-line {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:26px 0 0;
  color:#704238;
  font-size:13px;
  font-weight:750
}

.trust-line span {
  display:flex;
  align-items:center;
  gap:8px
}

.trust-line span:not(:last-child)::after {
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold)
}

.hero-photo {
  max-width:410px;
  width:100%;
  padding:10px;
  background:linear-gradient(145deg,var(--red),var(--orange) 58%,var(--gold));
  border-radius:26px;
  box-shadow:18px 20px 0 #f6c8b5,0 20px 35px #2b17122b;
  transform:rotate(1.2deg)
}

.hero-photo img {
  display:block;
  height:445px;
  border-radius:18px
}

.hero-photo span {
  background:var(--ink);
  font-weight:700;
  padding:11px 15px;
  border-radius:999px;
  margin:0 12px;
  margin-top:-25px
}

.section {
  padding:88px 0;
  border-top:1px solid #f5d8cb
}

.coaches {
  margin-top:38px
}

.coaches .coach-feature {
  display:grid;
  grid-template-columns:minmax(250px,.68fr) minmax(0,1.32fr);
  gap:clamp(30px,5vw,70px);
  align-items:center;
  padding:clamp(24px,4vw,48px);
  overflow:hidden;
  background:#fffdfb;
  border:1px solid #f3c7b7;
  border-radius:28px;
  box-shadow:0 18px 40px #c7331410
}

.coach-portrait {
  position:relative;
  min-height:410px;
  padding:9px;
  background:linear-gradient(145deg,var(--red),var(--orange),var(--gold));
  border-radius:22px;
  box-shadow:10px 12px 0 #ffe0d0
}

.coach-portrait img {
  display:block;
  width:100%;
  height:100%;
  min-height:392px;
  object-fit:cover;
  object-position:center 42%;
  border-radius:15px
}

.coach-portrait span {
  position:absolute;
  right:20px;
  bottom:20px;
  padding:8px 12px;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.coach-details h3 {
  font-size:clamp(34px,4vw,48px)
}

.role {
  color:var(--red);
  margin:8px 0 22px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase
}

blockquote {
  max-width:700px;
  margin:0 0 26px;
  padding:4px 0 4px 22px;
  border-left:4px solid var(--orange);
  color:#5b352c;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  line-height:1.55
}

.coach-details ul {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 26px;
  padding:0;
  list-style:none
}

.coach-details li {
  position:relative;
  padding-left:20px;
  color:#573a32;
  font-size:15px;
  line-height:1.45
}

.coach-details li::before {
  content:"";
  position:absolute;
  top:.55em;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px #fff0e7
}

.community-section {
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(320px,1.12fr);
  align-items:center;
  gap:clamp(30px,5vw,70px)
}

.community-copy h2 {
  max-width:560px
}

.community-copy p:not(.eyebrow) {
  max-width:520px;
  font-size:18px;
  line-height:1.7
}

.community-photo {
  margin:0;
  overflow:hidden;
  background:#fffdfb;
  border:1px solid #f1c6b5;
  border-radius:24px;
  box-shadow:0 16px 36px #c7331412
}

.community-photo img {
  display:block;
  width:100%;
  aspect-ratio:2.15/1;
  object-fit:cover;
  object-position:center 46%
}

.community-photo figcaption {
  padding:12px 16px;
  color:#765148;
  font-size:13px;
  font-weight:750
}

.dojo-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 0%,#ff5b2e 0 10%,transparent 31%),
    linear-gradient(145deg,#35140e,#1f0e0a);
  margin:20px -32px 0;
  padding:68px 64px;
  border:1px solid #71301e;
  border-radius:32px;
  box-shadow:0 24px 50px #2b17122e
}

.dojo-section::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  right:-230px;
  bottom:-250px;
  border:40px solid var(--gold);
  border-radius:50%;
  opacity:.24
}

.dojo-section h2 {
  color:#fff
}

.dojo-section .eyebrow {
  color:var(--gold)
}

.dojo-section p {
  color:#ffe2d2
}

.trainers {
  gap:18px;
  margin-top:34px
}

.trainers a {
  position:relative;
  min-height:205px;
  padding:28px;
  background:#fff8f2;
  border:1px solid #ffb68f;
  border-radius:20px;
  color:var(--ink);
  box-shadow:0 8px 0 #9b2b14;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease
}

.trainers a:hover {
  background:#fff;
  box-shadow:0 3px 0 #9b2b14;
  transform:translateY(5px)
}

.trainers a::after {
  content:"→";
  position:absolute;
  right:24px;
  bottom:17px;
  color:var(--red);
  font-size:28px;
  font-weight:800;
  transition:transform .18s ease
}

.trainers a:hover::after {
  transform:translateX(5px)
}

.trainers span {
  color:var(--red);
  font-weight:850;
  letter-spacing:.12em
}

.trainers h3 {
  margin:12px 0 10px;
  font-size:28px
}

.trainers p {
  color:#694035;
  line-height:1.55
}

.booking {
  margin-top:42px;
  padding:52px;
  background:var(--peach);
  border:1px solid #f0b9a5;
  border-radius:28px
}

.booking p {
  color:#684035
}

.contact {
  align-items:flex-end
}

address {
  min-width:min(100%,360px);
  padding:24px 28px;
  background:#fffdfb;
  border:1px solid #f1c6b5;
  border-radius:20px;
  box-shadow:0 12px 28px #c733140b
}

address a {
  color:var(--red);
  font-weight:750;
  text-decoration-color:#f6af95;
  text-underline-offset:3px
}

address a:hover {
  color:#96220e
}

footer {
  padding:28px 32px;
  color:#78564c;
  border-top:1px solid #f2d3c6
}

a:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:4px;
  border-radius:4px
}

@media(max-width:760px) {
  .hero {
    grid-template-columns:1fr;
    gap:38px;
    margin-top:20px;
    padding:42px 26px;
    border-radius:24px
  }

  h1 {
    font-size:clamp(42px,13vw,60px)
  }

  .hero-photo {
    justify-self:start;
    max-width:100%;
    transform:none
  }

  .hero-photo img {
    height:390px
  }

  .section {
    padding:58px 0
  }

  .coach-feature {
    grid-template-columns:1fr;
    padding:22px;
    border-radius:22px
  }

  .coach-portrait {
    min-height:330px
  }

  .coach-portrait img {
    min-height:312px
  }

  .coach-details ul {
    grid-template-columns:1fr
  }

  .community-section {
    grid-template-columns:1fr;
    gap:28px
  }

  .community-photo {
    border-radius:18px
  }

  .community-photo img {
    aspect-ratio:1.55/1
  }

  blockquote {
    font-size:18px
  }

  .dojo-section {
    margin:20px -4px 0;
    padding:42px 24px;
    border-radius:24px
  }

  .booking {
    padding:32px 24px;
    border-radius:22px
  }

  .contact {
    align-items:stretch
  }
}

@media(max-width:440px) {
  .trust-line {
    flex-direction:column;
    gap:5px
  }

  .trust-line span:not(:last-child)::after {
    display:none
  }

  .hero-photo img {
    height:340px
  }
}