/* Ori Design Lab - bathroom design tool.

   Palette: white and cream ground, warm near-black text, and ONE accent - terracotta.
   The accent appears in exactly four roles: the primary button, the currently selected
   material, the featured pricing tier, and the checkbox tick. That restraint is the
   point. Every extra place it turns up costs it some of its impact, so if something
   new needs emphasis, reach for weight or a warm neutral first.

   Shadows are warm (--shadow-rgb) rather than blue-black; a cool shadow over cream
   reads grey and dirty. */


/* If brand.json ever holds a placeholder name again, mark it visibly so it can't ship. */
:root[data-brand-placeholder="true"] .wm-main{
  border-bottom:2px dotted var(--accent);padding-bottom:1px;
}

:root{
  /* White + cream ground, warm near-black for text, and ONE accent used sparingly.
     The accent is reserved for the primary action, the current selection, and the
     featured tier - nothing else. Spread it further and it stops being a pop. */
  --deep:#2A231E;          /* warm near-black - headings, dark section, primary text */
  --deep-2:#3D332B;
  --muted:#A2907E;         /* warm taupe - eyebrows, small caps, hairlines */
  --accent:#C0512C;        /* terracotta - USE SPARINGLY */
  --accent-2:#A5421F;      /* accent hover */
  --ink:#2E2721;
  --ink-2:#6B6058;
  --ink-3:#9A8E83;
  --line:#EAE1D3;
  --paper:#FBF7F0;         /* cream page ground */
  --paper-2:#F3EADB;
  --white:#fff;
  --wall-paint:#F4EDE2;    /* the painted wall in the room scene */
  --shadow-rgb:74,56,42;   /* warm shadow, not blue-black */
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(var(--shadow-rgb),.06),0 4px 14px rgba(var(--shadow-rgb),.07);
  --shadow-md:0 2px 6px rgba(var(--shadow-rgb),.09),0 18px 44px rgba(var(--shadow-rgb),.13);
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
/* A CSS display rule beats the hidden attribute, which silently un-hid the photo
   preview and the success message. Restore hidden's meaning globally. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.08;color:var(--deep);letter-spacing:-.01em}
em{font-style:italic}

.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:600}
.sub{color:var(--ink-2);font-size:15px;max-width:56ch}
.lede{color:var(--ink-2);font-size:17px;max-width:56ch}

.btn{
  /* No flex `gap` here. A button whose label mixes plain text with an inline <span>
     turns each run into its own flex item, and the gap then shows up as double spaces
     between words. Space icons with a margin instead - see .btn > svg + *. */
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:.85rem 1.5rem;border-radius:999px;font-size:14.5px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:.18s;font-family:inherit;
}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--deep);border-color:#D8CCBA}
.btn-ghost:hover{background:#fff;border-color:var(--deep);color:var(--deep)}
.btn-sm{padding:.6rem 1.1rem;font-size:13.5px}
.btn-block{width:100%}
.btn-label{display:inline}
.btn > svg + *,.btn > * + svg{margin-left:.5rem}

/* ── header ──────────────────────────────────────────────────────────
   Centred stacked lockup with the nav split either side: DESIGN over Ori over LAB,
   the small words letterspaced caps and hairline-ruled, the name itself in the display
   serif. Three-column grid with equal side columns so the lockup sits optically centred
   regardless of how long the nav labels are.

   The header is taller than a single-line one, so its height is a variable - the sticky
   room preview offsets from it and would otherwise tuck underneath. */
:root{ --head-h:108px; }

.site-head{
  position:sticky;top:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1.2rem;padding:.75rem clamp(1rem,4vw,2.5rem);
  background:rgba(251,247,240,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-nav{display:flex;align-items:center;gap:1.4rem}
.head-nav-l{justify-content:flex-start}
/* The CTA is pulled in from the edge rather than sitting flush against it - a button
   hard against the viewport edge reads like it fell off. */
.head-nav-r{justify-content:flex-end;padding-right:clamp(0px,11vw,10rem)}
.head-nav a{color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:500;
  letter-spacing:.06em;white-space:nowrap}
.head-nav a:hover{color:var(--deep)}
.head-nav a.btn{color:#fff;letter-spacing:normal}

/* the lockup */
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
  line-height:1}
.wm-rule{display:flex;align-items:center;gap:8px;width:100%;justify-content:center}
/* Hairlines on the bottom word only. Ruling both never works: the two words are
   different lengths, so the longer one squeezes its own rules down to nothing. */
.wm-rule i{display:none;height:1px;background:var(--muted);opacity:.45}
.wm-rule-btm i{display:block;flex:1}
.wm-sm{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  font-weight:600;white-space:nowrap;padding-left:.34em}
.wm-main{font-family:Fraunces,Georgia,serif;font-size:53px;font-weight:600;
  color:var(--deep);letter-spacing:.01em;line-height:1.02}
/* The one place the accent appears outside a button or a selection: the final letter
   of the name. Small enough to stay rare, prominent enough to own the mark. */
.wm-accent{color:var(--accent)}
.brand:hover .wm-main{color:var(--deep-2)}

/* Footer uses the same lockup, quieter. */
.foot-lockup{align-items:flex-start;display:inline-flex}
.foot-lockup .wm-main{font-size:40px}
.foot-lockup .wm-sm{font-size:8px}

/* ── the hamburger and its panel ──
   Desktop never sees either: the four links are already in the header. */
.nav-toggle{display:none;background:none;border:0;padding:.5rem;margin:-.5rem;
  cursor:pointer;color:var(--deep);line-height:0}
.nav-bars{display:block;width:22px}
.nav-bars i{display:block;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s ease,opacity .16s ease}
.nav-bars i + i{margin-top:5px}
/* Bars fold into an X while the panel is open, so the button says what it will do. */
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none}

@media (max-width:900px){
  :root{ --head-h:92px; }
  /* Hamburger, centred lockup, CTA. The mark stays in the middle as it does on desktop,
     because a logo that jumps sides between breakpoints reads as two different sites. */
  .site-head{grid-template-columns:auto 1fr auto;gap:.6rem;padding:.6rem 1rem}
  .nav-toggle{display:block}
  .head-nav-l{display:none}
  /* No inset on a phone: the little width there is shouldn't go to a decorative gap. */
  .head-nav-r{justify-content:flex-end;padding-right:0}
  .brand{align-items:center}
  .wm-main{font-size:41px}
  .wm-sm{font-size:8px;letter-spacing:.3em}

  .mobile-nav{display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--white);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);padding:.5rem .9rem 1rem}
  .mobile-nav a{display:block;padding:.95rem .25rem;text-decoration:none;
    color:var(--ink-2);font-size:16px;font-weight:500;
    border-bottom:1px solid var(--line)}
  .mobile-nav a[aria-current="page"]{color:var(--deep);font-weight:600}
  .mobile-nav a:last-of-type{border-bottom:0}
  .mobile-cta{margin-top:.9rem;color:#fff !important;text-align:center;
    padding:.85rem 1rem !important}
}

