*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── DESIGN TOKENS ─────────────────────────────────────── */
    :root {
      --surface-primary:   #FFFFFF;
      --surface-secondary: #F8F9FA;
      --text-primary:      #0B0B0C;
      --text-secondary:    #55565A;
      --text-tertiary:     #9B9DA2;
      --brand:             #5F2EEA;
      --brand-blue:        #005AF2;
      --brand-yellow:      #FFD200;
      --border:            #E4E7EC;
      --shadow-node:       0 4px 20px rgba(0,0,0,0.06);
      --shadow-hover:      0 8px 40px rgba(95,46,234,0.14);
      --radius-sm:         6px;
      --radius-md:         12px;
      --font:              'Inter', system-ui, -apple-system, sans-serif;
      --font-display:      'Inter', system-ui, sans-serif;
      --nav-h:             64px;
      --play-scale:        0.64;
    }

    html, body { width:100%; height:100%; overflow:hidden; background:var(--surface-secondary); font-family:var(--font); color:var(--text-primary); -webkit-font-smoothing:antialiased; }

    /* ══════════════════════════════════════════════════
       CANVAS ENGINE LAYER
    ══════════════════════════════════════════════════ */
    #canvas-viewport { position:fixed; inset:0; overflow:hidden; cursor:default; }
    #canvas-viewport.space-ready { cursor:grab; }
    #canvas-viewport.dragging    { cursor:grabbing !important; }

    #canvas-world {
      position:absolute; top:0; left:0;
      transform-origin:0 0;
      will-change:transform;
    }
    #canvas-world.play-transitioning {
      transition: transform 750ms cubic-bezier(0.34,1.48,0.64,1);
    }

    /* Dot grid */
    #dot-grid {
      position:fixed; inset:0;
      background-image:radial-gradient(circle,#C8CDD6 1px,transparent 1px);
      background-size:28px 28px;
      opacity:0; transition:opacity 0.4s ease; pointer-events:none; z-index:0;
    }
    .canvas-active #dot-grid { opacity:1; }

    /* ══════════════════════════════════════════════════
       PAGE NODES
    ══════════════════════════════════════════════════ */
    #landing-node {
      position:absolute; top:0; left:0;
      background:var(--surface-primary);
      box-shadow:0 0 0 1px var(--border), 0 8px 48px rgba(0,0,0,0.06);
      z-index:1; transition:border-radius 400ms ease; overflow:hidden;
    }
    .canvas-active #landing-node { border-radius:12px; overflow:visible; }

    #landing-scroll {
      width:100%; height:100%; overflow-y:auto; overflow-x:hidden;
      overscroll-behavior:none; scroll-behavior:smooth;
    }
    #landing-scroll::-webkit-scrollbar { display:none; }
    #landing-scroll { scrollbar-width:none; }
    .canvas-active #landing-scroll { overflow:visible; height:auto; }
    .canvas-active .nav { position:relative; }

    /* ══════════════════════════════════════════════════
       NAV
    ══════════════════════════════════════════════════ */
    .nav {
      position:sticky; top:0; z-index:20;
      display:grid; grid-template-columns:auto 1fr auto;
      align-items:center; gap:24px;
      padding:0 48px; height:var(--nav-h);
      background:transparent;
      transition:background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
      border-bottom:1px solid transparent;
    }
    .nav.scrolled {
      background:rgba(255,255,255,0.88);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border-bottom-color:var(--border);
    }
    .nav-logo { display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; }
    .nav-logo svg { height:28px; width:auto; display:block; }
    .nav-links { display:flex; align-items:center; justify-content:center; gap:36px; list-style:none; }
    .nav-links a { font-size:13px; font-weight:500; color:var(--text-secondary); text-decoration:none; letter-spacing:0.01em; transition:color 0.2s; }
    .nav-links a:hover { color:var(--text-primary); }
    .nav-links a.nav-active { color:var(--text-primary) !important; font-weight:600; }
    .nav-cta { font-size:13px !important; font-weight:500 !important; color:#fff !important; background:var(--brand); padding:8px 20px; border-radius:var(--radius-sm); transition:opacity 0.2s !important; text-decoration:none; }
    .nav-cta:hover { opacity:0.85 !important; }
    .nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
    .nav-right .nav-cta { display:flex; }

    /* Play Corner button */
    #btn-play-corner,
    #btn-play-corner-cases,
    #btn-play-corner-detail {
      display:inline-flex; align-items:center; gap:7px;
      font-size:12px; font-weight:500; color:var(--brand);
      background:rgba(95,46,234,0.06); border:1px solid rgba(95,46,234,0.2);
      padding:7px 14px; border-radius:100px;
      cursor:pointer; transition:background 0.15s,border-color 0.15s,transform 0.1s;
      white-space:nowrap; font-family:var(--font);
    }
    #btn-play-corner:hover, #btn-play-corner-cases:hover, #btn-play-corner-detail:hover { background:rgba(95,46,234,0.12); border-color:rgba(95,46,234,0.4); }
    #btn-play-corner:active, #btn-play-corner-cases:active, #btn-play-corner-detail:active { transform:scale(0.97); }
    #btn-play-corner.active, #btn-play-corner-cases.active, #btn-play-corner-detail.active { background:var(--brand); color:#fff; border-color:var(--brand); }
    .play-icon { width:14px; height:14px; flex-shrink:0; transition:transform 0.3s ease; }
    #btn-play-corner.active .play-icon, #btn-play-corner-cases.active .play-icon, #btn-play-corner-detail.active .play-icon { transform:rotate(45deg); }

    /* Hamburger */
    .nav-hamburger { display:none; align-items:center; justify-content:center; width:36px; height:36px; background:transparent; border:none; cursor:pointer; padding:0; border-radius:var(--radius-sm); transition:background 0.12s; flex-shrink:0; }
    .nav-hamburger:hover { background:var(--surface-secondary); }
    .nav-hamburger svg { display:block; }

    /* ══════════════════════════════════════════════════
       HERO — full-viewport, content at bottom
    ══════════════════════════════════════════════════ */
    .hero {
      min-height:100vh;
      display:flex; flex-direction:column; justify-content:flex-end;
      padding:0 48px 80px;
      position:relative; overflow:hidden;
    }
    /* Subtle grid background */
    .hero::before {
      content:''; position:absolute; inset:0;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size:64px 64px;
      opacity:0.35; pointer-events:none;
    }
    /* Brand blob top-right */
    .hero::after {
      content:''; position:absolute; top:-200px; right:-200px;
      width:600px; height:600px; border-radius:50%;
      background:radial-gradient(circle, rgba(95,46,234,0.07) 0%, transparent 70%);
      pointer-events:none;
    }

    .hero-eyebrow {
      font-size:11px; font-weight:500; letter-spacing:0.14em;
      text-transform:uppercase; color:var(--brand);
      margin-bottom:28px; opacity:0;
    }
    .hero-headline {
      font-family:var(--font-display);
      font-size:clamp(52px, 7.5vw, 108px);
      font-weight:600; line-height:1.1;
      letter-spacing:-0.03em; color:var(--text-primary);
      max-width:900px; margin-bottom:40px;
    }
    .hero-headline .word {
      display:inline-block; overflow:hidden;
      margin-right:0.18em;
      /* Extra space below so descenders (g, y, p) aren't clipped */
      padding-bottom:0.12em;
      margin-bottom:-0.12em;
      vertical-align:top;
    }
    .hero-headline .word-inner { display:inline-block; transform:translateY(110%); }

    .hero-sub-row {
      display:flex; align-items:flex-end;
      justify-content:space-between; gap:40px;
    }
    .hero-description {
      font-size:16px; line-height:1.7; color:var(--text-secondary);
      max-width:480px; opacity:0; transform:translateY(20px);
    }
    .hero-description strong { color:var(--text-primary); font-weight:500; }

    .hero-scroll-hint {
      display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0;
    }
    .hero-scroll-hint span {
      font-size:10px; font-weight:500; letter-spacing:0.14em;
      text-transform:uppercase; color:var(--text-secondary);
      writing-mode:vertical-rl;
    }
    .scroll-line {
      width:1px; height:60px; background:var(--border);
      position:relative; overflow:hidden;
    }
    .scroll-line::after {
      content:''; position:absolute; top:-100%; left:0;
      width:1px; height:100%; background:var(--brand);
      animation:scrollDrop 2s ease-in-out infinite;
    }
    @keyframes scrollDrop { 0% { top:-100%; } 100% { top:200%; } }

    /* ══════════════════════════════════════════════════
       MARQUEE
    ══════════════════════════════════════════════════ */
    .marquee-section {
      border-top:1px solid var(--border); border-bottom:1px solid var(--border);
      padding:16px 0; overflow:hidden; background:var(--surface-secondary);
    }
    .marquee-track {
      display:flex; white-space:nowrap;
      animation:marquee 28s linear infinite;
    }
    .marquee-item {
      display:inline-flex; align-items:center; gap:20px;
      padding:0 40px; font-size:12px; font-weight:500;
      letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary);
    }
    .marquee-dot { width:4px; height:4px; border-radius:50%; background:var(--brand); flex-shrink:0; }
    @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

    /* ══════════════════════════════════════════════════
       SECTIONS — shared
    ══════════════════════════════════════════════════ */
    .section { padding:120px 48px; border-top:1px solid var(--border); }
    .section-label {
      font-size:11px; font-weight:500; letter-spacing:0.14em;
      text-transform:uppercase; color:var(--brand); margin-bottom:20px;
    }
    .section-title {
      font-family:var(--font-display);
      font-size:clamp(32px,3.5vw,52px); font-weight:600;
      line-height:1.08; letter-spacing:-0.025em; color:var(--text-primary);
      margin-bottom:16px;
    }
    .section-title em { font-style:normal; color:var(--brand); }
    .section-sub {
      font-size:15px; line-height:1.7; color:var(--text-secondary);
      max-width:520px; margin-bottom:56px;
    }
    /* GSAP reveal utility */
    .reveal { opacity:0; transform:translateY(44px); }

    /* DS pillar initial state (driven by gsap.from) */
    .ds-pillar { opacity:0; transform:translateY(40px); }

    /* Philosophy item initial state */
    .philosophy-item { opacity:0; transform:translateY(36px); }

    /* Work card initial state */
    .work-card { opacity:0; transform:translateY(44px); }

    /* Expertise item initial state */
    .expertise-item { opacity:0; transform:translateY(36px); }

    /* Industry card initial state */
    .industry-card { opacity:0; transform:translateY(36px); }

    /* Stat block initial state */
    .stat-block { opacity:0; transform:translateY(40px); }

    /* ══════════════════════════════════════════════════
       WORK / CASE CARDS
    ══════════════════════════════════════════════════ */
    .section.work { background:var(--surface-secondary); }
    .work-header {
      display:flex; align-items:flex-end; justify-content:space-between;
      margin-bottom:64px; gap:32px;
    }
    .work-header-right {
      font-size:14px; color:var(--text-secondary);
      max-width:300px; line-height:1.6; flex-shrink:0;
    }
    .work-header-right a {
      color:var(--brand); font-weight:500;
      border-bottom:1px solid rgba(95,46,234,0.3); padding-bottom:1px;
      transition:border-color 0.2s;
    }
    .work-header-right a:hover { border-color:var(--brand); }

    .work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }

    .work-card {
      background:var(--surface-primary);
      padding:0;
      position:relative; overflow:hidden;
      cursor:pointer; text-decoration:none; color:inherit;
      opacity:0; transform:translateY(32px);
      transition:background 0.3s;
      display:flex; flex-direction:column;
    }
    .work-card:hover { background:var(--surface-secondary); }
    /* bottom brand bar on hover */
    .work-card::before {
      content:''; position:absolute; bottom:0; left:0; right:0;
      height:2px; background:var(--brand);
      transform:scaleX(0); transform-origin:left;
      transition:transform 0.4s ease;
    }
    .work-card:hover::before { transform:scaleX(1); }

    .work-card-thumb {
      width:100%; height:180px;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .work-card-body { padding:32px 32px 40px; display:flex; flex-direction:column; flex:1; }
    .work-card-tag {
      display:inline-block; font-size:10px; font-weight:500;
      letter-spacing:0.1em; text-transform:uppercase;
      color:var(--brand); background:rgba(95,46,234,0.07);
      padding:4px 10px; border-radius:20px; margin-bottom:16px;
      align-self:flex-start;
    }
    .work-card-title {
      font-family:var(--font-display); font-size:22px; font-weight:600;
      letter-spacing:-0.02em; line-height:1.2;
      color:var(--text-primary); margin-bottom:12px;
    }
    .work-card-role { font-size:14px; line-height:1.65; color:var(--text-secondary); flex:1; margin-bottom:28px; }
    .work-card-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:0; }
    .work-card-pill {
      font-size:11px; color:var(--text-secondary);
      border:1px solid var(--border); padding:3px 10px; border-radius:20px;
    }
    .work-card-arrow {
      position:absolute; bottom:32px; right:32px;
      width:32px; height:32px; border-radius:50%;
      border:1px solid var(--border);
      display:flex; align-items:center; justify-content:center;
      font-size:14px; color:var(--text-secondary);
      transition:all 0.3s;
    }
    .work-card:hover .work-card-arrow {
      background:var(--brand); border-color:var(--brand); color:#fff;
      transform:translate(4px,-4px);
    }

    /* Canvas CTA card — dark */
    .work-card.canvas-cta {
      background:var(--text-primary); justify-content:space-between;
    }
    .work-card.canvas-cta:hover { background:#1a1a1b; }
    .work-card.canvas-cta .work-card-title { color:#fff; }
    .work-card.canvas-cta .work-card-role { color:rgba(255,255,255,0.5); }
    .work-card.canvas-cta .work-card-tag { background:rgba(255,220,0,0.12); color:var(--brand-yellow); }
    .work-card.canvas-cta .work-card-arrow { border-color:rgba(255,255,255,0.2); color:#fff; }
    .work-card.canvas-cta:hover .work-card-arrow {
      background:var(--brand-yellow); border-color:var(--brand-yellow); color:var(--text-primary);
    }
    .work-card.canvas-cta::before { background:var(--brand-yellow); }

    /* ══════════════════════════════════════════════════
       DESIGN SYSTEMS SECTION
    ══════════════════════════════════════════════════ */
    .ds-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
    .ds-left { position:sticky; top:calc(var(--nav-h) + 40px); }
    .ds-right { display:flex; flex-direction:column; gap:0; }
    .ds-pillar { padding:28px 0; border-top:1px solid var(--border); display:grid; grid-template-columns:40px 1fr; gap:20px; align-items:start; opacity:0; transform:translateY(24px); }
    .ds-pillar:last-child { border-bottom:1px solid var(--border); }
    .ds-pillar-num { font-size:11px; font-weight:500; color:var(--brand); letter-spacing:0.06em; padding-top:2px; }
    .ds-pillar-title { font-size:15px; font-weight:500; color:var(--text-primary); margin-bottom:6px; }
    .ds-pillar-text { font-size:13px; color:var(--text-secondary); line-height:1.6; }

    .token-diagram { margin-top:40px; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
    .token-row { display:flex; align-items:center; padding:14px 20px; border-bottom:1px solid #F0F2F5; gap:12px; }
    .token-row:last-child { border-bottom:none; }
    .token-tier { font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:3px 8px; border-radius:4px; min-width:90px; text-align:center; }
    .token-examples { display:flex; gap:6px; flex-wrap:wrap; }
    .token-chip { font-size:11px; font-family:'SFMono-Regular','Consolas',monospace; color:var(--text-secondary); background:var(--surface-secondary); border:1px solid var(--border); padding:2px 8px; border-radius:4px; }

    /* ══════════════════════════════════════════════════
       PHILOSOPHY SECTION (dark)
    ══════════════════════════════════════════════════ */
    .section.philosophy { background:var(--text-primary); border-top:none; }
    .section.philosophy .section-label { color:rgba(255,255,255,0.4); letter-spacing:0.14em; }
    .section.philosophy .section-label::before { background:var(--brand-yellow); }
    .section.philosophy .section-title { color:#fff; }
    .section.philosophy .section-title em { color:var(--brand-yellow); }
    .section.philosophy .section-sub { color:rgba(255,255,255,0.55); }

    .philosophy-list { list-style:none; margin-top:48px; display:flex; flex-direction:column; gap:2px; }
    .philosophy-item {
      display:flex; gap:20px; padding:22px 0;
      border-top:1px solid rgba(255,255,255,0.08);
      opacity:0; transform:translateY(24px);
    }
    .philosophy-item:last-child { border-bottom:1px solid rgba(255,255,255,0.08); }
    .philosophy-num { font-size:11px; font-weight:500; color:var(--brand-yellow); letter-spacing:0.06em; min-width:28px; padding-top:3px; }
    .philosophy-text h4 { font-size:15px; font-weight:500; color:#fff; margin-bottom:6px; }
    .philosophy-text p { font-size:14px; line-height:1.6; color:rgba(255,255,255,0.5); }

    /* ══════════════════════════════════════════════════
       EXPERTISE GRID
    ══════════════════════════════════════════════════ */
    .expertise-grid {
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:1px; background:var(--border);
      margin-top:64px; border:1px solid var(--border);
      border-radius:var(--radius-md); overflow:hidden;
    }
    .expertise-item {
      background:var(--surface-primary); padding:36px 28px;
      opacity:0; transform:translateY(20px);
    }
    .expertise-icon {
      width:36px; height:36px; border-radius:var(--radius-sm);
      background:rgba(95,46,234,0.08);
      display:flex; align-items:center; justify-content:center;
      margin-bottom:20px; font-size:16px;
    }
    .expertise-item h4 { font-size:15px; font-weight:500; color:var(--text-primary); margin-bottom:8px; letter-spacing:-0.01em; }
    .expertise-item p { font-size:13px; line-height:1.6; color:var(--text-secondary); }

    /* ══════════════════════════════════════════════════
       STATS — dark
    ══════════════════════════════════════════════════ */
    .stats-section {
      background:var(--text-primary); padding:80px 48px;
      border-top:none;
    }
    .stats-grid {
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:1px; background:rgba(255,255,255,0.08);
    }
    .stat-block {
      padding:48px 40px; background:var(--text-primary);
      opacity:0; transform:translateY(20px);
    }
    .stat-num {
      font-family:var(--font-display);
      font-size:clamp(48px,5vw,72px); font-weight:600;
      letter-spacing:-0.04em; line-height:1;
      color:#fff; margin-bottom:12px;
    }
    .stat-num span { color:var(--brand); }
    .stat-desc { font-size:13px; color:rgba(255,255,255,0.45); line-height:1.5; letter-spacing:0.01em; }

    /* ══════════════════════════════════════════════════
       INDUSTRIES
    ══════════════════════════════════════════════════ */
    .industry-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:56px; }
    .industry-card { background:var(--surface-primary); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px 24px; display:flex; flex-direction:column; gap:12px; opacity:0; transform:translateY(20px); }
    .industry-icon-wrap { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
    .industry-name { font-size:14px; font-weight:600; color:var(--text-primary); }
    .industry-projects { font-size:12px; color:var(--text-secondary); line-height:1.5; }
    .notable-heading { font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); margin-bottom:20px; }
    .notable-list { display:flex; flex-wrap:wrap; gap:10px; }
    .notable-chip { font-size:13px; font-weight:500; color:var(--text-secondary); background:var(--surface-primary); border:1px solid var(--border); padding:8px 16px; border-radius:100px; transition:border-color 0.15s,color 0.15s; }
    .notable-chip:hover { border-color:var(--brand); color:var(--brand); }

    /* ══════════════════════════════════════════════════
       FOOTER / CONTACT
    ══════════════════════════════════════════════════ */
    .footer-section { padding:80px 48px 48px; border-top:1px solid var(--border); }
    .footer-top {
      display:flex; justify-content:space-between; align-items:flex-start;
      margin-bottom:64px; gap:40px;
    }
    .footer-brand { flex-shrink:0; }
    .footer-logo { display:inline-flex; align-items:center; margin-bottom:12px; }
    .footer-logo svg { height:28px; width:auto; }
    .footer-tagline { font-size:13px; color:var(--text-secondary); line-height:1.6; max-width:240px; margin-top:8px; }
    .footer-links { display:flex; gap:64px; }
    .footer-col h5 { font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:16px; }
    .footer-col ul { list-style:none; }
    .footer-col li { margin-bottom:10px; }
    .footer-col a { font-size:14px; color:var(--text-secondary); transition:color 0.2s; }
    .footer-col a:hover { color:var(--text-primary); }
    .footer-bottom {
      display:flex; justify-content:space-between; align-items:center;
      padding-top:32px; border-top:1px solid var(--border);
    }
    .footer-bottom p { font-size:12px; color:var(--text-secondary); }
    .availability {
      display:flex; align-items:center; gap:8px;
      font-size:12px; color:var(--text-secondary);
    }
    .availability-dot {
      width:6px; height:6px; border-radius:50%;
      background:#22C55E; box-shadow:0 0 0 2px rgba(34,197,94,0.2);
      animation:pulse-av 2s ease-in-out infinite;
    }
    @keyframes pulse-av {
      0%,100% { box-shadow:0 0 0 2px rgba(34,197,94,0.2); }
      50%      { box-shadow:0 0 0 6px rgba(34,197,94,0.05); }
    }

    /* ══════════════════════════════════════════════════
       BUTTONS
    ══════════════════════════════════════════════════ */
    .btn-primary { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#fff; background:var(--brand); padding:12px 24px; border-radius:var(--radius-sm); text-decoration:none; border:none; cursor:pointer; transition:opacity 0.2s,transform 0.1s; }
    .btn-primary:hover { opacity:0.88; transform:translateY(-1px); }
    .btn-secondary { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--text-primary); background:transparent; padding:12px 20px; border-radius:var(--radius-sm); border:1px solid var(--border); text-decoration:none; cursor:pointer; transition:border-color 0.15s,color 0.15s,transform 0.1s; }
    .btn-secondary:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-1px); }

    /* ══════════════════════════════════════════════════
       CASES PAGE NODE
    ══════════════════════════════════════════════════ */
    #cases-node {
      position:absolute; top:0; background:var(--surface-primary);
      box-shadow:0 0 0 1px var(--border), 0 8px 48px rgba(0,0,0,0.06);
      z-index:1; transition:border-radius 400ms ease; overflow:hidden;
    }
    .canvas-active #cases-node { border-radius:12px; overflow:visible; }
    #cases-scroll { width:100%; height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:none; scroll-behavior:smooth; }
    #cases-scroll::-webkit-scrollbar { display:none; }
    #cases-scroll { scrollbar-width:none; }
    .canvas-active #cases-scroll { overflow:visible; height:auto; }

    /* Cases hero */
    .cases-hero { padding:80px 48px 64px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; min-height:40vh; justify-content:flex-end; position:relative; overflow:hidden; }
    .cases-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:64px 64px; opacity:0.3; pointer-events:none; }
    .cases-back { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--text-tertiary); text-decoration:none; margin-bottom:40px; transition:color 0.15s; width:fit-content; cursor:pointer; background:none; border:none; padding:0; font-family:var(--font); }
    .cases-back:hover { color:var(--brand); }
    .cases-count { font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--brand); margin-bottom:16px; }
    .cases-headline { font-family:var(--font-display); font-size:clamp(36px,4.5vw,64px); font-weight:600; line-height:1.05; letter-spacing:-0.03em; color:var(--text-primary); }
    .cases-sub { font-size:16px; line-height:1.7; color:var(--text-secondary); max-width:520px; margin-top:20px; }

    /* Filter bar */
    .cases-filters { display:flex; align-items:center; gap:8px; padding:20px 48px; border-bottom:1px solid var(--border); background:var(--surface-primary); position:sticky; top:0; z-index:10; overflow-x:auto; }
    .cases-filters::-webkit-scrollbar { display:none; }
    .filter-btn { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--text-secondary); background:transparent; border:1px solid var(--border); padding:6px 14px; border-radius:100px; cursor:pointer; white-space:nowrap; transition:background 0.12s,border-color 0.12s,color 0.12s; font-family:var(--font); }
    .filter-btn:hover { border-color:var(--text-primary); color:var(--text-primary); }
    .filter-btn.active { background:var(--text-primary); border-color:var(--text-primary); color:#fff; }
    .filter-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .canvas-active .cases-filters { position:relative; top:auto; }

    /* Cases grid */
    .cases-grid { display:grid; grid-template-columns:1fr 1fr; }
    .case-card {
      display:flex; flex-direction:column;
      border-right:1px solid var(--border); border-bottom:1px solid var(--border);
      text-decoration:none; color:inherit; cursor:pointer;
      transition:background 0.15s; overflow:hidden;
      position:relative;
    }
    .case-card:nth-child(even) { border-right:none; }
    .case-card:hover { background:var(--surface-secondary); }
    .case-card::before {
      content:''; position:absolute; bottom:0; left:0; right:0;
      height:2px; background:var(--brand);
      transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
    }
    .case-card:hover::before { transform:scaleX(1); }
    .case-card:hover .case-card-arrow-icon { transform:translate(3px,-3px); background:var(--brand); color:#fff; border-color:var(--brand); }

    .case-card-cover { width:100%; aspect-ratio:16/7; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-bottom:1px solid var(--border); overflow:hidden; }
    .case-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
    .cases-grid.is-loading .case-card { opacity:0.4; }
    .case-card-body { padding:28px 32px 40px; display:flex; flex-direction:column; flex:1; }
    .case-card-meta { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
    .case-card-tag { display:inline-block; font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
    .case-card-year { font-size:11px; color:var(--text-tertiary); letter-spacing:0.04em; }
    .case-card-title { font-family:var(--font-display); font-size:clamp(20px,2.2vw,26px); font-weight:600; line-height:1.15; letter-spacing:-0.02em; color:var(--text-primary); margin-bottom:10px; }
    .case-card-role { font-size:13px; color:var(--text-secondary); line-height:1.6; flex:1; margin-bottom:28px; }
    .case-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:20px; border-top:1px solid var(--border); }
    .case-card-scope { display:flex; gap:6px; flex-wrap:wrap; }
    .scope-chip { font-size:11px; color:var(--text-secondary); background:var(--surface-secondary); border:1px solid var(--border); padding:2px 8px; border-radius:4px; }
    .case-card-arrow-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); color:var(--text-secondary); flex-shrink:0; transition:transform 0.2s,background 0.15s,border-color 0.15s; font-size:14px; }
    .case-card.featured { grid-column:1/-1; flex-direction:row; border-right:none; }
    .case-card.featured .case-card-cover { width:42%; aspect-ratio:auto; flex-shrink:0; border-bottom:none; border-right:1px solid var(--border); }
    .case-card.featured .case-card-body { padding:40px 48px; }
    .case-card.featured .case-card-title { font-size:clamp(24px,2.8vw,36px); }

    .cases-footer { padding:48px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:32px; background:var(--surface-secondary); }
    .cases-footer-text { font-size:13px; color:var(--text-secondary); line-height:1.6; max-width:360px; }
    .cases-footer-text strong { display:block; font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:4px; }

    /* ══════════════════════════════════════════════════
       CASE DETAIL PAGE NODE
       ─────────────────────────────────────────────────
       A single reusable template — content is populated
       at runtime via renderCaseDetail() based on the
       case's slug (/cases/{slug}).
    ══════════════════════════════════════════════════ */
    #detail-node {
      position:absolute; top:0; background:var(--surface-primary);
      box-shadow:0 0 0 1px var(--border), 0 8px 48px rgba(0,0,0,0.06);
      z-index:1; transition:border-radius 400ms ease; overflow:hidden;
    }
    .canvas-active #detail-node { border-radius:12px; overflow:visible; }
    #detail-scroll { width:100%; height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:none; scroll-behavior:smooth; }
    #detail-scroll::-webkit-scrollbar { display:none; }
    #detail-scroll { scrollbar-width:none; }
    .canvas-active #detail-scroll { overflow:visible; height:auto; }

    /* Hero */
    .detail-hero { padding:64px 48px 0; position:relative; overflow:hidden; }
    .detail-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:64px 64px; opacity:0.3; pointer-events:none; }
    .detail-meta-row { position:relative; display:flex; align-items:center; gap:10px; margin-bottom:20px; }
    .detail-headline { position:relative; font-family:var(--font-display); font-size:clamp(32px,4.5vw,60px); font-weight:600; line-height:1.06; letter-spacing:-0.03em; color:var(--text-primary); margin-bottom:18px; max-width:760px; }
    .detail-role { position:relative; font-size:16px; line-height:1.7; color:var(--text-secondary); max-width:640px; margin-bottom:28px; }
    .detail-scope-row { position:relative; margin-bottom:36px; }

    /* Cover */
    .detail-cover {
      width:100%; aspect-ratio:16/7; max-height:480px;
      display:flex; align-items:center; justify-content:center;
      border-top:1px solid var(--border); border-bottom:1px solid var(--border);
      overflow:hidden;
    }
    .detail-cover img { width:100%; height:100%; object-fit:cover; display:block; }
    .detail-cover svg { width:auto; height:60%; max-width:60%; }

    /* Content */
    .detail-content { max-width:720px; margin:0 auto; padding:64px 48px 24px; }
    .detail-empty { font-size:14px; color:var(--text-tertiary); text-align:center; padding:32px 0; }
    .detail-section { margin-bottom:48px; }
    .detail-section:last-child { margin-bottom:0; }
    .detail-section-title { font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.02em; color:var(--text-primary); margin-bottom:16px; }
    .detail-section-image { margin-bottom:20px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); }
    .detail-section-image img { width:100%; height:auto; display:block; }

    /* Prose — rendered Markdown */
    .prose { font-size:15px; line-height:1.75; color:var(--text-secondary); }
    .prose > *:first-child { margin-top:0; }
    .prose h1, .prose h2, .prose h3 { font-family:var(--font-display); color:var(--text-primary); font-weight:600; letter-spacing:-0.02em; line-height:1.25; margin:32px 0 14px; }
    .prose h1 { font-size:26px; }
    .prose h2 { font-size:22px; }
    .prose h3 { font-size:18px; }
    .prose p { margin:0 0 18px; }
    .prose ul, .prose ol { margin:0 0 18px; padding-left:22px; }
    .prose li { margin-bottom:6px; }
    .prose strong { color:var(--text-primary); font-weight:600; }
    .prose a { color:var(--brand); text-decoration:underline; text-decoration-color:rgba(95,46,234,0.3); }
    .prose a:hover { text-decoration-color:var(--brand); }
    .prose blockquote { margin:0 0 18px; padding-left:18px; border-left:2px solid var(--border); color:var(--text-tertiary); font-style:italic; }
    .prose img { width:100%; border-radius:var(--radius-md); margin:8px 0 18px; display:block; }
    .prose code { font-family:'SFMono-Regular',Consolas,monospace; font-size:0.9em; background:var(--surface-secondary); border:1px solid var(--border); border-radius:4px; padding:2px 5px; }
    .prose pre { background:var(--surface-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 16px; overflow-x:auto; margin:0 0 18px; }
    .prose pre code { border:none; padding:0; background:none; }
    .prose hr { border:none; border-top:1px solid var(--border); margin:32px 0; }

    /* ══════════════════════════════════════════════════
       CANVAS CASE NODES (floating on canvas)
    ══════════════════════════════════════════════════ */
    .case-node { position:absolute; width:300px; background:var(--surface-primary); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-node); overflow:visible; cursor:pointer; transition:box-shadow 0.2s,border-color 0.2s; }
    .case-node-inner { overflow:hidden; border-radius:var(--radius-md); }
    .case-node:hover { box-shadow:var(--shadow-hover); border-color:rgba(95,46,234,0.25); }
    .case-node-thumb { width:100%; height:160px; display:flex; align-items:center; justify-content:center; }
    .case-node-body { padding:20px 22px 22px; }
    .case-tag { display:inline-block; font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px; border-radius:20px; margin-bottom:10px; }
    .case-node-title { font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:5px; line-height:1.3; }
    .case-node-meta { font-size:12px; color:var(--text-secondary); line-height:1.4; }
    .case-node-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--brand); margin-top:14px; text-decoration:none; }
    #connections-svg { position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }

    /* ══════════════════════════════════════════════════
       PAGE TRANSITION
    ══════════════════════════════════════════════════ */
    #page-transition-overlay {
      position:fixed; inset:0; z-index:900;
      pointer-events:none; background:var(--surface-primary); opacity:0;
    }
    #page-transition-overlay.fade-in  { opacity:1; transition:opacity 200ms ease-in; pointer-events:all; }
    #page-transition-overlay.fade-out { opacity:0; transition:opacity 300ms ease-out; }

    /* ══════════════════════════════════════════════════
       CANVAS CHROME
    ══════════════════════════════════════════════════ */
    #canvas-guide {
      position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
      z-index:300; display:flex; align-items:center; gap:16px;
      background:rgba(11,11,12,0.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      color:#fff; font-size:12px; padding:12px 20px; border-radius:100px;
      pointer-events:none; opacity:0;
      transform:translateX(-50%) translateY(12px);
      transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.34,1.3,0.64,1);
      white-space:nowrap;
    }
    #canvas-guide.visible { opacity:1; transform:translateX(-50%) translateY(0); }
    .guide-sep { width:1px; height:14px; background:rgba(255,255,255,0.2); flex-shrink:0; }
    .guide-item { display:inline-flex; align-items:center; gap:6px; }
    .guide-key { display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22); border-radius:5px; padding:2px 7px; letter-spacing:0.04em; font-family:var(--font); }
    .guide-mouse { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22); border-radius:5px; padding:2px 7px; letter-spacing:0.04em; }

    #btn-exit-canvas { position:fixed; top:80px; right:24px; z-index:300; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:var(--text-secondary); background:var(--surface-primary); border:1px solid var(--border); padding:8px 16px; border-radius:100px; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,0.08); opacity:0; pointer-events:none; transition:opacity 0.35s ease,background 0.15s; }
    #btn-exit-canvas.visible { opacity:1; pointer-events:all; }
    #btn-exit-canvas:hover { background:var(--surface-secondary); }

    #btn-reset-elements { position:fixed; top:120px; right:24px; z-index:300; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:#993C1D; background:#FFF0E8; border:1px solid #FFCBB0; padding:8px 16px; border-radius:100px; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,0.08); opacity:0; pointer-events:none; transition:opacity 0.3s ease,background 0.15s; }
    #btn-reset-elements.visible { opacity:1; pointer-events:all; }
    #btn-reset-elements:hover { background:#FFE4D4; }

    #zoom-controls { position:fixed; bottom:28px; right:28px; z-index:300; display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--surface-primary); border:1px solid var(--border); border-radius:10px; padding:4px; box-shadow:0 2px 12px rgba(0,0,0,0.08); opacity:0; pointer-events:none; transition:opacity 0.35s ease; }
    #zoom-controls.visible { opacity:1; pointer-events:all; }
    .zoom-btn { width:32px; height:32px; border:none; background:transparent; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--text-secondary); cursor:pointer; transition:background 0.12s,color 0.12s; font-family:var(--font); }
    .zoom-btn:hover { background:var(--surface-secondary); color:var(--text-primary); }
    .zoom-btn:active { transform:scale(0.93); }
    .zoom-divider { width:20px; height:1px; background:var(--border); }
    #zoom-level { font-size:10px; font-weight:500; color:var(--text-tertiary); padding:3px 2px; text-align:center; min-width:32px; letter-spacing:0.04em; }

    #minimap { position:fixed; bottom:28px; right:92px; z-index:300; width:120px; height:72px; background:var(--surface-primary); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); opacity:0; pointer-events:none; transition:opacity 0.3s; }
    #minimap.visible { opacity:1; }
    #minimap-viewport { position:absolute; background:rgba(95,46,234,0.1); border:1px solid rgba(95,46,234,0.3); border-radius:3px; }

    /* ══════════════════════════════════════════════════
       FIGMA SELECTION SYSTEM
    ══════════════════════════════════════════════════ */
    .sel-overlay-root { position:absolute; pointer-events:none; z-index:50; }
    .sel-border { position:absolute; inset:0; outline:1.5px solid #1ABCFE; outline-offset:0; border-radius:inherit; pointer-events:none; }
    .sel-overlay-root.moving .sel-border { outline-style:dashed; }
    .sel-label { position:absolute; top:-22px; left:0; font-size:10px; font-weight:500; color:#fff; background:#1ABCFE; padding:2px 7px; border-radius:3px; white-space:nowrap; pointer-events:none; line-height:1.4; }
    .sel-handle { position:absolute; width:8px; height:8px; background:#fff; border:1.5px solid #1ABCFE; border-radius:1.5px; pointer-events:all; z-index:2; transform:translate(-50%,-50%); }
    .sel-handle[data-pos="nw"] { top:0;left:0;cursor:nw-resize; } .sel-handle[data-pos="ne"] { top:0;left:100%;cursor:ne-resize; } .sel-handle[data-pos="se"] { top:100%;left:100%;cursor:se-resize; } .sel-handle[data-pos="sw"] { top:100%;left:0;cursor:sw-resize; }
    .sel-handle[data-pos="n"] { top:0;left:50%;width:10px;height:6px;border-radius:2px;cursor:n-resize; } .sel-handle[data-pos="s"] { top:100%;left:50%;width:10px;height:6px;border-radius:2px;cursor:s-resize; } .sel-handle[data-pos="e"] { top:50%;left:100%;width:6px;height:10px;border-radius:2px;cursor:e-resize; } .sel-handle[data-pos="w"] { top:50%;left:0;width:6px;height:10px;border-radius:2px;cursor:w-resize; }
    .sel-rotate { position:absolute; width:20px; height:20px; pointer-events:all; cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 3 A7 7 0 1 1 3 10' fill='none' stroke='%231ABCFE' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpolygon points='10,0 13,5 7,5' fill='%231ABCFE'/%3E%3C/svg%3E") 10 10,crosshair; z-index:3; }
    .sel-rotate[data-corner="nw"] { top:-14px;left:-14px; } .sel-rotate[data-corner="ne"] { top:-14px;right:-14px;left:auto; } .sel-rotate[data-corner="se"] { bottom:-14px;right:-14px;top:auto;left:auto; } .sel-rotate[data-corner="sw"] { bottom:-14px;left:-14px;top:auto; }
    .sel-move-zone { position:absolute; inset:0; pointer-events:all; cursor:grab; z-index:1; }
    .sel-move-zone:active { cursor:grabbing; }

    /* Hover preview */
    #sel-hover { position:absolute; pointer-events:none; z-index:49; display:none; }
    #sel-hover .sel-hover-border { position:absolute; inset:0; outline:1px solid rgba(26,188,254,0.55); outline-offset:0; }
    #sel-hover .sel-hover-label { position:absolute; top:-20px; left:0; font-size:10px; font-weight:500; color:#fff; background:rgba(26,188,254,0.75); padding:2px 7px; border-radius:3px; white-space:nowrap; pointer-events:none; line-height:1.4; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }

    /* ══════════════════════════════════════════════════
       CANVAS MODE: DISABLE LINKS
    ══════════════════════════════════════════════════ */
    .canvas-active #landing-node a,
    .canvas-active #landing-node button:not(#btn-play-corner),
    .canvas-active #cases-node a,
    .canvas-active #cases-node button:not(#btn-play-corner-cases),
    .canvas-active #detail-node a,
    .canvas-active #detail-node button:not(#btn-play-corner-detail) { pointer-events:none; cursor:default !important; }
    .canvas-active #btn-play-corner, .canvas-active #btn-play-corner-cases, .canvas-active #btn-play-corner-detail { pointer-events:all; cursor:pointer !important; }

    /* ══════════════════════════════════════════════════
       MOBILE DRAWER
    ══════════════════════════════════════════════════ */
    #drawer-backdrop { position:fixed; inset:0; z-index:800; background:rgba(11,11,12,0.4); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity 0.28s ease; }
    #drawer-backdrop.open { opacity:1; pointer-events:all; }
    #mobile-drawer { position:fixed; top:0; right:0; bottom:0; width:min(320px,88vw); z-index:810; background:var(--surface-primary); box-shadow:-8px 0 40px rgba(0,0,0,0.12); display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.32s cubic-bezier(0.32,0.72,0,1); overflow:hidden; }
    #mobile-drawer.open { transform:translateX(0); }
    .drawer-header { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:64px; border-bottom:1px solid var(--border); flex-shrink:0; }
    .drawer-logo { display:inline-flex; align-items:center; text-decoration:none; }
    .drawer-logo svg { height:24px; width:auto; }
    .drawer-close { width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; border-radius:var(--radius-sm); color:var(--text-secondary); transition:background 0.12s,color 0.12s; }
    .drawer-close:hover { background:var(--surface-secondary); color:var(--text-primary); }
    .drawer-nav { flex:1; overflow-y:auto; padding:12px 0; }
    .drawer-nav-item { display:flex; align-items:center; padding:14px 24px; font-size:15px; font-weight:500; color:var(--text-secondary); text-decoration:none; transition:background 0.1s,color 0.1s; cursor:pointer; background:none; border:none; width:100%; text-align:left; font-family:var(--font); }
    .drawer-nav-item:hover { background:var(--surface-secondary); color:var(--text-primary); }
    .drawer-divider { height:1px; background:var(--border); margin:8px 24px; }
    .drawer-footer { padding:20px 24px; border-top:1px solid var(--border); flex-shrink:0; }
    .drawer-cta { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; font-size:14px; font-weight:500; color:#fff; background:var(--brand); border:none; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; transition:opacity 0.2s; font-family:var(--font); }
    .drawer-cta:hover { opacity:0.88; }

    /* ══════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════ */
    @media (max-width:1024px) {
      .nav { padding:0 24px; }
      .hero { padding:0 24px 64px; }
      .section { padding:80px 24px; }
      .stats-section { padding:64px 24px; }
      .footer-section { padding:64px 24px 40px; }
      .footer-top { flex-direction:column; }
      .footer-links { gap:40px; }
      .work-grid { grid-template-columns:1fr 1fr; }
      .ds-layout { grid-template-columns:1fr; gap:40px; }
      .ds-left { position:static; }
      .expertise-grid { grid-template-columns:1fr 1fr; }
      .stats-grid { grid-template-columns:1fr 1fr; }
      .industry-grid { grid-template-columns:repeat(2,1fr); }
      .case-card.featured { flex-direction:column; }
      .case-card.featured .case-card-cover { width:100%; aspect-ratio:16/7; border-right:none; border-bottom:1px solid var(--border); }
      .case-card.featured .case-card-body { padding:28px 32px; }
      .cases-hero, .cases-filters { padding-left:24px; padding-right:24px; }
    }
    @media (max-width:768px) {
      .nav { padding:0 20px; grid-template-columns:auto 1fr auto; }
      .nav-links { display:none; }
      .nav-right .nav-cta { display:none; }
      #btn-play-corner, #btn-play-corner-cases, #btn-play-corner-detail { padding:7px 10px; }
      #btn-play-corner .play-btn-label, #btn-play-corner-cases .play-btn-label, #btn-play-corner-detail .play-btn-label { display:none; }
      .nav-hamburger { display:flex; }
      .hero { padding:0 20px 64px; }
      .hero-headline { font-size:clamp(44px,10vw,80px); }
      .hero-sub-row { flex-direction:column; align-items:flex-start; }
      .section { padding:64px 20px; }
      .stats-section { padding:56px 20px; }
      .footer-section { padding:56px 20px 36px; }
      .work-grid { grid-template-columns:1fr; }
      .stats-grid { grid-template-columns:1fr 1fr; }
      .expertise-grid { grid-template-columns:1fr 1fr; }
      .industry-grid { grid-template-columns:1fr 1fr; }
      .cases-grid { grid-template-columns:1fr; }
      .case-card { border-right:none !important; }
      .cases-footer { padding:36px 20px; flex-direction:column; align-items:flex-start; }
      .footer-links { gap:32px; flex-wrap:wrap; }
    }
    @media (max-width:480px) {
      .hero { padding:0 16px 56px; }
      .section { padding:52px 16px; }
      .stats-section { padding:48px 16px; }
      .footer-section { padding:48px 16px 32px; }
      .stats-grid { grid-template-columns:1fr; }
      .expertise-grid { grid-template-columns:1fr; }
      .industry-grid { grid-template-columns:1fr; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
    }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }