/* ============================================================
   BIBA — Salon Website Template (every BIBA salon)
   BLACK & WHITE · URBAN / FITZROY GRUNGE · premium but gritty
     Type    : Poppins 700–900 uppercase (biba.com.au home) + Roboto
     Brand   : true black / raw white, monochrome only — NO gold
     Skins   : two concepts — BLACK site & WHITE site — plus a
               light/dark toggle (html[data-theme="day"])
     Motion  : Lenis everywhere except mobile + reveal stagger
     Edges   : squared-off (2–8px), hard 1px borders, heavy grain
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --pearl:#ffffff; --pearl-lo:#9a9a9a; --pearl-hi:#ffffff;
  --btn-ink:#0a0a0a;
  --bg:#080808; --bg-2:#0f0f0f; --bg-3:#161616;
  --ink:#f2f2f0; --ink-soft:#b5b5b1; --ink-mute:#7d7d79;
  --line:rgba(255,255,255,.16); --line-hard:rgba(255,255,255,.32);
  --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.07);
  --radius:2px; --radius-sm:2px; --radius-btn:0px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.9);
  --edge:4px 4px 0 rgba(255,255,255,.08);
  --glow:0 0 0 1px rgba(255,255,255,.4);
  --grad-pearl:linear-gradient(100deg,#fff,#e6e6e4 55%,#9a9a9a);
  --aura-a:rgba(255,255,255,.07); --aura-b:rgba(255,255,255,.04);
  --bar-bg:rgba(8,8,8,.86);
  --grain:.55;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
}

/* ---- DAY / WHITE skin ---- */
html[data-theme="day"]{
  --pearl:#0a0a0a; --pearl-lo:#3d3d3d; --pearl-hi:#1c1c1c;
  --btn-ink:#ffffff;
  --bg:#f4f3f0; --bg-2:#ebeae6; --bg-3:#e2e1dc;
  --ink:#101010; --ink-soft:#484844; --ink-mute:#82827d;
  --line:rgba(0,0,0,.18); --line-hard:rgba(0,0,0,.42);
  --panel:rgba(0,0,0,.035); --panel-2:rgba(0,0,0,.06);
  --shadow:0 24px 50px -28px rgba(0,0,0,.3);
  --edge:4px 4px 0 rgba(0,0,0,.1);
  --glow:0 0 0 1px rgba(0,0,0,.45);
  --grad-pearl:linear-gradient(100deg,#222,#0a0a0a 55%,#000);
  --aura-a:rgba(0,0,0,.045); --aura-b:rgba(0,0,0,.028);
  --bar-bg:rgba(244,243,240,.9);
  --grain:.3;
}

*{box-sizing:border-box}
html{scroll-padding-top:96px}
section[id]{scroll-margin-top:96px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Roboto',system-ui,sans-serif; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
}
img{max-width:100%}
::selection{background:var(--ink); color:var(--bg)}

/* ---- backdrop: faint aura + HEAVY grain (the grunge) ---- */
.bg-aura{position:fixed; inset:-20%; z-index:-2; pointer-events:none}
.bg-aura i{position:absolute; border-radius:50%; filter:blur(110px); opacity:.6; will-change:transform}
.bg-aura i:nth-child(1){width:55vw;height:55vw; left:58%; top:-20%;
  background:radial-gradient(circle,var(--aura-a),transparent 65%);
  animation:aura1 30s var(--ease) infinite alternate}
.bg-aura i:nth-child(2){width:48vw;height:48vw; left:-14%; top:55%;
  background:radial-gradient(circle,var(--aura-b),transparent 65%);
  animation:aura2 38s var(--ease) infinite alternate}
.bg-aura i:nth-child(3){display:none}
@keyframes aura1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-6vw,5vh,0) scale(1.15)}}
@keyframes aura2{from{transform:translate3d(0,0,0)}to{transform:translate3d(5vw,-4vh,0) scale(1.1)}}
body::after{ /* film grain — cranked for grit */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- type: Poppins heavy uppercase (biba.com.au) ---- */
h1,h2,h3,.display{font-family:'Poppins',sans-serif; font-weight:800;
  line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; margin:0}
h1{font-size:clamp(2.4rem,6.4vw,5rem); line-height:.98; font-weight:900; letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,4.2vw,3rem); font-weight:800}
h3{font-size:clamp(1.1rem,1.9vw,1.4rem)}
h1 em,h2 em,h3 em{font-style:normal; -webkit-text-stroke:1.5px var(--ink); color:transparent}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem); color:var(--ink-soft); font-weight:300}
.eyebrow{font-family:'Poppins',sans-serif; text-transform:uppercase; letter-spacing:.34em; font-weight:600; font-size:.72rem; color:var(--ink-mute)}
.eyebrow::before{content:"— "}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
section{padding:clamp(56px,8.5vw,112px) 0; position:relative}
.shead{text-align:center; max-width:800px; margin:0 auto}
.shead p{margin-top:14px}

