/* Content pages (showrooms, ranges, models, guides) — standalone documents with no .app
   shell, generated by build.mjs. Styled with the tokens from styles.css; buttons come from
   there, showroom details from showroom.css. No new colours. */

.mp-wrap{ max-width:1200px; margin:0 auto; padding:0 22px; }
.mp h2{ font-size:28px; line-height:1.15; }
.mp .eyebrow + h2{ margin-top:10px; }
.mp-lede{ margin:12px 0 0; max-width:68ch; font-size:15.5px; color:var(--body); }

/* header */
.mp-top{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:60px; padding:0 14px 0 22px; background:#fff; border-bottom:1px solid var(--line-2); }
.mp-brand{ display:flex; align-items:center; flex:none; }
.mp-brand img{ height:30px; width:auto; }
.mp-nav{ display:flex; align-items:center; gap:2px; }
.mp-nav a, .mp-nav summary{ padding:8px 9px; color:var(--ink); font-weight:600; font-size:14.5px; text-decoration:none;
  border-radius:6px; cursor:pointer; white-space:nowrap; }
.mp-nav a:hover, .mp-nav summary:hover{ background:var(--panel); }
.mp-nav-more{ position:relative; }
.mp-nav-more summary{ list-style:none; }
.mp-nav-more summary::-webkit-details-marker{ display:none; }
.mp-nav-more summary::after{ content:""; display:inline-block; width:6px; height:6px; margin:0 0 3px 7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.mp-nav-more div{ position:absolute; right:0; top:calc(100% + 6px); min-width:170px; padding:6px; background:#fff;
  border:1px solid var(--line-2); border-radius:10px; box-shadow:var(--shadow-sm); }
.mp-nav-more div a{ display:block; }

/* hero */
.mp-hero{ position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:46vh; padding:28px 0 26px; overflow:hidden; }
.mp-hero-bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.mp-hero-scrim{ position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,20,32,.5) 0%, rgba(11,20,32,.4) 40%, rgba(11,20,32,.74) 100%); }
/* bright showroom photos (ceiling lights, pale wood) sit behind the text: the scrim alone is not enough */
.mp-hero h1, .mp-hero-tag, .mp-crumbs{ text-shadow:0 1px 3px rgba(11,20,32,.7), 0 0 14px rgba(11,20,32,.45); }
.mp-hero .mp-wrap{ width:100%; }
.mp-hero h1{ color:#fff; font-weight:300; font-size:38px; line-height:1.08; }
.mp-hero-tag{ margin:10px 0 0; max-width:40ch; color:rgba(255,255,255,.92); font-family:var(--disp); font-weight:300; font-size:17px; line-height:1.35; }
.mp-crumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; font-family:var(--cond); font-weight:600; font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.88); }
.mp-crumbs a{ color:#fff; text-decoration:none; }
.mp-crumbs a:hover{ text-decoration:underline; }
/* pages with no photo yet: a plain navy band instead of a photo hero */
.mp-hero--plain{ min-height:0; padding:44px 0 34px; background:var(--navy); }

/* sections */
.mp-intro{ padding:38px 0 8px; }
.mp-intro p{ margin:0 0 16px; max-width:68ch; font-size:17px; line-height:1.6; color:var(--body); }
.mp-sec{ padding:44px 0 0; }
main > .mp-sec:last-child{ padding-bottom:52px; }
.mp-sec--rule .mp-wrap::before{ content:""; display:block; margin-bottom:40px; border-top:1px solid var(--line); }
.mp-sec--panel{ margin-top:48px; padding:48px 0; background:var(--panel); }
main > .mp-sec--panel:last-child{ padding-bottom:48px; }
.mp-split{ display:grid; gap:30px; }

/* prose (guides) */
.mp-prose > *{ max-width:72ch; }
.mp-prose p{ margin:14px 0 0; font-size:16.5px; line-height:1.65; color:var(--body); }
.mp-prose .mp-answer{ margin:0; font-size:19px; line-height:1.55; color:var(--ink); }
.mp-prose .mp-table, .mp-prose .mp-links{ max-width:none; }
.mp-faq{ border-bottom:1px solid var(--line); }
.mp-faq:first-of-type{ margin-top:18px; border-top:1px solid var(--line); }
.mp-faq summary{ padding:16px 0; font-family:var(--disp); font-weight:500; font-size:17px; color:var(--ink); cursor:pointer; }
.mp-faq p{ margin:0 0 18px; }

.mp-prose ul{ margin:14px 0 0; padding-left:20px; font-size:16.5px; line-height:1.65; color:var(--body); }
.mp-prose li{ margin-top:6px; }
.mp-prose li b, .mp-prose p b{ color:var(--ink); font-weight:500; }
.mp-prose p a, .mp-prose li a{ color:var(--blue-dk); }
.mp-sources{ font-size:14.5px !important; }
.mp-sources a{ overflow-wrap:anywhere; }

/* comparison pages (markdown bodies) */
.mp-compare h2{ margin-top:44px; }
.mp-compare h3{ margin-top:28px; font-size:20px; }
.mp-compare hr{ margin:40px 0 0; border:0; border-top:1px solid var(--line); max-width:none; }
.mp-compare > p:first-child em{ color:var(--muted); font-size:14.5px; }
.mp-compare strong{ color:var(--ink); font-weight:500; }
.mp-compare .mp-table-scroll{ max-width:none; }
.mp-compare .mp-table{ min-width:640px; }
.mp-compare .mp-note{ margin-top:28px; max-width:none; }

/* numbered steps (process and site-preparation pages) */
.mp-steps{ list-style:none; margin:0; padding:0; }
.mp-steps > li{ display:grid; gap:6px; padding:30px 0; border-top:1px solid var(--line); }
.mp-steps > li:last-child{ border-bottom:1px solid var(--line); }
.mp-steps > li > div{ min-width:0; }
.mp-step-n{ font-family:var(--disp); font-weight:300; font-size:34px; line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; }
.mp-foot-gap{ height:18px; }

/* tables */
.mp-table{ width:100%; margin-top:18px; border-collapse:collapse; font-size:14.5px; }
.mp-table caption{ padding-bottom:10px; text-align:left; font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); }
.mp-table th, .mp-table td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.mp-table thead th{ font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--body);
  border-bottom-color:var(--ink); }
