@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Instrument+Sans:wght@400;500;700&display=swap');
:root{--ink:#151313;--paper:#faf8f2;--mint:#bed5ce;--pad:clamp(1.25rem,5vw,5rem)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:500 1rem/1.55 'Instrument Sans',Arial,sans-serif}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-underline-offset:.25em}a:focus-visible{outline:3px solid #489a9a;outline-offset:4px}
.skip{position:absolute;top:-5rem;left:1rem;background:white;color:black;padding:.6rem}.skip:focus{top:1rem;z-index:11}
.masthead{position:sticky;top:0;z-index:10;background:var(--ink);color:var(--paper);border-bottom:1px solid #494746;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--pad)}.masthead > a:first-child{flex-shrink:0}.logo{width:clamp(8rem,14vw,12rem)}
nav{display:flex;gap:clamp(.8rem,2.5vw,2rem);flex-wrap:wrap}nav a,.contact{font-weight:700;text-decoration:none}nav a:hover,.contact:hover{text-decoration:underline}.contact{border-bottom:2px solid #6b9092;white-space:nowrap}
.hero{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:minmax(0,1fr);padding:clamp(2.8rem,6vw,6rem) var(--pad)}
h1,h2,h3,p,figure{margin:0}h1,h2{font-family:'Archivo Black','Arial Black',Arial,sans-serif;font-weight:900;letter-spacing:-.055em;line-height:.98}
h1{font-size:clamp(2.7rem,6.1vw,7.2rem);text-transform:uppercase}h1 .service > span{color:var(--mint)}h2{font-size:clamp(2.2rem,5vw,5rem)}
.hero-copy p{font-size:clamp(1rem,1.45vw,1.25rem);max-width:38ch;margin:1.5rem 0}
.button{display:inline-flex;gap:1.5rem;background:var(--mint);color:var(--ink);padding:.65rem 1rem;font-weight:700;text-decoration:none}.button:hover{background:white}
.hero-art{min-width:0}.art-window{aspect-ratio:.96;overflow:hidden}.art-window img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.18);filter:contrast(1.22);mix-blend-mode:screen}
.hero-art figcaption {
  order: -1;
  margin-inline-start: 6%;
  color: var(--paper);
  margin-bottom: .8rem;
  text-transform: uppercase;
  font: 900 clamp(1rem, 2vw, 2rem)/1.05 'Archivo Black', 'Arial Black', Arial, sans-serif;
  letter-spacing: -.045em;
}
.reach,.work,.university,footer{padding:clamp(2.75rem,5vw,5.5rem) var(--pad)}.reach{background:var(--mint)}
.section-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:1rem}.section-heading p{max-width:38ch}
.chain{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);padding:0;margin:2rem 0 0}.chain li{border-top:2px solid;padding:.75rem .65rem 0 0;font-weight:700;position:relative}.chain li::before{content:'';position:absolute;top:-5px;left:0;width:8px;height:8px;background:var(--ink)}
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,3rem);margin-top:2rem}article{border-top:2px solid;padding-top:1rem}.type{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700}h3{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.08;margin:.7rem 0}
.university{display:flex;align-items:center;gap:clamp(1.2rem,4vw,4rem);background:white;border-top:1px solid #aaa}.university img{width:clamp(5rem,15vw,10rem)}.university p,footer p{margin:1rem 0}.university a{font-weight:700}
footer{background:var(--ink);color:var(--paper)}footer .button{margin-top:1.25rem}
@media(max-width:760px){.masthead{flex-wrap:wrap}nav{order:3;width:100%;border-top:1px solid #494746;padding-top:.7rem;justify-content:space-between;font-size:.9rem}.hero,.section-heading,.cases{grid-template-columns:1fr}h1{font-size:clamp(2.5rem,10vw,5rem)}.hero-art{margin-top:1rem}.chain{grid-template-columns:1fr;padding-left:1rem;border-left:2px solid}.chain li{border:0;padding:.35rem 0}.chain li::before{left:-21px;top:.9rem}.chain br{display:none}.university{align-items:flex-start}}
.hero-copy h1 {
  font-size: clamp(1.5rem, 3.65vw, 4rem);
  line-height: 1.06;
}
.hero-copy .service {
  display: block;
}
@media (max-width: 760px) {
  .hero-copy h1 {
    font-size: clamp(1.5rem, 7.25vw, 3.4rem);
  }
}
.hero {
  padding-top: clamp(2.8rem, 5vw, 5rem);
  background: var(--ink);
}
.hero-copy p {
  margin: 1.15rem 0 0;
  max-width: 32ch;
}
.hero-art {
  width: 100%;
  max-width: 36rem;
  justify-self: start;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--ink);
}
@media (max-width: 760px) {
  .hero-copy h1 {
    font-size: clamp(1.13rem, 6.1vw, 2.75rem);
  }
  .hero-art {
    margin-top: 0;
  }
}

.featured-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 4vw, 4rem);
  margin-top: 1.75rem;
  padding: clamp(1rem, 3vw, 2.75rem);
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

.featured-copy p {
  max-width: 50ch;
}

@media (max-width: 760px) {
  .featured-example {
    grid-template-columns: 1fr;
  }
}
.featured-example {
  align-items: start;
}

.featured-example .hero-art {
  container-type: inline-size;
}

.featured-example figcaption {
  font-size: clamp(.65rem, 6.3cqi, 2.35rem);
  white-space: nowrap;
}

.examples-list article {
  border: 0;
  padding: 0;
}

.examples-list article + article {
  border-top: 1px solid #666;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.examples-list p {
  max-width: 55ch;
}
.ccs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  padding: clamp(2.75rem, 5vw, 5.5rem) var(--pad);
  border-bottom: 1px solid #aaa;
}
.ccs p {
  max-width: 54ch;
}
.ccs p + p {
  margin-top: 1rem;
}
@media (max-width: 760px) {
  .ccs {
    grid-template-columns: 1fr;
  }
}
.licences {
  padding: 0 var(--pad);
  background: var(--ink);
  color: var(--paper);
  border-block: 1px solid #494746;
}

