/* ============================================================
   Tab Tab Studio — Global Stylesheet
   Shared across all pages: homepage, showcase, about, contact
   ============================================================ */

/* ── Image protection ── */
img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }


/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand colours */
  --red:    #d5403a;
  --blue:   #499fb6;
  --yellow: #f7e34c;
  --black:  #1a1a1a;
  --white:  #ffffff;
  --off:    #F2F2F2;
  --grey1:  #eeede9;
  --grey2:  #d6d4ce;
  --grey3:  #9e9b94;
  --grey4:  #6b6864;
  --grey5:  #3a3835;

  /* Borders */
  --frame:  1px solid rgba(0,0,0,0.12);

  /* Layout */
  --mg:     72px;   /* fixed side margin strip width */
  --cp:     72px;   /* inner content padding */
  --section-py: 80px; /* standard section vertical padding */
  --sec-head-mb: 48px; /* section header margin-bottom */

  /* Dot grid (applied to white-bg sections) */
  --grid-img:  linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
               linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
  --grid-size: 40px 40px;
}


/* ============================================================
   TYPE SCALE
   All text on the site should use one of these tokens.
   ─────────────────────────────────────────────────────────
   --t-display   Hero H1
   --t-h2        Section titles
   --t-h3        Card / service titles
   --t-body-lg   Hero description
   --t-body      General body copy
   --t-body-sm   Nav links, buttons, sub-labels, card brand
   --t-label     DM Mono uppercase labels (form, stats, footer, tags)
   --t-micro     DM Mono fine metadata (card year, scroll hint)
   ============================================================ */
:root {
  --t-display:  clamp(42px, 5vw, 72px);
  --t-h2:       clamp(24px, 2.6vw, 36px);
  --t-h3:       22px;
  --t-body-lg:  17px;
  --t-body:     16px;
  --t-body-sm:  14px;
  --t-label:    12px;
  --t-micro:    11px;

  /* Line heights */
  --lh-heading: 1.1;
  --lh-body:    1.75;
  --lh-label:   1.4;
}


/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--black);
  font-family: 'Poppins', sans-serif;
  font-size: var(--t-body);
  font-weight: 300;
  line-height: var(--lh-body);
  overflow-x: hidden;
  cursor: none;
}

a, button, [role="button"], input, textarea, select { cursor: none; }

/* ── Language toggle ──
   EN is the default. ZH content is hidden unless body.zh is active.
   All rules use explicit display values — no revert, no surprises.
── */

/* ZH content: always hidden by default */
[data-lang="zh"] { display: none; }

/* EN mode (default): show EN, keep ZH hidden */
body.en [data-lang="en"] { display: revert; }
body.en [data-lang="zh"] { display: none; }

/* ZH mode: hide EN, show ZH */
body.zh [data-lang="en"] { display: none; }
body.zh [data-lang="zh"] { display: revert; }

/* Override revert for sc-disc-list items so flex layout always wins for visible items */
body.en .sc-disc-list li[data-lang="en"],
body.zh .sc-disc-list li[data-lang="zh"] { display: flex !important; }

/* ============================================================
   LAYOUT SHELL
   Nav, footer, margin strips, page-wrap — shared on every page.
   ============================================================ */

/* ── Custom cursor ── */
/* Single element: square filled dot at rest, expands into square ring on hover */
#cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 12px; height: 12px;
  background: var(--black);
  border: 0px solid var(--black);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%) scale(1);
  transform-origin: center center;
  transition: transform .22s cubic-bezier(0.22,1,0.36,1),
              background .22s cubic-bezier(0.22,1,0.36,1),
              border-width .22s cubic-bezier(0.22,1,0.36,1),
              width .22s cubic-bezier(0.22,1,0.36,1),
              height .22s cubic-bezier(0.22,1,0.36,1);
}
/* Hover: same element scales up, fill disappears, border appears — dot becomes ring */
body.cursor-hover #cursor-dot {
  width: 62px; height: 62px;
  background: transparent;
  border-width: 2px;
}
/* cursor-ring element is now unused but kept in HTML — hide it */
#cursor-ring { display: none; }

