/* ============================================================
   Editorial direction — Awwwards-inspired profile experience
   ------------------------------------------------------------
   A focused visual layer for the portfolio: stronger type scale,
   clearer chapter rhythm, tactile cards and responsive spacing.
   Content and rendering logic remain in the existing files.
   ============================================================ */

:root{
  --editorial-max: 1360px;
  /* Shared desktop content rail: keeps chapter copy on one readable axis
     while allowing full-width backgrounds and service cards to breathe. */
  --content-rail: 1240px;
  --copy-rail: 1120px;
  --signal-soft: rgba(213,162,85,.16);

  /* Golden-ratio type scale anchored to a 16px body size:
     10px caption → 16px body → 26px H3 → 42px H2 → 68px H1.
     Structural headings use these steps directly; responsive overrides below
     only soften the extremes for small screens. */
  --type-ratio: 1.618;
  --type-body: 1rem;
  --type-caption: .618rem;
  --type-h3: 1.618rem;
  --type-h2: 2.618rem;
  --type-h1: 4.236rem;
  --type-main-title: var(--type-h2);
  --type-subtitle: var(--type-h3);
  --type-description: var(--type-body);
}

body{
  background-image:
    radial-gradient(ellipse 100% 70% at 80% -10%, rgba(232,163,61,.14), transparent 56%),
    radial-gradient(circle at 8% 76%, rgba(127,168,143,.08), transparent 30%);
  background-attachment: fixed;
}

html[data-theme="light"] body{
  background-image:
    radial-gradient(ellipse 100% 70% at 80% -10%, rgba(138,80,31,.07), transparent 56%),
    radial-gradient(circle at 8% 76%, rgba(77,103,88,.055), transparent 30%),
    linear-gradient(180deg, rgba(243,235,218,.10), transparent 34%);
}

/* 亮色不是把深色反相，而是同一套 editorial 層次的紙張版本：
   導覽與內容表面要從羊皮紙底浮起，背景光暈則保持低彩度，避免變成白底模板。 */
html[data-theme="light"] .channel-nav{
  background:var(--nav-surface);
  border-color:rgba(62,42,30,.16);
  box-shadow:10px 0 50px rgba(62,42,30,.13);
}
html[data-theme="light"] .nav-scroll-wrap{
  background:transparent;
  border-color:transparent;
}

/* Guide-inspired light surfaces: the page stays ivory, while cards settle into
   a quiet stone layer.  The contrast comes from value and material—not from
   adding another accent colour—so the existing amber and sage signals remain
   reserved for headings, prices, progress and actions. */
html[data-theme="light"] .showcase-group,
html[data-theme="light"] .svc-group,
html[data-theme="light"] .bundle-card,
html[data-theme="light"] .course-bundle-card,
html[data-theme="light"] .location-card,
html[data-theme="light"] .work-card,
html[data-theme="light"] .work-search{
  background:
    linear-gradient(145deg, rgba(246,239,224,.68), rgba(216,211,198,.51));
  border-color:rgba(62,42,30,.19);
  box-shadow:0 16px 34px rgba(62,42,30,.11), 0 2px 8px rgba(62,42,30,.055);
}
html[data-theme="light"] .showcase-group:hover,
html[data-theme="light"] .svc-group:hover,
html[data-theme="light"] .bundle-card:hover,
html[data-theme="light"] .course-bundle-card:hover,
html[data-theme="light"] .location-card:hover,
html[data-theme="light"] .work-card:hover{
  background:
    linear-gradient(145deg, rgba(248,242,229,.76), rgba(223,216,203,.59));
}

/* Portfolio and location cards use a softer frosted-parchment material in the
   light theme. The page photography can still breathe through the surface,
   while inset light and a low warm shadow keep the cards from feeling flat. */
html[data-theme="light"] .work-card,
html[data-theme="light"] .location-card{
  background:
    linear-gradient(118deg, rgba(255,253,247,.46) 0%, rgba(255,253,247,.10) 34%, transparent 58%),
    radial-gradient(circle at 94% 4%, rgba(141,101,54,.095), transparent 38%),
    rgba(239,233,219,.64);
  border-color:rgba(73,57,39,.16);
  border-radius:18px 7px 18px 7px;
  backdrop-filter:blur(20px) saturate(.92);
  -webkit-backdrop-filter:blur(20px) saturate(.92);
  box-shadow:
    inset 0 1px 0 rgba(255,253,246,.72),
    inset 0 -1px 0 rgba(93,76,55,.07),
    0 13px 30px rgba(62,49,23,.095),
    0 3px 8px rgba(62,49,23,.045);
}
html[data-theme="light"] .work-card:hover,
html[data-theme="light"] .location-card:hover{
  background:
    linear-gradient(118deg, rgba(255,253,247,.56) 0%, rgba(255,253,247,.12) 36%, transparent 60%),
    radial-gradient(circle at 94% 4%, rgba(141,101,54,.11), transparent 40%),
    rgba(246,240,227,.72);
  border-color:rgba(112,75,31,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,253,248,.82),
    inset 0 -1px 0 rgba(93,76,55,.06),
    0 18px 38px rgba(62,49,23,.13),
    0 4px 10px rgba(62,49,23,.05);
}
html[data-theme="light"] .location-card.loc-open{
  background:
    linear-gradient(118deg, rgba(251,255,247,.44), transparent 48%),
    radial-gradient(circle at 96% 0%, rgba(70,111,82,.12), transparent 42%),
    rgba(210,226,202,.72);
  border-color:rgba(77,103,88,.62);
  box-shadow:
    inset 0 1px 0 rgba(249,255,244,.72),
    0 15px 34px rgba(68,104,78,.17),
    0 3px 8px rgba(62,49,23,.04);
}
html[data-theme="light"] .location-card.loc-closed{
  background:
    linear-gradient(118deg, rgba(255,253,247,.33), transparent 52%),
    rgba(225,218,201,.55);
  border-color:rgba(73,57,39,.13);
  box-shadow:inset 0 1px 0 rgba(255,253,246,.52),0 8px 20px rgba(62,49,23,.045);
}
html[data-theme="light"] .section.has-bg .section-bg img{
  filter:grayscale(.48) sepia(.08) blur(2px) contrast(1.02) brightness(.98);
}

