/* =========================================================
   BLACK LION GROUP - Global Stylesheet
   Dark Luxury Theme
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --bg: #08172e;
  --bg-elevated: #0e1e36;
  --bg-card: #15253f;
  --bg-card-hover: #15253f;

  --gold: #c2a06b;
  --gold-bright: #d4b888;
  --gold-dim: #8a5e2e;

  --text: #f7f2eb;
  --text-muted: #8c8474;
  --text-dim: #6e6a62;

  --border: rgba(194,160,107, 0.18);
  --border-strong: rgba(194,160,107, 0.45);

  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 10px 40px rgba(194,160,107, 0.15);

  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --max-w: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3rem, 6vw, 5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Preloader (intro animation) ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #08172e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 1.8s var(--ease), visibility 1.8s var(--ease);
}
.preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader-logo {
  width: 120px;
  height: 120px;
  opacity: 0;
  transform: scale(0.88);
  animation: preloader-pop 1.8s 0.2s var(--ease) forwards;
  /* Drop-shadow follows the lion silhouette (not a rectangular box) so the
     transparent PNG floats cleanly on the dark preloader background. */
  filter: drop-shadow(0 10px 30px rgba(194,160,107, 0.20));
}
.preloader-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--text);
  margin: 1.5rem 0 0;
  opacity: 0;
  text-transform: uppercase;
  animation: preloader-fade 1.4s 1.1s var(--ease) forwards;
}
.preloader-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  margin: 1.25rem 0;
  animation: preloader-line 2s 1.9s var(--ease) forwards;
}
.preloader-sub {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0;
  opacity: 0;
  animation: preloader-fade 1.4s 2.0s var(--ease) forwards;
}

@keyframes preloader-pop {
  to { opacity: 1; transform: scale(1); }
}
@keyframes preloader-fade {
  to { opacity: 1; }
}
@keyframes preloader-line {
  to { width: clamp(160px, 36vw, 260px); }
}

/* "Quick" mode for subsequent page loads in the same session */
.preloader.quick .preloader-logo,
.preloader.quick .preloader-title,
.preloader.quick .preloader-sub { animation-duration: 0.7s; animation-delay: 0s; }
.preloader.quick .preloader-line { animation-duration: 0.9s; animation-delay: 0.2s; }

/* Hide body scroll while preloader is showing */
body.preloading { overflow: hidden; }

/* Loader shows only on the first load of the session. On later page flips the
   inline head script sets html.skip-intro before render, so it never appears. */
html.skip-intro .preloader { display: none !important; }
html.skip-intro body { overflow: visible !important; }

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ============================================================
   PAGE GRID SYSTEM (home)
   A dark-charcoal canvas with the gold grid baked in as a fixed
   background layer, so the pattern runs continuously down the whole
   page. Sections decide how much grid shows through:
     - transparent sections  -> full grid visible (default)
     - .grid-quiet sections   -> charcoal veil, grid barely there
     - .grid-loud sections    -> brighter grid overlay on top
   This is the base; we tune intensity section by section.
   ============================================================ */
body.home {
  background-color: #0a0a0c;             /* near-black night sky, matches image top */
  background-image:
    linear-gradient(rgba(194,160,107, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,160,107, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center top;
  background-attachment: fixed;          /* one continuous grid down the page */
}

/* Page-wide twinkling starfield - a fixed night-sky backdrop that shows
   through every transparent section, so the grid area reads like a
   continuation of the sky at the top of the hero image. Sits behind the
   hero artwork (z-index -2) so the hero keeps its own stars up top. */
.page-stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* Static baseline scatter (no twinkle) - large, irregular tile so it never
     reads as a repeating cluster, and breaks up the synchronised pulsing. */
  background-image:
    radial-gradient(0.75px 0.75px at 140px 110px, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.75px 0.75px at 560px 360px, rgba(255,246,222,0.45), transparent),
    radial-gradient(1px 1px at 330px 620px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.75px 0.75px at 720px 200px, rgba(194,160,107,0.45), transparent),
    radial-gradient(0.75px 0.75px at 80px 480px, rgba(255,255,255,0.42), transparent);
  background-size: 780px 720px;
  background-repeat: repeat;
}
.page-stars::before,
.page-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}
/* Twinkle layer 1 - widely spaced, fast. */
.page-stars::before {
  background-image:
    radial-gradient(0.75px 0.75px at 90px 130px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 470px 330px, rgba(255,246,222,0.95), transparent),
    radial-gradient(0.75px 0.75px at 250px 560px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 620px 90px, rgba(194,160,107,0.9), transparent),
    radial-gradient(0.75px 0.75px at 360px 250px, rgba(255,255,255,0.8), transparent);
  background-size: 700px 640px;
  animation: twinkle 1.7s ease-in-out infinite;
}
/* Twinkle layer 2 - different spacing, slightly different speed, offset
   start so the two layers are never bright at the same moment. */
.page-stars::after {
  background-image:
    radial-gradient(0.75px 0.75px at 300px 80px, rgba(255,255,255,0.95), transparent),
    radial-gradient(0.75px 0.75px at 540px 470px, rgba(255,250,235,1), transparent),
    radial-gradient(1px 1px at 120px 300px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 440px 200px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 220px 520px, rgba(255,246,222,0.82), transparent);
  background-size: 600px 560px;
  animation: twinkle 2.5s ease-in-out infinite;
  animation-delay: -1.3s;
}
@media (prefers-reduced-motion: reduce) {
  .page-stars::before,
  .page-stars::after { animation: none; opacity: 0.6; }
}

/* Keep section content above any section-level grid veils/overlays. */
body.home section > .container { position: relative; z-index: 1; }

/* Quiet a section: lay a near-opaque charcoal veil so the grid recedes. */
body.home section.grid-quiet::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22, 23, 27, 0.92);
  pointer-events: none;
  z-index: 0;
}

/* Amplify a section: a brighter grid drawn on top of the base. */
body.home section.grid-loud::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(194,160,107, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,160,107, 0.10) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
a:hover { color: var(--gold-bright); }

button { font-family: inherit; cursor: pointer; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--text);
}

h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 600; }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }

p { margin: 0 0 1em; color: var(--text-muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-muted);
  max-width: 56ch;
}

.gold { color: var(--gold); }
.serif { font-family: var(--font-serif); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-y); position: relative; }

.section-head { max-width: 64rem; margin-bottom: 3.5rem; }
.section-head.center { text-align: center; margin-inline: auto; }

.divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 0 0 1.5rem;
}
.section-head.center .divider { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
  transition: all 0.3s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gold);
  color: #08172e;
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-bright);
  color: #08172e;
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Navigation ---------- */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: all 0.3s var(--ease);
}
.site-nav.scrolled {
  background: rgba(10, 10, 10, 0.95);
  border-bottom-color: var(--border);
}

/* Home page: let the top of the hero sky show through the nav.
   A soft top-down scrim (darkest at the very top, fading to clear)
   keeps the logo and menu - including the gold Contact Us near the
   satellite - readable without a visible bar. The solid bar returns
   on scroll via the .scrolled state above. */
.site-nav.nav-overlay:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
/* No scrim at the top, so give the logo and links a soft shadow to stay
   legible over the sky and the satellite. */
.site-nav.nav-overlay:not(.scrolled) .brand,
.site-nav.nav-overlay:not(.scrolled) .brand-text small,
.site-nav.nav-overlay:not(.scrolled) .nav-links a,
.site-nav.nav-overlay:not(.scrolled) .nav-toggle {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding-inline: var(--gutter);
  max-width: var(--max-w);
  margin-inline: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
  text-transform: uppercase;
}
.brand:hover { color: var(--text); }
.brand-mark { width: 36px; height: 36px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text small {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-top: 4px;
  font-weight: 400;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* Contact Us inherits the same font/size/spacing as the other nav links,
   but is rendered in gold to stand out. */
.nav-links a[href="contact.html"] { color: var(--gold); }
.nav-links a[href="contact.html"]:hover { color: var(--gold-bright); }

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--text);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }

/* Mobile nav */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    z-index: 110;
    position: relative;
  }
  .nav-links {
    /* Full-viewport overlay sized in dynamic viewport units so it always fits */
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    gap: 0;

    background: #08172e;
    /* Top padding clears the fixed header (76px); bottom is small */
    padding: 5.5rem var(--gutter) 1.25rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    z-index: 105;
    overflow: hidden;            /* never scroll */
  }
  .nav-links.open { transform: translateX(0); }

  /* Distribute items evenly between top and bottom of the available space */
  .nav-links li {
    width: 100%;
    flex: 0 1 auto;
  }
  .nav-links a {
    display: block;
    /* Vertical rhythm scales with viewport height so all items fit on any phone */
    padding: clamp(0.55rem, 1.4vh, 1rem) 0.25rem;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 2.8vh, 1.5rem);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .nav-links a:hover,
  .nav-links a.active { color: var(--gold); }
  .nav-links a::after { display: none; }

  /* Contact Us is now a regular inline link, so no special CTA styling is needed.
     justify-content: space-between on .nav-links has been replaced with space-evenly
     so all 7 items distribute cleanly across the available height. */
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(150px, 22vh, 240px);
  padding-bottom: 80px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(194,160,107, 0.10), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(194,160,107, 0.06), transparent 55%),
    linear-gradient(180deg, #08172e 0%, #050505 100%);
  z-index: -1;
}
/* Hero grid on its own layer (a sibling of the image), so on tablet/phone it
   stays stationary while the image + stars pan. */
.hero-grid {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(194,160,107, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(194,160,107, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  /* Lock to the viewport with the same origin as the page grid (body.home)
     so the hero grid lines up cell-for-cell with the rest of the page. */
  background-position: center top;
  background-attachment: fixed;
  /* Hidden over the bright upper sky/headline, then fully present from the
     mid-hero down to the bottom edge - so it meets the page grid below with
     matching density and no visible line at the seam. */
  mask-image: linear-gradient(to bottom, transparent 8%, #000 36%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 36%, #000 100%);
}

.hero-content { max-width: 56rem; position: relative; z-index: 1; }
/* Full-width readability scrim: a horizontal band across the whole screen
   that darkens behind the hero text and fades out above and below, so the
   text reads cleanly without looking like a contained box. */
.hero-scrim {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(7,7,9,0) 8%,
    rgba(7,7,9,0.5) 26%,
    rgba(7,7,9,0.5) 52%,
    rgba(7,7,9,0) 70%);
}
/* Lift the text off the background for legibility. */
.hero .eyebrow,
.hero h1,
.hero .lead { text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.hero .lead { color: var(--text); }
.hero h1 {
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 1.5rem;
}
.hero h1 span { color: var(--gold); font-style: italic; font-weight: 400; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}
/* Hide the scroll indicator on mobile - it overlaps the hero buttons */
@media (max-width: 720px) {
  .hero-scroll { display: none; }
}

/* Page hero (smaller, for non-home pages) */
.page-hero {
  position: relative;
  padding: 180px 0 80px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(194,160,107, 0.10), transparent 60%),
    linear-gradient(180deg, #08172e 0%, #050505 100%);
}
/* On night-sky pages, drop the opaque base so the page grid + stars show
   through the hero; keep only the soft gold top-glow. */
body.home .page-hero {
  background: radial-gradient(ellipse at 50% 0%, rgba(194,160,107, 0.10), transparent 60%);
}
.page-hero h1 { margin-bottom: 0.5rem; }
.page-hero .breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.5rem;
}
.page-hero .breadcrumb a { color: var(--text-muted); }
.page-hero .breadcrumb .sep { color: var(--gold); }

/* ---------- Branch Cards ---------- */
.branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.branch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2.25rem 2rem;
  min-height: 320px;
  transition: all 0.4s var(--ease);
  overflow: hidden;
}
.branch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(194,160,107, 0.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.branch-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-6px);
  background: var(--bg-card-hover);
}
.branch-card:hover::before { opacity: 1; }

.branch-icon {
  width: 48px; height: 48px;
  color: var(--gold);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  stroke-width: 1.4;
  display: block;
}
.branch-card h3 { position: relative; z-index: 1; margin-bottom: 0.75rem; }
.branch-card p { position: relative; z-index: 1; font-size: 0.95rem; margin-bottom: 1.5rem; }
.branch-card .more {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.branch-card:hover .more .arrow { transform: translateX(4px); }
.branch-card .arrow { transition: transform 0.3s var(--ease); }

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  /* Only ever 4, 2, or 1 across - never 3 + 1. */
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}
.stat {
  background: var(--bg);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.stat-num {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Two-column ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 800px) {
  .two-col { grid-template-columns: 1fr; }
}

.visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(194,160,107, 0.15), transparent 60%),
    var(--bg-elevated);
  overflow: hidden;
}
.visual::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, transparent 49%, rgba(194,160,107, 0.06) 50%, transparent 51%);
  background-size: 20px 20px;
}
.visual-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  opacity: 0.35;
}
.visual-mark svg { width: 50%; height: auto; }

