/* bathroom.mt — charters livery on turnkey machinery.
   ⚠️ BRASS IS FOR INTERACTION AND VERIFICATION ONLY. Never body text, never large fills.
   That restraint is the design. Spend it everywhere and it reads like every other directory.
   ⚠️ Instrument Serif has NO bold. Never synthesise it — size and colour carry emphasis. */
:root{
  --navy:#181A39; --navy-deep:#0E1026; --navy-mid:#2A2E55;
  --brass:#B4914E; --brass-hot:#9A7A3C;
  --sky:#00A9E0;
  --white:#fff; --off:#F6F6F8;
  --rule:rgba(24,26,57,.13); --rule-dark:rgba(255,255,255,.16);
  --muted:rgba(24,26,57,.62); --muted-dark:rgba(255,255,255,.72);
  --display:"Instrument Serif",Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--body);color:var(--navy);background:var(--white);
     font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.01em;margin:0}
em{font-style:italic}
a{color:inherit}

/* topbar */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;
     padding:20px 28px;background:var(--navy);color:var(--white)}
.brand{font-family:var(--display);font-size:25px;text-decoration:none;letter-spacing:-.02em}
.brand .dot{color:var(--brass)}
.top nav{display:flex;align-items:center;gap:26px;font-size:14px}
.top nav a{text-decoration:none;color:var(--muted-dark)}
.top nav a:hover{color:var(--white)}
.top nav .cta{color:var(--navy);background:var(--brass);padding:9px 17px;border-radius:2px}
.top nav .cta:hover{background:var(--brass-hot);color:var(--navy)}

/* hero */
.hero{background:var(--navy-deep);color:var(--white);padding:84px 0 76px}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--brass);margin:0 0 20px}
.hero h1{font-size:clamp(38px,5.4vw,60px);line-height:1.08;margin:0 0 22px}
.hero h1 em{color:var(--brass)}
.lede{max-width:60ch;color:var(--muted-dark);font-size:17px;margin:0 0 32px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;padding:13px 26px;border-radius:2px;
     background:var(--brass);color:var(--navy);font-size:15px;font-weight:600}
.btn:hover{background:var(--brass-hot)}
.btn.ghost{background:transparent;color:var(--white);border:1px solid var(--rule-dark);font-weight:500}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass);background:transparent}

/* strip */
.strip{background:var(--navy-mid);color:var(--white)}
.strip .wrap{display:flex;gap:56px;flex-wrap:wrap;padding-top:24px;padding-bottom:24px}
.strip b{font-family:var(--display);font-size:30px;display:block;line-height:1.1}
.strip span{font-size:13px;color:var(--muted-dark)}

/* listings */
.list{padding:72px 0 20px}
.list h2,.how h2{font-size:33px;margin-bottom:10px}
.sub{color:var(--muted);max-width:66ch;margin:0 0 34px}
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
      grid-template-columns:repeat(auto-fill,minmax(316px,1fr))}
.co{background:var(--white);padding:22px 24px;display:flex;flex-direction:column;gap:11px}
.co-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.co h3{font-size:21px}
.loc{font-size:12px;color:var(--muted);white-space:nowrap}
.co-m{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.k{color:var(--navy)}
.dim{color:var(--muted)}
.co-f{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px;
      border-top:1px solid var(--rule);padding-top:11px;margin-top:auto}
.ext{color:var(--brass);text-decoration:none;font-weight:600}
.ext:hover{color:var(--brass-hot);text-decoration:underline}
.xlink{color:var(--sky);text-decoration:none;font-weight:600}
.xlink:hover{text-decoration:underline}
/* ⚠️ 'unverified' is deliberately quiet, not a warning. The point is the CONTRAST that
   makes verification worth paying for — not shaming a business that has not joined. */
.unv{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
     color:var(--muted);border:1px solid var(--rule);padding:3px 8px;border-radius:2px}

/* how */
.how{padding:66px 0 78px;background:var(--off);margin-top:60px}
.how ol{max-width:70ch;padding-left:20px;margin:22px 0 0}
.how li{margin-bottom:13px}
.how li b{font-weight:600}
/* ⚠️ Turnkey is promoted HERE, in prose, on a contextually relevant page — never as a
   banner interspersed with listings. A repeating block across six estate properties is a
   cross-portfolio footprint and reads as a link network. */
.tk{margin-top:30px;padding-top:22px;border-top:1px solid var(--rule);
    color:var(--muted);max-width:70ch}
.tk a{color:var(--brass);font-weight:600}

.foot{background:var(--navy);color:var(--muted-dark);padding:38px 0;font-size:14px}
.foot a{color:var(--white)}
.fine{font-size:12.5px;color:rgba(255,255,255,.5);margin-bottom:0}
@media(max-width:640px){
  .top{flex-direction:column;align-items:flex-start;gap:14px}
  .strip .wrap{gap:30px}
  .hero{padding:60px 0 54px}
}

/* ⚠️ THE LEDE CARD — CHARTERS SPEC §3.4/§3.5, LIFTED EXACTLY. Four passes were spent
   here reinventing a solved problem: scrim, then masthead block, then gradient-and-shadow.
   The house answer is none of those.

     "No scrim, no gradient, no filter on the photograph. Legibility is bought by the
      lede card sitting over the base of the frame, not by darkening someone's boat."

   The photograph is untouched — which on this page is the entire point, because the
   book-matched veining is what the image is for. The type never goes near it: a WHITE card
   overlaps the base of the frame and carries the eyebrow, H1 and buttons. The H1 lives in
   the card, so the indexable heading is real text on a solid ground, not text over a photo.
   ⚠️ Type in the card is NAVY on white — not white on dark. Do not "fix" it back. */
.hero.has-img{padding:0;background:none}
/* ⚠️ THE HERO BOX IS THE IMAGE'S OWN RATIO, NOT 16/9. The first hero was 16/9 over a
   2200x1228 frame whose right-hand third held a marble basin — object-fit:cover then sliced
   it, so the page showed an amputated block with two taps floating above it and no bowl.
   Neil: "cant see the sink". The photograph was cropped to remove the broken object.
   ⚠️ AND EVERY SLIDE MUST BE THE SAME SHAPE. The box is 16:9 and all slides are
   generated 16:9, because object-fit:cover crops each slide to the box independently —
   mixed ratios make the images visibly jump as they crossfade. Save at 1900x1069.
   If you change this ratio, re-cut every slide to match and LOOK at the result. */
.hero-img{margin:0;display:block;position:relative;aspect-ratio:16/9;overflow:hidden}
/* ⚠️ Crossfade, 1100ms — charters §3.4. Slides stack; only .on is visible. */
.hero-img .sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:60% 50%;display:block;opacity:0;transition:opacity 1100ms ease}
.hero-img .sl.on{opacity:1}
/* ⚠️ Progress bars, not dots — 34x3px, white 45% to white 100% active. The photo beneath
   is uncontrolled, so a white bar on pale marble needs the shadow or it vanishes. */
