/* Mobile-only reading scale: keep the title on one line and give body copy room to breathe. */
@media (max-width: 620px) {
  .about-info {
    padding: 28px 20px 72px;
  }

  .about-info h1 {
    max-width: 100%;
    margin-bottom: 58px;
    font-size: clamp(64px, 21.5vw, 112px);
    line-height: 0.9;
    letter-spacing: -0.075em;
    white-space: nowrap;
  }

  .about-introduction {
    gap: 44px;
  }

  .about-location-pair {
    gap: 28px;
    font-size: clamp(16px, 4.5vw, 19px);
    line-height: 1.28;
  }

  .about-copy {
    gap: 32px;
  }

  .about-copy p {
    font-size: clamp(16px, 4.45vw, 18px);
    line-height: 1.62;
    letter-spacing: 0;
    text-align: left;
    text-wrap: pretty;
  }

  .about-summary {
    margin-top: 62px;
  }
}

.about-clients {
  --about-client-gap: clamp(54px, 7vw, 132px);
  overflow: hidden;
  padding: clamp(76px, 10vw, 150px) 0 clamp(70px, 9vw, 130px);
  background: #000;
  color: var(--white);
}

.about-clients-heading {
  margin: 0 0 clamp(34px, 5vw, 72px);
  padding: 0 clamp(20px, 5vw, 92px);
  color: var(--muted);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  text-transform: uppercase;
}

.about-clients-marquee {
  width: 100%;
  overflow: hidden;
  padding: clamp(12px, 1.3vw, 20px) 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.about-clients-track {
  width: max-content;
  display: flex;
  animation: about-clients-scroll 34s linear infinite;
  will-change: transform;
}

.about-clients-marquee-reverse .about-clients-track {
  animation-name: about-clients-scroll-reverse;
  animation-duration: 39s;
}

.about-clients-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--about-client-gap);
  padding-right: var(--about-client-gap);
}

.about-clients-group span {
  min-width: max-content;
  color: rgba(232, 229, 225, 0.66);
  font-family: "Inter", "Noto Sans", "Source Sans 3", sans-serif;
  font-size: clamp(30px, 4.2vw, 72px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  transition: color 0.3s ease;
}

.about-clients-marquee:hover .about-clients-track {
  animation-play-state: paused;
}

.about-clients-group span:hover {
  color: var(--gold);
}

@keyframes about-clients-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes about-clients-scroll-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .about-clients-track {
    animation-play-state: paused;
  }
}

@media (max-width: 620px) {
  .about-clients {
    --about-client-gap: 44px;
    padding: 68px 0 72px;
  }

  .about-clients-heading {
    margin-bottom: 30px;
    padding-inline: 20px;
  }

  .about-clients-group span {
    font-size: clamp(29px, 10vw, 48px);
  }
}

/* Cover-style secondary-page header with the client marquee as the final content layer. */
.about-main {
  padding-top: 0;
}

.site-header.site-header.about-header {
  border-bottom-color: #000;
  background: #000;
}

.about-info {
  position: relative;
  min-height: 0;
  padding: 0 clamp(20px, 4vw, 72px) clamp(36px, 4vw, 64px);
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.about-page-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(300px, 21.3vw, 644px);
  min-height: 300px;
  margin: 0 clamp(-72px, -4vw, -20px) clamp(54px, 6vw, 96px);
  padding: 72px clamp(20px, 4vw, 72px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(112, 81, 43, 0.2), transparent 44%),
    radial-gradient(ellipse at 78% 28%, rgba(126, 86, 38, 0.16), transparent 46%),
    linear-gradient(116deg, #050505 0%, #000 48%, #080604 100%);
}

.about-page-heading::before,
.about-page-heading::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.78;
}

.about-page-heading::before {
  width: 78%;
  height: 128%;
  top: -58%;
  left: -16%;
  background: radial-gradient(ellipse at center, rgba(192, 153, 104, 0.2), transparent 62%);
  transform: rotate(-16deg);
}

.about-page-heading::after {
  width: 74%;
  height: 112%;
  right: -22%;
  bottom: -54%;
  background: radial-gradient(ellipse at center, rgba(92, 72, 48, 0.26), transparent 64%);
  transform: rotate(24deg);
}

.about-offices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.5vw, 48px);
  padding: 0 0 clamp(46px, 6vw, 96px);
}

.about-cases-section {
  scroll-margin-top: calc(var(--lekas-header-height, 72px) + 24px);
  border-top: 1px solid var(--line);
}

.about-work-intro {
  min-height: clamp(360px, 34vw, 650px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  align-items: end;
  gap: clamp(42px, 8vw, 150px);
  padding: clamp(68px, 8vw, 140px) 0 clamp(60px, 7vw, 120px);
  border-bottom: 1px solid var(--line);
}

.about-work-intro h2 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 5.5vw, 96px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.06em;
}

html[lang="en"] .about-work-intro h2,
html[lang="en"] .about-case-card h3 {
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

html[lang="en"] .about-work-intro h2 {
  font-size: clamp(38px, 4.8vw, 82px);
  line-height: 1.1;
}

.about-work-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 34px;
  align-self: end;
}

.about-work-filters button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font-size: clamp(16px, 1.3vw, 23px);
  transition: color 0.25s ease;
}

.about-work-filters button:hover,
.about-work-filters button:focus-visible,
.about-work-filters button.is-active {
  color: #fff;
}

.about-work-filters button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 5px;
}

.about-work-cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(60px, 8vw, 132px) clamp(24px, 3vw, 54px);
  padding: clamp(58px, 7vw, 120px) 0 clamp(70px, 8vw, 130px);
}

.about-case-card {
  min-width: 0;
}

.about-case-card[hidden] {
  display: none;
}

.about-case-media {
  display: block;
  aspect-ratio: 1.32 / 1;
  overflow: hidden;
  background: #111;
}