/* ---------- Value list ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.5rem;
}
.value-item h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.value-item p { color: var(--text-muted); }
.value-item .branch-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
  display: block;
}

/* ---------- Capability list ---------- */
.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}
.capability {
  display: flex;
  gap: 1.25rem;
}
.capability .num {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.5rem;
}
.capability h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.capability p { font-size: 0.95rem; margin: 0; }

/* ---------- Team grid ---------- */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.team-card { text-align: left; }
.team-photo {
  aspect-ratio: 1 / 1.15;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(194,160,107, 0.18), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.team-card h4 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
}
.team-card .role {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* ---------- CTA Band ---------- */
.cta-band {
  background: var(--bg-elevated);
  border-block: 1px solid var(--border);
  text-align: center;
}
.cta-band h2 { max-width: 36ch; margin: 0 auto 1rem; }
.cta-band p { max-width: 48ch; margin: 0 auto 2rem; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-info p { margin-bottom: 0.5rem; }
.contact-info .label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
  margin-top: 1.75rem;
}
.contact-info .value { color: var(--text); font-size: 1.05rem; }

form.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.field { margin-bottom: 1.25rem; }
.field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  padding: 0.65rem 0;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--gold); }
.field select option { background: var(--bg-card); color: var(--text); }

/* ---------- Footer ---------- */
.site-footer {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: 4rem 0 2rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand .brand { margin-bottom: 1rem; }
.footer-brand p { font-size: 0.9rem; max-width: 32ch; }

.footer-col h5 {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
  font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { color: var(--text-muted); font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- Projects (Property page) ---------- */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: all 0.4s var(--ease);
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-4px);
}
.project-photo {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(194,160,107, 0.18), transparent 60%),
    linear-gradient(135deg, #1a1a1a, #0f0f0f);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem;
}
.project-photo::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, transparent 49%, rgba(194,160,107, 0.04) 50%, transparent 51%);
  background-size: 24px 24px;
}
.project-photo .tag {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(10, 10, 10, 0.75);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
}
.project-photo .tag.tag-sale {
  color: #08172e;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 600;
}
a.project-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
a.project-card:hover .project-body h4 { color: var(--gold); }
a.project-card .project-body h4 { transition: color 0.3s var(--ease); }
.project-body .price {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 0.6rem;
  letter-spacing: 0.02em;
}
.project-body .view-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.project-body .view-link .arrow { transition: transform 0.3s var(--ease); }
a.project-card:hover .view-link .arrow { transform: translateX(4px); }
.project-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.project-body .btn {
  align-self: flex-start;
}
.project-body p:has(+ a.btn) {
  margin-bottom: 1.75rem;
}
.project-body h4 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
}
.project-body .meta {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
.project-body p { font-size: 0.93rem; margin: 0; }

/* ---------- Data Table (dark) ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.data-table thead th {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-strong);
}
.data-table tbody td {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
.data-table tbody td:first-child { font-weight: 500; }
.data-table tbody tr:hover td { background: rgba(194,160,107, 0.03); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); }

/* ---------- Mine specs (definition list) ---------- */
.mine-specs {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.65rem;
  margin: 1.5rem 0 0;
  font-size: 0.93rem;
}
.mine-specs dt {
  color: var(--gold);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-self: baseline;
  padding-top: 0.18rem;
}
.mine-specs dd { margin: 0; color: var(--text); }

/* ---------- Brand mark as img ---------- */
img.brand-mark { object-fit: contain; }

/* ---------- Image fills ---------- */
.visual img.fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-photo img.fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-photo { position: relative; }
.project-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.55) 100%);
  pointer-events: none;
}

/* ---------- Hero with photo backdrop ---------- */
.hero-bg.with-photo {
  background:
    linear-gradient(180deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.65) 40%, rgba(10,10,10,0.92) 100%),
    var(--hero-photo, none) center/cover no-repeat,
    linear-gradient(180deg, #08172e 0%, #050505 100%);
}
.hero-bg.with-photo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(194,160,107, 0.10), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(194,160,107, 0.06), transparent 55%);
}

/* ---------- Hero illustration backdrop (home) ----------
   The four-branches night illustration is already dark and gold-toned,
   so the overlay is far lighter than the photo treatment: a soft scrim
   behind the headline at the top, near-clear at the horizon so the
   buildings read, and a fade to page-black at the bottom seam. */
.hero-bg.with-photo.hero-illustration {
  background-image:
    linear-gradient(180deg, rgba(10,10,12,0.55) 0%, rgba(10,10,12,0.16) 40%, rgba(10,10,12,0.05) 62%, rgba(10,10,12,0.55) 84%, rgba(10,10,12,1) 100%),
    none,
    linear-gradient(180deg, #0a0a0c 0%, #070708 100%);
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center bottom, center;
}
/* On wide / ultra-wide screens "cover" crops the top of the artwork, cutting
   off the starry sky. Shift the image's anchor upward (which drops the scene
   down in view) so the sky and stars stay visible. The wider the screen, the
   more we favour the sky. */
@media (min-width: 1200px) and (min-aspect-ratio: 1.85/1) {
  .hero-bg.with-photo.hero-illustration {
    background-position: center, center 32%, center;
  }
}
@media (min-width: 1200px) and (min-aspect-ratio: 2.2/1) {
  .hero-bg.with-photo.hero-illustration {
    background-position: center, center 20%, center;
  }
}
.hero-bg.with-photo.hero-illustration::before {
  background: none; /* the artwork supplies its own gold glow */
}
@keyframes heroPan {
  from { background-position: center, left bottom, center; }
  to   { background-position: center, right bottom, center; }
}

/* ---------- Glittering stars overlay (home hero) ----------
   The painted stars are baked into the artwork, so this adds a layer of
   twinkling points of light over the night sky that blend with them.
   Two tiled starfields fade in and out on different rhythms so the
   shimmer never pulses in unison. Masked to the upper sky only. */
.hero-stars {
  position: absolute;
  inset: 0 0 42% 0;            /* cover the sky, stop above the horizon */
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.hero-stars::before,
.hero-stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}
.hero-stars::before {
  background-image:
    radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 230px 40px, rgba(255,246,222,0.95), transparent),
    radial-gradient(1px 1px at 150px 200px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 320px 150px, rgba(194,160,107,0.95), transparent),
    radial-gradient(1px 1px at 90px 250px, rgba(255,255,255,0.9), transparent);
  background-size: 400px 300px;
  animation: twinkle 1.0s ease-in-out infinite;
}
.hero-stars::after {
  background-image:
    radial-gradient(1px 1px at 90px 50px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 300px 120px, rgba(255,250,235,1), transparent),
    radial-gradient(1px 1px at 180px 240px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 40px 160px, rgba(255,246,222,0.85), transparent);
  background-size: 360px 280px;
  animation: twinkle 1.3s ease-in-out infinite;
  animation-delay: -1s;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.05; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stars::before,
  .hero-stars::after { animation: none; opacity: 0.7; }
}

/* ---------- Shooting stars (home hero) ----------
   A handful of faint streaks that cross the sky on long, offset cycles -
   each is only visible for a brief moment, then dark for many seconds, so
   they appear occasionally and never at the same time. */
.shooting-stars {
  position: absolute;
  inset: 0 0 45% 0;            /* upper sky only */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.shooting-star {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transform: translate(0, 0) rotate(18deg);
  will-change: transform, opacity;
  animation: shoot var(--dur) ease-in var(--delay) infinite;
}
/* The leading dot - always small, leads the streak. */
.shooting-star::after {
  content: '';
  position: absolute;
  right: 0;
  top: -1px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.6));
}
/* The tail - grows out behind the dot as the star travels. */
.shooting-star::before {
  content: '';
  position: absolute;
  right: 0;
  top: -0.375px;
  width: 225px;
  height: 0.75px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85));
  transform-origin: right center;
  transform: scaleX(0);
  animation: shootTail var(--dur) ease-in var(--delay) infinite;
}
/* Each star: own position, travel time and long gap, staggered start. */
.ss1 { top: 14%; left: -10%; --dur: 14s; --delay:  -3s; }
.ss2 { top:  9%; left:  30%; --dur: 19s; --delay:  -9s; }
.ss3 { top: 26%; left:  12%; --dur: 23s; --delay: -15s; }
.ss4 { top: 18%; left:  55%; --dur: 17s; --delay: -21s; }

@keyframes shoot {
  0%   { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  1.5% { opacity: 1; }
  7%   { transform: translate(320px, 104px) rotate(18deg); opacity: 0; }
  100% { transform: translate(320px, 104px) rotate(18deg); opacity: 0; }
}
@keyframes shootTail {
  0%   { transform: scaleX(0); }
  1.5% { transform: scaleX(0); }
  7%   { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .shooting-stars { display: none; }
}
@media (max-width: 1024px) {
  /* On tablet/phone the image and the star layer are widened with a little
     overhang on each side and driven by the SAME transform animation, so
     they pan together as one - the stars travel with the sky instead of
     sitting still. The overhang keeps the edges from clipping. */
  .hero-bg.with-photo.hero-illustration {
    background-image:
      linear-gradient(180deg, rgba(10,10,12,0.62) 0%, rgba(10,10,12,0.30) 42%, rgba(10,10,12,0.12) 62%, rgba(10,10,12,0.6) 84%, rgba(10,10,12,1) 100%),
      none,
      linear-gradient(180deg, #0a0a0c 0%, #070708 100%);
    background-position: center, center bottom, center;
    left: -15%;
    right: -15%;
    animation: heroShift 22s ease-in-out infinite alternate;
  }
  .hero-stars {
    left: -15%;
    right: -15%;
    animation: heroShift 22s ease-in-out infinite alternate;
  }
}
@keyframes heroShift {
  from { transform: translateX(-10%); }
  to   { transform: translateX(10%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg.with-photo.hero-illustration,
  .hero-stars { animation: none !important; transform: none !important; left: 0; right: 0; }
}

/* Tighten the hero height on smaller screens so the stats section isn't
   pushed down with a big empty gap (the scroll cue is also hidden there). */
@media (max-width: 1024px) {
  .hero { min-height: 82vh; }
}
@media (max-width: 720px) {
  .hero {
    min-height: 72vh;
    padding-top: clamp(120px, 16vh, 180px);
    padding-bottom: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg.with-photo.hero-illustration {
    animation: none;
    background-position: center, center bottom, center;
  }
}

/* ---------- Office cards (Contact) ---------- */
.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}
.office {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2rem;
}
.office h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
}
.office .sub {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  display: block;
}
.office address { font-style: normal; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.7; font-size: 0.95rem; }
.office .row { display: flex; gap: 0.5rem; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.office .row .k { color: var(--text-dim); width: 1.5rem; flex-shrink: 0; }

/* ---------- Brand chips (e.g., automation tech) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.chip {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.55rem 0.9rem;
}

/* ---------- Brand roster grid (multi-category chip groups) ---------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.brand-group .eyebrow { display: block; margin: 0 0 0.5rem; }
.brand-group .chips { margin-top: 0.4rem; }

/* ---------- Featured Partners marquee tier (big-name brand boxes) ---------- */
.brand-marquee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 0 0 3rem;
}
.brand-marquee-item {
  background: var(--bg-card);
  padding: 1.75rem 1rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  transition: all 0.3s var(--ease);
}
.brand-marquee-item:hover {
  background: var(--bg-card-hover);
  color: var(--gold);
}

/* ---------- Page hero with background photo (used on branch pages) ---------- */
.page-hero.with-photo {
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.78) 65%, rgba(10,10,10,0.95) 100%),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding-top: 220px;
  padding-bottom: 100px;
}
.page-hero.with-photo .breadcrumb a,
.page-hero.with-photo .breadcrumb { color: var(--text-muted); }

/* ---------- Icon-based capability num (used in What We Do) ---------- */
.capability .num.icon-num {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 0.1rem;
  opacity: 0.9;
}
.capability .num.icon-num svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Day In Your Home: scene-card band ---------- */
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: 1px solid var(--border);
  margin-top: 2.5rem;
}
.day-scene {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  transition: background 0.3s var(--ease);
}
.day-scene:hover { background: var(--bg-card-hover); }
.day-scene:last-child { border-right: 0; }
@media (min-width: 720px) {
  .day-scene { border-bottom: 0; }
  .day-grid { grid-template-columns: repeat(4, 1fr); }
}
.day-scene .day-icon {
  width: 44px;
  height: 44px;
  color: var(--gold);
  margin-bottom: 1.5rem;
  opacity: 0.85;
}
.day-scene .day-icon svg { width: 100%; height: 100%; display: block; }
.day-scene h4 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 0.85rem;
  color: var(--text);
  letter-spacing: 0.005em;
}
.day-scene p {
  font-size: 0.93rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.65;
}

/* ---------- FAQ grid ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}
.faq-item h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.6rem;
}
.faq-item p {
  font-size: 0.93rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.65;
}

/* ---------- Certifications row (trust signal band) ---------- */
.cert-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 2rem;
  text-align: center;
  padding: 0.5rem 0;
}
.cert-band span {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}
.cert-band span + span::before {
  content: '·';
  color: var(--text-dim);
  margin-right: 2rem;
  margin-left: -2rem;
  font-weight: 400;
  letter-spacing: normal;
}

