/* ============================================================
   ENVISION GEO — Heritage Surveyor Design System v2
   Navy #0D2440 · Gold #C8B568 · Cream #F7F3EA
   Fonts: Revelstoke (brand, all-caps display)
          Oswald (companion w/ lowercase) · Inter (body)
   ============================================================ */

@font-face {
  font-family: 'Revelstoke';
  src: url('assets/revelstoke-regular.558cdb85.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Revelstoke';
  src: url('assets/revelstoke-bold.e912ec7b.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --navy: #0D2440;
  --navy-deep: #071527;
  --navy-soft: #16324F;
  --gold: #C8B568;
  --gold-bright: #DDCC88;
  --gold-tint: #EFE9D2;
  --cream: #F7F3EA;
  --paper: #FDFBF6;
  --ink: #1C2733;
  --ink-soft: #4A5866;
  --line: #E2DACA;
  --display: 'Revelstoke', 'Oswald', sans-serif;
  --head: 'Oswald', 'Arial Narrow', sans-serif;
  --sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --maxw: 1180px;
  --eyebrow: 0.82rem;   /* single size for the label line above a headline */
  --btn-radius: 999px;  /* pill buttons — drop to e.g. 6px for a softer square */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Typography ---------- */
h1 {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1.04;
  font-size: clamp(2.8rem, 6vw, 5rem);
}
h2 {
  font-family: var(--display);
  color: var(--navy);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
}
h3 {
  font-family: var(--head);
  color: var(--navy);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
}
h1 em, h2 em { font-style: normal; color: var(--gold); }

.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--head);
  font-size: var(--eyebrow); font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.kicker::before { content: ""; width: 42px; height: 1px; background: var(--gold); }
.on-light .kicker { color: #968336; }
.on-light .kicker::before { background: #968336; }

.lede { font-size: 1.16rem; color: var(--ink-soft); max-width: 62ch; }

/* ---------- Motion / reveals ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0; transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal { transform: translateY(36px); }
.reveal-left { transform: translateX(-44px); }
.reveal-right { transform: translateX(44px); }
.reveal-scale { transform: scale(.94); }
.in-view { opacity: 1; transform: none; }
.d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; }
.d3 { transition-delay: .36s; } .d4 { transition-delay: .48s; }

@keyframes heroRise { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Used only by .hero-symbol, which is centred with translateY(-50%) — the keyframes
   must carry that offset or the animation cancels the centring and the mark hangs low. */
@keyframes floatY { 0%,100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 10px)); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; }
  .hero-anim > * { animation: none !important; opacity: 1 !important; }
  .marquee-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Contour motif ----------
   Topographic contour lines traced from a doubly-periodic elevation field,
   so the tile joins seamlessly on every edge. See assets/contours.e9df20c5.svg */
.contour-bg { position: relative; overflow: hidden; }
.contour-bg::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/contours.e9df20c5.svg");
  background-size: 900px 700px;
  opacity: 0.5;
  pointer-events: none;
}
.contour-bg > * { position: relative; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent;
  border-bottom: 1px solid rgba(200, 181, 104, 0);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.site-header.scrolled {
  background: rgba(7, 21, 39, 0.96);
  border-bottom-color: rgba(200, 181, 104, 0.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}
/* Mobile menu open over a transparent header still needs a solid backdrop */
.site-header:has(.nav-links.open) {
  background: rgba(7, 21, 39, 0.98);
  backdrop-filter: blur(8px);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand img { height: 42px; width: auto; transition: transform .25s; }
.brand:hover img { transform: scale(1.04); }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-family: var(--head);
  color: #E8EDF4; font-size: 0.9rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 0; position: relative;
  transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .28s;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-bright); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-cta {
  background: var(--gold); color: var(--navy-deep) !important;
  padding: 11px 22px !important; font-weight: 500;
  border-radius: var(--btn-radius); transition: background .2s, transform .2s !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--gold-bright); transform: translateY(-2px); }

.nav-toggle { display: none; background: none; border: 1px solid var(--gold); color: var(--gold); font-size: 1.3rem; padding: 4px 12px; border-radius: var(--btn-radius); cursor: pointer; }
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 78px; left: 0; right: 0;
    background: var(--navy-deep); flex-direction: column; gap: 0;
    padding: 12px 0; border-bottom: 2px solid var(--gold);
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 14px 0; }
  .nav-cta { margin: 10px 24px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-soft) 100%);
  color: #fff;
  padding: 198px 0 140px; /* 78px header + 120px */
  overflow: hidden;
}
.hero-photo {
  position: absolute; inset: -60px 0;
  background-size: cover; background-position: center;
  opacity: 0.35;
  will-change: transform;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,21,39,.95) 25%, rgba(7,21,39,.55) 60%, rgba(7,21,39,.75) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; margin-bottom: 24px; }