.about-case-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 0.65s ease, filter 0.65s ease;
}

.about-case-card:hover .about-case-media img,
.about-case-card:focus-within .about-case-media img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.06);
}

.about-case-client {
  margin: 16px 0 7px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.about-case-card h3 {
  margin: 0;
  color: #e4dfd8;
  font-size: clamp(18px, 1.55vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.about-office-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(18px, 2vw, 30px);
  align-content: start;
}

.about-office-media {
  min-width: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111;
}

.about-office-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.88) contrast(1.04);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}

.about-office-card:hover .about-office-media img,
.about-office-card:focus-within .about-office-media img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.02);
}

.about-office-details {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(18px, 2vw, 34px);
  align-items: start;
}

.about-office-details h2 {
  margin: 0;
  font-size: clamp(25px, 2.2vw, 42px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-office-details address {
  display: grid;
  gap: 12px;
  margin: 0;
  font-size: clamp(14px, 1vw, 18px);
  font-style: normal;
  line-height: 1.4;
}

.about-office-details address > span {
  display: block;
}

html[lang="en"] .about-office-details {
  overflow-wrap: anywhere;
}

html[lang="en"] .about-office-details h2 {
  text-transform: none;
}

.about-info h1,
html[lang="en"] .about-info h1 {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0;
  color: var(--white);
  font-size: clamp(48px, 4.2vw, 88px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .about-offices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .about-offices {
    grid-template-columns: 1fr;
  }

  .about-office-card {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
  }

  .about-cases-section {
    scroll-margin-top: calc(var(--lekas-header-mobile-height, 104px) + 20px);
  }

  .about-work-intro {
    min-height: 500px;
    grid-template-columns: 1fr;
    align-items: end;
  }

  .about-work-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px;
  }

  .about-work-cases {
    gap: 62px 22px;
  }
}

.about-clients {
  padding: clamp(54px, 6vw, 92px) 0 clamp(42px, 6vw, 92px);
}

.about-clients-heading {
  margin-bottom: clamp(24px, 3vw, 48px);
}

.about-summary {
  margin-top: clamp(42px, 5vw, 80px);
  padding: 0 clamp(20px, 4vw, 72px) clamp(36px, 4vw, 64px);
}

@media (max-width: 620px) {
  .about-info {
    padding: 0 16px 48px;
  }

  .about-page-heading {
    height: 360px;
    min-height: 360px;
    margin: 0 -16px 42px;
    padding: 70px 16px;
    background:
      radial-gradient(ellipse at 10% 20%, rgba(103, 76, 43, 0.18), transparent 46%),
      radial-gradient(ellipse at 92% 38%, rgba(126, 86, 38, 0.14), transparent 48%),
      #000;
  }

  .about-info h1,
  html[lang="en"] .about-info h1 {
    font-size: clamp(42px, 13vw, 72px);
    line-height: 1;
    text-align: center;
  }

  .about-offices {
    padding-bottom: 24px;
  }

  .about-office-card {
    gap: 18px;
  }

  .about-office-details {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-office-details h2 {
    font-size: clamp(28px, 9vw, 42px);
  }

  .about-work-intro {
    min-height: 430px;
    padding: 58px 0 48px;
  }

  .about-work-intro h2,
  html[lang="en"] .about-work-intro h2 {
    font-size: clamp(34px, 10vw, 50px);
  }

  .about-work-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
  }

  .about-work-filters button {
    font-size: 16px;
  }

  .about-work-cases {
    grid-template-columns: 1fr;
    gap: 58px;
    padding: 58px 0 72px;
  }

  .about-case-card h3 {
    font-size: 22px;
  }

  .about-clients {
    padding: 48px 0 54px;
  }

  .about-clients-heading {
    margin-bottom: 24px;
  }

  .about-summary {
    margin-top: 42px;
    padding: 0 16px 48px;
  }
}

/* About secondary page: black reference-style cover followed by a light editorial layout. */
html {
  background: #000;
}

body.about-page {
  background: #fff;
  color: #111;
  --white: #111;
  --muted: #68635c;
  --line: #d8d3cc;
}

body.about-page .about-info {
  padding-bottom: clamp(72px, 8vw, 132px);
  background: #fff;
  color: #111;
}

body.about-page .about-page-heading {
  position: relative;
  height: clamp(330px, 27vw, 520px);
  min-height: 330px;
  margin: 0 0 clamp(62px, 7vw, 112px);
  padding: 72px clamp(28px, 8vw, 168px) 48px;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
  background: #030303 url("../images/services-cover-abstract.jpg") center 52% / cover no-repeat;
}

body.about-page .about-page-heading::before,
body.about-page .about-page-heading::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

body.about-page .about-page-heading::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.46)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.2));
}

body.about-page .about-page-heading::after {
  top: auto;
  height: 38%;
  background: linear-gradient(180deg, transparent, #000);
}

.about-page-heading-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1160px, 100%);
  gap: 0;
  color: #fff;
}

body.about-page .about-page-heading h1,
html[lang="en"] body.about-page .about-page-heading h1 {
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 3.5vw, 62px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: left;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.8);
}

body.about-page .about-office-details h2,
body.about-page .about-office-details address,
body.about-page .about-office-details address > span,
body.about-page .about-summary p {
  color: #111;
}

body.about-page .about-cases-section {
  border-top-color: var(--line);
}

body.about-page .about-work-intro {
  border-bottom-color: var(--line);
}

body.about-page .about-work-intro h2,
body.about-page .about-work-filters button,
body.about-page .about-case-card h3 {
  color: #111;
}

body.about-page .about-work-filters button:hover,
body.about-page .about-work-filters button:focus-visible,
body.about-page .about-work-filters button.is-active {
  color: #111;
}

