/* Andrew guided mode */
#gs{position:fixed;inset:0;z-index:70;background:radial-gradient(ellipse at 50% 30%,#1b1b1b 0%,#050505 70%);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .5s}
#gs.on{display:flex}#gs.show{opacity:1}
#gs .in{width:min(720px,100%);text-align:center;color:#fff}
#gs .lg{height:26px;margin:0 auto 22px;display:block;opacity:.95}
#gs .vw{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#gs video{width:100%;height:100%;object-fit:cover;display:block}
#gs .cc{min-height:3.2em;margin:16px auto 0;max-width:600px;font:400 17px/1.55 Manrope,system-ui,sans-serif;color:#e9e6e0}
#gs .bt{display:flex;gap:14px;justify-content:center;margin-top:22px;flex-wrap:wrap}
#gs .bt button,.gq button{border-radius:999px;padding:16px 30px;font-family:Jost;font-size:13px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;border:1px solid #fff;background:transparent;color:#fff;min-width:230px}
#gs .bt button.p,.gq button.p{background:var(--gold);border-color:var(--gold);color:#0b0b0b}
.gsnd{position:absolute;left:14px;bottom:14px;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:20px;padding:8px 14px;font:500 12px Manrope,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.gsnd[hidden]{display:none}
/* guide card */
#ga{position:fixed;z-index:58;left:20px;bottom:20px;width:360px;background:#0d0d0d;color:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);overflow:hidden;display:none;font-family:Manrope,system-ui,sans-serif}
#ga.on{display:block}
#ga .gt{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;font:500 11px Jost;letter-spacing:.16em;text-transform:uppercase;color:#cfc8bb}
#ga .gt b{flex:1;font-weight:500}
#ga .gt button{background:none;border:0;color:#cfc8bb;font:500 11px Jost;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:6px 8px;border-radius:12px}
#ga .gt button:hover{background:rgba(255,255,255,.08);color:#fff}
#ga .gv{position:relative;aspect-ratio:16/9;background:#000 url(poster.jpg) center/cover}
#ga video{width:100%;height:100%;object-fit:cover;display:block}
#ga .cc{padding:12px 16px 4px;font-size:14px;line-height:1.5;min-height:3em;color:#ece9e3}
.gq{display:flex;gap:8px;padding:10px 12px 14px;flex-wrap:wrap}
.gq:empty{display:none}
.gq button{min-width:0;flex:1 1 0;padding:13px 10px;font-size:11px;letter-spacing:.14em;white-space:nowrap}
.gq button.s{flex-basis:100%;border-color:rgba(255,255,255,.25);color:#cfc8bb;padding:9px 10px}
#ga.min{width:auto;border-radius:40px}
#ga.min .gv,#ga.min .cc,#ga.min .gq{display:none}
#ga.min .gt{padding:6px 8px 6px 6px}
#ga.min .gt:before{content:"";width:34px;height:34px;border-radius:50%;background:url(poster.jpg) 50% 22%/220%;flex:none}
body.g-sr #ga{left:auto;right:24px;bottom:auto;top:84px}
body.g-on .cap{display:none}
/* ask andrew */
#gk{position:fixed;z-index:58;right:20px;bottom:20px;display:none;align-items:center;gap:10px;background:#0d0d0d;color:#fff;border:0;border-radius:999px;padding:6px 18px 6px 6px;font:500 12px Jost;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 34px rgba(0,0,0,.35)}
#gk:before{content:"";width:38px;height:38px;border-radius:50%;background:url(poster.jpg) 50% 22%/220%}
#gk.on{display:flex}
#gp{position:fixed;z-index:59;right:20px;bottom:20px;width:380px;max-height:calc(100vh - 40px);background:#0d0d0d;color:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden;font-family:Manrope,system-ui,sans-serif}
#gp.on{display:flex}
#gp .gv{position:relative;aspect-ratio:16/9;background:#000 url(poster.jpg) center/cover;flex:none}
#gp video{width:100%;height:100%;object-fit:cover;display:block}
#gp .gt{display:flex;align-items:center;padding:8px 10px 8px 14px;font:500 11px Jost;letter-spacing:.16em;text-transform:uppercase;color:#cfc8bb}
#gp .gt b{flex:1;font-weight:500}
#gp .gt button{background:none;border:0;color:#cfc8bb;font-size:18px;cursor:pointer;padding:2px 8px}
#gp .log{overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-height:60px}
#gp .m{font-size:14px;line-height:1.5;padding:10px 13px;border-radius:14px;max-width:88%}
#gp .m.u{align-self:flex-end;background:#2a2723;color:#fff}
#gp .m.a{align-self:flex-start;background:#f4f1ec;color:#111}
#gp .m.a a{color:#7a5a2a}
#gp .m.w{opacity:.6;font-style:italic}
#gp .sg{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px}
#gp .sg button{background:transparent;border:1px solid rgba(255,255,255,.25);color:#ddd;border-radius:14px;padding:6px 10px;font-size:12px;cursor:pointer}
#gp form{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid rgba(255,255,255,.08)}
#gp input{flex:1;border:0;border-radius:22px;padding:11px 14px;font:14px Manrope,system-ui,sans-serif;background:#1d1d1d;color:#fff;outline:none}
#gp form button{border:0;border-radius:22px;padding:0 16px;background:var(--gold);color:#0b0b0b;font:500 12px Jost;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
#prog span{cursor:default}
body.g-any #prog span.done{cursor:pointer}
@media(max-width:820px){
 #gs .bt button{min-width:0;width:100%}
 #gs .cc{font-size:15px}
 #ga,body.g-sr #ga{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:16px 16px 0 0;display:none;grid-template-columns:132px 1fr;grid-template-areas:"t t" "v c" "q q"}
 #ga.on,body.g-sr #ga.on{display:grid}
 #ga .gt{grid-area:t;padding:6px 8px 2px 14px}
 #ga .gv{grid-area:v;margin-left:12px;border-radius:10px;overflow:hidden;align-self:start}
 #ga .cc{grid-area:c;padding:0 14px 0 12px;font-size:13px;min-height:0;align-self:center}
 #ga .gq{grid-area:q;padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
 #ga.min,body.g-sr #ga.min{left:auto;right:12px;bottom:12px;top:auto;border-radius:40px;display:none}
 #ga.min.on,body.g-sr #ga.min.on{display:block}
 body.g-on.g-app aside .body{padding-bottom:200px}
 body.g-on.g-app aside .foot{display:none}
 body.g-on.g-sr #sr .rail,body.g-on.g-sr #sr .tnav{display:none}
 body.g-on.g-sr #sr .info{bottom:200px}
 #gk{right:12px;bottom:12px}
 #gp{left:0;right:0;bottom:0;width:auto;max-height:82vh;border-radius:16px 16px 0 0}
 #gp .gv{display:none}
}
@media(prefers-reduced-motion:reduce){#gs{transition:none}}
body:has(#bro.on) #ga,body:has(#bro.on) #gk,body:has(#bro.on) #gp,body:has(.zv.on) #ga,body:has(.zv.on) #gk{display:none!important}
#ga .gt{gap:2px;white-space:nowrap}
#ga .gt button{font-size:10px;letter-spacing:.1em;padding:6px 7px}
/* phones: card 25% bigger (Andrew, 10 Nov) */
@media(max-width:820px){
 #ga,body.g-sr #ga{grid-template-columns:165px 1fr}
 #ga .gt{padding:9px 10px 4px 16px;font-size:13px}
 #ga .gt button{font-size:12px;padding:7px 8px}
 #ga .cc{font-size:16px;line-height:1.45}
 #ga .gq{gap:10px;padding:12px 14px calc(14px + env(safe-area-inset-bottom))}
 #ga .gq button{padding:16px 10px;font-size:13px}
 body.g-on.g-app aside .body{padding-bottom:250px}
 body.g-on.g-sr #sr .info{bottom:250px}
}
/* 25% larger guide card (Andrew's request, 10 Nov) */
#ga{width:450px}
#ga .cc{font-size:17px}
#ga .gt{font-size:13px}
#ga .gt button{font-size:12px;padding:7px 9px}
.gq button{padding:16px 12px;font-size:13px}
@media(max-width:820px){
 #ga,body.g-sr #ga{grid-template-columns:165px 1fr;width:auto}
 #ga .cc{font-size:16px;padding:0 16px 0 14px}
 #ga .gt{font-size:12px;padding:8px 10px 4px 16px}
 #ga .gt button{font-size:11px;padding:7px 8px}
 #ga .gv{margin-left:14px;border-radius:12px}
 .gq button{padding:17px 10px;font-size:13px}
 body.g-on.g-app aside .body{padding-bottom:250px}
 body.g-on.g-sr #sr .info{bottom:250px}
}
/* Ask Andrew never covers Back/Next: sits above the footer in the studio, top-right in the showroom */
#gk{bottom:96px}
body.g-sr-open #gk{bottom:auto;top:84px;right:24px}
body:not(.g-sr-open) aside .body{padding-bottom:70px}
@media(max-width:820px){
 #gk{bottom:92px;right:12px;padding:5px 14px 5px 5px;font-size:11px;gap:8px}
 #gk:before{width:32px;height:32px}
 body.g-sr-open #gk{top:64px;right:12px}
}
/* Phone: Andrew fills the black area under the picture, centred, captions under him (11 Nov) */
@media(max-width:820px){
 #ga.on:not(.min),body.g-sr #ga.on:not(.min){display:flex;flex-direction:column;top:calc(56px + 55.9vw);bottom:0;border-radius:16px 16px 0 0}
 body.g-sr #ga.on:not(.min){top:calc(19vh + 56.25vw)}
 #ga .gt{flex:none}
 #ga .gv{flex:1 1 auto;min-height:120px;margin:4px 14px 0;border-radius:12px;background:#000;display:flex;justify-content:center;overflow:hidden;aspect-ratio:auto}
 #ga video{height:100%;width:auto;max-width:100%;aspect-ratio:16/9;object-fit:cover}
 #ga .cc{flex:none;font-size:13px;line-height:1.5;text-align:center;padding:10px 18px 0;min-height:3.6em}
 #ga .gq{flex:none}
 body.g-on.g-app aside .body{padding-bottom:60vh}
}
.gsnd2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:22px;padding:10px 16px;font:500 12px Jost;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;z-index:2}
.gsnd2[hidden]{display:none}
/* Replay: bottom right of each of his videos, once he has finished speaking.
   The selector is button.grp, never plain .grp: the Review step's summary groups are <details class="grp">, and a plain
   .grp rule here pinned every one of them to the bottom corner of the page (found 14 Nov 2026). */
button.grp{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 12px;font:500 10.5px Jost,Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
button.grp:hover{border-color:#b08d57;color:#e7cf9f}button.grp[hidden]{display:none}
#gs .vw button.grp{right:14px;bottom:14px}
@media(max-width:820px){
 #ga .gv{position:relative;display:block}
 #ga .gv video{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:50% 30%}
}
@media(max-width:820px){#ga .gv{align-self:stretch}}
/* Phone: no captions under Andrew, he fills the space (11 Nov) */
@media(max-width:820px){#ga .cc{display:none}#ga .gv{margin:4px 14px 2px}#ga .gq{padding-top:12px}}

/* showroom on phones: Ask Andrew sits down below, at the bottom right (10 Nov 2026) */
@media(max-width:820px){body.g-sr-open #gk{top:auto;bottom:16px;right:12px}}

/* ===== Flow review, 14 Nov 2026 (see "Design With Andrew: the flow review" in CLAUDE.md) ===== */
/* Back one step: top left of his picture */
.gbk{position:absolute;left:10px;top:10px;z-index:3;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 12px;font:500 10.5px Jost,Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gbk:hover{border-color:#b08d57;color:#e7cf9f}.gbk[hidden]{display:none}
/* Hidden: just his face and Show. He is quiet and the page's own Back and Next do the work. */
#ga.min #gaask,#ga.min #gamute,#ga.min #gaoff{display:none}
#ga.min .gt b{flex:none;padding-right:4px}
/* The Review step: Get My Brochure, Change Something, and the steps to change */
.gq button.c{flex:1 1 30%;padding:12px 6px;font-size:11px;letter-spacing:.1em}
@media(max-width:820px){
 /* hidden, the pill sits above the page's Back and Next */
 body.g-app #ga.min.on{bottom:92px}
 /* captions only while his sound is off, so a muted phone still knows what he asked */
 #ga.mt:not(.min) .cc{display:block;flex:none;font-size:13px;line-height:1.45;text-align:center;padding:8px 18px 0;min-height:0}
 /* Review: he steps down to a strip along the bottom so the summary and the brochure form can be seen */
 #ga.on.rv:not(.min),body.g-sr #ga.on.rv:not(.min){display:grid;top:auto;bottom:0;grid-template-columns:112px 1fr;grid-template-areas:"t t" "v c" "q q";border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35)}
 #ga.rv:not(.min) .gt{grid-area:t}
 #ga.rv:not(.min) .gv{grid-area:v;flex:none;height:84px;min-height:0;margin:2px 0 0 14px;border-radius:10px;align-self:start}
 #ga.rv:not(.min) .cc,#ga.rv.mt:not(.min) .cc{grid-area:c;display:block;text-align:left;font-size:13px;line-height:1.45;padding:0 14px 0 12px;min-height:0;align-self:center}
 #ga.rv:not(.min) .gq{grid-area:q;padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
 #ga.rv:not(.min) .gq button{padding:14px 8px;font-size:12px}
 #ga.rv:not(.min) .gq button.c{padding:11px 4px;font-size:10.5px}
 #ga.rv button.grp,#ga.rv .gsnd2{display:none}
 body.g-on.g-app.g-rv aside .body{padding-bottom:250px}
}

/* his picture at rest, shown when he has finished speaking (rest() in guide.js) */
.grest{position:absolute;opacity:0;transition:opacity .28s;pointer-events:none;display:block;max-width:none}
.grest.on{opacity:1}

/* The welcome is press-to-play (15 Nov 2026): nothing plays on the start screen until this is pressed */
#gs #gsnd{left:0;top:0;right:0;bottom:0;width:100%;height:100%;border-radius:0;padding:0;background:linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.5));backdrop-filter:none;-webkit-backdrop-filter:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:11%;gap:14px;font:500 11px Jost,system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#f1e6cf}
#gs #gsnd[hidden]{display:none}
#gs #gsnd i{position:relative;display:block;width:84px;height:84px;border-radius:50%;background:var(--gold,#b08d57);transition:transform .2s ease}
#gs #gsnd i::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #0b0b0b}
#gs #gsnd i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(176,141,87,.75);animation:gsPulse 2.4s ease-out infinite}
#gs #gsnd:hover i{transform:scale(1.05)}
@keyframes gsPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}
@media(prefers-reduced-motion:reduce){#gs #gsnd i::after{animation:none}}
@media(max-width:820px){#gs #gsnd{padding-bottom:6%;gap:7px;font-size:10px}#gs #gsnd i{width:52px;height:52px}#gs #gsnd i::before{border-width:9px 0 9px 15px}}

/* Bathroom step on a wide screen (15 Nov 2026, Andrew): the card moves to the right of the picture and lies flat,
   so the vanity (bottom left of the picture), the niche and most of the shower stay in view */
@media(min-width:821px){
 body.g-bath #ga:not(.min){left:auto;right:var(--gar,420px);width:var(--gaw,540px)}
 body.g-bath #ga.on:not(.min){display:grid;grid-template-columns:minmax(140px,39%) 1fr;grid-template-areas:"t t" "v c" "q q"}
 body.g-bath #ga:not(.min) .gt{grid-area:t}
 body.g-bath #ga:not(.min) .gv{grid-area:v;margin-left:12px;border-radius:10px;overflow:hidden;align-self:start}
 body.g-bath #ga:not(.min) .cc{grid-area:c;align-self:center;min-height:0;padding:0 16px 0 14px;font-size:15px}
 body.g-bath #ga:not(.min) .gq{grid-area:q}
 body.g-bath #ga:not(.min) .gt{font-size:11px;gap:4px;padding-right:8px}
 body.g-bath #ga:not(.min) .gt button{font-size:11px;padding:6px 6px;letter-spacing:.1em}
 /* the card now sits where Zoom and the picture note were, so those two swap to the left */
 body.g-on.g-bath .stage>.zbtn,body.g-on.g-bath .stage>.note{right:auto;left:20px}
}