/* v103: balanced capability stories, compact company page, bright page covers. */

/* Keep the return button clear of every internal-page heading. */
#services.unified-hub > .page-head,
#contact > .page-head {
  height: clamp(360px, 38vh, 410px) !important;
  min-height: clamp(360px, 38vh, 410px) !important;
  max-height: 410px !important;
}
#services.unified-hub > .page-head .wrap,
#contact > .page-head .wrap {
  padding-top: 108px !important;
  padding-bottom: 30px !important;
}
#services .page-head .headline,
#contact .page-head .headline {
  max-width: 18ch !important;
  margin-top: 0 !important;
  font-size: clamp(2.25rem, 4vw, 4.15rem) !important;
  line-height: .96 !important;
}
#services .page-head .dek {
  display: none !important;
}
#services .page-head .hero-home-button,
#contact .page-head .hero-home-button {
  top: 20px !important;
}
@media (min-width: 761px) {
  #services.unified-hub > .page-head .pg-inner {
    position: relative !important;
    display: block !important;
  }
  #services.unified-hub > .page-head .pg-inner > .wrap {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    width: min(1180px, calc(100% - 48px)) !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
  }
  #services .page-head .headline {
    max-width: 22ch !important;
    margin-top: 0 !important;
    font-size: clamp(2.25rem, 3.45vw, 3.2rem) !important;
  }
}

/* Direction 02-05: copy, one three-scene strip, then one full-width action. */
#services .hub-services .direction-layout-v103 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 26px !important;
}
#services .hub-services .direction-layout-v103 .scene-copy {
  width: 100%;
  max-width: 780px;
}
#services .hub-services .direction-layout-v103 .scene-copy > p:last-of-type {
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.65;
}
#services .hub-services .direction-layout-v103 .scene-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}
#services .hub-services .direction-layout-v103 .scene-points li {
  min-height: 74px;
  padding: 17px 17px 17px 38px;
  border: 1px solid rgba(23, 59, 91, .10);
  border-radius: 16px;
  background: #f4f8f9;
  color: #3b5365;
  font-size: .82rem;
  line-height: 1.4;
}
#services .direction-gallery-v103 {
  width: 100%;
  margin: 2px 0 0;
  border: 1px solid rgba(23, 59, 91, .12);
  border-radius: 22px;
  background: #e8eff1;
  box-shadow: 0 17px 38px rgba(23, 59, 91, .12);
  overflow: hidden;
}
#services .direction-gallery-v103 img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

/* One visual language for action areas and their buttons. */
#services .hub-context-cta,
#works .page-cta {
  width: 100%;
  box-sizing: border-box;
}
#services .direction-layout-v103 .hub-context-cta {
  margin: 2px 0 0 !important;
  padding: 24px 28px !important;
}
#services .hub-context-cta button,
#services .page-cta .link-cta,
#works .page-cta .link-cta {
  border: 1px solid #f3d99f !important;
  background: linear-gradient(180deg, #f0cf8e, #ddb15d) !important;
  color: #17324d !important;
  text-shadow: none !important;
  box-shadow: 0 12px 28px rgba(7, 26, 39, .24), inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

/* Remove the old beige slab behind the furniture accordion. */
#services .hub-panel .caps {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#services .hub-panel .cap {
  margin: 0 !important;
}

