/* ————————————————————————————————————————————————————————————————
   The Session — the fifth room.

   These are the questionnaire's own styles, scoped under .session-layer so the
   house and the questionnaire can share one document without either build's
   rules touching the other. The layer sits over the enfilade and fades in when
   you reach The Session; the house is still behind it, exactly where you left it.
   ———————————————————————————————————————————————————————————————— */

.session-layer{
  position:fixed;inset:0;z-index:200;
  --ease:cubic-bezier(.16,1,.3,1);
  --session-ink:#231B10;
  --session-muted:#71634C;
  --session-line:rgba(35,27,16,.2);
  --hairline:rgba(35,27,16,.16);
  overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease), visibility .9s;
}
.session-layer.open{opacity:1;visibility:visible;}
@media (prefers-reduced-motion:reduce){
  .session-layer{transition:none;}
}

.session-layer {
    background:
      radial-gradient(52% 46% at 50% 4%, rgba(255,251,240,.92) 0%, rgba(255,251,240,0) 72%),
      linear-gradient(115deg, rgba(196,182,148,.16) 0%, transparent 28%, transparent 72%, rgba(142,124,93,.12) 100%),
      linear-gradient(180deg,#F7F2E6 0%,#EFE8D8 58%,#E7DDC7 100%);
    color:var(--session-ink);
    font-family:var(--sans);
    font-weight:300;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
    display:flex;
    flex-direction:column;
  }
.session-layer header {
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
    padding:clamp(16px,2.4vw,26px) clamp(20px,4vw,48px);
    border-bottom:1px solid var(--hairline);
    background:rgba(247,242,230,.72);
    box-shadow:0 12px 40px rgba(35,27,16,.05);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
.session-layer .session-exit {
    justify-self:start;display:inline-flex;align-items:center;gap:10px;
    min-height:44px;padding:10px 16px;
    border:1px solid var(--session-ink);background:var(--session-ink);color:var(--paper);
    text-decoration:none;font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
    box-shadow:0 9px 22px rgba(35,27,16,.16);
    transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
  }
.session-layer .session-exit svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.session-layer .session-exit:hover {transform:translateX(-3px);background:var(--taupe);border-color:var(--taupe);}
.session-layer .session-exit:focus-visible {outline:2px solid var(--taupe);outline-offset:4px;}
.session-layer .wordmark {justify-self:center;display:flex;align-items:center;gap:12px;color:var(--session-ink);}
.session-layer .wordmark svg {width:28px;height:28px;}
.session-layer .wordmark span {
    font-family:var(--serif);font-weight:500;letter-spacing:.16em;
    text-transform:uppercase;font-size:1rem;
  }
.session-layer .session-tag {
    justify-self:end;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--taupe);text-align:right;
  }
@media (max-width:620px) {
.session-layer header {grid-template-columns:auto 1fr;gap:14px;padding:14px 16px;}
.session-layer .session-exit {padding:10px 12px;letter-spacing:.14em;}
.session-layer .session-exit span {max-width:82px;line-height:1.25;}
.session-layer .wordmark {justify-self:end;flex:none;}
.session-layer .wordmark svg {width:22px;height:22px;}
.session-layer .wordmark span {font-size:.82rem;letter-spacing:.12em;}
.session-layer .session-tag {display:none;}
}
.session-layer .progress {
    display:flex;align-items:center;gap:14px;
    padding:clamp(14px,2vw,22px) clamp(20px,4vw,48px) 0;
  }
.session-layer .progress svg {width:34px;height:34px;transform:rotate(-90deg);}
.session-layer .progress .track {fill:none;stroke:rgba(35,27,16,.14);stroke-width:2;}
.session-layer .progress .fill {
    fill:none;stroke:var(--taupe);stroke-width:2;stroke-linecap:round;
    transition:stroke-dashoffset .5s cubic-bezier(.22,1,.36,1);
  }
.session-layer .progress .count {
    font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--session-muted);
  }
