/* tech.css — Tech + Venture page */

/* ══════════════════════════════════════════════
   PAGE BASE
══════════════════════════════════════════════ */
.tech-page {
  background: var(--cream);
}

.page-tech {
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════
   NAV  (mirrors all-work.css)
══════════════════════════════════════════════ */
.aw-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  padding: 40px var(--gutter) 0;
  max-height: 120px;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition:
    transform 320ms var(--ease-slow),
    opacity 220ms ease;
}

.aw-nav.is-collapsed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.aw-nav__logo,
.aw-nav__menu,
.aw-nav__links {
  pointer-events: auto;
}

.aw-nav__logo {
  flex-shrink: 0;
  line-height: 0;
}

.aw-nav__logo img {
  display: block;
  height: 17px;
  width: auto;
  opacity: 0.95;
  transition: opacity 0.25s;
}

.aw-nav__logo:hover img { opacity: 0.7; }

.aw-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.8vw, 48px);
  margin-left: auto;
}

.aw-nav__link {
  font-family: var(--font-fustat);
  font-size: var(--fs-nav);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
  white-space: nowrap;
  transition: opacity 0.2s;
}

.aw-nav__link--active {
  color: var(--red-hot);
}

.aw-nav__link:hover { opacity: 0.65; }

.aw-nav__menu {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: clamp(16px, 2vw, 32px);
  mix-blend-mode: exclusion;
}

.aw-nav__menu img {
  display: block;
  filter: invert(1);
  opacity: 0.7;
}

@media (max-width: 1023px) {
  .aw-nav { padding-top: 24px; }
  .aw-nav__links { display: none; }
  .aw-nav__menu { margin-left: auto; }
}

/* ══════════════════════════════════════════════
   LET'S TALK  (mirrors all-work.css)
══════════════════════════════════════════════ */
.aw-talk {
  position: fixed;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  display: block;
  width: clamp(88px, 8.75vw, 126px);
  height: clamp(88px, 8.75vw, 126px);
  z-index: calc(var(--z-nav) + 2);
  transition: transform 0.3s var(--ease-slow);
}

.aw-talk:hover { transform: scale(1.07) rotate(15deg); }

.aw-talk img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ══════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════ */
.th-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--cream);
  /* height set by JS via --tech-scale */
  height: calc(1401px * var(--tech-scale, 1));
}

.th-hero__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 1401px;
  transform-origin: top left;
  transform: scale(var(--tech-scale, 1));
}

