:root{
  --navy:#123858;
  --navy-dark:#0d2d49;
  --teal:#2f7f86;
  --sea:#76b7bb;
  --ink:#203142;
  --muted:#526475;
  --gold:#b78430;
  --shadow:0 14px 34px rgba(13,45,73,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:Georgia, "Times New Roman", serif;}
body.homepage, body.training-page{
  background:
    linear-gradient(rgba(248,251,251,.78), rgba(247,245,239,.82)),
    url('soft-bg.jpg') center top / cover fixed no-repeat;
}
body.trainer-page{
  background:
    radial-gradient(circle at top left, rgba(118,183,187,.12), transparent 28%),
    linear-gradient(180deg, #f8fbfb 0%, #f7f5ef 100%);
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1180px, calc(100% - 34px)); margin:0 auto}
.sans{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--navy)}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(252,251,248,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(18,56,88,.08)
}
.site-header .inner{
  min-height:80px;
  display:flex;align-items:center;justify-content:space-between;gap:18px
}
.logo{height:58px;width:auto}
.nav{
  display:flex;flex-wrap:wrap;gap:22px;
  color:var(--navy);
  font:700 .96rem/1 "Trebuchet MS", Arial, Helvetica, sans-serif
}
.nav a{opacity:.86}
.nav a:hover{opacity:1}

.section{padding:68px 0}
.section-tight{padding:34px 0}
.section-title{
  text-align:center;
  font-size:clamp(2.1rem, 4vw, 3.4rem);
  line-height:1.08;
  margin-bottom:14px
}
.section-sub{
  text-align:center;
  max-width:820px;
  margin:0 auto;
  color:var(--muted);
  font:400 1.05rem/1.75 "Trebuchet MS", Arial, Helvetica, sans-serif
}

.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;border-radius:12px;
  font:700 1rem/1 "Trebuchet MS", Arial, Helvetica, sans-serif;
  box-shadow:var(--shadow);
  transition:transform .18s ease, opacity .18s ease
}
.btn:hover{transform:translateY(-1px);opacity:.96}
.btn-primary{background:var(--navy);color:#fff}
.btn-secondary{background:var(--teal);color:#fff}
.btn-outline{background:rgba(255,255,255,.94);border:2px solid rgba(18,56,88,.18);color:var(--navy)}
.btn-gold{background:linear-gradient(180deg, #c8943f, #a56f16);color:#fff}

.card{
  background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.92);
  border-radius:28px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(5px)
}
.photo-frame{
  background:#fff;border-radius:24px;
  border:1px solid rgba(18,56,88,.08);
  padding:10px;box-shadow:var(--shadow)
}
.photo-frame img{width:100%;border-radius:16px}

.wave-divider{
  position:relative;height:40px;overflow:hidden
}
.wave-divider::before,.wave-divider::after{
  content:"";position:absolute;left:-3%;right:-3%
}
.wave-divider::before{
  top:8px;height:44px;
  background:radial-gradient(55px 18px at 30px 10px, transparent 17px, rgba(118,183,187,.92) 18px, rgba(118,183,187,.92) 21px, transparent 22px) repeat-x;
  background-size:110px 36px
}
.wave-divider::after{
  top:18px;height:36px;
  background:radial-gradient(70px 16px at 55px 8px, transparent 15px, rgba(18,56,88,.18) 16px, rgba(18,56,88,.18) 18px, transparent 19px) repeat-x;
  background-size:120px 32px
}

.banner-top{padding:28px 0 8px}
.banner-frame{
  overflow:hidden;border-radius:28px;box-shadow:var(--shadow);
  border:1px solid rgba(18,56,88,.08);background:#fff
}
.banner-frame img{width:100%;height:auto}

.two-col{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:center
}
.copy h2{
  font-size:clamp(2.1rem, 3.8vw, 3.3rem);
  line-height:1.06;margin-bottom:16px
}
.copy p{
  color:#465868;
  font:400 1.06rem/1.78 "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin-bottom:16px
}
.circle-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:20px
}
.circle-card{text-align:center}
.circle-wrap{
  width:190px;aspect-ratio:1;padding:6px;margin:0 auto 12px;
  border-radius:50%;background:#fff;
  border:1px solid rgba(18,56,88,.08);box-shadow:var(--shadow)
}
.circle-wrap img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.circle-card h3{font-size:1.22rem;line-height:1.18}

.icon-bullets{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px
}
.icon-bullet{
  text-align:center;color:var(--navy);
  font:700 1rem/1.34 "Trebuchet MS", Arial, Helvetica, sans-serif
}
.icon-bullet .icon{
  display:block;color:var(--teal);font-size:1.5rem;margin-bottom:8px
}

.exercise-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:32px;align-items:start
}
.thumb-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px
}
.thumb-grid img{
  width:100%;height:150px;object-fit:cover;border-radius:12px
}

