/* ════════════════════════════════════════════════════════════
   GLOBAL.CSS — shared styles for sayanahamed.online
   Theme system (16 themes), reset, cursor, scroll effects,
   nav, theme toggle, footer, case-study template components,
   and the media skeleton/shimmer loader.
   Page-specific styles stay inline in each page's own <style>.
   ════════════════════════════════════════════════════════════ */

/* ══ ACCENT SYSTEM ══ */
:root{
  --a-h:20;--a-s:78%;--a-l:50%;
  --accent:   hsl(var(--a-h),var(--a-s),var(--a-l));
  --accent-d: hsl(var(--a-h),var(--a-s),calc(var(--a-l) - 9%));
  --accent-15:hsla(var(--a-h),var(--a-s),var(--a-l),.15);
  --accent-08:hsla(var(--a-h),var(--a-s),var(--a-l),.08);
  --accent-25:hsla(var(--a-h),var(--a-s),var(--a-l),.25);
}

/* ══ THEME 0: DARK — deep black + orange (default) ══ */
[data-theme="dark"]{
  --bg:      #0a0a0a;
  --bg2:     #111;
  --surface: #181818;
  --text:    #ede9e0;
  --mid:     rgba(237,233,224,.60);
  --dim:     rgba(237,233,224,.36);
  --faint:   rgba(237,233,224,.16);
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.13);
  --glass:   rgba(255,255,255,.04);
  --glass2:  rgba(255,255,255,.08);
  --shadow:  rgba(0,0,0,.65);
  --bg-rgb:  10,10,10;
  --gold:    #c8a96e;
  --panel:   #0e0e0e;
  --ptxt:    rgba(237,233,224,.80);
  --pacc:    var(--accent);
  --pdim:    rgba(237,233,224,.36);
  --pbdr:    rgba(255,255,255,.06);
  --glass-panel:  rgba(255,255,255,.04);
  --glass2-panel: rgba(255,255,255,.08);
}

/* ══ THEME 1: LIGHT — warm cream + forest green panels ══ */
[data-theme="light"]{
  --bg:      #f5f0e3;
  --bg2:     #ede8d8;
  --surface: #e6e0d0;
  --text:    #111111;
  --mid:     rgba(17,17,17,.68);
  --dim:     rgba(17,17,17,.48);
  --faint:   rgba(17,17,17,.22);
  --border:  rgba(29,30,20,.10);
  --border2: rgba(29,30,20,.20);
  --glass:   rgba(255,255,255,.50);
  --glass2:  rgba(255,255,255,.72);
  --shadow:  rgba(40,30,10,.16);
  --bg-rgb:  245,240,227;
  --gold:    #6b4e16;
  --panel:   #1d2d1a;
  --ptxt:    #e8f0e5;
  --pacc:    #e8960a;
  --pdim:    rgba(232,240,229,.72);
  --pbdr:    rgba(255,255,255,.10);
  --glass-panel:  rgba(255,255,255,.08);
  --glass2-panel: rgba(255,255,255,.14);
}

/* ══ THEME 2: MIDNIGHT — deep navy blue + electric cyan ══ */
[data-theme="midnight"]{
  --bg:      #060b14;
  --bg2:     #0c1525;
  --surface: #111e33;
  --text:    #d8eaf8;
  --mid:     rgba(216,234,248,.70);
  --dim:     rgba(216,234,248,.48);
  --faint:   rgba(216,234,248,.22);
  --border:  rgba(100,180,255,.09);
  --border2: rgba(100,180,255,.18);
  --glass:   rgba(100,180,255,.06);
  --glass2:  rgba(100,180,255,.12);
  --shadow:  rgba(0,0,0,.7);
  --bg-rgb:  6,11,20;
  --gold:    #7eb8d4;
  --panel:   #050a13;
  --ptxt:    #d8eaf8;
  --pacc:    var(--accent);
  --pdim:    rgba(216,234,248,.60);
  --pbdr:    rgba(100,180,255,.14);
}

/* ══ THEME 3: PAPER — aged paper + vivid purple ══ */
[data-theme="paper"]{
  --bg:      #ede5d8;
  --bg2:     #e2d9c8;
  --surface: #d4c9b0;
  --text:    #1a0832;
  --mid:     rgba(26,8,50,.72);
  --dim:     rgba(26,8,50,.52);
  --faint:   rgba(26,8,50,.24);
  --border:  rgba(26,8,50,.12);
  --border2: rgba(26,8,50,.22);
  --glass:   rgba(255,255,255,.52);
  --glass2:  rgba(255,255,255,.76);
  --shadow:  rgba(26,8,50,.22);
  --bg-rgb:  237,229,216;
  --gold:    #6d28d9;
  --panel:   #130620;
  --ptxt:    #f0eaff;
  --pacc:    #9333ea;
  --pdim:    rgba(240,234,255,.72);
  --pbdr:    rgba(147,51,234,.22);
  --glass-panel:  rgba(255,255,255,.07);
  --glass2-panel: rgba(255,255,255,.13);
}

/* ══ THEME 4: FOREST — deep charcoal + sage green ══ */
[data-theme="forest"]{
  --bg:      #0e1410;
  --bg2:     #141d16;
  --surface: #1a2b1c;
  --text:    #d4e8d0;
  --mid:     rgba(212,232,208,.70);
  --dim:     rgba(212,232,208,.48);
  --faint:   rgba(212,232,208,.22);
  --border:  rgba(100,200,100,.09);
  --border2: rgba(100,200,100,.18);
  --glass:   rgba(100,200,100,.06);
  --glass2:  rgba(100,200,100,.12);
  --shadow:  rgba(0,0,0,.65);
  --bg-rgb:  14,20,16;
  --gold:    #86c888;
  --panel:   #0e1a10;
  --ptxt:    #d4e8d0;
  --pacc:    var(--accent);
  --pdim:    rgba(212,232,208,.55);
  --pbdr:    rgba(100,200,100,.14);
}

