/* Droz Technologies — site.css
   Compiled from inline styles in Droz Technologies.html (home patterns) + plans/_design-system.md (multipage extensions).
   Last built: 2026-05-21
*/

/* ═══════════════════════════════════════════════════════════════════
   DROZ TECHNOLOGIES · marketing site
   Palette shifted to INDUSTRIAL NAVY/AZURE (sampled from team workwear)
   Institutional editorial layout · square corners · hairline rules
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Re-tone accent → industrial navy + signal azure (from workwear photo) */
  --accent:        #0F2C4D;     /* deep navy — primary brand */
  --accent-2:      #1B6FB0;     /* signal azure — interactive lift */
  --accent-wash:   #E4ECF4;     /* soft blue tint — chips/rails */
  --accent-deep:   #061627;     /* darkest navy — dossier base */
  --accent-mid:    #0B1F3A;     /* mid navy — dossier gradient */
  --accent-line:   #1E3A5C;     /* hairline on navy */

  /* Override dark-mode tokens to navy (instead of pure black) */
  --dark-bg:       #061627;
  --dark-surface:  #0B1F3A;
  --dark-panel:    #122A4A;
  --dark-rule:     #1E3A5C;
  --dark-accent:   #6FA6D4;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); }
img { display: block; max-width: 100%; }
* { box-sizing: border-box; }

/* ── Layout primitives ── */
.wrap     { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.section  { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--xl    { padding: 128px 0; }

.eyebrow-mono {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--graphite-2); letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow-mono::before {
  content: ''; display: inline-block; width: 28px; height: 1px; background: var(--accent);
}
.display {
  font-family: var(--font-display); font-weight: 500;
  line-height: 1.0; letter-spacing: -0.03em; color: var(--ink);
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.lede { font-size: 19px; line-height: 1.6; color: var(--graphite); max-width: 56ch; }

/* ═══ NAVBAR ═══ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,243,238,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter); gap: 32px;
}
.nav-left  { display: flex; align-items: center; gap: 44px; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.wordmark {
  font-family: var(--font-display); font-size: 28px; font-weight: 500;
  letter-spacing: -0.035em; color: var(--ink); line-height: 1;
  border: 0; display: inline-flex; align-items: baseline; gap: 6px;
}
.wordmark .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); display: inline-block; transform: translateY(-2px); }
.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--graphite);
  border: 0; padding: 6px 0; position: relative; letter-spacing: 0.01em;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width var(--dur-base) var(--ease-standard);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.lang {
  font-family: var(--font-mono); font-size: 11px; color: var(--graphite-2);
  letter-spacing: 0.10em; display: flex; gap: 4px;
}
.lang span { cursor: pointer; padding: 2px 6px; }
.lang span.on { color: var(--ink); border-bottom: 1px solid var(--accent); }

.btn {
  font-family: var(--font-sans); font-weight: 500; font-size: 14px;
  padding: 11px 20px; border-radius: var(--r-2); cursor: pointer; border: 0;
  letter-spacing: 0.01em; line-height: 1;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost   { background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 10px 19px; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-light   { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 10px 19px; }
.btn-light:hover { background: #fff; color: var(--accent-deep); border-color: #fff; }

/* ═══════════════════════════════════════════════
   HERO — full bleed industrial photo + display set
   ═══════════════════════════════════════════════ */
.hero {
  position: relative; min-height: 92vh; overflow: hidden;
  background: var(--accent-deep);
  color: #fff;
}
.hero-photo {
  position: absolute; inset: 0;
  background: url('assets/hero/team.png') center/cover no-repeat;
  filter: saturate(1.05) contrast(1.02);
}
.hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,22,39,0.55) 0%, rgba(6,22,39,0.15) 35%, rgba(6,22,39,0.25) 60%, rgba(6,22,39,0.92) 100%),
    linear-gradient(90deg, rgba(6,22,39,0.6) 0%, rgba(6,22,39,0.0) 50%);
}
.hero-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto; padding: 80px var(--gutter) 64px;
  min-height: 92vh; display: flex; flex-direction: column; justify-content: space-between;
}
.hero-top {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 32px;
  color: rgba(255,255,255,0.75); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-top .serial { color: #fff; }
.hero-headline { max-width: 1000px; }
.hero-headline h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(54px, 8.6vw, 124px); line-height: 0.95;
  letter-spacing: -0.035em; color: #fff; margin: 0 0 28px;
  text-wrap: balance;
}
.hero-headline h1 em {
  font-style: italic; color: #9FC4E6; font-weight: 400;
}
.hero-headline p {
  font-size: 19px; line-height: 1.6; color: rgba(255,255,255,0.82);
  max-width: 620px; margin: 0 0 40px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-meta-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: 24px;
}
.hero-meta-strip > div { padding-right: 28px; }
.hero-meta-strip .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px;
}
.hero-meta-strip .v { font-size: 14px; color: #fff; line-height: 1.4; }

/* ═══════════════════════════════════════════════
   POSITIONING STATEMENT band
   ═══════════════════════════════════════════════ */
.position-band {
  background: var(--paper-bone);
  border-bottom: 1px solid var(--rule);
}
.position-band-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 32px var(--gutter);
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 32px; align-items: center;
}
.position-band .label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase;
}
.position-band .stmt {
  font-family: var(--font-display); font-size: 24px; font-weight: 400;
  color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; text-align: center;
}
.position-band .stmt em { font-style: italic; color: var(--accent-2); }
.position-band .creds {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--graphite-2); text-transform: uppercase; text-align: right;
}

