:root {
      color-scheme: dark;
      --night: #020711;
      --night-soft: #071525;
      --cyan: #70ddff;
      --ice: #eafaff;
      --paper: #edf4f7;
      --paper-bright: #f9fcfd;
      --ink: #132f40;
      --line-dark: rgba(102, 210, 255, .18);
      --line-light: rgba(28, 111, 151, .16);
      --shell: min(100% - 64px, 1480px);
    }

    * { box-sizing: border-box; }
    html { min-width: 320px; scroll-behavior: smooth; background: var(--night); }
    body { min-width: 320px; margin: 0; overflow-x: hidden; color: #eaf4ff; background: var(--night); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body.is-modal-open { overflow: hidden; }
    button, input, a { font: inherit; }
    button { color: inherit; }
    img { max-width: 100%; }
    a { color: inherit; }
    main { overflow: clip; }
    [hidden] { display: none !important; }

    .page-top-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

    .skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; padding: 10px 14px; color: #06111d; border-radius: 8px; background: #dff9ff; transform: translateY(-150%); transition: transform .2s ease; }
    .skip-link:focus { transform: translateY(0); }

    .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 90px; min-height: 90px; max-height: 90px; padding: 28px clamp(28px, 3vw, 48px) 0; display: flex; align-items: flex-start; isolation: isolate; opacity: 0; transform: translateY(-10px); animation: headerIn .9s ease .15s forwards; }
    .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(248, 252, 255, .97) 0%, rgba(243, 249, 253, .88) 72%, rgba(243, 249, 253, 0) 100%); box-shadow: 0 12px 36px rgba(43, 83, 117, .08); -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%); transition: opacity .55s ease; }
    .site-header.is-light::before { opacity: 1; }
    .mini-logo { margin: 9px 58px 0 0; flex: 0 0 auto; color: #bfeeff; background: linear-gradient(105deg, #68cfff 0%, #bfefff 17%, #fff 29%, #68cfff 46%, #e9fbff 64%, #70d6ff 82%, #d6f7ff 100%); background-size: 240% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: .08em; text-decoration: none; white-space: nowrap; opacity: .9; filter: drop-shadow(0 0 8px rgba(73, 190, 255, .34)); transition: opacity .25s ease, filter .35s ease; animation: miniLogoShimmer 9s ease-in-out infinite alternate; }
    .mini-logo:hover, .mini-logo:focus-visible { opacity: 1; filter: drop-shadow(0 0 11px rgba(82, 203, 255, .62)); }
    .site-header.is-light .mini-logo { filter: brightness(.56) saturate(1.5) drop-shadow(0 2px 7px rgba(18, 99, 160, .16)); }
    .main-nav { min-height: 38px; display: flex; align-items: center; gap: clamp(28px, 3.25vw, 54px); }
    .main-nav a, .header-actions a { color: rgba(220, 233, 247, .72); text-decoration: none; font-size: 12px; transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
    .main-nav a:hover, .main-nav a:focus-visible { color: #eef8ff; }
    .site-header.is-light .main-nav a { color: rgba(24, 47, 70, .7); }
    .site-header.is-light .main-nav a:hover, .site-header.is-light .main-nav a:focus-visible { color: #0869b5; }
    .header-actions { margin-left: auto; display: flex; align-items: center; gap: 27px; }
    .header-actions a { min-width: 142px; height: 36px; padding-inline: 16px; border: 1px solid rgba(44, 147, 255, .38); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #e9f8ff; background: linear-gradient(180deg, rgba(26, 113, 201, .82), rgba(9, 62, 119, .92)); box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 0 22px rgba(17, 119, 233, .14); white-space: nowrap; }
    .header-actions a:hover, .header-actions a:focus-visible { color: #fff; border-color: rgba(76, 177, 255, .66); box-shadow: 0 0 24px rgba(20, 127, 255, .2); }
    .site-header.is-light .header-actions a { color: #f8fcff; border-color: rgba(18, 110, 181, .28); background: linear-gradient(180deg, #1782d1, #0d65aa); box-shadow: 0 8px 24px rgba(18, 105, 171, .2), inset 0 1px rgba(255, 255, 255, .2); }
    .menu-toggle { position: relative; width: 40px; height: 40px; margin: -2px 0 0 10px; padding: 0; flex: 0 0 40px; display: none; border: 1px solid rgba(91, 193, 238, .34); border-radius: 11px; color: #8edfff; background: rgba(4, 15, 29, .68); box-shadow: inset 0 0 18px rgba(39, 151, 217, .08), 0 8px 24px rgba(0, 0, 0, .14); -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .35s ease, border-color .35s ease, background .55s ease, box-shadow .35s ease; }
    .menu-toggle span { position: absolute; left: 10px; width: 18px; height: 1px; border-radius: 2px; background: currentColor; box-shadow: 0 0 7px currentColor; transform-origin: center; transition: top .32s ease, opacity .24s ease, transform .32s cubic-bezier(.2, .72, .2, 1); }
    .menu-toggle span:nth-child(1) { top: 12px; }
    .menu-toggle span:nth-child(2) { top: 19px; }
    .menu-toggle span:nth-child(3) { top: 26px; }
    .site-header.is-menu-open .menu-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
    .site-header.is-menu-open .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
    .site-header.is-menu-open .menu-toggle span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
    .menu-toggle:hover, .menu-toggle:focus-visible, .site-header.is-menu-open .menu-toggle { color: #e4faff; border-color: rgba(112, 221, 255, .7); box-shadow: inset 0 0 20px rgba(52, 171, 232, .14), 0 0 20px rgba(36, 168, 235, .18); }
    .site-header.is-light .menu-toggle { color: #166d95; border-color: rgba(32, 115, 153, .28); background: rgba(248, 252, 253, .84); }
    .menu-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

    .portfolio-hero { position: relative; min-height: max(780px, 100svh); overflow: hidden; isolation: isolate; background: radial-gradient(circle at 76% 44%, rgba(20, 108, 201, .24), transparent 30%), radial-gradient(circle at 18% 78%, rgba(30, 150, 197, .11), transparent 27%), linear-gradient(145deg, #020711 0%, #071525 54%, #020810 100%); }
    .portfolio-hero::before { content: "WORK"; position: absolute; left: -1vw; bottom: -4vw; z-index: -3; color: transparent; -webkit-text-stroke: 1px rgba(123, 218, 255, .055); font-size: clamp(180px, 27vw, 460px); font-weight: 650; line-height: .72; letter-spacing: -.09em; white-space: nowrap; }
    .portfolio-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .47; background-image: linear-gradient(rgba(75, 168, 218, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(75, 168, 218, .035) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(circle at 70% 45%, #000, transparent 64%); mask-image: radial-gradient(circle at 70% 45%, #000, transparent 64%); }
    .hero-circuit { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .78; }
    .hero-circuit path { fill: none; stroke: rgba(80, 180, 230, .15); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .hero-circuit .current { stroke: rgba(130, 231, 255, .9); stroke-dasharray: 2 98; stroke-linecap: round; filter: drop-shadow(0 0 6px #5bdcff); animation: currentRun 7s linear infinite; }
    .hero-circuit circle { fill: #0d1a29; stroke: rgba(114, 221, 255, .62); stroke-width: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(89, 213, 255, .7)); animation: nodePulse 3.4s ease-in-out infinite; }
    .hero-shell { width: var(--shell); min-height: max(780px, 100svh); margin: 0 auto; padding: 130px 0 84px; display: grid; grid-template-columns: minmax(410px, .82fr) minmax(560px, 1.18fr); gap: clamp(54px, 7vw, 118px); align-items: center; }
    .hero-copy { position: relative; z-index: 4; max-width: 680px; }
    .breadcrumbs { margin: 0 0 clamp(48px, 8vh, 90px); display: flex; align-items: center; gap: 11px; color: rgba(188, 213, 231, .42); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
    .breadcrumbs a { text-decoration: none; transition: color .25s ease; }
    .breadcrumbs a:hover { color: #c8f3ff; }
    .breadcrumbs i { width: 22px; height: 1px; background: linear-gradient(90deg, rgba(107, 215, 255, .6), transparent); }
    .hero-kicker, .section-kicker { display: flex; align-items: center; gap: 12px; font-size: 9px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
    .hero-kicker { color: rgba(138, 222, 255, .66); }
    .hero-kicker::before, .section-kicker::before { content: ""; width: 31px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
    .hero-title { max-width: 770px; margin: 22px 0 0; color: #f4fbff; font-size: clamp(64px, 7.2vw, 116px); font-weight: 430; line-height: .88; letter-spacing: -.072em; }
    .hero-title em { display: block; color: #84dcf9; font-family: Georgia, "Times New Roman", serif; font-size: .66em; font-weight: 400; letter-spacing: -.055em; }
    .hero-lead { max-width: 610px; margin: 32px 0 0; color: rgba(210, 229, 242, .68); font-size: clamp(14px, 1.08vw, 17px); line-height: 1.7; }
    .hero-facts { margin: 42px 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; border-top: 1px solid rgba(99, 190, 232, .16); }
    .hero-fact strong { display: block; color: #dff7ff; font-size: clamp(22px, 2.3vw, 35px); font-weight: 450; letter-spacing: -.055em; }
    .hero-fact span { max-width: 110px; margin-top: 6px; display: block; color: rgba(181, 210, 227, .48); font-size: 8px; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }
    .hero-scroll { width: fit-content; margin-top: 38px; display: inline-flex; align-items: center; gap: 12px; color: rgba(188, 219, 234, .5); font-size: 9px; letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
    .hero-scroll::after { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, rgba(106, 224, 255, .85), transparent); transition: width .35s ease; }
    .hero-scroll:hover::after { width: 60px; }

    .hero-stage-wrap { position: relative; min-width: 0; height: clamp(540px, 63vw, 720px); perspective: 1600px; }
    .hero-stage { --rx: 0deg; --ry: 0deg; position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s cubic-bezier(.2, .78, .2, 1); }
    .hero-halo { position: absolute; left: 48%; top: 48%; width: 76%; aspect-ratio: 1; border: 1px solid rgba(91, 206, 255, .13); border-radius: 50%; transform: translate(-50%, -50%) rotateX(66deg); box-shadow: 0 0 100px rgba(17, 112, 211, .11), inset 0 0 70px rgba(40, 171, 227, .04); }
    .hero-halo::before, .hero-halo::after { content: ""; position: absolute; border-radius: inherit; border: 1px dashed rgba(93, 213, 255, .13); }
    .hero-halo::before { inset: 14%; animation: haloSpin 27s linear infinite; }
    .hero-halo::after { inset: 31%; animation: haloSpin 18s linear infinite reverse; }
    .hero-window { position: absolute; padding: 0; overflow: hidden; border: 1px solid rgba(131, 213, 248, .2); border-radius: 18px; color: inherit; background: #081321; box-shadow: 0 42px 100px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .06); cursor: pointer; transform-style: preserve-3d; transition: border-color .35s ease, box-shadow .45s ease, filter .45s ease; }
    .hero-window:hover, .hero-window:focus-visible { border-color: rgba(122, 227, 255, .55); box-shadow: 0 50px 120px rgba(0, 0, 0, .52), 0 0 42px rgba(28, 150, 231, .14); outline: none; }
    .hero-window::after { content: ""; position: absolute; inset: 32px 0 0; pointer-events: none; background: linear-gradient(112deg, transparent 24%, rgba(187, 238, 255, .18) 49%, transparent 66%); transform: translateX(-130%); transition: transform .8s ease; }
    .hero-window:hover::after { transform: translateX(130%); }
    .hero-window--back { width: 70%; left: 2%; top: 11%; z-index: 1; opacity: .62; filter: saturate(.72) brightness(.68); transform: translateZ(-120px) rotateY(12deg) rotateZ(-4deg); }
    .hero-window--middle { width: 76%; right: 0; top: 25%; z-index: 2; opacity: .82; filter: saturate(.9) brightness(.82); transform: translateZ(-45px) rotateY(-9deg) rotateZ(3deg); }
    .hero-window--front { width: 82%; left: 5%; bottom: 7%; z-index: 3; transform: translateZ(60px) rotateY(4deg) rotateZ(-1deg); }
    .browser-bar { height: 33px; padding: 0 13px; display: flex; align-items: center; gap: 6px; color: rgba(190, 222, 238, .42); background: rgba(3, 10, 18, .96); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
    .browser-dot { width: 5px; height: 5px; border-radius: 50%; background: #77d8f7; box-shadow: 0 0 7px rgba(94, 218, 255, .6); }
    .browser-dot:nth-child(2) { opacity: .55; }
    .browser-dot:nth-child(3) { opacity: .25; }
    .browser-label { margin-left: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hero-window img { width: 100%; aspect-ratio: 2.04; display: block; object-fit: cover; filter: saturate(.88) contrast(1.03); transition: filter .45s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
    .hero-window:hover img { filter: saturate(1.03) contrast(1.02); transform: scale(1.018); }
    .stage-index { position: absolute; right: -2%; top: 4%; z-index: 6; color: rgba(155, 224, 248, .48); font-family: Georgia, serif; font-size: 12px; letter-spacing: .18em; writing-mode: vertical-rl; }
    .stage-chip { position: absolute; z-index: 7; padding: 9px 13px; border: 1px solid rgba(121, 216, 249, .18); border-radius: 999px; color: rgba(197, 232, 245, .62); background: rgba(3, 13, 26, .54); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 8px; letter-spacing: .13em; text-transform: uppercase; }
    .stage-chip--one { right: 2%; bottom: 7%; }
    .stage-chip--two { left: 0; top: 5%; }

    .theme-bridge { position: relative; height: clamp(130px, 13vw, 220px); margin-top: -1px; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #020810 0%, #091726 35%, #77909c 36%, #d7e7ed 62%, #f3f8fa 100%); }
    .theme-bridge::before { content: ""; position: absolute; inset: 34% 0 0; z-index: -1; background: repeating-linear-gradient(135deg, rgba(26, 94, 128, .055) 0 1px, transparent 1px 26px); }
    .theme-bridge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .theme-bridge path { fill: none; stroke: rgba(96, 210, 246, .34); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .theme-bridge .bridge-current { stroke: rgba(204, 247, 255, .94); stroke-dasharray: 2 98; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(85, 211, 250, .8)); animation: currentRun 6s linear infinite; }

    .manifesto { position: relative; color-scheme: light; color: var(--ink); background: linear-gradient(180deg, #f3f8fa, #eaf2f5 78%, #dce9ee); }
    .section-shell { width: var(--shell); margin: 0 auto; }
    .manifesto-inner { padding: clamp(90px, 12vw, 180px) 0 clamp(105px, 13vw, 190px); }
    .manifesto-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .62fr); gap: clamp(50px, 10vw, 170px); align-items: end; }
    .section-kicker { color: rgba(25, 104, 141, .65); }
    .manifesto-title, .archive-title, .selected-title, .principles-title, .cta-title { margin: 20px 0 0; font-size: clamp(52px, 7.2vw, 112px); font-weight: 430; line-height: .92; letter-spacing: -.065em; }
    .manifesto-title { color: #15394d; }
    .manifesto-title em, .archive-title em, .selected-title em, .principles-title em, .cta-title em { display: block; font-family: Georgia, "Times New Roman", serif; font-size: .72em; font-weight: 400; letter-spacing: -.045em; }
    .manifesto-title em, .archive-title em { color: #267997; }
    .manifesto-intro { margin: 0 0 7px; color: rgba(32, 69, 88, .68); font-size: clamp(14px, 1.15vw, 18px); line-height: 1.75; }
    .audiences { margin-top: clamp(64px, 8vw, 118px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(26, 102, 136, .18); border-bottom: 1px solid rgba(26, 102, 136, .18); }
    .audience { position: relative; min-height: 280px; padding: 34px clamp(24px, 3vw, 46px) 40px 0; }
    .audience + .audience { padding-left: clamp(24px, 3vw, 46px); border-left: 1px solid rgba(26, 102, 136, .16); }
    .audience-index { color: rgba(27, 105, 138, .44); font-family: Georgia, serif; font-size: 11px; letter-spacing: .12em; }
    .audience h3 { max-width: 300px; margin: 52px 0 15px; color: #183f53; font-size: clamp(23px, 2vw, 33px); font-weight: 480; line-height: 1.05; letter-spacing: -.04em; }
    .audience p { max-width: 360px; margin: 0; color: rgba(38, 73, 91, .64); font-size: 12px; line-height: 1.7; }
    .audience::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: #2584a8; box-shadow: 0 0 10px rgba(36, 140, 178, .35); transition: width .7s ease; }
    .audience:hover::after { width: 72%; }

    .selected { position: relative; padding: clamp(165px, 16vw, 240px) 0 clamp(100px, 12vw, 180px); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #dce9ee 0, #9bb0ba 42px, #344b58 96px, #0a1721 166px, transparent 240px), radial-gradient(circle at 8% 24%, rgba(20, 138, 191, .11), transparent 29%), radial-gradient(circle at 88% 78%, rgba(20, 83, 182, .13), transparent 32%), #040b13; }
    .selected::before { content: "SELECTED"; position: absolute; right: -2vw; top: 3vw; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(102, 206, 246, .045); font-size: clamp(110px, 18vw, 290px); font-weight: 650; line-height: .8; letter-spacing: -.085em; }
    .selected::after { content: ""; position: absolute; top: 0; left: 50%; z-index: -1; width: 1px; height: clamp(130px, 13vw, 205px); background: linear-gradient(180deg, rgba(38, 126, 160, .22), #9aeaff 48%, rgba(82, 202, 238, .08)); box-shadow: 0 0 11px rgba(95, 218, 249, .4); }
    .selected-heading { margin-bottom: clamp(54px, 7vw, 100px); display: flex; align-items: end; justify-content: space-between; gap: 50px; }
    .selected .section-kicker { color: rgba(118, 220, 255, .62); }
    .selected-title { max-width: 880px; color: #eefaff; }
    .selected-title em { color: #80daf7; }
    .selected-note { max-width: 330px; margin: 0 0 8px; color: rgba(189, 216, 231, .5); font-size: 11px; line-height: 1.7; }
    .featured-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
    .feature-card { --accent: #69dcff; position: relative; min-height: 570px; padding: 0; grid-column: span 5; overflow: hidden; border: 1px solid rgba(130, 210, 243, .14); border-radius: 22px; color: #f3fbff; background: #081321; text-align: left; box-shadow: 0 30px 80px rgba(0, 0, 0, .27); cursor: pointer; isolation: isolate; transition: transform .65s cubic-bezier(.2, .78, .2, 1), border-color .4s ease, box-shadow .5s ease; }
    .feature-card--large { min-height: 700px; grid-column: span 7; grid-row: span 2; }
    .feature-card--wide { min-height: 470px; grid-column: span 7; }
    .feature-card:hover, .feature-card:focus-within { transform: translateY(-7px); border-color: color-mix(in srgb, var(--accent) 48%, transparent); box-shadow: 0 45px 110px rgba(0, 0, 0, .38), 0 0 44px color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
    .feature-media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
    .feature-media img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.78) contrast(1.04) brightness(.76); transform: scale(1.02); transition: filter .65s ease, transform 1s cubic-bezier(.2, .72, .2, 1); }
    .feature-card:hover .feature-media img, .feature-card:focus-within .feature-media img { filter: saturate(.96) contrast(1.02) brightness(.86); transform: scale(1.055); }
    .feature-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 7, 13, .08) 10%, rgba(2, 8, 15, .18) 42%, rgba(2, 8, 15, .92) 100%), linear-gradient(115deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%); }
    .feature-top { position: absolute; top: 25px; left: 26px; right: 26px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(226, 241, 248, .7); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
    .feature-top::after { content: "↗"; width: 37px; height: 37px; border: 1px solid rgba(190, 231, 247, .25); border-radius: 50%; display: grid; place-items: center; color: var(--accent); font-size: 14px; transition: transform .4s ease, background .4s ease; }
    .feature-card:hover .feature-top::after, .feature-card:focus-within .feature-top::after { transform: rotate(45deg); background: rgba(5, 15, 27, .5); }
    .feature-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(28px, 3.2vw, 52px); }
    .feature-copy h3 { max-width: 650px; margin: 0; font-size: clamp(31px, 3.4vw, 59px); font-weight: 440; line-height: .95; letter-spacing: -.055em; }
    .feature-card:not(.feature-card--large) .feature-copy h3 { font-size: clamp(27px, 2.6vw, 42px); }
    .feature-copy p { max-width: 580px; margin: 17px 0 0; color: rgba(217, 233, 241, .66); font-size: 11px; line-height: 1.6; }
    .feature-signal { position: absolute; left: 0; bottom: 0; z-index: 3; width: 0; height: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); transition: width .7s ease; }
    .feature-card:hover .feature-signal, .feature-card:focus-within .feature-signal { width: 64%; }
    .feature-hit, .portfolio-card-hit { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
    .feature-hit:focus-visible, .portfolio-card-hit:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent, var(--card-accent)) 65%, #eafaff); outline-offset: -6px; }

    .archive-bridge { position: relative; height: clamp(90px, 10vw, 160px); margin-top: -1px; overflow: hidden; background: linear-gradient(180deg, #040b13 0, #0b1823 34%, #8ba1ac 35%, #e8f1f4 70%, #f5f9fa 100%); }
    .archive-bridge::after { content: ""; position: absolute; top: 33%; left: 50%; width: 1px; height: 67%; background: linear-gradient(#7ce5ff, rgba(31, 127, 164, .16)); box-shadow: 0 0 10px rgba(93, 221, 255, .5); }
    .archive-bridge i { position: absolute; top: calc(33% - 5px); left: calc(50% - 5px); width: 11px; height: 11px; border: 1px solid rgba(129, 226, 252, .9); border-radius: 50%; background: #0a1722; box-shadow: 0 0 0 6px rgba(98, 217, 251, .06), 0 0 16px rgba(98, 217, 251, .48); }

    .archive { color-scheme: light; color: var(--ink); background: linear-gradient(180deg, #f5f9fa 0%, #eaf2f5 57%, #e1ecef 100%); }
    .archive-inner { padding: clamp(84px, 10vw, 150px) 0 clamp(110px, 13vw, 190px); }
    .archive-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .55fr); gap: clamp(45px, 9vw, 150px); align-items: end; }
    .archive-title { max-width: 900px; color: #173d50; }
    .archive-intro { margin: 0 0 8px; color: rgba(35, 70, 87, .65); font-size: 13px; line-height: 1.75; }
    .portfolio-toolbar { position: sticky; top: 75px; z-index: 20; margin: clamp(52px, 7vw, 90px) 0 25px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(26, 104, 139, .15); border-radius: 18px; background: rgba(244, 249, 251, .84); box-shadow: 0 18px 50px rgba(24, 73, 99, .08), inset 0 1px rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); }
    .portfolio-filters { min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .portfolio-filters::-webkit-scrollbar { display: none; }
    .portfolio-filter { min-height: 38px; padding: 0 15px; flex: 0 0 auto; border: 1px solid transparent; border-radius: 12px; color: rgba(30, 67, 85, .58); background: transparent; font-size: 8px; font-weight: 550; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }
    .portfolio-filter:hover { color: #176f94; }
    .portfolio-filter.is-active { color: #f7fdff; border-color: rgba(20, 108, 151, .23); background: linear-gradient(180deg, #2587ac, #17688e); box-shadow: 0 8px 22px rgba(24, 110, 149, .18), inset 0 1px rgba(255, 255, 255, .2); }
    .portfolio-count { flex: 0 0 auto; padding-right: 9px; color: rgba(33, 75, 94, .48); font-family: Georgia, serif; font-size: 12px; letter-spacing: .1em; white-space: nowrap; }
    .archive-hint { margin: 0 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(37, 74, 91, .46); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
    .archive-hint::after { content: ""; width: min(38vw, 460px); height: 1px; background: linear-gradient(90deg, rgba(31, 116, 151, .2), transparent); }
    .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(15px, 1.7vw, 27px); }
    .portfolio-card { --card-accent: #277f9f; --mx: 50%; --my: 50%; position: relative; min-width: 0; min-height: 440px; padding: 0; overflow: hidden; border: 1px solid rgba(28, 102, 135, .14); border-radius: 19px; color: #183e51; background: rgba(249, 252, 253, .7); text-align: left; box-shadow: 0 22px 56px rgba(32, 72, 92, .075), inset 0 1px rgba(255, 255, 255, .9); cursor: pointer; content-visibility: auto; contain-intrinsic-size: auto 440px; isolation: isolate; transition: opacity .4s ease, transform .55s cubic-bezier(.2, .78, .2, 1), border-color .35s ease, box-shadow .45s ease; }
    .portfolio-card.is-hidden { display: none; }
    .portfolio-card--wide { grid-column: span 2; }
    .portfolio-card:hover, .portfolio-card:focus-within { transform: translateY(-7px); border-color: color-mix(in srgb, var(--card-accent) 38%, transparent); box-shadow: 0 34px 80px rgba(29, 73, 96, .14), 0 0 0 1px rgba(255, 255, 255, .6) inset; outline: none; }
    .portfolio-card::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--card-accent) 15%, transparent), transparent 34%); transition: opacity .35s ease; }
    .portfolio-card:hover::after, .portfolio-card:focus-within::after { opacity: 1; }
    .portfolio-card-media { position: relative; height: 244px; margin: 0; overflow: hidden; background: #d8e3e8; }
    .portfolio-card--wide .portfolio-card-media { height: 300px; }
    .portfolio-card-media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(rgba(33, 105, 136, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(33, 105, 136, .08) 1px, transparent 1px); background-size: 17px 17px; mix-blend-mode: multiply; opacity: .35; }
    .portfolio-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.76) contrast(.96); transition: transform .85s cubic-bezier(.2, .75, .2, 1), filter .6s ease; }
    .portfolio-card:hover .portfolio-card-media img, .portfolio-card:focus-within .portfolio-card-media img { transform: scale(1.045); filter: saturate(.98) contrast(1); }
    .portfolio-card-no { position: absolute; top: 15px; right: 15px; z-index: 4; min-width: 37px; height: 25px; padding: 0 9px; border: 1px solid rgba(236, 251, 255, .34); border-radius: 999px; display: grid; place-items: center; color: rgba(246, 253, 255, .9); background: rgba(3, 16, 25, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: Georgia, serif; font-size: 9px; letter-spacing: .1em; }
    .portfolio-card-copy { position: relative; z-index: 4; min-height: 194px; padding: 24px 25px 27px; display: flex; flex-direction: column; }
    .portfolio-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: color-mix(in srgb, var(--card-accent) 76%, #294a59); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
    .portfolio-card-meta::after { content: "↗"; width: 27px; height: 27px; border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent); border-radius: 50%; display: grid; place-items: center; font-size: 11px; transition: transform .35s ease, background .35s ease; }
    .portfolio-card:hover .portfolio-card-meta::after, .portfolio-card:focus-within .portfolio-card-meta::after { transform: rotate(45deg); background: color-mix(in srgb, var(--card-accent) 8%, transparent); }
    .portfolio-card h3 { margin: 19px 0 0; color: #173d50; font-size: clamp(22px, 1.7vw, 29px); font-weight: 480; line-height: 1.02; letter-spacing: -.04em; }
    .portfolio-card p { margin: 13px 0 0; color: rgba(41, 74, 90, .62); font-size: 11px; line-height: 1.55; }
    .portfolio-card-line { width: 28px; height: 1px; margin-top: auto; background: var(--card-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--card-accent) 45%, transparent); transition: width .45s ease; }
    .portfolio-card:hover .portfolio-card-line, .portfolio-card:focus-within .portfolio-card-line { width: 70px; }
    .portfolio-empty { margin: 50px 0 0; padding: 50px; border: 1px solid rgba(26, 103, 137, .15); border-radius: 20px; color: rgba(32, 72, 91, .64); text-align: center; }

    .principles { position: relative; padding: clamp(165px, 16vw, 240px) 0 clamp(115px, 13vw, 200px); overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #e1ecef 0, #9cafb8 42px, #304652 98px, #091620 168px, transparent 240px), radial-gradient(circle at 80% 20%, rgba(26, 123, 205, .16), transparent 31%), #030a12; }
    .principles::before { content: "LOGIC"; position: absolute; left: -2vw; bottom: -2vw; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(105, 210, 246, .045); font-size: clamp(130px, 23vw, 380px); font-weight: 650; line-height: .76; letter-spacing: -.09em; }
    .principles::after { content: ""; position: absolute; top: 0; left: 50%; z-index: -1; width: 1px; height: clamp(130px, 13vw, 205px); background: linear-gradient(180deg, rgba(31, 114, 146, .2), #92e7ff 48%, rgba(72, 194, 232, .07)); box-shadow: 0 0 11px rgba(88, 210, 246, .38); }
    .principles-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr); gap: clamp(50px, 9vw, 150px); align-items: end; }
    .principles .section-kicker { color: rgba(111, 220, 255, .62); }
    .principles-title { max-width: 900px; color: #eefaff; }
    .principles-title em { color: #80daf7; }
    .principles-intro { margin: 0 0 8px; color: rgba(191, 217, 230, .54); font-size: 12px; line-height: 1.75; }
    .principle-list { margin-top: clamp(65px, 8vw, 118px); border-top: 1px solid rgba(101, 202, 238, .16); }
    .principle { position: relative; min-height: 130px; padding: 28px 0; display: grid; grid-template-columns: 90px minmax(240px, .75fr) minmax(320px, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; border-bottom: 1px solid rgba(101, 202, 238, .13); transition: padding-left .45s ease, background .45s ease; }
    .principle:hover { padding-left: 18px; background: linear-gradient(90deg, rgba(37, 146, 194, .07), transparent 68%); }
    .principle-no { color: rgba(116, 218, 251, .4); font-family: Georgia, serif; font-size: 12px; letter-spacing: .15em; }
    .principle h3 { margin: 0; color: #e8f7fc; font-size: clamp(23px, 2.2vw, 34px); font-weight: 450; letter-spacing: -.035em; }
    .principle p { max-width: 610px; margin: 0; color: rgba(191, 216, 228, .53); font-size: 11px; line-height: 1.7; }

    .portfolio-cta { position: relative; min-height: 630px; padding: 100px 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 55%, rgba(24, 117, 201, .19), transparent 34%), linear-gradient(180deg, #030a12, #061525); }
    .portfolio-cta::before, .portfolio-cta::after { content: ""; position: absolute; z-index: -1; border: 1px solid rgba(105, 213, 249, .12); border-radius: 50%; }
    .portfolio-cta::before { width: min(70vw, 900px); aspect-ratio: 1; }
    .portfolio-cta::after { width: min(45vw, 560px); aspect-ratio: 1; border-style: dashed; animation: haloSpin 35s linear infinite; }
    .cta-inner { width: min(100% - 48px, 1060px); text-align: center; }
    .cta-kicker { color: rgba(121, 224, 255, .58); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
    .cta-title { color: #f1fbff; }
    .cta-title em { color: #80daf7; }
    .cta-text { max-width: 630px; margin: 28px auto 0; color: rgba(198, 223, 235, .58); font-size: 13px; line-height: 1.75; }
    .cta-button { min-width: 210px; height: 52px; margin-top: 36px; padding: 0 24px; border: 1px solid rgba(104, 214, 255, .38); border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; color: #eefbff; background: linear-gradient(180deg, rgba(27, 126, 205, .86), rgba(8, 71, 131, .95)); box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 17px 42px rgba(4, 78, 145, .24); font-size: 11px; letter-spacing: .05em; text-decoration: none; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
    .cta-button::after { content: "↗"; color: #a9efff; font-size: 16px; }
    .cta-button:hover, .cta-button:focus-visible { transform: translateY(-3px); border-color: rgba(109, 225, 255, .68); box-shadow: 0 22px 52px rgba(3, 85, 151, .32); }

    [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .85s cubic-bezier(.2, .75, .2, 1); }
    [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

    .case-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: clamp(12px, 3vw, 42px); }
    .case-modal-backdrop { position: absolute; inset: 0; background: rgba(1, 5, 10, .84); -webkit-backdrop-filter: blur(22px) saturate(80%); backdrop-filter: blur(22px) saturate(80%); opacity: 0; animation: modalBackdropIn .35s ease forwards; }
    .case-dialog { position: relative; width: min(100%, 1460px); height: min(880px, calc(100svh - 50px)); overflow: hidden; display: grid; grid-template-columns: minmax(300px, .38fr) minmax(0, 1fr); border: 1px solid rgba(112, 212, 247, .22); border-radius: 24px; color: #eaf8ff; background: linear-gradient(145deg, rgba(6, 18, 31, .98), rgba(3, 10, 18, .99)); box-shadow: 0 50px 150px rgba(0, 0, 0, .65), inset 0 1px rgba(255, 255, 255, .06); opacity: 0; transform: translateY(24px) scale(.985); animation: modalDialogIn .5s cubic-bezier(.2, .78, .2, 1) .06s forwards; }
    .case-dialog::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(93, 195, 237, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 195, 237, .035) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 45%); mask-image: linear-gradient(90deg, #000, transparent 45%); }
    .case-modal-copy { position: relative; z-index: 2; padding: clamp(34px, 4vw, 66px); display: flex; flex-direction: column; border-right: 1px solid rgba(106, 201, 239, .14); }
    .case-modal-index { color: rgba(118, 220, 255, .46); font-family: Georgia, serif; font-size: 11px; letter-spacing: .16em; }
    .case-modal-category { margin-top: auto; color: rgba(116, 220, 255, .58); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
    .case-modal-title { margin: 20px 0 0; color: #f2fbff; font-size: clamp(36px, 4vw, 67px); font-weight: 440; line-height: .94; letter-spacing: -.06em; white-space: nowrap; overflow-wrap: normal; }
    .case-modal-description { margin: 24px 0 0; color: rgba(204, 226, 237, .62); font-size: 12px; line-height: 1.7; }
    .case-modal-actions { margin-top: 35px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
    .case-modal-link { min-height: 43px; padding: 0 17px; border: 1px solid rgba(107, 216, 255, .29); border-radius: 11px; display: inline-flex; align-items: center; gap: 12px; color: #e9faff; background: rgba(21, 111, 178, .18); font-size: 9px; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
    .case-modal-link::after { content: "↗"; color: #82e3ff; font-size: 14px; }
    .case-modal-link:hover { background: rgba(24, 128, 197, .28); }
    .case-modal-close { position: absolute; top: 18px; right: 18px; z-index: 8; width: 43px; height: 43px; padding: 0; border: 1px solid rgba(129, 220, 250, .24); border-radius: 50%; color: #bdefff; background: rgba(3, 13, 23, .74); box-shadow: 0 10px 28px rgba(0, 0, 0, .24); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: transform .35s ease, border-color .35s ease; }
    .case-modal-close::before, .case-modal-close::after { content: ""; position: absolute; top: 20px; left: 12px; width: 18px; height: 1px; background: currentColor; }
    .case-modal-close::before { transform: rotate(45deg); }
    .case-modal-close::after { transform: rotate(-45deg); }
    .case-modal-close:hover, .case-modal-close:focus-visible { transform: rotate(90deg); border-color: rgba(139, 231, 255, .6); outline: none; }
    .case-modal-preview { position: relative; min-width: 0; min-height: 0; padding: clamp(45px, 5vw, 82px) clamp(24px, 4vw, 66px); overflow: auto; background: radial-gradient(circle at 68% 35%, rgba(24, 110, 186, .17), transparent 35%); scrollbar-color: rgba(94, 204, 239, .35) transparent; }
    .case-modal-frame { position: relative; width: 100%; min-height: 100%; border: 1px solid rgba(132, 213, 242, .18); border-radius: 17px; overflow: hidden; background: #d9e4e9; box-shadow: 0 38px 90px rgba(0, 0, 0, .4); transform: perspective(1600px) rotateY(-2deg) rotateX(1deg); transform-origin: center; }
    .case-modal-frame .browser-bar { position: sticky; top: 0; z-index: 5; }
    .case-modal-shot { width: 100%; display: block; filter: saturate(.82) contrast(1.02); opacity: 0; transition: opacity .4s ease, filter .45s ease; }
    .case-modal-shot.is-loaded { opacity: 1; }
    .case-modal-frame::after { content: ""; position: absolute; inset: 33px 0 0; z-index: 4; pointer-events: none; background: linear-gradient(rgba(55, 152, 191, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(55, 152, 191, .055) 1px, transparent 1px); background-size: 22px 22px; mix-blend-mode: multiply; }
    .case-modal-loading { position: absolute; left: 50%; top: 50%; z-index: 2; width: 54px; height: 54px; border: 1px solid rgba(111, 218, 250, .2); border-top-color: #80e4ff; border-radius: 50%; transform: translate(-50%, -50%); animation: loaderSpin .9s linear infinite; }
    .case-modal-frame.is-loaded .case-modal-loading { display: none; }

    .site-footer { --footer-steel: #236f8b; --footer-ice: #173f54; position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; color-scheme: light; color: #18384b; background: linear-gradient(180deg, #718b98 0, rgba(151, 176, 187, .96) 30px, rgba(214, 230, 236, .92) 72px, rgba(239, 247, 249, .58) 112px, transparent 156px), radial-gradient(circle at 17% 31%, rgba(25, 135, 178, .13), transparent 31%), radial-gradient(circle at 84% 68%, rgba(55, 113, 147, .1), transparent 34%), linear-gradient(146deg, #f5fafb 0%, #e7f1f5 48%, #f0f7f9 100%); border-top: 1px solid rgba(166, 225, 241, .34); box-shadow: inset 0 1px rgba(240, 253, 255, .5); }
    .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .62; background-image: linear-gradient(rgba(28, 106, 141, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 106, 141, .07) 1px, transparent 1px), repeating-linear-gradient(135deg, transparent 0 38px, rgba(29, 103, 138, .022) 38px 39px); background-size: 44px 44px, 44px 44px, auto; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .82) 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .82) 60%, transparent 100%); }
    .site-footer::after { content: "FLEXCORE"; position: absolute; right: clamp(18px, 3vw, 52px); bottom: clamp(20px, 3.5vh, 42px); z-index: -1; pointer-events: none; color: transparent; -webkit-text-stroke: 1px rgba(32, 100, 130, .065); font-size: clamp(88px, 11.5vw, 190px); font-weight: 600; line-height: 1; letter-spacing: -.085em; white-space: nowrap; }
    .footer-signal { position: absolute; top: 0; left: 5.2vw; right: 5.2vw; z-index: 3; height: 92px; overflow: hidden; pointer-events: none; }
    .footer-signal::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 53px; background: linear-gradient(180deg, rgba(196, 239, 249, .92), rgba(30, 131, 169, .32)); box-shadow: 0 0 13px rgba(72, 187, 219, .34); }
    .footer-signal-rail { position: absolute; top: 53px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(28, 121, 158, .2) 11%, rgba(51, 145, 178, .54) 50%, rgba(28, 121, 158, .2) 89%, transparent); }
    .footer-signal-rail::before, .footer-signal-rail::after { content: ""; position: absolute; top: 0; width: clamp(70px, 10vw, 150px); height: 1px; opacity: .92; background: linear-gradient(90deg, transparent, #effcff 50%, transparent); filter: drop-shadow(0 0 6px rgba(59, 169, 202, .7)); animation: footerSignalRun 7.5s linear infinite; }
    .footer-signal-rail::after { animation-delay: -3.75s; }
    .footer-signal-node { position: absolute; top: 47px; left: 50%; width: 13px; height: 13px; border: 1px solid rgba(42, 133, 166, .72); border-radius: 50%; background: #eff8fa; box-shadow: 0 0 0 6px rgba(42, 130, 163, .055), 0 0 18px rgba(47, 149, 181, .3); transform: translateX(-50%); }
    .footer-signal-node::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; background: #247c9c; box-shadow: 0 0 8px rgba(42, 145, 179, .55); animation: footerNodePulse 2.8s ease-in-out infinite; }
    .footer-inner { position: relative; z-index: 2; width: min(100%, 1600px); min-height: 100vh; margin: 0 auto; padding: clamp(116px, 14vh, 158px) clamp(30px, 5.2vw, 82px) clamp(34px, 4.5vh, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(46px, 6vh, 74px); }
    .footer-main { display: grid; grid-template-columns: minmax(340px, .82fr) minmax(560px, 1.18fr); gap: clamp(64px, 8vw, 132px); align-items: start; }
    .footer-brand { min-width: 0; overflow: visible; }
    .footer-kicker { margin: 0 0 16px; display: flex; align-items: center; gap: 11px; color: rgba(48, 91, 109, .58); font-size: 9px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
    .footer-kicker::before { content: ""; width: 24px; height: 1px; background: linear-gradient(90deg, var(--footer-steel), transparent); box-shadow: 0 0 7px rgba(48, 141, 174, .2); }
    .footer-wordmark { width: fit-content; padding: .08em .035em .14em 0; display: inline-block; overflow: visible; color: var(--footer-ice); background: linear-gradient(108deg, #173f54 0%, #6f9bab 34%, #245f78 58%, #89afbc 78%, #173f54 100%); background-size: 230% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 12px 30px rgba(49, 108, 130, .1)); font-size: clamp(48px, 5.1vw, 84px); font-weight: 500; line-height: 1; letter-spacing: -.075em; white-space: nowrap; text-decoration: none; animation: footerWordmarkFlow 10s ease-in-out infinite alternate; }
    .footer-tagline { max-width: 470px; margin: 30px 0 0; color: rgba(48, 78, 92, .75); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.7; }
    .footer-accreditation { width: fit-content; max-width: 100%; margin-top: 24px; padding: 10px 13px 10px 11px; display: inline-flex; align-items: center; gap: 9px; color: rgba(42, 84, 102, .75); border: 1px solid rgba(34, 111, 141, .18); border-radius: 999px; background: rgba(255, 255, 255, .48); font-size: 9px; letter-spacing: .09em; line-height: 1.35; text-decoration: none; text-transform: uppercase; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .footer-accreditation::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #277f9f; box-shadow: 0 0 10px rgba(43, 141, 174, .42); animation: footerNodePulse 2.8s ease-in-out infinite; }
    .footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.3vw, 54px); }
    .footer-column { position: relative; min-width: 0; padding-top: 19px; border-top: 1px solid rgba(29, 104, 134, .18); }
    .footer-column::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 1px; background: #277c9c; box-shadow: 0 0 8px rgba(41, 137, 170, .3); transition: width .45s ease; }
    .footer-column:hover::before { width: min(100%, 88px); }
    .footer-column-title { margin: 0 0 21px; color: rgba(47, 86, 102, .58); font-size: 9px; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; }
    .footer-links { margin: 0; padding: 0; display: grid; gap: 13px; list-style: none; }
    .footer-links a, .footer-links span { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; color: rgba(38, 70, 84, .78); font-size: 12px; line-height: 1.45; text-decoration: none; }
    .footer-links a { transition: color .28s ease, transform .28s ease; }
    .footer-links a::after { content: ""; width: 13px; height: 1px; opacity: 0; background: currentColor; transform: translateX(-8px); transition: opacity .28s ease, transform .28s ease; }
    .footer-links a:hover, .footer-links a:focus-visible { color: #0a4865; transform: translateX(3px); }
    .footer-links a:hover::after, .footer-links a:focus-visible::after { opacity: .58; transform: translateX(0); }
    .footer-links .footer-contact-primary { color: #153f54; font-size: 14px; letter-spacing: -.015em; }
    .footer-links .footer-hours { color: rgba(61, 91, 103, .58); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .footer-meta { margin-top: auto; display: grid; gap: 25px; }
    .footer-location { padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid rgba(29, 104, 134, .15); border-bottom: 1px solid rgba(29, 104, 134, .15); }
    .footer-address { display: flex; align-items: center; gap: 13px; color: rgba(35, 73, 90, .78); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.45; text-decoration: none; }
    .footer-address::before { content: ""; width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid #337e99; border-radius: 50%; box-shadow: 0 0 0 5px rgba(48, 132, 162, .05), 0 0 10px rgba(51, 139, 169, .18); }
    .footer-location-meta { display: flex; align-items: center; gap: 15px; color: rgba(55, 83, 95, .54); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
    .footer-location-meta::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, rgba(35, 112, 141, .4)); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: rgba(59, 85, 96, .52); font-size: 9px; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; }
    .footer-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
    .footer-to-top { display: inline-flex; align-items: center; gap: 12px; color: rgba(39, 77, 94, .7); text-decoration: none; }
    .footer-to-top::after { content: ""; width: 8px; height: 8px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; transform: translateY(2px) rotate(45deg); transition: transform .3s ease; }
    .footer-to-top:hover::after { transform: translateY(-3px) rotate(45deg); }

    @keyframes headerIn { to { opacity: 1; transform: translateY(0); } }
    @keyframes miniLogoShimmer { to { background-position: 100% 50%; } }
    @keyframes currentRun { to { stroke-dashoffset: -100; } }
    @keyframes nodePulse { 50% { opacity: .3; } }
    @keyframes haloSpin { to { transform: rotate(360deg); } }
    @keyframes footerSignalRun { from { left: -14%; } to { left: 100%; } }
    @keyframes footerNodePulse { 50% { opacity: .36; transform: scale(.65); } }
    @keyframes footerWordmarkFlow { to { background-position: 100% 50%; } }
    @keyframes modalBackdropIn { to { opacity: 1; } }
    @keyframes modalDialogIn { to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes loaderSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

    @media (max-width: 1180px) {
      :root { --shell: min(100% - 48px, 1480px); }
      .mini-logo { margin-right: 34px; }
      .main-nav { gap: 24px; }
      .hero-shell { grid-template-columns: minmax(350px, .72fr) minmax(500px, 1.28fr); gap: 44px; }
      .hero-title { font-size: clamp(59px, 7.7vw, 94px); }
      .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .footer-main { grid-template-columns: minmax(280px, .7fr) minmax(540px, 1.3fr); gap: 58px; }
    }

    @media (max-width: 980px) {
      .hero-shell { padding-top: 125px; grid-template-columns: 1fr; gap: 45px; }
      .hero-copy { max-width: 760px; }
      .hero-stage-wrap { width: min(100%, 780px); height: 610px; margin: 0 auto; }
      .manifesto-heading, .archive-heading, .principles-heading { grid-template-columns: 1fr; gap: 30px; }
      .manifesto-intro, .archive-intro, .principles-intro { max-width: 690px; }
      .selected-heading { align-items: flex-start; flex-direction: column; gap: 26px; }
      .feature-card, .feature-card--large, .feature-card--wide { min-height: 560px; grid-column: span 6; grid-row: auto; }
      .feature-card--wide { grid-column: span 12; }
      .principle { grid-template-columns: 58px minmax(220px, .75fr) minmax(280px, 1fr); }
      .case-dialog { grid-template-columns: minmax(270px, .4fr) minmax(0, 1fr); }
      .footer-main { grid-template-columns: 1fr; }
      .footer-brand { max-width: 650px; }
    }

    @media (max-width: 860px) {
      .main-nav { position: absolute; top: 76px; left: 18px; right: 18px; z-index: 2; min-height: 0; padding: 9px; display: grid; gap: 0; overflow: hidden; border: 1px solid rgba(83, 184, 232, .25); border-radius: 18px; background: linear-gradient(rgba(62, 166, 222, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(62, 166, 222, .045) 1px, transparent 1px), rgba(3, 12, 24, .95); background-size: 24px 24px, 24px 24px, auto; box-shadow: 0 22px 60px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px) scale(.985); transform-origin: 80% 0; transition: opacity .28s ease, transform .38s cubic-bezier(.2, .78, .2, 1), visibility 0s linear .38s, background .7s ease, border-color .7s ease; }
      .main-nav::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(119, 226, 255, .8), transparent); box-shadow: 0 0 12px rgba(85, 211, 255, .42); }
      .site-header.is-menu-open .main-nav { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
      .main-nav a { min-height: 48px; padding: 0 14px; display: flex; align-items: center; border-bottom: 1px solid rgba(102, 178, 218, .12); font-size: 12px; letter-spacing: .045em; }
      .main-nav a:last-child { border-bottom: 0; }
      .site-header.is-light .main-nav { border-color: rgba(25, 111, 158, .2); background: linear-gradient(rgba(21, 112, 160, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 112, 160, .045) 1px, transparent 1px), rgba(245, 250, 252, .96); background-size: 24px 24px, 24px 24px, auto; box-shadow: 0 22px 60px rgba(25, 71, 99, .16), inset 0 1px rgba(255, 255, 255, .7); }
      .menu-toggle { display: block; }
      .mini-logo { margin-right: 0; }
      .header-actions { gap: 10px; }
      .audiences { grid-template-columns: 1fr; }
      .audience { min-height: 220px; padding: 30px 0 35px; }
      .audience + .audience { padding-left: 0; border-top: 1px solid rgba(26, 102, 136, .16); border-left: 0; }
      .audience h3 { margin-top: 34px; }
      .case-dialog { height: calc(100svh - 24px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
      .case-modal-copy { padding: 28px 65px 28px 28px; border-right: 0; border-bottom: 1px solid rgba(106, 201, 239, .14); }
      .case-modal-category { margin-top: 30px; }
      .case-modal-title { font-size: clamp(30px, 6vw, 47px); }
      .case-modal-description { margin-top: 15px; }
      .case-modal-actions { margin-top: 20px; }
      .case-modal-preview { padding: 35px 24px; }
    }

    @media (max-width: 700px) {
      :root { --shell: min(100% - 32px, 1480px); }
      .hero-shell { min-height: auto; padding: 112px 0 74px; gap: 36px; }
      .breadcrumbs { margin-bottom: 38px; }
      .hero-title { font-size: clamp(54px, 17vw, 78px); }
      .hero-lead { margin-top: 25px; font-size: 14px; }
      .hero-facts { gap: 12px; }
      .hero-fact strong { font-size: 25px; }
      .hero-stage-wrap { height: 430px; }
      .hero-window { border-radius: 12px; }
      .hero-window--back { width: 78%; left: 0; top: 10%; }
      .hero-window--middle { width: 82%; top: 27%; }
      .hero-window--front { width: 88%; left: 3%; bottom: 3%; }
      .browser-bar { height: 27px; }
      .stage-chip { display: none; }
      .theme-bridge { height: 110px; }
      .manifesto-inner, .archive-inner { padding-block: 82px 105px; }
      .manifesto-title, .archive-title, .selected-title, .principles-title, .cta-title { font-size: clamp(48px, 14vw, 68px); }
      .featured-grid { grid-template-columns: 1fr; }
      .feature-card, .feature-card--large, .feature-card--wide { min-height: 480px; grid-column: auto; }
      .portfolio-toolbar { top: 68px; margin-top: 45px; padding: 8px; }
      .portfolio-count { display: none; }
      .portfolio-filter { min-height: 35px; padding-inline: 12px; font-size: 7px; }
      .portfolio-grid { grid-template-columns: 1fr; gap: 14px; }
      .portfolio-card, .portfolio-card--wide { min-height: 410px; grid-column: auto; contain-intrinsic-size: auto 410px; }
      .portfolio-card-media, .portfolio-card--wide .portfolio-card-media { height: 220px; }
      .portfolio-card-copy { min-height: 190px; }
      .principle { padding: 27px 0; grid-template-columns: 46px 1fr; gap: 12px; }
      .principle p { grid-column: 2; }
      .portfolio-cta { min-height: 560px; }
      .case-modal { padding: 6px; }
      .case-dialog { height: calc(100svh - 12px); border-radius: 18px; }
      .case-modal-copy { max-height: 42svh; padding: 20px 58px 18px 20px; overflow-y: auto; }
      .case-modal-index { display: none; }
      .case-modal-category { margin-top: 0; }
      .case-modal-title { margin-top: 11px; }
      .case-modal-description { font-size: 11px; }
      .case-modal-actions { margin-top: 14px; }
      .case-modal-link { width: 100%; min-height: 46px; justify-content: center; }
      .case-modal-close { top: 12px; right: 12px; }
      .case-modal-preview { min-height: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; }
      .case-modal-frame { width: max(100%, 620px); min-height: 0; transform: none; }
      .footer-inner { padding-inline: 20px; }
      .footer-columns { grid-template-columns: 1fr; gap: 32px; }
      .footer-location { align-items: flex-start; flex-direction: column; gap: 15px; }
      .footer-location-meta { white-space: normal; }
      .footer-bottom { align-items: flex-start; flex-direction: column; }
      .site-footer::after { right: 16px; bottom: 18px; font-size: 17vw; }
    }

    @media (max-width: 620px) {
      .site-header { height: 74px; min-height: 74px; max-height: 74px; padding: 19px 18px 0; }
      .header-actions .primary { min-width: 124px; height: 34px; padding-inline: 12px; font-size: 11px; }
      .main-nav { top: 66px; left: 10px; right: 10px; }
    }

    @media (max-width: 450px) {
      .header-actions .primary { min-width: 112px; padding-inline: 9px; font-size: 10px; }
      .hero-title { font-size: clamp(49px, 16vw, 67px); }
      .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero-fact:last-child { display: none; }
      .hero-stage-wrap { height: 350px; }
      .feature-card, .feature-card--large, .feature-card--wide { min-height: 430px; }
      .feature-copy { padding: 25px 22px; }
      .archive-hint::after { display: none; }
      .footer-wordmark { font-size: clamp(46px, 15vw, 60px); }
      .footer-accreditation { align-items: flex-start; border-radius: 16px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
      [data-reveal] { opacity: 1; transform: none; transition: none; }
      .hero-stage { transform: none !important; }
      .feature-card, .portfolio-card, .portfolio-card img, .hero-window img { transition: none; }
    }

    /* Portfolio 3.0 — expanding interface runway */
    .folio-hero {
      --hero-glow-x: 76%;
      --hero-glow-y: 38%;
      position: relative;
      min-height: max(780px, 100svh);
      overflow: hidden;
      isolation: isolate;
      color-scheme: light;
      color: #071d31;
      background:
        radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y), rgba(215, 255, 67, .2), transparent 23%),
        radial-gradient(circle at 8% 89%, rgba(83, 201, 224, .14), transparent 27%),
        linear-gradient(135deg, #f1f4ef 0%, #e5ece8 47%, #dbe7e3 100%);
    }

    .folio-hero::before {
      content: "SELECTED / WORK";
      position: absolute;
      left: -1.4vw;
      bottom: -2.4vw;
      z-index: -2;
      color: transparent;
      -webkit-text-stroke: 1px rgba(7, 39, 57, .06);
      font-size: clamp(120px, 19vw, 310px);
      font-weight: 760;
      line-height: .72;
      letter-spacing: -.09em;
      white-space: nowrap;
      pointer-events: none;
    }

    .folio-hero::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      z-index: -4;
      width: min(38vw, 670px);
      height: 100%;
      background: linear-gradient(180deg, rgba(215, 255, 67, .72), rgba(177, 222, 76, .2) 48%, transparent 84%);
      clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
      opacity: .42;
      pointer-events: none;
    }

    .folio-wall {
      position: absolute;
      top: clamp(122px, 14vh, 155px);
      right: clamp(24px, 3.2vw, 58px);
      bottom: clamp(92px, 11vh, 118px);
      z-index: 1;
      width: min(64vw, 1080px);
      display: flex;
      align-items: stretch;
      gap: clamp(5px, .55vw, 10px);
      transform: translate3d(var(--wall-x, 0), var(--wall-y, 0), 0);
      transition: transform .8s cubic-bezier(.2, .75, .2, 1);
      will-change: transform;
      opacity: 0;
      animation: folioWallIn 1.05s cubic-bezier(.2, .75, .2, 1) .08s forwards;
    }

    .folio-tile {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      margin: 0;
      overflow: hidden;
      border: 1px solid rgba(230, 242, 238, .72);
      border-radius: clamp(15px, 1.5vw, 25px);
      background: #9eb2ae;
      box-shadow: 0 28px 70px rgba(5, 31, 46, .17), inset 0 1px rgba(255, 255, 255, .28);
      transform: translateZ(0);
      transform-origin: 50% 85%;
      transition: flex-grow .75s cubic-bezier(.2, .75, .2, 1), transform .65s cubic-bezier(.2, .75, .2, 1), filter .45s ease, box-shadow .55s ease;
    }

    .folio-tile::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(3, 19, 31, .02), rgba(3, 19, 31, .14) 50%, rgba(3, 19, 31, .82));
      transition: opacity .45s ease;
    }

    .folio-tile::after {
      content: "";
      position: absolute;
      top: 17px;
      right: 17px;
      z-index: 3;
      width: 7px;
      height: 7px;
      border: 1px solid rgba(230, 255, 240, .72);
      border-radius: 50%;
      box-shadow: 0 0 0 5px rgba(226, 255, 240, .06), 0 0 18px rgba(215, 255, 67, .42);
    }

    .folio-tile img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: left top;
      filter: contrast(1.02) saturate(.72) brightness(.83);
      transform: scale(1.025);
      transition: filter .55s ease, transform .85s cubic-bezier(.2, .75, .2, 1);
    }

    .folio-tile figcaption {
      position: absolute;
      left: 15px;
      bottom: 17px;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #f1faf7;
      font-size: 7px;
      font-weight: 680;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    .folio-tile figcaption span { color: #d7ff43; font-family: Georgia, serif; font-size: 10px; font-weight: 400; letter-spacing: 0; }
    .folio-tile--01 { flex-grow: 2.35; transform: translateY(22px); }
    .folio-tile--02 { transform: translateY(-13px); }
    .folio-tile--03 { transform: translateY(31px); }
    .folio-tile--04 { transform: translateY(5px); }
    .folio-tile--05 { transform: translateY(-24px); }

    @media (hover: hover) and (pointer: fine) {
      .folio-wall:hover .folio-tile { flex-grow: .78; filter: brightness(.84); }
      .folio-wall .folio-tile:hover { flex-grow: 3.65; filter: brightness(1); box-shadow: 0 36px 92px rgba(5, 31, 46, .26), inset 0 1px rgba(255, 255, 255, .35); transform: translateY(-10px); }
      .folio-tile:hover::before { opacity: .66; }
      .folio-tile:hover img { filter: contrast(1.02) saturate(.94) brightness(.94); transform: scale(1.055); }
    }

    .folio-grade {
      position: absolute;
      top: 18%;
      right: 4%;
      z-index: 0;
      width: min(48vw, 820px);
      aspect-ratio: 1.5;
      pointer-events: none;
      border: 1px solid rgba(34, 84, 91, .1);
      border-radius: 50%;
      background: rgba(255, 255, 255, .2);
      filter: blur(.2px);
      transform: rotate(-12deg);
    }

    .folio-hero-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .5;
      background-image: linear-gradient(rgba(5, 31, 46, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 31, 46, .065) 1px, transparent 1px);
      background-size: clamp(44px, 5vw, 78px) clamp(44px, 5vw, 78px);
      -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .28) 42%, transparent 80%);
      mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, .28) 42%, transparent 80%);
    }

    .folio-hero-topline {
      position: absolute;
      top: 104px;
      left: clamp(28px, 3vw, 48px);
      right: clamp(28px, 3vw, 48px);
      z-index: 12;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      color: rgba(5, 30, 46, .62);
      font-size: 8px;
      font-weight: 650;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: 0;
      animation: folioChromeIn .7s ease .65s forwards;
    }

    .folio-hero-title {
      position: absolute;
      left: clamp(28px, 3.2vw, 58px);
      top: 47%;
      z-index: 7;
      width: min(61vw, 940px);
      margin: 0;
      color: #071f32;
      font-size: clamp(90px, 11.4vw, 184px);
      font-weight: 720;
      line-height: .69;
      letter-spacing: -.09em;
      text-align: left;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .folio-hero-title span { display: block; opacity: 0; animation: folioTitleIn .95s cubic-bezier(.17, .78, .2, 1) .34s forwards; }
    .folio-hero-title span:first-child { --title-from: -8vw; }
    .folio-hero-title span:last-child { margin-left: .48em; color: #d7ff43; text-shadow: 0 13px 36px rgba(7, 37, 51, .2); --title-from: 8vw; animation-delay: .42s; }

    .folio-hero-bottom {
      position: absolute;
      left: clamp(28px, 3vw, 48px);
      right: clamp(28px, 3vw, 48px);
      bottom: clamp(25px, 4vh, 46px);
      z-index: 14;
      display: grid;
      grid-template-columns: minmax(250px, 390px) 1fr auto;
      gap: clamp(30px, 6vw, 100px);
      align-items: end;
      opacity: 0;
      animation: folioChromeIn .8s ease .72s forwards;
    }

    .folio-hero-bottom p { margin: 0; color: rgba(7, 37, 53, .68); font-size: clamp(11px, .95vw, 14px); line-height: 1.65; }
    .folio-hero-bottom > a { width: fit-content; min-width: 220px; height: 50px; padding: 0 8px 0 18px; justify-self: center; border: 1px solid rgba(7, 39, 57, .26); border-radius: 999px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; color: #eef7f2; background: #071f32; box-shadow: 0 14px 35px rgba(5, 30, 44, .2); font-size: 9px; font-weight: 650; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: transform .35s ease, box-shadow .35s ease, background .35s ease; }
    .folio-hero-bottom > a i { width: 35px; height: 35px; border-radius: 50%; display: grid; place-items: center; color: #d7ff43; background: #071d31; font-style: normal; font-size: 14px; }
    .folio-hero-bottom > a:hover { background: #0b3048; transform: translateY(-4px); box-shadow: 0 20px 48px rgba(5, 30, 44, .28); }
    .folio-hero-counter { display: flex; align-items: baseline; gap: 5px; color: #071f32; }
    .folio-hero-counter strong { font-family: Georgia, serif; font-size: clamp(36px, 4vw, 64px); font-weight: 400; letter-spacing: -.05em; }
    .folio-hero-counter span { color: rgba(7, 39, 57, .48); font-size: 10px; }

    .folio-reel { position: relative; min-height: max(690px, 100svh); color: #f1f8fb; background: #02070d; }
    .folio-reel-stage { --reel-accent: #6f9880; position: relative; z-index: 2; height: 100svh; min-height: 690px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 82% 35%, color-mix(in srgb, var(--reel-accent) 18%, transparent), transparent 32%), linear-gradient(135deg, #02070d, #07121c 62%, #03080e); transition: background .7s ease; }
    .folio-reel-stage::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(115deg, transparent 0 48%, color-mix(in srgb, var(--reel-accent) 24%, #0b1720) 48.2% 100%); clip-path: polygon(50% 0, 100% 0, 100% 100%, 38% 100%); opacity: .46; transition: background .7s ease; }
    .folio-reel-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .38; background-image: linear-gradient(rgba(114, 209, 242, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 209, 242, .055) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 48%, #000); mask-image: linear-gradient(90deg, transparent, #000 48%, #000); }
    .folio-reel-code { position: absolute; left: clamp(20px, 2.2vw, 38px); top: 50%; z-index: 7; color: rgba(129, 218, 247, .43); font-size: 7px; font-weight: 650; letter-spacing: .22em; writing-mode: vertical-rl; text-transform: uppercase; transform: translateY(-50%) rotate(180deg); }
    .folio-reel-ghost { position: absolute; right: -2vw; bottom: -7vw; z-index: -1; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--reel-accent) 24%, transparent); font-family: Georgia, serif; font-size: clamp(260px, 38vw, 620px); line-height: .7; letter-spacing: -.1em; opacity: .65; transition: color .6s ease, -webkit-text-stroke-color .6s ease; }

    .folio-reel-media {
      position: absolute;
      top: 50%;
      right: clamp(56px, 5vw, 96px);
      z-index: 2;
      width: min(68vw, 1160px);
      margin: 0;
      overflow: hidden;
      border: 1px solid rgba(151, 224, 247, .24);
      border-radius: 7px;
      background: #dfe8eb;
      box-shadow: 0 50px 130px rgba(0, 0, 0, .56), -14px 16px 0 color-mix(in srgb, var(--reel-accent) 65%, #102230);
      translate: 0 -50%;
      transform: perspective(1800px) rotateY(-2deg) rotateZ(var(--reel-tilt, -.8deg));
      transform-origin: 50% 60%;
      transition: opacity .28s ease, transform .65s cubic-bezier(.2, .75, .2, 1), box-shadow .65s ease;
    }

    .folio-reel-media.is-switching { opacity: .2; transform: perspective(1800px) rotateY(-2deg) rotateZ(var(--reel-tilt, -.8deg)) translateX(30px) scale(.975); }
    .folio-reel-media img { width: 100%; height: auto; aspect-ratio: 2.055; display: block; object-fit: cover; object-position: left top; filter: none; }
    .folio-reel-scan { position: absolute; left: 0; right: 0; top: 32px; height: 2px; pointer-events: none; opacity: .7; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--reel-accent) 75%, #dffbff), transparent); filter: drop-shadow(0 0 7px var(--reel-accent)); animation: folioScan 6s ease-in-out infinite; }

    .folio-reel-copy { position: absolute; left: clamp(72px, 7vw, 128px); bottom: clamp(65px, 10vh, 112px); z-index: 5; width: min(38vw, 620px); }
    .folio-reel-meta { display: flex; align-items: center; gap: 12px; color: color-mix(in srgb, var(--reel-accent) 70%, #bdeeff); font-size: 8px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
    .folio-reel-meta::before { content: ""; width: 34px; height: 2px; background: currentColor; box-shadow: 0 0 9px currentColor; }
    .folio-reel-copy h2 { max-width: 720px; margin: 19px 0 0; color: #f3f9fb; font-size: clamp(58px, 8vw, 132px); font-weight: 520; line-height: .77; letter-spacing: -.078em; white-space: nowrap; overflow-wrap: normal; text-shadow: 0 2px 2px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .9), 0 14px 42px rgba(0, 0, 0, .55); transition: opacity .24s ease, transform .45s ease; }
    .folio-reel-copy p { max-width: 450px; margin: 27px 0 0; color: rgba(204, 224, 233, .72); font-size: 12px; line-height: 1.7; text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .88); transition: opacity .24s ease, transform .45s ease; }
    .folio-reel-stage.is-switching .folio-reel-copy h2, .folio-reel-stage.is-switching .folio-reel-copy p { opacity: 0; transform: translateY(13px); }
    .folio-reel-open { min-width: 205px; height: 47px; margin-top: 30px; padding: 0 8px 0 16px; border: 1px solid color-mix(in srgb, var(--reel-accent) 58%, #8bdfff); border-radius: 999px; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; color: #e9f8fd; background: rgba(3, 14, 22, .64); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 8px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: color .3s ease, background .3s ease, transform .3s ease; }
    .folio-reel-open i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #07121b; background: color-mix(in srgb, var(--reel-accent) 74%, #c7f5ff); font-style: normal; font-size: 13px; }
    .folio-reel-open:hover { color: #fff; background: color-mix(in srgb, var(--reel-accent) 16%, rgba(3, 14, 22, .78)); transform: translateY(-3px); }

    .folio-reel-nav { position: absolute; right: clamp(20px, 2.2vw, 38px); top: 50%; z-index: 8; display: grid; gap: 9px; transform: translateY(-50%); }
    .folio-reel-nav button { position: relative; width: 40px; height: 32px; padding: 0; border: 0; display: grid; place-items: center; color: rgba(190, 219, 231, .35); background: transparent; font-family: Georgia, serif; font-size: 8px; cursor: pointer; }
    .folio-reel-nav button::before { content: ""; position: absolute; right: 0; width: 11px; height: 1px; background: currentColor; transition: width .35s ease, color .35s ease; }
    .folio-reel-nav button span { margin-right: 20px; opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
    .folio-reel-nav button:hover span, .folio-reel-nav button.is-active span { opacity: 1; transform: translateX(0); }
    .folio-reel-nav button.is-active { color: color-mix(in srgb, var(--reel-accent) 78%, #d9f8ff); }
    .folio-reel-nav button.is-active::before { width: 28px; box-shadow: 0 0 8px currentColor; }
    .folio-reel-progress { position: absolute; left: clamp(72px, 7vw, 128px); right: clamp(66px, 7vw, 118px); bottom: 28px; z-index: 8; height: 1px; overflow: hidden; background: rgba(125, 205, 235, .13); }
    .folio-reel-progress i { display: block; width: 16.666%; height: 100%; background: color-mix(in srgb, var(--reel-accent) 74%, #ccf6ff); box-shadow: 0 0 9px currentColor; transition: width .6s cubic-bezier(.2, .72, .2, 1), background .5s ease; }
    .folio-ribbon {
      position: relative;
      padding: clamp(85px, 9vw, 145px) 0 clamp(95px, 10vw, 160px);
      overflow: hidden;
      color-scheme: light;
      color: #071d31;
      background: #d7ff43;
      border-top: 1px solid rgba(7, 29, 49, .22);
      border-bottom: 1px solid rgba(7, 29, 49, .22);
    }

    .folio-ribbon::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(7, 29, 49, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 29, 49, .16) 1px, transparent 1px); background-size: 42px 42px; }
    .folio-ribbon-head { position: relative; z-index: 2; width: min(100% - 64px, 1480px); margin: 0 auto clamp(60px, 7vw, 100px); display: grid; grid-template-columns: minmax(240px, .42fr) minmax(0, 1fr); gap: clamp(40px, 9vw, 140px); align-items: start; }
    .folio-ribbon-head p { max-width: 290px; margin: 9px 0 0; font-size: 11px; line-height: 1.65; }
    .folio-ribbon-head h2 { margin: 0; font-size: clamp(48px, 7.2vw, 118px); font-weight: 740; line-height: .82; letter-spacing: -.075em; }
    .folio-ribbon-head h2 span { color: rgba(7, 29, 49, .3); font-family: Georgia, serif; font-weight: 400; }
    .folio-marquee { position: relative; z-index: 2; width: 100%; overflow: hidden; transform: rotate(-1.2deg); }
    .folio-marquee + .folio-marquee { margin-top: clamp(16px, 2vw, 30px); transform: rotate(1.1deg); }
    .folio-marquee-track { width: max-content; display: flex; animation: folioMarquee 52s linear infinite; will-change: transform; }
    .folio-marquee-group { display: flex; gap: clamp(13px, 1.4vw, 24px); padding-right: clamp(13px, 1.4vw, 24px); }
    .folio-marquee--reverse .folio-marquee-track { animation-direction: reverse; animation-duration: 58s; }
    .folio-marquee:hover .folio-marquee-track { animation-play-state: paused; }
    .folio-marquee-item { position: relative; width: clamp(260px, 24vw, 410px); aspect-ratio: 2.055; flex: 0 0 auto; margin: 0; overflow: hidden; border: clamp(3px, .3vw, 6px) solid #071d31; background: #0a2235; box-shadow: 10px 12px 0 rgba(7, 29, 49, .22); }
    .folio-marquee-item img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.8) contrast(1.03); transition: filter .45s ease, transform .6s ease; }
    .folio-marquee-item:hover img { filter: saturate(1.05); transform: scale(1.035); }
    .folio-marquee-item figcaption { position: absolute; left: 10px; bottom: 9px; padding: 6px 8px; color: #d7ff43; background: #071d31; font-size: 7px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }

    .folio-index { position: relative; padding: clamp(105px, 12vw, 190px) clamp(24px, 4vw, 70px) clamp(120px, 14vw, 210px); color-scheme: light; color: #0a2537; background: #edf1e9; }
    .folio-index::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(18, 58, 76, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 58, 76, .055) 1px, transparent 1px); background-size: 7.14vw 7.14vw; }
    .folio-index-head { position: relative; z-index: 2; width: min(100%, 1540px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .33fr); gap: clamp(55px, 9vw, 150px); align-items: end; }
    .folio-index-head > div > span { color: rgba(17, 67, 88, .55); font-size: 8px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
    .folio-index-head h2 { margin: 20px 0 0; color: #092437; font-size: clamp(105px, 17vw, 280px); font-weight: 780; line-height: .59; letter-spacing: -.105em; }
    .folio-index-head p { max-width: 350px; margin: 0 0 5px; color: rgba(24, 65, 83, .65); font-size: 12px; line-height: 1.7; }

    .folio-index-toolbar { position: sticky; top: 75px; z-index: 30; width: min(100%, 1540px); margin: clamp(70px, 9vw, 135px) auto 0; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid rgba(20, 70, 91, .17); background: rgba(237, 241, 233, .84); box-shadow: 0 16px 44px rgba(18, 58, 76, .08); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); }
    .folio-index-filters { min-width: 0; display: flex; align-items: center; gap: 3px; overflow-x: auto; scrollbar-width: none; }
    .folio-index-filters::-webkit-scrollbar { display: none; }
    .folio-index-filters button { min-height: 37px; padding: 0 15px; flex: 0 0 auto; border: 0; color: rgba(18, 59, 77, .5); background: transparent; font-size: 8px; font-weight: 680; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; transition: color .3s ease, background .3s ease; }
    .folio-index-filters button:hover { color: #09283c; }
    .folio-index-filters button.is-active { color: #d7ff43; background: #09283c; }
    .folio-index-toolbar > span { padding-right: 8px; flex: 0 0 auto; color: rgba(12, 48, 66, .5); font-family: Georgia, serif; font-size: 12px; letter-spacing: .12em; }

    .folio-index-list { position: relative; z-index: 3; width: min(100%, 1540px); margin: 22px auto 0; border-bottom: 1px solid rgba(20, 68, 89, .2); }
    .folio-index-row { --row-accent: #2b809e; position: relative; min-height: 116px; padding: 18px 18px 18px 12px; display: grid; grid-template-columns: 75px minmax(0, 1fr) minmax(160px, 220px) 50px; gap: clamp(18px, 3vw, 50px); align-items: center; overflow: hidden; border-top: 1px solid rgba(20, 68, 89, .2); isolation: isolate; transition: color .35s ease, padding-left .5s cubic-bezier(.2, .75, .2, 1), background .4s ease; }
    .folio-index-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--row-accent) 72%, #082538); transform: translateX(-101%); transition: transform .55s cubic-bezier(.2, .78, .2, 1); }
    .folio-index-row:hover, .folio-index-row:focus-within { padding-left: 28px; color: #f3f9f5; }
    .folio-index-row:hover::before, .folio-index-row:focus-within::before { transform: translateX(0); }
    .folio-index-row.is-hidden { display: none; }
    .folio-index-no { color: rgba(19, 64, 83, .46); font-family: Georgia, serif; font-size: 11px; letter-spacing: .12em; transition: color .35s ease; }
    .folio-index-row h3 { margin: 0; color: #0b2a3d; font-size: clamp(28px, 3vw, 50px); font-weight: 520; line-height: .96; letter-spacing: -.055em; white-space: nowrap; overflow-wrap: normal; transition: color .35s ease, transform .5s ease; }
    .folio-index-row:hover h3, .folio-index-row:focus-within h3, .folio-index-row:hover .folio-index-no, .folio-index-row:focus-within .folio-index-no { color: #f4f9f6; }
    .folio-index-row:hover h3, .folio-index-row:focus-within h3 { transform: translateX(10px); }
    .folio-index-type { color: rgba(18, 64, 83, .48); font-size: 8px; font-weight: 680; letter-spacing: .16em; text-transform: uppercase; transition: color .35s ease; }
    .folio-index-row:hover .folio-index-type, .folio-index-row:focus-within .folio-index-type { color: rgba(244, 250, 247, .72); }
    .folio-index-arrow { width: 39px; height: 39px; border: 1px solid rgba(18, 67, 88, .22); border-radius: 50%; display: grid; place-items: center; color: #0a3046; font-style: normal; font-size: 14px; transition: color .35s ease, border-color .35s ease, transform .4s ease, background .35s ease; }
    .folio-index-row:hover .folio-index-arrow, .folio-index-row:focus-within .folio-index-arrow { color: #0b2a3a; border-color: #d7ff43; background: #d7ff43; transform: rotate(45deg); }
    .folio-index-thumb { display: none; }
    .folio-index-hit { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
    .folio-index-hit:focus-visible { outline: 2px solid #d7ff43; outline-offset: -5px; }
    .folio-index-empty { position: relative; z-index: 2; width: min(100%, 1540px); margin: 40px auto 0; padding: 50px; border: 1px solid rgba(20, 68, 89, .2); text-align: center; }

    .folio-hover-preview { position: fixed; left: 0; top: 0; z-index: 80; width: min(36vw, 540px); padding: 7px; pointer-events: none; opacity: 0; background: #d7ff43; box-shadow: 0 34px 90px rgba(7, 31, 46, .28); transform: translate3d(var(--preview-x, 0), var(--preview-y, 0), 0) rotate(var(--preview-rotate, -2deg)) scale(.94); transition: opacity .2s ease, transform .2s ease; will-change: transform; }
    .folio-hover-preview.is-visible { opacity: 1; transform: translate3d(var(--preview-x, 0), var(--preview-y, 0), 0) rotate(var(--preview-rotate, -2deg)) scale(1); }
    .folio-hover-preview img { width: 100%; aspect-ratio: 2.055; display: block; object-fit: cover; background: #dce6e6; }
    .folio-hover-preview span { position: absolute; left: -23px; top: -23px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #d7ff43; background: #09283c; font-family: Georgia, serif; font-size: 10px; box-shadow: 0 10px 25px rgba(7, 31, 46, .2); }

    .folio-outro { position: relative; min-height: max(680px, 100svh); padding: 90px clamp(24px, 4vw, 70px); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; isolation: isolate; color: #eff8fb; background: radial-gradient(circle at 50% 50%, rgba(38, 124, 160, .2), transparent 33%), #020910; }
    .folio-outro::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .48; background-image: linear-gradient(rgba(91, 194, 231, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 194, 231, .065) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(circle, #000, transparent 72%); mask-image: radial-gradient(circle, #000, transparent 72%); }
    .folio-outro > p { position: absolute; left: clamp(24px, 4vw, 70px); top: clamp(110px, 14vh, 155px); max-width: 320px; margin: 0; color: rgba(191, 221, 233, .55); font-size: 11px; line-height: 1.7; }
    .folio-outro > a { position: relative; z-index: 3; display: block; color: #edf8fb; font-size: clamp(74px, 13.5vw, 220px); font-weight: 720; line-height: .68; letter-spacing: -.09em; text-decoration: none; text-align: center; transition: color .45s ease, letter-spacing .6s cubic-bezier(.2, .75, .2, 1); }
    .folio-outro > a span { display: block; }
    .folio-outro > a span:last-child { color: transparent; -webkit-text-stroke: 1px #91e9ff; }
    .folio-outro > a i { display: inline-block; color: #d7ff43; -webkit-text-stroke: 0; font-family: Georgia, serif; font-size: .43em; font-weight: 400; font-style: normal; transform: translateY(-.25em); transition: transform .5s ease; }
    .folio-outro > a:hover { color: #d7ff43; letter-spacing: -.075em; }
    .folio-outro > a:hover span:last-child { -webkit-text-stroke-color: #d7ff43; }
    .folio-outro > a:hover i { transform: translate(.2em, -.45em) rotate(45deg); }
    .folio-outro-orbit { position: absolute; left: 50%; top: 50%; z-index: -1; width: min(74vw, 1000px); aspect-ratio: 1; border: 1px solid rgba(116, 218, 249, .15); border-radius: 50%; transform: translate(-50%, -50%); animation: folioOrbit 32s linear infinite; }
    .folio-outro-orbit::before, .folio-outro-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(112, 219, 249, .12); }
    .folio-outro-orbit::before { inset: 11%; }
    .folio-outro-orbit::after { inset: 29%; }
    .folio-outro-orbit span { position: absolute; left: 50%; top: -7px; padding: 0 12px; color: rgba(137, 227, 252, .48); background: #020910; font-size: 7px; letter-spacing: .23em; white-space: nowrap; transform: translateX(-50%); }
    .folio-outro-meta { position: absolute; left: clamp(24px, 4vw, 70px); right: clamp(24px, 4vw, 70px); bottom: clamp(30px, 5vh, 52px); display: flex; justify-content: space-between; color: rgba(166, 208, 225, .4); font-size: 8px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }

    @keyframes folioScan { 0%, 100% { transform: translateY(0); opacity: 0; } 15% { opacity: .7; } 85% { opacity: .7; } 90% { transform: translateY(clamp(200px, 28vw, 490px)); opacity: 0; } }
    @keyframes folioMarquee { to { transform: translateX(-50%); } }
    @keyframes folioOrbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
    @keyframes folioWallIn { from { opacity: 0; filter: blur(12px); transform: translate3d(6vw, 24px, 0) scale(.96); } to { opacity: 1; filter: blur(0); } }
    @keyframes folioTitleIn { from { opacity: 0; transform: translateX(var(--title-from)); } to { opacity: 1; transform: translateX(0); } }
    @keyframes folioChromeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 1100px) {
      .folio-hero-title { width: 62vw; font-size: clamp(82px, 12.7vw, 140px); }
      .folio-wall { width: 66vw; }
      .folio-reel-media { width: 66vw; }
      .folio-reel-copy { width: 43vw; }
      .folio-reel-copy h2 { font-size: clamp(58px, 9vw, 108px); }
      .folio-index-head h2 { font-size: clamp(105px, 18vw, 220px); }
    }

    @media (max-width: 860px) {
      .folio-hero-topline { top: 92px; }
      .folio-grade { top: 28%; right: -12%; width: 76vw; opacity: .7; }
      .folio-wall { top: 19%; right: 24px; bottom: 15%; width: 72vw; }
      .folio-hero-title { left: 24px; width: 78vw; font-size: clamp(82px, 15vw, 126px); }
      .folio-hero-bottom { grid-template-columns: 1fr auto; }
      .folio-hero-bottom > a { justify-self: start; }
      .folio-hero-counter { grid-column: 2; grid-row: 1 / span 2; }
      .folio-reel-stage { min-height: 640px; }
      .folio-reel-stage::before { clip-path: polygon(0 20%, 100% 7%, 100% 72%, 0 82%); background: color-mix(in srgb, var(--reel-accent) 21%, #0b1720); }
      .folio-reel-media { top: auto; right: 6%; bottom: clamp(286px, 31svh, 330px); width: 84%; translate: none; transform: rotateZ(var(--reel-tilt, -1.5deg)); }
      .folio-reel-media.is-switching { transform: rotateZ(var(--reel-tilt, -1.5deg)) translateX(20px) scale(.975); }
      .folio-reel-copy { left: 34px; right: 68px; bottom: 72px; width: auto; }
      .folio-reel-copy h2 { max-width: 86%; font-size: clamp(55px, 12.5vw, 92px); }
      .folio-reel-copy p { max-width: 380px; margin-top: 16px; }
      .folio-reel-open { margin-top: 18px; }
      .folio-reel-code { left: 17px; }
      .folio-reel-progress { left: 34px; right: 68px; }
      .folio-ribbon-head { grid-template-columns: 1fr; gap: 28px; }
      .folio-ribbon-head p { max-width: 420px; }
      .folio-index-head { grid-template-columns: 1fr; gap: 40px; }
      .folio-index-head p { max-width: 520px; }
      .folio-index-row { grid-template-columns: 58px minmax(0, 1fr) 140px 42px; }
      .folio-hover-preview { display: none; }
      .folio-outro-orbit { width: 92vw; }
    }

    @media (max-width: 700px) {
      .folio-hero { min-height: max(780px, 100svh); }
      .folio-hero-topline { top: 84px; left: 18px; right: 18px; font-size: 6px; }
      .folio-hero-topline span:last-child { display: none; }
      .folio-hero::after { width: 74vw; opacity: .34; }
      .folio-grade { top: 31%; right: -24%; width: 100vw; }
      .folio-hero-title { top: 25%; left: 18px; width: calc(100vw - 36px); font-size: clamp(74px, 23vw, 102px); line-height: .67; transform: translateY(-50%); }
      .folio-hero-title span:last-child { margin-left: .32em; }
      .folio-wall { top: 37%; left: 18px; right: 18px; bottom: 17%; width: auto; gap: 4px; transform: none; }
      .folio-tile { border-radius: 13px; }
      .folio-tile--01 { flex-grow: 2.05; transform: translateY(10px); }
      .folio-tile--02 { transform: translateY(-6px); }
      .folio-tile--03 { transform: translateY(14px); }
      .folio-tile--04 { transform: translateY(2px); }
      .folio-tile--05 { transform: translateY(-10px); }
      .folio-tile figcaption { left: 9px; bottom: 11px; font-size: 5px; }
      .folio-tile figcaption span { font-size: 8px; }
      .folio-tile::after { top: 10px; right: 10px; width: 5px; height: 5px; }
      .folio-hero-bottom { left: 18px; right: 18px; bottom: 18px; grid-template-columns: 1fr auto; gap: 14px; }
      .folio-hero-bottom p { position: absolute; left: 0; bottom: calc(100% + 22px); max-width: 330px; font-size: 9px; }
      .folio-hero-bottom > a { min-width: 205px; height: 46px; justify-self: start; }
      .folio-hero-counter { grid-column: 2; grid-row: 1; }
      .folio-hero-counter strong { font-size: 34px; }
      .folio-reel { min-height: max(620px, 100svh); }
      .folio-reel-stage { height: 100svh; min-height: 620px; }
      .folio-reel-media { top: auto; right: 2%; bottom: clamp(280px, 34svh, 300px); width: 96%; box-shadow: 0 35px 85px rgba(0, 0, 0, .5), -7px 9px 0 color-mix(in srgb, var(--reel-accent) 65%, #102230); }
      .folio-reel-media .browser-bar { height: 25px; }
      .folio-reel-media img { height: clamp(170px, 24svh, 205px); aspect-ratio: auto; object-fit: cover; object-position: left top; }
      .folio-reel-copy { left: 24px; right: 52px; bottom: 58px; }
      .folio-reel-copy h2 { margin-top: 13px; font-size: clamp(46px, 15vw, 70px); }
      .folio-reel-copy p { max-width: 320px; font-size: 10px; line-height: 1.55; }
      .folio-reel-open { min-width: 185px; height: 42px; font-size: 7px; }
      .folio-reel-nav { right: 8px; }
      .folio-reel-nav button { width: 34px; }
      .folio-reel-nav button span { display: none; }
      .folio-reel-progress { left: 24px; right: 52px; bottom: 20px; }
      .folio-reel-code { display: none; }
      .folio-ribbon { padding-block: 75px 95px; }
      .folio-ribbon-head { width: min(100% - 32px, 1480px); margin-bottom: 52px; }
      .folio-ribbon-head h2 { font-size: clamp(45px, 14vw, 67px); }
      .folio-marquee-item { width: 245px; box-shadow: 6px 7px 0 rgba(7, 29, 49, .22); }
      .folio-index { padding: 90px 16px 120px; }
      .folio-index-head h2 { font-size: clamp(102px, 31vw, 148px); }
      .folio-index-toolbar { top: 68px; margin-top: 65px; padding: 7px; }
      .folio-index-filters button { min-height: 34px; padding-inline: 11px; font-size: 7px; }
      .folio-index-toolbar > span { display: none; }
      .folio-index-list { margin-top: 14px; }
      .folio-index-row { min-height: 0; padding: 22px 8px; grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 11px; }
      .folio-index-row:hover, .folio-index-row:focus-within { padding-left: 8px; }
      .folio-index-row h3 { font-size: clamp(25px, 8vw, 37px); }
      .folio-index-row:hover h3, .folio-index-row:focus-within h3 { transform: none; }
      .folio-index-type { grid-column: 2; margin-top: -4px; }
      .folio-index-arrow { grid-column: 3; grid-row: 1; width: 32px; height: 32px; }
      .folio-index-thumb { grid-column: 1 / -1; width: 100%; aspect-ratio: 2.055; margin-top: 10px; display: block; overflow: hidden; border: 1px solid rgba(15, 54, 72, .14); }
      .folio-index-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.78); }
      .folio-index-row::before { display: none; }
      .folio-index-row:hover, .folio-index-row:focus-within { color: inherit; background: rgba(14, 57, 76, .045); }
      .folio-index-row:hover h3, .folio-index-row:focus-within h3 { color: #0b2a3d; }
      .folio-index-row:hover .folio-index-no, .folio-index-row:focus-within .folio-index-no { color: rgba(19, 64, 83, .46); }
      .folio-index-row:hover .folio-index-type, .folio-index-row:focus-within .folio-index-type { color: rgba(18, 64, 83, .48); }
      .folio-outro { min-height: 660px; padding-inline: 18px; }
      .folio-outro > p { left: 18px; top: 100px; font-size: 9px; }
      .folio-outro > a { font-size: clamp(66px, 21vw, 100px); line-height: .73; }
      .folio-outro-orbit { width: 120vw; }
      .folio-outro-meta { left: 18px; right: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .folio-wall { transform: none; }
      .folio-marquee-track { animation: none; }
      .folio-outro-orbit { animation: none; }
      .folio-reel-scan { display: none; }
    }

    /* Portfolio 4.0 — cinematic live cover */
    .folio-hero {
      --hero-glow-x: 70%;
      --hero-glow-y: 36%;
      min-height: clamp(610px, 72svh, 700px);
      color: #eef8f7;
      background:
        radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y), rgba(60, 175, 206, .2), transparent 25%),
        radial-gradient(circle at 18% 72%, rgba(100, 79, 202, .17), transparent 29%),
        linear-gradient(135deg, #020811 0%, #071624 54%, #020910 100%);
    }

    .folio-hero::before {
      content: "DIGITAL / 32";
      left: auto;
      right: -1.2vw;
      bottom: -1.6vw;
      z-index: -2;
      color: transparent;
      -webkit-text-stroke: 1px rgba(126, 219, 240, .055);
      font-size: clamp(110px, 17vw, 285px);
      font-weight: 720;
      letter-spacing: -.08em;
    }

    .folio-hero::after {
      top: 0;
      right: 12%;
      z-index: -3;
      width: 1px;
      height: 100%;
      clip-path: none;
      opacity: .7;
      background: linear-gradient(180deg, transparent, rgba(112, 219, 244, .24) 18% 76%, transparent);
      box-shadow: 0 0 16px rgba(74, 191, 221, .12);
    }

    .folio-hero-grid {
      z-index: -1;
      opacity: .42;
      background-image: linear-gradient(rgba(84, 187, 218, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 187, 218, .055) 1px, transparent 1px);
      background-size: clamp(44px, 4.7vw, 72px) clamp(44px, 4.7vw, 72px);
      -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000, transparent 74%);
      mask-image: radial-gradient(ellipse at 50% 45%, #000, transparent 74%);
    }

    .folio-grade {
      top: 48%;
      left: 50%;
      right: auto;
      z-index: 0;
      width: min(72vw, 1100px);
      aspect-ratio: 3;
      border: 1px solid rgba(109, 214, 241, .09);
      border-radius: 50%;
      opacity: .85;
      background: radial-gradient(ellipse, rgba(38, 151, 189, .1), transparent 66%);
      filter: none;
      transform: translate(-50%, -50%) rotate(-4deg);
      box-shadow: 0 0 120px rgba(25, 113, 169, .08), inset 0 0 90px rgba(32, 143, 187, .045);
    }

    .folio-hero-topline {
      top: 104px;
      left: max(28px, calc((100% - 1220px) / 2));
      right: max(28px, calc((100% - 1220px) / 2));
      z-index: 12;
      color: rgba(156, 208, 224, .48);
    }

    .folio-breadcrumbs {
      position: absolute;
      top: 134px;
      left: max(28px, calc((100% - 1220px) / 2));
      z-index: 16;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(181, 218, 230, .56);
      font-size: 8px;
      font-weight: 650;
      line-height: 1;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .folio-breadcrumbs a {
      color: inherit;
      text-decoration: none;
      transition: color .25s ease;
    }

    .folio-breadcrumbs a:hover,
    .folio-breadcrumbs a:focus-visible { color: #bdefff; }
    .folio-breadcrumbs i { width: 22px; height: 1px; flex: 0 0 22px; background: rgba(156, 234, 255, .28); }

    .folio-hero-title {
      left: 50%;
      top: 44%;
      z-index: 8;
      width: min(82vw, 1180px);
      color: #eff9f7;
      font-size: clamp(72px, 9.25vw, 150px);
      font-weight: 660;
      line-height: .72;
      letter-spacing: -.085em;
      text-align: center;
      transform: translate(-50%, -50%);
      text-shadow: 0 18px 55px rgba(0, 0, 0, .38);
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
    }

    .folio-hero-title span { display: inline-block; }
    .folio-hero-title span:first-child { --title-from: -6vw; }
    .folio-hero-title span:last-child {
      margin-left: .09em;
      color: rgba(156, 234, 255, .045);
      -webkit-text-stroke: 1px rgba(156, 234, 255, .96);
      paint-order: stroke fill;
      font-kerning: none;
      letter-spacing: 0;
      text-shadow: 0 0 32px rgba(76, 203, 236, .11);
      --title-from: 6vw;
    }

    .folio-wall {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: auto;
      display: block;
      transform: translate3d(var(--wall-x, 0), var(--wall-y, 0), 0);
      transition: transform .85s cubic-bezier(.2, .75, .2, 1);
      animation: folioWallIn 1.05s cubic-bezier(.2, .75, .2, 1) .1s forwards;
    }

    .folio-tile {
      position: absolute;
      flex: none;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(137, 221, 244, .16);
      border-radius: clamp(12px, 1.35vw, 22px);
      background: #091724;
      box-shadow: 0 30px 85px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .055);
      filter: none;
      transition: transform .75s cubic-bezier(.2, .75, .2, 1), opacity .5s ease, filter .5s ease, box-shadow .6s ease;
    }

    .folio-tile::before {
      z-index: 3;
      background: linear-gradient(180deg, rgba(2, 11, 19, .02), transparent 46%, rgba(2, 10, 18, .83));
      opacity: 1;
    }

    .folio-tile::after { display: none; }
    .folio-tile img { object-fit: cover; object-position: left top; filter: saturate(.62) contrast(1.04) brightness(.68); transform: scale(1.015); }
    .folio-tile figcaption { writing-mode: initial; transform: none; }

    .folio-tile--01 {
      left: 50%;
      top: 52%;
      z-index: 5;
      width: min(72vw, 1080px);
      aspect-ratio: 2.055;
      transform: translate(-50%, -43%);
      box-shadow: 0 52px 140px rgba(0, 0, 0, .57), 0 0 0 1px rgba(135, 222, 244, .04), -12px 15px 0 rgba(84, 210, 235, .045);
    }

    .folio-tile--01::before { top: 34px; }
    .folio-tile--01 img { height: 100%; filter: saturate(.82) contrast(1.045) brightness(.8); }
    .folio-tile--01 figcaption {
      left: 22px;
      right: 22px;
      bottom: 17px;
      z-index: 5;
      display: grid;
      grid-template-columns: auto auto 1fr;
      align-items: baseline;
      gap: 11px;
      color: #f0faf8;
      font-size: 8px;
      letter-spacing: .16em;
    }

    .folio-tile--01 figcaption span { color: #b7f0ff; font-family: Georgia, serif; font-size: 14px; }
    .folio-tile--01 figcaption strong { font-size: 9px; font-weight: 690; }
    .folio-tile--01 figcaption small { justify-self: end; color: rgba(194, 224, 231, .46); font-size: 6px; letter-spacing: .2em; text-transform: uppercase; }

    .folio-hero-browser {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 6;
      height: 34px;
      padding: 0 14px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: rgba(177, 215, 226, .5);
      border-bottom: 1px solid rgba(137, 221, 244, .11);
      background: rgba(3, 15, 25, .78);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }

    .folio-hero-browser i { width: 5px; height: 5px; border-radius: 50%; background: rgba(160, 217, 231, .34); }
    .folio-hero-browser i:first-child { background: #9de9fb; box-shadow: 0 0 9px rgba(104, 224, 250, .7); }
    .folio-hero-browser b { margin-left: 7px; font-size: 6px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

    .folio-tile--02,
    .folio-tile--03,
    .folio-tile--04,
    .folio-tile--05 {
      z-index: 1;
      width: min(27vw, 430px);
      aspect-ratio: 2.055;
      opacity: .52;
      filter: blur(.25px) saturate(.62);
    }

    .folio-tile--02 { left: -5%; top: 26%; transform: rotate(-5deg); animation: folioCardFloatA 10s ease-in-out infinite; }
    .folio-tile--03 { right: -5%; top: 24%; transform: rotate(4.5deg); animation: folioCardFloatB 12s ease-in-out infinite; }
    .folio-tile--04 { left: 4%; bottom: 6%; transform: rotate(3.5deg); animation: folioCardFloatB 13s ease-in-out -3s infinite; }
    .folio-tile--05 { right: 3%; bottom: 5%; transform: rotate(-4deg); animation: folioCardFloatA 11s ease-in-out -4s infinite; }
    .folio-tile--02 figcaption,
    .folio-tile--03 figcaption,
    .folio-tile--04 figcaption,
    .folio-tile--05 figcaption { left: 14px; bottom: 12px; z-index: 5; color: rgba(233, 249, 247, .74); font-size: 6px; letter-spacing: .14em; }

    @media (hover: hover) and (pointer: fine) {
      .folio-wall:hover .folio-tile { filter: none; }
      .folio-wall .folio-tile:hover { box-shadow: 0 42px 115px rgba(0, 0, 0, .5), 0 0 36px rgba(70, 194, 226, .08); }
      .folio-tile--01:hover { transform: translate(-50%, -45%) scale(1.012); }
      .folio-tile--01:hover img { filter: saturate(.94) contrast(1.035) brightness(.86); transform: scale(1.035); }
    }

    .folio-hero-bottom {
      left: max(28px, calc((100% - 1220px) / 2));
      right: max(28px, calc((100% - 1220px) / 2));
      bottom: clamp(24px, 3.5vh, 38px);
      z-index: 15;
      grid-template-columns: minmax(260px, 390px) 1fr auto;
    }

    .folio-hero-bottom p { color: rgba(185, 215, 225, .62); text-shadow: none; }
    .folio-hero-bottom > a { color: #061724; border-color: rgba(187, 244, 255, .42); background: #d7ff43; box-shadow: 0 14px 42px rgba(0, 0, 0, .26); }
    .folio-hero-bottom > a i { color: #d7ff43; background: #071d31; }
    .folio-hero-bottom > a:hover { color: #061724; background: #e2ff76; box-shadow: 0 20px 52px rgba(0, 0, 0, .34); }
    .folio-hero-counter { color: #f1faf8; }
    .folio-hero-counter span { color: rgba(191, 221, 229, .48); }

    @keyframes folioCardFloatA { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
    @keyframes folioCardFloatB { 0%, 100% { translate: 0 0; } 50% { translate: 0 12px; } }

    @media (max-width: 860px) {
      .folio-hero-title { top: 42%; width: calc(100vw - 36px); font-size: clamp(68px, 11.6vw, 98px); }
      .folio-tile--01 { width: 80vw; }
      .folio-tile--02,
      .folio-tile--03,
      .folio-tile--04,
      .folio-tile--05 { width: 31vw; }
      .folio-hero-bottom { grid-template-columns: minmax(230px, 340px) 1fr auto; }
    }

    @media (max-width: 700px) {
      .folio-hero { min-height: clamp(560px, 72svh, 640px); }
      .folio-hero-topline { top: 84px; }
      .folio-breadcrumbs { top: 112px; left: 18px; right: 18px; gap: 8px; font-size: 7px; }
      .folio-breadcrumbs i { width: 15px; flex-basis: 15px; }
      .folio-hero-title { top: 38%; left: 18px; width: calc(100vw - 36px); font-size: clamp(49px, 14.4vw, 66px); letter-spacing: -.075em; text-align: left; transform: translateY(-50%); }
      .folio-hero-title span:last-child { margin-left: .08em; letter-spacing: 0; }
      .folio-grade { top: 28%; width: 125vw; aspect-ratio: 1.4; }
      .folio-wall { inset: 0; }
      .folio-tile--01 { left: 18px; right: 18px; top: 37%; width: auto; aspect-ratio: 1.3; transform: translateY(-18%); }
      .folio-tile--01::before { top: 30px; }
      .folio-tile--01 img { object-position: left top; }
      .folio-tile--01 figcaption { left: 14px; right: 14px; bottom: 12px; grid-template-columns: auto 1fr; gap: 8px; }
      .folio-tile--01 figcaption small { display: none; }
      .folio-hero-browser { height: 30px; }
      .folio-tile--02,
      .folio-tile--03 { top: 27%; width: 46vw; opacity: .35; }
      .folio-tile--02 { left: -17%; }
      .folio-tile--03 { right: -17%; }
      .folio-tile--04,
      .folio-tile--05 { display: none; }
      .folio-hero-bottom { left: 18px; right: 18px; bottom: 18px; grid-template-columns: 1fr auto; gap: 14px; }
      .folio-hero-bottom p { position: static; grid-column: 1 / -1; max-width: 330px; margin-bottom: 7px; font-size: 10px; }
      .folio-hero-bottom > a { grid-column: 1; min-width: 205px; }
      .folio-hero-counter { grid-column: 2; grid-row: 2; align-self: end; }
    }

    @media (prefers-reduced-motion: reduce) {
      .folio-tile--02,
      .folio-tile--03,
      .folio-tile--04,
      .folio-tile--05 { animation: none; }
    }

    /* Selected cases 3.0 — layered live stack */
    .folio-reel { min-height: max(720px, 100svh); overflow: hidden; background: #02070c; }

    .folio-reel-stage {
      min-height: 720px;
      background:
        radial-gradient(circle at 72% 34%, color-mix(in srgb, var(--reel-accent) 23%, transparent), transparent 28%),
        radial-gradient(circle at 18% 82%, color-mix(in srgb, var(--reel-accent) 9%, transparent), transparent 27%),
        linear-gradient(135deg, #02070c 0%, #07121c 56%, #03090f 100%);
    }

    .folio-reel-stage::before {
      inset: 10% 4% 8% 39%;
      border: 1px solid color-mix(in srgb, var(--reel-accent) 13%, transparent);
      border-radius: 34px;
      opacity: .48;
      background: linear-gradient(145deg, color-mix(in srgb, var(--reel-accent) 17%, #0a1721), rgba(4, 14, 22, .1) 58%, color-mix(in srgb, var(--reel-accent) 8%, transparent));
      clip-path: none;
      transform: rotate(-1.7deg);
      box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 40px 120px rgba(0, 0, 0, .18);
    }

    .folio-reel-stage::after {
      opacity: .46;
      background-image: linear-gradient(rgba(114, 209, 242, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(114, 209, 242, .05) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse at 70% 47%, #000, transparent 72%);
      mask-image: radial-gradient(ellipse at 70% 47%, #000, transparent 72%);
    }

    .folio-reel-orb {
      position: absolute;
      top: 48%;
      left: 28%;
      z-index: 0;
      width: clamp(390px, 39vw, 610px);
      aspect-ratio: 1;
      pointer-events: none;
      opacity: .5;
      filter: saturate(.84);
      transform: translate(-50%, -50%);
      transition: opacity .7s ease, filter .7s ease;
    }

    .folio-reel-orb-core {
      position: absolute;
      inset: 15%;
      z-index: 2;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--reel-accent) 43%, rgba(134, 226, 255, .32));
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 27%, rgba(160, 247, 255, .19), transparent 18%),
        radial-gradient(circle at 75% 72%, rgba(118, 86, 255, .25), transparent 31%),
        radial-gradient(circle at 64% 37%, color-mix(in srgb, var(--reel-accent) 28%, transparent), transparent 30%),
        radial-gradient(circle at 48% 53%, color-mix(in srgb, var(--reel-accent) 30%, #126dba), rgba(5, 32, 59, .92) 58%, rgba(2, 12, 26, .99) 76%);
      box-shadow:
        inset -32px -38px 70px rgba(0, 5, 14, .7),
        inset 24px 20px 55px rgba(79, 214, 247, .08),
        inset -12px -9px 48px rgba(98, 70, 255, .08),
        0 0 0 17px rgba(65, 175, 222, .02),
        -18px -9px 76px color-mix(in srgb, var(--reel-accent) 14%, transparent),
        24px 18px 84px rgba(81, 61, 223, .15);
      transition: border-color .7s ease, background .8s ease, box-shadow .8s ease;
    }

    .folio-reel-orb-core::before {
      content: "";
      position: absolute;
      inset: 8.5%;
      border: 1px solid rgba(120, 218, 255, .16);
      border-radius: inherit;
      background: repeating-conic-gradient(from 16deg, rgba(121, 232, 255, .3) 0 .35deg, transparent .35deg 5.6deg, color-mix(in srgb, var(--reel-accent) 50%, #9577ff) 5.8deg 6.15deg, transparent 6.3deg 9deg);
      -webkit-mask: radial-gradient(transparent 0 84%, #000 84.5% 85%, transparent 85.5%);
      mask: radial-gradient(transparent 0 84%, #000 84.5% 85%, transparent 85.5%);
      animation: reelOrbRotate 38s linear infinite;
    }

    .folio-reel-orb-core::after {
      content: "";
      position: absolute;
      left: 11%;
      right: 11%;
      top: -20%;
      height: 30%;
      opacity: .38;
      border-radius: 50%;
      background: linear-gradient(180deg, transparent, rgba(126, 233, 255, .5), color-mix(in srgb, var(--reel-accent) 42%, #8f6fff), transparent);
      filter: blur(8px);
      animation: reelOrbScan 7.2s ease-in-out infinite;
    }

    .folio-reel-orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      border: 1px solid color-mix(in srgb, var(--reel-accent) 24%, rgba(105, 214, 250, .17));
      border-radius: 50%;
      transition: border-color .7s ease;
    }

    .folio-reel-orbit::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -4px;
      width: 7px;
      height: 7px;
      border: 1px solid color-mix(in srgb, var(--reel-accent) 66%, #89e7ff);
      border-radius: 50%;
      background: #061725;
      box-shadow: 0 0 14px color-mix(in srgb, var(--reel-accent) 54%, #67dfff);
      transform: translateY(-50%);
    }

    .folio-reel-orbit--one { width: 118%; height: 43%; transform: translate(-50%, -50%) rotate(-17deg); }
    .folio-reel-orbit--two { width: 93%; height: 93%; border-style: dashed; opacity: .62; transform: translate(-50%, -50%) rotate(31deg); }
    .folio-reel-orbit--two::after { top: 16%; right: 12%; }

    .folio-reel-code {
      left: clamp(76px, 6vw, 112px);
      top: clamp(100px, 12vh, 126px);
      color: rgba(150, 218, 236, .44);
      writing-mode: initial;
      transform: none;
    }

    .folio-reel-code::before { content: ""; width: 30px; height: 1px; margin-right: 11px; display: inline-block; vertical-align: middle; background: currentColor; box-shadow: 0 0 7px currentColor; }

    .folio-reel-ghost {
      left: -3vw;
      right: auto;
      bottom: -8vw;
      font-size: clamp(310px, 42vw, 680px);
      opacity: .45;
    }

    .folio-reel-media {
      top: 47%;
      right: clamp(76px, 7vw, 126px);
      z-index: 3;
      width: min(61vw, 1000px);
      border-color: color-mix(in srgb, var(--reel-accent) 34%, rgba(171, 226, 242, .26));
      border-radius: 18px;
      box-shadow: 0 55px 145px rgba(0, 0, 0, .58), -13px 15px 0 color-mix(in srgb, var(--reel-accent) 55%, #11232c), inset 0 1px rgba(255, 255, 255, .06);
      transform: perspective(1800px) rotateY(-3.2deg) rotateZ(var(--reel-tilt, -.55deg));
    }

    .folio-reel-media::before {
      content: "";
      position: absolute;
      inset: 33px 0 0;
      z-index: 2;
      pointer-events: none;
      opacity: .3;
      background: linear-gradient(105deg, transparent 27%, rgba(217, 250, 255, .18) 48%, transparent 66%);
      transform: translateX(-125%);
      animation: reelPolish 7.5s ease-in-out infinite;
    }

    .folio-reel-media::after {
      content: "";
      position: absolute;
      inset: 33px 0 0;
      z-index: 3;
      pointer-events: none;
      opacity: .9;
      background:
        radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--reel-accent) 16%, transparent), transparent 34%),
        linear-gradient(125deg, rgba(3, 11, 18, .33), transparent 30%, transparent 66%, color-mix(in srgb, var(--reel-accent) 12%, rgba(8, 21, 31, .2))),
        linear-gradient(180deg, rgba(218, 244, 250, .025), rgba(2, 8, 14, .19));
      box-shadow: inset 0 0 90px rgba(1, 7, 12, .28), inset 0 -52px 84px rgba(1, 7, 12, .21);
      transition: opacity .55s ease;
    }

    .folio-reel-media.is-switching { opacity: .12; transform: perspective(1800px) rotateY(-3.2deg) rotateZ(var(--reel-tilt, -.55deg)) translateX(38px) scale(.965); }
    .folio-reel-media img { filter: saturate(.7) contrast(1.075) brightness(.86) sepia(.025); transition: filter .55s ease, transform .8s cubic-bezier(.2, .75, .2, 1); }
    .folio-reel-media:hover img { filter: saturate(.86) contrast(1.055) brightness(.93) sepia(.015); transform: scale(1.018); }
    .folio-reel-media:hover::after { opacity: .68; }
    .folio-reel-scan { z-index: 4; height: 1px; opacity: .42; }
    .folio-reel-media-hit { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; color: transparent; background: transparent; cursor: pointer; }
    .folio-reel-media-hit:focus-visible { outline: 2px solid color-mix(in srgb, var(--reel-accent) 76%, #bcefff); outline-offset: -5px; }

    .folio-reel-next {
      position: absolute;
      top: 63%;
      right: 2.2%;
      z-index: 1;
      width: min(31vw, 480px);
      height: min(17vw, 260px);
      margin: 0;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--reel-accent) 27%, rgba(145, 219, 240, .18));
      border-radius: 16px;
      opacity: .48;
      background: #0a1720;
      box-shadow: 0 35px 95px rgba(0, 0, 0, .45), 9px 10px 0 color-mix(in srgb, var(--reel-accent) 26%, #0d1c25);
      transform: perspective(1400px) translateY(-18%) rotateY(-7deg) rotateZ(4deg);
      transform-origin: 50% 85%;
      transition: opacity .35s ease, transform .7s cubic-bezier(.2, .75, .2, 1), border-color .45s ease;
    }

    .folio-reel-next.is-switching { opacity: .08; transform: perspective(1400px) translate(35px, -12%) rotateY(-7deg) rotateZ(6deg) scale(.95); }
    .folio-reel-next .browser-bar { height: 27px; font-size: 6px; }
    .folio-reel-next img { width: 100%; height: calc(100% - 27px); display: block; object-fit: cover; object-position: left top; filter: saturate(.48) contrast(1.08) brightness(.56) sepia(.025); }
    .folio-reel-next::after { content: ""; position: absolute; inset: 27px 0 0; pointer-events: none; background: radial-gradient(circle at 76% 8%, color-mix(in srgb, var(--reel-accent) 16%, transparent), transparent 42%), linear-gradient(135deg, rgba(3, 11, 18, .22), color-mix(in srgb, var(--reel-accent) 9%, rgba(3, 11, 18, .2))), linear-gradient(180deg, transparent 35%, rgba(2, 10, 17, .91)); box-shadow: inset 0 0 45px rgba(0, 5, 10, .32); }
    .folio-reel-next figcaption { position: absolute; left: 15px; right: 15px; bottom: 12px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; color: rgba(219, 241, 246, .62); }
    .folio-reel-next figcaption span { font-size: 6px; letter-spacing: .17em; text-transform: uppercase; }
    .folio-reel-next figcaption strong { max-width: 65%; overflow: hidden; color: #eff9f7; font-size: 11px; font-weight: 620; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }

    .folio-reel-copy {
      left: clamp(70px, 6vw, 112px);
      top: 50%;
      bottom: auto;
      z-index: 6;
      width: min(39vw, 585px);
      padding: clamp(26px, 2.5vw, 40px);
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--reel-accent) 25%, rgba(154, 220, 239, .15));
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(4, 15, 24, .84), rgba(7, 24, 35, .68));
      box-shadow: 0 35px 100px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .045);
      -webkit-backdrop-filter: blur(22px) saturate(120%);
      backdrop-filter: blur(22px) saturate(120%);
      transform: translateY(-29%);
    }

    .folio-reel-copy::after { content: ""; position: absolute; top: 0; left: 0; width: 38%; height: 2px; background: linear-gradient(90deg, var(--reel-accent), transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--reel-accent) 68%, transparent); }
    .folio-reel-meta { color: color-mix(in srgb, var(--reel-accent) 73%, #d9f7ff); }
    .folio-reel-copy h2 { margin-top: 17px; font-size: clamp(52px, 6.6vw, 106px); line-height: .8; text-shadow: 0 10px 32px rgba(0, 0, 0, .46); }
    .folio-reel-copy p { max-width: 390px; margin-top: 21px; text-shadow: none; }
    .folio-reel-open { margin-top: 24px; background: rgba(3, 14, 22, .78); }

    .folio-reel-nav {
      right: clamp(14px, 1.5vw, 25px);
      padding: 7px 5px;
      gap: 3px;
      border: 1px solid rgba(137, 211, 231, .12);
      border-radius: 16px;
      background: rgba(3, 14, 22, .58);
      box-shadow: 0 18px 45px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .035);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
    }

    .folio-reel-nav button { width: 48px; height: 34px; border-radius: 10px; color: rgba(189, 218, 228, .45); transition: color .3s ease, background .35s ease, transform .35s ease; }
    .folio-reel-nav button::before { display: none; }
    .folio-reel-nav button span { margin: 0; opacity: 1; transform: none; }
    .folio-reel-nav button:hover { color: #f1fbfa; background: rgba(129, 213, 235, .08); }
    .folio-reel-nav button.is-active { color: #07141d; background: color-mix(in srgb, var(--reel-accent) 72%, #bff1ff); box-shadow: 0 0 20px color-mix(in srgb, var(--reel-accent) 21%, transparent); transform: translateX(-4px); }
    .folio-reel-progress { left: clamp(70px, 6vw, 112px); right: clamp(70px, 6vw, 112px); bottom: 24px; height: 2px; border-radius: 999px; }
    .folio-reel-progress i { border-radius: inherit; }

    @media (min-width: 1600px) {
      .folio-reel-stage::before {
        left: calc((100% - 1600px) / 2 + 624px);
        right: calc((100% - 1600px) / 2 + 64px);
      }
      .folio-reel-code,
      .folio-reel-copy { left: calc((100% - 1600px) / 2 + 96px); }
      .folio-reel-orb { left: calc((100% - 1600px) / 2 + 445px); }
      .folio-reel-media { right: calc((100% - 1600px) / 2 + 112px); }
      .folio-reel-next { right: calc((100% - 1600px) / 2 + 35px); }
      .folio-reel-nav { right: calc((100% - 1600px) / 2 + 24px); }
      .folio-reel-progress {
        left: calc((100% - 1600px) / 2 + 96px);
        right: calc((100% - 1600px) / 2 + 96px);
      }
    }

    @keyframes reelPolish { 0%, 62%, 100% { transform: translateX(-125%); opacity: 0; } 72% { opacity: .3; } 88% { transform: translateX(125%); opacity: 0; } }
    @keyframes reelOrbRotate { to { transform: rotate(360deg); } }
    @keyframes reelOrbScan { 0%, 12% { top: -20%; opacity: 0; } 24% { opacity: .38; } 76% { opacity: .28; } 90%, 100% { top: 92%; opacity: 0; } }

    @media (max-width: 860px) {
      .folio-reel,
      .folio-reel-stage { min-height: max(720px, 100svh); }
      .folio-reel-stage::before { inset: 14% 4% 12% 28%; }
      .folio-reel-orb { top: 37%; left: 68%; width: min(58vw, 440px); opacity: .38; }
      .folio-reel-media { top: 20%; right: 5%; bottom: auto; width: 75%; translate: none; transform: rotateZ(var(--reel-tilt, -.55deg)); }
      .folio-reel-media.is-switching { transform: translateX(24px) rotateZ(var(--reel-tilt, -.55deg)) scale(.97); }
      .folio-reel-next { top: 14%; right: -7%; width: 43%; height: min(20vw, 190px); }
      .folio-reel-copy { left: 5%; top: auto; right: auto; bottom: 68px; width: min(58vw, 510px); transform: none; }
      .folio-reel-copy h2 { font-size: clamp(48px, 10vw, 78px); }
      .folio-reel-nav { right: 10px; }
      .folio-reel-progress { left: 5%; right: 5%; }
    }

    @media (max-width: 700px) {
      .folio-reel,
      .folio-reel-stage { min-height: max(740px, 100svh); }
      .folio-reel-stage::before { inset: 118px -20% auto 12%; height: 270px; border-radius: 24px; transform: rotate(-2deg); }
      .folio-reel-stage::after { -webkit-mask-image: linear-gradient(180deg, #000, transparent 76%); mask-image: linear-gradient(180deg, #000, transparent 76%); }
      .folio-reel-code { top: 90px; left: 18px; }
      .folio-reel-ghost { left: -28px; bottom: -30px; font-size: 240px; }
      .folio-reel-orb { top: 33%; left: 73%; width: clamp(290px, 86vw, 360px); opacity: .3; }
      .folio-reel-media { top: 145px; left: 18px; right: 18px; width: auto; border-radius: 13px; transform: rotateZ(var(--reel-tilt, -.55deg)); box-shadow: 0 30px 80px rgba(0, 0, 0, .52), -7px 8px 0 color-mix(in srgb, var(--reel-accent) 48%, #11232c); }
      .folio-reel-media::before { inset-block-start: 25px; }
      .folio-reel-media::after { inset-block-start: 25px; }
      .folio-reel-media .browser-bar { height: 25px; }
      .folio-reel-media img { height: clamp(176px, 23svh, 200px); aspect-ratio: auto; object-fit: cover; object-position: left top; }
      .folio-reel-next { top: 126px; right: -14%; width: 58%; height: 148px; border-radius: 12px; opacity: .28; transform: rotate(5deg); }
      .folio-reel-next figcaption { display: none; }
      .folio-reel-copy { left: 18px; right: 18px; bottom: 58px; width: auto; padding: 21px 19px; border-radius: 19px; }
      .folio-reel-copy h2 { margin-top: 12px; font-size: clamp(43px, 13vw, 61px); }
      .folio-reel-copy p { margin-top: 14px; font-size: 10px; line-height: 1.55; }
      .folio-reel-open { min-width: 184px; height: 42px; margin-top: 17px; }
      .folio-reel-nav { left: 18px; right: 18px; top: 391px; padding: 5px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; border-radius: 14px; transform: none; }
      .folio-reel-nav button { width: auto; height: 32px; }
      .folio-reel-nav button span { display: block; opacity: 1; color: inherit; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
      .folio-reel-nav button.is-active { transform: translateY(-2px); }
      .folio-reel-progress { left: 18px; right: 18px; bottom: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .folio-reel-media::before { display: none; }
      .folio-reel-orb-core::before,
      .folio-reel-orb-core::after { animation: none; }
    }

    /* Full case studies — rebuilt from the detailed projects of the former portfolio. */
    .folio-index-type b { margin-left: 11px; padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; color: color-mix(in srgb, var(--row-accent) 78%, #173b4c); font-size: 6px; font-weight: 760; letter-spacing: .18em; white-space: nowrap; }
    .folio-index-row:hover .folio-index-type b, .folio-index-row:focus-within .folio-index-type b { color: #dfff52; }

    .case-story { --story-accent: #72ddff; --story-bg: #07111b; --story-ink: #eefaff; position: fixed; inset: 0; z-index: 700; overflow: hidden; color: var(--story-ink); background: var(--story-bg); -webkit-clip-path: circle(150vmax at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); clip-path: circle(150vmax at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); animation: storyPortalIn .82s cubic-bezier(.65, 0, .18, 1) both; }
    .case-story.is-closing { animation: storyPortalOut .52s cubic-bezier(.68, 0, .35, 1) both; }
    .case-story-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--story-accent) 55%, transparent) transparent; }
    .case-story-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 15; height: 2px; background: rgba(255, 255, 255, .09); }
    .case-story-progress i { width: 100%; height: 100%; display: block; background: var(--story-accent); box-shadow: 0 0 12px var(--story-accent); transform: scaleX(0); transform-origin: left; will-change: transform; }
    .case-story-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 14; height: 78px; padding: 18px 24px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; pointer-events: none; }
    .case-story-brand { justify-self: start; color: #e8faff; background: linear-gradient(105deg, var(--story-accent), #fff 38%, var(--story-accent) 74%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: 13px; font-weight: 620; letter-spacing: .1em; animation: storyBrandShimmer 8s ease-in-out infinite alternate; }
    .case-story-meta { justify-self: center; display: flex; align-items: center; gap: 13px; color: rgba(226, 242, 250, .58); font-size: 7px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; }
    .case-story-meta i { width: 25px; height: 1px; display: block; background: var(--story-accent); box-shadow: 0 0 7px var(--story-accent); }
    .case-story-close { position: relative; width: 44px; height: 44px; margin-top: -4px; padding: 0; justify-self: end; border: 1px solid rgba(220, 244, 255, .3); border-radius: 50%; color: #effbff; background: rgba(5, 13, 21, .52); box-shadow: 0 12px 34px rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: auto; cursor: pointer; transition: transform .4s ease, border-color .3s ease, background .3s ease; }
    .case-story-close::before, .case-story-close::after { content: ""; position: absolute; left: 12px; top: 21px; width: 19px; height: 1px; background: currentColor; }
    .case-story-close::before { transform: rotate(45deg); }
    .case-story-close::after { transform: rotate(-45deg); }
    .case-story-close:hover, .case-story-close:focus-visible { border-color: var(--story-accent); background: rgba(5, 13, 21, .76); transform: rotate(90deg); outline: none; }
    .case-story-rail { position: absolute; right: 22px; top: 50%; z-index: 13; display: grid; gap: 10px; transform: translateY(-50%); pointer-events: none; }
    .case-story-rail button { width: 34px; min-height: 28px; padding: 0; border: 0; display: grid; grid-template-columns: 1fr; place-items: center; color: rgba(223, 241, 248, .42); background: transparent; font-size: 6px; font-weight: 700; letter-spacing: .12em; pointer-events: auto; cursor: pointer; transition: color .3s ease, transform .3s ease; }
    .case-story-rail button::after { content: ""; width: 11px; height: 1px; margin-top: 3px; background: currentColor; transition: width .3s ease, box-shadow .3s ease; }
    .case-story-rail button:hover, .case-story-rail button:focus-visible, .case-story-rail button.is-active { color: var(--story-accent); transform: translateX(-4px); outline: none; }
    .case-story-rail button.is-active::after { width: 27px; box-shadow: 0 0 7px currentColor; }

    .story { min-height: 100%; overflow: visible; background: var(--story-bg); }
    .story-section { position: relative; padding: clamp(100px, 10vw, 160px) 0; overflow: hidden; isolation: isolate; content-visibility: auto; contain-intrinsic-size: 950px; }
    .story-section:first-child { content-visibility: visible; }
    .story-cover { min-height: 100svh; padding-top: 112px; display: flex; align-items: center; }
    .story-wrap { width: min(100% - 80px, 1380px); margin: 0 auto; }
    .story-cover-grid { display: grid; grid-template-columns: minmax(370px, .8fr) minmax(560px, 1.2fr); gap: clamp(52px, 7vw, 118px); align-items: center; }
    .story-eyebrow { display: flex; align-items: center; gap: 12px; color: var(--story-accent); font-size: 8px; font-weight: 720; letter-spacing: .22em; text-transform: uppercase; }
    .story-eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }
    .story-cover h2 { margin: 22px 0 0; font-size: clamp(72px, 10vw, 158px); font-weight: 540; line-height: .76; letter-spacing: -.08em; overflow-wrap: anywhere; }
    .story-cover h2 span { display: block; color: var(--story-accent); font-family: Georgia, "Times New Roman", serif; font-size: .48em; font-weight: 400; letter-spacing: -.05em; }
    .story-lead { max-width: 600px; margin: 35px 0 0; color: rgba(225, 241, 249, .67); font-size: clamp(13px, 1.1vw, 17px); line-height: 1.72; }
    .story-tags { margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
    .story-tags li { padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--story-accent) 28%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--story-accent) 76%, #fff); background: color-mix(in srgb, var(--story-accent) 7%, transparent); font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
    .story-browser { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--story-accent) 30%, transparent); border-radius: 19px; background: #dbe7eb; box-shadow: 0 50px 130px rgba(0, 0, 0, .46), -15px 16px 0 color-mix(in srgb, var(--story-accent) 25%, rgba(0, 0, 0, .32)); transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(-1.5deg); transition: transform .25s ease-out; }
    .story-browser img { width: 100%; aspect-ratio: 2.055; display: block; object-fit: cover; filter: saturate(.82) contrast(1.04); }
    .story-browser::after { content: ""; position: absolute; inset: 31px 0 0; pointer-events: none; background-image: linear-gradient(rgba(54, 141, 183, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(54, 141, 183, .055) 1px, transparent 1px); background-size: 22px 22px; mix-blend-mode: multiply; }
    .story-title-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .48fr); gap: clamp(45px, 8vw, 130px); align-items: end; }
    .story-title-row h3 { margin: 18px 0 0; color: inherit; font-size: clamp(48px, 7vw, 106px); font-weight: 470; line-height: .88; letter-spacing: -.065em; }
    .story-title-row p { margin: 0 0 5px; color: currentColor; opacity: .62; font-size: 12px; line-height: 1.72; }
    .story-reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .75, .2, 1); }
    .story-reveal[data-reveal="left"] { transform: translateX(-45px); }
    .story-reveal[data-reveal="right"] { transform: translateX(45px); }
    .story-reveal.is-visible { opacity: 1; transform: translate(0); }
    .story-end { min-height: 76svh; padding: 120px 40px; display: grid; place-items: center; text-align: center; }
    .story-end-inner { max-width: 1000px; }
    .story-end p { margin: 0; color: rgba(222, 240, 248, .55); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
    .story-end h3 { margin: 18px 0 36px; color: #f3fbff; font-size: clamp(58px, 9vw, 138px); font-weight: 480; line-height: .82; letter-spacing: -.075em; }
    .story-site-link { min-width: 210px; min-height: 48px; padding: 0 10px 0 18px; border: 1px solid color-mix(in srgb, var(--story-accent) 55%, transparent); border-radius: 999px; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; color: #eefaff; background: rgba(4, 15, 24, .5); font-size: 8px; font-weight: 720; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; transition: transform .3s ease, background .3s ease; }
    .story-site-link i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #07111a; background: var(--story-accent); font-style: normal; font-size: 14px; }
    .story-site-link:hover, .story-site-link:focus-visible { background: color-mix(in srgb, var(--story-accent) 16%, rgba(4, 15, 24, .72)); transform: translateY(-3px); outline: none; }

    /* UBCSHOP */
    .story--ubc { --story-accent: #61c8ff; --story-bg: #06111e; --story-ink: #eef9ff; }
    .story--ubc .story-cover { background: radial-gradient(circle at 76% 48%, rgba(29, 150, 232, .24), transparent 33%), linear-gradient(145deg, #03101d, #082d4b 65%, #06121f); }
    .story--ubc .story-cover::before { content: "UBC"; position: absolute; right: -3vw; bottom: -9vw; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(117, 214, 255, .07); font-size: clamp(210px, 34vw, 560px); font-weight: 800; line-height: .75; letter-spacing: -.1em; }
    .story--ubc .story-browser img.story-browser-logo { position: absolute; right: 22px; bottom: 21px; z-index: 3; width: clamp(70px, 8vw, 112px); height: auto; aspect-ratio: auto; padding: 12px; border: 1px solid rgba(95, 199, 255, .24); border-radius: 50%; object-fit: contain; background: rgba(2, 17, 31, .76); box-shadow: 0 0 35px rgba(47, 159, 233, .27); filter: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .story-ubc-devices { color: #15384e; background: linear-gradient(180deg, #eef7fb, #dcecf4); }
    .story-device-stage { position: relative; height: clamp(390px, 43vw, 610px); margin-top: 70px; perspective: 1300px; }
    .story-device-stage::before { content: ""; position: absolute; left: 50%; bottom: 7%; width: 78%; height: 18%; border-radius: 50%; background: rgba(23, 82, 112, .16); filter: blur(30px); transform: translateX(-50%); }
    .story-device { position: absolute; bottom: 9%; height: auto; filter: drop-shadow(0 28px 26px rgba(21, 60, 83, .2)); transition: transform 1.15s cubic-bezier(.2, .78, .2, 1), opacity .8s ease; }
    .story-device--phone { left: 5%; z-index: 3; width: 13%; transform: translate(-90px, 55px) rotate(-8deg); }
    .story-device--tablet { left: 22%; z-index: 2; width: 35%; transform: translateY(90px) scale(.86); }
    .story-device--monitor { right: 3%; z-index: 1; width: 53%; transform: translate(90px, 70px) rotate(4deg); }
    .story-device-stage.is-visible .story-device { opacity: 1; transform: translate(0) rotate(0) scale(1); }
    .story-ubc-lab { min-height: 100svh; color: #effaff; background: radial-gradient(circle at 68% 48%, rgba(44, 149, 222, .2), transparent 31%), linear-gradient(145deg, #06131f, #091c2b 62%, #050c13); }
    .story-ubc-lab::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .65; background-image: linear-gradient(rgba(84, 185, 231, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(84, 185, 231, .055) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(circle at 65% 48%, #000, transparent 62%); mask-image: radial-gradient(circle at 65% 48%, #000, transparent 62%); }
    .story-ubc-lab-grid { margin-top: 70px; display: grid; grid-template-columns: minmax(300px, .55fr) minmax(500px, 1fr); gap: clamp(45px, 7vw, 110px); align-items: center; }
    .story-ubc-copy h4 { margin: 0; color: #f0faff; font-size: clamp(36px, 5vw, 74px); font-weight: 470; line-height: .93; letter-spacing: -.055em; }
    .story-ubc-copy p { max-width: 430px; margin: 25px 0 0; color: rgba(211, 233, 244, .62); font-size: 12px; line-height: 1.78; }
    .story-run-button { min-height: 42px; margin-top: 30px; padding: 0 16px; border: 1px solid rgba(93, 202, 255, .34); border-radius: 9px; color: #bfeeff; background: rgba(28, 109, 164, .14); font-size: 7px; font-weight: 720; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .3s ease, box-shadow .3s ease; }
    .story-run-button:hover, .story-run-button:focus-visible, .story-ubc-machine.is-running + .story-run-button { background: rgba(33, 126, 187, .25); box-shadow: 0 0 25px rgba(67, 180, 238, .16); outline: none; }
    .story-ubc-machine { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; min-height: 540px; border: 1px solid rgba(101, 202, 245, .18); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(33, 115, 170, .18), transparent 63%); transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .25s ease-out; }
    .story-ubc-machine::before, .story-ubc-machine::after { content: ""; position: absolute; border: 1px dashed rgba(100, 208, 252, .23); border-radius: 50%; }
    .story-ubc-machine::before { inset: 8%; animation: storyOrbit 28s linear infinite; }
    .story-ubc-machine::after { inset: 20%; animation: storyOrbit 20s linear infinite reverse; }
    .story-ubc-machine img { position: relative; z-index: 2; width: min(78%, 680px); filter: drop-shadow(0 38px 45px rgba(0, 0, 0, .42)); transition: transform .7s ease, filter .7s ease; }
    .story-ubc-machine.is-running img { transform: translateY(-12px) scale(1.025); filter: drop-shadow(0 42px 55px rgba(55, 185, 246, .27)); animation: ubcMachineFloat 4.4s ease-in-out infinite; }
    .story-ubc-machine.is-running::before { border-style: solid; border-color: rgba(116, 222, 255, .45); box-shadow: 0 0 34px rgba(63, 185, 242, .2); }
    .story-ubc-detail { color: #16384c; background: #eaf4f8; }
    .story-ubc-filter { margin-top: 65px; padding: clamp(24px, 4vw, 54px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; border: 1px solid rgba(29, 105, 142, .16); border-radius: 20px; background: rgba(255, 255, 255, .56); box-shadow: 0 30px 80px rgba(33, 84, 109, .09); }
    .story-filter-title { font-size: clamp(28px, 4vw, 52px); font-weight: 480; line-height: .95; letter-spacing: -.05em; }
    .story-filter-groups { display: grid; gap: 20px; }
    .story-filter-group span { margin-bottom: 9px; display: block; color: rgba(20, 61, 81, .48); font-size: 7px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
    .story-filter-options { display: flex; flex-wrap: wrap; gap: 7px; }
    .story-filter-options button { min-height: 31px; padding: 0 11px; border: 1px solid rgba(27, 91, 123, .15); border-radius: 7px; color: rgba(14, 55, 76, .68); background: rgba(255, 255, 255, .65); font-size: 8px; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease; }
    .story-filter-options button:hover, .story-filter-options button:focus-visible, .story-filter-options button.is-active { color: #fff; border-color: #238fca; background: #238fca; outline: none; }
    .story-ubc-icons { margin-top: 70px; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
    .story-ubc-icons figure { min-width: 0; aspect-ratio: 1; margin: 0; padding: 13px; border: 1px solid rgba(31, 105, 140, .13); border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .5); transition: transform .35s ease, box-shadow .35s ease; }
    .story-ubc-icons figure:hover { transform: translateY(-7px); box-shadow: 0 18px 35px rgba(29, 90, 119, .12); }
    .story-ubc-icons img { max-height: 100%; }
    .story-ubc-concept { color: #eaf8ff; background: linear-gradient(135deg, #06121d, #102638); }
    .story-concept-stage { margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(210px, .38fr); gap: clamp(28px, 4vw, 62px); align-items: center; }
    .story-concept-screen { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; aspect-ratio: 2 / 1; margin: 0; overflow: hidden; border: 1px solid rgba(123, 215, 255, .25); border-radius: 18px; background: #071824; box-shadow: 0 42px 95px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(255, 255, 255, .025); transform: perspective(1450px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .25s ease-out, box-shadow .4s ease; }
    .story-concept-screen:hover { box-shadow: 0 48px 110px rgba(0, 0, 0, .55), 0 0 55px rgba(72, 181, 237, .12); }
    .story-concept-screen img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: 50% 50%; filter: saturate(.66) contrast(1.12) brightness(.82) hue-rotate(-4deg); }
    .story-concept-screen::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(109, 207, 249, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 207, 249, .1) 1px, transparent 1px); background-size: 24px 24px; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(110deg, transparent 2%, #000 31%, #000 76%, transparent 100%); mask-image: linear-gradient(110deg, transparent 2%, #000 31%, #000 76%, transparent 100%); }
    .story-concept-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg, rgba(104, 211, 255, .13), transparent 31%, transparent 67%, rgba(0, 19, 32, .38)), radial-gradient(circle at 45% 50%, transparent 46%, rgba(1, 11, 19, .36) 100%); box-shadow: inset 0 0 0 1px rgba(195, 236, 255, .06), inset 0 -50px 80px rgba(0, 14, 24, .2); }
    .story-concept-logo { max-width: 280px; justify-self: center; filter: drop-shadow(0 25px 32px rgba(0, 0, 0, .33)); animation: ubcMachineFloat 5s ease-in-out infinite; }
    .story--ubc .story-end { background: radial-gradient(circle at 50% 45%, rgba(35, 138, 206, .24), transparent 34%), #06121e; }

    /* TEA FUNNY */
    .story--tea { --story-accent: #ff315f; --story-bg: #260515; --story-ink: #fff9fb; }
    .story--tea .story-cover { background: linear-gradient(164deg, #d80f48 0 55%, #72b747 55.2% 100%); }
    .story--tea .story-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .34; background-image: radial-gradient(circle, #fff 0 5px, transparent 6px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(100deg, transparent 12%, #000 55%, transparent 91%); mask-image: linear-gradient(100deg, transparent 12%, #000 55%, transparent 91%); }
    .story--tea .story-cover h2 { color: #fff; text-shadow: 0 9px 0 rgba(102, 7, 40, .18); }
    .story--tea .story-cover h2 span { color: #fff799; }
    .story--tea .story-lead { color: rgba(255, 255, 255, .83); }
    .story--tea .story-browser { border-color: rgba(255, 255, 255, .42); box-shadow: 0 45px 100px rgba(78, 2, 31, .35), -14px 16px 0 rgba(255, 233, 105, .78); transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(2deg); }
    .story-browser img.story-tea-logo { position: absolute; left: 22px; top: 52px; z-index: 3; width: 88px; height: auto; aspect-ratio: auto; padding: 10px; border-radius: 12px; object-fit: contain; background: rgba(255, 255, 255, .92); box-shadow: 0 14px 35px rgba(71, 4, 27, .3); filter: none; transform: rotate(-6deg); }
    .story-tea-lab { color: #3a0b1c; background: linear-gradient(135deg, #fff7ef, #ffe9ef 60%, #ffdce8); }
    .story-tea-lab::before { content: "TASTE"; position: absolute; right: -2vw; top: 4vw; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(210, 25, 79, .09); font-size: clamp(150px, 25vw, 410px); font-weight: 800; line-height: .8; letter-spacing: -.1em; }
    .story-tea-playground { margin-top: 65px; display: grid; grid-template-columns: minmax(330px, .72fr) minmax(500px, 1.28fr); gap: clamp(50px, 8vw, 130px); align-items: center; }
    .story-flavor-nav { display: grid; gap: 8px; }
    .story-flavor-nav button { min-height: 58px; padding: 0 17px; border: 0; border-bottom: 1px solid rgba(113, 27, 58, .15); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; color: rgba(63, 15, 34, .6); background: transparent; text-align: left; cursor: pointer; transition: padding-left .35s ease, color .3s ease, background .3s ease; }
    .story-flavor-nav button i { width: 13px; height: 13px; border: 2px solid #fff; border-radius: 50%; display: block; background: var(--flavor, #e61958); box-shadow: 0 0 0 1px rgba(62, 15, 33, .16); }
    .story-flavor-nav button span { font-size: clamp(15px, 1.5vw, 21px); font-weight: 520; letter-spacing: -.025em; }
    .story-flavor-nav button small { font-size: 8px; letter-spacing: .08em; }
    .story-flavor-nav button:hover, .story-flavor-nav button:focus-visible, .story-flavor-nav button.is-active { padding-left: 28px; color: #4a1026; background: rgba(217, 22, 79, .07); outline: none; }
    .story-drink-stage { position: relative; min-height: 570px; display: grid; place-items: center; }
    .story-drink-stage::before { content: ""; position: absolute; width: 82%; aspect-ratio: 1; border: 1px dashed rgba(210, 24, 79, .17); border-radius: 50%; animation: storyOrbit 24s linear infinite; }
    .story-drink { --drink-one: #ffca45; --drink-two: #ff6d88; position: relative; z-index: 2; width: clamp(215px, 23vw, 330px); height: clamp(330px, 36vw, 470px); border: 7px solid rgba(255, 255, 255, .75); border-top-width: 14px; border-radius: 24px 24px 78px 78px; background: linear-gradient(160deg, rgba(255, 255, 255, .45), transparent 27%), linear-gradient(180deg, var(--drink-one), var(--drink-two)); box-shadow: inset 0 0 0 2px rgba(115, 18, 53, .13), 0 50px 70px rgba(123, 21, 57, .2); transform: rotate(-3deg); transition: background .65s ease, transform .45s ease; }
    .story-drink:hover { transform: rotate(2deg) translateY(-8px); }
    .story-drink::before { content: ""; position: absolute; left: 62%; bottom: 88%; width: 22px; height: 190px; border-radius: 999px; background: #8bd14d; box-shadow: inset 4px 0 rgba(255, 255, 255, .32); transform: rotate(13deg); transform-origin: bottom; }
    .story-drink::after { content: "TEA FUNNY"; position: absolute; left: 50%; top: 36%; color: #fff; font-size: clamp(21px, 2.4vw, 34px); font-weight: 850; letter-spacing: -.05em; text-shadow: 0 3px rgba(83, 8, 35, .2); transform: translateX(-50%) rotate(-5deg); white-space: nowrap; }
    .story-pearls { position: absolute; left: 16%; right: 16%; bottom: 11%; height: 22%; }
    .story-pearls i { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(119, 24, 59, .72); box-shadow: inset 4px 4px rgba(255, 255, 255, .18); animation: teaPearl 3.4s ease-in-out infinite; }
    .story-pearls i:nth-child(1) { left: 4%; bottom: 8%; }
    .story-pearls i:nth-child(2) { left: 25%; bottom: 34%; animation-delay: -.8s; }
    .story-pearls i:nth-child(3) { left: 46%; bottom: 4%; animation-delay: -1.6s; }
    .story-pearls i:nth-child(4) { right: 19%; bottom: 40%; animation-delay: -2.4s; }
    .story-pearls i:nth-child(5) { right: 0; bottom: 9%; animation-delay: -1.1s; }
    .story-drink-copy { position: absolute; right: 1%; bottom: 4%; z-index: 4; width: min(270px, 38%); padding: 20px; border-radius: 14px; color: #fff; background: rgba(67, 7, 29, .84); box-shadow: 0 20px 45px rgba(92, 14, 43, .2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .story-drink-copy strong { display: block; font-size: 16px; font-weight: 650; }
    .story-drink-copy span { margin-top: 8px; display: block; color: rgba(255, 255, 255, .7); font-size: 9px; line-height: 1.55; }
    .story-drink-copy b { margin-top: 12px; display: block; color: #fff18a; font-size: 22px; font-weight: 520; }
    .story-tea-screens { color: #fff9fb; background: #210711; }
    .story-screen-collage { position: relative; min-height: clamp(620px, 68vw, 950px); margin-top: 65px; perspective: 1400px; }
    .story-screen-collage figure { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(255, 185, 207, .23); border-radius: 18px; background: #fff; box-shadow: 0 45px 100px rgba(0, 0, 0, .5); transition: transform .65s cubic-bezier(.2, .75, .2, 1), filter .45s ease; }
    .story-screen-collage figure:first-child { left: 0; top: 5%; z-index: 2; width: 71%; transform: rotateY(7deg) rotateZ(-2deg); }
    .story-screen-collage figure:last-child { right: 0; bottom: 2%; z-index: 3; width: 68%; transform: rotateY(-7deg) rotateZ(2.5deg); }
    .story-screen-collage figure:hover { z-index: 5; transform: rotate(0) translateY(-12px) scale(1.025); }
    .story-screen-collage img { width: 100%; display: block; filter: saturate(.88) contrast(1.04); }
    .story-tea-menu { color: #441126; background: linear-gradient(180deg, #fff4f6, #ffe4eb); }
    .story-menu-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .story-menu-card { position: relative; min-height: 310px; padding: 30px 26px; overflow: hidden; border: 1px solid rgba(164, 27, 73, .12); border-radius: 18px; background: rgba(255, 255, 255, .62); transition: transform .4s ease, color .35s ease, background .35s ease; }
    .story-menu-card::before { content: ""; position: absolute; right: -40px; bottom: -48px; width: 150px; height: 150px; border-radius: 50%; background: var(--menu-color, #e41f59); opacity: .15; transition: transform .5s ease, opacity .4s ease; }
    .story-menu-card:hover { color: #fff; background: var(--menu-color, #e41f59); transform: translateY(-10px) rotate(-1deg); }
    .story-menu-card:hover::before { opacity: .27; transform: scale(1.9); }
    .story-menu-card small { position: relative; font-size: 8px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
    .story-menu-card h4 { position: relative; margin: 74px 0 18px; font-size: clamp(27px, 3vw, 42px); font-weight: 520; line-height: .95; letter-spacing: -.05em; }
    .story-menu-card p { position: relative; margin: 0; opacity: .66; font-size: 10px; line-height: 1.65; }
    .story-menu-card b { position: absolute; left: 26px; bottom: 27px; font-size: 18px; font-weight: 530; }
    .story--tea .story-end { background: radial-gradient(circle at 50% 45%, rgba(255, 77, 129, .25), transparent 35%), #2b0716; }

    /* MILITANT */
    .story--militant { --story-accent: #d9ed7a; --story-bg: #10150f; --story-ink: #f2f4e9; }
    .story--militant .story-cover { background: radial-gradient(circle at 78% 46%, rgba(153, 171, 85, .22), transparent 31%), linear-gradient(135deg, #080b08, #20271b 62%, #0d120d); }
    .story--militant .story-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .23; background-image: repeating-linear-gradient(45deg, rgba(213, 232, 151, .08) 0 1px, transparent 1px 18px), repeating-linear-gradient(-45deg, rgba(213, 232, 151, .055) 0 1px, transparent 1px 18px); -webkit-mask-image: radial-gradient(circle at 74% 48%, #000, transparent 62%); mask-image: radial-gradient(circle at 74% 48%, #000, transparent 62%); }
    .story--militant .story-cover h2 { font-size: clamp(66px, 9.2vw, 145px); }
    .story--militant .story-browser { box-shadow: 0 50px 120px rgba(0, 0, 0, .53), -15px 16px 0 rgba(156, 171, 95, .28); }
    .story-militant-devices { color: #273024; background: linear-gradient(180deg, #edf0e7, #dfe5d5); }
    .story-militant-devices .story-device-stage::after { content: "FIELD / RESPONSIVE / SYSTEM"; position: absolute; left: 50%; bottom: 0; color: rgba(47, 63, 39, .34); font-size: 8px; font-weight: 700; letter-spacing: .24em; transform: translateX(-50%); white-space: nowrap; }
    .story-live-device { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(54, 67, 45, .2); background: #fff; box-shadow: 0 30px 70px rgba(40, 52, 34, .2), inset 0 0 0 1px rgba(255, 255, 255, .56); opacity: 0; transition: opacity .85s ease, transform 1.15s cubic-bezier(.2, .78, .2, 1); }
    .story-live-device img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(.72) contrast(1.07) brightness(.98); }
    .story-live-device::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(130deg, rgba(220, 235, 184, .12), transparent 35%), repeating-linear-gradient(0deg, rgba(42, 54, 36, .025) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; }
    .story-live-device span { position: absolute; left: 9px; bottom: 8px; z-index: 2; padding: 5px 7px; border-radius: 999px; color: rgba(239, 245, 226, .78); background: rgba(14, 18, 13, .72); font-size: 6px; font-weight: 720; letter-spacing: .13em; text-transform: uppercase; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .story-live-device--mobile { left: 3%; bottom: 8%; z-index: 4; width: 14.5%; aspect-ratio: 390 / 844; border: 7px solid #242a21; border-radius: 22px; transform: translate(-85px, 70px) rotate(-7deg); }
    .story-live-device--tablet { left: 20%; bottom: 10%; z-index: 3; width: 38%; aspect-ratio: 1 / 1; border: 8px solid #30382d; border-radius: 18px; transform: translateY(95px) rotate(-2deg) scale(.9); }
    .story-live-device--desktop { right: 1%; bottom: 14%; z-index: 2; width: 59%; aspect-ratio: 1440 / 860; border: 9px solid #30372d; border-radius: 17px; transform: translate(95px, 70px) rotate(3deg); }
    .story-device-stage.is-visible .story-live-device { opacity: 1; transform: translate(0) rotate(0) scale(1); }
    .story-militant-architecture { color: #eef1e6; background: linear-gradient(145deg, #151a13, #0b0e0b); }
    .story-militant-architecture::before { content: "CATALOG"; position: absolute; left: -2vw; bottom: -4vw; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(212, 233, 143, .055); font-size: clamp(150px, 25vw, 400px); font-weight: 760; line-height: .75; letter-spacing: -.08em; }
    .story-camo-tags { margin-top: 55px; display: flex; flex-wrap: wrap; gap: 9px; }
    .story-camo-tags span { padding: 13px 15px; border: 1px solid rgba(209, 229, 143, .17); border-radius: 6px; color: rgba(235, 241, 213, .72); background: rgba(133, 153, 77, .07); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; transition: color .3s ease, background .3s ease, transform .3s ease; }
    .story-camo-tags span:hover { color: #12170f; background: var(--story-accent); transform: translateY(-4px) rotate(-1deg); }
    .story-militant-filter { margin-top: 42px; padding: clamp(24px, 4vw, 50px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; border: 1px solid rgba(211, 232, 144, .14); border-radius: 14px; background: rgba(206, 228, 142, .045); box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 35px 80px rgba(0, 0, 0, .25); }
    .story-militant-filter fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
    .story-militant-filter legend { margin-bottom: 18px; color: var(--story-accent); font-size: 8px; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; }
    .story-militant-filter button { min-height: 31px; margin: 0 5px 7px 0; padding: 0 10px; border: 1px solid rgba(219, 236, 160, .14); border-radius: 5px; color: rgba(233, 239, 214, .59); background: rgba(255, 255, 255, .025); font-size: 8px; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease; }
    .story-militant-filter button:hover, .story-militant-filter button:focus-visible, .story-militant-filter button.is-active { color: #12170f; border-color: var(--story-accent); background: var(--story-accent); outline: none; }
    .story-militant-scan { min-height: 100svh; color: #edf3df; background: #070a07; content-visibility: visible; }
    .story-scan-sticky { position: relative; width: min(100% - 80px, 1380px); min-height: calc(100svh - clamp(200px, 20vw, 320px)); margin: 0 auto; display: grid; grid-template-columns: minmax(250px, .42fr) minmax(0, 1.15fr); gap: clamp(35px, 7vw, 110px); align-items: center; }
    .story-scan-copy { align-self: center; }
    .story-scan-copy small { color: var(--story-accent); font-size: 8px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
    .story-scan-copy h3 { margin: 18px 0 0; font-size: clamp(46px, 6vw, 92px); font-weight: 480; line-height: .87; letter-spacing: -.06em; }
    .story-scan-copy p { max-width: 390px; margin: 25px 0 0; color: rgba(226, 236, 204, .55); font-size: 11px; line-height: 1.72; }
    .story-scan-status { margin-top: 35px; display: flex; align-items: center; gap: 12px; color: rgba(217, 234, 162, .54); font-size: 7px; letter-spacing: .15em; text-transform: uppercase; }
    .story-scan-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--story-accent); box-shadow: 0 0 10px var(--story-accent); }
    .story-live-perspective { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; width: min(100%, 930px); aspect-ratio: 1.45; justify-self: end; perspective: 1600px; transform: perspective(1600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style: preserve-3d; transition: transform .28s ease-out; }
    .story-live-perspective::before { content: ""; position: absolute; left: 2%; right: 0; bottom: 2%; height: 46%; opacity: .55; background-image: linear-gradient(rgba(211, 235, 141, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(211, 235, 141, .13) 1px, transparent 1px); background-size: 30px 30px; filter: blur(.2px); transform: perspective(600px) rotateX(63deg) translateY(37%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
    .story-perspective-screen { position: absolute; margin: 0; overflow: hidden; border: 1px solid rgba(218, 237, 157, .22); border-radius: 12px; background: #f7f8f4; box-shadow: 0 35px 80px rgba(0, 0, 0, .6); transform-style: preserve-3d; transition: filter .4s ease, box-shadow .4s ease; }
    .story-perspective-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(219, 239, 154, .1), transparent 35%, rgba(3, 8, 3, .15)), repeating-linear-gradient(0deg, rgba(29, 42, 23, .035) 0 1px, transparent 1px 4px); mix-blend-mode: multiply; }
    .story-perspective-screen img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(.7) contrast(1.08) brightness(.92); }
    .story-perspective-screen--catalog { left: 1%; top: 1%; z-index: 1; width: 75%; aspect-ratio: 1440 / 860; transform: rotateY(12deg) rotateZ(-2deg) translateZ(-45px); }
    .story-perspective-screen--product { right: 0; bottom: 4%; z-index: 2; width: 68%; aspect-ratio: 1440 / 860; transform: rotateY(-11deg) rotateZ(2.2deg) translateZ(36px); }
    .story-perspective-screen--mobile { left: 4%; bottom: 1%; z-index: 3; width: 16%; aspect-ratio: 390 / 844; border: 5px solid #171d15; border-radius: 16px; transform: rotateY(11deg) rotateZ(-4deg) translateZ(80px); }
    .story-live-perspective:hover .story-perspective-screen { box-shadow: 0 42px 95px rgba(0, 0, 0, .66), 0 0 35px rgba(194, 226, 104, .08); }
    .story-militant-integrations { color: #273023; background: #e9ede3; }
    .story-integration-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
    .story-integration { min-height: 330px; margin: 0; padding: 38px 30px; border: 1px solid rgba(55, 76, 46, .13); border-radius: 16px; display: flex; flex-direction: column; background: rgba(255, 255, 255, .6); transition: transform .45s ease, box-shadow .4s ease; }
    .story-integration:hover { transform: translateY(-10px); box-shadow: 0 28px 60px rgba(50, 69, 43, .12); }
    .story-integration img { max-width: 70%; max-height: 100px; margin: auto; object-fit: contain; mix-blend-mode: multiply; }
    .story-integration figcaption { margin-top: auto; color: rgba(40, 55, 34, .63); font-size: 10px; line-height: 1.6; }
    .story--militant .story-end { background: radial-gradient(circle at 50% 42%, rgba(166, 185, 95, .2), transparent 35%), #10150e; }

    @keyframes storyPortalIn { from { opacity: .3; -webkit-clip-path: circle(0 at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); clip-path: circle(0 at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); } to { opacity: 1; -webkit-clip-path: circle(150vmax at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); clip-path: circle(150vmax at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); } }
    @keyframes storyPortalOut { from { opacity: 1; -webkit-clip-path: circle(150vmax at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); clip-path: circle(150vmax at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); } to { opacity: .2; -webkit-clip-path: circle(0 at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); clip-path: circle(0 at var(--story-origin-x, 50%) var(--story-origin-y, 50%)); } }
    @keyframes storyBrandShimmer { to { background-position: 100% 50%; } }
    @keyframes storyOrbit { to { transform: rotate(360deg); } }
    @keyframes ubcMachineFloat { 50% { transform: translateY(-15px) scale(1.015); } }
    @keyframes teaPearl { 50% { transform: translateY(-10px) rotate(10deg); } }
    @keyframes storyNodePulse { 50% { opacity: .36; transform: scale(.72); } }

    @media (max-width: 980px) {
      .case-story-bar { grid-template-columns: 1fr auto; }
      .case-story-meta { display: none; }
      .story-cover-grid { grid-template-columns: 1fr; gap: 60px; }
      .story-cover-copy { max-width: 760px; }
      .story-title-row { grid-template-columns: 1fr; gap: 30px; }
      .story-ubc-lab-grid, .story-tea-playground { grid-template-columns: 1fr; }
      .story-ubc-machine { min-height: min(72vw, 620px); }
      .story-drink-stage { min-height: 530px; }
      .story-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .story-scan-sticky { grid-template-columns: .5fr 1fr; gap: 35px; }
      .story-scan-copy h3 { font-size: clamp(38px, 6vw, 64px); }
      .story-live-device--mobile { width: 16%; }
      .story-live-device--tablet { left: 18%; width: 40%; }
      .story-live-device--desktop { width: 62%; }
    }

    @media (max-width: 700px) {
      .folio-index-type b { margin-left: 6px; padding: 4px 6px; font-size: 5px; }
      .case-story-bar { height: 66px; padding: 14px 14px 0; }
      .case-story-brand { font-size: 11px; }
      .case-story-close { width: 40px; height: 40px; }
      .case-story-close::before, .case-story-close::after { left: 11px; top: 19px; width: 17px; }
      .case-story-rail { left: 12px; right: 12px; top: auto; bottom: 10px; padding: 6px 10px; grid-template-columns: repeat(var(--story-sections, 5), 1fr); gap: 2px; border: 1px solid rgba(215, 239, 248, .14); border-radius: 999px; background: rgba(4, 12, 19, .75); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: none; }
      .case-story-rail button { width: auto; min-height: 30px; }
      .case-story-rail button::after { width: 8px; }
      .case-story-rail button:hover, .case-story-rail button:focus-visible, .case-story-rail button.is-active { transform: translateY(-2px); }
      .case-story-rail button.is-active::after { width: 22px; }
      .story-section { padding: 88px 0; }
      .story-cover { padding-top: 95px; padding-bottom: 90px; }
      .story-wrap { width: min(100% - 32px, 1380px); }
      .story-cover-grid { gap: 46px; }
      .story-cover h2 { font-size: clamp(59px, 22vw, 102px); }
      .story-lead { margin-top: 25px; font-size: 12px; }
      .story-browser { border-radius: 12px; box-shadow: 0 28px 60px rgba(0, 0, 0, .4), -7px 8px 0 color-mix(in srgb, var(--story-accent) 24%, rgba(0, 0, 0, .32)); transform: none; }
      .story-browser .browser-bar { height: 25px; }
      .story-browser::after { inset: 25px 0 0; }
      .story-title-row h3 { font-size: clamp(43px, 15vw, 67px); }
      .story-device-stage { height: 330px; margin-top: 46px; }
      .story-device--phone { left: 2%; width: 17%; }
      .story-device--tablet { left: 15%; width: 43%; }
      .story-device--monitor { right: 0; width: 62%; }
      .story-militant-devices .story-device-stage { height: 380px; }
      .story-live-device--mobile { left: 0; width: 19%; border-width: 4px; border-radius: 13px; }
      .story-live-device--tablet { left: 14%; bottom: 9%; width: 47%; border-width: 5px; border-radius: 11px; }
      .story-live-device--desktop { right: 0; bottom: 16%; width: 65%; border-width: 5px; border-radius: 10px; }
      .story-live-device span { display: none; }
      .story-ubc-lab-grid { margin-top: 45px; gap: 45px; }
      .story-ubc-machine { min-height: 90vw; }
      .story-ubc-filter { margin-top: 42px; padding: 20px; grid-template-columns: 1fr; }
      .story-ubc-icons { margin-top: 42px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .story-concept-stage { grid-template-columns: 1fr; }
      .story-concept-logo { max-width: 180px; }
      .story-browser img.story-tea-logo { top: 38px; width: 62px; }
      .story-tea-playground { margin-top: 40px; gap: 30px; }
      .story-flavor-nav button { min-height: 50px; grid-template-columns: 25px minmax(0, 1fr) auto; }
      .story-flavor-nav button span { font-size: 14px; }
      .story-drink-stage { min-height: 475px; }
      .story-drink { width: 205px; height: 325px; }
      .story-drink-copy { right: 0; bottom: 0; width: 52%; padding: 14px; }
      .story-drink-copy strong { font-size: 13px; }
      .story-screen-collage { min-height: 560px; margin-top: 42px; }
      .story-screen-collage figure:first-child { width: 92%; }
      .story-screen-collage figure:last-child { width: 87%; }
      .story-menu-grid { margin-top: 42px; grid-template-columns: 1fr; }
      .story-menu-card { min-height: 260px; }
      .story-militant-filter { margin-top: 35px; padding: 20px; grid-template-columns: 1fr; gap: 24px; }
      .story-camo-tags { margin-top: 36px; }
      .story-scan-sticky { width: min(100% - 32px, 1380px); min-height: 0; grid-template-columns: 1fr; gap: 35px; align-content: center; }
      .story-scan-copy h3 { font-size: 40px; }
      .story-scan-copy p { margin-top: 14px; font-size: 9px; }
      .story-scan-status { margin-top: 14px; }
      .story-live-perspective { width: 100%; aspect-ratio: 1.1; justify-self: stretch; transform: none; }
      .story-perspective-screen--catalog { width: 79%; }
      .story-perspective-screen--product { width: 73%; }
      .story-perspective-screen--mobile { width: 19%; }
      .story-integration-grid { margin-top: 42px; grid-template-columns: 1fr; }
      .story-integration { min-height: 240px; }
      .story-end { min-height: 72svh; padding: 90px 18px 120px; }
      .story-end h3 { font-size: clamp(54px, 19vw, 86px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .case-story, .case-story.is-closing { animation-duration: .01ms; }
      .story-reveal { opacity: 1; transform: none; transition: none; }
      .story-ubc-machine::before, .story-ubc-machine::after, .story-drink-stage::before, .story-pearls i, .story-concept-logo, .case-story-brand, .story-scan-status i { animation: none; }
      .story-device, .story-live-device { opacity: 1; transform: none; transition: none; }
      .story-live-perspective, .story-concept-screen { transform: none; transition: none; }
    }