/* ==========================================================================
   DEINO PROJECTS LIMITED — Design System
   One typography system. One spacing system. One colour system.
   One motion system. One grid. One button system. One image treatment.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour ---------------------------------------------------------------- */
  --navy:        #0A2747;
  --navy-deep:   #071C33;   /* footer floor / overlay stacking only */
  --gold:        #B58A3A;
  --white:       #FFFFFF;
  --off-white:   #F5F6F4;
  --charcoal:    #1E252B;
  --grey:        #6F7B86;
  --grey-light:  #E7EAEC;

  /* Type ------------------------------------------------------------------ */
  --font: "Manrope", Arial, Helvetica, sans-serif;

  --fs-hero:      clamp(2.75rem, 7.2vw, 5.5rem);   /* 44 → 88 */
  --fs-page:      clamp(2.375rem, 5vw, 3.5rem);    /* 38 → 56 */
  --fs-statement: clamp(2.5rem, 7vw, 6rem);        /* brand moment */
  --fs-section:   clamp(1.875rem, 3.2vw, 2.5rem);  /* 30 → 40 */
  --fs-sub:       clamp(1.375rem, 2vw, 1.75rem);   /* 22 → 28 */
  --fs-body:      clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-support:   0.875rem;
  --fs-label:     0.6875rem;

  --lh-tight: 1.02;
  --lh-head:  1.1;
  --lh-body:  1.65;

  /* Grid & spacing -------------------------------------------------------- */
  --container: 1360px;
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --col-gap: clamp(1rem, 2vw, 2rem);

  --sp-section:   clamp(4.5rem, 9vw, 10rem);   /* 72 → 160 */
  --sp-block:     clamp(2.5rem, 5vw, 4.5rem);
  --sp-element:   clamp(1.25rem, 2vw, 2rem);

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 250ms;
  --t-base: 400ms;
  --t-slow: 700ms;
  --t-cinematic: 1100ms;

  --header-h: 84px;
}

@media (max-width: 767px) { :root { --header-h: 68px; } }

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video { display: block; max-width: 100%; }
figure { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Accessible focus — never colour alone */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.on-navy :focus-visible { outline-color: var(--white); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  z-index: 200;
  background: var(--navy); color: var(--white);
  padding: 0.85rem 1.4rem;
  font-weight: 600; font-size: var(--fs-support);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. GRID & LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
@media (max-width: 899px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 599px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: calc(var(--sp-section) * 0.6); }
.section--flush-top { padding-top: 0; }

.section--tone { background: var(--off-white); }

.section--navy {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }

.bleed { width: 100%; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY COMPONENTS
   -------------------------------------------------------------------------- */
.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-element);
}
.section--navy .label { color: var(--gold); }

.h-hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.035em;
  font-weight: 600;
}
.h-page    { font-size: var(--fs-page);    letter-spacing: -0.03em; }
.h-section { font-size: var(--fs-section); }
.h-sub     { font-size: var(--fs-sub); font-weight: 600; }

.lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 34em;
}

.meta {
  font-size: var(--fs-support);
  color: var(--grey);
  line-height: 1.5;
}
.section--navy .meta { color: rgba(255, 255, 255, 0.62); }

.prose { max-width: 36em; }
.prose p + h3 { margin-top: 2em; margin-bottom: 0.6em; }

.rule {
  height: 1px;
  background: var(--grey-light);
  border: 0;
  margin: 0;
}
.section--navy .rule { background: rgba(255, 255, 255, 0.16); }

.rule--gold { background: var(--gold); width: 56px; height: 2px; }

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 clamp(1.75rem, 2.5vw, 2rem);
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: var(--fs-support);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

.btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--navy);
  color: var(--white);
}

/* On dark backgrounds */
.on-navy .btn--primary,
.section--navy .btn--primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.on-navy .btn--primary:hover,
.section--navy .btn--primary:hover,
.on-navy .btn--primary:focus-visible,
.section--navy .btn--primary:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.on-navy .btn--secondary,
.section--navy .btn--secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.on-navy .btn--secondary:hover,
.section--navy .btn--secondary:hover,
.on-navy .btn--secondary:focus-visible,
.section--navy .btn--secondary:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: var(--sp-block);
}

/* Text link with arrow */
.tlink {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--fs-support);
  font-weight: 600;
  color: var(--navy);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--grey-light);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tlink .arw {
  transition: transform var(--t-fast) var(--ease);
  font-weight: 400;
}
.tlink:hover, .tlink:focus-visible { border-bottom-color: var(--gold); color: var(--gold); }
.tlink:hover .arw, .tlink:focus-visible .arw { transform: translateX(5px); }

.section--navy .tlink { color: var(--white); border-bottom-color: rgba(255, 255, 255, 0.28); }
.section--navy .tlink:hover, .section--navy .tlink:focus-visible { color: var(--gold); border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   6. IMAGE TREATMENT
   -------------------------------------------------------------------------- */
.fig {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
}
.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.fig--4x3  { aspect-ratio: 4 / 3; }
.fig--3x2  { aspect-ratio: 3 / 2; }
.fig--1x1  { aspect-ratio: 1 / 1; }
.fig--4x5  { aspect-ratio: 4 / 5; }
.fig--16x9 { aspect-ratio: 16 / 9; }
.fig--tall { aspect-ratio: 3 / 4; }

.fig-caption {
  margin-top: 0.85rem;
  font-size: var(--fs-support);
  color: var(--grey);
}

/* --------------------------------------------------------------------------
   7. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--grey-light);
  transition: background-color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

/* Transparent over hero, solidifies on scroll */
.header--over {
  background: transparent;
  border-bottom-color: transparent;
}
.header--over .header__mark,
.header--over .nav__link,
.header--over .nav-toggle { color: var(--white); }
.header--over .header__mark .dot { background: var(--gold); }

.header.is-solid {
  background: var(--white);
  border-bottom-color: var(--grey-light);
}
.header.is-solid .header__mark,
.header.is-solid .nav__link,
.header.is-solid .nav-toggle { color: var(--navy); }

.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Wordmark — geometry: square counter + gold marker, no logo distortion */
.header__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--navy);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--t-base) var(--ease);
}
.header__mark .dot {
  width: 9px; height: 9px;
  background: var(--gold);
  flex: none;
}
.header__mark .sub {
  font-weight: 400;
  letter-spacing: 0.1em;
  opacity: 0.62;
}
@media (max-width: 480px) { .header__mark .sub { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.9rem); }
@media (max-width: 1099px) { .nav--desktop { display: none; } }

.nav__link {
  position: relative;
  font-size: var(--fs-support);
  font-weight: 500;
  color: var(--navy);
  padding-block: 6px;
  transition: color var(--t-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--gold); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  padding: 10px 0;
  color: var(--navy);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (max-width: 1099px) { .nav-toggle { display: inline-flex; } }

.nav-toggle__bars { position: relative; width: 26px; height: 12px; flex: none; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Full-screen mobile navigation */
.navpanel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy);
  color: var(--white);
  padding: calc(var(--header-h) + 2.5rem) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              visibility var(--t-base);
}
.navpanel.is-open { opacity: 1; visibility: visible; transform: none; }

