:root {
  --navy: #102231;
  --charcoal: #303c47;
  --blue: #0578b4;
  --cyan: #14b5df;
  --cloud: #f4f8fa;
  --white: #ffffff;
  --ink: #14202a;
  --muted: #556775;
  --line: #cad6dc;
  --display: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --content: 75rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section: clamp(4.5rem, 9vw, 8rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--body); line-height: 1.55; }
body[data-nav-open] { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .22em; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin-top: 0; }
h1, h2, h3 { color: var(--navy); font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: .98; }
h1 { max-width: 12ch; margin-bottom: 1.45rem; font-size: clamp(3.8rem, 8.1vw, 7.6rem); }
h2 { max-width: 16ch; margin-bottom: 1.4rem; font-size: clamp(2.55rem, 5.2vw, 4.8rem); }
h3 { margin-bottom: .65rem; font-size: clamp(1.35rem, 2.3vw, 2rem); }
p { max-width: 68ch; color: var(--muted); }
address { font-style: normal; }

.wrap { width: min(100%, var(--content)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.skip-link { position: fixed; z-index: 1000; top: .75rem; left: .75rem; transform: translateY(-180%); padding: .8rem 1rem; color: var(--white); background: var(--navy); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.section-label { margin-bottom: 1rem; color: var(--blue); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.section-label.on-dark { color: #7fe0f5; }
.fine-print { font-size: .83rem; }

.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .9rem; padding: .82rem 1.1rem; border: 1px solid transparent; font-size: .84rem; font-weight: 600; line-height: 1.15; text-align: center; text-decoration: none; }
.button-blue { color: var(--white); background: var(--blue); }
.button-dark { color: var(--white); background: var(--navy); }
.button-cyan { color: var(--navy); background: var(--cyan); }
.button-outline { color: var(--white); border-color: rgba(255,255,255,.55); background: transparent; }
.button:hover { filter: brightness(.94); }
.text-link { display: inline-flex; align-items: center; gap: .7rem; color: var(--navy); font-size: .9rem; font-weight: 600; text-decoration: none; }
.text-link::after { content: ""; width: 1.8rem; height: 1px; background: var(--blue); transition: width .2s ease; }
.text-link:hover::after { width: 2.6rem; }

.site-header { position: relative; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(16,34,49,.1); }
.header-bar { min-height: 6.2rem; display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 2rem; }
.brand { justify-self: start; }
.brand img { width: 6.4rem; height: auto; }
.primary-nav { display: flex; justify-content: center; gap: clamp(1rem, 2vw, 2rem); }
.primary-nav a { position: relative; padding-block: 2.5rem; color: #314450; font-size: .82rem; font-weight: 600; text-decoration: none; }
.primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1.75rem; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--cyan); transition: transform .2s ease; }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--blue); }
.header-action .button { max-width: 12.5rem; }
.nav-toggle { display: none; }

.page-hero { position: relative; min-height: clamp(38rem, 68vw, 48rem); display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 42%); overflow: hidden; isolation: isolate; background: var(--white); }
.hero-copy { position: relative; z-index: 3; display: flex; min-width: 0; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(8rem, 12vw, 11rem); }
.hero-copy::after { content: ""; position: absolute; z-index: -1; top: 0; right: calc(-1 * clamp(5rem, 10vw, 9rem)); width: clamp(7rem, 13vw, 11rem); height: 100%; background: var(--white); clip-path: polygon(0 0,100% 0,28% 100%,0 100%); }
.hero-summary { max-width: 41rem; margin-bottom: 0; font-size: clamp(1.05rem, 1.55vw, 1.27rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2.2rem; }
.hero-image { min-width: 0; background-image: linear-gradient(180deg,rgba(16,34,49,.02),rgba(16,34,49,.58)), var(--hero-image); background-position: center 18%; background-size: cover; }
.page-hero[style*="project-04"] .hero-image { background-position: center; }

.facet-ribbon { display: grid; grid-template-columns: repeat(4, clamp(2.5rem, 4vw, 4.4rem)); pointer-events: none; }
.facet { aspect-ratio: 1; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.facet-1,.facet-6 { background: var(--cyan); }
.facet-2,.facet-7 { background: var(--blue); }
.facet-3,.facet-8 { background: var(--charcoal); }
.facet-4 { background: var(--white); }
.facet-5 { background: #176c9f; }
.hero-facets { position: absolute; z-index: 5; right: -1.5rem; bottom: 4.8rem; transform: rotate(-45deg); }

.credential-strip { position: relative; z-index: 6; display: grid; grid-template-columns: 1.35fr repeat(3,1fr); margin-top: -5.6rem; color: var(--white); background: rgba(16,34,49,.97); }
.credential-strip > div { min-height: 7rem; display: flex; flex-direction: column; justify-content: center; padding: 1.4rem clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid rgba(255,255,255,.14); }
.credential-strip > div:first-child { padding-left: max(var(--gutter), calc((100vw - var(--content)) / 2 + var(--gutter))); border-left: 0; }
.credential-strip span { color: rgba(255,255,255,.62); font-size: .72rem; }
.credential-strip strong { margin-top: .25rem; font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 600; line-height: 1.1; }

.split-heading { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(18rem,.9fr); gap: clamp(2rem, 8vw, 8rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.split-heading > p { margin-bottom: .35rem; }
.capability-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); }
.capability-item { position: relative; min-width: 0; display: grid; grid-template-columns: 4.4rem 1fr auto; gap: 1.4rem; align-items: start; padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--white); }
.capability-code { color: var(--blue); font-family: var(--display); font-size: 2.8rem; font-weight: 600; line-height: .85; }
.capability-item h3 { font-size: 1.65rem; }
.capability-item p { margin-bottom: 0; font-size: .93rem; }
.capability-item a { align-self: end; color: var(--blue); font-size: .78rem; font-weight: 600; text-decoration: none; }

.delivery-section, .project-management, .quality-section, .client-section, .contact-band { color: var(--white); background: var(--navy); }
.delivery-section { padding-block: var(--section); overflow: hidden; }
.delivery-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; }
.delivery-section h2, .delivery-section h3, .project-management h2, .quality-section h2, .quality-section h3, .client-section h2, .contact-band h2 { color: var(--white); }
.delivery-section p, .project-management p, .quality-section p, .client-section p { color: rgba(255,255,255,.72); }
.delivery-steps { margin: 0; padding: 0; list-style: none; }
.delivery-steps li { display: grid; grid-template-columns: 4rem 1fr; gap: 1.25rem; padding-block: 1.5rem; border-top: 1px solid rgba(255,255,255,.17); }
.delivery-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.17); }
.delivery-steps > li > span { color: var(--cyan); font-family: var(--display); font-size: 2.2rem; }
.delivery-steps p { margin: 0; }