/* ---- panels (hard-edged, screen-print offset) ---- */
.glass,.glass-soft{position:relative; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease)}
.glass-soft{background:var(--panel); border-radius:var(--radius-sm); box-shadow:none}
.card-lift:hover{transform:translate(-3px,-3px); border-color:var(--line-hard); box-shadow:var(--edge),var(--shadow)}

/* ---- buttons: squared, loud ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:var(--radius-btn); text-decoration:none; cursor:pointer;
  border:0; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  position:relative; overflow:hidden; white-space:nowrap}
.btn svg{width:1.05em; height:1.05em; flex:none}
.btn-primary{background:var(--ink); color:var(--btn-ink); box-shadow:0 0 0 1px var(--ink)}
.btn-primary:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--line-hard), 0 0 0 1px var(--ink)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line-hard)}
.btn-ghost:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--line); background:var(--panel-2)}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center}

.chip{display:inline-flex; align-items:center; gap:.5em; font-size:.78rem; font-weight:500;
  font-family:'Poppins',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-btn); padding:.55rem .95rem}
.chip svg{width:1em; height:1em; color:var(--ink); flex:none}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; justify-content:center}

/* ---- concept strip ---- */
.concept-strip{position:relative; z-index:60; text-align:center;
  font:600 11px/1.5 'Poppins',sans-serif; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--bg-2); border-bottom:1px solid var(--line);
  padding:9px 14px}
.concept-strip a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-hard)}

/* ---- navbar: full-width hard bar ---- */
.navbar{position:fixed; top:0; left:0; right:0; z-index:90;
  transition:transform .5s var(--ease), opacity .4s var(--ease)}
.navbar.nav-hide{transform:translateY(-110%); opacity:0; pointer-events:none}
.navbar .bar{display:flex; align-items:center; gap:18px;
  background:var(--bar-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line); padding:12px clamp(16px,3vw,34px)}
.navbar .logo{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none}
.navbar .logo img{height:40px; width:auto; display:block; border-radius:2px; border:1px solid var(--line-hard)}
html[data-theme="day"] .navbar .logo img{filter:invert(1)}
.navbar .logo span{font-family:'Poppins',sans-serif; font-weight:900; font-size:1.05rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink)}
.navbar nav{display:flex; gap:2px; margin-left:auto}
.navbar nav a{font:600 .76rem/1 'Poppins'; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  padding:.7rem .85rem; transition:color .3s}
.navbar nav a:hover{color:var(--ink)}
.navbar .btn{padding:.78rem 1.3rem; font-size:.74rem}
@media(max-width:920px){.navbar nav{display:none}.navbar .ddwrap{margin-left:auto}}

/* ---- bottom CTA dock ---- */
.dock{position:fixed; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); z-index:90;
  transform:translate(-50%,170%); opacity:0; width:min(calc(100% - 24px),620px);
  transition:transform .55s var(--ease), opacity .45s var(--ease); pointer-events:none}
.dock.show{transform:translate(-50%,0); opacity:1; pointer-events:auto}
body.cta-in-view .dock{transform:translate(-50%,170%); opacity:0; pointer-events:none}
.dock .bar{display:flex; align-items:center; gap:16px;
  background:var(--bar-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-hard); border-radius:var(--radius-sm); padding:10px 10px 10px 18px;
  box-shadow:var(--edge),var(--shadow)}
