.project-spark { --spark-ink:#203628; --spark-muted:#607464; --spark-green:#ff8199; --spark-orange:#ff8199; --spark-accent:#ff8199; background:#FFF7EB; color:var(--spark-ink); }
.project-spark .project-header { position:fixed; background:linear-gradient(#FFF7EB 0%,rgba(255,247,235,.86) 72%,transparent); }
.project-spark .project-header .logo img { filter:brightness(0) saturate(100%); }
.project-spark .project-header .language-toggle { color:var(--spark-ink); background:none; }
.project-section { width:min(100% - 2 * var(--pad), 1450px); margin:0 auto; }
.project-intro { min-height:100svh; padding:22vh 0 12vh; display:grid; grid-template-columns:1.03fr .97fr; grid-template-rows:auto 1fr; column-gap:clamp(42px,8vw,150px); }
.project-title { margin:0; color:var(--spark-ink); font-size:clamp(74px,10vw,156px); font-weight:800; line-height:.76; letter-spacing:-.09em; }.project-title span { color:var(--spark-orange); }
.intro-copy h1 { margin:25px 0 0; color:#5b896c; font-size:clamp(25px,2.8vw,43px); font-weight:500; letter-spacing:-.05em; }.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:42px; }.project-tags span { padding:8px 11px; border-radius:999px; color:#c94f6c; background:#ffe0e6; font-size:12px; }
.intro-copy,.intro-description { align-self:end; }.intro-question { margin:0 0 13px; color:var(--spark-green); font-size:clamp(17px,1.45vw,23px); font-weight:600; }.intro-lede,.section-copy,.theory-copy p { margin:0; color:#52695a; font-size:clamp(14px,1.07vw,17px); line-height:1.82; white-space:pre-line; }.intro-lede strong { color:var(--spark-accent); font-size:1.18em; font-weight:800; }.intro-project-image { grid-column:1 / -1; align-self:end; width:84%; margin:8vh auto 0; background:#e3efd8; }.intro-project-image img { display:block; width:100%; height:auto; }
.case-section,.theory-section,.insights-section,.strategy-section { padding:14vh 0 6vh; }.case-section,.theory-section { display:grid; grid-template-columns:minmax(190px,1fr) minmax(0,2.25fr); column-gap:clamp(42px,7vw,150px); row-gap:clamp(22px,2.5vw,38px); }.case-section>.language-image { grid-column:2; }.theory-section>.section-label { grid-column:1; grid-row:1 / span 2; }.theory-copy,.theory-section>.language-image { grid-column:2; }.section-label { display:flex; align-items:baseline; align-content:start; flex-wrap:wrap; gap:7px; color:var(--spark-ink); font-size:clamp(18px,1.6vw,26px); line-height:1.08; letter-spacing:-.045em; }.section-label b { color:#9db39f; font-weight:400; }.section-label span:last-child { color:#78927c; }.section-body { display:grid; gap:clamp(26px,4vw,52px); }
.insights-section>.section-label,.strategy-section>.section-label,.case-section>.section-label { margin-bottom:7vh; }.theory-copy { width:100%; margin:0; }.language-image { display:block; width:100%; height:auto; }.content-figure,.theory-figure { width:min(100%,840px); margin:0; }.strategy-figure { width:min(92%,1200px); margin:0 0 0 clamp(2%,3vw,48px); transform:translateX(36px); }.image-en { display:none; }.project-spark[data-language="en"] .image-zh { display:none; }.project-spark[data-language="en"] .image-en { display:block; }.problem-callout { margin:0; padding-left:22px; border-left:3px solid var(--spark-orange); color:#3e644a; font-size:clamp(18px,1.55vw,25px); line-height:1.55; letter-spacing:-.03em; }
.insight-intro { max-width:850px; margin:0 0 6vh; color:#52695a; font-size:clamp(14px,1.07vw,17px); line-height:1.82; }.insight-intro p { margin:0; }.insight-list { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,70px); padding:3vh 0 8vh; }.insight-list article { border-top:1px solid #b8cdb5; padding-top:18px; }.insight-list b { color:var(--spark-orange); font-size:13px; }.insight-list h2 { margin:26px 0 13px; font-size:clamp(23px,2.2vw,35px); line-height:1.05; letter-spacing:-.05em; font-weight:600; }.insight-list p { margin:0; color:#5a705e; font-size:14px; line-height:1.75; }.strategy-section { padding-bottom:20vh; }
.feature-section { display:grid; grid-template-columns:minmax(190px,1fr) minmax(0,2.25fr); column-gap:clamp(42px,7vw,150px); padding:8vh 0 8vh; }.feature-body { grid-column:2; }.feature-copy { color:#52695a; font-size:clamp(14px,1.07vw,17px); line-height:1.82; }.feature-copy p { margin:0 0 24px; }.feature-image { display:block; width:min(108%,900px); height:auto; margin:6vh 0 0 50%; transform:translateX(-50%); }.feature-en { display:none; }.project-spark[data-language="en"] .feature-zh { display:none; }.project-spark[data-language="en"] .feature-en { display:block; }.feature-final { padding-bottom:20vh; }
.operations-intro { display:grid; grid-template-columns:minmax(190px,1fr) minmax(0,2.25fr); column-gap:clamp(42px,7vw,150px); padding:10vh 0 9vh; }.operations-intro>.section-label { align-self:start; }.operations-copy { grid-column:2; color:#52695a; font-size:clamp(14px,1.07vw,17px); line-height:1.82; margin-bottom:7vh; }.operations-copy p { margin:0; }.operations-copy strong { color:var(--spark-accent); font-size:1.28em; font-weight:800; }.operations-figure { grid-column:1 / -1; width:min(92%,1200px); margin:0 auto; }.ops-case { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,.88fr); gap:clamp(42px,7vw,135px); align-items:center; padding:10vh 8% 10vh 4%; }.ops-case-reverse { grid-template-columns:minmax(290px,.88fr) minmax(0,1fr); padding-left:8%; padding-right:4%; }.ops-copy { color:#52695a; font-size:clamp(14px,1.07vw,17px); line-height:1.82; }.ops-copy h2 { margin:0 0 28px; color:var(--spark-ink); font-size:clamp(25px,2.15vw,36px); line-height:1.1; letter-spacing:-.045em; font-weight:600; }.ops-copy h2 span { color:#78927c; font-weight:400; }.ops-copy p { margin:0 0 22px; }.ops-gallery { --slide-width:clamp(160px,16vw,245px); position:relative; height:calc(var(--slide-width) * 1.55 + 52px); isolation:isolate; }.ops-slide { position:absolute; top:0; left:50%; z-index:1; width:var(--slide-width); height:calc(var(--slide-width) * 1.55); padding:0; border:0; border-radius:18px; overflow:hidden; background:#e1d9d0; box-shadow:0 18px 34px rgba(50,43,37,.16); cursor:pointer; transform:translateX(-50%) scale(.76); opacity:.18; transition:transform .45s cubic-bezier(.22,.8,.2,1),opacity .3s ease,filter .3s ease; }.ops-slide img { display:block; width:100%; height:100%; object-fit:cover; }.ops-slide.is-active { z-index:4; transform:translateX(-50%) scale(1); opacity:1; }.ops-slide.is-before { z-index:3; transform:translateX(calc(-50% - var(--slide-width) * .67)) scale(.82); opacity:.42; filter:saturate(.72); }.ops-slide.is-after { z-index:2; transform:translateX(calc(-50% + var(--slide-width) * .67)) scale(.82); opacity:.42; filter:saturate(.72); }.ops-slide:focus-visible { outline:3px solid var(--spark-orange); outline-offset:5px; }.gallery-dots { position:absolute; z-index:5; bottom:0; left:50%; display:flex; gap:7px; transform:translateX(-50%); }.gallery-dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#c6c9bf; cursor:pointer; }.gallery-dots button.is-active { background:var(--spark-orange); transform:scale(1.2); }.ops-final { padding-bottom:22vh; }
.ops-gallery { height:calc(var(--slide-width) * 2.06 + 52px); }.ops-slide { height:calc(var(--slide-width) * 2.06); }.ops-slide img { object-fit:contain; }
@media(max-width:720px){.project-intro,.case-section,.theory-section,.feature-section{display:block}.project-intro{padding-top:145px;min-height:auto}.project-title{font-size:22vw}.intro-description{margin-top:10vh}.intro-project-image{width:84%;margin-top:10vh}.case-section,.theory-section,.insights-section,.strategy-section,.feature-section{padding-top:11vh}.theory-copy{margin-bottom:9vh}.content-figure,.theory-figure,.strategy-figure,.feature-image{width:92%}.strategy-figure{transform:translateX(12px)}.insight-list{grid-template-columns:1fr;gap:42px;padding:11vh 0 5vh}.feature-image{margin:8vh auto 0;transform:none}.strategy-section{padding-bottom:16vh}.operations-intro{padding-top:12vh}.ops-case,.ops-case-reverse{display:flex;flex-direction:column;gap:48px;padding:12vh 0}.ops-case-reverse .ops-copy{order:1}.ops-case-reverse .ops-gallery{order:2}.ops-gallery{--slide-width:clamp(160px,48vw,218px);width:100%}.ops-copy h2{font-size:29px}.ops-final{padding-bottom:17vh}}
/* Spark+ accent refinements */
.project-spark .intro-copy h1,
.project-spark .section-label b,
.project-spark .section-label span:last-child,
.project-spark .ops-copy h2 span { color:var(--spark-accent); }

@media(max-width:720px) {
  .operations-intro { display:block; }
  .operations-copy { margin:7vh 0; }
}