/*
 * Commercial Pavement Group — Global Design System
 * Phase 1 foundation. Page-specific additions should use these tokens and
 * components before introducing new patterns.
 */

/* 1. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, picture { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

/* 2. Variables */
:root {
  --color-navy: #172a3a;
  --color-navy-deep: #0f1f2b;
  --color-charcoal: #252b30;
  --color-gray: #687078;
  --color-light-gray: #e7e9ea;
  --color-surface: #f5f6f6;
  --color-orange: #f47c20;
  --color-orange-dark: #c04f00;
  --color-white: #fff;
  --color-success: #256d49;
  --color-error: #a12622;

  --font-sans: "Montserrat", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI", Arial, sans-serif;

  --step--1: clamp(.82rem, .79rem + .12vw, .9rem);
  --step-0: clamp(1rem, .96rem + .18vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.08rem + .5vw, 1.55rem);
  --step-2: clamp(1.5rem, 1.26rem + .95vw, 2.15rem);
  --step-3: clamp(1.95rem, 1.55rem + 1.55vw, 3rem);
  --step-4: clamp(2.5rem, 1.8rem + 2.8vw, 4.5rem);

  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  --container: 76rem;
  --container-narrow: 54rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --shadow-sm: 0 8px 24px rgba(15, 31, 43, .08);
  --shadow-lg: 0 24px 60px rgba(15, 31, 43, .16);
  --transition: 180ms ease;
}

