/* FULCRUM — extracted site styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg:     #0C0B0A;
    --bg2:    #141311;
    --bg3:    #1c1a17;
    --text:   #EDE9E2;
    --accent: #C8A96E;
    --muted:  #5C5952;
    --border: rgba(237,233,226,.07);
  }
  html { scroll-behavior: smooth; }
  body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.6; overflow-x:hidden; cursor:none; }

  /* GRAIN */
  body::after { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.026; pointer-events:none; z-index:9980; }

  /* ── CURSOR ── */
  #c-dot,#c-ring { position:fixed; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); }
  #c-dot  { width:5px; height:5px; background:var(--text); z-index:9999; transition:background .2s,width .2s,height .2s; }
  #c-ring { width:32px; height:32px; border:1.5px solid rgba(237,233,226,.2); z-index:9997; transition:width .42s cubic-bezier(.16,1,.3,1),height .42s cubic-bezier(.16,1,.3,1),border-color .3s,border-radius .3s; }
  .c-trail { position:fixed; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); z-index:9995; }
  body.cs-hover #c-ring { width:60px; height:60px; border-color:rgba(200,169,110,.45); }
  body.cs-hover #c-dot  { background:var(--accent); }
  body.cs-text  #c-ring { width:52px; height:30px; border-color:rgba(237,233,226,.12); }
  body.cs-click #c-ring { width:20px; height:20px; }

  /* ── PRELOADER ── */
  #preloader { position:fixed; inset:0; background:var(--bg); z-index:10000; display:flex; align-items:center; justify-content:center; transition:opacity .9s ease,visibility .9s ease; padding-left: 10px;}
  #preloader.hide { opacity:0; visibility:hidden; }
  .pl-word { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.5rem,9vw,7rem); letter-spacing:.35em; display:flex; overflow:hidden; }
  .pl-word span { display:inline-block; transform:translateY(110%); animation:plUp .7s cubic-bezier(.16,1,.3,1) forwards; }
  .pl-word span:nth-child(1){animation-delay:.04s} .pl-word span:nth-child(2){animation-delay:.09s} .pl-word span:nth-child(3){animation-delay:.14s} .pl-word span:nth-child(4){animation-delay:.19s} .pl-word span:nth-child(5){animation-delay:.24s} .pl-word span:nth-child(6){animation-delay:.29s} .pl-word span:nth-child(7){animation-delay:.34s}
  @keyframes plUp { to { transform:translateY(0); } }

  /* ── NAV ── */
  nav { position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:2rem 3rem; transition:background .4s,border-color .4s; }
  nav.scrolled { background:rgba(12,11,10,.9); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--border); }
  .nav-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:.95rem; letter-spacing:.18em; color:var(--text); text-decoration:none; cursor:none; transition:color .3s; display:inline-block; }
  .nav-logo:hover { color:var(--accent); }
  .nav-links { display:flex; gap:2.4rem; }
  .nav-link { font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; cursor:none; }
  .nav-link:hover { color:var(--text); }

  /* ── HERO ── */
  #hero { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-end; padding:9rem 3rem 5rem; position:relative; overflow:hidden; }
  /* hero image panel */
  .hero-panel { position:absolute; right:0; top:0; bottom:0; width:40%; background:var(--bg3); border-left:1px solid var(--border); overflow:hidden; z-index:0; }
  .hero-panel::before { content:''; position:absolute; inset:0; background:linear-gradient(to right,var(--bg) 0%,transparent 40%); z-index:1; pointer-events:none; }
  .hero-panel::after  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 60% 50%,rgba(200,169,110,.045) 0%,transparent 70%); animation:glowPulse 7s ease-in-out infinite 1s; z-index:1; pointer-events:none; }
  .hero-panel-inner { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(237,233,226,.012) 3px,rgba(237,233,226,.012) 4px); z-index:0; }
  .hero-panel-label { position:absolute; bottom:4.5rem; left:50%; transform:translateX(-30%); font-family:'Space Mono',monospace; font-size:.52rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(92,89,82,.28); z-index:2; white-space:nowrap; border:1px solid rgba(92,89,82,.12); padding:.5rem 1rem; }
  #hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(237,233,226,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(237,233,226,.025) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 10%,transparent 80%); -webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 10%,transparent 80%); }
  .hero-glow { position:absolute; width:700px; height:700px; background:radial-gradient(circle,rgba(200,169,110,.065) 0%,transparent 65%); top:42%; left:38%; transform:translate(-50%,-50%); pointer-events:none; animation:glowPulse 6s ease-in-out infinite; }
  @keyframes glowPulse { 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.14)} }
  .hero-eyebrow { font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(237,233,226,.38); margin-bottom:2rem; position:relative; z-index:1; opacity:0; transform:translateY(12px); animation:fUp .8s cubic-bezier(.16,1,.3,1) 1.85s forwards; }
  .hero-eyebrow em { font-style:normal; color:var(--accent); }
  .hero-h1 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(3.5rem,9.5vw,10.5rem); line-height:.92; letter-spacing:-.025em; margin-bottom:3.5rem; position:relative; z-index:1; will-change:transform,opacity; }
  .hero-h1 .ln { display:block; overflow:hidden; padding-bottom:.06em; }
  .hero-h1 .ln .lm { display:block; transform:translateY(112%); animation:lmReveal 1.05s cubic-bezier(.16,1,.3,1) forwards; }
  .hero-h1 .ln:nth-child(1) .lm{animation-delay:1.92s} .hero-h1 .ln:nth-child(2) .lm{animation-delay:2.06s} .hero-h1 .ln:nth-child(3) .lm{animation-delay:2.2s}
  @keyframes lmReveal { from{transform:translateY(112%) skewY(3deg)} to{transform:translateY(0) skewY(0deg)} }
  .hero-h1 em { font-style:normal; color:var(--accent); }
  .hero-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; position:relative; z-index:1; opacity:0; transform:translateY(12px); animation:fUp .8s cubic-bezier(.16,1,.3,1) 2.5s forwards; }
  .hero-role { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(237,233,226,.35); }
  .hero-role em { font-style:normal; color:var(--accent); }
  .hero-name-txt { font-family:'Inter',sans-serif; font-weight:500; font-size:.9rem; color:var(--text); margin-top:.3rem; letter-spacing:.04em; }
  .hero-scroll { display:flex; align-items:center; gap:1rem; font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  .scroll-bar { width:54px; height:1px; background:rgba(92,89,82,.35); position:relative; overflow:hidden; }
  .scroll-bar::after { content:''; position:absolute; left:-100%; top:0; width:100%; height:100%; background:var(--accent); animation:sBar 2.4s ease-in-out infinite 2.8s; }
  @keyframes fUp  { to{opacity:1;transform:translateY(0)} }
  @keyframes sBar { 0%{left:-100%} 50%{left:0} 100%{left:100%} }

  /* ── MARQUEE ── */
  .mq-wrap { border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; padding:1.1rem 0; }
  .mq-track { display:flex; white-space:nowrap; width:max-content; animation:mq 28s linear infinite; }
  .mq-item { font-family:'Syne',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(237,233,226,.32); padding:0 2rem; transition:color .4s; }
  .mq-item:nth-child(3n+1) { color:rgba(200,169,110,.5); }
  .mq-gem { color:var(--accent); margin-left:2rem; font-size:.85rem; opacity:.85; }
  @keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

  /* ── SHARED ── */
  .wrap { max-width:1380px; margin:0 auto; padding:0 3rem; }
  .sec  { padding:9rem 0; border-bottom:1px solid var(--border); }
  .sec-label { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:3rem; display:flex; align-items:center; gap:1rem; }
  .sec-label::before { content:''; display:inline-block; width:20px; height:1px; background:var(--accent); }
  .rv { opacity:0; transform:translateY(44px); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1); }
  .rv.on { opacity:1; transform:translateY(0); }
  .rv.d1{transition-delay:.12s} .rv.d2{transition-delay:.24s} .rv.d3{transition-delay:.36s}

  /* ── THESIS ── */
  .tgrid { display:grid; grid-template-columns:1fr 1.5fr; gap:7rem; align-items:start; }
  .thesis-h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,3.5vw,3.1rem); line-height:1.12; letter-spacing:-.022em; }
  .thesis-h2 em { font-style:normal; color:var(--accent); }
  .thesis-r p { font-size:1.02rem; line-height:1.88; color:rgba(237,233,226,.65); margin-bottom:1.4rem; }
  .thesis-r p { font-family: 'Space Grotesk', sans-serif; font-size:1.02rem; line-height:1.88; color:rgba(237,233,226,.65); margin-bottom:1.4rem; }
  .thesis-r p:last-of-type { margin-bottom:0; }
  .stats { display:flex; gap:3.5rem; margin-top:3rem; padding-top:3rem; border-top:1px solid var(--border); }
  .stat-n { font-family:'Syne',sans-serif; font-weight:800; font-size:2.4rem; color:var(--accent); line-height:1; margin-bottom:.4rem; display:flex; align-items:center; }
  .stat-n-inf { font-size:3.2rem; line-height:.85; letter-spacing:-.04em; }
  .stat-l { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }

  /* ── PROCESS ── */
  .process-top { display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; margin-bottom:4rem; }
  .process-h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,3.5vw,3.1rem); line-height:1.1; letter-spacing:-.022em; max-width:400px; }
  .process-sub { font-size:.9rem; color:var(--muted); line-height:1.78; max-width:300px; }
  .proc-list { list-style:none; }
  .proc-item { position:relative; border-top:1px solid var(--border); overflow:hidden; cursor:default; }
  .proc-item:last-child { border-bottom:1px solid var(--border); }
  .proc-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); transform:scaleY(0); transform-origin:bottom; transition:transform .45s cubic-bezier(.16,1,.3,1); }
  .proc-item:hover::before { transform:scaleY(1); }
  .proc-wm { position:absolute; right:-.02em; top:50%; transform:translateY(-50%); font-family:'Syne',sans-serif; font-weight:800; font-size:8.5rem; line-height:1; color:rgba(237,233,226,.025); user-select:none; pointer-events:none; transition:color .4s; }
  .proc-item:hover .proc-wm { color:rgba(200,169,110,.045); }
  .proc-main { display:flex; align-items:baseline; padding:2rem 5rem 2rem 2.5rem; position:relative; z-index:1; }
  .proc-num { font-family:'Syne',sans-serif; font-weight:800; font-size:2.8rem; line-height:1; color:rgba(200,169,110,.16); min-width:100px; flex-shrink:0; transition:color .35s,transform .35s cubic-bezier(.16,1,.3,1); }
  .proc-item:hover .proc-num { color:var(--accent); transform:translateX(4px); }
  .proc-right { flex:1; }
  .proc-title { font-family:'Syne',sans-serif; font-weight:700; font-size:clamp(1.3rem,2vw,1.85rem); line-height:1.15; letter-spacing:-.012em; transition:transform .35s cubic-bezier(.16,1,.3,1); }
  .proc-item:hover .proc-title { transform:translateX(6px); }
  .proc-desc { font-size:.88rem; color:var(--muted); line-height:1.76; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1),padding .5s cubic-bezier(.16,1,.3,1); max-width:540px; }
  .proc-item:hover .proc-desc { max-height:80px; opacity:1; padding-top:.75rem; }
  .proc-arrow { position:absolute; right:2.5rem; top:50%; transform:translateY(-50%) translateX(-14px); color:var(--accent); font-size:1.1rem; opacity:0; transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1); }
  .proc-item:hover .proc-arrow { opacity:1; transform:translateY(-50%) translateX(0); }

  /* ── WORK CARDS ── */
  .work-top { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3.5rem; }
  .work-h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2rem,3.5vw,3.1rem); line-height:1.1; letter-spacing:-.022em; }
  .work-cta-link { font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-decoration:none; border-bottom:1px solid rgba(92,89,82,.3); padding-bottom:.25rem; transition:color .3s,border-color .3s; cursor:none; white-space:nowrap; }
  .work-cta-link:hover { color:var(--text); border-color:var(--text); }
  .work-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
  .wc:first-child { grid-column:1/-1; }
  .wc { background:var(--bg2); overflow:hidden; position:relative; cursor:none; }
  .wc-atm { width:100%; overflow:hidden; position:relative; }
  .wc:first-child .wc-atm { height:260px; }
  .wc:not(:first-child) .wc-atm { height:190px; }
  .wc-atm canvas { width:100%; height:100%; display:block; transition:transform .9s cubic-bezier(.16,1,.3,1); }
  .wc:hover .wc-atm canvas { transform:scale(1.05); }
  .wc-atm::after { content:''; position:absolute; bottom:0; left:0; right:0; height:90px; background:linear-gradient(transparent,var(--bg2)); pointer-events:none; z-index:2; }
  .wc-body { padding:2rem 2.5rem 2.8rem; position:relative; z-index:2; }
  .wc-meta { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.4rem; }
  .wc-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
  .wc-tag { font-family:'Space Mono',monospace; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border); padding:.22rem .6rem; transition:border-color .35s,color .35s; }
  .wc:hover .wc-tag { border-color:rgba(200,169,110,.2); color:rgba(237,233,226,.6); }
  .wc-year { font-family:'Space Mono',monospace; font-size:.6rem; color:var(--muted); }
  .wc-name { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,2.8vw,2.9rem); letter-spacing:-.025em; line-height:1.1; margin-bottom:.8rem; display:inline-block; position:relative; transition:color .35s; }
  .wc:hover .wc-name { color:var(--accent); }
  .wc-name::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--accent); transition:width .55s cubic-bezier(.16,1,.3,1); }
  .wc:hover .wc-name::after { width:100%; }
  .wc-desc {  font-family: 'Space Grotesk', sans-serif; font-size:.88rem; color:var(--muted); line-height:1.74; max-width:500px; margin-bottom:1.4rem; }
  .wc-arr { display:inline-flex; align-items:center; gap:.5rem; font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateX(-14px); transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1); }
  .wc:hover .wc-arr { opacity:1; transform:translateX(0); }

  /* ── ABOUT ── */
  .agrid { display:grid; grid-template-columns:1fr 1fr; gap:8rem; align-items:center; }
  .about-photo-wrap { aspect-ratio:4/5; position:relative; overflow:visible; background:var(--bg3); }
  .about-photo-clip { position:absolute; inset:0; overflow:hidden; }
  /* editorial overlap badge */
  .about-badge { position:absolute; bottom:-34px; right:-44px; z-index:4; background:var(--bg); border:1px solid rgba(200,169,110,.18); padding:1.6rem 2rem; min-width:210px; }
  .about-badge::before { content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--accent); }
  .about-badge-num { font-family:'Syne',sans-serif; font-weight:800; font-size:3rem; color:var(--accent); line-height:1; margin-bottom:.55rem; }
  .about-badge-label { font-family:'Space Mono',monospace; font-size:.54rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); line-height:1.65; }
  .about-photo-wrap img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; filter:grayscale(15%) contrast(1.05); }
  .about-photo-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(12,11,10,.6) 0%,transparent 50%); }
  .about-photo-tag { position:absolute; bottom:2rem; left:2rem; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(237,233,226,.6); }
  /* fallback if no photo */
  .about-photo-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-weight:800; font-size:10rem; color:rgba(200,169,110,.06); user-select:none; }
  .about-photo-wrap img[src="allen.jpg"]:not([complete]) ~ .about-photo-fallback,
  .about-photo-wrap img[src=""]:not([complete]) ~ .about-photo-fallback { display:flex; }
  .about-h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(1.8rem,2.8vw,2.8rem); line-height:1.18; letter-spacing:-.02em; margin-bottom:2rem; }
  .about-h2 em { font-style:normal; color:var(--accent); }
  .about-body p { font-size:1rem; line-height:1.88; color:rgba(237,233,226,.65); margin-bottom:1.2rem; }
  .about-body p:last-child { margin-bottom:0; }
  .about-sig { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:1.5rem; }
  .about-sig-bar { width:30px; height:2px; background:var(--accent); }
  .about-sig-name { font-family:'Syne',sans-serif; font-weight:700; font-size:1rem; margin-bottom:.2rem; }
  .about-sig-title { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

  /* ── CONTACT ── */
  #contact { text-align:center; }
  #contact .sec-label { justify-content:center; }
  .contact-h2 { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(3rem,8.5vw,9rem); line-height:.93; letter-spacing:-.03em; margin-bottom:2rem; }
  .contact-h2 em { font-style:normal; color:var(--accent); }
  .contact-sub {font-family: 'Space Grotesk', sans-serif; font-size:1rem; color:var(--muted); line-height:1.82; margin:0 auto 3.5rem; max-width:480px; }
  .mag-wrap { display:inline-block; }
  .contact-btn { display:inline-flex; align-items:center; gap:.9rem; background:var(--accent); color:var(--bg); font-family:'Syne',sans-serif; font-weight:700; font-size:.9rem; letter-spacing:.06em; padding:1.25rem 2.8rem; text-decoration:none; position:relative; overflow:hidden; transition:background .3s; cursor:none; }
  .contact-btn::before { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-18deg); transition:left .6s; }
  .contact-btn:hover::before { left:160%; }
  .contact-btn:hover { background:#d4b878; }
  .contact-or { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:2rem 0; }
  .contact-mail { font-family:'Syne',sans-serif; font-weight:700; font-size:1.1rem; color:var(--text); text-decoration:none; border-bottom:1px solid var(--border); padding-bottom:.3rem; transition:color .3s,border-color .3s; cursor:none; }
  .contact-mail:hover { color:var(--accent); border-color:var(--accent); }

  /* ── FOOTER ── */
  .ft-inner { padding:2.5rem 3rem; display:flex; align-items:center; justify-content:space-between; max-width:1380px; margin:0 auto; gap:2rem; }
  .ft-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:.88rem; letter-spacing:.16em; }
  .ft-copy { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
  .ft-links { display:flex; gap:2rem; }
  .ft-link { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .3s; cursor:none; }
  .ft-link:hover { color:var(--text); }

  /* ════════════════════════════════════
     CASE STUDY MODAL
  ════════════════════════════════════ */
  #modal { position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .4s ease; }
  #modal.open { pointer-events:all; opacity:1; }
  .modal-overlay { position:absolute; inset:0; background:rgba(8,7,6,.94); cursor:none; }
  .modal-panel {
    position:relative; z-index:2;
    background:var(--bg2);
    width:92vw; max-width:1160px;
    max-height:90vh; overflow-y:auto;
    transform:translateY(48px) scale(.98);
    transition:transform .55s cubic-bezier(.16,1,.3,1);
    scrollbar-width:thin; scrollbar-color:var(--muted) transparent;
  }
  #modal.open .modal-panel { transform:translateY(0) scale(1); }
  .modal-panel::-webkit-scrollbar { width:4px; }
  .modal-panel::-webkit-scrollbar-thumb { background:var(--muted); border-radius:2px; }

  .modal-header {
    padding:3rem 3.5rem 2.5rem;
    border-bottom:1px solid var(--border);
    display:flex; align-items:flex-start; justify-content:space-between; gap:2rem;
  }
  .modal-title { font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(2.5rem,5vw,4.5rem); line-height:.95; letter-spacing:-.03em; }
  .modal-year { font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:1rem; }
  .modal-close { position:absolute; top:2rem; right:2rem; background:none; border:1px solid var(--border); color:var(--muted); width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1rem; cursor:none; flex-shrink:0; transition:border-color .3s,color .3s; }
  .modal-close:hover { border-color:var(--text); color:var(--text); }

  .modal-tags { padding:1.8rem 3.5rem; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:.5rem; }
  .modal-tag { font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border); padding:.28rem .75rem; }

  .modal-body { display:grid; grid-template-columns:1fr 0px; }

  .modal-story { padding:3rem 3.5rem; }
  .modal-section { margin-bottom:2.8rem; }
  .modal-section:last-child { margin-bottom:0; }
  .modal-section-label { font-family: 'Space Grotesk', sans-serif; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:.8rem; }
  .modal-section-label::before { content:''; display:inline-block; width:16px; height:1px; }
  .modal-section-text { font-family: 'Space Grotesk', sans-serif; font-weight:500; font-size:1rem; line-height:1.85; letter-spacing:.015em; color:rgba(237,233,226,.78); }
      /* .modal-section-text { font-family:'Iosevka Charon',sans-serif; font-weight:500; font-size:1rem; line-height:1.85; letter-spacing:.015em; color:rgba(237,233,226,.78); } */
  .modal-section-text strong { color:var(--text); font-weight:600; }

  .modal-visual { border-left:1px solid var(--border); position:relative; overflow:hidden; min-height:400px; }
  .modal-canvas { width:100%; height:100%; display:block; }
  .modal-visual-label { position:absolute; bottom:2rem; left:2rem; font-family:'Space Mono',monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(92,89,82,.6); z-index:2; }

  .modal-footer { padding:2rem 3.5rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:2rem; }
  .modal-nav-btn { font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); background:none; border:none; cursor:none; transition:color .3s; display:flex; align-items:center; gap:.8rem; }
  .modal-nav-btn:hover { color:var(--accent); }
  .modal-counter { font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.1em; color:var(--muted); }

  /* ── RESPONSIVE ── */
  @media (max-width:900px) {
    nav { padding:1.4rem; }
    .nav-links .nav-link:not(:last-child) { display:none; }
    #hero { padding:7rem 1.4rem 4rem; }
    .wrap { padding:0 1.4rem; }
    .sec { padding:6rem 0; }
    .tgrid { grid-template-columns:1fr; gap:3rem; }
    .process-top { flex-direction:column; align-items:flex-start; }
    .proc-num { font-size:2rem; min-width:72px; }
    .work-grid { grid-template-columns:1fr; }
    .wc:first-child { grid-column:auto; }
    .agrid { grid-template-columns:1fr; gap:3rem; }
    .about-badge{right: -10px!important;}
    /*.about-photo-wrap { display:none; }*/
    .ft-inner { flex-direction:column; gap:1.2rem; text-align:center; padding:2rem 1.4rem; }
    .modal-body { grid-template-columns:1fr; }
    .modal-visual { min-height:220px; border-left:none; border-top:1px solid var(--border); }
    .modal-header,.modal-tags,.modal-story,.modal-footer { padding-left:1.5rem; padding-right:1.5rem; }
  }

  .kawaii img{
    height: 200px;
    width: 100%;
    object-fit: cover;
  }

  .zibu img{
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .cloudbox img{
    height: 250px;
    width: 100%;
    object-fit: cover;
  }

  /* HERO */
#hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #0f0f0f;
  padding: 120px 80px;
}