body.about-page .about-case-client {
  color: #111;
}

@media (max-width: 900px) {
  body.about-page .about-page-heading {
    height: clamp(330px, 58vw, 500px);
  }
}

@media (max-width: 620px) {
  body.about-page .about-info {
    padding: 0 16px 72px;
  }

  body.about-page .about-page-heading {
    height: 360px;
    min-height: 360px;
    margin: 0 -16px 48px;
    padding: 70px 20px 48px;
  }

  body.about-page .about-page-heading h1,
  html[lang="en"] body.about-page .about-page-heading h1 {
    font-size: clamp(28px, 7.5vw, 42px);
    line-height: 1;
  }
}

/* Unified secondary-page cover: edge-to-edge black canvas with a continuous rule. */
body.about-page {
  background: #000;
}

body.about-page {
  color: #f4f1ed;
  --white: #f4f1ed;
  --muted: rgba(244, 241, 237, 0.58);
  --line: rgba(244, 241, 237, 0.2);
}

body.about-page .site-header.site-header.about-header {
  border-bottom-color: rgba(244, 241, 237, 0.28);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.08));
}

body.about-page .about-main,
body.about-page .about-info {
  padding-top: 0;
  padding-inline: 0;
  background: #000;
  color: #f4f1ed;
}

body.about-page .about-info {
  padding-bottom: clamp(72px, 8vw, 132px);
}

/* Final synchronized scale for the About secondary-page cover. */
body.about-page .site-header.site-header .brand,
body.about-page .site-header.site-header .brand img {
  width: clamp(92px, 7vw, 102px);
}

body.about-page .site-header.site-header .brand {
  height: auto;
}

body.about-page .site-header.site-header .brand img {
  min-width: 0;
  height: auto;
}

body.about-page .about-page-heading {
  width: 100%;
  height: clamp(330px, 27vw, 520px);
  min-height: 330px;
  margin: 0 0 clamp(54px, 6vw, 96px);
  padding: 72px clamp(28px, 8vw, 168px) 48px;
  align-items: center;
  justify-content: flex-start;
  border-top: 0;
  border-bottom: 1px solid rgba(244, 241, 237, 0.72);
  background: #030303 url("../images/services-cover-abstract.jpg") center 52% / cover no-repeat;
}

body.about-page .about-page-heading::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.46)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.2));
}

body.about-page .about-page-heading::after {
  top: auto;
  height: 38%;
  background: linear-gradient(180deg, transparent, #000);
}

body.about-page .about-page-heading-content {
  width: min(900px, 100%);
  gap: clamp(8px, 1vw, 14px);
}

body.about-page .about-page-heading h1,
html[lang="en"] body.about-page .about-page-heading h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.4vw, 64px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-align: left;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.8);
}

body.about-page .about-offices,
body.about-page .about-cases-section {
  margin-inline: clamp(20px, 4vw, 72px);
}

body.about-page .about-office-details h2,
body.about-page .about-office-details address,
body.about-page .about-office-details address > span,
body.about-page .about-summary p,
body.about-page .about-work-intro h2,
body.about-page .about-work-filters button,
body.about-page .about-case-card h3 {
  color: #f4f1ed;
}

body.about-page .about-case-client {
  color: var(--muted);
}

body.about-page .about-cases-section,
body.about-page .about-work-intro {
  border-color: var(--line);
}

body.about-page .about-work-filters button:hover,
body.about-page .about-work-filters button:focus-visible,
body.about-page .about-work-filters button.is-active {
  color: #fff;
}

@media (max-width: 620px) {
  body.about-page .about-info {
    padding-bottom: 72px;
  }

  body.about-page .about-page-heading {
    height: 360px;
    min-height: 360px;
    margin: 0 0 42px;
    padding: 70px 20px 48px;
  }

  body.about-page .about-page-heading h1,
  html[lang="en"] body.about-page .about-page-heading h1 {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 0.95;
  }

  body.about-page .about-page-heading-content {
    width: min(680px, 100%);
    gap: 10px;
  }

  body.about-page .about-offices,
  body.about-page .about-cases-section {
    margin-inline: 16px;
  }
}

/* Final requested treatment: use the shared secondary-page cover and shared navigation logo scale. */
body.about-page .site-header.site-header .brand,
body.about-page .site-header.site-header .brand img {
  width: 194px !important;
  min-width: 194px !important;
}

body.about-page .site-header.site-header .brand {
  height: 27px !important;
}

body.about-page .site-header.site-header .brand img {
  height: 27px !important;
  aspect-ratio: 194 / 27;
}

body.about-page .site-header.site-header.about-header {
  background: #000 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.about-page .about-page-heading {
  height: clamp(330px, 27vw, 520px);
  min-height: 330px;
  background: #030303 url("../images/services-cover-abstract.jpg") center 52% / cover no-repeat;
}

/* Match the Services cover overlays exactly; the About page must not add a brighter glow. */
body.about-page .about-page-heading::before,
body.about-page .about-page-heading::after {
  inset: 0;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  filter: none;
  opacity: 1;
  transform: none;
}

body.about-page .about-page-heading::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.46)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.2));
}

body.about-page .about-page-heading::after {
  top: auto;
  height: 38%;
  background: linear-gradient(180deg, transparent, #000);
}

body.about-page .about-page-heading-content {
  width: min(960px, 100%) !important;
  gap: clamp(8px, 1.2vw, 18px) !important;
}

body.about-page .about-page-heading h1,
html[lang="en"] body.about-page .about-page-heading h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.4vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.04em !important;
  text-align: left;
}

body.about-page .about-cover-subtitle,
body.about-page .about-cover-description {
  margin: 0;
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.72);
}

body.about-page .about-cover-subtitle {
  font-size: clamp(18px, 1.7vw, 31px);
  font-weight: 500;
  line-height: 1.1;
}

