/* =====================================================================
   ERCS — Environmental Remediation Consulting Services
   style.css — premium engineering-consultancy design system
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Core surfaces */
  --paper:         #F6F4EC;   /* warm ivory */
  --paper-dim:      #EEEADC;  /* secondary ivory, slightly deeper */
  --paper-line:    rgba(18,32,40,0.12);
  --ink:            #14232B;  /* primary text on paper */
  --ink-soft:       #52616A;  /* secondary text on paper */
  --ink-faint:      #8B969C;

  --navy:           #0D2334;  /* dark section background */
  --navy-deep:      #081420;  /* deepest background / footer */
  --navy-raised:    #14314A;  /* raised panel on navy */
  --navy-line:      rgba(246,244,236,0.14);

  /* Accent system */
  --water:          #2B6C89;  /* primary accent — professional water blue */
  --water-deep:     #204F65;
  --water-light:    #83B4C9;
  --green:          #59754C;  /* muted environmental green */
  --soil:           #92602F;  /* subtle earth / soil brown */

  /* Text on navy */
  --white:          #F6F4EC;
  --white-dim:      rgba(246,244,236,0.68);
  --white-faint:    rgba(246,244,236,0.38);

  /* Type */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Layout */
  --edge: clamp(22px, 5.4vw, 88px);
  --max: 1400px;
  --radius: 2px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .28s;
  --dur-med: .45s;
  --dur-slow: .6s;
}

/* ---------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* hero slider: simple crossfade only — no Ken Burns, no parallax, no stagger */
  .hero-slide-image{ transition: opacity .3s linear !important; }
  .hero-slide-image img{ transform: none !important; transition: none !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
address{ font-style: normal; }
svg{ display: block; }

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

::selection{ background: var(--water); color: var(--white); }
:focus-visible{ outline: 2px solid var(--water); outline-offset: 3px; }
.main-nav a:focus-visible,
.mobile-nav a:focus-visible{ outline-offset: 4px; }

/* ---------------------------------------------------------------------
   3. UTILITIES
   --------------------------------------------------------------------- */

/* image-placeholder acts as the frame for the real photographs.
   When it contains a real <img>, this only supplies the fallback
   surface + crop box. When empty (consultant portraits), it renders
   a quiet, restrained placeholder — no diagonal pattern, no corner
   brackets, no heavy gradient. */
.image-placeholder{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: linear-gradient(155deg, #16344A 0%, #0D2334 60%, #1C3A2D 100%);
  overflow: hidden;
}
.image-placeholder img{ position: relative; z-index: 1; }
.image-placeholder .ph-label{
  position: absolute;
  z-index: 2;
  left: 22px; bottom: 22px;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--white-dim);
  border: 1px solid var(--navy-line);
  background: rgba(8,20,32,0.4);
}

/* strata mark — soil / water / leaf. The one recurring signature
   device, used sparingly and small. */
.strata-mark{
  display: inline-flex;
  flex-direction: column;
  width: 3px;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.strata-mark i{ display:block; width:100%; flex: 1; font-style: normal; }
.strata-mark i:nth-child(1){ background: var(--soil); }
.strata-mark i:nth-child(2){ background: var(--water); }
.strata-mark i:nth-child(3){ background: var(--green); }

/* buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.btn-arrow{ transition: transform var(--dur-fast) var(--ease-soft); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

.btn-solid{ background: var(--water); color: var(--white); border-color: var(--water); }
.btn-solid:hover{ background: var(--water-deep); border-color: var(--water-deep); }

.btn-outline{ background: transparent; color: var(--ink); border-color: var(--paper-line); }
.btn-outline:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn-ghost{ background: transparent; color: var(--white); border-color: rgba(246,244,236,0.32); }
.btn-ghost:hover{ background: rgba(246,244,236,0.08); border-color: rgba(246,244,236,0.6); }

.btn-large{ padding: 18px 32px; font-size: 15px; }

/* section label (eyebrow) — kept subtle, mono, low-key */
.section-label{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section-label--light{ color: var(--white-faint); }
.section-label-num{ color: var(--ink-soft); font-weight: 500; }
.section-label--light .section-label-num{ color: var(--white-dim); }

.section-head{
  max-width: 700px;
  margin: 0 auto 60px;
  padding: 0 var(--edge);
}
.section-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 17ch;
}
.section-heading--light{ color: var(--white); }
.section-sub{
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 58ch;
}
.approach .section-sub{ color: var(--white-dim); }

/* shared accent-word treatment — kept for the Approach section only;
   Consultants and Clients headings match the plain Projects heading style */
.heading-accent{
  position: relative;
  color: var(--water);
}
.heading-accent::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--water);
  opacity: .4;
}
.approach .heading-accent{ color: var(--water-light); }
.approach .heading-accent::after{ background: var(--water-light); }

.approach-head .section-heading{
  position: relative;
  padding-top: 20px;
}
.approach-head .section-heading::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--water-light);
}

.text-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  transition: gap var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}
.text-link:hover{ gap: 12px; opacity: .68; }
.text-link--light{ color: var(--white); border-color: var(--white); }

/* reveal-on-scroll base states — kept functional, motion reduced */
[data-reveal], .reveal-up, .reveal-fade{
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  transition-delay: calc(var(--stagger, 0) * 60ms);
}
.reveal-up, [data-reveal="up"]{ transform: translateY(18px); }
[data-reveal="left"]{ transform: translateX(-24px); }
[data-reveal="right"]{ transform: translateX(24px); }
.reveal-fade{ transform: none; }
[data-reveal="step"]{ transform: translateY(12px); }

.is-visible[data-reveal], .is-visible.reveal-up, .is-visible.reveal-fade{
  opacity: 1;
  transform: translate(0,0);
}

/* sections sit flush against one another — no artificial spacing between
   stacked page sections, and none before the footer either. */
section + section{ margin-top: 0; }

/* ---------------------------------------------------------------------
   4. HEADER
   --------------------------------------------------------------------- */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  transition: background var(--dur-med) var(--ease-soft), border-color var(--dur-med) var(--ease-soft), padding var(--dur-med) var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(8,20,32,0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--navy-line);
}
.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: padding var(--dur-med) var(--ease-soft);
}
.site-header.is-scrolled .header-inner{ padding-top: 16px; padding-bottom: 16px; }

.brand{ flex-shrink: 0; }
.brand-plate{ display: block; }
.brand-logo{ height: 48px; width: auto; display: block; transition: height var(--dur-med) var(--ease-soft); }
.site-header.is-scrolled .brand-logo{ height: 36px; }

.main-nav ul{ display: flex; align-items: center; gap: 40px; }
.nav-link{
  position: relative;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--white-dim);
  padding: 4px 0;
  transition: color var(--dur-fast) var(--ease-soft);
}
.nav-link::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--water-light);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.nav-link:hover{ color: var(--white); }
.nav-link:hover::after{ transform: scaleX(1); transform-origin: left; }

.header-actions{ display: flex; align-items: center; gap: 20px; }
.header-cta{ color: var(--white); border-color: rgba(246,244,236,0.3); padding: 12px 20px; }
.header-cta:hover{ background: var(--white); color: var(--navy); border-color: var(--white); }

.menu-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
}
.menu-toggle-line{ width: 22px; height: 1.5px; background: var(--white); }

/* mobile nav */
.mobile-nav{
  position: fixed;
  top: 0; right: 0;
  width: min(400px, 88vw);
  height: 100%;
  background: var(--navy-deep);
  z-index: 900;
  padding: 26px var(--edge) 40px;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease);
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav-top{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
.brand-plate--mobile .brand-logo{ height: 30px; }
.menu-close{ color: var(--white); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }

.mobile-nav-list{ display: flex; flex-direction: column; gap: 2px; margin-bottom: auto; }
.mobile-nav-list a{
  display: block;
  padding: 15px 2px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--white);
  border-bottom: 1px solid var(--navy-line);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.mobile-nav-list a:hover{ color: var(--water-light); }
.mobile-nav.is-open .mobile-nav-list a{ opacity: 1; transform: translateY(0); }
.mobile-nav-list li:nth-child(1) a{ transition-delay: .06s; }
.mobile-nav-list li:nth-child(2) a{ transition-delay: .11s; }
.mobile-nav-list li:nth-child(3) a{ transition-delay: .16s; }
.mobile-nav-list li:nth-child(4) a{ transition-delay: .21s; }
.mobile-nav-list li:nth-child(5) a{ transition-delay: .26s; }
.mobile-nav-list li:nth-child(6) a{ transition-delay: .31s; }

.mobile-nav-cta{ width: 100%; justify-content: center; margin-top: 32px; }
.mobile-nav-meta{
  display: flex; justify-content: space-between;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white-faint);
}

.mobile-nav-overlay{
  position: fixed; inset: 0;
  background: rgba(4,10,16,0.6);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-soft);
}
.mobile-nav-overlay.is-visible{ opacity: 1; pointer-events: auto; }
body.nav-open{ overflow: hidden; }

/* ---------------------------------------------------------------------
   5. HERO
   --------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: var(--white);
  padding-top: 120px;
}
.hero-media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-image{ position: absolute; inset: -10px; will-change: transform; transition: transform .15s linear; }
.hero-image .image-placeholder{ min-height: 100%; }

/* hero slide layers — two stacked, cross-faded via opacity */
.hero-slide-image{
  position: absolute; inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1);
}
.hero-slide-image.is-active{ opacity: 1; z-index: 2; }
.hero-slide-image img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.05) translate3d(var(--kb-start-x, 14px), 0, 0);
  transition: transform 6.4s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.hero-slide-image.kb-run img{ transform: scale(1) translate3d(0,0,0); }

.hero-gradient{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,14,20,0.28) 0%, rgba(6,14,20,0.22) 42%, rgba(6,14,20,0.88) 96%),
              linear-gradient(90deg, rgba(6,14,20,0.62) 0%, rgba(6,14,20,0.30) 42%, rgba(6,14,20,0.02) 68%);
}
/* grid overlay retained in markup but rendered near-invisible per brief:
   do not cover the photograph with an artificial grid */
.hero-grid-overlay{ display: none; }

.strata-mark--hero{
  position: absolute;
  top: 128px;
  right: var(--edge);
  height: 70px;
  width: 3px;
  z-index: 2;
  opacity: .8;
}

