/* ============================================================
   Be in Yoga — design language adapted from theyogabarn.com
   Palette and type lifted from the reference, applied to the
   Mauritius / Le Calbanon context.
   ============================================================ */

:root{
  /* Reference palette (sampled from theyogabarn.com) */
  --terracotta:#b4553f;        /* surfaces, buttons */
  --terracotta-ink:#8f3f2c;    /* text on cream/white — passes AA */
  --terracotta-hover:#c55f42;
  --navy:#041f2d;
  --navy-2:#295d79;
  --cream:#feedda;
  --cream-deep:#f6e2c9;
  --ink:#212121;
  --white:#fff;
  --line:rgba(4,31,45,.14);

  --wrap:1180px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Gill Sans","Gill Sans MT",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--cream);
  color:var(--navy-2);
  font-family:var(--sans);
  font-size:20px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:var(--terracotta);text-decoration:none;}
a:hover{color:var(--terracotta-hover);}

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

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.25;
  color:var(--navy);
  margin:0 0 .6em;
}
h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:1.75px;}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:1.2px;}
h3{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:.6px;}
p{margin:0 0 1.1em;}

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:13px;
  font-weight:600;
  color:var(--terracotta-ink);
  margin:0 0 1em;
}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--terracotta);color:#fff;
  padding:14px 20px;z-index:200;
}
.skip:focus{left:0;top:0;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(254,237,218,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;min-height:78px;
}
.brand{
  font-family:var(--serif);font-weight:700;font-size:1.5rem;
  color:var(--navy);letter-spacing:.5px;white-space:nowrap;line-height:1.1;
}
.brand span{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--terracotta);margin-top:3px;
}
.site-header nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.site-header nav a{
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--navy);position:relative;padding:6px 0;
}
.site-header nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--terracotta);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.site-header nav a:hover::after{transform:scaleX(1);}
.site-header nav a:hover{color:var(--navy);}
.nav-cta{
  background:var(--terracotta);color:#fff !important;
  padding:12px 26px !important;border-radius:9999px;
  transition:background .3s var(--ease);
}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--terracotta-hover);}
.lang{
  font-size:12px !important;letter-spacing:1.5px !important;
  border:1px solid var(--line);border-radius:3px;padding:6px 10px !important;
}
.lang::after{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(88vh,760px);
  display:flex;align-items:center;
  background:var(--navy);
  overflow:hidden;
  color:#fff;
  text-align:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url("../assets/img/bg_1.jpg") center 40%/cover no-repeat;
  transform:scale(1.03);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,31,45,.55) 0%,rgba(4,31,45,.35) 45%,rgba(4,31,45,.75) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-top:90px;padding-bottom:90px;}
.hero h1{color:#fff;margin-bottom:.3em;}
.hero .eyebrow{color:var(--cream);opacity:.85;}
.hero-lede{
  font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.65rem);
  line-height:1.5;color:#fff;max-width:42ch;margin:0 auto 2.2em;
  font-weight:400;
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:1.75px;text-transform:uppercase;
  padding:17px 38px;border-radius:9999px;
  border:1.5px solid transparent;
  transition:all .3s var(--ease);
  cursor:pointer;
}
.btn-primary{background:var(--terracotta);color:#fff;border-color:var(--terracotta);}
.btn-primary:hover{background:transparent;color:#fff;border-color:#fff;}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65);}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;}
.btn-dark{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-dark:hover{background:transparent;color:var(--navy);}

/* ---------- Section basics ---------- */
.section{padding:clamp(72px,10vw,120px) 0;}
.section.cream{background:var(--cream);}
.section.cream-deep{background:var(--cream-deep);}
.section.navy{background:var(--navy);color:rgba(255,255,255,.86);}
.section.navy h2,.section.navy h3{color:#fff;}
.section-head{max-width:720px;margin:0 auto clamp(44px,6vw,68px);text-align:center;}
.section-head.left{margin-left:0;text-align:left;}
.section-head h2{margin-bottom:.35em;}
.section-lede{
  font-size:1.02rem;color:var(--navy-2);max-width:58ch;margin:0 auto;
  font-family:var(--sans);
}
.section.navy .section-lede{color:rgba(255,255,255,.75);}

/* ---------- Feature cards (Classes / Retreats style) ---------- */
.cards{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
  background:#fff;
  border-radius:.5rem;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(4,31,45,.05);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(4,31,45,.13);}
.card-media{
  aspect-ratio:4/3;overflow:hidden;background:var(--cream-deep);
}
.card-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.card:hover .card-media img{transform:scale(1.06);}
.card-body{padding:26px 24px 28px;flex:1;display:flex;flex-direction:column;}
.card h3{margin-bottom:.4em;font-size:1.35rem;}
.card p{font-size:.95rem;line-height:1.6;color:var(--navy-2);margin-bottom:.9em;}
.card p:last-child{margin-bottom:0;}
.meta{
  font-family:var(--sans);font-size:12px !important;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--terracotta-ink) !important;
  margin-top:auto;padding-top:.7em;
}
.card-link{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--terracotta-ink);margin-top:auto;padding-top:1em;
  display:inline-block;
}
.card-link::after{content:" →";}

/* ---------- Big two-up (like the Retreats / Trainings blocks) ---------- */
.split-feature{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-radius:.5rem;overflow:hidden;background:var(--navy);
  min-height:440px;
}
.split-feature .media{position:relative;min-height:340px;}
.split-feature .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.split-feature .panel{
  padding:clamp(36px,5vw,64px);
  display:flex;flex-direction:column;justify-content:center;
  background:var(--navy);color:rgba(255,255,255,.82);
}
.split-feature .panel h2{color:#fff;margin-bottom:.4em;}
.split-feature.reverse .media{order:2;}
.split-feature .panel ul{
  list-style:none;margin:1.4em 0 1.8em;padding:0;
}
.split-feature .panel li{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.15);
}
.split-feature .panel li:last-child{border-bottom:0;}

/* ---------- Gallery ---------- */
.gallery{
  display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
}
.gallery figure{margin:0;overflow:hidden;border-radius:.5rem;background:var(--cream-deep);}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .6s var(--ease);}
.gallery figure:hover img{transform:scale(1.05);}
.gallery .wide{grid-column:span 4;grid-row:span 1;}
.gallery .wide img{aspect-ratio:21/9;}

/* ---------- Quote strip (reference site has a quote rotator) ---------- */
.quote-strip{
  background:var(--cream-deep);
  padding:clamp(56px,8vw,92px) 0;
  text-align:center;
}
.quote-strip blockquote{
  margin:0 auto;max-width:760px;
  font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,2rem);
  line-height:1.45;color:var(--navy);font-weight:400;
}
.quote-strip .attribution{
  display:block;margin-top:1.4em;
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--terracotta);
}

