/* =====================================================================
   Dimension Consultants — Extended site CSS
   Hero, marquee ticker, services grid, timeline, team, partners, etc.
   ===================================================================== */

/* =====================================================================
   HERO — homepage  (Layout V1 · Left rail, video-friendly)
   Copy lives in a left rail (~45% on desktop) so the right side of the
   video stays clear. Big vertical breathing space between headline and
   the lede gives the headline room to land and lets the video breathe
   through the rail.
   ===================================================================== */
.hero {
  position: relative;
  background: var(--navy-dark);
  color: #fff;
  overflow: hidden;
  min-height: calc(100vh - 130px); /* leaves room for sticky nav (~70px) + ticker (~50px) so the slider sits in view on load */
  display: flex;
  align-items: center;
  padding: 96px 0 72px;            /* tightened so content fits the shorter hero */
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img,
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Lighter touch — the scrim handles text-legibility, so the video itself
     can render closer to its true colours. (Was: grayscale 0.2 + brightness 0.75) */
  filter: contrast(1.03) saturate(1.05) brightness(0.92);
}
/* Lighter, asymmetric scrim — darker on the left where the copy lives,
   fades to nearly-clear on the right so the video reads cleanly. */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
    rgba(0,20,38,0.72) 0%,
    rgba(0,51,89,0.45) 28%,
    rgba(0,51,89,0.15) 55%,
    rgba(0,51,89,0) 75%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
/* Constrain the copy to a left rail — keep right ~55% clear for the video */
.hero .hero-inner > .reveal {
  max-width: 560px;
}
.hero .eyebrow {
  color: var(--teal-light);
  font-size: 12px;
  margin-bottom: 22px;
}
.hero h1 {
  color: #fff;
  font-size: clamp(42px, 5.5vw, 68px);   /* down from 110px max — was overpowering the video */
  letter-spacing: 1.8px;
  line-height: 1.0;
  margin-bottom: 160px;                   /* ← doubled breathing room (was 80px) */
}
.hero h1 span { color: var(--teal-light); }
.hero .lede {
  color: rgba(255,255,255,0.88);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 520px;
  margin-bottom: 36px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.hero-meta::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--teal-light);
}

/* Tablet: collapse the rail constraint, ease the breathing room */
@media (max-width: 980px) {
  .hero .hero-inner > .reveal { max-width: 100%; }
  .hero h1 { margin-bottom: 112px; }    /* doubled */
  .hero-bg::after {
    background: linear-gradient(0deg,
      rgba(0,20,38,0.78) 0%,
      rgba(0,51,89,0.40) 50%,
      rgba(0,51,89,0.10) 100%);
  }
}
@media (max-width: 640px) {
  .hero h1 { margin-bottom: 72px; }     /* doubled */
}

/* =====================================================================
   MARQUEE TICKER
   ===================================================================== */
.ticker {
  background: var(--teal);
  color: #fff;
  overflow: hidden;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ticker-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
}
.ticker span {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 60px;
}
.ticker span::after {
  content: '◆';
  color: rgba(255,255,255,0.55);
  font-size: 11px;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =====================================================================
   ABOUT — split layout
   ===================================================================== */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.about-split .img-wrap {
  /* Landscape ratio matches the wide T&I photo so most of the scene is visible
     instead of being cropped to a portrait slice. */
  aspect-ratio: 5/4;
  border-radius: var(--radius-md);
}
.about-split .img-wrap img {
  object-position: center;
}
.about-split h2 {
  font-size: clamp(32px, 4.2vw, 56px);
  margin-bottom: 24px;
}
.about-split p {
  color: var(--fg2);
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.7;
}
.about-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.phone-strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--navy);
  letter-spacing: 1.2px;
}
.phone-strong span {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--fg3);
  font-weight: 600;
  margin-bottom: 2px;
}

/* =====================================================================
   FEATURE / WHY-US GRID
   ===================================================================== */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.feature {
  padding: 36px 32px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition: all 200ms ease-out;
  position: relative;
}
.feature:hover {
  background: var(--bg-subtle);
}
.feature:hover .feature-icon {
  background: var(--teal);
  color: #fff;
  transform: rotate(-6deg);
}
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--navy-pale);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  transition: all 250ms ease-out;
}
.feature h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--navy-dark);
}
.feature p {
  color: var(--fg2);
  font-size: 14px;
  line-height: 1.6;
}

/* =====================================================================
   PRODUCT CARDS — image with title overlay
   ===================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.product-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--navy-dark);
  cursor: pointer;
  transition: all 250ms ease-out;
}
.product-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease-out, filter 250ms ease-out;
  filter: brightness(0.78) saturate(1.05);
}
.product-card:hover img {
  transform: scale(1.06);
  filter: brightness(0.55);
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 35%, rgba(0,51,89,0.92) 100%);
}
.product-card-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 22px 24px;
  z-index: 2;
  color: #fff;
}
.product-card-body h4 {
  color: #fff;
  font-size: 17px;
  letter-spacing: 1.3px;
  margin-bottom: 8px;
}
.product-card-body p {
  color: rgba(255,255,255,0.78);
  font-size: 12.5px;
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 350ms ease-out;
}
.product-card:hover .product-card-body p {
  max-height: 180px;
  opacity: 1;
  margin-bottom: 12px;
}
.product-card-body .more {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal-light);
  margin-top: 6px;
}
.product-card-body .more::after { content: ' →'; }

/* =====================================================================
   TECH STRIP — vertical card scroll-row
   ===================================================================== */
