.planner-page { background: var(--paper); }
.planner-page main { overflow: clip; }
.planner-site-header .nav-cta { white-space: nowrap; }

.planner-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(28rem,1.12fr);
  align-items: center;
  gap: clamp(3rem,8vw,9rem);
  padding: clamp(12rem,20vh,15rem) var(--page-pad) clamp(5rem,9vw,8rem);
  overflow: hidden;
  background: linear-gradient(145deg, #f7f7f3, #edf1ee 55%, #dce8ea);
}
.planner-hero__grid {
  position: absolute;
  inset: 0;
  opacity: .48;
  background:
    linear-gradient(rgba(65,109,98,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,109,98,.07) 1px, transparent 1px),
    radial-gradient(circle at 82% 36%, rgba(203,201,232,.65), transparent 28%);
  background-size: 4.5rem 4.5rem, 4.5rem 4.5rem, auto;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000);
}
.planner-hero__copy { position: relative; z-index: 2; }
.planner-hero__copy h1 { max-width: 9ch; margin: 0 0 2rem; font-size: clamp(4rem,7.6vw,8.8rem); font-weight: 570; line-height: .84; }
.planner-hero__copy > p:not(.context-line) { max-width: 40rem; margin-bottom: 2rem; font-size: clamp(1.05rem,1.5vw,1.32rem); line-height: 1.66; }
.planner-hero__object { position: relative; z-index: 2; min-height: min(68vh,48rem); perspective: 1200px; }
.plan-sheet {
  position: absolute;
  inset: 2% 6% 3% 4%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 44% 2.8rem 2.8rem 2.8rem;
  background:
    linear-gradient(rgba(65,109,98,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,109,98,.1) 1px, transparent 1px),
    rgba(247,247,243,.78);
  background-size: 3.2rem 3.2rem;
  box-shadow: 0 2.8rem 8rem rgba(23,26,24,.14);
  transform: rotateY(-8deg) rotateX(2deg);
  animation: plan-sheet-breathe 8s ease-in-out infinite alternate;
}
.plan-sheet::before,
.plan-sheet::after {
  content: "";
  position: absolute;
  border: 2px solid var(--accent);
  opacity: .55;
}
.plan-sheet::before { inset: 15% 19% 21% 12%; border-radius: 2rem 8rem 2rem 2rem; }
.plan-sheet::after { inset: 36% 9% 11% 45%; border-color: var(--violet); border-radius: 50% 2rem 2rem 2rem; }
.plan-sheet i { position: absolute; z-index: 2; display: block; width: clamp(2.5rem,5vw,5rem); height: clamp(2.5rem,5vw,5rem); border: 1px solid rgba(65,109,98,.28); border-radius: 50%; background: rgba(200,221,214,.42); box-shadow: 0 0 0 1rem rgba(255,255,255,.22); }
.plan-sheet i:nth-child(1) { top: 18%; left: 17%; }
.plan-sheet i:nth-child(2) { top: 26%; right: 20%; width: 3rem; height: 3rem; }
.plan-sheet i:nth-child(3) { right: 33%; bottom: 17%; width: 2rem; height: 2rem; }
.plan-sheet i:nth-child(4) { bottom: 27%; left: 29%; width: 3.5rem; height: 3.5rem; }
.plan-sheet span { position: absolute; right: 1.6rem; bottom: 1.4rem; font: 650 .72rem/1 var(--body); letter-spacing: .12em; }
@keyframes plan-sheet-breathe { to { transform: rotateY(-4deg) rotateX(-1deg) translateY(-.8rem); } }

.planner-workspace {
  position: relative;
  padding: clamp(6rem,11vw,11rem) var(--page-pad);
  background:
    radial-gradient(circle at 10% 18%, rgba(200,221,214,.38), transparent 24%),
    var(--paper);
}
.planner-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 2rem clamp(3rem,8vw,9rem); align-items: end; margin-bottom: clamp(3rem,7vw,7rem); }
.planner-heading .context-line { grid-column: 1/-1; }
.planner-heading h2 { max-width: 12ch; margin: 0; }
.planner-heading > p:last-child { max-width: 40rem; margin: 0; line-height: 1.7; }