.hero-content{
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--edge);
}
.hero-eyebrow{
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(42px, 6.6vw, 84px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  display: flex;
  flex-direction: column;
}
.hero-title span{ display: block; }
.hero-title-accent{ color: var(--water-light); }
.hero-sub{
  margin: 30px 0 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--white-dim);
}
.hero-actions{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

.hero-tagline{
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 60px auto 0;
  width: 100%;
  padding: 24px var(--edge) 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  border-top: 1px solid var(--navy-line);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--white-faint);
}
.hero-tagline span::before{
  content: "◇";
  display: inline-block;
  margin-right: 8px;
  color: var(--water-light);
  font-size: 10px;
  vertical-align: middle;
}

.scroll-indicator{
  position: absolute;
  bottom: 26px; left: var(--edge);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-indicator-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white-faint);
  writing-mode: vertical-rl;
}
.scroll-indicator-line{
  width: 1px; height: 40px;
  background: var(--white-faint);
}

@media (min-width: 901px){ .scroll-indicator{ display: flex; } }

.hero-nav{
  position: absolute;
  right: var(--edge);
  bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-nav-btn{
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--navy-line);
  color: var(--white-dim);
  background: rgba(8,20,32,0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft);
}
.hero-nav-btn:hover{ color: var(--white); border-color: var(--water-light); background: rgba(8,20,32,0.5); }
.hero-nav-btn:focus-visible{ outline: 2px solid var(--water-light); outline-offset: 2px; color: var(--white); }
.hero-nav-divider{ width: 1px; height: 22px; background: var(--navy-line); }

@media (max-width: 680px){
  .hero-nav{ right: var(--edge); bottom: 20px; gap: 8px; }
  .hero-nav-btn{ width: 38px; height: 38px; }
}

/* ---------------------------------------------------------------------
   6. INTRO / ABOUT — full-viewport editorial "Who We Are" stage
   --------------------------------------------------------------------- */
.intro{
  margin-top: 130px;
  position: relative;
  height: 100vh;
  min-height: 720px;
  max-height: 1100px;
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
}
.intro-num{
  position: absolute;
  top: clamp(28px, 4vh, 48px);
  right: var(--edge);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.intro-inner{
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: clamp(40px, 5.6vw, 84px);
  align-items: center;
}

/* ---- text column ---- */
.intro-text{ padding-right: 8px; }
.intro-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 15ch;
  margin-bottom: clamp(16px, 2.2vh, 24px);
  color: var(--ink);
}
.intro-heading-row{ display: block; }
.intro-heading-accent{ color: var(--water); }

.intro-body{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.66; margin-bottom: 12px; max-width: 54ch; }
.intro-body:last-of-type{ margin-bottom: 0; }

.intro-details{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: clamp(16px, 2.2vh, 24px) 0 clamp(18px, 2.2vh, 24px);
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
}
.intro-detail{
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 20px;
  border-left: 1px solid var(--paper-line);
  transition: border-color var(--dur-med) var(--ease-soft);
}
.intro-detail:first-child{ padding-left: 0; border-left: none; }
.intro-detail:hover{ border-left-color: var(--water); }
.intro-detail-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--soil);
  transition: color var(--dur-fast) var(--ease-soft);
}
.intro-detail:hover .intro-detail-label{ color: var(--water); }
.intro-detail-value{
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.intro-detail:hover .intro-detail-value{ transform: translateX(3px); }

/* scope — interactive lifecycle stages */
.intro-scope{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.intro-scope-stage{
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 2px 1px;
  transition: color var(--dur-fast) var(--ease-soft);
}
.intro-scope-stage.is-active{ color: var(--water); }
.intro-scope-arrow{ color: var(--paper-line); font-size: 11px; }

/* link */
.intro-link{ position: relative; border-bottom-color: transparent; }
.intro-link::after{
  content: "";
  position: absolute;
  left: 0; bottom: 3px;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(.42);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-soft);
}
.intro-link:hover{ opacity: 1; gap: 8px; }
.intro-link:hover::after{ transform: scaleX(1); }
.intro-link span{ transition: transform var(--dur-fast) var(--ease-soft); }
.intro-link svg{ transition: transform var(--dur-fast) var(--ease-soft); }
.intro-link:hover svg{ transform: translateX(5px); }

/* ---- media column ---- */
.intro-media{ position: relative; }
.intro-media-inner{ position: relative; }
.intro-media-inner::before{
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(43,108,137,.32);
  transform: translate(-16px, 16px);
  z-index: 0;
  pointer-events: none;
}
.intro-media-inner::after{
  content: "";
  position: absolute;
  top: -9px; right: -9px;
  width: 22px; height: 22px;
  border-top: 1px solid var(--water);
  border-right: 1px solid var(--water);
  opacity: .55;
  z-index: 2;
  pointer-events: none;
}
.intro-image-stage{ position: relative; z-index: 1; overflow: hidden; aspect-ratio: 11 / 5; }
.intro-image-crop{
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: linear-gradient(155deg, #16344A 0%, #0D2334 60%, #1C3A2D 100%);
  opacity: .75;
  transform: scale(1.045);
  transition: opacity 1s var(--ease-soft), transform 1.15s var(--ease-soft);
}
.intro-media.is-visible .intro-image-crop{ opacity: 1; transform: scale(1); }
.intro-image{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% center;
  display: block;
  will-change: transform;
}

/* technical overlay — engineering documentation, not HUD */
.intro-overlay{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}
.intro-overlay-line{ stroke: rgba(246,244,236,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.intro-overlay-measure{ stroke: rgba(246,244,236,.4); stroke-width: 1; vector-effect: non-scaling-stroke; }
.intro-overlay-crosshair line{ stroke: rgba(246,244,236,.4); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* markers */
.intro-markers{ position: absolute; inset: 0; z-index: 3; }
.intro-marker{
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  transform: translate(-50%, -50%);
  outline: none;
}
.intro-marker-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--white);
  box-shadow: 0 0 0 5px rgba(246,244,236,.14);
  transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
  flex-shrink: 0;
}
.intro-marker-line{
  width: 14px; height: 1px;
  background: var(--white);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
  flex-shrink: 0;
}
.intro-marker-text{
  display: flex; align-items: baseline; gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  padding: 4px 9px 4px 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
  background: linear-gradient(90deg, rgba(8,20,32,.55), rgba(8,20,32,0) 92%);
}
.intro-marker-text em{ font-style: normal; color: var(--water-light); }
.intro-marker:hover .intro-marker-dot,
.intro-marker:focus-visible .intro-marker-dot{
  background: var(--water-light);
  box-shadow: 0 0 0 7px rgba(131,180,201,.2);
}
.intro-marker:hover .intro-marker-line,
.intro-marker:focus-visible .intro-marker-line{ opacity: .8; transform: scaleX(1); }
.intro-marker:hover .intro-marker-text,
.intro-marker:focus-visible .intro-marker-text{ opacity: 1; transform: translateX(0); }
.intro-marker:focus-visible{ outline: 1px solid var(--water-light); outline-offset: 6px; border-radius: 2px; }

/* caption */
.intro-caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 46px 26px 20px;
  background: linear-gradient(180deg, rgba(8,20,32,0) 0%, rgba(8,20,32,.62) 100%);
  display: flex; flex-direction: column; gap: 4px;
}
.intro-caption::before{
  content: "";
  display: block;
  width: 34px; height: 1px;
  background: var(--water-light);
  opacity: .7;
  margin-bottom: 12px;
}
.intro-caption-title{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white);
}
.intro-caption-sub{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.intro-mobile-markers{
  display: none;
  flex-direction: column;
  margin-top: 16px;
}
.intro-mobile-markers li{
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 2px;
  border-top: 1px solid var(--paper-line);
  font-size: 13px;
  color: var(--ink-soft);
}
.intro-mobile-markers li:first-child{ border-top: none; }
.intro-mobile-marker-num{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--water);
  flex-shrink: 0;
}

.image-placeholder--tall{ aspect-ratio: 4 / 5; }
.intro-line-decor{
  position: absolute;
  left: -1px; top: 8%;
  height: 84%;
  width: 1px;
  background: var(--water);
  opacity: .35;
}
.intro-line-decor span{ display: none; }

@media (prefers-reduced-motion: reduce){
  .intro-image-crop{ transform: none !important; }
  .intro-image{ transform: none !important; }
  .intro-marker-text{ transition: opacity .01ms linear !important; }
}

@media (prefers-reduced-motion: reduce){
  /* capability slider: simple crossfade only — no Ken Burns, no parallax, no stagger */
  .cap-slide-image{ transition: opacity .3s linear !important; }
  .cap-slide-image img{ transform: none !important; transition: none !important; }
  .cap-title, .cap-desc, .cap-cta{ transition: opacity .2s linear !important; transform: none !important; }
  .cap-nav-progress{ transition: none !important; }
}

/* first column order: text left / image right on desktop (matches DOM) */

/* ---------------------------------------------------------------------
   7. CAPABILITIES — full-screen cinematic slider
   --------------------------------------------------------------------- */
.cap-slider{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--navy-deep);
  color: var(--white);
}

/* -- media / image layers (two-layer crossfade, mirrors hero pattern) -- */
.cap-slider-media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cap-media-crop{ position: absolute; inset: -10px; will-change: transform; transition: transform .15s linear; }

.cap-slide-image{
  position: absolute; inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1.3s cubic-bezier(.4,0,.2,1);
}
.cap-slide-image.is-active{ opacity: 1; z-index: 2; }
.cap-slide-image img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.045) translate3d(var(--kb-start-x, 14px), 0, 0);
  transition: transform 6.2s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}
.cap-slide-image.kb-run img{ transform: scale(1) translate3d(0,0,0); }

.cap-gradient{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(6,14,20,0.20) 0%, rgba(6,14,20,0.12) 40%, rgba(6,14,20,0.82) 97%),
    linear-gradient(90deg, rgba(6,14,20,0.72) 0%, rgba(6,14,20,0.42) 38%, rgba(6,14,20,0.04) 66%);
}

