/* ==========================================================================
   CORETER — Site stylesheet
   1. Tokens          5. Sections        9.  Advantage
   2. Base            6. Leadership      10. CTA
   3. Nav             7. About           11. Footer
   4. Hero            8. Capabilities    12. Contact
                         Operations      13. Animation / Responsive
   ========================================================================== */

/* 1. TOKENS ============================================================== */
:root {
  --black: #0a0a0a;
  --charcoal: #1a1a1a;
  --dark-gray: #2a2a2a;
  --mid-gray: #6b6b6b;
  --light-gray: #c8c8c8;
  --off-white: #e8e4df;
  --cream: #f5f2ed;
  --gold: #c9a84c;
  --gold-light: #dbc278;
  --gold-dark: #a88a35;
  --copper: #b87333;
  --silver: #c0c0c0;

  --gutter: 100px;
  --gutter-md: 32px;
}

/* 2. BASE ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--black);
  color: var(--off-white);
  overflow-x: hidden;
}

img { max-width: 100%; }

/* Keyboard focus — visible on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 24px;
  z-index: 200;
  background: var(--gold);
  color: var(--black);
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.3s ease;
}

.skip-link:focus { top: 20px; }

/* 3. NAV ================================================================= */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Solid #000 to match the black surrounding the logo artwork, so the
     logo block reads as part of the bar rather than a pasted-on rectangle. */
  background: #000;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  transition: padding 0.4s ease;
}

/* Applied by js/main.js on scroll — replaces the old inline style writes */
nav.scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 6px;
  color: var(--gold);
  text-decoration: none;
  display: block;
}

.logo img { height: 52px; width: auto; display: block; }

.logo span {
  color: var(--off-white);
  font-size: 11px;
  letter-spacing: 4px;
  display: block;
  margin-top: -6px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: 36px; list-style: none; align-items: center; }

.nav-links a {
  color: var(--light-gray);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.3s;
  position: relative;
  padding: 4px 0;
}

.nav-links a:hover { color: var(--gold); }

/* Current page marker */
.nav-links a[aria-current="page"] { color: var(--gold); }

.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
}

/* Mobile menu toggle — hidden until the breakpoint */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(201,168,76,0.3);
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle span + span { margin-top: 5px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 4. HERO ================================================================ */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: flex-end;
  padding: 120px var(--gutter) 80px;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}

/* Hero video slider — stacked clips, cross-dissolved */
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  pointer-events: none;
}

/* Promote only the clip currently on screen, not all four. */
.hero-video video.is-active { opacity: 1; will-change: opacity; }

/* Poster shows until the first clip can play, so the hero is never black */
/* Two layers: a ~400-byte blurred placeholder inlined below, and the real
   poster on top. The placeholder paints with the stylesheet itself, so the
   hero is never an empty black box while the full frame downloads. The
   poster is the exact first frame of clip 1, so when the video takes over
   there is no visible jump. */
.hero-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('../assets/hero-poster.jpg'),
    url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gAQTGF2YzYwLjMxLjEwMgD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAASACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAUGBAP/xAAkEAABBAIBAgcAAAAAAAAAAAABAAIDBBEhEgUxFSIzNEFhcf/EABcBAAMBAAAAAAAAAAAAAAAAAAABAgP/xAAYEQADAQEAAAAAAAAAAAAAAAAAARECQf/aAAwDAQACEQMRAD8Ab3Jm0msJZs/IRH1uCRoDXYP2lfU7ZsyxRDST3K72uywEHO1VpMhZOt82+Vw2skxy08tqSdcmqtDBISc98o8cmA4ybCa2lwTzRra93D+rpaGpEIWaKZPWvUWKTuhCBn//2Q==');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  opacity: 1;
  transition: opacity 1s ease;
  pointer-events: none;
}

.hero-video.is-playing::after { opacity: 0; }

/* Progress ticks — one per clip */
.hero-progress {
  position: absolute;
  bottom: 40px;
  right: var(--gutter);
  z-index: 3;
  display: flex;
  gap: 10px;
}

.hero-progress button {
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(232,228,223,0.25);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}

.hero-progress button:hover { background: rgba(232,228,223,0.45); }