main{ isolation:isolate; }

/* 中文 typography — soft, readable, and tuned separately from the English editorial system. */
html[data-lang="zh"] body{
  font-family:var(--body);
  line-height:1.74;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}
html[data-lang="zh"] h1,
html[data-lang="zh"] h2,
html[data-lang="zh"] h3,
html[data-lang="zh"] h4,
html[data-lang="zh"] h5{
  font-family:var(--display);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.018em;
}
html[data-lang="zh"] p,
html[data-lang="zh"] li{ letter-spacing:.012em; }

/* UI labels should follow the Chinese body face; dates, prices, and numeric readouts stay mono below. */
html[data-lang="zh"] .eyebrow,
html[data-lang="zh"] .role-chip,
html[data-lang="zh"] .btn,
html[data-lang="zh"] .toggle-btn,
html[data-lang="zh"] .nav-toggle,
html[data-lang="zh"] .channel-nav li a,
html[data-lang="zh"] .stats .stat-label,
html[data-lang="zh"] .history-col h4,
html[data-lang="zh"] .filter-chip,
html[data-lang="zh"] .role-filter-label,
html[data-lang="zh"] .role-chip-filter,
html[data-lang="zh"] .work-card .cat,
html[data-lang="zh"] .work-card .hint,
html[data-lang="zh"] .role-tag,
html[data-lang="zh"] .modal-card .cat,
html[data-lang="zh"] .modal-note,
html[data-lang="zh"] .svc-group h3,
html[data-lang="zh"] .showcase-group h5,
html[data-lang="zh"] .bundle-usage,
html[data-lang="zh"] .courses-col h3,
html[data-lang="zh"] .detail-block h4,
html[data-lang="zh"] .sample-group h5,
html[data-lang="zh"] .location-card .status,
html[data-lang="zh"] .location-card .status-note,
html[data-lang="zh"] .location-card .loc-map,
html[data-lang="zh"] .contact-option-btn,
html[data-lang="zh"] .consult-bubble,
html[data-lang="zh"] .announce-kicker,
html[data-lang="zh"] .announce-title,
html[data-lang="zh"] .announce-action,
html[data-lang="zh"] .intro-label,
html[data-lang="zh"] .intro-seg button{
  font-family:var(--body);
  letter-spacing:.02em;
}
html[data-lang="zh"] .eyebrow{ letter-spacing:.08em; }
html[data-lang="zh"] .btn,
html[data-lang="zh"] .toggle-btn,
html[data-lang="zh"] .nav-toggle{ font-weight:500; }

html[data-lang="zh"] .hero h1{ line-height:1.14; letter-spacing:.02em; }
html[data-lang="zh"] .hero .tagline{
  max-width:32ch;
  font-size:clamp(1.05rem, 1.8vw, 1.25rem);
  line-height:1.85;
  letter-spacing:.02em;
}
html[data-lang="zh"] .section-head h2{
  font-size:var(--type-main-title);
  line-height:1.08;
  letter-spacing:.02em;
}
html[data-lang="zh"] .section-head p{
  font-size:var(--type-description);
  line-height:1.78;
  letter-spacing:.018em;
}
html[data-lang="zh"] .about-copy p{
  font-size:clamp(.98rem, 1.15vw, 1.1rem);
  line-height:1.8;
  letter-spacing:.018em;
}
html[data-lang="zh"] .about-copy p.lead{
  font-family:var(--body);
  font-size:var(--type-subtitle);
  font-weight:500;
  line-height:1.52;
  letter-spacing:.02em;
}
html[data-lang="zh"] .stats .stat-label{ line-height:1.55; }
html[data-lang="zh"] .work-card h3{ line-height:1.45; }
html[data-lang="zh"] .work-card .desc-hover{ line-height:1.75; }
html[data-lang="zh"] .svc-row .name{ line-height:1.65; }
html[data-lang="zh"] .svc-row .note{ line-height:1.75; }

@media (max-width:1100px){
  html[data-lang="zh"] .section-head h2{ font-size:clamp(2rem, 5.5vw, var(--type-h2)); }
  html[data-lang="zh"] .about-copy p.lead{ font-size:clamp(1.28rem, 2.75vw, var(--type-h3)); }
}

@media (max-width:720px){
  html[data-lang="zh"] .hero .tagline{
    max-width:31ch;
    font-size:clamp(1rem, 4.2vw, 1.15rem);
    line-height:1.85;
  }
  html[data-lang="zh"] .section-head h2{
    font-size:clamp(1.9rem, 8.6vw, 2.5rem);
    line-height:1.14;
  }
  html[data-lang="zh"] .section-head p{ font-size:.96rem; line-height:1.84; }
  html[data-lang="zh"] .about-copy p{ font-size:1rem; line-height:1.84; }
  html[data-lang="zh"] .about-copy p.lead{
    font-size:clamp(1.08rem, 5vw, 1.28rem);
    line-height:1.78;
    max-width:30ch;
  }
  html[data-lang="zh"] .stats .stat-label{ font-size:.66rem; line-height:1.5; }
}

@media (max-width:420px){
  html[data-lang="zh"] .hero .tagline{ max-width:29ch; font-size:1rem; }
  html[data-lang="zh"] .section-head h2{ font-size:clamp(1.8rem, 8.8vw, 2.35rem); }
  html[data-lang="zh"] .about-copy p.lead{ font-size:1.06rem; line-height:1.8; max-width:30ch; }
  html[data-lang="zh"] .svc-row .name{ font-size:.88rem; }
}

/* Navigation becomes a quiet studio console rather than a flat sidebar. */
.channel-nav{
  background:var(--nav-surface);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:10px 0 50px rgba(0,0,0,.08);
}
.brand-logo{ border-radius:13px 4px 13px 4px; box-shadow:0 8px 24px rgba(0,0,0,.18); }
.channel-nav li a{ position:relative; padding:4px 0; }
.channel-nav li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:1px;
  background:var(--amber);
  transition:width .35s cubic-bezier(.32,.72,0,1);
}
.channel-nav li a:hover::after,
.channel-nav li a.active::after{ width:32px; }