/* very subtle engineering-documentation overlay — grid + tick marks */
.cap-technical-overlay{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* -- text content — vertically centered, ~8-10vw from the left -- */
.cap-slider-content{
  position: absolute; z-index: 2;
  left: 8vw;
  top: 50%;
  transform: translateY(-50%);
  max-width: clamp(380px, 32vw, 560px);
  padding-right: 20px;
}
.cap-eyebrow-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.cap-eyebrow-row .section-label{ margin-bottom: 0; }
.cap-counter{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--white-faint);
  flex-shrink: 0;
}
.cap-counter #capCounterCurrent{ color: var(--water-light); }
.cap-counter-sep{ margin: 0 3px; opacity: .5; }

.cap-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.08; letter-spacing: -0.015em;
  color: var(--white);
  text-transform: uppercase;
}
.cap-desc{
  margin: 26px 0 0;
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--white-dim);
}
.cap-cta{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 38px;
  padding-bottom: 4px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 14px; letter-spacing: .01em;
  color: var(--white);
  border-bottom: 1px solid rgba(246,244,236,0.32);
  transition: border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.cap-cta:hover, .cap-cta:focus-visible{ color: var(--water-light); border-color: var(--water-light); }
.cap-cta-arrow{ transition: transform var(--dur-fast) var(--ease-soft); }
.cap-cta:hover .cap-cta-arrow, .cap-cta:focus-visible .cap-cta-arrow{ transform: translateX(5px); }

/* -- staggered enter/exit targets -- */
.cap-title, .cap-desc, .cap-cta{ will-change: opacity, transform; }

/* -- technical caption, lower-right -- */
.cap-caption{
  position: absolute; z-index: 2;
  right: var(--edge); bottom: 108px;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--white-faint);
  text-align: right;
}
.cap-caption span:first-child{ opacity: .7; }

/* -- capability navigator -- */
.cap-nav{
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px;
  padding: 26px var(--edge) 28px;
  border-top: 1px solid var(--navy-line);
}
.cap-nav-item{
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 6px 0;
  cursor: pointer;
  outline: none;
}
.cap-nav-num{
  font-family: var(--font-mono); font-size: 13px;
  color: var(--white-faint);
  transition: color var(--dur-fast) var(--ease-soft);
}
.cap-nav-track{
  position: relative;
  width: 46px; height: 2px;
  background: var(--navy-line);
  overflow: hidden;
}
.cap-nav-progress{
  position: absolute; inset: 0;
  width: 0%;
  background: var(--green);
  transform-origin: left;
}
.cap-nav-item.is-active .cap-nav-num{ color: var(--green); }
.cap-nav-item:hover .cap-nav-num,
.cap-nav-item:focus-visible .cap-nav-num{ color: var(--water-light); }
.cap-nav-item:focus-visible{ outline: 2px solid var(--water-light); outline-offset: 3px; }
.cap-nav-item.is-active .cap-nav-track{ background: rgba(246,244,236,0.16); }
.cap-nav-progress.is-filling{ transition: width 6s linear; width: 100%; }
.cap-nav-progress.is-complete{ transition: none; width: 100%; }

.visually-hidden{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   8. SERVICES — editorial photo cards
   --------------------------------------------------------------------- */
/* shared carousel controls (services + projects) */
.carousel-controls{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
}
.carousel-progress{ display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.carousel-progress-current{ color: var(--ink); font-weight: 500; }
.carousel-progress-track{ position: relative; width: 84px; height: 1px; background: var(--paper-line); }
.carousel-progress-fill{ position: absolute; left: 0; top: 0; height: 100%; background: var(--water); transition: width var(--dur-med) var(--ease-soft); }
.carousel-btns{ display: flex; gap: 10px; }
.carousel-btn{
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-line);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.carousel-btn:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.carousel-btn:disabled{ opacity: .32; pointer-events: none; }

.services{ padding: 130px 0 120px; }
.services-carousel{ overflow: hidden; }
.services-grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  outline: none;
  scrollbar-width: none;
}
.services-grid::-webkit-scrollbar{ display: none; }
.service-panel{
  background: var(--paper);
  border: 1px solid var(--paper-line);
  display: flex; flex-direction: column;
  flex: 0 0 calc((100% - 44px) / 2.6);
  scroll-snap-align: start;
  min-width: 260px;
}
.service-panel-media{ aspect-ratio: 4/3; overflow: hidden; }
.service-panel-media .image-placeholder{ transition: transform var(--dur-slow) var(--ease-soft); }
.service-panel:hover .service-panel-media .image-placeholder{ transform: scale(1.035); }
.service-panel-body{
  position: relative;
  padding: 30px 28px 34px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-num{ font-family: var(--font-mono); font-size: 12px; color: var(--soil); margin-bottom: 16px; }
.service-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; line-height: 1.32; letter-spacing: -0.005em;
  margin-bottom: 12px;
  transition: color var(--dur-fast) var(--ease-soft);
}
.service-desc{ font-size: 14px; line-height: 1.65; color: var(--ink-soft); flex: 1; }
.service-arrow{
  margin-top: 22px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-line);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.service-panel:hover .service-arrow{ background: var(--water); border-color: var(--water); color: var(--white); transform: translate(3px,-3px); }
.service-panel:hover .service-title{ color: var(--water-deep); }

.services-more{ max-width: var(--max); margin: 50px auto 0; padding: 0 var(--edge); }

/* ---------------------------------------------------------------------
   9. INDUSTRIES — full-screen editorial showcase
   --------------------------------------------------------------------- */
.industries-showcase{
  position: relative;
  min-height: 100vh;
  background: var(--navy);
  color: var(--white);
  display: grid;
  grid-template-columns: 60% 40%;
  overflow: hidden;
}

/* LEFT — visual stage */
.showcase-visual{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(155deg, #16344A 0%, #0D2334 60%, #1C3A2D 100%);
}
.showcase-image-layer{
  position: absolute;
  inset: -10px; /* small overscan so the parallax/scale never reveals an edge */
  transition: transform 60ms linear;
}
.showcase-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(6px) saturate(0.9);
  transition:
    opacity 1000ms var(--ease-soft),
    transform 1200ms var(--ease-soft),
    filter 900ms var(--ease-soft);
  will-change: opacity, transform, filter;
}
.showcase-image.is-active{
  opacity: 1;
  transform: scale(1);
  filter: blur(0) saturate(1);
  z-index: 2;
  transition-duration: 1100ms, 1300ms, 950ms;
}
.showcase-gradient{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8,20,32,0.92) 0%, rgba(8,20,32,0.55) 32%, rgba(8,20,32,0.05) 58%, rgba(8,20,32,0) 75%),
    linear-gradient(90deg, rgba(8,20,32,0.35) 0%, rgba(8,20,32,0) 40%);
}

/* content block, bottom-left of the image */
.showcase-content{
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  bottom: clamp(40px, 6vw, 76px);
  z-index: 4;
  max-width: 640px;
}
.showcase-eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--water-light);
  margin: 0 0 14px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft), letter-spacing 700ms var(--ease-soft);
  transition-delay: 0ms;
}
.showcase-progress-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft);
  transition-delay: 40ms;
}
.showcase-progress-count{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--white-dim);
}
.showcase-progress-track{
  position: relative;
  width: 64px;
  height: 1px;
  background: var(--navy-line);
}
.showcase-progress-fill{
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  background: var(--green);
  transition: width 600ms var(--ease-soft);
}
.showcase-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--white);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transform-origin: left bottom;
  transition: opacity 680ms var(--ease-soft), transform 680ms var(--ease-soft);
  transition-delay: 90ms;
}
.showcase-desc{
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  color: var(--white-dim);
  max-width: 46ch;
  margin: 0;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-soft), transform 620ms var(--ease-soft);
  transition-delay: 200ms;
}
/* the "in" state — JS toggles this class on .showcase-content */
.showcase-content.is-visible .showcase-eyebrow{
  opacity: 1;
  transform: translateY(0);
  letter-spacing: .14em;
}
.showcase-content.is-visible .showcase-progress-row,
.showcase-content.is-visible .showcase-desc{
  opacity: 1;
  transform: translateY(0);
}
.showcase-content.is-visible .showcase-title{
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* exit state — applied briefly before new content is swapped in, so the
   outgoing text visibly recedes rather than just vanishing */
.showcase-content.is-leaving .showcase-eyebrow,
.showcase-content.is-leaving .showcase-progress-row,
.showcase-content.is-leaving .showcase-desc{
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 260ms var(--ease-soft), transform 260ms var(--ease-soft);
}
.showcase-content.is-leaving .showcase-title{
  opacity: 0;
  transform: translateY(-14px) scale(1.01);
  transition: opacity 260ms var(--ease-soft), transform 260ms var(--ease-soft);
}

/* RIGHT — navigation */
.showcase-nav{
  position: relative;
  background: var(--navy-deep);
  padding: clamp(56px, 6vw, 100px) clamp(28px, 3.4vw, 64px);
  display: flex;
  flex-direction: column;
}
.showcase-nav-eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin: 0 0 14px;
}
.showcase-nav-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 2vw, 30px);
  color: var(--white);
  margin: 0 0 40px;
}
.showcase-nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--navy-line);
}
.industry-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--navy-line);
  cursor: pointer;
  outline: none;
  transition: padding-left var(--dur-fast) var(--ease-soft);
}
.industry-row-num{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white-faint);
  width: 26px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.industry-row-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.15vw, 19px);
  color: var(--white-dim);
  flex: 1;
  transition: color var(--dur-fast) var(--ease-soft);
}
.industry-row-arrow{
  font-size: 15px;
  color: var(--water-light);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.industry-row-underline{
  position: absolute;
  left: 4px; right: 4px; bottom: -1px;
  height: 1px;
  background: var(--water-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-soft);
}
/* hover / keyboard-focus feedback — purely presentational, independent
   of which industry is actually selected */
.industry-row:hover,
.industry-row:focus-visible{ padding-left: 12px; }
.industry-row:hover .industry-row-num,
.industry-row:focus-visible .industry-row-num{ transform: translateX(3px); color: var(--white-dim); }
.industry-row:hover .industry-row-title,
.industry-row:focus-visible .industry-row-title{ color: var(--white); }
.industry-row:hover .industry-row-arrow,
.industry-row:focus-visible .industry-row-arrow{ opacity: 1; transform: translateX(0); }

/* the permanently-selected industry */
.industry-row.is-selected{ padding-left: 12px; }
.industry-row.is-selected .industry-row-num{ color: var(--water-light); }
.industry-row.is-selected .industry-row-title{ color: var(--white); font-weight: 600; }
.industry-row.is-selected .industry-row-arrow{ opacity: 1; transform: translateX(0); }
.industry-row.is-selected .industry-row-underline{ transform: scaleX(1); }

/* ---------------------------------------------------------------------
   10. PROJECTS — editorial case-study grid
   --------------------------------------------------------------------- */
.projects{ padding: 130px 0 120px; background: var(--paper); }

.projects-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto 60px;
}
.projects-head .section-label{ margin-bottom: 18px; }
.projects-head-copy{ max-width: 620px; }
.projects-head .text-link{ flex-shrink: 0; margin-bottom: 4px; }

