@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/font1.ttf) format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/font2.ttf) format('truetype')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/font3.ttf) format('truetype')}
@font-face{
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/font4.woff2) format('woff2');
  
}
@font-face{
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/font5.woff2) format('woff2');
  
}



/* ==========================================================
   MOD LIGHTING · Website Design System v3.0 tokens
   ========================================================== */
:root{
  --btn-fill:#2C2C2C; /* BR3: the live redesign primary fill */
  --ink:#0A0A0A; --midnight:#1A1A1A; --charcoal:#2C2C2C; --stone:#5D5D5D; --muted:#666666;
  --grey:#CDCED0; --border:#DDDDDD; --light:#F0F0F0; --alabaster:#E7E2DC; --alabaster-light:#F3F1ED;
  --white:#FFFFFF; --gold:#C8A96A; --gold-tint:rgba(200,169,106,.12); --success:#388100; --signal:#CC1F1F;
  --overlay:rgba(10,10,13,.55);
  --serif:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Poppins',Helvetica,Arial,sans-serif;
  --track-btn:1.2px; --track-badge:1px; --track-display:2.4px;
  --pop:0 8px 32px rgba(0,0,0,.12); --bar:0 -6px 28px rgba(0,0,0,.10);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/24px var(--sans);}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:0}
.h-display{font-size:64px;line-height:1.1}
.h1{font-size:48px;line-height:1.1}
.h2{font-size:36px;line-height:1.2}
.h3{font-size:32px;line-height:1.2}
.h4{font-size:24px;line-height:1.2}
.h5{font-size:18px;line-height:1.3}
.body-lg{font-size:18px;line-height:28px}
.body-2{font-size:14px;line-height:20px}
.body-3{font-size:12px;line-height:16px}
.muted{color:var(--muted)}
.stone{color:var(--stone)}
.serif-i{font-style:italic}
@media (max-width:991px){
  .h-display{font-size:36px}.h1{font-size:32px}.h2{font-size:24px}.h3{font-size:24px}.h4{font-size:18px}.h5{font-size:16px}
  body{font-size:14px;line-height:22px}.body-lg{font-size:16px;line-height:24px}
}

/* Buttons: sharp corners, fixed heights, uppercase Poppins.
   BR4 RULING, 2026-09-12: corner radius 0 across the product. Measured off the
   live site (www.mod-lighting.com home and /products/chloe): every filled
   button computes border-radius 0px. Design System v3.3 says 0 too, so the
   Figma instance measured at roughly 4px is the odd one out and is not shipped.
   BR3 matches the live primary: Poppins 16/24, uppercase, 1.6px tracking,
   #2C2C2C fill, 48px tall. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 20px;background:var(--btn-fill);color:var(--white);
  font:400 16px/24px var(--sans);letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;border:1px solid var(--btn-fill);border-radius:0;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);white-space:nowrap;-webkit-tap-highlight-color:transparent}
/* Kristen, 2026-09-14: on a phone the label ran outside the button. nowrap
   plus a fixed 16px and 1.6px of tracking cannot fit "NOT QUITE THERE" in
   half a 375px row, and it overflowed rather than wrapped. Let these wrap
   and let the tracking ease off where the room is tight. */
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;letter-spacing:1.1px;line-height:20px;padding-top:10px;padding-bottom:10px}
  .rate .btns .btn,.result-actions .btn{font-size:14px}
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn.tall{height:54px;min-height:54px;width:100%}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.secondary:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn.on-dark{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn.on-dark:hover{background:var(--gold);border-color:var(--gold)}
.btn.on-dark.secondary{background:transparent;color:var(--white)}
.btn.on-dark.secondary:hover{background:var(--white);color:var(--ink)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.btn.gold:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
/* .btn now sets min-height:48px, which would otherwise force the compact
   variant up to 48 as well. Give it its own floor. */
.btn.compact{height:36px;min-height:36px;padding:0 20px;font-size:12px;letter-spacing:var(--track-badge)}
.btn.block{width:100%;padding:12px 20px}
.btn[disabled]{background:var(--grey);border-color:var(--grey);color:var(--white);cursor:not-allowed}
.link[disabled]{opacity:.45;cursor:not-allowed;text-decoration:none}
.link{font:500 14px/20px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:4px;background:none}
.link.on-dark{color:var(--white)}

/* Inputs: 48 tall, hairline, sharp. Font 16px on touch so iOS does not zoom (deviation from DS 14, flagged in the handoff). */
.field{display:flex;flex-direction:column;gap:8px}
.label{font:500 12px/16px var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;color:var(--muted)}
.input{height:48px;border:1px solid var(--border);border-radius:0;padding:0 14px;font:400 16px/1 var(--sans);color:var(--ink);background:var(--white);width:100%;outline:none}
.input:focus{border-color:var(--gold)}
/* A2: a visible focus ring on text inputs. outline:none above left only a
   border tint, which is not a usable keyboard indicator. */
.input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.input::placeholder{color:var(--muted)}

/* Chips (pills allowed here, never on actions) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;padding:0 16px;border:1px solid var(--border);border-radius:0;font:400 14px/1 var(--sans);color:var(--ink);background:var(--white);display:inline-flex;align-items:center;gap:8px;transition:all .15s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--alabaster);border-color:var(--ink)}
.chip.small{height:32px;padding:0 12px;font-size:12px}
@media (max-width:991px){#room-chips{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:8px;overflow-x:auto;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px 4px}#room-chips::-webkit-scrollbar{display:none}}

/* Badges */
.badge{display:inline-flex;align-items:center;height:28px;padding:0 12px;background:var(--gold);color:var(--ink);font:500 12px/1 var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase}
.badge.neutral{background:transparent;border:1px solid var(--ink)}
.badge.dark{background:var(--ink);color:var(--white)}

/* Layout */
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:991px){.wrap{padding:0 16px}}
.block{padding:32px 0}
.block.tight{padding:0}
.sect{padding:64px 0}
@media (max-width:991px){.sect{padding:48px 0}}
.rule{border:0;border-top:1px solid var(--border);margin:0;color:var(--border)}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:991px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.g2{grid-template-columns:minmax(0,1fr)}}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav .brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.nav .brand img{height:34px;width:auto}
.nav .brand .sep{width:1px;height:24px;background:var(--border)}
.nav .brand .name{font:500 12px/16px var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;color:var(--charcoal)}
.nav .right{display:flex;align-items:center;gap:24px}
.nav .right .link{text-decoration:none}
.nav .right .link:hover{text-decoration:underline}
.nav.over{position:absolute;left:0;right:0;background:transparent;border-bottom:0}
.nav.over .brand .name,.nav.over .link{color:var(--white)}
.nav.over .brand .sep{background:rgba(255,255,255,.35)}
@media (max-width:991px){.nav .brand img{height:28px}.nav .right .link{display:none}.nav .brand .name{font-size:12px}.nav.over .right{display:none}.nav.over .wrap{justify-content:space-between}.nav.over .brand{width:100%;justify-content:space-between}.nav.over .brand .sep{display:none}.nav.over .brand .logo-ink{display:block}.nav.over .brand .logo-white{display:none}.nav.over .brand .name,.nav.over .link{color:var(--ink)}.nav.over .brand .sep{background:var(--border)}}

