/* Sairachana brand marks and accent colour.

   Loaded on every page, after the Webflow stylesheet, so these rules win.

   The two marks:
     images/project/logo-text.png   full lockup, 3153x642 (~4.9:1)
     images/project/only-logo.png   symbol only, 484x484 (1:1)

   Both are gold RGBA with real transparency, which is what forces the navbar
   blend change below. */

/* Century Gothic (Century Gothic Paneuropean) — the site's only typeface,
   replacing the old Gilroy/Montserrat headings + Neue Haas Unica body
   pairing. Self-hosted from /fonts; every stylesheet's font-family
   declaration points at this one family. The 200/500/950 cuts alias the
   nearest available weight so existing font-weight values keep rendering. */
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanThin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanThin.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanThinItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanLightItalic.ttf")
    format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanSemiBold.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanSemiBoldItalic.ttf")
    format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanSemiBold.ttf")
    format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanSemiBoldItalic.ttf")
    format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanBoldItalic.ttf")
    format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanExtraBold.ttf")
    format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanExtraBoldItalic.ttf")
    format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanBlack.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanBlackItalic.ttf")
    format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanBlack.ttf") format("truetype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/CenturyGothicPaneuropeanBlackItalic.ttf")
    format("truetype");
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}

/* The accent was a dusty red (#a95a58). Redefining the token here repoints
   every use of it — the pre-loader wipe bar, the homepage cursor disc, the
   about page's eyebrows, links and award-row hovers — at the brand gold. */
:root {
  --accent-color: #bf9953;
  --navbar-height: 5rem;
}

/* Shared desktop navigation and hover-driven expertise mega menu. */
@media screen and (min-width: 768px) {
  .navbar {
    position: fixed;
    height: var(--navbar-height);
    margin-bottom: 0;
    background: #fff;
    background-image: none !important;
    mix-blend-mode: normal;
    color: #111;
    transition:
      background-color 0.35s ease,
      backdrop-filter 0.35s ease,
      box-shadow 0.35s ease;
  }

  .navbar .navbar_link,
  .navbar .secondary-button_text {
    color: #111 !important;
  }

  .navbar .navbar_button {
    border-color: #111 !important;
  }

  .navbar_menu-wrapper {
    transition: opacity 0.3s ease;
  }

  .navbar.is-scrolled {
    background: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  .navbar.is-scrolled:not(:hover):not(:focus-within) .navbar_menu-wrapper {
    opacity: 0;
    pointer-events: none;
  }

  .navbar.is-scrolled:hover,
  .navbar.is-scrolled:focus-within {
    background: #fff;
  }

  .navbar_logo-fixed {
    filter: none;
  }

  .navbar_chevron {
    display: inline-block;
    width: 0.42rem;
    height: 0.42rem;
    margin: 0 0 0.2rem 0.45rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }

  .navbar.is-expertise-open .navbar_chevron,
  .navbar:has(.navbar_expertise-trigger:hover) .navbar_chevron,
  .navbar:has(.navbar_expertise-trigger:focus-visible) .navbar_chevron,
  .navbar:has(.expertise-dropdown:hover) .navbar_chevron {
    transform: translateY(0.15rem) rotate(225deg);
  }

  .expertise-dropdown {
    visibility: hidden;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    width: 100%;
    padding: 0.5rem var(--padding-global) 1rem;
    opacity: 0;
    transform: translateY(-0.35rem);
    pointer-events: none;
    transition:
      opacity 0.5s ease-in-out,
      transform 0.65s ease-in-out,
      visibility 0.65s;
  }

  .navbar.is-expertise-open .expertise-dropdown,
  .navbar:has(.navbar_expertise-trigger:hover) .expertise-dropdown,
  .navbar:has(.navbar_expertise-trigger:focus-visible) .expertise-dropdown,
  .expertise-dropdown:hover,
  .expertise-dropdown:focus-within {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .expertise-dropdown__inner {
    display: grid;
    grid-template-columns: minmax(16rem, 24%) 1fr;
    gap: 1rem;
    /* 9 expertise items now (was 7) — a bit taller than the original 28rem
       cap so the list isn't cramped against the media panel. */
    height: min(32rem, calc(100vh - 7rem));
    padding: 0.75rem;
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, 0.16);
    /* clip-path clips the box's own box-shadow along with its content, so the
       reveal animation's clip region is padded 2rem past the visible card on
       every side that isn't doing the top-down reveal — otherwise the shadow
       below gets cut flush against the card edge and reads as no shadow at
       all against a white page. overflow: hidden is not the culprit here (it
       doesn't clip its own shadow); dropped since clip-path already keeps
       children within the rounded card while closed. */
    clip-path: inset(-2rem -2rem 100% -2rem round 1.1rem);
    transform: translateY(-0.75rem);
    transform-origin: top center;
    transition:
      clip-path 1.05s ease-in-out,
      transform 1.05s ease-in-out;
  }

  .navbar.is-expertise-open .expertise-dropdown__inner,
  .navbar:has(.navbar_expertise-trigger:hover) .expertise-dropdown__inner,
  .navbar:has(.navbar_expertise-trigger:focus-visible)
    .expertise-dropdown__inner,
  .expertise-dropdown:hover .expertise-dropdown__inner,
  .expertise-dropdown:focus-within .expertise-dropdown__inner {
    clip-path: inset(-2rem round 1.1rem);
    transform: translateY(0);
  }

  .expertise-dropdown__list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem 0.4rem;
    opacity: 0;
    transform: translateY(-0.8rem);
    transition:
      opacity 0.55s ease-in-out 0.18s,
      transform 0.85s ease-in-out 0.18s;
  }

  .navbar.is-expertise-open .expertise-dropdown__list,
  .navbar:has(.navbar_expertise-trigger:hover) .expertise-dropdown__list,
  .navbar:has(.navbar_expertise-trigger:focus-visible)
    .expertise-dropdown__list,
  .expertise-dropdown:hover .expertise-dropdown__list,
  .expertise-dropdown:focus-within .expertise-dropdown__list {
    opacity: 1;
    transform: translateY(0);
  }

  .expertise-dropdown__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.55rem;
    border-bottom: 1px solid transparent;
    color: #a9a9a9;
    font-size: clamp(0.9rem, 1.1vw, 1.15rem);
    text-decoration: none;
    transition:
      color 0.2s ease,
      border-color 0.2s ease;
  }

  .expertise-dropdown__item span:last-child {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .expertise-dropdown__item:hover,
  .expertise-dropdown__item:focus-visible,
  .expertise-dropdown__item.is-active {
    color: #111;
    border-color: #111;
  }

  .expertise-dropdown__item:hover span:last-child,
  .expertise-dropdown__item:focus-visible span:last-child,
  .expertise-dropdown__item.is-active span:last-child {
    opacity: 1;
  }

  .expertise-dropdown__media {
    min-width: 0;
    border: 0.5px solid rgba(0, 0, 0, 0.75);
    border-radius: 0.9rem;
    background: transparent;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-0.6rem) scale(0.985);
    transition:
      opacity 0.65s ease-in-out 0.24s,
      transform 1s ease-in-out 0.24s;
  }

  .navbar.is-expertise-open .expertise-dropdown__media,
  .navbar:has(.navbar_expertise-trigger:hover) .expertise-dropdown__media,
  .navbar:has(.navbar_expertise-trigger:focus-visible)
    .expertise-dropdown__media,
  .expertise-dropdown:hover .expertise-dropdown__media,
  .expertise-dropdown:focus-within .expertise-dropdown__media {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .expertise-dropdown__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transform: scale(1);
    transition:
      opacity 0.18s ease,
      transform 0.5s ease;
  }

  .expertise-dropdown__media img.is-changing {
    opacity: 0;
    transform: scale(1.015);
  }
}

