/* ==========================================================================
   brite bird — sales presenter
   Night-demo aesthetic: deep plum darkness, glowing install photography,
   Pacaembu display type, pill buttons, signature pop-shadow CTAs.
   ========================================================================== */

@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Thin.woff2") format("woff2"); font-weight:100; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Light.woff2") format("woff2"); font-weight:300; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Pacaembu"; src:url("../assets/fonts/Pacaembu-Black.woff2") format("woff2"); font-weight:800; font-display:swap; }

:root {
  --bb-pink:#EF2AC1; --bb-orange:#F26924; --bb-plum:#340E30;
  --bb-magenta:#CC27B0; --bb-tangerine:#F7901E; --bb-bubblegum:#F76ADA; --bb-yellow:#FDB71A;
  --bb-white:#FFFFFF; --bb-cream:#FFF8EC;
  --bb-night:#1C0719;                       /* deeper than plum, for photo slides */
  --ink-60:color-mix(in srgb, var(--bb-plum) 60%, white);
  --ink-40:color-mix(in srgb, var(--bb-plum) 40%, white);
  --ink-10:color-mix(in srgb, var(--bb-plum) 10%, white);
  --glow-60:color-mix(in srgb, var(--bb-white) 60%, transparent);
  --grad-sunrise:linear-gradient(90deg, var(--bb-orange) 0%, var(--bb-pink) 100%);
  --grad-dusk:linear-gradient(90deg, var(--bb-orange) 0%, var(--bb-pink) 55%, var(--bb-plum) 100%);
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --shadow-lg:0 20px 40px -12px rgba(52,14,48,.22);
  --shadow-pop:0 8px 0 0 var(--bb-plum);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { height:100%; overscroll-behavior:none; }
body {
  font-family:"Pacaembu","Helvetica Neue",Arial,sans-serif;
  font-weight:300; color:var(--bb-white); background:var(--bb-night);
  -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none;
}
img { -webkit-user-drag:none; }

/* ---------- home ---------- */
.home { position:fixed; inset:0; display:flex; flex-direction:column; overflow:hidden; background:var(--bb-night); }
.home-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.home-bg-b { opacity:0; transition:opacity 2.2s ease; }
.home-bg-b.is-on { opacity:1; }
.home-scrim {
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(28,7,25,.93) 0%, rgba(28,7,25,.82) 44%, rgba(28,7,25,.45) 100%),
             linear-gradient(0deg, rgba(28,7,25,.5), rgba(28,7,25,0) 35%);
}
.home-head {
  position:relative; display:flex; align-items:center; justify-content:space-between;
  padding:max(18px, env(safe-area-inset-top)) clamp(24px,4.5vw,56px) 0;
}
.home-logo { height:clamp(28px,4.4vh,42px); }
.home-dealer { font-weight:500; font-size:clamp(.8rem,1.8vh,1rem); letter-spacing:.08em; opacity:.8; }
.home-main {
  position:relative; flex:1; min-height:0;
  display:flex; align-items:stretch; gap:clamp(24px,4vw,72px);
  padding:clamp(8px,2vh,24px) clamp(24px,4.5vw,56px) max(18px, env(safe-area-inset-bottom));
}
.home-left {
  flex:1.15; min-width:0; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(8px,1.8vh,18px);
}
.home-left .display { font-size:clamp(2.6rem,7.5vh,4.8rem); }
.menu-list { display:flex; flex-direction:column; margin-top:clamp(6px,1.6vh,16px); }
.menu-item {
  display:flex; align-items:center; gap:clamp(14px,1.8vw,24px);
  border:0; border-top:1px solid rgba(255,255,255,.16); background:none; cursor:pointer;
  padding:clamp(8px,1.55vh,15px) 4px; text-align:left; color:var(--bb-white); font-family:inherit;
  transition:background .15s, padding-left .2s var(--ease-out);
}
.menu-item:last-child { border-bottom:1px solid rgba(255,255,255,.16); }
.menu-item:active { background:rgba(255,255,255,.07); padding-left:14px; }
.menu-num {
  font-weight:700; font-size:clamp(.7rem,1.5vh,.85rem); letter-spacing:.14em;
  color:var(--bb-orange); flex:0 0 2.2em;
}
.menu-text { flex:1; min-width:0; display:flex; align-items:baseline; gap:1em; }
.menu-text strong { font-weight:700; font-size:clamp(1.15rem,2.9vh,1.7rem); line-height:1.05; white-space:nowrap; }
.menu-text em {
  font-style:normal; font-weight:300; font-size:clamp(.78rem,1.8vh,1rem); opacity:.6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.menu-arrow { font-weight:300; font-size:clamp(1.3rem,3vh,1.8rem); opacity:.45; }
.home-right {
  flex:.85; min-width:0; display:flex; flex-direction:column;
  justify-content:center; gap:clamp(8px,1.6vh,14px);
}
.home-strip-label {
  font-weight:700; font-size:clamp(.7rem,1.5vh,.88rem); letter-spacing:.18em; text-transform:uppercase;
  color:var(--bb-bubblegum);
}
.home-houses {
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:clamp(8px,1.2vw,14px); min-height:0; flex:0 1 72vh;
}
.house-card {
  position:relative; border:0; padding:0; cursor:pointer; min-height:0;
  border-radius:var(--radius-md); overflow:hidden; background:var(--bb-plum);
  box-shadow:0 10px 28px -10px rgba(0,0,0,.55);
  transition:transform .18s var(--ease-out);
}
.house-card:active { transform:scale(.95); }
.house-card > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.house-card::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,7,25,0) 40%, rgba(28,7,25,.85) 100%);
}
.tile-label {
  position:absolute; left:12px; right:12px; bottom:10px; z-index:2;
  display:flex; flex-direction:column; gap:1px; text-align:left;
  font-family:inherit; color:var(--bb-white);
}
.tile-label strong { font-weight:700; font-size:clamp(.85rem,2vh,1.15rem); line-height:1.12; }
.tile-label em { font-style:normal; font-weight:300; font-size:clamp(.68rem,1.5vh,.85rem); opacity:.8; }