/* ═══════════════════════════════════════════════
   DIVISION HEADER (/ SOFTWARE  · / ENGINEERING)
   ═══════════════════════════════════════════════ */
.div-header {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
.div-header .slash {
  font-family: var(--font-display); font-size: 88px; font-weight: 500;
  line-height: 0.9; letter-spacing: -0.04em; color: var(--ink);
}
.div-header .slash em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.div-header .slash small {
  display: block; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase;
  margin-bottom: 18px; font-weight: 500;
}
.div-header .blurb {
  font-size: 19px; line-height: 1.6; color: var(--graphite);
}

/* ═══════════════════════════════════════════════
   SERVICE GRID — Software services 3×2
   ═══════════════════════════════════════════════ */
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-bottom: 1px solid var(--rule);
}
.svc {
  padding: 40px 32px 48px;
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column; gap: 18px;
  transition: background var(--dur-base) var(--ease-standard);
  position: relative;
}
.svc:nth-child(3n) { border-right: 0; }
.svc:hover { background: var(--paper-pure); }
.svc-num {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
  color: var(--accent-2); text-transform: uppercase; font-weight: 500;
}
.svc h3 {
  font-size: 24px; font-weight: 500; line-height: 1.18;
  letter-spacing: -0.015em; margin: 0; color: var(--ink);
}
.svc p { font-size: 14.5px; color: var(--graphite); line-height: 1.6; margin: 0; }
.svc-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px;
}
.tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  background: var(--accent-wash); color: var(--accent); border: 1px solid #C8D7E4;
  padding: 4px 8px; line-height: 1.2;
}

/* ═══════════════════════════════════════════════
   PRODUCT WORDMARK STRIP
   ═══════════════════════════════════════════════ */
.product-strip {
  background: var(--paper-bone);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 32px 0;
}
.product-strip-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center;
}
.product-strip-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--graphite); text-transform: uppercase; line-height: 1.5;
}
.product-strip-wall {
  display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center;
}
.product-strip-wall .mark {
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.4;
  padding: 6px 0;
}
.product-strip-wall .sep {
  color: var(--graphite-3); font-family: var(--font-mono); font-size: 14px;
}

/* ═══════════════════════════════════════════════
   WHY DROZ band (dark navy)
   ═══════════════════════════════════════════════ */
.why {
  background: linear-gradient(180deg, var(--accent-deep) 0%, var(--accent-mid) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.why::before {
  content: ''; position: absolute; right: -8%; top: -10%;
  width: 56%; height: 130%; opacity: 0.10;
  background: url('assets/field/turbine-rotor.png') center/cover no-repeat;
  pointer-events: none;
  mix-blend-mode: screen;
}
.why-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 128px var(--gutter);
  position: relative; z-index: 2;
}
.why-head { max-width: 900px; margin-bottom: 80px; }
.why-head .eyebrow-mono { color: rgba(255,255,255,0.6); }
.why-head .eyebrow-mono::before { background: #6FA6D4; }
.why-head h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1.0;
  letter-spacing: -0.03em; color: #fff; margin: 20px 0 0;
}
.why-head h2 em { font-style: italic; color: #9FC4E6; font-weight: 400; }
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--accent-line);
}
.why-cell {
  padding: 36px 24px 0 0;
  border-right: 1px solid var(--accent-line);
}
.why-cell:last-child { border-right: 0; padding-right: 0; }
.why-cell .num {
  font-family: var(--font-display); font-size: 56px; font-weight: 400;
  color: #6FA6D4; line-height: 1; margin-bottom: 24px;
  font-feature-settings: "tnum";
}
.why-cell h4 {
  font-size: 19px; font-weight: 500; color: #fff; margin: 0 0 12px;
  line-height: 1.25; letter-spacing: -0.01em;
}
.why-cell p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }

/* ═══════════════════════════════════════════════
   ENGINEERING HERO — split (photo + statement)
   ═══════════════════════════════════════════════ */
.eng-hero {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  min-height: 70vh; align-items: stretch;
  border-bottom: 1px solid var(--rule);
}
.eng-hero-photo {
  background: url('assets/field/engineer-turbine.png') center/cover no-repeat;
  position: relative; min-height: 480px;
}
.eng-hero-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,22,39,0.1) 0%, rgba(6,22,39,0.55) 100%);
}
.eng-hero-photo .caption {
  position: absolute; left: 24px; bottom: 24px; right: 24px; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  color: rgba(255,255,255,0.85); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.eng-hero-text {
  padding: 96px 64px; display: flex; flex-direction: column; justify-content: center;
  background: var(--paper-pure);
}
.eng-hero-text .eyebrow-mono { margin-bottom: 24px; }
.eng-hero-text h2 {
  font-family: var(--font-display); font-size: clamp(40px, 4.8vw, 64px);
  font-weight: 500; line-height: 0.98; letter-spacing: -0.025em;
  margin: 0 0 28px; color: var(--ink);
}
.eng-hero-text h2 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.eng-hero-text p { font-size: 17px; line-height: 1.65; color: var(--graphite); margin: 0 0 16px; max-width: 52ch; }
.eng-hero-text .quote {
  margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-size: 22px; font-style: italic;
  color: var(--ink); line-height: 1.35; max-width: 52ch;
}

/* ═══════════════════════════════════════════════
   What we do · 5-step
   ═══════════════════════════════════════════════ */
.steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  margin-top: 48px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.step {
  padding: 28px 20px 32px 0;
  border-right: 1px solid var(--rule);
  position: relative;
}
.step:last-child { border-right: 0; }
.step .ord {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--accent-2); text-transform: uppercase; margin-bottom: 14px; font-weight: 500;
}
.step h5 {
  font-size: 17px; font-weight: 500; color: var(--ink); margin: 0 0 8px;
  letter-spacing: -0.01em; line-height: 1.25;
}
.step p { font-size: 13px; color: var(--graphite-2); margin: 0; line-height: 1.55; }
.step .ord-num {
  font-family: var(--font-display); font-size: 48px; font-weight: 400;
  color: var(--accent); line-height: 1; margin-bottom: 16px; opacity: 0.25;
}

/* ═══════════════════════════════════════════════
   Industries grid
   ═══════════════════════════════════════════════ */
