/* ==========================================================================
   ENERGY CAMP — HOMEPAGE
   Built to "Complete Website Developer Brief | Final Approved Direction".
   Palette is strictly monochrome: white primary, black secondary.
   ========================================================================== */

.ecs{
  /* ---- STRICTLY BLACK & WHITE. No blue, no teal, no orange. ----
     White is primary (backgrounds), black is secondary (type + accent
     blocks). --accent / --accent-2 exist so every rule that used to point
     at the brand teal/orange now resolves to black instead. */
  --paper:#ffffff;      /* primary background        */
  --chalk:#f2f2f2;      /* alternating section       */
  --ink:#000000;        /* text + secondary colour   */
  --graphite:#111111;   /* the one deep block        */
  --accent:#000000;
  --accent-2:#000000;
  --on-accent:#ffffff;
  --muted:rgba(0,0,0,.62);
  --line:rgba(0,0,0,.14);
  --line-soft:rgba(0,0,0,.08);

  --display:'Inter Tight',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;

  --gutter:clamp(20px,5vw,64px);
  --maxw:1280px;
  --nav-h:76px;
}

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

.ecs{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.ecs img,.ecs svg,.ecs video{max-width:100%;display:block;}
.ecs a{color:inherit;}
/* Energy Camp display type: Inter Tight 900, italic, uppercase, tight
   leading. This is brand identity, not colour, so it is kept. */
.ecs h1,.ecs h2,.ecs h3,.ecs h4{margin:0;font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.04em;line-height:.85;overflow-wrap:anywhere;}
.ecs p{margin:0;}
.ecs ul{margin:0;padding:0;list-style:none;}
.ecs button{font:inherit;color:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
.section{padding:clamp(64px,9vw,128px) 0;}
.section--chalk{background:var(--chalk);}
.section--ink{background:var(--graphite);color:var(--paper);}

/* --- shared type -------------------------------------------------------- */
.eyebrow{
  font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:24px;
}
.section--ink .eyebrow{color:rgba(255,255,255,.62);}
.h-display{font-size:clamp(2.25rem,6vw,4.25rem);}
.h-section{font-size:clamp(1.875rem,4.6vw,3.25rem);}
.h-card{font-size:clamp(1.25rem,2.4vw,1.5rem);letter-spacing:-.02em;}
.italic{font-style:italic;}
.lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--muted);max-width:62ch;}
.section--ink .lead{color:rgba(255,255,255,.7);}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:19px 38px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-family:var(--body);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{background:#333;border-color:#333;transform:translateY(-1px);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}
.section--ink .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.section--ink .btn:hover{background:#d9d9d9;border-color:#d9d9d9;}
.section--ink .btn--ghost{background:transparent;color:var(--paper);}
.section--ink .btn--ghost:hover{background:var(--paper);color:var(--ink);}
.btn--sm{min-height:46px;padding:14px 24px;font-size:10px;}

/* ==========================================================================
   SIGNATURE ELEMENT — THE LEVEL SPECTRUM
   The brief's most repeated promise is "every level welcome / every session
   adapts to you". Rather than say it once, every class carries this bar so a
   nervous first-timer can see at a glance that the range includes them.
   ========================================================================== */
.levels{margin-top:auto;padding-top:20px;}
.levels__track{
  position:relative;height:3px;background:var(--line);overflow:hidden;
}
.levels__fill{
  position:absolute;inset:0 auto 0 0;background:var(--ink);
  width:var(--to,100%);margin-left:var(--from,0%);
  transform-origin:left;transform:scaleX(0);
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.is-visible .levels__fill{transform:scaleX(1);}
.levels__ends{
  display:flex;justify-content:space-between;margin-top:9px;
  font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.card--ink .levels__track{background:rgba(255,255,255,.22);}
.card--ink .levels__fill{background:var(--paper);}
.card--ink .levels__ends{color:rgba(255,255,255,.6);}

/* --- category tag (brief §12: clear Performance/Recovery/Sports label) --- */
.tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);
  color:var(--muted);
}
.tag--soon{border-color:var(--ink);color:var(--ink);}
.card--ink .tag{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7);}

/* --- image placeholder (swap for real Energy Camp photography) ---------- */
.ph{
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 12px,transparent 12px 24px),var(--chalk);
  border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:24px;color:var(--muted);
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.section--chalk .ph{background:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 12px,transparent 12px 24px),#e8e8e8;}

/* ==========================================================================
   TOP BAR + STICKY NAV   (brief §3)
   ========================================================================== */
.skip{
  position:absolute;top:0;left:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 20px;font-size:12px;
  clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{clip-path:none;}

.topbar{background:var(--ink);color:rgba(255,255,255,.85);font-size:12px;}
.topbar__inner{
  display:flex;align-items:center;justify-content:center;gap:10px 26px;
  flex-wrap:wrap;padding:9px 0;
}
.topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.topbar a:hover{color:#fff;}

.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:var(--nav-h);
}
.logo{
  font-family:var(--display);font-style:italic;font-weight:800;
  font-size:20px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;
}
.nav__links{display:none;align-items:center;gap:16px;}
.nav__links a{
  text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);transition:color .16s;
  white-space:nowrap;
}
.nav__links a:hover{color:var(--ink);}
.nav__ext::after{content:"↗";font-size:10px;margin-left:4px;}
.nav__right{display:flex;align-items:center;gap:10px;}
.nav__toggle{
  width:44px;height:44px;display:inline-flex;align-items:center;
  justify-content:center;background:none;border:0;cursor:pointer;
}
.nav__toggle span{display:block;width:22px;height:2px;background:var(--ink);position:relative;}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);
}
.nav__toggle span::before{top:-7px;}
.nav__toggle span::after{top:7px;}
.nav__toggle[aria-expanded="true"] span{background:transparent;}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

.drawer{display:none;border-top:1px solid var(--line);background:var(--paper);}
.drawer.is-open{display:block;}
.drawer ul{padding:8px 0 20px;}
.drawer a{
  display:block;padding:15px 0;text-decoration:none;border-bottom:1px solid var(--line-soft);
  font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;
}
.drawer .btn{width:100%;margin-top:18px;}

/* ==========================================================================
   1. HERO   (brief §5 — final approved copy)
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--paper);}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media .ph{width:100%;height:100%;border:0;}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 46%,rgba(255,255,255,.6) 100%);
}
.hero__inner{
  position:relative;z-index:2;
  min-height:calc(100svh - var(--nav-h));
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(56px,9vw,96px);padding-bottom:clamp(96px,12vw,132px);
}
.hero h1{font-size:clamp(2.5rem,7.4vw,5.5rem);max-width:15ch;}
.hero h1 em{font-style:italic;-webkit-text-stroke:1.5px var(--ink);color:transparent;}
.hero__copy{margin-top:26px;max-width:54ch;font-size:clamp(1.02rem,1.7vw,1.22rem);color:var(--muted);}
.hero__ctas{display:flex;flex-direction:column;gap:12px;margin-top:36px;}
.hero__aside{
  margin-top:26px;font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.hero__aside a{font-weight:700;text-underline-offset:4px;}

/* marquee of what's inside the club */
.hero__ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  border-top:1px solid var(--line);background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px);overflow:hidden;padding:12px 0;
}
.hero__track{
  display:flex;gap:36px;white-space:nowrap;width:max-content;
  animation:slide 38s linear infinite;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
@keyframes slide{to{transform:translateX(-50%);}}

/* ==========================================================================
   2. THREE PILLARS   (brief §3)
   No 01/02/03 numbering: these are three parallel offers, not a sequence.
   ========================================================================== */
.pillars{display:grid;gap:0;border-top:1px solid var(--line);}
.pillar{
  padding:36px 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;
}
.pillar h3{font-size:clamp(1.6rem,3.4vw,2.25rem);font-style:italic;}
.pillar p{margin-top:12px;color:var(--muted);max-width:34ch;}
.pillar__link{
  margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:gap .18s;
}
.pillar__link:hover{gap:14px;}

/* ==========================================================================
   3. PERFORMANCE FOR EVERY LEVEL   (brief §7)
   ========================================================================== */
.split{display:grid;gap:40px;align-items:start;}
.split__body p+p{margin-top:16px;}

/* ==========================================================================
   4. FEATURED CLASSES + SCHEDULE PREVIEW   (brief §4, §9–11)
   ========================================================================== */
.section__head{
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;
  justify-content:space-between;margin-bottom:40px;
}
.link-all{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;
  white-space:nowrap;
}
.cards{display:grid;gap:20px;}
.card{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);padding:26px 22px;min-width:0;
  transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:var(--ink);transform:translateY(-2px);}
.card__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px;}
.card__meta{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted);white-space:nowrap;}
.card h3{margin-bottom:10px;}
.card p{color:var(--muted);font-size:.94rem;}
.card__go{
  margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:gap .18s;
}
.card__go:hover{gap:14px;}
.card--ink{background:var(--graphite);border-color:var(--graphite);color:var(--paper);}
.card--ink p{color:rgba(255,255,255,.68);}
.card--ink .card__meta{color:rgba(255,255,255,.6);}

/* schedule preview */
.sched{margin-top:56px;border-top:1px solid var(--ink);}
.sched__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;
  align-items:center;padding:18px 0;border-bottom:1px solid var(--line);
}
.sched__when{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.sched__what{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;}
.sched__cat{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}

/* ==========================================================================
   5. IS ENERGY CAMP FOR ME?   (brief §8)
   ========================================================================== */
.faq{border-top:1px solid var(--ink);margin-top:8px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--body);font-size:1.4rem;font-weight:400;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq__a{padding:0 0 22px;color:var(--muted);max-width:60ch;}

/* ==========================================================================
   6–7. RECOVERY + SPORTS OVERVIEW   (brief §10, §11)
   ========================================================================== */
.list{border-top:1px solid var(--ink);}
.list__row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.list__row h3{font-size:clamp(1.25rem,2.6vw,1.6rem);font-style:italic;}
.list__row p{color:var(--muted);max-width:56ch;}
.list__flag{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.note{
  margin-top:32px;padding:22px;border:1px solid var(--ink);
  font-size:.95rem;font-weight:500;
}

/* ==========================================================================
   8. TRAVEL   (brief §14)
   ========================================================================== */
.travel__badge{
  display:inline-block;padding:7px 14px;background:var(--paper);color:var(--ink);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:24px;
}
.travel__cats{display:grid;gap:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.2);}
.travel__cat{
  padding:20px 0;border-bottom:1px solid rgba(255,255,255,.2);
  font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.6rem);
}