/* RIGHT SIDE BG */
.hero-bg-right{
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
}

/* CANVAS */
#threeCanvas{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: .95;
}

/* DARK OVERLAY */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      to left,
      rgba(15,15,15,.15),
      rgba(15,15,15,.88) 55%
    );
}

/* CONTENT */
.hero-content{
  position: relative;
  z-index: 5;
}

/* EYEBROW */
.hero-eyebrow{
  color: #9d9484;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  margin-bottom: 40px;
}

.hero-eyebrow em{
  color: #e9dfcc;
  font-style: normal;
}

/* HEADING */
.hero-h1{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ln{
  overflow: hidden;
}

.lm{
  display: block;
  color: #f5efe4;
  font-size: clamp(70px, 9vw, 160px);
  line-height: .9;
  font-weight: 800;
  transform: translateY(110%);
  animation: reveal .9s cubic-bezier(.16,1,.3,1) forwards;
}

.ln:nth-child(2) .lm{
  animation-delay: .12s;
}

.ln:nth-child(3) .lm{
  animation-delay: .24s;
}

.hero-h1 em{
  color: #c9a96e;
  font-style: normal;
}

/* FOOT */
.hero-foot{
  margin-top: 70px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hero-role{
  color: #8f8778;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.hero-role em{
  color: #f4ebdc;
  font-style: normal;
}

.hero-name-txt{
  color: #fff;
  margin-top: 10px;
  font-size: 18px;
}

/* SCROLL */
.hero-scroll{
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8f8778;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .2em;
}

.scroll-bar{
  width: 45px;
  height: 1px;
  background: rgba(255,255,255,.2);
  position: relative;
  overflow: hidden;
}

.scroll-bar::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #c9a96e;
  animation: scrollLine 2s infinite;
}

/* ANIMATION */
@keyframes reveal{
  to{
    transform: translateY(0);
  }
}

@keyframes scrollLine{

  0%{
    transform: translateX(-100%);
  }

  100%{
    transform: translateX(100%);
  }
}

/* RESPONSIVE */
@media(max-width: 991px){

  #hero{
    padding: 100px 24px;
  }

  .hero-bg-right{
    width: 100%;
    opacity: .4;
  }

  .hero-foot{
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .lm{
    font-size: clamp(54px, 14vw, 90px);
  }
}

@media(max-width: 767.99px){
.lm{
    font-size: 60px;
  }
}

@media(max-width: 576px){
.work-top{
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.lm{
    font-size: 40px;
  }
  .pl-word{
    font-size: 30px;
  }
.about-badge{
    min-width: 130px;
    bottom: -75px;
    padding: 15px 20px;
}
.about-badge-num{
    font-size: 30px;
}
}