[hidden]{display:none!important}.tour{background:#182119}.house{min-height:100svh;min-height:max(700px,100svh);display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden}.scenery,.scene,.wash{position:absolute;inset:0;pointer-events:none}.scenery{z-index:-3}.scene{background-position:center;background-size:cover;opacity:0}.scene.active{opacity:1}.exterior{background-image:url(townhouse.jpg)}.dining{background-image:url(tour-dining.jpg);background-position:center 59%}.living{background-image:url(tour-living.jpg)}.wash{z-index:-2;background:linear-gradient(0deg,#121a14e8,transparent 42%,#121a1466 80%,#121a14bd),linear-gradient(90deg,#111913e0,transparent 73%)}.tour header,.tour-footer{z-index:1}.tour header nav a,.tour-footer a{font-weight:650}.contact-trigger,.glass .pill{background:#17231d66}.tour-content{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:65px 38px;min-width:0}.welcome{max-width:580px;position:relative;z-index:1;pointer-events:none}.welcome a{pointer-events:auto}.welcome p:not(.label),.room-intro p:not(.label){max-width:380px;color:#fbf6e9;font-size:17px}.tour h1{font-size:clamp(52px,8vw,112px);margin:.12em 0 .17em}.hotspots{position:absolute;inset:0}.hotspot{position:absolute;display:flex;align-items:center;gap:8px;background:#17231dbc;border:1px solid #ffffff80;border-radius:99px;padding:6px 13px 6px 6px;font-weight:700;box-shadow:0 8px 30px #0004}.hotspot:hover{background:#253a2a}.product-spot{left:63%;top:59%}.about-spot{left:79%;top:38%}.orb{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#182119;font-size:20px;line-height:1}.tour-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:15px;color:#eee9df;font-size:12px}.tour-footer nav{display:flex;gap:16px}.tour-footer a[aria-current]{color:var(--lime)}.room-intro{margin-bottom:28px}.table-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:auto}.product{border:1px solid #f9f5df9a;border-radius:11px;background:linear-gradient(145deg,#fff9eaf7,#e8dfcbf5);color:#252d23;text-align:left;display:flex;flex-direction:column;align-items:flex-start;padding:17px;min-height:156px;box-shadow:0 14px 30px #090e09a1;transition:transform .2s ease,background .2s ease}.product:hover{transform:translateY(-5px);background:#fff8e9}.card-index{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#4b6348;font-weight:800}.product strong{font:400 clamp(21px,2.45vw,34px)/1.04 Georgia,serif;letter-spacing:-.04em;margin:.42em 0 .65em}.card-more{margin-top:auto;font-size:12px;font-weight:700}.room-link{align-self:flex-start;margin-top:17px;text-decoration:underline;text-underline-offset:4px;color:#fff9e9}.about-grid{display:grid;grid-template-columns:minmax(145px,240px) minmax(0,600px);align-items:end;justify-content:end;gap:18px}.guide,.glass{margin:0;background:#17241dd9;border:1px solid #d2edcf80;box-shadow:0 10px 45px #09160c54;border-radius:16px;overflow:hidden}.guide img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}.guide figcaption{font-size:12px;font-weight:650;padding:10px 12px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:5px}.glass{padding:clamp(20px,4vw,40px);backdrop-filter:blur(15px);background:linear-gradient(140deg,#1e3026e3,#15231db5)}.glass h1{font-size:clamp(41px,6vw,83px)}.glass p{max-width:480px}.glass .pill.primary{background:var(--lime)}.voice-note{font-size:12px;color:#e0ded0;margin-bottom:0}.tour dialog{width:min(530px,calc(100% - 32px));max-height:calc(100svh - 32px);border:1px solid #eae2d4;border-radius:18px;background:#f5eee2;color:#202b20;padding:0;box-shadow:0 20px 80px #0008}.tour dialog::backdrop{background:#0a130dc9;backdrop-filter:blur(4px)}.detail-shell{position:relative;padding:32px}.detail-shell .label{color:#405d3d;padding-right:35px}.detail-shell h2{font-size:clamp(39px,6vw,58px)}.detail-shell .pill:not(.primary){border-color:#a3ae9d}.detail-shell .close{position:absolute;right:12px;top:12px;color:#202b20;background:none;border:1px solid #a3ae9d;border-radius:50%;width:40px;height:40px;font-size:22px;line-height:1}.detail-shell .actions{margin-top:24px}
@media(max-width:760px){.house{min-height:100svh}.tour header nav{gap:11px}.tour header{gap:8px}.tour header .brand{font-size:17px}.tour header .brand svg{width:19px}.tour header .pill{padding:6px 8px}.tour-content{padding-block:44px 26px}.welcome{margin-top:auto}.welcome p:not(.label),.room-intro p:not(.label){font-size:15px}.hotspots{position:relative;inset:auto;display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.hotspot{position:static;font-size:12px}.orb{width:23px;height:23px;font-size:15px}.tour-footer{align-items:flex-start}.tour-footer nav{gap:8px;flex-wrap:wrap;font-size:11px}.tour-footer>span{display:none}.table-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.product{min-height:125px;padding:12px}.about-grid{grid-template-columns:1fr;justify-items:start;gap:10px}.guide{display:flex;align-items:center}.guide img{width:62px;height:62px}.glass{width:100%}.exterior{background-position:63% center}}
@media(prefers-reduced-motion:reduce){.scene,.product{transition:none}.scene{transform:none}}
.shelf{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;margin-bottom:12px}.shelf button{background:#152219db;border:1px solid #ffffff67;border-radius:99px;padding:7px 12px;font-size:12px;font-weight:650}.shelf button[aria-pressed=true]{background:var(--lime);color:var(--ink);border-color:transparent}.table-cards{margin-top:0}.table-cards:has(>:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}.table-cards:has(>:nth-child(5)) .product strong{font-size:clamp(20px,2.1vw,30px)}.room-intro{margin-bottom:20px}
@media(max-width:760px){.table-cards:has(>:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}}
.exterior{background-image:url(estate.jpg);background-position:var(--estate-align,50%) center;transform-origin:var(--door-centre,70%) var(--door-middle,50%)}
/* Original entrance film only. Destination room layouts remain independent. */
.exterior.opening{transform:scale(1.65);transition:transform 1.16s cubic-bezier(.32,.05,.65,1)}
.door-reveal{position:absolute;left:var(--door-x);top:var(--door-y);width:var(--door-w);height:var(--door-h);perspective:650px;visibility:hidden}
.exterior.opening .door-reveal{visibility:visible}
.door-interior,.door-leaf{position:absolute;inset:0}
.door-interior{background:linear-gradient(90deg,#1c120aa0,transparent),url(tour-dining.jpg) 54% 53%/auto 100%}
.door-leaf{background:var(--estate-image) var(--door-image-x) var(--door-image-y)/var(--estate-w) var(--estate-h) no-repeat;transform-origin:left center;transition:transform .86s cubic-bezier(.25,.12,.35,1)}
.exterior.opening .door-leaf{transform:rotateY(-87deg)}
.hallway{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:3;background:#27241c url(tour-hallway.jpg) center/cover;transform:scale(1.02);transform-origin:50% 48%;transition:opacity .55s ease,transform 1.65s cubic-bezier(.25,.45,.54,1);pointer-events:none}
.house.entering .hallway{visibility:visible}
.house.traversing .hallway{opacity:1;transform:scale(1.24)}
.house.entering .welcome{opacity:0;visibility:hidden;transition:opacity .28s ease}
.house.entering .welcome a{pointer-events:none}
.tour .house.entering > header,
.tour .house.traversing > header{opacity:0;visibility:hidden;pointer-events:none;transition:none}
@media(max-width:760px){.hallway{background-position:52% center}}
@media(prefers-reduced-motion:reduce){.exterior.opening,.door-leaf,.hallway{transition:none;transform:none}}

.birds{position:absolute;width:90px;height:auto;top:7%;left:40%;color:#253024;opacity:0;animation:flight 24s linear infinite}
@keyframes flight{0%,12%{opacity:0;transform:translate(-12vw,8px) scale(.7)}17%{opacity:.75}44%{opacity:.7}49%,100%{opacity:0;transform:translate(45vw,-28px) scale(.95)}}
.tour .hotspots{display:contents}.tour .hotspot{position:absolute;z-index:2}.tour .product-spot{left:clamp(85px,var(--door-centre),calc(100% - 85px));top:var(--door-middle,50%);transform:translate(-50%,-50%);gap:11px;padding:7px 13px 7px 8px;background:#16221be8;border-color:#f0e6cd9e;line-height:1.15;white-space:nowrap;box-shadow:0 10px 36px #0009}.product-spot small{display:block;text-transform:uppercase;font-size:9px;letter-spacing:.13em;color:var(--lime);margin-bottom:3px}.product-spot .orb{width:34px;height:34px}.spot-arrow{color:#e6f4c7}.tour .about-spot{left:auto;right:4%;top:61%;white-space:nowrap}.tour .tour-content{position:static}.tour .welcome{pointer-events:none}.tour .welcome a{pointer-events:auto}
#my-products.tour-content{justify-content:flex-start;padding-top:26px}
#my-products h1{font-size:clamp(42px,6vw,82px)}
#my-products .room-intro{position:relative;z-index:1;margin:0;pointer-events:none}
.table-deck{position:absolute;left:50%;top:var(--table-y,66%);z-index:2;transform:translate(-50%,-50%);width:min(77%,1040px);display:flex;justify-content:center}
.table-trigger{background:#1d2b22;color:#fbf4e5;border:1px solid #f2e6c3;border-radius:9px;min-height:47px;padding:10px 16px;display:inline-flex;gap:20px;align-items:center;justify-content:space-between;font-weight:700;box-shadow:0 10px 25px #0008}
.table-trigger[aria-expanded=true] .chevron{transform:rotate(180deg)}
.table-stage{position:absolute;left:0;right:0;bottom:calc(100% + 8px);transform-origin:center bottom}
.table-stage .shelf{margin:8px 0 0;justify-content:center}
.table-stage .product{min-height:128px}
.table-stage.rise{animation:table-rise .48s cubic-bezier(.22,.65,.3,1) both}
@keyframes table-rise{from{opacity:0;transform:perspective(650px) translateY(64px) rotateX(-58deg) scale(.88)}to{opacity:1;transform:perspective(650px) translateY(0) rotateX(0) scale(1)}}
@media(min-width:761px) and (max-height:780px){#my-products .room-intro p:not(.label){display:none}}
@media(max-width:760px){.tour .welcome{margin-top:auto}.tour .product-spot{top:clamp(135px,calc(var(--door-middle) - 62px),46%)}.tour .about-spot{top:52%;right:5%}.table-deck{position:relative;left:auto;top:auto;transform:none;width:100%;margin-top:clamp(80px,21vh,185px);flex-direction:column;align-items:center;gap:10px}.table-stage{position:static;width:100%;order:1}.table-stage .product{min-height:100px}.table-stage .shelf{margin-bottom:0}#my-products.tour-content{padding-top:22px}}
@media(prefers-reduced-motion:reduce){.birds{display:none}.table-stage.rise{animation:none}}
/* Keep the entrance clear while the link points into the house. */
.tour .product-spot{
  left:clamp(170px,calc(var(--door-x,65%) - 22px),calc(100% - 16px));
  top:calc(var(--door-y,35%) + var(--door-h,33%) * .19);
  transform:translate(-100%,-50%);
  padding:8px 13px 8px 8px;
  font:400 21px/1.08 Georgia,serif;
  letter-spacing:-.035em;
}
.product-spot small{font:700 9px/1.15 system-ui,sans-serif;letter-spacing:.14em}
.product-spot .spot-arrow{font:600 13px/1 system-ui,sans-serif}
@media(max-width:760px){
  .tour .product-spot{left:clamp(148px,calc(var(--door-x,65%) - 10px),calc(100% - 12px));top:clamp(115px,calc(var(--door-y,35%) + var(--door-h,33%) * .12),42%);font-size:18px;gap:7px}
  .product-spot .orb{width:27px;height:27px}
  .product-spot .orb svg{width:16px;height:16px}
}
/* The entry controls share a single rail, outside the doorway. */
.entrance-menu{pointer-events:auto;display:grid;width:min(100%,292px);gap:8px;margin-top:24px}
.entrance-menu a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid #f6ebd780;border-radius:8px;background:var(--ink);box-shadow:0 8px 25px #0003;color:var(--cream);font:400 24px/1 Georgia,serif;min-height:44px}
.entrance-menu a:hover,.entrance-menu a:focus-visible{background:#304536}
.entrance-menu a small{display:block;margin-top:5px;font:600 10px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#e0eaca}
.entry-index{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;background:#d8efaf;color:#1b291f;font:750 10px/1 system-ui,sans-serif}
.entry-arrow{font:650 15px/1 system-ui,sans-serif;color:#e2f4bd}
.table-stage .product{transform-origin:center bottom;box-shadow:0 8px 14px #15110bb3}
.table-stage .picked-up{opacity:0}
.card-in-hand{position:fixed;z-index:30;margin:0;pointer-events:none;box-shadow:0 18px 30px #0008;transition:none;min-height:0}
.tour dialog[open] .detail-shell{animation:card-details .22s ease-out both}
@keyframes card-details{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.entrance-menu{width:min(100%,244px);margin-top:16px}.entrance-menu a{font-size:21px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.tour dialog[open] .detail-shell{animation:none}}
.landing-about{margin-top:20px;max-width:380px}.landing-about h2{font:700 11px/1.2 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin:0 0 7px}.welcome .landing-about p{margin:0}.landing-about+.entrance-menu{margin-top:19px}
.library{background-image:url(tour-library.jpg);background-position:50% 60%}
.exterior.to-library .door-interior{background-image:linear-gradient(90deg,#1c120aa0,transparent),url(tour-library.jpg)}
#library.tour-content{justify-content:space-between;padding-top:26px;padding-bottom:clamp(32px,10vh,110px)}
#library h1{font-size:clamp(43px,6vw,82px)}
.book-shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,20px);width:min(100%,900px);align-self:center}
.book-shelf .book,.card-in-hand.book{color:#fff4dc;border:1px solid #ecd2a47a;border-left:6px solid #e8c99080;border-radius:3px 9px 9px 3px;box-shadow:0 9px 22px #0d120cc9;min-height:clamp(130px,18vw,200px);background:linear-gradient(140deg,var(--cover),#171b19)}
.book-shelf .book:hover{background:linear-gradient(140deg,var(--cover),#30332d)}
.book .card-index{color:#f2d6a4}.book strong{font-size:clamp(21px,2.7vw,35px)}
.book-renovation{--cover:#324b37}.book-hmo{--cover:#3a505c}.book-investor{--cover:#624738}.book-shortlet{--cover:#5e4556}
@media(max-width:760px){#library.tour-content{padding-bottom:26px}.book-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}.book-shelf .book{min-height:120px}.book-shelf .book strong{font-size:21px}.tour-footer nav{column-gap:9px;row-gap:4px}}
.garden{background-image:url(tour-garden.jpg);background-position:61% center}
.exterior.to-garden .door-interior{background-image:linear-gradient(90deg,#1c120aa0,transparent),url(tour-garden.jpg)}
.garden-panel{width:min(100%,480px)}.garden-panel h1{font-size:clamp(42px,6vw,74px)}.garden-panel .actions{gap:8px}
@media(max-width:760px){#garden.tour-content{justify-content:flex-end;padding-top:145px}.garden{background-position:71% center}.garden-panel{padding:18px}.garden-panel .pill{white-space:normal}}
.garden{background-image:url(tour-garden-working.jpg);background-position:46% center}
.garden.active{animation:garden-camera 14s ease-in-out infinite alternate}
@keyframes garden-camera{from{transform:scale(1)}to{transform:scale(1.055)}}
.garden-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(265px,345px);gap:22px;align-items:end}
.garden-greeting{align-self:end;max-width:425px;padding:21px;background:linear-gradient(120deg,#142018ed,#17251ba8);border:1px solid #f6e7c94a;border-radius:12px}
.garden-greeting h1{font-size:clamp(39px,5.6vw,72px)}
.garden-greeting p:not(.label){margin:8px 0 13px}.garden-greeting .voice-note:empty{display:none}
.builder-voice{background:#16241b99}
.garden-enquiry h2{font-size:clamp(36px,4vw,54px)}.garden-enquiry .garden-photo-note{font-size:13px;margin-top:20px}.garden-photo-link{font-size:13px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.garden-layout{grid-template-columns:1fr;gap:10px}.garden-greeting,.garden-enquiry{padding:16px}.garden-greeting h1{font-size:42px}.garden-enquiry h2{font-size:35px}#garden.tour-content{padding-top:150px}.garden{background-position:29% center}}
@media(prefers-reduced-motion:reduce){.garden.active{animation:none}}
/* Keep the original estate terrace and builder in view. */
.garden{background-image:url(tour-garden.jpg);background-position:61% center}
.garden-layout{width:min(100%,435px);grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
.garden-greeting{padding:0;background:none;border:0;border-radius:0}
.garden-greeting h1{font-size:clamp(40px,5.1vw,70px)}
.garden-enquiry{padding:20px 22px}.garden-enquiry h2{font-size:clamp(33px,3.6vw,48px)}
#garden.tour-content{padding-block:24px 22px}
@media(max-width:760px){#garden.tour-content{padding-top:clamp(110px,22vh,200px)}.garden{background-position:73% center}.garden-layout{gap:10px}.garden-greeting{max-width:330px}}
.garden-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:61% center;opacity:0;transition:opacity .28s ease;pointer-events:none}
.garden-video.speaking{opacity:1}
@media(max-width:760px){.garden-video{object-position:73% center}}
@media(prefers-reduced-motion:reduce){.garden-video{display:none}}
/* Keep the whole builder in frame as the garden opens. */
.house:has(#garden:not([hidden])){min-height:100svh}
#garden.tour-content{justify-content:center;padding-block:20px}
.garden-layout{width:100%;max-width:none;display:grid;grid-template-columns:minmax(245px, .75fr) minmax(0, 1.4fr);grid-template-areas:"greeting stage" "enquiry stage";align-items:center;gap:12px 24px}
.garden-stage{grid-area:stage;position:relative;align-self:center;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #f0e0c480;border-radius:14px;background:#20281d;box-shadow:0 14px 55px #0008}
.garden-stage img,.garden-stage .garden-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.garden-greeting{grid-area:greeting;align-self:end;max-width:none}
.garden-enquiry{grid-area:enquiry;align-self:start}
.garden-greeting h1{font-size:clamp(34px,4.2vw,60px)}
.garden-enquiry h2{font-size:clamp(30px,3.3vw,45px)}
@media(max-width:760px){
  #garden.tour-content{justify-content:flex-start;padding-block:12px 18px}
  .garden-layout{grid-template-columns:1fr;grid-template-areas:"stage" "greeting" "enquiry";gap:11px}
  .garden-greeting h1{font-size:clamp(34px,10vw,46px)}
  .garden-enquiry{padding:15px}
}
@media(prefers-reduced-motion:reduce){.garden-stage .garden-video{display:none}}
.tour dialog.enquiry-modal{width:min(640px,calc(100% - 22px));background:#1c2c22f7;color:#fff6e5;border:1px solid #e7d4ae8c;backdrop-filter:blur(17px);max-height:calc(100svh - 28px)}
.enquiry-shell{padding:clamp(17px,4vw,30px)}
.tour .enquiry-header{display:flex;min-height:0;align-items:flex-start;gap:12px;padding-bottom:13px;margin-bottom:15px}
.enquiry-header h2{font-size:clamp(36px,6vw,56px);margin:.12em 0 .25em}.enquiry-header h2 em{color:var(--lime)}
.enquiry-header p{margin:0}.enquiry-header p:not(.label){color:#e0ded0}
.enquiry-close{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#101b15;border:1px solid var(--line);font-size:23px}
#garden-enquiry-fields{display:grid;gap:12px}.enquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#garden-enquiry-fields label{display:block;font-size:13px;font-weight:650;min-width:0}
#garden-enquiry-fields small{font-size:11px;font-weight:400;color:#d5dece}
#garden-enquiry-fields input:not([type=checkbox]),#garden-enquiry-fields textarea{display:block;width:100%;margin-top:4px;border-radius:7px;border:1px solid #f7eed260;background:#122018;color:#fff6e5;padding:9px 10px;font:inherit;font-weight:400}
#garden-enquiry-fields textarea{resize:vertical}.enquiry-upload{padding:9px 10px;border:1px dashed #f7eed279;border-radius:8px}
#garden-enquiry-fields .enquiry-upload input{border:0;padding:3px 0;background:transparent}
.file-status:empty{display:none}.file-status,.enquiry-preview-note{font-size:12px;color:#e2e8d6;margin:0}
#garden-enquiry-fields .enquiry-consent{display:flex;gap:8px;align-items:center}
.enquiry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px}.enquiry-actions a{text-decoration:underline;text-underline-offset:3px;font-size:13px}
@media(max-width:430px){.enquiry-grid{grid-template-columns:1fr}}
/* Blend the builder into the garden rather than presenting a video card. */
.garden-stage{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
@media(min-width:761px){
  #garden.tour-content{position:static}
  .garden-layout{width:min(100%,460px);grid-template-columns:minmax(0,1fr);grid-template-areas:"greeting" "enquiry";gap:12px}
  .garden-stage{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:-3;pointer-events:none;mask-image:linear-gradient(0deg,transparent 5%,#000 23%,#000 79%,transparent 96%)}
  .garden-stage img,.garden-stage .garden-video{object-fit:contain;object-position:center}
  .house:has(#garden:not([hidden])) .scenery .garden{filter:brightness(.45)}
  .garden-greeting{max-width:405px;text-shadow:0 2px 12px #000}
  .garden-enquiry{max-width:390px}
}
@media(max-width:760px){
  .garden-stage{width:calc(100% + 36px);margin-inline:-18px}
}
/* One full-bleed garden, with the enquiry alongside the builder. */
.house:has(#garden:not([hidden])) .scenery .garden{filter:none;background-position:73% center}
.garden .garden-video{object-fit:cover;object-position:73% center}
/* The Does It All film is a clean image at the top: no card edge, shadow,
   background plate or wash tint over it. The enquiry form sits below. */
.house:has(#garden:not([hidden])) .wash{background:none}
.house:has(#garden:not([hidden])) .scene.garden{border:0;box-shadow:none;background-color:transparent}
.house:has(#garden:not([hidden])) .garden-video{background:transparent;box-shadow:none;border:0}
#garden.tour-content{padding-block:15px}
.garden-layout{width:min(100%,370px);max-width:none;grid-template-columns:1fr;grid-template-areas:"greeting" "enquiry";gap:8px}
.garden-greeting{max-width:none}.garden-greeting h1{font-size:clamp(32px,4vw,50px)}
#builder-script{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.garden-enquiry{max-width:none;padding:14px 16px;max-height:calc(100svh - 245px);overflow:auto}
.garden-enquiry h2{font-size:clamp(28px,3vw,40px);margin:.15em 0 .28em}.garden-enquiry>.label{margin:0}
.garden-enquiry #garden-enquiry-fields{gap:8px}.garden-enquiry #garden-enquiry-fields input:not([type=checkbox]),.garden-enquiry #garden-enquiry-fields textarea{padding:6px 8px}.garden-enquiry textarea{min-height:52px;max-height:110px}
.garden-enquiry .enquiry-actions .pill{padding:8px 12px}
@media(max-width:760px){
  #garden.tour-content{padding-top:clamp(235px,45svh,440px)}
  .garden-layout{width:100%;grid-template-areas:"greeting" "enquiry"}
  .garden-enquiry{max-height:none}
  .house:has(#garden:not([hidden])) .scenery .garden,.garden .garden-video{background-position:78% center;object-position:78% center}
}
.tour dialog.product-detail{width:min(590px,calc(100% - 28px));background:linear-gradient(130deg,#263c2eef,#17251cf5);color:#fff6e5;border:1px solid #e7d4ae8c;backdrop-filter:blur(18px)}
.product-detail .detail-shell{padding:clamp(22px,4vw,40px)}.product-detail .detail-shell .label{color:var(--lime)}
.product-detail .detail-shell h2{color:#fff6e5}.product-detail #detail-description{color:#e9e8dc}
.product-detail .detail-shell .close{color:#fff6e5;border-color:#f3e5c97d}
.product-detail .detail-shell .pill:not(.primary){border-color:#f3e5c97d}
.tour dialog.product-detail.with-artwork{width:min(765px,calc(100% - 24px))}
.product-detail.with-artwork .detail-shell{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1fr);align-items:center;gap:24px}
.detail-artwork{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;object-position:center;border:1px solid #eadbc56b;border-radius:10px;background:#16231b}
.product-detail.with-artwork h2{font-size:clamp(34px,5vw,54px)}
.product-detail.with-artwork .detail-copy{min-width:0}
.product-detail.with-artwork .actions .pill{white-space:normal;text-align:center}
@media(max-width:620px){.product-detail.with-artwork .detail-shell{grid-template-columns:1fr;gap:15px}.detail-artwork{width:min(54%,176px);margin-inline:auto}.product-detail.with-artwork h2{font-size:39px}}
.landing-contacts{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:14px}
.landing-contacts a{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;background:#1a2a20db;border:1px solid #f6ebd778;border-radius:99px;font-size:12px;font-weight:650;min-height:34px}
.landing-contacts a:hover{background:#304536}.landing-contacts span{color:var(--lime)}
@media(max-width:760px){.landing-contacts{margin-top:10px}.landing-contacts a{min-height:39px}}
#my-products .products-open{pointer-events:auto;background:#17281e35;border-color:#f5e8d390;box-shadow:0 5px 18px #0002;backdrop-filter:blur(3px);text-shadow:0 1px 7px #101912;font:400 22px/1 Georgia,serif}
#my-products .products-open:hover,#my-products .products-open:focus-visible{background:#17281e70;border-color:#f5e8d3d9}
#my-products .table-deck{min-height:1px}
#interest-open{margin-top:16px}#product-interest{display:grid;gap:9px;margin-top:14px}
#product-interest label{font-size:13px;font-weight:650}
#product-interest input:not([type=checkbox]){display:block;width:100%;margin-top:4px;padding:7px 9px;border:1px solid #f5e8d36c;border-radius:7px;background:#15241b;color:#fff6e5;font:inherit}
#product-interest .interest-consent{display:flex;align-items:center;gap:7px;font-weight:400}
#product-interest .pill{justify-self:start;padding:8px 12px}.interest-status{font-size:12px;margin:0;color:#f1eddf}.interest-status:empty{display:none}
.tour dialog.ebook-detail{width:min(560px,calc(100% - 24px));background:linear-gradient(140deg,#2e4436f5,#1a2820fa);color:#fff6e5;border:1px solid #e7d4ae8c;backdrop-filter:blur(16px)}
.ebook-detail .detail-shell .label{color:#f2d6a4}.ebook-detail .detail-shell h2{font-size:clamp(33px,5vw,52px)}
.ebook-detail .detail-shell .close{color:#fff6e5;border-color:#f3e5c97d}
#ebook-request{display:grid;gap:9px;margin-top:14px}
#ebook-request label{font-size:13px;font-weight:650}
#ebook-request input:not([type=checkbox]){display:block;width:100%;margin-top:4px;padding:7px 9px;border:1px solid #f5e8d36c;border-radius:7px;background:#15241b;color:#fff6e5;font:inherit}
#ebook-request .interest-consent{display:flex;align-items:center;gap:7px;font-weight:400}
#ebook-request .pill{justify-self:start;padding:8px 12px}.ebook-download{justify-self:start;text-decoration:underline;text-underline-offset:3px;font-size:13px}
.landing-contacts .contact-icon{width:17px;height:17px;flex:0 0 17px}.whatsapp-icon{color:#83ecad}.instagram-icon{color:#f9b6d1}.facebook-icon{color:#a9caff}
.tour header .landing-signin{background:#d8efaf;color:#17241a;border-color:transparent;font-weight:750;gap:6px}.tour header .landing-signin:hover{background:#edffd0}
@media(max-width:520px){.tour header{flex-wrap:wrap;justify-content:space-between;padding-block:9px}.tour header nav{gap:8px;flex-wrap:wrap}.tour header .landing-signin{padding:6px 9px}}
.house{overflow:clip}
.tour .house>header{position:sticky;top:0;z-index:9;background:linear-gradient(180deg,#122017e8,#122017a0);backdrop-filter:blur(6px);transition:opacity .28s ease}
:root{--estate-image:url(estate.jpg)}
:root[data-lighting="night"]{--estate-image:url(estate-night.jpg)}
.exterior,.door-leaf{background-image:var(--estate-image)}
.estate-window{position:absolute;overflow:hidden;pointer-events:none}
/* Each pane carries a left and a right curtain. They are anchored on opposite
   edges of their own pane and each slides on its own side of it, so both visibly
   move: away from the centre by day, back toward it at night. A sliver stays
   gathered at the edge once open, exactly as before. */
.window-curtain{position:absolute;top:0;bottom:0;width:50.5%;background:repeating-linear-gradient(90deg,#a58c70 0%,#d1b99a 12%,#bb9e7c 25%);opacity:.79}
/* Open means fully clear of the glass: each panel is 50.5% of the pane wide, so
   pulling it 101% of its own width leaves nothing hanging inside the opening. */
.window-curtain.left{left:0;transform-origin:left center;transform:translateX(-101%)}
.window-curtain.right{right:0;transform-origin:right center;transform:translateX(101%)}
[data-lighting="night"] .exterior .window-curtain.left,
[data-lighting="night"] .exterior .window-curtain.right{transform:translateX(0)}
.window-person{position:absolute;left:36%;bottom:-8%;width:29%;height:79%;color:#342a23;opacity:0;filter:blur(.45px)}
.window-mullions{position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,#2b231b 31%,#2b231b 33%,transparent 34%,transparent 64%,#2b231b 65%,#2b231b 67%,transparent 68%);opacity:0}
/* The estate curtains are a ceremony, not a page-load flourish: the house runs
   it once the entrance is mounted and on screen, and again whenever the entrance
   returns. Day opens the two curtains; night closes them. */
:root[data-lighting="day"] :where(.house.estate-ceremony) .exterior .window-curtain.left{animation:open-estate-curtains-left 2.3s .45s ease both}
:root[data-lighting="day"] :where(.house.estate-ceremony) .exterior .window-curtain.right{animation:open-estate-curtains-right 2.3s .45s ease both}
[data-lighting="day"] .exterior .window-person{animation:work-estate-curtains 2.8s .25s ease both}
[data-lighting="night"] .exterior .window-curtain{background:repeating-linear-gradient(90deg,#8d603d 0%,#d4a071 13%,#a36f47 27%);opacity:.9}
:root[data-lighting="night"] :where(.house.estate-ceremony) .exterior .window-curtain.left{animation:close-estate-curtains-left 2.3s .45s ease both}
:root[data-lighting="night"] :where(.house.estate-ceremony) .exterior .window-curtain.right{animation:close-estate-curtains-right 2.3s .45s ease both}
[data-lighting="night"] .exterior .window-person{color:#392618;animation:work-estate-curtains 2.8s .25s ease both}
[data-lighting="night"] .exterior .window-mullions{opacity:.67}
[data-lighting="night"] .birds{color:#8494a4}
@keyframes open-estate-curtains-left{from{transform:translateX(0)}to{transform:translateX(-101%)}}
@keyframes open-estate-curtains-right{from{transform:translateX(0)}to{transform:translateX(101%)}}
@keyframes close-estate-curtains-left{from{transform:translateX(-101%)}to{transform:translateX(0)}}
@keyframes close-estate-curtains-right{from{transform:translateX(101%)}to{transform:translateX(0)}}
@keyframes work-estate-curtains{0%,100%{opacity:0;transform:translateX(-34%)}20%,70%{opacity:.72;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
  [data-lighting] .exterior .window-curtain,[data-lighting] .exterior .window-person,
  :root[data-lighting] :where(.house.estate-ceremony) .exterior .window-curtain,
  :root[data-lighting] :where(.house.estate-ceremony) .exterior .window-person{animation:none}
  /* The static states stand: gathered open by day, closed at night. */
}
.weather-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
[data-weather="sunny"][data-lighting="day"] .weather-layer{background:radial-gradient(ellipse at 85% 12%,#fff2aa36,transparent 52%)}
[data-weather="cloudy"] .weather-layer{background:linear-gradient(150deg,#73809268,transparent 70%)}
[data-weather="fog"] .weather-layer{background:linear-gradient(0deg,#ced9d080,transparent 62%)}
[data-weather="rain"] .weather-layer{background:linear-gradient(145deg,#7183954f,#101f2d12)}
[data-weather="snow"] .weather-layer{background:linear-gradient(0deg,#e2eeff27,transparent 60%)}
.weather-layer i{position:absolute;top:-8%;left:var(--x);animation-delay:var(--delay);animation-duration:var(--time);animation-timing-function:linear;animation-iteration-count:infinite}
[data-weather="rain"] .weather-layer i{width:1px;height:26px;background:linear-gradient(transparent,#e1f1ff9c);animation-name:rainfall}
[data-weather="snow"] .weather-layer i{width:var(--size);height:var(--size);border-radius:100%;background:#fff9;box-shadow:0 0 4px #fff5;animation-name:snowfall}
@keyframes rainfall{to{transform:translate(-10vw,110vh) rotate(11deg)}}
@keyframes snowfall{50%{transform:translate(1.5vw,55vh)}to{transform:translate(-1vw,110vh)}}
.weather-attribution{position:absolute;right:18px;bottom:8px;z-index:4;color:var(--cream);font-size:11px;padding:3px 6px;background:#17281edc;border-radius:4px}
@media(prefers-reduced-motion:reduce){.weather-layer i{display:none}}

/* ── Phone layout: header, tabs, entrance and garden ───────────────────────────
   Scoped to max-width 760px and, for the two photographic rooms, to the room that
   is actually on screen, so desktop and the other rooms keep their own layout.
   The header and the five tabs are the app's only chrome on a phone; the photo
   becomes its own in-flow band under the header instead of sitting behind it. */
@media(max-width:760px){
  /* Opaque, compact header: the brand, Sign in, and Back inside the rooms. Room
     navigation lives in the tab bar below rather than in the header. */
  .tour header{
    position:relative;z-index:2;order:-2;
    background:#182119;
    min-height:0;padding-block:8px;
  }

  /* The existing five-tab bar, fixed and clear of the home indicator. */
  .tour-footer{
    position:fixed;inset-inline:0;bottom:0;z-index:20;
    background:#182119;
    padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));
    align-items:center;
  }
  .tour-footer nav{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%;gap:4px;text-align:center;
  }
  .tour-footer nav a{
    display:flex;align-items:center;justify-content:center;
    min-height:48px;padding-inline:2px;
    font-size:11px;line-height:1.15;
  }
  /* Room for the fixed bar, plus the home indicator, below the house. */
  .house{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}

  /* The film: one full-width band in the flow, for every room, so the header and
     the room content can never sit on top of the photograph. It is the tallest
     thing on the screen, which is what lets tour.js hold it in the vertical middle
     of the phone while a journey runs and after the destination appears. */
  .house .scenery{
    position:relative;inset:auto;order:-1;
    width:100%;flex:none;overflow:hidden;
    height:var(--film-h,clamp(240px,calc(100svh - 132px),760px));
    background:#101812;
  }
  .house .wash{display:none}

  /* Every destination frame is shown whole — contained, never cropped. */
  .house .scene{
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
  }
  .house .garden .garden-video{object-fit:contain;object-position:center}
  /* The garden's camera drift would crop the contained frame, so the phone holds it still. */
  .house .garden.active{animation:none}

  .house:has(#entry:not([hidden])) #entry{justify-content:flex-start}
  .house:has(#entry:not([hidden])) .welcome{margin-top:0}

  /* Garden: the greeting and the enquiry form sit directly below the film. */
  .house:has(#garden:not([hidden])) #garden{
    justify-content:flex-start;
    padding:16px 0 22px;
  }
}

/* ── Entrance header: floating over the house ──────────────────────────────────
   On the entrance only, the header is no longer a bar of its own: it sits on top
   of the estate, transparent, with a soft top scrim so the brand and the lime
   Sign in control stay legible over both the day and the night artwork. Every
   interior room keeps its own header, and the garden framing is untouched. */
.house:has(#entry:not([hidden])) > header{
  background:transparent;
  border-bottom-color:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.house:has(#entry:not([hidden])) > header::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,#0b140eb8,#0b140e52 58%,transparent);
}
.house:has(#entry:not([hidden])) > header .brand,
.house:has(#entry:not([hidden])) > header nav{
  text-shadow:0 1px 8px #08100a99,0 1px 2px #08100a80;
}
@media(prefers-reduced-motion:reduce){
  .tour .house>header{transition:none}
}
@media(max-width:760px){
  /* The estate runs to the top of the phone screen and the header floats on it,
     instead of stacking above it in a bar of its own. */
  .house:has(#entry:not([hidden])) > header{
    position:absolute;inset-inline:0;top:0;z-index:3;
    padding-top:calc(8px + env(safe-area-inset-top,0px));
  }
  /* On the entrance the band is the house's own shape, so the photograph begins at
     the very top of the screen with nothing cropped. Contain then fills the band
     exactly — no letterbox — so the door and window overlays keep the positions
     tour.js measures for them. */
  .house:has(#entry:not([hidden])) .scenery{
    height:auto;
    aspect-ratio:1672/941;
  }

  /* The entrance header is the desktop header: the same transparent overlay, the
     logo at the left and Sign in at the right, each at a 44px touch height. Room
     navigation lives in the tab bar below, so nothing else competes for the row. */
  .house:has(#entry:not([hidden])) > header{
    justify-content:space-between;
    gap:10px;
  }
  .house:has(#entry:not([hidden])) > header .tour-header-start{flex:none}
  .house:has(#entry:not([hidden])) > header .brand{
    flex:none;
    gap:8px;
    min-height:44px;
    font-size:17px;
  }
  .house:has(#entry:not([hidden])) > header .brand svg{width:21px}
  .house:has(#entry:not([hidden])) > header nav{
    flex:none;
    font-size:12.5px;
  }
  .house:has(#entry:not([hidden])) > header nav .landing-signin{
    min-height:44px;
    padding:0 12px;
    font-size:12.5px;
  }
}

/* Instagram and Facebook carry their own marks. The two brand colours are the
   point, so both pills drop their tile entirely: a hairline edge and a cream
   label over the estate, with the hover and focus states keeping the same
   restraint. WhatsApp and email keep the pills they already had. */
.landing-contacts a.contact-social{background:transparent;border-color:#f3e7d057;color:#f8f3e6}
.landing-contacts a.contact-social:hover,
.landing-contacts a.contact-social:focus-visible{background:#17281e57;border-color:#f3e7d0a6}
.landing-contacts a.contact-social:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.landing-contacts .instagram-icon{filter:drop-shadow(0 0 5px #d6297629)}
.landing-contacts .facebook-icon{color:#9ec4ff;filter:drop-shadow(0 0 5px #8ab4f82e)}
@media(max-width:760px){.landing-contacts a.contact-social{min-height:44px;padding-block:7px}}

/* ── Phone rooms: full-room backdrops and the garden's own panel ──────────────
   The band in the phone block above is the entrance's uncropped photograph. My
   Products and Free Ebooks are rooms, not posters: their own photograph is the
   room, so on a phone it stays fixed behind the heading, the controls and the
   cards, with the existing wash keeping the copy legible while the cards scroll
   with the page. The garden gets one dedicated panel under the header for the
   builder film, and the greeting and enquiry follow it in normal flow, so nothing
   overlaps. Desktop is untouched. */
@media(max-width:760px){
  /* Nothing on a phone may clip the fixed room backdrop or stand in its way. */
  .house{overflow:visible}

  /* The photograph fills the room behind everything, as it does on desktop. */
  .house:has(#my-products:not([hidden])) .scenery,
  .house:has(#library:not([hidden])) .scenery{
    position:fixed;inset:0;width:auto;height:auto;
  }
  .house:has(#my-products:not([hidden])) .scene,
  .house:has(#library:not([hidden])) .scene{
    background-size:cover;
    background-repeat:no-repeat;
  }
  .house:has(#my-products:not([hidden])) .scene{background-position:center 59%}
  .house:has(#library:not([hidden])) .scene{background-position:center 60%}

  /* The existing wash returns on these two rooms only, for contrast. */
  .house:has(#my-products:not([hidden])) .wash,
  .house:has(#library:not([hidden])) .wash{
    display:block;position:fixed;inset:0;
  }
  .house:has(#my-products:not([hidden])) .room-intro,
  .house:has(#library:not([hidden])) .room-intro{
    position:relative;z-index:1;
    text-shadow:0 2px 14px #0b140e,0 1px 2px #0b140e;
  }

  /* Products: heading, trigger, then the cards in the page's own scroll. */
  #my-products.tour-content,
  #library.tour-content{justify-content:flex-start}
  #my-products.tour-content{padding-top:22px}
  .house:has(#my-products:not([hidden])) .table-deck{margin-top:18px}

  /* Free Ebooks: heading, then the ebook cards, scrolling together. */
  #library.tour-content{padding-top:22px;padding-bottom:26px}
  .house:has(#library:not([hidden])) .book-shelf{margin-top:4px}

  /* Garden: one dedicated panel for the builder film, then the enquiry below. */
  .house:has(#garden:not([hidden])) .scenery{
    position:relative;inset:auto;order:-1;
    width:100%;flex:none;
    height:auto;aspect-ratio:16/9;
    background:transparent;
  }
  .house:has(#garden:not([hidden])) .scene{
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
  }
  .house:has(#garden:not([hidden])) .garden-video{
    object-fit:contain;
    object-position:center;
  }
  #garden.tour-content{
    justify-content:flex-start;
    padding:12px 0 22px;
  }
  .house:has(#garden:not([hidden])) .garden-layout{
    grid-template-columns:1fr;
    grid-template-areas:"greeting" "enquiry";
    gap:10px;
  }
  .house:has(#garden:not([hidden])) .garden-greeting{max-width:none;padding:0}
  .house:has(#garden:not([hidden])) .garden-enquiry{max-height:none;padding:16px}
}