/* ---------- Home ---------- */
.hero{position:relative;min-height:clamp(680px,78vh,900px);background:var(--alabaster-light);color:var(--ink);display:flex;align-items:center;overflow:hidden}
/* H1 again, at ultra-wide. The photograph is 1.79:1; full-bleed at 3440 made
   the hero box 3.82:1, so object-fit:cover threw away more than half the
   image height and the phone and room were cut off (Nik, 2026-09-15: "on the
   phone it shows the entire room... here it just cuts off"). Cap the band so
   the crop never goes past the 2.2:1 the audit asked for, let it grow taller
   on a tall screen, and let the hero's own ground fill the sides. */
@media (min-width:992px){
  /* Fill the screen. Nik, 2026-09-15: "it needs to fit my screen... before
     scrolling into next section" - the hero is the fold, and the next section
     should start exactly where the viewport ends. This also buys back most of
     the crop an ultra-wide monitor was costing: at 3420x1342 the band goes from
     3.8:1 to 2.55:1 against a photograph that is 1.79:1.
     NOT a max-width - capping it left the hero floating with white gutters
     either side ("looks even worse now"). svh where it exists, so a phone-style
     toolbar cannot push the bottom of it off. */
  .hero{min-height:100vh;min-height:100svh}
}
/* Anchored to the TOP, not the centre: the light being REPLACED is the dated
   flush mount on the ceiling, and a centred crop on a 2:1 band threw the
   ceiling away, leaving only the phone (Nik, 2026-09-15: "the image isnt even
   showing the light being replaced"). The phone is at the right, so the
   horizontal anchor stays right. */
/* The hero is entirely photograph - no letterbox, no pale strip (Nik,
   2026-09-15: "the whole thing needs to be an image"). Anchored to the TOP so
   the ceiling light being replaced stays in frame; the box is wider than the
   photograph, so the crop it costs is vertical. */
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right top}
.hero .mask{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(243,241,237,.94) 0,rgba(243,241,237,.82) 28%,rgba(243,241,237,.35) 48%,rgba(243,241,237,0) 62%)}
.hero .wrap{position:relative;width:100%;padding-top:96px;padding-bottom:64px}
.hero .copy{max-width:600px}
.hero .copy p{margin:24px 0 32px;max-width:480px;color:var(--charcoal)}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
/* H2: the nav's right-hand group sat over the hero photograph and became
   illegible on wide desktops. The first fix was a scrim behind just that group,
   which ended in a hard vertical edge partway across the photo - Nik, 2026-09-14:
   "we just wanted it expanded to the edge of the page not deleted". So the band
   runs the FULL width of the header instead, which has no edge to notice. The
   link itself came out on 2026-09-15 ("remove shop mod lighting from the top..
   but leave the banner") - the MOD logo carries that link now. Only
   on desktop: under 992px the header sits transparent over the square crop, as
   the 390 mockup shows. */
/* The header floats ON the photograph, as MOD's own homepage does - the image
   runs edge to edge from the very top and the nav sits over it (Nik, 2026-09-15:
   "look at how their mainpage sits.. we want a similar effect"). The solid pale
   band that used to carry the "Shop MOD LIGHTING" link went with the link.
   Taking it out took the FADE with it, though (Nik, 2026-09-16: "i think you
   removed the top fading banner we had"), so the fade comes back on its own: a
   soft wash that is nearly opaque at the very top edge and gone by 160px. It
   keeps the logo and the nav links readable wherever the photograph happens to
   be dark, and unlike the old band it has no bottom edge to notice, so the
   picture still runs to the top of the page. Desktop only - under 992px the
   header sits on the square crop, as the 390 mockup shows. */
.nav .wrap{position:relative}
.nav .right{position:relative;z-index:2}
.nav .brand{position:relative;z-index:2}
@media (min-width:992px){
  .nav.over::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;
    pointer-events:none;z-index:0;
    background:linear-gradient(180deg,
      rgba(243,241,237,.92) 0,
      rgba(243,241,237,.72) 32%,
      rgba(243,241,237,.34) 64%,
      rgba(243,241,237,0) 100%)}
}
/* H3: one filled "Start with a photo" at a time - the nav copy of it stays out
   of the way until the hero, which has its own, has scrolled off. */
/* visibility, not opacity: an opacity:0 anchor is still a keyboard stop, so
   Tab would land on an invisible CTA and Enter would fire it. */
body.at-hero .nav .right .btn{visibility:hidden;opacity:0;pointer-events:none;transition:opacity .18s ease}

.hero .credit{position:absolute;left:32px;bottom:24px;font:400 12px/16px var(--sans);color:var(--muted)}
.nav.over .brand .name,.nav.over .link{color:var(--ink)}
.nav.over .brand .sep{background:var(--border)}
.nav .brand .logo-white{display:none}

