/* Demo shell for the EQB wireframe → site. Layout from the wireframe is kept 1:1 at ≥1440px,
   scaled proportionally between 900–1439px, and re-flowed with overrides under 900px. */
*{box-sizing:border-box}
html,body{margin:0;background:var(--ivory-50)}
body{font-family:var(--font-body);color:var(--text-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{text-decoration:none}
.demo-bar{position:sticky;top:0;z-index:50;background:#1C1C34;color:#E0C193;font:600 11px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:9px 12px}
.viewport{width:100%;overflow:hidden}
.site{width:100%;background:var(--ivory-50)}
.site header{position:sticky!important;top:29px;z-index:40}
.main-nav a{transition:color .2s var(--ease-brand);white-space:nowrap}
.sc-host-x a{white-space:nowrap}
.main-nav a:hover{color:var(--gold-300)!important}
.nav-cta{display:none;margin-top:6px;padding:14px 22px;border-radius:999px;background:var(--gold-300);color:var(--blue-900)!important;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.burger{display:none;order:2;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.burger span{display:block;width:26px;height:1.5px;background:var(--gold-300)}
a[style*="cursor: pointer"]{display:inline-flex;align-items:center;justify-content:center}
.pill:hover{background:rgba(200,154,106,.15)}
/* FAQ */
.faq-q{transition:opacity .2s}
.faq-q:hover{opacity:.85}
.faq-a[hidden]{display:none}
.faq-item.open .faq-q>span:last-child{transform:rotate(45deg)}
.faq-q>span:last-child{transition:transform .3s var(--ease-brand)}
/* Carousel */
.carousel{display:grid!important;grid-template-columns:repeat(3,1fr)!important;overflow:hidden}
.car-item{display:none;animation:fadein .42s var(--ease-brand)}
.car-item.on{display:block}
.car-item>div{height:100%}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* hero: subtle motion in place of the video */
section[data-screen-label*="Hero video"]::before{content:"";position:absolute;inset:0;background:url(../assets/salon-02.jpg) center/cover;opacity:.28;animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
input,textarea{font-family:var(--font-body)}
textarea{resize:vertical}
/* form sent state */
.form-sent{display:none;text-align:center;padding:40px 20px;font-family:var(--font-display);font-size:24px;color:var(--blue-900)}
.sent .form-sent{display:block}
.sent .form-fields{display:none}

/* ---------- fluid band 900–1199: tighten side paddings ---------- */
@media (max-width:1560px) and (min-width:900px){
  .site header>div{padding-left:48px!important}
}
@media (max-width:1340px) and (min-width:900px){
  .site header>div{padding-left:32px!important;padding-right:24px!important;gap:16px!important}
  .site header img{height:44px!important}
  .main-nav{gap:16px!important}
  .main-nav a{font-size:11px!important;letter-spacing:.12em!important}
  .sc-host-x a{padding:12px 18px!important;font-size:11px!important;letter-spacing:.12em!important}
}
@media (max-width:1199px) and (min-width:900px){
  section>div[style*="max-width"],footer>div[style*="max-width"]{padding-left:40px!important;padding-right:40px!important}
}

/* ---------- mobile / tablet re-flow ---------- */
@media (max-width:899px){
  
  .site header{top:0}
  .site header>div{padding:14px 20px!important;flex-wrap:wrap}
  .site header img{height:40px!important}
  .burger{display:flex}
  .main-nav{display:none!important;order:5;width:100%;flex-direction:column;gap:14px!important;padding:16px 0 8px}
  .main-nav.open{display:flex!important}
  .main-nav.open .nav-cta{display:block}
  .sc-host-x{display:none!important}
  .site header>div>a[style*="cursor"],.site header>div>button:not(.burger),.site header>div>span[style*="border-radius: 999px"],.site header>div>div[style*="border-radius: 999px"]{display:none!important}
  section>div[style*="max-width"],footer>div[style*="max-width"]{padding:64px 20px!important}
  section[style*="height: 780px"]{height:auto!important;min-height:52vh}
  section[style*="height: 780px"]>div[style*="padding: 0px 120px"]{padding:90px 20px!important}
  [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .carousel{grid-template-columns:1fr!important}
  .car-item:nth-child(n){display:none}
  .car-item.on{display:block}
  .car-item.on~.car-item.on{display:none}
  h1{font-size:clamp(34px,9vw,52px)!important}
  h2{font-size:clamp(28px,7.5vw,40px)!important}
  h3{font-size:clamp(20px,5vw,26px)!important}
  p[style*="font-size: 2"],[style*="font-size: 3"][style*="font-family: var(--font-display)"]{font-size:20px!important}
  [style*="display: flex"][style*="justify-content: space-between"]{flex-wrap:wrap;gap:20px}
  [style*="display: flex"][style*="gap: 80px"],[style*="display: flex"][style*="gap: 64px"],[style*="display: flex"][style*="gap: 56px"]{flex-direction:column;gap:32px!important}
  [style*="max-width: 400px"],[style*="max-width: 460px"],[style*="max-width: 520px"]{max-width:100%!important}
  [style*="height: 380px"],[style*="height: 420px"],[style*="height: 460px"],[style*="height: 520px"],[style*="height: 560px"],[style*="height: 600px"]{height:auto!important;aspect-ratio:4/5}
  [style*="padding-right: 58px"]{padding-right:0!important}
  footer [style*="display: flex"][style*="gap: 24px"]{flex-wrap:wrap;gap:12px 20px!important}
  .site header>div{padding-left:20px!important}
  [style*="position: absolute"][style*="right: 56px"]{right:16px!important;top:16px!important;font-size:9px!important}
  [style*="letter-spacing: 0.32em"]{letter-spacing:.2em!important}
  .site *{min-width:0}
  footer [style*="grid-template-columns: repeat(4, auto)"]{grid-template-columns:1fr 1fr!important}
}

/* HP-04/05 brand cards: equal rows so titles, texts and buttons line up */
section[data-screen-label^="HP-04/05"] .grid-section>div{align-items:center}
section[data-screen-label^="HP-04/05"] .grid-section>div>h3{min-height:88px;display:flex;align-items:center;justify-content:center}
section[data-screen-label^="HP-04/05"] .grid-section>div>p{flex:1 1 auto;min-height:112px}
section[data-screen-label^="HP-04/05"] .grid-section>div>.sc-host-x{display:block!important;margin-top:auto}

.carousel[data-n="2"]{grid-template-columns:repeat(2,1fr)!important}

/* BTL device row */
.device-row{width:100%;max-width:1160px;height:420px;display:flex;align-items:flex-end;justify-content:center;gap:2%;padding:0 8px}
.device-row img{width:auto;max-width:22%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,40,.45))}
.device-row.in-arch{height:100%;padding:90px 20px 0;box-sizing:border-box;gap:1.5%}
.device-row.in-arch img{height:auto!important;max-height:60%;max-width:15%}
.device-row.in-arch img{filter:drop-shadow(0 20px 30px rgba(0,0,40,.18))}
.dev-img{object-fit:contain!important;object-position:center bottom!important;padding:28px 24px 0!important;box-sizing:border-box}
@media (max-width:899px){
  .device-row{height:auto;flex-wrap:wrap;gap:16px;justify-content:center}
  .device-row img{height:150px!important;max-width:30%}
}

/* tone pass */
.sec-intro{margin:-28px auto 0;max-width:760px;text-align:center;font-size:16px;line-height:1.8;color:var(--ink-600)}
.sec-intro.on-night{margin:0;color:var(--text-on-night-muted)}
.btn-gold{display:inline-block;padding:15px 34px;border-radius:999px;background:var(--gold-300);color:var(--blue-900)!important;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.hero-device{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:88%;width:auto;max-width:90%;object-fit:contain;filter:drop-shadow(0 24px 40px rgba(0,0,40,.25))}
section[data-screen-label="BT-01 Hero"] .device-row,section[data-screen-label="BT-01 Hero"] div[style*="border-radius: 1000px"]{position:relative}
.f360-grid{display:grid;grid-template-columns:1fr 300px 1fr;gap:40px;align-items:center;width:100%}
.f360-col{display:flex;flex-direction:column;gap:40px}
.f360-item{display:flex;flex-direction:column;gap:8px;text-align:center}
.f360-k{font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-300)}
.f360-v{font-size:16px;font-weight:600;letter-spacing:.12em;color:#fff}
.f360-item p{margin:0;font-size:14px;line-height:1.6;color:var(--text-on-night-muted)}
.f360-center{display:flex;justify-content:center}
.f360-circle{width:280px;height:280px;border-radius:50%;border:1px solid var(--gold-300);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.06),transparent 70%)}
.f360-title{font-family:var(--font-display);font-size:54px;letter-spacing:.06em;background:linear-gradient(135deg,#C89A6A,#EDD5B5);-webkit-background-clip:text;background-clip:text;color:transparent}
.f360-deg{font-size:14px;letter-spacing:.4em;color:#fff}
@media (max-width:899px){.f360-grid{grid-template-columns:1fr}.f360-circle{width:220px;height:220px}.f360-title{font-size:40px}.sec-intro{margin-top:-12px}.hero-device{height:70%}}

/* ================= Femme-inspired effects ================= */
/* marquee over the hero */
.marquee{position:absolute;left:0;right:0;top:64px;z-index:3;overflow:hidden;pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:0;white-space:nowrap;width:max-content;animation:marquee 60s linear infinite}
.marquee-track span{font-family:var(--font-display);font-size:92px;line-height:1;letter-spacing:.04em;color:rgba(237,213,181,.22);padding:0 28px}
.marquee-track i{font-style:normal;color:rgba(237,213,181,.35);font-size:60px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-25%)}}
section[data-screen-label*="Hero video"]>div[style*="position: relative; height: 100%"]{z-index:4}
/* scroll reveal: slow, graceful, no bounce */
[data-reveal]>div>*,[data-reveal]>div>div>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-brand),transform .9s var(--ease-brand)}
[data-reveal].in>div>*,[data-reveal].in>div>div>*{opacity:1;transform:none}
[data-reveal].in>div>*:nth-child(2),[data-reveal].in>div>div>*:nth-child(2){transition-delay:.12s}
[data-reveal].in>div>*:nth-child(3),[data-reveal].in>div>div>*:nth-child(3){transition-delay:.24s}
[data-reveal].in>div>*:nth-child(4),[data-reveal].in>div>div>*:nth-child(4){transition-delay:.36s}
[data-reveal].in>div>*:nth-child(5),[data-reveal].in>div>div>*:nth-child(5){transition-delay:.48s}
header[data-reveal]>div>*,header[data-reveal]>div>div>*,.marquee,.marquee *,.hero-device,section[data-screen-label*="Hero video"] *{opacity:1!important;transform:none!important;transition:none}
@media (prefers-reduced-motion:reduce){[data-reveal]>div>*,[data-reveal]>div>div>*{opacity:1;transform:none;transition:none}.marquee-track{animation:none}}
/* buttons: gold fill sweep on hover */
a[style*="border-radius: var(--radius-pill)"],.btn-gold,.nav-cta,.pill{position:relative;overflow:hidden;transition:color .35s var(--ease-brand),background-color .35s var(--ease-brand),border-color .35s var(--ease-brand)}
a[style*="border-radius: var(--radius-pill)"]:hover{background:var(--gold-300)!important;color:var(--blue-900)!important;border-color:var(--gold-300)!important}
.btn-gold:hover{background:#fff}
/* quote band */
.quote-band{position:relative;background:linear-gradient(160deg,#000066 0%,#232085 100%);overflow:hidden}
.quote-inner{position:relative;max-width:1200px;margin:0 auto;padding:150px 64px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:28px}
.quote-sigla{width:54px;opacity:.9}
.quote-band blockquote{margin:0;max-width:860px;font-family:var(--font-display);font-weight:400;font-size:46px;line-height:1.25;color:#fff}
.quote-by{display:flex;gap:14px;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300)}
.quote-by i{font-style:normal;color:var(--gold-500)}
.quote-photo{position:absolute;width:210px;height:280px;object-fit:cover;border:1px solid rgba(200,154,106,.6);box-shadow:0 30px 60px rgba(0,0,40,.4);transition:transform 1.2s var(--ease-brand)}
.quote-photo-r{right:-20px;bottom:-40px;transform:rotate(-8deg)}
.quote-photo-l{left:-30px;top:-30px;transform:rotate(7deg)}
.quote-band.in .quote-photo-r{transform:rotate(-6deg) translateY(-10px)}
.quote-band.in .quote-photo-l{transform:rotate(5deg) translateY(10px)}
/* social strip with arches over a two-tone background */
.social-strip{position:relative;background:linear-gradient(180deg,var(--ivory-100) 0 62%,var(--blue-900) 62% 100%);padding:110px 0 0;overflow:hidden}
.social-head{max-width:1200px;margin:0 auto;padding:0 64px 48px;display:flex;align-items:baseline;gap:48px}
.social-eyebrow{font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-600);flex:0 0 160px}
.social-links{display:flex;gap:56px;flex:1;justify-content:center}
.social-links a{font-family:var(--font-display);font-size:60px;line-height:1;color:var(--blue-900);transition:color .35s var(--ease-brand)}
.social-links a:hover{color:var(--gold-700)}
.social-tiles{display:flex;gap:18px;justify-content:center;align-items:flex-end;padding:0 24px 40px}
.tile{width:230px;height:300px;overflow:hidden;flex:0 0 auto;transition:transform .9s var(--ease-brand)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-brand)}
.tile:hover img{transform:scale(1.06)}
.tile.sq{height:270px;margin-bottom:30px}
.tile.arch{border-radius:1000px 1000px 0 0;height:330px}
.social-strip.in .tile:nth-child(odd){transform:translateY(0)}
@media (max-width:1399px){.tile{width:180px}.tile.sq{height:220px}.tile.arch{height:270px}.social-links a{font-size:48px}}
@media (max-width:899px){
  .marquee{top:40px}.marquee-track span{font-size:44px;padding:0 14px}.marquee-track i{font-size:30px}
  .quote-inner{padding:90px 20px}.quote-band blockquote{font-size:28px}.quote-photo{display:none}
  .social-head{flex-direction:column;gap:16px;padding:0 20px 32px}.social-eyebrow{flex:0 0 auto}.social-links{gap:24px;flex-wrap:wrap;justify-content:flex-start}.social-links a{font-size:32px}
  .social-tiles{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:12px;padding:0 20px 32px;scroll-snap-type:x mandatory}
  .tile{width:150px;scroll-snap-align:start}.tile.sq{height:180px;margin-bottom:24px}.tile.arch{height:220px}
}