/* ══ THEME 5: CHALK — clean white + graphite black ══ */
[data-theme="chalk"]{
  --bg:      #ffffff;
  --bg2:     #f4f4f4;
  --surface: #e8e8e8;
  --text:    #0d0d0d;
  --mid:     rgba(13,13,13,.72);
  --dim:     rgba(13,13,13,.50);
  --faint:   rgba(13,13,13,.22);
  --border:  rgba(0,0,0,.09);
  --border2: rgba(0,0,0,.16);
  --glass:   rgba(0,0,0,.04);
  --glass2:  rgba(0,0,0,.08);
  --shadow:  rgba(0,0,0,.14);
  --bg-rgb:  255,255,255;
  --gold:    #444;
  --panel:   #111111;
  --ptxt:    #e8e8e8;
  --pacc:    var(--accent);
  --pdim:    rgba(232,232,232,.70);
  --pbdr:    rgba(255,255,255,.12);
}

/* ══ THEME 6: DUSK — warm burgundy/wine dark ══ */
[data-theme="dusk"]{
  --bg:      #100810;
  --bg2:     #18101a;
  --surface: #22162a;
  --text:    #f0dce8;
  --mid:     rgba(240,220,232,.70);
  --dim:     rgba(240,220,232,.48);
  --faint:   rgba(240,220,232,.22);
  --border:  rgba(200,100,180,.09);
  --border2: rgba(200,100,180,.18);
  --glass:   rgba(200,100,180,.06);
  --glass2:  rgba(200,100,180,.12);
  --shadow:  rgba(0,0,0,.68);
  --bg-rgb:  16,8,16;
  --gold:    #d4a0c0;
  --panel:   #0c060c;
  --ptxt:    #f0dce8;
  --pacc:    var(--accent);
  --pdim:    rgba(240,220,232,.60);
  --pbdr:    rgba(200,100,180,.14);
}

/* ══ THEME 7: SAND — warm sand + terracotta ══ */
[data-theme="sand"]{
  --bg:      #f7f0e6;
  --bg2:     #ede4d3;
  --surface: #e0d5c0;
  --text:    #2d1a0e;
  --mid:     rgba(45,26,14,.65);
  --dim:     rgba(45,26,14,.45);
  --faint:   rgba(45,26,14,.20);
  --border:  rgba(45,26,14,.10);
  --border2: rgba(45,26,14,.18);
  --glass:   rgba(255,255,255,.55);
  --glass2:  rgba(255,255,255,.75);
  --shadow:  rgba(45,26,14,.18);
  --bg-rgb:  247,240,230;
  --gold:    #c0622a;
  --panel:   #2d1a0e;
  --ptxt:    #f5e8d8;
  --pacc:    #e8520a;
  --pdim:    rgba(245,232,216,.72);
  --pbdr:    rgba(232,82,10,.18);
  --glass-panel:  rgba(255,255,255,.07);
  --glass2-panel: rgba(255,255,255,.13);
}

/* ══ THEME 8: TERRACOTTA — warm clay + navy (inspired by Kelly Riva poster) ══ */
[data-theme="terracotta"]{
  --bg:      #f0e8e0;
  --bg2:     #e8ddd4;
  --surface: #d8cfc4;
  --text:    #1c2b4a;
  --mid:     rgba(28,43,74,.68);
  --dim:     rgba(28,43,74,.48);
  --faint:   rgba(28,43,74,.22);
  --border:  rgba(28,43,74,.10);
  --border2: rgba(28,43,74,.18);
  --glass:   rgba(255,255,255,.52);
  --glass2:  rgba(255,255,255,.74);
  --shadow:  rgba(28,43,74,.18);
  --bg-rgb:  240,232,224;
  --gold:    #c45c38;
  --panel:   #1c2b4a;
  --ptxt:    #f0e8e0;
  --pacc:    #e8722a;
  --pdim:    rgba(240,232,224,.72);
  --pbdr:    rgba(232,114,42,.18);
  --glass-panel:  rgba(255,255,255,.08);
  --glass2-panel: rgba(255,255,255,.14);
}

/* ══ THEME 9: GRID — warm off-white + olive (Elaine desktop portfolio) ══ */
[data-theme="grid"]{
  --bg:      #f2edd8;
  --bg2:     #e8e2c8;
  --surface: #ddd7be;
  --text:    #2a2a1e;
  --mid:     rgba(42,42,30,.68);
  --dim:     rgba(42,42,30,.48);
  --faint:   rgba(42,42,30,.22);
  --border:  rgba(42,42,30,.10);
  --border2: rgba(42,42,30,.18);
  --glass:   rgba(255,255,255,.48);
  --glass2:  rgba(255,255,255,.70);
  --shadow:  rgba(42,42,30,.16);
  --bg-rgb:  242,237,216;
  --gold:    #6b7c3a;
  --panel:   #4a5228;
  --ptxt:    #f2edd8;
  --pacc:    #8a9e42;
  --pdim:    rgba(242,237,216,.72);
  --pbdr:    rgba(138,158,66,.18);
  --glass-panel:  rgba(255,255,255,.09);
  --glass2-panel: rgba(255,255,255,.16);
}