.tech-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.tech-card {
  position: relative;
  aspect-ratio: 9/14;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}
.tech-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease-out;
}
.tech-card:hover img { transform: scale(1.07); }
.tech-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,51,89,0.15), rgba(0,51,89,0.92));
}
.tech-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 18px 16px;
  color: #fff;
}
.tech-body p {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 6px;
  line-height: 1.5;
}
.tech-body h4 {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.1px;
  line-height: 1.1;
}

/* =====================================================================
   TIMELINE — about-page company history
   ===================================================================== */
.timeline {
  position: relative;
  padding: 32px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--teal), var(--navy));
  transform: translateX(-50%);
}
.tl-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 64px;
  position: relative;
}
.tl-item:nth-child(even) .tl-text { order: 2; }
.tl-item:nth-child(even) .tl-img  { order: 1; }
.tl-marker {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--teal);
  color: var(--navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0,71,121,0.18);
}
.tl-period {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 8px;
}
.tl-text h3 {
  font-size: 28px;
  margin-bottom: 14px;
}
.tl-text ul {
  list-style: none;
  padding: 0;
}
.tl-text li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  color: var(--fg2);
  font-size: 14px;
  line-height: 1.6;
}
.tl-text li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 1px;
}
.tl-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.tl-img img {
  width: 100%; height: 100%; object-fit: cover;
}

/* =====================================================================
   JOURNEY TIMELINE — Dimension Our Journey (clean, no photos)
   Vertical rail with year nodes + milestone bullets. Revenue
   milestones get a teal-fill marker; the 2028 capstone is highlighted.
   ===================================================================== */
.journey-timeline {
  position: relative;
  list-style: none;
  margin: 56px auto 0 auto;
  padding: 4px 0 4px 0;
  padding-left: 0;
  max-width: 880px;
}
.journey-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg,
    var(--teal) 0%,
    var(--navy) 50%,
    rgba(0, 71, 121, 0.25) 100%);
  border-radius: 2px;
}
.jt-item {
  position: relative;
  padding: 0 0 32px 44px;
}
.jt-item:last-child:not(.jt-future) { padding-bottom: 0; }
.jt-future.jt-item:last-child { padding-bottom: 26px; }
.jt-marker {
  position: absolute;
  left: 0;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--navy);
  box-sizing: border-box;
  z-index: 1;
}
.jt-marker--revenue {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 5px rgba(0, 172, 184, 0.18);
}
.jt-year {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 1.5px;
  color: var(--navy);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.jt-revenue {
  display: inline-block;
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--teal);
  background: rgba(0, 172, 184, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}
.jt-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 12px 0;
  line-height: 1.3;
}
.jt-title span { color: var(--teal); }
.jt-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.jt-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg2);
}
.jt-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}

/* 2028 future-plan capstone — fills the rail and gets its own card */
.jt-future {
  margin-top: 16px;
  padding: 24px 28px 26px 64px;
  background: linear-gradient(135deg, var(--navy-pale) 0%, rgba(0, 172, 184, 0.10) 100%);
  border-left: 4px solid var(--teal);
  border-radius: 0 12px 12px 0;
}
.jt-future .jt-marker {
  left: -4px;
  top: 22px;
  width: 30px;
  height: 30px;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 6px rgba(0, 172, 184, 0.22);
}
.jt-future .jt-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2.4px;
  color: var(--teal);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}
.jt-future .jt-year   { font-size: 30px; color: var(--navy-dark); }
.jt-future .jt-title  { font-size: 22px; }

@media (max-width: 720px) {
  .journey-timeline { padding-left: 0; }
  .jt-item { padding-left: 36px; padding-bottom: 26px; }
  .jt-future { padding-left: 56px; padding-right: 20px; }
  .jt-year  { font-size: 20px; }
  .jt-future .jt-year { font-size: 24px; }
  .jt-title { font-size: 17px; }
  .jt-bullets li { font-size: 13.5px; }
}

/* =====================================================================
   TEAM CARDS
   ===================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.team-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--teal);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 200ms ease-out;
}
.team-card:hover {
  border-color: var(--teal);
  border-top-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.team-photo {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--navy-pale);
}
.team-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease-out;
}
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-body {
  padding: 30px 26px 30px;
}
.team-body h4 {
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--navy-dark);
}
.team-role {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.team-bio {
  font-size: 13px;
  color: var(--fg2);
  line-height: 1.65;
}

/* Extended-team variant — circle "+" icon, eyebrow + big-number title */
.team-card--extended .team-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy-dark);
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.team-card--extended .team-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2.4px;
  color: var(--teal);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.team-card--extended .team-bignum {
  font-size: 22px;
  margin-bottom: 6px;
}
.team-card--extended .team-role {
  color: var(--fg3);
  font-weight: 600;
  letter-spacing: 1.2px;
}

/* =====================================================================
   PARTNER LOGO STRIP
   ===================================================================== */