.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.project-item { position: relative; min-width: 0; margin-bottom: 0; overflow: hidden; background: var(--navy); }
.project-item img { width: 100%; aspect-ratio: 1.45; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.project-item:hover img { transform: scale(1.025); }
.project-item figcaption { position: absolute; left: 0; bottom: 0; padding: .65rem 1rem; color: var(--white); background: rgba(16,34,49,.9); font-size: .82rem; font-weight: 600; }

.values-section { padding-block: var(--section); background: var(--cloud); }
.values-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: clamp(3rem, 9vw, 9rem); }
.values-grid ul { margin: 0; padding: 0; list-style: none; }
.values-grid li { display: grid; grid-template-columns: minmax(9rem,.55fr) 1fr; gap: 1.5rem; padding-block: 1.3rem; border-top: 1px solid var(--line); }
.values-grid li:last-child { border-bottom: 1px solid var(--line); }
.values-grid h3 { margin: 0; font-size: 1.35rem; }
.values-grid li p { margin: 0; font-size: .92rem; }

.contact-band { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6rem); }
.contact-band::after { content: ""; position: absolute; top: 0; right: 0; width: 27%; height: 100%; background: linear-gradient(135deg,transparent 38%,rgba(20,181,223,.18) 38%); pointer-events: none; }
.contact-band-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; }
.contact-band h2 { margin-bottom: 0; }
.contact-band-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem; }

.story-grid, .evidence-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(3rem, 9vw, 9rem); }
.long-copy p { font-size: 1.08rem; line-height: 1.78; }
.facts-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: clamp(3rem, 7vw, 6rem); }
.facts-grid > div { padding: 1.4rem; border-top: 2px solid var(--blue); border-right: 1px solid var(--line); }
.facts-grid > div:first-child { border-left: 1px solid var(--line); }
.facts-grid dt { color: var(--muted); font-size: .75rem; }
.facts-grid dd { margin-top: .65rem; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 600; line-height: 1.05; }

.vision-section { background: linear-gradient(90deg,var(--navy) 0 50%,var(--cloud) 50%); }
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; padding-inline: 0; }
.vision-grid article { min-height: 32rem; display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 8vw, 7rem); }
.vision-grid article:first-child h2 { color: var(--white); }
.vision-grid article:first-child p:not(.section-label) { color: rgba(255,255,255,.7); }
.organization-section { background: var(--cloud); }
.org-chart { display: flex; flex-direction: column; align-items: center; text-align: center; }
.org-tier, .org-branches > div { padding: 1rem 1.4rem; border: 1px solid var(--blue); background: var(--white); font-weight: 600; }
.org-tier.leadership { color: var(--white); border-color: var(--navy); background: var(--navy); }
.org-tier.management { color: var(--white); background: var(--blue); }
.org-line { width: 1px; height: 2rem; background: var(--blue); }
.org-branches { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; position: relative; }
.org-branches::before { content: ""; position: absolute; top: -1rem; left: 16.66%; right: 16.66%; height: 1px; background: var(--blue); }
.org-tier.workforce { width: min(100%,32rem); }

