/* =========================================================
   2S DEVELOPMENT — "Start Your Project" experience
   App-shell + screen components for project.html / project-experience.js.
   Built entirely from the same tokens as css/main.css (ivory / stone /
   ink / sage / brass, Playfair + Manrope + DM Mono, square corners, no
   rounded pills) — this file only adds shapes main.css/studio.css don't
   already define. Deliberately minimal navigation per spec: no site
   header/footer render inside the app shell.
   ========================================================= */

.pe-root{ background:var(--ivory); color:var(--ink); }
.pe-root, .pe-root *{ box-sizing:border-box; }

/* ---------- app shell ---------- */
.pe-app{ position:relative; min-height:100svh; }

/* Reliability fix: a failed portal-mode save (see project.html's
   sendState()) used to have nowhere to appear at all. A small fixed
   banner, off the main flow, in the site's own existing error palette
   (matches .cp-alert.is-error in css/portal.css exactly, so this isn't
   a new visual language) — hidden by default, shown only on a real
   save failure, in guest mode never referenced at all. */
.pe-save-alert{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:600;
  display:flex; align-items:center; gap:14px; max-width:calc(100vw - 32px);
  font:13px/1.5 var(--mono, inherit); padding:12px 16px; border-radius:3px;
  border:1px solid #e3c9be; background:#fbf1ec; color:#9c5b3e;
  box-shadow:0 10px 30px rgba(10,10,8,.18);
}
.pe-save-alert[hidden]{ display:none; }
/* A signed-in draft being saved as the Client's project (js/project-claim.js): neutral, non-blocking. */
.pe-save-alert.is-progress{ border-color:var(--line); background:var(--ivory); color:var(--ink); }
.pe-save-alert #pe-draft-save-retry{
  flex:0 0 auto; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  background:none; border:1px solid #9c5b3e; color:#9c5b3e; padding:6px 12px; border-radius:2px; cursor:pointer;
}
.pe-save-alert #pe-save-alert-retry{
  flex:0 0 auto; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  background:none; border:1px solid #9c5b3e; color:#9c5b3e; padding:6px 12px;
  border-radius:2px; cursor:pointer;
}
.pe-save-alert #pe-save-alert-retry:hover{ background:#9c5b3e; color:var(--ivory); }

/* Phase 68 — "Analyze My Space" (OpenAI Vision) result/error block on
   the "analysis" screen (js/project-experience.js). Sits inline in the
   normal content flow (unlike .pe-save-alert above, which is a fixed
   global banner) — reuses the same typographic classes as the rest of
   this screen (.pe-eyebrow/.pe-headline/.pe-sub) for the success case,
   and .pe-as-error borrows .pe-save-alert's exact color palette for
   the failure case without duplicating its fixed-position layout. */
.pe-as-result{ margin-top:28px; max-width:640px; }
.pe-as-list{ list-style:none; margin:10px 0 22px; padding:0; }
.pe-as-list li{
  font:15px/1.6 var(--sans, inherit); padding:8px 0; border-bottom:1px solid var(--line);
}
.pe-as-list li:first-child{ border-top:1px solid var(--line); }
.pe-as-error{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font:13px/1.5 var(--mono, inherit); padding:14px 16px; border-radius:3px;
  border:1px solid #e3c9be; background:#fbf1ec; color:#9c5b3e; margin-top:16px;
}
.pe-as-error #pe-analysis-retry{
  flex:0 0 auto; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  background:none; border:1px solid #9c5b3e; color:#9c5b3e; padding:6px 12px;
  border-radius:2px; cursor:pointer;
}
.pe-as-error #pe-analysis-retry:hover{ background:#9c5b3e; color:var(--ivory); }

.pe-topbar{
  position:fixed; top:0; left:0; right:0; z-index:500; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,44px); gap:14px;
  background:rgba(244,241,233,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
/* Full brand name, always visible, per the brief — kept small/restrained
   (not enlarged) and protected from clipping the same way .pt-mark was
   fixed sitewide: nowrap + a mobile font-size drop rather than truncation. */
.pe-logo{ font:500 13px/1 var(--mono); letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap; flex:0 0 auto; }
.pe-logo-full{ display:inline-block; }
.pe-topbar-center{ display:flex; align-items:center; gap:10px; min-width:0; }
.pe-step-label{
  font:10px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--sage);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:40px;
}
/* The pill and dots keep their natural size; only the (now potentially
   longer, multi-level) breadcrumb text above shrinks/truncates first
   at narrow desktop/tablet widths — same "no horizontal overflow" rule
   applied without letting either of these collapse or hide instead. */
.pe-context-label, .pe-step-dots{ flex:0 0 auto; }
.pe-step-label b{ color:var(--ink); font-weight:500; }
/* Breadcrumb links (Start New Project / Type / [Branch]) — same quiet
   mono treatment as the plain label it replaces, ink on hover/focus so
   each level still reads as clickable without a heavier visual system. */
.pe-step-label a{ color:var(--sage); text-decoration:none; }
.pe-step-label a:hover, .pe-step-label a:focus-visible{ color:var(--ink); }
.pe-step-sep{ color:var(--line); }

/* Compact project-type/context indicator ("Renovation · Kitchen"),
   spec sections 8-9: deliberately quiet — a small pill, not a banner,
   sitting next to the step label rather than competing with it. Empty
   and hidden until a project type is chosen (see contextLabel() in
   js/project-experience.js), and on the "start"/"my-projects" screens
   where there's no single in-progress project to label. */
.pe-context-label{
  display:none; font:10px/1 var(--mono); letter-spacing:.04em; color:var(--ink);
  white-space:nowrap; padding:5px 10px; border:1px solid var(--line); border-radius:20px;
  opacity:0; transform:translateY(-2px);
  transition:opacity .3s var(--ease-3), transform .3s var(--ease-3);
}
.pe-context-label.is-visible{ display:inline-flex; opacity:1; transform:translateY(0); }

.pe-step-dots{ display:none; gap:6px; align-items:center; }
/* Now real <button>s (clickable step navigation) — reset to the exact
   same look the old plain <span> dots had; only interactive ones
   (not [disabled]) get a pointer cursor and a hover cue. */
.pe-step-dots button{
  width:5px; height:5px; border-radius:50%; background:var(--line);
  border:none; padding:0; margin:0; appearance:none; -webkit-appearance:none;
  cursor:default;
}
.pe-step-dots button:not(:disabled){ cursor:pointer; }
.pe-step-dots button:not(:disabled):hover{ background:var(--sage); }
.pe-step-dots button.is-done, .pe-step-dots button.is-active{ background:var(--ink); }
.pe-step-dots button.is-done:not(:disabled):hover, .pe-step-dots button.is-active:not(:disabled):hover{ background:var(--ink); }
@media (min-width:641px){ .pe-step-dots{ display:flex; } }

.pe-topbar-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

.pe-myprojects-btn{
  font:10px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  padding:9px 16px; border:1px solid var(--line); white-space:nowrap; background:none; color:var(--ink);
  transition:border-color .3s var(--ease-3), background .3s var(--ease-3), color .3s var(--ease-3);
}
.pe-myprojects-btn:hover{ border-color:var(--ink); }
.pe-myprojects-btn.is-active{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

.pe-save-exit{
  font:10px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em;
  padding:9px 16px; border:1px solid var(--ink); white-space:nowrap;
  transition:background .3s var(--ease-3), color .3s var(--ease-3);
}
.pe-save-exit:hover{ background:var(--ink); color:var(--ivory); }

/* Agent-mode context strip (project.html's #pe-agent-banner) — real,
   intentional dark element for the one case it exists for (an Agent
   viewing a Client's project), but the div previously carried its
   visual styling as an INLINE style alongside the `hidden` attribute.
   An inline style always wins over the browser's own `[hidden]{
   display:none}` rule regardless of source order, so the banner
   rendered as a permanent dark strip under the header on every New
   Home (and every other) screen, guest or authenticated, agent or
   not — never actually hidden. Moving the styling here and adding an
   explicit `[hidden]` override (same fix pattern as any other
   inline-style/`hidden`-attribute conflict) makes `hidden` the sole,
   correct visibility gate again; the bootstrap script's own
   `banner.hidden = false` (project.html) is untouched and now works
   as originally intended — visible only in real Agent-mode. */
.pe-agent-banner{
  margin-top:72px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 24px; background:#1f2430; color:#f2f0ea; font:13px/1.4 var(--sans, sans-serif);
  position:relative; z-index:10;
}
.pe-agent-banner[hidden]{ display:none; }

/* ==========================================================
   PROJECT WORKFLOW BACK NAVIGATION — reusable global component
   ----------------------------------------------------------
   #pe-back (project.html) is the ONE shared "ProjectBackNavigation"
   control used by every Project Workflow screen (Architecture, New
   Construction, New Home, Existing Home, Renovation, Furniture &
   Decor, and any future workflow) — there is no per-workflow
   duplicate. Its click handler (js/project-experience.js's
   backHandlerClick) always calls the existing back()/closeMyProjects()
   navigation, which resolves the real previous persistent step from
   the current flow — this file only controls its visual presentation.

   Desktop AND mobile: a minimal, editorial nav mark — never a button,
   pill, card, or bordered/backed panel — fixed to the VIEWPORT (not
   content, not the uploader, not any other page element), anchored in
   the SAME upper horizontal zone as the page's own top content (the
   eyebrow/heading start, immediately below the topbar) rather than
   vertically centered in the viewport — the previous centered
   placement read as visually distracting and unrelated to the page's
   own layout rhythm. Structure is vertical — arrow above the small
   "BACK" label, arrow as the primary visual element — never the
   arrow-and-label-on-one-line treatment used elsewhere in this app.

   #pe-back's own id selector below only ever matches this ONE floating
   instance; the separate inline-beside-Continue variant this same
   .pe-back class also serves (refreshBottomBackPlacement() in
   js/project-experience.js, shown only when the floating mark would
   overlap the visible forward CTA) keeps its own distinct single-line
   "&larr; Back" markup/layout via its inline style override and is
   untouched by this vertical-stack treatment. ---------- */
.pe-back{
  position:fixed; left:clamp(16px,3vw,32px); z-index:480;
  font:10px/1 var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage);
  display:inline-flex; align-items:center; gap:8px; opacity:0; pointer-events:none;
  transform:translateX(-6px); transition:opacity .35s var(--ease-3), transform .35s var(--ease-3), color .3s;
}
.pe-back.is-visible{ opacity:1; pointer-events:auto; transform:translateX(0); }
.pe-back:hover{ color:var(--ink); }
.pe-back .arrow{ display:inline-block; transition:transform .25s var(--ease-3); }
.pe-back:hover .arrow{ transform:translateX(-3px); } /* restrained nudge in the direction Back actually navigates */

/* The floating global mark: vertical arrow-over-label, living in the
   TRANSITION ZONE between the topbar and the content start — never
   centered on the viewport, never positioned relative to the heading/
   uploader/any content. `top` is derived directly from the same two
   measurements that already define that zone elsewhere in this file:
   the topbar's own height (72px, .pe-topbar) and .pe-stage's own
   content-start offset (its padding-top, calc(72px + 56px) = 128px),
   so the mark sits vertically CENTERED in that 56px gap. If either of
   those two numbers is ever changed, update this calc() to match —
   they are intentionally written out here (not abstracted into a
   shared variable) so the relationship stays visible at the point of
   use, the same convention .pe-stage's own padding-top already uses. */
#pe-back{
  top:calc(72px + (56px - 35px)/2); /* 35px = this mark's own rendered height (20px arrow + 6px gap + 9px label) */
  flex-direction:column; align-items:center; gap:6px;
}
#pe-back .pe-back-arrow{
  font:300 20px var(--serif); color:var(--ink); line-height:1;
  transition:transform .25s var(--ease-3);
}
#pe-back .pe-back-label{
  font:9px/1 var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--sage);
  transition:color .3s;
}
#pe-back:hover .pe-back-arrow{ transform:translateX(-3px); }
#pe-back:hover .pe-back-label{ color:var(--ink); }

@media (max-width:640px){
  .pe-topbar{ height:60px; padding:0 12px; gap:8px; }
  .pe-logo{ font-size:9.5px; }
  .pe-topbar-center{ display:none; } /* step label/dots make way for brand + nav on narrow phones */
  .pe-topbar-right{ gap:6px; }
  .pe-myprojects-btn{ padding:7px 10px; font-size:9px; letter-spacing:.06em; }
  .pe-save-exit{ padding:7px 11px; font-size:9px; }
  /* Same transition-zone-centering approach as desktop above, using
     this breakpoint's own numbers: topbar 60px, .pe-stage's mobile
     padding-top calc(60px + 40px) = 100px (see the max-width:640px
     .pe-stage rule further down this file), so the 40px gap centers
     this smaller 28px mark (16px arrow + 4px gap + 8px label) at
     top:66px = 60 + (40-28)/2. */
  #pe-back{ top:66px; left:16px; gap:4px; }
  #pe-back .pe-back-arrow{ font-size:16px; }
  #pe-back .pe-back-label{ font-size:8px; }
}
@media (max-width:360px){
  .pe-myprojects-btn{ padding:6px 8px; }
}

/* ---------- stage / screen frame ---------- */
.pe-stage{
  min-height:100svh; padding:calc(72px + 56px) clamp(20px,6vw,var(--gutter)) 90px;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0;
}
.pe-stage.is-narrow{ max-width:920px; margin:0 auto; }
.pe-stage.is-current{ opacity:1; }
.pe-stage-full{ padding-left:0; padding-right:0; }

.pe-eyebrow{ color:var(--sage); display:block; margin-bottom:18px; }
.pe-head{ max-width:820px; }
.pe-head .pe-sub{ margin-top:18px; font-size:15px; line-height:1.6; color:#4a4b45; max-width:520px; }
.pe-headline{ font:400 clamp(32px,4.6vw,66px)/1.05 var(--serif); letter-spacing:-.03em; }
.pe-headline-lg{ font:400 clamp(40px,6.2vw,88px)/.98 var(--serif); letter-spacing:-.04em; }

/* PERMANENT DESIGN RULE — page-heading / supporting-text spacing:
   Large display/serif page headings must always be laid out in normal
   document flow with sufficient line-height and vertical spacing to
   account for the actual rendered glyph bounds. Never position
   supporting text based on the apparent visual bottom of a large
   heading, and never use negative margins or fixed heading heights to
   compensate for serif glyph overflow. Every page heading must remain
   overlap-safe when the heading wraps at any responsive width.
   Apply the same principle to all future project workflow screens.

   Enforcement: .pe-headline/.pe-headline-lg use a deliberately tight
   line-height for editorial density, so any screen that places a
   .pe-sub paragraph directly after one of these headings — with or
   without the optional .pe-head wrapper above — gets this same
   guaranteed clearance below the heading's last line. This is a
   heading-level guarantee, not a per-screen margin a screen author
   has to remember to add. */
.pe-headline + .pe-sub,
.pe-headline-lg + .pe-sub{ margin-top:18px; }

.pe-actions{ margin-top:52px; display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.pe-btn{
  font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em;
  padding:16px 30px; border:1px solid var(--ink); color:var(--ink);
  display:inline-flex; align-items:center; gap:10px; transition:background .35s var(--ease-3), color .35s var(--ease-3), opacity .3s;
  background:none;
}
.pe-btn.is-primary{ background:var(--ink); color:var(--ivory); }
.pe-btn.is-primary:hover{ background:var(--sage-deep); border-color:var(--sage-deep); }
.pe-btn:not(.is-primary):hover{ background:var(--ink); color:var(--ivory); }
.pe-btn.is-ghost{ border-color:transparent; padding-left:0; padding-right:0; color:var(--sage); }
.pe-btn.is-ghost:hover{ background:none; color:var(--ink); }
.pe-btn[disabled]{ opacity:.3; pointer-events:none; }

/* ---------- large visual selection cards (screen 01, style, concepts…) ---------- */
.pe-card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:52px; }
.pe-card-grid.is-2col{ grid-template-columns:repeat(2,1fr); }
.pe-card{
  position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer;
  display:flex; align-items:flex-end; background:var(--clay); border:1px solid transparent;
}
/* font-size:0 is defensive against a broken-image fallback: Chromium
   renders a failed <img>'s alt text at the element's own font-size,
   which — combined with position:absolute+object-fit — can bleed
   outside a short (e.g. 16:9) card in this sandbox, where Unsplash is
   network-blocked. Collapses to a harmless small broken-image icon
   instead; irrelevant once real images load in production. */
.pe-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.12); transition:transform 1s var(--ease-4); font-size:0; }
.pe-card:hover img{ transform:scale(1); }
.pe-card .pc-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,0) 42%, rgba(8,8,6,.74) 100%); }
.pe-card .pc-body{ position:relative; z-index:1; padding:22px; color:var(--ivory); width:100%; }
.pe-card .pc-name{ font:400 22px var(--serif); letter-spacing:-.02em; }
.pe-card .pc-desc{ margin-top:6px; font:11px/1.5 var(--sans); color:rgba(244,241,233,.78); max-width:36ch; }
.pe-card .pc-index{ font:10px var(--mono); letter-spacing:.08em; color:var(--brass); display:block; margin-bottom:8px; }
.pe-card.is-selected{ border-color:var(--ink); outline:2px solid var(--ink); outline-offset:-2px; }
.pe-card.is-selected .pc-name::after{ content:' ✓'; }

@media (max-width:900px){ .pe-card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pe-card-grid, .pe-card-grid.is-2col{ grid-template-columns:1fr; } }

/* ---------- Start New Project — two visual groups (Build & Create /
   Transform & Furnish) over the same .pe-card-grid used above; group
   heading reuses .pe-headline/.pe-sub as-is, no new typography. ---------- */
.pe-type-group{ margin-top:56px; }
.pe-type-group:first-child{ margin-top:36px; }
.pe-type-group .pe-card-grid{ margin-top:24px; }

/* This screen's cards carry longer descriptions than .pc-name/.pc-desc's
   other (title-only, or short-label) consumers elsewhere in the app, so
   .pc-body-stacked is a scoped, additive modifier — it does not touch
   the base .pc-name/.pc-desc rules those other screens rely on. Without
   it .pc-name/.pc-desc are both inline spans, so a title runs straight
   into its description ("ArchitectureShape your architectural...");
   this makes each its own line with deliberate spacing between them. */
.pc-body-stacked .pc-name{ display:block; }
.pc-body-stacked .pc-desc{ display:block; margin-top:8px; }

/* Transformation-level cards (Refresh/Remodel/Complete) carry a
   two-line description under the name, so they need more scrim
   coverage than the single-line style/project-type cards. */
.pe-transform-card{ aspect-ratio:16/9; }
.pe-transform-card .pc-scrim{ background:linear-gradient(180deg, rgba(10,10,8,.05) 24%, rgba(8,8,6,.86) 100%); }
.pe-transform-card .pc-body{ padding:26px; }
.pe-transform-card .pc-desc{ max-width:38ch; margin-top:8px; }

/* ---------- chip multi-select (rooms, keep-items, furniture) ---------- */
.pe-chip-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-top:48px; max-width:820px; }
.pe-chip{
  font:12px var(--sans); padding:14px 20px; border:1px solid var(--line); cursor:pointer;
  transition:border-color .25s var(--ease-3), background .25s var(--ease-3), color .25s var(--ease-3);
}
.pe-chip:hover{ border-color:var(--ink); }
.pe-chip.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