body.about-page .about-cover-description {
  max-width: 930px;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

body.about-page .about-case-description {
  max-width: 62ch;
  margin: 14px 0 0;
  color: rgba(244, 241, 237, 0.68);
  font-size: clamp(14px, 1vw, 17px);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0;
  text-wrap: pretty;
}

html[lang="en"] body.about-page .about-case-description {
  max-width: 60ch;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  body.about-page .site-header.site-header .brand,
  body.about-page .site-header.site-header .brand img {
    width: clamp(140px, 46vw, 194px) !important;
    min-width: 0 !important;
  }

  body.about-page .site-header.site-header .brand {
    height: auto !important;
  }

  body.about-page .site-header.site-header .brand img {
    height: auto !important;
  }

  body.about-page .about-page-heading {
    height: 360px;
    min-height: 360px;
    background-position: center 52%;
  }

  /* Keep the taller, multi-line About copy clear of the two-row mobile header. */
  body.about-page .about-page-heading-content {
    transform: translateY(34px);
  }

  body.about-page .about-page-heading h1,
  html[lang="en"] body.about-page .about-page-heading h1 {
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 0.95 !important;
  }

  body.about-page .about-page-heading-content {
    width: min(680px, 100%) !important;
    gap: 10px !important;
  }

  body.about-page .about-cover-subtitle {
    font-size: clamp(17px, 5vw, 22px);
  }

  body.about-page .about-cover-description {
    font-size: 15px;
    line-height: 1.55;
  }

  body.about-page .about-case-description {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.62;
  }
}

/* The About menu is currently replaced by the shared header navigation.
   Keep its legacy aside out of the document flow so it cannot render as
   unstyled links at the bottom of the page. */
body.about-page .about-menu {
  display: none !important;
}

/* Compact the case-intro band to match the requested tighter rhythm. */
body.about-page .about-work-intro {
  min-height: clamp(280px, 17vw, 325px);
  padding-top: clamp(34px, 4vw, 70px);
  padding-bottom: clamp(30px, 3.5vw, 60px);
}

@media (max-width: 900px) {
  body.about-page .about-work-intro {
    min-height: 250px;
    padding-top: 34px;
    padding-bottom: 30px;
  }
}

@media (max-width: 620px) {
  body.about-page .about-work-intro {
    min-height: 320px;
    padding: 30px 0 24px;
  }
}

/* About page cover: center the shared wallpaper on both axes. */
body.about-page .about-page-heading {
  background-position: center center;
}

/* About page cover: shift wallpaper slightly left while keeping vertical centering. */
body.about-page .about-page-heading {
  background-position: 56% center;
}

/* Keep the About and Contact secondary covers aligned. */
body.about-page .about-page-heading {
  min-height: clamp(330px, 27vw, 520px);
  height: clamp(330px, 27vw, 520px);
  background-position: center 52%;
}

/* Final shared cover geometry for About and Contact. */
body.about-page .about-page-heading {
  height: clamp(500px, 27vw, 644px) !important;
  min-height: clamp(500px, 27vw, 644px) !important;
  background-position: center center !important;
}

/* Keep the established About cover crop proportional while the viewport is zoomed. */
html body.about-page .about-page-heading {
  background-size: calc(100% + 1.85vw) auto !important;
  background-position: calc(50% - 9.23vw) center !important;
}

@media (max-width: 620px) {
  html body.about-page .about-page-heading {
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Mobile About only: keep the fixed navigation and long cover copy inside
   the viewport.  The desktop cover geometry remains unchanged. */
@media (max-width: 620px) {
  body.about-page {
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
  }

  body.about-page,
  body.about-page *,
  body.about-page *::before,
  body.about-page *::after {
    box-sizing: border-box;
  }

  body.about-page .about-main {
    padding-top: var(--lekas-header-mobile-height) !important;
  }

  body.about-page .about-page-heading {
    width: 100%;
    height: auto !important;
    min-height: var(--lekas-secondary-cover-mobile-height, 360px) !important;
    margin-inline: 0;
    padding: 70px 16px 48px;
  }

  /* The English introduction is taller than the compact Chinese version;
     let this About-only cover grow with its translated copy instead of
     clipping the final lines inside the shared 360px mobile frame. */
  html body.about-page .about-page-heading {
    height: auto !important;
  }

  body.about-page .about-page-heading-content {
    width: 100% !important;
    max-width: none !important;
    gap: 10px !important;
    transform: none;
  }

  body.about-page .about-page-heading h1,
  html[lang="en"] body.about-page .about-page-heading h1 {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(26px, 8.2vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  body.about-page .about-cover-description {
    width: 100%;
    max-width: none;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: clamp(15px, 4.15vw, 18px);
    line-height: 1.6;
  }
}

/* About cover: give Chinese and English introductions one shared, centered
   reading axis so the headline and supporting copy feel like a single unit. */
body.about-page .about-page-heading {
  justify-content: center;
  padding-inline: clamp(24px, 6vw, 112px);
}

body.about-page .about-page-heading-content {
  width: min(1080px, 100%) !important;
  justify-items: center;
  text-align: center;
}

body.about-page .about-page-heading h1,
html[lang="en"] body.about-page .about-page-heading h1 {
  max-width: 100%;
  font-size: clamp(36px, 3vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  text-align: center;
  text-wrap: balance;
}

html[lang="en"] body.about-page .about-page-heading h1 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(28px, 2.55vw, 48px) !important;
  letter-spacing: -0.025em !important;
}

body.about-page .about-cover-description {
  max-width: 960px;
  font-size: clamp(15px, 1.08vw, 19px);
  line-height: 1.62;
  text-align: center;
  text-wrap: pretty;
}

@media (max-width: 620px) {
  body.about-page .about-page-heading {
    padding-inline: 20px;
  }

  body.about-page .about-page-heading-content {
    justify-items: center;
    text-align: center;
  }

  body.about-page .about-page-heading h1,
  html[lang="en"] body.about-page .about-page-heading h1 {
    max-width: 100%;
    white-space: normal;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.12 !important;
  }

  body.about-page .about-cover-description {
    font-size: clamp(14px, 4vw, 17px);
    line-height: 1.58;
    text-align: center;
  }
}

/* About introduction: brand artwork and copy use the existing language toggle.
   Fresh selectors keep this layout independent of the legacy shared covers. */
body.about-page {
  margin: 0;
}

body.about-page .about-main {
  padding-top: var(--lekas-header-height, 72px);
}

.about-editorial,
.about-editorial * {
  box-sizing: border-box;
}

.about-editorial {
  --about-inline: clamp(24px, 5vw, 96px);
  --about-header-height: var(--lekas-header-height, 72px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: clamp(28px, 4vh, 56px);
  height: calc(100svh - var(--about-header-height));
  padding: clamp(32px, 4vh, 64px) var(--about-inline) clamp(36px, 5vh, 72px);
  margin-bottom: clamp(54px, 6vw, 96px);
  background:
    linear-gradient(180deg, rgba(35, 18, 3, 0.18), rgba(35, 18, 3, 0.34)),
    url("../images/about-cover-gold-gradient.png") center / cover no-repeat;
  color: #fff;
  font-family: var(--font-zh, sans-serif);
}

.about-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(36px, 4.5vw, 86px);
  width: 100%;
  min-height: 0;
  margin-inline: auto;
}

.about-overview-content {
  min-width: 0;
  padding-block: 0;
}

body.about-page .about-overview .about-overview-title {
  width: min(100%, 460px);
  margin: 0 0 clamp(30px, 3vw, 48px);
  padding: 0;
  line-height: 0;
}

.about-overview-logo {
  display: block;
  width: 100%;
  height: auto;
}

.about-overview-description {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 1.6vw, 28px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  text-wrap: balance;
}

.about-overview-artwork {
  --about-artwork-radius: 24;
  --about-artwork-inset: 0.2;
  min-width: 0;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  background: #e4e5e3;
}

.about-overview-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% center;
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 8vw, 140px);
  position: relative;
  width: 100%;
  margin: 0;
  padding-top: clamp(30px, 3vw, 48px);
}

.about-principles::before {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--about-inline));
  right: calc(-1 * var(--about-inline));
  border-top: 1px solid rgba(255, 255, 255, 0.48);
  content: "";
}

.about-principle-copy {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 1.85vw, 32px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-wrap: balance;
}

html[lang="en"] .about-editorial {
  font-family: var(--font-en, sans-serif);
}

html[lang="en"] .about-overview-description {
  font-size: clamp(19px, 1.55vw, 26px);
  line-height: 1.65;
}

html[lang="en"] .about-principle-copy {
  font-size: clamp(20px, 1.65vw, 28px);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .about-editorial {
    --about-header-height: var(--lekas-header-mobile-height, 104px);
  }

  body.about-page .about-main {
    padding-top: var(--lekas-header-mobile-height, 104px);
  }

  .about-overview {
    gap: 30px;
  }

  .about-principles {
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .about-editorial {
    --about-inline: 24px;
    display: block;
    height: auto;
    min-height: calc(100svh - var(--about-header-height));
    padding: 38px var(--about-inline) 44px;
  }

  .about-overview {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-overview-content {
    padding: 0;
  }

  body.about-page .about-overview .about-overview-title {
    width: min(100%, 390px);
    margin-bottom: 28px;
  }

  .about-overview-description,
  html[lang="en"] .about-overview-description {
    font-size: 18px;
    line-height: 1.8;
  }

  .about-overview-artwork {
    --about-artwork-radius: 14;
    --about-artwork-inset: 0.1;
    height: auto;
    aspect-ratio: 4 / 3;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
  }

  .about-principles {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 34px;
    padding-top: 28px;
  }

  .about-principle + .about-principle {
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.48);
  }
}

/* Short windows keep all translated copy readable instead of clipping it. */
@media (min-width: 761px) and (max-height: 640px) {
  .about-editorial {
    height: auto;
    min-height: calc(100svh - var(--about-header-height));
  }

  .about-overview-artwork {
    height: clamp(280px, 35vw, 420px);
  }
}

/* App layout: use content-driven heights and one spacing scale below the
   shared mobile-header breakpoint. Desktop artwork and composition stay intact. */
@media (max-width: 900px) {
  body.about-page {
    --about-mobile-inline: clamp(18px, 4.5vw, 32px);
  }

  .about-editorial {
    --about-inline: var(--about-mobile-inline);
    display: block;
    height: auto;
    min-height: 0;
    padding: clamp(28px, 5vw, 44px) var(--about-inline) 36px;
    margin-bottom: 40px;
  }

  .about-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }

  body.about-page .about-overview .about-overview-title {
    width: min(100%, 340px);
    margin-bottom: 22px;
  }

  .about-overview-description,
  html[lang="en"] .about-overview-description {
    font-size: 17px;
    line-height: 1.75;
    text-wrap: pretty;
  }

  .about-overview-artwork {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    align-self: center;
    border-radius: 18px;
    /* Override the inline desktop path generated by about.js. */
    clip-path: none !important;
  }

  .about-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 32px;
    padding-top: 28px;
  }

  .about-principle + .about-principle {
    padding-top: 0;
    border-top: 0;
  }

  .about-principle-copy,
  html[lang="en"] .about-principle-copy {
    font-size: 19px;
    line-height: 1.65;
    text-wrap: pretty;
  }

  body.about-page .about-offices,
  body.about-page .about-cases-section {
    margin-inline: var(--about-mobile-inline);
  }

  .about-offices {
    gap: 32px;
    padding-bottom: 32px;
  }

  .about-office-card {
    gap: 18px;
    padding-bottom: 32px;
  }

  .about-office-card:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .about-office-details {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.about-page .about-office-details h2 {
    font-size: 28px;
    line-height: 1.2;
  }

  .about-office-details address {
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  body.about-page .about-work-intro {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
    padding: 30px 0 24px;
  }

  body.about-page .about-work-intro h2,
  html[lang="en"] body.about-page .about-work-intro h2 {
    font-size: clamp(26px, 6.5vw, 36px);
    line-height: 1.3;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .about-work-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 16px;
    align-self: start;
    align-items: stretch;
  }

  .about-work-filters button {
    min-height: 44px;
    padding-block: 6px;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .about-work-cases {
    gap: 64px 24px;
    padding: 32px 0 0;
  }

  .about-case-client {
    margin: 14px 0 8px;
    line-height: 1.5;
  }

  body.about-page .about-case-card h3 {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 0;
  }

  body.about-page .about-case-description {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.7;
  }

  body.about-page .about-info {
    padding-bottom: 44px;
  }
}

@media (max-width: 620px) {
  .about-overview,
  .about-principles {
    grid-template-columns: 1fr;
  }

  .about-principles {
    gap: 24px;
    margin-top: 28px;
    padding-top: 24px;
  }

  .about-principle + .about-principle {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.48);
  }
}

/* Final About cover hierarchy: the cover is one complete viewport, while the
   two service statements begin in their own content layer below it. */
body.about-page .about-editorial {
  display: block;
  height: calc(100svh - var(--about-header-height));
  min-height: calc(100svh - var(--about-header-height));
  margin-bottom: 0;
}

body.about-page .about-overview {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

body.about-page .about-overview-content {
  width: min(100%, 720px);
}

body.about-page .about-principles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 8vw, 140px);
  width: 100%;
  margin: 0;
  padding: clamp(72px, 8vw, 132px) clamp(24px, 5vw, 96px);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  background: #000;
}

body.about-page .about-principles::before {
  content: none;
}

@media (max-width: 900px) {
  body.about-page .about-editorial {
    height: calc(100svh - var(--about-header-height));
    min-height: calc(100svh - var(--about-header-height));
    padding: clamp(28px, 5vw, 44px) var(--about-inline);
  }

  body.about-page .about-overview-content {
    width: min(100%, 620px);
  }

  body.about-page .about-principles {
    margin: 0;
    padding: clamp(56px, 10vw, 88px) var(--about-mobile-inline);
  }
}

@media (max-width: 620px) {
  body.about-page .about-principles {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.about-page .about-principle + .about-principle {
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }
}

/* About hero light field — one warm light rising out of the floor with no
   lamp hung above the frame.  The only variation in the field is vertical:
   the frame is densest at the top edge and gets steadily brighter as the eye
   travels down, so the light reads as a single gradient instead of a band
   that switches on near the header.  The copy column sits in the upper
   middle of that ramp so the white text keeps its contrast.
   Rendered in CSS so it stays crisp at every size.

   Two rules keep the field free of visible edges:
   1. every gradient ellipse is far larger than the box and reaches zero
      opacity well inside its own ramp, so the element never clips a live
      gradient edge (an ellipse cut mid-fade leaves a seam);
   2. the grain layer below dithers the 8-bit ramp, so no contour lines show
      up where the light is slowest. */
body.about-page .about-editorial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #8a5518;
  background-image:
    /* floor glow — the brand's warm base light, its core below the fold and
       its brightest pool held in the lower quarter of the frame.  The pool
       is centred right of the copy column and widens as it falls, so the
       floor reads as a lit stage while the text keeps its contrast. */
    radial-gradient(
      124% 118% at 60% 118%,
      rgba(255, 253, 246, 1) 0%,
      rgba(255, 249, 224, 0.98) 12%,
      rgba(255, 241, 194, 0.9) 24%,
      rgba(252, 228, 160, 0.72) 36%,
      rgba(246, 208, 122, 0.5) 48%,
      rgba(234, 182, 82, 0.3) 60%,
      rgba(214, 154, 56, 0.15) 72%,
      rgba(188, 122, 34, 0.05) 84%,
      rgba(155, 95, 24, 0.01) 94%,
      rgba(132, 80, 18, 0) 100%
    ),
    /* right rake — the same light leaning off-axis, so the field keeps a
       direction instead of reading as a flat vertical wash and the lit
       floor reaches into the bottom right corner */
    radial-gradient(
      86% 116% at 88% 112%,
      rgba(255, 252, 240, 0.82) 0%,
      rgba(255, 244, 204, 0.68) 20%,
      rgba(250, 224, 148, 0.5) 40%,
      rgba(236, 190, 92, 0.3) 60%,
      rgba(212, 148, 50, 0.14) 78%,
      rgba(170, 108, 28, 0.03) 92%,
      rgba(132, 80, 18, 0) 100%
    ),
    /* floor wash — a wide, shallow lift along the very bottom that carries
       the light across the full width of the frame, corner to corner */
    radial-gradient(
      186% 58% at 50% 116%,
      rgba(255, 249, 228, 0.72) 0%,
      rgba(254, 236, 180, 0.56) 26%,
      rgba(246, 208, 122, 0.36) 50%,
      rgba(224, 164, 62, 0.17) 74%,
      rgba(192, 126, 34, 0.05) 90%,
      rgba(170, 108, 28, 0) 100%
    ),
    /* base ramp — a smooth climb from a dense umber crown down to the lit
       floor; every stop is lighter than the one above it */
    linear-gradient(
      180deg,
      #6d4718 0%,
      #784e1a 16%,
      #865522 36%,
      #96601f 56%,
      #a46824 76%,
      #b07227 92%,
      #b77629 100%
    );
}

body.about-page .about-editorial::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.055;
}

