/* ===========================================
       VIEWPORT FITTING: MANDATORY BASE STYLES
       =========================================== */
    html, body { height: 100%; overflow-x: hidden; }
    html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
    .slide {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .slide-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-height: 100%;
      overflow: hidden;
      padding: var(--slide-padding);
    }
    :root {
      --title-size: clamp(2.4rem, 6.1vw, 6.8rem);
      --h2-size: clamp(1.7rem, 4vw, 4.2rem);
      --h3-size: clamp(1rem, 2vw, 1.7rem);
      --body-size: clamp(.82rem, 1.26vw, 1.25rem);
      --small-size: clamp(.64rem, .84vw, .82rem);
      --slide-padding: clamp(1rem, 4vw, 4.5rem);
      --brand-wall-height: clamp(5.25rem, 10vh, 7.5rem);
      --content-gap: clamp(.6rem, 2vw, 2rem);
      --element-gap: clamp(.3rem, 1vw, 1rem);
      --ink: #0b0d0c;
      --charcoal: #111512;
      --ivory: #f3efe6;
      --paper: #e9e2d5;
      --sage: #b9ca9f;
      --moss: #7f956d;
      --orange: #e36f47;
      --brass: #c7a978;
      --line: rgba(243,239,230,.18);
      --serif: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif;
      --sans: "Avenir Next", Avenir, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    .card, .container, .content-box { max-width: min(90vw, 1000px); max-height: min(80vh, 700px); }
    .feature-list, .bullet-list { gap: clamp(.4rem, 1vh, 1rem); }
    .feature-list li, .bullet-list li { font-size: var(--body-size); line-height: 1.4; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(.5rem, 1.5vw, 1rem); }
    img, .image-container { max-width: 100%; max-height: min(50vh, 400px); object-fit: contain; }

    * { box-sizing: border-box; }
    body { margin: 0; color: var(--ivory); background: var(--ink); font-family: var(--sans); }
    button, a { font: inherit; }
    a { color: inherit; }
    h1, h2, h3, p { margin: 0; }
    h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; }
    h1 { font-size: var(--title-size); line-height: .94; }
    h2 { font-size: var(--h2-size); line-height: 1.02; }
    h3 { font-size: var(--h3-size); line-height: 1.12; }
    p { font-size: var(--body-size); line-height: 1.55; }
    .slide { isolation: isolate; background: var(--ink); }
    .slide::before {
      content: ""; position: absolute; inset: 0; z-index: -3; opacity: .28;
      background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: clamp(42px, 5vw, 82px) clamp(42px, 5vw, 82px);
      mask-image: linear-gradient(to bottom, #000, transparent 88%);
    }
    .slide::after {
      content: ""; position: absolute; width: 42vw; height: 42vw; min-width: 350px; min-height: 350px;
      right: -18vw; bottom: -26vw; z-index: -2; border-radius: 50%; filter: blur(2px);
      background: radial-gradient(circle at 40% 35%, rgba(185,202,159,.12), transparent 66%);
    }
    .slide.light { color: var(--ink); background: var(--ivory); }
    .slide.light::before { opacity: .62; background-image: linear-gradient(rgba(11,13,12,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,13,12,.045) 1px, transparent 1px); }
    .slide.light::after { background: radial-gradient(circle at 40% 35%, rgba(227,111,71,.12), transparent 66%); }
    .eyebrow { display: flex; align-items: center; gap: .65rem; font-size: var(--small-size); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
    .eyebrow::before { content: ""; width: 2.4rem; height: 2px; background: var(--orange); }
    .kicker { max-width: 44rem; color: rgba(243,239,230,.68); }
    .light .kicker { color: rgba(11,13,12,.64); }
    .accent { color: var(--sage); }
    .light .accent { color: #667c54; }
    .orange { color: var(--orange); }
    .rule { height: 1px; background: currentColor; opacity: .16; }
    .meta { font-size: var(--small-size); letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
    .chip { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; padding: .42rem .72rem; border: 1px solid currentColor; border-radius: 999px; font-size: var(--small-size); letter-spacing: .06em; }
    .chip i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px var(--orange); }
    .logo { width: auto; height: clamp(2.6rem, 4.6vw, 4.5rem); max-height: none; object-fit: contain; }
    .topline { position: absolute; top: clamp(.75rem, 2.1vw, 1.8rem); left: var(--slide-padding); right: var(--slide-padding); z-index: 4; display: flex; align-items: center; justify-content: space-between; }
    .slide-no { font-size: var(--small-size); letter-spacing: .14em; opacity: .52; }
    .section-title { display: grid; gap: clamp(.55rem, 1.4vw, 1.15rem); margin-bottom: clamp(.8rem, 2.4vw, 2.2rem); }
    .title-led .slide-content { justify-content: flex-start; padding-top: clamp(5.2rem, 8.5vh, 7.5rem); }
    .title-led .section-title { width: 100%; }

    /* Hero */
    .hero { background: #070907; }
    .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; filter: saturate(.76) contrast(1.02); opacity: .76; z-index: -4; }
    .hero-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(6,8,7,.97) 0%, rgba(6,8,7,.77) 38%, rgba(6,8,7,.10) 76%), linear-gradient(0deg, rgba(6,8,7,.82), transparent 45%); }
    .hero-copy { width: min(58rem, 69vw); display: grid; gap: clamp(.8rem, 2.2vw, 2rem); }
    .hero h1 { font-size: clamp(3.2rem, 7.4vw, 8.2rem); }
    .hero .tagline { width: min(39rem, 70vw); font-size: clamp(.98rem, 1.55vw, 1.48rem); color: rgba(243,239,230,.78); }
    .hero .logo, .cta .logo { filter: none; opacity: 1; }
    .hero-bottom { position: absolute; left: var(--slide-padding); right: var(--slide-padding); bottom: clamp(1rem, 2vw, 2rem); display: flex; align-items: flex-end; justify-content: space-between; }
    .scroll-cue { display: flex; align-items: center; gap: .7rem; font-size: var(--small-size); opacity: .72; }
    .scroll-cue b { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-weight: 400; }

    /* Problem funnel */
    .funnel-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(1rem, 5vw, 5rem); align-items: center; }
    .funnel-copy { display: grid; gap: clamp(.6rem, 1.6vw, 1.4rem); }
    .funnel { display: grid; gap: clamp(.44rem, 1.1vh, .85rem); }
    .funnel-row { position: relative; min-height: clamp(3.2rem, 7.4vh, 5.2rem); padding: clamp(.6rem, 1.25vw, 1.1rem) clamp(.75rem, 1.5vw, 1.25rem); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; overflow: hidden; border: 1px solid rgba(11,13,12,.12); background: rgba(255,255,255,.48); }
    .funnel-row::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); z-index: -1; background: color-mix(in srgb, var(--orange) var(--tone), transparent); }
    .funnel-row .step { font-size: var(--small-size); letter-spacing: .1em; font-weight: 800; opacity: .56; }
    .funnel-row strong { font-family: var(--serif); font-size: clamp(.92rem, 1.55vw, 1.5rem); font-weight: 600; }
    .funnel-row em { font-family: var(--serif); font-size: clamp(1.4rem, 3.3vw, 3.2rem); font-style: normal; font-weight: 600; color: #8f3c25; }
    .source { margin-top: .65rem; font-size: clamp(.55rem, .7vw, .7rem); line-height: 1.35; opacity: .55; }
    .pain-compact { display: grid; gap: clamp(.25rem, .7vh, .5rem); margin-top: clamp(.25rem, .8vw, .65rem); }
    .pain-point { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .65rem; padding-top: clamp(.35rem, .7vw, .6rem); border-top: 1px solid rgba(11,13,12,.14); }
    .pain-point b { font-family: var(--serif); color: var(--orange); font-size: clamp(.9rem, 1.4vw, 1.3rem); }
    .pain-point span { font-size: var(--small-size); font-weight: 650; letter-spacing: .01em; }

    /* Loss funnel: make the traditional-path drop-off the visual protagonist. */
    .loss-slide { background: #090b09; }
    .loss-slide::after { width: 52vw; height: 52vw; right: -20vw; bottom: -34vw; background: radial-gradient(circle at 40% 35%, rgba(227,111,71,.12), transparent 65%); }
    .loss-slide .slide-content { justify-content: flex-start; padding-top: clamp(5.2rem, 8.5vh, 7.5rem); }
    .loss-head { display: block; margin-bottom: clamp(1.35rem, 3.8vh, 3.25rem); }
    .loss-head h2 { width: 100%; max-width: none; font-size: clamp(2.2rem, 4.2vw, 4.7rem); }
    .loss-head h2 span { color: var(--orange); }
    .loss-stat { justify-self: end; width: min(100%, 25rem); padding-left: clamp(.8rem, 2vw, 1.8rem); border-left: 1px solid var(--line); }
    .loss-stat strong { display: block; font-family: var(--serif); font-size: clamp(2.5rem, 5.3vw, 5.8rem); line-height: .9; color: var(--sage); font-weight: 500; letter-spacing: -.06em; }
    .loss-stat span { display: block; margin-top: .5rem; font-size: var(--small-size); line-height: 1.45; color: rgba(243,239,230,.58); }
    .loss-body { display: grid; grid-template-columns: 1.24fr .76fr; gap: clamp(.75rem, 2vw, 1.7rem); align-items: stretch; }
    .loss-funnel-wrap { min-width: 0; display: flex; flex-direction: column; }
    .loss-funnel-caption { position: relative; display: block; margin-bottom: clamp(.35rem, .8vh, .65rem); font-family: var(--serif); font-size: clamp(.9rem, 1.35vw, 1.35rem); line-height: 1.2; font-weight: 600; color: rgba(243,239,230,.88); }
    .loss-funnel-caption::before { display: none; }
    .loss-funnel-caption strong { font-size: 1.22em; font-weight: 600; }
    .loss-funnel-caption .from { color: var(--sage); }
    .loss-funnel-caption .to { color: var(--orange); font-size: 1.38em; }
    .loss-funnel {
      min-height: clamp(16rem, 43vh, 29rem);
      position: relative;
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      gap: 2px;
      overflow: hidden;
      clip-path: polygon(0 0, 100% 0, 56% 100%, 44% 100%);
      background: rgba(243,239,230,.18);
      filter: drop-shadow(0 20px 32px rgba(0,0,0,.28));
    }
    .loss-funnel::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(112deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(255,255,255,.045));
      mix-blend-mode: screen;
    }
    .loss-stage { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0 clamp(.7rem, 1.5vw, 1.3rem); display: flex; justify-content: center; align-items: center; gap: clamp(.55rem, 1.2vw, 1rem); color: var(--ivory); background: var(--stage-bg); }
    .loss-stage strong { font-family: var(--serif); font-size: clamp(1.7rem, 3.7vw, 4rem); font-weight: 500; letter-spacing: -.04em; }
    .loss-stage span { font-size: clamp(.68rem, 1vw, .92rem); letter-spacing: .08em; text-transform: uppercase; opacity: .74; }
    .loss-stage.s1 { --stage-bg: linear-gradient(90deg, rgba(243,239,230,.10), rgba(243,239,230,.16)); }
    .loss-stage.s2 { --stage-bg: linear-gradient(90deg, rgba(185,202,159,.20), rgba(185,202,159,.30)); }
    .loss-stage.s3 { --stage-bg: linear-gradient(90deg, rgba(227,111,71,.30), rgba(227,111,71,.48)); }
    .loss-stage.s4 { --stage-bg: linear-gradient(90deg, #c85330, var(--orange)); color: #160b07; box-shadow: inset 0 0 34px rgba(255,220,180,.16); }
    .loss-stage.s4 strong { font-size: clamp(2.3rem, 4.4vw, 4.8rem); }
    .loss-stage.s4 span { opacity: .82; font-weight: 800; }
    .loss-reasons { min-height: 0; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(.45rem, 1vh, .8rem); }
    .loss-reason { min-height: 0; position: relative; padding: clamp(.7rem, 1.5vw, 1.35rem); display: grid; grid-template-columns: auto 1fr; align-content: center; gap: .2rem clamp(.6rem, 1.2vw, 1rem); overflow: hidden; border: 1px solid var(--line); border-left: 3px solid rgba(227,111,71,.72); background: linear-gradient(90deg, rgba(227,111,71,.055), rgba(255,255,255,.018)); }
    .loss-reason::before { content: ""; position: absolute; top: 50%; left: calc(-1 * clamp(.75rem, 2vw, 1.7rem)); width: clamp(.75rem, 2vw, 1.7rem); border-top: 1px dashed rgba(227,111,71,.48); }
    .loss-reason b { grid-row: 1 / span 2; align-self: start; font-family: var(--serif); font-size: clamp(1.2rem, 2.3vw, 2.4rem); color: var(--orange); font-weight: 500; }
    .loss-reason h3 { align-self: end; }
    .loss-reason p { align-self: start; font-size: var(--small-size); line-height: 1.35; color: rgba(243,239,230,.52); }
    .loss-source { margin-top: clamp(.35rem, .9vh, .7rem); font-size: clamp(.52rem, .63vw, .66rem); line-height: 1.3; color: rgba(243,239,230,.38); }

    /* Paired chapter title for the AI-era answer slide. */
    .solution-slide .slide-content { justify-content: flex-start; padding-top: clamp(5.2rem, 8.5vh, 7.5rem); }
    .path-title { font-size: clamp(2.5rem, 5.3vw, 5.8rem); line-height: .95; margin-bottom: clamp(1.6rem, 4.6vh, 4rem); }
    .path-title span { color: var(--orange); }

    /* Pain cards */
    .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.4vw, 1.2rem); }
    .pain-card { min-height: clamp(10.5rem, 31vh, 21rem); padding: clamp(1rem, 2.5vw, 2.4rem); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.025); }
    .pain-card .num { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 6.5rem); line-height: 1; color: var(--orange); }
    .pain-card p { margin-top: .6rem; color: rgba(243,239,230,.62); }
    .pain-card:nth-child(2) { transform: translateY(clamp(.6rem, 2vw, 1.7rem)); }
    .pain-card:nth-child(3) { transform: translateY(clamp(1.2rem, 4vw, 3.4rem)); }

    /* Manifesto */
    .manifesto .slide-content { align-items: center; text-align: center; }
    .manifesto h2 { max-width: 16ch; font-size: clamp(2.8rem, 7.2vw, 7.4rem); }
    .manifesto .orbit { position: absolute; width: min(62vw, 880px); aspect-ratio: 1; border: 1px solid rgba(243,239,230,.13); border-radius: 50%; z-index: -1; }
    .manifesto .orbit::before, .manifesto .orbit::after { content: ""; position: absolute; border-radius: 50%; }
    .manifesto .orbit::before { inset: 15%; border: 1px solid rgba(185,202,159,.19); }
    .manifesto .orbit::after { width: 1rem; height: 1rem; top: 20%; right: 9%; background: var(--orange); box-shadow: 0 0 35px rgba(227,111,71,.72); }
    .manifesto p { max-width: 50rem; margin-top: clamp(1rem, 2vw, 1.8rem); color: rgba(243,239,230,.66); }

    /* Loop */
    .loop-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(1rem, 4vw, 4rem); align-items: stretch; }
    .loop-heading { display: flex; flex-direction: column; justify-content: space-between; }
    .loop-heading h2 {
      max-width: 17ch;
      font-family: var(--sans);
      font-size: clamp(1.35rem, 2.25vw, 2.45rem);
      font-weight: 650;
      line-height: 1.18;
      letter-spacing: -.025em;
    }
    .loop-heading h2::before {
      content: "DESIGN TO COMMERCE";
      display: block;
      margin-bottom: clamp(.55rem, 1.2vw, 1rem);
      color: rgba(11,13,12,.5);
      font-size: var(--small-size);
      font-weight: 700;
      letter-spacing: .16em;
    }
    .loop-heading h2 .orange { display: block; margin-top: .12em; }
    .loop-steps { display: grid; grid-template-columns: repeat(5, 1fr); min-height: clamp(15rem, 48vh, 34rem); border-top: 1px solid rgba(11,13,12,.15); border-bottom: 1px solid rgba(11,13,12,.15); }
    .loop-step { padding: clamp(.7rem, 1.5vw, 1.25rem); border-left: 1px solid rgba(11,13,12,.15); display: flex; flex-direction: column; justify-content: space-between; transition: background .35s ease, transform .35s ease; }
    .loop-step:last-child { border-right: 1px solid rgba(11,13,12,.15); }
    .loop-step:hover { background: rgba(185,202,159,.23); transform: translateY(-6px); }
    .loop-step .dot { width: clamp(1.8rem, 3.5vw, 3.5rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--ivory); font-family: var(--serif); }
    .loop-step h3 { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: .16em; font-family: var(--serif); }
    .loop-step p { font-size: var(--small-size); line-height: 1.45; opacity: .62; }

    /* Capability */
    .cap-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch; }
    .video-frame { position: relative; min-height: clamp(15rem, 52vh, 36rem); overflow: hidden; border-radius: clamp(.25rem, .75vw, .75rem); background: #222; border: 1px solid var(--line); }
    .video-frame video, .case-media video { width: 100%; height: 100%; object-fit: contain; display: block; }
    .video-frame video.brand-video { object-fit: contain; background: #080a09; }
    .video-frame::after { content: "LIVE PRODUCT"; position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .55rem; background: rgba(11,13,12,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.16); font-size: .62rem; letter-spacing: .16em; }
    .cap-stack { display: grid; grid-template-rows: repeat(3, 1fr); border-top: 1px solid var(--line); }
    .cap-item { display: grid; grid-template-columns: clamp(2.8rem, 5vw, 5rem) 1fr; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); }
    .cap-item .index { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 4.4rem); color: var(--orange); }
    .cap-item p { margin-top: .35rem; font-size: var(--small-size); color: rgba(243,239,230,.6); }

    /* Product matrix */
    .matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.5vw, 1.25rem); }
    .matrix-card { min-height: clamp(15rem, 50vh, 34rem); position: relative; overflow: hidden; border: 1px solid rgba(11,13,12,.12); background: #d9d7ce; }
    .matrix-card img, .matrix-card video { width: 100%; height: 100%; max-height: none; object-fit: cover; position: absolute; inset: 0; }
    .matrix-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,10,9,.9), rgba(8,10,9,.06) 62%); }
    .matrix-card .copy { position: absolute; z-index: 2; inset: auto clamp(.8rem, 2vw, 1.6rem) clamp(.8rem, 2vw, 1.6rem); color: var(--ivory); }
    .matrix-card .copy p { font-size: var(--small-size); opacity: .68; margin-top: .35rem; }

    /* Stakeholders */
    .stakeholder-layout { width: 100%; }
    .stakeholder-intro { display: flex; align-items: flex-start; }
    .stakeholder-list { display: grid; gap: clamp(.55rem, 1.2vh, .9rem); }
    .stakeholder { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(.7rem, 1.5vw, 1.3rem); padding: clamp(.7rem, 1.4vw, 1.15rem) 0; border-bottom: 1px solid rgba(11,13,12,.15); }
    .stakeholder .badge { width: clamp(2.5rem, 4vw, 4.2rem); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(11,13,12,.2); border-radius: 50%; font-family: var(--serif); font-size: clamp(.78rem, 1.2vw, 1.1rem); }
    .stakeholder p { font-size: var(--small-size); opacity: .62; }
    .stakeholder .arrow { font-size: clamp(1.2rem, 2vw, 2rem); color: var(--orange); }
    .closure { margin-top: clamp(.7rem, 1.5vw, 1.2rem); padding: clamp(.75rem, 1.5vw, 1.2rem); background: var(--ink); color: var(--ivory); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
    .closure p { font-size: var(--small-size); color: rgba(243,239,230,.62); }

    /* Industries */
    .industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: clamp(.5rem, 1vw, .9rem); }
    .industry { min-height: clamp(8rem, 22vh, 14.5rem); padding: clamp(.75rem, 1.5vw, 1.35rem); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: border-color .25s, background .25s; }
    .industry:hover { border-color: var(--sage); background: rgba(185,202,159,.06); }
    .industry .industry-no { font-family: var(--serif); color: var(--orange); font-size: clamp(1.2rem, 2vw, 2rem); }
    .industry p { font-size: var(--small-size); color: rgba(243,239,230,.58); }
    .industry strong { color: var(--sage); font-weight: 600; }
    .industry-icon {
      position: absolute;
      top: clamp(.8rem, 1.45vw, 1.3rem);
      right: clamp(.8rem, 1.45vw, 1.3rem);
      width: clamp(2.8rem, 4vw, 4.25rem);
      height: auto;
      color: #9fc2ff;
      opacity: .72;
      filter: drop-shadow(0 6px 18px rgba(77, 145, 242, .18));
      transition: transform .3s ease, opacity .3s ease, color .3s ease;
    }
    .industry-icon * { vector-effect: non-scaling-stroke; }
    .industry-icon .icon-accent { stroke: #d7b9ed; }
    .industry:hover .industry-icon { color: #cfe0ff; opacity: 1; transform: translateY(-3px); }

    /* Cases */
    .case-slide .slide-content { padding-bottom: clamp(1rem, 3vw, 3rem); }
    .case-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(1rem, 3.5vw, 3.5rem); align-items: stretch; }
    .case-copy { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
    .case-copy .case-brand { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 5.4rem); line-height: .95; }
    .case-copy .quote { font-family: var(--serif); font-size: clamp(1.5rem, 2.7vw, 2.8rem); line-height: 1.18; max-width: 20ch; }
    .case-copy .detail { font-size: var(--small-size); color: rgba(243,239,230,.6); max-width: 32rem; }
    .case-logo-lockup { min-height: clamp(4.5rem, 11vh, 8rem); display: flex; align-items: center; }
    .case-logo-image { width: min(78%, 19rem); height: auto; max-height: clamp(2.4rem, 7vh, 4.8rem); object-fit: contain; object-position: left center; filter: grayscale(1) brightness(1.65); opacity: .92; }
    .case-logo-image.panasonic { width: min(72%, 17rem); }
    .case-logo-image.taotian { width: min(88%, 22rem); max-height: clamp(3rem, 8vh, 5.5rem); filter: none; opacity: .94; }
    .case-logo-image.dulux { width: min(70%, 16rem); max-height: clamp(2.8rem, 7.5vh, 5rem); }
    .case-brand-taobao { display: grid; gap: .08em; width: fit-content; color: var(--ivory); }
    .case-brand-taobao b { color: var(--sage); font-weight: 500; }
    .case-title .meta { color: rgba(243,239,230,.56); }
    .case-title h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .18em .42em; max-width: none; }
    .case-title-shift { font-family: var(--serif); font-size: .82em; line-height: 1.08; color: var(--ivory); letter-spacing: -.025em; }
    .case-media { height: clamp(15rem, 50vh, 35rem); min-height: 0; overflow: hidden; position: relative; border: 1px solid var(--line); background: #222; }
    .case-media.portrait {
      margin-inline: auto;
      width: min(65%, 28rem);
      display: grid;
      place-items: center;
      isolation: isolate;
      background:
        radial-gradient(circle at 50% 42%, rgba(126, 166, 246, .20), transparent 48%),
        linear-gradient(145deg, #111a2a, #070a11 72%);
    }
    .case-media.portrait::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .56;
      background:
        linear-gradient(90deg, rgba(4, 9, 18, .72), transparent 34%, transparent 66%, rgba(4, 9, 18, .72)),
        repeating-linear-gradient(135deg, rgba(159, 194, 255, .045) 0 1px, transparent 1px 18px);
    }
    .case-media.portrait video {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      background: transparent;
      filter: drop-shadow(0 22px 32px rgba(0, 0, 0, .30));
    }
    .case-media.portrait::after { z-index: 4; }
    .case-media.dulux-media video { object-fit: contain; background: #eef1ef; }
    .case-media::after { content: attr(data-label); position: absolute; right: .8rem; top: .8rem; padding: .35rem .55rem; background: rgba(11,13,12,.72); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); font-size: .6rem; letter-spacing: .13em; }
    .video-frame::after, .matrix-card::after, .case-media::after { pointer-events: none; }
    /* Moving client wall: a quiet two-line proof layer on every content page. */
    .has-brand-wall .slide-content {
      justify-content: center;
      padding-bottom: calc(var(--slide-padding) + var(--brand-wall-height));
    }
    .brand-wall-footer {
      position: absolute; inset: auto 0 0; z-index: 6; height: var(--brand-wall-height);
      display: grid; grid-template-rows: repeat(2, 1fr); overflow: hidden;
      border-top: 0;
      background: rgba(7,9,7,.93); backdrop-filter: blur(14px);
    }
    .light .brand-wall-footer { border-top-color: rgba(11,13,12,.14); background: rgba(243,239,230,.94); }
    .brand-row { min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
    .brand-row + .brand-row { border-top: 0; }
    .light .brand-row + .brand-row { border-top-color: rgba(11,13,12,.08); }
    .brand-track { width: max-content; height: 100%; display: flex; will-change: transform; animation: brand-scroll-left 74s linear infinite; }
    .brand-row.reverse .brand-track { animation-name: brand-scroll-right; animation-duration: 76s; }
    .slide:not(.brand-active) .brand-track { animation-play-state: paused; }
    .brand-wall-footer:hover .brand-track { animation-play-state: paused; }
    .brand-item { width: clamp(10rem, 20vw, 24rem); height: 100%; flex: 0 0 auto; display: grid; place-items: center; border-right: 0; }
    .light .brand-item { border-right-color: rgba(11,13,12,.08); }
    .brand-item img { width: auto; max-width: 70%; max-height: clamp(1.15rem, 2.7vh, 2.1rem); object-fit: contain; filter: grayscale(1) brightness(2.2); opacity: .48; }
    .light .brand-item img { filter: grayscale(1) contrast(.7); opacity: .56; }
    @keyframes brand-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes brand-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

    /* CTA */
    .cta { background: #070907; }
    .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: .35; filter: saturate(.62) contrast(1.1); z-index: -4; }
    .cta::before { background-image: none; }
    .cta-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(7,9,7,.98) 0%, rgba(7,9,7,.82) 45%, rgba(7,9,7,.35)), linear-gradient(0deg, rgba(7,9,7,.8), transparent); }
    .cta h2 { max-width: none; font-size: clamp(2.7rem, 5.1vw, 6.2rem); white-space: nowrap; }
    .cta-links { margin-top: clamp(1rem, 3vw, 2.5rem); display: grid; gap: .55rem; width: min(36rem, 80vw); }
    .cta-link { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: var(--body-size); }
    .cta-link span:first-child { opacity: .54; font-size: var(--small-size); letter-spacing: .08em; text-transform: uppercase; }
    .cta-link:hover { color: var(--sage); }
    .cta-qr-group { display: flex; align-items: flex-start; gap: clamp(.8rem, 1.5vw, 1.3rem); margin-top: clamp(.9rem, 1.8vw, 1.5rem); }
    .cta-qr { width: fit-content; margin: 0; display: grid; justify-items: center; gap: .55rem; }
    .cta-qr img { width: clamp(7.5rem, 14vw, 11.5rem); aspect-ratio: 1; max-height: none; padding: .35rem; background: #fff; border: 1px solid rgba(255,255,255,.24); object-fit: cover; display: block; }
    .cta-qr figcaption { width: 100%; color: rgba(243,239,230,.62); font-size: var(--small-size); letter-spacing: .08em; text-align: center; }

    /* Click-to-expand player shared by every video in the deck. */
    .zoomable-video { cursor: zoom-in; }
    .video-zoom-badge { position: absolute; left: .7rem; top: .7rem; z-index: 5; padding: .34rem .52rem; color: var(--ivory); background: rgba(11,13,12,.68); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); font-size: .58rem; line-height: 1; letter-spacing: .1em; pointer-events: none; opacity: .78; transition: opacity .25s ease, transform .25s ease; }
    .video-frame:hover .video-zoom-badge, .matrix-card:hover .video-zoom-badge, .case-media:hover .video-zoom-badge { opacity: 1; transform: translateY(-2px); }
    .video-lightbox { width: min(94vw, 96rem); max-width: none; padding: 0; border: 0; overflow: visible; color: var(--ivory); background: transparent; }
    .video-lightbox::backdrop { background: rgba(3,5,4,.88); backdrop-filter: blur(18px); }
    .video-lightbox-shell { position: relative; display: grid; gap: .65rem; }
    .video-lightbox video { width: 100%; max-height: 84vh; display: block; object-fit: contain; background: #000; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 2rem 6rem rgba(0,0,0,.48); }
    .video-lightbox-title { padding-right: 3rem; font-size: var(--small-size); letter-spacing: .08em; color: rgba(243,239,230,.7); }
    .video-lightbox-close { position: absolute; right: .75rem; top: .75rem; z-index: 3; width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: var(--ivory); background: rgba(11,13,12,.76); backdrop-filter: blur(8px); cursor: pointer; font-size: 1.2rem; }

    /* Reveal and controls */
    [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .72s cubic-bezier(.2,.75,.25,1), transform .72s cubic-bezier(.2,.75,.25,1); transition-delay: var(--delay, 0ms); }
    .slide.is-visible [data-reveal] { opacity: 1; transform: none; }
    .deck-nav { position: fixed; right: clamp(.5rem, 1.1vw, 1rem); top: 50%; transform: translateY(-50%); z-index: 20; display: grid; gap: .38rem; }
    .nav-dot { width: 7px; height: 7px; border: 0; padding: 0; border-radius: 50%; background: rgba(243,239,230,.27); cursor: pointer; transition: .25s; box-shadow: 0 0 0 1px rgba(11,13,12,.2); }
    .nav-dot.active { background: var(--orange); transform: scale(1.55); }
    .progress { position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 3px; background: rgba(255,255,255,.08); }
    .progress > i { display: block; width: 0; height: 100%; background: var(--orange); transition: width .35s ease; }
    .counter { position: fixed; right: clamp(.75rem, 2vw, 1.8rem); bottom: clamp(.55rem, 1.5vw, 1.2rem); z-index: 25; font-size: .65rem; letter-spacing: .14em; color: rgba(243,239,230,.62); mix-blend-mode: difference; }
    .brand-page-active .counter { bottom: calc(var(--brand-wall-height) + .55rem); }
    .print-note { display: none; }

    @media (max-height: 800px) {
      .has-brand-wall .slide-content { justify-content: flex-start; }
      .loss-slide .slide-content, .solution-slide .slide-content, .title-led .slide-content { padding-top: clamp(3.8rem, 7vh, 4.8rem); }
      .loss-head { margin-bottom: .65rem; }
      .loss-head h2 { font-size: clamp(1.8rem, 3.5vw, 3.3rem); }
      .loss-funnel { min-height: 37vh; }
      .path-title { margin-bottom: .75rem; }
    }

    @media (max-height: 700px) {
      :root { --slide-padding: clamp(.75rem, 3vw, 2rem); --content-gap: clamp(.4rem, 1.5vw, 1rem); --title-size: clamp(1.8rem, 4.8vw, 4rem); --h2-size: clamp(1.45rem, 3.2vw, 2.8rem); }
      .section-title { margin-bottom: .75rem; }
      .pain-card { min-height: 9rem; }
      .case-media { height: clamp(13rem, 55vh, 28rem); min-height: 0; }
      .case-copy .detail { display: none; }
      .case-copy .case-brand { font-size: clamp(2rem, 4vw, 4.2rem); }
      .loss-funnel { min-height: 14rem; }
      .loss-slide .slide-content, .solution-slide .slide-content, .title-led .slide-content { padding-top: clamp(3.5rem, 7vh, 4.5rem); }
      .path-title { margin-bottom: .6rem; }
    }
    @media (max-height: 600px) {
      :root { --slide-padding: clamp(.5rem, 2.5vw, 1.5rem); --content-gap: clamp(.3rem, 1vw, .75rem); --title-size: clamp(1.5rem, 4vw, 3rem); --body-size: clamp(.68rem, 1.05vw, .95rem); }
      .deck-nav, .keyboard-hint, .decorative { display: none; }
      .topline { top: .5rem; }
      .industry { min-height: 6.5rem; }
      .matrix-card, .case-media, .video-frame { min-height: 12rem; }
      .loss-head { margin-bottom: .45rem; }
      .loss-funnel { min-height: 11.8rem; }
      .loss-slide .slide-content, .solution-slide .slide-content, .title-led .slide-content { padding-top: 3rem; }
    }
    @media (max-height: 500px) {
      :root { --slide-padding: clamp(.4rem, 2vw, 1rem); --title-size: clamp(1.25rem, 3.5vw, 2.3rem); --h2-size: clamp(1.1rem, 2.7vw, 1.8rem); --body-size: clamp(.6rem, .92vw, .8rem); }
      .section-title { gap: .25rem; margin-bottom: .45rem; }
      .pain-card { min-height: 7.4rem; padding: .7rem; }
      .case-media, .video-frame, .matrix-card { min-height: 10rem; }
      .case-media { height: 58vh; }
      .loop-steps { min-height: 11rem; }
      .loss-funnel { min-height: 10.5rem; }
      .loss-reason { padding: .4rem; }
      .loss-source { display: none; }
      .path-title { font-size: clamp(1.3rem, 3.5vw, 2rem); margin-bottom: .35rem; }
    }
    @media (max-width: 760px) {
      :root { --title-size: clamp(2rem, 10vw, 4.2rem); --h2-size: clamp(1.65rem, 7vw, 3rem); }
      .hero-copy { width: 88vw; }
      .hero-bg { object-position: 61% center; }
      .hero-shade { background: linear-gradient(90deg, rgba(6,8,7,.95), rgba(6,8,7,.52)), linear-gradient(0deg, rgba(6,8,7,.9), transparent 65%); }
      .funnel-layout, .loop-layout, .cap-layout, .stakeholder-layout, .case-layout { grid-template-columns: 1fr; gap: .75rem; }
      .funnel-copy .kicker, .loop-heading .kicker { display: none; }
      .pain-grid { grid-template-columns: 1fr; }
      .pain-card { min-height: auto; flex-direction: row; align-items: center; gap: 1rem; }
      .pain-card:nth-child(2), .pain-card:nth-child(3) { transform: none; }
      .pain-card .num { min-width: 3rem; }
      .loop-heading { flex-direction: row; align-items: end; }
      .loop-heading h2 { max-width: none; font-size: clamp(1.2rem, 5.4vw, 2rem); }
      .loop-steps { min-height: 43vh; }
      .loop-step { padding: .55rem .32rem; }
      .loop-step h3 { font-size: clamp(.68rem, 3vw, .9rem); }
      .loop-step p { display: none; }
      .video-frame { min-height: 34vh; }
      .cap-stack { grid-template-rows: repeat(3, auto); }
      .cap-item { padding: .35rem 0; }
      .matrix { gap: .35rem; }
      .matrix-card { min-height: 42vh; }
      .matrix-card .copy { inset: auto .5rem .6rem; }
      .matrix-card .copy p { display: none; }
      .industry-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
      .industry { min-height: 13vh; padding: .55rem; }
      .industry p { line-height: 1.25; }
      .case-copy { gap: .55rem; }
      .case-copy .detail { display: none; }
      .case-logo-lockup { min-height: 2.7rem; }
      .case-logo-image { width: min(52%, 9rem); max-height: 2.5rem; }
      .case-logo-image.panasonic { width: min(55%, 10rem); }
      .case-logo-image.taotian { width: min(68%, 12rem); max-height: 2.8rem; }
      .case-brand-taobao { display: flex; gap: .4rem; align-items: baseline; font-size: clamp(1.35rem, 7vw, 2.2rem); }
      .case-title { gap: .3rem; }
      .case-title h2 { display: grid; gap: .12rem; }
      .case-title-shift { font-size: .82em; }
      .case-media { height: 40vh; min-height: 0; }
      .case-media.portrait { width: 56%; }
      :root { --brand-wall-height: clamp(3.8rem, 10vh, 5rem); }
      .brand-item { width: clamp(7.5rem, 34vw, 10rem); }
      .brand-item img { max-height: clamp(.9rem, 2.5vh, 1.35rem); }
      .topline .meta { display: none; }
      .deck-nav { display: none; }
      .loss-head { grid-template-columns: 1fr; gap: .55rem; align-items: start; }
      .loss-head h2 { width: 100%; max-width: none; font-size: clamp(1.65rem, 7vw, 3rem); }
      .loss-stat { justify-self: start; width: 100%; padding-left: 0; padding-top: .5rem; border-left: 0; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: .7rem; }
      .loss-stat strong { font-size: clamp(2.3rem, 11vw, 4rem); }
      .loss-stat span { margin-top: 0; }
      .loss-body { grid-template-columns: 1.08fr .92fr; gap: .4rem; }
      .loss-body { position: relative; padding-top: 1.65rem; }
      .loss-funnel-wrap { position: static; }
      .loss-funnel { min-height: 37vh; clip-path: polygon(0 0, 100% 0, 58% 100%, 42% 100%); }
      .loss-stage { padding: 0 .45rem; gap: .25rem; }
      .loss-stage strong { font-size: clamp(1.35rem, 7vw, 2.2rem); }
      .loss-stage span { font-size: clamp(.52rem, 2.3vw, .68rem); }
      .loss-reason { padding: .45rem; grid-template-columns: 1fr; gap: .12rem; }
      .loss-reason::before { left: -.42rem; width: .42rem; }
      .loss-reason b { grid-row: auto; font-size: clamp(.9rem, 4vw, 1.2rem); }
      .loss-reason h3 { font-size: clamp(.72rem, 3.2vw, .95rem); }
      .loss-reason p { font-size: clamp(.52rem, 2.3vw, .66rem); }
      .loss-funnel-caption { position: absolute; top: 0; left: 0; right: 0; padding-left: 0; margin: 0; white-space: nowrap; font-size: clamp(.68rem, 3vw, .9rem); }
      .loss-stage.s4 span { display: none; }
      .loss-stage.s4 strong { font-size: clamp(1.8rem, 8vw, 2.7rem); }
      .loss-slide .slide-content, .solution-slide .slide-content, .title-led .slide-content { padding-top: clamp(4rem, 9vh, 5rem); }
      .path-title { font-size: clamp(2rem, 10vw, 4rem); margin-bottom: .7rem; }
      .cta h2 { font-size: clamp(1.15rem, 5.8vw, 3rem); }
    }
    @media (max-width: 480px) and (min-height: 760px) {
      .matrix { grid-template-columns: 1fr; }
      .matrix-card { min-height: 19vh; }
      .matrix-card img, .matrix-card video { object-position: center 34%; }
      .matrix-card .copy p { display: block; }
    }
    @media (orientation: landscape) and (max-height: 500px) {
      .pain-grid, .matrix, .industry-grid { grid-template-columns: repeat(3, 1fr); }
      .industry-grid { grid-template-rows: repeat(2, 1fr); }
      .case-layout, .cap-layout, .funnel-layout, .stakeholder-layout, .loop-layout { grid-template-columns: .78fr 1.22fr; }
      .case-media { height: 46vh; min-height: 0; }
      .case-copy .detail { display: none; }
      .case-logo-lockup { min-height: 2.4rem; }
      .case-logo-image { max-height: 2.2rem; }
      .case-brand-taobao { font-size: clamp(1.15rem, 4.2vw, 1.75rem); }
      .stakeholder-layout .closure { display: none; }
      .stakeholder { padding: .28rem 0; }
      .stakeholder .badge { width: 1.8rem; }
      .stakeholder p { display: none; }
      :root { --brand-wall-height: 2.15rem; }
      .has-brand-wall .slide-content { padding-bottom: calc(var(--slide-padding) + var(--brand-wall-height)); }
      .brand-item { width: 6.5rem; }
      .brand-item img { max-height: .65rem; }
      .cta .cta-links { margin-top: .45rem; gap: .2rem; }
      .cta .cta-link { padding: .4rem 0; }
      .cta .cta-qr-group { margin-top: .45rem; gap: .65rem; }
      .cta .cta-qr { grid-template-columns: 1fr; align-items: start; }
      .cta .cta-qr img { width: 5.5rem; }
      .cta .cta-qr figcaption { max-width: none; line-height: 1.35; }
      .loss-head { display: block; margin-bottom: .35rem; }
      .loss-head h2 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
      .loss-stat { justify-self: end; display: block; width: min(100%, 18rem); padding: 0 0 0 .7rem; border-top: 0; border-left: 1px solid var(--line); }
      .loss-stat strong { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
      .loss-stat span { font-size: .52rem; }
      .loss-body { grid-template-columns: 1.2fr .8fr; align-items: start; }
      .loss-funnel-wrap, .loss-reasons { height: 31vh; }
      .loss-funnel { height: 100%; min-height: 0; }
      .loss-reason { grid-template-columns: auto 1fr; padding: .35rem .5rem; }
      .loss-reason b { grid-row: 1 / span 2; }
      .loss-reason p { display: none; }
      .loss-slide .slide-content, .solution-slide .slide-content, .title-led .slide-content { padding-top: 1.8rem; }
      .path-title { font-size: clamp(1.2rem, 3vw, 1.7rem); margin-bottom: .25rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .2s !important; }
      html { scroll-behavior: auto; }
      [data-reveal] { opacity: 1; transform: none; }
      .brand-track { animation: none !important; transform: translateX(0); }
    }
    @media print {
      html, body { height: auto; overflow: visible; background: white; }
      .slide { page-break-after: always; height: 100vh; }
      .deck-nav, .progress, .counter { display: none; }
    }