/* ==========================================================================
   HIND GRANITES & TILES — "GLASS" DESIGN LAYER
   --------------------------------------------------------------------------
   Loaded only on the pages listed in hind_glass_templates(), each of which
   carries the body class .hg-page. Everything is namespaced .hg-* so it can
   never leak into a page still on the old design, and the handful of
   overrides of existing theme markup are all scoped to body.hg-page.

   Type pairing: Manrope (UI / body) + Instrument Serif (display accents).
   Accent stays the brand oxblood #7E2233 so the logo and the rest of the
   site still agree with the homepage.

   Breakpoints used throughout:
     1400  wide desktop caps
     1200  laptop
     1024  tablet landscape / nav collapses to the drawer
      768  tablet portrait
      560  large phone
      400  small phone
   ========================================================================== */

body.hg-page {
  --hg-accent:      #7e2233;
  --hg-ink:         #1c1b1a;
  --hg-ink-soft:    #4a4640;
  --hg-ink-muted:   #5c5852;
  --hg-ink-faint:   #6b6761;
  --hg-ink-ghost:   #8b8781;
  --hg-paper:       #ffffff;
  --hg-paper-warm:  #fbfaf9;

  /* Glass recipe. One place to retune the whole page. */
  --hg-glass:       rgba(255, 255, 255, 0.5);
  --hg-glass-up:    rgba(255, 255, 255, 0.62);
  --hg-glass-solid: rgba(255, 255, 255, 0.9);
  --hg-edge:        1px solid rgba(255, 255, 255, 0.7);
  --hg-hairline:    rgba(28, 27, 26, 0.08);
  --hg-blur:        blur(26px) saturate(160%);
  --hg-blur-lite:   blur(16px) saturate(140%);

  --hg-lift:        0 12px 50px rgba(28, 27, 26, 0.06);
  --hg-lift-up:     0 20px 60px rgba(28, 27, 26, 0.1);
  --hg-lift-deep:   0 24px 80px rgba(28, 27, 26, 0.12);

  --hg-r-sm:   14px;
  --hg-r-md:   20px;
  --hg-r-lg:   28px;
  --hg-r-xl:   36px;

  --hg-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --hg-gutter: clamp(20px, 4vw, 48px);
  --hg-max:    1400px;

  --hg-sans:   "Manrope", var(--font-body, -apple-system), "Helvetica Neue", Helvetica, sans-serif;
  --hg-serif:  "Instrument Serif", Georgia, "Times New Roman", serif;

  background: var(--hg-paper);
  background-image:
    radial-gradient(100% 50% at 85% 6%, rgba(246, 244, 241, 0.9) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(80% 45% at 5% 52%, rgba(244, 241, 237, 0.75) 0%, rgba(255, 255, 255, 0) 70%);
  background-attachment: fixed;
  color: var(--hg-ink);
  font-family: var(--hg-sans);
  overflow-x: clip;
}

/* backdrop-filter unsupported (older Firefox, forced-colors): fall back to a
   near-opaque warm ground rather than leaving unreadable translucency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.hg-page {
    --hg-glass:       rgba(253, 252, 251, 0.97);
    --hg-glass-up:    rgba(253, 252, 251, 0.98);
    --hg-glass-solid: #ffffff;
  }
}

body.hg-page ::selection { background: rgba(126, 34, 51, 0.14); }

/* The pill is fixed, so an in-page jump would otherwise land its target
   underneath it. Keep the offset a little larger than the pill's own height. */
html:has(body.hg-page) { scroll-padding-top: 100px; }
body.hg-page [id] { scroll-margin-top: 100px; }

@media (max-width: 560px) {
  html:has(body.hg-page) { scroll-padding-top: 84px; }
  body.hg-page [id] { scroll-margin-top: 84px; }
}


/* ==========================================================================
   1. HEADER — the theme's glass bar becomes a floating pill
   ========================================================================== */

body.hg-page .site-header {
  position: fixed;
  inset-inline: 0;
  top: 14px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-block-end: 0;
  box-shadow: none;
  padding-inline: 16px;
  transition: top 300ms var(--hg-ease);
}

body.hg-page .site-header > .container {
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
  padding: 0;
}

body.hg-page .site-header__inner {
  min-height: 0;
  gap: 18px;
  padding: 10px 12px 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: var(--hg-edge);
  box-shadow: 0 10px 40px rgba(28, 27, 26, 0.07);
  transition: background 300ms ease, padding 300ms ease, box-shadow 300ms ease;
}

body.hg-page .site-header.is-scrolled { top: 10px; }

body.hg-page .site-header.is-scrolled .site-header__inner {
  background: rgba(255, 255, 255, 0.82);
  padding: 6px 10px 6px 16px;
  box-shadow: 0 14px 44px rgba(28, 27, 26, 0.1);
}

/* Raised 20% on 2026-09-11 at the client's request (30px -> 36px). */
body.hg-page .site-header .site-logo img { height: 36px; width: auto; }

body.hg-page .site-header .nav { gap: 2px; }

body.hg-page .site-header .nav__link {
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hg-ink);
}

body.hg-page .site-header .nav__link::after { display: none; }

body.hg-page .site-header .nav__link:hover,
body.hg-page .site-header .nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.85);
  color: var(--hg-accent);
}

body.hg-page .site-header .mega {
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(32px) saturate(175%);
  -webkit-backdrop-filter: blur(32px) saturate(175%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 26px 70px rgba(28, 27, 26, 0.12);
  margin-block-start: 10px;
}

body.hg-page .site-header .btn--primary {
  border-radius: 999px;
  background: rgba(24, 23, 22, 0.9);
  border-color: transparent;
  color: #f7f5f2;
  box-shadow: 0 6px 20px rgba(28, 27, 26, 0.18);
}

body.hg-page .site-header .btn--primary:hover {
  background: rgba(24, 23, 22, 1);
  transform: translateY(-1px);
}

body.hg-page .site-header .header-search-btn,
body.hg-page .site-header .nav-toggle { border-radius: 999px; }

/* The fixed pill no longer occupies flow space, so the hero carries the
   clearance itself. */
@media (max-width: 1023px) {
  body.hg-page .site-header__inner { padding: 8px 10px 8px 14px; }
  body.hg-page .site-header.is-scrolled .site-header__inner { padding: 6px 8px 6px 12px; }
}

@media (max-width: 400px) {
  body.hg-page .site-header { padding-inline: 10px; top: 10px; }
  body.hg-page .site-header .site-logo img { height: 31px; }
}


/* ==========================================================================
   2. SHARED PRIMITIVES
   ========================================================================== */

.hg-section {
  padding: clamp(56px, 7vw, 110px) var(--hg-gutter);
}

.hg-section--tight  { padding-block: 0 clamp(56px, 7vw, 100px); }
.hg-section--intro  { padding-block: clamp(56px, 7vw, 120px); }

.hg-wrap { max-width: var(--hg-max); margin-inline: auto; }
.hg-wrap--wide { max-width: 1660px; }

.hg-eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hg-accent);
}