/* ---------- Testimonial pull-quote ---------- */
.testimonial-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 1.5rem;
}
.testimonial-attribution {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Full-width image strip (between sections) ---------- */
.image-strip {
  width: 100%;
  height: clamp(260px, 38vw, 520px);
  overflow: hidden;
  position: relative;
}
.image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.55));
  pointer-events: none;
}

/* ---------- Distributor / partner callout ---------- */
.partner-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.partner-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2rem 2.25rem;
  transition: border-color 0.3s var(--ease);
}
.partner-card:hover { border-color: var(--border-strong); }
.partner-card .eyebrow {
  display: block;
  margin-bottom: 0.6rem;
}
.partner-card h4 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 0.9rem;
}
.partner-card p { font-size: 0.93rem; margin: 0 0 1.1rem; }
.partner-card a {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.partner-card a .arrow { transition: transform 0.3s var(--ease); }
.partner-card a:hover .arrow { transform: translateX(4px); }

/* ---------- Legal footer line ---------- */
.legal-line {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

/* ---------- Sector Carousel (Home page "The Group") ---------- */
.sector-carousel { position: relative; }
.sector-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.sector-slide.active { opacity: 1; }
.sector-slide img.fill { width: 100%; height: 100%; object-fit: cover; }
.sector-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  z-index: 2;
}
.sector-label .sector-num {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.sector-label h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.sector-slide.sector-placeholder {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(194,160,107,0.18), transparent 60%),
    linear-gradient(135deg, #1a1a1a, #0c0c0c);
}
.sector-slide.sector-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(45deg, transparent 49%, rgba(194,160,107,0.05) 50%, transparent 51%);
  background-size: 28px 28px;
}
.sector-slide.sector-placeholder .placeholder-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  color: var(--gold);
  opacity: 0.55;
  width: 88px; height: 88px;
}
.sector-dots {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}
.sector-dots .dot {
  width: 28px; height: 2px;
  background: rgba(255,255,255,0.22);
  transition: background 0.3s var(--ease);
  display: block;
}
.sector-dots .dot.active { background: var(--gold); }

/* Sector carousel navigation arrows */
.sector-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  z-index: 4;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.sector-arrow:hover {
  background: rgba(10, 10, 10, 0.85);
  color: var(--gold);
  border-color: var(--border-strong);
}
.sector-arrow svg { width: 22px; height: 22px; }
.sector-arrow.prev { left: 0.75rem; }
.sector-arrow.next { right: 0.75rem; }
.sector-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------- Night-sky: drop the solid gray (elevated) section bands ---------- */
body.home section[style*="--bg-elevated"] { background: transparent !important; }
body.home .cta-band { background: transparent; }

/* ---------- Section rail (scroll navigator) ---------- */
.section-rail {
  position: fixed;
  left: clamp(12px, 2vw, 30px);
  top: 0; bottom: 0;
  width: 16px;
  z-index: 60;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.section-rail .spine {
  position: absolute; left: 3px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, rgba(194,160,107,.10), rgba(194,160,107,.42) 50%, rgba(194,160,107,.10));
}
.section-rail .rail-list {
  position: absolute; left: 0; top: 50%;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
}
.rail-item {
  display: flex; align-items: center; gap: 14px;
  height: 44px;
  text-decoration: none;
  pointer-events: auto;
  opacity: .22;
  transition: opacity .45s ease;
}
.rail-item .dot {
  width: 7px; height: 7px; flex: none;
  background: var(--bg); border: 1.5px solid var(--gold);
  rotate: 45deg; opacity: .6;
  transition: background .45s, border-color .45s, box-shadow .45s, opacity .45s;
}
.rail-item .nm {
  display: none;
  font-family: var(--font-serif);
  font-size: 14px; color: var(--text-muted);
  transition: color .45s, font-size .45s;
}
.rail-item.near { opacity: .5; }
.rail-item.active { opacity: 1; }
.rail-item.active .dot {
  background: var(--gold-bright); border-color: var(--gold-bright);
  opacity: 1; box-shadow: 0 0 9px rgba(224, 195, 120, .55);
}
.rail-item.active .nm { color: var(--text); font-size: 18px; }
.rail-item:hover .nm { color: var(--gold); }

@media (max-width: 1099px) { .section-rail { display: none; } }
@media (min-width: 1560px) {
  .section-rail { width: 200px; }
  .rail-item .nm { display: block; }
}

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 100px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .section-rail .rail-list { transition: none; }
}

/* ---- Remove gold section-divider lines between sections ---- */
body.home section[style*="--bg-elevated"] { border-block: 0 !important; }
body.home .cta-band { border-block: 0; }
body.home .site-footer { border-top: 0; }

/* ---- Section rail: no long spine line; show only when labels fit; ---- */
/* ---- on home it fades in only after the hero (handled in JS). ---- */
.section-rail .spine { display: none; }
.section-rail { display: none; width: 200px; transition: opacity .4s ease; }
@media (min-width: 1560px) { .section-rail { display: block; } }
.rail-item .nm { display: block; }
.section-rail.rail-hidden { opacity: 0; }
.section-rail.rail-hidden .rail-item { pointer-events: none; }

/* ---- Rail anchor marker: ring / orbit (replaces the diamond) ---- */
.section-rail { left: clamp(16px, 2vw, 34px); }
.rail-item .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--gold);
  rotate: 0deg;
  opacity: .55;
  position: relative;
}
.rail-item .dot::before {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  transition: opacity .45s ease;
}
.rail-item.near .dot { opacity: .55; }
.rail-item.active .dot {
  background: transparent;
  border-color: var(--gold-bright);
  opacity: 1;
  box-shadow: 0 0 9px rgba(224,195,120,.5);
}
.rail-item.active .dot::before { opacity: 1; }

/* ---- Rail markers: pad inward so the active glow isn't clipped by the rail mask ---- */
.section-rail .rail-list { padding-left: 16px; }

/* ---- Active rail marker: larger, gold, pulsing glow ---- */
.rail-item.active .dot {
  background: transparent;
  border-color: var(--gold-bright);
  opacity: 1;
  transform: scale(1.4);
  animation: railPulse 2.2s ease-in-out infinite;
}
.rail-item.active .dot::before { opacity: 1; }
@keyframes railPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(224, 195, 120, 0.4); }
  50%      { box-shadow: 0 0 16px rgba(224, 195, 120, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .rail-item.active .dot { animation: none; box-shadow: 0 0 10px rgba(224, 195, 120, 0.5); }
}

/* ---- Footer styled like the header: frosted dark panel + gold separating line ---- */
body.home .site-footer {
  background: rgba(10, 10, 10, 0.75);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

/* ---- Center the ring's core dot reliably ---- */
.rail-item .dot::before {
  inset: auto;
  top: 50%; left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

/* ---- Active dot: steady glow, NO pulse on the dot ---- */
.rail-item.active .dot {
  animation: none;
  transform: scale(1.4);
  box-shadow: 0 0 9px rgba(224, 195, 120, 0.5);
}

/* ---- Active label: gold + a slight glowing pulse ---- */
.rail-item.active .nm {
  color: var(--gold-bright);
  animation: railTextPulse 2.4s ease-in-out infinite;
}
@keyframes railTextPulse {
  0%, 100% { opacity: 1;    text-shadow: 0 0 6px rgba(224, 195, 120, 0.2); }
  50%      { opacity: 0.68; text-shadow: 0 0 12px rgba(224, 195, 120, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .rail-item.active .nm { animation: none; }
}

/* ---- Extra room below the final CTA so jumping to it hides the section above ---- */
body.home .cta-band {
  padding-top: clamp(6rem, 14vh, 11rem);
  padding-bottom: clamp(8rem, 18vh, 14rem);
}

/* ---- The Spaces gallery (Automation) ---- */
.space-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 12px;
  margin-top: 2.5rem;
}
.space-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.space-tile {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 4px;
}
.space-feature { aspect-ratio: 4 / 3; }
.space-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.space-tile:hover img { transform: scale(1.05); }
.space-tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(8,8,10,.72));
}
.space-tile figcaption {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--font-sans); font-size: .7rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text);
}
@media (max-width: 720px) {
  .space-gallery { grid-template-columns: 1fr; }
  .space-tile { aspect-ratio: 4 / 3; }
}

/* ---- The Spaces gallery v2: 2x2 room cards with descriptions ---- */
.space-gallery { grid-template-columns: repeat(2, 1fr); gap: 2.2rem; margin-top: 2.5rem; }
.space-tile { position: relative; margin: 0; overflow: visible; border: 0; border-radius: 0; }
.space-tile::after { content: none; }
.space-photo {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 4px;
  aspect-ratio: 16 / 10;
}
.space-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.space-tile:hover .space-photo img { transform: scale(1.05); }
.space-tile figcaption {
  position: static; padding: 1rem 0 0; left: auto; bottom: auto; z-index: auto;
  font-size: inherit; letter-spacing: normal; text-transform: none;
}
.space-tile figcaption h4 { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 .4rem; color: var(--text); }
.space-tile figcaption p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.6; }
@media (max-width: 760px) { .space-gallery { grid-template-columns: 1fr; } }

/* ============================================================
   ROUNDED-CORNER DESIGN SYSTEM
   One shared radius on every card, box, chip, field and image,
   matching the automation gallery photos. Full-bleed bars (nav,
   footer) and circular marks (dots, rings) stay as they are.
   ============================================================ */
:root { --radius: 4px; }

.btn,
.branch-card,
.value-item,
.day-scene,
.chip,
.brand-marquee-item,
.brand-group,
.cert-band span,
.office,
.contact-form,
.field input,
.field textarea,
.field select,
.faq-item,
.data-table,
.sector-arrow {
  border-radius: var(--radius);
}

