:root {
  --bgnd: #ffffff;
  --ink: #05052b;
  --paper: #f3f3f2;
  --muted: #8b8e97;
  --page-width: 1440;
  --page-height: 3095.37;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bgnd);
  color: var(--ink);
  font-family: Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

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

.page-shell {
  position: relative;
  margin: 0 auto;
  width: 1440px;
  height: 3095.37px;
}

.page {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1440px;
  height: 3095.37px;
  background: #ffffff;
  transform-origin: top left;
  overflow: hidden;
}

.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 79.67px;
  background: var(--bgnd);
  border-bottom: 1px solid #d9dbe2;
  z-index: 10;
}

.header__logo {
  display: block;
  width: 68px;
  height: 49px;
  object-fit: contain;
  flex: 0 0 auto;
}

.header__brand {
  position: absolute;
  left: 70px;
  top: 10px;
  height: 59px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}

.header__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 228px;
  line-height: 1;
  white-space: nowrap;
}

.header__name {
  font-size: 22px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: .35px;
}

.header__descriptor {
  margin-top: 7px;
  font-size: 11px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: 5.2px;
  text-transform: uppercase;
}

.nav {
  position: absolute;
  left: 875px;
  top: 27px;
  display: flex;
  align-items: center;
  gap: 52.5px;
  height: 30px;
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}

.hero {
  position: absolute;
  left: 0;
  top: 79.67px;
  width: 1440px;
  height: 702.99px;
  background: var(--bgnd);
  border-bottom: 1px solid #d9dbe2;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  left: 611.52px;
  top: 0;
  width: 828.44px;
  height: 702.99px;
  object-fit: fill;
}

.hero__white-block {
  position: absolute;
  left: 534.64px;
  top: 97.94px;
  width: 152.93px;
  height: 206.68px;
  background: var(--bgnd);
}

.hero__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero h1 {
  position: absolute;
  left: 66.42px;
  top: 176px;
  margin: 0;
  color: var(--ink);
  font-size: 70px;
  line-height: 1.2;
  letter-spacing: -1.6px;
  font-weight: 500;
  white-space: nowrap;
}