/* Keep the sidebar controls on the same outer axis as the navigation itself.
   The scroll rail intentionally indents the links, but the theme/language
   controls are a two-up utility row and should retain equal left/right air. */
@media (min-width:1101px){
  .toggle-row{
    margin-left:-15px;
    width:calc(100% + 15px);
  }
}

/* The light sidebar is warm ivory; use a quieter translucent control surface
   so the buttons belong to the same palette instead of reading as a separate
   grey block. */
html[data-theme="light"] .toggle-btn{
  background:var(--nav-control);
  border-color:rgba(62,42,30,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
html[data-theme="light"] .toggle-btn:hover{
  background:rgba(243,235,218,.78);
  border-color:rgba(138,80,31,.34);
}

/* Hero: a calmer editorial grid with a stronger focal portrait. */
.hero{
  min-height:min(100svh, 980px);
  padding-top:clamp(108px, 14vh, 160px);
  padding-bottom:clamp(70px, 9vh, 112px);
  background:
    radial-gradient(circle at 7% 74%, rgba(127,168,143,.10), transparent 26%),
    radial-gradient(circle at 76% 22%, rgba(232,163,61,.12), transparent 36%);
}
html[data-theme="light"] .hero{
  background:
    radial-gradient(circle at 7% 74%, rgba(68,104,78,.10), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(138,78,4,.13), transparent 38%),
    var(--ink);
}
.hero-inner{ width:100%; max-width:var(--editorial-max); margin:0 auto; gap:clamp(42px, 8vw, 120px); }
.hero .roles{ gap:7px; margin-bottom:30px; }
.role-chip{ border-color:color-mix(in srgb, var(--amber) 36%, var(--line)); border-radius:999px; padding:6px 13px; background:rgba(232,163,61,.045); }
html[data-theme="light"] .role-chip{
  background:rgba(138,78,4,.055);
  border-color:rgba(138,78,4,.38);
}
/* 英文角色名稱較長：非手機版固定 3+2，避免兩欄 Hero 變成 4+1。 */
@media (min-width:601px){ html[data-lang="en"] .hero .roles .role-break{ display:block; flex-basis:100%; width:100%; height:0; } }
.hero h1{ max-width:760px; }
.hero .tagline{ max-width:38ch; font-size:clamp(1.05rem, 1.75vw, 1.35rem); letter-spacing:-.01em; }
.hero .actions{ margin-top:42px; gap:10px; }
/* Hero CTA links remain in the markup for a later re-enable, but are
   intentionally quiet for this profile-first opening view. */
.hero .actions{ display:none; }
.hero .btn{ border-radius:999px; padding:14px 23px; }
.hero .btn.primary{ box-shadow:0 10px 26px rgba(232,163,61,.16); }
html[data-theme="light"] .hero .btn.primary{ box-shadow:0 10px 26px rgba(138,78,4,.22); }
.hero .btn:hover{ transform:translateY(-2px); }
.hero-portrait{
  max-height:clamp(480px, 70vh, 720px);
  border-radius:28px 8px 128px 8px;
  border-color:color-mix(in srgb, var(--amber) 34%, var(--line));
  box-shadow:22px 26px 0 -16px var(--signal-soft), 0 28px 70px rgba(0,0,0,.18);
  transform:rotate(1deg);
  transition:transform .6s cubic-bezier(.32,.72,0,1), box-shadow .6s ease;
}
html[data-theme="light"] .hero-portrait{
  box-shadow:22px 26px 0 -16px rgba(138,78,4,.20), 0 28px 70px rgba(62,49,23,.18);
}
.hero-portrait:hover{ transform:rotate(0) translateY(-4px); box-shadow:28px 32px 0 -16px var(--signal-soft), 0 34px 78px rgba(0,0,0,.24); }
html[data-theme="light"] .hero-portrait:hover{
  box-shadow:28px 32px 0 -16px rgba(138,78,4,.24), 0 34px 78px rgba(62,49,23,.22);
}
.hero-portrait::before{
  content:"";
  position:absolute;
  z-index:2;
  right:22px;
  top:22px;
  width:56px;
  height:56px;
  border:1px solid rgba(242,239,227,.7);
  border-radius:50%;
  opacity:.75;
  mix-blend-mode:screen;
}
html[data-theme="light"] .hero-portrait::before{
  border-color:rgba(138,78,4,.55);
  mix-blend-mode:normal;
  opacity:.72;
}
.hero-portrait::after{ background:linear-gradient(180deg, transparent 44%, rgba(20,20,15,.86)); }

/* Chapter rhythm: generous spacing and one restrained divider per section. */
.section{ width:100%; max-width:var(--editorial-max); padding-top:clamp(94px, 12vw, 162px); padding-bottom:clamp(94px, 12vw, 162px); }
.section-head{ width:100%; max-width:var(--copy-rail); margin:0 auto 58px; }
.section-head h2{
  /* Keep the editorial presence, but bring the chapter title closer to the
     2.618× step so the description can participate in the hierarchy. */
  font-size:var(--type-main-title);
  line-height:1.08;
  letter-spacing:-.04em;
  gap:0;
}
.section-head p{
  max-width:72ch;
  font-size:var(--type-description);
  line-height:1.78;
}
.section.has-bg .section-bg{ opacity:.12; }
.section.has-bg .section-bg img{ filter:grayscale(.45) blur(4px) contrast(.95); }

/* About becomes a magazine-style two-column spread. */
.about-grid{ width:100%; max-width:var(--content-rail); margin-inline:auto; grid-template-columns:minmax(220px, .62fr) minmax(0, 1.38fr); gap:clamp(42px, 8vw, 120px); }
.portrait-stack{ position:sticky; top:110px; }
.portrait-stack img{ border-radius:22px 5px 22px 5px; box-shadow:0 18px 40px rgba(0,0,0,.16); }
.portrait-stack img + img{ width:82%; align-self:flex-end; margin-top:-22%; border-color:var(--amber); }
.about-copy p.lead{
  font-size:var(--type-subtitle);
  line-height:1.52;
  max-width:30ch;
}
.about-copy p{ max-width:66ch; }
.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:start;
  gap:clamp(20px, 4vw, 64px);
  border-top:1px solid var(--line);
  padding-top:24px;
}
.stats > div{
  min-width:0;
  align-items:center;
  text-align:center;
}
.stats .stat-n,
.stats .stat-label{
  display:block;
  width:100%;
  text-align:center;
}
.stats .stat-label{ max-width:17ch; margin-inline:auto; }
.stats .stat-n{ font-family:var(--numeric-display); font-size:clamp(2.4rem, 4vw, 3.4rem); line-height:1; font-variant-numeric:tabular-nums; }
.milestones-block{ margin-top:88px; padding-top:34px; }

/* Awards use the same rail as About.  The copy itself stays a little
   narrower for comfortable reading, but no longer stops at a fixed 72ch
   while the section keeps expanding on wide desktop screens. */
.awards-track{ width:100%; max-width:var(--content-rail); margin-inline:auto; }
.award-item p{ width:100%; max-width:min(var(--copy-rail), 100%); }

/* Portfolio cards stay quiet and information-first; amber is reserved for actions. */
.filters{ gap:8px; }
.filter-chip{ border-radius:999px; padding:9px 18px; }
.filter-chip.active{ background:var(--amber); border-color:var(--amber); color:#14130e; box-shadow:0 7px 18px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.18); transform:none; }
/* The category filter follows the same contrast hierarchy as the role
   filters: All is a neutral reset, while a specific category carries the
   amber highlight.  In the light theme the paper surface is the stronger
   contrast against the warm background, so All intentionally flips to it. */
html[data-theme="light"] #filterList .filter-chip[data-cat="全部"].active{
  background:var(--paper);
  border-color:var(--paper);
  color:var(--ink);
}
html[data-theme="light"] #filterList .filter-chip[data-cat="全部"]:not(.active){
  background:transparent;
  border-color:var(--line);
  color:var(--paper-dim);
}
html[data-theme="light"] #filterList .filter-chip:not([data-cat="全部"]).active{
  background:var(--amber);
  border-color:var(--amber);
  color:#f7f3e8;
}
.work-search{ border-radius:999px; padding:11px 16px; }
.work-grid{ gap:14px; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); align-items:stretch; }
.work-card{ min-height:246px; }
.work-card:nth-child(1),.work-card:nth-child(2),.work-card:nth-child(3),.work-card:nth-child(4),.work-card:nth-child(5),.work-card:nth-child(6){ grid-column:auto; min-height:246px; }