.partner-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  overflow: hidden;       /* defensive — kills any 1px subpixel rounding overflow on iOS Safari */
}
.partner-strip .partner {
  aspect-ratio: 16/9;
  min-width: 0;           /* prevents grid blow-out on iOS when child img has a large intrinsic width */
  box-sizing: border-box;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: var(--bg);
  transition: background 200ms ease-out;
}
.partner-strip .partner:hover {
  background: var(--bg-subtle);
}
.partner-strip .partner img {
  max-width: 80%;
  max-height: 65%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter 200ms ease-out, transform 200ms ease-out;
}
.partner-strip .partner:hover img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.04);
}
/* Text-based logo (when no logo image is on disk) — keeps the same grayscale-fade rhythm */
.partner-strip .partner .partner-text {
  font-family: var(--font-display, 'Bebas Neue'), sans-serif;
  font-size: 17px;
  letter-spacing: 1.4px;
  color: var(--navy-dark);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  opacity: 0.55;
  transition: opacity 200ms ease-out, color 200ms ease-out, transform 200ms ease-out;
}
.partner-strip .partner:hover .partner-text {
  opacity: 1;
  color: var(--navy);
  transform: scale(1.04);
}

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.testimonial {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  padding: 28px 32px;
  border-radius: var(--radius-md);
}
.testimonial .quote {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg1);
  font-weight: 400;
  margin-bottom: 22px;
  font-style: italic;
}
.testimonial .quote::before {
  content: '"';
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0;
  color: var(--teal);
  vertical-align: -16px;
  margin-right: 6px;
}
.testimonial .who {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1.2px;
  color: var(--navy-dark);
  margin-bottom: 4px;
}
.testimonial .role {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 600;
}

/* =====================================================================
   CTA STRIP — full-width navy band
   ===================================================================== */
.cta-band {
  background: var(--navy-dark);
  color: #fff;
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/ocean-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
  filter: grayscale(0.5);
}
.cta-band .container {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: center;
}
.cta-band h2 {
  color: #fff;
  font-size: clamp(28px, 3.8vw, 44px);
  margin-bottom: 8px;
}
.cta-band h2 span { color: var(--teal-light); }
.cta-band p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  max-width: 60ch;
}
.cta-band .right {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* =====================================================================
   SERVICES — list cards
   ===================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 200ms ease-out;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.service-card .img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.service-card .img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease-out;
}
.service-card:hover .img-wrap img { transform: scale(1.06); }
.service-card-body {
  padding: 24px 26px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card .num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--teal);
  margin-bottom: 12px;
}
.service-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.service-card p {
  color: var(--fg2);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 18px;
  flex: 1;
}
.service-card .more {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.service-card .more::after {
  content: '→';
  transition: transform 150ms ease-out;
}
.service-card:hover .more::after { transform: translateX(4px); }

/* =====================================================================
   EQUIPMENT GRID
   ===================================================================== */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.equip-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-pale);
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: transform 200ms ease-out;
  display: block;
  text-decoration: none;
  color: inherit;
}
.equip-card:hover { transform: translateY(-2px); }
.equip-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease-out;
}
.equip-card:hover img { transform: scale(1.06); }
.equip-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,51,89,0.92) 100%);
}
.equip-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 22px;
  color: #fff;
}
.equip-body h4 {
  color: #fff;
  font-size: 19px;
  margin-bottom: 6px;
  letter-spacing: 1.2px;
}
.equip-body .tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 700;
}

/* =====================================================================
   CASE STUDY CARDS
   ===================================================================== */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.case-card {
  background: var(--bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 200ms ease-out;
}
.case-card:hover {
  border-color: var(--navy);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.case-card .img-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.case-card .img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease-out;
}
.case-card:hover .img-wrap img { transform: scale(1.05); }
.case-card-body {
  padding: 32px 36px 36px;
}
.case-card .meta {
  font-size: 11px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
  margin-bottom: 10px;
}
.case-card h3 {
  font-size: 26px;
  margin-bottom: 14px;
}
.case-card p {
  color: var(--fg2);
  margin-bottom: 18px;
  line-height: 1.65;
}
.case-card .stats-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  margin-top: 18px;
}
.case-card .stats-mini .v {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--navy);
  letter-spacing: 1.2px;
  line-height: 1;
}
.case-card .stats-mini .l {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg3);
  margin-top: 4px;
  font-weight: 600;
}

/* =====================================================================
   CONTACT GRID
   ===================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.contact-info-card {
  background: var(--navy-dark);
  color: #fff;
  padding: 40px;
  border-radius: var(--radius-md);
  border-top: 4px solid var(--teal);
}
.contact-info-card h3 {
  color: #fff;
  font-size: 26px;
  margin-bottom: 24px;
}
.ci-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ci-item:last-child { border-bottom: 0; }
.ci-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 700;
  margin-bottom: 6px;
}
.ci-val {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  line-height: 1.5;
}
.ci-val a {
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  transition: border-color 150ms ease-out;
}
.ci-val a:hover { border-color: var(--teal-light); }

.contact-form {
  background: var(--bg);
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.contact-form h3 {
  font-size: 26px;
  margin-bottom: 24px;
}

/* =====================================================================
   MAP EMBED FALLBACK
   ===================================================================== */
.map-strip {
  height: 360px;
  background: var(--navy-pale);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.map-strip iframe {
  width: 100%; height: 100%; border: 0;
}

/* =====================================================================
   PILL TAG ROW
   ===================================================================== */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.pill {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--navy-pale);
  color: var(--navy);
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all 150ms ease-out;
}
.pill:hover {
  background: var(--teal);
  color: #fff;
}

