/* ============================================================
   ForsocialDr Limited — shared styles for every language
   Design tokens. Change these first few lines to re-skin the site.
   ============================================================ */
:root{
  --paper:      #EDEFF2;   /* cool pale ground — deliberately not a warm cream */
  --paper-deep: #E1E5EA;
  --navy:       #0B1B3A;   /* ink, and the full-bleed band background */
  --navy-soft:  #93A0BC;
  --brand:      #1B36C4;   /* the one bold colour */
  --signal:     #FF3B1F;   /* used only for the live dot and one rule */

  --ink:      var(--navy);
  --ink-mute: #545F7A;
  --rule:     rgba(11,27,58,.14);
  --rule-dark:rgba(237,239,242,.16);

  --margin-col: 10rem;

  /* Measured in em, not ch. `ch` resolves against the Latin face even for
     Chinese text, so a ch-based measure would collapse on the CJK page.
     34em is roughly 60 Latin characters or 34 Chinese ones. */
  --measure: 34em;

  /* The CJK family sits at the end of each stack on purpose: fallback is
     per-glyph, so Latin text keeps the Latin face while any Chinese
     character falls through to Chiron automatically — no per-element rules. */
  --font-display: "Archivo", "Chiron Hei HK", "PingFang TC",
                  "Hiragino Sans TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --font-body: "Inter Tight", "Chiron Hei HK", "PingFang TC",
               "Hiragino Sans TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

/* ============================================================
   Traditional Chinese (zh-Hant) adjustments.
   Two things do not survive the crossing from Latin to CJK:
   1. the display face is set with expanded width and negative tracking,
      neither of which suits Chinese — it reads cramped;
   2. CJK glyphs fill their em box, so they look noticeably larger and
      heavier at the same font-size, and need looser leading.
   Only the Chinese page loads Chiron Hei HK, so these rules cost the
   English page nothing.
   ============================================================ */
html[lang^="zh"]{ --measure:32em }

html[lang^="zh"] body{
  line-height:1.8;
  /* keeps CJK punctuation off the start of a line (no 「——」 dangling there) */
  line-break:strict;
}

html[lang^="zh"] .display{
  font-size:clamp(1.85rem,5.2vw,4.15rem);
  font-weight:700;
  font-stretch:100%;
  letter-spacing:0;
  line-height:1.22;
}
html[lang^="zh"] h2{
  font-size:clamp(1.35rem,2.7vw,2rem);
  font-weight:700; font-stretch:100%; letter-spacing:0; line-height:1.42;
  /* `ch` resolves against the Latin face even for Chinese text, so the
     default 24ch would wrap a heading after ~14 characters */
  max-width:22em;
}
html[lang^="zh"] h3{ font-stretch:100%; letter-spacing:0; line-height:1.45 }
html[lang^="zh"] .lede{ line-height:1.75 }
html[lang^="zh"] .label{ letter-spacing:0 }
html[lang^="zh"] .wordmark,
html[lang^="zh"] .contact-line,
html[lang^="zh"] .city__time{ font-stretch:100% }

/* Placeholders are marked with italic on the Latin page. Chinese has no
   italic form, so the browser would fake-slant it — which looks broken at
   any size. Use a lighter weight plus the brackets instead. */
html[lang^="zh"] .is-placeholder{ font-style:normal; opacity:.7 }

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--brand); color:#fff }

a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em }
a:hover{ color:var(--brand) }

:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:1px }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--brand); color:#fff; padding:.7rem 1.1rem; font-size:.85rem;
}
.skip:focus{ left:.75rem; top:.75rem }

/* ---------- layout primitives ---------- */
.wrap{ width:min(100% - 2.5rem, 1240px); margin-inline:auto }

.row{
  display:grid;
  grid-template-columns:var(--margin-col) minmax(0,1fr);
  column-gap:clamp(1.5rem,3.5vw,3rem);
  row-gap:1rem;
  align-items:start;
}

.section{ padding-block:clamp(3.5rem,8vh,7rem) }

/* the marginal column: a book-style note in the left margin, not an ALL-CAPS eyebrow */
.label{
  margin:0;
  font-size:.8rem;
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--ink-mute);
  padding-top:.45rem;
}
.label__sub{ display:block; color:var(--ink-mute); opacity:.75; margin-top:.15rem }

/* thin rule between margin and body — the editorial device that carries the layout */
.body{
  border-left:1px solid var(--rule);
  padding-left:clamp(1.5rem,3.5vw,3rem);
  min-width:0;
}

/* ---------- type ---------- */
.display{
  font-family:var(--font-display);
  font-stretch:112%;
  font-weight:800;
  font-size:clamp(2.2rem,6vw,5rem);
  line-height:.94;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}
.display span{ display:block }

h2{
  font-family:var(--font-display);
  font-stretch:106%;
  font-weight:700;
  font-size:clamp(1.5rem,3.1vw,2.35rem);
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0 0 1rem;
  max-width:24ch;
  text-wrap:balance;
}
h3{
  font-family:var(--font-display);
  font-stretch:104%;
  font-weight:600;
  font-size:1.2rem;
  line-height:1.2;
  letter-spacing:-.012em;
  margin:0 0 .5rem;
}
p{ margin:0 0 1rem; max-width:var(--measure); text-wrap:pretty }
p:last-child{ margin-bottom:0 }

.lede{
  font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.5;
  color:var(--ink-mute); margin-top:1.6rem;
}

.note{ font-size:.9rem; line-height:1.55; color:var(--ink-mute); max-width:var(--measure) }

/* ---------- header ---------- */
.masthead{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding-block:.9rem; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--font-display);
  font-stretch:104%;
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:-.03em;
  text-decoration:none;
  display:flex; align-items:baseline; gap:.45rem;
}
.wordmark em{
  font-style:normal; font-weight:400; font-size:.72rem;
  letter-spacing:.02em; color:var(--ink-mute);
}
.nav{ display:flex; gap:clamp(1rem,2.4vw,2rem); align-items:center }
.nav a{ font-size:.88rem; text-decoration:none; color:var(--ink-mute); transition:color .15s }
.nav a:hover{ color:var(--brand) }
.nav a.is-cta{ color:var(--ink); font-weight:500 }

/* language switch: a rule separates it from the section links so it reads
   as a control rather than as another destination */
.lang{
  padding-left:clamp(.9rem,2.2vw,1.7rem);
  border-left:1px solid var(--rule);
  color:var(--ink);
}
.lang:hover{ color:var(--brand) }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(3rem,9vh,7.5rem) clamp(2.5rem,6vh,5rem) }
.hero__foot{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; align-items:baseline;
  margin-top:clamp(2rem,5vh,3.5rem); padding-top:1.4rem; border-top:1px solid var(--rule);
}
.cta{
  display:inline-block; font-size:.95rem; font-weight:500;
  padding:.7rem 1.4rem; background:var(--brand); color:#fff; text-decoration:none;
  border-radius:2px; transition:background .15s;
}
.cta:hover{ background:#152CA6; color:#fff }
.hero__meta{ font-size:.85rem; color:var(--ink-mute) }

/* a closing action row for a section that ends on a call to action */
.action{ margin-top:1.9rem; padding-top:1.4rem; border-top:1px solid var(--rule) }

/* ---------- the pipeline: a real sequence, so numbering is information ---------- */
.pipeline{ list-style:none; margin:0; padding:0; counter-reset:step }
.pipeline > li{
  counter-increment:step;
  display:grid;
  grid-template-columns:3.5rem minmax(0,1fr);
  column-gap:1rem;
  padding-block:1.9rem;
  border-top:1px solid var(--rule);
}
.pipeline > li:last-child{ border-bottom:1px solid var(--rule) }
.pipeline > li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);
  font-weight:600; font-size:.78rem; letter-spacing:.06em;
  color:var(--brand); padding-top:.3rem;
}
.pipeline p{ margin:0 }

/* ---------- product ledger ---------- */
.ledger{ list-style:none; margin:0; padding:0 }
.ledger > li{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1.7fr);
  column-gap:clamp(1rem,2.5vw,2.25rem);
  row-gap:.35rem;
  padding-block:1.5rem;
  border-top:1px solid var(--rule);
}
.ledger > li:last-child{ border-bottom:1px solid var(--rule) }
.ledger__name{
  font-family:var(--font-display); font-weight:600;
  font-size:1.05rem; letter-spacing:-.012em; line-height:1.25;
}
.ledger__kind{ font-size:.82rem; color:var(--ink-mute); letter-spacing:.01em; padding-top:.22rem }
.ledger__desc{ font-size:.95rem; color:var(--ink-mute); margin:0; max-width:48ch }