body.about-page .about-editorial::after {
  content: none;
}

body.about-page .about-overview {
  position: relative;
  z-index: 1;
}

body.about-page .about-overview-content {
  width: min(100%, 1120px);
}

body.about-page .about-overview .about-overview-title {
  width: min(100%, clamp(720px, 58vw, 920px));
  margin-bottom: clamp(34px, 3.2vw, 52px);
}

body.about-page .about-overview-description,
html[lang="en"] body.about-page .about-overview-description {
  max-width: 1050px;
  font-size: clamp(36px, 3vw, 52px);
  line-height: 1.28;
  text-wrap: pretty;
}

@media (max-width: 900px) {
  body.about-page .about-overview-content {
    width: min(100%, 680px);
  }

  body.about-page .about-overview .about-overview-title {
    width: min(100%, 620px);
    margin-bottom: 30px;
  }

  body.about-page .about-overview-description,
  html[lang="en"] body.about-page .about-overview-description {
    font-size: clamp(28px, 4.8vw, 38px);
    line-height: 1.34;
  }
}

@media (max-width: 620px) {
  body.about-page .about-overview .about-overview-title {
    width: 100%;
    margin-bottom: 24px;
  }

  body.about-page .about-overview-description,
  html[lang="en"] body.about-page .about-overview-description {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.46;
  }

  /* Small screens run the same single bottom-up light, with the glow's core
     pulled below the fold and the halo tight enough that the copy band keeps
     the deeper end of the ramp. */
  body.about-page .about-editorial {
    background-color: #7d4f1e;
    background-image:
      radial-gradient(
        132% 92% at 58% 116%,
        rgba(255, 253, 246, 1) 0%,
        rgba(255, 249, 224, 0.97) 12%,
        rgba(255, 241, 194, 0.88) 24%,
        rgba(252, 228, 160, 0.7) 36%,
        rgba(246, 208, 122, 0.48) 48%,
        rgba(234, 182, 82, 0.28) 60%,
        rgba(214, 154, 56, 0.14) 72%,
        rgba(188, 122, 34, 0.05) 84%,
        rgba(155, 95, 24, 0.01) 94%,
        rgba(132, 80, 18, 0) 100%
      ),
      radial-gradient(
        190% 52% at 50% 116%,
        rgba(255, 249, 228, 0.7) 0%,
        rgba(254, 236, 180, 0.54) 26%,
        rgba(246, 208, 122, 0.34) 50%,
        rgba(224, 164, 62, 0.16) 74%,
        rgba(192, 126, 34, 0.04) 90%,
        rgba(170, 108, 28, 0) 100%
      ),
      linear-gradient(
        180deg,
        #613e16 0%,
        #6b4518 20%,
        #7e5020 50%,
        #8f5b21 74%,
        #9c6422 88%,
        #a76b23 100%
      );
  }
}

