/* NEX OVERSEAS LLP — "Meridian" visual identity */

:root {
  --bg: #080808;
  --bg-2: #0d0d0d;
  --surface: #171717;
  --card: #1c1c1c;
  --graphite: #222222;
  --line: #262626;
  --line-soft: #1f1f1f;
  --gold: #c5a15b;
  --gold-hi: #e2c17d;
  --gold-line: rgba(197, 161, 91, 0.45);
  --text: #f5f3ee;
  --text-2: #c9c6bf;
  --muted: #a7a7a7;
  --faint: #8e8e8e;
  --danger: #f0a39a;

  /* Type: Manrope for titles and headings, Inter for body text, Cinzel for the
     wordmark. Cormorant Garamond is kept only for .hero-reserve (see the homepage
     hero section below), which must keep the previous hero text metrics. */
  --heading: "Manrope", "Manrope Fallback", "Manrope Fallback Arial", system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --brand: "Cinzel", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Corners: controls (buttons, fields), inner groups, cards and panels */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;

  --container: 1280px;
  --gutter: 24px;
  --section: clamp(72px, 9vw, 112px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-hi); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--text); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--bg); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--bg); padding: 10px 16px; font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--bg); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Layout ---------- */
.container, .container-narrow {
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.container { max-width: var(--container); }
.container-narrow { max-width: 900px; }
.section { padding: var(--section) 0; }
.section-tight { padding: calc(var(--section) * 0.6) 0; }
.band { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); }
.grid-fill { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.split { display: grid; gap: 48px 80px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.stack { display: flex; flex-direction: column; gap: var(--gap, 20px); }
.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.center { text-align: center; align-items: center; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  color: var(--gold); font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
}
.eyebrow.ruled::before, .eyebrow.ruled::after { content: ""; width: 48px; height: 1px; background: var(--gold); flex-shrink: 0; }
@media (max-width: 480px) { .eyebrow.ruled::before, .eyebrow.ruled::after { width: 20px; } .eyebrow { letter-spacing: 0.22em; } }
.display {
  font-family: var(--heading); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em;
  font-size: clamp(36px, 4.8vw, 60px); text-wrap: balance;
}
.display em, .h2 em { color: var(--gold-hi); font-style: normal; }
.h2 { font-family: var(--heading); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; font-size: clamp(26px, 2.8vw, 38px); text-wrap: balance; }
.h3 { font-family: var(--heading); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; font-size: clamp(19px, 1.7vw, 22px); }
.h4 { font-family: var(--heading); font-size: 17px; font-weight: 600; line-height: 1.35; }
.lead { color: var(--muted); font-size: clamp(17px, 1.4vw, 19px); max-width: 640px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.placeholder-text { color: var(--faint); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 500 14px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 600; }
.btn-gold:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: var(--bg); }
.btn-line { color: var(--gold-hi); border-color: rgba(197, 161, 91, 0.55); background: transparent; }
.btn-line:hover { background: rgba(197, 161, 91, 0.08); border-color: var(--gold-hi); color: var(--text); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 13px; }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }
.center .btn-row, .btn-row.center { justify-content: center; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.link-arrow svg { transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  border-bottom: 1px solid var(--line-soft);
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would
   become the containing block for the fixed mobile menu. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(8, 8, 8, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--text); flex-shrink: 0; }
.brand:hover { color: var(--text); }
.brand img { height: 50px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--brand); font-size: 19px; font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.brand-tag { font-size: 10px; letter-spacing: 0.34em; color: var(--gold); white-space: nowrap; }
.primary-nav { display: flex; align-items: center; gap: 30px; }
.primary-nav ul { list-style: none; display: flex; gap: 26px; }
.primary-nav a:not(.btn) {
  color: var(--text); font-size: 14px; letter-spacing: 0.02em; padding: 10px 0; position: relative;
}
.primary-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.primary-nav a:not(.btn):hover, .primary-nav a[aria-current="page"] { color: var(--gold-hi); }
.primary-nav a:not(.btn):hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); color: var(--text); cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.3s, background 0.3s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: 84px 0 0 0; background: var(--bg);
    flex-direction: column; align-items: stretch; gap: 28px; padding: 24px var(--gutter) 40px;
    overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.3s, transform 0.3s var(--ease), visibility 0.3s;
  }
  .primary-nav.open { visibility: visible; opacity: 1; transform: none; }
  .primary-nav ul { flex-direction: column; gap: 0; }
  .primary-nav ul a:not(.btn) {
    display: block; padding: 18px 0; border-bottom: 1px solid var(--line);
    font-family: var(--heading); font-size: 22px; color: var(--text);
  }
  .primary-nav a:not(.btn)::after { display: none; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 420px) {
  .brand img { height: 42px; }
  .brand-name { font-size: 16px; }
  .brand-tag { font-size: 9px; letter-spacing: 0.26em; }
}