/* ══ THEME 10: NOIR — near-black + electric lime (Shaurya poster) ══ */
[data-theme="noir"]{
  --bg:      #0d0d0d;
  --bg2:     #141414;
  --surface: #1c1c1c;
  --text:    #f0f0f0;
  --mid:     rgba(240,240,240,.62);
  --dim:     rgba(240,240,240,.38);
  --faint:   rgba(240,240,240,.18);
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.13);
  --glass:   rgba(255,255,255,.04);
  --glass2:  rgba(255,255,255,.08);
  --shadow:  rgba(0,0,0,.70);
  --bg-rgb:  13,13,13;
  --gold:    #b8e832;
  --panel:   #080808;
  --ptxt:    #f0f0f0;
  --pacc:    #b8e832;
  --pdim:    rgba(240,240,240,.55);
  --pbdr:    rgba(184,232,50,.14);
  --glass-panel:  rgba(255,255,255,.04);
  --glass2-panel: rgba(255,255,255,.08);
}

/* ══ THEME 11: NAVY — deep navy + pink (editorial clean) ══ */
[data-theme="navy"]{
  --bg:      #0d1b2e;
  --bg2:     #142338;
  --surface: #1c2e48;
  --text:    #e8eef8;
  --mid:     rgba(232,238,248,.62);
  --dim:     rgba(232,238,248,.40);
  --faint:   rgba(232,238,248,.18);
  --border:  rgba(232,238,248,.08);
  --border2: rgba(232,238,248,.14);
  --glass:   rgba(232,238,248,.05);
  --glass2:  rgba(232,238,248,.10);
  --shadow:  rgba(0,0,0,.65);
  --bg-rgb:  13,27,46;
  --gold:    #f472b6;
  --panel:   #080f1a;
  --ptxt:    #fce7f3;
  --pacc:    #ec4899;
  --pdim:    rgba(252,231,243,.60);
  --pbdr:    rgba(236,72,153,.16);
  --glass-panel:  rgba(255,255,255,.05);
  --glass2-panel: rgba(255,255,255,.09);
}

/* ══ THEME 12: SKETCH — pure white + black ink (Rushabh portfolio) ══ */
[data-theme="sketch"]{
  --bg:      #fafafa;
  --bg2:     #f0f0f0;
  --surface: #e4e4e4;
  --text:    #0a0a0a;
  --mid:     rgba(10,10,10,.68);
  --dim:     rgba(10,10,10,.45);
  --faint:   rgba(10,10,10,.20);
  --border:  rgba(0,0,0,.08);
  --border2: rgba(0,0,0,.14);
  --glass:   rgba(0,0,0,.03);
  --glass2:  rgba(0,0,0,.06);
  --shadow:  rgba(0,0,0,.10);
  --bg-rgb:  250,250,250;
  --gold:    #0a0a0a;
  --panel:   #0a0a0a;
  --ptxt:    #fafafa;
  --pacc:    #fafafa;
  --pdim:    rgba(250,250,250,.72);
  --pbdr:    rgba(255,255,255,.10);
  --glass-panel:  rgba(255,255,255,.05);
  --glass2-panel: rgba(255,255,255,.10);
}

/* ══ THEME 13: EMBER — deep charcoal + burnt orange (task list card) ══ */
[data-theme="ember"]{
  --bg:      #f7ede4;
  --bg2:     #eee0d3;
  --surface: #e2d0bf;
  --text:    #1a0f0a;
  --mid:     rgba(26,15,10,.68);
  --dim:     rgba(26,15,10,.48);
  --faint:   rgba(26,15,10,.22);
  --border:  rgba(26,15,10,.10);
  --border2: rgba(26,15,10,.18);
  --glass:   rgba(255,255,255,.50);
  --glass2:  rgba(255,255,255,.72);
  --shadow:  rgba(26,15,10,.18);
  --bg-rgb:  247,237,228;
  --gold:    #c4622a;
  --panel:   #1a0f0a;
  --ptxt:    #f7ede4;
  --pacc:    #d4602a;
  --pdim:    rgba(247,237,228,.72);
  --pbdr:    rgba(212,96,42,.18);
  --glass-panel:  rgba(255,255,255,.07);
  --glass2-panel: rgba(255,255,255,.13);
}
/* ══ THEME 14: APPLE — light glass surfaces, ultra-refined white/grey ══ */
[data-theme="studio"]{
  --bg:      #f5f5f7;
  --bg2:     #ececee;
  --surface: #dddde0;
  --text:    #1d1d1f;
  --mid:     rgba(29,29,31,.65);
  --dim:     rgba(29,29,31,.42);
  --faint:   rgba(29,29,31,.18);
  --border:  rgba(0,0,0,.06);
  --border2: rgba(0,0,0,.11);
  --glass:   rgba(255,255,255,.72);
  --glass2:  rgba(255,255,255,.88);
  --shadow:  rgba(0,0,0,.08);
  --bg-rgb:  245,245,247;
  --gold:    #0071e3;
  --panel:   #1d1d1f;
  --ptxt:    #f5f5f7;
  --pacc:    #0071e3;
  --pdim:    rgba(245,245,247,.75);
  --pbdr:    rgba(0,113,227,.15);
  --glass-panel:  rgba(255,255,255,.08);
  --glass2-panel: rgba(255,255,255,.14);
}