.hero-progress button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-progress button[aria-current="true"]::after {
  animation: heroTick var(--clip-duration, 5s) linear forwards;
}

@keyframes heroTick {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.6) 40%, rgba(10,10,10,0.82) 100%);
}

.hero-texture {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.008) 2px, rgba(255,255,255,0.008) 4px);
  pointer-events: none;
  z-index: 2;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 100%, black 30%, transparent 70%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: end;
}

.hero-left { max-width: 700px; }

.hero-tag {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-tag::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--gold);
}

.hero h1 {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(42px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.08;
  color: var(--cream);
  margin-bottom: 32px;
  letter-spacing: -0.5px;
}

.hero h1 em { font-style: italic; color: var(--gold); }

.hero-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--light-gray);
  max-width: 600px;
  font-weight: 300;
}

.hero-actions { display: flex; gap: 20px; margin-top: 36px; flex-wrap: wrap; }

.hero-stats { display: flex; flex-direction: column; gap: 40px; }
.stat { text-align: right; }

.stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 2px;
}

.stat-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-top: 4px;
}

.scroll-line {
  position: absolute;
  bottom: 0;
  left: var(--gutter);
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--gold));
  /* Finite: an endless animation keeps the compositor awake for the life
     of the page and prevents the browser ever going idle. Six pulses is
     long enough to read as a scroll cue. */
  animation: scrollPulse 2s ease-in-out 6;
  z-index: 3;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* PAGE HERO — compact banner for interior pages */
.page-hero {
  position: relative;
  padding: 180px var(--gutter) 72px;
  background: var(--black);
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 20% 100%, black 10%, transparent 65%);
  mask-image: radial-gradient(ellipse at 20% 100%, black 10%, transparent 65%);
  pointer-events: none;
}

.page-hero-content { position: relative; z-index: 2; }

.page-hero h1 {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -0.5px;
  max-width: 860px;
}

.page-hero h1 em { font-style: italic; color: var(--gold); }

.page-hero-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--light-gray);
  max-width: 640px;
  font-weight: 300;
  margin-top: 24px;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-bottom: 24px;
  list-style: none;
  flex-wrap: wrap;
}

.breadcrumb a { color: var(--gold); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb li::after { content: '/'; margin-left: 10px; color: rgba(255,255,255,0.2); }
.breadcrumb li:last-child::after { content: ''; }

/* 5. SECTIONS ============================================================ */
section { padding: 72px var(--gutter); position: relative; }

.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

.section-tag {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  font-weight: 500;
}

.section-heading {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.15;
  margin-bottom: 28px;
  max-width: 720px;
  letter-spacing: -0.3px;
}

/* Shared button styles */
.btn {
  display: inline-block;
  padding: 18px 52px;
  background: var(--gold);
  color: var(--black);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--gold);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.btn:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.4);
}

.btn-outline:hover {
  background: rgba(201,168,76,0.08);
  color: var(--gold-light);
  border-color: var(--gold);
  box-shadow: none;
}

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 28px;
  transition: gap 0.3s ease, color 0.3s ease;
}

.link-arrow:hover { gap: 18px; color: var(--gold-light); }

/* 6. LEADERSHIP ========================================================== */
.leadership { background: var(--black); }

.leader-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 64px;
  margin-top: 32px;
  background: var(--charcoal);
  border: 1px solid rgba(201,168,76,0.08);
}