.industries {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
}
.industry {
  padding: 28px 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper); transition: background var(--dur-base);
  display: flex; align-items: baseline; gap: 14px;
}
.industry:nth-child(4n) { border-right: 0; }
.industry:hover { background: var(--paper-pure); }
.industry .idx {
  font-family: var(--font-mono); font-size: 11px; color: var(--graphite-3);
  letter-spacing: 0.06em; font-feature-settings: "tnum"; min-width: 24px;
}
.industry .name {
  font-size: 15px; color: var(--ink); font-weight: 500; line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════════
   Assets addressed — 4 column composition
   ═══════════════════════════════════════════════ */
.assets-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 56px;
}
.assets-head h2 {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px);
  font-weight: 500; line-height: 1.0; letter-spacing: -0.025em; margin: 12px 0 0;
}
.assets-head h2 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.assets-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.asset-card {
  background: var(--paper-pure); padding: 36px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.asset-card .badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--accent); text-transform: uppercase; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
}
.asset-card .badge::before {
  content: ''; width: 6px; height: 6px; background: var(--accent-2); display: inline-block; border-radius: 50%;
}
.asset-card h4 {
  font-size: 22px; font-weight: 500; margin: 0; line-height: 1.2;
  letter-spacing: -0.015em;
}
.asset-card .focus {
  font-family: var(--font-display); font-size: 15px; font-style: italic;
  color: var(--accent-2); margin: 0;
}
.asset-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.asset-list li {
  font-size: 14px; color: var(--graphite); line-height: 1.5;
  padding: 6px 0; border-bottom: 1px dashed var(--rule-soft);
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
}
.asset-list li:last-child { border-bottom: 0; }
.asset-list .item { color: var(--ink); font-weight: 500; }
.asset-list .detail {
  font-family: var(--font-mono); font-size: 11px; color: var(--graphite-2);
  letter-spacing: 0.04em; text-align: right; line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   PROCESSES we optimize — 5 columns, paper-bone band
   ═══════════════════════════════════════════════ */
.processes-band { background: var(--paper-bone); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.processes-head { padding-bottom: 48px; }
.processes-head h2 {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px);
  font-weight: 500; line-height: 1.0; letter-spacing: -0.025em; margin: 12px 0 0;
}
.processes-head h2 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.proc-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border-top: 1px solid var(--rule);
}
.proc-col {
  padding: 36px 24px 0 0;
  border-right: 1px solid var(--rule);
}
.proc-col:last-child { border-right: 0; padding-right: 0; }
.proc-col .icon-num {
  font-family: var(--font-display); font-size: 36px; font-weight: 400;
  color: var(--accent); margin-bottom: 16px; line-height: 1;
}
.proc-col h5 {
  font-size: 18px; font-weight: 500; margin: 0 0 16px;
  color: var(--ink); letter-spacing: -0.01em;
}
.proc-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.proc-col li {
  font-size: 13.5px; color: var(--graphite); line-height: 1.45;
  padding-left: 14px; position: relative;
}
.proc-col li::before {
  content: '–'; position: absolute; left: 0; color: var(--accent-2);
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════
   AI Differentiators — large editorial cards
   ═══════════════════════════════════════════════ */
.ai-diff-head { margin-bottom: 56px; }
.ai-diff-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.ai-cell {
  padding: 36px 24px 36px 0;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.ai-cell:last-child { border-right: 0; padding-right: 0; }
.ai-cell .num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--accent-2); text-transform: uppercase; font-weight: 500;
}
.ai-cell h4 {
  font-size: 22px; font-weight: 500; margin: 0;
  letter-spacing: -0.015em; line-height: 1.18;
}
.ai-cell ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ai-cell li { font-size: 13.5px; color: var(--graphite); line-height: 1.45; }
.ai-cell li::before { content: '· '; color: var(--accent-2); }

/* ═══════════════════════════════════════════════
   CORE MESSAGE — editorial pullquote
   ═══════════════════════════════════════════════ */
.core {
  background: var(--accent-deep);
  background-image:
    radial-gradient(circle at 70% 30%, rgba(31,78,99,0.4), transparent 60%),
    linear-gradient(180deg, var(--accent-deep) 0%, var(--accent-mid) 100%);
  color: #fff;
}
.core-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 128px var(--gutter);
}
.core-headline {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08;
  letter-spacing: -0.02em; color: #fff; max-width: 980px;
  text-wrap: balance;
}
.core-headline em { font-style: italic; color: #9FC4E6; font-weight: 400; }
.core-trips {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--accent-line); border: 1px solid var(--accent-line);
  margin-top: 80px;
}
.core-trip {
  background: var(--accent-mid); padding: 32px 28px 36px;
  display: flex; flex-direction: column; gap: 12px;
}
.core-trip .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: #6FA6D4; text-transform: uppercase; font-weight: 500;
}
.core-trip h4 {
  font-family: var(--font-display); font-size: 32px; font-weight: 500;
  color: #fff; margin: 0 0 8px; line-height: 1.05;
  letter-spacing: -0.02em;
}
.core-trip ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.core-trip li { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.5; }

/* ═══════════════════════════════════════════════
   CLIENT WALL · type-led
   ═══════════════════════════════════════════════ */