.hero p {
  position: absolute;
  left: 70.09px;
  top: 386px;
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.button--light {
  color: var(--ink);
  background: var(--paper);
}

.button--dark {
  color: #fff;
  background: var(--ink);
}

.hero .button {
  position: absolute;
  left: 69.73px;
  top: 621.69px;
  width: 192.54px;
  height: 40.66px;
}

.about {
  position: absolute;
  left: 0;
  top: 782.66px;
  width: 1440px;
  height: 271.8px;
  background: var(--bgnd);
}

.about__statement {
  position: absolute;
  left: 355.58px;
  top: 95.84px;
  color: var(--ink);
  font-size: 30px;
  line-height: 34px;
  letter-spacing: -0.3px;
  font-weight: 500;
}

.capabilities {
  position: absolute;
  left: 0;
  top: 1054.46px;
  width: 1440px;
  height: 315px;
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 49.9px 70px 0 90px;
  column-gap: 88px;
}

.capability {
  position: relative;
  width: 174px;
  height: 225px;
}

.capability img {
  position: absolute;
  left: 0;
  top: 0;
  width: 46.2px;
  height: 46.2px;
  object-fit: contain;
}

.capability--2 img { width: 42.2px; height: 48.2px; }
.capability--3 img { width: 46.2px; height: 46.2px; }
.capability--4 img { width: 46.2px; height: 46.2px; }
.capability--5 img { width: 38.2px; height: 47.2px; }

.capability h2 {
  position: absolute;
  left: 0;
  top: 90px;
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
}

.capability p {
  position: absolute;
  left: 0;
  top: 130px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.focus {
  position: absolute;
  left: 0;
  top: 1369.46px;
  width: 1440px;
  height: 656.5px;
  background: var(--bgnd);
}

.section-title {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
}

.focus__title {
  position: absolute;
  left: 69px;
  top: 91px;
}

.focus-grid {
  position: absolute;
  left: 70px;
  top: 196.03px;
  display: grid;
  grid-template-columns: repeat(5, 244.44px);
  grid-template-rows: repeat(2, 161.33px);
  gap: 19.55px 19.55px;
}

.focus-card {
  position: relative;
  width: 244.44px;
  height: 161.33px;
  color: #fff;
  overflow: hidden;
}

.focus-card img {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.focus-card div {
  position: absolute;
  left: 20px;
  bottom: 18px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
}

.focus-card--technology { background: linear-gradient(135deg, #101018, #32323f); }
.focus-card--ai { background: linear-gradient(135deg, #ececeb, #c9c8c5); }
.focus-card--digital { background: #292a31; }
.focus-card--healthcare { background: #dad9d6; }
.focus-card--education { background: #18181f; }
.focus-card--sports { background: #8f7f6d; }
.focus-card--hospitality { background: linear-gradient(135deg, #1a2d3a, #738993); }
.focus-card--sustainability { background: linear-gradient(135deg, #233124, #66806a); }
.focus-card--water { background: #607882; }
.focus-card--commercial { background: #34343d; }

.focus-card--ai img { left: 20px; top: 20px; width: 46.2px; height: 37.98px; }
.focus-card--digital img { left: 20.23px; top: 20.37px; width: 42.2px; height: 37.8px; }
.focus-card--healthcare img { left: 20.23px; top: 20.46px; width: 42.2px; height: 38.2px; }
.focus-card--education img { left: 20.44px; top: 20.22px; width: 38.2px; height: 38.2px; }
.focus-card--sports img { left: 20.59px; top: 20.78px; width: 44.2px; height: 44.2px; }
.focus-card--hospitality img { left: 20.4px; top: 20.54px; width: 38.2px; height: 39.2px; }
.focus-card--sustainability img { left: 20.2px; top: 20.54px; width: 42.48px; height: 42.2px; }
.focus-card--water img { left: 20.41px; top: 20.54px; width: 30.2px; height: 44.2px; }
.focus-card--commercial img { left: 20.72px; top: 20.44px; width: 46.2px; height: 46.2px; }

.focus__button {
  position: absolute;
  left: 1177.86px;
  top: 566.54px;
  width: 192.54px;
  height: 40.66px;
}

.focus__rule {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1440px;
  height: 1px;
  background: #d9dbe2;
}

.approach {
  position: absolute;
  left: 0;
  top: 2025.96px;
  width: 1440px;
  height: 577.38px;
  background: var(--bgnd);
}

.approach__statement {
  position: absolute;
  left: 357.62px;
  top: 92.8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 34px;
  letter-spacing: -0.3px;
  font-weight: 500;
}

.approach__title {
  position: absolute;
  left: 70px;
  top: 244.4px;
}

.approach-grid {
  position: absolute;
  left: 353.99px;
  top: 249.27px;
  display: grid;
  grid-template-columns: repeat(4, 202.8px);
  column-gap: 60.4px;
}

.approach-card {
  position: relative;
  height: 249px;
  padding-left: 0;
  border-left: 2px solid #ccc;
}

.approach-card__number {
  position: absolute;
  left: 19px;
  top: -2px;
  color: var(--muted);
  font-size: 30px;
  line-height: 36px;
  font-weight: 300;
}

.approach-card h3 {
  position: absolute;
  left: 19px;
  top: 42px;
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
}

.approach-card p {
  position: absolute;
  left: 19px;
  top: 88px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
}

.contact {
  position: absolute;
  left: 0;
  top: 2603.34px;
  width: 1440px;
  height: 373.46px;
  background: var(--paper);
  overflow: hidden;
}

.contact__watermark {
  position: absolute;
  left: 187.82px;
  top: 0;
  width: 523.77px;
  height: 373.55px;
  object-fit: fill;
}

.contact__intro {
  position: absolute;
  left: 68px;
  top: 61px;
  z-index: 2;
}

.contact__intro h2 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
}

.contact__intro p {
  margin: 27px 0 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}

.contact__details {
  position: absolute;
  left: 883.35px;
  top: 70px;
  z-index: 2;
  color: var(--ink);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.contact__details p { margin: 0 0 28px; }
.contact__details strong { font-weight: 700; }
.contact__details .button {
  margin-top: 23px;
  width: 150.76px;
  height: 40.66px;
}

.footer {
  position: absolute;
  left: 0;
  top: 2976.8px;
  width: 1440px;
  height: 118.57px;
  background: var(--bgnd);
  border-bottom: 1px solid #d9dbe2;
}
/*
.footer__logo {
  position: absolute;
  left: 70px;
  top: 33.4px;
  width: 76.34px;
  height: 54.45px;
  object-fit: contain;
}
*/
.footer__logo {
  display: block;
  width: 68px;
  height: 49px;
  object-fit: contain;
  flex: 0 0 auto;
}

.footer__brand {
  position: absolute;
  left: 70px;
  top: 30px;
  height: 59px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}

.footer__wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 228px;
  line-height: 1;
  white-space: nowrap;
}

.footer__name {
  font-size: 22px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: .35px;
}

.footer__copyright {
  position: absolute;
  left: 885.46px;
  top: 53px;
  color: #8b8e97;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Responsive mobile layout
   The original 1440px desktop composition above remains unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: 22px;
  }

  html,
  body {
    width: 100%;
    min-width: 0;
  }

  body {
    overflow-x: hidden;
  }

  .page-shell {
    width: 100% !important;
    height: auto !important;
    margin: 0;
  }

  .page {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow: visible;
    transform: none !important;
  }

  .header,
  .hero,
  .about,
  .capabilities,
  .focus,
  .approach,
  .contact,
  .footer {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  /* Header */
  .header {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-bottom: 1px solid #d9dbe2;
  }

  .header__brand {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    padding: 14px var(--mobile-gutter) 13px;
    gap: 12px;
  }

  .header__logo {
    width: 52px;
    height: 38px;
  }

  .header__wordmark {
    min-width: 0;
  }

  .header__name {
    font-size: 19px;
    line-height: 1;
    letter-spacing: .2px;
  }

  .nav {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    height: auto;
    padding: 0 var(--mobile-gutter) 14px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
  }

  .nav a {
    display: flex;
    align-items: center;
    min-height: 39px;
    padding: 7px 0;
    border-top: 1px solid #e4e5e9;
  }

  .nav a:nth-child(even) {
    padding-left: 14px;
    border-left: 1px solid #e4e5e9;
  }

  /* Hero */
  .hero {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #d9dbe2;
    overflow: visible;
  }

  .hero__copy {
    position: relative;
    inset: auto;
    order: 1;
    padding: 52px var(--mobile-gutter) 39px;
  }

  .hero__image {
    position: relative;
    left: auto;
    top: auto;
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 1.18 / 1;
    object-fit: cover;
    object-position: center;
  }

  .hero__white-block {
    display: none;
  }

  .hero h1 {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    font-size: clamp(38px, 11.2vw, 49px);
    line-height: 1.08;
    letter-spacing: -1.25px;
    white-space: normal;
  }

  .hero p {
    position: relative;
    left: auto;
    top: auto;
    margin: 26px 0 0;
    max-width: 34em;
    font-size: 17px;
    line-height: 26px;
  }

  .hero p br,
  .about__statement br,
  .approach__statement br,
  .capability p br,
  .approach-card p br,
  .contact__intro p br {
    display: none;
  }

  .hero .button {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-width: 205px;
    height: 46px;
    margin-top: 31px;
    padding: 0 18px;
  }

  /* About statement */
  .about {
    padding: 49px var(--mobile-gutter) 51px;
  }

  .about__statement {
    position: relative;
    left: auto;
    top: auto;
    max-width: 650px;
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -.25px;
  }

  /* Capabilities */
  .capabilities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 16px var(--mobile-gutter) 19px;
    background: var(--paper);
  }

  .capability {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    width: 100%;
    height: auto;
    min-height: 129px;
    padding: 25px 0 23px;
    border-bottom: 1px solid #d7d7d5;
  }

  .capability:last-child {
    border-bottom: 0;
  }

  .capability img,
  .capability--2 img,
  .capability--3 img,
  .capability--4 img,
  .capability--5 img {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 43px;
    height: 43px;
    margin-top: 1px;
    object-fit: contain;
  }

  .capability h2 {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 24px;
  }

  .capability p {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    max-width: 32em;
    font-size: 16px;
    line-height: 24px;
  }

  /* Investment focus */
  .focus {
    padding: 55px var(--mobile-gutter) 48px;
  }

  .section-title,
  .focus__title,
  .approach__title {
    position: relative;
    left: auto;
    top: auto;
    font-size: 28px;
    line-height: 34px;
  }

  .focus-grid {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 12px;
    width: 100%;
    margin-top: 31px;
  }

  .focus-card {
    width: 100%;
    height: auto;
    min-height: 132px;
    aspect-ratio: 1.32 / 1;
  }

  .focus-card img,
  .focus-card--ai img,
  .focus-card--digital img,
  .focus-card--healthcare img,
  .focus-card--education img,
  .focus-card--sports img,
  .focus-card--hospitality img,
  .focus-card--sustainability img,
  .focus-card--water img,
  .focus-card--commercial img {
    left: 15px;
    top: 15px;
    width: 38px;
    height: 38px;
    object-fit: contain;
  }

  .focus-card div {
    left: 15px;
    right: 10px;
    bottom: 14px;
    font-size: 16px;
    line-height: 19px;
  }

  .focus__button {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-width: 205px;
    height: 46px;
    margin-top: 28px;
    padding: 0 18px;
  }

  .focus__rule {
    display: none;
  }

  /* Approach */
  .approach {
    padding: 51px var(--mobile-gutter) 58px;
    border-top: 1px solid #d9dbe2;
  }

  .approach__statement {
    position: relative;
    left: auto;
    top: auto;
    max-width: 650px;
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -.25px;
  }

  .approach__title {
    margin-top: 53px;
  }

  .approach-grid {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 29px;
  }

  .approach-card {
    position: relative;
    height: auto;
    min-height: 151px;
    padding: 3px 0 30px 20px;
    border-left: 2px solid #ccc;
  }

  .approach-card__number,
  .approach-card h3,
  .approach-card p {
    position: relative;
    left: auto;
    top: auto;
  }

  .approach-card__number {
    font-size: 27px;
    line-height: 32px;
  }

  .approach-card h3 {
    margin: 9px 0 8px;
    font-size: 20px;
    line-height: 24px;
  }

  .approach-card p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
  }

  /* Contact */
  .contact {
    padding: 52px var(--mobile-gutter) 58px;
    background: var(--paper);
    overflow: hidden;
  }

  .contact__watermark {
    left: -72px;
    top: 0;
    width: 410px;
    height: auto;
    opacity: .72;
  }

  .contact__intro,
  .contact__details {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
  }

  .contact__intro h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .contact__intro p {
    margin-top: 18px;
    max-width: 30em;
    font-size: 18px;
    line-height: 27px;
  }

  .contact__details {
    margin-top: 45px;
    font-size: 16px;
    line-height: 24px;
  }

  .contact__details p {
    margin-bottom: 24px;
  }

  .contact__details .button {
    width: auto;
    min-width: 171px;
    height: 46px;
    margin-top: 6px;
    padding: 0 18px;
  }

  /* Footer */
  .footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 26px var(--mobile-gutter) 28px;
    border-bottom: 1px solid #d9dbe2;
  }

  .footer__brand {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    gap: 12px;
  }

  .footer__logo {
    width: 52px;
    height: 38px;
  }

  .footer__wordmark {
    min-width: 0;
  }

  .footer__name {
    font-size: 19px;
    line-height: 1;
    letter-spacing: .2px;
  }

  .footer__copyright {
    position: relative;
    left: auto;
    top: auto;
    max-width: 28em;
    font-size: 13px;
    line-height: 19px;
    white-space: normal;
  }
}

@media (max-width: 359px) {
  :root {
    --mobile-gutter: 18px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .focus-grid {
    gap: 9px;
  }

  .focus-card {
    min-height: 122px;
  }

  .focus-card div {
    font-size: 15px;
    line-height: 18px;
  }
}