.leader-photo {
  background: var(--dark-gray);
  height: 100%;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.leader-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.leader-info { padding: 56px 56px 56px 0; }

.leader-name {
  font-family: 'Source Serif 4', serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 8px;
}

.leader-title {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  font-weight: 500;
}

.leader-bio {
  font-size: 15px;
  line-height: 1.85;
  color: var(--light-gray);
  font-weight: 300;
}

.leader-bio p + p { margin-top: 16px; }

.leader-companies {
  display: flex;
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}

.leader-company {
  padding: 10px 20px;
  border: 1px solid rgba(201,168,76,0.2);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 500;
}

/* 7. ABOUT =============================================================== */
.about { background: var(--charcoal); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 24px;
}

.about-text {
  font-size: 16px;
  line-height: 1.85;
  color: var(--light-gray);
  font-weight: 300;
}

.about-text p + p { margin-top: 20px; }

.about-highlight {
  background: var(--dark-gray);
  padding: 48px;
  border-left: 3px solid var(--gold);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-highlight blockquote {
  font-family: 'Source Serif 4', serif;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--cream);
  line-height: 1.6;
  margin-bottom: 20px;
}

.about-highlight cite {
  font-style: normal;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

/* 8. CAPABILITIES ======================================================== */
.capabilities { background: var(--black); }

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 36px;
  background: rgba(201,168,76,0.1);
}

.cap-card {
  background: var(--charcoal);
  padding: 40px 36px;
  transition: background 0.5s ease;
  position: relative;
  overflow: hidden;
}

.cap-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.cap-card:hover::after { transform: scaleX(1); }
.cap-card:hover { background: var(--dark-gray); }

.cap-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  color: var(--gold);
}

.cap-card h3 {
  font-family: 'Source Serif 4', serif;
  font-size: 21px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 16px;
}

.cap-card p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--mid-gray);
  font-weight: 300;
}

/* OPERATIONS ------------------------------------------------------------ */
.operations {
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
  padding-top: 140px;
}

.operations-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/operations-bg.jpg') center center / cover no-repeat;
}

.operations-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.72) 50%, rgba(10,10,10,0.88) 100%);
}

.operations > .section-tag,
.operations > .section-heading,
.operations > .ops-layout {
  position: relative;
  z-index: 2;
}

.ops-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30%;
  margin-top: 32px;
}

.ops-list { list-style: none; display: flex; flex-direction: column; }

.ops-item {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  align-items: start;
  transition: padding-left 0.3s ease;
}

.ops-item:hover { padding-left: 12px; }

.ops-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
}

.ops-item h4 {
  font-family: 'Source Serif 4', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 6px;
}

.ops-item p {
  font-size: 14px;
  color: var(--mid-gray);
  line-height: 1.65;
  font-weight: 300;
}

.ops-map-box {
  background: rgba(42,42,42,0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,76,0.12);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  max-width: 420px;
  align-self: start;
  margin-top: 78px;
}

.ops-map-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 60%, rgba(184,115,51,0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(201,168,76,0.04) 0%, transparent 50%);
}

.ops-map-label {
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; position: relative;
}

.ops-map-title {
  font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 600;
  color: var(--cream); margin-bottom: 12px; position: relative;
}

.ops-map-desc {
  font-size: 13px; line-height: 1.65; color: var(--light-gray);
  font-weight: 300; position: relative;
}

.ops-map-dots { display: flex; gap: 12px; margin-top: 20px; position: relative; }

.ops-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--gold);
}

.ops-dot.active {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(201,168,76,0.4);
}

/* 9. ADVANTAGE =========================================================== */
.advantage { background: var(--charcoal); position: relative; overflow: hidden; }

.advantage::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(ellipse at 80% 50%, rgba(201,168,76,0.05) 0%, transparent 60%);
  pointer-events: none;
}

.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 36px;
  position: relative;
}

.adv-item {
  padding: 44px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  transition: border-color 0.4s ease, background 0.4s ease;
}

.adv-item:hover {
  border-color: rgba(201,168,76,0.2);
  background: rgba(201,168,76,0.03);
}

.adv-item h3 {
  font-family: 'Source Serif 4', serif;
  font-size: 20px; font-weight: 600; color: var(--cream);
  margin-bottom: 14px; display: flex; align-items: center; gap: 14px;
}

.adv-item h3::before {
  content: ''; width: 8px; height: 8px;
  background: var(--gold); flex-shrink: 0;
}

.adv-item p {
  font-size: 14px; line-height: 1.75; color: var(--mid-gray);
  font-weight: 300; padding-left: 22px;
}

/* 10. CTA ================================================================ */
.cta {
  background: var(--black); text-align: center;
  padding: 80px var(--gutter); position: relative;
}

.cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.06) 0%, transparent 60%);
}

.cta-content { position: relative; z-index: 2; }

.cta h2 {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(32px, 4vw, 48px); font-weight: 600;
  color: var(--cream); margin-bottom: 20px; letter-spacing: -0.3px;
}