.dock .meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.dock .meta b{font:700 .88rem/1.2 'Poppins'; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dock .meta span{font:600 .62rem/1 'Poppins'; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute)}
.dock .btn{margin-left:auto; flex:none; padding:.8rem 1.3rem; font-size:.74rem}
@media(max-width:480px){.dock .meta b{font-size:.8rem}.dock .btn{padding:.72rem 1rem}}

/* ---- hero ---- */
.hero{padding-top:clamp(120px,15vh,170px); padding-bottom:clamp(40px,6vw,70px)}
.hero .shead{max-width:900px}
.hero-img{position:relative; margin:clamp(28px,4.5vw,48px) auto 0; max-width:1020px;
  border-radius:var(--radius); overflow:hidden; background:#000;
  border:1px solid var(--line-hard); box-shadow:var(--edge),var(--shadow)}
.hero-img img{display:block; width:100%; aspect-ratio:16/8.2; object-fit:cover; filter:grayscale(1) contrast(1.08)}
.hero-img::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5),transparent 40%)}
.hero-img .hbadge{position:absolute; z-index:3; bottom:14px; left:14px; display:inline-flex; align-items:center; gap:.55em;
  font:600 .66rem/1 'Poppins'; letter-spacing:.2em; text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-btn); padding:.55rem .9rem}
.hero-img .hbadge .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ---- image cards (biba.com.au tile style: image + big word) ---- */
.imgcard{position:relative; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow); background:#000}
.imgcard img{display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.06); will-change:transform;
  filter:grayscale(1) contrast(1.08)}
.imgcard::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(0,0,0,.34)}
.imgcard .cap{position:absolute; z-index:2; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px}
.imgcard .cap b{display:block; font-family:'Poppins',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.15rem,2.2vw,1.7rem); line-height:1.1; letter-spacing:.02em; color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.6)}
.imgcard .cap span{font:600 .64rem/1.4 'Poppins'; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:6px}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(28px,4vw,46px)}
.gallery .imgcard{aspect-ratio:4/5}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery .imgcard:last-child{grid-column:1/-1; aspect-ratio:16/9}}

/* ---- services grid ---- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(28px,4vw,46px)}
.svc{padding:26px 24px; display:flex; flex-direction:column; gap:10px; border-left:3px solid var(--ink)}
.svc .num{font:800 .68rem/1 'Poppins',sans-serif; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute)}
.svc p{color:var(--ink-soft); font-size:.95rem; font-weight:300; margin:0}
.svc .more{margin-top:auto; padding-top:10px; font:700 .72rem/1 'Poppins'; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-hard); align-self:flex-start}
@media(max-width:880px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.svc-grid{grid-template-columns:1fr}}

/* ---- values ---- */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(28px,4vw,46px)}
.value{padding:24px 22px}
.value h3{font-size:1.05rem; margin-bottom:8px}
.value ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.value li{color:var(--ink-soft); font-size:.92rem; font-weight:300; padding-left:1.2em; position:relative}
.value li::before{content:"—"; position:absolute; left:0; color:var(--ink); font-weight:700; font-size:.8em; top:.3em}
@media(max-width:880px){.values{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.values{grid-template-columns:1fr}}

/* ---- heritage band ---- */
.heritage{position:relative; overflow:hidden; padding:clamp(80px,12vw,150px) 0}
.heritage .bgimg{position:absolute; inset:0; z-index:0}
.heritage .bgimg img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.4) contrast(1.1)}
.heritage .bgimg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,var(--bg),transparent 25%,transparent 70%,var(--bg))}
html[data-theme="day"] .heritage .bgimg img{filter:grayscale(1) brightness(1.05) contrast(.9) opacity(.25)}
.heritage .wrap{position:relative; z-index:1}
.heritage blockquote{font-family:'Poppins',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,2.3rem); line-height:1.18; letter-spacing:-.01em; margin:0; max-width:880px;
  border-left:4px solid var(--ink); padding-left:clamp(16px,2.5vw,28px)}