/* ── Hero static text ── */
.th-text {
  position: absolute;
  font-family: var(--font-fustat);
  font-weight: 200;
  font-size: 170px;
  line-height: 141px;
  letter-spacing: -8.5px;
  color: var(--red-hot);
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.th-stories { left: 55px; top: 188px; }
.th-andthe  { left: 61px; top: 635px; }

/* ── Keyword rows (absolute flex, stage clips overflow) ── */
.th-kw-row {
  position: absolute;
  display: flex;
  align-items: baseline;
}

.th-row-fi { left: 55px;  top: 327px; }
.th-row-b  { left: 71px;  top: 463px; }

.th-kw-group {
  display: inline-flex;
  align-items: baseline;
  cursor: default;
  user-select: none;
}

/* ── Keyword text ── */
.th-kw {
  font-family: var(--font-fustat);
  font-weight: 200;
  font-size: 170px;
  line-height: 141px;
  letter-spacing: -8.5px;
  color: var(--red-hot);
  white-space: nowrap;
  flex-shrink: 0;
}

.th-investors-kw {
  font-family: 'Handjet', sans-serif;
  font-weight: 200;
  font-variation-settings: 'ELGR' 1, 'ELSH' 2;
  color: var(--red-hot);
  transition: opacity 0.4s ease;
}

.th-builders-kw {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 300;
}

/* Investors keyword — subtle fade on hover */
.th-kw-group[data-key="investors"].is-active .th-investors-kw {
  opacity: 0.55;
}

/* ── Sep + (always visible between Founders and Investors, rotates × on hover) ── */
.th-sep {
  display: inline-block;
  font-family: var(--font-fustat);
  font-weight: 200;
  font-size: 170px;
  line-height: 141px;
  letter-spacing: -8.5px;
  color: var(--red-hot);
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.th-kw-group[data-key="founders"].is-active .th-sep {
  transform: rotate(45deg);
}

/* Builders + (solid, visible default, rotates × on hover) */
.th-builders-plus {
  font-family: var(--font-fustat);
  font-weight: 200;
  font-size: 170px;
  line-height: 141px;
  letter-spacing: -8.5px;
  color: var(--red-hot);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.th-kw-group[data-key="builders"].is-active .th-builders-plus {
  transform: rotate(45deg);
}

/* ── Founders desc (single block) ── */
.th-founder-desc {
  width: 0;
  overflow: hidden;
  opacity: 0;
  flex-shrink: 0;
  align-self: center;
  transition:
    width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease 0.15s;
}

.th-kw-group[data-key="founders"].is-active .th-founder-desc {
  width: 260px;
  opacity: 1;
}

/* ── Builders two-column desc ── */
.th-builder-descs {
  display: flex;
  gap: 32px;
  width: 0;
  overflow: hidden;
  opacity: 0;
  flex-shrink: 0;
  align-self: center;
  transition:
    width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease 0.15s;
}

.th-kw-group[data-key="builders"].is-active .th-builder-descs {
  width: 412px;
  opacity: 1;
}

.th-builder-desc { width: 190px; flex-shrink: 0; }

/* ── Desc typography ── */
.th-desc-title {
  display: block;
  font-family: var(--font-fustat);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--red-hot);
  margin: 0 0 8px;
}

.th-desc-body {
  font-family: var(--font-fustat);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.15px;
  color: var(--red-hot);
  margin: 0;
}

/* BETA title line spans inherit the title's uniform line-height so every
   per-line highlight block is the same height and none overflows into the line
   above (a sub-1 line-height made glyphs spill past their box and get covered). */
.th-lh-std,
.th-lh-tight { line-height: inherit; }

/* ── Future group ── */
.th-future-group {
  position: absolute;
  left: 624px;          /* original (Future) x position */
  top: 617px;
  width: 816px;         /* 1440 - 624 = fills to stage right */
  cursor: default;
  user-select: none;
}

/* Compact: normal flow, fades out on hover */
.th-future-compact {
  display: flex;
  align-items: baseline;
  line-height: 141px;
  margin: 0;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: auto;
}

.th-future-group.is-active .th-future-compact {
  opacity: 0;
  pointer-events: none;
}

/* Expanded: absolute, flex-column, fades in on hover */
.th-future-expanded {
  position: absolute;
  top: 0;
  left: 0;
  width: 816px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease 0.05s;
}

.th-future-group.is-active {
  z-index: 5;
}

.th-future-group.is-active .th-future-expanded {
  opacity: 1;
  pointer-events: auto;
}

/* Top row: ( [content] ) */
.th-future-top {
  display: flex;
  align-items: flex-start;
}

.th-paren-l, .th-paren-r {
  font-family: var(--font-fustat);
  font-weight: 200;
  font-size: 170px;
  line-height: 141px;
  letter-spacing: -8.5px;
  color: var(--red-hot);
  flex-shrink: 0;
}

.th-paren-r { margin-left: auto; }

/* Columns + cross-cultural between the parens */
.th-future-cols-wrap {
  flex: 1;
  padding: 0 24px;
}

.th-future-cols {
  display: flex;
  gap: 48px;
  margin-bottom: 28px;
}

.th-future-item { flex: 1; }

.th-future-cols-wrap .th-desc-title {
  font-size: 28px;
  letter-spacing: -0.7px;
  margin-bottom: 10px;
}

.th-future-cols-wrap .th-desc-body {
  font-size: 14px;
  line-height: 1.55;
}

/* Future pixel text: row 3. Indented by the left paren's advance (41.7px @1440)
   so it stays directly below the compact "(Future)" word and reads as the same
   word dropping straight down — not jumping left to sit under the "(". */
.th-future-big {
  display: block;
  font-family: 'Micro 5', monospace;
  font-weight: 400;
  font-size: 240px;
  line-height: 141px;
  letter-spacing: -12px;
  color: var(--red-hot);
  margin-top: 72px;
  margin-left: 41.7px;
  white-space: nowrap;
}

.th-paren {
  font-family: var(--font-fustat);
  font-weight: 200;
  font-size: 170px;
  line-height: 141px;
  letter-spacing: -8.5px;
  color: var(--red-hot);
}

.th-future {
  font-family: 'Micro 5', monospace;
  font-weight: 400;
  font-size: 240px;
  line-height: 141px;
  letter-spacing: -12px;
  color: var(--red-hot);
}

/* ── Selected Collaboration link ── */
.th-collab {
  position: absolute;
  right: 40px;
  top: 1046px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: var(--red-hot);
  transition: opacity 0.25s;
}

.th-collab:hover { opacity: 0.65; }

.th-collab__arrow {
  font-size: 33px;
  line-height: 1;
  font-family: var(--font-fustat);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-slow);
}

.th-collab:hover .th-collab__arrow { transform: translate(3px, -3px); }

.th-collab__text {
  font-family: var(--font-fustat);
  font-weight: 400;
  font-size: 33px;
  line-height: 33px;
  letter-spacing: -1.65px;
  text-transform: capitalize;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   RED SECTION
══════════════════════════════════════════════ */
.th-red {
  background: var(--red);
  position: relative;
}

/* ══════════════════════════════════════════════
   PROJECT CARDS
══════════════════════════════════════════════ */
.th-projects {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.th-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.th-card:first-child { border-top: none; }

/* ── Photo ── */
.th-card__media {
  flex: 0 0 57%;
  position: relative;
  overflow: hidden;
}

/* Aspect ratios from Figma source images */
[data-project="beta"]   .th-card__media { aspect-ratio: 1440 / 1080; }
[data-project="ai"]     .th-card__media { aspect-ratio: 1620 / 1080; }
[data-project="q3d"]    .th-card__media { aspect-ratio: 3008 / 1696; }
[data-project="dreame"] .th-card__media { aspect-ratio: 4096 / 2734; }

.th-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BW image hidden — color image carries grayscale filter for BW→color transition */
.th-card__img--bw    { display: none; }
.th-card__img--color {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.th-card:hover .th-card__img--color { filter: grayscale(0%); }

/* ── Text ── */
.th-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12% 9% 10% 8%;
  text-align: right;
}

/* BETA: red info panel — same dark-red base as the section (#c21f1f).
   Default: red-hot text on red = hidden (like the other cards).
   Hover: red-hot staircase block wipes in from the right → cream text on
   bright red = visible, stepped left edge reveals the dark-red base behind. */
.th-card[data-project="beta"] .th-card__info {
  background: var(--red);
}

.th-card__title {
  font-family: var(--font-fustat);
  font-weight: 500;
  font-size: clamp(22px, 4.51vw, 65px);
  line-height: 1.18;
  letter-spacing: clamp(-1.1px, -0.226vw, -3.25px);
  color: var(--red-hot);
  text-transform: capitalize;
  margin: 0 0 auto;
  transition: color 600ms var(--ease-slow);
}

/* Per-line highlight span (方案 A) — box-decoration-break: clone gives EVERY
   line its own background fragment that hugs that line's text. The irregular
   "staircase" emerges from the text itself: right-aligned lines share a flush
   right edge and step on the left — no hand-tuned coordinates, fully responsive.
   Color: var(--red-hot) = #ff281b painted over section bg #c21f1f.
   NO vertical padding — block height is driven by line-height alone so each
   line-block stays inside its own line box and can't cover the line above.
   Breathing room above/below the glyphs comes from the title's line-height. */
/* Each line is its OWN highlight block (inline-block) so it can be nudged,
   rotated and padded independently — the tidy right-aligned staircase becomes
   a hand-placed, collaged set of red blocks. Blocks read on hover (cream text
   over red); the slight per-line offsets give the section its design edge. */
.th-card__title-hl {
  display: inline-block;
  padding: 0 0.32em;
  background-color: transparent;
  transform-origin: 100% 50%;
  transition: background-color 600ms var(--ease-slow);
  will-change: transform;
}

/* Per-line irregularity (nth-of-type skips the <br> separators). Offsets are
   small so text stays readable but the blocks no longer line up. */
.th-card__title-hl:nth-of-type(1) {
  transform: translateX(-5%) rotate(-1.8deg);
  padding-right: 0.5em;
}
.th-card__title-hl:nth-of-type(2) {
  transform: translateX(4%) rotate(1.4deg);
  padding-left: 0.55em;
  padding-right: 0.18em;
  margin-top: -0.04em;
}
.th-card__title-hl:nth-of-type(3) {
  transform: translateX(-2.5%) rotate(-1deg);
  padding-right: 0.62em;
}
.th-card__title-hl:nth-of-type(4) {
  transform: translateX(6%) rotate(1.9deg);
  padding-left: 0.5em;
  margin-top: -0.05em;
}

.th-card__desc {
  font-family: var(--font-fustat);
  font-weight: 600;
  font-size: clamp(10px, 0.833vw, 12px);
  line-height: 17px;
  letter-spacing: -0.6px;
  color: var(--red-hot);
  margin: 0;
  margin-left: auto;
  max-width: 370px;
  padding: 8px 12px;
  text-align: left;
  transition: color 600ms var(--ease-slow);
}

/* ── Card hover (方案 A) / Slow / 600ms
   Title: per-line red blocks fade in BEHIND the text — the background lives on
          the span and is cloned per line, so the stepped staircase is the text.
   Desc:  solid red block wipes in from the left.
──────────────────────────────────────────────────────────────── */

/* Text color: all cards */
.th-card:hover .th-card__title { color: var(--cream); }
.th-card:hover .th-card__desc  { color: var(--cream); }

/* Title highlight: transparent by default → bright red on hover (per line). */
.th-card:hover .th-card__title-hl { background-color: var(--red-hot); }

/* Desc: position + isolate */
.th-card[data-project] .th-card__desc {
  position: relative;
  isolation: isolate;
}

/* Desc red block — starts at 0 width, expands rightward; 100ms delay after title */
.th-card[data-project] .th-card__desc::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--red-hot);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms var(--ease-slow) 0.1s;
  z-index: -1;
}

.th-card[data-project]:hover .th-card__desc::before {
  transform: scaleX(1);
}

/* No per-card clip-path overrides needed — every card's staircase is generated
   by its own text via box-decoration-break on .th-card__title-hl (方案 A). The
   shape can never drift from the text because it IS the text's background.
   Per-card tweaks (e.g. bleed red all the way to the panel's right edge) can be
   layered on later by adjusting the span's right padding / the info padding. */

/* ══════════════════════════════════════════════
   WHY CHOOSE US
══════════════════════════════════════════════ */
.th-why {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: clamp(48px, 5.6vw, 80px);
  padding-bottom: clamp(80px, 8.3vw, 120px);
}

.th-why__words {
  position: relative;
}

.th-why__word {
  position: relative;
  display: block;
  line-height: 0;
}

/* Proportions from Figma: Why@5%+24.2w, Choose@5%+49w, Us@46.4%+15.9w.
   --slide = how far the trailing letters travel right on hover, opening the
   gap the bar fills (Why "W" stays / "hy" slides, Choose "Ch" / "oose",
   Us "U" / "s"). */
.th-why__word--why    { width: 24.2%; margin-left: 5%;    margin-bottom: -1%; --slide: 148%; }
.th-why__word--choose { width: 49%;   margin-left: 5%;    margin-bottom: -1%; --slide: 40%; --slide-se: 40%; }
.th-why__word--us     { width: 15.9%; margin-left: 46.4%; margin-top: 7.4%; --slide: 117%; }

/* Each word is split into a fixed leading part and a sliding trailing part —
   two transparent PNGs the full size of the word, so they overlay perfectly.
   Both are dimmed to a low-key dark red and light up on hover. */
.th-why__stay,
.th-why__slide {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0.6);
  transition: filter 420ms var(--ease-slow);
}

.th-why__stay { position: relative; }  /* in flow → sets the word height */

.th-why__slide {
  position: absolute;
  top: 0;
  left: 0;
  transition:
    filter 420ms var(--ease-slow),
    transform 600ms var(--ease-slow);
  will-change: transform;
}

.th-why__word:hover .th-why__stay,
.th-why__word:hover .th-why__slide { filter: brightness(1); }

.th-why__word:hover .th-why__slide { transform: translateX(var(--slide)); }

/* Choose splits its trailing letters: "oo" slides a little, "se" slides
   further, opening a second gap between them for the hollow box. */
.th-why__word:hover .th-why__slide--se { transform: translateX(var(--slide-se)); }

/* ── Hover bar: a bright-red block wipes through the word's negative space,
   the body copy sitting on it in the section's own red (#c21f1f) so it reads
   as text cut out of the bar (Figma "Why Choose Us" Variant2). The bar and the
   lit letters share #ff281b, so they merge into one solid red shape. ── */
.th-why__card {
  position: absolute;
  left:       var(--card-l, 31%);
  top:        var(--card-t, 0%);
  width:      var(--card-w, 155%);
  min-height: var(--card-h, 64%);
  box-sizing: border-box;
  background: var(--red-hot);
  padding: clamp(8px, 0.7vw, 12px) clamp(12px, 1vw, 18px);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 600ms var(--ease-slow);
  will-change: clip-path;
  z-index: 1;
}

