/* V124 focused review: embedded Form & Features bathroom and mirror folios. */
:root{
  --ff-gold:#d6aa53;
  --ff-gold-bright:#f6dc91;
  --ff-ivory:#fff3c6;
  --ff-green:#07110b;
  --ff-ink:#030503;
  --ff-panel:#0a0c08;
  --ff-line:rgba(226,183,91,.34);
}
.form-backdrop{
  opacity:0;
  background-image:url("../../images/form-features-v124/carmichael-bathroom-v124.png")!important;
  filter:blur(31px) brightness(.58) saturate(.95)!important;
  transition:opacity .48s ease;
}
.form-scene-shell{
  z-index:2;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .48s ease,visibility .48s ease;
}
body.scene-form .bedroom-backdrop,html.direct-form .bedroom-backdrop{opacity:0}
body.scene-form .form-backdrop,html.direct-form .form-backdrop{opacity:.99}
body.scene-form .bedroom-scene-shell,html.direct-form .bedroom-scene-shell{
  opacity:0;visibility:hidden;pointer-events:none
}
body.scene-form .form-scene-shell,html.direct-form .form-scene-shell{
  z-index:4;opacity:1;visibility:visible;pointer-events:auto
}
.form-stage{overflow:visible!important;isolation:isolate;background:transparent!important}
.form-sharp-visual{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.form-scene-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
  filter:saturate(1.015) contrast(1.012);
}
.form-stage::before,.form-stage::after{
  content:"";position:absolute;left:0;width:100%;height:12cqw;z-index:0;pointer-events:none
}
.form-stage::before{
  bottom:calc(100% - 1px);
  background:linear-gradient(to top,rgba(28,18,10,.48),rgba(10,7,4,.92) 52%,transparent)
}
.form-stage::after{
  top:calc(100% - 1px);
  background:linear-gradient(to bottom,rgba(29,18,10,.48),rgba(8,5,3,.94) 52%,transparent)
}
.form-transition-veil{
  position:fixed;inset:0;z-index:42;pointer-events:none;opacity:0;visibility:hidden;
  background:
    radial-gradient(ellipse at 90% 40%,rgba(255,220,137,.28),transparent 32%),
    linear-gradient(90deg,rgba(4,3,2,.12),rgba(21,13,6,.78));
  backdrop-filter:blur(0);
  transition:opacity .24s ease,visibility .24s ease
}
body.form-transitioning .form-transition-veil{opacity:1;visibility:visible}
.form-bloom-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.form-mirror-bloom{
  position:absolute;opacity:0;mix-blend-mode:screen;transform:scale(.985);
  transition:opacity .24s ease,transform .34s cubic-bezier(.2,.72,.2,1);
  will-change:opacity,transform
}
.form-mirror-bloom::before,.form-mirror-bloom::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none
}
.form-mirror-bloom::before{
  background:radial-gradient(ellipse at 50% 49%,rgba(255,248,216,.46) 0%,rgba(249,220,148,.30) 25%,rgba(224,161,72,.15) 48%,rgba(150,82,21,.055) 64%,transparent 78%);
  filter:blur(1.18cqw)
}
.form-mirror-bloom::after{
  inset:9% 14%;
  background:radial-gradient(ellipse at 50% 48%,rgba(255,255,232,.23) 0%,rgba(255,219,130,.14) 42%,transparent 74%);
  filter:blur(.68cqw)
}
.form-mirror-bloom-form{left:5.8%;top:-5%;width:25.5%;height:88%}
.form-mirror-bloom-features{left:64.2%;top:-2%;width:32.5%;height:55%}
.form-stage[data-active="form"] .form-mirror-bloom-form,
.form-stage[data-active="features"] .form-mirror-bloom-features{
  opacity:.62;transform:scale(1)
}
.form-hotspot-layer{position:absolute;inset:0;z-index:10;pointer-events:none}
.form-hotspot{
  position:absolute;display:block;border:0;background:transparent;
  cursor:pointer;pointer-events:auto;outline:0;-webkit-tap-highlight-color:transparent
}
.form-hotspot::after{
  content:"";position:absolute;inset:-5%;border-radius:.45cqw;opacity:0;
  box-shadow:0 0 .55cqw rgba(255,238,180,.46),inset 0 0 .2cqw rgba(255,246,205,.28);
  transition:opacity .18s ease
}
.form-hotspot:focus-visible::after{opacity:1}
.form-hotspot-form{left:15.17%;top:31.55%;width:8.55%;height:9.35%}
.form-hotspot-features{left:74.65%;top:28.22%;width:9.27%;height:9.55%}
.form-return{
  position:absolute;z-index:15;left:1.28cqw;bottom:1.35cqh;
  min-width:8.1cqw;padding:.68cqh .78cqw;border:1px solid rgba(238,197,101,.74);
  border-radius:.25cqw;background:linear-gradient(180deg,rgba(19,17,10,.92),rgba(5,7,4,.94));
  color:#f4d88c;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.48),inset 0 0 .45cqw rgba(213,162,61,.08);
  font:900 clamp(9px,1.08cqw,18px)/1 Georgia,serif;letter-spacing:.085em;text-transform:uppercase;
  cursor:pointer;transition:filter .18s ease,transform .18s ease
}
.form-return:hover,.form-return:focus-visible{filter:brightness(1.24);transform:translateY(-1px);outline:0}
body.scene-form .music-player,html.direct-form .music-player{
  left:50%;right:auto;top:max(2px,env(safe-area-inset-top));transform:translateX(-50%)
}
body.scene-form .music-player:hover{transform:translateX(-50%) translateY(.08rem)}