.cta p {
  font-size: 16px; color: var(--mid-gray); max-width: 520px;
  margin: 0 auto 44px; line-height: 1.7; font-weight: 300;
}

.cta-btn {
  display: inline-block; padding: 18px 52px;
  background: var(--gold); color: var(--black);
  text-decoration: none; font-size: 12px;
  letter-spacing: 4px; text-transform: uppercase;
  font-weight: 600; transition: background 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.cta-btn:hover {
  background: var(--gold-light); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,0.3);
}

/* 11. FOOTER ============================================================= */
footer {
  background: var(--black); padding: 64px var(--gutter) 40px;
  border-top: 1px solid rgba(201,168,76,0.15);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.footer-about img { height: 44px; width: auto; display: block; }

.footer-about p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--mid-gray);
  font-weight: 300;
  margin-top: 16px;
}

.footer-col h4 {
  font-family: 'Source Serif 4', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col ul li a {
  font-size: 13px;
  color: var(--mid-gray);
  text-decoration: none;
  transition: color 0.3s;
  letter-spacing: 0.5px;
}

.footer-col ul li a:hover { color: var(--gold); }

.footer-col p {
  font-size: 13px;
  color: var(--mid-gray);
  line-height: 1.75;
  font-weight: 300;
}

.footer-col p + p { margin-top: 12px; }

.footer-contact-link {
  color: var(--gold);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
}

.footer-contact-link:hover { color: var(--gold-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
}

.footer-copy { font-size: 12px; color: var(--mid-gray); letter-spacing: 1px; }

.footer-bottom-links { display: flex; gap: 24px; }

.footer-bottom-links a {
  font-size: 11px;
  color: var(--mid-gray);
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.3s;
}

.footer-bottom-links a:hover { color: var(--gold); }

/* 12. CONTACT ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  margin-top: 24px;
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: 24px; }

.field { display: flex; flex-direction: column; gap: 8px; }

.field label {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.field .required { color: var(--copper); }

.field input,
.field select,
.field textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 16px 18px;
  color: var(--off-white);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 300;
  transition: border-color 0.3s ease, background 0.3s ease;
  width: 100%;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 46px;
}

.field select option { background: var(--charcoal); color: var(--off-white); }

.field textarea { resize: vertical; min-height: 150px; line-height: 1.7; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(201,168,76,0.04);
}

.field input::placeholder,
.field textarea::placeholder { color: rgba(107,107,107,0.8); }

/* Validation */
.field-error {
  font-size: 12px;
  color: var(--copper);
  font-weight: 400;
  min-height: 0;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--copper); }

.form-note {
  font-size: 13px;
  color: var(--mid-gray);
  line-height: 1.7;
  font-weight: 300;
}

.form-status {
  padding: 18px 22px;
  border-left: 3px solid var(--gold);
  background: rgba(201,168,76,0.06);
  font-size: 14px;
  line-height: 1.7;
  color: var(--cream);
  font-weight: 300;
}

.form-status[hidden] { display: none; }

/* Contact detail panel */
.contact-details {
  background: var(--dark-gray);
  border-left: 3px solid var(--gold);
  padding: 48px;
}

.contact-block + .contact-block {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.contact-block h3 {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  font-weight: 500;
}

.contact-block p,
.contact-block a {
  font-size: 15px;
  line-height: 1.8;
  color: var(--light-gray);
  font-weight: 300;
  text-decoration: none;
}

.contact-block a:hover { color: var(--gold); }

/* 13. ANIMATION ========================================================== */
.fade-up {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible { opacity: 1; transform: translateY(0); }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .fade-up { opacity: 1; transform: none; }
  .scroll-line { animation: none; opacity: 0.6; }

  /* Hold the poster instead of cross-dissolving through four clips */
  .hero-video video { display: none; }
  .hero-video::after { opacity: 1; }
  .hero-progress { display: none; }
}

/* RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --gutter: var(--gutter-md); }

  nav { padding: 16px var(--gutter-md); }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .ops-layout { grid-template-columns: 1fr; gap: 48px; }
  .ops-map-box { margin-top: 0; max-width: none; }
  .leader-card { grid-template-columns: 1fr; }
  .leader-photo { min-height: 240px; }
  .leader-info { padding: 40px; }
  .hero-content { grid-template-columns: 1fr; gap: 40px; }
  .hero-stats { flex-direction: row; gap: 48px; }
  .stat { text-align: left; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .page-hero { padding-top: 150px; }

  /* Mobile nav */
  .nav-toggle { display: block; }

  .nav-links {
    position: fixed;
    top: 0; right: 0;
    width: min(340px, 82vw);
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: 100px 40px 40px;
    background: #000;
    border-left: 1px solid rgba(201,168,76,0.15);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 15px; letter-spacing: 3px; }
}

@media (max-width: 768px) {
  section { padding: 56px var(--gutter-md); }
  .hero { padding: 100px var(--gutter-md) 60px; }
  .cap-grid { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 36px; }
  .hero-stats { flex-direction: column; gap: 24px; }
  .leader-companies { flex-direction: column; gap: 12px; align-items: flex-start; }
  .leader-info { padding: 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
  .about-highlight { padding: 32px; }
  .contact-details { padding: 32px; }
  .adv-item { padding: 32px; }
  .btn { width: 100%; text-align: center; padding: 18px 32px; }
  .hero-actions { flex-direction: column; }
  .hero-progress { bottom: 20px; right: var(--gutter-md); }
  .hero-progress button { width: 24px; }
}

/* 14. PROJECTS =========================================================== */
.project-grid {
  display: grid;
  /* auto-fit so the row stays balanced whatever the number of projects */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2px;
  margin-top: 36px;
  background: rgba(201,168,76,0.1);
}

.project-card {
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: background 0.4s ease;
  position: relative;
}

.project-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.project-card:hover::after { transform: scaleX(1); }
.project-card:hover { background: var(--dark-gray); }

.project-media {
  height: 190px;
  overflow: hidden;
  background: var(--dark-gray);
  position: relative;
}

.project-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}

.project-card:hover .project-media img { transform: scale(1.04); }

.project-body { padding: 32px 32px 36px; flex: 1; display: flex; flex-direction: column; }

.project-body h3 {
  font-family: 'Source Serif 4', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 6px;
}

.project-meta {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 20px;
}

.project-body p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--mid-gray);
  font-weight: 300;
  flex: 1;
}