.clients-head { margin-bottom: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.clients-head h2 {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px);
  font-weight: 500; line-height: 1.0; letter-spacing: -0.025em; margin: 12px 0 0;
}
.clients-wall {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.clientmark {
  background: var(--paper-pure); padding: 36px 24px;
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; transition: background var(--dur-base);
}
.clientmark:hover { background: var(--accent-wash); }
.clientmark .name {
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  color: var(--ink); letter-spacing: -0.015em; line-height: 1.1; text-align: center;
}
.clientmark .name em { font-style: italic; color: var(--accent); font-weight: 400; }
.clientmark img { max-height: 38px; width: auto; opacity: 0.85; filter: grayscale(1); }
.clientmark:hover img { opacity: 1; filter: none; }

/* ═══════════════════════════════════════════════
   STANDARDS section (dark navy) · per user spec
   ═══════════════════════════════════════════════ */
.standards {
  background: linear-gradient(180deg, var(--accent-deep) 0%, var(--accent-mid) 100%);
  color: #fff; position: relative; overflow: hidden;
}
.standards-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 128px var(--gutter);
  position: relative; z-index: 2;
}
.standards-head { max-width: 880px; margin-bottom: 72px; }
.standards-head .eyebrow-mono { color: #6FA6D4; }
.standards-head .eyebrow-mono::before { background: #6FA6D4; }
.standards-head h2 {
  font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 64px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.025em;
  color: #fff; margin: 18px 0 24px;
}
.standards-head h2 em { font-style: italic; color: #9FC4E6; font-weight: 400; }
.standards-head p { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.75); margin: 0; max-width: 64ch; }

.standards-group { margin-top: 64px; }
.standards-group-title {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: baseline;
  padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--accent-line);
}
.standards-group-title .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: #6FA6D4; text-transform: uppercase;
}
.standards-group-title h3 {
  font-size: 22px; font-weight: 500; color: #fff; margin: 0;
  letter-spacing: -0.01em;
}
.standards-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.stcard {
  background: rgba(255,255,255,0.96); color: var(--ink);
  border: 0; border-radius: var(--r-1);
  padding: 24px 20px; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.45);
  opacity: 0.92;
  transition: opacity var(--dur-base), transform var(--dur-base);
}
.stcard:hover { opacity: 1; }
.stcard .mark {
  font-family: var(--font-display); font-size: 19px; font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.1; color: var(--ink);
}
.stcard .sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--graphite-2); margin-top: 4px;
}
.standards-caption {
  font-size: 13px; color: rgba(255,255,255,0.55); margin: 18px 0 0;
  line-height: 1.55; font-style: italic;
}

.standards-glow {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, #6FA6D4 50%, transparent 100%);
  margin: 72px 0; opacity: 0.4;
  box-shadow: 0 0 24px rgba(111,166,212,0.5);
}

.legal {
  font-size: 12px; color: rgba(255,255,255,0.5); margin: 48px 0 0;
  line-height: 1.55; max-width: 80ch;
}

.closing {
  margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--accent-line);
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.015em;
  color: #fff; max-width: 70ch;
}
.closing em { font-style: italic; color: #9FC4E6; font-weight: 400; }

/* ═══════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════ */
.contact-band {
  background: var(--paper-bone);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.contact-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 96px var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.contact-inner h2 {
  font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px);
  font-weight: 500; letter-spacing: -0.025em; line-height: 0.98;
  margin: 14px 0 24px;
}
.contact-inner h2 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.contact-inner p { font-size: 17px; color: var(--graphite); max-width: 50ch; margin: 0 0 32px; }
.contact-list {
  display: flex; flex-direction: column; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.contact-row {
  background: var(--paper-pure); padding: 20px 24px;
  display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: baseline;
}
.contact-row .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--graphite-2); text-transform: uppercase;
}
.contact-row .v { font-size: 15px; color: var(--ink); font-weight: 500; line-height: 1.45; }
.contact-row .v.mono { font-family: var(--font-mono); font-weight: 400; font-size: 14px; letter-spacing: 0.02em; }

/* ═══════════════════════════════════════════════
   FOOTER (dark navy)
   ═══════════════════════════════════════════════ */
.foot {
  background: var(--accent-deep); color: #fff;
  padding: 80px 0 28px;
}
.foot-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.foot-top {
  display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid var(--accent-line);
}
.foot h6 { color: #6FA6D4; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; margin: 0 0 16px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot a { color: #fff; border: 0; font-size: 14px; }
.foot a:hover { color: #9FC4E6; }
.foot-wordmark {
  font-family: var(--font-display); font-size: 44px; font-weight: 500;
  letter-spacing: -0.035em; color: #fff; line-height: 1; margin-bottom: 24px;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.foot-wordmark .dot { width: 7px; height: 7px; border-radius: 50%; background: #6FA6D4; display: inline-block; transform: translateY(-3px); }
.foot-p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; max-width: 360px; margin: 0 0 24px; }
.foot-stats {
  display: flex; gap: 24px; font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.5); letter-spacing: 0.1em; text-transform: uppercase;
}
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.45); letter-spacing: 0.08em; text-transform: uppercase;
}
.foot-bottom-right { display: flex; gap: 24px; }
.foot-bottom-right a { color: rgba(255,255,255,0.6); }
.foot-bottom-right a:hover { color: #9FC4E6; }

/* ═══════════════════════════════════════════════
   FIELD PRACTICE gallery — disciplines in the wild
   ═══════════════════════════════════════════════ */
.field-gallery {
  background: var(--paper-pure);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.field-gallery-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end; margin-bottom: 48px;
}
.field-gallery-head h2 {
  font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500; line-height: 1.0; letter-spacing: -0.025em; margin: 12px 0 0;
  color: var(--ink);
}
.field-gallery-head h2 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.field-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
.field-tile {
  background: var(--paper-pure);
  display: flex; flex-direction: column;
}
.field-tile .img {
  aspect-ratio: 4 / 3;
  background-color: var(--accent-deep);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  position: relative; overflow: hidden;
}
.field-tile .img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,22,39,0) 55%, rgba(6,22,39,0.55) 100%);
}
.field-tile .img .tag-num {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.9); text-transform: uppercase;
  background: rgba(6,22,39,0.45); padding: 4px 8px; border: 1px solid rgba(255,255,255,0.18);
}
.field-tile .meta {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--rule);
}
.field-tile .meta .k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--accent-2); text-transform: uppercase; font-weight: 500;
}
.field-tile .meta h5 {
  font-size: 18px; font-weight: 500; color: var(--ink);
  margin: 0; line-height: 1.22; letter-spacing: -0.01em;
}
.field-tile .meta p {
  font-size: 13.5px; color: var(--graphite); margin: 4px 0 0; line-height: 1.5;
}