/* ---------- free text field ---------- */
.pe-textfield{ margin-top:44px; max-width:640px; }
.pe-textfield label{ display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:12px; }
.pe-textfield textarea, .pe-textfield input[type="text"]{
  width:100%; border-bottom:1px solid var(--line); padding:10px 0 14px; font:18px var(--serif);
  resize:none; transition:border-color .3s;
}
.pe-textfield textarea:focus, .pe-textfield input[type="text"]:focus{ border-color:var(--ink); }
.pe-textfield textarea::placeholder, .pe-textfield input::placeholder{ color:#9a9689; font-family:var(--serif); font-style:italic; }

/* ---------- upload intake ---------- */
.pe-upload{ margin-top:52px; max-width:820px; }
.pe-upload-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.pe-upload-option{
  border:1px dashed var(--line); padding:30px 16px; text-align:center; cursor:pointer;
  transition:border-color .3s, background .3s;
}
.pe-upload-option:hover{ border-color:var(--ink); border-style:solid; }
.pe-upload-option input[type="file"]{ display:none; }
.pe-upload-option .uo-icon{ font:20px var(--mono); color:var(--sage); }
.pe-upload-option .uo-label{ display:block; margin-top:12px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.pe-upload-dropzone{
  margin-top:14px; border:1px dashed var(--line); padding:44px 20px; text-align:center;
  font:12px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
}
.pe-upload-thumbs{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.pe-upload-thumb{ width:104px; height:104px; position:relative; overflow:hidden; background:var(--clay); border:1px solid var(--line); }
.pe-upload-thumb img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-upload-thumb .ut-remove{
  position:absolute; top:4px; right:4px; width:20px; height:20px; background:rgba(27,28,25,.75);
  color:var(--ivory); font:12px var(--mono); display:flex; align-items:center; justify-content:center;
}
@media (max-width:640px){ .pe-upload-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- investment tiers ---------- */
.pe-tier-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:52px; max-width:760px; }
.pe-tier{
  padding:26px 24px; border:1px solid var(--line); cursor:pointer; text-align:left;
  transition:border-color .25s, background .25s, color .25s;
}
.pe-tier:hover{ border-color:var(--ink); }
.pe-tier.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pe-tier .pt-amount{ font:400 26px var(--serif); letter-spacing:-.02em; display:block; }
.pe-tier .pt-note{ margin-top:6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-tier.is-selected .pt-note{ color:var(--brass); }
@media (max-width:640px){ .pe-tier-grid{ grid-template-columns:1fr; } }

/* ---------- cinematic AI sequence (analysis + generation) ---------- */
.pe-cinema{ margin-top:44px; position:relative; max-width:920px; aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.pe-cinema img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.62; font-size:0; }
.pe-scan-grid{
  position:absolute; inset:0; opacity:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(244,241,233,.18) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(244,241,233,.18) 0 1px, transparent 1px 64px);
}
.pe-cinema.is-scanning .pe-scan-grid{ opacity:1; transition:opacity .6s var(--ease-3); }
.pe-scan-line{
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
  box-shadow:0 0 18px 2px rgba(176,154,109,.7);
  animation:pe-scan-sweep 2.8s linear infinite;
}
@keyframes pe-scan-sweep{ 0%{ top:0; } 100%{ top:100%; } }
.pe-cinema-caption{
  position:absolute; left:0; right:0; bottom:0; padding:28px 32px;
  background:linear-gradient(0deg, rgba(8,8,6,.82), transparent);
}
.pe-cinema-text{
  font:400 clamp(18px,2.6vw,28px)/1.3 var(--serif); color:var(--ivory); letter-spacing:-.01em;
  opacity:0; transition:opacity .5s var(--ease-3);
}
.pe-cinema-text.is-active{ opacity:1; }
.pe-cinema-progress{ margin-top:16px; height:1px; background:rgba(244,241,233,.25); position:relative; max-width:320px; }
.pe-cinema-progress i{ position:absolute; left:0; top:0; height:1px; background:var(--brass); transition:width .4s linear; }

/* ---------- persistent right-side "My Project" panel (spec 6-7) ---------- */
.pe-with-panel{ display:flex; align-items:flex-start; gap:clamp(24px,4vw,52px); }
.pe-panel-main{ flex:1 1 auto; min-width:0; }
.pe-side-panel{
  flex:0 0 320px; width:320px; position:sticky; top:104px; align-self:flex-start;
  border:1px solid var(--line); background:var(--ivory); display:flex; flex-direction:column;
  max-height:calc(100svh - 104px - 40px);
}
.pe-side-panel-head{
  display:flex; align-items:baseline; justify-content:space-between; padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.psp-title{ font:400 19px var(--serif); letter-spacing:-.01em; }
.psp-count{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-side-panel-list{ overflow-y:auto; flex:1 1 auto; }
.pe-side-empty{ padding:22px 20px; font:13px/1.6 var(--sans); color:var(--sage); }
.pe-side-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); }
.psi-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.psi-name{ font:400 15px var(--serif); letter-spacing:-.01em; }
.psi-vendor{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
.psi-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.psi-price{ font:11px var(--mono); color:#4a4b45; white-space:nowrap; }
.psi-remove{
  width:20px; height:20px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  font:13px var(--mono); color:var(--sage); border:1px solid var(--line); background:none;
  transition:border-color .25s, color .25s;
}
.psi-remove:hover{ border-color:var(--ink); color:var(--ink); }
.pe-side-panel-foot{ border-top:1px solid var(--ink); padding:16px 20px 18px; }
.psf-row{ display:flex; justify-content:space-between; align-items:baseline; font:12px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); padding:4px 0; }
.psf-row b{ font:400 15px var(--serif); text-transform:none; letter-spacing:-.01em; color:var(--ink); }
.psf-row.is-total{ margin-top:2px; }
.psf-row.is-total b{ font-size:22px; }

@media (max-width:1080px){
  .pe-with-panel{ flex-direction:column; }
  .pe-side-panel{ position:static; width:100%; flex-basis:auto; max-height:none; margin-top:20px; }
}

.pe-hotspot.is-added{ background:var(--sage-deep); }
.pe-hotspot.is-added::after{ content:''; width:7px; height:7px; }

/* ---------- image hotspots + popups (space map, interactive design) ---------- */
.pe-hotspot-stage{ position:relative; margin-top:44px; max-width:920px; aspect-ratio:16/10; overflow:hidden; background:var(--clay); }
.pe-hotspot-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-hotspot{
  position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  border:1px solid var(--ivory); background:rgba(27,28,25,.6); cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:3;
  animation:pe-hotspot-pulse 2.6s ease-in-out infinite;
}
.pe-hotspot::after{ content:''; width:6px; height:6px; border-radius:50%; background:var(--ivory); }
.pe-hotspot:hover, .pe-hotspot.is-active{ background:var(--brass); }
@keyframes pe-hotspot-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(244,241,233,.35); }
  50%{ box-shadow:0 0 0 8px rgba(244,241,233,0); }
}
/* Phase 72 — the pin currently being repositioned via MOVE: a steady
   dashed ring instead of the ambient pulse, so it reads as "waiting
   for your click," distinct from the solid-brass .is-active look. */
.pe-hotspot.is-moving{
  background:var(--sage-deep); animation:none; outline:2px dashed var(--ivory); outline-offset:3px;
}
.pe-hotspot-tag{
  position:absolute; padding:6px 10px; background:rgba(27,28,25,.78); color:var(--ivory);
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap;
  transform:translate(-50%,-140%); pointer-events:none; z-index:4;
}

.pe-popup{
  position:absolute; z-index:6; width:min(280px, 78vw); background:var(--ivory);
  border:1px solid var(--ink); padding:22px; transform:translate(-50%,14px);
  box-shadow:0 18px 40px rgba(10,10,8,.18);
}
.pe-popup .pp-eyebrow{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
.pe-popup .pp-name{ margin-top:8px; font:400 20px var(--serif); letter-spacing:-.02em; }
.pe-popup .pp-meta{ margin-top:6px; font:11px var(--sans); color:#4a4b45; line-height:1.5; }
.pe-popup .pp-price{ margin-top:12px; font:13px var(--mono); color:var(--sage); }
.pe-popup-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; }
.pe-popup-actions button{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:10px 14px;
  border:1px solid var(--ink);
}
.pe-popup-actions button.is-primary{ background:var(--ink); color:var(--ivory); }
.pe-popup-actions button:not(.is-primary):hover{ background:var(--ink); color:var(--ivory); }
.pe-popup-close{
  position:absolute; top:10px; right:10px; width:22px; height:22px; font:12px var(--mono);
  display:flex; align-items:center; justify-content:center; color:var(--sage);
}
.pe-popup-close:hover{ color:var(--ink); }

/* Phase 69 — Space Map rendered from a REAL OpenAI Vision result
   (state.spaceAnalysis.elements). Guest mode's existing
   .pe-hotspot-stage/.pe-popup pin UI above is untouched and still
   used for the demo path.

   Phase 71 — the real-analysis map is now also pin-driven: AI
   elements carry normalized locations and manual annotations add
   more, so .pe-map-photo reuses the SAME .pe-hotspot/.pe-hotspot-tag/
   .pe-popup classes as guest mode above rather than inventing a new
   pin visual language. .pe-map-photo's aspect-ratio is overridden
   per-photo inline by JS (syncStageAspect(), matching the actual
   image's natural dimensions so normalized coordinates never land on
   a cropped-away edge) — the 16/10 below is only the pre-image-load
   fallback. */
.pe-map-photo{ position:relative; margin-top:44px; max-width:920px; aspect-ratio:16/10; overflow:hidden; background:var(--clay); }
.pe-map-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-map-photo.is-annotating{ cursor:crosshair; }
.pe-map-photo.is-annotating img{ opacity:.94; }
/* Phase 72 — MOVE mode: an explicit, single-element repositioning
   action (never a permanently-draggable pin), so the stage-level cue
   is the same "click anywhere on the photo" crosshair Add Element
   already uses — the two modes are mutually exclusive, never active
   together. */
.pe-map-photo.is-moving{ cursor:crosshair; }
.pe-map-photo.is-moving img{ opacity:.94; }

.pe-map-toolbar{ margin-top:22px; display:flex; gap:12px; }
.pe-map-annotate-hint, .pe-map-move-hint{
  margin-top:14px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage);
}

.pe-map-list{ margin-top:28px; max-width:640px; }
.pe-map-row{ border-bottom:1px solid var(--line); }
.pe-map-row:first-child{ border-top:1px solid var(--line); }
.pe-map-row.is-selected .pe-map-row-main{ color:var(--sage-deep); }
.pe-map-row-main{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 2px; background:none; border:0; cursor:pointer; text-align:left;
  font:15px/1.4 var(--sans, inherit); color:var(--ink);
}
.pe-map-row-label{ font-weight:500; }
.pe-map-row-tag{
  margin-left:10px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage);
  border:1px solid var(--line); border-radius:20px; padding:3px 8px; vertical-align:1px;
}
.pe-map-row-decision{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-map-row-hint{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:#9a988e; }
.pe-map-row-panel{ padding:0 2px 16px; }
.pe-map-row-editrow{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pe-map-row-editlabel{
  flex:1 1 180px; min-width:0; border:0; border-bottom:1px solid var(--line); padding:8px 0;
  font:13px var(--sans, inherit); background:none; color:var(--ink);
}
.pe-map-row-editlabel:focus{ border-color:var(--ink); }
.pe-map-row-editrow button{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:9px 12px;
  border:1px solid var(--ink); background:none; color:var(--ink); white-space:nowrap;
}
.pe-map-row-editrow button:hover{ background:var(--ink); color:var(--ivory); }
.pe-map-row-editrow button.is-primary{ background:var(--ink); color:var(--ivory); }

/* Manual/AI element editor — a compact form reusing .pe-popup's card
   chrome (see above) rather than a new dialog pattern. */
.pe-map-editor-field{ display:block; margin-top:14px; }
.pe-map-editor-field span{
  display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:8px;
}
.pe-map-editor-field input{
  width:100%; border:0; border-bottom:1px solid var(--line); padding:6px 0 10px;
  font:14px var(--sans, inherit); background:none; color:var(--ink);
}
.pe-map-editor-field input:focus{ border-color:var(--ink); }
.pe-map-editor-decision{ margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 16px; }
.pe-map-editor-decision label{
  display:flex; align-items:center; gap:6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink);
}

/* ---------- design concepts (3 directions) ---------- */
.pe-concept-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.pe-concept-card{
  cursor:pointer; border:1px solid transparent;
  transition:border-color .3s var(--ease-3), outline-color .3s var(--ease-3), opacity .3s var(--ease-3), transform .3s var(--ease-3);
}
.pe-concept-card:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.pe-concept-figure{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--clay); }
.pe-concept-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.1); transition:transform .9s var(--ease-4); font-size:0; }
.pe-concept-card:hover .pe-concept-figure img{ transform:scale(1); }
.pe-concept-index{ font:10px var(--mono); letter-spacing:.08em; color:var(--brass); }
.pe-concept-name{ margin-top:14px; font:400 26px var(--serif); letter-spacing:-.02em; }
.pe-concept-desc{ margin-top:10px; font-size:13px; line-height:1.6; color:#4a4b45; }
.pe-concept-estimate{ margin-top:14px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-concept-cta{ margin-top:16px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--ink); display:inline-block; padding-bottom:4px; }
/* selected state: same visual language as .pe-card.is-selected elsewhere
   in this app (border + inset outline + a checkmark), plus a small badge
   on the image itself and a brief pop animation so the choice reads as
   unmistakable even at a glance. */
@keyframes pe-concept-pop{ 0%{ transform:scale(.98); } 55%{ transform:scale(1.012); } 100%{ transform:scale(1); } }
.pe-concept-card.is-selected{
  border-color:var(--ink); outline:2px solid var(--ink); outline-offset:-2px;
  animation:pe-concept-pop .4s var(--ease-3);
}
.pe-concept-card.is-selected .pe-concept-name::after{ content:' ✓'; color:var(--sage-deep); }
.pe-concept-check{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font:14px var(--sans);
  background:var(--ivory); color:var(--ink); opacity:0; transform:scale(.6);
  transition:opacity .3s var(--ease-3), transform .3s var(--ease-3); z-index:2;
}
.pe-concept-card.is-selected .pe-concept-check{ opacity:1; transform:scale(1); background:var(--ink); color:var(--ivory); }
.pe-concept-grid.has-selection .pe-concept-card:not(.is-selected){ opacity:.55; }
.pe-concept-grid.has-selection .pe-concept-card:not(.is-selected):hover{ opacity:.85; }
@media (max-width:900px){ .pe-concept-grid{ grid-template-columns:1fr; max-width:520px; } }

/* ---------- interactive Before/After slider (reused: design-detail, Project Summary) ---------- */
.pe-baslider{ position:relative; width:100%; height:100%; overflow:hidden; touch-action:none; user-select:none; cursor:ew-resize; }
.pe-baslider.is-animating .pe-ba-before, .pe-baslider.is-animating .pe-ba-divider{ transition:clip-path .65s var(--ease-3), left .65s var(--ease-3); }
.pe-ba-media{ position:absolute; inset:0; }
.pe-ba-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; font-size:0; }
.pe-ba-before{ z-index:2; }
.pe-ba-divider{
  position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ivory); z-index:4;
  box-shadow:0 0 0 1px rgba(8,8,6,.25);
}
.pe-ba-handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px;
  border-radius:50%; background:var(--ivory); display:flex; align-items:center; justify-content:center; gap:4px;
  font:11px var(--mono); color:var(--ink); box-shadow:0 6px 22px rgba(8,8,6,.35); cursor:ew-resize;
}
.pe-ba-tag{
  position:absolute; top:22px; z-index:3; padding:8px 14px; background:rgba(27,28,25,.62); color:var(--ivory);
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; pointer-events:none;
}
.pe-ba-tag-before{ left:22px; }
.pe-ba-tag-after{ right:22px; }

/* Fullscreen-expand affordance — small, thin-stroke, understated;
   never the primary interaction (the slider itself remains that).
   Bottom-right corner keeps it clear of both top tags and the center
   drag handle at any slider size. */
.pe-ba-expand{
  position:absolute; right:16px; bottom:16px; z-index:5; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
  background:rgba(27,28,25,.5); color:var(--ivory); transition:background .25s var(--ease-3), color .25s var(--ease-3);
}
.pe-ba-expand:hover{ background:rgba(27,28,25,.78); }

/* ---------- Before/After fullscreen viewer (reusable overlay) ----------
   A quiet, image-focused system transition — never a generic third-
   party lightbox: solid ink ground (no page bleed-through needed for a
   photography viewer), the exact same .pe-baslider markup/behavior as
   everywhere else, sized as large as the viewport comfortably allows. */