.bars{position:absolute;right:28px;bottom:28px;z-index:4;display:flex;gap:10px}
.bar{appearance:none;background:none;border:0;padding:12px 0;cursor:pointer;
  display:grid;place-items:center}
.bar::before{content:"";display:block;width:34px;height:3px;
  background:rgba(255,255,255,.45);box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:background-color .2s ease}
.bar.barOn::before{background:#fff}
@media(max-width:700px){.bars{right:16px;bottom:auto;top:16px}}
@media(prefers-reduced-motion:reduce){.hero-img .sl{transition:none}}
.lede-card{position:relative;z-index:5;background:var(--white);
  margin-top:clamp(-72px,-6vw,-44px);
  padding:clamp(30px,4vw,48px);
  box-shadow:0 30px 70px -34px rgba(14,16,38,.5);
  border-top:3px solid var(--brass)}
.lede-card h1{color:var(--navy);margin:0 0 18px}
.lede-card h1 em{color:var(--brass)}
.lede-card .eyebrow{margin-bottom:16px}
.lede-card .lede{color:var(--muted);font-size:19px;max-width:44ch;margin:0 0 28px}
.lede-card .btn.ghost{color:var(--navy);border-color:var(--rule)}
.lede-card .btn.ghost:hover{border-color:var(--brass);color:var(--brass)}
@media(max-width:700px){
  .hero-img{aspect-ratio:3/4}
  .hero-img .sl{object-position:64% 50%}
  .lede-card{margin-top:-40px}
}

/* ── brand names on the card, and the index ─────────────────────────────────
   ⚠️ THIS IS THE CONTENT, NOT A DECORATION. Every other Malta showroom site knows only
   its own brands; this is the only place the answer to "who stocks X" exists. It is set
   small and quiet on purpose — dense reference type, not a feature block. Do not make
   it shout, and do not truncate it to tidy the cards up: the length IS the value. */
.brands{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.brands a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.brands a:hover{color:var(--navy);border-bottom-color:var(--brass)}
/* ⚠️ Quiet, like .unv — a category tag, never a badge. Brass here would spend the accent
   on 8 of 27 cards and the verification tier would stop reading as special. */
.cat{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--rule);padding:2px 7px;border-radius:2px}

.idx{padding:66px 0 20px;border-top:1px solid var(--rule)}
.idx h2{font-size:33px;margin-bottom:10px}
.idx-list{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));margin-top:30px}
.bi{background:var(--white);padding:13px 18px;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 10px}
.bi b{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:-.01em}
.bi i{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
/* the showroom that carries it — the payload of the row, so it gets the full-strength ink */
.bi span{width:100%;font-size:13px;color:var(--navy)}
.bi:target{background:var(--off);box-shadow:inset 3px 0 0 var(--brass)}



/* ── calculators ────────────────────────────────────────────────────────────
   ⚠️ The OUTPUT is the only place a large figure appears, and it is the one thing on the
   page allowed to be big. Everything around it stays quiet — a calculator that shouts at
   every level reads like a lead-capture funnel, which is the opposite of the positioning. */
.calc{padding:66px 0 78px;background:var(--off);border-top:1px solid var(--rule)}
.calc h2{font-size:33px;margin-bottom:10px}
.calc-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.cbox{background:var(--white);border:1px solid var(--rule);padding:26px 26px 22px;
  display:flex;flex-direction:column;gap:14px;border-top:3px solid var(--brass)}
.cbox h3{font-size:23px}
.cnote{margin:0;font-size:13.5px;color:var(--muted)}
.cbox label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.cbox select,.cbox input[type=number]{width:100%;margin-top:6px;padding:11px 12px;
  font:inherit;font-size:15px;color:var(--navy);background:var(--white);
  border:1px solid var(--rule);border-radius:2px;text-transform:none;letter-spacing:0}
.cbox .row{display:flex;align-items:center;gap:10px}
.cbox .unit{margin-top:6px;font-size:13px;color:var(--muted);text-transform:none;
  letter-spacing:0;white-space:nowrap}
.cbox .chk{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;
  font-size:14px;color:var(--navy)}
.cbox .chk input{width:auto;margin:0}
/* ⚠️ tabular-nums: the figure changes as you drag the number field, and proportional
   digits make it jitter sideways on every keystroke. */
.cout{display:block;margin-top:6px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--display);font-size:clamp(30px,4vw,40px);line-height:1.1;
  color:var(--navy);font-variant-numeric:tabular-nums}
