@import url('https://fonts.cdnfonts.com/css/alliance-no1');
@import url('https://fonts.cdnfonts.com/css/neue');
@import url('https://fonts.cdnfonts.com/css/identidad');
@import url('https://fonts.cdnfonts.com/css/retro-qesmo');



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --menu-overlay-bg: #0e0e0e;
  scrollbar-width: none;
  --web-color: #fff;
  --branding-color: #fff;
  --marketing-color: #fff;
  --architecture-color: #fff;
}

html {
  scrollbar-width: none;
}

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

html.lenis.lenis-stopped {
  overflow: hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

body {
  font-family: 'CabinetGrotesk-Thin', sans-serif;
  color: #000000;
  overflow-x: hidden;
  background-color: #e5d7c6;
}

.scrollbar-indicator {
  position: fixed;
  top: 12px;
  right: 10px;
  z-index: 10001;
  width: 12px;
  height: calc(100vh - 24px);
  pointer-events: auto;
  opacity: 0.55;
  mix-blend-mode: difference;
  cursor: grab;
  touch-action: none;
}

@media (max-width: 767px) {
  body:has(.projects-showcase-hero),
  body:has(.projects-showcase-hero) .link-page-main,
  body:has(.projects-showcase-hero) .link-page-card,
  body:has(.projects-showcase-hero) .project-page-card,
  body:has(.projects-showcase-hero) .link-page-hero-projects,
  body:has(.projects-showcase-hero) .projects-template-container {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background-color: #d4b99e !important;
  }

  body:has(.projects-showcase-hero) .navbar {
    padding: calc(env(safe-area-inset-top) + clamp(1.95rem, 6.4svh, 3.15rem)) clamp(1.55rem, 7.8vw, 4.4rem) 0 !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(3.65rem, 16vw, 5.45rem) !important;
    height: clamp(3.65rem, 16vw, 5.45rem) !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    color: #000000 !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container {
    --projects-mobile-pad: clamp(1.48rem, 7.8vw, 4.7rem);
    --projects-mobile-card: min(70vw, 28rem);
    --projects-mobile-gap: clamp(0.7rem, 3.2vw, 1.12rem);
    --projects-copy-row: clamp(2.55rem, 7.4svh, 4.75rem);
    padding: calc(env(safe-area-inset-top) + clamp(4.25rem, 13.3svh, 13.6rem)) 0 clamp(0.55rem, 1.7svh, 1.55rem) !important;
    display: grid !important;
    grid-template-areas:
      "services"
      "showcase"
      "dots"
      "detail"
      "title" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      auto
      minmax(0, clamp(10.8rem, 32.6svh, 36rem))
      auto
      minmax(0, 1fr)
      clamp(2.35rem, 8.8svh, 6.5rem) !important;
    row-gap: clamp(0.42rem, 1.35svh, 0.95rem) !important;
    align-content: stretch !important;
  }

  body:has(.projects-showcase-hero) .projects-service-nav {
    grid-area: services !important;
    width: calc(100% - (var(--projects-mobile-pad) * 2)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
    gap: clamp(0.62rem, 2.55svh, 1.35rem) clamp(0.78rem, 4.1vw, 1.65rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    min-height: clamp(2.62rem, 7.7svh, 4.65rem) !important;
    padding: 0 clamp(0.68rem, 3.4vw, 1.45rem) !important;
    border: 2px solid #000000 !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.84rem, 4.18vw, 1.62rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-items {
    grid-area: showcase !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--projects-mobile-gap) !important;
    margin-left: calc(((100vw - var(--projects-mobile-card)) / 2) - ((var(--projects-mobile-card) + var(--projects-mobile-gap)) * 3)) !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-col,
  body:has(.projects-showcase-hero) .projects-showcase-col-main {
    display: contents !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-item,
  body:has(.projects-showcase-hero) .projects-showcase-item-side,
  body:has(.projects-showcase-hero) .projects-showcase-item-main {
    width: var(--projects-mobile-card) !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 0 0 var(--projects-mobile-card) !important;
    display: grid !important;
    grid-template-rows: var(--projects-copy-row) minmax(0, 1fr) !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-copy {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 clamp(0.48rem, 1.55svh, 0.95rem) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.24) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    column-gap: 0.75rem !important;
    font-size: clamp(0.86rem, 4.35vw, 1.55rem) !important;
    line-height: 1.04 !important;
    font-weight: 400 !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-item-side .projects-showcase-copy {
    visibility: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img,
  body:has(.projects-showcase-hero) .projects-showcase-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: clamp(0.95rem, 4.3vw, 1.75rem) !important;
    clip-path: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img {
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img img {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-controls {
    grid-area: showcase !important;
    position: relative !important;
    inset: auto !important;
    z-index: 35 !important;
    align-self: center !important;
    justify-self: center !important;
    width: min(100%, calc(var(--projects-mobile-card) + clamp(4.6rem, 18vw, 7rem))) !important;
    display: flex !important;
    justify-content: space-between !important;
    transform: translateY(calc(var(--projects-copy-row) * 0.38)) !important;
    pointer-events: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-control {
    width: clamp(2.82rem, 13.2vw, 4.55rem) !important;
    height: clamp(2.82rem, 13.2vw, 4.55rem) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #d8bfaa !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots {
    grid-area: dots !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.52rem, 2.8vw, 0.98rem) !important;
    min-height: clamp(0.58rem, 1.75svh, 0.95rem) !important;
    margin: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span {
    width: clamp(0.42rem, 2.3vw, 0.82rem) !important;
    height: clamp(0.42rem, 2.3vw, 0.82rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail {
    grid-area: detail !important;
    width: calc(100% - (var(--projects-mobile-pad) * 2)) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-items: start !important;
    gap: clamp(0.42rem, 1.45svh, 0.9rem) !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail h1 {
    margin: 0 !important;
    width: 100% !important;
    font-size: clamp(1.42rem, 7.35vw, 3rem) !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail p {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(0.84rem, 4.12vw, 1.55rem) !important;
    line-height: 1.25 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-cta {
    min-width: clamp(9.8rem, 46vw, 16.8rem) !important;
    min-height: clamp(2.55rem, 7.35svh, 4.25rem) !important;
    padding: 0 clamp(1.05rem, 5.2vw, 2rem) !important;
    border: 2px solid #000000 !important;
    font-size: clamp(0.88rem, 4.18vw, 1.45rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title {
    grid-area: title !important;
    position: relative !important;
    inset: auto !important;
    align-self: end !important;
    justify-self: center !important;
    width: calc(100% - (var(--projects-mobile-pad) * 1.35)) !important;
    margin: 0 auto !important;
    display: flex !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word {
    display: flex !important;
    justify-content: space-between !important;
    font-size: clamp(2.75rem, 14.7vw, 5.15rem) !important;
    line-height: 0.8 !important;
    overflow-wrap: normal !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > span,
  body:has(.projects-showcase-hero) .projects-showcase-word > span > span {
    transform: none !important;
    overflow: visible !important;
    clip-path: none !important;
  }
}

@media (max-width: 767px) and (max-height: 620px) {
  body:has(.projects-showcase-hero) .projects-template-container {
    padding-top: calc(env(safe-area-inset-top) + clamp(4rem, 12.7svh, 5.25rem)) !important;
    grid-template-rows:
      auto
      minmax(0, clamp(9.8rem, 29svh, 12.5rem))
      auto
      minmax(0, 1fr)
      clamp(2.05rem, 7.6svh, 2.75rem) !important;
    row-gap: clamp(0.3rem, 1.05svh, 0.55rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    min-height: clamp(2.25rem, 7.1svh, 2.75rem) !important;
    font-size: clamp(0.78rem, 3.95vw, 0.95rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail h1 {
    font-size: clamp(1.25rem, 6.85vw, 1.55rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail p {
    font-size: clamp(0.74rem, 3.72vw, 0.9rem) !important;
    line-height: 1.18 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-cta {
    min-height: clamp(2.25rem, 6.9svh, 2.65rem) !important;
  }
}

/* True final Projects phone comp override. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero),
  body:has(.projects-showcase-hero) .link-page-main,
  body:has(.projects-showcase-hero) .link-page-card,
  body:has(.projects-showcase-hero) .project-page-card,
  body:has(.projects-showcase-hero) .link-page-hero-projects,
  body:has(.projects-showcase-hero) .projects-template-container {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background: #d4b99e !important;
  }

  body:has(.projects-showcase-hero) .projects-bridge-section,
  body:has(.projects-showcase-hero) .project-page-footer {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .navbar {
    padding: calc(env(safe-area-inset-top) + 4.85svh) 6.9vw 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    color: #000000 !important;
    font-size: clamp(1.9rem, 8.4vw, 4.45rem) !important;
    line-height: 0.85 !important;
    letter-spacing: 0 !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(3.35rem, 16.9vw, 5.45rem) !important;
    height: clamp(3.35rem, 16.9vw, 5.45rem) !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.projects-showcase-hero) .menu-icon {
    width: 47% !important;
    height: 47% !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container {
    --projects-mobile-card: 53.7vw;
    --projects-mobile-gap: 7.2vw;
    position: relative !important;
    display: block !important;
    padding: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-service-nav {
    position: absolute !important;
    z-index: 40 !important;
    top: 13.35svh !important;
    left: 6.85vw !important;
    right: 6.85vw !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    align-items: center !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000000 !important;
    font-family: 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(0.56rem, 2.7vw, 0.95rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab::before {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab.is-active,
  body:has(.projects-showcase-hero) .projects-service-tab:hover,
  body:has(.projects-showcase-hero) .projects-service-tab:focus-visible {
    color: #000000 !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-items {
    position: absolute !important;
    z-index: 12 !important;
    top: 28.55svh !important;
    left: 0 !important;
    width: 100vw !important;
    height: 40.8svh !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--projects-mobile-gap) !important;
    margin-left: calc(((100vw - var(--projects-mobile-card)) / 2) - ((var(--projects-mobile-card) + var(--projects-mobile-gap)) * 3)) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-col,
  body:has(.projects-showcase-hero) .projects-showcase-col-main {
    display: contents !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-item,
  body:has(.projects-showcase-hero) .projects-showcase-item-side,
  body:has(.projects-showcase-hero) .projects-showcase-item-main {
    width: var(--projects-mobile-card) !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 0 0 var(--projects-mobile-card) !important;
    display: block !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-copy,
  body:has(.projects-showcase-hero) .projects-showcase-controls,
  body:has(.projects-showcase-hero) .projects-mobile-detail {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img,
  body:has(.projects-showcase-hero) .projects-showcase-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img img {
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: saturate(0.9) contrast(1.02) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title {
    position: absolute !important;
    z-index: 22 !important;
    inset: auto !important;
    top: 26.7svh !important;
    left: 50% !important;
    width: 48vw !important;
    height: 45.7svh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word {
    flex: 0 0 auto !important;
    width: 100% !important;
    font-family: 'CabinetGrotesk-Bold', 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(3.55rem, 19.8vw, 7.7rem) !important;
    font-weight: 700 !important;
    line-height: 0.82 !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
    text-align: center !important;
    left: auto !important;
    right: auto !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before,
  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    display: block !important;
    width: 100% !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before {
    content: "OUR";
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    content: "WORK";
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > span {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots {
    position: absolute !important;
    z-index: 28 !important;
    top: 78.55svh !important;
    left: 50% !important;
    display: flex !important;
    width: min(72vw, 22rem) !important;
    gap: clamp(0.45rem, 2.1vw, 0.8rem) !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    color: #000000 !important;
    font-family: 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(0.68rem, 3vw, 0.9rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 70% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span.is-active {
    background: transparent !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots .projects-mobile-meta-year {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container::after {
    content: "P R O J E C T S";
    position: absolute;
    z-index: 24;
    left: 11.6vw;
    right: 11.6vw;
    top: 86.45svh;
    color: #000000;
    font-family: 'CabinetGrotesk-Regular', sans-serif;
    font-size: clamp(1.05rem, 4.8vw, 1.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    word-spacing: clamp(1.05rem, 6.1vw, 2.35rem);
    white-space: nowrap;
  }
}

/* Exact mobile Projects poster layout. Keep last. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero),
  body:has(.projects-showcase-hero) .link-page-main,
  body:has(.projects-showcase-hero) .link-page-card,
  body:has(.projects-showcase-hero) .project-page-card,
  body:has(.projects-showcase-hero) .link-page-hero-projects,
  body:has(.projects-showcase-hero) .projects-template-container {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background: #d4b99e !important;
  }

  body:has(.projects-showcase-hero) .projects-bridge-section,
  body:has(.projects-showcase-hero) .project-page-footer {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .navbar {
    padding: calc(env(safe-area-inset-top) + 4.85svh) 6.9vw 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    color: #000000 !important;
    font-size: clamp(1.9rem, 8.4vw, 4.45rem) !important;
    line-height: 0.85 !important;
    letter-spacing: 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button .char,
  body:has(.projects-showcase-hero) .logo-button .line-mask {
    line-height: 0.85 !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(3.35rem, 16.9vw, 5.45rem) !important;
    height: clamp(3.35rem, 16.9vw, 5.45rem) !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.projects-showcase-hero) .menu-icon {
    width: 47% !important;
    height: 47% !important;
  }

  body:has(.projects-showcase-hero) .menu-icon-line {
    stroke-width: 1.85 !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container {
    --projects-mobile-card: 53.7vw;
    --projects-mobile-gap: 7.2vw;
    position: relative !important;
    display: block !important;
    padding: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-service-nav {
    position: absolute !important;
    z-index: 40 !important;
    top: 13.35svh !important;
    left: 6.85vw !important;
    right: 6.85vw !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1.18fr 1.52fr 0.92fr 1fr !important;
    gap: 2.6vw !important;
    align-items: center !important;
    pointer-events: auto !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000000 !important;
    font-family: 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(0.82rem, 4vw, 1.2rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab::before {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab.is-active,
  body:has(.projects-showcase-hero) .projects-service-tab:hover,
  body:has(.projects-showcase-hero) .projects-service-tab:focus-visible {
    color: #000000 !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-items {
    position: absolute !important;
    z-index: 12 !important;
    top: 28.55svh !important;
    left: 0 !important;
    width: 100vw !important;
    height: 40.8svh !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--projects-mobile-gap) !important;
    margin-left: calc(((100vw - var(--projects-mobile-card)) / 2) - ((var(--projects-mobile-card) + var(--projects-mobile-gap)) * 3)) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-col,
  body:has(.projects-showcase-hero) .projects-showcase-col-main {
    display: contents !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-item,
  body:has(.projects-showcase-hero) .projects-showcase-item-side,
  body:has(.projects-showcase-hero) .projects-showcase-item-main {
    width: var(--projects-mobile-card) !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 0 0 var(--projects-mobile-card) !important;
    display: block !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-copy,
  body:has(.projects-showcase-hero) .projects-showcase-controls,
  body:has(.projects-showcase-hero) .projects-mobile-detail {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img,
  body:has(.projects-showcase-hero) .projects-showcase-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img {
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img img {
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: saturate(0.9) contrast(1.02) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title {
    position: absolute !important;
    z-index: 22 !important;
    inset: auto !important;
    top: 26.7svh !important;
    left: 31.9vw !important;
    width: 36.2vw !important;
    height: 45.7svh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    pointer-events: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-family: 'Retro Qesmo', Georgia, serif !important;
    font-size: clamp(4.25rem, 23.6vw, 9rem) !important;
    font-weight: 400 !important;
    line-height: 0.73 !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before,
  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    display: block !important;
    width: 100% !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before {
    content: "OUR";
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    content: "WORK";
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > span,
  body:has(.projects-showcase-hero) .projects-showcase-word > span > span {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > span > span {
    overflow: visible !important;
    clip-path: none !important;
    transform: none !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots {
    position: absolute !important;
    z-index: 28 !important;
    top: 78.55svh !important;
    left: 50% !important;
    display: flex !important;
    gap: clamp(0.38rem, 1.7vw, 0.62rem) !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span {
    display: block !important;
    width: clamp(0.38rem, 1.65vw, 0.62rem) !important;
    height: clamp(0.38rem, 1.65vw, 0.62rem) !important;
    border: 1.5px solid #000000 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span.is-active {
    background: #000000 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span:nth-child(n+4) {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container::after {
    content: "PROJECTS";
    position: absolute;
    z-index: 24;
    left: 11.6vw;
    right: 11.6vw;
    top: 86.45svh;
    display: flex;
    justify-content: space-between;
    color: #000000;
    font-family: 'CabinetGrotesk-Regular', sans-serif;
    font-size: clamp(1.05rem, 4.8vw, 1.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.72em;
    white-space: nowrap;
  }
}

.scrollbar-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.22);
  transform: translateX(-50%);
}

.scrollbar-indicator-thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: clamp(56px, 12vh, 120px);
  border-radius: 999px;
  background-color: #ffffff;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}

.scrollbar-indicator.is-dragging {
  cursor: grabbing;
  opacity: 0.78;
}

.is-link-transition .scrollbar-indicator {
  opacity: 0;
}

.service-image-cursor {
  --cursor-x: 0px;
  --cursor-y: 0px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12000;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--menu-overlay-bg);
  opacity: 1;
  pointer-events: none;
  translate: calc(var(--cursor-x) - 40px) calc(var(--cursor-y) - 40px);
  scale: 0;
  transition: scale 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: translate, scale;
  display: grid;
  place-items: center;
}

.service-image-cursor.is-visible {
  scale: 1;
}

.service-image-cursor svg {
  width: 40px;
  height: 40px;
  fill: #ffffff;
  scale: 0.45;
  rotate: -28deg;
  translate: -6px 6px;
  transition:
    scale 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.service-image-cursor.is-visible svg {
  scale: 1;
  rotate: 0deg;
  translate: 0 0;
  transition-delay: 0.05s;
}

.projects-showcase-drag-cursor {
  --cursor-x: 0px;
  --cursor-y: 0px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12000;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--menu-overlay-bg);
  color: #ffffff;
  opacity: 1;
  pointer-events: none;
  translate: calc(var(--cursor-x) - 40px) calc(var(--cursor-y) - 40px);
  scale: 0;
  transition: scale 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: translate, scale;
  display: grid;
  place-items: center;
}

.projects-showcase-drag-cursor.is-visible {
  scale: 1;
}

.projects-showcase-drag-cursor i {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  line-height: 1;
}

.projects-showcase-drag-cursor .fa-arrows-left-right::before {
  content: none;
}

.projects-showcase-drag-cursor svg {
  width: 40px;
  height: 40px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  scale: 0.45;
  rotate: -28deg;
  translate: -6px 6px;
  transition:
    scale 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    rotate 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.projects-showcase-drag-cursor.is-visible svg {
  scale: 1;
  rotate: 0deg;
  translate: 0 0;
  transition-delay: 0.05s;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

.is-rolling-link {
  position: relative;
  display: inline-grid;
  grid-template: "stack" auto / auto;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}

.rolling-link-wrap {
  grid-area: stack;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
}

.rolling-link-hover {
  pointer-events: none;
}

.link-hover-char {
  display: inline-block;
  will-change: transform;
}

a:not(.project-list-link):not(.contact-section-link),
button:not(.menu-button):not(.icon-btn):not(.project-list-link) {
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* --- PREMIUM REVEAL MASKING --- */
.reveal-text {
  overflow: hidden;
  display: block;
}

.reveal-text.is-rolling-link {
  display: inline-grid;
}

.reveal-text .line {
  overflow: hidden;
  display: block;
  padding-top: 0.18em;
  padding-bottom: 0.2em;
  margin-top: -0.18em;
  margin-bottom: -0.2em;
}

.line-mask {
  display: block;
  transform: translate3d(0, 140%, 0);
  will-change: transform;
}

.char {
  transform: translateY(140%);
  display: inline-block;
  will-change: transform;
}

.hero-description .char,
.card-desc .char,
.masking-overlay-copy .char,
.masking-overlay-description .char,
.masking-overlay-about-copy .char,
.about-section-statement .char,
.about-section-label .char,
.about-section-body .char,
.about-section-fact .char,
.about-section-link .char,
.contact-section-eyebrow .char,
.contact-section-statement .char,
.contact-section-label .char,
.contact-section-link .char,
.contact-section-button .char,
.project-category-title .char,
.project-list-link .char {

  transform: none;
}

/* STARTING STATES */
hr {
  border: none;
  border-top: 1px solid #000;
  will-change: transform, opacity;
}

.panel:not(.hero-section) hr {
  border-top: 1px solid #ffffff;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  margin-top: 0;
}

.icon-btn svg {
  transform: scale(0) rotate(-45deg);
  opacity: 0;
  will-change: transform, opacity;
}

/* --- LOADER --- */
.is-link-transition,
.is-link-transition body {
  background-color: var(--menu-overlay-bg);
}

.is-link-transition {
  scrollbar-width: none;
}

.is-link-transition body {
  overflow: hidden;
}

.is-link-transition::-webkit-scrollbar,
.is-link-transition body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.is-service-direct-transition #loader {
  display: none !important;
}

.loader {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #e5d7c6;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.is-link-transition .loader,
.loader.is-link-loader {
  background-color: #000000;
}

.is-link-transition .loader {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}

.is-webdev-reverse-return body {
  overflow: hidden;
  background-color: #2c2416;
}

.is-webdev-reverse-return #loader {
  display: none;
}

.is-webdev-reverse-return .scroll-container {
  visibility: hidden;
}

.webdev-reverse-boot-image {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 13000;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.is-webdev-reverse-return .webdev-reverse-boot-image {
  display: block;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader-logo {
  font-family: 'Retro Qesmo', sans-serif;
  font-size: 3rem;
  margin-bottom: 20px;
  overflow: hidden;
  color: #000;
}

.is-link-transition .loader .loader-logo,
.loader.is-link-loader .loader-logo {
  margin-bottom: 0;
  color: #ffffff;
}

.loader-logo .char {
  transform: translateY(140%);
  display: inline-block;
  will-change: transform;
}

.loader-progress {
  width: 200px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.1);
  margin-top: 2rem;
  border-radius: 2px;
  overflow: hidden;
}

.is-link-transition .loader .loader-progress,
.loader.is-link-loader .loader-progress {
  display: none;
}

.loader-progress-bar {
  width: 110%;
  height: 100%;
  background-color: black;
  transform: scaleX(0);
  transform-origin: left;
}

.blueprint-frame-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
}

.blueprint-frame-layer.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.blueprint-page-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000000;
  transform: translate3d(0, 0, 0);
  contain: strict;
}

.blueprint-page-frame.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero-line {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

/* NAVBAR */
.navbar {
  --nav-mask-top: 0%;
  --nav-mask-bottom: 100%;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 4rem;
  z-index: 1300;
  pointer-events: none;
}

.logo-button,
.menu-button {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: color 0.4s ease;
}

.logo-button {
  font-family: 'Retro Qesmo', sans-serif;
  font-size: 1.5rem;
  position: relative;
  overflow: hidden;
  display: flex;
  pointer-events: all;
  color: #ffffff;
  transition: color 0.25s ease;
}

.logo-button.is-rolling-link {
  display: inline-grid;
  line-height: 1;
}

.menu-button {
  position: relative;
  width: 52px;
  height: 52px;
  background-color: #ffffff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: all;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
  isolation: isolate;
}

.menu-button:hover,
.menu-button:focus-visible {
  background-color: #ffffff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  color: #ffffff;
}

.menu-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--menu-overlay-bg);
  clip-path: inset(var(--nav-mask-top) 0 var(--nav-mask-bottom) 0);
  pointer-events: none;
}

.menu-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--menu-overlay-bg);
  transform: translate3d(-50%, -50%, 0) scale(0);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.menu-button:hover::after,
.menu-button:focus-visible::after {
  transform: translate3d(-50%, -50%, 0) scale(1.08);
}

.menu-icon {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-button:hover .menu-icon,
.menu-button:focus-visible .menu-icon {
  transform: scale(1.08);
}

.menu-button:hover .menu-icon-line,
.menu-button:focus-visible .menu-icon-line {
  stroke: #ffffff;
}

.menu-icon-white-layer {
  clip-path: inset(var(--nav-mask-top) 0 var(--nav-mask-bottom) 0);
}

.menu-icon-line {
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 0.35s cubic-bezier(0.87, 0, 0.13, 1);
}

.menu-icon-line-white {
  stroke: #ffffff;
}

body.menu-active .menu-icon-line-top {
  transform: none;
}

body.menu-active .menu-icon-line-bottom {
  transform: none;
}

body.menu-active .menu-button,
body.menu-active .menu-button:hover,
body.menu-active .menu-button:focus-visible {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}

.nav-links {
  display: flex;
  position: absolute;
  left: 4rem;
  right: 4rem;
  justify-content: space-between;
  width: 800px;
  pointer-events: all;
}

.nav-links button {
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 2px;
  transition: color 0.4s ease;
  overflow: hidden;
  line-height: 1.2;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--menu-overlay-bg);
  color: #f4f1e8;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.8s cubic-bezier(0.87, 0, 0.13, 1), visibility 0s linear 0.8s;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-overlay.is-open {
  visibility: visible;
  pointer-events: all;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.menu-overlay.is-closing {
  visibility: visible;
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
  transition-delay: 0s;
}

.menu-overlay.is-reset {
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
  transition: none;
}

.menu-overlay-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2.5rem 4rem;
}

.menu-line-reveal {
  overflow: hidden;
}

.menu-line-reveal>span {
  display: block;
  transform: translateY(140%);
  will-change: transform;
}

.menu-line-reveal>span.is-rolling-link {
  display: inline-grid;
}

.menu-overlay-main {
  --menu-frame-width: clamp(16rem, 30vw, 26rem);
  --menu-frame-height: clamp(9rem, 16.875vw, 14.625rem);
  position: absolute;
  z-index: 2;
  left: 5rem;
  right: 5rem;
  top: 8rem;
  bottom: clamp(9rem, 20vw, 17rem);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: center;
  justify-content: stretch;
}

.menu-overlay-links {
  display: grid;
  gap: 0.45rem;
  height: var(--menu-frame-height);
  align-content: space-between;
  justify-self: start;
  align-self: center;
}

.menu-overlay-link {
  color: #f4f1e8;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 3vw, 3rem);
  line-height: 1;
  text-align: left;
  position: relative;
  width: fit-content;
  transition: color 0.3s ease;
}

.menu-overlay-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.06em;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.87, 0, 0.13, 1);
}

.menu-overlay-link:hover,
.menu-overlay-link:focus-visible {
  color: #ffffff;
}

.menu-overlay-link:hover::after,
.menu-overlay-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-image-frame {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: var(--menu-frame-width);
  height: var(--menu-frame-height);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid #ffffff;
  opacity: 0;
  justify-self: center;
  align-self: center;
  translate: none;
  transform: translateY(1.5rem);
  clip-path: inset(100% 0 0 0);
  will-change: opacity, transform, clip-path;
}

.menu-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.menu-overlay-info {
  display: grid;
  gap: 2.4rem;
  height: var(--menu-frame-height);
  align-content: space-between;
  position: relative;
  top: auto;
  right: auto;
  width: min(28vw, 420px);
  max-width: 420px;
  justify-items: end;
  justify-self: end;
  align-self: center;
  text-align: right;
  transform: none;
}

.menu-info-group {
  display: grid;
  gap: 0.75rem;
  justify-items: end;
}

.menu-info-label,
.menu-info-link {
  font-family: 'CabinetGrotesk-thin', sans-serif;
}

.menu-info-label {
  color: rgba(244, 241, 232, 0.48);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.menu-info-link {
  color: #f4f1e8;
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.1;
  text-decoration: none;
  position: relative;
  width: fit-content;
  transition: color 0.3s ease;
}

.menu-info-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 1px;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.87, 0, 0.13, 1);
}

.menu-info-link:hover,
.menu-info-link:focus-visible {
  color: #ffffff;
}

.menu-info-link:hover::after,
.menu-info-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-info-group:hover .menu-info-label span {
  color: rgba(244, 241, 232, 0.72);
}

.menu-overlay-bottom {
  position: absolute;
  z-index: 1;
  left: 5rem;
  right: 5rem;
  bottom: 0.45rem;
  overflow: hidden;
}

.menu-overlay-divider {
  width: 100%;
  margin: clamp(1.4rem, 3vw, 2.4rem) 0;
  border: none;
  border-top: 1px solid #ffffff;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.menu-overlay-blueprint {
  font-family: 'Retro Qesmo', sans-serif;
  font-size: clamp(5rem, 18.5vw, 18rem);
  line-height: 0.82;
  color: #ffffff;
  width: max-content;
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}

.menu-overlay-blueprint .char {
  transform: translateY(-140%);
}

@media (max-width: 760px) {
  .menu-overlay-content {
    padding: 2rem;
  }

  .menu-overlay-main {
    left: 2rem;
    right: 2rem;
    top: 7rem;
    bottom: clamp(8rem, 28vw, 11rem);
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    align-content: start;
  }

  .menu-overlay-links {
    height: auto;
    align-content: start;
    justify-self: stretch;
    align-self: start;
  }

  .menu-image-frame {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 24rem);
    height: auto;
    aspect-ratio: 16 / 9;
    justify-self: stretch;
    translate: none;
    transform: translateY(1.5rem);
  }

  .menu-overlay-link {
    font-size: clamp(2rem, 10vw, 3.65rem);
  }

  .menu-overlay-info {
    position: static;
    height: auto;
    align-content: start;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    gap: 1.5rem;
    justify-items: start;
    text-align: left;
    transform: none;
  }

  .menu-info-group {
    justify-items: start;
  }

  .menu-overlay-bottom {
    left: 2rem;
    right: 2rem;
    bottom: 0.35rem;
  }

  .menu-overlay-blueprint {
    font-size: clamp(3.8rem, 20vw, 6.8rem);
  }
}

/* HERO & PANELS */
.bottom-logo {
  font-family: 'Retro Qesmo', sans-serif;
  font-size: 10.8rem;
  color: var(--menu-overlay-bg);
  overflow: hidden;
  display: block;
}

/* This makes the characters start from the top */
.bottom-logo .char {
  transform: translateY(-140%);
  display: inline-block;
  will-change: transform;
}


.scroll-container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.panel {
  --panel-x-padding: 4rem;
  --panel-top-padding: 4rem;
  --card-image-top-bleed: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--panel-top-padding);
  padding-left: var(--panel-x-padding);
  padding-right: var(--panel-x-padding);
  will-change: transform, border-radius;
  box-shadow: -15px 0 30px rgba(0, 0, 0, 0.15);
  background-color: #e5d7c6;
  overflow: hidden;
}

.panel:not(.hero-section) {
  --panel-top-padding: 0rem;
  --card-image-top-bleed: 0rem;
  justify-content: flex-start;
  padding-bottom: 0;
}

.hero-section {
  z-index: 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: none;
  padding-top: 8rem;
}

.hero-section > * {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-family: 'CabinetGrotesk-bold', sans-serif;
  font-size: 5rem;
  line-height: 1.1;
}

.highlight-container {
  font-family: 'CabinetGrotesk-bold', sans-serif;
  position: relative;
  display: inline-block;
  line-height: 1.1;
  padding: 0 15px;
  font-size: 5rem;
  font-weight: bold;
}

.highlight-base {
  color: #000;
  position: relative;
  z-index: 1;
}

.highlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  color: #d7c6b3;
  z-index: 3;
  width: 100%;
  padding-left: 15px;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.highlight-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2c2416;
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.highlight-container.active::after {
  transform: scaleX(1);
}

.highlight-container.active .highlight-overlay {
  clip-path: inset(0 0 0 0);
}

.hero-description {
  font-family: 'CabinetGrotesk-regular', sans-serif;
  padding-top: 15px;
  font-size: 30px;
  font-weight: lighter;
}

.hero-line {
  width: 67%;
  margin-top: 30px;
  transform: scaleX(0) scaleY(0.5);
  transform-origin: left;
}

/* SERVICE CARDS */
.service-card-web-dev {
  z-index: 2;
  /* background-color: #01161e; */
  background-color: #2c2416;
  color: white;
  cursor: pointer;
  transform: translateX(calc(100% - 400px));
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}

.service-card-branding {
  z-index: 3;
  /* background-color: #124559; */
  background-color: #4b3d24;
  color: white;
  transform: translateX(calc(100% - 300px));
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}

.service-card-marketing {
  z-index: 4;
  /* background-color: #415a77; */
  /* background-color: #ad8f6d; */
  background-color: #775f3f;
  color: white;
  transform: translateX(calc(100% - 200px));
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}

.service-card-architecture {
  z-index: 5;
  /* background-color: #778da9; */
  background-color: #947550;
  color: white;
  transform: translateX(calc(100% - 100px));
  border-top-left-radius: 60px;
  border-bottom-left-radius: 60px;
}

.masking-overlay-card {
  position: absolute;
  inset: 0;
  z-index: 6;
  --overlay-card-padding: 4rem;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background-color: #e5d7c6;
  color: #000000;
  pointer-events: all;
  padding: var(--overlay-card-padding);
  overflow: hidden;
  will-change: transform;
}

.masking-overlay-card-about {
  position: absolute;
  inset: 0;
  z-index: 8;
  --overlay-card-padding: 4rem;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: var(--overlay-card-padding);
  overflow: hidden;
  background-image: url("./about_home_img_1.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #000000;
  will-change: transform;
}

.about-section-inner {
  position: relative;
  width: 100%;
  min-height: calc(100vh - (var(--overlay-card-padding) * 2));
  padding-bottom: clamp(3rem, 9vh, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.76fr);
  grid-template-rows: auto auto auto auto auto;
  column-gap: clamp(3rem, 8vw, 8rem);
  row-gap: clamp(1.7rem, 4vh, 3.4rem);
  align-content: start;
  will-change: transform;
}

.masking-overlay-copy {
  padding-top: 3rem;
  position: absolute;
  left: var(--overlay-card-padding);
  right: auto;
  max-width: calc(100vw - 8rem);
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.08;
  text-align: left;
  z-index: 2;
  will-change: transform;
}

.masking-overlay-about-copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  max-width: calc(100vw - (var(--overlay-card-padding) * 2));
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: 0;
  color: #000000;
  will-change: transform;
}

.about-section-statement {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  max-width: min(49vw, 56rem);
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(2.2rem, 4.2vw, 5rem);
  line-height: 1.06;
  font-weight: 300;
  color: #000000;
  text-align: left;
}

.about-section-grid {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.7rem, 4vw, 4rem);
  padding-bottom: clamp(1.6rem, 3.4vh, 2.8rem);
  border-bottom: 0;
}

.about-section-column {
  max-width: 100%;
}

.about-section-label {
  margin: 0 0 1.25rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.86rem, 1vw, 1.05rem);
  line-height: 1;
  color: #000000;
  text-transform: uppercase;
}

.about-section-body {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.25rem, 1.65vw, 1.9rem);
  line-height: 1.16;
  color: #000000;
}

.about-section-facts {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  display: grid;
  min-width: min(43vw, 44rem);
  margin-top: clamp(0.5rem, 1.8vh, 1.3rem);
}

.about-section-fact {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  margin: 0;
  padding: 0.95rem 0;
  border-top: 1px solid #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.25vw, 1.28rem);
  line-height: 1.08;
  color: #000000;
}

.about-section-fact:last-child {
  border-bottom: 1px solid #000000;
}

.about-section-fact span {
  color: #000000;
}

.about-section-fact strong,
.about-section-fact em {
  font: inherit;
  color: inherit;
}

.about-section-fact em {
  font-style: normal;
}

.about-section-link {
  grid-column: 1;
  grid-row: 5;
  justify-self: start;
  align-self: start;
  margin-top: clamp(0.2rem, 1vh, 0.8rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.8rem;
  padding: 0 1.35rem;
  border: 1px solid #000000;
  border-radius: 999px;
  background: transparent;
  color: #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.25s ease;
}

.about-section-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000000;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.about-section-link:hover,
.about-section-link:focus-visible {
  color: #ffffff;
}

.about-section-link:hover::before,
.about-section-link:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.about-section-link span,
.about-section-link .line {
  position: relative;
  z-index: 1;
}

.about-laptop-media,
.about-laptop-note,
.about-laptop-services-word {
  display: none;
}

@media (min-width: 900px) and (max-width: 1440px) {
  .masking-overlay-card-about {
    --about-laptop-gutter: clamp(0.45rem, 0.65vw, 0.6rem);
    --about-laptop-cream: #eee7da;
    --about-laptop-ink: #090908;
    --about-laptop-bg: #2c2416;
    padding: var(--about-laptop-gutter) !important;
    background: var(--about-laptop-bg) !important;
    color: var(--about-laptop-ink) !important;
  }

  .masking-overlay-card-about::before,
  .masking-overlay-card-about::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }

  .masking-overlay-card-about::before {
    left: var(--about-laptop-gutter);
    top: var(--about-laptop-gutter);
    width: min(47.8vw, 41.5rem);
    height: min(52.2vw, calc(100vh - (var(--about-laptop-gutter) * 2)));
    max-height: calc(100vh - (var(--about-laptop-gutter) * 2));
    background: var(--about-laptop-cream);
    z-index: 0;
  }

  .masking-overlay-card-about::after {
    left: var(--about-laptop-gutter);
    right: var(--about-laptop-gutter);
    bottom: var(--about-laptop-gutter);
    height: min(45.8vh, 26.8rem);
    background: var(--about-laptop-cream);
    z-index: 0;
  }

  .about-section-inner {
    min-height: calc(100vh - (var(--about-laptop-gutter) * 2)) !important;
    height: calc(100vh - (var(--about-laptop-gutter) * 2)) !important;
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 1;
  }

  .about-section-inner::before {
    content: none;
    display: none;
  }

  .about-section-inner::after {
    content: none;
    display: none;
  }

  .masking-overlay-about-copy {
    position: absolute !important;
    left: clamp(2.6rem, 4.6vw, 4rem) !important;
    bottom: clamp(2rem, 4vw, 3rem) !important;
    z-index: 3 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(5.9rem, 10.3vw, 9.4rem) !important;
    line-height: 0.78 !important;
    letter-spacing: 0 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-statement {
    position: absolute !important;
    left: clamp(2.6rem, 4.6vw, 4rem) !important;
    top: clamp(14.2rem, 21.4vw, 19.5rem) !important;
    z-index: 3 !important;
    width: min(19.5vw, 18.2rem) !important;
    max-width: min(19.5vw, 18.2rem) !important;
    margin: 0 !important;
    font-size: clamp(1.25rem, 1.85vw, 1.75rem) !important;
    line-height: 1.33 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-grid {
    position: static !important;
    display: contents !important;
  }

  .about-section-column {
    position: absolute !important;
    z-index: 3 !important;
    margin: 0 !important;
  }

  .about-section-column:first-child {
    left: min(49.6vw, 43.2rem) !important;
    top: min(78vh, 40.6rem) !important;
    width: min(24vw, 20rem) !important;
  }

  .about-section-column:last-child {
    display: none !important;
  }

  .about-section-label {
    display: none !important;
  }

  .about-section-body {
    margin: 0 !important;
    font-size: clamp(0.86rem, 1.05vw, 1rem) !important;
    line-height: 1.32 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-facts {
    position: absolute !important;
    left: min(49.6vw, 43.2rem) !important;
    right: clamp(3rem, 5.1vw, 5rem) !important;
    top: min(57.5vh, 29rem) !important;
    z-index: 3 !important;
    display: grid !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .about-section-fact {
    grid-template-columns: 2.7rem minmax(10rem, 1fr) minmax(9rem, 0.82fr) !important;
    align-items: baseline !important;
    column-gap: clamp(0.9rem, 1.6vw, 1.5rem) !important;
    padding: clamp(1rem, 1.7vh, 1.25rem) 0 !important;
    border-top: 1px solid rgba(9, 9, 8, 0.64) !important;
    font-size: clamp(1.18rem, 1.7vw, 1.65rem) !important;
    line-height: 1 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-fact:last-child {
    border-bottom: 1px solid rgba(9, 9, 8, 0.64) !important;
  }

  .about-section-fact span {
    font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
  }

  .about-section-fact strong {
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-weight: 300 !important;
  }

  .about-section-fact em {
    justify-self: end !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(0.62rem, 0.8vw, 0.76rem) !important;
    line-height: 1.1 !important;
    text-align: right !important;
  }

  .about-section-link {
    display: none !important;
  }

  .masking-overlay-card-about .about-section-inner > .about-laptop-menu {
    display: none;
  }

  .masking-overlay-card-about .about-section-inner .char {
    transform: none !important;
  }

  .masking-overlay-card-about .about-section-inner {
    background:
      url("./about_home_img_1.png") 78.2% 12.2% / min(34vw, 31rem) min(31.2vw, 28.2rem) no-repeat,
      url("./about_home_img_2.png") 5.8% 74.2% / min(34vw, 31rem) min(36vh, 20.5rem) no-repeat;
  }

  .masking-overlay-card-about .about-section-inner .about-section-statement::before {
    content: "A SMALL STUDIO";
    position: fixed;
    left: min(58.1vw, 50.8rem);
    top: min(10vh, 5.6rem);
    font-family: 'CabinetGrotesk-regular', sans-serif;
    font-size: clamp(0.58rem, 0.82vw, 0.72rem);
    line-height: 1;
    color: rgba(238, 231, 218, 0.95);
    white-space: nowrap;
  }

  .masking-overlay-card-about .about-section-inner .about-section-statement::after {
    content: "THOUGHTFUL \00B7 CLEAR \00B7 PURPOSEFUL";
    position: fixed;
    left: min(75.7vw, 66.2rem);
    top: min(43.4vh, 24.4rem);
    font-family: 'CabinetGrotesk-regular', sans-serif;
    font-size: clamp(0.55rem, 0.78vw, 0.7rem);
    line-height: 1;
    color: rgba(238, 231, 218, 0.95);
    white-space: nowrap;
  }

  .about-section-facts::before,
  .about-section-facts::after {
    position: fixed;
    z-index: 3;
    font-family: 'CabinetGrotesk-light', sans-serif;
    font-size: clamp(5.7rem, 9.4vw, 8.7rem);
    line-height: 0.8;
    color: var(--about-laptop-ink);
    pointer-events: none;
  }

  .about-section-facts::before {
    content: "OUR";
    left: clamp(2.6rem, 4.6vw, 4rem);
    bottom: clamp(2.1rem, 3.8vw, 3rem);
  }

  .about-section-facts::after {
    content: "SERVICES";
    right: clamp(2.8rem, 4.6vw, 4.1rem);
    bottom: clamp(2.1rem, 3.8vw, 3rem);
  }
}

@media (min-width: 900px) and (max-width: 1440px) {
  .masking-overlay-card-about {
    --about-laptop-gutter: clamp(0.45rem, 0.65vw, 0.6rem);
    --about-laptop-cream: #eee7da;
    --about-laptop-ink: #090908;
    --about-laptop-bg: #2c2416;
    --about-laptop-grid-left: clamp(3rem, 4.7vw, 4.25rem);
    --about-laptop-grid-right: clamp(3rem, 4.7vw, 4.25rem);
    --about-laptop-col: calc((100vw - var(--about-laptop-grid-left) - var(--about-laptop-grid-right)) / 12);
    --about-laptop-page-gap: clamp(1.8rem, 2.4vw, 2.4rem);
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--about-laptop-bg) !important;
    color: var(--about-laptop-ink) !important;
  }

  .masking-overlay-card-about::before,
  .masking-overlay-card-about::after,
  .masking-overlay-card-about .about-section-statement::before,
  .masking-overlay-card-about .about-section-statement::after,
  .about-section-facts::before,
  .about-section-facts::after {
    content: none !important;
    display: none !important;
  }

  .about-section-inner {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 200svh !important;
    min-height: 200svh !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    background:
      linear-gradient(var(--about-laptop-cream), var(--about-laptop-cream)) var(--about-laptop-gutter) var(--about-laptop-gutter) / min(48vw, 42rem) calc(100svh - (var(--about-laptop-gutter) * 2)) no-repeat,
      linear-gradient(var(--about-laptop-cream), var(--about-laptop-cream)) var(--about-laptop-gutter) calc(100svh + var(--about-laptop-gutter)) / calc(100% - (var(--about-laptop-gutter) * 2)) calc(100svh - (var(--about-laptop-gutter) * 2)) no-repeat !important;
    z-index: 1;
  }

  .about-section-inner::before {
    content: none !important;
    display: none !important;
  }

  .about-section-inner::after {
    content: none !important;
    display: none !important;
  }

  .about-laptop-media,
  .about-laptop-note,
  .about-laptop-services-word {
    display: block !important;
    position: absolute !important;
    z-index: 3 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }

  .about-laptop-media {
    overflow: hidden !important;
    background: var(--about-laptop-cream) !important;
  }

  .about-laptop-media img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  .about-laptop-media-top {
    left: calc(50vw + clamp(6rem, 15.5svh, 9.25rem)) !important;
    right: clamp(6rem, 15.5svh, 9.25rem) !important;
    top: clamp(6rem, 15.5svh, 9.25rem) !important;
    bottom: auto !important;
    width: auto !important;
    height: calc(100svh - (clamp(6rem, 15.5svh, 9.25rem) * 2)) !important;
    transform: none !important;
    background: var(--about-laptop-bg) !important;
  }

  .about-laptop-media-top img {
    object-position: 78% 58% !important;
  }

  .about-laptop-media-services {
    left: var(--about-laptop-grid-left) !important;
    top: calc(100svh + var(--about-laptop-gutter)) !important;
    width: calc(var(--about-laptop-col) * 3.35) !important;
    height: calc((100svh - (var(--about-laptop-gutter) * 2)) * 0.6) !important;
  }

  .about-laptop-media-services img {
    object-position: 50% 22% !important;
  }

  .about-laptop-note {
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(0.58rem, 0.82vw, 0.72rem) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    color: rgba(238, 231, 218, 0.95) !important;
    white-space: nowrap !important;
  }

  .about-laptop-note-top {
    left: calc(50vw + clamp(6rem, 15.5svh, 9.25rem)) !important;
    top: calc(clamp(6rem, 15.5svh, 9.25rem) - 1.25rem) !important;
  }

  .about-laptop-note-bottom {
    left: calc(100vw - clamp(6rem, 15.5svh, 9.25rem)) !important;
    top: calc(100svh - clamp(6rem, 15.5svh, 9.25rem) + 1.2rem) !important;
    transform: translateX(-100%) !important;
  }

  .masking-overlay-about-copy {
    position: absolute !important;
    left: clamp(4rem, 6vw, 5.75rem) !important;
    top: calc(100svh - clamp(7.4rem, 10vw, 9rem)) !important;
    bottom: auto !important;
    z-index: 4 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: clamp(6.3rem, 10.8vw, 9.8rem) !important;
    line-height: 0.78 !important;
    letter-spacing: 0 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-statement {
    position: absolute !important;
    left: clamp(4rem, 6vw, 5.75rem) !important;
    top: clamp(11.5rem, 22svh, 15rem) !important;
    z-index: 4 !important;
    width: calc(((100vw - (clamp(4rem, 6vw, 5.75rem) * 2)) / 12) * 4.75) !important;
    max-width: calc(((100vw - (clamp(4rem, 6vw, 5.75rem) * 2)) / 12) * 4.75) !important;
    margin: 0 !important;
    font-size: clamp(1.14rem, 1.6vw, 1.55rem) !important;
    line-height: 1.3 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-grid {
    display: contents !important;
  }

  .about-section-column {
    position: absolute !important;
    z-index: 4 !important;
    margin: 0 !important;
  }

  .about-section-column:first-child {
    left: clamp(4rem, 6vw, 5.75rem) !important;
    top: clamp(20rem, 48svh, 27rem) !important;
    width: calc(((100vw - (clamp(4rem, 6vw, 5.75rem) * 2)) / 12) * 2.45) !important;
  }

  .about-section-column:last-child {
    display: block !important;
    left: calc(clamp(4rem, 6vw, 5.75rem) + (((100vw - (clamp(4rem, 6vw, 5.75rem) * 2)) / 12) * 2.72)) !important;
    top: clamp(20rem, 48svh, 27rem) !important;
    width: calc(((100vw - (clamp(4rem, 6vw, 5.75rem) * 2)) / 12) * 2.45) !important;
  }

  .about-section-link {
    display: none !important;
  }

  .about-section-label {
    display: block !important;
    margin: 0 0 clamp(0.55rem, 1.1svh, 0.8rem) !important;
    font-size: clamp(0.62rem, 0.78vw, 0.76rem) !important;
    line-height: 1 !important;
    color: var(--about-laptop-ink) !important;
    text-transform: uppercase !important;
  }

  .about-section-body {
    margin: 0 !important;
    font-size: clamp(0.72rem, 0.92vw, 0.9rem) !important;
    line-height: 1.28 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-facts {
    position: absolute !important;
    left: calc(var(--about-laptop-grid-left) + (var(--about-laptop-col) * 5.6)) !important;
    right: var(--about-laptop-grid-right) !important;
    top: calc(100svh + min(16svh, 8.6rem)) !important;
    z-index: 4 !important;
    display: grid !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .about-section-fact {
    display: grid !important;
    grid-template-columns: 2.7rem minmax(10rem, 1fr) minmax(9rem, 0.8fr) !important;
    align-items: baseline !important;
    column-gap: clamp(0.9rem, 1.6vw, 1.5rem) !important;
    margin: 0 !important;
    padding: clamp(0.95rem, 1.7svh, 1.25rem) 0 !important;
    border-top: 1px solid rgba(9, 9, 8, 0.64) !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(1.18rem, 1.7vw, 1.65rem) !important;
    line-height: 1 !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-fact:last-child {
    border-bottom: 1px solid rgba(9, 9, 8, 0.64) !important;
  }

  .about-section-fact span {
    font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-section-fact strong {
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-weight: 300 !important;
  }

  .about-section-fact em {
    justify-self: end !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-style: normal !important;
    font-size: clamp(0.62rem, 0.8vw, 0.76rem) !important;
    line-height: 1.1 !important;
    text-align: right !important;
  }

  .about-laptop-services-word {
    top: calc(200svh - clamp(8.6rem, 12vw, 10.8rem)) !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(6rem, 10vw, 9.3rem) !important;
    line-height: 0.8 !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    color: var(--about-laptop-ink) !important;
  }

  .about-laptop-services-word-our {
    left: var(--about-laptop-grid-left) !important;
  }

  .about-laptop-services-word-services {
    right: var(--about-laptop-grid-right) !important;
  }

  .masking-overlay-card-about .about-section-inner .char {
    transform: none !important;
  }
}

.contact-card {
  position: absolute;
  inset: 0;
  z-index: 9;
  --contact-card-padding: 4rem;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: var(--contact-card-padding);
  overflow: hidden;
  background-image: url("./background_img/webp-output/contact_home_img_1.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #d7c6b3;
  will-change: transform;
}

.contact-section-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.9fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  column-gap: clamp(2rem, 8vw, 8rem);
  row-gap: clamp(1.15rem, 3vh, 2.2rem);
}

.contact-section-eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  max-width: calc(100vw - (var(--contact-card-padding) * 2));
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: 0;
  color: #ffffff;
}

.contact-section-statement {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  max-width: min(34vw, 36rem);
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(1.45rem, 2.1vw, 2.65rem);
  line-height: 1.12;
  font-weight: 300;
  color: #ffffff;
  text-align: left;
}

.contact-section-grid {
  grid-column: 1;
  grid-row: 4;
  align-self: end;
  justify-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  width: min(43vw, 44rem);
  min-width: 0;
  border-bottom: 0;
}

.contact-section-column {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 0;
  border-top: 0;
}

.contact-section-label {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.86rem, 1vw, 1.05rem);
  line-height: 1;
  color: #ffffff;
  text-transform: uppercase;
}

.contact-section-link {
  --contact-link-line-scale: 0;
  width: fit-content;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.25rem, 1.8vw, 2rem);
  line-height: 1.1;
  color: #ffffff;
  text-decoration: none;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: calc(var(--contact-link-line-scale) * 100%) 1px;
  transition: color 0.25s ease, background-size 0.25s ease;
}

.contact-section-link:hover,
.contact-section-link:focus-visible {
  --contact-link-line-scale: 1;
  color: #ffffff;
}

.contact-section-form {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: stretch;
  display: grid;
  gap: clamp(1rem, 2.2vh, 1.6rem);
  width: min(100%, 46rem);
}

.contact-form-field {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  color: #ffffff;
}

.contact-form-field span {
  font-size: clamp(0.86rem, 1vw, 1.05rem);
  line-height: 1;
  text-transform: uppercase;
}

.contact-form-field input,
.contact-form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
  padding: 0.55rem 0 0.8rem;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: clamp(1.05rem, 1.35vw, 1.45rem);
  line-height: 1.2;
  outline: none;
  resize: none;
}

.contact-form-field textarea {
  min-height: clamp(7rem, 18vh, 11rem);
}

.contact-form-field input:focus,
.contact-form-field textarea:focus {
  border-bottom-color: #ffffff;
}

.contact-form-field input:-webkit-autofill,
.contact-form-field input:-webkit-autofill:hover,
.contact-form-field input:-webkit-autofill:focus,
.contact-form-field textarea:-webkit-autofill,
.contact-form-field textarea:-webkit-autofill:hover,
.contact-form-field textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  box-shadow: 0 0 0 1000px transparent inset;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

.contact-form-button {
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.8rem;
  padding: 0 1.35rem;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.25s ease;
}

.contact-form-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #ffffff;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.contact-form-button:hover,
.contact-form-button:focus-visible {
  color: #000000;
}

.contact-form-button:hover::before,
.contact-form-button:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.contact-form-button span {
  position: relative;
  z-index: 1;
}

.contact-form-button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.contact-standalone-page {
  background-color: transparent;
  color: #ffffff;
}

.contact-standalone-card {
  min-height: 100svh;
  background-color: transparent;
  color: #ffffff;
}

.contact-standalone-page .contact-card {
  --contact-card-padding: clamp(4.5rem, 7vh, 6rem) clamp(10rem, 16vw, 16rem) clamp(3rem, 6vh, 4rem) clamp(18rem, 24vw, 22rem);
  position: relative;
  inset: auto;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  margin: 0;
  padding: var(--contact-card-padding);
  background-image: url("./webp-output/contact_background_img.webp");
  transform: none;
  will-change: auto;
}

.contact-standalone-page .contact-section-inner {
  grid-template-columns: minmax(16rem, 0.78fr) minmax(24rem, 1fr);
  column-gap: clamp(2.5rem, 5vw, 6rem);
  max-width: none;
}

.contact-standalone-page .contact-section-statement {
  max-width: min(33vw, 34rem);
}

.contact-standalone-page .contact-section-form {
  width: min(100%, 28rem);
}

.contact-form-error {
  margin: 0;
  color: #ff6b6b;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.4;
}

.contact-thank-modal {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: grid;
  place-items: center;
  padding: var(--contact-card-padding, 4rem);
  background-color: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.contact-thank-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition-delay: 0s;
}

.contact-thank-modal-panel {
  position: relative;
  width: min(100%, 42rem);
  min-height: clamp(22rem, 48vh, 34rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: clamp(1.2rem, 3vh, 2rem);
  padding: clamp(1.35rem, 3vw, 2.6rem);
  border: 1px solid #000000;
  background-color: #e5d7c6;
  color: #000000;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.28);
  transform: translateY(1.2rem);
  transition: transform 0.32s cubic-bezier(0.87, 0, 0.13, 1);
}

.contact-thank-modal-panel::before,
.contact-thank-modal-panel::after {
  content: "";
  position: absolute;
  left: clamp(1.35rem, 3vw, 2.6rem);
  right: clamp(1.35rem, 3vw, 2.6rem);
  display: block;
  width: auto;
  height: 1px;
  background-color: #000000;
}

.contact-thank-modal-panel::before {
  top: clamp(3.35rem, 6vw, 5rem);
}

.contact-thank-modal-panel::after {
  bottom: clamp(5.6rem, 8vw, 7rem);
}

.contact-thank-modal.is-open .contact-thank-modal-panel {
  transform: translateY(0);
}

.contact-thank-kicker {
  grid-row: 1;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.62);
}

.contact-thank-modal h2 {
  grid-row: 2;
  align-self: end;
  margin: 0;
  max-width: 9ch;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: 0;
}

.contact-thank-modal p:not(.contact-thank-kicker) {
  grid-row: 3;
  max-width: 28rem;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.55rem);
  line-height: 1.12;
}

.contact-thank-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  min-height: 3.2rem;
  margin-top: 0;
  padding: 0 1.35rem;
  border: 1px solid #000000;
  border-radius: 999px;
  background: transparent;
  color: #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 1rem;
  line-height: 1;
  overflow: hidden;
  transition: color 0.25s ease;
}

.contact-thank-close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000000;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.contact-thank-close:hover,
.contact-thank-close:focus-visible {
  color: #ffffff;
}

.contact-thank-close:hover::before,
.contact-thank-close:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.contact-thank-close span {
  position: relative;
  z-index: 1;
}

.site-footer {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: 4rem;
  overflow: hidden;
  background-color: #e5d7c6;
  color: #000000;
}

.site-footer-inner {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr) auto minmax(1.25rem, 4vh) auto auto;
  align-items: end;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(0.9rem, 2vh, 1.4rem);
}

.site-footer-links {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  padding-top: 0.25rem;
}

.site-footer-group {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.22rem);
  line-height: 1.08;
  color: #000000;
}

.site-footer-group:nth-child(1) {
  grid-column: 1 / 4;
}

.site-footer-group:nth-child(2) {
  grid-column: 5 / 8;
}

.site-footer-group:nth-child(3) {
  grid-column: 9 / -1;
}

.site-footer-label {
  margin: 0 0 0.35rem;
  font-size: 0.74rem;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.52);
}

.site-footer-group a,
.site-footer-group button {
  --footer-link-line-scale: 0;
  width: fit-content;
  margin: 0;
  padding: 0;
  color: #000000;
  text-align: left;
  text-decoration: none;
  line-height: 1.08;
  background-image: linear-gradient(#000000, #000000);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: calc(var(--footer-link-line-scale) * 100%) 1px;
  transition: color 0.25s ease, background-size 0.25s ease;
}

.site-footer-group a:hover,
.site-footer-group a:focus-visible,
.site-footer-group button:hover,
.site-footer-group button:focus-visible {
  --footer-link-line-scale: 1;
  color: rgba(0, 0, 0, 0.58);
}

.site-footer-title {
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: end;
  justify-self: center;
  margin: 0 0 -0.16em;
  font-family: 'Retro Qesmo', sans-serif;
  font-size: clamp(5rem, 20vw, 22rem);
  line-height: 0.76;
  font-weight: 300;
  letter-spacing: 0;
  color: #000000;
  text-align: center;
}

.site-footer-meta {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 0 0.95rem;
  border-top: 0;
  border-bottom: 1px solid #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.1;
  color: #000000;
}

.site-footer-meta p {
  margin: 0;
}

.masking-overlay-description {
  position: absolute;
  left: calc(var(--overlay-card-padding) * 0.18);
  right: auto;
  top: 14rem;
  max-width: min(58vw, 980px);
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.45rem, 1.75vw, 2rem);
  line-height: 1.18;
  color: rgba(0, 0, 0, 0.78);
  z-index: 2;
}

.project-link-list {
  position: absolute;
  left: var(--overlay-card-padding);
  right: var(--overlay-card-padding);
  top: 30rem;
  width: auto;
  display: grid;
  gap: 7rem;
  z-index: 2;
}

.project-category {
  --project-mask-color: #000000;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.9fr);
  grid-template-rows: auto auto;
  column-gap: clamp(4rem, 9vw, 9rem);
  row-gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: start;
}

.project-category:nth-child(1) {
  --project-mask-color: #2c2416;
}

.project-category:nth-child(2) {
  --project-mask-color: #4b3d24;
}

.project-category:nth-child(3) {
  --project-mask-color: #775f3f;
}

.project-category:nth-child(4) {
  --project-mask-color: #947550;
}

.project-category:not(:last-child) {
  margin-bottom: 0;
}

.project-category-title {
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: 0;
  max-width: 9.5ch;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.project-category:nth-child(odd) .project-category-title {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.project-category:nth-child(odd) .project-category-list {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.project-category:nth-child(odd) .project-category-preview {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.project-category:nth-child(even) .project-category-title {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  text-align: left;
}

.project-category:nth-child(even) .project-category-list {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.project-category:nth-child(even) .project-category-preview {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.project-category-media {
  --project-media-align: start;
  display: contents;
}

.project-category:nth-child(odd) .project-category-media {
  text-align: right;
  --project-media-align: end;
}

.project-category:nth-child(even) .project-category-media {
  text-align: left;
  --project-media-align: start;
}

.project-category .project-category-media .project-category-title,
.project-category:nth-child(odd) .project-category-media .project-category-title,
.project-category:nth-child(even) .project-category-media .project-category-title {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: var(--project-media-align, start);
  text-align: inherit;
}

.project-category .project-category-media .project-category-preview,
.project-category:nth-child(odd) .project-category-media .project-category-preview,
.project-category:nth-child(even) .project-category-media .project-category-preview {
  --project-frame-y: 0px;
  grid-row: 2;
  justify-self: var(--project-media-align, start);
  transform: translate3d(0, var(--project-frame-y), 0);
  will-change: transform;
}

.project-category:nth-child(odd) .project-category-media .project-category-preview {
  grid-column: 2;
}

.project-category:nth-child(even) .project-category-media .project-category-preview {
  grid-column: 1;
}

.project-category:nth-child(odd) .project-category-list,
.project-category:nth-child(even) .project-category-list {
  grid-row: 2;
}

.project-category-preview {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: rgba(1, 22, 30, 0.1);
  border-radius: 0;
  isolation: isolate;
}

.project-category-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border: 1px solid #000000;
  border-radius: inherit;
}

.project-preview-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.project-preview-image.is-entering {
  z-index: 2;
}

.project-category-list {
  display: grid;
  grid-auto-rows: minmax(clamp(3rem, 4.8vw, 4.25rem), auto);
  align-self: start;
}

.project-list-link {
  --project-line-top-scale: 0%;
  --project-line-bottom-scale: 0%;
  --project-line-color: #000000;
  --project-hover-duration: 0.82s;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.86rem 1rem;
  border-top: 1px solid transparent;
  color: #01161e;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(1rem, 1.55vw, 1.45rem);
  line-height: 1.1;
  text-decoration: none;
  overflow: hidden;
  background-image:
    linear-gradient(var(--project-line-color), var(--project-line-color)),
    linear-gradient(var(--project-line-color), var(--project-line-color));
  background-position: left top, left bottom;
  background-repeat: no-repeat;
  background-size: var(--project-line-top-scale) 1px, var(--project-line-bottom-scale) 1px;
  transition: color var(--project-hover-duration) ease;
}

.project-list-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--project-mask-color);
  transform: translate3d(0, 101%, 0);
  transition: transform var(--project-hover-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

.project-list-link::after {
  content: attr(data-index);
  grid-column: 3;
  justify-self: end;
  position: relative;
  z-index: 2;
  color: rgba(1, 22, 30, 0.62);
  font-size: 0.72em;
  line-height: 1;
  transition: color var(--project-hover-duration) ease;
}

.project-list-link>span,
.project-list-link>.line {
  grid-column: 1;
  justify-self: start;
  text-align: left;
  position: relative;
  z-index: 2;
}

.project-list-link .line {
  text-align: left;
}

.project-list-link:last-child {
  border-bottom: 1px solid transparent;
}

.project-list-link:hover,
.project-list-link:focus-visible,
.project-list-link.is-scroll-hover {
  color: #ffffff;
}

.project-list-link:hover::after,
.project-list-link:focus-visible::after,
.project-list-link.is-scroll-hover::after {
  color: rgba(255, 255, 255, 0.68);
}

.project-list-link:hover::before,
.project-list-link:focus-visible::before,
.project-list-link.is-scroll-hover::before {
  transform: translate3d(0, 0, 0);
}

.approach-card {
  position: absolute;
  inset: 0;
  z-index: 7;
  --approach-card-padding: 4rem;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: auto;
  background-color: #2c2416;
  background-image: none;
  color: #000000;
  display: block;
  isolation: isolate;
  will-change: transform;
}

.approach-fg-video {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  display: block;
  margin: 0 0 -100vh;
  object-fit: cover;
  object-position: center -10vh;
  transform-origin: center top;
  pointer-events: none;
  will-change: transform;
}

.approach-card.is-scrollable {
  overflow-y: auto;
}

.approach-card::-webkit-scrollbar {
  width: 10px;
}

.approach-card::-webkit-scrollbar-track {
  background: #ffffff;
}

.approach-card::-webkit-scrollbar-thumb {
  background: #000000;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.approach-card::-webkit-scrollbar-thumb:hover {
  background: #000000;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.approach-copy-block {
  position: sticky;
  top: clamp(7rem, 14vh, 11rem);
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.95fr);
  column-gap: clamp(2rem, 8vw, 8rem);
  row-gap: clamp(1.25rem, 2.2vw, 2rem);
  align-items: end;
  width: auto;
  max-width: none;
  margin: clamp(7rem, 14vh, 11rem) var(--approach-card-padding) 0;
}

.approach-eyebrow {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: 0;
  color: #ffffff;
}

.approach-eyebrow-cover {
  --approach-eyebrow-mask-top: 0%;
  --approach-eyebrow-mask-bottom: 100%;
  position: absolute;
  top: clamp(7rem, 14vh, 11rem);
  left: var(--approach-card-padding);
  z-index: 4;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: 0;
  color: #000000;
  pointer-events: none;
  clip-path: inset(var(--approach-eyebrow-mask-top) 0 var(--approach-eyebrow-mask-bottom) 0);
  will-change: clip-path, transform;
}

.approach-kicker {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: end;
  max-width: min(32vw, 32rem);
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.25rem);
  line-height: 1.18;
  color: rgba(255, 255, 255, 0.82);
  text-align: right;
  will-change: transform;
}

.approach-copy-block>hr {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  margin: 0;
  border-top: 1px solid #ffffff;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform, opacity;
}

.approach-title {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  max-width: min(42vw, 48rem);
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 5.2rem);
  line-height: 1.06;
  font-weight: 300;
  color: #ffffff;
  text-align: right;
  will-change: transform;
}

.approach-title-cover {
  --approach-title-mask-top: 0%;
  --approach-title-mask-bottom: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(2.4rem, 4.4vw, 5.2rem);
  line-height: 1.06;
  font-weight: 300;
  color: #000000;
  text-align: right;
  pointer-events: none;
  clip-path: inset(var(--approach-title-mask-top) 0 var(--approach-title-mask-bottom) 0);
  will-change: clip-path, top, left, width;
}

.approach-copy {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  align-self: start;
  max-width: min(35vw, 38rem);
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.25rem);
  line-height: 1.18;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
  will-change: transform;
}

.approach-articles-mask {
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;
  z-index: 3;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #e5d7c6;
  will-change: transform;
}

.approach-steps {
  --approach-step-stack-gap: 25vh;
  position: relative;
  height: calc(100vh + (3 * var(--approach-step-stack-gap)));
  max-width: none;
  margin: 0;
  perspective: 1200px;
  will-change: transform;
}

.approach-step {
  --approach-step-index: 0;
  --approach-step-top: calc(var(--approach-step-index) * var(--approach-step-stack-gap));
  --approach-step-color: #01161e;
  --approach-step-y-padding: clamp(2.25rem, 5vh, 4.25rem);
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  width: calc(100% + 2px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 8vh, 6rem);
  min-height: calc(100vh + 2px);
  padding: var(--approach-step-y-padding) var(--approach-card-padding) clamp(3rem, 8vh, 5rem);
  border-top: 0;
  background-color: var(--approach-step-color);
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: auto;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(1rem, 1.55vw, 1.45rem);
  line-height: 1.1;
  color: #ffffff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: -15px 0 30px rgba(0, 0, 0, 0.15);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, border-radius;
}

.approach-step::after {
  content: "";
  position: absolute;
  inset: var(--approach-step-y-padding) var(--approach-card-padding) clamp(3rem, 8vh, 5rem);
  z-index: 0;
  border-top: 0;
  border-bottom: 0;
  pointer-events: none;
}

.approach-step:nth-child(1) {
  --approach-step-index: 0;
  --approach-step-color: #2c2416;
  background-image: url("./background_img/webp-output/approach_home_img_1.webp");
  z-index: 1;
}

.approach-step:nth-child(2) {
  --approach-step-index: 1;
  --approach-step-color: #4b3d24;
  background-image: url("./background_img/webp-output/approach_home_img_2.webp");
  background-position: center 72%;
  z-index: 2;
}

.approach-step:nth-child(3) {
  --approach-step-index: 2;
  --approach-step-color: #775f3f;
  background-image: url("./background_img/webp-output/approach_home_img_3.webp");
  background-position: center 72%;
  z-index: 3;
}

.approach-step:nth-child(4) {
  --approach-step-index: 3;
  --approach-step-color: #947550;
  background-image: url("./background_img/webp-output/approach_home_img_4.webp");
  background-position: center 88%;
  z-index: 4;
}

.approach-step span {
  position: relative;
  z-index: 1;
  grid-column: 1 / 2;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  padding-top: 0.35rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.92rem, 1.2vw, 1.15rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0;
  transform: translateY(0.75rem);
  will-change: transform, opacity;
}

.approach-step>div {
  position: relative;
  z-index: 1;
  grid-column: 2 / -1;
  grid-row: 1 / -1;
  min-height: calc(100vh - var(--approach-step-y-padding) - clamp(3rem, 8vh, 5rem));
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 8vh, 6rem);
}

.approach-step-title {
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: start;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: 0.95;
  font-weight: 300;
  color: #ffffff;
}

.approach-step-copy {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: end;
  justify-self: start;
  max-width: min(42vw, 42rem);
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.65rem, 2.8vw, 3.25rem);
  line-height: 1.08;
  color: #ffffff;
  text-align: left;
  transform: translateY(-7vh);
}

.approach-step-title+.approach-step-copy {
  margin-top: 0.45rem;
}

.reveal-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 70% 30%;
  align-content: stretch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  position: relative;
}

.card-image-button {
  width: calc(100% + var(--panel-x-padding) + var(--panel-x-padding));
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  margin-top: calc(0rem - var(--card-image-top-bleed));
  margin-left: calc(0rem - var(--panel-x-padding));
  margin-right: calc(0rem - var(--panel-x-padding));
  margin-bottom: 0;
  overflow: visible;
}

.card-img-unified {
  width: calc(100% + var(--panel-x-padding) + var(--panel-x-padding));
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
  margin-top: calc(0rem - var(--card-image-top-bleed));
  margin-left: calc(0rem - var(--panel-x-padding));
  margin-right: calc(0rem - var(--panel-x-padding));
  margin-bottom: 0;
  transform-origin: center center;
  will-change: transform;
}

.card-image-button .card-img-unified {
  width: 100%;
  height: 100%;
  margin: 0;
}

.card-info {
  --card-line-inset: 6rem;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(0.9rem, 2vh, 1.75rem) var(--card-line-inset) clamp(1rem, 2.2vh, 1.75rem) 0;
  will-change: transform, opacity;
}

.panel:not(.hero-section) .card-info hr {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: calc(var(--card-line-inset) * -1);
}

.panel.is-service-transitioning {
  z-index: 40;
  padding: 0;
  pointer-events: none;
}

.panel.is-service-transitioning .reveal-content {
  opacity: 1;
  visibility: visible;
}

.panel.is-service-transitioning .card-img-unified {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.webdev-service-transition-image {
  display: block;
  contain: layout paint;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.service-art-section {
  --service-art-bg: #0a1e28;
  --service-art-ink: #f4f1e8;
  --service-art-muted: rgba(244, 241, 232, 0.62);
  --service-art-line: rgba(244, 241, 232, 0.16);
  --service-art-panel: rgba(244, 241, 232, 0.055);
  min-height: 100svh;
  padding: clamp(5rem, 8vw, 8rem) 4rem;
  display: grid;
  grid-template-columns: minmax(16rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: stretch;
  background-color: var(--service-art-bg);
  color: var(--service-art-ink);
  overflow: hidden;
}

.service-art-copy {
  display: grid;
  align-content: space-between;
  gap: clamp(2rem, 6vh, 4rem);
  min-height: min(42rem, 72vh);
}

.service-art-kicker,
.service-art-meta span {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--service-art-muted);
}

.service-art-heading {
  max-width: 8.5ch;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-weight: 300;
  font-size: clamp(3.2rem, 7.2vw, 7.6rem);
  line-height: 0.86;
  letter-spacing: 0;
}

.service-art-text {
  max-width: 31rem;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  line-height: 1.35;
  color: var(--service-art-muted);
}

.service-art-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--service-art-line);
}

.service-art-meta span {
  padding-top: 1rem;
}

.service-elements-grid {
  position: relative;
  min-height: min(46rem, 74vh);
}

.service-element-frame {
  position: absolute;
  overflow: hidden;
  min-height: 9rem;
  background-color: transparent;
  border: 0;
  isolation: isolate;
  box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.18);
}

.service-element-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.015);
  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.service-element-frame:hover img {
  transform: scale(1);
}

.service-element-frame-large {
  left: 0;
  top: 8%;
  width: 57%;
  height: 62%;
  z-index: 2;
}

.service-element-frame-tall {
  right: 0;
  top: 0;
  width: 45%;
  height: 78%;
  z-index: 1;
}

.service-element-frame-wide {
  left: 13%;
  bottom: 0;
  width: 59%;
  height: 32%;
  z-index: 3;
}

.service-element-frame-small {
  right: 8%;
  bottom: 7%;
  width: 27%;
  height: 26%;
  z-index: 4;
}

.card-title {
  font-size: 4rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
  line-height: 1;
}

.card-desc {
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 0 1rem;
}

.icon-btn {
  position: absolute;
  bottom: clamp(1rem, 2.8vh, 2.5rem);
  right: 0;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.icon-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: inherit;
  background-color: #000000;
  transform: translate3d(-50%, -50%, 0) scale(0);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-btn:hover,
.icon-btn:focus-visible {
  transform: scale(1.08);
}

.icon-btn:hover::before,
.icon-btn:focus-visible::before {
  transform: translate3d(-50%, -50%, 0) scale(1.08);
}

.icon-btn svg {
  position: relative;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  fill: currentColor;
}

@media (max-width: 1180px) {
  .navbar {
    padding: 2rem;
  }

  .nav-links {
    left: 2rem;
    right: 2rem;
    width: auto;
    gap: 1.5rem;
  }

  .panel {
    --panel-x-padding: 2rem;
  }

  .hero-title,
  .highlight-container {
    font-size: 4rem;
  }

  .bottom-logo {
    font-size: 8rem;
  }

  .card-title {
    font-size: 3.25rem;
  }

  .masking-overlay-card {
    --overlay-card-padding: 2rem;
    padding: var(--overlay-card-padding);
  }

  .masking-overlay-card-about {
    --overlay-card-padding: 2rem;
  }

  .masking-overlay-copy {
    left: var(--overlay-card-padding);
    right: auto;
    top: 5.5rem;
    max-width: calc(100vw - 4rem);
  }

  .about-section-inner {
    grid-template-columns: minmax(0, 0.72fr) minmax(18rem, 1fr);
    row-gap: clamp(1.3rem, 4vh, 2.5rem);
    column-gap: 3rem;
    padding-bottom: clamp(5rem, 16vh, 10rem);
  }

  .about-section-statement {
    max-width: min(48vw, 40rem);
    font-size: clamp(2rem, 4vw, 3.7rem);
  }

  .about-section-grid {
    gap: 3rem;
  }

  .about-section-facts {
    min-width: min(48vw, 34rem);
  }

  .contact-card {
    --contact-card-padding: 2rem;
  }

  .site-footer {
    padding: 2rem;
  }

  .contact-section-inner {
    grid-template-columns: minmax(0, 0.72fr) minmax(18rem, 1fr);
    column-gap: 3rem;
  }

  .contact-section-statement {
    max-width: min(48vw, 40rem);
    font-size: clamp(2rem, 4vw, 3.7rem);
  }

  .contact-section-grid {
    min-width: min(48vw, 34rem);
  }

  .masking-overlay-description {
    left: calc(var(--overlay-card-padding) * 0.18);
    right: auto;
    top: 12.5rem;
    max-width: min(62vw, 760px);
    font-size: clamp(1.25rem, 2.35vw, 1.7rem);
    line-height: 1.2;
  }

  .project-link-list {
    left: var(--overlay-card-padding);
    right: var(--overlay-card-padding);
    top: 27rem;
    width: auto;
    gap: 5rem;
  }

  .project-category {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.95fr);
    column-gap: 3rem;
  }

  .project-category-preview {
    width: min(100%, 20rem);
  }

  .project-category-title {
    font-size: clamp(3rem, 7vw, 7rem);
    max-width: 9.5ch;
  }

  .project-list-link {
    padding: 0.74rem 0.8rem;
    font-size: clamp(0.95rem, 1.7vw, 1.22rem);
  }

  .approach-card {
    --approach-card-padding: 2rem;
    padding: 0;
  }

  .approach-copy-block {
    top: clamp(6rem, 12vh, 9rem);
    margin: clamp(6rem, 12vh, 9rem) var(--approach-card-padding) 0;
    grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1fr);
    column-gap: 3rem;
    max-width: none;
  }

  .approach-eyebrow {
    font-size: clamp(3rem, 7vw, 7rem);
  }

  .approach-eyebrow-cover {
    top: clamp(6rem, 12vh, 9rem);
    left: var(--approach-card-padding);
    font-size: clamp(3rem, 7vw, 7rem);
  }

  .approach-title {
    max-width: min(44vw, 40rem);
    font-size: clamp(2.2rem, 4.4vw, 4.2rem);
    line-height: 1.07;
  }

  .approach-title-cover {
    font-size: clamp(2.2rem, 4.4vw, 4.2rem);
    line-height: 1.07;
  }

  .approach-kicker {
    max-width: min(40vw, 28rem);
    font-size: clamp(0.95rem, 1.35vw, 1.12rem);
  }

  .approach-copy {
    max-width: min(42vw, 32rem);
    font-size: clamp(0.95rem, 1.35vw, 1.12rem);
    line-height: 1.18;
  }

  .approach-articles-mask {
    margin: 0;
    padding: 0;
  }

  .approach-steps {
    --approach-step-stack-gap: 25vh;
    margin: 0;
  }

  .approach-step-title {
    font-size: clamp(2.8rem, 6vw, 4.8rem);
  }

}

@media (max-width: 760px) {
  .service-art-section {
    min-height: auto;
    padding: clamp(4rem, 14vw, 6rem) 1.25rem;
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .service-art-copy {
    min-height: auto;
  }

  .service-art-heading {
    max-width: 9ch;
    font-size: clamp(3rem, 17vw, 5.2rem);
  }

  .service-art-meta {
    gap: 1rem;
  }

  .service-elements-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: auto;
    gap: 0.85rem;
  }

  .service-element-frame,
  .service-element-frame-large,
  .service-element-frame-tall,
  .service-element-frame-wide,
  .service-element-frame-small {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    grid-column: auto;
    grid-row: auto;
    min-height: clamp(13rem, 68vw, 24rem);
    transform: none;
  }

  .loader-logo {
    font-size: 2.25rem;
  }

  .loader-progress {
    width: 160px;
  }

  .navbar {
    padding: 1.25rem 1.25rem;
  }

  .logo-button {
    font-size: 1.25rem;
  }

  .menu-button {
    width: 44px;
    height: 44px;
  }

  .nav-links {
    display: none;
  }

  .panel {
    --panel-x-padding: 1.25rem;
  }

  .hero-title,
  .highlight-container {
    font-size: 3rem;
  }

  .highlight-container {
    padding: 0 9px;
  }

  .highlight-overlay {
    padding-left: 9px;
  }

  .hero-description {
    font-size: 1.25rem;
    max-width: 22rem;
  }

  .hero-line {
    width: 100%;
    margin-top: 22px;
  }

  .bottom-logo {
    font-size: 4.8rem;
    max-width: 100%;
  }

  .hero-section {
    padding-top: 6rem;
  }

  .service-card-web-dev,
  .service-card-branding,
  .service-card-marketing,
  .service-card-architecture {
    border-top-left-radius: 34px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 34px;
  }

  .service-card-web-dev {
    transform: translateX(calc(100% - 112px));
  }

  .service-card-branding {
    transform: translateX(calc(100% - 84px));
  }

  .service-card-marketing {
    transform: translateX(calc(100% - 56px));
  }

  .service-card-architecture {
    transform: translateX(calc(100% - 28px));
  }

  .card-img-unified {
    border-radius: 0;
  }

  .reveal-content {
    grid-template-rows: minmax(0, 58%) minmax(0, 42%);
  }

  .card-img-unified {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    object-position: center;
  }

  .card-desc {
    font-size: 1rem;
    max-width: 100%;
  }

  .card-info {
    --card-line-inset: 3.25rem;
    justify-content: space-between;
    padding: 1rem var(--card-line-inset) 1.15rem 0;
  }

  .card-title {
    font-size: 2.35rem;
    line-height: 1;
  }

  .icon-btn svg {
    width: 32px;
    height: 32px;
  }

  .masking-overlay-card {
    --overlay-card-padding: 1.25rem;
    padding: var(--overlay-card-padding);
  }

  .masking-overlay-card-about {
    --overlay-card-padding: 1.25rem;
  }

  .masking-overlay-copy {
    left: var(--overlay-card-padding);
    right: auto;
    top: 4.5rem;
    max-width: calc(100vw - 2.5rem);
    font-size: clamp(3rem, 16vw, 5rem);
    line-height: 1.05;
  }

  .about-section-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    row-gap: 1rem;
    align-content: start;
    padding-bottom: 3.5rem;
    padding-right: min(39vw, 21rem);
  }

  .masking-overlay-about-copy {
    font-size: clamp(3rem, 16vw, 5rem);
    line-height: 1.05;
  }

  .about-section-statement {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    font-size: clamp(1.45rem, 6.8vw, 2.35rem);
    line-height: 1.06;
    text-align: left;
  }

  .about-section-grid {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding-bottom: 0.75rem;
  }

  .about-section-column {
    max-width: 100%;
  }

  .about-section-label {
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
  }

  .about-section-body {
    font-size: clamp(0.9rem, 3.45vw, 1.08rem);
    line-height: 1.18;
  }

  .about-section-facts {
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
  }

  .about-section-fact {
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.82rem;
  }

  .about-section-link {
    grid-column: 1;
    grid-row: 5;
    justify-self: stretch;
    min-height: 3rem;
    font-size: 0.88rem;
  }

  .contact-card {
    --contact-card-padding: 1.25rem;
  }

  .site-footer {
    padding: 1.25rem;
  }

  .site-footer-meta {
    display: grid;
    gap: 0.55rem;
    font-size: 0.88rem;
  }

  .site-footer-links {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .site-footer-group:nth-child(1),
  .site-footer-group:nth-child(2),
  .site-footer-group:nth-child(3) {
    grid-column: 1;
  }

  .contact-section-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    row-gap: 1rem;
  }

  .contact-section-eyebrow {
    font-size: clamp(3rem, 16vw, 5rem);
    line-height: 1.05;
  }

  .contact-section-statement {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    font-size: clamp(1.18rem, 5.6vw, 1.9rem);
    line-height: 1.12;
    text-align: left;
  }

  .contact-section-grid {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .contact-section-form {
    grid-column: 1;
    grid-row: 4;
    align-self: end;
    width: 100%;
    gap: 0.78rem;
  }

  .contact-section-column {
    gap: 0.45rem;
    padding: 0;
  }

  .contact-section-label {
    font-size: 0.72rem;
  }

  .contact-section-link {
    font-size: clamp(1rem, 5vw, 1.45rem);
  }

  .contact-form-button {
    justify-self: stretch;
    min-height: 3rem;
    font-size: 0.88rem;
  }

  .masking-overlay-description {
    left: var(--overlay-card-padding);
    right: auto;
    top: 10.75rem;
    max-width: calc(100vw - 2.5rem);
    font-size: 1.08rem;
    line-height: 1.24;
  }

  .project-link-list {
    left: var(--overlay-card-padding);
    right: 1.25rem;
    top: 26rem;
    width: auto;
    gap: 4rem;
  }

  .project-category {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .project-category:nth-child(odd) .project-category-media,
  .project-category:nth-child(even) .project-category-media {
    display: grid;
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: min(100%, 17rem);
    --project-media-align: start;
    text-align: left;
  }

  .project-category:nth-child(odd) .project-category-title,
  .project-category:nth-child(even) .project-category-title,
  .project-category:nth-child(odd) .project-category-preview,
  .project-category:nth-child(even) .project-category-preview,
  .project-category:nth-child(odd) .project-category-list,
  .project-category:nth-child(even) .project-category-list {
    grid-column: 1;
  }

  .project-category:nth-child(odd) .project-category-title,
  .project-category:nth-child(even) .project-category-title {
    grid-row: auto;
    justify-self: start;
    max-width: 9.5ch;
    text-align: left;
  }

  .project-category:nth-child(odd) .project-category-preview,
  .project-category:nth-child(even) .project-category-preview {
    grid-row: auto;
    justify-self: start;
    width: min(100%, 17rem);
    aspect-ratio: 5 / 4;
    transform: none !important;
    --project-frame-y: 0px;
  }

  .project-category:nth-child(odd) .project-category-list,
  .project-category:nth-child(even) .project-category-list {
    grid-row: auto;
  }

  .project-category-title {
    font-size: clamp(3rem, 16vw, 5rem);
    line-height: 1.05;
  }

  .project-list-link {
    padding: 0.52rem 0.65rem;
    font-size: 0.95rem;
  }

  .approach-card {
    --approach-card-padding: 1.25rem;
    padding: 0;
  }

  .approach-copy-block {
    top: clamp(5.25rem, 11vh, 7rem);
    margin: clamp(5.25rem, 11vh, 7rem) var(--approach-card-padding) 0;
    grid-template-columns: 1fr;
    row-gap: 1.1rem;
    align-items: start;
    max-width: calc(100vw - 2.5rem);
  }

  .approach-eyebrow,
  .approach-kicker,
  .approach-title,
  .approach-copy,
  .approach-copy-block>hr {
    grid-column: 1;
    grid-row: auto;
  }

  .approach-eyebrow {
    font-size: clamp(3rem, 16vw, 5rem);
    line-height: 1.05;
  }

  .approach-eyebrow-cover {
    top: clamp(5.25rem, 11vh, 7rem);
    left: var(--approach-card-padding);
    font-size: clamp(3rem, 16vw, 5rem);
    line-height: 1.05;
  }

  .approach-title {
    justify-self: start;
    max-width: 100%;
    font-size: clamp(2.05rem, 10.5vw, 3.65rem);
    line-height: 1.06;
    text-align: left;
  }

  .approach-title-cover {
    font-size: clamp(2.05rem, 10.5vw, 3.65rem);
    line-height: 1.06;
    text-align: left;
  }

  .approach-kicker {
    justify-self: start;
    max-width: 100%;
    font-size: 0.98rem;
    line-height: 1.22;
    text-align: left;
  }

  .approach-copy {
    justify-self: start;
    max-width: 100%;
    font-size: 0.98rem;
    line-height: 1.22;
    text-align: left;
  }

  .approach-articles-mask {
    margin: 0;
    padding: 0;
  }

  .approach-steps {
    --approach-step-stack-gap: 25vh;
    margin: 0;
  }

  .approach-step {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 1.25rem var(--approach-card-padding) 2.25rem;
    font-size: 0.95rem;
  }

  .approach-step::after {
    inset: 1.25rem var(--approach-card-padding) 2.25rem;
  }

  .approach-step>div {
    min-height: calc(100vh - 3.5rem);
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .approach-step-title {
    grid-column: 1;
    font-size: clamp(2.35rem, 11vw, 4rem);
    line-height: 0.98;
  }

  .approach-step-copy {
    grid-column: 1;
    align-self: start;
    justify-self: start;
    max-width: 100%;
    font-size: clamp(1.45rem, 7vw, 2.6rem);
    line-height: 1.08;
    text-align: left;
  }

}

@media (max-width: 420px) {

  .hero-title,
  .highlight-container {
    font-size: 2.35rem;
  }

  .bottom-logo {
    font-size: 3.7rem;
  }

  .card-title {
    font-size: 1.95rem;
  }

  .menu-overlay-main {
    top: 6rem;
    gap: 1.25rem;
  }

  .menu-overlay-info {
    gap: 1rem;
  }

  .menu-info-group {
    gap: 0.5rem;
  }

  .menu-overlay-blueprint {
    font-size: 3.2rem;
  }
}

@media (max-height: 680px) {
  .card-title {
    font-size: 3rem;
    line-height: 1;
  }

  .icon-btn {
    bottom: 1.5rem;
  }

  .menu-overlay-main {
    --menu-frame-width: min(28vw, 22rem);
    --menu-frame-height: min(15.75vw, 12.375rem);
    top: 6.5rem;
    bottom: clamp(7rem, 17vw, 12rem);
  }

  .menu-overlay-links {
    gap: 0.3rem;
  }

  .menu-overlay-link {
    font-size: clamp(1.65rem, 3.2vw, 3.15rem);
  }

  .menu-overlay-info {
    top: auto;
    gap: 1.25rem;
  }

  .menu-info-group {
    gap: 0.45rem;
  }

  .menu-image-frame {
    top: auto;
    bottom: auto;
    width: min(28vw, 22rem);
  }

  .menu-overlay-divider {
    margin: 1rem 0;
  }

  .menu-overlay-blueprint {
    font-size: clamp(4.5rem, 14vw, 11rem);
  }
}

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .scrollbar-indicator {
    right: 6px;
    width: 2px;
  }

  .hero-section {
    justify-content: flex-start;
    padding-top: 7rem;
  }

  .hero-title,
  .highlight-container {
    max-width: calc(100vw - 2.5rem);
    font-size: clamp(2.15rem, 11.5vw, 3.2rem);
    line-height: 0.98;
  }

  .hero-description {
    font-size: clamp(1rem, 4.6vw, 1.22rem);
    line-height: 1.18;
  }

  .bottom-logo {
    font-size: clamp(3.15rem, 16vw, 4.8rem);
    line-height: 0.82;
  }

  .card-info {
    --card-line-inset: 3.25rem;
    min-width: 0;
    justify-content: space-between;
    padding: 1rem var(--card-line-inset) 1.15rem 0;
  }

  .card-desc {
    font-size: clamp(0.84rem, 3.7vw, 1rem);
    line-height: 1.18;
  }

  .card-title {
    max-width: min(74vw, 18rem);
    font-size: clamp(1.55rem, 8.2vw, 2.35rem);
    line-height: 0.98;
    overflow-wrap: anywhere;
  }

  .icon-btn {
    right: 1rem;
    bottom: 1rem;
  }

  .masking-overlay-copy,
  .masking-overlay-about-copy,
  .contact-section-eyebrow {
    font-size: clamp(2.6rem, 14.5vw, 4.35rem);
    line-height: 1;
  }

  .masking-overlay-description {
    top: 9.35rem;
    font-size: clamp(0.88rem, 3.7vw, 1rem);
    line-height: 1.2;
  }

  .project-link-list {
    top: 22.5rem;
    gap: 2.6rem;
  }

  .project-category {
    row-gap: 0.75rem;
  }

  .project-category-title {
    font-size: clamp(2.35rem, 12vw, 3.85rem);
    line-height: 1;
  }

  .project-category:nth-child(odd) .project-category-preview,
  .project-category:nth-child(even) .project-category-preview {
    width: min(100%, 14rem);
  }

  .project-list-link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    padding: 0.45rem 0.52rem;
    font-size: clamp(0.78rem, 3.45vw, 0.9rem);
    line-height: 1.05;
  }

  .project-list-link::after {
    grid-column: 2;
  }

  .about-section-inner {
    row-gap: clamp(0.42rem, 1.8vh, 0.8rem);
    align-content: start;
    padding-bottom: 4.75rem;
  }

  .about-section-statement {
    font-size: clamp(1.18rem, 5.7vw, 1.85rem);
    line-height: 1.06;
  }

  .about-section-grid {
    gap: 0.62rem;
    padding-bottom: 0.55rem;
  }

  .about-section-label {
    margin-bottom: 0.28rem;
    font-size: 0.66rem;
  }

  .about-section-body {
    font-size: clamp(0.78rem, 3.25vw, 0.95rem);
    line-height: 1.16;
  }

  .about-section-fact {
    gap: 0.5rem;
    padding: 0.42rem 0;
    font-size: clamp(0.7rem, 3.05vw, 0.82rem);
    line-height: 1.08;
  }

  .about-section-link {
    min-height: 2.72rem;
    font-size: 0.82rem;
  }

  .contact-section-inner {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    row-gap: clamp(0.7rem, 2.4vh, 1rem);
    align-content: space-between;
  }

  .contact-section-statement {
    font-size: clamp(1.05rem, 5.1vw, 1.55rem);
    line-height: 1.12;
  }

  .contact-section-grid {
    align-self: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .contact-section-column {
    padding: 0;
  }

  .contact-section-link {
    max-width: 100%;
    font-size: clamp(0.92rem, 4.35vw, 1.24rem);
    overflow-wrap: anywhere;
  }

  .contact-form-field input,
  .contact-form-field textarea {
    font-size: 0.95rem;
  }

  .contact-form-field textarea {
    min-height: 5.5rem;
  }

  .contact-form-button {
    min-height: 2.85rem;
    font-size: 0.84rem;
  }

.site-footer-title {
  grid-column: 1 / -1;
  grid-row: 5;
    font-size: clamp(3.5rem, 18vw, 7rem);
  }

  .approach-copy-block {
    row-gap: 0.78rem;
  }

  .approach-title {
    font-size: clamp(1.55rem, 8vw, 2.75rem);
  }

  .approach-kicker,
  .approach-copy {
    font-size: clamp(0.78rem, 3.5vw, 0.94rem);
    line-height: 1.18;
  }

  .approach-step-title {
    font-size: clamp(1.9rem, 9.5vw, 3.1rem);
  }

  .approach-step-copy {
    font-size: clamp(1.08rem, 5.7vw, 1.85rem);
  }

  .menu-overlay-main {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .menu-overlay-link {
    font-size: clamp(2.35rem, 13vw, 4.4rem);
    line-height: 0.95;
  }

  .menu-image-frame {
    display: none;
  }

  .menu-overlay-info {
    grid-template-columns: 1fr;
    gap: 0.95rem;
  }

  .service-hero,
  .service-section,
  .service-process,
  .service-cta {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .service-hero {
    min-height: 100svh !important;
    padding-top: 6.5rem !important;
    padding-bottom: 2rem !important;
  }

  .service-hero-title {
    margin-bottom: 1.35rem !important;
    font-size: clamp(2.25rem, 14vw, 4.5rem) !important;
    line-height: 0.98 !important;
    overflow-wrap: anywhere !important;
  }

  .service-hero-desc {
    max-width: 100% !important;
    font-size: clamp(0.98rem, 4.3vw, 1.16rem) !important;
    line-height: 1.45 !important;
  }

  .service-hero-line {
    margin: 1.6rem 0 !important;
  }

  .service-grid,
  .service-steps {
    grid-template-columns: 1fr !important;
  }

  .service-feature-title,
  .service-step-content h3 {
    font-size: 1.08rem !important;
  }

  .service-feature-body,
  .service-step-content p {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }

  .service-process-title,
  .service-cta-title {
    margin-bottom: 2rem !important;
    font-size: clamp(1.8rem, 10vw, 3rem) !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 420px), (max-height: 700px) and (max-width: 760px) {
  .reveal-content {
    grid-template-rows: minmax(0, 58svh) minmax(0, 1fr);
  }

  .card-info {
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
  }

  .card-desc {
    margin-bottom: 0.65rem;
  }

  .about-section-inner,
  .contact-section-inner {
    row-gap: 0.48rem;
  }

  .about-section-statement {
    font-size: clamp(1.02rem, 5.2vw, 1.42rem);
  }

  .about-section-body {
    font-size: clamp(0.7rem, 3vw, 0.84rem);
  }

  .about-section-fact {
    padding: 0.34rem 0;
    font-size: 0.68rem;
  }

  .contact-section-statement {
    font-size: clamp(1.15rem, 6vw, 1.72rem);
  }

  .contact-section-column {
    padding: 0.58rem 0 0.64rem;
  }

  .masking-overlay-copy,
  .masking-overlay-about-copy,
  .contact-section-eyebrow {
    font-size: clamp(2.2rem, 13vw, 3.3rem);
  }
}

@media (max-width: 600px) {
  :root {
    --phone-pad: clamp(1rem, 4.8vw, 1.35rem);
    --phone-gap: clamp(0.72rem, 2.6vh, 1.15rem);
  }

  .navbar {
    padding: max(1rem, env(safe-area-inset-top)) var(--phone-pad) 0;
  }

  .scroll-container,
  .panel,
  .masking-overlay-card,
  .masking-overlay-card-about,
  .approach-card,
  .contact-card,
  .site-footer {
    width: 100dvw;
    height: 100svh;
    min-height: 100svh;
  }

  .panel {
    --panel-x-padding: var(--phone-pad);
    --panel-top-padding: var(--phone-pad);
    padding-left: var(--phone-pad);
    padding-right: var(--phone-pad);
  }

  .hero-section {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    align-content: start;
    gap: 0.35rem;
    padding-top: clamp(6.5rem, 16vh, 8rem);
  }

  .hero-title,
  .highlight-container,
  .hero-description,
  .hero-line,
  .bottom-logo {
    grid-column: 1;
  }

  .hero-line {
    margin-top: 0.75rem;
  }

  .bottom-logo {
    align-self: end;
  }

  .service-card-web-dev,
  .service-card-branding,
  .service-card-marketing,
  .service-card-architecture {
    padding: 0 var(--phone-pad) 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.2);
  }

  .reveal-content {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 62svh) minmax(0, 1fr);
    gap: 0;
  }

  .card-img-unified {
    width: calc(100% + (var(--phone-pad) * 2));
    height: 100%;
    margin: 0 calc(var(--phone-pad) * -1);
    object-fit: cover;
    border-radius: 0 0 18px 18px;
  }

  .card-info {
    --card-line-inset: 3.1rem;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: space-between;
    gap: 0.7rem;
    min-height: 0;
    padding: var(--phone-gap) var(--card-line-inset) var(--phone-gap) 0;
  }

  .card-desc {
    margin: 0;
    max-width: 100%;
    font-size: clamp(0.82rem, 3.6vw, 0.98rem);
    line-height: 1.18;
  }

  .card-title {
    align-self: end;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.55rem, 8vw, 2.26rem);
    line-height: 0.96;
  }

  .card-info hr {
    margin: 0;
  }

  .icon-btn {
    right: 0;
    bottom: 0;
  }

  .masking-overlay-card,
  .masking-overlay-card-about,
  .contact-card,
  .site-footer {
    padding: var(--phone-pad);
  }

  .masking-overlay-card {
    --overlay-card-padding: var(--phone-pad);
    overflow: hidden;
  }

  .masking-overlay-copy {
    top: clamp(4.8rem, 12svh, 6rem);
  }

  .masking-overlay-description {
    top: clamp(9rem, 21svh, 10.4rem);
  }

  .project-link-list {
    top: clamp(20rem, 47svh, 24rem);
    right: var(--phone-pad);
  }

  .about-section-inner {
    height: calc(100svh - (var(--phone-pad) * 2));
    min-height: 0;
    padding-bottom: 0;
    padding-right: 0;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: var(--phone-gap);
    align-content: stretch;
  }

  .about-section-statement,
  .about-section-grid,
  .about-section-facts,
  .about-section-link {
    grid-column: 1;
  }

  .about-section-statement {
    font-size: clamp(1.08rem, 5.55vw, 1.72rem);
  }

  .about-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.72rem;
    align-self: start;
  }

  .about-section-facts {
    grid-row: 4;
    align-self: end;
  }

  .about-section-link {
    grid-row: 5;
    align-self: end;
  }

  .contact-card {
    --contact-card-padding: var(--phone-pad);
  }

  .contact-section-inner {
    height: calc(100svh - (var(--phone-pad) * 2));
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: var(--phone-gap);
    align-content: stretch;
  }

  .contact-section-eyebrow,
  .contact-section-statement,
  .contact-section-grid,
  .contact-section-form {
    grid-column: 1;
  }

  .contact-section-statement {
    font-size: clamp(1rem, 4.8vw, 1.45rem);
  }

  .contact-section-grid {
    align-self: start;
  }

  .contact-section-form {
    grid-row: 4;
    align-self: end;
  }

  .site-footer {
    display: grid;
  }

  .site-footer-inner {
    height: calc(100svh - (var(--phone-pad) * 2));
    min-height: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto minmax(1.25rem, 4vh) auto auto;
    row-gap: 0.9rem;
  }

  .site-footer-links {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0.8rem;
    row-gap: 0.8rem;
  }

  .site-footer-group:nth-child(1),
  .site-footer-group:nth-child(2),
  .site-footer-group:nth-child(3) {
    grid-column: auto;
  }

  .site-footer-group {
    gap: 0.4rem;
    font-size: 0.82rem;
  }

  .site-footer-label {
    margin-bottom: 0.15rem;
    font-size: 0.62rem;
  }

  .site-footer-title {
    grid-column: 1 / -1;
    grid-row: 5;
    font-size: clamp(3.35rem, 17vw, 6.8rem);
    line-height: 0.8;
  }

  .approach-card {
    --approach-card-padding: var(--phone-pad);
  }

  .approach-copy-block {
    top: clamp(5.25rem, 12svh, 6.5rem);
    margin: clamp(5.25rem, 12svh, 6.5rem) var(--phone-pad) 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .approach-steps {
    margin-top: 0;
  }

  .approach-step {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.7rem;
    min-height: calc(100svh + 2px);
    padding: var(--phone-pad);
  }

  .approach-step::after {
    inset: var(--phone-pad);
  }

  .approach-step>div {
    min-height: calc(100svh - (var(--phone-pad) * 2));
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 1rem;
  }

  .approach-step-copy {
    grid-row: 3;
    align-self: end;
    transform: translateY(-4vh);
  }

  .menu-overlay-content {
    padding: var(--phone-pad);
  }

  .menu-overlay-main {
    left: var(--phone-pad);
    right: var(--phone-pad);
    top: clamp(5.8rem, 13svh, 7rem);
    bottom: clamp(7.5rem, 22svh, 10rem);
  }

  .menu-overlay-bottom {
    left: var(--phone-pad);
    right: var(--phone-pad);
  }
}

@media (min-width: 601px) and (max-width: 760px) {
  .service-card-web-dev,
  .service-card-branding,
  .service-card-marketing,
  .service-card-architecture {
    border-top-left-radius: 34px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 34px;
    padding: 0 var(--panel-x-padding);
  }

  .service-card-web-dev {
    transform: translateX(calc(100% - 112px));
  }

  .service-card-branding {
    transform: translateX(calc(100% - 84px));
  }

  .service-card-marketing {
    transform: translateX(calc(100% - 56px));
  }

  .service-card-architecture {
    transform: translateX(calc(100% - 28px));
  }
}

@media (min-width: 761px) {
  .service-card-web-dev {
    transform: translateX(calc(100% - 400px));
    border-top-left-radius: 60px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 60px;
  }

  .service-card-branding {
    transform: translateX(calc(100% - 300px));
    border-top-left-radius: 60px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 60px;
  }

  .service-card-marketing {
    transform: translateX(calc(100% - 200px));
    border-top-left-radius: 60px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 60px;
  }

  .service-card-architecture {
    transform: translateX(calc(100% - 100px));
    border-top-left-radius: 60px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 60px;
  }
}

/* Standalone linked pages */
.link-page-main {
  min-height: 100vh;
  background-color: #f0ebd8;
  color: #000000;
  overflow-x: hidden;
  position: relative;
}

body:has(.link-page-reveal-footer) .link-page-main {
  padding-bottom: 86vh;
  background-color: transparent;
}

body:has(.link-page-hero-projects) .link-page-main {
  color: #000000;
}

body:has(.link-page-hero-projects) {
  background-color: #D6C0AF;
}

body:has(.link-page-reveal-footer) {
  background-color: #000000;
}

body:has(.link-page-hero-approach) .link-page-main {
  background-color: #CDB8A3;
}

body:has(.link-page-hero-about) .link-page-main {
  background-color: #96887a;
}

body:has(.link-page-hero-contact) .link-page-main {
  background-color: #2c2416;
}

.link-page-card {
  position: relative;
  z-index: 9;
  min-height: 100vh;
  color: #000000;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

body:has(.link-page-hero-projects) .link-page-card {
  background-color: #d7c6b3;
  background-image: url("./background_img/webp-output/project_link_img_1.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.projects-bridge-section {
  --projects-bridge-bg-y: 0px;
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(5rem, 10vw, 9rem) 4rem clamp(6rem, 12vw, 10rem);
  background-color: #c5a98b;
  background-image: url("./background_img/webp-output/project_link_img_2.webp");
  background-position: center calc(50% + var(--projects-bridge-bg-y));
  background-size: cover;
  background-repeat: no-repeat;
  color: #000000;
}

.projects-bridge-section p {
  grid-column: 2 / 12;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 4.2rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: 0;
}

.projects-bridge-cta {
  grid-column: 2 / 12;
  justify-self: start;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  margin-top: clamp(1.8rem, 4vw, 3.2rem);
  padding: 0 1.25rem;
  border: 1px solid #000000;
  border-radius: 999px;
  background-color: transparent;
  color: #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.12vw, 1.14rem);
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.25s ease;
}

.projects-bridge-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000000;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.projects-bridge-cta span {
  position: relative;
  z-index: 1;
}

.projects-bridge-cta:hover,
.projects-bridge-cta:focus-visible {
  color: #D6C0AF;
}

.projects-bridge-cta:hover::before,
.projects-bridge-cta:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

body:has(.link-page-hero-approach) .link-page-card {
  --approach-page-bg-y: 0px;
  background-color: #ad8f6d;
  background-image: url("./background_img/webp-output/approach_link_img_1.webp");
  background-position: center calc(50% + var(--approach-page-bg-y));
  background-size: cover;
  background-repeat: no-repeat;
}

body:has(.link-page-hero-approach) .link-page-card {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
}

body:has(.link-page-hero-approach) .link-page-card > * {
  grid-column: 1 / -1;
}

body:has(.link-page-hero-about) .link-page-card {
  background-color: #96887a;
}

body:has(.link-page-hero-contact) .link-page-card {
  background-color: #2c2416;
}

body:has(.link-page-reveal-footer) .link-page-main {
  background-color: transparent;
}

.link-page-hero {
  min-height: 100svh;
  padding: clamp(7rem, 14vh, 10rem) 4rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.72fr);
  grid-template-rows: auto auto auto;
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  position: relative;
  z-index: 1;
  background-color: inherit;
}

.link-page-hero-projects {
  min-height: 100vh;
  height: 100vh;
  padding: 0;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  background-color: transparent;
}

.projects-template-container {
  position: relative;
  display: grid;
  grid-template-areas:
    "services"
    "showcase"
    "controls-gap-top"
    "controls"
    "controls-gap-bottom"
    "title-reserve";
  grid-template-rows: minmax(52px, auto) minmax(400px, auto) minmax(0.5rem, 1fr) auto minmax(0.5rem, 1fr) 17vw;
  gap: clamp(0.65rem, 1.8vh, 1.35rem);
  align-content: stretch;
  width: 100vw;
  height: 100vh;
  padding: 2.5rem 4rem 1.5rem;
  overflow: hidden;
  touch-action: pan-y;
}

.projects-template-container.is-dragging {
  cursor: grabbing;
}

.link-page-hero-approach {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
  align-content: end;
  padding-top: clamp(8.5rem, 16vh, 12rem);
  row-gap: clamp(1rem, 2.4vh, 2rem);
  background-image: url("./background_img/webp-output/approach_link_hero_img_1.webp");
  background-position: center 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.link-page-hero-approach > div {
  grid-column: 1 / 7;
  grid-row: 1;
  overflow: visible;
  padding-top: 0;
}

.link-page-hero-approach .link-page-title {
  max-width: 100%;
  font-size: clamp(3.6rem, 9.6vw, 8.8rem);
  overflow: visible;
}

.link-page-hero-approach .link-page-title .line,
.link-page-hero-approach .link-page-title .line-mask {
  overflow: visible;
}

.approach-hero-rule {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000000;
  transform: scaleX(0);
  transform-origin: center;
  will-change: transform;
}

.link-page-hero-approach .link-page-hero-copy {
  grid-column: 8 / -1;
  grid-row: 3;
  justify-self: end;
  align-self: start;
  max-width: 42rem;
  display: grid;
  gap: clamp(1.2rem, 3vh, 2rem);
  padding-top: 0;
}

.link-page-hero-approach .link-page-intro {
  margin: 0;
  text-align: right;
}

.link-page-hero-approach .link-page-cta {
  justify-self: end;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 18px, 0);
}

.link-page-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-height: 3.5rem;
  padding: 0 1.25rem;
  border: 1px solid #000000;
  border-radius: 999px;
  background: transparent;
  color: #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.12vw, 1.14rem);
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.25s ease;
}

.link-page-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000000;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.link-page-cta:hover,
.link-page-cta:focus-visible {
  color: #ffffff;
}

.link-page-cta:hover::before,
.link-page-cta:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.link-page-cta span {
  position: relative;
  z-index: 1;
}

.projects-showcase-items {
  grid-area: showcase;
  position: relative;
  z-index: 12;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: start;
  touch-action: pan-y;
}

.projects-showcase-col {
  flex: 1;
  display: flex;
  align-items: start;
  min-width: 0;
}

.projects-showcase-col-main {
  flex: 0 0 330px;
  display: flex;
  align-items: start;
  justify-content: center;
}

.projects-showcase-item {
  position: relative;
  top: 0;
  height: 260px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.projects-showcase-item-side .projects-showcase-copy {
  visibility: hidden;
}

.projects-showcase-item-side {
  height: 260px;
  cursor: grab;
}

.projects-showcase-item-main {
  position: relative;
  top: 0;
  width: 330px;
  height: 400px;
  overflow: hidden;
  flex: 0 0 auto;
}

.projects-showcase-copy {
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 0.5em;
  overflow: hidden;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 13.5px;
  line-height: 100%;
  font-weight: 500;
  color: #000000;
  text-transform: none;
}

.projects-showcase-item-main .projects-showcase-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}

.projects-showcase-copy span {
  position: relative;
  display: block;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  margin-bottom: 0.25em;
}

.projects-showcase-item-main .projects-showcase-copy > span {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 0;
}

.projects-showcase-item-main .projects-showcase-copy > span:first-child {
  justify-self: start;
}

.projects-showcase-item-main .projects-showcase-copy > span:last-child {
  justify-self: end;
  text-align: right;
}

.projects-showcase-item-main .projects-showcase-copy > span::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: #000000;
  transform: translate3d(var(--project-title-cover-x, 0%), 0, 0) scaleX(var(--project-title-cover-scale, 1));
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}

.projects-showcase-item-clone .projects-showcase-copy {
  visibility: hidden;
}

.projects-showcase-copy span span {
  position: relative;
  display: block;
  will-change: transform;
}

.projects-showcase-img {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background-color: transparent;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .projects-showcase-img,
  .projects-showcase-img img,
  .projects-template-container.is-dragging .projects-showcase-img {
    cursor: none;
  }
}

.projects-template-container.is-dragging .projects-showcase-item-side,
.projects-template-container.is-dragging .projects-showcase-img {
  cursor: grabbing;
}

@media (hover: hover) and (pointer: fine) {
  .projects-template-container.is-dragging .projects-showcase-img {
    cursor: none;
  }
}

.projects-showcase-item-side .projects-showcase-img {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.projects-showcase-item-main .projects-showcase-img {
  overflow: hidden;
}

.projects-showcase-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.04);
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
}

.projects-showcase-item-main .projects-showcase-img img {
  transform: scale(0.5);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transform-origin: center center;
}

.projects-showcase-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50%;
  z-index: 10;
  width: 100%;
  display: flex;
  transform-origin: center center;
  pointer-events: none;
}

.projects-template-container > .projects-showcase-title {
  z-index: 10;
}

.projects-showcase-word {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: 17vw;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0;
  color: #000000;
  transform: scale(0.25);
  transform-origin: center bottom;
  will-change: transform, left, right;
}

.projects-showcase-word-left {
  left: 17vw;
}

.projects-showcase-word-right {
  right: 17vw;
}

.projects-showcase-word > span {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.projects-showcase-word > span > span {
  display: block;
  transform: translate3d(0, 400px, 0);
  will-change: transform;
}

.projects-service-nav {
  grid-area: services;
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  z-index: 80;
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  pointer-events: none;
}

.projects-service-tab {
  position: relative;
  top: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 13.5px;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.25s ease;
}

.projects-service-tab::before {
  content: none;
}

.projects-service-tab span {
  position: relative;
  z-index: 1;
}

.projects-service-tab:hover,
.projects-service-tab:focus-visible,
.projects-service-tab.is-active {
  color: #000000;
}

.projects-service-tab:hover::before,
.projects-service-tab:focus-visible::before,
.projects-service-tab.is-active::before {
  transform: none;
}

.projects-showcase-controls {
  position: absolute;
  top: var(--projects-controls-y, 50%);
  left: 4rem;
  right: 4rem;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.projects-showcase-control {
  position: relative;
  min-height: 2.25rem;
  padding: 0 0.85rem;
  border: 1px solid #000000;
  border-radius: 999px;
  background-color: transparent;
  color: #000000;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 13.5px;
  line-height: 1;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.25s ease;
}

.projects-showcase-control::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000000;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.projects-showcase-control span {
  position: relative;
  z-index: 1;
}

.projects-showcase-control:hover,
.projects-showcase-control:focus-visible {
  color: #D6C0AF;
}

.projects-showcase-control:hover::before,
.projects-showcase-control:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.projects-mobile-dots,
.projects-mobile-detail {
  display: none;
}

@media (max-height: 900px) and (min-width: 761px) {
  .projects-template-container {
    grid-template-rows: minmax(52px, auto) minmax(355px, auto) minmax(0.5rem, 1fr) auto minmax(0.5rem, 1fr) 17vw;
  }

  .projects-showcase-col-main {
    flex-basis: 300px;
  }

  .projects-showcase-item,
  .projects-showcase-item-side {
    top: 0;
    height: 230px;
  }

  .projects-showcase-item-main {
    top: 0;
    width: 300px;
    height: 355px;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .projects-template-container {
    grid-template-rows: minmax(52px, auto) minmax(300px, auto) minmax(0.4rem, 1fr) auto minmax(0.4rem, 1fr) clamp(4rem, 11vw, 8rem);
    gap: 0.55rem;
    padding-bottom: 1rem;
  }

  .projects-showcase-col-main {
    flex-basis: 280px;
  }

  .projects-showcase-item,
  .projects-showcase-item-side {
    top: 0;
    height: 210px;
  }

  .projects-showcase-item-main {
    top: 0;
    width: 280px;
    height: 300px;
  }

  .projects-showcase-word {
    font-size: clamp(4rem, 11vw, 8rem);
  }
}

@media (max-width: 1180px) {
  .projects-template-container {
    padding: 2rem 2rem 1.5rem;
  }

  .projects-bridge-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .projects-service-nav {
    left: auto;
    right: auto;
    top: auto;
  }

  .projects-showcase-controls {
    left: 2rem;
    right: 2rem;
  }
}

@media (max-width: 768px) {
  .projects-template-container {
    grid-template-rows: minmax(44px, auto) minmax(16rem, auto) minmax(0.4rem, 1fr) auto minmax(0.4rem, 1fr) 17vw;
    padding: 1.25rem 1.25rem 1.25rem;
  }

  .projects-bridge-section p {
    grid-column: 1 / -1;
    font-size: clamp(1.65rem, 7.2vw, 3.4rem);
  }

  .projects-bridge-cta {
    grid-column: 1 / -1;
  }

  .projects-service-nav {
    left: auto;
    right: auto;
    top: auto;
    min-height: 44px;
  }

  .projects-showcase-controls {
    left: 1.25rem;
    right: 1.25rem;
  }
}

@media (max-width: 600px) {
  .projects-template-container {
    padding: max(1rem, env(safe-area-inset-top)) var(--phone-pad) var(--phone-pad);
  }

  .projects-bridge-section {
    padding: clamp(4rem, 18vw, 6rem) var(--phone-pad) clamp(5rem, 20vw, 7rem);
  }

  .projects-service-nav {
    left: auto;
    right: auto;
    top: auto;
  }

  .projects-showcase-controls {
    left: var(--phone-pad);
    right: var(--phone-pad);
  }
}

.link-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.18;
  filter: grayscale(1);
}

.link-page-hero > * {
  position: relative;
  z-index: 1;
}

.link-page-hero-projects::before {
  inset: auto;
  top: 10.5rem;
}

.link-page-hero-about::before {
  background-image: none;
}

.link-page-hero-contact {
  background-color: #000000;
  color: #ffffff;
}

.link-page-kicker {
  margin: 0 0 1rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 0.82rem;
  line-height: 1;
  text-transform: uppercase;
}

.link-page-title {
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(5rem, 16vw, 16rem);
  line-height: 1.12;
  font-weight: 300;
  overflow: visible;
  padding-top: 0.12em;
  padding-bottom: 0.16em;
}

.link-page-hero-projects .link-page-title {
  font-size: clamp(4rem, 11vw, 11rem);
}

.link-page-title.reveal-text {
  overflow: visible;
}

.link-page-title .line {
  overflow: hidden;
  padding-top: 0.12em;
  padding-bottom: 0.16em;
  margin-top: -0.12em;
  margin-bottom: -0.16em;
}

.link-page-title .line-mask {
  display: block;
  will-change: transform;
}

.site-footer-title.reveal-text {
  overflow: visible;
}

.site-footer-title .line {
  overflow: hidden;
  padding-top: 0.08em;
  padding-bottom: 0.18em;
  margin-top: -0.08em;
  margin-bottom: -0.18em;
}

.site-footer-title .line-mask {
  display: block;
  will-change: transform;
}

.link-page-intro {
  max-width: 42rem;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 2.35rem);
  line-height: 1.14;
}

.link-page-section {
  padding: 0 4rem clamp(3rem, 6vw, 6rem);
}

.link-projects-board {
  display: grid;
  gap: clamp(6rem, 11vw, 10rem);
  position: relative;
  z-index: 1;
  margin: 0;
  padding: clamp(4rem, 9vw, 8rem) 4rem;
  min-height: 100vh;
  background-color: inherit;
  color: #000000;
}

.link-project-service {
  display: grid;
  grid-template-columns: minmax(18rem, 32vw) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.link-project-service h2 {
  position: sticky;
  top: 8.25rem;
  z-index: 2;
  align-self: start;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(2.6rem, 6vw, 6.8rem);
  line-height: 0.95;
  font-weight: 300;
  color: #000000;
}

.link-project-service-list {
  display: grid;
  align-self: start;
}

.link-project-item {
  --project-page-mask: #000000;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: clamp(3.4rem, 6.5vw, 5.7rem);
  padding: 0.8rem 1rem;
  border-top: 1px solid #000000;
  color: #000000;
  text-decoration: none;
  overflow: hidden;
}

.link-project-item:last-child {
  border-bottom: 1px solid #000000;
}

.link-project-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--project-page-mask);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.link-project-item::after {
  content: attr(data-index);
  position: relative;
  z-index: 1;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.78rem, 1.05vw, 1rem);
}

.link-project-item span {
  position: relative;
  z-index: 1;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(1.25rem, 2.25vw, 2.7rem);
  line-height: 1;
}

.link-project-item .line,
.link-project-item .line-mask {
  position: relative;
  z-index: 1;
}

.link-project-item:hover,
.link-project-item:focus-visible {
  color: #ffffff;
}

.link-project-item:hover::before,
.link-project-item:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

.link-project-cursor-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  width: min(20vw, 15rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.92);
  transition: opacity 0.22s ease, visibility 0s linear 0.22s, transform 0.22s ease;
}

.link-page-reveal-footer.site-footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 0;
  margin-top: 0;
  background-color: #000000;
  color: #ffffff;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.link-page-reveal-footer .site-footer-group a,
.link-page-reveal-footer .site-footer-group button,
.link-page-reveal-footer .site-footer-title,
.link-page-reveal-footer .site-footer-meta {
  color: #ffffff;
}

.link-page-reveal-footer .site-footer-label {
  color: rgba(255, 255, 255, 0.58);
}

.link-page-reveal-footer .site-footer-meta,
.link-page-reveal-footer .site-footer-links {
  border-color: #ffffff;
}

.link-page-reveal-footer .site-footer-group a,
.link-page-reveal-footer .site-footer-group button {
  background-image: linear-gradient(#ffffff, #ffffff);
}

.link-page-reveal-footer .site-footer-group a:hover,
.link-page-reveal-footer .site-footer-group a:focus-visible,
.link-page-reveal-footer .site-footer-group button:hover,
.link-page-reveal-footer .site-footer-group button:focus-visible {
  color: rgba(255, 255, 255, 0.68);
}

.link-project-cursor-preview.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition-delay: 0s;
}

.link-project-cursor-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.link-project-row span,
.link-process-grid span,
.link-values-grid span {
  font-family: 'CabinetGrotesk-regular', sans-serif;
}

.link-project-row h2,
.link-process-grid h2,
.link-page-band h2,
.link-about-layout h2 {
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(1.8rem, 3.4vw, 4rem);
  line-height: 0.98;
  font-weight: 300;
}

.link-project-row p,
.link-process-grid p,
.link-page-band p,
.link-about-layout p,
.link-values-grid p {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.2;
}

.link-project-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.link-process-grid {
  display: block;
  min-height: auto;
  position: relative;
  overflow: visible;
}

.link-process-grid article {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  column-gap: clamp(1rem, 2vw, 2rem);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(4rem, 9vw, 8rem) 4rem;
  border-top: 1px solid #000000;
  border-left: 0;
  overflow: hidden;
  background-color: transparent;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
  opacity: 1;
  visibility: visible;
}

body:has(.link-page-hero-approach) .link-process-grid article {
  --approach-page-bg-y: 0px;
  border-color: #000000;
  background-color: transparent;
}

body:has(.link-page-hero-approach) .link-process-grid article:nth-child(1) {
  background-image: url("./background_img/webp-output/approach_link_img_1.webp");
  background-position: center calc(5% + var(--approach-page-bg-y));
  background-size: 112% auto;
}

body:has(.link-page-hero-approach) .link-process-grid article:nth-child(2) {
  background-image: url("./background_img/webp-output/approach_link_img_2.webp");
  background-position: center calc(5% + var(--approach-page-bg-y));
  background-size: 112% auto;
}

body:has(.link-page-hero-approach) .link-process-grid article:nth-child(3) {
  background-image: url("./background_img/webp-output/approach_link_img_3.webp");
  background-position: center calc(5% + var(--approach-page-bg-y));
  background-size: 112% auto;
}

body:has(.link-page-hero-approach) .link-process-grid article:nth-child(4) {
  background-image: url("./background_img/webp-output/approach_link_img_4.webp");
  background-position: center calc(5% + var(--approach-page-bg-y));
  background-size: 112% auto;
}

.link-process-grid article > * {
  position: relative;
  z-index: 1;
}

.process-text-mask {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  font: inherit;
}

.link-process-grid article h2 .process-text-mask {
  padding-top: 0.08em;
  padding-bottom: 0.18em;
  margin-top: -0.08em;
  margin-bottom: -0.18em;
}

.process-text-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: #000000;
  transform: translate3d(var(--process-text-cover, 0%), 0, 0);
  will-change: transform;
  pointer-events: none;
}

.link-process-grid article h2 {
  grid-column: 4 / 11;
  grid-row: 1;
  align-self: start;
  margin-top: clamp(0.5rem, 2vh, 2rem);
  font-size: clamp(3.8rem, 8vw, 8rem);
  line-height: 0.88;
}

.link-process-grid article > span {
  grid-column: 1 / 3;
  grid-row: 1;
  position: relative;
  width: fit-content;
  font-size: clamp(1rem, 1.25vw, 1.25rem);

  /* These two lines ensure the text and line align perfectly */
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.link-process-grid article > span::after {
  content: "";
  position: absolute;
  left: calc(100% + 0.65rem);
  /* top and translate work together for a perfect horizontal strike */
  top: 50%;
  width: clamp(1.8rem, 3vw, 3.6rem);
  height: 1px;
  background-color: #000000;
  transform: translate3d(0, -50%, 0) scaleX(var(--process-index-scale, 0));
  transform-origin: left;
}

.link-process-grid article p {
  grid-column: 8 / -1;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  display: grid;
  gap: 0.18em;
  max-width: 38rem;
  font-size: clamp(1.25rem, 1.8vw, 2.2rem);
  line-height: 1.02;
  text-align: right;
}

.link-process-grid article p .process-text-mask {
  justify-self: end;
}

.link-process-grid article:last-child {
  border-bottom: 1px solid #000000;
}

body:has(.link-page-hero-approach) .link-process-grid article:last-child {
  border-bottom-color: #000000;
}

.link-page-band {
  padding: clamp(5rem, 10vw, 9rem) 4rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 7vw, 6rem);
  background-color: #000000;
  color: #ffffff;
}

.link-page-band h2 {
  grid-column: 1 / 8;
}

.link-page-band p {
  grid-column: 8 / -1;
  align-self: end;
  max-width: 38rem;
  justify-self: end;
  text-align: right;
}

.link-about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.62fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}

.link-about-layout div {
  display: grid;
  gap: clamp(1.4rem, 3vh, 2.6rem);
}

.link-about-layout img {
  width: 100%;
  height: clamp(26rem, 62vh, 46rem);
  object-fit: cover;
  position: sticky;
  top: 6rem;
}

.link-values-grid {
  display: grid;
  gap: 0;
  padding-top: 0;
}

.link-values-grid p {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid #000000;
}

.link-values-grid p:last-child {
  border-bottom: 1px solid #000000;
}

.link-contact-page {
  background-color: #745F53;
  color: #ffffff;
}

.link-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 0.9fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}

.link-contact-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.link-contact-details p,
.link-contact-form {
  margin: 0;
  display: grid;
  gap: 0.7rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
}

.link-contact-details span,
.link-contact-form span {
  text-transform: uppercase;
  font-size: 0.82rem;
}

.link-contact-details a {
  width: fit-content;
  color: #ffffff;
  text-decoration: none;
}

.link-contact-form {
  gap: 1.2rem;
}

.link-contact-form label {
  display: grid;
  gap: 0.55rem;
}

.link-contact-form input,
.link-contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #ffffff;
  padding: 0.6rem 0 0.8rem;
  background: transparent;
  color: #ffffff;
  font: inherit;
  outline: none;
}

.link-contact-form input:-webkit-autofill,
.link-contact-form input:-webkit-autofill:hover,
.link-contact-form input:-webkit-autofill:focus,
.link-contact-form textarea:-webkit-autofill,
.link-contact-form textarea:-webkit-autofill:hover,
.link-contact-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  box-shadow: 0 0 0 1000px transparent inset;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

.link-contact-form button {
  justify-self: start;
  min-height: 3.2rem;
  padding: 0 1.35rem;
  border: 1px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
}

/* Premium Contact page */
body:has(.contact-premium-page),
body:has(.contact-premium-page) .link-page-main,
body:has(.contact-premium-page) .link-page-card,
body:has(.contact-premium-page) .link-page-hero-contact {
  background-color: #2c2416;
  color: #f0ebd8;
}

.contact-premium-page {
  --contact-tone: #745F53;
  --contact-cream: #f0ebd8;
  --contact-ink: #18110e;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(24, 17, 14, 0.54), rgba(24, 17, 14, 0.22) 28%, rgba(24, 17, 14, 0.12) 68%, rgba(24, 17, 14, 0.5)),
    url("webp-output/contact_background_img.webp") center / cover no-repeat;
}

.contact-premium-page::before,
.contact-premium-page::after {
  display: none;
}

.contact-premium-page::before {
  left: -18vw;
  top: 26vh;
  width: 54vw;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(240, 235, 216, 0.22), rgba(240, 235, 216, 0) 68%);
  animation: contactGlowDrift 12s ease-in-out infinite alternate;
}

