/*
Theme Name: Ezy Breath
Theme URI: https://ezybreath.com.au
Author: Ezy Breath
Description: Custom WordPress theme for EZY BREATH. Licensed 9D Breathwork experiences for groups, teams and communities. Dark cosmic aesthetic with interactive breathing circle.
Version: 1.12.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ezybreath
*/

:root{
  --bg:#030306;
  --panel:rgba(255,255,255,.03);
  --white:#f8f4ee;
  --muted:rgba(248,244,238,.82);
  --soft:rgba(248,244,238,.66);
  --cyan:#17f3ff;
  --pink:#ff3bc7;
  --violet:#8b5cff;
  --gold:#ffc15a;
  --green:#82ff7a;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Raleway",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1240px;
  /* Tells the browser this is a dark UI, so it renders the parts of form
     controls we cannot style ourselves to match: the date picker's calendar
     button, number-input spinners, native select dropdowns and scrollbars.
     Without it the date button was near-black on a near-black field. */
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Re-assert the UA [hidden] behaviour in author origin: author display rules
   (e.g. .field-row{display:grid}) otherwise beat UA [hidden]{display:none}. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{min-height:100%}
/* Anchor targets need clearance, or a jump from the menu (#what-is-9d, #faq,
   #enquiry, #booking-terms …) lands with the heading flush against the top of
   the window, or tucked under the admin bar for logged-in editors. */
:target,[id]{scroll-margin-top:28px}
body.admin-bar :target,body.admin-bar [id]{scroll-margin-top:60px}
/* `clip` rather than `hidden`: both stop sideways scrolling, but `hidden`
   creates a scroll container, which silently kills position:sticky for the
   whole document — something plugins (sticky bars, sticky sidebars) rely on. */
body{overflow-x:clip}
@supports not (overflow:clip){
  body{overflow-x:hidden}
}
body{
  background:
    radial-gradient(circle at 78% 30%, rgba(33,83,155,.16), transparent 34%),
    radial-gradient(circle at 88% 60%, rgba(255,59,199,.10), transparent 30%),
    radial-gradient(circle at 30% 85%, rgba(23,243,255,.07), transparent 34%),
    var(--bg);
  color:var(--white);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
}
img{max-width:100%;height:auto;display:block}
/* Images that are genuinely inline must stay inline; the blanket display:block
   above otherwise breaks emoji and plugin icons out onto their own line. */
img.emoji,img.wp-smiley{
  display:inline!important;width:1em!important;height:1em!important;
  margin:0 .07em!important;vertical-align:-.1em;border-radius:0;box-shadow:none;
}
a{color:var(--cyan);text-decoration:none}
a:hover{opacity:.9}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.12}
h1{font-size:clamp(42px,5.2vw,72px);margin-bottom:20px;text-shadow:0 0 34px rgba(255,255,255,.10)}
h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:18px}
h3{font-size:clamp(21px,2vw,27px);margin-bottom:10px;color:var(--white)}
p{margin-bottom:18px;color:var(--muted)}
strong{color:var(--white)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4.5vw,48px)}
section{position:relative;padding:clamp(56px,8vw,110px) 0}
.kicker{
  display:inline-block;margin-bottom:14px;color:rgba(23,243,255,.9);
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:800;
}
.kicker.pink{color:rgba(255,59,199,.9)}
.kicker.gold{color:rgba(255,193,90,.95)}
.subline{font-size:clamp(17px,1.4vw,22px);color:rgba(255,193,90,.92);font-weight:700;margin-bottom:18px}
.lead{font-size:clamp(17px,1.35vw,20px)}
.center{text-align:center}
.center .lead{max-width:820px;margin-left:auto;margin-right:auto}
/* The accent rule runs the full width of whatever holds it, so every heading
   on the site is underlined the same way. */
.glow-rule{
  width:100%;height:3px;border-radius:99px;margin:6px 0 26px;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  box-shadow:0 0 18px rgba(255,59,199,.5);
}
.center .glow-rule{margin-left:auto;margin-right:auto}
/* Licensed 9D Breathwork mark, used to head the section that explains the
   method. White artwork on transparent, so it reads straight off the dark
   background; the glow ties it to the rest of the palette. */
.section-brandmark{
  display:block;height:auto;margin:0 auto 22px;
  width:clamp(150px,17vw,196px);
  opacity:.94;filter:drop-shadow(0 0 34px rgba(23,243,255,.2));
}

/* ---------- Header ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:60;
  padding:26px clamp(20px,4.5vw,48px);
}
/* The admin bar is fixed and WordPress pushes the page down with
   html{margin-top:32px}. An absolutely positioned header ignores that margin
   and slides underneath the bar, so offset it explicitly. Below 600px core
   makes the bar position:absolute and it scrolls away with the page. */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}
@media screen and (max-width:600px){
  body.admin-bar .site-header{top:0}
}
.site-header .bar{
  max-width:1360px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:inline-block;color:var(--white)}
/* Single supplied lockup: wordmark and frequency mark in one transparent PNG. */
.brand .brand-logo{
  display:block;width:100%;max-width:clamp(200px,23vw,310px);height:auto;
}
.site-footer .brand .brand-logo{max-width:290px}
.main-nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,22px)}
.pill{
  display:inline-block;border:1px solid transparent;border-radius:999px;
  background:linear-gradient(#050509,#050509) padding-box,
             linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)) border-box;
  color:#fff!important;padding:12px 26px;font-weight:700;font-size:15px;white-space:nowrap;
  box-shadow:0 0 24px rgba(255,59,199,.18),0 0 24px rgba(23,243,255,.14);
  transition:box-shadow .3s,transform .3s;
}
.pill:hover{box-shadow:0 0 34px rgba(255,59,199,.35),0 0 34px rgba(23,243,255,.28);transform:translateY(-1px);opacity:1}
.nav-toggle{
  display:none;background:none;border:1px solid rgba(255,255,255,.25);border-radius:10px;
  color:#fff;font-size:22px;line-height:1;padding:8px 12px;cursor:pointer;
}
@media(max-width:980px){
  .nav-toggle{display:block}
  .main-nav{
    display:none;position:absolute;top:calc(100% + 8px);left:16px;right:16px;
    flex-direction:column;align-items:stretch;gap:0;padding:14px;
    background:rgba(5,5,10,.97);border:1px solid rgba(255,255,255,.1);border-radius:20px;
    box-shadow:0 30px 80px rgba(0,0,0,.7);max-height:78vh;overflow-y:auto;
  }
  .main-nav.open{display:flex}
  .main-nav .pill{margin:10px 0 4px;text-align:center}
}

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-block;background:linear-gradient(100deg,#22f0ff,#7065ff 50%,#ff3bc7);
  border-radius:999px;padding:15px 34px;color:#fff!important;font-weight:750;font-size:16px;
  box-shadow:0 0 36px rgba(23,243,255,.26),0 0 30px rgba(255,59,199,.2);
  transition:transform .3s,box-shadow .3s;border:none;cursor:pointer;font-family:var(--sans);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 48px rgba(23,243,255,.4),0 0 44px rgba(255,59,199,.32);opacity:1}