/* A short decision layer between the hero and the full site. It uses the
   existing glass, amber and asymmetric-radius language, but keeps the copy
   outcome-led so visitors can reach the right form without browsing first. */
.project-paths-section{
  max-width:var(--editorial-max);
  padding-top:clamp(76px,9vw,118px);
  padding-bottom:clamp(86px,10vw,132px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.project-paths-head{ margin-bottom:38px; }
.project-path-grid{
  width:100%;
  max-width:var(--content-rail);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  opacity:0;
  transform:translate3d(clamp(54px,8vw,126px),0,0);
  transition:opacity .82s ease .08s,transform .92s cubic-bezier(.22,.61,.36,1) .08s;
}
.project-paths-section.in .project-path-grid{ opacity:1; transform:none; }
.project-path-card{
  min-height:238px;
  padding:27px 24px 24px;
  border:1px solid var(--line);
  border-radius:20px 5px 20px 5px;
  display:flex;
  flex-direction:column;
  color:var(--paper);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),border-color .3s ease,background .3s ease,box-shadow .3s ease;
  cursor:pointer;
}
.project-path-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--amber) 62%,var(--line));
  box-shadow:0 20px 42px rgba(0,0,0,.14);
}
.project-path-card:focus-visible,
.project-path-unsure:focus-visible,
.service-inquiry-link:focus-visible,
.service-more-works:focus-visible,
.bundle-inquiry-link:focus-visible{
  outline:2px solid color-mix(in srgb,var(--amber) 65%,transparent);
  outline-offset:4px;
}
.path-index{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--amber);
  margin-bottom:32px;
}
.project-path-card h3{
  font-size:clamp(1.12rem,1.55vw,1.35rem);
  line-height:1.32;
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:normal;
  margin-bottom:12px;
}
.project-path-card p{
  color:var(--paper-dim);
  font-size:.88rem;
  line-height:1.75;
}
.path-cta,
.service-inquiry-link,
.bundle-inquiry-link,
.project-path-unsure{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.035em;
}
.path-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:24px;
  color:var(--amber);
}
.path-cta:hover{ color:var(--amber-soft); }
.path-arrow{ display:inline-block; opacity:.64; transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s ease; }
.project-path-card:hover .path-arrow,
.project-path-card:focus-visible .path-arrow{ transform:translateX(5px); opacity:1; }
.project-path-unsure{
  display:flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:10px;
  margin:0;
  color:var(--paper-dim);
  border-bottom:1px solid var(--line);
  padding-bottom:5px;
}
.project-path-unsure{ transition:color .25s ease,border-color .25s ease; }
.project-path-unsure:hover{ color:var(--amber); border-color:var(--amber); }
.project-path-secondary{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px 28px;
  margin:26px auto 0;
}
html[data-theme="light"] .project-path-card{
  background:linear-gradient(145deg,rgba(248,245,237,.78),rgba(221,212,198,.60));
  border-color:rgba(28,25,17,.18);
  box-shadow:0 16px 34px rgba(62,49,23,.10),0 2px 8px rgba(62,49,23,.05);
}