.projects-grid{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}

.project-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--paper-line);
  background: var(--paper);
  outline: none;
}

.project-card-media{
  position: relative;
  aspect-ratio: 6/5;
  overflow: hidden;
  background: var(--paper-dim);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--stagger, 0) * 60ms);
}
.project-card.is-visible .project-card-media{ opacity: 1; transform: scale(1); }

.project-card-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-slow) var(--ease-soft), filter var(--dur-slow) var(--ease-soft);
}
.project-card-media--contain img{ object-fit: contain; background: var(--paper-dim); }

.project-card:hover .project-card-media img,
.project-card:focus-visible .project-card-media img{
  transform: scale(1.04);
  filter: brightness(.9);
}

/* description + gradient scrim — overlaps the lower portion of the image,
   hidden until hover/focus, never a full-image cover */
.project-card-desc{
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  margin: 0;
  padding: 34px 24px 20px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--white);
  font-size: 13.5px;
  line-height: 1.65;
  background: linear-gradient(180deg, rgba(13,35,52,0) 0%, rgba(13,35,52,.72) 46%, rgba(13,35,52,.92) 100%);
  transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-med) var(--ease);
  pointer-events: none;
}
.project-card:hover .project-card-desc,
.project-card:focus-visible .project-card-desc,
.project-card.is-open .project-card-desc{
  max-height: 220px;
  opacity: 1;
}

.project-card-body{
  position: relative;
  isolation: isolate;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--paper-line);
  background: var(--paper);
}
.project-card-meta{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
  transition: transform var(--dur-med) var(--ease-soft);
}
.project-card:hover .project-card-meta,
.project-card:focus-visible .project-card-meta{ transform: translateY(-6px); }

.project-card-num{ font-family: var(--font-mono); font-size: 12px; color: var(--soil); transition: color var(--dur-fast) var(--ease-soft); }
.project-card:hover .project-card-num,
.project-card:focus-visible .project-card-num{ color: var(--water); }
.project-card-num-total{ color: var(--ink-faint); }

.project-card-type{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--water);
  opacity: .82;
  transition: opacity var(--dur-fast) var(--ease-soft), letter-spacing var(--dur-fast) var(--ease-soft);
}
.project-card:hover .project-card-type,
.project-card:focus-visible .project-card-type{ opacity: 1; letter-spacing: .08em; }

.project-card-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 30ch;
  transition: transform var(--dur-med) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.project-card:hover .project-card-title,
.project-card:focus-visible .project-card-title{ transform: translateY(-6px); color: var(--water-deep); }

.project-card-foot{
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.project-card-location{ font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); max-width: 24ch; }
.project-card-arrow{
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--paper-line);
  color: var(--ink);
  opacity: .78;
  transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}
.project-card:hover .project-card-arrow,
.project-card:focus-visible .project-card-arrow{
  transform: translateX(5px);
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  opacity: 1;
}

/* keyboard focus — visible without relying on hover */
.project-card:focus-visible{ outline: 2px solid var(--water); outline-offset: 4px; }

/* mobile hint, hidden unless flagged in markup */
.project-card-explore{ display: none; }

@media (prefers-reduced-motion: reduce){
  .project-card-media{ transform: none !important; }
  .project-card-media img{ transition: none !important; transform: none !important; }
  .project-card-desc{ transition: opacity .25s linear !important; max-height: none !important; }
  .project-card[data-reveal]{ transition-delay: 0 !important; }
  .project-card-meta, .project-card-title{ transition: opacity .25s linear !important; transform: none !important; }
}

/* ---------------------------------------------------------------------
   11. APPROACH — full-screen interactive project-lifecycle methodology
   --------------------------------------------------------------------- */
.approach{ color: var(--white); position: relative; overflow: hidden; }

/* background image layer — .image-placeholder supplies the fallback
   gradient until a real photo is dropped into the empty <img>. The
   overlay keeps the white lifecycle content legible over any image. */
.approach-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.approach-bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(4px) saturate(1.15);
    transform: scale(1.06);
}

/* Blue overlay — tints the blurred photo through the brand water colour
   rather than just darkening it flat */
.approach-bg::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(155deg, rgba(43,108,137,0.5) 0%, rgba(8,35,70,0.6) 45%, rgba(8,20,32,0.7) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.approach-bg-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,20,32,0.82) 0%, rgba(8,20,32,0.7) 40%, rgba(8,20,32,0.88) 100%);
}

/* static, fully-visible section — stages change only on click, via
   the crossfade/transition rules below. No scroll-jacking. */
.approach-scroll{ position: relative; z-index: 1; height: auto; }
.approach-sticky{
  position: relative;
  min-height: 100vh;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vh, 48px);
  padding: 130px var(--edge) 90px;
}

.approach-head{ position: relative; max-width: 700px; margin: 0; padding: 0; }

/* soft radial glow behind the heading so it reads clearly over the
   blurred, colour-washed photo */
.approach-head::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: -24px; right: -24px; top: -20px; bottom: -20px;
  background: radial-gradient(60% 100% at 0% 30%, rgba(8,20,32,0.55) 0%, rgba(8,20,32,0) 75%);
  pointer-events: none;
}
.approach-head .section-heading{ text-shadow: 0 2px 18px rgba(8,20,32,0.55); }

/* ---- lifecycle line nav ---- */
.approach-nav{ max-width: var(--max); margin: 0 auto; width: 100%; }
.approach-track{
  position: relative;
  height: 1px;
  background: var(--navy-line);
  margin: 0 4px 26px;
}
.approach-track-line{ position: absolute; inset: 0; background: var(--navy-line); }
.approach-track-fill{
  position: absolute; top: 0; left: 0;
  height: 100%; width: 0%;
  background: var(--water-light);
  transition: width var(--dur-slow) var(--ease);
}
.approach-track-point{
  position: absolute; top: 50%; left: 0%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white);
  transform: translate(-50%, -50%);
  transition: left var(--dur-slow) var(--ease);
}

.approach-nav-list{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.approach-nav-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 0;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.approach-nav-dot{
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--navy-line);
  background: var(--navy-deep);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
  display: none;
}
.approach-nav-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--white-dim);
  transition: color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.approach-nav-btn:hover .approach-nav-title,
.approach-nav-btn:focus-visible .approach-nav-title{ color: var(--white); transform: translateX(3px); }

.approach-nav-btn.is-active .approach-nav-title{ color: var(--white); }
.approach-nav-item{ position: relative; }
.approach-nav-item::before{
  content: "";
  position: absolute;
  top: -26px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--navy-deep);
  border: 1px solid var(--water-light);
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.approach-nav-item.is-active::before{ background: var(--water-light); transform: scale(1.4); }

/* ---- stage content: visual + copy ---- */
.approach-stage{
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.approach-visual{ position: relative; min-height: 280px; }
.approach-slide{
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-soft), visibility 0s linear var(--dur-slow);
}
.approach-slide.is-active{
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.approach-slide-media{ height: 100%; min-height: 280px; }
.approach-slide-media img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform .7s var(--ease-soft);
}
.approach-slide.is-active .approach-slide-media img{ transform: scale(1); }

.approach-annot{
  position: absolute; inset: 18px;
  pointer-events: none;
  z-index: 2;
}
.approach-annot-tag{
  position: absolute;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white-dim);
  border: 1px solid var(--navy-line);
  background: rgba(8,20,32,0.42);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
  transition-delay: .12s;
}
.approach-slide.is-active .approach-annot-tag{ opacity: 1; transform: translateY(0); }
.approach-annot-tl{ top: 0; left: 0; }
.approach-annot-tr{ top: 0; right: 0; transition-delay: .18s; }
.approach-annot-bl{ bottom: 0; left: 0; transition-delay: .24s; }
.approach-annot-br{ bottom: 0; right: 0; transition-delay: .3s; }

.approach-copy{ position: relative; min-height: 340px; }
.approach-panel{
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-soft), visibility 0s linear var(--dur-med);
}
.approach-panel.is-active{
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease-soft) .1s;
}
.approach-panel-eyebrow{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--water-light);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
.approach-panel.is-active .approach-panel-eyebrow{ opacity: 1; transform: translateY(0); transition-delay: .08s; }
.approach-panel-num::after{ content: "/"; margin-left: 10px; color: var(--navy-line); }