/* ══ THEME 15: THINH — warm cream + bold red (Vietnamese poster energy) ══ */
[data-theme="tokyo"]{
  --bg:      #f5ede0;
  --bg2:     #ece3d4;
  --surface: #dfd6c4;
  --text:    #0a0505;
  --mid:     rgba(10,5,5,.68);
  --dim:     rgba(10,5,5,.48);
  --faint:   rgba(10,5,5,.22);
  --border:  rgba(10,5,5,.10);
  --border2: rgba(10,5,5,.18);
  --glass:   rgba(255,255,255,.52);
  --glass2:  rgba(255,255,255,.74);
  --shadow:  rgba(10,5,5,.18);
  --bg-rgb:  245,237,224;
  --gold:    #b81c1c;
  --panel:   #8a1414;
  --ptxt:    #f5ede0;
  --pacc:    #d42020;
  --pdim:    rgba(245,237,224,.72);
  --pbdr:    rgba(212,32,32,.20);
  --glass-panel:  rgba(255,255,255,.09);
  --glass2-panel: rgba(255,255,255,.16);
}
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9994;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(26,8,50,.03) 2px,
      rgba(26,8,50,.03) 3px
    ),
    repeating-linear-gradient(
      88deg,
      transparent,
      transparent 5px,
      rgba(26,8,50,.012) 5px,
      rgba(26,8,50,.012) 6px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.25' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)' opacity='.7'/%3E%3C/svg%3E");
  background-repeat:repeat,repeat,repeat;
  background-size:auto,auto,320px 320px;
  opacity:.55;
  mix-blend-mode:multiply;
}
[data-theme="paper"] body::after{
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 0% 0%,   rgba(26,8,50,.10) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%,  rgba(26,8,50,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%,rgba(26,8,50,.12) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%,  rgba(26,8,50,.08) 0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 40%, rgba(26,8,50,.07) 100%);
}

/* ══ SAND TEXTURE — visible gritty warm grain ══ */
[data-theme="sand"] body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9994;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.7 0.5' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='14' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23h)' opacity='1'/%3E%3C/svg%3E");
  background-repeat:repeat,repeat;
  background-size:200px 200px, 120px 120px;
  opacity:.11;
  mix-blend-mode:multiply;
}
[data-theme="sand"] body::after{
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, transparent 35%, rgba(45,26,14,.09) 100%);
}

/* ══ CHALK TEXTURE — subtle light paper feel ══ */
[data-theme="chalk"] body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9994;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350' height='350'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.5' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='350' height='350' filter='url(%23c)' opacity='.6'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:280px 280px;
  opacity:.06;
  mix-blend-mode:multiply;
}

/* ══ FOREST TEXTURE — organic leaf vein pattern ══ */
/* ══ FOREST — deep green ambient glows, like bioluminescence ══ */
[data-theme="forest"] body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9993;
  background:
    radial-gradient(ellipse 60% 40% at 15% 25%, rgba(34,120,34,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 55% at 85% 70%, rgba(20,100,40,.14) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 50% 5%,  rgba(60,160,60,.10) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 5% 80%,  rgba(30,110,50,.12) 0%, transparent 60%);
}
[data-theme="forest"] body::after{
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}

/* ══ TERRACOTTA TEXTURE — warm grain only ══ */
[data-theme="terracotta"] body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9994;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75 0.55' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23t)' opacity='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:200px 200px;
  opacity:.07;
  mix-blend-mode:multiply;
}

/* ══ EMBER — fire glow orbs in background ══ */
[data-theme="ember"] body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9993;
  background:
    radial-gradient(ellipse 55% 38% at 80% 90%, rgba(220,80,20,.16) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 10% 85%, rgba(200,60,10,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 30% at 50% 100%,rgba(240,100,30,.10) 0%, transparent 55%),
    radial-gradient(ellipse 30% 40% at 90% 40%, rgba(180,50,10,.08) 0%, transparent 50%);
}
[data-theme="ember"] body::after{
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}

/* ══ APPLE — frosted glass shimmer ══ */
[data-theme="studio"] body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9993;
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(0,113,227,.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 80%, rgba(52,199,89,.04) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 60% 30%, rgba(255,159,10,.03) 0%, transparent 50%);
}

/* ══ THINH — warm cream grain ══ */
[data-theme="tokyo"] body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9994;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='th'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.5' numOctaves='3' seed='22' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23th)' opacity='1'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:220px 220px;
  opacity:.06;
  mix-blend-mode:multiply;
}
/* ══ GRID TEXTURE — crosshatch graph paper ══ */
[data-theme="grid"] body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9994;
  background-image:
    linear-gradient(rgba(42,42,30,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,42,30,.08) 1px, transparent 1px),
    linear-gradient(rgba(42,42,30,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,42,30,.04) 1px, transparent 1px);
  background-size:40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

/* ══ SKETCH TEXTURE — fine paper grain ══ */
[data-theme="sketch"] body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9994;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.7' numOctaves='4' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)' opacity='.5'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:220px 220px;opacity:.05;mix-blend-mode:multiply;
}
[data-theme="sketch"] body::after{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}