/* ==========================================================================
   9. MEMBER STORIES   (brief §15)
   ========================================================================== */
.stories{display:grid;gap:28px;}
.story{border-top:2px solid var(--ink);padding-top:22px;}
.story blockquote{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.1rem,2.1vw,1.3rem);line-height:1.28;letter-spacing:-.01em;}
.story__who{margin-top:16px;display:flex;align-items:center;gap:12px;}
.story__av{width:40px;height:40px;border-radius:50%;background:var(--chalk);
  border:1px solid var(--line);flex:none;}
.story__name{font-size:12px;font-weight:700;letter-spacing:.06em;}
.story__role{font-size:11px;color:var(--muted);}

/* ==========================================================================
   10. ABOUT   (brief §6)
   ========================================================================== */
.about__cols{columns:1;column-gap:48px;}
.about__cols p{margin-bottom:16px;break-inside:avoid;color:var(--muted);}
.about__cols p:first-child{
  font-family:var(--display);font-weight:700;font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.24;color:var(--ink);
}
.about__closer{
  margin-top:36px;padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:clamp(1.4rem,3.4vw,2.25rem);letter-spacing:-.02em;line-height:1.05;
}

/* ==========================================================================
   11. FINAL CTA   (brief §17)
   ========================================================================== */
.finalcta{text-align:center;}
.finalcta h2{max-width:18ch;margin:0 auto;}
.finalcta .lead{margin:22px auto 0;text-align:center;}
.finalcta__ctas{display:flex;flex-direction:column;gap:12px;margin-top:36px;
  max-width:420px;margin-left:auto;margin-right:auto;}

/* ==========================================================================
   12. FOOTER   (brief §21)
   ========================================================================== */
.footer{background:var(--paper);border-top:1px solid var(--ink);padding:64px 0 0;}
.footer__grid{display:grid;gap:36px;padding-bottom:48px;}
.footer h4{
  font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.footer li{margin-bottom:10px;}
.footer li a{text-decoration:none;font-size:.94rem;color:var(--muted);}
.footer li a:hover{color:var(--ink);}
.footer__brand .logo{font-size:24px;display:inline-block;margin-bottom:14px;}
.footer__legal{
  border-top:1px solid var(--line);padding:24px 0 32px;
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:11px;color:var(--muted);
}
.footer__legal a{text-decoration:none;}

/* ==========================================================================
   PERSISTENT WHATSAPP + MOBILE STICKY CTA   (brief §17, §18)
   ========================================================================== */
.wa{
  position:fixed;right:18px;bottom:18px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:transform .18s ease;
}
.wa:hover{transform:scale(1.06);}
.wa svg{width:26px;height:26px;fill:currentColor;}

.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-top:1px solid var(--line);background:var(--paper);
}
.stickybar a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:10px 12px;text-decoration:none;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.stickybar a:first-child{background:var(--ink);color:var(--paper);}
.stickybar a:last-child{background:var(--paper);color:var(--ink);}

/* ==========================================================================
   MOTION + FOCUS  (quality floor)
   ========================================================================== */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal.is-visible{opacity:1;transform:none;}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
.section--ink a:focus-visible,.wa:focus-visible{outline-color:#fff;outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .levels__fill{transform:scaleX(1);}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:600px){
  .hero__ctas,.finalcta__ctas{flex-direction:row;}
  .hero__ctas .btn,.finalcta__ctas .btn{flex:1;}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stories{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .list__row{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);gap:8px 32px;align-items:start;}
  .sched__row{grid-template-columns:120px minmax(0,1fr) auto;}
}
@media (min-width:900px){
  .pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;border-bottom:1px solid var(--line);}
  .pillar{border-bottom:0;padding:44px 0;}
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  .stories{grid-template-columns:repeat(3,minmax(0,1fr));}
  .about__cols{columns:2;}
  .travel__cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;}
  .travel__cat:nth-last-child(-n+2){border-bottom:0;}
  .footer__grid{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:48px;}
}
@media (min-width:1240px){
  .nav__links{display:flex;}
  .nav__toggle{display:none;}
  .drawer{display:none !important;}
}
@media (max-width:1239px){
  .stickybar{display:grid;}
  body{padding-bottom:56px;}          /* clear the sticky bar */
  .wa{bottom:72px;width:50px;height:50px;}
  .wa svg{width:23px;height:23px;}
}
@media (max-width:599px){
  .nav__right .btn--sm{display:none;}
}
@media (max-width:420px){
  .topbar__inner{font-size:11px;gap:8px 16px;}
  .logo{font-size:18px;}
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* --- page header (all inner pages) -------------------------------------- */
.pagehead{border-bottom:1px solid var(--line);padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,64px);}
.pagehead h1{font-size:clamp(2.25rem,6.4vw,4.5rem);max-width:16ch;}
.pagehead .lead{margin-top:22px;}
.crumb{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;display:block;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--ink);}

/* --- class / service detail row (brief §12) ----------------------------- */
.detail{border-top:1px solid var(--ink);}
.item{
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--line);
}
.item__media .ph{aspect-ratio:4/3;height:auto;width:100%;}
.item__head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.item h2{font-size:clamp(1.5rem,3.4vw,2.25rem);font-style:italic;margin-bottom:12px;}
.item__desc{color:var(--muted);max-width:60ch;}
.facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);
}
.fact dt{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;}
.fact dd{margin:0;font-size:.95rem;font-weight:500;}
.item__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}

/* --- memberships (brief §13) -------------------------------------------- */
.plans{display:grid;gap:20px;}
.plan{
  display:flex;flex-direction:column;border:1px solid var(--line);
  padding:clamp(28px,3.6vw,40px) clamp(22px,2.6vw,32px);min-width:0;
}
.plan--feature{background:var(--graphite);border-color:var(--graphite);color:var(--paper);}
.plan__name{font-size:clamp(1.5rem,3vw,2rem);font-style:italic;margin-bottom:10px;}
.plan__sub{color:var(--muted);min-height:3em;}
.plan--feature .plan__sub{color:rgba(255,255,255,.7);}
.plan__price{font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,5vw,3.25rem);
  letter-spacing:-.03em;margin:22px 0 4px;}
.plan__unit{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.plan--feature .plan__unit{color:rgba(255,255,255,.65);}
.plan__expiry{
  margin-top:18px;padding:10px 14px;border:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  display:inline-block;
}
.plan--feature .plan__expiry{border-color:rgba(255,255,255,.35);}
.plan__feats{margin:22px 0 26px;}
.plan__feats li{display:flex;gap:10px;padding:8px 0;font-size:.94rem;color:var(--muted);}
.plan--feature .plan__feats li{color:rgba(255,255,255,.75);}
.plan__feats li::before{content:"—";flex:none;color:var(--ink);}
.plan--feature .plan__feats li::before{color:var(--paper);}
.plan .btn{margin-top:auto;width:100%;}
.plan .btn.plan__btn2{margin-top:10px;}

/* --- schedule page (brief §19) ------------------------------------------ */
.filters{display:grid;gap:12px;margin-bottom:8px;}
.filter{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border:1px solid var(--line);background:var(--paper);
  font-size:12px;font-weight:600;letter-spacing:.06em;min-height:50px;
}
.filter span:first-child{font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);}
.daygroup{margin-top:44px;}
.daygroup h2{
  font-size:clamp(1.25rem,2.6vw,1.6rem);font-style:italic;
  padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:0;
}
.slot{
  display:grid;grid-template-columns:minmax(0,1fr);gap:6px 20px;
  padding:18px 0;border-bottom:1px solid var(--line);align-items:center;
}
.slot__time{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.01em;}
.slot__name{font-weight:600;}
.slot__meta{font-size:11px;color:var(--muted);letter-spacing:.04em;}

/* --- contact form (brief §20) ------------------------------------------- */
.form{display:grid;gap:20px;}
.field label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;padding:14px 14px;border:1px solid var(--line);background:var(--paper);
  font-family:var(--body);font-size:16px;color:var(--ink);border-radius:0;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);
}
.field textarea{min-height:150px;resize:vertical;}
.contact__aside{
  border:1px solid var(--ink);padding:28px 24px;height:fit-content;
}
.contact__aside h3{font-size:1.35rem;font-style:italic;margin-bottom:12px;}

/* --- trip template (brief §14) ------------------------------------------ */
.itinerary{border-top:1px solid var(--ink);}
.day{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;
  padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline;
}
.day__n{font-family:var(--display);font-weight:800;font-style:italic;
  font-size:1.25rem;letter-spacing:-.02em;white-space:nowrap;}
.day h3{font-size:1.05rem;margin-bottom:6px;}
.day p{color:var(--muted);font-size:.94rem;}
.incl{display:grid;gap:32px;margin-top:8px;}
.incl h3{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--body);color:var(--muted);margin-bottom:14px;}
.incl li{padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;color:var(--muted);}

@media (min-width:700px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));}
  .filters{grid-template-columns:repeat(2,minmax(0,1fr));}
  .slot{grid-template-columns:110px minmax(0,1fr) auto;}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;}
}
@media (min-width:900px){
  .item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;}
  .item--flip .item__media{order:2;}
  .plans{grid-template-columns:repeat(3,minmax(0,1fr));}
  .filters{grid-template-columns:repeat(4,minmax(0,1fr));}
  .contact__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start;}
  .form__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
}

/* ==========================================================================
   SECTION COLOR SCHEMES
   The per-widget "Section Color Scheme" dropdown puts .ecs-scheme-* on the
   Elementor widget wrapper. Every colour above resolves to these tokens, so
   a scheme only has to redefine them.
   ========================================================================== */