/* Image / grid containers — rounded and clipped so the contents follow */
.project-card,
.visual,
.sector-carousel,
.stats,
.table-wrap {
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---- Connected grids: round only the OUTER container, inner dividers stay square ---- */
.day-scene, .brand-marquee-item { border-radius: 0; }
.day-grid, .brand-marquee { border-radius: var(--radius); overflow: hidden; }

/* ---- Full gold outline around project images (match the gallery) ---- */
.project-photo { border: 1px solid var(--border); }

/* ---- Home hero buttons: stay legible over the bright gold horizon ---- */
.hero .btn-primary { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }
.hero .btn-ghost {
  background: rgba(10, 10, 12, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-color: rgba(244, 241, 232, 0.45);
  color: var(--text);
}
.hero .btn-ghost:hover {
  background: rgba(10, 10, 12, 0.62);
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: translateY(-2px);
}

/* ---- Double the page-wide starfield density (rest of pages + home below hero) ---- */
.page-stars {
  background-image:
    radial-gradient(0.75px 0.75px at 140px 110px, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.75px 0.75px at 560px 360px, rgba(255,246,222,0.45), transparent),
    radial-gradient(1px 1px at 330px 620px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.75px 0.75px at 720px 200px, rgba(194,160,107,0.45), transparent),
    radial-gradient(0.75px 0.75px at 80px 480px, rgba(255,255,255,0.42), transparent),
    radial-gradient(0.75px 0.75px at 400px 60px, rgba(255,255,255,0.45), transparent),
    radial-gradient(0.75px 0.75px at 240px 290px, rgba(194,160,107,0.4), transparent),
    radial-gradient(1px 1px at 650px 540px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.75px 0.75px at 480px 680px, rgba(255,246,222,0.42), transparent),
    radial-gradient(0.75px 0.75px at 20px 250px, rgba(255,255,255,0.45), transparent);
  background-size: 780px 720px;
}
.page-stars::before {
  background-image:
    radial-gradient(0.75px 0.75px at 90px 130px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 470px 330px, rgba(255,246,222,0.95), transparent),
    radial-gradient(0.75px 0.75px at 250px 560px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 620px 90px, rgba(194,160,107,0.9), transparent),
    radial-gradient(0.75px 0.75px at 360px 250px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.75px 0.75px at 180px 420px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 560px 480px, rgba(255,246,222,0.88), transparent),
    radial-gradient(1px 1px at 40px 300px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 690px 250px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 320px 60px, rgba(255,255,255,0.9), transparent);
  background-size: 700px 640px;
}
.page-stars::after {
  background-image:
    radial-gradient(0.75px 0.75px at 300px 80px, rgba(255,255,255,0.95), transparent),
    radial-gradient(0.75px 0.75px at 540px 470px, rgba(255,250,235,1), transparent),
    radial-gradient(1px 1px at 120px 300px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 440px 200px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 220px 520px, rgba(255,246,222,0.82), transparent),
    radial-gradient(0.75px 0.75px at 60px 120px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 380px 360px, rgba(255,255,255,0.88), transparent),
    radial-gradient(0.75px 0.75px at 500px 60px, rgba(194,160,107,0.85), transparent),
    radial-gradient(1px 1px at 200px 430px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 580px 280px, rgba(255,246,222,0.8), transparent);
  background-size: 600px 560px;
}

/* ---- Starfield randomness: 30 stars spread over 6 independently-timed layers ---- */
.page-stars {
  background-image:
    radial-gradient(0.75px 0.75px at 140px 110px, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.75px 0.75px at 560px 360px, rgba(255,246,222,0.45), transparent),
    radial-gradient(1px 1px at 330px 620px, rgba(255,255,255,0.4), transparent),
    radial-gradient(0.75px 0.75px at 720px 200px, rgba(194,160,107,0.45), transparent),
    radial-gradient(0.75px 0.75px at 80px 480px, rgba(255,255,255,0.42), transparent);
  background-size: 780px 720px;
}
.page-stars::before {
  background-image:
    radial-gradient(0.75px 0.75px at 90px 130px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 470px 330px, rgba(255,246,222,0.95), transparent),
    radial-gradient(0.75px 0.75px at 250px 560px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 620px 90px, rgba(194,160,107,0.9), transparent),
    radial-gradient(0.75px 0.75px at 360px 250px, rgba(255,255,255,0.8), transparent);
  background-size: 700px 640px;
  animation: twinkle 1.7s ease-in-out infinite;
}
.page-stars::after {
  background-image:
    radial-gradient(0.75px 0.75px at 300px 80px, rgba(255,255,255,0.95), transparent),
    radial-gradient(0.75px 0.75px at 540px 470px, rgba(255,250,235,1), transparent),
    radial-gradient(1px 1px at 120px 300px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 440px 200px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 220px 520px, rgba(255,246,222,0.82), transparent);
  background-size: 600px 560px;
  animation: twinkle 2.5s ease-in-out infinite;
  animation-delay: -1.3s;
}
.page-stars i { position: absolute; inset: 0; display: block; pointer-events: none;
  background-repeat: repeat;
  background-image:
    radial-gradient(0.75px 0.75px at 400px 60px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 240px 290px, rgba(194,160,107,0.85), transparent),
    radial-gradient(1px 1px at 650px 540px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 480px 520px, rgba(255,246,222,0.85), transparent),
    radial-gradient(0.75px 0.75px at 20px 250px, rgba(255,255,255,0.9), transparent);
  background-size: 660px 600px;
  animation: twinkle 3.1s ease-in-out infinite;
  animation-delay: -0.5s;
}
.page-stars i::before, .page-stars i::after { content: ''; position: absolute; inset: 0; background-repeat: repeat; }
.page-stars i::before {
  background-image:
    radial-gradient(0.75px 0.75px at 180px 420px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 60px 120px, rgba(255,255,255,0.88), transparent),
    radial-gradient(0.75px 0.75px at 380px 360px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 500px 60px, rgba(194,160,107,0.85), transparent),
    radial-gradient(1px 1px at 200px 430px, rgba(255,255,255,0.85), transparent);
  background-size: 540px 520px;
  animation: twinkle 2.1s ease-in-out infinite;
  animation-delay: -1.9s;
}
.page-stars i::after {
  background-image:
    radial-gradient(0.75px 0.75px at 560px 480px, rgba(255,246,222,0.88), transparent),
    radial-gradient(1px 1px at 40px 300px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 690px 250px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 320px 60px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 580px 280px, rgba(255,246,222,0.82), transparent);
  background-size: 720px 680px;
  animation: twinkle 3.7s ease-in-out infinite;
  animation-delay: -2.6s;
}
@media (prefers-reduced-motion: reduce) {
  .page-stars i, .page-stars i::before, .page-stars i::after { animation: none; opacity: 0.6; }
}

/* ---- Starfield v3: ~60 stars across 6 independently-flickering groups ---- */
.page-stars {
  background-image:
    radial-gradient(0.75px 0.75px at 140px 110px, rgba(255,255,255,0.5), transparent),
    radial-gradient(0.75px 0.75px at 560px 360px, rgba(255,246,222,0.45), transparent),
    radial-gradient(1px 1px at 330px 620px, rgba(255,255,255,0.42), transparent),
    radial-gradient(0.75px 0.75px at 720px 200px, rgba(194,160,107,0.45), transparent),
    radial-gradient(0.75px 0.75px at 80px 480px, rgba(255,255,255,0.42), transparent),
    radial-gradient(0.75px 0.75px at 400px 60px, rgba(255,255,255,0.48), transparent),
    radial-gradient(0.75px 0.75px at 240px 290px, rgba(194,160,107,0.42), transparent),
    radial-gradient(1px 1px at 650px 540px, rgba(255,255,255,0.42), transparent),
    radial-gradient(0.75px 0.75px at 480px 680px, rgba(255,246,222,0.44), transparent),
    radial-gradient(0.75px 0.75px at 20px 250px, rgba(255,255,255,0.46), transparent);
  background-size: 780px 720px;
  animation: twinkle 2.3s ease-in-out infinite;
}
.page-stars::before {
  background-image:
    radial-gradient(0.75px 0.75px at 90px 130px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 470px 330px, rgba(255,246,222,0.95), transparent),
    radial-gradient(0.75px 0.75px at 250px 560px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 620px 90px, rgba(194,160,107,0.9), transparent),
    radial-gradient(0.75px 0.75px at 360px 250px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.75px 0.75px at 180px 420px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 560px 480px, rgba(255,246,222,0.88), transparent),
    radial-gradient(1px 1px at 40px 300px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 690px 250px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 320px 60px, rgba(255,255,255,0.9), transparent);
  background-size: 700px 640px;
  animation: twinkle 1.7s ease-in-out infinite;
  animation-delay: -1.3s;
}
.page-stars::after {
  background-image:
    radial-gradient(0.75px 0.75px at 300px 80px, rgba(255,255,255,0.95), transparent),
    radial-gradient(0.75px 0.75px at 540px 470px, rgba(255,250,235,1), transparent),
    radial-gradient(1px 1px at 120px 300px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 440px 200px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 220px 520px, rgba(255,246,222,0.82), transparent),
    radial-gradient(0.75px 0.75px at 60px 120px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 380px 360px, rgba(255,255,255,0.88), transparent),
    radial-gradient(0.75px 0.75px at 500px 60px, rgba(194,160,107,0.85), transparent),
    radial-gradient(1px 1px at 200px 430px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 580px 280px, rgba(255,246,222,0.8), transparent);
  background-size: 600px 560px;
  animation: twinkle 2.9s ease-in-out infinite;
  animation-delay: -0.6s;
}
.page-stars i {
  background-image:
    radial-gradient(0.75px 0.75px at 80px 90px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 350px 50px, rgba(255,246,222,0.85), transparent),
    radial-gradient(1px 1px at 600px 180px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 200px 380px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 470px 520px, rgba(255,255,255,0.88), transparent),
    radial-gradient(0.75px 0.75px at 120px 540px, rgba(255,246,222,0.85), transparent),
    radial-gradient(0.75px 0.75px at 640px 420px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 300px 250px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 30px 300px, rgba(194,160,107,0.82), transparent),
    radial-gradient(0.75px 0.75px at 520px 80px, rgba(255,255,255,0.88), transparent);
  background-size: 660px 600px;
  animation: twinkle 3.5s ease-in-out infinite;
  animation-delay: -2.1s;
}
.page-stars i::before {
  background-image:
    radial-gradient(0.75px 0.75px at 60px 60px, rgba(255,255,255,0.9), transparent),
    radial-gradient(0.75px 0.75px at 300px 120px, rgba(255,246,222,0.88), transparent),
    radial-gradient(1px 1px at 480px 300px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 150px 440px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 420px 480px, rgba(255,255,255,0.88), transparent),
    radial-gradient(0.75px 0.75px at 240px 240px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 510px 100px, rgba(255,246,222,0.85), transparent),
    radial-gradient(1px 1px at 90px 320px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 360px 40px, rgba(194,160,107,0.82), transparent),
    radial-gradient(0.75px 0.75px at 200px 500px, rgba(255,255,255,0.9), transparent);
  background-size: 540px 520px;
  animation: twinkle 2.1s ease-in-out infinite;
  animation-delay: -1.0s;
}
.page-stars i::after {
  background-image:
    radial-gradient(0.75px 0.75px at 100px 80px, rgba(255,255,255,0.95), transparent),
    radial-gradient(0.75px 0.75px at 400px 200px, rgba(255,246,222,0.9), transparent),
    radial-gradient(1px 1px at 660px 100px, rgba(255,255,255,0.88), transparent),
    radial-gradient(0.75px 0.75px at 250px 460px, rgba(194,160,107,0.85), transparent),
    radial-gradient(0.75px 0.75px at 540px 560px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 160px 600px, rgba(255,246,222,0.82), transparent),
    radial-gradient(0.75px 0.75px at 700px 380px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 330px 300px, rgba(255,255,255,0.88), transparent),
    radial-gradient(0.75px 0.75px at 60px 420px, rgba(194,160,107,0.82), transparent),
    radial-gradient(0.75px 0.75px at 600px 260px, rgba(255,246,222,0.82), transparent);
  background-size: 720px 680px;
  animation: twinkle 3.1s ease-in-out infinite;
  animation-delay: -2.7s;
}
@media (prefers-reduced-motion: reduce) {
  .page-stars { animation: none; }
}

/* ---- More static stars + gentler twinkle (bright peak, never fully dims out) ---- */
@keyframes pageTwinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.page-stars::before,
.page-stars::after,
.page-stars i,
.page-stars i::before,
.page-stars i::after { animation-name: pageTwinkle; }

/* The base layer is now a denser set of steady (non-twinkling) stars. */
.page-stars {
  animation: none;
  background-image:
    radial-gradient(1px 1px at 60px 90px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 200px 60px, rgba(255,246,222,0.8), transparent),
    radial-gradient(0.75px 0.75px at 360px 130px, rgba(255,255,255,0.82), transparent),
    radial-gradient(1px 1px at 520px 80px, rgba(194,160,107,0.78), transparent),
    radial-gradient(0.75px 0.75px at 700px 160px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.75px 0.75px at 120px 260px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 300px 320px, rgba(255,246,222,0.8), transparent),
    radial-gradient(0.75px 0.75px at 480px 280px, rgba(255,255,255,0.82), transparent),
    radial-gradient(0.75px 0.75px at 640px 360px, rgba(194,160,107,0.78), transparent),
    radial-gradient(1px 1px at 780px 240px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.75px 0.75px at 80px 460px, rgba(255,255,255,0.85), transparent),
    radial-gradient(0.75px 0.75px at 260px 520px, rgba(255,246,222,0.8), transparent),
    radial-gradient(1px 1px at 440px 480px, rgba(255,255,255,0.82), transparent),
    radial-gradient(0.75px 0.75px at 600px 560px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.75px 0.75px at 760px 500px, rgba(194,160,107,0.78), transparent),
    radial-gradient(0.75px 0.75px at 160px 660px, rgba(255,255,255,0.84), transparent),
    radial-gradient(1px 1px at 380px 700px, rgba(255,246,222,0.8), transparent),
    radial-gradient(0.75px 0.75px at 560px 680px, rgba(255,255,255,0.82), transparent);
  background-size: 820px 760px;
}

/* ===== Starfield v4: ~35 stars, 10 alternating shimmer groups + steady baseline ===== */
@keyframes pageTwinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.page-stars i { position: absolute; inset: 0; display: block; pointer-events: none; background-repeat: repeat; }
.page-stars i::before, .page-stars i::after { content: ''; position: absolute; inset: 0; background-repeat: repeat; }

/* Steady baseline (no twinkle) */
.page-stars {
  animation: none;
  background-image:
    radial-gradient(1px 1px at 120px 90px, rgba(255,255,255,0.8), transparent),
    radial-gradient(0.75px 0.75px at 520px 220px, rgba(255,246,222,0.75), transparent),
    radial-gradient(1px 1px at 760px 480px, rgba(255,255,255,0.78), transparent),
    radial-gradient(0.75px 0.75px at 300px 660px, rgba(194,160,107,0.72), transparent),
    radial-gradient(0.75px 0.75px at 880px 300px, rgba(255,255,255,0.76), transparent);
  background-size: 980px 820px;
}
/* 10 shimmer groups, each its own clock */
.page-stars::before {
  background-image:
    radial-gradient(1px 1px at 80px 100px, rgba(255,255,255,1), transparent),
    radial-gradient(0.75px 0.75px at 420px 300px, rgba(255,246,222,1), transparent),
    radial-gradient(0.75px 0.75px at 560px 480px, rgba(255,255,255,1), transparent);
  background-size: 640px 560px; animation: pageTwinkle 1.0s ease-in-out -0.2s infinite;
}
.page-stars::after {
  background-image:
    radial-gradient(0.75px 0.75px at 300px 80px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 540px 420px, rgba(194,160,107,1), transparent),
    radial-gradient(0.75px 0.75px at 120px 520px, rgba(255,255,255,1), transparent);
  background-size: 700px 600px; animation: pageTwinkle 1.3s ease-in-out -1.0s infinite;
}
.page-stars i:nth-of-type(1) {
  background-image:
    radial-gradient(0.75px 0.75px at 200px 120px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 480px 280px, rgba(255,246,222,1), transparent),
    radial-gradient(0.75px 0.75px at 60px 440px, rgba(255,255,255,1), transparent);
  background-size: 600px 540px; animation: pageTwinkle 1.5s ease-in-out -0.6s infinite;
}
.page-stars i:nth-of-type(1)::before {
  background-image:
    radial-gradient(1px 1px at 100px 60px, rgba(255,255,255,1), transparent),
    radial-gradient(0.75px 0.75px at 360px 360px, rgba(194,160,107,1), transparent),
    radial-gradient(0.75px 0.75px at 500px 200px, rgba(255,255,255,1), transparent);
  background-size: 560px 520px; animation: pageTwinkle 1.8s ease-in-out -1.8s infinite;
}
.page-stars i:nth-of-type(1)::after {
  background-image:
    radial-gradient(0.75px 0.75px at 320px 180px, rgba(255,255,255,1), transparent),
    radial-gradient(0.75px 0.75px at 600px 460px, rgba(255,246,222,1), transparent),
    radial-gradient(1px 1px at 160px 540px, rgba(255,255,255,1), transparent);
  background-size: 660px 600px; animation: pageTwinkle 1.1s ease-in-out -1.3s infinite;
}
.page-stars i:nth-of-type(2) {
  background-image:
    radial-gradient(0.75px 0.75px at 60px 240px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 400px 80px, rgba(255,246,222,1), transparent),
    radial-gradient(0.75px 0.75px at 540px 400px, rgba(255,255,255,1), transparent);
  background-size: 620px 560px; animation: pageTwinkle 1.4s ease-in-out -0.4s infinite;
}
.page-stars i:nth-of-type(2)::before {
  background-image:
    radial-gradient(0.75px 0.75px at 260px 320px, rgba(255,255,255,1), transparent),
    radial-gradient(0.75px 0.75px at 480px 120px, rgba(194,160,107,1), transparent),
    radial-gradient(1px 1px at 120px 460px, rgba(255,255,255,1), transparent);
  background-size: 580px 540px; animation: pageTwinkle 1.6s ease-in-out -2.0s infinite;
}
.page-stars i:nth-of-type(2)::after {
  background-image:
    radial-gradient(1px 1px at 380px 240px, rgba(255,255,255,1), transparent),
    radial-gradient(0.75px 0.75px at 640px 520px, rgba(255,246,222,1), transparent),
    radial-gradient(0.75px 0.75px at 200px 80px, rgba(255,255,255,1), transparent);
  background-size: 700px 640px; animation: pageTwinkle 1.9s ease-in-out -1.5s infinite;
}
.page-stars i:nth-of-type(3) {
  background-image:
    radial-gradient(0.75px 0.75px at 140px 160px, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 460px 440px, rgba(255,246,222,1), transparent),
    radial-gradient(0.75px 0.75px at 560px 100px, rgba(255,255,255,1), transparent);
  background-size: 600px 560px; animation: pageTwinkle 1.2s ease-in-out -0.8s infinite;
}
.page-stars i:nth-of-type(3)::before {
  background-image:
    radial-gradient(0.75px 0.75px at 300px 380px, rgba(255,255,255,1), transparent),
    radial-gradient(0.75px 0.75px at 80px 260px, rgba(194,160,107,1), transparent),
    radial-gradient(1px 1px at 600px 520px, rgba(255,255,255,1), transparent);
  background-size: 660px 620px; animation: pageTwinkle 1.7s ease-in-out -2.3s infinite;
}
.page-stars i:nth-of-type(3)::after { background: none; animation: none; }

/* ---- Hero stat counters (animated, in the first section) ---- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.hstat { display: flex; flex-direction: column; gap: 0.45rem;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hstat.in { opacity: 1; transform: none; }
.hstat-num {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  font-weight: 500;
  color: var(--gold-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.hstat-label {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hstat { opacity: 1; transform: none; transition: none; }
}

/* ===== Hero cleanup: lift headline, frosted stats panel ===== */
.hero { padding-top: clamp(115px, 17vh, 200px); }
.hero h1 { max-width: 20ch; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: clamp(1.75rem, 4vh, 2.75rem) 0;
  max-width: 50rem;
  background: rgba(10, 10, 12, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.hstat {
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(0.85rem, 2vw, 1.5rem);
  border-left: 1px solid var(--border);
  gap: 0.5rem;
}
.hstat:first-child { border-left: 0; }
.hstat-num {
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(224, 195, 120, 0.25);
}
.hstat-label { font-size: 0.68rem; }

/* Tablet: 2 x 2 inside the panel */
@media (max-width: 880px) {
  .hero-stats { grid-template-columns: 1fr 1fr; max-width: 32rem; }
  .hstat:nth-child(odd) { border-left: 0; }
  .hstat:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Phone: compact, full-width panel + stacked full-width buttons + smaller headline */
@media (max-width: 560px) {
  .hero { min-height: auto; padding-top: 96px; padding-bottom: 2.5rem; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); margin-bottom: 1.25rem; }
  .hero-stats { max-width: 100%; margin: 1.5rem 0; }
  .hstat { padding: 0.95rem 0.6rem; gap: 0.3rem; align-items: center; text-align: center; }
  .hstat-num { font-size: 1.6rem; }
  .hstat-label { font-size: 0.6rem; letter-spacing: 0.12em; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ===== Hero stats: refined hairline row (frosted panel removed) ===== */
.hero-stats {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 50rem;
  margin: clamp(1.75rem, 4vh, 2.75rem) 0;
  padding: clamp(1.4rem, 3vh, 2rem) 0 0;
}
.hstat {
  padding: 0 clamp(1rem, 2.6vw, 2.2rem);
  border-left: 1px solid var(--border);
  gap: 0.55rem;
}
.hstat:first-child { border-left: 0; padding-left: 0; }
.hstat-num {
  color: var(--gold-bright);
  font-size: clamp(2rem, 3.4vw, 3rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.hstat-label { font-size: 0.68rem; color: var(--text-muted); }

@media (max-width: 880px) {
  .hero-stats { grid-template-columns: 1fr 1fr; max-width: 32rem; }
  .hstat { padding: 0 clamp(1rem, 3vw, 1.6rem); }
  .hstat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hstat:nth-child(even) { border-left: 1px solid var(--border); }
  .hstat:nth-child(n+3) { border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 0.5rem; }
}
@media (max-width: 560px) {
  .hero-stats { max-width: 100%; }
  .hstat { padding: 0 0.6rem; align-items: center; text-align: center; }
  .hstat:nth-child(n+3) { padding-top: 1.25rem; }
  .hstat-num { font-size: 1.7rem; }
  .hstat-label { font-size: 0.6rem; letter-spacing: 0.12em; }
}

/* ===== Home hero: balance vertical spacing (center the content) ===== */
.hero {
  align-items: center;
  padding-top: clamp(96px, 10vh, 150px);
  padding-bottom: clamp(72px, 10vh, 130px);
}
.hero-scrim {
  background: linear-gradient(180deg,
    rgba(7, 7, 9, 0) 10%,
    rgba(7, 7, 9, 0.55) 30%,
    rgba(7, 7, 9, 0.55) 60%,
    rgba(7, 7, 9, 0) 80%);
}
@media (max-width: 1024px) { .hero { min-height: 88vh; } }
@media (max-width: 720px) {
  .hero { min-height: 84vh; padding-top: 92px; padding-bottom: 2.5rem; }
}
@media (max-width: 560px) {
  .hero { min-height: 88vh; padding-top: 88px; padding-bottom: 2.25rem; }
}

/* ===== Hero entrance: headline / text / buttons emerge after the intro ===== */
.hero-content.pre-reveal > * { opacity: 0; transform: translateY(28px); filter: blur(6px); }
.hero-content.reveal-in > * {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease), filter 0.8s ease;
}
.hero-content.reveal-in > *:nth-child(1) { transition-delay: 0.05s; }
.hero-content.reveal-in > *:nth-child(2) { transition-delay: 0.30s; }
.hero-content.reveal-in > *:nth-child(3) { transition-delay: 0.55s; }

/* ===== Hero entrance v2: fade + rise (no blur) + brand gold hairline draw ===== */
.hero-content.pre-reveal > * { opacity: 0; transform: translateY(26px); filter: none; }
.hero-content.reveal-in > * {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.95s var(--ease), transform 1s var(--ease);
}
.hero-content.reveal-in > h1 { transition-delay: 0.05s; }
.hero-content.reveal-in > .lead { transition-delay: 0.5s; }
.hero-content.reveal-in > .hero-actions { transition-delay: 0.68s; }

.hero-rule {
  width: clamp(140px, 20vw, 260px);
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--gold), rgba(194,160,107, 0));
  margin: 1.6rem 0 1.9rem;
}
.hero-content.pre-reveal > .hero-rule { opacity: 1; transform: none; width: 0; }
.hero-content.reveal-in > .hero-rule {
  opacity: 1; transform: none;
  width: clamp(140px, 20vw, 260px);
  transition: width 1s var(--ease) 0.32s;
}

/* ===== Hero entrance v3 (premium): line-mask headline + measured settle ===== */
:root { --ease-lux: cubic-bezier(0.16, 1, 0.3, 1); }

.hero-title .ln { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero-title .ln-i { display: block; will-change: transform; }
.hero-title .ln, .hero-title .ln-i { color: inherit; font-style: normal; font-weight: inherit; }
.hero-em { color: var(--gold); font-style: italic; font-weight: 400; }

/* Hidden state (only once JS adds .pre-reveal; otherwise everything shows) */
.hero-content.pre-reveal > h1 { opacity: 1; transform: none; filter: none; }
.hero-content.pre-reveal .hero-title .ln-i { transform: translateY(120%); }
.hero-content.pre-reveal > .hero-rule { width: 0; opacity: 1; transform: none; }
.hero-content.pre-reveal > .lead,
.hero-content.pre-reveal > .hero-actions { opacity: 0; transform: translateY(24px); filter: none; }

/* Revealed state */
.hero-content.reveal-in .hero-title .ln-i {
  transform: translateY(0);
  transition: transform 1.15s var(--ease-lux);
}
.hero-content.reveal-in .hero-title .ln:nth-child(1) .ln-i { transition-delay: 0.10s; }
.hero-content.reveal-in .hero-title .ln:nth-child(2) .ln-i { transition-delay: 0.26s; }
.hero-content.reveal-in > .hero-rule {
  width: clamp(140px, 20vw, 260px);
  transition: width 1.1s var(--ease-lux) 0.5s;
}
.hero-content.reveal-in > .lead,
.hero-content.reveal-in > .hero-actions {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease-lux), transform 1.15s var(--ease-lux);
}
.hero-content.reveal-in > .lead { transition-delay: 0.66s; }
.hero-content.reveal-in > .hero-actions { transition-delay: 0.86s; }

/* ===== Hero entrance v4 (futuristic): scanline sweep reveal ===== */
:root { --ease-scan: cubic-bezier(0.5, 0, 0.2, 1); }

/* Each headline line hugs its text so the gold bar ends exactly at the text edge */
.hero-title .ln {
  display: block;
  width: fit-content;
  overflow: visible;
  position: relative;
  padding-bottom: 0;
  margin-bottom: 0;
}
.hero-title .ln-i { display: block; will-change: clip-path; }

/* The sweeping gold scanline bar */
.hero-title .ln::after {
  content: "";
  position: absolute;
  top: -0.02em;
  bottom: 0.02em;
  left: 0;
  width: 2px;
  background: var(--gold-bright);
  box-shadow: 0 0 14px 2px rgba(224, 195, 120, 0.85), 0 0 4px rgba(224, 195, 120, 1);
  opacity: 0;
  pointer-events: none;
}

/* Hidden state */
.hero-content.pre-reveal > h1 { opacity: 1; transform: none; filter: none; }
.hero-content.pre-reveal .hero-title .ln-i { transform: none; clip-path: inset(0 101% 0 0); }
.hero-content.pre-reveal > .hero-rule { width: 0; opacity: 1; transform: none; }
.hero-content.pre-reveal > .lead,
.hero-content.pre-reveal > .hero-actions { opacity: 0; transform: translateY(22px); filter: none; }

/* Revealed: text wipes open left-to-right behind the bar */
.hero-content.reveal-in .hero-title .ln-i {
  transform: none;
  clip-path: inset(0 0% 0 0);
  animation: scanReveal 1.0s var(--ease-scan) forwards;
  transition: none;
}
.hero-content.reveal-in .hero-title .ln::after {
  animation: scanBar 1.0s var(--ease-scan) forwards;
}
.hero-content.reveal-in .hero-title .ln:nth-child(1) .ln-i,
.hero-content.reveal-in .hero-title .ln:nth-child(1)::after { animation-delay: 0.15s; }
.hero-content.reveal-in .hero-title .ln:nth-child(2) .ln-i,
.hero-content.reveal-in .hero-title .ln:nth-child(2)::after { animation-delay: 0.52s; }

@keyframes scanReveal {
  from { clip-path: inset(0 101% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes scanBar {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Hairline + supporting copy settle in after the headline finishes */
.hero-content.reveal-in > .hero-rule {
  width: clamp(140px, 20vw, 260px);
  transition: width 1.0s var(--ease-scan) 1.55s;
}
.hero-content.reveal-in > .lead,
.hero-content.reveal-in > .hero-actions {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease-scan), transform 1.0s var(--ease-scan);
}
.hero-content.reveal-in > .lead { transition-delay: 1.7s; }
.hero-content.reveal-in > .hero-actions { transition-delay: 1.9s; }

/* ===== Hero entrance v5: one scanline reveals the ENTIRE block ===== */
.hero-content { position: relative; }

/* Neutralize all earlier per-element reveals — the whole block reveals as one */
.hero-content.pre-reveal > *,
.hero-content.reveal-in > * { opacity: 1 !important; transform: none !important; filter: none !important; }
.hero-content.pre-reveal .hero-title .ln-i,
.hero-content.reveal-in .hero-title .ln-i { clip-path: none !important; animation: none !important; transform: none !important; }
.hero-title .ln::after { display: none !important; }
.hero-content.pre-reveal > .hero-rule,
.hero-content.reveal-in > .hero-rule { width: clamp(140px, 20vw, 260px) !important; transition: none !important; }

/* Clip the whole content block, then wipe it open left-to-right */
.hero-content.pre-reveal { clip-path: inset(0 101% 0 0); }
.hero-content.reveal-in { animation: heroWipe 1.7s var(--ease-scan) forwards; }
@keyframes heroWipe {
  from { clip-path: inset(0 101% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* The single glowing gold line that travels across the block */
.hero-content.pre-reveal::after,
.hero-content.reveal-in::after {
  content: "";
  position: absolute;
  top: -10px; bottom: -10px; left: 0; width: 2px;
  background: var(--gold-bright);
  box-shadow: 0 0 18px 3px rgba(224, 195, 120, 0.8), 0 0 5px rgba(224, 195, 120, 1);
  opacity: 0; pointer-events: none; z-index: 2;
}
.hero-content.reveal-in::after { animation: heroBar 1.7s var(--ease-scan) forwards; }
@keyframes heroBar {
  0%   { left: 0;    opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ===== Hero tweaks: smaller heading, thinner/softer sweep line ===== */
.hero-title { font-size: clamp(2.25rem, 4.6vw, 3.9rem); }

.hero-content.pre-reveal::after,
.hero-content.reveal-in::after {
  width: 1px;
  box-shadow: 0 0 6px 0.5px rgba(224, 195, 120, 0.45);
}

/* ===== Hero word-build: per-word smooth Bezier arc ===== */
.hero-title .hl-line{display:block;color:var(--text);font-style:normal;font-weight:600;}
.hero-title .hl-line.gold{color:var(--gold);font-style:italic;font-weight:400;}
.hero-title .hl-line .w,.hero .lead .w,.hero-actions .w{color:inherit;font-style:inherit;font-weight:inherit;}
.hero-content .w{display:inline-block;will-change:transform;}
.hero-content.wb-init .w{opacity:0;}
.hero-content.wb-play .w.l{animation:heroArcL 0.8s linear both;}
.hero-content.wb-play .w.r{animation:heroArcR 0.8s linear both;}
@media (prefers-reduced-motion: reduce){.hero-content.wb-init .w{opacity:1;}.hero-content .w{animation:none !important;}}
@keyframes heroArcL{0.00%{opacity:0.000;transform:translate(-100.00px,26.00px)}2.50%{opacity:0.156;transform:translate(-101.06px,5.91px)}5.00%{opacity:0.313;transform:translate(-99.40px,-10.55px)}7.50%{opacity:0.469;transform:translate(-95.74px,-23.79px)}10.00%{opacity:0.625;transform:translate(-90.67px,-34.21px)}12.50%{opacity:0.781;transform:translate(-84.66px,-42.14px)}15.00%{opacity:0.938;transform:translate(-78.10px,-47.91px)}17.50%{opacity:1;transform:translate(-71.28px,-51.82px)}20.00%{opacity:1;transform:translate(-64.45px,-54.14px)}22.50%{opacity:1;transform:translate(-57.78px,-55.11px)}25.00%{opacity:1;transform:translate(-51.39px,-54.96px)}27.50%{opacity:1;transform:translate(-45.37px,-53.89px)}30.00%{opacity:1;transform:translate(-39.78px,-52.07px)}32.50%{opacity:1;transform:translate(-34.65px,-49.67px)}35.00%{opacity:1;transform:translate(-29.99px,-46.82px)}37.50%{opacity:1;transform:translate(-25.80px,-43.67px)}40.00%{opacity:1;transform:translate(-22.06px,-40.30px)}42.50%{opacity:1;transform:translate(-18.75px,-36.82px)}45.00%{opacity:1;transform:translate(-15.84px,-33.31px)}47.50%{opacity:1;transform:translate(-13.31px,-29.83px)}50.00%{opacity:1;transform:translate(-11.11px,-26.45px)}52.50%{opacity:1;transform:translate(-9.21px,-23.20px)}55.00%{opacity:1;transform:translate(-7.58px,-20.13px)}57.50%{opacity:1;transform:translate(-6.19px,-17.26px)}60.00%{opacity:1;transform:translate(-5.02px,-14.61px)}62.50%{opacity:1;transform:translate(-4.02px,-12.21px)}65.00%{opacity:1;transform:translate(-3.19px,-10.04px)}67.50%{opacity:1;transform:translate(-2.50px,-8.12px)}70.00%{opacity:1;transform:translate(-1.93px,-6.44px)}72.50%{opacity:1;transform:translate(-1.46px,-5.00px)}75.00%{opacity:1;transform:translate(-1.08px,-3.78px)}77.50%{opacity:1;transform:translate(-0.78px,-2.77px)}80.00%{opacity:1;transform:translate(-0.54px,-1.95px)}82.50%{opacity:1;transform:translate(-0.36px,-1.31px)}85.00%{opacity:1;transform:translate(-0.23px,-0.83px)}87.50%{opacity:1;transform:translate(-0.13px,-0.48px)}90.00%{opacity:1;transform:translate(-0.07px,-0.25px)}92.50%{opacity:1;transform:translate(-0.03px,-0.10px)}95.00%{opacity:1;transform:translate(-0.01px,-0.03px)}97.50%{opacity:1;transform:translate(-0.00px,-0.00px)}100.00%{opacity:1;transform:translate(0.00px,0.00px)}}
@keyframes heroArcR{0.00%{opacity:0.000;transform:translate(100.00px,26.00px)}2.50%{opacity:0.156;transform:translate(101.06px,5.91px)}5.00%{opacity:0.313;transform:translate(99.40px,-10.55px)}7.50%{opacity:0.469;transform:translate(95.74px,-23.79px)}10.00%{opacity:0.625;transform:translate(90.67px,-34.21px)}12.50%{opacity:0.781;transform:translate(84.66px,-42.14px)}15.00%{opacity:0.938;transform:translate(78.10px,-47.91px)}17.50%{opacity:1;transform:translate(71.28px,-51.82px)}20.00%{opacity:1;transform:translate(64.45px,-54.14px)}22.50%{opacity:1;transform:translate(57.78px,-55.11px)}25.00%{opacity:1;transform:translate(51.39px,-54.96px)}27.50%{opacity:1;transform:translate(45.37px,-53.89px)}30.00%{opacity:1;transform:translate(39.78px,-52.07px)}32.50%{opacity:1;transform:translate(34.65px,-49.67px)}35.00%{opacity:1;transform:translate(29.99px,-46.82px)}37.50%{opacity:1;transform:translate(25.80px,-43.67px)}40.00%{opacity:1;transform:translate(22.06px,-40.30px)}42.50%{opacity:1;transform:translate(18.75px,-36.82px)}45.00%{opacity:1;transform:translate(15.84px,-33.31px)}47.50%{opacity:1;transform:translate(13.31px,-29.83px)}50.00%{opacity:1;transform:translate(11.11px,-26.45px)}52.50%{opacity:1;transform:translate(9.21px,-23.20px)}55.00%{opacity:1;transform:translate(7.58px,-20.13px)}57.50%{opacity:1;transform:translate(6.19px,-17.26px)}60.00%{opacity:1;transform:translate(5.02px,-14.61px)}62.50%{opacity:1;transform:translate(4.02px,-12.21px)}65.00%{opacity:1;transform:translate(3.19px,-10.04px)}67.50%{opacity:1;transform:translate(2.50px,-8.12px)}70.00%{opacity:1;transform:translate(1.93px,-6.44px)}72.50%{opacity:1;transform:translate(1.46px,-5.00px)}75.00%{opacity:1;transform:translate(1.08px,-3.78px)}77.50%{opacity:1;transform:translate(0.78px,-2.77px)}80.00%{opacity:1;transform:translate(0.54px,-1.95px)}82.50%{opacity:1;transform:translate(0.36px,-1.31px)}85.00%{opacity:1;transform:translate(0.23px,-0.83px)}87.50%{opacity:1;transform:translate(0.13px,-0.48px)}90.00%{opacity:1;transform:translate(0.07px,-0.25px)}92.50%{opacity:1;transform:translate(0.03px,-0.10px)}95.00%{opacity:1;transform:translate(0.01px,-0.03px)}97.50%{opacity:1;transform:translate(0.00px,-0.00px)}100.00%{opacity:1;transform:translate(0.00px,0.00px)}}

/* Project card: white location line beneath the project name */
.project-body .card-loc{ font-size: 0.95rem; color: var(--text); margin: 0 0 0.7rem; font-weight: 400; line-height: 1.4; }

/* ===== Remove gray fills site-wide so the starfield shows through =====
   (Counter boxes use .stat { background: var(--bg) } and are intentionally left dark) */
section[style*="bg-elevated"] { background: transparent !important; }
.cta-band,
.branch-card, .branch-card:hover,
.project-card,
.office,
.partner-card,
.day-scene, .day-scene:hover,
.brand-marquee-item, .brand-marquee-item:hover,
.chip,
form.contact-form { background: transparent !important; }

/* ===== Hero word-build: gray during build, smooth top-down colour change =====
   Colour change is filter-only (opacity is owned by the fly-in animation), so words never disappear. */
.hero-content.wb-init .w{ filter: grayscale(1) brightness(0.62); transition: filter 0.5s ease; }
.hero-content.wb-init .w.lit{ filter: none; }

/* ===== Automation brands: compact + remove gold background ===== */
.brand-marquee{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.4rem 1.6rem;
  background: transparent !important; border: 0 !important;
  margin: 0 0 1.75rem; padding: 0;
}
.brand-marquee-item{
  background: transparent !important; padding: 0.1rem 0;
  font-size: 1rem; color: var(--text);
}
.brand-marquee-item:hover{ background: transparent !important; color: var(--gold); }

.brand-grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem 1.75rem; margin-top: 1.5rem;
}
.brand-group .eyebrow{ margin: 0 0 0.3rem; }
.brand-group .chips{ gap: 0.35rem; margin-top: 0.3rem; }
.chip{ font-size: 0.62rem; letter-spacing: 0.1em; padding: 0.3rem 0.6rem; }

/* ===== Smooth cross-page navigation (removes the hard-cut "stutter") ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtFadeOut 0.26s ease both; }
::view-transition-new(root) { animation: vtFadeIn 0.30s ease both; }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtFadeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ===== Mobile menu: right-side slide-out drawer (items from the top) ===== */
@media (max-width: 900px) {
  .nav-links {
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    inset: 0 0 0 auto;
    width: min(72vw, 270px);
    min-width: 0;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow-y: auto;

    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;

    background: rgba(10, 10, 12, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: -18px 0 55px rgba(0, 0, 0, 0.5);
    padding: 86px 1.25rem 1.5rem;

    opacity: 1;
    transform: translateX(100%);
    transition: transform 0.32s var(--ease);
    pointer-events: none;
  }
  .nav-links.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links li { width: 100%; flex: 0 0 auto; }
  .nav-links a {
    padding: 0.72rem 0.2rem;
    font-size: 1.06rem;
    line-height: 1.2;
    text-align: left;
    border-bottom: 1px solid rgba(194,160,107, 0.12);
  }
  .nav-links li:last-child a { border-bottom: 0; }
}

/* ============================================================
   TABLET & PHONE design system — shorter pages, gridded tiles
   ============================================================ */

/* ---- Tablet (<=900px): tighter sections, 2-up project tiles, smaller media ---- */
@media (max-width: 900px) {
  :root { --section-y: clamp(2.25rem, 5vw, 3.25rem); }
  .section-head { margin-bottom: 2rem; }

  .projects, .project-row, .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }
  .project-body { padding: 1.1rem 1.2rem 1.25rem; }
  .project-body p { font-size: 0.88rem; }

  .page-hero.with-photo { min-height: 52vh; padding-top: 130px; padding-bottom: 56px; }
  .visual { aspect-ratio: 16 / 10; }
}

/* ---- Phone (<=600px): compact gridded tiles, trimmed content ---- */
@media (max-width: 600px) {
  :root { --section-y: 2rem; }
  .section-head { margin-bottom: 1.4rem; }
  h2 { font-size: clamp(1.55rem, 6vw, 2rem); }

  .projects, .project-row, .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem;
  }
  .project-body { padding: 0.75rem 0.8rem 0.85rem; display: flex; flex-direction: column; }
  .project-body > p:not([class]) { display: none; }     /* hide long description */
  .project-body h4 { font-size: 1rem; line-height: 1.15; margin-bottom: 0.25rem; }
  .project-body .card-loc { font-size: 0.8rem; margin-bottom: 0.35rem; line-height: 1.3; }
  .project-body .meta { font-size: 0.6rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
  .project-body .btn {
    font-size: 0.62rem; letter-spacing: 0.1em;
    padding: 0.4rem 0; margin-top: auto; border: 0; align-self: flex-start;
  }
  .project-body p:has(+ a.btn) { margin-bottom: 0.4rem; }
  .project-photo .tag { font-size: 0.56rem; padding: 0.22rem 0.5rem; }

  .page-hero.with-photo { min-height: 44vh; padding-top: 108px; padding-bottom: 40px; }
}

/* ---- Extend the compact-tile system to other listing sections ---- */
@media (max-width: 900px) {
  .branches, .value-grid, .team, .day-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .day-grid { gap: 0; }
  .day-scene { padding: 1.6rem 1.4rem; }
  .branch-card { min-height: 0; padding: 1.6rem 1.5rem; }
  .value-grid { gap: 1.75rem; }
  .team { gap: 1.5rem; }
}

@media (max-width: 600px) {
  .branches, .value-grid, .team, .day-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.8rem;
  }
  .day-grid { gap: 0; }

  /* Branch cards -> compact icon tiles (hide the paragraph) */
  .branch-card { min-height: 0; padding: 1rem 0.9rem; }
  .branch-card p { font-size: 0.8rem; margin-bottom: 0.85rem; }
  .branch-card h3 { font-size: 1.08rem; margin-bottom: 0.5rem; }
  .branch-card .more { font-size: 0.72rem; }
  .branch-icon { width: 34px; height: 34px; margin-bottom: 0.85rem; }

  /* Values */
  .value-item h4 { padding-top: 0.9rem; margin-bottom: 0.5rem; }
  .value-item p { font-size: 0.85rem; }

  /* Team */
  .team-card h4 { font-size: 1.05rem; }
  .team-photo { font-size: 1.8rem; margin-bottom: 0.7rem; }

  /* Day-in-your-home scenes */
  .day-scene { padding: 1rem 0.85rem; }
  .day-scene .day-icon { width: 36px; height: 36px; }

  /* Capabilities stay one column but compact + readable */
  .capabilities { gap: 1.4rem; }
  .capability { gap: 0.85rem; }
  .capability .num { font-size: 1.5rem; min-width: 2rem; }
}

/* ---- Mining operations: image always first when stacked (consistent reading order) ---- */
@media (max-width: 800px) {
  #operations .two-col .visual { order: -1; }
}


/* ===== Data tables -> stacked cards on phones ===== */
@media (max-width: 700px) {
  .table-wrap { overflow: visible; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }
  .data-table tr {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.85rem 1rem; margin-bottom: 0.7rem;
  }
  .data-table td { border: 0 !important; padding: 0.26rem 0; font-size: 0.85rem; }
  .data-table td:first-child {
    font-family: var(--font-serif); font-size: 1.08rem; color: var(--gold); margin-bottom: 0.35rem;
  }
  .data-table td:first-child::before { display: none; }
  .data-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 0.57rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold); opacity: 0.85; margin-bottom: 0.1rem;
  }
}

/* ===== Automation "Spaces" gallery: 2-up tiles on phones ===== */
@media (max-width: 760px) {
  .space-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 0.8rem; }
  .space-photo { aspect-ratio: 4 / 3; }
  .space-tile figcaption { padding-top: 0.55rem; }
  .space-tile figcaption h4 { font-size: 0.92rem; margin-bottom: 0.25rem; }
  .space-tile figcaption p { font-size: 0.78rem; line-height: 1.45; }
}
@media (max-width: 600px) {
  .space-tile figcaption p { display: none; }
}

/* ===== Contact: form first, contact directory below it on tablet/phone ===== */
@media (max-width: 800px) {
  .contact-grid .contact-form { order: 1; }
  .contact-grid .contact-info { order: 2; margin-top: 1.25rem; }
}
/* ============================================================
   FOOTER — centered business-card layout
   ============================================================ */
.site-footer { padding: 3.25rem 0 1.75rem; }
.footer-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.8rem; margin-bottom: 2.6rem;
}
.footer-inner .brand { justify-content: center; font-size: 1.25rem; margin: 0; }
.footer-inner .brand-mark { width: 44px; height: 44px; }
.footer-inner .brand-text { white-space: nowrap; }   /* never break the company name */

.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem 2.2rem; }
.footer-nav a { color: var(--text-muted); font-size: 0.9rem; letter-spacing: 0.04em; }
.footer-nav a:hover { color: var(--gold); }

.footer-offices {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 1.2rem;
  font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.04em;
}
.footer-offices .sep { color: var(--gold); }

.footer-email { display: inline-block; color: var(--gold); font-size: 0.9rem; letter-spacing: 0.01em; }
.footer-email:hover { color: var(--gold-bright); }

.footer-cta {
  display: none; align-items: center; justify-content: center;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 1.4rem;
}
.footer-cta:hover { color: var(--gold-bright); border-color: var(--gold); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem;
  padding-top: 2rem; border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.05em;
}

/* Phone: logo + slogan -> offices (stacked) -> Contact button -> stacked copyright */
@media (max-width: 600px) {
  .site-footer { padding: 2.5rem 0 1.5rem; }
  .footer-nav, .footer-email { display: none; }
  .footer-offices { display: flex; flex-direction: column; gap: 0.25rem; }
  .footer-offices .sep { display: none; }
  .footer-cta { display: none; }
  .footer-inner { gap: 1.4rem; margin-bottom: 2rem; }
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 0.35rem; }
}

/* ===== Remove gold top-divider on value items (Principles & Structure) ===== */
.value-item h4 { border-top: 0; padding-top: 0; }

/* ===== Fix data-table cards on mobile: drop the wrapper box border/rounding ===== */
@media (max-width: 700px) {
  .table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .data-table tr:last-child { margin-bottom: 0; }
}

/* ===== Data-table cards: hover lights the whole tile, not individual cells ===== */
@media (max-width: 700px) {
  .data-table tbody tr:hover td { background: transparent; }
  .data-table tbody tr:hover { background: rgba(194,160,107, 0.05); }
}

/* ===== Automation Spaces: stop forcing the whole tile to a ratio (photo + caption) ===== */
@media (max-width: 760px) {
  .space-tile { aspect-ratio: auto; }
  .space-photo { aspect-ratio: 4 / 3; }
  .space-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

/* ===== Machinery fleet: dramatically compact each item on phones ===== */
@media (max-width: 700px) {
  #fleet .data-table tr { padding: 0.65rem 0.9rem; margin-bottom: 0.4rem; }
  #fleet .data-table td {
    display: inline; padding: 0; border: 0 !important;
    font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0;
  }
  #fleet .data-table td::before { content: "" !important; display: none !important; }
  #fleet .data-table td:first-child {
    display: block; font-family: var(--font-serif); font-size: 1rem; color: var(--gold);
    margin-bottom: 0.12rem; line-height: 1.2;
  }
  #fleet .data-table td:nth-child(2)::after { content: " · "; color: var(--gold); }
  #fleet .data-table td:nth-child(3)::before { content: "×" !important; display: inline !important; color: var(--gold); }
  #fleet .data-table td:nth-child(4) { display: none; }   /* drop Deployment for compactness */
}

/* ===== Machinery fleet banner: full image, framed to match the site ===== */
.fleet-banner-section { padding-block: clamp(1.5rem, 4vw, 3rem); }
.fleet-banner {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.fleet-banner img {
  display: block;
  width: 100%;
  height: auto;          /* show the FULL image, nothing cropped */
}

/* Fleet image now lives inside the Owned Fleet section — space it from the table */
#fleet .fleet-banner { margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }

/* ===== Branch website link (in branch-page hero) ===== */
.branch-site { margin-top: 1.85rem; }
.branch-site-label {
  display: block; font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.6rem;
}
.branch-site-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 1.1rem; color: var(--gold); font-size: 0.95rem; letter-spacing: 0.01em;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.branch-site-link:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(194,160,107,0.06); }
.branch-site-link span { font-size: 0.85em; }

/* Mining Active Operations: shorter (landscape) operation photos */
#operations .visual { aspect-ratio: 3 / 2; }

/* ===== Division extensions (group idiom; inherit accent via vars) ===== */
.subgroup-head{grid-column:1 / -1;display:flex;align-items:baseline;gap:1rem;margin:1.5rem 0 .25rem}
.subgroup-head .eyebrow{margin:0}
.subgroup-head .line{flex:1;height:1px;background:var(--border)}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.media-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.media-grid{grid-template-columns:1fr}}
.media-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--border);border-radius:var(--radius);transition:transform .5s var(--ease),border-color .3s}
.media-grid img:hover{transform:scale(1.02);border-color:var(--border-strong)}
.video-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#000}
.video-wrap video{width:100%;display:block}
.vlabel{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 .8rem}
.detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:2rem 0}
.detail-meta div{background:var(--bg-card);padding:1.4rem}
.detail-meta b{font-family:var(--font-serif);font-size:1.3rem;color:var(--text);display:block}
.detail-meta span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
@media(max-width:700px){.detail-meta{grid-template-columns:repeat(2,1fr)}}
.branch-site{margin-top:2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.branch-site-label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim)}
.branch-site-link{color:var(--gold);font-weight:500;letter-spacing:.02em}