.hg-h2 {
  margin: 0 0 16px;
  font-family: var(--hg-sans);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

.hg-h2 em,
.hg-serif {
  font-family: var(--hg-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.hg-lede {
  margin: 0;
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--hg-ink-soft);
  max-width: 58ch;
  text-wrap: pretty;
}

.hg-glass-panel {
  background: var(--hg-glass);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
  border-radius: var(--hg-r-xl);
}

/* --- Buttons ------------------------------------------------------------- */

.hg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: transform 240ms var(--hg-ease), background 240ms ease,
              box-shadow 240ms ease, opacity 240ms ease;
}

.hg-btn--dark {
  background: rgba(24, 23, 22, 0.9);
  color: #f7f5f2;
  box-shadow: 0 10px 30px rgba(28, 27, 26, 0.18);
}

.hg-btn--dark:hover,
.hg-btn--dark:focus-visible {
  background: rgba(24, 23, 22, 1);
  color: #f7f5f2;
  transform: translateY(-2px);
}

.hg-btn--ghost {
  background: var(--hg-glass);
  color: var(--hg-ink);
  border-color: rgba(28, 27, 26, 0.12);
  backdrop-filter: var(--hg-blur-lite);
  -webkit-backdrop-filter: var(--hg-blur-lite);
}

.hg-btn--ghost:hover,
.hg-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  color: var(--hg-ink);
  transform: translateY(-2px);
}

.hg-btn--sm { padding: 13px 24px; font-size: 14px; }

/* --- Focus --------------------------------------------------------------- */

body.hg-page a:focus-visible,
body.hg-page button:focus-visible,
body.hg-page input:focus-visible,
body.hg-page select:focus-visible,
body.hg-page textarea:focus-visible {
  outline: 2px solid var(--hg-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Scroll reveal ------------------------------------------------------- */

.js .hg-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--hg-ease), transform 700ms var(--hg-ease);
  transition-delay: var(--hg-delay, 0ms);
}

.js .hg-reveal.is-in { opacity: 1; transform: none; }


/* ==========================================================================
   3. HERO — full-bleed slab with a glass caption and a thumbnail rail
   ========================================================================== */

.hg-hero {
  padding: clamp(96px, 12vh, 140px) clamp(12px, 2.4vw, 28px) clamp(16px, 2vw, 28px);
}

.hg-hero__frame {
  position: relative;
  max-width: 1660px;
  margin-inline: auto;
  height: min(80vh, 780px);
  min-height: 520px;
  border-radius: var(--hg-r-xl);
  overflow: hidden;
  box-shadow: var(--hg-lift-deep);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #ede7e1;
  isolation: isolate;
}

.hg-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 400ms ease;
}

.hg-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0) 34%,
    rgba(38, 35, 32, 0.38) 100%);
  pointer-events: none;
}

.hg-hero__bar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: clamp(12px, 2vw, 28px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.hg-hero__caption {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 12px 44px rgba(28, 27, 26, 0.14);
  min-width: 0;
}

.hg-hero__swatch {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--hg-r-sm);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: block;
}

.hg-hero__cat {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hg-accent);
}

.hg-hero__name {
  display: block;
  margin-block-start: 3px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hg-ink);
}

.hg-hero__rail {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 44px rgba(28, 27, 26, 0.14);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hg-hero__rail::-webkit-scrollbar { display: none; }

.hg-thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 56px;
  padding: 0;
  border-radius: var(--hg-r-md);
  border: 2px solid rgba(255, 255, 255, 0.35);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.72;
  transition: transform 240ms ease, border-color 240ms ease,
              opacity 240ms ease, box-shadow 240ms ease;
}

.hg-thumb:hover { transform: translateY(-2px); opacity: 1; }

.hg-thumb.is-active {
  border-color: rgba(255, 255, 255, 0.95);
  opacity: 1;
  box-shadow: 0 6px 18px rgba(28, 27, 26, 0.16);
}

@media (max-width: 1024px) {
  .hg-hero__frame { height: min(72vh, 640px); min-height: 460px; border-radius: 28px; }
}

@media (max-width: 768px) {
  .hg-hero { padding-block-start: clamp(84px, 14vh, 110px); }
  .hg-hero__frame { height: min(70vh, 560px); min-height: 400px; border-radius: 24px; }
  .hg-hero__bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .hg-hero__caption { align-self: flex-start; }
  .hg-hero__rail { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .hg-hero__frame { height: 62vh; min-height: 360px; border-radius: 20px; }
  .hg-hero__caption { padding: 10px 16px 10px 10px; gap: 11px; border-radius: 18px; }
  .hg-hero__swatch { width: 38px; height: 38px; border-radius: 11px; }
  .hg-hero__name { font-size: 16px; }
  .hg-hero__cat { font-size: 10px; }
  .hg-thumb { width: 60px; height: 46px; border-radius: 14px; }
  .hg-hero__rail { padding: 8px; border-radius: 18px; gap: 8px; }
}

@media (max-width: 400px) {
  .hg-hero { padding-inline: 10px; }
  .hg-hero__frame { min-height: 330px; }
  .hg-hero__bar { padding: 10px; }
}


/* ==========================================================================
   4. RED MAKRANA — the stone, its name, nothing else
   --------------------------------------------------------------------------
   Stripped back 2026-08-28. The two body paragraphs went, so the section is
   now a single visual statement and its height comes from the stone rather
   than from a column of text.

   The stone sits on plain page ground: no glass panel, no border, no shadow,
   and no pointer-tracking glow. "Just plain white" was the brief.
   ========================================================================== */

.hg-makrana {
  padding-block: clamp(40px, 5vw, 80px);
}

.hg-makrana__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
}

.hg-makrana__stone {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The stone is a STILL photograph. The drop-and-bounce loop that ran here was
   removed on 2026-09-14 at the client's request, along with its keyframes, the
   observer in glass.js that toggled it, and the transform-origin and
   will-change that only existed to serve it. Nothing here animates now. */
.hg-makrana__stone img {
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
}

/* The copy is centred against the middle of the stone rather than sitting at
   the top of its column — with only two lines left, top alignment stranded it
   against a tall image. */
.hg-makrana__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hg-makrana__title {
  margin: 0 0 12px;
  font-family: var(--hg-serif);
  font-size: clamp(38px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.hg-makrana__tagline {
  margin: 0;
  font-family: var(--hg-serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.3;
  color: var(--hg-ink-muted);
  text-wrap: balance;
}

@media (max-width: 900px) {
  .hg-makrana__grid {
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 28px);
    justify-items: center;
    text-align: center;
  }

  .hg-makrana__stone img { max-width: 460px; }
  .hg-makrana__copy { align-items: center; }
}

@media (max-width: 560px) {
  .hg-makrana { padding-block: clamp(28px, 6vw, 48px); }
  .hg-makrana__stone img { max-width: 340px; }
}

/* --- Typed headline ------------------------------------------------------
   The name types itself in on first sight. Gated behind .js so a visitor
   without JavaScript sees the finished heading rather than nothing.
   -------------------------------------------------------------------------- */

.hg-type {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
}

.js .hg-type { max-width: 0; overflow: hidden; }

.hg-type--accent { color: var(--hg-accent); }

.hg-caret {
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-inline-start: 6px;
  vertical-align: baseline;
  background: var(--hg-accent);
  animation: hgCaret 900ms steps(1, end) infinite;
}

.hg-caret.is-done { opacity: 0; animation: none; }

@keyframes hgCaret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }


/* --- Positioning line ----------------------------------------------------
   A centred statement above the collections. The strapline is flanked by two
   short rules drawn as pseudo-elements on a flex row, so they always meet the
   text no matter how long it is or how it wraps.
   -------------------------------------------------------------------------- */

.hg-positioning {
  padding-block: clamp(40px, 6vw, 88px) clamp(8px, 1.5vw, 20px);
}

.hg-positioning__inner { text-align: center; }

.hg-positioning__title {
  /* One line at every width, on request (2026-09-11). The 22ch cap was what
     broke a 42-character line in two. Size is driven by the viewport with no
     lower floor, because a floor combined with nowrap is exactly what would
     push the line off the side of a phone. */
  margin: 0 auto 10px;
  max-width: none;
  font-size: min(4.2vw, 58px);
  white-space: nowrap;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--hg-ink);
}

/* Supporting line beneath the title. Also single-line. */
.hg-positioning__sub {
  margin: 0 auto 16px;
  font-family: var(--hg-serif);
  font-style: italic;
  font-size: min(2.5vw, 28px);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--hg-ink-muted);
}

