/* Luxury Hair Salon concept. Ribbon-cutting hero. Square corners everywhere. */
:root{
  --cream:#f6eee3; --cream-2:#efe3d3; --ink:#18120d; --ink-2:#5a4838;
  --copper:#8f4f14; --copper-btn:#a05a1a; --gold:#dcae60; --black:#120d09;
  --lift-light:0 1px 1px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.10),0 6px 18px rgba(0,0,0,.06);
  --lift-dark:0 1px 2px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.25);
  --lift-body:0 1px 1px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.10);
  --f-disp:'Bebas Neue','Oswald',Impact,sans-serif;
  --f-script:'Pinyon Script','Snell Roundhand',cursive;
  --f-body:'Jost',system-ui,sans-serif;
  --strip-h:0px; --hdr-h:72px; --rh:clamp(68px,11.5svh,116px);
  --pad:clamp(18px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--cream);color:var(--ink);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3{font-weight:400}
:target{scroll-margin-top:calc(var(--hdr-h) + 8px)}

.concept-strip{position:relative;z-index:70;background:var(--ink);color:#fff;font-size:12px;letter-spacing:.08em;text-align:center;padding:9px 44px;line-height:1.3}
.concept-strip button{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#fff;font-size:20px;line-height:1;padding:6px 10px}

/* header */
.site-header{position:fixed;left:0;right:0;top:var(--strip-h);z-index:60;height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);transition:background .25s,box-shadow .25s}
.site-header.solid{background:rgba(246,238,227,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(24,18,13,.1)}
.logo{font-family:var(--f-disp);font-size:1.7rem;letter-spacing:.12em;line-height:1;text-shadow:var(--lift-light);white-space:nowrap}
.nav{display:flex;align-items:center;gap:30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.nav a:not(.btn){text-shadow:var(--lift-body);opacity:.85}
.nav a:not(.btn):hover{opacity:1;color:var(--copper)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;background:var(--copper-btn);color:#fff;border:1px solid var(--copper-btn);transition:background .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-2px);background:var(--ink);border-color:var(--ink)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--black)}
.btn.gold:hover{background:var(--cream);border-color:var(--cream)}
.btn.sm{padding:11px 20px}
.eyebrow{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--copper);margin-bottom:16px}
.on-dark .eyebrow{color:var(--gold)}

/* ===== HERO: ribbon cutting ===== */
.hero{position:relative;height:calc(100svh - 38px);min-height:600px;background:var(--cream);overflow:hidden;isolation:isolate}
.stage{position:absolute;z-index:1;top:calc(var(--hdr-h) + 14px);bottom:30px;left:50%;height:auto;aspect-ratio:9/16;transform:translateX(-50%);overflow:hidden;background:#d9b88c;
  clip-path:inset(calc(50% - var(--rh)/2) 0 calc(50% - var(--rh)/2) 0);transition:clip-path 1.35s cubic-bezier(.22,.8,.12,1) .1s}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero.cut .stage{clip-path:inset(0 0 0 0)}

.hero-type{position:absolute;z-index:2;inset:calc(var(--hdr-h) + 14px) 0 30px 0;display:grid;grid-template-columns:1fr minmax(0,calc((100svh - var(--hdr-h) - 82px) * 9 / 16)) 1fr;pointer-events:none}
.hero-type>*{pointer-events:auto}
.hero h1{display:contents}
.hero h1 span{font-family:var(--f-disp);font-size:min(8.1vw,17svh);line-height:.86;letter-spacing:.02em;text-shadow:var(--lift-light);opacity:0;transform:translateY(22px);transition:opacity .9s ease .85s,transform .9s ease .85s;display:block}
.hero h1 .w1{grid-column:1;align-self:start;text-align:right;padding-right:clamp(18px,2.4vw,40px);margin-top:12vh}
.hero h1 .w2{grid-column:3;align-self:center;text-align:left;padding-left:clamp(18px,2.4vw,40px);color:var(--copper);margin-top:2vh}
.hero-label{grid-column:1;align-self:end;justify-self:end;text-align:right;padding-right:clamp(18px,2.4vw,40px);font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;max-width:30ch;opacity:0;transition:opacity .9s ease 1.2s;text-shadow:var(--lift-body)}
.hero-cta{grid-column:3;align-self:end;justify-self:start;padding-left:clamp(18px,2.4vw,40px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;opacity:0;transform:translateY(14px);transition:opacity .9s ease 1.3s,transform .9s ease 1.3s}
.hero.cut h1 span,.hero.cut .hero-label,.hero.cut .hero-cta{opacity:1;transform:none}
.hero-cta .alt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px;text-shadow:var(--lift-body)}
.replay{position:absolute;z-index:8;right:var(--pad);top:calc(var(--hdr-h) + 22px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;opacity:0;transition:opacity .6s ease 2.4s;text-shadow:var(--lift-body);display:none}

.pre-label{position:absolute;z-index:3;left:0;right:0;top:calc(50% - var(--rh)/2 - 48px);text-align:center;font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:var(--copper);transition:opacity .5s}
.hero.cut .pre-label{opacity:0}

/* ribbon */
.ribbon{position:absolute;z-index:5;left:0;right:0;top:50%;height:var(--rh);margin-top:calc(var(--rh) / -2);display:flex;filter:drop-shadow(0 8px 9px rgba(70,40,10,.30));pointer-events:none}
.rb{position:relative;flex:1 1 50%;min-width:0;overflow:hidden;background:
  linear-gradient(180deg,#b98a3e 0,#e9cf97 12%,#fbeecb 30%,#d1a857 52%,#f4e1b0 74%,#c39448 90%,#a87a30 100%);
  box-shadow:inset 0 0 0 1px rgba(110,70,15,.25)}
.rb::before{content:"";position:absolute;left:0;right:0;top:9%;bottom:9%;border-top:1px dashed rgba(110,70,15,.45);border-bottom:1px dashed rgba(110,70,15,.45)}
.rb-in{position:absolute;top:0;bottom:0;width:100vw;display:flex;align-items:center;justify-content:center;gap:.9em;white-space:nowrap;font-family:var(--f-disp);font-size:calc(var(--rh) * .42);letter-spacing:.24em;color:#4a2606;text-shadow:0 1px 0 rgba(255,240,205,.8)}
.rb-in i{font-style:normal;font-size:.5em;opacity:.8}
.rb-in span{flex:1 1 0;min-width:0;overflow:hidden}
.rb-l .rb-in{left:0}.rb-r .rb-in{right:0}
.rb::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);transform:translateX(-120%);animation:sheen 3.6s ease-in-out .6s infinite}
@keyframes sheen{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
.rb-l{transform-origin:calc(var(--rh) / 2) 50%}
.rb-r{transform-origin:calc(100% - var(--rh) / 2) 50%}
.hero.cut .rb-l{clip-path:polygon(0 0,100% 0,calc(100% - 18px) 50%,100% 100%,0 100%);animation:swingL 1.5s cubic-bezier(.3,.1,.3,1) forwards,swayL 4s ease-in-out 1.5s infinite alternate}
.hero.cut .rb-r{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,18px 50%);animation:swingR 1.5s cubic-bezier(.3,.1,.3,1) forwards,swayR 4s ease-in-out 1.5s infinite alternate}
@keyframes swingL{0%{transform:rotate(0)}38%{transform:rotate(97deg)}58%{transform:rotate(82deg)}78%{transform:rotate(91deg)}100%{transform:rotate(88deg)}}
@keyframes swingR{0%{transform:rotate(0)}38%{transform:rotate(-97deg)}58%{transform:rotate(-82deg)}78%{transform:rotate(-91deg)}100%{transform:rotate(-88deg)}}
@keyframes swayL{from{transform:rotate(88deg)}to{transform:rotate(85deg)}}
@keyframes swayR{from{transform:rotate(-88deg)}to{transform:rotate(-85deg)}}

/* scissors */
.scissors{position:absolute;z-index:7;left:50%;top:50%;width:var(--sw);margin-left:calc(var(--sw) * -.475);height:calc(var(--sw) * .4);margin-top:calc(var(--sw) * -.2);pointer-events:none;
  --sw:clamp(210px,27vw,400px);transform:translateX(calc(-50vw - var(--sw)));filter:drop-shadow(0 10px 8px rgba(40,22,5,.35))}
.scissors svg{width:100%;height:100%;overflow:visible}
.bA,.bB{transform-box:view-box;transform-origin:190px 80px;transition:transform .16s ease-out}
.bA{transform:rotate(-2deg)}.bB{transform:rotate(2deg)}
.scissors.open .bA{transform:rotate(-17deg)}.scissors.open .bB{transform:rotate(17deg)}
.scissors.shut .bA{transform:rotate(-1deg);transition-duration:.1s}.scissors.shut .bB{transform:rotate(1deg);transition-duration:.1s}
.scissors.travel{animation:sIn 1.25s cubic-bezier(.3,.6,.25,1) forwards}
.scissors.travel .bA{animation:snipA .3s ease-in-out infinite}.scissors.travel .bB{animation:snipB .3s ease-in-out infinite}
.scissors.arrived{transform:none}
.scissors.fall{transform:none;animation:sFall .95s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes sIn{from{transform:translateX(calc(-50vw - var(--sw)))}to{transform:translateX(0)}}
@keyframes snipA{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-15deg)}}
@keyframes snipB{0%,100%{transform:rotate(2deg)}50%{transform:rotate(15deg)}}
@keyframes sFall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(8vw,70svh) rotate(38deg);opacity:0}}

/* reduced motion: start opened */
.hero.instant .stage{clip-path:inset(0);transition:none}
.hero.instant .ribbon,.hero.instant .scissors,.hero.instant .pre-label{display:none}
.hero.instant h1 span,.hero.instant .hero-label,.hero.instant .hero-cta{opacity:1;transform:none;transition:none}

/* ===== sections ===== */
.sec{padding:clamp(72px,10vw,140px) var(--pad)}
.wrap{max-width:1240px;margin:0 auto}
.h2{font-family:var(--f-disp);font-size:clamp(3rem,7.4vw,6.4rem);line-height:.9;letter-spacing:.02em;text-shadow:var(--lift-light)}
.script{font-family:var(--f-script);text-shadow:var(--lift-light)}
.dark{background:var(--black);color:#f3e8d8}
.dark .h2,.dark .script{text-shadow:var(--lift-dark)}
.dark p,.dark li{text-shadow:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.3)}
.p{font-size:clamp(1rem,1.3vw,1.12rem);max-width:54ch;text-shadow:var(--lift-body)}

.rule{height:34px;background:linear-gradient(180deg,#b98a3e 0,#f1dba6 25%,#fbeecb 45%,#d1a857 60%,#f4e1b0 80%,#a87a30 100%);overflow:hidden;white-space:nowrap;font-family:var(--f-disp);font-size:17px;letter-spacing:.32em;color:#4a2606;line-height:34px;text-shadow:0 1px 0 rgba(255,240,205,.8)}
.rule div{display:inline-block;animation:marq 40s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}

/* words */
.words{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.words .big{font-size:clamp(3.2rem,8.4vw,7.6rem);line-height:.95;color:var(--copper);word-break:break-word}
.bio-lines{list-style:none;border-top:1px solid rgba(24,18,13,.25)}
.bio-lines li{font-family:var(--f-disp);font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:.06em;line-height:1.1;padding:16px 0;border-bottom:1px solid rgba(24,18,13,.25);text-shadow:var(--lift-light)}
.src{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:14px}

/* reels */
.proof-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#d9c3a5;cursor:pointer;display:block;width:100%;text-align:left}
.tile video,.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .n{position:absolute;left:12px;bottom:10px;font-family:var(--f-disp);font-size:1.5rem;letter-spacing:.1em;color:#fff;text-shadow:var(--lift-dark)}
.tile .pl{position:absolute;right:12px;bottom:12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;text-shadow:var(--lift-dark)}
.tile:hover video{transform:scale(1.03)}
.tile video{transition:transform .6s ease}
.more{margin-top:28px;display:inline-block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:3px}

/* prices */
.price-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,64px)}
.price-top .script{font-size:clamp(2.4rem,5vw,4.2rem);color:var(--gold);line-height:1}
.price-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px)}
.price-cols h3{font-family:var(--f-script);font-size:clamp(1.9rem,3.2vw,2.8rem);color:var(--gold);margin-bottom:14px;text-shadow:var(--lift-dark)}
.row{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-family:var(--f-disp);font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:.07em;line-height:1.15}
.row .d{flex:1;border-bottom:2px dotted rgba(243,232,216,.35);transform:translateY(-4px);min-width:12px}
.row b{font-weight:400;color:#fff}
.row small{font-family:var(--f-body);font-size:.5em;letter-spacing:.1em;color:rgba(243,232,216,.7);margin-left:4px}
.fine{margin-top:clamp(28px,4vw,48px);font-size:13px;letter-spacing:.06em;color:rgba(243,232,216,.72);max-width:70ch}

/* booth */
.booth{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.booth .script{font-size:clamp(2.2rem,4.6vw,3.8rem);color:var(--copper);line-height:1}
.kv{margin-top:28px;border-top:1px solid rgba(24,18,13,.25)}
.kv div{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(24,18,13,.25);font-family:var(--f-disp);font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:.07em;text-shadow:var(--lift-light)}
.kv span{font-family:var(--f-body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--copper)}
.from{display:flex;align-items:baseline;gap:14px;margin-top:30px}
.from .amt{font-family:var(--f-disp);font-size:clamp(4rem,9vw,7.4rem);line-height:.85;color:var(--copper);text-shadow:var(--lift-light)}
.from .lbl{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.roles{list-style:none;columns:2;column-gap:28px;margin-top:6px}
.roles li{font-family:var(--f-disp);font-size:clamp(1.4rem,2.1vw,1.8rem);letter-spacing:.08em;padding:9px 0;border-bottom:1px solid rgba(24,18,13,.2);break-inside:avoid;text-shadow:var(--lift-light)}
.addr{margin-top:34px;padding-top:24px;border-top:3px double rgba(24,18,13,.4)}
.addr p{font-size:1.05rem;letter-spacing:.04em}
.addr .btn-row{margin-top:18px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* book */
.book{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.phone{display:block;font-family:var(--f-disp);font-size:clamp(3rem,7.4vw,6.2rem);line-height:.98;letter-spacing:.03em;color:#fff;text-shadow:var(--lift-dark)}
.phone + .phone{color:var(--gold)}
.book .p{margin-top:22px;color:#f3e8d8}
.book .btn-row{margin-top:26px}
form{display:grid;gap:16px}
label{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:6px;color:var(--gold)}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:#fff;background:transparent;border:0;border-bottom:1px solid rgba(243,232,216,.5);border-radius:0;padding:10px 2px;outline:0}
select option{color:#000}
textarea{resize:vertical;min-height:90px}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--gold)}
.hp{position:absolute;left:-9999px}
.concept-note{color:#f3e8d8}

footer{background:var(--cream-2);padding:clamp(48px,6vw,80px) var(--pad) 120px}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px;max-width:1240px;margin:0 auto}
footer .logo{font-size:2rem}
footer h4{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--copper);margin-bottom:10px}
footer p,footer a{font-size:15px}
footer a:hover{color:var(--copper)}
.tiny{max-width:1240px;margin:36px auto 0;font-size:12px;letter-spacing:.08em;color:var(--ink-2)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(18,13,9,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lb.on{display:flex}
.lb video{max-height:88svh;max-width:92vw;width:auto;background:#000}
.lb button{position:absolute;top:14px;right:18px;color:#fff;font-size:34px;line-height:1;padding:8px 14px;text-shadow:var(--lift-dark)}

/* sticky bar (mobile) */
.sticky-bar{display:none}

@media (max-width:900px){
  :root{--hdr-h:62px}
  .nav a:not(.btn){display:none}
  .nav{gap:0}
  .logo{font-size:1.45rem}
  .words,.booth,.book,.price-cols{grid-template-columns:1fr}
  .reels{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr}
  .roles{columns:1}
  .hero{min-height:560px}
  .stage{left:0;right:0;top:0;bottom:0;transform:none;aspect-ratio:auto;width:100%}
  .hero-type{inset:0;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:calc(var(--hdr-h) + 12px) 18px 92px}
  .hero h1{display:block}
  .hero h1 span.w1,.hero h1 span.w2{font-size:min(17vw,13svh);color:#fff;text-shadow:var(--lift-dark);padding:0;margin:0;text-align:left;grid-column:auto;line-height:.88}
  .hero h1 span.w2{color:var(--gold)}
  .hero-label{display:none}
  .hero-cta{grid-column:1;grid-row:3;padding:0;align-self:end;justify-self:stretch}
  .hero-cta .btn{width:100%}
  .hero-cta .alt{color:#fff;text-shadow:var(--lift-dark)}
  .sticky-bar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--black);border-top:1px solid rgba(220,174,96,.4)}
  .sticky-bar a{padding:15px 4px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:#f3e8d8;border-right:1px solid rgba(243,232,216,.15)}
  .sticky-bar a:first-child{background:var(--copper-btn);color:#fff}
  .sticky-bar a:last-child{border-right:0}
  .pre-label{font-size:10px;letter-spacing:.26em}
}
@media (max-width:560px){
  .rb-in{letter-spacing:.16em}
  .roles li{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .rule div,.rb::after{animation:none}
  html{scroll-behavior:auto}
}

@media(max-width:900px){.replay{top:auto;bottom:70px;right:var(--pad);font-size:10px;color:#fff;text-shadow:var(--lift-dark)}}

/* proofing: legibility scrims (text over video) */
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(18,13,9,.62),rgba(18,13,9,0))}
.tile .n{z-index:2}
@media (max-width:900px){
  .stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(18,13,9,.66) 0,rgba(18,13,9,.55) 30%,rgba(18,13,9,0) 54%,rgba(18,13,9,0) 62%,rgba(18,13,9,.68) 100%)}
  body:has(.hero.cut) .site-header:not(.solid) .logo{color:#fff;text-shadow:var(--lift-dark)}
}