@media (max-width:991px){
  .hero{min-height:0;display:block;aspect-ratio:auto;background:var(--ink);color:var(--white);text-align:center}
  /* The header's ink logo and ink label sit over this image, and the hero's own
     background is ink, so a photograph that fails to load would leave the
     branding invisible. A background and a text colour on the img itself show
     up only in that case - a loaded photograph hides both. font-size:0 keeps the
     broken-image alt text from painting across the logo; screen readers read the
     alt attribute off the accessibility tree, so it is still announced. */
  .hero img.bg{position:relative;inset:auto;height:auto;aspect-ratio:1;object-position:72% 30%;
    background:var(--alabaster-light);color:var(--ink);font-size:0}
  .hero .mask{display:block;inset:auto;top:0;left:0;right:0;aspect-ratio:1;background:linear-gradient(0deg,rgba(10,10,10,1) 0,rgba(10,10,10,.92) 8%,rgba(10,10,10,.7) 20%,rgba(10,10,10,.4) 34%,rgba(10,10,10,.15) 50%,rgba(10,10,10,0) 66%),linear-gradient(180deg,rgba(10,10,13,.3) 0,rgba(10,10,13,0) 100px)}
  .hero .wrap{padding-top:0;padding-bottom:32px}
  .hero .copy{max-width:none}
  .hero .copy p{margin:12px auto 24px;color:rgba(255,255,255,.88);max-width:none}
  .hero .ctas{flex-direction:column;gap:16px}
  .hero .ctas .btn{width:100%;background:var(--white);color:var(--ink);border-color:var(--white)}
  .hero .ctas .link{color:var(--white)}
  .hero .credit{display:none}
}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.section-head p{margin:8px 0 0;max-width:560px}
@media (max-width:991px){.section-head{flex-direction:column;align-items:flex-start;margin-bottom:24px}}

/* Before / after */
.ba{position:relative;aspect-ratio:3/4;background:var(--alabaster-light);overflow:hidden;user-select:none;touch-action:pan-y}
.ba.wide{aspect-ratio:4/5}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--white);pointer-events:none}
/* F9: 3/4 is very tall on a wide desktop and stranded the copy column in
   white space. Capped from the desktop breakpoint - AFTER the base rule,
   which has equal specificity and would otherwise win. */
@media (min-width:992px){.ba{aspect-ratio:4/5}}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-4 5 4 5M15 7l4 5-4 5'/%3E%3C/svg%3E") center/20px no-repeat;border-radius:50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M19 17l-7 7 7 7M29 17l7 7-7 7' fill='none' stroke='%230A0A0A' stroke-width='1.5'/></svg>");box-shadow:var(--pop)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;color:var(--ink)}
.ba:focus-within .handle::after{box-shadow:0 0 0 3px var(--gold)}
.ba .dim-chip{position:absolute;left:12px;bottom:12px;z-index:2;pointer-events:none;max-width:calc(50% - 36px);white-space:normal;text-align:left;padding:6px 10px;border-radius:0;background:rgba(10,10,10,.72);color:var(--white);font:500 11px/1.35 var(--sans);letter-spacing:.02em}
.ba .zoom-btn{position:absolute;right:12px;bottom:12px;z-index:3;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);background:rgba(10,10,10,.55);color:var(--white);border-radius:50%}
.zoom{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.92);display:grid;place-items:center}
.zoom[hidden]{display:none}
/* P9: .btn sets display:inline-flex, which overrides the browser default
   for [hidden]. A hidden control must actually be gone, not a dead gold
   button still carrying the previous product name. */
[hidden]{display:none !important}
.zoom img{max-width:96vw;max-height:92vh;object-fit:contain}
.zoom .close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);font:400 28px/1 var(--sans)}
.switchers{margin:16px 0 0}
.sw-row{margin:0 0 16px}
.sw-row .label{display:block;margin-bottom:8px}
.seg.sizes{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
.seg.sizes button{height:auto;min-height:48px;padding:8px 6px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.seg.sizes button small{font-size:11px;line-height:1.3;color:var(--muted);white-space:normal;text-align:center}
.seg.sizes button[aria-pressed="true"] small{color:var(--ink)}
#size-switch-hint{margin-top:8px}
.rate .quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.disclaimer.short{margin-top:16px}
@media (max-width:640px){.also .lgrid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}.also .lgrid::-webkit-scrollbar{display:none}.also .lgrid .pcard{flex:0 0 46%;scroll-snap-align:start}}
.progress{display:none}
@media (max-width:991px){
  #flow .stepper,.stepper{display:none}
  .progress{display:flex;align-items:center;gap:12px;margin:0 0 16px}
  .progress .bar{flex:1;height:3px;background:var(--border)}
  .progress .bar i{display:block;height:100%;background:var(--gold);transition:width .3s var(--ease)}
  .progress span{font:500 11px/16px var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;color:var(--muted);white-space:nowrap}
  .progress[hidden]{display:none}
  #flow .h1{font-size:28px;line-height:1.15;margin-bottom:8px}
  #flow .lead{font-size:15px;line-height:1.45;margin-bottom:16px}
  #room-chips{mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent)}
  .drop-hint{display:none}
}
@media (min-width:992px){.cam-note{display:none}#cam-note{display:none}}
.guide-sheet{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.5);display:flex;align-items:flex-end}
.guide-sheet[hidden]{display:none}
.guide-sheet .inner{background:var(--white);width:100%;padding:24px 20px calc(24px + env(safe-area-inset-bottom));max-height:80vh;overflow:auto}
.guide-sheet .inner .h4{margin-bottom:12px}
.guide-sheet .btn{margin-top:16px}
.stage-guide{display:none}
.stage-guide.show{display:block}
.stage-guide img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--alabaster-light)}
.stage-guide .list-head{margin-top:16px}
.qr-block{margin-top:20px;display:flex;gap:16px;align-items:center}
.qr-block[hidden]{display:none}
#qr{flex:0 0 auto;width:112px;height:112px;background:var(--white)}
#qr img,#qr canvas{width:112px;height:112px;display:block}
[data-drop].dropping{outline:2px dashed var(--gold);outline-offset:6px}
.ceiling-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ceiling-summary b{font-weight:500}
#ceiling-editor{padding-top:12px}
.marker-wrap.dragging{cursor:grabbing}
/* F7: a failure has to stay on screen with a way out of it, rather than a
   toast that expires after 3.2s and leaves an empty step. */
/* P8: quiet when the ceiling fits, a visible caution when it does not. */
/* P2: the recommended sections sit above the full collection. */
/* R1: this session's renders, above the grid, so nothing has to be hunted. */
/* L2: the flat preview sits over the room photo in the picker rail. */
.preview-layer{position:absolute;inset:0;pointer-events:none;z-index:3}
.preview-layer img{position:absolute;transform:translate(-50%,-50%);height:auto;width:auto;
  max-width:none;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(10,10,10,.28));opacity:.97}
.room-strip-wrap{position:relative}
.renders-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;margin:0 0 8px;scrollbar-width:none}
.renders-strip::-webkit-scrollbar{display:none}
.renders-strip .rs{flex:0 0 auto;width:112px;text-align:left;background:var(--white);
  border:1px solid var(--border);padding:0;display:grid;gap:0}