.hg-positioning__title em {
  font-family: var(--hg-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.hg-positioning__strap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
  margin: 0;
  font-size: clamp(11px, 1.1vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hg-ink-faint);
  /* base.css caps every <p> at var(--measure) for readable prose. This is not
     prose, it is a rule-flanked label, and the cap left the text 5px short of
     the width it needed — so it broke in two under the heading while the
     client's reference has it on one line. */
  max-width: none;
  white-space: nowrap;
}

.hg-positioning__strap::before,
.hg-positioning__strap::after {
  content: "";
  flex: 0 1 clamp(28px, 6vw, 64px);
  height: 1px;
  background: rgba(28, 27, 26, 0.28);
}

.hg-positioning__strap span { text-wrap: balance; }

/* One line is a DESKTOP instruction. Holding nowrap all the way down drives
   the title to 13px and the supporting line to 8px on a 320px phone, which is
   not a design decision, it is unreadable text. Below 768px both lines are
   allowed to wrap and go back to a legible size. */
@media (max-width: 767px) {
  .hg-positioning__title {
    white-space: normal;
    font-size: clamp(24px, 6.4vw, 34px);
    max-width: 18ch;
    text-wrap: balance;
  }

  .hg-positioning__sub {
    white-space: normal;
    font-size: clamp(15px, 3.8vw, 19px);
    max-width: 26ch;
    text-wrap: balance;
  }

  /* One line is a desktop instruction, same as the heading above. Held on a
     phone this line runs off the side of the screen. */
  .hg-positioning__strap {
    white-space: normal;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .hg-positioning__strap { letter-spacing: 0.12em; gap: 10px; }
  .hg-positioning__strap::before,
  .hg-positioning__strap::after { flex-basis: 18px; }
}


/* ==========================================================================
   5. PRODUCTS — three glass cards
   ========================================================================== */

.hg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-block-end: clamp(28px, 4vw, 52px);
}

.hg-head__text { max-width: 640px; }

/* Four materials since quartzite joined on 2026-09-07. auto-fit rather than a
   fixed count, so the row does not have to be re-tuned if a fifth collection
   is ever added — and the orphan rule below still catches an odd last card. */
.hg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.hg-card {
  display: block;
  padding: 12px;
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
  color: inherit;
  text-decoration: none;
  transition: transform 320ms var(--hg-ease), background 320ms ease, box-shadow 320ms ease;
}

.hg-card:hover,
.hg-card:focus-visible {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--hg-lift-up);
  color: inherit;
}

.hg-card__media {
  overflow: hidden;
  border-radius: var(--hg-r-md);
  aspect-ratio: 4 / 3;
  background: #ede7e1;
}

.hg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--hg-ease);
}

.hg-card:hover .hg-card__media img { transform: scale(1.04); }

/* Name on the left, live shade count on the right, then the image beneath.
   The descriptions were removed 2026-08-28 — the card is a signpost, and the
   material pages carry the detail. */
.hg-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px 18px;
}

.hg-card__title {
  margin: 0;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hg-card__count {
  margin: 0;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hg-ink-ghost);
  font-variant-numeric: tabular-nums;
}

/* An odd last card left alone on a row sits at half width with a gap beside
   it. It spans the row instead, which reads as a deliberate feature rather
   than a wrap accident. */
@media (max-width: 1023px) {
  .hg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hg-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hg-cards > :last-child:nth-child(odd) .hg-card__media { aspect-ratio: 21 / 9; }
}

@media (max-width: 768px) {
  .hg-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hg-card__head { padding: 12px 8px 14px; }
}

@media (max-width: 640px) {
  .hg-cards { grid-template-columns: 1fr; }
  .hg-cards > :last-child:nth-child(odd) .hg-card__media { aspect-ratio: 4 / 3; }
}


/* ==========================================================================
   6. INFRASTRUCTURE — four portrait tiles
   ========================================================================== */

.hg-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.hg-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 3 / 4;
  box-shadow: 0 14px 50px rgba(28, 27, 26, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: transform 320ms var(--hg-ease), box-shadow 320ms ease;
}

.hg-tile:hover,
.hg-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 64px rgba(28, 27, 26, 0.16);
}

/* Photography for these four is still outstanding — the tile shows a hatched
   plate with the intended shot named on it rather than a stock stand-in. */
.hg-tile__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f0ed;
  background-image: repeating-linear-gradient(135deg,
    rgba(28, 27, 26, 0.05) 0px, rgba(28, 27, 26, 0.05) 1px,
    rgba(28, 27, 26, 0) 1px, rgba(28, 27, 26, 0) 11px);
  transition: transform 600ms var(--hg-ease);
}

.hg-tile:hover .hg-tile__ph { transform: scale(1.04); }

/* A real photograph fills the tile the same way the hatched plate does. */
.hg-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--hg-ease);
}

.hg-tile:hover .hg-tile__img { transform: scale(1.04); }

.hg-tile__ph span {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--hg-hairline);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--hg-ink-faint);
  text-align: center;
}

.hg-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 27, 26, 0) 55%, rgba(28, 27, 26, 0.16) 100%);
  pointer-events: none;
}

.hg-tile__label {
  position: absolute;
  inset-inline: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(24, 23, 22, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hg-tile__label::after {
  content: "\203A";
  margin-inline-start: auto;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  transition: transform 320ms var(--hg-ease);
}

.hg-tile:hover .hg-tile__label::after { transform: translateX(2px); }

@media (max-width: 1024px) {
  .hg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stay PORTRAIT all the way down — this is the reference behaviour.

   The tile used to flip to 16:10 on a phone, which cropped the top and bottom
   out of every shot. A slab on a gangsaw and a person at a caliper are both
   vertical subjects; landscape is the one crop these four photographs cannot
   take. So a phone gets one full-width tile per row, still at 3:4. */
@media (max-width: 480px) {
  .hg-tiles { grid-template-columns: 1fr; gap: 14px; }
  .hg-tile { border-radius: 20px; }
  .hg-tile__label { inset-inline: 12px; bottom: 12px; font-size: 14px; }
}


/* ==========================================================================
   7. STATEMENT — copy + slab duo inside one big glass panel
   ========================================================================== */

.hg-statement {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 4vw, 64px);
}

.hg-statement__title {
  margin: 0 0 22px;
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: pretty;
}

.hg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
}

.hg-chips li {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hg-hairline);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #3a3630;
}

