/* PAKLAB — Home-page specific */

/* ---------- HERO ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}
/* Ambient PAKLAB watermark on the right side - not a split, just decoration */
.hero::before {
  content: 'PAKLAB PAKLAB PAKLAB';
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: var(--font-display);
  font-size: clamp(200px, 22vw, 380px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
/* Red horizontal glow bar bottom-right */
.hero::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 55%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--red) 100%);
  opacity: 0.6;
  z-index: 1;
}
.hero-left {
  position: relative;
  z-index: 2;
  padding: 80px 64px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}
/* Decorative floating fragments on the right */
.hero-fx {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-fx-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-fx::before {
  content: '';
  position: absolute;
  top: 12%;
  right: 8%;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(179, 0, 0, 0.35);
  border-radius: 50%;
}
.hero-fx::after {
  content: '';
  position: absolute;
  bottom: 20%;
  right: 20%;
  width: 8px;
  height: 8px;
  background: var(--red);
  box-shadow:
    -120px -80px 0 0 rgba(255,255,255,0.2),
    -200px 40px 0 0 rgba(255,255,255,0.1),
    60px -160px 0 0 rgba(179,0,0,0.5);
}
.hero-fx-mark {
  position: absolute;
  top: 80px;
  right: 64px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.4);
  line-height: 1.8;
  text-align: right;
}
.hero-fx-mark strong { color: var(--red); font-weight: 500; }
.hero-fx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  padding-bottom: 48px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(100px, 13vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero-title .red { color: var(--red); }
.hero-title .strike {
  display: inline-block;
  position: relative;
}
.hero-title .strike::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 52%;
  height: 8px;
  background: var(--red);
  transform: rotate(-4deg);
}
.hero-manifesto {
  max-width: 580px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  margin: 40px 0 0;
}
.hero-manifesto strong { color: #fff; font-weight: 600; }
.hero-manifesto .red { color: var(--red); }
.hero-bottom {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 56px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-ctas .cta-ghost { border-color: rgba(255,255,255,0.6); color: #fff; }
.hero-ctas .cta-ghost:hover { background: #fff; color: var(--ink); }

/* ---------- STORY TEASER (Section 001 · home page) ---------- */
.teaser-body {
  max-width: 760px;
  margin-top: 40px;
}
.teaser-lead {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 36px;
  font-weight: 400;
}
.teaser-lead .red { color: var(--red); font-weight: 600; }
.teaser-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.teaser-cta { padding: 14px 22px; }
.teaser-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Chinese teaser typography */
html[lang="zh-Hant"] .teaser-lead {
  font-family: 'Noto Sans TC', 'Inter', sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

/* ---------- NUMBERS (Redacted wall) ---------- */
.numbers-section {
  background: var(--ink);
  color: var(--bone);
  border-top: 0;
  position: relative;
  overflow: hidden;
}
.numbers-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--red);
}
.numbers-section .section-head h2,
.numbers-section .section-head { color: var(--bone); }
.numbers-section .section-head .mono { color: rgba(255,255,255,0.5); }
.numbers-section .section-head .n { color: var(--red); }
.numbers-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.15);
  border-left: 1px solid rgba(255,255,255,0.15);
}
.numbers-section .num-cell {
  padding: 40px 28px 28px;
  border-right: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: background .25s;
}
.numbers-section .num-cell:nth-child(1) { background: rgba(255,255,255,0.02); }
.numbers-section .num-cell:nth-child(2) { background: transparent; }
.numbers-section .num-cell:nth-child(3) {
  background: var(--red);
  color: #fff;
}
.numbers-section .num-cell:nth-child(3) .label-line { color: rgba(255,255,255,0.85); }
.numbers-section .num-cell:nth-child(3) .hero-9 { color: #fff; }
.numbers-section .num-cell:nth-child(4) { background: rgba(255,255,255,0.02); }
.numbers-section .num-cell:hover { background: rgba(255,255,255,0.06); }
.numbers-section .num-cell:nth-child(3):hover { background: var(--red-deep); }

.num-cell {
  padding: 32px 28px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  justify-content: space-between;
}
.num-cell .val {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.num-cell .val.redacted {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.num-cell .val.redacted span {
  display: inline-block;
  background: var(--ink);
  height: 0.7em;
  width: 0.45em;
}
body.dark .num-cell .val.redacted span { background: var(--bone); }
.num-cell .val .red { color: var(--red); }
.num-cell .val .hero-9 { color: var(--red); }
.numbers-section .num-cell .val { font-size: clamp(64px, 6.5vw, 104px); color: #fff; }
.numbers-section .num-cell:nth-child(3) .val { color: #fff; }
.num-cell .label-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.numbers-section .num-cell .label-line { color: rgba(255,255,255,0.55); }
.numbers-section .num-cell:nth-child(3) .label-line { color: rgba(255,255,255,0.85); }

/* ---------- SERVICES (Capabilities) ---------- */
.services-list {
  display: flex;
  flex-direction: column;
}
.service-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 2fr 200px;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
  align-items: center;
  transition: padding .2s;
}
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row:hover { padding-left: 20px; }
.service-row .s-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.service-row .s-title {
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.service-row .s-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 520px;
}
.service-row .s-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.service-row .s-tags span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 5px 9px;
}

/* ---------- BRANDS (portfolio list) ---------- */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.brand-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: background .15s, color .15s;
}
.brand-card:hover { background: var(--ink); color: var(--bone); }
.brand-card:hover .bc-meta,
.brand-card:hover .bc-tag-list span { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.3); }
.brand-card.redacted {
  background: var(--red);
  color: #fff;
}
.brand-card.redacted .bc-meta { color: rgba(255,255,255,0.7); }
.brand-card .bc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.brand-card .bc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.brand-card.redacted .bc-num { color: #fff; }
.brand-card .bc-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid currentColor;
}
.brand-card .bc-body { margin: 40px 0; }
.brand-card .bc-name {
  font-family: var(--font-display);
  font-size: 62px;
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.brand-card.redacted .bc-name {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.18em;
  line-height: 1.3;
}
.brand-card .bc-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-card .bc-tag-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.brand-card .bc-tag-list span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.brand-card .bc-arrow {
  font-family: var(--font-display);
  font-size: 20px;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.brand-card:hover .bc-arrow { opacity: 1; transform: translateX(4px); }
.brand-card .bc-redact-visual {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}
.brand-card .bc-redact-visual span {
  display: inline-block;
  background: #fff;
  height: 24px;
}
.brand-card .bc-redact-visual span:nth-child(1) { width: 80px; }
.brand-card .bc-redact-visual span:nth-child(2) { width: 40px; }
.brand-card .bc-redact-visual span:nth-child(3) { width: 60px; }

.brands-footnote {
  margin-top: 40px;
  padding: 24px 28px;
  border: 1px solid var(--red);
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.brands-footnote .ft-text {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.brands-footnote .ft-text strong { color: var(--red); }

/* ---------- RETAIL ---------- */
.retail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.retail-card {
  padding: 44px 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 460px;
  position: relative;
}
.retail-card:last-child { border-right: none; }
.retail-card .r-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.retail-card .r-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.retail-card .r-year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}
.retail-card .r-name {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 120px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  margin: 0;
}
.retail-card .r-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 480px;
}
.retail-card .r-visual {
  flex: 1;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px);
}
.retail-card .r-visual-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.55);
}
.retail-card .r-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.retail-card .r-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}
.retail-card .r-tags {
  display: flex;
  gap: 6px;
}
.retail-card .r-tags span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  padding: 4px 8px;
}

