/* 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:1440px;margin:0 auto;background:var(--ivory-50);transform-origin:top left}
.site header{position:sticky!important;top:29px;z-index:40}
.main-nav a{transition:color .2s var(--ease-brand)}
.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}

/* ---------- scaled band 900–1439 ---------- */
@media (max-width:1439px) and (min-width:900px){
  .site{transform:scale(var(--s,1))}
}

/* ---------- mobile / tablet re-flow ---------- */
@media (max-width:899px){
  .site{width:100%!important;transform:none!important}
  .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}
}