.cfine{margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── showroom profile ───────────────────────────────────────────────────────
   ⚠️ Only 4 of 27 showrooms have a page, by design (build_profiles.py). The tile links
   through only for those — a link to a page that does not exist is worse than no link. */
.co-link h3 a{text-decoration:none;border-bottom:1px solid var(--rule)}
.co-link:hover h3 a{border-bottom-color:var(--brass);color:var(--brass)}
.crumb{border-bottom:1px solid var(--rule);font-size:13px;color:var(--muted);padding:14px 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brass)}
.phead{padding:44px 0 34px}
.phead .wrap{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.mk-big{width:170px;height:86px}
.mk-l.mk-big{width:86px;font-size:40px}
.phead-t{flex:1 1 300px}
.phead h1{font-size:clamp(34px,4.6vw,46px);margin-bottom:8px}
.pmeta{margin:0 0 14px;color:var(--muted);font-size:14px}
.pwrap{padding-bottom:70px}
.pblock{padding:34px 0;border-top:1px solid var(--rule)}
.pblock h2{font-size:27px;margin-bottom:10px}
.pcats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.bi .alsoat{color:var(--muted)}
.bi .alsoat a{color:var(--sky);text-decoration:none}
.bi .alsoat a:hover{text-decoration:underline}
/* ⚠️ 'claimed & verified — example' is BRASS because verification is the thing being sold,
   and this is the only place on the site brass is used as a fill. Keep it rare. */
.ver{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);background:var(--brass);padding:3px 9px;border-radius:2px}
/* ⚠️ The sample-review banner. It must stay loud enough to read as a label, never fade
   into the design — it is the thing that keeps demo content from becoming a false claim. */
.demoflag{background:#FFF6E0;border-left:3px solid var(--brass);padding:12px 16px;
  font-size:13.5px;color:var(--navy);margin:0 0 20px}
.rv{margin:0 0 16px;padding:16px 20px;background:var(--off);border:1px solid var(--rule)}
.rv p{margin:0 0 8px}
.rv cite{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.shots{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-bottom:14px}
.shot{aspect-ratio:4/3;border:1px dashed var(--rule);display:grid;place-items:center;
  background:var(--off);color:var(--muted);font-size:13px}
.ask input{width:100%;padding:14px 16px;font:inherit;font-size:16px;
  border:1px solid var(--rule);border-radius:2px;background:var(--white)}
.ans{display:block;min-height:1.5em;margin-top:16px;font-size:17px;line-height:1.6;
  color:var(--navy)}
.ans:not(:empty){padding:16px 20px;background:var(--off);border-left:3px solid var(--sky)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cta-block .btn{margin-right:10px}

/* ── the assistant panel ────────────────────────────────────────────────────
   ⚠️ NAVY SECTION, and it is the only dark band above the fold apart from the topbar.
   That is deliberate: it separates "ask us" from "work it out yourself" without a rule or
   a heading shout, and it is where the sky-blue accent earns its place. */
.ax{background:var(--navy-deep);color:var(--white);padding:64px 0}
.ax h2{font-size:clamp(30px,4vw,42px);line-height:1.12;margin-bottom:16px}
.ax h2 em{color:var(--brass)}
.ax .sub{color:var(--muted-dark);margin-bottom:28px}
.ax-panel{background:rgba(255,255,255,.05);border:1px solid var(--rule-dark);
  border-radius:3px;padding:20px}
/* ⚠️ max-height + scroll: the log must not push the calculator off the screen as it fills.
   The calculator below is the thing most visitors actually came for. */
.ax-log{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
  margin-bottom:14px}
.ax-msg{padding:13px 17px;border-radius:3px;font-size:15px;line-height:1.6;max-width:46em}
.ax-ai{background:rgba(255,255,255,.07);border-left:3px solid var(--sky)}
.ax-me{background:var(--brass);color:var(--navy);align-self:flex-end;font-weight:500}
.ax-msg .dim{color:var(--muted-dark)}
.ax-files{font-size:13px;color:var(--sky);margin-bottom:10px;min-height:0}
.ax-form{display:flex;gap:10px;align-items:center}
.ax-clip{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--muted-dark);border:1px solid var(--rule-dark);
  border-radius:3px}
.ax-clip:hover{color:var(--sky);border-color:var(--sky)}
.ax-clip svg{width:20px;height:20px}
.ax-form input[type=text]{flex:1 1 auto;padding:13px 15px;font:inherit;font-size:15px;
  color:var(--white);background:rgba(255,255,255,.06);border:1px solid var(--rule-dark);
  border-radius:3px}
.ax-form input[type=text]::placeholder{color:rgba(255,255,255,.45)}
.ax-btn{flex:0 0 auto;padding:13px 24px}
.ax-disclaimer{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.55);max-width:78ch}
.ax-disclaimer a{color:var(--muted-dark)}
@media(max-width:640px){.ax-form{flex-wrap:wrap}.ax-form input[type=text]{order:3;width:100%}}



/* ⚠️ Profile hero. The CAPTION IS PART OF THE COMPONENT — it is what keeps generated
   imagery on a named business's page from reading as a photograph of that business. It is
   quiet but it is always present and always legible. Never hide it, never fade it out on
   scroll, never move it over the image where a screenshot could crop it off. */
.phero{margin:0;display:block}
.phero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.phero figcaption{padding:9px 28px;font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  background:var(--off);border-bottom:1px solid var(--rule)}

/* ⚠️ REWRITTEN — THE FIRST VERSION BROKE ON SVG. It sized marks with max-width/max-height
   plus width:auto/height:auto. A raster image has intrinsic dimensions so that works; an
   SVG with no width/height attributes has NONE, so `auto` resolves to its own default size
   and max-* never bites. Result: Fioranese, Gattoni, Meir, Qua and Rak burst out of the box
   and collided with the brand name underneath. Of 54 brand marks, 20 are SVG.
   THE BULLETPROOF PATTERN, and the only one to use here: a FIXED box, then width:100% AND
   height:100% AND object-fit:contain on the image. Both dimensions resolved, aspect
   preserved, letterboxed inside the box, nothing can escape it. */