/* Reference proportions: 3.2% outer gutters, a generous hero column gap,
   studio copy at 51.9%, and 5.45vw between the cover and studio text.
   Each language route owns its visible copy; no hidden translation affects spacing. */
body.about-page {
  --about-page-gutter: 3.2vw;
  --about-paper: #fff;
  --about-ink: #000;
  --about-body-ink: #303030;
  --about-muted-ink: #555;
}

body.about-page .about-editorial,
body.about-page .about-principles,
body.about-page .about-offices {
  box-sizing: border-box;
  font-family: var(--font-zh, sans-serif);
  text-align: left;
}

html[lang="en"] body.about-page .about-editorial,
html[lang="en"] body.about-page .about-principles,
html[lang="en"] body.about-page .about-offices {
  font-family: var(--font-en, sans-serif);
}

body.about-page .about-editorial {
  display: grid;
  grid-template-rows: 1fr;
  gap: 0;
  height: calc(clamp(560px, 62.7vw, 1440px) - var(--about-header-height));
  min-height: 0;
  margin: 0;
  padding: 0 var(--about-page-gutter);
}

body.about-page .about-overview {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(0, 34%);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: clamp(24px, 2.2vw, 42px) 8%;
  width: 100%;
  height: 100%;
  margin: 0;
}