/* contain, not cover: the thumbnail is 112x140 and a render is wider than
   that, so cover cropped the sides away - which is exactly where a wall
   sconce sits. Kristen, 2026-09-14: the Alba sconce render "does not show
   the sconce inside". Letterboxed is less pretty than a crop that hides
   the thing the card is named after. */
.renders-strip .rs img{width:112px;height:140px;object-fit:contain;display:block;background:var(--alabaster-light)}
.renders-strip .rs .spin{display:block;width:112px;height:140px;background:
  repeating-linear-gradient(45deg,var(--alabaster-light) 0 8px,#eceae5 8px 16px)}
.renders-strip .rs .rs-lab{display:block;padding:6px 8px 0;font:500 11px/14px var(--sans);
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.renders-strip .rs .rs-state{display:block;padding:0 8px 6px;font:400 11px/14px var(--sans);color:var(--muted)}
.renders-strip .rs.done{border-color:var(--ink)}
/* R2: the pill carries the picture and pops once when it lands. */
.job-pill .pill-thumb{width:28px;height:36px;object-fit:cover;display:block;background:rgba(255,255,255,.2)}
@keyframes pillPop{0%{transform:scale(1)}35%{transform:scale(1.06)}100%{transform:scale(1)}}
.job-pill.pop{animation:pillPop .42s var(--ease)}
@media (prefers-reduced-motion:reduce){.job-pill.pop{animation:none}}
.lsec{margin:0 0 28px}
.lsec .h4{margin:0 0 12px}
.lgrid.rec{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
#light-all-head{margin:4px 0 12px}
.fit-row{margin:6px 0 0;font:400 14px/20px var(--sans);color:var(--muted)}
.fit-row.caution{margin-top:10px;padding:10px 12px;border-left:3px solid var(--ink);
  background:var(--alabaster-light);color:var(--ink);font-weight:500}
.photo-error{display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  padding:16px;margin:0 0 16px;border:1px solid var(--ink);background:var(--alabaster-light)}
.photo-error p{margin:0;font:400 15px/22px var(--sans);color:var(--ink)}
.room-strip{display:none}
.search-row.tools{display:flex;gap:8px;max-width:none}
.search-row.tools .input{flex:1 1 auto;min-width:0}
.search-row.tools select.sort{flex:0 0 auto;width:auto;padding:0 12px}
.sgrid .s .open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.sgrid .s .open:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sgrid .s .lab{pointer-events:none}
/* F13: Compare sat on the label and hid half of it. Lift it clear. */
.sgrid .s .cmp{position:absolute;right:8px;top:8px;bottom:auto;z-index:2;background:rgba(255,255,255,.92)}
.sgrid .s .cmp[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.sgrid .s.sel{outline:2px solid var(--gold);outline-offset:2px}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 24px}
.compare>div{position:relative}
.compare img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--alabaster-light)}
.compare .lab{position:absolute;left:8px;bottom:8px}
.compare[hidden]{display:none}
@media (max-width:991px){
  .room-strip{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5;background:var(--white);padding:8px 0;margin:-8px 0 12px;border-bottom:1px solid var(--border)}
  .room-strip img{width:56px;height:56px;object-fit:cover;background:var(--alabaster-light)}
  .room-strip span{flex:1;font:500 11px/16px var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;color:var(--muted)}
  .filters{mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent)}
}
@media (max-width:640px){
  .hero{display:none}
  #s-home>.hero+.wrap .block.sect{padding-top:24px}
  .split{display:flex;flex-direction:column;gap:16px}
  .ba-media{order:-1}
  .ba-sub,#ba-picks,#ba-line{display:none}
  .ba-title{font-size:30px;line-height:1.15;margin:0}
  .ba-cta{width:100%;justify-content:center}
  .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .step{display:block;text-align:center}
  .step p{display:none}
  .step .num{margin:0 auto 8px}
  .step h3{font-size:13px;line-height:1.25}
  .home-rooms-sect{display:none}
  /* "Good to know" reads open on a phone, same as on desktop. It used to be
     collapsed behind a "Good to know" button that had to be tapped before any
     of it could be read, so on the screen where the questions matter most they
     were the one thing hidden (Nik, 2026-09-16: "the good to know part still
     not fixed.. have it open"). The four questions keep their own accordions,
     exactly as they behave on desktop. */
}
/* In-flight render indicator: visible on every other screen while a render runs, then "ready" until seen */
.job-pill{position:fixed;right:16px;bottom:24px;z-index:45;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 14px;background:var(--ink);color:var(--white);border-radius:0;box-shadow:var(--bar);font:500 12px/16px var(--sans)}
.job-pill[hidden]{display:none}
.job-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:jobpulse 1.2s ease-in-out infinite}
.job-pill.done .dot{animation:none;background:var(--success)}
.job-pill .link{color:var(--white);font:500 12px/16px var(--sans);white-space:nowrap}
.job-pill .x{color:var(--white);background:none;font:400 18px/1 var(--sans);opacity:.7;padding:0 2px}
@keyframes jobpulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.job-pill .dot{animation:none}}
@media (max-width:991px){.job-pill{left:16px;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));justify-content:space-between}body.has-pill .toast{bottom:calc(150px + env(safe-area-inset-bottom))}}
@media (min-width:992px){body.has-pill .toast{bottom:84px}}
.cta-bar{display:none}
@media (max-width:991px){.cta-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--white);box-shadow:var(--bar)}.cta-bar[hidden]{display:none}#s-result.active{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
.ba .tag{position:absolute;top:16px;font:500 12px/1 var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;padding:8px 12px;background:var(--ink);color:var(--white);pointer-events:none}
.ba .tag.l{left:16px}.ba .tag.r{right:16px}
.ba-caption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0 0;flex-wrap:wrap}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
@media (max-width:991px){.split{grid-template-columns:minmax(0,1fr);gap:32px}
  .split>div:first-child{display:contents}
  .split .ba-title{order:1}.split .ba-media{order:2}.split #ba-picks{order:3;margin-bottom:0!important}.split #ba-line{order:4;margin:0!important}.split .ba-cta{order:5;width:100%}.split .ba-sub{display:none}
  .home-lights .pcard:nth-child(n+5){display:none}
  .home-rooms-sect,.home-trust-sect{display:none}}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
/* BR2: gold on alabaster fails 4.5:1. Ink, with the size doing the work. */
.step .num{font:400 48px/1 var(--serif);color:var(--ink)}
.step h3{margin:16px 0 8px}
.step p{margin:0;color:var(--stone)}
@media (max-width:991px){.steps{grid-template-columns:minmax(0,1fr);gap:24px}.step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px}.step .num{font-size:36px}.step h3{margin-top:0}}