.mk{flex:0 0 auto;width:88px;height:44px;overflow:hidden;border-radius:2px;
  display:flex;align-items:center;justify-content:center}
.mk img{width:100%;height:100%;object-fit:contain;display:block}
.mk.onDark{background:var(--navy);padding:5px}
.mk-l{width:44px;font-family:var(--display);font-size:22px;color:var(--muted);
  border:1px solid var(--rule);background:var(--off)}
.mk-big{width:170px;height:86px}
.mk-l.mk-big{width:86px;font-size:40px}

/* ⚠️ The brand mark sits on its OWN LINE above the name, not inline beside it. Inline, a
   wide wordmark and a serif brand name fight for the same baseline and the row height
   jumps between cards. On its own line every row is the same height whether the brand has
   a mark or not — and 20 of 74 do not. */
.bi{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.bi b,.bi i,.bi span{width:auto}
.bmk{flex:0 0 auto;width:104px;height:30px;margin-bottom:4px;overflow:hidden;
  display:flex;align-items:center;justify-content:flex-start}
.bmk img{width:100%;height:100%;object-fit:contain;object-position:left center;display:block}
.bmk.onDark{background:var(--navy);padding:3px 6px;border-radius:2px}
.bi span{width:100%}

/* the showroom under a brand is the payload of the row — make it read as a destination */
.bi span a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--rule)}
.bi span a:hover{color:var(--brass);border-bottom-color:var(--brass)}

/* ⚠️ RESTORED — dropped by accident when the logo CSS was rewritten, and the whole card
   header fell apart: .co-h is space-between, so without h3 growing, the name was shoved
   against the right edge with a canyon of white between it and the mark. The name must
   grow; only the locality is pushed right. */
.co-h{display:flex;align-items:center;justify-content:flex-start;gap:10px 14px;flex-wrap:wrap}
.co h3{flex:1 1 auto;font-size:21px;min-width:0}
/* Sicilian addresses are long ("S.S. 114 Km 6,400, 98128 Tremestieri, Messina (ME)"); on one
   line they crushed the name to a word per line and ran out of the card. The address takes
   its own line under the name and wraps. */
.co-h .loc{flex:1 0 100%;margin-left:0;white-space:normal;line-height:1.35}

/* ⚠️ Two destinations in one row and they must LOOK different, or the row is a guessing
   game: the brand (out to the maker) is navy with a dotted underline, the showroom (in, to
   the Malta stockist) is the solid-underline style above. Same row, two journeys. */
a.blink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rule)}
a.blink:hover{color:var(--brass);border-bottom-color:var(--brass)}
.bmk a.blink,a.blink .bmk{border-bottom:0}
.bi > a.blink{display:block;line-height:0;border-bottom:0}

/* ── get a quote ────────────────────────────────────────────────────────────
   Sits directly after the calculator on the same off-white ground, so "work out a budget"
   and "now send it" read as one movement. ⚠️ The consent line is the ONE thing here that
   must never be pre-ticked, hidden, or styled down: a plan is personal data. */
.quote{padding:66px 0 78px;background:var(--off)}
.quote h2{font-size:clamp(30px,4vw,42px);line-height:1.12;margin-bottom:16px}
.quote h2 em{color:var(--brass)}
.quote .eyebrow{margin-bottom:12px}
.qform{background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--brass);
  padding:30px;display:flex;flex-direction:column;gap:20px;max-width:860px}
.qgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.qform label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
.qform input:not([type=checkbox]),.qform select,.qform textarea{width:100%;margin-top:6px;
  padding:11px 12px;font:inherit;font-size:15px;color:var(--navy);background:var(--white);
  border:1px solid var(--rule);border-radius:2px;text-transform:none;letter-spacing:0}
.qform textarea{resize:vertical}
.qform .row{display:flex;align-items:center;gap:10px}
.qform .unit{margin-top:6px;font-size:13px;text-transform:none;letter-spacing:0}
.qform .chk{display:flex;align-items:flex-start;gap:10px;text-transform:none;letter-spacing:0;
  font-size:14px;color:var(--navy);line-height:1.5}