/* =====================================================================
   KEY-SERVICES GRID — used on service detail pages
   ===================================================================== */
.ks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.ks-cell {
  padding: 28px 24px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition: all 200ms ease-out;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ks-cell:hover {
  background: var(--navy-pale);
}
.ks-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--teal);
  letter-spacing: 1.5px;
  line-height: 1;
  flex-shrink: 0;
}
.ks-text h4 {
  font-size: 14px;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.ks-text p {
  font-size: 13px;
  color: var(--fg2);
  line-height: 1.55;
}

/* =====================================================================
   MOBILE RESPONSIVE  
   ===================================================================== */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .tech-strip { grid-template-columns: repeat(4, 1fr); }
  .partner-strip { grid-template-columns: repeat(4, 1fr); }
  .ks-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .hero { min-height: 70vh; padding: 96px 0 72px; }
  .about-split, .contact-grid, .cta-band .container {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .feature-grid, .service-grid, .team-grid, .equip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-strip { grid-template-columns: repeat(3, 1fr); }
  .partner-strip { grid-template-columns: repeat(3, 1fr); }
  
  /* mobile timeline */
  .timeline::before { left: 28px; }
  .tl-item { grid-template-columns: 1fr; gap: 16px; padding-left: 70px; }
  .tl-item:nth-child(even) .tl-text,
  .tl-item:nth-child(even) .tl-img { order: initial; }
  .tl-marker { left: 28px; }
  
  /* mobile nav — kill parent's backdrop-filter so .nav-main can position
     fixed against the viewport (backdrop-filter creates a containing block) */
  .site-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav-main {
    position: fixed;
    top: 64px; right: 0; bottom: 0; left: 0;
    background: #fff;
    flex-direction: column;
    padding: 28px 24px 40px;
    gap: 0;
    align-items: stretch;
    transform: translateX(100%);
    transition: transform 250ms ease-out;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 2.5px solid var(--navy);
    box-shadow: -8px 0 24px rgba(0, 51, 89, 0.08);
  }
  .nav-main.open { transform: translateX(0); display: flex; }
  .nav-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 14px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 16px;
    line-height: 1.3;
    position: relative;
  }
  /* Suppress desktop active-underline on mobile (it sneaks through specificity) */
  .nav-link.active::after,
  .nav-link::after,
  .nav-link::before { display: none !important; content: none !important; }
  .nav-link.active {
    color: var(--teal);
    background: rgba(0, 172, 184, 0.05);
  }
  .nav-link:hover { background: var(--navy-pale); }
  /* Caret pinned to the right edge of the full-width row */
  .nav-item.has-submenu > .nav-link { padding-right: 40px; }
  .nav-caret {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
  }
  .nav-cta, .nav-actions { display: none; }
  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 70;
    cursor: pointer;
    background: transparent;
    border: 0;
  }
  /* Burger-to-X animation when menu is open */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav-toggle span {
    transition: transform 200ms ease-out, opacity 150ms ease-out;
  }
  .brand-tag { display: none; }

  /* Body scroll-lock while drawer is open */
  body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
  .feature-grid, .service-grid, .team-grid, .equip-grid,
  .product-grid, .tech-strip, .ks-grid {
    grid-template-columns: 1fr;
  }
  .partner-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .partner-strip .partner { padding: 14px; }
  .partner-strip .partner img { max-width: 78%; max-height: 60%; }
  .hero h1 { font-size: clamp(36px, 12vw, 56px); }
  .container, .container-narrow { padding: 0 18px; }
  section { padding: 56px 0; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .ticker span { font-size: 16px; }
  .case-card-body, .contact-info-card, .contact-form { padding: 28px 22px; }
  .feature { padding: 28px 22px; }
  .case-card .stats-mini { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .case-card .stats-mini .v { font-size: 20px; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .topbar-left { flex-wrap: wrap; gap: 8px; font-size: 11px; }
  .topbar-inner { padding: 10px 18px; flex-direction: column; gap: 6px; }
  .topbar-right { font-size: 11px; gap: 14px; }
  .site-header-inner { padding: 14px 18px; gap: 16px; }
  .brand-logo { height: 32px; }
}

/* Very narrow widths — iPhone SE / older Android */
@media (max-width: 380px) {
  .partner-strip { grid-template-columns: repeat(2, 1fr); }
  .partner-strip .partner { padding: 10px; }
  .partner-strip .partner img { max-width: 82%; max-height: 58%; }
  .container, .container-narrow { padding: 0 14px; }
}

/* =====================================================================
   RESPONSIVE STAT-STRIP HELPERS
   ===================================================================== */
.grid-3-mobile-stack {
  grid-template-columns: repeat(3, 1fr);
}
.grid-2-mobile-stack {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 980px) {
  .grid-3-mobile-stack { grid-template-columns: 1fr 1fr; }
  .grid-3-mobile-stack .stat:nth-child(2) { border-right: 0; }
  .grid-3-mobile-stack .stat:nth-child(3) {
    grid-column: span 2;
    border-top: 1px solid var(--border);
    border-right: 0;
  }
  .grid-2-mobile-stack { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid-3-mobile-stack,
  .grid-2-mobile-stack { grid-template-columns: 1fr; }
  .grid-3-mobile-stack .stat,
  .grid-2-mobile-stack .stat {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .grid-3-mobile-stack .stat:last-child,
  .grid-2-mobile-stack .stat:last-child { border-bottom: 0; }
  .grid-3-mobile-stack .stat:nth-child(3) {
    grid-column: span 1;
    border-top: 0;
  }
  .stat .num { font-size: 44px; }
}

/* =====================================================================
   ADDITIONAL MOBILE POLISH
   ===================================================================== */
@media (max-width: 640px) {
  /* Tighten hero on small phones */
  .hero { min-height: auto; padding: 80px 0 56px; }
  .hero-actions { gap: 8px; }
  .hero-meta { font-size: 11px; flex-wrap: wrap; }

  /* Section-head margin reduction */
  .section-head { margin-bottom: 32px; }

  /* Page head padding */
  .page-head { padding: 80px 0 48px; }

  /* Tile row on mobile — smaller numbers */
  .tile .num { font-size: 30px; }
  .tile { padding: 16px 12px; }

  /* Eyebrow rule visible */
  .eyebrow.with-rule::before { width: 16px; }

  /* Service card padding */
  .service-card-body { padding: 22px 22px 24px; }
  .service-card h3 { font-size: 19px; }

  /* Equipment cards */
  .equip-body { padding: 16px; }
  .equip-body h4 { font-size: 16px; }

  /* Footer contact link area */
  .ci-val a { font-size: 14px; }

  /* Page hero h1 */
  .page-head h1 { font-size: clamp(32px, 9vw, 50px); }

  /* About-cta-row stacking */
  .about-cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Product card mobile - taller with more content visible */
  .product-card { aspect-ratio: 4/3; }
  .product-card-body p {
    max-height: 80px;
    opacity: 1;
    font-size: 11.5px;
  }

  /* Footer brand in single column */
  .footer-grid > div:first-child { padding-bottom: 8px; }
}
/* =====================================================================
   PRINT
   ===================================================================== */
@media print {
  .topbar, .site-header, .ticker, .cta-band, .nav-toggle { display: none; }
  body { background: #fff; }
  section { padding: 24px 0; page-break-inside: avoid; }
}

/* =====================================================================
   EQUIPMENT-DETAIL SUBPAGE
   ===================================================================== */

/* Hero gallery: main photo + 3-thumb grid */
.eq-gallery {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 16px;
}
.eq-gallery .main-photo {
  aspect-ratio: 16/10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-pale);
}
.eq-gallery .main-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease-out;
}
.eq-gallery .main-photo:hover img { transform: scale(1.04); }
.eq-gallery .thumbs {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}
.eq-gallery .thumb {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-pale);
}
.eq-gallery .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease-out;
}
.eq-gallery .thumb:hover img { transform: scale(1.06); }

/* Overview split: description + at-a-glance stats card */
.eq-overview {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.eq-overview h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 18px;
}
.eq-overview .lead {
  font-size: 16px;
  color: var(--fg2);
  line-height: 1.75;
  margin-bottom: 16px;
}
.eq-overview .lead.first {
  font-size: 18px;
  color: var(--fg1);
}
.eq-glance {
  background: var(--navy-dark);
  color: #fff;
  padding: 32px 28px 24px;
  border-radius: var(--radius-md);
  border-top: 4px solid var(--teal);
  position: sticky;
  top: 92px;
}
.eq-glance h4 {
  color: #fff;
  font-size: 18px;
  letter-spacing: 1.4px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.eq-glance dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 18px;
}
.eq-glance dt {
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--teal-light);
  font-weight: 700;
  align-self: center;
}
.eq-glance dd {
  margin: 0;
  font-size: 13.5px;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
  line-height: 1.5;
}
.eq-glance .glance-cta {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.15);
}