/* Product cards */
/* A card is a <button>, and a button centres its own content vertically. The
   grid stretches every card to the tallest in the row, so a card WITHOUT a
   rating line - its .stars div is empty - floated its photograph 14px down
   and broke the row (Nik, 2026-09-14: "random spots where images dont line
   up... everything needs to be uniform"). A flex column pinned to the top
   makes every photograph start on the same line whatever the card holds. */
.pcard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;text-align:left;width:100%}
/* P3: a tinted ground behind every tile, so a fast scroll shows a shape
   rather than a hole while the image decodes. */
.pcard .img{background:var(--alabaster-light);aspect-ratio:1;background:var(--alabaster-light);overflow:hidden;position:relative}
.pcard .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pcard:hover .img img{transform:scale(1.03)}
.pcard .img .badge{position:absolute;top:12px;left:12px}
.pcard .meta{padding:12px 0 0}
.pcard .meta h4{font-size:18px;line-height:1.3}
.pcard .meta .price{margin-top:4px;color:var(--ink)}
.pcard .meta .price span{color:var(--muted);font-size:14px}
.pcard .meta .stars{color:var(--muted);font-size:12px;margin-top:4px}
/* BR2: the rating stars sat gold on white. Ink, with weight for emphasis. */
/* P4: an empty rating line left a gap under 79 of 89 cards. */
.pcard .meta .stars:empty{display:none}
.pcard .meta .stars b{color:var(--ink);font-weight:500;letter-spacing:1px}

/* Room tiles */
.rtile{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--alabaster-light);text-align:left;width:100%}
.rtile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rtile:hover img{transform:scale(1.04)}
.rtile .lab{position:absolute;left:0;right:0;bottom:0;padding:24px 20px;background:linear-gradient(0deg,rgba(10,10,13,.7),rgba(10,10,13,0));color:var(--white)}
.rtile .lab h4{font-size:24px}
.rtile .lab span{font:400 14px/20px var(--sans);color:rgba(255,255,255,.8)}

/* Trust + FAQ */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.trust .t svg{width:32px;height:32px}
.trust .t h4{margin:12px 0 8px}
.trust .t p{margin:0;color:var(--stone)}
@media (max-width:991px){.trust{grid-template-columns:minmax(0,1fr)}}
.faq details{border-top:1px solid var(--border)}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font:400 24px/1.2 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--serif);color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 24px;max-width:720px;color:var(--stone)}
@media (max-width:991px){.faq summary{font-size:18px;line-height:1.3;padding:16px 0}.band .wrap{padding-top:48px;padding-bottom:48px}.band .btn{width:100%}.footer nav{gap:16px}.trust{gap:24px}}
.band{background:var(--ink);color:var(--white)}
.band .wrap{display:flex;justify-content:space-between;align-items:center;gap:32px;padding-top:64px;padding-bottom:64px;flex-wrap:wrap}
.band p{margin:8px 0 0;color:rgba(255,255,255,.75)}

/* Footer */
.footer{background:var(--ink);color:var(--white);border-top:1px solid rgba(255,255,255,.12)}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:32px;padding-bottom:32px;flex-wrap:wrap}
.footer img{height:36px}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer nav a{font:400 14px/20px var(--sans);color:rgba(255,255,255,.75);text-decoration:none}
/* The footer ground is ink, so hover goes BRIGHTER, not darker. */
.footer nav a:hover{color:var(--white);text-decoration:underline}
.footer small{font:400 12px/16px var(--sans);color:rgba(255,255,255,.55)}

/* ---------- Flow ---------- */
.screen{display:none}
.screen.active{display:block}
.flow{background:var(--white)}
.flow .body{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:64px;align-items:start;padding-top:32px;padding-bottom:96px}
.flow .panel{min-width:0}
.flow .stage{position:sticky;top:96px;min-width:0}
/* F4: the confirm step showed the identical photo twice. */
@media (min-width:992px){
  body.one-photo .flow .body{grid-template-columns:minmax(0,1fr)}
  body.one-photo .flow .stage{display:none}
  body.one-photo .flow .panel{max-width:900px;margin:0 auto}
}
/* L1/L3/L4: one canvas, and it is the one you can touch. */
@media (min-width:992px){
  body.wide-canvas .flow .body{grid-template-columns:minmax(0,1fr)}
  body.wide-canvas .flow .stage{display:none}
  body.wide-canvas .flow .panel{max-width:900px;margin:0 auto}
  /* L1: elsewhere the canvas takes the larger share, 4fr to 8fr. */
  .flow .body{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
}
.stage .frame{background:var(--alabaster-light);aspect-ratio:4/5;position:relative;overflow:hidden}
.stage .frame img{width:100%;height:100%;object-fit:cover}
.stage .cap{padding:12px 0 0;color:var(--muted);font-size:12px;line-height:16px}
@media (max-width:991px){
  .flow .body{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:16px;padding-bottom:120px}
  .flow .stage{display:none}
}
.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 32px;background:var(--alabaster-light);padding:16px 12px}
.stepper .st{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.stepper .st::before{content:"";position:absolute;top:14px;left:-50%;right:50%;height:1px;background:var(--border);z-index:0}
.stepper .st:first-child::before{display:none}
.stepper .st .n{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--white);display:grid;place-items:center;font:500 12px/1 var(--sans);color:var(--muted);position:relative;z-index:1;transition:all .3s var(--ease)}
.stepper .st .l{font:500 12px/16px var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;color:var(--muted)}
.stepper .st.done .n{background:var(--ink);border-color:var(--ink);color:var(--white)}
.stepper .st.done::before,.stepper .st.on::before{background:var(--ink)}
.stepper .st.on .n{border-color:var(--gold);background:var(--gold);color:var(--ink);box-shadow:0 0 0 4px var(--gold-tint)}
.stepper .st.on .l,.stepper .st.done .l{color:var(--ink)}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.back{display:inline-flex;align-items:center;gap:8px;font:500 14px/20px var(--sans);text-decoration:none}
.back svg{width:16px;height:16px}
.panel h1{margin-bottom:12px}
.panel .lead{margin:0 0 32px;color:var(--stone)}
.fs{margin:0 0 32px}
.fs .label{display:block;margin-bottom:12px}
.cards{display:grid;gap:12px}
.card-opt{display:grid;grid-template-columns:32px minmax(0,1fr) 24px;gap:16px;align-items:center;padding:16px;border:1px solid var(--border);text-align:left;width:100%;background:var(--white);transition:border-color .15s var(--ease),background .15s var(--ease)}
.card-opt:hover{border-color:var(--ink)}
.card-opt[aria-checked="true"],.card-opt[aria-pressed="true"]{border-color:var(--ink);background:var(--alabaster-light)}
/* F10: single-select reads as a filled circle, not a square tick. */
.card-opt .chk{border-radius:50%}
.card-opt svg{width:32px;height:32px;fill:var(--charcoal)}
.card-opt .t{font:500 14px/20px var(--sans)}
.card-opt .s{font:400 12px/16px var(--sans);color:var(--muted)}
.card-opt .chk{width:24px;height:24px;border:1px solid var(--border);display:grid;place-items:center}
.card-opt[aria-checked="true"] .chk,.card-opt[aria-pressed="true"] .chk{background:var(--ink);border-color:var(--ink)}
.card-opt .chk svg{width:14px;height:14px;fill:none;stroke:var(--white);stroke-width:2}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:8px}
.cta-row .btn{flex:1 1 auto}
.sticky-cta{display:none}
@media (max-width:991px){
  .cta-row.mobile-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:var(--white);box-shadow:var(--bar)}
  /* F11: the bar is fixed over the page, so the screen it covers has to end
     above it or the render and its caption are cut off. */
  #s-render .flow, #s-render .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* F12: one gold CTA at a time. #cta-bar is the fixed one on Results; the
     inline duplicate is the gold anchor inside #prodbar. Hide that one. */
  #prodbar .btn.gold{display:none}
}