.qform .chk input{width:auto;margin:3px 0 0}
.qform .chk .dim{color:var(--muted)}
.qsend{border:1px solid var(--rule);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.qsend legend{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.consent{padding:14px 16px;background:var(--off);border-left:3px solid var(--brass)}
.qdrop{display:flex;flex-direction:column;gap:4px;padding:22px;border:1px dashed var(--rule);
  background:var(--off);cursor:pointer;text-transform:none;letter-spacing:0}
.qdrop:hover{border-color:var(--brass)}
.qdrop input{position:absolute;width:1px;height:1px;opacity:0}
.qdrop b{font-size:15px;color:var(--navy)}
.qdrop span{font-size:13px;color:var(--muted)}
.qfiles .ax-files{color:var(--navy);margin-top:8px;font-size:13px}
.chip{display:inline-block;padding:4px 10px;margin:0 6px 6px 0;border:1px solid var(--rule);
  border-radius:2px;background:var(--white)}
.qactions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0}

/* ── the mood board ─────────────────────────────────────────────────────────
   A grid, not a one-at-a-time swipe: on desktop a grid finishes in a minute, and on a phone
   it is a scroll with taps, which is the same gesture. ⚠️ The LIKED state is the ONE place
   brass is used as a frame on this page — a thin ring plus a small mark. Restraint again:
   if every tile had a chrome, the liked ones would not read. */
.bhead{padding:44px 0 20px}
.bhead h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin-bottom:14px}
.bhead h1 em{color:var(--brass)}
.bbar{position:sticky;top:0;z-index:20;background:var(--white);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.bbar .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.bbar #bcount{font-size:14px;color:var(--muted);flex:1 1 auto;font-variant-numeric:tabular-nums}
.bbar .btn:disabled{opacity:.45;cursor:not-allowed}
.board{padding:22px 0 40px}
.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tile{margin:0;position:relative;cursor:pointer;background:var(--off);border-radius:2px;
  overflow:hidden;outline-offset:3px}
.tile img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .35s ease}
.tile:hover img{transform:scale(1.02)}
.tile figcaption{padding:7px 10px;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.tile::after{content:"";position:absolute;inset:0;border:3px solid transparent;border-radius:2px;
  pointer-events:none;transition:border-color .2s}
.tile.on::after{border-color:var(--brass)}
.tile.on::before{content:"\2713";position:absolute;top:10px;right:10px;width:28px;height:28px;
  border-radius:50%;background:var(--brass);color:var(--navy);font-weight:700;display:grid;
  place-items:center;z-index:2}
.tile.on figcaption{color:var(--navy)}
.results{padding:54px 0 70px;background:var(--off);border-top:1px solid var(--rule)}
.results h2{font-size:33px;margin-bottom:10px}
.results .band{font-size:22px;margin:34px 0 4px}
.results .idx-list{margin-top:14px}
@media(prefers-reduced-motion:reduce){.tile img{transition:none}}

/* the gated result on the board, and the no-plan routes on the form */
.rgate{background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--brass);
  padding:26px 28px;margin-top:18px}
.rcount{font-family:var(--display);font-size:clamp(22px,3vw,30px);line-height:1.2;margin:0 0 12px}
.rcount b{color:var(--brass)}
.noplan{margin-top:12px;font-size:14px;color:var(--muted)}
.noplan summary{cursor:pointer;color:var(--navy)}
.noplan ol{padding-left:20px;margin:10px 0}
.noplan li{margin-bottom:8px}
.noplan a{color:var(--brass)}

/* ── the layout page ───────────────────────────────────────────────────────
   Three sketches side by side; each SVG is a scaled drawing so it must never be stretched —
   width auto, height auto, inside a card. The attach button is ghost, not brass: the
   sketch is an aid to the quote, the quote is the action. */
.lay{padding:10px 0 70px}
.lform{max-width:900px}
.lopts{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-top:22px}
.lopt{background:var(--white);border:1px solid var(--rule);padding:18px;display:flex;flex-direction:column;gap:10px}
.lopt h3{font-size:21px}
.lopt svg{max-width:100%;height:auto;display:block}

/* Sicily section: same grid as Malta, set apart by a brass rule and the off ground so it
   never reads as "more of the same list". */
.sicily{background:var(--off);border-top:3px solid var(--brass);margin-top:40px;padding-top:60px}

/* Sicilian stockists on a brand row: present, lighter, after the Malta ones */
.bi .sic{width:100%;font-size:12.5px;color:var(--muted)}
.bi .sic a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--rule)}
.bi .sic a:hover{color:var(--brass);border-bottom-color:var(--brass)}
.alsoat i{font-style:normal;color:var(--muted)}

