/* ==========================================================================
   LUMIERE LUXURY STONES — SHOWROOM MICROSITE v5
   main.css — one design system, written for this brand.

   The v5 direction: luxury European stone atelier × architectural editorial.
   Three rules drive every decision below.

   1. THE STONE IS THE ONLY SATURATED THING ON THE PAGE.
      The ground is warm ivory, the type is espresso, the accent is a muted
      bronze. Nothing competes with the photography, and photography is never
      flattened under a full-bleed scrim — where type sits over an image the
      gradient is anchored to one corner only.

   2. ASYMMETRY, NOT STACKED BANDS.
      A 12-column grid with deliberate offsets, media that breaks its column,
      captions set outside the frame. Sections differ in shape, so the page
      has rhythm instead of a repeated 50/50.

   3. THE BOX IS DESIGNED AROUND THE ASSET.
      Every media box carries --media-ratio / --object-x / --object-y from
      the curation, with separate md and sm ratios. No image is ever a crop
      of a crop.

   Carried forward from v1–v4.4 because each was earned by a real defect:
     * overflow / aspect-ratio are inert on inline boxes, so .m is block
     * percentage height resolves to auto against an indefinite parent, so
       the hero uses an explicit height chain
     * scroll-behavior: smooth makes every programmatic scrollLeft animate,
       so horizontal rails set scroll-behavior: auto and animate in JS
     * .btn declared after a display:none must not silently re-show it
     * inline SVGs are constrained by an explicit width/height rule
     * reduced motion is handled with a universal rule, not a selector list,
       so a new hover effect cannot escape it (v4.1.1)
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* ground */
  --pearl:      #FCFAF6;
  --ivory:      #F7F3EB;
  --limestone:  #EFE9DC;
  --sand:       #E2D8C6;
  --champagne:  #F3EADA;

  /* ink */
  --espresso:   #221D18;
  --charcoal:   #2E2823;
  --ink:        #35302A;
  --body:       #4C453C;
  --muted:      #6E6558;

  /* accent */
  --bronze:      #A8874E;   /* decorative rules, hairlines, icons */
  --bronze-text: #82653A;   /* AA text: 4.95:1 on ivory, 4.57:1 on tint */
  --bronze-lite:  #C6A56A;
  --bronze-soft: #D8C49B;

  /* lines + shadow */
  --line:       rgba(34, 29, 24, .13);
  --line-soft:  rgba(34, 29, 24, .07);
  --line-dark:  rgba(255, 252, 246, .18);
  --shadow-sm:  0 1px 2px rgba(34, 29, 24, .04), 0 6px 20px rgba(34, 29, 24, .05);
  --shadow-md:  0 2px 6px rgba(34, 29, 24, .05), 0 22px 54px rgba(34, 29, 24, .09);

  /* metrics */
  --wrap:   1340px;
  --gut:    clamp(20px, 5vw, 68px);
  --hdr-h:  74px;
  --dock-h: 0px;                /* set by JS on phone widths */
  --radius: 2px;

  /* motion — one language */
  --ease:   cubic-bezier(.22, .61, .36, 1);
  --slow:   1.05s;
  --mid:    .55s;
  --fast:   .28s;

  /* type */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', 'Futura', 'Avenir Next', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 18px);
}
body {
  margin: 0;
  background: var(--pearl);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-bottom: var(--dock-h);
}
img, picture, video, svg { max-width: 100%; }
img { border: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; color: var(--ink); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Unconstrained inline SVG renders at its intrinsic size — v2 shipped 200px
   chevrons because of it. Every icon is sized to its text box. */
svg { width: 1em; height: 1em; flex: 0 0 auto; }

::selection { background: var(--sand); color: var(--espresso); }

:focus-visible {
  outline: 2px solid var(--bronze-text);
  outline-offset: 3px;
  border-radius: 1px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--espresso); color: var(--pearl);
  padding: 12px 20px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--tight { max-width: calc(980px + var(--gut) * 2); }
.wrap--wide  { max-width: calc(1580px + var(--gut) * 2); }

.sec { padding-block: clamp(64px, 9vw, 132px); }
.sec--tight { padding-block: clamp(48px, 6vw, 88px); }
.sec--flush-t { padding-top: 0; }
.sec--flush-b { padding-bottom: 0; }
.sec.tint  { background: var(--ivory); }
.sec.stone { background: var(--limestone); }
.sec.dark  { background: var(--espresso); color: #E8E2D8; }
.sec.dark h1, .sec.dark h2, .sec.dark h3 { color: var(--pearl); }

/* the 12-column field everything asymmetric is built on */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 3vw, 44px); }
.c1  { grid-column: 1 / -1; }

/* ==========================================================================
   4. TYPE SCALE
   ========================================================================== */
.h-xl, .h-lg, .h-md, .h-sm {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.014em;
  color: var(--ink);
  text-wrap: balance;
}
.h-xl { font-size: clamp(2.9rem, 6.4vw, 5.6rem); line-height: .98; }
.h-lg { font-size: clamp(2.2rem, 4.3vw, 3.7rem); }
.h-md { font-size: clamp(1.65rem, 2.7vw, 2.5rem); line-height: 1.08; }
.h-sm { font-size: clamp(1.28rem, 1.7vw, 1.6rem); line-height: 1.16; letter-spacing: -.008em; }

.eyebrow {
  display: block;
  margin: 0 0 1.15em;
  font-family: var(--sans);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .235em;
  text-transform: uppercase;
  color: var(--bronze-text);
  line-height: 1.5;
}
.dark .eyebrow, .hero .eyebrow { color: var(--bronze-lite); }
.eyebrow--c { text-align: center; }