.ecs-scheme-white .ecs,.ecs.ecs-scheme-white{
  --paper:#ffffff; --chalk:#ffffff; --graphite:#111111;
  --ink:#000000; --accent:#000000; --accent-2:#000000; --on-accent:#ffffff;
  --muted:rgba(0,0,0,.62); --line:rgba(0,0,0,.14); --line-soft:rgba(0,0,0,.08);
}
.ecs-scheme-lightgrey .ecs,.ecs.ecs-scheme-lightgrey{
  --paper:#f2f2f2; --chalk:#e9e9e9; --graphite:#111111;
  --ink:#000000; --accent:#000000; --accent-2:#000000; --on-accent:#ffffff;
  --muted:rgba(0,0,0,.62); --line:rgba(0,0,0,.16); --line-soft:rgba(0,0,0,.09);
}
.ecs-scheme-black .ecs,.ecs.ecs-scheme-black{
  --paper:#000000; --chalk:#0d0d0d; --graphite:#ffffff;
  --ink:#ffffff; --accent:#ffffff; --accent-2:#ffffff; --on-accent:#000000;
  --muted:rgba(255,255,255,.66); --line:rgba(255,255,255,.18); --line-soft:rgba(255,255,255,.1);
}
.ecs-scheme-charcoal .ecs,.ecs.ecs-scheme-charcoal{
  --paper:#1c1c1c; --chalk:#242424; --graphite:#ffffff;
  --ink:#ffffff; --accent:#ffffff; --accent-2:#ffffff; --on-accent:#000000;
  --muted:rgba(255,255,255,.66); --line:rgba(255,255,255,.18); --line-soft:rgba(255,255,255,.1);
}
/* Elementor editor: give an empty widget some height so it can be selected */
.elementor-editor-active .ecs:empty{min-height:80px;}

/* ==========================================================================
   SPECIFICITY REPAIR
   `.ecs a{color:inherit}` has specificity 0,1,1 and outranks any single-class
   component rule (0,1,0), so every anchor-based button silently inherited its
   parent's text colour — black-on-black in the light schemes, white-on-white
   in the dark ones. Re-asserted at 0,2,0 so the component wins.
   ========================================================================== */
.ecs a.btn,.ecs .btn{color:var(--on-accent);}
.ecs a.btn--ghost,.ecs .btn--ghost{color:var(--ink);}
.ecs .topbar a{color:inherit;}

/* Blocks that paint their own accent background must set their own text
   colour too, otherwise they inherit the section's and disappear. */
.ecs .section--ink{background:var(--ink);color:var(--paper);}
.ecs .section--ink .eyebrow{color:var(--paper);opacity:.72;}
.ecs .section--ink .lead{color:var(--paper);opacity:.76;}
.ecs .section--ink a.btn,.ecs .section--ink .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.ecs .section--ink a.btn--ghost,.ecs .section--ink .btn--ghost{
  background:transparent;color:var(--paper);border-color:var(--paper);opacity:.9;
}
.ecs .section--ink .travel__badge{background:var(--paper);color:var(--ink);}
.ecs .section--ink .travel__cats{border-top-color:var(--paper);}
.ecs .section--ink .travel__cat{border-bottom-color:var(--paper);}

.ecs .plan--feature{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.ecs .plan--feature .plan__sub,
.ecs .plan--feature .plan__unit,
.ecs .plan--feature .plan__feats li{color:var(--paper);opacity:.78;}
.ecs .plan--feature .plan__feats li::before{color:var(--paper);opacity:1;}
.ecs .plan--feature .plan__expiry{border-color:var(--paper);opacity:.85;}
.ecs .plan--feature a.btn,.ecs .plan--feature .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.ecs .plan--feature a.btn--ghost,.ecs .plan--feature .btn--ghost{background:transparent;color:inherit;border-color:currentColor;}
.ecs .plan a.btn.plan__btn2,.ecs .plan .btn.plan__btn2{background:transparent;color:inherit;border-color:currentColor;}
.ecs .plan a.btn.plan__btn2:hover,.ecs .plan .btn.plan__btn2:hover{background:transparent;color:inherit;border-color:currentColor;opacity:.7;}

.ecs .card--ink{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.ecs .card--ink p,.ecs .card--ink .card__meta{color:var(--paper);opacity:.74;}
.ecs .card--ink .tag{border-color:var(--paper);color:var(--paper);opacity:.8;}
.ecs .card--ink .levels__track{background:var(--paper);opacity:.25;}
.ecs .card--ink .levels__fill{background:var(--paper);}
.ecs .card--ink .levels__ends{color:var(--paper);opacity:.7;}
.ecs .card--ink a.card__go{color:var(--paper);}

/* topbar is a solid ink strip on every scheme */
.ecs .topbar{background:var(--ink);color:var(--paper);}
.ecs .topbar a:hover{color:var(--paper);opacity:.75;}

/* floating + sticky actions */
.ecs .wa{background:var(--ink);color:var(--paper);}
.ecs .stickybar{background:var(--paper);}
.ecs .stickybar a:first-child{background:var(--ink);color:var(--paper);}
.ecs .stickybar a:last-child{background:var(--paper);color:var(--ink);}

/* The sticky nav and the hero ticker were painted with a hardcoded white
   translucent wash, so on the dark schemes the logo and ticker words sat on
   white and vanished. Both now derive from the scheme's own base colour. */
.ecs .nav{background:var(--paper);}
.ecs .hero__ticker{background:var(--paper);border-top-color:var(--line);}
.ecs .hero__scrim{
  background:linear-gradient(to right,var(--paper) 0%,var(--paper) 34%,transparent 100%);
  opacity:.94;
}
.ecs .drawer{background:var(--paper);}

/* Per-widget visibility switches from the Section Color Scheme panel. */
@media (min-width:1025px){ .ecs-hide-desktop-yes{display:none !important;} }
@media (min-width:768px) and (max-width:1024px){ .ecs-hide-tablet-yes{display:none !important;} }
@media (max-width:767px){ .ecs-hide-mobile-yes{display:none !important;} }

/* ---------------------------------------------------------------------------
   CTA BUTTON WRAP FIX
   `.finalcta__ctas` was capped at 420px and its buttons set to flex:1, so on
   desktop "Book Your Free First Session" was squeezed into three lines. The
   row now sizes to its content and only stacks when it genuinely won't fit.
   --------------------------------------------------------------------------- */
.ecs .finalcta__ctas{max-width:none;justify-content:center;flex-wrap:wrap;}
.ecs .finalcta__ctas .btn{flex:0 1 auto;white-space:nowrap;}
.ecs .hero__ctas .btn{flex:0 1 auto;white-space:nowrap;}
@media (max-width:599px){
  .ecs .finalcta__ctas .btn,.ecs .hero__ctas .btn{
    flex:1 1 100%;white-space:normal;
  }
}

/* ---------------------------------------------------------------------------
   LOGO LOCKUP
   The logo can now be text, an image, or both. Making it a flex row means the
   image and wordmark align on their centres and the gap control has something
   to act on.
   --------------------------------------------------------------------------- */
.ecs .logo{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;line-height:1;
}
.ecs .logo .ecs-logo-img{
  display:block;width:auto;max-height:40px;object-fit:contain;flex:none;
}
.ecs .footer .logo .ecs-logo-img{max-height:52px;}
.ecs .logo .ecs-logo-text{display:inline-block;min-width:0;}
/* A wide client logo must never widen its column: cap it to the space
   available rather than letting it push the page sideways. */
.ecs .logo{max-width:100%;flex-wrap:wrap;}
.ecs .logo .ecs-logo-img{max-width:100%;}
@media (max-width:767px){
  .ecs .footer .logo .ecs-logo-img{max-height:44px;}
}
@media (max-width:479px){
  .ecs .logo .ecs-logo-img{max-height:32px;}
  .ecs .footer .logo .ecs-logo-img{max-height:38px;}
}

/* ---------------------------------------------------------------------------
   FIVE PILLARS
   The homepage now leads with all five things Energy Camp offers, not three,
   so the pillar row needs an intermediate 2-up step before going 5-up. Five
   equal columns are too narrow below ~1100px.
   --------------------------------------------------------------------------- */
@media (min-width:600px) and (max-width:899px){
  .ecs .pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;}
  .ecs .pillar{border-bottom:1px solid var(--line);}
}
@media (min-width:900px) and (max-width:1199px){
  .ecs .pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;}
  .ecs .pillar{border-bottom:1px solid var(--line);}
}
@media (min-width:1200px){
  .ecs .pillars{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 32px;}
  .ecs .pillar{border-bottom:0;}
}
.ecs .pillar h3{overflow-wrap:anywhere;}

/* Activity cards carry an image above the text. */
.ecs .card .item__media .ph{aspect-ratio:4/3;height:auto;width:100%;}
.ecs .card .item__media img{aspect-ratio:4/3;object-fit:cover;width:100%;}

/* ---------------------------------------------------------------------------
   ACTIVITY CARDS
   The client's note is that a black-and-white design needs the photography to
   carry the energy, so these cards lead with the image rather than text.
   --------------------------------------------------------------------------- */
.ecs .card__media{
  margin:-26px -22px 22px;overflow:hidden;
}
.ecs .card__media .ph,
.ecs .card__media img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:0;display:block;
}
.ecs .card__media + .card__top{margin-bottom:16px;}
@media (max-width:599px){
  .ecs .card__media{margin:-26px -20px 20px;}
  .ecs .card__media .ph,.ecs .card__media img{aspect-ratio:16/10;}
}

/* ===========================================================================
   SPLIT LAYOUT  (Home - Is It For Me, Home - Travel Band)
   Image one side, content the other, 50/50 on desktop. On mobile the image
   always comes first regardless of which side it sits on at desktop.
   =========================================================================== */
.ecs .ecs-split{
  display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;
}
.ecs .ecs-split__media{min-width:0;order:-1;}   /* image first on mobile */
.ecs .ecs-split__text{min-width:0;}
.ecs .ecs-split__media .ph,
.ecs .ecs-split__media img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
}
@media (min-width:900px){
  .ecs .ecs-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);}
  .ecs .ecs-split__media{order:0;}
  .ecs .ecs-split--left  .ecs-split__media{order:1;}
  .ecs .ecs-split--left  .ecs-split__text {order:2;}
  .ecs .ecs-split--right .ecs-split__text {order:1;}
  .ecs .ecs-split--right .ecs-split__media{order:2;}
  .ecs .ecs-split__media .ph,
  .ecs .ecs-split__media img{aspect-ratio:3/4;max-height:620px;}
}
/* FAQ sits full width beneath the split */
.ecs .ecs-faq-full{margin-top:clamp(40px,5vw,64px);}
/* the travel band's category list is inside a half-width column now */
.ecs .ecs-split .travel__cats{grid-template-columns:minmax(0,1fr);}