.btn-secondary{
  display:inline-block;border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:15px 34px;color:#fff!important;font-weight:600;font-size:16px;
  background:rgba(0,0,0,.28);backdrop-filter:blur(10px);transition:border-color .3s;cursor:pointer;font-family:var(--sans);
}
.btn-secondary:hover{border-color:rgba(23,243,255,.6);opacity:1}
/* The "Book a Session" gradient outline, at CTA size. Use .pill.btn-outline
   wherever a secondary button has to carry the same coloured edge as the
   header's Book a Session pill. */
.btn-outline{padding:15px 34px;font-size:16px}
.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* ---------- Grouped nav buttons (header) ----------
   Declared after .btn-primary / .btn-secondary, which supply the colour, so
   the flex display below wins over their inline-block.
   These render once per page, in the header only. The home-page hero used to
   repeat them, which put four menu buttons on one screen and stacked badly on
   a phone; the hero now carries plain CTAs instead. */
.navgroups{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.navgroup{position:relative}
.navgroup-btn{display:inline-flex;align-items:center;gap:10px}
.navgroups-header .navgroup-btn{padding:15px 30px;font-size:16.5px}
.navgroup-caret{
  width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s;
}
.navgroup.open .navgroup-caret{transform:translateY(1px) rotate(-135deg)}
.navgroup-menu{
  position:absolute;z-index:80;top:calc(100% + 10px);left:0;min-width:290px;
  display:flex;flex-direction:column;padding:10px;border-radius:20px;
  background:rgba(6,6,12,.97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 30px 70px rgba(0,0,0,.66);
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.navgroup.open .navgroup-menu{opacity:1;visibility:visible;transform:none}
/* Hover and keyboard-focus opening live entirely in CSS, so they keep working
   without JavaScript and can't fight the click handler (which would otherwise
   close on the same gesture that hover just opened). Scoped above the mobile
   breakpoint, where the panel opens in flow instead. */
@media(hover:hover) and (min-width:981px){
  /* :focus-within on the menu, not the whole group: focusing the button alone
     must not open it, or a click would toggle straight back closed. */
  .navgroup:hover .navgroup-menu,
  .navgroup-menu:focus-within{opacity:1;visibility:visible;transform:none}
  .navgroup:hover .navgroup-caret{transform:translateY(1px) rotate(-135deg)}
}
.navgroup-menu a{
  display:block;padding:11px 15px;border-radius:12px;
  color:rgba(255,255,255,.86);font-size:15px;font-weight:600;line-height:1.35;
  transition:background .25s,color .25s;
}
.navgroup-menu a:hover,.navgroup-menu a:focus-visible{background:rgba(255,255,255,.06);color:var(--cyan);opacity:1}
/* Right-align the second menu so its longer labels can't run off-screen. */
.navgroups .navgroup:last-child .navgroup-menu{left:auto;right:0}
@media(max-width:980px){
  /* Inside the mobile panel the menus expand in flow instead of floating,
     so a long group can't sit off the edge of the screen. */
  .navgroups-header{flex-direction:column;align-items:stretch;gap:10px}
  .navgroups-header .navgroup-btn{width:100%;justify-content:space-between}
  .navgroups-header .navgroup-menu{
    position:static;min-width:0;margin-top:6px;padding:4px 0 0;
    background:none;box-shadow:none;backdrop-filter:none;
    display:none;opacity:1;visibility:visible;transform:none;
  }
  .navgroups-header .navgroup.open .navgroup-menu,
  html:not(.js) .navgroups-header .navgroup-menu{display:flex}
  .navgroups-header .navgroup-menu a{padding:11px 16px}
}

/* ---------- Cards / panels ---------- */
.glass{
  position:relative;border-radius:28px;padding:clamp(22px,3vw,36px);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),rgba(0,0,0,.30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 28px 80px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.quote{
  margin:26px 0;padding-left:18px;border-left:2px solid rgba(23,243,255,.55);
  color:rgba(248,244,238,.85);font-size:clamp(16px,1.3vw,19px);line-height:1.8;font-style:italic;
}
.quote cite{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--soft);letter-spacing:.08em}

/* ---------- Hero ---------- */
/* svh = the *small* viewport height, i.e. with the mobile browser bars showing.
   Plain vh uses the largest viewport, so on a phone the bottom of the hero sits
   under the address bar until you scroll. */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:120px 0 40px;overflow:hidden;display:flex;align-items:center}
.hero .cosmic-grid{
  position:absolute;inset:0;z-index:1;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:90px 90px;
  mask-image:radial-gradient(circle at 70% 45%,black,transparent 68%);
  -webkit-mask-image:radial-gradient(circle at 70% 45%,black,transparent 68%);
}
.hero-grid{
  position:relative;z-index:5;display:grid;grid-template-columns:1.02fr .98fr;
  align-items:center;gap:36px;width:100%;
}
.hero-copy{position:relative;z-index:25;max-width:640px}
.hero-copy p{margin-bottom:12px}
.hero-copy .lead{margin-bottom:16px}
/* The closing line of the hero copy, set a shade brighter than the body text
   so it reads as the pay-off rather than another paragraph. */
.hero-closer{font-size:clamp(17px,1.35vw,20px);color:var(--white)}
.hero-actions{margin-top:28px}

/* Breathing circle stage */
.stage{position:relative;z-index:10;min-height:640px;display:grid;place-items:center;isolation:isolate}
.meditation-shell{position:relative;width:min(46vw,660px);aspect-ratio:1/1.06;display:grid;place-items:center;isolation:isolate}
.galaxy-large{
  position:absolute;z-index:-1;width:172%;aspect-ratio:1;left:50%;top:50%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.9;filter:saturate(1.15) contrast(1.06);
}
.galaxy-large canvas{width:100%;height:100%;display:block}
.breath-circle{
  position:relative;z-index:5;width:84%;aspect-ratio:1/1;border-radius:50%;
  isolation:isolate;
}
/* Without JS the CSS keyframes drive the breath; with JS a single shared clock
   drives circle, meter, words and canvases together so they stay in sync. */
html:not(.breath-js) .breath-circle{animation:circleBreath 8s ease-in-out infinite}
.breath-photo{
  position:absolute;inset:0;z-index:4;border-radius:50%;overflow:hidden;background:#000;
  box-shadow:0 28px 120px rgba(0,0,0,.72),0 0 84px rgba(23,243,255,.10),0 0 96px rgba(255,59,199,.09);
  -webkit-mask-image:radial-gradient(circle,black 0 52%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.5) 70%,transparent 78%);
  mask-image:radial-gradient(circle,black 0 52%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.5) 70%,transparent 78%);
}
.breath-photo img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  filter:contrast(1.05) brightness(.92) saturate(.92);
}
.breath-tint{
  position:absolute;inset:-3%;z-index:6;pointer-events:none;mix-blend-mode:screen;opacity:.5;border-radius:50%;
  background:radial-gradient(circle at 52% 48%,rgba(255,255,255,.12),transparent 25%),
    radial-gradient(circle at 43% 58%,rgba(23,243,255,.15),transparent 35%),
    radial-gradient(circle at 65% 38%,rgba(255,59,199,.12),transparent 38%),
    radial-gradient(circle at 55% 70%,rgba(255,193,90,.09),transparent 35%);
  -webkit-mask-image:radial-gradient(circle,black 0 52%,rgba(0,0,0,.45) 66%,transparent 78%);
  mask-image:radial-gradient(circle,black 0 52%,rgba(0,0,0,.45) 66%,transparent 78%);
}
html:not(.breath-js) .breath-tint{animation:tintPulse 8s ease-in-out infinite}
.breath-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none;mix-blend-mode:screen}
.guide-text{position:absolute;z-index:12;bottom:-2%;left:50%;transform:translateX(-50%);width:min(560px,80vw);text-align:center}
/* Set in the display serif rather than the body sans, so the breath cue reads
   as part of the artwork instead of as UI text. */