/* 3. Typography */
body {
  background: var(--color-white);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .brand, .button, .primary-nav, .eyebrow {
  font-family: var(--font-sans);
}
h1, h2, h3, h4 { color: var(--color-navy); font-weight: 800; line-height: 1.1; text-wrap: balance; }
h1 { font-size: var(--step-4); letter-spacing: -.035em; }
h2 { font-size: var(--step-3); letter-spacing: -.025em; }
h3 { font-size: var(--step-1); }
p { max-width: 70ch; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.lead { font-size: var(--step-1); line-height: 1.55; }
.lead--small { font-size: var(--step-0); }
.eyebrow { color: var(--color-orange-dark); font-size: .75rem; font-weight: 800; letter-spacing: .13em; line-height: 1.3; text-transform: uppercase; }
.eyebrow--light { color: #ffab67; }
.component-label { color: var(--color-gray); font-family: var(--font-sans); font-size: .75rem; font-weight: 800; letter-spacing: .12em; margin-bottom: var(--space-3); text-transform: uppercase; }

/* 4. Global layout */
.container { margin-inline: auto; max-width: calc(var(--container) + (var(--gutter) * 2)); padding-inline: var(--gutter); width: 100%; }
.container--narrow { max-width: calc(var(--container-narrow) + (var(--gutter) * 2)); }
.section { padding-block: var(--space-8); }
.section--light { background: var(--color-surface); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--navy :is(h1, h2, h3) { color: var(--color-white); }
.section-heading { align-items: end; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); margin-bottom: var(--space-6); }
.section-heading .eyebrow, .two-column .eyebrow { margin-bottom: var(--space-3); }
.two-column { align-items: start; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.card-grid { display: grid; gap: var(--space-4); }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.component-row { align-items: start; border-top: 1px solid var(--color-light-gray); display: grid; gap: var(--space-6); grid-template-columns: 1.3fr .7fr; margin-top: var(--space-6); padding-top: var(--space-6); }

/* 5. Header and navigation */
.skip-link { background: var(--color-white); color: var(--color-navy); font-weight: 700; left: var(--space-3); padding: var(--space-2) var(--space-3); position: fixed; top: var(--space-3); transform: translateY(-200%); z-index: 1000; }
.skip-link:focus { transform: translateY(0); }
.site-header { background: var(--color-white); border-bottom: 1px solid rgba(104, 112, 120, .22); position: relative; z-index: 100; }
.utility-bar { background: var(--color-navy-deep); color: rgba(255,255,255,.78); font-size: var(--step--1); }
.utility-bar__inner { align-items: center; display: flex; justify-content: space-between; min-height: 2.5rem; }
.utility-bar a { color: var(--color-white); }
.utility-bar__links { align-items: center; display: flex; gap: var(--space-4); }
.utility-bar__links > a + a { border-left: 1px solid rgba(255,255,255,.24); padding-left: var(--space-4); }
.utility-bar__phone { font-family: var(--font-sans); font-weight: 800; text-decoration-color: var(--color-orange); text-underline-offset: .2em; white-space: nowrap; }
.utility-bar__call-label { color: var(--color-orange); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.site-header__inner { align-items: center; display: flex; justify-content: space-between; min-height: 5.5rem; }
.brand { align-items: center; display: inline-flex; gap: .8rem; max-width: 14rem; text-decoration: none; }
.brand__mark { align-items: center; background: var(--color-navy); clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); color: var(--color-white); display: flex; flex: 0 0 3rem; height: 2.5rem; justify-content: center; padding-right: .25rem; }
.brand__mark span { font-size: .78rem; font-weight: 900; letter-spacing: .04em; }
.brand__name { color: var(--color-navy); font-size: .82rem; font-weight: 600; letter-spacing: .025em; line-height: 1.05; text-transform: uppercase; }
.brand__name strong { display: block; font-size: 1rem; }
.primary-nav { align-items: center; display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); }
.primary-nav__list { align-items: center; display: flex; gap: clamp(.75rem, 2vw, 1.8rem); list-style: none; }
.primary-nav__list > li > a, .nav-dropdown__toggle { background: none; border: 0; color: var(--color-charcoal); cursor: pointer; display: block; font-size: .82rem; font-weight: 750; padding: 1.8rem 0; position: relative; text-decoration: none; text-transform: uppercase; }
.primary-nav__list > li > a::after, .nav-dropdown__toggle::after { background: var(--color-orange); bottom: 1.25rem; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); width: 100%; }
.primary-nav__list > li > a:hover::after, .primary-nav__list > li > a:focus-visible::after, .primary-nav__list > li > a[aria-current="page"]::after, .nav-dropdown__toggle:hover::after, .nav-dropdown__toggle:focus-visible::after, .nav-dropdown__toggle[aria-expanded="true"]::after, .nav-dropdown__toggle[aria-current="page"]::after { transform: scaleX(1); }
.nav-dropdown { position: relative; }
.nav-dropdown__toggle { padding-right: 1rem; }
.nav-dropdown__toggle::before { border-bottom: 1.5px solid; border-right: 1.5px solid; content: ""; height: .38rem; position: absolute; right: 0; top: 2.1rem; transform: rotate(45deg); transition: transform var(--transition); width: .38rem; }
.nav-dropdown__toggle[aria-expanded="true"]::before { transform: rotate(225deg) translate(-.15rem, -.15rem); }
.nav-dropdown__menu { background: var(--color-white); border-top: 3px solid var(--color-orange); box-shadow: var(--shadow-lg); display: grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; min-width: min(43rem, calc(100vw - 2rem)); opacity: 0; padding: var(--space-5); pointer-events: none; position: absolute; right: -13rem; top: calc(100% - .15rem); transform: translateY(.5rem); transition: opacity var(--transition), transform var(--transition); visibility: hidden; }
.nav-dropdown__menu > div { display: grid; gap: .3rem; }
.nav-dropdown__menu a { border-bottom: 1px solid var(--color-light-gray); color: var(--color-charcoal); font-size: .93rem; font-weight: 650; padding: .45rem 0; text-decoration: none; }
.nav-dropdown__menu a:hover, .nav-dropdown__menu a:focus-visible { color: var(--color-orange-dark); }
.nav-dropdown__menu .eyebrow { margin-bottom: .4rem; }
.nav-dropdown__menu .nav-dropdown__all { border: 0; color: var(--color-navy); font-weight: 800; grid-column: 1 / -1; padding-bottom: 0; }
.nav-dropdown.is-open .nav-dropdown__menu { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.nav-toggle { background: transparent; border: 0; cursor: pointer; display: none; padding: .6rem; }
.nav-toggle > span[aria-hidden="true"] { background: var(--color-navy); display: block; height: 2px; margin-block: 5px; transition: transform var(--transition), opacity var(--transition); width: 1.6rem; }

/* 6. Buttons */
.button-group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button { align-items: center; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; font-size: .78rem; font-weight: 850; justify-content: center; letter-spacing: .045em; line-height: 1.2; min-height: 3.25rem; padding: .85rem 1.25rem; text-align: center; text-decoration: none; text-transform: uppercase; transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--color-orange); color: #1d252b; }
.button--primary:hover, .button--primary:focus-visible { background: #ff9746; }
.button--secondary { background: var(--color-navy); color: var(--color-white); }
.button--secondary:hover, .button--secondary:focus-visible { background: var(--color-charcoal); }
.button--ghost { border-color: var(--color-navy); color: var(--color-navy); }
.button--ghost:hover, .button--ghost:focus-visible { background: var(--color-navy); color: var(--color-white); }
.button--outline-light { border-color: rgba(255,255,255,.7); color: var(--color-white); }
.button--outline-light:hover, .button--outline-light:focus-visible { background: var(--color-white); color: var(--color-navy); }
.button--light { background: var(--color-white); color: var(--color-navy); }
.button--light:hover, .button--light:focus-visible { background: var(--color-light-gray); }

/* 7. Components */
.service-card { background: var(--color-white); border: 1px solid var(--color-light-gray); border-top: 4px solid var(--color-navy); min-height: 20rem; padding: clamp(1.5rem, 3vw, 2.25rem); transition: box-shadow var(--transition), transform var(--transition); }
.service-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.service-card--accent { border-top-color: var(--color-orange); }
.service-card__number { color: var(--color-gray); display: block; font-family: var(--font-sans); font-size: .8rem; font-weight: 800; margin-bottom: var(--space-6); }
.service-card h3 { margin-bottom: var(--space-3); }
.service-card p { color: var(--color-gray); }
.service-card .text-link { margin-top: var(--space-5); }
.text-link { color: var(--color-navy); display: inline-flex; font-family: var(--font-sans); font-size: .82rem; font-weight: 850; gap: .5rem; text-decoration-color: var(--color-orange); text-transform: uppercase; }
.check-list { display: grid; gap: var(--space-2); list-style: none; }
.check-list li { padding-left: 1.8rem; position: relative; }
.check-list li::before { color: var(--color-orange-dark); content: "✓"; font-weight: 900; left: 0; position: absolute; }
.accordion { border-top: 1px solid #cdd1d3; }
.accordion__item { border-bottom: 1px solid #cdd1d3; }
.accordion__item h3 { font-size: var(--step-0); }
.accordion__item button { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; font-weight: 750; justify-content: space-between; padding: 1.35rem 0; text-align: left; width: 100%; }
.accordion__item button span { border: solid var(--color-orange-dark); border-width: 0 2px 2px 0; height: .55rem; margin-left: 1rem; transform: rotate(45deg); transition: transform var(--transition); width: .55rem; }
.accordion__item button[aria-expanded="true"] span { transform: rotate(225deg); }
.accordion__panel { color: var(--color-gray); padding: 0 2rem 1.35rem 0; }
.cta-band { background: var(--color-orange); color: #1c252c; padding-block: var(--space-7); }
.cta-band__inner { align-items: center; display: flex; gap: var(--space-5); justify-content: space-between; }
.cta-band h2 { color: #1c252c; margin: .3rem 0 var(--space-2); }
.cta-band .eyebrow { color: #4b2a10; }

/* 8. Foundation preview */
.foundation-hero { overflow: hidden; padding-block: clamp(5rem, 11vw, 9rem); position: relative; }
.foundation-hero::after { background: repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.025) 22px 24px); content: ""; inset: 0; pointer-events: none; position: absolute; }
.foundation-hero__grid { align-items: center; display: grid; gap: clamp(3rem, 8vw, 8rem); grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .65fr); position: relative; z-index: 1; }
.foundation-hero .eyebrow { margin-bottom: var(--space-4); }
.foundation-hero .lead { color: rgba(255,255,255,.76); margin: var(--space-5) 0 var(--space-6); max-width: 44rem; }
.foundation-hero__panel { border-left: 1px solid rgba(255,255,255,.28); display: grid; gap: var(--space-3); padding: var(--space-5) 0 var(--space-5) var(--space-5); position: relative; }
.foundation-hero__panel p { font-family: var(--font-sans); font-weight: 700; }
.foundation-hero__line { background: var(--color-orange); height: 4rem; left: -2px; position: absolute; top: var(--space-5); width: 3px; }

/* 9. Forms */
.form-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-field { display: grid; gap: .45rem; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { color: var(--color-navy); font-family: var(--font-sans); font-size: .85rem; font-weight: 750; }
.form-field :is(input, select, textarea) { background: var(--color-white); border: 1px solid #aeb4b8; border-radius: var(--radius-sm); color: var(--color-charcoal); min-height: 3.2rem; padding: .75rem; width: 100%; }
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-error); }
.field-error { color: var(--color-error); font-size: .82rem; font-weight: 650; }
.form-status { border-left: 4px solid var(--color-navy); margin-top: var(--space-4); padding: var(--space-3); }

/* 10. Footer */
.site-footer { background: linear-gradient(135deg, var(--color-navy-deep), #102736); border-top: 4px solid var(--color-orange); color: rgba(255,255,255,.72); padding-top: var(--space-7); }
.site-footer__grid { align-items: start; display: grid; gap: clamp(2rem, 3.5vw, 4rem); grid-template-columns: minmax(18rem, 1.55fr) minmax(8.5rem, .8fr) minmax(7rem, .7fr) minmax(18rem, 1.25fr); }
.site-footer__grid > div:not(.site-footer__brand) { border-left: 1px solid rgba(255,255,255,.12); min-height: 100%; padding-left: clamp(1.25rem, 2vw, 2rem); }
.brand--footer .brand__mark { background: var(--color-orange); color: var(--color-navy-deep); }
.brand--footer .brand__name { color: var(--color-white); }
.site-footer__brand p { line-height: 1.75; margin: var(--space-4) 0 var(--space-5); max-width: 31rem; }
.site-footer__heading { color: var(--color-white); font-size: .78rem; letter-spacing: .12em; margin-bottom: var(--space-4); padding-bottom: .75rem; position: relative; text-transform: uppercase; }
.site-footer__heading::after { background: var(--color-orange); bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 2.25rem; }
.site-footer__links { display: grid; gap: .8rem; list-style: none; }
.site-footer a { text-decoration-color: transparent; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-white); text-decoration-color: var(--color-orange); }
.site-footer address { display: grid; font-style: normal; gap: .8rem; }
.site-footer address span { line-height: 1.55; }
.site-footer address a { overflow-wrap: normal; white-space: nowrap; word-break: normal; }
.contact-details a { overflow-wrap: anywhere; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.14); display: flex; font-size: .8rem; justify-content: space-between; margin-top: var(--space-7); padding-block: var(--space-4); }

/* 11. Accessibility and states */
:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 3px; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
[hidden] { display: none !important; }
::selection { background: var(--color-orange); color: var(--color-navy-deep); }

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

@media print {
  .utility-bar, .nav-toggle, .primary-nav__cta, .cta-band { display: none; }
  body { color: #000; font-size: 11pt; }
  .site-header { position: static; }
  a { text-decoration: none; }
}

/* 12. Homepage */
.home-page .site-header { position: sticky; top: 0; }
.brand--image { max-width: 13.5rem; }
.brand--image img { height: auto; width: 100%; }
.brand--footer-image { display: block; max-width: 15rem; }
.brand--footer-image img { filter: brightness(0) invert(1); height: auto; width: 100%; }
body.nav-open { overflow: hidden; }

.home-hero { background: var(--color-navy-deep); color: var(--color-white); min-height: min(49rem, calc(100svh - 8rem)); overflow: hidden; position: relative; }
.home-hero__image, .home-hero__overlay { height: 100%; inset: 0; position: absolute; width: 100%; }
.home-hero__image { object-fit: cover; object-position: center; }
.home-hero__overlay { background: linear-gradient(90deg, rgba(7,20,30,.96) 0%, rgba(10,25,37,.82) 36%, rgba(10,25,37,.2) 72%, rgba(10,25,37,.08) 100%), linear-gradient(0deg, rgba(7,20,30,.85), transparent 45%); }
.home-hero__content { display: flex; flex-direction: column; justify-content: center; min-height: min(43rem, calc(100svh - 12rem)); padding-block: clamp(5rem, 10vw, 8rem); position: relative; z-index: 1; }
.home-hero__content h1 { color: var(--color-white); max-width: 13ch; }
.home-hero__content > p:not(.eyebrow) { color: rgba(255,255,255,.82); font-size: var(--step-1); margin: var(--space-4) 0 var(--space-5); max-width: 40rem; }
.home-hero__content .eyebrow { margin-bottom: var(--space-3); }
.home-hero__rail { background: rgba(15,31,43,.94); border-top: 1px solid rgba(255,255,255,.18); display: grid; grid-template-columns: repeat(4, 1fr); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); position: relative; z-index: 2; }
.home-hero__rail > div { border-right: 1px solid rgba(255,255,255,.16); display: grid; gap: .15rem; padding: 1.2rem clamp(1rem, 2vw, 2rem); }
.home-hero__rail > div:first-child { border-left: 1px solid rgba(255,255,255,.16); }
.home-hero__rail strong { color: var(--color-white); font-family: var(--font-sans); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.home-hero__rail span { color: rgba(255,255,255,.62); font-size: .82rem; }

.split-intro { align-items: start; display: grid; gap: clamp(2rem, 8vw, 8rem); grid-template-columns: .8fr 1.2fr; }
.split-intro .eyebrow { margin-bottom: var(--space-3); }
.split-intro .lead { color: var(--color-navy); margin-bottom: var(--space-4); }
.split-intro > div:last-child > p:last-child { color: var(--color-gray); }
.section-heading--light > p { color: rgba(255,255,255,.68); }
.value-grid { border-bottom: 1px solid rgba(255,255,255,.15); border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: repeat(4, 1fr); }
.value-item { border-right: 1px solid rgba(255,255,255,.15); padding: var(--space-5); }
.value-item:first-child { border-left: 1px solid rgba(255,255,255,.15); }
.value-item__index { color: var(--color-orange); display: block; font-family: var(--font-sans); font-size: .78rem; font-weight: 800; margin-bottom: var(--space-6); }
.value-item h3 { color: var(--color-white); margin-bottom: var(--space-3); }
.value-item p { color: rgba(255,255,255,.65); font-size: .94rem; }

.featured-project { background: var(--color-charcoal); color: var(--color-white); display: grid; grid-template-columns: 1.35fr .65fr; min-height: 38rem; }
.featured-project__media { min-height: 34rem; overflow: hidden; position: relative; }
.featured-project__media::after { background: linear-gradient(90deg, transparent 65%, var(--color-charcoal)); content: ""; inset: 0; position: absolute; }
.featured-project__media img { height: 100%; object-fit: cover; width: 100%; }
.media-disclosure { background: rgba(15,31,43,.88); bottom: var(--space-3); color: rgba(255,255,255,.82); font-size: .72rem; left: var(--space-3); letter-spacing: .04em; padding: .5rem .7rem; position: absolute; text-transform: uppercase; z-index: 1; }
.featured-project__content { align-self: center; max-width: 34rem; padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6rem) clamp(3rem, 6vw, 6rem) var(--space-5); }
.featured-project__content h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.featured-project__content > p:not(.eyebrow) { color: rgba(255,255,255,.68); margin-bottom: var(--space-5); }
.text-link--light { color: var(--color-white); }

.property-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.property-card { border: 1px solid var(--color-light-gray); border-right: 0; min-height: 24rem; padding: clamp(1.5rem, 3vw, 2.2rem); position: relative; }
.property-card:last-child { border-right: 1px solid var(--color-light-gray); }
.property-card::after { background: var(--color-orange); bottom: 0; content: ""; height: 4px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); width: 100%; }
.property-card:hover::after { transform: scaleX(1); }
.property-card__code { color: var(--color-orange-dark); display: block; font-family: var(--font-sans); font-size: .75rem; font-weight: 900; letter-spacing: .1em; margin-bottom: var(--space-7); }
.property-card h3 { margin-bottom: var(--space-4); }
.property-card ul { color: var(--color-gray); display: grid; gap: .45rem; list-style: none; }

.service-area { background: var(--color-navy); color: var(--color-white); display: grid; grid-template-columns: 1fr 1fr; min-height: 36rem; }
.service-area__content { align-items: center; display: flex; justify-content: flex-end; padding: clamp(3rem, 8vw, 7rem); }
.service-area__content > div { max-width: calc(var(--container) / 2); }
.service-area h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.service-area__content p:not(.eyebrow) { color: rgba(255,255,255,.7); margin-top: var(--space-3); }
.service-area__media { min-height: 32rem; overflow: hidden; }
.service-area__media img { height: 100%; object-fit: cover; width: 100%; }

.home-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.home-service-card { border: 1px solid var(--color-light-gray); border-bottom: 0; border-right: 0; display: flex; flex-direction: column; min-height: 22rem; overflow: hidden; }
.home-service-card:nth-child(3n), .home-service-card:last-child { border-right: 1px solid var(--color-light-gray); }
.home-service-card:nth-last-child(-n+3) { border-bottom: 1px solid var(--color-light-gray); }
.home-service-card--wide { background: var(--color-navy); grid-column: span 2; }
.home-service-card--wide :is(h3, a) { color: var(--color-white); }
.home-service-card--wide p { color: rgba(255,255,255,.68); }
.home-service-card--accent { background: var(--color-surface); border-top: 4px solid var(--color-orange); }
.home-service-card > img { height: clamp(11rem, 16vw, 14rem); object-fit: cover; transition: transform .45s ease; width: 100%; }
.home-service-card:hover > img { transform: scale(1.025); }
.home-service-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); position: relative; }
.home-service-card h3 { margin: 0 0 var(--space-3); }
.home-service-card p { color: var(--color-gray); font-size: .94rem; }
.home-service-card a { color: var(--color-navy); font-family: var(--font-sans); font-size: .75rem; font-weight: 850; margin-top: auto; padding-top: var(--space-4); text-decoration-color: var(--color-orange); text-transform: uppercase; }

.project-placeholder-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
.project-placeholder { background: var(--color-white); box-shadow: var(--shadow-sm); }
.project-placeholder > div:last-child { padding: var(--space-4); }
.project-placeholder h3 { margin: .5rem 0 var(--space-2); }
.project-placeholder p:last-child { color: var(--color-gray); font-size: .9rem; }
.project-placeholder__visual { align-items: center; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--color-navy), #2d4c63); color: rgba(255,255,255,.7); display: flex; justify-content: center; overflow: hidden; position: relative; }
.project-placeholder__visual img { height: 100%; object-fit: cover; width: 100%; }
.project-placeholder__visual span { font-family: var(--font-sans); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; z-index: 1; }

.trust-layout { align-items: center; display: grid; gap: clamp(3rem, 8vw, 8rem); grid-template-columns: 1.05fr .95fr; }
.trust-layout h2 { margin: var(--space-3) 0 var(--space-4); }
.trust-layout .lead { color: rgba(255,255,255,.7); }
.audience-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-5); }
.audience-tags span { border: 1px solid rgba(255,255,255,.22); border-radius: 99rem; color: rgba(255,255,255,.78); font-family: var(--font-sans); font-size: .7rem; font-weight: 750; padding: .5rem .8rem; text-transform: uppercase; }
.testimonial-placeholder { background: rgba(255,255,255,.07); border-left: 4px solid var(--color-orange); padding: clamp(2rem, 5vw, 4rem); }
.testimonial-placeholder blockquote { color: var(--color-white); font-family: var(--font-sans); font-size: var(--step-1); font-weight: 700; line-height: 1.45; }
.testimonial-placeholder figcaption { color: rgba(255,255,255,.54); font-size: .72rem; letter-spacing: .06em; margin-top: var(--space-4); }

.final-cta { background: var(--color-orange); padding-block: var(--space-7); }
.final-cta__inner { align-items: center; display: grid; gap: var(--space-5); grid-template-columns: 1.3fr .7fr; }
.final-cta h2 { color: var(--color-navy-deep); margin: .4rem 0 var(--space-2); }
.final-cta .eyebrow { color: #55290a; }
.final-cta__inner > .button-group { justify-content: flex-end; }

/* 13. Services overview and detail pages */
.service-detail-page .site-header, .services-overview-page .site-header { position: sticky; top: 0; }
.service-nav-menu { grid-template-columns: 1fr; min-width: 25rem; right: -7rem; }
.service-nav-menu > div { display: grid; grid-template-columns: 1fr; }
.service-nav-menu .nav-dropdown__all { grid-column: auto; }
.breadcrumb-bar { background: var(--color-navy-deep); color: rgba(255,255,255,.72); font-size: .8rem; }
.breadcrumb-bar ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding-block: .8rem; }
.breadcrumb-bar li + li::before { color: var(--color-orange); content: "/"; margin-right: .5rem; }
.breadcrumb-bar a { color: var(--color-white); }

.service-hero { background: var(--color-navy); color: var(--color-white); display: grid; grid-template-columns: 1fr 1fr; min-height: 38rem; }
.service-hero__content { align-items: center; display: flex; justify-content: flex-end; padding: clamp(3rem, 7vw, 7rem); }
.service-hero__content > div { max-width: calc(var(--container) / 2); }
.service-hero h1 { color: var(--color-white); font-size: clamp(2.4rem, 4.5vw, 4.4rem); margin: var(--space-3) 0 var(--space-4); }
.service-hero__content > div > p:not(.eyebrow) { color: rgba(255,255,255,.74); font-size: var(--step-1); margin-bottom: var(--space-5); }
.service-hero__media { min-height: 34rem; overflow: hidden; position: relative; }
.service-hero__media::after { background: linear-gradient(90deg, rgba(23,42,58,.45), transparent 35%); content: ""; inset: 0; position: absolute; }
.service-hero__media img { height: 100%; object-fit: cover; width: 100%; }

.service-story__grid { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1fr 1fr; }
.service-story__grid > *, .service-hero__content > div, .related-grid > *, .benefit-grid > * { min-width: 0; }
.service-story h2 { margin: var(--space-3) 0 var(--space-4); }
.service-story p:not(.eyebrow) { color: var(--color-gray); margin-top: var(--space-3); }
.service-solution { background: var(--color-navy); color: var(--color-white); padding: clamp(2rem, 5vw, 4rem); }
.service-solution h2 { color: var(--color-white); }
.service-solution p:not(.eyebrow) { color: rgba(255,255,255,.7); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.benefit-card { background: var(--color-white); border: 1px solid var(--color-light-gray); border-right: 0; min-height: 18rem; padding: var(--space-5); }
.benefit-card:last-child { border-right: 1px solid var(--color-light-gray); }
.benefit-card > span { color: var(--color-orange-dark); display: block; font-family: var(--font-sans); font-size: .75rem; font-weight: 900; margin-bottom: var(--space-6); }
.benefit-card h3 { margin-bottom: var(--space-3); }
.benefit-card p { color: var(--color-gray); font-size: .92rem; }
.audience-list { border-top: 1px solid var(--color-light-gray); display: grid; list-style: none; }
.audience-list li { border-bottom: 1px solid var(--color-light-gray); color: var(--color-navy); font-family: var(--font-sans); font-weight: 750; padding: 1.1rem 0 1.1rem 2rem; position: relative; }
.audience-list li::before { background: var(--color-orange); content: ""; height: .55rem; left: 0; position: absolute; top: 1.65rem; transform: rotate(45deg); width: .55rem; }
.related-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
.related-card { background: var(--color-white); box-shadow: var(--shadow-sm); overflow: hidden; }
.related-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.related-card > div { padding: var(--space-4); }
.related-card h3 { margin-bottom: var(--space-4); }
.la-focus { background: var(--color-navy); color: var(--color-white); padding-block: var(--space-7); }
.la-focus__grid { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1fr 1fr; }
.la-focus h2 { color: var(--color-white); margin-top: var(--space-3); }
.la-focus__grid > p { color: rgba(255,255,255,.7); }
.faq-section .accordion__panel:not([hidden]) { animation: faq-reveal var(--transition) both; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-.25rem); } to { opacity: 1; transform: translateY(0); } }

