:root{
    --paper:#f6f3ec; --paper-2:#efeae0; --ink:#23211d; --muted:#8d877b; --faint:#b3ac9f;
    --line:rgba(0,0,0,.12); --card:#ffffff; --bubble:#332f2a; --bubble-2:#4a443d; --bubbletext:#f4f1ea;
    --grid:#1f1d1a; --wall:#1f1d1a; --furn:#67615700; --furn2:#6c665c; --dim:#b6afa2; --magenta:#ff22c1;
    /* chat box widget — light theme tokens (terracotta accent is reusable elsewhere) */
    --terracotta:#e08e68; --terracotta-ink:#f5efe6;
    --chat-box-bg:rgba(255,255,255,.82); --chat-box-border:#f0f0f0; --chat-field-border:#dcdcdc; --chat-placeholder:#b4b4b4;
    --serif:"Inter",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;
    /* mobile design/test reference width (iPhone Plus class). Documented constant only — CSS vars
       can't be used in @media, so this does NOT drive the breakpoints; the live responsive
       breakpoint is 880px (Collaboration/Shop sections). Design/test down to ~320px. */
    --bp-mobile:440px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overscroll-behavior-y:none}   /* kill the rubber-band bounce at the footer (bottom of page) */
  body{background:#16130f;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}

  /* dark spacers stand in for the hero above and content below */
  .spacer{height:64vh;display:grid;place-items:center;text-align:center;color:#736b60;background:#16130f}
  .spacer .e{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}

  /* ---- drawer-reveal footer: .page scrolls up and uncovers the fixed footer beneath ---- */
  .page{position:relative;z-index:1;background:#16130f}    /* opaque bg so the footer never bleeds through gaps */
  .footer-reveal{height:800px;pointer-events:none}         /* real in-flow scroll runway (matches the footer height) — a margin here is NOT counted in scrollHeight, so the footer would only show via overscroll. The fixed footer shows through this transparent block. */
  #siteFooter{position:fixed;left:0;bottom:0;width:100%;height:800px;z-index:0;background:#000;overflow:hidden}   /* fixed 800px drawer — does not grow with the viewport */
  #siteFooter #footerScene{display:block;width:100%;height:100%}
  /* footer branding — 1100 container (like the nav), flush-left logo + email, copyright at the bottom */
  .footer-brand{position:absolute;left:0;right:0;top:0;height:100%;width:min(1100px,calc(100% - 40px));margin:0 auto;z-index:2;
    display:flex;flex-direction:column;justify-content:space-between;padding:122px 0 62px;box-sizing:border-box;pointer-events:none}
  .footer-brand .fb-logo{display:block;width:110px;height:auto;color:#fff;overflow:visible}
  /* wordmark write-on — drawn when the footer drawer reveals (.play added in script.js footer onScroll) */
  .fb-logo .pen{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 3;stroke-dashoffset:1.08}
  .fb-logo.play .pen1{animation:mira-draw .3565s cubic-bezier(.55,.06,.68,.85) .175s forwards}
  .fb-logo.play .pen2{animation:mira-draw .448s cubic-bezier(.37,.1,.63,.9) .5115s forwards}
  .fb-logo.play .pen3{animation:mira-draw .41s cubic-bezier(.37,.1,.63,.9) .9395s forwards}
  .fb-logo.play .pen4{animation:mira-draw .3305s cubic-bezier(.33,.1,.45,1) 1.3295s forwards}
  .fb-logo .idot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
  .fb-logo.play .idot{animation:mira-dot .14s cubic-bezier(.2,1.6,.4,1) 1.7s forwards}
  @keyframes mira-draw{to{stroke-dashoffset:0}}
  @keyframes mira-dot{to{opacity:1;transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){
    .fb-logo .pen{stroke-dashoffset:0}
    .fb-logo .idot{opacity:1;transform:none}
    .fb-logo.play .pen,.fb-logo.play .idot{animation:none}
  }
  .footer-brand .fb-email{display:inline-block;margin-top:25px;color:#fff;font-family:var(--sans);font-weight:500;font-size:18px;text-decoration:none;pointer-events:auto;transition:opacity .2s}
  .footer-brand .fb-email:hover{opacity:.7}
  .footer-brand .fb-copy{color:#fff;font-family:var(--sans);font-weight:500;font-size:18px}
  @media (max-width:440px){   /* shorter 600px drawer; stack logo + email + copyright at the top, above the (centered, lowered) 3D scene */
    #siteFooter, .footer-reveal{height:600px}   /* must match the JS reveal runway fh:600 */
    .footer-brand{justify-content:flex-start;padding:60px 0 0}
    .footer-brand .fb-copy{margin-top:22px}
  }

  /* ===== floating-furniture band (between hero and scrolly) ===== */
  .float-furni{position:relative;height:60vh;background:var(--paper);overflow:hidden;isolation:isolate;border-bottom:1px solid #E1DED9}
  .float-furni .ff-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .float-furni .ff-far{z-index:1;filter:blur(3px);opacity:.92}   /* distant layer — GPU-composited CSS blur is the depth cue (no DoF post-processing) */
  .float-furni .ff-near{z-index:2}                                /* near layer — sharp, on top */
  .float-furni .ff-copy{position:absolute;z-index:3;top:50%;left:50%;transform:translate(-50%,-50%);   /* centred copy — the pieces orbit the open space around it */
    width:min(680px,86vw);text-align:center;pointer-events:none;
    font-family:var(--sans);font-weight:500;font-size:clamp(18px,2.8vw,28px);line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
  .float-furni .ff-copy p{margin:0}
  @media (prefers-reduced-motion:reduce){ .float-furni .ff-far{filter:blur(2px)} }

  .scrolly{position:relative;height:500vh}                                                   /* scroll-driven phases; taller = bigger hold buffers so a fast flick can't skip the 3D scene (see SCRUB_A/B in script.js) */
  .pin{position:sticky;top:0;height:100dvh;overflow:hidden;background:var(--paper);
    --stepper-top:calc(6.5dvh + 206px); --fp-top:calc(6.5dvh + 321px); --frame-h:min(900px, calc(100dvh - 56px));
    --panel-w:clamp(260px,26vw,520px); --p1-shift:calc(var(--panel-w)/2)}   /* dvh → iOS uses the *visible* viewport; offsets compacted in the max-height query below. --frame-h caps the centred floorplan; --p1-shift recentres phase-1 content into the space right of the left panel */
  .stage{position:absolute;inset:0;display:grid;place-items:center;translate:var(--p1-shift) 0}   /* shift phase-1 content right of the left panel (3D scene counter-shifts below) */

  /* heading + body copy (changes per stage) */
  .copy{position:absolute;top:6.5vh;left:0;right:0;text-align:center;z-index:25;pointer-events:none;padding:0 24px}
  .copy .h{position:absolute;left:0;right:0;font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,40px);
    letter-spacing:-.02em;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
  .copy .h.on{opacity:1;transform:none}
  .copy .h.section-title{font-family:var(--sans);font-size:42px;line-height:1.1}   /* exact parity with the other section titles (beats .copy .h specificity) */
  .copy .b{max-width:30em;margin:54px auto 0;color:var(--muted);font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.4vw,18px);line-height:1.4;opacity:0;transition:opacity .5s}
  .copy .b.on{opacity:.95}
  .task3d{position:absolute;left:0;top:0;bottom:0;width:var(--panel-w);border-right:1px solid var(--line);
    background:var(--paper);
    display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:0 40px 0;   /* vertically centre the title + task block in the panel */
    z-index:26;opacity:0;pointer-events:none;transition:opacity .5s}
  .task3d.show{opacity:1}
  .t3title{font-family:var(--sans);font-weight:700;font-size:46px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0 0 18px;max-width:8em;text-align:right}   /* section title (sits just above its subtitle) */
  .t3sub{align-self:stretch;font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.4;color:var(--muted);text-align:right;margin:0 0 80px}   /* panel subtitle → 80px gap down to the task list (stretch so it wraps within the panel) */
  .t3list{display:flex;flex-direction:column;align-items:flex-end;gap:20px;width:100%}
  .t3item{appearance:none;background:none;border:0;cursor:pointer;font-family:inherit;font-size:clamp(15px,1.5vw,18px);
    color:var(--muted);text-align:right;padding:2px 0;line-height:1.2;transition:color .25s;pointer-events:none;position:relative}
  .task3d.show .t3item{pointer-events:auto}
  .t3item.active{color:var(--ink);font-weight:600}
  /* active link: a 2px black underline (4px offset) that wipes in left→right */
  .t3item::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:#000;
    transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.4,0,.2,1);pointer-events:none}
  .t3item.active::after{transform:scaleX(1)}
  .t3item.step{display:flex;flex-direction:column;align-items:flex-end;gap:5px}   /* phase-1 steps carry a subtitle under the title */
  .t3item.step .st-sub{font-size:16px;font-weight:400;color:#888;line-height:1.2;text-align:right}   /* stays gray even when the step is active */
  /* ≤440px: the 3D-scene task nav drops below the header as a left-aligned, horizontally
     scrollable row; the 3D scene is pushed down to start beneath it (#scene3d override below). */
  @media (max-width:440px){
    .task3d{top:6.5vh;bottom:auto;left:0;right:0;width:auto;overflow:hidden;border:0;
      flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0}
    .t3title{display:block;font-size:26px;font-weight:500;margin:0;max-width:none;text-align:center;line-height:1.1;padding:14px 16px 12px}   /* standalone heading, above (outside) the nav strip */
    .t3list{min-width:0;flex-direction:row;align-items:center;gap:20px;padding:12px 16px 18px;
      border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);   /* the horizontal nav menu is the bordered strip; the title sits outside it */
      overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .task3d.show{pointer-events:auto}   /* the container must be a touch target to be scrollable */
    .t3list::-webkit-scrollbar{display:none}
    .t3item{text-align:left;flex:none}
    .t3item.step{align-items:flex-start}              /* left-align step titles */
    .t3item.step .st-sub{display:none}                /* drop step subtitles on the compact mobile row */
    .t3sub{display:none}                              /* and the panel subtitle, to keep the strip compact */
  }
  .dots-nav{position:absolute;top:calc(6.5vh + 96px);left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:25}
  .dots-nav i{width:22px;height:3px;border-radius:2px;background:rgba(0,0,0,.12);transition:.4s}
  .dots-nav i.on{background:var(--ink);width:30px}
  /* independent step pills */
  /* ===== Scrolly phase navigator — fixed bottom-center segmented control (Figma: node 266:55) ===== */
  .phase-nav{position:fixed;left:50%;bottom:50px;transform:translate(-50%,14px);z-index:60;
    width:min(600px,calc(100vw - 28px));display:grid;grid-template-columns:repeat(3,1fr);
    padding:5px;background:#eee;border:1px solid #D1D1D1;border-radius:12px;
    opacity:0;pointer-events:none;transition:opacity .4s ease,transform .4s ease}
  .phase-nav.show{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
  .phase-thumb{position:absolute;top:5px;left:0;right:100%;height:calc(100% - 10px);          /* left/right edges set by JS; per-move transition staggers them for the rubber-band stretch */
    background:#fff;border-radius:8px;box-shadow:0 0 4px rgba(0,0,0,.25);z-index:0;pointer-events:none}
  .phase-item{position:relative;z-index:1;appearance:none;-webkit-appearance:none;border:none;background:none;
    cursor:pointer;font-family:var(--sans);font-weight:500;font-size:16px;color:#000;line-height:1;
    padding:13px 10px;white-space:nowrap;text-align:center;transition:opacity .2s}
  .phase-item:not(.active):hover{opacity:.6}
  .phase-item .short{display:none}
  @media (max-width:880px){
    .phase-nav{bottom:14px;width:min(360px,calc(100vw - 24px))}
    .phase-item{font-size:14px;padding:11px 8px}
    .phase-item .full{display:none}
    .phase-item .short{display:inline}
  }

  /* two-step progress stepper (replaces the pills) */
  .stepper{position:absolute;top:var(--stepper-top);left:0;right:0;max-width:1100px;margin:0 auto;z-index:40;opacity:0;transition:opacity .5s;pointer-events:none;
    display:flex;gap:40px;justify-content:safe center;align-items:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}   /* 40px between steps; scroll when they overflow */
  .stepper::-webkit-scrollbar{display:none}
  .stepper.show{opacity:1;pointer-events:auto}   /* container is a touch target so it can be scrolled horizontally */
  .stepper .step{flex:none;display:flex;gap:14px;align-items:stretch}   /* flex:none → keep width & scroll, never overlap */
  .stepper.show .step{pointer-events:auto;cursor:pointer}
  .stepper .stitle,.stepper .ssub{transition:opacity .2s}
  .stepper .step:hover .stitle,.stepper .step:hover .ssub{opacity:.6}
  .stepper .srail{width:4px;flex:none;border-radius:2px;background:#E2E2E2;position:relative;overflow:hidden;align-self:stretch}
  .stepper .sfill{position:absolute;left:0;top:0;width:100%;height:0%;background:#6E00FF;border-radius:2px}
  .stepper .stext{display:flex;flex-direction:column;justify-content:center;gap:5px}
  .stepper .stitle{font-family:var(--sans);font-weight:600;font-size:20px;color:#000;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
  .stepper .ssub{font-family:var(--sans);font-weight:400;font-size:16px;color:#888;line-height:1.15;white-space:nowrap}
  @media (max-width:880px){
    .stepper .stitle{font-size:18px}
    .stepper .ssub{font-size:16px}
  }

  /* static listing plan */
  .plan-card{position:absolute;z-index:16;top:var(--fp-top);width:min(480px,70vw);background:#fff;border-radius:12px;padding:14px;
    box-shadow:0 30px 70px -28px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.05);will-change:transform,opacity;transform-origin:center}
  .plan-card img{width:100%;height:auto;display:block;border-radius:4px}
  /* desk intro (phase-1 step 1): floorplan-on-a-desk render; fades out as the plan rises from it */
  #deskImg{position:absolute;top:calc(6.5vh + 350px);left:50%;transform:translateX(-50%);width:min(860px,92vw);height:auto;z-index:15;
    opacity:0;pointer-events:none;will-change:opacity;
    /* feather all four edges to 0% so the image dissolves into the page (centre stays 100%) */
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
    mask-composite:intersect}
  .bigimg{width:100%;border-radius:10px;overflow:hidden;margin-bottom:10px;border:1px solid var(--line);background:#fff}
  .bigimg img{width:100%;display:block}

  /* browser frame + canvas */
  .frame{position:absolute;z-index:6;top:auto;width:min(1320px,95vw);height:var(--frame-h);background:transparent;   /* vertically centred by the stage grid (place-items:center); capped height keeps the canvas light */
    overflow:hidden;opacity:0;transform:scale(.97);transition:opacity .3s,transform .3s}   /* snappier phase crossfade */
  .frame.lift{opacity:0 !important;pointer-events:none}   /* fade the 2D plan straight out (no translate/scale) so it stays aligned with the rising 3D plan */
  #scene3d{position:absolute;inset:0;z-index:8;opacity:0;pointer-events:none;transition:opacity .3s;touch-action:none;cursor:grab;translate:calc(-1 * var(--p1-shift)) 0}   /* cancel the stage shift → 3D scene stays full-width */
  #scene3d.show{opacity:1;pointer-events:auto}
  #scene3d.show:active{cursor:grabbing}
  #scene3d canvas{display:block;width:100%;height:100%}
  @media (max-width:440px){ #scene3d{top:calc(6.5vh + 68px);touch-action:pan-y;cursor:default} }   /* pan-y lets touch scroll instead of orbiting (paired with the JS guard) */
  .chat3d{position:absolute;right:calc(50% - min(1320px,95vw)/2 + 26px);left:auto;bottom:calc(50% - min(860px,90vh)/2 + 26px);
    width:min(360px,46vw);z-index:9;background:#fff;border:1px solid var(--line);
    border-radius:15px;padding:13px;box-shadow:0 20px 44px -18px rgba(0,0,0,.3);
    opacity:0;transform:translateY(12px);transition:opacity .55s,transform .55s;pointer-events:none}
  .chat3d.show{opacity:1;transform:none}
  /* ≤440px: lift the 3D mini-chat off the bottom. dvh tracks the *visible* viewport, so it
     clears Safari's bottom toolbar (vh-based positioning hides the composer behind it). */
  @media (max-width:440px){ .chat3d{bottom:calc(9dvh - 30px)} }
  .ok3{color:#3f7d4f;font-weight:600}
  .frame .body{position:absolute;inset:0;background:transparent;
    background-image:radial-gradient(rgba(0,0,0,.16) 1.3px,transparent 1.3px);background-size:24px 24px}
  #fp{position:absolute;inset:0;width:100%;height:100%}

  /* step-3 realtime collaboration cursors over the generated plan */
  .collab{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
  .ccur{position:absolute;opacity:0;transition:opacity .45s ease;will-change:transform}
  .collab.on .ccur{opacity:1}
  .ccur .cinner{position:relative;transform:scale(.78);transform-origin:top left;
    transition:transform .55s cubic-bezier(.2,.85,.25,1)}
  .collab.on .ccur .cinner{transform:scale(1)}
  .ccur svg{width:25px;height:25px;display:block;fill:var(--cc);
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.26))}
  .ccur .clabel{position:absolute;left:17px;top:16px;background:var(--cc);color:#fff;
    font-family:var(--sans);font-weight:600;font-size:13px;line-height:1;letter-spacing:.01em;
    padding:5px 9px;border-radius:8px;white-space:nowrap;box-shadow:0 3px 9px -2px rgba(0,0,0,.32)}
  .collab.on .ccur:nth-child(1),.collab.on .ccur:nth-child(1) .cinner{transition-delay:0s}
  .collab.on .ccur:nth-child(2),.collab.on .ccur:nth-child(2) .cinner{transition-delay:.07s}
  .collab.on .ccur:nth-child(3),.collab.on .ccur:nth-child(3) .cinner{transition-delay:.14s}
  .collab.on .ccur:nth-child(4),.collab.on .ccur:nth-child(4) .cinner{transition-delay:.21s}
  .collab.on .ccur:nth-child(5),.collab.on .ccur:nth-child(5) .cinner{transition-delay:.28s}
  .ccur{z-index:6}

  /* step-3 comments card */
  .cbox{position:absolute;left:50%;top:39%;width:300px;z-index:2;background:#fff;
    border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 50px -20px rgba(0,0,0,.34);
    padding:14px;opacity:0;transform:translateY(10px) scale(.97);transform-origin:top left;
    transition:opacity .45s ease,transform .45s cubic-bezier(.2,.85,.25,1)}
  .cbox.show{opacity:1;transform:none}
  .ccompose{transition:opacity .3s}
  .cbox.posted .ccompose{display:none}
  .cfield{min-height:62px;background:var(--paper-2);border-radius:10px;padding:12px 14px;
    font-size:15px;line-height:1.4;color:var(--ink)}
  .cpost{display:block;margin:12px 0 0 auto;background:#6E00FF;color:#fff;border:0;
    font-family:var(--sans);font-weight:700;font-size:15px;padding:10px 22px;border-radius:9px}
  .cthread{display:none}
  .cbox.posted .cthread{display:block}
  .citem{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
  .citem.show{opacity:1;transform:none}
  .citem + .citem{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .chead{display:flex;align-items:center;gap:10px}
  .cav{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
    color:#fff;font-weight:700;font-size:14px;flex:none}
  .cname{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--ink)}
  .cbody{margin:7px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}

  /* chat */
  .chat{position:absolute;z-index:14;background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;
    box-shadow:0 20px 44px -18px rgba(0,0,0,.3);opacity:0;
    transition:left .6s,right .6s,bottom .6s,top .6s,width .6s,transform .6s,opacity .5s}
  .stage[data-chat="center"] .chat{left:50%;top:var(--fp-top);transform:translate(-50%,0);opacity:1}
  .stage[data-chat="dock"] .chat{right:calc(50% - min(1320px,95vw)/2 + 26px + 2 * var(--p1-shift));left:auto;bottom:calc(50% - var(--frame-h)/2 + 26px);   /* dock bottom-right, clear of the centred phase nav — mirrors Phase 2 .chat3d. +2·p1-shift cancels the .stage right-shift so it lands at the same screen spot as Phase 2 (26px above the frame's bottom). */
    transform:none;opacity:1}
  .msgs{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
  .msg{font-size:14px;line-height:1.4;max-width:90%;padding:11px 16px;border-radius:13px;color:var(--bubbletext);
    opacity:0;transform:translateY(6px);transition:.32s}
  .msg.show{opacity:1;transform:none}
  .msg.user{align-self:flex-end;background:var(--bubble);border-bottom-right-radius:4px}
  .msg.ai{align-self:flex-start;background:var(--bubble-2);border-bottom-left-radius:4px}
  .msg.jpg{align-self:flex-end;background:var(--bubble);padding:5px;border-radius:11px}
  .msg.jpg .tile{width:62px;height:48px;border-radius:6px;overflow:hidden;background:#fff;display:block}
  .msg.jpg .tile img{width:100%;height:100%;object-fit:cover;display:block}
  .dots{display:inline-flex;gap:4px;padding:2px 0}.dots b{width:6px;height:6px;border-radius:50%;background:#cfc8bb;animation:bob 1.2s infinite}
  .dots b:nth-child(2){animation-delay:.18s}.dots b:nth-child(3){animation-delay:.36s}
  @keyframes bob{0%,60%,100%{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
  /* stage-2 big JPG tile inside chat */
  .bigjpg{width:100%;aspect-ratio:16/11;border-radius:10px;background:#8c8579;display:grid;place-items:center;
    color:#fff;font-weight:700;font-size:22px;letter-spacing:.04em;margin-bottom:10px}
  .composer{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 6px 11px 16px}
  .composer .txt{flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--ink);min-height:18px;white-space:normal;overflow-wrap:break-word}
  .composer .txt .ph2{color:var(--faint)}
  .caret{display:inline-block;width:2px;height:15px;background:var(--ink);margin-left:1px;vertical-align:-2px;animation:bl 1s steps(1) infinite}
  @keyframes bl{50%{opacity:0}}
  .composer .send{width:30px;height:30px;border-radius:8px;flex:none;border:none;background:#2b2825;display:grid;place-items:center;color:#fff}
  .composer .send svg{width:15px;height:15px}
  .attach{display:none}
  .attach.show{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:10px}
  .attach img{width:320px;max-width:100%;border-radius:10px;border:1px solid #E0DEDF;display:block;transition:width .45s cubic-bezier(.6,0,.2,1)}
  .attach .fn{font-size:12px;color:var(--muted);opacity:0;transition:opacity .3s}
  .attach.chip img{width:160px}
  .attach.chip .fn{opacity:1}
  .msg.imgmsg{padding:5px}
  .msg.imgmsg img{width:120px;border-radius:7px;display:block}
  .enterkey{position:absolute;right:50px;bottom:13px;background:#fff;border:1px solid var(--line);border-bottom-width:3px;
    border-radius:7px;padding:2px 8px;font-size:11.5px;color:var(--muted);opacity:0;transition:transform .12s ease,opacity .2s;z-index:5;pointer-events:none}
  .enterkey.show{opacity:1}
  .enterkey.press{transform:translateY(2px);border-bottom-width:1px}


  .copy.gone{opacity:0 !important;pointer-events:none}
  /* render prompt chat, centred near the bottom */
  .renderchat{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%) translateY(12px);width:min(440px,86vw);
    z-index:28;background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px;
    box-shadow:0 20px 44px -18px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .5s,transform .5s}
  .renderchat.show{opacity:1;transform:translateX(-50%)}
  /* photorealistic render result: chat centres, 3D scene dims to 15%, a scrollable row of photos rises in */
  #scene3d.show.dim{opacity:.15;   /* gradient fade: bottom 0% → top 15% (opacity .15 × the mask alpha) */
    -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 100%);
    mask-image:linear-gradient(to top,transparent 0%,#000 100%)}
  .renderchat.show.up{transform:translate(-50%,calc(50% - 41vh))}   /* slide up from bottom:9vh to vertical centre */
  .render-row{position:absolute;left:0;right:0;top:62%;z-index:30;   /* top is set precisely in JS: 40px below the centred chat */
    display:flex;align-items:flex-start;justify-content:flex-start;gap:20px;padding:0 5vw 44px;
    overflow-x:auto;overflow-y:hidden;pointer-events:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .render-row::-webkit-scrollbar{display:none}
  .render-row:not(:has(.render-photo.in)){pointer-events:none}   /* outside the render phase the (built but hidden) gallery must not eat clicks on the left panel — it spans full width at z-30 above it */
  .render-photo{width:360px;height:318px;flex:none;border-radius:20px;overflow:hidden;   /* fixed height → all uniform; img covers it */
    opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
  .render-photo.in{opacity:1;transform:translateY(0)}
  .render-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px}   /* cover + own radius → no dark corner leak */

  /* ===== hero section (scoped) ===== */
  #hero{--bg:#141110; --bg-2:#1b1714; --card:#1e1a17; --line:rgba(255,255,255,.09);
    --ink:#f5efe6; --muted:#a89e90; --faint:#736b60;
    --clay:#cd7a55; --clay-2:#e08e68; --sage:#9aa987;
    --shadow:0 24px 60px -20px rgba(0,0,0,.7);
    --serif:"Inter",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;}
  #hero{background:
      radial-gradient(120% 90% at 78% -10%, rgba(205,122,85,.16), transparent 55%),
      radial-gradient(90% 70% at 0% 100%, rgba(154,169,135,.10), transparent 50%),
      var(--bg);
    color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden;;min-height:max(100dvh,1000px);position:relative;display:flex;flex-direction:column}
  #hero .grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  #hero nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
    padding:22px clamp(20px,4vw,56px);width:100%;max-width:1100px;margin:0 auto;box-sizing:border-box}
  #hero .hbrand{display:flex;align-items:center}
  #hero .hbrand img{width:100px;height:auto;display:block}
  @media (max-width:440px){ #hero .hbrand img{width:80px} }
  #hero .nav-cta{display:flex;gap:12px;align-items:center}
  #hero .btn{font:inherit;font-size:14.5px;font-weight:600;border-radius:10px;padding:10px 18px;cursor:pointer;
    border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--ink);text-decoration:none;transition:.2s}
  #hero .btn:hover{background:rgba(255,255,255,.06)}
  #hero .btn.primary{background:#fff;border-color:#fff;color:#141110;box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
  #hero .btn.primary:hover{filter:brightness(.94)}
  
  #hero .hero{position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;padding:clamp(28px,7vh,90px) clamp(20px,4vw,56px) 0;
    flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(34px,5vh,64px)}
  
  @media(max-width:880px){#hero .hero{gap:32px}}
  #hero .hcopy{max-width:780px;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
  #hero h1{font-family:var(--sans);font-weight:600;font-size:58px;line-height:1.04;color:#fff;margin:0}
  #hero .sub{font-size:clamp(16px,1.55vw,20px);line-height:1.5;color:var(--muted);max-width:34em;margin:22px auto 0}
  #hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:30px}
  #hero .hero-cta .btn{font-size:16px;padding:13px 24px;border-radius:11px}
  #hero .hstage{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100vw;height:clamp(460px,76vh,880px);max-width:none;z-index:0}
  #hero .topbar{position:absolute;top:0;left:0;right:0;height:42px;display:flex;align-items:center;gap:8px;
    padding:0 15px;z-index:6;background:linear-gradient(180deg,rgba(20,16,14,.85),transparent)}
  #hero .topbar .tl{display:flex;gap:7px}
  #hero .topbar .tl i{width:11px;height:11px;border-radius:50%;display:block;background:#3a342e}
  #hero .topbar .file{font-size:12.5px;color:var(--faint);margin-left:6px}
  #hero .topbar .live{margin-left:auto;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sage);
    display:flex;align-items:center;gap:7px}
  #hero .topbar .live .ld{width:7px;height:7px;border-radius:50%;background:var(--sage);animation:heroPulse 1.8s infinite}
  
  @keyframes heroPulse{0%{box-shadow:0 0 0 0 rgba(154,169,135,.5)}70%{box-shadow:0 0 0 8px rgba(154,169,135,0)}100%{box-shadow:0 0 0 0 rgba(154,169,135,0)}}
  #hero #scene{position:absolute;inset:0;width:100%;height:100%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 44%)}
  #hero /* shoppable price tags */
  .tags{position:absolute;inset:0;z-index:5;pointer-events:none}
  #hero .tag{position:absolute;transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
  #hero .tag.show{opacity:1}
  #hero .tag .anchor{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:var(--clay-2);
    transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(224,142,104,.2)}
  #hero .tag .stem{position:absolute;left:50%;bottom:50%;width:1px;height:20px;background:rgba(255,255,255,.28);transform:translateX(-50%)}
  #hero .tag .pill{position:absolute;bottom:calc(50% + 20px);left:50%;transform:translateX(-50%);
    display:flex;align-items:center;gap:9px;white-space:nowrap;
    background:rgba(24,20,17,.92);backdrop-filter:blur(8px);border:1px solid var(--line);
    border-radius:11px;padding:6px 8px 6px 11px;box-shadow:0 12px 26px -12px rgba(0,0,0,.8)}
  #hero .tag .nm{font-size:12.5px;font-weight:500;color:var(--ink)}
  #hero .tag .pr{font-size:12.5px;font-weight:600;color:var(--clay-2)}
  #hero .tag .buy{width:21px;height:21px;border-radius:6px;flex:none;background:linear-gradient(140deg,var(--clay-2),var(--clay));
    display:grid;place-items:center;color:#fff;font-size:14px;line-height:1}
  /* hero chat overlay — box, bubbles, input and send all come from .mchat +
     .mchat--dark now; only its position and the typing caret stay hero-specific */
  #hero .hchat{position:absolute;left:calc(50% - 25vw + 16px);right:auto;bottom:66px;z-index:6;text-align:left;
    transition:transform .5s,opacity .5s}
  #hero .hcaret{display:inline-block;width:2px;height:17px;background:var(--clay-2);margin-left:1px;vertical-align:-3px;animation:heroBlink 1s steps(1) infinite}
  @keyframes heroBlink{50%{opacity:0}}

  /* ≤440px hero phone tweaks. The 3D scene (#scene canvas) and the chat are both children of
     .hstage, so lifting the canvas (not the stage) keeps the chat's anchor put → the two move
     independently: scene up 100px, chat down 30px (66→36). */
  @media (max-width:440px){
    #hero h1{font-size:36px}
    #hero .hero{padding-top:clamp(28px,3vh,90px)}   /* top padding 7vh → 3vh */
    #hero .hchat{bottom:36px}                         /* chat down 30px */
  }
  /* The hero scene lift (≤440px 100px / >440px 200px) is done in script.js via camera.setViewOffset
     (shifts the render up within the full-bleed canvas — no element transform, so no bottom gap). */

  /* ===== 2D -> 3D conversion section ===== */
  #catalogue{min-height:100vh;background:var(--paper);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:clamp(34px,5vh,52px);padding:90px 24px;position:relative;z-index:1}
  #catalogue .cat-head{text-align:center;max-width:720px}
  #catalogue .cat-head h2{color:var(--ink)}
  #catalogue .cat-head p{margin-top:16px;font-size:clamp(14px,1.4vw,18px);line-height:1.4;color:var(--muted)}
  .cat-cols{display:flex;align-items:flex-start;justify-content:center;gap:20px;width:1100px;max-width:100%;flex-wrap:wrap}
  .cat-left{width:720px;max-width:100%}
  .cat-right{width:360px;max-width:100%}
  .cat-label{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px 2px}
  .cat-rows{position:relative;overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 34px 80px -34px rgba(0,0,0,.35);
    height:500px;padding:0 0 24px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
  .cat-rows-header{position:absolute;top:0;left:0;padding:28px 33px 24px;z-index:10;pointer-events:none}
  .cat-rows-header h3{font-family:var(--sans);font-weight:500;font-size:28px;color:var(--ink);margin:0;line-height:1.2}
  .cat-rows-header p{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--muted);margin:6px 0 0;line-height:1.35}
  .cat-row{display:flex;width:max-content;will-change:transform}
  .cat-row.top{animation:catRight 110s linear infinite}
  .cat-row.bottom{animation:catLeft 110s linear infinite}
  .cat-tile{width:120px;height:120px;flex:none;margin-right:12px;border-radius:12px;object-fit:cover;display:block;position:relative;transform-origin:center center}
  @keyframes catRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  @keyframes catLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){.cat-row{animation:none}}
  #catalogue .cv-stage{position:relative;width:360px;max-width:100%;height:500px;
    border-radius:24px;overflow:hidden;background:#fff;
    box-shadow:0 34px 80px -34px rgba(0,0,0,.35);transition:background .6s;display:flex;flex-direction:column}
  .cv-header{padding:28px 33px 24px;flex:none;z-index:7;background:#fff}
  .cv-header h3{font-family:var(--sans);font-weight:500;font-size:28px;color:var(--ink);margin:0;line-height:1.2}
  .cv-header p{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--muted);margin:6px 0 0;line-height:1.35}
  .cv-content{position:relative;flex:1;min-height:0}
  .cat-stack{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}
  .mat-grid{position:relative;width:1100px;max-width:100%;height:500px;background:#fff;
    box-shadow:0 34px 80px -34px rgba(0,0,0,.35);border-radius:24px;overflow:hidden}
  .mat-tile{position:absolute;width:120px;height:120px;border-radius:10px;overflow:hidden;background:#1a1815;
    will-change:transform;transform-origin:center center}
  .mat-tile img{width:100%;height:100%;object-fit:cover;display:block}
  .mat-tile.hot{z-index:50}
  /* Materials grid title + subtitle, centred in the lower area (sits above the tiles) */
  .mat-head{position:absolute;left:0;right:0;bottom:58px;z-index:60;text-align:center;padding:0 33px;pointer-events:none}
  .mat-head h3{font-family:var(--sans);font-weight:500;font-size:28px;color:var(--ink);margin:0;line-height:1.2}
  .mat-head p{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--muted);
    margin:8px auto 0;max-width:840px;line-height:1.35}
  .cv-photo{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;border-radius:0;
    opacity:0;transition:opacity .45s ease;z-index:6;will-change:transform,opacity;transform-origin:50% 50%}
  .cv-photo.show{opacity:1}
  .cv-chat{position:absolute;inset:0;display:flex;opacity:0;transition:opacity .5s;z-index:3;pointer-events:none}
  .cv-chat.show{opacity:1}
  .cv-scene{position:absolute;inset:0;z-index:4;opacity:0;transition:opacity .6s;pointer-events:none}
  .cv-scene.show{opacity:1;pointer-events:auto;cursor:grab}
  .cv-scene.show:active{cursor:grabbing}
  .cv-scene canvas{display:block;width:100%;height:100%}
  .cv-panel{margin:auto;width:calc(100% - 68px);height:300px;background:var(--paper-2);
    border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden}
  .cv-msgs{display:flex;flex-direction:column;gap:8px}
  .cv-msgs:empty{display:none}
  .cv-msg{font-size:14px;line-height:1.4;max-width:82%;padding:11px 15px;border-radius:14px;
    opacity:0;transform:translateY(6px);transition:.3s}
  .cv-msg.show{opacity:1;transform:none}
  .cv-msg.user{align-self:flex-end;background:#2c2824;color:#fff;border-bottom-right-radius:5px}
  .cv-msg.ai{align-self:flex-start;background:#e6e2da;color:#3a3631;border-bottom-left-radius:5px}
  .cv-msg.imgmsg{align-self:flex-end;background:#2c2824;padding:5px;border-radius:13px}
  .cv-msg.imgmsg img{display:block;width:118px;height:118px;object-fit:cover;border-radius:9px}
  .cv-attach{align-self:flex-start;width:120px;height:120px;border-radius:14px;overflow:hidden;
    flex:none;opacity:0;transition:opacity .25s}
  .cv-attach.show{opacity:1}
  .cv-attach.gone{display:none}
  .cv-attach img{width:100%;height:100%;object-fit:cover;display:block}
  .cv-composer{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
    border-radius:13px;padding:11px 11px 11px 16px}
  .cv-composer .cv-txt{flex:1;min-width:0;font-size:14px;line-height:1.35;color:var(--ink);min-height:20px}
  .cv-composer .cv-ph{color:var(--faint)}
  .cv-composer .cv-send{width:34px;height:34px;border-radius:9px;flex:none;border:0;
    background:#2c2824;color:#fff;display:grid;place-items:center}
  .cv-composer .cv-send svg{width:17px;height:17px}
  .cv-caret{display:inline-block;width:2px;height:16px;background:var(--ink);margin-left:1px;vertical-align:-2px;animation:cvbl 1s steps(1) infinite}
  .cv-dots{display:inline-flex;gap:4px;padding:3px 0}
  .cv-dots b{width:6px;height:6px;border-radius:50%;background:#b3ac9f;animation:cvbob 1.2s infinite}
  .cv-dots b:nth-child(2){animation-delay:.18s}.cv-dots b:nth-child(3){animation-delay:.36s}
  @keyframes cvbl{50%{opacity:0}}
  @keyframes cvbob{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
  .cv-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
    font-size:13px;letter-spacing:.04em;color:var(--muted);opacity:0;transition:opacity .4s}
  .cv-loading.show{opacity:1}

  /* ============================================================
     Global light-theme chat box (.mchat)
     Unifies the floating chat widgets — import / 3D / render / convert —
     onto one look: 320px box, white input pill, terracotta send button,
     terracotta user bubble + white AI bubble. Mirrors Figma "Mira_chat_light".
     The hero chat is dark-themed and intentionally NOT given .mchat.
     Per-section positioning still lives in each chat's own rule above.
     ============================================================ */
  .mchat{width:320px;max-width:92vw;font-weight:500;background:var(--chat-box-bg);border:1px solid var(--chat-box-border);
    border-radius:16px;padding:17px;box-shadow:0 18px 40px rgba(0,0,0,.10);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* message bubbles — applies to both the .msg and .cv-msg families */
  .mchat .msg:not(.imgmsg),.mchat .cv-msg:not(.imgmsg){font-size:14px;line-height:1.35;max-width:88%;padding:10px 16px}
  .mchat .user{align-self:flex-end;background:var(--terracotta);color:var(--terracotta-ink);
    border-radius:9px;border-bottom-right-radius:4px}
  .mchat .ai{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--chat-field-border);
    border-radius:9px;border-bottom-left-radius:4px}
  /* image/attachment message bubbles keep the terracotta frame */
  .mchat .msg.imgmsg,.mchat .cv-msg.imgmsg{background:var(--terracotta)}
  /* input pill — height driven by symmetric vertical padding so it grows with
     multi-line input while keeping consistent padding at any line count */
  .mchat .composer,.mchat .cv-composer{background:#fff;border:1px solid var(--chat-field-border);
    border-radius:12px;min-height:52px;padding:10px 6px 10px 16px;gap:6px;align-items:center}
  .mchat .composer .ph2,.mchat .cv-composer .cv-ph{color:var(--chat-placeholder)}
  /* send button (terracotta) */
  .mchat .send,.mchat .cv-send{width:32px;height:32px;border-radius:9px;background:var(--terracotta);color:#fff}
  /* painting results — 2×2 thumbnail grid inside the 3D-scene chat */
  .mchat .msg.pgridmsg{padding:0;background:none;border:none;max-width:100%;align-self:stretch}
  .mchat .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .mchat .pgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;transition:transform .16s ease}
  /* typing dots */
  .mchat .dots b,.mchat .cv-dots b{background:#c9c2b5}

  /* --- dark theme modifier (hero chat) — Figma "Mira_chat_dark".
     Only surfaces/text flip; the terracotta accent (send button + user
     bubble) is inherited unchanged from the base .mchat above. --- */
  .mchat--dark{background:rgba(24,20,17,.82);border-color:transparent}
  .mchat--dark .composer,.mchat--dark .cv-composer{background:rgba(0,0,0,.28);border-color:transparent}
  .mchat--dark .composer .ph2,.mchat--dark .composer .ph,.mchat--dark .cv-composer .cv-ph{color:rgba(245,239,230,.5)}
  .mchat--dark .txt,.mchat--dark .cv-txt{color:var(--terracotta-ink)}
  .mchat--dark .ai{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--terracotta-ink)}
  .mchat--dark .dots b,.mchat--dark .cv-dots b{background:rgba(245,239,230,.5)}

  /* ≤440px: chat box keeps its normal 320px width; only the text shrinks to 14px throughout */
  @media (max-width:440px){
    .mchat{font-size:14px}
    .mchat .msg:not(.imgmsg),.mchat .cv-msg:not(.imgmsg){font-size:14px}
    .mchat .composer .txt,.mchat .cv-composer .cv-txt{font-size:14px}
    .mchat .attach .fn{font-size:14px}
  }

  /* ≤880px: centre every chat box horizontally, whatever its desktop anchor.
     Uses left:0/right:0/margin:auto (not transform) so each box's entrance transform survives.
     The render chat (translateX(-50%)) and convert panel (margin:auto) already centre themselves. */
  @media (max-width:880px){
    #hero .hchat{left:0;right:0;margin-left:auto;margin-right:auto}
    .chat3d{left:0;right:0;margin-left:auto;margin-right:auto}
    .stage[data-chat="dock"] .chat{left:0;right:0;margin-left:auto;margin-right:auto;transform:none}
  }

  /* ===== Collaboration section (a dark card on the light page) ===== */
  .collab-sec{background:var(--paper);display:flex;justify-content:center;padding:0 20px 90px}
  .collab-card{width:1100px;max-width:100%;box-sizing:border-box;background:#000;border-radius:20px;padding:80px 30px 30px}
  .collab-head{text-align:center;margin:0 0 60px}
  .section-title{font-family:var(--sans);font-weight:500;font-size:42px;line-height:1.1;letter-spacing:-.02em;margin:0}   /* reusable section heading */
  .collab-head h2{color:#fff}
  .collab-head p{font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.4vw,18px);line-height:1.4;color:rgba(255,255,255,.8);margin:14px auto 0;max-width:540px}
  /* the 4 subsection cards — bg subtly lighter than the black section, with a faint border */
  .collab-sub{background:#18181b;border:1px solid #27272a;border-radius:20px;padding:22px 20px;box-sizing:border-box}
  .collab-sub h3{font-family:var(--sans);font-weight:500;font-size:28px;color:#fff;margin:0 0 16px}
  .collab-mood{position:relative;overflow:hidden;height:360px;padding:0;margin:0 0 20px}   /* the card itself clips, so images sit flush to its edges */
  .collab-mood h3{position:absolute;top:28px;left:30px;margin:0;z-index:6}
  .collab-row{display:flex;gap:20px;align-items:stretch}
  .collab-row .collab-sub{flex:1;min-width:0;min-height:404px;display:flex;flex-direction:column}
  /* moodboard collage + floating cursors */
  .mood-stage{position:absolute;inset:0}                                       /* fills the card → images positioned to its edges */
  .mood-img{position:absolute;display:block}                                   /* raw image, no container framing */
  .mood-1{left:6%;top:92px;width:286px}
  .mood-2{left:calc(33% + 150px);top:-46px;width:300px}                         /* bleeds above → top flush with card top */
  .mood-3{left:60%;top:204px;width:280px}                                       /* bleeds below → bottom flush with card bottom */
  .mcur{position:absolute;will-change:transform;pointer-events:none;z-index:5}
  .mcur svg{width:26px;height:26px;display:block;fill:var(--cc);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
  .mcur .mlabel{position:absolute;left:18px;top:16px;background:var(--cc);color:#fff;font-family:var(--sans);font-weight:700;font-size:15px;
    padding:4px 13px;border-radius:8px;white-space:nowrap;box-shadow:0 1px 10px rgba(0,0,0,.25)}
  /* shared bits */
  .col-av{flex:none;width:35px;height:35px;border-radius:7px;background:var(--cc);color:#fff;font-family:var(--sans);font-weight:700;font-size:18px;display:grid;place-items:center}
  .col-av.sm{width:30px;height:30px;border-radius:6px;font-size:15px}
  .col-meta{min-width:0}
  .col-name{font-family:var(--sans);font-weight:600;font-size:16px;color:#fff;line-height:1.2}
  .col-sub{font-size:14px;color:#adadad;line-height:1.35;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmt-item .col-sub{white-space:normal;overflow:visible;text-overflow:clip}   /* comments wrap; emails stay one line */
  .col-field{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.16);border-radius:7px;padding:7px 8px 7px 14px}
  .col-field span{font-size:14px;color:#fff;opacity:.92}
  .col-send{flex:none;width:32px;height:32px;border-radius:6px;background:#e08e68;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:600}
  /* comments + sharing inner panels */
  .cmt-panel,.shr-panel{background:#182023;border:1px solid #363636;border-radius:8px;padding:8px 18px 18px;box-shadow:0 1px 20px rgba(0,0,0,.1);margin-top:auto}
  .cmt-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid #2b2f31}
  .cmt-panel .col-field{margin-top:14px}
  .shr-panel{padding:18px}
  .shr-panel .col-field{margin-bottom:6px}
  .shr-person{display:flex;align-items:center;gap:12px;padding:13px 0}
  .shr-person .col-meta{flex:1}
  .shr-person .col-sub{font-size:13px}   /* fit the full email next to the role badge */
  .shr-role{flex:none;background:#353535;color:#fff;font-size:12px;border-radius:4px;padding:6px 12px}
  /* version control */
  .ver-list{display:flex;flex-direction:column;gap:10px;margin-top:auto}
  .ver-row{display:flex;align-items:center;justify-content:space-between;border:1px solid #363636;border-radius:6px;padding:0 16px;height:53px;
    font-family:var(--sans);font-weight:500;font-size:14px;color:#fff}
  .ver-row .ver-time{opacity:.5}
  .ver-row.ver-hot{background:#ff8a00;border-color:#ff8a00}
  .ver-row.ver-hot .ver-time{opacity:.85}
  /* responsive: stack the 3 cards */
  @media (max-width:880px){
    .collab-row{flex-direction:column}
    .collab-row .collab-sub{min-height:0}
    .collab-head h2{font-size:32px}
    .collab-mood{height:auto;padding:26px 30px}
    .collab-mood h3{position:static;margin:0 0 16px}
    .mood-stage{position:static}
    .mood-img{position:relative;left:auto;top:auto;width:100%;margin:0 0 12px}
  }

  /* ===== Shop lookalike items (light, 2-column) ===== */
  .shop-sec{background:var(--paper);display:flex;justify-content:center;padding:30px 20px 100px}
  .shop-inner{width:1100px;max-width:100%;display:flex;align-items:center;gap:70px}
  .shop-left{flex:none}
  .shop-left .section-title{color:var(--ink);white-space:nowrap}   /* each phrase stays on one line */
  .shop-sub{margin-top:18px;font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.4vw,18px);line-height:1.4;color:#797979;max-width:340px}
  .shop-right{flex:1;position:relative;height:520px}
  .shop-viewer{position:absolute;left:-50px;top:50%;transform:translateY(-50%);width:400px;height:400px}
  .shop-viewer canvas{display:block;width:100%;height:100%}
  /* the chat thread: bottom-anchored so messages roll up as they arrive; overlaps the chair's right edge */
  .shop-thread{position:absolute;right:0;bottom:24px;width:300px;display:flex;flex-direction:column;z-index:3}
  .shop-msg{will-change:height,opacity,margin-top}
  .shop-bubble{display:inline-block;font-family:var(--sans);font-size:16px;line-height:1.3;padding:11px 15px;max-width:230px}
  .shop-user{align-self:flex-end;text-align:right}
  .shop-user .shop-bubble{background:#e08e68;color:#f5efe6;border-radius:9px 9px 4px 9px}
  .shop-ai{align-self:flex-start}
  .shop-ai .shop-bubble{background:rgba(255,255,255,.85);border:1px solid #dcdcdc;color:#000;border-radius:9px 9px 9px 4px}
  .shop-result{display:flex;gap:12px;align-items:flex-start}   /* no min-height: lets the row collapse to 0 so it grows in smoothly like the bubbles */
  .shop-thumb{width:72px;height:72px;flex:none;border:1px solid #dcdcdc;border-radius:6px;object-fit:cover;background:#fff;display:block}
  .shop-info{min-width:0;padding-top:1px}
  .shop-name{font-family:var(--sans);font-weight:600;font-size:16px;color:#000;line-height:1.25}
  .shop-store{font-family:var(--sans);font-size:14px;color:#6c6c6c;margin-top:6px}
  .shop-price{font-family:var(--sans);font-size:14px;color:#6c6c6c;margin-top:2px}
  .shop-cost{color:#07c838}
  @media (max-width:880px){
    .shop-inner{flex-direction:column;align-items:flex-start;gap:24px;min-width:0}
    .shop-left{width:100%}
    .shop-left .section-title{font-size:32px;white-space:normal}
    .shop-right{width:100%;min-width:0;height:auto;display:flex;flex-direction:row;align-items:flex-start;gap:10px}
    .shop-viewer{position:relative;left:auto;top:auto;transform:none;width:34%;max-width:150px;height:200px;flex:none}
    .shop-thread{position:relative;right:auto;bottom:auto;width:auto;flex:1;min-width:0}   /* side-by-side with the chair */
    .shop-msg{align-self:stretch;max-width:100%;min-width:0}   /* full thread width so nothing overflows; bubble aligns inside */
    .shop-bubble{max-width:90%}
    .shop-thumb{width:56px;height:56px}
    .shop-name{font-size:15px}
  }

  /* ===== Floorplan intro band (between the hero and the scrolly) ===== */
  .fp-intro{position:absolute;top:6.5dvh;left:0;right:0;z-index:30;text-align:center;padding:0 24px;background:var(--paper);
    opacity:0;transition:opacity .5s;pointer-events:none}   /* phase-1 section title — pinned at the top, the scroll "stick" point */
  .fp-intro.show{opacity:1}
  .fp-intro .section-title{color:var(--ink)}
  .fp-intro-sub{margin:18px auto 0;max-width:600px;font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.4vw,18px);line-height:1.4;color:var(--muted)}
  @media (max-width:880px){ .fp-intro .section-title{font-size:32px} }
  /* short windows: compact the phase-1 header so the ≥700px floorplan still fits (clips below ~950px) */
  @media (max-height:1080px){
    .pin{ --stepper-top:calc(6.5dvh + 90px); --fp-top:calc(6.5dvh + 165px) }
    .fp-intro .section-title{font-size:32px;line-height:1.05}
    .fp-intro-sub{display:none}
    #deskImg{top:calc(6.5vh + 250px)}   /* raise the desk on shorter laptops so the floorplan-on-desk animation isn't buried below the fold (base is +350px) */
  }
  /* phones: the panel becomes a top strip, so anchor the frame below it (not centred), and drop the right-shift */
  @media (max-width:440px){ .pin{--p1-shift:0px} .frame{top:var(--fp-top);height:calc(100dvh - var(--fp-top) - 28px)} .stage[data-chat="dock"] .chat{bottom:54px} }
  /* ≤440px: every section title to 28px (selectors mirror the more-specific overrides above so all win) */
  @media (max-width:440px){
    .section-title,
    .shop-left .section-title,
    .fp-intro .section-title,
    .collab-head .section-title,
    .copy .h.section-title{ font-size:28px }
    /* all h3 → 23px (selectors mirror the section-specific 28px rules so they win) */
    h3,
    .cat-rows-header h3,
    .cv-header h3,
    .mat-head h3,
    .collab-sub h3,
    .collab-mood h3{ font-size:23px }
  }