/* ── hero ── */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);margin:.7rem 0 1.1rem}
.hero-cta{display:flex;gap:.7rem;margin:1.8rem 0 .9rem;flex-wrap:wrap}
.hero-note{font-size:13px;color:var(--ink-3)}
.hero-art{position:relative}
.hero-scene{
  aspect-ratio:4/3.2;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-md);background:var(--paper-2);position:relative;
}

/* ── section furniture ── */
.section-head{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.5rem 0 .6rem}
.builder{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem);border-top:1px solid var(--line);background:var(--white)}

/* ── look presets ── */
.looks{
  max-width:var(--maxw);margin:1.8rem auto 2.6rem;padding:0 clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;
}
.look{
  border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden;
  cursor:pointer;text-align:left;font-family:inherit;transition:.18s;padding:0;
}
.look:hover{border-color:var(--muted);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.look[aria-selected="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.look-strip{display:flex;height:62px}
.look-strip i{flex:1;background-size:cover;background-position:center}
.look-strip i.v{flex:.85;background:var(--wall-paint);background-size:contain;background-repeat:no-repeat;background-position:center bottom}
.look-b{padding:.6rem .75rem .75rem}
.look-b b{display:block;font-family:Fraunces,Georgia,serif;font-size:15px;color:var(--deep);font-weight:600}
.look-b span{font-size:11.5px;color:var(--ink-3)}

/* ── studio layout ── */
.studio{
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(1.5rem,3vw,2.6rem);
  /* NOT align-items:start. A sticky element cannot outlive its parent's box, and with
     `start` the preview column is only as tall as its own contents - so the preview
     unstuck partway down the much taller swatch column and left a blank white panel.
     Stretching the column to the full grid row gives the sticky preview the whole
     height of the controls to travel through. */
  align-items:stretch;
}
.scene-wrap{position:sticky;top:calc(var(--head-h) + 12px)}
.scene-note{font-size:11.5px;color:var(--ink-3);margin-top:.6rem;line-height:1.5}

/* Material swaps are instant, deliberately. A `transition: background-image` here
   animates nothing visible (Chrome treats background-image as discrete) but does hold
   the OLD image for half the duration, so a click felt laggy and read as a flash. */
/* ── the room scene ──────────────────────────────────────────────
   A shower alcove on the left (tiled), a painted vanity wall on the right.
   That split is deliberate: it mirrors how these jobs are actually built, and it
   gives the vanity cut-outs a near-white backdrop, so the white countertops that
   drop out during background removal are invisible. */
.scene{
  position:relative;aspect-ratio:4/3.15;border-radius:var(--radius);overflow:hidden;
  background:var(--wall-paint);box-shadow:var(--shadow-md);
}
.s-wall{position:absolute;inset:0;background:
  linear-gradient(180deg,#FAF5EC 0%,var(--wall-paint) 55%,#EADFCC 100%);}
.s-alcove{position:absolute;left:0;top:0;width:56%;height:79%;overflow:hidden;
  box-shadow:inset -22px 0 34px -18px rgba(var(--shadow-rgb),.34);}
/* Shower floor: the accent tile again, laid flat inside the alcove. Without it the
   tiled walls stop dead in mid-air and the alcove reads as a flat panel, not a space. */
.s-showerfloor{
  position:absolute;left:0;right:0;bottom:0;height:17%;
  background-size:cover;background-position:center;
  transform:perspective(420px) rotateX(62deg);transform-origin:bottom center;
  box-shadow:0 -10px 20px -10px rgba(var(--shadow-rgb),.5);
}
.s-showerfloor::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--shadow-rgb),.34),rgba(255,255,255,.08));}
.s-curb{position:absolute;left:0;width:56%;bottom:20.4%;height:1.6%;
  background:linear-gradient(180deg,#EFE7D9,#D6CBB8);
  box-shadow:0 2px 5px rgba(var(--shadow-rgb),.3);z-index:3}
.s-tile{position:absolute;inset:0;background-size:cover;background-position:center}
.s-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(255,255,255,.20),rgba(255,255,255,0) 42%,rgba(var(--shadow-rgb),.16));}
.s-niche{position:absolute;right:11%;top:16%;width:34%;height:24%;
  border-radius:3px;padding:5px;background:rgba(var(--shadow-rgb),.30);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.42);}