/* ---------- the dark band: live times around the world ---------- */
.band{
  background:var(--navy);
  color:var(--paper);
  padding-block:clamp(3rem,7vh,6rem);
  margin-block:clamp(3rem,8vh,7rem);
}
.band .label{ color:var(--navy-soft) }
.band .body{ border-left-color:var(--rule-dark) }
.band h2{ color:var(--paper); max-width:30ch }
.band p{ color:var(--navy-soft) }
.band a:hover{ color:#fff }

.live{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.8rem; letter-spacing:.02em; color:var(--navy-soft); margin-bottom:1.1rem;
}
.live__dot{
  width:7px; height:7px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 rgba(255,59,31,.55);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(255,59,31,.5) }
  70%  { box-shadow:0 0 0 9px rgba(255,59,31,0) }
  100% { box-shadow:0 0 0 0 rgba(255,59,31,0) }
}

/* 4 columns × 2 rows so the grid never leaves a ragged empty cell */
.cities{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--rule-dark);
  border-left:1px solid var(--rule-dark);
  margin-top:2.25rem;
}
.city{
  padding:1.1rem 1.1rem 1.25rem;
  border-right:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);
}
.city__name{
  font-size:.78rem; letter-spacing:.02em; color:var(--navy-soft);
  margin:0 0 .55rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.city__time{
  font-family:var(--font-display); font-weight:600;
  font-size:1.45rem; line-height:1; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; margin:0; color:var(--paper);
}
.city__delta{
  font-size:.72rem; color:var(--navy-soft); margin:.4rem 0 0;
  font-variant-numeric:tabular-nums;
}
.band__foot{ font-size:.82rem; color:var(--navy-soft); margin-top:1.5rem; max-width:56ch }

.contact-line{
  font-family:var(--font-display); font-stretch:106%; font-weight:700;
  font-size:clamp(1.25rem,3vw,2rem); letter-spacing:-.025em;
  margin:0 0 1rem; word-break:break-word;
}
.contact-line a{ text-decoration:none; border-bottom:2px solid var(--brand) }
.contact-line a:hover{ color:var(--brand) }

/* ---------- footer ---------- */
.foot{ border-top:1px solid var(--rule); padding-block:2.5rem 3.5rem }
.foot__inner{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:space-between;
  align-items:flex-start;
}
.foot__label{
  font-size:.78rem; color:var(--ink-mute); margin:0 0 .3rem; letter-spacing:.02em;
}
.foot__addr{
  font-style:normal; font-size:.86rem; color:var(--ink);
  line-height:1.6; max-width:60ch;
}
.foot__addr.is-placeholder{ font-style:italic; color:var(--ink-mute) }
.foot__legal{ font-size:.82rem; color:var(--ink-mute); margin:0; max-width:40ch }

/* ---------- one orchestrated entrance, no per-section fade-ups ---------- */
.reveal{ animation:enter .7s cubic-bezier(.2,.7,.2,1) both }
.reveal--d1{ animation-delay:.09s }
.reveal--d2{ animation-delay:.18s }
@keyframes enter{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
}

/* ---------- small screens: the margin note folds above its section ---------- */
@media (max-width:820px){
  .row{ grid-template-columns:minmax(0,1fr); row-gap:.85rem }
  .body{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1.25rem }
  .label{ padding-top:0 }
  .ledger > li{ grid-template-columns:minmax(0,1fr) }
  .ledger__kind{ padding-top:0; margin-bottom:.35rem }
  .pipeline > li{ grid-template-columns:2.6rem minmax(0,1fr) }
  .cities{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:520px){
  .masthead__inner{ padding-block:.75rem }
  .nav{ gap:1rem }
  .nav a{ font-size:.82rem }
  .cities{ grid-template-columns:minmax(0,1fr) }
  /* drop the expanded width and shrink so each headline line stays on one line */
  .display{ font-size:clamp(1.7rem,7.8vw,2.4rem); font-stretch:100% }
}