:root {
  --ink: #12252a;
  --ink-soft: #52656a;
  --paper: #fffdfa;
  --soft: #f2f5f3;
  --deep: #0e2830;
  --deep-2: #123a44;
  --accent: #b8d5cc;
  --line: rgba(18, 37, 42, .13);
  --white: #ffffff;
  --max: 1180px;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  padding: 12px max(24px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  background: rgba(255, 253, 250, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--deep); color: white; font-weight: 800; }
.nav { display: flex; gap: 26px; }
.nav a { text-decoration: none; font-size: .94rem; color: var(--ink-soft); }
.site-header > .button { justify-self: end; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--deep);
  border-radius: 999px;
  background: var(--deep);
  color: white;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-1px); background: var(--deep-2); }
.button-small { min-height: 42px; padding-inline: 18px; font-size: .9rem; }
.button-light { background: white; color: var(--deep); border-color: white; }
.button-light:hover { background: #eef6f3; }
.text-link { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 650; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link.strong { margin-top: 8px; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 670px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 77% 26%, rgba(184,213,204,.44), transparent 27%),
    radial-gradient(circle at 82% 68%, rgba(117,173,172,.24), transparent 25%),
    linear-gradient(120deg, #f8f5ef 0%, #eef5f2 60%, #d9e9e4 100%);
}
.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 70px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(14,40,48,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 85px rgba(255,255,255,.18), 0 0 0 165px rgba(14,40,48,.035);
}
.hero-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(14,40,48,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(14,40,48,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to right, black, transparent 85%); }
.hero-content { position: relative; z-index: 2; padding-block: 96px; }
.hero-content > * { max-width: 730px; }
.eyebrow { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 800; color: #426d70; }
.eyebrow-light { color: #aed1c8; }
h1, h2, h3 { margin-top: 0; line-height: 1.08; letter-spacing: -.035em; }
h1 { margin-bottom: 24px; font-size: clamp(3.4rem, 7vw, 6.8rem); max-width: 800px; }
h2 { margin-bottom: 20px; font-size: clamp(2.1rem, 4.2vw, 4rem); }
h3 { margin-bottom: 12px; font-size: 1.28rem; }
.hero-copy { margin: 0; max-width: 700px; font-size: clamp(1.12rem, 2vw, 1.38rem); color: #3a5358; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; }

.section { padding: 108px 0; }
.section-soft { background: var(--soft); }
.section-dark { background: var(--deep); color: white; }
.section .container > h2 { max-width: 760px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.card { min-height: 268px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.6); }
.card p { margin: 0; color: var(--ink-soft); }
.icon { width: 46px; height: 46px; margin-bottom: 32px; display: grid; place-items: center; border-radius: 13px; background: #e6f0ed; color: var(--deep); font-weight: 800; font-size: 1.05rem; }

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card-link:hover { transform: translateY(-3px); border-color: rgba(18,37,42,.28); box-shadow: 0 16px 40px rgba(18,37,42,.08); }
.card-arrow { display: inline-block; margin-top: 22px; font-size: .9rem; font-weight: 750; color: var(--card-accent, #426d70); }
.service-card { background: var(--card-bg); border-color: rgba(18,37,42,.11); }
.service-card .icon { background: var(--card-icon); color: var(--card-accent); }
.card-architecture { --card-bg: #f5f1e8; --card-icon: #e8ddc7; --card-accent: #846d47; }
.card-regulatory { --card-bg: #f1f3fa; --card-icon: #dde3f3; --card-accent: #6473a3; }
.card-leadership { --card-bg: #faf1ee; --card-icon: #efdcd6; --card-accent: #986559; }
.card-software { --card-bg: #eef7f6; --card-icon: #d5e9e7; --card-accent: #4e7d80; }
.card-mechanical { --card-bg: #f1f5ee; --card-icon: #dfe8da; --card-accent: #657d60; }
.card-manufacturing { --card-bg: #f8f5e9; --card-icon: #ece4c8; --card-accent: #85763d; }

.split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 72px; align-items: center; }
.split p:not(.eyebrow) { max-width: 620px; color: #d2dedd; font-size: 1.08rem; }
.split .button { margin-top: 18px; }
.visual-panel { position: relative; min-height: 440px; overflow: hidden; border-radius: 26px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg, #1c5660, #0a2027 70%); }
.visual-diagram { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.visual-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 46px 46px; }
.visual-chip { position: absolute; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.92); color: var(--deep); font-size: .72rem; font-weight: 800; letter-spacing: .1em; box-shadow: 0 18px 60px rgba(0,0,0,.18); }
.chip-a { left: 12%; top: 18%; }.chip-b { right: 13%; top: 48%; }.chip-c { left: 33%; bottom: 14%; }
.visual-line { position: absolute; height: 2px; transform-origin: left center; background: rgba(184,213,204,.9); }
.line-a { width: 48%; left: 23%; top: 31%; transform: rotate(28deg); }.line-b { width: 40%; left: 39%; top: 66%; transform: rotate(-34deg); }
.visual-node { position: absolute; width: 20px; height: 20px; border: 5px solid #cae5de; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 10px rgba(202,229,222,.1); }
.node-a { left: 23%; top: 30%; }.node-b { right: 24%; top: 55%; }.node-c { left: 43%; bottom: 22%; }

.leadership-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 76px; align-items: center; }
.leadership-grid > div:last-child p:not(.eyebrow) { max-width: 680px; color: var(--ink-soft); font-size: 1.08rem; }
.portrait-panel { position: relative; aspect-ratio: 4/5; min-height: 480px; overflow: hidden; border-radius: 28px; background: radial-gradient(circle at 50% 42%, #eaf3f0 0 26%, #cfdfda 27% 45%, #a9c8c1 46% 60%, #143b43 61%); }
.portrait-ring { position: absolute; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }
.ring-one { width: 72%; aspect-ratio: 1; left: 14%; top: 14%; }.ring-two { width: 46%; aspect-ratio: 1; left: 27%; top: 27%; }
.portrait-core { position: absolute; inset: 0; display: grid; place-items: center; font-family: Georgia, serif; font-size: clamp(4rem, 9vw, 8rem); font-weight: 700; color: rgba(255,255,255,.94); letter-spacing: -.08em; }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.quote { margin: 0; padding: 30px; border-radius: var(--radius); background: white; border: 1px solid var(--line); }
.quote blockquote { margin: 0 0 26px; color: #3e5459; font-size: 1rem; }
.quote figcaption { font-weight: 800; }

.cta { padding: 74px 0; background: linear-gradient(120deg, #163f48, #0e2830); color: white; }
.cta-inner { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.cta h2 { margin-bottom: 0; max-width: 720px; font-size: clamp(2rem, 4vw, 3.6rem); }
.footer { padding: 28px 0; background: #091b20; color: #b7c4c5; font-size: .9rem; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; }
.footer a { color: inherit; }

/* Shared subpage system */
body.service-page { background: var(--page-bg); }
.service-page .site-header { background: rgba(255,255,255,.88); }
.service-page .eyebrow { color: var(--page-accent-dark); }
.service-page .subhero {
  background:
    radial-gradient(circle at 80% 22%, var(--page-glow), transparent 30%),
    linear-gradient(120deg, var(--page-hero-1) 0%, var(--page-hero-2) 62%, var(--page-hero-3) 100%);
  border-bottom: 1px solid rgba(18,37,42,.1);
}
.service-page .section:not(.section-dark) { background: var(--page-bg); }
.service-page .capability-card { background: rgba(255,255,255,.68); }
.service-page .capability-card .icon { background: var(--page-icon); color: var(--page-accent-dark); }
.service-page .section-dark { background: var(--page-deep); }
.service-page .cta { background: linear-gradient(120deg, var(--page-cta-1), var(--page-deep)); }

.architecture-page {
  --page-bg:#fbf8f1; --page-hero-1:#faf7f0; --page-hero-2:#f2eadb; --page-hero-3:#e5d6ba;
  --page-glow:rgba(196,166,111,.32); --page-icon:#eadfc9; --page-accent-dark:#7c6543;
  --page-deep:#343126; --page-cta-1:#5c523d;
}
.regulatory-page {
  --page-bg:#f7f8fc; --page-hero-1:#f6f7fc; --page-hero-2:#e9edf8; --page-hero-3:#d8dff1;
  --page-glow:rgba(111,128,185,.28); --page-icon:#e0e5f4; --page-accent-dark:#5d6a98;
  --page-deep:#28314f; --page-cta-1:#45517e;
}
.leadership-page {
  --page-bg:#fcf7f5; --page-hero-1:#fbf6f4; --page-hero-2:#f4e6e1; --page-hero-3:#e9d1c8;
  --page-glow:rgba(181,117,99,.25); --page-icon:#f0ddd7; --page-accent-dark:#8c5d52;
  --page-deep:#4a302b; --page-cta-1:#714b42;
}
.software-page {
  --page-bg:#f5faf9; --page-hero-1:#f1f8f7; --page-hero-2:#e4f1ef; --page-hero-3:#cfe4e2;
  --page-glow:rgba(145,195,196,.38); --page-icon:#d5e9e7; --page-accent-dark:#4e7d80;
  --page-deep:#12383c; --page-cta-1:#1b565b;
}
.mechanical-page {
  --page-bg:#f7faf5; --page-hero-1:#f5f8f2; --page-hero-2:#e8efe3; --page-hero-3:#d5e2cd;
  --page-glow:rgba(127,157,119,.30); --page-icon:#e0e9dc; --page-accent-dark:#62795d;
  --page-deep:#2c3b2a; --page-cta-1:#4b6246;
}
.manufacturing-page {
  --page-bg:#fcfaf4; --page-hero-1:#faf8f0; --page-hero-2:#f2eddd; --page-hero-3:#e5dcc0;
  --page-glow:rgba(177,157,89,.28); --page-icon:#eee7cf; --page-accent-dark:#7f703b;
  --page-deep:#3d3825; --page-cta-1:#5f5636;
}

.subhero-inner {
  min-height: 610px;
  padding-block: 84px;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 72px;
  align-items: center;
}
.subhero h1 { font-size: clamp(3.2rem, 6vw, 5.8rem); margin-bottom: 24px; }
.service-visual { display: grid; place-items: center; }
.service-diagram {
  width: min(100%, 500px);
  padding: 28px;
  border: 1px solid rgba(18,37,42,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  box-shadow: 0 30px 80px rgba(18,37,42,.11);
}
.diagram-title { margin-bottom: 18px; font-size: .72rem; font-weight: 800; letter-spacing: .15em; color: var(--page-accent-dark); }
.diagram-flow { display: grid; gap: 12px; }
.flow-item { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 0 18px; border-radius: 14px; background: rgba(255,255,255,.76); border: 1px solid rgba(18,37,42,.08); font-weight: 750; }
.flow-item::before { content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--page-accent-dark); box-shadow: 0 0 0 7px var(--page-icon); }
.flow-arrow { text-align: center; height: 12px; line-height: 12px; color: var(--page-accent-dark); font-weight: 800; }
.service-cards .card { min-height: 250px; }
.narrow-copy { max-width: 900px; }
.narrow-copy > p:not(.eyebrow) { color: #d2dedd; font-size: 1.15rem; max-width: 820px; }

.software-window { width: min(100%, 500px); border: 1px solid rgba(18,37,42,.18); border-radius: 22px; overflow: hidden; background: #0e2830; box-shadow: 0 30px 80px rgba(18,37,42,.14); }
.software-window-bar { height: 54px; display: flex; align-items: center; gap: 9px; padding: 0 20px; background: rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.1); }
.software-window-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.48); }
.software-code { padding: 34px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: clamp(.82rem, 1.4vw, 1rem); color: #b8d5cc; }
.software-code div { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.software-code div:last-child { border-bottom: 0; }
.software-code b { color: white; letter-spacing: .04em; }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  .cards, .quotes { grid-template-columns: 1fr 1fr; }
  .split, .leadership-grid { grid-template-columns: 1fr; gap: 48px; }
  .visual-panel { min-height: 390px; }
  .portrait-panel { max-width: 620px; width: 100%; aspect-ratio: 16/10; min-height: 0; }
  .subhero-inner { grid-template-columns: 1fr; gap: 44px; min-height: 0; }
  .service-visual { justify-items: start; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 30px, var(--max)); }
  .site-header { padding: 10px 15px; }
  .brand span:last-child { display: none; }
  .button-small { padding-inline: 14px; font-size: .84rem; }
  .hero { min-height: 620px; }
  .hero-content { padding-block: 76px; }
  h1 { font-size: clamp(3rem, 17vw, 5rem); }
  .section { padding: 78px 0; }
  .cards, .quotes { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .cta-inner { align-items: flex-start; flex-direction: column; }
  .visual-panel { min-height: 330px; }
}