.session-layer .progress .movement {
    margin-left:auto;
    font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--taupe);
  }
.session-layer main {
    flex:1;display:flex;align-items:center;justify-content:center;
    padding:clamp(20px,4vw,48px);
  }
.session-layer .card {
    width:min(94vw,720px);
    opacity:0;transform:translateY(18px);
    animation:enter .55s cubic-bezier(.22,1,.36,1) forwards;
  }
@keyframes enter {to{opacity:1;transform:none;}}
.session-layer .card.leave {animation:leave .3s ease forwards;}
@keyframes leave {to{opacity:0;transform:translateY(-14px);}}
@media (prefers-reduced-motion:reduce) {
.session-layer .card {animation:none;opacity:1;transform:none;}
.session-layer .card.leave {animation:none;opacity:0;}
}
.session-layer .q-label {
    font-family:var(--serif);font-weight:300;
    font-size:clamp(1.5rem,3.4vw,2.4rem);
    line-height:1.3;
    margin-bottom:clamp(10px,1.6vw,16px);
  }
.session-layer .q-label em {font-style:italic;color:var(--taupe);}
.session-layer .q-note {
    font-size:.86rem;line-height:1.85;color:var(--session-muted);margin-bottom:clamp(18px,2.4vw,28px);max-width:56ch;
  }
.session-layer .req {color:var(--taupe);}
.session-layer input[type=text], .session-layer input[type=email], .session-layer input[type=tel], .session-layer textarea {
    width:100%;
    background:rgba(255,252,244,.32);
    border:none;border-bottom:1px solid rgba(35,27,16,.36);
    color:var(--session-ink);
    font-family:var(--sans);font-weight:300;
    font-size:clamp(1.05rem,1.6vw,1.3rem);
    padding:12px 2px;
    outline:none;
    transition:border-color .4s var(--ease);
  }
.session-layer textarea {min-height:110px;resize:vertical;line-height:1.6;}
.session-layer input:focus, .session-layer textarea:focus {border-bottom-color:var(--taupe);}
.session-layer input::placeholder, .session-layer textarea::placeholder {color:#91836B;}
.session-layer .investment {
    margin-top:4px;padding:clamp(18px,3vw,28px);
    border:1px solid rgba(35,27,16,.2);
    background:rgba(255,252,244,.42);
    box-shadow:0 18px 54px rgba(35,27,16,.06);
  }
.session-layer .investment-readout {display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;}
.session-layer .investment-readout span {
    font-size:.61rem;letter-spacing:.24em;text-transform:uppercase;color:var(--session-muted);
  }
.session-layer .investment-readout output {
    font-family:var(--serif);font-size:clamp(2rem,6vw,3.25rem);font-weight:400;line-height:.9;color:var(--session-ink);
    font-variant-numeric:tabular-nums;
  }
.session-layer input[type=range] {
    --range-pct:50%;
    width:100%;height:28px;margin:0;padding:0;
    appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;outline:none;
  }
.session-layer input[type=range]::-webkit-slider-runnable-track {
    height:3px;border-radius:0;
    background:linear-gradient(90deg,var(--session-ink) 0 var(--range-pct),rgba(35,27,16,.16) var(--range-pct) 100%);
  }
.session-layer input[type=range]::-moz-range-track {height:3px;background:rgba(35,27,16,.16);}
.session-layer input[type=range]::-moz-range-progress {height:3px;background:var(--session-ink);}
.session-layer input[type=range]::-webkit-slider-thumb {
    width:25px;height:25px;margin-top:-11px;border-radius:50%;
    -webkit-appearance:none;appearance:none;border:6px solid var(--session-ink);background:var(--paper);
    box-shadow:0 4px 14px rgba(35,27,16,.2);
  }
.session-layer input[type=range]::-moz-range-thumb {
    width:13px;height:13px;border-radius:50%;border:6px solid var(--session-ink);background:var(--paper);
    box-shadow:0 4px 14px rgba(35,27,16,.2);
  }
.session-layer input[type=range]:focus-visible::-webkit-slider-thumb {outline:3px solid rgba(142,124,93,.38);outline-offset:4px;}
.session-layer input[type=range]:focus-visible::-moz-range-thumb {outline:3px solid rgba(142,124,93,.38);outline-offset:4px;}
.session-layer .investment-scale {
    display:grid;grid-template-columns:repeat(4,1fr);margin-top:5px;
    font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--session-muted);
  }