/* ═══════════════════════════════════════════════
   INDUSTRIES feature banner — full-bleed photo
   ═══════════════════════════════════════════════ */
.industries-feature {
  position: relative; min-height: 360px;
  background-color: var(--accent-deep);
  background-image: url('assets/field/refinery.png');
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  display: flex; align-items: flex-end;
  overflow: hidden;
  border-top: 1px solid var(--accent-line);
}
.industries-feature::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,22,39,0.10) 0%, rgba(6,22,39,0.30) 55%, rgba(6,22,39,0.80) 100%);
}
.industries-feature-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--max-w); margin: 0 auto; padding: 36px var(--gutter);
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  color: #fff;
}
.industries-feature-inner .lhs {
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500; line-height: 1.15; letter-spacing: -0.015em;
  max-width: 32ch;
}
.industries-feature-inner .lhs em { font-style: italic; color: #9FC4E6; font-weight: 400; }
.industries-feature-inner .rhs {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.75); text-transform: uppercase; line-height: 1.5;
  text-align: right;
}

/* ═══════════════════════════════════════════════
   Standards · logo variant
   ═══════════════════════════════════════════════ */
.stcard.has-logo {
  padding: 14px 14px 16px; gap: 8px;
}
.stcard.has-logo .logo {
  max-height: 46px; max-width: 86%; width: auto; height: auto;
  object-fit: contain; display: block; margin: 0 auto;
  filter: saturate(0.95);
}
.stcard.has-logo .sub { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   MULTIPAGE EXTENSIONS · from plans/_design-system.md §1–§10
   ═══════════════════════════════════════════════════════════════════ */

/* §1 — Active nav state */
.nav-links a.is-active {
  color: var(--ink);
}
.nav-links a.is-active::after {
  width: 100%;
}

/* §2 — Breadcrumbs */
.crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite-2);
  padding: 24px 0 0;
  display: flex; gap: 8px; flex-wrap: wrap;
  border: 0;
}
.crumbs a {
  color: var(--graphite);
  border: 0;
  padding: 0;
}
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--graphite-3); }
.crumbs .here { color: var(--ink); }

/* §3 — Deep-page hero */
.page-hero {
  background: var(--paper-bone);
  border-bottom: 1px solid var(--rule);
  padding: 56px 0 64px;
}
.page-hero-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end;
}
.page-hero .eyebrow-mono { margin-bottom: 18px; }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 500; line-height: 0.98; letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--ink);
}
.page-hero h1 em { font-style: italic; color: var(--accent-2); font-weight: 400; }
.page-hero .lede {
  max-width: 56ch; margin: 0 0 28px;
}
.page-hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero-aside {
  display: grid; gap: 4px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; color: var(--graphite-2);
  text-transform: uppercase;
}
.page-hero-aside .k { color: var(--graphite); }
.page-hero-aside .v {
  color: var(--ink); font-family: var(--font-sans);
  text-transform: none; letter-spacing: 0; font-size: 15px;
}