.navpanel__list { display: flex; flex-direction: column; }
.navpanel__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  min-height: 56px;
  font-size: clamp(1.5rem, 6vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: color var(--t-fast) var(--ease);
}
.navpanel__list a .idx {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold);
  flex: none;
}
.navpanel__list a:hover, .navpanel__list a:focus-visible { color: var(--gold); }
.navpanel__list a[aria-current="page"] { color: var(--gold); }

.navpanel__foot {
  font-size: var(--fs-support);
  color: rgba(255, 255, 255, 0.66);
}
.navpanel__foot a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
}
@media (max-width: 767px) { .hero { min-height: 88vh; min-height: 88svh; } }

.hero__media { position: absolute; inset: 0; }
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7, 22, 40, 0.82) 0%, rgba(7, 22, 40, 0.55) 45%, rgba(7, 22, 40, 0.18) 100%),
    linear-gradient(to top, rgba(7, 22, 40, 0.6) 0%, rgba(7, 22, 40, 0) 55%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(3.5rem, 8vh, 7rem);
}
.hero__content { grid-column: 1 / span 8; }
@media (max-width: 899px) { .hero__content { grid-column: 1 / span 6; } }
@media (max-width: 599px) { .hero__content { grid-column: 1 / span 2; } }

.hero h1 { color: var(--white); margin-bottom: 1.25rem; }

.hero__line {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.4rem;
}
.hero__brandline {
  font-size: var(--fs-support);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-bottom: 0;
}

.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 8vh, 7rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero__cue i {
  display: block;
  width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--gold), rgba(181, 138, 58, 0));
}
@media (max-width: 899px) { .hero__cue { display: none; } }

/* Page hero (interior pages) */
.phero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 7.5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.phero__title { grid-column: 1 / span 7; }
.phero__aside { grid-column: 9 / span 4; align-self: end; }
@media (max-width: 899px) {
  .phero__title { grid-column: 1 / span 6; }
  .phero__aside { grid-column: 1 / span 6; margin-top: 2rem; }
}
@media (max-width: 599px) {
  .phero__title, .phero__aside { grid-column: 1 / span 2; }
}
.phero__eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.phero h1 { color: var(--white); }
.phero__aside p { color: rgba(255, 255, 255, 0.78); margin: 0; }

/* --------------------------------------------------------------------------
   9. EDITORIAL SPLIT (Who We Are and siblings)
   -------------------------------------------------------------------------- */
.split__head { grid-column: 1 / span 5; }
.split__body { grid-column: 7 / span 5; }
@media (max-width: 899px) {
  .split__head { grid-column: 1 / span 6; }
  .split__body { grid-column: 1 / span 6; margin-top: 2rem; }
}
@media (max-width: 599px) {
  .split__head, .split__body { grid-column: 1 / span 2; }
}

/* --------------------------------------------------------------------------
   10. PROJECT SYSTEM
   -------------------------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem) var(--col-gap);
}
@media (max-width: 767px) { .projects-grid { grid-template-columns: 1fr; } }

.pcard { display: block; }
.pcard .fig img { will-change: transform; }
.pcard:hover .fig img,
.pcard:focus-visible .fig img { transform: scale(1.035); }

/* Editorial rhythm — alternating proportions, offset second column */
.projects-grid .pcard .fig { aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .projects-grid .pcard:nth-child(even) { margin-top: clamp(2rem, 6vw, 5.5rem); }
}
@media (max-width: 767px) {
  .projects-grid .pcard .fig { aspect-ratio: 16 / 9 !important; }
}

.pcard__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--grey-light);
}
.pcard__name { font-size: var(--fs-sub); font-weight: 600; color: var(--navy); }
.pcard__sub { font-size: var(--fs-support); color: var(--grey); margin-top: 0.25rem; }
.pcard__arw {
  font-size: 1.1rem;
  color: var(--gold);
  flex: none;
  transition: transform var(--t-fast) var(--ease);
}
.pcard:hover .pcard__arw { transform: translateX(5px); }

/* Filters */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--sp-block);
}
.filter {
  min-height: 48px;
  padding: 0 1.15rem;
  background: transparent;
  border: 1px solid var(--grey-light);
  border-radius: 2px;
  font-size: var(--fs-support);
  font-weight: 500;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
/* State is not carried by colour alone */
.filter[aria-pressed="true"]::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 0.6em;
  background: var(--gold);
  vertical-align: 1px;
}

/* Empty / unpublished states */
.empty {
  border: 1px solid var(--grey-light);
  border-left: 2px solid var(--gold);
  padding: clamp(2rem, 4vw, 3.25rem);
  max-width: 44em;
}
.empty h3 { font-size: var(--fs-sub); margin-bottom: 0.75rem; }
.empty p { color: var(--grey); }
.empty p:last-of-type { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. CAPABILITIES — numbered editorial system
   -------------------------------------------------------------------------- */
.cap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: start;
}
.cap__list { grid-column: 1 / span 7; }
.cap__media { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + 3rem); }
@media (max-width: 1099px) {
  .cap { grid-template-columns: 1fr; }
  .cap__list { grid-column: 1 / -1; }
  .cap__media { display: none; }
}

.cap__item {
  border-top: 1px solid var(--grey-light);
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
}
.cap__item:last-child { border-bottom: 1px solid var(--grey-light); }

