/* ============================================================
 SCOLIOLIFE DESIGN SYSTEM
 Extracted from the approved homepage · 
 Companion to design.md. Every page loads this first.
 ============================================================ */

/* ---------- BRAND (theme-independent) ---------- */
:root{
  --orange:#F27D21;
  --brand-yellow:#F5AD1B;
  --grad:linear-gradient(135deg,#F27D21 0%,#F5AD1B 100%);
  --btn-ink:#1A0F06;            /* 9.76 on amber, 6.93 on orange. NEVER white. */

  /* type */
  --ff-display:'Instrument Serif',Georgia,serif;
  --ff-body:'Manrope',system-ui,-apple-system,sans-serif;
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;

  --fs-hero:clamp(2.6rem,4.6vw,4.8rem);
  --fs-h2:clamp(2.1rem,3.8vw,3.4rem);
  --fs-h3:clamp(1.5rem,2.8vw,2.2rem);
  --fs-h4:clamp(1.4rem,1.9vw,1.9rem);
  --fs-body:clamp(.95rem,1.1vw,1.05rem);
  --fs-stat:clamp(4.8rem,4.2vw,6.4rem);

  /* space */
  --gutter:clamp(1.25rem,3.4vw,3.4rem);
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem; --s-5:2.5rem; --s-6:4rem;

  /* radii */
  --r-sm:8px; --r-md:14px; --r-pill:999px; --r-full:50%;

  --dur:220ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- DARK (default) ---------- */
:root,
html[data-theme="dark"]{
  --void:#0D0E10;
  --coal:#141517;
  --display:#F0EFEC;   /* 16.79 on --void */
  --muted:#918F8B;     /*  5.98 on --void */
  --soft:#BAB8B3;
  --yellow:#F5AD1B;    /* 10.00 on --void */
  --cardbg:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.11);
  --glass:rgba(16,17,19,.66);
}

/* ---------- LIGHT ---------- */
/* --muted and --yellow were corrected on : the originals (#767A80 at 3.99
 and #C25F08 at 4.26) failed AA for normal text. Both new values are checked
 against BOTH the page background and white cards. Do not revert them. */
html[data-theme="light"]{
  --void:#F5F6F8;
  --coal:#FFFFFF;
  --display:#1E2226;   /* 14.80 on --void */
  --muted:#6E7177;     /*  4.53 on --void — was #767A80 (3.99, failed) */
  --soft:#484C52;
  --yellow:#B25707;    /*  4.56 on --void — was #C25F08 (4.26, failed) */
  --cardbg:rgba(255,255,255,.9);
  --line:rgba(0,0,0,.10);
  --glass:rgba(255,255,255,.85);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html{color-scheme:dark light}
html[data-theme="light"]{color-scheme:light}
body{
  margin:0;
  background:var(--void);
  color:var(--display);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* CJK glyph coverage — driven by the lang attribute, not by locale guesswork */
/* Every face switches, not only the body: headings keep the serif intent (a Mincho/Song face), the
   mono chips stop falling back to MS Gothic on Windows, and Windows/Android names sit in the stack so
   the fallback is chosen, not lucky. overflow-wrap:anywhere lets an email, phone number or URL inside
   CJK text break instead of pushing the page wider (CJK text already breaks between characters). */
:lang(ja){--ff-body:'Manrope','Hiragino Sans','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans JP','Noto Sans CJK JP',system-ui,sans-serif;
  --ff-display:'Instrument Serif','Hiragino Mincho ProN','Yu Mincho','Noto Serif JP','Noto Serif CJK JP',serif;
  --ff-mono:'JetBrains Mono','Hiragino Sans','Yu Gothic UI','Yu Gothic','Meiryo','Noto Sans JP',monospace;
  overflow-wrap:anywhere}
:lang(zh){--ff-body:'Manrope','PingFang SC','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC',system-ui,sans-serif;
  --ff-display:'Instrument Serif','Songti SC','SimSun','Noto Serif SC','Noto Serif CJK SC',serif;
  --ff-mono:'JetBrains Mono','PingFang SC','Microsoft YaHei','Noto Sans SC',monospace;
  overflow-wrap:anywhere}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:400;line-height:1.1;margin:0 0 var(--s-3)}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{margin:0 0 var(--s-3);max-width:68ch}   /* measure cap survives German */
a{color:var(--yellow)}

/* Images carry their own dimensions in markup. This stops the layout shift
   Google currently flags on 98% of the live site. */
img,video{max-width:100%;height:auto;display:block}

/* ---------- BUTTONS ---------- */
.btn,.cta{
  display:inline-block;
  font-family:var(--ff-body);
  font-weight:700;
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  padding:1.05rem 2rem;
  border-radius:var(--r-pill);
  background:var(--grad);
  color:var(--btn-ink);          /* dark on amber. NEVER white. */
  border:0;
  cursor:pointer;
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease);
  /* no fixed width — German and Japanese labels run long */
  white-space:normal;
  text-align:center;
}
.btn:hover,.cta:hover{transform:translateY(-1px);filter:brightness(1.05)}

.btn-ghost{
  background:transparent;
  color:var(--display);
  border:1px solid var(--line);
  padding:1.05rem 2rem;
  border-radius:var(--r-pill);
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}

/* ---------- LAYOUT ---------- */
.sl-band{position:relative;padding:var(--s-6) var(--gutter)}
.sl-band--center{display:flex;flex-direction:column;align-items:center;text-align:center}
.sl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:center}
@media (max-width:860px){
  .sl-split{grid-template-columns:1fr}
}
.sl-col{min-width:0}          /* min-width:0 or long German words force overflow */
.sl-flank{min-width:0;width:100%}