/* .nav-links a.active{color:var(--gold)} -- superseded by Kontra nav (bronze active) */

/* ===== Themed Higgsfield background ===== */
.page-stars{
  background-image:url("../assets/bg.jpg") !important;
  background-size:cover !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  opacity:0.5 !important;
  animation:none !important;
}
.page-stars::before,.page-stars::after{content:none !important;background-image:none !important;animation:none !important;}

/* ===== Ambient parallax foreground (fx) ===== */
.bl-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-el{position:absolute;color:var(--gold);transform:translate3d(var(--px,0px),calc(var(--py,0px) + var(--sy,0px)),0);transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}
.fx-inner{display:block;width:100%;height:100%;animation:fxdrift var(--dur,30s) ease-in-out infinite alternate;opacity:.16}
.fx-el svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@keyframes fxdrift{from{transform:translateY(-9px) rotate(-1.4deg)}to{transform:translateY(9px) rotate(1.4deg)}}
@media (prefers-reduced-motion: reduce){.bl-fx{display:none}}

/* ===== Property blueprint background (replaces photographic bg + fx icons) ===== */
.page-stars{display:none !important;}
.bl-blueprint{position:fixed;top:0;left:0;width:100%;z-index:-1;pointer-events:none;opacity:.2;will-change:transform}
.bl-blueprint img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion: reduce){.bl-blueprint{position:absolute;top:0}}