.overview-hero { background: var(--color-navy); color: var(--color-white); }
.overview-hero__grid { align-items: stretch; display: grid; grid-template-columns: .9fr 1.1fr; min-height: 38rem; padding-right: 0; }
.overview-hero__grid > div:first-child { align-self: center; padding: clamp(3rem, 7vw, 7rem) clamp(2rem, 6vw, 6rem) clamp(3rem, 7vw, 7rem) 0; }
.overview-hero h1 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.overview-hero__grid > div:first-child > p:not(.eyebrow) { color: rgba(255,255,255,.72); font-size: var(--step-1); margin-bottom: var(--space-5); }
.overview-hero__visual { overflow: hidden; position: relative; }
.overview-hero__visual::after { background: linear-gradient(90deg, var(--color-navy), transparent 32%); content: ""; inset: 0; position: absolute; }
.overview-hero__visual img { height: 100%; object-fit: cover; width: 100%; }
.overview-service-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); }
.overview-service-card { background: var(--color-white); border: 1px solid var(--color-light-gray); display: flex; flex-direction: column; }
.overview-service-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.overview-service-card > div { display: flex; flex: 1; flex-direction: column; padding: var(--space-4); }
.overview-service-card > div > span { color: var(--color-orange-dark); font-family: var(--font-sans); font-size: .72rem; font-weight: 900; }
.overview-service-card h3 { margin: var(--space-3) 0; }
.overview-service-card p { color: var(--color-gray); font-size: .92rem; }
.overview-service-card .text-link { margin-top: auto; padding-top: var(--space-4); }
.safety-feature { background: var(--color-charcoal); color: var(--color-white); padding-block: var(--space-7); }
.safety-feature__grid { display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1.15fr .85fr; }
.safety-feature h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.safety-feature p { color: rgba(255,255,255,.68); }
.safety-feature__grid > div:last-child { display: grid; gap: var(--space-3); }
.safety-feature__grid a { border-bottom: 1px solid rgba(255,255,255,.22); color: var(--color-white); font-family: var(--font-sans); font-weight: 800; padding-bottom: var(--space-3); text-decoration: none; }
.safety-feature__grid > div:last-child p { font-size: .82rem; margin-top: var(--space-3); }
.service-proof { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1fr 1fr; }
.service-proof h2 { margin-top: var(--space-3); }
.check-list--light { border-top: 1px solid rgba(255,255,255,.18); }
.check-list--light p { border-bottom: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.75); padding: 1rem 0 1rem 1.75rem; position: relative; }
.check-list--light p::before { color: var(--color-orange); content: "✓"; font-weight: 900; left: 0; position: absolute; }
.service-area-overview { background: var(--color-navy); color: var(--color-white); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 32rem; }
.service-area-overview img { height: 100%; object-fit: cover; width: 100%; }
.service-area-overview > div { align-self: center; padding: clamp(3rem, 7vw, 7rem); }
.service-area-overview h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.service-area-overview p:not(.eyebrow) { color: rgba(255,255,255,.7); }

