/* ===========================================================
   MIKI COACHING — stylesheet
   Palette:  --black #0a0a0a   --paper #f2f1ec
             --line  #2a2a2a   --line-lt #d8d6cd
             --mid   #6b6b64
   Type: 'Anton' (display) + 'Inter' (body/utility)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --black:#0a0a0a;
  --paper:#f2f1ec;
  --line:#2a2a2a;
  --line-lt:#d8d6cd;
  --mid:#6b6b64;
  --red:#c81d25;
  --max:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--black);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

/* ---------- utility type ---------- */
.eyebrow{
  font-family:'Inter',sans-serif;
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mid);
}

.display{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.92;
}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--black);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =================== HEADER =================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:2px solid var(--black);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:78px;
  padding-top:8px;
  padding-bottom:8px;
  flex-wrap:wrap;
  row-gap:8px;
}
.brand{
  font-family:'Anton',sans-serif;
  font-size:1.5rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
}
.brand .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--red);
  display:inline-block;
}
.brand .loc{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mid);
  border-left:1px solid var(--line-lt);
  padding-left:10px;
  margin-left:2px;
}
nav.main-nav{ display:flex; gap:2px; align-items:center; }
nav.main-nav a{
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:10px 16px;
  border:2px solid transparent;
}
nav.main-nav > a.active{
  border-color:var(--red);
}
nav.main-nav a:hover{ color:var(--mid); }
nav.main-nav a.cta{
  background:var(--black);
  color:var(--paper);
  border-color:var(--black);
}
nav.main-nav a.cta:hover{
  background:var(--paper);
  color:var(--black);
}

.lang-switch{
  display:flex;
  gap:6px;
  align-items:center;
  padding:0 6px;
  flex-shrink:0;
}
.lang-btn{
  width:30px; height:21px;
  min-width:30px;
  border:2px solid var(--black);
  overflow:hidden;
  display:flex;
  opacity:.65;
  transition:opacity .15s ease;
}
.lang-btn.active{ opacity:1; }
.lang-btn:hover{ opacity:1; }
.lang-btn svg{ width:100%; height:100%; display:block; }

/* =================== HERO =================== */
.hero{
  position:relative;
  border-bottom:2px solid var(--black);
  overflow:hidden;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--black) 0px, var(--black) 2px,
      transparent 2px, transparent 46px
    ),
    var(--paper);
}
.hero .wrap{
  padding-top:96px;
  padding-bottom:88px;
  position:relative;
}
.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--black);
  color:var(--paper);
  padding:7px 14px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:28px;
}
.hero h1{
  font-size:clamp(3.4rem, 9vw, 8rem);
  margin:0;
}
.hero h1 span{
  -webkit-text-stroke:2px var(--black);
  color:var(--paper);
}
.hero-sub{
  max-width:520px;
  margin-top:26px;
  font-size:1.05rem;
  color:#3a3a35;
}
.hero-actions{
  margin-top:40px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.btn{
  display:inline-block;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:16px 30px;
  border:2px solid var(--black);
  cursor:pointer;
  background:transparent;
  font-family:inherit;
}
.btn-solid{ background:var(--black); color:var(--paper); }
.btn-solid:hover{ background:var(--paper); color:var(--black); }
.btn-ghost{ background:transparent; color:var(--black); }
.btn-ghost:hover{ background:var(--black); color:var(--paper); }

.hero-stats{
  margin-top:64px;
  display:flex;
  gap:0;
  border-top:2px solid var(--black);
}
.hero-stats div{
  flex:1;
  padding:18px 0 0;
  border-right:1px solid var(--line-lt);
}
.hero-stats div:last-child{ border-right:none; }
.hero-stats strong{
  font-family:'Anton',sans-serif;
  font-size:2.2rem;
  display:block;
}
.hero-stats span{
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mid);
  font-weight:600;
}

/* =================== SECTION SCAFFOLD =================== */
section{ padding:96px 0; border-bottom:2px solid var(--black); }
section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:52px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(2.2rem,5vw,3.4rem);
  margin:8px 0 0;
}
.section-head p{
  max-width:360px;
  color:var(--mid);
  font-size:.95rem;
  margin:0;
}