.hero h1 em { color: var(--gold-bright); }
.hero .lede { color: #D3DDE9; margin-bottom: 40px; }
.hero-anim > * { animation: heroRise .9s cubic-bezier(.2,.7,.3,1) both; }
.hero-anim > *:nth-child(1) { animation-delay: .05s; }
.hero-anim > *:nth-child(2) { animation-delay: .18s; }
.hero-anim > *:nth-child(3) { animation-delay: .32s; }
.hero-anim > *:nth-child(4) { animation-delay: .46s; }
.hero-anim > *:nth-child(5) { animation-delay: .6s; }
.hero-est {
  font-family: var(--head);
  font-size: var(--eyebrow); font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); margin-top: 48px;
  display: flex; align-items: center; gap: 16px;
}
.hero-est::before, .hero-est::after { content: ""; height: 1px; width: 60px; background: rgba(200, 181, 104,.5); }
/* Sub-page heroes are locked to one height so the banner is identical on every
   page regardless of how long the headline or lede runs. Content is centred in
   the band. min-height (not height) so nothing clips if copy grows. */
.hero.hero-sub {
  padding: 140px 0 100px; /* 78px header + clearance */
  min-height: 660px;
  display: flex;
  align-items: center;
}
.hero.hero-sub > .wrap { width: 100%; }
@media (max-width: 860px) {
  .hero.hero-sub { min-height: 520px; padding: 130px 0 80px; }
}
/* Watermark sits right of the copy, below the headline. Anchored at 58% with a
   max-height that guarantees it stays fully inside the hero on short sub-pages:
   bottom edge = 58% + h/2 must clear the section, so h <= 84% - 48px. */
