/* ============================================================
   MAJESTIC STONE — site.css
   One stylesheet for every v5 page. Replaces home-v5.css,
   mantels-v5.css, columns-v5.css, hoods-v5.css, about-v5.css
   and how-made-v5.css, which are no longer linked by anything.
   Edit the nav or footer HERE and every page follows.
   ============================================================ */

/* ---------- base ---------- */
html { scroll-behavior: smooth; background: #f4f2ed; }
body { margin: 0; background: #f4f2ed; color: #23211e; font-family: "Lora", Georgia, serif; -webkit-font-smoothing: antialiased; }
a { color: #4a1010; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: #8a6524; }
::selection { background: rgba(197,160,89,0.28); }
:focus-visible { outline: 2px solid #8a6524; outline-offset: 3px; }
.meta { font-family: "Cormorant Garamond", Garamond, serif; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; font-feature-settings: "tnum"; }
.link { display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid #c5a059; color: #23211e; text-decoration: none; font-family: "Cormorant Garamond", Garamond, serif; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
.link:hover { color: #8a6524; }
.msm-hv-underline:hover { border-bottom-color: currentColor !important; }
.msm-hv-bg:hover        { background: #ddc79b !important; }
.msm-hv-ink:hover       { color: #ddc79b !important; }
a[href="tel:9056042717"] { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
.msm-hv-gold:hover      { color: #8a6524 !important; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
header.msm-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #f4f2ed; border-bottom: 1px solid rgba(35,33,30,0.14); transition: transform 420ms cubic-bezier(0.22,0.61,0.36,1); will-change: transform; }
.msm-headrow { max-width: 1560px; margin: 0 auto; padding: 26px 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.msm-brand { font-family: 'Cormorant Garamond', Garamond, serif; font-weight: 400; font-size: 25px; letter-spacing: 0.2em; text-transform: uppercase; color: #23211e; text-decoration: none; white-space: nowrap; }
.msm-nav-list { display: flex; align-items: center; gap: 32px; font-family: 'Cormorant Garamond', Garamond, serif; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: #23211e; white-space: nowrap; }
.msm-nav-list a { color: inherit; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; }
.msm-nav-list a:hover { border-bottom-color: currentColor; }
.msm-nav-list a.active { border-bottom-color: currentColor; }
.msm-nav-list a.cta { color: #2b0505; background: #c5a059; padding: 10px 22px; border-radius: 1px; border-bottom: none; }
.msm-nav-list a.cta:hover { background: #ddc79b; }
.msm-burger { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: 1px solid currentColor; border-radius: 1px; color: #23211e; cursor: pointer; font-size: 19px; line-height: 1; }

/* The quote button in the header (Steve, 2026-08-21). It appears ONLY where
   the burger does — above 1150px the nav's own "Contact Us" button already
   holds that spot, so this one would double it. Hidden by default; the media
   block further down turns it on for 561-1150px.
   Why 561 and not lower: measured, the header has 187px of clear space at
   560px and only 32px at 390px, so below 561 the brand and burger already
   fill the bar. Phones are not left without a call to action — the fixed
   gold "Call · 905-604-2717" bar runs along the bottom at every width.
   margin-left:auto is what pins it beside the burger: the header row is
   space-between, which would otherwise centre it. */
.msm-navcta { display: none; margin-left: auto; align-items: center; white-space: nowrap;
  font-family: 'Cormorant Garamond', Garamond, serif; font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #2b0505; background: #c5a059; padding: 12px 20px;
  border-radius: 1px; text-decoration: none; border-bottom: none; }
.msm-navcta:hover { background: #ddc79b; color: #2b0505; }
.msm-menu { position: fixed; inset: 0; z-index: 60; background: #1c0505; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 26px; font-family: 'Cormorant Garamond', Garamond, serif; font-size: 25px; letter-spacing: 0.2em; text-transform: uppercase; }
.msm-menu.open { display: flex; }
.msm-menu a { color: #f4f2ed; text-decoration: none; }
.msm-menu a.cta { color: #c5a059; }
.msm-menu-close { position: absolute; top: 26px; right: 30px; width: 46px; height: 46px; background: transparent; border: 1px solid rgba(197,160,89,0.6); border-radius: 1px; color: #f4f2ed; font-size: 21px; cursor: pointer; }
.msm-intro { position: relative; overflow: hidden; background: #1c0505; }
.msm-intro-img { width: 100%; height: calc(100svh - 96px); min-height: 620px; object-fit: cover; object-position: 100% 50%; display: block; }
.msm-introcopy { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 0.56fr) 1fr; align-items: center; pointer-events: none; }
.msm-introcopy-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 0 56px 0 88px; pointer-events: auto; }

.msm-h2 { font-family: 'Cormorant Garamond', Garamond, serif; font-weight: 300; font-size: 42px; line-height: 1.04; letter-spacing: -0.02em; margin: 0; color: #ffffff; }
.msm-btn { padding: 16px 30px; background: #c5a059; color: #2b0505; text-decoration: none; border-radius: 1px; font-family: 'Cormorant Garamond', Garamond, serif; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; }
.msm-btn:hover { background: #ddc79b; color: #2b0505; }
.msm-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.msm-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; padding-top: 44px; border-top: 1px solid rgba(35,33,30,0.18); }
.msm-tile { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; }
.msm-tile img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.msm-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(35,33,30,0.18); }
.msm-cols { columns: 2; column-gap: 52px; font-size: 15px; line-height: 1.86; text-align: justify; hyphens: auto; color: rgba(35,33,30,0.84); }
.msm-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: baseline; padding-top: 30px; border-top: 1px solid rgba(35,33,30,0.18); margin-bottom: 52px; }
/* STORY ROWS — the alternating text-and-picture rows on the about page
   (Steve, 2026-08-21: "needs to look good and consistent").
   Before this, each row treated its picture differently: one tall image, one
   wide image, and a pair of thumbnails about a third the size, at three
   different aspect ratios, with three different vertical alignments. Row 3
   was the worst — 455px of text beside 185px of picture at 1440px.
   One shape for all of them. 3:2 is chosen because it lands closest to the
   text heights (425 and 455 in rows 1 and 3), so picture and words finish
   nearly level and no gap opens. Rows are centred so any leftover difference
   splits evenly instead of dumping below the picture.
   Scoped to .msm-story, NOT .msm-row — .msm-row is shared with the homepage,
   columns, hoods, mantels and two article pages, which are not part of this. */
.msm-story { align-items: center !important; }
.msm-story figure { margin: 0; }
.msm-story figure img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
}

/* The four resource pages use .msm-step rows for the same job — a photo
   beside its copy — and had the same trouble, worse (Steve, 2026-08-21).
   Three of the four mixed square photos (ratio 1.00) with widescreen ones
   (1.78) in the same page, and where a square sat beside short copy the
   picture ran 400px taller than the words: 404px on the brick page's last
   row, 436px on the first row of service areas.
   Same 3:2 as the about page's story rows, so all five content pages agree.
   At 1440 that is 615x410, which lands within ~50px of most of the copy.
   .msm-step is used ONLY on those four pages — nothing else inherits this. */
.msm-step figure img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block;
}

/* THE DOUBLE RULE (Steve, 2026-08-21 — "what is this gap").
   Several pages draw a 1px divider between sections, and .msm-row then draws
   its OWN border-top 88px further down, with 30px more padding before the
   heading: two hairlines 88px apart and 119px of dead space above the words.
   Sections that already have a divider above them carry .msm-divided, and
   their row stands down. Rows WITHOUT a divider above (the homepage, columns,
   hoods, mantels, thanks) keep their own border — it is their only rule. */
.msm-divided .msm-row {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Text-only rows (the Q&A pair on the brick page) keep their two columns down
   to 900px. Stacked at 1000-1150 they left the copy capped at 52ch in a 900px
   column, so half the row sat empty. Rows WITH a picture are not included —
   those stack, and their rule lives in the tablet block further down.
   Scoped inside .msm-divided so it reaches the resource pages only — the
   homepage has three text-only rows of its own that are not part of this. */
@media (max-width: 1150px) and (min-width: 901px) {
  .msm-divided .msm-row:not(:has(img)) { grid-template-columns: 1fr 1fr !important; gap: 44px !important; }
}

/* THE FACT BAND under the hero (Steve, 2026-08-21 — "I don't like this").
   It was #1c0505, and the hero section above it is #1c0505 too, so the two
   read as one unbroken slab of dark with a single gold hairline lost in the
   middle of it. Turning the band to the page's cream separates them properly:
   dark photo, gold rule, light band, content — a real change of key rather
   than more of the same colour.
   The gold stays, in the darker #8a6524 the site already uses for gold on
   light. !important because the colours are inline on every span.
   Only the band that holds .msm-facts is retagged — service-areas keeps a
   deliberate dark section further down, between two light ones, and that one
   works because it has something to contrast with. */
/* Only the TOP rule survives. It sits on the dark-photo/cream boundary and
   earns its place there. The bottom one used to divide dark from light too;
   now that the band is cream and the section below it is cream, it was a gold
   line floating in the middle of nothing. (Steve, 2026-08-21) */
.msm-factband { background: #f4f2ed; border-top: 1px solid #c5a059; }
/* four facts in one column ran the band to 607px tall at a 753px window —
   two columns hold it near 360px and the phrases are short enough to fit.
   One column only below 561, where two would be too narrow.
   Written as .msm-factband .msm-facts: the plain .msm-facts single-column
   rule sits later in this file and would otherwise win the tie. */
@media (max-width: 900px) and (min-width: 561px) {
  .msm-factband .msm-facts { grid-template-columns: 1fr 1fr !important; }
}
.msm-factband .msm-facts > div > span:first-child { color: #8a6524 !important; }
.msm-factband .msm-facts > div > span + span { color: rgba(35,33,30,0.78) !important; }

/* The same band on the three product pages — the numbered "01 Tailored to
   You / 02 The Perfect Fit / 03 Enduring Elegance" row — had the identical
   problem: #1c0505 sitting directly under a #1c0505 hero. Same cure, and the
   markup differs (.msm-3 with a heading and paragraph, not two spans), so it
   needs its own colours. The little gold rule inside each eyebrow keeps its
   #c5a059 — it reads fine on cream. (Steve, 2026-08-21) */
.msm-factband .msm-3 .meta { color: #8a6524 !important; }
.msm-factband .msm-3 h2 { color: #23211e !important; }
.msm-factband .msm-3 p { color: rgba(35,33,30,0.78) !important; }

/* This band drops to a single column at 1150, which ran it to 614px tall at
   1000 — three items down a long strip under the hero. It holds three across
   to 901, where each column is still ~244px and the phrases fit. Below 900
   one column is right, but the padding and gaps come in so the strip is not
   as long. (Same reasoning as the four-fact band above.) */
@media (max-width: 1150px) and (min-width: 901px) {
  .msm-factband .msm-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 40px !important; }
}
@media (max-width: 900px) {
  .msm-factband .msm-3 { gap: 36px !important; }
  .msm-factband > .msm-pad { padding-top: 56px !important; padding-bottom: 44px !important; }
}

/* headings split evenly instead of stranding one word on the last line —
   "Or a classic profile, cast to / fit" was a 34px line under a 387px one.
   The intro headings already did this; the body headings did not. */
.msm-h2 { text-wrap: balance; }

.msm-closerow { display: grid; grid-template-columns: 1.55fr 1fr; align-items: stretch; background: #14100e; border-top: 1px solid #c5a059; }
.msm-closerow > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msm-close { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 84px 64px; }
.msm-foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(35,33,30,0.18); }
.msm-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 16px; text-align: center; background: #c5a059; color: #2b0505; text-decoration: none; font-family: 'Cormorant Garamond', Garamond, serif; font-size: 16px; letter-spacing: 0.2em; text-transform: uppercase; }
.msm-sticky:hover { background: #ddc79b; color: #2b0505; }
.msm-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(12,9,8,0.94); display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.msm-lightbox.open { display: flex; }
.msm-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 92vw; }
.msm-lightbox img { max-width: 92vw; max-height: 78svh; object-fit: contain; display: block; }
.msm-lb-close { position: absolute; top: 24px; right: 28px; width: 46px; height: 46px; background: transparent; border: 1px solid rgba(197,160,89,0.6); border-radius: 1px; color: #f4f2ed; font-size: 22px; cursor: pointer; }
.msm-lb-prev, .msm-lb-next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: transparent; border: none; color: #f4f2ed; font-size: 34px; cursor: pointer; }
.msm-lb-prev { left: 18px; }
.msm-lb-next { right: 18px; }
.msm-lead { font-size: 21px; line-height: 1.7; }
.msm-body { font-size: 17px; line-height: 1.9; max-width: 46ch; }
.msm-numeral { font-family: "Cormorant Garamond", Garamond, serif; font-weight: 300; font-size: 88px; line-height: 0.8; letter-spacing: -0.02em; color: #c5a059; font-feature-settings: "tnum"; }

/* ============================================================
   RESOURCES DROPDOWN — restored from the pre-redesign nav.
   The label never navigates; it opens the menu.
   ============================================================ */
.msm-drop { position: relative; }
.msm-drop > .msm-drop-label { cursor: pointer; }
.msm-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 14px; min-width: 268px; padding: 10px 0;
  background: #1c0505; border: 1px solid rgba(197,160,89,0.45); border-radius: 1px;
  box-shadow: 0 18px 44px rgba(20,6,6,0.28);
  display: none; flex-direction: column; z-index: 60;
}
.msm-drop-menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.msm-drop:hover > .msm-drop-menu,
.msm-drop:focus-within > .msm-drop-menu,
.msm-drop.open > .msm-drop-menu { display: flex; }
.msm-drop-menu a {
  display: block; padding: 11px 24px; white-space: nowrap;
  color: #f4f2ed !important; text-decoration: none; border-bottom: none !important;
  font-family: 'Cormorant Garamond', Garamond, serif; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.msm-drop-menu a:hover { color: #c5a059 !important; background: rgba(197,160,89,0.09); }

/* the four resource links inside the mobile overlay */
.msm-submenu { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: -6px; }
.msm-submenu a { font-size: 15px !important; letter-spacing: 0.16em; color: rgba(244,242,237,0.72) !important; }
.msm-submenu a:hover { color: #c5a059 !important; }

/* on touch layouts the dropdown never appears; the overlay carries the links */
@media (max-width: 1150px) { .msm-drop-menu { display: none !important; } }




/* ============================================================
   COMPARISON TABLE — cast stone vs marble.
   A real <table> with a caption and row/column headers, styled
   to match the site. Stacks into labelled blocks below 900px.
   ============================================================ */
table.cmp { width: 100%; border-collapse: collapse; border-top: 1px solid #c5a059; margin: 0; }
.cmp-caption {
  caption-side: top; text-align: left; padding: 22px 0 26px;
  font-family: "Cormorant Garamond", Garamond, serif; font-size: 12px;
  letter-spacing: 0.26em; text-transform: uppercase; color: rgba(35,33,30,0.6);
}
table.cmp thead th {
  padding: 0 0 16px; text-align: left; vertical-align: bottom;
  font-family: "Cormorant Garamond", Garamond, serif; font-weight: 400; font-size: 14px;
  letter-spacing: 0.2em; text-transform: uppercase; color: #8a6524;
  border-bottom: 1px solid #c5a059;
}
table.cmp tbody th,
table.cmp tbody td {
  padding: 34px 0; vertical-align: top; text-align: left;
  border-bottom: 1px solid rgba(35,33,30,0.16);
}
table.cmp tbody th.cmp-label {
  width: 22%; padding-right: 44px; font-weight: 400;
  font-family: "Cormorant Garamond", Garamond, serif; font-size: 22px;
  line-height: 1.2; color: #23211e;
}
table.cmp tbody td { width: 39%; font-size: 16px; line-height: 1.85; color: rgba(35,33,30,0.9); }
table.cmp .cmp-cast   { border-left: 1px solid #c5a059; padding-left: 26px; }
table.cmp .cmp-marble { padding-left: 44px; }
table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td { border-bottom: none; }


/* ============================================================
   AREAS WE SERVE — region index, city chips, FAQ.
   ============================================================ */
.sa-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sa-chip { font-family: "Cormorant Garamond", Garamond, serif; font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; color: #23211e; white-space: nowrap; }
.sa-dot { color: #c5a059; font-size: 11px; }
.sa-region { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 56px; padding: 40px 0; border-bottom: 1px solid rgba(35,33,30,0.16); align-items: start; }
.sa-faq { border-top: 1px solid rgba(35,33,30,0.16); }
.sa-faq details { border-bottom: 1px solid rgba(35,33,30,0.16); }
.sa-faq summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 28px 0; font-family: "Cormorant Garamond", Garamond, serif; font-weight: 300; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; color: #23211e; }
.sa-faq summary::-webkit-details-marker { display: none; }
.sa-faq summary:hover { color: #8a6524; }
.sa-faq summary span { color: #c5a059; font-size: 24px; line-height: 1; }
.sa-faq details[open] summary span { transform: rotate(45deg); }
.sa-faq p { margin: 0 0 30px; font-size: 17px; line-height: 1.9; color: rgba(35,33,30,0.9); max-width: 58ch; }
.sa-map { position: relative; border: 1px solid #c5a059; background: #1c0505; }
.sa-map iframe { display: block; width: 100%; height: 560px; border: 0; filter: grayscale(1) sepia(0.42) saturate(0.75) contrast(0.92) brightness(1.03); }
.sa-map-tint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(28,5,5,0.20) 0%, rgba(28,5,5,0.06) 34%, rgba(28,5,5,0.26) 100%); mix-blend-mode: multiply; }
.sa-map-card { position: absolute; left: 34px; bottom: 34px; max-width: 340px; background: #f4f2ed; border: 1px solid rgba(35,33,30,0.16); border-top: 1px solid #c5a059; padding: 28px 30px; box-shadow: 0 14px 40px rgba(20,16,14,0.22); }


/* ============================================================
   CONTACT — form, contact details, model plates.
   ============================================================ */
.ct-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 88px; align-items: start; }
#majestic-contact-form { display: flex; flex-direction: column; gap: 26px; }
#majestic-contact-form label { display: block; font-family: "Cormorant Garamond", Garamond, serif; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(35,33,30,0.78); margin-bottom: 10px; }
#majestic-contact-form input, #majestic-contact-form textarea { width: 100%; box-sizing: border-box; font-family: "Lora", Georgia, serif; font-size: 16px; line-height: 1.6; color: #23211e; background: #ffffff; border: 1px solid rgba(35,33,30,0.24); border-radius: 1px; padding: 15px 16px; transition: border-color 180ms ease, box-shadow 180ms ease; }
#majestic-contact-form textarea { min-height: 148px; resize: vertical; }
#majestic-contact-form input:hover, #majestic-contact-form textarea:hover { border-color: #c5a059; }
#majestic-contact-form input:focus, #majestic-contact-form textarea:focus { outline: 2px solid #8a6524; outline-offset: 3px; border-color: #c5a059; }
#majestic-contact-form button { align-self: flex-start; margin-top: 6px; padding: 17px 34px; background: #c5a059; color: #2b0505; border: 1px solid #c5a059; border-radius: 1px; cursor: pointer; font-family: "Cormorant Garamond", Garamond, serif; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; transition: background 180ms ease; }
#majestic-contact-form button:hover { background: #ddc79b; }
.ct-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }


/* ============================================================
   MANTELS OFFER — paid landing page: hero form card, styles grid.
   ============================================================ */
.lp-hero { display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100svh - 96px); background: #1c0505; }
.lp-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 26px; padding: 56px 64px; }
.lp-card { background: #f4f2ed; border: 1px solid #c5a059; padding: 34px 36px; }
/* SCOPED to .lp-card (Steve 2026-08-23). The offer page and the contact
   page share the form id, and these rules sit LATER in this file than
   the contact page's own form rules above — so the two-column card
   layout was winning on contact.html at every width, pairing Name and
   Phone on one line. Scoping to the offer page's card hands the contact
   form back to its own rules: one field per line. */
.lp-card #majestic-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-card #majestic-contact-form input, .lp-card #majestic-contact-form textarea, .lp-card #majestic-contact-form button { grid-column: 1 / -1; }
.lp-card #majestic-contact-form input:nth-of-type(1) { grid-column: 1 / 2; }
.lp-card #majestic-contact-form input:nth-of-type(2) { grid-column: 2 / 3; }
.lp-card #majestic-contact-form input, .lp-card #majestic-contact-form textarea { width: 100%; box-sizing: border-box; font-family: "Lora", Georgia, serif; font-size: 16px; line-height: 1.5; color: #23211e; background: #ffffff; border: 1px solid rgba(35,33,30,0.24); border-radius: 1px; padding: 14px 15px; transition: border-color 180ms ease; }
.lp-card #majestic-contact-form input::placeholder, .lp-card #majestic-contact-form textarea::placeholder { color: rgba(35,33,30,0.52); }
.lp-card #majestic-contact-form textarea { min-height: 104px; resize: vertical; }
.lp-card #majestic-contact-form button { margin-top: 6px; padding: 17px 30px; background: #c5a059; color: #2b0505; border: 1px solid #c5a059; border-radius: 1px; cursor: pointer; font-family: "Cormorant Garamond", Garamond, serif; font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; transition: background 180ms ease; }
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp-tile { position: relative; }
.lp-tile img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border: 1px solid rgba(35,33,30,0.18); }
.lp-tile span { position: absolute; left: 16px; bottom: 16px; font-family: "Cormorant Garamond", Garamond, serif; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: #c5a059; background: rgba(28,5,5,0.82); padding: 7px 12px; font-feature-settings: "tnum"; }

/* ---------- breakpoints (widest first, narrow wins) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #msmHeader { transition: none !important; }
}

@media (max-width: 1280px) {
  }

@media (max-width: 1280px) {
  }

@media (max-width: 1280px) {
  }

@media (max-width: 1280px) {
  }

@media (max-width: 1280px) {
  }

@media (max-width: 1150px) {
    .msm-nav-list { display: none !important; }
    .msm-burger { display: inline-flex !important; }
    .msm-feature { grid-template-columns: 1fr !important; }
    .msm-feature > div { grid-column: 1 !important; grid-row: auto !important; }
    .msm-shot { order: 1 !important; }
    .msm-copy { order: 2 !important; padding: 44px 44px 80px !important; }
    .msm-overlay > div:not(.msm-copy-over) { display: none !important; }
    .msm-trend { grid-template-columns: repeat(3, 1fr) !important; }
    .msm-foot { grid-template-columns: 1fr 1fr !important; gap: 44px !important; }
    .msm-cols { columns: 2 !important; }
    .msm-closerow { grid-template-columns: 1fr !important; }
    .msm-closerow img { min-height: 54svh; }
    .msm-close { padding: 56px 44px 64px !important; }
    .msm-close h2 { font-size: 40px !important; }
    .msm-row { grid-template-columns: 1fr !important; gap: 40px !important; }
    .msm-overlay { grid-template-columns: 1fr !important; align-items: end !important; background: linear-gradient(180deg, rgba(20,6,6,0) 30%, rgba(20,6,6,0.82) 100%); }
    .msm-copy-over { padding: 0 44px 56px !important; }
    .msm-feature img { min-height: 62svh !important; }
  }

@media (max-width: 1150px) {
    .msm-nav-list { display: none !important; }
    .msm-burger { display: inline-flex !important; }
    .msm-gallery { grid-template-columns: repeat(2, 1fr) !important; }
    .msm-3 { grid-template-columns: 1fr !important; }
    .msm-foot { grid-template-columns: 1fr 1fr !important; gap: 44px !important; }
    .msm-cols { columns: 2 !important; }
    .msm-closerow { grid-template-columns: 1fr !important; }
    .msm-closerow img { min-height: 54svh; }
    .msm-close { padding: 56px 44px 64px !important; }
    .msm-close h2 { font-size: 40px !important; }
    .msm-row { grid-template-columns: 1fr !important; gap: 40px !important; }
  }

@media (max-width: 1150px) { .msm-gallery { grid-template-columns: repeat(2, 1fr) !important; } }

/* the header quote button lives exactly where the burger does, and only
   where there is room for it — see the note on .msm-navcta above */
@media (max-width: 1150px) and (min-width: 561px) {
  .msm-navcta { display: inline-flex !important; }
}

@media (max-width: 1150px) {
    .msm-nav-list { display: none !important; }
    .msm-burger { display: inline-flex !important; }
    .msm-gallery { grid-template-columns: repeat(2, 1fr) !important; }
    .msm-3 { grid-template-columns: 1fr !important; }
    .msm-foot { grid-template-columns: 1fr 1fr !important; gap: 44px !important; }
    .msm-cols { columns: 2 !important; }
    .msm-closerow { grid-template-columns: 1fr !important; }
    .msm-closerow img { min-height: 54svh; }
    .msm-close { padding: 56px 44px 64px !important; }
    .msm-close h2 { font-size: 40px !important; }
    .msm-row { grid-template-columns: 1fr !important; gap: 40px !important; }
  }

@media (max-width: 1150px) {
    .msm-nav-list { display: none; }
    .msm-burger { display: inline-flex; }
    .msm-gallery { grid-template-columns: repeat(2, 1fr); }
    .msm-3 { grid-template-columns: 1fr; }
    .msm-foot { grid-template-columns: 1fr 1fr; gap: 44px; }
    .msm-cols { columns: 2; }
    .msm-closerow { grid-template-columns: 1fr; }
    .msm-closerow > img { min-height: 54svh; }
    .msm-close { padding: 56px 44px 64px; }
    .msm-close h2 { font-size: 40px; }
    .msm-row { grid-template-columns: 1fr; gap: 40px; }
  }

@media (max-width: 1150px) {
  .msm-facts { grid-template-columns: 1fr 1fr !important; }
  .msm-step { grid-template-columns: 1fr !important; gap: 36px !important; }
  /* copy leads, picture follows — the same order the about page's story rows
     use, so a reader gets the same rhythm on every content page. This was
     `order: -1` (picture first), which also disagreed with how-made, whose
     markup puts the copy first anyway. (Steve, 2026-08-21) */
  .msm-step > div { order: 1 !important; padding: 0 !important; }
  .msm-step figure { order: 2 !important; }
}

@media (max-width: 900px) {
    .msm-trend { grid-template-columns: 1fr 1fr !important; }
    .msm-close { padding: 44px 22px 56px !important; }
    .msm-close h2 { font-size: 34px !important; }
    .msm-4 { grid-template-columns: 1fr 1fr !important; }
    .msm-display { font-size: 40px !important; }
    .msm-h2 { font-size: 29px !important; }
    .msm-cols { columns: 1 !important; }
    .msm-pad { padding-left: 22px !important; padding-right: 22px !important; }
    .msm-copy { padding: 40px 22px 64px !important; }
    .msm-copy-over { padding: 0 22px 44px !important; }
    .msm-feature img { min-height: 56svh !important; }
    .msm-bleed { height: 62svh !important; }
  }

@media (max-width: 900px) {
    .msm-close { padding: 44px 22px 56px !important; }
    .msm-close h2 { font-size: 34px !important; }
    .msm-display { font-size: 36px !important; }
    .msm-h2 { font-size: 29px !important; }
    .msm-cols { columns: 1 !important; }
    .msm-pad { padding-left: 22px !important; padding-right: 22px !important; }
  }

@media (max-width: 900px) {
    .msm-close { padding: 44px 22px 56px !important; }
    .msm-close h2 { font-size: 34px !important; }
    .msm-h2 { font-size: 29px !important; }
    .msm-cols { columns: 1 !important; }
    .msm-pad { padding-left: 22px !important; padding-right: 22px !important; }
  }

@media (max-width: 900px) {
    .msm-close { padding: 44px 22px 56px; }
    .msm-close h2 { font-size: 34px; }
    .msm-h2 { font-size: 29px; }
    .msm-cols { columns: 1; }
    .msm-pad { padding-left: 22px !important; padding-right: 22px !important; }
  }

@media (max-width: 900px) {
  .msm-facts { grid-template-columns: 1fr !important; }
  .msm-numeral { font-size: 62px !important; }
  .msm-lead { font-size: 19px !important; }
  .msm-band { height: 52svh !important; }
}

/* the gallery holds TWO columns across the whole tablet range and only
   goes single on phones, at the same 700px boundary the rest of the site
   stacks at (Steve, 2026-08-21). It used to collapse at 900px, from three
   duplicate copies of the same rule in the 900px blocks above — those
   .msm-gallery lines are gone. Was 620px here, which put the gallery on a
   different boundary from every other block on the page. */
@media (max-width: 700px)  { .msm-gallery { grid-template-columns: 1fr !important; } }

@media (max-width: 900px) {
    }

@media (max-width: 900px) {
  table.cmp, table.cmp thead, table.cmp tbody, table.cmp tr,
  table.cmp th, table.cmp td { display: block; width: auto; }
  table.cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.cmp tbody tr { padding: 28px 0; border-bottom: 1px solid rgba(35,33,30,0.16); }
  table.cmp tbody tr:last-child { border-bottom: none; }
  table.cmp tbody th.cmp-label { width: auto; padding: 0 0 18px; font-size: 24px; border-bottom: none; }
  table.cmp tbody td { width: auto; padding: 0 0 18px; border-bottom: none; }
  table.cmp tbody tr td:last-child { padding-bottom: 0; }
  table.cmp .cmp-cast, table.cmp .cmp-marble { border-left: none; padding-left: 0; }
  table.cmp tbody td::before {
    display: block; margin-bottom: 7px;
    font-family: "Cormorant Garamond", Garamond, serif; font-size: 12px;
    letter-spacing: 0.26em; text-transform: uppercase; color: #8a6524;
  }
  table.cmp tbody td.cmp-cast::before   { content: "Cast stone"; }
  table.cmp tbody td.cmp-marble::before { content: "Marble"; }
}

@media (max-width: 900px) {
    .sa-map iframe { height: 400px; }
    .sa-map-card { position: static; max-width: none; box-shadow: none; border-left: 0; border-right: 0; border-bottom: 0; }
    .sa-region { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
    .sa-faq summary { font-size: 23px; }
    .sa-band { height: 52svh !important; }
  }

@media (max-width: 1150px) {
    .ct-grid { grid-template-columns: 1fr; gap: 56px; }
    .ct-plates { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 900px) {
    .ct-plates { grid-template-columns: 1fr 1fr; gap: 18px; }
    .sa-faq summary { font-size: 23px; }
  }

@media (max-width: 1150px) {
    .lp-hero { grid-template-columns: 1fr; min-height: 0; }
    .lp-hero-img { height: 46svh; }
    .lp-hero-copy { order: -1; padding: 48px 44px; }
    .lp-grid { grid-template-columns: repeat(2, 1fr); }
  }

@media (max-width: 900px) {
    .lp-hero-copy { padding: 40px 22px; }
    .lp-card { padding: 26px 22px; }
    .lp-grid { gap: 16px; }
  }

/* ============================================================
   INTRO — responsive layer. Base rules above are the desktop
   layout: image fills the section, copy overlaid in the left
   column, vertically centred.
   ============================================================ */

/* every width above phones: copy centred against the image,
   beating the inline top-anchor styles left on the pages */
@media (min-width: 701px) {
  /* .msm-introcopy is the inner pages; .msm-overlay is the homepage feature
     bands. Same treatment for both — they are the same content block. */
  .msm-introcopy, .msm-overlay { align-items: center !important; }
  .msm-introcopy > div, .msm-overlay > div {
    padding-top: 0 !important; padding-bottom: 0 !important;
    justify-content: center !important;
  }
}

/* tablet 701-1280px: the copy stays OVER THE DARK LEFT BAND of the image.
   The base anchors the image at object-position 100% 50% (its right edge),
   so as the viewport narrows `cover` crops from the LEFT — throwing away the
   dark band the text sits on. Anchoring left keeps that band in frame.
   Copy is the first child on every page, so it holds the left column. */
@media (max-width: 1280px) and (min-width: 701px) {
  .msm-intro-img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important;
    object-fit: cover !important;
    object-position: 0% 50% !important;
    transform: none !important; aspect-ratio: auto !important;
  }
  .msm-introcopy {
    position: relative !important; inset: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, calc(23.7vw + 234px)) 1fr !important;
    align-items: center !important;
    min-height: max(70svh, 560px) !important;
    background: none !important;
  }
  .msm-introcopy > div:empty { display: none !important; }
  .msm-introcopy > div:first-child {
    padding: 0 24px 0 clamp(28px, 4vw, 56px) !important;
    gap: 16px !important;
  }
  .msm-introcopy h1, .msm-introcopy h2 { font-size: clamp(26px, 3.4vw, 34px) !important; max-width: none; }
  .msm-introcopy p { font-size: 14.5px !important; line-height: 1.65 !important; max-width: none !important; }
  .msm-introcopy .msm-btn, .msm-introcopy .link { font-size: 13px !important; }

  /* THE GAP RULE (Steve, 2026-08-21, learned the hard way).
     WHY a gap opens between the copy and the product: at tablet widths the
     photo is wider than its frame is tall, so `cover` trims the TOP AND
     BOTTOM only — the sides are never cropped and horizontal object-position
     does NOTHING. The product therefore sits at a fixed share of the width.
     THE FIX IS ALWAYS THE COLUMN, NOT THE CROP: set the copy column to the
     product's share of the width (measure it) so the text runs right up to
     it. Do not try to move the photo; check cropsSides before you assume.
     The shared height below only equalises bands 01/02/03 so their copy sits
     on one level, and drives the side-crop that DOES happen below ~900px. */
  section[data-screen-label="Mantels"] > img,
  section[data-screen-label="Columns"] > img,
  section[data-screen-label="Hoods"] > img {
    height: clamp(520px, 50vw, 660px) !important;
    min-height: 0 !important; aspect-ratio: auto !important;
    object-fit: cover !important;
  }
  /* where each product sits in its frame: mantel is centre-right (52% pulls
     it left to the copy), the pillar is at the far left (5% pushes it right
     to the copy), the hood is centre-right (62% pulls it left). */
  img[src*="mantel-feature-dark-left"] { object-position: 52% 50% !important; }
  img[src*="column-feature-dark-right"] { object-position: 5% 50% !important; }
  img[src*="hood-feature-dark-left"] { object-position: 62% 50% !important; }

  /* the filenames encode which side of the photo is dark. Default above is
     dark-on-the-left. For a dark-RIGHT photo, anchor the image right and move
     the copy into the right column so it still lands on the dark band. */
  .msm-intro-img[src*="dark-right"] { object-position: 100% 50% !important; }
  .msm-intro:has(.msm-intro-img[src*="dark-right"]) .msm-introcopy,
  section:has(.msm-intro-img[src*="dark-right"]) .msm-introcopy {
    grid-template-columns: 1fr minmax(0, calc(32.6vw + 171px)) !important;
  }
  .msm-intro:has(.msm-intro-img[src*="dark-right"]) .msm-introcopy > div:first-child,
  section:has(.msm-intro-img[src*="dark-right"]) .msm-introcopy > div:first-child {
    grid-column: 2 !important;
    padding: 0 clamp(28px, 4vw, 56px) 0 24px !important;
  }
}

/* desktop >1280px: hold the copy further off the left edge */
@media (min-width: 1281px) {
  .msm-introcopy > div:first-child,
  .msm-overlay > div:first-child {
    padding-left: clamp(96px, 7.5vw, 160px) !important;
    padding-right: 48px !important;
    max-width: none !important;
  }
  .msm-introcopy p, .msm-copy-over p { max-width: 52ch !important; }
}

/* ============================================================
   DARK-BAND CONSTRAINTS — measured, not guessed.
   Each intro/feature photo was sampled column by column; the
   figures below are the share of width that is >=70% dark, i.e.
   safe for white text. The copy column is capped just inside it
   so type never runs onto the light part of the photo.

     mantels-intro-dark-left     dark left  44%
     mantel-feature-dark-left    dark left  44%
     hood-feature-dark-left      dark left  50%
     column-feature-dark-right   dark right 63%
     hero-columns                fully dark
     majestic-stone-mantel-54    NO dark band -> scrim
     close-room-unlit            dark left  15% -> scrim
     man6                        NO dark band -> scrim

   Re-measure if a photo is replaced.
   ============================================================ */
@media (min-width: 701px) {

  /* --- dark on the LEFT --- */
  section:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy,
  section:has(img[src*="mantel-feature-dark-left"]) .msm-overlay,
  .msm-intro:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy {
    grid-template-columns: minmax(0, 41%) 1fr !important;
  }
  section:has(img[src*="hood-feature-dark-left"]) .msm-introcopy,
  section:has(img[src*="hood-feature-dark-left"]) .msm-overlay,
  .msm-intro:has(img[src*="hood-feature-dark-left"]) .msm-introcopy {
    grid-template-columns: minmax(0, 47%) 1fr !important;
  }

  /* --- dark on the RIGHT: copy moves across --- */
  section:has(img[src*="column-feature-dark-right"]) .msm-introcopy,
  section:has(img[src*="column-feature-dark-right"]) .msm-overlay,
  .msm-intro:has(img[src*="column-feature-dark-right"]) .msm-introcopy {
    grid-template-columns: 1fr minmax(0, 58%) !important;
  }
  /* the copy div is sometimes preceded by an empty spacer div (homepage
     Columns band) — target the child that has content, and hide spacers */
  section:has(img[src*="column-feature-dark-right"]) .msm-introcopy > div:not(:empty),
  section:has(img[src*="column-feature-dark-right"]) .msm-overlay > div:not(:empty) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding-left: 24px !important;
    padding-right: clamp(56px, 5vw, 96px) !important;
  }
  .msm-introcopy > div:empty, .msm-overlay > div:empty { display: none !important; }
  img[src*="column-feature-dark-right"] { object-position: 100% 50% !important; }

  /* --- photos with no usable dark band: earn the contrast with a scrim --- */
  section:has(img[src*="majestic-stone-mantel-54"]) .msm-introcopy,
  section:has(img[src*="close-room-unlit"]) .msm-introcopy,
  .msm-intro:has(img[src*="majestic-stone-mantel-54"]) .msm-introcopy,
  .msm-intro:has(img[src*="close-room-unlit"]) .msm-introcopy {
    grid-template-columns: minmax(0, 46%) 1fr !important;
    background: linear-gradient(90deg, rgba(16,5,5,0.86) 0%, rgba(16,5,5,0.72) 34%, rgba(16,5,5,0) 62%) !important;
  }
}

/* tablet keeps the copy inside every band above — FLUID (Steve's ruling
   2026-08-21): every text column is a blend of window-share plus a small
   constant, so it resizes continuously with the window. The share grows as
   the window narrows, matching how the left/right-anchored crop throws the
   photo's light side away first — text always lands on dark, no fixed
   widths, no jumps. Each formula hits ~57% of a 701px window and the
   band's measured dark-share at 1280. */
@media (max-width: 1280px) and (min-width: 701px) {
  section:has(img[src*="dark-left"]) .msm-introcopy,
  section:has(img[src*="dark-left"]) .msm-overlay,
  .msm-intro:has(img[src*="dark-left"]) .msm-introcopy {
    /* 701px -> 400 (57%), 1280px -> 537 (42%) */
    grid-template-columns: minmax(0, calc(23.7vw + 234px)) 1fr !important;
  }
  section:has(img[src*="dark-right"]) .msm-introcopy,
  section:has(img[src*="dark-right"]) .msm-overlay,
  .msm-intro:has(img[src*="dark-right"]) .msm-introcopy {
    /* ~56% at every width: the copy column reaches LEFT to meet the pillar
       (which sits at ~44% of the photo), closing the dark gulf between the
       column and the text at wide tablet. The wall it reaches over is dark,
       and the paragraph line-length cap keeps the text itself readable. */
    grid-template-columns: 1fr minmax(0, calc(54.9vw + 15px)) !important;
  }

  /* hood-feature: the hood's stone shelf starts at 46% of the frame, so the
     copy column runs to 46% and the text meets it. Held at 30% before, which
     left a slab of empty wall between the words and the product — THE gap.
     Because the photo is wider than the frame is tall at these widths, its
     sides are never cropped, so the product sits at a fixed share of the
     width and a percentage column lands on it at every width. */
  section:has(img[src*="hood-feature-dark-left"]) .msm-introcopy,
  section:has(img[src*="hood-feature-dark-left"]) .msm-overlay,
  .msm-intro:has(img[src*="hood-feature-dark-left"]) .msm-introcopy {
    grid-template-columns: minmax(0, 46%) 1fr !important;
  }
  /* and its paragraphs fill that column — the shared line-length cap would
     re-open the gap here */
  section:has(img[src*="hood-feature-dark-left"]) p { max-width: 100% !important; }

  /* mantel-feature: same treatment — the mantel's light edge starts at 44%,
     so the copy column runs to 44% and its paragraphs fill it */
  section:has(img[src*="mantel-feature-dark-left"]) .msm-introcopy,
  section:has(img[src*="mantel-feature-dark-left"]) .msm-overlay,
  .msm-intro:has(img[src*="mantel-feature-dark-left"]) .msm-introcopy {
    grid-template-columns: minmax(0, 44%) 1fr !important;
  }
  section:has(img[src*="mantel-feature-dark-left"]) p { max-width: 100% !important; }

  /* column-feature is mirrored: the product is on the LEFT, so this band's
     copy is set flush RIGHT — its ragged edge then faces the pillar and the
     block ends cleanly at the window side. */
  section:has(img[src*="column-feature-dark-right"]) .msm-copy-over,
  section:has(img[src*="column-feature-dark-right"]) .msm-introcopy > div:first-child {
    text-align: right !important; align-items: flex-end !important;
  }
  section:has(img[src*="column-feature-dark-right"]) .msm-copy-over > *,
  section:has(img[src*="column-feature-dark-right"]) .msm-introcopy > div:first-child > * {
    margin-left: auto !important;
  }
  /* the eyebrow and button rows are flex — push their contents right too */
  section:has(img[src*="column-feature-dark-right"]) .meta,
  section:has(img[src*="column-feature-dark-right"]) .msm-copy-over > div,
  section:has(img[src*="column-feature-dark-right"]) .msm-introcopy > div:first-child > div {
    justify-content: flex-end !important;
  }

  /* breathing room, also fluid: the copy never kisses the photo's light
     edge or the window edge — both side paddings scale with the window.
     Dark-left: left = window edge, right = toward the photo.
     Dark-right: left = toward the photo, right = window edge. */
  /* the padding on the PRODUCT side is a deliberate breath — enough that the
     type isn't jammed against the product, small enough that it doesn't
     re-open the gap the column was sized to close */
  .msm-introcopy > div:first-child,
  .msm-overlay > div:not(:empty) {
    padding-left: clamp(28px, 4vw, 56px) !important;
    padding-right: clamp(30px, 3.4vw, 52px) !important;
  }
  /* dark-right bands are mirrored: the product is on the LEFT, so the small
     padding goes on the left and the window-edge padding on the right */
  section:has(img[src*="dark-right"]) .msm-introcopy > div:first-child,
  section:has(img[src*="dark-right"]) .msm-overlay > div:not(:empty),
  .msm-intro:has(img[src*="dark-right"]) .msm-introcopy > div:first-child {
    padding-left: clamp(30px, 3.4vw, 52px) !important;
    padding-right: clamp(28px, 4vw, 56px) !important;
  }

  /* vertical breathing room to match: a little more air between the eyebrow,
     heading, paragraphs and the link, and slightly looser lines */
  .msm-introcopy > div:first-child,
  .msm-overlay > div:not(:empty) { gap: clamp(18px, 2vw, 26px) !important; }
  .msm-introcopy p, .msm-copy-over p { line-height: 1.75 !important; }

  /* two-line headings break into balanced halves instead of leaving one
     orphan word on the second line */
  .msm-introcopy h1, .msm-introcopy h2,
  .msm-copy-over h1, .msm-copy-over h2 { text-wrap: balance; }

  /* the "One of a kind — Hand made" eyebrow reads as one line at every
     tablet width instead of breaking mid-word */
  .msm-introcopy .meta, .msm-copy-over .meta {
    font-size: 11px !important; white-space: nowrap !important;
  }

  /* a phone number never breaks mid-number ("905-604- / 2717"). Holding the
     button row on one line squeezes this link, so it needs saying out loud.
     Sitewide for intro copy — it was true on every band, not just one. */
  .msm-introcopy .link, .msm-copy-over .link { white-space: nowrap !important; }

  /* gold buttons inside intro copy never wrap */
  .msm-introcopy a.msm-hv-bg, .msm-copy-over a.msm-hv-bg {
    font-size: 13px !important; white-space: nowrap !important;
    padding-left: 22px !important; padding-right: 22px !important;
  }
}

/* BREATHING ROOM on the mantels intro photo (Steve, 2026-08-21).
   Measured at a 875px window: the copy column is 441px but the photo's dark
   band ends at 410px, so the type ended ON the mantel's stone edge — no air
   at all. Here the problem is the OPPOSITE of the gap rule: the text overruns
   the product instead of falling short of it, so the product-side padding
   grows instead of the column shrinking.
   The padding formula holds ~32px of dark wall between the last word and the
   stone at every tablet width: at 860 it gives 63px (column overhangs the
   dark band by 31px, so 31 + 32); at 1280 the column already sits inside the
   dark band, so it floors at 32px. Scoped to this photo only — the columns
   and hood bands are sized to MEET their product and must not be padded.
   Pages: mantels, about, how-cast-stone-mantels-are-made,
   cast-stone-vs-marble-mantels, cast-stone-mantel-over-brick-fireplace. */
@media (max-width: 1280px) and (min-width: 701px) {
  section:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy > div:first-child,
  .msm-intro:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy > div:first-child {
    padding-left: clamp(40px, 5vw, 64px) !important;
    padding-right: clamp(32px, calc(155px - 9vw), 64px) !important;
    gap: clamp(18px, 2vw, 26px) !important;
  }
  /* the narrower column would push the button and phone onto separate rows,
     which costs ~55px of height and squeezes the air back out. The CTA row is
     allowed 24px past the text's right edge — it still ends well inside the
     dark band (398px vs the band's 410px edge at an 875px window), and only
     the running text needs the line-length discipline.
     Do NOT raise the band's height instead: a taller frame crops the photo's
     sides and runs the mantel off the right of the screen. Tried 2026-08-21. */
  section:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy > div:first-child > div:last-child,
  .msm-intro:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy > div:first-child > div:last-child {
    margin-right: -24px !important;
    gap: 20px !important;
    flex-wrap: nowrap !important;
  }
  section:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy p,
  .msm-intro:has(img[src*="mantels-intro-dark-left"]) .msm-introcopy p {
    line-height: 1.8 !important;
  }
}

/* BREATHING ROOM on the columns intro (Steve, 2026-08-21) — the mirror of
   the mantels fix above, plus the reason it was needed at all.
   columns.html carries an empty spacer <div></div> BEFORE the copy, so the
   copy is the second child and every rule written `> div:first-child` skips
   this page: its side padding was stuck at a flat 24px at every width while
   the fluid formulas silently did nothing. Target `> div:not(:empty)` here.
   Measured at 701px: the dark wall begins at x=330 but the text began at
   x=310 — the first words were sitting ON the lit pillar. The formula below
   holds ~32px of dark between the pillar and the first letter:
     701px -> 76px, 760px -> 43px, 800px and wider -> floors at 32px
   (above ~800 the copy column itself already starts well inside the dark).
   Alignment is deliberately NOT touched — Steve chose to keep this page's
   copy left-aligned (2026-08-21), so the `text-align: right` rule above is
   left on its `:first-child` selector and stays inert on this page. */
@media (max-width: 1280px) and (min-width: 701px) {
  section:has(img[src*="column-feature-dark-right"]) .msm-introcopy > div:not(:empty),
  .msm-intro:has(img[src*="column-feature-dark-right"]) .msm-introcopy > div:not(:empty) {
    /* Both margins are now line-length choices, not safety margins: with the
       50% crop above, the whole copy column sits on dark wall at every tablet
       width, so nothing here is holding type off the pillar any more.
       Pillar side eases 67px at 744 down to a 32px floor above 1000, where
       the wall is wide enough that the copy is far from the pillar anyway.
       Window side was 32px at the narrow end — the tightness Steve caught. */
    padding-left: clamp(32px, calc(200px - 18vw), 96px) !important;
    padding-right: clamp(40px, 5.6vw, 64px) !important;
    gap: clamp(16px, 1.8vw, 24px) !important;
  }
  /* holding the row on one line squeezes the phone number, which then broke
     mid-number ("905-604- / 2717"). A phone number never wraps. */
  section:has(img[src*="column-feature-dark-right"]) .msm-introcopy .link,
  .msm-intro:has(img[src*="column-feature-dark-right"]) .msm-introcopy .link {
    white-space: nowrap !important;
  }
}

/* (The 701-874px rules that squeezed this band's button-and-phone row onto
   one line were removed 2026-08-21 when the intro CTA moved into the header.
   If a CTA ever returns to this intro, note what was learned: the dark wall
   here is barely wider than the copy column, so a full row does not fit
   below 875px without trimming the button.) */

/* BREATHING ROOM on the kitchen-hoods intro (Steve, 2026-08-21) — the third
   of the three, and the one that needed the least.
   Its copy already clears the hood's stone shelf by 62-125px, so the column
   is NOT touched: the 46% width above is measured against the product and
   widening it would put type on the shelf. What was wrong here was vertical.
   The block ran 474px inside a 520px frame at 701px, leaving 23px of air top
   and bottom, and the button and phone stacked all the way to 1000px.
   Fix is the vertical rhythm plus a one-line button row from 860px, which is
   where the column is finally wide enough to hold it with the 24px allowance
   the other two bands use. Below 860 it stacks, and the tighter rhythm keeps
   ~40px of air even then. */
@media (max-width: 1280px) and (min-width: 701px) {
  section:has(img[src*="hood-feature-dark-left"]) .msm-introcopy > div:first-child,
  .msm-intro:has(img[src*="hood-feature-dark-left"]) .msm-introcopy > div:first-child {
    padding-left: clamp(36px, 4.6vw, 56px) !important;
    gap: clamp(14px, 1.7vw, 24px) !important;
  }
  section:has(img[src*="hood-feature-dark-left"]) .msm-introcopy p,
  .msm-intro:has(img[src*="hood-feature-dark-left"]) .msm-introcopy p {
    line-height: 1.68 !important;
  }
}
/* (The 860px+ rules that held this band's button-and-phone row on one line
   were removed 2026-08-21 when the intro CTA moved into the header. Worth
   keeping if it ever returns: flex was SHRINKING the button to make the row
   fit, which wrapped the button's own label onto two lines — the children
   needed flex: 0 0 auto.) */

/* narrow tablet 701-900px: rein the section height in so `cover` doesn't
   scale the photo up and crop the fireplace out of frame — keeps the dark
   band AND the mantel visible at once */
@media (max-width: 900px) and (min-width: 701px) {
  .msm-introcopy, .msm-overlay { min-height: max(56svh, 520px) !important; }
  /* The columns PAGE intro (not the homepage band) is a taller frame, so its
     crop window differs. Pinned at 11% the pillar sat beside the copy but the
     dark wall was only 388px wide at a 744px window, and the text already
     used 316px of it — so padding alone could only shorten the lines, never
     open them up. Measured wall width by crop position at 744px:
       11% -> 388px    25% -> 412px    50% -> 472px    100% -> 568px
     50% is the sitting: the pillar, sideboard and artwork all stay in frame
     and only the far-left arch is lost, and the 84px it buys pays for real
     margins on both sides AND longer lines (316px -> ~370px).
     (Steve, 2026-08-21: "let it breathe and consistent".)
     The pin lives in its own 701-1280 block below, not here, so the framing
     does not jump at 900 — see it there. */
}

/* The columns PAGE intro holds ONE crop across the whole tablet range. It
   used to be pinned 11% below 900 and 100% above, so the pillar jumped
   sideways as the window crossed 900. 50% holds everywhere: above ~1150 the
   frame is wider than the photo so the sides are never cropped and the pin
   makes no difference at all, and between 900 and 1150 the copy still lands
   137-232px onto the dark wall. Only .msm-intro-img is targeted, so the
   homepage's own Columns band keeps its own pin. */
@media (max-width: 1280px) and (min-width: 701px) {
  .msm-intro-img[src*="column-feature-dark-right"] { object-position: 50% 50% !important; }
}

/* phones ≤700px: image in flow on top, copy in a dark block below.
   (Mobile treatment still to be decided — tablet holds the overlay.) */
@media (max-width: 700px) {
  .msm-intro-img {
    position: static !important; inset: auto !important;
    width: 100%; height: auto !important; min-height: 0 !important;
    aspect-ratio: 16 / 10; object-fit: cover; transform: none !important;
  }
  .msm-introcopy {
    position: static !important; inset: auto !important;
    display: block !important; min-height: 0 !important;
    background: #1c0505; padding: 44px 22px 56px !important;
  }
  .msm-introcopy > div { padding: 0 !important; }
  .msm-introcopy > div:empty { display: none !important; }
  .msm-introcopy-inner { padding: 0 !important; }
  .msm-introcopy h1, .msm-introcopy h2 { font-size: clamp(28px, 7vw, 36px) !important; max-width: none; }
  .msm-introcopy p { max-width: none !important; }
}

/* ============================================================
   CLOSE ROW (the "Ready to elevate" CTA band, shared by every
   page) — tablet keeps the photo and the CTA side by side, same
   as desktop. The generic 1150px blocks above still stack it to
   one column; this later block outranks them from 701px up.
   Phones (<=700px) keep the stack. The photo is close-room-unlit
   (2752x1536); its cast stone mantel sits just left of centre,
   so the crop is pinned at 45% to keep the mantel in the shot. */
@media (max-width: 1150px) and (min-width: 701px) {
  .msm-closerow { grid-template-columns: 1.3fr 1fr !important; }
  .msm-closerow > img,
  .msm-closerow img {
    min-height: 0 !important; height: 100% !important;
    object-fit: cover !important; object-position: 45% 50% !important;
  }
  .msm-close { padding: 48px 36px !important; }
  .msm-close h2 { font-size: clamp(30px, 4vw, 40px) !important; }

  /* photo-beside-text rows (the how-made steps, the about-page story rows):
     the photo stays level with its copy at tablet, same as desktop, with a
     tighter gap. Rows without a photo are left alone. */
  /* The resource pages' picture rows stack here too, for the same reason the
     about page's do: half-width puts the copy in a 332px column and the photo
     shrinks to 332x249, floating beside a much taller block of text. Stacked,
     the copy gets a proper measure and the picture gets real size.
     This replaces the earlier 1fr 1fr ruling for .msm-step (2026-08-21). */
  .msm-step:has(img) { grid-template-columns: 1fr !important; gap: 36px !important; }
  .msm-step:has(img) > div { order: 1 !important; }
  .msm-step:has(img) figure { order: 2 !important; max-width: min(100%, 820px) !important; }
  .msm-row:has(img) { grid-template-columns: 1fr 1fr !important; gap: clamp(24px, 3.5vw, 44px) !important; }

  /* ...EXCEPT the about page's story rows. Their paragraphs are long, so a
     half-width column runs 12 lines tall beside a 222px picture — the photo
     ends up floating in the middle of a tall column with dead space above and
     below it (2026-08-21). Stacked, the text gets a proper measure and the
     picture gets the full width, which is far stronger at these sizes.
     Order is forced so every row reads the same way down the page: words,
     then picture — the rows alternate sides at desktop, and without this the
     middle row would put its photo on top.
     Written as .msm-row.msm-story, not .msm-story: the rule above it uses
     :has(), which outweighs a single class no matter which comes last. */
  .msm-row.msm-story { grid-template-columns: 1fr !important; gap: 36px !important; align-items: start !important; }
  .msm-row.msm-story > div { order: 1 !important; }
  .msm-row.msm-story figure { order: 2 !important; }
  /* the paragraphs cap themselves near 62ch (~700px), so an uncapped picture
     runs 1049px wide at 1150 — wider than the words it belongs to, and 700px
     tall. Capped just above the text measure it reads as one composed block. */
  .msm-row.msm-story figure { max-width: min(100%, 820px) !important; }
}

/* phones stack these rows already — this only fixes the reading order, so the
   middle row does not lead with its photo while the other two lead with words */
@media (max-width: 700px) {
  .msm-row.msm-story > div { order: 1 !important; }
  .msm-row.msm-story figure { order: 2 !important; }
}

/* the inline max-width on intro paragraphs is 42ch; inside a 41% column at
   1560px that is about 640px against 610px available, so cap it to the column */
@media (min-width: 701px) {
  /* inline caps of 42ch / 30ch / 12ch are narrower than the measured bands —
     let the column be the only constraint so both page types match. The 56ch
     ceiling only bites in the widened dark-right column, keeping its longer
     lines readable while the text still starts beside the pillar. */
  .msm-introcopy p, .msm-copy-over p { max-width: min(100%, 56ch) !important; }
  .msm-introcopy h1, .msm-introcopy h2,
  .msm-copy-over h1, .msm-copy-over h2 { max-width: 100% !important; }
  .msm-copy-over { align-items: flex-start !important; text-align: left !important; }
}

/* ============================================================
   Desktop >1280px, dark-RIGHT intro bands (the columns page).
   The copy sat pinned to the left of its column at 43% of the window with
   180-470px of empty wall to its right — left of centre in the dark half
   rather than sitting in it. Its left padding was a flat 24px.
   This moves it right ~70-100px depending on width. The paragraph cap keeps
   the block 556px wide, so only its position changes, not its measure.
   It lives at the END of the file on purpose: the 24px rule it overrides
   carries the same specificity, so the later of the two wins.
   (Steve, 2026-08-21: "move the text right a bit".)
   ============================================================ */
@media (min-width: 1281px) {
  section:has(img[src*="dark-right"]) .msm-introcopy > div:not(:empty),
  .msm-intro:has(img[src*="dark-right"]) .msm-introcopy > div:not(:empty) {
    padding-left: clamp(80px, 7vw, 140px) !important;
  }
}

/* ============================================================
   PHONE HERO CROPS (Steve's ruling 2026-08-21): the columns and
   hood intro photos put the product off-centre, and no
   object-position can fix that at phone — the frame shows nearly
   the full width. So <=700px serves dedicated crops cut from the
   same photos (column-feature-phone.webp / hood-feature-phone.webp,
   both 900x1004) via <picture> sources in columns.html and
   kitchen-hoods.html. These rules make the intro band follow the
   crop's near-portrait shape instead of the generic 16/10, and
   centre the framing — overriding the inline object-position and
   the src-keyed rules above (the [src*] attribute still names the
   desktop file, so those rules still match; this block is at the
   END of the file so it wins the tie).
   Tablet (701px+) never sees the crops — the <picture> media
   boundary is the same 700px as the phone boundary sitewide.
   ============================================================ */
@media (max-width: 700px) {
  section:has(source[srcset*="column-feature-phone"]) .msm-intro-img,
  section:has(source[srcset*="hood-feature-phone"]) .msm-intro-img,
  section:has(source[srcset*="hero-m069-phone"]) .msm-intro-img {
    aspect-ratio: 900 / 1004 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
  }
  /* mantels.html intro (Steve 2026-08-23): centred surround M-069 —
     hero-m069-phone.webp, 861x960 (the same 900:1004 shape), cut from
     gallery photo majestic-stone-mantel-69.webp, surround centred. */
}

/* homepage phone cards: grey-leaning panel fill (Steve 2026-08-21 — the
   cream lift over oxblood read pink) and a fine border on each card photo.
   Lives at the end of the file to win the tie with index.html's block. */
@media (max-width: 700px) {
  section[data-screen-label="Mantels"]::before,
  section[data-screen-label="Columns"]::before,
  section[data-screen-label="Hoods"]::before {
    /* a whisper darker than the oxblood ground (#1c0505) — the card reads
       as a quiet inset rather than a lifted panel (Steve 2026-08-21;
       stone-grey fills rejected, #120303 too dark, #170404 still too much) */
    background: #190505 !important;
  }
  section[data-screen-label="Mantels"] img,
  section[data-screen-label="Columns"] img,
  section[data-screen-label="Hoods"] img {
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
  }
}

/* LIGHTNESS ROUND (Steve 2026-08-23): the three homepage product sections
   turn cream on phones and each becomes a white CARD (grounds, panel and
   ink live in index.html's own block). Round 2 of the pass killed the
   thick oxblood photo mat ("looks terrible — these are cards"): the photo
   runs full-bleed to the card's side edges with NO border of its own —
   the card's hairline is the only frame. Appended at the very end to win
   the tie with the ::before-era gold img border above and the panel fill
   two blocks up (both inert-or-overridden: the panel ::before is redefined
   white in index.html's block, which is later in document order).
   Phones only; 701px+ untouched. */
@media (max-width: 700px) {
  section[data-screen-label="Mantels"] img,
  section[data-screen-label="Columns"] img,
  section[data-screen-label="Hoods"] img {
    border: none !important;
    outline: none !important;
  }
  section[data-screen-label="Mantels"]::before,
  section[data-screen-label="Columns"]::before,
  section[data-screen-label="Hoods"]::before {
    background: #ffffff !important;
  }
}