/* §4 — Article template */
.article {
  max-width: 720px; margin: 0 auto; padding: 48px var(--gutter) 96px;
}
.article-meta {
  display: flex; gap: 16px; align-items: baseline;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; color: var(--graphite-2);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.article h1 {
  font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 500; line-height: 1.0; letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.article .lede {
  font-size: 21px; line-height: 1.55; color: var(--graphite);
  margin: 0 0 40px; max-width: 64ch;
  border-bottom: 1px solid var(--rule); padding-bottom: 40px;
}
.prose { color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.prose p { margin: 0 0 24px; }
.prose h2 {
  font-size: 28px; font-weight: 500; letter-spacing: -0.015em;
  margin: 48px 0 16px; line-height: 1.2;
}
.prose h3 {
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  margin: 36px 0 12px;
}
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  border-left: 2px solid var(--accent-2);
  padding: 6px 0 6px 24px; margin: 28px 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink); line-height: 1.4;
}
.prose figure { margin: 32px 0; }
.prose figcaption {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--graphite-2); margin-top: 8px;
}
.article-related {
  margin-top: 80px; padding-top: 32px;
  border-top: 1px solid var(--rule);
}

/* §5 — Form */
.form { display: grid; gap: 18px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--graphite);
  text-transform: uppercase;
}
.field input,
.field textarea,
.field select {
  font-family: var(--font-sans); font-size: 15px;
  padding: 12px 14px;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0; border-color: var(--accent-2);
}
.field textarea { min-height: 120px; resize: vertical; }
.field-error {
  color: var(--signal-crit); font-size: 12px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}
.field-help {
  font-size: 12px; color: var(--graphite-2);
}
.form .submit-row {
  display: flex; gap: 12px; align-items: center;
  margin-top: 8px;
}
.form-success,
.form-failure {
  padding: 20px 24px;
  font-family: var(--font-sans); font-size: 15px;
  line-height: 1.5;
}
.form-success {
  background: rgba(47, 107, 74, 0.08);
  border: 1px solid var(--signal-ok);
  color: var(--signal-ok);
}
.form-failure {
  background: rgba(168, 51, 31, 0.06);
  border: 1px solid var(--signal-crit);
  color: var(--signal-crit);
}
/* Honeypot — visually hidden but available to bots */
.honeypot { position: absolute; left: -10000px; height: 0; width: 0; opacity: 0; }

/* §6 — Sticky in-page TOC */
.layout-with-toc {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 64px; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
}
.toc {
  position: sticky; top: 96px; align-self: start;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em;
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}
.toc h6 {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 12px;
}
.toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.toc a {
  color: var(--graphite); border: 0;
  display: block; padding: 4px 0;
  font-size: 13px; line-height: 1.4;
}
.toc a:hover, .toc a.is-active { color: var(--ink); }

/* §7 — Detail-page sidebar */
.detail {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 64px; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
}
.detail-main { min-width: 0; }
.detail-aside {
  align-self: start; position: sticky; top: 96px;
  display: grid; gap: 32px;
}
.aside-block {
  padding: 24px;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
}
.aside-block h6 { margin: 0 0 12px; }
.aside-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.aside-block li { font-size: 14px; }
.aside-cta {
  background: var(--accent-deep);
  color: #fff; padding: 28px 24px;
}
.aside-cta h6 { color: #6FA6D4; }
.aside-cta p {
  color: rgba(255,255,255,0.78); font-size: 14px; margin: 0 0 16px;
}

/* §8 — Mega-menu */
.has-mega { position: relative; }
.megamenu {
  position: absolute; top: 100%; left: 0;
  background: var(--paper-pure);
  border: 1px solid var(--rule);
  border-top: 0;
  min-width: 320px;
  padding: 16px 0;
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  box-shadow: var(--shadow-3);
}
.has-mega:hover .megamenu,
.has-mega:focus-within .megamenu,
.has-mega.is-open .megamenu {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.megamenu a {
  display: block; padding: 8px 20px;
  border: 0; font-size: 14px;
  color: var(--graphite); line-height: 1.35;
}
.megamenu a:hover { background: var(--accent-wash); color: var(--ink); }
.megamenu .group {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.megamenu .group:last-child { border-bottom: 0; }
.megamenu .group-title {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--graphite-2); padding: 6px 20px;
}
.megamenu.wide {
  min-width: 560px;
  display: grid; grid-template-columns: 1fr 1fr;
}

/* §9 — Locale toggle (functional) */
.lang a {
  color: var(--graphite-2); border: 0;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.10em;
  padding: 2px 6px;
}
.lang a.on {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
}

/* Accessibility — skip link.
   Visually hidden until it receives keyboard focus.
   Without this rule it inherits the base <a> border-bottom and shows as a regular link. */
.skip-link {
  position: absolute;
  left: 8px; top: 8px;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  background: var(--ink); color: var(--paper-pure);
  padding: 8px 14px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 0;
  z-index: 100;
}
.skip-link:focus {
  width: auto; height: auto;
  clip: auto;
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

/* Mega-menu hover-bridge — a transparent pseudo-element extending up from the dropdown
   so the cursor can move from the parent link into the dropdown without losing :hover. */
.has-mega .megamenu::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0; height: 12px;
  background: transparent;
}

/* Machine-translation notice — quiet, dismissible banner shown below the nav on non-EN pages only. */
.mt-notice {
  display: flex; align-items: center; gap: 16px;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--rule);
  padding: 9px var(--gutter);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--graphite); letter-spacing: 0.02em;
  position: sticky; top: 0; z-index: 49;
}
.mt-notice > span { flex: 1; min-width: 0; }
.mt-notice a {
  color: var(--accent); border-bottom: 1px solid var(--accent);
  white-space: nowrap;
}
.mt-notice a:hover { color: var(--accent-2); border-color: var(--accent-2); }
.mt-notice-x {
  background: transparent; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--graphite-2);
  padding: 0 4px; flex: 0 0 auto;
}
.mt-notice-x:hover { color: var(--ink); }
.mt-notice.is-dismissed { display: none; }