/* =================== PROGRAM CARDS =================== */
.programs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--black);
  border-left:2px solid var(--black);
}
.program-card{
  display:block;
  border-right:2px solid var(--black);
  border-bottom:2px solid var(--black);
  padding:38px 30px 34px;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.program-card:hover{ background:var(--red); color:var(--paper); border-color:var(--red); }
.program-card:hover .program-tag{ color:var(--paper); border-color:var(--paper); }
.program-tag{
  display:inline-block;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid var(--black);
  padding:4px 10px;
  margin-bottom:24px;
}
.program-card h3{
  font-family:'Anton',sans-serif;
  font-size:1.9rem;
  text-transform:uppercase;
  margin:0 0 14px;
  line-height:1;
}
.program-card p{
  font-size:.92rem;
  margin:0 0 20px;
  color:inherit;
  opacity:.82;
}
.program-list{
  list-style:none;
  padding:0; margin:0;
  font-size:.82rem;
  font-weight:600;
}
.program-list li{
  padding:7px 0;
  border-top:1px solid var(--line-lt);
}
.program-card:hover .program-list li{ border-top-color:#3a3a3a; }
.program-list li:first-child{ border-top:none; }

/* =================== GROUP TRAINING BAND =================== */
.band{
  background:var(--black);
  color:var(--paper);
}
.band-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.band h2{ font-size:clamp(2.2rem,5vw,3.2rem); margin:0 0 20px; }
.band p{ color:#c9c8c1; font-size:1rem; max-width:480px; }
.band-list{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:12px;
}
.band-list li{
  padding-left:26px;
  position:relative;
  font-weight:600;
  font-size:.92rem;
}
.band-list li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:12px; height:2px;
  background:var(--paper);
}
.schedule-card{
  border:2px solid var(--paper);
  padding:30px 28px;
}
.schedule-card .eyebrow{ color:#c9c8c1; }
.schedule-row{
  display:flex; justify-content:space-between;
  padding:14px 0;
  border-top:1px solid #3a3a3a;
  font-size:.9rem;
}
.schedule-row:first-of-type{ border-top:none; margin-top:18px; }
.schedule-row strong{ font-weight:700; }
.schedule-row span{ color:#a9a8a1; }

/* =================== LOCATION =================== */
.location-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.location-card{
  aspect-ratio:4/3;
  border:2px solid var(--black);
  background:
    repeating-linear-gradient(45deg, var(--black) 0 1px, transparent 1px 18px),
    var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.location-card .pin{
  font-family:'Anton',sans-serif;
  background:var(--black);
  color:var(--paper);
  padding:14px 22px;
  font-size:1.1rem;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.location-text h2{ font-size:clamp(2.2rem,5vw,3.2rem); margin:8px 0 20px; }
.location-text p{ color:var(--mid); font-size:1rem; max-width:440px; }

/* =================== COMING SOON (Shop) =================== */
.coming-soon-hero{
  position:relative;
  border-bottom:2px solid var(--black);
  overflow:hidden;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--black) 0px, var(--black) 2px,
      transparent 2px, transparent 46px
    ),
    var(--paper);
  text-align:center;
}
.coming-soon-hero .wrap{
  padding-top:110px;
  padding-bottom:110px;
}
.coming-soon-hero h2{
  font-size:clamp(3rem, 10vw, 7rem);
  margin:0 0 30px;
  color:var(--paper);
  -webkit-text-stroke:2px var(--black);
}
.coming-soon-hero p{
  max-width:480px;
  margin:0 auto 32px;
  color:#3a3a35;
  font-size:1rem;
}

/* =================== CHECKLIST / STEPS (Coaching page) =================== */
.check-list{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.check-list li{
  padding-left:30px;
  position:relative;
  font-weight:600;
  font-size:.95rem;
}
.check-list li::before{
  content:"✓";
  position:absolute;
  left:0; top:-1px;
  width:20px; height:20px;
  border:2px solid var(--red);
  color:var(--red);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:700;
}

.package-card{
  border:2px solid var(--paper);
  padding:34px 30px;
}
.package-price{
  font-family:'Anton',sans-serif;
  font-size:2.6rem;
  margin:26px 0 22px;
  line-height:1;
  color:var(--red);
}
.package-price span{
  font-family:'Inter',sans-serif;
  font-size:.9rem;
  font-weight:600;
  color:#a9a8a1;
  margin-left:8px;
}

.steps-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:0;
}
.steps-list li{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-top:1px solid var(--line-lt);
  align-items:flex-start;
}
.steps-list li:first-child{ border-top:none; }
.steps-list .step-num{
  font-family:'Anton',sans-serif;
  font-size:1.3rem;
  color:var(--mid);
  min-width:28px;
}
.steps-list .step-text{ font-weight:600; font-size:.9rem; padding-top:3px; }

/* =================== RESULTS / TRANSFORMATIONS =================== */
.transform-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--black);
  border-left:2px solid var(--black);
}
.transform-card{
  border-right:2px solid var(--black);
  border-bottom:2px solid var(--black);
  display:flex;
  flex-direction:column;
}
.transform-image{
  aspect-ratio:4/3;
  overflow:hidden;
  border-bottom:2px solid var(--black);
  background:var(--black);
}
.transform-image img{ width:100%; height:100%; object-fit:cover; }
.transform-body{ padding:24px 24px 28px; flex:1; display:flex; flex-direction:column; }
.transform-body h3{
  font-family:'Anton',sans-serif;
  font-size:1.3rem;
  text-transform:uppercase;
  margin:0 0 4px;
  line-height:1.05;
}
.transform-stats{
  display:flex;
  gap:22px;
  margin:4px 0 16px;
}
.transform-stats div strong{
  font-family:'Anton',sans-serif;
  font-size:1.5rem;
  display:block;
  color:var(--red);
}
.transform-stats div span{
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mid);
  font-weight:600;
}
.transform-quote{
  font-size:.9rem;
  font-style:italic;
  color:#3a3a35;
  border-top:1px solid var(--line-lt);
  padding-top:14px;
  margin-top:auto;
}
.transform-empty{
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(-45deg, var(--line-lt) 0px, var(--line-lt) 1px, transparent 1px 18px),
    var(--paper);
}
.transform-empty span{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--mid);
  border:1px dashed var(--mid);
  padding:10px 18px;
}