.approach-panel-title{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.12; letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
.approach-panel.is-active .approach-panel-title{ opacity: 1; transform: translateY(0); transition-delay: .14s; }

.approach-panel-desc{
  font-size: 17px; line-height: 1.7;
  color: var(--white-dim);
  max-width: 46ch;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
.approach-panel.is-active .approach-panel-desc{ opacity: 1; transform: translateY(0); transition-delay: .2s; }

.approach-panel-caps-label{
  display: block;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 14px;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-soft);
}
.approach-panel.is-active .approach-panel-caps-label{ opacity: 1; transition-delay: .24s; }

.approach-panel-caps{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px 24px;
  max-width: 56ch;
}
.approach-panel-caps li{
  position: relative;
  padding-left: 15px;
  font-size: 14px; line-height: 1.55;
  color: var(--white-dim);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.approach-panel-caps li::before{
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 1px; background: var(--water-light);
}
.approach-panel-caps li:hover{ color: var(--white); }

.approach-panel.is-active .approach-panel-caps li{ opacity: 1; transform: translateY(0); }
.approach-panel.is-active .approach-panel-caps li:nth-child(1){ transition-delay: .28s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(2){ transition-delay: .32s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(3){ transition-delay: .36s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(4){ transition-delay: .4s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(5){ transition-delay: .44s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(6){ transition-delay: .48s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(7){ transition-delay: .52s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(8){ transition-delay: .56s; }
.approach-panel.is-active .approach-panel-caps li:nth-child(9){ transition-delay: .6s; }

/* ---- persistent principles layer ---- */
.approach-principles{
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  padding-top: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--navy-line);
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white-faint);
}
.approach-principle-sep{ color: var(--navy-line); }

/* reduced motion: keep content swap, remove scroll-jack, scale & stagger */
@media (prefers-reduced-motion: reduce){
  .approach-scroll{ height: auto; }
  .approach-sticky{ position: relative; height: auto; padding: 90px var(--edge) 70px; }
  .approach-slide-media img{ transform: none !important; transition: opacity .2s linear !important; }
  .approach-panel-eyebrow, .approach-panel-title, .approach-panel-desc,
  .approach-panel-caps-label, .approach-panel-caps li, .approach-annot-tag{
    transition: opacity .2s linear !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}

/* ---------------------------------------------------------------------
   12. CONSULTANTS — full-width alternating editorial profile rows
   --------------------------------------------------------------------- */
.consultants{
  position: relative;
  padding: 84px 0 70px;
  overflow: hidden;
  background: var(--paper);
}
.consultants > .section-head{ padding-left: var(--edge); padding-right: var(--edge); position: relative; z-index: 1; }

/* Consultants / Clients heading rows — matched to the Projects section
   heading treatment: full-width row, label + heading on the left, a
   "view all" link on the right. */
.consultants-head,
.clients-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto 60px;
}
.consultants-head .section-label,
.clients-head .section-label{ margin-bottom: 18px; }
.consultants-head-copy,
.clients-head-copy{ max-width: 620px; }
.consultants-head .text-link,
.clients-head .text-link{ flex-shrink: 0; margin-bottom: 4px; }

/* extremely subtle topographic / contour backdrop — almost architectural */
.consultants-topo{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    repeating-radial-gradient(circle at 12% 18%, transparent 0, transparent 46px, var(--paper-line) 47px, transparent 48px, transparent 94px),
    repeating-radial-gradient(circle at 88% 82%, transparent 0, transparent 60px, var(--paper-line) 61px, transparent 62px, transparent 120px);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.consultants-list{
  position: relative; z-index: 1;
  max-width: var(--max);
  margin: 30px auto 0;
}

/* ---- row ---- */
.consultant-row{
  position: relative;
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
  padding: 36px var(--edge);
}
.consultant-row--alt{ grid-template-columns: 1fr 1.32fr; }
.consultant-row--alt .consultant-content{ order: 2; }
.consultant-row--alt .consultant-media{ order: 1; }

/* ---- ruler-style divider between the two rows ---- */
.consultant-divider{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--edge);
  height: 1px;
  background: var(--paper-line);
}
.consultant-divider span{
  display: block;
  width: 1px;
  height: 9px;
  background: var(--ink-faint);
  opacity: .55;
}

/* ---- content column ---- */
.consultant-content{
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: center;
  padding: 8px 0;
  transition: transform var(--dur-med) var(--ease-soft);
}
.consultant-row:hover .consultant-content{ transform: translateX(4px); }
.consultant-row--alt:hover .consultant-content{ transform: translateX(-4px); }
.consultant-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 30px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 0;
}
.consultant-role{
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--water);
}
.consultant-exp{
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--paper-line);
}

.consultant-bio{
  margin-top: 14px;
  font-size: clamp(14.5px, 1vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}
.consultant-bio + .consultant-bio{ margin-top: 8px; }

/* ---- expertise tags ---- */
.consultant-expertise{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-line);
}
.consultant-expertise li{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-med) var(--ease-soft),
              border-color var(--dur-med) var(--ease-soft),
              transform var(--dur-med) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.consultant-row:hover .consultant-expertise li{
  color: var(--ink);
  border-color: var(--green);
  transform: translateY(-1px);
}

/* ---- media column ---- */
.consultant-media{
  position: relative;
  overflow: hidden;
  min-height: 260px;
  aspect-ratio: 4/4.6;
}
.consultant-media .image-placeholder--portrait{ height: 100%; aspect-ratio: auto; }
.consultant-media .image-placeholder--portrait img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-soft);
}
.consultant-row:hover .consultant-media .image-placeholder--portrait img{ transform: scale(1.03); }

/* corner survey ticks — restrained, always faintly present */
.consultant-media-tick{
  position: absolute;
  z-index: 2;
  width: 18px; height: 18px;
  pointer-events: none;
  opacity: .55;
  transition: opacity var(--dur-med) var(--ease-soft);
}
.consultant-media-tick--tl{
  top: 18px; left: 18px;
  border-top: 1px solid var(--white-dim);
  border-left: 1px solid var(--white-dim);
}
.consultant-media-tick--br{
  bottom: 18px; right: 18px;
  border-bottom: 1px solid var(--white-dim);
  border-right: 1px solid var(--white-dim);
}
.consultant-row:hover .consultant-media-tick{ opacity: 1; }

/* thin accent line — animates in on hover */
.consultant-media-accent{
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  width: 0; height: 2px;
  background: var(--water);
  transition: width var(--dur-slow) var(--ease-soft);
}
.consultant-row:hover .consultant-media-accent{ width: 100%; }

.consultants > .text-link{ max-width: var(--max); margin: 46px auto 0; display: flex; padding: 0 var(--edge); position: relative; z-index: 1; }

/* ---------------------------------------------------------------------
   13. CLIENTS — sophisticated client index, no fake logos
   --------------------------------------------------------------------- */
.clients{ background: var(--paper-dim); padding: 120px var(--edge); }
.clients-grid{
  max-width: var(--max); margin: 0 auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--paper-line);
  border-left: 1px solid var(--paper-line);
}
.client-tile{
  position: relative;
  border-right: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  padding: 30px 26px;
  min-height: 156px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  cursor: pointer;
  outline: none;
  transition: background var(--dur-fast) var(--ease-soft);
}
.client-tile:hover, .client-tile:focus-visible{ background: var(--paper); }
.client-tile-top{ display: flex; align-items: center; justify-content: flex-end; }
.client-tile-arrow{
  width: 14px; height: 14px;
  color: var(--water);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.client-tile:hover .client-tile-arrow, .client-tile:focus-visible .client-tile-arrow{
  opacity: 1;
  transform: translate(0,0);
}
.client-tile-body{ display: flex; flex-direction: column; }
.client-tile-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.client-tile-accent{
  display: block;
  width: 0;
  height: 1px;
  margin: 10px 0;
  background: var(--water);
  transition: width var(--dur-med) var(--ease-soft);
}
.client-tile:hover .client-tile-accent, .client-tile:focus-visible .client-tile-accent{ width: 30px; }
.client-tile-desc{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.clients-foot{
  max-width: var(--max);
  margin: 22px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--paper-line);
}
.clients-foot-note{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-faint);
}
.clients > .text-link{ max-width: var(--max); margin: 0 auto; display: flex; }

/* ---------------------------------------------------------------------
   14. QHSE
   --------------------------------------------------------------------- */
/* =====================================================================
   QHSE SECTION
   Quality, Health, Safety & Environment
   ===================================================================== */

/* ---------------------------------------------------------------------
   MAIN SECTION
   --------------------------------------------------------------------- */

.qhse{
  --qhse-1: #0B1822;
  --qhse-2: #0D2029;
  --qhse-3: #102B32;
  --qhse-green: #7C9A7E;
  --qhse-green-dim: rgba(124,154,126,0.4);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: var(--qhse-2);
  color: var(--white);

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}


/* ---------------------------------------------------------------------
   BACKGROUND TEXTURE
   --------------------------------------------------------------------- */

.qhse::before{
  content: "";

  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  background:
    radial-gradient(
      1100px 780px at 82% 18%,
      rgba(124,154,126,0.05),
      transparent 60%
    ),

    radial-gradient(
      900px 700px at 14% 82%,
      rgba(43,108,137,0.05),
      transparent 55%
    ),

    radial-gradient(
      ellipse at 26% 22%,
      var(--qhse-3) 0%,
      var(--qhse-2) 46%,
      var(--qhse-1) 100%
    );
}


/* ---------------------------------------------------------------------
   CONTOUR / ENGINEERING TEXTURE
   --------------------------------------------------------------------- */

.qhse-contour{
  position: absolute;
  inset: -6% -6%;

  z-index: 0;

  pointer-events: none;
  opacity: .5;

  background:

    repeating-linear-gradient(
      0deg,
      rgba(246,244,236,0.025) 0px,
      rgba(246,244,236,0.025) 1px,
      transparent 1px,
      transparent 58px
    ),

    repeating-radial-gradient(
      circle at 78% 24%,
      rgba(246,244,236,0.05) 0px,
      transparent 1px,
      transparent 46px,
      rgba(246,244,236,0.035) 47px
    ),

    repeating-radial-gradient(
      circle at 10% 88%,
      rgba(124,154,126,0.07) 0px,
      transparent 1px,
      transparent 64px,
      rgba(124,154,126,0.045) 65px
    );

  animation: qhse-drift 46s linear infinite;

  will-change: transform;
}


@keyframes qhse-drift{

  0%{
    transform: translate3d(0,0,0);
  }

  50%{
    transform: translate3d(-1.4%, 1%, 0);
  }

  100%{
    transform: translate3d(0,0,0);
  }

}


/* ---------------------------------------------------------------------
   TECHNICAL MARKERS
   --------------------------------------------------------------------- */

.qhse-corner-tag{
  position: absolute;
  z-index: 2;

  top: 34px;
  right: var(--edge);

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;

  color: var(--white-faint);
}


.qhse-coord{
  position: absolute;
  z-index: 2;

  left: var(--edge);
  bottom: 26px;

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;

  color: var(--white-faint);

  opacity: .55;
}


/* =====================================================================
   MEDIA COLUMN
   ===================================================================== */

.qhse-media{
  position: relative;
  z-index: 1;

  min-height: 420px;

  display: flex;
  align-items: center;

  padding:
    56px
    calc(var(--edge) * .7)
    56px
    var(--edge);
}


/* ---------------------------------------------------------------------
   IMAGE FRAME
   --------------------------------------------------------------------- */

.qhse-frame{
  position: relative;

  width: 100%;
  aspect-ratio: 5/3.05;
  max-height: 100%;

  border: 1px solid rgba(246,244,236,0.14);

  padding: 14px;
}


.qhse-frame::before{
  content: "";

  position: absolute;

  inset: -14% -10%;

  z-index: 0;

  background:
    radial-gradient(
      60% 55% at 50% 46%,
      rgba(124,154,126,0.14),
      transparent 72%
    );

  pointer-events: none;
}


/* ---------------------------------------------------------------------
   IMAGE STAGE
   --------------------------------------------------------------------- */

.qhse-image-stage{
  position: relative;
  z-index: 1;

  width: 100%;
  height: 100%;

  background: #0e1e2b;

  overflow: hidden;
}


.qhse-image{
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
  object-position: center;

  transform:
    translateY(var(--qhse-py, 0px))
    scale(var(--qhse-scale, 1));

  transition:
    transform var(--dur-slow) var(--ease-soft);
}


.qhse-media:hover .qhse-image{
  --qhse-scale: 1.02;
}


/* ---------------------------------------------------------------------
   FRAME CORNER TICKS
   --------------------------------------------------------------------- */

.qhse-frame-tick{
  position: absolute;

  width: 15px;
  height: 15px;

  z-index: 2;

  pointer-events: none;
}


.qhse-frame-tick--tl{
  top: -1px;
  left: -1px;

  border-top: 1px solid var(--qhse-green);
  border-left: 1px solid var(--qhse-green);
}


.qhse-frame-tick--tr{
  top: -1px;
  right: -1px;

  border-top: 1px solid var(--qhse-green);
  border-right: 1px solid var(--qhse-green);
}


.qhse-frame-tick--bl{
  bottom: -1px;
  left: -1px;

  border-bottom: 1px solid var(--qhse-green);
  border-left: 1px solid var(--qhse-green);
}


.qhse-frame-tick--br{
  bottom: -1px;
  right: -1px;

  border-bottom: 1px solid var(--qhse-green);
  border-right: 1px solid var(--qhse-green);
}


/* =====================================================================
   CONTENT COLUMN
   ===================================================================== */

.qhse-body{
  position: relative;
  z-index: 1;

  padding:
    110px
    var(--edge)
    110px
    76px;
}


.qhse-heading{
  max-width: 22ch;
}


.qhse-intro{
  margin-top: 20px;

  max-width: 44ch;

  font-size: 15px;
  line-height: 1.75;

  color: var(--white-dim);
}


/* =====================================================================
   QHSE BLOCKS
   ===================================================================== */

.qhse-blocks{
  display: flex;
  flex-direction: column;

  margin: 40px 0 42px;
}


/* ---------------------------------------------------------------------
   INDIVIDUAL BLOCK
   --------------------------------------------------------------------- */

.qhse-block{
  position: relative;

  padding:
    20px
    14px
    20px
    4px;

  border-top: 1px solid var(--navy-line);

  cursor: pointer;
  outline: none;

  transition:
    padding var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft),
    opacity var(--dur-fast) var(--ease-soft);
}