.planner-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(16rem,.38fr) minmax(0,1.62fr);
  min-height: 52rem;
  overflow: hidden;
  border: 1px solid rgba(23,26,24,.12);
  border-radius: clamp(2rem,4vw,4rem);
  background: rgba(255,255,255,.58);
  box-shadow: 0 2.8rem 8rem rgba(23,26,24,.1);
}
.planner-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem,4vw,3.5rem);
  color: white;
  background:
    radial-gradient(circle at 22% 10%, rgba(200,221,214,.17), transparent 28%),
    var(--ink);
}
.planner-progress { position: absolute; top: 3.5rem; bottom: 3.5rem; left: 2.25rem; width: 1px; background: rgba(255,255,255,.12); }
.planner-progress span { display: block; width: 1px; height: var(--planner-progress,0%); background: linear-gradient(var(--accent-soft), var(--violet)); transition: height .65s cubic-bezier(.2,.8,.2,1); }
.planner-rail ol { position: relative; z-index: 2; display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.planner-rail button {
  width: 100%;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .15rem .8rem;
  padding: .85rem;
  border: 0;
  border-radius: 1rem;
  color: rgba(255,255,255,.46);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease, background .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.planner-rail button:disabled { cursor: default; opacity: .48; }
.planner-rail button:not(:disabled):hover { color: white; background: rgba(255,255,255,.07); transform: translateX(.18rem); }
.planner-rail button[aria-current="step"] { color: white; background: rgba(200,221,214,.12); }
.planner-rail button span { grid-row: 1/3; align-self: center; font: 620 .68rem/1 var(--body); letter-spacing: .08em; }
.planner-rail button b { font-size: .84rem; }
.planner-rail button small { color: inherit; font-size: .64rem; line-height: 1.35; }
.planner-live-summary { margin-top: auto; padding-top: 3rem; }
.planner-live-summary > p { margin: 0 0 .9rem; color: rgba(255,255,255,.48); font-size: .62rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.planner-live-summary dl { margin: 0; border-top: 1px solid rgba(255,255,255,.12); }
.planner-live-summary dl div { display: grid; grid-template-columns: .65fr 1.35fr; gap: .8rem; padding: .72rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.planner-live-summary dt { color: rgba(255,255,255,.4); font-size: .65rem; }
.planner-live-summary dd { margin: 0; color: white; font-size: .68rem; line-height: 1.4; }

.project-planner { min-width: 0; display: flex; flex-direction: column; padding: clamp(2rem,5vw,5rem); background: linear-gradient(145deg, rgba(247,247,243,.94), rgba(220,232,234,.36)); }
.planner-step-status { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2.5rem,5vw,4rem); padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.planner-step-status span { color: var(--ink-soft); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.planner-step-status strong { font-size: .75rem; }
.planner-step { flex: 1; min-width: 0; animation: planner-step-in .55s cubic-bezier(.2,.8,.2,1) both; }
.planner-step[hidden] { display: none; }
@keyframes planner-step-in { from { opacity: 0; transform: translateY(1.2rem); } }
.step-heading { margin-bottom: clamp(2.5rem,5vw,4rem); }
.step-heading > p { margin: 0 0 .7rem; color: var(--accent); font-size: .66rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.step-heading h3 { max-width: 14ch; margin: 0 0 1rem; font-size: clamp(2.4rem,4.5vw,5rem); line-height: .95; }
.step-heading > span { display: block; max-width: 42rem; color: var(--ink-soft); line-height: 1.65; }

.option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.choice-card,
.style-card { position: relative; min-width: 0; cursor: pointer; }
.choice-card input,
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card { min-height: 15rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.7rem; background: rgba(255,255,255,.58); transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease; }
.choice-card:hover { transform: translateY(-.35rem); }
.choice-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 1rem 3rem rgba(65,109,98,.12); }
.choice-card strong { position: relative; z-index: 2; margin-top: auto; font: 580 clamp(1.3rem,2vw,2rem)/1.05 var(--display); }
.choice-card small { position: relative; z-index: 2; margin-top: .55rem; color: var(--ink-soft); font-size: .7rem; line-height: 1.5; }
.choice-visual { position: absolute; inset: 0; opacity: .82; background: linear-gradient(145deg,rgba(255,255,255,.7),rgba(200,221,214,.24)); }
.choice-visual::before,
.choice-visual::after { content: ""; position: absolute; border: 1px solid rgba(65,109,98,.22); }
.choice-visual--bath::before { top: 18%; right: 10%; left: 16%; height: 35%; border-radius: 45% 45% 1rem 1rem; }
.choice-visual--bath::after { top: 26%; left: 24%; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(203,201,232,.3); }
.choice-visual--kitchen::before { top: 15%; right: 11%; left: 11%; height: 43%; border-radius: .8rem; box-shadow: inset 0 -2.6rem rgba(221,210,194,.26); }
.choice-visual--kitchen::after { top: 23%; left: 30%; width: 38%; height: 1px; box-shadow: 0 1rem rgba(65,109,98,.15),0 2rem rgba(65,109,98,.15); }
.choice-visual--living::before { top: 25%; left: 13%; width: 58%; height: 28%; border-radius: 3rem 3rem .8rem .8rem; }
.choice-visual--living::after { top: 18%; right: 14%; width: 4rem; height: 4rem; border-radius: 50%; background: rgba(200,221,214,.32); }
.choice-visual--multi::before { top: 15%; right: 12%; bottom: 38%; left: 12%; border-radius: 1rem; box-shadow: inset 5rem 0 rgba(203,201,232,.14); }
.choice-visual--multi::after { top: 15%; bottom: 38%; left: 47%; width: 1px; background: rgba(65,109,98,.2); }

.upload-layout { display: grid; grid-template-columns: minmax(17rem,.72fr) minmax(0,1.28fr); gap: 1rem; }
.upload-zone { min-height: 28rem; display: grid; place-items: center; align-content: center; padding: 2rem; border: 1px dashed rgba(65,109,98,.45); border-radius: 2rem; background: rgba(255,255,255,.42); text-align: center; cursor: pointer; transition: background .3s ease, border-color .3s ease, transform .35s ease; }
.upload-zone:hover,
.upload-zone.is-dragging { border-color: var(--accent); background: rgba(200,221,214,.3); transform: translateY(-.25rem); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { width: 4.4rem; height: 4.4rem; display: grid; place-items: center; margin-bottom: 1.4rem; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 1.5rem; }
.upload-zone strong { font-size: 1rem; }
.upload-zone small { margin-top: .5rem; color: var(--ink-soft); font-size: .68rem; }
.upload-preview { position: relative; min-height: 28rem; overflow: hidden; border-radius: 2rem; background: linear-gradient(135deg,var(--glass),var(--project-surface)); }
.upload-preview::after { content: ""; position: absolute; inset: 0; opacity: .42; background: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 3rem 3rem; pointer-events: none; }
.upload-preview img { position: absolute; z-index: 1; inset: 0; opacity: 0; transition: opacity .4s ease, filter .4s ease; }
.upload-preview.has-image img { opacity: 1; }
.upload-preview > div { position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem; left: 1.2rem; padding: 1rem; border: 1px solid rgba(255,255,255,.7); border-radius: 1rem; background: rgba(247,247,243,.72); backdrop-filter: blur(16px); }
.upload-preview > div span { display: block; color: var(--ink-soft); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.upload-preview > div strong { display: block; margin-top: .25rem; font-size: .78rem; }
.upload-preview button { position: absolute; z-index: 3; top: 1rem; right: 1rem; padding: .65rem .8rem; border: 0; border-radius: 999px; background: rgba(247,247,243,.86); font: 650 .68rem/1 var(--body); cursor: pointer; }
.local-data-note { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; font-size: .7rem; }
.local-data-note span { color: var(--accent); }

.style-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.style-card { min-height: 17rem; display: flex; flex-direction: column; padding: 1.2rem; border: 1px solid var(--line); border-radius: 1.7rem; background: rgba(255,255,255,.5); transition: transform .35s ease, border-color .3s ease, box-shadow .35s ease; }
.style-card:hover { transform: translateY(-.35rem); }
.style-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.style-card > span { display: flex; flex: 1; gap: .4rem; margin-bottom: 1.2rem; overflow: hidden; border-radius: 1rem; }
.style-card i { flex: 1; }
.style-card--natural i:nth-child(1) { background: #ded1bf; }.style-card--natural i:nth-child(2) { background: #b9cfc8; }.style-card--natural i:nth-child(3) { background: #f1f1ec; }
.style-card--minimal i:nth-child(1) { background: #eef1f0; }.style-card--minimal i:nth-child(2) { background: #bec8c5; }.style-card--minimal i:nth-child(3) { background: #777f7c; }
.style-card--warm i:nth-child(1) { background: #9d8068; }.style-card--warm i:nth-child(2) { background: #343a37; }.style-card--warm i:nth-child(3) { background: #d5bda5; }
.style-card strong { font-size: .85rem; }.style-card small { margin-top: .45rem; color: var(--ink-soft); font-size: .67rem; line-height: 1.45; }
.priority-options { margin: 2.5rem 0 0; padding: 0; border: 0; }
.priority-options legend { margin-bottom: 1rem; font: 580 clamp(1.3rem,2vw,2rem)/1 var(--display); }
.priority-options { display: flex; flex-wrap: wrap; gap: .65rem; }
.priority-options legend { width: 100%; }
.priority-options label { cursor: pointer; }
.priority-options input { position: absolute; opacity: 0; }
.priority-options span { display: block; padding: .75rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.54); font-size: .7rem; transition: color .25s ease, background .25s ease, border-color .25s ease; }
.priority-options input:checked + span { color: white; border-color: var(--accent); background: var(--accent); }

.framework-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.framework-grid label { min-width: 0; }
.framework-grid label > span { display: block; margin: 0 0 .55rem .2rem; color: var(--ink); font-size: .7rem; font-weight: 680; }
.framework-grid input,
.framework-grid select,
.framework-grid textarea { width: 100%; padding: .95rem 1rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--ink); background: rgba(255,255,255,.72); font: 500 .82rem/1.4 var(--body); outline: none; transition: border-color .25s ease, box-shadow .25s ease; }
.framework-grid textarea { resize: vertical; }
.framework-grid input:focus,
.framework-grid select:focus,
.framework-grid textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(65,109,98,.1); }
.framework-notes { grid-column: 1/-1; }

.project-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 1.7rem; background: var(--line); }
.project-summary > div { min-height: 8rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.2rem; background: rgba(247,247,243,.9); }
.project-summary span { color: var(--ink-soft); font-size: .66rem; font-weight: 680; letter-spacing: .06em; text-transform: uppercase; }
.project-summary strong { max-width: 35rem; font: 560 clamp(1.05rem,1.6vw,1.45rem)/1.25 var(--display); }
.project-summary__wide { grid-column: 1/-1; }
.summary-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.summary-status { min-height: 1.5rem; margin: 1rem 0 0; font-size: .7rem; }

.planner-error { min-height: 1.5rem; margin: 1.5rem 0 .2rem; color: #8b3f39; font-size: .72rem; }
.planner-controls { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.planner-back { padding: .9rem 1rem; border: 0; color: var(--ink-soft); background: transparent; font: 650 .78rem/1 var(--body); cursor: pointer; }
.planner-back:disabled { opacity: .35; cursor: default; }

@media (max-width: 980px) {
  .planner-hero { grid-template-columns: 1fr; min-height: auto; }
  .planner-hero__object { min-height: 34rem; }
  .planner-heading { grid-template-columns: 1fr; }
  .planner-heading .context-line { grid-column: auto; }
  .planner-layout { grid-template-columns: 1fr; }
  .planner-rail { display: block; padding: 1.25rem; }
  .planner-progress { top: auto; right: 1.25rem; bottom: 1rem; left: 1.25rem; width: auto; height: 1px; }
  .planner-progress span { width: var(--planner-progress,0%); height: 1px; transition-property: width; }
  .planner-rail ol { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .planner-rail button { display: block; padding: .8rem .5rem; text-align: center; }
  .planner-rail button span { display: block; margin-bottom: .3rem; }
  .planner-rail button small { display: none; }
  .planner-live-summary { display: none; }
}
@media (max-width: 680px) {
  .planner-hero { padding-right: 1rem; padding-left: 1rem; }
  .planner-hero__copy h1 { font-size: clamp(3.8rem,16vw,6.4rem); }
  .planner-hero__object { min-height: 27rem; }
  .planner-workspace { padding-right: .65rem; padding-left: .65rem; }
  .planner-layout { border-radius: 1.7rem; }
  .project-planner { padding: 1.25rem; }
  .planner-rail ol { gap: .1rem; }
  .planner-rail button b { font-size: .65rem; }
  .planner-step-status strong { display: none; }
  .option-grid,
  .upload-layout,
  .style-options,
  .framework-grid,
  .project-summary { grid-template-columns: 1fr; }
  .choice-card { min-height: 13rem; }
  .upload-zone,
  .upload-preview { min-height: 22rem; }
  .style-card { min-height: 13rem; }
  .framework-notes,
  .project-summary__wide { grid-column: auto; }
  .summary-actions { display: grid; }
  .summary-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-sheet { animation: none; transform: none; }
  .planner-step { animation: none; }
}

/* Planner 2.0: direct, cinematic workspace */
.planner-page {
  --planner-pointer-x: 72%;
  --planner-pointer-y: 18rem;
  background: #f1f2ef;
}
.planner-page main { position: relative; isolation: isolate; }
.planner-workspace {
  min-height: 100svh;
  padding: clamp(10rem,14vw,13rem) var(--page-pad) clamp(7rem,12vw,12rem);
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(247,247,243,.96), rgba(232,239,237,.9) 48%, rgba(234,233,246,.82)),
    var(--paper);
}
.planner-workspace::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(20rem,38vw,42rem);
  aspect-ratio: 1;
  left: calc(var(--planner-pointer-x) - clamp(10rem,19vw,21rem));
  top: calc(var(--planner-pointer-y) - clamp(10rem,19vw,21rem));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.78), rgba(200,221,214,.28) 36%, transparent 69%);
  filter: blur(7px);
  pointer-events: none;
  transition: left .18s ease-out, top .18s ease-out;
}
.planner-workspace::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .28;
  background-image: radial-gradient(rgba(23,26,24,.17) .55px, transparent .55px);
  background-size: 7px 7px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
  pointer-events: none;
}
.planner-ambient { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.planner-ambient i { position: absolute; display: block; border: 1px solid rgba(65,109,98,.14); border-radius: 48% 52% 60% 40%; filter: blur(.1px); animation: planner-orbit 18s ease-in-out infinite alternate; }
.planner-ambient i:nth-child(1) { width: 45vw; height: 45vw; top: -16vw; right: -7vw; background: rgba(200,221,214,.18); }
.planner-ambient i:nth-child(2) { width: 29vw; height: 46vw; top: 34rem; left: -13vw; border-radius: 62% 38% 45% 55%; background: rgba(203,201,232,.2); animation-duration: 23s; animation-direction: alternate-reverse; }
.planner-ambient i:nth-child(3) { width: 32vw; height: 32vw; right: 8vw; bottom: 8rem; background: rgba(221,210,194,.22); animation-duration: 28s; }
.planner-ambient span { position: absolute; top: 26rem; right: -12vw; width: 68vw; height: 1px; background: linear-gradient(90deg,transparent,rgba(65,109,98,.25),transparent); transform: rotate(-18deg); box-shadow: 0 4rem rgba(65,109,98,.11),0 8rem rgba(65,109,98,.07); animation: planner-line-drift 12s ease-in-out infinite alternate; }
@keyframes planner-orbit { to { transform: translate3d(3vw,4vw,0) rotate(22deg) scale(1.08); border-radius: 58% 42% 38% 62%; } }
@keyframes planner-line-drift { to { transform: rotate(-13deg) translate3d(-4vw,2rem,0); } }

.planner-heading {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(17rem,.45fr);
  gap: clamp(3rem,8vw,9rem);
  align-items: end;
  max-width: 105rem;
  margin: 0 auto clamp(4rem,8vw,7.5rem);
}
.planner-heading > div:first-child { min-width: 0; }
.planner-heading .context-line { margin-bottom: 1.5rem; }
.planner-heading h1 { max-width: 17ch; margin: 0; font-size: clamp(3.5rem,6.5vw,7.8rem); font-weight: 560; line-height: .88; letter-spacing: -.055em; }
.planner-heading__note { position: relative; padding: 1.8rem 0 0 1.5rem; border-top: 1px solid rgba(23,26,24,.3); }
.planner-heading__note > span { position: absolute; width: .7rem; height: .7rem; top: -.4rem; left: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .45rem rgba(65,109,98,.12); animation: planner-pulse 2.8s ease-in-out infinite; }
.planner-heading__note p { margin: 0; color: var(--ink-soft); font-size: clamp(.95rem,1.2vw,1.15rem); line-height: 1.75; }
@keyframes planner-pulse { 50% { box-shadow: 0 0 0 .8rem rgba(65,109,98,.03); } }

.planner-layout {
  position: relative;
  z-index: 2;
  max-width: 105rem;
  min-height: 58rem;
  margin: 0 auto;
  border-color: rgba(255,255,255,.75);
  background: rgba(247,247,243,.72);
  box-shadow: 0 3.5rem 10rem rgba(23,26,24,.14), inset 0 0 0 1px rgba(23,26,24,.06);
  backdrop-filter: blur(24px);
  transition: box-shadow .7s ease, background .7s ease;
}
.planner-layout::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: .28rem;
  background: linear-gradient(90deg, transparent 0%, var(--custom-secondary,#c8ddd6) 24%, var(--custom-accent,#cbc9e8) 52%, var(--custom-primary,#416d62) 76%, transparent 100%);
  background-size: 180% 100%;
  box-shadow: 0 .7rem 2.2rem rgba(65,109,98,.12);
  animation: planner-surface-trace 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes planner-surface-trace { to { background-position: 100% 0; opacity: .72; } }
.planner-layout[data-style="minimal"] { box-shadow: 0 3.5rem 10rem rgba(68,78,75,.17), inset 0 0 0 1px rgba(23,26,24,.08); }
.planner-layout[data-style="warm"] { box-shadow: 0 3.5rem 10rem rgba(107,79,57,.18), inset 0 0 0 1px rgba(23,26,24,.07); }
.planner-rail { background: linear-gradient(165deg,#151917 0%,#1e2925 58%,#30312f 100%); }
.planner-rail::after { content:""; position:absolute; inset:0; opacity:.16; background: radial-gradient(circle at 30% 12%,var(--custom-secondary,#c8ddd6),transparent 28%),radial-gradient(circle at 85% 86%,var(--custom-accent,#cbc9e8),transparent 25%); pointer-events:none; }
.planner-rail > * { position: relative; z-index: 1; }
.project-planner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(145deg,rgba(250,250,247,.96),rgba(226,236,233,.63));
  transition: background .7s ease;
}
.project-planner::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:30rem;
  height:30rem;
  right:-11rem;
  bottom:-12rem;
  border-radius:42% 58% 62% 38%;
  background:linear-gradient(135deg,var(--custom-secondary,#c8ddd6),var(--custom-accent,#cbc9e8));
  opacity:.18;
  filter:blur(3px);
  animation:planner-form-shape 16s ease-in-out infinite alternate;
}
@keyframes planner-form-shape { to { transform:translate3d(-5rem,-4rem,0) rotate(24deg); border-radius:60% 40% 34% 66%; } }
.planner-layout[data-current-step="1"] .project-planner { background: linear-gradient(150deg,rgba(247,247,243,.97),rgba(221,226,232,.72)); }
.planner-layout[data-current-step="2"] .project-planner { background: linear-gradient(145deg,rgba(247,247,243,.97),color-mix(in srgb,var(--custom-secondary,#c8ddd6) 34%,white)); }
.planner-layout[data-current-step="3"] .project-planner { background: linear-gradient(145deg,rgba(247,247,243,.98),rgba(231,227,219,.72)); }
.planner-layout[data-current-step="4"] .project-planner { background: linear-gradient(145deg,rgba(247,247,243,.98),rgba(213,229,224,.72)); }

.choice-card::after,.style-card::after,.palette-card::after,.material-card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(circle at var(--card-x,50%) var(--card-y,50%),rgba(255,255,255,.74),transparent 38%);
  pointer-events:none;
  transition:opacity .35s ease;
}
.choice-card:hover::after,.style-card:hover::after,.palette-card:hover::after,.material-card:hover::after { opacity:.62; }
.room-metrics { display:grid; grid-template-columns:minmax(15rem,1fr) repeat(2,minmax(11rem,.55fr)); gap:1rem; align-items:end; margin-top:1rem; padding:1.35rem; border:1px solid var(--line); border-radius:1.5rem; background:rgba(255,255,255,.55); }
.room-metrics__intro { align-self:center; }
.room-metrics__intro strong { display:block; font:580 clamp(1.2rem,1.8vw,1.65rem)/1.1 var(--display); }
.room-metrics__intro span { display:block; margin-top:.45rem; color:var(--ink-soft); font-size:.68rem; line-height:1.5; }
.room-metrics label > span { display:block; margin:0 0 .5rem .15rem; font-size:.68rem; font-weight:680; }
.room-metrics input { width:100%; padding:.9rem 1rem; border:1px solid var(--line); border-radius:1rem; background:rgba(247,247,243,.86); font:550 .82rem/1.3 var(--body); outline:none; }
.room-metrics input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(65,109,98,.1); }

.palette-options,.material-options { margin:clamp(2.5rem,5vw,4.5rem) 0 0; padding:0; border:0; }
.palette-options legend,.material-options legend { width:100%; margin-bottom:1.25rem; font:580 clamp(1.45rem,2.2vw,2.2rem)/1.05 var(--display); }
.palette-grid,.material-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-flow:dense; gap:.8rem; }
.palette-card,.material-card { position:relative; min-width:0; overflow:hidden; cursor:pointer; }
.palette-card input,.material-card input { position:absolute; opacity:0; pointer-events:none; }
.palette-card { min-height:11rem; display:flex; flex-direction:column; justify-content:space-between; padding:1rem; border:1px solid var(--line); border-radius:1.35rem; background:rgba(255,255,255,.52); transition:transform .35s ease,border-color .3s ease,box-shadow .3s ease; }
.palette-card:hover,.material-card:hover { transform:translateY(-.3rem); }
.palette-card:has(input:checked),.material-card:has(input:checked) { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent),0 1rem 2.5rem rgba(23,26,24,.09); }
.palette-card > span { position:relative; z-index:1; display:flex; gap:.3rem; height:5.3rem; overflow:hidden; border-radius:.8rem; transform:rotate(-2deg); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.palette-card:hover > span { transform:rotate(0) scale(1.03); }
.palette-card i { flex:1; }
.palette-card strong { position:relative; z-index:1; margin-top:1rem; font-size:.72rem; line-height:1.25; }
.palette-card--sand i:nth-child(1){background:#d8c8b2}.palette-card--sand i:nth-child(2){background:#eee9df}.palette-card--sand i:nth-child(3){background:#8b7762}
.palette-card--sage i:nth-child(1){background:#8fa99d}.palette-card--sage i:nth-child(2){background:#e8e7df}.palette-card--sage i:nth-child(3){background:#46564f}
.palette-card--contrast i:nth-child(1){background:#252b29}.palette-card--contrast i:nth-child(2){background:#9f7b5d}.palette-card--contrast i:nth-child(3){background:#d8d4cb}
.palette-card--custom i:nth-child(1){background:var(--custom-primary,#416d62)}.palette-card--custom i:nth-child(2){background:var(--custom-secondary,#c8ddd6)}.palette-card--custom i:nth-child(3){background:var(--custom-accent,#cbc9e8)}
.custom-palette { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:1rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:1.3rem; background:rgba(255,255,255,.6); }
.custom-palette[hidden] { display:none; }
.custom-palette p { margin:0 auto 0 0; font-size:.75rem; }
.custom-palette label { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.custom-palette input { width:2.3rem; height:2.3rem; padding:.15rem; border:1px solid var(--line); border-radius:50%; background:white; cursor:pointer; }
.custom-palette span { font-size:.65rem; }

.material-card { min-height:14rem; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem; border:1px solid var(--line); border-radius:1.35rem; background:rgba(255,255,255,.55); transition:transform .35s ease,border-color .3s ease,box-shadow .3s ease; }
.material-card > span { position:absolute; inset:0; opacity:.84; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease; }
.material-card:hover > span { transform:scale(1.07); filter:contrast(1.05); }
.material-card > span::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(16,19,18,.74)); }
.material-card strong,.material-card small { position:relative; z-index:2; color:white; }
.material-card strong { font:580 1.35rem/1 var(--display); }
.material-card small { margin-top:.4rem; color:rgba(255,255,255,.72); font-size:.64rem; line-height:1.4; }
.material-card--stone > span { background:linear-gradient(115deg,transparent 48%,rgba(255,255,255,.35) 49%,transparent 51%),radial-gradient(circle at 25% 30%,#d9d0c4,#8e8175 70%); background-size:7rem 7rem,auto; }
.material-card--wood > span { background:repeating-linear-gradient(87deg,#9b7657 0,#b68d68 9px,#79583f 11px,#ae8462 22px); }
.material-card--glass > span { background:linear-gradient(135deg,rgba(222,240,239,.9),rgba(93,139,141,.6)),linear-gradient(45deg,transparent 49%,rgba(255,255,255,.8) 50%,transparent 52%); }
.material-card--metal > span { background:linear-gradient(115deg,#313635,#a6aaa6 42%,#515754 44%,#c0b8aa 70%,#343837); }

.project-summary { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-flow:dense; }
.project-summary > div { transition:background .35s ease,transform .35s ease; }
.project-summary > div:hover { background:white; transform:translateY(-.15rem); }

@media (max-width:1100px) {
  .palette-grid,.material-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .room-metrics { grid-template-columns:1fr 1fr; }
  .room-metrics__intro { grid-column:1/-1; }
}
@media (max-width:980px) {
  .planner-heading { grid-template-columns:1fr; }
  .planner-heading__note { max-width:38rem; }
}
@media (max-width:680px) {
  .planner-workspace { padding-top:8.5rem; }
  .planner-heading { padding:0 .35rem; margin-bottom:3rem; }
  .planner-heading h1 { max-width:100%; font-size:clamp(2.75rem,10.8vw,4.7rem); line-height:.92; }
  .planner-heading__note { padding-left:1rem; }
  .room-metrics,.palette-grid,.material-grid { grid-template-columns:1fr; }
  .room-metrics__intro { grid-column:auto; }
  .material-card { min-height:12rem; }
  .custom-palette { align-items:flex-start; }
  .custom-palette p { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .planner-ambient i,.planner-ambient span,.planner-heading__note > span,.project-planner::before { animation:none; }
  .planner-workspace::before { transition:none; }
}

/* Studio dossier: a restrained, photographic planning surface */
.planner-layout {
  grid-template-columns: minmax(17rem,.34fr) minmax(0,1.66fr);
  overflow: hidden;
  border: 1px solid rgba(23,26,24,.2);
  border-radius: 1.25rem;
  background: #e8e4da;
  box-shadow: 0 2.4rem 5.5rem rgba(23,26,24,.13), 0 .2rem 0 rgba(23,26,24,.08);
  backdrop-filter: none;
}
.planner-layout::before {
  height: 3px;
  background: linear-gradient(90deg, #416d62 0 27%, #b9b3a7 27% 100%);
  background-size: 100% 100%;
  box-shadow: none;
  animation: none;
}
.planner-rail {
  padding-top: clamp(4.8rem,6vw,6.2rem);
  color: var(--ink);
  border-right: 1px solid rgba(23,26,24,.16);
  background:
    linear-gradient(90deg, rgba(255,255,255,.34), transparent 14%, transparent 86%, rgba(23,26,24,.035)),
    repeating-linear-gradient(91deg, rgba(94,72,51,.025) 0 1px, transparent 1px 6px),
    #e7e2d7;
}
.planner-rail::before {
  content: "Projektmappe";
  position: absolute;
  z-index: 2;
  top: 2.2rem;
  left: clamp(2rem,4vw,3.5rem);
  color: var(--ink);
  font: 650 .68rem/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.planner-rail::after {
  inset: 1.25rem;
  border: 1px solid rgba(23,26,24,.07);
  opacity: 1;
  background: none;
  pointer-events: none;
}
.planner-progress { background: rgba(23,26,24,.14); }
.planner-progress span { background: var(--accent); }
.planner-rail button {
  border-radius: .2rem;
  color: rgba(23,26,24,.5);
}
.planner-rail button:disabled { opacity: .62; }
.planner-rail button:not(:disabled):hover {
  color: var(--ink);
  background: rgba(255,255,255,.32);
  transform: translateX(.12rem);
}
.planner-rail button[aria-current="step"] {
  color: var(--ink);
  background: rgba(255,255,255,.44);
  box-shadow: inset 3px 0 0 var(--accent);
}
.planner-rail button b { font-weight: 680; }
.planner-live-summary { margin-top: auto; padding: 2rem 1rem 0; }
.planner-live-summary > p,
.planner-live-summary dt { color: rgba(23,26,24,.48); }
.planner-live-summary dd { color: var(--ink); }
.planner-live-summary dl { border-color: rgba(23,26,24,.14); }
.planner-live-summary dl div { border-color: rgba(23,26,24,.1); }

.project-planner {
  padding: clamp(2.4rem,5vw,5.4rem);
  background: #f6f5f0;
}
.project-planner::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  opacity: .22;
  background:
    linear-gradient(rgba(65,109,98,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,109,98,.1) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  filter: none;
  animation: none;
  mask-image: linear-gradient(to bottom right, #000, transparent 76%);
}
.planner-layout[data-current-step="1"] .project-planner,
.planner-layout[data-current-step="2"] .project-planner,
.planner-layout[data-current-step="3"] .project-planner,
.planner-layout[data-current-step="4"] .project-planner {
  background: #f6f5f0;
}
.planner-step-status {
  align-items: center;
  margin-bottom: clamp(3rem,5vw,4.5rem);
  padding: .8rem 1rem;
  border: 1px solid rgba(23,26,24,.16);
  background: rgba(255,255,255,.58);
}
.planner-step-status span { color: var(--ink); letter-spacing: .12em; }
.planner-step-status strong { color: var(--ink-soft); font-weight: 580; }
.step-heading { margin-bottom: clamp(2.2rem,4vw,3.5rem); }
.step-heading > p {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: var(--accent);
}
.step-heading > p::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; }
.step-heading h3 { max-width: 17ch; font-size: clamp(2.35rem,4vw,4.5rem); line-height: 1; }

.option-grid { gap: .85rem; }
.choice-card {
  min-height: 20rem;
  padding: 1.35rem;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: .65rem;
  background: #28302d;
  box-shadow: 0 .7rem 1.8rem rgba(23,26,24,.1);
}
.choice-card:hover { transform: translateY(-.18rem); }
.choice-card:has(input:checked) {
  border-color: var(--accent-soft);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--accent), 0 1rem 2.2rem rgba(23,26,24,.14);
}
.choice-card::after { display: none; }
.choice-card strong {
  color: white;
  font-size: clamp(1.3rem,1.7vw,1.75rem);
  text-shadow: 0 1px 1.2rem rgba(0,0,0,.45);
}
.choice-card small {
  max-width: 26rem;
  color: rgba(255,255,255,.76);
  text-shadow: 0 1px .8rem rgba(0,0,0,.5);
}
.choice-visual {
  opacity: 1;
  background-position: center;
  background-size: cover;
  filter: saturate(.76) contrast(1.03);
  transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.choice-card:hover .choice-visual { transform: scale(1.025); filter: saturate(.9) contrast(1.04); }
.choice-visual::before {
  inset: 0;
  border: 0;
  background: linear-gradient(to bottom, rgba(18,22,20,.04) 24%, rgba(18,22,20,.18) 52%, rgba(18,22,20,.9) 100%);
}
.choice-visual::after { display: none; }
.choice-card:has(input:checked) .choice-visual::after {
  content: "Ausgewählt";
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: block;
  padding: .45rem .6rem;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: .2rem;
  color: white;
  background: rgba(23,26,24,.72);
  font: 680 .58rem/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.choice-visual--bath { background-image: url("assets/images/hero-bathroom.webp"); }
.choice-visual--kitchen { background-image: url("assets/images/project-kitchen.webp"); }
.choice-visual--living { background-image: url("assets/images/interior-staircase.webp"); }
.choice-visual--multi { background-image: url("assets/images/project-bathroom.webp"); }

.room-metrics {
  margin-top: .85rem;
  border-color: rgba(23,26,24,.17);
  border-radius: .45rem;
  background: rgba(255,255,255,.62);
  box-shadow: 0 .5rem 1.6rem rgba(23,26,24,.055);
}
.room-metrics input { border-radius: .25rem; background: #fbfaf6; }

@media (max-width: 980px) {
  .planner-layout { grid-template-columns: 1fr; }
  .planner-rail { padding: 1.1rem 1.1rem 1.5rem; border-right: 0; border-bottom: 1px solid rgba(23,26,24,.16); }
  .planner-rail::before, .planner-rail::after { display: none; }
  .planner-rail button[aria-current="step"] { box-shadow: inset 0 -2px 0 var(--accent); }
  .planner-live-summary { display: none; }
}
@media (max-width: 680px) {
  .planner-layout { border-radius: .8rem; }
  .project-planner { padding: 1.2rem; }
  .planner-step-status { padding: .75rem; }
  .choice-card { min-height: 15.5rem; }
  .step-heading h3 { font-size: clamp(2.15rem,10vw,3.25rem); }
}