.cap__btn {
  display: grid;
  grid-template-columns: 3.75rem 1fr;
  gap: 1.25rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.cap__num {
  font-size: var(--fs-support);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding-top: 0.45em;
}
.cap__btn > span:last-child { min-width: 0; }

.cap__name {
  display: block;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.02em;
  transition: color var(--t-fast) var(--ease);
}
.cap__btn:hover .cap__name { color: var(--gold); }
.cap__copy {
  display: block;
  margin-top: 0.5rem;
  color: var(--grey);
  font-size: var(--fs-support);
  line-height: 1.6;
  max-width: 38em;
}
.cap__item[data-active="true"] .cap__name { color: var(--gold); }

/* On desktop the copy is revealed with the active item; on mobile it is always shown */
@media (min-width: 1100px) {
  .cap__copy {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    transition: grid-template-rows var(--t-base) var(--ease),
                opacity var(--t-base) var(--ease),
                margin-top var(--t-base) var(--ease);
  }
  .cap__copy > span { overflow: hidden; }
  .cap__item[data-active="true"] .cap__copy {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.6rem;
  }
}

.cap__media .fig { aspect-ratio: 3 / 4; }
.cap__media .fig img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.cap__media .fig img.is-shown { opacity: 1; }

/* Capabilities page — alternating full sections */
.capblock { padding-block: clamp(3rem, 6vw, 5.5rem); }
.capblock + .capblock { border-top: 1px solid var(--grey-light); }
.capblock__media { grid-column: 1 / span 5; }
.capblock__body  { grid-column: 7 / span 5; }
.capblock--flip .capblock__media { grid-column: 8 / span 5; grid-row: 1; }
.capblock--flip .capblock__body  { grid-column: 1 / span 5; grid-row: 1; }
@media (max-width: 899px) {
  .capblock__media, .capblock__body,
  .capblock--flip .capblock__media, .capblock--flip .capblock__body {
    grid-column: 1 / span 6; grid-row: auto;
  }
  .capblock__body { margin-top: 1.75rem; }
}
@media (max-width: 599px) {
  .capblock__media, .capblock__body,
  .capblock--flip .capblock__media, .capblock--flip .capblock__body { grid-column: 1 / span 2; }
}
.capblock__num {
  font-size: var(--fs-support);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   12. SECTORS
   -------------------------------------------------------------------------- */
.sector {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.sector + .sector { border-top: 1px solid var(--grey-light); }
.sector__media { grid-column: 1 / span 6; }
.sector__body  { grid-column: 8 / span 5; }
.sector--flip .sector__media { grid-column: 7 / span 6; grid-row: 1; }
.sector--flip .sector__body  { grid-column: 1 / span 5; grid-row: 1; }
@media (max-width: 899px) {
  .sector__media, .sector__body,
  .sector--flip .sector__media, .sector--flip .sector__body {
    grid-column: 1 / span 6; grid-row: auto;
  }
  .sector__body { margin-top: 1.5rem; }
}
@media (max-width: 599px) {
  .sector__media, .sector__body,
  .sector--flip .sector__media, .sector--flip .sector__body { grid-column: 1 / span 2; }
}
.sector__name {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.sector .fig { aspect-ratio: 3 / 2; }
.sector:hover .fig img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   13. PROCESS — How We Deliver
   -------------------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.section:not(.section--navy) .process { border-top-color: var(--grey-light); }

.step { padding: 2rem 1.25rem 0 0; position: relative; }
.step + .step { border-left: 1px solid var(--grey-light); padding-left: 1.5rem; }
.section--navy .step + .step { border-left-color: rgba(255, 255, 255, 0.2); }

.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 28px; height: 2px;
  background: var(--gold);
}
.step + .step::before { left: -1px; }

.step__num {
  font-size: var(--fs-support);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 0.9rem;
}
.step__name {
  font-size: clamp(0.9375rem, 1.3vw, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.section--navy .step__name { color: var(--white); }
.step__copy { font-size: var(--fs-support); line-height: 1.6; color: var(--grey); }
.section--navy .step__copy { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 1099px) { .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .step:nth-child(3n+1)::before { left: 0; }
}
@media (max-width: 767px) {
  .process { grid-template-columns: 1fr; border-top: 0; }
  .step, .step + .step {
    border-left: 0;
    padding: 1.75rem 0;
    border-top: 1px solid var(--grey-light);
  }
  .section--navy .step, .section--navy .step + .step { border-top-color: rgba(255, 255, 255, 0.2); }
  .step::before, .step + .step::before { left: 0; }
  .step + .step { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   14. RESPONSIBILITY PILLARS
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--col-gap);
}
@media (max-width: 899px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem var(--col-gap); } }
@media (max-width: 559px) { .pillars { grid-template-columns: 1fr; gap: 2rem; } }

.pillar { border-top: 1px solid rgba(255, 255, 255, 0.24); padding-top: 1.5rem; }
.pillar__name {
  font-size: var(--fs-support);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.9rem;
}
.pillar p { font-size: var(--fs-support); line-height: 1.65; margin: 0; }

/* Light variant for the Responsibility page */
.pillars--light .pillar { border-top-color: var(--grey-light); }
.pillars--light .pillar__name { color: var(--navy); }
.pillars--light .pillar p { color: var(--grey); }

/* --------------------------------------------------------------------------
   15. BRAND STATEMENT
   -------------------------------------------------------------------------- */
.statement {
  background: var(--navy);
  color: var(--white);
  padding-block: clamp(5rem, 13vw, 12rem);
}
.statement p {
  font-size: var(--fs-statement);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--white);
  max-width: 16em;
  margin: 0;
}
.statement .ln { display: block; overflow: hidden; }
.statement .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--t-cinematic) var(--ease);
}
.statement .ln:nth-child(2) > span { transition-delay: 120ms; }
.statement.is-in .ln > span { transform: none; }
.statement .ln:nth-child(2) > span { color: var(--gold); }

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.5rem; }

.field label {
  font-size: var(--fs-support);
  font-weight: 600;
  color: var(--navy);
}
.field .req { color: var(--gold); }
.field .hint { font-size: var(--fs-support); color: var(--grey); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: 2px;
  color: var(--charcoal);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline-offset: 1px; }

.field input[type="file"] { padding: 0.75rem; background: var(--off-white); }

.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #A3341F; border-width: 2px; }

.field__error {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-support);
  font-weight: 600;
  color: #A3341F;
}
.field__error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; flex: none; }
.field--invalid .field__error { display: flex; }

.field--consent {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.85rem;
}
.field--consent input { width: 22px; height: 22px; min-height: 0; margin-top: 2px; accent-color: var(--navy); }
.field--consent label { font-weight: 400; color: var(--charcoal); }

.form__status {
  display: none;
  border-left: 2px solid var(--gold);
  background: var(--off-white);
  padding: 1.25rem 1.5rem;
  font-size: var(--fs-support);
}
.form__status.is-shown { display: block; }

.btn[data-loading="true"] { pointer-events: none; opacity: 0.72; }
.btn[data-loading="true"]::after {
  content: "";
  width: 14px; height: 14px;
  margin-left: 0.7rem;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   17. CONTACT / MANAGEMENT / INSIGHTS
   -------------------------------------------------------------------------- */
.contact__info { grid-column: 1 / span 4; }
.contact__form { grid-column: 6 / span 7; }
@media (max-width: 899px) {
  .contact__info { grid-column: 1 / span 6; }
  .contact__form { grid-column: 1 / span 6; margin-top: 3rem; }
}
@media (max-width: 599px) {
  .contact__info, .contact__form { grid-column: 1 / span 2; }
}

.infoblock + .infoblock { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--grey-light); }
.infoblock h3 {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.infoblock address { font-style: normal; line-height: 1.75; }

.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem) var(--col-gap);
}
@media (max-width: 899px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .people { grid-template-columns: 1fr; } }

.person .fig { aspect-ratio: 4 / 5; background: var(--off-white); }
.person__name { font-size: var(--fs-sub); margin-top: 1.1rem; }
.person__role { font-size: var(--fs-support); color: var(--grey); margin-top: 0.3rem; }

.person__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px dashed var(--grey-light);
  color: var(--grey);
  font-size: var(--fs-support);
  padding: 1rem;
  text-align: center;
}

.insights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 3.5rem) var(--col-gap);
}
@media (max-width: 899px) { .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .insights { grid-template-columns: 1fr; } }

.insight .fig { aspect-ratio: 3 / 2; }
.insight__cat {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.1rem 0 0.6rem;
}
.insight__title { font-size: var(--fs-sub); }
.insight__date { font-size: var(--fs-support); color: var(--grey); margin-top: 0.6rem; }

/* Vacancies */
.vacancy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--grey-light);
}
.vacancy:first-child { border-top: 1px solid var(--grey-light); }

/* --------------------------------------------------------------------------
   18. CTA BAND
   -------------------------------------------------------------------------- */
.ctaband__body { grid-column: 1 / span 6; }
.ctaband__side { grid-column: 8 / span 5; align-self: end; }
@media (max-width: 899px) {
  .ctaband__body { grid-column: 1 / span 6; }
  .ctaband__side { grid-column: 1 / span 6; margin-top: 2rem; }
}
@media (max-width: 599px) {
  .ctaband__body, .ctaband__side { grid-column: 1 / span 2; }
}

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: 2.5rem;
}
.footer h2, .footer h3 { color: var(--white); }