.capability-details { border-top: 1px solid var(--line); }
.capability-detail { display: grid; grid-template-columns: 5.5rem minmax(0,1fr); gap: clamp(1.5rem,5vw,4rem); padding-block: clamp(2.5rem,5vw,4.5rem); border-bottom: 1px solid var(--line); scroll-margin-top: 2rem; }
.capability-detail > div:last-child { max-width: 53rem; }
.capability-detail ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.capability-detail li { padding: .45rem .65rem; color: var(--navy); background: var(--cloud); font-size: .78rem; font-weight: 600; }
.project-management, .quality-section { padding-block: var(--section); }
.project-management-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,9vw,9rem); }
.project-management-grid p { font-size: 1.05rem; }

.project-grid-large { gap: 1.5rem; }
.client-section { padding-block: var(--section); }
.client-boards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.client-boards figure { margin: 0; background: var(--white); }
.client-boards img { width: 100%; height: auto; }

.section-nav { display: flex; flex-wrap: wrap; gap: .5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.section-nav a { padding: .65rem 1rem; color: var(--navy); background: var(--cloud); font-size: .8rem; font-weight: 600; text-decoration: none; }
.evidence-grid > div:last-child { max-width: 48rem; }
.evidence-grid h3 { font-size: 1.45rem; }
.target-list { columns: 2; column-gap: 3rem; margin: 0; padding: 0; list-style: none; }
.target-list li { break-inside: avoid; padding: .85rem 0 .85rem 1.4rem; border-top: 1px solid var(--line); position: relative; color: var(--muted); }
.target-list li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: .45rem; height: .45rem; transform: rotate(45deg); background: var(--cyan); }
.quality-section blockquote { margin: 2rem 0 0; padding: 1.5rem 0 1.5rem 1.5rem; color: var(--white); border-left: 4px solid var(--cyan); font-family: var(--display); font-size: 1.65rem; line-height: 1.2; }
.body-list { display: flex; flex-wrap: wrap; gap: .65rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.body-list li { min-width: 5.5rem; padding: .7rem 1rem; text-align: center; color: var(--white); background: var(--charcoal); font-weight: 600; }
.responsibility-section { padding-block: var(--section); background: var(--cloud); }
.responsibility-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); }
.responsibility-grid article { padding: 1.6rem; background: var(--white); }
.responsibility-grid h3 { font-size: 1.4rem; }
.responsibility-grid p { margin-bottom: 0; font-size: .9rem; }

.contact-section { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem,8vw,8rem); align-items: stretch; }
.contact-direct { display: flex; flex-direction: column; align-items: flex-start; }
.contact-method { width: 100%; display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-block: 1.2rem; border-top: 1px solid var(--line); text-decoration: none; }
.contact-method:nth-of-type(2) { border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.contact-method span { color: var(--muted); font-size: .78rem; }
.contact-method strong { overflow-wrap: anywhere; color: var(--navy); font-size: 1.05rem; }
.enquiry-checklist { padding: clamp(2rem,5vw,4rem); color: var(--white); background: var(--navy); }
.enquiry-checklist h2 { color: var(--white); font-size: clamp(2.2rem,4vw,3.6rem); }
.enquiry-checklist ul { margin: 2rem 0 0; padding: 0; list-style: none; }
.enquiry-checklist li { padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.18); }
.office-section { padding-block: var(--section); background: var(--cloud); }
.office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.office { padding: clamp(2rem,5vw,4rem); background: var(--white); }
.office h2 { font-size: clamp(2.5rem,5vw,4.5rem); }
.office address { margin-bottom: 2rem; color: var(--muted); line-height: 1.85; }

.not-found { position: relative; min-height: 66vh; display: flex; align-items: center; overflow: hidden; padding-block: var(--section); background: var(--cloud); }
.not-found .wrap { position: relative; z-index: 2; }
.not-found h1 { max-width: 10ch; }
.error-code { margin-bottom: .5rem; color: var(--blue); font-family: var(--display); font-size: 4rem; font-weight: 600; }
.not-found-facets { position: absolute; right: -2rem; bottom: 2rem; transform: rotate(-45deg) scale(1.3); }