.hg-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hg-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.hg-duo figure {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 50px rgba(28, 27, 26, 0.08);
  background: #ede7e1;
}

.hg-duo figure:last-child { align-self: end; }

.hg-duo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hg-duo figure:first-child img { min-height: 280px; }
.hg-duo figure:last-child  img { min-height: 210px; }

/* --- Single photograph variant -------------------------------------------
   The two-up pair squeezed each frame to roughly 280px, which threw away most
   of a 1240px source. With one photograph the column is its own frame, so the
   image is shown large and at its natural 4:3 rather than cropped to a strip.
   ------------------------------------------------------------------------ */
.hg-duo--single {
  grid-template-columns: 1fr;
  gap: 0;
}

.hg-duo--single figure { align-self: center; }

.hg-duo--single img {
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 0;
  object-fit: cover;
}

@media (max-width: 768px) {
  .hg-duo figure:first-child img { min-height: 200px; }
  .hg-duo figure:last-child  img { min-height: 160px; }
  .hg-duo figure { border-radius: 18px; }
  .hg-duo--single img { min-height: 0; }
}

@media (max-width: 400px) {
  .hg-actions .hg-btn { width: 100%; }
}


/* ==========================================================================
   8. STATS — counters in a glass band
   ========================================================================== */

.hg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: clamp(20px, 3vw, 38px);
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
}

.hg-stat {
  padding: 6px clamp(10px, 2vw, 26px);
  border-inline-start: 1px solid var(--hg-hairline);
}

.hg-stat:first-child { border-inline-start: 0; }

.hg-stat__value {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hg-stat__label {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hg-ink-faint);
}

@media (max-width: 768px) {
  .hg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .hg-stat:nth-child(odd) { border-inline-start: 0; }
  .hg-stat { padding-inline: clamp(8px, 3vw, 20px); }
}

@media (max-width: 400px) {
  .hg-stats { grid-template-columns: 1fr; row-gap: 0; }
  .hg-stat { border-inline-start: 0; border-block-start: 1px solid var(--hg-hairline); padding-block: 16px; }
  .hg-stat:first-child { border-block-start: 0; padding-block-start: 0; }
}


/* ==========================================================================
   9. ENQUIRY — the theme form restyled inside a glass panel
   ========================================================================== */

.hg-enquiry {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(24px, 3.4vw, 52px);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 60px rgba(28, 27, 26, 0.07);
}

.hg-enquiry__intro { margin-block-end: 32px; }
.hg-enquiry__intro .hg-lede { max-width: 62ch; }

/* The shared form partial keeps its markup; only its skin changes here so a
   future edit to hind_enquiry_form() still lands on every glass page. */
.hg-enquiry .form { display: grid; gap: 16px; }

.hg-enquiry .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}

.hg-enquiry .field__label {
  display: block;
  margin-block-end: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hg-ink-faint);
}

.hg-enquiry .req { color: var(--hg-accent); }

.hg-enquiry .input,
.hg-enquiry .select,
.hg-enquiry .textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--hg-r-sm);
  border: 1px solid rgba(28, 27, 26, 0.12);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: inherit;
  font-size: 15px;
  color: var(--hg-ink);
  outline: none;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.hg-enquiry .textarea { resize: vertical; min-height: 120px; }

.hg-enquiry .select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235c5852' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-inline-end: 40px;
}

.hg-enquiry .input:focus,
.hg-enquiry .select:focus,
.hg-enquiry .textarea:focus {
  border-color: rgba(126, 34, 51, 0.5);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(126, 34, 51, 0.1);
  outline: none;
}

.hg-enquiry .field__hint {
  display: block;
  margin-block-start: 8px;
  font-size: 13.5px;
  color: var(--hg-ink-faint);
}

.hg-enquiry .choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--hg-ink-soft);
}

.hg-enquiry .choice input {
  margin-block-start: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--hg-accent);
  flex: 0 0 auto;
}

.hg-enquiry .field--honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.hg-enquiry .form button[type="submit"] {
  justify-self: start;
  padding: 15px 30px;
  border-radius: 999px;
  border: none;
  background: rgba(24, 23, 22, 0.92);
  color: #f7f5f2;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(28, 27, 26, 0.18);
  transition: transform 240ms var(--hg-ease), background 240ms ease;
}

.hg-enquiry .form button[type="submit"]:hover { background: #181716; transform: translateY(-2px); }

.hg-enquiry .form-message { display: none; }

.hg-enquiry .form-message.is-visible {
  display: block;
  padding: 14px 18px;
  border-radius: var(--hg-r-sm);
  font-size: 14px;
  background: rgba(126, 34, 51, 0.07);
  border: 1px solid rgba(126, 34, 51, 0.18);
  color: var(--hg-accent);
}

.hg-enquiry .form-message--success {
  background: rgba(47, 74, 63, 0.07);
  border-color: rgba(47, 74, 63, 0.2);
  color: #2f4a3f;
}

@media (max-width: 560px) {
  .hg-enquiry { border-radius: 24px; }
  .hg-enquiry .form-row { grid-template-columns: 1fr; }
  .hg-enquiry .form button[type="submit"] { justify-self: stretch; }
}


/* ==========================================================================
   10. FOOTER + floating WhatsApp pill
   --------------------------------------------------------------------------
   The theme footer already carries the four columns the design asks for, so
   this is a skin over the existing markup rather than a second footer.
   ========================================================================== */

body.hg-page .site-footer {
  background: var(--hg-paper-warm);
  border-block-start: 1px solid var(--hg-hairline);
  font-family: var(--hg-sans);
  color: var(--hg-ink-muted);
}

body.hg-page .footer-col__title {
  display: inline-block;
  margin: 0 0 16px;
  padding-block-end: 6px;
  font-family: var(--hg-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hg-ink);
  border-block-end: 1px solid var(--hg-ink);
}

body.hg-page .footer-office__text,
body.hg-page .footer-contact,
body.hg-page .footer-links { font-size: 15px; line-height: 1.8; color: var(--hg-ink-muted); }

body.hg-page .footer-links { gap: 8px; line-height: 1.6; }

/* The theme underlines footer links on hover with a sliding rule; the glass
   pages use a colour shift instead, so the rule is switched off here. */
body.hg-page .footer-links a::after { display: none; }

body.hg-page .site-footer a { color: var(--hg-ink-muted); }
body.hg-page .site-footer a:hover { color: var(--hg-accent); }

/* The MOQ line keeps its maroon here — it is the one thing in this column
   that is not muted, and that is the point. Sized to sit with the contact
   rows above it rather than shrinking to caption size. */
body.hg-page .footer-moq {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hg-accent);
}

body.hg-page .footer-bottom { border-block-start: 1px solid var(--hg-hairline); }
body.hg-page .footer-bottom__inner p { font-size: 13.5px; color: var(--hg-ink-ghost); }
body.hg-page .footer-legal { gap: 10px 28px; font-size: 14px; }