.pe-ba-fullscreen{
  position:fixed; inset:0; z-index:8500; overflow:hidden;
  background:var(--ink); display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,6vw,64px); padding-top:calc(clamp(20px,6vw,64px) + env(safe-area-inset-top));
  padding-bottom:calc(clamp(20px,6vw,64px) + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease-3), visibility 0s linear .3s;
}
.pe-ba-fullscreen.is-visible{ opacity:1; visibility:visible; transition:opacity .3s var(--ease-3), visibility 0s linear 0s; }
.pe-ba-fullscreen-frame{
  position:relative; width:min(94vw,1600px); max-height:100%; aspect-ratio:16/9; overflow:hidden;
}
.pe-ba-fullscreen-frame .pe-baslider{ position:absolute; inset:0; }
/* one image (an existing photo or a concept image): shown whole, never cropped or stretched */
.pe-ba-fullscreen-frame.is-single{ width:auto; max-width:100%; aspect-ratio:auto; overflow:visible; display:flex; align-items:center; justify-content:center; }
.pe-ba-fullscreen-img{ display:block; width:auto; height:auto; max-width:min(94vw,1600px); max-height:calc(100svh - 2 * clamp(20px,6vw,64px)); object-fit:contain; }
.pe-ba-fullscreen-close{
  position:absolute; top:clamp(16px,3vw,28px); right:clamp(16px,3vw,28px); z-index:2; width:40px; height:40px;
  border-radius:50%; border:1px solid rgba(244,241,233,.35); background:none; color:var(--ivory);
  font:300 22px/1 var(--sans); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .25s var(--ease-3), background .25s var(--ease-3);
}
.pe-ba-fullscreen-close:hover{ border-color:var(--ivory); background:rgba(244,241,233,.08); }
@media (max-width:640px){
  .pe-ba-fullscreen{ padding:16px; padding-top:calc(16px + env(safe-area-inset-top)); padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .pe-ba-fullscreen-frame{ width:100%; }
  .pe-ba-fullscreen-frame.is-single{ width:100%; }
  .pe-ba-fullscreen-img{ max-width:100%; max-height:calc(100svh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* Standalone, non-fullbleed context (Project Summary top) */
.pe-ba-frame{ position:relative; margin-top:40px; max-width:920px; aspect-ratio:16/9; overflow:hidden; background:var(--clay); }
.pe-ba-frame .pe-baslider{ position:absolute; inset:0; }

/* ---------- immersive design detail viewer ---------- */
.pe-viewer{ position:relative; width:100%; height:100svh; background:var(--ink); overflow:hidden; }
.pe-viewer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-viewer-ba{ position:absolute; inset:0; transform-origin:center center; transition:transform .4s var(--ease-3); }
.pe-viewer-ba .pe-baslider{ height:100%; }
/* This full-bleed context sits under the fixed 72px topbar and the
   "Show Before / After" / "Explore Every Product" controls already
   occupying the top-left corner — the corner Before/After tags are
   more useful in the compact Project Summary frame below, so they're
   suppressed here rather than risk overlapping either. */
.pe-viewer-ba .pe-ba-tag{ display:none; }
.pe-viewer-summary{
  position:absolute; left:clamp(20px,4vw,44px); bottom:clamp(20px,4vw,44px); z-index:5;
  padding:20px 24px; background:rgba(27,28,25,.62); color:var(--ivory); max-width:420px;
}
.pe-viewer-summary .vs-name{ font:400 22px var(--serif); letter-spacing:-.02em; }
.pe-viewer-summary .vs-meta{ margin-top:8px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:rgba(244,241,233,.75); }
.pe-viewer-controls{ position:absolute; right:clamp(20px,4vw,44px); bottom:clamp(20px,4vw,44px); z-index:5; display:flex; gap:10px; }
.pe-viewer-controls button{
  width:44px; height:44px; border:1px solid rgba(244,241,233,.4); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; font:14px var(--mono); background:rgba(27,28,25,.4);
}
.pe-viewer-controls button:hover{ background:rgba(27,28,25,.7); }
.pe-viewer-cta{ position:absolute; top:clamp(90px,10vh,120px); left:clamp(20px,4vw,44px); z-index:5; }

/* ---------- product alternative tabs ---------- */
.pe-alt-tabs{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.pe-alt-tab{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
  padding-bottom:8px; border-bottom:1px solid transparent;
}
.pe-alt-tab.is-active{ color:var(--ink); border-color:var(--ink); }
.pe-alt-empty{ margin-top:34px; font:14px/1.6 var(--sans); color:var(--sage); max-width:44ch; }
.pe-alt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.pe-alt-card{ border:1px solid var(--line); padding:0; }
.pe-alt-figure{ aspect-ratio:1/1; background:var(--clay); overflow:hidden; }
.pe-alt-figure img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-alt-body{ padding:16px; }
.pe-alt-name{ font:400 16px var(--serif); }
.pe-alt-vendor{ margin-top:4px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
.pe-alt-price{ margin-top:8px; font:13px var(--mono); }
.pe-alt-swap{
  margin-top:14px; width:100%; text-align:left; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  padding:10px 12px; border:1px solid var(--ink);
}
.pe-alt-swap:hover{ background:var(--ink); color:var(--ivory); }
@media (max-width:900px){ .pe-alt-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pe-alt-grid{ grid-template-columns:1fr; } }

/* ---------- budget / cost ---------- */
.pe-cost-hero{ margin-top:40px; }
.pe-cost-hero .ch-figure{ font:400 clamp(40px,6vw,74px)/1 var(--serif); letter-spacing:-.03em; }
.pe-cost-hero .ch-label{ margin-top:10px; display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }

.pe-budget-list{ margin-top:44px; border-top:1px solid var(--line); max-width:760px; }
.pe-budget-row{ display:flex; justify-content:space-between; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); }
.pe-budget-row .br-name{ font:400 20px var(--serif); letter-spacing:-.02em; }
.pe-budget-row .br-value{ font:12px var(--mono); letter-spacing:.04em; color:var(--sage); }
.pe-budget-row.is-total .br-name, .pe-budget-row.is-total .br-value{ color:var(--ink); font-weight:500; }

.pe-disclaimer{
  margin-top:34px; padding:18px 20px; border:1px solid var(--line); max-width:640px;
  font:11px/1.6 var(--mono); color:var(--sage);
}

/* ---------- optimize budget ---------- */
.pe-optimize{ margin-top:52px; max-width:680px; }
.pe-optimize-figures{ display:flex; gap:8vw; flex-wrap:wrap; margin-top:36px; }
.pe-optimize-figures div b{ display:block; font:400 clamp(30px,4vw,48px)/1 var(--serif); letter-spacing:-.02em; }
.pe-optimize-figures div span{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
.pe-optimize-figures .is-savings b{ color:var(--sage-deep); }
.pe-optimize-changes{ margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.pe-optimize-changes li{ font-size:14px; line-height:1.6; padding-left:18px; position:relative; }
.pe-optimize-changes li::before{ content:'—'; position:absolute; left:0; color:var(--sage); }

/* ---------- team ---------- */
.pe-team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin-top:48px; max-width:920px; }
.pe-team-card{ background:var(--ivory); padding:26px; }
.pe-team-card.is-pm{ background:var(--ink); color:var(--ivory); }
.pe-team-card .tc-role{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
.pe-team-card.is-pm .tc-role{ color:var(--brass); }
.pe-team-card .tc-name{ margin-top:10px; font:400 19px var(--serif); letter-spacing:-.02em; }
.pe-team-note{ margin-top:34px; font:15px/1.6 var(--serif); color:var(--sage); max-width:52ch; }
@media (max-width:900px){ .pe-team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pe-team-grid{ grid-template-columns:1fr; } }

/* ---------- requirements checklist ---------- */
.pe-req-list{ margin-top:46px; border-top:1px solid var(--line); max-width:760px; }
.pe-req-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.pe-req-name{ font-size:15px; }
.pe-req-status{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:6px 12px; border:1px solid var(--line);
  color:var(--sage); white-space:nowrap;
}
.pe-req-status.is-likely{ border-color:var(--ink); color:var(--ink); }

/* ---------- Project Summary (spec sections 8-16) ---------- */
.pe-summary-h2{ margin-top:64px; font:400 clamp(22px,2.6vw,30px)/1.2 var(--serif); letter-spacing:-.02em; }

.pe-elem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
.pe-elem-card{ border:1px solid var(--line); }
.pe-elem-figure{ aspect-ratio:4/3; background:var(--clay); overflow:hidden; }
.pe-elem-figure img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-elem-body{ padding:18px; }
.pe-elem-cat{ display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-elem-name{ display:block; margin-top:8px; font:400 19px var(--serif); letter-spacing:-.02em; }
.pe-elem-rows{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.pe-elem-rows div{ display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.pe-elem-rows div span{ color:var(--sage); }
.pe-elem-rows div b{ font-weight:400; text-align:right; }
@media (max-width:900px){ .pe-elem-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pe-elem-grid{ grid-template-columns:1fr; } }

/* Selected-elements "Change" action (spec sections 2-5): a quiet,
   secondary action on every element card, and an inline expanding
   panel of real alternatives — deliberately styled like the existing
   .pe-alt-* alternatives screen (border, mono labels, brass-free) so
   the "editable proposal" feeling is consistent with the rest of the
   app rather than introducing a new visual language. */
.pe-elem-actions{ margin-top:16px; }
.pe-elem-change{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
  padding:8px 14px; border:1px solid var(--line); background:none;
  transition:border-color .25s var(--ease-3), color .25s var(--ease-3);
}
.pe-elem-change:hover{ border-color:var(--ink); color:var(--ink); }
.pe-elem-alts{ border-top:1px solid var(--line); margin-top:16px; padding-top:14px; }
.pe-elem-alts[hidden]{ display:none; }
.pe-elem-alt-row{
  display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:12px;
}
.pe-elem-alt-row:last-of-type{ border-bottom:none; }
.pea-tag{ font:9px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
.pea-name{ font:14px var(--serif); }
.pea-vendor{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.04em; color:var(--sage); }
.pea-price{ font:12px var(--mono); }
.pea-swap{
  font:9px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  padding:7px 11px; border:1px solid var(--ink); background:none; white-space:nowrap;
}
.pea-swap:hover{ background:var(--ink); color:var(--ivory); }
.pea-empty{ font:13px/1.6 var(--sans); color:var(--sage); }
@media (max-width:640px){
  .pe-elem-alt-row{ grid-template-columns:1fr; gap:4px; text-align:left; }
  .pea-swap{ margin-top:6px; width:100%; text-align:center; }
}

.pe-compare{ margin-top:28px; padding:24px 26px; border:1px solid var(--line); max-width:640px; }
.pe-compare-row{ display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; font-size:13px; color:var(--sage); }
.pe-compare-row b{ font:400 18px var(--serif); color:var(--ink); letter-spacing:-.01em; }
.pe-compare-status{
  margin-top:14px; display:inline-block; padding:8px 14px; font:10px var(--mono);
  text-transform:uppercase; letter-spacing:.08em; border:1px solid var(--ink);
}
.pe-compare.is-within .pe-compare-status{ border-color:var(--sage-deep); color:var(--sage-deep); }
.pe-compare.is-below .pe-compare-status{ border-color:var(--sage-deep); color:var(--sage-deep); }
.pe-compare.is-above .pe-compare-status{ border-color:var(--brass); color:var(--brass); }

.ds-duration{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); white-space:nowrap; }

.pe-vendor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); margin-top:20px; max-width:920px; }
.pe-vendor-card{ background:var(--ivory); padding:22px 24px; }
.pv-name{ display:block; font:400 19px var(--serif); letter-spacing:-.02em; }
.pv-cat{ display:block; margin-top:4px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pv-rows{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.pv-rows div{ display:flex; justify-content:space-between; gap:16px; font-size:12px; }
.pv-rows div span{ color:var(--sage); flex:0 0 auto; }
.pv-rows div b{ font-weight:400; text-align:right; }
@media (max-width:760px){ .pe-vendor-grid{ grid-template-columns:1fr; } }

/* ---------- final review summary ---------- */
.pe-review-hero{ position:relative; aspect-ratio:16/9; max-width:920px; overflow:hidden; margin-top:40px; background:var(--clay); }
.pe-review-hero img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-review-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 40px; margin-top:40px; max-width:760px; }
.pe-review-item span{ display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-review-item b{ display:block; margin-top:8px; font:400 20px var(--serif); letter-spacing:-.02em; }
@media (max-width:560px){ .pe-review-grid{ grid-template-columns:1fr; } }

/* ---------- lead form ---------- */
.pe-form{ margin-top:48px; max-width:520px; display:flex; flex-direction:column; gap:26px; }
.pe-field{ position:relative; }
.pe-field label{ display:block; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:10px; }
.pe-field input{ width:100%; border-bottom:1px solid var(--line); padding:10px 0 12px; font:18px var(--serif); transition:border-color .3s; }
.pe-field input:focus{ border-color:var(--ink); }
/* .pe-field never had its own textarea rule — a <textarea> dropped
   into it fell back to the bare browser default (no border, no
   padding, ~2 visible lines), reading as "tiny, faint, collapsed"
   rather than an actual input. Same visible-frame/comfortable-height/
   resizable treatment as .pe-voice-field's textarea elsewhere in this
   file, so every existing .pe-field textarea across the app (not just
   New Home) now renders as a real, obviously-editable field instead
   of a bug. */
.pe-field textarea{
  width:100%; min-height:96px; resize:vertical; border:1px solid var(--line); border-radius:3px; background:var(--ivory);
  padding:14px 16px; font:15px/1.6 var(--sans); color:var(--ink); transition:border-color .3s var(--ease-3);
}
.pe-field textarea:focus{ border-color:var(--ink); outline:none; }
.pe-field textarea::placeholder{ color:var(--sage); }
.pe-contact-pref{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- confirmation ---------- */
.pe-confirm{ text-align:center; margin:0 auto; max-width:640px; }
.pe-confirm .pe-headline-lg{ margin-top:22px; }
.pe-confirm-meta{ margin-top:30px; display:flex; flex-direction:column; gap:8px; font:12px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-confirm-meta b{ color:var(--ink); }
.pe-confirm .pe-actions{ justify-content:center; }

/* Project Created screen — PDF/Share actions (spec sections 12-18) */
.pe-pdf-status{ margin-top:16px; font:11px var(--mono); letter-spacing:.03em; color:var(--sage); min-height:14px; }

/* Guest draft claim panel (Phase 3 — progressive registration).
   Reuses .pe-form/.pe-field/.pe-actions/.pe-btn/.pe-summary-h2/.pe-sub
   as-is (same fonts/tokens as the rest of the Project Experience) —
   only the panel's own container and small status/alt-link text are
   new, so this never reads as a separate, generic sign-up page. Sits
   inside .pe-confirm (text-align:center), so the form itself opts
   back into left-aligned fields — a centered label/input looks wrong
   at any width. */
.pe-claim-panel{ margin:40px auto 0; max-width:420px; text-align:left; padding-top:32px; border-top:1px solid var(--line); }
.pe-claim-panel .pe-summary-h2{ margin-top:0; text-align:center; }
.pe-claim-panel .pe-sub{ text-align:center; }
.pe-claim-panel .pe-form{ margin-top:28px; max-width:none; }
.pe-claim-panel .pe-actions{ justify-content:center; }
.pe-claim-status{ margin-top:14px; font:12px var(--mono); letter-spacing:.03em; color:var(--sage); text-align:center; min-height:14px; }
.pe-claim-alt{ margin-top:6px; font:13px var(--serif); text-align:center; color:var(--sage); }
.pe-claim-alt a{ margin-left:6px; }
.pe-share-menu{
  margin:18px auto 0; max-width:280px; border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.pe-share-menu[hidden]{ display:none; }
.psm-item{
  display:block; width:100%; text-align:left; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  padding:13px 18px; border:none; border-bottom:1px solid var(--line); background:none; color:var(--ink);
  transition:background .2s var(--ease-3);
}
.psm-item:last-child{ border-bottom:none; }
.psm-item:hover{ background:var(--stone); }
.psm-close{ color:var(--sage); }

/* ---------- dashboard ---------- */
.pe-dash-header{ display:flex; gap:6vw; flex-wrap:wrap; align-items:flex-end; margin-top:36px; }
.pe-dash-status{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); padding:8px 14px; border:1px solid var(--line); }
.pe-dash-timeline{ margin-top:56px; border-top:1px solid var(--line); max-width:660px; }
.pe-dash-stage-row{ display:flex; align-items:center; gap:22px; padding:18px 0; border-bottom:1px solid var(--line); }
.pe-dash-stage-row .ds-num{ font:11px var(--mono); color:var(--sage); width:26px; }
.pe-dash-stage-row .ds-name{ font:400 20px var(--serif); letter-spacing:-.02em; flex:1; }
.pe-dash-stage-row.is-current .ds-name{ color:var(--sage-deep); }
.pe-dash-stage-row.is-done .ds-num::after{ content:' ✓'; }
.pe-dash-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); margin-top:56px; max-width:920px; }
.pe-dash-panel{ background:var(--ivory); padding:28px; }
.pe-dash-panel h4{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:16px; }
@media (max-width:760px){ .pe-dash-grid{ grid-template-columns:1fr; } }

/* ---------- My Projects workspace (spec 17-24) ---------- */
.pe-myprojects{ padding:calc(72px + 40px) clamp(20px,6vw,var(--gutter)) 90px; max-width:1240px; margin:0 auto; }
.pe-mp-subnav{ display:flex; gap:22px; align-items:center; }
.pe-mp-navlink{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
  background:none; border:none; padding:0; cursor:pointer; transition:color .25s;
}
.pe-mp-navlink:hover{ color:var(--ink); }
.pe-mp-head{ margin-top:28px; display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.pe-mp-head .pe-eyebrow{ margin-bottom:12px; }
.pe-mp-head h1{ font:400 clamp(30px,4vw,52px)/1 var(--serif); letter-spacing:-.03em; }

.pe-mp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.pe-mp-card{ border:1px solid var(--line); display:flex; flex-direction:column; }
.pe-mp-figure{ aspect-ratio:4/3; background:var(--clay); overflow:hidden; }
.pe-mp-figure img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-mp-body{ padding:18px 20px; display:flex; flex-direction:column; gap:5px; }
.mp-name{ font:400 20px var(--serif); letter-spacing:-.02em; margin-bottom:2px; }
.mp-meta{ font:11px var(--sans); color:#4a4b45; }
.mp-estimate{ margin-top:4px; font:12px var(--mono); color:var(--sage); }
.mp-status{
  margin-top:8px; align-self:flex-start; font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em;
  padding:5px 10px; border:1px solid var(--line); color:var(--ink);
}
.mp-updated{ margin-top:6px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }

.pe-mp-actions{ margin-top:auto; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; }
.pe-mp-actions button{
  flex:1 1 auto; padding:11px 10px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.05em;
  background:none; border:none; border-right:1px solid var(--line); border-top:1px solid transparent;
  color:var(--ink); cursor:pointer; transition:background .25s, color .25s; white-space:nowrap;
}
.pe-mp-actions button:nth-child(4n){ border-right:none; }
.pe-mp-actions button:hover{ background:var(--ink); color:var(--ivory); }
.pe-mp-actions button.is-danger{ color:var(--sage); }
.pe-mp-actions button.is-danger:hover{ background:var(--ink); color:var(--ivory); }

@media (max-width:1080px){ .pe-mp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){
  .pe-myprojects{ padding-top:calc(60px + 30px); }
  .pe-mp-grid{ grid-template-columns:1fr; }
  .pe-mp-actions button{ flex:1 1 33%; }
  .pe-mp-actions button:nth-child(4n){ border-right:1px solid var(--line); }
  .pe-mp-actions button:nth-child(3n){ border-right:none; }
}

/* ---------- misc ---------- */
.pe-fade-enter{ opacity:0; transform:translateY(10px); }
.pe-fade-enter-active{ opacity:1; transform:translateY(0); transition:opacity .5s var(--ease-4), transform .5s var(--ease-4); }

@media (max-width:640px){
  .pe-stage{ padding-top:calc(60px + 40px); padding-bottom:70px; }
  .pe-actions{ margin-top:38px; }
  .pe-team-note{ font-size:14px; }
}

/* =========================================================
   Phase 12 — "Architecture & New Construction" flow.
   New components only; everything above (.pe-card-grid, .pe-chip-grid,
   .pe-tier-grid, .pe-upload*, .pe-cinema*, .pe-concept-grid,
   .pe-review-grid, .pe-form/.pe-field, .pe-dash-timeline) is reused
   as-is by js/project-experience-construction.js.
   ========================================================= */

/* ---------- multi-photo collection label (spec 3-4: never imply
   only the first photo was used) ---------- */
.pe-photo-collection{ margin-top:20px; display:flex; align-items:center; gap:12px; }
.pe-photo-collection .pc-count{
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage);
  border:1px solid var(--line); padding:6px 12px;
}
.pe-photo-collection .pc-count b{ color:var(--ink); font-style:normal; }

/* ---------- existing-structure options (empty lot / existing home / existing structure) ---------- */
.pe-structure-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; max-width:820px; }
.pe-structure{
  border:1px solid var(--line); padding:26px 22px; text-align:left; background:none; cursor:pointer;
  transition:border-color .25s, background .25s;
}
.pe-structure:hover{ border-color:var(--ink); }
.pe-structure.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pe-structure .ps-label{ display:block; font:400 20px var(--serif); letter-spacing:-.02em; }
.pe-structure .ps-desc{ display:block; margin-top:8px; font:12px/1.5 var(--sans); color:#4a4b45; }
.pe-structure.is-selected .ps-desc{ color:rgba(244,241,233,.78); }
@media (max-width:760px){ .pe-structure-grid{ grid-template-columns:1fr; } }

/* ---------- numeric stepper controls (home size / bed / bath / stories / garage) ---------- */
.pe-stepper-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px; margin-top:48px; max-width:760px; }
.pe-stepper-field{ display:flex; flex-direction:column; gap:14px; }
.pe-stepper-field > label{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
.pe-stepper{ display:flex; align-items:center; gap:18px; }
.pe-stepper button{
  width:38px; height:38px; border:1px solid var(--line); background:none; cursor:pointer;
  font:16px var(--mono); color:var(--ink); transition:background .25s, color .25s;
}
.pe-stepper button:hover{ background:var(--ink); color:var(--ivory); }
.pe-stepper button[disabled]{ opacity:.3; pointer-events:none; }
.pe-stepper .st-value{ font:400 26px var(--serif); letter-spacing:-.02em; min-width:2.4ch; text-align:center; }
.pe-stepper-field.is-textfield{ grid-column:1 / -1; }
@media (max-width:640px){ .pe-stepper-grid{ grid-template-columns:1fr; } }

/* ---------- yes/no toggle row (pool / outdoor living / guest suite / home office) ---------- */
.pe-toggle-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:48px; max-width:760px; }
.pe-toggle-row{
  display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); padding:16px 18px;
}
.pe-toggle-row .tr-label{ font:14px var(--sans); }
.pe-toggle-row .tr-opts{ display:flex; gap:8px; }
.pe-toggle-row button{
  border:1px solid var(--line); background:none; padding:7px 14px; font:10px var(--mono); text-transform:uppercase;
  letter-spacing:.05em; cursor:pointer; color:var(--ink); transition:background .25s, color .25s;
}
.pe-toggle-row button.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
@media (max-width:640px){ .pe-toggle-grid{ grid-template-columns:1fr; } }

/* ---------- AI design chat ---------- */
.pe-chat{ margin-top:44px; max-width:680px; }
.pe-chat-log{ display:flex; flex-direction:column; gap:16px; min-height:60px; }
.pe-chat-msg{ max-width:88%; padding:14px 18px; font:14px/1.6 var(--sans); border:1px solid var(--line); }
.pe-chat-msg.is-user{ align-self:flex-end; background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pe-chat-msg.is-ai{ align-self:flex-start; background:var(--ivory); }
.pe-chat-suggestions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.pe-chat-suggestions button{
  border:1px solid var(--line); background:none; padding:10px 16px; font:12px/1.4 var(--sans); text-align:left;
  cursor:pointer; color:var(--ink); transition:border-color .25s;
}
.pe-chat-suggestions button:hover{ border-color:var(--ink); }
.pe-chat-input-row{ margin-top:24px; display:flex; gap:14px; align-items:flex-end; }
.pe-chat-input-row textarea{
  flex:1; border:1px solid var(--line); background:none; padding:14px 16px; font:14px/1.5 var(--sans);
  resize:vertical; min-height:56px; transition:border-color .3s;
}
.pe-chat-input-row textarea:focus{ border-color:var(--ink); }

/* ---------- style discovery A/B/C comparison ---------- */
.pe-compare-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:52px; }
.pe-compare-card{
  position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer; border:1px solid var(--line);
  display:flex; align-items:flex-end;
}
.pe-compare-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; font-size:0; transform:scale(1.1); transition:transform .9s var(--ease-4); }
.pe-compare-card:hover img{ transform:scale(1); }
.pe-compare-card .cc-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,0) 46%, rgba(8,8,6,.76) 100%); }
.pe-compare-card .cc-body{ position:relative; z-index:1; padding:20px; color:var(--ivory); width:100%; }
.pe-compare-card .cc-letter{ font:10px var(--mono); letter-spacing:.1em; color:var(--brass); display:block; margin-bottom:6px; }
.pe-compare-card .cc-name{ font:400 20px var(--serif); letter-spacing:-.02em; }
.pe-compare-card.is-liked{ outline:2px solid var(--ink); outline-offset:-2px; }
.pe-compare-card.is-liked .cc-name::after{ content:' ✓'; }
@media (max-width:760px){ .pe-compare-grid{ grid-template-columns:1fr; } }

/* ---------- multi-view gallery (front/rear/side elevations, interiors, pool) ---------- */
.pe-view-note{
  margin-top:20px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage);
  max-width:52ch;
}
.pe-view-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px; }
.pe-view-card{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--clay); }
.pe-view-card img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-view-card .vc-label{
  position:absolute; left:0; bottom:0; right:0; padding:10px 12px; background:linear-gradient(0deg, rgba(8,8,6,.7), rgba(8,8,6,0));
  color:var(--ivory); font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em;
}
@media (max-width:760px){ .pe-view-gallery{ grid-template-columns:repeat(2,1fr); } }

/* ---------- design refinement chips (reuses .pe-chip visually via modifier) ---------- */
.pe-refine-chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:44px; max-width:820px; }

/* ---------- conceptual / non-professional disclaimer ---------- */
.pe-disclaimer{
  margin-top:44px; padding:18px 22px; border:1px solid var(--line); max-width:820px;
  font:12px/1.6 var(--sans); color:#4a4b45; background:var(--ivory);
}
.pe-disclaimer b{ color:var(--ink); font-weight:600; }

/* ---------- partner connection ---------- */
.pe-partner-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px; max-width:920px; }
.pe-partner-card{ border:1px solid var(--line); padding:26px; transition:border-color .25s; }
.pe-partner-card.is-open{ border-color:var(--ink); }
.pe-partner-card .pp-label{ font:400 22px var(--serif); letter-spacing:-.02em; }
.pe-partner-card .pp-desc{ margin-top:10px; font:12px/1.6 var(--sans); color:#4a4b45; max-width:42ch; }
.pe-partner-card button.pp-toggle{
  margin-top:18px; border:1px solid var(--line); background:none; padding:10px 18px; font:10px var(--mono);
  text-transform:uppercase; letter-spacing:.06em; cursor:pointer; color:var(--ink); transition:background .25s, color .25s;
}
.pe-partner-card button.pp-toggle:hover{ background:var(--ink); color:var(--ivory); }
.pe-partner-form{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); display:none; flex-direction:column; gap:16px; }
.pe-partner-card.is-open .pe-partner-form{ display:flex; }
.pe-partner-form .pf-summary{ font:12px/1.6 var(--sans); color:#4a4b45; }
.pe-partner-form .pf-summary b{ color:var(--ink); font-weight:600; }
.pe-partner-form input, .pe-partner-form textarea{
  width:100%; border:1px solid var(--line); background:none; padding:10px 12px; font:14px var(--sans); transition:border-color .3s;
}
.pe-partner-form input:focus, .pe-partner-form textarea:focus{ border-color:var(--ink); }
.pe-partner-form button.pf-submit{
  align-self:flex-start; background:var(--ink); color:var(--ivory); border:1px solid var(--ink); padding:12px 22px;
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; transition:background .25s;
}
.pe-partner-form button.pf-submit:hover{ background:var(--sage-deep); }
.pe-partner-form .pf-confirm{ font:12px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
@media (max-width:760px){ .pe-partner-grid{ grid-template-columns:1fr; } }

/* ---------- goals / kitchen / florida requirement chips reuse .pe-chip-grid/.pe-chip as-is ---------- */

/* =========================================================
   Global multi-photo upload / analysis / unified-design system
   (applies to New Home, Existing Home, Renovation, Single Room,
   Furniture & Decor, Outdoor — NOT Architecture & New Construction,
   which already has its own separate multi-photo screens above).
   ========================================================= */

/* ---------- per-photo status badges (upload screen) ---------- */
.pe-upload-thumb.is-failed{ border-color:var(--sage); }
.pe-upload-thumb .pt-status{
  position:absolute; left:4px; bottom:4px; right:4px; font:9px var(--mono); text-transform:uppercase;
  letter-spacing:.04em; padding:3px 6px; background:rgba(27,28,25,.78); color:var(--ivory); text-align:center;
}
.pe-upload-thumb .pt-status.is-uploading{ background:rgba(27,28,25,.55); }
.pe-upload-thumb .pt-status.is-failed{ background:rgba(100,112,93,.92); display:flex; align-items:center; justify-content:center; gap:6px; }
.pe-upload-thumb .pt-retry{
  background:var(--ivory); color:var(--ink); border:none; padding:2px 7px; font:9px var(--mono);
  text-transform:uppercase; letter-spacing:.03em; cursor:pointer;
}
.pe-upload-thumb .pt-placeholder{ width:100%; height:100%; background:var(--stone); }

/* ---------- analysis screen: all-photos grid with per-photo status ---------- */
.pe-analysis-photos{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; margin-bottom:8px; }
.pe-analysis-photos .pe-upload-thumb{ width:88px; height:88px; }
.pe-analysis-photos .pe-upload-thumb .pt-status{
  position:absolute; top:4px; right:4px; left:auto; bottom:auto; width:20px; height:20px; padding:0;
  border-radius:0; display:flex; align-items:center; justify-content:center; font:11px var(--mono);
  background:rgba(27,28,25,.72); color:var(--ivory);
}
.pe-analysis-photos .pt-status.is-done::before{ content:"\2713"; color:var(--brass); }
.pe-analysis-photos .pt-status.is-current::before{ content:"\21bb"; animation:pe-spin 1s linear infinite; }
.pe-analysis-photos .pt-status.is-pending::before{ content:"\25CB"; opacity:.6; }
@keyframes pe-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.pe-cinema #pe-cinema-img{ transition:opacity .3s var(--ease-3); }

/* ---------- multi-view before/after: light-context tab strip reuses
   .pe-alt-tabs/.pe-alt-tab as-is (my-project / review, normal document
   flow). A separate dark variant is needed inside the full-bleed,
   dark-background design-detail viewer, positioned as its own overlay
   rather than in-flow. ---------- */
.pe-view-tabs button{ background:none; border:none; cursor:pointer; }
.pe-viewer-view-tabs{
  position:absolute; top:clamp(90px,10vh,120px); right:clamp(20px,4vw,44px); z-index:5;
  display:flex; gap:8px; flex-wrap:wrap; max-width:260px; justify-content:flex-end;
}
.pe-viewer-view-tabs button{
  font:9px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:rgba(244,241,233,.75);
  background:rgba(27,28,25,.45); border:1px solid rgba(244,241,233,.3); padding:6px 10px; cursor:pointer;
  transition:background .25s, color .25s;
}
.pe-viewer-view-tabs button.is-active{ background:rgba(244,241,233,.92); color:var(--ink); border-color:transparent; }

/* ---------- space-map / what-to-keep: primary-photo switcher ---------- */
.pe-photo-switcher{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:20px; }
.pe-photo-switcher .ps-note{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
.pe-photo-switcher .ps-thumbs{ display:flex; gap:8px; }
.pe-photo-switcher .ps-thumb{
  width:44px; height:44px; overflow:hidden; border:1px solid var(--line); cursor:pointer; padding:0; background:none;
  opacity:.55; transition:opacity .25s, border-color .25s;
}
.pe-photo-switcher .ps-thumb img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-photo-switcher .ps-thumb.is-active{ opacity:1; border-color:var(--ink); }

/* =========================================================
   Phase 14 — "Architecture" + "New Construction" (split flows).
   New components only; everything else reused as-is by
   js/project-experience-architecture.js and the rebuilt
   js/project-experience-construction.js — see each file's own header
   comment for the full list of reused component classes.
   ========================================================= */

/* ---------- small button modifier (vendor card "View Profile") ---------- */
.pe-btn.is-small{ padding:9px 16px; font-size:10px; }

/* ---------- simple text-only chip-card (project type / intent / yes-no
   choices) — a lighter-weight sibling of .pe-card for options that
   don't carry a photo. ---------- */
.pe-chip-card{
  border:1px solid var(--line); padding:22px 20px; cursor:pointer; text-align:left;
  font:15px var(--sans); transition:border-color .25s, background .25s, color .25s;
}
.pe-chip-card:hover{ border-color:var(--ink); }
.pe-chip-card.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }

/* New Home — compact style-card grid (Vision + Inspiration refinement):
   the predefined styles are now supporting guidance shown BELOW the
   client's own inspiration/description, so they need a much smaller
   footprint than the primary .pe-card-grid (project-type/transform-
   level) use — more columns, smaller type, tighter padding. Reuses
   .pe-card/.pc-*/.is-selected verbatim (same border+outline+"✓"
   selected state already used everywhere else) — only the grid
   density and card-internal sizing are scoped smaller here. */
.pe-card-grid.is-compact{ grid-template-columns:repeat(4,1fr); gap:10px; margin-top:20px; }
.pe-card-grid.is-compact .pe-card{ aspect-ratio:1/1; }
.pe-card-grid.is-compact .pc-body{ padding:14px; }
/* Labels were reading as visually insignificant against the compact
   cards — sized up noticeably (still the same serif family/weight as
   .pc-name everywhere else, never bold) so they read at a glance. */
.pe-card-grid.is-compact .pc-name{ font-size:18px; }
@media (max-width:900px){ .pe-card-grid.is-compact{ grid-template-columns:repeat(3,1fr); } }
/* Renovation → Kitchen (js/vision-inspiration.js): the kitchen's own directions — the same card family, the drawing on
   top and its name and subtitle under it (an elevation reads by its cabinetry, so nothing is laid over it); the
   1st / 2nd choice badge says the order. */
.pe-card-grid.is-kitchen{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:0; }
.pe-card.is-figure{ aspect-ratio:auto; display:flex; flex-direction:column; align-items:stretch; width:100%; padding:0; margin:0; text-align:left;
  font:inherit; color:var(--ink); background:var(--ivory); border:1px solid var(--line); overflow:hidden; -webkit-appearance:none; appearance:none; }
.pe-card.is-figure .pc-figure{ position:relative; display:block; aspect-ratio:4/3; background:var(--stone); overflow:hidden; border-bottom:1px solid var(--line); }
.pe-card.is-figure .pc-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:none; transition:transform .6s var(--ease-4); }
.pe-card.is-figure:hover .pc-figure img{ transform:scale(1.03); }
.pe-card.is-figure .pc-body{ position:relative; display:grid; gap:4px; justify-items:start; padding:14px 16px 16px; color:var(--ink); }
.pe-card.is-figure .pc-name{ font:400 20px/1.2 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.pe-card.is-figure .pc-desc{ margin:0; font:13px/1.45 var(--sans); color:var(--sage); max-width:none; }
.pe-card.is-figure .pc-rank{ margin-bottom:4px; padding:3px 8px; font:500 10px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; background:var(--ink); color:var(--ivory); border:1px solid var(--ink); }
.pe-card.is-figure .pc-rank[hidden]{ display:none; }
.pe-card.is-figure[data-rank="secondary"] .pc-rank{ background:var(--ivory); color:var(--ink); }
.pe-card.is-figure.is-selected{ border-color:var(--ink); outline:2px solid var(--ink); outline-offset:-2px; }
.pe-card.is-figure.is-selected .pc-name::after{ content:none; }   /* the badge says it */
.pe-card.is-figure:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.rv-kitchen-note{ min-height:1.4em; margin:10px 0 0; font:13px/1.45 var(--sans); color:var(--sage); }
@media (max-width:900px){ .pe-card-grid.is-kitchen{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){
  .pe-card-grid.is-kitchen{ gap:10px; }
  .pe-card.is-figure .pc-body{ padding:10px 12px 12px; }
  .pe-card.is-figure .pc-name{ font-size:17px; }
  .pe-card.is-figure .pc-desc{ font-size:12px; }
}
/* Renovation → Living Room: the same picker, eight cards — two rows of four (two columns on a phone). */
.pe-card-grid.is-kitchen.is-living{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:900px){ .pe-card-grid.is-kitchen.is-living{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

@media (max-width:560px){ .pe-card-grid.is-compact{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Architecture "Project Intent" (arch-intent) — editorial
   photo-panel routing gallery: three full-width horizontal entry
   panels, stacked vertically, using the stage's full available width
   with the page's own balanced left/right margins (no narrow centered
   column). Its own component family (not .pe-card/.pe-chip-card) —
   full-bleed photography, numbered, restrained dark selected state (no
   checkmark, no bold), select-to-navigate (no Continue). ---------- */
.pe-arch-intent-grid{ display:flex; flex-direction:column; gap:20px; margin-top:36px; }
.pe-arch-intent-card{
  position:relative; overflow:hidden; cursor:pointer; border:1px solid var(--line);
  background:var(--clay); display:flex; flex-direction:column; justify-content:flex-end;
  width:100%; aspect-ratio:2.6/1; transition:border-color .3s var(--ease-4);
}
.pe-arch-intent-card:hover, .pe-arch-intent-card:focus-visible{ border-color:var(--ink); outline:none; }
.aic-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); transition:transform 1s var(--ease-4);
}
.pe-arch-intent-card:hover .aic-photo, .pe-arch-intent-card:focus-visible .aic-photo{ transform:scale(1.1); }
.aic-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,8,0) 45%, rgba(8,8,6,.85) 100%); }
.aic-body{ position:relative; z-index:1; padding:32px; }
.aic-num{ display:block; font:10px var(--mono); letter-spacing:.1em; color:rgba(244,241,233,.7); margin-bottom:8px; padding-bottom:8px; border-top:1px solid rgba(244,241,233,.35); width:28px; padding-top:8px; }
.aic-label{ display:block; font:400 30px var(--serif); letter-spacing:-.02em; color:var(--ivory); }
.aic-desc{ margin-top:8px; font:14px/1.5 var(--sans); color:rgba(244,241,233,.78); max-width:44ch; }
.aic-arrow{
  position:absolute; z-index:2; right:28px; bottom:28px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(244,241,233,.6); color:var(--ivory); display:flex; align-items:center; justify-content:center;
  font:16px var(--sans); opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s var(--ease-4), border-color .3s;
}
.pe-arch-intent-card:hover .aic-arrow, .pe-arch-intent-card:focus-visible .aic-arrow{ opacity:1; transform:translateY(0); border-color:var(--ivory); }

.pe-arch-intent-card.is-selected{ border-color:var(--ink); }
.pe-arch-intent-card.is-selected .aic-scrim{ background:linear-gradient(180deg, rgba(10,10,8,.15) 0%, rgba(8,8,6,.92) 100%); }
.pe-arch-intent-card.is-selected .aic-arrow{ opacity:1; transform:translateY(0); border-color:var(--ivory); }

@media (max-width:900px){
  .pe-arch-intent-card{ aspect-ratio:16/9; }
}
@media (max-width:700px){
  .pe-arch-intent-card{ aspect-ratio:4/3; }
  .aic-body{ padding:22px; }
  .aic-label{ font-size:24px; }
  .aic-desc{ max-width:calc(100% - 60px); }
  .aic-arrow{ opacity:1; transform:translateY(0); }
}

/* ---------- Architecture "New Home / Where will your home be?"
   (arch-new-home-start) - image-free editorial choice cards, distinct
   from the photo-card family above: cream surface, thin border, large
   light-weight number, serif title, circular outline arrow. ---------- */
.pe-arch-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; }
.pe-arch-choice-card{
  position:relative; cursor:pointer; text-align:left; background:var(--ivory);
  border:1px solid var(--line); padding:32px; min-height:260px;
  display:flex; flex-direction:column; transition:background .3s var(--ease-4), border-color .3s var(--ease-4), color .3s var(--ease-4);
}
.pe-arch-choice-card:hover, .pe-arch-choice-card:focus-visible{ border-color:var(--ink); outline:none; }
.acc-num{ font:300 40px var(--serif); color:var(--line); line-height:1; }
.acc-rule{ display:block; width:28px; height:1px; background:var(--sage); margin:20px 0; }
.acc-title{ display:block; font:400 26px var(--serif); letter-spacing:-.02em; color:var(--ink); }
.acc-desc{ margin-top:10px; font:14px/1.6 var(--sans); color:var(--sage); max-width:32ch; }
.acc-arrow{
  position:absolute; right:28px; bottom:28px; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink); display:flex; align-items:center; justify-content:center;
  font:18px var(--sans); transition:border-color .3s var(--ease-4), color .3s var(--ease-4), background .3s var(--ease-4);
}
.pe-arch-choice-card:hover .acc-arrow, .pe-arch-choice-card:focus-visible .acc-arrow{ border-color:var(--ink); }