.hero-symbol {
  position: absolute; right: 2%; top: 58%; transform: translateY(-50%);
  width: min(27vw, 330px);
  max-height: calc(84% - 48px);
  object-fit: contain;
  opacity: .18; z-index: 1;
  animation: floatY 7s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 1100px) { .hero-symbol { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 34px;
  font-family: var(--head); font-size: 0.92rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: var(--btn-radius); cursor: pointer; border: none;
  transition: transform .22s, box-shadow .22s, background .22s;
}
/* trailing arrow that nudges forward on hover */
.btn::after {
  content: "\2192"; font-size: 1.1em; line-height: 1;
  transition: transform .22s;
}
.btn:hover::after { transform: translateX(5px); }
.btn.no-arrow::after { display: none; }

.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.22); }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--navy-deep);
  box-shadow: 0 0 26px rgba(200, 181, 104,.30);
}
.btn-gold:hover {
  background: linear-gradient(180deg, #DDCC88 0%, var(--gold-bright) 100%);
  box-shadow: 0 0 34px rgba(227,198,133,.55), 0 12px 26px rgba(0,0,0,.22);
}
.btn-outline { border: 1.5px solid var(--gold); color: var(--gold); background: transparent; }
.btn-outline:hover {
  background: rgba(200, 181, 104,.14);
  box-shadow: 0 0 26px rgba(200, 181, 104,.28), 0 12px 26px rgba(0,0,0,.22);
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-head { max-width: 740px; margin-bottom: 54px; }
/* when a section is labelled by its kicker alone, drop the kicker's trailing gap */
.section-head > .kicker:last-child { margin-bottom: 0; }
.section-alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy .lede { color: #C6D2E0; }

/* ---------- Cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  padding: 34px 30px; border-radius: 2px;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(17,45,78,.14); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
/* ---------- Photo elements ---------- */
.img-frame {
  position: relative; border-radius: 2px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(17,45,78,.18);
}
.img-frame::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(200, 181, 104,.55); pointer-events: none;
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.img-frame:hover img { transform: scale(1.05); }
.photo-credit {
  font-size: .72rem; color: var(--ink-soft); opacity: .75; margin-top: 8px;
  letter-spacing: .04em;
}

/* Rolling marquee strip */
.marquee { overflow: hidden; position: relative; padding: 10px 0; }
.marquee-track {
  display: flex; gap: 22px; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  width: 380px; height: 250px; flex: none;
  border-radius: 2px; overflow: hidden; position: relative;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.marquee-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.marquee-item:hover img { transform: scale(1.07); }
.marquee-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(7,21,39,.88));
  color: #fff; font-family: var(--head); font-size: .82rem;
  letter-spacing: .14em; text-transform: uppercase;
}
@media (max-width: 620px) { .marquee-item { width: 290px; height: 200px; } }

/* Lightbox pop-out */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,21,39,.92);
  display: none; align-items: center; justify-content: center;
  padding: 4vw; cursor: zoom-out;
}
.lightbox.open { display: flex; animation: heroRise .3s both; }
.lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox .lb-cap {
  position: absolute; bottom: 3vh; left: 0; right: 0; text-align: center;
  color: var(--gold-bright); font-family: var(--head); letter-spacing: .18em; text-transform: uppercase; font-size: .85rem;
}
.zoomable { cursor: zoom-in; }

/* ---------- Service ledger ---------- */
.ledger { list-style: none; border-top: 1px solid var(--line); }
.ledger li {
  display: flex; align-items: baseline; gap: 22px;
  padding: 20px 6px; border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  transition: background .25s, padding-left .25s;
}
.ledger li:hover { background: var(--gold-tint); padding-left: 16px; }
.ledger .idx { font-family: var(--display); color: var(--gold); min-width: 38px; font-size: 1rem; }
.ledger .l-bullet {
  flex: none; width: 9px; height: 9px; margin-left: 6px;
  background: var(--gold); transform: rotate(45deg);
  align-self: center;
}
.ledger .svc { font-family: var(--head); font-weight: 500; color: var(--navy); font-size: 1.1rem; }
.ledger .note { color: var(--ink-soft); font-size: 0.92rem; margin-left: auto; text-align: right; }
@media (max-width: 620px) { .ledger .note { display: none; } }

/* ---------- Project cards ---------- */
.project-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.project-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 52px rgba(17,45,78,.16); }
.project-media {
  height: 220px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-soft) 100%);
}
.project-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.project-card:hover .project-media img { transform: scale(1.08); }
.project-media .tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--head); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 2px;
}
.project-body { padding: 28px 26px 30px; flex: 1; display: flex; flex-direction: column; }
.project-body h3 { margin-bottom: 6px; font-size: 1.25rem; }
.project-loc {
  font-family: var(--head);
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #968336; margin-bottom: 14px; font-weight: 500;
}
.project-body p { color: var(--ink-soft); font-size: 0.96rem; flex: 1; }
.project-stats { display: flex; gap: 26px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.project-stats div { font-size: 0.8rem; color: var(--ink-soft); }
.project-stats strong { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--navy); letter-spacing: .03em; }

/* Filters */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 44px; }
.filter-btn {
  background: transparent; border: 1px solid var(--navy); color: var(--navy);
  font-family: var(--head);
  padding: 9px 20px; font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; border-radius: var(--btn-radius); cursor: pointer;
  transition: all .18s;
}
.filter-btn:hover { background: var(--gold-tint); transform: translateY(-2px); }
.filter-btn.active { background: var(--navy); color: var(--gold-bright); }
.project-card.hide { display: none; }