.lede {
  font-size: clamp(1.02rem, 1.15vw, 1.14rem);
  line-height: 1.74;
  color: var(--body);
  max-width: 62ch;
}
.lede--lg {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 1.95rem);
  line-height: 1.42;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -.004em;
  max-width: 30ch;
}
.small { font-size: .84rem; line-height: 1.62; color: var(--muted); }
.tiny  { font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
.mark  { font-family: var(--serif); font-style: italic; color: var(--bronze-text); }

/* a hairline that reads as a drawn rule, not a border */
.rule { display: block; height: 1px; background: var(--line); border: 0; }
.rule--short { display: block; width: 56px; height: 1px; background: var(--bronze); }

/* ==========================================================================
   5. BUTTONS + LINKS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: .755rem; font-weight: 500;
  letter-spacing: .175em; text-transform: uppercase;
  line-height: 1;
  border: 1px solid var(--espresso);
  background: transparent; color: var(--espresso);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
  text-align: center;
}
.btn:hover { background: var(--espresso); color: var(--pearl); }
.btn--solid { background: var(--espresso); color: var(--pearl); }
.btn--solid:hover { background: var(--charcoal); border-color: var(--charcoal); }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--espresso); background: var(--espresso); color: var(--pearl); }
.btn--pill { border-color: var(--bronze); color: var(--bronze-text); border-radius: 999px; padding-inline: 24px; }
.btn--pill:hover { background: var(--bronze-text); border-color: var(--bronze-text); color: var(--pearl); }
.btn--lg { padding: 17px 34px; font-size: .79rem; }
.btn--sm { padding: 10px 18px; font-size: .69rem; letter-spacing: .15em; }
.btn--light { background: var(--pearl); border-color: var(--pearl); color: var(--espresso); }
.btn--light:hover { background: transparent; color: var(--pearl); }
.btn--onimg { border-color: rgba(255,252,246,.6); color: #fff; backdrop-filter: blur(3px); }
.btn--onimg:hover { background: var(--pearl); border-color: var(--pearl); color: var(--espresso); }
.dark .btn--ghost { border-color: var(--line-dark); color: #EDE7DC; }
.dark .btn--ghost:hover { background: var(--pearl); border-color: var(--pearl); color: var(--espresso); }

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

/* text link with a rule that draws in on hover */
.tlink {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .755rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: var(--bronze-text); padding-bottom: 5px; position: relative;
}
.tlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(.24); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }
.tlink svg { transition: transform var(--mid) var(--ease); }
.tlink:hover svg { transform: translateX(4px); }
.dark .tlink { color: var(--bronze-lite); }

/* ==========================================================================
   6. MEDIA BOXES
   --------------------------------------------------------------------------
   .m is the only place a crop happens. It must be a BLOCK box: overflow and
   aspect-ratio are inert on an inline box, which is how v1 shipped
   uncontained images.
   ========================================================================== */
.m {
  --media-ratio: 1.5;
  --ox: var(--object-x, 50%);
  --oy: var(--object-y, 50%);
  display: block; position: relative;
  overflow: hidden;
  aspect-ratio: var(--media-ratio);
  background: var(--m-bg, var(--limestone));
  isolation: isolate;
  width: 100%;
}
.m > picture { display: block; width: 100%; height: 100%; }
.m img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--ox) var(--oy);
  transition: transform var(--slow) var(--ease);
  will-change: auto;
}
.m[data-fit="contain"] img { object-fit: contain; }
/* Designed artwork is shown whole on its own ground and never crops. */
.m[data-artwork="true"] { --m-bg: var(--champagne); aspect-ratio: var(--media-ratio) !important; }
.m[data-artwork="true"] img { object-fit: contain; }

@media (max-width: 1099.98px) {
  .m { aspect-ratio: var(--media-ratio-md, var(--media-ratio)); }
}
@media (max-width: 759.98px) {
  .hdr__in { gap: 14px; }
  .hdr__act { gap: 12px; }
  .brand__name { font-size: 1.22rem; }
  .hdr__cta { padding: 13px 18px; font-size: .69rem; letter-spacing: .13em; }

  .m {
    aspect-ratio: var(--media-ratio-sm, var(--media-ratio-md, var(--media-ratio)));
    --ox: var(--object-x-sm, var(--object-x, 50%));
    --oy: var(--object-y-sm, var(--object-y, 50%));
  }
}