/* Guide */
.dodont{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:0}
.dodont .ex{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--alabaster-light)}
.dodont .ex img{width:100%;height:100%;object-fit:cover}
.dodont .ex.bad img{transform:scale(1.9) rotate(-9deg) translate(-6%,10%);filter:brightness(.72)}
.dodont .ex .tag{position:absolute;top:12px;left:12px}
.dodont .ex .tag.ok{background:var(--success);color:var(--white)}
.dodont .ex .tag.no{background:var(--signal);color:var(--white)}
.list{margin:0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:14px;line-height:20px}
.list li:last-child{border-bottom:1px solid var(--border)}
.list li svg{width:20px;height:20px;margin-top:0}
.list.ok li svg{stroke:var(--success)}
.list.no li svg{stroke:var(--signal)}
.list-head{margin:32px 0 8px;font:500 12px/16px var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;color:var(--muted)}

/* Capture */
.viewfinder{position:relative;aspect-ratio:3/4;background:var(--midnight);overflow:hidden}
@media (max-width:991px){.viewfinder{aspect-ratio:1}.viewfinder .line.top{top:18%}.viewfinder .line.bot{bottom:18%}.viewfinder .hint{bottom:auto;top:50%;margin-top:16px}.panel .lead{margin-bottom:24px}}
.viewfinder img{width:100%;height:100%;object-fit:cover;opacity:.55}
.viewfinder .corner{position:absolute;width:28px;height:28px;border:2px solid var(--white)}
.viewfinder .c1{top:20px;left:20px;border-right:0;border-bottom:0}
.viewfinder .c2{top:20px;right:20px;border-left:0;border-bottom:0}
.viewfinder .c3{bottom:20px;left:20px;border-right:0;border-top:0}
.viewfinder .c4{bottom:20px;right:20px;border-left:0;border-top:0}
.viewfinder .line{position:absolute;left:24px;right:24px;height:1px;background:rgba(255,255,255,.75)}
.viewfinder .line.top{top:22%}.viewfinder .line.bot{bottom:20%}
.viewfinder .line span{position:absolute;left:0;top:-22px;font:500 11px/16px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--white)}
.viewfinder .line.bot span{top:6px}
.viewfinder .level{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:1px;background:rgba(255,255,255,.75)}
.viewfinder .level::before,.viewfinder .level::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:rgba(255,255,255,.75)}
.viewfinder .level::before{left:0}.viewfinder .level::after{right:0}
.viewfinder .hint{position:absolute;left:0;right:0;bottom:56px;text-align:center;color:var(--white);font:500 12px/16px var(--sans);letter-spacing:1px;text-transform:uppercase}
.hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.preview{position:relative;aspect-ratio:3/4;background:var(--alabaster-light);overflow:hidden}
.preview img{width:100%;height:100%;object-fit:cover}