.card{
  background:var(--cardbg);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s-4);
}

.eyebrow{
  font-family:var(--ff-mono);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s-2);
}

.stats{display:flex;flex-wrap:wrap;gap:var(--s-5)}
.stat{min-width:0}
.stat .n{font-family:var(--ff-mono);font-size:var(--fs-stat);line-height:1;color:var(--yellow)}
.stat .l{color:var(--muted);font-size:.9rem}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- A11Y ---------- */
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   VISUAL LANGUAGE — ported from the approved homepage
   ------------------------------------------------------------
   The homepage is a scroll-scrubbed film: 291 frames with nine
   absolutely-positioned .layer decks cross-fading over it, every
   one of them opacity:0 / visibility:hidden until scroll.

   Interior pages must NOT do that. They have to be readable,
   deep-linkable and crawlable — the therapy page is his #2 page
   family and it has to rank. So these pages stay ordinary
   documents and inherit the LOOK instead: the spine presence,
   full-bleed bands with scrims, glass depth, reveal on entrance.

   ⚠️ .layer / .stage / .aside / .flank / .col belong to the
   homepage deck. Ours are prefixed .sl-* on purpose. Never
   reuse the deck names here.
   ============================================================ */

.sl-page{position:relative;z-index:1}

/* ---------- FULL-BLEED BANDS ---------- */
/* The homepage alternates tinted stages. Cards on a flat page read
   cheap by comparison; a band with its own ground reads composed. */
.sl-band--tint{background:var(--coal)}
.sl-band--tint::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(242,125,33,.05) 0%,transparent 40%);
  pointer-events:none;
}
.sl-band--glass{
  background:var(--glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Scrim — keeps copy legible where it crosses the spine */
.sl-scrim{position:relative}
.sl-scrim::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(270deg,var(--void) 0%,rgba(0,0,0,0) 62%);
  opacity:.9;
}

/* ---------- REVEAL ON ENTRANCE ---------- */
/* Progressive enhancement only. Content is in the HTML and visible
   without JS — .sl-reveal is upgraded to hidden by script, so a
   crawler or a JS-off visitor still sees everything. */
.js .sl-reveal{opacity:0;transform:translateY(14px)}
.js .sl-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .js .sl-reveal{opacity:1;transform:none;transition:none}
}

/* ---------- SHARED HERO BITS ---------- */
.sl-lede{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--muted);max-width:56ch;line-height:1.55}
.sl-rule{width:64px;height:3px;background:var(--grad);border-radius:2px;margin:var(--s-4) 0}

/* ---------- SITE CHROME ---------- */
.sl-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:.7rem var(--gutter);
  background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.sl-head img{height:34px;width:auto}
.sl-nav{display:none;gap:var(--s-4);list-style:none;margin:0;padding:0;
  font-size:13.5px;font-weight:600}
.sl-nav a{color:var(--display);text-decoration:none}
.sl-nav a:hover{color:var(--yellow)}
@media (min-width:1200px){ .sl-nav{display:flex} }
/* dropdowns: same labels and structure as the homepage menu. Open on hover and on keyboard focus. */
.sl-nav>li{position:relative}
.sl-has-dd>a::after{content:"▾";font-size:.72em;margin-left:.35rem;color:var(--muted)}
.sl-dd{list-style:none;margin:0;padding:.4rem;display:none}
.sl-dd a{display:block;font-size:12.5px;font-weight:600;padding:.55rem .7rem;border-radius:var(--r-sm);white-space:nowrap}
@media (min-width:1200px){
  .sl-nav>li>a{display:block;padding:.6rem 0}
  .sl-dd{position:absolute;top:100%;left:-.7rem;min-width:230px;background:var(--coal);border:1px solid var(--line);
    border-radius:var(--r-md);box-shadow:0 18px 40px rgba(30,34,38,.14);z-index:30}
  .sl-nav>li:hover>.sl-dd,.sl-nav>li:focus-within>.sl-dd{display:block}
  .sl-dd a:hover{background:rgba(242,125,33,.1)}
  /* Services carries the 15 condition pages too: two columns, so twenty rows fit an 800px-tall screen */
  .sl-dd--wide{min-width:480px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.3rem}
  .sl-nav>li:hover>.sl-dd--wide,.sl-nav>li:focus-within>.sl-dd--wide{display:grid}
  .sl-dd--wide .sl-dd-label{grid-column:1/-1;margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--line)}
  .sl-dd--wide .sl-lang-label{padding:.25rem .7rem .3rem}
}

/* ---------- BEFORE / AFTER SLIDER ---------- */
/* Drag to compare. Built on a range input so it works with a keyboard and a
   screen reader, not just a mouse. Both images stay full-fidelity — no fade,
   no blur, because the whole point is that the change is visible and sharp. */
.sl-ba{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  touch-action:pan-y;user-select:none;background:var(--coal)}
.sl-ba img{display:block;width:100%;height:auto}
.sl-ba .after{position:absolute;inset:0;width:100%;height:100%;
  clip-path:inset(0 0 0 var(--pos,50%))}
.sl-ba .after img{width:100%;height:100%;object-fit:cover}
.sl-ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
  background:var(--grad);transform:translateX(-1px);pointer-events:none}
.sl-ba .knob{position:absolute;top:50%;left:var(--pos,50%);width:44px;height:44px;
  margin:-22px 0 0 -22px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  box-shadow:0 4px 18px rgba(0,0,0,.28);color:var(--btn-ink);font-size:15px;font-weight:700}
.sl-ba .tag{position:absolute;top:var(--s-2);font-family:var(--ff-mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;background:var(--glass);color:var(--display);
  padding:.3rem .6rem;border-radius:var(--r-pill);pointer-events:none}
.sl-ba .tag--b{left:var(--s-2)} .sl-ba .tag--a{right:var(--s-2)}
.sl-ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize}
.sl-ba input[type=range]:focus-visible{opacity:1;outline:3px solid var(--yellow);outline-offset:-3px}

/* ---------- SECTION PROGRESS DOTS ---------- */
/* The homepage has a dots nav. On a long document it earns its place as a
   position indicator and a jump list. */
.sl-dots{position:fixed;right:calc(var(--gutter) / 2);top:50%;transform:translateY(-50%);
  z-index:15;display:none;flex-direction:column;gap:11px}