/* ── Cursor trail ── */
.cursor-trail {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--black);
  pointer-events: none; z-index: 9997;
  transform: translate(-50%,-50%);
  will-change: opacity;
}

/* ── Margin strips (fixed dot-grid side columns) ── */
.mg-left, .mg-right {
  position: fixed; top: 0; bottom: 0; width: var(--mg);
  z-index: 10; pointer-events: none;
  background-color: var(--white);
  background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px);
  background-size: 16px 16px;
}
.mg-left  { left: 0;  border-right: var(--frame); }
.mg-right { right: 0; border-left:  var(--frame); }

/* ── Page wrap ── */
.page-wrap {
  margin-left: var(--mg); margin-right: var(--mg);
  position: relative; z-index: 1; overflow: clip;
  /* overflow:clip prevents horizontal scroll bleed like overflow:hidden,
     but does NOT create a scroll container — so position:sticky and
     box-shadow corner squares on sec-title-wrap::after remain visible. */
}
.inner { padding-left: var(--cp); padding-right: var(--cp); }

/* ── Section divider ── */
.sec-divider { width: 100%; height: 1px; background: var(--grey2); position: relative; z-index: 2; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: var(--mg); right: var(--mg);
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--cp);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--frame);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
nav.nav-hidden { transform: translateY(-100%); }
.nav-logo { display: block; height: 56px; }
.nav-logo picture { display: block; height: 56px; }
.nav-logo img { height: 56px; width: auto; display: block; }

.nav-right { display: flex; align-items: center; gap: 36px; }
.nav-links { display: flex; gap: 44px; list-style: none; }
.nav-links a {
  font-size: var(--t-body-sm); font-weight: 400; color: var(--grey4);
  text-decoration: none; transition: color .2s;
  position: relative; display: flex; align-items: center; gap: 7px;
}
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.nav-icon svg { width: 12px; height: 12px; }
.nav-links a:hover .nav-icon { transform: rotate(360deg); }
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--black); transition: width .25s;
}
.nav-links a:hover { color: var(--black); }
.nav-links a:hover::after { width: 100%; }

.lang-toggle { display: flex; border: var(--frame); border-radius: 2px; overflow: hidden; }
.lang-btn {
  padding: 5px 11px; background: transparent; border: none; cursor: none;
  font-family: 'DM Mono', monospace; font-size: var(--t-label); letter-spacing: .08em;
  color: var(--grey3); transition: background .2s, color .2s;
}
.lang-btn.active { background: var(--grey3); color: var(--white); }
.lang-btn:not(.active):hover { background: var(--grey1); color: var(--black); }

/* ── Footer ── */
footer {
  background: var(--white); border-top: var(--frame);
  padding: 28px var(--cp);
  display: flex; justify-content: space-between; align-items: center;
  overflow: visible;
}
.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-label); letter-spacing: .06em; color: var(--grey3);
  line-height: var(--lh-label);
}
.footer-links { display: flex; gap: 28px; list-style: none; align-items: center; }
.footer-links li { overflow: visible; }
.footer-links a {
  font-size: var(--t-body-sm); font-weight: 300; color: var(--grey4);
  text-decoration: none; transition: color .2s;
  line-height: var(--lh-label);
  display: flex; align-items: center; gap: 6px;
  position: relative;
  padding-bottom: 4px;
}
.footer-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--black); transition: width .25s;
}
.footer-links a:hover { color: var(--black); }
.footer-links a:hover::after { width: 100%; }
.footer-email-text { min-width: 10.5ch; display: inline-block; }


/* ============================================================
   SHARED COMPONENTS
   Buttons, section headers — reused across all pages.
   ============================================================ */

/* ── Buttons ── */
.btn-frame {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: var(--t-body-sm); font-weight: 400; letter-spacing: .03em;
  color: var(--black); text-decoration: none;
  border: 1px solid var(--black); padding: 10px 20px;
  background: transparent; cursor: none;
  transition: background .2s, color .2s, gap .2s;
}
.btn-frame:hover { background: var(--black); color: var(--white); gap: 16px; }
.btn-frame.sm { font-size: var(--t-label); padding: 7px 14px; }
.btn-frame.white { border-color: var(--white); color: var(--white); }
.btn-frame.white:hover { background: var(--white); color: var(--black); }