/* Spec table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.spec-table caption {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1.4px;
  text-align: left;
  padding: 18px 22px;
  background: var(--navy-pale);
  color: var(--navy-dark);
  caption-side: top;
  border-bottom: 1px solid var(--border);
}
.spec-table th, .spec-table td {
  padding: 14px 22px;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
  border-bottom: 0;
}
.spec-table th {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 700;
  width: 40%;
  background: var(--bg-subtle);
}
.spec-table td {
  color: var(--fg1);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 13px;
}
.spec-table .group-head td {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: normal;
  padding: 10px 22px;
}

/* Applications grid */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.app-cell {
  padding: 24px 22px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  transition: all 200ms ease-out;
}
.app-cell:hover {
  background: var(--navy-pale);
  transform: translateY(-2px);
}
.app-cell .ico {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal);
  color: #fff;
  border-radius: 6px;
  font-size: 18px;
  font-family: var(--font-display);
  margin-bottom: 14px;
}
.app-cell h4 {
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.app-cell p {
  font-size: 13px;
  color: var(--fg2);
  line-height: 1.55;
}

/* Feature list */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}
.feature-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--fg2);
  line-height: 1.6;
}
.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  width: 16px; height: 16px;
  border-radius: 3px;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* Related equipment (small cards at bottom) */
.related-eq {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.related-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--navy-pale);
  aspect-ratio: 4/3;
  cursor: pointer;
  transition: transform 200ms ease-out;
  text-decoration: none;
}
.related-card:hover { transform: translateY(-2px); }
.related-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms ease-out;
}
.related-card:hover img { transform: scale(1.06); }
.related-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,51,89,0.94));
}
.related-card .label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 14px 16px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1.2px;
}
.related-card .label::after { content: ' →'; color: var(--teal-light); }