.mp-table tbody th{ font-weight:500; color:var(--ink); }
.mp-table-scroll tbody th, .mp-specs tbody th{ white-space:nowrap; }
.mp-table td{ color:var(--body); }
.mp-table a{ color:var(--blue-dk); }
.mp-specs{ margin-top:0; align-self:start; }
.mp-table-scroll{ overflow-x:auto; }

/* link chips */
.mp-links{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; }
.mp-links a{ display:block; padding:9px 15px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); text-decoration:none;
  font-family:var(--disp); font-weight:500; font-size:15px; }
.mp-links a:hover{ border-color:var(--blue); }

/* model cards (range pages) */
.mp-cards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:26px 16px; margin-top:26px; }
.mp-card{ display:block; color:var(--ink); text-decoration:none; }
.mp-card-img{ display:grid; place-items:center; aspect-ratio:1; overflow:hidden; border-radius:12px; background:var(--panel); }
.mp-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mp-card:hover .mp-card-img img{ transform:scale(1.04); }
.mp-card-img span{ font-family:var(--cond); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.mp-card h3{ margin-top:12px; font-weight:400; font-size:21px; }
.mp-card p{ margin:4px 0 0; font-size:13.5px; color:var(--body); }

/* series tiles (showroom pages) */
.mp-tiles{ display:grid; gap:12px; margin-top:24px; }
.mp-tile-link{ position:relative; display:flex; align-items:flex-end; min-height:170px; padding:18px; overflow:hidden; border-radius:12px;
  background-size:cover; background-position:center; color:#fff; text-decoration:none; isolation:isolate; }
.mp-tile-link::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,20,32,.05) 20%, rgba(11,20,32,.78) 100%); }
.mp-tile-link span{ font-size:13.5px; line-height:1.4; }
.mp-tile-link b{ display:block; font-family:var(--disp); font-weight:500; font-size:20px; }