.pe-arch-choice-card.is-selected{ background:var(--ink); border-color:var(--ink); }
.pe-arch-choice-card.is-selected .acc-num{ color:rgba(244,241,233,.35); }
.pe-arch-choice-card.is-selected .acc-rule{ background:rgba(244,241,233,.5); }
.pe-arch-choice-card.is-selected .acc-title{ color:var(--ivory); }
.pe-arch-choice-card.is-selected .acc-desc{ color:rgba(244,241,233,.72); }
.pe-arch-choice-card.is-selected .acc-arrow{ border-color:rgba(244,241,233,.6); color:var(--ivory); }

@media (max-width:700px){
  .pe-arch-choice-grid{ grid-template-columns:1fr; }
  .pe-arch-choice-card{ min-height:0; padding:28px; }
}

/* ---------- New Construction "How far along are you?" (nc-start) -
   compact, single-row selection controls, distinct from the larger
   editorial choice cards above. Numbering reuses the same subtle
   mono/brass treatment as .pe-arch-dossier-num rather than a large
   pale serif digit. ---------- */
.pe-nc-start-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px; }
.pe-nc-start-card{
  cursor:pointer; text-align:left; background:var(--ivory); border:1px solid var(--line);
  padding:20px 22px; display:flex; flex-direction:column; gap:10px;
  transition:background .25s var(--ease-4), border-color .25s var(--ease-4), color .25s var(--ease-4);
}
.pe-nc-start-card:hover, .pe-nc-start-card:focus-visible{ border-color:var(--ink); outline:none; }
.nsc-top{ display:flex; align-items:center; justify-content:space-between; }
.nsc-num{ font:11px var(--mono); color:var(--brass); letter-spacing:.08em; }
.nsc-arrow{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line); color:var(--sage); flex:none;
  display:flex; align-items:center; justify-content:center; font:13px var(--sans);
  transition:border-color .25s var(--ease-4), color .25s var(--ease-4);
}
.nsc-title{ font:400 17px var(--serif); letter-spacing:-.01em; color:var(--ink); }
.nsc-desc{ font:12px/1.5 var(--sans); color:#4a4b45; }
.pe-nc-start-card.is-selected{ background:var(--ink); border-color:var(--ink); }
.pe-nc-start-card.is-selected .nsc-num{ color:rgba(244,241,233,.5); }
.pe-nc-start-card.is-selected .nsc-arrow{ border-color:rgba(244,241,233,.5); color:var(--ivory); }
.pe-nc-start-card.is-selected .nsc-title{ color:var(--ivory); }
.pe-nc-start-card.is-selected .nsc-desc{ color:rgba(244,241,233,.78); }
@media (max-width:760px){ .pe-nc-start-grid{ grid-template-columns:1fr; } }

.pe-nc-dynamic-zone{ margin-top:56px; padding-top:36px; border-top:1px solid var(--line); }
.pe-nc-dynamic-zone .pe-headline + .pe-field{ margin-top:22px; }

/* ---------- Furniture & Decor "Show us what you're working with" ->
   AI Processing -> "Here's what we see" (fd-analyzing/fd-understanding).
   The host below just gives the EXISTING Universal AI Processing
   Experience (css/ai-processing-experience.css/.aip) a concrete pixel
   height to fill — a percentage height on .aip would not reliably
   resolve against an ancestor whose own height also comes from
   min-height rather than an explicit height (the same class of bug
   already documented/fixed for .aip-panel itself). Nothing about the
   Cinematic component's own visual design is touched here. ---------- */
.pe-fd-aip-host{ position:relative; height:min(70vh,680px); margin-top:32px; overflow:hidden; }
@media (max-width:640px){ .pe-fd-aip-host{ height:min(80vh,540px); } }

/* Observation-only findings display — a calm, static bullet list, not
   a progress checklist (unlike .pe-ai-checklist's done/current/pending
   states elsewhere), since this screen never implies work is in
   progress or that any item needs action. */
.pe-fd-cat{ margin-top:32px; }
.pe-fd-cat:first-child{ margin-top:0; }
.pe-fd-cat-title{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:12px; }
.pe-fd-cat-desc{ font:15px/1.6 var(--sans); color:var(--ink); max-width:640px; }
.pe-fd-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-width:640px; }
.pe-fd-list li{ font:14px/1.5 var(--sans); color:var(--ink); padding-left:16px; position:relative; }
.pe-fd-list li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--brass); }

/* ---------- Architecture "Tell us about your property" (arch-property-own)
   - editorial project-dossier sections, not survey-style form rows.
   Everything below is scoped under .pe-arch-po-col so it only affects
   this one screen: no shared .pe-sub/.pe-field/.pe-stage rule used by
   every other flow is touched. ---------- */
.pe-arch-po-col{ max-width:74%; }
.pe-arch-po-col > .pe-eyebrow{ margin-bottom:26px; }
.pe-arch-po-col > .pe-headline-lg{ margin-bottom:28px; }
.pe-arch-po-col .pe-sub{ margin-top:16px; max-width:640px; }