/* ===========================================================================
   SECTION BACKGROUND IMAGE  (Home - Every Level, Final CTA)
   =========================================================================== */
.ecs section.has-bg{
  position:relative;background-size:cover;background-position:center;
  background-repeat:no-repeat;isolation:isolate;
}
.ecs section.has-bg > *{position:relative;z-index:2;}
.ecs section.has-bg::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.ecs section.has-bg.scrim-light::before{background:rgba(255,255,255,.86);}
.ecs section.has-bg.scrim-dark::before{background:rgba(0,0,0,.7);}
.ecs section.has-bg.scrim-none::before{background:none;}
/* a dark wash needs light type regardless of the active scheme */
.ecs section.has-bg.scrim-dark,
.ecs section.has-bg.scrim-dark .lead,
.ecs section.has-bg.scrim-dark .eyebrow,
.ecs section.has-bg.scrim-dark h2{color:#fff;}
.ecs section.has-bg.scrim-dark .levels__track{background:rgba(255,255,255,.28);}
.ecs section.has-bg.scrim-dark .levels__fill{background:#fff;}
.ecs section.has-bg.scrim-dark .levels__ends{color:rgba(255,255,255,.72);}
.ecs section.has-bg.scrim-dark .btn{background:#fff;color:#000;border-color:#fff;}
.ecs section.has-bg.scrim-dark .btn--ghost{background:transparent;color:#fff;border-color:#fff;}

/* ===========================================================================
   HOME - HIGHLIGHTS
   Hover (desktop) or tap (touch) a column: the background photo cross-fades
   and that column becomes a solid card. Typography follows the Energy Camp
   system — Inter Tight 900 italic uppercase for titles, Inter for body.
   =========================================================================== */
.ecs .hwpb{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  min-height:clamp(460px,46vw,720px);
  padding:clamp(28px,6vw,64px) clamp(16px,5vw,64px);
  background:var(--chalk);
}
.ecs .hwpb::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.06) 38%,rgba(0,0,0,.32) 100%);
}
.ecs .hwpb.scrim-strong::before{
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 38%,rgba(0,0,0,.58) 100%);
}
.ecs .hwpb.scrim-none::before{background:none;}

/* ---- BACKGROUND STAGE ----------------------------------------------------
   The photos used to live inside each <li>. On mobile the list turns into a
   horizontal scroller (overflow-x:auto), which clipped every photo down to
   the width and height of one card — the section behind stayed flat dark and
   the client saw no photography at all.
   The stage is now a direct child of .hwpb, so the list, the scroller and any
   Elementor wrapper are all out of the way. It cannot be clipped or resized
   by anything the cards do.
   Photos are CSS backgrounds rather than <img>: lazy-load and cache plugins
   rewrite src/srcset, and a rewritten srcset inside a hidden-by-opacity
   <picture> is the other way these images silently vanish in production. */
.ecs .hwpb__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.ecs .hwpb__bgitem{
  position:absolute;inset:0;opacity:0;
  background-image:var(--hl-bg-m,none);
  background-size:cover;
  background-position:var(--hl-focus,center center);
  background-repeat:no-repeat;
  transition:opacity .8s cubic-bezier(.4,0,.2,1);
}
@media (min-width:901px){
  .ecs .hwpb__bgitem{background-image:var(--hl-bg-d,none);}
}
.ecs .hwpb__bgitem.is-on{opacity:1;}
.ecs .hwpb__bgitem.is-empty{background:#1a1a1a;}

/* The list is now free to be positioned — nothing inside it has to escape. */
.ecs .hwpb__list{
  position:relative;z-index:2;list-style:none;margin:0;padding:0;
  width:100%;max-width:1180px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,2vw,28px);align-items:start;
}
.ecs .hwpb__item{position:relative;margin:0;}

.ecs .hwpb__ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;color:rgba(255,255,255,.72);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}

.ecs .hwpb__info{
  position:relative;z-index:2;   /* above the photo (0) and the scrim (1) */
  height:100%;
  padding:clamp(20px,2.2vw,30px) clamp(18px,2vw,28px) clamp(24px,2.6vw,34px);
  color:#fff;background:transparent;
  border-top:1px solid rgba(255,255,255,.55);cursor:pointer;
  transition:background-color .45s cubic-bezier(.4,0,.2,1),
             color .45s cubic-bezier(.4,0,.2,1),
             border-color .45s cubic-bezier(.4,0,.2,1);
}
.ecs .hwpb__item[aria-current="true"] .hwpb__info{
  background:var(--paper);color:var(--ink);border-top-color:transparent;
}
.ecs .hwpb__info:focus-visible{outline:2px solid #fff;outline-offset:3px;}

.ecs .hwpb__title{
  margin:0 0 14px;font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.92;
  font-size:clamp(20px,2.1vw,30px);
}
.ecs .hwpb__text{
  margin:0;max-width:34ch;font-family:var(--body);
  font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:inherit;opacity:.88;
}
.ecs .hwpb__item[aria-current="true"] .hwpb__text{opacity:.72;}

.ecs .hwpb__link{
  display:inline-block;margin-top:26px;padding-bottom:6px;color:inherit;
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);
}
.ecs .hwpb__item[aria-current="true"] .hwpb__link{
  opacity:1;transform:none;pointer-events:auto;
}
.ecs .hwpb__link:hover{opacity:.65;}

@media (max-width:899px){
  .ecs .hwpb{align-items:flex-end;min-height:640px;}
  .ecs .hwpb__list{grid-template-columns:minmax(0,1fr);gap:0;max-width:560px;}
  .ecs .hwpb__info{padding:18px 20px 22px;}
  .ecs .hwpb__title{margin-bottom:10px;}
  .ecs .hwpb__link{margin-top:18px;}
  .ecs .hwpb__text{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1);
  }
  .ecs .hwpb__item[aria-current="true"] .hwpb__text{max-height:220px;opacity:.72;}
}
@media (max-width:560px){
  .ecs .hwpb{min-height:560px;padding-bottom:clamp(20px,6vw,32px);}
  .ecs .hwpb__title{font-size:19px;}
  .ecs .hwpb__text{font-size:14px;}
}

/* Placeholder captions were a fixed dark grey, so they disappeared on the
   black and charcoal schemes. Derive them from the scheme instead. */
.ecs .ph{
  background:var(--chalk);color:var(--muted);
  border:1px solid var(--line-soft);
  background-image:repeating-linear-gradient(45deg,
    rgba(128,128,128,.08) 0 12px,transparent 12px 24px);
}

/* Inactive Highlight columns carry white type over the photo. Before any
   photo is uploaded the section falls back to the scheme surface, where
   white-on-light would be unreadable — so give the section a dark base of
   its own. Once a photo is set it simply sits on top of this. */
.ecs .hwpb{background:#141414;}
.ecs .hwpb__ph{background:#1a1a1a;}

/* The Final CTA band paints its own inverted colours, so a LIGHT wash left
   white type on a near-white backdrop. Under a light wash the band must flip
   back to dark type; under a dark wash it stays light. */
.ecs .section--ink.has-bg.scrim-light,
.ecs .section--ink.has-bg.scrim-light h2,
.ecs .section--ink.has-bg.scrim-light .lead,
.ecs .section--ink.has-bg.scrim-light .eyebrow{color:var(--ink);}
.ecs .section--ink.has-bg.scrim-light .btn{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.ecs .section--ink.has-bg.scrim-light .btn--ghost{
  background:transparent;color:var(--ink);border-color:var(--ink);
}
.ecs .section--ink.has-bg.scrim-light .travel__badge{background:var(--ink);color:var(--paper);}

/* ---------------------------------------------------------------------------
   BLOCKS THAT NOW LIVE INSIDE A 50/50 SPLIT
   Lists, schedules and the About columns were built to run full width, so
   inside a half-width column they need to collapse to a single column.
   --------------------------------------------------------------------------- */
.ecs .ecs-split .list,
.ecs .ecs-split .sched{margin-top:0;}
.ecs .ecs-split .list__row{grid-template-columns:minmax(0,1fr);gap:6px;}
.ecs .ecs-split .sched__row{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;}
.ecs .about__cols--split{columns:1;}
.ecs .about__cols--split p{break-inside:auto;}

/* Travel categories sit full width beneath the split again */
.ecs .ecs-cats-full{margin-top:clamp(36px,4vw,56px);}

/* Text columns inside a split shouldn't cling to a narrow measure */
.ecs .ecs-split__text .lead,
.ecs .ecs-split__text p{max-width:none;}

/* ---------------------------------------------------------------------------
   HIGHLIGHTS — vertical position of the column row
   --------------------------------------------------------------------------- */
.ecs .hwpb.vpos-top{align-items:flex-start;}
.ecs .hwpb.vpos-middle{align-items:center;}
.ecs .hwpb.vpos-bottom{align-items:flex-end;}
@media (max-width:899px){
  .ecs .hwpb.vpos-top,
  .ecs .hwpb.vpos-middle,
  .ecs .hwpb.vpos-bottom{align-items:flex-end;}
}

/* ---------------------------------------------------------------------------
   HIGHLIGHTS — LEGIBILITY OVER A BUSY PHOTO
   The reference sits over a bright, near-empty studio shot, so plain white
   text works there. Real Energy Camp photography is busy and mid-tone, and
   white text on it was unreadable. Inactive columns now get a translucent
   dark panel; the active one still becomes a solid card, so the interaction
   reads the same but nothing depends on the photo being calm.
   --------------------------------------------------------------------------- */
/* No panel by default — the reference has none, and a translucent box over
   every inactive column reads as clutter. Legibility comes from the section
   scrim plus a text shadow, which costs nothing visually. A panel can still
   be switched on per widget for a photo that needs it. */
.ecs .hwpb__info{
  background:transparent;
  text-shadow:0 1px 3px rgba(0,0,0,.65);
}
.ecs .hwpb__item[aria-current="true"] .hwpb__info{text-shadow:none;}

/* optional panel, driven by the "Inactive Card Background" control */
.ecs .hwpb.idle-subtle .hwpb__item[aria-current="false"] .hwpb__info{
  background:rgba(0,0,0,.28);
}
.ecs .hwpb.idle-dark .hwpb__item[aria-current="false"] .hwpb__info{
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
/* the scrim now sits between photo and cards, so it can be gentler */
.ecs .hwpb::before{
  background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.26) 40%,rgba(0,0,0,.58) 100%);
}
.ecs .hwpb.scrim-strong::before{
  background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.4) 40%,rgba(0,0,0,.65) 100%);
}
.ecs .hwpb.scrim-none::before{background:none;}