.s-niche-in{width:100%;height:100%;background-size:cover;background-position:center;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35)}
/* Shower glass. Kept very low contrast on purpose - at full opacity it read as a solid
   white bar across the tile rather than as a pane you look through. */
.s-glass{
  position:absolute;right:0;top:0;bottom:0;width:22px;
  background:linear-gradient(90deg,rgba(214,228,236,.30),rgba(255,255,255,.16));
  border-left:1px solid rgba(255,255,255,.40);
  box-shadow:inset -1px 0 0 rgba(var(--shadow-rgb),.12);
}
/* Main floor. Height and angle are tuned together: at 56deg the plane collapsed to a
   sliver and read as a skirting board. A taller element at a steeper angle keeps the
   same eye-level but leaves enough visible surface for the tile pattern to register. */
.s-floor{
  position:absolute;left:0;right:0;bottom:0;height:42%;
  background-size:cover;background-position:center;
  transform:perspective(680px) rotateX(62deg);transform-origin:bottom center;
  box-shadow:0 -16px 30px -14px rgba(var(--shadow-rgb),.35);
}
.s-floor::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--shadow-rgb),.26),rgba(var(--shadow-rgb),.04) 62%,rgba(255,255,255,.05));}
/* The wall/floor junction. A hard line here is what actually sells the depth. */
.s-baseshadow{position:absolute;left:0;right:0;bottom:21%;height:9%;
  background:linear-gradient(180deg,transparent,rgba(var(--shadow-rgb),.20));pointer-events:none;z-index:2}
.s-corner{position:absolute;left:56%;top:0;width:26px;height:79%;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(var(--shadow-rgb),.20),transparent)}
.s-vanitywrap{position:absolute;right:4%;bottom:19%;width:36%;display:flex;
  flex-direction:column;align-items:center;z-index:3}