@media (min-width:1200px){ .sl-dots{display:flex} }
.sl-dots a{width:9px;height:9px;border-radius:50%;background:var(--line);
  border:1px solid var(--muted);transition:all var(--dur) var(--ease);position:relative}
.sl-dots a.is-on{background:var(--grad);border-color:transparent;transform:scale(1.35)}
.sl-dots a span{position:absolute;right:18px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--display);background:var(--glass);
  padding:.28rem .55rem;border-radius:var(--r-pill);opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease)}
.sl-dots a:hover span,.sl-dots a:focus-visible span{opacity:1}

/* ---------- STAT BAND ---------- */
/* His strongest numbers were buried in body copy. 86% was a hyperlink inside a
   grey paragraph. The .stat component existed and went unused. */
.sl-statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-5) var(--s-4);align-items:start}
.sl-statband .stat .n{display:block;font-family:var(--ff-mono);font-size:clamp(2.6rem,4.4vw,3.6rem);
  line-height:1;color:var(--yellow);letter-spacing:-.02em}
.sl-statband .stat .l{display:block;margin-top:var(--s-2);color:var(--display);
  font-weight:600;font-size:.98rem}
.sl-statband .stat .s{display:block;margin-top:.25rem;color:var(--muted);font-size:.85rem;max-width:26ch}

/* ---------- MID-PAGE CTA BAND ---------- */
/* Every booking button sat in the first three sections. The whole persuasion
   stretch — results, process, why, FAQ — had nowhere to click. */
.sl-cta{text-align:center;overflow:clip}
.sl-cta h2{max-width:20ch;margin-inline:auto}
.sl-cta p{max-width:52ch;margin-inline:auto;color:var(--muted)}
.sl-cta .row{display:flex;gap:var(--s-3);justify-content:center;flex-wrap:wrap;margin-top:var(--s-4)}

/* ---------- MOBILE NAV ---------- */
/* There was none. Below 900px the header was a logo and one button, on the
   device most of his search traffic arrives on. */
.sl-burger{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:transparent;color:var(--display);cursor:pointer;padding:0}
.sl-burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
.sl-burger span::before,.sl-burger span::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:currentColor}
.sl-burger span::before{top:-6px} .sl-burger span::after{top:6px}
.sl-burger[aria-expanded="true"] span{background:transparent}
.sl-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.sl-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (min-width:1200px){ .sl-burger{display:none} }
@media (max-width:1199px){
  .sl-nav{display:none;position:absolute;max-height:calc(100vh - 64px);overflow:auto;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--coal);border-bottom:1px solid var(--line);
    padding:var(--s-2) var(--gutter) var(--s-3);
    box-shadow:0 18px 40px rgba(0,0,0,.14)}
  .sl-nav.is-open{display:flex}
  .sl-nav li{border-bottom:1px solid var(--line)}
  .sl-nav li:last-child{border-bottom:0}
  .sl-nav a{display:block;padding:var(--s-3) 0;font-size:1rem}
  /* phones: the sub-links sit open under their parent, indented */
  .sl-dd{display:block;padding:0 0 var(--s-2) var(--s-3)}
  .sl-dd a{font-size:.92rem;font-weight:500;padding:.5rem 0;color:var(--soft);white-space:normal}
  .sl-dd li{border-bottom:0!important}
  .sl-has-dd>a::after{content:none}
  /* the header CTA is long on small screens — let it shrink before the logo does */
  .sl-head .btn{font-size:13px;padding:.6rem .9rem}
}

/* ---------- "AS FEATURED ON" PRESS STRIP ---------- */
/* the client liked this treatment. He has a genuinely strong press set and it was
 sitting unused in the assets folder. */
.sl-press{border-top:1px solid var(--line);padding:var(--s-4) 0 0;margin-top:var(--s-5)}
.sl-press .lbl{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-3)}
.sl-press .row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5) var(--s-6)}
.sl-press img{height:26px;width:auto;opacity:.55;filter:grayscale(1);
  transition:opacity var(--dur) var(--ease),filter var(--dur) var(--ease)}