@media (max-width:880px){
  .transform-grid{ grid-template-columns:1fr; }
}

/* =================== SHOP / PRODUCTS =================== */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:2px solid var(--black);
  border-left:2px solid var(--black);
}
.product-card{
  border-right:2px solid var(--black);
  border-bottom:2px solid var(--black);
  display:flex;
  flex-direction:column;
}
.product-image{
  aspect-ratio:4/3;
  overflow:hidden;
  border-bottom:2px solid var(--black);
  background:var(--black);
}
.product-image img{
  width:100%; height:100%;
  object-fit:cover;
}
.product-body{
  padding:26px 24px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.product-body h3{
  font-family:'Anton',sans-serif;
  font-size:1.4rem;
  text-transform:uppercase;
  margin:0 0 10px;
  line-height:1.05;
}
.product-body p{
  font-size:.88rem;
  color:var(--mid);
  margin:0 0 22px;
  flex:1;
}
.product-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid var(--line-lt);
  padding-top:18px;
}
.product-price{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.btn-sm{
  padding:10px 18px;
  font-size:.72rem;
}
.shop-empty{
  padding:60px 0;
  text-align:center;
  color:var(--mid);
  font-size:.95rem;
}
.secure-note{
  display:block;
  margin-top:10px;
  font-size:.7rem;
  color:var(--mid);
  font-weight:600;
  letter-spacing:.04em;
}

@media (max-width:880px){
  .shop-grid{ grid-template-columns:1fr; }
}

/* =================== MEDIA SLIDER =================== */
.media-section{ padding-bottom:88px; }

.media-slider{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

.slider-viewport{
  position:relative;
  border:2px solid var(--black);
  overflow:hidden;
  aspect-ratio:16/8;
  background:var(--black);
}

.slider-track{
  display:flex;
  height:100%;
  transition:transform .4s ease;
}

.slide{
  position:relative;
  flex:0 0 100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--black);
}

.slide img,.slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.slide-empty{
  background:
    repeating-linear-gradient(
      -45deg,
      #2a2a2a 0px, #2a2a2a 2px,
      transparent 2px, transparent 46px
    ),
    var(--black);
}
.slide-empty-txt{
  color:var(--paper);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:2px solid var(--paper);
  padding:12px 22px;
}

.slide-caption{
  position:absolute;
  left:0; bottom:0;
  background:var(--black);
  color:var(--paper);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:10px 16px;
}

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px; height:46px;
  border:2px solid var(--paper);
  background:rgba(10,10,10,.55);
  color:var(--paper);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.slider-arrow:hover{ background:var(--paper); color:var(--black); }
.slider-arrow.prev{ left:16px; }
.slider-arrow.next{ right:16px; }

.slider-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:22px;
}
.slider-dot{
  width:10px; height:10px;
  border-radius:50%;
  border:2px solid var(--black);
  background:transparent;
  cursor:pointer;
  padding:0;
}
.slider-dot.active{ background:var(--black); }