.heritage cite{display:block; margin-top:18px; font:600 .72rem/1 'Poppins'; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-mute); font-style:normal}
.h-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(30px,4vw,50px)}
.h-strip .imgcard{aspect-ratio:4/3}
.h-strip .imgcard .cap{justify-content:flex-end; align-items:flex-start; text-align:left}
.h-strip .imgcard .cap b{font-size:.95rem}
@media(max-width:640px){.h-strip{grid-template-columns:1fr}}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(26px,4vw,44px); overflow:hidden}
.stats>div{padding:22px 24px; text-align:center}
.stats>div+div{border-left:1px solid var(--line)}
.stats b{display:block; font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(1.9rem,3.8vw,2.8rem); line-height:1; color:var(--ink)}
.stats span{font:600 .66rem/1.6 'Poppins'; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute)}
@media(max-width:580px){.stats{grid-template-columns:1fr}.stats>div+div{border-left:0;border-top:1px solid var(--line)}}

/* ---- FAQ ---- */
.faq{max-width:840px; margin:clamp(26px,4vw,44px) auto 0; display:flex; flex-direction:column; gap:8px}
.faq details{padding:0; overflow:hidden}
.faq summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px;
  padding:17px 20px; font-family:'Poppins',sans-serif; font-weight:600; font-size:.92rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.2rem;
  color:var(--ink); transition:transform .35s var(--ease); flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 20px 18px; color:var(--ink-soft); font-weight:300; font-size:.95rem}

/* ---- forms ---- */
.form{max-width:660px; margin:clamp(26px,4vw,44px) auto 0; padding:clamp(24px,4vw,40px)}
.form .fgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form .fgrid .full{grid-column:1/-1}
@media(max-width:560px){.form .fgrid{grid-template-columns:1fr}}
.form label{display:block; font:600 .66rem/1 'Poppins'; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 7px 1px}
.form input,.form textarea,.form select{width:100%; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-btn); color:var(--ink); font:400 1rem/1.4 'Roboto'; padding:.85rem 1rem; outline:none;
  transition:border-color .3s; -webkit-appearance:none; appearance:none}
.form input:focus,.form textarea:focus{border-color:var(--line-hard)}
.form textarea{min-height:96px; resize:vertical}
.form .btn{width:100%; margin-top:16px}
.form .fine{text-align:center; font-size:.78rem; color:var(--ink-mute); margin:12px 0 0}
.form .ok{display:none; text-align:center; padding:34px 10px}
.form .ok h3{margin-bottom:8px}
.form.sent .ok{display:block}
.form.sent .fgrid,.form.sent .btn,.form.sent .fine,.form.sent .form-foot{display:none}
.form-foot{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:14px}
.form-foot .or{font:600 .66rem/1 'Poppins'; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute)}
.opts{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px}
.opt{cursor:pointer; user-select:none; font:600 .78rem/1 'Poppins'; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-btn); padding:.65rem 1rem;
  transition:all .25s var(--ease)}
.opt.on{background:var(--ink); color:var(--btn-ink); border-color:var(--ink); font-weight:700}