/* 14. About page */
.about-page .site-header { position: sticky; top: 0; }
.about-hero { background: var(--color-navy-deep); color: var(--color-white); min-height: 39rem; overflow: hidden; position: relative; }
.about-hero__image, .about-hero__overlay { height: 100%; inset: 0; position: absolute; width: 100%; }
.about-hero__image { object-fit: cover; object-position: center; }
.about-hero__overlay { background: linear-gradient(90deg, rgba(7,20,30,.97) 0%, rgba(7,20,30,.86) 36%, rgba(7,20,30,.26) 70%, rgba(7,20,30,.08) 100%), linear-gradient(0deg, rgba(7,20,30,.62), transparent 45%); }
.about-hero__content { display: flex; flex-direction: column; justify-content: center; min-height: 39rem; padding-block: clamp(5rem, 10vw, 8rem); position: relative; z-index: 1; }
.about-hero h1 { color: var(--color-white); max-width: 12ch; }
.about-hero__content > p:not(.eyebrow) { color: rgba(255,255,255,.78); font-size: var(--step-1); margin: var(--space-4) 0 var(--space-5); max-width: 43rem; }
.about-hero .media-disclosure { left: auto; right: var(--gutter); }
.about-intro { align-items: start; display: grid; gap: clamp(2rem, 8vw, 8rem); grid-template-columns: .85fr 1.15fr; }
.about-intro h2 { margin-top: var(--space-3); }
.about-intro .lead { color: var(--color-navy); margin-bottom: var(--space-4); }
.about-intro > div:last-child > p:not(.lead) { color: var(--color-gray); }
.verification-note { border-left: 4px solid var(--color-orange); display: grid; gap: .35rem; margin-top: var(--space-5); padding: var(--space-3) var(--space-4); }
.verification-note strong { color: var(--color-navy); font-family: var(--font-sans); font-size: .82rem; text-transform: uppercase; }
.verification-note span { color: var(--color-gray); font-size: .9rem; }
.commercial-focus { background: var(--color-charcoal); color: var(--color-white); padding-block: var(--space-7); }
.commercial-focus__grid { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: .9fr 1.1fr; }
.commercial-focus h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.commercial-focus__grid > div:first-child > p:last-child { color: rgba(255,255,255,.65); }
.commercial-focus__points { border-top: 1px solid rgba(255,255,255,.18); display: grid; }
.commercial-focus__points article { border-bottom: 1px solid rgba(255,255,255,.18); display: grid; gap: var(--space-3); grid-template-columns: 2.5rem minmax(0,.75fr) minmax(0,1.25fr); padding-block: var(--space-4); }
.commercial-focus__points span { color: var(--color-orange); font-family: var(--font-sans); font-size: .72rem; font-weight: 900; }
.commercial-focus__points h3 { color: var(--color-white); font-size: var(--step-0); }
.commercial-focus__points p { color: rgba(255,255,255,.62); font-size: .9rem; }
.about-value-grid { border-bottom: 1px solid rgba(255,255,255,.15); border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: repeat(5, 1fr); }
.about-value-grid article { border-right: 1px solid rgba(255,255,255,.15); min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem); }
.about-value-grid article:first-child { border-left: 1px solid rgba(255,255,255,.15); }
.about-value-grid span { color: var(--color-orange); display: block; font-family: var(--font-sans); font-size: .72rem; font-weight: 900; margin-bottom: var(--space-6); }
.about-value-grid h3 { color: var(--color-white); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.about-value-grid p { color: rgba(255,255,255,.64); font-size: .9rem; }
.about-capability-grid { border-top: 1px solid var(--color-light-gray); display: grid; grid-template-columns: repeat(3, 1fr); }
.about-capability-grid a { align-items: center; border-bottom: 1px solid var(--color-light-gray); color: var(--color-navy); display: grid; font-family: var(--font-sans); font-size: .9rem; font-weight: 800; gap: var(--space-3); grid-template-columns: 2rem 1fr; min-width: 0; padding: 1.25rem var(--space-3); text-decoration: none; }
.about-capability-grid a:not(:nth-child(3n)) { border-right: 1px solid var(--color-light-gray); }
.about-capability-grid a:hover, .about-capability-grid a:focus-visible { background: var(--color-surface); color: var(--color-orange-dark); }
.about-capability-grid span { color: var(--color-orange-dark); font-size: .7rem; }
.about-capability-link { margin-top: var(--space-5); }
.about-story { background: var(--color-navy); color: var(--color-white); display: grid; grid-template-columns: 1.15fr .85fr; min-height: 38rem; }
.about-story__media { min-height: 34rem; overflow: hidden; position: relative; }
.about-story__media::after { background: linear-gradient(90deg, transparent 65%, var(--color-navy)); content: ""; inset: 0; position: absolute; }
.about-story__media img { height: 100%; object-fit: cover; width: 100%; }
.about-story__content { align-items: center; display: flex; padding: clamp(3rem, 7vw, 7rem) clamp(2rem, 7vw, 7rem) clamp(3rem, 7vw, 7rem) var(--space-5); }
.about-story__content h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.about-story__content p:not(.eyebrow) { color: rgba(255,255,255,.68); margin-bottom: var(--space-4); }
.trust-credentials { align-items: start; display: grid; gap: clamp(2rem, 7vw, 7rem); grid-template-columns: 1.15fr .85fr; }
.trust-credentials h2 { margin: var(--space-3) 0 var(--space-4); }
.trust-credentials .lead { color: var(--color-gray); }
.credential-placeholders { border-top: 1px solid var(--color-light-gray); display: grid; margin-top: var(--space-5); }
.credential-placeholders article { border-bottom: 1px solid var(--color-light-gray); display: grid; gap: .25rem; padding: var(--space-3) 0; }
.credential-placeholders strong { color: var(--color-navy); font-family: var(--font-sans); font-size: .78rem; }
.credential-placeholders span { color: var(--color-gray); font-size: .88rem; }
.about-testimonial { background: var(--color-surface); border-left: 4px solid var(--color-orange); padding: clamp(2rem, 5vw, 4rem); }
.about-testimonial blockquote { color: var(--color-navy); font-family: var(--font-sans); font-size: var(--step-1); font-weight: 750; line-height: 1.5; }
.about-testimonial figcaption { color: var(--color-gray); font-size: .72rem; letter-spacing: .05em; margin-top: var(--space-5); text-transform: uppercase; }

/* 15. Blog archive and articles */
.blog-page .site-header, .article-page .site-header { position: sticky; top: 0; }
.blog-hero { background: var(--color-navy); color: var(--color-white); padding-block: clamp(4.5rem, 9vw, 7.5rem); position: relative; }
.blog-hero::after { background: linear-gradient(135deg, transparent 48%, rgba(255,255,255,.035) 48% 50%, transparent 50%); background-size: 2.5rem 2.5rem; content: ""; inset: 0; position: absolute; }
.blog-hero__inner { position: relative; z-index: 1; }
.blog-hero h1 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.blog-hero p:not(.eyebrow) { color: rgba(255,255,255,.72); font-size: var(--step-1); max-width: 44rem; }
.blog-tools { align-items: end; display: grid; gap: var(--space-4); grid-template-columns: 1fr minmax(18rem,.6fr); margin-bottom: var(--space-6); }
.category-nav { display: flex; flex-wrap: wrap; gap: .6rem; }
.category-nav button { background: var(--color-white); border: 1px solid #cdd1d3; border-radius: 99rem; color: var(--color-navy); cursor: pointer; font-family: var(--font-sans); font-size: .72rem; font-weight: 800; padding: .65rem .9rem; text-transform: uppercase; }
.category-nav button[aria-pressed="true"], .category-nav button:hover, .category-nav button:focus-visible { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.blog-search { display: grid; gap: .4rem; }
.blog-search label { color: var(--color-navy); font-family: var(--font-sans); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.blog-search input { border: 1px solid #aeb4b8; border-radius: var(--radius-sm); min-height: 3rem; padding: .7rem .85rem; width: 100%; }
.blog-results-status { color: var(--color-gray); font-size: .86rem; margin: calc(var(--space-5) * -1) 0 var(--space-5); }
.blog-latest-heading { margin-top: var(--space-7); }
.featured-article { background: var(--color-charcoal); color: var(--color-white); display: grid; grid-template-columns: 1.2fr .8fr; min-height: 34rem; }
.featured-article__media { min-height: 30rem; overflow: hidden; position: relative; }
.featured-article__media::after { background: linear-gradient(90deg, transparent 65%, var(--color-charcoal)); content: ""; inset: 0; position: absolute; }
.featured-article__media img { height: 100%; object-fit: cover; width: 100%; }
.featured-article__content { align-self: center; padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 5rem) var(--space-5); }
.featured-article h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.featured-article p:not(.eyebrow) { color: rgba(255,255,255,.68); margin-bottom: var(--space-4); }
.post-meta { color: var(--color-gray); font-size: .8rem; }
.featured-article .post-meta { color: rgba(255,255,255,.54); }
.blog-card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3,1fr); }
.blog-card { background: var(--color-white); border: 1px solid var(--color-light-gray); display: flex; flex-direction: column; min-width: 0; }
.blog-card[hidden] { display: none; }
.blog-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.blog-card__body { display: flex; flex: 1; flex-direction: column; padding: var(--space-4); }
.blog-card h2, .blog-card h3 { font-size: var(--step-1); margin: var(--space-3) 0; }
.blog-card p:not(.eyebrow):not(.post-meta) { color: var(--color-gray); font-size: .92rem; }
.blog-card .post-meta { margin-bottom: var(--space-3); }
.blog-card .text-link { margin-top: auto; padding-top: var(--space-4); }
.blog-category-list { display: grid; gap: var(--space-3); grid-template-columns: repeat(5,1fr); }
.blog-category-list a { border-top: 3px solid var(--color-orange); color: var(--color-navy); font-family: var(--font-sans); font-weight: 800; min-height: 8rem; padding: var(--space-4); text-decoration: none; }
.blog-category-list a:hover, .blog-category-list a:focus-visible { background: var(--color-surface); }
.recent-list { border-top: 1px solid rgba(255,255,255,.2); display: grid; }
.recent-list a { align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); color: var(--color-white); display: grid; gap: var(--space-4); grid-template-columns: 6rem 1fr auto; padding-block: var(--space-4); text-decoration: none; }
.recent-list span { color: var(--color-orange); font-family: var(--font-sans); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.recent-list strong { font-family: var(--font-sans); }
.recent-list i { color: rgba(255,255,255,.55); font-size: .8rem; font-style: normal; }
.blog-empty { border: 1px solid var(--color-light-gray); color: var(--color-gray); grid-column: 1/-1; padding: var(--space-5); }

.article-hero { background: var(--color-navy); color: var(--color-white); padding-block: clamp(4rem,8vw,7rem); }
.article-hero__inner { max-width: 68rem; }
.article-hero h1 { color: var(--color-white); font-size: clamp(2.25rem,5vw,4.5rem); margin: var(--space-3) 0 var(--space-4); }
.article-hero .post-meta { color: rgba(255,255,255,.62); }
.article-figure { background: var(--color-navy-deep); margin: 0; position: relative; }
.article-figure img { aspect-ratio: 16/7; object-fit: cover; width: 100%; }
.article-figure figcaption { background: rgba(15,31,43,.9); bottom: var(--space-3); color: rgba(255,255,255,.78); font-size: .72rem; left: max(var(--gutter),calc((100vw - var(--container))/2)); letter-spacing: .04em; padding: .5rem .7rem; position: absolute; text-transform: uppercase; }
.article-layout { align-items: start; display: grid; gap: clamp(2rem,7vw,7rem); grid-template-columns: minmax(0,1fr) 17rem; }
.article-content { max-width: 47rem; }
.article-content > p:first-child { color: var(--color-navy); font-size: var(--step-1); line-height: 1.55; }
.article-content h2 { font-size: var(--step-2); margin: var(--space-7) 0 var(--space-3); }
.article-content h3 { margin: var(--space-5) 0 var(--space-2); }
.article-content p + p { margin-top: var(--space-3); }
.article-content ul, .article-content ol { display: grid; gap: .65rem; margin: var(--space-4) 0; padding-left: 1.35rem; }
.article-content a { color: var(--color-navy); font-weight: 700; text-decoration-color: var(--color-orange); }
.article-inline-figure { background: var(--color-surface); margin: var(--space-6) 0; overflow: hidden; }
.article-inline-figure img { aspect-ratio: 16/9; display: block; object-fit: cover; width: 100%; }
.article-inline-figure figcaption { border-left: 3px solid var(--color-orange); color: var(--color-gray); font-size: .82rem; line-height: 1.55; padding: .8rem var(--space-3); }
.article-note { background: var(--color-surface); border-left: 4px solid var(--color-orange); margin: var(--space-5) 0; padding: var(--space-4); }
.article-sidebar { position: sticky; top: 8rem; }
.article-sidebar > div { border-top: 4px solid var(--color-orange); box-shadow: var(--shadow-sm); padding: var(--space-4); }
.article-sidebar h2 { font-size: var(--step-0); margin-bottom: var(--space-3); }
.article-sidebar ul { display: grid; gap: .7rem; list-style: none; }
.article-sidebar a { color: var(--color-navy); font-size: .88rem; font-weight: 700; }
.key-takeaways { background: var(--color-navy); color: var(--color-white); margin-top: var(--space-7); padding: clamp(2rem,5vw,4rem); }
.key-takeaways h2 { color: var(--color-white); margin: 0 0 var(--space-4); }
.key-takeaways ul { color: rgba(255,255,255,.75); }
.related-services { display: grid; gap: var(--space-3); grid-template-columns: repeat(3,1fr); }
.related-services a { border: 1px solid var(--color-light-gray); color: var(--color-navy); font-family: var(--font-sans); font-size: .84rem; font-weight: 800; min-height: 7rem; padding: var(--space-4); text-decoration: none; }
.related-services a:hover, .related-services a:focus-visible { border-color: var(--color-orange); }
.service-detail-page .related-services { display: block; }
.related-posts { display: grid; gap: var(--space-4); grid-template-columns: repeat(3,1fr); }
.related-post { background: var(--color-white); box-shadow: var(--shadow-sm); }
.related-post img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.related-post > div { padding: var(--space-4); }
.related-post h3 { font-size: var(--step-0); margin: var(--space-2) 0 var(--space-3); }

/* 16. Contact page */
.contact-page .site-header { position: sticky; top: 0; }
.contact-hero { background: var(--color-navy-deep); color: var(--color-white); min-height: 36rem; overflow: hidden; position: relative; }
.contact-hero__image, .contact-hero__overlay { height: 100%; inset: 0; position: absolute; width: 100%; }
.contact-hero__image { object-fit: cover; object-position: center; }
.contact-hero__overlay { background: linear-gradient(90deg,rgba(7,20,30,.97) 0%,rgba(7,20,30,.86) 40%,rgba(7,20,30,.24) 76%,rgba(7,20,30,.08)); }
.contact-hero__content { display: flex; flex-direction: column; justify-content: center; min-height: 36rem; padding-block: clamp(5rem,9vw,7rem); position: relative; z-index: 1; }
.contact-hero h1 { color: var(--color-white); max-width: 13ch; }
.contact-hero__content > p:not(.eyebrow) { color: rgba(255,255,255,.78); font-size: var(--step-1); margin: var(--space-4) 0 var(--space-5); max-width: 44rem; }
.contact-hero .media-disclosure { left: auto; right: var(--gutter); }
.contact-intro { align-items: start; display: grid; gap: clamp(2rem,8vw,8rem); grid-template-columns: .85fr 1.15fr; }
.contact-intro h2 { margin-top: var(--space-3); }
.contact-intro .lead { color: var(--color-navy); margin-bottom: var(--space-4); }
.contact-intro p:not(.eyebrow):not(.lead) { color: var(--color-gray); }
.contact-details { border-top: 1px solid var(--color-light-gray); display: grid; margin-top: var(--space-5); }
.contact-details div { border-bottom: 1px solid var(--color-light-gray); display: grid; gap: .25rem; grid-template-columns: 10rem 1fr; padding-block: var(--space-3); }
.contact-details dt { color: var(--color-navy); font-family: var(--font-sans); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.contact-details dd { margin: 0; }
.contact-form-section { background: var(--color-surface); }
.contact-form-layout { align-items: start; display: grid; gap: clamp(2rem,6vw,5rem); grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); }
.project-request-guide { background: var(--color-navy); color: var(--color-white); padding: clamp(2rem,5vw,4rem); position: sticky; top: 8rem; }
.project-request-guide h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.project-request-guide > p:not(.eyebrow) { color: rgba(255,255,255,.7); }
.project-request-guide ul { border-top: 1px solid rgba(255,255,255,.18); display: grid; list-style: none; margin-top: var(--space-5); }
.project-request-guide li { border-bottom: 1px solid rgba(255,255,255,.18); padding: .85rem 0 .85rem 1.6rem; position: relative; }
.project-request-guide li::before { color: var(--color-orange); content: "✓"; font-weight: 900; left: 0; position: absolute; }
.upload-notice { background: rgba(255,255,255,.08); border-left: 3px solid var(--color-orange); font-size: .82rem; margin-top: var(--space-5); padding: var(--space-3); }
.commercial-inquiry-form { background: var(--color-white); box-shadow: var(--shadow-sm); padding: clamp(1.5rem,5vw,3.5rem); }
.commercial-inquiry-form > h2 { margin: var(--space-3) 0 var(--space-4); }
.commercial-inquiry-form fieldset { border: 0; margin: 0 0 var(--space-6); min-width: 0; padding: 0; }
.commercial-inquiry-form legend { color: var(--color-navy); font-family: var(--font-sans); font-size: var(--step-1); font-weight: 800; margin-bottom: var(--space-4); padding: 0; }
.commercial-inquiry-form .required-note { color: var(--color-gray); font-size: .82rem; margin: 0 0 var(--space-4); }
.required-mark { color: var(--color-orange-dark); font-weight: 900; }
.form-help { color: var(--color-gray); font-size: .8rem; }
.commercial-inquiry-form .form-status { background: var(--color-surface); }
.contact-services-grid { border-top: 1px solid var(--color-light-gray); display: grid; grid-template-columns: repeat(3,1fr); }
.contact-services-grid a { align-items: center; border-bottom: 1px solid var(--color-light-gray); color: var(--color-navy); display: grid; font-family: var(--font-sans); font-size: .86rem; font-weight: 800; gap: var(--space-3); grid-template-columns: 2rem 1fr; min-width: 0; padding: 1.15rem var(--space-3); text-decoration: none; }
.contact-services-grid a:not(:nth-child(3n)) { border-right: 1px solid var(--color-light-gray); }
.contact-services-grid span { color: var(--color-orange-dark); font-size: .7rem; }
.contact-services-grid a:hover, .contact-services-grid a:focus-visible { background: var(--color-surface); color: var(--color-orange-dark); }
.contact-market-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(5,1fr); }
.contact-market-grid article { border-left: 3px solid var(--color-orange); min-width: 0; padding: var(--space-4); }
.contact-market-grid h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
.contact-market-grid p { color: var(--color-gray); font-size: .88rem; }
.contact-area { background: var(--color-navy); color: var(--color-white); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 31rem; }
.contact-area img { height: 100%; object-fit: cover; width: 100%; }
.contact-area__content { align-self: center; padding: clamp(3rem,7vw,7rem); }
.contact-area h2 { color: var(--color-white); margin: var(--space-3) 0 var(--space-4); }
.contact-area p:not(.eyebrow) { color: rgba(255,255,255,.7); }
.integration-note { border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.58); font-size: .8rem; margin-top: var(--space-5); padding-top: var(--space-4); }

/* 17. Light motion enhancements */
.js .reveal-on-scroll {
  opacity: 0;
  transform: translateY(1.125rem);
  transition: opacity .58s ease, transform .58s cubic-bezier(.22,1,.36,1), box-shadow var(--transition);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
.js .reveal-on-scroll.is-visible.motion-card:hover,
.js .reveal-on-scroll.is-visible.motion-card:focus-within {
  box-shadow: 0 1rem 2.25rem rgba(7,20,30,.12);
  transform: translateY(-.3rem);
}
.motion-card img {
  transition: transform .65s cubic-bezier(.22,1,.36,1);
}
.overview-service-card.motion-card,
.blog-card.motion-card,
.related-post.motion-card {
  overflow: hidden;
}
.motion-card:hover img,
.motion-card:focus-within img {
  transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
  .motion-card img { transform: none !important; }
}