:root {
  --bg: #061015;
  --surface: #0d1719;
  --surface-2: #111d19;
  --line: rgba(218, 255, 145, 0.16);
  --line-soft: rgba(255, 255, 255, 0.1);
  --ink: #edf5df;
  --muted: #aab3a2;
  --quiet: #71796e;
  --lime: #d4ff5f;
  --lime-deep: #8fb61e;
  --cyan: #80d6cc;
  --orange: #ff8c52;
  --page-width: 1220px;
  --radius: 24px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    linear-gradient(115deg, rgba(10, 33, 44, .92) 0%, rgba(5, 15, 20, .98) 46%, rgba(6, 20, 14, .98) 100%),
    radial-gradient(circle at 18% 16%, rgba(51, 132, 160, 0.18), transparent 42rem),
    radial-gradient(circle at 88% 18%, rgba(128, 182, 58, 0.15), transparent 46rem),
    radial-gradient(circle at 54% 72%, rgba(53, 111, 102, 0.1), transparent 44rem),
    #061015;
  color: var(--ink);
  font-family: "Manrope", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img, video { display: block; max-width: 100%; }

.page-glow {
  position: fixed;
  z-index: -1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(212,255,95,.11), transparent 68%);
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
}
body.is-pointer-active .page-glow { opacity: 1; }

