:root{
    --bg:#FFFCF9; --panel:#F1F0EC; --fg:#0A0A0A; --muted:#6B6B66; --line:rgba(10,10,10,0.12);
    --modal-bg:#FFFCF9;
    --accent:#E8351C;
    --desc:#333331;
    --selection-bg:#0A0A0A; --selection-fg:#FFFFFF;
    --reveal-strong:#0A0A0A; --reveal-dim: rgba(10,10,10,0.18);
    --glass-bg: rgba(255,255,255,0.55);
    --glass-bg-strong: rgba(255,255,255,0.7);
    --glass-bg-hover: rgba(255,255,255,0.95);
    --glass-border: rgba(255,255,255,0.7);
    --glass-highlight: rgba(255,255,255,0.8);
    --glass-shadow: rgba(10,10,10,0.10);
    --glass-shadow-strong: rgba(10,10,10,0.14);
    --chip-bg: rgba(10,10,10,0.05);
    --chip-bg-hover: rgba(10,10,10,0.1);
    --btn-border: rgba(10,10,10,0.1);
    --modal-btn-bg: rgba(10,10,10,0.04);
    --modal-btn-bg-hover: rgba(10,10,10,0.1);
    --overlay-bg: rgba(20,20,20,0.45);
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#111111; --panel:#151515; --fg:#F5F5F3; --muted:#8A8A86; --line:rgba(245,245,243,0.14);
      --modal-bg:#111111;
      --desc:#D8D8D4;
      --selection-bg:#F5F5F3; --selection-fg:#000000;
      --reveal-strong:#F5F5F3; --reveal-dim: rgba(245,245,243,0.18);
      --glass-bg: rgba(20,20,20,0.55);
      --glass-bg-strong: rgba(30,30,30,0.7);
      --glass-bg-hover: rgba(40,40,40,0.85);
      --glass-border: rgba(255,255,255,0.14);
      --glass-highlight: rgba(255,255,255,0.08);
      --glass-shadow: rgba(0,0,0,0.35);
      --glass-shadow-strong: rgba(0,0,0,0.45);
      --chip-bg: rgba(245,245,243,0.08);
      --chip-bg-hover: rgba(245,245,243,0.16);
      --btn-border: rgba(245,245,243,0.14);
      --modal-btn-bg: rgba(245,245,243,0.06);
      --modal-btn-bg-hover: rgba(245,245,243,0.14);
      --overlay-bg: rgba(0,0,0,0.65);
    }
  }

  /* manual override via the theme toggle — wins regardless of OS setting */
  :root[data-theme="dark"]{
    --bg:#111111; --panel:#151515; --fg:#F5F5F3; --muted:#8A8A86; --line:rgba(245,245,243,0.14);
    --modal-bg:#111111;
    --desc:#D8D8D4;
    --selection-bg:#F5F5F3; --selection-fg:#000000;
    --reveal-strong:#F5F5F3; --reveal-dim: rgba(245,245,243,0.18);
    --glass-bg: rgba(20,20,20,0.55);
    --glass-bg-strong: rgba(30,30,30,0.7);
    --glass-bg-hover: rgba(40,40,40,0.85);
    --glass-border: rgba(255,255,255,0.14);
    --glass-highlight: rgba(255,255,255,0.08);
    --glass-shadow: rgba(0,0,0,0.35);
    --glass-shadow-strong: rgba(0,0,0,0.45);
    --chip-bg: rgba(245,245,243,0.08);
    --chip-bg-hover: rgba(245,245,243,0.16);
    --btn-border: rgba(245,245,243,0.14);
    --modal-btn-bg: rgba(245,245,243,0.06);
    --modal-btn-bg-hover: rgba(245,245,243,0.14);
    --overlay-bg: rgba(0,0,0,0.65);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{ background:var(--bg); color:var(--fg); font-family:'Hanken Grotesk', sans-serif; font-weight:400; overflow-x:hidden; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--selection-bg); color:var(--selection-fg); }
  .mono{ font-family:'Space Mono', monospace; letter-spacing:0.04em; }

  header{
    position:fixed; top:calc(20px + env(safe-area-inset-top)); left:calc(24px + env(safe-area-inset-left));
    z-index:50;
    display:flex; align-items:center; gap:18px;
    padding:10px 10px 10px 22px;
    border-radius:999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow: 0 1px 1px var(--glass-highlight) inset, 0 8px 30px var(--glass-shadow);
  }
  header .work-btn{
    font-size:14px; font-weight:500; color:var(--fg);
    background:none; border:none;
    cursor:pointer;
    white-space:nowrap;
  }
  header .contact-btn{
    font-size:13px; font-weight:500; color:var(--fg);
    background: var(--glass-bg-strong);
    border:1px solid var(--btn-border);
    padding:8px 16px; border-radius:999px;
    cursor:pointer;
    transition: background 0.25s ease;
  }
  header .contact-btn:hover{ background: var(--glass-bg-hover); }

  /* ---------- work popover ---------- */
  .work-popover{
    position:fixed; top:calc(74px + env(safe-area-inset-top)); left:calc(24px + env(safe-area-inset-left)); transform:translateY(-8px);
    z-index:60;
    width:230px;
    padding:12px;
    border-radius:20px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow: 0 1px 1px var(--glass-highlight) inset, 0 12px 40px var(--glass-shadow-strong);
    opacity:0; visibility:hidden;
    pointer-events:none;
    display:flex; flex-direction:column;
  }
  .work-popover.open{ pointer-events:auto; }
  .work-popover .opt{
    display:block;
    font-size:14px; color:var(--fg);
    padding:10px 14px; margin-bottom:4px;
    border-radius:14px;
    cursor:pointer;
    transition: background 0.2s ease;
  }
  .work-popover .opt:last-child{ margin-bottom:0; }
  .work-popover .opt:hover{ background: var(--chip-bg); }

  .top-right-controls{
    position:fixed; top:calc(20px + env(safe-area-inset-top)); right:calc(24px + env(safe-area-inset-right)); z-index:50;
    display:flex; align-items:center; gap:10px;
  }
  .play-btn{
    font-family:'Hanken Grotesk', sans-serif;
    font-size:14px; font-weight:500; color:var(--fg);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow: 0 1px 1px var(--glass-highlight) inset, 0 8px 30px var(--glass-shadow);
    padding:11px 20px; border-radius:999px;
    cursor:pointer;
    transition: background 0.25s ease;
  }
  .play-btn:hover{ background: var(--glass-bg-hover); }

  .theme-toggle{
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow: 0 1px 1px var(--glass-highlight) inset, 0 8px 30px var(--glass-shadow);
    color:var(--fg);
    cursor:pointer;
    transition: background 0.25s ease;
    flex-shrink:0;
  }
  .theme-toggle:hover{ background: var(--glass-bg-hover); }
  .theme-toggle svg{ width:16px; height:16px; display:block; }
  .theme-toggle .icon-sun{ display:none; }
  .theme-toggle.show-sun .icon-moon{ display:none; }
  .theme-toggle.show-sun .icon-sun{ display:block; }

  /* ---------- play / drawing canvas ---------- */
  .play-overlay{
    position:fixed; inset:0; z-index:400;
    background:#EEB723;
    display:none;
    flex-direction:column;
  }
  .play-close{
    position:fixed; top:calc(26px + env(safe-area-inset-top)); left:calc(28px + env(safe-area-inset-left)); z-index:410;
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.4); background:rgba(0,0,0,0.15);
    color:#fff; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .play-close:hover{ background:rgba(0,0,0,0.28); }
  #drawCanvas{
    flex:1; width:100%; touch-action:none; cursor:crosshair; display:block;
  }
  .draw-hint{
    position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
    z-index:405;
    font-family:'Hanken Grotesk', sans-serif;
    font-size:1.4rem; font-weight:500; color:rgba(255,255,255,0.75);
    pointer-events:none;
    transition: opacity 0.4s ease;
  }
  .draw-hint.hidden{ opacity:0; }
  .play-footer{
    position:fixed; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:410;
    display:flex; gap:12px;
  }
  .play-clear, .play-download{
    font-family:'Hanken Grotesk', sans-serif;
    font-size:15px; font-weight:500;
    padding:14px 28px; border-radius:999px;
    cursor:pointer; border:1px solid rgba(255,255,255,0.5);
  }
  .play-clear{ background:rgba(0,0,0,0.15); color:#fff; }
  .play-clear:hover{ background:rgba(0,0,0,0.28); }
  .play-download{ background:#fff; color:#0A0A0A; border-color:#fff; }
  .play-download:hover{ background:rgba(255,255,255,0.85); }

  /* ---------- contact popover ---------- */
  .contact-popover{
    position:fixed; top:calc(74px + env(safe-area-inset-top)); left:calc(24px + env(safe-area-inset-left)); transform:translateY(-8px);
    z-index:60;
    width:230px;
    padding:20px;
    border-radius:20px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow: 0 1px 1px var(--glass-highlight) inset, 0 12px 40px var(--glass-shadow-strong);
    opacity:0; visibility:hidden;
    pointer-events:none;
  }
  .contact-popover.open{ pointer-events:auto; }
  .contact-popover .title{ font-size:15px; font-weight:500; margin-bottom:14px; }
  .contact-popover .opt{
    display:flex; align-items:center; gap:10px;
    font-size:14px; color:var(--fg);
    padding:10px 14px; margin-bottom:8px;
    border-radius:999px;
    background: var(--chip-bg);
    transition: background 0.2s ease;
  }
  .contact-popover .opt:last-child{ margin-bottom:0; }
  .contact-popover .opt:hover{ background: var(--chip-bg-hover); }

  /* ---------- hero / intro ---------- */
  .intro{ padding: 150px 24px 90px; max-width:none; width:100%; position:relative; z-index:10; }
  .intro .statement{ font-weight:600; font-size:clamp(1.75rem, 5vw, 4rem); line-height:1.25; letter-spacing:0; max-width:none; transform-origin: left center; }

  /* ---------- scroll-driven text reveal (intro) ---------- */
  .reveal-text{
    background-image: linear-gradient(90deg, var(--reveal-strong) 0%, var(--reveal-dim) 0%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  /* ---------- case study scroll blocks ---------- */
  .case-study{ position:relative; z-index:1; }
  .cs-media{
    width:100vw; height:100vh; height:100svh;
    display:flex; align-items:center; justify-content:center;
    background: var(--panel);
    border:1px solid var(--line);
    border-radius:28px;
    overflow:hidden;
    transform: scale(0.34);
    cursor: pointer;
  }
  .cs-media .ph{
    font-family:'Space Mono', monospace; font-size:13px; color:var(--muted);
    text-align:center; padding:20px;
  }
  .cs-media img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform: scale(1);
    transition: transform 0.6s cubic-bezier(.16,.84,.44,1);
  }
  .cs-media.logo-preview{
    --preview-bg: var(--panel);
    --preview-bg-color: var(--panel);
    position:relative;
    background-color: var(--preview-bg-color) !important;
    background: var(--preview-bg) !important;
    border-color: transparent;
    padding: clamp(44px, 10vw, 140px);
  }
  .cs-media.logo-preview img{
    position:relative;
    z-index:1;
    width:min(58vw, 760px);
    height:auto;
    max-width:78%;
    max-height:42vh;
    object-fit:contain;
    transition:none;
  }
  .cs-media.logo-preview-grapeloft{ --preview-bg:#170C08; --preview-bg-color:#170C08; background-color:#170C08 !important; }
  .cs-media.logo-preview-bts{ --preview-bg:#153253; --preview-bg-color:#153253; background-color:#153253 !important; }
  .cs-media.logo-preview-wastetrade{ --preview-bg:#02B774; --preview-bg-color:#02B774; background-color:#02B774 !important; }
  .cs-media.logo-preview-newham{
    --preview-bg: linear-gradient(135deg, #006B6F 0%, #009C8C 100%);
    --preview-bg-color:#006B6F;
    background: linear-gradient(135deg, #006B6F 0%, #009C8C 100%) !important;
  }
  @media (hover:hover) and (pointer:fine){
    .cs-media:hover img{ transform: scale(1.08); }
    .cs-media.logo-preview:hover img{ transform:none; }
  }
  .cs-media iframe{
    width:100%; height:100%; border:none; display:block;
    pointer-events:none;
  }

  .cs-info{
    max-width:760px; margin:0 auto;
    padding: 64px 24px 140px;
    opacity:0; transform:translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.16,.84,.44,1);
  }
  .cs-info.in{ opacity:1; transform:none; }
  .cs-eyebrow{ font-size:12px; color:var(--muted); margin-bottom:14px; }
  .cs-title{ font-weight:600; font-size:clamp(28px,4.2vw,42px); letter-spacing:0; margin-bottom:22px; cursor:pointer; transition: opacity 0.2s ease; }
  .cs-title:hover{ opacity:0.6; }
  .cs-rule{ border:none; border-top:1px solid var(--line); margin-bottom:26px; }
  .cs-desc{ font-size:17px; line-height:1.75; color:var(--desc); max-width:70ch; }

  footer{
    padding: 60px 24px 80px; text-align:center; color:var(--muted); font-size:13px;
  }

  .name-btn{
    position:fixed; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:50;
    font-family:'Hanken Grotesk', sans-serif;
    font-size:14px; font-weight:500; color:var(--fg);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border:1px solid var(--glass-border);
    box-shadow: 0 1px 1px var(--glass-highlight) inset, 0 8px 30px var(--glass-shadow);
    border-radius:999px;
    padding:12px 24px;
    cursor:pointer;
    white-space:nowrap;
    transition: background 0.25s ease;
  }
  .name-btn:hover{ background: var(--glass-bg-hover); }

  @media (max-width: 640px){
    .name-btn{ bottom:calc(16px + env(safe-area-inset-bottom)); font-size:13px; padding:10px 18px; }
  }

  /* ---------- detail popup (article-style, multi image + caption) ---------- */
  .modal{
    position:fixed; inset:0; z-index:300;
    display:none;
    padding: 64px 24px;
    background: var(--overlay-bg);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-card{
    width:100%; max-width:60vw;
    margin:0 auto;
    background:var(--modal-bg);
    border-radius:24px;
    overflow:hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  }
  .modal-close{
    position:fixed; top:calc(26px + env(safe-area-inset-top)); left:calc(28px + env(safe-area-inset-left)); z-index:310;
    width:40px; height:40px; border-radius:50%;
    border:1px solid var(--line); background:var(--modal-btn-bg);
    color:var(--fg); font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .modal-close:hover{ background:var(--modal-btn-bg-hover); }

  .modal-hero{
    width:100%;
    aspect-ratio:16/10;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel);
    overflow:hidden;
  }
  .modal-hero .ph{
    font-family:'Space Mono', monospace; color:var(--muted); font-size:13px;
    text-align:center; padding:30px;
  }
  .modal-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
  .modal-hero iframe{ width:100%; height:100%; border:none; display:block; }

  .modal-header{ padding:44px 40px 32px; }
  .modal-eyebrow{ font-size:12px; color:var(--muted); margin-bottom:14px; }
  .modal-title{ font-weight:600; font-size:clamp(24px,3.4vw,32px); letter-spacing:0; margin-bottom:22px; }
  .modal-rule{ border:none; border-top:1px solid var(--line); margin: 0 0 28px; }
  .modal-intro{ padding:0 40px 32px; font-size:16px; line-height:1.7; color:var(--desc); }
  .modal-link-wrap{ padding:0 40px 32px; }
  .modal-link-btn{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Hanken Grotesk', sans-serif;
    font-size:15px; font-weight:500; color:var(--fg);
    background: var(--chip-bg);
    border:1px solid var(--line);
    padding:12px 22px; border-radius:999px;
    text-decoration:none;
    transition: background 0.2s ease;
  }
  .modal-link-btn:hover{ background: var(--chip-bg-hover); }

  .modal-block{ padding:0 40px 40px; }
  .modal-block-text .caption{ font-size:16px; }
  .modal-block .stage{
    width:100%; aspect-ratio:16/10;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel); border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden; margin-bottom:18px;
  }
  .modal-block .stage .ph{
    font-family:'Space Mono', monospace; color:var(--muted); font-size:13px;
    text-align:center; padding:30px;
  }
  .modal-block .stage img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
    gap:12px; margin-bottom:18px;
  }
  .gallery-grid img{
    width:100%; aspect-ratio:16/10; object-fit:cover;
    border-radius:8px; border:1px solid var(--line); display:block;
  }
  .modal-block .caption{
    font-size:15px; line-height:1.7; color:var(--muted);
  }

  .modal-footer{
    padding: 0 40px 48px;
    display:flex; justify-content:center; flex-wrap:wrap;
    gap:12px;
  }
  .modal-close-bottom{ text-decoration:none; display:inline-block; }
  .modal-close-bottom{
    font-family:'Hanken Grotesk', sans-serif;
    font-size:15px; font-weight:500; color:var(--fg);
    background: var(--chip-bg);
    border:1px solid var(--line);
    padding:12px 32px; border-radius:999px;
    cursor:pointer;
    transition: background 0.2s ease;
  }
  .modal-close-bottom:hover{ background: var(--chip-bg-hover); }

  @media (min-width: 721px) and (max-width: 1100px){
    .modal-card{ max-width:85vw; }
  }

  @media (max-width: 720px){
    .modal{ padding:0; }
    .modal-card{ max-width:none; box-shadow:none; min-height:100%; border-radius:0; }
    header,
    .work-popover,
    .contact-popover,
    .play-btn,
    .theme-toggle,
    .name-btn,
    .modal,
    .modal-close{
      -webkit-backdrop-filter:none;
      backdrop-filter:none;
    }
    .intro{ padding:120px 20px 70px; }
    .cs-media{
      height:100svh;
      border-radius:22px;
    }
    .cs-media.logo-preview{
      padding: clamp(32px, 14vw, 90px);
    }
    .cs-media.logo-preview img{
      width: min(70vw, 520px);
      max-width:82%;
      max-height:34vh;
    }
    .cs-info{
      padding:48px 20px 96px;
    }
    .modal-header{ padding:36px 24px 24px; }
    .modal-intro,
    .modal-link-wrap,
    .modal-block,
    .modal-footer{ padding-left:24px; padding-right:24px; }
  }

  @media (max-width: 380px){
    header{
      left:calc(12px + env(safe-area-inset-left));
      gap:10px;
      padding:8px 8px 8px 14px;
    }
    header .contact-btn{ padding:7px 12px; }
    .top-right-controls{
      right:calc(12px + env(safe-area-inset-right));
      gap:8px;
    }
    .play-btn{ padding:10px 14px; }
    .theme-toggle{ width:40px; height:40px; }
  }

  body.no-scroll{ overflow:hidden; }