.s-vanity{width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(var(--shadow-rgb),.24));
  transition:opacity .3s}
.s-vanshadow{position:absolute;bottom:-10px;width:88%;height:16px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(var(--shadow-rgb),.30),transparent 70%)}
.s-mirror{
  width:62%;aspect-ratio:1/1.18;border-radius:999px 999px 6px 6px;margin-bottom:6%;
  background:linear-gradient(160deg,#F1EDE6,#DCD3C6 45%,#F5F1EA);
  border:5px solid var(--fin,#c9a568);
  box-shadow:0 6px 18px rgba(var(--shadow-rgb),.18),inset 0 0 22px rgba(255,255,255,.6);
}
/* Sconces flank the mirror at mirror height. Above it they read as two stray specks. */
.s-sconce{position:absolute;top:7%;left:0;right:0;display:flex;justify-content:space-between;
  padding:0 4%;pointer-events:none}
.s-sconce i{width:9px;height:26px;border-radius:5px;background:var(--fin,#c9a568);
  box-shadow:0 0 20px 7px rgba(255,236,198,.45)}

/* ── spec cards ── */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.4rem}
.spec-card{display:flex;gap:.75rem;align-items:center;border:1px solid var(--line);
  border-radius:10px;background:#fff;padding:.55rem;box-shadow:var(--shadow-sm)}
.spec-card .sc-img{width:56px;height:52px;border-radius:7px;flex:0 0 auto;
  background-size:cover;background-position:center;background-color:#f4f2ef}
.spec-card .sc-img.contain{background-size:contain;background-repeat:no-repeat}
.sc-role{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sc-name{font-family:Fraunces,Georgia,serif;font-size:14px;color:var(--deep);line-height:1.15;margin-top:1px}
.sc-sub{font-size:11px;color:var(--ink-3);margin-top:2px}

/* ── controls ── */
.controls-col{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:clamp(1.1rem,2vw,1.6rem);box-shadow:var(--shadow-sm)}
.ctl-head{padding-bottom:1.1rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem}
.ctl-head h3{font-size:1.55rem;margin:.35rem 0 .4rem}
.ctl{padding:.95rem 0;border-bottom:1px solid var(--line)}
.ctl:last-of-type{border-bottom:0}
.ctl-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.ctl h4{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-family:Inter,sans-serif;
  font-weight:600;color:var(--ink)}
.ctl-sel{font-size:12px;color:var(--ink-3);text-align:right;line-height:1.3}
/* Capped and internally scrollable. The accent and shower rails draw from all 231
   materials; uncapped they turn the control column into thousands of pixels and put the
   vanity somewhere nobody scrolls to. Short rails (vanity, finish) never reach the cap. */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.45rem;
  max-height:288px;overflow-y:auto;overscroll-behavior:contain;
  padding-right:2px;scrollbar-width:thin}
.swatches::-webkit-scrollbar{width:6px}
.swatches::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.swatches::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.sw{
  position:relative;aspect-ratio:1;border-radius:8px;border:1px solid var(--line);
  background-size:cover;background-position:center;cursor:pointer;padding:0;
  transition:.15s;overflow:hidden;
}
.sw:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--muted)}
.sw[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
/* ── the niche toggle ──
   A build decision, not a material, so it reads as a checkbox rather than a swatch. */
.ctl-toggle{padding-top:.9rem}
.tog{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.tog input{position:absolute;opacity:0;width:0;height:0}
.tog-box{flex:0 0 20px;height:20px;margin-top:1px;border:1.5px solid var(--muted);
  border-radius:5px;background:#fff;position:relative;transition:.15s}
.tog input:checked + .tog-box{background:var(--accent);border-color:var(--accent)}
.tog input:checked + .tog-box::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.tog input:focus-visible + .tog-box{outline:2px solid var(--accent);outline-offset:2px}
.tog-text b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.tog-text i{display:block;font-style:normal;font-size:11.5px;line-height:1.45;
  color:var(--ink-3);margin-top:.15rem}

.sw-vanity .sw{background-size:contain;background-repeat:no-repeat;background-color:var(--wall-paint);
  background-position:center 78%}
.sw-finish{grid-template-columns:repeat(auto-fill,minmax(58px,1fr))}
.sw-finish .sw{aspect-ratio:1.35}
.ctl-actions{margin-top:1.3rem;display:grid;gap:.6rem}

/* ── how ── */
.how{padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--paper)}
.steps{max-width:var(--maxw);margin:2rem auto 0;padding:0 clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;list-style:none}
.steps li{border-top:2px solid var(--deep);padding-top:1rem}
.step-n{font-family:Fraunces,Georgia,serif;font-size:13px;color:var(--muted);letter-spacing:.1em}
.steps h4{font-size:1.15rem;margin:.4rem 0 .45rem}
.steps p{font-size:14.5px;color:var(--ink-2)}

/* ── plan / form ── */
.plan{background:var(--deep);color:#fff;padding:clamp(2.5rem,6vw,4.5rem) 0}
.plan-inner{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.plan h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.5rem 0 .7rem}
.plan .eyebrow{color:#C9B49E}
.plan .lede{color:#D8CCBE}
.yourpick{margin-top:1.6rem;display:grid;gap:.5rem}
.yp{display:flex;gap:.7rem;align-items:center;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.5rem .65rem}
.yp .yp-img{width:44px;height:40px;border-radius:6px;background-size:cover;background-position:center;flex:0 0 auto}
.yp .yp-img.contain{background-size:contain;background-repeat:no-repeat;background-color:rgba(255,255,255,.9)}
.yp-role{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#C9B49E}
.yp-name{font-family:Fraunces,Georgia,serif;font-size:13.5px}

.plan-form{background:#fff;border-radius:var(--radius);padding:clamp(1.2rem,2.4vw,1.9rem);
  box-shadow:var(--shadow-md)}
.f-row{margin-bottom:.85rem}
.f-2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.plan-form label{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
.plan-form input,.plan-form select,.plan-form textarea{
  width:100%;margin-top:.3rem;padding:.62rem .7rem;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  text-transform:none;letter-spacing:normal;
}
.plan-form input:focus,.plan-form select:focus,.plan-form textarea:focus{
  outline:none;border-color:var(--deep);box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.10)}
.plan-form textarea{resize:vertical}
.f-photo{border:1px solid var(--line);border-radius:11px;padding:.85rem;margin:1rem 0;background:var(--paper)}
.f-photo-t{font-size:13px;font-weight:600;color:var(--ink)}
.f-photo-t span{font-weight:400;color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.f-photo-s{font-size:12.5px;color:var(--ink-2);margin:.25rem 0 .6rem}
.drop{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);
  border-radius:9px;padding:.9rem;font-size:13.5px;color:var(--ink-2);cursor:pointer;
  text-transform:none;letter-spacing:normal;font-weight:500}
.drop:hover{border-color:var(--deep);color:var(--deep);background:#fff}
.photo-prev{display:flex;gap:.7rem;align-items:center;margin-top:.6rem}
.photo-prev img{width:76px;height:60px;object-fit:cover;border-radius:8px}
.photo-prev button{background:none;border:0;color:var(--muted);font:inherit;font-size:12.5px;
  cursor:pointer;text-decoration:underline}
.f-fine{font-size:11.5px;color:var(--ink-3);margin-top:.7rem;text-align:center}
.f-ok{margin-top:.9rem;padding:.85rem;border-radius:9px;background:#eef5ee;border:1px solid #cfe3d0;
  color:#2c5334;font-size:14px}

/* ── footer ── */
.site-foot{border-top:1px solid var(--line);background:var(--white);
  padding:2rem clamp(1rem,4vw,2.5rem);display:flex;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto}
.foot-logo{height:32px}
.site-foot p{font-size:12px;color:var(--ink-3);margin-top:.4rem}
.foot-right{text-align:right;max-width:44ch}
.foot-right a{color:var(--deep);font-size:14px;font-weight:600;text-decoration:none}
.foot-fine{font-size:11px;line-height:1.5}

/* ── responsive ── */
@media (max-width:1040px){
  .looks{grid-template-columns:repeat(2,1fr)}
  /* One column. The preview has to follow you down the rails - otherwise every swap
     means scrolling down to pick and back up to see what it did, which is the whole
     job of this page.

     Flex rather than grid on purpose: a sticky grid item is confined to its own grid
     row, so it would unstick immediately. A sticky flex item is confined to the flex
     container, which here spans the preview, the controls and the spec cards. */
  /* align-items:stretch matters: the desktop rule sets `start`, which in a COLUMN
     flex container collapses each item to its content width - and the scene has no
     intrinsic width (everything inside it is absolutely positioned), so it
     collapsed to zero and disappeared. */
  .studio{display:flex;flex-direction:column;gap:1.3rem;align-items:stretch}
  .preview-col{display:contents}
  .scene-wrap{
    position:sticky;top:calc(var(--head-h) + 8px);z-index:40;order:1;
    background:var(--paper);padding-bottom:.5rem;
  }
  /* Capped by height, not width, so it can never eat more than a third of the screen
     and leave no room for the swatches it exists to preview. */
  .scene{max-width:min(100%,calc(30vh * 1.27));margin-inline:auto}
  .controls-col{order:2}
  /* The written spec belongs after the choosing, not between the room and the rails. */
  .spec{order:3}
  /* The disclaimer is honest and necessary, but it does not need to be glued to the
     preview while you scroll swatches - it was costing 8% of a phone screen. */
  .scene-note{order:4;margin-top:0}
  .hero{grid-template-columns:1fr}
  .hero-art{order:-1}
  .plan-inner{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:620px){
  .head-nav a:not(.btn){display:none}
  /* The full lockup plus a long CTA overflows a phone header, so drop the tagline
     and shorten the button label rather than letting either wrap. */
  .site-head{gap:.75rem;padding:.7rem 1rem}
  .brand-tag{display:none}
  .brand img{height:28px}
  .head-nav a.btn{padding:.55rem .9rem;font-size:13px;white-space:nowrap}
  .head-nav a.btn span.long{display:none}
  .looks{grid-template-columns:1fr 1fr}
  .spec{grid-template-columns:1fr}
  .f-2{grid-template-columns:1fr}
  .foot-right{text-align:left}
}

/* ── before / after reveal ─────────────────────────────────────────────
   The comparison IS the pitch: a standalone render invites the viewer to audit
   it for AI mistakes, whereas a wipe against their real photo keeps the eye on
   the change. Both frames are pre-cropped to the same aspect so the wipe lines up.
   Driven by a real <input type=range> so it works with keyboard and touch for free;
   the visible handle is decorative and the input sits transparent on top. */
.reveal{padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--white);border-top:1px solid var(--line)}
.reveal h2 em{font-style:italic}
.ba{max-width:820px;margin:2rem auto 0;padding:0 clamp(1rem,4vw,2.5rem)}
.ba-frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-md);aspect-ratio:3/4;background:var(--paper-2);
  touch-action:pan-y;user-select:none;
}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The "before" layer is clipped from the left edge to the handle position. */
.ba-clip{position:absolute;inset:0;width:var(--pos,50%);overflow:hidden}
.ba-clip .ba-img{width:var(--frameW,820px);max-width:none}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;
  background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.25);pointer-events:none;
}
.ba-handle span{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 2px 10px rgba(var(--shadow-rgb),.32);
}
.ba-handle span::before,.ba-handle span::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.ba-handle span::before{left:11px;transform:translateY(-50%);border-right:7px solid var(--deep)}
.ba-handle span::after{right:11px;transform:translateY(-50%);border-left:7px solid var(--deep)}
.ba-tag{
  position:absolute;bottom:12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(var(--shadow-rgb),.72);padding:5px 10px;border-radius:999px;pointer-events:none;
}
.ba-tag-l{left:12px}
.ba-tag-r{right:12px}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:ew-resize}
.ba-range:focus-visible{opacity:1;outline:3px solid var(--deep);outline-offset:3px}
.ba-note{font-size:12px;color:var(--ink-3);margin-top:.7rem;line-height:1.55;text-align:center}

/* photo capture tips */
.f-photo-tips{margin:.1rem 0 .7rem 1.05rem;padding:0}
.f-photo-tips li{font-size:12.5px;color:var(--ink-2);line-height:1.6}

@media (max-width:620px){
  .ba-frame{aspect-ratio:3/4}
  .ba-handle span{width:38px;height:38px}
}

/* ── pricing ───────────────────────────────────────────────────────────
   Free tier first and deliberately not diminished: it is the top of the funnel and
   the thing that gets found, not a crippled demo. The paid tiers earn their place
   by offering the one thing the free tool cannot - the customer's actual room. */
.pricing{padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--paper);border-top:1px solid var(--line)}
.tiers{
  max-width:var(--maxw);margin:2rem auto 0;padding:0 clamp(1rem,4vw,2.5rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;align-items:stretch;
}
.tier{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.3rem 1.3rem;box-shadow:var(--shadow-sm);
}
.tier-featured{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),var(--shadow-md)}
.tier-flag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;white-space:nowrap;
}
.tier h3{font-size:1.2rem;margin-bottom:.5rem}
.tier-price{font-family:Fraunces,Georgia,serif;font-size:2.3rem;color:var(--deep);line-height:1}
.tier-price span{font-family:Inter,sans-serif;font-size:11px;color:var(--ink-3);
  letter-spacing:.12em;text-transform:uppercase;margin-left:.4rem}
.tier-tag{font-size:13.5px;color:var(--ink-2);margin:.6rem 0 1rem;line-height:1.5}
.tier-feats{list-style:none;margin:0 0 1.3rem;padding:0;flex:1}
.tier-feats li{
  font-size:13.5px;color:var(--ink-2);line-height:1.5;padding:.32rem 0 .32rem 1.35rem;
  position:relative;
}
.tier-feats li::before{
  content:"";position:absolute;left:0;top:.72rem;width:7px;height:7px;border-radius:50%;
  background:var(--muted);
}
.tier-featured .tier-feats li::before{background:var(--accent)}
.tiers-note{
  max-width:var(--maxw);margin:1.1rem auto 0;padding:0 clamp(1rem,4vw,2.5rem);
  font-size:12px;color:var(--ink-3);text-align:center;
}
/* Same treatment as the placeholder wordmark: impossible to ship by accident. */
.tiers-note-warn{color:#8a6d1f;font-weight:600}

.ctl-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.ctl-fine{font-size:11.5px;color:var(--ink-3);margin-top:.7rem;line-height:1.5;text-align:center}

@media (max-width:900px){
  .tiers{grid-template-columns:1fr;max-width:520px}
  .tier-featured{order:-1}
}

/* ── legal page ── */
.legal{max-width:720px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 4rem}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem);margin:.5rem 0 .3rem}
.legal h2{font-size:1.15rem;margin:2rem 0 .6rem}
.legal p,.legal li{font-size:15px;color:var(--ink-2);line-height:1.65}
.legal p{margin-bottom:.8rem}
.legal ul{margin:0 0 1rem 1.15rem}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--deep);font-weight:600}
.legal-updated{font-size:12px;color:var(--ink-3);margin-bottom:1.4rem}
.legal .lede{margin-bottom:1.6rem}