/* ══ RESET ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:68px;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}
body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow-x:hidden;cursor:none;transition:background .5s,color .5s}
a,button,[role="button"]{cursor:none!important}
@media(hover:none),(max-width:640px){body,a,button,[role="button"]{cursor:auto!important}}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E")}
::selection{background:var(--accent);color:#fff}

/* ══ CURSOR ══ */
#cur{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:width .15s,height .15s,background .4s,opacity .2s}
#cur-ring{position:fixed;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--accent-25);pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width .3s,height .3s,opacity .3s}
body.cur-h #cur{width:16px;height:16px;background:var(--text);mix-blend-mode:difference}
body.cur-h #cur-ring{width:16px;height:16px;border-color:transparent}
@media(hover:none),(max-width:640px){#cur,#cur-ring{display:none!important}}

/* ══ SCROLL REVEAL ══ */
.rv,.rv-l,.rv-r{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv{transform:translateY(38px)}
.rv-l{transform:translateX(-38px)}
.rv-r{transform:translateX(38px)}
.rv.in,.rv-l.in,.rv-r.in{opacity:1;transform:none}

/* ══ SCROLL PROGRESS ══ */
#spb{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--accent);z-index:9998;pointer-events:none;transition:background .5s}

/* ══ SCROLL TOP ══ */
#scroll-top{position:fixed;bottom:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px);width:44px;height:44px;background:var(--surface);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:none;z-index:150;opacity:0;pointer-events:none;transition:opacity .3s,background .2s,border-color .2s,transform .2s;color:var(--mid)}
#scroll-top.visible{opacity:1;pointer-events:auto}
#scroll-top:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-3px)}
@media(hover:none),(max-width:640px){#scroll-top{cursor:pointer}}

/* ══ NAV ══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,2vh,18px) clamp(20px,5.5vw,64px);background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--border);transition:background .5s,border-color .5s}
.nav-logo{font-family:'Bebas Neue',sans-serif;font-size:clamp(13px,1.6vw,17px);letter-spacing:.2em;color:var(--text);text-decoration:none;transition:opacity .2s}
.nav-logo:hover{opacity:.7}
.nav-back{display:flex;align-items:center;gap:8px;font-size:clamp(9px,1vw,11px);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);text-decoration:none;transition:color .2s}
.nav-back:hover{color:var(--text)}
.nav-back svg{transition:transform .25s}
.nav-back:hover svg{transform:translateX(-3px)}
.nav-links{display:flex;gap:clamp(18px,3vw,40px);list-style:none}
.nav-links a{font-size:clamp(9px,1vw,11px);font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);text-decoration:none;position:relative;transition:color .2s}
.nav-links a::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;min-width:44px;height:44px}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--accent);transition:width .3s}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* ══ THEME TOGGLE ══ */
#theme-toggle-btn{position:fixed;left:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:600;width:44px;height:44px;border-radius:50%;background:var(--glass2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--border2);box-shadow:0 4px 20px var(--shadow);display:flex;align-items:center;justify-content:center;cursor:none;transition:background .3s,border-color .3s,transform .2s}
@media(hover:none),(max-width:640px){#theme-toggle-btn{cursor:pointer}}
#theme-toggle-btn:hover{transform:scale(1.1)}
#theme-toggle-btn svg{width:17px;height:17px;color:var(--text);transition:color .5s}
#theme-bar{position:fixed;left:clamp(16px,3vw,28px);bottom:74px;z-index:599;display:flex;flex-direction:column;align-items:center;background:var(--glass2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border2);border-radius:30px;padding:14px 0;box-shadow:0 8px 40px var(--shadow);width:44px;opacity:0;pointer-events:none;transform:translateY(10px) scale(.92);transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),background .5s,border-color .5s;user-select:none;touch-action:none}
#theme-bar.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
#tb-track{width:8px;height:240px;border-radius:8px;position:relative;cursor:pointer;background:linear-gradient(180deg,#f5f0e3 0%,#f5f5f7 6%,#fafafa 12%,#f5f5f5 19%,#f2edd8 25%,#f5ede0 31%,#f7f0e6 37%,#f0e8e0 43%,#f7ede4 50%,#ede5d8 56%,#0e1410 62%,#060b14 68%,#0d1b2e 74%,#100810 81%,#0d0d0d 88%,#0a0a0a 100%);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.tb-stop{position:absolute;left:50%;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.9);border:1.5px solid rgba(0,0,0,.25);box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}
.tb-stop.active-stop{width:13px;height:13px;background:#fff;box-shadow:0 0 0 3px var(--accent)}
#tb-thumb{position:absolute;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.5);cursor:grab;z-index:2;transition:border-color .3s}
#tb-thumb:active{cursor:grabbing}
#tb-label{position:absolute;left:calc(100% + 12px);background:var(--surface);border:1px solid var(--border2);border-radius:6px;padding:4px 10px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;top:50%;transform:translateY(-50%)}
#theme-bar.open #tb-label{opacity:1}

/* ══ FOOTER ══ */
footer{padding:clamp(20px,3.5vh,28px) clamp(24px,6vw,80px);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:var(--bg);transition:background .5s,border-color .5s}
.f-logo{font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:.16em;color:var(--mid);transition:color .5s}
.f-copy{font-size:9.5px;color:var(--mid);letter-spacing:.07em;transition:color .5s}
.f-links{display:flex;gap:16px}
.f-links a{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--mid);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--mid)}

/* ══ CASE STUDY TEMPLATE — HERO ══ */
.cs-hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;padding:clamp(100px,16vh,160px) clamp(24px,6vw,80px) clamp(56px,9vh,88px);overflow:hidden}
.cs-hero-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center 35%;opacity:.42;filter:grayscale(15%);transition:filter 1s}
[data-theme="light"] .cs-hero-img,[data-theme="chalk"] .cs-hero-img,[data-theme="paper"] .cs-hero-img,[data-theme="sand"] .cs-hero-img,[data-theme="studio"] .cs-hero-img,[data-theme="sketch"] .cs-hero-img,[data-theme="grid"] .cs-hero-img,[data-theme="tokyo"] .cs-hero-img,[data-theme="terracotta"] .cs-hero-img,[data-theme="ember"] .cs-hero-img{opacity:.28;filter:grayscale(20%) brightness(.9)}
.cs-hero-gradient{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,var(--bg) 0%,rgba(var(--bg-rgb,10,10,10),.6) 55%,rgba(var(--bg-rgb,10,10,10),.15) 100%)}
.cs-hero-ghost{position:absolute;right:-1%;bottom:-5%;z-index:1;font-family:'Bebas Neue',sans-serif;font-size:clamp(120px,24vw,340px);color:rgba(255,255,255,.022);letter-spacing:-.02em;line-height:1;pointer-events:none;user-select:none;white-space:nowrap}
[data-theme="light"] .cs-hero-ghost,[data-theme="chalk"] .cs-hero-ghost,[data-theme="paper"] .cs-hero-ghost,[data-theme="sand"] .cs-hero-ghost,[data-theme="studio"] .cs-hero-ghost,[data-theme="sketch"] .cs-hero-ghost,[data-theme="grid"] .cs-hero-ghost,[data-theme="tokyo"] .cs-hero-ghost,[data-theme="terracotta"] .cs-hero-ghost,[data-theme="ember"] .cs-hero-ghost{color:rgba(0,0,0,.035)}
.cs-hero-orb{position:absolute;width:clamp(300px,50vw,600px);height:clamp(300px,50vw,600px);border-radius:50%;background:radial-gradient(circle,var(--accent-08) 0%,transparent 70%);top:10%;left:20%;animation:orb 8s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes orb{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-40px)}}
.cs-hero-content{position:relative;z-index:3;max-width:800px}
.cs-eyebrow{display:flex;align-items:center;gap:clamp(10px,2vw,18px);margin-bottom:clamp(14px,2.5vh,24px);flex-wrap:wrap}
.cs-tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--accent-25);background:var(--accent-08);color:var(--accent);font-size:clamp(8px,.9vw,10px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:5px 14px;border-radius:30px;transition:border-color .5s,background .5s,color .5s}
.cs-year{font-size:clamp(8px,.9vw,10px);letter-spacing:.25em;text-transform:uppercase;color:var(--dim);font-family:'Cormorant Garamond',serif;font-style:italic;transition:color .5s}
.cs-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,13vw,172px);line-height:.86;letter-spacing:.02em;color:var(--text);margin-bottom:clamp(16px,2.8vh,28px);transition:color .5s}
.cs-title .t-stroke{-webkit-text-stroke:1.5px var(--text);color:transparent;transition:-webkit-text-stroke .5s}
.cs-subtitle{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2vw,22px);font-weight:300;color:var(--mid);letter-spacing:.04em;font-style:italic;max-width:520px;line-height:1.55;transition:color .5s}