/* Company: one readable story with production, clients and original letters. */
#company > .hub-company.hub-panel-v102 {
  margin: 0 auto;
  padding: clamp(38px, 4.5vw, 62px) 0 clamp(66px, 7vw, 96px);
  display: grid;
  align-items: start;
  gap: clamp(28px, 4vw, 52px);
}
#company > .hub-company.hub-panel-v102[hidden] {
  display: grid !important;
}
#company > .hub-company > section.chapter {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(23, 59, 91, .10) !important;
  border-radius: 28px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 55px rgba(23, 59, 91, .10);
  overflow: hidden;
}
:is(#services, #company) .hub-company.hub-panel-v102 {
  width: min(1040px, calc(100% - 48px));
  grid-template-columns: minmax(0, 1fr) !important;
}
:is(#services, #company) .hub-company > .subpage-index {
  display: none !important;
}
:is(#services, #company) .hub-company > .company-story-v103 {
  display: block !important;
  grid-column: 1 !important;
  grid-row: auto !important;
}
:is(#services, #company) .hub-company .company-story-v103 > .wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(34px, 5vw, 58px) !important;
  padding: clamp(36px, 5vw, 64px) !important;
}
:is(#services, #company) .hub-company .company-story-copy-v103 {
  width: 100%;
  max-width: none;
}
:is(#services, #company) .hub-company .company-story-copy-v103 .chapter-title {
  max-width: 19ch !important;
  font-size: clamp(2.25rem, 4.3vw, 4.25rem) !important;
  line-height: .96 !important;
  overflow-wrap: normal;
  word-break: normal;
}
:is(#services, #company) .hub-company .company-story-copy-v103 > p:not(.chapter-label) {
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.67;
}
:is(#services, #company) .hub-company .proof-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100%;
}
:is(#services, #company) .hub-company .proof-strip > div {
  min-width: 0;
  padding: 24px !important;
}
:is(#services, #company) .hub-company .proof-strip strong {
  color: #f0c86e !important;
  font-family: var(--sans) !important;
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 820 !important;
}
#company .hub-company .proof-strip {
  background: #173b5b !important;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(23, 59, 91, .18);
}
#company .hub-company .proof-strip > div {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .22) !important;
}
#company .hub-company .proof-strip span {
  color: #fff !important;
}
:is(#services, #company) .company-production-v103 {
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(23, 59, 91, .13);
}
:is(#services, #company) .company-production-v103 .chapter-title {
  max-width: 18ch !important;
  font-size: clamp(1.9rem, 3vw, 3rem) !important;
}
:is(#services, #company) .company-production-details-v103 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}
:is(#services, #company) .company-production-details-v103 .company-details {
  margin: 0 !important;
  border: 1px solid rgba(23, 59, 91, .12);
  border-radius: 18px;
  background: #f4f8f9;
  overflow: hidden;
}
:is(#services, #company) .company-trust-v103 {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid rgba(23, 59, 91, .13);
}
:is(#services, #company) .company-trust-head-v103,
:is(#services, #company) .company-letters-head-v103 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
  align-items: end;
  gap: 28px;
}
:is(#services, #company) .company-trust-head-v103 .chapter-title {
  max-width: 15ch !important;
  margin-bottom: 0 !important;
  font-size: clamp(1.9rem, 3vw, 3rem) !important;
}
:is(#services, #company) .company-trust-head-v103 > p,
:is(#services, #company) .company-letters-head-v103 > p {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.62;
}
:is(#services, #company) .company-client-wall-v103 {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
  border: 1px solid rgba(240, 200, 110, .22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 8%, rgba(68, 131, 174, .34), transparent 34%),
    linear-gradient(145deg, #173b5b 0%, #102f49 100%);
  box-shadow: 0 22px 42px rgba(23, 59, 91, .16);
}
:is(#services, #company) .company-client-wall-v103 .lg {
  min-height: 104px !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 17px !important;
  background-color: rgba(255, 255, 255, .97) !important;
  background-size: 78% auto !important;
  box-shadow: 0 9px 22px rgba(3, 20, 34, .14) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
:is(#services, #company) .company-client-wall-v103 .lg:hover {
  box-shadow: 0 13px 27px rgba(3, 20, 34, .22) !important;
  transform: translateY(-3px);
}
:is(#services, #company) .company-letters-v103 {
  display: grid;
  gap: 28px;
  padding-top: clamp(26px, 3.5vw, 38px);
  border-top: 1px solid rgba(23, 59, 91, .10);
}
:is(#services, #company) .company-letters-head-v103 h3 {
  max-width: 16ch;
  margin: 0;
  color: #173b5b;
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.7vw, 2.55rem);
  line-height: 1.02;
}
:is(#services, #company) .company-letter-grid-v103 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important;
  align-items: start;
  gap: clamp(18px, 3vw, 30px) !important;
  width: 100%;
  max-width: none !important;
}
:is(#services, #company) .company-letter-card-v103 {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(23, 59, 91, .12);
  border-radius: 24px;
  background: linear-gradient(155deg, #fff 0%, #f3f7f8 100%);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
:is(#services, #company) .company-letter-card-v103:hover,
:is(#services, #company) .company-letter-card-v103:focus-visible {
  border-color: rgba(35, 99, 145, .34);
  box-shadow: 0 18px 34px rgba(23, 59, 91, .13);
  outline: 0;
  transform: translateY(-3px);
}
:is(#services, #company) .company-letter-card-v103 .scan {
  width: 100% !important;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 1 / 1.29;
  border: 1px solid rgba(23, 59, 91, .10) !important;
  border-radius: 14px !important;
  background-color: #fff;
  background-position: center top !important;
  background-size: contain !important;
  box-shadow: 0 14px 28px rgba(23, 59, 91, .11) !important;
}
:is(#services, #company) .company-letter-card-v103 .scan.lt-gym {
  aspect-ratio: 1200 / 849;
}
:is(#services, #company) .company-letter-card-v103 .scan.has-leveled-scan-v103 {
  position: relative;
  background-image: none !important;
  overflow: hidden;
}
.company-letter-level-v103 {
  position: absolute;
  inset: -1.4%;
  display: block;
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(-.65deg) scale(1.018);
  transform-origin: center center;
}
:is(#services, #company) .company-letter-card-v103 .lcap {
  padding: 19px 5px 5px !important;
  color: #173b5b;
  font-family: var(--sans);
  font-size: .94rem !important;
  font-weight: 760;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}
:is(#services, #company) .company-letter-open-v103 {
  padding: 4px 5px 3px;
  color: #a46e16;
  font-size: .78rem;
  font-weight: 780;
}
.company-letter-dialog-v103 {
  width: min(780px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  padding: 54px 18px 18px;
  border: 0;
  border-radius: 24px;
  background: #f4f8f9;
  box-shadow: 0 28px 90px rgba(3, 17, 29, .38);
}
.company-letter-dialog-v103::backdrop {
  background: rgba(4, 19, 31, .78);
  backdrop-filter: blur(5px);
}
.company-letter-dialog-scan-v103 {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.29;
  border-radius: 14px;
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}
.company-letter-level-dialog-v103 {
  inset: -1.2%;
}
.company-letter-dialog-v103 p {
  margin: 14px 4px 0;
  color: #173b5b;
  font-size: .88rem;
  line-height: 1.45;
}
.company-letter-close-v103 {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(23, 59, 91, .15);
  border-radius: 50%;
  background: #fff;
  color: #173b5b;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}

/* Portfolio: a light architectural cover flowing directly into the cards. */
#works .page-head {
  min-height: clamp(430px, 46vh, 470px) !important;
  max-height: 470px;
}
#works .page-head .pg-bg {
  background-image: url("../portfolio/gymnastics/01-exterior.jpg") !important;
  background-position: center 58% !important;
  filter: brightness(1.08) saturate(.98) contrast(.96) !important;
  transform: none !important;
}
#works .page-head .pg-scrim {
  background: linear-gradient(90deg,
    rgba(244, 248, 249, .93) 0%,
    rgba(241, 247, 248, .78) 34%,
    rgba(238, 245, 247, .26) 62%,
    rgba(238, 245, 247, .03) 100%) !important;
}
#works .page-head .headline {
  color: #173b5b !important;
  text-shadow: 0 2px 16px rgba(255, 255, 255, .85) !important;
}
#works .page-head .pg-lead {
  color: #29485e !important;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .92) !important;
}
#works .works-main {
  padding-top: clamp(26px, 3vw, 42px) !important;
}
#works .works-main > .wrap > .works-feature-grid:first-child {
  padding: 0 !important;
}
#works .works-feature-grid {
  margin-top: 0 !important;
}
#works .works-feature-grid[hidden],
#works .works-main [hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  #services .hub-services .direction-layout-v103 .scene-points,
  :is(#services, #company) .company-production-details-v103 {
    grid-template-columns: 1fr;
  }
  :is(#services, #company) .hub-company.hub-panel-v102 {
    width: min(100% - 32px, 760px);
  }
  #company > .hub-company.hub-panel-v102 {
    padding-top: 28px;
  }
  :is(#services, #company) .company-client-wall-v103 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  :is(#services, #company) .company-letter-grid-v103 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  #services.unified-hub > .page-head,
  #contact > .page-head {
    height: 410px !important;
    min-height: 410px !important;
    max-height: 410px !important;
  }
  #services.unified-hub > .page-head .wrap,
  #contact > .page-head .wrap {
    padding-top: 92px !important;
    padding-bottom: 24px !important;
  }
  #services .page-head .headline,
  #contact .page-head .headline {
    max-width: 15ch !important;
    font-size: clamp(1.75rem, 8vw, 2.45rem) !important;
  }
  #services .direction-gallery-v103 img {
    aspect-ratio: 1.55 / 1;
  }
  :is(#services, #company) .hub-company .company-story-copy-v103 .chapter-title {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }
  :is(#services, #company) .hub-company .proof-strip {
    grid-template-columns: 1fr !important;
  }
  :is(#services, #company) .company-trust-head-v103,
  :is(#services, #company) .company-letters-head-v103 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  :is(#services, #company) .company-client-wall-v103 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  :is(#services, #company) .company-client-wall-v103 .lg {
    min-height: 96px !important;
  }
  :is(#services, #company) .company-letter-card-v103 {
    padding: 12px;
    border-radius: 20px;
  }
  :is(#services, #company) .company-letter-card-v103 .lcap {
    padding: 16px 3px 5px !important;
    font-size: .86rem !important;
  }
  :is(#services, #company) .company-letter-open-v103 {
    padding: 3px 3px 2px;
  }
  #works .page-head {
    min-height: 470px !important;
  }
  #works .page-head .pg-bg {
    background-position: 59% center !important;
  }
}