.service-inquiry-link,
.service-more-works,
.bundle-inquiry-link{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:26px;
  min-height:36px;
  padding:8px 13px;
  color:var(--paper-dim);
  border:1px solid var(--action-line);
  border-radius:999px;
  background:var(--action-soft);
  backdrop-filter:blur(10px) saturate(1.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
  cursor:pointer;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
.service-inquiry-link:hover,
.service-more-works:hover,
.bundle-inquiry-link:hover{ color:var(--amber); border-color:color-mix(in srgb,var(--amber) 48%,var(--action-line)); background:var(--action-hover); transform:translateY(-1px); box-shadow:0 7px 17px rgba(0,0,0,.10); }
.service-inquiry-link{ color:color-mix(in srgb,var(--amber) 88%,var(--paper-dim)); border-color:color-mix(in srgb,var(--amber) 34%,var(--action-line)); }
.service-inquiry-link span,
.service-more-works span,
.bundle-inquiry-link span{ transition:transform .22s cubic-bezier(.22,.61,.36,1); }
.service-inquiry-link:hover span,
.service-more-works:hover span,
.bundle-inquiry-link:hover span{ transform:translateX(3px); }
.service-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 26px;
  width:100%;
  margin-top:26px;
}
.service-actions .service-inquiry-link,
.service-actions .service-more-works{ margin-top:0; }
.service-more-works{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:12px;
  margin-top:26px;
  padding:8px 13px;
  border:1px solid var(--action-line);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.035em;
  color:var(--paper-dim);
}
.course-enquiry-wrap{ display:flex; justify-content:flex-start; margin-top:22px; }
.course-enquiry-link,
.course-bundle-inquiry-link{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:36px;
  padding:8px 13px;
  border:1px solid var(--action-line);
  border-radius:999px;
  background:var(--action-soft);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.035em;
  color:var(--paper-dim);
  transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease;
}
.course-enquiry-link:hover,
.course-bundle-inquiry-link:hover{ color:var(--amber); border-color:color-mix(in srgb,var(--amber) 48%,var(--action-line)); background:var(--action-hover); transform:translateY(-1px); }
.course-bundle-inquiry-link{ margin-top:auto; padding-top:6px; }
.price-inquiry-link{ margin-top:18px; }
.bundle-inquiry-link{ margin-top:24px; }

@media (max-width:1120px){
  .project-path-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .project-paths-section{ padding-top:68px; padding-bottom:78px; }
  .project-paths-head{ margin-bottom:28px; }
  .project-path-grid{ grid-template-columns:1fr; gap:12px; }
  .project-path-card{ min-height:0; padding:23px 21px 21px; }
  .project-path-card h3{
    font-size:clamp(1.05rem,5.2vw,1.2rem);
    max-width:22rem;
    text-wrap:balance;
  }
  html[data-lang="en"] .project-path-card h3{ letter-spacing:-.012em; }
  html[data-lang="zh"] .project-path-card p{ white-space:nowrap; font-size:clamp(.76rem,3.45vw,.84rem); letter-spacing:-.01em; }
  .path-index{ margin-bottom:23px; }
  .path-cta{ margin-top:20px; padding-top:0; }
  .project-path-secondary{ flex-direction:column; gap:13px; }
  .project-path-unsure{ line-height:1.6; text-align:center; }
  .service-actions{ gap:8px 20px; }
  .course-enquiry-wrap{ justify-content:flex-start; }
}

/* Services / rates: turn dense lists into clear contrast blocks. */
.showcase-group,.svc-group,.bundle-card,.course-bundle-card,.location-card{ border-radius:20px 5px 20px 5px; box-shadow:0 14px 34px rgba(0,0,0,.10); }
html[data-theme="light"] .showcase-group,
html[data-theme="light"] .svc-group,
html[data-theme="light"] .bundle-card,
html[data-theme="light"] .course-bundle-card{
  border-color:rgba(28,25,17,.16);
  box-shadow:0 14px 34px rgba(62,49,23,.10), 0 2px 7px rgba(62,49,23,.05);
}
.showcase-group{ padding:clamp(22px, 4vw, 38px); }
.showcase-group h5{ font-size:var(--type-h3); letter-spacing:-.015em; margin-bottom:clamp(18px,2vw,24px); }
.showcase-group .showcase-intro{ margin-bottom:clamp(26px,3vw,34px); }
/* Keep every bilingual service title atomic so English phrases move as a
   unit instead of breaking between words on a narrow phone. */
.showcase-group h5 .group-title-en{
  display:inline-block;
  margin-left:.35em;
  white-space:nowrap;
}
/* English price prefixes need a deliberate breath before the currency. Keep
   the Chinese rows unchanged while preventing `fromRM` in narrow price cols. */
html[data-lang="en"] .svc-row .prices .regional-price .price-prefix{
  display:inline-block;
  margin-right:.55rem;
}
.svc-group{ padding:clamp(18px, 3vw, 30px); }
.svc-row{ padding:18px 6px; }
.svc-row + .svc-row{ border-top-color:color-mix(in srgb, var(--line) 70%, var(--amber) 30%); }
.bundle-card{ padding:clamp(24px, 4vw, 36px); }

/* Desktop service chapters keep the reading order explicit: description
   first, then the work samples.  The copy uses the full card rail instead of
   being squeezed into a narrow editorial column; the mobile stack below stays
   unchanged. */
@media (min-width:941px){
  /* A wider desktop should gain breathing room without turning every line of
     copy into a full-width banner.  These guards let flexible children use the
     rail while keeping their own text measure and preventing long bilingual
     labels from forcing neighbouring columns narrower. */
  .section-head,
  .awards-track,
  .service-showcase,
  .courses-grid,
  .svc-groups,
  .bundle-grid,
  .location-grid,
  .section-head > *,
  .courses-col,
  .schedule-row > *{ min-width:0; }
  .section-head h2,
  .section-head p,
  .award-item p,
  .showcase-intro,
  .showcase-suffix,
  .showcase-outro,
  .courses-col > h3,
  .svc-row .name,
  .bundle-card h4,
  .contact-wrap h2{ text-wrap:pretty; }

  #services .section-head p,
  #courses .section-head p{ max-width:78ch; }
  #services .showcase-group{
    display:block;
  }
  #services .showcase-group h5{
    margin-bottom:clamp(18px,2vw,24px);
    max-width:100%;
    text-wrap:balance;
  }
  #services .showcase-intro{
    width:100%;
    max-width:92ch;
    margin:0 0 clamp(26px,3vw,34px);
  }
  #services .showcase-group .sample-list{
    min-width:0;
    width:100%;
    gap:24px;
  }
  #services .showcase-group .sample-item{
    width:100%;
    max-width:min(100%, 1080px);
    min-width:0;
  }
  #services .showcase-group .sample-embed.ratio-ig{ max-width:min(100%, 520px); }
  #services .showcase-suffix,
  #services .showcase-outro{ width:100%; max-width:92ch; }

  /* The lead paragraph has the same right-hand room as the supporting copy;
     the compact 30ch measure is reserved for narrow screens only. */
  .about-copy p.lead,
  html[data-lang="zh"] .about-copy p.lead{
    width:100%;
    max-width:none;
  }

  /* Education uses a slightly wider lesson column and a flexible schedule
     column.  This preserves a clear reading order without leaving a dead
     centre gap on wide desktop screens. */
  #courses .courses-grid{
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
    gap:clamp(36px,5vw,76px);
  }
  #courses .schedule-row{
    display:grid;
    grid-template-columns:minmax(78px,.24fr) minmax(0,1fr);
    gap:22px;
    align-items:start;
  }
  #courses .schedule-row .min{ width:auto; }
}