.footer__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--white);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer__mark .dot { width: 9px; height: 9px; background: var(--gold); flex: none; }

.footer__tagline {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-top: 1.25rem;
}

.footer__brand { grid-column: 1 / span 4; }
.footer__nav   { grid-column: 6 / span 4; }
.footer__addr  { grid-column: 10 / span 3; }
@media (max-width: 899px) {
  .footer__brand { grid-column: 1 / span 6; }
  .footer__nav   { grid-column: 1 / span 3; margin-top: 3rem; }
  .footer__addr  { grid-column: 4 / span 3; margin-top: 3rem; }
}
@media (max-width: 599px) {
  .footer__brand, .footer__nav, .footer__addr { grid-column: 1 / span 2; }
  .footer__nav, .footer__addr { margin-top: 2.5rem; }
}

.footer__list { columns: 2; column-gap: var(--col-gap); }
@media (max-width: 899px) { .footer__list { columns: 1; } }
.footer__list a {
  display: block;
  padding: 0.42rem 0;
  font-size: var(--fs-support);
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--t-fast) var(--ease);
}
.footer__list a:hover, .footer__list a:focus-visible { color: var(--gold); }

.footer__addr address { font-style: normal; font-size: var(--fs-support); line-height: 1.85; }
.footer__addr a { border-bottom: 1px solid rgba(255, 255, 255, 0.28); }
.footer__addr a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-support);
  color: rgba(255, 255, 255, 0.6);
}
.footer__base nav { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.footer__base a:hover { color: var(--gold); }

/* Footer brand moment */
.footer__statement {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0 0 clamp(3rem, 7vw, 6rem);
  max-width: 14em;
}
.footer__statement span { color: var(--gold); display: block; }

/* --------------------------------------------------------------------------
   20. 404 / UTILITY PAGES
   -------------------------------------------------------------------------- */
.util {
  min-height: 70vh;
  display: grid;
  align-items: center;
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: 5rem;
}
.util__code {
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--grey-light);
  margin-bottom: 1.5rem;
}

.legal { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); }
.legal__body { grid-column: 3 / span 8; }
@media (max-width: 899px) { .legal__body { grid-column: 1 / span 6; } }
@media (max-width: 599px) { .legal__body { grid-column: 1 / span 2; } }
.legal__body h2 { font-size: var(--fs-sub); margin: 2.5rem 0 0.75rem; }
.legal__body h2:first-of-type { margin-top: 0; }
.legal__body ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.15em; }
.legal__body li { margin-bottom: 0.4em; }

/* --------------------------------------------------------------------------
   21. MOTION — single reveal system
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-mask] { overflow: hidden; }
[data-reveal-mask] > * {
  transform: translateY(100%);
  transition: transform var(--t-cinematic) var(--ease);
}
[data-reveal-mask].is-in > * { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-reveal-mask] > *, .statement .ln > span {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header, .navpanel, .hero__cue, .footer__list, .btn { display: none !important; }
  body { color: #000; }
  .section { padding-block: 1.5rem; }
}

/* ========================================================================== 
   23. 2026 VISUAL REFINEMENT
   Editorial BMA/NKEY confidence + modern property-development composition,
   translated into Deino's construction and infrastructure brand system.
   ========================================================================== */

/* Floating, precise navigation shell */
.header {
  height: calc(var(--header-h) + 12px);
  background: transparent;
  border-bottom: 0;
  padding-top: 12px;
  pointer-events: none;
}
.header__inner {
  min-height: 64px;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--container);
  padding-inline: clamp(1rem, 2vw, 1.5rem);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(10,39,71,.09);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(7,28,51,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events: auto;
}
.header--over .header__mark,
.header--over .nav__link,
.header--over .nav-toggle { color: var(--navy); }
.header.is-solid { background: transparent; border-bottom: 0; }
.header.is-solid .header__inner {
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 38px rgba(7,28,51,.12);
}
@media (max-width: 767px) {
  .header { height: calc(var(--header-h) + 10px); padding-top: 10px; }
  .header__inner { width: calc(100% - 24px); border-radius: 13px; min-height: 58px; }
}

/* New split hero */
.hero--split {
  min-height: auto;
  color: var(--charcoal);
  display: block;
  padding: calc(var(--header-h) + 42px) 0 clamp(2rem,4vw,3.5rem);
  background: var(--white);
  overflow: visible;
}
.hero-split__grid {
  min-height: min(760px, calc(100svh - 128px));
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  gap: 10px;
}
.hero-split__visual,
.hero-split__panel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}
.hero-split__visual { background: var(--navy); min-height: 620px; }
.hero-split__visual picture,
.hero-split__visual img { width: 100%; height: 100%; }
.hero-split__visual img { object-fit: cover; object-position: center; transition: transform 1.4s var(--ease); }
.hero-split__visual:hover img { transform: scale(1.018); }
.hero-split__visual-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,28,51,.66), rgba(7,28,51,.02) 45%);
}
.hero-split__stamp {
  position: absolute;
  left: clamp(1.4rem, 3vw, 2.5rem);
  bottom: clamp(1.4rem, 3vw, 2.5rem);
  z-index: 2;
  margin: 0;
  color: var(--white);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.hero-split__stamp span { width: 9px; height: 9px; background: var(--gold); border-radius: 50%; }
.hero-split__panel {
  background: var(--off-white);
  padding: clamp(2.25rem, 5vw, 5rem) clamp(1.75rem, 4.5vw, 4.5rem) clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-split__eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 clamp(2rem,5vh,4rem);
}
.hero-split__title {
  font-size: clamp(3.5rem, 7vw, 7.4rem);
  line-height: .86;
  letter-spacing: -.065em;
  color: var(--navy);
  max-width: 5.2em;
}
.hero-split__lead {
  font-size: clamp(1.05rem,1.5vw,1.35rem);
  font-weight: 600;
  color: var(--navy);
  margin: 1.7rem 0 .7rem;
}
.hero-split__copy {
  max-width: 32em;
  color: var(--grey);
  font-size: clamp(.9rem, 1vw, 1rem);
  line-height: 1.7;
}
.hero-split__panel .btn-row { align-items: center; margin-top: clamp(1.8rem,4vh,3rem); }
.hero-split__foot {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10,39,71,.12);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.hero-split__foot strong { display: block; margin-top: .2rem; color: var(--navy); font-size: .95rem; }
.hero-split__micro { font-size: .68rem; text-transform: uppercase; letter-spacing: .13em; color: var(--grey); }
.hero-split__roundlink {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: 1.2rem;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.hero-split__roundlink:hover { transform: translateY(4px); background: var(--navy); color: var(--white); }
@media (max-width: 999px) {
  .hero-split__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__visual { min-height: min(70svh, 620px); }
  .hero-split__panel { min-height: 520px; }
}
@media (max-width: 599px) {
  .hero--split { padding-top: calc(var(--header-h) + 32px); }
  .hero-split__wrap { padding-inline: 12px; }
  .hero-split__grid { gap: 8px; }
  .hero-split__visual, .hero-split__panel { border-radius: 16px; }
  .hero-split__visual { min-height: 52svh; }
  .hero-split__panel { min-height: auto; padding: 2rem 1.35rem 1.35rem; }
  .hero-split__eyebrow { margin-bottom: 2.2rem; }
  .hero-split__title { font-size: clamp(3.6rem,18vw,5.1rem); }
  .hero-split__panel .btn-row { align-items: flex-start; flex-direction: column; }
}

/* Editorial introduction */
.section--intro { padding-top: clamp(5rem, 10vw, 9rem); }
.intro-editorial__label { grid-column: 1 / span 2; }
.intro-editorial__headline { grid-column: 4 / span 6; }
.intro-editorial__copy { grid-column: 10 / span 3; align-self: end; }
.intro-editorial__copy .tlink { margin-top: 1rem; }
@media (max-width: 999px) {
  .intro-editorial__label { grid-column: 1 / span 6; }
  .intro-editorial__headline { grid-column: 1 / span 6; margin-bottom: 2rem; }
  .intro-editorial__copy { grid-column: 2 / span 5; }
}
@media (max-width: 599px) {
  .intro-editorial__label, .intro-editorial__headline, .intro-editorial__copy { grid-column: 1 / span 2; }
}

/* Three-card editorial deck inspired by the supplied reference, without fake metrics */
.feature-deck {
  display: grid;
  grid-template-columns: .92fr 1.08fr .92fr;
  gap: 10px;
  margin-top: clamp(3.5rem,7vw,7rem);
}
.feature-card {
  position: relative;
  min-height: 390px;
  border-radius: 18px;
  overflow: hidden;
  padding: clamp(1.4rem,2.5vw,2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(7,28,51,.10); }
.feature-card--navy { background: var(--navy); color: rgba(255,255,255,.78); }
.feature-card--navy h3 { color: var(--white); }
.feature-card--light { background: color-mix(in srgb, var(--gold) 11%, var(--off-white)); color: var(--charcoal); }
.feature-card--light h3 { color: var(--navy); }
.feature-card--image { color: var(--white); }
.feature-card--image picture, .feature-card--image img { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-card--image img { object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.feature-card--image:hover img { transform: scale(1.04); }
.feature-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,28,51,.82), rgba(7,28,51,.12) 70%); }
.feature-card__num { position: relative; z-index: 2; font-size: .72rem; letter-spacing: .12em; color: var(--gold); font-weight: 700; }
.feature-card__body { position: relative; z-index: 2; }
.feature-card__kicker { margin: 0 0 .7rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 600; opacity: .82; }
.feature-card h3 { font-size: clamp(1.55rem,2.4vw,2.25rem); max-width: 11em; letter-spacing: -.035em; }
.feature-card__link { margin-top: 1.8rem; display: inline-flex; gap: .65rem; align-items: center; font-size: .78rem; font-weight: 600; }
.feature-card__link i { font-style: normal; transition: transform var(--t-fast) var(--ease); }
.feature-card:hover .feature-card__link i { transform: translateX(5px); }
.feature-card--image:hover .feature-card__link i { transform: translateY(4px); }
@media (max-width: 899px) { .feature-deck { grid-template-columns: 1fr; } .feature-card { min-height: 330px; } }

/* Projects, capability shell and section headers */
.section--projects { background: var(--white); }
.section-intro-row { margin-bottom: var(--sp-block); }
.section-intro-row__action { grid-column: 10 / span 3; align-self: end; justify-self: end; }
@media (max-width: 899px) { .section-intro-row__action { grid-column: 1 / span 6; justify-self: start; margin-top: 1rem; } }
@media (max-width: 599px) { .section-intro-row__action { grid-column: 1 / span 2; } }
.section--capabilities { background: var(--white); }
.capabilities-shell {
  background: var(--off-white);
  border-radius: 24px;
  padding: clamp(2rem,5vw,5.5rem);
}
.capabilities-shell__intro { margin-bottom: var(--sp-block); }
.capabilities-shell__action { margin-top: clamp(2rem,4vw,3.5rem); }
.cap__media .fig { border-radius: 18px; }
@media (max-width: 599px) { .capabilities-shell { border-radius: 16px; padding: 2rem 1.2rem; } }

/* Compact visual sector gallery */
.section--sectors { background: var(--white); }
.sector-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-rows: minmax(330px, 34vw);
  gap: 10px;
}
.sector-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  color: var(--white);
  min-height: 330px;
}
.sector-card--wide { grid-column: span 2; }
.sector-card picture, .sector-card img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sector-card img { object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.sector-card:hover img { transform: scale(1.035); }
.sector-card__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,28,51,.78), rgba(7,28,51,.04) 64%); }
.sector-card__num { position: absolute; top: 1.35rem; left: 1.35rem; z-index: 2; font-size: .7rem; letter-spacing: .14em; font-weight: 600; color: var(--gold); }
.sector-card__name { position: absolute; z-index: 2; left: 1.35rem; right: 1.35rem; bottom: 1.35rem; font-size: clamp(1.45rem,2.3vw,2.35rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.sector-action { margin-top: 2rem; }
@media (max-width: 899px) {
  .sector-cards { grid-template-columns: repeat(2,1fr); grid-auto-rows: 360px; }
  .sector-card--wide { grid-column: span 1; }
}
@media (max-width: 599px) { .sector-cards { grid-template-columns: 1fr; grid-auto-rows: 340px; } .sector-card { min-height: 340px; border-radius: 14px; } }

/* Full-width process band, inspired by the dark metric panel in the reference */
.process-band {
  position: relative;
  padding: clamp(5rem,9vw,9rem) 0;
  color: var(--white);
  overflow: hidden;
  background: var(--navy-deep);
}
.process-band__media, .process-band__scrim { position: absolute; inset: 0; }
.process-band__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.process-band__scrim { background: linear-gradient(100deg, rgba(7,28,51,.97) 5%, rgba(7,28,51,.88) 48%, rgba(7,28,51,.72) 100%); }
.process-band__inner { position: relative; z-index: 2; }
.process-band h2, .process-band h3 { color: var(--white); }
.process-band__intro { margin-bottom: clamp(3rem,6vw,5.5rem); }
.process-band .lede { color: rgba(255,255,255,.74); }
.process--overlay { border-top-color: rgba(255,255,255,.25); }
.process--overlay .step + .step { border-left-color: rgba(255,255,255,.18); }
.process--overlay .step::before { background: var(--gold); }
.process--overlay .step__num { color: var(--gold); font-size: clamp(1.6rem,3vw,2.8rem); letter-spacing: -.04em; }
.process--overlay .step__copy { color: rgba(255,255,255,.68); }

/* Responsibility, editorial two-column treatment */
.responsibility-modern { padding-block: clamp(5rem,9vw,9rem); }
.responsibility-modern__intro { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
.responsibility-modern__intro .lede { margin: 2rem 0; color: rgba(255,255,255,.72); }
.responsibility-modern__list { grid-column: 7 / span 6; }
.responsibility-modern__list .pillar { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1.2rem; padding: 1.8rem 0; border-top: 1px solid rgba(255,255,255,.18); }
.responsibility-modern__list .pillar:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.pillar__num { grid-column: 1; grid-row: 1 / span 2; color: var(--gold); font-size: .72rem; letter-spacing: .1em; font-weight: 600; padding-top: .35rem; }
.responsibility-modern__list .pillar__name { grid-column: 2; }
.responsibility-modern__list .pillar p { grid-column: 2; }
@media (max-width: 899px) {
  .responsibility-modern__intro { grid-column: 1 / span 6; position: static; }
  .responsibility-modern__list { grid-column: 1 / span 6; margin-top: 3rem; }
}
@media (max-width: 599px) { .responsibility-modern__intro, .responsibility-modern__list { grid-column: 1 / span 2; } }

/* Statement and final CTA */
.statement--modern { background: var(--off-white); padding-block: clamp(5rem,11vw,10rem); }
.statement--modern p { color: var(--navy); max-width: 14em; }
.statement--modern .ln:nth-child(2) > span { color: var(--gold); }
.section--closing { background: var(--white); }
.closing-panel {
  background: var(--off-white);
  border-radius: 22px;
  padding: clamp(2rem,5vw,5rem);
  align-items: end;
}
.closing-panel .btn-row { align-items: center; }
@media (max-width: 599px) { .closing-panel { border-radius: 16px; padding: 2rem 1.25rem; } }

/* Footer receives the same softer architecture as the new homepage */
.footer { margin: 0 10px 10px; border-radius: 22px; overflow: hidden; }
@media (max-width: 599px) { .footer { margin: 0 8px 8px; border-radius: 16px; } }

/* Internal-page polish so the new language is coherent site-wide */
.phero { margin: 0 10px; border-radius: 0 0 22px 22px; padding-top: calc(var(--header-h) + clamp(4.5rem,9vw,8rem)); }
@media (max-width: 599px) { .phero { margin: 0 8px; border-radius: 0 0 16px 16px; } }
.person .fig, .insight .fig, .pcard .fig { border-radius: 14px; }
.empty { border-radius: 12px; background: var(--off-white); }

/* Avoid unsupported CSS in older engines */
@supports not (background: color-mix(in srgb, white, black)) {
  .feature-card--light { background: #F4EFE4; }
}
.hero.hero--split .hero-split__title { color: var(--navy); }

/* ========================================================================== 
   24. 2026 PROFESSIONAL UI/UX REFINEMENT V4
   Precision spacing, stronger brand lockup, desktop/mobile art direction,
   and a cleaner blend of editorial architecture with corporate construction.
   ========================================================================== */
:root {
  --container: 1420px;
  --gutter: clamp(1.25rem, 3.6vw, 4.5rem);
  --surface-cream: #F3F2EC;
  --surface-warm: #EEEAE0;
  --line: rgba(10,39,71,.12);
  --shadow-soft: 0 22px 60px rgba(7,28,51,.08);
  --radius-lg: 20px;
  --radius-md: 14px;
}

body { background: #FBFBFA; }
main { overflow: clip; }
.section { padding-block: clamp(5rem, 8.4vw, 8.75rem); }
.wrap { max-width: var(--container); }

/* Brand lockup ----------------------------------------------------------- */
.header { z-index: 120; height: 94px; padding-top: 14px; }
.header__inner {
  width: min(calc(100% - 28px), calc(var(--container) - 8px));
  min-height: 68px;
  gap: clamp(.8rem,1.4vw,1.35rem);
  padding: 8px 12px 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(10,39,71,.09);
  box-shadow: 0 14px 42px rgba(7,28,51,.075);
}
.header__mark { display: inline-flex; align-items: center; min-width: 174px; color: var(--navy); }
.brand-lockup { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; }
.brand-lockup__mark { width: 39px; height: 39px; flex: 0 0 auto; object-fit: contain; }
.brand-lockup__type { display: flex; flex-direction: column; line-height: 1; }
.brand-lockup__name { color: var(--navy); font-size: .96rem; font-weight: 700; letter-spacing: .13em; }
.brand-lockup__sub { margin-top: .28rem; color: var(--grey); font-size: .55rem; font-weight: 600; letter-spacing: .26em; white-space: nowrap; }
.header--over .header__mark, .header.is-solid .header__mark { color: var(--navy); }
.header--over .brand-lockup__name, .header.is-solid .brand-lockup__name { color: var(--navy); }

.nav { gap: clamp(.75rem,1.35vw,1.35rem); }
.nav__link { font-size: .73rem; font-weight: 600; letter-spacing: -.01em; padding-block: .75rem; }
.nav__link::after { height: 1.5px; bottom: .45rem; }
.header__cta {
  display: inline-flex; align-items: center; gap: .55rem; justify-content: center;
  min-height: 44px; padding: 0 1rem; margin-left: auto;
  background: var(--navy); color: var(--white); border-radius: 7px;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.header__cta span { color: var(--gold); transition: transform var(--t-fast) var(--ease); }
.header__cta:hover, .header__cta:focus-visible { background: var(--gold); color: var(--navy); transform: translateY(-1px); }
.header__cta:hover span { color: var(--navy); transform: translate(2px,-2px); }
.nav-toggle { margin-left: auto; }
@media (max-width: 1260px) {
  .nav--desktop, .header__cta { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 599px) {
  .header { height: 82px; padding-top: 10px; }
  .header__inner { width: calc(100% - 20px); min-height: 60px; padding: 6px 10px; border-radius: 12px; }
  .brand-lockup { gap: .55rem; }
  .brand-lockup__mark { width: 35px; height: 35px; }
  .brand-lockup__name { font-size: .83rem; }
  .brand-lockup__sub { font-size: .48rem; letter-spacing: .22em; }
  .nav-toggle { min-width: 74px; min-height: 44px; }
}

/* Full-screen mobile navigation gets a clearer editorial hierarchy */
.navpanel { background: #F7F6F2; }
.navpanel__list { max-width: 760px; }
.navpanel__list a { color: var(--navy); border-bottom-color: rgba(10,39,71,.12); font-size: clamp(1.65rem, 6vw, 3.6rem); }
.navpanel__list .idx { color: var(--gold); font-size: .65rem; }
.navpanel__foot { color: var(--grey); }

/* Hero ------------------------------------------------------------------- */
.hero--split { padding-top: 110px; padding-bottom: clamp(2.25rem,4vw,4.5rem); background: #FBFBFA; }
.hero-split__wrap { max-width: var(--container); }
.hero-split__grid {
  min-height: min(760px, calc(100svh - 132px));
  grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
  gap: 12px;
}
.hero-split__visual, .hero-split__panel { border-radius: var(--radius-lg); }
.hero-split__visual { min-height: 640px; box-shadow: var(--shadow-soft); }
.hero-split__visual img { object-position: center 42%; }
.hero-split__visual-shade { background: linear-gradient(180deg, rgba(7,28,51,.02) 25%, rgba(7,28,51,.12) 60%, rgba(7,28,51,.72) 100%); }
.hero-split__stamp { font-size: .72rem; letter-spacing: .04em; }
.hero-split__stamp span { width: 7px; height: 7px; border-radius: 1px; }
.hero-split__panel {
  background: var(--surface-cream);
  padding: clamp(2.4rem,4.8vw,4.9rem) clamp(2rem,4vw,4.1rem) clamp(1.65rem,2.6vw,2.3rem);
  isolation: isolate;
  border: 1px solid rgba(10,39,71,.035);
}
.hero-split__panel::after {
  content:""; position:absolute; width: 290px; height: 290px; right: -150px; top: -115px;
  border: 1px solid rgba(181,138,58,.18); border-radius: 50%; z-index: -1;
}
.hero-split__meta { display: flex; align-items: center; gap: .8rem; margin-bottom: clamp(1.6rem,3vh,2.4rem); color: var(--grey); font-size: .66rem; text-transform: uppercase; letter-spacing: .13em; }
.hero-split__meta span:first-child { color: var(--gold); font-weight: 700; }
.hero-split__meta::after { content:""; height: 1px; width: 38px; background: rgba(181,138,58,.48); order: 1; }
.hero-split__eyebrow { margin-bottom: clamp(1.25rem,2.5vh,2rem); }
.hero-split__title { font-size: clamp(4.25rem, 7.35vw, 7.8rem); line-height: .83; letter-spacing: -.07em; max-width: 4.8em; }
.hero-split__lead { max-width: 26em; font-size: clamp(1.05rem,1.45vw,1.28rem); margin-top: 1.8rem; }
.hero-split__copy { max-width: 31em; font-size: .91rem; line-height: 1.72; margin-top: .85rem; }
.hero-split__panel .btn-row { gap: 1.25rem; margin-top: clamp(1.7rem,3.6vh,2.5rem); }
.hero-split__panel .btn--primary { border-radius: 7px; min-height: 50px; }
.hero-split__panel .tlink { font-size: .78rem; }
.hero-split__foot { border-top-color: rgba(10,39,71,.13); padding-top: 1.3rem; }
.hero-split__foot-copy { max-width: 18em; }
.hero-split__roundlink { width: 46px; height: 46px; border-radius: 50%; border-color: rgba(10,39,71,.2); }

@media (max-width: 999px) {
  .hero--split { padding-top: 96px; }
  .hero-split__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__visual { min-height: min(62svh, 610px); }
  .hero-split__panel { min-height: 500px; }
}
@media (max-width: 599px) {
  .hero--split { padding-top: 88px; padding-bottom: 1.25rem; }
  .hero-split__wrap { padding-inline: 10px; }
  .hero-split__grid { gap: 8px; }
  .hero-split__visual, .hero-split__panel { border-radius: 14px; }
  .hero-split__visual { min-height: 46svh; max-height: 500px; }
  .hero-split__visual img { object-position: center 46%; }
  .hero-split__stamp { left: 1.1rem; bottom: 1.1rem; }
  .hero-split__panel { min-height: auto; padding: 1.8rem 1.2rem 1.2rem; }
  .hero-split__meta { margin-bottom: 1.1rem; font-size: .58rem; gap: .55rem; }
  .hero-split__meta::after { width: 22px; }
  .hero-split__eyebrow { margin-bottom: 1.4rem; font-size: .61rem; }
  .hero-split__title { font-size: clamp(3.65rem, 18vw, 5.15rem); line-height: .85; max-width: 5em; }
  .hero-split__lead { margin-top: 1.25rem; font-size: 1.02rem; }
  .hero-split__copy { font-size: .88rem; line-height: 1.65; }
  .hero-split__panel .btn-row { width: 100%; gap: .85rem; margin-top: 1.45rem; }
  .hero-split__panel .btn { width: 100%; }
  .hero-split__panel .tlink { padding-block: .35rem; }
  .hero-split__foot { margin-top: 2rem; }
}

/* Editorial intro -------------------------------------------------------- */
.section--intro { padding-top: clamp(5.5rem,9vw,8.7rem); }
.intro-editorial { row-gap: 1.5rem; }
.intro-editorial__label { grid-column: 1 / span 2; }
.intro-editorial__headline { grid-column: 4 / span 5; }
.intro-editorial__headline .h-page { max-width: 12em; line-height: 1.01; }
.intro-editorial__copy { grid-column: 9 / span 4; max-width: 35em; padding-left: clamp(0rem,1.6vw,1.5rem); }
.intro-editorial__copy > p:not(.lede) { color: var(--grey); font-size: .94rem; }
@media (max-width: 999px) {
  .intro-editorial__label, .intro-editorial__headline { grid-column: 1 / span 6; }
  .intro-editorial__copy { grid-column: 2 / span 5; padding-left: 0; }
}
@media (max-width: 599px) {
  .intro-editorial__label, .intro-editorial__headline, .intro-editorial__copy { grid-column: 1 / span 2; }
  .intro-editorial__headline .h-page { font-size: clamp(2.35rem,11vw,3.1rem); }
}

/* Feature deck ----------------------------------------------------------- */
.feature-deck { grid-template-columns: .95fr 1.22fr .83fr; gap: 12px; margin-top: clamp(4rem,7vw,6.75rem); }
.feature-card { min-height: 420px; padding: clamp(1.45rem,2.2vw,2rem); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px rgba(10,39,71,.045); }
.feature-card--light { background: #EDE8DA; }
.feature-card__num { padding-bottom: 1rem; }
.feature-card h3 { font-size: clamp(1.65rem,2.25vw,2.25rem); line-height: 1.08; }
.feature-card__link { align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: .18rem; }
@media (max-width: 899px) { .feature-deck { grid-template-columns: repeat(2,1fr); } .feature-card:last-child { grid-column: 1 / -1; min-height: 290px; } }
@media (max-width: 599px) { .feature-deck { grid-template-columns: 1fr; } .feature-card, .feature-card:last-child { grid-column: auto; min-height: 315px; } }

/* Capability shell ------------------------------------------------------- */
.capabilities-shell { background: #F1F1ED; border-radius: 18px; padding: clamp(2.1rem,4.7vw,4.8rem); border: 1px solid rgba(10,39,71,.04); }
.cap__item { padding-block: clamp(1.2rem,2vw,1.7rem); }
.cap__btn { grid-template-columns: 3.2rem 1fr; gap: 1rem; }
.cap__name { font-size: clamp(1.2rem,1.8vw,1.58rem); }
.cap__media .fig { border-radius: 12px; box-shadow: 0 18px 50px rgba(7,28,51,.09); }
@media (max-width: 599px) {
  .capabilities-shell { margin-inline: -2px; padding: 1.7rem 1rem; border-radius: 13px; }
  .cap__btn { grid-template-columns: 2.55rem 1fr; }
  .cap__copy { font-size: .83rem; }
}

/* Sectors: photo-led where truthful, graphic-led where contextual images do not fit */
.sector-cards { grid-template-columns: 1.12fr .88fr 1fr; grid-auto-rows: minmax(330px, 31vw); gap: 12px; }
.sector-card { border-radius: var(--radius-md); min-height: 330px; border: 1px solid rgba(10,39,71,.055); }
.sector-card__name { font-size: clamp(1.5rem,2.2vw,2.2rem); }
.sector-card__desc { position: absolute; z-index: 3; left: 1.35rem; right: 1.35rem; bottom: 1.35rem; max-width: 24em; font-size: .78rem; line-height: 1.55; opacity: .78; transform: translateY(12px); transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.sector-card--graphic .sector-card__name { bottom: 5.6rem; }
.sector-card--graphic:hover .sector-card__desc { opacity: 1; transform: translateY(0); }
.sector-card--navy { background: var(--navy); color: var(--white); }
.sector-card--navy .sector-card__name { color: var(--white); }
.sector-card--cream { background: #EDE8DA; color: var(--navy); }
.sector-card--cream .sector-card__name { color: var(--navy); }
.sector-card--cream .sector-card__desc { color: rgba(10,39,71,.72); }
.sector-card__motif { position: absolute; inset: 0; overflow: hidden; }
.sector-card__motif::before, .sector-card__motif::after { content:""; position:absolute; }
.sector-card__motif--roads::before { width: 62%; height: 78%; right: -8%; top: 10%; border: 1px solid rgba(255,255,255,.16); border-radius: 50% 0 0 50%; transform: rotate(-12deg); }
.sector-card__motif--roads::after { width: 1px; height: 75%; right: 35%; top: 12%; background: rgba(181,138,58,.55); transform: rotate(24deg); transform-origin: top; }
.sector-card__motif--industry::before { width: 52%; height: 62%; right: 8%; top: 16%; background: repeating-linear-gradient(90deg, rgba(10,39,71,.12) 0 1px, transparent 1px 30px), repeating-linear-gradient(0deg, rgba(10,39,71,.08) 0 1px, transparent 1px 30px); border: 1px solid rgba(10,39,71,.12); }
.sector-card__motif--industry::after { width: 10px; height: 70%; right: 29%; top: 10%; background: var(--gold); opacity: .75; }
@media (max-width: 899px) { .sector-cards { grid-template-columns: repeat(2,1fr); grid-auto-rows: 350px; } }
@media (max-width: 599px) {
  .sector-cards { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; }
  .sector-card { min-height: 320px; border-radius: 12px; }
  .sector-card--graphic { min-height: 285px; }
  .sector-card__desc { opacity: .88; transform: none; }
}

/* Process band: graphical, not stock-image dependent --------------------- */
.process-band { background: #071C33; padding: clamp(5.5rem,8.8vw,8.5rem) 0; isolation: isolate; }
.process-band__gridmark { position:absolute; inset:0; pointer-events:none; opacity:.28; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 96px 96px; mask-image: linear-gradient(90deg, transparent 0, black 12%, black 100%); }
.process-band::before { content:"BUILD"; position:absolute; right:-.04em; top:48%; transform:translateY(-50%); font-size:clamp(8rem,22vw,24rem); line-height:.7; font-weight:700; letter-spacing:-.08em; color:rgba(255,255,255,.025); pointer-events:none; z-index:0; }
.process-band__intro { position:relative; z-index:2; }
.process-band__intro .split__head { grid-column: 1 / span 6; }
.process-band__intro .split__body { grid-column: 8 / span 5; align-self:end; }
.process--overlay { position:relative; z-index:2; }
.process--overlay .step { padding-top: 1.65rem; }
.process--overlay .step__num { font-size: clamp(1.8rem,2.6vw,2.7rem); }
@media (max-width: 899px) { .process-band__intro .split__head, .process-band__intro .split__body { grid-column: 1 / span 6; } .process-band__intro .split__body { margin-top: 1.5rem; } }
@media (max-width: 599px) { .process-band { padding-block: 4.8rem; } .process-band__intro .split__head, .process-band__intro .split__body { grid-column: 1 / span 2; } .process-band__gridmark { background-size: 64px 64px; } }

/* Responsibility --------------------------------------------------------- */
.responsibility-modern { background: var(--navy); }
.responsibility-modern__intro { top: 116px; }
.responsibility-modern__list .pillar { padding-block: 2rem; grid-template-columns: 3.25rem 1fr; }
.responsibility-modern__list .pillar p { max-width: 36em; font-size: .9rem; line-height: 1.65; }

/* Brand statement -------------------------------------------------------- */
.statement--modern { background: #F4F1E8; position:relative; overflow:hidden; }
.statement--modern::after { content:""; position:absolute; width:clamp(260px,34vw,540px); aspect-ratio:1; right:-11%; bottom:-45%; border:1px solid rgba(181,138,58,.22); border-radius:50%; }
.statement--modern p { max-width: 12.6em; font-size: clamp(3.3rem,7.2vw,7.25rem); letter-spacing:-.058em; line-height:.93; position:relative; z-index:2; }

/* Closing --------------------------------------------------------------- */
.closing-panel { position:relative; overflow:hidden; background:#F1F1ED; border-radius:18px; padding:clamp(2rem,4.5vw,4.5rem); }
.closing-panel__mark { position:absolute; width:240px; height:240px; right:-72px; bottom:-84px; opacity:.055; transform:rotate(-7deg); pointer-events:none; }
.closing-panel__mark img { width:100%; height:100%; }
.closing-panel .ctaband__body, .closing-panel .ctaband__side { position:relative; z-index:2; }
.closing-panel .btn--primary { border-radius:7px; }
@media (max-width:599px) { .closing-panel { border-radius:13px; padding:1.75rem 1.1rem; } .closing-panel__mark { width:160px; height:160px; } }

/* Footer ---------------------------------------------------------------- */
.footer { margin: 0 10px 10px; border-radius: 18px; background:#071C33; }
.footer__mark { display:inline-flex; }
.brand-lockup--footer .brand-lockup__mark { width:46px; height:46px; filter: brightness(0) invert(1); }
.brand-lockup--footer .brand-lockup__name { color:var(--white); font-size:1.05rem; }
.brand-lockup--footer .brand-lockup__sub { color:rgba(255,255,255,.58); }
.footer__tagline { margin-top:1.3rem; font-size:clamp(1.55rem,2.5vw,2.4rem); max-width:11em; line-height:1.08; }
.footer__base { margin-top: clamp(3.5rem,6vw,5.5rem); }
@media (max-width:599px) { .footer { margin:0 7px 7px; border-radius:13px; } }

/* Internal page refinement ---------------------------------------------- */
.phero { margin: 0 10px; border-radius: 0 0 18px 18px; background:#F1F1ED; }
.phero .label { margin-bottom: 1.4rem; }
.phero .h-page { max-width: 13em; }
.person .fig, .insight .fig, .pcard .fig { border-radius: 11px; }
.form input, .form textarea, .form select { border-radius: 6px; }

/* Tighten mobile rhythm across entire site ------------------------------- */
@media (max-width: 599px) {
  :root { --gutter: 1.05rem; --sp-section: 4.7rem; --sp-block: 2.35rem; }
  .section { padding-block: var(--sp-section); }
  .label { margin-bottom: 1rem; }
  .h-section { font-size: clamp(1.95rem,9vw,2.55rem); }
  .lede { font-size: 1rem; line-height: 1.6; }
  .btn { min-height: 50px; }
  .footer__list { display:grid; grid-template-columns:1fr 1fr; column-gap:1.2rem; }
}

/* Final logo and browser-support corrections */
.brand-lockup--footer .brand-lockup__mark {
  filter: none;
  background: var(--white);
  border-radius: 9px;
  padding: 4px;
}
.process-band__gridmark {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 100%);
}
.header__cta { font-weight: 600; }

/* Strict justification for descriptive copy beside large headings */
.split__body p,
.split__body.prose p,
.phero__aside p,
.ref-sidecopy,
.ref-heading-row > p,
.ctaband__side p,
.capblock__body > p:not(.capblock__num) {
  text-align: justify !important;
  text-justify: inter-word;
}