.th-why__card p {
  margin: 0;
  font-family: var(--font-fustat);
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 23px);  /* Figma 23px @1440 */
  line-height: 1.04;                    /* Figma 24/23 */
  letter-spacing: -0.05em;              /* Figma -1.15px @23px */
  color: var(--red);
}

/* Box geometry straight from Figma Variant2 (% of each word box):
   Why  → top band, bleeds far right | Choose → mid band | Us → top band, bleeds right. */
.th-why__card--why    { --card-l: 31%; --card-t: 0%;  --card-w: 155%; --card-h: 64%; }
.th-why__card--choose { --card-l: 31%; --card-t: 45%; --card-w: 40%;  --card-h: 55%; }
.th-why__card--us     { --card-l: 42%; --card-t: 0%;  --card-w: 124%; --card-h: 85%; }

.th-why__word:hover .th-why__card { clip-path: inset(0 0 0 0); }

/* ── Hollow second box (Choose "We operate…"): no solid bar — just bright-red
   text framed by three small bright-red corner squares, in the gap between
   "oo" and "se". Fades in on hover. (Figma 1199:577 Variant2.) ── */
.th-why__card2 {
  position: absolute;
  width: max-content;
  max-width: clamp(150px, 13.5vw, 196px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms var(--ease-slow) 200ms;
  z-index: 1;
}

.th-why__card2 p {
  margin: 0;
  font-family: var(--font-fustat);
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 23px);  /* Figma 23px @1440 */
  line-height: 1.04;
  letter-spacing: -0.05em;
  color: var(--red-hot);
}