.project-body .status { margin-top: 24px; align-self: flex-start; }

/* Status chip */
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid currentColor;
}

.status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-ready { color: var(--gold); }
.status-hold { color: var(--copper); }
.status-progress { color: var(--silver); }

/* 15. SPEC LIST ========================================================== */
.spec-list { list-style: none; margin-top: 8px; }

.spec-list li {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.spec-term {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.spec-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--light-gray);
  font-weight: 300;
}

/* 16. FACT GRID ========================================================== */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 36px;
  background: rgba(201,168,76,0.1);
}

.fact { background: var(--charcoal); padding: 32px 28px; }

.fact-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  color: var(--gold);
  line-height: 1;
  letter-spacing: 1px;
}

.fact-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin-top: 10px;
}

.fact-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--light-gray);
  font-weight: 300;
  margin-top: 12px;
}

/* 17. ROUTE CHAIN ======================================================== */
.route {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  margin-top: 36px;
  background: rgba(201,168,76,0.1);
  counter-reset: route;
}

.route-step {
  background: var(--charcoal);
  padding: 28px 22px 32px;
  counter-increment: route;
}

.route-step::before {
  content: '0' counter(route);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--gold);
  line-height: 1;
  display: block;
  margin-bottom: 16px;
}

.route-step h3 {
  font-family: 'Source Serif 4', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 8px;
}

.route-step p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--mid-gray);
  font-weight: 300;
}

/* 18. MODEL COLUMNS ====================================================== */
.model-note {
  margin-top: 36px;
  padding: 28px 32px;
  border-left: 3px solid var(--gold);
  background: rgba(201,168,76,0.04);
  font-size: 15px;
  line-height: 1.8;
  color: var(--light-gray);
  font-weight: 300;
}

.model-note strong { color: var(--cream); font-weight: 500; }