/* ---- room drawing tool ---- */
.lquick .lbtn{display:flex;align-items:flex-end}
.lcanvas{margin:14px 0 10px;position:relative}
.lcanvas svg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--rule);touch-action:none;cursor:crosshair}
.lcanvas svg.placing{cursor:pointer}
.lhint{margin:6px 0 0;font-size:13px;color:var(--muted);min-height:1.2em}
.ltools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0}
.ltools .row{gap:6px}
.ltools input[type=number]{width:110px;padding:10px 12px;border:1px solid var(--rule);border-radius:2px;font:inherit}
.btn.ghost.dark{color:var(--navy);border-color:var(--rule);padding:10px 16px;font-size:14px}
.btn.ghost.dark:hover{border-color:var(--brass);color:var(--brass)}
.btn:disabled,.btn.ghost.dark:disabled{opacity:.4;cursor:not-allowed;border-color:var(--rule);color:var(--navy)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.seg button{background:transparent;border:0;border-right:1px solid var(--rule);padding:9px 14px;font:inherit;font-size:15px;color:var(--navy);cursor:pointer;min-width:44px}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--navy);color:var(--white)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.lwalls{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lwalls li{display:flex;align-items:center;gap:6px;border:1px solid var(--rule);padding:6px 8px;border-radius:2px;font-size:13px}
.lwalls li.empty{border:0;padding:0;color:var(--muted)}
.lwalls .arrow{font-size:16px;color:var(--brass);width:18px;text-align:center}
.lwalls input{width:84px;padding:6px 8px;border:1px solid var(--rule);border-radius:2px;font:inherit;font-size:14px}
.lwalls .unit{font-size:12px;color:var(--muted)}
.lplace{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end;margin:6px 0 4px}
.lplace input[type=range]{width:100%;margin:8px 0 0}
.lplace output{font-size:13px;color:var(--muted);white-space:nowrap;margin-top:6px}
.lplace .row{flex-wrap:wrap}
.lform + .lform{margin-top:18px}

.lsketch{margin:14px 0 6px;border:1px dashed var(--brass);padding:14px 16px;border-radius:2px;background:var(--off)}
.lfile{display:block;cursor:pointer;text-transform:none;letter-spacing:0;font-size:14px}
.lfile b{display:block;font-family:var(--display);font-size:20px;font-weight:400;margin-bottom:4px;color:var(--navy)}
.lfile span{display:block;color:var(--muted);font-size:13px;line-height:1.45;margin-bottom:10px;max-width:70ch}
.lfile input{font:inherit;font-size:14px}
.lwalls li.guess{border-color:var(--brass);background:#fbf6ea}

/* ---- estate furniture: home button, app pill, install sheet, footer logos ---- */
.fab-home{position:fixed;left:18px;bottom:18px;z-index:900;width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;background:var(--brass);color:var(--navy);
  text-decoration:none;box-shadow:0 12px 30px -8px rgba(180,145,78,.7);transition:transform .15s ease,background .2s}
.fab-home:hover{background:var(--brass-hot);transform:translateY(-2px);color:var(--navy)}
.fab-home svg{width:21px;height:21px}
@media(max-width:640px){.fab-home{left:12px;bottom:12px;width:44px;height:44px}.fab-home svg{width:19px;height:19px}}
.hero{position:relative}
.hero-actions{position:absolute;top:16px;right:max(28px,calc((100% - 1200px)/2 + 28px));z-index:6;display:flex;gap:9px}
.pill-app{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brass);color:var(--navy);
  border:none;border-radius:999px;padding:11px 19px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  text-decoration:none;box-shadow:0 10px 26px -10px rgba(0,0,0,.6);transition:background .2s,transform .15s}
.pill-app:hover{background:var(--brass-hot);transform:translateY(-1px)}
.pill-app svg{width:16px;height:16px}
@media(max-width:640px){.hero-actions{top:10px;right:12px}.pill-app{padding:9px 14px;font-size:13px}}
.appsheet{position:fixed;inset:0;z-index:1000;background:rgba(14,16,38,.72);display:none;align-items:center;justify-content:center;padding:20px}
.appsheet.on{display:flex}
.appsheet-in{background:var(--white);color:var(--navy);border-radius:6px;max-width:440px;width:100%;padding:24px 26px}
.appsheet h3{font-size:22px;margin:0 0 6px}
.appsheet p{font-size:14px;color:var(--muted);margin:0 0 14px}
.appsheet ol{font-size:14.5px;padding-left:20px;margin:0 0 8px;line-height:1.8}
.appsheet .close{margin-top:12px;width:100%;padding:11px;border-radius:2px;border:none;background:var(--navy);color:var(--white);font:inherit;cursor:pointer}
.foot-logos{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 14px}
.foot-logos span{font-size:13px;color:var(--muted-dark)}
.foot-logos img{height:16px;width:auto;display:block}
.foot-logos a{display:inline-block;opacity:.92}
.foot-logos a:hover{opacity:1}
@media(max-width:640px){.foot-logos img{height:13px}}

/* ---- mobile nav: the bar stays (brand + menu), the links drop down ---- */
.navtog{display:none;width:44px;height:44px;border:1px solid var(--rule-dark);border-radius:2px;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;margin-left:auto}
.navtog span{display:block;width:20px;height:2px;background:var(--white);transition:transform .2s,opacity .2s}
.navtog.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtog.open span:nth-child(2){opacity:0}
.navtog.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .top{position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px}
  .navtog{display:flex}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:950;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy);border-top:1px solid var(--rule-dark);box-shadow:0 18px 30px -12px rgba(0,0,0,.6)}
  .top nav.open{display:flex}
  .top nav a{padding:15px 28px;border-bottom:1px solid var(--rule-dark);color:var(--white);font-size:16px}
  .top nav .cta{margin:14px 28px 18px;text-align:center;border-radius:2px}
}

/* ---- three ways in + the coach line ---- */
.lways{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:12px 0 16px}
.lway{text-align:left;background:var(--white);border:1px solid var(--rule);border-radius:2px;padding:14px 16px;cursor:pointer;font:inherit;color:var(--navy)}
.lway b{display:block;font-family:var(--display);font-size:20px;font-weight:400;margin-bottom:4px}
.lway span{display:block;font-size:13px;color:var(--muted);line-height:1.45}
.lway.on{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass);background:#fbf8f1}
.lway:hover{border-color:var(--brass)}
.lsteps{margin:6px 0 12px;padding-left:22px;font-size:14.5px;line-height:1.6;max-width:72ch}
.lsteps li{margin-bottom:6px}
.lcoach{background:var(--navy);color:var(--white);padding:12px 16px;border-radius:2px;font-size:15px;line-height:1.45;margin:8px 0 0}
.lcoach:empty{display:none}
.lsk-ex{float:right;width:min(46%,360px);margin:0 0 10px 18px}
.lsk-ex img{width:100%;height:auto;border:1px solid var(--rule);display:block}
.lsk-ex span{display:block;font-size:12px;color:var(--muted);margin-top:4px;text-align:center}
.lsketch::after{content:"";display:block;clear:both}
.lfile .btn{display:inline-block;margin:6px 0 8px}
.lfile input{display:block;font-size:13px}
@media(max-width:640px){.lsk-ex{float:none;width:100%;margin:0 0 12px}}

/* ---- no horizontal overflow on phones. A native <input type=file> has an intrinsic width
   of ~380px and sat 82px in from the left of the quote form, so on a 375px phone the layout
   viewport grew to 457px and the whole page could be pinched smaller (healthcare and diner
   never overflow, so they never could). Every file input is now bounded, and the document is
   told never to scroll sideways so no future stray element can reopen this. ---- */
input[type=file]{max-width:100%;min-width:0;box-sizing:border-box}
/* the quote form's file input is visually hidden behind its dashed label; the generic
   .qform input{width:100%} rule was winning over its 1px width, and 100% of the form from
   82px in is what pushed the layout to 457px. Pinned here with higher specificity. */
.qform .qdrop input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
html,body{max-width:100%;overflow-x:hidden}
img,svg,video{max-width:100%}