/* ===== Cinematic scroll-zoom hero (Property home) ===== */
.cinematic{position:relative;height:380vh}
.cine-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--bg)}
.cine-layer{position:absolute;inset:0;will-change:transform,opacity}
.cine-layer img{width:100%;height:100%;object-fit:cover;display:block}
.cine-ext img{transform-origin:50% 50%}
.cine-plan{opacity:0;transform-origin:50% 58%}
.cine-room{opacity:0}
.cine-stage::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.45),transparent 28%,transparent 62%,rgba(10,10,10,.75))}
.cine-copy{position:absolute;left:0;right:0;bottom:13vh;z-index:5;text-align:center;padding:0 var(--gutter);
  max-width:60rem;margin:0 auto;will-change:opacity,transform}
.cine-copy .eyebrow{justify-content:center}
.cine-copy h1{font-size:clamp(2.2rem,5.2vw,4.4rem);margin:1rem 0}
.cine-copy .lead{margin:0 auto}
.cine-scroll{margin-top:2rem;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.cine-scroll span{display:block;margin-top:.5rem;animation:cinebob 1.8s ease-in-out infinite}
@keyframes cinebob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (prefers-reduced-motion: reduce){
  .cinematic{height:auto}.cine-stage{position:relative;height:auto}
  .cine-layer{position:relative;opacity:1!important;transform:none!important}
  .cine-copy{position:relative;bottom:auto;padding:3rem var(--gutter)}
}

/* ===== Starry villa hero + reflecting-pool background (Property home) ===== */
.villa-hero{position:relative;height:100vh;min-height:620px;overflow:hidden;background:#000}
.vh-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.vh-top{position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 16%,rgba(0,0,0,0) 60%)}
.vh-fade{position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.55) 55%,var(--bg) 92%)}
.vh-stars{position:absolute;left:0;right:0;top:0;height:60%;z-index:2;pointer-events:none}
.vh-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  box-shadow:0 0 4px rgba(255,255,255,.7);animation:vhtwinkle var(--t,3s) ease-in-out infinite alternate}
.vh-stars i.g{background:var(--gold);box-shadow:0 0 6px rgba(194,160,107,.8)}
@keyframes vhtwinkle{from{opacity:.12}to{opacity:.95}}
.vh-copy{position:absolute;left:0;right:0;bottom:14vh;z-index:3;text-align:center;padding:0 var(--gutter);max-width:62rem;margin:0 auto}
.vh-copy .eyebrow{justify-content:center}
.vh-copy h1{font-size:clamp(2.4rem,5.6vw,4.6rem);margin:1rem 0}
.vh-copy .lead{margin:0 auto}
/* reflecting-pool water as the page background for the rest of the site */
.pool-bg{position:fixed;inset:0;z-index:-2;opacity:.55;
  background:#08172e url(assets/cinematic/pool-water.jpg) center top / cover}
@media (prefers-reduced-motion: reduce){.vh-stars i{animation:none;opacity:.6}}

/* ===== Option-1 hero + continuing reflecting pool (overrides) ===== */
.vh-img{object-position:center 46%}
.vh-stars{height:42% !important}
.vh-fade{height:16% !important;background:linear-gradient(180deg,transparent,rgba(10,10,12,.5)) !important}
.pool-bg{display:none !important}
.pool-flow{position:absolute;left:0;width:100%;z-index:-2;pointer-events:none;
  background:#08172e url('../assets/cinematic/pool-continuation.jpg') top center / 100% auto no-repeat}

/* ===== Pool-bottom colour pulled through + group grid + accents ===== */
html{background:#061122}
:root{--bg:#061122}
body.home{background-color:#061122}              /* gold grid (already on body.home) now sits on this */
/* let the continuing pool dissolve into the fixed grid background as you scroll */
.pool-flow{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%)}
/* highlighted accent glows down the page */
.glow{position:relative}
.glow::before{content:"";position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  width:min(72vw,940px);height:360px;background:radial-gradient(ellipse at center, rgba(194,160,107,0.10), transparent 70%);
  pointer-events:none;z-index:0}
.glow > .container{position:relative;z-index:1}

/* =====================================================================
   ARCHITECTURAL LINE-ART DESIGN SYSTEM  (Property — gold on charcoal)
   Reference: flowing parametric contour lines + minimalist building forms.
   ===================================================================== */

/* --- Hero: full-bleed gold line-art skyline --- */
.la-hero{position:relative;height:92vh;min-height:600px;overflow:hidden;background:#0c0b08}
.la-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.la-top{position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(7,7,9,.92) 0%,rgba(7,7,9,.40) 46%,transparent 100%)}
.la-fade{position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent 0%,rgba(7,7,9,.55) 58%,#061122 100%)}
.la-hero .vh-stars{position:absolute;left:0;right:0;top:0;height:54%;z-index:2;pointer-events:none}
.la-copy{position:absolute;left:0;right:0;bottom:16vh;z-index:3;text-align:left}
.la-copy .eyebrow{justify-content:flex-start}
.la-copy h1{font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.04;margin:1rem 0;max-width:20ch}
.la-copy .lead{margin:0;max-width:46ch}
.la-copy .cine-scroll{margin-top:1.7rem;display:inline-flex;gap:.55rem;align-items:center;
  font:600 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.9}
.la-copy .cine-scroll span{animation:laBounce 2s ease-in-out infinite}
@keyframes laBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-width:760px){
  .la-hero{height:86vh}
  .la-img{object-position:74% 60%}
  .la-copy{bottom:11vh}
  .la-copy .la-top{height:48%}
}
@media (prefers-reduced-motion: reduce){.la-copy .cine-scroll span{animation:none}}

/* --- Signature motif: flowing contour-line divider between sections --- */
.wave-rule{display:block;width:100%;height:74px;border:0;margin:0;pointer-events:none;
  background:url('../assets/lineart/wave-divider.svg') center/100% 100% no-repeat;opacity:.5}
.wave-rule.flip{transform:scaleY(-1)}
.wave-rule.tight{height:54px;opacity:.36}

/* --- Pre-footer perspective skyline band --- */
.skyline-band{position:relative;width:100%;height:clamp(240px,32vw,420px);margin:0;pointer-events:none;
  background:url('../assets/lineart/skyline-band.png') center bottom/cover no-repeat;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);
          mask:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%)}

/* --- Wireframe-edge treatment for stat blocks (echoes the building forms) --- */
body.home .stats .stat{border:1px solid rgba(194,160,107,.18);background:rgba(194,160,107,.025);
  border-radius:2px;transition:border-color .4s ease, background .4s ease}
body.home .stats .stat:hover{border-color:rgba(194,160,107,.42);background:rgba(194,160,107,.05)}

/* --- Thin gold corner ticks on project cards (architectural drawing marks) --- */
.project-card{position:relative}
.project-card::before,.project-card::after{content:"";position:absolute;width:14px;height:14px;
  pointer-events:none;opacity:.55;transition:opacity .4s ease;z-index:2}
.project-card::before{top:9px;left:9px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.project-card::after{bottom:9px;right:9px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}
.project-card:hover::before,.project-card:hover::after{opacity:.95}

/* =====================================================================
   EDITORIAL DESIGN LANGUAGE  (ZROBIM-inspired: masthead behind building)
   Dark cinematic · cream type · gold accent · pill nav · glass cards
   ===================================================================== */
:root{ --cream:#ede4d8; --cream-dim:rgba(217,181,157,.66); --glass:rgba(8,23,46,.42); }

/* --- Pill navigation (site-wide) --- DISABLED: superseded by the Kontra glass
   nav in kontra-skin.css so the menu matches the BLG Group site (light/dark).
.nav-overlay .nav-inner{
  margin:16px auto 0; width:min(1320px, calc(100% - 2*var(--gutter)));
  background:rgba(8,23,46,.42); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(217,181,157,.10); border-radius:999px;
  padding:.5rem .65rem .5rem 1.1rem; box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.nav-overlay .nav-links{gap:.15rem;}
.nav-overlay .nav-links a{
  padding:.5rem .95rem; border-radius:999px; font-weight:500; letter-spacing:.01em;
  transition:background .25s ease, color .25s ease;
}
.nav-overlay .nav-links a:hover{background:rgba(217,181,157,.09); color:var(--cream);}
.nav-overlay .nav-links a.active,.nav-overlay .nav-links a[aria-current="page"]{
  background:rgba(194,160,107,.16); color:var(--gold);
}
.nav-overlay .brand small{color:var(--cream-dim);}
*/

/* --- Editorial hero: giant masthead behind the building --- */
.ed-hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#0e0e10}
.ed-bg,.ed-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 64%}
.ed-bg{z-index:0}
.ed-fg{z-index:3;pointer-events:none}
.ed-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.12) 26%,rgba(8,8,10,0) 50%,rgba(8,8,10,.30) 78%,rgba(8,8,10,.78) 100%)}