body.about-page .about-overview-logo {
  grid-area: 1 / 1;
  width: 75%;
  height: auto;
  margin: 0;
}

body.about-page .about-overview-content {
  grid-area: 2 / 1;
}

body.about-page .about-overview-content,
body.about-page .about-overview-copy {
  width: 100%;
  min-width: 0;
  padding: 0;
}

body.about-page .about-overview .about-overview-title {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(44px, 5.7vw, 128px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.05em;
  text-align: left;
  white-space: normal;
  text-wrap: wrap;
}

body.about-page .about-title-line {
  display: block;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

html[lang="en"] body.about-page .about-overview .about-overview-title {
  font-size: clamp(40px, 5.15vw, 116px);
}

html[lang^="zh"] body.about-page .about-overview-title {
  line-height: 1.16;
  letter-spacing: -0.035em;
}

body.about-page .about-overview-copy {
  grid-area: 2 / 2;
  display: grid;
  gap: clamp(10px, 1.25vw, 24px);
  max-width: none;
  justify-self: stretch;
}

body.about-page .about-overview-copy p {
  display: block;
  margin: 0;
  color: #fff;
  font-size: clamp(14px, 1.3vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}

body.about-page .about-principles {
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 48%);
  align-items: start;
  gap: 7%;
  width: 100%;
  margin: 0;
  padding: 5.45vw var(--about-page-gutter) clamp(56px, 8.5vw, 168px);
  border: 0;
  background: var(--about-paper);
  color: var(--about-ink);
}

body.about-page .about-principles *,
body.about-page .about-offices * {
  box-sizing: border-box;
}

body.about-page .about-principles::before {
  content: none;
}

body.about-page .about-principle-copy {
  max-width: 100%;
  margin: 0;
  color: var(--about-ink);
  font-size: clamp(30px, 3.9vw, 88px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-align: left;
  text-wrap: wrap;
}

html[lang^="zh"] body.about-page .about-principle-copy {
  line-height: 1.3;
  letter-spacing: -0.025em;
}

body.about-page .about-principle-description {
  min-width: 0;
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

body.about-page .about-principle-description p {
  max-width: 72ch;
  margin: 0;
  color: var(--about-body-ink);
  font-size: clamp(14px, 1.4vw, 28px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}

html[lang^="zh"] body.about-page .about-principle-description p {
  line-height: 1.65;
}

body.about-page .about-offices {
  width: 100%;
  margin: 0;
  padding: 0 var(--about-page-gutter) clamp(56px, 7vw, 144px);
  background: var(--about-paper);
  color: var(--about-ink);
}

body.about-page .about-office-details h2 {
  color: var(--about-ink);
}

body.about-page .about-office-details address,
body.about-page .about-office-details address > span {
  color: var(--about-muted-ink);
}

body.about-page .about-cases-section {
  margin-inline: var(--about-page-gutter);
  border-top: 0;
  background: var(--about-ink);
}

body.about-page .about-work-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  min-height: 0;
  gap: clamp(20px, 2.6vw, 48px);
  padding: clamp(48px, 5.45vw, 104px) 0 clamp(24px, 2.5vw, 48px);
  border-bottom: 0;
  font-family: var(--font-zh, sans-serif);
  text-align: center;
}

html[lang="en"] body.about-page .about-work-intro {
  font-family: var(--font-en, sans-serif);
}

body.about-page .about-work-intro-copy {
  width: 100%;
  min-width: 0;
}

body.about-page .about-work-intro h2,
html[lang="en"] body.about-page .about-work-intro h2 {
  max-width: 100%;
  margin: 0 auto;
  font-size: clamp(30px, 3.9vw, 88px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: normal;
}

html[lang^="zh"] body.about-page .about-work-intro h2 {
  font-size: clamp(30px, 5.2vw, 88px);
  white-space: nowrap;
}

/* Soft category buttons with brand-gold selection and rounded corners. */
body.about-page .about-work-filters {
  --case-button-gold: #c09968;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-self: start;
  width: 100%;
  gap: 12px;
}

body.about-page .about-work-filters button {
  min-width: 96px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid #292929;
  border-radius: 16px;
  background: #161616;
  color: #ededed;
  font-family: inherit;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow-wrap: normal;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

body.about-page .about-work-filters button:hover {
  border-color: #484848;
  background: #202020;
  color: #ededed;
}

body.about-page .about-work-filters button.is-active {
  border-color: var(--case-button-gold);
  background: var(--case-button-gold);
  color: #000;
}

body.about-page .about-work-filters button:focus-visible {
  outline: 2px solid var(--case-button-gold);
  outline-offset: 4px;
}

body.about-page .about-work-filters button:active {
  border-color: #ededed;
}

body.about-page .about-work-cases {
  padding-top: clamp(28px, 3vw, 56px);
}

@media (max-width: 760px) {
  body.about-page {
    --about-page-gutter: 22px;
  }

  body.about-page .about-editorial {
    height: auto;
    min-height: 0;
    padding: 72px var(--about-page-gutter) 80px;
  }

  body.about-page .about-overview {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: start;
    gap: 18px;
    height: auto;
  }

  body.about-page .about-overview-logo,
  body.about-page .about-overview-content,
  body.about-page .about-overview-copy {
    grid-area: auto;
  }

  body.about-page .about-overview .about-overview-title {
    font-size: clamp(36px, 9.5vw, 64px);
    line-height: 1.14;
  }

  html[lang="en"] body.about-page .about-overview .about-overview-title {
    font-size: clamp(26px, 8vw, 56px);
    line-height: 1.08;
  }

  body.about-page .about-overview-copy {
    max-width: 40rem;
    margin-top: 18px;
    gap: 14px;
  }

  body.about-page .about-overview-copy p {
    font-size: 15px;
    line-height: 1.6;
  }

  body.about-page .about-principles {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px var(--about-page-gutter) 52px;
  }

  body.about-page .about-principle-copy {
    font-size: clamp(26px, 6.8vw, 44px);
    text-wrap: balance;
  }

  body.about-page .about-principle-description p {
    font-size: 15px;
    line-height: 1.6;
  }

  body.about-page .about-offices {
    padding-bottom: 52px;
  }

  body.about-page .about-work-intro {
    gap: 20px;
    padding: 48px 0 20px;
  }

  body.about-page .about-work-intro h2,
  html[lang="en"] body.about-page .about-work-intro h2 {
    font-size: clamp(26px, 6.8vw, 44px);
    line-height: 1.15;
  }

  body.about-page .about-work-filters {
    gap: 10px;
    padding-inline: 0;
  }

  body.about-page .about-work-filters button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body.about-page .about-work-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 360px;
    column-gap: 10px;
  }

  body.about-page .about-work-filters button {
    grid-column: span 2;
    justify-self: stretch;
    width: 100%;
    padding-inline: 8px;
  }

  body.about-page .about-work-filters button:nth-child(4) {
    grid-column: 2 / span 2;
  }

  body.about-page .about-work-filters button:nth-child(5) {
    grid-column: 4 / span 2;
  }

  html[lang="en"] body.about-page .about-work-filters button:nth-child(4) {
    grid-column: 1 / span 3;
  }

  html[lang="en"] body.about-page .about-work-filters button:nth-child(5) {
    grid-column: 4 / span 3;
  }

  html[lang="en"] body.about-page .about-work-filters button {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.about-page .about-work-filters button {
    transition: none;
  }
}