/* Company hero: a calm, light introduction built around the company's work. */
#company > .page-head {
  min-height: clamp(320px, 34vw, 390px);
  background: #eaf0f2;
}
#company > .page-head .pg-bg {
  background-image: url("../ai-concepts/03-design-light.jpg") !important;
  background-position: center 54% !important;
  filter: saturate(.86) contrast(.96) brightness(.98) !important;
  transform: none !important;
}
#company > .page-head .pg-scrim {
  background:
    linear-gradient(90deg, rgba(239, 245, 247, .98) 0%, rgba(239, 245, 247, .88) 31%, rgba(239, 245, 247, .33) 58%, rgba(239, 245, 247, .08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(25, 59, 87, .08)) !important;
}
#company > .page-head .pg-inner {
  padding: 96px 0 34px;
}
#company > .page-head .company-hero-lockup {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
}
#company > .page-head .headline {
  max-width: 760px;
  margin: 0;
  color: #173f61 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: clamp(3.2rem, 5.8vw, 5rem) !important;
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
  text-shadow: none !important;
}
#company > .page-head .company-hero-logo-card {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(108px, 11vw, 138px);
  padding: 12px 14px 10px;
  border: 1px solid rgba(117, 154, 185, .28);
  border-radius: 22px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 14px 38px rgba(30, 67, 96, .13);
  backdrop-filter: blur(12px);
}
#company > .page-head .company-hero-logo {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  #company > .page-head {
    min-height: 300px;
  }
  #company > .page-head .pg-bg {
    background-position: 38% center !important;
  }
  #company > .page-head .pg-scrim {
    background: linear-gradient(90deg, rgba(239, 245, 247, .97) 0%, rgba(239, 245, 247, .84) 64%, rgba(239, 245, 247, .36) 100%) !important;
  }
  #company > .page-head .pg-inner {
    padding: 86px 0 26px;
  }
  #company > .page-head .company-hero-lockup {
    gap: 18px;
  }
  #company > .page-head .headline {
    max-width: 68vw;
    font-size: clamp(2.55rem, 11.6vw, 4rem) !important;
  }
  #company > .page-head .company-hero-logo-card {
    width: clamp(72px, 20vw, 92px);
    padding: 8px 9px 7px;
    border-radius: 16px;
  }
}

