/* =========================================================
   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; }

.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;
}
.pe-step-label b{ color:var(--ink); font-weight:500; }

/* 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; }
.pe-step-dots span{ width:5px; height:5px; border-radius:50%; background:var(--line); }
.pe-step-dots span.is-done, .pe-step-dots span.is-active{ 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); }

.pe-back{
  position:fixed; top:88px; left:clamp(20px,4vw,44px); 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; }

@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; }
  .pe-back{ top:72px; left:16px; }
}
@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; }

.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:32ch; }
.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; } }

/* 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); }
}
.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); }

/* ---------- 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; }

/* 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-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; }
.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); }

/* ---------- 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; }