/* ---------------------------------------------------------------------------
   HIGHLIGHTS — HEADING BLOCK ABOVE THE COLUMNS
   The section is a column flex: the heading sits at the top, the columns are
   pushed to the bottom by the auto margin, so "Columns Position" still works.
   --------------------------------------------------------------------------- */
.ecs .hwpb__head{
  position:relative;z-index:2;
  width:100%;max-width:1180px;margin:0 auto clamp(28px,4vw,56px);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.ecs .hwpb__head .eyebrow{color:#fff;opacity:.85;margin-bottom:16px;}
.ecs .hwpb__heading{
  margin:0;font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(1.875rem,4.6vw,3.25rem);color:#fff;
}
/* the auto margin is what pins the columns to the bottom */
.ecs .hwpb.vpos-bottom .hwpb__head{margin-bottom:auto;padding-bottom:clamp(28px,4vw,56px);}
.ecs .hwpb.vpos-top .hwpb__list{margin-bottom:auto;}
.ecs .hwpb.vpos-middle .hwpb__head{margin-bottom:auto;}
.ecs .hwpb.vpos-middle .hwpb__list{margin-bottom:auto;}
/* the list keeps its own centring now that the section stacks */
.ecs .hwpb__list{margin-left:auto;margin-right:auto;}
@media (max-width:899px){
  .ecs .hwpb__head{max-width:560px;margin-bottom:auto;padding-bottom:28px;}
}

/* ===========================================================================
   v2.9.0 — MOBILE REPAIRS
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. HIGHLIGHTS — MOBILE GAPS
   Below 900px the three columns stack, and the gap was set to 0, so the cards
   ran into each other as one solid block with no separation between titles.
   They now keep a gap on every breakpoint, and each panel gets its own
   surface so the stack reads as three distinct cards.
   --------------------------------------------------------------------------- */
@media (max-width:899px){
  .ecs .hwpb__list{gap:clamp(10px,2.4vw,16px);}
  .ecs .hwpb__info{border-top:0;}
  .ecs .hwpb__item[aria-current="false"] .hwpb__info{
    background:rgba(0,0,0,.55);
    border-left:3px solid rgba(255,255,255,.65);
  }
  .ecs .hwpb__item[aria-current="true"] .hwpb__info{border-left:3px solid transparent;}
}
@media (max-width:560px){
  .ecs .hwpb__list{gap:10px;}
  .ecs .hwpb__info{padding:16px 16px 18px;}
}

/* ---------------------------------------------------------------------------
   2. HERO — THE MOBILE BANNER BUG
   `.hero__media` is absolutely positioned and `.hero__media .ph` was sized to
   fill it, but the real <img> had no sizing rule at all. So the placeholder
   filled the banner correctly and an uploaded photo did not: it fell back to
   its intrinsic size, capped at max-width:100%, which on a phone collapsed a
   landscape photo into a thin strip across the top of the section with empty
   background below it. The image now fills the banner and crops, exactly as
   the placeholder always did.
   --------------------------------------------------------------------------- */
.ecs .hero__media,
.ecs .hero__pic{display:block;width:100%;height:100%;}
.ecs .hero__media img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
}
.ecs .hero__media .ph{width:100%;height:100%;border:0;}

/* Photo wash. A side fade works on a wide screen; on a phone it covers almost
   the whole photo, so Auto flips to a bottom fade there. */
.ecs .hero__scrim{transition:none;}
.ecs .hero.wash-auto .hero__scrim,
.ecs .hero.wash-side .hero__scrim{
  background:linear-gradient(to right,var(--paper) 0%,var(--paper) 34%,transparent 100%);
  opacity:.94;
}
.ecs .hero.wash-bottom .hero__scrim{
  background:linear-gradient(to bottom,transparent 0%,transparent 26%,var(--paper) 86%);
  opacity:.97;
}
.ecs .hero.wash-flat .hero__scrim{background:var(--paper);opacity:.72;}
.ecs .hero.wash-none .hero__scrim{background:none;opacity:0;}

@media (max-width:767px){
  .ecs .hero.wash-auto .hero__scrim{
    background:linear-gradient(to bottom,transparent 0%,transparent 24%,var(--paper) 84%);
    opacity:.97;
  }
  /* With a bottom fade the copy belongs under the photo, not on top of it. */
  .ecs .hero.wash-auto .hero__inner,
  .ecs .hero.wash-bottom .hero__inner{
    justify-content:flex-end;
    padding-top:clamp(150px,36vh,300px);
  }
  .ecs .hero__inner{
    min-height:min(760px,86svh);
    padding-bottom:clamp(84px,16vw,120px);
  }
  .ecs .hero h1{max-width:none;}
  .ecs .hero__copy{max-width:none;}
  .ecs .hero__ctas .btn{width:100%;}
}
@media (max-width:400px){
  .ecs .hero__inner{padding-top:clamp(120px,30vh,220px);}
  .ecs .hero__ticker{padding:9px 0;}
  .ecs .hero__track{font-size:9px;gap:24px;}
}

/* ---------------------------------------------------------------------------
   3. IMAGE HEIGHT CONTROLS
   Section photos carry `ecs-media-img` / `ecs-media-ph` so the per-device
   Image Height controls in Advanced Spacing can reach them. Give them a sane
   base so an untouched widget still crops rather than stretches, and keep the
   hero backdrop (`is-cover`) out of it.
   --------------------------------------------------------------------------- */
.ecs .ecs-media-img{width:100%;height:auto;display:block;object-fit:cover;}
.ecs .ecs-media-img.is-cover{height:100%;}
.ecs .item__media,
.ecs .card__media,
.ecs .ecs-split__media{min-width:0;}

/* ===========================================================================
   v2.9.1 — HERO MARQUEE (TICKER)
   Two reasons it sat still on the live site:

   1. The keyframes were called `slide`. That is one of the most commonly
      declared animation names in WP themes and slider plugins, and the last
      declaration of a given @keyframes name wins document-wide — so whichever
      stylesheet loaded after this one silently replaced the movement. The
      keyframes are now namespaced `ecs-ticker`.
   2. `.hero__track` is a single class (0,1,0), so any theme rule touching
      animation on a descendant selector outranked it. The rule is now scoped
      and marked important.

   Also: the loop is only seamless if the two copies of the word list are
   exactly the same width, because the track travels -50%. A flex `gap` adds
   one extra gap BETWEEN the copies, so the loop drifted by half a gap on
   every pass. The gap now lives on the items as margin-right, which makes
   both halves identical.
   =========================================================================== */
.ecs .hero__ticker{
  --ecs-tick-gap:36px;
  --ecs-tick-speed:38s;
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  overflow:hidden;
  background:#ffffff;
  color:#000000;
  border-top:1px solid rgba(0,0,0,.14);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:12px 0;
}
.ecs .hero__ticker .hero__track{
  display:flex;flex-wrap:nowrap;align-items:center;
  width:max-content;gap:0;white-space:nowrap;
  color:inherit;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  animation:ecs-ticker var(--ecs-tick-speed) linear infinite !important;
  animation-play-state:running !important;
  will-change:transform;
}
.ecs .hero__ticker .hero__track > *{
  flex:none;margin-right:var(--ecs-tick-gap);color:inherit;
}
@keyframes ecs-ticker{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
/* optional: hold the words still while the visitor is reading them */
.ecs .hero__ticker.is-pausable:hover .hero__track,
.ecs .hero__ticker.is-pausable:focus-within .hero__track{
  animation-play-state:paused !important;
}
/* Motion preference wins over the important above (0,3,0 beats 0,2,0).
   Scoped to :not(.is-js): when the JS marquee is driving, it owns the inline
   transform, and an !important transform here would silently outrank it —
   the strip would sit at 0 forever while the script happily animated a value
   the browser was throwing away. */
@media (prefers-reduced-motion:reduce){
  .ecs .hero .hero__ticker .hero__track:not(.is-js){
    animation:none !important;transform:none !important;
  }
}
@media (max-width:400px){
  .ecs .hero__ticker{--ecs-tick-gap:24px;padding:9px 0;}
  .ecs .hero__ticker .hero__track{font-size:9px;}
}

/* ---------------------------------------------------------------------------
   v2.9.2 — MARQUEE: JS TAKES OVER
   The strip is now driven by requestAnimationFrame in ecs.js. When that is
   running, the element gets `.is-js` and the CSS animation must get out of the
   way or the two fight over the transform. The @keyframes rule stays as the
   no-JS fallback.
   --------------------------------------------------------------------------- */
.ecs .hero__ticker .hero__track.is-js{
  animation:none !important;
  transform:translate3d(0,0,0);
}

/* "Always animate" overrides the visitor's reduce-motion setting for this one
   element — off by default, switched on per widget in the panel. */
@media (prefers-reduced-motion:reduce){
  .ecs .hero .hero__ticker.force-motion .hero__track{
    animation:ecs-ticker var(--ecs-tick-speed) linear infinite !important;
  }
  .ecs .hero .hero__ticker.force-motion .hero__track.is-js{
    animation:none !important;
  }
}

/* ===========================================================================
   v2.10.0 — CAROUSEL  (Home - Member Stories)
   Built on native overflow + scroll-snap rather than a slider library: touch
   swipe, trackpad and keyboard all work without any JS, and the script only
   adds arrows, dots and autoplay on top. Slides-per-view is a CSS variable so
   Elementor can set it per device from one control.
   =========================================================================== */
.ecs .ecs-carousel{
  --ecs-car-per:1;
  --ecs-car-gap:20px;
  position:relative;
}
@media (min-width:600px){ .ecs .ecs-carousel{--ecs-car-per:2;} }
@media (min-width:900px){ .ecs .ecs-carousel{--ecs-car-per:3;} }

.ecs .ecs-carousel__viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* the cards have a top rule and a focus ring — give them room */
  padding-bottom:4px;
}
.ecs .ecs-carousel__viewport::-webkit-scrollbar{display:none;}
.ecs .ecs-carousel__viewport:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}