/* ---------- PIPELINE / ROADMAP ---------- */
.pipeline {
  border-top: 1px solid var(--line);
}
.pipeline-row {
  display: grid;
  grid-template-columns: 140px 200px 1fr 160px;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.pipeline-row .p-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
}
.pipeline-row .p-code {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: -0.005em;
  line-height: 0.95;
}
.pipeline-row .p-desc {
  font-size: 14px;
  color: var(--muted);
}
.pipeline-row .p-status {
  display: flex;
  justify-content: flex-end;
}
.pipeline-row .p-status span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid currentColor;
}
.pipeline-row.active .p-code { color: var(--red); }
.pipeline-row.active .p-status span { background: var(--red); color: #fff; border-color: var(--red); }

/* ---------- CAREERS TEASER on homepage ---------- */
.careers-teaser {
  background: var(--red);
  color: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.careers-teaser .ct-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
.careers-teaser .ct-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.careers-teaser .ct-eyebrow::before {
  content: '';
  width: 8px; height: 8px; background: #fff;
  animation: blink 1.2s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }
.careers-teaser .ct-title {
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 150px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  text-transform: uppercase;
}
.careers-teaser .ct-title .out {
  -webkit-text-stroke: 2px #fff;
  color: transparent;
}
.careers-teaser .ct-body {
  font-size: 17px;
  line-height: 1.55;
  max-width: 540px;
  margin-bottom: 36px;
  color: rgba(255,255,255,0.9);
}
.careers-teaser .ct-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.careers-teaser .ct-ctas .cta-red {
  background: #fff; color: var(--red);
}
.careers-teaser .ct-ctas .cta-red:hover { background: var(--ink); color: #fff; }
.careers-teaser .ct-ctas .cta-ghost { border-color: #fff; color: #fff; }
.careers-teaser .ct-ctas .cta-ghost:hover { background: #fff; color: var(--red); }

.careers-teaser .ct-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.3);
}
.ct-role {
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 20px;
  align-items: center;
  transition: background .15s;
}
.ct-role:last-child { border-bottom: none; }
.ct-role:hover { background: rgba(0,0,0,0.15); }
.ct-role .r-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.7;
}
.ct-role .r-name {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 0.95;
  text-transform: uppercase;
}
.ct-role .r-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  display: block;
  margin-top: 4px;
}
.ct-role .r-arrow {
  font-family: var(--font-display);
  font-size: 24px;
}

/* ---------- CONTACT ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-head h2 {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 120px);
  line-height: 0.86;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  text-transform: uppercase;
}
.contact-head h2 .red { color: var(--red); }
.contact-head p {
  font-size: 16px;
  color: var(--muted);
  max-width: 440px;
  line-height: 1.55;
  margin: 0 0 32px;
}
.contact-meta {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contact-meta-row .k { color: var(--muted); }

.inquiry-form {
  border: 1px solid var(--line);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: transparent;
}
.inquiry-form .if-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.inquiry-form .if-head .code {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.inquiry-form label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 8px 0;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}
.inquiry-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 20px;
}
.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: var(--red);
}
.inquiry-form textarea { min-height: 80px; resize: vertical; }
.if-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.inquiry-form .submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.inquiry-form .submit-row .note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.inquiry-form button[type=submit] {
  background: var(--red);
  color: #fff;
  padding: 14px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .15s;
}
.inquiry-form button[type=submit]:hover { background: var(--red-deep); }
.form-success {
  padding: 16px 20px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero { min-height: auto; }
  .hero-left { padding: 48px 32px; min-height: 85vh; }
  .hero-fx { width: 100%; opacity: 0.5; }
  .hero-fx-mark { font-size: 9px; right: 20px; top: 20px; }
  /* --- Teaser (home story) --- */
  .teaser-body { margin-top: 24px !important; }
  .teaser-lead {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
    margin-bottom: 24px !important;
  }
  .teaser-actions {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .teaser-cta { width: auto; }
  .teaser-meta { font-size: 10px !important; }
  .numbers-wall { grid-template-columns: repeat(2, 1fr); }
  .service-row { grid-template-columns: 40px 1fr; gap: 16px; }
  .service-row .s-desc, .service-row .s-tags { grid-column: 2; }
  .brands-grid { grid-template-columns: 1fr 1fr; }
  .retail-grid { grid-template-columns: 1fr; }
  .pipeline-row { grid-template-columns: 100px 1fr; gap: 12px; }
  .pipeline-row .p-desc, .pipeline-row .p-status { grid-column: 2; }
  .careers-teaser .ct-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .if-row { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .hero-left { padding: 32px 20px; }
  .hero-fx-mark { display: none; }
  .brands-grid { grid-template-columns: 1fr; }
  .service-row .s-title { font-size: 30px; }
}

/* =================================================================== */
/* === COMPREHENSIVE MOBILE OPTIMIZATION (Phones & small tablets) === */
/* =================================================================== */

/* =================================================================== */
/* === MOBILE REFINED — Phones & small tablets (<=768px) =========== */
/* =================================================================== */
@media (max-width: 768px) {
  /* --- Global rhythm --- */
  .section { padding: 60px 0; }
  .section.tight { padding: 40px 0; }
  .container { padding: 0 22px; }

  /* --- Typography base — Chinese gets Noto Sans TC --- */
  body {
    font-family: 'Noto Sans TC', 'Inter', 'Helvetica Neue', sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
  }
  :lang(zh-Hant), html[lang="zh-Hant"] body {
    font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
    letter-spacing: 0.01em;
  }

  /* --- Section head (eyebrow + big title) --- */
  .section-head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }
  .section-head .mono { font-size: 10px; letter-spacing: 0.2em; }
  .section-head h2 {
    font-size: clamp(38px, 10vw, 60px);
    line-height: 0.92;
    letter-spacing: -0.005em;
  }

  /* --- HERO --- */
  .hero-left { padding: 36px 22px 48px; }
  .hero-meta {
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 9.5px;
    letter-spacing: 0.22em;
  }
  .hero-title {
    font-size: clamp(42px, 12vw, 82px);
    line-height: 0.9;
    letter-spacing: -0.005em;
  }
  .hero-manifesto {
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-top: 28px !important;
    color: rgba(255,255,255,0.82);
  }
  .hero-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    margin-top: 36px;
  }
  .hero-ctas { flex-direction: column; gap: 8px; }
  .hero-ctas .cta-red,
  .hero-ctas .cta-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 15px 18px;
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  .hero-fx { opacity: 0.25; }
  .hero-fx::before, .hero-fx::after { display: none; }

  /* (Story teaser handled at top of mobile rules) */

  /* --- Numbers wall (fix: label-line wrapping bug) --- */
  .numbers-wall { grid-template-columns: 1fr 1fr; }
  .numbers-section .num-cell {
    padding: 22px 16px 18px;
    min-height: 130px;
    gap: 10px;
  }
  .numbers-section .num-cell .val { font-size: clamp(42px, 11vw, 64px) !important; }
  .num-cell .val { font-size: clamp(40px, 10vw, 56px) !important; }
  .num-cell .label-line {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.4 !important;
  }
  .num-cell .label-line > span:last-child {
    opacity: 0.5;
    font-size: 8.5px !important;
  }

  /* --- Services --- */
  .services-list { gap: 0; }
  .service-row {
    grid-template-columns: 40px 1fr !important;
    gap: 10px 14px !important;
    padding: 24px 0 !important;
  }
  .service-row .s-num { font-size: 10px; }
  .service-row .s-title {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.04 !important;
  }
  .service-row .s-desc {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
    color: var(--muted);
  }
  .service-row .s-tags {
    gap: 5px !important;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  .service-row .s-tags span {
    font-size: 9px !important;
    padding: 3px 7px !important;
    letter-spacing: 0.14em;
  }

  /* --- WORK / ROSTER (dark section) --- */
  #work { padding: 60px 0; }
  .rl-row {
    grid-template-columns: 50px 1fr auto !important;
    grid-template-areas:
      "num name status"
      "type type type" !important;
    gap: 8px 12px !important;
    padding: 16px 10px !important;
    align-items: center;
  }
  .rl-row.redacted { padding-left: 7px !important; }
  .rl-n { grid-area: num; font-size: 10px !important; }
  .rl-name {
    grid-area: name;
    font-size: 22px !important;
    line-height: 1 !important;
    letter-spacing: -0.005em !important;
  }
  .rl-year { display: none; }
  .rl-type {
    grid-area: type;
    font-size: 9px !important;
    line-height: 1.4 !important;
    opacity: 0.6;
  }
  .rl-status { grid-area: status; justify-self: end; }
  .rl-status span {
    font-size: 8px !important;
    padding: 3px 7px !important;
    letter-spacing: 0.14em !important;
  }
  .rl-arrow { display: none; }
  .rl-redact-name { width: 100px !important; height: 22px !important; }
  .brands-footnote {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 18px 20px !important;
  }
  .brands-footnote .ft-text {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }

  /* --- RETAIL / SHOPS --- */
  #retail .retail-card {
    padding: 40px 24px 32px !important;
    min-height: auto;
    gap: 16px !important;
  }
  .retail-card .r-head { font-size: 10px; }
  .retail-card .r-name {
    font-size: clamp(44px, 14vw, 68px) !important;
    line-height: 0.94 !important;
  }
  .retail-card .r-desc {
    font-size: 13.5px !important;
    line-height: 1.62 !important;
  }
  .retail-card .r-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px !important;
  }
  .retail-card .r-link { font-size: 11px; }
  .retail-card .r-tags span { font-size: 9px; }
  #retail .retail-card::before {
    font-size: clamp(140px, 42vw, 210px) !important;
    top: -40px !important;
    right: -14px !important;
  }

  /* --- Pipeline --- */
  .pipeline-row {
    grid-template-columns: 80px 1fr !important;
    gap: 6px 12px !important;
    padding: 18px 0 !important;
    row-gap: 4px !important;
  }
  .pipeline-row .p-date { font-size: 10px !important; }
  .pipeline-row .p-code {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.1 !important;
  }
  .pipeline-row .p-desc {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
  }
  .pipeline-row .p-status span { font-size: 8px; padding: 3px 7px; }

  /* --- Careers teaser (red section) --- */
  .careers-teaser { padding: 64px 0 !important; }
  .careers-teaser .ct-inner { gap: 32px !important; }
  .careers-teaser .ct-h {
    font-size: clamp(42px, 11vw, 66px) !important;
    line-height: 0.94 !important;
  }
  .careers-teaser .ct-eyebrow { font-size: 10px !important; }
  .careers-teaser p { font-size: 13.5px !important; line-height: 1.62; }
  .ct-role {
    grid-template-columns: 44px 1fr auto !important;
    padding: 16px 10px !important;
    gap: 10px !important;
  }
  .ct-role .r-n { font-size: 10px !important; }
  .ct-role .r-name {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
  .ct-role .r-meta { font-size: 9px !important; letter-spacing: 0.14em; }
  .ct-role .r-arrow { font-size: 14px; }

  /* --- Contact --- */
  .contact-grid { gap: 36px; }
  .contact-head h2 {
    font-size: clamp(42px, 11vw, 68px) !important;
    line-height: 0.92 !important;
  }
  .contact-head p { font-size: 13.5px; line-height: 1.62; }
  .contact-meta { margin-top: 28px; }
  .contact-meta-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--line);
  }
  .contact-meta-row .k { font-size: 9px !important; letter-spacing: 0.18em !important; }
  .contact-meta-row > span:last-child {
    font-size: 13.5px !important;
    letter-spacing: 0.04em;
  }

  /* --- Inquiry form (mobile refinement) --- */
  .inquiry-form { padding: 28px 22px !important; }
  .inquiry-form .if-head { margin-bottom: 20px; }
  .inquiry-form .if-head .label { font-size: 10px !important; letter-spacing: 0.22em; }
  .inquiry-form .if-head .code { font-size: 9px !important; }
  .inquiry-form label {
    font-size: 10px !important;
    letter-spacing: 0.2em;
    margin-bottom: 6px;
  }
  .inquiry-form input,
  .inquiry-form select,
  .inquiry-form textarea {
    font-size: 14.5px !important;
    padding: 10px 0 !important;
  }
  .inquiry-form textarea { min-height: 100px !important; }
  .inquiry-form .submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px !important;
  }
  .inquiry-form .note { font-size: 10px; text-align: left; }
  .inquiry-form button[type=submit] {
    justify-content: center;
    padding: 14px 18px !important;
    font-size: 11px !important;
  }

  /* --- Footer --- */
  .footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 18px !important;
  }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .footer-wordmark {
    font-size: clamp(48px, 15vw, 72px) !important;
    line-height: 0.85 !important;
  }
  .footer-top h4 { font-size: 10px !important; letter-spacing: 0.2em; }
  .footer-list a { font-size: 12px !important; }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: left;
    align-items: flex-start !important;
    font-size: 10px !important;
  }

  /* --- Nav (fixed selectors) --- */
  .nav-inner { padding: 0 18px !important; height: 54px !important; }
  .nav-left { gap: 16px !important; }
  .nav-right { gap: 10px !important; }
  .wordmark { font-size: 16px !important; letter-spacing: 0.02em !important; }
  .wordmark .dot { width: 5px !important; height: 5px !important; }
  .lang-toggle { height: 26px; }
  .lang-toggle button { padding: 0 7px; font-size: 9px; }
  .nav .cta-red {
    padding: 7px 11px !important;
    font-size: 9.5px !important;
    letter-spacing: 0.12em !important;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}