.contact-premium-page::after {
  right: -22vw;
  bottom: 8vh;
  width: 62vw;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(1, 22, 30, 0.24), rgba(1, 22, 30, 0) 66%);
  animation: contactGlowDrift 14s ease-in-out infinite alternate-reverse;
}

.contact-premium-page > * {
  position: relative;
  z-index: 1;
}

.contact-premium-hero {
  min-height: 82svh;
  overflow: hidden;
}

.contact-premium-hero::before {
  display: none;
}

.contact-premium-hero .link-page-title {
  color: #f0ebd8;
}

.contact-premium-hero .link-page-intro {
  color: rgba(240, 235, 216, 0.78);
}

.contact-background-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.contact-background-lines span {
  position: absolute;
  border: 1px solid rgba(240, 235, 216, 0.18);
  border-radius: 50%;
  transform: rotate(-12deg);
  mix-blend-mode: soft-light;
  animation: contactLineFloat 9s ease-in-out infinite alternate;
}

.contact-background-lines span:nth-child(1) {
  right: 9vw;
  top: 18vh;
  width: clamp(13rem, 32vw, 34rem);
  aspect-ratio: 1 / 0.62;
  background-color: rgba(240, 235, 216, 0.34);
}

.contact-background-lines span:nth-child(2) {
  left: 8vw;
  bottom: 10vh;
  width: clamp(10rem, 25vw, 26rem);
  aspect-ratio: 1;
  background-color: rgba(1, 22, 30, 0.28);
  animation-delay: -2s;
}