.qhse-block:last-child{
  border-bottom: 1px solid var(--navy-line);
}


/* ---------------------------------------------------------------------
   ACTIVE LINE
   --------------------------------------------------------------------- */

.qhse-block::before{
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 0;
  height: 1px;

  background: var(--qhse-green);

  transition:
    width var(--dur-med) var(--ease-soft);
}


/* ---------------------------------------------------------------------
   BLOCK HEADER
   --------------------------------------------------------------------- */

.qhse-block-top{
  display: flex;

  align-items: center;

  gap: 14px;
}


.qhse-block-num{
  min-width: 20px;

  font-family: var(--font-mono);

  font-size: 10px;
  letter-spacing: .08em;

  color: var(--white-faint);

  transition:
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);

  flex-shrink: 0;
}


.qhse-block-title{
  display: block;

  font-family: var(--font-display);
  font-weight: 600;

  font-size: 17px;

  color: var(--white);

  transition:
    color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}


.qhse-block-arrow{
  margin-left: auto;

  display: flex;
  align-items: center;

  color: var(--qhse-green);

  opacity: 0;

  transform: translateX(-6px);

  transition:
    opacity var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);

  flex-shrink: 0;
}


/* ---------------------------------------------------------------------
   BLOCK DESCRIPTION
   --------------------------------------------------------------------- */

.qhse-block-line{
  display: none;
}


.qhse-block p{
  margin-top: 10px;

  padding-left: 34px;

  max-width: 52ch;

  font-size: 14px;
  line-height: 1.7;

  color: var(--white-faint);

  opacity: .72;

  transform: translateY(0);

  transition:
    color var(--dur-fast) var(--ease-soft),
    opacity var(--dur-med) var(--ease-soft);
}


/* ---------------------------------------------------------------------
   HOVER / FOCUS / ACTIVE
   --------------------------------------------------------------------- */

.qhse-block:hover,
.qhse-block:focus-visible,
.qhse-block.is-active{

  padding-left: 14px;
  padding-right: 4px;

  background: rgba(246,244,236,0.035);
}


.qhse-block:hover::before,
.qhse-block:focus-visible::before,
.qhse-block.is-active::before{
  width: 100%;
}


.qhse-block:hover .qhse-block-num,
.qhse-block:focus-visible .qhse-block-num,
.qhse-block.is-active .qhse-block-num{

  color: var(--qhse-green);

  transform: translateX(2px);
}


.qhse-block:hover .qhse-block-title,
.qhse-block:focus-visible .qhse-block-title,
.qhse-block.is-active .qhse-block-title{

  color: var(--white);

  transform: translateX(6px);
}


.qhse-block:hover .qhse-block-arrow,
.qhse-block:focus-visible .qhse-block-arrow,
.qhse-block.is-active .qhse-block-arrow{

  opacity: 1;

  transform: translateX(0);
}


.qhse-block:hover p,
.qhse-block:focus-visible p,
.qhse-block.is-active p{

  color: var(--white-dim);

  opacity: 1;
}


/* ---------------------------------------------------------------------
   QUIET NON-ACTIVE BLOCKS
   --------------------------------------------------------------------- */

.qhse-blocks:hover
.qhse-block:not(:hover):not(:focus-visible),

.qhse-blocks:focus-within
.qhse-block:not(:focus-visible):not(:hover){

  opacity: .62;
}


/* ---------------------------------------------------------------------
   SCROLL REVEAL
   --------------------------------------------------------------------- */

.qhse-body[data-reveal].is-visible .qhse-block{

  animation:
    qhse-block-in
    var(--dur-med)
    var(--ease-soft)
    both;

  animation-delay:
    calc(var(--i, 0) * 100ms + 120ms);
}


@keyframes qhse-block-in{

  from{
    opacity: 0;
    transform: translateY(14px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }

}


/* ---------------------------------------------------------------------
   QHSE LINK
   --------------------------------------------------------------------- */

.qhse-link{
  position: relative;

  border-bottom-color:
    rgba(246,244,236,0.32);
}


.qhse-link svg{

  transition:
    transform var(--dur-fast) var(--ease-soft);

}


.qhse-link:hover{

  opacity: 1;

  color: var(--white);

  border-bottom-color:
    var(--qhse-green);

}


.qhse-link:hover svg{

  transform:
    translateX(5px);

  color:
    var(--qhse-green);

}


/* =====================================================================
   RESPONSIVE — TABLET
   ===================================================================== */

@media (max-width: 1024px){

  .qhse{
    grid-template-columns: 0.72fr 1fr;
  }


  .qhse-media{

    min-height: 320px;

    padding:
      44px
      var(--edge)
      44px
      calc(var(--edge) * .7);
  }


  .qhse-body{

    padding:
      70px
      var(--edge)
      70px
      0;
  }


  .qhse-corner-tag{
    top: 24px;
  }

}


/* =====================================================================
   RESPONSIVE — MOBILE
   ===================================================================== */

@media (max-width: 680px){

  .qhse{
    grid-template-columns: 1fr;
  }


  .qhse-media{

    min-height: 0;

    padding:
      40px
      var(--edge)
      8px;
  }




  .qhse-body{

    padding:
      24px
      var(--edge)
      60px;
  }


  .qhse-heading{
    max-width: none;
  }


  .qhse-corner-tag{

    top: 16px;
    right: var(--edge);

    font-size: 10px;
  }


  .qhse-coord{
    display: none;
  }


  .qhse-block{
    padding-left: 0;
  }


  .qhse-block p{

    padding-left: 0;

    max-width: none;
  }


  .qhse-blocks:hover
  .qhse-block:not(:hover):not(:focus-visible){
    opacity: 1;
  }

}


/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce){

  .qhse-contour{
    animation: none;
  }


  .qhse-body[data-reveal].is-visible .qhse-block{
    animation: none;
  }


  .qhse-block,
  .qhse-block::before,
  .qhse-block-title,
  .qhse-block-num,
  .qhse-block-arrow,
  .qhse-image{
    transition: none !important;
  }

}

/* ---------------------------------------------------------------------
   14b. GLOBAL OFFICES
   --------------------------------------------------------------------- */
.offices{ background: var(--paper); padding: 120px var(--edge) 130px; }
.offices .section-head{ margin-bottom: 60px; }
.offices-grid{
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
}
.office-card{
  background: var(--paper);
  padding: 38px 34px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background var(--dur-fast) var(--ease-soft);
}
.office-card:hover{ background: var(--paper-dim); }
.office-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.office-card-region{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--water);
}
.office-card-coord{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.office-card-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.3;
}
.office-card-address{
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.office-card-meta{ display: flex; flex-direction: column; gap: 4px; }
.office-card-meta a{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-soft);
}
.office-card-meta a:hover{ color: var(--water); }
.office-card-link{
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink);
  border-top: 1px solid var(--paper-line);
  transition: gap var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.office-card-link svg{ transition: transform var(--dur-fast) var(--ease-soft); }
.office-card-link:hover{ gap: 12px; color: var(--water); }
.office-card-link:hover svg{ transform: translate(2px,-2px); }