/* Mark */
.marker-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--alabaster-light);cursor:grab;touch-action:none}
.marker-wrap img{width:100%;height:100%;object-fit:cover;pointer-events:none;
  /* F1: no blue selection and no drag ghost while placing the marker. */
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.marker-wrap{user-select:none;-webkit-user-select:none}
.marker{position:absolute;width:56px;height:56px;transform:translate(-50%,-50%);pointer-events:none;display:none}
.marker.show{display:block}
.marker::before{content:"";position:absolute;inset:0;border:2px solid var(--white);border-radius:50%;box-shadow:0 0 0 1px rgba(10,10,13,.45),inset 0 0 0 1px rgba(10,10,13,.45)}
.marker::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;background:var(--gold);transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 1px rgba(10,10,13,.45)}
.marker .lab{position:absolute;left:50%;top:100%;transform:translate(-50%,8px);white-space:nowrap;background:var(--ink);color:var(--white);font:500 11px/16px var(--sans);letter-spacing:1px;text-transform:uppercase;padding:4px 8px}
.marker .ring{position:absolute;inset:-10px;border:1px solid rgba(255,255,255,.55);border-radius:50%;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.seg button{height:48px;border:1px solid var(--border);font:400 13px/16px var(--sans);padding:0 4px;background:var(--white)}
.scene-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.scene-grid button{padding:0;border:1px solid var(--border);background:var(--white);text-align:left;cursor:pointer;display:block}
.scene-grid button:hover{border-color:var(--ink)}
.scene-grid button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* height:auto matters. The markup carries width="480" height="640" (so the row
   does not jump while the thumbnails load), and a presentational height
   attribute beats `aspect-ratio` unless the height is explicitly auto - the
   global img rule only sets max-width. Without it every room was drawn in a
   191x640 box: a tall narrow slice with object-fit cropping the room away, so
   you could not tell one from another (Nik, 2026-09-16). With it the box is the
   photograph's own 3:4 and nothing is cropped at all. */
.scene-grid img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.scene-grid .cap{display:block;font:400 12px/16px var(--sans);color:var(--ink);padding:8px}
.scene-grid .cap .sub{display:block;color:var(--muted)}
.ceiling-custom{margin-top:12px}
.ceiling-custom .label{display:block;font:400 12px/16px var(--sans);color:var(--muted);margin-bottom:6px}
.ceiling-custom .row-inline{display:flex;gap:8px;align-items:center}
.ceiling-custom .row-inline .input{max-width:120px}
.ceiling-custom .unit{font:400 14px/20px var(--sans);color:var(--stone)}
.ceiling-custom .err{color:var(--signal);margin-top:6px}
.seg button[aria-pressed="true"]{border-color:var(--ink);background:var(--alabaster-light);font-weight:500}
@media (max-width:991px){.seg{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Lights */
.search-row{margin-bottom:16px;max-width:520px}
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:24px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .chip{flex:0 0 auto}
/* The row scrolls sideways with the scrollbar hidden, which works on a phone
   because you swipe it. With a mouse there is nothing to grab and no bar to
   see, so every chip past the edge of the picker's left rail was simply
   unreachable (Nik, 2026-09-14: "these parts are cut off and you cant scroll
   to see the options"). On desktop let them wrap instead. */
@media (min-width:992px){
  .filters{flex-wrap:wrap;overflow-x:visible}
}
@media (max-width:991px){
  .chip.small{height:36px}
  #ba-picks,.also .lgrid{display:flex;overflow-x:auto;flex-wrap:nowrap;gap:12px;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px 4px}
  #ba-picks::-webkit-scrollbar,.also .lgrid::-webkit-scrollbar{display:none}
  #ba-picks .chip{flex:0 0 auto}
  .also .lgrid .pcard{flex:0 0 44%}
  .result-actions .btn{padding:0 12px}
}
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 16px}
@media (min-width:1200px){.lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lgrid .pcard[aria-pressed="true"] .img{outline:1px solid var(--ink);outline-offset:-1px}
.lgrid .pcard .meta h4{font-size:18px}

/* Sheet (light detail) */
.sheet-scrim{position:fixed;inset:0;background:var(--overlay);z-index:60;display:none}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--white);max-height:88vh;overflow:auto;display:none;box-shadow:var(--pop);transform:translateY(100%);transition:transform .35s var(--ease)}
.sheet.open,.sheet-scrim.open{display:block}
.sheet.open{transform:translateY(0)}
@media (min-width:992px){.sheet{left:auto;right:32px;bottom:32px;width:520px;max-height:calc(100vh - 64px)}}
/* The room picker is the one sheet you BROWSE rather than read. At 520px in the
   corner its twenty rooms came out three to a row at ~150px each, which on a
   wide monitor is a thumbnail you cannot judge a room by - and pinned to the
   right edge it sits nowhere near where you are looking (Nik, 2026-09-16: "why
   is this part so small when it pops up? make it bigger so can see what im
   actually picking"). So this one centres and grows with the window.
   Centred with left+margin rather than a transform: `transform` is what drives
   the sheet's open animation, and overwriting it here would kill the slide. */
@media (min-width:992px){
  #scene-sheet{--sheet-w:min(1080px,calc(100vw - 96px));
    left:50%;right:auto;margin-left:calc(var(--sheet-w) / -2);width:var(--sheet-w)}
  #scene-sheet .scene-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
}
.sheet .inner{padding:24px}
.sheet .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sheet .close{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--border)}
.sheet .prod{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:24px}
.sheet .prod .img{aspect-ratio:1;background:var(--alabaster-light)}
.sheet .prod .img img{width:100%;height:100%;object-fit:cover}
.sheet .prod p{margin:4px 0 0}
.opts{display:grid;gap:8px;margin-bottom:24px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;height:48px;padding:0 14px;border:1px solid var(--border);font:400 14px/20px var(--sans);text-align:left;background:var(--white)}
.opt[aria-pressed="true"]{border-color:var(--ink);background:var(--alabaster-light)}
.opt .dim{color:var(--muted);font-size:12px}
.swatches{display:flex;gap:10px;margin-bottom:24px}
.sw{width:40px;height:40px;border:1px solid var(--border);padding:3px;background:var(--white)}
.sw i{display:block;width:100%;height:100%}
.sw[aria-pressed="true"]{border-color:var(--ink)}
.sw-lab{font-size:12px;color:var(--muted);margin:-16px 0 24px}

/* Render */
.rendering{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--alabaster-light)}
.rendering img{width:100%;height:100%;object-fit:cover}
.rendering .veil{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);background-size:250% 100%;animation:sheen 2.2s linear infinite}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
.rendering .spot{position:absolute;width:120px;height:120px;transform:translate(-50%,-50%);border:1px solid var(--white);border-radius:50%;opacity:.8}
.checks{margin:0;padding:0;list-style:none}
.checks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--border);color:var(--muted);font-size:14px}
.checks li:last-child{border-bottom:1px solid var(--border)}
.checks li .dot{width:24px;height:24px;border:1px solid var(--border);display:grid;place-items:center}
.checks li .dot svg{width:12px;height:12px;stroke:var(--white);fill:none;stroke-width:2;display:none}
.checks li.on{color:var(--ink)}
.checks li.on .dot{border-color:var(--gold);background:var(--gold-tint)}
.checks li.done{color:var(--ink)}
.checks li.done .dot{background:var(--ink);border-color:var(--ink)}
.checks li.done .dot svg{display:block}
@media (prefers-reduced-motion:reduce){.rendering .veil,.marker .ring{animation:none}}