/* §10 — Locale fallback tooltip (driven by JS, see site.js) */
.lang-tip {
  position: absolute;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  white-space: nowrap;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.4);
}

/* Mobile drawer (driven by JS, see site.js) */
.nav-burger {
  display: none;
  background: transparent; border: 0; padding: 8px;
  color: var(--ink); cursor: pointer;
}
.nav-burger span {
  display: block; width: 22px; height: 1px; background: var(--ink); margin: 5px 0;
  transition: transform var(--dur-base) var(--ease-standard);
}
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--paper-pure);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-standard);
  z-index: 100;
  padding: 32px 28px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer a {
  font-size: 17px; color: var(--ink); border: 0;
  padding: 8px 0; border-bottom: 1px solid var(--rule-soft);
}
.nav-drawer-close {
  align-self: flex-end;
  background: transparent; border: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--graphite); text-transform: uppercase; cursor: pointer;
  padding: 8px;
}
.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(6,22,39,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
  z-index: 90;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ═══════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .svc-grid, .industries, .standards-cards { grid-template-columns: repeat(3, 1fr); }
  .svc:nth-child(3n) { border-right: 1px solid var(--rule); }
  .why-grid, .proc-grid, .ai-diff-grid, .core-trips, .clients-wall, .field-grid { grid-template-columns: repeat(2, 1fr); }
  .why-cell, .proc-col, .ai-cell { border-bottom: 1px solid var(--accent-line); padding-bottom: 32px; }
  .ai-cell, .proc-col { border-bottom: 1px solid var(--rule); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .field-gallery-head { grid-template-columns: 1fr; gap: 24px; }

  /* Multipage extensions */
  .layout-with-toc { grid-template-columns: 1fr; }
  .toc { position: static; border-left: 0; padding-left: 0; }
  .detail { grid-template-columns: 1fr; }
  .detail-aside { position: static; }
  .megamenu.wide { grid-template-columns: 1fr; min-width: 320px; }
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; flex-direction: column; }
  .hero { min-height: 80vh; }
  .hero-content { min-height: 80vh; padding-top: 48px; padding-bottom: 48px; }
  .hero-meta-strip { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .position-band-inner { grid-template-columns: 1fr; text-align: left; }
  .position-band .stmt, .position-band .creds { text-align: left; }
  .div-header, .assets-head, .clients-head, .contact-inner, .eng-hero, .foot-top, .standards-group-title, .field-gallery-head { grid-template-columns: 1fr; gap: 24px; }
  .svc-grid, .industries, .standards-cards, .clients-wall, .assets-grid, .why-grid, .proc-grid, .ai-diff-grid, .core-trips, .steps, .field-grid { grid-template-columns: 1fr; }
  .svc { border-right: 0; }
  .eng-hero-text { padding: 64px 24px; }
  .industry { border-right: 0; }
  .core-headline { font-size: 36px; }
  .industries-feature { min-height: 260px; }
  .industries-feature-inner { grid-template-columns: 1fr; gap: 16px; }
  .industries-feature-inner .rhs { text-align: left; }

  /* Multipage extensions */
  .page-hero-inner { grid-template-columns: 1fr; gap: 16px; }
}