.contact-background-lines span:nth-child(3) {
  right: 32vw;
  bottom: 18vh;
  width: clamp(5rem, 11vw, 12rem);
  aspect-ratio: 1;
  background-color: rgba(119, 141, 169, 0.36);
  animation-delay: -4s;
}

.contact-premium-layout {
  grid-template-columns: minmax(14rem, 0.42fr) minmax(22rem, 0.58fr);
  position: relative;
  z-index: 1;
  width: min(58vw, 62rem);
  margin: 0 auto;
  min-height: 100svh;
  align-content: center;
  padding: clamp(6rem, 10vh, 8rem) 0 clamp(3rem, 6vh, 4rem);
  background: transparent;
}

.contact-premium-layout::before {
  display: none;
}

.contact-premium-layout .link-contact-details {
  align-self: start;
}

.contact-premium-layout .link-contact-details p {
  padding-top: 1rem;
  border-top: 1px solid rgba(240, 235, 216, 0.34);
}

.contact-premium-layout .link-contact-details span,
.contact-premium-layout .link-contact-form label span {
  color: rgba(240, 235, 216, 0.58);
  letter-spacing: 0.08em;
}

.contact-soft-link {
  --contact-link-line-scale: 0;
  position: relative;
  color: #f0ebd8;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: calc(var(--contact-link-line-scale) * 100%) 1px;
  transition: color 0.25s ease, background-size 0.25s ease;
}