/* Footer: a concise company statement, clear destinations and direct contact. */
.colophon .colo-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.colophon .colo-kicker {
  margin: 0 0 10px;
  color: #f0bd55;
  font: 700 .72rem/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.colophon .colo-summary {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font: 650 clamp(1.3rem, 2vw, 1.85rem)/1.28 var(--sans);
  letter-spacing: -.025em;
}
.colophon .colo-primary-contact {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  color: #fff;
  text-decoration: none;
}
.colophon .colo-primary-contact span {
  color: rgba(255, 255, 255, .58);
  font: 600 .68rem/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.colophon .colo-primary-contact strong {
  font: 750 clamp(1.05rem, 1.65vw, 1.35rem)/1.2 var(--sans);
  transition: color .18s ease;
}
.colophon .colo-primary-contact:hover strong,
.colophon .colo-primary-contact:focus-visible strong {
  color: #f0bd55;
}
.colophon .colo-primary-contact:focus-visible {
  outline: 2px solid #f0bd55;
  outline-offset: 6px;
  border-radius: 3px;
}
.colophon .colo-grid {
  align-items: start;
  grid-template-columns: 1.1fr 1fr 1.08fr .95fr;
  gap: clamp(28px, 4vw, 70px);
}
.colophon .colo-grid li {
  min-width: 0;
}
.colophon .colo-grid h4 {
  margin-bottom: 17px;
  color: rgba(240, 189, 85, .72);
  font-weight: 650;
}
.colophon .colo-grid ul {
  gap: 10px;
  font-size: .92rem;
}
.colophon .colo-link,
.colophon .colo-home {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.45;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}
.colophon .colo-link {
  display: inline-block;
  max-width: 100%;
  opacity: .9;
}
.colophon .colo-link:hover,
.colophon .colo-link:focus-visible,
.colophon .colo-home:hover,
.colophon .colo-home:focus-visible {
  color: #f0bd55;
  opacity: 1;
  transform: translateX(3px);
  outline: none;
}
.colophon .colo-link:focus-visible,
.colophon .colo-home:focus-visible {
  box-shadow: 0 2px 0 #f0bd55;
}
.colophon .colo-contact .colo-link {
  overflow-wrap: anywhere;
}
.colophon .colo-address {
  max-width: 27ch;
}
.colophon .colo-home {
  font-family: inherit;
  letter-spacing: inherit;
}
.colophon .colo-bottom {
  align-items: center;
  color: rgba(255, 255, 255, .48);
  line-height: 1.5;
}
@media (max-width: 760px) {
  .colophon .colo-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 34px;
    padding-bottom: 28px;
  }
  .colophon .colo-primary-contact {
    align-items: flex-start;
  }
  .colophon .colo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
  }
  .colophon .colo-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  .colophon .colo-grid {
    grid-template-columns: 1fr;
  }
}