/* ---------- Stats band ---------- */
/* auto-fit so a band of 3 or 4 stats fills the row evenly */
.stats-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; text-align: center; }
@media (max-width: 700px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }
.stat strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  color: var(--gold-bright); line-height: 1;
}
.stat span { font-family: var(--head); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: #C6D2E0; }

/* ---------- Team ---------- */
.team-card { text-align: center; padding: 38px 24px; }
.team-card .monogram {
  width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--navy); color: var(--gold-bright);
  font-family: var(--display); font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gold);
  transition: transform .3s;
}
.team-card:hover .monogram { transform: scale(1.08) rotate(-3deg); }
.team-card h3 { font-size: 1.15rem; }
.team-card .role { font-family: var(--head); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: #968336; margin: 6px 0 14px; }
.team-card a { font-size: 0.85rem; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--gold); }
.team-card .card-links { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.team-card a.li-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold); color: var(--navy);
  transition: background .25s, color .25s, transform .25s;
}
.team-card a.li-link svg { width: 10px; height: 10px; display: block; }
.team-card a.li-link.mail-link svg { width: 12px; height: 12px; }
.team-card a.li-link:hover { background: var(--navy); color: var(--gold); transform: translateY(-2px); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; padding: 100px 0; }
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { color: #C6D2E0; margin-bottom: 36px; font-size: 1.1rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info h3 { margin-bottom: 8px; }
.contact-info .block { margin-bottom: 30px; }
.contact-info a { font-weight: 600; border-bottom: 1px solid var(--gold); }
.contact-form label {
  display: block; font-family: var(--head); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy);
  margin: 20px 0 8px;
}
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%; padding: 13px 15px; font-family: var(--sans); font-size: 1rem;
  border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 181, 104,.3);
}
.contact-form button { margin-top: 28px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep); color: #A9B8C9;
  padding: 70px 0 34px; font-size: 0.92rem;
  border-top: 3px solid var(--gold);
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 {
  font-family: var(--head); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px; font-weight: 500;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: #C6D2E0; transition: color .2s; }
.site-footer a:hover { color: var(--gold-bright); }
.footer-brand img { height: 30px; width: auto; margin-bottom: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(200, 181, 104,.25); padding-top: 26px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem; color: #7E90A5;
}

/* ---------- Misc ---------- */
.gold-rule { width: 64px; height: 3px; background: var(--gold); border: none; margin: 22px 0; transform-origin: left; }
.in-view .gold-rule, .gold-rule.in-view { animation: ruleGrow .8s cubic-bezier(.2,.7,.3,1) both; }
.checklist { list-style: none; }
.checklist li { padding: 10px 0 10px 34px; position: relative; border-bottom: 1px dashed var(--line); transition: padding-left .25s; }
.checklist li:hover { padding-left: 42px; }
.checklist li::before { content: "◆"; position: absolute; left: 6px; color: var(--gold); font-size: 0.7rem; top: 15px; }
.process-step { display: flex; gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.process-step .step-no { font-family: var(--display); font-weight: 700; font-size: 2.1rem; color: var(--gold); min-width: 56px; line-height: 1; }
.process-step .p-bullet {
  flex: none; width: 9px; height: 9px; margin: 8px 0 0 8px;
  background: var(--gold); transform: rotate(45deg);
}
.process-step h3 { margin-bottom: 6px; font-size: 1.15rem; }
.process-step p { color: var(--ink-soft); font-size: 0.98rem; }

/* Split feature (photo + text) */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split .img-frame { height: 440px; }
@media (max-width: 860px) { .split .img-frame { height: 320px; } }

/* ============================================================
   v3 ADDITIONS — new nav architecture & content modules
   ============================================================ */

/* ---------- Dropdown navigation ---------- */
.nav-links { gap: 24px; }
.has-drop { position: relative; }
.has-drop > a::before {
  content: "▾"; font-size: .85em; margin-left: 7px; opacity: .8;
  display: inline-block; transform: translateY(-1px);
}
.dropdown {
  position: absolute; top: calc(100% + 14px); left: -20px;
  min-width: 268px; list-style: none;
  background: var(--navy-deep);
  border: 1px solid rgba(200, 181, 104,.32);
  border-top: 3px solid var(--gold);
  border-radius: 2px;
  padding: 10px 0;
  box-shadow: 0 22px 46px rgba(0,0,0,.42);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 95;
}
.has-drop:hover > .dropdown,
.has-drop:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
.dropdown li { width: 100%; }
.dropdown a {
  display: block; padding: 11px 22px;
  font-size: .82rem; letter-spacing: .1em; color: #D3DDE9;
  border-left: 2px solid transparent; transition: all .18s;
}
.dropdown a::after { display: none; }
.dropdown a:hover, .dropdown a.active {
  background: rgba(200, 181, 104,.1); color: var(--gold-bright);
  border-left-color: var(--gold); padding-left: 26px;
}
.dropdown .drop-note {
  display: block; font-family: var(--sans); font-size: .7rem;
  letter-spacing: .02em; text-transform: none; color: #7E90A5; margin-top: 2px;
}
@media (max-width: 940px) {
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-top: 1px solid rgba(200, 181, 104,.2);
    background: rgba(0,0,0,.22); min-width: 0; padding: 6px 0; margin-top: 8px;
  }
  .dropdown a { text-align: center; padding: 11px 0; border-left: none; }
  .dropdown a:hover { padding-left: 0; border-left: none; }
  .dropdown .drop-note { display: none; }
  .has-drop > a::before { content: none; }
}

/* ---------- Trust / credibility bar ---------- */
.trust-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.trust-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  align-items: start; text-align: center;
}
@media (max-width: 1000px) { .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 18px; } }
@media (max-width: 560px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-item { padding: 0 6px; }
.trust-item .t-ico {
  height: 40px; margin: 0 auto 14px; display: flex;
  align-items: center; justify-content: center; color: #968336;
}
.trust-item .t-ico svg { height: 38px; width: auto; }
.trust-item .t-ico img { height: 36px; width: auto; }
.trust-item strong {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 1.9rem; color: var(--navy); line-height: 1; letter-spacing: .03em;
  margin-bottom: 6px;
}
.trust-item span {
  font-family: var(--head); font-size: .74rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
  display: block; line-height: 1.5;
}

/* ---------- Hero badge row ---------- */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(200, 181, 104,.3);
}
.hero-badges div {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--head); font-size: .78rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: #D3DDE9;
}
.hero-badges img { height: 20px; width: auto; opacity: .95; }
.hero-badges svg { height: 19px; width: auto; color: var(--gold); }

