/*
 * Coach Xiaohao V2.0
 * Cinematic field-journal layer. This file intentionally overrides styles.css
 * so the original system remains available as a stable fallback.
 */

@font-face {
  font-family: "Xiaohao Display CN";
  src: url("./assets/fonts/xiaohao-display-cn.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --v2-ink: #0b0e10;
  --v2-paper: #f1f0ec;
  --v2-paper-deep: #e7e5df;
  --v2-signal: #ff5a2a;
  --v2-muted: #777a77;
  --v2-content: 1600px;
  --v2-radius: 2px;
}

body.site-v2 {
  background: var(--v2-paper);
}

.site-v2 main {
  display: flex;
  flex-direction: column;
}

.site-v2 .hero { order: 1; }
.site-v2 .availability-strip { order: 2; }
.site-v2 .proof { order: 3; }
.site-v2 .work { order: 4; }
.site-v2 .expertise { order: 5; }
.site-v2 .territories { order: 6; }
.site-v2 .gallery { order: 7; }
.site-v2 .brand-value { order: 8; }
.site-v2 .partnerships { order: 9; }
.site-v2 .process { order: 10; }
.site-v2 .brands { order: 11; }
.site-v2 .socials { order: 12; }
.site-v2 .contact { order: 13; }

.site-v2 .proof > *,
.site-v2 .work > *,
.site-v2 .expertise > *,
.site-v2 .territories > *,
.site-v2 .gallery > *,
.site-v2 .brand-value > *,
.site-v2 .partnerships > *,
.site-v2 .process > *,
.site-v2 .brands > *,
.site-v2 .socials > *,
.site-v2 .contact > * {
  width: 100%;
  max-width: var(--v2-content);
  margin-inline: auto;
}

/* Header */
.site-v2 .site-header {
  min-height: 88px;
  color: var(--white);
  background: linear-gradient(180deg, rgba(11, 14, 16, .78), rgba(11, 14, 16, 0));
  border-bottom-color: rgba(255, 255, 255, .12);
}

.site-v2 .site-header.is-scrolled {
  min-height: 70px;
  color: var(--black);
  background: rgba(241, 240, 236, .92);
  border-bottom-color: rgba(15, 18, 21, .14);
  box-shadow: 0 12px 40px rgba(15, 18, 21, .06);
}

.site-v2 .brand {
  font-size: 1rem;
  letter-spacing: -.055em;
}

.site-v2 .site-nav {
  gap: clamp(1.2rem, 2.2vw, 2.8rem);
}

.site-v2 .site-nav a {
  padding-block: .8rem;
}

.site-v2 .header-cta {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(15, 18, 21, .18);
  backdrop-filter: blur(10px);
}

.site-v2 .site-header.is-scrolled .header-cta {
  border-color: var(--black);
  background: transparent;
}

/* Hero */
.site-v2 .hero {
  min-height: 100svh;
  padding-top: clamp(8.5rem, 13vh, 11rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
  display: block;
  background:
    linear-gradient(90deg, rgba(11, 14, 16, 1) 0%, rgba(11, 14, 16, .98) 42%, rgba(11, 14, 16, .5) 70%, rgba(11, 14, 16, .14) 100%),
    var(--v2-ink);
}

.site-v2 .hero::before {
  z-index: 1;
  opacity: .48;
  background-size: 112px 112px;
  mask-image: linear-gradient(90deg, #000 0 48%, transparent 78%);
}

.site-v2 .hero::after {
  right: 37%;
  bottom: -36vw;
  z-index: 1;
  width: min(54vw, 820px);
  border-color: rgba(255, 90, 42, .26);
  box-shadow: inset 0 0 0 clamp(2rem, 5vw, 5rem) rgba(255, 90, 42, .018);
}

.site-v2 .hero-motion {
  z-index: 2;
  opacity: .58;
}

.site-v2 .hero-copy {
  position: relative;
  z-index: 4;
  width: min(58%, 940px);
  max-width: 940px;
  padding-top: clamp(1rem, 4vh, 3rem);
}

.site-v2 .hero-kicker {
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
  padding: 0 0 .8rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  letter-spacing: .14em;
}

.site-v2 .hero h1 {
  max-width: 980px;
  font-size: clamp(4.6rem, 8.1vw, 9.6rem);
  line-height: .85;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.site-v2 .hero-copy > p {
  max-width: 610px;
  margin: clamp(1.7rem, 3.5vh, 2.8rem) 0;
  color: #d2d4d3;
  font-size: clamp(1rem, 1.28vw, 1.28rem);
  line-height: 1.7;
}

.site-v2 .hero-actions {
  gap: .6rem;
}

.site-v2 .button {
  min-height: 52px;
  padding-inline: 1.5rem;
}

.site-v2 .button-primary {
  box-shadow: 0 14px 40px rgba(255, 90, 42, .2);
}

.site-v2 .hero-proofbar {
  position: relative;
  width: min(100%, 760px);
  margin-top: clamp(2.6rem, 6vh, 5.2rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 24px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .035) 48%, rgba(255, 91, 46, .1)),
    rgba(17, 21, 23, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 24px 70px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}

.site-v2 .hero-proofbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -70% 28% 46% -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}

.site-v2 .hero-proofbar span {
  min-height: 88px;
  padding: 1rem 1.2rem;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .55rem;
  border-color: rgba(255, 255, 255, .13);
  color: #bfc3c3;
  letter-spacing: 0;
  transition: background .3s ease, transform .3s ease;
}

.site-v2 .hero-proofbar span:first-child {
  padding-left: 1.2rem;
}

.site-v2 .hero-proofbar span:hover {
  background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 91, 46, .06));
}

.site-v2 .hero-proofbar b {
  color: var(--v2-signal);
  font-size: .66rem;
  letter-spacing: .12em;
}

.site-v2 .hero-proofbar strong {
  color: var(--white);
  font-size: clamp(.95rem, 1.2vw, 1.12rem);
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: none;
}

.site-v2 .hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 48%;
  height: 100%;
  min-height: 100%;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .14);
  box-shadow: -60px 0 120px rgba(0, 0, 0, .4);
}