.pe-arch-dossier-section{ max-width:100%; margin-top:88px; padding-top:40px; border-top:1px solid var(--line); }
.pe-arch-dossier-section:first-of-type{ margin-top:64px; }
.pe-arch-dossier-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:28px; }
.pe-arch-dossier-num{ font:12px var(--mono); color:var(--brass); letter-spacing:.08em; }
.pe-arch-dossier-heading{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.pe-arch-dossier-section .pe-field{ max-width:520px; }
.pe-arch-dossier-section .pe-field.is-wide{ max-width:100%; }
.pe-micro{ margin-top:14px; font:12px/1.6 var(--sans); color:var(--sage); }

/* Rectangular address input - a scoped variant of .pe-field, distinct
   from the underline treatment .pe-field input uses everywhere else
   in the app, so no other screen's inputs are affected. */
.pe-field.is-boxed input{
  width:100%; border:1px solid var(--line); background:var(--ivory);
  padding:16px 18px; font:16px var(--sans);
}
.pe-field.is-boxed input:focus{ border-color:var(--ink); }

/* Single unified upload control: the dashed area IS the file input's
   label, so clicking anywhere on it opens the existing file picker
   natively (no separate button), plus drag-and-drop wired in JS onto
   the same existing handleFiles()/readFileAsDataUrl() pipeline. */
.pe-arch-upload-dossier{
  margin-top:24px; padding:56px 24px; text-align:center; border:1px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
  transition:border-color .25s, background .25s;
}
.pe-arch-upload-dossier:hover{ border-color:var(--sage); }
.pe-arch-upload-dossier.is-dragover{ border-color:var(--ink); background:var(--clay); }
.pe-arch-upload-dossier .aud-plus{ font:300 32px var(--serif); color:var(--brass); line-height:1; }
.pe-arch-upload-dossier .aud-title{ font:16px var(--serif); color:var(--ink); }
.pe-arch-upload-dossier .aud-help{ display:block; margin-top:4px; font:13px/1.5 var(--sans); color:#4a4b45; max-width:36ch; }
.pe-arch-upload-dossier .aud-hint{ font:11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sage); }
.pe-arch-upload-dossier .aud-drop{ margin-top:8px; font:12px var(--sans); color:var(--sage); }

/* ---------- Architecture "Let's understand your site" (arch-site-context)
   - property context panel + honest site-observation rows. Scoped
   under the same .pe-arch-po-col wrapper as arch-property-own. ---------- */
.pe-arch-context-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:32px; margin-top:24px; }
.pe-arch-context-visual{
  border:1px solid var(--line); background:var(--clay); padding:40px 28px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; min-height:220px;
}
.pe-arch-context-visual .acv-mark{ font:24px var(--serif); color:var(--brass); }
.pe-arch-context-visual .acv-note{ margin-top:16px; font:12px/1.6 var(--sans); color:var(--sage); max-width:32ch; }
.pe-arch-context-info{ display:flex; flex-direction:column; justify-content:center; }
.pe-arch-context-info .aci-label{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.pe-arch-context-info .aci-address{ margin-top:14px; font:400 24px/1.4 var(--serif); color:var(--ink); }
.pe-arch-context-info .aci-address.is-empty{ font:15px var(--sans); color:var(--sage); }
.pe-arch-context-info .pe-micro{ margin-top:16px; }

/* Site Intelligence accordion (five expandable report sections). Same
   accessible button+aria-expanded+hidden-panel mechanics as the site's
   existing .or-package-toggle pattern (css/main.css), reimplemented
   here with Architecture's own dossier visual language rather than
   importing marketing-page classes. Pure DOM class/attribute toggles
   in JS - no navigation, no re-render, no scroll jump. */
.pe-arch-accordion-list{ margin-top:24px; border-top:1px solid var(--line); }
.pe-arch-accordion{ border-bottom:1px solid var(--line); }
.pea-header{
  width:100%; display:flex; align-items:center; gap:20px; padding:26px 0;
  background:none; border:0; cursor:pointer; text-align:left; font:inherit;
}
.pea-num{ font:12px var(--mono); color:var(--brass); letter-spacing:.06em; flex:none; width:24px; }
.pea-heading{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }
.pea-title{ font:400 19px var(--serif); color:var(--ink); }
.pea-desc{ font:13px/1.5 var(--sans); color:var(--sage); }
.pea-status{ flex:none; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pea-icon{ flex:none; width:20px; text-align:center; font:18px var(--sans); color:var(--brass); transition:transform .3s var(--ease-4); }
.pea-header[aria-expanded="true"] .pea-icon{ transform:rotate(45deg); }
.pea-header:hover .pea-title{ color:var(--sage-deep); }
.pea-panel[hidden]{ display:none; }
.pea-panel-inner{ padding:0 0 30px 44px; }

.sic-field{ margin-top:20px; }
.sic-field:first-child{ margin-top:0; }
.sic-field-label{ display:block; font:11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:8px; }
.sic-field-text{ font:15px/1.6 var(--sans); color:var(--ink); max-width:60ch; }
.sic-field-list{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.sic-field-list li{ position:relative; padding-left:15px; font:14px/1.6 var(--sans); color:var(--ink); }
.sic-field-list li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:1px; background:var(--brass); }
.sic-empty{ font:14px/1.6 var(--sans); color:var(--sage); max-width:56ch; }

/* ---------- Architecture "How do you want to live here?" (arch-life)
   - three distinct selection languages for visual hierarchy: compact
   numbered rows (Household, single-select), taller title+desc cards
   (Everyday Life, multi-select), and the existing .pe-chip/.pe-chip-
   grid multi-select (Priorities, capped at 3) - same dark-selected/
   cream-unselected/no-checkmark language throughout. ---------- */
.pe-life-household-grid{ display:flex; flex-direction:column; margin-top:24px; border-top:1px solid var(--line); }
.pe-life-household-opt{
  display:flex; align-items:center; gap:20px; padding:20px 4px; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .25s, color .25s;
}
.pe-life-household-opt:hover{ background:var(--clay); }
.lho-num{ font:12px var(--mono); color:var(--brass); letter-spacing:.06em; flex:none; width:24px; }
.lho-label{ font:400 17px var(--serif); color:var(--ink); }
.pe-life-household-opt.is-selected{ background:var(--ink); }
.pe-life-household-opt.is-selected .lho-num{ color:rgba(244,241,233,.5); }
.pe-life-household-opt.is-selected .lho-label{ color:var(--ivory); }

.pe-life-everyday-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
.pe-life-everyday-card{
  border:1px solid var(--line); background:var(--ivory); padding:26px 22px; cursor:pointer;
  display:flex; flex-direction:column; gap:8px; min-height:120px; justify-content:center;
  transition:background .25s, border-color .25s, color .25s;
}
.pe-life-everyday-card:hover{ border-color:var(--ink); }
.lec-title{ font:400 18px var(--serif); color:var(--ink); }
.lec-desc{ font:13px/1.5 var(--sans); color:var(--sage); }
.pe-life-everyday-card.is-selected{ background:var(--ink); border-color:var(--ink); }
.pe-life-everyday-card.is-selected .lec-title{ color:var(--ivory); }
.pe-life-everyday-card.is-selected .lec-desc{ color:rgba(244,241,233,.72); }

/* Generic disabled state for the shared .pe-chip multi-select, added
   for the Priorities max-of-3 cap. No other screen sets [disabled] on
   a .pe-chip today, so this is purely additive. */
.pe-chip[disabled]{ opacity:.35; cursor:not-allowed; }

/* ---------- Architecture "What should your home include?" (arch-home-
   program) - Bedrooms/Bathrooms sit side by side on desktop as a
   compact two-column pair, distinct from the full-width Home Size and
   Home Spaces chip grids above/below it. ---------- */
.pe-hp-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; }

/* ---------- Architecture "What should your home feel like?"
   (arch-direction) - style cards reuse the existing .pe-card/.pc-*
   image-card component verbatim (same one arch-style already uses),
   only adding the max-3 "is-inactive" dim state and an explicit
   checkmark-next-to-label selected indicator; feelings reuse the
   existing .pe-chip multi-select untouched. ---------- */
/* .pe-arch-style-full is the same .pe-arch-dossier-section as every
   other section on this screen (already max-width:100% of its own
   parent) - the difference is purely structural: in the markup this
   section is rendered as a sibling OUTSIDE .pe-arch-po-col (which caps
   the rest of the screen at 74% width), so its 100% resolves against
   the full Architecture stage instead of that narrower column. */
#pe-ad-style-grid{ grid-template-columns:repeat(4,1fr); }
/* Four narrower columns can't always fit a long single-word label
   (e.g. "Contemporary", "Mediterranean") on one line at the existing
   font size - allow it to wrap mid-word here rather than clip. */
#pe-ad-style-grid .pc-name{ display:flex; align-items:baseline; gap:6px; }
#pe-ad-style-grid .pe-ad-label{ overflow-wrap:break-word; min-width:0; }
.pe-ad-style-card.is-inactive{ opacity:.4; pointer-events:none; }
/* This screen explicitly asks for no checkmarks, unlike .pe-card's
   shared is-selected default (used elsewhere, e.g. arch-style) which
   appends one via ::after - overridden here for this screen's cards
   only, since the explicit .pe-ad-check span below replaces it. */
.pe-ad-style-card.is-selected .pc-name::after{ content:none; }
/* Explicit selection indicator: a checkmark inline before the label,
   hidden unless selected, never affecting font-weight (still 400). */
.pe-ad-check{ display:none; flex:none; color:var(--brass); font-weight:400; }
.pe-ad-style-card.is-selected .pe-ad-check{ display:inline; }
/* Strengthen the selected state itself (a plain outline read as too
   subtle): a solid ink border plus a light scrim lift so the card
   reads as selected even before noticing the checkmark. */
.pe-ad-style-card.is-selected{ border-color:var(--ink); outline-width:3px; }
.pe-ad-style-card.is-selected .pc-scrim{ background:linear-gradient(180deg, rgba(10,10,8,.12) 30%, rgba(8,8,6,.88) 100%); }

@media (max-width:900px){
  #pe-ad-style-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  #pe-ad-style-grid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .pe-arch-po-col{ max-width:100%; }
}
@media (max-width:700px){
  .pe-arch-dossier-section .pe-field{ max-width:none; }
  .pe-arch-upload-dossier{ padding:40px 16px; }
  .pe-arch-context-grid{ grid-template-columns:1fr; gap:20px; }
  .pe-arch-context-visual{ min-height:0; padding:28px 20px; }
  .pea-header{ flex-wrap:wrap; row-gap:8px; gap:14px; }
  .pea-status{ order:3; width:100%; }
  .pea-panel-inner{ padding-left:0; }
  .pe-life-everyday-grid{ grid-template-columns:1fr; }
  .pe-hp-two-col{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:900px) and (min-width:701px){
  .pe-life-everyday-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Architecture "What property are you considering?"
   (arch-property-buying) - repeatable property-reference row for the
   "comparing" process: its own thin border (not .pe-field.is-boxed,
   which puts the border on the <input> itself) so the remove button
   sits inside the same bordered box as the input. ---------- */
.pe-ps-property-row{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  background:var(--ivory); padding:14px 16px;
}
.pe-ps-property-row input{ flex:1 1 auto; border:0; padding:0; background:none; font:16px var(--sans); }
.pe-ps-property-row input:focus{ outline:none; }
.pe-ps-property-remove{
  flex:none; background:none; border:0; padding:0; font:20px var(--sans);
  line-height:1; color:var(--sage); cursor:pointer;
}
.pe-ps-property-remove:hover{ color:var(--ink); }

/* New Home — "Tell us in your own words" (text + voice). The
   microphone sits inside the same field as a natural affordance,
   never a separate unrelated control. .is-listening is the only
   state change while Web Speech API capture is active (a real,
   native browser capability — feature-detected, not a hard-coded
   third-party AI provider); browsers without it simply keep the
   button disabled with an explanatory title attribute. */
.pe-voice-field{ position:relative; max-width:680px; }
.pe-voice-field textarea{
  width:100%; min-height:96px; resize:vertical; border:1px solid var(--line); background:var(--ivory);
  padding:14px 52px 14px 16px; font:15px/1.6 var(--sans); color:var(--ink); transition:border-color .3s var(--ease-3);
}
.pe-voice-field textarea:focus{ border-color:var(--ink); outline:none; }
.pe-voice-mic{
  position:absolute; right:10px; top:10px; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--ivory); color:var(--sage); cursor:pointer; font-size:14px;
  transition:border-color .25s, color .25s, background .25s;
}
.pe-voice-mic:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.pe-voice-mic:disabled{ opacity:.4; cursor:not-allowed; }
.pe-voice-mic.is-listening{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pe-voice-hint{ margin-top:8px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }

/* New Home — balanced two-column composition (Property + Home,
   Vision + Inspiration, Spaces). Reuses the EXISTING .pe-dash-grid/
   .pe-dash-panel component (a 1px hairline grid on var(--line) with
   two ivory panels, already used by the Client Portal's own project
   dashboard) rather than a new bordered-card primitive — only the
   panel-internal heading treatment (.pe-panel-title/.pe-panel-sub) is
   new, since .pe-dash-panel's own h4 is a small mono label, not the
   serif section title this composition calls for. */
.pe-panel-title{ font:400 24px var(--serif); letter-spacing:-.01em; color:var(--ink); }
.pe-panel-sub{ margin-top:4px; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
/* .pe-dash-grid already stacks to 1 column at max-width:760px (its
   own base rule). Above that, the two columns are equal and may shrink
   below their content's min width (minmax(0,1fr)) — plain 1fr let a wide
   panel (New Home's Home Profile steppers/toggles, the Spaces list) push
   the grid past the viewport at tablet widths. In a narrow two-column
   panel the stepper and yes/no grids use one column, as they already do
   below 640px. */
.pe-dash-grid.nh-two-col{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:760px){ .pe-dash-grid.nh-two-col{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:1100px){ .nh-two-col .pe-stepper-grid, .nh-two-col .pe-toggle-grid{ grid-template-columns:1fr; } }

/* New Home — Spaces screen breathing room (this round's explicit
   "do not over-compact" correction): more generous chip padding/gap
   than the app-wide default .pe-chip, so the suggested-space cells
   read as comfortable, evenly-spaced cards rather than squeezed
   chips, without touching the shared .pe-chip used everywhere else
   (room-selection screens on other project types, etc). */
.pe-chip-grid.is-spacious{ gap:10px; }
.pe-chip-grid.is-spacious .pe-chip{ padding:16px 22px; }

/* New Home — Spaces screen: a real CSS grid of EQUAL-size cells,
   replacing the old flex-wrap .pe-chip row whose width followed each
   label's own text length ("Kitchen" narrow, "Primary Bedroom" wide),
   which read as uneven/improvised. Every cell is the same width and
   height regardless of label length; a long label wraps inside its
   own cell rather than stretching it. Reuses the same visual language
   as .pe-chip (border/selected-fill) — a new layout, not a new look. */
.nh-space-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
}
.nh-space-cell{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:64px; padding:12px 10px; border:1px solid var(--line); cursor:pointer;
  font:12px var(--sans); line-height:1.3; color:var(--ink);
  transition:border-color .25s var(--ease-3), background .25s var(--ease-3), color .25s var(--ease-3);
}
.nh-space-cell:hover{ border-color:var(--ink); }
.nh-space-cell.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.nh-space-more-toggle{ grid-column:1 / -1; }
@media (max-width:900px){ .nh-space-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .nh-space-grid{ grid-template-columns:repeat(2,1fr); } }

/* Your Spaces rows (explicit Edit/Save/Cancel model) — collapsed row
   has a consistent min-height and IMPORTANT/EDIT/REMOVE always in the
   same position regardless of name length; the optional "Selected:
   ..." summary is a quiet secondary line, never shown when empty. */
.nh-space-row2-main{ min-height:56px; padding:14px 8px; }
.nh-space-row2-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.nh-space-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.nh-space-name:hover{ text-decoration:underline; text-underline-offset:3px; }
.nh-space-summary{ margin:0; font:12px var(--sans); color:var(--sage); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nh-space-row2-main .tr-opts{ flex:none; }
.nh-space-row2-main .tr-opts button:disabled{ opacity:.35; cursor:not-allowed; }
.nh-space-row2.is-editing .nh-space-row2-main{ border-bottom:none; }
.pe-space-detail{ padding:0 8px 20px; border:1px solid var(--line); border-top:none; }

/* New Home — AI Project Understanding / Project Brief: calm, spaced-
   out summary rows (no Edit controls — editing happens by navigating
   back through the persistent workflow steps) plus the Project
   Planning section (Estimate + Timeline). Reuses .pe-panel-title/
   .pe-sub/.pe-btn verbatim; only the row/timeline layout is new. */
.nh-summary-list{ display:flex; flex-direction:column; }
.nh-summary-row{ padding:20px 0; border-bottom:1px solid var(--line); display:flex; gap:32px; }
.nh-summary-row:first-child{ border-top:1px solid var(--line); }
.nh-summary-row-title{
  flex:0 0 180px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage);
}
.nh-summary-row-value{ flex:1; min-width:0; font:15px/1.6 var(--sans); color:var(--ink); }
.nh-summary-row-value p{ margin:0; }
@media (max-width:640px){
  .nh-summary-row{ flex-direction:column; gap:6px; }
  .nh-summary-row-title{ flex:none; }
}

.nh-timeline-list{ border-top:1px solid var(--line); }
.nh-timeline-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line); font:14px var(--sans); color:var(--ink);
}
.nh-timeline-stage{ flex:1; }
.nh-timeline-duration{ flex:none; font:12px var(--mono); color:var(--sage); text-transform:uppercase; letter-spacing:.05em; }

/* New Home — AI Understanding screen (Budget + AI Experience
   addendum). Reuses existing tokens/typography only — no new visual
   language. .pe-ai-block/.pe-ai-grid are a compact input-summary
   card grid; .pe-ai-checklist is a calm, static (never a fabricated
   animated progress bar) status list; .pe-concept-preview-* are
   clearly-labeled structural placeholders for the future 3-concept
   output, never real or implied-real images. */
.pe-ai-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); }
.pe-ai-block{ background:var(--ivory); padding:20px; }
.pe-ai-block-title{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); margin-bottom:10px; }

.pe-ai-checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; max-width:520px; }
.pe-ai-checklist li{ display:flex; align-items:center; gap:12px; font:14px var(--sans); color:var(--ink); }
.pe-ai-checklist li .ai-mark{ flex:none; width:18px; text-align:center; font:13px var(--mono); }
.pe-ai-checklist li.is-done .ai-mark{ color:var(--ink); }
.pe-ai-checklist li.is-current{ color:var(--ink); font-weight:500; }
.pe-ai-checklist li.is-current .ai-mark{ color:var(--brass); }
.pe-ai-checklist li.is-pending{ color:var(--sage); }
.pe-ai-checklist li.is-pending .ai-mark{ color:var(--line); }

.pe-concept-preview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pe-concept-preview{ border:1px solid var(--line); }
.pe-concept-preview-visual{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:var(--clay);
  font:10px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage);
}
.pe-concept-preview-views{ display:flex; flex-wrap:wrap; gap:6px; padding:12px; border-top:1px solid var(--line); }
.pe-concept-preview-views span{ font:9px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); border:1px solid var(--line); padding:4px 8px; }
@media (max-width:760px){ .pe-concept-preview-grid{ grid-template-columns:1fr; } }

/* New Home — Spaces list compaction: adjacent rows collapse their
   shared border into one line instead of a visible double-border
   seam, so the list reads as one clean table rather than a stack of
   separate boxes. */
.nh-space-row2 + .nh-space-row2{ margin-top:-1px; }

/* ---------- AI recommendation callout (Style Assistant / Design
   Direction "Recommended direction: ...") ---------- */
.pe-ai-suggestion{
  margin-top:32px; padding:22px 24px; border:1px solid var(--ink); max-width:680px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--ivory);
}
.pe-ai-suggestion p{ font:14px/1.6 var(--sans); margin:0; }
.pe-ai-suggestion b{ color:var(--ink); }
@media (max-width:640px){ .pe-ai-suggestion{ flex-direction:column; align-items:flex-start; } }

/* ---------- zoning / site-constraint rows (New Construction) ---------- */
.pe-zoning-grid{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:44px; max-width:820px; }
.pe-zoning-row{
  display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:14px;
  border:1px solid var(--line); padding:12px 16px;
}
.pe-zoning-row label{ font:11px var(--mono); text-transform:uppercase; letter-spacing:.04em; color:var(--sage); }
.pe-zoning-row input{
  border:1px solid var(--line); background:none; padding:9px 12px; font:13px var(--sans); transition:border-color .3s;
}
.pe-zoning-row input:focus{ border-color:var(--ink); }
.pe-zoning-row input[disabled]{ opacity:.4; background:var(--stone); }
.pe-zoning-row button{
  border:1px solid var(--line); background:none; padding:8px 14px; font:9px var(--mono); text-transform:uppercase;
  letter-spacing:.04em; cursor:pointer; color:var(--ink); white-space:nowrap; transition:background .25s, color .25s;
}
.pe-zoning-row button.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
@media (max-width:760px){ .pe-zoning-row{ grid-template-columns:1fr; } }

/* ---------- document/reference category tag on an upload thumb ---------- */
.pe-upload-thumb .ut-tag{
  position:absolute; left:4px; top:4px; font:8px var(--mono); text-transform:uppercase; letter-spacing:.03em;
  padding:3px 6px; background:rgba(27,28,25,.78); color:var(--ivory);
}

/* ---------- professional-services vendor matching (Architecture +
   New Construction) — distinct from the retail/product .pe-vendor-grid
   used by the Project Summary's supplier list. ---------- */
