/* ---------- 9b. QUOTE: the exploding garage ----------
   A card-model garage, seen from a corner. As you scroll it comes apart (roof up, near walls fold flat),
   the walls are insulated and plastered, a window, radiator, oak floor and furniture drop in, it closes
   back up as a finished room, then turns face-on and grows into the form's back panel; the fields then
   appear on it. js/model.js builds the 3D faces and drives them from scroll.
   Without JS (or with reduced motion) the stage shows the finished-room photo and the form is simply there. */
.quote__pin { display: contents; }   /* static layout: intro + form stay the .quote grid's children */

.model { --photo: 1; position: relative; margin: 34px 0 0; aspect-ratio: 16 / 10; overflow: hidden; }
.model__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--photo); }
.model figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 8px; background: rgba(17, 17, 17, .72); font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: var(--photo); }

.model__steps { display: flex; flex-wrap: wrap; gap: 8px clamp(14px, 1.8vw, 26px); margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.model__steps li { counter-increment: step; transition: color .3s; }
.model__steps li::before { content: "0" counter(step) " "; transition: color .3s; }
.model__steps li.is-on { color: var(--ink); }
.model__steps li.is-on::before { color: var(--accent-hot); }

/* ---- the 3D model (built by model.js) ---- */
.m3d { --ins: 0; --clear: 0; --pla: 0; --win: 0; --rad: 0; --front: 0; --panel: 0; position: absolute; z-index: 6; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.m3d__root { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform; }
.m3d__root > div { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; outline: 1px solid rgba(17, 17, 17, .28); outline-offset: -1px;
  box-shadow: inset 0 0 0 9999px rgba(10, 10, 10, var(--sh, 0)); }
.m3d__root i { position: absolute; inset: 0; }

/* materials: bare garage block -> foil-faced insulation -> plaster */
.m3d .f-wall { background: #a39d93 repeating-linear-gradient(0deg, transparent 0 13px, rgba(0, 0, 0, .14) 13px 14px); }
.m3d .f-wall .m-ins { opacity: var(--ins); background: #e0a63a repeating-linear-gradient(45deg, transparent 0 7px, rgba(120, 70, 10, .25) 7px 9px); }
.m3d .f-wall .m-pla { opacity: var(--pla); background: #ece9e2; }
.m3d .f-floor { background: #8d8a85; }
.m3d .f-roof { background: #d4d0c8; }
.m3d .f-roof .m-panel { opacity: var(--panel); background: #1b1b1b; outline: 1px solid var(--line); outline-offset: -1px; }

/* the front wall swaps the garage door for a new wall with a window */
.m3d .f-front .m-door { inset: 18% 8% 0; background: linear-gradient(180deg, #c9cbcd, #8e9194) 0 0 / 100% 12.5%; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); opacity: calc(1 - var(--front)); }
.m3d .f-front .m-new { opacity: var(--front); background: #ece9e2; }
.m3d .m-glass { background: linear-gradient(160deg, rgba(190, 220, 240, .75), rgba(120, 160, 190, .45)); outline: 4px solid #f7f6f2; outline-offset: -4px; }
.m3d .f-front .m-glass { inset: 26% 22% 30%; }
.m3d .f-back .m-glass { inset: 24% 30% 34%; opacity: var(--win); transform: scale(calc(.6 + var(--win) * .4)); }
.m3d .f-right .m-rad { inset: auto 34% 10% 34%; height: 22%; opacity: var(--rad); background: repeating-linear-gradient(90deg, #f4f3ef 0 5px, #cfccc4 5px 7px); }

/* new floor, rug, furniture */
.m3d .f-oak { background: #b88a58 repeating-linear-gradient(90deg, transparent 0 22px, rgba(70, 40, 10, .22) 22px 23px); }
.m3d .f-rug { background: #e6dccb; outline: 6px solid #d2c4ab; outline-offset: -6px; }
.m3d .f-sofa { background: #7f8f74; }
.m3d .f-table { background: #a8784a; }
.m3d .f-side { background: #c6a57f; }
.m3d .f-hot { background: var(--accent-hot); }

.m3d .f-box { background: #b8925f; }
.m3d .f-box i { inset: 40% 0 auto; height: 12%; background: rgba(90, 60, 20, .35); }
.m3d .f-chair { background: #c9b79c; }
.m3d .f-plant { background: #5f7d55; }
.m3d .f-pot { background: #e3ddd2; }
.m3d .f-back .m-doorway { inset: 22% 8% 0 auto; width: 15%; opacity: var(--pla); background: #c8b49a; outline: 3px solid #f7f6f2; outline-offset: -3px; }
.m3d .f-wall .m-skirt { inset: auto 0 0; height: 4%; opacity: var(--pla); background: #fbfaf7; box-shadow: 0 -1px 0 rgba(0, 0, 0, .12); }

/* big-screen caption while the model fills the width */
.m3d-cap { position: absolute; z-index: 7; left: var(--gutter); top: 96px; pointer-events: none; opacity: var(--cap, 1); }
.m3d-cap__step { margin: 14px 0 0; font-size: clamp(30px, 3.2vw, 54px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.m3d-cap__step i { font-style: normal; color: var(--accent-hot); }

/* the architect's pen that draws the form */
.m3d-pen { position: absolute; z-index: 8; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; visibility: hidden; }
.m3d-pen.is-on { visibility: visible; }
.m3d-pen::before, .m3d-pen::after { content: ""; position: absolute; background: rgba(var(--accent-rgb), .8); }
.m3d-pen::before { left: 12px; top: 0; width: 1px; height: 26px; }
.m3d-pen::after { left: 0; top: 12px; width: 26px; height: 1px; }
.m3d-pen i { position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hot); box-shadow: 0 0 14px 3px rgba(var(--accent-rgb), .55); }

/* while the model is on its way the form waits; once the panel lands the form is drawn on it:
   drafting grid, dashed construction lines, each line ruled across, labels lettered, values inked in */
.quote.is-anim .quote__intro { opacity: var(--intro, 0); transform: translateY(calc((1 - var(--intro, 0)) * 26px)); }
.quote.is-anim .quote__form { opacity: 0; position: relative; }
.quote.is-anim.is-built .quote__form { opacity: 1; }
.quote.is-anim .quote__form::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grid, 0);
  background: linear-gradient(rgba(245, 244, 241, .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(245, 244, 241, .05) 1px, transparent 1px) 0 0 / 24px 24px; }
.quote.is-anim .field { --d: 0; --t: 0; --v: 0; position: relative; }
.quote.is-anim .field label { clip-path: inset(0 calc(100% - var(--t) * 100%) 0 0); }
.quote.is-anim .field input, .quote.is-anim .field select, .quote.is-anim .field textarea { border-bottom-color: transparent; opacity: var(--v); }
.quote.is-anim .field::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(245, 244, 241, .3); transform: scaleX(var(--d)); transform-origin: 0 0; }
.quote.is-anim .field.is-drawing::after { background: var(--accent-hot); }
.quote.is-anim .field::before { content: ""; position: absolute; left: -36px; right: -36px; bottom: 0; border-top: 1px dashed rgba(245, 244, 241, .22); opacity: calc(var(--d) * (1 - var(--d)) * 4); pointer-events: none; }
.quote.is-anim .quote__cue { clip-path: inset(-30px calc(100% - var(--d, 0) * 100%) -30px -30px); }
.quote.is-anim .quote__send { clip-path: inset(0 calc(100% - var(--d, 0) * 100%) 0 0); }

/* pinned version: big screens with room for both columns */
.quote.is-pin { display: block; height: 440vh; padding: 0; }
.quote.is-pin .quote__pin { position: sticky; top: 0; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 90px); align-items: center;
  height: 100vh; padding: 96px var(--gutter) 34px; }
.quote.is-pin .quote__intro { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 0; }
.quote.is-pin .quote__title { margin: 16px 0; font-size: clamp(36px, 3.5vw, 60px); }
.quote.is-pin .quote__intro > p { margin-bottom: 12px; }
.quote.is-pin .model { flex: 1 1 auto; min-height: 220px; max-height: 520px; margin-top: 18px; aspect-ratio: auto; overflow: visible; }
@media (max-height: 880px) {
  .quote.is-pin .quote__intro > p:not([class]) { display: none; }
  .quote.is-pin .quote__form { gap: 18px clamp(16px, 2vw, 30px); padding: 26px clamp(24px, 2.6vw, 40px); }
}