@media (max-width: 900px){
  .offices-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   15. CONTACT CTA
   --------------------------------------------------------------------- */
/* =====================================================================
   CONTACT CTA — Environmental Remediation Consulting Services
   ===================================================================== */

/* ---------------------------------------------------------------------
   CONTACT CTA — full-screen premium contact experience
   --------------------------------------------------------------------- */

.contact-cta{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}

/* ---------------------------------------------------------------------
   BACKGROUND
   --------------------------------------------------------------------- */

.contact-cta-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.image-placeholder--cta{
  position: absolute;
  inset: -20px 0 -20px 0;
  min-height: 100%;
  will-change: transform;
}

.contact-cta-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(6,14,20,0.94) 0%,
      rgba(6,14,20,0.82) 34%,
      rgba(6,14,20,0.52) 60%,
      rgba(6,14,20,0.38) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6,14,20,0.25) 0%,
      rgba(6,14,20,0.1) 20%,
      rgba(6,14,20,0.55) 100%
    );
}

/* ---------------------------------------------------------------------
   TECHNICAL OVERLAY
   --------------------------------------------------------------------- */

.contact-cta-technical{
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.contact-cta-technical .cta-tech-grid{
  stroke: rgba(246,244,236,.07);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.contact-cta-technical .cta-tech-contour{
  stroke: rgba(246,244,236,.14);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.contact-cta-technical .cta-tech-tick{
  stroke: rgba(246,244,236,.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.contact-cta-technical .cta-tech-coord{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  fill: rgba(246,244,236,.28);
}

/* ---------------------------------------------------------------------
   CONTACT LAYOUT
   --------------------------------------------------------------------- */

.contact-cta-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 140px var(--edge) 80px;

  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}

/* ---------------------------------------------------------------------
   CONTACT INFORMATION
   --------------------------------------------------------------------- */

.contact-cta-info{
  max-width: 480px;
}

.contact-cta-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 16ch;
  margin-bottom: 22px;
}

.contact-cta-sub{
  font-size: 15px;
  line-height: 1.75;
  color: var(--white-dim);
  max-width: 42ch;
}

.contact-cta-marks{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 44px;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white-faint);
}

.contact-cta-marks::before{
  content: "";
  width: 30px;
  height: 1px;
  background: rgba(246,244,236,.3);
}

.contact-cta-links{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 32px;
}

.contact-cta-links a{
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--water-light);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}

.contact-cta-links a:hover{
  color: var(--white);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------
   FORM PANEL
   --------------------------------------------------------------------- */

.contact-cta-panel{
  position: relative;
  background: rgba(8,17,26,0.72);

  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);

  border: 1px solid rgba(246,244,236,0.12);
  border-radius: var(--radius);

  padding: clamp(28px, 3vw, 46px);
}

.contact-cta-panel::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 22px;
  height: 22px;

  border-top: 1px solid var(--water-light);
  border-left: 1px solid var(--water-light);
  opacity: .55;
}

.contact-cta-panel::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;

  width: 22px;
  height: 22px;

  border-bottom: 1px solid var(--water-light);
  border-right: 1px solid var(--water-light);
  opacity: .55;
}

.contact-form-label{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white-faint);
}

/* ---------------------------------------------------------------------
   FORM GRID
   --------------------------------------------------------------------- */

.contact-form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 18px;

  transition:
    opacity var(--dur-med) var(--ease-soft),
    transform var(--dur-med) var(--ease-soft);
}

.field{
  position: relative;
  grid-column: span 1;
}

.field--full{
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------
   FIELD SURFACES
   --------------------------------------------------------------------- */

.field input,
.field select,
.field textarea{
  width: 100%;
  background: rgba(246,244,236,0.045);
  border: 1px solid rgba(246,244,236,0.18);
  border-radius: var(--radius);

  color: var(--white);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;

  transition:
    border-color var(--dur-fast) var(--ease-soft),
    background var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);

  appearance: none;
  -webkit-appearance: none;
}

.field input::placeholder,
.field textarea::placeholder{
  color: transparent;
}

/* ---------------------------------------------------------------------
   FLOATING LABEL FIELDS
   --------------------------------------------------------------------- */

.field--floating input,
.field--floating textarea{
  padding: 24px 16px 10px;
}

.field--floating textarea{
  min-height: 120px;
  padding-top: 26px;
  resize: vertical;
}

.field--floating label{
  position: absolute;
  left: 17px;
  top: 18px;

  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--white-faint);

  pointer-events: none;
  transform-origin: left top;

  transition:
    transform var(--dur-fast) var(--ease-soft),
    top var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    font-size var(--dur-fast) var(--ease-soft);
}

.field--floating.is-active label{
  top: 9px;

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;

  color: var(--white-dim);
}

.field--floating.is-focused label{
  color: var(--water-light);
}

/* ---------------------------------------------------------------------
   SELECT FIELDS
   --------------------------------------------------------------------- */

.field--select{
  display: flex;
  flex-direction: column;
}

.field--select label{
  display: block;
  margin-bottom: 8px;

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;

  color: var(--white-faint);

  transition: color var(--dur-fast) var(--ease-soft);
}

.field--select.is-focused label{
  color: var(--water-light);
}

.field--select select{
  padding: 13px 34px 13px 14px;
  cursor: pointer;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2383B4C9' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field--select select option{
  background: var(--navy-deep);
  color: var(--white);
}

.field--select select:invalid{
  color: var(--white-faint);
}

.field--select.is-active select{
  color: var(--white);
}

/* ---------------------------------------------------------------------
   FOCUS + VALIDATION
   --------------------------------------------------------------------- */

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--water-light);
  background: rgba(131,180,201,0.06);
  box-shadow: 0 0 0 3px rgba(131,180,201,0.12);
}

.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea{
  border-color: rgba(131,180,201,0.4);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color: var(--error);
  background: rgba(188,90,70,0.07);
}

.field.is-invalid input:focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus{
  box-shadow: 0 0 0 3px rgba(188,90,70,0.14);
}

/* ---------------------------------------------------------------------
   ERROR MESSAGE
   --------------------------------------------------------------------- */

.field-error{
  display: flex;
  align-items: flex-start;
  gap: 6px;

  margin-top: 7px;
  min-height: 0;

  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .01em;

  color: var(--error);

  opacity: 0;
  max-height: 0;
  overflow: hidden;

  transition:
    opacity var(--dur-fast) var(--ease-soft),
    max-height var(--dur-fast) var(--ease-soft);
}

.field-error svg{
  flex-shrink: 0;
  margin-top: 2px;
}

.field.is-invalid .field-error{
  opacity: 1;
  max-height: 40px;
}

.field-optional-note{
  margin-top: 6px;

  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;

  color: var(--white-faint);
}

/* ---------------------------------------------------------------------
   CONSENT / NOTIFICATIONS
   --------------------------------------------------------------------- */

.contact-form-consent{
  margin-top: 26px;
}

.contact-form-consent-title{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--white-faint);
  margin-bottom: 12px;
}

.contact-form-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;

  font-size: 13.5px;
  line-height: 1.6;
  color: var(--white-dim);
}

.contact-form-checkbox input[type="checkbox"]{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;

  appearance: none;
  -webkit-appearance: none;
  background: rgba(246,244,236,0.06);
  border: 1px solid rgba(246,244,236,0.35);
  border-radius: 3px;
  cursor: pointer;

  transition:
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft);
}

.contact-form-checkbox input[type="checkbox"]:checked{
  background: var(--water-light);
  border-color: var(--water-light);
}

.contact-form-checkbox input[type="checkbox"]:checked::after{
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  margin: 2px auto;
  border: solid var(--ink, #0a1520);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

.contact-form-checkbox input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--water-light);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   SUBMIT AREA
   --------------------------------------------------------------------- */

.contact-form-footer{
  margin-top: 30px;

  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.form-submit{
  position: relative;
  min-width: 200px;
  justify-content: center;
}

.form-submit:disabled{
  cursor: default;
}

.form-submit .form-submit-spinner{
  width: 14px;
  height: 14px;

  border-radius: 50%;
  border: 1.6px solid rgba(246,244,236,0.4);
  border-top-color: var(--white);

  display: none;

  animation: cta-spin .7s linear infinite;
}

.form-submit[data-state="loading"] .form-submit-spinner{
  display: inline-block;
}

.form-submit[data-state="loading"] .btn-arrow{
  display: none;
}

.form-submit[data-state="loading"]{
  background: var(--water-deep);
  border-color: var(--water-deep);
  opacity: .9;
}

.form-submit[data-state="success"]{
  background: var(--success);
  border-color: var(--success);
}

.form-submit[data-state="success"] .btn-arrow{
  display: none;
}

@keyframes cta-spin{
  to{
    transform: rotate(360deg);
  }
}

.contact-form-note{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--white-faint);
}

/* ---------------------------------------------------------------------
   SUCCESS MESSAGE
   --------------------------------------------------------------------- */

.contact-form-success{
  display: flex;
  align-items: flex-start;
  gap: 14px;

  margin-top: 26px;
  padding: 18px 20px;

  border: 1px solid rgba(110,143,94,0.4);
  background: rgba(110,143,94,0.08);
  border-radius: var(--radius);

  opacity: 0;
  max-height: 0;
  overflow: hidden;

  transition:
    opacity var(--dur-med) var(--ease-soft),
    max-height var(--dur-med) var(--ease-soft),
    margin var(--dur-med) var(--ease-soft),
    padding var(--dur-med) var(--ease-soft);
}

.contact-form-success.is-visible{
  opacity: 1;
  max-height: 200px;
}

.contact-form-success-icon{
  flex-shrink: 0;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--success);
  color: var(--success);
}

.contact-form-success p{
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--white);
  margin: 0;
}

.contact-form-grid[aria-hidden="true"]{
  opacity: 0;
}