/* Contact options belong to the same warm accent family as the primary CTA,
   but remain visually secondary through a tinted surface and softer border. */
.contact-option-btn{
  /* Keep the secondary controls in the same warm family without using the
     saturated amber/red edge that made the row compete with the CTA. */
  background:color-mix(in srgb,var(--amber) 3%,var(--action-soft));
  border-color:rgba(210,180,122,.24);
  color:color-mix(in srgb,var(--paper-dim) 92%,var(--amber) 8%);
}
.contact-option-btn:hover{
  background:color-mix(in srgb,var(--amber) 7%,var(--action-hover));
  border-color:rgba(210,180,122,.42);
  color:var(--amber);
  transform:translateY(-1px);
}
.contact-option-btn:focus-visible,
.contact-cta-area > .btn.primary:focus-visible{
  outline:2px solid rgba(210,180,122,.46);
  outline-offset:3px;
}
html[data-theme="light"] .contact-option-btn{
  background:color-mix(in srgb,var(--amber) 5%,#eee8db);
  border-color:rgba(103,89,69,.28);
  color:color-mix(in srgb,var(--paper-dim) 92%,var(--amber) 8%);
}
html[data-theme="light"] .contact-option-btn:hover{
  background:color-mix(in srgb,var(--amber) 9%,#eee8db);
  border-color:rgba(103,89,69,.48);
  color:var(--amber);
}
html[data-theme="light"] .contact-option-btn:focus-visible,
html[data-theme="light"] .contact-cta-area > .btn.primary:focus-visible{
  outline-color:rgba(103,89,69,.52);
}

/* Collapsed pricing keeps the exact same full bundle card treatment as the
   expanded section, but shows only the Music Production card. */
.pricing-featured-preview{ margin:28px 0 12px; }
.bundle-preview-grid{ display:grid; grid-template-columns:minmax(0,1fr); max-width:540px; align-items:stretch; }
.bundle-preview-grid .bundle-card{ width:100%; }

/* Quiet, reusable motion for media and cards. Opacity/translation only keeps
   the music-focused page calm and remains legible on slower devices. */
.motion-reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease var(--motion-delay,0ms), transform .7s cubic-bezier(.22,.61,.36,1) var(--motion-delay,0ms); }
.motion-reveal.is-visible{ opacity:1; transform:none; }

/* Studio / contact close the story with stronger availability signals. */
.location-grid{ gap:16px; }
.location-card{ padding:30px; }
.location-card.loc-open{ box-shadow:0 18px 42px rgba(127,168,143,.15); }
.namecard{ border-radius:26px 6px 26px 6px; }
.contact-section{ background:radial-gradient(circle at 50% 8%, rgba(232,163,61,.12), transparent 38%); }
html[data-theme="light"] .contact-section{ background:radial-gradient(circle at 50% 8%, rgba(138,78,4,.10), transparent 38%); }

/* Closing call-to-action is an H2 in the document hierarchy. Keeping it on
   the same golden-ratio step as the chapter titles avoids a second hero. */
.contact-wrap h2{ font-size:var(--type-h2); line-height:1.18; }
.contact-primary-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.contact-more-btn[aria-expanded="true"]{ border-color:rgba(210,180,122,.42); color:var(--amber); }
@media (max-width:520px){
  .contact-primary-actions{ width:100%; flex-direction:column; }
  .contact-primary-actions .btn{ width:100%; justify-content:center; }
}

/* Motion is expressive by default, but always yields to user preference. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .hero-portrait,.work-card,.location-card,.hero .btn{ transform:none !important; }
}

@media (max-width:1100px){
  .channel-nav,
  .nav-scroll-wrap{ background:var(--nav-surface); }
  html[data-theme="light"] .nav-scroll-wrap{
    background:var(--nav-surface);
    border-color:rgba(62,42,30,.16);
    box-shadow:0 24px 42px rgba(62,42,30,.16);
  }
  .hero{ min-height:auto; padding-top:clamp(108px, 15vw, 150px); }
  .hero-inner{ gap:48px; }
  .hero-portrait{ max-width:620px; margin-inline:auto; }
  .section{ padding-top:clamp(84px, 14vw, 128px); padding-bottom:clamp(84px, 14vw, 128px); }
}

@media (min-width:1101px){
  /* Desktop keeps the familiar two-column first impression, then uses the
     extra scroll stage to let the portrait expand into the next chapter. */
  html,body{ overflow-x:clip; }
  /* Keep the closing CTA on the same centered editorial axis as the wider
     chapter content.  The Chinese line break is intentional after the comma,
     but the second phrase must stay intact on desktop. */
  .contact-wrap{ width:100%; max-width:var(--copy-rail); margin-inline:auto; }
  .contact-wrap h2{ width:min(100%, 48rem); }
  html[data-lang="zh"] .contact-wrap h2 .lang-zh{ white-space:nowrap; }
  .hero{
    isolation:isolate;
    --hero-progress:0;
    --hero-copy-opacity:1;
    --hero-copy-blur:0px;
    --hero-image-opacity:.88;
    --hero-image-blur:0px;
    --hero-image-scale:1.02;
    --hero-image-y:0%;
    --hero-image-left:58%;
    --hero-image-top:12%;
    --hero-image-width:38%;
    --hero-image-height:76%;
    --hero-image-radius:28px 8px 128px 8px;
    height:160svh;
    min-height:160svh;
    display:block;
    padding:0;
    overflow:visible;
  }
  .hero::before,
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
  }
  .hero::before{
    background:radial-gradient(circle at 75% 38%, transparent 0 26%, color-mix(in srgb,var(--ink) 58%,transparent) 92%);
  }
  .hero::after{
    background:linear-gradient(180deg, color-mix(in srgb,var(--ink) 12%,transparent), color-mix(in srgb,var(--ink) 26%,transparent) 72%, color-mix(in srgb,var(--ink) 72%,transparent));
  }
  .hero-inner{
    position:sticky;
    top:0;
    z-index:1;
    display:block;
    width:100%;
    max-width:none;
    min-height:100svh;
    height:100svh;
    overflow:hidden;
  }
  .hero-copy{
    position:absolute;
    left:clamp(46px, 7vw, 108px);
    top:50%;
    z-index:2;
    width:min(52%, 660px);
    max-width:none;
    transform:translateY(-50%);
    opacity:var(--hero-copy-opacity);
    filter:blur(var(--hero-copy-blur));
    transition:none;
  }
  .hero-portrait{
    position:absolute;
    left:var(--hero-image-left);
    top:var(--hero-image-top);
    z-index:1;
    width:var(--hero-image-width);
    height:var(--hero-image-height);
    max-width:none;
    max-height:none;
    margin:0;
    aspect-ratio:auto;
    border-radius:var(--hero-image-radius);
    transform:none;
    transition:none;
    overflow:hidden;
  }
  .hero-portrait:hover{ transform:none; }
  .hero-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 28%;
    opacity:var(--hero-image-opacity);
    filter:blur(var(--hero-image-blur)) grayscale(.12) contrast(1.04);
    transform:translateY(var(--hero-image-y)) scale(var(--hero-image-scale));
    transition:none;
  }
  .hero-portrait::after{ background:linear-gradient(180deg, transparent 42%, rgba(20,20,15,.78)); }
  .hero > .scroll-hint{ top:calc(100svh - 58px); bottom:auto; z-index:2; }
  .hero.hero-scrolled > .scroll-hint{ opacity:0; pointer-events:none; }
}

