@font-face {
  font-family: "CoFo Sans";
  src:
    url("fonts/cofo-sans-hairline.woff2?v=20260911-04") format("woff2"),
    url("fonts/cofo-sans-hairline.woff2") format("woff2");
  font-style: normal;
  font-weight: 100;
  font-display: block;
}

@font-face {
  font-family: "CoFo Sans";
  src:
    url("fonts/cofo-sans-thin.woff2?v=20260911-04") format("woff2"),
    url("fonts/cofo-sans-thin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: block;
}

@font-face {
  font-family: "CoFo Sans";
  src:
    url("fonts/cofo-sans-regular.woff2?v=20260911-04") format("woff2"),
    url("fonts/cofo-sans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

:root {
  --font-sans: "CoFo Sans";
  --font-mono: "CoFo Sans";
  --reference-light: #ececec;
  --reference-nav-size: clamp(24px, 1.45vw, 30px);
  --reference-cta-size: 1.5vw;
  --reference-control-gap: 0.9765625vw;
  --reference-language-size: calc(clamp(9px, 0.5vw, 13px) + 4pt);
  --reference-language-gap: 0.24em;
  --reference-wordmark-height: 80px;
  --reference-header-padding: 33px;
  --reference-header-height: calc(var(--reference-wordmark-height) + 66px);
  --reference-richtext-size: clamp(42px, 4.176vw, 76.8px);
  --reference-richtext-desktop-size: 76.8px;
  --reference-inline-cta-size: 28.4px;
  --reference-service-display-size: 179.2px;
  --reference-service-size: clamp(42px, 6.15vw, 146px);
  --reference-service-link-size: 32px;
  --reference-display-size: clamp(52px, 11.15vw, 264px);
  --reference-display-level-size: 264px;
  --reference-display-level-weight: 100;
  --reference-display-level-line-height: 1.05;
  --page-x: 2vw;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html,
body,
body *,
button,
input,
textarea,
select {
  font-family: "CoFo Sans" !important;
}

body,
body * {
  text-transform: uppercase !important;
}

body,
h1,
h2,
h3,
p,
a,
button,
input,
textarea,
select {
  font-synthesis: none;
}

.container-fluid {
  width: 100%;
  max-width: 100%;
  padding-inline: var(--page-x);
  overflow-x: clip;
}

.container-fluid > * {
  min-width: 0;
  max-width: 100%;
}

.container-fluid :where(img, picture, svg, video, canvas) {
  max-width: 100%;
  height: auto;
}

.container-fluid :where(
  .header__inner,
  .header_right,
  .header_rightRow,
  .navigation,
  .menu,
  .Hmebanner__inner,
  .HmebannerRow,
  .hme_hero_title,
  .richtextWrap,
  .galleryGrid,
  .galleryGridrow,
  .galleryGridBox,
  .wrkbannerdes__inner,
  .services-stack,
  .hmeSrvcBox,
  .sticky-stack,
  .hmeStickyBoxes,
  .hmelastHeroGrid,
  .contact-hero__grid,
  .contact-brand-panel,
  .contact-form,
  .footer__inner
) {
  min-width: 0;
  max-width: 100%;
}

.container-fluid :where(p, label, legend, .field-note) {
  overflow-wrap: break-word;
}

.hme_hero_title > * {
  min-width: 0;
}

.hero_heading_style {
  flex-shrink: 1;
  max-width: 100%;
}

.masked-link,
.mask-wrap {
  max-width: 100%;
  min-width: 0;
}

.text-none {
  text-transform: uppercase !important;
}

.header,
.header.scrolled,
.header.menu-open {
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(86% 125% at 18% -38%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 34%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, rgba(94, 123, 161, 0.48) 0%, rgba(74, 99, 132, 0.36) 38%, rgba(50, 67, 91, 0.22) 66%, rgba(32, 38, 51, 0.06) 88%, rgba(32, 38, 51, 0) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(118%);
  backdrop-filter: blur(20px) saturate(118%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.92) 61%, rgba(0, 0, 0, 0.64) 77%, rgba(0, 0, 0, 0.28) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.92) 61%, rgba(0, 0, 0, 0.64) 77%, rgba(0, 0, 0, 0.28) 90%, transparent 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16), inset 0 -1px rgba(255, 255, 255, 0.025);
}

.header__inner {
  position: relative;
  z-index: 1;
}

.brand-wordmark {
  content: url("wordmark-new.svg");
}

.masked-link__arrow {
  display: inline-block;
  width: 65px;
  height: 11px;
  min-width: 65px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: url("reference-arrow.svg") center / contain no-repeat;
  mask: url("reference-arrow.svg") center / contain no-repeat;
}

.masked-link--large .masked-link__arrow,
.form-submit .masked-link__arrow {
  width: 98px;
  height: 16px;
  min-width: 98px;
}

body[data-page="home"] .Hmebanner#top .hero_heading_style.reveal {
  transform: none;
  opacity: 1;
  animation: none;
}

.richtext.bg-lightGrey,
.richtext.bg-lightGrey :where(h1, h2, h3, p, a, span, small) {
  color: var(--ink) !important;
}

.richtext---who .richtextWrap,
.fit-section .richtextWrap {
  width: 100%;
  max-width: 100%;
}

.richtext---who h2,
.fit-section h2 {
  position: absolute;
  top: 0.15em;
  left: 0;
  margin: 0;
  font-size: var(--reference-inline-cta-size);
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
}

.richtext---who h2 a,
.fit-section h2 a {
  display: inline-flex;
  align-items: center;
  gap: 0;
  word-spacing: 0;
  letter-spacing: 0;
  text-decoration: none;
}

.richtext---who p,
.fit-section p {
  width: 100%;
  max-width: 100%;
  font-family: "CoFo Sans" !important;
  font-size: var(--reference-richtext-size);
  font-weight: 500;
  line-height: 1.21;
  letter-spacing: normal;
  text-indent: 30vw;
  text-align: justify;
}

.fit-section h2,
.fit-section h2 a {
  color: var(--reference-light) !important;
}

body[data-page="home"] .hmeSrvc .hme_hero_title {
  position: relative;
}

body[data-page="home"] .hmeSrvc .hero_heading_style {
  color: var(--variant-blue) !important;
  font-family: "CoFo Sans" !important;
  font-size: var(--reference-service-display-size);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 1.1px;
}

.view_srvBtn a {
  display: inline;
  font-size: var(--reference-service-link-size);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -1.1px;
  text-align: center;
}

.hmeStickyBoxes h2,
.hmeStickyBoxes h3 {
  width: 100%;
  max-width: 100%;
  font-size: var(--reference-service-size);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -1.1px;
  text-align: center;
}

.sticky-arrow {
  display: block;
  width: 98px;
  height: 16px;
  min-width: 98px;
  flex: 0 0 auto;
  font-size: 0;
  line-height: 0;
  background: currentColor;
  -webkit-mask: url("reference-arrow.svg") center / contain no-repeat;
  mask: url("reference-arrow.svg") center / contain no-repeat;
  transform: rotate(90deg);
  transform-origin: center;
}

body[data-page="home"] .hmelastHeroWrap .hero_heading_style,
body[data-page="home"] .hmelastHeroDes p {
  font-family: "CoFo Sans" !important;
  font-weight: var(--reference-display-level-weight);
  line-height: var(--reference-display-level-line-height);
  letter-spacing: normal;
}

body[data-page="home"] .hmelastHeroWrap .hero_heading_style {
  font-size: var(--reference-display-size);
}

.hmelastHeroDes {
  padding-left: 0;
}

body[data-page="home"] .hmelastHeroDes p {
  width: 100%;
  max-width: 100%;
  font-size: var(--reference-display-size);
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
}

body[data-page="contact"] .contact-form-section .hero_heading_style {
  width: 100%;
  max-width: 100%;
  font-family: "CoFo Sans" !important;
  font-size: var(--reference-display-size);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: normal;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .header {
    min-height: var(--reference-header-height);
    height: var(--reference-header-height);
    display: block;
    padding: var(--reference-header-padding) 0;
  }

  .header__inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .logo {
    height: var(--reference-wordmark-height);
    width: auto;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    max-width: 18vw;
  }

  .brand-wordmark {
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: var(--reference-wordmark-height);
    object-fit: contain;
    object-position: left center;
  }

  .header_right,
  .header_rightRow {
    position: static;
    width: auto;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }

  .navigation {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(49vw, 960px);
    transform: translate(-50%, -50%);
  }

  .navigation .menu {
    width: 100%;
    display: grid;
    grid-template-columns: .75fr .9fr 1.45fr .85fr;
    align-items: center;
    gap: clamp(24px, 2vw, 50px);
  }

  .navigation .menu li {
    display: flex;
    justify-content: center;
    min-width: 0;
  }

  .navigation a {
    font-size: var(--reference-nav-size);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .header_end {
    position: absolute;
    top: 50%;
    right: calc(var(--page-x) + 8px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--reference-control-gap);
    max-width: 28vw;
  }

  .startPrjctLnk {
    position: static;
    width: auto;
    min-width: 0;
    transform: none;
    display: flex;
    justify-content: flex-end;
    order: 1;
  }

  .startPrjctLnk a {
    gap: 1.042vw;
    font-size: var(--reference-cta-size);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.022vw;
    white-space: nowrap;
  }

  .variant-language {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--reference-language-gap);
    margin: 0;
    order: 2;
  }

  .variant-language button {
    display: block;
    padding: 0;
    font-size: var(--reference-language-size);
    font-weight: 500;
    line-height: 0.78;
    letter-spacing: 0;
  }

  .HeaderPad,
  body[data-page="home"] > .HeaderPad {
    height: auto;
    padding-top: var(--reference-header-height);
    background: var(--ink);
  }

  body[data-page="home"] .Hmebanner#top {
    height: auto;
    min-height: calc(100vh - 175px);
    padding: 20px 0 30px;
    background: var(--ink);
    color: var(--reference-light);
  }

  body[data-page="home"] .Hmebanner__inner {
    min-height: 0;
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }

  body[data-page="home"] .HmebannerRow {
    position: relative;
    width: 100%;
    display: block;
  }

  body[data-page="home"] .hme_hero_title {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  body[data-page="home"] .hme_hero_title:last-of-type {
    position: static;
  }

  body[data-page="home"] .hero_heading_style {
    font-size: 11.4vw;
    line-height: 1.1;
    letter-spacing: 0.044vw;
    font-weight: 500;
    color: var(--reference-light);
    white-space: nowrap;
  }

  body[data-page="home"] .hero_paragrph_style {
    max-width: 57.819vw;
    padding: 0 60px;
    font-size: clamp(18px, 1.32vw, 32px);
    line-height: 1.14;
    letter-spacing: -0.033px;
    font-weight: 500;
    text-align: justify;
  }

  body[data-page="home"] .hero-paragraph--desktop {
    position: absolute;
    top: 33.832vw;
    right: 0;
    bottom: auto;
    left: 49.87%;
    z-index: 3;
    display: block;
    width: auto;
    height: 7.968vw;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: clamp(13px, 1.32vw, 32px);
    line-height: calc((7.89vw - 1cap) / 3);
    text-align: justify;
    text-align-last: justify;
    text-box: trim-both cap alphabetic;
    visibility: visible;
    opacity: 1;
  }

  html[lang="fr-CA"] body[data-page="home"] .hero-paragraph--desktop {
    font-size: clamp(9px, 0.96vw, 23px);
  }

  body[data-page="home"] .hmeSrvcBox .hero_paragrph_style {
    position: absolute;
    top: 50%;
    right: 0;
    width: 35vw;
    max-width: 35vw;
    transform: translateY(-50%);
  }

  .richtext---who p,
  .fit-section p {
    font-family: "CoFo Sans" !important;
    font-size: var(--reference-richtext-desktop-size);
    font-weight: 500;
    line-height: 1.21;
    letter-spacing: normal;
  }

  body[data-page="contact"] .contact-hero {
    padding-block: 100px;
  }

  body[data-page="contact"] .contact-hero h1 {
    max-width: 100%;
    font-size: calc(clamp(56px, 9vw, 150px) - 4pt);
    line-height: 0.933;
  }

  body[data-page="contact"] .contact-hero p {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 2vw, 40px);
    line-height: 0.95;
  }

  .footer {
    padding: 15px 0;
  }

  .footer__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
  }

  .footer ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 35px;
    min-width: 0;
  }

  .footer ul li,
  .footer ul li a {
    font-size: 0.938vw;
    color: var(--reference-light);
    line-height: 1.38;
    font-weight: 500;
    letter-spacing: -0.044vw;
    white-space: nowrap;
  }

  .footer ul li a {
    text-decoration: none;
  }

  .footer__links {
    justify-content: flex-end;
  }
}

@media (min-width: 1600px) {
  body[data-page="home"] .hmelastHeroWrap .hero_heading_style,
  body[data-page="home"] .hmelastHeroDes p {
    font-size: var(--reference-display-level-size);
    font-weight: var(--reference-display-level-weight);
    line-height: var(--reference-display-level-line-height);
  }
}

@media (max-width: 991px) {
  .container-fluid {
    padding-inline: var(--page-x);
  }

  .richtext---who h2,
  .fit-section h2 {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 24px;
    font-size: clamp(18px, 3.5vw, 28.4px);
    white-space: normal;
  }

  .richtext---who p,
  .fit-section p {
    font-size: clamp(30px, 6vw, 56px);
    line-height: 1.16;
    text-indent: 0;
    text-align: left;
  }

  body[data-page="contact"] .contact-form-section .hero_heading_style {
    white-space: normal;
  }
}