.sl-press img:hover{opacity:1;filter:grayscale(0)}
html[data-theme="dark"] .sl-press img{filter:grayscale(1) invert(1) brightness(1.6)}
@media (max-width:640px){ .sl-press .row{gap:var(--s-4) var(--s-5)} .sl-press img{height:20px} }

/* ---------- ROTATING GLOW BORDER ---------- */
/* Pure CSS, the technique the client sent. @property lets the conic angle animate;
 browsers without it just get a static gradient edge, which still looks right. */
@property --sl-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.sl-glow{position:relative;border-radius:var(--r-md);isolation:isolate}
.sl-glow::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;
  padding:1.5px;                         /* rim only — never a wash across the panel */
  background:conic-gradient(from var(--sl-ang),
    rgba(245,173,27,0) 0deg,rgba(245,173,27,.25) 24deg,#FFC24A 58deg,#F27D21 76deg,
    rgba(242,125,33,.20) 130deg,rgba(242,125,33,.12) 300deg,rgba(245,173,27,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:sl-spin 9s linear infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .sl-glow::before{animation:none} }

/* ---------- MORE ACCENT ---------- */
/* Applied where it carries
 meaning rather than sprinkled: section eyebrows, stat rules, list markers. */
.sl-band--tint .eyebrow,.sl-hero .eyebrow{color:var(--yellow)}
.sl-statband .stat{border-top:3px solid transparent;border-image:var(--grad) 1;padding-top:var(--s-3)}
.sl-accentline{height:3px;background:var(--grad);border-radius:2px;width:100%;
  max-width:180px;margin:var(--s-4) 0}

/* ---------- WIDE MONITORS ---------- */
/* The two-column split let its gap grow without limit. Cap the gap and let the
 columns take the room instead. */
@media (min-width:1400px){
  .sl-split{gap:var(--s-5);max-width:1180px;margin-inline:auto}
}



/* ---------- GLOWING CTA BUTTONS ---------- */
/* Matching the reference frame-for-frame. It is not a diffuse halo — it is a
   thin CRISP rim with one hot arc racing around a dim ring, plus a soft bloom
   spilling outward. Hard colour stops are what make the arc read as a beam
   rather than a smear, which is why the blurred first attempt looked wrong.
   The reference calls this the COMET variant. */

@property --sl-ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes sl-spin{to{--sl-ang:360deg}}

.btn,.btn-ghost{position:relative;isolation:isolate}

/* the rim — crisp, 1.5px, one bright arc over a dim ring */
.btn::after,.btn-ghost::after{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--sl-ang),
    rgba(245,173,27,0) 0deg,
    rgba(245,173,27,.25) 24deg,
    #FFC24A 58deg,                 /* the hot arc */
    #F27D21 76deg,
    rgba(242,125,33,.22) 120deg,
    rgba(242,125,33,.14) 300deg,
    rgba(245,173,27,0) 360deg);
  animation:sl-spin 4.5s linear infinite;
}

/* the bloom — same gradient, blurred, sitting further out */
.btn::before,.btn-ghost::before{
  content:"";position:absolute;inset:-5px;border-radius:inherit;z-index:-2;
  background:conic-gradient(from var(--sl-ang),
    rgba(245,173,27,0) 0deg,
    rgba(245,173,27,.35) 30deg,
    #F5AD1B 58deg,
    #F27D21 82deg,
    rgba(242,125,33,.18) 130deg,
    rgba(242,125,33,0) 320deg);
  filter:blur(9px);
  opacity:.75;
  animation:sl-spin 4.5s linear infinite;
}
.btn:hover::before,.btn-ghost:hover::before{opacity:1;filter:blur(11px)}