@media (max-width:720px){
  /* `overflow-x:hidden` on body creates a second scroll container in Safari
     and prevents the pinned hero viewport from sticking to the document. Clip
     preserves the no-horizontal-scroll guarantee without changing scrolling. */
  html,body{ overflow-x:clip; }
  .hero{ padding-top:112px; padding-bottom:70px; }
  .hero-portrait{ border-radius:22px 5px 82px 5px; transform:rotate(0); }
  .section-head{ margin-bottom:42px; }
  .section-head h2{ font-size:clamp(1.9rem,8.6vw,2.5rem); line-height:1.14; gap:0; }
  .contact-wrap h2{ font-size:clamp(1.7rem,7.4vw,2.35rem); line-height:1.2; }
  .showcase-group h5{ font-size:clamp(1.2rem,5.8vw,1.618rem); }
  /* The editorial two-column spread must collapse before the copy gets narrow enough to stack one word per line. */
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .portrait-stack{ position:static; max-width:420px; margin-inline:auto; }
  .portrait-stack img + img{ margin-top:-18%; }
  .about-copy p.lead{ font-size:1.28rem; }
  .stats{ gap:22px 34px; }
  .stats .stat-n{ font-size:2.35rem; }
  /* 統計列後的里程碑在手機不需要桌機級的 88px 留白。 */
  .milestones-block{ margin-top:52px; padding-top:28px; }
  .work-search-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .work-search{ width:100%; max-width:none; min-width:0; }
  .work-grid{ grid-template-columns:1fr; }
  .work-card,.work-card:nth-child(1),.work-card:nth-child(2),.work-card:nth-child(3),.work-card:nth-child(4),.work-card:nth-child(5),.work-card:nth-child(6){ grid-column:auto; min-height:222px; }

  /* On a narrow English layout, let the long chapter title breathe on two
     lines instead of squeezing the price column beside it. */
  /* The bilingual Mixing & Mastering heading reads as two intentional lines
     on a phone: Chinese first, English second. Keep the English phrase intact. */
  html[data-lang="en"] .svc-group h3.svc-title-mixing .lang-en{
    display:block;
    width:auto;
    max-width:none;
    margin-top:.18em;
    line-height:1.16;
    white-space:nowrap;
  }
  /* Bilingual showcase titles use flex rows on phones: the gap belongs between
     items on the same row, never as indentation at the start of a new row. */
  .showcase-group h5{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    column-gap:.35em;
    row-gap:0;
  }
  .showcase-group h5 .group-title-en{
    margin-left:0;
    white-space:nowrap;
  }

  /* Mixing & Mastering is intentionally a second line on phones; the other
     titles remain inline when they fit and move whole when they do not. */
  .showcase-group-mixing h5 .group-title-en{
    display:block;
    flex-basis:100%;
    margin-left:0;
    margin-top:.18em;
  }
  /* Scroll-driven hero stage. The next image is already present behind the
     copy; JS only supplies the current progress values, keeping the handoff
     smooth on narrow phones and avoiding a separate photo card below. */
  .hero{
    isolation:isolate;
    --hero-progress:0;
    --hero-copy-opacity:1;
    --hero-copy-blur:0px;
    --hero-image-opacity:.20;
    --hero-image-blur:15px;
    --hero-image-scale:1.07;
    --hero-image-y:0%;
    height:175svh;
    min-height:175svh;
    display:block;
    padding:0;
    /* Keep the stage itself visible so the sticky viewport can pin correctly;
       the inner viewport clips the portrait to the screen edge. */
    overflow:visible;
  }
  .hero::before,
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
  }
  .hero::before{
    background:radial-gradient(circle at 50% 34%, transparent 0 23%, color-mix(in srgb,var(--ink) 64%,transparent) 86%), linear-gradient(180deg, color-mix(in srgb,var(--ink) 72%,transparent), color-mix(in srgb,var(--ink) 86%,transparent));
  }
  .hero::after{
    background:linear-gradient(180deg, color-mix(in srgb,var(--ink) 24%,transparent), color-mix(in srgb,var(--ink) 68%,transparent) 70%, color-mix(in srgb,var(--ink) 92%,transparent));
  }
  .hero-inner{
    position:sticky;
    top:74px;
    z-index:1;
    display:block;
    min-height:calc(100svh - 74px);
    height:calc(100svh - 74px);
    overflow:hidden;
  }
  .hero-copy{
    position:absolute;
    inset:0;
    /* The fixed header and announcement pill occupy the upper edge of the
       phone viewport. Bias the initial copy down slightly so the first
       details remain visible instead of sitting underneath the chrome. */
    top:12px;
    bottom:-12px;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:34px 22px 48px;
    opacity:var(--hero-copy-opacity);
    filter:blur(var(--hero-copy-blur));
    transition:none;
  }
  .hero-portrait{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    max-width:none;
    height:100%;
    max-height:none;
    margin:0;
    aspect-ratio:auto;
    border:0;
    border-radius:0;
    box-shadow:none;
    transform:none;
    overflow:hidden;
    pointer-events:none;
  }
  .hero-portrait::before{ display:none; }
  .hero-portrait img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 28%;
    opacity:var(--hero-image-opacity);
    filter:blur(var(--hero-image-blur)) grayscale(.12) contrast(1.04);
    transform:translateY(var(--hero-image-y)) scale(var(--hero-image-scale));
    transform-origin:center center;
    transition:none;
  }
  .hero-portrait::after{
    background:linear-gradient(180deg, color-mix(in srgb,var(--ink) 28%,transparent), color-mix(in srgb,var(--ink) 56%,transparent) 70%, color-mix(in srgb,var(--ink) 84%,transparent));
  }
  /* Light mode keeps the portrait recognisable instead of bleaching it into
     the canvas. A soft paper veil remains behind the copy, while the outer
     frame carries more photographic contrast and depth. */
  html[data-theme="light"] .hero::before{
    background:
      radial-gradient(ellipse 72% 56% at 50% 52%, rgba(213,210,199,.34) 0 30%, rgba(213,210,199,.14) 60%, rgba(43,38,32,.10) 100%),
      linear-gradient(180deg, rgba(213,210,199,.20), rgba(213,210,199,.08) 68%, rgba(43,38,32,.16));
  }
  html[data-theme="light"] .hero::after{
    background:linear-gradient(180deg, rgba(213,210,199,.08), rgba(43,38,32,.06) 62%, rgba(43,38,32,.22));
  }
  html[data-theme="light"] .hero-portrait img{
    filter:blur(var(--hero-image-blur)) grayscale(.06) saturate(.90) contrast(1.09);
  }
  html[data-theme="light"] .hero .role-chip{
    background:rgba(232,225,213,.44);
    border-color:rgba(112,64,24,.46);
    color:var(--paper);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  html[data-theme="light"] .hero .tagline{
    color:var(--paper);
  }
  html[data-theme="light"] .hero .tagline,
  html[data-theme="light"] .hero .scroll-hint{
    text-shadow:0 1px 12px rgba(232,225,213,.72);
  }
  .scroll-hint-mobile{
    position:absolute;
    left:50%;
    bottom:calc(100px + env(safe-area-inset-bottom, 0px));
    z-index:3;
    margin:0;
    transform:translateX(-50%);
    white-space:nowrap;
  }
  .hero > .scroll-hint{ z-index:2; }
}