/* Every rule that positions, hides and animates the expertise mega menu lives
   in the min-width: 768px block above, but nav-menu.js appends the panel to
   .navbar on phones too. Below the breakpoint it therefore landed completely
   unstyled: a static, always-visible row of links plus the preview image,
   overflowing the nav's 5rem box. That pushed the document ~220px wider than
   the viewport and, because .navbar carries mix-blend-mode: exclusion as a
   group (see the note below), ran the whole top of the page through exclusion
   — which is what turned the gold hero mark blue. Keep the panel out of the
   mobile layout entirely; the hamburger menu covers navigation there. */
@media screen and (max-width: 767px) {
  .expertise-dropdown {
    display: none;
  }
}

/* Declared with a literal in the Webflow sheet rather than through the token,
   so it needs its own override. */
.global_bg-circle-interaction {
  background-color: var(--accent-color);
}

/* The Webflow navbar carries mix-blend-mode: exclusion so its white links stay
   readable over both light and dark sections. Run through exclusion on a white
   section the gold mark inverts to blue (1 - 0.75 = 0.25 red, and so on), so
   the logo has to come out of that blended layer.

   It cannot opt out from the inside: mix-blend-mode applies to the nav as a
   group, and a descendant has no way to escape it. Moving the blend down onto
   .navbar_menu-wrapper does not work either — .navbar is a stacking context
   (z-index 100 + sticky), so a descendant would composite against the nav's own
   empty backdrop rather than the page, and the links disappear.

   So the logo is lifted out of <nav> in the markup and pinned separately, which
   leaves the links blending against the page exactly as they did before. */
.navbar_logo-fixed {
  z-index: 101;
  /* matches .navbar_content-wrapper: 1rem down from the top of a 5rem bar */
  position: fixed;
  top: 1rem;
  left: var(--padding-global);
  align-items: center;
  width: 11rem;
  height: 3rem;
  display: flex;
}

.navbar_logo-fixed .image {
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: 2.6rem;
}

/* With the logo gone the menu is the only child left, so it no longer needs
   space-between to sit against the right edge. */
.navbar_content-wrapper {
  justify-content: flex-end;
}