.th-why__mark {
  position: absolute;
  width: clamp(9px, 0.83vw, 15px);
  aspect-ratio: 1;
  background: var(--red-hot);
}
.th-why__mark--tl { top: -20px;    left: -20px; }
.th-why__mark--tr { top: -20px;    right: -20px; }
.th-why__mark--bl { bottom: -20px; left: -20px; }

.th-why__card2--choose { top: 0%;   left: 80%; }
/* Us annotation ("Our network…") — sits in the open space to the right of "Us".
   Placement is an adaptation of Figma's isolated-frame layout; tune visually. */
.th-why__card2--us     { top: -63%; left: 178%; max-width: clamp(220px, 19.2vw, 276px); }

.th-why__word:hover .th-why__card2 { opacity: 1; }

/* Touch / no-hover: no hover to drive the reveal. Light every word back to
   bright (matching the section's original look) and hide the side cards —
   the cramped giant-text layout has no room for them here. A dedicated mobile
   card layout is a separate pass. */
@media (hover: none), (pointer: coarse) {
  .th-why__stay,
  .th-why__slide { filter: brightness(1); }
  /* Cards are hidden until their word is tapped (initWhyTouch in tech.js). */
  .th-why__card,
  .th-why__card2 { display: none; }

  /* Tapped word → drop its description(s) as a readable red card stacked right
     below the word, full-width and in flow (the desktop hover popups don't fit). */
  .th-why__word.is-active .th-why__card,
  .th-why__word.is-active .th-why__card2 {
    display: block;
    position: static;
    width: 100%;
    max-width: none;
    min-height: 0;
    clip-path: none;
    opacity: 1;
    pointer-events: auto;
    margin-top: 14px;
    padding: 16px 18px;
    /* Distinct cream box so it reads as a popup, not red-on-red blended text. */
    background: var(--cream);
    border-radius: 6px;
  }
  .th-why__word.is-active .th-why__card2 { margin-top: 10px; }
  .th-why__word.is-active .th-why__card p,
  .th-why__word.is-active .th-why__card2 p {
    font-size: 15px;
    line-height: 1.34;
    letter-spacing: -0.01em;
    color: var(--red);
  }
  .th-why__word.is-active .th-why__card2 .th-why__mark { display: none; }
}