/* ---------- Image placeholders ---------- */
.ph {
  position: relative; display: flex; align-items: flex-end; padding: 20px;
  background:
    linear-gradient(135deg, rgba(197, 161, 91, 0.05), transparent 40%),
    var(--surface);
  border: 1px solid #2a2a2a; color: var(--faint);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; overflow: hidden;
}
.ph::before {
  content: ""; position: absolute; top: 18px; right: 18px; width: 22px; height: 22px;
  border: 1px solid var(--gold-line); transform: rotate(45deg);
}
.ph-hero { width: 100%; aspect-ratio: 16 / 7; }
@media (max-width: 640px) { .ph-hero { aspect-ratio: auto; height: 260px; } }
.ph-wide { aspect-ratio: 16 / 9; }
.ph-photo { aspect-ratio: 4 / 3; }
.ph-tall { aspect-ratio: 4 / 5; }
.media-frame { overflow: hidden; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero ---------- */
.hero { padding: clamp(64px, 9vw, 120px) 0 56px; }
.hero .stack { --gap: 28px; }
.hero .display { max-width: 1000px; }
/* Homepage hero: full-bleed globe rising from the right edge */
.hero-globe {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(620px, 90vh, 920px);
  display: flex; align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.hero-globe::before {
  /* sparse warm starfield */
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(245, 243, 238, 0.7), transparent 60%),
    radial-gradient(1px 1px at 27% 64%, rgba(245, 243, 238, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 41% 32%, rgba(226, 193, 125, 0.6), transparent 60%),
    radial-gradient(1px 1px at 58% 12%, rgba(245, 243, 238, 0.5), transparent 60%),
    radial-gradient(1px 1px at 8% 82%, rgba(226, 193, 125, 0.5), transparent 60%),
    radial-gradient(1px 1px at 35% 90%, rgba(245, 243, 238, 0.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 46%, rgba(245, 243, 238, 0.35), transparent 60%),
    radial-gradient(1px 1px at 20% 40%, rgba(245, 243, 238, 0.35), transparent 60%);
  background-size: 520px 520px;
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(56px, 8vw, 96px); pointer-events: none; }
.hero-copy { --gap: 28px; max-width: 640px; pointer-events: auto; }
.hero-copy .display { font-size: clamp(46px, 6vw, 96px); text-shadow: 0 2px 30px rgba(8, 8, 8, 0.6); }
.hero-copy .lead { max-width: 540px; text-shadow: 0 1px 16px rgba(8, 8, 8, 0.9); }
.hero-motto { color: var(--faint); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; padding-top: 8px; }

.globe-canvas {
  position: absolute; inset: 0; z-index: 0; width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.globe-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.globe-tag {
  position: absolute; left: 0; top: 0; padding: 5px 9px; white-space: nowrap;
  background: rgba(8, 8, 8, 0.85); border: 1px solid var(--gold-line); color: var(--text);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.4s;
}
.globe-tag.is-origin { color: var(--gold-hi); border-color: var(--gold); }

/* CSS stand-in while the globe loads, and for devices without WebGL */
.globe-fallback {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: max(120vh, 72vw); aspect-ratio: 1; max-width: none;
  left: calc(80% - max(60vh, 36vw)); top: calc(56% - max(60vh, 36vw));
  background: radial-gradient(circle at 50% 50%, #0b0a09 64%, #0b0a09 69%, transparent 70.6%);
  box-shadow: inset 12px 10px 28px -12px rgba(232, 185, 106, 0.32), -4px -3px 40px rgba(197, 161, 91, 0.08);
  transition: opacity 1.6s var(--ease);
}
.globe-ready .globe-canvas { opacity: 1; }
.globe-ready .globe-fallback { opacity: 0; }

@media (max-width: 899px) {
  .hero-globe { min-height: 0; align-items: flex-start; }
  .hero-inner { padding-bottom: calc(82vw * 0.95 + 24px); }
  .globe-fallback { width: 164vw; left: calc(60% - 82vw); top: auto; bottom: calc(-82vw - 4vw + 16px); }
}

.page-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line-soft); }
.page-hero .display { font-size: clamp(40px, 5.6vw, 76px); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--faint); list-style: none; }
.breadcrumb a { color: var(--text-2); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: #555; }

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  color: var(--text); transition: border-color 0.3s, transform 0.3s var(--ease);
}
a.card:hover, .card.hoverable:hover { border-color: rgba(197, 161, 91, 0.6); transform: translateY(-3px); color: var(--text); }
.card-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .ph { border: 0; }
.card-meta { color: var(--faint); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.card-link { color: var(--gold-hi); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: auto; padding-top: 12px; }
.panel { background: var(--surface); border: 1px solid var(--line); padding: clamp(28px, 4vw, 56px); }
.panel-gold { border-top: 2px solid var(--gold); }

/* numbered services */
.numbered { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--line); }
.numbered > * { padding: 36px 28px 36px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.numeral { font-family: var(--heading); font-weight: 600; color: var(--gold); font-size: 20px; }

/* lists & tags */
.tag-list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.tag { border: 1px solid var(--gold-line); color: var(--gold-hi); padding: 10px 16px; font-size: 13px; letter-spacing: 0.06em; }
.rule-list { list-style: none; display: grid; gap: 0 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.rule-list li { border-bottom: 1px solid #2a2a2a; padding: 14px 0; color: var(--text-2); }
.check-list { list-style: none; display: flex; flex-direction: column; }
.check-list li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.check-list li:last-child { border-bottom: 1px solid var(--line); }
.check-list li::before { content: "—"; color: var(--gold); flex-shrink: 0; }

/* spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th, .spec-table td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { color: var(--faint); font-weight: 500; width: 42%; padding-right: 24px; }
.spec-table td { color: var(--text-2); }

/* steps */
.steps { list-style: none; counter-reset: step; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.steps li { counter-increment: step; border-top: 1px solid var(--gold-line); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.steps li::before { content: "0" counter(step); font-family: var(--heading); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1; color: var(--gold); }

/* ornament */
.ornament { display: block; margin: 0 auto; }

/* ---------- Catalogue ---------- */
.catalogue-tools { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid #333; color: var(--text-2);
  font: 14px var(--sans); cursor: pointer; transition: border-color 0.25s, color 0.25s;
}
.chip:hover { border-color: var(--gold); color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold-hi); }
.search-field { position: relative; flex: 0 1 340px; }
.search-field svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search-field input { padding-left: 46px !important; }
.empty-state { display: none; padding: 48px 0; color: var(--muted); text-align: center; }
.empty-state.show { display: block; }
[hidden] { display: none !important; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); letter-spacing: 0.02em; }
.field .req { color: var(--gold); }
.input, .field input, .field select, .field textarea {
  width: 100%; font: 400 15px/1.5 var(--sans); color: var(--text);
  background: #0f0f0f; border: 1px solid #343434; border-radius: var(--radius-sm); padding: 13px 14px; min-height: 50px;
  transition: border-color 0.25s, background 0.25s;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C5A15B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.field textarea { min-height: 130px; resize: vertical; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: #7a7a7a; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: #121212; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 13px; font-weight: 400; min-height: 0; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); font-weight: 400; }
.checkbox input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--gold); flex-shrink: 0; }
.checkbox.invalid { color: var(--danger); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; padding: 20px 24px; border: 1px solid var(--gold-line); background: rgba(197, 161, 91, 0.06); color: var(--text); }
.form-status.show { display: block; }
.form-status.error { border-color: var(--danger); background: rgba(240, 163, 154, 0.06); }
.demo-note { font-size: 13px; color: var(--faint); border: 1px dashed #3a3a3a; padding: 10px 14px; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 22px 0; font-family: var(--heading); font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.4; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-family: var(--sans); font-size: 24px; font-weight: 300; transition: transform 0.3s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; color: var(--muted); max-width: 760px; }

/* ---------- Prose (legal, blog) ---------- */
.prose { color: var(--text-2); max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--heading); font-weight: 600; font-size: clamp(22px, 2vw, 26px); line-height: 1.25; letter-spacing: -0.015em; color: var(--text); margin-top: 2em; }
.prose h3 { font-size: 18px; font-weight: 600; color: var(--text); margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--gold); }
.notice { border: 1px solid var(--gold-line); background: rgba(197, 161, 91, 0.06); padding: 16px 20px; color: var(--text-2); font-size: 14px; }

/* ---------- CTA band ---------- */
.cta-band .container-narrow { padding-top: clamp(80px, 10vw, 112px); padding-bottom: clamp(80px, 10vw, 112px); }
.cta-band .stack { --gap: 28px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding: 72px 0 40px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-brand img { width: 200px; height: auto; }
.footer-tagline { font-family: var(--heading); font-weight: 500; color: var(--gold-hi); font-size: 15px; line-height: 1.5; }
.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-col h2 { font-family: var(--sans); color: var(--faint); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 4px; }
.footer-col a, .footer-col span { color: var(--text-2); }
.footer-col a:hover { color: var(--gold-hi); }
.footer-bottom { border-top: 1px solid var(--line-soft); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--faint); font-size: 13px; }
.footer-bottom nav { display: flex; gap: 24px; }
.footer-bottom a { color: var(--faint); }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0.01ms !important; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* =====================================================================
   Catalogue site components
   ===================================================================== */

/* Placeholders for information still to be supplied */
.tbc { color: #d9b56b; background: rgba(197, 161, 91, 0.08); border: 1px dashed rgba(197, 161, 91, 0.45); padding: 1px 6px; font-size: 0.92em; }
.tag-tbc { border-style: dashed; color: #d9b56b; }
.gold { color: var(--gold-hi); }

/* Header tools */
.header-tools { display: flex; align-items: center; gap: 10px; order: 3; }
.primary-nav { order: 2; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: var(--text-2); border: 1px solid transparent; transition: color 0.25s, border-color 0.25s;
}
.icon-btn:hover { color: var(--gold-hi); border-color: var(--line); }
.primary-nav .nav-cta[aria-current="page"] { background: var(--gold-hi); color: var(--bg); }
@media (max-width: 1120px) {
  .header-tools { margin-left: auto; }
  .nav-cta { align-self: flex-start; }
}

/* Product cards */
.card-media { position: relative; overflow: hidden; background: var(--surface); aspect-ratio: 4 / 3; max-width: 100%; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
a.card:hover .card-media img { transform: scale(1.04); }
.local-name { color: var(--gold); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.local-name.lg { font-size: 14px; }
.insight-card { min-height: 100%; }

/* Product page */
.page-hero.compact { padding: 24px 0; }
.product-hero { align-items: start; }
.product-photo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.product-photo .card-media { border: 1px solid var(--line); }
.credit { font-size: 12px; color: var(--faint); }
.credit a { color: var(--text-2); text-decoration: underline; text-decoration-color: #444; }
.product-title { font-size: clamp(40px, 5vw, 68px); }
.facts { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--faint); font-size: 14px; }
.facts dd { margin: 0; color: var(--text-2); font-size: 15px; }
.table-wrap { overflow-x: auto; }
.plain-list { margin: 0; padding-left: 1.1em; }

/* Services */
.service-row {
  display: grid; grid-template-columns: 60px minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px 32px; align-items: start;
  padding: 36px 0; border-bottom: 1px solid var(--line);
}
.service-row:first-child { border-top: 1px solid var(--line); }
@media (max-width: 760px) { .service-row { grid-template-columns: 1fr; } }

/* Catalogue toolbar */
.catalogue-bar { padding-bottom: 0; }
.result-count { margin-top: 16px; }
.catalogue-section[hidden] { display: none; }

/* Quote form */
.quote-layout { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.quote-layout > form { flex: 2 1 600px; min-width: 0; }
.quote-aside { flex: 1 1 280px; min-width: 0; }
.product-picker { border: 1px solid var(--line); padding: 20px 20px 16px; margin: 0; min-width: 0; }
.product-picker legend { padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.product-picker.invalid { border-color: var(--danger); }
.pick-group + .pick-group { margin-top: 14px; }
.pick-cat { color: var(--gold); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; }
.pick-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.pick {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer;
  border: 1px solid #2e2e2e; background: #101010; color: var(--text-2); font-size: 14px; transition: border-color 0.2s, background 0.2s;
}
.pick:hover { border-color: #4a4a4a; }
.pick input { width: 18px; height: 18px; accent-color: var(--gold); flex-shrink: 0; margin: 0; }
.pick small { color: var(--faint); }
.pick:has(input:checked) { border-color: var(--gold); background: rgba(197, 161, 91, 0.08); color: var(--text); }
.pick:has(input:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* Form states */
.form-status.success { border-color: #7fbf8f; background: rgba(127, 191, 143, 0.08); }
.form-status.info { border-color: var(--gold-line); }
.form-status strong { display: block; margin-bottom: 4px; }
.btn[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Contact */
.contact-value { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; font-variant-numeric: lining-nums; }

/* Search */
.search-page-form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }
.search-field.wide { flex: 1 1 320px; }
.search-results { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.search-results li { border-bottom: 1px solid var(--line); }
.search-results a { display: flex; flex-direction: column; gap: 4px; padding: 20px 0; color: var(--text); }
.search-results a:hover .sr-title { color: var(--gold-hi); }
.sr-kind { color: var(--gold); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.sr-title { font-family: var(--heading); font-weight: 600; font-size: 19px; line-height: 1.3; transition: color 0.25s; }
.sr-desc { color: var(--muted); font-size: 14px; }

/* Article and legal titles */
.article-title { font-size: clamp(30px, 3.8vw, 48px); }
.legal-title { font-size: clamp(32px, 4vw, 48px); }
.article-body h3 { font-family: var(--sans); }

/* Links inside running text are underlined, not identified by colour alone (WCAG 1.4.1) */
p a:not(.btn), .prose a, .checkbox a, .faq a, td a, dd a, .notice a, .check-list a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(226, 193, 125, 0.6);
}
p a:not(.btn):hover, .prose a:hover, .checkbox a:hover, .faq a:hover, .check-list a:hover { text-decoration-color: currentColor; }

/* Narrow phones: logo + menu only; Search moves into the menu */
.nav-search-item { display: none; }
@media (max-width: 1120px) { .nav-search-item { display: list-item; } }
@media (max-width: 430px) {
  .header-tools .icon-btn { display: none; }
  .header-inner { gap: 12px; }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .brand { gap: 8px; }
  .brand img { height: 34px; }
  .brand-name { font-size: 14px; letter-spacing: 0.03em; }
  .brand-tag { font-size: 8px; letter-spacing: 0.2em; }
}

/* =====================================================================
   Product cards (catalogue, featured and related products)
   Image, gold category label, name, description, divider, "View product".
   The whole card is the click target through the title link's ::after.
   ===================================================================== */
.product-grid {
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.product-card {
  --pc-radius: 12px;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: #171717; border: 1px solid #222222; border-radius: var(--pc-radius); overflow: hidden;
  transition: transform 300ms var(--ease), border-color 300ms ease;
}
.pc-media {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden;
  background: #111111; border-bottom: 1px solid #222222;
}
.pc-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 300ms var(--ease);
}
.pc-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.pc-category {
  margin: 0 0 8px; color: #C5A15B; font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.4;
}
.pc-name {
  margin: 0; font-family: var(--heading); font-weight: 600; font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.25; letter-spacing: -0.01em; color: #F5F3EE; text-wrap: balance;
}
.pc-link { color: inherit; text-decoration: none; }
.pc-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--pc-radius); z-index: 1; }
.pc-desc { margin: 10px 0 0; color: #A7A7A7; font-size: 14px; line-height: 1.6; }
/* Divider + action, pinned to the bottom so every card in a row lines up */
.pc-footer { margin-top: auto; padding-top: 18px; }
.pc-footer::before { content: ""; display: block; height: 1px; background: #222222; margin-bottom: 14px; }
.pc-action {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  color: #F5F3EE; font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.pc-arrow { color: #C5A15B; flex-shrink: 0; transition: transform 300ms var(--ease); }

/* Visible keyboard focus on the whole card */
.product-card:focus-within { outline: 2px solid #E2C17D; outline-offset: 3px; }
.product-card:focus-within:not(:has(:focus-visible)) { outline: none; }

/* Hover: only for real pointers, and only when motion is welcome */
@media (hover: hover) {
  .product-card:hover { border-color: #3a3428; }
  .product-card:hover .pc-action { color: #E2C17D; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .product-card:hover { transform: translateY(-3px); }
  .product-card:hover .pc-media img { transform: scale(1.04); }
  .product-card:hover .pc-arrow { transform: translateX(4px); }
}

/* Catalogue toolbar: chips and search styled to match the cards */
.catalogue-tools .chip { border-radius: 999px; border-color: #222222; background: #111111; padding: 0 20px; }
.catalogue-tools .chip:hover { border-color: #3a3428; color: #F5F3EE; }
.catalogue-tools .chip[aria-pressed="true"] { border-color: #C5A15B; color: #E2C17D; background: rgba(197, 161, 91, 0.06); }
.catalogue-tools .search-field input { border-radius: 999px; border-color: #222222; background: #111111; }
.catalogue-tools .search-field input:focus { border-color: #C5A15B; }
.empty-state { border: 1px dashed #222222; border-radius: 12px; padding: 40px 24px; }

.quantity-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 12px; }

/* =====================================================================
   Product detail pages (scoped to .pd; nothing here applies elsewhere)
   ===================================================================== */
.pd-breadcrumb { padding-top: 22px; padding-bottom: 6px; }
.pd-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 13px; color: #A7A7A7; }
.pd-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: #555555; }
.pd-breadcrumb a { color: #A7A7A7; text-decoration: none; display: inline-block; padding: 6px 0; }
.pd-breadcrumb a:hover { color: #F5F3EE; }
.pd-breadcrumb [aria-current="page"] { color: #C5A15B; padding: 6px 0; }

.pd-hero {
  display: grid; gap: 32px; align-items: start;
  padding-top: 20px; padding-bottom: clamp(48px, 7vw, 88px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .pd-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; } }
@media (min-width: 1024px) { .pd-hero { gap: 64px; } }

.pd-frame {
  position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden;
  background: #111111; border: 1px solid #222222; border-radius: 12px;
}
.pd-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-media { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pd-media .product-photo { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd-thumbs .credit { font-size: 11px; }

.pd-summary { display: flex; flex-direction: column; min-width: 0; }
.pd-category { margin: 0 0 12px; color: #C5A15B; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.pd-title {
  margin: 0; font-family: var(--heading); font-weight: 600; color: #F5F3EE;
  font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance;
}
.pd-intro { margin: 16px 0 0; color: #A7A7A7; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.65; max-width: 52ch; }
.pd-divider { border: 0; height: 1px; background: #222222; margin: 26px 0 6px; width: 100%; }

.pd-info { margin: 0; }
.pd-row {
  display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 16px;
  padding: 12px 0; border-bottom: 1px solid #222222;
}
.pd-row dt { color: #A7A7A7; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 2px; }
.pd-row dd { margin: 0; color: #F5F3EE; font-size: 15px; line-height: 1.5; }

.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.pd-contact {
  display: inline-flex; align-items: center; min-height: 44px; color: #A7A7A7; font-size: 14px;
  text-decoration: underline; text-decoration-color: #444444; text-underline-offset: 4px;
}
.pd-contact:hover { color: #F5F3EE; text-decoration-color: #C5A15B; }

.pd-section { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid #1a1a1a; }
.pd-band { background: #0d0d0d; }
.pd-split { display: grid; gap: 24px 64px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pd-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); } }
.pd-h2 { margin: 0; font-family: var(--heading); font-weight: 600; color: #F5F3EE; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.pd-copy { display: flex; flex-direction: column; gap: 18px; max-width: 68ch; min-width: 0; }
.pd-copy .prose { color: #C9C6BF; }
.pd-params { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-params li { border: 1px solid #222222; border-radius: 999px; padding: 6px 14px; font-size: 13px; color: #F5F3EE; background: #171717; }

.pd-cta { padding: clamp(64px, 8vw, 104px) 0; border-top: 1px solid #1a1a1a; background: #0d0d0d; }

@media (max-width: 767px) {
  .pd-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pd-actions .btn { width: 100%; }
  /* Phones: keep the quote CTA within the first screen, extra photos after the facts */
  .pd-hero { gap: 24px; }
  .pd-media { display: contents; }
  .pd-media .main-photo { order: 1; }
  .pd-summary { order: 2; }
  .pd-thumbs { order: 3; }
  .pd-actions { order: 3; margin-top: 22px; }
  .pd-divider { order: 4; margin-top: 24px; }
  .pd-info { order: 5; }
}

/* =====================================================================
   Product catalogue page: heading, search, category pills, sort, grid
   (scoped to .cat-*, .pill and .product-grid--catalogue)
   ===================================================================== */
.cat-head { padding-top: clamp(28px, 4vw, 48px); padding-bottom: 8px; }
.cat-eyebrow { margin: 22px 0 10px; color: #C5A15B; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; }
.cat-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.cat-title { margin: 0; font-family: var(--heading); font-weight: 600; color: #F5F3EE; font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.025em; }
.cat-count { margin: 0; color: #A7A7A7; font-size: 14px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.cat-intro { margin: 12px 0 0; color: #A7A7A7; font-size: clamp(16px, 1.3vw, 18px); max-width: 60ch; }

.cat-tools { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.cat-search { position: relative; }
.cat-search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #A7A7A7; pointer-events: none; }
.cat-search input {
  width: 100%; min-height: 56px; padding: 0 56px 0 52px; box-sizing: border-box;
  background: #171717; border: 1px solid #222222; border-radius: 12px; color: #F5F3EE;
  font: 400 16px/1.4 var(--sans); transition: border-color 200ms ease, box-shadow 200ms ease;
}
.cat-search input::placeholder { color: #8e8e8e; }
.cat-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cat-search input:focus { outline: none; border-color: #C5A15B; box-shadow: 0 0 0 3px rgba(197, 161, 91, 0.25); }
.cat-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 8px; color: #A7A7A7; cursor: pointer;
}
.cat-clear:hover { color: #F5F3EE; background: #222222; }
.cat-clear:focus-visible { outline: 2px solid #E2C17D; outline-offset: 0; }

.cat-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  background: #171717; border: 1px solid #222222; color: #F5F3EE;
  font: 500 14px/1 var(--sans); letter-spacing: 0.02em; white-space: nowrap;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.pill:hover { border-color: #3a3428; }
.pill[aria-pressed="true"] { background: #C5A15B; border-color: #C5A15B; color: #080808; font-weight: 600; }
.pill:focus-visible { outline: 2px solid #E2C17D; outline-offset: 3px; }

.cat-sort { display: flex; align-items: center; gap: 10px; }
.cat-sort label { color: #A7A7A7; font-size: 13px; white-space: nowrap; }
.cat-sort select {
  min-height: 44px; padding: 0 40px 0 16px; border-radius: 999px; cursor: pointer;
  background: #171717 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C5A15B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid #222222; color: #F5F3EE; font: 400 14px/1.2 var(--sans);
  -webkit-appearance: none; appearance: none;
}
.cat-sort select:focus { outline: none; border-color: #C5A15B; box-shadow: 0 0 0 3px rgba(197, 161, 91, 0.25); }

.cat-results { padding-bottom: clamp(56px, 7vw, 96px); }
/* two catalogue columns only once each card stays comfortably readable */
@media (min-width: 600px) and (max-width: 699px) { .product-grid--catalogue { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) { .product-grid--catalogue { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .product-grid--catalogue { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.product-grid--catalogue .product-card[hidden] { display: none; }
@media (min-width: 1200px) {
  /* four narrower cards: tighter text so the photo stays the dominant element */
  .product-grid--catalogue .pc-body { padding: 14px 16px 12px; }
  .product-grid--catalogue .pc-category { margin-bottom: 4px; font-size: 10.5px; }
  .product-grid--catalogue .pc-name { font-size: 17px; }
  .product-grid--catalogue .pc-desc { margin-top: 6px; font-size: 13px; line-height: 1.5; }
  .product-grid--catalogue .pc-footer { padding-top: 12px; }
  .product-grid--catalogue .pc-footer::before { margin-bottom: 10px; }
}

.cat-empty {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 56px 24px; border: 1px dashed #222222; border-radius: 12px; background: #0d0d0d;
}
.cat-empty[hidden] { display: none; }
.cat-empty-title { margin: 0; font-family: var(--heading); font-weight: 600; font-size: 24px; letter-spacing: -0.015em; color: #F5F3EE; }
.cat-empty p { margin: 0 0 8px; color: #A7A7A7; }

@media (max-width: 599px) {
  .cat-row { flex-direction: column; align-items: stretch; }
  .cat-sort { justify-content: space-between; }
  .cat-sort select { flex: 1; }
}


/* =====================================================================
   Page refresh: home intro, about, markets, quality, services, contact,
   quote, FAQ, insights and privacy. Everything below uses new class names
   and does not touch the hero globe, its canvas, labels or fallback.
   ===================================================================== */


/* ---------- Homepage hero text ----------
   The globe sizes itself from the hero's height, and on phones and short
   screens that height comes from this text column. .hero-reserve is an
   invisible, aria-hidden stand-in for the previous hero text: blank lines in
   the same fonts, sizes and line heights (regular and italic headline lines,
   lead lines) plus the fixed height of the eyebrow, buttons and motto, with
   the line counts that text had at each width. It shares one grid cell with
   the new text, so the column, and with it the protected globe container,
   keeps exactly its previous height. Keep the new text shorter than it. */
.hero-globe .hero-copy { display: grid; }
.hero-globe .hero-copy > * { grid-area: 1 / 1; min-width: 0; }
.hero-content { --gap: 28px; align-self: center; }
@media (max-width: 899px) { .hero-content { align-self: start; } }
.hero-reserve { visibility: hidden; pointer-events: none; }
.hero-reserve-gap { display: block; }
.hero-reserve-h1, .hero-reserve-lead { display: block; }
/* The reserve keeps the previous hero type exactly, independent of the site's type scale. */
.hero-globe .hero-reserve-h1 {
  font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em;
  font-size: clamp(46px, 6vw, 96px); text-wrap: wrap;
}
.hero-globe .hero-reserve-h1 em { font-style: italic; }
.hero-globe .hero-reserve-lead { font-family: var(--sans); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; }
.hero-reserve-h1 > span, .hero-reserve-lead > span { display: none; }
@media (max-width: 342.98px) {
  .hero-reserve-gap { height: 303.390625px; }
  .hero-reserve .r1, .hero-reserve .r2, .hero-reserve .i1, .hero-reserve .i2, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4, .hero-reserve .l5, .hero-reserve .l6 { display: block; }
}
@media (min-width: 343px) and (max-width: 343.98px) {
  .hero-reserve-gap { height: 303.390625px; }
  .hero-reserve .r1, .hero-reserve .r2, .hero-reserve .i1, .hero-reserve .i2, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4, .hero-reserve .l5 { display: block; }
}
@media (min-width: 344px) and (max-width: 450.98px) {
  .hero-reserve-gap { height: 303.390625px; }
  .hero-reserve .r1, .hero-reserve .r2, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4, .hero-reserve .l5 { display: block; }
}
@media (min-width: 451px) and (max-width: 452.98px) {
  .hero-reserve-gap { height: 303.390625px; }
  .hero-reserve .r1, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4, .hero-reserve .l5 { display: block; }
}
@media (min-width: 453px) and (max-width: 469.98px) {
  .hero-reserve-gap { height: 303.390625px; }
  .hero-reserve .r1, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4 { display: block; }
}
@media (min-width: 470px) and (max-width: 529.98px) {
  .hero-reserve-gap { height: 283.59375px; }
  .hero-reserve .r1, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4 { display: block; }
}
@media (min-width: 530px) and (max-width: 559.98px) {
  .hero-reserve-gap { height: 217.59375px; }
  .hero-reserve .r1, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4 { display: block; }
}
@media (min-width: 560px) and (max-width: 1218.98px) {
  .hero-reserve-gap { height: 217.59375px; }
  .hero-reserve .r1, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3 { display: block; }
}
@media (min-width: 1219px) and (max-width: 1282.98px) {
  .hero-reserve-gap { height: 217.59375px; }
  .hero-reserve .r1, .hero-reserve .r2, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3 { display: block; }
}
@media (min-width: 1283px) and (max-width: 1575.98px) {
  .hero-reserve-gap { height: 217.59375px; }
  .hero-reserve .r1, .hero-reserve .r2, .hero-reserve .i1, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4 { display: block; }
}
@media (min-width: 1576px) {
  .hero-reserve-gap { height: 217.59375px; }
  .hero-reserve .r1, .hero-reserve .r2, .hero-reserve .i1, .hero-reserve .i2, .hero-reserve .l1, .hero-reserve .l2, .hero-reserve .l3, .hero-reserve .l4 { display: block; }
}
.hero-globe .hero-title { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
.hero-actions { padding-top: 8px; }

.btn-quiet { color: var(--text); border-color: rgba(197, 161, 91, 0.35); background: transparent; }
.btn-quiet:hover { color: var(--text); border-color: var(--gold-hi); background: rgba(197, 161, 91, 0.07); }

/* ---------- Shared editorial pieces ---------- */
.prose-flow { color: var(--text-2); font-size: 17px; line-height: 1.7; max-width: 680px; }
.intro-copy { color: var(--text-2); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; max-width: 600px; }
.intro-split, .hero-split { display: grid; gap: 40px 72px; align-items: center; }
@media (min-width: 900px) {
  .intro-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.photo-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.photo-frame { overflow: hidden; border-radius: 12px; border: 1px solid var(--graphite); background: var(--surface); aspect-ratio: 4 / 3; max-width: 100%; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

.cat-cards { display: grid; gap: 24px; }
@media (min-width: 760px) { .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--graphite); border-radius: 12px; overflow: hidden; min-width: 0; }
.cat-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: #111; max-width: 100%; }
.cat-card-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-card-body { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 32px); flex: 1; }
.cat-card-count { color: var(--gold); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.cat-card-title { font-family: var(--heading); font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
.cat-card-desc { color: var(--muted); font-size: 15px; line-height: 1.6; }
.cat-card-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; padding: 4px 0 8px; font-size: 14px; }
.cat-card-list li:not(:last-child)::after { content: "·"; color: #555; margin: 0 10px; }
.cat-card-list a { color: var(--text-2); text-decoration: underline; text-decoration-color: #444; text-underline-offset: 3px; }
.cat-card-list a:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.cat-card .link-arrow { margin-top: auto; }

.principles { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.principles > div { border-top: 1px solid var(--gold-line); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }

.svc-grid { display: grid; gap: 20px; }
@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-card { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--graphite); border-radius: 12px; padding: clamp(24px, 3vw, 36px); min-width: 0; }
.svc-num { font-family: var(--heading); font-weight: 600; color: var(--gold); font-size: 22px; line-height: 1; }
.svc-card .link-arrow { margin-top: auto; padding-top: 8px; }

.route-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.route-card {
  display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; border: 1px solid var(--graphite); border-radius: 12px;
  background: var(--surface); color: var(--text); transition: border-color 0.25s, background 0.25s;
}
.route-card:hover { border-color: rgba(197, 161, 91, 0.6); color: var(--text); background: #1a1a1a; }
.route-kicker { color: var(--gold); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.route-title { font-family: var(--heading); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.route-desc { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* ---------- Enquiry forms (quote and contact) ---------- */
.enquiry { padding: clamp(32px, 5vw, 64px) 0 var(--section); }
.enquiry-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .enquiry-layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; }
  .enquiry-intro { position: sticky; top: 108px; }
}
.enquiry-intro { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.enquiry-title { font-family: var(--heading); font-weight: 600; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.enquiry-intro .lead { font-size: 17px; }
.enquiry-guide, .enquiry-direct { border-top: 1px solid var(--graphite); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.enquiry-guide-title { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-2); }
.check-list.compact li { padding: 11px 0; font-size: 15px; gap: 12px; }
.enquiry-direct .small { line-height: 1.8; }

.enquiry-panel { background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 44px); min-width: 0; scroll-margin-top: 104px; }
.enquiry-form { display: flex; flex-direction: column; gap: 28px; }
.enquiry-form-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.enquiry-form-title { font-family: var(--heading); font-weight: 600; font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.015em; }
.enquiry-body { display: flex; flex-direction: column; gap: 32px; }
.form-section { border: 0; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--graphite); min-width: 0; }
.form-section > legend {
  float: left; width: 100%; padding: 0; margin: 0 0 20px; display: flex; align-items: baseline; gap: 12px;
  font-family: var(--heading); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
}
.form-section > legend + * { clear: both; }
.form-step { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--gold); }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .full { grid-column: 1 / -1; } }
.form-section .form-grid + .form-grid, .form-section .product-picker + .form-grid { margin-top: 20px; }

.enquiry-form .field input, .enquiry-form .field select, .enquiry-form .field textarea {
  background: #0f0f0f; border-color: #2c2c2c; border-radius: var(--radius-sm); min-height: 52px;
}
.enquiry-form .field textarea { min-height: 120px; }
.enquiry-form .field input:focus, .enquiry-form .field select:focus, .enquiry-form .field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 161, 91, 0.2); background: #121212;
}
.enquiry-form .field.invalid input, .enquiry-form .field.invalid select, .enquiry-form .field.invalid textarea { border-color: var(--danger); }
.enquiry-form .field input::placeholder, .enquiry-form .field textarea::placeholder { color: #8a8a8a; }
.optional { font-weight: 400; font-size: 12px; color: var(--faint); margin-left: 4px; }
.field-hint { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--muted); }

.enquiry-form .product-picker { border: 1px solid var(--graphite); border-radius: var(--radius); padding: 18px 18px 14px; background: #121212; }
.enquiry-form .product-picker > legend { padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.enquiry-form .product-picker > .field-hint { margin-bottom: 14px; }
.enquiry-form .pick-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 640px) { .enquiry-form .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-item { display: flex; flex-direction: column; min-width: 0; }
.enquiry-form .pick { border-radius: var(--radius-sm); border-color: #2a2a2a; background: #0f0f0f; }
.pick-item:has(.pick-qty:not([hidden])) .pick { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.pick-qty {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px;
  border: 1px solid var(--gold); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: rgba(197, 161, 91, 0.04);
}
.pick-qty[hidden] { display: none; }
.pick-qty .field { gap: 6px; font-size: 12px; }
.enquiry-form .pick-qty .field input, .enquiry-form .pick-qty .field select { min-height: 46px; padding: 10px 12px; }
.enquiry-form .pick-qty .field select { padding-right: 34px; background-position: right 12px center; }
@media (max-width: 479px) { .pick-qty { grid-template-columns: minmax(0, 1fr); } }

.form-submit { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--graphite); padding-top: 28px; }
.btn-submit { min-height: 56px; font-size: 15px; letter-spacing: 0.04em; width: 100%; }
@media (min-width: 640px) { .btn-submit { width: auto; align-self: flex-start; padding: 0 44px; } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: 0.6; } }

.enquiry-form .form-status { border-radius: 10px; padding: 20px 22px; }
.enquiry-form .form-status p { margin-top: 6px; color: var(--text-2); }
.enquiry-form .form-status.success { border-color: var(--gold-line); background: rgba(197, 161, 91, 0.05); padding: clamp(24px, 4vw, 40px); }
.status-title { font-family: var(--heading); font-weight: 600; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.02em; color: var(--text); }
.form-status.success .status-title + p { margin-top: 12px; }
.status-ref { color: var(--muted); }
.status-ref strong { display: inline; color: var(--gold-hi); letter-spacing: 0.06em; font-weight: 600; }
.form-status.success .btn-row { margin-top: 24px; }
.form-status:focus { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 64px; } }
.contact-details { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.contact-list { margin: 0; border-top: 1px solid var(--graphite); }
.contact-list > div { padding: 18px 0; border-bottom: 1px solid var(--graphite); display: flex; flex-direction: column; gap: 6px; }
.contact-list dt { color: var(--gold); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.contact-list dd { margin: 0; }
.contact-map { display: block; margin-top: 10px; font-size: 14px; }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; }
  .faq-nav { position: sticky; top: 108px; }
}
.faq-nav-title { color: var(--faint); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 14px; }
.faq-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.faq-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--graphite); border-radius: 999px;
  color: var(--text-2); font-size: 14px; background: #111;
}
.faq-nav a:hover { border-color: var(--gold); color: var(--text); }
@media (min-width: 1024px) {
  .faq-nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--graphite); }
  .faq-nav a { display: flex; border: 0; border-bottom: 1px solid var(--graphite); border-radius: 0; background: none; padding: 0; }
  .faq-nav a:hover { color: var(--gold-hi); }
}
.faq-groups { display: flex; flex-direction: column; gap: 56px; min-width: 0; }
.faq-group { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 104px; }
.faq-group .faq summary { font-size: 17px; }

/* ---------- Insights ---------- */
.feature-article { display: grid; background: var(--surface); border: 1px solid var(--graphite); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 900px) { .feature-article { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.feature-media { aspect-ratio: 4 / 3; overflow: hidden; max-width: 100%; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(24px, 4vw, 52px); min-width: 0; }
.feature-body .btn { align-self: flex-start; }
.feature-title a { color: var(--text); }
.feature-title a:hover { color: var(--gold-hi); }
.article-figure .photo-frame { aspect-ratio: 16 / 9; }
.article-note { border-top: 1px solid var(--graphite); padding-top: 20px; }

/* ---------- Legal pages ---------- */
.legal-layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; } }
.legal-toc { display: none; }
@media (min-width: 1024px) {
  .legal-toc { display: block; position: sticky; top: 108px; max-height: calc(100vh - 128px); overflow-y: auto; }
  .legal-toc-mobile { display: none; }
}
.legal-toc-title { color: var(--faint); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
.legal-toc-list { list-style: none; display: flex; flex-direction: column; font-size: 14px; }
.legal-toc-list a { display: block; padding: 8px 0; color: var(--text-2); line-height: 1.4; }
.legal-toc-list a:hover { color: var(--gold-hi); }
.legal-toc-mobile { border: 1px solid var(--graphite); border-radius: 10px; background: var(--surface); }
.legal-toc-mobile summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; padding: 0 18px; font-weight: 500; color: var(--text); list-style: none; }
.legal-toc-mobile summary::-webkit-details-marker { display: none; }
.legal-toc-mobile summary::after { content: "+"; margin-left: auto; color: var(--gold); font-size: 22px; font-weight: 300; }
.legal-toc-mobile[open] summary::after { content: "−"; }
.legal-toc-mobile nav { padding: 0 18px 12px; border-top: 1px solid var(--graphite); }
.legal-doc { max-width: 720px; line-height: 1.75; }
.legal-doc h2 { font-size: clamp(26px, 2.6vw, 32px); padding-top: 28px; border-top: 1px solid var(--graphite); scroll-margin-top: 104px; }
.legal-doc h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-doc h3 { font-size: 16px; }
.legal-address { color: var(--text); }

/* ---------- 404 page ---------- */
.nf { padding: clamp(56px, 9vw, 120px) 0; border-bottom: 1px solid var(--line-soft); }
.nf-inner { display: grid; gap: 40px 72px; align-items: center; }
@media (min-width: 900px) { .nf-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.nf-mark { position: relative; min-width: 0; }
.nf-code {
  display: block; font-family: var(--heading); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em;
  font-size: clamp(110px, 19vw, 220px); color: transparent; -webkit-text-stroke: 1px var(--gold);
}
.nf-route { display: block; width: 100%; max-width: 520px; height: 72px; margin-top: 12px; }
.nf-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nf-title { font-family: var(--heading); font-weight: 600; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.nf-more { color: var(--muted); font-size: 15px; }

/* ---------- Audit fixes ---------- */
/* Search results arrive after the index loads; reserving room keeps the footer from jumping. */
.search-results-section { min-height: 60vh; }
/* Footer links: at least 24px tall for comfortable tapping (WCAG 2.2 target size). */
.footer-col a, .footer-bottom nav a { padding-block: 2px; }
/* While the web fonts load, local fallbacks scaled to the web fonts' widths keep
   headings (via --heading) and inner-page hero text wrapping the same before and
   after the swap, so the page below does not jump. */
@font-face { font-family: "Manrope Fallback"; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"); size-adjust: 103.8%; }
@font-face { font-family: "Manrope Fallback Arial"; src: local("Arial"); size-adjust: 97.5%; }
@font-face { font-family: "Inter Fallback"; src: local("Segoe UI"), local("SegoeUI"); size-adjust: 107.6%; }
.page-hero .lead { font-family: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- Header navigation typeface ---------- */
/* Manrope for the header's page links, the Request a Quote button and the mobile menu. */
.primary-nav a, .primary-nav ul a:not(.btn) { font-family: "Manrope", var(--sans); }
.primary-nav a:not(.btn) { font-weight: 500; letter-spacing: 0.01em; }
.primary-nav .nav-cta { font-weight: 700; }
@media (max-width: 1120px) { .primary-nav ul a:not(.btn) { font-size: 22px; font-weight: 600; letter-spacing: 0; } }