.pe-pro-vendor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:36px; }
.pe-pro-vendor-card{
  border:1px solid var(--line); display:flex; flex-direction:column; transition:border-color .25s;
}
.pe-pro-vendor-card.is-selected{ border-color:var(--ink); outline:1px solid var(--ink); outline-offset:-2px; }
.pe-pro-vendor-card .pv-figure{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--clay); }
.pe-pro-vendor-card .pv-figure img{ width:100%; height:100%; object-fit:cover; font-size:0; }
.pe-pro-vendor-card .pv-verified{
  position:absolute; right:10px; top:10px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.05em;
  padding:5px 10px; background:var(--ink); color:var(--ivory);
}
.pe-pro-vendor-card .pv-body{ padding:20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pe-pro-vendor-card .pv-category{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--sage); }
.pe-pro-vendor-card .pv-name{ font:400 21px var(--serif); letter-spacing:-.02em; margin:2px 0; }
.pe-pro-vendor-card .pv-location{ font:11px var(--sans); color:#4a4b45; }
.pe-pro-vendor-card .pv-specialties{ margin-top:8px; font:12px/1.6 var(--sans); color:#4a4b45; }
.pe-pro-vendor-card .pv-stats{ display:flex; gap:14px; margin-top:10px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.04em; color:var(--sage); flex-wrap:wrap; }
.pe-pro-vendor-card .pv-fee{ margin-top:8px; font:12px var(--sans); color:var(--ink); }
.pe-pro-vendor-card .pv-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 22px 20px; }
.pe-pro-vendor-card .pv-select{ display:flex; align-items:center; gap:8px; font:11px var(--sans); cursor:pointer; }
.pe-pro-vendor-card.is-compact{ flex-direction:row; align-items:center; }
.pe-pro-vendor-card.is-compact .pv-figure{ width:88px; aspect-ratio:1/1; flex:none; }
.pe-pro-vendor-card.is-compact .pv-body{ padding:12px 18px; gap:2px; }
.pe-pro-vendor-card.is-compact .pv-name{ font-size:16px; }
@media (max-width:760px){ .pe-pro-vendor-grid{ grid-template-columns:1fr; } }

/* ---------- vendor profile portfolio strip ---------- */
.pe-pro-vendor-portfolio{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:32px; }
.pe-pro-vendor-portfolio img{ width:100%; aspect-ratio:4/3; object-fit:cover; font-size:0; background:var(--clay); }
@media (max-width:760px){ .pe-pro-vendor-portfolio{ grid-template-columns:repeat(2,1fr); } }

/* ---------- vendor comparison table ---------- */
.pe-vendor-compare-table{ margin-top:40px; overflow-x:auto; }
.pe-vc-row{
  display:grid; grid-template-columns:180px repeat(var(--pe-vc-cols,2), minmax(180px,1fr)); border-bottom:1px solid var(--line);
}
.pe-vc-row.pe-vc-head{ border-bottom:1px solid var(--ink); }
.pe-vc-cell{ padding:16px 18px; font:12px/1.5 var(--sans); color:#4a4b45; }
.pe-vc-cell.pe-vc-label{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.05em; color:var(--sage); }
.pe-vc-head .pe-vc-cell img{ width:100%; aspect-ratio:4/3; object-fit:cover; font-size:0; margin-bottom:10px; background:var(--clay); }
.pe-vc-head .pe-vc-cell b{ display:block; font:400 15px var(--serif); color:var(--ink); }

/* ---------- AI Architectural Concept detail block (Architecture flow) ---------- */
.pe-concept-detail{ margin-top:40px; }

/* ---------- New Home — "Choose Your Support" (nh-support) ----------
   Deliberately its own small component family, not the marketing
   site's .or-package-* (that lives in css/main.css, a separate design
   system for the static Owner's Representation page). Built from this
   engine's own tokens (var(--ink)/var(--sage)/var(--line)/var(--serif)/
   var(--sans)/var(--mono)/var(--ivory)/var(--brass)) so it reads as
   the same premium 2S language, adapted from an informational card
   into a selectable one — subtle border/dark-fill selected state
   (.pe-chip-card's own pattern), not a generic SaaS radio button. */
.nh-support-context{ margin-top:40px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:420px; }
.nh-support-context-label{ font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--sage); }
.nh-support-context-name{ margin-top:8px; font:400 20px var(--serif); letter-spacing:-.01em; color:var(--ink); }
.nh-support-context-meta{ margin-top:4px; font:12px var(--sans); color:var(--sage); }

.nh-service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:40px; }
.nh-service-card{
  background:var(--ivory); padding:26px 22px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column;
  transition:background .25s var(--ease-3), color .25s var(--ease-3);
}
.nh-service-card:hover{ background:#efece2; }
.nh-service-card.is-selected{ background:var(--ink); color:var(--ivory); }
.nh-service-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:18px; }
.nh-service-index{ font:10px var(--mono); letter-spacing:.1em; color:var(--sage); }
.nh-service-card.is-selected .nh-service-index{ color:rgba(244,241,233,.6); }
.nh-service-recommended{ font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--brass); border:1px solid var(--brass); padding:4px 8px; }
.nh-service-card.is-selected .nh-service-recommended{ color:var(--ivory); border-color:var(--ivory); }
.nh-service-name{ margin-top:18px; font:400 22px/1.15 var(--serif); letter-spacing:-.02em; }
.nh-service-price{ margin-top:12px; font:400 16px/1.35 var(--sans); }
.nh-service-pricenote{ display:block; margin-top:6px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.nh-service-card.is-selected .nh-service-pricenote{ color:rgba(244,241,233,.6); }
.nh-service-line{ margin-top:14px; font:13px/1.55 var(--sans); }
.nh-service-card:not(.is-selected) .nh-service-line{ color:#4a4b45; }
.nh-service-sublabel{ display:block; margin-top:20px; font:9px var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--sage); }
.nh-service-card.is-selected .nh-service-sublabel{ color:rgba(244,241,233,.6); }
.nh-service-includes{ margin-top:10px; list-style:none; display:flex; flex-direction:column; gap:6px; }
.nh-service-includes li{ position:relative; padding-left:14px; font:12.5px/1.5 var(--sans); }
.nh-service-card:not(.is-selected) .nh-service-includes li{ color:#33342f; }
.nh-service-includes li::before{ content:''; position:absolute; left:0; top:7px; width:5px; height:1px; background:var(--brass); }
.nh-service-card.is-selected .nh-service-includes li::before{ background:var(--ivory); }
.nh-service-bestfor{ margin-top:14px; flex:1; }
.nh-service-bestfor p{ margin-top:8px; font:12px/1.55 var(--sans); }
.nh-service-card:not(.is-selected) .nh-service-bestfor p{ color:var(--sage); }
.nh-service-card.is-selected .nh-service-bestfor p{ color:rgba(244,241,233,.78); }
.nh-service-select{ margin-top:20px; width:100%; justify-content:center; }
.nh-service-card.is-selected .nh-service-select{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
@media (max-width:900px){ .nh-service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .nh-service-grid{ grid-template-columns:1fr; } }

/* ---- Vision & Inspiration: Project Understanding (js/project-understanding.js) ----
   One input (text + microphone + Send) and ONE full-width understanding
   block below the direction grid. No chat bubbles, no tray, no Edit. */
.pu-composer{ margin-top:16px; border:1px solid var(--line); background:var(--ivory); padding:12px 10px 10px 16px; display:grid; gap:6px; transition:border-color .3s var(--ease-3); }
.pu-composer:focus-within{ border-color:var(--ink); }
.pu-composer textarea{ width:100%; min-height:72px; max-height:220px; resize:vertical; border:none; background:transparent; padding:2px 6px 0 0;
  font:15px/1.5 var(--sans); color:var(--ink); box-sizing:border-box; }
.pu-composer textarea:focus{ outline:none; }
/* The placeholder is a hint for an empty field only: it goes away as soon as the field is focused or used. */
.pu-composer textarea::placeholder{ color:var(--sage); opacity:1; }
.pu-composer textarea:focus::placeholder{ color:transparent; }
.pu-composer-bar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.pu-icon-btn{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:transparent; color:var(--sage);
  cursor:pointer; border-radius:50%; transition:border-color .25s, color .25s, background .25s; }
.pu-icon-btn:hover:not(:disabled){ border-color:var(--ink); color:var(--ink); }
.pu-icon-btn:disabled{ opacity:.4; cursor:not-allowed; }
.pu-mic.is-listening{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pu-send{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pu-send:hover:not(:disabled){ color:var(--ivory); opacity:.88; }
.pu-icon-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* Vision & Inspiration: inspiration (02) above the Client's words (03) at every width. */
.pe-dash-grid.rv-stack{ grid-template-columns:1fr; }
.pu-analyze-area{ margin-top:14px; display:grid; gap:8px; justify-items:start; }
.pu-analyze-area[hidden]{ display:none; }
.pu-analyze{ min-height:44px; }
/* Analyzing: the loading state sits on the button itself — kept readable (not the faded generic disabled look). */
.pu-analyze.is-busy[disabled]{ opacity:1; cursor:progress; }
.pe-btn.is-primary .pu-spinner{ border-color:rgba(255,255,255,.35); border-top-color:var(--ivory); }
.pu-words-status{ margin-top:10px; }
.pu-words-status[hidden]{ display:none; }
.pu-status{ display:flex; align-items:center; gap:8px; }
.pu-spinner{ width:12px; height:12px; flex:0 0 auto; border:1.5px solid var(--line); border-top-color:var(--ink); border-radius:50%; animation:pu-spin .9s linear infinite; }
@keyframes pu-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .pu-spinner{ animation:none; } }
.pu-send:disabled{ opacity:.45; cursor:progress; }
/* "Show us what you like": the composer's action as a labeled primary button ("Analyze" / "Analyzing…") at the bar's height. */
.pu-analyze{ min-height:44px; padding:0 22px; flex:none; justify-content:center; }
.pu-analyze[aria-busy="true"]{ opacity:.6; cursor:progress; }
/* Space Intelligence V1 (js/space-intelligence.js) — inside each Existing Space card. */
.si-room{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:10px; justify-items:start; min-width:0; }
.si-room[hidden]{ display:none; }
.si-result{ width:100%; display:grid; gap:12px; min-width:0; }
.si-title{ font:10px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0; }
.si-summary{ font:14px/1.55 var(--sans); color:var(--ink); margin:0; max-width:70ch; }
.si-sections{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px 24px; }
.si-sections dd{ font-size:14px; }
.rv-actions{ margin-top:24px; }
.rv-actions .pe-btn{ min-height:44px; }
.pu-link:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.pu-block{ margin-top:36px; border-top:1px solid var(--line); padding-top:24px; display:grid; gap:16px; min-width:0; }
.pu-block[hidden]{ display:none; }
.pu-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pu-notice, .pu-status, .pu-note, .pu-error{ font:13px/1.5 var(--sans); color:var(--sage); margin:0; }
.pu-notice{ color:var(--ink); }
.pu-error{ color:#8a3a2c; }
.pu-link{ background:none; border:none; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer; }
.pu-sections{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px 28px; margin:0; }
.pu-sections > div{ min-width:0; display:grid; gap:6px; align-content:start; }
.pu-sections dt{ font:10px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sage); }
.pu-sections dd{ margin:0; font:15px/1.5 var(--sans); color:var(--ink); overflow-wrap:anywhere; }
.pu-sections ul{ margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.pu-soft{ font-size:13px; color:var(--sage); }
/* Style direction: the Client's selected directions, their "your selection"
   label on its own line under them, then (spaced) what the images lean to.
   All in normal flow — the cell, and so its grid row, takes its natural
   height at any width; the next row always starts below it. */
.pu-sections .pu-selection > .pu-tag{ display:block; margin:4px 0 0; line-height:1.4; white-space:normal; }
.pu-sections .pu-selection + li{ margin-top:10px; }
.pu-tag{ font:10px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--sage); margin-left:4px; white-space:nowrap; display:inline-block; }
.pu-foot{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px; }
.pu-foot .pu-note{ flex:1 1 280px; }
/* "Show us what you like": ONE composer — attached photos, the message, attach · speak · send. */
.pu-attachments{ display:flex; gap:8px; flex-wrap:wrap; padding:2px 6px 6px 0; }
.pu-attachments[hidden], .pu-shared[hidden]{ display:none; }
.pu-thumb{ position:relative; width:68px; height:68px; flex:0 0 auto; border:1px solid var(--line); background:var(--ivory); overflow:hidden; }
.pu-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pu-thumb.is-uploading img{ opacity:.45; }
.pu-thumb.is-failed{ border-color:#8a3a2c; cursor:pointer; }
.pu-thumb .ut-tag{ position:absolute; left:0; right:0; bottom:0; font:9px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); background:rgba(241,236,226,.88); padding:3px 4px; }
.pu-thumb-remove{ position:absolute; top:3px; right:3px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; border:none; background:rgba(27,28,25,.72); color:var(--ivory); font:14px/1 var(--sans); cursor:pointer; padding:0; }
.pu-thumb-remove:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.pu-attach, .pu-camera{ position:relative; cursor:pointer; }
.pu-attach .pu-file, .pu-camera .pu-file{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.pu-attach:focus-within, .pu-camera:focus-within{ outline:2px solid var(--ink); outline-offset:2px; }
.pu-bar-space{ flex:1 1 auto; }
.pu-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pu-shared{ margin-top:16px; display:grid; gap:8px; }
.pu-shared-h{ margin:0; font:10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sage); }
.pu-shared-row{ display:flex; gap:8px; flex-wrap:wrap; }
/* "Here's what we understood": a small section label; ONE paragraph carries the emphasis. */
.pu-understood-h{ margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.pu-narrative{ margin:0; font:400 19px/1.62 var(--serif); color:var(--ink); max-width:none; text-wrap:pretty; }   /* the full content width, like the sections above */
.pu-rounds{ margin-top:10px; }
/* Existing Space (js/existing-space.js): one composer per space; its summary sits inside the space's card. */
.es-understanding .pu-block{ margin-top:24px; }
.pu-rounds[hidden], .pu-composer[hidden]{ display:none; }
@media (max-width:560px){ .pu-narrative{ font-size:17px; line-height:1.58; } }
@media (max-width:560px){
  .pu-sections{ grid-template-columns:1fr; gap:16px; }
  .pu-foot .pe-btn{ width:100%; }
}

/* =========================================================
   Design Concept workspace (js/concept-workspace.js) — one room, one
   selected concept: header, concept tabs, identity, ONE visual stage
   with a photo strip (Concept / Existing-Concept / 360°), design summary,
   what changes, products & services placeholder. Existing tokens only.
   ========================================================= */
.cw{ display:grid; gap:0; min-width:0; }
.cw-rooms{ display:flex; gap:8px; margin:0 0 28px; overflow-x:auto; scrollbar-width:none; }
.cw-rooms::-webkit-scrollbar{ display:none; }
.cw-room{ font:11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sage); background:none; border:1px solid var(--line); padding:10px 14px; white-space:nowrap; cursor:pointer; }
.cw-room.is-active{ color:var(--ink); border-color:var(--ink); }
.cw-crumb{ font:11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); }
.cw-crumb span{ margin:0 6px; color:var(--line); }
.cw-demo{ justify-self:start; margin:12px 0 0; font:10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--brass); border:1px solid var(--brass); padding:6px 8px; }
.cw-title{ font:400 clamp(34px,4.2vw,58px)/1.04 var(--serif); letter-spacing:-.03em; margin:14px 0 0; text-wrap:balance; }
.cw-lede{ font:15px/1.6 var(--sans); color:var(--ink); max-width:none; margin:12px 0 0; }   /* the full content width, like the sections above */
/* The concept selector: Concept 1 · 2 · 3 as one segmented control — the concept being viewed is filled (ink), the
   others outlined, so which one is shown is clear at a glance (never a hairline alone). */
.cw-tabs{ display:inline-flex; max-width:100%; gap:0; margin-top:26px; border:1px solid var(--ink); }
.cw-tab{ flex:1 1 0; min-width:132px; display:grid; justify-items:center; align-content:center; gap:4px; padding:14px 22px; margin:0; background:transparent; border:0; border-right:1px solid var(--ink);
  font:12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); cursor:pointer; text-align:center; transition:background .2s var(--ease-3), color .2s var(--ease-3); }
.cw-tab:last-child{ border-right:0; }
.cw-tab:not(.is-active):hover{ background:rgba(27,28,25,.06); }
.cw-tab.is-active{ background:var(--ink); color:var(--ivory); cursor:default; }
.cw-tab.is-empty{ color:#9a9d93; }
.cw-tab-note{ font:10px/1 var(--mono); letter-spacing:.08em; color:#9a9d93; text-transform:none; }
.cw-tab.is-active .cw-tab-note{ color:rgba(244,241,233,.72); }
.cw-tab:focus-visible, .cw-360:focus-visible, .cw-thumb:focus-visible, .cw-room:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.cw-identity{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:32px; row-gap:8px; margin-top:22px; }
.cw-identity > *{ grid-column:1; }
.cw-identity > .cw-choose{ grid-column:2; grid-row:1 / span 3; align-self:end; margin-top:0; }
.cw-kicker{ font:11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); }
.cw-name{ font:400 clamp(28px,3.1vw,42px)/1.1 var(--serif); letter-spacing:-.02em; margin:0; text-wrap:balance; }
.cw-name.is-pending{ color:var(--sage); }
.cw-desc{ font:16px/1.6 var(--sans); color:var(--ink); max-width:none; margin:0; }
.cw-choose{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:6px; }
.cw-chosen{ font:13px/1.4 var(--sans); color:var(--ink); }

/* the workspace: media (stage + strip + controls) beside the design summary */
.cw-workspace{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr); gap:28px 44px; align-items:start; margin-top:26px; }
.cw-media{ display:grid; gap:12px; min-width:0; }
/* view controls: overlaid INSIDE the stage, along its top — Existing left · Compare centered · Concept right */
.cw-stage-media{ position:absolute; inset:0; }
.cw-viewrow{ position:absolute; top:14px; left:14px; right:14px; z-index:6; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; pointer-events:none; }
.cw-viewrow > button{ pointer-events:auto; }
.cw-viewrow > [data-cw-mode="existing"]{ justify-self:start; }
.cw-viewrow > [data-cw-mode="compare"]{ justify-self:center; }
.cw-viewrow > [data-cw-mode="concept"]{ justify-self:end; }
.cw-view-btn{ font:10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; background:none; color:var(--ink); border:1px solid var(--ink); padding:12px 16px; min-height:40px; cursor:pointer; }
.cw-view-btn[aria-pressed="true"]{ background:var(--ink); color:var(--ivory); }
.cw-view-btn:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.cw-viewrow .cw-view-btn, .cw-viewrow .cw-compare{ background:rgba(244,241,233,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.cw-viewrow [aria-pressed="true"]{ background:var(--ink); color:var(--ivory); }
/* the controls already name each side: no second Existing / Concept label in the stage (fullscreen keeps its own) */
.cw-stage .pe-ba-tag{ display:none; }
.cw-stage .cw-empty{ padding-top:78px; }
.cw-extra{ display:flex; align-items:center; gap:10px; }
/* Compare: the split view (both images) — a separate action from Existing / Concept. */
.cw-compare{ display:inline-flex; align-items:center; gap:9px; font:10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; background:none; color:var(--ink); border:1px solid var(--ink); padding:12px 15px; min-height:40px; cursor:pointer; }
.cw-compare-icon{ flex:0 0 auto; display:block; }
.cw-compare[aria-pressed="true"]{ background:var(--ink); color:var(--ivory); }
.cw-compare:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.cw-360{ font:10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; background:none; color:var(--sage); border:1px solid var(--line); padding:12px 14px; min-height:40px; cursor:pointer; }
.cw-360[aria-pressed="true"]{ color:var(--ink); border-color:var(--ink); }
/* One stable height whatever the image: portrait, landscape or wide are all shown whole (contain). */
.cw-stage{ position:relative; height:440px; background:var(--stone); overflow:hidden; }
.cw-stage .pe-baslider{ position:absolute; inset:0; }
.cw-stage .pe-ba-media img, .cw-figure img{ object-fit:contain; }
.cw-figure{ position:absolute; inset:0; margin:0; }
.cw-figure img{ position:absolute; inset:0; width:100%; height:100%; }
.cw-figure.is-muted img{ opacity:.55; filter:saturate(.7); }
.cw-figure .cw-expand{ right:14px; bottom:14px; }
.cw-note{ position:absolute; left:18px; right:18px; bottom:18px; margin:0; font:13px/1.5 var(--sans); color:var(--ink); background:rgba(244,241,233,.94); padding:12px 14px; max-width:46ch; }
.cw-empty{ position:absolute; inset:0; display:grid; align-content:center; justify-items:start; gap:10px; padding:clamp(24px,6vw,72px); }
/* View 360: the coverage + capture guide fills the SAME stage, below the view controls (the stage keeps its height). */
.cw-r360{ position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; padding:78px clamp(18px,3.4vw,36px) 18px;
  background:repeating-radial-gradient(circle at 50% 120%, transparent 0 46px, rgba(100,112,93,.12) 46px 47px), var(--stone); }
.cw-r360-body{ flex:1 1 auto; min-height:0; overflow-y:auto; display:grid; align-content:start; gap:10px; max-width:64ch; padding-right:4px; }
.cw-r360-head{ display:grid; gap:6px; }
.cw-r360-title{ font:400 clamp(22px,2.3vw,28px)/1.15 var(--serif); letter-spacing:-.01em; margin:0; text-wrap:balance; }
.cw-r360-text{ font:14px/1.55 var(--sans); color:var(--ink); margin:0; max-width:58ch; }
.cw-r360-meter{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin:2px 0 0; font:11px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.cw-r360-bar{ flex:0 0 120px; height:3px; background:rgba(27,28,25,.14); }
.cw-r360-bar i{ display:block; height:100%; background:var(--ink); }
.cw-r360-checks{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px; font:12.5px/1.4 var(--sans); }
.cw-r360-checks li{ display:flex; align-items:center; gap:8px; }
.cw-r360-checks li::before{ content:""; flex:0 0 auto; width:8px; height:8px; border:1px solid var(--ink); }
.cw-r360-checks li.is-done::before{ background:var(--ink); }
.cw-r360-checks li.is-open{ color:var(--sage); }
.cw-r360-checks li.is-open::before{ border-color:var(--sage); }
.cw-r360-views{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:0; }
.cw-r360-views li{ display:grid; grid-template-columns:minmax(128px,.42fr) minmax(0,1fr); gap:4px 16px; align-items:baseline; border-top:1px solid rgba(27,28,25,.14); padding:9px 0; }
.cw-r360-view-name{ font:10.5px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.cw-r360-view-how{ font:13.5px/1.5 var(--sans); color:var(--ink); }
.cw-r360-views li.is-done .cw-r360-view-how{ color:var(--sage); }
.cw-r360-guide{ font:13.5px/1.5 var(--sans); margin:0; border-left:2px solid var(--ink); padding-left:12px; max-width:58ch; }
.cw-r360-status{ display:flex; align-items:center; gap:8px; font:13px/1.5 var(--sans); margin:0; }
.cw-r360-error{ font:13px/1.5 var(--sans); color:#8a3b2a; margin:0; }
.cw-r360-actions{ flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cw-r360-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; font:10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:rgba(244,241,233,.9); border:1px solid var(--ink); padding:12px 16px; min-height:40px; cursor:pointer; }
.cw-r360-btn.is-primary{ background:var(--ink); color:var(--ivory); }
.cw-r360-btn input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cw-r360-btn:focus-visible, .cw-r360-btn:focus-within{ outline:1px solid var(--ink); outline-offset:3px; }
.cw-r360-btn.is-disabled, .cw-r360-btn:disabled{ opacity:.45; cursor:not-allowed; }
.cw-r360-note{ flex:1 1 100%; font:12.5px/1.45 var(--sans); color:var(--sage); margin:0; }
.cw-r360-progress{ width:min(260px,100%); height:3px; background:rgba(27,28,25,.14); overflow:hidden; }
.cw-r360-progress i{ display:block; width:35%; height:100%; background:var(--ink); animation:cw-r360-progress 1.6s ease-in-out infinite; }
@keyframes cw-r360-progress{ from{ transform:translateX(-100%); } to{ transform:translateX(290%); } }
@media (prefers-reduced-motion:reduce){ .cw-r360-progress i{ animation:none; width:100%; opacity:.4; } }
.cw-r360-viewer{ flex:1 1 auto; min-height:0; display:grid; place-content:center; justify-items:center; gap:8px; padding:16px; background:var(--ink); color:var(--ivory); text-align:center; }
.cw-r360-viewer .cw-label{ color:var(--clay); }
.cw-r360-ref{ font:11px/1.4 var(--mono); color:var(--ivory); overflow-wrap:anywhere; max-width:48ch; }
.cw-empty-title{ font:400 clamp(22px,2.4vw,30px)/1.2 var(--serif); margin:0; max-width:24ch; }
.cw-empty-text{ font:14px/1.6 var(--sans); color:var(--ink); margin:0; max-width:52ch; }
.cw-thumbs{ display:flex; gap:10px; overflow-x:auto; padding:2px 0 6px; scroll-snap-type:x proximity; }
.cw-thumb{ position:relative; flex:0 0 auto; width:78px; height:78px; padding:0; border:1px solid var(--line); background:var(--stone); cursor:pointer; scroll-snap-align:start; overflow:hidden; }
.cw-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cw-thumb.is-active{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.cw-thumb.is-pending img{ opacity:.55; }
.cw-thumb-label{ position:absolute; left:0; right:0; bottom:0; font:9.5px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:rgba(244,241,233,.88); padding:5px 6px; text-align:left; }
/* One room, several viewpoints: the selected viewpoint (its name + Space Intelligence's own words) and what the strip is. */
.cw-viewpoint{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0; min-height:1.5em; }
.cw-viewpoint-name{ font:11px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.cw-viewpoint-desc{ font:13px/1.5 var(--sans); color:var(--sage); }
.cw-views-h{ margin:0; font:12px/1.5 var(--sans); color:var(--sage); }
/* The Design Concept page's background image job, as the Client sees it (js/concept-workspace.js): passive only. */
.cw-empty-text .pu-spinner{ display:inline-block; vertical-align:-1px; margin-right:8px; }
.cw-image-error{ color:#8a3a2c; }   /* the same error colour as .pu-error */

/* summary / changes / products */
.cw-section{ margin-top:56px; display:grid; gap:18px; min-width:0; }
.cw-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; }
.cw-h2{ font:400 clamp(24px,2.4vw,32px)/1.15 var(--serif); letter-spacing:-.015em; margin:0; }
.cw-label{ font:10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); margin:0; }
.cw-value{ font:15px/1.5 var(--sans); color:var(--ink); margin:0; }
.cw-soft{ font:13px/1.5 var(--sans); color:var(--sage); margin:0; }
.cw-aside{ display:grid; gap:14px; align-content:start; min-width:0; border-left:1px solid var(--line); padding-left:32px; }
.cw-aside-h{ font:400 22px/1.2 var(--serif); letter-spacing:-.01em; margin:0; }
.cw-summary{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.cw-cell{ display:grid; gap:7px; align-content:start; border-top:1px solid var(--line); padding-top:12px; min-width:0; }
.cw-aside .cw-value{ font-size:14px; }
.cw-aside .cw-palette, .cw-aside .cw-list{ gap:5px; font-size:13.5px; }
.cw-palette, .cw-list{ list-style:none; margin:0; padding:0; display:grid; gap:7px; font:14px/1.45 var(--sans); }
.cw-palette li{ display:flex; align-items:center; gap:10px; }
.cw-swatch{ flex:0 0 auto; width:18px; height:18px; border:1px solid rgba(27,28,25,.18); background:var(--clay); }
.cw-legend{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.cw-badge{ display:inline-block; font:9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:6px 8px; border:1px solid var(--line); color:var(--sage); white-space:nowrap; }
.cw-badge.is-replaced{ background:var(--ink); border-color:var(--ink); color:var(--ivory); }
.cw-badge.is-restyled{ border-color:var(--ink); color:var(--ink); }
.cw-badge.is-changed{ border-color:var(--brass); color:#7d6a40; }
.cw-badge.is-added{ background:var(--brass); border-color:var(--brass); color:var(--ivory); }
.cw-badge.is-moved{ border-color:var(--ink); color:var(--ink); border-style:dashed; }
.cw-badge.is-removed{ color:var(--sage); text-decoration:line-through; }
.cw-changes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.cw-change{ display:grid; gap:10px; align-content:start; border:1px solid var(--line); padding:18px 18px 20px; background:var(--ivory); min-width:0; }
.cw-change-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.cw-change-title{ font:400 20px/1.2 var(--serif); margin:0; }
.cw-change-row{ display:grid; gap:4px; }
.cw-change-row p{ font:14px/1.5 var(--sans); margin:0; overflow-wrap:anywhere; }
.cw-arrow{ font:14px/1 var(--sans); color:var(--sage); }
.cw-reason{ font:13px/1.5 var(--sans); color:var(--sage); margin:4px 0 0; border-top:1px solid var(--line); padding-top:10px; }
.cw-why{ border-top:1px solid var(--line); padding-top:10px; margin-top:2px; }
.cw-why p{ color:var(--sage); }
.cw-stays{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:14px; }
.cw-stays p{ font:14px/1.5 var(--sans); margin:0; }
.cw-lede-sm{ font:15px/1.6 var(--sans); margin:-6px 0 0; max-width:none; }
.cw-product-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.cw-product{ display:grid; gap:6px; align-content:start; border:1px dashed var(--line); padding:16px; min-width:0; }
.cw-product-name{ font:400 18px/1.2 var(--serif); margin:0; }
.cw-coming{ font:9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#9a9d93; margin-top:6px; }
/* Products & Services with a Design + Product Proposal: the selected catalog products as a small table */
.cw-proposal{ display:grid; border-top:1px solid var(--ink); }
.cw-pr-row{ display:grid; grid-template-columns:minmax(0,2.4fr) minmax(0,1.1fr) 112px minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); font:14px/1.4 var(--sans); color:var(--ink); }
.cw-pr-head{ padding:10px 0; font:9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); }
.cw-pr-num{ text-align:right; font-variant-numeric:tabular-nums; }
/* the Client's quantity: − n + on every product (the proposal's own quantity first) */
.cw-qty{ display:inline-flex; align-items:center; border:1px solid var(--line); background:var(--ivory); vertical-align:middle; }
.cw-qty-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:0; background:none; font:16px/1 var(--sans); color:var(--ink); cursor:pointer; padding:0; }
.cw-qty-btn:hover:not(:disabled){ background:rgba(27,28,25,.06); }
.cw-qty-btn:disabled{ color:#b9bbb3; cursor:default; }
.cw-qty-btn:focus-visible{ outline:1px solid var(--ink); outline-offset:-3px; }
.cw-qty-n{ min-width:30px; text-align:center; font:14px/1 var(--sans); font-variant-numeric:tabular-nums; }
.cw-pr-product{ display:flex; gap:14px; align-items:center; min-width:0; }
.cw-pr-img{ width:72px; height:72px; object-fit:contain; background:#fff; border:1px solid var(--line); flex:none; }
.cw-pr-img-btn{ display:block; flex:none; padding:0; border:0; background:none; cursor:zoom-in; line-height:0; }
.cw-pr-img-btn .cw-pr-img{ transition:border-color .2s var(--ease-3); }
.cw-pr-img-btn:hover .cw-pr-img{ border-color:var(--ink); }
.cw-pr-img-btn:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.cw-pr-id{ display:grid; gap:3px; min-width:0; }
.cw-pr-name{ font:400 18px/1.2 var(--serif); }
.cw-pr-total{ grid-template-columns:minmax(0,1fr) auto; border-bottom:1px solid var(--ink); font-weight:600; }
.cw-pr-note{ margin:0; }
.cw-pr-unmatched{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cw-pr-unmatched li{ display:grid; gap:4px; border:1px dashed var(--line); padding:14px 16px; }
.cw-pr-unmatched p{ margin:0; }
.cw-pr-services-h{ margin:6px 0 0; }

@media (max-width:960px){
  .cw-workspace{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .cw-stage{ height:400px; }
  .cw-aside{ border-left:0; padding-left:0; }
  .cw-summary{ grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px 28px; }
}
@media (max-width:720px){
  .cw-title{ margin-top:14px; }
  .cw-identity{ grid-template-columns:minmax(0,1fr); }
  .cw-identity > .cw-choose{ grid-column:1; grid-row:auto; margin-top:6px; }
  .cw-tabs{ margin-top:26px; }
  .cw-tabs{ display:flex; width:100%; }
  .cw-tab{ min-width:0; padding:13px 6px; letter-spacing:.08em; }
  .cw-stage{ height:clamp(240px, 82vw, 340px); }
  .cw-viewrow{ top:10px; left:10px; right:10px; gap:6px; }
  .cw-view-btn, .cw-compare{ padding:9px 9px; min-height:34px; font-size:9.5px; letter-spacing:.07em; }
  .cw-stage .cw-empty{ padding-top:60px; }
  .cw-r360{ padding:60px 14px 12px; gap:10px; }
  .cw-r360 .cw-kicker{ display:none; } /* the pressed 360° View button names the mode; the guide gets the room */
  .cw-r360-title{ font-size:20px; }
  .cw-r360-text, .cw-r360-guide{ font-size:13px; }
  .cw-r360-views li{ grid-template-columns:minmax(0,1fr); gap:2px; padding:7px 0; }
  .cw-r360-view-how{ font-size:13px; }
  .cw-r360-btn{ flex:1 1 0; min-height:40px; padding:10px 8px; font-size:9.5px; letter-spacing:.07em; }
  .cw-r360-note{ font-size:12px; }
  .cw-compare{ gap:7px; }
  .cw-thumb{ width:64px; height:64px; }
  .cw-section{ margin-top:44px; }
  .cw-note{ left:12px; right:12px; bottom:12px; }
  /* denser below the workspace on phones: cards stay readable, the page stays short */
  .cw-changes{ gap:10px; }
  .cw-change{ gap:6px; padding:14px 14px 15px; }
  .cw-change-title{ font-size:18px; }
  .cw-change-row p{ font-size:13.5px; }
  .cw-reason{ font-size:12.5px; margin-top:2px; padding-top:8px; }
  .cw-arrow{ display:none; }
  .cw-product-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .cw-product{ padding:12px; }
  .cw-product-name{ font-size:16px; }
  /* the product table stacks: one block per product, each value labelled */
  .cw-pr-head{ display:none; }
  .cw-pr-row{ grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:14px 0; }
  .cw-pr-product{ grid-column:1 / -1; }
  .cw-pr-img{ width:60px; height:60px; }
  .cw-pr-name{ font-size:16px; }
  .cw-pr-cell{ display:contents; }
  .cw-pr-cell::before{ content:attr(data-label); font:9.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sage); text-align:left; }
  .cw-pr-total{ grid-template-columns:minmax(0,1fr) auto; }
}
@media (prefers-reduced-motion:reduce){ .cw-stage .pe-baslider.is-animating .pe-ba-before, .cw-stage .pe-baslider.is-animating .pe-ba-divider{ transition:none; } }

/* Renovation Scope — single selection (radio): the chosen space keeps full
   emphasis, the others step back but stay clearly visible and clickable. */
.pe-card-grid.is-single .pe-card{ transition:opacity .35s var(--ease-3), filter .35s var(--ease-3); }
.pe-card-grid.is-single.has-selection .pe-card:not(.is-selected){ opacity:.58; filter:saturate(.7); }
.pe-card-grid.is-single.has-selection .pe-card:not(.is-selected):hover,
.pe-card-grid.is-single.has-selection .pe-card:not(.is-selected):focus-visible{ opacity:.85; filter:none; }
.pe-card-grid.is-single .pe-card:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ .pe-card-grid.is-single .pe-card{ transition:none; } }

/* ---------------------------------------------------------------
   Renovation Design Workspace (js/design-workspace.js): ONE page —
   Design Your Space · Your Space (the composer) · Here's what we
   understood · Generate My Design · Your Design Concepts.
   --------------------------------------------------------------- */
.dw-head{ display:grid; gap:12px; }
.dw-context{ margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
.dw-context span{ margin:0 .4em; }
.dw-title{ margin:0; }
.dw-lede{ margin:0; max-width:60ch; }
.dw-section{ margin-top:52px; }
.dw-h2{ margin:0; font:400 clamp(26px,3vw,34px)/1.15 var(--serif); letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.dw-sub{ margin:8px 0 0; font:15px/1.55 var(--sans); color:var(--sage); max-width:62ch; }
.dw-space{ margin-top:22px; }
/* The 2S Conversation Center (js/existing-space.js): three ways in — Upload Photo, words, Talk it through (the 2S mark:
   the 2S Design Intake Agent, conversation only — js/design-intake.js) — and its voice state, shown IN the composer in
   place of the field and the bar, with the 2S avatar and the state ElevenLabs reports. Compact; never a separate
   panel or chat. The labeled actions share the bar's 44px height and the icon buttons' hairline and hover. */
.pu-action{ position:relative; height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 16px 0 12px; border:1px solid var(--line); border-radius:22px;
  background:transparent; color:var(--ink); font:500 14px/1 var(--sans); white-space:nowrap; cursor:pointer; transition:border-color .25s, background .25s; }
.pu-action svg{ flex:none; color:var(--sage); transition:color .25s; }
.pu-action:hover:not(:disabled):not(.is-disabled){ border-color:var(--ink); }
.pu-action:hover:not(:disabled):not(.is-disabled) svg{ color:var(--ink); }
.pu-action:active:not(:disabled):not(.is-disabled){ background:var(--stone); }
.pu-action:disabled, .pu-action.is-disabled{ opacity:.4; cursor:not-allowed; }
.pu-action[aria-busy="true"]{ cursor:progress; }
.pu-action:focus-visible, .pu-upload:focus-within{ outline:2px solid var(--ink); outline-offset:2px; }
.pu-upload .pu-file{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.pu-upload.is-disabled .pu-file{ cursor:not-allowed; }
.pu-upload[aria-busy="true"] .pu-file{ cursor:progress; }
.pu-talk{ padding-left:6px; }
.pu-talk-mark{ display:block; flex:none; width:30px; height:30px; border-radius:50%; box-shadow:0 0 0 1px var(--line); }
.pu-talk[hidden]{ display:none; }
.pu-composer.is-voice > textarea, .pu-composer.is-voice > .pu-composer-bar{ display:none; }
.pu-voice{ display:grid; grid-template-columns:48px minmax(0,1fr) auto; grid-template-areas:"avatar copy actions"; align-items:center; gap:10px 14px; padding:4px 0 2px; }
.pu-voice[hidden]{ display:none; }
/* The agent's avatar: the 2S mark in graphite on its ivory disc (/assets/brand/2s-avatar.png). */
.pu-voice-avatar{ grid-area:avatar; display:block; width:48px; height:48px; border-radius:50%; }
.pu-voice-copy{ grid-area:copy; min-width:0; display:grid; gap:4px; }
.pu-voice-state{ margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--sage); }
.pu-voice-actions{ grid-area:actions; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pu-voice-actions:empty{ display:none; }
.pu-voice-mute[aria-pressed="true"]{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.pu-voice[data-state="interrupted"] .pu-voice-state{ text-transform:none; letter-spacing:normal; font:14px/1.5 var(--sans); color:var(--ink); }
.pu-voice-note[hidden]{ display:none; }
/* The chat (js/design-intake.js): the conversation with 2S, line by line, right above the composer — 2S on the left
   with its mark on a hairline bubble, the Client on the right in ink. It scrolls in its own box and stays after the
   conversation (the space's earlier conversations, a hairline between them). */
.pu-chat{ margin-top:14px; display:grid; gap:10px; }
.pu-chat[hidden]{ display:none; }
.pu-chat-h{ margin:0; font:10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sage); }
.pu-chat-list{ list-style:none; margin:0; padding:2px 4px 2px 0; display:grid; gap:12px; max-height:380px; overflow-y:auto; overscroll-behavior:contain; }
.pu-chat-turn{ display:flex; align-items:flex-end; gap:10px; max-width:min(86%, 620px); min-width:0; }
.pu-chat-turn.is-agent{ justify-self:start; }
.pu-chat-turn.is-client{ justify-self:end; }
.pu-chat-avatar{ display:block; flex:none; width:28px; height:28px; border-radius:50%; box-shadow:0 0 0 1px var(--line); }
.pu-chat-bubble{ margin:0; min-width:0; padding:10px 14px; font:15px/1.5 var(--sans); color:var(--ink); background:var(--ivory); border:1px solid var(--line);
  border-radius:16px 16px 16px 4px; overflow-wrap:anywhere; }
.is-client .pu-chat-bubble{ background:var(--ink); color:var(--ivory); border-color:var(--ink); border-radius:16px 16px 4px 16px; }
.pu-chat-sep{ justify-self:stretch; height:0; border-top:1px solid var(--line); margin:4px 0; }
.pu-chat-resume{ display:grid; gap:10px; padding:12px 14px; border:1px dashed var(--line); }
.pu-chat-resume p{ margin:0; font:14px/1.5 var(--sans); color:var(--ink); }
.pu-chat-resume-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
@media (max-width:520px){
  .pu-voice{ grid-template-columns:40px minmax(0,1fr); grid-template-areas:"avatar copy" "actions actions"; }
  .pu-voice-avatar{ width:40px; height:40px; }
  .pu-chat-turn{ max-width:92%; }
  .pu-chat-list{ max-height:320px; }
}
.es-space.is-embedded{ padding:0; background:transparent; }   /* the page's "Your Space" section is the frame */
.es-space.is-embedded + .es-space.is-embedded{ margin-top:36px; }
.es-space.is-embedded .es-understanding .pu-block{ margin-top:28px; }
/* Design Your Space — the intake in three parts, each with one job (js/design-workspace.js + js/existing-space.js):
   "Your Space" (show us: photos and a note) beside "Talk it through" (the conversation — the wider column: the main
   interaction), then "Here's what we understood" full width below (the result: quiet until there is one, then a
   summary card). Two separate surfaces — never one box around everything; stacked when narrow. */
.dw-io{ margin-top:36px; }
.es-panels{ display:grid; gap:20px; margin-top:16px; }
.es-space.is-embedded .es-panels{ margin-top:0; }
.es-space.is-embedded .es-panels.has-talk{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:stretch; }
.es-panel{ min-width:0; display:flex; flex-direction:column; gap:16px; padding:26px 28px 28px; border:1px solid var(--line); }
.es-panel[hidden]{ display:none; }
.es-talk{ background:color-mix(in srgb, var(--ivory) 40%, #fff); }   /* the conversation: the lighter, primary surface */
.es-panel-head{ display:grid; gap:4px; }
.es-step{ margin:0; font:500 10px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.es-panel-h{ margin:2px 0 0; font:400 clamp(22px,2.2vw,27px)/1.2 var(--serif); letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.es-panel-sub{ margin:0; font:15px/1.5 var(--sans); color:var(--sage); }
/* Your Space: ONE gallery (shared, then new — "New" until the next Analyze or conversation), compact: it scrolls in
   its own box; ONE Upload Photo — a quiet tile before any photo, then a small action with the count; the note last */
.es-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px; max-height:262px; overflow-y:auto; overscroll-behavior:contain; }
.es-gallery[hidden]{ display:none; }
.es-gallery > .pu-shared, .es-gallery > .pu-attachments{ display:contents; }
.es-gallery > [hidden]{ display:none; }
.es-gallery .pu-thumb{ width:auto; height:auto; aspect-ratio:1; }
.es-show .pu-upload{ align-self:flex-start; }
.pu-upload-hint{ font:400 13px/1.4 var(--sans); color:var(--sage); }
.pu-upload:not(.is-empty) .pu-upload-hint{ font-size:12px; }
.pu-upload:not(.is-empty) .pu-upload-hint::before{ content:"\00b7"; margin:0 8px 0 2px; }
.es-show .pu-upload.is-empty{ align-self:stretch; height:auto; min-height:150px; flex-direction:column; justify-content:center; gap:8px; padding:24px; border-style:dashed; border-radius:0;
  white-space:normal; text-align:center; }
.es-show .pu-upload.is-empty svg{ width:26px; height:26px; }
.es-show .pu-upload.is-empty .pu-upload-label{ font-size:15px; }
.es-show .es-note{ margin-top:0; padding:10px 10px 10px 14px; }
.es-show .es-note textarea{ min-height:52px; }
/* Talk it through: a card as tall as Your Space beside it — the chat takes the room between the heading and Start
   conversation (or the live conversation, at the bottom like a chat's input) and scrolls inside it; it never sets the
   card's height (flex-basis 0), so a long conversation never makes the page taller. Stacked: a bounded box. */
.es-talk .pu-chat{ margin-top:0; flex:1 1 0; min-height:260px; display:flex; flex-direction:column; gap:10px; }
.es-talk .pu-chat-list{ flex:1 1 0; min-height:0; max-height:none; }
.es-talk.is-busy .pu-talk{ display:none; }   /* finishing / analyzing the conversation */
.pu-chat-intro{ display:flex; align-items:flex-end; gap:10px; max-width:min(92%, 560px); }
.pu-chat-intro p{ margin:0; padding:12px 16px; font:15px/1.55 var(--sans); color:var(--ink); background:var(--ivory); border:1px solid var(--line); border-radius:16px 16px 16px 4px; }
.es-talk.has-resume .pu-talk, .es-talk.is-voice .pu-talk{ display:none; }   /* Continue talking / the live conversation instead */
.es-talk .pu-talk{ align-self:flex-start; background:var(--ink); color:var(--ivory); border-color:var(--ink); padding-right:20px; }
.es-talk .pu-talk:hover:not(:disabled){ border-color:var(--ink); opacity:.88; }
.es-talk .pu-talk:active:not(:disabled){ background:var(--ink); opacity:.8; }
.es-talk .pu-talk-mark{ box-shadow:none; }
.es-talk .pu-voice{ border-top:1px solid var(--line); padding-top:16px; }
.es-talk .pu-voice-note{ margin:0; }
/* Here's what we understood: the result, full width — before anything is understood, one quiet line in a hairline
   box; then the summary in a card */
.dw-result{ margin-top:28px; display:grid; gap:10px; min-width:0; }
.dw-understood{ min-width:0; display:grid; gap:10px; }
.dw-understood .es-understanding .pu-block{ margin-top:0; border-top:0; padding:24px 30px 26px; gap:12px; background:var(--stone); }
.dw-understood .pu-understood-h{ font:400 clamp(21px,2vw,25px)/1.2 var(--serif); letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.dw-understood .pu-narrative{ font-size:18px; line-height:1.62; max-width:72ch; }
.dw-understood .pu-block[data-initial="true"]{ background:transparent; border:1px dashed var(--line); padding:18px 22px; gap:6px; }
.dw-understood .pu-block[data-initial="true"] .pu-understood-h{ font-size:19px; }
.dw-understood .pu-block[data-initial="true"] .pu-narrative{ font:15px/1.6 var(--sans); color:var(--sage); }
.dw-understood .es-understanding + .es-understanding-for{ margin-top:24px; }
.es-understanding-for{ margin-top:30px; }
.es-understanding-for{ margin:0 0 10px; font:500 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
/* The step's navigation (the workflow's own: ← Back · the primary action), after the workspace and the concepts */
.dw-nav{ margin-top:44px; padding-top:30px; border-top:1px solid var(--line); display:grid; gap:14px; justify-items:start; min-width:0; }
.dw-nav:empty{ display:none; }
.dw-nav .dw-creating, .dw-nav .dw-account{ justify-self:stretch; }
.dw-nav-actions{ margin-top:12px; }
.dw-nav-actions .pe-btn{ max-width:100%; }
/* The account step (a guest): the turn from what the Client shared to what they get — an editorial statement for the
   workflow's room (left: the "Design Your Space" headline type, no card) beside ONE account form (right: compact,
   functional; email -> first name or password) — vertically centred on each other, the row as tall as the statement
   so a form state that grows a little barely moves it. Stacked when narrow, the statement first. */
.dw-account{ display:grid; gap:14px; }
.dw-auth{ display:grid; grid-template-columns:minmax(0,11fr) minmax(0,9fr); gap:clamp(36px,5.5vw,80px); align-items:stretch; padding:clamp(10px,2.4vw,30px) 0; }
.dw-auth-pitch{ min-width:0; display:grid; gap:18px; align-content:center; align-self:center; }
.dw-auth-kicker{ margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
.dw-auth-title{ margin:0; text-wrap:balance; }   /* .pe-headline, as "Design Your Space" */
.dw-auth-promise{ margin:0; font:400 clamp(22px,2.4vw,32px)/1.22 var(--serif); letter-spacing:-.015em; color:var(--ink); }
.dw-auth-promise span{ display:block; }
.dw-auth-free{ color:var(--sage); }
.dw-auth-copy{ margin:4px 0 0; font:16px/1.65 var(--sans); color:var(--sage); max-width:46ch; text-wrap:pretty; }
.dw-auth-form{ min-width:0; display:grid; align-content:center; padding:28px 30px 30px; border:1px solid var(--line); }
.dw-auth-note{ margin:0; font:13px/1.55 var(--sans); color:var(--sage); }
.dw-auth-form .dw-account-form{ max-width:none; }   /* the box is the form's width */
/* the form's state (email · first name · password): the same box; a new state eases in */
.dw-auth-state{ display:grid; gap:14px; min-width:0; }
.dw-auth-state.is-entering{ animation:dw-auth-in .26s ease-out both; }
@keyframes dw-auth-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .dw-auth-state.is-entering{ animation:none; } }
.dw-field input[readonly]{ background:transparent; color:var(--sage); }   /* the email already given */
.dw-account-form .dw-auth-change{ justify-self:start; margin-top:-6px; font:13px/1.4 var(--sans); color:var(--sage); text-decoration:none; }
.dw-account-form .dw-auth-change:hover{ color:var(--ink); text-decoration:underline; }
/* the form's action fills its column; the step's ← Back (placed beside it by the engine) sits under it */
.dw-auth-form .dw-nav-actions{ flex-direction:column-reverse; align-items:stretch; gap:14px; }
.dw-auth-form .dw-nav-actions .pe-btn{ justify-content:center; text-align:center; }
.dw-auth-form .dw-nav-actions .pe-back{ align-self:flex-start; }
.dw-account-form{ display:grid; gap:14px; max-width:520px; margin-top:4px; }
.dw-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.dw-field{ min-width:0; }
.dw-field label{ display:block; margin-bottom:6px; font:500 10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--sage); }
.dw-field input{ width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:0; background:var(--ivory); color:var(--ink); font:16px var(--sans); }
.dw-field input:focus{ outline:none; border-color:var(--ink); }
.dw-field input:focus-visible{ outline:2px solid var(--ink); outline-offset:1px; }
.dw-field-hint{ margin:6px 0 0; font:12px/1.4 var(--sans); color:var(--sage); }
.dw-account-error{ margin:0; font:13px/1.5 var(--sans); color:#8a3a2c; }
.dw-account-error[hidden]{ display:none; }
.dw-account-form .dw-nav-actions{ margin-top:6px; }
/* Back from Google: the draft is being saved as the Client's project */
.dw-resume{ margin-top:40px; display:flex; gap:14px; align-items:center; padding:24px 28px; background:var(--ivory); border:1px solid var(--line); }
.dw-resume p{ margin:0; font:15px/1.5 var(--sans); color:var(--ink); }
.dw-account-alt{ margin:0; font:14px/1.6 var(--sans); color:var(--sage); }
.dw-account-alt a, .dw-link{ padding:0; border:0; background:none; font:inherit; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.dw-link:focus-visible, .dw-account-alt a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media (max-width:900px){
  .es-space.is-embedded .es-panels.has-talk{ grid-template-columns:1fr; }
  .es-talk .pu-chat:has(.pu-chat-list){ min-height:340px; }   /* stacked: the conversation in a bounded box */
  .dw-auth{ grid-template-columns:1fr; gap:32px; padding-top:6px; }
  .dw-auth-form{ max-width:600px; }
}
@media (max-width:560px){
  .dw-io{ margin-top:30px; }
  .dw-auth-form{ padding:22px 16px 24px; }
  .es-panel{ padding:20px 16px 22px; }
  .dw-understood .es-understanding .pu-block{ padding:20px 18px 22px; }
  /* photos: one row that scrolls sideways inside the panel (never the page) */
  .es-gallery{ display:flex; overflow-x:auto; overflow-y:hidden; max-height:none; padding-bottom:4px; }
  .es-gallery .pu-thumb{ flex:0 0 76px; width:76px; height:76px; }
  .es-show .pu-upload.is-empty{ min-height:120px; }
  .dw-auth{ gap:26px; }
  .dw-auth-pitch{ gap:14px; }
  .dw-auth-copy{ font-size:15px; }
  .dw-field-row{ grid-template-columns:1fr; }
  .dw-understood .pu-narrative{ font-size:17px; }
}
/* Generate My Design: the turn from what the Client shared to their design */
/* Your Product Investment (js/design-workspace.js): after what we understood, before the design — compact, one range
   at a time; the chosen range and the recommendation read as figures, the ranges as the existing chips. */
.dw-invest{ display:grid; gap:0; justify-items:start; min-width:0; }
.dw-invest[hidden]{ display:none; }
.dw-invest-q{ margin:12px 0 0; font:500 17px/1.45 var(--sans); color:var(--ink); max-width:62ch; }
.dw-invest-rec, .dw-invest-chosen{ margin-top:24px; display:grid; gap:6px; justify-items:start; width:100%; max-width:640px; padding:22px 26px 24px; background:var(--stone); border:1px solid var(--line); box-sizing:border-box; }
.dw-invest-chosen{ background:var(--ivory); border-left:2px solid var(--ink); }
.dw-invest-chosen:focus{ outline:none; }
.dw-invest-chosen:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.dw-invest-label{ margin:0; font:500 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.dw-invest-range{ margin:2px 0 0; font:400 clamp(26px,3vw,32px)/1.15 var(--serif); letter-spacing:-.01em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; }
.dw-invest-why{ margin:6px 0 0; font:14px/1.6 var(--sans); color:#4a4c45; max-width:58ch; }
.dw-invest-chosen .dw-note{ margin-top:6px; }
.dw-invest-update{ color:var(--ink); }
.dw-invest-actions{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.dw-invest-chosen .dw-invest-actions{ margin-top:12px; }
.dw-invest-bands{ margin-top:16px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; width:100%; max-width:640px; }
.dw-invest-band{ padding:12px 14px; background:none; color:var(--ink); text-align:center; font-variant-numeric:lining-nums tabular-nums; }
.dw-invest-band.is-selected{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.dw-invest .pe-btn[aria-expanded="true"]{ background:var(--ink); color:var(--ivory); }
.dw-invest .pe-btn.is-ghost{ padding-left:0; padding-right:0; }   /* a text action, aligned with the text above it */
.dw-invest-scope{ margin-top:14px; }
.dw-invest .pe-btn:focus-visible, .dw-invest-band:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
@media (max-width:560px){
  .dw-invest-rec, .dw-invest-chosen{ padding:18px 16px 20px; }
  .dw-invest-actions{ display:grid; grid-template-columns:1fr; width:100%; }
  .dw-invest-actions .pe-btn{ justify-content:center; }
  .dw-invest-actions .pe-btn.is-ghost{ justify-content:flex-start; }
  .dw-invest-bands{ grid-template-columns:1fr 1fr; }
  .dw-invest-band{ padding:12px 8px; }
}
.dw-design{ margin-top:44px; padding-top:40px; border-top:1px solid var(--line); }
.dw-design:empty{ display:none; }
.dw-generate{ display:grid; gap:14px; justify-items:start; }
.dw-generate-text{ margin:0; color:var(--ink); font-size:16px; }
.dw-note{ margin:0; font:13px/1.55 var(--sans); color:var(--sage); max-width:62ch; }
.dw-note a{ color:var(--ink); }
/* Creating your design concepts: activity, not progress — a light travels a three-point track (indeterminate) and a
   short phrase changes in turn; nothing is ever shown as done. Still under reduced motion. */
.dw-creating, .dw-failed{ display:grid; gap:10px; padding:28px 30px 26px; background:var(--ivory); border:1px solid var(--line); }
.dw-nav .dw-failed{ justify-self:stretch; }
.dw-failed .dw-sub, .dw-failed .dw-note{ margin:0; }
.dw-creating-title{ margin:0; font:400 24px/1.25 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.dw-creating .dw-sub{ margin:0; }
.dw-creating .dw-note{ margin:0; }
.dw-progress{ display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; width:100%; max-width:440px; margin:14px 0 4px; }
.dw-progress-node{ width:11px; height:11px; border-radius:50%; border:1px solid var(--sage); background:var(--ivory); animation:dw-node 2.7s var(--ease-3) infinite; }
.dw-progress-node:nth-of-type(3){ animation-delay:.9s; }   /* the track's spans: node 1 · line 2 · node 3 · line 4 · node 5 */
.dw-progress-node:nth-of-type(5){ animation-delay:1.8s; }
.dw-progress-line{ position:relative; height:1px; margin:0 6px; background:var(--line); overflow:hidden; }
.dw-progress-line::after{ content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%; background:linear-gradient(90deg, transparent, var(--sage-deep), transparent); animation:dw-light 2.7s var(--ease-3) infinite; }
.dw-progress-line:nth-of-type(4)::after{ animation-delay:.9s; }
@keyframes dw-node{ 0%, 100%{ background:var(--ivory); transform:scale(1); } 30%{ background:var(--sage); transform:scale(1.25); } 60%{ background:var(--ivory); transform:scale(1); } }
@keyframes dw-light{ 0%{ left:-40%; } 60%, 100%{ left:100%; } }
.dw-progress-msg{ margin:0; min-height:1.5em; font:500 15px/1.5 var(--sans); color:var(--ink); transition:opacity .28s var(--ease-3); }
.dw-progress-msg.is-out{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .dw-progress-node, .dw-progress-line::after{ animation:none; }
  .dw-progress-node:nth-of-type(1){ background:var(--sage); }
  .dw-progress-msg{ transition:none; }
}
/* Your Design Concepts: the existing concept workspace, embedded (the page carries its heading) */
.dw-generate + .dw-concepts, .dw-creating + .dw-concepts{ margin-top:52px; }
.dw-cw{ margin-top:6px; }
.cw.is-embedded .cw-tabs{ margin-top:18px; }
.cw.is-embedded .cw-tab-note{ text-transform:none; }
/* The final decision, continued under Choose this concept (.cw-decision): the acknowledgement — quieter than the
   choice — then Back · Continue under a hairline, grouped on the left like every workflow step (.pe-actions). One
   composition, no boxes. */
.dw-confirm{ margin-top:30px; display:grid; gap:14px; justify-items:start; max-width:68ch; }
.dw-confirm.is-standalone{ max-width:none; margin-top:72px; padding-top:44px; border-top:1px solid var(--line); gap:18px; }
.dw-confirm-text{ margin:0; max-width:68ch; font:14px/1.65 var(--sans); color:#4a4c45; }
.dw-confirm-row{ display:flex; align-items:center; gap:12px; cursor:pointer; font:14px/1.4 var(--sans); color:var(--ink); }
.dw-confirm-row input{ margin:0; width:17px; height:17px; flex:none; accent-color:var(--ink); }
.dw-terms{ font:12.5px var(--sans); color:var(--sage); text-decoration:underline; text-underline-offset:3px; }
.dw-terms:hover{ color:var(--ink); }
.dw-choose-note{ margin:-8px 0 0; font:12.5px/1.5 var(--sans); color:var(--sage); }   /* under Choose, while nothing is chosen (not an error) */
.dw-actions{ margin-top:36px; padding-top:26px; border-top:1px solid var(--line); }
.dw-rooms{ margin-top:40px; }
@media (max-width:640px){
  .dw-section{ margin-top:40px; }
  .dw-design{ margin-top:36px; padding-top:30px; }
  .dw-generate{ width:100%; }
  .dw-nav{ margin-top:36px; padding-top:24px; }
  .dw-creating, .dw-failed{ padding:22px 18px 20px; }
  .dw-creating-title{ font-size:21px; }
  .dw-confirm{ margin-top:26px; }
  .dw-confirm.is-standalone{ margin-top:52px; padding-top:34px; }
  .dw-actions{ margin-top:30px; }
}

/* Your Design Concepts made before the latest changes: a quiet "Outdated" mark beside the heading (Regenerate is offered) */
.dw-outdated{ display:inline-block; margin-left:12px; vertical-align:middle; padding:5px 8px; border:1px solid #9c6b3c; color:#8a5a2b;
  font:9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
/* the chosen concept: a filled mark on its tab and beside its title — separate from the tab being viewed */
.cw-tab-chosen{ display:inline-flex; align-items:center; gap:4px; padding:3px 7px; background:#4f6b4a; color:#fff; font:9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.cw-chosen{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; background:#4f6b4a; color:#fff; font:11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }

/* =====================================================================================================
   Your Design Concepts — the presentation (October 2026): an editorial design board, not an application.
   Concept 01 · 02 · 03 (viewing) · the concept's title and its own action (Regenerate) · the image beside the design
   summary (What changes in it) · Products & Services · the decision (Choose this concept) at the end.
   ===================================================================================================== */
.dw-concepts .dw-h2{ font:400 clamp(22px,2.2vw,28px)/1.2 var(--serif); letter-spacing:-.01em; color:var(--ink); }
.dw-outdated{ border-color:#c9b7a1; color:#8a6a48; }
/* Concept 01 · 02 · 03: what is being viewed (type + underline); the chosen concept has its own green mark */
.cw.is-embedded .cw-tabs{ display:flex; width:100%; max-width:none; gap:clamp(22px,4vw,52px); margin-top:20px; border:0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.cw.is-embedded .cw-tab{ flex:0 0 auto; min-width:0; display:inline-flex; align-items:center; gap:10px; padding:14px 0 13px; margin:0 0 -1px; border:0; border-bottom:2px solid transparent; background:none;
  color:var(--sage); font:12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; text-align:left; }
.cw.is-embedded .cw-tab:not(.is-active):hover{ color:var(--ink); background:none; }
.cw.is-embedded .cw-tab.is-active{ color:var(--ink); border-bottom-color:var(--ink); background:none; cursor:default; }
.cw.is-embedded .cw-tab-chosen{ padding:0; background:none; color:#4f6b4a; font:10px/1 var(--mono); letter-spacing:.1em; }
.cw.is-embedded .cw-tab.is-active .cw-tab-chosen{ color:#4f6b4a; }
/* the concept: number, title (the dominant text), description — and its own action, quietly beside it */
.cw.is-embedded .cw-identity{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:40px; row-gap:16px; align-items:end; margin-top:34px; }
.cw.is-embedded .cw-identity > *{ grid-column:auto; }
.cw.is-embedded .cw-identity-text{ display:grid; gap:10px; max-width:68ch; min-width:0; }
.cw.is-embedded .cw-kicker{ font:10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sage); }
.cw.is-embedded .cw-name{ font:400 clamp(30px,3.6vw,46px)/1.08 var(--serif); letter-spacing:-.02em; margin:0; text-wrap:balance; }
.cw.is-embedded .cw-desc{ font:16px/1.6 var(--sans); color:#4a4c45; margin:0; }
.cw-identity-action{ display:grid; justify-items:end; gap:8px; }
.dw-regen-btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 0; border:0; border-bottom:1px solid currentColor; background:none; color:var(--ink);
  font:11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.dw-regen-btn:hover:not(:disabled){ color:var(--sage); }
.dw-regen-btn:disabled{ color:#9a9d93; cursor:default; border-bottom-color:transparent; }
.dw-regen-btn:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }
.dw-regen-note{ font:12.5px/1.45 var(--sans); color:var(--sage); margin:0; text-align:right; max-width:34ch; }
.dw-regen-note.is-error{ color:#8a3b2b; }
/* the board: the image (the hero) beside the design summary — one surface, hairlines instead of boxes */
.cw.is-embedded .cw-board{ grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr); gap:clamp(28px,4vw,60px); margin-top:30px; align-items:start; }
.cw.is-embedded .cw-media{ min-width:0; }
/* Desktop: the design summary scrolls on its own beside the image. Its content never sets the board's height
   (contain:size) — the image column does, capped to the window; the summary fills that height and scrolls inside it,
   and a scroll that reaches its end stays there (the page doesn't move while the pointer is over it). Products &
   Services stay below the board in the page. Stacked (<= 900px): ordinary page flow, no scroll of its own. */
.cw.is-embedded .cw-board > .cw-aside{ align-self:stretch; contain:size; max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-gutter:stable; padding-right:14px; }
.cw.is-embedded .cw-board > .cw-aside:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }
.cw.is-embedded .cw-board > .cw-aside::-webkit-scrollbar{ width:5px; }
.cw.is-embedded .cw-board > .cw-aside::-webkit-scrollbar-track{ background:transparent; }
.cw.is-embedded .cw-board > .cw-aside::-webkit-scrollbar-thumb{ background:rgba(27,28,25,.14); border-radius:3px; }
.cw.is-embedded .cw-board > .cw-aside:hover::-webkit-scrollbar-thumb{ background:rgba(27,28,25,.26); }
@supports not selector(::-webkit-scrollbar){ .cw.is-embedded .cw-board > .cw-aside{ scrollbar-width:thin; scrollbar-color:rgba(27,28,25,.22) transparent; } }
.cw.is-embedded .cw-stage{ height:clamp(360px,44vw,620px); background:#ecebe6; }
.cw.is-embedded .cw-viewrow .cw-view-btn, .cw.is-embedded .cw-viewrow .cw-compare{ min-height:34px; padding:10px 14px; border-color:transparent; background:rgba(244,241,233,.82); }
.cw.is-embedded .cw-viewrow .cw-view-btn[aria-pressed="true"], .cw.is-embedded .cw-viewrow .cw-compare[aria-pressed="true"]{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.cw.is-embedded .cw-aside{ border-left:0; padding-left:0; gap:0; }
.cw.is-embedded .cw-aside-h{ font:10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sage); margin:0 0 6px; }
.cw.is-embedded .cw-summary{ gap:0; }
.cw.is-embedded .cw-cell{ gap:6px; border-top:1px solid var(--line); padding:16px 0; }
.cw.is-embedded .cw-cell .cw-value{ font:15px/1.6 var(--sans); color:var(--ink); margin:0; }
/* What changes: below the board, in the page (never in the summary's own scroll) — one block per change (Existing /
   Becomes / Why) under a hairline, no cards; as many side by side as fit at a readable width */
.cw.is-embedded .cw-changes{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap:clamp(28px,4vw,56px); row-gap:0; }
.cw.is-embedded .cw-change{ border:0; border-top:1px solid var(--line); background:none; padding:18px 0 24px; gap:8px; }
.cw.is-embedded .cw-change-title{ font:400 19px/1.25 var(--serif); }
.cw.is-embedded .cw-change-row{ grid-template-columns:70px minmax(0,1fr); gap:10px; align-items:baseline; }
.cw.is-embedded .cw-change-row p{ font-size:14px; }
.cw.is-embedded .cw-arrow{ display:none; }
.cw.is-embedded .cw-why{ border:0; padding-top:0; margin-top:0; }
.cw.is-embedded .cw-stays{ border-top:1px solid var(--line); padding-top:16px; }
/* What changes, by type: compact editorial filters (the badges' own language) — the active one filled, the rest outlined */
.cw-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.cw-filter-btn{ display:inline-flex; align-items:baseline; gap:7px; min-height:32px; padding:9px 11px; border:1px solid var(--line); background:none; color:var(--sage);
  font:10px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.cw-filter-btn:hover{ border-color:var(--ink); color:var(--ink); }
.cw-filter-btn.is-active{ background:var(--ink); border-color:var(--ink); color:var(--ivory); cursor:default; }
.cw-filter-btn:focus-visible{ outline:1px solid var(--ink); outline-offset:2px; }
.cw-filter-n{ font-size:9.5px; letter-spacing:.04em; opacity:.65; }
.cw-changes-empty{ margin:0; padding:18px 0 4px; border-top:1px solid var(--line); font:14px/1.5 var(--sans); }
/* a concept being regenerated: said on its own image, the image behind it quieter */
.cw-stage.is-regenerating .cw-figure, .cw-stage.is-regenerating .pe-baslider, .cw-stage.is-regenerating .cw-empty{ opacity:.3; }
.cw-regen{ position:absolute; inset:0; z-index:5; display:grid; place-content:center; justify-items:center; gap:10px; padding:24px; text-align:center; }
.cw-regen-title{ font:400 clamp(20px,2.2vw,26px)/1.2 var(--serif); color:var(--ink); }
.cw-regen-text{ font:14px/1.55 var(--sans); color:#4a4c45; max-width:40ch; }
.cw-regen-bar{ position:relative; width:140px; height:1px; background:var(--line); overflow:hidden; margin-top:6px; }
.cw-regen-bar i{ position:absolute; top:0; left:-40%; width:40%; height:1px; background:var(--ink); animation:cw-regen 1.8s ease-in-out infinite; }
@keyframes cw-regen{ to{ left:100%; } }
@media (prefers-reduced-motion:reduce){ .cw-regen-bar i{ animation:none; left:30%; } }
/* the decision: Choose this concept — the end of the presentation */
/* the final decision opens here: its heading, then Choose this concept (the dark, primary action) — the
   acknowledgement and Back · Continue follow below it (.dw-confirm, .dw-actions) */
.cw-decision{ display:grid; justify-items:start; gap:22px; margin-top:72px; padding-top:44px; border-top:1px solid var(--line); }
.dw-final-h{ margin:0; }
.cw-decision .cw-choose{ margin:0; justify-content:flex-start; align-items:center; gap:16px; }
.cw-decision .pe-btn.is-primary{ padding:18px 40px; }
.cw-decision .cw-chosen{ padding:14px 22px; }
@media (max-width:900px){
  .cw.is-embedded .cw-board{ grid-template-columns:minmax(0,1fr); }
  .cw.is-embedded .cw-board > .cw-aside{ contain:none; max-height:none; overflow:visible; overscroll-behavior:auto; scrollbar-gutter:auto; padding-right:0; }
  .cw.is-embedded .cw-identity{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .cw-identity-action{ justify-items:start; }
  .dw-regen-note{ text-align:left; }
}
@media (max-width:560px){
  .cw-filter-btn{ min-height:40px; padding:12px 12px; }
  .cw.is-embedded .cw-tabs{ gap:20px; }
  .cw.is-embedded .cw-tab{ letter-spacing:.1em; }
  .cw.is-embedded .cw-stage{ height:300px; }
  .cw.is-embedded .cw-change-row{ grid-template-columns:minmax(0,1fr); gap:2px; }
  .cw-decision{ margin-top:52px; padding-top:34px; justify-items:stretch; }
  .cw-decision .pe-btn.is-primary{ width:100%; justify-content:center; }
  .cw-decision .cw-choose{ width:100%; flex-direction:column; align-items:stretch; }
}