.sec-foot { margin-top: var(--sec-head-mb); display: flex; justify-content: flex-start; }
/* ── Section title frame ── */
.sec-head { padding-top: 20px; margin-bottom: var(--sec-head-mb); }
.service-section .sec-head { text-align: center; }
.sec-head.work-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  width: 100%;
}
.sec-title-wrap {
  display: inline-block; position: relative; padding: 8px 16px;
  --sec-title-bg: var(--white); /* overridden per section below */
  background: var(--sec-title-bg);
}
.sec-title-wrap::before {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(0,0,0,.18); pointer-events: none;
}
.sec-title-wrap::after {
  content: ''; position: absolute;
  width: 7px; height: 7px; top: -3px; left: -3px;
  background: var(--sec-title-bg); border: 1px solid rgba(0,0,0,.22);
  box-shadow:
    calc(100% + 2px - 7px + 6px) 0px 0 0 var(--sec-title-bg),
    calc(100% + 2px - 7px + 6px) 0px 0 1px rgba(0,0,0,.22),
    0px calc(100% + 2px - 7px + 6px) 0 0 var(--sec-title-bg),
    0px calc(100% + 2px - 7px + 6px) 0 1px rgba(0,0,0,.22),
    calc(100% + 2px - 7px + 6px) calc(100% + 2px - 7px + 6px) 0 0 var(--sec-title-bg),
    calc(100% + 2px - 7px + 6px) calc(100% + 2px - 7px + 6px) 0 1px rgba(0,0,0,.22);
}
.sec-title {
  font-size: var(--t-h2); font-weight: 400;
  line-height: var(--lh-heading); letter-spacing: -.02em;
  position: relative; z-index: 1;
}

/* Section title background overrides (must match section bg) */
.work-section    .sec-title-wrap,
.service-section .sec-title-wrap,
.contact-section .sec-title-wrap { --sec-title-bg: var(--off); }

.clients-section .sec-title-wrap { --sec-title-bg: var(--white); }


/* ============================================================
   SECTION BACKGROUNDS & SPACING
   ============================================================ */
.hero,
.about-section,
.clients-section {
  background-color: var(--white);
  background-image: var(--grid-img);
  background-size: var(--grid-size);
}
.service-section  { background-color: var(--off); position: relative; overflow: hidden; }
.work-section     { background-color: var(--off); position: relative; overflow: hidden; }
.contact-section  { background-color: var(--off); position: relative; overflow: hidden; }

.work-section,
.service-section,
.clients-section,
.about-section,
.contact-section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
}


/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 56px;
  padding-top: 110px; padding-bottom: var(--section-py);
  position: relative;
}
.hero-title {
  font-size: var(--t-display);
  font-weight: 400; line-height: var(--lh-heading); letter-spacing: -.025em;
  margin-bottom: 28px;
}
.cursor-blink {
  display: inline-block; font-weight: 300; color: var(--black);
  animation: blink 1s step-end infinite; margin-left: 2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-desc {
  font-size: var(--t-body-lg); font-weight: 300; line-height: var(--lh-body);
  color: var(--grey4); max-width: 420px; margin-bottom: 40px;
}
.hero-right { display: flex; align-items: center; justify-content: center; }
.hero-right img { width: 80%; height: auto; display: block; }

/* Bracket frame */
.bracket-frame { position: relative; width: 100%; }
.bracket-frame .frame-border { position: absolute; inset: 0; border: 1px solid rgba(0,0,0,.2); pointer-events: none; z-index: 2; }
.bracket-frame .sq { position: absolute; width: 9px; height: 9px; background: var(--white); border: 1px solid rgba(0,0,0,.25); z-index: 3; }
.sq-tl{top:-4px;left:-4px} .sq-tr{top:-4px;right:-4px}
.sq-br{bottom:-4px;right:-4px} .sq-bl{bottom:-4px;left:-4px}
.bracket-frame .frame-inner { position: relative; overflow: visible; background: transparent; }
.frame-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size: var(--t-label); letter-spacing:.1em; color:var(--grey3);
}

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: var(--black);
}
.scroll-hint:hover .scroll-line { opacity: .6; }
.scroll-label {
  font-family: 'DM Mono', monospace; font-size: var(--t-micro);
  letter-spacing: .2em; text-transform: uppercase; color: var(--grey4);
  line-height: var(--lh-label);
}
.scroll-arrow {
  display: flex; flex-direction: column; align-items: center;
  animation: bounce-arrow 1.8s ease-in-out infinite;
}
.scroll-arrow svg { width: 16px; height: 16px; }
.scroll-line { width: 1px; height: 20px; background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent); }
@keyframes bounce-arrow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }


/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip {
  background: var(--white);
  padding: 0 var(--cp);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--grey2); border-bottom: 1px solid var(--grey2);
}
.stat-item {
  padding: 40px 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  border-left: 1px solid var(--grey2); border-right: 1px solid var(--grey2);
  cursor: default;
}
.stat-item + .stat-item { border-left: none; }

.stat-num {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 400; letter-spacing: -.04em; line-height: 1; color: var(--black);
}
.stat-num .plus {
  font-size: .55em; vertical-align: super; font-weight: 300; margin-left: 2px;
}
.stat-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--grey4); line-height: var(--lh-label);
}
/* ZH stat labels: use Poppins, no uppercase */
.stat-label [data-lang="zh"] {
  font-family: 'Poppins', sans-serif;
  font-size: var(--t-body-sm); letter-spacing: .04em; text-transform: none;
}


/* ============================================================
   WORK CARDS
   ============================================================ */
.work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 80px 40px; align-items: stretch; }
.work-card {
  text-decoration: none; color: inherit; display: block; position: relative;
  /* Reserve 9px on right + bottom so the shadow is never clipped when revealed */
  padding-right: 9px; padding-bottom: 9px;
  height: 100%;
}
/* Shadow: same size/position as the frame, sits underneath, never moves */
.card-shadow {
  position: absolute;
  top: 0; left: 0; right: 9px; bottom: 9px;
  background: var(--black);
  z-index: 0;
}
/* Frame: covers the shadow completely by default, lifts on hover to reveal it */
.card-img-wrap {
  position: relative; z-index: 1;
  background: #fff;
  border: 1px solid var(--black);
  display: flex; flex-direction: column; height: 100%;
  transform: translate(0, 0);
  transition: transform .32s cubic-bezier(.25,.46,.45,.94);
}
.work-card:hover .card-img-wrap {
  transform: translate(-9px, -9px);
}
.card-img {
  position: relative; width: 100%; overflow: hidden; flex-shrink: 0;
}

/* Cover image crossfade — stacked, natural ratio */
.card-img img {
  display: block; width: 100%; height: auto;
  transition: opacity .38s ease;
}
.card-img img.ph-default { opacity: 1; position: relative; z-index: 1; }
.card-img img.ph-hover   { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.work-card:hover .card-img img.ph-hover   { opacity: 1; }
.work-card:hover .card-img img.ph-default { opacity: 0; }

/* Card text — inside the frame */
.card-meta {
  padding: 14px 12px;
  background: #fff;
  border-top: 1px solid var(--black);
  display: flex; flex-direction: column; flex: 1;
}
.card-title {
  font-size: var(--t-h3); font-weight: 400;
  line-height: 1.45; margin-top: 8px; margin-bottom: 8px; color: var(--black);
}
.card-brand {
  font-size: var(--t-body-sm); font-weight: 400;
  color: var(--grey4); line-height: var(--lh-label);
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif; letter-spacing: 0;
}
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-label); letter-spacing: .06em;
  color: var(--grey3); border: 1px solid var(--grey2);
  padding: 3px 7px; border-radius: 2px; line-height: var(--lh-label);
}
.card-year {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-label); color: var(--grey3);
  letter-spacing: .08em; flex-shrink: 0; line-height: var(--lh-label);
}


/* ============================================================
   CLIENT LOGO MARQUEE
   ============================================================ */