.ed-masthead{position:absolute;left:0;right:0;top:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;pointer-events:none}
.ed-title{position:relative;margin:0;transform:translateY(4vh);
  font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.025em;
  line-height:.84;color:var(--cream);font-size:clamp(3.6rem,15.5vw,15rem);
  text-shadow:0 2px 40px rgba(0,0,0,.35)}
.ed-title .ed-script{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;color:var(--cream);font-size:.34em;line-height:1;
  margin-top:-.06em;transform:translateX(.18em)}

/* --- Hero overlays --- */
.ed-eyebrow{position:absolute;z-index:5;top:calc(16px + 4.7rem);left:calc(var(--gutter) + .2rem);
  font:600 .7rem/1.5 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-dim)}
.ed-eyebrow b{display:block;color:var(--cream);font-weight:600;letter-spacing:.02em;text-transform:none;font-size:1.05rem;font-family:var(--serif);font-style:italic;margin-top:.15rem}
.ed-feature{position:absolute;z-index:5;top:calc(16px + 4.7rem);right:calc(var(--gutter) + .2rem);
  list-style:none;margin:0;padding:0;text-align:right;font:500 .82rem/1.9 var(--sans);color:var(--cream-dim)}
.ed-feature li::before{content:"\2014  ";color:var(--gold)}
.ed-meta{position:absolute;z-index:5;left:var(--gutter);bottom:clamp(1.5rem,5vh,3.2rem);
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(217,181,157,.12);border-radius:14px;padding:1.1rem 1.3rem;max-width:320px;
  box-shadow:0 16px 50px rgba(0,0,0,.35)}