/* ══ META STRIP ══ */
.cs-meta{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);padding:clamp(20px,3.5vh,32px) clamp(24px,6vw,80px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,4vw,48px);transition:background .5s,border-color .5s}
.meta-lbl{font-size:clamp(8px,.85vw,9.5px);letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:8px;transition:color .5s}
.meta-val{font-size:clamp(11px,1.1vw,13px);font-weight:300;color:var(--mid);line-height:1.65;transition:color .5s}
@media(max-width:700px){.cs-meta{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.cs-meta{grid-template-columns:1fr}}

/* ══ MARQUEE ══ */
.cs-marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0;overflow:hidden;background:var(--panel);transition:background .5s,border-color .5s}
.cs-marquee:hover .cs-marquee-inner{animation-play-state:paused}
.cs-marquee-inner{display:flex;gap:clamp(28px,5vw,56px);white-space:nowrap;animation:mq 32s linear infinite;width:max-content}
.cs-mi{font-family:'Bebas Neue',sans-serif;font-size:clamp(11px,1.3vw,13px);letter-spacing:.26em;color:var(--pdim);display:flex;align-items:center;gap:clamp(14px,2vw,24px);transition:color .2s;cursor:default}
.cs-mi:hover{color:var(--pacc)}
.cs-mi::after{content:'✦';color:var(--pacc);font-size:7px;opacity:.75}
@keyframes mq{to{transform:translateX(-50%)}}

/* ══ BODY ══ */
.cs-body{padding:clamp(64px,10vh,120px) clamp(24px,6vw,80px);max-width:1160px;margin:0 auto}
.s-label{display:block;font-size:clamp(8px,.85vw,10px);letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:clamp(12px,2vh,20px);transition:color .5s}
.two-col{display:grid;grid-template-columns:clamp(150px,20vw,240px) 1fr;gap:clamp(32px,7vw,110px);align-items:start}
.two-col-sticky{position:sticky;top:clamp(80px,12vh,110px)}
.two-col-heading{font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,5.5vw,68px);line-height:.9;letter-spacing:.03em;color:var(--text);transition:color .5s}
.body-text{font-size:clamp(13px,1.3vw,15px);font-weight:300;line-height:1.92;color:var(--mid);transition:color .5s}
.body-text+.body-text{margin-top:clamp(16px,2.5vh,24px)}
.body-text strong{color:var(--text);font-weight:500;transition:color .5s}
@media(max-width:780px){.two-col{grid-template-columns:1fr}.two-col-sticky{position:static}}
.div{border:none;border-top:1px solid var(--border);margin:clamp(48px,8vh,96px) clamp(24px,6vw,80px);transition:border-color .5s}