/* "reach a showroom" blocks */
.mp-rooms{ display:grid; gap:14px; margin-top:22px; }
.mp-room{ padding:20px; border:1px solid var(--line); background:var(--paper-2); }
.mp-room b{ display:block; font-family:var(--disp); font-weight:500; font-size:19px; }
.mp-room span{ display:block; margin-top:2px; font-size:14px; color:var(--body); }
.mp-room div{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mp-room .btn{ padding-left:16px; padding-right:16px; }

/* 3D viewer (model pages) */
.mp-3d{ margin-top:38px; padding:44px 0 40px; background:var(--panel); scroll-margin-top:60px; }
.mp-3d-grid{ display:grid; gap:26px; margin-top:26px; }
.mp-tile{ position:relative; aspect-ratio:4 / 3; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.mp-tile iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mp-overlay{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:24px; text-align:center; background:#fff; transition:opacity .5s ease; }
.mp-overlay.is-hidden{ opacity:0; pointer-events:none; }
.mp-spinner{ width:42px; height:42px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--orange); animation:mp-spin .9s linear infinite; }
@keyframes mp-spin{ to{ transform:rotate(360deg); } }
.mp-overlay-title{ margin:0; font-family:var(--disp); font-weight:500; font-size:15px; color:var(--ink); }
.mp-overlay-sub{ margin:0; max-width:300px; min-height:3.2em; font-size:13px; line-height:1.55; color:var(--muted); }
.mp-group{ margin-bottom:24px; }
.mp-group-label{ display:block; margin-bottom:12px; font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--body); }
.mp-thumbs{ display:flex; flex-wrap:wrap; gap:14px 16px; }
.mp-thumb{ width:78px; padding:0; border:0; background:none; text-align:center; }
.mp-thumb img{ width:64px; height:64px; margin:0 auto 7px; border-radius:50%; object-fit:cover; background:#fff;
  border:2px solid var(--line); box-shadow:0 0 0 3px transparent; transition:border-color .2s, box-shadow .2s; }
.mp-thumb:hover img{ border-color:var(--blue); }
.mp-thumb[aria-pressed="true"] img{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(245,133,63,.28); }
.mp-thumb span{ display:block; font-size:12px; line-height:1.3; color:var(--body); }
.mp-thumb[aria-pressed="true"] span{ color:var(--ink); font-weight:600; }
.mp-note{ margin:22px 0 0; max-width:70ch; font-size:12px; line-height:1.6; color:var(--muted); }

/* footer */
.mp-foot{ padding:36px 0 40px; background:var(--navy); color:rgba(255,255,255,.78); font-size:14px; }
.mp-foot-rooms, .mp-foot-links{ display:grid; gap:24px; }
.mp-foot-links{ margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,255,255,.16); }
.mp-foot b{ display:block; margin-bottom:8px; font-family:var(--cond); font-weight:600; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#fff; }
.mp-foot span, .mp-foot a{ display:block; line-height:1.75; }
.mp-foot a{ color:#fff; text-decoration:none; }
.mp-foot a:hover{ text-decoration:underline; }
.mp-foot b a{ display:inline; }

@media (prefers-reduced-motion: reduce){ .mp-spinner{ animation:none; } .mp-overlay, .mp-card-img img{ transition:none; } }

@media (min-width:640px){
  .mp-cards{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:34px 22px; }
  .mp-tiles{ grid-template-columns:repeat(2, 1fr); }
  .mp-rooms, .mp-foot-rooms, .mp-foot-links{ grid-template-columns:repeat(3, 1fr); }
}

@media (min-width:900px){
  .mp-wrap{ padding:0 64px; }
  .mp h2{ font-size:36px; }
  .mp-top{ height:66px; padding:0 44px; }
  .mp-nav a, .mp-nav summary{ padding:8px 12px; }
  .mp-hero{ min-height:56vh; padding:48px 0 44px; }
  .mp-hero h1{ font-size:60px; }
  .mp-hero--plain{ min-height:0; padding:72px 0 52px; }
  .mp-intro{ padding:56px 0 8px; }
  .mp-sec{ padding:64px 0 0; }
  main > .mp-sec:last-child{ padding-bottom:72px; }
  .mp-sec--rule .mp-wrap::before{ margin-bottom:56px; }
  .mp-sec--panel{ margin-top:64px; padding:64px 0; }
  main > .mp-sec--panel:last-child{ padding-bottom:64px; }
  .mp-split{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:64px; }
  .mp-steps > li{ grid-template-columns:120px minmax(0, 1fr); gap:24px; padding:44px 0; }
  .mp-step-n{ font-size:52px; }
  .mp-visit{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:56px; }
  .mp-cards{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .mp-tiles{ grid-template-columns:repeat(4, 1fr); }
  .mp-tile-link{ min-height:230px; }
  .mp-3d{ margin-top:52px; padding:64px 0 56px; scroll-margin-top:66px; }
  .mp-3d-grid{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:48px; align-items:start; margin-top:34px; }
}