.site-v2 .hero-media::before {
  display: none;
}

.site-v2 .hero-media::after {
  height: 100%;
  background:
    linear-gradient(90deg, rgba(11, 14, 16, .78), rgba(11, 14, 16, .04) 44%),
    linear-gradient(0deg, rgba(11, 14, 16, .48), transparent 42%);
}

.site-v2 .hero-media > span {
  left: auto;
  right: var(--gutter);
  bottom: 2rem;
  background: rgba(11, 14, 16, .68);
  backdrop-filter: blur(10px);
}

.site-v2 .extreme-stack {
  top: auto;
  right: calc(48% - 2.2rem);
  bottom: clamp(4rem, 8vh, 7rem);
  z-index: 5;
  transform: none;
}

.site-v2 .extreme-stack span {
  width: 4.4rem;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(11, 14, 16, .72);
  backdrop-filter: blur(10px);
}

.site-v2 .hero-index {
  z-index: 4;
  color: rgba(255, 255, 255, .45);
}

.site-v2 .availability-strip {
  min-height: 66px;
  padding-block: .9rem;
  background: var(--v2-signal);
}

.site-v2 .availability-strip span {
  letter-spacing: .075em;
}

/* Personal proof */
.site-v2 .proof {
  padding-top: clamp(6rem, 10vw, 10rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 90, 42, .1), transparent 24rem),
    var(--v2-paper);
}

.site-v2 .proof .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: end;
}

.site-v2 .proof .section-heading h2 {
  max-width: 900px;
}

.site-v2 .proof .section-heading p {
  max-width: 520px;
  padding-bottom: .5rem;
  line-height: 1.7;
}

.site-v2 .metrics {
  margin-top: clamp(3rem, 7vw, 6rem);
  gap: 0;
  border-color: rgba(15, 18, 21, .34);
}

.site-v2 .metric {
  min-height: 225px;
  padding: clamp(1.4rem, 2.5vw, 2.4rem);
  background: transparent;
}

.site-v2 .metric-primary {
  color: var(--black);
  background: var(--v2-paper-deep);
}

.site-v2 .metric-primary span {
  color: var(--v2-muted);
}

.site-v2 .metric strong {
  font-size: clamp(3rem, 5.5vw, 6rem);
  letter-spacing: -.065em;
}

.site-v2 .proof-line {
  margin-top: 2.5rem;
  color: #282c2d;
  font-size: clamp(1.15rem, 2.1vw, 2.2rem);
  letter-spacing: -.035em;
}

/* Selected stories move forward in the narrative */
.site-v2 .work {
  padding-top: clamp(6rem, 10vw, 10rem);
  background:
    radial-gradient(circle at 8% 2%, rgba(255, 90, 42, .13), transparent 30rem),
    var(--v2-ink);
}

.site-v2 .work-header {
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.site-v2 .work-header p {
  max-width: 520px;
  line-height: 1.7;
}

.site-v2 .projects {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  gap: clamp(1.5rem, 3vw, 2.8rem);
}

.site-v2 .project {
  min-height: 620px;
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .58fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  padding: clamp(1rem, 1.7vw, 1.75rem);
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}

.site-v2 .project:nth-child(even) {
  background: rgba(255, 255, 255, .06);
}

.site-v2 .project::before {
  inset: 12% -18% auto auto;
}

.site-v2 .project-media {
  min-height: 580px;
  box-shadow: none;
}

.site-v2 .project-copy {
  position: relative;
  z-index: 2;
  padding-right: clamp(.5rem, 2vw, 2rem);
}

.site-v2 .project-copy h3 {
  font-size: clamp(2.6rem, 4.4vw, 5.2rem);
  text-wrap: balance;
}

.site-v2 .project-copy p {
  max-width: 480px;
  font-size: 1rem;
}

.site-v2 .project-copy strong {
  line-height: 1.45;
}

/* Experience and story system */
.site-v2 .expertise {
  border-top: 1px solid #2e3336;
  background: #121619;
}

.site-v2 .expertise .section-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.site-v2 .expertise-grid {
  gap: 0;
  border-top: 1px solid #3b4146;
  border-bottom: 1px solid #3b4146;
}

.site-v2 .expertise-item {
  min-height: 390px;
  padding: 1.8rem;
  border-top: 0;
  border-right: 1px solid #3b4146;
}

.site-v2 .expertise-item:last-child {
  border-right: 0;
}

.site-v2 .expertise-item h3 {
  margin-top: clamp(3rem, 7vw, 6rem);
}

.site-v2 .territories {
  background: var(--v2-paper-deep);
}

.site-v2 .territory-media .media-slot {
  filter: saturate(.92) contrast(1.04);
}

.site-v2 .gallery {
  padding-top: clamp(5rem, 8vw, 8rem);
}

.site-v2 .gallery-grid {
  gap: .6rem;
}

.site-v2 .gallery-item {
  border-radius: var(--v2-radius);
}

/* Editorial manifesto */
.site-v2 .brand-value {
  padding-top: clamp(5rem, 8vw, 8rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
  background: var(--v2-paper);
}

.site-v2 .brand-value-intro {
  align-self: start;
  position: sticky;
  top: 8rem;
}

.site-v2 .value-item {
  padding-block: 1.8rem;
}

/* Collaboration */
.site-v2 .partnerships {
  background: #ebe9e3;
}

.site-v2 .service-list {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.site-v2 .service {
  min-height: 240px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.site-v2 .service h3 {
  margin-top: auto;
}

.site-v2 .service p {
  max-width: 360px;
}

.site-v2 .process {
  background: var(--v2-ink);
}

.site-v2 .process-grid li {
  min-height: 300px;
}

.site-v2 .process-grid strong {
  letter-spacing: -.04em;
}

/* Brand wall and social */
.site-v2 .brands {
  padding-top: clamp(6rem, 10vw, 10rem);
  background: var(--v2-paper);
}

.site-v2 .partner-logo-wall .logo-wordmark {
  min-height: 112px;
  background: rgba(255, 255, 255, .22);
}

.site-v2 .partner-logo-wall .logo-wordmark img {
  opacity: .9;
}

.site-v2 .socials {
  background:
    radial-gradient(circle at 90% 18%, rgba(255, 90, 42, .12), transparent 28rem),
    var(--v2-ink);
}

.site-v2 .social-logo-rail a {
  min-height: 118px;
}

/* Contact */
.site-v2 .contact {
  min-height: 720px;
  align-items: center;
  color: var(--white);
  background:
    linear-gradient(118deg, rgba(11, 14, 16, .98) 0 56%, rgba(11, 14, 16, .72)),
    var(--v2-signal);
}

.site-v2 .contact::before {
  border-color: rgba(255, 255, 255, .14);
}

.site-v2 .contact-copy h2 {
  font-size: clamp(4rem, 8vw, 9rem);
}

.site-v2 .contact-copy p {
  color: #cdd0d0;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
}

.site-v2 .wechat-contact {
  color: var(--black);
  background: var(--v2-signal);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .34);
}

.site-v2 .site-footer {
  border-top: 1px solid #2f3437;
  background: #080a0c;
}

/* Stronger motion language */
.site-v2 .section-heading h2,
.site-v2 .work-header h2,
.site-v2 .territory-intro h2,
.site-v2 .gallery-heading h2,
.site-v2 .brand-value-intro h2,
.site-v2 .process-heading h2,
.site-v2 .brands-title h2,
.site-v2 .socials-heading h2,
.site-v2 .contact-copy h2 {
  position: relative;
}

.site-v2 .section-heading h2::before,
.site-v2 .work-header h2::before,
.site-v2 .territory-intro h2::before,
.site-v2 .gallery-heading h2::before,
.site-v2 .brand-value-intro h2::before,
.site-v2 .process-heading h2::before,
.site-v2 .brands-title h2::before,
.site-v2 .socials-heading h2::before,
.site-v2 .contact-copy h2::before {
  content: "";
  width: clamp(44px, 5vw, 82px);
  height: 5px;
  margin-bottom: clamp(1rem, 2vw, 1.8rem);
  display: block;
  background: var(--v2-signal);
  transform-origin: left center;
}

.site-v2.reveal-ready .reveal {
  transition:
    opacity .85s cubic-bezier(.2, .7, .2, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1),
    filter .9s ease,
    clip-path 1s cubic-bezier(.16, 1, .3, 1);
}

.site-v2.reveal-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 72px, 0) scale(.985);
  filter: blur(8px);
  clip-path: inset(0 0 14% 0);
}

.site-v2.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  clip-path: inset(0);
}

.site-v2 .metrics .reveal:nth-child(2),
.site-v2 .expertise-grid .reveal:nth-child(2),
.site-v2 .value-rail .reveal:nth-child(2),
.site-v2 .service-list .reveal:nth-child(2),
.site-v2 .process-grid .reveal:nth-child(2) {
  transition-delay: .08s;
}

.site-v2 .metrics .reveal:nth-child(3),
.site-v2 .expertise-grid .reveal:nth-child(3),
.site-v2 .value-rail .reveal:nth-child(3),
.site-v2 .service-list .reveal:nth-child(3),
.site-v2 .process-grid .reveal:nth-child(3) {
  transition-delay: .16s;
}

.site-v2 .metrics .reveal:nth-child(4),
.site-v2 .value-rail .reveal:nth-child(4),
.site-v2 .service-list .reveal:nth-child(4),
.site-v2 .process-grid .reveal:nth-child(4) {
  transition-delay: .24s;
}

.site-v2 .service-list .reveal:nth-child(5) { transition-delay: .32s; }
.site-v2 .service-list .reveal:nth-child(6) { transition-delay: .4s; }

.site-v2.reveal-ready .project.reveal:not(.is-visible) {
  transform: translate3d(0, 110px, 0) scale(.95);
  clip-path: inset(8% 0 8% 0);
}

.site-v2.is-v2-ready .hero-kicker {
  animation: v2IntroUp .7s .08s both cubic-bezier(.16, 1, .3, 1);
}

.site-v2.is-v2-ready .hero h1 {
  animation: v2TitleCut 1s .16s both cubic-bezier(.16, 1, .3, 1);
}

.site-v2.is-v2-ready .hero-copy > p {
  animation: v2IntroUp .85s .34s both cubic-bezier(.16, 1, .3, 1);
}

.site-v2.is-v2-ready .hero-actions {
  animation: v2IntroUp .85s .48s both cubic-bezier(.16, 1, .3, 1);
}

.site-v2.is-v2-ready .hero-proofbar {
  animation: v2IntroUp .9s .62s both cubic-bezier(.16, 1, .3, 1);
}

.site-v2.is-v2-ready .hero-media {
  animation: v2ImageReveal 1.25s .06s both cubic-bezier(.16, 1, .3, 1);
}

.site-v2.is-v2-ready .extreme-stack {
  animation: v2IntroSide .9s .75s both cubic-bezier(.16, 1, .3, 1);
}

.site-v2.is-v2-ready .hero-media img {
  scale: 1.045;
  translate: 0 calc(var(--motion-y) * .025);
  transition: scale 1.1s cubic-bezier(.16, 1, .3, 1);
}

.site-v2 .project:hover .project-media img,
.site-v2 .gallery-item:hover img {
  scale: 1.035;
}

.site-v2 .project {
  transition:
    opacity .85s cubic-bezier(.2, .7, .2, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1),
    border-color .3s ease,
    background .3s ease,
    clip-path 1s cubic-bezier(.16, 1, .3, 1),
    filter .8s ease;
}

.site-v2 .project:hover {
  transform: translateY(-10px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .25);
}

.site-v2 .project:hover .case-link {
  color: var(--v2-signal);
  border-color: var(--v2-signal);
}

@keyframes v2IntroUp {
  from {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes v2IntroSide {
  from {
    opacity: 0;
    transform: translate3d(38px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes v2TitleCut {
  from {
    opacity: 0;
    transform: translate3d(0, 54px, 0) skewY(3deg);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewY(0);
    clip-path: inset(0);
  }
}

@keyframes v2ImageReveal {
  from {
    opacity: 0;
    transform: scale(1.08);
    clip-path: inset(0 0 0 100%);
  }
  to {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0);
  }
}

@keyframes v2ImageDrift {
  from { translate: 0 -3%; }
  to { translate: 0 3%; }
}

@supports (animation-timeline: view()) {
  .site-v2 .project-media img,
  .site-v2 .territory-media img,
  .site-v2 .gallery-item img {
    animation: v2ImageDrift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    scale: 1.08;
  }
}

/* Chinese typesetting */
html[lang="zh-CN"] .site-v2 .hero h1 {
  max-width: 780px;
  font-size: clamp(4rem, 7.4vw, 8.3rem);
  line-height: .98;
  letter-spacing: -.02em;
}

html[lang="zh-CN"] .site-v2 .hero h1,
html[lang="zh-CN"] .site-v2 .section-heading h2,
html[lang="zh-CN"] .site-v2 .territory-intro h2,
html[lang="zh-CN"] .site-v2 .work h2,
html[lang="zh-CN"] .site-v2 .partnerships h2,
html[lang="zh-CN"] .site-v2 .brand-value h2,
html[lang="zh-CN"] .site-v2 .process h2,
html[lang="zh-CN"] .site-v2 .brands h2,
html[lang="zh-CN"] .site-v2 .socials h2,
html[lang="zh-CN"] .site-v2 .gallery h2,
html[lang="zh-CN"] .site-v2 .contact h2,
html[lang="zh-CN"] .site-v2 .metric strong,
html[lang="zh-CN"] .site-v2 .proof-line,
html[lang="zh-CN"] .site-v2 .expertise-item h3,
html[lang="zh-CN"] .site-v2 .project-copy h3,
html[lang="zh-CN"] .site-v2 .service h3,
html[lang="zh-CN"] .site-v2 .process-grid strong {
  font-family: "Xiaohao Display CN", "Hiragino Sans GB", "PingFang SC", sans-serif;
  font-weight: 700;
  font-synthesis: none;
}

html[lang="zh-CN"] .site-v2 {
  --zh-body: "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html[lang="zh-CN"] .site-v2 .hero-copy > p {
  max-width: 580px;
}

html[lang="zh-CN"] .site-v2 .proof-line {
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .site-v2 .hero-copy {
    width: 62%;
  }

  .site-v2 .hero-media {
    width: 44%;
  }

  .site-v2 .extreme-stack {
    right: calc(44% - 2rem);
  }

  .site-v2 .project {
    grid-template-columns: 1.15fr .85fr;
  }

  .site-v2 .service-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 980px) {
  .site-v2 .site-header {
    background: rgba(11, 14, 16, .72);
    backdrop-filter: blur(14px);
  }

  .site-v2 .site-header.is-scrolled {
    background: rgba(241, 240, 236, .94);
  }

  .site-v2 .hero {
    min-height: auto;
    padding-bottom: 0;
    background: var(--v2-ink);
  }

  .site-v2 .hero-copy {
    width: 100%;
    max-width: 820px;
    padding-bottom: 4rem;
  }

  .site-v2 .hero-media {
    position: relative;
    inset: auto;
    width: calc(100% + (var(--gutter) * 2));
    height: 70svh;
    min-height: 520px;
    margin-left: calc(var(--gutter) * -1);
    border-top: 1px solid rgba(255, 255, 255, .14);
    border-left: 0;
  }

  .site-v2 .hero-media::after {
    background: linear-gradient(0deg, rgba(11, 14, 16, .5), transparent 46%);
  }

  .site-v2 .extreme-stack {
    right: var(--gutter);
    bottom: 2rem;
  }

  .site-v2 .hero-index {
    display: none;
  }

  .site-v2 .proof .section-heading,
  .site-v2 .expertise .section-heading {
    grid-template-columns: 1fr;
  }

  .site-v2 .project,
  .site-v2 .project-reverse {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .site-v2 .project-media {
    min-height: 520px;
  }

  .site-v2 .project-copy {
    padding: 1rem .5rem 2rem;
  }

  .site-v2 .expertise-item {
    min-height: auto;
    padding-block: 2rem;
    border-right: 0;
    border-bottom: 1px solid #3b4146;
  }

  .site-v2 .expertise-item h3 {
    margin-top: 2.5rem;
  }

  .site-v2 .brand-value-intro {
    position: static;
  }

  .site-v2 .contact {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .site-v2 .hero {
    padding-top: 7.5rem;
  }

  .site-v2 .hero h1 {
    font-size: clamp(3.5rem, 17vw, 5.4rem);
    line-height: .88;
  }

  html[lang="zh-CN"] .site-v2 .hero h1 {
    font-size: clamp(3.25rem, 15vw, 5rem);
    line-height: 1.02;
  }

  .site-v2 .hero-proofbar {
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 18px;
  }

  .site-v2 .hero-proofbar span {
    min-height: 82px;
    padding: .75rem;
    border-right: 1px solid rgba(255, 255, 255, .13);
    border-bottom: 0;
  }

  .site-v2 .hero-proofbar strong {
    font-size: clamp(.76rem, 3vw, .9rem);
  }

  .site-v2 .hero-proofbar span:first-child {
    padding-left: .75rem;
  }

  .site-v2 .hero-media {
    height: 62svh;
    min-height: 430px;
  }

  .site-v2 .extreme-stack {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    margin: 0;
    grid-template-columns: 1fr;
  }

  .site-v2 .extreme-stack span {
    width: 3.7rem;
    min-height: 46px;
    font-size: .62rem;
  }

  .site-v2 .metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-v2 .metric {
    min-height: 170px;
    border-right: 1px solid var(--line);
  }

  .site-v2 .metric:nth-child(2n) {
    border-right: 0;
  }

  .site-v2 .metric strong {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .site-v2 .project-media {
    min-height: 370px;
  }

  .site-v2 .service-list {
    grid-template-columns: 1fr;
  }

  .site-v2 .service {
    min-height: 210px;
  }

  .site-v2 .contact-copy h2 {
    font-size: clamp(3.8rem, 18vw, 6.2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-v2.is-v2-ready .hero-kicker,
  .site-v2.is-v2-ready .hero h1,
  .site-v2.is-v2-ready .hero-copy > p,
  .site-v2.is-v2-ready .hero-actions,
  .site-v2.is-v2-ready .hero-proofbar,
  .site-v2.is-v2-ready .hero-media,
  .site-v2.is-v2-ready .extreme-stack,
  .site-v2 .project-media img,
  .site-v2 .territory-media img,
  .site-v2 .gallery-item img {
    animation: none !important;
    translate: none !important;
    scale: 1 !important;
  }

  .site-v2.reveal-ready .reveal,
  .site-v2.reveal-ready .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
  }
}