.logo-marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--grey2); border-bottom: 1px solid var(--grey2);
  padding: 32px 0; margin-top: 44px;
  display: flex; flex-direction: column; gap: 24px;
}
.marquee-row {
  display: flex; gap: 72px; width: max-content; align-items: center;
}
.marquee-row:nth-child(1) { animation: marquee 50s linear infinite; }
.marquee-row:nth-child(2) { animation: marquee 60s linear infinite reverse; }
.marquee-row:nth-child(3) { animation: marquee 45s linear infinite; }
.logo-marquee-wrap:hover .marquee-row { animation-play-state: paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.client-logo-item {
  display: flex; align-items: center; justify-content: center;
  height: 84px; flex-shrink: 0;
  opacity: 0.4; filter: grayscale(1);
  transition: opacity .25s, filter .25s;
}
a.client-logo-item { text-decoration: none; }
.client-logo-item:hover { opacity: 1; filter: grayscale(0); }
.client-logo-item img { height: 100%; width: auto; max-width: 240px; object-fit: contain; display: block; }


/* ============================================================
   SERVICE SECTION — BACKGROUND FLOATERS
   ============================================================ */
.svc-floater {
  position: absolute;
  font-family: 'DM Mono', monospace;
  font-size: clamp(20px, 4vw, 56px);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey2);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.svc-graphic {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
/* The inner grid/content sits above floaters */
.service-section .inner,
.work-section .inner { position: relative; z-index: 1; }

.wk-graphic {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}



@media (max-width: 768px) {
  .svc-floater, .svc-graphic, .wk-graphic { display: none; }
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
/* ── SERVICE CARDS ── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  gap: 40px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/*
  Inverted work-card lift pattern:
  – Wrapper has padding-top/left: 9px to make room for the lifted face
  – Shadow block sits at top:9px left:9px (bottom-right of the face) — revealed when face lifts
  – Face covers the shadow at rest (translate 0,0) and lifts to translate(-9px,-9px) by default
  – On hover: face drops back to (0,0), shadow hidden, bg colour switches
*/
.service-card {
  text-decoration: none; color: inherit;
  cursor: pointer;
  display: block;
  position: relative;
  /* Make room for the face to lift up-left without being clipped */
  padding-top: 9px; padding-left: 9px;
  height: 420px; /* total cell height including the 9px pad */
  background: transparent;
}

/* Shadow: inset from top-left by 9px, fills to right/bottom edges */
.sc-shadow {
  position: absolute;
  top: 9px; left: 9px; right: 0; bottom: 0;
  background: var(--black);
  z-index: 0;
  transition: opacity .32s cubic-bezier(.25,.46,.45,.94);
}

/* Both faces fill the FULL cell (inset: 0).
   Lifted by default via translate(-9px,-9px) — the wrapper padding-top/left:9px
   means the face visually starts at the cell's top-left corner, but can slide
   further up-left to reveal the shadow. On hover drop to (0,0) and face covers
   the entire cell including the shadow area. */
.sc-default,
.sc-hover {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 32px;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  justify-content: flex-start;
  border: 1px solid var(--black);
  /* Default = lifted: face sits 9px up-left of rest position */
  transform: translate(-9px, -9px);
  transition: transform .32s cubic-bezier(.25,.46,.45,.94);
}

/* sc-default always on top by default; sc-hover always underneath */
.sc-default {
  background: var(--white);
  z-index: 2;
}
.sc-red    .sc-default { background: #FAE9E8; }
.sc-blue   .sc-default { background: #E8F5F8; }
.sc-yellow .sc-default { background: #FEFBE9; }
.sc-hover {
  background: #F2F2F2;
  z-index: 1;
  /* Hover face is already in position — no opacity trick needed */
}

/* Shadow hides instantly on hover so it's never seen mid-transition */
.service-card:hover .sc-shadow { opacity: 0; }

/* On hover: both faces drop flat together (same transform, same timing) */
.service-card:hover .sc-default,
.service-card:hover .sc-hover {
  transform: translate(0, 0);
}

/* sc-default slides out of the way by fading — but delayed so grey is ready underneath */
.service-card:hover .sc-default {
  opacity: 0;
  transition: transform .32s cubic-bezier(.25,.46,.45,.94),
              opacity .2s ease .16s; /* fade starts after most of the drop is done */
}

/* ── Default face ── */
.sc-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  align-self: stretch;
}
.sc-pillar {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-label); font-weight: 400;
  letter-spacing: .08em;
  color: var(--grey3);
}
.sc-name {
  font-size: var(--t-h3); font-weight: 500;
  letter-spacing: -.01em; line-height: 1.4;
  align-self: flex-start;
  margin-top: 16px;
  /* One word per line in EN */
  word-spacing: 100vw;
}
.sc-num {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-label); font-weight: 400;
  letter-spacing: .08em;
  color: var(--grey3);
  flex-shrink: 0;
}
.sc-red    .sc-num    { color: #9E2E29; }
.sc-blue   .sc-num    { color: #2F7085; }
.sc-yellow .sc-num    { color: #B8A61E; }
.sc-red    .sc-pillar { color: #9E2E29; }
.sc-blue   .sc-pillar { color: #2F7085; }
.sc-yellow .sc-pillar { color: #B8A61E; }
.sc-icon {
  align-self: flex-end;
  margin-top: auto;
  width: 144px; height: 144px;
  display: flex; align-items: center; justify-content: center;
}
.sc-icon img { width: 144px; height: 144px; object-fit: contain; }

/* ── Hover face ── */
.sc-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-label); font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  color: #D5413A; /* default — overridden per colour group below */
  align-self: flex-start;
}
.sc-red    .sc-label { color: #D5413A; }
.sc-blue   .sc-label { color: #489FB6; }
.sc-yellow .sc-label { color: #B8A61E; }
.sc-disc-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  overflow: hidden;
}
.sc-disc-list li {
  font-family: 'DM Mono', monospace;
  font-size: var(--t-body-sm); font-weight: 300;
  letter-spacing: .01em; line-height: 1.5;
  color: var(--black);
  display: flex !important; align-items: center; gap: 10px;
}
.sc-disc-list li[data-lang="en"],
.sc-disc-list li[data-lang="zh"] {
  /* both start hidden; lang rules below reveal the right set */
  display: none !important;
}
body.en .sc-disc-list li[data-lang="en"],
body.zh .sc-disc-list li[data-lang="zh"] { display: flex !important; }

.sc-disc-list li::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--black);
  flex-shrink: 0;
}


/* ============================================================
   ABOUT SECTION
   ============================================================ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

/* About section: left column (title/text/button) 40%, right column (image) 60%.
   Items are flat children of .two-col — grid-template-areas stacks
   header/text/button in the left area and the image fills the right area. */
.about-section .two-col {
  grid-template-columns: 4fr 6fr;
  grid-template-areas:
    "head  image"
    "text  image"
    "btn   image";
  align-items: center;
}
.about-item-head  { grid-area: head; }
.about-item-text  { grid-area: text; }
.about-item-btn   { grid-area: btn; }
.about-item-image { grid-area: image; }

.about-body {
  font-size: var(--t-body); font-weight: 300;
  line-height: var(--lh-body); color: var(--grey5);
}
.about-body strong { color: var(--black); font-weight: 500; }
.about-body p + p { margin-top: 18px; }

/* Values hashtags */
.about-values-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 28px;
}
.about-value-tag {
  font-size: var(--t-label); font-family: 'DM Mono', monospace;
  letter-spacing: .06em; color: var(--grey4);
  border: 1px solid var(--grey2); padding: 5px 12px;
  transition: color .2s, border-color .2s;
}
.about-value-tag:hover { color: var(--black); border-color: var(--grey4); }

/* Right-column mascot */
.about-mascot-col {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
}
.about-mascot-col img {
  width: 100%; height: auto; display: block;
}


/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact-tagline {
  font-size: var(--t-h2); font-weight: 400;
  line-height: 1.3; letter-spacing: -.02em; margin: 24px 0 18px;
}
.contact-tagline span { color: var(--grey3); }
.contact-sub {
  font-size: var(--t-body); font-weight: 300;
  color: var(--grey4); line-height: var(--lh-body);
}
.contact-reply {
  display: block; margin-top: 8px;
  font-size: var(--t-body); font-weight: 300;
  color: var(--grey4); line-height: var(--lh-body);
}

.contact-form { display: flex; flex-direction: column; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; }
.form-field { border-bottom: 1px solid var(--grey2); padding: 16px 0; transition: border-color .2s; }
.form-row .form-field:first-child { border-right: 1px solid var(--grey2); padding-right: 20px; }
.form-row .form-field:last-child { padding-left: 20px; }
.form-field:focus-within { border-bottom-color: var(--black); }
.form-field label {
  display: block; font-family: 'DM Mono', monospace;
  font-size: var(--t-micro); letter-spacing: .15em;
  color: var(--grey3); text-transform: uppercase; margin-bottom: 6px;
  line-height: var(--lh-label);
}
.form-field input,
.form-field textarea {
  background: transparent; border: none; outline: none; width: 100%;
  color: var(--black); font-family: 'Poppins', sans-serif;
  font-size: var(--t-body); font-weight: 300; resize: none;
  line-height: var(--lh-body);
}
.form-field textarea { min-height: 88px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--grey2); }

.form-field-checkbox { border-bottom: 1px solid var(--grey2); padding: 16px 0; }
.form-field-checkbox > label {
  display: block; font-family: 'DM Mono', monospace;
  font-size: var(--t-micro); letter-spacing: .15em;
  color: var(--grey3); text-transform: uppercase; margin-bottom: 10px;
  line-height: var(--lh-label);
}
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-option {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Poppins', sans-serif; font-size: var(--t-body); font-weight: 300;
  color: var(--black); cursor: pointer; user-select: none;
  border: 1px solid var(--grey2); border-radius: 2px;
  padding: 6px 14px; transition: border-color .18s, background .18s;
}
.checkbox-option:hover { border-color: var(--grey3); }
.checkbox-option input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border: 1px solid var(--grey3); border-radius: 3px;
  margin: 0; cursor: pointer; position: relative; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.checkbox-option input[type="checkbox"]:checked {
  background: var(--black); border-color: var(--black);
}
.checkbox-option input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid var(--white);
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.checkbox-option:has(input:checked) { border-color: var(--black); }


/* ============================================================
   MOBILE RESPONSIVE
   Breakpoint: 768px and below
   ============================================================ */
@media (max-width: 768px) {

  /* ── Section headers — match about page's mobile spacing ── */
  .sec-head { padding-top: 0; margin-bottom: 24px; }

  /* ── Hide margin strips on mobile ── */
  .mg-left, .mg-right { display: none; }

  /* ── Page wrap: no side margin offset ── */
  .page-wrap { margin-left: 0; margin-right: 0; }

  /* ── Inner content padding ── */
  .inner { padding-left: 20px; padding-right: 20px; }

  /* ── Disable custom cursor on touch devices ── */
  body { cursor: auto; }
  a, button, [role="button"], input, textarea, select { cursor: auto; }
  #cursor-dot, #cursor-ring, .cursor-trail { display: none; }

  /* ── NAV ── */
  nav {
    left: 0; right: 0;
    padding: 12px 20px;
  }

  /* Hide desktop nav links & lang toggle by default */
  .nav-right { display: none; }

  /* Hamburger button (injected by nav.js) */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px; height: 36px;
    background: transparent;
    border: none;
    cursor: auto;
    padding: 4px;
    flex-shrink: 0;
  }
  .nav-hamburger span {
    display: block;
    width: 22px; height: 1.5px;
    background: var(--black);
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
  }
  /* Open state */
  .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* Mobile menu drawer */
  .nav-mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--white);
    z-index: 99;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 100px 40px 60px;
  }
  .nav-mobile-menu.open { display: flex; }

  .nav-mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
  }

  .nav-mobile-menu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 400;
    color: var(--black);
    text-decoration: none;
    padding: 18px 0;
    width: 100%;
    border-bottom: 1px solid var(--grey1);
    transition: color 0.2s;
  }
  .nav-mobile-menu ul li:first-child a { border-top: 1px solid var(--grey1); }
  .nav-mobile-menu ul li a:hover { color: var(--red); }

  .nav-mobile-menu ul li a .nav-icon {
    width: 18px; height: 18px;
  }
  .nav-mobile-menu ul li a .nav-icon svg {
    width: 16px; height: 16px;
  }

  /* Lang toggle inside mobile menu */
  .nav-mobile-lang {
    margin-top: 36px;
    display: flex;
    border: var(--frame);
    border-radius: 2px;
    overflow: hidden;
  }
  .nav-mobile-lang .lang-btn {
    padding: 8px 20px;
    font-size: var(--t-body-sm);
  }

  /* ── Section spacing ── */
  .work-section,
  .service-section,
  .clients-section,
  .about-section,
  .contact-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .sec-head { margin-bottom: 32px; }

  /* ── HERO ── */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 56px;
    gap: 40px;
  }
  .hero-right { order: -1; }
  .hero-right img { width: 80%; }
  .hero-desc { max-width: 100%; font-size: var(--t-body); }
  .scroll-hint { display: none; }

  /* ── STATS STRIP ── */
  .stats-strip {
    grid-template-columns: 1fr;
    padding: 0 20px;
  }
  .stat-item {
    padding: 28px 0;
    border-left: none; border-right: none;
    border-bottom: 1px solid var(--grey2);
  }
  .stat-item:last-child { border-bottom: none; }
  .stat-item + .stat-item { border-left: none; }

  /* ── WORK CARDS ── */
  .work-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Disable the shadow lift effect on touch — it doesn't translate well */
  .work-card { padding-right: 0; padding-bottom: 0; }
  .card-shadow { display: none; }
  .work-card:hover .card-img-wrap { transform: none; }

  /* ── SERVICE GRID ── */
  .service-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 20px; width: 100%; }
  /* On mobile: no lift, no hover — show default face only, flat.
     Icon centred on top, title underneath, both scaled up to fill ~80% of the card. */
  .service-card { padding-top: 0; padding-left: 0; height: 190px; }
  .sc-shadow { display: none; }
  .sc-default,
  .sc-hover {
    top: 0; left: 0; right: 0; bottom: 0; /* fill full cell */
    transform: translate(0, 0) !important;
    transition: none;
    padding: 16px;
    border: 1px solid var(--grey2);
  }
  .sc-default {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .sc-hover { opacity: 0 !important; pointer-events: none; }
  .sc-default { opacity: 1 !important; }
  .sc-top { display: none; }
  .sc-name {
    font-size: 16px; word-spacing: normal; margin-top: 0;
    text-align: center; align-self: center; order: 2;
  }
  .sc-num { display: none; }
  .sc-pillar { display: none; }
  .sc-icon {
    position: static; align-self: center; margin-top: 0; order: 1;
    width: 96px; height: 96px; opacity: 1;
  }
  .sc-icon img { width: 96px; height: 96px; }

  /* ── ABOUT ── */
  .two-col {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* About section mobile layout: single column, left-aligned, full width.
     Order: header, image, content, button. Specificity must match/exceed
     the desktop ".about-section .two-col" rule (0,0,2,0) or it gets
     overridden even inside this media query — hence the repeated selector. */
  .about-section .two-col,
  .about-two-col {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    gap: 24px;
  }
  /* Children still carry desktop grid-area assignments (head/text/btn/image) —
     must explicitly reset to auto or they keep stacking into named cells
     that no longer exist on the single-column mobile grid. */
  .about-item-head,
  .about-item-image,
  .about-item-text,
  .about-item-btn { grid-area: auto; }
  .about-item-head  { order: 1; margin-bottom: 0; }
  .about-item-image { order: 2; display: block; height: auto; }
  .about-item-image img { width: 100%; margin: 0; }
  .about-item-text  { order: 3; }
  .about-item-btn   { order: 4; margin-top: 0 !important; }

  /* ── CLIENT MARQUEE ── */
  .logo-marquee-wrap { margin-top: 32px; }
  .client-logo-item { height: 66px; }
  .client-logo-item img { max-width: 180px; }

  /* ── CONTACT ── */
  .contact-tagline { font-size: clamp(22px, 6vw, 28px); }
  .form-row { grid-template-columns: 1fr; }
  .form-row .form-field:first-child { border-right: none; padding-right: 0; }
  .form-row .form-field:last-child { padding-left: 0; }
  .contact-bg { font-size: clamp(60px, 20vw, 100px); }

  /* ── Footer ── */
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px 20px;
  }
  .footer-copy {
    line-height: 1.7;
    white-space: normal;
  }
  .footer-links {
    flex-wrap: wrap;
    gap: 16px 24px;
  }

}

/* ── Single-column below 480px ── */
@media (max-width: 480px) {
  .service-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-card { height: 220px; }
}