.breath-word{
  display:inline-flex;align-items:center;gap:11px;padding:12px 19px;border-radius:999px;
  background:rgba(0,0,0,.36);backdrop-filter:blur(12px);
  font-family:var(--serif);font-weight:400;font-style:italic;
  letter-spacing:.03em;font-size:clamp(17px,1.5vw,24px);text-shadow:0 0 18px currentColor;
}
.breath-word .dot{width:13px;height:13px;border-radius:50%;background:currentColor;box-shadow:0 0 18px currentColor,0 0 34px currentColor}
.inhale-word{color:var(--cyan)}
.exhale-word{color:var(--pink);opacity:.18;transform:scale(.94)}
html:not(.breath-js) .inhale-word{animation:inhaleWord 8s ease-in-out infinite}
html:not(.breath-js) .exhale-word{animation:exhaleWord 8s ease-in-out infinite}
/* JS crossfades the words exactly at the circle's turning points. */
html.breath-js .breath-word{transition:opacity .55s ease,transform .55s ease}
html.breath-js .inhale-word{opacity:1;transform:scale(1)}
html.breath-js .exhale-word{opacity:.18;transform:scale(.94)}
.breath-prompt{margin-top:14px;color:rgba(255,255,255,.82);font-size:clamp(15.5px,1.25vw,18px);letter-spacing:.04em}
.breath-meter{margin:13px auto 0;width:min(400px,58vw);height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}
.breath-meter span{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink),var(--gold));
  box-shadow:0 0 20px rgba(255,59,199,.55);transform-origin:left;transform:scaleX(.12);
}
html:not(.breath-js) .breath-meter span{animation:meter 8s ease-in-out infinite}
@keyframes circleBreath{0%,100%{filter:brightness(.94);transform:scale(.985)}50%{filter:brightness(1.07);transform:scale(1.02)}}
@keyframes tintPulse{0%,100%{opacity:.3}50%{opacity:.68}}
@keyframes inhaleWord{0%,49%{opacity:1;transform:scale(1)}50%,100%{opacity:.18;transform:scale(.94)}}
@keyframes exhaleWord{0%,49%{opacity:.18;transform:scale(.94)}50%,100%{opacity:1;transform:scale(1)}}
@keyframes meter{0%{transform:scaleX(.12)}50%{transform:scaleX(1)}100%{transform:scaleX(.12)}}

/* ---------- Benefit chips marquee ---------- */
.benefit-strip{padding:34px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);overflow:hidden}
.chip-track{display:flex;gap:14px;width:max-content;animation:chipScroll 46s linear infinite}
.benefit-strip:hover .chip-track{animation-play-state:paused}
.chip{
  flex:0 0 auto;padding:10px 22px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.05em;
  color:rgba(248,244,238,.9);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  box-shadow:0 0 18px rgba(23,243,255,.06);white-space:nowrap;
}
.chip:nth-child(4n+1){border-color:rgba(23,243,255,.35)}
.chip:nth-child(4n+2){border-color:rgba(255,59,199,.32)}
.chip:nth-child(4n+3){border-color:rgba(139,92,255,.4)}
.chip:nth-child(4n+4){border-color:rgba(255,193,90,.35)}
@keyframes chipScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Struggles ---------- */
.struggle-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:14px}
.struggle-list li{position:relative;padding-left:24px;color:var(--muted);font-size:15px}
.struggle-list li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
}
.struggle-card.emotional .struggle-list li::before{background:var(--pink);box-shadow:0 0 12px var(--pink)}
.struggle-card h3{display:flex;align-items:center;gap:12px}
.struggle-card .icon-dot{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  background:radial-gradient(circle,rgba(23,243,255,.22),transparent 70%);box-shadow:0 0 18px rgba(23,243,255,.3);
}
.struggle-card.emotional .icon-dot{background:radial-gradient(circle,rgba(255,59,199,.22),transparent 70%);box-shadow:0 0 18px rgba(255,59,199,.3)}

/* ---------- 9D layers ---------- */
.layers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;counter-reset:layer;list-style:none}
/* Two-up variant (home page). A class rather than an inline style so the
   single-column breakpoint below can still take effect on a phone. */
.layers-grid-2{grid-template-columns:repeat(2,1fr)}
.layer{
  counter-increment:layer;position:relative;padding:18px 18px 16px 56px;border-radius:18px;
  background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font-size:15px;color:var(--muted);
}
.layer::before{
  content:counter(layer,decimal-leading-zero);position:absolute;left:16px;top:16px;
  font-family:var(--serif);font-size:19px;color:var(--gold);text-shadow:0 0 14px rgba(255,193,90,.5);
}
.layer strong{display:block;font-size:15px;margin-bottom:2px}
@media(max-width:900px){.layers-grid,.layers-grid-2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.layers-grid,.layers-grid-2{grid-template-columns:1fr}}

/* ---------- Audience tabs ---------- */
.aud-tabs{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 26px}
.aud-tab{
  padding:13px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.16);cursor:pointer;
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.85);font-weight:700;font-size:15px;font-family:var(--sans);
  transition:all .3s;
}
.aud-tab:hover{border-color:rgba(23,243,255,.5)}
.aud-tab.active{
  border-color:transparent;color:#fff;
  background:linear-gradient(#0a0a12,#0a0a12) padding-box,linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)) border-box;
  border:1px solid transparent;box-shadow:0 0 22px rgba(23,243,255,.2),0 0 22px rgba(255,59,199,.16);
}
/* Progressive enhancement: all panels visible without JS; JS collapses to tabs. */
.aud-panel{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3vw,40px);align-items:start;margin-bottom:24px}
@media(max-width:900px){.aud-panel{grid-template-columns:1fr}}
html.js .aud-panel{display:none;margin-bottom:0}
html.js .aud-panel.active{display:grid;animation:fadeUp .5s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.aud-media img{border-radius:24px;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);width:100%;object-fit:cover}
.aud-note{
  margin-top:16px;padding:16px 18px;border-radius:16px;font-size:14px;color:var(--muted);
  background:rgba(255,193,90,.06);box-shadow:inset 0 0 0 1px rgba(255,193,90,.22);
}
.aud-note strong{color:var(--gold)}
/* The "where it's held" line, set apart from the journey names above it. */
.aud-note .aud-place{display:block;margin-top:8px;color:var(--cyan);font-weight:600}

/* ---------- Journey cards ---------- */
.journey-cat{margin-top:clamp(36px,5vw,64px)}
.journey-cat-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
/* The category taglines are full paragraphs, so hold them to a readable
   measure rather than letting them run the whole 1200px wrap. */
.journey-cat > .tagline{color:var(--soft);font-size:15px;max-width:780px;margin-left:auto;margin-right:auto}
/* Centred category headings, with the cards themselves left-aligned so the
   descriptions stay readable. */
.journey-cat.center .journey-cat-head{justify-content:center}
.journey-cat.center .journey-card{text-align:left}
.journey-grid{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;justify-content:center}
.journey-grid > .journey-card{flex:1 1 300px;max-width:calc((100% - 36px)/3)}
@media(max-width:1000px){.journey-grid > .journey-card{max-width:calc((100% - 18px)/2)}}
@media(max-width:640px){.journey-grid > .journey-card{max-width:100%}}
.journey-card{
  position:relative;border-radius:22px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 18px 50px rgba(0,0,0,.4);
  transition:transform .3s,box-shadow .3s;
}
.journey-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(23,243,255,.28),0 24px 60px rgba(0,0,0,.55),0 0 34px rgba(23,243,255,.08)}
.journey-card h3{font-size:20px;margin-bottom:0}
.journey-card p{font-size:14.5px;line-height:1.65;margin-bottom:0;color:rgba(248,244,238,.76)}
/* "For when..." — who the journey is for. Set below a hairline so it reads as a
   second, quieter answer rather than more of the description. margin-top:auto
   pins it to the bottom of the card, so the rules line up across a row even
   though the descriptions are different lengths. Selector kept at
   `.journey-card .journey-for` so it outranks the `.journey-card p` rule above
   without reaching for !important. */
.journey-card .journey-for{
  margin-top:auto;padding-top:14px;font-size:13.5px;
  color:rgba(248,244,238,.58);
  border-top:1px solid rgba(255,255,255,.13);
}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.tag.female{color:#ffb8e5;box-shadow:inset 0 0 0 1px rgba(255,59,199,.4)}
.tag.male{color:#a9e9ff;box-shadow:inset 0 0 0 1px rgba(23,243,255,.4)}
.tag.both{color:#d9c8ff;box-shadow:inset 0 0 0 1px rgba(139,92,255,.5)}
.tag.duration{color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,193,90,.45)}
.tag.explicit{color:#ff9b9b;box-shadow:inset 0 0 0 1px rgba(255,110,110,.4)}

/* Jump links to the three journey categories, shown under the page intro.
   These carry .pill in the markup so they get the same coloured gradient edge
   as "Book a Session" and "Partner With Me" — the client asked for these to
   stand out the way those do. Only the size is overridden here; the border,
   background and hover glow all stay with .pill so the two can't drift apart.
   `white-space:normal` releases .pill's nowrap: the longest label is "Down
   Regulation: Calm & Restore", which would otherwise force the row wider than
   a narrow phone. */
.journey-jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.journey-jump .pill{
  padding:10px 22px;font-size:13.5px;white-space:normal;text-align:center;
}
/* No scroll-margin-top here: the global `:target,[id]` rule near the top of
   this file already gives every anchor clearance, and it handles the admin
   bar too. A rule here would only shadow that. */

/* ---------- Accordion / FAQ ---------- */
.accordion{margin-top:26px;display:grid;gap:12px}
.accordion details{
  border-radius:18px;background:rgba(255,255,255,.028);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;
}
.accordion summary{
  cursor:pointer;list-style:none;padding:20px 54px 20px 24px;font-weight:700;font-size:16.5px;
  position:relative;color:var(--white);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:24px;color:var(--cyan);transition:transform .3s;
}
.accordion details[open] summary::after{content:"–";color:var(--pink)}
.accordion .acc-body{padding:0 24px 22px;color:var(--muted);font-size:15.5px}
.accordion .acc-body ul{margin:0 0 14px 20px}
.accordion .acc-body li{margin-bottom:6px}
/* Sub-heading inside a panel, e.g. the participant acknowledgement waiver. */
.accordion .acc-body .acc-subhead{
  font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:18px 0 8px;
}

/* ---------- Forms ---------- */
.form-toggle{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
/* No-JS: both forms visible & usable. JS collapses to the tabbed toggle. */
html.js #form-group{display:none}
.req{color:var(--pink)}
/* min-width:0 overrides the browser's min-width:min-content on fieldset, which
   otherwise stops it shrinking and makes it overflow narrow columns. */
.ezy-fieldset{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 18px;margin-bottom:18px;min-width:0}
.ezy-fieldset legend{padding:0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.check-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* Specificity must beat `.field label{display:block}`, or the box detaches
   from its text and inherits the uppercase field-label styling. */
.check-grid label.check{
  display:flex;align-items:center;gap:10px;margin-bottom:0;cursor:pointer;min-width:0;
  font-size:15px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--muted);
  padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:box-shadow .25s,background .25s;
}
.check-grid label.check:hover{box-shadow:inset 0 0 0 1px rgba(23,243,255,.45);background:rgba(255,255,255,.045)}
.check-grid label.check:has(input:checked){box-shadow:inset 0 0 0 1px rgba(23,243,255,.7);background:rgba(23,243,255,.07)}
.check-grid label.check span{min-width:0;line-height:1.35}
/* The attribute selector is deliberate: it has to outrank `.field input`, which
   is declared later in this file and would otherwise stretch the box to 100%. */
.check-grid input[type="checkbox"],.check input[type="checkbox"]{
  width:18px;height:18px;min-width:18px;padding:0;margin:0;border-radius:4px;
  accent-color:var(--cyan);flex:0 0 auto;
}
.map-embed{margin-top:26px;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(23,243,255,.25);line-height:0}
.map-embed iframe{display:block;filter:grayscale(.2) contrast(1.05)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
/* Text-style controls only. Checkboxes and radios must be excluded: they were
   being caught by this rule and blown up to width:100% with 14px padding,
   which pushed their label text clean outside the form card. */
.field input:not([type="checkbox"]):not([type="radio"]),.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:14px;font-family:var(--sans);font-size:15.5px;color:var(--white);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);outline:none;transition:border-color .3s,box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(23,243,255,.6);box-shadow:0 0 0 3px rgba(23,243,255,.12)}
.field input::placeholder,.field textarea::placeholder{color:rgba(248,244,238,.42);opacity:1}
/* Chrome paints autofilled fields near-white with dark text, which looks broken
   on a dark form. The inset shadow is the only way to override that fill. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill{
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow:0 0 0 1000px #101019 inset;
  caret-color:var(--white);
  transition:background-color 9999s ease-out 0s;
}
/* The native date picker button is drawn by the browser; colour-scheme (set on
   :root) makes it light, this just makes it a comfortable hit target. */
.field input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.75;cursor:pointer;padding:2px;
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:#0a0a12;color:#fff}
.field textarea{min-height:120px;resize:vertical}
/* align-items:end keeps the two inputs on a row level with each other when one
   label wraps to two lines and the other doesn't. */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.field-hint{display:block;margin-top:7px;font-size:13px;line-height:1.4;color:var(--soft)}
.form-note{font-size:13.5px;color:var(--soft);margin-top:14px}
.form-msg{margin-bottom:22px;padding:16px 20px;border-radius:16px;font-weight:600}
.form-msg.ok{background:rgba(130,255,122,.08);box-shadow:inset 0 0 0 1px rgba(130,255,122,.4);color:#c8ffc4}
.form-msg.err{background:rgba(255,110,110,.08);box-shadow:inset 0 0 0 1px rgba(255,110,110,.4);color:#ffc4c4}
.field-error{display:block;margin-top:7px;font-size:13.5px;font-weight:600;color:#ffb4b4}
.field [aria-invalid="true"]{border-color:rgba(255,110,110,.75)!important;box-shadow:0 0 0 3px rgba(255,110,110,.14)!important}
.ezy-fieldset[aria-invalid="true"]{border-color:rgba(255,110,110,.75)}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- Contact info list ----------
   The column ratio lives here, not in a style="" attribute on the template:
   an inline style beats the stylesheet, so the grid never collapsed at the
   mobile breakpoint and the page scrolled sideways on a phone. */
.contact-grid{grid-template-columns:1.25fr .75fr;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-item{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;margin-bottom:26px}
.contact-item h3,.contact-item p{min-width:0;overflow-wrap:anywhere}
.contact-icon{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:20px;
  background:rgba(23,243,255,.07);box-shadow:inset 0 0 0 1px rgba(23,243,255,.35),0 0 22px rgba(23,243,255,.12);
}
.contact-item h3{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:5px}
.contact-item p,.contact-item a{color:var(--muted);font-size:16px;margin:0}
.socials{display:flex;gap:14px;margin-top:8px}
.socials a{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--white);
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(23,243,255,.35);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease,color .35s ease,background .35s ease;
}
/* Idle drift so the icons read as alive before anyone touches them, then a
   lift and glow on hover (spit.com.au-style motion). */
.socials a{animation:socialFloat 4.2s ease-in-out infinite}
.socials a:nth-child(2){animation-delay:.5s}
.socials a:nth-child(3){animation-delay:1s}
.socials a:nth-child(4){animation-delay:1.5s}
@keyframes socialFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.socials a:hover,.socials a:focus-visible{
  animation:none;
  transform:translateY(-7px) scale(1.08);
  box-shadow:inset 0 0 0 1px var(--cyan),0 12px 26px rgba(23,243,255,.35);
  background:rgba(23,243,255,.10);color:var(--cyan);opacity:1;
}
.socials a.soc-whatsapp:hover,.socials a.soc-whatsapp:focus-visible{
  box-shadow:inset 0 0 0 1px #25d366,0 12px 26px rgba(37,211,102,.4);
  background:rgba(37,211,102,.12);color:#4dff9e;
}
.socials a svg{display:block}
.whatsapp-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-weight:750;color:#04150a!important;
  background:linear-gradient(100deg,#4dff9e,#25d366);box-shadow:0 0 30px rgba(37,211,102,.35);transition:transform .3s;
}
.whatsapp-btn:hover{transform:translateY(-2px);opacity:1}
.whatsapp-btn svg,.insta-btn svg{flex:0 0 auto}
/* Instagram, in its own brand gradient so it reads at a glance. */
.insta-btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:999px;font-weight:750;color:#fff!important;
  background:linear-gradient(100deg,#f9ce34,#ee2a7b 52%,#6228d7);
  box-shadow:0 0 30px rgba(238,42,123,.3);transition:transform .3s;
}
.insta-btn:hover{transform:translateY(-2px);opacity:1}
.connect-row{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0}

/* ---------- Integration & Support ---------- */
.resource-card{display:flex;flex-direction:column;gap:8px}
.resource-card .tag{align-self:flex-start}
.resource-card .btn-primary{align-self:flex-start;margin-top:auto}
/* The free trial is the line the client wants read first, so it carries the
   gold and the size. The partner rate below it is deliberately quieter: white,
   small and plain, so it informs without competing. */
.resource-card .trial-headline{
  margin:0;font-family:var(--serif);font-size:clamp(21px,2vw,27px);color:var(--gold);
  text-shadow:0 0 20px rgba(255,193,90,.35);line-height:1.3;
}
.resource-card .price-lead{margin:6px 0 0;font-size:15px}
.resource-card .price-headline{
  margin:0;font-size:16px;font-weight:700;color:var(--white);
}
.resource-card .price-public{margin:0 0 6px;font-size:14px;color:var(--soft)}
/* Two headline cards, centred as a pair rather than stretched across the row. */
.feature-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);
  max-width:900px;margin:0 auto;
}
@media(max-width:760px){.feature-pair{grid-template-columns:1fr}}
.helpline{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15.5px;align-items:flex-start}
.helpline span:first-child{color:var(--white);font-weight:600}
.helpline span:last-child{color:var(--gold);font-weight:700;letter-spacing:.03em;white-space:nowrap}
/* What the line is for, under its name. Keeps the number column clean. */
.helpline small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--soft)}

/* ---------- Story / About ---------- */
.eye-banner{
  position:relative;width:100%;height:clamp(180px,26vw,320px);border-radius:28px;overflow:hidden;margin-bottom:34px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px rgba(0,0,0,.4);
}
.eye-banner img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:contrast(1.03) saturate(.94)}
.eye-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 45%,rgba(3,3,6,.55));
}
.story{max-width:760px;margin:0 auto}
.story p{font-size:clamp(16.5px,1.25vw,18.5px)}
.story .highlight{
  font-family:var(--serif);font-size:clamp(21px,2vw,27px);line-height:1.5;color:var(--white);
  margin:34px 0;text-align:center;
}
.story .highlight em{
  font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* "Love & Grace," sits tight above the signature rather than a paragraph away. */
.story .sign-off{margin:26px 0 0;color:rgba(248,244,238,.85)}
.signature{font-family:var(--serif);font-size:24px;color:var(--gold);margin-top:6px;font-style:italic}

/* ---------- For Women page: the "whisper" bullet lists ---------- */
.whisper-list{list-style:none;margin:0 auto 26px;display:grid;gap:12px}
.whisper-list li{
  position:relative;padding:14px 18px 14px 46px;border-radius:16px;
  background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  color:var(--muted);font-size:clamp(15.5px,1.2vw,17px);line-height:1.6;
}
.whisper-list li::before{
  content:"";position:absolute;left:18px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 14px var(--pink);
}
.ezy-meaning{display:flex;gap:clamp(14px,3vw,34px);justify-content:center;flex-wrap:wrap;margin:34px 0}
.ezy-meaning .word{text-align:center}
.ezy-meaning .letter{font-family:var(--serif);font-size:clamp(38px,4.5vw,58px);display:block;
  background:linear-gradient(140deg,var(--cyan),var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.ezy-meaning .meaning{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;text-align:center;padding:clamp(60px,8vw,100px) 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
}
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%,rgba(139,92,255,.16),transparent 60%),
    radial-gradient(ellipse at 20% 0%,rgba(23,243,255,.08),transparent 50%),
    radial-gradient(ellipse at 80% 0%,rgba(255,59,199,.08),transparent 50%);
}
.cta-band .wrap{position:relative;z-index:2}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid rgba(255,255,255,.07);padding:56px 0 34px;font-size:14.5px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.15fr 1.15fr;gap:clamp(22px,3vw,44px)}
@media(max-width:1140px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-heading{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:16px;font-weight:800}
.site-footer ul{list-style:none}
.site-footer ul li{margin-bottom:10px}
.site-footer a{color:rgba(248,244,238,.75)}
.site-footer a:hover{color:var(--cyan)}
.footer-tagline{color:var(--soft);max-width:300px;margin-top:14px}
.footer-bottom{
  margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--soft);font-size:13px;
}
.footer-music-credit{display:inline-block;color:var(--soft)}
.footer-music-credit a{color:var(--soft)}
.footer-music-credit a:hover{color:var(--cyan)}

/* ---------- 9D Verified Facilitator badge ----------
   9D licence the mark black-on-light and publish no white version, so it sits
   on its own light plaque in the dark footer rather than being recoloured. */
.footer-accreditation{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.facilitator-badge{
  display:block;width:150px;height:auto;margin-top:26px;
  padding:15px 17px;background:var(--white);border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  transition:transform .3s,box-shadow .3s;
}
.facilitator-badge-link{display:inline-block}
.facilitator-badge-link:hover .facilitator-badge,
.facilitator-badge-link:focus-visible .facilitator-badge{
  transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.6);
}
.facilitator-badge-link:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:14px}

/* ---------- Ambient audio control ---------- */
.ambient{
  position:fixed;z-index:70;
  left:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  display:flex;align-items:center;gap:12px;
}
.ambient[hidden]{display:none}
.ambient-btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(248,244,238,.88);
  background:rgba(5,5,10,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:9px 17px 9px 14px;
  transition:border-color .3s,color .3s,box-shadow .3s;
}
.ambient-btn:hover{border-color:rgba(23,243,255,.55);color:#fff;box-shadow:0 0 22px rgba(23,243,255,.18);opacity:1}
.ambient-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.ambient-eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.ambient-eq i{display:block;width:2px;height:3px;border-radius:2px;background:linear-gradient(180deg,var(--cyan),var(--pink))}
.ambient.playing .ambient-btn{border-color:rgba(23,243,255,.4)}
.ambient.playing .ambient-eq i{animation:ezyEq 1.15s ease-in-out infinite}
.ambient.playing .ambient-eq i:nth-child(2){animation-delay:.16s}
.ambient.playing .ambient-eq i:nth-child(3){animation-delay:.32s}
.ambient.playing .ambient-eq i:nth-child(4){animation-delay:.48s}
@keyframes ezyEq{0%,100%{height:3px}50%{height:13px}}
.ambient-credit{
  font-size:11.5px;letter-spacing:.04em;color:rgba(248,244,238,.5);
  max-width:230px;line-height:1.35;
}
a.ambient-credit:hover,a.ambient-credit:focus-visible{color:rgba(248,244,238,.85);opacity:1}
@media(max-width:980px){
  .ambient{left:12px;bottom:12px}
  .ambient-credit{display:none}
}
/* On a narrow phone this fixed control sat on top of whatever was behind it,
   including the hero buttons. Collapse it to the equaliser icon; the label
   stays in the accessible name so it is still announced and still labelled. */
@media(max-width:520px){
  .ambient-btn{padding:11px 13px;gap:0}
  .ambient-btn .ambient-txt{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
}
@media(prefers-reduced-motion:reduce){
  .ambient.playing .ambient-eq i{animation:none;height:9px}
}

.footer-disclaimer{margin-top:26px;font-size:12.5px;color:rgba(248,244,238,.64);max-width:900px}

/* ---------- Generic content (page.php / posts / block editor output) ----------
   Everything below exists so content the client writes in WordPress, and markup
   any plugin drops into the page, lands on styles that fit the dark theme
   instead of falling back to unstyled browser defaults. */
.entry-content{max-width:820px;margin:0 auto}
.entry-content ul,.entry-content ol{margin:0 0 20px 24px;color:var(--muted)}
.entry-content li{margin-bottom:8px}
.entry-content h2,.entry-content h3{margin-top:36px}
.entry-content h4,.entry-content h5,.entry-content h6{
  font-family:var(--serif);font-weight:400;line-height:1.2;margin:30px 0 10px;color:var(--white);
}
.entry-content h4{font-size:22px}
.entry-content h5{font-size:19px}
.entry-content h6{font-size:17px;letter-spacing:.04em;text-transform:uppercase;font-family:var(--sans);font-weight:800}
.entry-content blockquote{margin:26px 0;padding-left:18px;border-left:2px solid rgba(23,243,255,.55);font-style:italic;color:rgba(248,244,238,.85)}
.entry-content hr,.wp-block-separator{
  border:0;height:1px;margin:36px 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.entry-content table,.wp-block-table table{
  width:100%;border-collapse:collapse;margin-bottom:22px;font-size:15.5px;
}
.entry-content th,.entry-content td{
  padding:11px 14px;border:1px solid rgba(255,255,255,.12);text-align:left;color:var(--muted);
}
.entry-content th{color:var(--white);font-weight:700;background:rgba(255,255,255,.04)}
/* Tables and long code must scroll inside their own box, never widen the page. */
.wp-block-table{overflow-x:auto}
.entry-content pre,.wp-block-code,.wp-block-preformatted{
  overflow-x:auto;padding:18px 20px;border-radius:16px;font-size:14px;
  background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:var(--muted);
}
.entry-content code{
  padding:2px 6px;border-radius:6px;font-size:.92em;
  background:rgba(255,255,255,.07);color:#a9e9ff;
}
.entry-content pre code{padding:0;background:none;color:inherit}

/* --- WordPress alignment + media classes --- */
.alignleft{float:left;margin:6px 26px 20px 0}
.alignright{float:right;margin:6px 0 20px 26px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignnone{margin:6px 0 20px}
.entry-content .alignwide{
  max-width:min(1100px,92vw);margin-left:50%;transform:translateX(-50%);
}
.entry-content .alignfull{
  max-width:100vw;width:100vw;margin-left:50%;transform:translateX(-50%);
}
@media(max-width:640px){
  .alignleft,.alignright{float:none;margin:6px 0 20px}
}
.wp-caption{max-width:100%}
.wp-caption img{margin:0 auto}
.wp-caption-text,.wp-element-caption,.wp-block-image figcaption,.gallery-caption{
  margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--soft);text-align:center;
}
.entry-content figure,.wp-block-image{margin:0 0 24px}
.entry-content img,.wp-block-image img{border-radius:16px}
.wp-block-gallery,.gallery{margin-bottom:24px}
.gallery{display:flex;flex-wrap:wrap;gap:12px}
.gallery-item{flex:1 1 160px;margin:0}
.wp-block-button__link{
  display:inline-block;border-radius:999px;padding:15px 34px;font-weight:750;
  background:linear-gradient(100deg,#22f0ff,#7065ff 50%,#ff3bc7);color:#fff;
}
.wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.is-style-outline .wp-block-button__link{
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.25);
}
.wp-block-quote{margin:26px 0;padding-left:18px;border-left:2px solid rgba(23,243,255,.55);font-style:italic}
.wp-block-pullquote{text-align:center;margin:36px 0}
.wp-block-embed,.wp-block-video{margin-bottom:24px}
.wp-block-embed iframe,.wp-block-video video{max-width:100%;border-radius:16px}
/* Required by WordPress for sticky posts and post-author comment highlighting. */
.sticky{position:relative}
.bypostauthor{display:block}

/* --- Post list entries --- */
.entry{margin-bottom:52px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.07)}
/* On a single post there is nothing to separate from, so drop the rule and its
   spacing: it was stacking with the comments divider into a large empty gap. */
.entry:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}
.entry-title{margin-bottom:12px}
.entry-title a{color:inherit}
.entry-title a:hover{color:var(--cyan);opacity:1}
.entry-thumb{margin:0 0 22px}
.entry-thumb img{width:100%;border-radius:20px}

/* --- Pagination (posts, comments, multi-page posts) --- */
.pagination,.page-links,.comments-pagination{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:36px 0 0;font-size:15px;
}
.pagination .nav-links,.comments-pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap}
.pagination .page-numbers,.page-links > a,.page-links > span,.comments-pagination .page-numbers{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;
  color:rgba(255,255,255,.85);font-weight:700;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .3s,color .3s;
}
.pagination .page-numbers:hover,.page-links > a:hover{box-shadow:inset 0 0 0 1px rgba(23,243,255,.6);color:var(--cyan);opacity:1}
.pagination .page-numbers.current,.page-links > span:not(.page-links-title){
  color:#fff;box-shadow:none;background:linear-gradient(100deg,#22f0ff,#7065ff 50%,#ff3bc7);
}
.screen-reader-text + .nav-links{margin-top:0}