/* Comparison table */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 36px;
  font-size: 14px;
}

.compare th, .compare td {
  text-align: left;
  padding: 20px 24px 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}

.compare thead th {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  border-bottom-color: rgba(201,168,76,0.25);
}

.compare tbody th {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid-gray);
  font-weight: 500;
  width: 18%;
}

.compare td { color: var(--light-gray); font-weight: 300; line-height: 1.7; }

/* Disclosure strip */
.disclosure {
  background: var(--charcoal);
  border-top: 1px solid rgba(201,168,76,0.15);
  padding: 40px var(--gutter);
}

.disclosure p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--mid-gray);
  font-weight: 300;
  max-width: 1000px;
}

.disclosure p + p { margin-top: 12px; }

/* RESPONSIVE — new components ------------------------------------------- */
@media (max-width: 1024px) {
  .project-grid { grid-template-columns: 1fr 1fr; }
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .route { grid-template-columns: repeat(3, 1fr); }
  .compare tbody th { width: 26%; }
}

@media (max-width: 768px) {
  .project-grid { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }
  .route { grid-template-columns: 1fr; }

  .compare, .compare tbody, .compare tr, .compare td, .compare th { display: block; }
  .compare thead { display: none; }
  .compare tr { padding: 16px 0; border-bottom: 1px solid rgba(201,168,76,0.15); }
  .compare tr:last-child { border-bottom: 0; }
  .compare tbody th { width: auto; padding: 0 0 8px; border: 0; color: var(--gold); }
  .compare td { padding: 0 0 10px; border: 0; }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mid-gray);
    margin-bottom: 4px;
  }
}

/* 19. VIDEO FEATURE ====================================================== */
.video-feature {
  position: relative;
  margin-top: 36px;
  background: var(--black);
  border: 1px solid rgba(201,168,76,0.15);
  overflow: hidden;
}

.video-frame {
  position: relative;
  line-height: 0;   /* no descender gap under the video */
}

.video-feature video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--black);
}

.video-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 24px;
  border-top: 1px solid rgba(201,168,76,0.12);
  background: var(--charcoal);
  flex-wrap: wrap;
}

.video-caption p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--mid-gray);
  font-weight: 300;
  margin: 0;
}

.video-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}

/* Shown only if the browser cannot play the file */
.video-fallback {
  padding: 48px 32px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--light-gray);
  font-weight: 300;
}

.video-fallback a { color: var(--gold); }

@media (max-width: 1024px) {
  /* Seven nav items need tighter spacing before the mobile menu kicks in */
  .nav-links { gap: 24px; }
}

@media (max-width: 768px) {
  .video-caption { flex-direction: column; gap: 8px; padding: 16px 18px; }
}

/* 20. VIDEO PLAY OVERLAY ================================================= */
/* Injected by js/main.js, never in the markup — without JS the native
   controls stay in place, so the video is always playable. */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.5);
  background: rgba(10,10,10,0.42);
  backdrop-filter: blur(3px);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.35s ease, border-color 0.35s ease,
              transform 0.35s ease, opacity 0.35s ease;
}

.video-play svg {
  width: 30px;
  height: 30px;
  /* Nudge right: a triangle's optical centre sits left of its bounding box */
  margin-left: 5px;
  fill: currentColor;
}

.video-play:hover,
.video-play:focus-visible {
  background: rgba(201,168,76,0.9);
  border-color: var(--gold);
  color: var(--black);
  transform: translate(-50%, -50%) scale(1.06);
}

/* A second ring that eases outward on hover */
.video-play::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.22);
  transition: inset 0.4s ease, opacity 0.4s ease;
}

.video-play:hover::after { inset: -20px; opacity: 0.5; }

.video-play[hidden] { display: none; }

/* Darken the poster slightly so the button reads against a bright frame */
.video-feature.is-idle .video-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(10,10,10,0.18);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

@media (max-width: 768px) {
  .video-play { width: 68px; height: 68px; }
  .video-play svg { width: 22px; height: 22px; }
}

/* 21. BACK TO TOP ======================================================== */
/* Injected by js/main.js so it appears on every page without editing each
   one. It is a convenience, so building it in script rather than markup
   keeps it out of the way when scripting is unavailable. */