.fig { margin: 0; }
.fig__cap {
  margin-top: 14px;
  font-size: .755rem; line-height: 1.55; letter-spacing: .055em;
  color: var(--muted);
}
.fig__cap b, .fig__cap strong {
  display: block; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  font-size: .69rem; color: var(--ink); margin-bottom: 3px;
}
.dark .fig__cap { color: #A9A296; }
.dark .fig__cap b { color: #E8E2D8; }

/* hover depth — one shared behaviour */
.hoverable .m img { transform: scale(1.0001); }
.hoverable:hover .m img,
.hoverable:focus-within .m img { transform: scale(1.042); }

/* zoom affordance on lightbox-enabled media */
.m--zoom { padding: 0; border: 0; cursor: zoom-in; background: var(--m-bg, var(--limestone)); }
.m__zoomcue {
  position: absolute; right: 12px; bottom: 12px; width: 30px; height: 30px;
  border: 1px solid rgba(255,252,246,.55); border-radius: 50%;
  background: rgba(34,29,24,.28); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--mid) var(--ease);
  pointer-events: none;
}
.m__zoomcue::before, .m__zoomcue::after {
  content: ''; position: absolute; background: #fff;
}
.m__zoomcue::before { left: 9px; right: 9px; top: 14px; height: 1px; }
.m__zoomcue::after  { top: 9px; bottom: 9px; left: 14px; width: 1px; }
.m--zoom:hover .m__zoomcue, .m--zoom:focus-visible .m__zoomcue { opacity: 1; }

/* ==========================================================================
   7. HEADER
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--pearl);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.hdr__in {
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin-inline: auto; padding-inline: var(--gut);
  height: var(--hdr-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand__mark { width: 34px; height: 34px; display: block; }
.brand__txt { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--serif); font-size: 1.32rem; font-weight: 400;
  letter-spacing: .10em; color: var(--ink);
}
.brand__sub {
  font-size: .535rem; font-weight: 400; letter-spacing: .365em;
  text-transform: uppercase; color: var(--muted); margin-top: 5px;
}
.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav a {
  position: relative;
  font-size: .715rem; font-weight: 400; letter-spacing: .175em; text-transform: uppercase;
  color: var(--ink); padding: 6px 0;
  transition: color var(--fast) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--bronze-text); }

.hdr__act { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.hdr__tel {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .74rem; letter-spacing: .07em; color: var(--ink);
  white-space: nowrap;
}
.hdr__tel svg { color: var(--bronze-text); }
.hdr__tel:hover { color: var(--bronze-text); }

.burger {
  display: none;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); background: transparent; border-radius: var(--radius);
  cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 11px; right: 11px; height: 1px; background: var(--ink);
  transition: transform var(--mid) var(--ease), opacity var(--fast) var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
.is-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.is-open .burger span:nth-child(2) { opacity: 0; }
.is-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Header laid over the hero — a soft top wash, never a full-frame scrim.

   POSITIONING IS KEYED TO [data-over], NOT TO .hdr--over. The base .hdr is
   position: sticky, so it occupies flow space; .hdr--over used to be the thing
   that made it position: fixed. But .hdr--over is toggled off the moment the
   page scrolls past 24px — which put the header BACK into flow and pushed the
   whole document down by its own height: a 69px jump on a phone, 75px on
   desktop, with the document growing by the same amount (13,515 -> 13,584 px
   at 320x568). It fired on the first scroll of the home page, and again
   whenever the drawer opened, since that also removes .hdr--over.

   data-over is a build-time attribute that never changes, so keying position
   to it means the header is out of flow in BOTH states and nothing moves. The
   class now carries only the transparent styling it is named for. */
.hdr[data-over] { position: fixed; left: 0; right: 0; top: 0; }
.hdr--over {
  background: transparent; border-bottom-color: transparent;
}
.hdr--over::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(20,16,12,.62), rgba(20,16,12,.34) 52%, rgba(20,16,12,0));
}
.hdr--over .brand__name, .hdr--over .nav a, .hdr--over .hdr__tel { color: #fff; }
.hdr--over .brand__sub { color: rgba(255,252,246,.78); }
.hdr--over .hdr__tel svg { color: var(--bronze-soft); }
.hdr--over .nav a[aria-current="page"] { color: var(--bronze-soft); }
.hdr--over .btn--pill { border-color: rgba(255,252,246,.7); color: #fff; }
.hdr--over .btn--pill:hover { background: var(--pearl); border-color: var(--pearl); color: var(--espresso); }
.hdr--over .burger { border-color: rgba(255,252,246,.45); }
.hdr--over .burger span { background: #fff; }
.hdr--solid { background: var(--pearl); border-bottom-color: var(--line-soft); }

/* ==========================================================================
   8. DRAWER
   ========================================================================== */
.drawer {
  position: fixed; inset: 0; z-index: 88;
  background: var(--pearl);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--mid) var(--ease), visibility 0s linear var(--mid);
  overflow-y: auto;
  padding-top: var(--hdr-h);
}
.drawer.is-open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.drawer__in {
  max-width: calc(var(--wrap) + var(--gut) * 2);
  margin-inline: auto; padding: 28px var(--gut) calc(40px + var(--dock-h));
  min-height: 100%;
  display: flex; flex-direction: column; gap: 28px;
}
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 0; border-bottom: 1px solid var(--line-soft);
  font-family: var(--serif); font-size: 1.62rem; font-weight: 300; color: var(--ink);
}
.drawer__link svg { color: var(--bronze); opacity: .65; }
.drawer__link[aria-current="page"] { color: var(--bronze-text); }
.drawer__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.drawer__foot .btn:first-child { grid-column: 1 / -1; }

/* ==========================================================================
   9. HERO
   --------------------------------------------------------------------------
   A percentage height resolves to auto against an indefinite-height parent,
   which is how v4 shipped a hero that collapsed to its intrinsic ratio on
   mobile. The chain below is explicit at every level.
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 520px;
  max-height: 940px;
  overflow: hidden;
  background: var(--espresso);
}
@supports not (height: 100svh) { .hero { height: 100vh; } }

.hstage { position: absolute; inset: 0; }
.hslide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.hslide.is-on { opacity: 1; }
.hslide > .fig { height: 100%; margin: 0; }
.hslide .m {
  aspect-ratio: auto !important;
  height: 100%; width: 100%;
  background: var(--espresso);
}
.hslide .m > picture { height: 100%; }
.hslide .m img { height: 100%; }
.hslide.is-on .m img { animation: heroDrift 17s var(--ease) forwards; }
@keyframes heroDrift { from { transform: scale(1.008); } to { transform: scale(1.062); } }

/* the copy scrim is anchored to the lower-left corner only, so the frame is
   never flattened and the right two-thirds of every slide stays luminous */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(18,14,10,.70) 0%, rgba(18,14,10,.42) 26%, rgba(18,14,10,.06) 52%, rgba(18,14,10,0) 70%),
    linear-gradient(to right, rgba(18,14,10,.52) 0%, rgba(18,14,10,.18) 38%, rgba(18,14,10,0) 62%);
}
.hero__body {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--hdr-h) + 24px);
  padding-bottom: clamp(104px, 15vh, 168px);
  pointer-events: none;
}
.hero__body .wrap { width: 100%; }
.hcopy { max-width: 46ch; pointer-events: auto; }
.hcopy .eyebrow { color: var(--bronze-soft); margin-bottom: 1.05em; }
.hcopy h1, .hcopy .hcopy__t {
  /* wide enough that the authored <br> controls the line breaks; at 15ch the
     longest title wrapped to a third line the copy was not written for */
  max-width: 19ch;
  font-family: var(--serif); font-weight: 300; color: #fff;
  font-size: clamp(2.7rem, 5.6vw, 5.1rem);
  line-height: .99; letter-spacing: -.018em;
  margin: 0 0 .42em;
  text-shadow: 0 1px 30px rgba(12,9,6,.42);
}
.hcopy p {
  color: rgba(255,252,246,.92);
  font-size: clamp(.98rem, 1.1vw, 1.08rem); line-height: 1.66;
  max-width: 40ch; margin-bottom: 1.9em;
  text-shadow: 0 1px 18px rgba(12,9,6,.45);
}
.hcopy .btnrow { gap: 12px; }

/* slide copy transitions with the image */
.hslide-copy { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); position: absolute; pointer-events: none; }
.hslide-copy.is-on { opacity: 1; transform: none; position: relative; pointer-events: auto; }

/* controls */
.hctl {
  position: absolute; left: 0; right: 0; bottom: calc(30px + var(--dock-h)); z-index: 4;
}
.hctl__in {
  max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut);
  display: flex; align-items: center; gap: 20px;
}
.hdots { display: flex; gap: 10px; flex: 1 1 auto; max-width: 320px; }
.hdot {
  flex: 1 1 auto; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative;
}
.hdot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 1.5px;
  background: rgba(255,252,246,.34);
}
.hdot::after {
  content: ''; position: absolute; left: 0; top: 10px; height: 1.5px; width: 0;
  background: var(--pearl);
  transition: width .35s var(--ease);
}
.hdot[aria-current="true"]::after { width: 100%; }
.hdot[aria-current="true"].is-timing::after { transition: width 6.6s linear; }