fieldset.contact-form-fieldset{
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* ---------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .contact-form-grid,
  .contact-form-success,
  .field-error{
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   RESPONSIVE — TABLET
   --------------------------------------------------------------------- */

@media (max-width: 1024px){

  .contact-cta{
    min-height: 0;
  }

  .contact-cta-inner{
    grid-template-columns: 1fr;
    padding: 120px var(--edge) 70px;
    gap: 50px;
  }

  .contact-cta-info{
    max-width: 600px;
  }

  .contact-cta-heading{
    max-width: 22ch;
  }

}

/* ---------------------------------------------------------------------
   RESPONSIVE — MOBILE
   --------------------------------------------------------------------- */

@media (max-width: 680px){

  .contact-cta-inner{
    padding-top: 100px;
    padding-bottom: 60px;
    gap: 40px;
  }

  .contact-form-grid{
    grid-template-columns: 1fr;
  }

  .field,
  .field--full{
    grid-column: 1 / -1;
  }

  .contact-cta-panel{
    padding: 24px 20px;
  }

  .contact-form-footer{
    align-items: stretch;
    flex-direction: column;
  }

  .form-submit{
    width: 100%;
  }

}

/* ---------------------------------------------------------------------
   16. FOOTER
   --------------------------------------------------------------------- */
.site-footer{ background: var(--navy-deep); color: var(--white-dim); padding: 96px var(--edge) 30px; }
.footer-top{
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 42px 36px;
}
.footer-brand{ display: flex; flex-direction: column; gap: 20px; }
.brand-plate--footer .brand-logo{ height: 34px; filter: brightness(1.4); }
.footer-tagline{ font-size: 14px; color: var(--white-faint); max-width: 26ch; line-height: 1.6; }
.footer-col{ display: flex; flex-direction: column; gap: 12px; }
.footer-col-title{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--water-light); margin-bottom: 6px; }
.footer-col a, .footer-address{ font-size: 14px; color: var(--white-dim); line-height: 1.7; transition: color var(--dur-fast) var(--ease-soft); }
.footer-col a:hover{ color: var(--white); }

.footer-divider{ max-width: var(--max); margin: 66px auto 26px; height: 1px; background: var(--navy-line); }
.footer-bottom{
  max-width: var(--max); margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--white-faint);
}

/* =====================================================================
   17. RESPONSIVE
   ===================================================================== */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px){
  .intro{ height: auto; min-height: 0; max-height: none; padding: 120px var(--edge) 90px; display: block; }
  .intro-num{ top: 40px; }
  .intro-inner{ grid-template-columns: 1fr; gap: 44px; }
  .intro-media{ order: -1; }
  .intro-image-stage{ aspect-ratio: 16 / 9; }
  .intro-heading{ max-width: 20ch; }
  .intro-line-decor{ display: none; }
  .intro-media-inner::before{ transform: translate(-10px, 10px); }
  .intro-marker:nth-child(3){ display: none; }
  .intro-details{ grid-template-columns: 1fr; gap: 20px; }
  .intro-detail{ padding-left: 0; border-left: none; padding-top: 16px; border-top: 1px solid var(--paper-line); }
  .intro-detail:first-child{ padding-top: 0; border-top: none; }
  .intro-details .intro-detail--scope{ grid-column: auto; }

  .service-panel{ flex: 0 0 calc((100% - 22px) / 1.8); }

  .cap-slider-content{ left: 7vw; max-width: clamp(340px, 42vw, 480px); }

  .industries-showcase{ grid-template-columns: 1fr; }
  .showcase-visual{ min-height: 62vh; }
  .showcase-nav{ padding: 48px var(--edge) 64px; }

  .consultant-row{ grid-template-columns: 1fr; padding: 34px var(--edge); gap: 20px; }
  .consultant-row--alt .consultant-content,
  .consultant-row--alt .consultant-media{ order: initial; }
  .consultant-media{ order: -1; aspect-ratio: 16/9; min-height: 0; }

  .clients-grid{ grid-template-columns: repeat(2, 1fr); }

  .qhse{ grid-template-columns: 1fr; }
  .qhse-media{ min-height: 320px; }
  .qhse-body{ padding: 70px var(--edge); }

  .approach-sticky{ padding: 100px var(--edge) 60px; gap: 24px; }
  .approach-stage{ gap: 34px; }
  .approach-panel-caps{ grid-template-columns: 1fr; }
  .approach-panel-desc{ max-width: 52ch; }

  .footer-top{ grid-template-columns: 1fr 1fr 1fr; gap: 42px 24px; }

  .projects-grid{ grid-template-columns: repeat(2, 1fr); }

  .consultants-head,
  .clients-head{ padding: 0 var(--edge); }
}

/* ---- Nav breakpoint (≤900px): switch to hamburger ---- */
@media (max-width: 900px){
  .main-nav{ display: none; }
  .header-cta{ display: none; }
  .menu-toggle{ display: flex; }
  .header-inner{ padding-top: 20px; padding-bottom: 20px; }
}

/* ---- Mobile (≤680px) ---- */
@media (max-width: 680px){
  :root{ --edge: 20px; }

  .hero{ padding-top: 104px; min-height: 92vh; }
  .hero-title{ font-size: clamp(36px, 11vw, 52px); }
  .hero-tagline{ flex-direction: column; gap: 8px; margin-top: 36px; }
  .strata-mark--hero{ display: none; }

  .intro{ padding: 84px var(--edge) 70px; }
  .intro-num{ position: static; display: block; margin-bottom: 20px; text-align: left; }
  .intro-inner{ gap: 34px; }
  .intro-image-stage{ aspect-ratio: 4 / 3; }
  .intro-heading{ font-size: clamp(30px, 8.4vw, 38px); max-width: none; }
  .intro-details{ grid-template-columns: 1fr; gap: 22px; }
  .intro-detail{ padding-left: 0; border-left: none; padding-top: 18px; border-top: 1px solid var(--paper-line); }
  .intro-detail:first-child{ padding-top: 0; border-top: none; }
  .intro-scope{ gap: 5px 4px; }

  /* markers: hide the on-image hover points, show a plain accessible list instead */
  .intro-markers{ display: none; }
  .intro-mobile-markers{ display: flex; }

  /* capability slider: stacked slide concept — image, then content below */
  .cap-slider{ min-height: 0; }
  .cap-slider-media{ position: relative; height: 50vh; min-height: 320px; }
  .cap-gradient{
    background:
      linear-gradient(180deg, rgba(6,14,20,0.10) 0%, rgba(6,14,20,0.05) 55%, rgba(8,20,32,1) 100%);
  }
  .cap-slider-content{
    position: relative;
    left: auto; top: auto; transform: none;
    max-width: none;
    padding: 30px 20px 0;
    background: var(--navy-deep);
  }
  .cap-eyebrow-row{ margin-bottom: 18px; }
  .cap-title{ font-size: clamp(26px, 8vw, 34px); }
  .cap-desc{ max-width: none; margin-top: 18px; font-size: 15px; }
  .cap-cta{ margin-top: 28px; }
  .cap-caption{ display: none; }
  .cap-nav{
    position: relative;
    left: auto; right: auto; bottom: auto;
    background: var(--navy-deep);
    gap: 16px;
    padding: 22px 20px 32px;
    flex-wrap: wrap;
  }
  .cap-nav-track{ width: 30px; }

  .services{ padding: 90px 0 80px; }
  .services-grid{ padding: 0 var(--edge); gap: 16px; }
  .service-panel{ flex: 0 0 88%; min-width: 0; }
  .carousel-controls{ margin-top: 26px; }

  .industries-showcase{ display: block; }

  .showcase-visual{ min-height: 78vh; touch-action: pan-y; }
  .showcase-content{ bottom: 28px; max-width: none; }
  .showcase-title{ font-size: clamp(28px, 8vw, 38px); }
  .showcase-desc{ max-width: 34ch; }

  .showcase-nav{ padding: 28px var(--edge) 40px; }
  .showcase-nav-heading{ margin-bottom: 22px; }

  .showcase-nav-list{
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    border-top: none;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .showcase-nav-list::-webkit-scrollbar{ display: none; }

  .industry-row{
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 18px 14px;
    border-bottom: none;
    border-right: 1px solid var(--navy-line);
    white-space: nowrap;
  }
  .industry-row:last-child{ border-right: none; }
  .industry-row-arrow{ display: none; }
  .industry-row-underline{ left: 18px; right: 18px; }
  .industry-row:hover,
  .industry-row:focus-visible,
  .industry-row.is-selected{ padding-left: 18px; }

  .projects{ padding: 90px 0 80px; }
  .projects-head{ flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; }
  .projects-grid{ grid-template-columns: 1fr; gap: 24px; padding: 0 var(--edge); }
  .project-card-media{ aspect-ratio: 4/3; }
  .project-card-title{ font-size: clamp(18px, 5vw, 21px); }
  .project-card-explore{
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
    color: var(--water);
  }

  .approach-scroll{ height: auto; }
  .approach-sticky{
    position: relative; height: auto;
    padding: 80px var(--edge) 70px;
    gap: 30px;
  }
  .approach-track{ display: none; }
  .approach-nav-list{
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
    padding-left: 16px;
  }
  .approach-nav-list::before{
    content: "";
    position: absolute; top: 6px; bottom: 6px; left: 2px;
    width: 1px; background: var(--navy-line);
  }
  .approach-nav-item{ padding: 14px 0; }
  .approach-nav-item::before{ top: 50%; left: -16px; transform: translateY(-50%); }
  .approach-nav-item.is-active::before{ transform: translateY(-50%) scale(1.4); }
  .approach-nav-dot{ display: block; }
  .approach-nav-title{ font-size: 16px; }

  .approach-stage{ grid-template-columns: 1fr; gap: 26px; }
  .approach-visual{ min-height: 0; aspect-ratio: 4/3; }
  .approach-slide-media{ aspect-ratio: auto; min-height: 0; }
  .approach-copy{ min-height: 0; }
  .approach-panel{ position: relative; }
  .approach-panel:not(.is-active){ display: none; position: absolute; }
  .approach-panel-caps{ grid-template-columns: 1fr; }
  .approach-panel-desc{ max-width: none; }

  .approach-principles{ flex-wrap: wrap; row-gap: 8px; }

  .consultants{ padding: 50px 0 40px; }
  .consultants-list{ margin-top: 24px; }
  .consultants-head,
  .clients-head{ flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; padding: 0 var(--edge); }
  .consultant-row{ padding: 28px var(--edge); gap: 18px; }
  .consultant-media{ min-height: 200px; }
  .consultant-exp{ margin-top: 10px; }
  .consultant-bio{ margin-top: 10px; }
  .consultant-expertise{ margin-top: 14px; padding-top: 12px; }

  .clients{ padding: 90px var(--edge); }
  .clients-grid{ grid-template-columns: 1fr; }

  .qhse-body{ padding: 60px var(--edge); }

  .contact-cta-content{ padding: 70px var(--edge); }

  .footer-top{ grid-template-columns: 1fr; gap: 34px; }
  .site-footer{ padding: 70px var(--edge) 26px; }
  .footer-bottom{ flex-direction: column; }
}