:root {
  --bg:#eef2ea;
  --paper:#f7f8f0;
  --paper-strong:#ffffff;
  --ink:#172d38;
  --muted:#53676c;
  --line:#b9c5c1;
  --line-soft:#d9e0dc;
  --accent:#8f6d47;
  --accent-soft:#c4a477;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  color:var(--ink);
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  -webkit-font-smoothing:subpixel-antialiased;
  text-rendering:geometricPrecision;
  font-synthesis-weight:none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.9), transparent 28%),
    linear-gradient(180deg, #edf1e8 0%, #f7f7ed 45%, #eef2e8 100%);
  letter-spacing:.015em;
}
img { display:block; width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
.site-header {
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  padding:42px clamp(26px, 8vw, 140px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
}
.brand,
.works-brand,
.team-brand,
.story-brand {
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  font-size:16px;
  line-height:1.35;
  font-weight:950;
  letter-spacing:.04em;
  color:var(--ink);
}
.brand span,
.works-brand span,
.team-brand span,
.story-brand span {
  display:block;
  margin-top:2px;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--muted);
}
.nav,
.works-nav,
.team-nav,
.story-nav {
  display:flex;
  gap:38px;
  align-items:center;
  justify-content:flex-end;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  color:#223841;
}
.nav a,
.works-nav a,
.team-nav a,
.story-nav a {
  position:relative;
  border-bottom:0;
  padding:26px 0 18px;
}
.nav a::after,
.works-nav a::after,
.team-nav a::after,
.story-nav a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s ease;
}
.nav a:hover::after,
.works-nav a:hover::after,
.team-nav a:hover::after,
.story-nav a:hover::after,
.nav a.active::after,
.works-nav a.active::after,
.team-nav a.active::after,
.story-nav a.active::after {
  transform:scaleX(1);
}
.nav a.active::after,
.works-nav a.active::after,
.team-nav a.active::after,
.story-nav a.active::after {
  bottom:8px;
  height:2px;
  background:var(--accent);
}
.hero {
  min-height:820px;
  position:relative;
  overflow:hidden;
}
.hero img {
  width:100%;
  height:820px;
  object-fit:cover;
  object-position:center top;
  filter:saturate(.75) contrast(.86) brightness(1.03);
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:42%;
  background:linear-gradient(180deg, rgba(239,242,231,0), rgba(239,242,231,.96) 74%, #eff2e7);
}
.vertical-note {
  position:absolute;
  left:clamp(36px, 8vw, 145px);
  top:255px;
  writing-mode:vertical-rl;
  letter-spacing:.1em;
  font-size:13px;
  font-weight:900;
}
.intro {
  max-width:980px;
  margin:0 auto;
  padding:76px 24px 72px;
  text-align:center;
}
.intro h1 {
  margin:0;
  font-size:clamp(40px, 4vw, 76px);
  line-height:1.18;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-weight:800;
  letter-spacing:.035em;
}
.intro p {
  margin:26px 0 0;
  font-size:17px;
  font-weight:900;
  letter-spacing:.06em;
}
.intro i,
.divider i {
  display:block;
  width:18px;
  height:1px;
  margin:28px auto 0;
  background:var(--ink);
}
.feature {
  max-width:1240px;
  margin:0 auto;
  padding:0 24px 104px;
}
.feature img {
  max-width:980px;
  margin:auto;
  aspect-ratio:1.72/1;
  object-fit:cover;
}
.section {
  max-width:1240px;
  margin:auto;
  padding:0 24px 128px;
}
.divider {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:22px;
  align-items:center;
  margin-bottom:42px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
}
.divider::before,
.divider::after {
  content:"";
  height:1px;
  background:var(--line);
}
.works-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:44px 30px;
}
.work-thumb img {
  aspect-ratio:1/1.25;
  object-fit:cover;
  filter:saturate(.82) contrast(.92);
}
.work-thumb h3 {
  margin:16px 0 7px;
  font-size:16px;
  font-weight:900;
  letter-spacing:.04em;
}
.work-thumb p {
  margin:0;
  padding-bottom:9px;
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  letter-spacing:.035em;
}
.story {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:84px;
  align-items:start;
}
.section-title {
  margin:0 0 58px;
  font-size:34px;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-weight:900;
  letter-spacing:.05em;
}
.timeline {
  position:relative;
  display:grid;
  gap:90px;
  padding-left:42px;
}
.timeline::before {
  content:"";
  position:absolute;
  left:12px;
  top:16px;
  bottom:16px;
  width:1px;
  background:var(--line);
}
.event {
  position:relative;
  min-height:56px;
}
.event::before {
  content:"";
  position:absolute;
  left:-38px;
  top:9px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--ink);
}
.event strong {
  display:block;
  margin-bottom:8px;
  font-size:18px;
  font-weight:900;
}
.event span {
  color:var(--muted);
  font-weight:900;
  letter-spacing:.02em;
}
.studio img {
  aspect-ratio: .78 / 1;
  object-fit:cover;
}
.team-list {
  margin-top:52px;
  display:grid;
  gap:25px;
}
.team-list h3 {
  margin:0;
  font-size:22px;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-weight:900;
  letter-spacing:.045em;
}
.team-list p {
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.75;
}
.partners {
  text-align:center;
  padding-bottom:96px;
}
.partners h2 {
  margin:0 0 44px;
  font-size:32px;
  font-family:"Noto Serif TC","PMingLiU",serif;
  font-weight:900;
  letter-spacing:.05em;
}
.logo-grid {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:10px;
  opacity:.84;
}
.logo-grid div {
  min-height:82px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.36);
  color:#334c62;
  font-weight:900;
  letter-spacing:.04em;
}
.footer {
  max-width:1240px;
  margin:auto;
  padding:42px 24px 54px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  font-weight:800;
}
.footer p { margin:0 0 12px; }
.footer .phone {
  justify-self:end;
  font-size:24px;
  letter-spacing:.08em;
}
.subfoot {
  grid-column:1 / -1;
  padding-top:34px;
  border-top:1px solid var(--line-soft);
  color:#5b6c73;
  text-align:center;
  font-size:12px;
  font-weight:800;
}
.works-page {
  background:#d9dada;
  color:#1f2f35;
  letter-spacing:.01em;
}
.works-shell {
  max-width:1080px;
  margin:28px auto;
  background:#f8faf8;
  box-shadow:0 22px 70px rgba(30, 45, 48, .12);
  overflow:hidden;
}
.works-header {
  height:76px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:0 42px;
  background:#fff;
  border-bottom:1px solid #e3e7e4;
}
.works-brand {
  font-family:Arial, sans-serif;
  font-weight:900;
  letter-spacing:.02em;
}
.works-nav {
  display:flex;
  gap:42px;
  align-items:center;
  font-size:13px;
  font-weight:900;
}
.works-nav a {
  padding:10px 0;
  border-bottom:2px solid transparent;
}
.works-nav a:hover,
.works-nav a.active {
  border-color:#a67f4d;
}
.works-hero {
  min-height:560px;
  position:relative;
  display:grid;
  align-items:center;
  padding:74px 58px;
  overflow:hidden;
  color:#fff;
}
.works-hero img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.88) contrast(.96) brightness(.86);
}
.works-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(31,35,31,.48), rgba(31,35,31,.12));
}
.works-hero-copy {
  position:relative;
  z-index:1;
}
.works-hero h1 {
  margin:0 0 18px;
  font-size:clamp(42px, 6.2vw, 72px);
  line-height:1.05;
  font-weight:900;
  letter-spacing:.02em;
}
.works-hero p {
  margin:0;
  font-size:20px;
  font-weight:900;
}
.works-tabs {
  display:flex;
  justify-content:center;
  gap:58px;
  padding:27px 34px 22px;
  background:#fff;
  border-bottom:1px solid #eef0ee;
  font-size:15px;
  font-weight:900;
}
.works-tabs button {
  appearance:none;
  border:0;
  background:transparent;
  color:#2b393d;
  font:inherit;
  cursor:pointer;
  padding:0 0 13px;
  border-bottom:3px solid transparent;
}
.works-tabs button.active,
.works-tabs button:hover {
  border-color:#b58a52;
}
.gallery-stage {
  position:relative;
  padding:92px 42px 78px;
  min-height:2220px;
  background:
    linear-gradient(180deg, #f5f7f6, #eef2f0 48%, #f6f8f7);
}
.gallery-stage::before,
.gallery-stage::after {
  content:"";
  position:absolute;
  left:185px;
  right:185px;
  height:1px;
  background:#bd925e;
  transform:rotate(10deg);
  opacity:.68;
}
.gallery-stage::before { top:680px; }
.gallery-stage::after { top:1280px; }
.work-card {
  position:absolute;
  width:286px;
  background:#fff;
  border-radius:8px;
  padding:18px;
  box-shadow:0 12px 32px rgba(35, 47, 50, .1);
  transition:transform .24s ease, box-shadow .24s ease;
}
.work-card:hover {
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(35, 47, 50, .16);
}
.work-card img {
  aspect-ratio:1 / 1.16;
  object-fit:cover;
  border-radius:3px;
}
.work-card h2 {
  margin:18px 0 8px;
  font-size:18px;
  letter-spacing:.02em;
}
.work-card p {
  margin:0 0 14px;
  color:#677275;
  line-height:1.7;
  font-size:12px;
  font-weight:800;
}
.work-card small {
  display:inline-block;
  border:1px solid #d9c6a7;
  border-radius:999px;
  padding:4px 12px;
  color:#9a7445;
  font-weight:900;
  font-size:10px;
  letter-spacing:.08em;
}
.card-1 { left:58px; top:132px; }
.card-2 { left:382px; top:56px; }
.card-3 { right:54px; top:152px; }
.card-4 { left:58px; top:704px; width:430px; }
.card-4 img { aspect-ratio:1.9 / 1; }
.card-5 { right:92px; top:822px; }
.card-6 { left:58px; top:1190px; }
.card-7 { left:356px; top:1360px; }
.card-8 { right:54px; top:1318px; }
.card-9 { left:58px; top:1740px; }
.event-feature {
  margin:0 42px 34px;
  background:#fff;
  box-shadow:0 14px 38px rgba(35, 47, 50, .1);
}
.event-banner {
  position:relative;
  min-height:380px;
  overflow:hidden;
}
.event-banner img {
  height:380px;
  object-fit:cover;
  filter:saturate(.92) contrast(.96);
}
.event-banner::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(20,26,28,.05), rgba(20,26,28,.55));
}
.event-banner h2 {
  position:absolute;
  z-index:1;
  right:96px;
  top:96px;
  margin:0;
  color:#fff;
  font-size:48px;
  line-height:1.18;
  letter-spacing:.02em;
}
.pager {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px;
  padding:0 24px;
  font-weight:900;
}
.pager-center {
  display:flex;
  align-items:center;
  gap:52px;
  font-size:23px;
}
.pager .current {
  color:#b58a52;
}
.record-grid {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:28px;
  margin:0 42px 74px;
}
.record-card {
  background:#fff;
  padding:18px;
  box-shadow:0 12px 32px rgba(35, 47, 50, .08);
}
.record-card img {
  aspect-ratio:1.75 / 1;
  object-fit:cover;
}
.record-card h2 {
  margin:17px 0 8px;
  font-size:18px;
}
.record-card p {
  margin:0;
  color:#687579;
  font-size:12px;
  font-weight:800;
}
.works-footer {
  display:grid;
  grid-template-columns:1fr 1.6fr 1fr;
  gap:40px;
  align-items:center;
  padding:52px 44px;
  background:#f1f3f1;
  border-top:1px solid #dfe5e1;
  font-size:12px;
  font-weight:900;
}
.works-footer-links {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  color:#5f6e73;
}
.socials {
  display:flex;
  justify-content:flex-end;
  gap:18px;
}
.socials span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#233840;
  color:#fff;
  font-size:11px;
}
.team-page {
  background:#eef1e8;
  color:#182b36;
}
.team-shell {
  max-width:1180px;
  margin:0 auto;
  min-height:100vh;
  background:linear-gradient(180deg, #f6f7ed 0%, #f0f3e8 44%, #f6f7ee 100%);
  box-shadow:0 0 0 1px rgba(126, 145, 149, .12);
}
.team-header {
  height:74px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:0 44px;
  border-bottom:1px solid rgba(126, 145, 149, .38);
  background:rgba(247, 248, 239, .82);
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:10;
}
.team-brand {
  font-size:22px;
  font-weight:950;
  letter-spacing:.01em;
  color:#182b36;
}
.team-nav {
  display:flex;
  gap:42px;
  align-items:center;
  font-size:13px;
  font-weight:900;
}
.team-nav a {
  position:relative;
  padding:28px 0;
}
.team-nav a.active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:19px;
  height:2px;
  background:#8f6d47;
}
.team-hero {
  text-align:center;
  padding:104px 60px 72px;
}
.team-hero h1 {
  margin:0 0 28px;
  font-size:54px;
  letter-spacing:.12em;
  font-weight:950;
}
.team-hero p {
  margin:0;
  color:#324b58;
  font-size:18px;
  font-weight:900;
  letter-spacing:.08em;
}
.team-wide-photo {
  width:calc(100% - 96px);
  margin:0 auto;
  overflow:hidden;
  position:relative;
  box-shadow:0 18px 42px rgba(43, 59, 62, .08);
}
.team-wide-photo img {
  aspect-ratio:2.14 / 1;
  object-fit:cover;
  filter:saturate(.9) contrast(.96);
}
.team-caption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  min-height:92px;
  display:flex;
  align-items:center;
  padding:22px 42px;
  color:#fff;
  font-size:13px;
  line-height:1.9;
  font-weight:800;
  background:linear-gradient(90deg, rgba(34,42,43,.36), rgba(255,255,255,.25));
  backdrop-filter:blur(12px);
}
.team-section {
  padding:96px 64px 0;
}
.line-heading {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:36px;
  margin-bottom:54px;
  text-align:center;
}
.line-heading::before,
.line-heading::after {
  content:"";
  height:1px;
  background:#b9c4c1;
}
.line-heading h2 {
  margin:0;
  font-size:28px;
  letter-spacing:.16em;
}
.line-heading span {
  display:block;
  width:46px;
  height:2px;
  margin:22px auto 0;
  background:#9b7a54;
}
.member-grid {
  max-width:860px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:34px 42px;
}
.member-card {
  background:#fff;
  border-radius:4px;
  padding:16px 16px 20px;
  box-shadow:0 14px 34px rgba(43, 59, 62, .08);
}
.member-card img {
  aspect-ratio:.82 / 1;
  object-fit:cover;
  filter:saturate(.9) contrast(1.02);
}
.member-card h3 {
  margin:18px 0 9px;
  font-size:17px;
  letter-spacing:.03em;
}
.member-card p {
  margin:0;
  color:#6f7c7c;
  font-size:12px;
  line-height:1.8;
  font-weight:800;
}
.team-tags,
.skill-buttons {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin:34px auto 0;
}
.team-tags span,
.skill-buttons span {
  min-width:144px;
  border:1px solid #b8c3bf;
  background:rgba(255,255,255,.62);
  border-radius:5px;
  padding:10px 22px;
  text-align:center;
  font-weight:900;
  color:#273d48;
}
.skill-panel {
  margin:34px auto 0;
  max-width:960px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:54px;
  align-items:center;
  padding:54px 20px 62px;
  border-top:1px solid #c7d0cc;
  border-bottom:1px solid #c7d0cc;
}
.skill-mark {
  min-height:190px;
  display:grid;
  place-items:center;
  color:#b6a792;
}
.skill-mark strong {
  width:104px;
  height:104px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid #b6a792;
  font-size:56px;
  font-weight:300;
}
.team-studio-photo {
  width:calc(100% - 96px);
  margin:0 auto;
  overflow:hidden;
}
.team-studio-photo img {
  aspect-ratio:2.08 / 1;
  object-fit:cover;
}
.flow-wrap {
  max-width:840px;
  margin:0 auto;
  min-height:520px;
  position:relative;
}
.flow-line {
  position:absolute;
  inset:42px 112px 70px;
  border:1px solid #c9cfc9;
  border-bottom:0;
}
.flow-card {
  position:absolute;
  width:150px;
  min-height:112px;
  display:grid;
  align-content:center;
  gap:8px;
  padding:24px 22px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(43, 59, 62, .08);
  font-weight:950;
  font-size:20px;
}
.flow-card span {
  color:#9a7445;
  font-size:28px;
  letter-spacing:.06em;
}
.flow-card small {
  color:#293f4a;
  font-size:18px;
}
.flow-1 { left:68px; top:96px; }
.flow-2 { right:68px; top:96px; }
.flow-3 { left:50%; top:230px; transform:translateX(-50%); }
.flow-4 { left:68px; bottom:58px; }
.flow-5 { right:68px; bottom:58px; }
.team-footer {
  margin-top:92px;
  padding:38px 44px 46px;
  border-top:1px solid #bdc8c5;
  display:flex;
  justify-content:center;
  gap:80px;
  flex-wrap:wrap;
  color:#243a45;
  font-weight:900;
  font-size:13px;
}
.story-page {
  background:#e9ede7;
  color:#172b34;
}
.story-shell {
  max-width:1180px;
  margin:0 auto;
  min-height:100vh;
  background:linear-gradient(180deg, #f3f5ef 0%, #fbfbf4 32%, #eef1e9 68%, #f8f8f1 100%);
  box-shadow:0 0 0 1px rgba(126, 145, 149, .12);
}
.story-header {
  height:70px;
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:32px;
  align-items:center;
  padding:0 68px;
  background:rgba(248,249,242,.88);
  border-bottom:1px solid rgba(126,145,149,.24);
  position:sticky;
  top:0;
  z-index:12;
}
.story-brand {
  font-size:21px;
  font-weight:950;
  color:#111f27;
}
.story-nav {
  display:flex;
  gap:38px;
  font-size:12px;
  font-weight:900;
}
.story-nav a.active {
  color:#8b6b49;
}
.story-search {
  width:18px;
  height:18px;
  border:2px solid #22333b;
  border-radius:50%;
  position:relative;
}
.story-search::after {
  content:"";
  width:8px;
  height:2px;
  background:#22333b;
  position:absolute;
  right:-6px;
  bottom:-2px;
  transform:rotate(45deg);
}
.story-visual {
  min-height:1030px;
  display:grid;
  place-items:end center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, #f3f6f1 0 50%, #dde3df 50% 100%);
}
.story-visual::before,
.story-visual::after {
  content:"";
  position:absolute;
  background:rgba(239,244,242,.72);
  border:1px solid rgba(190,202,198,.32);
}
.story-visual::before {
  width:450px;
  height:720px;
  left:145px;
  top:210px;
}
.story-visual::after {
  width:520px;
  height:820px;
  right:148px;
  top:96px;
  backdrop-filter:blur(7px);
}
.story-visual img {
  width:min(620px, 56vw);
  height:820px;
  object-fit:cover;
  object-position:center;
  position:relative;
  z-index:2;
  margin-bottom:0;
  filter:saturate(.88) contrast(.98);
  mix-blend-mode:multiply;
}
.story-title-block {
  text-align:center;
  padding:82px 24px 96px;
  background:#fffdf7;
}
.story-title-block h1 {
  margin:0 0 22px;
  font-size:46px;
  letter-spacing:.04em;
}
.story-title-block p {
  margin:0 0 30px;
  font-weight:950;
  font-size:18px;
  color:#203744;
}
.story-title-block a {
  display:inline-flex;
  border:1px solid #263b45;
  border-radius:999px;
  padding:12px 34px;
  font-size:13px;
  font-weight:900;
}
.story-section {
  padding:106px 74px;
}
.story-section.soft {
  background:linear-gradient(180deg, rgba(230,235,228,.72), rgba(245,246,239,.82));
}
.story-section h2 {
  text-align:center;
  margin:0;
  font-size:34px;
  letter-spacing:.08em;
}
.story-section .eyebrow {
  text-align:center;
  margin:10px 0 54px;
  font-size:10px;
  color:#9ba6a5;
  letter-spacing:.18em;
  font-weight:900;
}
.value-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:32px;
  max-width:900px;
  margin:0 auto;
}
.value-card {
  background:rgba(255,255,255,.74);
  padding:34px 30px;
  box-shadow:0 16px 40px rgba(37,50,54,.06);
}
.value-card small {
  display:block;
  color:#bdc4c0;
  letter-spacing:.14em;
  font-weight:950;
  font-size:9px;
  margin-bottom:26px;
}
.value-card h3 {
  margin:0 0 26px;
  font-size:22px;
}
.value-card img {
  aspect-ratio:1.45/1;
  object-fit:cover;
  margin-bottom:22px;
}
.value-card p {
  margin:0;
  color:#687579;
  line-height:1.9;
  font-weight:800;
  font-size:13px;
}
.selected-grid {
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}
.selected-card {
  position:relative;
  overflow:hidden;
  min-height:310px;
}
.selected-card img {
  height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(.96);
}
.selected-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 44%, rgba(8,20,24,.46));
}
.selected-card h3 {
  position:absolute;
  z-index:1;
  left:26px;
  bottom:24px;
  margin:0;
  color:#fff;
  font-size:24px;
  letter-spacing:.04em;
}
.client-row {
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.client-row div {
  min-height:88px;
  display:grid;
  place-items:center;
  border:1px solid #d8ded9;
  background:rgba(255,255,255,.42);
  color:#667271;
  font-weight:950;
  font-size:19px;
}
.news-panel {
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:46px;
  padding:42px;
  background:#f1efe4;
}
.news-images {
  display:grid;
  gap:18px;
}
.news-images img {
  aspect-ratio:1.82/1;
  object-fit:cover;
}
.news-copy {
  display:grid;
  align-content:center;
  gap:28px;
  color:#4d5b5d;
  line-height:1.9;
  font-weight:800;
}
.news-copy h3 {
  margin:0 0 8px;
  color:#223741;
  font-size:20px;
}
.story-contact {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:80px;
  padding:78px 74px 62px;
  background:#efeee4;
  border-top:1px solid #d8ded7;
}
.story-contact h2 {
  margin:0 0 42px;
  font-size:24px;
}
.story-contact p {
  margin:0 0 14px;
  line-height:1.8;
  font-weight:850;
  color:#4d5b5d;
}
.story-form {
  display:grid;
  gap:10px;
}
.story-form input,
.story-form textarea {
  width:100%;
  border:1px solid #c1c8c2;
  background:#fbfaf2;
  padding:12px 16px;
  color:#20343e;
  font:inherit;
  font-weight:850;
}
.story-form textarea {
  min-height:108px;
  resize:vertical;
}
.story-form button {
  justify-self:start;
  border:1px solid #20343e;
  background:transparent;
  padding:11px 28px;
  border-radius:999px;
  font-weight:950;
}
.page-hero {
  padding:104px 74px 72px;
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:68px;
  align-items:center;
  background:linear-gradient(180deg, #f8f9f1, #edf2ec);
}
.page-hero-copy small {
  display:block;
  margin-bottom:24px;
  color:var(--accent);
  font-size:12px;
  font-weight:950;
  letter-spacing:.18em;
}
.page-hero-copy h1 {
  margin:0;
  font-size:clamp(42px, 5.2vw, 72px);
  line-height:1.18;
  letter-spacing:.05em;
}
.page-hero-copy p {
  margin:28px 0 0;
  max-width:560px;
  color:var(--muted);
  font-size:16px;
  line-height:2;
  font-weight:850;
}
.page-hero img {
  aspect-ratio:1.28/1;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 24px 60px rgba(30,45,50,.13);
  filter:saturate(.86) contrast(.94);
}
.service-grid,
.contact-grid {
  max-width:940px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:28px;
}
.service-card,
.contact-card,
.package-card {
  background:rgba(255,255,255,.74);
  border:1px solid var(--line-soft);
  padding:34px 30px;
  box-shadow:0 16px 42px rgba(28,45,52,.07);
}
.service-card small,
.package-card small {
  color:var(--accent);
  font-size:12px;
  font-weight:950;
  letter-spacing:.14em;
}
.service-card h3,
.contact-card h3,
.package-card h3 {
  margin:20px 0 16px;
  font-size:22px;
  letter-spacing:.04em;
}
.service-card img {
  margin:0 0 24px;
  aspect-ratio:1.25/1;
  object-fit:cover;
  filter:saturate(.86) contrast(.94);
}
.service-card p,
.contact-card p,
.package-card p {
  margin:0;
  color:var(--muted);
  line-height:1.9;
  font-size:13px;
  font-weight:800;
}
.package-list {
  max-width:940px;
  margin:0 auto;
  display:grid;
  gap:18px;
}
.package-card {
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:30px;
  align-items:center;
}
.package-card a,
.contact-cta {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  border:1px solid var(--accent);
  border-radius:999px;
  padding:12px 26px;
  color:var(--ink);
  font-size:13px;
  font-weight:950;
  white-space:nowrap;
}
.process-grid {
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}
.process-step {
  min-height:132px;
  display:grid;
  align-content:center;
  gap:12px;
  padding:24px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.54);
}
.process-step span {
  color:var(--accent);
  font-size:20px;
  font-weight:950;
}
.process-step strong {
  font-size:18px;
}
.contact-panel {
  max-width:940px;
  margin:0 auto;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:48px;
  align-items:start;
}
.contact-info {
  display:grid;
  gap:18px;
}
.contact-card {
  min-height:150px;
}
.contact-form {
  display:grid;
  gap:12px;
  padding:34px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--line-soft);
  box-shadow:0 16px 42px rgba(28,45,52,.07);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width:100%;
  border:1px solid #cbd3ce;
  background:#fbfcf5;
  padding:14px 16px;
  color:var(--ink);
  font:inherit;
  font-weight:850;
}
.contact-form textarea {
  min-height:130px;
  resize:vertical;
}
.contact-form button {
  justify-self:start;
  border:0;
  background:var(--ink);
  color:#fff;
  border-radius:999px;
  padding:13px 30px;
  font-weight:950;
}
.map-card {
  max-width:940px;
  min-height:300px;
  margin:0 auto;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(223,231,225,.72)),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(128,146,144,.12) 45px 46px),
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(128,146,144,.12) 45px 46px);
  border:1px solid var(--line-soft);
  color:var(--muted);
  font-weight:900;
  line-height:2;
}
.story-copyright {
  padding:24px 74px 52px;
  color:#9aa5a1;
  font-size:11px;
  font-weight:800;
  background:#efeee4;
}
/* Unified Work03 visual system */
.works-page,
.team-page,
.story-page {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.82), transparent 34%),
    linear-gradient(180deg, #e8ede7 0%, #f4f6ef 48%, #e9eee8 100%);
  color:var(--ink);
  letter-spacing:.015em;
}
.works-shell,
.team-shell,
.story-shell {
  width:100%;
  max-width:none;
  margin:0;
  background:linear-gradient(180deg, #f8f9f1 0%, #eef3ed 48%, #f8f9f1 100%);
  box-shadow:none;
}
.site-header,
.works-header,
.team-header,
.story-header {
  height:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:0;
  padding:34px clamp(26px, 7vw, 120px);
  border-bottom:0;
  background:transparent;
  backdrop-filter:none;
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:30;
}
.story-header {
  grid-template-columns:1fr auto 1fr;
}
.brand,
.works-brand,
.team-brand,
.story-brand {
  font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  font-size:16px;
  line-height:1.12;
  font-weight:950;
  letter-spacing:.04em;
  color:var(--ink);
}
.brand span,
.works-brand span,
.team-brand span,
.story-brand span {
  display:block;
  margin-top:2px;
  font-size:10px;
  line-height:1.18;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--muted);
}
.works-nav,
.team-nav,
.story-nav {
  gap:38px;
  font-size:13px;
  letter-spacing:.04em;
  justify-content:center;
}
.works-nav a,
.team-nav a,
.story-nav a {
  padding:25px 0 18px;
  border-bottom:0 !important;
}
.works-nav a.active,
.team-nav a.active,
.story-nav a.active {
  color:var(--ink);
}
.works-nav a:hover,
.works-nav a.active,
.team-nav a:hover,
.team-nav a.active,
.story-nav a:hover,
.story-nav a.active {
  border-color:transparent !important;
}
.nav a.active::after,
.works-nav a.active::after,
.team-nav a.active::after,
.story-nav a.active::after {
  bottom:8px;
  height:2px;
  background:var(--accent);
}
.nav {
  gap:38px;
}
.nav a {
  padding:25px 0 18px;
}
.works-footer,
.team-footer,
.story-contact,
.story-copyright,
.footer {
  border-color:var(--line-soft);
  background:rgba(242, 244, 237, .78);
}
.work-card,
.member-card,
.value-card,
.record-card,
.flow-card {
  box-shadow:0 16px 42px rgba(28, 45, 52, .08);
}
.line-heading h2,
.story-section h2,
.partners h2,
.section-title,
.intro h1,
.works-hero h1,
.team-hero h1,
.story-title-block h1,
.page-hero-copy h1 {
  color:var(--ink);
}
.works-hero h1,
.team-hero h1,
.story-title-block h1,
.page-hero-copy h1 {
  font-size:clamp(38px, 4.2vw, 52px);
  line-height:1.18;
  letter-spacing:.06em;
  font-weight:900;
}
@media (max-width: 1000px) {
  .site-header { grid-template-columns:1fr; gap:22px; position:absolute; }
  .nav { gap:26px; flex-wrap:wrap; }
  .hero, .hero img { min-height:640px; height:640px; }
  .works-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns:1fr; }
  .studio img { aspect-ratio:1.2/1; }
  .logo-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .works-shell { margin:0; max-width:none; }
  .works-header { grid-template-columns:1fr; height:auto; gap:18px; padding:24px; }
  .works-nav, .works-tabs { gap:22px; flex-wrap:wrap; justify-content:flex-start; }
  .gallery-stage { min-height:0; padding:44px 22px; display:grid; gap:24px; }
  .gallery-stage::before, .gallery-stage::after { display:none; }
  .work-card, .card-1, .card-2, .card-3, .card-4, .card-5, .card-6, .card-7, .card-8, .card-9 {
    position:relative;
    inset:auto;
    width:100%;
  }
  .event-feature, .record-grid { margin-left:22px; margin-right:22px; }
  .record-grid, .works-footer { grid-template-columns:1fr; }
  .event-banner h2 { left:34px; right:34px; top:70px; font-size:38px; }
  .socials { justify-content:flex-start; }
  .team-shell { margin:0; max-width:none; }
  .team-header { grid-template-columns:1fr; height:auto; gap:18px; padding:24px; }
  .team-nav { gap:24px; flex-wrap:wrap; }
  .team-hero { padding:86px 32px 58px; }
  .team-hero h1 { font-size:44px; }
  .team-wide-photo, .team-studio-photo { width:calc(100% - 44px); }
  .member-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:680px; }
  .skill-panel { grid-template-columns:1fr; gap:20px; }
  .flow-wrap { min-height:0; display:grid; gap:24px; }
  .flow-line { display:none; }
  .flow-card, .flow-1, .flow-2, .flow-3, .flow-4, .flow-5 {
    position:relative;
    inset:auto;
    width:auto;
    transform:none;
  }
  .story-shell { max-width:none; margin:0; }
  .story-header { grid-template-columns:1fr; height:auto; padding:24px; gap:18px; }
  .story-nav { gap:24px; flex-wrap:wrap; }
  .story-search { display:none; }
  .story-visual { min-height:720px; }
  .story-visual::before { left:40px; width:360px; height:540px; }
  .story-visual::after { right:40px; width:360px; height:600px; }
  .story-visual img { width:min(540px, 72vw); height:640px; }
  .value-grid { grid-template-columns:1fr; max-width:620px; }
  .story-section { padding-left:34px; padding-right:34px; }
  .news-panel, .story-contact { grid-template-columns:1fr; gap:36px; }
  .page-hero { grid-template-columns:1fr; padding:82px 34px 58px; gap:42px; }
  .service-grid, .contact-grid { grid-template-columns:1fr; max-width:620px; }
  .package-card { grid-template-columns:1fr; gap:18px; }
  .process-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .contact-panel { grid-template-columns:1fr; }
  .works-hero h1,
  .team-hero h1,
  .story-title-block h1,
  .page-hero-copy h1 {
    font-size:42px;
    line-height:1.22;
  }
}
@media (max-width: 620px) {
  .site-header { padding:24px 22px; }
  .brand,
  .works-brand,
  .team-brand,
  .story-brand { font-size:15px; line-height:1.12; }
  .brand span,
  .works-brand span,
  .team-brand span,
  .story-brand span { font-size:10px; letter-spacing:.18em; }
  .nav { gap:18px; font-size:12px; }
  .vertical-note { display:none; }
  .hero, .hero img { min-height:560px; height:560px; }
  .intro { padding-top:50px; }
  .intro h1 { font-size:34px; }
  .intro p { font-size:13px; letter-spacing:.035em; }
  .works-grid, .logo-grid, .footer { grid-template-columns:1fr; }
  .section { padding-bottom:92px; }
  .story { gap:52px; }
  .timeline { gap:56px; }
  .footer .phone { justify-self:start; }
  .works-hero { min-height:430px; padding:54px 24px; }
  .works-hero h1 { font-size:42px; }
  .works-hero p { font-size:15px; }
  .event-banner, .event-banner img { min-height:290px; height:290px; }
  .pager { padding:0 12px; font-size:12px; }
  .pager-center { gap:24px; font-size:18px; }
  .team-header { padding:24px 22px; }
  .team-nav { gap:18px; font-size:12px; }
  .team-hero { padding:66px 22px 44px; }
  .team-hero h1 { font-size:34px; letter-spacing:.08em; }
  .team-hero p { font-size:14px; line-height:1.8; }
  .team-caption { position:relative; color:#273d48; background:rgba(255,255,255,.72); padding:18px 22px; }
  .team-section { padding:76px 22px 0; }
  .line-heading { grid-template-columns:1fr; gap:16px; }
  .line-heading::before, .line-heading::after { display:none; }
  .member-grid { grid-template-columns:1fr; gap:24px; }
  .team-tags span, .skill-buttons span { min-width:0; width:100%; }
  .team-footer { gap:18px; align-items:flex-start; flex-direction:column; padding-left:22px; padding-right:22px; }
  .story-header { padding:24px 22px; }
  .story-nav { gap:18px; font-size:12px; }
  .story-visual { min-height:560px; place-items:center; }
  .story-visual::before { width:250px; height:360px; left:18px; top:110px; }
  .story-visual::after { width:250px; height:410px; right:18px; top:70px; }
  .story-visual img { width:78vw; height:460px; }
  .story-title-block { padding:58px 22px 68px; }
  .story-title-block h1 { font-size:31px; line-height:1.4; }
  .story-title-block p { font-size:14px; line-height:1.8; }
  .story-section { padding:76px 22px; }
  .story-section h2 { font-size:28px; }
  .selected-grid, .client-row { grid-template-columns:1fr; }
  .selected-card { min-height:245px; }
  .news-panel { padding:24px; }
  .story-contact { padding:58px 22px 42px; }
  .story-copyright { padding-left:22px; padding-right:22px; }
  .page-hero { padding:68px 22px 46px; }
  .page-hero-copy h1 { font-size:34px; }
  .page-hero-copy p { font-size:14px; }
  .process-grid { grid-template-columns:1fr; }
  .contact-form { padding:22px; }
  .works-hero h1,
  .team-hero h1,
  .story-title-block h1,
  .page-hero-copy h1 {
    font-size:32px;
    line-height:1.35;
    letter-spacing:.04em;
  }
}