/* =====================================================================
   ILO STUDIOS brand layer (Brand Guidelines v01, Sep 2025 — Figma HANDBOOK)
   Loaded AFTER site.css / sub.css. Colours, type, gradients, grain only;
   layout stays in site.css. Remove this file's <link> to roll back.
   Web fallback fonts per guide: Instrument Serif (titles) + Be Vietnam Pro (body).
   ===================================================================== */
:root{
  /* base */
  --ember:#0E0400;        /* EMBER NIGHT — dominant */
  --mist:#F5F5F5;         /* STEAM MIST — paired */
  /* warm spectrum · sauna & breathwork */
  --cedar:#652001;        /* BURNT CEDAR */
  --pulse:#BF0707;        /* DEEP PULSE */
  --glow:#B63801;         /* SAUNA GLOW */
  --amber:#FFA427;        /* AMBER HEAT */
  /* cool spectrum · ice bath */
  --haze:#9BA0A8;         /* FROZEN HAZE */
  /* raised ember surfaces (cards / panels) */
  --ember-2:#1A0B05;
  --ember-3:#26130A;

  /* corporate gradients (guide p.17) */
  --g-dusk:linear-gradient(90deg,var(--amber) 0%,var(--glow) 35%,var(--cedar) 68%,var(--ember) 100%);
  --g-heat:linear-gradient(100deg,var(--amber) 0%,var(--glow) 62%,var(--pulse) 100%);
  --g-sun:linear-gradient(90deg,var(--amber) 0%,#F59345 50%,#EE7A66 100%);
  --g-ice:linear-gradient(90deg,var(--haze) 0%,#6E717A 55%,var(--ember) 100%);

  /* remap site.css tokens */
  --ink:var(--ember);
  --fg:var(--mist);
  --panel:var(--ember-2);
  --cream:var(--mist);
  --cream-90:rgba(245,245,245,.94);
  --mono:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
}

body{background:var(--ember);font-weight:400}

/* grain & texture — subtle analog noise over everything */
body::after{content:"";position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Type: H1/H2 = serif, Title Case, tight leading ---------- */
.hero h1,.intro h2,.offer h2,.h-sec,.classes h2,.cgroup__name,.notif h2,
.phero h1,.split h2,.prose h2,.cta h2,.ptitle h2,.xhead h2,
.card__price,.pcard .price,.temp b{
  font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:0}
/* Instrument Serif is already tight by design — the guide's −2…−4% is for VC Garamond Condensed.
   H1 gets a hair of negative tracking, H2 and prices sit at 0 (guide: H2 = 0 to +2%). */
.hero h1,.phero h1{letter-spacing:-.01em}
.card__price small,.pcard .price small{font-family:var(--mono);font-size:13px;line-height:18px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-left:14px;vertical-align:middle;white-space:nowrap}
.hero h1{font-size:88px;line-height:.9}
.intro h2,.offer h2{font-size:96px;line-height:.88}
.h-sec{font-size:56px;line-height:1}
.classes h2{font-size:72px;line-height:.95}
.cgroup__name{font-size:40px;line-height:1.05}
.card__price{font-size:80px;line-height:1}
.notif h2{font-size:32px;line-height:1.05}
.phero h1{font-size:88px;line-height:.92}
.split h2,.prose h2,.ptitle h2,.xhead h2{font-size:52px;line-height:1}
.cta h2{font-size:72px;line-height:.95}
.pcard .price,.temp b{font-size:64px;line-height:1}
/* body copy: Be Vietnam Pro Regular, 130% leading, -2% tracking */
.sub,.intro__r p,.prac__det p,.card dd,.acc__body,.classes__intro,.prose p{font-weight:400;letter-spacing:-.02em;line-height:1.3}
.scard__d p,.guide__over p,.tslide__q p,.card__fine,.news__l,.news__info,.wa__log{letter-spacing:-.01em}
/* small caps labels stay sans, a touch of tracking */
.hdr__nav a,.btn,.card__lbl,.card dt,.offer__k,.news__links,.acc__meta,.guide__role{letter-spacing:.04em}

@media (max-width:1023px){
  .intro h2,.offer h2{font-size:72px}
  .hero h1,.phero h1{font-size:68px}
  .classes h2,.cta h2{font-size:56px}
}
@media (max-width:767px){
  .hero h1,.phero h1{font-size:52px;line-height:.95}
  .intro h2,.offer h2{font-size:56px;line-height:.92}
  .h-sec{font-size:42px}
  .classes h2,.cta h2{font-size:44px}
  .cgroup__name{font-size:32px}
  .card__price{font-size:60px}
  .split h2,.prose h2,.ptitle h2,.xhead h2{font-size:40px}
  .pcard .price,.temp b{font-size:52px}
  .notif h2{font-size:22px;line-height:1.1}
}

/* ---------- Buttons: Steam Mist on Ember, Amber Heat on hover ---------- */
.btn,.btn--solid,.classes .btn{background:var(--mist);color:var(--ember);border-color:var(--mist);font-weight:500}
.btn:hover,.classes .btn:hover{background:var(--amber);border-color:var(--amber);color:var(--ember)}
.pcard--feature .btn{background:var(--ember);color:var(--mist);border-color:var(--ember)}
.pcard--feature .btn:hover{background:var(--glow);border-color:var(--glow);color:var(--mist)}

/* ---------- Surfaces ---------- */
.mmenu{background:linear-gradient(var(--ember),rgba(14,4,0,.96))}
.hero::before{background:rgba(14,4,0,.18)}
.card,.temp,.vs__col,.pcard{background:var(--ember-2)}
.vs__col--us,.pcard--feature{background:var(--mist);color:var(--ember)}
.tslide{background-color:var(--ember-2)}
.arrow:hover{color:var(--ember)}
.msg--me,.chip--wa{color:var(--ember)}
.wa__panel{background:#140701}
.msg--bot{background:var(--ember-3)}
.sess__spots,.tag{color:var(--amber)}
.tag--full{color:var(--fg-60)}

/* guided classes panel: ember with a warm dusk glow at the foot */
.classes{background:
  radial-gradient(120% 60% at 85% 115%,rgba(182,56,1,.55) 0%,rgba(101,32,1,.35) 35%,rgba(14,4,0,0) 70%),
  var(--ember-2)}

/* intro-pack popup: Steam Mist card, ember text */
.notif__box{color:var(--ember)}

/* newsletter / footer band: the "dusk" corporate gradient, vertical */
.news{background:linear-gradient(180deg,var(--ember) 0%,var(--cedar) 55%,var(--glow) 85%,#D9631A 100%)}
.news__form input{border-color:rgba(245,245,245,.55)}
.news__form input::placeholder{color:rgba(245,245,245,.75)}
.news__info{color:rgba(245,245,245,.8)}

/* section rules / hairlines warm up slightly */
:root{--line:rgba(245,245,245,.3)}

/* ice-bath page uses the cool spectrum (guide: Frozen Haze = ice) */
.subpage--ice-baths-barcelona .news{background:linear-gradient(180deg,var(--ember) 0%,#2A2C31 50%,#6E717A 85%,var(--haze) 100%)}
.subpage--ice-baths-barcelona .sess__spots,.subpage--ice-baths-barcelona .tag{color:var(--haze)}

/* checkout panel: Steam Mist chrome, ember ink (Momence iframe stays white) */
.co__panel{background:var(--mist);color:var(--ember)}
.co__opts button{color:var(--ember)}
.co__opts button[aria-checked="true"]{border-color:var(--ember);background:#fff;box-shadow:inset 0 0 0 1px var(--ember)}
.co__opts i{color:var(--glow)}

/* logo (symbol + wordmark) — sizing for the combined asset */
.hdr__logo img{height:44px}
.mbar a img{height:32px;width:auto}

/* 10/13: nav Book button (desktop bar, mobile top bar, mobile menu); "How it works" removed from nav */
.hdr__nav a.hdr__book{display:inline-flex;align-items:center;min-height:40px;padding:10px 22px;font-size:13px;line-height:1;letter-spacing:.12em;color:#000;border-radius:8px}
.hdr__nav a.hdr__book:hover{color:#000}
.mbar__r{display:flex;align-items:center;gap:10px}
.mbar a.mbar__book{display:inline-flex;align-items:center;min-height:36px;padding:8px 16px;font-size:12px;line-height:1;letter-spacing:.12em;color:#000;border-radius:8px}
.mmenu a.mmenu__book{display:inline-flex;align-items:center;align-self:flex-start;margin:8px 32px 0;padding:14px 28px;font-size:14px;line-height:1;letter-spacing:.12em;color:#000;border-radius:8px}

/* 10/13 footer option 10 "Minimal": one Book button, Practice/Studio/Help lists, line email field, colophon info */
.news.ft{padding:48px 24px 24px;background:linear-gradient(180deg,var(--ember) 0%,var(--ember) 40%,var(--cedar) 100%);color:var(--mist)}
.subpage--ice-baths-barcelona .news.ft{background:linear-gradient(180deg,var(--ember) 0%,var(--ember) 40%,#2A2C31 100%)}
.ft__in{max-width:1380px;margin:0 auto}
.ft__sr{position:absolute;left:-9999px}
.ft .ft__book{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:8px;font-size:13px;line-height:1;letter-spacing:.12em;text-transform:uppercase}
.ft__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.ft__lbl{margin-bottom:2px;font-size:11px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:rgba(245,245,245,.55)}
.ft__lnk{display:flex;align-items:center;min-height:44px;font-size:14px;line-height:1.15;letter-spacing:-.02em;color:rgba(245,245,245,.82);transition:opacity .2s}
.ft__lnk:hover{opacity:.6}
.ft__nl{margin-top:40px}
.ft__nlh{font-size:14px;font-weight:500;letter-spacing:-.02em}
.ft__nlp{margin-top:4px;font-size:13px;line-height:1.3;letter-spacing:-.02em;color:rgba(245,245,245,.68)}
.ft__form{display:flex;margin-top:10px;border-bottom:1px solid rgba(245,245,245,.5)}
.ft__form input{flex:1;min-width:0;height:48px;padding:0;background:transparent;border:0;border-radius:0;color:var(--mist);font-size:15px;letter-spacing:-.02em}
.ft__form input::placeholder{color:rgba(245,245,245,.68)}
.ft__go{display:flex;align-items:center;gap:8px;min-height:48px;padding-left:12px;background:none;border:0;color:var(--mist);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.ft__go:hover{color:var(--amber)}
.ft__info{margin-top:36px;font-size:13px;line-height:1.3;letter-spacing:-.02em;color:rgba(245,245,245,.68)}
.ft__info p{margin:2px 0 0}
.ft__info .ft__lnk{font-size:13px}
.ft__ir{display:flex;flex-wrap:wrap;column-gap:20px;margin-top:4px}
.ft__legal{display:flex;align-items:center;min-height:56px;margin-top:12px;padding-right:88px;border-top:1px solid rgba(245,245,245,.18);font-size:12px;letter-spacing:.04em;color:rgba(245,245,245,.55)}
@media (min-width:1024px){
  .news.ft{padding:80px 56px 24px}
  .ft__in{display:grid;grid-template-columns:300px 1.2fr 1fr;column-gap:72px;align-items:start}
  .ft .ft__book{grid-column:1;grid-row:1}
  .ft__grid{grid-column:2;grid-row:1/3;margin-top:0}
  .ft__grid .ft__lnk{font-size:15px}
  .ft__nl{grid-column:3;grid-row:1/3;margin-top:0}
  .ft__info{grid-column:1;grid-row:2;margin-top:24px}
  .ft__legal{grid-column:1/-1;margin-top:72px;padding-right:0}
}
@media (min-width:768px) and (max-width:1023px){.ft__in{max-width:640px}}

/* 10/13 big full-width logo at the foot of the footer (Graza-style) */
.ft__legal{border-top:1px dashed rgba(245,245,245,.35)}
.ft__mark{grid-column:1/-1;margin-top:8px;padding-bottom:4px}
.ft__mark img{display:block;width:100%;height:auto}
.news.ft{padding-bottom:16px}
@media (max-width:767px){.ft__legal{padding-right:0}.ft__mark{margin-bottom:72px}}

/* 10/13 footer info = layout 5 "Serif address" */
.ft__st{font-family:var(--serif);font-weight:400;font-size:40px;line-height:.95;letter-spacing:0;color:var(--mist)}
.ft__city{margin-top:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,245,.6)}
.ft__hrs{margin:18px 0 0;font-size:14px;color:rgba(245,245,245,.82)}
.ft__hrs div{display:flex;gap:12px}
.ft__hrs dt{width:72px;color:rgba(245,245,245,.6)}
.ft__hrs dd{margin:0;font-variant-numeric:tabular-nums}
.ft__lk{margin-top:18px;border-top:1px solid rgba(245,245,245,.16)}
.ft__lk a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);border-bottom:1px solid rgba(245,245,245,.16);transition:color .2s}
.ft__lk a span{overflow-wrap:anywhere}
.ft__lk a svg{flex:none;transition:transform .2s}
.ft__lk a:hover{color:var(--amber)}
.ft__lk a:hover svg{transform:translateX(3px)}