/* --- WhatsApp float ------------------------------------------------------
   components.css anchors this bottom-LEFT (client direction, so it does not
   stack with the back-to-top control on the right). Keep that corner and
   restyle in place.

   Two things must be undone explicitly or the pill breaks:
     1. `inset-inline-start: auto` — setting only the end edge while the base
        rule still sets `left` gives the element BOTH edges, and a fixed box
        with left and right both set stretches the full viewport width.
     2. The label's `max-width: 0` — the base rule keeps it collapsed until
        hover. The glass pill shows it at rest, so the collapse is reversed
        here rather than left to fight the hover rule.
   -------------------------------------------------------------------------- */

body.hg-page .whatsapp-float {
  inset-inline-start: clamp(14px, 2.5vw, 28px);
  inset-inline-end: auto;
  bottom: clamp(14px, 2.5vw, 28px);
  width: auto;
  max-width: calc(100vw - 28px);
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: rgba(24, 23, 22, 0.62);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 12px 40px rgba(28, 27, 26, 0.2);
  color: #f7f5f2;
  font-family: var(--hg-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  transition: background 260ms ease, transform 260ms ease;
}

body.hg-page .whatsapp-float:hover,
body.hg-page .whatsapp-float:focus-visible {
  background: rgba(24, 23, 22, 0.9);
  transform: translateY(-2px);
  color: #f7f5f2;
}

body.hg-page .whatsapp-float svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* A live green dot rather than a green pill — the glass bar stays neutral so
   it does not fight the stone photography behind it. */
body.hg-page .whatsapp-float::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #7ed09b;
}

body.hg-page .whatsapp-float__label {
  position: static;
  clip-path: none;
  width: auto;
  max-width: none;
  height: auto;
  padding: 0;
  overflow: visible;
  opacity: 1;
  white-space: nowrap;
}

/* The base stylesheet expands the label on hover; it is already open here, so
   that rule must not re-apply its padding and re-introduce a width jump. */
@media (hover: hover) and (min-width: 768px) {
  body.hg-page .whatsapp-float:hover .whatsapp-float__label {
    max-width: none;
    opacity: 1;
    padding-inline-end: 0;
  }
}

@media (max-width: 560px) {
  body.hg-page .whatsapp-float { padding: 12px 16px; font-size: 13px; }
  body.hg-page .footer-bottom__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 400px) {
  body.hg-page .whatsapp-float__label { display: none; }
  body.hg-page .whatsapp-float::before { display: none; }
  body.hg-page .whatsapp-float { padding: 14px; }
  body.hg-page .whatsapp-float svg { width: 22px; height: 22px; }
}


/* ==========================================================================
   11. INNER PAGES — hero, editorial split, checklist, feature grid, CTA
   --------------------------------------------------------------------------
   Everything below is shared by the inner templates as they move across; the
   About page is the first to use it. Nothing here is About-specific.
   ========================================================================== */

/* --- Page hero ----------------------------------------------------------- */

.hg-pagehero {
  padding: clamp(96px, 12vh, 140px) clamp(12px, 2.4vw, 28px) clamp(16px, 2vw, 28px);
}

.hg-pagehero__frame {
  position: relative;
  max-width: 1660px;
  margin-inline: auto;
  min-height: min(58vh, 520px);
  display: flex;
  align-items: flex-end;
  border-radius: var(--hg-r-xl);
  overflow: hidden;
  box-shadow: var(--hg-lift-deep);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: #ede7e1;
  isolation: isolate;
}

.hg-pagehero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hg-pagehero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 32%,
    rgba(38, 35, 32, 0.4) 100%);
  pointer-events: none;
}

/* The copy sits in its own glass card rather than straight on the photograph:
   a slab is high-contrast and unpredictable, and white text over one fails
   contrast somewhere on almost every shade we sell. */
.hg-pagehero__panel {
  position: relative;
  margin: clamp(16px, 2vw, 28px);
  max-width: 760px;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 54px rgba(28, 27, 26, 0.14);
}

.hg-h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

.hg-h1 em {
  font-family: var(--hg-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.hg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--hg-ink-faint);
}

.hg-crumbs a { color: var(--hg-ink-faint); text-decoration: none; }
.hg-crumbs a:hover { color: var(--hg-accent); }
.hg-crumbs li + li::before { content: "\203A"; margin-inline-end: 10px; color: var(--hg-ink-ghost); }
.hg-crumbs [aria-current] { color: var(--hg-ink); }

@media (max-width: 768px) {
  .hg-pagehero { padding-block-start: clamp(84px, 14vh, 110px); }
  .hg-pagehero__frame { min-height: min(56vh, 440px); border-radius: 24px; }
}

@media (max-width: 560px) {
  .hg-pagehero__frame { min-height: 380px; border-radius: 20px; }
  .hg-pagehero__panel { margin: 10px; border-radius: 20px; }
}

@media (max-width: 400px) {
  .hg-pagehero { padding-inline: 10px; }
}


/* --- Editorial split (lead beside body copy) ----------------------------- */

.hg-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.hg-split__lead {
  margin: 0;
  font-family: var(--hg-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.28;
  color: var(--hg-ink);
  text-wrap: pretty;
}

.hg-split__body p {
  margin: 0 0 22px;
  font-size: clamp(15.5px, 1.15vw, 16.5px);
  line-height: 1.8;
  color: var(--hg-ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}

.hg-split__body p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .hg-split { grid-template-columns: 1fr; gap: 28px; }
}


/* --- Editorial panel (copy + checklist + media) --------------------------- */

.hg-editorial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(24px, 4vw, 64px);
}

.hg-editorial__media {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 50px rgba(28, 27, 26, 0.08);
  background: #ede7e1;
  /* 4:3 since 2026-09-11. The slot was 4:5 portrait, which forced a landscape
     works photograph to be cropped down the middle; the only page that uses
     this figure is About, and its subject is landscape. */
  aspect-ratio: 4 / 3;
}

.hg-editorial__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
  .hg-editorial__media { aspect-ratio: 4 / 3; border-radius: 18px; }
}


/* --- Checklist ----------------------------------------------------------- */

.hg-checks {
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.hg-checks li {
  position: relative;
  padding-inline-start: 34px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--hg-ink-soft);
  text-wrap: pretty;
}

.hg-checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: rgba(126, 34, 51, 0.09);
  border: 1px solid rgba(126, 34, 51, 0.2);
}

.hg-checks li::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  top: 7px;
  width: 7px;
  height: 4px;
  border-inline-start: 1.6px solid var(--hg-accent);
  border-block-end: 1.6px solid var(--hg-accent);
  transform: rotate(-45deg);
}


/* --- Feature grid (icon cards) ------------------------------------------- */

.hg-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.hg-feature {
  padding: clamp(20px, 2.2vw, 30px);
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
  transition: transform 320ms var(--hg-ease), background 320ms ease, box-shadow 320ms ease;
}

.hg-feature:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--hg-lift-up);
}

.hg-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-block-end: 18px;
  border-radius: var(--hg-r-sm);
  background: rgba(126, 34, 51, 0.08);
  border: 1px solid rgba(126, 34, 51, 0.16);
  color: var(--hg-accent);
}

