/* ==========================================================================
   Agrawal Stone Suppliers — kotastone.co
   Design system v2.0
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Core palette — quarry graphite, limestone paper, Mandana ochre */
  --ink:        #15171A;
  --ink-soft:   #23272C;
  --ink-muted:  #5E635F;

  --paper:      #F7F4EE;
  --paper-2:    #EFEAE0;
  --paper-3:    #E3DCCE;

  --sand:       #995A26;   /* Mandana red-brown. Darkened to clear 4.5:1
                              for small text on paper and white-on-sand buttons. */
  --sand-hi:    #D08B4E;
  --sand-soft:  #F7EDE2;

  --kota:       #5F6E58;   /* Kota green, secondary accent (AA on white) */
  --kota-soft:  #E4E8DF;

  --line:       rgba(21, 23, 26, 0.12);
  --line-soft:  rgba(21, 23, 26, 0.07);
  --line-dark:  rgba(247, 244, 238, 0.15);

  --white:      #FFFFFF;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gap:   1.25rem;
  --pad-x: clamp(1.15rem, 4vw, 3.5rem);
  --max:   1240px;
  --max-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.45s;

  --radius: 3px;
  --shadow-sm: 0 1px 2px rgba(21,23,26,.05), 0 4px 14px rgba(21,23,26,.05);
  --shadow-md: 0 2px 6px rgba(21,23,26,.06), 0 18px 44px rgba(21,23,26,.10);

  --header-h: 76px;
}

/* --- 2. Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; background: var(--paper-3); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* --- 3. Type ------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 .6em;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.85rem); }
h3 { font-size: clamp(1.28rem, 2.2vw, 1.6rem); letter-spacing: -.012em; }
h4 { font-size: 1.09rem; font-family: var(--font-body); font-weight: 600; letter-spacing: -.005em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
/* strong is pinned to --ink, which is invisible on the dark hero and dark
   bands. Inside those contexts let it take the surrounding colour instead. */
.hero strong, .page-hero strong,
.bg-dark .lede strong, .bg-dark p strong, .bg-dark li strong { color: inherit; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .705rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--sand);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--sand);
  flex: none;
}
.eyebrow.is-centered { justify-content: center; }
.lede {
  font-size: clamp(1.06rem, 1.7vw, 1.26rem);
  line-height: 1.58;
  color: var(--ink-muted);
  max-width: 60ch;
}
.muted { color: var(--ink-muted); }
.tiny { font-size: .82rem; line-height: 1.5; }
/* Email addresses and GSTINs are single unbreakable tokens wider than a phone
   screen; without this they force the page to scroll sideways. */
p, li, td, th, figcaption, .keyvals span, .footer-links a, .inline-link {
  overflow-wrap: anywhere;
}

/* --- 4. Layout ----------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap-narrow { max-width: var(--max-narrow); margin-inline: auto; }
/* Vertical rhythm tightened site-wide: the pages carry a lot of sections, and
   generous section padding was adding whole screens of empty space on a phone
   without adding any information. */
.section { padding-block: clamp(2.6rem, 6vw, 5.2rem); }
.section-sm { padding-block: clamp(2rem, 4vw, 3.4rem); }
.section-head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.section-head.is-centered .lede { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
/* minmax(0,1fr) rather than 1fr: a bare 1fr track cannot shrink below its
   content's min-width, so one wide table or image pushes the whole grid past
   the viewport. This is what caused the horizontal scroll on phones. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
}
.split.is-top { align-items: start; }
.split-40 { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); }
@media (max-width: 940px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .split, .split-40 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .g-2.keep-2, .g-4.keep-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Grids that hold only photographs stay two-up on a phone. A column of
     full-width shots added whole screens of scrolling, and a stone reads
     perfectly well at half width — tapping any of them opens it full size.
     Text cards are deliberately excluded: those do need the full width to
     stay readable. Browsers without :has() simply keep the single column. */
  .grid:has(> .frame), .grid:has(> figure) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }
}

.bg-paper2 { background: var(--paper-2); }
.bg-dark { background: var(--ink); color: rgba(247,244,238,.82); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--paper); }
.bg-dark .lede { color: rgba(247,244,238,.78); }
.bg-dark .eyebrow, .cta-band .eyebrow { color: var(--sand-hi); }
.bg-dark .eyebrow::before { background: var(--sand-hi); }
/* Light cards sitting on a dark section keep their own text colours */
.bg-dark .card, .bg-dark .info-card, .bg-dark .form-card { color: var(--ink-soft); }
.bg-dark .card h1, .bg-dark .card h2, .bg-dark .card h3, .bg-dark .card h4,
.bg-dark .info-card h4, .bg-dark .form-card h3 { color: var(--ink); }
.bg-dark .card p, .bg-dark .card .muted, .bg-dark .card .tiny { color: var(--ink-muted); }
.bg-dark .card .eyebrow { color: var(--sand); }
.bg-dark .card .eyebrow::before { background: var(--sand); }

/* --- 5. Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .86rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .028em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .2s var(--ease);
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sand); color: var(--white); }
.btn-primary:hover { background: #7E4A1F; }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--ink-soft); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-outline-light { border-color: var(--line-dark); color: var(--paper); }
.btn-outline-light:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.btn-sm { padding: .6rem 1.1rem; font-size: .8rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.btn-row.is-centered { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--sand);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.link-arrow:hover { border-color: currentColor; }
.link-arrow:hover::after { transform: translateX(4px); }
a.inline-link { color: var(--sand); border-bottom: 1px solid rgba(153,90,38,.4); }
a.inline-link:hover { border-color: var(--sand); }

/* --- 6. Header ----------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(247,244,238,.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 20px rgba(21,23,26,.07); }
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .68rem; flex: none; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.brand-text { line-height: 1.1; }
/* The Star Group wordmark leads the lockup; the trading name sits beneath it.
   The red rule under the wordmark echoes the ribbon in the group's artwork. */