@media (max-width: 1100px) {
  .app-grid { grid-template-columns: repeat(3, 1fr); }
  .related-eq { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .eq-gallery { grid-template-columns: 1fr; }
  .eq-gallery .thumbs { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .eq-overview { grid-template-columns: 1fr; gap: 32px; }
  .eq-glance { position: static; }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .related-eq { grid-template-columns: repeat(2, 1fr); }
  .feature-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .eq-gallery .thumbs { grid-template-columns: repeat(3, 1fr); }
  .eq-glance { padding: 24px 22px 22px; }
  .eq-glance dl { grid-template-columns: 1fr; gap: 10px; }
  .eq-glance dt { padding-bottom: 2px; }
  .app-grid { grid-template-columns: 1fr; }
  .related-eq { grid-template-columns: 1fr 1fr; }
  .spec-table th, .spec-table td { padding: 11px 16px; font-size: 12.5px; }
  .spec-table th { font-size: 11px; }
}

/* =====================================================================
   NAV SUBMENU (dropdown for Services, Case Studies, Equipment)
   ===================================================================== */
.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item.has-submenu > .nav-link { padding-right: 26px; }
.nav-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--teal);
  transition: transform 180ms ease-out;
  pointer-events: none;
}
.nav-item.has-submenu:hover > .nav-link .nav-caret,
.nav-item.has-submenu:focus-within > .nav-link .nav-caret {
  transform: translateY(-50%) rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 14px;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 2.5px solid var(--teal);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px -16px rgba(0,33,57,0.22), 0 4px 14px -8px rgba(0,33,57,0.18);
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
  z-index: 70;
}
.nav-submenu.cols-2 {
  grid-template-columns: 1fr 1fr;
  min-width: 520px;
  column-gap: 6px;
}
.nav-submenu::before {
  /* invisible bridge so cursor can travel from link → menu without losing hover */
  content: '';
  position: absolute;
  top: -16px;
  left: 0; right: 0;
  height: 16px;
}
.nav-item.has-submenu:hover > .nav-submenu,
.nav-item.has-submenu:focus-within > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s;
}

.nav-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--navy-dark);
  letter-spacing: 0.1px;
  padding: 10px 12px 10px 14px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  position: relative;
  line-height: 1.3;
  transition: background 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out, padding-left 140ms ease-out;
}
.nav-sub-link::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
  transition: opacity 140ms ease-out;
  flex-shrink: 0;
}
.nav-sub-link:hover,
.nav-sub-link:focus {
  background: var(--navy-pale);
  color: var(--navy);
  border-left-color: var(--teal);
}
.nav-sub-link:hover::before,
.nav-sub-link:focus::before { opacity: 1; }

/* Mobile submenu — stacked inline under parent in burger drawer */
@media (max-width: 980px) {
  .nav-item {
    display: block;
    width: 100%;
  }
  .nav-item.has-submenu > .nav-link { padding-right: 36px; }
  .nav-caret {
    right: 14px;
    font-size: 11px;
    color: var(--navy);
  }
  .nav-item.has-submenu.open > .nav-link .nav-caret {
    transform: translateY(-50%) rotate(180deg);
    color: var(--teal);
  }
  /* In the drawer, hover-open is unreliable on touch — only show when .open */
  .nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--teal);
    border-radius: 0;
    background: rgba(0,71,121,0.03);
    margin: 0 0 4px 0;
    padding: 4px 0 4px 12px;
    min-width: 0;
    display: none;
  }
  .nav-submenu.cols-2 {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .nav-item.has-submenu.open > .nav-submenu { display: grid; }
  /* Disable hover-open on touch — only the .open class drives it */
  .nav-item.has-submenu:hover > .nav-submenu,
  .nav-item.has-submenu:focus-within > .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-item.has-submenu:not(.open) > .nav-submenu { display: none; }
  .nav-sub-link {
    font-size: 14px;
    padding: 12px 12px 12px 14px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    border-left: none;
  }
  .nav-sub-link:last-child { border-bottom: none; }
  .nav-sub-link:hover,
  .nav-sub-link:focus {
    background: transparent;
    color: var(--teal);
    border-left: none;
  }
}

/* =====================================================================
   GLOBAL PRESENCE (contact page) — 7 location cards in a responsive grid
   with a subtle dotted-globe background pattern that evokes the world map
   without the weight of a full SVG continent layer.
   ===================================================================== */
.global-presence {
  padding: 88px 0;
  position: relative;
  overflow: hidden;
  background:
    /* Subtle teal dot grid evokes the dotted-world-map look from the brief */
    radial-gradient(circle, rgba(0,172,184,0.12) 1.4px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, #fff 0%, var(--navy-pale) 100%);
}
.global-presence .section-head .lede {
  max-width: 720px;
}
.global-presence .gp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.global-presence .gp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  padding: 22px 22px 20px;
  box-shadow: 0 6px 18px -10px rgba(0,33,57,0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.global-presence .gp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(0,33,57,0.24);
}
.global-presence .gp-card h4 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 4px;
  line-height: 1.05;
}
.global-presence .gp-role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}
.global-presence .gp-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg2);
  margin: 0;
}
.global-presence .gp-caption {
  text-align: center;
  margin: 36px auto 0;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg2);
  font-style: italic;
  padding: 18px 24px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: 6px;
}
.global-presence .gp-caption strong {
  color: var(--navy);
  font-weight: 700;
  font-style: normal;
}