/* ---- steps (guided flows) ---- */
.steps-nav{display:flex; gap:8px; justify-content:center; margin:0 0 22px}
.steps-nav i{width:34px; height:4px; background:var(--line); transition:background .4s}
.steps-nav i.on{background:var(--ink)}
.step{display:none}
.step.on{display:block; animation:stepin .5s var(--ease)}
@keyframes stepin{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.step h3{text-align:center; margin-bottom:18px}
.step .opts{justify-content:center}
.step .opts .opt{padding:.8rem 1.2rem; font-size:.84rem}

/* ---- split ---- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,4vw,54px); align-items:center; margin-top:clamp(28px,4vw,46px)}
.split .imgcard{aspect-ratio:4/4.6}
.split .imgcard .cap{justify-content:flex-end; align-items:flex-start; text-align:left}
.split .txt h2{margin-bottom:14px}
.split .txt p{color:var(--ink-soft); font-weight:300}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ---- careers / roles ---- */
.roles{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:clamp(28px,4vw,46px)}
@media(max-width:760px){.roles{grid-template-columns:1fr}}
.role{padding:26px 24px; display:flex; flex-direction:column; gap:10px; border-left:3px solid var(--ink)}
.role .rtag{font:800 .64rem/1 'Poppins'; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute)}
.role ul{margin:4px 0 8px; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.role li{color:var(--ink-soft); font-size:.93rem; font-weight:300; padding-left:1.2em; position:relative}
.role li::before{content:"—"; position:absolute; left:0; color:var(--ink); font-size:.8em; top:.3em}
.role .btn{align-self:flex-start; margin-top:auto}

/* ---- pricing ---- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(30px,4vw,50px); align-items:stretch}
@media(max-width:820px){.plans{grid-template-columns:1fr}}
.plan{padding:clamp(26px,3.5vw,40px); display:flex; flex-direction:column}
.plan .ptag{font:800 .66rem/1 'Poppins'; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:14px}
.plan h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.plan .price{display:flex; align-items:baseline; gap:10px; margin:18px 0 4px}
.plan .price b{font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(2.5rem,4.8vw,3.6rem); line-height:1; color:var(--ink)}
.plan .price span{color:var(--ink-mute); font-size:.92rem}
.plan .was{color:var(--ink-mute); font-size:.95rem; margin:0 0 16px}
.plan ul{margin:18px 0 24px; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px}
.plan li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); font-weight:300; font-size:.96rem}
.plan li svg{width:1.1em; height:1.1em; flex:none; color:var(--ink); margin-top:.18em}
.plan .btn{margin-top:auto}
.plan.best{border-color:var(--line-hard); box-shadow:var(--edge),var(--shadow)}
.best-tag{position:absolute; top:-13px; left:24px; white-space:nowrap;
  font:700 .64rem/1 'Poppins'; letter-spacing:.22em; text-transform:uppercase; color:var(--btn-ink);
  background:var(--ink); border-radius:var(--radius-btn); padding:.55rem 1rem}
.save-band{margin-top:16px; padding:20px 26px; display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:center; text-align:center}
.save-band b{font-family:'Poppins',sans-serif; font-weight:900; font-size:1.2rem}
.save-band span{color:var(--ink-soft); font-weight:300}

/* ---- hub picker: the two skins ---- */
.skins{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(34px,5vw,56px)}
@media(max-width:820px){.skins{grid-template-columns:1fr}}
.skin{display:flex; flex-direction:column; text-decoration:none; overflow:visible; position:relative;
  border-radius:var(--radius); transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.skin .pimg-top{aspect-ratio:16/9.2; overflow:hidden; border-bottom:1px solid var(--line); position:relative;
  border-radius:var(--radius) var(--radius) 0 0}
.skin .pimg-top img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); filter:grayscale(1) contrast(1.08)}
.skin:hover .pimg-top img{transform:scale(1.05)}
.skin.skin-black{background:#0a0a0a; border:1px solid rgba(255,255,255,.25); color:#f2f2f0}
.skin.skin-white{background:#f4f3f0; border:1px solid rgba(0,0,0,.3); color:#101010}
.skin .pbody{padding:24px 26px 26px; display:flex; flex-direction:column; gap:9px; position:relative}
.skin .pbody h3{color:inherit}
.skin .tag{font:800 .64rem/1 'Poppins'; letter-spacing:.26em; text-transform:uppercase; opacity:.55}
.skin p{font-weight:300; font-size:.95rem; margin:0; opacity:.8}
.skin .go{display:inline-flex; align-items:center; gap:.5em; margin-top:8px;
  font:700 .74rem/1 'Poppins'; letter-spacing:.2em; text-transform:uppercase}
.skin .best{position:absolute; top:-13px; right:18px; font:700 .62rem/1 'Poppins'; letter-spacing:.2em;
  text-transform:uppercase; padding:.5rem .9rem; border-radius:var(--radius-btn)}
.skin-black .best{background:#fff; color:#0a0a0a}
.skin-white .best{background:#0a0a0a; color:#fff}
.skin:hover{transform:translate(-3px,-3px)}
.skin-black:hover{box-shadow:5px 5px 0 rgba(255,255,255,.18)}
.skin-white:hover{box-shadow:5px 5px 0 rgba(0,0,0,.2)}

/* ---- hub: salon picker (locations, ready to go) ---- */
.salons{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:clamp(28px,4vw,46px)}
@media(max-width:920px){.salons{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.salons{grid-template-columns:1fr}}
.salon{padding:20px 20px 18px; display:flex; flex-direction:column; gap:5px; border-left:3px solid var(--ink)}
.salon b{font-family:'Poppins',sans-serif; font-weight:800; text-transform:uppercase; font-size:.98rem; letter-spacing:.04em}
.salon .addr{color:var(--ink-soft); font-size:.88rem; font-weight:300; line-height:1.5}
.salon .row{display:flex; gap:14px; margin-top:10px; flex-wrap:wrap}
.salon .row a{font:700 .66rem/1 'Poppins'; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-hard); padding-bottom:2px}
.salon .row a:hover{opacity:.7}
.salon .ready{font:600 .6rem/1 'Poppins'; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:8px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line); padding:clamp(40px,6vw,70px) 0 110px; color:var(--ink-mute); font-size:.92rem}
footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer b{color:var(--ink); font-family:'Poppins',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; display:block; margin-bottom:10px}
footer a{color:var(--ink-soft); text-decoration:none}
footer a:hover{color:var(--ink)}
footer ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.disclaimer{margin-top:36px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.76rem; color:var(--ink-mute); text-align:center}
.built-by{display:block; text-align:center; margin-top:14px; font:700 .68rem/1 'Poppins';
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); text-decoration:none}
.built-by:hover{color:var(--ink)}
.built-by b{color:var(--ink); font-weight:800}

/* ---- theme toggle ---- */
.theme-toggle{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:38px; height:38px; border-radius:var(--radius-btn); cursor:pointer; border:1px solid var(--line-hard);
  background:transparent; color:var(--ink); padding:0; transition:transform .3s var(--ease), background .3s, box-shadow .3s var(--ease)}
.theme-toggle:hover{transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--line); background:var(--panel-2)}
.theme-toggle svg{width:17px; height:17px}
.theme-toggle .moon{display:none}
html[data-theme="day"] .theme-toggle .sun{display:none}
html[data-theme="day"] .theme-toggle .moon{display:block}

/* ---- navbar dropdown ---- */
.ddwrap{position:relative}
.ddbtn{display:inline-flex; align-items:center; gap:.45em; cursor:pointer;
  font:600 .76rem/1 'Poppins'; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); background:none; border:0;
  padding:.7rem .85rem; transition:color .3s}
.ddbtn:hover{color:var(--ink)}
.ddbtn svg{width:.85em; height:.85em; transition:transform .3s var(--ease)}
.ddwrap.open .ddbtn svg{transform:rotate(180deg)}
.ddmenu{position:absolute; top:calc(100% + 14px); right:0; min-width:260px; padding:6px;
  background:var(--bar-bg); border:1px solid var(--line-hard); border-radius:var(--radius-sm);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--edge),var(--shadow);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease)}
.ddwrap.open .ddmenu{opacity:1; transform:none; pointer-events:auto}
.ddmenu a{display:flex; flex-direction:column; gap:2px; text-decoration:none;
  padding:10px 14px; transition:background .2s}
.ddmenu a:hover{background:var(--panel-2)}
.ddmenu b{font:800 .72rem/1.2 'Poppins'; letter-spacing:.1em; text-transform:uppercase; color:var(--ink)}
.ddmenu span{font:400 .76rem/1.3 'Roboto'; color:var(--ink-mute)}
.ddmenu a.now b{border-bottom:2px solid var(--ink); align-self:flex-start}

/* ---- email CTA ---- */
.email-cta{max-width:660px; margin:clamp(26px,4vw,44px) auto 0; padding:clamp(30px,5vw,50px); text-align:center}
.email-cta .addr{display:inline-flex; align-items:center; gap:.6em; margin:18px 0 6px;
  font:900 clamp(1.05rem,2.4vw,1.5rem)/1.2 'Poppins'; color:var(--ink); text-decoration:none;
  border-bottom:3px solid var(--ink); padding-bottom:6px; word-break:break-all}
.email-cta .addr:hover{opacity:.7}
.email-cta p{color:var(--ink-soft); font-weight:300}

/* ---- reveal ---- */
.js-anim .reveal{opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.js-anim .reveal.in{opacity:1; transform:none}
.js-anim .reveal.d1{transition-delay:.08s}
.js-anim .reveal.d2{transition-delay:.16s}
.js-anim .reveal.d3{transition-delay:.24s}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}
.go svg,.skin .go svg{width:1em;height:1em;flex:none}
@media(max-width:600px){.navbar .bar>.btn{display:none}}
/* official franchise wordmark — black artwork, inverted on dark */
.navbar .logo img.wordmark{height:38px; border-radius:0; filter:invert(1)}
img.wordmark{filter:invert(1)}
html[data-theme="day"] .navbar .logo img.wordmark,
html[data-theme="day"] img.wordmark{filter:none}

/* ============ MOTION LAYER v2 (scalus.io-style life) ============ */
/* animated film grain — jitters like projector dust */
body::after{animation:grain 1.1s steps(3) infinite}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,2%)}
}
/* drifting dust specks (canvas, painted by biba.js) */
#dust{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5}
html[data-theme="day"] #dust{opacity:.3}

/* hero image: slow ken-burns */
.hero-img img{animation:kenburns 22s var(--ease) infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07) translateY(-1.5%)}}

/* image cards: deeper hover life */
.imgcard{transition:border-color .4s, transform .5s var(--ease), box-shadow .5s var(--ease)}
.imgcard:hover{border-color:var(--line-hard); transform:translate(-3px,-3px); box-shadow:var(--edge),var(--shadow)}
.imgcard img{transition:transform .9s var(--ease), filter .6s}
.imgcard:hover img{transform:scale(1.14) !important; filter:grayscale(1) contrast(1.18)}
.imgcard .cap b{transition:letter-spacing .6s var(--ease)}
.imgcard:hover .cap b{letter-spacing:.06em}

/* primary button: sheen sweep on hover */
.btn-primary::after{content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); transition:left .65s var(--ease)}
html[data-theme="day"] .btn-primary::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent)}
.btn-primary:hover::after{left:130%}

/* nav links: underline grows in */
.navbar nav a{position:relative}
.navbar nav a::after{content:""; position:absolute; left:.85rem; right:100%; bottom:.35rem;
  height:2px; background:var(--ink); transition:right .35s var(--ease)}
.navbar nav a:hover::after{right:.85rem}

/* salon cards: border thickens + slide */
.salon{transition:transform .45s var(--ease), border-left-width .3s, background .3s}
.salon:hover{transform:translateX(5px); border-left-width:8px; background:var(--panel-2)}

/* roles & svc share the slide */
.svc,.role{transition:border-left-width .3s, transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s}
.svc:hover,.role:hover{border-left-width:8px}

/* heritage background: slow drift */
.heritage .bgimg img{animation:heritagedrift 30s var(--ease) infinite alternate; transform-origin:center}
@keyframes heritagedrift{from{transform:scale(1.02)}to{transform:scale(1.1) translateX(-2%)}}

/* ticker marquee strip */
.ticker{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-2); padding:14px 0; position:relative}
.ticker .tk{display:flex; width:max-content; animation:tick 36s linear infinite; will-change:transform}
.ticker:hover .tk{animation-play-state:paused}
.ticker span{font-family:'Poppins',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.5rem); letter-spacing:.06em; white-space:nowrap; padding:0 18px; color:var(--ink)}
.ticker span:nth-child(even){-webkit-text-stroke:1.2px var(--ink); color:transparent}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion: reduce){
  body::after,#dust,.hero-img img,.heritage .bgimg img,.ticker .tk{animation:none !important}
}
.shead img.wordmark{display:block; margin-left:auto; margin-right:auto}
/* B&W footage backgrounds (BIBA Next Level BTS loop) */
.heritage .bgimg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.38) contrast(1.12)}
html[data-theme="day"] .heritage .bgimg video{filter:grayscale(1) brightness(1.15) contrast(.85) opacity(.25)}
.hero-img video{display:block; width:100%; aspect-ratio:16/8.2; object-fit:cover; filter:grayscale(1) contrast(1.08)}