/* ---------- pages ---------- */
.slide {
  position:fixed; inset:0; height:100dvh; overflow:hidden; z-index:20;
  opacity:0; visibility:hidden; transform:translateY(26px) scale(.985);
  transition:opacity .38s var(--ease-out), transform .38s var(--ease-out), visibility 0s linear .38s;
}
.slide.open {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
.slide-inner {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(24px,5vh,64px) clamp(24px,5vw,64px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(14px,2.6vh,28px);
}

/* ---------- type ---------- */
.kicker {
  font-weight:700; font-size:clamp(.72rem,1.4vw,.95rem);
  letter-spacing:.18em; text-transform:uppercase; color:var(--bb-yellow);
}
.kicker-pink { color:var(--bb-bubblegum); }
.kicker-orange { color:var(--bb-orange); }
.display {
  font-weight:800; font-size:clamp(3rem,8.2vh,5.6rem);
  line-height:1.02; letter-spacing:0;
}
.display-sm { font-weight:800; font-size:clamp(2.1rem,5.6vh,3.6rem); line-height:1.05; }
.display em { font-style:normal; background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent; }
.display-sm em { font-style:normal; background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede { font-weight:300; font-size:clamp(1.05rem,2.4vh,1.4rem); line-height:1.45; max-width:34em; opacity:.92; }

/* ---------- reveal choreography ---------- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.slide.in .reveal { opacity:1; transform:none; }
.slide.in .reveal:nth-child(1), .slide.in .why-card:nth-child(1), .slide.in .how-card:nth-child(1), .slide.in .stat:nth-child(1) { transition-delay:.05s; }
.slide.in .reveal:nth-child(2), .slide.in .why-card:nth-child(2), .slide.in .how-card:nth-child(2), .slide.in .stat:nth-child(2) { transition-delay:.15s; }
.slide.in .reveal:nth-child(3), .slide.in .why-card:nth-child(3), .slide.in .how-card:nth-child(3), .slide.in .stat:nth-child(3) { transition-delay:.25s; }
.slide.in .reveal:nth-child(4) { transition-delay:.35s; }

/* ---------- buttons & chips ---------- */
.btn {
  font:inherit; font-weight:700; font-size:clamp(1rem,2.2vh,1.2rem);
  color:var(--bb-white); background:var(--grad-sunrise);
  border:0; border-radius:var(--radius-pill);
  padding:1em 2.1em; cursor:pointer; align-self:flex-start;
  transition:transform .15s var(--ease-out);
}
.btn:active { transform:translateY(4px); }
.btn-pop { box-shadow:var(--shadow-pop); }
.chip {
  font:inherit; font-weight:500; font-size:clamp(.85rem,1.9vh,1.05rem);
  color:var(--bb-white); background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.22); border-radius:var(--radius-pill);
  padding:.65em 1.3em; cursor:pointer; white-space:nowrap;
  transition:background .2s, border-color .2s, color .2s;
}
.chip.is-active {
  background:var(--bb-white); border-color:var(--bb-white); color:var(--bb-plum); font-weight:700;
}

/* ---------- app page ---------- */
.slide-app { background:radial-gradient(120% 130% at 85% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.app-wrap {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(24px,5vh,64px) clamp(24px,5vw,64px);
  display:flex; align-items:center; gap:clamp(24px,5vw,72px);
}
.app-copy { flex:1; display:flex; flex-direction:column; gap:clamp(14px,2.6vh,26px); }
.app-chips { display:flex; gap:10px; flex-wrap:wrap; }
.app-desc { font-weight:300; font-size:clamp(1.05rem,2.4vh,1.35rem); line-height:1.5; min-height:4.5em; max-width:30em; opacity:.92; }
.phone {
  flex:0 0 auto; width:clamp(220px,24vw,290px); position:relative;
  border-radius:clamp(38px,4.2vw,50px); background:#0A0309;
  border:2px solid #3A2A38;
  box-shadow:inset 0 0 4px 2px rgba(255,255,255,.12), inset 0 0 0 6px #241022, 0 30px 60px -20px rgba(0,0,0,.65);
  padding:clamp(11px,1.2vw,14px);
}
/* side buttons */
.phone::before, .phone::after {
  content:""; position:absolute; width:3px; border-radius:2px; background:#3A2A38;
}
.phone::before { right:-5px; top:26%; height:11%; }                /* power */
.phone::after  { left:-5px;  top:20%; height:7%; box-shadow:0 calc(100% + 14px) 0 #3A2A38; } /* volumes */
.phone-screen {
  width:100%; aspect-ratio:1206/2622; border-radius:clamp(26px,3vw,36px); overflow:hidden;
  background:#160513;
}
.ph-shot { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- install page ---------- */
.slide-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.slide-install { background:var(--bb-cream); color:var(--bb-plum); }
.slide-install .display, .slide-install .display-sm { color:var(--bb-plum); }
.scroll-inner {
  max-width:1180px; margin:0 auto;
  padding:clamp(70px,10vh,110px) clamp(24px,5vw,64px) clamp(40px,7vh,80px);
  display:flex; flex-direction:column; gap:clamp(18px,3.4vh,36px);
}
.proc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,4vw,60px); }
.proc-lede {
  font-weight:300; font-size:clamp(.95rem,2.2vh,1.25rem); line-height:1.5;
  color:var(--ink-60); max-width:24em; padding-bottom:.5em;
}
.proc { display:flex; gap:clamp(18px,3vw,44px); align-items:stretch; }
.proc-rail { flex:1; display:flex; flex-direction:column; min-width:0; }
.proc-step {
  position:relative; display:flex; gap:clamp(14px,1.6vw,20px); align-items:flex-start;
  border:0; background:none; cursor:pointer; text-align:left; font-family:inherit; color:var(--bb-plum);
  padding:clamp(10px,1.8vh,16px) 0 clamp(10px,1.8vh,16px) 4px;
}
/* connecting line */
.proc-step::before {
  content:""; position:absolute; left:calc(4px + clamp(17px,2.1vh,21px)); top:0; bottom:0;
  width:2px; background:var(--ink-10);
}
.proc-step:first-child::before { top:clamp(14px,2.4vh,20px); }
.proc-step:last-child::before { bottom:auto; height:clamp(14px,2.4vh,20px); }
.proc-dot {
  position:relative; z-index:1; flex:0 0 auto;
  width:clamp(34px,4.2vh,42px); height:clamp(34px,4.2vh,42px); border-radius:50%;
  background:var(--bb-white); border:2px solid var(--ink-10);
  display:grid; place-items:center;
  transition:background .25s, border-color .25s, transform .25s var(--ease-out);
}
.proc-dot i { font-style:normal; font-weight:800; font-size:clamp(.85rem,1.8vh,1rem); color:var(--ink-40); transition:color .25s; }
.proc-step-body { display:flex; flex-direction:column; gap:.35em; min-width:0; padding-top:.35em; }
.proc-step-body strong { font-weight:700; font-size:clamp(1.05rem,2.5vh,1.45rem); line-height:1.1; transition:color .2s; }
.proc-copy {
  font-weight:300; font-size:clamp(.86rem,1.95vh,1.05rem); line-height:1.5; color:var(--ink-60);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--ease-out), opacity .35s ease;
}
.proc-step.is-active .proc-dot { background:var(--grad-sunrise); border-color:transparent; transform:scale(1.08); }
.proc-step.is-active .proc-dot i { color:#fff; }
.proc-step.is-active .proc-step-body strong { color:var(--bb-pink); }
.proc-step.is-active .proc-copy { max-height:8em; opacity:1; }
.proc-stage {
  flex:1.1; position:relative; min-height:clamp(340px,52vh,560px);
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--bb-plum);
}
.proc-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.proc-img.is-on { opacity:1; }
.proc-chip {
  position:absolute; top:16px; left:16px;
  font-weight:700; font-size:clamp(.78rem,1.7vh,.95rem); letter-spacing:.04em; color:#fff;
  background:rgba(28,7,25,.62); backdrop-filter:blur(8px);
  border-radius:var(--radius-pill); padding:.6em 1.3em;
}
.proc-expect {
  position:absolute; left:16px; right:16px; bottom:16px; list-style:none;
  display:flex; gap:10px; flex-wrap:wrap;
}
.proc-expect li {
  font-weight:700; font-size:clamp(.72rem,1.6vh,.9rem); color:#fff;
  background:rgba(28,7,25,.62); backdrop-filter:blur(8px);
  border-radius:var(--radius-pill); padding:.55em 1.1em;
}
.proc-expect li::before { content:"✓ "; color:var(--bb-yellow); }
.install-sub { margin-top:clamp(16px,3.4vh,40px); }
.part-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.part-tabs .chip { color:var(--bb-plum); border-color:var(--ink-10); background:var(--bb-white); }
.part-tabs .chip.is-active { background:var(--bb-plum); border-color:var(--bb-plum); color:#fff; }
.part-copy { font-weight:300; font-size:clamp(.92rem,2.1vh,1.15rem); line-height:1.5; color:var(--ink-60); max-width:52em; min-height:3em; }
.part-strip {
  display:flex; gap:12px; overflow-x:auto; scrollbar-width:none;
  height:clamp(220px,32vh,340px); padding:4px 2px 10px;
  scroll-snap-type:x proximity;
}
.part-strip::-webkit-scrollbar { display:none; }
.det-item {
  position:relative; flex:0 0 auto; height:100%; border:0; padding:0; cursor:pointer;
  border-radius:var(--radius-lg); overflow:hidden; background:var(--bb-white);
  box-shadow:var(--shadow-md); scroll-snap-align:start;
}
.det-item img { height:100%; width:auto; display:block; }
.det-tag {
  position:absolute; left:10px; bottom:10px;
  font-weight:700; font-size:clamp(.68rem,1.5vh,.82rem); letter-spacing:.04em; color:#fff;
  background:rgba(28,7,25,.68); backdrop-filter:blur(6px);
  border-radius:var(--radius-pill); padding:.45em 1em; white-space:nowrap;
}
.install-sub em { font-style:normal; background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dn-caption { font-weight:500; color:var(--ink-60); font-size:.95rem; }

/* ---------- specs page ---------- */
.slide-specs { background:radial-gradient(120% 130% at 15% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.spec-wrap {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(24px,5vh,64px) clamp(24px,5vw,64px);
  display:flex; align-items:center; gap:clamp(24px,4.5vw,72px);
}
.spec-left { flex:1; min-width:0; display:flex; flex-direction:column; gap:clamp(12px,2.2vh,22px); }
.spec-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.spec-list { list-style:none; display:flex; flex-direction:column; gap:clamp(8px,1.6vh,14px); }
.spec-list li {
  font-weight:300; font-size:clamp(.98rem,2.3vh,1.25rem); line-height:1.4;
  padding-left:1.3em; position:relative; opacity:.92;
}
.spec-list li::before { content:"●"; position:absolute; left:0; top:.18em; font-size:.55em; color:var(--bb-orange); }
.spec-actions { display:flex; }
.spec-stage {
  flex:.9; align-self:center; aspect-ratio:1/1; max-height:62vh; width:100%;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  overflow:hidden; position:relative; background:var(--bb-night);
}
.spec-stage img { width:100%; height:100%; object-fit:cover; }
.spec-stage.is-float {
  background:radial-gradient(80% 80% at 50% 45%, #4A1545 0%, var(--bb-night) 100%);
  display:grid; place-items:center; padding:clamp(20px,3.5vw,48px);
}
.spec-stage.is-float img {
  width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain;
  filter:drop-shadow(0 24px 36px rgba(0,0,0,.55));
}
.spec-foot { font-weight:500; font-size:clamp(.82rem,1.9vh,1rem); color:var(--bb-yellow); }

/* ---------- credibility page ---------- */
.slide-cred { background:radial-gradient(120% 130% at 85% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.cred-stats { display:flex; gap:clamp(28px,6vw,90px); }
.stat { display:flex; flex-direction:column; }
.stat-num {
  font-weight:800; font-size:clamp(2.2rem,6vh,4rem); line-height:1;
  background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-num i { font-style:normal; font-size:.55em; vertical-align:.28em; }
.stat-label { font-weight:500; font-size:clamp(.75rem,1.6vh,.92rem); letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-top:.45em; }
.cred-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); }
.cred-sub { font-weight:700; font-size:clamp(1.2rem,3vh,1.7rem); margin-top:clamp(8px,1.6vh,16px); }
.cred-strip { height:clamp(180px,26vh,280px); }
.cred-card {
  border:1.5px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05); padding:clamp(16px,3vh,30px);
  display:flex; flex-direction:column; gap:.8em;
}
.cred-stars { color:var(--bb-yellow); font-size:clamp(1.1rem,2.4vh,1.4rem); letter-spacing:.18em; }
.cred-card blockquote { font-weight:300; font-size:clamp(.92rem,2.1vh,1.12rem); line-height:1.55; opacity:.92; }
.cred-card figcaption { font-weight:700; font-size:clamp(.85rem,1.9vh,1rem); opacity:.8; }
.trust-row { display:flex; gap:12px; flex-wrap:wrap; }
.trust {
  font-weight:700; font-size:clamp(.8rem,1.8vh,.95rem); letter-spacing:.06em;
  border:1.5px solid rgba(255,255,255,.25); border-radius:var(--radius-pill);
  padding:.6em 1.4em; background:rgba(255,255,255,.06);
}

/* ---------- team page ---------- */
.slide-team { background:radial-gradient(130% 120% at 50% 115%, #5A1A53 0%, var(--bb-plum) 52%, var(--bb-night) 100%); }
.slide-team .scroll-inner { gap:clamp(24px,5vh,56px); }
.tm-row { display:flex; align-items:center; gap:clamp(20px,4vw,56px); }
.tm-row:nth-child(even) { flex-direction:row-reverse; }
.tm-photo {
  position:relative; flex:0 0 44%; aspect-ratio:4/4.6; max-height:58vh;
  border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--bb-plum);
}
.tm-photo-wide { flex:0 0 54%; aspect-ratio:4/3; }
.tm-photo img { width:100%; height:100%; object-fit:cover; }
.tm-photo-placeholder {
  background:radial-gradient(100% 100% at 50% 30%, #5A1A53 0%, var(--bb-plum) 75%);
  display:grid; place-items:center; align-content:center; gap:6px;
}
.tm-initial {
  font-weight:800; font-size:clamp(5rem,16vh,9rem); line-height:1;
  background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tm-coming { font-weight:700; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; opacity:.55; }
.tm-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:clamp(6px,1.2vh,12px); }
.tm-num { font-weight:800; font-size:.85rem; letter-spacing:.18em; color:var(--bb-orange); }
.tm-heading { font-weight:800; font-size:clamp(2.2rem,6vh,3.8rem); line-height:1; }
.tm-role-tag {
  font-weight:700; font-size:clamp(.7rem,1.6vh,.88rem); letter-spacing:.18em;
  text-transform:uppercase; color:var(--bb-yellow);
}
.tm-bio { font-weight:300; font-size:clamp(1rem,2.3vh,1.3rem); line-height:1.55; opacity:.9; max-width:30em; }
.team-foot { display:flex; align-items:center; gap:clamp(20px,4vw,48px); flex-wrap:wrap; }

/* ---------- 3 · visualizer ---------- */
.slide-viz { display:flex; flex-direction:column; background:var(--bb-night); }
.viz-stage { position:relative; flex:1; min-height:0; }
.viz-img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s ease;
}
.viz-img.is-on { opacity:1; }
.viz-head {
  position:absolute; top:clamp(18px,4vh,40px); left:clamp(24px,4vw,48px);
  display:flex; flex-direction:column; gap:.5em;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.viz-note {
  position:absolute; right:clamp(20px,3vw,40px); bottom:16px;
  font-weight:500; font-size:.82rem; letter-spacing:.06em; opacity:.85;
  text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.viz-controls {
  flex:0 0 auto; display:flex; flex-direction:column; gap:12px;
  padding:16px clamp(20px,3vw,40px) max(18px, env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(28,7,25,0), rgba(28,7,25,.4) 30%), var(--bb-night);
}
.viz-houses { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; }
.viz-houses::-webkit-scrollbar { display:none; }
.viz-scenes { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.viz-scenes::-webkit-scrollbar { display:none; }
.scene-chip { display:inline-flex; align-items:center; gap:.55em; }
.scene-dots { display:inline-flex; gap:3px; }
.scene-dots i { width:.62em; height:.62em; border-radius:50%; display:inline-block; box-shadow:0 0 6px currentColor; }

/* ---------- day/night slider (embedded in install) ---------- */
.dn-stage { position:relative; overflow:hidden; touch-action:none; }
.dn-embedded {
  height:clamp(320px,56vh,600px); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.dn-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dn-day { position:absolute; inset:0; overflow:hidden; width:60%; }
.dn-day .dn-img { width:100vw; max-width:none; }
.dn-handle {
  position:absolute; top:0; bottom:0; left:60%; width:4px; margin-left:-2px;
  background:var(--bb-white); box-shadow:0 0 18px rgba(0,0,0,.5); cursor:ew-resize;
}
.dn-grip {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:var(--grad-sunrise); box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.dn-grip::before { content:"◂ ▸"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1rem; font-weight:700; letter-spacing:.1em; }
.dn-tag {
  position:absolute; top:18px; font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.5em 1.1em; border-radius:var(--radius-pill); background:rgba(28,7,25,.55); backdrop-filter:blur(6px);
}
.dn-tag-day { left:18px; }
.dn-tag-night { right:18px; }

/* ---------- how cards (install page) ---------- */
.how-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px); }
.how-card {
  background:var(--bb-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(14px,2.6vh,26px); display:flex; flex-direction:column; gap:.6em;
}
.how-img {
  height:clamp(90px,16vh,150px); border-radius:var(--radius-md);
  background:var(--bb-white); border:1px solid var(--ink-10);
  display:grid; place-items:center; overflow:hidden;
}
.how-img img { max-width:82%; max-height:84%; object-fit:contain; }
.how-card h3 { font-weight:700; font-size:clamp(1.05rem,2.5vh,1.4rem); line-height:1.15; }
.how-card p { font-weight:300; font-size:clamp(.88rem,1.9vh,1.04rem); line-height:1.5; color:var(--ink-60); }

/* ---------- gallery ---------- */
.slide-gallery { display:flex; flex-direction:column; background:var(--bb-night); }
.gal-head { padding:clamp(20px,4.5vh,44px) clamp(24px,4vw,48px) clamp(8px,1.6vh,16px); display:flex; flex-direction:column; gap:.55em; }
.gal-filters { display:flex; gap:10px; flex-wrap:wrap; margin-top:.4em; }
.gal-wall {
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows:110px; gap:8px;
  padding:6px clamp(24px,4vw,48px) max(22px, env(safe-area-inset-bottom));
  scrollbar-width:none;
}
.gal-wall::-webkit-scrollbar { display:none; }
.wall-item {
  border:0; padding:0; cursor:pointer; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--bb-plum);
}
.wall-item img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- pricing / bid builder ---------- */
.slide-pricing { background:radial-gradient(120% 130% at 10% -10%, #4A1545 0%, var(--bb-plum) 55%, var(--bb-night) 100%); }
.bid-wrap {
  height:100%; max-width:1180px; margin:0 auto;
  padding:clamp(20px,4vh,52px) clamp(24px,5vw,64px);
  display:flex; gap:clamp(24px,4vw,64px); align-items:center;
}
.bid-left { flex:1.15; min-width:0; display:flex; flex-direction:column; gap:clamp(10px,2vh,20px); }
.preset-tabs { align-self:flex-start; }
input[type="range"] {
  flex:1; appearance:none; -webkit-appearance:none; height:8px; border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--bb-orange), var(--bb-pink)); outline:none; min-width:0;
}
input[type="range"]::-webkit-slider-thumb {
  appearance:none; -webkit-appearance:none; width:32px; height:32px; border-radius:50%;
  background:var(--bb-white); border:4px solid var(--bb-pink); box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:pointer;
}
.bid-sides { display:flex; flex-direction:column; gap:clamp(8px,1.5vh,14px); }
.bid-side { display:flex; align-items:center; gap:clamp(10px,1.4vw,16px); }
.bid-side-label {
  flex:0 0 4.6em; font-weight:700; font-size:clamp(.9rem,2.1vh,1.1rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side-label-edit {
  flex:0 0 5.5em; width:5.5em; font-weight:700; font-size:clamp(.9rem,2vh,1.05rem);
  text-align:left; white-space:nowrap; overflow:hidden;
}
.side-rm { margin-right:-4px; }
.runs-row { border-top:0; padding-top:0; }
.bid-btn {
  flex:0 0 auto; width:clamp(38px,5vh,46px); height:clamp(38px,5vh,46px); border-radius:50%;
  border:1.5px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; font-size:1.4rem; font-weight:500; line-height:1; cursor:pointer;
  transition:background .15s;
}
.bid-btn:active { background:rgba(255,255,255,.22); }
.bid-side-val { flex:0 0 4.6em; text-align:right; font-weight:300; font-size:clamp(.9rem,2vh,1.05rem); opacity:.85; }
.bid-side-val b { font-weight:800; font-size:1.25em; }
.bid-rate { display:flex; align-items:center; gap:clamp(12px,1.6vw,18px); }
.bid-rate-label { font-weight:700; font-size:clamp(.78rem,1.7vh,.92rem); letter-spacing:.16em; text-transform:uppercase; color:var(--bb-yellow); }
/* rate reads as plain text — only the rep knows it's a field */
.bid-rate-custom {
  display:inline-flex; align-items:baseline;
  font-weight:300; font-size:clamp(.95rem,2.1vh,1.1rem); opacity:.85;
}
.bid-rate-custom input {
  width:2.6em; border:0; background:none; color:#fff; font:inherit; outline:none; padding:0;
  appearance:textfield; -moz-appearance:textfield; caret-color:var(--bb-pink);
}
.bid-rate-custom input::-webkit-outer-spin-button, .bid-rate-custom input::-webkit-inner-spin-button { -webkit-appearance:none; }
.bid-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bid-editbtn {
  font-family:inherit; font-weight:700; font-size:clamp(.78rem,1.8vh,.95rem);
  color:rgba(255,255,255,.75); background:none; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.3); border-radius:var(--radius-pill);
  padding:.45em 1.2em; transition:background .2s, color .2s, border-color .2s;
}
.bid-editbtn.is-on { background:var(--bb-yellow); border-color:var(--bb-yellow); color:var(--bb-plum); }
.bid-row-extra span { opacity:.95; }
.bid-neg { color:var(--bb-bubblegum); }
.bid-rm {
  flex:0 0 auto; width:1.7em; height:1.7em; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,77,77,.25); color:#FFB3B3; font-size:.78em; line-height:1;
  margin-right:.3em;
}
.bid-add-row {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:.4em;
  padding-top:.6em; border-top:1px dashed rgba(255,255,255,.2);
}
.bid-add-row > span { font-weight:700; font-size:.78em; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.bid-add {
  font-family:inherit; font-weight:500; font-size:clamp(.72rem,1.7vh,.88rem);
  color:var(--bb-yellow); background:none; cursor:pointer;
  border:1.5px dashed rgba(253,183,26,.5); border-radius:var(--radius-pill);
  padding:.4em 1em;
}
.bid-add:active { background:rgba(253,183,26,.15); }
/* inline-editable amounts — plain numbers with a dotted hint */
.bid-fee { display:inline-flex; align-items:baseline; font-weight:700; white-space:nowrap; flex:0 0 auto; }
.bid-edit {
  width:3.4em; border:0; background:none; color:inherit; font:inherit; font-weight:700;
  outline:none; padding:0 0 1px; caret-color:var(--bb-pink);
  border-bottom:1px dashed rgba(255,255,255,.3);
  appearance:textfield; -moz-appearance:textfield;
}
.bid-edit::-webkit-outer-spin-button, .bid-edit::-webkit-inner-spin-button { -webkit-appearance:none; }
.bid-edit-label { width:11em; font-weight:300; text-align:left; }
.bid-card {
  flex:.85; min-width:0; display:flex; flex-direction:column; gap:clamp(10px,2vh,18px);
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--radius-xl); padding:clamp(18px,3.4vh,34px);
}
.bid-tabs {
  display:flex; gap:4px; padding:4px; border-radius:var(--radius-pill);
  background:rgba(0,0,0,.28); align-self:flex-start;
}
.bid-tab {
  border:0; background:none; cursor:pointer; font-family:inherit; color:rgba(255,255,255,.65);
  font-weight:700; font-size:clamp(.82rem,1.9vh,1rem);
  padding:.55em 1.5em; border-radius:var(--radius-pill);
  transition:background .2s, color .2s;
}
.bid-tab.is-active { background:var(--grad-sunrise); color:#fff; }
.bid-terms { display:flex; gap:8px; flex-wrap:wrap; }
.bid-rows { display:flex; flex-direction:column; gap:.55em; }
.bid-row {
  display:flex; justify-content:space-between; gap:1em;
  font-weight:300; font-size:clamp(.88rem,2vh,1.05rem); opacity:.9;
}
.bid-row b { font-weight:700; }
.bid-total { display:flex; flex-direction:column; gap:.15em; border-top:1.5px solid rgba(255,255,255,.16); padding-top:clamp(10px,2vh,18px); }
.bid-total-label { font-weight:500; font-size:clamp(.72rem,1.6vh,.88rem); letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.bid-total-num {
  font-weight:800; font-size:clamp(2.6rem,7vh,4.6rem); line-height:1; font-variant-numeric:tabular-nums;
  background:var(--grad-sunrise); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bid-split { display:flex; gap:clamp(20px,3vw,44px); }
.bid-split-item { display:flex; flex-direction:column; }
.bid-split-num { font-weight:800; font-size:clamp(1.3rem,3.2vh,1.9rem); line-height:1.1; }
.bid-split-label { font-weight:500; font-size:clamp(.68rem,1.5vh,.82rem); letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin-top:.2em; }
.bid-note { font-weight:300; font-size:clamp(.76rem,1.7vh,.92rem); line-height:1.45; opacity:.6; }

/* ---------- dealer card + powered-by ---------- */
.dealer-card {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.16);
  border-radius:var(--radius-xl); padding:clamp(18px,3.4vh,34px) clamp(28px,5vw,56px);
}
.dealer-name { font-weight:700; font-size:clamp(1.3rem,3vh,1.8rem); }
.dealer-city { font-weight:300; opacity:.75; margin-top:-6px; }
.dealer-actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.dealer-actions a {
  font-weight:700; font-size:clamp(.95rem,2.1vh,1.15rem); text-decoration:none; color:var(--bb-white);
  background:var(--grad-sunrise); border-radius:var(--radius-pill); padding:.8em 1.7em; box-shadow:var(--shadow-pop);
}
.dealer-actions a.ghost { background:transparent; border:1.5px solid rgba(255,255,255,.4); box-shadow:none; }
.close-foot { display:flex; align-items:center; gap:10px; opacity:.65; font-size:.85rem; font-weight:500; letter-spacing:.08em; }
.close-foot img { height:20px; }

/* ---------- chrome: back button, lightbox ---------- */
.back-btn {
  position:fixed; top:max(14px, env(safe-area-inset-top)); right:18px; z-index:40;
  display:flex; align-items:center; gap:6px;
  font:inherit; font-weight:700; font-size:.95rem; color:var(--bb-white);
  background:rgba(28,7,25,.55); backdrop-filter:blur(8px);
  border:1.5px solid rgba(255,255,255,.25); border-radius:var(--radius-pill);
  padding:.62em 1.25em .62em 1em; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
body.paged .back-btn {
  opacity:1; visibility:visible; transform:none;
  transition:opacity .3s var(--ease-out) .25s, transform .3s var(--ease-out) .25s;
}
.back-btn:active { transform:scale(.94); }
.slide-how ~ .back-btn { color:var(--bb-white); } /* stays light on cream via dark pill */
.lightbox {
  position:fixed; inset:0; z-index:50; background:rgba(10,2,9,.96);
  display:grid; place-items:center;
}
.lightbox[hidden] { display:none; }
.lightbox img { max-width:100vw; max-height:100dvh; object-fit:contain; }
.lightbox-x {
  position:absolute; top:max(14px, env(safe-area-inset-top)); right:18px;
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; font-size:1.3rem;
}

/* ---------- portrait tweaks ---------- */
@media (orientation:portrait) {
  .home-main { flex-direction:column; gap:clamp(12px,2vh,20px); }
  .home-left { flex:0 0 auto; justify-content:flex-start; }
  .home-left .display { font-size:clamp(2.2rem,5vh,3.4rem); }
  .menu-item { padding:clamp(7px,1.2vh,12px) 4px; }
  .menu-text em { display:none; }
  .home-right { flex:1; justify-content:flex-start; }
  .home-houses { grid-template-columns:repeat(3,1fr); flex:1; }
  .how-cards, .cred-cards { grid-template-columns:1fr; }
  .spec-wrap { flex-direction:column; justify-content:center; }
  .spec-left { flex:0 0 auto; }
  .spec-stage { flex:0 1 auto; width:min(70vw, 46vh); }
  .tm-row, .tm-row:nth-child(even) { flex-direction:column; align-items:stretch; }
  .tm-photo, .tm-photo-wide { flex:0 0 auto; width:100%; aspect-ratio:4/3.4; max-height:40vh; }
  .proc { flex-direction:column; }
  .proc-head { flex-direction:column; align-items:flex-start; gap:10px; }
  .proc-stage { min-height:clamp(280px,36vh,420px); }
  .bid-wrap { flex-direction:column; align-items:stretch; justify-content:center; gap:clamp(14px,2.4vh,24px); }
  .bid-left, .bid-card { flex:0 0 auto; }
  .how-img { height:clamp(70px,10vh,110px); }
  .cred-stats { gap:clamp(18px,5vw,36px); }
  .app-wrap { flex-direction:column; justify-content:center; gap:18px; }
  .app-copy { flex:0 0 auto; }
  .app-desc { min-height:3em; }
  .phone { width:fit-content; align-self:center; }
  .phone-screen { width:auto; height:clamp(260px,38vh,520px); }
}