/* The arrows sit WITH the dots, not at the far right of the rail.
   margin-left:auto pushed them into the bottom-right corner, which is also
   where the fixed WhatsApp button lives — so on arrival the float covered
   harrow--next completely (46px of a 46px control) and clipped harrow--prev,
   at 1440x900, 1366x768, 1366x600, 1280x800, 1280x600, 1180x820, 1024x768
   and 768x600. Both controls were only recoverable by scrolling ~49px, which
   is not a fix for the arrival view. Grouping dots + arrows as one cluster
   leaves the corner to the floating CTA and reads as a deliberate control
   group rather than two things that happen to share a corner. */
.harrows { display: flex; gap: 8px; }
.harrow {
  width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(255,252,246,.42); border-radius: 50%;
  background: rgba(18,14,10,.20); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
  backdrop-filter: blur(3px);
}
.harrow svg { width: 13px; height: 13px; }
.harrow:hover { background: var(--pearl); border-color: var(--pearl); color: var(--espresso); }

.hscroll {
  position: absolute; right: var(--gut); top: 50%; z-index: 3;
  transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  font-size: .6rem; letter-spacing: .42em; text-transform: uppercase;
  color: rgba(255,252,246,.62); pointer-events: none;
}

/* ==========================================================================
   10. REVEAL — one motion language
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--d1 { transition-delay: .09s; }
.reveal--d2 { transition-delay: .18s; }
.reveal--d3 { transition-delay: .27s; }

/* masked line reveal for display headings */
.maskline { display: block; overflow: hidden; }
.maskline > span { display: block; transform: translateY(102%); transition: transform 1.05s var(--ease); }
.is-in .maskline > span, .maskline.is-in > span { transform: none; }
.maskline:nth-child(2) > span { transition-delay: .1s; }

/* ==========================================================================
   11. SECTION PATTERNS
   ========================================================================== */

/* -- 11a. opening statement: oversized serif set against a tall image ---- */
.stmt { align-items: center; }
.stmt__fig { grid-column: 1 / span 5; position: relative; }
.stmt__body { grid-column: 7 / span 6; }
.stmt__q {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 2.85vw, 2.65rem); line-height: 1.28;
  letter-spacing: -.008em; color: var(--ink); margin-bottom: .9em;
  text-wrap: balance;
}
.stmt__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.fact__k { font-family: var(--serif); font-size: 1.55rem; color: var(--ink); line-height: 1.1; display: block; }
.fact__v { font-size: .715rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: 7px; display: block; }

/* -- 11b. section head: label left, heading + lede offset right --------- */
.shead { margin-bottom: clamp(34px, 4.5vw, 64px); gap: clamp(14px, 1.8vw, 24px) clamp(20px, 3vw, 44px); }
.shead__l { grid-column: 1 / -1; }
.shead__l .eyebrow { margin-bottom: .9em; }
.shead__r {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(18px, 3.4vw, 62px); align-items: end;
}
.shead__r .lede { margin-top: 0; max-width: 52ch; padding-bottom: .35em; }
.shead__act { grid-column: 1 / -1; margin-top: 6px; }

/* -- 11c. the atelier: a staggered editorial grid, not an equal card row - */
.atelier { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(22px, 2.6vw, 42px) clamp(18px, 2.2vw, 36px); }
.mat { display: block; grid-column: span 4; }
.mat--s3 { grid-column: span 3; }
.mat--s4 { grid-column: span 4; }
.mat--s5 { grid-column: span 5; }
/* A single, small optical lift on the middle column keeps the grid from
   reading as a product table without opening a gap at the end of a row. */
.mat--lift { margin-top: clamp(14px, 2.2vw, 40px); }
.mat__body { display: flex; align-items: baseline; gap: 12px; margin-top: 15px; }
.mat__n {
  font-family: var(--serif); font-size: clamp(1.06rem, 1.35vw, 1.32rem);
  color: var(--ink); line-height: 1.2; font-weight: 400;
}
.mat__i { margin-left: auto; font-size: .66rem; letter-spacing: .16em; color: var(--bronze-text); text-transform: uppercase; }
.mat__note { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.5; color: var(--muted); max-width: 34ch; }
.mat__more { margin-top: 11px; display: inline-flex; }
.mat__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 13px; }

/* a text control that opens the lightbox — a real focusable button, so the
   second asset behind a card never has to be hidden off-screen to work */