.licences summary {
  cursor: pointer;
  padding-block: 1rem;
}

.licences summary h2 {
  display: inline;
  margin-inline: .4rem .7rem;
  font: inherit;
  font-weight: 700;
}

.licences summary span {
  color: var(--mint);
  font-size: .875rem;
}

.licences dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .5rem 1rem;
  margin: 0 0 1.25rem;
}

.licences dt {
  font-variant-numeric: tabular-nums;
  color: var(--mint);
}

.licences dd {
  margin: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.contact-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-grid address {
  font-style: normal;
}

.detail-page h1 {
  font-size: clamp(2.2rem, 5vw, 5rem);
  text-transform: none;
}
.detail-page h1 + p, .page-section > p {
  margin-block: 1rem;
  max-width: 65ch;
}
.page-section {
  padding: clamp(2.75rem, 5vw, 5.5rem) var(--pad);
}
.page-section h2 {
  font-size: clamp(1.4rem, 3vw, 2.5rem);
  margin-block: 1rem;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.75rem 3rem;
  margin-block: 2rem;
}
nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--mint);
}
.page-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.page-footer p {
  margin: 0;
}
.detail-page .university h1 {
  overflow-wrap: anywhere;
}
.course-groups {
  align-items: start;
}

.course-group {
  border-top: 2px solid;
  padding-top: .75rem;
}

.course-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-group li:first-child .course-detail {
  border-block-start: 0;
}

.course-detail > p {
  margin-inline-start: 2.6rem;
}

.consultative-learning {
  background: var(--mint);
}
.hero-copy h1 {
  font-size: clamp(1.6rem, 5.3vw, 5.4rem);
}
.hero-copy p {
  max-width: 52ch;
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.offer-grid a {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border-top: 3px solid var(--ink);
  background: #fff;
  text-decoration: none;
}
.offer-grid a:hover {
  background: var(--mint);
}
.offer-grid h3 {
  margin-top: 0;
}
.offer-grid span {
  margin-top: auto;
  padding-top: 1rem;
  font-weight: 700;
  text-decoration: underline;
}

.disclosure {
  border-block-start: 1px solid currentColor;
  align-self: start;
}
.disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
}
.disclosure summary::-webkit-details-marker {
  display: none;
}
.disclosure summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.disclosure-type {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.disclosure-icon {
  position: relative;
  flex: 0 0 1.75rem;
  height: 1.75rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.disclosure-icon::before,
.disclosure-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: .65rem;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.disclosure-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.disclosure[open] .disclosure-icon::after {
  display: none;
}
.disclosure > p {
  margin: 0 2.75rem 1rem 0;
}

.topic-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: .7rem;
  color: #3f6b69;
}
.disclosure summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.disclosure summary .topic-icon {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
}
.examples-list .topic-icon {
  color: var(--mint);
}

.service-directory {
  align-items: start;
  gap: .5rem 2rem;
}
.service-directory .disclosure ul {
  margin: 0 1rem 1rem 2.6rem;
  padding-left: 1.1rem;
}
.service-directory li + li {
  margin-top: .45rem;
}
.service-directory .disclosure > p {
  margin-left: 2.6rem;
}

.clients {
  background: var(--mint);
}
.client-group + .client-group {
  margin-top: 2rem;
}
.client-group ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  list-style: none;
  gap: .5rem;
  margin: .75rem 0 0;
  padding: 0;
}
.client-group li {
  display: grid;
  place-items: center;
  min-height: 5rem;
  padding: .85rem;
  background: white;
}
.client-group img {
  display: block;
  width: 100%;
  max-width: 9rem;
  height: 3.25rem;
  object-fit: contain;
}