.hg-feature__icon svg { width: 21px; height: 21px; }

.hg-feature__title {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.hg-feature__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--hg-ink-muted);
  text-wrap: pretty;
}

@media (max-width: 1023px) {
  .hg-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hg-features { grid-template-columns: 1fr; }
}



/* --- Numbered process ----------------------------------------------------
   The four Infrastructure-cluster pages all run a six-stage sequence. The
   numeral is decorative — the reading order is already the DOM order — so it
   is drawn with a counter rather than typed into the markup, and it is
   aria-hidden nowhere because a CSS counter never reaches the a11y tree.
   -------------------------------------------------------------------------- */

.hg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  counter-reset: hg-step;
}

.hg-step {
  position: relative;
  counter-increment: hg-step;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
  transition: transform 320ms var(--hg-ease), background 320ms ease, box-shadow 320ms ease;
}

.hg-step:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--hg-lift-up);
}

.hg-step::before {
  content: counter(hg-step, decimal-leading-zero);
  display: block;
  margin-block-end: 16px;
  font-family: var(--hg-serif);
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  color: var(--hg-accent);
  opacity: 0.55;
}

.hg-step__title {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.hg-step__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--hg-ink-muted);
  text-wrap: pretty;
}

@media (max-width: 1023px) {
  .hg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hg-steps { grid-template-columns: 1fr; }
  .hg-step::before { margin-block-end: 10px; }
}


/* --- Feature grid variants ----------------------------------------------- */

.hg-features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1200px) {
  .hg-features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hg-features--4 { grid-template-columns: 1fr; }
}

/* A feature card that is itself a link. Kept as its own class rather than a
   bare <a> so the underline reset and the arrow are opt-in. */
a.hg-feature { display: block; color: inherit; text-decoration: none; }
a.hg-feature:hover,
a.hg-feature:focus-visible { color: inherit; }

.hg-feature__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block-start: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hg-accent);
}

.hg-feature__more::after {
  content: "\2192";
  transition: transform 320ms var(--hg-ease);
}

a.hg-feature:hover .hg-feature__more::after { transform: translateX(3px); }

/* Numbered variant — the plant list, where the sequence is the point. */
.hg-feature--numbered .hg-feature__icon {
  font-family: var(--hg-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
}


/* --- Option pills (finishes, formats) ------------------------------------ */

.hg-pillgroup { margin: 0 0 26px; }
.hg-pillgroup:last-child { margin-bottom: 0; }

.hg-pillgroup__title {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hg-ink);
}

.hg-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hg-pills li {
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--hg-hairline);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #3a3630;
}


/* --- Spec list (label / value rows) -------------------------------------- */

.hg-spec {
  margin: 0;
  border-block-start: 1px solid var(--hg-hairline);
}

.hg-spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 15px 0;
  border-block-end: 1px solid var(--hg-hairline);
}

.hg-spec__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--hg-ink);
}

.hg-spec__value {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hg-ink-muted);
  text-wrap: pretty;
}

@media (max-width: 480px) {
  .hg-spec__row { grid-template-columns: 1fr; gap: 4px; }
}

/* A value still waiting on the client reads as muted rather than blank, so an
   unanswered question is visible on the page instead of silently missing. */
.hg-spec__value .t-muted,
.hg-muted { color: var(--hg-ink-ghost); font-style: italic; }


/* --- Spec table ---------------------------------------------------------- */

.hg-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--hg-r-sm);
}

.hg-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.hg-table caption {
  text-align: start;
  margin-block-end: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hg-ink-faint);
}

.hg-table th,
.hg-table td {
  padding: 14px 16px 14px 0;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--hg-hairline);
  text-wrap: pretty;
}

.hg-table th { font-weight: 600; color: var(--hg-ink); width: 42%; }
.hg-table td { color: var(--hg-ink-muted); padding-inline-end: 0; }
.hg-table tr:first-child th,
.hg-table tr:first-child td { border-block-start: 1px solid var(--hg-hairline); }


/* --- Grid item shrinking --------------------------------------------------
   A grid item defaults to min-width:auto, so it refuses to shrink below its
   own content. Anything with an intrinsic minimum inside it — a spec table
   with a min-width, a long unbroken string, a wide image — then pushes its
   track past the container and the whole PAGE scrolls sideways, which is the
   one thing the layout must never do. Setting min-width:0 on the children
   lets the track win and hands the overflow to the element that should own
   it (.hg-tablewrap, which scrolls on its own).
   -------------------------------------------------------------------------- */

.hg-twocol > *,
.hg-split > *,
.hg-editorial > *,
.hg-statement > *,
.hg-intro__grid > *,
.hg-cta > * { min-width: 0; }


/* --- Panel padding + sub-headings ---------------------------------------- */

/* .hg-glass-panel is only a surface; this gives it the interior padding the
   grid-based panels (.hg-statement, .hg-editorial) set for themselves. */
.hg-panel--pad { padding: clamp(24px, 4vw, 64px); }

.hg-subhead {
  margin: 0 0 6px;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.hg-tablewrap { margin-block-start: 26px; }


/* --- Small print --------------------------------------------------------- */

.hg-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--hg-ink-ghost);
  text-wrap: pretty;
}

.hg-linkarrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 22px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--hg-accent);
  text-decoration: none;
}

.hg-linkarrow::after {
  content: "\2192";
  transition: transform 320ms var(--hg-ease);
}

.hg-linkarrow:hover { color: var(--hg-accent); }
.hg-linkarrow:hover::after { transform: translateX(3px); }


/* --- Two-column editorial (copy beside a spec block) ---------------------- */

.hg-twocol {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.hg-twocol--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

@media (max-width: 900px) {
  .hg-twocol,
  .hg-twocol--7-5 { grid-template-columns: 1fr; gap: 32px; }
}


/* --- Closing CTA --------------------------------------------------------- */

.hg-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
  padding: clamp(26px, 3.6vw, 52px);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 60px rgba(28, 27, 26, 0.07);
}

.hg-cta__content { max-width: 56ch; }

.hg-cta__title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 600;
  text-wrap: balance;
}

.hg-cta .hg-actions { flex: 0 0 auto; }

.hg-cta .hg-btn svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .hg-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .hg-cta { border-radius: 24px; }
  .hg-cta .hg-actions { width: 100%; }
  .hg-cta .hg-actions .hg-btn { width: 100%; }
}



/* ==========================================================================
   11b. CATALOGUE — product frame, listing, filters, product detail, contact
   ========================================================================== */

/* --- Product image frame -------------------------------------------------
   MEASURED 2026-08-27: all 29 granite and all 52 marble catalogue images are
   222px wide; the 79 quartz ones are 1280-2560px. Stretching a 222px file to
   fill a 380px card is a 1.7x upscale, and to fill a hero it is nearly 8x —
   that is the whole reason the product pages looked soft.

   So the frame has two modes. A big enough image fills it (--fill). A small
   one is mounted at its own size (--mounted) on nothing at all: the frame is
   transparent, so the swatch sits directly on the card and reads as part of
   the page rather than as a picture on a coloured mount. Nothing is ever drawn
   larger than its own pixels.
   -------------------------------------------------------------------------- */