/* Beats the grid rules on .stories (0,1,0) without touching them. */
.ecs .ecs-carousel__track{
  display:flex !important;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:var(--ecs-car-gap);
  margin:0;padding:0;
  grid-template-columns:none !important;
}
/* <figure> carries a browser default of `margin:1em 40px`. In the old grid
   that just padded the columns, but in a flex track it is added to the flex
   basis, so every slide came out 80px wider than the width calculated below —
   the track overflowed and the snap points landed in the wrong place. */
.ecs .ecs-carousel__slide{margin:0;}
.ecs .ecs-carousel__slide{
  flex:0 0 calc(
    (100% - (var(--ecs-car-gap) * (var(--ecs-car-per) - 1))) / var(--ecs-car-per)
  );
  min-width:0;
  scroll-snap-align:start;
  display:flex;flex-direction:column;
}
/* caption sits on the baseline of the card whatever the quote length */
.ecs .ecs-carousel__slide .story__who{margin-top:auto;}

/* --- arrows + dots ------------------------------------------------------- */
.ecs .ecs-carousel__nav{
  display:flex;align-items:center;gap:16px;
  margin-top:28px;
}
.ecs .ecs-carousel__arrow{
  width:46px;height:46px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:0;
  cursor:pointer;padding:0;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,opacity .18s ease;
}
.ecs .ecs-carousel__arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;}
.ecs .ecs-carousel__arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.ecs .ecs-carousel__arrow[disabled]{opacity:.3;cursor:default;}
.ecs .ecs-carousel__arrow[disabled]:hover{background:transparent;color:var(--ink);border-color:var(--line);}

.ecs .ecs-carousel__dots{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-right:auto;
}
.ecs .ecs-carousel__dot{
  width:9px;height:9px;padding:0;flex:none;
  background:transparent;border:1px solid var(--ink);border-radius:50%;
  opacity:.45;cursor:pointer;
  transition:opacity .18s ease,background-color .18s ease,transform .18s ease;
}
.ecs .ecs-carousel__dot[aria-selected="true"]{
  background:var(--ink);opacity:1;transform:scale(1.15);
}
/* arrows on the right, dots on the left, is the default; this flips it */
.ecs .ecs-carousel--nav-center .ecs-carousel__nav{justify-content:center;}
.ecs .ecs-carousel--nav-center .ecs-carousel__dots{margin-right:0;}

/* nothing to page through — the script hides the controls entirely */
.ecs .ecs-carousel__nav[hidden]{display:none;}

/* Grabbing to drag on a mouse. */
.ecs .ecs-carousel__viewport.is-dragging{
  scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none;
  user-select:none;
}

@media (prefers-reduced-motion:reduce){
  .ecs .ecs-carousel__viewport{scroll-behavior:auto;}
}

/* ===========================================================================
   v2.11.0 — FOOTER APP BUTTONS + SOCIAL ICONS
   Icons come from Elementor's icon control, so they are a webfont glyph or an
   inline <svg> — vector either way. A PNG/JPG icon is what looks fuzzy: a
   32px bitmap has to be drawn at 64 real pixels on a phone and there is
   nothing there to draw with. `svg{fill:currentColor}` also means one colour
   control repaints the whole set.
   =========================================================================== */
.ecs .ecs-apps{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-top:24px;
}
.ecs .ecs-apps__head{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.ecs .ecs-apps__row{display:flex;flex-wrap:wrap;gap:12px;}

.ecs .ecs-appbtn{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 16px;
  color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:2px;
  text-decoration:none;line-height:1.1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.ecs .ecs-appbtn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.ecs .ecs-appbtn__icon{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;flex:none;
}
.ecs .ecs-appbtn__icon svg{width:22px;height:22px;fill:currentColor;display:block;}
.ecs .ecs-appbtn__txt{display:flex;flex-direction:column;gap:2px;text-align:left;}
.ecs .ecs-appbtn__small{
  font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;
}
.ecs .ecs-appbtn__big{
  font-size:14px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}

/* --- social ------------------------------------------------------------- */
.ecs .ecs-social{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.ecs .ecs-social__link{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
  color:var(--ink);text-decoration:none;
  border:1px solid transparent;background:transparent;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s ease;
}
.ecs .ecs-social__link svg{
  width:18px;height:18px;display:block;
  fill:currentColor;   /* one colour control repaints every icon */
}
.ecs .ecs-social__link i{line-height:1;}
.ecs .ecs-social__link:hover{opacity:.65;}

.ecs .ecs-social--circle .ecs-social__link,
.ecs .ecs-social--square .ecs-social__link{
  width:40px;height:40px;border-color:var(--line);
}
.ecs .ecs-social--circle .ecs-social__link{border-radius:50%;}
.ecs .ecs-social--circle .ecs-social__link:hover,
.ecs .ecs-social--square .ecs-social__link:hover{
  opacity:1;background:var(--ink);color:var(--paper);border-color:var(--ink);
}

/* bottom-bar placement */
.ecs .footer__apps-bar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
  gap:20px;padding-bottom:24px;
}
.ecs .footer__apps-bar .ecs-apps{
  flex-direction:row;align-items:center;flex-wrap:wrap;gap:20px;margin-top:0;
}
@media (max-width:600px){
  .ecs .footer__apps-bar .ecs-apps{flex-direction:column;align-items:flex-start;}
  .ecs .ecs-apps__row{width:100%;}
  .ecs .ecs-appbtn{flex:1 1 auto;justify-content:center;}
}

/* ===========================================================================
   HOME - NEXT EXPERIENCE
   A standing card for the next trip. Three layouts: a wide band with the
   image beside the text, an overlay with the text on the photo, and a
   compact card with no image at all.
   =========================================================================== */
.ecs .ecs-next{
  border:1px solid var(--line);
  background:var(--chalk);
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr);
}
.ecs .ecs-next__media{min-width:0;order:-1;}          /* image first on mobile */
.ecs .ecs-next__media .ph,
.ecs .ecs-next__media img{
  width:100%;height:100%;min-height:220px;
  aspect-ratio:16/10;object-fit:cover;display:block;border:0;
}
.ecs .ecs-next__body{
  min-width:0;
  padding:clamp(26px,3.2vw,44px) clamp(22px,2.6vw,40px);
  display:flex;flex-direction:column;justify-content:center;
}
.ecs .ecs-next__eyebrow{margin-bottom:14px;}
.ecs .ecs-next__title{
  margin:0;font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.035em;line-height:.94;
  font-size:clamp(1.6rem,3.6vw,2.75rem);
}
.ecs .ecs-next__flag{margin-right:.35em;font-style:normal;}
.ecs .ecs-next__dates{
  margin-top:12px;font-family:var(--body);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.ecs .ecs-next__blurb{margin-top:16px;color:var(--muted);max-width:52ch;}
.ecs .ecs-next__badge{
  align-self:flex-start;margin-top:18px;padding:6px 12px;
  border:1px solid var(--ink);
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.ecs .ecs-next__actions{margin-top:26px;}
.ecs .ecs-next__btn{white-space:nowrap;}

/* ---- wide band ---- */
@media (min-width:860px){
  .ecs .ecs-next--band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;}
  .ecs .ecs-next--band .ecs-next__media{order:0;}
  .ecs .ecs-next--band.ecs-next--left  .ecs-next__media{order:1;}
  .ecs .ecs-next--band.ecs-next--left  .ecs-next__body {order:2;}
  .ecs .ecs-next--band.ecs-next--right .ecs-next__body {order:1;}
  .ecs .ecs-next--band.ecs-next--right .ecs-next__media{order:2;}
  .ecs .ecs-next--band .ecs-next__media .ph,
  .ecs .ecs-next--band .ecs-next__media img{aspect-ratio:auto;height:100%;min-height:340px;}
}

/* ---- overlay: text sits on the photo ---- */
.ecs .ecs-next--overlay{position:relative;grid-template-columns:minmax(0,1fr);border:0;}
.ecs .ecs-next--overlay .ecs-next__media{
  position:absolute;inset:0;order:0;z-index:0;
}
.ecs .ecs-next--overlay .ecs-next__media .ph,
.ecs .ecs-next--overlay .ecs-next__media img{
  height:100%;aspect-ratio:auto;min-height:0;
}
.ecs .ecs-next--overlay::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.82) 100%);
}
.ecs .ecs-next--overlay .ecs-next__body{
  position:relative;z-index:2;min-height:clamp(300px,34vw,460px);
  justify-content:flex-end;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.ecs .ecs-next--overlay .ecs-next__eyebrow,
.ecs .ecs-next--overlay .ecs-next__title,
.ecs .ecs-next--overlay .ecs-next__dates,
.ecs .ecs-next--overlay .ecs-next__blurb{color:#fff;}
.ecs .ecs-next--overlay .ecs-next__eyebrow{opacity:1;text-shadow:0 1px 4px rgba(0,0,0,.85);}
.ecs .ecs-next--overlay .ecs-next__badge{border-color:#fff;color:#fff;
  background:rgba(0,0,0,.35);}
.ecs .ecs-next--overlay .ecs-next__btn{background:#fff;color:#000;border-color:#fff;}
.ecs .ecs-next--overlay .ecs-next__btn:hover{background:#d9d9d9;border-color:#d9d9d9;}

/* ---- compact ---- */
.ecs .ecs-next--compact{grid-template-columns:minmax(0,1fr);}

@media (max-width:520px){
  .ecs .ecs-next__actions .btn{width:100%;white-space:normal;}
  .ecs .ecs-next__media .ph,
  .ecs .ecs-next__media img{aspect-ratio:4/3;}
}

/* the hidden attribute must win over any display rule above */
.ecs [hidden]{display:none !important;}

/* On a short card the overlay gradient has little room to build up, so the
   eyebrow ends up over the brightest part of the photo. Give the text block
   its own panel — the gradient then only has to soften the edge. */
.ecs .ecs-next--overlay .ecs-next__body{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 28%,rgba(0,0,0,.8) 100%);
}
@media (max-width:600px){
  .ecs .ecs-next--overlay .ecs-next__body{
    background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.72) 22%,rgba(0,0,0,.88) 100%);
    min-height:340px;
  }
}

/* ---------------------------------------------------------------------------
   TOP BAR — repeatable groups
   Three groups sit on one row; each collapses gracefully and the whole bar
   wraps rather than overflowing once the items no longer fit.
   --------------------------------------------------------------------------- */
.ecs .topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px 24px;
}
.ecs .topbar__group{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-width:0;
}
.ecs .topbar__left{justify-content:flex-start;}
.ecs .topbar__center{justify-content:center;}
.ecs .topbar__right{justify-content:flex-end;}
.ecs .topbar__group:empty{display:none;}
.ecs .topbar__item{
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;line-height:1;white-space:nowrap;
  transition:opacity .16s ease;
}
.ecs .topbar a.topbar__item:hover{opacity:.7;}
.ecs .topbar__item i{font-size:14px;line-height:1;}
.ecs .topbar__item svg{width:14px;height:14px;fill:currentColor;display:block;}
.ecs .topbar__note{white-space:nowrap;}