/* --- Comments --- */
.comments-area{max-width:820px;margin:60px auto 0;padding-top:40px;border-top:1px solid rgba(255,255,255,.08)}
.comments-title{font-size:clamp(24px,2.4vw,32px)}
.comment-list,.comment-list .children{list-style:none;margin:0;padding:0}
.comment-list .children{margin-left:clamp(16px,4vw,44px);padding-left:18px;border-left:1px solid rgba(255,255,255,.09)}
.comment-list li.comment{margin-bottom:24px}
.comment-body{
  position:relative;border-radius:20px;padding:22px 24px;
  background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.comment-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;font-size:14px}
.comment-author .fn{color:var(--white);font-weight:700;font-style:normal}
.comment-author img.avatar{border-radius:50%}
.comment-metadata,.comment-metadata a{color:var(--soft);font-size:13px}
.comment-content p:last-child{margin-bottom:0}
.reply{margin-top:10px;font-size:14px;font-weight:700}
.comment-respond{margin-top:40px}
.comment-reply-title{font-size:clamp(22px,2.2vw,28px);margin-bottom:16px}
.comment-form{display:grid;gap:16px}
.comment-form label{
  display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:8px;
}
.comment-form input[type="text"],.comment-form input[type="email"],
.comment-form input[type="url"],.comment-form textarea{
  width:100%;padding:14px 16px;border-radius:14px;font-family:var(--sans);font-size:15.5px;color:var(--white);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);outline:none;
}
.comment-form input:focus,.comment-form textarea:focus{border-color:rgba(23,243,255,.6);box-shadow:0 0 0 3px rgba(23,243,255,.12)}
.comment-form textarea{min-height:150px;resize:vertical}
.comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:10px}
.comment-form .comment-form-cookies-consent label{margin:0;text-transform:none;letter-spacing:normal;font-weight:500;font-size:14.5px}
.comment-notes,.form-submit{margin:0}
.no-comments{color:var(--soft)}