.site-header {
  position: fixed;
  z-index: 50;
  top: 36px;
  left: 50%;
  width: min(calc(100% - 64px), 1320px);
  min-height: 66px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  transform: translateX(-50%);
  border: 1px solid rgba(237,245,223,.2);
  border-radius: 999px;
  background: rgba(8, 19, 24, .76);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
}
.brand-mark, .header-contact { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; font-weight: 700; }
.brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.site-nav { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { padding: 12px 25px; color: rgba(237,245,223,.62); font-size: 13px; transition: color .25s ease, background .25s ease, box-shadow .25s ease; }
.site-nav a:hover, .site-nav a.is-active { color: #11180c; background: var(--lime); border-radius: 999px; box-shadow: 0 0 24px rgba(212,255,95,.26); }
.header-contact { padding: 10px 15px; border: 1px solid rgba(237,245,223,.2); border-radius: 999px; color: var(--ink); }
.header-contact span { font-size: 16px; }

.section-pad { width: min(100% - 48px, var(--page-width)); margin: 0 auto; padding: 160px 0; }
.experience-section, .portfolio-section, .motion-section, .advantages-section, .contact-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
.hero {
  position: relative;
  min-height: 1530px;
  padding: 184px max(32px, calc((100vw - 1320px) / 2)) 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 69% 28%, rgba(156,255,21,.28), transparent 18%),
    radial-gradient(circle at 71% 31%, rgba(126,189,56,.15), transparent 38%),
    linear-gradient(180deg, rgba(6,18,24,0) 0%, rgba(6,18,24,.08) 64%, rgba(6,16,21,.94) 100%),
    linear-gradient(111deg, #0a1f2a 0%, #07151d 52%, #07170f 100%);
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: linear-gradient(to bottom, black 10%, transparent 74%);
  opacity: .48;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12%;
  left: -12%;
  width: 62vw;
  height: 58vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81,166,191,.13), transparent 68%);
  filter: blur(10px);
}
.hero > * { position: relative; z-index: 1; }
.hero::selection { background: rgba(212,255,95,.28); }
.hero-grid { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(520px, .92fr) minmax(620px, 1.08fr); align-items: center; gap: clamp(76px, 8vw, 172px); max-width: 1740px; margin: 0 auto; }
.hero-copy { max-width: 900px; padding-bottom: 320px; }
.eyebrow, .section-kicker, .advantage-index, .company-meta, .contact-line span, .hero-frame-label, .hero-frame-index, .section-foot, .contact-footer {
  font-family: "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow, .section-kicker { margin: 0 0 24px; color: var(--lime); font-size: 11px; }
.hero-title { margin: 0; font-size: clamp(78px, 6.5vw, 138px); line-height: .88; letter-spacing: -.08em; font-weight: 800; }
.hero-name { display: block; }
.hero-name { color: var(--lime); text-shadow: 0 0 35px rgba(178,255,17,.16); white-space: nowrap; }
.hero-wordmark { display: block; margin-top: 12px; color: var(--ink); font-size: .38em; line-height: 1; letter-spacing: .035em; font-weight: 500; }
.hero-identity { position: relative; max-width: 760px; margin-top: 46px; padding: 0; border-left: 0; background: transparent; }
.hero-identity::before { display: none; }
.hero-role { margin: 0; color: var(--lime); font-size: clamp(38px, 3.1vw, 62px); font-weight: 800; line-height: 1.05; letter-spacing: -.065em; text-shadow: 0 0 26px rgba(212,255,95,.16); }
.hero-summary { max-width: 680px; margin: 24px 0 0; color: rgba(237,245,223,.74); font-size: clamp(18px, 1.25vw, 24px); line-height: 1.72; }
.hero-actions { display: flex; gap: 12px; margin-top: 40px; }
.button { min-height: 58px; display: inline-flex; align-items: center; gap: 14px; padding: 0 28px; border: 1px solid var(--line); border-radius: 999px; font-size: 16px; font-weight: 700; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); border-color: rgba(212,255,95,.5); }
.button-primary { color: #10130a; background: var(--lime); border-color: var(--lime); box-shadow: 0 0 28px rgba(212,255,95,.18); }
.button-quiet { color: var(--ink); border-color: rgba(237,245,223,.23); background: rgba(255,255,255,.035); }
.hero-notes { display: flex; flex-wrap: wrap; gap: 14px; max-width: 760px; margin-top: 36px; font-size: 15px; }
.hero-notes p { min-width: 0; margin: 0; padding: 18px 28px; border: 1px solid rgba(212,255,95,.34); border-radius: 999px; color: #10160d; line-height: 1.35; background: linear-gradient(135deg, var(--lime), #e7ff76); box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 0 26px rgba(212,255,95,.12); transform: rotate(-.8deg); }
.hero-notes p + p { color: #1d2817; background: linear-gradient(135deg, #eef8dc, #d9f46a); transform: rotate(.7deg); }
.hero-basic-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; max-width: 920px; margin: 38px 0 0; padding: 0; }
.hero-basic-info div { min-width: 0; padding: 13px 0 14px; border-top: 1px solid rgba(237,245,223,.14); }
.hero-basic-info dt { margin: 0 0 7px; color: rgba(212,255,95,.72); font: 10px "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.hero-basic-info dd { margin: 0; overflow-wrap: anywhere; color: rgba(237,245,223,.82); font-size: 14px; line-height: 1.45; }
.hero-visual { --hero-shift-x: clamp(0px, 1.6vw, 42px); --hero-shift-y: clamp(-18px, -1.2vw, -10px); --hero-tilt-x: 0px; --hero-tilt-y: 0px; position: relative; min-height: 560px; display: grid; justify-items: center; align-items: center; translate: calc(var(--hero-shift-x) + var(--hero-tilt-x)) calc(var(--hero-shift-y) + var(--hero-tilt-y)); }
.portrait-stage { position: relative; z-index: 4; width: clamp(420px, 31vw, 560px); aspect-ratio: 1; display: grid; place-items: center; }
.portrait-stage::before { content: ""; position: absolute; inset: -3.4%; border: 1px solid rgba(237,245,223,.12); border-radius: 50%; transform: scale(.96); animation: portrait-ring-in 1.05s cubic-bezier(.2,.8,.2,1) .28s both, portrait-breathe 4.8s ease-in-out 1.5s infinite; pointer-events: none; }
.hero-frame { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; overflow: hidden; padding: 8px; border: 3px solid rgba(237,245,223,.2); border-radius: 50%; background: #78a773; box-shadow: 0 0 0 8px rgba(111,140,122,.14), 0 28px 58px rgba(0,0,0,.28); opacity: 1; animation: portrait-in .95s cubic-bezier(.2,.8,.2,1) .12s both; transition: transform .35s ease, box-shadow .35s ease; }
.hero-visual:hover .hero-frame { transform: scale(1.008); box-shadow: 0 0 0 8px rgba(212,255,95,.14), 0 30px 64px rgba(0,0,0,.32); }
.hero-frame::after { display: none; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: 50%; filter: contrast(1.02) saturate(.98); background: #78a773; }
.hero-frame-label, .hero-frame-index { position: absolute; z-index: 1; color: rgba(237,245,223,.8); font-size: 9px; }
.hero-frame-label { top: 38px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.hero-frame-index { display: none; right: 50%; bottom: 37px; transform: translateX(50%); white-space: nowrap; }
.portrait-halo { display: none; position: absolute; border: 1px solid rgba(212,255,95,.18); border-radius: 50%; }
.halo-a { inset: 3%; animation: halo-spin 22s linear infinite; border-style: dashed; }
.halo-b { inset: -9%; border-color: rgba(128,214,204,.18); animation: halo-spin 34s linear infinite reverse; }
.hero-orbit { display: none; position: absolute; z-index: 3; place-items: center; width: 110px; height: 110px; padding: 14px; border: 1px solid rgba(212,255,95,.25); border-radius: 50%; color: var(--lime); font-family: "DM Mono", monospace; font-size: 10px; line-height: 1.6; text-align: center; text-transform: uppercase; background: rgba(7,17,22,.86); backdrop-filter: blur(10px); animation: float 4.8s ease-in-out infinite; }
.orbit-one { top: 9%; right: -1%; }
.orbit-two { bottom: 14%; left: -2%; color: var(--cyan); border-color: rgba(128,214,204,.3); animation-delay: -1.8s; }
.hero-now-card { display: none; position: absolute; z-index: 4; right: clamp(12px, 4vw, 78px); bottom: 14%; min-width: 232px; padding: 24px 26px; border: 1px solid rgba(237,245,223,.22); border-radius: 22px; background: linear-gradient(90deg, rgba(31,58,48,.86), rgba(5,13,17,.72)); box-shadow: 0 20px 36px rgba(0,0,0,.24); backdrop-filter: blur(16px); animation: float-card-in .9s cubic-bezier(.2,.8,.2,1) .55s both; }
.hero-now-card strong, .hero-now-card span { display: block; }
.hero-now-card strong { color: var(--lime); font-size: 25px; line-height: 1; }
.hero-now-card span { margin-top: 9px; color: rgba(237,245,223,.75); font-size: 12px; }
.hero-visual-note { position: absolute; right: -2%; bottom: 36%; color: rgba(237,245,223,.35); font-size: 10px; letter-spacing: .12em; writing-mode: vertical-rl; }
.hero-watermark { position: absolute; z-index: -1; right: -2%; bottom: 220px; color: transparent; font-size: clamp(130px, 19vw, 310px); line-height: .8; font-weight: 800; letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(237,245,223,.08); white-space: nowrap; user-select: none; }
.hero-deck { position: absolute; z-index: 2; right: 0; bottom: 86px; left: 0; display: flex; align-items: end; gap: clamp(14px, 1.7vw, 24px); width: max-content; padding: 0 6vw 24px; transform: translateX(var(--deck-offset, 0)); will-change: transform; }
.hero-deck-card { width: clamp(126px, 9.2vw, 176px); aspect-ratio: .63; overflow: hidden; border: 1px solid rgba(237,245,223,.22); border-radius: 20px; background: #10212a; box-shadow: 0 20px 34px rgba(0,0,0,.24); transform: translateY(var(--card-y, 0px)) rotate(var(--card-tilt)); animation: deck-card-in .72s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--card-index) * 65ms + .42s); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; cursor: zoom-in; }
.hero-deck-card:hover { z-index: 2; border-color: var(--lime); box-shadow: 0 24px 42px rgba(0,0,0,.28), 0 0 28px rgba(212,255,95,.12); transform: translateY(-24px) rotate(0deg) scale(1.04); }
.hero-deck-card img { width: 100%; height: 100%; object-fit: contain; background: #0d171c; }
.hero-deck-meta { position: absolute; z-index: 4; right: max(32px, calc((100vw - 1320px) / 2)); bottom: 36px; left: max(32px, calc((100vw - 1320px) / 2)); display: flex; justify-content: space-between; color: rgba(237,245,223,.42); font: 10px "DM Mono", monospace; letter-spacing: .12em; pointer-events: none; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 62px; }
.section-head h2 { margin: 0; font-size: clamp(46px, 7vw, 92px); line-height: .9; letter-spacing: -.08em; font-weight: 700; }
.section-head h2 span { color: var(--lime); }
.section-subtitle { max-width: 360px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.experience-section { --page-width: min(1560px, calc(100vw - 72px)); position: relative; overflow: hidden; border-top: 1px solid rgba(237,245,223,.08); background: transparent; }
.experience-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 26%, rgba(212,255,95,.055), transparent 24rem),
    radial-gradient(circle at 86% 58%, rgba(212,255,95,.035), transparent 26rem);
  opacity: .68;
}
.experience-section.section-pad { padding: 82px 0; }
.experience-section .section-head { display: block; max-width: 580px; margin-bottom: clamp(32px, 4vw, 52px); }
.experience-section .section-head h2 { font-size: clamp(42px, 5.2vw, 74px); letter-spacing: -.07em; }
.experience-section .section-subtitle { max-width: none; margin-top: 14px; font-size: 13px; }
.timeline { --timeline-date-col: clamp(360px, 32vw, 520px); --timeline-node-col: 76px; position: relative; display: grid; justify-content: center; gap: clamp(22px, 2.8vw, 34px); max-width: min(1480px, 100%); margin: 0 auto; padding: 12px 0 36px; }
.timeline::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(var(--timeline-date-col) + var(--timeline-node-col) / 2); width: 3px; border-radius: 999px; background: linear-gradient(rgba(212,255,95,.72), rgba(212,255,95,.5), rgba(212,255,95,.18)); box-shadow: 0 0 18px rgba(212,255,95,.16); transform: translateX(-50%) scaleY(0); transform-origin: top; animation: timeline-line 1.2s cubic-bezier(.2,.8,.2,1) .15s forwards; }
.timeline-item { position: relative; z-index: 1; display: grid; grid-template-columns: var(--timeline-date-col) var(--timeline-node-col) minmax(0, 1fr); gap: 0; align-items: start; width: 100%; min-height: clamp(168px, 13vw, 224px); padding: 0; transition: opacity .28s ease, filter .28s ease; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline:hover .timeline-item:not(:hover) { opacity: .46; filter: saturate(.72); }
.timeline-item:hover, .timeline-item:focus-within { z-index: 2; }
.timeline-index { position: relative; z-index: 2; grid-column: 2; grid-row: 1; display: grid; width: 42px; height: 42px; place-items: center; justify-self: center; align-self: start; margin-top: 4px; border: 6px solid rgba(212,255,95,.09); border-radius: 50%; color: rgba(237,245,223,.62); background: #141c1d; box-shadow: 0 0 0 1px rgba(237,245,223,.14), 0 0 16px rgba(0,0,0,.24); font: 800 13px "DM Mono", monospace; opacity: 0; transform: scale(.74); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), color .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.timeline-date { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; padding: 4px clamp(18px, 2vw, 28px) 0 0; color: rgba(237,245,223,.46); font: 800 clamp(28px, 3vw, 48px) "Manrope", "PingFang SC", sans-serif; line-height: .95; letter-spacing: -.045em; white-space: nowrap; text-align: right; text-shadow: none; opacity: 0; transform: translateX(-30px); transition: opacity .7s ease .08s, transform .7s cubic-bezier(.2,.8,.2,1) .08s, color .28s ease, text-shadow .28s ease; }
.timeline-content { position: relative; z-index: 1; grid-column: 3; grid-row: 1; min-width: 0; display: grid; grid-template-columns: minmax(240px, .84fr) minmax(0, 1.16fr); column-gap: clamp(20px, 2vw, 34px); align-items: start; margin-left: 38px; padding: clamp(20px, 1.7vw, 26px); overflow: hidden; border: 1px solid rgba(237,245,223,.18); border-radius: 20px; background: rgba(14, 18, 15, .92); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 16px 42px rgba(0,0,0,.18); opacity: 0; transform: translateX(38px) translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1), border-color .28s ease, background .28s ease, box-shadow .28s ease; }
.timeline-content::after { content: ""; position: absolute; right: -13%; bottom: -30%; width: 34%; aspect-ratio: 1; border: 1px solid rgba(237,245,223,.08); border-radius: 50%; pointer-events: none; transition: border-color .28s ease; }
.timeline-item:hover .timeline-content, .timeline-item:focus-within .timeline-content { border-color: rgba(212,255,95,.78); background: linear-gradient(135deg, rgba(31, 43, 24, .92), rgba(18, 29, 17, .88)); box-shadow: inset 0 1px rgba(255,255,255,.045), 0 24px 62px rgba(0,0,0,.26), 0 0 34px rgba(212,255,95,.1); }
.timeline-item:hover .timeline-content::after, .timeline-item:focus-within .timeline-content::after { border-color: rgba(212,255,95,.16); }
.timeline-item:hover .timeline-index, .timeline-item:focus-within .timeline-index { color: #10130a; border-color: rgba(212,255,95,.22); background: var(--lime); box-shadow: 0 0 0 1px rgba(212,255,95,.82), 0 0 34px rgba(212,255,95,.46); }
.timeline-item:hover .timeline-date, .timeline-item:focus-within .timeline-date { color: var(--lime); text-shadow: 0 0 24px rgba(212,255,95,.18); }
.timeline-item:nth-child(even) .timeline-content { grid-column: 3; margin-right: 0; margin-left: 38px; transform: translateX(38px) translateY(24px); }
.timeline-item:nth-child(even) .timeline-date { grid-column: 1; justify-self: end; padding-right: clamp(18px, 2vw, 28px); padding-left: 0; transform: translateX(-30px); }
.timeline-item.is-visible .timeline-content, .timeline-item.is-visible:nth-child(even) .timeline-content { opacity: 1; transform: translateX(0) translateY(0); }
.timeline-item.is-visible .timeline-date, .timeline-item.is-visible:nth-child(even) .timeline-date { opacity: 1; transform: translateX(0); }
.timeline-item.is-visible .timeline-index { opacity: 1; transform: scale(1); }
.company-meta { grid-column: 1; margin: 0 0 12px; color: rgba(128,214,204,.75); font-size: 10px; transition: color .28s ease; }
.timeline-content h3 { position: relative; grid-column: 1; margin: 0; color: var(--ink); font-size: clamp(22px, 1.75vw, 30px); line-height: 1.08; letter-spacing: -.055em; }
.timeline-role { position: relative; grid-column: 1; margin: 10px 0 0; color: rgba(212,255,95,.72); font-size: clamp(14px, 1vw, 17px); font-weight: 700; transition: color .28s ease; }
.timeline-content ol { position: relative; grid-column: 2; grid-row: 1 / span 3; align-self: center; max-width: none; margin: 0; padding-left: 20px; color: rgba(237,245,223,.64); font-size: clamp(11px, .78vw, 13px); line-height: 1.72; }
.timeline-content li { padding-left: 8px; margin-bottom: 8px; }
.timeline-item:hover .company-meta, .timeline-item:focus-within .company-meta { color: var(--cyan); }
.timeline-item:hover .timeline-role, .timeline-item:focus-within .timeline-role { color: var(--lime); }

.portfolio-section { --page-width: 1680px; --dir-title-size: clamp(22px, 1.55vw, 28px); --dir-meta-size: 10px; --dir-action-size: 13px; --dir-title-line: 1.08; --dir-title-track: -.045em; border-top: 1px solid var(--line-soft); }
.portfolio-section.section-pad { padding-bottom: 116px; }
.portfolio-categories { display: grid; gap: 28px; }
.portfolio-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.portfolio-categories.is-browsing { gap: clamp(34px, 4vw, 64px); }
.portfolio-categories.is-browsing .portfolio-category-grid { gap: 10px; }
.portfolio-category-card, .portfolio-album-card {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(237,245,223,.15);
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
  background: #111811;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.portfolio-category-card { height: clamp(540px, 34vw, 660px); min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 18px 18px 22px; overflow: hidden; border-color: transparent; background: transparent; animation: category-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--category-index) * 70ms); }
.portfolio-categories.is-browsing .portfolio-category-card { height: clamp(220px, 14vw, 292px); padding: 12px; opacity: .34; filter: grayscale(.45) saturate(.55); transform: scale(.985); }
.portfolio-categories.is-browsing .portfolio-category-card.is-active-category { opacity: .78; filter: grayscale(.12) saturate(.82); }
.portfolio-category-card:hover, .portfolio-category-card:focus-visible { z-index: 2; outline: 0; }
.portfolio-category-card:hover::before, .portfolio-category-card:focus-visible::before { opacity: 1; transform: scale(1); }
.portfolio-category-card::before { content: ""; position: absolute; z-index: -1; inset: 0; border: 1px solid rgba(237,245,223,.22); border-radius: 48px; opacity: 0; background: rgba(237,245,223,.1); box-shadow: 0 22px 44px rgba(0,0,0,.22); transform: scale(.96); transition: opacity .3s ease, transform .3s ease, background .3s ease; }
.portfolio-categories.is-browsing .portfolio-category-card::before { border-radius: 16px; opacity: 1; background: rgba(237,245,223,.025); box-shadow: none; transform: scale(1); }
.portfolio-categories.is-browsing .portfolio-category-card.is-active-category::before { border-color: rgba(212,255,95,.38); background: rgba(212,255,95,.035); }
.portfolio-album-card:hover { z-index: 2; border-color: rgba(212,255,95,.75); box-shadow: 0 22px 44px rgba(0,0,0,.3); transform: translateY(-6px); }
.category-card-index { display: block; margin: 0 0 18px; color: transparent; font-size: clamp(72px, 8.5vw, 136px); font-weight: 800; line-height: .7; letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(237,245,223,.52); transition: color .3s ease, -webkit-text-stroke .3s ease; }
.portfolio-categories.is-browsing .category-card-index { position: absolute; top: 12px; left: 14px; margin: 0; font-size: clamp(28px, 3.2vw, 54px); -webkit-text-stroke-color: rgba(237,245,223,.22); }
.portfolio-category-card:hover .category-card-index, .portfolio-category-card:focus-visible .category-card-index { color: var(--ink); -webkit-text-stroke: 0; }
.category-preview { position: relative; z-index: 1; min-height: 0; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4px; padding: 4px; overflow: hidden; contain: layout paint; border: 1px solid rgba(237,245,223,.16); border-radius: 4px; opacity: .95; background: #101610; transition: transform .3s ease, border-color .3s ease; }
.category-preview > * { min-width: 0; min-height: 0; overflow: hidden; }
.category-preview img, .category-preview video { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; object-fit: contain; background: #172018; }
.album-preview img, .album-preview video { width: 100%; height: 100%; object-fit: contain; background: #172018; }
.portfolio-category-card:hover .category-preview, .portfolio-category-card:focus-visible .category-preview { border-color: rgba(212,255,95,.65); transform: translateY(-4px); }
.portfolio-categories.is-browsing .category-preview { opacity: .42; transform: none; }
.portfolio-categories.is-browsing .portfolio-category-card:hover .category-preview, .portfolio-categories.is-browsing .portfolio-category-card:focus-visible .category-preview { transform: none; }
.category-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,8,5,.34), rgba(4,8,5,.04) 72%); pointer-events: none; }
.category-card-copy { position: relative; z-index: 1; display: block; min-height: 142px; padding-top: 18px; }
.portfolio-categories.is-browsing .category-card-copy { min-height: 0; align-self: end; padding-top: 8px; }
.category-card-copy span, .category-card-copy small { display: block; color: rgba(237,245,223,.6); font: var(--dir-meta-size) "DM Mono", monospace; letter-spacing: .08em; }
.category-card-copy strong { display: block; margin: 10px 0 9px; font-size: var(--dir-title-size); line-height: var(--dir-title-line); letter-spacing: var(--dir-title-track); }
.portfolio-categories.is-browsing .category-card-copy strong { margin: 6px 0 4px; color: rgba(237,245,223,.72); font-size: clamp(16px, 1.15vw, 20px); letter-spacing: -.025em; }
.portfolio-categories.is-browsing .category-card-copy span:not(.category-card-enter), .portfolio-categories.is-browsing .category-card-copy small { color: rgba(237,245,223,.36); font-size: 9px; }
.portfolio-categories.is-browsing .portfolio-category-card.is-active-category .category-card-copy strong { color: var(--ink); }
.category-card-enter { display: inline-flex !important; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 12px 10px 16px; border: 1px solid rgba(212,255,95,.76); border-radius: 999px; color: var(--lime) !important; background: linear-gradient(90deg, rgba(212,255,95,.14), rgba(212,255,95,.04)); box-shadow: 0 0 0 1px rgba(212,255,95,.12), 0 0 28px rgba(212,255,95,.16); font-family: "Manrope", "PingFang SC", sans-serif !important; font-size: var(--dir-action-size) !important; font-weight: 900; letter-spacing: 0 !important; transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.portfolio-categories.is-browsing .category-card-enter { margin-top: 9px; padding: 6px 9px 6px 11px; border-color: rgba(237,245,223,.2); color: rgba(237,245,223,.52) !important; background: rgba(255,255,255,.025); box-shadow: none; font-size: 11px !important; }
.category-card-enter b { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(212,255,95,.84); border-radius: 50%; font-size: 18px; background: rgba(212,255,95,.1); transition: transform .25s ease, color .25s ease, background .25s ease; }
.portfolio-categories.is-browsing .category-card-enter b { width: 22px; height: 22px; border-color: rgba(237,245,223,.24); color: rgba(237,245,223,.58); background: transparent; font-size: 12px; }
.portfolio-category-card:hover .category-card-enter, .portfolio-category-card:focus-visible .category-card-enter { color: #11180c !important; border-color: var(--lime); background: var(--lime); box-shadow: 0 0 0 5px rgba(212,255,95,.14), 0 0 38px rgba(212,255,95,.36); transform: translateY(-2px); }
.portfolio-categories.is-browsing .portfolio-category-card:hover .category-card-enter, .portfolio-categories.is-browsing .portfolio-category-card:focus-visible .category-card-enter { color: rgba(237,245,223,.72) !important; border-color: rgba(212,255,95,.34); background: rgba(212,255,95,.06); box-shadow: none; }
.portfolio-category-card:hover .category-card-enter b, .portfolio-category-card:focus-visible .category-card-enter b { color: #11180c; background: var(--lime); transform: rotate(45deg); }
.portfolio-categories.is-browsing .portfolio-category-card:hover .category-card-enter b, .portfolio-categories.is-browsing .portfolio-category-card:focus-visible .category-card-enter b { color: var(--lime); border-color: rgba(212,255,95,.42); background: transparent; }
.category-card-arrow, .album-arrow {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(237,245,223,.3);
  border-radius: 50%;
  color: var(--lime);
  background: rgba(5,12,7,.66);
  font-size: 18px;
  transition: transform .3s ease, color .3s ease, background .3s ease;
}
.category-card-arrow { top: auto; right: 18px; bottom: 20px; width: 46px; height: 46px; opacity: 1; border-color: rgba(212,255,95,.76); background: rgba(212,255,95,.12); box-shadow: 0 0 0 1px rgba(212,255,95,.1), 0 0 28px rgba(212,255,95,.18); transform: translateY(0); }
.portfolio-categories.is-browsing .category-card-arrow { top: 12px; right: 12px; bottom: auto; width: 30px; height: 30px; opacity: .55; border-color: rgba(237,245,223,.2); background: rgba(255,255,255,.025); box-shadow: none; font-size: 14px; }
.portfolio-category-card:hover .category-card-arrow, .portfolio-category-card:focus-visible .category-card-arrow { color: #14200d; background: var(--lime); transform: translateY(0) rotate(45deg); }
.portfolio-album-card:hover .album-arrow { color: #14200d; background: var(--lime); transform: rotate(45deg); }
.album-arrow { width: 44px; height: 44px; border-color: rgba(212,255,95,.64); background: rgba(212,255,95,.1); box-shadow: 0 0 24px rgba(212,255,95,.14); }
.portfolio-browser { display: none; padding-top: 4px; }
.portfolio-browser.is-open { display: block; animation: browser-in .45s cubic-bezier(.2,.8,.2,1) both; }
.portfolio-categories.is-browsing .portfolio-browser { padding-top: clamp(18px, 2.4vw, 38px); border-top: 1px solid rgba(212,255,95,.18); }
.portfolio-browser-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 18px; padding: 28px 0 26px; border-top: 1px solid var(--line); }
.portfolio-categories.is-browsing .portfolio-browser-head { padding: 22px 0 34px; border-top: 0; }
.portfolio-browser-head p { margin: 0 0 8px; color: var(--lime); font: var(--dir-meta-size) "DM Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.portfolio-browser-head h3 { margin: 0; font-size: var(--dir-title-size); line-height: var(--dir-title-line); letter-spacing: var(--dir-title-track); }
.portfolio-browser-head > span { padding-bottom: 5px; color: var(--quiet); font: var(--dir-meta-size) "DM Mono", monospace; letter-spacing: .08em; white-space: nowrap; }
.portfolio-back { width: auto; min-width: 112px; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border: 1px solid rgba(212,255,95,.72); border-radius: 999px; color: var(--lime); background: rgba(212,255,95,.1); box-shadow: 0 0 0 1px rgba(212,255,95,.1), 0 0 26px rgba(212,255,95,.16); font-size: 22px; font-weight: 900; cursor: pointer; transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
.portfolio-back::after { content: "返回"; font-size: 14px; letter-spacing: .04em; }
.portfolio-back:hover { color: #14200d; background: var(--lime); box-shadow: 0 0 34px rgba(212,255,95,.28); transform: translateX(-3px); }
.portfolio-album-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.portfolio-categories.is-browsing .portfolio-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.portfolio-album-card { min-height: 252px; animation: category-rise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--album-index) * 45ms); }
.portfolio-categories.is-browsing .portfolio-album-card { min-height: clamp(430px, 27vw, 560px); border-color: rgba(237,245,223,.2); background: #10160f; }
.album-preview { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 2px; background: #131c13; }
.album-preview > :first-child:last-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.album-preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,8,5,.9), rgba(4,8,5,.04) 72%); pointer-events: none; }
.album-card-meta { position: absolute; z-index: 1; right: 18px; bottom: 17px; left: 18px; }
.album-card-meta strong, .album-card-meta span { display: block; }
.album-card-meta strong { max-width: calc(100% - 36px); font-size: var(--dir-title-size); line-height: var(--dir-title-line); letter-spacing: var(--dir-title-track); }
.album-card-meta span { margin-top: 7px; color: rgba(237,245,223,.58); font: var(--dir-meta-size) "DM Mono", monospace; letter-spacing: .08em; }
.portfolio-categories.is-browsing .album-card-meta { right: clamp(24px, 2.8vw, 42px); bottom: clamp(24px, 2.8vw, 42px); left: clamp(24px, 2.8vw, 42px); }
.portfolio-categories.is-browsing .album-card-meta strong { max-width: calc(100% - 72px); font-size: clamp(34px, 3.2vw, 56px); letter-spacing: -.055em; }
.portfolio-categories.is-browsing .album-card-meta span { margin-top: 12px; font-size: 12px; }
.integrated-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.portfolio-categories.is-browsing .integrated-project-grid { gap: clamp(18px, 2vw, 28px); }
.integrated-project-card { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(237,245,223,.15); border-radius: 8px; color: var(--ink); text-align: left; background: #181716; cursor: pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.integrated-project-card.is-grouped { grid-column: 1 / -1; }
.integrated-project-card:hover, .integrated-project-card:focus-visible { z-index: 1; border-color: rgba(212,255,95,.68); outline: 0; box-shadow: 0 18px 36px rgba(0,0,0,.24); transform: translateY(-4px); }
.integrated-project-card-visual { display: grid; grid-template-columns: repeat(var(--preview-count, 1), minmax(0, 1fr)); gap: 1px; background: #1a1717; }
.integrated-project-card.is-grouped .integrated-project-card-visual { --preview-count: 2; }
.integrated-project-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #1a1717; }
.integrated-project-card-copy { display: grid; gap: 7px; min-height: 154px; padding: 16px 18px 18px; border-top: 1px solid rgba(237,245,223,.08); }
.integrated-project-card-copy small { color: var(--lime); font: var(--dir-meta-size) "DM Mono", monospace; letter-spacing: .1em; }
.integrated-project-card-copy strong { max-width: 90%; font-size: var(--dir-title-size); line-height: var(--dir-title-line); letter-spacing: var(--dir-title-track); }
.integrated-project-card-copy > span { color: var(--muted); font: var(--dir-meta-size) "DM Mono", monospace; letter-spacing: .06em; }
.integrated-project-card-copy b { display: inline-flex; align-items: center; justify-self: start; gap: 9px; margin-top: 8px; padding: 9px 10px 9px 13px; border: 1px solid rgba(212,255,95,.54); border-radius: 999px; color: var(--lime); background: rgba(212,255,95,.07); box-shadow: 0 0 18px rgba(212,255,95,.1); font-size: var(--dir-action-size); }
.integrated-project-card-copy i { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(212,255,95,.58); border-radius: 50%; font-size: 13px; font-style: normal; transition: transform .25s ease, color .25s ease, background .25s ease; }
.integrated-project-card:hover .integrated-project-card-copy b, .integrated-project-card:focus-visible .integrated-project-card-copy b { color: #11180c; border-color: var(--lime); background: var(--lime); box-shadow: 0 0 26px rgba(212,255,95,.28); }
.integrated-project-card:hover .integrated-project-card-copy i, .integrated-project-card:focus-visible .integrated-project-card-copy i { color: #11180c; background: var(--lime); transform: rotate(45deg); }
.integrated-project-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .34fr); align-items: stretch; overflow: hidden; border: 1px solid rgba(237,245,223,.16); border-radius: 12px; background: linear-gradient(110deg, #1b1718 0%, #1b1718 64%, rgba(22,34,18,.94) 100%); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.integrated-project-visual { position: relative; min-width: 0; min-height: 620px; display: grid; grid-template-columns: 1fr; place-items: center; gap: clamp(16px, 1.6vw, 24px); margin: 0; padding: clamp(34px, 4vw, 72px); overflow: hidden; border: 0; border-radius: 0; background: radial-gradient(circle at 40% 48%, rgba(212,255,95,.08), transparent 42%), #1b1718; }
.integrated-project-visual.is-grouped { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.integrated-project-visual::before { content: ""; position: absolute; inset: clamp(18px, 2vw, 34px); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; pointer-events: none; }
.integrated-project-visual::after { content: ""; position: absolute; right: 7%; bottom: 8%; width: 34%; height: 9%; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(18px); pointer-events: none; }
.integrated-project-visual figure { position: relative; z-index: 1; width: 100%; margin: 0; cursor: zoom-in; }
.integrated-project-visual img { position: relative; z-index: 1; width: min(100%, 1180px); height: auto; max-height: 72vh; object-fit: contain; background: transparent; filter: drop-shadow(0 20px 36px rgba(0,0,0,.28)); }
.integrated-project-visual.is-grouped img { max-height: min(70vh, 640px); }
.integrated-project-visual figcaption { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-self: center; gap: 12px; margin-top: 18px; padding: 13px 18px; border: 1px solid rgba(212,255,95,.68); border-radius: 999px; color: var(--lime); background: linear-gradient(90deg, rgba(212,255,95,.13), rgba(5,9,6,.76)); box-shadow: 0 0 0 1px rgba(212,255,95,.1), 0 0 30px rgba(212,255,95,.18); font: 11px "DM Mono", monospace; letter-spacing: .06em; }
.integrated-project-visual figcaption span { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(212,255,95,.6); border-radius: 50%; color: var(--lime); font-size: 15px; }
.integrated-project-info { align-self: stretch; padding: clamp(34px, 4vw, 70px) clamp(26px, 3.5vw, 52px); border-left: 1px solid rgba(212,255,95,.42); background: linear-gradient(180deg, rgba(8,12,7,.72), rgba(8,12,7,.9)); }
.integrated-project-info > p { margin: 0; color: var(--lime); font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.integrated-project-info dl { margin: 28px 0 0; }
.integrated-project-info dl div { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid rgba(237,245,223,.1); }
.integrated-project-info dt { display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 12px; padding: 0 14px; border: 1px solid rgba(212,255,95,.62); border-radius: 999px; color: var(--lime); background: rgba(212,255,95,.12); box-shadow: 0 0 0 1px rgba(212,255,95,.08), 0 0 20px rgba(212,255,95,.12); font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.integrated-project-info dd { margin: 0; color: rgba(237,245,223,.88); font-size: clamp(13px, 1vw, 17px); line-height: 1.85; }
.project-case { display: block; }
.project-case-main { min-width: 0; }
.project-case-kicker, .project-case-index { margin: 0; color: var(--lime); font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.project-case h4 { margin: 13px 0 24px; font-size: clamp(29px, 4vw, 52px); line-height: 1.02; letter-spacing: -.06em; }
.project-case-gallery, .project-case-gallery.is-poster-series, .project-case.is-long-form .project-case-gallery { display: block; column-count: 7; column-gap: 8px; }
.project-case.is-long-form .project-case-gallery { column-count: 6; }
.project-media-card { display: inline-block; width: 100%; min-width: 0; margin: 0 0 8px; overflow: hidden; break-inside: avoid; border: 1px solid rgba(237,245,223,.13); border-radius: 6px; background: #161615; cursor: zoom-in; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.project-media-card:hover { position: relative; z-index: 1; border-color: rgba(212,255,95,.6); box-shadow: 0 18px 36px rgba(0,0,0,.24); transform: translateY(-4px); }
.project-media-card img, .project-media-card video { width: 100%; height: auto; max-height: none; object-fit: contain; background: #161615; }
.project-media-card figcaption { display: none; }
.project-media-card figcaption span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-media-card figcaption span:last-child { color: var(--lime); }
.project-case.is-long-form .project-media-card img { object-position: top; }
.project-load-more { width: min(920px, 100%); min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px auto 0; padding: 0 22px; border: 1px solid rgba(212,255,95,.82); border-radius: 7px; color: #11180c; background: linear-gradient(90deg, #c7ef49 0%, #d4ff5f 52%, #c7ef49 100%); box-shadow: 0 12px 28px rgba(152, 214, 39, .18), inset 0 1px rgba(255,255,255,.46); cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.project-load-more > span { font-size: 16px; font-weight: 800; line-height: 1; }
.project-load-more small { color: rgba(17,24,12,.66); font: 10px "DM Mono", monospace; letter-spacing: .06em; }
.project-load-more b { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(17,24,12,.45); border-radius: 50%; font-size: 17px; line-height: 1; transition: transform .25s ease, background .25s ease; }
.project-load-more:hover { transform: translateY(-3px); border-color: #efffc0; background: #efffc0; box-shadow: 0 20px 44px rgba(212,255,95,.26); }
.project-load-more:hover b { background: rgba(17,24,12,.1); transform: translateY(3px); }
.project-load-more:active { transform: translateY(-1px) scale(.992); }
.project-load-more.is-complete { border-color: rgba(212,255,95,.36); color: rgba(237,245,223,.84); background: rgba(212,255,95,.08); box-shadow: none; cursor: default; }
.project-load-more.is-complete small { color: rgba(237,245,223,.5); }
.project-load-more.is-complete b { border-color: rgba(212,255,95,.5); color: var(--lime); }
.project-load-more.is-complete:hover { transform: none; border-color: rgba(212,255,95,.36); background: rgba(212,255,95,.08); box-shadow: none; }
.project-load-more.is-complete:hover b { background: transparent; transform: none; }
.portfolio-empty { padding: 24px; border: 1px dashed var(--line); color: var(--quiet); font-size: 13px; }

.motion-section { --page-width: 1680px; border-top: 1px solid var(--line-soft); }
.motion-section.section-pad { padding: 104px 0 56px; }
.motion-showcase { width: 100%; margin: 0; display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(360px, .58fr); overflow: hidden; border: 1px solid rgba(212,255,95,.3); border-radius: 8px; background: linear-gradient(110deg, rgba(7,10,8,.96), rgba(8,11,11,.92) 62%, rgba(21,30,20,.9)); box-shadow: 0 24px 64px rgba(0,0,0,.32); }
.motion-media { min-width: 0; margin: 0; padding: clamp(30px, 2.8vw, 48px); border-right: 1px solid rgba(212,255,95,.16); background: radial-gradient(circle at 34% 32%, rgba(212,255,95,.05), transparent 34%), #050605; }
.motion-media video { display: block; width: 100%; min-height: clamp(600px, 37vw, 760px); max-height: 78vh; background: #050605; object-fit: contain; }
.motion-media figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px 0; color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .08em; }
.motion-media figcaption span:last-child { color: var(--lime); }
.motion-copy { display: grid; align-content: start; gap: 20px; padding: clamp(44px, 3.5vw, 68px) clamp(38px, 3.2vw, 58px); background: linear-gradient(180deg, rgba(12,18,13,.72), rgba(12,18,13,.9)); }
.motion-copy-kicker { margin: 0; color: var(--lime); font: 10px "DM Mono", monospace; letter-spacing: .12em; }
.motion-copy h3 { margin: 0; color: var(--ink); font-size: clamp(32px, 3vw, 52px); line-height: 1.04; letter-spacing: -.06em; }
.motion-copy-text { margin: 0; color: rgba(237,245,223,.72); font-size: clamp(15px, 1vw, 17px); line-height: 1.9; }

.advantages-section { --page-width: min(1680px, calc(100vw - 72px)); position: relative; border-top: 0; overflow: visible; background: transparent; }
.advantages-section::before { display: none; }
.advantages-section.section-pad { padding: 66px 0 74px; }
.advantages-section .section-head { display: block; margin-bottom: clamp(32px, 4vw, 54px); }
.advantages-section .section-head h2 { font-size: clamp(48px, 5.2vw, 86px); letter-spacing: 0; }
.advantages-section .section-subtitle { max-width: 560px; margin-top: 16px; color: rgba(237,245,223,.6); }
.advantages-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.1vw, 20px); }
.advantage-card { --card-x: 50%; --card-y: 35%; position: relative; min-height: clamp(310px, 22vw, 420px); display: grid; grid-template-rows: 30px minmax(76px, auto) minmax(0, 1fr); row-gap: clamp(18px, 1.7vw, 28px); align-items: start; padding: clamp(22px, 2vw, 34px); overflow: hidden; border: 1px solid rgba(237,245,223,.16); border-radius: 16px; color: var(--ink); background: radial-gradient(circle at var(--card-x) var(--card-y), rgba(128,214,204,.08), transparent 30%), linear-gradient(145deg, rgba(16,31,35,.82), rgba(8,17,21,.9) 60%, rgba(10,25,17,.82)); box-shadow: inset 0 1px rgba(255,255,255,.03), 0 16px 36px rgba(0,0,0,.16); cursor: pointer; transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease; }
.advantage-card:hover, .advantage-card:focus-visible { transform: translateY(-5px); border-color: rgba(237,245,223,.34); outline: 0; }
.advantage-card:active { transform: translateY(-2px) scale(.985); }
.advantage-card.is-active { color: #10130a; border-color: var(--lime); background: radial-gradient(circle at var(--card-x) var(--card-y), rgba(255,255,255,.36), transparent 24%), linear-gradient(145deg, var(--lime), #dfff75 62%, #bfff18); box-shadow: 0 0 0 1px rgba(212,255,95,.46), 0 28px 68px rgba(212,255,95,.12); animation: advantage-select .42s cubic-bezier(.2,.8,.2,1); }
.advantage-card.is-pulsing { animation: advantage-select .42s cubic-bezier(.2,.8,.2,1); }
.advantage-card::before { content: "×"; position: absolute; top: clamp(18px, 1.8vw, 26px); right: clamp(18px, 1.8vw, 26px); color: rgba(237,245,223,.34); font-size: 22px; line-height: 1; transition: color .28s ease, transform .28s ease; }
.advantage-card::after { content: "✧"; position: absolute; right: clamp(18px, 2vw, 30px); bottom: clamp(16px, 1.8vw, 28px); color: rgba(212,255,95,.72); font-size: clamp(30px, 2.5vw, 46px); line-height: 1; transform: rotate(-12deg); transition: color .28s ease, transform .28s ease; }
.advantage-card:nth-child(odd)::after { content: "?"; font-family: "DM Mono", monospace; font-weight: 800; transform: rotate(14deg); }
.advantage-card.is-active::before { color: rgba(16,19,10,.42); transform: rotate(90deg); }
.advantage-card.is-active::after { color: rgba(16,19,10,.8); transform: rotate(0deg) scale(1.04); }
.advantage-index { grid-row: 1; margin: 0; color: var(--lime); font-size: clamp(11px, .7vw, 13px); transition: color .28s ease; }
.advantage-card.is-active .advantage-index { color: rgba(16,19,10,.58); }
.advantage-card h3 { grid-row: 2; align-self: end; margin: 0; font-size: clamp(30px, 2.8vw, 50px); line-height: 1.05; letter-spacing: 0; font-weight: 700; }
.advantage-card p:last-child { grid-row: 3; max-width: 94%; margin: 0 0 clamp(28px, 2.8vw, 48px); color: rgba(237,245,223,.62); font-size: clamp(14px, 1vw, 18px); line-height: 1.78; transition: color .28s ease; }
.advantage-card.is-active p:last-child { color: rgba(16,19,10,.72); }

.contact-section { min-height: 0; padding: clamp(64px, 6vw, 104px) 0 72px; border-top: 0; background: linear-gradient(180deg, rgba(6,19,15,.98) 0%, rgba(6,17,15,.92) 38%, rgba(5,12,14,.98) 100%); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .36fr); align-items: center; gap: clamp(64px, 7vw, 136px); min-height: min(48vw, 640px); }
.contact-display { margin: 0 0 30px; color: rgba(237,245,223,.74); font: 12px "DM Mono", monospace; line-height: 1; letter-spacing: .16em; }
.contact-display span { color: var(--cyan); }
.contact-copy { position: relative; padding: 0; border-left: 0; background: transparent; }
.contact-copy::before { display: none; }
.contact-copy h2 { max-width: 1060px; margin: 0; font-size: clamp(56px, 5.8vw, 108px); line-height: 1.08; letter-spacing: 0; font-weight: 600; }
.contact-description { max-width: 780px; margin: 34px 0 0; color: rgba(237,245,223,.78); font-size: clamp(15px, 1.05vw, 19px); line-height: 1.9; }
.contact-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.contact-tags span { padding: 10px 18px; border: 1px solid rgba(237,245,223,.18); border-radius: 999px; color: rgba(237,245,223,.68); font-size: 14px; }
.contact-card { padding: clamp(24px, 2.2vw, 34px); border: 1px solid rgba(237,245,223,.16); border-radius: 18px; background: linear-gradient(145deg, rgba(15,31,34,.78), rgba(8,18,17,.9)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 42px rgba(0,0,0,.18); }
.contact-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-line span { color: var(--quiet); font-size: 10px; }
.contact-line a { color: var(--lime); font-size: 14px; }
.qr-wrap { display: grid; grid-template-columns: 1fr; align-items: center; gap: 18px; margin-top: 26px; text-align: center; }
.qr-wrap img { width: min(100%, 260px); height: auto; justify-self: center; padding: 14px; border-radius: 0; background: #fff; }
.qr-wrap strong, .qr-wrap span { display: block; }
.qr-wrap strong { font-size: 14px; }
.qr-wrap span { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.contact-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 110px; color: var(--quiet); font-size: 10px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.split-text { display: block; }
.split-text .char { display: inline-block; opacity: 0; transform: translateY(20px) rotate(5deg); animation: char-in .65s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--char-index) * 42ms + 80ms); }

.lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: start center; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 72px 28px max(92px, calc(env(safe-area-inset-bottom) + 64px)); opacity: 0; visibility: hidden; background: rgba(5,6,5,.92); backdrop-filter: blur(18px); transition: opacity .25s ease, visibility .25s ease; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-stage { width: min(1100px, 100%); min-height: calc(100vh - 164px); display: grid; align-items: start; justify-items: center; }
.lightbox-stage img, .lightbox-stage video { width: auto; height: auto; object-fit: contain; border: 1px solid rgba(212,255,95,.2); border-radius: 12px; background: #111; }
.lightbox-stage img { max-width: min(100%, 1100px); max-height: none; }
.lightbox-stage video { max-width: 100%; max-height: calc(100vh - 132px); }
.lightbox-close { position: fixed; top: 18px; right: 24px; width: 44px; height: 44px; border: 1px solid rgba(212,255,95,.35); border-radius: 50%; color: var(--lime); background: rgba(255,255,255,.04); font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox-caption { position: fixed; bottom: 20px; left: 50%; max-width: calc(100% - 48px); margin: 0; transform: translateX(-50%); color: var(--muted); font: 10px "DM Mono", monospace; text-align: center; }

@keyframes char-in { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes halo-spin { to { transform: rotate(360deg); } }
@keyframes portrait-in { from { transform: translateX(44px) scale(.88); } to { transform: translateX(0) scale(1); } }
@keyframes portrait-ring-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes portrait-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(212,255,95,0); } 50% { box-shadow: 0 0 46px rgba(212,255,95,.08); } }
@keyframes float-card-in { from { opacity: 0; transform: translate(34px, 18px); } to { opacity: 1; transform: translate(0, 0); } }
@keyframes deck-card-in { from { opacity: 0; transform: translateY(72px) rotate(calc(var(--card-tilt) - 8deg)); } to { opacity: 1; transform: translateY(var(--card-y, 0px)) rotate(var(--card-tilt)); } }
@keyframes browser-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes category-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes timeline-line { to { transform: translateX(-50%) scaleY(1); } }
@keyframes advantage-select {
  0% { transform: translateY(-5px) scale(.985); }
  58% { transform: translateY(-8px) scale(1.015); }
  100% { transform: translateY(-5px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .portrait-stage::before, .hero-frame, .hero-now-card, .hero-deck-card {
    animation: none;
  }
}

@media (max-width: 980px) {
  .site-header { top: 18px; gap: 10px; }
  .header-contact { display: none; }
  .hero { min-height: 1420px; padding-top: 154px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-copy { padding-bottom: 0; }
  .hero-identity { max-width: 720px; margin-top: 38px; padding: 0; }
  .hero-basic-info { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .hero-visual { --hero-shift-x: 0px; --hero-shift-y: 20px; min-height: 560px; justify-items: center; opacity: 1; }
  .portrait-stage { width: min(80vw, 470px); }
  .hero-frame { opacity: 1; }
  .hero-frame img { opacity: 1; filter: brightness(1) contrast(1) saturate(1); }
  .hero-deck {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 28px auto 0;
    width: max-content;
    padding: 0 24px 24px;
  }
  .hero-now-card { right: 7%; bottom: 6%; min-width: 190px; padding: 18px 20px; }
  .hero-watermark { bottom: 188px; }
  .experience-section.section-pad { padding: 74px 0; }
  .timeline { gap: 24px; padding: 10px 0 32px 44px; }
  .timeline::before { left: 14px; }
  .timeline-item, .timeline-item:nth-child(even) { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; padding: 0; }
  .timeline-index, .timeline-item:nth-child(even) .timeline-index { position: absolute; top: 16px; left: -46px; grid-column: auto; width: 34px; height: 34px; border-width: 5px; font-size: 11px; }
  .timeline-date, .timeline-item:nth-child(even) .timeline-date { grid-column: 1; grid-row: 1; justify-self: start; padding: 0 0 10px; font-size: 20px; white-space: normal; transform: translateY(12px); }
  .timeline-content, .timeline-item:nth-child(even) .timeline-content { grid-column: 1; grid-row: 2; display: block; margin: 0; padding: 20px; transform: translateY(18px); }
  .timeline-content ol { margin-top: 16px; }
  .timeline-item.is-visible .timeline-date, .timeline-item.is-visible:nth-child(even) .timeline-date { transform: translateY(0); }
  .advantages-section { --page-width: min(100% - 40px, 1040px); }
  .advantages-section.section-pad { padding: 62px 0 68px; }
  .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advantage-card { min-height: 280px; grid-template-rows: 30px 82px minmax(0, 1fr); border-radius: 16px; }
  .advantage-card h3 { margin-top: 18px; font-size: clamp(30px, 4.4vw, 42px); }
  .advantage-card p:last-child { font-size: clamp(13px, 1.8vw, 15px); line-height: 1.75; }
  .portfolio-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .portfolio-category-card { height: clamp(420px, 54vw, 520px); min-height: 0; }
  .integrated-project-detail { grid-template-columns: minmax(0, 1fr) minmax(280px, .36fr); }
  .integrated-project-visual { min-height: 520px; padding: 32px; }
  .project-case-gallery, .project-case-gallery.is-poster-series, .project-case.is-long-form .project-case-gallery { column-count: 6; column-gap: 7px; }
  .motion-showcase { grid-template-columns: 1fr; }
  .motion-media { border-right: 0; border-bottom: 1px solid rgba(212,255,95,.16); padding: 20px; }
  .motion-media video { min-height: 380px; max-height: none; }
  .motion-copy { padding: 22px; }
}

@media (min-width: 981px) and (max-width: 1380px) {
  .hero { min-height: 1370px; padding-top: 164px; }
  .hero-grid { grid-template-columns: minmax(440px, .9fr) minmax(500px, 1.1fr); gap: clamp(58px, 6vw, 110px); }
  .hero-title { font-size: clamp(70px, 6.1vw, 104px); }
  .hero-identity { max-width: 600px; margin-top: 34px; padding: 0; }
  .hero-role { margin: 0; font-size: clamp(30px, 2.8vw, 44px); }
  .hero-summary { max-width: 520px; margin-top: 18px; font-size: 16px; }
  .hero-notes { margin-top: 28px; }
  .hero-notes p { padding: 15px 22px; font-size: 13px; }
  .hero-basic-info { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .hero-visual { --hero-shift-x: clamp(76px, 7vw, 110px); --hero-shift-y: -320px; min-height: 480px; }
  .portrait-stage { width: clamp(360px, 29vw, 460px); }
  .hero-now-card { right: 3%; bottom: 10%; min-width: 198px; padding: 20px 22px; }
  .hero-deck-card { width: clamp(104px, 8vw, 136px); }
  .hero-deck { bottom: 72px; }
  .hero-deck-meta { bottom: 26px; }
  .experience-section { --page-width: min(1220px, calc(100vw - 56px)); }
  .experience-section.section-pad { padding: 76px 0; }
  .experience-section .section-head { max-width: 560px; margin-bottom: 42px; }
  .experience-section .section-head h2 { font-size: clamp(42px, 6vw, 68px); }
  .timeline { --timeline-date-col: clamp(260px, 29vw, 350px); --timeline-node-col: 62px; max-width: 1120px; gap: 28px; padding: 10px 0 34px; }
  .timeline::before { left: calc(var(--timeline-date-col) + var(--timeline-node-col) / 2); width: 3px; }
  .timeline-item, .timeline-item:nth-child(even) { grid-template-columns: var(--timeline-date-col) var(--timeline-node-col) minmax(0, 1fr); min-height: 178px; }
  .timeline-index, .timeline-item:nth-child(even) .timeline-index { position: relative; top: auto; left: auto; grid-column: 2; width: 38px; height: 38px; border-width: 5px; font-size: 12px; }
  .timeline-date, .timeline-item:nth-child(even) .timeline-date { grid-column: 1; grid-row: 1; justify-self: end; padding: 3px 18px 0 0; font-size: clamp(24px, 2.7vw, 36px); transform: translateX(-22px); white-space: nowrap; }
  .timeline-content, .timeline-item:nth-child(even) .timeline-content { grid-column: 3; grid-row: 1; grid-template-columns: minmax(190px, .8fr) minmax(0, 1.2fr); margin-right: 0; margin-left: 30px; padding: clamp(18px, 1.8vw, 24px); transform: translateX(24px) translateY(18px); }
  .timeline-content h3 { font-size: clamp(22px, 2.4vw, 30px); }
  .timeline-content ol { font-size: clamp(11px, 1vw, 13px); }
  .timeline-item.is-visible .timeline-date, .timeline-item.is-visible:nth-child(even) .timeline-date { transform: translateX(0); }
  .project-case-gallery, .project-case-gallery.is-poster-series, .project-case.is-long-form .project-case-gallery { column-count: 6; }
}

@media (min-width: 1600px) {
  .site-header { width: min(calc(100% - 128px), 1760px); }
  .hero { min-height: 1700px; padding-top: 210px; }
  .hero-grid {
    grid-template-columns: minmax(680px, .9fr) minmax(760px, 1.1fr);
    gap: clamp(110px, 7vw, 210px);
    max-width: 1880px;
  }
  .hero-copy { max-width: 1220px; padding-bottom: 380px; }
  .hero-title { font-size: clamp(104px, 7vw, 188px); }
  .hero-identity { max-width: 840px; margin-top: 54px; padding: 0; }
  .hero-role { margin: 0; font-size: clamp(46px, 3.2vw, 70px); }
  .hero-summary { max-width: 720px; font-size: 20px; }
  .hero-visual { --hero-shift-x: clamp(-170px, -8vw, -120px); --hero-shift-y: -150px; min-height: clamp(540px, 30vw, 660px); }
  .portrait-stage { width: clamp(440px, 24vw, 520px); }
  .hero-basic-info { max-width: 980px; }
  .hero-deck { bottom: 96px; gap: 26px; padding-right: 8vw; padding-left: 8vw; }
  .hero-deck-meta { bottom: 42px; }
  .hero-deck-card { width: clamp(136px, 8vw, 210px); }
  .project-case-gallery, .project-case-gallery.is-poster-series { column-count: 7; }
  .project-case.is-long-form .project-case-gallery { column-count: 6; }
}

@media (max-width: 640px) {
  .site-header { top: 10px; width: calc(100% - 20px); min-height: 50px; padding: 0 10px 0 14px; }
  .brand-mark { font-size: 10px; }
  .site-nav { justify-content: flex-start; }
  .site-nav a { padding: 8px 9px; font-size: 10px; }
  .section-pad { width: min(100% - 28px, var(--page-width)); padding: 104px 0; }
  .hero { min-height: 1120px; padding: 120px 18px 0; }
  .hero-grid { gap: 24px; }
  .hero-title { font-size: clamp(55px, 18vw, 88px); }
  .hero-wordmark { margin-top: 9px; font-size: .36em; letter-spacing: .02em; }
  .hero-identity { margin-top: 30px; padding: 0; border-left-width: 0; }
  .hero-identity::before { display: none; }
  .hero-role { margin: 0; font-size: 30px; }
  .hero-summary { margin-top: 14px; font-size: 14px; }
  .hero-actions { flex-wrap: wrap; }
  .button { min-height: 48px; padding: 0 18px; font-size: 13px; }
  .hero-notes { gap: 10px; margin-top: 24px; font-size: 11px; }
  .hero-notes p { min-width: 0; padding: 12px 14px; border-radius: 999px; font-size: 11px; }
  .hero-basic-info { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .hero-basic-info div { padding: 10px 0; }
  .hero-visual { --hero-shift-y: 20px; min-height: 330px; margin-top: 18px; }
  .portrait-stage { width: min(68vw, 260px); }
  .hero-frame { width: 100%; padding: 6px; border-width: 2px; opacity: 1; }
  .hero-frame img { opacity: 1; filter: brightness(1) contrast(1) saturate(1); }
  .hero-frame-label, .hero-frame-index { font-size: 7px; }
  .hero-frame-label { top: 23px; }
  .hero-frame-index { bottom: 22px; }
  .hero-orbit { display: none; width: 72px; height: 72px; padding: 8px; font-size: 7px; }
  .orbit-one { top: 7%; right: 4%; }
  .orbit-two { bottom: 8%; left: 4%; }
  .hero-now-card { right: 2%; bottom: 0; min-width: 150px; padding: 13px 14px; border-radius: 14px; }
  .hero-now-card strong { font-size: 17px; }
  .hero-now-card span { margin-top: 5px; font-size: 9px; }
  .hero-visual-note { display: none; }
  .hero-watermark { right: -20%; bottom: -6px; font-size: 72px; opacity: .34; }
  .hero-deck { gap: 12px; margin-top: 28px; padding: 0 20px 12px; }
  .hero-deck-card { width: 82px; border-radius: 13px; }
  .hero-deck-meta { right: 18px; bottom: 18px; left: 18px; font-size: 8px; }
  .section-head { display: block; margin-bottom: 36px; }
  .section-head h2 { font-size: 52px; }
  .section-subtitle { margin-top: 22px; }
  .contact-footer { flex-direction: column; gap: 8px; }
  .experience-section.section-pad { padding: 58px 0; }
  .timeline { gap: 18px; padding-left: 40px; }
  .timeline::before { left: 14px; }
  .timeline-item, .timeline-item:nth-child(even) { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 0; min-height: 0; padding: 0; }
  .timeline-index, .timeline-item:nth-child(even) .timeline-index { top: 12px; left: -42px; width: 32px; height: 32px; border-width: 5px; font-size: 11px; }
  .timeline-date, .timeline-item:nth-child(even) .timeline-date { grid-column: 1; grid-row: 1; justify-self: start; padding: 0 0 8px; font-size: 18px; white-space: normal; }
  .timeline-content, .timeline-item:nth-child(even) .timeline-content { grid-column: 1; grid-row: 2; padding: 16px; border-radius: 16px; transform: translateY(16px); }
  .timeline-content::before { display: none; }
  .timeline-content h3 { font-size: 28px; }
  .timeline-content ol { font-size: 12px; }
  .motion-showcase { border-radius: 12px; }
  .motion-media { padding: 16px; }
  .motion-media video { min-height: 260px; }
  .motion-media figcaption { padding-top: 10px; font-size: 9px; }
  .motion-copy { padding: 18px; gap: 12px; }
  .motion-copy h3 { font-size: 28px; }
  .motion-copy-text { font-size: 13px; line-height: 1.8; }
  .portfolio-categories { gap: 54px; }
  .portfolio-category-grid { grid-template-columns: 1fr; gap: 12px; }
  .portfolio-category-card { height: clamp(430px, 132vw, 560px); min-height: 0; padding: 12px; }
  .portfolio-categories.is-browsing .portfolio-category-card { height: 180px; }
  .portfolio-category-card::before { border-radius: 24px; }
  .category-card-index { margin-bottom: 12px; font-size: 68px; }
  .category-preview { min-height: 0; }
  .category-card-copy { padding: 14px 4px 4px; }
  .portfolio-section { --dir-title-size: 24px; --dir-meta-size: 10px; --dir-action-size: 12px; }
  .category-card-arrow { right: 13px; bottom: 13px; }
  .portfolio-browser-head { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .portfolio-browser-head > span { display: none; }
  .portfolio-back { min-width: 88px; height: 40px; padding: 0 14px; font-size: 18px; }
  .portfolio-back::after { font-size: 12px; }
  .portfolio-album-grid { grid-template-columns: 1fr; gap: 11px; }
  .portfolio-categories.is-browsing .portfolio-album-grid { grid-template-columns: 1fr; gap: 14px; }
  .portfolio-album-card { min-height: 210px; }
  .portfolio-categories.is-browsing .portfolio-album-card { min-height: 310px; }
  .portfolio-categories.is-browsing .album-card-meta { right: 18px; bottom: 18px; left: 18px; }
  .portfolio-categories.is-browsing .album-card-meta strong { max-width: calc(100% - 48px); font-size: 32px; }
  .portfolio-categories.is-browsing .album-card-meta span { font-size: 10px; }
  .integrated-project-grid { grid-template-columns: 1fr; gap: 12px; }
  .integrated-project-card-copy { min-height: 0; }
  .integrated-project-detail { grid-template-columns: 1fr; }
  .integrated-project-visual { min-height: 0; padding: 18px; }
  .integrated-project-visual.is-grouped { grid-template-columns: 1fr; }
  .integrated-project-visual img { max-height: none; }
  .integrated-project-info { padding: 20px; border-top: 1px solid rgba(212,255,95,.34); border-left: 0; }
  .integrated-project-info dl { margin-top: 18px; }
  .integrated-project-info dl div { padding-bottom: 13px; margin-bottom: 13px; }
  .project-case h4 { margin-bottom: 18px; font-size: 34px; }
  .project-case-gallery, .project-case-gallery.is-poster-series, .project-case.is-long-form .project-case-gallery { column-count: 6; column-gap: 6px; }
  .project-media-card { border-radius: 7px; }
  .project-media-card img, .project-media-card video, .project-case.is-long-form .project-media-card img { max-height: none; }
  .project-media-card figcaption { padding: 8px; font-size: 8px; }
  .project-load-more { min-height: 52px; gap: 10px; margin-top: 24px; padding: 0 14px; }
  .project-load-more > span { font-size: 14px; }
  .project-load-more small { font-size: 9px; }
  .project-load-more b { width: 26px; height: 26px; font-size: 15px; }
  .advantages-section { --page-width: calc(100% - 28px); }
  .advantages-section.section-pad { padding: 54px 0 60px; }
  .advantages-section .section-head h2 { font-size: clamp(34px, 10vw, 46px); }
  .advantages-grid { grid-template-columns: 1fr; }
  .advantage-card { min-height: 210px; grid-template-rows: 28px 64px minmax(0, 1fr); padding: 18px; border-radius: 14px; }
  .advantage-card h3 { margin-top: 14px; font-size: 28px; }
  .advantage-card p:last-child { max-width: 100%; margin-bottom: 38px; font-size: 13px; line-height: 1.7; }
  .contact-layout { grid-template-columns: 1fr; gap: 42px; }
  .contact-copy h2 { font-size: 42px; line-height: 1.14; }
  .contact-description { margin-top: 24px; font-size: 14px; }
  .contact-card { padding: 20px; }
  .contact-line { align-items: flex-start; flex-direction: column; gap: 5px; }
  .qr-wrap { grid-template-columns: 1fr; text-align: center; }
  .qr-wrap img { width: min(100%, 220px); height: auto; }
  .contact-footer { margin-top: 70px; }
  .lightbox { padding: 58px 12px max(84px, calc(env(safe-area-inset-bottom) + 58px)); }
  .lightbox-stage { min-height: calc(100vh - 142px); }
  .lightbox-stage video { max-height: calc(100vh - 104px); }
  .lightbox-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}