.contact-soft-link::after {
  content: none;
}

.contact-soft-link:hover,
.contact-soft-link:focus-visible {
  --contact-link-line-scale: 1;
  color: #ffffff;
}

.contact-premium-layout .link-contact-form {
  gap: clamp(1.4rem, 2.4vw, 2.2rem);
}

.contact-premium-layout .link-contact-form label {
  position: relative;
}

.contact-premium-layout .link-contact-form input,
.contact-premium-layout .link-contact-form textarea {
  border-bottom-color: #ffffff;
  color: #ffffff;
  transition: border-color 0.25s ease;
}

.contact-premium-layout .link-contact-form input:focus,
.contact-premium-layout .link-contact-form textarea:focus {
  border-bottom-color: #ffffff;
}

.contact-premium-layout .link-contact-form input:-webkit-autofill,
.contact-premium-layout .link-contact-form input:-webkit-autofill:hover,
.contact-premium-layout .link-contact-form input:-webkit-autofill:focus,
.contact-premium-layout .link-contact-form textarea:-webkit-autofill,
.contact-premium-layout .link-contact-form textarea:-webkit-autofill:hover,
.contact-premium-layout .link-contact-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  box-shadow: 0 0 0 1000px transparent inset;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-out, color 9999s ease-out;
}

.contact-premium-layout .link-contact-form button {
  position: relative;
  min-height: 3.8rem;
  padding: 0 1.35rem;
  overflow: hidden;
  color: #ffffff;
  border-color: #ffffff;
  transition: color 0.25s ease;
}

.contact-premium-layout .link-contact-form button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #ffffff;
  transform: translate3d(0, 101%, 0);
  transition: transform 0.18s cubic-bezier(0.87, 0, 0.13, 1);
}

.contact-premium-layout .link-contact-form button span {
  position: relative;
  z-index: 1;
}

.contact-premium-layout .link-contact-form button:hover,
.contact-premium-layout .link-contact-form button:focus-visible {
  color: #000000;
  border-color: #ffffff;
}

.contact-premium-layout .link-contact-form button:hover span,
.contact-premium-layout .link-contact-form button:focus-visible span {
  color: #000000;
}

.contact-premium-layout .link-contact-form button:hover::before,
.contact-premium-layout .link-contact-form button:focus-visible::before {
  transform: translate3d(0, 0, 0);
}

@keyframes contactGlowDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(3vw, -2vh, 0) scale(1.08);
  }
}

@keyframes contactLineFloat {
  from {
    transform: translate3d(0, 0, 0) rotate(-12deg);
  }

  to {
    transform: translate3d(1.2rem, -1rem, 0) rotate(-7deg);
  }
}

.link-page-footer {
  min-height: 54vh;
  padding: 4rem;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3rem;
  background-color: #f0ebd8;
  color: #000000;
}

.link-page-footer p {
  align-self: end;
  margin: 0;
  font-family: 'Retro Qesmo', sans-serif;
  font-size: clamp(5rem, 20vw, 22rem);
  line-height: 0.76;
  text-align: center;
}

.link-page-footer nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid #000000;
  padding-top: 1rem;
}

.link-page-footer button {
  color: #000000;
}

@media (max-width: 900px) {
  .contact-standalone-page .contact-card {
    --contact-card-padding: clamp(5.75rem, 10vh, 7rem) clamp(2rem, 7vw, 4rem) clamp(2.5rem, 6vh, 4rem);
    background-position: center;
  }

  .contact-standalone-page .contact-section-inner {
    grid-template-columns: 1fr;
  }

  .contact-standalone-page .contact-section-statement,
  .contact-standalone-page .contact-section-form {
    max-width: min(100%, 42rem);
    width: min(100%, 42rem);
  }

  .contact-premium-page {
    background-position: center;
  }

  .link-page-hero,
  .link-page-band,
  .link-about-layout,
  .link-contact-layout {
    grid-template-columns: 1fr;
  }

  .link-project-row {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .link-project-row p,
  .link-project-row img {
    grid-column: 2;
  }

  .link-project-service {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .link-project-service h2 {
    position: static;
  }

  .link-project-cursor-preview {
    display: none;
  }

  .link-process-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .link-process-grid article {
    grid-column: 1;
    grid-row: auto;
    min-height: 18rem;
    grid-template-columns: 1fr;
    padding: clamp(3rem, 8vw, 5rem) 4rem;
    border-left: 0;
    border-top: 1px solid #000000;
  }

  .link-process-grid article > span,
  .link-process-grid article h2,
  .link-process-grid article p {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .link-process-grid article h2 {
    font-size: clamp(3.2rem, 13vw, 6rem);
  }

  .link-process-grid article p {
    font-size: clamp(1.2rem, 4.8vw, 2rem);
    line-height: 1.04;
  }

  .link-process-grid article:last-child {
    border-right: 0;
    border-bottom: 1px solid #000000;
  }

  .link-page-hero-approach > div,
  .link-page-hero-approach .link-page-hero-copy,
  .approach-hero-rule,
  .link-page-band h2,
  .link-page-band p {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }

  .link-page-hero-approach .link-page-cta {
    justify-self: start;
  }

  .contact-premium-layout {
    width: min(78vw, 46rem);
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 4rem);
  }

  .contact-premium-layout::before {
    left: 4rem;
    right: 4rem;
  }
}

@media (max-width: 600px) {
  .contact-standalone-page .contact-card {
    --contact-card-padding: 5.8rem var(--phone-pad) 2rem;
    height: auto;
    min-height: 100svh;
    background-position: 42% center;
  }

  .contact-standalone-page .contact-section-inner {
    min-height: calc(100svh - 7.8rem);
  }

  .contact-premium-page {
    background-position: 48% center;
  }

  .contact-premium-layout {
    width: auto;
    margin: 0;
    padding: 6.5rem var(--phone-pad) 3rem;
  }

  .link-page-hero,
  .link-page-section,
  .link-page-band,
  .link-page-footer {
    padding-left: var(--phone-pad);
    padding-right: var(--phone-pad);
  }

  .link-contact-details,
  .link-page-footer nav {
    display: grid;
  }

  .contact-premium-layout::before {
    left: var(--phone-pad);
    right: var(--phone-pad);
  }

  .contact-premium-layout .link-contact-form input:focus,
  .contact-premium-layout .link-contact-form textarea:focus,
  .contact-soft-link:hover,
  .contact-soft-link:focus-visible {
    transform: none;
  }
}

/* Premium About page */
body:has(.about-premium-page),
body:has(.about-premium-page) .link-page-main,
body:has(.about-premium-page) .link-page-card {
  background-color: #4b3d24;
}

.about-premium-page {
  --about-pad: clamp(1.25rem, 4vw, 4rem);
  --about-ink: #080807;
  --about-muted: rgba(8, 8, 7, 0.62);
  --about-cream: #f0ebd8;
  overflow: hidden;
}

.about-premium-hero {
  min-height: 118svh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(8rem, 1fr) auto;
  align-items: start;
  align-content: stretch;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(8rem, 15vh, 11rem) var(--about-pad) clamp(2rem, 5vw, 4rem);
  isolation: isolate;
}

.about-premium-hero::before {
  background-image: none;
  opacity: 0;
}

.about-hero-copy {
  grid-column: 1 / 10;
  grid-row: 1;
}

.about-premium-hero .link-page-title {
  max-width: 11ch;
  font-size: clamp(4rem, 12.4vw, 13.5rem);
  line-height: 0.84;
  letter-spacing: 0;
}

.about-premium-hero .link-page-intro {
  grid-column: 7 / -1;
  grid-row: 3;
  justify-self: end;
  max-width: 42rem;
  text-align: right;
}

.about-hero-meta {
  grid-column: 1 / 6;
  grid-row: 3;
  align-self: end;
  display: grid;
  gap: 0.85rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.05;
}

.about-hero-meta p {
  margin: 0;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(8, 8, 7, 0.45);
}

.about-hero-meta span {
  font-family: 'CabinetGrotesk-bold', sans-serif;
}

.about-story-section,
.about-team-section,
.about-services-deep,
.about-proof-section,
.about-testimonial-section,
.about-philosophy-section {
  position: relative;
  padding: clamp(5rem, 11vw, 11rem) var(--about-pad);
  color: var(--about-ink);
}

.about-section-label {
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(8, 8, 7, 0.56);
}

.about-story-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  background-color: #f0ebd8;
  border-top-left-radius: clamp(2rem, 7vw, 6rem);
}

.about-story-section .about-section-label {
  grid-column: 1 / 3;
  position: sticky;
  top: 7.5rem;
  align-self: start;
}

.about-story-copy {
  grid-column: 4 / -1;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
}

.about-story-copy h2,
.about-team-intro h2,
.about-service-panel h2 {
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-weight: 300;
  letter-spacing: 0;
}

.about-story-copy h2 {
  max-width: 12ch;
  font-size: clamp(3.5rem, 8.5vw, 9rem);
  line-height: 0.86;
}

.about-story-copy p {
  max-width: 48rem;
  margin: 0 0 0 auto;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.25rem, 2.1vw, 2.35rem);
  line-height: 1.04;
}

.about-timeline {
  grid-column: 4 / -1;
  display: grid;
  margin-top: clamp(3rem, 7vw, 7rem);
}

.about-timeline-item {
  display: grid;
  grid-template-columns: minmax(6rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 5rem);
  padding: clamp(1.1rem, 2.4vw, 2rem) 0;
  border-top: 1px solid #000000;
}

.about-timeline-item:last-child {
  border-bottom: 1px solid #000000;
}

.about-timeline-item span {
  font-family: 'CabinetGrotesk-bold', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.65rem);
}

.about-timeline-item p {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 2.8rem);
  line-height: 1;
}

.about-philosophy-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 7rem);
  min-height: 96svh;
  align-items: center;
  background-color: #01161e;
  color: #f0ebd8;
  border-bottom-right-radius: clamp(2rem, 7vw, 6rem);
}

.about-large-statement {
  grid-column: 1 / 9;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3rem, 7.4vw, 9.6rem);
  line-height: 0.9;
}

.about-philosophy-notes {
  grid-column: 9 / -1;
  align-self: end;
  display: grid;
  gap: 1.25rem;
}

.about-philosophy-notes p,
.about-team-member p,
.about-service-panel p,
.about-service-panel li,
.about-proof-grid p,
.about-testimonial-section p {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  line-height: 1.15;
}

.about-philosophy-notes p {
  color: rgba(240, 235, 216, 0.72);
  font-size: clamp(1rem, 1.35vw, 1.3rem);
}

.about-team-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  background-color: #96887a;
}

.about-team-section .about-section-label {
  grid-column: 1 / 3;
}

.about-team-intro {
  grid-column: 4 / -1;
}

.about-team-intro h2 {
  max-width: 15ch;
  font-size: clamp(3rem, 7vw, 7.8rem);
  line-height: 0.88;
}