/* ══ WIPE BOX ══ */
.two-col-heading .wipe-wrap{display:inline-block;position:relative}
.two-col-heading .wipe-bg{position:absolute;inset:0 0 2px 0;background:var(--accent);transform:scaleX(0);transform-origin:left;border-radius:2px;transition:transform .55s cubic-bezier(.77,0,.18,1);z-index:0}
.two-col-heading .wipe-wrap.wiped .wipe-bg{transform:scaleX(1)}
.two-col-heading .wipe-text{position:relative;z-index:1;color:var(--accent);font-style:normal;display:block;transition:color .12s ease .28s}
.two-col-heading .wipe-wrap.wiped .wipe-text{color:#fff}

/* ══ IMAGES ══ */
.img-contained{padding:0 clamp(24px,6vw,80px);margin:clamp(28px,4.5vh,56px) 0}
.img-contained img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--border);transition:border-color .5s,transform .3s,box-shadow .3s;cursor:zoom-in!important}
.img-contained img:hover{transform:scale(1.005);box-shadow:0 20px 60px var(--shadow)}

.img-grid-2{padding:0 clamp(24px,6vw,80px);margin:clamp(28px,4.5vh,56px) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.8vw,20px)}
.img-grid-2 img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--border);transition:border-color .5s,transform .3s;cursor:zoom-in!important}
.img-grid-2 img:hover{transform:scale(1.01)}

.img-grid-3{padding:0 clamp(24px,6vw,80px);margin:clamp(28px,4.5vh,56px) 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.8vw,20px)}
.img-grid-3 img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--border);transition:border-color .5s,transform .3s;cursor:zoom-in!important}
.img-grid-3 img:hover{transform:scale(1.01)}

.img-grid-2-narrow{padding:0 clamp(24px,6vw,80px);margin:clamp(8px,1.5vh,16px) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.8vw,20px);max-width:calc(66.66% + clamp(48px,12vw,160px));margin-left:auto;margin-right:auto}
.img-grid-2-narrow img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--border);transition:border-color .5s,transform .3s;cursor:zoom-in!important}
.img-grid-2-narrow img:hover{transform:scale(1.01)}

.img-grid-2-portrait{padding:0 clamp(24px,6vw,80px);margin:clamp(28px,4.5vh,56px) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.8vw,20px);max-width:clamp(500px,60vw,820px);margin-left:auto;margin-right:auto}
.img-grid-2-portrait img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--border);transition:border-color .5s,transform .3s;cursor:zoom-in!important}
.img-grid-2-portrait img:hover{transform:scale(1.01)}

.mid-img-wrap{padding:0 clamp(24px,6vw,80px);margin:clamp(28px,4.5vh,56px) 0;display:flex;justify-content:center}
.mid-img-wrap img{max-width:clamp(340px,48vw,640px);width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--border);transition:border-color .5s,transform .3s,box-shadow .3s;cursor:zoom-in!important;box-shadow:0 16px 48px var(--shadow)}
.mid-img-wrap img:hover{transform:scale(1.01)}
.phone-img-wrap{padding:0 clamp(24px,6vw,80px);margin:clamp(28px,4.5vh,56px) 0}
.phone-img-wrap img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--border);transition:border-color .5s,transform .3s,box-shadow .3s;cursor:zoom-in!important;box-shadow:0 32px 80px var(--shadow)}
.phone-img-wrap img:hover{transform:scale(1.005);box-shadow:0 40px 100px var(--shadow)}

.a4-img-wrap{padding:0 clamp(24px,6vw,80px);margin:clamp(28px,4.5vh,56px) 0;display:flex;justify-content:center}
.a4-img-wrap img{max-width:clamp(280px,32vw,420px);width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--border);transition:border-color .5s,transform .3s,box-shadow .3s;cursor:zoom-in!important;box-shadow:0 20px 60px var(--shadow)}
.a4-img-wrap img:hover{transform:scale(1.01);box-shadow:0 28px 72px var(--shadow)}

.caption{padding:0 clamp(24px,6vw,80px);margin-top:clamp(8px,1.2vh,12px);font-size:clamp(9px,.85vw,10px);letter-spacing:.22em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px;transition:color .5s}
.caption::before{content:'';width:20px;height:1px;background:var(--border2);flex-shrink:0;transition:background .5s}

@media(max-width:640px){
  .img-grid-2,.img-grid-2-narrow,.img-grid-2-portrait{grid-template-columns:1fr;padding:0 20px}
  .img-grid-3{grid-template-columns:1fr;padding:0 20px}
  .img-grid-3 img:last-child{grid-column:auto;max-width:100%;margin:0}
  .img-contained,.caption,.phone-img-wrap,.mid-img-wrap,.a4-img-wrap{padding-left:20px;padding-right:20px}
  .img-grid-2-narrow{max-width:100%;margin-left:0;margin-right:0}
  .img-grid-2-portrait{max-width:100%;margin-left:0;margin-right:0}
}