@media (max-width:899px){
  .ecs .topbar__inner{justify-content:center;}
  .ecs .topbar__group{justify-content:center;}
}
@media (max-width:560px){
  .ecs .topbar__inner{gap:6px 16px;}
  .ecs .topbar__group{gap:12px;}
  .ecs .topbar__note{display:none;}   /* the icons still say it */
}

/* ===========================================================================
   HOME - OUR TEAM
   Cards with the bio revealed on hover. Touch devices have no hover, so
   below 900px the bio sits under the name instead of over the photo.
   =========================================================================== */
.ecs .ecs-team__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
}
.ecs .ecs-team__card{
  min-width:0;background:transparent;border:0;
  display:flex;flex-direction:column;
}
.ecs .ecs-team__photo{
  position:relative;overflow:hidden;aspect-ratio:3/4;
  background:var(--chalk);border:1px solid var(--line);
}
.ecs .ecs-team__photo .ecs-media-img,
.ecs .ecs-team__photo .ecs-media-ph{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border:0;
  transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s ease;
}
.ecs .ecs-team__grid.is-gray .ecs-media-img{filter:grayscale(1) contrast(1.04);}
.ecs .ecs-team__card:hover .ecs-media-img,
.ecs .ecs-team__card:focus-within .ecs-media-img{filter:grayscale(0);}

/* the bio panel */
.ecs .ecs-team__panel{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,1.9vw,26px);
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.86) 55%,rgba(0,0,0,.94) 100%);
  color:#fff;
}
.ecs .ecs-team__bio{
  margin:0;font-size:clamp(.82rem,.95vw,.92rem);line-height:1.5;
  color:rgba(255,255,255,.9);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;
  overflow:hidden;
}
.ecs .ecs-team__link{
  margin-top:14px;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:#fff;
  border-bottom:1px solid #fff;padding-bottom:4px;align-self:flex-start;
}

.ecs .ecs-team__meta{padding-top:16px;}
.ecs .ecs-team__role{
  display:block;font-family:var(--body);font-size:10px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:8px;
}
.ecs .ecs-team__name{
  margin:0;font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.03em;line-height:.96;
  font-size:clamp(1.1rem,1.7vw,1.4rem);
}

/* ---- hover: bio slides up ---- */
@media (min-width:900px) and (hover:hover){
  .ecs .ecs-team--slide .ecs-team__panel{
    transform:translateY(101%);
    transition:transform .55s cubic-bezier(.2,.7,.3,1);
  }
  .ecs .ecs-team--slide .ecs-team__card:hover .ecs-team__panel,
  .ecs .ecs-team--slide .ecs-team__card:focus-within .ecs-team__panel{transform:none;}

  /* ---- hover: bio fades in ---- */
  .ecs .ecs-team--fade .ecs-team__panel{
    opacity:0;transition:opacity .45s ease;
  }
  .ecs .ecs-team--fade .ecs-team__card:hover .ecs-team__panel,
  .ecs .ecs-team--fade .ecs-team__card:focus-within .ecs-team__panel{opacity:1;}

  /* ---- zoom only: the bio lives under the photo ---- */
  .ecs .ecs-team--zoom .ecs-team__panel,
  .ecs .ecs-team--none .ecs-team__panel{
    position:static;background:none;color:inherit;padding:14px 0 0;
  }
  .ecs .ecs-team--zoom .ecs-team__bio,
  .ecs .ecs-team--none .ecs-team__bio{color:var(--muted);}
  .ecs .ecs-team--zoom .ecs-team__link,
  .ecs .ecs-team--none .ecs-team__link{color:var(--ink);border-bottom-color:var(--ink);}

  /* the photo lift, shared by slide / fade / zoom */
  .ecs .ecs-team--slide .ecs-team__card:hover .ecs-media-img,
  .ecs .ecs-team--fade  .ecs-team__card:hover .ecs-media-img,
  .ecs .ecs-team--zoom  .ecs-team__card:hover .ecs-media-img{transform:scale(1.06);}
}

/* ---- no hover available (touch) or narrow screens: bio sits below ---- */
@media (max-width:899px), (hover:none){
  .ecs .ecs-team__panel{
    position:static;background:none;color:inherit;
    padding:12px 0 0;
  }
  .ecs .ecs-team__bio{color:var(--muted);}
  .ecs .ecs-team__link{color:var(--ink);border-bottom-color:var(--ink);}
  .ecs .ecs-team__card{border-bottom:1px solid var(--line);padding-bottom:24px;}
}

@media (max-width:899px){
  .ecs .ecs-team__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .ecs .ecs-team__grid{grid-template-columns:minmax(0,1fr);gap:28px;}
  .ecs .ecs-team__photo{aspect-ratio:4/3;}
  .ecs .ecs-team__name{font-size:1.25rem;}
}

.ecs .ecs-team__card:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}
@media (prefers-reduced-motion:reduce){
  .ecs .ecs-team__panel,
  .ecs .ecs-team__photo .ecs-media-img{transition:none !important;}
}

/* ---------------------------------------------------------------------------
   OUR TEAM — MOBILE SLIDER
   CSS scroll-snap rather than a JS carousel: native momentum scrolling, works
   with a finger the way people expect, and keeps working if the script fails.
   Desktop is untouched — the slider rules only apply below the tablet width.
   --------------------------------------------------------------------------- */
@media (max-width:899px){
  .ecs .ecs-team__grid.is-slider{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-padding-left:20px;
    gap:14px;
    /* break out of the page gutter so the first card starts at the edge */
    margin-left:-20px;margin-right:-20px;
    padding:0 20px 4px;
    scrollbar-width:none;
  }
  .ecs .ecs-team__grid.is-slider::-webkit-scrollbar{display:none;}

  .ecs .ecs-team__grid.is-slider > .ecs-team__card{
    flex:0 0 78%;
    scroll-snap-align:start;
    border-bottom:0;padding-bottom:0;
  }
  /* the last card needs room to snap to the start of the viewport */
  .ecs .ecs-team__grid.is-slider > .ecs-team__card:last-child{
    margin-right:calc(22% - 34px);
  }

  .ecs .ecs-team__dots{
    display:flex;justify-content:center;gap:8px;margin-top:22px;
  }
  .ecs .ecs-team__dot{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:var(--ink);opacity:.22;cursor:pointer;
    transition:opacity .25s ease,transform .25s ease;
  }
  .ecs .ecs-team__dot.is-on{opacity:1;transform:scale(1.35);}
}
/* dots are a mobile affordance only */
@media (min-width:900px){
  .ecs .ecs-team__dots{display:none;}
}

/* ---------------------------------------------------------------------------
   NAV — SECOND HEADER BUTTON
   Two buttons plus eight menu items plus the logo is a wide row, so the
   buttons are allowed to shrink their padding before the drawer takes over.
   --------------------------------------------------------------------------- */
.ecs .nav__right{display:flex;align-items:center;gap:10px;}
.ecs .nav__right .btn{white-space:nowrap;}
.ecs .nav__right .ecs-nav-btn2{display:inline-flex;}

/* Eight menu items plus a logo plus ONE button already fills the row at
   1240px. A second button needs about 70px more than exists there, so when
   one is present the inline menu waits until 1360px and the drawer covers
   the gap. Between 1360 and 1560 the row is tightened rather than wrapped. */
@media (min-width:1240px) and (max-width:1359px){
  .ecs .nav__inner:has(.ecs-nav-btn2) .nav__links{display:none;}
  .ecs .nav__inner:has(.ecs-nav-btn2) .nav__toggle{display:inline-flex;}
}
@media (min-width:1240px) and (max-width:1560px){
  .ecs .nav__right .btn{padding-left:18px;padding-right:18px;letter-spacing:.12em;}
  .ecs .nav__links{gap:12px;}
  .ecs .nav__links a{font-size:10px;}
}

/* the drawer stacks them full width */
.ecs .drawer .btn{width:100%;}
.ecs .drawer .btn + .btn{margin-top:10px;}

/* Logo + two buttons + the burger do not fit until about 700px, so below
   that the second button lives in the drawer only. The "Show Second Button"
   control can still hide it at any breakpoint on top of this. */
@media (max-width:739px){
  .ecs .nav__right .ecs-nav-btn2{display:none;}
}

/* Fallback for browsers without :has() — the drawer button stays available
   so the menu is never unreachable, it just also shows the inline links. */
@supports not selector(:has(*)){
  @media (min-width:1240px) and (max-width:1359px){
    .ecs .nav__links{gap:8px;}
    .ecs .nav__links a{font-size:9.5px;letter-spacing:.02em;}
    .ecs .nav__right .btn{padding-left:14px;padding-right:14px;font-size:9px;}
  }
}

/* The header must not depend on how long the button labels are. Let the
   buttons shrink and ellipsis rather than pushing the row wider than the
   screen, and let the whole right group cap itself. */
.ecs .nav__right{min-width:0;flex-shrink:1;}
.ecs .nav__right .btn{
  min-width:0;flex-shrink:1;
  overflow:hidden;text-overflow:ellipsis;
}
.ecs .nav__inner{min-width:0;}
.ecs .nav__inner > .logo{flex:0 0 auto;}
.ecs .nav__links{min-width:0;flex-shrink:1;overflow:hidden;}