.brand-star {
  display: block;
  font-family: var(--font-display);
  font-size: 1.14rem; font-weight: 600;
  color: #1B3D6D; letter-spacing: .05em; text-transform: uppercase;
  padding-bottom: .12rem;
  border-bottom: 2px solid #952126;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.02rem; color: var(--ink); letter-spacing: -.015em;
  display: block;
}
.brand-sub {
  display: block; margin-top: .2rem;
  font-size: .555rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: .2rem; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: .3rem;
  padding: .55rem .78rem;
  font-size: .845rem; font-weight: 500; color: var(--ink-soft);
  border-radius: var(--radius);
  transition: color .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--sand); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-link .caret { width: 8px; height: 8px; opacity: .5; transition: transform .25s var(--ease); }
.nav-item:hover .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: 100%; left: -.4rem;
  min-width: 246px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: .55rem .75rem; border-radius: var(--radius);
  font-size: .845rem; color: var(--ink-soft);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.dropdown a:hover { background: var(--paper-2); color: var(--ink); }
.dropdown a span { display: block; font-size: .73rem; color: var(--ink-muted); margin-top: .1rem; }

.header-cta { display: flex; align-items: center; gap: .55rem; flex: none; }
.header-phone {
  font-size: .845rem; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .3rem;
}
.header-phone:hover { color: var(--sand); }

.burger {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex: none;
}
.burger span {
  display: block; width: 17px; height: 1.5px; background: var(--ink);
  position: relative; transition: background .2s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1260px) {
  /* Was 1080px, then 1180px; the search icon added ~50px to .header-cta and the
     "Rates" nav item widened the bar again, so the row started overflowing a
     little above the old breakpoint (measured ~1231px). Collapsing to the
     burger a bit earlier keeps the header from ever running out of room. */
  .nav, .header-phone { display: none; }
  .burger { display: flex; }
}
/* On a phone the header has to hold the lockup, the quote button and the
   burger. Step the Star Group lockup down so nothing is pushed off-screen. */
@media (max-width: 460px) {
  .brand { gap: .55rem; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-star { font-size: 1rem; letter-spacing: .035em; }
  .brand-sub { font-size: .5rem; letter-spacing: .1em; }
}
@media (max-width: 460px) {
  .header-inner { gap: .6rem; }
  .header-cta { gap: .45rem; }
  .header-cta .btn-sm { padding-inline: .72rem; font-size: .76rem; }
  .search-toggle { width: 37px; height: 37px; }
}
@media (max-width: 500px) {
  /* Search icon + quote button + burger no longer fit together below this
     width. The quote button is duplicated prominently in the mobile drawer
     (.m-actions, "Request a quote" is the first thing in it), so dropping
     the header copy here loses nothing — it is one tap behind the burger. */
  .header-cta .btn-primary.btn-sm { display: none; }
}
@media (max-width: 380px) {
  .brand-sub { display: none; }
}

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 89;
  background: var(--paper);
  padding: 1.4rem var(--pad-x) 3rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav details { border-bottom: 1px solid var(--line-soft); }
.mobile-nav summary {
  list-style: none; cursor: pointer;
  padding: 1.02rem 0;
  font-family: var(--font-display); font-size: 1.28rem; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-family: var(--font-body); font-size: 1.3rem; color: var(--ink-muted); font-weight: 300; }
.mobile-nav details[open] summary::after { content: "–"; }
.mobile-nav .m-sub { padding: 0 0 1rem .2rem; display: grid; gap: .1rem; }
.mobile-nav .m-sub a { padding: .5rem 0; font-size: .95rem; color: var(--ink-muted); }
.mobile-nav > a.m-top {
  display: block; padding: 1.02rem 0;
  font-family: var(--font-display); font-size: 1.28rem; color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .m-actions { margin-top: 1.8rem; display: grid; gap: .7rem; }
body.nav-open { overflow: hidden; }

/* --- 7. Hero ------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21,23,26,.55) 0%, rgba(21,23,26,.28) 38%, rgba(21,23,26,.92) 100%);
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero h1 { color: var(--paper); max-width: 17ch; margin-bottom: .45em; }
.hero h1 em { font-style: italic; color: var(--sand-hi); }
.hero .lede { color: rgba(247,244,238,.8); max-width: 52ch; }
.hero .eyebrow { color: var(--sand-hi); }
.hero .eyebrow::before { background: var(--sand-hi); }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.6rem);
  margin-top: 2.8rem; padding-top: 1.9rem;
  border-top: 1px solid var(--line-dark);
}
.hero-stat b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--paper); line-height: 1;
}
.hero-stat span {
  display: block; margin-top: .5rem;
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(247,244,238,.68);
}

/* Page banner (interior pages) */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 5.6rem);
}
.page-hero .hero-media img { opacity: .45; }
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(21,23,26,.94) 20%, rgba(21,23,26,.6) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: var(--paper); max-width: 20ch; }
.page-hero .eyebrow { color: var(--sand-hi); }
.page-hero .eyebrow::before { background: var(--sand-hi); }
.page-hero .lede { color: rgba(247,244,238,.82); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .755rem; letter-spacing: .05em;
  color: rgba(247,244,238,.68);
  margin-bottom: 1.5rem;
}
.crumbs a:hover { color: var(--sand-hi); }
.crumbs span[aria-hidden] { opacity: .45; }

/* --- 8. Cards ------------------------------------------------------------ */
.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s var(--ease); }
a.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: .45rem; }
.card-body p { font-size: .9rem; color: var(--ink-muted); margin-bottom: 1rem; }
.card-body .link-arrow { margin-top: auto; align-self: flex-start; }

.tag {
  position: absolute; top: .85rem; left: .85rem; z-index: 2;
  background: rgba(21,23,26,.78);
  color: var(--paper);
  font-size: .655rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding: .34rem .62rem; border-radius: 2px;
  backdrop-filter: blur(6px);
}
.tag.is-sand { background: var(--sand); }
.tag.is-kota { background: var(--kota); }

/* The parent firm on the group page gets a quiet accent edge */
.card.is-parent { border-color: rgba(153,90,38,.35); box-shadow: inset 3px 0 0 var(--sand); }

/* Feature list */
.feature {
  padding: 1.7rem 0 0;
  border-top: 2px solid var(--ink);
}
.feature .num {
  font-family: var(--font-display); font-size: .8rem; color: var(--sand);
  letter-spacing: .1em; display: block; margin-bottom: .8rem;
}
.feature h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.feature p { font-size: .9rem; color: var(--ink-muted); margin: 0; }
.bg-dark .feature { border-top-color: var(--sand-hi); }
.bg-dark .num, .bg-dark .feature .num { color: var(--sand-hi); }
.bg-dark .feature p { color: rgba(247,244,238,.72); }