.hg-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--hg-r-md);
  background: transparent;
  isolation: isolate;
}

.hg-frame--square { aspect-ratio: 1 / 1; }
.hg-frame--card   { aspect-ratio: 4 / 3; }
.hg-frame--wide   { aspect-ratio: 16 / 9; }
.hg-frame--tall   { aspect-ratio: 3 / 4; }

.hg-frame--empty {
  background-image: repeating-linear-gradient(135deg,
    rgba(28, 27, 26, 0.05) 0px, rgba(28, 27, 26, 0.05) 1px,
    rgba(28, 27, 26, 0) 1px, rgba(28, 27, 26, 0) 11px);
}

.hg-frame--fill .hg-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--hg-ease);
}

/* The width/height attributes give the browser the intrinsic size, and
   width:auto makes it render at exactly that. max-width:100% only ever shrinks
   it to fit a narrow card. So the cap is the image's own resolution, whatever
   that happens to be — no hardcoded pixel value to go stale when the catalogue
   is re-shot at a different size. */
.hg-frame--mounted .hg-frame__img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(28, 27, 26, 0.07);
  transition: transform 600ms var(--hg-ease);
}


/* --- Product card -------------------------------------------------------- */

.hg-productgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

.hg-product {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
  transition: transform 320ms var(--hg-ease), background 320ms ease, box-shadow 320ms ease;
}

.hg-product:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--hg-lift-up);
}

.hg-product:hover .hg-frame__img { transform: scale(1.03); }

.hg-product__body { padding: 14px 8px 8px; }

.hg-product__name {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.hg-product__name a { color: inherit; text-decoration: none; }
.hg-product__name a:hover { color: var(--hg-accent); }

/* The whole card is the target, not just the title. */
.hg-product__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--hg-r-lg);
}

.hg-product { position: relative; }

.hg-product__meta {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--hg-ink-ghost);
}


/* --- Listing layout (filters beside the grid) ---------------------------- */

.hg-listing {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.hg-listing > * { min-width: 0; }

@media (max-width: 1023px) {
  .hg-listing { grid-template-columns: 1fr; }
}

.hg-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 26px;
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
}

@media (max-width: 1023px) {
  .hg-side { position: static; }
}

.hg-facet__title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hg-ink-faint);
}

.hg-facet__options { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-facet__options--stack { flex-direction: column; align-items: stretch; }

.hg-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--hg-hairline);
  background: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hg-ink);
  cursor: pointer;
  text-align: start;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.hg-tag:hover { background: #fff; border-color: rgba(126, 34, 51, 0.28); }

.hg-tag[aria-pressed="true"] {
  background: rgba(24, 23, 22, 0.9);
  border-color: transparent;
  color: #f7f5f2;
}

.hg-tag__count {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--hg-ink-ghost);
}

.hg-tag[aria-pressed="true"] .hg-tag__count { color: rgba(247, 245, 242, 0.7); }

.hg-searchfield { position: relative; }

.hg-searchfield svg {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--hg-ink-ghost);
  pointer-events: none;
}

.hg-searchfield input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border-radius: 999px;
  border: 1px solid var(--hg-hairline);
  background: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 14px;
  color: var(--hg-ink);
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
}

.hg-searchfield input:focus {
  border-color: rgba(126, 34, 51, 0.5);
  background: #fff;
}

.hg-sidecta {
  padding: 18px;
  border-radius: var(--hg-r-md);
  background: rgba(126, 34, 51, 0.06);
  border: 1px solid rgba(126, 34, 51, 0.16);
}

.hg-sidecta__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hg-sidecta p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--hg-ink-muted); }

.hg-filterbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-end: 22px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--hg-hairline);
}

.hg-filterbar p { margin: 0; font-size: 14px; color: var(--hg-ink-muted); }
.hg-filterbar strong { color: var(--hg-ink); font-variant-numeric: tabular-nums; }

.hg-empty {
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(28, 27, 26, 0.14);
}

.hg-empty__title { margin: 0 0 10px; font-size: 20px; font-weight: 600; }
.hg-empty p { margin: 0 auto 18px; max-width: 46ch; font-size: 15px; color: var(--hg-ink-muted); }

.hg-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-block-start: 40px;
}

.hg-pagination a,
.hg-pagination span {
  min-width: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--hg-hairline);
  background: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--hg-ink);
}

.hg-pagination a:hover { background: #fff; border-color: rgba(126, 34, 51, 0.28); color: var(--hg-accent); }
.hg-pagination .current { background: rgba(24, 23, 22, 0.9); border-color: transparent; color: #f7f5f2; }


/* --- Product detail ------------------------------------------------------ */

.hg-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 900px) {
  .hg-detail { grid-template-columns: 1fr; }
}

.hg-detail__media {
  position: sticky;
  top: 96px;
  padding: clamp(12px, 1.4vw, 18px);
  border-radius: var(--hg-r-xl);
  background: var(--hg-glass);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
}

@media (max-width: 900px) {
  .hg-detail__media { position: static; }
}

/* On the detail page a low-res swatch gets a bit more room than on a card,
   but still never more than its own pixels. */
.hg-detail__media .hg-frame { border-radius: var(--hg-r-lg); }
.hg-detail__media .hg-frame--mounted .hg-frame__img { border-radius: 12px; }

.hg-detail__note {
  margin: 14px 4px 2px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hg-ink-ghost);
}

.hg-detail__title {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.hg-detail__body p { margin: 0 0 20px; font-size: 16px; line-height: 1.8; color: var(--hg-ink-soft); max-width: 62ch; }



/* --- Product gallery ------------------------------------------------------
   Only rendered when a stone has more than one photograph. The tiles are
   square so a close swatch and a full slab sit as equals in the grid; the
   image itself covers, because every gallery photograph in the September drop
   is at least 1000px and cropping one is safe. Older, smaller files would be
   upscaled by `cover`, so the guard below pins those to their own size for
   the same reason .hg-frame--mounted exists.
   -------------------------------------------------------------------------- */

.hg-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}

.hg-gallery__item { min-width: 0; }

.hg-gallery__btn {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  border-radius: var(--hg-r-md);
  overflow: hidden;
  background: transparent;
  cursor: zoom-in;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hg-gallery__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hg-gallery__btn:hover,
.hg-gallery__btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(28, 27, 26, 0.14);
}

.hg-gallery__btn:hover img,
.hg-gallery__btn:focus-visible img { transform: scale(1.05); }

.hg-gallery__btn:focus-visible {
  outline: 2px solid var(--hg-ink);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .hg-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Process photography grid ---------------------------------------------
   Captioned, because a photograph of a calibration machine means nothing to a
   buyer without the caption. 4:3 landscape, matching how the client's
   photographs were actually shot — cropping them square would cut the machine
   or the crate out of frame.
   -------------------------------------------------------------------------- */

.hg-process__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}

.hg-process__item { min-width: 0; }

.hg-process__figure { margin: 0; }