/* ---------------------------------------------------------------------------
   FOOTER — BUTTON ROW
   Wraps rather than overflowing, and the buttons can shrink so a long label
   cannot widen the footer column.
   --------------------------------------------------------------------------- */
.ecs .footer__ctas{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:stretch;
}
.ecs .footer__ctas .btn{
  min-width:0;flex-shrink:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ecs .footer__ctas .ecs-foot-btn2{display:inline-flex;}

@media (max-width:520px){
  .ecs .footer__ctas{flex-direction:column;}
  .ecs .footer__ctas .btn{width:100%;white-space:normal;}
}

/* The footer brand column is about 400px wide, and two CTA buttons at their
   normal size need roughly 455px, so "Side by side" always wrapped. When a
   second button is present the pair is tightened and allowed to share the
   row evenly; each still keeps its label on one line. */
.ecs .footer__ctas:has(.ecs-foot-btn2){flex-wrap:nowrap;}
.ecs .footer__ctas:has(.ecs-foot-btn2) .btn{
  flex:1 1 0;
  padding-left:12px;padding-right:12px;
  font-size:9px;letter-spacing:.1em;
  text-align:center;justify-content:center;
}

/* On a 320px screen "Book Your Free First Session" needs two lines at the
   normal footer size. Tighten it there so it stays on one. */
@media (max-width:360px){
  .ecs .footer__ctas .btn{
    font-size:9px;letter-spacing:.08em;
    padding-left:12px;padding-right:12px;
  }
}

/* ===========================================================================
   HIGHLIGHTS — MOBILE SLIDER
   Below 900px the columns become one slide at a time. The background photos
   are already stacked and cross-faded by [aria-current], so the slider only
   has to move the cards and keep aria-current in step — the photo change
   comes for free and stays smooth.
   =========================================================================== */
@media (max-width:899px){
  .ecs .hwpb.is-mslider{padding-bottom:clamp(56px,12vw,80px);}

  .ecs .hwpb.is-mslider .hwpb__list{
    display:flex;
    grid-template-columns:none;
    gap:var(--hl-slide-gap,14px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-behavior:smooth;
    scrollbar-width:none;
    margin-left:-20px;margin-right:-20px;
    padding-left:20px;padding-right:20px;
  }
  .ecs .hwpb.is-mslider .hwpb__list::-webkit-scrollbar{display:none;}

  .ecs .hwpb.is-mslider .hwpb__item{
    flex:0 0 var(--hl-slide-w,88%);
    scroll-snap-align:center;
    padding-right:0;
  }
  /* the first and last slide still need to centre properly */
  .ecs .hwpb.is-mslider .hwpb__list::before,
  .ecs .hwpb.is-mslider .hwpb__list::after{
    content:"";flex:0 0 calc((100% - var(--hl-slide-w,88%)) / 2 - 20px);
  }

  /* one card at a time: it always reads as the active card */
  .ecs .hwpb.is-mslider .hwpb__info{
    background:var(--paper);
    color:var(--ink);
    border-top:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    text-shadow:none;
    padding:22px 20px 26px;
  }
  .ecs .hwpb.is-mslider .hwpb__title{color:var(--ink);}
  .ecs .hwpb.is-mslider .hwpb__text{
    color:var(--muted);
    max-height:none;opacity:1;overflow:visible;margin-top:10px;
  }
  .ecs .hwpb.is-mslider .hwpb__link{
    opacity:1;transform:none;pointer-events:auto;color:var(--ink);
  }

  .ecs .hwpb__dots{
    position:relative;z-index:2;
    display:flex;justify-content:center;gap:8px;
    width:100%;margin-top:18px;
  }
  .ecs .hwpb__dot{
    width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:#fff;opacity:.35;cursor:pointer;
    transition:opacity .25s ease,transform .25s ease;
  }
  .ecs .hwpb__dot.is-on{opacity:1;transform:scale(1.35);}
}

@media (min-width:900px){
  .ecs .hwpb__dots{display:none;}
}

/* Auto-advance is motion the visitor did not ask for, so it is switched off
   entirely when the system asks for reduced motion. */
@media (prefers-reduced-motion:reduce){
  .ecs .hwpb.is-mslider .hwpb__list{scroll-behavior:auto;}
}

/* The section scrim is a light wash, which is fine over a mid-tone photo but
   leaves white heading text at about 2:1 over a bright one. The heading block
   gets its own gradient so legibility does not depend on the photo chosen. */
/* The heading needs its own stacking context. Its ::before sits at z-index:-1
   so it can slide behind the heading text — without isolation that -1 would
   drop it behind the background stage as well and the wash would disappear. */
.ecs .hwpb__head{
  position:relative;z-index:2;isolation:isolate;
}
.ecs .hwpb__head::before{
  content:"";position:absolute;z-index:-1;
  left:50%;transform:translateX(-50%);
  top:-24px;bottom:-24px;width:100vw;
  background:linear-gradient(180deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.55) 60%,
    rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.ecs .hwpb__heading,
.ecs .hwpb__head .eyebrow{text-shadow:0 1px 6px rgba(0,0,0,.8);}

/* ---------------------------------------------------------------------------
   HIGHLIGHTS MOBILE SLIDER — CENTRED
   The desktop rules push the heading to the top with margin-bottom:auto and
   hold a 640px min-height, which on a phone left the card stranded high with
   a large empty photo below it. In slider mode the whole stack (heading,
   card, dots) is centred as one group and the section hugs its content.
   --------------------------------------------------------------------------- */
@media (max-width:899px){
  .ecs .hwpb.is-mslider{
    justify-content:center;
    align-items:center;
    min-height:0;
    padding-top:clamp(40px,9vw,64px);
    padding-bottom:clamp(32px,7vw,52px);
  }
  /* cancel the desktop push in every vertical-position setting */
  .ecs .hwpb.is-mslider.vpos-top,
  .ecs .hwpb.is-mslider.vpos-middle,
  .ecs .hwpb.is-mslider.vpos-bottom{align-items:center;}
  .ecs .hwpb.is-mslider .hwpb__head,
  .ecs .hwpb.is-mslider.vpos-top .hwpb__head,
  .ecs .hwpb.is-mslider.vpos-middle .hwpb__head,
  .ecs .hwpb.is-mslider.vpos-bottom .hwpb__head{
    margin-bottom:clamp(20px,4vw,32px);
    padding-bottom:0;
    text-align:center;
  }
  .ecs .hwpb.is-mslider.vpos-top .hwpb__list,
  .ecs .hwpb.is-mslider.vpos-middle .hwpb__list,
  .ecs .hwpb.is-mslider .hwpb__list{margin-bottom:0;}

  /* the heading scrim follows the centred block */
  .ecs .hwpb.is-mslider .hwpb__head::before{top:-20px;bottom:-20px;}

  .ecs .hwpb.is-mslider .hwpb__dots{margin-top:16px;}

  /* the card reads as one tidy block rather than a full-bleed strip */
  .ecs .hwpb.is-mslider .hwpb__info{
    text-align:left;
    border-radius:2px;
  }
}

/* ===========================================================================
   v2.24.0 — DETAIL ROW LAYOUT (.item)

   `.item` is the alternating media / copy row used by five widgets:
     Performance - Classes, Recovery - Services, Sports - List,
     Travel - Categories and Trip - Overview.

   It shipped as a 5fr / 7fr split, which reads as a cramped 41% image next to
   a 58% column of copy. The base is now an even 50 / 50 from 900px up, and the
   "Row Layout" section on each widget writes one of the classes below onto the
   Elementor wrapper to pick a different split, change the vertical alignment
   or flip which side the photo starts on.

   These are static classes rather than Elementor-generated selectors on
   purpose: generated CSS can be enqueued before or after this stylesheet
   depending on cache state, and a ratio that silently reverts is worse than
   no control at all. Everything is scoped `.ecs-item* .ecs .item`, so nothing
   here can reach a widget that does not opt in.
   =========================================================================== */
@media (min-width:900px){

  /* --- media / copy split ------------------------------------------------ */
  .ecs .item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

  .ecs-itemratio-3367 .ecs .item{grid-template-columns:minmax(0,4fr)  minmax(0,8fr);}
  .ecs-itemratio-4060 .ecs .item{grid-template-columns:minmax(0,5fr)  minmax(0,7fr);}
  .ecs-itemratio-4555 .ecs .item{grid-template-columns:minmax(0,9fr)  minmax(0,11fr);}
  .ecs-itemratio-5545 .ecs .item{grid-template-columns:minmax(0,11fr) minmax(0,9fr);}
  .ecs-itemratio-6040 .ecs .item{grid-template-columns:minmax(0,7fr)  minmax(0,5fr);}
  .ecs-itemratio-6733 .ecs .item{grid-template-columns:minmax(0,8fr)  minmax(0,4fr);}

  /* --- which side the photo starts on ------------------------------------ */
  .ecs-itemside-right .ecs .item .item__media{order:2;}
  .ecs-itemside-right .ecs .item--flip .item__media{order:0;}

  /* --- vertical alignment of the two columns ----------------------------- */
  .ecs-itemalign-center .ecs .item{align-items:center;}
  .ecs-itemalign-end    .ecs .item{align-items:end;}

  /* Photo fills the full height of the row instead of running to its own
     natural height. `.item__media` becomes the flex parent so the image has a
     definite box to stretch into — `height:100%` on a grid child alone leaves
     the image with no resolved height in Safari. */
  /* The photo is taken out of flow and pinned to its column, so the row height
     is set by the copy alone and the image is cropped to match it. Letting the
     image stay in flow only worked when it happened to be shorter than the
     copy — a portrait shot drove the row to its own full height and the split
     looked worse than before. `min-height` is the floor for a row with very
     little copy. */
  .ecs-itemalign-fill .ecs .item{align-items:stretch;}
  .ecs-itemalign-fill .ecs .item .item__media{
    position:relative;overflow:hidden;min-height:260px;
  }
  .ecs-itemalign-fill .ecs .item .item__media > .ecs-media-img{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;aspect-ratio:auto;
  }
  /* the placeholder keeps its own box — it only shows before a photo is
     picked, and pinning it makes the editor preview unreadable */
  .ecs-itemalign-fill .ecs .item .item__media > .ph{width:100%;}
}