@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700&display=swap');

:root {
  --navy: #012d5a;
  --ink: #25282a;
  --red: #da3d46;
  --blue: #3a8ba1;
  --pale-blue: #aabde6;
  --line: #e2e6e7;
  --paper: #fff;
  --wash: #f5f5f5;
  --muted: #666;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #dfe1e3; color: var(--ink); font-family: 'IBM Plex Sans', sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
.site { width: min(1280px, calc(100% - 48px)); margin: 52px auto; background: var(--paper); box-shadow: 0 24px 80px rgb(1 45 90 / 22%); }
.utility { display: flex; justify-content: space-between; gap: 20px; padding: 12px 40px; border-bottom: 1px solid var(--navy); color: var(--navy); font: 500 12px/1.2 'IBM Plex Mono', monospace; letter-spacing: .04em; }
.site-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 26px 40px 18px; border-bottom: 3px solid var(--red); }
.wordmark { display: grid; gap: 7px; }
.wordmark img { width: 145px; height: auto; display: block; }
.strapline, .eyebrow, .label { color: var(--muted); font: 500 11px/1.3 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.site-nav { display: flex; flex-wrap: wrap; gap: 22px; color: var(--navy); font: 600 13px/1.2 'IBM Plex Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.site-nav a[aria-current='page'], .site-nav a:hover { color: var(--red); }
.concept-label { position: absolute; top: -40px; left: 0; display: flex; align-items: baseline; gap: 10px; color: var(--muted); font: 500 13px/1.2 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.concept-label b { display: inline-block; padding: 5px 12px; background: var(--navy); color: #fff; font-size: 15px; letter-spacing: .05em; }
.frame { position: relative; }
.hero-heading, h1, h2, h3 { margin: 0; font-family: 'Saira Condensed', sans-serif; line-height: .98; }
.hero-heading, h1 { font-size: clamp(48px, 6vw, 70px); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(34px, 4vw, 48px); font-weight: 700; }
h3 { font-size: 26px; font-weight: 600; }
.hero-copy { max-width: 57ch; margin: 20px 0 27px; color: #444; }
.button-row { display: flex; flex-wrap: wrap; gap: 0; width: fit-content; border: 1px solid var(--navy); color: var(--navy); font: 600 13px/1 'IBM Plex Mono', monospace; letter-spacing: .04em; }
.button-row a { padding: 15px 21px; }
.button-row a:first-child { background: var(--navy); color: #fff; }
.button-row a + a { border-left: 1px solid var(--navy); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--navy); font-family: 'IBM Plex Mono', monospace; }
.stat { padding: 17px 22px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat b { color: var(--navy); font-size: 23px; }
.stat span { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
.product-index { padding: 44px 40px 12px; }
.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding-bottom: 9px; border-bottom: 1px solid var(--navy); color: var(--muted); font: 500 12px/1.2 'IBM Plex Mono', monospace; letter-spacing: .1em; }
.index-list { margin: 0; padding: 0; list-style: none; }
.index-list a { display: grid; grid-template-columns: 58px 1fr 2.1fr 30px; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.index-list li:last-child a { border-bottom-color: var(--navy); }
.index-number { color: var(--red); font: 500 13px 'IBM Plex Mono', monospace; }
.index-list strong { font: 600 21px/.95 'Saira Condensed', sans-serif; }
.index-list small { color: #444; font-size: 13px; line-height: 1.45; }
.index-arrow { color: var(--navy); text-align: right; font: 600 19px 'IBM Plex Mono', monospace; }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.proof-grid > section { padding: 40px; }
.proof-grid > section + section { border-left: 1px solid var(--line); }
.proof-list { margin: 20px 0 0; color: var(--navy); font: 500 14px/2.1 'IBM Plex Mono', monospace; }
.outcome-list { margin: 18px 0 0; padding: 0; list-style: none; font-family: 'IBM Plex Mono', monospace; }
.outcome-list li { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px dashed #cdd3d5; font-size: 14px; }
.outcome-list b { color: var(--blue); white-space: nowrap; }
.quote { padding: 38px 40px; border-top: 1px solid var(--navy); border-bottom: 3px solid var(--red); background: var(--wash); }
.quote p { max-width: 900px; margin: 0; font: 500 29px/1.28 'Saira Condensed', sans-serif; }
.quote cite { display: block; margin-top: 15px; color: var(--muted); font: 500 12px 'IBM Plex Mono', monospace; font-style: normal; letter-spacing: .06em; }
.cta { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 48px 40px; border-top: 4px solid var(--red); background: var(--navy); color: #fff; }
.cta h2 { font-size: 40px; }
.cta p { max-width: 55ch; margin: 8px 0 0; color: #c3cede; }
.cta-contact { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.cta-contact b { display: block; font-size: 27px; }
.cta-contact span { display: block; margin: 4px 0 16px; color: var(--pale-blue); font-size: 13px; }
.cta-contact a:last-child { display: inline-block; padding: 13px 22px; background: #fff; color: var(--navy); font: 600 13px 'IBM Plex Sans', sans-serif; }
.site-footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: 34px 40px; font: 400 12.5px/1.7 'IBM Plex Mono', monospace; }
.site-footer strong { display: block; margin-bottom: 8px; color: var(--navy); font: 700 24px/.9 'Saira Condensed', sans-serif; }
.site-footer .label { color: #999; }

/* 2A: Evolved zig-zag */
.zigzag-hero { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 458px; }
.zigzag-copy { display: flex; flex-direction: column; justify-content: center; padding: 55px 40px; border-right: 1px solid var(--line); }
.zigzag-photo { position: relative; min-height: 340px; background: var(--navy); overflow: hidden; }
.zigzag-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.photo-tag { position: absolute; right: 0; bottom: 0; max-width: 310px; padding: 19px 22px; border-top: 4px solid var(--red); background: var(--navy); color: #fff; }
.photo-tag span { color: var(--pale-blue); font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; }
.photo-tag strong { display: block; margin: 4px 0; font: 700 28px/.95 'Saira Condensed', sans-serif; }
.photo-tag small { color: #c3cede; font: 500 12px 'IBM Plex Mono', monospace; }
.zigzag-services { padding: 56px 40px; }
.zigzag-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 280px; border-top: 1px solid var(--line); }
.zigzag-row:last-child { border-bottom: 1px solid var(--navy); }
.zigzag-row:nth-child(even) .zigzag-image { order: 2; }
.zigzag-row:nth-child(even) .zigzag-text { order: 1; }
.zigzag-image { min-height: 260px; }
.zigzag-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.78) contrast(1.05); }
.zigzag-text { display: flex; flex-direction: column; justify-content: center; padding: 38px 54px; background: var(--wash); }
.zigzag-text .index-number { margin-bottom: 12px; }
.zigzag-text p { max-width: 48ch; margin: 14px 0 0; color: #444; }

/* 2B: Evolved media rail */
.rail-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr); }
.rail-copy { padding: 54px 40px 46px; }
.media-rail { display: grid; grid-template-rows: 1fr auto; border-left: 1px solid var(--line); background: var(--navy); }
.media-rail img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; opacity: .8; }
.media-rail-copy { padding: 20px 22px; border-top: 4px solid var(--red); color: #fff; }
.media-rail-copy p { margin: 5px 0 0; color: #c3cede; font: 500 12px/1.5 'IBM Plex Mono', monospace; }
.rail-sections { display: grid; grid-template-columns: 1.08fr .92fr; }
.rail-copy-block { padding: 48px 40px; }
.rail-copy-block p { max-width: 54ch; color: #444; }
.rail-stack { display: grid; grid-template-rows: 220px 220px; border-left: 1px solid var(--line); }
.rail-stack figure { position: relative; margin: 0; overflow: hidden; }
.rail-stack figure + figure { border-top: 1px solid var(--line); }
.rail-stack img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.7); }
.rail-stack figcaption { position: absolute; bottom: 0; left: 0; padding: 8px 12px; background: var(--navy); color: #fff; font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; }

/* 1C: spec sheet */
.spec-hero { display: grid; grid-template-columns: 1.3fr 1fr; }
.spec-copy { padding: 52px 40px 46px; border-right: 1px solid var(--line); }
.spec-copy .eyebrow { color: var(--blue); }
.spec-product { display: grid; grid-template-rows: 1fr auto; min-height: 330px; background: repeating-linear-gradient(135deg, #eef1f4, #eef1f4 13px, #e5e9ee 13px, #e5e9ee 26px); }
.spec-product img { width: 100%; height: 100%; min-height: 205px; object-fit: cover; mix-blend-mode: multiply; filter: grayscale(.3) contrast(1.08); }
.spec-detail { padding: 18px 22px; border-top: 4px solid var(--red); background: var(--navy); color: #fff; }
.spec-detail b { display: block; margin: 4px 0; font: 700 27px/.95 'Saira Condensed', sans-serif; }
.spec-detail small { color: #c3cede; font: 500 12px 'IBM Plex Mono', monospace; }

/* Landing page */
.overview { width: min(1120px, calc(100% - 48px)); margin: 52px auto; background: #fff; box-shadow: 0 24px 80px rgb(1 45 90 / 22%); }
.overview-hero { padding: 64px 56px 48px; border-bottom: 4px solid var(--red); background: var(--navy); color: #fff; }
.overview-hero p { max-width: 63ch; margin: 18px 0 0; color: #c3cede; }
.overview-list { padding: 28px 56px 48px; }
.option-link { display: grid; grid-template-columns: 70px 1fr 180px 38px; gap: 24px; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--line); }
.option-link:first-child { border-top: 1px solid var(--navy); }
.option-link .number { color: var(--red); font: 600 25px 'IBM Plex Mono', monospace; }
.option-link strong { display: block; color: var(--ink); font: 700 32px/.95 'Saira Condensed', sans-serif; }
.option-link span { color: #444; font-size: 14px; }
.option-link img { width: 180px; height: 92px; object-fit: cover; filter: saturate(.75); }
.option-link .arrow { color: var(--navy); text-align: right; font: 600 25px 'IBM Plex Mono', monospace; }

@media (max-width: 800px) {
  .site, .overview { width: min(100%, calc(100% - 24px)); margin: 38px auto; }
  .utility { padding: 12px 20px; }
  .utility span:last-child { display: none; }
  .site-header { display: block; padding: 22px 20px 18px; }
  .site-nav { margin-top: 20px; gap: 14px; font-size: 11px; }
  .concept-label { top: -30px; font-size: 10px; }
  .concept-label b { padding: 4px 8px; font-size: 12px; }
  .zigzag-hero, .rail-hero, .spec-hero, .rail-sections, .proof-grid, .zigzag-row { grid-template-columns: 1fr; }
  .zigzag-copy, .rail-copy, .spec-copy { padding: 40px 22px; border-right: 0; }
  .media-rail, .proof-grid > section + section { border-left: 0; border-top: 1px solid var(--line); }
  .zigzag-row:nth-child(even) .zigzag-image, .zigzag-row:nth-child(even) .zigzag-text { order: initial; }
  .zigzag-text { padding: 34px 22px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .product-index, .zigzag-services, .rail-copy-block { padding: 36px 22px; }
  .section-head span:last-child { display: none; }
  .index-list a { grid-template-columns: 34px 1fr 22px; gap: 10px; }
  .index-list small { display: none; }
  .proof-grid > section, .quote, .cta, .site-footer { padding: 32px 22px; }
  .cta { display: block; }
  .cta-contact { margin-top: 28px; text-align: left; }
  .site-footer { grid-template-columns: 1fr; gap: 24px; }
  .overview-hero, .overview-list { padding: 44px 24px; }
  .option-link { grid-template-columns: 46px 1fr 24px; gap: 13px; }
  .option-link img { display: none; }
}