/* Result */
.result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
.rate{border:1px solid var(--border);padding:20px;margin:24px 0}
.rate .q{font:400 24px/1.2 var(--serif);margin-bottom:12px}
.rate .btns{display:flex;gap:12px}
.rate .btns .btn{flex:1;min-width:0}
.lbl-short{display:none}
@media (max-width:991px){.lbl-long{display:none}.lbl-short{display:inline}.rate{padding:16px}.rate .btns .btn{padding:0 8px}.result-actions{gap:8px}.result-actions .btn{padding:0 8px}}
.rate textarea{width:100%;min-height:80px;border:1px solid var(--border);padding:12px 14px;font:400 16px/24px var(--sans);resize:vertical;margin-top:12px;display:none}
.rate.answered textarea{display:block}
.rate .improve{margin-top:16px}
.rate .improve .h4{font:400 20px/1.2 var(--serif)}
.rate-send{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.rate .thanks{display:none;color:var(--success);font-size:14px}
.prodbar{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px;border:1px solid var(--border)}
.prodbar .img{aspect-ratio:1;background:var(--alabaster-light)}
.prodbar .img img{width:100%;height:100%;object-fit:cover}
.prodbar h4{font-size:24px}
.prodbar p{margin:2px 0 0}
@media (max-width:991px){.prodbar{grid-template-columns:64px minmax(0,1fr)}.prodbar .btn{grid-column:1/-1;width:100%}}
.also{margin-top:32px}
.also .lgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.also .badge{display:none}
.also .pcard .meta h4{font-size:16px}
.also .pcard .meta .price{font-size:14px}

/* Saved */
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sgrid .s{aspect-ratio:3/4;background:var(--alabaster-light);position:relative;overflow:hidden}
.sgrid .s img{width:100%;height:100%;object-fit:cover}
.sgrid .s .lab{position:absolute;left:12px;bottom:12px}
/* B4: the field shared a row with both buttons inside the 480px rail and
   collapsed to 78px, clipping the placeholder to "you@". It gets its own
   full-width row at every breakpoint. */
.inbox{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;margin-top:24px}
.inbox .field{grid-column:1 / -1}
@media (max-width:991px){.inbox{grid-template-columns:1fr}}
.note{font-size:12px;line-height:16px;color:var(--muted);margin-top:12px}
.note.disclaimer{margin-top:16px;padding:12px 14px;background:var(--alabaster-light);color:var(--stone)}
.note.disclaimer a{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--white);padding:12px 18px;font:500 12px/16px var(--sans);letter-spacing:1px;text-transform:uppercase;z-index:70;display:none}
.toast.show{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Before/After labels sit above the frame so they never cover the light (Nik, 2026-09-03). */
.ba-labels{display:flex;justify-content:space-between;margin:0 0 8px;font:500 12px/1 var(--sans);letter-spacing:var(--track-badge);text-transform:uppercase;color:var(--ink)}
.ba-labels span:last-child{color:var(--gold)}

/* Feedback thank-you popup (Nik, 2026-09-04) */
.thanks-pop{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:var(--overlay);padding:24px}
.thanks-pop[hidden]{display:none}
.thanks-pop .card{background:var(--white);border:1px solid var(--border);padding:28px 28px 24px;max-width:360px;width:100%;text-align:center;box-shadow:var(--pop);display:grid;gap:10px;justify-items:center}
.thanks-pop .card .btn{margin-top:6px}

/* Mobile home (Kristen): these must win over the later mobile rules for #ba-picks and .step */
@media (max-width:640px){
  /* B3: the hero carries the headline, the value proposition and the only
     filled primary button. Hiding it left a phone visitor opening on an
     unexplained before-and-after image.
     The photograph leads, per the 390 mockup: the square crop of the hand and
     phone at the top, the ink block fading up out of it, then the headline, the
     body copy and the one filled button. B3 had said the photograph was not
     needed at this size and I took that literally; it is the first thing the
     mockup shows, so it comes back. Padding stays off the top so the mask, which
     is absolute against the padding box, still lines up with the image. */
  #s-home .hero{display:block;padding:0 0 8px}
  #s-home .hero img.bg,#s-home .hero .mask{display:block}
  /* The copy under the photograph measures 261px, so that is what a square crop
     has to leave. On a 320x568 it does not, and the button lands below the fold
     while the hero still fills enough of the screen that body.at-hero keeps the
     nav's CTA hidden as well - which is the exact state B3 was raised about. Cap
     the photograph to the room that is left and let the crop go landscape; the
     square survives at every size from 360x640 up. svh, where
     it is supported, measures the viewport with the phone's toolbars showing,
     which is what the customer actually sees on first paint.
     Both get the same explicit height and neither keeps aspect-ratio: capping a
     square mask with max-height instead made Chromium resolve its WIDTH from the
     ratio and drop the right inset, which left a hard-edged unmasked band down
     the right of the photograph. */
  #s-home .hero img.bg,#s-home .hero .mask{aspect-ratio:auto;height:min(100vw,max(180px,calc(100vh - 276px)));height:min(100vw,max(180px,calc(100svh - 276px)))}
  #s-home .hero .wrap{padding-top:24px}
  #s-home .split{display:flex;flex-direction:column;gap:16px}
  #s-home .split .ba-media{order:-1;width:100%;max-width:none;align-self:stretch;margin:0}
  #s-home .split .ba-media .ba{width:100%;aspect-ratio:4/5}
  #s-home .split .ba-sub,#s-home .split #ba-picks,#s-home .split #ba-line{display:none}
  #s-home .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #s-home .steps .step{display:block;text-align:center}
  #s-home .steps .step p{display:none}
  #s-home .steps .step .num{margin:0 auto 8px;font-size:32px}
  #s-home .steps .step h3{font-size:13px;line-height:1.25;margin:0}
}

/* A phone held sideways - an SE is 568x320 - has no room for the photograph and
   the copy together: the photograph's 180px floor alone puts the filled button
   below the fold, and at this width the header carries no CTA to fall back on.
   Under 460px of height, drop the photograph and put the header back in flow,
   which is exactly what this screen did before the photograph came back, so the
   headline and the button are both on screen. */
@media (max-width:640px) and (max-height:460px){
  #s-home .hero{padding:24px 0 8px}
  #s-home .hero img.bg,#s-home .hero .mask{display:none}
  #s-home .hero .wrap{padding-top:0}
  #s-home .nav.over{position:relative;background:var(--white)}
  #s-home .nav.over .logo-white{display:none}
  #s-home .nav.over .logo-ink{display:block}
}

/* F2: at 375x812 the portrait photo ran to about 700px, so the ceiling height
   control and Skip sat below the fold - the one thing we ask for on this step
   was unreachable without scrolling. Order it above the photo on a phone. */
@media (max-width:991px){
  #s-mark.active{display:flex;flex-direction:column}
  #s-mark #mark-h1{order:1}
  #s-mark #mark-lead{order:2}
  #s-mark #ceiling-block{order:3;margin-top:12px!important}
  #s-mark .marker-wrap{order:4;margin-top:16px}
  #s-mark #mark-pair-row{order:5}
  #s-mark .cta-row,#s-mark .row-inline{order:6}
  /* Anything without an explicit order defaults to 0 and jumps to the TOP
     of the column: "Skip and let's pick the spot" was sitting above the
     heading on a phone, and the new pair control landed there too. */
  #s-mark > p.note{order:7}
}