/* ---- the board on the homepage, the floating quote bar and the quote drawer ---- */
.hboard{padding:34px 0 30px;background:var(--white)}
.hb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 28px;flex-wrap:wrap;margin-bottom:14px}
.hb-head h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1}
.hb-head .sub{max-width:60ch;margin:0}
.hb-head .sub a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass)}
.bcoach{position:sticky;top:12px;z-index:30;display:flex;align-items:center;gap:10px;width:fit-content;max-width:calc(100% - 24px);
  margin:0 auto 12px;background:var(--navy);color:var(--white);padding:10px 10px 10px 16px;border-radius:999px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.55);font-size:14px;line-height:1.35}
.bcoach button{background:transparent;border:0;color:var(--white);font-size:22px;line-height:1;cursor:pointer;padding:0 6px}
.bcoach[hidden]{display:none}
.qbar{position:fixed;right:18px;bottom:18px;z-index:900;display:inline-flex;align-items:center;gap:10px;background:var(--brass);color:var(--navy);
  border:0;border-radius:999px;padding:11px 18px 11px 11px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(180,145,78,.75);transition:transform .15s,background .2s}
.qbar b{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;background:var(--navy);color:var(--white);font-size:13px;padding:0 7px;font-variant-numeric:tabular-nums}
.qbar.live b{background:var(--white);color:var(--navy)}
.qbar:hover{background:var(--brass-hot);transform:translateY(-1px)}
.qscrim{position:fixed;inset:0;z-index:950;background:rgba(14,16,38,.55)}
.qdrawer{position:fixed;top:0;right:0;bottom:0;width:min(600px,100%);z-index:960;background:var(--off);overflow:auto;-webkit-overflow-scrolling:touch;
  box-shadow:-20px 0 50px -20px rgba(0,0,0,.5)}
.qdrawer[hidden],.qscrim[hidden]{display:none}
.qd-head{position:sticky;top:0;z-index:2;background:var(--navy);color:var(--white);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px}
.qd-head h2{font-size:24px;margin:0}
.qd-head .btn.ghost.dark{color:var(--white);border-color:var(--rule-dark);padding:8px 12px}
.qd-head .btn.ghost.dark:hover{color:var(--brass);border-color:var(--brass)}
.qd-body{padding:18px 22px 40px}
.qd-body .qform{padding:20px 18px 18px}
.qd-intro{font-size:15px;margin:0 0 14px}
.qd-intro a{color:var(--brass)}
.qd-brief{background:var(--white);border-left:3px solid var(--brass);padding:12px 14px;margin:0 0 14px}
.qd-brief .sub{margin:0 0 6px;font-size:15px}
.qd-brief .rcount{margin:0 0 6px;font-size:14px}
.qd-brief .band{font-size:17px;margin:14px 0 6px}
body.qopen{overflow:hidden}
@media(max-width:640px){
  .qbar{right:12px;bottom:12px;padding:9px 14px 9px 9px;font-size:13px}
  .qdrawer{width:100%}
  .qd-head{padding:12px 16px}.qd-body{padding:14px 16px 36px}
}
.bclear{font-size:13px;color:var(--muted);margin:0 0 10px}
.bclear button{background:transparent;border:0;padding:0;font:inherit;color:var(--brass);text-decoration:underline;cursor:pointer}

/* ---- the Journal (estate editorial standard) ---- */
.jr{padding:10px 0 70px}
.jr-wrap{max-width:760px}
.jr-crumbs{font-size:13px;color:var(--muted);margin:0 0 18px}
.jr-crumbs a{color:var(--muted);text-decoration:none}
.jr-crumbs a:hover{color:var(--brass)}
.jr h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin:6px 0 14px}
.jr-byline{font-size:13px;color:var(--muted);margin:0 0 22px}
.jr-byline strong{color:var(--navy);font-weight:600}
.jr-draft{background:#fbf6ea;border:1px solid var(--brass);padding:12px 16px;margin:0 0 18px;font-size:14px}
.jr-banner{margin:0 0 28px}
.jr-banner img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.jr-banner figcaption{font-size:12px;color:var(--muted);margin-top:6px;text-align:right}
.jr-body{font-size:17px;line-height:1.75;color:var(--navy)}
.jr-body h2{font-size:28px;margin:34px 0 12px}
.jr-body h3{font-size:20px;margin:26px 0 8px}
.jr-body p{margin:0 0 18px}
.jr-body ul,.jr-body ol{margin:0 0 18px 22px}
.jr-body li{margin-bottom:8px}
.jr-body a{color:var(--brass)}
.jr-table{overflow-x:auto;margin:0 0 22px}
.jr-body table{border-collapse:collapse;width:100%;min-width:460px;font-size:15px}
.jr-body th{text-align:left;padding:10px 12px;background:var(--off);border-bottom:2px solid var(--rule)}
.jr-body td{padding:10px 12px;border-bottom:1px solid var(--rule)}
.jr-faq,.jr-sources,.jr-gaps,.jr-related{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--rule)}
.jr-faq h2,.jr-sources h2,.jr-gaps h2,.jr-related h2{font-size:26px;margin:0 0 10px}
.jr-faq dt{font-weight:600;margin:18px 0 6px}
.jr-faq dd{margin:0;color:var(--muted);line-height:1.7}
.jr-sources ol,.jr-gaps ul{margin:0 0 0 20px;font-size:14px;color:var(--muted)}
.jr-sources li,.jr-gaps li{margin-bottom:9px}
.jr-sources a,.jr-related a{color:var(--brass)}
.jr-related ul{list-style:none;margin:0;padding:0}
.jr-related li{margin-bottom:8px}
.jr-provenance{margin-top:30px;padding:14px 18px;background:var(--off);font-size:13px;color:var(--muted)}
.jr-cta{margin:40px 0 0;padding:26px;background:var(--navy);color:var(--white)}
.jr-cta h3{font-size:24px;margin:0 0 6px}
.jr-cta p{margin:0 0 14px;color:var(--muted-dark)}
.jr-empty{background:var(--off);border-left:3px solid var(--brass);padding:16px 18px;margin:0 0 26px;font-size:15px}
.jr-empty a{color:var(--brass)}
.jr-cluster{margin:36px 0 0}
.jr-cluster h2{font-size:28px;margin:0 0 4px}
.jr-list{list-style:none;margin:14px 0 0;padding:0}
.jr-list li{margin-bottom:10px}
.jr-list a{display:block;padding:16px 18px;background:var(--white);border:1px solid var(--rule);text-decoration:none;color:var(--navy)}
.jr-list a:hover{border-color:var(--brass)}
.jr-t{display:block;font-family:var(--display);font-size:22px;margin-bottom:4px}
.jr-d{display:block;font-size:14px;color:var(--muted);line-height:1.6}
.jr-m{display:block;font-size:12px;color:var(--muted);margin-top:8px}
.jr-badge{display:inline-block;font-family:var(--body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--brass);color:var(--navy);padding:2px 7px;border-radius:2px;vertical-align:middle}
.l404{list-style:none;margin:16px 0 0;padding:0;font-size:16px;line-height:1.7}
.l404 a{color:var(--brass)}