/* --- Widgets (footer widget area, and anything a plugin registers) --- */
.footer-widgets{padding:clamp(36px,5vw,60px) 0 0}
.footer-widgets .wrap{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.widget{font-size:15px}
.widget-title{font-size:18px;margin-bottom:12px}
.widget ul{list-style:none;margin:0;padding:0}
.widget li{margin-bottom:9px;color:var(--muted)}
.widget a{color:rgba(248,244,238,.8)}
.widget a:hover{color:var(--cyan)}
.widget select,.widget input[type="search"],.widget input[type="text"]{
  width:100%;padding:11px 14px;border-radius:12px;font-family:var(--sans);font-size:15px;color:var(--white);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
}

/* --- Search form (core markup, used by widgets and plugins) --- */
.search-form{display:flex;gap:10px;flex-wrap:wrap}
.search-form label{flex:1 1 180px;margin:0}
.search-form .search-field{
  width:100%;padding:13px 16px;border-radius:999px;font-family:var(--sans);font-size:15.5px;color:var(--white);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);outline:none;
}
.search-form .search-field:focus{border-color:rgba(23,243,255,.6)}
.search-form .search-submit{
  border:none;cursor:pointer;border-radius:999px;padding:13px 26px;color:#fff;font-weight:750;font-family:var(--sans);
  background:linear-gradient(100deg,#22f0ff,#7065ff 50%,#ff3bc7);
}

.page-hero{padding:150px 0 30px;position:relative}

/* ---------- Reveal on scroll ----------
   Scoped to html.js: the hidden state only ever applies when the script that
   un-hides it is running. Unscoped, a JS error (or a plugin breaking the
   script queue, or JS being off) left whole sections of every page invisible
   with no way for a visitor to recover. */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- Accessibility utilities ---------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#050509;color:var(--cyan);padding:12px 20px;border-radius:0 0 12px 0;font-weight:700;
  box-shadow:0 0 0 1px rgba(23,243,255,.4);
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,
.btn-primary:focus-visible,.btn-secondary:focus-visible,.pill:focus-visible,
.aud-tab:focus-visible,.filter-pill:focus-visible,.nav-toggle:focus-visible,
.whatsapp-btn:focus-visible,.socials a:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:12px;
}
.check input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- Video Resources page ---------- */
.video-feature{border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.5)}
.video-feature-meta{display:flex;flex-direction:column;gap:2px;padding:16px 20px;background:rgba(0,0,0,.35)}
.video-feature-meta strong{font-size:15px}
.video-feature-meta span{font-size:13px;color:var(--soft)}
.video-poster{
  position:relative;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%,rgba(23,243,255,.22),transparent 55%),
    radial-gradient(circle at 72% 68%,rgba(255,59,199,.20),transparent 55%),
    linear-gradient(160deg,#0b0b16,#05050a);
}
.video-poster.feature{aspect-ratio:16/9}
.video-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.video-poster.cat-beginner{background:radial-gradient(circle at 40% 35%,rgba(23,243,255,.30),transparent 60%),linear-gradient(160deg,#08121a,#05050a)}
.video-poster.cat-stress{background:radial-gradient(circle at 40% 35%,rgba(255,59,199,.28),transparent 60%),linear-gradient(160deg,#160a13,#05050a)}
.video-poster.cat-meditation{background:radial-gradient(circle at 40% 35%,rgba(139,92,255,.30),transparent 60%),linear-gradient(160deg,#0f0a1a,#05050a)}
.video-poster.cat-nervous{background:radial-gradient(circle at 40% 35%,rgba(23,243,255,.26),transparent 60%),linear-gradient(160deg,#08121a,#05050a)}
.video-poster.cat-sleep{background:radial-gradient(circle at 40% 35%,rgba(99,116,255,.30),transparent 60%),linear-gradient(160deg,#0a0e1c,#05050a)}
.video-poster.cat-energy{background:radial-gradient(circle at 40% 35%,rgba(255,193,90,.28),transparent 60%),linear-gradient(160deg,#181307,#05050a)}
.video-poster.cat-emotional{background:radial-gradient(circle at 40% 35%,rgba(255,59,199,.26),transparent 60%),linear-gradient(160deg,#160a13,#05050a)}
.play-btn{
  position:relative;z-index:2;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  font-size:20px;color:#fff;padding-left:4px;
  background:linear-gradient(100deg,rgba(34,240,255,.9),rgba(255,59,199,.9));
  box-shadow:0 0 30px rgba(23,243,255,.4);transition:transform .3s;
}
a.video-poster:hover .play-btn{transform:scale(1.1)}
.video-duration{position:absolute;top:12px;right:12px;z-index:2;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff}
.video-soon{position:absolute;bottom:12px;left:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:var(--soft)}
.video-filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px}
.filter-pill{
  padding:10px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.16);cursor:pointer;
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.85);font-weight:700;font-size:14px;font-family:var(--sans);transition:all .3s;
}
.filter-pill:hover{border-color:rgba(23,243,255,.5)}
.filter-pill.active{
  border-color:transparent;color:#fff;
  background:linear-gradient(#0a0a12,#0a0a12) padding-box,linear-gradient(90deg,var(--cyan),var(--violet),var(--pink)) border-box;
  border:1px solid transparent;box-shadow:0 0 22px rgba(23,243,255,.2),0 0 22px rgba(255,59,199,.16);
}
.video-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.video-grid > .video-card{flex:1 1 250px;max-width:calc((100% - 54px)/4)}
@media(max-width:1000px){.video-grid > .video-card{max-width:calc((100% - 18px)/2)}}
@media(max-width:560px){.video-grid > .video-card{max-width:100%}}
.video-card{
  border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),rgba(0,0,0,.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 18px 50px rgba(0,0,0,.4);transition:transform .3s,box-shadow .3s;
}
.video-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(23,243,255,.28),0 24px 60px rgba(0,0,0,.55)}
.video-card.is-hidden{display:none}
.video-body{padding:18px 18px 20px}
.video-body h3{font-size:19px;margin-bottom:6px}
.video-body p{font-size:14px;line-height:1.6;color:rgba(248,244,238,.76);margin-bottom:12px}
.cat-tag-beginner,.cat-tag-nervous{color:#a9e9ff;box-shadow:inset 0 0 0 1px rgba(23,243,255,.4)}
.cat-tag-stress,.cat-tag-emotional{color:#ffb8e5;box-shadow:inset 0 0 0 1px rgba(255,59,199,.4)}
.cat-tag-meditation{color:#d9c8ff;box-shadow:inset 0 0 0 1px rgba(139,92,255,.5)}
.cat-tag-sleep{color:#c3caff;box-shadow:inset 0 0 0 1px rgba(99,116,255,.5)}
.cat-tag-energy{color:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,193,90,.45)}
.subscribe-band{margin-top:36px;display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between}

@media(max-width:1100px){
  .hero{padding-top:110px}
  .hero-grid{grid-template-columns:1fr}
  /* Content first once the hero stacks. The breathing circle is beautiful but
     it is decoration: leading with it pushed the headline and the two buttons
     off the first screen on a phone, so a visitor's opening view said nothing
     about what the business does. */
  .hero-copy{order:1;max-width:none}
  .stage{order:2;min-height:520px}
  .meditation-shell{width:min(84vw,560px)}
}
@media(max-width:700px){
  /* Let the hero grow to fit its content rather than forcing a full screen:
     100vh on a phone is measured against the *largest* viewport, so the
     browser chrome crops the bottom of the section. */
  .hero{min-height:auto;padding:96px 0 26px}
  .stage{min-height:0}
  .meditation-shell{width:min(88vw,420px)}
  /* Tightened so the headline, the lead and both buttons all fit the first
     screen on a phone once the browser's own chrome is accounted for. */
  .hero h1{font-size:34px;margin-bottom:14px}
  .hero .kicker{margin-bottom:10px}
  .hero .subline{font-size:16px;margin-bottom:12px}
  .hero-copy .lead{font-size:16px}
  .hero-copy p{font-size:15.5px;margin-bottom:10px}
  .hero-actions{margin-top:20px}
}
@media(max-width:640px){
  .struggle-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  html.js .reveal,.reveal{opacity:1;transform:none}
}

/* ---------- Community Connections: category headings ---------- */
/* The client asked for the six category headings to be "in colour". They take
   the same cyan-violet-pink gradient the highlight lines use, with a solid
   colour fallback for browsers that do not support background-clip:text. */
.cat-heading{
  color:var(--cyan);
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));
  -webkit-background-clip:text;background-clip:text;
  margin-bottom:0;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .cat-heading{color:transparent}
}