:root {
  --ink: #13234a;
  --paper: #edf2fb;
  --paper-deep: #d9e3f3;
  --blue: #40599e;
  --blue-deep: #314578;
  --blue-soft: #c9d5ec;
  --red: #c53536;
  --red-soft: #f19a90;
  --line: rgba(19, 35, 74, .23);
  --muted: #506282;
  --card-scrim: linear-gradient(90deg, rgba(215,223,233,.98) 0 38%, rgba(215,223,233,.84) 59%, rgba(13,25,52,.25) 100%);
  --card-scrim-hover: linear-gradient(90deg, rgba(13,25,52,.91) 0 42%, rgba(13,25,52,.59) 72%, rgba(13,25,52,.2) 100%);
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.section-shell { width: min(100% - 48px, 1320px); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 99; padding: 10px 14px; background: var(--blue); color: var(--paper); }
.skip-link:focus { top: 16px; }
.eyebrow, .card-label { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.eyebrow { color: var(--muted); }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin-top: 0; font-weight: 500; letter-spacing: -.04em; }
h1 em, h2 em, h3 em { font-family: var(--serif); font-weight: 400; }

.site-header { width: min(100% - 48px, 1320px); min-height: 88px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 36px; height: 40px; flex: 0 0 36px; object-fit: contain; }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: 18px; letter-spacing: -.05em; }
.brand small { margin-top: 3px; font-size: 9px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .035em; white-space: nowrap; }
.primary-navigation { display: flex; align-items: center; gap: 24px; font-size: 13px; }
.primary-navigation > a:not(.nav-cta) { position: relative; }
.primary-navigation > a:not(.nav-cta)::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.primary-navigation > a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.primary-navigation > a[aria-current="page"]::after { background: var(--red-soft); transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: 10px 13px; background: var(--blue-deep); color: var(--paper); font-size: 12px; }
.nav-cta span { color: var(--red-soft); }
.menu-button { display: none; border: 0; background: transparent; color: var(--ink); }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, .96fr) minmax(340px, .89fr); gap: clamp(32px, 5vw, 76px); padding: clamp(48px, 5.4vw, 76px) 0 40px; }
.hero-copy { align-self: center; padding-bottom: 18px; }
.hero h1 { max-width: 9.3ch; margin: 14px 0 21px; font-size: clamp(54px, 6.3vw, 102px); line-height: .88; }
.hero-intro { max-width: 430px; margin: 0; color: var(--muted); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.42; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 28px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 12px 16px; border: 1px solid transparent; font-size: 13px; font-weight: 500; transition: background .2s, color .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--blue-deep); color: var(--paper); }
.button-dark span { color: var(--red-soft); font-size: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: 13px; font-weight: 500; }
.text-link span { color: var(--blue); font-size: 17px; line-height: .5; }
.hero-image { position: relative; height: clamp(405px, 53svh, 500px); min-height: 0; margin: 0; overflow: hidden; background: var(--blue-deep); }
.hero-slides, .hero-slides img { position: absolute; inset: 0; }
.hero-slides img { opacity: 0; transform: scale(1.025); transition: opacity 1.05s cubic-bezier(.22,.61,.36,1), transform 5.2s cubic-bezier(.22,.61,.36,1); }
.hero-slides img.is-active { opacity: 1; transform: scale(1); }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 35, 75, .66), rgba(64, 89, 158, .14) 55%); pointer-events: none; }
.hero-image figcaption { position: absolute; z-index: 2; right: 18px; bottom: 14px; left: 18px; display: flex; justify-content: space-between; color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: .045em; text-transform: uppercase; }
.hero-stamp { position: absolute; z-index: 3; right: -1px; top: 32px; display: grid; place-content: center; width: 72px; height: 78px; color: var(--paper); background: var(--red); font-family: var(--mono); font-size: 11px; line-height: 1.1; text-align: center; }
.hero-slider-controls { position: absolute; z-index: 3; top: 18px; left: 18px; display: flex; align-items: center; gap: 9px; color: var(--paper); }
.hero-slider-controls > button { width: 27px; height: 27px; border: 1px solid rgba(237,242,251,.75); background: rgba(13,25,52,.5); color: var(--paper); font-size: 16px; line-height: 1; }
.hero-slider-controls > button:hover { border-color: var(--red-soft); color: var(--red-soft); }
.hero-slider-dots { display: flex; gap: 5px; }
.hero-slider-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(237,242,251,.5); }
.hero-slider-dots button.is-active { background: var(--red-soft); transform: scale(1.2); }
.hero-slide-count { margin-left: 3px; font: 9px var(--mono); letter-spacing: .06em; }
.hero-rule { position: absolute; width: 38%; height: 7px; bottom: 0; left: 0; background: var(--red); }