.zoomlink {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  font-family: var(--sans); font-size: .755rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink);
  padding-bottom: 5px; position: relative;
}
.zoomlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(.24); transform-origin: left;
  transition: transform var(--mid) var(--ease);
}
.zoomlink:hover::after, .zoomlink:focus-visible::after { transform: scaleX(1); }
.zoomlink__ic { position: relative; width: 10px; height: 10px; flex: 0 0 auto; }
.zoomlink__ic::before, .zoomlink__ic::after { content: ''; position: absolute; background: var(--bronze-text); }
.zoomlink__ic::before { left: 0; right: 0; top: 4.5px; height: 1px; }
.zoomlink__ic::after  { top: 0; bottom: 0; left: 4.5px; width: 1px; }
.dark .zoomlink { color: #E8E2D8; }


/* -- 11d. full-bleed band with an overlapping caption plate -------------- */
.bleed { position: relative; }
/* a genuinely edge-to-edge band. 100vw against a body that already hides
   horizontal overflow, so no scrollbar is created at any width. */
.bleed--full > .bleed__media {
  width: 100vw; margin-left: 50%; transform: translateX(-50vw);
}
.bleed .m { --m-bg: var(--limestone); }
.bleed__over {
  position: relative; z-index: 2;
  margin-top: clamp(-118px, -9vw, -46px);
  max-width: 480px;
  background: var(--pearl);
  padding: clamp(26px, 3vw, 42px);
  box-shadow: var(--shadow-md);
}
.bleed__over .eyebrow { margin-bottom: .8em; }
.bleed--r .bleed__over { margin-left: auto; }

/* -- 11e. offset pair: two figures at different sizes and baselines ------ */
.pair { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(20px, 3vw, 46px); align-items: start; }
.pair__a { grid-column: 1 / span 7; }
.pair__b { grid-column: 9 / span 4; padding-top: clamp(40px, 8vw, 120px); }
.pair--flip .pair__a { grid-column: 6 / span 7; order: 2; }
.pair--flip .pair__b { grid-column: 1 / span 4; order: 1; }

/* -- 11f. gateway panels ------------------------------------------------- */
.gates { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 34px); }
.gate { position: relative; display: block; overflow: hidden; background: var(--espresso); }
.gate .m { --m-bg: var(--espresso); }
.gate .m img { transition: transform 1.3s var(--ease); }
.gate:hover .m img, .gate:focus-visible .m img { transform: scale(1.05); }
.gate__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,12,9,.76) 0%, rgba(16,12,9,.32) 44%, rgba(16,12,9,.04) 78%); }
.gate__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(24px, 3vw, 42px); color: #fff; }
.gate__body h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.25rem); color: #fff; line-height: 1.06; margin-bottom: .3em; }
.gate__body p { color: rgba(255,252,246,.88); font-size: .89rem; line-height: 1.6; max-width: 40ch; margin-bottom: 1.1em; }
.gate__go { display: inline-flex; align-items: center; gap: .55em; font-size: .715rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.gate__go svg { transition: transform var(--mid) var(--ease); }
.gate:hover .gate__go svg { transform: translateX(5px); }

/* -- 11g. horizontal rail ------------------------------------------------
   scroll-behavior must be auto here: `smooth` makes every programmatic
   scrollLeft animate on the compositor, which made v4's deterministic
   fallback inert in a hidden frame. JS animates instead.
------------------------------------------------------------------------ */
.rail { position: relative; }
.rail__track {
  display: flex; gap: clamp(14px, 1.8vw, 26px);
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: var(--sand) transparent;
}
.rail__track::-webkit-scrollbar { height: 3px; }
.rail__track::-webkit-scrollbar-thumb { background: var(--sand); }
.rail__item { flex: 0 0 auto; scroll-snap-align: start; width: clamp(258px, 27vw, 400px); }
.rail__item--wide { width: clamp(320px, 44vw, 620px); }
.rail__nav { display: flex; gap: 8px; }
.rbtn {
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.rbtn svg { width: 12px; height: 12px; }
.rbtn:hover { background: var(--espresso); border-color: var(--espresso); color: var(--pearl); }
.rbtn[disabled] { opacity: .3; cursor: default; }
.rbtn[disabled]:hover { background: transparent; color: var(--ink); border-color: var(--line); }
.dark .rbtn { border-color: var(--line-dark); color: #E8E2D8; }
.dark .rbtn:hover { background: var(--pearl); color: var(--espresso); border-color: var(--pearl); }

/* -- 11h. role list (trade pathways) ------------------------------------ */
.roles { border-top: 1px solid var(--line-dark); }
.role {
  display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  padding: clamp(20px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--line-dark);
  transition: padding-left var(--mid) var(--ease);
}
.role:hover { padding-left: 10px; }
.role__n { font-size: .68rem; letter-spacing: .18em; color: var(--bronze-lite); }
.role__t { display: block; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 300; color: var(--pearl); line-height: 1.14; }
.role__d { display: block; font-size: .855rem; color: #A9A296; margin-top: 7px; max-width: 56ch; line-height: 1.6; }
.role__go { color: var(--bronze-lite); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.role__go svg { transition: transform var(--mid) var(--ease); }
.role:hover .role__go svg { transform: translateX(5px); }

/* -- 11i. the enquire band ---------------------------------------------- */
.band-enq { background: var(--ivory); padding-block: clamp(56px, 7.5vw, 106px); border-top: 1px solid var(--line-soft); }
.band-enq--tint { background: var(--limestone); }
.enqb { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.enqb__lead .lede { margin-top: 16px; }
.enqb__act { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.enqb__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* -- 11j. record plates (full slabs, shown whole) ------------------------ */
.plates { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 46px); }
.plate { background: var(--ivory); padding: clamp(16px, 2vw, 26px); }
.plate .m { --m-bg: var(--ivory); }
.plate__b { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 14px; }
.plate__n { font-family: var(--serif); font-size: 1.16rem; color: var(--ink); }

/* -- 11k. contact / info rail ------------------------------------------- */
.info { display: grid; gap: 28px; }
.info__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.info__k { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding-top: .35em; }
.info__v { font-size: 1rem; color: var(--ink); line-height: 1.62; overflow-wrap: anywhere; }
.info__v a { border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.info__v a:hover { border-color: var(--bronze-text); color: var(--bronze-text); }

/* ==========================================================================
   12. GALLERY
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 10px 18px; border: 1px solid var(--line); background: transparent;
  font-size: .69rem; letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
  cursor: pointer; border-radius: 999px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.chip:hover { border-color: var(--espresso); }
.chip[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--pearl); }

.mason { columns: 3; column-gap: clamp(16px, 2vw, 30px); }
.mason__i { break-inside: avoid; margin-bottom: clamp(16px, 2vw, 30px); display: block; }
.mason__i[hidden] { display: none; }
.gcap { margin-top: 10px; font-size: .74rem; line-height: 1.5; color: var(--muted); }
.gcap b { display: block; font-size: .655rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.gempty { padding: 40px 0; color: var(--muted); }

/* ==========================================================================
   13. LIGHTBOX
   ========================================================================== */
.lb {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(16, 13, 10, .95);
  display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 54px);
}
.lb.is-open { display: flex; }
.lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.lb__img { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; display: block; margin-inline: auto; }
.lb__cap { color: rgba(255,252,246,.72); font-size: .8rem; text-align: center; max-width: 70ch; margin-inline: auto; line-height: 1.55; }
.lb__x, .lb__p, .lb__n {
  position: absolute; width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255,252,246,.34); border-radius: 50%;
  background: rgba(255,252,246,.06); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lb__x { top: 20px; right: 20px; }
.lb__x::before, .lb__x::after { content: ''; position: absolute; left: 15px; right: 15px; top: 23px; height: 1px; background: #fff; }
.lb__x::before { transform: rotate(45deg); } .lb__x::after { transform: rotate(-45deg); }
.lb__p { left: 20px; top: 50%; transform: translateY(-50%); }
.lb__n { right: 20px; top: 50%; transform: translateY(-50%); }
.lb__p svg, .lb__n svg { width: 14px; height: 14px; }
.lb__x:hover, .lb__p:hover, .lb__n:hover { background: var(--pearl); color: var(--espresso); border-color: var(--pearl); }

/* ==========================================================================
   14. FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 44px 22px 0; position: relative;
  font-family: var(--serif); font-size: clamp(1.08rem, 1.5vw, 1.32rem); font-weight: 400; color: var(--ink);
  line-height: 1.34;
}
.faq__ic { position: absolute; right: 4px; top: 50%; width: 13px; height: 13px; margin-top: -6px; }
.faq__ic::before, .faq__ic::after { content: ''; position: absolute; background: var(--bronze-text); transition: transform var(--mid) var(--ease), opacity var(--fast) var(--ease); }
.faq__ic::before { left: 0; right: 0; top: 6px; height: 1px; }
.faq__ic::after  { top: 0; bottom: 0; left: 6px; width: 1px; }
.faq__q[aria-expanded="true"] .faq__ic::after { transform: rotate(90deg); opacity: 0; }
.faq__a { padding: 0 0 24px; max-width: 74ch; }
.faq__a p { color: var(--body); font-size: .95rem; line-height: 1.72; }

/* ==========================================================================
   15. FORM
   ========================================================================== */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.f { display: flex; flex-direction: column; gap: 8px; }
.f--full { grid-column: 1 / -1; }
.f > label { font-size: .69rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.f > label .req { color: var(--bronze-text); }
.f input, .f select, .f textarea {
  font-family: var(--sans); font-size: .96rem; font-weight: 300; color: var(--ink);
  background: var(--pearl);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px; width: 100%;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--bronze-text); outline: none; background: #fff; }
.f textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.f--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.form__note { font-size: .78rem; color: var(--muted); max-width: 46ch; line-height: 1.55; }
.form__msg { grid-column: 1 / -1; border: 1px solid var(--line); border-left: 2px solid var(--bronze); padding: 14px 16px; font-size: .88rem; color: var(--ink); background: var(--ivory); }

/* enquiry-type chooser */
.etypes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.etype { position: relative; }
.etype input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etype span {
  display: block; text-align: center; padding: 15px 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: .715rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
  cursor: pointer; line-height: 1.35;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.etype span:hover { border-color: var(--espresso); }
.etype input:checked + span { background: var(--espresso); border-color: var(--espresso); color: var(--pearl); }
.etype input:focus-visible + span { outline: 2px solid var(--bronze-text); outline-offset: 3px; }

/* quick routes */
.routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.route {
  display: flex; flex-direction: column; gap: 9px;
  padding: clamp(18px, 2.1vw, 26px);
  border: 1px solid var(--line); background: var(--pearl);
  transition: border-color var(--fast) var(--ease), transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.route:hover { border-color: var(--bronze); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.route svg { color: var(--bronze-text); width: 1.25rem; height: 1.25rem; }
.route__t { font-family: var(--serif); font-size: 1.22rem; color: var(--ink); line-height: 1.2; }
.route__d { font-size: .78rem; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }

/* ==========================================================================
   16. PAGE HEAD
   ========================================================================== */
.phead { padding-top: clamp(38px, 5vw, 66px); padding-bottom: clamp(30px, 4vw, 52px); }
.crumbs { font-size: .67rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(22px, 3vw, 40px); }
.crumbs a { color: var(--bronze-text); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { padding: 0 .5em; opacity: .5; }
.phead__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.phead__side { padding-bottom: .4em; }
.phead__side .btnrow { margin-top: 22px; }

/* ==========================================================================
   17. MAP
   ========================================================================== */
.mapwrap { position: relative; background: var(--limestone); aspect-ratio: 16 / 9; overflow: hidden; }
.mapwrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.32) contrast(1.02); }

/* ==========================================================================
   18. MOBILE DOCK + FLOATING WHATSAPP
   ========================================================================== */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  display: none;
  background: rgba(252, 250, 246, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dock a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 3px 11px;
  font-size: .61rem; letter-spacing: .05em; color: var(--ink);
  text-align: center;
}
.dock a svg { width: 18px; height: 18px; color: var(--bronze-text); }
.dock a span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock a:active { background: var(--limestone); }

.wafloat {
  position: fixed; right: clamp(18px, 2.4vw, 34px); bottom: clamp(18px, 2.4vw, 34px); z-index: 95;
  display: inline-flex; align-items: center; gap: .6em;
  padding: 13px 18px;
  background: var(--espresso); color: var(--pearl);
  border-radius: 999px; box-shadow: var(--shadow-md);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background var(--fast) var(--ease), transform var(--mid) var(--ease),
              opacity var(--mid) var(--ease), visibility 0s linear var(--mid);
}
.wafloat svg { width: 1.05rem; height: 1.05rem; color: var(--bronze-lite); }
.wafloat:hover { background: var(--charcoal); transform: translateY(-2px); }
/* withdrawn while the footer or a form is on screen, so a fixed button never
   sits on top of a link or a field */
.wafloat.is-away { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }

/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.ftr { background: var(--espresso); color: #A9A296; padding-block: clamp(56px, 7vw, 92px) 30px; }
.ftr__top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(38px, 5vw, 62px); border-bottom: 1px solid var(--line-dark); }
.brand__txt--ftr .brand__name { color: var(--pearl); font-size: 1.5rem; }
.brand__txt--ftr .brand__sub { color: #8C8478; }
.ftr__note { font-size: .82rem; line-height: 1.66; color: #948C80; margin-top: 18px; max-width: 40ch; }
.ftr__enq { display: inline-flex; align-items: center; gap: .55em; margin-top: 22px; font-size: .715rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-lite); }
.ftr__enq svg { transition: transform var(--mid) var(--ease); }
.ftr__enq:hover svg { transform: translateX(5px); }
.ftr__h { font-size: .67rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pearl); margin-bottom: 18px; font-weight: 500; font-family: var(--sans); }
.ftr__col ul li { margin-bottom: 11px; }
.ftr__col a, .ftr address { font-size: .875rem; color: #A9A296; line-height: 1.6; overflow-wrap: anywhere; }
.ftr__col a:hover { color: var(--pearl); }
.ftr address { color: #A9A296; }
.ftr__base { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; padding-top: 26px; font-size: .755rem; color: #877F73; }
.ftr__base a { color: #A9A296; }
.ftr__base a:hover { color: var(--pearl); }
.ftr__base-r { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.ftr__credit { color: #766F64; }
.ftr__credit a { color: #8C8478; border-bottom: 1px solid rgba(255,252,246,.16); }

/* ==========================================================================
   20. UTILITY
   ========================================================================== */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tagline { display: block; width: fit-content; }
.nowrap { white-space: nowrap; }
.vis-note {
  display: inline-block; margin-top: 8px;
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); border-left: 2px solid var(--bronze-soft); padding-left: 9px; line-height: 1.5;
}
.dark .vis-note { color: #948C80; }
.legal { max-width: 74ch; }
.legal h2 { font-family: var(--serif); font-size: 1.55rem; font-weight: 400; margin: 44px 0 14px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: .95rem; line-height: 1.75; }
.legal ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1.1em; }
.legal li { margin-bottom: .5em; }

/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */
@media (max-width: 1279.98px) {
  .stmt__fig { grid-column: 1 / span 5; }
  .stmt__body { grid-column: 7 / span 6; }
  .mason { columns: 3; }
}

/* the nav + phone + pill stop fitting before the brand does */
@media (max-width: 1099.98px) {
  :root { --hdr-h: 68px; }
  .nav { display: none; }
  /* the nav carried margin-left:auto; with it hidden the actions need it */
  .hdr__act { margin-left: auto; }
  .burger { display: block; }
  .hdr__tel span { display: none; }
  .hdr__tel { padding: 11px; border: 1px solid var(--line); border-radius: 50%; }
  .hdr__tel svg { width: 1.05rem; height: 1.05rem; }
  .hdr--over .hdr__tel { border-color: rgba(255,252,246,.4); }
  .shead__r { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .shead__r .lede { padding-bottom: 0; }
  .stmt__fig { grid-column: 1 / span 6; }
  .stmt__body { grid-column: 7 / span 6; }
  .pair__a { grid-column: 1 / span 8; }
  .pair__b { grid-column: 9 / span 4; padding-top: clamp(30px, 6vw, 70px); }
  .pair--flip .pair__a { grid-column: 5 / span 8; }
  .pair--flip .pair__b { grid-column: 1 / span 4; }
  .enqb { grid-template-columns: 1fr; gap: 30px; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .mason { columns: 2; }
  .etypes { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899.98px) {
  .gates { grid-template-columns: 1fr; }
  .plates { grid-template-columns: 1fr; }
  .routes { grid-template-columns: repeat(2, 1fr); }
  .phead__grid { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .mat--s3, .mat--s4, .mat--s5 { grid-column: span 6; }
  .mat--lift { margin-top: 0; }
}

@media (max-width: 759.98px) {
  .hdr__in { gap: 14px; }
  .hdr__act { gap: 12px; }
  .brand__name { font-size: 1.22rem; }
  .hdr__cta { padding: 13px 18px; font-size: .69rem; letter-spacing: .13em; }

  /* The dock is only measured by JS after boot. Until then --dock-h was 0, so
     for one frame the hero controls sat under the dock. Seeding the designed
     height here makes the FIRST paint correct; JS then refines it for the
     safe-area inset and any user font scaling. */
  :root { --gut: 20px; --dock-h: 61px; }
  body { font-size: 15.5px; }
  .dock { display: flex; }
  .wafloat { display: none; }
  .hero { max-height: none; }
  .hero__body { padding-bottom: clamp(126px, 20vh, 176px); }
  .hcopy { max-width: none; }
  /* 30px of clearance above the dock, measured from the dock's own height so
     the gap survives a taller dock from a safe-area inset or user font
     scaling. 30 rather than 22 is a thumb-reach judgement: the slider dots
     are a 22px target sitting directly above a 61px fixed bar, and 22px of
     air between two tap targets invites mis-taps. (An earlier note here
     blamed URL-bar collapse for an audit failure at 320x568. That was wrong:
     the failure was in the audit harness, which probed while a smooth
     scroll-to-top was still animating and so read every rect displaced by the
     residual scroll. At rest the clearance is exactly this value.) */
  .hctl { bottom: calc(30px + var(--dock-h)); }
  .hdots { max-width: none; }
  .harrows { display: none; }
  .hscroll { display: none; }
  .stmt__fig { grid-column: 1 / -1; }
  .stmt__body { grid-column: 1 / -1; }
  .stmt__facts { grid-template-columns: 1fr; gap: 14px; }
  .stmt__facts .fact { display: flex; align-items: baseline; gap: 12px; }
  .fact__v { margin-top: 0; }
  .pair__a, .pair__b, .pair--flip .pair__a, .pair--flip .pair__b { grid-column: 1 / -1; padding-top: 0; order: 0; }
  .bleed__over { margin-top: -34px; margin-inline: var(--gut); max-width: none; }
  .bleed--r .bleed__over { margin-left: var(--gut); }
  .mason { columns: 1; }
  .form { grid-template-columns: 1fr; }
  .etypes { grid-template-columns: repeat(2, 1fr); }
  .ftr__top { grid-template-columns: 1fr; gap: 32px; }
  .info__row { grid-template-columns: 1fr; gap: 6px; }
  .info__k { padding-top: 0; }
  .role { grid-template-columns: 1.8rem 1fr; }
  .role__go { grid-column: 2; margin-top: 10px; }
  .lb__p { left: 10px; } .lb__n { right: 10px; }
  .lb__img { max-height: calc(100vh - 190px); }
}

@media (max-width: 479.98px) {
  /* The header carried brand + phone + Enquire pill + burger, which measured
     398px of content at EVERY phone width — so the burger sat outside a 320,
     360 or 390px viewport and the menu could not be opened. It was invisible
     to an overflow check because body has overflow-x: hidden, which clips
     scrollWidth. Below 480px the phone icon is dropped (Call is in the dock),
     the wordmark loses its sub-label, and the pill tightens. */
  .hdr__in { gap: 12px; padding-inline: 16px; }
  .hdr__tel { display: none; }
  .hdr__act { gap: 10px; }
  .brand { gap: 9px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 1.14rem; letter-spacing: .07em; }
  .brand__sub { display: none; }
  .hdr__cta { padding: 12px 14px; font-size: .655rem; letter-spacing: .11em; }
  .burger { width: 38px; height: 38px; }
  .burger span { left: 10px; right: 10px; }
  .burger span:nth-child(1) { top: 13px; }
  .burger span:nth-child(2) { top: 18px; }
  .burger span:nth-child(3) { top: 23px; }

  .routes { grid-template-columns: 1fr; }
  .mat--s3, .mat--s4, .mat--s5 { grid-column: 1 / -1; }
  .drawer__foot { grid-template-columns: 1fr; }
  .btn { padding: 13px 20px; font-size: .715rem; letter-spacing: .15em; }
  .hcopy .btnrow .btn { flex: 1 1 auto; }
}

/* short viewports — the hero must never push copy into the header */
@media (max-height: 700px) and (min-width: 760px) {
  .hero { min-height: 460px; }
  .hcopy h1, .hcopy .hcopy__t { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
  .hcopy p { font-size: .95rem; margin-bottom: 1.3em; }
  .hero__body { padding-bottom: 96px; }
  .hctl { bottom: 22px; }
}
@media (max-height: 620px) and (max-width: 759.98px) {
  .hcopy h1, .hcopy .hcopy__t { font-size: clamp(2rem, 8vw, 2.7rem); }
  .hcopy p { font-size: .9rem; margin-bottom: 1.2em; }
  .hero__body { padding-bottom: calc(104px + var(--dock-h)); }
}

/* ==========================================================================
   22. REDUCED MOTION
   --------------------------------------------------------------------------
   Written as ONE universal rule rather than a list of selectors. v4.1 shipped
   a reduced-motion block that enumerated ".reveal .m img" and missed the eight
   hoverable cards that sat outside any .reveal. A universal rule cannot be
   outrun by a component added later.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* anything that animates INTO view must simply be in view */
  .reveal { opacity: 1 !important; transform: none !important; }
  .maskline > span { transform: none !important; }
  .m img, .hoverable:hover .m img, .hoverable:focus-within .m img,
  .gate:hover .m img { transform: none !important; }
  .hslide.is-on .m img { animation: none !important; }
  .hdot[aria-current="true"].is-timing::after { width: 100%; }
}

/* ==========================================================================
   23. PRINT
   ========================================================================== */
@media print {
  .hdr, .drawer, .dock, .wafloat, .hctl, .lb, .rail__nav, .chips { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .hero { height: auto; max-height: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; }
}

/* ==========================================================================
   24. LATE COMPONENTS
   ========================================================================== */

/* trade role blocks — a number/heading rail with the body offset beside it */
.trole { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(18px, 3vw, 54px); padding: clamp(26px, 3.4vw, 44px) 0; border-bottom: 1px solid var(--line); }
.trole:last-child { border-bottom: 0; }
.trole__h { display: flex; align-items: baseline; gap: 14px; }
.trole__n { font-size: .68rem; letter-spacing: .18em; color: var(--bronze-text); }
.trole__b .lede { max-width: 58ch; }

/* checked list */
.ticks { display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 22px; font-size: .93rem; line-height: 1.62; color: var(--body); }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px; background: var(--bronze);
}
.dark .ticks li { color: #B4ACA0; }

/* the hero figure never renders a caption */
.fig--hero { height: 100%; }
.fig--hero .fig__cap { display: none; }

@media (max-width: 899.98px) {
  .trole { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   25. GRID COLUMN UTILITIES
   --------------------------------------------------------------------------
   These replace inline `style="grid-column: …"`. An inline declaration cannot
   be overridden by a media query without !important, so pages written that way
   kept a two-column split at 390px — which on the Enquire page left the
   supporting rail one word wide. Classes collapse; inline styles do not.
   ========================================================================== */
.col-1-4  { grid-column: 1 / span 4; }
.col-1-5  { grid-column: 1 / span 5; }
.col-1-6  { grid-column: 1 / span 6; }
.col-1-7  { grid-column: 1 / span 7; }
.col-6-7  { grid-column: 6 / span 7; }
.col-7-6  { grid-column: 7 / span 6; }
.col-8-5  { grid-column: 8 / span 5; }
.col-9-4  { grid-column: 9 / span 4; }

@media (max-width: 1099.98px) {
  .col-1-7 { grid-column: 1 / span 7; }
  .col-9-4 { grid-column: 9 / span 4; }
  .col-1-4 { grid-column: 1 / span 5; }
  .col-6-7 { grid-column: 6 / span 7; }
}
@media (max-width: 899.98px) {
  .col-1-4, .col-1-5, .col-1-6, .col-1-7,
  .col-6-7, .col-7-6, .col-8-5, .col-9-4 { grid-column: 1 / -1; }
}

/* Quick-route cards go horizontal on a phone: four stacked vertical cards
   pushed the enquiry form most of a screen further down. */
@media (max-width: 479.98px) {
  /* The header carried brand + phone + Enquire pill + burger, which measured
     398px of content at EVERY phone width — so the burger sat outside a 320,
     360 or 390px viewport and the menu could not be opened. It was invisible
     to an overflow check because body has overflow-x: hidden, which clips
     scrollWidth. Below 480px the phone icon is dropped (Call is in the dock),
     the wordmark loses its sub-label, and the pill tightens. */
  .hdr__in { gap: 12px; padding-inline: 16px; }
  .hdr__tel { display: none; }
  .hdr__act { gap: 10px; }
  .brand { gap: 9px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 1.14rem; letter-spacing: .07em; }
  .brand__sub { display: none; }
  .hdr__cta { padding: 12px 14px; font-size: .655rem; letter-spacing: .11em; }
  .burger { width: 38px; height: 38px; }
  .burger span { left: 10px; right: 10px; }
  .burger span:nth-child(1) { top: 13px; }
  .burger span:nth-child(2) { top: 18px; }
  .burger span:nth-child(3) { top: 23px; }

  .route { flex-direction: row; align-items: center; gap: 14px; padding: 15px 16px; }
  .route svg { width: 1.15rem; height: 1.15rem; }
  .route__t { font-size: 1.06rem; }
  .route__d { font-size: .74rem; margin-left: auto; text-align: right; max-width: 55%; }
}