/* Folio overlay */
.form-folio{
  position:fixed;inset:0;z-index:10050;display:grid;place-items:center;
  padding:2.1vh 3vw;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,visibility .26s ease
}
.form-folio[hidden]{display:none!important}
.form-folio.is-open{opacity:1;visibility:visible;pointer-events:auto}
.form-folio-backdrop{
  position:absolute;inset:0;border:0;background:rgba(0,0,0,.91);
  backdrop-filter:blur(13px);cursor:default
}
.form-folio-dialog{
  position:relative;z-index:1;width:min(94vw,1780px);height:min(96vh,1120px);
  display:grid;grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;border:1px solid rgba(216,172,78,.58);border-radius:.55rem;
  color:#e7d8ae;background:
    radial-gradient(circle at 12% 0,rgba(111,61,17,.16),transparent 28rem),
    linear-gradient(135deg,#0b0c08,#020604 62%,#0b0905);
  box-shadow:0 2.5rem 8rem rgba(0,0,0,.88),inset 0 0 3rem rgba(207,151,45,.035)
}
.form-folio-header{
  min-height:82px;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.35rem;border-bottom:1px solid var(--ff-line);
  background:linear-gradient(90deg,rgba(61,34,12,.46),rgba(3,8,5,.2))
}
.form-folio-header small,.form-info-panel small{
  display:block;color:#caa653;font:900 .61rem/1.2 Inter,Segoe UI,sans-serif;
  letter-spacing:.16em;text-transform:uppercase
}
.form-folio-header h2{
  margin:.18rem 0 0;color:#f0ddb0;font:700 clamp(2rem,2.7vw,3.45rem)/.92 Georgia,serif;
  letter-spacing:.02em;text-transform:uppercase
}
.form-folio-close{
  width:2.8rem;height:2.8rem;display:grid;place-items:center;border:1px solid rgba(220,178,81,.44);
  border-radius:50%;background:rgba(4,7,4,.72);color:#e7c975;font:300 2rem/1 Georgia,serif;
  cursor:pointer;transition:filter .16s ease,transform .16s ease
}
.form-folio-close:hover,.form-folio-close:focus-visible{filter:brightness(1.35);transform:scale(1.05);outline:0}
.form-mode-tabs{
  display:flex;gap:.48rem;padding:.55rem 1.25rem;border-bottom:1px solid rgba(216,172,78,.23);
  background:rgba(2,6,4,.74)
}
.form-mode-tabs button,.form-zoom-controls button{
  border:1px solid rgba(213,170,77,.28);background:rgba(13,15,10,.82);color:#bdb79d;
  font:900 .65rem/1 Inter,Segoe UI,sans-serif;letter-spacing:.095em;text-transform:uppercase;
  cursor:pointer;transition:filter .16s ease,border-color .16s ease,color .16s ease,background .16s ease
}
.form-mode-tabs button{min-height:2.45rem;padding:.72rem .92rem}
.form-mode-tabs button[aria-selected="true"]{
  border-color:#e2b95e;color:#f4d98e;background:linear-gradient(180deg,rgba(95,61,20,.62),rgba(20,20,12,.92));
  box-shadow:inset 0 -2px 0 #e8bf62
}
.form-folio.features-mode{--features-extra-row:0px}
.form-folio.features-mode .form-mode-tabs{display:none}
.form-folio-grid{min-height:0;display:grid;grid-template-columns:minmax(190px,13.6vw) minmax(0,1fr) minmax(230px,15.6vw)}
.form-view-rail{
  min-width:0;overflow:hidden;border-right:1px solid rgba(216,172,78,.24);
  background:linear-gradient(180deg,rgba(43,27,10,.42),rgba(4,8,5,.88));
  display:flex;flex-direction:column
}
.form-angle-dial{
  position:relative;flex:0 0 190px;width:170px;height:170px;margin:.85rem auto .35rem;
  border:1px solid rgba(216,172,78,.40);border-radius:50%;
  box-shadow:inset 0 0 2rem rgba(190,128,31,.12),0 0 1.5rem rgba(0,0,0,.42)
}
.form-angle-dial::before,.form-angle-dial::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%
}
.form-angle-dial::before{width:78%;height:78%;border:1px dashed rgba(216,172,78,.19)}
.form-angle-dial::after{width:35px;height:35px;border:1px solid rgba(216,172,78,.34);background:radial-gradient(circle,#7b5a20,#15150c 68%)}
.form-angle-dial span{
  position:absolute;color:#a79b77;font:800 .48rem/1 Inter,Segoe UI,sans-serif;
  letter-spacing:.12em;text-transform:uppercase
}
.form-dial-front{left:50%;top:7px;transform:translateX(-50%)}
.form-dial-back{left:50%;bottom:7px;transform:translateX(-50%)}
.form-dial-left{right:7px;top:50%;transform:translateY(-50%)}
.form-dial-right{left:7px;top:50%;transform:translateY(-50%)}
.form-angle-dial i{
  position:absolute;z-index:3;left:50%;top:50%;width:42%;height:1px;
  transform-origin:left center;transform:rotate(0deg);
  background:linear-gradient(90deg,#f2cf6f,rgba(242,207,111,.08));
  box-shadow:0 0 .55rem rgba(255,218,119,.75);transition:transform .32s ease
}
.form-angle-dial i::after{
  content:"";position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:#ffe08b;box-shadow:0 0 .7rem #ffe08b
}
.form-angle-dial b{
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#f0d07d;font:700 1rem/1 Georgia,serif
}
.form-thumb-list{min-height:0;overflow:auto;padding:.45rem .7rem .85rem;scrollbar-color:#80601f #080b07}
.form-thumb{
  width:100%;min-height:57px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:.66rem;align-items:center;
  margin:0 0 .45rem;padding:.38rem;border:1px solid rgba(216,172,78,.24);
  background:rgba(14,15,10,.76);color:#ddcfaa;text-align:left;cursor:pointer
}
.form-thumb img{width:52px;height:46px;object-fit:cover;object-position:center 22%;background:#171713}
.form-thumb strong{display:block;font:700 .68rem/1.18 Georgia,serif}
.form-thumb small{display:block;margin-top:.2rem;color:#9f9576;font:800 .48rem/1 Inter,Segoe UI,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.form-thumb.is-active{border-color:#e0b452;background:linear-gradient(90deg,rgba(84,59,18,.60),rgba(16,20,12,.78));box-shadow:inset 3px 0 0 #e3b756}
.form-folio-main{min-width:0;min-height:0;display:flex;flex-direction:column;background:#010403}
.form-stage-toolbar{
  min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.48rem .55rem;border-bottom:1px solid rgba(216,172,78,.24);background:rgba(5,10,7,.92)
}
.form-stage-heading{min-width:0}
.form-stage-heading small{display:block;color:#9c997f;font:800 .5rem/1 Inter,Segoe UI,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.form-stage-heading strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#e8d4a5;font:700 .83rem/1.15 Georgia,serif}
.form-zoom-controls{display:flex;align-items:center;gap:.42rem}
.form-zoom-controls button{min-width:2rem;height:2rem;padding:0 .55rem}
.form-zoom-controls button:hover,.form-zoom-controls button:focus-visible{filter:brightness(1.35);border-color:#d9ae50;color:#f5da92;outline:0}
.form-zoom-controls output{min-width:3rem;color:#e7cc7b;text-align:center;font:900 .62rem/1 Inter,Segoe UI,sans-serif}
#formLinkToggle{min-width:7.7rem;color:#f0d47d;border-color:#d4a744}
.form-image-stage{position:relative;min-height:0;flex:1;overflow:hidden;background:#000}
.form-image-viewport{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
.form-image-surface{width:100%;height:100%;display:grid;place-items:center;will-change:transform;transform:translate3d(0,0,0) scale(1)}
.form-image-surface img{
  display:block;max-width:86%;max-height:94%;width:auto;height:auto;object-fit:contain;
  user-select:none;pointer-events:none;-webkit-user-drag:none;
  box-shadow:0 0 2.8rem rgba(0,0,0,.58)
}
.form-image-viewport.is-dragging,.form-compare-viewport.is-dragging{cursor:grabbing}
.form-image-viewport.can-drag,.form-compare-viewport.can-drag{cursor:grab}
.form-view-arrow{
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);width:2.7rem;height:4.5rem;
  border:1px solid rgba(216,172,78,.38);background:rgba(4,9,6,.76);color:#f0cf70;
  font:300 2.1rem/1 Georgia,serif;cursor:pointer
}
.form-view-arrow:hover,.form-view-arrow:focus-visible{filter:brightness(1.4);outline:0}
.form-view-prev{left:.45rem}.form-view-next{right:.45rem}
.form-stage-foot{
  min-height:22px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.25rem .7rem;border-top:1px solid rgba(216,172,78,.21);
  color:#817b64;background:#030704;font:800 .48rem/1 Inter,Segoe UI,sans-serif;
  letter-spacing:.075em;text-transform:uppercase
}
.form-info-panel{
  min-width:0;padding:1rem 1rem 1.2rem;border-left:1px solid rgba(216,172,78,.23);
  overflow:auto;background:linear-gradient(180deg,rgba(40,25,9,.38),rgba(9,10,6,.94))
}
.form-info-panel h3{margin:.32rem 0 .65rem;color:#e9d5a7;font:700 clamp(1.55rem,2vw,2.45rem)/1 Georgia,serif}
.form-info-panel>span{
  display:inline-block;padding:.26rem .46rem;border:1px solid rgba(216,172,78,.33);
  color:#e4c36d;font:900 .54rem/1 Inter,Segoe UI,sans-serif;letter-spacing:.08em;text-transform:uppercase
}
.form-info-panel p{color:#aaa58e;font:400 .76rem/1.55 Inter,Segoe UI,sans-serif}
.form-info-panel hr{height:1px;border:0;background:rgba(216,172,78,.20);margin:1rem 0}
.form-info-note{color:#777865!important;font-size:.65rem!important}
.form-compare-stage{
  position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#000
}
.form-compare-stage[hidden]{display:none!important}
.form-compare-pane{
  min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 28px;
  border-right:1px solid rgba(216,172,78,.28);outline:0
}
.form-compare-pane:last-child{border-right:0}
.form-compare-pane.is-active{box-shadow:inset 0 0 0 1px rgba(226,183,91,.42)}
.form-compare-viewport{min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none}
.form-compare-surface{width:100%;height:100%;display:grid;place-items:center;will-change:transform}
.form-compare-surface img{display:block;max-width:82%;max-height:94%;object-fit:contain;pointer-events:none;user-select:none}
.form-compare-pane>span{
  display:grid;place-items:center;border-top:1px solid rgba(216,172,78,.22);
  color:#d8bf78;background:#080b07;font:700 .62rem/1 Georgia,serif
}
body.form-viewer-open .music-player{opacity:0!important;pointer-events:none!important}

@media(max-width:1100px){
  .form-folio{padding:1vh 1vw}
  .form-folio-dialog{width:98vw;height:98vh}
  .form-folio-grid{grid-template-columns:178px minmax(0,1fr)}
  .form-info-panel{display:none}
  .form-angle-dial{flex-basis:155px;width:142px;height:142px}
  .form-image-surface img{max-width:90%;max-height:93%}
}
@media(max-width:760px){
  /* FEATURES hides the mode-tab row. Collapse that empty grid track so the
     portrait stage receives the full remaining compact-window height. */
  .form-folio.features-mode .form-folio-dialog{grid-template-rows:auto minmax(0,1fr)}
  .form-return{min-width:auto;padding:.46rem .58rem;font-size:9px}
  .form-folio{padding:0}
  .form-folio-dialog{width:100vw;height:100dvh;max-height:none;border-radius:0;border-left:0;border-right:0}
  .form-folio-header{min-height:64px;padding:.65rem .8rem}
  .form-folio-header h2{font-size:1.85rem}
  .form-folio-close{width:2.35rem;height:2.35rem;font-size:1.55rem}
  .form-mode-tabs{padding:.4rem .5rem;overflow-x:auto}
  .form-mode-tabs button{min-height:2.2rem;padding:.58rem .66rem;font-size:.57rem;white-space:nowrap}
  .form-folio-grid{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 92px}
  .form-view-rail{grid-row:2;border:0;border-top:1px solid rgba(216,172,78,.25);overflow:hidden}
  .form-angle-dial{display:none}
  .form-thumb-list{display:flex;gap:.38rem;overflow-x:auto;overflow-y:hidden;padding:.45rem}
  .form-thumb{flex:0 0 112px;min-height:68px;margin:0;grid-template-columns:42px 1fr;gap:.4rem}
  .form-thumb img{width:42px;height:53px}
  .form-thumb strong{font-size:.6rem}.form-thumb small{font-size:.42rem}
  .form-folio-main{grid-row:1}
  .form-stage-toolbar{min-height:43px;padding:.36rem .42rem}
  .form-stage-heading strong{font-size:.71rem}
  .form-zoom-controls{gap:.25rem}.form-zoom-controls button{min-width:1.85rem;height:1.85rem;padding:0 .38rem;font-size:.55rem}
  .form-zoom-controls output{min-width:2.5rem;font-size:.54rem}
  #formLinkToggle{min-width:5.9rem;font-size:.48rem}
  .form-image-surface img{max-width:82%;max-height:93%}
  .form-view-arrow{width:2.1rem;height:3.7rem;font-size:1.6rem}
  .form-stage-foot{font-size:.41rem}
  .form-stage-foot span:last-child{display:none}
  .form-compare-stage{grid-template-columns:1fr 1fr}
  .form-compare-surface img{max-width:94%;max-height:92%}
}
@media(max-width:520px) and (orientation:portrait){
  body.scene-form .music-player,html.direct-form .music-player{--player-width:clamp(225px,58vw,285px)}
  .form-hotspot-form{left:14.7%;top:30.8%;width:9.5%;height:10.8%}
  .form-hotspot-features{left:74.1%;top:27.5%;width:10.2%;height:11%}
  .form-folio-grid{grid-template-rows:minmax(0,1fr) 82px}
  .form-thumb{flex-basis:104px}
  .form-image-surface img{max-width:76%;max-height:92%}
  .form-stage-heading small{display:none}
  .form-stage-heading strong{font-size:.65rem}
}
@media(prefers-reduced-motion:reduce){
  .form-scene-shell,.form-backdrop,.form-transition-veil,.form-mirror-bloom,.form-folio{transition:none!important}
}

/* R3 approved surgical correction: preserve the original folio and contain the complete source image. */
.form-image-surface{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;display:block!important;will-change:transform;transform:translate3d(0,0,0) scale(1)}
.form-image-surface img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center!important;padding:14px 58px!important;display:block!important}
@media(max-width:760px){.form-image-surface img{padding:8px 44px!important}}
@media(max-width:520px) and (orientation:portrait){.form-image-surface img{padding:6px 34px!important}}