/* Visible destination for the project links in the footer. */
#works .project-filters-v109 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
}
#works .project-filters-v109 button {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(23, 59, 91, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: #173b5b;
  font: 750 .82rem/1.1 var(--sans);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
#works .project-filters-v109 button:hover,
#works .project-filters-v109 button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}
#works .project-filters-v109 button.active {
  border-color: #173b5b;
  background: #173b5b;
  color: #fff;
}
#works .works-registry.filtered-v113 {
  margin-top: 28px;
}
#works .works-registry.filtered-v113 .works-intro {
  margin-bottom: 30px;
}
@media (max-width: 480px) {
  #works .project-filters-v109 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #works .project-filters-v109 button {
    width: 100%;
    padding-inline: 12px;
  }
}

/* v111: larger desktop navigation, a complete hero mist and a new light portfolio cover. */
@media (min-width: 901px) {
  .mast,
  .mast .wrap {
    height: 82px !important;
  }
  .mast-nav {
    gap: clamp(20px, 2.15vw, 34px) !important;
  }
  .mast-nav button {
    padding-bottom: 5px !important;
    font-size: clamp(.88rem, 1.02vw, 1rem) !important;
    font-weight: 680 !important;
  }
  .mast-phone {
    font-size: clamp(1rem, 1.18vw, 1.16rem) !important;
    font-weight: 720 !important;
  }
  #services .unified-hub-nav {
    top: 82px !important;
  }
}

