/* VenturesLab 创业工场 — d14. Charcoal ground, four poster fields, one condensed Latin face beside the system CJK sans. */

/* Archivo for Latin only. On Chinese pages the curly quotes, dashes and ellipsis are left to the CJK face so they stay full width. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo ZH";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-2013, U+2015-2017, U+201E-2025, U+2027-206F, U+20AC, U+2122, U+2212;
}

:root {
  --charcoal: #191919;
  --raised: #2e2e2e;
  --white: #ffffff;
  --paper: #f0f0ec;
  --green: #45a82c;
  --red: #d71e1e;
  --blue: #1e4bd7;
  --yellow: #ffe927;

  --cjk: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --font: "Archivo", var(--cjk);

  --s-small: 0.875rem;
  --s-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --s-lead: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  --s-head: clamp(2.25rem, 1rem + 4vw, 4.75rem);
  --s-display: min(15vw, 30svh);

  --m: clamp(16px, 2.8vw, 40px);
  --gap: clamp(16px, 1.8vw, 28px);
  --section: clamp(96px, 11vw, 160px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --lh-text: 1.5;
  --lh-lead: 1.4;
  --lh-head: 0.95;
}
:root:lang(zh) {
  --font: "Archivo ZH", var(--cjk);
  --lh-text: 1.85;
  --lh-lead: 1.7;
  --lh-head: 1.12;
}

/* Fields: each sets its ground, its text ink, the two display inks and its button. */
.field-ink    { --bg: var(--charcoal); --fg: var(--white);    --soft: #a3a3a3; --ink1: var(--white); --ink2: var(--green);    --btn-bg: var(--green);    --btn-fg: var(--charcoal); }
.field-paper  { --bg: var(--paper);    --fg: var(--charcoal); --soft: #545454; --ink1: var(--charcoal); --ink2: var(--blue);   --btn-bg: var(--charcoal); --btn-fg: var(--white); }
.field-green  { --bg: var(--green);    --fg: var(--charcoal); --soft: #1f3d17; --ink1: var(--white); --ink2: var(--charcoal);  --btn-bg: var(--charcoal); --btn-fg: var(--white); }
.field-yellow { --bg: var(--yellow);   --fg: var(--charcoal); --soft: #4d4613; --ink1: var(--charcoal); --ink2: var(--blue);   --btn-bg: var(--charcoal); --btn-fg: var(--white); }
.field-blue   { --bg: var(--blue);     --fg: var(--white);    --soft: #dfe6ff; --ink1: var(--white); --ink2: var(--yellow);    --btn-bg: var(--yellow);   --btn-fg: var(--charcoal); }
.field-red    { --bg: var(--red);      --fg: var(--white);    --soft: var(--white); --ink1: var(--white); --ink2: var(--charcoal);  --btn-bg: var(--charcoal); --btn-fg: var(--white); }
[class*="field-"] { background: var(--bg); color: var(--fg); }

/* The header lies on each page's opening field and takes its inks. */
.page-green, .page-yellow { --top-fg: var(--charcoal); --top-btn-bg: var(--charcoal); --top-btn-fg: var(--white); }
.page-blue { --top-fg: var(--white); --top-btn-bg: var(--yellow); --top-btn-fg: var(--charcoal); }
.page-red { --top-fg: var(--white); --top-btn-bg: var(--charcoal); --top-btn-fg: var(--white); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--charcoal); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--charcoal); color: var(--white);
  font-family: var(--font); font-size: var(--s-body); line-height: var(--lh-text);
  font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
:lang(zh) body, body:lang(zh) { line-break: strict; text-autospace: ideograph-alpha ideograph-numeric; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
p:empty { display: none; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; overflow-wrap: break-word; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
::selection { background: var(--yellow); color: var(--charcoal); }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 20; padding: 12px 16px; background: var(--yellow); color: var(--charcoal); font-weight: 700; }
.skip:focus { top: 12px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* Display voice: Archivo at its narrowest for Latin, the heaviest CJK sans for Chinese. */
.hero__title, .letter__title, .sayings__title, .strategy__title, .strategy__slogan, .band__title,
.names__para, .member__name, .office__city, .wechat__title, .foot__line, .foot__mark, .plate--name {
  font-weight: 800; font-stretch: 62%; letter-spacing: -0.005em;
}
:lang(en) .hero__title, :lang(en) .letter__title, :lang(en) .sayings__title, :lang(en) .strategy__title,
:lang(en) .band__title, :lang(en) .names__para, :lang(en) .member__name, :lang(en) .office__city,
:lang(en) .wechat__title, :lang(en) .foot__line, :lang(en) .foot__mark, :lang(en) .plate--name { text-transform: uppercase; }

/* Buttons: one shape, square, flat. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  background: var(--btn-bg); color: var(--btn-fg); border: 0; border-radius: 0;
  font: 700 var(--s-body)/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn--ink { --btn-bg: var(--charcoal); --btn-fg: var(--white); }

/* Header */
.top {
  position: absolute; z-index: 10; inset: 0 0 auto 0;
  display: flex; align-items: center; gap: 12px 28px; padding: 20px var(--m);
  color: var(--top-fg); font-size: var(--s-small); line-height: 1.2;
}
.brand { display: block; flex: none; background: var(--white); padding: 8px 12px; }
.brand__crop { display: block; width: clamp(104px, 9vw, 132px); aspect-ratio: 646 / 182; overflow: hidden; }
.brand__crop img { width: 123.84%; max-width: none; margin-left: -15.94%; margin-top: -28.33%; }
.top__nav { margin-left: auto; }
.top__nav ul { display: flex; gap: 6px 24px; list-style: none; }
.top__nav a, .top__lang { display: inline-block; padding: 10px 0; text-decoration: none; font-weight: 600; }
.top__nav a:hover, .top__lang:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.top__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.btn--top { --btn-bg: var(--top-btn-bg); --btn-fg: var(--top-btn-fg); min-height: 44px; font-size: var(--s-small); }

/* Opening field */
.hero { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: calc(12svh + 72px) var(--m) 56px; }
.hero--home { justify-content: flex-start; gap: 44px; }
@media (orientation: landscape) { .foot { min-height: 92svh; } }
.hero--page { flex-flow: row wrap; align-items: flex-end; column-gap: calc(var(--gap) * 2); }
.hero--page .hero__title { flex: none; }
.hero__intro, .hero__index, .hero--page .bp { flex: 1 1 22rem; max-width: 36rem; }
:lang(en) .hero__intro { max-width: 40rem; }
.hero__title { font-size: var(--s-display); line-height: 0.86; }
:lang(zh) .hero__title { line-height: 1.04; }
:lang(en) .hero--home .hero__title { font-size: min(12.8vw, 25svh); }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lines [data-line] { display: block; white-space: nowrap; }
.ink-1 { color: var(--ink1); }
.ink-2 { color: var(--ink2); }
.hero__facts { max-width: 34em; list-style: none; font-size: var(--s-lead); line-height: var(--lh-lead); font-weight: 600; }
.hero__intro { font-size: var(--s-lead); line-height: var(--lh-lead); font-weight: 500; }
:lang(zh) .hero__intro { flex-basis: 25em; }
.hero__index { list-style: none; font-size: var(--s-head); line-height: 1.1; font-weight: 800; font-stretch: 62%; }
:lang(en) .hero__index { text-transform: uppercase; }
.hero__index a { color: var(--ink2); border-bottom-color: currentColor; }
:lang(zh) .hero__facts { word-break: keep-all; }

/* Founder's letter: two columns, the words he put in quotation marks highlighted. */
.letter { padding: var(--section) var(--m); }
.letter__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; margin-bottom: 72px; }
.letter__title { grid-column: 1 / span 8; font-size: var(--s-head); line-height: var(--lh-head); }
.letter__photo { grid-column: 10 / -1; aspect-ratio: 4 / 5; overflow: clip; }
.letter__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.letter__body { columns: 2; column-gap: calc(var(--gap) * 2); font-size: var(--s-lead); line-height: var(--lh-lead); text-align: justify; hyphens: auto; }
:lang(en) .letter__body { line-height: 1.32; text-align: left; hyphens: manual; }
.letter__body p, .letter__body ul { margin-bottom: 0.75em; }
.letter__body ul { padding-left: 1.1em; }
.letter__body li p { margin: 0; }
.letter__body li::marker { color: var(--green); }
.letter__sign { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 20px; margin-top: 64px; font-size: var(--s-body); color: var(--soft); }
.letter__sign .sign-0 { flex-basis: 100%; text-align: right; font-size: var(--s-head); font-weight: 800; font-stretch: 62%; line-height: 1.1; color: var(--fg); }
::highlight(mark-1) { background-color: var(--yellow); color: var(--charcoal); }
::highlight(mark-2) { background-color: var(--green); color: var(--charcoal); }
::highlight(mark-3) { background-color: var(--red); color: var(--white); }
::highlight(mark-close) { background-color: var(--blue); color: var(--white); }

/* Sayings: the heading holds while the six pass. */
.sayings { padding: var(--section) var(--m); }
.sayings__title { grid-column: 1 / -1; font-size: var(--s-head); line-height: var(--lh-head); margin-bottom: 72px; }
/* Two staggered columns: each saying starts half a step below its neighbour. */
.sayings__list { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; }
.sayings__list li { grid-row: var(--r) / span 2; padding-bottom: 64px; }
.sayings__list li:nth-child(odd) { grid-column: 1 / span 6; }
.sayings__list li:nth-child(even) { grid-column: 7 / -1; }
.sayings__list li:nth-child(1) { --r: 1; } .sayings__list li:nth-child(2) { --r: 2; } .sayings__list li:nth-child(3) { --r: 3; }
.sayings__list li:nth-child(4) { --r: 4; } .sayings__list li:nth-child(5) { --r: 5; } .sayings__list li:nth-child(6) { --r: 6; }
.sayings__list blockquote { font-size: var(--s-lead); line-height: var(--lh-lead); max-width: 30em; }
.sayings__list li:nth-child(odd) blockquote { padding-right: var(--gap); }
.sayings__list li:nth-last-child(-n + 2) { padding-bottom: 0; }

/* Investment strategy: the slogan, then four poster bands. */
.strategy__open { padding: var(--section) var(--m); }
.strategy__title { font-size: var(--s-head); line-height: var(--lh-head); color: var(--ink1); margin-bottom: 0.3em; }
.strategy__slogan { font-size: var(--s-head); line-height: var(--lh-head); color: var(--ink2); max-width: 14.2em; }
:lang(en) .strategy__slogan { max-width: 26em; text-transform: none; }
.strategy__bands { list-style: none; }
.band { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; min-height: 40svh; padding: 88px var(--m); }
.band__title { grid-column: 1 / span 7; font-size: var(--s-head); line-height: var(--lh-head); }
.band__body { grid-column: 9 / -1; font-size: var(--s-lead); line-height: var(--lh-lead); }

/* 出品荟萃 as one paragraph: every name a link, each with its own logo at cap height. */
.names { padding: var(--section) var(--m); }
.names__para { font-size: var(--s-head); line-height: 1.22; }
.names__title, .names__list, .names__list li { display: inline; font-size: inherit; }
.names__title { color: var(--fg); }
.names__list { list-style: none; }
:lang(zh) .names__list li { word-break: keep-all; }
.names__list a { color: var(--fg); text-decoration: none; transition: color 200ms ease; }
.names__sep { color: var(--soft); }
@media (min-width: 1100px) {
  .names__list a { color: var(--soft); }
  .names__list a:hover, .names__list a:focus-visible { color: var(--fg); }
}
.plate.chip { display: inline-grid; place-items: center; height: 0.8em; padding: 0.08em 0.14em; margin-left: 0.22em; vertical-align: -0.04em; transform-origin: left center; transition: transform 260ms var(--ease-out); }
.chip img { height: 0.64em; width: auto; max-width: 2.6em; object-fit: contain; }
.names__list a:hover .chip, .names__list a:focus-visible .chip { transform: scale(1.5); }
.names__more { margin-top: 56px; font-size: var(--s-lead); font-weight: 600; }
.arrow { text-decoration: none; border-bottom: 3px solid var(--green); padding-bottom: 4px; }
.arrow::after { content: "\00a0→"; display: inline-block; transition: transform 200ms var(--ease-out); }
.arrow:hover::after { transform: translateX(6px); }

/* Logo plates: white for logos in dark ink, raised charcoal for logos in white ink. */
.plate { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.plate--light { background: var(--white); }
.plate--dark { background: var(--raised); }
.plate--name { color: var(--charcoal); text-align: center; line-height: 1.05; }

/* Portfolio: a roll of productions, title card beside synopsis. */
.roll { padding: calc(var(--section) * 0.6) var(--m); }
.roll__list { list-style: none; }
.prod { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 40px 0; scroll-margin-top: 24px; }
.prod__card { grid-column: 1 / span 3; }
.prod__card .plate { aspect-ratio: 3 / 2; padding: 11% 13%; transition: transform 300ms var(--ease-out); }
.prod__card .plate img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.prod__card .plate--name { font-size: var(--s-lead); }
.prod:target .plate { outline: 4px solid var(--yellow); outline-offset: 6px; }
.prod__text { grid-column: 4 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.prod__name { grid-column: 1 / span 3; font-size: var(--s-lead); line-height: 1.25; font-weight: 800; }
.prod__body { grid-column: 4 / -1; }
.prod__body p, .prod__body ol { margin-bottom: 0.7em; }
.prod__body ol { padding-left: 1.3em; }
.prod__body li p { margin: 0; }

/* Team */
.member { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: var(--section) var(--m); }
.member__photo { grid-column: 1 / span 5; grid-row: 1; position: sticky; top: 32px; aspect-ratio: 3 / 4; overflow: clip; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.member__text { grid-column: 7 / -1; grid-row: 1; }
.member--right .member__photo { grid-column: 8 / -1; }
.member--right .member__text { grid-column: 1 / span 6; }
.member__name { font-size: var(--s-head); line-height: var(--lh-head); margin-bottom: 40px; }
.member__bio { max-width: 36em; }
.member__bio p { margin-bottom: 0.9em; }
.member__bio a { text-decoration-color: var(--green); }

/* Contact */
.bp__title { font-size: var(--s-lead); line-height: var(--lh-lead); font-weight: 600; }
.bp__title a { display: block; color: var(--fg); }
.bp__title .soft { color: var(--soft); }
.bp__label { display: block; margin: 48px 0 12px; font-weight: 600; }
.bp__row { display: flex; max-width: 600px; }
.bp__input {
  flex: 1; min-width: 0; height: 64px; padding: 0 20px; border: 0; border-radius: 0;
  background: var(--paper); color: var(--charcoal); font: 500 var(--s-body)/1 var(--font);
}
.bp__input:focus-visible { outline: 3px solid var(--green); outline-offset: 0; }
.bp__send { min-height: 64px; flex: none; }
.bp__note { margin-top: 16px; max-width: 600px; color: var(--soft); }
.wechat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; padding: var(--section) var(--m); }
.wechat__text { grid-column: 1 / span 7; }
.wechat__title { font-size: var(--s-head); line-height: var(--lh-head); margin-bottom: 24px; }
.wechat__id { font-size: var(--s-lead); line-height: var(--lh-lead); font-weight: 600; }
.wechat__qr { grid-column: 9 / -1; justify-self: end; width: min(100%, 280px); background: var(--white); }
.offices { padding: var(--section) var(--m); }
.offices__list { list-style: none; }
.office { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: 48px 0; }
.office__city { grid-column: 1 / span 4; font-size: var(--s-head); line-height: var(--lh-head); }
.office__lines { grid-column: 5 / span 4; list-style: none; padding-top: 0.4em; }
.office__lines a { text-decoration-color: var(--green); }
.office__photo { grid-column: 9 / -1; }
.photo { overflow: clip; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo figcaption { margin-top: 10px; }
.office:first-child .photo img, .places__list li:first-child .photo img { object-position: 50% 35%; }

/* Home: the three cities, each over its picture. */
.places { padding: var(--section) var(--m); }
.places__title { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); font-size: var(--s-head); line-height: var(--lh-head); margin-bottom: 40px; }
.places__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.places__list a { display: block; text-decoration: none; }
.places__list .photo img { aspect-ratio: 4 / 5; transition: transform 500ms var(--ease-out); }
.places__list a:hover .photo img { transform: scale(1.03); }
.places__more { margin-top: 56px; font-size: var(--s-lead); font-weight: 600; }

/* Footer: the invitation, then the name cropped by the bottom edge. */
.foot { display: flex; flex-direction: column; padding: var(--section) var(--m) 0; overflow: hidden; background: var(--green); color: var(--charcoal); }
.foot__invite { grid-column: 1 / span 8; }
.foot__line { font-size: var(--s-head); line-height: var(--lh-head); margin-bottom: 40px; }
.foot__line span { display: block; }
.foot__line span + span { color: var(--white); }
.foot__links { grid-column: 10 / -1; list-style: none; font-weight: 600; line-height: 1.9; }
.foot__links a { text-decoration-thickness: 2px; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: auto; padding-top: 96px; font-size: var(--s-small); }
.foot__credits { max-width: 60em; font-size: var(--s-body); }
.foot__mark { margin: 0 0 0 -0.04em; font-size: 26vw; line-height: 0.8; white-space: nowrap; color: var(--white); transform: translateY(16%); }
:lang(en) .foot__mark { font-size: 30vw; }

/* Motion: entrances, the masked title, a slow drift in the photographs. Content stays put without it. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
  /* The portfolio rows and the footer only move, never fade: they are never invisible, however the page is reached. */
  .js [data-rise="shift"] { opacity: 1; }
  .js [data-rise].in { opacity: 1; transform: none; }
  .js .hero [data-rise] { --d: 650ms; }
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + 150ms); }
  .member__photo img, .letter__photo img { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
}
@keyframes line-up { to { transform: none; } }
@keyframes drift { from { object-position: 50% 0%; } to { object-position: 50% 45%; } }

/* Phone and narrow tablet */
@media (max-width: 760px) {
  .top { flex-wrap: wrap; padding-top: 14px; }
  .top__nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .top__nav ul { justify-content: space-between; }
  .top__lang { margin-left: auto; }
  .hero { min-height: 0; justify-content: flex-start; padding: calc(4svh + 120px) var(--m) 56px; }
  .hero--home { --s-display: 17.4vw; }
  :lang(en) .hero--home .hero__title { font-size: 13.6vw; }
  .hero--page { --s-display: 21vw; }
  .hero__facts, .hero__intro { align-self: flex-start; text-align: left; }
  .letter__body { columns: 1; text-align: left; }
  .sayings__title { margin-bottom: 48px; }
  .sayings__list { display: block; }
  .sayings__list li { padding-bottom: 48px; }
  .sayings__list li:nth-child(odd) blockquote { padding-right: 0; }
  .letter__head { margin-bottom: 40px; row-gap: 32px; }
  .letter__title { grid-column: 1 / -1; }
  .letter__photo { grid-column: 1 / span 7; grid-row: 1; }
  .places__title { display: block; word-spacing: 0.4em; }
  .places__list { grid-template-columns: 1fr; row-gap: 32px; }
  .places__list .photo img { aspect-ratio: 3 / 2; }
  .strategy__slogan { font-size: var(--s-lead); line-height: var(--lh-lead); }
  .band { min-height: 0; padding: 72px var(--m); }
  .band__title, .band__body { grid-column: 1 / -1; }
  .band__body { margin-top: 24px; }
  .plate.chip { display: none; }
  .names__list li:nth-child(-n + 3) .plate.chip { display: inline-grid; }
  .prod { padding: 40px 0; row-gap: 24px; }
  .prod__card, .prod__text { grid-column: 1 / -1; }
  .prod__card { max-width: 300px; width: 80%; }
  .prod__text { display: block; }
  .prod__name { margin-bottom: 12px; }
  .member { row-gap: 40px; }
  .member__photo, .member--right .member__photo { grid-column: 1 / -1; position: static; aspect-ratio: 4 / 5; }
  .member__text, .member--right .member__text { grid-column: 1 / -1; grid-row: 2; }
  .wechat__text, .wechat__qr { grid-column: 1 / -1; }
  .wechat__qr { justify-self: start; margin-top: 32px; }
  .hero__index { font-size: var(--s-lead); }
  .bp__row { flex-direction: column; gap: 8px; }
  .bp__input { flex: none; height: 60px; }
  .bp__send { width: 100%; }
  .office { row-gap: 16px; }
  .office__city, .office__lines, .office__photo { grid-column: 1 / -1; }
  .foot__invite, .foot__links { grid-column: 1 / -1; }
  .foot__links { margin-top: 48px; }
  .foot__mark { font-size: 34vw; }
  :lang(en) .foot__mark { font-size: 36vw; }
}
@media (max-width: 1100px) {
  :lang(en) .strategy__slogan { font-size: var(--s-lead); line-height: var(--lh-lead); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .top__nav ul { gap: 6px 16px; }
  .member__photo { grid-column: 1 / span 6; }
  .member__text { grid-column: 7 / -1; }
  .member--right .member__photo { grid-column: 7 / -1; }
}