/* ══ LINK CARDS ══ */
.link-cards{padding:0 clamp(24px,6vw,80px);margin:clamp(20px,3.5vh,36px) 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px)}
.link-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,2.8vh,26px) clamp(20px,3vw,32px);background:var(--surface);border:1px solid var(--border);border-radius:10px;text-decoration:none;transition:background .25s,border-color .3s,transform .2s;cursor:none!important}
.link-card:hover{background:var(--bg2);border-color:var(--accent-25);transform:translateY(-2px)}
.link-card-icon{width:36px;height:36px;border-radius:8px;background:var(--accent-08);border:1px solid var(--accent-25);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;transition:background .3s}
.link-card-body{flex:1;min-width:0}
.link-card-title{font-size:clamp(12px,1.2vw,14px);font-weight:500;color:var(--text);margin-bottom:3px;transition:color .5s}
.link-card-sub{font-size:clamp(10px,.95vw,11px);color:var(--dim);letter-spacing:.06em;transition:color .5s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-card-arr{font-size:18px;color:var(--accent);opacity:.7;flex-shrink:0;transition:transform .25s}
.link-card:hover .link-card-arr{transform:translate(3px,-3px)}
@media(max-width:600px){.link-cards{grid-template-columns:1fr;padding:0 20px}}

/* ══ CELLS ══ */
.cells{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:clamp(28px,4.5vh,48px);transition:background .5s,border-color .5s}
.cell{background:var(--bg);padding:clamp(20px,3.2vh,34px) clamp(18px,2.8vw,30px);transition:background .25s}
.cell:hover{background:var(--surface)}
.cell-lbl{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:12px;transition:color .5s}
.cell-t{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,1.7vw,20px);font-weight:400;color:var(--text);margin-bottom:8px;line-height:1.3;transition:color .5s}
.cell-b{font-size:clamp(12px,1.1vw,13px);font-weight:300;line-height:1.82;color:var(--mid);transition:color .5s}
@media(max-width:600px){.cells{grid-template-columns:1fr}}

/* ══ PULL QUOTE ══ */
.pull-quote{padding:clamp(52px,8vh,96px) clamp(24px,6vw,80px);background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;transition:background .5s,border-color .5s}
.pq-mark{font-family:'Cormorant Garamond',serif;font-size:clamp(56px,9vw,110px);color:var(--accent-15);line-height:.6;margin-bottom:clamp(18px,3.5vh,36px);display:block}
.pq-text{font-family:'Cormorant Garamond',serif;font-size:clamp(19px,2.8vw,32px);font-weight:300;font-style:italic;color:var(--text);max-width:700px;margin:0 auto;line-height:1.52;letter-spacing:.02em;transition:color .5s}
.pq-attr{margin-top:clamp(16px,2.8vh,26px);font-size:clamp(9px,.9vw,10px);letter-spacing:.25em;text-transform:uppercase;color:var(--gold);transition:color .5s}

/* ══ NEXT PROJECT ══ */
.next-project{border-top:1px solid var(--border);background:var(--panel);padding:clamp(52px,8vh,100px) clamp(24px,6vw,80px);display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,40px);text-decoration:none;transition:background .3s,border-color .5s;position:relative;overflow:hidden}
.next-project::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--accent-08),transparent);transition:width .5s}
.next-project:hover::before{width:100%}
.next-project:hover .np-arrow{transform:translate(6px,-6px)}
.np-pre{font-size:clamp(8px,.85vw,10px);letter-spacing:.3em;text-transform:uppercase;color:var(--pdim);margin-bottom:10px;transition:color .5s}
.np-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,8vw,100px);line-height:.88;letter-spacing:.03em;color:var(--ptxt);transition:color .5s}
.np-title span{color:var(--pacc);transition:color .5s}
.np-tag{display:inline-block;margin-top:10px;font-size:clamp(8px,.85vw,9px);letter-spacing:.2em;text-transform:uppercase;color:var(--pacc);border:1px solid var(--accent-25);padding:3px 10px;border-radius:20px;transition:color .5s,border-color .5s}
.np-arrow{font-size:clamp(28px,5vw,56px);color:var(--pacc);transition:transform .3s,color .5s;flex-shrink:0;opacity:.7}

/* ══ CASE STUDY TEMPLATE — MOBILE ══ */
@media(max-width:640px){
  .cs-hero{min-height:70svh;padding:80px 20px 40px}
  .cs-hero-ghost{display:none}
  .cs-body{padding:clamp(36px,6vh,60px) 20px}
  .div{margin:clamp(28px,5vh,48px) 20px}
  .two-col{gap:16px}
  .two-col-sticky{margin-bottom:4px}
  .two-col-heading{font-size:clamp(34px,9vw,50px)}
  .cells{margin-top:20px}
  .cell{padding:16px}
  .pull-quote{padding:36px 20px}
  .pq-text{font-size:clamp(17px,5vw,22px)}
  .next-project{padding:36px 20px;flex-direction:column;align-items:flex-start;gap:12px}
  .cs-meta{padding:18px 20px;gap:16px}
  .link-cards{margin-left:0;margin-right:0}
}

/* ══ MEDIA SKELETON / SHIMMER LOADER ══ */
img.media-skel,video.media-skel{
  opacity:0;
  background-color:var(--surface);
  background-image:linear-gradient(90deg,transparent 0%,var(--glass2) 45%,var(--border2) 50%,var(--glass2) 55%,transparent 100%);
  background-size:200% 100%;
  background-repeat:no-repeat;
  animation:media-shimmer 1.6s ease-in-out infinite;
}
img.media-loaded,video.media-loaded{
  animation:none;
  background:none;
  opacity:1;
  transition:opacity .5s ease;
}
@keyframes media-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
@media(prefers-reduced-motion:reduce){
  img.media-skel,video.media-skel{animation:none;opacity:1;background:none}
  .rv,.rv-l,.rv-r{transition:opacity .3s linear;transform:none!important}
  .cs-marquee-inner{animation:none}
  .two-col-heading .wipe-bg,.two-col-heading .wipe-text{transition:none}
}