/* ── Footer: back to top ── */
.th-why__footer {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding-top: clamp(48px, 5.6vw, 80px);
  margin-left: 46%;
}

.th-back-top {
  font-family: var(--font-fustat);
  font-weight: 600;
  font-size: clamp(20px, 3.125vw, 45px);
  letter-spacing: clamp(-1px, -0.156vw, -2.25px);
  line-height: 1;
  color: var(--red-hot);
  text-transform: capitalize;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.25s;
}

.th-back-top:hover { opacity: 0.65; }

.th-back-top__arrow {
  font-size: clamp(28px, 4.2vw, 60px);
  color: var(--red-hot);
  line-height: 1;
  transform: rotate(0deg);
  display: inline-block;
  transition: transform 0.3s var(--ease-slow);
}

.th-why__footer:hover .th-back-top__arrow {
  transform: rotate(-45deg);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .th-card__desc { max-width: none; }

  .th-why__word--why    { width: 38%; margin-left: 5%; }
  .th-why__word--choose { width: 76%; margin-left: 5%; }
  .th-why__word--us     { width: 54%; margin-left: 44%; }
  .th-why__footer       { margin-left: 44%; }
}

/* Mobile */
@media (max-width: 640px) {
  /* The scaled hero stage starts at y0, so its first line sits right under the
     fixed nav logo. Push the stage down (and grow the hero by the same amount
     so nothing clips at the bottom) to give the logo / headline breathing room. */
  .th-hero {
    height: calc(1401px * var(--tech-scale, 1) + 64px);
  }
  .th-hero__stage {
    top: 64px;
  }

  .th-card {
    flex-direction: column;
  }

  .th-card__media {
    flex: 0 0 auto;
    width: 100%;
  }

  [data-project="beta"]   .th-card__media { aspect-ratio: 4 / 3; }
  [data-project="ai"]     .th-card__media { aspect-ratio: 3 / 2; }
  [data-project="q3d"]    .th-card__media { aspect-ratio: 16 / 9; }
  [data-project="dreame"] .th-card__media { aspect-ratio: 3 / 2; }

  .th-card__info {
    padding: 8% 6% 10%;
    min-height: 0;
  }

  .th-card__title { font-size: clamp(28px, 8vw, 48px); margin-bottom: 6%; }
  .th-card__desc  { max-width: none; font-size: 12px; }

  .th-why__word--why    { width: 55%;  margin-left: 5%; }
  .th-why__word--choose { width: 92%;  margin-left: 5%; }
  .th-why__word--us     { width: 78%;  margin-left: 5%; }
  .th-why__footer       { margin-left: 20%; }
}

/* ──────────────────────────────────────────────
   TOUCH / NO-HOVER DEVICES
   No hover means the card reveal animation never fires, leaving titles
   (#ff281b) sitting on the red section (#c21f1f) — ~1.1:1 contrast, invisible.
   On coarse pointers we render the *revealed* end-state by default:
   colour photo, red block shown, cream text. Matches the desktop hover look.
────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  /* Photos already in colour */
  .th-card__img--color { filter: grayscale(0%); }

  /* Title + desc read as cream on the revealed red/cream block */
  .th-card[data-project] .th-card__title,
  .th-card[data-project] .th-card__desc { color: var(--cream); }

  /* Reveal the per-line title staircase (span background shown) */
  .th-card[data-project] .th-card__title-hl { background-color: var(--red-hot); }

  /* Reveal the desc block */
  .th-card[data-project] .th-card__desc::before { transform: scaleX(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .th-card__img--color,
  .th-card[data-project] .th-card__title,
  .th-card__title-hl,
  .th-card[data-project] .th-card__desc,
  .th-card[data-project] .th-card__desc::before,
  .th-back-top__arrow,
  .th-collab,
  .th-collab__arrow,
  .th-investors-kw,
  .aw-talk { transition: none !important; }
}