.session-layer .investment-scale span:nth-child(2),.session-layer .investment-scale span:nth-child(3){text-align:center;}
.session-layer .investment-scale span:last-child{text-align:right;}
@media (max-width:620px){
  .session-layer .investment-readout {align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:24px;}
  .session-layer .investment-readout output {font-size:2.6rem;}
  .session-layer .investment-scale {font-size:.52rem;letter-spacing:.1em;}
}
.session-layer .choices {display:flex;flex-wrap:wrap;gap:12px;}
.session-layer .choice {
    border:1px solid rgba(35,27,16,.3);
    background:rgba(255,252,244,.34);color:var(--session-ink);
    font-family:var(--sans);font-weight:300;
    font-size:.92rem;letter-spacing:.04em;
    padding:13px 22px;cursor:pointer;
    transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  }
.session-layer .choice:hover {border-color:var(--taupe);background:rgba(255,252,244,.75);}
.session-layer .choice.on {background:var(--session-ink);color:var(--paper);border-color:var(--session-ink);}
.session-layer .choice:focus-visible {outline:2px solid var(--taupe);outline-offset:3px;}
.session-layer .other-wrap {margin-top:14px;display:none;}
.session-layer .other-wrap.show {display:block;}
.session-layer .actions {
    display:flex;align-items:center;gap:18px;
    margin-top:clamp(24px,3.4vw,40px);
  }
.session-layer .btn {
    font-family:var(--sans);
    font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
    padding:15px 34px;cursor:pointer;
    border:1px solid var(--session-ink);background:var(--session-ink);color:var(--paper);
    transition:background .45s var(--ease),color .45s var(--ease);
  }
.session-layer .btn:hover, .session-layer .btn:focus-visible {background:var(--taupe);border-color:var(--taupe);color:var(--paper);}
.session-layer .btn:focus-visible {outline:2px solid var(--taupe);outline-offset:3px;}
.session-layer .btn.ghost {background:rgba(255,252,244,.4);border-color:rgba(35,27,16,.38);color:var(--session-ink);}
.session-layer .btn.ghost:hover {background:rgba(255,252,244,.85);color:var(--session-ink);border-color:var(--session-ink);}
.session-layer .hint {font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--session-muted);}
@media (max-width:620px) {
.session-layer .hint {display:none;}
}
.session-layer .error {
    margin-top:12px;font-size:.8rem;color:#C98B6B;display:none;
  }
.session-layer .error.show {display:block;}
.session-layer .review {max-height:52vh;overflow:auto;padding-right:8px;margin-top:8px;}
.session-layer .review::-webkit-scrollbar {width:4px;}
.session-layer .review::-webkit-scrollbar-thumb {background:rgba(35,27,16,.24);}
.session-layer .review-item {border-bottom:1px solid var(--hairline);padding:12px 0;}
.session-layer .review-item .rq {font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--session-muted);}
.session-layer .review-item .ra {font-size:.95rem;color:var(--session-ink);margin-top:4px;white-space:pre-wrap;}
.session-layer .review-item .ra.empty {color:#91836B;font-style:italic;}
.session-layer .done-mark {width:56px;height:56px;margin:0 auto 20px;display:block;}
.session-layer .done-mark path {
    fill:none;stroke:var(--taupe);stroke-width:1.4;stroke-linecap:round;
    stroke-dasharray:1400;stroke-dashoffset:1400;
    animation:draw 2.6s cubic-bezier(.4,0,.2,1) forwards;
  }
@keyframes draw {to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce) {
.session-layer .done-mark path {animation:none;stroke-dashoffset:0;}
}
.session-layer .center {text-align:center;}
.session-layer footer {
    padding:clamp(12px,1.6vw,18px) clamp(20px,4vw,48px);
    border-top:1px solid var(--hairline);
    font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--session-muted);
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  }
.session-layer footer a {color:var(--taupe);text-decoration:none;font-weight:500;}
.session-layer .drop {
    border:1px dashed rgba(35,27,16,.34);
    padding:clamp(24px,4vw,38px) 20px;text-align:center;cursor:pointer;
    transition:border-color .4s var(--ease),background .4s var(--ease);
  }