/* Lift the soft composition veil so the roof peak is also under the mist. */
#home .hero-composition-wave path {
  transform: translateY(-26px) !important;
  transform-box: view-box !important;
}

/* A separate bright architectural image for the portfolio page. */
#works .page-head {
  background: #eef4f6 !important;
}
#works .page-head .pg-bg {
  background-image: url("../ai-concepts/01-complectation-light.jpg") !important;
  background-position: center 50% !important;
  filter: brightness(1.015) saturate(.88) contrast(.98) !important;
  transform: none !important;
}
#works .page-head .pg-scrim {
  background: linear-gradient(90deg,
    rgba(247, 250, 250, .98) 0%,
    rgba(245, 249, 249, .91) 31%,
    rgba(242, 247, 248, .62) 53%,
    rgba(242, 247, 248, .20) 76%,
    rgba(242, 247, 248, .04) 100%) !important;
}
#works .page-head .headline {
  color: #173b5b !important;
  text-shadow: 0 2px 18px rgba(255, 255, 255, .94) !important;
}
#works .page-head .pg-lead {
  color: #29485e !important;
  text-shadow: 0 1px 14px rgba(255, 255, 255, .96) !important;
}
@media (max-width: 760px) {
  #works .page-head .pg-bg {
    background-position: 56% center !important;
  }
}

/* v112: keep the bright portfolio mood without washing the photograph out. */
#works .page-head .pg-bg {
  filter: brightness(.91) saturate(.92) contrast(1.08) !important;
}
#works .page-head .pg-scrim {
  background:
    radial-gradient(ellipse at 20% 58%,
      rgba(229, 239, 242, .90) 0%,
      rgba(229, 239, 242, .74) 27%,
      rgba(229, 239, 242, .38) 43%,
      rgba(229, 239, 242, .10) 58%,
      transparent 70%),
    linear-gradient(90deg,
      rgba(218, 231, 236, .26) 0%,
      rgba(218, 231, 236, .10) 44%,
      transparent 72%) !important;
}
#works .page-head .headline {
  text-shadow: 0 1px 2px rgba(255, 255, 255, .88), 0 5px 20px rgba(223, 236, 240, .64) !important;
}
#works .page-head .pg-lead {
  text-shadow: 0 1px 2px rgba(255, 255, 255, .92), 0 3px 14px rgba(223, 236, 240, .72) !important;
}
@media (max-width: 760px) {
  #works .page-head .pg-scrim {
    background:
      linear-gradient(180deg,
        rgba(226, 237, 241, .18) 0%,
        rgba(226, 237, 241, .46) 42%,
        rgba(226, 237, 241, .82) 72%,
        rgba(226, 237, 241, .68) 100%) !important;
  }
}