/* ---------- Testimonials ---------- */
.testimonials{
  display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.testimonial{
  margin:0;background:#fff;border-radius:.5rem;padding:34px 30px;
  box-shadow:0 1px 2px rgba(4,31,45,.05);
}
.testimonial p{
  font-family:var(--serif);font-size:1.16rem;line-height:1.55;
  color:var(--navy);margin-bottom:1.2em;font-weight:400;
}
.testimonial cite{
  font-family:var(--sans);font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--terracotta);
}

/* ---------- About split ---------- */
.about{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(32px,6vw,72px);align-items:center;
}
.about .portrait{
  margin:0;border-radius:.5rem;overflow:hidden;background:var(--cream-deep);
  aspect-ratio:4/5;
}
.about .portrait img{width:100%;height:100%;object-fit:cover;}
.about p{max-width:56ch;}

/* ---------- Contact ---------- */
.contact-grid{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:clamp(34px,5vw,52px);
}
.contact-card{
  display:block;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:.5rem;padding:24px 26px;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.contact-card:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);}
.contact-card .k{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);
  margin-bottom:9px;
}
.contact-card .v{
  font-family:var(--serif);font-size:1.15rem;color:#fff;letter-spacing:.3px;
}

/* ---------- Press ---------- */
.press{
  margin:0 auto;max-width:820px;text-align:center;
}
.press p{
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.75rem);
  line-height:1.5;color:var(--navy);font-weight:400;
}
.press cite{
  font-family:var(--sans);font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--terracotta-ink);
  display:block;margin-top:1.3em;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--navy);color:#fff;text-align:center;
  padding:clamp(64px,9vw,100px) 0;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.78);max-width:52ch;margin:0 auto 2em;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--navy);color:rgba(255,255,255,.6);
  padding:56px 0 40px;border-top:1px solid rgba(255,255,255,.1);
}
.site-footer .wrap{
  display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;
  align-items:center;
}
.site-footer p{margin:0;font-size:.86rem;}
.site-footer a{color:rgba(255,255,255,.8);}
.site-footer a:hover{color:#fff;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .split-feature,.about{grid-template-columns:1fr;}
  .split-feature.reverse .media{order:0;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery .wide{grid-column:span 2;}
  .gallery .wide img{aspect-ratio:16/10;}
}
@media (max-width:720px){
  body{font-size:18px;}
  .site-header .wrap{flex-wrap:wrap;padding-top:14px;padding-bottom:14px;min-height:0;gap:14px;}
  .site-header nav{gap:16px;}
  .site-header nav a{font-size:11px;letter-spacing:1px;}
  .nav-cta{padding:10px 20px !important;}
  .hero{min-height:76vh;}
  .hero-actions .btn{width:100%;text-align:center;}
  .btn{padding:15px 28px;}
  .gateway{grid-template-columns:repeat(2,1fr);}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ---------- Gateway tiles (reference: category grid under hero) ---------- */
.gateway{
  display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
  margin-top:clamp(40px,6vw,64px);
}
.gateway a{
  position:relative;display:block;aspect-ratio:3/4;
  border-radius:.5rem;overflow:hidden;background:var(--navy);
}
.gateway img{
  width:100%;height:100%;object-fit:cover;opacity:.72;
  transition:opacity .4s var(--ease),transform .6s var(--ease);
}
.gateway a:hover img{opacity:.95;transform:scale(1.05);}
.gateway span{
  position:absolute;left:0;right:0;bottom:0;padding:20px 16px;
  background:linear-gradient(0deg,rgba(4,31,45,.9),transparent);
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:1.75px;text-transform:uppercase;color:#fff;
}
@media (max-width:720px){
  .gateway{grid-template-columns:repeat(2,1fr);}
}