.confidence-bar { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 19px max(24px, calc((100% - 1320px)/2)); background: var(--blue-deep); color: var(--paper); border-top: 3px solid var(--red); }
.confidence-bar p { margin: 0; font-size: 14px; }
.confidence-bar a { flex: none; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.confidence-bar a span { color: var(--red-soft); }

.capabilities { padding: clamp(58px, 7.5vw, 104px) 0; }
.section-header { display: grid; grid-template-columns: 1.05fr 1.05fr .75fr; gap: 32px; align-items: end; margin-bottom: 46px; }
.section-header h2 { max-width: 600px; margin: 0; font-size: clamp(45px, 5.1vw, 76px); line-height: .92; }
.section-header > p:not(.eyebrow) { max-width: 290px; margin: 0 0 4px; color: var(--muted); font-size: 15px; }
.capability-list { border-top: 1px solid var(--line); background: transparent; }
.capability-card { position: relative; display: grid; grid-template-columns: 9.5% 42% 48.5%; min-height: 490px; border-bottom: 1px solid var(--line); }
.card-number { padding: 21px 0 0; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.capability-content { display: flex; flex-direction: column; align-items: flex-start; padding: 78px 45px 42px 0; }
.capability-content .card-label { color: var(--blue-deep); }
.capability-content h3 { margin: 22px 0; font-size: clamp(38px, 4vw, 64px); line-height: .92; }
.capability-content > p:not(.card-label) { max-width: 410px; margin: 0; color: var(--muted); font-size: 15px; }
.capability-content ul { margin: 27px 0 30px; padding: 0; list-style: none; font-size: 13px; }
.capability-content li { padding: 5px 0; border-top: 1px solid var(--line); }
.capability-content li::before { content: "—"; color: var(--red); padding-right: 7px; }
.card-image { position: relative; overflow: hidden; }
.card-image::after { content: ""; position: absolute; inset: 0; background: rgba(49, 69, 120, .38); mix-blend-mode: multiply; }
.trading .card-image::after { background: rgba(197, 53, 54, .22); }

.statement-section { padding: clamp(58px, 7vw, 98px) 0 0; background: var(--blue-deep); color: var(--paper); }
.statement-inner .eyebrow { color: #bfd0f1; }
.statement-text { max-width: 1060px; margin: 62px 0 90px; font-size: clamp(45px, 5.9vw, 88px); line-height: .94; letter-spacing: -.05em; }
.statement-text em { color: #d6e1fb; font-family: var(--serif); font-weight: 400; }
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(242,240,234,.29); }
.principles-grid > div { position: relative; isolation: isolate; min-height: 205px; padding: 20px 20px 28px; overflow: hidden; border-right: 1px solid rgba(242,240,234,.29); background-color: var(--blue-deep); background-image: var(--asset-image); background-position: center; background-size: cover; }
.principles-grid > div::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(125deg, rgba(13,25,52,.94), rgba(13,25,52,.75)); }
.principles-grid > div > * { position: relative; z-index: 1; }
.principles-grid > div:last-child { border-right: 0; }
.principles-grid span { color: var(--red-soft); font-family: var(--mono); font-size: 11px; }
.principles-grid h3 { margin: 44px 0 8px; font-size: 21px; letter-spacing: -.03em; }
.principles-grid p { max-width: 210px; margin: 0; color: #ced9ef; font-size: 13px; }

.references { padding: clamp(60px, 7.5vw, 104px) 0; }
.section-header.narrow { grid-template-columns: 1.05fr 1.5fr; }
.reference-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 54px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.reference-grid span { min-height: 125px; display: grid; align-content: center; padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.4vw, 20px); font-weight: 500; letter-spacing: -.025em; }
.reference-grid span:nth-child(2n) { background: var(--blue-soft); }
.client-logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 54px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.client-logo-card { min-height: 202px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; background: rgba(237,242,251,.56); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.client-logo-card:nth-child(2) { background: #c6d1df; }
.client-logo-card img { width: min(100%, 220px); height: 86px; object-fit: contain; object-position: left center; }
.client-logo-card p { margin: 0; color: var(--muted); font: 11px var(--mono); line-height: 1.35; text-transform: uppercase; }
.reference-roster { margin-top: 0; padding: 29px 0 0; border-top: 3px solid var(--red); }
.reference-roster ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.reference-roster li { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.reference-roster li.reference-more { align-self: center; padding: 10px 0 0; border-bottom: 0; color: var(--muted); font-size: 14px; line-height: 1; opacity: .78; }
.reference-more em { font-family: var(--serif); font-weight: 400; }

.image-break { position: relative; height: min(63vw, 680px); overflow: hidden; background: var(--blue-deep); }
.image-break img { filter: grayscale(1) contrast(1.13); }
.image-break::after { content: ""; position: absolute; inset: 0; background: rgba(49, 69, 120, .46); mix-blend-mode: multiply; }
.image-break-caption { position: absolute; z-index: 1; bottom: 21px; left: 50%; width: min(100% - 48px, 1320px); transform: translateX(-50%); display: flex; justify-content: space-between; color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

.contact { display: grid; grid-template-columns: .98fr 1.02fr; gap: clamp(50px, 8vw, 118px); padding: clamp(60px, 7.5vw, 106px) 0; }
.contact-heading h2 { margin: 21px 0 27px; font-size: clamp(48px, 5.5vw, 82px); line-height: .91; }
.contact-heading > p:not(.eyebrow) { max-width: 425px; color: var(--muted); font-size: 16px; }
.office-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 560px; margin-top: 53px; }
.office-list > div { padding-top: 11px; border-top: 1px solid var(--ink); }
.office-list span { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.office-list p { margin: 11px 0 0; font-size: 13px; }
.contact-map { margin-top: 38px; border-top: 3px solid var(--red); background: var(--blue-deep); color: var(--paper); }
.contact-map-bar { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 17px 18px 14px; border-bottom: 1px solid rgba(237,242,251,.27); }
.contact-map-bar .eyebrow { margin: 0; color: #b9cae9; font-size: 9px; }
.contact-map-bar h3 { margin: 5px 0 0; font-size: 24px; line-height: .95; letter-spacing: -.045em; }
.contact-map-bar a { flex: none; color: #dce6f8; border-bottom: 1px solid #dce6f8; padding-bottom: 2px; font-size: 11px; font-weight: 600; }
.contact-map-bar a span { color: var(--red-soft); font-size: 15px; }
.map-switch { display: flex; border-bottom: 1px solid rgba(237,242,251,.27); }
.map-switch button { flex: 1; padding: 10px 14px; border: 0; border-right: 1px solid rgba(237,242,251,.27); background: transparent; color: #c8d7f0; cursor: pointer; font: 10px var(--mono); letter-spacing: .045em; text-align: left; text-transform: uppercase; }
.map-switch button:last-child { border-right: 0; }
.map-switch button:hover, .map-switch button:focus-visible { background: rgba(237,242,251,.08); color: var(--paper); outline: 0; }
.map-switch button.is-active { color: var(--paper); box-shadow: inset 0 -3px 0 var(--red); }
.contact-map-frame { position: relative; height: 210px; overflow: hidden; background: #90a8c4; }
.contact-map-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(49,69,120,.36), rgba(13,25,52,.1)); mix-blend-mode: multiply; }
.contact-map-frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.53) contrast(1.08); }
.contact-form { padding: 27px 30px 29px; align-self: start; background: var(--paper-deep); }
.form-intro { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 29px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.form-intro p { margin: 0; font-weight: 600; }
.form-intro span { color: var(--muted); font-size: 11px; }
.contact-form label { display: block; margin-top: 19px; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin-top: 7px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; color: var(--ink); background: transparent; font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom: 2px solid var(--blue); }
.contact-form .button { width: 100%; margin-top: 29px; }
.form-status { min-height: 1.2em; margin: 14px 0 0; color: var(--blue-deep); font-size: 12px; }
.form-contact { margin: 11px 0 0; color: var(--muted); font-size: clamp(8.5px, 2.7vw, 11px); white-space: nowrap; }
.form-contact a { color: var(--ink); border-bottom: 1px solid var(--ink); }

.site-footer { background: var(--blue-footer, #365590); color: var(--paper); border-top: 4px solid var(--red); }
.footer-main { min-height: 207px; display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: 30px; }
.footer-brand { gap: 14px; }
.footer-brand .brand-mark { width: 52px; height: 56px; flex-basis: 52px; filter: none; }
.footer-brand strong { font-size: 26px; letter-spacing: -.06em; }
.footer-brand small { margin-top: 5px; color: #d5e0f6; font-size: 10px; letter-spacing: .075em; }
.footer-main > p { margin: 0; color: #d5e0f6; font-size: 14px; }
.footer-top { font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.footer-meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; padding-bottom: 16px; border-top: 1px solid rgba(237,242,251,.32); color: #d5e0f6; font-family: var(--mono); font-size: 10px; letter-spacing: .02em; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay { transition-delay: .12s; }

@media (max-width: 900px) {
  .section-shell, .site-header { width: min(100% - 36px, 1320px); }
  .site-header { min-height: 75px; }
  .primary-navigation { position: absolute; z-index: 10; top: 75px; left: 0; right: 0; display: grid; gap: 0; padding: 0 18px; background: var(--blue-nav, #2f4b83); color: var(--paper); border-bottom: 1px solid rgba(237,242,251,.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .primary-navigation.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .primary-navigation a { padding: 16px 0; border-top: 1px solid var(--line); }
  .primary-navigation .nav-cta { margin: 12px 0 18px; text-align: center; }
  .menu-button { display: inline-flex; align-items: center; gap: 10px; padding: 7px 0; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
  .menu-lines, .menu-lines::before { display: block; width: 18px; height: 1px; background: currentColor; }
  .menu-lines { position: relative; }
  .menu-lines::before { content: ""; position: absolute; top: -5px; }
  .hero { grid-template-columns: 1fr; padding-top: 58px; }
  .hero h1 { max-width: 10ch; }
  .hero-image { height: min(86vw, 500px); }
  .section-header { grid-template-columns: 1fr 1.5fr; }
  .section-header > p:not(.eyebrow) { grid-column: 2; }
  .capability-card { grid-template-columns: 11% 49% 40%; min-height: 440px; }
  .capability-content { padding-top: 55px; padding-right: 26px; }
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .principles-grid > div:nth-child(2) { border-right: 0; }
  .principles-grid > div:nth-child(3), .principles-grid > div:nth-child(4) { border-top: 1px solid rgba(242,240,234,.29); }
  .references .section-header.narrow { grid-template-columns: 1fr 1.5fr; }
  .reference-grid { grid-template-columns: 1fr 1fr; }
  .contact { gap: 55px; }
  .footer-main { grid-template-columns: 1fr auto; }
  .footer-main > p { display: none; }
}

@media (max-width: 620px) {
  .section-shell, .site-header { width: min(100% - 32px, 1320px); }
  .brand small { display: none; }
  .hero { gap: 32px; padding-top: 46px; padding-bottom: 34px; }
  .hero h1 { margin-top: 15px; font-size: clamp(55px, 17vw, 84px); }
  .hero-intro { font-size: 16px; }
  .hero-actions { gap: 19px; margin-top: 28px; }
  .hero-image { height: min(82vw, 390px); }
  .confidence-bar { align-items: flex-start; flex-direction: column; gap: 12px; padding: 16px; }
  .confidence-bar p { font-size: 13px; }
  .section-header, .references .section-header.narrow { grid-template-columns: 1fr; gap: 17px; margin-bottom: 42px; }
  .section-header > p:not(.eyebrow) { grid-column: auto; }
  .capability-card { grid-template-columns: 1fr; }
  .card-number { padding: 16px 0 0; }
  .capability-content { padding: 28px 0 37px; }
  .capability-content h3 { font-size: 46px; }
  .card-image { min-height: 285px; }
  .statement-text { margin: 42px 0 64px; font-size: 47px; }
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid > div, .principles-grid > div:not(:first-child) { min-height: auto; padding: 19px 0 25px; border-right: 0; border-top: 1px solid rgba(242,240,234,.29); }
  .principles-grid > div:first-child { border-top: 0; }
  .principles-grid h3 { margin-top: 20px; }
  .reference-grid, .client-logo-grid { grid-template-columns: 1fr; margin-top: 36px; }
  .reference-grid span { min-height: 83px; }
  .client-logo-card { min-height: 160px; padding: 22px; }
  .client-logo-card img { height: 70px; }
  .reference-roster { padding-top: 23px; }
  .reference-roster ul { grid-template-columns: 1fr; }
  .image-break { height: 94vw; }
  .contact { grid-template-columns: 1fr; gap: 50px; }
  .office-list { grid-template-columns: 1fr; gap: 19px; margin-top: 38px; }
  .contact-map { margin-top: 31px; }
  .contact-map-bar { align-items: flex-start; flex-direction: column; gap: 11px; }
  .contact-map-frame { height: 250px; }
  .contact-form { padding: 23px 20px; }
  .form-intro { align-items: flex-start; flex-direction: column; gap: 4px; }
  .footer-main { min-height: 170px; grid-template-columns: 1fr; gap: 26px; padding-top: 32px; padding-bottom: 28px; }
  .footer-brand { gap: 10px; }
  .footer-brand .brand-mark { width: 43px; height: 47px; flex-basis: 43px; }
  .footer-brand strong { font-size: 22px; }
  .footer-brand small { margin-top: 3px; font-size: 9px; letter-spacing: .045em; }
  .footer-top { justify-self: start; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

/* Product catalogue and project archive */
.subpage-body { background: var(--paper); }
.subpage-hero { min-height: 430px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 58px 0 64px; }
.subpage-hero h1 { max-width: 10.5ch; margin: 14px 0 20px; font-size: clamp(56px, 7vw, 106px); line-height: .88; }
.subpage-hero > p:not(.eyebrow) { max-width: 510px; margin: 0; color: var(--muted); font-size: 18px; }
.subpage-hero .button { margin-top: 26px; }
.catalogue-intro { display: flex; align-items: end; justify-content: space-between; gap: 42px; padding: 27px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.catalogue-intro p { max-width: 650px; margin: 0; font-size: clamp(20px, 2.35vw, 32px); line-height: 1.1; letter-spacing: -.04em; }
.catalogue-intro .text-link { flex: none; }
.supplier-brands { padding: clamp(56px, 6.5vw, 86px) 0; }
.supplier-brands .section-header { margin-bottom: 38px; }
.supplier-brand-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.supplier-brand-card { position: relative; min-height: 158px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px 16px 15px; overflow: hidden; border: 1px solid var(--line); background: rgba(237,242,251,.46); }
.supplier-brand-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 62%; height: 3px; background: var(--red); }
.supplier-brand-card:nth-child(5n + 2), .supplier-brand-card:nth-child(5n + 4) { background: #c6d1df; }
.supplier-brand-card.is-expansion { background: rgba(64, 89, 158, .12); }
.supplier-brand-card.is-expansion::after { width: 100%; }
.supplier-brand-identity { display: flex; align-items: center; width: 100%; height: 43px; padding: 8px 10px; background: rgba(13,25,52,.06); border: 1px solid rgba(13,25,52,.12); }
.supplier-brand-identity.is-placeholder { border-style: dashed; }
.supplier-brand-identity img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.supplier-logo-missing { color: var(--muted); font: 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.supplier-brand-wordmark { display: block; max-width: 100%; margin-top: auto; font-size: clamp(18px, 1.75vw, 26px); line-height: .9; letter-spacing: -.065em; overflow-wrap: anywhere; }
.supplier-brand-card span { color: var(--muted); font: 9px var(--mono); letter-spacing: .04em; line-height: 1.25; text-transform: uppercase; }
.product-index { padding: clamp(56px, 6.5vw, 88px) 0; }
.index-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.index-heading > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }
.product-index-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.product-index-card { position: relative; isolation: isolate; min-height: 200px; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; padding: 18px 28px 18px 18px; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; transition: background .22s, color .22s; }
.product-index-media { position: absolute; z-index: 0; inset: 0; margin: 0; background: var(--blue-deep); }
.product-index-media::after { content: ''; position: absolute; inset: 0; background: var(--card-scrim); transition: background .22s; }
.product-index-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.58) contrast(1.06); }
.product-index-media figcaption { position: absolute; z-index: 1; right: 13px; top: 12px; color: rgba(237,242,251,.72); font: 9px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.product-number, .product-index-card > div { position: relative; z-index: 1; }
.product-index-card > div { padding-bottom: 48px; }
.product-index-card:nth-child(4n + 2), .product-index-card:nth-child(4n + 3) { background: rgba(64, 89, 158, .08); }
.product-index-card:hover { background: var(--blue-deep); color: var(--paper); }
.product-index-card:hover .product-index-media::after { background: var(--card-scrim-hover); }
.product-index-card:hover .card-label, .product-index-card:hover p { color: #d3def4; }
.product-index-card:hover .product-card-link span { color: var(--red-soft); }
.product-index-card:focus-visible,
.project-format-grid a:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.product-number { color: var(--red); font-family: var(--mono); font-size: 11px; }
.product-index-card h2 { margin: 7px 0 10px; font-size: clamp(29px, 3.5vw, 45px); line-height: .96; }
.product-index-card p:not(.card-label) { max-width: 390px; margin: 0; color: var(--muted); font-size: 13px; }
.product-card-link { position: absolute; z-index: 1; bottom: 19px; left: 94px; font-size: 12px; font-weight: 600; }
.product-card-link span { color: var(--red); font-size: 17px; }
.enquiry-banner { padding: clamp(58px, 7vw, 96px) 0; background: var(--blue-deep); color: var(--paper); }
.enquiry-banner .eyebrow { color: #cedaf1; }
.enquiry-banner h2 { max-width: 820px; margin: 19px 0 30px; font-size: clamp(45px, 5.7vw, 82px); line-height: .91; }
.enquiry-banner h2 em { color: #dce6fb; }
.button-light { background: var(--paper); color: var(--blue-deep); }
.button-light span { color: var(--red); font-size: 17px; }
.enquiry-banner.compact { padding: 58px 0; }
.enquiry-banner.compact h2 { margin-bottom: 0; }
.enquiry-banner.compact .button { margin-top: 24px; }

.back-link { display: inline-block; margin-bottom: 52px; border-bottom: 1px solid var(--ink); padding-bottom: 3px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.category-hero { position: relative; isolation: isolate; min-height: 410px; padding: 58px 0 64px; overflow: hidden; }
.category-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--paper) 0 45%, rgba(215,223,233,.89) 60%, rgba(215,223,233,.24) 100%); }
.category-hero-media { position: absolute; z-index: -2; inset: 0; background: var(--blue-deep); }
.category-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; filter: saturate(.7) contrast(1.1); }
.category-hero .eyebrow { margin: 0; }
.category-hero h1 { max-width: 10ch; margin: 13px 0 17px; font-size: clamp(56px, 7.2vw, 108px); line-height: .86; }
.category-hero > p:not(.eyebrow) { max-width: 590px; margin: 0; color: var(--muted); font-size: clamp(18px, 2vw, 26px); line-height: 1.2; }
.category-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 30px; }
.category-tags span { padding: 6px 8px; color: var(--blue-deep); border: 1px solid var(--blue); font-family: var(--mono); font-size: 10px; letter-spacing: .035em; text-transform: uppercase; }
.category-groups { padding-bottom: clamp(62px, 7vw, 98px); }
.group-heading { display: grid; grid-template-columns: .86fr 1.14fr; gap: 55px; padding: 22px 0 40px; border-top: 1px solid var(--line); }
.group-heading > p:not(.eyebrow) { max-width: 480px; margin: 0; color: var(--muted); font-size: 14px; }
.category-group { display: grid; grid-template-columns: 12% 28% 1fr auto; gap: 25px; align-items: start; padding: 27px 0 33px; border-top: 1px solid var(--line); }
.category-group:last-child { border-bottom: 1px solid var(--line); }
.group-number { color: var(--red); font-family: var(--mono); font-size: 11px; }
.category-group h2 { margin: 0; font-size: clamp(23px, 2.5vw, 37px); line-height: .98; }
.category-group ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: -5px 0 0; padding: 0; list-style: none; }
.category-group li { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.category-group .text-link { align-self: end; white-space: nowrap; }
.related-categories { padding-bottom: clamp(54px, 6vw, 82px); }
.related-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 34vw); gap: 10px; overflow-x: auto; padding-bottom: 7px; border-top: 1px solid var(--line); scroll-padding-left: 1px; scroll-snap-type: x mandatory; scrollbar-color: var(--blue) transparent; scrollbar-width: thin; }
.related-grid a { position: relative; isolation: isolate; min-height: 230px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; align-items: start; padding: 18px; overflow: hidden; color: var(--ink); border: 1px solid var(--line); background: rgba(64, 89, 158, .08); scroll-snap-align: start; transition: color .22s; }
.related-card-media { position: absolute; z-index: 0; inset: 0; margin: 0; background: var(--blue-deep); }
.related-card-media::after { content: ''; position: absolute; inset: 0; background: var(--card-scrim); transition: background .22s; }
.related-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.58) contrast(1.06); }
.related-grid a > *:not(.related-card-media) { position: relative; z-index: 1; }
.related-grid a:hover { color: var(--paper); }
.related-grid a:hover .related-card-media::after { background: var(--card-scrim-hover); }
.related-grid span { color: var(--red); font-family: var(--mono); font-size: 10px; }
.related-grid strong { grid-column: 1 / -1; grid-row: 2; align-self: start; margin-top: 10px; font-size: 20px; letter-spacing: -.035em; }
.related-grid p { grid-column: 1 / -1; grid-row: 3; align-self: start; max-width: 30ch; margin: 9px 0 40px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.related-grid i { position: absolute; z-index: 1; bottom: 17px; left: 18px; color: var(--red); font-size: 17px; font-style: normal; }
.related-grid i::before { content: 'View category'; margin-right: 8px; font-size: 12px; font-style: normal; font-weight: 600; }
.related-grid a:hover i { color: var(--red-soft); }
.related-grid a:hover p { color: #d3def4; }

.projects-hero { min-height: 430px; background: linear-gradient(135deg, transparent 0 63%, var(--blue-soft) 63% 100%); }
.project-ethos { padding: 37px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--blue); color: var(--paper); }
.project-ethos > div { display: flex; align-items: end; justify-content: space-between; gap: 38px; }
.project-ethos p { max-width: 690px; margin: 0; font-size: clamp(24px, 3.1vw, 43px); line-height: 1.02; letter-spacing: -.04em; }
.project-ethos span { max-width: 260px; color: #d8e3f7; font-family: var(--mono); font-size: 10px; line-height: 1.5; text-transform: uppercase; }
.project-archive { padding: clamp(56px, 6.5vw, 88px) 0; }
.project-format-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.project-format-grid a { position: relative; isolation: isolate; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; min-height: 200px; padding: 18px 28px 18px 18px; overflow: hidden; color: var(--ink); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background-color: rgba(64, 89, 158, .08); background-image: var(--asset-image); background-position: center; background-size: cover; cursor: pointer; transition: background .22s, color .22s; }
.project-format-grid a::before { content: ''; position: absolute; z-index: 0; inset: 0; background: var(--card-scrim); transition: background .22s; }
.project-format-grid a::after { display: none; }
.project-format-grid a:hover { color: var(--paper); }
.project-format-grid a:hover::before { background: var(--card-scrim-hover); }
.project-format-grid a > * { position: relative; z-index: 1; }
.project-format-grid span { grid-column: 1; grid-row: 1; color: var(--red); font-family: var(--mono); font-size: 11px; }
.project-format-grid h2 { grid-column: 2; grid-row: 1; margin: 7px 0 10px; font-size: clamp(29px, 3.5vw, 45px); line-height: .96; }
.project-format-grid p { grid-column: 2; grid-row: 2; align-self: start; max-width: 390px; margin: 0; color: var(--muted); font-size: 13px; }
.project-format-grid a:hover p { color: #d3def4; }
.project-format-grid i { position: absolute; z-index: 1; bottom: 19px; left: 94px; color: var(--ink); font-size: 17px; font-style: normal; }
.project-format-grid i::before { content: 'View project'; margin-right: 8px; font-size: 12px; font-style: normal; font-weight: 600; }
.project-format-grid i { color: var(--red); }
.project-format-grid a:hover i { color: var(--red-soft); }
.project-archive-note { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding-bottom: clamp(58px, 7vw, 94px); }
.project-archive-note h2 { margin: 17px 0 0; font-size: clamp(43px, 4.7vw, 69px); line-height: .91; }
.project-archive-note ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.project-archive-note li { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.project-archive-note li span { color: var(--red); font-family: var(--mono); font-size: 11px; }
.project-archive-note li p { margin: 0; font-size: 14px; }
.project-dossier { padding: 58px 0 clamp(64px, 7vw, 94px); }
.project-dossier .eyebrow { margin: 0; }
.project-dossier h1 { max-width: 9ch; margin: 13px 0 17px; font-size: clamp(56px, 7.2vw, 108px); line-height: .87; }
.project-dossier > p:not(.eyebrow) { max-width: 600px; margin: 0; color: var(--muted); font-size: clamp(19px, 2.1vw, 28px); line-height: 1.2; }
.dossier-status { display: flex; align-items: baseline; gap: 13px; margin-top: 55px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dossier-status span { color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.dossier-status strong { font-size: 14px; }
.dossier-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.dossier-fields li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dossier-fields span { color: var(--red); font-family: var(--mono); font-size: 10px; }
.project-template { display: grid; grid-template-columns: .8fr 1.2fr; gap: 58px; padding-bottom: clamp(58px, 7vw, 96px); }
.project-template-intro > p:not(.eyebrow) { margin: 18px 0 0; color: var(--muted); font-size: 16px; }
.project-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.project-template-grid > div { min-height: 210px; padding: 18px 17px 18px 0; border-right: 1px solid var(--line); }
.project-template-grid > div:not(:first-child) { padding-left: 17px; }
.project-template-grid > div:last-child { border-right: 0; }
.project-template-grid span { color: var(--red); font-family: var(--mono); font-size: 10px; }
.project-template-grid h2 { margin: 45px 0 8px; font-size: 20px; }
.project-template-grid p { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 900px) { .category-group { grid-template-columns: 8% 27% 1fr; } .category-group .text-link { grid-column: 3; justify-self: start; } .category-group ul { grid-template-columns: 1fr; } .supplier-brand-grid { grid-template-columns: repeat(4, 1fr); } .project-archive-note, .project-template { gap: 46px; } }
@media (max-width: 620px) { .subpage-hero { min-height: 370px; padding: 46px 0 52px; } .subpage-hero h1, .category-hero h1, .project-dossier h1 { font-size: clamp(52px, 15vw, 76px); } .category-hero { min-height: 365px; padding-top: 46px; padding-bottom: 52px; } .project-dossier { padding-top: 46px; padding-bottom: 62px; } .catalogue-intro, .project-ethos > div { align-items: flex-start; flex-direction: column; gap: 16px; } .supplier-brands { padding-top: 58px; } .supplier-brand-grid { grid-template-columns: repeat(2, 1fr); } .supplier-brand-card { min-height: 112px; padding: 14px; } .supplier-brand-wordmark { min-height: 38px; font-size: 25px; } .product-index-grid, .project-format-grid { grid-template-columns: 1fr; } .product-index-card { min-height: 220px; padding-top: 20px; } .product-card-link { bottom: 16px; } .index-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .group-heading, .project-archive-note, .project-template { grid-template-columns: 1fr; gap: 20px; } .category-group { grid-template-columns: 38px 1fr; gap: 17px; } .category-group ul, .category-group .text-link { grid-column: 2; } .category-group .text-link { margin-top: -8px; } .related-grid { grid-template-columns: none; grid-auto-columns: minmax(265px, 86vw); } .projects-hero { background: linear-gradient(142deg, transparent 0 74%, var(--blue-soft) 74% 100%); } .project-format-grid a { min-height: 230px; } .project-format-grid h2 { margin-top: 34px; } .dossier-fields { grid-template-columns: 1fr; } .project-template-grid { grid-template-columns: 1fr; } .project-template-grid > div, .project-template-grid > div:not(:first-child) { min-height: auto; padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line); } .project-template-grid h2 { margin-top: 20px; } }

/* Heavier industrial contrast layer */
:root {
  --paper: #d7dfe9;
  --paper-deep: #bdc9d8;
  --blue-soft: #aebdd3;
  --blue-nav: #2f4b83;
  --blue-statement: #40599e;
  --blue-footer: #365590;
  --ink: #0d1934;
  --muted: #415574;
}
.site-header { width: 100%; position: sticky; top: 0; z-index: 20; margin-inline: 0; padding-inline: max(24px, calc((100% - 1320px) / 2)); background: var(--blue-nav); color: var(--paper); border-bottom: 0; box-shadow: none; transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease; }
.site-header::after { content: ''; position: absolute; z-index: 1; right: 50%; bottom: 0; width: 100vw; height: 1px; background: rgba(237,242,251,.28); transform: translateX(50%); pointer-events: none; }
.site-header.is-scrolled { background: rgba(47,75,131,.72); box-shadow: 0 10px 26px rgba(13,25,52,.12); backdrop-filter: blur(16px) saturate(122%); -webkit-backdrop-filter: blur(16px) saturate(122%); }
.site-header.is-scrolled::after { background: rgba(237,242,251,.38); }
.header-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
.site-header .brand small { color: #c6d4ee; }
.site-header .menu-button { color: var(--paper); }
.site-header .brand { gap: 14px; }
.site-header .brand-mark { width: 52px; height: 56px; flex-basis: 52px; }
.site-header .brand strong { font-size: 26px; letter-spacing: -.06em; }
.site-header .brand small { margin-top: 5px; font-size: 10px; letter-spacing: .075em; }
.site-header .primary-navigation > a:not(.nav-cta)::after { background: var(--red-soft); }
.site-header .nav-cta { background: var(--red); }
.hero { margin-top: 0; padding: clamp(48px, 5.4vw, 76px) clamp(22px, 4.6vw, 62px) 40px; background: var(--blue-deep); box-shadow: 0 0 0 100vmax var(--blue-deep); clip-path: inset(0 -100vmax); }
.hero-copy { color: var(--paper); }
.hero .eyebrow { color: #c4d2eb; }
.hero-intro { color: #d0dbef; }
.hero .text-link { border-color: #d7e2f8; }
.hero .text-link span { color: var(--red-soft); }
.hero .button-dark { background: var(--paper); color: var(--blue-deep); }
.hero .button-dark span { color: var(--red); }
.hero-image { box-shadow: 15px 15px 0 var(--blue); }
.hero-rule { left: clamp(22px, 4.6vw, 62px); background: var(--red); }
.capabilities { background: #c9d3df; padding-left: max(24px, calc((100% - 1320px)/2)); padding-right: max(24px, calc((100% - 1320px)/2)); }
.capabilities.section-shell { width: 100%; }
.capabilities .section-header { display: block; max-width: 760px; margin-bottom: 36px; }
.capabilities .section-header .eyebrow { margin: 0 0 17px; }
.capabilities .section-header h2 { max-width: 720px; }
.capabilities .section-header > p:not(.eyebrow) { max-width: 500px; margin: 18px 0 0; }
.statement-section { background: #111f41; }
.references { background: #dfe5ec; padding-left: max(24px, calc((100% - 1320px)/2)); padding-right: max(24px, calc((100% - 1320px)/2)); }
.references.section-shell { width: 100%; }
.contact { padding-left: max(24px, calc((100% - 1320px)/2)); padding-right: max(24px, calc((100% - 1320px)/2)); }
.contact.section-shell { width: 100%; }
.subpage-hero { background: #111f41; color: var(--paper); padding-left: clamp(22px, 4.6vw, 62px); padding-right: clamp(22px, 4.6vw, 62px); }
.subpage-hero.section-shell { width: 100%; }
.subpage-hero, .about-hero, .project-dossier { position: relative; }
.subpage-hero::after, .about-hero::after, .project-dossier::before { content: ''; position: absolute; right: auto; bottom: 0; left: clamp(22px, 4.6vw, 62px); width: min(31vw, 410px); height: 5px; background: var(--red); }
.subpage-hero .eyebrow { color: #c7d5ee; }
.subpage-hero > p:not(.eyebrow) { color: #d1dcf0; }
.catalogue-intro { background: #c1cddc; padding-left: max(24px, calc((100% - 1320px)/2)); padding-right: max(24px, calc((100% - 1320px)/2)); }
.catalogue-intro.section-shell { width: 100%; }
.projects-hero { background: #111f41; }
.project-ethos { background: var(--blue); }
.about-hero { min-height: 430px; display: flex; flex-direction: column; justify-content: center; padding: 58px clamp(22px, 4.6vw, 62px) 64px; background: #111f41; color: var(--paper); }
.about-hero.section-shell { width: 100%; }
.about-hero .eyebrow { color: #c7d5ee; }
.about-hero h1 { max-width: 10.5ch; margin: 14px 0 20px; font-size: clamp(56px, 7vw, 106px); line-height: .88; }
.about-hero > p:not(.eyebrow) { max-width: 510px; margin: 0; color: #d1dcf0; font-size: 18px; line-height: 1.4; }
.about-hero-context { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: 42px; align-items: end; max-width: 1010px; margin-top: 26px; padding-top: 17px; border-top: 1px solid rgba(237,242,251,.32); }
.about-hero-context p { max-width: 620px; margin: 0; color: #d7e3f7; font-size: 16px; line-height: 1.3; }
.about-hero-context em { color: var(--paper); font-family: var(--serif); font-size: 1.28em; font-weight: 400; }
.about-hero-context span { justify-self: end; color: #c7d5ee; font: 10px var(--mono); letter-spacing: .05em; text-align: right; text-transform: uppercase; }
.about-scope { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(34px, 5vw, 72px); padding: clamp(38px, 4.5vw, 60px) 0; }
.about-scope-intro h2 { margin: 18px 0 0; font-size: clamp(42px, 4.8vw, 70px); line-height: .91; }
.about-scope-intro h2 em { color: var(--blue); font-family: var(--serif); font-weight: 400; }
.about-scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.about-scope-grid article { min-height: 184px; display: flex; flex-direction: column; padding: 19px 18px; border-right: 1px solid var(--line); border-bottom: 3px solid var(--red); background: rgba(237,242,251,.38); }
.about-scope-grid article:nth-child(2) { background: #c6d1df; }
.about-scope-grid span { color: var(--red); font: 11px var(--mono); }
.about-scope-grid h3 { margin: 36px 0 9px; font-size: clamp(22px, 2.1vw, 31px); line-height: .95; letter-spacing: -.045em; }
.about-scope-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.category-hero::before { content: ''; position: absolute; z-index: 1; right: auto; bottom: 0; left: 0; width: min(29vw, 360px); height: 5px; background: var(--red); }
.company-pillars { display: grid; grid-template-columns: 1fr 1fr; padding: clamp(46px, 5.5vw, 72px) 0 clamp(36px, 4vw, 52px); }
.company-pillars article { min-height: 320px; padding: 24px 9% 28px 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
.company-pillars article + article { padding-left: 9%; padding-right: 0; border-right: 0; }
.company-pillars h2 { max-width: 500px; margin: 38px 0 18px; font-size: clamp(37px, 4vw, 61px); line-height: .9; }
.company-pillars article > p:last-child { max-width: 420px; margin: 0; color: var(--muted); font-size: 15px; }
.value-section { padding: clamp(58px, 7vw, 96px) 0 0; background: var(--blue-deep); color: var(--paper); }
.value-heading h2 { margin: 18px 0 67px; font-size: clamp(47px, 5.3vw, 78px); line-height: .9; }
.value-heading h2 em { color: #d8e4fa; }
.value-section .eyebrow { color: #bfceed; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(237,242,251,.35); }
.values-grid article { position: relative; isolation: isolate; min-height: 290px; padding: 21px 22px 34px; overflow: hidden; border-right: 1px solid rgba(237,242,251,.35); background-color: var(--blue-deep); background-position: center; background-size: cover; }
.values-grid article { background-image: var(--asset-image); }
.values-grid article::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(125deg, rgba(13,25,52,.93), rgba(49,69,120,.79)); }
.values-grid article > * { position: relative; z-index: 1; }
.values-grid article:last-child { border-right: 0; }
.values-grid span { color: var(--red-soft); font-family: var(--mono); font-size: 11px; }
.values-grid h3 { margin: 92px 0 9px; font-size: 25px; }
.values-grid p { max-width: 275px; margin: 0; color: #d1dcef; font-size: 14px; }
.about-capability { display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; padding: clamp(58px, 7vw, 96px) 0; }
.about-capability h2 { margin: 19px 0 0; font-size: clamp(42px, 4.8vw, 70px); line-height: .91; }
.capability-flow { border-top: 1px solid var(--line); }
.capability-flow p { display: grid; grid-template-columns: 55px 1fr; gap: 14px; margin: 0; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.capability-flow span { color: var(--red); font-family: var(--mono); font-size: 11px; }
.sample-dossier { padding-top: 52px; }
.sample-dossier-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(42px, 7vw, 105px); align-items: end; }
.sample-dossier-grid h1 { max-width: 8.4ch; }
.sample-dossier-grid figure { min-height: 450px; margin: 0; position: relative; overflow: hidden; background: var(--blue-deep); }
.sample-dossier-grid figure img { filter: saturate(.75) contrast(1.1); }
.sample-dossier-grid figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 11px 14px; background: rgba(13,25,52,.89); color: #d9e4f9; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.sample-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 42px; }
.sample-meta span { display: grid; gap: 4px; color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.sample-meta strong { color: var(--ink); font-family: var(--sans); font-size: 13px; text-transform: none; }
.sample-outcome { display: grid; grid-template-columns: 30% 1fr; gap: 22px; max-width: 820px; margin-top: 58px; padding: 21px 0; border-top: 2px solid var(--red); border-bottom: 1px solid var(--line); }
.sample-outcome span { color: var(--red); font-family: var(--mono); font-size: 11px; text-transform: uppercase; }
.sample-outcome p { margin: 0; font-size: clamp(20px, 2.4vw, 31px); line-height: 1.12; letter-spacing: -.035em; }

@media (max-width: 900px) { .about-scope, .about-capability, .sample-dossier-grid { grid-template-columns: 1fr; gap: 42px; } .company-pillars { padding-left: 0; padding-right: 0; } .sample-dossier-grid figure { min-height: 370px; } }
@media (max-width: 620px) { .site-header { padding-inline: 18px; } .site-header .brand { gap: 10px; } .site-header .brand-mark { width: 43px; height: 47px; flex-basis: 43px; } .site-header .brand strong { font-size: 22px; } .site-header .brand small { display: block; margin-top: 3px; font-size: 9px; letter-spacing: .045em; } .subpage-hero::after, .about-hero::after, .project-dossier::before { left: 18px; height: 4px; } .category-hero::before { width: 46vw; height: 4px; } .hero { padding-left: 18px; padding-right: 18px; } .hero-image { box-shadow: 9px 9px 0 var(--blue); } .hero-rule { left: 18px; } .about-hero { min-height: 370px; padding: 46px 18px 52px; } .about-hero h1 { font-size: clamp(52px, 15vw, 76px); } .about-hero-context { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; } .about-hero-context span { justify-self: start; text-align: left; } .company-pillars, .values-grid, .about-scope-grid { grid-template-columns: 1fr; } .company-pillars article, .company-pillars article + article { min-height: auto; padding: 26px 0 34px; border-right: 0; border-bottom: 1px solid var(--line); } .company-pillars h2 { margin-top: 35px; } .about-scope-grid article { min-height: 150px; border-right: 0; } .about-scope-grid h3 { margin-top: 28px; } .values-grid article, .values-grid article + article { min-height: auto; padding: 19px 0 27px; border-right: 0; border-bottom: 1px solid rgba(237,242,251,.35); } .about-capability { gap: 42px; } .sample-dossier-grid figure { min-height: 280px; } .sample-meta { grid-template-columns: 1fr; } .sample-outcome { grid-template-columns: 1fr; gap: 8px; margin-top: 35px; } }

/* Unified seamless hero system — image-led, with the TCN blue field protecting copy. */
.hero,
.subpage-hero,
.about-hero {
  isolation: isolate;
  overflow: hidden;
  background-color: var(--blue-deep);
}

.hero {
  display: block;
  width: 100%;
  min-height: 500px;
  height: min(500px, calc(100svh - 88px));
  margin: 0;
  padding: clamp(46px, 5.2vw, 70px) max(24px, calc((100% - 1320px) / 2)) 46px;
  background: var(--blue-deep);
  box-shadow: none;
  clip-path: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  width: min(100%, 650px);
  padding: 0;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  background: var(--blue-deep);
  box-shadow: none;
}

.hero-slides img {
  object-position: right center;
}

.hero-image::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(13, 25, 52, 1) 0%, rgba(13, 25, 52, .98) 31%, rgba(13, 25, 52, .78) 47%, rgba(13, 25, 52, .26) 70%, rgba(13, 25, 52, .12) 100%),
    linear-gradient(0deg, rgba(13, 25, 52, .54), transparent 44%);
}

.hero-image figcaption,
.hero-stamp,
.hero-slider-controls {
  z-index: 2;
}

.hero-image figcaption {
  right: max(24px, calc((100% - 1320px) / 2));
  bottom: 18px;
  left: auto;
  width: min(42vw, 540px);
}

.hero-stamp {
  top: 32px;
  right: max(24px, calc((100% - 1320px) / 2));
}

.hero-slider-controls {
  top: 32px;
  right: max(132px, calc((100% - 1320px) / 2 + 116px));
  left: auto;
}

.hero-rule {
  z-index: 4;
  right: auto;
  bottom: 0;
  left: max(24px, calc((100% - 1320px) / 2));
}

/* 500px is the intended desktop baseline, never a clipping boundary. */
.hero {
  height: auto;
}

.subpage-hero,
.about-hero,
.category-hero.section-shell {
  height: auto;
}

.hero h1 {
  max-width: 12.3ch;
  font-size: clamp(54px, 5.3vw, 92px);
}

.hero-intro {
  max-width: 520px;
  font-size: clamp(17px, 1.3vw, 20px);
}

@media (min-width: 901px) {
  .hero {
    min-height: 540px;
  }
}

@media (max-width: 900px) {
  .hero h1 {
    max-width: 10ch;
  }
}

@media (max-width: 620px) {
  .hero h1 {
    max-width: 10ch;
    font-size: clamp(55px, 17vw, 84px);
  }

  .hero-slider-controls {
    display: none;
  }
}

@media (max-width: 900px) {
  .site-header.is-scrolled { background: rgba(47,75,131,.82); }
  .primary-navigation { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.is-scrolled { background: var(--blue-nav); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

.subpage-hero,
.about-hero {
  min-height: 500px;
  height: min(500px, calc(100svh - 88px));
  padding: clamp(48px, 5.4vw, 70px) max(24px, calc((100% - 1320px) / 2)) 56px;
  background-color: var(--blue-deep);
  background-image:
    linear-gradient(90deg, rgba(13, 25, 52, 1) 0%, rgba(13, 25, 52, .98) 34%, rgba(13, 25, 52, .76) 52%, rgba(13, 25, 52, .20) 76%, rgba(13, 25, 52, .1) 100%),
    linear-gradient(0deg, rgba(13, 25, 52, .42), transparent 54%),
    var(--asset-image);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
}

.subpage-hero h1,
.about-hero h1,
.subpage-hero > p,
.about-hero > p,
.about-hero-context {
  position: relative;
  z-index: 1;
}

.subpage-hero h1,
.about-hero h1 {
  max-width: 9.8ch;
}

.subpage-hero > p:not(.eyebrow),
.about-hero > p:not(.eyebrow) {
  max-width: 590px;
}

.subpage-hero .button-dark {
  color: var(--blue-deep);
  background: var(--paper);
}

.subpage-hero .button-dark:hover {
  color: var(--paper);
  background: var(--red);
}

.projects-hero {
  background-color: var(--blue-deep);
}

@media (max-width: 900px) {
  .hero,
  .subpage-hero,
  .about-hero {
    min-height: 500px;
    height: auto;
  }

  .hero-image figcaption {
    right: 28px;
  }
}

@media (max-width: 620px) {
  .hero,
  .subpage-hero,
  .about-hero {
    min-height: 520px;
    padding: 46px 18px 52px;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-image {
    box-shadow: none;
  }

  .hero-image::after {
    background:
      linear-gradient(90deg, rgba(13, 25, 52, .99) 0%, rgba(13, 25, 52, .95) 52%, rgba(13, 25, 52, .45) 100%),
      linear-gradient(0deg, rgba(13, 25, 52, .72), transparent 53%);
  }

  .hero-slider-controls {
    top: 20px;
    right: auto;
    left: 18px;
  }

  .hero-stamp {
    top: 20px;
    right: 18px;
  }

  .hero-image figcaption {
    right: 18px;
    bottom: 16px;
    left: 18px;
    width: auto;
    font-size: 8px;
  }

  .hero-rule {
    left: 18px;
  }

  .subpage-hero h1,
  .about-hero h1 {
    max-width: 10.2ch;
  }
}

/* Product category pages use the same image-first blue field as the main pages. */
.category-hero.section-shell {
  width: 100%;
  min-height: 500px;
  height: auto;
  padding: clamp(48px, 5.4vw, 70px) max(24px, calc((100% - 1320px) / 2)) 56px;
  background: var(--blue-deep);
  color: var(--paper);
}

.category-hero::after {
  background:
    linear-gradient(90deg, rgba(13, 25, 52, 1) 0%, rgba(13, 25, 52, .97) 37%, rgba(13, 25, 52, .73) 57%, rgba(13, 25, 52, .18) 100%),
    linear-gradient(0deg, rgba(13, 25, 52, .42), transparent 54%);
}

.category-hero .back-link {
  border-bottom-color: rgba(237, 242, 251, .7);
  color: var(--paper);
}

.category-hero > p:not(.eyebrow) {
  color: #d3def4;
}

.category-tags span {
  color: var(--paper);
  border-color: rgba(237, 242, 251, .68);
  background: rgba(13, 25, 52, .25);
}

@media (max-width: 900px) {
  .category-hero.section-shell {
    min-height: 500px;
    height: auto;
  }
}

@media (max-width: 620px) {
  .category-hero.section-shell {
    min-height: 500px;
    padding: 46px 18px 52px;
  }

  .category-hero::after {
    background:
      linear-gradient(90deg, rgba(13, 25, 52, .98) 0%, rgba(13, 25, 52, .93) 58%, rgba(13, 25, 52, .36) 100%),
      linear-gradient(0deg, rgba(13, 25, 52, .62), transparent 54%);
  }
}

/* Shared post-hero statement band for Products and Projects. */
.supplier-brands .section-header.narrow,
.references .section-header.narrow {
  display: block;
  max-width: 760px;
  margin-bottom: 32px;
}

.supplier-brands .section-header .eyebrow,
.references .section-header .eyebrow {
  margin: 0 0 17px;
}

.supplier-brands .section-header h2,
.references .section-header h2 {
  max-width: 720px;
  font-size: clamp(42px, 4.8vw, 70px);
}

.catalogue-intro,
.project-ethos {
  position: relative;
  overflow: hidden;
  padding-top: clamp(34px, 4vw, 54px);
  padding-bottom: clamp(34px, 4vw, 54px);
  border: 0;
  background: var(--blue-statement);
  color: var(--paper);
}

.catalogue-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
  padding-right: max(24px, calc((100% - 1320px) / 2));
  padding-left: max(24px, calc((100% - 1320px) / 2));
}

.project-ethos > div {
  align-items: end;
  gap: 42px;
}

.catalogue-intro p,
.project-ethos p {
  max-width: 780px;
  margin: 0;
  color: var(--paper);
  /* Shared statement-band scale: intentionally caps at 24px across subpages. */
  font-size: clamp(22px, 2.3vw, 24px);
  line-height: 1.15;
  letter-spacing: -.045em;
}

.catalogue-intro .text-link,
.project-ethos span {
  flex: none;
  max-width: 270px;
  color: #d8e3f7;
  border-bottom-color: rgba(216, 227, 247, .76);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.catalogue-intro .text-link span {
  color: var(--red-soft);
}

/* The main-page confidence line is the same statement-band component. */
.confidence-bar {
  align-items: end;
  gap: 42px;
  padding-top: clamp(34px, 4vw, 54px);
  padding-bottom: clamp(34px, 4vw, 54px);
  border-top: 0;
  background: var(--blue-statement);
}

.confidence-bar p {
  max-width: 780px;
  color: var(--paper);
  font-size: clamp(22px, 2.3vw, 24px);
  line-height: 1.15;
  letter-spacing: -.045em;
}

.confidence-bar a {
  max-width: 270px;
  color: #d8e3f7;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .05em;
}

.confidence-bar a span {
  color: var(--red-soft);
}

/* About follows the same post-hero statement pattern as Products and Projects. */
.about-statement-band {
  overflow: hidden;
  padding: clamp(34px, 4vw, 54px) 0;
  background: var(--blue-statement);
  color: var(--paper);
}

.about-statement-band > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 42px;
}

.about-statement-band p {
  max-width: 780px;
  margin: 0;
  font-size: clamp(22px, 2.3vw, 24px);
  line-height: 1.15;
  letter-spacing: -.045em;
}

.about-statement-band em {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.12em;
  font-weight: 400;
}

.about-statement-band span {
  flex: none;
  max-width: 270px;
  color: #d8e3f7;
  font: 10px var(--mono);
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: right;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .catalogue-intro,
  .project-ethos {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-top: 31px;
    padding-bottom: 32px;
  }

  .project-ethos > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .confidence-bar {
    align-items: flex-start;
    gap: 18px;
    padding-top: 31px;
    padding-bottom: 32px;
  }

  .about-statement-band > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .about-statement-band span {
    text-align: left;
  }

  .project-format-grid h2 {
    margin: 7px 0 10px;
  }

  .supplier-brand-card {
    min-height: 144px;
    padding: 13px;
  }

  .supplier-brand-identity {
    height: 39px;
    padding: 7px 9px;
  }

  .supplier-brand-wordmark {
    font-size: 22px;
  }

  .product-index-card,
  .project-format-grid a {
    min-height: 195px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .project-format-grid h2 {
    margin-top: 18px;
  }
}