.about-team-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(3rem, 7vw, 7rem);
}

.about-team-member {
  position: relative;
  display: grid;
  gap: 1.25rem;
  min-height: clamp(28rem, 54vw, 46rem);
  align-content: end;
  padding: clamp(1rem, 2vw, 1.6rem);
  overflow: hidden;
  border-radius: 999px 999px clamp(1.2rem, 3vw, 3rem) clamp(1.2rem, 3vw, 3rem);
  color: #f0ebd8;
  isolation: isolate;
  will-change: transform;
}

.about-team-member::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.05) 62%);
}

.about-team-member img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.04);
  transform: scale(1.06);
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.about-team-member:hover img,
.about-team-member:focus-within img {
  transform: scale(1.13);
  filter: grayscale(0) contrast(1.08);
}

.about-team-member span,
.about-service-panel > span {
  display: block;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 0.78rem;
  line-height: 1;
  text-transform: uppercase;
}

.about-team-member h3 {
  margin: 0.45rem 0 0.55rem;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 0.9;
}

.about-team-member p {
  max-width: 19rem;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  color: rgba(240, 235, 216, 0.78);
}

.about-services-deep {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  background-color: #f0ebd8;
}

.about-services-deep .about-section-label {
  position: sticky;
  top: 7.5rem;
  z-index: 5;
  width: fit-content;
}

.about-service-panel {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(2rem, 2vw, 2rem);
  align-content: stretch;
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(2rem, 5vw, 4rem);
  border-top: 1px solid rgba(8, 8, 7, 0.7);
  background-color: #f0ebd8;
  overflow: hidden;
}

.about-service-panel::before {
  content: "";
  position: absolute;
  right: -14vw;
  top: 14vh;
  width: clamp(16rem, 42vw, 44rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--service-tone), transparent 70%);
  transform: scale(var(--service-orb-scale, 0.82));
  pointer-events: none;
}

.about-service-panel > span {
  grid-column: 1 / 4;
  position: relative;
  z-index: 1;
}

.about-service-panel h2 {
  grid-column: 4 / -1;
  position: relative;
  z-index: 1;
  max-width: 12ch;
  font-size: clamp(3.5rem, 8vw, 9.2rem);
  line-height: 0.82;
}

.about-service-panel p {
  grid-column: 4 / 9;
  grid-row: 3;
  position: relative;
  z-index: 1;
  font-size: clamp(1.18rem, 1.7vw, 1.9rem);
}

.about-service-panel ul {
  grid-column: 9 / -1;
  grid-row: 3;
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-service-panel li {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(8, 8, 7, 0.45);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
}

.about-case-preview {
  grid-column: 1 / 4;
  grid-row: 3;
  position: relative;
  z-index: 1;
  align-self: end;
  width: min(100%, 19rem);
  min-height: 12rem;
  display: flex;
  align-items: end;
  padding: 1rem;
  border-radius: 50% 50% 1.2rem 1.2rem;
  background-color: var(--service-tone);
  color: #ffffff;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.08;
}

.about-proof-section {
  background-color: #124559;
  color: #f0ebd8;
  overflow: hidden;
}

.about-proof-marquee {
  display: flex;
  width: max-content;
  font-family: 'CabinetGrotesk-Medium';
  font-size: clamp(5rem, 15vw, 15rem);
  line-height: 0.8;
  white-space: nowrap;
  color: #f0ebd8; 
}

.about-proof-marquee span {
  padding-right: 0.18em;
}

.about-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(3rem, 7vw, 7rem);
}

.about-proof-grid p {
  display: grid;
  gap: clamp(1rem, 2vw, 1.8rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(240, 235, 216, 0.58);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
}

.about-proof-grid span {
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(4rem, 9vw, 9rem);
  line-height: 0.78;
}

.about-testimonial-section {
  min-height: 90svh;
  display: grid;
  align-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background-color: #96887a;
}

.about-testimonial-section blockquote {
  max-width: 14ch;
  margin: 0;
  font-family: 'CabinetGrotesk-light', sans-serif;
  font-size: clamp(3.4rem, 8.4vw, 9rem);
  line-height: 0.86;
}

.about-testimonial-section p {
  max-width: 24rem;
  margin-left: auto;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
}

.about-contact-cta {
  justify-self: end;
  margin-top: clamp(1rem, 2vw, 2rem);
}

.about-premium-reveal {
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  .about-premium-hero,
  .about-story-section,
  .about-philosophy-section,
  .about-team-section,
  .about-service-panel {
    grid-template-columns: 1fr;
  }

  .about-hero-copy,
  .about-premium-hero .link-page-intro,
  .about-hero-meta,
  .about-story-section .about-section-label,
  .about-story-copy,
  .about-timeline,
  .about-large-statement,
  .about-philosophy-notes,
  .about-team-section .about-section-label,
  .about-team-intro,
  .about-service-panel > span,
  .about-service-panel h2,
  .about-service-panel p,
  .about-service-panel ul,
  .about-case-preview {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about-premium-hero {
    min-height: 100svh;
  }

  .about-premium-hero .link-page-intro {
    justify-self: start;
    text-align: left;
  }

  .about-hero-meta {
    width: 100%;
  }

  .about-story-section .about-section-label,
  .about-services-deep .about-section-label {
    position: static;
  }

  .about-story-copy p {
    margin-left: 0;
  }

  .about-contact-cta {
    justify-self: start;
  }

  .about-team-list,
  .about-proof-grid {
    grid-template-columns: 1fr;
  }

  .about-team-member {
    min-height: 34rem;
  }

  .about-service-panel {
    position: relative;
    min-height: auto;
    padding: clamp(4rem, 14vw, 6rem) 0;
  }

  .about-case-preview {
    min-height: 9rem;
    border-radius: 1.2rem;
  }
}

@media (max-width: 600px) {
  .about-premium-page {
    --about-pad: var(--phone-pad);
  }

  .about-premium-hero .link-page-title,
  .about-story-copy h2,
  .about-team-intro h2,
  .about-service-panel h2,
  .about-testimonial-section blockquote {
    font-size: clamp(3.3rem, 18vw, 5.5rem);
  }

  .about-timeline-item {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* About story reference page */
body:has(.about-story-page),
body:has(.about-story-page) .link-page-main,
body:has(.about-story-page) .link-page-card {
  background-color: #e5d7c6;
  color: #050505;
}

body:has(.about-story-page) .link-page-main {
  min-height: 100svh;
  padding-bottom: 86vh;
  overflow-x: hidden;
  overflow-y: auto;
}

body:has(.about-story-page) .navbar {
  padding: 2rem clamp(2rem, 3.1vw, 3.35rem);
}

body:has(.about-story-page) .logo-button {
  font-family: 'Retro Qesmo', Georgia, serif;
  font-size: clamp(1.45rem, 1.7vw, 1.85rem);
  line-height: 1;
}

body:has(.about-story-page) .menu-button {
  width: 52px;
  height: 52px;
  background-color: #ffffff;
  box-shadow: none;
}

body:has(.about-story-page) .menu-icon {
  width: 28px;
  height: 28px;
}

.about-story-page {
  min-height: 100svh;
  overflow: visible;
}

.about-story-page .char {
  transform: none;
}

.about-page-hero {
  --about-page-bg-y: 0px;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(30rem, 0.95fr) minmax(24rem, 0.62fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: end;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding: clamp(8rem, 14vh, 10.5rem) clamp(2rem, 3.1vw, 3.35rem) clamp(2.4rem, 4.2vh, 3rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: url("webp-output/about_hero_background_img.webp");
  background-position: center calc(50% + var(--about-page-bg-y));
  background-size: cover;
  background-repeat: no-repeat;
  color: #f7f0df;
}

.about-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 20% 92%, rgba(0, 0, 0, 0.28), transparent 34%);
  pointer-events: none;
}

.about-page-hero-copy {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: clamp(1.2rem, 2.4vh, 1.8rem);
  position: relative;
  z-index: 1;
  transform: translateY(clamp(-4.5rem, -7vh, -2.25rem));
}

.about-page-kicker {
  margin: 0;
  font-family: 'CabinetGrotesk-light', 'Neue', sans-serif;
  font-size: clamp(4.8rem, 9.6vw, 10.8rem);
  line-height: 0.86;
  letter-spacing: 0;
  color: #f7f0df;
  display: grid;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
  width: 100%;
  max-width: none;
}

.about-page-kicker-word {
  display: block;
  overflow: visible;
}

.about-page-kicker-word .line {
  overflow: hidden;
}

.about-page-kicker-word .line-mask {
  overflow: visible;
}

.about-page-kicker-word-blueprint {
  justify-self: stretch;
  padding-right: clamp(1rem, 4vw, 4.5rem);
  text-align: right;
}

.about-hero-rule {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(247, 240, 223, 0.72);
  transform: scaleX(0);
  transform-origin: center;
  will-change: transform;
}

.about-page-title {
  max-width: 24ch;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: rgba(247, 240, 223, 0.82);
}

.about-page-title .line {
  overflow: hidden;
  padding-top: 0.08em;
  padding-bottom: 0.18em;
  margin-top: -0.08em;
  margin-bottom: -0.18em;
}

.about-page-hero-aside {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: grid;
  gap: clamp(1.2rem, 2.5vh, 1.8rem);
  max-width: 34rem;
  position: relative;
  z-index: 1;
}

.about-page-intro {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.15rem, 1.65vw, 1.8rem);
  line-height: 1.18;
  color: #fff9ea;
}

.about-page-rule {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(247, 240, 223, 0.78);
  transform-origin: left center;
}

.about-page-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.about-page-meta p {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(247, 240, 223, 0.34);
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(247, 240, 223, 0.76);
}

.about-story-hero {
  height: 100svh;
  max-height: 100svh;
  display: grid;
  grid-template-columns: clamp(26rem, 31vw, 40rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(3rem, 5vw, 5.5rem);
  padding: clamp(2.6rem, 4.4vh, 3.8rem) clamp(2rem, 4vw, 3.4rem);
  background-color: #e5d7c6;
  overflow: hidden;
}

.about-story-content {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-height: 100%;
}

.about-story-note {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(5, 5, 5, 0.64);
}

.about-story-title {
  margin: 0;
  align-self: start;
  font-family: 'CabinetGrotesk-light', 'Neue', sans-serif;
  font-size: clamp(4.6rem, 7.8vw, 7rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: 0;
  color: #050505;
  overflow: visible;
}

.about-story-title .line {
  overflow: hidden;
  padding-top: 0.12em;
  padding-bottom: 0.16em;
  margin-top: -0.12em;
  margin-bottom: -0.16em;
}

.about-story-divider {
  display: none;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  transform-origin: left;
}

.about-story-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: end;
  align-content: end;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  gap: clamp(0.85rem, 1.5vh, 1.2rem);
  margin: 0;
}

.about-story-body p {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  width: 100%;
  max-width: none;
  font-size: clamp(0.78rem, 0.82vw, 0.92rem);
  line-height: 1.32;
  letter-spacing: 0;
  color: #050505;
}

.about-story-body .line,
.about-story-body .line-mask {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

.about-story-image-frame {
  position: relative;
  display: block;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  margin: 0;
  min-height: 0;
  overflow: hidden;
  background-color: transparent;
}

.about-story-image-frame img {
  --about-frame-image-y: 0px;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 112%;
  margin-top: -6%;
  object-fit: cover;
  object-position: center;
  transform: translateY(var(--about-frame-image-y));
  will-change: transform;
}

.about-story-note {
  justify-self: end;
  margin-top: 0;
  letter-spacing: 0.28em;
  font-size: clamp(0.7rem, 0.86vw, 0.86rem);
}

.about-services-showcase {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(28rem, 0.78fr) minmax(26rem, 0.66fr);
  align-items: end;
  gap: clamp(2.1rem, 3.2vw, 3.6rem);
  padding: clamp(1.6rem, 2.8vh, 2.4rem) clamp(2rem, 3.1vw, 3.35rem) clamp(2.2rem, 4.2vh, 2.8rem);
  background-image: url("./background_img/webp-output/about_link_img_3.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.about-services-intro {
  display: grid;
  align-content: start;
  gap: clamp(2rem, 4vh, 3rem);
  align-self: start;
  padding-top: clamp(3rem, 8vh, 5.5rem);
}

.about-services-intro h2 {
  margin: 0 0 clamp(1.45rem, 2.8vh, 2rem);
  font-family: 'CabinetGrotesk-light', 'Neue', sans-serif;
  font-size: clamp(5rem, 8.4vw, 7.6rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0;
  color: #050505;
}

.about-services-intro p {
  max-width: 39rem;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.5rem, 2vw, 2.15rem);
  line-height: 1.28;
  color: #151515;
}

.about-services-list {
  display: grid;
  align-self: end;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  height: min(50vh, 30rem);
  min-height: 20rem;
}

.about-services-list article {
  --about-line-scale: 0%;
  --about-service-hover-color: #000000;
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(0.8rem, 1.5vw, 1.2rem);
  row-gap: 0.35rem;
  align-items: start;
  padding: clamp(0.85rem, 1.45vh, 1.15rem) 0;
  color: #111111;
  overflow: hidden;
  transition: color 0.3s ease;
}

.about-services-list article::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #000000;
  transform-origin: left center;
  transform: scaleX(var(--about-line-scale));
  will-change: transform;
}

.about-services-list article::before {
  content: "";
  position: absolute;
  inset: 0 0 1px;
  z-index: 1;
  background-color: var(--about-service-hover-color);
  transform: translate3d(0, 101%, 0);
  transition: transform 0.16s cubic-bezier(0.87, 0, 0.13, 1);
}

.about-services-list article:hover,
.about-services-list article:focus-within {
  color: #ffffff;
}

.about-services-list article:hover::before,
.about-services-list article:focus-within::before {
  transform: translate3d(0, 0, 0);
}

.about-services-list .about-service-web {
  --about-service-hover-color: #2c2416;
}

.about-services-list .about-service-branding {
  --about-service-hover-color: #4b3d24;
}

.about-services-list .about-service-marketing {
  --about-service-hover-color: #775f3f;
}

.about-services-list .about-service-architecture {
  --about-service-hover-color: #947550;
}

.about-services-list article + article {
  padding-left: 0;
  border-left: 0;
}

.about-services-list span {
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.86rem, 1vw, 1.02rem);
  line-height: 1;
  color: rgba(5, 5, 5, 0.68);
}

.about-service-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(5rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 0 1rem 0 0;
  color: #050505;
  font-family: 'CabinetGrotesk-light', 'Neue', sans-serif;
  font-size: clamp(1.55rem, 1.9vw, 2.15rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.about-service-link::after {
  content: attr(data-index);
  grid-column: 2;
  justify-self: end;
  position: relative;
  z-index: 2;
  color: rgba(1, 22, 30, 0.62);
  font-size: 0.56em;
  line-height: 1;
  transition: color 0.3s ease;
}

.about-service-link > span,
.about-service-link > .line {
  grid-column: 1;
  justify-self: start;
  text-align: left;
  position: relative;
  z-index: 2;
}

.about-service-link .line {
  text-align: left;
}

.about-service-link:hover,
.about-service-link:focus-visible,
.about-services-list article:hover .about-service-link,
.about-services-list article:focus-within .about-service-link {
  color: #ffffff;
}

.about-service-link:hover::after,
.about-service-link:focus-visible::after,
.about-services-list article:hover .about-service-link::after,
.about-services-list article:focus-within .about-service-link::after {
  color: rgba(255, 255, 255, 0.68);
}

.about-services-list p {
  grid-column: 1;
  grid-row: 2;
  max-width: 26rem;
  position: relative;
  z-index: 2;
  margin: 0;
  padding-right: 1rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.82rem, 0.88vw, 0.94rem);
  line-height: 1.22;
  color: rgba(5, 5, 5, 0.72);
  transition: color 0.3s ease;
}

.about-services-list article:hover p,
.about-services-list article:focus-within p {
  color: rgba(255, 255, 255, 0.78);
}

.about-clients-showcase {
  display: grid;
  gap: clamp(1.7rem, 3vh, 2.6rem);
  min-height: 100svh;
  padding: clamp(6.8rem, 10vh, 8.2rem) clamp(2rem, 3.1vw, 3.35rem) clamp(2rem, 4vh, 3rem);
  background-color: #2c2416;
  background-image: url("./background_img/webp-output/about_link_img_4.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #f7f0df;
}

.about-clients-intro {
  display: grid;
  gap: clamp(1rem, 2vh, 1.45rem);
  max-width: 43rem;
}

.about-clients-eyebrow,
.about-clients-label {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.75rem, 0.92vw, 0.94rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(247, 240, 223, 0.62);
}

.about-clients-intro h2 {
  margin: 0;
  font-family: 'CabinetGrotesk-light', 'Neue', sans-serif;
  font-size: clamp(5.6rem, 9.2vw, 10rem);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: 0;
  color: #f7f0df;
}

.about-clients-copy {
  max-width: 38rem;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.3rem, 1.85vw, 2rem);
  line-height: 1.35;
  color: rgba(247, 240, 223, 0.82);
}

.about-clients-rule {
  height: 1px;
  width: 100%;
  background-color: rgba(247, 240, 223, 0.24);
}

.about-clients-marquee {
  overflow: hidden;
  padding: clamp(0.6rem, 1.4vh, 1rem) 0;
}

.about-clients-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.about-clients-track + .about-clients-track {
  margin-top: clamp(1.55rem, 3.4vh, 2.7rem);
}

.about-clients-track span {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 clamp(16rem, 18vw, 22rem);
  min-height: clamp(3.7rem, 7vh, 5.2rem);
  padding: 0 clamp(1.1rem, 2.1vw, 1.8rem);
  font-family: 'CabinetGrotesk-regular', serif;
  font-size: clamp(1.65rem, 2.5vw, 2.55rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: #f7f0df;
}

.about-clients-bottom {
  display: grid;
  grid-template-columns: minmax(18rem, 28rem) auto;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
  padding-top: clamp(0.8rem, 1.8vh, 1.25rem);
}

.about-clients-bottom p {
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.92rem, 1vw, 1.06rem);
  line-height: 1.35;
  color: rgba(247, 240, 223, 0.74);
}

.about-client-reasons-cta {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: end;
  border-color: #f7f0df;
  color: #f7f0df;
}

.about-client-reasons-cta::before {
  background-color: #f7f0df;
}

.about-client-reasons-cta:hover,
.about-client-reasons-cta:focus-visible {
  color: #050505;
}

.about-client-reasons {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.44fr);
  grid-template-rows: auto 1fr auto;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(7rem, 12vh, 9rem) clamp(2rem, 3.1vw, 3.35rem) clamp(4rem, 7vh, 5rem);
  background-color: #2c2416;
  background-image: url("./background_img/webp-output/about_link_img_1.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #f7f0df;
}

.about-client-reasons-heading {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  align-content: start;
  gap: clamp(1.2rem, 2.4vh, 1.8rem);
}

.about-client-reasons-heading h2 {
  max-width: 12ch;
  margin: 0;
  font-family: 'CabinetGrotesk-light', 'Neue', sans-serif;
  font-size: clamp(5.1rem, 8.2vw, 8rem);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: 0;
  color: #f7f0df;
}

.about-client-reasons-heading p {
  margin: 0 0 0.55rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.12rem, 1.35vw, 1.5rem);
  line-height: 1.34;
  color: rgba(247, 240, 223, 0.72);
}

.about-client-reasons-summary {
  grid-column: 1;
  grid-row: 2;
  max-width: 58rem;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1.5rem, 2.15vw, 2.4rem);
  line-height: 1.28;
  color: rgba(247, 240, 223, 0.72);
}

.about-team-showcase {
  min-height: 100svh;
  display: grid;
  align-content: start;
  gap: clamp(2.4rem, 4vh, 3rem);
  padding: clamp(7.2rem, 12vh, 9rem) clamp(2rem, 3.1vw, 3.35rem) clamp(3.5rem, 6vh, 4.5rem);
  background-color: #2c2416;
  background-image: url("./background_img/webp-output/about_link_img_5.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #f0ebd8;
}

.about-team-heading {
  width: min(100%, 79rem);
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(22rem, 0.94fr) minmax(26rem, 0.64fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
}

.about-team-heading h2 {
  margin: 0;
  font-family: 'CabinetGrotesk-light', 'Neue', sans-serif;
  font-size: clamp(5.1rem, 8.2vw, 8rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0;
  color: #f0ebd8;
}

.about-team-heading p {
  margin: 0;
  max-width: 34rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(1rem, 1.04vw, 1.08rem);
  line-height: 1.6;
  color: rgba(240, 235, 216, 0.78);
}

.about-team-grid {
  width: min(100%, 79rem);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(1.55rem, 2.45vw, 2.35rem);
  row-gap: clamp(1.75rem, 3.2vh, 2.4rem);
  align-items: start;
}

.about-team-category {
  --about-category-line-scale: 0%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.05rem;
  min-height: 1.2rem;
  font-family: 'CabinetGrotesk-bold', sans-serif;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0ebd8;
}

.about-team-category::after {
  content: "";
  height: 1px;
  background-color: rgba(240, 235, 216, 0.9);
  transform: scaleX(var(--about-category-line-scale));
  transform-origin: left center;
  will-change: transform;
}

.about-team-category-web {
  grid-column: 1 / 4;
  grid-row: 1;
}

.about-team-category-brand {
  grid-column: 4 / 5;
  grid-row: 1;
}

.about-team-category-marketing {
  grid-column: 1 / 2;
  grid-row: 3;
}

.about-team-category-architecture {
  grid-column: 2 / 5;
  grid-row: 3;
}

.about-team-card {
  position: relative;
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}

.about-team-card:nth-of-type(1) {
  grid-column: 1;
  grid-row: 2;
}

.about-team-card:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
}

.about-team-card:nth-of-type(3) {
  grid-column: 3;
  grid-row: 2;
}

.about-team-card:nth-of-type(4) {
  grid-column: 4;
  grid-row: 2;
}

.about-team-card:nth-of-type(5) {
  grid-column: 1;
  grid-row: 4;
}

.about-team-card:nth-of-type(6) {
  grid-column: 2;
  grid-row: 4;
}

.about-team-card:nth-of-type(7) {
  grid-column: 3;
  grid-row: 4;
}

.about-team-card:nth-of-type(8) {
  grid-column: 4;
  grid-row: 4;
}

.about-team-portrait {
  position: relative;
  z-index: 0;
  display: block;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background-color: transparent;
}

.about-team-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(240, 235, 216, 0.16), rgba(240, 235, 216, 0) 46%),
    linear-gradient(to top, rgba(5, 5, 5, 0.22), rgba(5, 5, 5, 0) 55%);
  opacity: 0;
  transition: opacity 0.55s ease;
}

.about-team-card img {
  --about-frame-image-y: 0px;
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 112%;
  margin-top: -6%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.28) contrast(1.02);
  transform: translateY(var(--about-frame-image-y));
  will-change: transform;
  transition:
    transform 0.75s cubic-bezier(0.19, 1, 0.22, 1),
    filter 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

.about-team-card:hover,
.about-team-card:focus-within {
  transform: translateY(-0.35rem);
}

.about-team-card:hover img,
.about-team-card:focus-within img {
  filter: grayscale(0) contrast(1.08) saturate(1.06);
  transform: translateY(var(--about-frame-image-y)) scale(1.055);
}

.about-team-card:hover .about-team-portrait::after,
.about-team-card:focus-within .about-team-portrait::after {
  opacity: 1;
}

.about-team-card > div {
  --about-team-card-line-scale: 0%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 0.45rem;
  min-height: 4.6rem;
  padding-bottom: 1.15rem;
}

.about-team-card > div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: rgba(240, 235, 216, 0.9);
  transform: scaleX(var(--about-team-card-line-scale));
  transform-origin: left center;
  will-change: transform;
}

.about-team-card h3 {
  grid-column: 1 / -1;
  margin: 0;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.98rem, 1.08vw, 1.12rem);
  font-weight: 400;
  line-height: 1.1;
  color: #f0ebd8;
}

.about-team-card p {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  margin: 0;
  padding-right: 0.75rem;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.84rem, 0.9vw, 0.94rem);
  line-height: 1.25;
  color: rgba(240, 235, 216, 0.78);
}

.about-team-card > div > span {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: #f0ebd8;
}

