/* V2 design-lab homepage (loaded on the homepage only). Uses the site palette and fonts. */
.btn-gold{background:var(--gold-light);color:var(--dark)}
.btn-gold:hover{background:#d8bf8a;color:var(--dark)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.studio-hero{background:radial-gradient(ellipse at 85% 30%,rgba(128,161,127,.16),transparent 45%),var(--dark);color:var(--on-dark);padding:3rem 0 3.5rem;overflow:hidden}
.studio-hero :focus-visible{outline-color:var(--gold-light)}
.studio-grid{display:grid;gap:2.5rem;align-items:center}
@media (min-width:960px){.studio-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.5rem}.studio-hero{padding:4.5rem 0 5rem}}
.studio-copy{min-width:0}
.studio-hero .eyebrow{color:var(--gold-light);font-size:.875rem}
.studio-hero h1{color:#fff;font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:500;line-height:1.05;margin:.4rem 0 1.1rem;letter-spacing:-.01em}
.studio-hero h1 em{color:var(--gold-light);font-style:italic}
.studio-plain{font-size:1.15rem;color:#fff;font-weight:600;max-width:34ch;margin:0 0 .8rem}
.studio-lead{color:var(--on-dark-muted);max-width:44ch;margin:0}
.studio-hero .btn-row{margin-top:1.6rem}
.studio-wa{margin:1rem 0 0}
.studio-wa a{display:inline-flex;align-items:center;gap:.5rem;color:var(--on-dark);font-weight:600;text-underline-offset:4px}
.studio-wa a:hover{color:#fff}
.studio-badges{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.studio-badges li{border:1px solid rgba(201,173,114,.45);border-radius:999px;padding:.3rem .8rem;font-size:.875rem;color:var(--on-dark)}

.lab{min-width:0}
.lab-card{border:1px solid rgba(236,229,211,.22);border-radius:14px;background:#22382c;padding:12px;box-shadow:0 40px 90px rgba(0,0,0,.28)}
.lab-frame{position:relative;aspect-ratio:32/21;border-radius:8px;overflow:hidden;background:#2b4537;
}
.lab-slot{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.lab-frame.drawing .lab-slot{transition-duration:.15s}
.lab-slot.is-active{opacity:1}
.lab-slot img{width:100%;height:100%;object-fit:cover;display:block}
/* Neutral placeholder until the real stage render exists: soft gradient + stage name */
.lab-ph{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.35rem;padding:1.5rem;
  background:linear-gradient(160deg,color-mix(in srgb,#e5d9c8 calc(var(--s)*16%),#3a5546) 0%,color-mix(in srgb,#b08a6b calc(var(--s)*14%),#22382c) 100%);
  color:#fff;transition:opacity .9s ease,background .6s ease}
.lab-ph-n{font-size:.875rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.lab-ph-t{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:600;line-height:1.15;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.lab-ph-r{font-size:.95rem;opacity:.85}
.lab-hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:12px}
.hud-label,.hud-chip{background:rgba(13,30,22,.82);color:#f1e7d5;border:1px solid rgba(255,255,255,.16);padding:.3rem .65rem;font-size:.875rem;border-radius:6px}
.hud-label{align-self:flex-start;letter-spacing:.08em}
.hud-row{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold-light);margin-right:.45rem;vertical-align:middle}
.lab-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem .35rem .2rem}
.lab-kicker{margin:0;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.lab-title{margin:.1rem 0 0;font-family:var(--serif);font-size:1.45rem;line-height:1.25;color:#fff}
.lab-replay{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.lab-replay:hover{background:rgba(255,255,255,.1)}
.lab-controls{display:grid;gap:1rem;margin-top:1.1rem}
.lab-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1rem;flex-wrap:wrap}
.lab-caption{font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted);font-weight:600}
.lab-pills{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.lab-pill{min-height:44px;padding:.5rem 1.05rem;border-radius:999px;border:1px solid #5d7566;background:transparent;color:var(--on-dark);font:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
.lab-pill[aria-pressed="true"]{background:var(--gold-light);border-color:var(--gold-light);color:var(--dark)}
.lab-timeline{display:grid;gap:.4rem}
.lab-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;font-size:.875rem;line-height:1.3;color:var(--on-dark-muted)}
.lab-stops li:last-child{text-align:right}
.lab-stops li:nth-child(2),.lab-stops li:nth-child(3){text-align:center}
.lab-range{display:flex;align-items:center;gap:.8rem;font-size:.875rem;color:var(--on-dark-muted);text-transform:uppercase;letter-spacing:.06em}
.lab-range input{flex:1;min-width:0;accent-color:var(--gold-light);height:44px;cursor:pointer;margin:0}
.lab-next{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;border-top:1px solid rgba(255,255,255,.14);padding-top:.9rem;margin:0;color:var(--on-dark-muted);font-size:.95rem}
.lab-next a{color:var(--gold-light);font-weight:600}
.lab-next a::after{content:" →"}

.studio-strip{background:var(--gold-tint);color:var(--gold-text);padding:1rem 0}
.studio-strip .container{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem;font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.studio-strip span:not(:last-child)::after{content:"✦";margin-left:1.5rem;color:var(--gold)}

main .eyebrow,main .tag{font-size:.875rem}
.section-head h2 em,.method-section h2 em,.start-section h2 em{color:var(--gold-text);font-style:italic}

.facts-row{list-style:none;padding:0;margin:1.75rem 0 .5rem;display:grid;gap:.75rem}
@media (min-width:768px){.facts-row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.facts-row{grid-template-columns:repeat(4,1fr)}}
.facts-row li{background:var(--gold-tint);border-radius:12px;padding:1rem 1.1rem;font-size:.95rem;color:var(--ink)}
.facts-row strong{display:block;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:.2rem}

.space-grid{display:grid;gap:1rem}
@media (min-width:900px){.space-grid{grid-template-columns:repeat(3,1fr)}}
.space-card{position:relative;display:block;min-height:380px;border-radius:var(--radius);overflow:hidden;color:#fff;text-decoration:none;background:#55665a}
.space-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.space-card:hover img{transform:scale(1.04)}
.space-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,25,20,.88),rgba(11,25,20,.05) 65%)}
.space-tag{position:absolute;z-index:1;left:14px;top:14px;background:rgba(255,255,255,.9);color:var(--muted);font-size:.875rem;padding:.2rem .6rem;border-radius:6px}
.space-text{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:1.4rem;display:grid;gap:.3rem}
.space-title{font-family:var(--serif);font-size:1.6rem;font-weight:600;line-height:1.15}
.space-desc{color:#e4e2d8;font-size:.95rem}
.space-link{font-weight:700;color:var(--gold-light)}
.space-link::after{content:" →"}
.space-note{margin-top:1rem;color:var(--muted);font-size:.95rem}
.space-note .card-link{margin-left:.4rem}

.method-layout{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.method-layout{grid-template-columns:.9fr 1.1fr;gap:4rem}}
.method{list-style:none;margin:0;padding:0;counter-reset:m;border-top:1px solid var(--line)}
.method li{counter-increment:m;display:grid;grid-template-columns:3.2rem 1fr;column-gap:1rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.method li::before{content:counter(m,decimal-leading-zero);grid-row:span 2;font-family:var(--serif);font-size:1.9rem;color:var(--gold-text);line-height:1}
.method h3{margin:0 0 .3rem}
.method p{margin:0;color:var(--muted)}

/* Floating WhatsApp button stays out of the way while the hero is on screen */
.wa-float{transition:opacity .25s,transform .25s}
body.hero-in-view .wa-float{opacity:0;pointer-events:none;transform:scale(.8)}

@media (max-width:520px){.studio-hero .btn-row .btn{flex:1 1 100%}.lab-card{padding:8px}.lab-hud{padding:8px}.lab-title{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.lab-slot,.lab-ph,.space-card img,.wa-float{transition:none}}