:root{
    --bg: #0A0A0C;
    --bg-2: #131317;
    --panel: #17171C;
    --ink: #F3F1EA;
    --muted: #8D8B85;
    --gold: #F2B84B;
    --teal: #4FDCC4;
    --line: rgba(255,255,255,0.09);
    --max: 1240px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter', sans-serif; font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  h1,h2,h3,h4{
    font-family:'Bricolage Grotesque', sans-serif; font-weight:700;
    letter-spacing:-0.02em; margin:0; color:var(--ink);
  }
  a{color:inherit;}
  .mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  img{max-width:100%; display:block;}
  ::selection{background:var(--gold); color:#0A0A0C;}
  :focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
  }

  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:200; opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .cursor-glow{
    position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1;
    background:radial-gradient(circle, rgba(242,184,75,0.09), transparent 70%);
    transform:translate(-50%,-50%); left:-9999px; top:-9999px;
    transition:opacity .3s;
  }
  @media (max-width:820px){ .cursor-glow{display:none;} }

  [data-reveal]{
    opacity:0; transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
  }
  [data-reveal].in{opacity:1; transform:translateY(0);}

  header.site-nav{
    position:sticky; top:0; z-index:60; background:rgba(10,10,12,0.72);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  }
  .nav-inner{max-width:var(--max); margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between;}
  .nav-name{font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:1.1rem; text-decoration:none;}
  .nav-name span{color:var(--gold);}
  nav.nav-links{display:flex; gap:32px; font-size:0.9rem;}
  nav.nav-links a{text-decoration:none; color:var(--muted); position:relative; padding:4px 0;}
  nav.nav-links a::after{content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .25s;}
  nav.nav-links a:hover{color:var(--ink);}
  nav.nav-links a:hover::after{width:100%;}
  .nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer;}
  .nav-toggle span{display:block; width:20px; height:2px; background:var(--ink); margin:4px 0;}
  @media (max-width:760px){
    nav.nav-links{position:absolute; top:100%; left:0; right:0; background:var(--bg-2); border-bottom:1px solid var(--line);
      flex-direction:column; gap:0; padding:8px 32px 18px; display:none;}
    nav.nav-links.open{display:flex;}
    nav.nav-links a{padding:12px 0; border-bottom:1px solid var(--line);}
    .nav-toggle{display:block;}
  }

  .marquee-bar{
    background:var(--gold); color:#0A0A0C; overflow:hidden; white-space:nowrap;
    border-bottom:1px solid #0A0A0C;
  }
  .marquee-track{display:inline-flex; animation:scroll 26s linear infinite;}
  .marquee-track span{
    font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:0.82rem;
    text-transform:uppercase; letter-spacing:0.12em; padding:10px 26px; display:inline-block;
  }
  @keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  .hero-grid{display:grid; grid-template-columns:1.25fr 0.85fr; gap:56px; align-items:start;}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:40px;} }
  .hero-photo{position:relative;}
  .hero-photo .frame{
    position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:var(--panel);
  }
  .hero-photo img{
    width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
    filter:grayscale(1) contrast(1.05);
  }
  .hero-photo .tag-chip{
    position:absolute; bottom:18px; left:18px; background:rgba(10,10,12,0.72); backdrop-filter:blur(6px);
    border:1px solid var(--line); border-radius:999px; padding:8px 16px;
    font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--gold); letter-spacing:0.04em;
  }
  .hero-photo .corner-dot{
    position:absolute; top:-10px; right:-10px; width:20px; height:20px; border-radius:50%;
    background:var(--gold); border:3px solid var(--bg);
  }
  @media (max-width:900px){ .hero-photo{max-width:320px;} }

  .hero{padding:110px 0 60px; position:relative;}
  .hero .kicker{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.16em;
    color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:26px;
  }
  .hero .kicker::before{content:''; width:26px; height:1px; background:var(--teal);}
  .hero h1{
    font-size:clamp(3.4rem, 12vw, 8.5rem); line-height:0.9; letter-spacing:-0.03em;
  }
  .hero h1 .stroke{
    color:transparent; -webkit-text-stroke:1.5px var(--ink);
  }
  .hero .role-line{
    display:flex; align-items:center; gap:16px; margin:22px 0 34px; flex-wrap:wrap;
  }
  .hero .role-line .role{
    font-family:'IBM Plex Mono', monospace; font-size:1rem; color:var(--gold);
    border:1px solid var(--gold); border-radius:999px; padding:8px 18px;
  }
  .hero p.lede{font-size:1.25rem; color:var(--muted); max-width:600px;}
  .cta-row{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn{
    font-family:'Inter'; font-weight:600; font-size:0.94rem; padding:15px 28px; border-radius:999px;
    text-decoration:none; display:inline-flex; align-items:center; gap:8px; position:relative; overflow:hidden;
    transition:transform .2s ease;
  }
  .btn-primary{background:var(--gold); color:#0A0A0C;}
  .btn-primary:hover{transform:translateY(-3px);}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  .btn-ghost:hover{border-color:var(--ink); transform:translateY(-3px);}

  .hero-stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:80px;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .hero-stats .stat{padding:26px 6px 6px; border-right:1px solid var(--line);}
  .hero-stats .stat:last-child{border-right:none;}
  .hero-stats .stat .num{font-family:'Bricolage Grotesque'; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--ink); display:block;}
  .hero-stats .stat .label{font-family:'IBM Plex Mono', monospace; font-size:0.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em;}
  @media (max-width:720px){ .hero-stats{grid-template-columns:repeat(2,1fr);} .hero-stats .stat:nth-child(2){border-right:none;} }

  section{padding:110px 0;}
  .section-head{margin-bottom:60px; max-width:680px;}
  .section-head .idx{
    font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.12em; display:block; margin-bottom:14px;
  }
  .section-head h2{font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.02;}
  .section-head p{color:var(--muted); margin-top:18px; font-size:1.08rem; max-width:560px;}
  @media (max-width:720px){ section{padding:70px 0;} }

  .story{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .timeline{position:relative; padding-left:38px;}
  .timeline::before{
    content:''; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
    background:linear-gradient(to bottom, var(--gold), var(--teal) 70%, transparent);
  }
  .t-item{position:relative; padding-bottom:50px;}
  .t-item:last-child{padding-bottom:0;}
  .t-item::before{
    content:''; position:absolute; left:-38px; top:4px; width:13px; height:13px; border-radius:50%;
    background:var(--bg-2); border:2px solid var(--gold); transition:background .3s, box-shadow .3s;
  }
  .t-item.is-active::before{background:var(--gold); box-shadow:0 0 0 6px rgba(242,184,75,0.15);}
  .t-date{font-family:'IBM Plex Mono', monospace; font-size:0.82rem; color:var(--teal); margin-bottom:8px; display:block;}
  .t-item h3{font-size:1.4rem; margin-bottom:10px; font-family:'Bricolage Grotesque';}
  .t-item p{color:var(--muted); max-width:620px; margin:0; font-size:1.02rem;}

  .quote-block{border-left:2px solid var(--gold); padding-left:28px; margin-top:10px;}
  .quote-block p{
    font-family:'Bricolage Grotesque'; font-size:clamp(1.5rem, 3vw, 2.1rem); font-weight:500; line-height:1.25; color:var(--ink);
  }
  .perspective-flow{display:flex; flex-wrap:wrap; gap:12px; margin-top:44px;}
  .flow-step{
    flex:1 1 200px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px 22px;
  }
  .flow-step .n{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--gold); display:block; margin-bottom:12px;}
  .flow-step h4{font-size:1.05rem; font-weight:600; font-family:'Inter';}
  @media (max-width:900px){ .flow-step{flex:1 1 100%;} }

  .work-list{border-top:1px solid var(--line);}
  .work-row{
    display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:24px;
    padding:36px 0; border-bottom:1px solid var(--line); cursor:pointer; position:relative;
    background:none; border-left:none; border-right:none; border-top:none; width:100%; text-align:left;
    color:var(--ink); font-family:'Inter'; overflow:hidden;
  }
  .work-row::before{
    content:''; position:absolute; left:0; right:0; bottom:0; top:100%; background:var(--panel);
    transition:top .3s ease; z-index:0;
  }
  .work-row:hover::before{top:0;}
  .work-row > *{position:relative; z-index:1;}
  .row-idx{font-family:'IBM Plex Mono', monospace; color:var(--muted); font-size:0.95rem;}
  .row-main h3{
    font-size:clamp(1.3rem, 3vw, 1.9rem); font-weight:700; transition:color .2s; margin-bottom:10px;
  }
  .work-row:hover .row-main h3{color:var(--gold);}
  .row-tags{display:flex; gap:8px; flex-wrap:wrap;}
  .tag{
    font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
    border:1px solid var(--line); color:var(--muted); padding:5px 12px; border-radius:999px;
  }
  .row-arrow{
    font-size:1.8rem; color:var(--muted); transition:transform .25s ease, color .2s ease;
  }
  .work-row:hover .row-arrow{transform:translateX(6px) rotate(-45deg); color:var(--gold);}
  .row-domain{font-family:'IBM Plex Mono', monospace; font-size:0.8rem; color:var(--teal); margin-bottom:8px; display:block;}
  @media (max-width:700px){
    .work-row{grid-template-columns:40px 1fr; row-gap:14px;}
    .row-arrow{display:none;}
    .row-idx{font-size:0.82rem;}
  }

  .methods-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:820px){ .methods-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width:540px){ .methods-grid{grid-template-columns:1fr;} }
  .method-card{background:var(--bg); padding:28px 24px;}
  .method-card .mi{font-family:'IBM Plex Mono', monospace; color:var(--gold); font-size:0.78rem; display:block; margin-bottom:14px;}
  .method-card h4{font-size:1.05rem; margin-bottom:8px; font-family:'Bricolage Grotesque';}
  .method-card p{margin:0; font-size:0.9rem; color:var(--muted);}

  .contact{background:var(--bg-2); text-align:center; border-top:1px solid var(--line);}
  .contact .section-head{margin:0 auto 40px; text-align:center;}
  .contact-link{
    font-family:'Bricolage Grotesque'; font-size:clamp(2.6rem, 9vw, 6rem); font-weight:700;
    color:var(--ink); text-decoration:none; display:inline-block; position:relative;
    transition:color .25s ease;
  }
  .contact-link:hover{color:var(--gold);}
  .contact-link::after{
    content:'↗'; font-size:0.4em; vertical-align:super; margin-left:8px; color:var(--gold);
  }
  footer{padding:40px 0; text-align:center; font-size:0.82rem; color:var(--muted); border-top:1px solid var(--line);}

  .case-overlay{
    position:fixed; inset:0; background:var(--bg); z-index:100; overflow-y:auto;
    transform:translateY(100%); transition:transform .4s cubic-bezier(.2,.8,.2,1); display:none;
  }
  .case-overlay.open{display:block; transform:translateY(0);}
  .case-topbar{position:sticky; top:0; background:rgba(10,10,12,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); z-index:5;}
  .case-topbar-inner{max-width:840px; margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between;}
  .back-btn{
    background:none; border:1px solid var(--line); border-radius:999px; padding:10px 20px;
    font-family:'Inter'; font-size:0.88rem; font-weight:600; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:8px;
  }
  .back-btn:hover{border-color:var(--gold); color:var(--gold);}
  .case-body{max-width:840px; margin:0 auto; padding:56px 32px 110px;}
  .case-domain{color:var(--teal); font-weight:600; font-size:0.9rem; margin-bottom:14px; font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:0.08em;}
  .case-body h1{font-size:clamp(2.1rem, 6vw, 3.4rem); margin-bottom:22px; font-family:'Bricolage Grotesque';}
  .case-meta-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:46px;}
  .case-block{margin-bottom:46px;}
  .case-block h2{
    font-family:'IBM Plex Mono', monospace; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:16px; font-weight:500;
  }
  .case-block p, .case-block li{font-size:1.08rem; color:var(--ink); line-height:1.75;}
  .case-block ul{padding-left:0; margin:0; list-style:none;}
  .case-block li{margin-bottom:12px; padding-left:24px; position:relative; color:var(--muted);}
  .case-block li::before{content:'—'; position:absolute; left:0; color:var(--gold); font-weight:600;}
  .impact-box{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px; padding:24px 26px;}
  .impact-box p{color:var(--ink) !important;}
  .case-nav-footer{display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:30px; margin-top:24px; font-size:0.9rem; gap:16px;}
  .case-nav-footer a{color:var(--muted); text-decoration:none;}
  .case-nav-footer a:hover{color:var(--gold);}