/* ---- the private brief page ---- */
.brief{padding:10px 0 60px}
.brief h2{font-size:28px;margin:34px 0 10px}
.brief h3{font-size:20px;margin:22px 0 8px}
.navnote{color:var(--muted-dark);font-size:13px}
.bfacts{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0;font-size:15px}
.bfacts dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px;padding-top:3px}
.bfacts dd{margin:0}
.brief blockquote{margin:0;padding:14px 18px;background:var(--off);border-left:3px solid var(--brass);font-size:16px;line-height:1.6;white-space:pre-wrap}
.bquote{margin-top:34px;padding:22px 24px;background:var(--navy);color:var(--white)}
.bquote h2{margin:0 0 8px;font-size:26px}
.bquote a{color:var(--brass)}
.brief .tiles .tile{cursor:default}

/* tile teaser (bathroom.mt / kitchens.mt -> tile.mt) */
.tteaser{padding:48px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
.tt-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 22px}
.tt-tile{margin:0;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.04)}
.tt-tile img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.tt-tile figcaption{font-size:.72rem;opacity:.7;padding:6px 8px}
.tt-cta{text-align:center;margin:0 0 14px}
.tt-btn{font-size:1.15rem;padding:16px 34px;background:var(--brass);color:var(--navy);border-radius:999px;font-weight:600;box-shadow:0 14px 34px -10px rgba(180,145,78,.75)}
.tt-btn:hover{background:var(--brass-hot);color:var(--navy);transform:translateY(-2px)}
@media(max-width:900px){.tt-row{grid-template-columns:repeat(2,1fr)}}

/* tiles inside the bathroom/kitchen board */
.tiles-divider{grid-column:1/-1;padding:26px 0 8px}
.tiles-divider h3{margin:0 0 6px;font-size:1.5rem}
.tiles-divider p{margin:0;max-width:70ch;opacity:.85}
.tiles-more{grid-column:1/-1;text-align:center;margin:14px 0 0}

/* board kit: sticky skip/picks bar, reveal in batches, hero skip */
.bbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 16px;padding:8px 12px;background:var(--navy);color:var(--white);border-radius:10px}
.bbar a,.bbar button{font:inherit;font-size:.9rem;color:inherit;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 13px;text-decoration:none;cursor:pointer}
.bbar a:hover,.bbar button:hover{border-color:var(--brass)}
.bbar button[aria-pressed="true"]{background:var(--brass);color:var(--navy);border-color:var(--brass)}
.bbar button:disabled{opacity:.5;cursor:default}
.bbar b{display:inline-block;min-width:1.4em;text-align:center;background:var(--brass);color:var(--navy);border-radius:999px;padding:0 6px;margin-left:5px;font-weight:600}
.bbar button[aria-pressed="true"] b{background:var(--navy);color:var(--white)}
.bm-more{grid-column:1/-1;justify-self:center;font:inherit;font-size:.95rem;padding:12px 26px;border-radius:999px;border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer;margin:6px 0 10px}
.bm-more:hover{background:var(--navy);color:#fff}
.tile.bm-fold{display:none}
.hero-skip{flex-basis:100%;display:block;margin-top:8px;font-size:.92rem;color:inherit;opacity:.8;text-decoration:underline}

/* floating pills above Get quotes */
.qpills{position:fixed;right:18px;bottom:76px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.qpill{display:inline-flex;align-items:center;background:var(--navy);color:var(--white);border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 10px 26px -10px rgba(14,16,38,.7);transition:transform .15s,background .2s}
.qpill:hover{background:var(--brass);color:var(--navy);transform:translateY(-1px)}
.tiles-divider{scroll-margin-top:70px}
@media(max-width:640px){.qpills{right:12px;bottom:70px}.qpill{font-size:12px;padding:8px 13px}}

/* one column: same height, font and width for all three pills */
.qpills{bottom:18px;align-items:stretch}
.qpills .qbar{position:static;justify-content:center}
.qpill{justify-content:center;font-size:14px;padding:11px 18px;min-height:50px;box-sizing:border-box}
.qpills.past .qpill{display:none}
@media(max-width:640px){.qpills{bottom:12px}.qpill{font-size:14px;padding:11px 16px;min-height:48px}}

.qpills .qbar{min-height:50px;font-size:14px;box-sizing:border-box}
@media(max-width:640px){.qpills .qbar{min-height:48px}}

.xsite{font-size:.72em;opacity:.7;letter-spacing:.02em}