@media (max-width: 1100px) {
  .global-presence .gp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .global-presence            { padding: 64px 0; }
  .global-presence .gp-grid   { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .global-presence .gp-card   { padding: 18px 18px 16px; }
  .global-presence .gp-card h4 { font-size: 19px; }
}
@media (max-width: 480px) {
  .global-presence .gp-grid   { grid-template-columns: 1fr; }
}

/* =====================================================================
   CORE PRINCIPLES — Mission / Vision / Values (home page)
   ===================================================================== */
.principles-section { padding: 96px 0; background: #fff; }
.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: stretch;
}
/* Image column stretches to match the text column height; image cropped to fill. */
.principles-image {
  display: flex;
  align-self: stretch;
}
.principles-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  display: block;
}
.principles-content .section-head { margin-bottom: 0; }
.principles-content > h2 {
  margin: 14px 0 32px;
  font-size: 36px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.principle-block {
  border-left: 3px solid var(--teal);
  padding: 6px 0 6px 22px;
  margin-bottom: 28px;
}
.principle-block h4 {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 10px;
}
.principle-block > p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg2);
  margin: 0;
}
.principle-block--values { padding-bottom: 4px; }
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
  margin-top: 14px;
}
.value-item h5 {
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 4px;
}
.value-item p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg2);
  margin: 0;
}

@media (max-width: 980px) {
  .principles-section  { padding: 64px 0; }
  .principles-grid     { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .principles-image    { max-width: 540px; align-self: start; }
  .principles-image img { height: auto; aspect-ratio: 16 / 11; }
  .values-grid         { gap: 18px 24px; }
}
@media (max-width: 540px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   DIMENSION ADVANTAGE — 6 numbered cards (home page)
   ===================================================================== */
.advantage-section { padding: 88px 0; background: var(--bg); }
.advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.adv-card {
  background: #fff;
  padding: 36px 38px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: 1px solid var(--border);
  outline-offset: -0.5px;
  transition: background 200ms ease-out;
}
.adv-card:hover { background: var(--navy-pale); }
.adv-card--accent { background: var(--navy-pale); }
.adv-card--accent:hover { background: rgba(0,71,121,0.10); }

.adv-num {
  position: absolute;
  top: 28px;
  right: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--teal);
  font-weight: 600;
}
.adv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--teal);
  margin-bottom: 12px;
}
.adv-card h4 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0;
  line-height: 1.2;
}
.adv-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg2);
  margin: 0;
}

@media (max-width: 980px) {
  .advantage-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-card       { padding: 28px 26px; }
}
@media (max-width: 600px) {
  .advantage-grid { grid-template-columns: 1fr; }
  .adv-num        { top: 22px; right: 22px; }
}

/* =====================================================================
   CAPABILITIES — 5 PILLARS (about + home)
   ===================================================================== */
.capabilities-section { padding: 88px 0; background: #fff; }
.capabilities-section .cap-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 12px 0 0;
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.cap-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 4px solid var(--navy);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.cap-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(0,33,57,0.22); }
.cap-img {
  height: 150px;
  overflow: hidden;
  background: var(--navy-pale);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cap-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-img.cap-img-icon { background: linear-gradient(135deg, var(--navy-pale), #fff); }
.cap-img.cap-img-icon span { font-size: 64px; line-height: 1; color: var(--teal); }
.cap-head {
  background: var(--navy-dark);
  color: #fff;
  padding: 14px 16px;
}
.cap-head h4 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.cap-list {
  list-style: none;
  margin: 0;
  padding: 16px 18px 20px;
  flex: 1;
}
.cap-list li {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg2);
  padding: 6px 0 6px 14px;
  position: relative;
  border-bottom: 1px dashed var(--border);
}
.cap-list li:last-child { border-bottom: 0; }
.cap-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--teal);
  font-weight: 700;
  font-size: 16px;
}

@media (max-width: 1100px) {
  .cap-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .capabilities-section { padding: 64px 0; }
  .cap-grid             { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   MARKET CAPABILITIES — Served Markets (home page)
   #01 highlighted as a teal-banner; #02–#05 in a 2×2 grid below
   ===================================================================== */
.markets-section { padding: 88px 0; }
.markets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}
.market-card {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--navy);
  border-radius: 6px;
  padding: 28px 30px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.market-num {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 1px;
  color: var(--teal);
  line-height: 0.9;
  flex-shrink: 0;
  min-width: 50px;
}
.market-body h3 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--navy-dark);
  margin: 0 0 6px;
  line-height: 1.15;
}
.market-body p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg2);
  margin: 0;
}
.market-card--featured {
  grid-column: span 2;
  background: var(--teal);
  border: 0;
  border-radius: 6px;
  padding: 36px 36px;
  align-items: center;
}
.market-card--featured .market-num {
  color: rgba(255,255,255,0.9);
  font-size: 60px;
}
.market-card--featured .market-body h3 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 8px;
}
.market-card--featured .market-body p { color: rgba(255,255,255,0.92); font-size: 14.5px; }