.hero-with-comic {
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}
.hero-with-comic .hero-link {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--mint);
  font-weight: 700;
}
.hero-comic {
  display: block;
  width: 100%;
  height: auto;
  max-width: 60rem;
  justify-self: center;
}
@media (min-width: 860px) {
  .hero-with-comic {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
  .hero-with-comic h1 {
    font-size: clamp(2.4rem, 4.5vw, 5.4rem);
  }
}

.service-directory,
.engineering-work .featured-example {
  max-width: 82rem;
}
.service-directory {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.engineering-work .featured-example {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.engineering-work .hero-art {
  max-width: 24rem;
  margin: 0;
  justify-self: center;
}
.engineering-work .examples-list h3 {
  margin: 1.75rem 0 .6rem;
  color: var(--mint);
}
@media (max-width: 760px) {
  .engineering-work .featured-example {
    grid-template-columns: minmax(0, 1fr);
  }
}

.engineering-cases .case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  gap: .65rem;
  max-width: 82rem;
}
.case-card summary {
  gap: .8rem;
}
.case-title, .case-hook {
  display: block;
}
.case-hook {
  margin-top: .2rem;
  font-size: .9rem;
  line-height: 1.35;
  font-weight: 500;
}
.engineering-cases .case-card {
  background: #eef2ec;
  border: 1px solid #c4d1ca;
  padding-inline: 1rem;
}
.engineering-cases .case-card[open] {
  border-color: #3f6b69;
}
.case-card > p {
  margin-inline-start: 2.4rem;
}
.engineering-work .case-card {
  border-color: #626d68;
}

.case-study {
  margin: 0 0 1rem 2.4rem;
  font-size: .95rem;
}
.case-study dt {
  font-weight: 700;
}
.case-study dd {
  margin: .15rem 0 .7rem;
}
.engineering-work .case-study dt {
  color: var(--mint);
}

.hero-with-comic h1 {
  font-size: clamp(1.85rem, 5.5vw, 3.5rem);
}
.hero-with-comic .hero-tagline {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  margin-top: .8rem;
}
@media (min-width: 860px) {
  .hero-with-comic h1 {
    font-size: clamp(2rem, 3.25vw, 3.75rem);
  }
}

html {
  scroll-padding-top: 8rem;
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 13rem;
  }
  .masthead nav {
    gap: .35rem .85rem;
    justify-content: flex-start;
  }
}

.global-contact-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 75rem;
  margin-top: 2rem;
}
.global-hq {
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--ink);
  color: var(--paper);
}
.global-hq h2 {
  margin: .55rem 0;
}
.contact-region-label {
  color: var(--mint);
  font-weight: 700;
}
.global-hq address {
  font-style: normal;
}
.global-hq address, .global-hq p + p {
  margin-top: 1rem;
}
.regional-contacts h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.contact-globe {
  position: relative;
  flex: 0 0 1.6rem;
  height: 1.6rem;
  border: 1.5px solid #3f6b69;
  border-radius: 50%;
}
.contact-globe::before, .contact-globe::after {
  content: "";
  position: absolute;
}
.contact-globe::before {
  inset: 0 27%;
  border-inline: 1px solid #3f6b69;
  border-radius: 50%;
}
.contact-globe::after {
  inset: 48% 0 auto;
  border-top: 1px solid #3f6b69;
}
.regional-contacts dt {
  border-top: 1px solid #c4d1ca;
  padding-top: .8rem;
  font-weight: 700;
}
.regional-contacts dd {
  margin: .15rem 0 .8rem;
}
@media (min-width: 760px) {
  .global-contact-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.masthead [hidden] {
  display: none;
}

@media (max-width: 760px) {
  .masthead:has(.mobile-actions:not([hidden])) {
    padding-block: .6rem;
  }
  html:has(.mobile-actions:not([hidden])) {
    scroll-padding-top: 5rem;
  }
  .mobile-actions button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--mint);
    border-radius: 4px;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
  }
  .menu-lines {
    width: 1rem;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px currentColor, 0 5px currentColor;
  }
  .masthead:has(.mobile-actions:not([hidden])) nav:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 60vh;
    overflow-y: auto;
  }
  .masthead:has(.mobile-actions:not([hidden])) nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .35rem .55rem;
    border: 1px solid #494746;
    border-radius: 4px;
  }
}

.global-contact-grid {
  grid-template-columns: minmax(0, 1fr);
}
.regional-contacts a {
  overflow-wrap: anywhere;
}
@media (min-width: 760px) {
  .global-contact-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