/* v115 preview: Company is a top-level page with an editorial news block. */
.unified-hub-nav.company-detached-v115 .wrap {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#company .v3-news {
  padding-top: clamp(62px, 7vw, 104px);
  padding-bottom: clamp(62px, 7vw, 104px);
  background:
    radial-gradient(circle at 82% 18%, rgba(92, 171, 201, .13), transparent 31%),
    #eef3f5;
}
#company .v3-news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
#company .v3-news-head .v3-eyebrow {
  margin: 0;
}
#company .v3-news-issue {
  color: #5f6d78;
  font: 700 .76rem/1.2 var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#company .v3-news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(23, 59, 91, .12);
  border-radius: 34px;
  background: #fff;
  box-shadow: 0 26px 72px rgba(25, 57, 78, .13);
}
#company .v3-news-visual {
  position: relative;
  min-height: clamp(360px, 48vw, 580px);
  max-height: 580px;
  margin: 0;
  overflow: hidden;
  background: #173b5b;
}
#company .v3-news-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(8, 26, 42, .72) 100%);
  pointer-events: none;
}
#company .v3-news-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}
#company .v3-news-card:hover .v3-news-visual img {
  transform: scale(1.025);
}
#company .v3-news-visual figcaption {
  position: absolute;
  z-index: 1;
  left: 26px;
  bottom: 22px;
  color: rgba(255, 255, 255, .84);
  font: 650 .72rem/1.35 var(--sans);
}
#company .v3-news-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(42px, 6vw, 78px);
  background:
    radial-gradient(circle at 88% 12%, rgba(66, 137, 183, .42), transparent 34%),
    linear-gradient(145deg, #173b5b 0%, #102f49 100%);
}
#company .v3-news-topic {
  margin: 0 0 22px;
  color: #f0c86e;
  font: 800 .72rem/1.25 var(--sans);
  letter-spacing: .11em;
  text-transform: uppercase;
}
#company .v3-news-copy .v3-h2 {
  max-width: 20ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 4vw, 4.15rem);
  line-height: .98;
}
#company .v3-news-copy > p:not(.v3-news-topic) {
  max-width: 68ch;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(1rem, 1.14vw, 1.12rem);
  line-height: 1.65;
}
#company .v3-news-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 34px;
  padding: clamp(34px, 5vw, 60px);
  background: #fff;
}
#company .v3-news-source-label {
  margin: 0 0 14px;
  color: #a46e16;
  font: 800 .7rem/1.25 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
#company .v3-news-source h3 {
  max-width: 28ch;
  margin: 0;
  color: #173b5b;
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.45vw, 2.55rem);
  line-height: 1.06;
}
#company .v3-news-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 20px;
  border-radius: 999px;
  background: #173b5b;
  color: #fff;
  font: 760 .86rem/1.1 var(--sans);
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease;
}
#company .v3-news-link:hover,
#company .v3-news-link:focus-visible {
  transform: translateY(-2px);
  background: #205b93;
  outline: none;
}
#company .v3-news-link span {
  color: #f0bd55;
  font-size: 1.15em;
}
@media (max-width: 880px) {
  #company .v3-news-visual {
    min-height: clamp(300px, 58vw, 480px);
  }
  #company .v3-news-copy .v3-h2 {
    max-width: 100%;
  }
  #company .v3-news-source {
    grid-template-columns: 1fr;
    align-items: start;
  }
}
@media (max-width: 560px) {
  #company .v3-news-head {
    display: block;
  }
  #company .v3-news-issue {
    display: block;
    margin-top: 12px;
  }
  #company .v3-news-card {
    border-radius: 24px;
  }
  #company .v3-news-copy {
    padding: 30px 24px 34px;
  }
  #company .v3-news-copy .v3-h2 {
    font-size: clamp(1.8rem, 9.5vw, 2.6rem);
  }
  #company .v3-news-source {
    padding: 28px 24px 32px;
  }
}