/* the ghost button is the closest match to the reference: dark fill, glowing
   rim. Its own ground sits over the conic so only the rim shows. */
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost::marker{content:""}
.sl-stage--horizon .btn-ghost{color:#F3F7FB}

/* On a light ground the bloom has little to separate it from the page, so it
   leans on the deeper stop. On dark it already sings. */
html[data-theme="dark"] .btn::before,html[data-theme="dark"] .btn-ghost::before{opacity:.9}

/* The header CTA is persistent. A beam circling in the corner of every screen
   is noise, not emphasis. */
.sl-head .btn::before,.sl-head .btn::after{display:none}

@media (prefers-reduced-motion:reduce){
  .btn::before,.btn::after,.btn-ghost::before,.btn-ghost::after{animation:none}
}

/* The ghost button needs the conic to show ONLY in the rim. Covering the
   interior with a fill fails, because the ghost sits on two different grounds
   (plain bands and tinted ones) and any solid fill mismatches one of them.
   Mask the ring out of the gradient instead — works on any ground, no fill. */
.btn-ghost{background:transparent;border:0;padding:1.05rem 2rem;font:700 16px/1.2 var(--ff-body)}
.btn-ghost::after{
  inset:0;
  padding:1.5px;                       /* the ring thickness */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  z-index:-1;
}
.btn-ghost::before{inset:-3px;opacity:.5}

/* The bloom was spilling across the button face, so the whole pill read as
   glowing rather than the edge of it. Border only: mask the ring out of the
   conic on the primary too, exactly as the ghost does, and drop the wash. */
.btn::after{
  inset:0;
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  z-index:1;                  /* above the fill, so the rim is never washed over */
}
.btn::before{
  inset:-3px;
  filter:blur(7px);
  opacity:.42;                /* a hint of light OUTSIDE the edge, nothing across it */
  z-index:-1;
}


/* ---------- VIDEO FACADE ---------- */
/* A poster and a play button. YouTube is only loaded when someone actually
   asks for it, so the page costs nothing to a visitor who never presses play,
   and no third party is contacted until they do. */
.sl-video{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--coal);cursor:pointer;width:100%;padding:0;display:block}
.sl-video img{width:100%;height:100%;object-fit:cover;display:block}
.sl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sl-video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 40px rgba(0,0,0,.4);transition:transform var(--dur) var(--ease)}
.sl-video:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.sl-video .play::after{content:"";border-left:20px solid var(--btn-ink);
  border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.sl-video .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s-4) var(--s-3) var(--s-3);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
  color:#fff;font-size:.9rem;font-weight:600;text-align:left}

/* ---------- STACKED BAND ---------- */
/* The hero's layering language, used once more further down the page. Two
   sheets sit behind the panel and drift at their own rate, so the band reads
   as a stack with depth instead of one flat card on a flat ground. The rate
   difference is the whole effect — same principle as the stage. */