.ed-meta dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.82rem}
.ed-meta dt{color:var(--cream-dim);font-weight:500}
.ed-meta dd{margin:0;color:var(--cream);text-align:right}
.ed-meta .ed-meta-head{grid-column:1/-1;font:600 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.ed-social{position:absolute;z-index:5;left:var(--gutter);bottom:clamp(1.5rem,5vh,3.2rem);display:none;gap:.6rem}
.ed-scroll{position:absolute;z-index:5;right:var(--gutter);bottom:clamp(1.5rem,5vh,3.2rem);
  display:inline-flex;align-items:center;gap:.55rem;color:var(--cream-dim);
  font:600 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.ed-scroll .dot{width:34px;height:34px;border:1px solid rgba(217,181,157,.3);border-radius:999px;
  display:grid;place-items:center;color:var(--cream)}
.ed-scroll .dot span{animation:edBounce 2s ease-in-out infinite}
@keyframes edBounce{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}

@media (max-width:860px){
  .ed-feature{display:none}
  .ed-eyebrow{top:calc(16px + 4.4rem)}
  .ed-meta{max-width:none;right:var(--gutter);left:var(--gutter)}
  .ed-scroll{display:none}
  .ed-title{transform:translateY(2vh)}
}
@media (prefers-reduced-motion: reduce){.ed-scroll .dot span{animation:none}}

/* =====================================================================
   ARCHBETON EDITORIAL LANGUAGE — incremental migration (Property)
   Monochrome concrete · Cormorant + Manrope · hairline rules w/ end-ticks
   Scoped under .abx so it does not disturb un-migrated elements.
   ===================================================================== */
.abx{background:var(--surface-page);color:var(--text-body);font:var(--type-body);position:relative;z-index:2}
.abx-wrap{max-width:var(--container-wide);margin:0 auto;padding-inline:var(--gutter)}
.abx ::selection{background:var(--ink-900);color:#fff}

/* signature hairline rule with vertical end-ticks */
.abx-rule{position:relative;height:0;border-top:1px solid var(--border-hairline);margin:0}
.abx-rule::before,.abx-rule::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--border-strong)}
.abx-rule::before{left:0}.abx-rule::after{right:0}

/* meta row */
.abx-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;
  font:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.abx-meta .mono{font-family:var(--font-mono);letter-spacing:.04em;text-transform:none;color:var(--text-faint)}

/* header / nav */
.abx-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}
.abx-brand{font-family:var(--font-display);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  font-size:1.3rem;color:var(--text-strong);display:flex;align-items:center;gap:.6rem;line-height:1}
.abx-brand .mono-mark{width:20px;height:22px;color:var(--ink-900)}
.abx-brand small{font:var(--text-xs);font-family:var(--font-sans);letter-spacing:var(--tracking-label);
  color:var(--text-muted);text-transform:uppercase;font-weight:500}
.abx-nav{display:flex;gap:1.7rem;font:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)}
.abx-nav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:color var(--transition),border-color var(--transition)}
.abx-nav a:hover{color:var(--text-strong)}
.abx-nav a[aria-current="page"]{color:var(--text-strong);border-bottom-color:var(--ink-900)}

/* hero */
.abx-hero{padding:1.4rem 0 clamp(2rem,5vw,4rem)}
.abx-hero-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:.2rem}
.abx-eyebrow{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.abx-display{font-family:var(--font-display);font-weight:600;color:var(--text-strong);
  letter-spacing:.02em;text-transform:uppercase;line-height:.9;font-size:clamp(56px,11vw,168px);margin:.2rem 0 .5rem}
.abx-tagline{font:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--text-muted);max-width:60ch;line-height:1.9}
.abx-hero-photo{margin-top:clamp(1.4rem,3vw,2.4rem);aspect-ratio:21/9;overflow:hidden;
  border-radius:var(--radius-md);background:var(--img-mat)}
.abx-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 64%;
  filter:grayscale(1) contrast(1.03)}
.abx-hero-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0 0;
  font:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-faint)}
@media(max-width:760px){.abx-nav{display:none}.abx-display{font-size:clamp(48px,16vw,90px)}}