/* ── consent ── */
.f-consent{
  display:flex;gap:.6rem;align-items:flex-start;margin:.2rem 0 1rem;
  text-transform:none;letter-spacing:normal;font-weight:400;
}
.f-consent input{width:17px;height:17px;margin-top:1px;flex:0 0 auto;accent-color:var(--accent)}
.f-consent span{font-size:12.5px;color:var(--ink-2);line-height:1.5}
.f-consent a{color:var(--deep);font-weight:600}
.foot-links{margin-bottom:.35rem}
.foot-links a{font-size:12.5px;color:var(--ink-2);text-decoration:underline}

/* ── multi-page furniture ──────────────────────────────────────────────
   The site is three pages (Home / How it works / Design tool) rather than one long
   scroll, so each needs its own closing move instead of the next section arriving. */
.head-nav a[aria-current="page"]{color:var(--deep);font-weight:600}

.teaser{padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--white);border-top:1px solid var(--line)}
.looks-teaser{margin-bottom:1.8rem}
.teaser-cta{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem);text-align:center}

.endcta{background:var(--deep);color:#fff;padding:clamp(2.6rem,6vw,4rem) clamp(1rem,4vw,2.5rem)}
.endcta-in{max-width:640px;margin:0 auto;text-align:center}
.endcta h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.6rem}
.endcta p{color:#D8CCBE;font-size:16px;margin-bottom:1.5rem}

.how-note{
  max-width:var(--maxw);margin:2.4rem auto 0;padding:0 clamp(1rem,4vw,2.5rem);
}
.how-note h3{font-size:1.05rem;margin-bottom:.5rem}
.how-note p{font-size:14.5px;color:var(--ink-2);max-width:70ch;line-height:1.65}

.foot-nav{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end;margin-bottom:.5rem}
.foot-nav a{font-size:12.5px;color:var(--ink-2);text-decoration:none}
.foot-nav a:hover{color:var(--deep);text-decoration:underline}

@media (max-width:620px){
  .foot-nav{justify-content:flex-start}
}

/* ── support ── */
.support{max-width:820px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) 0 4rem}
.support .section-head{padding:0 clamp(1rem,4vw,2.5rem)}
.support-contact{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin:1.8rem clamp(1rem,4vw,2.5rem) 2.2rem;padding:1.1rem 1.2rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.sc-label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.sc-value{font-size:14.5px;color:var(--ink);margin-top:.25rem}
.sc-value a{color:var(--accent);font-weight:600;text-decoration:none}
.sc-value a:hover{text-decoration:underline}

.faq{padding:0 clamp(1rem,4vw,2.5rem)}
.faq details{border-bottom:1px solid var(--line);padding:.2rem 0}
.faq summary{
  cursor:pointer;list-style:none;padding:.95rem 2rem .95rem 0;position:relative;
  font-family:Fraunces,Georgia,serif;font-size:1.05rem;color:var(--deep);
}
.faq summary::-webkit-details-marker{display:none}
/* A rotating chevron beats a plus/minus: it reads as "there is more below" even before
   you notice it's interactive. */
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.35rem;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--accent)}
.faq details p{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin:0 0 .9rem;max-width:72ch}
.faq details code{
  font-family:"SF Mono",Menlo,monospace;font-size:12.5px;background:var(--paper-2);
  padding:1px 5px;border-radius:4px;color:var(--deep);
  /* Design codes are one long unbroken token with no natural break points. */
  overflow-wrap:anywhere;word-break:break-word;
}
.faq details a{color:var(--accent);font-weight:600}