.sl-stack{position:relative;isolation:isolate}
.sl-stack__bloom{
  position:absolute;left:50%;top:76%;width:min(640px,78%);aspect-ratio:2.1;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(58px);
  background:radial-gradient(ellipse at 50% 50%,rgba(242,125,33,.38),transparent 68%);
  z-index:-3;pointer-events:none;
}
.sl-stack__sheet{
  position:absolute;inset:0;border-radius:var(--r-md);z-index:-1;pointer-events:none;
  will-change:transform;--sc:1;--o:0px;
  transform:scale(var(--sc)) translateY(calc(var(--o) + var(--y,0px)));
  border:1px solid rgba(20,20,19,.09);background:#fff;
  box-shadow:0 18px 38px -26px rgba(20,20,19,.45);
}
.sl-stack__sheet.s1{--sc:.955;--o:26px}
.sl-stack__sheet.s2{--sc:.905;--o:54px;z-index:-2;opacity:.8;
  background:linear-gradient(180deg,#FFF4E4,#FFFDFA)}
@media (prefers-reduced-motion:reduce){
  .sl-stack__sheet,.sl-stack__bloom{display:none}
}

@media (max-width:1199px){ .sl-burger{min-width:44px;min-height:44px} }

/* ---------- COUNTRY SELECTOR ---------- */
/* One <details> in the header, between the nav and the "Book Consultation" button.
   It opens and closes without JavaScript; the page script adds arrow keys, Escape and
   click-outside. Below 1200px the trigger stays next to the burger and the burger
   menu repeats the list under a "Country" heading. Flags are 20 x 14 webp files. */
.sl-lang{position:relative;flex:0 0 auto}
.sl-lang>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  height:39px;padding:0 .75rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:transparent;color:var(--display);transition:border-color var(--dur) var(--ease)}
.sl-lang>summary::-webkit-details-marker{display:none}
.sl-lang>summary:hover,.sl-lang[open]>summary{border-color:var(--yellow)}
.sl-lang>summary:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sl-lang>summary svg{width:10px;height:10px;color:var(--muted);transition:transform var(--dur) var(--ease)}
.sl-lang[open]>summary svg{transform:rotate(180deg)}
.sl-head .sl-lang img,.sl-head .sl-lang-list img{width:20px;height:14px;border-radius:2px;flex:0 0 auto}
.sl-lang-panel{position:absolute;top:calc(100% + .5rem);right:0;z-index:30;padding:.5rem;
  background:var(--coal);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 18px 40px rgba(30,34,38,.14);max-height:calc(100vh - 90px);overflow:auto}
.sl-lang-label{margin:0;padding:.35rem .7rem .45rem;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.sl-lang-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(230px,1fr));gap:.1rem .3rem}
.sl-lang-list a{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;color:var(--display);text-decoration:none;white-space:nowrap}
.sl-lang-list a:hover,.sl-lang-list a:focus-visible{background:rgba(242,125,33,.1)}
.sl-lang-list a[aria-current="true"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);margin-left:auto}
.sl-lang-mob{display:none}
@media (max-width:1199px){
  .sl-lang>summary{height:35px;padding:0 .6rem}
  .sl-lang-mob{display:block}
  .sl-nav .sl-lang-label{padding:var(--s-3) 0 .35rem}
  .sl-nav .sl-lang-list{grid-template-columns:repeat(2,1fr);padding:0 0 var(--s-2)}
  .sl-nav .sl-lang-list li{border-bottom:0!important}
  .sl-nav .sl-lang-list a{font-size:.92rem;font-weight:500;padding:.5rem .4rem}
}
@media (max-width:900px){ .sl-lang-panel .sl-lang-list{grid-template-columns:repeat(2,minmax(200px,1fr))} }
/* phones: one column, and the panel spans the header's width (the sticky header is its containing block) */
@media (max-width:600px){
  /* four controls on one line (logo, burger, country, CTA): tighter gap, a flag-only trigger,
     a slightly slimmer CTA. If a phone is still too narrow the logo scales down in proportion. */
  .sl-head{gap:var(--s-1)}
  .sl-head img{height:auto;max-height:34px}
  /* the CTA carries an inline style, so the small-screen size above never applied; here it must */
  .sl-head .btn{font-size:13px!important;padding:.6rem .9rem!important;white-space:nowrap;flex:0 0 auto}
  .sl-lang{position:static}
  .sl-lang>summary{padding:0 .45rem;gap:0}
  .sl-lang>summary svg{display:none}
  .sl-lang-panel{left:var(--gutter);right:var(--gutter);top:calc(100% + .4rem)}
  .sl-lang-panel .sl-lang-list{grid-template-columns:1fr}
}
/* the narrowest phones (iPhone SE, 360px Androids): the row cannot hold a fourth control without
   squashing the logo, so the trigger steps out and the burger menu's Country list is the way in */
@media (max-width:379px){ .sl-lang{display:none} }

/* phones: the country trigger and the stage arrows are full tap targets (44px) too */
@media (max-width:860px){ .sl-lang summary{min-width:44px;min-height:44px;justify-content:center} .mp-arrow{min-width:44px} }


/* ---------- SHOP + CART ---------- */
/* Shop is a pill beside the cart; the cart is a round link like the country trigger, with a count bubble the store fills
   ([data-cart-count], shown when it has items). 480px and below: the flag trigger steps out so the cart fits;
   the burger menu's Country list is the way in. */