.check-list{
  list-style:none;padding:0;margin:18px 0 0;
  display:grid;gap:12px;color:#425465;
  font:400 1.03rem/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif
}
.check-list li::before{
  content:"✓";color:var(--teal);font-weight:700;margin-right:10px
}

.training-highlight{margin-top:32px;padding:28px}
.training-highlight-grid{
  display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:center
}
.training-highlight img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  padding:6px;background:#fff;box-shadow:var(--shadow)
}
.training-highlight h3{font-size:2rem;margin-bottom:10px}
.training-highlight p{
  color:#465868;
  font:400 1.04rem/1.72 "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin-bottom:12px
}

.webcam-callout{
  margin-top:18px;padding:18px 20px;
  border-left:6px solid var(--teal);
  background:rgba(255,255,255,.7);
  border-radius:18px
}
.webcam-callout h4{font-size:1.2rem;margin-bottom:8px}
.webcam-callout p{
  color:#465868;
  font:400 1rem/1.65 "Trebuchet MS", Arial, Helvetica, sans-serif
}

.contact-section{
  background:linear-gradient(180deg, rgba(18,56,88,.98), rgba(12,42,67,.98));
  color:#fff
}
.contact-section .section-title{color:#fff}
.contact-section .section-sub{color:rgba(255,255,255,.82)}
.contact-card{
  max-width:850px;margin:0 auto;padding:28px;text-align:center
}
.contact-lines{
  display:grid;gap:10px;margin:18px 0 22px;
  font:400 1.05rem/1.65 "Trebuchet MS", Arial, Helvetica, sans-serif
}
.contact-lines a{color:#fff}

.footer{
  padding:24px 0 34px;text-align:center;color:#5b6d7b;
  font:400 .95rem/1.6 "Trebuchet MS", Arial, Helvetica, sans-serif
}

.training-hero{padding:44px 0 12px}
.training-intro{max-width:920px;margin:0 auto;text-align:center}
.training-intro h1{
  font-size:clamp(2.3rem, 4.4vw, 4rem);
  line-height:1.06;margin-bottom:10px
}
.training-intro .tagline{
  font-size:1.55rem;color:var(--navy);font-style:italic;margin-bottom:18px
}
.training-callout{
  padding:24px 28px;max-width:760px;margin:0 auto 24px
}
.training-callout h3{font-size:1.7rem;margin-bottom:10px}
.training-callout p{
  color:#465868;
  font:400 1.05rem/1.72 "Trebuchet MS", Arial, Helvetica, sans-serif;
  margin-bottom:16px
}

.program-list{display:grid;gap:20px}
.program-card{
  display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:center;padding:18px
}
.program-card.reverse{grid-template-columns:1fr 300px}
.program-image{
  width:285px;aspect-ratio:1;margin:auto;padding:7px;background:#fff;
  border-radius:50%;border:1px solid rgba(18,56,88,.08);box-shadow:var(--shadow)
}
.program-image img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.program-card h3{font-size:2rem;margin-bottom:6px}
.program-card .sub{
  color:#5a6a78;font-style:italic;font-size:1.12rem;margin-bottom:14px
}
.program-card ul{
  columns:2;gap:28px;padding-left:18px;margin:0;color:#445667;
  font:400 1rem/1.66 "Trebuchet MS", Arial, Helvetica, sans-serif
}
.program-card li{break-inside:avoid;margin-bottom:6px}

.meet-teaser{margin-top:24px;padding:28px}
.meet-teaser-grid{
  display:grid;grid-template-columns:240px 1fr;gap:26px;align-items:center
}
.meet-teaser img{width:100%;border-radius:18px;box-shadow:var(--shadow)}
.meet-teaser h3{font-size:1.9rem;margin-bottom:10px}

.image-page{padding:36px 0 22px}
.image-frame{
  background:#fff;border-radius:28px;padding:10px;box-shadow:var(--shadow);
  border:1px solid rgba(18,56,88,.08)
}
.image-frame img{width:100%;border-radius:18px}
.simple-actions{
  margin-top:20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center
}

@media (max-width: 1020px){
  .two-col,.exercise-grid,.training-highlight-grid,.program-card,.program-card.reverse,.meet-teaser-grid{
    grid-template-columns:1fr
  }
  .circle-features{grid-template-columns:1fr}
  .icon-bullets{grid-template-columns:repeat(2,1fr)}
  .program-card ul{columns:1}
}
@media (max-width: 720px){
  .container{width:min(1180px, calc(100% - 22px))}
  .site-header .inner{padding:10px 0}
  .logo{height:50px}
  .nav{gap:14px;font-size:.88rem}
  .thumb-grid{grid-template-columns:repeat(2,1fr)}
  .thumb-grid img{height:120px}
  .circle-wrap{width:160px}
  .section{padding:54px 0}
  .section-tight{padding:28px 0}
}