@media (max-width: 800px) {
  .markets-section          { padding: 64px 0; }
  .markets-grid             { grid-template-columns: 1fr; }
  .market-card--featured    { grid-column: auto; padding: 28px 24px; }
  .market-card              { padding: 22px 22px; gap: 18px; }
  .market-num               { font-size: 34px; min-width: 42px; }
  .market-card--featured .market-num { font-size: 48px; }
}

/* =====================================================================
   DIMENSION STRATEGY — Four Strategic Pillars (about page)
   Navy-dark band with 4 vertical cards, large teal Bebas word + subtitle
   ===================================================================== */
.strategy-section {
  padding: 96px 0;
  background: var(--navy-dark);
  color: rgba(255,255,255,0.92);
}
.strategy-section .strategy-head h2 { color: #fff; }
.strategy-section .eyebrow.with-rule.on-dark { color: var(--teal); }
.strategy-section .eyebrow.with-rule.on-dark::before { background: var(--teal); }
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.strategy-card {
  border: 1px solid rgba(0,172,184,0.35);
  border-radius: 4px;
  padding: 32px 26px 36px;
  background: rgba(0,53,90,0.4);
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.strategy-word {
  font-family: var(--font-display);
  font-size: 64px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 0.9;
  margin-bottom: 18px;
}
.strategy-card h5 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.strategy-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

@media (max-width: 1100px) {
  .strategy-grid     { grid-template-columns: repeat(2, 1fr); }
  .strategy-word     { font-size: 54px; }
  .strategy-card     { min-height: 240px; }
}
@media (max-width: 600px) {
  .strategy-section  { padding: 64px 0; }
  .strategy-grid     { grid-template-columns: 1fr; }
}

/* =====================================================================
   SMART NAV — hide on scroll-down, reveal on scroll-up / scroll-stop
   ===================================================================== */
.site-header {
  /* extend existing transition to include transform */
  transition: transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 200ms ease-out,
              background 200ms ease-out;
}
.site-header.nav-hidden {
  transform: translateY(-110%);
}

/* =====================================================================
   BACK TO TOP BUTTON
   ===================================================================== */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 46px;
  height: 46px;
  background: var(--navy);
  color: #fff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s, border-color 0.2s;
  z-index: 48;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,71,121,0.25);
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--teal);
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,172,184,0.35);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
@media (max-width: 980px) {
  .back-to-top { bottom: 20px; right: 20px; width: 40px; height: 40px; }
}


/* =====================================================================
   "IN THE NEWS" STRIP — for case study / equipment pages to link back
   to the Industry Firsts hero on news.html. Two variants:
     .news-strip                     → teal "Industry First" (country-firsts)
     .news-strip.news-strip--world   → gold "World First" (Dina Polaris)
   ===================================================================== */
.news-strip {
  background: linear-gradient(115deg, var(--navy-dark) 0%, var(--navy) 60%, #034e6e 100%);
  color: #fff;
  padding: 22px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(0, 178, 169, 0.32);
}
.news-strip::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(0, 178, 169, 0.10) 0%, rgba(0, 178, 169, 0) 60%);
  pointer-events: none;
}
.news-strip--world {
  border-bottom-color: rgba(245, 184, 54, 0.32);
}
.news-strip--world::before {
  background: radial-gradient(circle at 80% 50%, rgba(245, 184, 54, 0.10) 0%, rgba(245, 184, 54, 0) 60%);
}
.news-strip-inner {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  position: relative; z-index: 1;
}
.news-strip .first-badge,
.news-strip .world-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.news-strip .first-badge {
  background: var(--teal);
  color: #001f33;
}
.news-strip .first-badge::before { content: "★"; font-size: 11px; }
.news-strip .world-badge {
  background: linear-gradient(135deg, #f5b836 0%, #d99a1a 100%);
  color: #2b1a00;
}
.news-strip .world-badge::before { content: "🌐"; font-size: 12px; }
.news-strip .news-strip-text {
  flex: 1; min-width: 280px;
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  line-height: 1.5;
}
.news-strip .news-strip-text strong {
  color: var(--teal-light, #5fd8d2);
  font-weight: 700;
}
.news-strip--world .news-strip-text strong { color: #f5b836; }
.news-strip .news-strip-meta {
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.news-strip .news-strip-meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--teal-light, #5fd8d2);
}
.news-strip--world .news-strip-meta .dot { background: #f5b836; }
.news-strip .news-strip-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff;
  font-family: var(--font-mono, 'Space Mono'), monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: 1px solid rgba(0, 178, 169, 0.45);
  padding: 10px 16px;
  border-radius: 6px;
  transition: all 180ms ease-out;
  flex-shrink: 0;
}
.news-strip .news-strip-cta:hover {
  background: rgba(0, 178, 169, 0.10);
  border-color: var(--teal-light, #5fd8d2);
  color: var(--teal-light, #5fd8d2);
}
.news-strip--world .news-strip-cta { border-color: rgba(245, 184, 54, 0.45); }
.news-strip--world .news-strip-cta:hover {
  background: rgba(245, 184, 54, 0.10);
  border-color: #f5b836;
  color: #f5b836;
}
@media (max-width: 720px) {
  .news-strip-inner { gap: 16px; }
  .news-strip .news-strip-text { font-size: 14px; }
}