/* Hero symbol, centred over the hero image on the homepage. Smaller than the
   outlined mark it replaces — this one is a solid fill, so it carries more
   weight at the same width. */
.hero_logo.is-absolute {
  width: 9rem;
  height: auto;
}

/* Pre-loader symbol. The wrapper is a fixed 13x10rem box holding the mark and
   the wipe bar, so the mark is centred inside it rather than stretched to fill. */
.pre-loader_logo-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pre-loader_logo-wrapper .image-4 {
  object-fit: contain;
  width: auto;
  max-width: 100%;
  height: 10rem;
}

/* Footer lockup: width-bound for the same aspect-ratio reason as the navbar. */
.footer_logo {
  object-fit: contain;
  width: 100%;
  max-width: 20rem;
  height: auto;
  max-height: none;
}

@media screen and (max-width: 767px) {
  .navbar_logo-wrapper {
    width: 8.5rem;
  }

  /* 20rem is 80% of a 390px screen, and the Webflow sheet pins the mark to
     top: 15% on mobile — together that parked it directly over .hero_title and
     swallowed "Advancing Architecture". Size it to sit in the gap between the
     headline and the Contact button instead, and restore the top/bottom + auto
     margin centring the desktop rule uses so it stays clear of both. */
  .hero_logo.is-absolute {
    width: 11rem;
    height: auto;
    top: var(--navbar-height);
    bottom: 0;
  }
  .navbar_logo-wrapper .image {
    max-height: 2.1rem;
  }

  .footer_logo {
    max-width: 15rem;
  }
}

@media screen and (max-width: 479px) {
  .navbar_logo-wrapper {
    width: 7.5rem;
  }
}

/* Mobile navigation: hamburger trigger, options in a panel that slides in
   from the right and carries the Sairachana lockup.

   Like .navbar_logo-fixed above, the trigger is pinned outside <nav> rather
   than laid out inside .navbar_content-wrapper — .navbar carries
   mix-blend-mode: exclusion "as a group", which blended the toggle against
   whatever sat behind the open panel and made it disappear. Fixed-positioning
   it as a sibling (same trick as the logo) keeps its own white/dark colours
   and a z-index above .mobile-menu, so it stays visible and clickable while
   the panel is open. */
.navbar_menu-toggle {
  position: fixed;
  z-index: 300;
  top: 1rem;
  right: var(--padding-global);
  display: none;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  /* Same adaptive-contrast trick .navbar uses on its links: blending the
     white bars against whatever sits behind them keeps the icon readable
     over both the light sections and the dark hero photo, and — since the
     toggle now blends against its own backdrop rather than the nav's —
     also over the dark panel once it's open. */
  mix-blend-mode: exclusion;
}

.navbar_menu-toggle-bars,
.navbar_menu-toggle-close {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar_menu-toggle-bars {
  align-items: flex-end;
  gap: 0.22rem;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.navbar_menu-toggle-bar {
  width: 3px;
  background-color: var(--secondary-color);
  border-radius: 1px;
}

.navbar_menu-toggle-bar:nth-child(1) {
  height: 50%;
}

.navbar_menu-toggle-bar:nth-child(2) {
  height: 100%;
}

.navbar_menu-toggle-bar:nth-child(3) {
  height: 72%;
}

.navbar_menu-toggle-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.navbar_menu-toggle-close span {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: var(--secondary-color);
}

.navbar_menu-toggle-close span:first-child {
  transform: rotate(45deg);
}

.navbar_menu-toggle-close span:last-child {
  transform: rotate(-45deg);
}

.navbar_menu-toggle.is-active .navbar_menu-toggle-bars {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.navbar_menu-toggle.is-active .navbar_menu-toggle-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.mobile-menu {
  visibility: hidden;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.mobile-menu.is-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mobile-menu.is-open .mobile-menu_overlay {
  opacity: 1;
}

.mobile-menu_panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem clamp(1.5rem, 6vw, 2.5rem) 2.5rem;
  background-color: var(--primary-color);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow-y: auto;
}

.mobile-menu.is-open .mobile-menu_panel {
  transform: translate3d(0, 0, 0);
}

.mobile-menu_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
}

.mobile-menu_logo {
  display: flex;
  align-items: center;
  width: 8rem;
}

.mobile-menu_logo .image {
  width: 100%;
  height: auto;
}

.mobile-menu_links {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
}

.mobile-menu_link {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--secondary-color);
  font-weight: 600;
  font-family: "Century Gothic", sans-serif;
  font-size: 1.4rem;
  text-decoration: none;
  transition: color 0.25s ease;
}

.navbar_link {
  font-weight: 600;
}

.mobile-menu_link:hover,
.mobile-menu_link:focus-visible,
.mobile-menu_link.w--current {
  color: var(--accent-color);
}

html.has-mobile-menu-open,
html.has-mobile-menu-open body {
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .navbar_menu-wrapper {
    display: none;
  }

  .navbar_menu-toggle {
    display: flex;
  }
}