@media (max-width:700px){
  .slider-viewport{ aspect-ratio:4/5; }
  .slider-arrow{ width:38px; height:38px; font-size:1.3rem; }
}

/* =================== CTA BAND =================== */
.cta-band{
  text-align:center;
  padding:100px 0;
}
.cta-band h2{
  font-size:clamp(2.4rem,7vw,4.6rem);
  margin:0 auto 28px;
  max-width:820px;
}

/* =================== FOOTER =================== */
footer{
  border-top:2px solid var(--black);
  padding:34px 0;
}
.footer-links-only{
  display:flex;
  justify-content:center;
  gap:14px;
}
footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.social-links{
  display:flex;
  gap:10px;
}
.social-btn{
  width:38px; height:38px;
  border:2px solid var(--black);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
}
.social-btn:hover{
  background:var(--red);
  color:var(--paper);
  border-color:var(--red);
}

/* =================== CONTACT PAGE =================== */
.contact-hero{
  border-bottom:2px solid var(--black);
  background:var(--paper);
}
.contact-hero .wrap{ padding:70px 28px 60px; }
.contact-hero h1{ font-size:clamp(2.6rem,7vw,5rem); margin:10px 0 0; }
.contact-hero p{ max-width:480px; color:var(--mid); margin-top:18px; font-size:1rem; }

.contact-layout{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:0;
  border-top:2px solid var(--black);
}
.contact-info{
  padding:60px 40px 60px 0;
  border-right:2px solid var(--black);
}
.contact-info h3{
  font-family:'Anton',sans-serif;
  font-size:1.5rem;
  text-transform:uppercase;
  margin:0 0 18px;
}
.free-consult-badge{
  display:inline-block;
  background:var(--red);
  color:var(--paper);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:8px 14px;
  margin-bottom:22px;
}
.info-link{
  text-decoration:underline;
  text-underline-offset:3px;
}
.info-link:hover{ color:var(--mid); }
.info-row{
  padding:18px 0;
  border-top:1px solid var(--line-lt);
}
.info-row:first-of-type{ border-top:none; }
.info-row .eyebrow{ margin-bottom:6px; }
.info-row div.val{ font-weight:600; font-size:.95rem; }
.info-note{
  margin-top:30px;
  font-size:.82rem;
  color:var(--mid);
  border:1px dashed var(--line-lt);
  padding:16px;
}

.contact-form-wrap{ padding:60px 0 60px 48px; }
form.booking{
  display:grid;
  gap:22px;
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--black);
}
.field label .req{ color:var(--mid); font-weight:400; text-transform:none; letter-spacing:0; }
.field input,.field select,.field textarea{
  font-family:'Inter',sans-serif;
  font-size:.95rem;
  padding:14px 16px;
  border:2px solid var(--black);
  background:var(--paper);
  color:var(--black);
}
.field textarea{ resize:vertical; min-height:110px; }
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.form-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-top:6px;
}
.form-foot p{ font-size:.78rem; color:var(--mid); max-width:280px; margin:0; }
.form-msg{
  margin-top:16px;
  font-size:.85rem;
  font-weight:600;
  display:none;
}
.form-msg.show{ display:block; }
.form-msg.ok{ color:#1a1a1a; }

/* =================== RESPONSIVE =================== */
@media (max-width:880px){
  nav.main-nav{ gap:0; flex-wrap:wrap; justify-content:flex-end; row-gap:6px; }
  nav.main-nav a{ padding:10px 10px; font-size:.74rem; }
  .brand .loc{ display:none; }
  .lang-switch{ padding:0 2px; }
  .lang-btn{ width:26px; height:18px; }
  .programs-grid{ grid-template-columns:1fr; }
  .band-inner,.location-inner{ grid-template-columns:1fr; gap:40px; }
  .hero-stats{ flex-wrap:wrap; }
  .hero-stats div{ flex:1 1 50%; border-right:none; border-top:1px solid var(--line-lt); padding-top:14px; margin-top:10px; }
  .contact-layout{ grid-template-columns:1fr; }
  .contact-info{ border-right:none; border-bottom:2px solid var(--black); padding:40px 0; }
  .contact-form-wrap{ padding:40px 0; }
  .field-row{ grid-template-columns:1fr; }
}