.sl-cart{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:39px;height:39px;border:1px solid var(--line);border-radius:var(--r-full);color:var(--display);
  text-decoration:none;transition:border-color var(--dur) var(--ease)}
.sl-cart:hover{border-color:var(--yellow)}
.sl-cart:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.sl-cart svg{width:20px;height:20px}
.sl-cart__n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--grad);color:#1A0F06;font-size:11px;font-weight:700;line-height:19px;text-align:center}
.sl-cart__n[hidden]{display:none}
/* Shop: an orange pill beside the cart. 700px and up it sits in the header row and the menu drops its Shop row;
   below 700px the row is too full, so the pill steps out and the burger menu's Shop row is the way in */
.sl-shopbtn{flex:0 0 auto;display:inline-flex;align-items:center;height:39px;padding:0 1.05rem;border:1.5px solid #F27D21;
  border-radius:var(--r-pill);background:#FFF6EA;color:#B25707;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.sl-shopbtn:hover{background:var(--grad);color:#1A0F06;border-color:transparent}
.sl-shopbtn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media (min-width:700px){ .sl-nav>li.sl-shop{display:none} }
@media (max-width:699px){ .sl-shopbtn{display:none} }
/* the row: logo on the left, the menu centred in the space between, everything else packed to the right */
.sl-head{justify-content:flex-start}
@media (min-width:1200px){ .sl-head>nav{margin-inline:auto} }
@media (max-width:1199px){ .sl-burger{margin-left:auto} }
@media (min-width:1200px) and (max-width:1299px){ .sl-nav{gap:1.1rem} }
@media (max-width:1199px){ .sl-cart{width:35px;height:35px} .sl-shopbtn{height:35px} }
@media (max-width:860px){ .sl-cart{min-width:44px;min-height:44px} .sl-shopbtn{min-height:44px} }
@media (max-width:480px){ .sl-lang{display:none} }
/* small phones: a slimmer Book button keeps the logo readable; at 340px and below (first iPhone SE) the cart steps out too */
@media (max-width:400px){ .sl-head .btn{font-size:12.5px!important;padding:.6rem .7rem!important} }
@media (max-width:340px){ .sl-cart{display:none} }
/* ---------- /SHOP + CART ---------- */

/* grouped dropdowns: each heading over its list, pinned to its column; a lead row (Products "Shop") spans them all; menus with 3-4 columns sit centred on their trigger */
@media (min-width:1200px){ .sl-dd--groups{grid-auto-flow:row dense} .sl-dd--groups>li{grid-column:1} .sl-dd--groups>li.sl-dd-c2{grid-column:2} .sl-dd--groups>li.sl-dd-c3{grid-column:3} .sl-dd--groups>li.sl-dd-c4{grid-column:4} .sl-dd--groups>li.sl-dd-all{grid-column:1/-1} .sl-dd--groups>li.sl-dd-all a{font-weight:700;color:var(--yellow);border-bottom:1px solid var(--line);border-radius:0;margin-bottom:.4rem} .sl-dd--groups .sl-dd-label{margin-top:0;padding-top:0;border-top:0} .sl-dd--groups>li.sl-dd-label{grid-column:1} .sl-dd--groups>li.sl-dd-label.sl-dd-c2{grid-column:2} .sl-dd--groups>li.sl-dd-label.sl-dd-c3{grid-column:3} .sl-dd--groups>li.sl-dd-label.sl-dd-c4{grid-column:4} .sl-dd--groups>li.sl-dd-sub{margin-top:.55rem} .sl-dd--cols3{grid-template-columns:repeat(3,minmax(0,1fr));min-width:660px;left:50%;transform:translateX(-50%)} .sl-dd--cols4{grid-template-columns:repeat(4,minmax(0,1fr));min-width:860px;left:50%;transform:translateX(-50%)} }
/* menu headings in orange: the text-safe brand orange, desktop and phone */
.sl-dd-label .sl-lang-label{color:#B25707}