.session-layer .drop:hover, .session-layer .drop:focus-visible {border-color:var(--taupe);background:rgba(255,252,244,.55);}
.session-layer .drop:focus-visible {outline:2px solid var(--taupe);outline-offset:3px;}
.session-layer .drop .plus {font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--taupe);display:block;}
.session-layer .drop .lbl {
    display:block;margin-top:8px;
    font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--session-muted);
  }
.session-layer .shots {display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;}
.session-layer .shot {width:112px;}
.session-layer .shot .thumb {
    width:112px;height:112px;object-fit:cover;display:block;
    border:1px solid rgba(35,27,16,.24);background:var(--cream);
  }
.session-layer .shot .bar {height:2px;background:rgba(35,27,16,.12);}
.session-layer .shot .bar i {display:block;height:2px;width:100%;background:var(--taupe);
    transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);}
.session-layer .shot input {
    width:100%;font-size:16px;padding:7px 2px;
    border-bottom:1px solid rgba(35,27,16,.24);
  }
.session-layer .shot .rm {
    background:none;border:none;cursor:pointer;padding:5px 0 0;
    font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;
    text-transform:uppercase;color:var(--session-muted);
  }
.session-layer .shot .rm:hover {color:#C98B6B;}
.session-layer .wt-stage {
    position:relative;width:100%;max-width:460px;margin:0 auto;
    aspect-ratio:3/4;background:#0E0A05;overflow:hidden;
    border:1px solid rgba(35,27,16,.28);
  }
.session-layer .wt-stage video {width:100%;height:100%;object-fit:cover;display:block;}
.session-layer .wt-hud {
    position:absolute;left:0;right:0;bottom:0;
    padding:14px 16px;display:flex;align-items:center;gap:10px;
    background:linear-gradient(0deg,rgba(24,18,9,.85),transparent);
  }
.session-layer .wt-dot {
    width:8px;height:8px;border-radius:50%;background:#C98B6B;flex:none;
    animation:wtpulse 1.7s ease-in-out infinite;
  }
@keyframes wtpulse {0%,100%{opacity:.35;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce) {
.session-layer .wt-dot {animation:none;opacity:1;}
}
.session-layer .wt-count {font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);}
.session-layer .wt-guide {
    margin-left:auto;font-family:var(--serif);font-style:italic;
    font-size:.95rem;color:var(--paper);text-align:right;
  }
.session-layer .wt-track {height:2px;background:rgba(35,27,16,.16);margin-top:18px;}
.session-layer .wt-track i {display:block;height:2px;width:100%;background:var(--sand);
    transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease);}
.session-layer .swatches {display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.session-layer .sw {width:78px;}
.session-layer .sw b {display:block;height:56px;border:1px solid rgba(35,27,16,.24);}
.session-layer .sw span {
    display:block;margin-top:6px;
    font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--session-muted);
  }

/* The card can outgrow the viewport (the review, the camera stage). Centring with
   auto margins instead of align-items:center keeps the top reachable when it does. */
.session-layer main{
  align-items:flex-start;
  min-height:0;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.session-layer .card{margin:auto 0;}

/* While the room is open the house behind it holds still — you come back out to
   the same doorway you left from. */
html.session-open, html.session-open body{ overflow:hidden; }