.to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;            /* under the nav (100), over page content */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(201,168,76,0.35);
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(8px);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Hidden until the visitor has scrolled far enough to want it */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease,
              visibility 0.35s ease, background 0.3s ease,
              border-color 0.3s ease, color 0.3s ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.to-top:hover,
.to-top:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
}

@media (max-width: 768px) {
  .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity 0.001ms, visibility 0.001ms; transform: none; }
  .to-top.is-visible { transform: none; }
}

/* 22. SLIDE-OUT CONTACT ================================================== */
/* Tab and panel are both injected by js/main.js, and only on pages that do
   not already carry a contact form — so the Contact page is skipped without
   needing a list of pages to maintain. */

.contact-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;               /* below the panel, above page content */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 26px 13px;
  border: 0;
  background: var(--gold);
  color: var(--black);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, padding 0.3s ease;
}

.contact-tab:hover,
.contact-tab:focus-visible {
  background: var(--gold-light);
  padding-right: 18px;
}

.contact-tab[hidden] { display: none; }

/* Backdrop ---------------------------------------------------------------*/
.contact-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(10,10,10,0.65);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.contact-backdrop.is-open { opacity: 1; visibility: visible; }

/* Panel ------------------------------------------------------------------*/
.contact-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;              /* above the nav, which is 100 */
  width: min(430px, 92vw);
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--charcoal);
  border-left: 1px solid rgba(201,168,76,0.25);
  padding: 40px 36px 48px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-panel.is-open { transform: translateX(0); }

.contact-panel .section-tag { margin-bottom: 12px; }

.contact-panel h2 {
  font-family: 'Source Serif 4', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 10px;
}

.contact-panel > p.panel-intro {
  font-size: 14px;
  line-height: 1.7;
  color: var(--mid-gray);
  font-weight: 300;
  margin-bottom: 26px;
}

.contact-panel .contact-form { gap: 18px; }
.contact-panel .field input,
.contact-panel .field select,
.contact-panel .field textarea { padding: 13px 15px; font-size: 14px; }
.contact-panel .field textarea { min-height: 110px; }
.contact-panel .btn { width: 100%; text-align: center; padding: 16px 24px; }

.panel-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: var(--light-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.panel-close:hover,
.panel-close:focus-visible { color: var(--gold); border-color: var(--gold); }

.panel-close svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; }

.panel-footnote {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mid-gray);
  font-weight: 300;
}

.panel-footnote a { color: var(--gold); text-decoration: none; }

@media (max-width: 768px) {
  .contact-tab { padding: 20px 11px; font-size: 10px; letter-spacing: 2.5px; }
  .contact-panel { padding: 36px 24px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-panel { transition: none; }
  .contact-backdrop { transition: none; }
}

/* 23. LEGAL PROSE ======================================================== */
.legal {
  max-width: 760px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--light-gray);
  font-weight: 300;
}

.legal h2 {
  font-family: 'Source Serif 4', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--cream);
  margin: 48px 0 14px;
  letter-spacing: -0.2px;
}

.legal h2:first-child { margin-top: 0; }

.legal h3 {
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 28px 0 10px;
}

.legal p + p { margin-top: 14px; }

.legal ul { margin: 14px 0 14px 20px; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--gold); }

.legal a { color: var(--gold); text-decoration: none; }
.legal a:hover { text-decoration: underline; }

.legal strong { color: var(--cream); font-weight: 500; }

.legal-updated {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mid-gray);
  padding-bottom: 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Anything still needing a real value before launch, made impossible to
   miss so it cannot ship by accident. */
.needs-input {
  background: rgba(184,115,51,0.16);
  border-bottom: 1px dashed var(--copper);
  color: var(--cream);
  padding: 1px 5px;
  font-style: normal;
}

.legal-note {
  margin-top: 48px;
  padding: 24px 28px;
  border-left: 3px solid var(--copper);
  background: rgba(184,115,51,0.07);
  font-size: 13px;
  line-height: 1.75;
  color: var(--light-gray);
}

.legal-note strong { color: var(--copper); font-weight: 500; }