@media (max-width: 1000px) {
  body:has(.about-story-page) .link-page-main {
    overflow: visible;
  }

  .about-story-page {
    overflow: visible;
  }

  .about-page-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: end;
    min-height: 100svh;
    padding-top: 7.5rem;
    background-position: center;
  }

  .about-page-hero-copy,
  .about-page-hero-aside {
    grid-column: 1;
    grid-row: auto;
  }

  .about-page-hero-copy {
    transform: translateY(clamp(-2.75rem, -5vh, -1.5rem));
  }

  .about-page-kicker {
    width: 100%;
  }

  .about-page-title {
    max-width: 24ch;
    font-size: clamp(1.4rem, 4vw, 2.2rem);
  }

  .about-page-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-story-hero {
    grid-template-columns: clamp(16rem, 32vw, 24rem) minmax(0, 1fr);
    align-items: start;
    padding-top: 5.8rem;
  }

  .about-story-content {
    max-width: none;
  }

  .about-services-showcase {
    min-height: auto;
    grid-template-columns: 1fr;
    align-content: start;
  }

  .about-services-intro {
    grid-template-columns: 1fr;
  }

  .about-services-list {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .about-services-list article,
  .about-services-list article + article {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    border-left: 0;
  }

  .about-clients-showcase {
    min-height: auto;
    padding: 5rem clamp(2rem, 3.1vw, 3.35rem);
  }

  .about-clients-bottom {
    grid-template-columns: 1fr auto;
  }

  .about-client-reasons {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 2.4rem;
    padding: 5.5rem clamp(2rem, 3.1vw, 3.35rem) 4rem;
  }

  .about-client-reasons-heading {
    grid-column: auto;
    grid-row: auto;
    gap: 1.4rem;
  }

  .about-client-reasons-heading h2 {
    max-width: 12ch;
  }

  .about-client-reasons-heading p {
    max-width: 30rem;
  }

  .about-client-reasons-summary,
  .about-client-reasons-cta {
    grid-column: auto;
    grid-row: auto;
  }

  .about-team-heading {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .about-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .about-team-category,
  .about-team-category-web,
  .about-team-category-brand,
  .about-team-category-marketing,
  .about-team-category-architecture {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about-team-card,
  .about-team-card:nth-of-type(1),
  .about-team-card:nth-of-type(2),
  .about-team-card:nth-of-type(3),
  .about-team-card:nth-of-type(4),
  .about-team-card:nth-of-type(5),
  .about-team-card:nth-of-type(6),
  .about-team-card:nth-of-type(7),
  .about-team-card:nth-of-type(8) {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 600px) {
  body:has(.about-story-page) .navbar {
    padding: 1.4rem var(--phone-pad);
  }

  body:has(.about-story-page) .menu-button {
    width: 46px;
    height: 46px;
  }

  .about-page-hero {
    gap: 2rem;
    padding: 6.8rem var(--phone-pad) 2rem;
    background-position: 56% center;
  }

  .about-page-hero-copy {
    transform: translateY(-1.25rem);
  }

  .about-page-kicker {
    width: 100%;
  }

  .about-page-kicker-word-blueprint {
    padding-right: 0;
  }

  .about-page-title {
    font-size: clamp(1.25rem, 6vw, 1.65rem);
  }

  .about-page-intro {
    font-size: clamp(1.1rem, 5vw, 1.42rem);
    line-height: 1.22;
  }

  .about-page-meta {
    grid-template-columns: 1fr 1fr;
  }

  .about-story-hero {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    min-height: 100svh;
    padding: 5.4rem var(--phone-pad) 2rem;
  }

  .about-story-content,
  .about-story-image-frame {
    grid-column: 1;
  }

  .about-story-content {
    grid-row: 2;
    min-height: 32svh;
  }

  .about-story-image-frame {
    grid-row: 1;
    min-height: 46svh;
  }

  .about-story-title {
    margin: 0;
    font-size: clamp(4rem, 20vw, 5.75rem);
  }

  .about-story-body {
    grid-template-columns: 1fr;
    margin: 0;
  }

  .about-story-body p {
    font-size: clamp(0.86rem, 3.6vw, 1rem);
    line-height: 1.34;
  }

  .about-story-note {
    letter-spacing: 0.16em;
    line-height: 1.35;
  }

  .about-services-showcase {
    gap: 2rem;
    padding: 4.5rem var(--phone-pad) 2rem;
  }

  .about-services-intro h2 {
    font-size: clamp(4rem, 18vw, 5.4rem);
  }

  .about-services-intro p {
    font-size: clamp(1.16rem, 5.4vw, 1.45rem);
  }

  .about-clients-showcase {
    gap: 1.6rem;
    padding: 4.6rem var(--phone-pad);
  }

  .about-clients-intro h2 {
    font-size: clamp(4.5rem, 22vw, 6.2rem);
  }

  .about-clients-copy {
    font-size: clamp(1.18rem, 5.2vw, 1.5rem);
  }

  .about-clients-marquee {
    padding: 0.5rem 0 0.8rem;
  }

  .about-clients-track + .about-clients-track {
    margin-top: 1.1rem;
  }

  .about-clients-track span {
    flex-basis: clamp(11rem, 54vw, 16rem);
    min-height: 3.9rem;
    font-size: clamp(1.35rem, 7vw, 2.1rem);
    letter-spacing: 0.28em;
  }

  .about-clients-bottom {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-client-reasons {
    gap: 2rem;
    padding: 4.8rem var(--phone-pad) 3.4rem;
  }

  .about-client-reasons-heading h2 {
    font-size: clamp(4.1rem, 18vw, 5.6rem);
  }

  .about-client-reasons-summary {
    font-size: clamp(1.25rem, 6vw, 1.7rem);
  }

  .about-team-showcase {
    gap: 2rem;
    padding: 5.6rem var(--phone-pad) 2.8rem;
  }

  .about-team-heading h2 {
    font-size: clamp(4.1rem, 18vw, 5.6rem);
  }

  .about-team-grid {
    grid-template-columns: 1fr;
  }
}

/* Phone-only responsive safety layer. Desktop and laptop rules above stay untouched. */
@media (max-width: 767px) {
  :root {
    --phone-pad: clamp(1rem, 4.8vw, 1.35rem);
    --phone-section-gap: clamp(2rem, 8vw, 3rem);
  }

  .contact-thank-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 14000 !important;
    padding: calc(env(safe-area-inset-top) + var(--phone-pad)) var(--phone-pad) calc(env(safe-area-inset-bottom) + var(--phone-pad)) !important;
    place-items: center !important;
  }

  .contact-thank-modal-panel {
    width: 100% !important;
    min-height: min(72svh, 34rem) !important;
    max-height: calc(100svh - (var(--phone-pad) * 2)) !important;
    grid-template-rows: auto minmax(8rem, 1fr) auto auto !important;
    gap: clamp(1rem, 3.4svh, 1.55rem) !important;
    padding: clamp(1.1rem, 5vw, 1.45rem) !important;
    overflow: hidden !important;
  }

  .contact-thank-modal-panel::before {
    left: clamp(1.1rem, 5vw, 1.45rem) !important;
    right: clamp(1.1rem, 5vw, 1.45rem) !important;
    top: clamp(3rem, 9svh, 4.25rem) !important;
  }

  .contact-thank-modal-panel::after {
    left: clamp(1.1rem, 5vw, 1.45rem) !important;
    right: clamp(1.1rem, 5vw, 1.45rem) !important;
    bottom: clamp(5rem, 12svh, 6.2rem) !important;
  }

  .contact-thank-kicker {
    font-size: clamp(0.58rem, 2.4vw, 0.72rem) !important;
  }

  .contact-thank-modal h2 {
    font-size: clamp(4rem, 21vw, 6.4rem) !important;
    line-height: 0.78 !important;
  }

  .contact-thank-modal p:not(.contact-thank-kicker) {
    max-width: 18rem !important;
    font-size: clamp(0.98rem, 4.2vw, 1.22rem) !important;
    line-height: 1.16 !important;
  }

  .contact-thank-close {
    min-height: 3rem !important;
    justify-self: end !important;
    font-size: clamp(0.92rem, 3.8vw, 1rem) !important;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body {
    min-width: 0;
    touch-action: pan-y;
  }

  body *,
  body *::before,
  body *::after {
    min-width: 0;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .navbar {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }

  .logo-button,
  .menu-button,
  .link-page-cta,
  .projects-bridge-cta,
  .contact-form-button,
  .service-cta-btn,
  .contact-thank-close {
    max-width: 100%;
    white-space: normal;
  }

  .loader,
  .menu-overlay,
  .menu-overlay-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .menu-overlay-main,
  .menu-overlay-bottom {
    left: var(--phone-pad) !important;
    right: var(--phone-pad) !important;
    width: auto !important;
    max-width: calc(100% - (var(--phone-pad) * 2)) !important;
  }

  .menu-overlay-links,
  .menu-overlay-link,
  .menu-overlay-info,
  .menu-info-link,
  .menu-overlay-blueprint {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  body:has(.scroll-container) .pin-spacer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .scroll-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .scroll-container > .panel,
  .scroll-container > .masking-overlay-card,
  .scroll-container > .masking-overlay-card-about,
  .scroll-container > .approach-card {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    transform: none !important;
    translate: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    will-change: auto !important;
  }

  .scroll-container > .panel {
    --panel-x-padding: var(--phone-pad);
    --panel-top-padding: var(--phone-section-gap);
    padding: var(--phone-section-gap) var(--phone-pad) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .scroll-container > .hero-section {
    min-height: 100svh !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    align-content: center;
    gap: 0.45rem;
  }

  .hero-title,
  .highlight-container,
  .hero-description,
  .hero-line,
  .bottom-logo {
    max-width: 100% !important;
  }

  .highlight-container,
  .highlight-overlay {
    white-space: normal !important;
  }

  .service-card-web-dev,
  .service-card-branding,
  .service-card-marketing,
  .service-card-architecture {
    min-height: auto !important;
    border-radius: 0 !important;
    transform: none !important;
    cursor: default;
  }

  .reveal-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
  }

  .card-image-button {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .card-img-unified,
  .card-image-button .card-img-unified {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
  }

  .card-info {
    width: 100% !important;
    min-height: auto !important;
    padding: 1rem 3.25rem 1.25rem 0 !important;
  }

  .card-title,
  .card-desc {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .scroll-container > .masking-overlay-card,
  .scroll-container > .masking-overlay-card-about,
  .scroll-container > .contact-card,
  .scroll-container > .site-footer {
    padding: var(--phone-section-gap) var(--phone-pad) !important;
  }

  .masking-overlay-copy,
  .masking-overlay-description,
  .project-link-list {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    transform: none !important;
  }

  .masking-overlay-card {
    display: grid !important;
    gap: 1.25rem;
  }

  .project-link-list {
    display: grid !important;
    gap: 2rem !important;
  }

  .project-category,
  .project-category:nth-child(odd),
  .project-category:nth-child(even) {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .project-category-media,
  .project-category:nth-child(odd) .project-category-media,
  .project-category:nth-child(even) .project-category-media {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    --project-media-align: stretch;
  }

  .project-category-title,
  .project-category-list,
  .project-category-preview,
  .project-category:nth-child(odd) .project-category-title,
  .project-category:nth-child(even) .project-category-title,
  .project-category:nth-child(odd) .project-category-list,
  .project-category:nth-child(even) .project-category-list,
  .project-category:nth-child(odd) .project-category-preview,
  .project-category:nth-child(even) .project-category-preview {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    transform: none !important;
    --project-frame-y: 0px !important;
  }

  .project-list-link,
  .link-project-item,
  .about-service-link {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .about-section-inner,
  .contact-section-inner,
  .site-footer-inner {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 1rem !important;
    transform: none !important;
  }

  .about-section-statement,
  .about-section-grid,
  .about-section-facts,
  .about-section-link,
  .contact-section-eyebrow,
  .contact-section-statement,
  .contact-section-grid,
  .contact-section-form,
  .site-footer-links,
  .site-footer-meta,
  .site-footer-title {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  .contact-section-grid,
  .site-footer-links,
  .site-footer-meta {
    grid-template-columns: 1fr !important;
  }

  .site-footer-meta {
    display: grid !important;
    gap: 0.6rem !important;
  }

  .site-footer-title {
    justify-self: center !important;
    text-align: center !important;
    overflow-wrap: anywhere;
  }

  .approach-fg-video,
  .approach-copy-block,
  .approach-articles-mask,
  .approach-steps,
  .approach-step,
  .approach-step > div {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
    overflow: visible !important;
  }

  .approach-card {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .approach-fg-video {
    height: min(58svh, 26rem) !important;
    min-height: 18rem !important;
    object-position: center !important;
  }

  .approach-copy-block {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding: var(--phone-section-gap) var(--phone-pad) !important;
  }

  .approach-eyebrow,
  .approach-title,
  .approach-kicker,
  .approach-copy,
  .approach-copy-block > hr {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: 100% !important;
    justify-self: start !important;
    text-align: left !important;
  }

  .approach-eyebrow-cover,
  .approach-title-cover {
    display: none !important;
  }

  .approach-articles-mask {
    background-color: transparent !important;
  }

  .approach-steps {
    perspective: none !important;
  }

  .approach-step,
  .approach-step:nth-child(n) {
    display: grid !important;
    grid-template-columns: 2.25rem minmax(0, 1fr) !important;
    gap: 0.75rem !important;
    padding: var(--phone-section-gap) var(--phone-pad) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .approach-step > div {
    grid-column: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .approach-step-title,
  .approach-step-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body:has(.link-page-reveal-footer) .link-page-main {
    padding-bottom: 0 !important;
  }

  .link-page-main,
  .link-page-card,
  .link-page-hero,
  .link-page-section,
  .link-page-band,
  .projects-bridge-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .link-page-card {
    transform: none !important;
  }

  .link-page-hero,
  .link-page-section,
  .link-page-band,
  .projects-bridge-section,
  .link-project-service,
  .link-about-layout,
  .link-contact-layout,
  .contact-premium-layout,
  .about-page-hero,
  .about-story-hero,
  .about-services-showcase,
  .about-clients-bottom,
  .about-client-reasons,
  .about-team-heading,
  .about-team-grid {
    grid-template-columns: 1fr !important;
    padding-left: var(--phone-pad) !important;
    padding-right: var(--phone-pad) !important;
  }

  .link-page-hero-projects {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: hidden !important;
  }

  .projects-template-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    display: grid !important;
    grid-template-areas:
      "services"
      "title"
      "showcase"
      "controls" !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 1rem !important;
    padding: calc(var(--phone-pad) + 4.75rem) var(--phone-pad) var(--phone-section-gap) !important;
    overflow: hidden !important;
  }

  .projects-service-nav {
    grid-area: services !important;
    position: relative !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
    pointer-events: auto !important;
  }

  .projects-showcase-title {
    grid-area: title !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    transform: none !important;
  }

  .projects-showcase-word {
    left: auto !important;
    right: auto !important;
    font-size: clamp(3rem, 18vw, 5.2rem) !important;
    transform: none !important;
  }

  .projects-showcase-items {
    grid-area: showcase !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    width: 100% !important;
    height: auto !important;
  }

  .projects-showcase-col,
  .projects-showcase-col-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
    flex: none !important;
    width: 100% !important;
  }

  .projects-showcase-item,
  .projects-showcase-item-side,
  .projects-showcase-item-main {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3;
    flex: none !important;
  }

  .projects-showcase-item-side .projects-showcase-copy {
    visibility: visible !important;
  }

  .projects-showcase-controls {
    grid-area: controls !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    justify-content: flex-start !important;
  }

  .projects-service-tab,
  .projects-showcase-control {
    white-space: normal;
  }

  .link-page-reveal-footer.site-footer {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: var(--phone-section-gap) var(--phone-pad) !important;
    transform: none !important;
  }

  .about-page-kicker,
  .about-page-kicker-word,
  .about-story-title,
  .about-services-intro h2,
  .about-clients-intro h2,
  .about-client-reasons-heading h2,
  .about-team-heading h2,
  .link-page-title,
  .link-page-intro,
  .link-page-band h2,
  .link-page-band p {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .about-story-image-frame,
  .about-services-list,
  .about-team-card,
  .about-team-portrait {
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-clients-marquee,
  .about-proof-section {
    overflow: hidden !important;
  }

  .service-hero,
  .service-section,
  .service-process,
  .service-cta,
  .service-showcase,
  .webdev-included,
  .webdev-responsive-mask,
  .webdev-process-collage,
  .webdev-final {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    padding-left: var(--phone-pad) !important;
    padding-right: var(--phone-pad) !important;
    overflow-x: hidden !important;
  }

  .service-hero {
    min-height: 100svh !important;
  }

  .service-hero-bg {
    max-width: none;
  }

  .service-hero-content,
  .service-hero-title,
  .service-hero-desc,
  .service-section-label,
  .service-process-title,
  .service-cta-title {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .service-features-grid,
  .webdev-included-grid,
  .webdev-included-grid.service-features-grid,
  .service-steps,
  .webdev-responsive-mask,
  .webdev-final {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  .service-feature,
  .service-feature:nth-child(n),
  .webdev-included .service-feature,
  .webdev-included .service-feature:nth-child(n) {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .service-showcase-label {
    left: var(--phone-pad) !important;
    right: var(--phone-pad) !important;
    bottom: 1.25rem !important;
    max-width: calc(100% - (var(--phone-pad) * 2)) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .service-step {
    grid-template-columns: 2.75rem minmax(0, 1fr) !important;
    gap: 0.85rem !important;
  }

  .webdev-reference-hero {
    display: grid !important;
    align-content: end !important;
    gap: 1.25rem !important;
    padding: 6.8rem var(--phone-pad) 2rem !important;
    background: #e6dac8 !important;
  }

  .webdev-hero-media,
  .service-hero .webdev-hero-content,
  .webdev-hero-title,
  .webdev-hero-copy {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .webdev-hero-media {
    margin: 0 !important;
  }

  .webdev-hero-title {
    white-space: normal !important;
    font-size: clamp(3.2rem, 15vw, 5.4rem) !important;
  }

  .webdev-included-visual,
  .webdev-responsive-visual {
    width: min(100%, 17rem) !important;
    max-width: 100% !important;
    justify-self: start !important;
    overflow: hidden !important;
  }

  .webdev-included-visual img,
  .webdev-responsive-visual img {
    max-width: 100% !important;
  }

  .webdev-included .service-feature:nth-of-type(n + 3) {
    display: grid !important;
  }

  .webdev-included {
    height: 200svh !important;
    min-height: 200svh !important;
    max-height: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .webdev-included-sticky {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: 4.8rem var(--phone-pad) 3rem !important;
    overflow: hidden !important;
  }

  .webdev-included-base-mask,
  .webdev-included-text-mask {
    padding: 4.8rem var(--phone-pad) 3rem !important;
  }

  .webdev-included-base-title {
    font-size: clamp(3.2rem, 15vw, 5.4rem) !important;
  }

  .webdev-included-base-grid,
  .webdev-included-mask-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 2.5rem !important;
    margin-top: 3.4rem !important;
  }

  .webdev-included-base-visual,
  .webdev-included-mask-visual {
    width: min(15.3rem, 70vw) !important;
  }

  .webdev-included-base-feature,
  .webdev-included-mask-feature {
    grid-column: 1 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr auto !important;
    row-gap: 2rem !important;
    transform: none !important;
  }

  .webdev-included-base-feature-title,
  .webdev-included-mask-feature-title {
    justify-self: start !important;
    font-size: clamp(2.8rem, 12vw, 4.4rem) !important;
  }

  .webdev-included-base-num,
  .webdev-included-mask-num {
    margin-left: 1rem !important;
  }

  .webdev-included-base-body,
  .webdev-included-mask-body {
    justify-self: start !important;
    max-width: 100% !important;
    font-size: 0.92rem !important;
    line-height: 1.16 !important;
  }

  .webdev-included .service-feature:nth-of-type(n + 4) {
    display: none !important;
  }

  .webdev-responsive-copy,
  .webdev-final-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto !important;
    gap: 1rem !important;
  }

  .webdev-process-collage {
    display: grid !important;
    gap: 1rem !important;
    padding-top: var(--phone-section-gap) !important;
    padding-bottom: var(--phone-section-gap) !important;
  }

  .webdev-process-title,
  .webdev-process-card,
  .webdev-process-top-left,
  .webdev-process-top-right,
  .webdev-process-bottom-left,
  .webdev-process-bottom-right {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .webdev-process-title {
    order: -1;
    text-align: left !important;
  }

  .webdev-process-card img {
    width: 100% !important;
    max-width: 100% !important;
  }

  .webdev-final-media {
    width: 100% !important;
    min-height: 16rem !important;
  }

  .webdev-final-media img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 18rem) !important;
    margin: 2rem auto !important;
    transform: none !important;
  }

  .scroll-container > .panel:not(.hero-section),
  .scroll-container > .masking-overlay-card,
  .scroll-container > .masking-overlay-card-about,
  .scroll-container > .approach-card,
  .scroll-container > .contact-card,
  .scroll-container > .site-footer,
  .link-page-hero,
  .projects-template-container,
  .contact-premium-layout,
  .service-section,
  .service-process,
  .service-cta,
  .webdev-included,
  .webdev-responsive-mask,
  .webdev-process-collage,
  .webdev-final {
    min-height: 100svh !important;
  }

  .service-card-web-dev,
  .service-card-branding,
  .service-card-marketing,
  .service-card-architecture {
    min-height: 100svh !important;
    display: grid !important;
    align-content: stretch !important;
    padding: 0 var(--phone-pad) !important;
  }

  .service-card-web-dev .reveal-content,
  .service-card-branding .reveal-content,
  .service-card-marketing .reveal-content,
  .service-card-architecture .reveal-content {
    min-height: 100svh !important;
    grid-template-rows: minmax(14rem, 52svh) auto !important;
    align-content: stretch !important;
  }

  .service-card-web-dev .card-image-button,
  .service-card-branding .card-image-button,
  .service-card-marketing .card-image-button,
  .service-card-architecture .card-image-button {
    height: 52svh !important;
    min-height: 14rem !important;
    aspect-ratio: auto !important;
  }

  .card-info {
    display: grid !important;
    align-content: space-between !important;
    gap: clamp(0.7rem, 2.6svh, 1.1rem) !important;
  }

  .card-info hr {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .card-img-unified,
  .card-image-button,
  .card-image-button .card-img-unified,
  .project-category-preview,
  .project-preview-image,
  .projects-showcase-img,
  .projects-showcase-img img,
  .service-showcase img,
  .webdev-process-card img,
  .webdev-included-visual,
  .webdev-included-visual img,
  .webdev-responsive-visual,
  .webdev-responsive-visual img,
  .webdev-final-media img,
  .about-story-image-frame,
  .about-story-image-frame img,
  .about-team-portrait,
  .about-team-portrait img {
    border-radius: 0 !important;
  }

  .hero-title,
  .highlight-container {
    font-size: clamp(2.2rem, 11vw, 3.35rem) !important;
    line-height: 1 !important;
  }

  .bottom-logo,
  .site-footer-title {
    font-size: clamp(3.2rem, 16vw, 5.6rem) !important;
    line-height: 0.82 !important;
  }

  .card-title {
    font-size: clamp(1.85rem, 8.8vw, 2.75rem) !important;
    line-height: 0.98 !important;
  }

  .card-desc {
    font-size: clamp(0.9rem, 3.9vw, 1.08rem) !important;
    line-height: 1.18 !important;
  }

  .masking-overlay-copy,
  .masking-overlay-about-copy,
  .contact-section-eyebrow,
  .approach-eyebrow,
  .project-category-title,
  .link-page-title,
  .about-page-kicker,
  .about-story-title,
  .about-services-intro h2,
  .about-clients-intro h2,
  .about-client-reasons-heading h2,
  .about-team-heading h2,
  .service-section-label,
  .webdev-included-title,
  .webdev-responsive-title,
  .webdev-process-title {
    font-size: clamp(2.45rem, 13vw, 4.7rem) !important;
    line-height: 0.94 !important;
  }

  .service-hero-title,
  .webdev-hero-title {
    font-size: clamp(2.65rem, 13.5vw, 4.8rem) !important;
    line-height: 0.98 !important;
  }

  .approach-title,
  .service-process-title,
  .service-cta-title,
  .webdev-final-title {
    font-size: clamp(2rem, 9vw, 3.4rem) !important;
    line-height: 1.02 !important;
  }

  .about-section-statement,
  .contact-section-statement,
  .link-page-intro,
  .about-story-body p,
  .about-services-intro p,
  .about-clients-copy,
  .about-client-reasons-summary,
  .projects-bridge-section p {
    font-size: clamp(1.05rem, 5.2vw, 1.55rem) !important;
    line-height: 1.22 !important;
  }

  .service-feature-title,
  .webdev-included .service-feature-title {
    font-size: clamp(1.6rem, 8vw, 2.7rem) !important;
    line-height: 1 !important;
  }

  .service-feature-body,
  .service-step-content p,
  .webdev-responsive-text,
  .webdev-final-lede,
  .webdev-final-note {
    font-size: clamp(0.9rem, 3.9vw, 1.05rem) !important;
    line-height: 1.42 !important;
  }

  .masking-overlay-card,
  .masking-overlay-card-about,
  .contact-card,
  .approach-card,
  .link-page-card,
  .service-section,
  .webdev-included,
  .webdev-responsive-mask,
  .webdev-process-collage,
  .webdev-final,
  .service-cta {
    overflow-y: visible !important;
  }

  .service-showcase {
    min-height: 58svh !important;
  }

  .service-showcase-label,
  .projects-showcase-word,
  .menu-overlay-blueprint {
    overflow-wrap: anywhere;
  }

  .webdev-process-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 0.45rem !important;
  }

  .webdev-final {
    grid-template-rows: auto auto !important;
  }

  .webdev-final-copy {
    padding: var(--phone-section-gap) var(--phone-pad) !important;
  }

  .scroll-container > .service-card-web-dev,
  .scroll-container > .service-card-branding,
  .scroll-container > .service-card-marketing,
  .scroll-container > .service-card-architecture {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  .scroll-container > .service-card-web-dev .reveal-content,
  .scroll-container > .service-card-branding .reveal-content,
  .scroll-container > .service-card-marketing .reveal-content,
  .scroll-container > .service-card-architecture .reveal-content {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    grid-template-rows: minmax(0, 52svh) minmax(0, 48svh) !important;
  }

  .scroll-container > .service-card-web-dev .card-image-button,
  .scroll-container > .service-card-branding .card-image-button,
  .scroll-container > .service-card-marketing .card-image-button,
  .scroll-container > .service-card-architecture .card-image-button {
    height: 100% !important;
    min-height: 0 !important;
  }

  .scroll-container > .service-card-web-dev .card-info,
  .scroll-container > .service-card-branding .card-info,
  .scroll-container > .service-card-marketing .card-info,
  .scroll-container > .service-card-architecture .card-info {
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(0.75rem, 2.1svh, 1rem) 3rem clamp(0.8rem, 2.4svh, 1.05rem) 0 !important;
    overflow: hidden !important;
  }

  .scroll-container > .service-card-web-dev .card-title,
  .scroll-container > .service-card-branding .card-title,
  .scroll-container > .service-card-marketing .card-title,
  .scroll-container > .service-card-architecture .card-title {
    margin: 0 !important;
    font-size: clamp(1.65rem, 7.6vw, 2.35rem) !important;
  }

  .scroll-container > .service-card-web-dev .card-desc,
  .scroll-container > .service-card-branding .card-desc,
  .scroll-container > .service-card-marketing .card-desc,
  .scroll-container > .service-card-architecture .card-desc {
    margin: 0 !important;
    font-size: clamp(0.84rem, 3.7vw, 1rem) !important;
  }

  .approach-steps {
    height: auto !important;
  }

  .approach-step,
  .approach-step:nth-child(n) {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    align-content: stretch !important;
  }

  .approach-step > div {
    height: calc(100svh - (var(--phone-section-gap) * 2)) !important;
    min-height: 0 !important;
    max-height: calc(100svh - (var(--phone-section-gap) * 2)) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    align-content: start !important;
    gap: clamp(0.7rem, 3svh, 1.25rem) !important;
  }

  .approach-step-title {
    align-self: start !important;
    font-size: clamp(1.85rem, 9.2vw, 3rem) !important;
  }

  .approach-step-copy {
    align-self: start !important;
    font-size: clamp(1rem, 5vw, 1.45rem) !important;
  }

  .scroll-container > .masking-overlay-card .char,
  .scroll-container > .approach-card .char,
  .scroll-container > .masking-overlay-card-about .char,
  .scroll-container > .contact-card .char,
  .scroll-container > .site-footer .char {
    transform: none !important;
  }

  .scroll-container > .masking-overlay-card .reveal-text,
  .scroll-container > .masking-overlay-card .project-list-link,
  .scroll-container > .approach-card .reveal-text,
  .scroll-container > .approach-card .approach-step > span,
  .scroll-container > .masking-overlay-card-about .reveal-text,
  .scroll-container > .contact-card .reveal-text,
  .scroll-container > .site-footer,
  .scroll-container > .site-footer * {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .scroll-container > .approach-card .approach-copy-block > hr {
    opacity: 1 !important;
    transform: none !important;
  }

  body:has(.scroll-container) .navbar {
    --mobile-nav-pad-x: clamp(1.85rem, 7.2vw, 3.35rem);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 1rem !important;
    padding: calc(env(safe-area-inset-top) + clamp(1.65rem, 7.4vw, 2.35rem)) var(--mobile-nav-pad-x) 0 !important;
  }

  body:has(.scroll-container) .logo-button,
  body:has(.scroll-container) .menu-button {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
  }

  body:has(.scroll-container) .logo-button {
    color: #000000;
    font-size: clamp(1.35rem, 6.3vw, 2rem) !important;
    line-height: 1 !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
  }

  body:has(.scroll-container) .logo-button .char,
  body:has(.scroll-container) .logo-button .line-mask {
    transform: none !important;
  }

  body:has(.scroll-container) .logo-button.is-rolling-link {
    display: inline-grid !important;
    grid-template: "stack" auto / auto !important;
    overflow: hidden !important;
  }

  body:has(.scroll-container) .logo-button .rolling-link-initial {
    display: inline-flex !important;
    grid-area: stack !important;
  }

  body:has(.scroll-container) .logo-button .rolling-link-hover {
    display: none !important;
  }

  body:has(.scroll-container) .logo-button .link-hover-char {
    transform: none !important;
  }

  body:has(.scroll-container) .menu-button {
    width: clamp(2.75rem, 10.8vw, 3.35rem) !important;
    height: clamp(2.75rem, 10.8vw, 3.35rem) !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    color: #000000 !important;
    transform: none !important;
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  body:has(.scroll-container) .menu-icon {
    width: clamp(1.25rem, 4.9vw, 1.55rem) !important;
    height: clamp(1.25rem, 4.9vw, 1.55rem) !important;
  }

  body:has(.scroll-container) .menu-icon-line {
    stroke-width: 1.25 !important;
  }

  .scroll-container > .hero-section {
    --hero-mobile-pad: clamp(1.85rem, 7.2vw, 3.35rem);
    min-height: 100svh !important;
    padding: calc(env(safe-area-inset-top) + clamp(8.4rem, 16.8svh, 10.35rem)) var(--hero-mobile-pad) clamp(1.1rem, 3.4svh, 1.85rem) !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start !important;
    gap: 0.15rem !important;
    background-color: #e5d7c6 !important;
  }

  .scroll-container > .hero-section::before {
    content: none !important;
    display: none !important;
    position: absolute;
    left: var(--hero-mobile-pad);
    right: var(--hero-mobile-pad);
    top: calc(env(safe-area-inset-top) + clamp(5.55rem, 23.5vw, 7rem));
    z-index: 1;
    border-top: 1px solid rgba(0, 0, 0, 0.55);
  }

  .scroll-container > .hero-section .reveal-text,
  .scroll-container > .hero-section .bottom-logo {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-title,
  .highlight-container {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(2.85rem, 13.7vw, 4.25rem) !important;
    line-height: 1 !important;
    color: #000000 !important;
  }

  .hero-title {
    margin-bottom: clamp(0.45rem, 1.6svh, 0.8rem) !important;
  }

  .highlight-container {
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .highlight-container::after {
    background-color: #1f1a0f !important;
    transform: scaleX(0) !important;
  }

  .highlight-container.active::after {
    transform: scaleX(1) !important;
  }

  .highlight-base {
    color: #000000 !important;
  }

  .highlight-overlay {
    inset: 0 auto auto 0 !important;
    width: auto !important;
    padding: 0 !important;
    color: #e5d7c6 !important;
    white-space: nowrap !important;
    clip-path: inset(0 100% 0 0) !important;
  }

  .highlight-container.active .highlight-overlay {
    clip-path: inset(0 0 0 0) !important;
  }

  .hero-description {
    max-width: min(18.5rem, 100%) !important;
    margin: clamp(0.95rem, 2.8svh, 1.45rem) 0 0 !important;
    padding: 0 !important;
    font-size: clamp(1.12rem, 5.1vw, 1.55rem) !important;
    line-height: 1.24 !important;
    color: #000000 !important;
  }

  .hero-line {
    width: 100% !important;
    margin: clamp(1.35rem, 3.5svh, 2rem) 0 0 !important;
    border-top-color: rgba(0, 0, 0, 0.55) !important;
  }

  .bottom-logo {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: clamp(0.95rem, 2.8svh, 1.65rem) !important;
    font-size: clamp(3.25rem, 13.8vw, 4.85rem) !important;
    line-height: 1 !important;
    color: #000000 !important;
    text-align: left !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .bottom-logo .char {
    line-height: 1 !important;
  }

  .scroll-container > .service-card-web-dev,
  .scroll-container > .service-card-branding,
  .scroll-container > .service-card-marketing,
  .scroll-container > .service-card-architecture {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    border-top-left-radius: clamp(1.4rem, 7vw, 2.35rem) !important;
    border-top-right-radius: clamp(1.4rem, 7vw, 2.35rem) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transform: none !important;
    transform-origin: center top !important;
  }

  .scroll-container {
    isolation: isolate !important;
  }

  .scroll-container > .hero-section {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }

  .scroll-container > .service-card-web-dev {
    margin-top: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    z-index: 2 !important;
  }

  .scroll-container > .service-card-branding,
  .scroll-container > .service-card-marketing,
  .scroll-container > .service-card-architecture {
    margin-top: 0 !important;
  }

  .scroll-container > .service-card-branding {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    z-index: 3 !important;
  }

  .scroll-container > .service-card-marketing {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    z-index: 4 !important;
  }

  .scroll-container > .service-card-architecture {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    z-index: 5 !important;
    margin-bottom: 0 !important;
  }

  .scroll-container > .approach-card {
    --approach-mobile-pad: clamp(1.85rem, 7.2vw, 3.35rem);
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background-color: #1f1912 !important;
    color: #ffffff !important;
  }

  .scroll-container > .approach-card::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100svh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image: url("./webp-output/approach_background_img.webp") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
  }

  .scroll-container > .approach-card::after {
    display: none !important;
  }

  .scroll-container > .approach-card .approach-copy-block {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: 0 var(--approach-mobile-pad) !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .scroll-container > .approach-card .approach-eyebrow,
  .scroll-container > .approach-card .approach-copy,
  .scroll-container > .approach-card .approach-kicker,
  .scroll-container > .approach-card .approach-copy-block > hr,
  .scroll-container > .approach-card .approach-title {
    justify-self: start !important;
    max-width: 100% !important;
    text-align: left !important;
    color: #ffffff !important;
    position: absolute !important;
    z-index: 3 !important;
  }

  .scroll-container > .approach-card .approach-eyebrow {
    left: var(--approach-mobile-pad) !important;
    right: var(--approach-mobile-pad) !important;
    top: calc(env(safe-area-inset-top) + 10.8svh) !important;
    margin: 0 !important;
    font-size: clamp(3.35rem, 17.4vw, 5.5rem) !important;
    line-height: 0.94 !important;
    font-weight: 300 !important;
    white-space: nowrap !important;
  }

  .scroll-container > .approach-card .approach-copy {
    left: var(--approach-mobile-pad) !important;
    top: 22.8svh !important;
    max-width: min(15rem, 76vw) !important;
    margin: 0 !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(0.82rem, 3.85vw, 1.08rem) !important;
    line-height: 1.08 !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.84) !important;
  }

  .scroll-container > .approach-card .approach-copy-line {
    display: block !important;
    white-space: nowrap !important;
  }

  .scroll-container > .approach-card .approach-kicker {
    left: var(--approach-mobile-pad) !important;
    right: var(--approach-mobile-pad) !important;
    top: 31.2svh !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(0.76rem, 3.45vw, 1rem) !important;
    line-height: 1.08 !important;
    font-weight: 300 !important;
    color: rgba(255, 255, 255, 0.86) !important;
    white-space: nowrap !important;
  }

  .scroll-container > .approach-card .approach-copy-block > hr {
    left: var(--approach-mobile-pad) !important;
    right: var(--approach-mobile-pad) !important;
    top: 34.8svh !important;
    display: block !important;
    height: 0 !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.78) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .scroll-container > .approach-card .approach-fg-video {
    display: none !important;
  }

  .scroll-container > .approach-card .approach-title {
    left: var(--approach-mobile-pad) !important;
    right: var(--approach-mobile-pad) !important;
    bottom: clamp(2.25rem, 6svh, 4.2rem) !important;
    top: auto !important;
    z-index: 3 !important;
    margin: 0 !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(2.25rem, 11.5vw, 4.7rem) !important;
    line-height: 1.12 !important;
    font-weight: 200 !important;
  }

  .scroll-container > .approach-card .approach-title-line {
    display: block !important;
  }

  .scroll-container > .approach-card .approach-eyebrow .line,
  .scroll-container > .approach-card .approach-copy .line,
  .scroll-container > .approach-card .approach-kicker .line,
  .scroll-container > .approach-card .approach-title .line,
  .scroll-container > .approach-card .approach-eyebrow .line-mask,
  .scroll-container > .approach-card .approach-copy .line-mask,
  .scroll-container > .approach-card .approach-kicker .line-mask,
  .scroll-container > .approach-card .approach-title .line-mask {
    width: 100% !important;
    text-align: left !important;
  }

  .scroll-container > .approach-card .approach-articles-mask {
    position: relative !important;
    z-index: 4 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: #e5d7c6 !important;
    overflow: visible !important;
  }
}

@media (max-width: 600px) {
  .about-story-hero {
    min-height: 100svh !important;
  }

  .about-story-content {
    grid-template-rows: auto 1fr auto !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 32svh !important;
  }

  .about-story-image-frame {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 46svh !important;
  }

  .about-story-title,
  .about-story-body {
    margin: 0 !important;
  }

  .about-story-body {
    align-self: end !important;
  }

  .about-story-body p {
    font-size: clamp(0.86rem, 3.6vw, 1rem) !important;
    line-height: 1.34 !important;
  }

  .scroll-container {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .scroll-container::-webkit-scrollbar,
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }

  .scrollbar-indicator {
    display: none !important;
  }

  .scroll-container > .hero-section {
    scroll-snap-align: start;
    justify-items: start !important;
    text-align: left !important;
  }

  .scroll-container > .hero-section::after {
    content: none !important;
    display: none !important;
  }

  .scroll-container > .hero-section .hero-title,
  .scroll-container > .hero-section .hero-description,
  .scroll-container > .hero-section .hero-line,
  .scroll-container > .hero-section .bottom-logo {
    justify-self: start !important;
    text-align: left !important;
  }

  .scroll-container > .hero-section .hero-title {
    width: fit-content !important;
  }

  .scroll-container > .hero-section .hero-description {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .scroll-container > .hero-section .hero-line {
    width: 100% !important;
    transform-origin: center !important;
  }

  .scroll-container > .hero-section .bottom-logo {
    width: 100% !important;
  }

  .scroll-container > .hero-section .highlight-container {
    justify-self: start !important;
    display: inline-block !important;
    position: relative !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    background-color: transparent !important;
    color: #000000 !important;
    overflow: visible !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .scroll-container > .hero-section .highlight-container > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .scroll-container > .hero-section .highlight-container::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background-color: #1f1a0f !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
  }

  .scroll-container > .hero-section .highlight-container.active::after {
    transform: scaleX(1) !important;
  }

  .scroll-container > .hero-section .highlight-base {
    display: inline-block !important;
    position: relative !important;
    z-index: 1 !important;
    width: auto !important;
    color: #000000 !important;
    overflow: hidden !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  .scroll-container > .hero-section .highlight-overlay {
    display: inline-block !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    z-index: 3 !important;
    width: auto !important;
    padding: 0 !important;
    color: #e5d7c6 !important;
    white-space: nowrap !important;
    clip-path: inset(0 100% 0 0) !important;
  }

  .scroll-container > .hero-section .highlight-container.active .highlight-overlay {
    clip-path: inset(0 0 0 0) !important;
  }

  .scroll-container > .hero-section .highlight-base .line {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .scroll-container > .hero-section .highlight-base .line-mask {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .scroll-container > .hero-section .highlight-base .word,
  .scroll-container > .hero-section .highlight-base .char {
    display: inline-block !important;
    overflow: visible !important;
  }

  .scroll-container > .service-card-web-dev,
  .scroll-container > .service-card-branding,
  .scroll-container > .service-card-marketing,
  .scroll-container > .service-card-architecture {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    border-radius: var(--mobile-service-card-radius, 28px) var(--mobile-service-card-radius, 28px) 0 0 !important;
    scroll-snap-align: start;
    box-shadow: 0 -18px 34px rgba(0, 0, 0, 0.22) !important;
  }

  .scroll-container > .service-card-web-dev .reveal-content,
  .scroll-container > .service-card-branding .reveal-content,
  .scroll-container > .service-card-marketing .reveal-content,
  .scroll-container > .service-card-architecture .reveal-content {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: minmax(0, 62svh) minmax(0, 38svh) !important;
  }

  .scroll-container > .service-card-web-dev .card-info,
  .scroll-container > .service-card-branding .card-info,
  .scroll-container > .service-card-marketing .card-info,
  .scroll-container > .service-card-architecture .card-info {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: center !important;
    justify-items: stretch !important;
    row-gap: clamp(0.85rem, 2.25svh, 1.25rem) !important;
    height: 100% !important;
    padding: clamp(1.35rem, 3.4svh, 2rem) 10.6vw !important;
    background-color: inherit !important;
    overflow: visible !important;
  }

  .scroll-container > .service-card-web-dev .card-img-unified,
  .scroll-container > .service-card-branding .card-img-unified,
  .scroll-container > .service-card-marketing .card-img-unified,
  .scroll-container > .service-card-architecture .card-img-unified,
  .scroll-container > .service-card-web-dev .card-image-button,
  .scroll-container > .service-card-branding .card-image-button,
  .scroll-container > .service-card-marketing .card-image-button,
  .scroll-container > .service-card-architecture .card-image-button {
    width: 100% !important;
    height: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  .scroll-container > .service-card-web-dev .card-img-unified,
  .scroll-container > .service-card-branding .card-img-unified,
  .scroll-container > .service-card-marketing .card-img-unified,
  .scroll-container > .service-card-architecture .card-img-unified {
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.08) !important;
  }

  .scroll-container > .service-card-web-dev .card-title,
  .scroll-container > .service-card-branding .card-title,
  .scroll-container > .service-card-marketing .card-title,
  .scroll-container > .service-card-architecture .card-title {
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: min(8.9vw, 5.35rem) !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    text-align: center !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .scroll-container > .service-card-web-dev .card-title .line,
  .scroll-container > .service-card-branding .card-title .line,
  .scroll-container > .service-card-marketing .card-title .line,
  .scroll-container > .service-card-architecture .card-title .line {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .scroll-container > .service-card-web-dev .card-title .word,
  .scroll-container > .service-card-branding .card-title .word,
  .scroll-container > .service-card-marketing .card-title .word,
  .scroll-container > .service-card-architecture .card-title .word {
    white-space: nowrap !important;
  }

  .scroll-container > .service-card-web-dev .card-info hr,
  .scroll-container > .service-card-branding .card-info hr,
  .scroll-container > .service-card-marketing .card-info hr,
  .scroll-container > .service-card-architecture .card-info hr {
    grid-row: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.86) !important;
    transform-origin: center !important;
  }

  .scroll-container > .service-card-web-dev .card-desc,
  .scroll-container > .service-card-branding .card-desc,
  .scroll-container > .service-card-marketing .card-desc,
  .scroll-container > .service-card-architecture .card-desc {
    grid-row: 3 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: min(3.75vw, 2.15rem) !important;
    line-height: 1.34 !important;
    font-weight: 300 !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .scroll-container > .service-card-web-dev .card-desc .line,
  .scroll-container > .service-card-branding .card-desc .line,
  .scroll-container > .service-card-marketing .card-desc .line,
  .scroll-container > .service-card-architecture .card-desc .line,
  .scroll-container > .service-card-web-dev .card-desc .line-mask,
  .scroll-container > .service-card-branding .card-desc .line-mask,
  .scroll-container > .service-card-marketing .card-desc .line-mask,
  .scroll-container > .service-card-architecture .card-desc .line-mask {
    width: 100% !important;
    text-align: center !important;
  }

  .scroll-container > .service-card-web-dev .icon-btn,
  .scroll-container > .service-card-branding .icon-btn,
  .scroll-container > .service-card-marketing .icon-btn,
  .scroll-container > .service-card-architecture .icon-btn {
    grid-row: 4 !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    justify-self: center !important;
    align-self: center !important;
    width: auto !important;
    min-width: clamp(9.4rem, 44vw, 12rem) !important;
    height: clamp(3rem, 12vw, 3.5rem) !important;
    padding: 0 clamp(1.55rem, 7vw, 2.1rem) !important;
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #ffffff !important;
    overflow: hidden !important;
  }

  .scroll-container > .service-card-web-dev .icon-btn::before,
  .scroll-container > .service-card-branding .icon-btn::before,
  .scroll-container > .service-card-marketing .icon-btn::before,
  .scroll-container > .service-card-architecture .icon-btn::before {
    display: block !important;
    background-color: #000000 !important;
  }

  .scroll-container > .service-card-web-dev .icon-btn svg,
  .scroll-container > .service-card-branding .icon-btn svg,
  .scroll-container > .service-card-marketing .icon-btn svg,
  .scroll-container > .service-card-architecture .icon-btn svg {
    display: none !important;
  }

  .scroll-container > .service-card-web-dev .icon-btn::after,
  .scroll-container > .service-card-branding .icon-btn::after,
  .scroll-container > .service-card-marketing .icon-btn::after,
  .scroll-container > .service-card-architecture .icon-btn::after {
    content: "Explore service" !important;
    position: relative !important;
    z-index: 1 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
    line-height: 1 !important;
    color: currentColor !important;
    white-space: nowrap !important;
  }

  .scroll-container > .service-card-branding,
  .scroll-container > .service-card-marketing,
  .scroll-container > .service-card-architecture {
    border-radius: 0 !important;
  }

  .scroll-container > .service-card-web-dev {
    margin-top: -7.6rem !important;
    z-index: 2 !important;
  }

  .scroll-container > .service-card-architecture {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 767px) {
  body.menu-active {
    overflow: hidden !important;
  }

  body.menu-active .navbar,
  body.menu-active:has(.scroll-container) .navbar {
    --mobile-nav-pad-x: clamp(1.35rem, 6.8vw, 3.95rem);
    padding: calc(env(safe-area-inset-top) + 4.55svh) var(--mobile-nav-pad-x) 0 !important;
  }

  body.menu-active .logo-button,
  body.menu-active:has(.scroll-container) .logo-button {
    color: #ffffff !important;
  }

  body.menu-active .menu-button,
  body.menu-active:has(.scroll-container) .menu-button {
    background-color: transparent !important;
    border: 0 !important;
    color: #ffffff !important;
  }

  .menu-overlay {
    --menu-mobile-pad: clamp(1.35rem, 6.8vw, 3.95rem);
    background-color: #050505 !important;
    color: #ffffff !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  .menu-overlay-content {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: 0 var(--menu-mobile-pad) !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .menu-overlay-main {
    position: absolute !important;
    inset: 0 var(--menu-mobile-pad) 0 var(--menu-mobile-pad) !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    overflow: hidden !important;
  }

  .menu-overlay-links {
    position: absolute !important;
    z-index: 6 !important;
    left: 0 !important;
    right: calc(50% + clamp(0.8rem, 4vw, 1.35rem)) !important;
    top: 15.25svh !important;
    display: grid !important;
    gap: clamp(0.22rem, 0.85svh, 0.5rem) !important;
    height: auto !important;
    justify-self: stretch !important;
    align-self: start !important;
    min-height: 0 !important;
  }

  .menu-overlay-link {
    position: relative !important;
    z-index: 7 !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    color: #ffffff !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(1.48rem, 7.95vw, 3.05rem) !important;
    line-height: 1.05 !important;
    font-weight: 300 !important;
    text-align: left !important;
    letter-spacing: 0 !important;
  }

  .menu-overlay-link::after,
  .menu-info-link::after,
  .menu-overlay-divider {
    display: none !important;
  }

  .menu-overlay-link > span.is-rolling-link {
    display: inline-grid !important;
    grid-template: "stack" auto / auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    overflow: hidden !important;
    line-height: 1 !important;
    vertical-align: top !important;
  }

  .menu-overlay-link .rolling-link-wrap {
    grid-area: stack !important;
    display: inline-flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .menu-overlay-link .rolling-link-hover {
    pointer-events: none !important;
  }

  .menu-image-frame {
    position: absolute !important;
    z-index: 1 !important;
    left: 0 !important;
    right: 0 !important;
    top: 41.6svh !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1.745 / 1 !important;
    justify-self: stretch !important;
    border: 0 !important;
    border-radius: clamp(0.58rem, 1.45vw, 0.9rem) !important;
    overflow: hidden !important;
    background-color: #1f1912 !important;
  }

  .menu-overlay.is-open .menu-image-frame {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    clip-path: inset(0 0 0 0) !important;
  }

  .menu-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .menu-overlay-info {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    display: block !important;
    justify-items: start !important;
    align-items: start !important;
    text-align: left !important;
    gap: 0 !important;
    min-height: 0 !important;
  }

  .menu-info-group {
    position: absolute !important;
    justify-items: start !important;
    gap: clamp(0.34rem, 1svh, 0.68rem) !important;
    min-width: 0 !important;
  }

  .menu-info-group:first-child {
    left: 0 !important;
    right: calc(50% + clamp(0.8rem, 4vw, 1.35rem)) !important;
    top: 73.95svh !important;
  }

  .menu-info-group:last-child {
    left: auto !important;
    right: 0 !important;
    top: 15.25svh !important;
    width: max-content !important;
    justify-items: end !important;
    text-align: right !important;
    gap: clamp(0.5rem, 1.25svh, 0.82rem) !important;
  }

  .menu-info-label {
    margin: 0 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(0.52rem, 2.25vw, 0.72rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .menu-info-link {
    color: #ffffff !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(0.7rem, 3.25vw, 1.02rem) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .menu-overlay-bottom {
    position: absolute !important;
    left: var(--menu-mobile-pad) !important;
    right: var(--menu-mobile-pad) !important;
    bottom: 3.9svh !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    align-self: end !important;
  }

  .menu-overlay-bottom .menu-overlay-divider {
    display: block !important;
    width: 100% !important;
    margin: 0 0 clamp(0.72rem, 2.2svh, 1.25rem) !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.85) !important;
    transform: scaleX(1) !important;
  }

  .menu-overlay-blueprint {
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(2.35rem, 16.5vw, 8.5rem);
    line-height: 0.86 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}

@media (max-width: 767px) and (max-height: 620px) {
  .menu-overlay-links {
    top: 15.25svh !important;
    gap: clamp(0.34rem, 0.92svh, 0.62rem) !important;
  }

  .menu-overlay-link {
    font-size: clamp(1.42rem, 8.05vw, 2.82rem) !important;
    line-height: 1.02 !important;
  }

  .menu-info-label {
    font-size: clamp(0.5rem, 2.1vw, 0.66rem) !important;
  }

  .menu-info-link {
    font-size: clamp(0.66rem, 3vw, 0.92rem) !important;
    line-height: 1.18 !important;
  }

  .menu-overlay-blueprint {
    font-size: clamp(2.1rem, 15vw, 7rem);
  }
}

@media (max-width: 767px) {
  body:has(.projects-showcase-hero) {
    background-color: #d4b99e !important;
  }

  body:has(.projects-showcase-hero) .project-page-card,
  body:has(.projects-showcase-hero) .link-page-hero-projects,
  body:has(.projects-showcase-hero) .projects-template-container {
    background-color: #d4b99e !important;
  }

  body:has(.projects-showcase-hero) .link-page-main,
  body:has(.projects-showcase-hero) .link-page-card,
  body:has(.projects-showcase-hero) .link-page-hero-projects {
    overflow-x: hidden !important;
  }

  body:has(.projects-showcase-hero) .navbar {
    padding: calc(env(safe-area-inset-top) + clamp(2.15rem, 5.1svh, 3.1rem)) clamp(1.92rem, 7.9vw, 2.9rem) 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    color: #000000 !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(3.9rem, 15.8vw, 5.15rem) !important;
    height: clamp(3.9rem, 15.8vw, 5.15rem) !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.projects-showcase-hero) .menu-icon {
    width: clamp(1.55rem, 6vw, 2rem) !important;
    height: clamp(1.55rem, 6vw, 2rem) !important;
  }

  .link-page-hero-projects {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .projects-template-container {
    --projects-mobile-pad: clamp(2.2rem, 12vw, 3.75rem);
    --projects-mobile-card: min(72vw, 28rem);
    --projects-mobile-gap: clamp(0.72rem, 3.2vw, 1rem);
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    padding: calc(env(safe-area-inset-top) + clamp(6.65rem, 12.7svh, 7.75rem)) 0 clamp(1.75rem, 4.3svh, 2.45rem) !important;
    display: grid !important;
    grid-template-areas:
      "services"
      "showcase"
      "dots"
      "detail"
      "title" !important;
    grid-template-rows: auto minmax(0, 41.6svh) auto minmax(0, 1fr) auto !important;
    row-gap: clamp(1rem, 2.55svh, 1.45rem) !important;
    align-content: stretch !important;
    overflow: hidden !important;
  }

  .projects-service-nav {
    grid-area: services !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - (var(--projects-mobile-pad) * 2)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
    gap: clamp(1rem, 4.7vw, 1.5rem) clamp(0.95rem, 4vw, 1.35rem) !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    pointer-events: auto !important;
  }

  .projects-service-tab {
    min-height: clamp(3.4rem, 8.4svh, 4rem) !important;
    padding: 0 clamp(1rem, 4vw, 1.35rem) !important;
    border: 2px solid #000000 !important;
    border-radius: 999px !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(1.18rem, 5.25vw, 1.6rem) !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #000000 !important;
  }

  .projects-service-tab.is-active,
  .projects-service-tab:hover,
  .projects-service-tab:focus-visible {
    color: #d4b99e !important;
  }

  .projects-showcase-items {
    grid-area: showcase !important;
    position: relative !important;
    z-index: 12 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--projects-mobile-gap) !important;
    padding: 0 !important;
    margin-left: calc(((100vw - var(--projects-mobile-card)) / 2) - ((var(--projects-mobile-card) + var(--projects-mobile-gap)) * 3)) !important;
    overflow: visible !important;
  }

  .projects-showcase-col,
  .projects-showcase-col-main {
    display: contents !important;
  }

  .projects-showcase-item,
  .projects-showcase-item-side,
  .projects-showcase-item-main {
    position: relative !important;
    top: auto !important;
    width: var(--projects-mobile-card) !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 0 0 var(--projects-mobile-card) !important;
    display: grid !important;
    grid-template-rows: clamp(4.05rem, 7.2svh, 4.85rem) minmax(0, 1fr) !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  .projects-showcase-copy {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 clamp(0.75rem, 1.8svh, 1rem) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-content: end !important;
    align-items: end !important;
    column-gap: 1rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(1.05rem, 5vw, 1.5rem) !important;
    line-height: 1.05 !important;
    font-weight: 400 !important;
  }

  .projects-showcase-item-side .projects-showcase-copy {
    visibility: hidden !important;
  }

  .projects-showcase-item-main .projects-showcase-copy > span {
    margin: 0 !important;
  }

  .projects-showcase-item-main .projects-showcase-copy > span::after {
    display: none !important;
  }

  .projects-showcase-img,
  .projects-showcase-img img {
    border-radius: clamp(1.1rem, 4.5vw, 1.75rem) !important;
  }

  .projects-showcase-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: none !important;
    background-color: transparent !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .projects-showcase-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    clip-path: none !important;
  }

  .projects-showcase-item-side .projects-showcase-img,
  .projects-showcase-item-main .projects-showcase-img {
    clip-path: none !important;
  }

  .projects-showcase-controls {
    position: absolute !important;
    z-index: 35 !important;
    left: calc((100vw - var(--projects-mobile-card)) / 2 - clamp(2.4rem, 8vw, 3.15rem)) !important;
    right: calc((100vw - var(--projects-mobile-card)) / 2 - clamp(2.4rem, 8vw, 3.15rem)) !important;
    top: clamp(24.5rem, 49svh, 29.5rem) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
  }

  .projects-showcase-control {
    width: clamp(3.45rem, 13.7vw, 4.3rem) !important;
    height: clamp(3.45rem, 13.7vw, 4.3rem) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #d8bfaa !important;
    color: #000000 !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: none !important;
    pointer-events: auto !important;
  }

  .projects-showcase-control::before {
    display: none !important;
  }

  .projects-showcase-control span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  .projects-showcase-control::after {
    content: "‹" !important;
    display: block !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(2.55rem, 10vw, 3.2rem) !important;
    line-height: 0.72 !important;
    font-weight: 300 !important;
    transform: translate3d(-0.05em, -0.04em, 0) !important;
  }

  .projects-showcase-next::after {
    content: "›" !important;
    transform: translate3d(0.05em, -0.04em, 0) !important;
  }

  .projects-mobile-dots {
    grid-area: dots !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.75rem, 3.5vw, 1rem) !important;
    margin-top: clamp(0.1rem, 0.8svh, 0.35rem) !important;
  }

  .projects-mobile-dots span {
    width: clamp(0.58rem, 2.8vw, 0.78rem) !important;
    height: clamp(0.58rem, 2.8vw, 0.78rem) !important;
    border-radius: 50% !important;
    background-color: rgba(94, 65, 35, 0.34) !important;
  }

  .projects-mobile-dots span.is-active {
    background-color: #000000 !important;
  }

  .projects-mobile-detail {
    grid-area: detail !important;
    width: calc(100% - (var(--projects-mobile-pad) * 2)) !important;
    margin: 0 auto !important;
    display: grid !important;
    align-content: start !important;
    justify-items: start !important;
    gap: clamp(1.05rem, 2.6svh, 1.35rem) !important;
    color: #000000 !important;
  }

  .projects-mobile-detail h1 {
    margin: 0 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(2.15rem, 9.8vw, 3.05rem) !important;
    line-height: 1.02 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .projects-mobile-detail p {
    margin: 0 !important;
    max-width: 27rem !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(1.18rem, 5.35vw, 1.55rem) !important;
    line-height: 1.38 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  .projects-mobile-cta {
    min-width: clamp(12.8rem, 56vw, 17rem) !important;
    min-height: clamp(3.55rem, 8.5svh, 4.1rem) !important;
    padding: 0 clamp(1.65rem, 7vw, 2.2rem) !important;
    border: 2px solid #000000 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(1.2rem, 7vw, 2rem) !important;
    color: #000000 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(1.14rem, 5.05vw, 1.45rem) !important;
    line-height: 1 !important;
  }

  .projects-showcase-title {
    grid-area: title !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 8 !important;
    width: calc(100% - (var(--projects-mobile-pad) * 1.1)) !important;
    margin: 0 auto !important;
    display: flex !important;
    transform: none !important;
  }

  .projects-showcase-word {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    flex: 1 1 50% !important;
    display: flex !important;
    justify-content: space-between !important;
    font-family: 'CabinetGrotesk-light', sans-serif !important;
    font-size: clamp(3.6rem, 18.4vw, 5.15rem) !important;
    line-height: 0.82 !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    transform: none !important;
    overflow-wrap: normal !important;
  }

  .projects-showcase-word > span {
    flex: 0 0 auto !important;
    width: auto !important;
    overflow: visible !important;
    clip-path: none !important;
  }

  .projects-showcase-word > span > span {
    transform: none !important;
  }

  .projects-showcase-word-left {
    padding-right: clamp(0.5rem, 2vw, 0.85rem) !important;
  }

  .projects-showcase-word-right {
    padding-left: clamp(0.5rem, 2vw, 0.85rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-bridge-section,
  body:has(.projects-showcase-hero) .project-page-footer {
    display: none !important;
  }
}

@media (max-width: 767px) and (max-height: 720px) {
  .projects-template-container {
    padding-top: calc(env(safe-area-inset-top) + 5.8rem) !important;
    grid-template-rows: auto minmax(0, 39svh) auto minmax(0, 1fr) auto !important;
    row-gap: 0.78rem !important;
  }

  .projects-service-tab {
    min-height: 3rem !important;
  }

  .projects-mobile-detail {
    gap: 0.72rem !important;
  }

  .projects-mobile-detail p {
    line-height: 1.25 !important;
  }
}

@media (max-width: 767px) {
  .scroll-container > .site-footer {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 0 clamp(1.2rem, 5.8vw, 2.25rem) clamp(1.25rem, 4.2svh, 2rem) !important;
    background-color: #e5d7c6 !important;
    color: #000000 !important;
    overflow: hidden !important;
  }

  .scroll-container > .contact-card {
    position: relative !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 9 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 0 100svh !important;
    transform: none !important;
    translate: none !important;
    overflow: hidden !important;
    will-change: transform !important;
  }

  .scroll-container > .site-footer {
    position: sticky !important;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 8 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: -100svh 0 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    will-change: transform !important;
  }

  .scroll-container > .site-footer .site-footer-inner {
    height: 100% !important;
    min-height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(19svh, 1fr) auto clamp(2.4rem, 6.4svh, 4rem) auto auto !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .scroll-container > .site-footer .site-footer-links {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(1rem, 7vw, 2.6rem) !important;
    row-gap: clamp(1.75rem, 6svh, 2.8rem) !important;
    width: 100% !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #000000 !important;
  }

  .scroll-container > .site-footer .site-footer-group,
  .scroll-container > .site-footer .site-footer-group:nth-child(1),
  .scroll-container > .site-footer .site-footer-group:nth-child(2),
  .scroll-container > .site-footer .site-footer-group:nth-child(3) {
    grid-column: auto !important;
    display: grid !important;
    align-content: start !important;
    justify-items: start !important;
    gap: clamp(0.58rem, 2svh, 1rem) !important;
    min-width: 0 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    color: #000000 !important;
  }

  .scroll-container > .site-footer .site-footer-group:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .scroll-container > .site-footer .site-footer-group:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-items: end !important;
    text-align: right !important;
  }

  .scroll-container > .site-footer .site-footer-group:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 1rem !important;
    align-items: center !important;
    padding: clamp(1.25rem, 4.3svh, 2.2rem) 0 !important;
    border-top: 1px solid #000000 !important;
    justify-items: end !important;
    text-align: right !important;
  }

  .scroll-container > .site-footer .site-footer-group:nth-child(3) .site-footer-label {
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .scroll-container > .site-footer .site-footer-group:nth-child(3) a {
    justify-self: end !important;
    text-align: right !important;
  }

  .scroll-container > .site-footer .site-footer-label {
    margin: 0 0 clamp(0.26rem, 0.9svh, 0.5rem) !important;
    font-size: clamp(0.52rem, 1.95vw, 0.72rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
  }

  .scroll-container > .site-footer .site-footer-group a,
  .scroll-container > .site-footer .site-footer-group button {
    font-size: clamp(1.02rem, 4.35vw, 1.46rem) !important;
    line-height: 1.08 !important;
    color: #000000 !important;
    background-image: none !important;
    white-space: nowrap !important;
  }

  .scroll-container > .site-footer .site-footer-group:nth-child(3) a {
    font-size: clamp(1.02rem, 4.35vw, 1.46rem) !important;
  }

  .scroll-container > .site-footer .site-footer-meta {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0 0 clamp(0.8rem, 2.65svh, 1.35rem) !important;
    border: 0 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(0.82rem, 3.35vw, 1.1rem) !important;
    line-height: 1.08 !important;
    color: #000000 !important;
  }

  .scroll-container > .site-footer .site-footer-meta p:first-child {
    justify-self: start !important;
    text-align: left !important;
  }

  .scroll-container > .site-footer .site-footer-meta p:last-child {
    justify-self: end !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .scroll-container > .site-footer .site-footer-title {
    grid-column: 1 !important;
    grid-row: 5 !important;
    justify-self: center !important;
    align-self: end !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: #000000 !important;
    font-size: clamp(3rem, 18.75vw, 6.95rem) !important;
    line-height: 0.78 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transform: translateX(-0.7%) !important;
  }
}

@media (max-width: 767px) {
  .scroll-container > .masking-overlay-card-about {
    padding: 0 !important;
    background: #eee7da !important;
    color: #090908 !important;
    overflow: visible !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-inner {
    --about-mobile-pad: var(--phone-pad, clamp(1rem, 4.8vw, 1.35rem));
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    isolation: isolate !important;
    transform: none !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-inner::before,
  .scroll-container > .masking-overlay-card-about .about-section-inner::after {
    content: none !important;
    display: none !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-inner > * {
    position: relative !important;
    z-index: 1 !important;
    grid-column: 1 !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  .scroll-container > .masking-overlay-card-about .masking-overlay-about-copy {
    order: 1;
    grid-row: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #090908 !important;
    font-size: clamp(4.8rem, 24vw, 7.4rem) !important;
    line-height: 0.9 !important;
  }

  .scroll-container > .masking-overlay-card-about .masking-overlay-about-copy,
  .scroll-container > .masking-overlay-card-about .about-laptop-note-top,
  .scroll-container > .masking-overlay-card-about .about-laptop-media-top,
  .scroll-container > .masking-overlay-card-about .about-laptop-note-bottom,
  .scroll-container > .masking-overlay-card-about .about-section-statement,
  .scroll-container > .masking-overlay-card-about .about-section-grid {
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--about-mobile-pad) !important;
    padding-right: var(--about-mobile-pad) !important;
    background: #eee7da !important;
  }

  .scroll-container > .masking-overlay-card-about .masking-overlay-about-copy {
    padding-top: var(--about-mobile-pad) !important;
    padding-bottom: clamp(1rem, 4.8svh, 1.8rem) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-note {
    display: block !important;
    width: auto !important;
    color: rgba(9, 9, 8, 0.72) !important;
    font-size: clamp(0.62rem, 2.55vw, 0.78rem) !important;
    letter-spacing: 0.02em !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-note-top {
    order: 3;
    grid-row: 3 !important;
    padding-top: clamp(1rem, 4.8svh, 1.8rem) !important;
    padding-bottom: 0.45rem !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-media {
    display: block !important;
    overflow: hidden !important;
    background: #eee7da !important;
    border: 0 !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    clip-path: inset(0% 0% 0% 0%) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-media-top {
    order: 4;
    grid-row: 4 !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #2c2416 !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-note-bottom {
    order: 5;
    grid-row: 5 !important;
    justify-self: end !important;
    text-align: right !important;
    padding-top: 0.55rem !important;
    padding-bottom: clamp(1rem, 4.8svh, 1.8rem) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-statement {
    order: 2;
    grid-row: 2 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: #eee7da !important;
    border: 0 !important;
    color: #090908 !important;
    font-size: clamp(1.45rem, 7.2vw, 2.2rem) !important;
    line-height: 1.08 !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-grid {
    order: 6;
    grid-row: 6 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(1rem, 4.5svh, 1.8rem) !important;
    padding-top: clamp(1rem, 4.8vw, 1.4rem) !important;
    padding-bottom: clamp(1.4rem, 6svh, 2.4rem) !important;
    background: #eee7da !important;
    border: 0 !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-column {
    display: grid !important;
    gap: 0.55rem !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-label,
  .scroll-container > .masking-overlay-card-about .about-section-body {
    display: block !important;
    color: #090908 !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-label {
    font-size: clamp(0.68rem, 2.8vw, 0.82rem) !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-body {
    font-size: clamp(0.98rem, 4.3vw, 1.2rem) !important;
    line-height: 1.28 !important;
  }

  .scroll-container > .masking-overlay-card-about .masking-overlay-about-copy,
  .scroll-container > .masking-overlay-card-about .about-section-statement,
  .scroll-container > .masking-overlay-card-about .about-section-label,
  .scroll-container > .masking-overlay-card-about .about-section-body,
  .scroll-container > .masking-overlay-card-about .about-laptop-services-word,
  .scroll-container > .masking-overlay-card-about .about-section-fact,
  .scroll-container > .masking-overlay-card-about .about-section-link {
    overflow: visible !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-media-services {
    order: 7;
    grid-row: 7 !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding-top: var(--about-mobile-pad) !important;
    padding-bottom: clamp(1rem, 4.5svh, 1.6rem) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-media-services,
  .scroll-container > .masking-overlay-card-about .about-laptop-services-word,
  .scroll-container > .masking-overlay-card-about .about-section-facts,
  .scroll-container > .masking-overlay-card-about .about-section-link {
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--about-mobile-pad) !important;
    padding-right: var(--about-mobile-pad) !important;
    background: #2c2416 !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-media-services {
    box-shadow: 0 -1px 0 #2c2416, 0 1px 0 #2c2416 !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-services-word {
    display: block !important;
    color: #eee7da !important;
    font-size: clamp(3.2rem, 15.5vw, 5.25rem) !important;
    line-height: 0.92 !important;
    text-transform: uppercase !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-services-word-our {
    order: 8;
    grid-row: 8 !important;
    padding-top: clamp(0.6rem, 3svh, 1rem) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-laptop-services-word-services {
    order: 9;
    grid-row: 9 !important;
    text-align: right !important;
    margin-top: 0 !important;
    padding-bottom: clamp(1rem, 4.5svh, 1.6rem) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-facts {
    order: 10;
    grid-row: 10 !important;
    display: grid !important;
    gap: 0 !important;
    padding-top: clamp(0.6rem, 3svh, 1rem) !important;
    padding-bottom: clamp(1rem, 4.5svh, 1.6rem) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-fact {
    display: grid !important;
    grid-template-columns: 2.4rem minmax(0, 1fr) !important;
    gap: 0.35rem 0.8rem !important;
    padding: 0.9rem 0 !important;
    border-top: 1px solid rgba(238, 231, 218, 0.38) !important;
    color: #eee7da !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-fact:last-child {
    border-bottom: 1px solid rgba(238, 231, 218, 0.38) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-fact span,
  .scroll-container > .masking-overlay-card-about .about-section-fact strong,
  .scroll-container > .masking-overlay-card-about .about-section-fact em {
    color: #eee7da !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-fact em {
    grid-column: 2 !important;
    justify-self: start !important;
    text-align: left !important;
    font-size: clamp(0.7rem, 3vw, 0.86rem) !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-link {
    order: 11;
    grid-row: 11 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - (var(--about-mobile-pad) * 2)) !important;
    justify-self: stretch !important;
    margin-left: var(--about-mobile-pad) !important;
    margin-right: var(--about-mobile-pad) !important;
    margin-bottom: var(--about-mobile-pad) !important;
    padding: 0.95rem 1.2rem !important;
    background: #2c2416 !important;
    color: #eee7da !important;
    border-color: rgba(238, 231, 218, 0.62) !important;
    text-align: center !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-link::before {
    background: #eee7da !important;
  }

  .scroll-container > .masking-overlay-card-about .about-section-link:hover,
  .scroll-container > .masking-overlay-card-about .about-section-link:focus-visible {
    color: #2c2416 !important;
  }
}

/* Final Projects phone layout lock. Keep this after all other mobile overrides. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero),
  body:has(.projects-showcase-hero) .link-page-main,
  body:has(.projects-showcase-hero) .link-page-card,
  body:has(.projects-showcase-hero) .project-page-card,
  body:has(.projects-showcase-hero) .link-page-hero-projects,
  body:has(.projects-showcase-hero) .projects-template-container {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background-color: #d4b99e !important;
  }

  body:has(.projects-showcase-hero) .navbar {
    padding: calc(env(safe-area-inset-top) + clamp(1.95rem, 6.4svh, 3.15rem)) clamp(1.55rem, 7.8vw, 4.4rem) 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    color: #000000 !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(3.65rem, 16vw, 5.45rem) !important;
    height: clamp(3.65rem, 16vw, 5.45rem) !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container {
    --projects-mobile-pad: clamp(1.48rem, 7.8vw, 4.7rem);
    --projects-mobile-card: min(70vw, 28rem);
    --projects-mobile-gap: clamp(0.7rem, 3.2vw, 1.12rem);
    --projects-copy-row: clamp(2.55rem, 7.4svh, 4.75rem);
    padding: calc(env(safe-area-inset-top) + clamp(4.25rem, 13.3svh, 13.6rem)) 0 clamp(0.55rem, 1.7svh, 1.55rem) !important;
    display: grid !important;
    grid-template-areas:
      "services"
      "showcase"
      "dots"
      "detail"
      "title" !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      auto
      minmax(0, clamp(10.8rem, 32.6svh, 36rem))
      auto
      minmax(0, 1fr)
      clamp(2.35rem, 8.8svh, 6.5rem) !important;
    row-gap: clamp(0.42rem, 1.35svh, 0.95rem) !important;
    align-content: stretch !important;
  }

  body:has(.projects-showcase-hero) .projects-service-nav {
    grid-area: services !important;
    width: calc(100% - (var(--projects-mobile-pad) * 2)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
    gap: clamp(0.62rem, 2.55svh, 1.35rem) clamp(0.78rem, 4.1vw, 1.65rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    min-height: clamp(2.62rem, 7.7svh, 4.65rem) !important;
    padding: 0 clamp(0.68rem, 3.4vw, 1.45rem) !important;
    border: 2px solid #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.84rem, 4.18vw, 1.62rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-items {
    grid-area: showcase !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--projects-mobile-gap) !important;
    margin-left: calc(((100vw - var(--projects-mobile-card)) / 2) - ((var(--projects-mobile-card) + var(--projects-mobile-gap)) * 3)) !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-col,
  body:has(.projects-showcase-hero) .projects-showcase-col-main {
    display: contents !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-item,
  body:has(.projects-showcase-hero) .projects-showcase-item-side,
  body:has(.projects-showcase-hero) .projects-showcase-item-main {
    width: var(--projects-mobile-card) !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 0 0 var(--projects-mobile-card) !important;
    display: grid !important;
    grid-template-rows: var(--projects-copy-row) minmax(0, 1fr) !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-copy {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 clamp(0.48rem, 1.55svh, 0.95rem) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.24) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    column-gap: 0.75rem !important;
    font-size: clamp(0.86rem, 4.35vw, 1.55rem) !important;
    line-height: 1.04 !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-item-side .projects-showcase-copy {
    visibility: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img,
  body:has(.projects-showcase-hero) .projects-showcase-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: clamp(0.95rem, 4.3vw, 1.75rem) !important;
    clip-path: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img {
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img img {
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-controls {
    grid-area: showcase !important;
    position: relative !important;
    inset: auto !important;
    z-index: 35 !important;
    align-self: center !important;
    justify-self: center !important;
    width: min(100%, calc(var(--projects-mobile-card) + clamp(4.6rem, 18vw, 7rem))) !important;
    display: flex !important;
    justify-content: space-between !important;
    transform: translateY(calc(var(--projects-copy-row) * 0.38)) !important;
    pointer-events: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-control {
    width: clamp(2.82rem, 13.2vw, 4.55rem) !important;
    height: clamp(2.82rem, 13.2vw, 4.55rem) !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #d8bfaa !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots {
    grid-area: dots !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(0.52rem, 2.8vw, 0.98rem) !important;
    min-height: clamp(0.58rem, 1.75svh, 0.95rem) !important;
    margin: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail {
    grid-area: detail !important;
    width: calc(100% - (var(--projects-mobile-pad) * 2)) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    justify-items: start !important;
    gap: clamp(0.42rem, 1.45svh, 0.9rem) !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail h1 {
    margin: 0 !important;
    width: 100% !important;
    font-size: clamp(1.42rem, 7.35vw, 3rem) !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail p {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(0.84rem, 4.12vw, 1.55rem) !important;
    line-height: 1.25 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-cta {
    min-width: clamp(9.8rem, 46vw, 16.8rem) !important;
    min-height: clamp(2.55rem, 7.35svh, 4.25rem) !important;
    padding: 0 clamp(1.05rem, 5.2vw, 2rem) !important;
    border: 2px solid #000000 !important;
    font-size: clamp(0.88rem, 4.18vw, 1.45rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title {
    grid-area: title !important;
    position: relative !important;
    inset: auto !important;
    align-self: end !important;
    justify-self: center !important;
    width: calc(100% - (var(--projects-mobile-pad) * 1.35)) !important;
    margin: 0 auto !important;
    display: flex !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word {
    display: flex !important;
    justify-content: space-between !important;
    font-size: clamp(2.75rem, 14.7vw, 5.15rem) !important;
    line-height: 0.8 !important;
    overflow-wrap: normal !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > span,
  body:has(.projects-showcase-hero) .projects-showcase-word > span > span {
    transform: none !important;
    overflow: visible !important;
    clip-path: none !important;
  }
}

@media (max-width: 767px) and (max-height: 620px) {
  body:has(.projects-showcase-hero) .projects-template-container {
    padding-top: calc(env(safe-area-inset-top) + clamp(4rem, 12.7svh, 5.25rem)) !important;
    grid-template-rows:
      auto
      minmax(0, clamp(9.8rem, 29svh, 12.5rem))
      auto
      minmax(0, 1fr)
      clamp(2.05rem, 7.6svh, 2.75rem) !important;
    row-gap: clamp(0.3rem, 1.05svh, 0.55rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    min-height: clamp(2.25rem, 7.1svh, 2.75rem) !important;
    font-size: clamp(0.78rem, 3.95vw, 0.95rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail h1 {
    font-size: clamp(1.25rem, 6.85vw, 1.55rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-detail p {
    font-size: clamp(0.74rem, 3.72vw, 0.9rem) !important;
    line-height: 1.18 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-cta {
    min-height: clamp(2.25rem, 6.9svh, 2.65rem) !important;
  }
}

/* EOF Projects phone comp override. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero),
  body:has(.projects-showcase-hero) .link-page-main,
  body:has(.projects-showcase-hero) .link-page-card,
  body:has(.projects-showcase-hero) .project-page-card,
  body:has(.projects-showcase-hero) .link-page-hero-projects,
  body:has(.projects-showcase-hero) .projects-template-container {
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background: #d4b99e !important;
  }

  body:has(.projects-showcase-hero) .projects-bridge-section,
  body:has(.projects-showcase-hero) .project-page-footer {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .navbar {
    padding: calc(env(safe-area-inset-top) + 4.85svh) 6.9vw 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    color: #000000 !important;
    font-size: clamp(1.9rem, 8.4vw, 4.45rem) !important;
    line-height: 0.85 !important;
    letter-spacing: 0 !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(3.35rem, 16.9vw, 5.45rem) !important;
    height: clamp(3.35rem, 16.9vw, 5.45rem) !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body:has(.projects-showcase-hero) .menu-icon {
    width: 47% !important;
    height: 47% !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container {
    --projects-mobile-card: 53.7vw;
    --projects-mobile-gap: 7.2vw;
    position: relative !important;
    display: block !important;
    padding: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-service-nav {
    position: absolute !important;
    z-index: 40 !important;
    top: 13.35svh !important;
    left: 6.85vw !important;
    right: 6.85vw !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1.18fr 1.52fr 0.92fr 1fr !important;
    gap: 2.6vw !important;
    align-items: center !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #000000 !important;
    font-family: 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(0.82rem, 4vw, 1.2rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab::before {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab.is-active,
  body:has(.projects-showcase-hero) .projects-service-tab:hover,
  body:has(.projects-showcase-hero) .projects-service-tab:focus-visible {
    color: #000000 !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-items {
    position: absolute !important;
    z-index: 12 !important;
    top: 28.55svh !important;
    left: 0 !important;
    width: 100vw !important;
    height: 40.8svh !important;
    display: flex !important;
    align-items: stretch !important;
    gap: var(--projects-mobile-gap) !important;
    margin-left: calc(((100vw - var(--projects-mobile-card)) / 2) - ((var(--projects-mobile-card) + var(--projects-mobile-gap)) * 3)) !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-col,
  body:has(.projects-showcase-hero) .projects-showcase-col-main {
    display: contents !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-item,
  body:has(.projects-showcase-hero) .projects-showcase-item-side,
  body:has(.projects-showcase-hero) .projects-showcase-item-main {
    width: var(--projects-mobile-card) !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 0 0 var(--projects-mobile-card) !important;
    display: block !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-copy,
  body:has(.projects-showcase-hero) .projects-showcase-controls,
  body:has(.projects-showcase-hero) .projects-mobile-detail {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img,
  body:has(.projects-showcase-hero) .projects-showcase-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-img img {
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    filter: saturate(0.9) contrast(1.02) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title {
    position: absolute !important;
    z-index: 22 !important;
    inset: auto !important;
    top: 26.7svh !important;
    left: 31.9vw !important;
    width: 36.2vw !important;
    height: 45.7svh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    pointer-events: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word {
    flex: 0 0 auto !important;
    width: 100% !important;
    font-family: 'Retro Qesmo', Georgia, serif !important;
    font-size: clamp(4.25rem, 23.6vw, 9rem) !important;
    font-weight: 400 !important;
    line-height: 0.73 !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before,
  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    display: block !important;
    width: 100% !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before {
    content: "OUR";
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    content: "WORK";
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > span {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots {
    position: absolute !important;
    z-index: 28 !important;
    top: 78.55svh !important;
    left: 50% !important;
    display: flex !important;
    gap: clamp(0.38rem, 1.7vw, 0.62rem) !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span {
    display: block !important;
    width: clamp(0.38rem, 1.65vw, 0.62rem) !important;
    height: clamp(0.38rem, 1.65vw, 0.62rem) !important;
    border: 1.5px solid #000000 !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span.is-active {
    background: #000000 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots span:nth-child(n+4) {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container::after {
    content: "P R O J E C T S";
    position: absolute;
    z-index: 24;
    left: 11.6vw;
    right: 11.6vw;
    top: 86.45svh;
    color: #000000;
    font-family: 'CabinetGrotesk-Regular', sans-serif;
    font-size: clamp(1.05rem, 4.8vw, 1.8rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    word-spacing: clamp(1.05rem, 6.1vw, 2.35rem);
    white-space: nowrap;
  }
}

/* Final phone corrections requested after visual QA. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero) .projects-service-nav {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
  }

  body:has(.projects-showcase-hero) .projects-service-tab {
    flex: 0 0 auto !important;
    font-size: clamp(0.56rem, 2.7vw, 0.95rem) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title {
    left: 50% !important;
    width: 48vw !important;
    transform: translateX(-50%) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word {
    font-family: 'CabinetGrotesk-Bold', 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(3.55rem, 19.8vw, 7.7rem) !important;
    font-weight: 700 !important;
    line-height: 0.82 !important;
    text-align: center !important;
  }
}

/* Final Projects phone sizing and casing pass. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero) .navbar {
    padding: calc(env(safe-area-inset-top) + 4.85svh) 6.85vw 0 !important;
    align-items: flex-start !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    font-size: clamp(1.55rem, 7vw, 2.35rem) !important;
    line-height: 0.88 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .logo-button .rolling-link-hover,
  body:has(.projects-showcase-hero) .logo-button .link-hover-char {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(3.25rem, 13.8vw, 4.1rem) !important;
    height: clamp(3.25rem, 13.8vw, 4.1rem) !important;
  }

  body:has(.projects-showcase-hero) .menu-icon {
    width: 48% !important;
    height: 48% !important;
  }

  body:has(.projects-showcase-hero) .projects-service-nav {
    top: 15.25svh !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word {
    font-family: 'CabinetGrotesk-Light', 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(3.05rem, 17.4vw, 6.8rem) !important;
    font-weight: 300 !important;
    line-height: 0.9 !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before {
    content: "Our" !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    content: "Work" !important;
  }

  body:has(.projects-showcase-hero) .projects-template-container::after {
    left: 7.8vw !important;
    right: 7.8vw !important;
    font-size: clamp(1.35rem, 6.45vw, 2.35rem) !important;
    word-spacing: clamp(0.95rem, 5.05vw, 2rem) !important;
    opacity: var(--projects-bottom-title-opacity, 1) !important;
    transform: translateY(var(--projects-bottom-title-y, 0)) !important;
  }
}

/* Match Projects phone nav to index mobile nav sizing. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero) .navbar {
    --mobile-nav-pad-x: clamp(1.85rem, 7.2vw, 3.35rem);
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 1rem !important;
    padding: calc(env(safe-area-inset-top) + clamp(1.65rem, 7.4vw, 2.35rem)) var(--mobile-nav-pad-x) 0 !important;
  }

  body:has(.projects-showcase-hero) .logo-button,
  body:has(.projects-showcase-hero) .menu-button {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
  }

  body:has(.projects-showcase-hero) .logo-button {
    color: #000000 !important;
    font-size: clamp(1.35rem, 6.3vw, 2rem) !important;
    line-height: 1 !important;
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .logo-button.is-rolling-link {
    display: inline-grid !important;
    grid-template: "stack" auto / auto !important;
  }

  body:has(.projects-showcase-hero) .logo-button .rolling-link-initial {
    display: inline-flex !important;
    grid-area: stack !important;
  }

  body:has(.projects-showcase-hero) .logo-button .rolling-link-hover {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .logo-button .link-hover-char {
    display: inline-block !important;
    transform: none !important;
  }

  body:has(.projects-showcase-hero) .menu-button {
    width: clamp(2.75rem, 10.8vw, 3.35rem) !important;
    height: clamp(2.75rem, 10.8vw, 3.35rem) !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    color: #000000 !important;
    transform: none !important;
    grid-column: 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  body:has(.projects-showcase-hero) .menu-icon {
    width: clamp(1.25rem, 4.9vw, 1.55rem) !important;
    height: clamp(1.25rem, 4.9vw, 1.55rem) !important;
  }

  body:has(.projects-showcase-hero) .menu-icon-line {
    stroke-width: 1.25 !important;
  }
}

/* Give the phone image a little more breathing room between the overlaid words. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero) .projects-showcase-title {
    height: 48.5svh !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left {
    transform: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-right {
    transform: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before {
    transform: translateY(-2.5svh) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    transform: translateY(-4.8svh) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left::before,
  body:has(.projects-showcase-hero) .projects-showcase-word-right::before {
    opacity: var(--projects-final-word-opacity, 1) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title.is-phone-intro-active .projects-showcase-word {
    justify-content: center !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title.is-phone-intro-active .projects-showcase-word-left::before,
  body:has(.projects-showcase-hero) .projects-showcase-title.is-phone-intro-active .projects-showcase-word-right::before {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > .projects-phone-intro-word {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex !important;
    width: 100%;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-align: center;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-left > .projects-phone-intro-word {
    transform: translate(-0.55vw, -2.5svh) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word-right > .projects-phone-intro-word {
    transform: translateY(-10svh) !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > .projects-phone-intro-word > .projects-phone-intro-char-mask {
    display: inline-block !important;
    overflow: hidden !important;
    line-height: inherit;
    clip-path: none !important;
  }

  body:has(.projects-showcase-hero) .projects-showcase-word > .projects-phone-intro-word .projects-phone-intro-char {
    display: inline-block !important;
    transform: translateY(var(--projects-phone-letter-y, 140%)) !important;
    will-change: transform;
  }

  body:has(.projects-showcase-hero) .projects-showcase-title.is-phone-intro-active .projects-showcase-word > span:not(.projects-phone-intro-word) {
    display: none !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots.projects-mobile-meta {
    position: absolute !important;
    z-index: 28 !important;
    top: 78.55svh !important;
    left: 50% !important;
    display: flex !important;
    width: min(72vw, 22rem) !important;
    gap: clamp(0.45rem, 2.1vw, 0.8rem) !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    color: #000000 !important;
    font-family: 'CabinetGrotesk-Regular', sans-serif !important;
    font-size: clamp(0.68rem, 3vw, 0.9rem) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots.projects-mobile-meta span {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 70% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:has(.projects-showcase-hero) .projects-mobile-dots.projects-mobile-meta .projects-mobile-meta-year {
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}

/* Restore previous link-page footer colors while keeping the new layout. */
.link-page-reveal-footer.site-footer {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.link-page-reveal-footer.site-footer .site-footer-group,
.link-page-reveal-footer.site-footer .site-footer-group a,
.link-page-reveal-footer.site-footer .site-footer-group button,
.link-page-reveal-footer.site-footer .site-footer-title,
.link-page-reveal-footer.site-footer .site-footer-meta {
  color: #ffffff !important;
}

.link-page-reveal-footer.site-footer .site-footer-label {
  color: rgba(255, 255, 255, 0.58) !important;
}

.link-page-reveal-footer.site-footer .site-footer-meta,
.link-page-reveal-footer.site-footer .site-footer-links,
.link-page-reveal-footer.site-footer .site-footer-group:nth-child(3) {
  border-color: #ffffff !important;
}

.link-page-reveal-footer.site-footer .site-footer-group a,
.link-page-reveal-footer.site-footer .site-footer-group button {
  background-image: linear-gradient(#ffffff, #ffffff) !important;
}

.link-page-reveal-footer.site-footer .site-footer-group a:hover,
.link-page-reveal-footer.site-footer .site-footer-group a:focus-visible,
.link-page-reveal-footer.site-footer .site-footer-group button:hover,
.link-page-reveal-footer.site-footer .site-footer-group button:focus-visible {
  color: rgba(255, 255, 255, 0.68) !important;
}

/* Allow the Projects phone page to scroll to the content below the hero. */
@media (max-width: 767px) {
  body:has(.projects-showcase-hero),
  body:has(.projects-showcase-hero) .link-page-main,
  body:has(.projects-showcase-hero) .link-page-card,
  body:has(.projects-showcase-hero) .project-page-card {
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  body:has(.projects-showcase-hero) {
    min-height: 100svh !important;
  }

  body:has(.projects-showcase-hero) .link-page-hero-projects,
  body:has(.projects-showcase-hero) .projects-template-container {
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
  }

  body:has(.projects-showcase-hero) .projects-bridge-section,
  body:has(.projects-showcase-hero) .project-page-footer {
    display: block !important;
  }
}

/* Link-page footers should match the index footer design exactly. */
.link-page-reveal-footer.site-footer {
  background-color: #e5d7c6 !important;
  color: #000000 !important;
}

.link-page-reveal-footer .site-footer-group,
.link-page-reveal-footer .site-footer-group a,
.link-page-reveal-footer .site-footer-group button,
.link-page-reveal-footer .site-footer-title,
.link-page-reveal-footer .site-footer-meta {
  color: #000000 !important;
}

.link-page-reveal-footer .site-footer-label {
  color: rgba(0, 0, 0, 0.52) !important;
}

.link-page-reveal-footer .site-footer-meta,
.link-page-reveal-footer .site-footer-links {
  border-color: #000000 !important;
}

.link-page-reveal-footer .site-footer-group a,
.link-page-reveal-footer .site-footer-group button {
  background-image: linear-gradient(#000000, #000000) !important;
}

.link-page-reveal-footer .site-footer-group a:hover,
.link-page-reveal-footer .site-footer-group a:focus-visible,
.link-page-reveal-footer .site-footer-group button:hover,
.link-page-reveal-footer .site-footer-group button:focus-visible {
  color: rgba(0, 0, 0, 0.58) !important;
}

@media (max-width: 767px) {
  .link-page-reveal-footer.site-footer {
    min-height: 100svh !important;
    height: 100svh !important;
    padding: 0 clamp(1.2rem, 5.8vw, 2.25rem) clamp(1.25rem, 4.2svh, 2rem) !important;
    background-color: #e5d7c6 !important;
    color: #000000 !important;
    overflow: hidden !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-inner {
    height: 100% !important;
    min-height: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(19svh, 1fr) auto clamp(2.4rem, 6.4svh, 4rem) auto auto !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-links {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: clamp(1rem, 7vw, 2.6rem) !important;
    row-gap: clamp(1.75rem, 6svh, 2.8rem) !important;
    width: 100% !important;
    padding: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #000000 !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group,
  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(1),
  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(2),
  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(3) {
    grid-column: auto !important;
    display: grid !important;
    align-content: start !important;
    justify-items: start !important;
    gap: clamp(0.58rem, 2svh, 1rem) !important;
    min-width: 0 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    color: #000000 !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-items: end !important;
    text-align: right !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 1rem !important;
    align-items: center !important;
    padding: clamp(1.25rem, 4.3svh, 2.2rem) 0 !important;
    border-top: 1px solid #000000 !important;
    justify-items: end !important;
    text-align: right !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(3) .site-footer-label {
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(3) a {
    justify-self: end !important;
    text-align: right !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-label {
    margin: 0 0 clamp(0.26rem, 0.9svh, 0.5rem) !important;
    font-size: clamp(0.52rem, 1.95vw, 0.72rem) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group a,
  .link-page-reveal-footer.site-footer .site-footer-group button {
    font-size: clamp(1.02rem, 4.35vw, 1.46rem) !important;
    line-height: 1.08 !important;
    color: #000000 !important;
    background-image: none !important;
    white-space: nowrap !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-group:nth-child(3) a {
    font-size: clamp(1.02rem, 4.35vw, 1.46rem) !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-meta {
    grid-column: 1 !important;
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 0 0 clamp(0.8rem, 2.65svh, 1.35rem) !important;
    border: 0 !important;
    font-family: 'CabinetGrotesk-regular', sans-serif !important;
    font-size: clamp(0.82rem, 3.35vw, 1.1rem) !important;
    line-height: 1.08 !important;
    color: #000000 !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-meta p:first-child {
    justify-self: start !important;
    text-align: left !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-meta p:last-child {
    justify-self: end !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-title {
    grid-column: 1 !important;
    grid-row: 5 !important;
    justify-self: center !important;
    align-self: end !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    color: #000000 !important;
    font-size: clamp(3rem, 18.75vw, 6.95rem) !important;
    line-height: 0.78 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transform: translateX(-0.7%) !important;
  }
}

/* Keep the link-page footer design intact, but make the mobile footer shorter. */
@media (max-width: 767px) {
  .link-page-reveal-footer.site-footer {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    padding-top: clamp(1.25rem, 4.2svh, 2rem) !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-inner {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: 0 auto clamp(2.4rem, 6.4svh, 4rem) auto auto !important;
  }
}

/* Apply the settled mobile footer sizing; colors are scoped separately. */
@media (max-width: 767px) {
  .scroll-container > .contact-card {
    margin-bottom: 0 !important;
  }

  .scroll-container > .site-footer {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 8 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(1.25rem, 4.2svh, 2rem) clamp(1.2rem, 5.8vw, 2.25rem) clamp(1.25rem, 4.2svh, 2rem) !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
  }

  .link-page-reveal-footer.site-footer {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 8 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: clamp(1.25rem, 4.2svh, 2rem) clamp(1.2rem, 5.8vw, 2.25rem) clamp(1.25rem, 4.2svh, 2rem) !important;
    overflow: visible !important;
    background-color: #e5d7c6 !important;
    color: #000000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
  }

  .link-page-reveal-footer.site-footer .site-footer-inner {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 0 auto clamp(2.4rem, 6.4svh, 4rem) auto auto !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .scroll-container > .site-footer .site-footer-inner {
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 0 auto clamp(2.4rem, 6.4svh, 4rem) auto auto !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
}

/* Link footer palette: site black and warm off-white, index footer untouched. */
.link-page-reveal-footer.site-footer {
  background-color: var(--menu-overlay-bg) !important;
  color: #e5d7c6 !important;
}

.link-page-reveal-footer.site-footer .site-footer-group,
.link-page-reveal-footer.site-footer .site-footer-group a,
.link-page-reveal-footer.site-footer .site-footer-group button,
.link-page-reveal-footer.site-footer .site-footer-title,
.link-page-reveal-footer.site-footer .site-footer-meta {
  color: #e5d7c6 !important;
}

.link-page-reveal-footer.site-footer .site-footer-label {
  color: rgba(229, 215, 198, 0.62) !important;
}

.link-page-reveal-footer.site-footer .site-footer-meta,
.link-page-reveal-footer.site-footer .site-footer-links,
.link-page-reveal-footer.site-footer .site-footer-group:nth-child(3) {
  border-color: #e5d7c6 !important;
}

.link-page-reveal-footer.site-footer .site-footer-group a,
.link-page-reveal-footer.site-footer .site-footer-group button {
  background-image: linear-gradient(#e5d7c6, #e5d7c6) !important;
}

.link-page-reveal-footer.site-footer .site-footer-group a:hover,
.link-page-reveal-footer.site-footer .site-footer-group a:focus-visible,
.link-page-reveal-footer.site-footer .site-footer-group button:hover,
.link-page-reveal-footer.site-footer .site-footer-group button:focus-visible {
  color: rgba(229, 215, 198, 0.7) !important;
}

.link-page-reveal-footer.site-footer:has(.service-next-transition) .site-footer-links {
  grid-column: 1 / 10;
}

.link-page-reveal-footer .service-next-transition {
  --service-next-progress: 0;
  grid-column: 10 / -1;
  grid-row: 2;
  align-self: start;
  justify-self: stretch;
  display: grid;
  gap: clamp(0.52rem, 0.9vw, 0.86rem);
  width: 100%;
  margin: 0;
  padding-top: 0;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.link-page-reveal-footer .service-next-transition:hover,
.link-page-reveal-footer .service-next-transition:focus-visible {
  color: rgba(229, 215, 198, 0.82) !important;
}

.service-next-kicker {
  display: none;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: 0.74rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(229, 215, 198, 0.62);
}

.service-next-title {
  display: block;
  max-width: 100%;
  font-family: 'CabinetGrotesk-regular', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.14rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  color: currentColor;
  overflow-wrap: normal;
}

.service-next-line {
  display: block;
  width: 100%;
  height: 0.72rem;
  margin-top: clamp(0.28rem, 0.5vw, 0.42rem);
  overflow: visible;
}

.service-next-line svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.service-next-line-track,
.service-next-line-progress {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.service-next-line-track {
  stroke: rgba(229, 215, 198, 0.22);
  stroke-width: 2;
}

.service-next-line-progress {
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.service-next-transition.is-armed .service-next-line-progress {
  stroke-width: 3;
}

.service-next-transition.is-complete {
  pointer-events: none;
}

.service-next-transition.is-complete .service-next-line-progress {
  stroke-width: 3.4;
}

@media (max-width: 767px) {
  .link-page-reveal-footer.site-footer:has(.service-next-transition) .site-footer-inner {
    grid-template-rows: auto clamp(1.6rem, 4.5svh, 2.4rem) auto clamp(3.8rem, 9svh, 5.4rem) auto auto !important;
  }

  .link-page-reveal-footer.site-footer:has(.service-next-transition) .site-footer-links {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .link-page-reveal-footer.site-footer:has(.service-next-transition) .site-footer-meta {
    grid-row: 5 !important;
  }

  .link-page-reveal-footer.site-footer:has(.service-next-transition) .site-footer-title {
    grid-row: 6 !important;
  }

  .link-page-reveal-footer .service-next-transition {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
    column-gap: clamp(1.35rem, 7vw, 2.35rem);
    align-items: center;
    gap: 0;
    width: 100%;
    padding-top: 0;
  }

  .service-next-title {
    grid-column: 1;
    max-width: 100%;
    font-size: clamp(0.82rem, 3.5vw, 1.02rem);
    line-height: 1;
    text-transform: uppercase;
    white-space: normal;
  }

  .service-next-line {
    grid-column: 2;
    height: clamp(0.64rem, 3.2vw, 0.9rem);
    width: calc(100% - clamp(0.75rem, 4vw, 1.35rem));
    margin-top: 0;
    margin-left: clamp(0.75rem, 4vw, 1.35rem);
    align-self: center;
  }
}

/* Homepage parallax layers. */
[data-parallax],
.project-category-title,
.project-list-link {
  --parallax-x: 0px;
  --parallax-y: 0px;
  --parallax-scale: 1;
  will-change: transform;
}

.scroll-container [data-parallax]:not(.card-img-unified):not(.project-preview-image):not(.about-laptop-media img),
.scroll-container .project-category-title,
.scroll-container .project-list-link {
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(var(--parallax-scale));
}

.hero-section [data-parallax],
.project-preview-image[data-parallax],
.about-laptop-media img[data-parallax] {
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(var(--parallax-scale));
}

.project-category-preview .project-preview-image[data-parallax] {
  --project-preview-parallax-bleed: clamp(7rem, 14vh, 10rem);
  top: calc(var(--project-preview-parallax-bleed) * -0.5);
  bottom: auto;
  height: calc(100% + var(--project-preview-parallax-bleed));
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(var(--parallax-scale)) !important;
}

.about-laptop-media {
  transform: none !important;
}

.about-laptop-media img[data-parallax] {
  --about-media-parallax-bleed: clamp(5rem, 13vh, 9rem);
  height: calc(100% + var(--about-media-parallax-bleed)) !important;
  margin-top: calc(var(--about-media-parallax-bleed) * -0.5) !important;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(var(--parallax-scale)) !important;
  will-change: transform, clip-path;
}

.about-laptop-media-services img[data-parallax] {
  --about-media-parallax-bleed: clamp(6rem, 16vh, 11rem);
  margin-top: calc(var(--about-media-parallax-bleed) * -1.2) !important;
}

@media (min-width: 900px) and (max-width: 1440px) and (min-height: 560px) {
  .scroll-container > .hero-section {
    --hero-laptop-left: 4rem;
    --hero-laptop-title-top: clamp(7.75rem, 21.4vh, 8.1rem);
    --hero-laptop-highlight-top: clamp(14.1rem, 37.8vh, 14.4rem);
    --hero-laptop-copy-top: clamp(21.25rem, 56.1vh, 21.6rem);
    --hero-laptop-line-top: clamp(24.3rem, 66.5vh, 25.35rem);
    --hero-laptop-logo-top: clamp(26.2rem, 71.3vh, 27.25rem);
    display: block !important;
    padding: 0 !important;
    background-color: #e5d7c6 !important;
  }

  .scroll-container > .hero-section .hero-title,
  .scroll-container > .hero-section .highlight-container,
  .scroll-container > .hero-section .hero-description,
  .scroll-container > .hero-section .hero-line,
  .scroll-container > .hero-section .bottom-logo {
    position: absolute !important;
    left: var(--hero-laptop-left) !important;
    margin: 0 !important;
  }

  .scroll-container > .hero-section .hero-title {
    top: var(--hero-laptop-title-top) !important;
    font-size: 5rem !important;
    line-height: 1.1 !important;
  }

  .scroll-container > .hero-section .highlight-container {
    top: var(--hero-laptop-highlight-top) !important;
    padding: 0 15px !important;
    font-size: 5rem !important;
    line-height: 1.1 !important;
  }

  .scroll-container > .hero-section .highlight-overlay {
    padding-left: 15px !important;
  }

  .scroll-container > .hero-section .hero-description {
    top: var(--hero-laptop-copy-top) !important;
    padding: 0 !important;
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .scroll-container > .hero-section .hero-line {
    top: var(--hero-laptop-line-top) !important;
    width: calc(67vw - 5.36rem) !important;
  }

  .scroll-container > .hero-section .bottom-logo {
    top: var(--hero-laptop-logo-top) !important;
    font-size: 10.8rem !important;
    line-height: 0.82 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  .scroll-container > .hero-section {
    --hero-mobile-pad: clamp(1.78rem, 8.85vw, 1.78rem);
    min-height: 100svh !important;
    padding: calc(env(safe-area-inset-top) + clamp(8.35rem, 25.55svh, 8.35rem)) var(--hero-mobile-pad) clamp(1rem, 3svh, 1.35rem) !important;
    gap: 0 !important;
    align-content: start !important;
    justify-items: start !important;
    background-color: #e5d7c6 !important;
  }

  .scroll-container > .hero-section .hero-title,
  .scroll-container > .hero-section .highlight-container {
    margin: 0 !important;
    font-size: clamp(2.72rem, 13.45vw, 2.72rem) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  .scroll-container > .hero-section .hero-title {
    margin-bottom: clamp(0.62rem, 2svh, 0.62rem) !important;
  }

  .scroll-container > .hero-section .highlight-container {
    display: inline-block !important;
    position: relative !important;
    padding: 0.04em 0.36em 0.01em !important;
    width: fit-content !important;
    max-width: 100% !important;
    color: #000000 !important;
    overflow: visible !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .scroll-container > .hero-section .highlight-base {
    position: relative !important;
    z-index: 1 !important;
    color: #000000 !important;
  }

  .scroll-container > .hero-section .highlight-overlay {
    display: inline-block !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    z-index: 3 !important;
    padding: 0.15em 0.36em 0.01em !important;
    color: #e5d7c6 !important;
    clip-path: inset(0 100% 0 0) !important;
  }

  .scroll-container > .hero-section .highlight-container.active .highlight-overlay {
    clip-path: inset(0 0 0 0) !important;
  }

  .scroll-container > .hero-section .highlight-container::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background-color: #1f1a0f !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
  }

  .scroll-container > .hero-section .highlight-container.active::after {
    transform: scaleX(1) !important;
  }

  .scroll-container > .hero-section .hero-description {
    max-width: 17.2rem !important;
    margin: clamp(0.9rem, 2.75svh, 0.9rem) 0 0 !important;
    padding: 0 !important;
    font-size: clamp(1.14rem, 5.75vw, 1.14rem) !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
  }

  .scroll-container > .hero-section .hero-line {
    width: 100% !important;
    margin: clamp(1.38rem, 4.2svh, 1.38rem) 0 0 !important;
    border-top-color: #000000 !important;
    transform-origin: left !important;
  }

  .scroll-container > .hero-section .bottom-logo {
    width: 100% !important;
    margin-top: clamp(1.05rem, 3.2svh, 1.05rem) !important;
    font-size: clamp(3.35rem, 16.55vw, 3.35rem) !important;
    line-height: 0.86 !important;
    color: #000000 !important;
    text-align: left !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}

.card-image-button {
  overflow: hidden;
}

.card-image-button .card-img-unified[data-parallax] {
  --parallax-bleed: 12vh;
  --parallax-scale: 1.04;
  height: calc(100% + var(--parallax-bleed)) !important;
  margin-top: calc(var(--parallax-bleed) * -0.5) !important;
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--parallax-scale)) !important;
}

.panel.is-service-transitioning .card-image-button .card-img-unified[data-parallax] {
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
}

.panel.is-service-transitioning [data-parallax] {
  --parallax-x: 0px !important;
  --parallax-y: 0px !important;
}

.site-footer-title[data-parallax] {
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(var(--parallax-scale));
}

@media (max-width: 767px) {
  .card-image-button .card-img-unified[data-parallax] {
    --parallax-bleed: 9svh;
    --parallax-scale: 1.08;
  }

  .project-category-preview .project-preview-image[data-parallax] {
    --project-preview-parallax-bleed: clamp(4.5rem, 12svh, 7rem);
  }

  .about-laptop-media img[data-parallax] {
    --about-media-parallax-bleed: clamp(4rem, 12svh, 7rem);
  }

  .site-footer-title[data-parallax] {
    transform: translate3d(-0.7%, var(--parallax-y), 0) scale(var(--parallax-scale)) !important;
  }
}

/* Projects service filter tabs use the same plain rolling-text hover as links. */
body:has(.projects-showcase-hero) .projects-service-tab,
body:has(.projects-showcase-hero) .projects-service-tab:hover,
body:has(.projects-showcase-hero) .projects-service-tab:focus-visible,
body:has(.projects-showcase-hero) .projects-service-tab.is-active {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #000000 !important;
  overflow: hidden !important;
}

body:has(.projects-showcase-hero) .projects-service-tab::before {
  content: none !important;
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  .navbar {
    padding: clamp(1.8rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3rem);
  }

  .nav-links {
    left: clamp(2rem, 4vw, 3rem);
    right: clamp(2rem, 4vw, 3rem);
    width: auto;
    gap: clamp(1rem, 2vw, 1.6rem);
  }

  .menu-overlay-content {
    padding: clamp(1.8rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3rem);
  }

  .menu-overlay-main {
    --menu-frame-width: clamp(15rem, 30vw, 20rem);
    --menu-frame-height: clamp(8.4rem, 16.875vw, 11.25rem);
    left: clamp(2.5rem, 5vw, 4rem);
    right: clamp(2.5rem, 5vw, 4rem);
    top: clamp(7rem, 12vh, 8.25rem);
    bottom: clamp(8.5rem, 16vw, 12rem);
    grid-template-columns: minmax(11rem, 1fr) auto minmax(11rem, 1fr);
    gap: clamp(1.4rem, 3vw, 2.5rem);
  }

  .menu-overlay-link {
    font-size: clamp(1.8rem, 4.4vw, 3rem);
  }

  .menu-overlay-info {
    width: min(28vw, 18rem);
    gap: clamp(1.4rem, 2.8vw, 2.1rem);
  }

  .menu-overlay-bottom {
    left: clamp(2.5rem, 5vw, 4rem);
    right: clamp(2.5rem, 5vw, 4rem);
  }

  .panel {
    --panel-x-padding: clamp(2.25rem, 4vw, 3rem);
    --panel-top-padding: clamp(3.25rem, 6vw, 4rem);
  }

  .hero-title,
  .highlight-container {
    font-size: clamp(4rem, 7.3vw, 5.2rem);
  }

  .hero-description {
    max-width: 34rem;
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    line-height: 1.18;
  }

  .hero-line {
    width: min(67%, 34rem);
  }

  .bottom-logo {
    font-size: clamp(7.2rem, 14vw, 9rem);
  }

  .service-card-web-dev {
    transform: translateX(calc(100% - clamp(18rem, 39vw, 24rem)));
  }

  .service-card-branding {
    transform: translateX(calc(100% - clamp(13.5rem, 29vw, 18rem)));
  }

  .service-card-marketing {
    transform: translateX(calc(100% - clamp(9rem, 19vw, 12rem)));
  }

  .service-card-architecture {
    transform: translateX(calc(100% - clamp(4.5rem, 10vw, 6.5rem)));
  }

  .card-title {
    font-size: clamp(3rem, 6vw, 4.1rem);
    line-height: 0.92;
  }

  .card-desc {
    max-width: 30rem;
    font-size: clamp(0.96rem, 1.45vw, 1.12rem);
  }

  .masking-overlay-card,
  .masking-overlay-card-about,
  .contact-card,
  .site-footer {
    --overlay-card-padding: clamp(2.25rem, 4.2vw, 3rem);
    --contact-card-padding: clamp(2.25rem, 4.2vw, 3rem);
    padding: clamp(2.25rem, 4.2vw, 3rem);
  }

  .masking-overlay-copy,
  .masking-overlay-about-copy,
  .contact-section-eyebrow {
    font-size: clamp(4rem, 8.2vw, 6rem);
    line-height: 0.98;
  }

  .masking-overlay-copy {
    top: clamp(5.5rem, 11vh, 7rem);
    max-width: calc(100vw - (clamp(2.25rem, 4.2vw, 3rem) * 2));
  }

  .about-section-inner,
  .contact-section-inner {
    grid-template-columns: minmax(0, 0.86fr) minmax(18rem, 1fr);
    column-gap: clamp(2rem, 4vw, 3rem);
  }

  .about-section-statement,
  .contact-section-statement {
    max-width: min(44vw, 30rem);
    font-size: clamp(2rem, 4.3vw, 3.4rem);
  }

  .about-section-grid,
  .contact-section-grid {
    width: min(48vw, 33rem);
    min-width: 0;
    gap: clamp(1.6rem, 3vw, 2.4rem);
  }

  .about-section-body,
  .contact-section-link {
    font-size: clamp(1.05rem, 1.8vw, 1.42rem);
  }

  .contact-section-form {
    width: min(100%, 34rem);
    gap: clamp(0.9rem, 1.9vh, 1.25rem);
  }

  .contact-form-field textarea {
    min-height: clamp(6rem, 14vh, 8rem);
  }

  .site-footer-inner {
    grid-template-rows: minmax(0, 1fr) auto minmax(1rem, 3vh) auto auto;
  }

  .site-footer-title {
    font-size: clamp(7rem, 18vw, 14rem);
  }

  .site-footer-links {
    column-gap: clamp(1rem, 2.4vw, 1.6rem);
  }

  .masking-overlay-description {
    top: clamp(10rem, 20vh, 13rem);
    max-width: min(68vw, 42rem);
    font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  }

  .project-link-list {
    top: clamp(23rem, 48vh, 28rem);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .project-category {
    grid-template-columns: minmax(0, 0.92fr) minmax(13rem, 0.82fr);
    column-gap: clamp(1.8rem, 3.6vw, 2.8rem);
  }

  .project-category-title {
    font-size: clamp(3.2rem, 8vw, 5.8rem);
  }

  .project-category-preview {
    width: min(100%, 18rem);
  }

  .approach-copy-block {
    grid-template-columns: minmax(0, 0.84fr) minmax(18rem, 1fr);
    column-gap: clamp(2rem, 4vw, 3rem);
  }

  .approach-title,
  .approach-title-cover {
    font-size: clamp(2.3rem, 5vw, 3.7rem);
  }

  .approach-steps {
    --approach-step-stack-gap: 22vh;
  }

  .projects-template-container {
    padding: clamp(1.5rem, 3vw, 2rem);
    grid-template-rows: minmax(48px, auto) minmax(18rem, 1fr) auto minmax(1rem, 1fr) auto;
  }

  .projects-service-nav,
  .projects-showcase-controls {
    left: clamp(1.5rem, 3vw, 2rem);
    right: clamp(1.5rem, 3vw, 2rem);
  }

  .projects-showcase-word {
    font-size: clamp(5rem, 12vw, 8rem);
  }

  .link-page-hero,
  .link-page-section,
  .link-page-band,
  .link-projects-board,
  .link-page-footer {
    padding-left: clamp(2.5rem, 5vw, 4rem);
    padding-right: clamp(2.5rem, 5vw, 4rem);
  }

  .link-page-title {
    font-size: clamp(5.4rem, 14vw, 10rem);
  }

  .link-page-hero-projects .link-page-title {
    font-size: clamp(4.5rem, 10.5vw, 7.2rem);
  }

  .link-page-intro {
    max-width: 34rem;
  }

  .link-page-band {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .link-projects-board {
    gap: clamp(4rem, 8vw, 6rem);
  }

  .link-project-service {
    grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3rem);
  }

  .link-project-service h2 {
    position: sticky;
    top: 7.5rem;
    font-size: clamp(2.8rem, 6.8vw, 5rem);
  }

  .link-process-grid article {
    min-height: 100svh;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: clamp(4rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  }

  .link-process-grid article > span {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .link-process-grid article h2 {
    grid-column: 3 / 11;
    grid-row: 1;
    font-size: clamp(4rem, 8.5vw, 6.4rem);
  }

  .link-process-grid article p {
    grid-column: 7 / -1;
    grid-row: 3;
    justify-self: end;
    max-width: 30rem;
    text-align: right;
  }

  .link-page-band h2 {
    grid-column: 1 / 8;
  }

  .link-page-band p {
    grid-column: 7 / -1;
    justify-self: end;
    text-align: right;
  }

  .link-about-layout,
  .link-contact-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.72fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .link-page-hero-approach {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .contact-standalone-page .contact-card {
    --contact-card-padding: clamp(5.75rem, 9vh, 6.8rem) clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vh, 3.5rem);
  }

  .contact-premium-layout {
    width: min(82vw, 48rem);
  }

  .about-premium-page {
    --about-pad: clamp(2.5rem, 5vw, 4rem);
  }

  .about-premium-hero,
  .about-story-section,
  .about-philosophy-section,
  .about-team-section,
  .about-services-deep,
  .about-proof-section,
  .about-testimonial-section {
    padding-left: var(--about-pad);
    padding-right: var(--about-pad);
  }

  .about-premium-hero .link-page-title,
  .about-story-copy h2,
  .about-team-intro h2,
  .about-service-panel h2,
  .about-testimonial-section blockquote {
    font-size: clamp(4rem, 10vw, 7.2rem);
  }

  .about-team-list,
  .about-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-team-member {
    min-height: clamp(30rem, 56vw, 38rem);
  }

  .about-service-panel {
    padding-top: clamp(4rem, 9vw, 6rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
  }

  .about-page-hero {
    padding-left: clamp(2.5rem, 5vw, 4rem);
    padding-right: clamp(2.5rem, 5vw, 4rem);
  }

  .about-page-kicker {
    font-size: clamp(5rem, 11vw, 8rem);
  }

  .about-story-hero {
    grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    padding-left: clamp(2.5rem, 5vw, 4rem);
    padding-right: clamp(2.5rem, 5vw, 4rem);
  }

  .about-story-title {
    font-size: clamp(3.8rem, 7vw, 5.4rem);
  }

  .about-services-showcase,
  .about-clients-showcase,
  .about-client-reasons,
  .about-team-showcase {
    padding-left: clamp(2.5rem, 5vw, 4rem);
    padding-right: clamp(2.5rem, 5vw, 4rem);
  }

  .about-team-heading {
    grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.72fr);
    gap: clamp(2rem, 4vw, 3rem);
  }

  .about-team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}