.site-footer { position: relative; overflow: hidden; color: rgba(255,255,255,.7); background: #0a1924; }
.footer-facets { position: absolute; top: -3.4rem; right: -1rem; transform: rotate(-45deg); opacity: .8; }
.footer-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr .7fr 1.35fr 1fr; gap: clamp(2rem,5vw,4rem); padding-top: 6.5rem; padding-bottom: 4rem; }
.footer-intro img { width: 6rem; height: auto; margin-bottom: 1.2rem; filter: brightness(0) invert(1); }
.site-footer h2 { margin-bottom: 1.25rem; color: var(--white); font-size: 1.25rem; }
.site-footer a { display: block; margin-bottom: .75rem; color: rgba(255,255,255,.78); font-size: .86rem; text-decoration: none; }
.footer-links { display: grid; }
.footer-links a[aria-current="page"] { color: var(--cyan); }
.footer-profile { align-self: start; }
.footer-base { display: flex; justify-content: space-between; gap: 2rem; padding-top: 1.3rem; padding-bottom: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .75rem; }

@media (max-width: 68rem) {
  .header-bar { grid-template-columns: 7rem 1fr auto; gap: 1rem; }
  .primary-nav { gap: 1rem; }
  .primary-nav a { font-size: .75rem; }
  .header-action { display: none; }
  .page-hero { grid-template-columns: minmax(0,64%) minmax(0,36%); }
  .capability-item { grid-template-columns: 3.5rem 1fr; }
  .capability-item a { grid-column: 2; }
  .responsibility-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1.2fr .8fr 1.2fr; }
  .footer-profile { grid-column: 1 / -1; }
}

@media (max-width: 52rem) {
  .header-bar { min-height: 5.2rem; grid-template-columns: 1fr auto; }
  .brand img { width: 5.4rem; }
  .nav-toggle { position: relative; z-index: 4; display: flex; align-items: center; gap: .8rem; padding: .7rem 0 .7rem .7rem; color: var(--navy); border: 0; background: transparent; font-size: .82rem; font-weight: 600; }
  .nav-toggle-mark, .nav-toggle-mark::before { display: block; width: 1.4rem; height: 2px; background: currentColor; transition: transform .2s ease; }
  .nav-toggle-mark { position: relative; }
  .nav-toggle-mark::before { content: ""; position: absolute; top: -.42rem; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-mark { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-mark::before { top: 0; transform: rotate(-90deg); }
  .primary-nav { position: fixed; z-index: 3; inset: 0; display: flex; visibility: hidden; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; padding: 7rem var(--gutter) 3rem; opacity: 0; background: var(--white); transition: opacity .2s ease, visibility .2s ease; }
  .primary-nav[data-open] { visibility: visible; opacity: 1; }
  .primary-nav a { width: 100%; padding: .7rem 0; font-family: var(--display); font-size: clamp(2rem,8vw,3.4rem); }
  .primary-nav a::after { display: none; }
  .page-hero { min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto clamp(18rem,70vw,28rem); }
  .hero-copy { padding-top: 5rem; padding-bottom: 5rem; }
  .hero-copy::after { display: none; }
  .hero-image { grid-row: 2; }
  .hero-facets { bottom: clamp(15rem,58vw,22rem); }
  .credential-strip { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 0; }
  .credential-strip > div:first-child { grid-column: auto; padding-left: var(--gutter); }
  .credential-strip > div { min-height: 6rem; border-top: 1px solid rgba(255,255,255,.14); }
  .credential-strip > div:nth-child(odd) { border-left: 0; }
  .split-heading, .delivery-grid, .values-grid, .story-grid, .evidence-grid, .project-management-grid, .contact-band-grid, .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .capability-grid { grid-template-columns: 1fr; }
  .contact-band-actions { justify-content: flex-start; }
  .facts-grid { grid-template-columns: repeat(2,1fr); }
  .vision-section { background: var(--cloud); }
  .vision-grid { grid-template-columns: 1fr; }
  .vision-grid article:first-child { background: var(--navy); }
  .org-branches { grid-template-columns: 1fr; }
  .org-branches::before { display: none; }
  .client-boards { grid-template-columns: 1fr; }
  .target-list { columns: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 38rem) {
  h1 { font-size: clamp(3.45rem,17vw,5.6rem); }
  h2 { font-size: clamp(2.35rem,12vw,3.8rem); }
  .section-heading-row { align-items: flex-start; flex-direction: column; }
  .project-grid { grid-template-columns: 1fr; }
  .facts-grid, .responsibility-grid, .office-grid, .footer-grid { grid-template-columns: 1fr; }
  .facts-grid > div { border-left: 1px solid var(--line); }
  .values-grid li { grid-template-columns: 1fr; gap: .5rem; }
  .capability-detail { grid-template-columns: 3.7rem minmax(0,1fr); }
  .capability-detail h2 { font-size: 1.75rem; }
  .contact-method { grid-template-columns: 1fr; gap: .25rem; }
  .footer-base { flex-direction: column; gap: .4rem; }
}

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