/* --- Small phones (<= 420px) --- */
@media (max-width: 420px) {
  .container { padding: 0 18px; }
  .section { padding: 52px 0; }

  /* HERO */
  .hero-title { font-size: clamp(36px, 11.5vw, 62px) !important; }
  .hero-left { padding: 28px 18px 40px; }

  /* Section head */
  .section-head h2 { font-size: clamp(32px, 9vw, 50px) !important; }

  /* Hide hero fx-mark on very small */
  .hero-fx-mark { display: none; }

  /* Manifesto smaller */
  /* (Teaser already scales down via mobile rules) */

  /* Roster — most compact form */
  .rl-row {
    grid-template-columns: 36px 1fr !important;
    grid-template-areas:
      "num name"
      "type type"
      "status status" !important;
    padding: 14px 6px !important;
  }
  .rl-name { font-size: 20px !important; }
  .rl-status { justify-self: start !important; margin-top: 2px; }

  /* Retail ghost number */
  #retail .retail-card::before {
    font-size: clamp(120px, 38vw, 180px) !important;
  }
  #retail .retail-card { padding: 32px 20px 24px !important; }
  .retail-card .r-name { font-size: clamp(38px, 13vw, 58px) !important; }

  /* Footer: single column */
  .footer-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-wordmark { font-size: 44px !important; }
}