/* About page responsive copy system.
   Section titles share one scale and give complete Chinese phrases enough room. */

.about-x {
  --copy-body: clamp(15px, .22vw + 14px, 18px);
  --copy-leading: 1.82;
  --copy-title-tracking: -.048em;
  --copy-section-title: clamp(44px,4.4vw,64px);
}

.about-x :where(h1,h2,h3,h4,h5) {
  max-width: 100%;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.about-x :where(p,li,dd,blockquote) {
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.about-x :where(.about-x-hero h1,.about-x-belief-head h2,.about-x-domain-core h2,.about-x-cap-grid h2,.about-x-process-head h2,.about-x-work-head h2,.about-x-people-head h2,.about-x-contact h2) {
  letter-spacing: var(--copy-title-tracking);
}

.about-x .about-x-hero-bottom p {
  max-width: 43em;
  font-size: var(--copy-body);
  line-height: var(--copy-leading);
}

.about-x .about-x-hero-bottom p span { display: block; }

/* Put the label above the statement instead of spending a column on it. */
.about-x .about-x-belief-head,
.about-x .about-x-domain-core,
.about-x .about-x-people-head {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr);
  gap: 22px clamp(36px,6vw,88px);
  align-items: end;
}

.about-x .about-x-process-head,
.about-x .about-x-work-head {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 22px;
  align-items: start;
}

.about-x :is(.about-x-belief-head,.about-x-domain-core,.about-x-process-head,.about-x-work-head,.about-x-people-head) > .about-x-label {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}

.about-x :is(.about-x-belief-head,.about-x-domain-core,.about-x-people-head) > h2 {
  grid-column: 1;
  grid-row: 2;
}

.about-x :is(.about-x-belief-head,.about-x-domain-core,.about-x-people-head) > p:last-child {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: end;
  width: 100%;
  max-width: 34em;
  margin: 0;
  font-size: var(--copy-body);
  line-height: var(--copy-leading);
}

.about-x .about-x-belief-head h2,
.about-x .about-x-domain-core h2,
.about-x .about-x-cap-grid h2,
.about-x .about-x-process-head h2,
.about-x .about-x-work-head h2,
.about-x .about-x-people-head h2,
.about-x .about-x-contact h2 {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: var(--copy-section-title);
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: wrap;
  word-break: normal;
  overflow-wrap: normal;
}

.about-x .about-x-belief-head h2 span,
.about-x .about-x-domain-core h2 span {
  display: block;
  white-space: normal;
}

.about-x .about-x-cap-grid h2,
.about-x .about-x-contact h2 { margin-top: 22px; }

.about-x .about-x-cap-grid > header { display: block; }
.about-x .about-x-cap-grid header > p:last-child { margin-top: 24px; }
.about-x .about-x-cap-grid .about-x-label { color: #91dcb9; }

.about-x :where(.about-x-belief-head > p:last-child,.about-x-domain-core > p:last-child,.about-x-cap-grid header > p:last-child,.about-x-contact .about-x-shell > div > p) {
  max-width: 38em;
  font-size: var(--copy-body);
  line-height: var(--copy-leading);
}

.about-x :where(.about-x-values p,.about-x-domain-landscape p,.about-x-cap-list p,.about-x-process-line p,.about-x-project p) {
  font-size: clamp(14px, .18vw + 13px, 16px);
  line-height: 1.78;
}

.about-x .about-x-person-lead {
  max-width: 46em;
  font-size: clamp(17px, .46vw + 14px, 21px);
  line-height: 1.86;
}

.about-x .about-x-person-story header > strong {
  max-width: 100%;
  line-height: 1.58;
}

.about-x .about-x-person-facts dd,
.about-x .about-x-person-projects h5,
.about-x .about-x-person-projects p {
  max-width: 100%;
}

/* Process cards stay readable in every reveal/active state. */
.about-x .about-x-process-line :where(h3,p),
.about-x .about-x-process-line li.is-active :where(h3,p) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.about-x .about-x-process-line h3,
.about-x .about-x-process-line li.is-active h3 {
  color: #0b291f !important;
  text-shadow: none !important;
}

.about-x .about-x-process-line p,
.about-x .about-x-process-line li.is-active p {
  color: #526b60 !important;
}

.about-x .about-x-process-line li > span {
  width: 66px;
  height: 66px;
  font-size: 14px;
  letter-spacing: .06em;
}

.about-x .about-x-domain-landscape span { font-size: 9px; }
.about-x .about-x-domain-landscape h3 { font-size: clamp(32px,2.7vw,46px); }

/* Wide canvases use one restrained statement instead of an oversized stagger. */
@media (min-width: 1367px) {
  .about-x .about-x-hero {
    min-height: max(560px,calc(100svh - 144px));
  }
  .about-x .about-x-hero-copy {
    width: min(calc(100% - 112px),1540px);
    min-height: max(560px,calc(100svh - 144px));
  }
  .about-x .about-x-hero h1 {
    max-width: 1380px;
    margin-bottom: clamp(38px,5vh,58px);
    font-size: clamp(88px,6.6vw,108px);
    line-height: .96;
    letter-spacing: -.048em;
    white-space: nowrap;
  }
  .about-x .about-x-hero h1 span { display: inline; }
  .about-x .about-x-hero h1 span:last-child { margin-left: .18em; }
  .about-x .about-x-hero-bottom { grid-template-columns: minmax(380px,680px) auto; }
}

@media (min-width: 900px) and (max-width: 1366px) {
  .about-x .about-x-hero,
  .about-x .about-x-hero-copy { min-height: max(540px,calc(100svh - 144px)); }
}

@media (min-width: 700px) and (max-height: 700px) {
  .about-x .about-x-hero { min-height: max(320px,calc(100svh - 122px)); }
  .about-x .about-x-hero-copy {
    min-height: max(340px,calc(100svh - 112px));
    padding-top: 18px;
    padding-bottom: 20px;
  }
  .about-x .about-x-hero h1 {
    max-width: 920px;
    margin-bottom: 18px;
    font-size: clamp(48px,6.8vw,64px);
    line-height: .96;
  }
  .about-x .about-x-hero-bottom { gap: 26px; padding-top: 12px; }
  .about-x .about-x-hero-bottom p { font-size: 12px; line-height: 1.55; }
  .about-x .about-x-hero-bottom a { padding: 10px 15px; font-size: 11px; }
  .about-x .about-x-flow,
  .about-x .about-x-flow-track span { min-height: 56px; }
  .about-x .about-x-flow-track strong { font-size: 13px; }
  .about-x .about-x-flow-track small { font-size: 6px; }
}

/* Final cascade guard: a sentence that fits must never be split by tablet rules. */
@media (min-width: 700px) and (max-width: 1366px) {
  .about-x .about-x-hero h1 {
    max-width: none;
    font-size: clamp(42px,5.65vw,76px);
    line-height: .96;
    white-space: nowrap;
  }
  .about-x .about-x-hero h1 span { display: inline; }
  .about-x .about-x-hero h1 span:last-child { margin-left: .18em; }
}

/* Compact landscape-tablet rhythm: preserve hierarchy without oversized type. */
@media (min-width: 700px) and (max-width: 900px) and (max-height: 700px) {
  .about-x .about-x-capabilities {
    padding: 36px 0 56px;
    border-radius: 32px 32px 0 0;
  }
  .about-x .about-x-cap-grid > header {
    grid-template-columns: minmax(0,1fr) minmax(220px,.72fr);
    gap: 18px 34px;
    align-items: end;
  }
  .about-x .about-x-cap-grid h2 {
    max-width: none;
    font-size: 40px;
    line-height: 1.02;
  }
  .about-x .about-x-cap-grid header > p:last-child {
    max-width: 30em;
    font-size: 12px;
    line-height: 1.62;
  }
  .about-x .about-x-cap-list { margin-top: 24px; }
  .about-x .about-x-cap-list article,
  .about-x .about-x-cap-list article:nth-child(n) {
    min-height: 110px;
    padding: 18px 0;
  }
  .about-x .about-x-cap-list h3 { font-size: 25px; }
  .about-x .about-x-cap-list p { margin-top: 7px; font-size: 12px; line-height: 1.58; }
}

/* Hover must not move a card out from under the pointer. */
@media (min-width: 700px) and (max-width: 1180px) {
  .about-x .about-x-domain-landscape article:hover,
  .about-x .about-x-domain-landscape article:nth-child(n):hover {
    border-radius: 38px !important;
    transform: none !important;
  }
}

/* If the canvas can hold the statement, keep it on one deliberate line. */
@media (min-width: 700px) and (max-width: 1366px) {
  .about-x .about-x-hero h1 {
    max-width: none;
    font-size: clamp(44px,6.2vw,80px);
    line-height: .96;
    white-space: nowrap;
  }
  .about-x .about-x-hero h1 span { display: inline; }
  .about-x .about-x-hero h1 span:last-child { margin-left: .18em; }
}

/* 4K/super-wide composition: scale the whole opening frame, not just the image. */
@media (min-width: 2000px) and (min-height: 900px) {
  .about-x .about-x-shell,
  .about-x .about-x-domain-core { width: min(calc(100% - 180px),1980px); }
  .about-x .about-x-domain-landscape { width: min(calc(100% - 140px),2100px); }
  .about-x .about-x-hero { min-height: calc(100svh - 148px); }
  .about-x .about-x-hero-copy {
    width: min(calc(100% - 180px),2120px);
    min-height: calc(100svh - 148px);
  }
  .about-x .about-x-kicker { font-size: 12px; }
  .about-x .about-x-hero h1 {
    max-width: none;
    margin-bottom: clamp(48px,5vh,72px);
    font-size: clamp(132px,5.9vw,154px);
    line-height: .95;
    white-space: nowrap;
  }
  .about-x .about-x-hero h1 span { display: inline; }
  .about-x .about-x-hero h1 span:last-child { margin-left: .18em; }
  .about-x .about-x-hero-bottom { grid-template-columns: minmax(620px,780px) auto; }
  .about-x .about-x-hero-bottom p { max-width: 48em; font-size: 20px; line-height: 1.72; }
  .about-x .about-x-hero-bottom a { padding: 18px 24px; font-size: 14px; }
  .about-x .about-x-flow,
  .about-x .about-x-flow-track span { min-height: 80px; }
  .about-x .about-x-flow-track strong { font-size: 20px; }
  .about-x .about-x-flow-track small { font-size: 8px; }
  .about-x .about-x-process-line li > span { width: 76px; height: 76px; font-size: 16px; }
}

@media (min-width: 1600px) {
  .about-x { --copy-body: 19px; }
  .about-x .about-x-hero-bottom p { max-width: 46em; }
  .about-x .about-x-belief-head > p:last-child,
  .about-x .about-x-domain-core > p:last-child { max-width: 34em; }
}

@media (max-width: 1366px) {
  .about-x { --copy-title-tracking: -.045em; }
  .about-x .about-x-hero h1 { font-size: clamp(74px,8.5vw,116px); line-height: .94; }
  .about-x .about-x-project h3 { font-size: clamp(29px,2.7vw,43px); }
}

@media (max-width: 1024px) {
  .about-x {
    --copy-body: 17px;
    --copy-leading: 1.8;
    --copy-title-tracking: -.04em;
  }
  .about-x .about-x-hero h1 { font-size: clamp(68px,10vw,92px); }
  .about-x .about-x-belief-head > p:last-child,
  .about-x .about-x-domain-core > p:last-child,
  .about-x .about-x-cap-grid header > p:last-child { max-width: 36em; }
  .about-x .about-x-values h3 { font-size: clamp(36px,4.6vw,48px); }
  .about-x .about-x-cap-list h3,
  .about-x .about-x-process-line h3 { font-size: clamp(28px,3.5vw,36px); }
  .about-x .about-x-process-line li > span { width: 60px; height: 60px; font-size: 13px; }
  .about-x .about-x-project h3 { font-size: clamp(28px,3.6vw,38px); }
  .about-x-people-accordion .about-x-person-story h3 { font-size: clamp(50px,6vw,64px); }
  .about-x-people-accordion .about-x-person-story header div > span { font-size: clamp(18px,2.2vw,23px); }
}

@media (max-width: 760px) {
  .about-x {
    --copy-body: 16px;
    --copy-leading: 1.76;
    --copy-title-tracking: -.032em;
    --copy-section-title: clamp(30px,8.4vw,44px);
  }
  .about-x .about-x-belief-head,
  .about-x .about-x-domain-core,
  .about-x .about-x-people-head { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .about-x :is(.about-x-belief-head,.about-x-domain-core,.about-x-people-head) > p:last-child { grid-column: 1; grid-row: 3; }
  .about-x .about-x-label { font-size: 9px; letter-spacing: .15em; }
  .about-x .about-x-kicker { font-size: 8px; letter-spacing: .12em; }
  .about-x .about-x-hero h1 { font-size: clamp(56px,13vw,76px); line-height: .96; letter-spacing: -.04em; }
  .about-x .about-x-hero-bottom p { max-width: 32em; }
  .about-x .about-master-pull { font-size: clamp(32px,6.5vw,40px); line-height: 1.1; }
  .about-x .about-x-values h3 { font-size: clamp(34px,6vw,42px); }
  .about-x .about-x-domain-landscape h3 { font-size: clamp(27px,4.7vw,34px); }
  .about-x .about-x-cap-list h3,
  .about-x .about-x-process-line h3 { font-size: clamp(27px,4.5vw,32px); }
  .about-x .about-x-process-line li > span { width: 58px; height: 58px; font-size: 13px; }
  .about-x .about-x-project h3 { font-size: clamp(28px,5vw,34px); line-height: 1.2; }
  .about-x .about-x-person-lead { font-size: 16px; line-height: 1.8; }
  .about-x-people-accordion .about-x-person-story h3 { font-size: clamp(46px,8vw,56px); line-height: 1.02; }
  .about-x-people-accordion .about-x-person-story header div > span { max-width: 9em; font-size: clamp(18px,3.2vw,22px); line-height: 1.4; }
  .about-x-people-accordion .about-x-person-facts dd { font-size: 16px; line-height: 1.55; }
  .about-x-people-accordion .about-x-person-story blockquote { font-size: clamp(25px,4.8vw,31px); line-height: 1.48; }
  .about-x-people-accordion .about-x-person-projects h5 { font-size: clamp(20px,3.7vw,24px); }
}

@media (max-width: 520px) {
  .about-x {
    --copy-body: 15.5px;
    --copy-leading: 1.74;
    --copy-title-tracking: -.025em;
  }
  .about-x .about-x-hero h1 { font-size: clamp(54px,15vw,66px); line-height: .98; }
  .about-x .about-x-hero-bottom p { font-size: 15px; line-height: 1.72; }
  .about-x .about-x-belief-head > p:last-child,
  .about-x .about-x-domain-core > p:last-child,
  .about-x .about-x-cap-grid header > p:last-child,
  .about-x .about-x-contact .about-x-shell > div > p { max-width: none; }
  .about-x :where(.about-x-values p,.about-x-domain-landscape p,.about-x-cap-list p,.about-x-process-line p,.about-x-project p) { font-size: 14px; line-height: 1.72; }
  .about-x .about-master-pull { max-width: 72%; font-size: clamp(28px,8vw,34px); }
  .about-x .about-x-values h3 { font-size: 34px; }
  .about-x .about-x-domain-landscape h3 { font-size: 27px; }
  .about-x .about-x-cap-list h3,
  .about-x .about-x-process-line h3 { font-size: 27px; }
  .about-x .about-x-process-line li > span { width: 54px; height: 54px; font-size: 12px; }
  .about-x .about-x-project h3 { font-size: clamp(27px,7.2vw,31px); }
  .about-x .about-x-project p { max-width: 34em; }
  .about-x .about-x-people-note { max-width: 28em; font-size: 11px; line-height: 1.65; }
  .about-x-people-accordion .about-x-person-story h3 { font-size: clamp(42px,11vw,50px); }
  .about-x-people-accordion .about-x-person-story header div > span { max-width: 8em; font-size: 18px; }
  .about-x-people-accordion .about-x-person-story header > strong { font-size: 14px; }
  .about-x-people-accordion .about-x-person-lead { font-size: 15.5px; line-height: 1.78; }
  .about-x-people-accordion .about-x-person-facts dd { font-size: 15.5px; }
  .about-x-people-accordion .about-x-person-story blockquote { font-size: 25px; line-height: 1.45; }
  .about-x-people-accordion .about-x-person-skills li { font-size: 11.5px; line-height: 1.45; }
  .about-x-people-accordion .about-x-person-projects h5 { font-size: 20px; line-height: 1.42; }
  .about-x-people-accordion .about-x-person-projects p { font-size: 14px; line-height: 1.76; }
  .about-x-people-accordion .about-x-person:not(.is-active) .about-x-person-tab small { font-size: 7.5px; letter-spacing: .04em; }
}

@media (max-width: 360px) {
  .about-x { --copy-body: 15px; }
  .about-x .about-x-label { font-size: 8px; }
  .about-x .about-x-kicker { font-size: 7px; }
  .about-x .about-x-hero h1 { font-size: 50px; }
  .about-x .about-x-project h3 { font-size: 26px; }
  .about-x-people-accordion .about-x-person-story h3 { font-size: 40px; }
  .about-x-people-accordion .about-x-person-story header div > span { font-size: 17px; }
  .about-x-people-accordion .about-x-person-lead { font-size: 15px; line-height: 1.74; }
  .about-x-people-accordion .about-x-person-projects h5 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-x { text-rendering: optimizeLegibility; }
}

/* Keep the moving service rail inside short desktop/tablet viewports. */
@media (min-width: 700px) and (max-height: 700px) {
  .about-x .about-x-hero-copy {
    min-height: max(320px,calc(100svh - 112px));
    padding-top: 16px;
    padding-bottom: 18px;
  }
  .about-x .about-x-hero h1 {
    max-width: none;
    margin-bottom: 16px;
    font-size: clamp(48px,7vw,58px);
    line-height: .96;
    letter-spacing: -.035em;
    white-space: normal;
  }
  .about-x .about-x-hero h1 span { display: block; }
  .about-x .about-x-hero h1 span:last-child { margin-left: clamp(28px,7vw,58px); }
  .about-x .about-x-hero-bottom { gap: 22px; padding-top: 10px; }
  .about-x .about-x-hero-bottom p { font-size: 11px; line-height: 1.5; }
  .about-x .about-x-hero-bottom a { padding: 9px 14px; font-size: 10px; }
  .about-x .about-x-flow,
  .about-x .about-x-flow-track span { min-height: 52px; }
  .about-x .about-x-flow-track strong { font-size: 12px; }
  .about-x .about-x-flow-track small { font-size: 6px; }
}

/* Final tablet rule: reduce type before allowing a needless line break. */
@media (min-width: 700px) and (max-width: 1366px) {
  .about-x .about-x-hero h1 {
    max-width: none;
    font-size: clamp(36px,5.2vw,72px);
    line-height: .96;
    letter-spacing: -.035em;
    white-space: nowrap;
  }
  .about-x .about-x-hero h1 span { display: inline; }
  .about-x .about-x-hero h1 span:last-child { margin-left: .18em; }
}