/* Tick list */
.ticks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .72rem; }
.ticks li {
  position: relative; padding-left: 1.7rem;
  font-size: .93rem; color: var(--ink-muted);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--sand);
}
.ticks strong { color: var(--ink); font-weight: 600; }
.bg-dark .ticks li { color: rgba(247,244,238,.76); }
.bg-dark .ticks strong { color: var(--paper); }

/* --- 9. Spec tables ------------------------------------------------------ */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-soft);            /* owns its colour; never inherits from .bg-dark */
}
.spec-table { min-width: 520px; font-size: .885rem; }
.spec-table th, .spec-table td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-soft); }
.spec-table thead th {
  background: var(--paper-2);
  font-size: .69rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover { background: var(--paper); }
.spec-table td:first-child { font-weight: 600; color: var(--ink); }

/* On a phone a 520px table cannot be read three columns at a time, and the
   column that fell off the edge was the one carrying the polish rate. Below
   640px each row becomes its own block of label-and-value lines, so nothing
   is off screen and nothing hides under the floating buttons. main.js puts
   the column headings on the cells; without it the table simply scrolls
   sideways as before. */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }
  .spec-table.is-stackable { min-width: 0; display: block; font-size: .92rem; }
  .spec-table.is-stackable thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .spec-table.is-stackable tbody { display: block; }
  .spec-table.is-stackable tbody tr {
    display: block; padding: .2rem 0 .55rem;
    border-bottom: 1px solid var(--line);
  }
  .spec-table.is-stackable tbody tr:last-child { border-bottom: 0; }
  .spec-table.is-stackable td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .3rem 1.05rem; border-bottom: 0; text-align: right;
  }
  .spec-table.is-stackable td[data-empty] { display: none; }
  .spec-table.is-stackable td::before {
    content: attr(data-label);
    flex: 0 1 auto; text-align: left;
    font-size: .69rem; letter-spacing: .11em; text-transform: uppercase;
    font-weight: 700; color: var(--ink-muted);
  }
  /* the size is the row's heading, so it reads as one line, not a pair */
  .spec-table.is-stackable td:first-child {
    display: block; text-align: left;
    padding-top: .7rem; padding-bottom: .35rem;
    font-family: var(--font-display); font-size: 1.12rem; font-weight: 400;
  }
  .spec-table.is-stackable td:first-child::before { content: none; }
}

.keyvals { display: grid; gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.keyvals div {
  display: grid; grid-template-columns: 40% 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: .9rem;
}
.keyvals dt, .keyvals div > :first-child { color: var(--ink-muted); }
.keyvals div > :last-child { color: var(--ink); font-weight: 500; }
/* Same block on a dark section: invert, don't inherit near-black */
.bg-dark .keyvals, .cta-band .keyvals { border-top-color: var(--line-dark); }
.bg-dark .keyvals div, .cta-band .keyvals div { border-bottom-color: var(--line-dark); }
.bg-dark .keyvals div > :first-child { color: rgba(247,244,238,.68); }
.bg-dark .keyvals div > :last-child { color: var(--paper); }
.bg-dark a.inline-link, .cta-band a.inline-link,
.bg-dark .keyvals a.inline-link { color: var(--sand-hi); border-bottom-color: rgba(208,139,78,.45); }
.bg-dark .callout a.inline-link { color: var(--sand); border-bottom-color: rgba(153,90,38,.4); }
/* Spec tables on a dark section keep their own light card treatment */
.bg-dark .table-wrap { border-color: var(--line-dark); color: var(--ink-soft); }
.bg-dark .spec-table td, .bg-dark .spec-table th { color: var(--ink-soft); }
.bg-dark .spec-table td:first-child, .bg-dark .spec-table thead th { color: var(--ink); }
.bg-dark .callout { color: var(--ink-soft); }
.bg-dark .callout h4 { color: var(--ink); }

/* --- 10. Gallery --------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.filter-btn {
  padding: .5rem 1rem; border: 1px solid var(--line); background: transparent;
  border-radius: 100px; font-size: .8rem; font-weight: 500; cursor: pointer;
  color: var(--ink-muted);
  transition: all .3s var(--ease);
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Masonry, not a cropped grid: every photograph keeps its own natural shape
   (a wide yard shot stays wide, a tall slab shot stays tall) so nothing is
   cropped out of view just to force a square. CSS columns give the Pinterest-
   style fill; break-inside:avoid stops a photo splitting across columns. */
.gallery-grid {
  columns: 250px;
  column-gap: .85rem;
}
/* With 121 photographs, a single column on a phone made this page 46 screens
   long. Two columns halves it and the stone is still perfectly judgeable —
   and every image opens full size in the lightbox anyway. */
@media (max-width: 700px) {
  .gallery-grid { columns: 2; column-gap: .6rem; }
  .gallery-grid .gallery-item { margin-bottom: .6rem; }
}
.gallery-item {
  margin: 0 0 .85rem;   /* <figure> defaults to 1em 40px, which broke the grid on phones */
  position: relative; overflow: hidden; border-radius: var(--radius);
  cursor: zoom-in; background: var(--paper-3);
  border: 0; padding: 0; display: block; width: 100%;
  break-inside: avoid;
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform .8s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }
/* The caption IS the point — every photograph is labelled with the name we
   call that stone, so it stays on screen rather than waiting for a hover
   that never happens on a phone. */
/* The caption IS the point — every photograph is labelled with the name we
   call that stone, so it stays on screen rather than waiting for a hover that
   never happens on a phone. A solid band behind the text (rather than the tail
   of a gradient) keeps it legible over a pale slab as well as a dark one. */
.gallery-item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: .6rem .95rem .68rem;
  background: rgba(17,19,22,.92);
  color: var(--paper); font-size: .8rem; line-height: 1.35; text-align: left;
}
/* soft feather so the band does not cut across the photo as a hard line */
.gallery-item figcaption::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 2.6rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,19,22,0), rgba(17,19,22,.92));
}
.gallery-item[hidden] { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,16,18,.95);
  display: none; align-items: center; justify-content: center;
  padding: 3rem 1.2rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 100%); max-height: 82vh; object-fit: contain; border-radius: var(--radius); }