/* ---------- Pillar cards (Why Industry Leaders Choose Us) ---------- */
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 940px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar {
  padding: 4px 30px; border-left: 1px solid rgba(200, 181, 104,.28);
}
.pillar:first-child { border-left: none; padding-left: 0; }
/* Two columns (561-940px): the whole FIRST ROW needs the top border removed, not just
   the first cell — otherwise the top-right pillar sits ~22px lower than the top-left. */
@media (max-width: 940px) {
  .pillar { border-left: none; padding: 26px 0; border-top: 1px solid rgba(200, 181, 104,.22); }
  .pillar:nth-child(-n+2) { border-top: none; padding-top: 4px; }
}
/* Single column: only the very first pillar is in the first row. */
@media (max-width: 560px) {
  .pillar:nth-child(2) { border-top: 1px solid rgba(200, 181, 104,.22); padding-top: 26px; }
}
.pillar .p-ico { color: var(--gold); margin-bottom: 18px; }
.pillar .p-ico svg { height: 34px; width: auto; }
.pillar h3 {
  font-family: var(--head); color: #fff; font-size: 1.08rem;
  letter-spacing: .04em; margin-bottom: 12px;
}
.pillar p { color: #B6C4D4; font-size: .95rem; }

/* ---------- Service cards (icon + list + link) ---------- */
.svc-card {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: 2px;
  padding: 34px 30px 30px; display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.svc-card:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(17,45,78,.14); }
.svc-card .s-ico { color: #968336; margin-bottom: 18px; }
.svc-card .s-ico svg { height: 36px; width: auto; }
.svc-card h3 { margin-bottom: 12px; }
.svc-card > p { color: var(--ink-soft); font-size: .97rem; }
.svc-card ul {
  list-style: none; margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line); flex: 1;
}
.svc-card ul li {
  position: relative; padding: 5px 0 5px 18px;
  font-size: .92rem; color: var(--ink-soft);
}
.svc-card ul li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg);
}
.svc-card .s-link {
  margin-top: 22px; font-family: var(--head); font-size: .82rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
  align-self: flex-start; border-bottom: 1px solid var(--gold);
  padding-bottom: 3px; transition: gap .2s, color .2s;
}
.svc-card .s-link:hover { color: #968336; }

/* ---------- Detail blocks (long-form service copy) ---------- */
.detail-list { border-top: 1px solid var(--line); }
.detail {
  display: grid; grid-template-columns: 62px 1fr; gap: 0 26px;
  padding: 34px 0; border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.detail:hover { background: rgba(200, 181, 104,.07); }
@media (max-width: 620px) { .detail { grid-template-columns: 1fr; gap: 10px; } }
.detail .d-no {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  color: var(--gold); line-height: 1.2; letter-spacing: .04em;
}
/* Gold diamond bullet — add .bulleted to .detail-list and swap .d-no for .d-bullet */
.detail-list.bulleted .detail { grid-template-columns: 24px 1fr; gap: 0 20px; }
@media (max-width: 620px) { .detail-list.bulleted .detail { grid-template-columns: 1fr; gap: 10px; } }
.detail .d-bullet {
  display: block; width: 9px; height: 9px;
  background: var(--gold); transform: rotate(45deg);
  margin: 9px 0 0 2px;
}
@media (max-width: 620px) { .detail .d-bullet { margin-top: 4px; } }
.detail h3 { margin-bottom: 10px; font-size: 1.22rem; }
.detail p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 12px; }
.detail p:last-child { margin-bottom: 0; }

/* Detail list on a navy section */
.section-navy .detail-list { border-top-color: rgba(200, 181, 104,.28); }
.section-navy .detail { border-bottom-color: rgba(200, 181, 104,.28); }
.section-navy .detail:hover { background: rgba(200, 181, 104,.10); }
.section-navy .detail h3 { color: #fff; }
.section-navy .detail p { color: #C6D2E0; }
.section-navy .detail a { color: var(--gold-bright); }

/* Checklist on a navy section */
.section-navy .checklist li { color: #C6D2E0; border-bottom-color: rgba(200, 181, 104,.28); }
.section-navy .checklist li strong { color: #fff; }

/* ---------- Industry tiles ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ind-grid { grid-template-columns: 1fr; } }
.ind-tile {
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 28px 26px; position: relative; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.ind-tile::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gold); transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.ind-tile:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(17,45,78,.13); }
.ind-tile:hover::after { transform: scaleY(1); }
.ind-tile .i-ico { color: #968336; margin-bottom: 16px; }
.ind-tile .i-ico svg { height: 32px; width: auto; }
.ind-tile h3 { font-size: 1.12rem; margin-bottom: 10px; }
.ind-tile p { color: var(--ink-soft); font-size: .94rem; }

/* ---------- Technology grid ---------- */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .tech-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tech-grid { grid-template-columns: 1fr; } }
.tech-item {
  border: 1px solid rgba(200, 181, 104,.3); border-radius: 2px;
  background: rgba(255,255,255,.035); padding: 30px 26px;
  transition: background .28s, transform .28s, border-color .28s;
}
.tech-item:hover {
  background: rgba(200, 181, 104,.09); transform: translateY(-6px);
  border-color: rgba(200, 181, 104,.6);
}
.tech-item .tk-ico { color: var(--gold); margin-bottom: 18px; }
.tech-item .tk-ico svg { height: 36px; width: auto; }
.tech-item h3 { font-family: var(--head); color: #fff; font-size: 1.08rem; margin-bottom: 10px; letter-spacing: .04em; }
.tech-item p { color: #B6C4D4; font-size: .93rem; }
/* PLACEHOLDER: swap .tech-photo background-image for real equipment photography */
.tech-photo {
  height: 150px; margin: -30px -26px 22px; border-radius: 2px 2px 0 0;
  background: var(--cream);
  background-size: cover; background-position: center;
  border-bottom: 1px solid var(--line);
}

/* Equipment cards on the Technology page are white panels on a light section.
   Scoped to .tech-grid so the navy "Also Supporting" tiles elsewhere are unaffected. */
.tech-grid .tech-item {
  background: #fff;
  border-color: var(--line);
}
.tech-grid .tech-item:hover {
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(28,39,51,.12);
}
.tech-grid .tech-item h3 { color: var(--navy); }
.tech-grid .tech-item p { color: var(--ink-soft); }
.tech-grid .tech-item .tk-ico { color: #968336; }

/* ---------- Footer value badges ---------- */
.footer-badges {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 0 0 44px; margin-bottom: 44px;
  border-bottom: 1px solid rgba(200, 181, 104,.25);
}
@media (max-width: 760px) { .footer-badges { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; } }
.footer-badges div {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--head); font-size: .82rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: #C6D2E0;
}
.footer-badges img { height: 30px; width: auto; flex: none; }
.footer-badges svg { height: 28px; width: auto; color: var(--gold); flex: none; }

/* ---------- Very narrow viewports ----------
   Grid tracks default to a minimum of min-content, so a wide uppercase label with
   letter-spacing (e.g. "CUTTING EDGE TECHNOLOGY") can push a track past the viewport
   and leave a strip of page background down the right edge. min-width:0 lets those
   tracks shrink and the text wrap; below 420px the multi-column bands go single file. */
.footer-badges div, .trust-item, .stat, .tech-item, .ind-tile, .svc-card, .card { min-width: 0; }
body { overflow-wrap: break-word; }

@media (max-width: 420px) {
  .footer-badges, .trust-grid, .stats-band,
  .grid-2, .grid-3, .grid-4, .ind-grid, .tech-grid, .pillar-grid {
    grid-template-columns: 1fr;
  }
  .wrap { padding: 0 18px; }
}

/* ---------- Breadcrumb ---------- */
.crumb {
  font-family: var(--head); font-size: var(--eyebrow); font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
.crumb a { color: rgba(200, 181, 104,.75); }
.crumb a:hover { color: var(--gold-bright); }
.crumb span { color: #8296AC; margin: 0 8px; }

/* ---------- Quote strip ---------- */
.quote-strip {
  background: var(--navy-deep); border-top: 3px solid var(--gold);
  padding: 48px 0;
}
.quote-strip .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.quote-strip h3 { color: #fff; font-size: 1.5rem; font-family: var(--display); letter-spacing: .04em; text-transform: uppercase; }
.quote-strip p { color: #A9B8C9; font-size: .98rem; margin-top: 6px; }

/* Links inside dark hero/navy body copy — the global `a { color: var(--navy) }`
   renders them invisible against the navy background. */
.hero .lede a,
.section-navy .lede a,
.quote-strip a:not(.btn) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero .lede a:hover,
.section-navy .lede a:hover,
.quote-strip a:not(.btn):hover { color: var(--gold-bright); }

.card p a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.card p a:hover { color: var(--gold-deep, #A98B3E); }

/* Intro copy above the quote form */
.form-intro {
  margin-top: 14px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.65;
}
.form-intro a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }