/* ============================================================
   Meridian Market
   Palette : warm limestone, soft stone, warm charcoal, burgundy
   Type    : Bodoni Moda (display) / Jost (text) / Noto Serif SC (gloss)
   Device  : "the meridian" — a hairline spine the layout hangs off
   ============================================================ */

:root{
  --paper:      #f5f2ec;
  --paper-lift: #faf8f4;
  --stone:      #e4dfd5;
  --stone-deep: #d5cec1;
  --ink:        #171512;
  --ink-soft:   #5c564c;
  --ink-faint:  #635d52;
  --burgundy:   #6b1f2b;
  /* the mark's red — brighter than the page accent, used only for the icon */
  --mark-red:   #a92b30;
  /* the same wine, tinted toward paper so it clears AA on the dark band */
  --burgundy-lift: #a97e82;
  --line:       rgba(23, 21, 18, 0.14);
  /* the spine crosses both the paper and the ink band, so it needs one
     mid tone that holds on either ground */
  --line-spine: rgba(138, 130, 118, 0.5);
  --line-soft:  rgba(23, 21, 18, 0.08);

  /* the spine sits here on desktop; every grid below splits on it */
  --spine: 30%;
  --col-gap: clamp(32px, 3.6vw, 60px);
  --half-gap: clamp(16px, 1.8vw, 30px);

  --gut: clamp(20px, 5vw, 84px);
  --measure: 61ch;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------------- reset ---------------- */

*, *::before, *::after { box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; }

h1, h2, h3, h4{
  font-family: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-optical-sizing: auto;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0; }

::selection{ background: var(--burgundy); color: var(--paper-lift); }

:focus-visible{
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
}

.skip{
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 200; text-decoration: none;
}
.skip:focus{ left: 8px; top: 8px; }

.vh{
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------- shared layout ---------------- */

.wrap{
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

section{ position: relative; }

.band{ padding-block: clamp(88px, 13vh, 168px); }
.band--stone{ background: var(--stone); }
.band--tight{ padding-block: clamp(64px, 8vh, 108px); }
/* inner pages open straight into content, so the first band clears the bar */
.band--top{ padding-top: clamp(136px, 17vh, 212px); }
/* The meridian rule is one fixed hairline over the whole viewport. A band with
   this class paints above it, so the rule stops at the band's top edge and
   picks up again below it instead of running through the section. */
.band--solid{ z-index: 3; }

.rule{
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------------- the meridian spine ----------------
   A single hairline at 30% of the content column. Every grid below
   splits on the same line, so the rule is the page's structure rather
   than a decoration laid over it. Labels sit left of it, prose right,
   photography crosses it.
   ---------------------------------------------------------------- */

.meridian{
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s var(--ease-out);
}
.meridian__inner{
  max-width: 1600px;
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gut);
}
.meridian__track{ position: relative; height: 100%; }
.meridian__line{
  position: absolute;
  top: 0; bottom: 0;
  left: var(--spine);
  width: 1px;
  background: var(--line-spine);
}
@media (max-width: 1023px){ .meridian{ display: none; } }

/* the shared split: label | content */
.sec{ display: grid; }
@media (min-width: 1024px){
  .sec{ grid-template-columns: calc(var(--spine) - var(--half-gap)) minmax(0, 1fr); column-gap: var(--col-gap); }
  .sec > .gloss{ text-align: right; margin-top: .55em; }
  .indent{ margin-left: calc(var(--spine) + var(--half-gap)); }
}
@media (max-width: 1023px){
  .sec > .gloss{ grid-column: 1; }
}

/* ---------------- gloss (bilingual section marker) ---------------- */

.gloss{
  display: block;
  font-family: 'Noto Serif SC', 'Bodoni Moda', serif;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin-bottom: 1.5rem;
}
.gloss em{
  font-style: normal;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-right: 0.9em;
  color: var(--ink-soft);
}
.gloss i{ font-style: normal; }

.gloss--dark{ color: rgba(245,242,236,.55); }
.gloss--dark em{ color: rgba(245,242,236,.78); }

.how__grid--head{ margin-bottom: clamp(28px, 4vw, 52px); }
.how__grid--head > .gloss{ margin-top: 0; }

/* ---------------- masked word reveal ---------------- */

.w{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* tight leading + italic overhang would otherwise be sheared off by the mask */
  padding: 0.24em 0.06em 0.30em;
  margin: -0.24em -0.06em -0.30em;
}
.w > i{
  display: inline-block;
  font-style: inherit;
  will-change: transform;
}
.js .reveal-words .w > i{ transform: translateY(112%); }
.js .reveal-up{ opacity: 0; }

/* ---------------- nav ---------------- */

.nav{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px var(--gut);
  /* legible-by-default: without scripting the bar stays on paper */
  color: var(--ink);
  background: rgba(245,242,236,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: color .5s var(--ease-out), background-color .5s var(--ease-out),
              padding .5s var(--ease-out), border-color .5s var(--ease-out);
}
.nav::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(15,13,11,.58) 0%, rgba(15,13,11,.22) 55%, rgba(15,13,11,0) 100%);
  height: 190px;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
/* with scripting the bar starts clear over the hero photograph */
.js .nav{
  color: var(--paper-lift);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  padding-block: 22px;
}
.js .nav::before{ opacity: 1; }
.js .nav.is-solid{
  color: var(--ink);
  background: rgba(245,242,236,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line-soft);
  padding-block: 15px;
}
.js .nav.is-solid::before{ opacity: 0; }

/* while the overlay is up the bar sits on paper, so it must read dark */
.nav.is-menu{
  color: var(--ink);
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav.is-menu::before{ opacity: 0; }

.nav__mark{
  position: relative;
  font-family: 'Bodoni Moda', serif;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__mark span{ font-family: 'Noto Serif SC', serif; font-size: .8em; opacity: .55; margin-left: .6em; }

.nav__links{
  position: relative;
  display: flex;
  gap: clamp(18px, 2.2vw, 38px);
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.nav__links a{
  text-decoration: none;
  opacity: .92;
  transition: opacity .3s;
}
.nav__links a:hover{ opacity: 1; }
.nav__links a[aria-current="page"]{
  opacity: 1;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 3px;
}

@media (max-width: 899px){ .nav__links{ display: none; } }

.nav__end{ display: flex; align-items: center; gap: 14px; }

/* menu toggle — a word, not a hamburger; the two rules just give it weight */
.nav__toggle{
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 10px 0 10px 6px;
  color: inherit;
  font-family: inherit;
  font-size: .9375rem;
  letter-spacing: .02em;
  cursor: pointer;
}
.nav__toggle-bars{ display: inline-block; width: 17px; }
.nav__toggle-bars i{
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease-io), opacity .3s;
}
.nav__toggle-bars i + i{ margin-top: 5px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child{ transform: translateY(3px) rotate(13deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child{ transform: translateY(-3px) rotate(-13deg); }

@media (max-width: 899px){
  .nav__toggle{ display: inline-flex; }
  /* .btn is declared later, so this needs the extra class to win */
  .nav .nav__cta{ display: none; }
}

/* ---------------- menu overlay ---------------- */

.menu{
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--paper);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
/* `display: flex` above beats the hidden attribute's UA `display: none`, which
   would leave this overlay invisible but still swallowing every click on the
   page. Both of these keep it genuinely out of the way when it is shut. */
.menu[hidden]{ display: none; }
.menu:not(.is-open){ pointer-events: none; }
.menu.is-open{ opacity: 1; pointer-events: auto; }
.menu__inner{
  width: 100%;
  padding: 96px var(--gut) var(--gut);
}
.menu__list{
  list-style: none;
  margin: 0 0 clamp(32px, 6vh, 56px);
  padding: 0;
  display: grid;
}
.menu__list li + li{ border-top: 1px solid var(--line); }
.menu__list a{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(13px, 2.2vh, 20px) 0;
  text-decoration: none;
}
.menu__list span{
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.menu__list em{
  font-family: 'Noto Serif SC', serif;
  font-style: normal;
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
}
.menu__mail{ font-size: .9375rem; }

/* ---------------- buttons ---------------- */

.btn{
  position: relative;
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 15px 30px 14px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0;
}
.btn > span{ position: relative; z-index: 1; transition: color .45s var(--ease-io); }
.btn::after{
  content: '';
  position: absolute; inset: 0;
  background: currentColor;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease-io);
  z-index: 0;
}
.btn:hover::after, .btn:focus-visible::after{ transform: scaleY(1); }
.btn--light:hover > span, .btn--light:focus-visible > span{ color: var(--ink); }
.btn--dark{ color: var(--ink); }
.btn--dark:hover > span, .btn--dark:focus-visible > span{ color: var(--paper); }

.btn--fill{
  background: var(--burgundy);
  border-color: var(--burgundy);
  color: var(--paper-lift);
}
.btn--fill::after{ background: var(--ink); }
.btn--fill:hover > span, .btn--fill:focus-visible > span{ color: var(--paper-lift); }

.nav .btn{ padding: 11px 22px 10px; font-size: .875rem; }
@media (max-width: 520px){ .nav .btn{ padding: 10px 16px 9px; font-size: .8125rem; } }

/* quiet inline link with a rule that grows */
.ilink{
  position: relative;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .45s var(--ease-out);
}
.ilink:hover{ background-size: 0% 1px; background-position: 100% 100%; }

/* ============================================================
   1. HERO
   ============================================================ */

.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #16130f;
  color: var(--paper-lift);
}
.hero__stage{ position: absolute; inset: 0; }
.hero__stage canvas{ display: block; width: 100%; height: 100%; }

/* CSS fallback / pre-WebGL frames */
.hero__frames{ position: absolute; inset: 0; }
.hero__frames img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s var(--ease-io);
}
.hero__frames img:first-child{ opacity: 1; }
.hero.is-webgl .hero__frames{ opacity: 0; transition: opacity .8s .2s; }

.hero__scrim{
  position: absolute; inset: 0;
  /* two beds: one under the copy at the foot, one down the type side, so the
     headline stays readable whichever frame is showing */
  background:
    linear-gradient(to right, rgba(14,12,10,.52) 0%, rgba(14,12,10,.24) 40%, rgba(14,12,10,0) 66%),
    linear-gradient(to top, rgba(14,12,10,.70) 0%, rgba(14,12,10,.26) 44%, rgba(14,12,10,.06) 68%, rgba(14,12,10,.28) 100%);
  pointer-events: none;
}

.hero__inner{
  position: relative;
  width: 100%;
  padding-bottom: clamp(56px, 9vh, 104px);
  padding-top: 140px;
}

.hero__title{
  font-size: clamp(2.6rem, 7.1vw, 6.7rem);
  line-height: 1.0;
  letter-spacing: -0.022em;
  max-width: 15ch;
}
.hero__title .ln{ display: block; }
.hero__title .ln--2{ font-style: italic; }

.hero__lede{
  margin-top: clamp(24px, 3.4vh, 40px);
  max-width: 46ch;
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.1875rem);
  line-height: 1.66;
  color: rgba(250, 248, 244, .92);
}

.hero__cta{ margin-top: clamp(28px, 3.6vh, 44px); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.hero__meta{
  position: absolute;
  right: var(--gut);
  bottom: clamp(56px, 9vh, 104px);
  text-align: right;
  font-size: .75rem;
  letter-spacing: .1em;
  color: rgba(250,248,244,.5);
  line-height: 1.9;
}
@media (max-width: 1023px){ .hero__meta{ display: none; } }

.hero__count{
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px;
}
.hero__count b{
  display: block; width: 22px; height: 1px; background: rgba(250,248,244,.32);
  position: relative; overflow: hidden;
}
.hero__count b::after{
  content:''; position: absolute; inset: 0; background: var(--paper-lift);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.hero__count b.on::after{ transform: scaleX(1); }

/* ============================================================
   2. INTRODUCTION
   ============================================================ */

.intro__lead{
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.6rem, 1.05rem + 2.3vw, 3.05rem);
  line-height: 1.16;
  letter-spacing: -0.014em;
  max-width: 21ch;
}
.intro__body{
  margin-top: clamp(30px, 4vw, 52px);
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  color: var(--ink-soft);
}
@media (min-width: 760px){
  .intro__body{ grid-template-columns: 1fr 1fr; }
  /* the pivot line and the closing paragraph run the full width under the pair */
  .intro__turn,
  .intro__body > p:last-child{ grid-column: 1 / -1; }
  .intro__body > p:last-child{ max-width: var(--measure); }
}

.intro__turn{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-block: .3em;
}

/* ============================================================
   3. THE OPPORTUNITY
   ============================================================ */

.opp__head{
  font-size: clamp(2rem, 1.2rem + 3.3vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.opp__grid{
  margin-top: clamp(44px, 6vw, 88px);
  display: grid;
  gap: clamp(28px, 4vw, 76px);
  align-items: start;
}
@media (min-width: 900px){
  .opp__grid{ grid-template-columns: minmax(0, 0.98fr) minmax(0, 1fr); }
  .opp__figs{ order: 0; }
  .opp__copy{ order: 1; }
}
.opp__copy{ display: grid; gap: 1.5em; max-width: var(--measure); color: var(--ink-soft); }
.opp__copy strong{ font-weight: 400; color: var(--ink); }

.opp__figs{ position: relative; }
.opp__fig{ overflow: hidden; }
.opp__fig img{ width: 100%; height: 100%; object-fit: cover; }
/* Sized so the pair finishes just below the paragraph beside it rather than
   running far past it. Same composition, shorter. */
.opp__fig--a{ aspect-ratio: 3 / 2; }
.opp__fig--b{
  aspect-ratio: 1 / 1;
  width: 42%;
  margin-top: -18%;
  margin-left: auto;
  margin-right: -6%;
  position: relative;
  z-index: 2;
  box-shadow: 0 24px 60px -30px rgba(23,21,18,.55);
}
@media (max-width: 899px){ .opp__fig--b{ margin-right: 0; width: 52%; } }

.opp__note{
  margin-top: 26px;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
  max-width: 40ch;
}

/* pull quote */
.pull{
  margin-top: clamp(56px, 8vw, 108px);
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
.pull p{
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.45rem, 0.95rem + 2vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  max-width: 24ch;
}

/* ============================================================
   3b. CHINA OUTBOUND TRAVEL
   ============================================================ */

.china{ background: var(--paper); }

.china__head{
  font-size: clamp(2rem, 1.2rem + 3.3vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.china__standfirst{
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3rem);
  color: var(--ink-soft);
}

.china__block{ margin-top: clamp(52px, 7vw, 96px); }

.china__sub{
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.95rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  max-width: 24ch;
  padding-bottom: .7em;
  border-bottom: 1px solid var(--line);
}
.china__copy{
  margin-top: clamp(22px, 2.6vw, 34px);
  display: grid;
  gap: 1.35em;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.china__bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6em;
}
.china__bullets li{
  position: relative;
  padding-left: 1.4em;
}
.china__bullets li::before{
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 14px; height: 1px;
  background: var(--burgundy);
}

/* the three headline figures, set as bubbles */
.china__stats{
  margin-top: clamp(34px, 4.5vw, 56px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
}
@media (min-width: 720px){
  .china__stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stat{ display: grid; gap: 14px; justify-items: start; }
.stat__fig{
  display: inline-flex;
  align-items: center;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--burgundy);
  border: 1px solid var(--burgundy);
  border-radius: 999px;
  padding: .56em .92em;
  white-space: nowrap;
}
.stat__fig i{ font-style: normal; padding: 0 .12em; }
/* a range carries roughly twice the glyphs, so it takes a smaller step to sit
   inside the same column as the single figures */
.stat__fig--range{ font-size: clamp(1.1rem, .88rem + .95vw, 1.62rem); padding-inline: .8em; }
.stat__label{
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 26ch;
}

/* the four structural trends */
.trends{
  margin-top: clamp(30px, 3.6vw, 46px);
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
}
@media (min-width: 860px){
  .trends{ grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.2vw, 46px); }
}
.trend{
  display: grid;
  gap: .5em;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.trend__fig{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem);
  line-height: 1;
  color: var(--burgundy);
  letter-spacing: -0.015em;
}
.trend__name{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.2;
  margin: 0;
}
.trend p{
  font-size: .9375rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

/* destination comparison */
.metrics{
  margin-top: clamp(26px, 3.2vw, 40px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.metrics__table{
  width: 100%;
  min-width: 840px;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}
/* keep the short numeric columns from wrapping to three lines while the two
   prose columns take the space they need */
.metrics__table th:nth-child(1){ width: 15%; }
.metrics__table th:nth-child(2){ width: 14%; }
.metrics__table th:nth-child(3){ width: 14%; }
.metrics__table th:nth-child(4){ width: 28%; }
.metrics__table th:nth-child(5){ width: 29%; }
.metrics__table th,
.metrics__table td{
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-weight: 300;
  font-size: .875rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.metrics__table thead th{
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--ink);
  border-bottom-color: rgba(23,21,18,.32);
  padding-bottom: 12px;
}
.metrics__table tbody th{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.0625rem;
  color: var(--ink);
  white-space: nowrap;
  padding-right: 28px;
}
.metrics__num{ font-variant-numeric: tabular-nums; color: var(--ink); }
.metrics__table tbody tr:last-child th,
.metrics__table tbody tr:last-child td{ border-bottom: 0; }

/* ============================================================
   4. SERVICES
   ============================================================ */

.svc__head{
  font-size: clamp(2rem, 1.2rem + 3.3vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.svc__lead{
  margin-top: clamp(26px, 3.2vw, 40px);
  max-width: var(--measure);
  color: var(--ink-soft);
}
.svc__close{
  margin-top: clamp(34px, 4vw, 52px);
  max-width: var(--measure);
  color: var(--ink);
}
.svc__list{ margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--line); }

.svc__item{
  display: grid;
  gap: 10px 40px;
  padding-block: clamp(30px, 3.6vw, 52px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
@media (min-width: 1024px){
  .svc__item{
    grid-template-columns: calc(var(--spine) - var(--half-gap)) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-items: baseline;
  }
}
.svc__name{
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
  transition: color .4s var(--ease-out);
}
.svc__zh{
  display: block;
  font-family: 'Noto Serif SC', serif;
  font-size: .8125rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
  margin-top: .75em;
}
.svc__desc{ color: var(--ink-soft); max-width: var(--measure); }
.svc__plat{
  margin-top: 1em;
  font-size: .8125rem;
  letter-spacing: .03em;
  color: var(--ink-faint);
}
.svc__plat b{ font-weight: 400; color: var(--ink-soft); }

@media (hover: hover){
  .svc__item:hover .svc__name{ color: var(--burgundy); }
}

.svc__caveat{
  margin-top: clamp(28px, 3.4vw, 44px);
  font-size: .875rem;
  color: var(--ink-faint);
  max-width: 62ch;
  line-height: 1.7;
}

/* ============================================================
   5. HOW WE WORK  (pinned)
   ============================================================ */

.how{ background: var(--ink); color: var(--paper); }
.how__pin{ min-height: 100svh; display: flex; align-items: center; padding-block: 96px; }
.how__grid{ display: grid; gap: clamp(34px, 5vw, 80px); width: 100%; }
@media (min-width: 1024px){
  /* stacked: the steps keep the same left margin as every other text column */
  .how__stage{ margin-left: calc(var(--spine) + var(--half-gap)); }
  .how--pinned .how__grid{
    grid-template-columns: calc(var(--spine) - var(--half-gap)) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
  .how--pinned .how__stage{ margin-left: 0; }
}

.how__index{ display: none; list-style: none; margin: 0; padding: 0; gap: 2px; }
.how__index li{ border-top: 1px solid rgba(245,242,236,.14); }
.how__index li:last-child{ border-bottom: 1px solid rgba(245,242,236,.14); }
.how__index button{
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 11px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 300;
  letter-spacing: .02em;
  line-height: 1.5;
  color: rgba(245,242,236,.55);
  transition: color .4s var(--ease-out);
}
/* hover brightens; the wine numeral is reserved for the step you are on, so
   the two states never read as the same thing */
.how__index button:hover{ color: var(--paper); }
.how__index button:hover .n{ color: rgba(245,242,236,.8); }
.how__index button:focus-visible{
  outline: 1px solid var(--burgundy-lift);
  outline-offset: 3px;
}
.how__index li.on button{ color: var(--paper); }
.how__index .n{
  font-family: 'Bodoni Moda', serif;
  font-size: .8125rem;
  width: 1.6em;
  flex: none;
  color: rgba(245,242,236,.5);
  transition: color .4s var(--ease-out);
}
.how__index li.on .n{ color: var(--burgundy-lift); }
@media (min-width: 1024px){ .how--pinned .how__index{ display: grid; } }

.how__stage{ display: grid; gap: clamp(40px, 6vw, 68px); }
.how__step{ position: relative; }

/* only once the pinned progression is wired do the steps stack in place */
.how--pinned .how__stage{
  display: block;
  position: relative;
  min-height: clamp(300px, 46vh, 460px);
}
.how--pinned .how__step{
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
}
.how--pinned .how__step.on{ opacity: 1; pointer-events: auto; }
.how__num{
  font-family: 'Bodoni Moda', serif;
  font-size: .875rem;
  letter-spacing: .1em;
  color: var(--burgundy-lift);
  display: block;
  margin-bottom: 1.4rem;
}
.how__title{
  font-size: clamp(1.85rem, 1.1rem + 3vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.how__body{
  margin-top: clamp(18px, 2.4vw, 30px);
  max-width: 52ch;
  color: rgba(245,242,236,.82);
  font-size: clamp(1rem, .96rem + .24vw, 1.125rem);
}

/* the pin only claims a full screen when it is actually pinning */
.how__pin{ min-height: 0; display: block; }
.how--pinned .how__pin{ min-height: 100svh; display: flex; align-items: center; }

/* ============================================================
   6. WHO WE WORK WITH
   ============================================================ */

.places__head{
  font-size: clamp(2rem, 1.2rem + 3.3vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.places__grid{
  margin-top: clamp(44px, 6vw, 84px);
  display: grid;
  gap: clamp(26px, 3.4vw, 54px);
  grid-template-columns: repeat(12, 1fr);
}
.place{ grid-column: span 12; }
.place__frame{ overflow: hidden; position: relative; }
.place__frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
}
@media (hover: hover){
  .place:hover .place__frame img{ transform: scale(1.005); }
}
.place__cap{
  margin-top: 13px;
  display: grid;
  gap: 3px;
  justify-items: start;
  border-top: 1px solid var(--line);
  padding-top: 11px;
}
.place__name{
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.4rem);
  line-height: 1.2;
}
.place__zh{
  font-family: 'Noto Serif SC', serif;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* A band of short frames: column spans still vary, so the rows keep their
   asymmetry, but every image shares one height and the section stays compact. */
@media (min-width: 760px){
  .place__frame{ height: clamp(150px, 16.5vw, 250px); }
  /* widest columns carry the longest names, so every caption holds one line */
  .place--1{ grid-column: span 4; }
  .place--2{ grid-column: span 5; }
  .place--3{ grid-column: span 3; }
  .place--4{ grid-column: span 5; }
  .place--5{ grid-column: span 4; }
  .place--6{ grid-column: span 3; }
}
@media (max-width: 759px){
  .place{ grid-column: span 6; }
  .place__frame{ height: clamp(118px, 30vw, 170px); }
  .place__name{ font-size: .9375rem; }
  .place__zh{ font-size: .6875rem; }
}
/* ============================================================
   7. THE OFFER
   ============================================================ */

.offer{ background: var(--stone); }

.offer__eyebrow{
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.6;
  color: var(--burgundy);
  margin-top: .5em;
}
.offer__eyebrow span{
  display: block;
  margin-top: .5em;
  font-family: 'Noto Serif SC', serif;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
}
@media (min-width: 1024px){
  .sec > .offer__eyebrow{ text-align: right; }
}

.offer__title{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 17ch;
}

.offer__grid{
  margin-top: clamp(34px, 4.2vw, 56px);
  display: grid;
  gap: clamp(32px, 4vw, 66px);
  align-items: start;
}
@media (min-width: 900px){
  .offer__grid{ grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
}

.offer__lede{
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
}

.offer__action{
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid rgba(23,21,18,.16);
  display: grid;
  justify-items: start;
  gap: 14px;
}
.offer__cta span{ line-height: 1.3; }
.offer__explain{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}
.offer__reassure{
  font-size: .875rem;
  color: var(--ink-faint);
}
.offer__alt{
  margin-top: clamp(22px, 2.6vw, 30px);
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* what the report contains */
.offer__contents-head{
  font-family: 'Jost', sans-serif;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink);
  padding-bottom: .9em;
  border-bottom: 1px solid rgba(23,21,18,.16);
}
.report{
  counter-reset: rep;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.report__item{
  counter-increment: rep;
  position: relative;
  padding: clamp(17px, 2vw, 23px) 0 clamp(17px, 2vw, 23px) 3em;
  border-bottom: 1px solid var(--line);
}
.report__item::before{
  content: counter(rep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: clamp(19px, 2.2vw, 26px);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--burgundy);
}
.report__name{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.0625rem, .98rem + .45vw, 1.28rem);
  line-height: 1.25;
  margin: 0 0 .35em;
}
.report__item p{
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* a comfortable, full-width target on phones */
@media (max-width: 639px){
  .offer__action{ justify-items: stretch; }
  .offer__cta{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 14px 22px;
    text-align: center;
  }
}

/* ---------------- footer ----------------
   Deep burgundy ground. Every text tone below clears 4.5:1 on it:
   paper 10.1, paper@.86 7.9, paper@.72 6.0.
   ---------------------------------------------------------------- */

.foot{
  position: relative;
  z-index: 3;                       /* the meridian rule stops at the footer */
  background: var(--burgundy);
  color: rgba(245,242,236,.86);
  padding-block: clamp(56px, 7vw, 92px) clamp(34px, 4vw, 48px);
  font-size: .9375rem;
}

.foot a{
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: color .3s var(--ease-out), background-size .4s var(--ease-out);
}
.foot a:hover{ color: var(--paper); background-size: 100% 1px; }
.foot a:focus-visible{ outline: 2px solid var(--paper); outline-offset: 3px; }

.foot__top{
  display: grid;
  gap: clamp(34px, 4vw, 56px);
}
@media (min-width: 760px){
  .foot__top{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .foot__top{ grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
}

.foot__brand{ max-width: 34ch; }
.foot__mark{
  display: inline-block;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 1.25rem;
  letter-spacing: .05em;
  color: var(--paper);
  background-image: none;
}
.foot__mark span{
  font-family: 'Noto Serif SC', serif;
  font-size: .8em;
  opacity: .62;
  margin-left: .6em;
}
.foot__blurb{
  margin-top: 1.1em;
  line-height: 1.65;
  color: rgba(245,242,236,.86);
}

.foot__h{
  font-family: 'Jost', sans-serif;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: rgba(245,242,236,.72);
  margin-bottom: 1.1em;
}
.foot__col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .62em;
}

.foot__bottom{
  margin-top: clamp(44px, 5.5vw, 76px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid rgba(245,242,236,.22);
  display: grid;
  gap: 1.1em;
}
@media (min-width: 1024px){
  .foot__bottom{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: clamp(34px, 4vw, 64px);
    align-items: start;
  }
  .foot__copy{ grid-row: 1; }
  .foot__disclaimer{ grid-column: 2; grid-row: 1; }
  .foot__credit{ grid-column: 2; grid-row: 2; }
}
.foot__copy{ color: rgba(245,242,236,.86); }
.foot__disclaimer,
.foot__credit{
  font-size: .8125rem;
  line-height: 1.7;
  color: rgba(245,242,236,.72);
  max-width: 78ch;
}

/* ---------------- reduced motion ---------------- */

@media (max-width: 640px){
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(14,12,10,.86) 0%, rgba(14,12,10,.54) 46%, rgba(14,12,10,.20) 72%, rgba(14,12,10,.42) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal-words .w > i{ transform: none; }
  .js .reveal-up{ opacity: 1; }
  .hero__frames img{ transition: none; }
  .place__frame img{ transform: none; }
  .menu{ transition: none; }
}

/* ============================================================
   PAGE COMPONENTS — services & market
   ============================================================ */

/* full-width photograph between bands */
.bleed{ margin: 0; }
.bleed img{
  width: 100%;
  height: clamp(240px, 42vw, 520px);
  object-fit: cover;
  display: block;
}

/* section openers */
.svc__standfirst,
.china__standfirst{
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 46ch;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.grp__head{
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  max-width: 18ch;
}

/* the two disciplines, as a pair of entry points */
.disc__intro{
  max-width: 44ch;
  color: var(--ink-soft);
  margin-bottom: clamp(30px, 4vw, 46px);
}
.discs{ display: grid; gap: clamp(26px, 3.4vw, 48px); }
@media (min-width: 760px){ .discs{ grid-template-columns: 1fr 1fr; } }
.disc{ text-decoration: none; display: block; }
.disc__frame{ display: block; overflow: hidden; }
.disc__frame img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1s var(--ease-out);
}
@media (hover: hover){ .disc:hover .disc__frame img{ transform: scale(1); } }
.disc__body{
  display: block;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(23,21,18,.22);
}
.disc__name{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  line-height: 1.2;
  transition: color .4s var(--ease-out);
}
.disc__name b{
  font-family: 'Noto Serif SC', serif;
  font-weight: 400;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (hover: hover){ .disc:hover .disc__name{ color: var(--burgundy); } }
.disc__note{
  display: block;
  margin-top: 7px;
  font-size: .8125rem;
  color: var(--ink-soft);
}

/* a service's opening sentence carries more weight than the detail under it */
.svc__lead-line{
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure);
}
.svc__lead-line + .svc__desc{ margin-top: .9em; }

/* platform chips */
.chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.2em 0 0;
  padding: 0;
  list-style: none;
}
.chip{
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px 8px;
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.chip b{
  font-family: 'Noto Serif SC', serif;
  font-weight: 400;
  font-size: .875rem;
  color: var(--ink);
}

/* pulled figures */
.figrow{
  margin-top: clamp(30px, 3.6vw, 46px);
  display: grid;
  gap: clamp(22px, 2.6vw, 38px);
}
@media (min-width: 720px){
  .figrow{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figrow--pair{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fig{
  display: grid;
  gap: 9px;
  align-content: start;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.fig__n{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--burgundy);
  font-variant-numeric: tabular-nums;
}
.fig__l{
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30ch;
}

/* the three things to capture — a real sequence, so it is numbered */
.capture{
  counter-reset: cap;
  list-style: none;
  margin-top: clamp(26px, 3vw, 38px);
  padding: 0;
  display: grid;
  gap: 0;
}
.capture__item{
  counter-increment: cap;
  position: relative;
  display: grid;
  gap: 4px;
  padding: clamp(18px, 2.2vw, 26px) 0 clamp(18px, 2.2vw, 26px) 3.2em;
  border-top: 1px solid var(--line);
}
.capture__item:last-child{ border-bottom: 1px solid var(--line); }
.capture__item::before{
  content: counter(cap, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: clamp(20px, 2.4vw, 29px);
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--burgundy);
}
.capture__name{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem);
  line-height: 1.2;
}
.capture__when{ font-size: .9375rem; color: var(--ink-soft); }

/* copy beside a photograph */
.split{
  margin-top: clamp(34px, 4.5vw, 60px);
  display: grid;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 900px){
  /* photograph crosses the rule on the left, prose stays to the right of it,
     the same way the opportunity section reads on the About page */
  .split{ grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .split__fig{ order: 0; }
  .split__copy{ order: 1; }
}
.split__copy{ display: grid; gap: 1.35em; max-width: var(--measure); color: var(--ink-soft); }
.split__fig{ margin: 0; overflow: hidden; }
.split__fig img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* offset image pair */
.pair{
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
}
@media (min-width: 760px){
  .pair{ grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; }
}
.pair figure{ margin: 0; overflow: hidden; }
.pair img{ width: 100%; display: block; object-fit: cover; }
.pair__a img{ aspect-ratio: 3 / 2; }
.pair__b img{ aspect-ratio: 4 / 5; }

/* growth, shown as well as stated */
.growth{ display: grid; gap: 7px; }
.growth b{ font-weight: 400; color: var(--ink); }
.growth__track{
  display: block;
  height: 6px;
  background: rgba(23,21,18,.1);
  border-radius: 3px;
  overflow: hidden;
}
.growth__bar{
  display: block;
  height: 100%;
  background: var(--burgundy);
  border-radius: 3px;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq__head{
  font-size: clamp(2rem, 1.2rem + 3.3vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 17ch;
}
.faq__standfirst{
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: 48ch;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--ink-soft);
}

/* index left of the rule, questions to the right of it */
.faq{ display: grid; gap: clamp(34px, 4vw, 56px); }
@media (min-width: 1024px){
  .faq{
    grid-template-columns: calc(var(--spine) - var(--half-gap)) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-items: start;
  }
  .faq__index{ position: sticky; top: 118px; }
}

.faq__index ol{ list-style: none; margin: 0; padding: 0; display: grid; }
.faq__index li + li{ border-top: 1px solid var(--line); }
.faq__index a{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  text-decoration: none;
  font-size: .9375rem;
  color: var(--ink-faint);
  transition: color .35s var(--ease-out);
}
.faq__index a b{ font-weight: 400; font-size: .75rem; font-variant-numeric: tabular-nums; }
.faq__index a:hover{ color: var(--ink); }
.faq__index a[aria-current="true"]{ color: var(--burgundy); }
@media (max-width: 1023px){
  .faq__index{ display: none; }
}

.faq__group + .faq__group{ margin-top: clamp(48px, 6vw, 84px); }
.faq__gname{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  line-height: 1.2;
  padding-bottom: .7em;
}
.faq__gtext{ display: block; }
.faq__gzh{
  font-family: 'Noto Serif SC', serif;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* one question */
.qa{
  border-top: 1px solid var(--line);
  transition: border-color .4s var(--ease-out);
}
.qa:last-child{ border-bottom: 1px solid var(--line); }
.qa.is-open{ border-top-color: var(--burgundy); }

.qa__h{ margin: 0; font-weight: 400; }
.qa__q{
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(19px, 2.3vw, 27px) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.0625rem, .98rem + .62vw, 1.45rem);
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--ink);
  transition: color .35s var(--ease-out);
}
@media (hover: hover){ .qa__q:hover{ color: var(--burgundy); } }
.qa.is-open .qa__q{ color: var(--burgundy); }
.qa__q:focus-visible{ outline: 1px solid var(--burgundy); outline-offset: 4px; }
.qa__text{ max-width: 34ch; }

/* a plus that becomes a minus */
.qa__mark{
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  align-self: center;
  transform: translateY(-1px);
}
.qa__mark i{
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
}
.qa__mark i:last-child{
  transform: rotate(90deg);
  transition: transform .4s var(--ease-io), opacity .3s;
}
.qa.is-open .qa__mark i:last-child{ transform: rotate(0deg); opacity: 0; }

.qa__a{ overflow: hidden; }
/* Answers ship visible so the page is complete without scripting; only once the
   script is present do the closed ones collapse. */
.js .qa:not(.is-open) .qa__a{ display: none; }
.qa__inner{
  display: grid;
  gap: 1.1em;
  padding-bottom: clamp(22px, 2.6vw, 32px);
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* closing ask */
.ask{ display: grid; gap: clamp(30px, 4vw, 64px); align-items: center; }
@media (min-width: 900px){
  .ask{ grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
}
.ask__fig{ margin: 0; overflow: hidden; }
.ask__fig img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ask__body{ max-width: var(--measure); color: var(--ink-soft); }
.ask__head{
  font-size: clamp(1.7rem, 1.2rem + 2.1vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  max-width: 16ch;
  margin-bottom: .7em;
}
.ask__mail{ margin-top: 1.4rem; font-size: .9375rem; }

@media (prefers-reduced-motion: reduce){
  .qa__mark i:last-child{ transition: none; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */

.legal__head{
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.legal__meta{
  margin-top: clamp(16px, 2vw, 24px);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
}

/* an unreviewed draft should look like one */
.draft{
  margin-top: clamp(22px, 2.6vw, 32px);
  max-width: var(--measure);
  border-left: 2px solid var(--burgundy);
  padding: 14px 0 14px 18px;
}
.draft p{
  font-size: .875rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.tbc{
  font-weight: 400;
  color: var(--burgundy);
  white-space: nowrap;
}

.legal__body{
  margin-top: clamp(34px, 4vw, 54px);
  max-width: var(--measure);
}
.legal__body h2{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.2rem, 1.02rem + .7vw, 1.55rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-top: clamp(34px, 3.6vw, 48px);
  padding-bottom: .55em;
  border-bottom: 1px solid var(--line);
}
.legal__body h2:first-child{ margin-top: 0; }
.legal__body p{
  margin-top: 1.1em;
  line-height: 1.72;
  color: var(--ink-soft);
}
.legal__body b{ font-weight: 400; color: var(--ink); }
.legal__body code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  color: var(--ink);
}
.legal__body a{ color: var(--ink); }

.legal__foot{
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ============================================================
   ABOUT PAGE — questions + closing CTA
   ============================================================ */

.qhead{
  font-size: clamp(1.8rem, 1.25rem + 2.4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.homefaq{ margin-top: clamp(32px, 4vw, 52px); }
.homefaq .qa:last-of-type{ border-bottom: 1px solid var(--line); }
.homefaq__more{
  margin-top: clamp(24px, 2.8vw, 34px);
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* the one centred block on the site: a closing call, deliberately set apart */
.cta{ text-align: center; }
.cta__inner{
  max-width: 54ch;
  margin-inline: auto;
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  justify-items: center;
}
.cta__head{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(1.95rem, 1.3rem + 2.7vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  max-width: 19ch;
}
.cta__sub{
  font-size: clamp(1rem, .96rem + .32vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}
.cta__act{ margin-top: clamp(10px, 1.4vw, 18px); }

@media (max-width: 639px){
  .cta__act{ justify-self: stretch; }
  .cta__btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 14px 22px;
  }
}