.hg-process__btn {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: var(--hg-r-md);
  overflow: hidden;
  background: var(--hg-paper-warm);
  cursor: zoom-in;
  isolation: isolate;
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hg-process__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hg-process__btn:hover,
.hg-process__btn:focus-visible { box-shadow: 0 14px 34px rgba(28, 27, 26, 0.16); }

.hg-process__btn:hover img,
.hg-process__btn:focus-visible img { transform: scale(1.05); }

.hg-process__btn:focus-visible {
  outline: 2px solid var(--hg-ink);
  outline-offset: 3px;
}

.hg-process__caption {
  margin-block-start: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--hg-ink-faint);
}

@media (max-width: 640px) {
  .hg-process__grid { grid-template-columns: 1fr; }
}

/* --- Gallery lightbox ----------------------------------------------------
   A <dialog> is centred by the UA through `margin: auto`. base.css zeroes
   margins globally, which pinned the panel to the top-left corner — that was
   the "opens badly" bug. Centring is declared here instead of depending on a
   UA rule surviving the reset.
   -------------------------------------------------------------------------- */

.hg-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;                   /* with inset:0, this centres both axes */
  width: fit-content;
  height: fit-content;
  max-width: min(96vw, 1600px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  color: #fff;
}

.hg-lightbox::backdrop {
  background: rgba(16, 13, 12, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hg-lightbox__stage {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--hg-r-md);
  background: #fff;
  cursor: zoom-in;
  touch-action: none;             /* we handle the pan ourselves */
  max-width: min(96vw, 1600px);
  max-height: 86vh;
}

.hg-lightbox__stage.is-zoomed { cursor: grab; }
.hg-lightbox__stage.is-zoomed:active { cursor: grabbing; }

.hg-lightbox__img {
  display: block;
  max-width: min(96vw, 1600px);
  max-height: 86vh;
  width: auto;
  height: auto;
  transform-origin: 50% 50%;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}

/* No easing mid-drag, or the image lags behind the pointer. */
.hg-lightbox__stage.is-zoomed .hg-lightbox__img { transition: none; }

.hg-lightbox__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 12px;
  padding-inline: 4px;
  min-height: 20px;
}

.hg-lightbox__caption {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}

.hg-lightbox__counter {
  flex: none;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Controls ------------------------------------------------------------- */

.hg-lightbox__close {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1c1b1a;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, transform 0.2s ease;
  top: -16px;
  inset-inline-end: -16px;
  width: 40px;
  height: 40px;
  font-size: 22px;
}

.hg-lightbox__close:hover { background: #fff; transform: scale(1.06); }
.hg-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Dots ----------------------------------------------------------------
   These replaced the ‹ › arrows that used to hang off the sides of the panel.
   They sit under the image, in the flow, so they never cover the photograph
   and never collide with the edge of a narrow viewport the way the arrows did.

   The hit area is 28px square while the dot itself reads as 9px — a 9px tap
   target fails on a phone, and padding the button is invisible where growing
   the dot would be loud. */
.hg-lightbox__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px;
  margin-block-start: 10px;
}

.hg-lightbox__dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.hg-lightbox__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  transition: background 0.2s ease, transform 0.2s ease;
}

.hg-lightbox__dot:hover::before { background: rgba(255, 255, 255, 0.72); }

.hg-lightbox__dot.is-active::before {
  background: #fff;
  transform: scale(1.25);
}

.hg-lightbox__dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* On a narrow screen there is no room outside the panel, so the close button
   moves inside it rather than hanging off the edge of the viewport. The dots
   are in the flow and need no repositioning; they only get tighter, so a
   seven-shot gallery still fits on one row on a phone. */
@media (max-width: 640px) {
  .hg-lightbox { max-width: 94vw; }
  .hg-lightbox__stage { max-height: 70vh; }
  .hg-lightbox__img { max-height: 70vh; max-width: 94vw; }
  .hg-lightbox__close { top: 8px; inset-inline-end: 8px; }
  .hg-lightbox__dots { gap: 0; }
  .hg-lightbox__dot { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-lightbox__img,
  .hg-lightbox__dot::before { transition: none; }
}

/* --- Long copy + FAQs on a product page ----------------------------------
   Two columns on a wide screen so neither the prose nor the question list
   runs to an uncomfortable measure; stacked below 900px.
   -------------------------------------------------------------------------- */

.hg-longform {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.hg-longform > * { min-width: 0; }

@media (max-width: 900px) {
  .hg-longform { grid-template-columns: 1fr; }
}

.hg-longform__body p {
  margin: 0 0 18px;
  font-size: clamp(15.5px, 1.15vw, 16.5px);
  line-height: 1.8;
  color: var(--hg-ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
}

.hg-longform__body p:last-child { margin-bottom: 0; }

.hg-faqs {
  display: grid;
  gap: 10px;
}

/* <details> carries the open/close behaviour natively — no JavaScript, and it
   still works for a visitor with scripting off or a search engine crawling it. */
.hg-faq {
  border-radius: var(--hg-r-md);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: var(--hg-blur-lite);
  -webkit-backdrop-filter: var(--hg-blur-lite);
  border: var(--hg-edge);
  box-shadow: 0 6px 24px rgba(28, 27, 26, 0.04);
  overflow: hidden;
}

.hg-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--hg-ink);
  cursor: pointer;
  list-style: none;
}

.hg-faq__q::-webkit-details-marker { display: none; }

.hg-faq__q::after {
  content: "+";
  margin-inline-start: auto;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(126, 34, 51, 0.3);
  color: var(--hg-accent);
  font-size: 14px;
  line-height: 1;
  transition: transform 240ms var(--hg-ease);
}

.hg-faq[open] .hg-faq__q::after { content: "‘2"; transform: rotate(180deg); }

.hg-faq__a {
  padding: 0 18px 18px;
}

.hg-faq__a p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--hg-ink-muted);
  text-wrap: pretty;
}


/* --- Contact ------------------------------------------------------------- */

.hg-contactgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.hg-contactcard {
  display: block;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--hg-r-lg);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
  color: inherit;
  text-decoration: none;
  transition: transform 320ms var(--hg-ease), background 320ms ease, box-shadow 320ms ease;
}

a.hg-contactcard:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--hg-lift-up);
  color: inherit;
}

.hg-contactcard__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hg-accent);
}

.hg-contactcard__label svg { width: 17px; height: 17px; }

.hg-contactcard__value {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.7;
  font-style: normal;
  color: var(--hg-ink);
  overflow-wrap: anywhere;
}

.hg-map {
  width: 100%;
  height: clamp(280px, 40vh, 460px);
  border: 0;
  display: block;
  border-radius: var(--hg-r-lg);
  overflow: hidden;
  background: #ede7e1;
}

.hg-mapwrap {
  padding: clamp(10px, 1.2vw, 16px);
  border-radius: var(--hg-r-xl);
  background: var(--hg-glass);
  backdrop-filter: var(--hg-blur);
  -webkit-backdrop-filter: var(--hg-blur);
  border: var(--hg-edge);
  box-shadow: var(--hg-lift);
}


/* ==========================================================================
   12. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.hg-page *,
  body.hg-page *::before,
  body.hg-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .hg-reveal { opacity: 1; transform: none; }
  .js .hg-type { max-width: none; }
  .hg-caret { display: none; }
}

/* The stone used to tilt and glow under the pointer; both were removed on
   2026-08-28, so there is nothing left here to suppress on touch. */