@media (prefers-reduced-motion:reduce){
  .motion-reveal{ opacity:1; transform:none; transition:none; }
  .project-path-grid{ opacity:1; transform:none; transition:none; will-change:auto; }
  .path-arrow{ transition:none; }
  .signature-piece{ animation:none; clip-path:none; opacity:1; filter:none; transform:none; }
  .cinema-overlay{ transition:none; }
  .hero::before,.hero-copy,.hero-portrait img{ transition:none; }
  .hero-copy{ opacity:1 !important; filter:none !important; }
  .hero-portrait img{ opacity:.20 !important; filter:blur(15px) grayscale(.12) contrast(1.04) !important; transform:scale(1.07) !important; }
  html[data-theme="light"] .hero-portrait img{ opacity:.38 !important; filter:blur(9px) grayscale(.06) saturate(.90) contrast(1.09) !important; }
}

@media (max-width:420px){
  .hero .actions{ gap:7px; }
  .hero .actions .btn{ padding-inline:11px; }
  .section-head h2{ font-size:clamp(1.9rem, 8.8vw, 2.35rem); }
  /* 三個關鍵數據在手機維持同一排；標籤在各自欄位內換行，避免第三項掉到下一排。 */
  .stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:20px 14px;
  }
  .stats div{ min-width:0; align-items:center; text-align:center; }
  .stats .stat-n{ font-size:clamp(1.9rem, 8.5vw, 2.35rem); white-space:nowrap; }
  .stats .stat-label{ font-size:.62rem; line-height:1.35; text-align:center; }
}

/* 英文角色名稱在 ≤380px 會自然分行；取消 3+2 的固定斷點，避免變成 2+1+2。 */
@media (max-width:380px){ .hero .roles .role-break{ display:none; } }

/* Narrow tablets use one centered editorial column so text never appears pinned to one side. */
@media (max-width:880px){
  .hero .roles{ justify-content:center; }
  .hero h1{ align-items:center; text-align:center; }
  .hero .tagline{ margin-inline:auto; text-align:center; }
  .hero .actions{ justify-content:center; }
  .about-grid{ grid-template-columns:1fr; gap:44px; }
  .portrait-stack{ position:static; max-width:420px; margin-inline:auto; }
  .about-copy{ width:100%; }
  .section-head p,
  .about-copy p,
  .about-copy p.lead,
  html[data-lang="zh"] .about-copy p.lead{ width:100%; max-width:none; }
}