@media (max-width:620px){
  .support-contact{grid-template-columns:1fr;gap:.9rem}
}

/* ── material filters ──────────────────────────────────────────────────
   The catalogue is now large enough that a rail alone is a wall of squares. One filter
   bar governs every rail rather than one per category: a customer picking a palette
   thinks "show me the blues", not "show me blue floors, now blue walls". */
.ctl-filters{padding:.2rem 0 1rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.filter-row{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:.5rem}
.filter-label{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  flex:0 0 44px;padding-top:.42rem;
}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;flex:1}
.chip{
  font:inherit;font-size:11.5px;line-height:1;padding:.36rem .6rem;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;
  transition:.14s;text-transform:capitalize;
}
.chip:hover{border-color:var(--muted);color:var(--deep)}
.chip[aria-pressed="true"]{
  background:var(--deep);border-color:var(--deep);color:#fff;
}
.filter-count{font-size:11px;color:var(--ink-3);margin-top:.15rem}
.filter-count.is-empty{color:var(--accent);font-weight:600}

/* ── payment: post-submit prompt, and the Stripe return page ──
   The pay button appears inside the form's success box, after the lead and photo are
   already stored. Accent is spent here on purpose: it is the primary action. */
.f-ok-pay{margin:.85rem 0 .55rem}
.f-ok p{margin:0}
.f-ok-fine{font-size:11.5px;line-height:1.5;color:#4a6b50;margin-top:.5rem !important}

.thanks{background:var(--paper);border-top:1px solid var(--line);min-height:62vh}
.thanks-inner{max-width:720px;margin:0 auto;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem)}
.thanks-inner h1{font-family:Fraunces,Georgia,serif;font-weight:600;color:var(--deep);
  font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.1;margin:.35rem 0 .7rem}
.thanks-inner .lede{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:52ch}

.thanks-steps{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.1rem}
.thanks-steps li{display:flex;gap:1rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;
  box-shadow:var(--shadow-sm)}
.ts-n{flex:0 0 28px;height:28px;border-radius:50%;background:var(--paper-2);
  color:var(--ink-2);display:grid;place-items:center;font-size:13px;font-weight:600}
.thanks-steps h3{font-size:15px;font-weight:600;color:var(--deep);margin:.15rem 0 .25rem}
.thanks-steps p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}

.thanks-code{margin-top:1.6rem;padding:1.1rem 1.2rem;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius)}
.tc-label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0}
.tc-value{margin:.3rem 0 0}
.tc-value code{font-size:14px;color:var(--deep);word-break:break-all}
.tc-fine{font-size:12px;color:var(--ink-3);margin:.45rem 0 0}

.thanks-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}