.lightbox-cap { position: absolute; bottom: 1.4rem; left: 0; right: 0; text-align: center; color: rgba(247,244,238,.82); font-size: .85rem; }
.lightbox-close {
  position: absolute; top: 1.1rem; right: 1.2rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(247,244,238,.1); border: 1px solid rgba(247,244,238,.2);
  color: var(--paper); font-size: 1.2rem; cursor: pointer;
  display: grid; place-items: center;
}
.lightbox-close:hover { background: rgba(247,244,238,.2); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(247,244,238,.1); border: 1px solid rgba(247,244,238,.2);
  color: var(--paper); cursor: pointer; font-size: 1.1rem;
  display: grid; place-items: center;
}
.lightbox-nav:hover { background: rgba(247,244,238,.2); }
.lb-prev { left: 1rem; } .lb-next { right: 1rem; }

/* --- 11. Forms ----------------------------------------------------------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.15rem; }
.field > label, .field .group-label {
  display: block; margin-bottom: .42rem;
  font-size: .785rem; font-weight: 600; letter-spacing: .045em;
  text-transform: uppercase; color: var(--ink);
}
.field > label.checkline {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .88rem; color: var(--ink-muted);
}
.field label .req { color: var(--sand); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .78rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .93rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E635F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sand); background: var(--white);
  box-shadow: 0 0 0 3px rgba(153,90,38,.14);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field-hint { font-size: .78rem; color: var(--ink-muted); margin-top: .35rem; }
.checkline { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--ink-muted); }
.checkline input { width: auto; margin-top: .28rem; flex: none; accent-color: var(--sand); }
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; }
/* Input stays full-size and focusable for assistive tech; the span is the visible control */
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: block; padding: .5rem .95rem; border: 1px solid var(--line);
  border-radius: 100px; font-size: .82rem; cursor: pointer;
  transition: all .25s var(--ease); color: var(--ink-muted);
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(153,90,38,.3); }
.form-note { font-size: .8rem; color: var(--ink-muted); margin-top: 1rem; }

/* --- 12. Contact / info blocks ------------------------------------------ */
.info-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.6rem;
}
.info-card h4 { margin-bottom: .3rem; }
.info-card .role { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--sand); margin-bottom: .9rem; }
.info-card a { display: block; font-size: .92rem; color: var(--ink-soft); padding: .18rem 0; }
.info-card a:hover { color: var(--sand); }
.avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--kota-soft); color: var(--kota);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.15rem;
  margin-bottom: 1rem;
}
.avatar-photo {
  width: 76px; height: 76px; border-radius: 50%;
  object-fit: cover; object-position: center 22%;
  margin-bottom: 1.1rem;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-sm);
}

.map-embed { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }

/* --- 13. Article / prose ------------------------------------------------- */
.prose { font-size: 1.03rem; line-height: 1.75; color: var(--ink-soft); }
.prose h2 { margin-top: 2.6rem; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.prose h3 { margin-top: 2rem; font-size: 1.24rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.3em; }
.prose li { margin-bottom: .55em; }
.prose img { border-radius: var(--radius); margin: 2rem 0; }
.prose blockquote {
  margin: 2rem 0; padding: .3rem 0 .3rem 1.5rem;
  border-left: 3px solid var(--sand);
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1.5;
  color: var(--ink); font-style: italic;
}
.prose .table-wrap { margin: 2rem 0; }
.callout {
  background: var(--sand-soft); border-left: 3px solid var(--sand);
  padding: 1.2rem 1.4rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 2rem 0; font-size: .95rem;
}
.callout h4 { margin-bottom: .4rem; color: var(--ink); }
/* The rate-list disclaimer. Same shape as a callout, stronger edge, so a
   buyer comparing quotations cannot miss that the figures are indicative. */
.callout.is-warn { background: #FBF0E4; border-left-color: #B4541B; }
.callout.is-warn h4 { color: #8A3F14; }

.post-meta {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  font-size: .78rem; letter-spacing: .05em; color: rgba(247,244,238,.72);
  margin-top: 1.4rem;
}
.post-meta .dot { opacity: .4; }

/* --- 14. Accordion / FAQ ------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-family: var(--font-display); font-size: 1.13rem; color: var(--ink);
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--sand); }
.faq summary::after {
  content: "+"; position: absolute; right: .3rem; top: 1.15rem;
  font-family: var(--font-body); font-size: 1.35rem; font-weight: 300; color: var(--ink-muted);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 2.5rem 1.5rem 0; font-size: .95rem; color: var(--ink-muted); }

/* --- 15. CTA band -------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; top: -40%; right: -8%;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(178,106,50,.30), transparent 68%);
}
.cta-band .wrap { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 5rem); }
.cta-band h2 { color: var(--paper); max-width: 18ch; }
.cta-band p { color: rgba(247,244,238,.8); max-width: 48ch; }
.cta-inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }

/* --- 16. Footer ---------------------------------------------------------- */
.site-footer {
  background: #101214;
  color: rgba(247,244,238,.7);
  padding-block: clamp(3rem, 6vw, 4.4rem) 0;
  font-size: .875rem;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: 3rem;
}
/* Second footer row: address, email, phone, social. Its column ratio used to
   be set inline, which beat the media queries below and forced four columns
   onto a phone. It lives here now so it collapses like the row above it. */
.footer-top.is-contact {
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  border-top: 1px solid rgba(247,244,238,.1);
  padding-top: 2.4rem; padding-bottom: 2.4rem;
}
@media (max-width: 900px) { .footer-top, .footer-top.is-contact { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-top, .footer-top.is-contact { grid-template-columns: 1fr; } }
.site-footer h5 {
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper);
  margin: 0 0 1.1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-links a { color: rgba(247,244,238,.72); transition: color .25s var(--ease); }
.footer-links a:hover { color: var(--sand-hi); }
.footer-brand .brand-name { color: var(--paper); }
.footer-brand .brand-star { color: var(--paper); border-bottom-color: #C6474D; }
.footer-brand .brand-sub { color: rgba(247,244,238,.72); }
.footer-brand p { margin-top: 1.1rem; max-width: 34ch; line-height: 1.65; }
.footer-bottom {
  border-top: 1px solid rgba(247,244,238,.1);
  padding-block: 1.5rem 1.8rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  justify-content: space-between; align-items: center;
  font-size: .78rem; color: rgba(247,244,238,.6);
}
.footer-bottom a:hover { color: var(--sand-hi); }

/* Full Star Group lockup, used where the whole wordmark should appear */
.brand-lockup {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.6rem;
  max-width: 300px;
}
.brand-lockup img { width: 100%; height: auto; }
.bg-dark .brand-lockup { border-color: transparent; }

/* --- 16b. Social links ---------------------------------------------------- */
.social-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.3rem; }
.social-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .25s var(--ease);
}
.social-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: translateY(-2px); }
.social-row.is-footer .social-btn { border-color: rgba(247,244,238,.18); color: rgba(247,244,238,.65); }
.social-row.is-footer .social-btn:hover { background: var(--sand); border-color: var(--sand); color: #fff; }
.social-row.is-lg .social-btn { width: 46px; height: 46px; }

.social-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.social-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.social-card .ic {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
}
.social-card .ic.fb { background: #1877F2; }
.social-card .ic.gg { background: #EA4335; }
.social-card .ic.wa { background: #25D366; }
.social-card .ic.yt { background: #FF0000; }
.social-card .ic.pin { background: #E60023; }
.social-card b { display: block; font-size: .93rem; color: var(--ink); font-weight: 600; }
.social-card span { display: block; font-size: .8rem; color: var(--ink-muted); margin-top: .1rem; }

.video-frame {
  border-radius: var(--radius); overflow: hidden; background: var(--ink);
  max-width: 380px; margin-inline: auto; box-shadow: var(--shadow-md);
}
.video-frame video { display: block; width: 100%; height: auto; }

/* --- 17. Floating actions ------------------------------------------------ */
.float-actions {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
  display: flex; flex-direction: column; gap: .6rem;
}
.fab {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease);
}
.fab:hover { transform: scale(1.07); }
.fab-wa { background: #25D366; }
.fab-call { background: var(--ink); }
.fab svg { width: 24px; height: 24px; fill: #fff; }
@media (min-width: 1081px) { .float-actions { right: 1.6rem; bottom: 1.6rem; } }
/* On a phone the four buttons stacked into a 250px column pinned to the right
   edge — exactly where a table's figures sit, so the polish rates on the rate
   list were sitting underneath them. Laid out along the bottom instead they
   take a single short band, the right edge is free, and the page gets enough
   bottom padding that nothing is permanently covered. */
@media (max-width: 640px) {
  .float-actions {
    flex-direction: row; align-items: center;
    right: .7rem; bottom: .7rem; gap: .5rem;
  }
  .float-actions .fab, .float-actions .fab-calc {
    width: 46px; height: 46px; min-width: 46px; min-height: 46px;
  }
  body { padding-bottom: 4.2rem; }
}

/* --- 18. Misc ------------------------------------------------------------ */
.figure-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
.figure-stack img { border-radius: var(--radius); width: 100%; object-fit: cover; }
/* These three force an aspect ratio, so they MUST also set object-fit. Without
   it the browser default (fill) stretches the photograph to the ratio instead
   of cropping to it — a 4:3 slab shown in a 16:10 box came out 20% too wide,
   and a square one in the same box 60% too wide. Stone photographed square
   looked oblong, which is about the worst thing a stone catalogue can do.
   The rule lives on the class, not on a parent, so it holds everywhere the
   class is used. */
.img-tall, .img-wide, .img-square { object-fit: cover; width: 100%; }
.img-tall { aspect-ratio: 3 / 4; }
.img-wide { aspect-ratio: 16 / 10; }
.img-square { aspect-ratio: 1 / 1; }
.frame { border-radius: var(--radius); overflow: hidden; background: var(--paper-3); }
/* A caption sitting inside a .frame is on the light frame background whatever
   section it is in, so it owns its colour and never inherits from .bg-dark. */
.frame figcaption, .frame .tiny, .frame .muted { color: var(--ink-soft); }

/* Captioned shot: the caption sits OUTSIDE the frame, on the section
   background, so it takes the section's text colour. */
.shot { margin: 0; }
.shot-cap {
  margin-top: .55rem;
  font-size: .82rem; line-height: 1.5;
  color: var(--ink-muted);
}
.bg-dark .shot-cap { color: rgba(247,244,238,.78); }

.badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.badge {
  font-size: .72rem; letter-spacing: .07em;
  padding: .34rem .75rem; border-radius: 100px;
  background: var(--paper-2); color: var(--ink-muted);
  border: 1px solid var(--line-soft);
}
.bg-dark .badge { background: rgba(247,244,238,.08); border-color: var(--line-dark); color: rgba(247,244,238,.7); }

/* Reveal only applies when JS is running, so content is never hidden without it */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 2px; }

@media print {
  .site-header, .mobile-nav, .float-actions, .cta-band, .site-footer { display: none !important; }
  body { background: #fff; }
}

/* --- Homepage stone categories ------------------------------------------- */
/* Five stone families as large buttons, each with its range listed under it.
   Five across on desktop; the count is deliberate, so the grid steps down
   3 -> 2 -> 1 rather than trying to keep five columns on a phone. */
.stone-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.stone-cat { display: flex; flex-direction: column; }

.stone-cat-btn {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease);
}
.stone-cat-btn:hover,
.stone-cat-btn:focus-visible {
  border-color: var(--ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.stone-cat-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.stone-cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.stone-cat-btn:hover .stone-cat-media img { transform: scale(1.05); }

.stone-cat-label { display: block; padding: .95rem 1rem 1.05rem; }
.stone-cat-label b {
  display: block;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.06rem; line-height: 1.2; color: var(--ink);
  letter-spacing: -.012em;
}
.stone-cat-label em {
  display: block; margin-top: .38rem;
  font-style: normal; font-size: .8rem; line-height: 1.45;
  color: var(--ink-muted);
}
.stone-cat-go {
  display: inline-flex; align-items: center; gap: .38rem;
  margin-top: .7rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sand);
}
.stone-cat-btn:hover .stone-cat-go { gap: .6rem; }
.stone-cat-go svg { transition: transform .3s var(--ease); }
.stone-cat-btn:hover .stone-cat-go svg { transform: translateX(2px); }

.stone-cat-list {
  list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; gap: .3rem;
}
.stone-cat-list a {
  display: block; padding: .12rem 0;
  font-size: .815rem; line-height: 1.4; color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease);
}
.stone-cat-list a:hover, .stone-cat-list a:focus-visible {
  color: var(--sand); border-bottom-color: rgba(153,90,38,.35);
}

@media (max-width: 1080px) { .stone-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .stone-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* On a phone a full-width 4:3 photo per option would mean scrolling a whole
   screen per option, which defeats the point of a chooser. Below 430px the
   tile turns into a compact row — thumbnail left, name and range right — so
   all eight categories are reachable in a few thumb-flicks. */
@media (max-width: 430px) {
  .stone-cats { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .stone-cat-btn { display: flex; align-items: stretch; }
  .stone-cat-media {
    flex: none; width: 108px; aspect-ratio: 1 / 1; align-self: stretch; height: auto;
  }
  .stone-cat-label { flex: 1 1 auto; padding: .8rem .9rem .85rem; }
  .stone-cat-label b { font-size: 1.02rem; }
  .stone-cat-label em { margin-top: .25rem; font-size: .78rem; }
  .stone-cat-go { margin-top: .5rem; font-size: .72rem; }
  .stone-cat-list {
    margin-top: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .9rem;
  }
  .stone-cat-list a { font-size: .78rem; }
}

/* --- 19. Site search ------------------------------------------------------ */
.search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: none;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft); cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.search-toggle:hover { border-color: var(--ink); color: var(--ink); }
.search-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.search-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(15,16,18,.72);
  display: none; align-items: flex-start; justify-content: center;
  padding: min(14vh, 6.5rem) 1.2rem 2rem;
}
.search-overlay.is-open { display: flex; }
.search-panel {
  width: 100%; max-width: 640px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.1rem 1.1rem 1.25rem;
  max-height: 78vh;
  display: flex; flex-direction: column;
}
.search-field {
  display: flex; align-items: center; gap: .7rem; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .2rem .3rem .2rem .95rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search-field:focus-within { border-color: var(--sand); box-shadow: 0 0 0 3px rgba(153,90,38,.14); }
.search-field svg { flex: none; color: var(--ink-muted); }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: none;
  padding: .75rem .2rem; font-size: 1rem; color: var(--ink);
}
.search-field input:focus { outline: none; }
.search-field input::placeholder { color: var(--ink-muted); }
.search-close {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: none; color: var(--ink-muted);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.search-close:hover { background: var(--paper-2); color: var(--ink); }
.search-mic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: none; color: var(--ink-muted);
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.search-mic:hover { background: var(--paper-2); color: var(--ink); }
.search-mic.is-listening { color: #fff; background: #E4572E; animation: micPulse 1.2s infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(228,87,46,.45); } 50% { box-shadow: 0 0 0 6px rgba(228,87,46,0); } }
.search-hint { margin: .9rem .3rem 0; font-size: .78rem; color: var(--ink-muted); flex: none; }
.search-results { overflow-y: auto; margin-top: .3rem; }
.search-result {
  display: block; padding: .78rem .65rem; border-radius: var(--radius);
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s var(--ease);
}
.search-results .search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result.is-active { background: var(--paper-2); }
.search-result b {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); font-weight: 600;
}
.search-result b .cat {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sand); white-space: nowrap;
}
.search-result p { margin: .25rem 0 0; font-size: .82rem; color: var(--ink-muted); }
.search-empty { padding: 1.7rem .65rem; text-align: center; color: var(--ink-muted); font-size: .9rem; }
body.search-open { overflow: hidden; }

@media (max-width: 600px) {
  .search-overlay { padding: 0; }
  .search-panel { max-width: none; height: 100%; max-height: none; border-radius: 0; padding: .9rem .9rem 1rem; }
}

/* --- 20. Welcome toast ----------------------------------------------------- */
.welcome-toast {
  position: fixed; left: 1rem; right: 1rem; bottom: 9.5rem;
  z-index: 85;
  display: flex; align-items: flex-start; gap: .7rem;
  max-width: 420px; margin-inline: auto;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1rem 1rem 1.05rem 1.15rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
.welcome-toast.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear 0s;
}
.welcome-toast p { font-size: .85rem; line-height: 1.5; color: rgba(247,244,238,.9); margin: 0; }
.welcome-toast p strong { color: var(--paper); }
.welcome-toast-close {
  flex: none; width: 26px; height: 26px; margin-top: -.15rem;
  border: 0; border-radius: 50%; background: none; color: rgba(247,244,238,.7);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.welcome-toast-close:hover { background: rgba(247,244,238,.14); color: var(--paper); }

@media (min-width: 601px) {
  .welcome-toast { left: 1.4rem; right: auto; bottom: 1.4rem; margin-inline: 0; }
}
@media (min-width: 1081px) {
  .welcome-toast { left: 2rem; bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-toast { transition: opacity .01s linear, visibility 0s linear; transform: none; }
}

.welcome-toast-body { flex: 1; min-width: 0; }
.welcome-toast-video-btn {
  display: block; margin-top: .6rem;
  background: none; border: 1px solid rgba(247,244,238,.32); border-radius: 999px;
  color: var(--paper); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  padding: .4rem .85rem; cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.welcome-toast-video-btn:hover { background: rgba(247,244,238,.14); border-color: rgba(247,244,238,.55); }

/* --- 21. Welcome video: a small corner player, NOT a full-screen takeover ---
   It floats above the page in the bottom-left, leaves the whole site visible
   and clickable behind it, and never traps scroll. Deliberately no backdrop. */
.welcome-video-modal {
  position: fixed; z-index: 210;
  left: 1.1rem; bottom: 1.1rem;
  width: min(330px, calc(100vw - 2.2rem));
  display: none;
  border-radius: var(--radius); overflow: visible;
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.welcome-video-modal.is-open { display: block; }
.welcome-video-modal.is-open.is-shown { opacity: 1; transform: translateY(0); }
.welcome-video-modal .video-frame {
  width: 100%; position: relative;
  border-radius: var(--radius); overflow: hidden;
  background: #000; border: 1px solid rgba(247,244,238,.18);
}
.welcome-video-modal .video-frame video { display: block; width: 100%; height: auto; }
.welcome-video-modal-close {
  position: absolute; top: -11px; right: -11px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(247,244,238,.4);
  color: var(--paper); font-size: 1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; z-index: 3; padding: 0;
}
.welcome-video-modal-close:hover { background: #000; border-color: var(--paper); }
@media (min-width: 1081px) {
  .welcome-video-modal { left: 2rem; bottom: 2rem; width: 360px; }
}
/* On a phone the floating player sits above the call/WhatsApp buttons rather
   than on top of them. */
@media (max-width: 600px) {
  /* right: 5.2rem keeps the whole button column clear, the same reservation
     .install-bar and .install-tip already make. Without it the player covered
     the call, WhatsApp and calculator buttons and they could not be tapped. */
  .welcome-video-modal { left: .8rem; right: 5.2rem; bottom: 5.6rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-video-modal { transition: none; }
}
/* The toast keeps clear of the floating button column too. */
@media (max-width: 700px) {
  .welcome-toast { right: 5.2rem; margin-inline: 0; }
}
/* Shown only while the clip is auto-playing muted, so a first-time visitor has
   an obvious, easy way to turn sound on — a browser will not let a page play
   audio automatically without this kind of direct tap. */
.welcome-video-unmute {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(17,19,22,.86); border: 1px solid rgba(247,244,238,.45); border-radius: 999px;
  color: var(--paper); font-size: .78rem; font-weight: 600; white-space: nowrap;
  padding: .5rem 1rem; cursor: pointer; z-index: 2;
  display: flex; align-items: center; gap: .35rem;
  animation: welcomeUnmutePulse 1.8s ease-in-out infinite;
}
.welcome-video-unmute:hover { background: rgba(17,19,22,.95); }
.welcome-video-unmute[hidden] { display: none; }
@keyframes welcomeUnmutePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247,244,238,.25); }
  50% { box-shadow: 0 0 0 8px rgba(247,244,238,0); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-video-unmute { animation: none; }
}

/* --- 22. Home: centred search bar ------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.home-search {
  display: flex; align-items: center; gap: .5rem;
  max-width: 620px; margin: 0 auto clamp(2.2rem, 4vw, 3rem);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .4rem .4rem 1.1rem;
  box-shadow: 0 2px 10px rgba(21,23,26,.05);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.home-search:focus-within {
  border-color: var(--sand);
  box-shadow: 0 4px 18px rgba(21,23,26,.10);
}
.home-search-icon { flex: none; color: var(--ink-muted); }
.home-search input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: .95rem; color: var(--ink);
  padding: .55rem 0;
}
.home-search input::placeholder { color: var(--ink-muted); }
.home-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.home-search-btn {
  flex: none; border: 0; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: .85rem; font-weight: 600; letter-spacing: .02em;
  padding: .62rem 1.25rem; border-radius: 999px;
  transition: background .2s var(--ease);
}
.home-search-btn:hover { background: var(--clay); }
@media (max-width: 520px) {
  .home-search { padding-left: .9rem; gap: .35rem; }
  .home-search input { font-size: .9rem; }
  .home-search-btn { padding: .58rem .9rem; font-size: .8rem; }
}

/* --- 23. Home: compact finish chips ---------------------------------------- */
.finish-chips {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 2.2rem;
}
.finish-chip {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: rgba(247,244,238,.06); border: 1px solid rgba(247,244,238,.14);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.finish-chip:hover, .finish-chip:focus-visible {
  border-color: var(--sand); transform: translateY(-2px);
}
.finish-chip-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-3); }
.finish-chip-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.finish-chip:hover .finish-chip-media img { transform: scale(1.06); }
.finish-chip-name {
  display: block; padding: .6rem .75rem .7rem;
  font-size: .84rem; font-weight: 600; line-height: 1.3;
  color: var(--paper);
}
@media (max-width: 900px) { .finish-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .finish-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }

/* --- 24. Home: gallery preview (short, not the whole set) -------------------
   Explicit column counts rather than a min-width, so the preview never
   collapses into one very tall column on a phone. */
.gallery-grid.is-preview { columns: 3; column-gap: .7rem; }
.gallery-grid.is-preview .gallery-item { margin-bottom: .7rem; }
@media (min-width: 1081px) { .gallery-grid.is-preview { columns: 4; } }
@media (max-width: 700px)  { .gallery-grid.is-preview { columns: 2; } }
.tiny.is-centered, .muted.is-centered { text-align: center; margin-inline: auto; max-width: 68ch; }

/* --- 25. Compact card list on phones ---------------------------------------
   A grid marked .is-compact turns its cards side-on below 600px: a small fixed
   thumbnail on the left, the text on the right. Twelve stacked finish cards ran
   to seven screens of scrolling; side-on they fit in under three and the blurb
   and "best for" line are still fully readable, which two-up columns would not
   have managed at this width. */
@media (max-width: 600px) {
  .grid.is-compact { gap: .7rem; }
  .grid.is-compact .card { flex-direction: row; align-items: stretch; }
  .grid.is-compact .card-media {
    flex: 0 0 116px; width: 116px; aspect-ratio: auto; align-self: stretch;
  }
  .grid.is-compact .card-body { padding: .8rem .9rem .85rem; }
  .grid.is-compact .card-body h3 { font-size: 1.05rem; margin-bottom: .25rem; }
  .grid.is-compact .card-body p { font-size: .84rem; line-height: 1.45; margin-bottom: .45rem; }
  .grid.is-compact .card-body .tiny { font-size: .76rem; }
}

/* --- 26. Install-the-app bar ------------------------------------------------
   Sits above the call/WhatsApp buttons on a phone, bottom-right on desktop.
   Hidden by default and revealed from JS only when the browser reports the
   site is genuinely installable — so it never appears inside the installed
   app, and never offers something the browser cannot actually do. */
.install-bar {
  position: fixed; z-index: 190;
  /* Level with the call/WhatsApp buttons and stopping short of them, rather
     than stacked above: stacking put it directly under the welcome-video
     popup, and both can be on screen at once. */
  left: .8rem; right: 5.2rem; bottom: 1rem;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .8rem;
  background: var(--ink); color: var(--paper);
  border: 1px solid rgba(247,244,238,.18); border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  cursor: pointer;
}
.install-bar[hidden] { display: none; }
.install-icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: #1B3D6D; border-radius: 8px; }
.install-icon svg { width: 20px; height: 20px; display: block; }
.install-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.install-text b { font-size: .9rem; }
.install-text em { font-style: normal; font-size: .76rem; color: rgba(247,244,238,.72); }
.install-close {
  margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(247,244,238,.1); border: 1px solid rgba(247,244,238,.2);
  color: var(--paper); font-size: 1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.install-close:hover { background: rgba(247,244,238,.2); }
.install-tip {
  position: fixed; z-index: 190;
  left: .8rem; right: 5.2rem; bottom: 5.4rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; font-size: .85rem; line-height: 1.5;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}
.install-tip[hidden] { display: none; }
/* The floating buttons run along the bottom on a phone now, so the bar sits
   above them rather than beside a column that is no longer there. Stated
   after the rules above so it actually wins the cascade. */
@media (max-width: 640px) {
  .install-bar { left: .8rem; right: .8rem; bottom: 4.6rem; }
  .install-tip { left: .8rem; right: .8rem; bottom: 9.4rem; }
}
@media (min-width: 601px) {
  .install-bar { left: auto; right: 2rem; bottom: 2rem; width: 320px; }
  .install-tip { left: auto; right: 2rem; bottom: 7rem; width: 320px; }
}

/* --- 27. Language switch --------------------------------------------------- */
.lang-switch {
  flex: none;
  display: inline-flex; align-items: center;
  padding: .34rem .68rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .82rem; font-weight: 600; line-height: 1.2;
  color: var(--ink); white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lang-switch:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Below 1181px the burger takes over and the mobile menu carries its own
   language link, so the header one is hidden there.
   Between 1181px and 1360px the full nav, the phone number, the quote button
   and the language switch together overran a 1280px window by about 40px and
   pushed the whole page sideways. In that band the phone number gives way —
   it is still in the footer, on the contact page, and one tap away on the
   floating call button, whereas a hidden language switch would be unfindable. */
@media (max-width: 1180px) { .lang-switch { display: none; } }
@media (min-width: 1261px) and (max-width: 1500px) { .header-phone { display: none; } }
.mobile-nav .lang-switch { display: inline-flex; margin-top: 1rem; }

/* Devanagari needs a little more line height than Latin at the same size. */
html[lang^="hi"] body { line-height: 1.72; }
html[lang^="hi"] h1, html[lang^="hi"] h2, html[lang^="hi"] h3 { line-height: 1.32; }
html[lang^="hi"] .eyebrow { letter-spacing: .04em; }

/* --- Cost calculator (kota-stone-flooring-cost) --------------------------- */
.calc-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 1.6rem;
}
.calc-grid label {
  display: flex; flex-direction: column; gap: .4rem;
  font-size: .82rem; letter-spacing: .01em; color: var(--ink-muted);
}
.calc-grid input {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .68rem .8rem; background: var(--white);
  border: 1px solid var(--line); border-radius: 8px;
  width: 100%; -moz-appearance: textfield;
}
.calc-grid input:focus-visible { outline: 2px solid var(--sand); outline-offset: 1px; }
.calc-out { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.calc-empty { color: var(--ink-muted); font-size: .92rem; }
.calc-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
  margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px solid var(--ink);
  font-family: var(--font-display); font-size: 1.5rem; color: var(--ink);
}
.calc-total b { font-weight: 500; margin-right: .3rem; }
.calc-total em {
  font-family: var(--font-body); font-style: normal;
  font-size: .85rem; color: var(--ink-muted); letter-spacing: .01em;
}
.calc-grid select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .68rem .8rem; background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; width: 100%;
}
.calc-grid select:focus-visible { outline: 2px solid var(--sand); outline-offset: 1px; }
.calc-grid[hidden] { display: none; }
#weightCalc .calc-grid + .calc-grid { margin-top: -.4rem; }

/* --- App layer: enquiry list, offline download --------------------------- */
.btn-enquiry.is-added { background: var(--kota); border-color: var(--kota); color: var(--white); }
.enq-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; margin-left: .35rem;
  border-radius: 999px; background: var(--sand); color: var(--white);
  font-size: .68rem; font-weight: 700; line-height: 1; font-family: var(--font-body);
}
/* Same specificity trap as above: without this the count bubble showed even
   when the enquiry list was empty. */
.enq-badge[hidden] { display: none; }
.enq-item {
  padding: 1.4rem 0; border-bottom: 1px solid var(--line);
}
.enq-item:first-child { padding-top: 0; }
.enq-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.enq-head h3 { margin: 0; flex: 1; font-size: 1.12rem; }
.enq-head h3 a { color: inherit; text-decoration: none; }
.enq-head h3 a:hover { color: var(--sand); }
.enq-remove {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-muted); font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.enq-remove:hover { border-color: var(--sand); color: var(--sand); }
.enq-item .calc-grid { margin-bottom: 0; }
.dl-progress { width: 100%; height: 6px; margin-top: 1rem; }
.dl-status { display: block; margin-top: .6rem; font-size: .85rem; color: var(--ink-muted); }
.bg-dark .dl-status { color: rgba(247,244,238,.72); }

/* --- Stone process videos ------------------------------------------------ */
/* Purely additive: new classes only, nothing existing is redefined. The clips
   are shot portrait on a phone, so the column is capped rather than letting a
   9:16 video stretch the full width of a desktop card. */
.proc-item { display: grid; gap: clamp(1.1rem, 3vw, 2.4rem); align-items: start; }
@media (min-width: 860px) {
  .proc-item { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
}
.proc-item + .proc-item {
  margin-top: clamp(2.2rem, 5vw, 3.6rem);
  padding-top: clamp(2.2rem, 5vw, 3.6rem);
  border-top: 1px solid var(--line);
}
.proc-media { max-width: 330px; width: 100%; }
.proc-video {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: #000;
  box-shadow: var(--shadow-sm);
}
.proc-meta { margin: .5rem 0 0; }
.proc-text h2 { margin-top: 0; }
.proc-text .eyebrow { margin-bottom: .35rem; }