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

/* 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); } }
@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) — .nh-two-col is a bare marker class, no extra
   breakpoint needed here. */

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