*{box-sizing:border-box}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2')}
body{margin:0;background:#EDEAE4;color:#14161A;font-family:'Inter',system-ui,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
html{scroll-behavior:smooth}

.nav-link{border-bottom:1px solid transparent;padding-bottom:2px;transition:color .15s,border-color .15s}
.nav-link:hover{color:#C8361F;border-color:#C8361F}
.nav-link.active{border-bottom:1px solid #14161A}
.footer-link:hover{color:#C8361F}
.collapse-link{transition:color .15s}
.collapse-link:hover{color:#F2C12E}

.top-row{transition:background .15s ease}
.top-row:hover{background:rgba(58,90,120,.06)}
.top-row:hover .arrow{opacity:1}
.arrow{opacity:0;transition:opacity .15s}

.acc-row{transition:background .15s ease}
.acc-row:hover{background:rgba(255,255,255,.04)}

.belly-btn{transition:border-color .15s,color .15s}
.belly-btn:hover{border-color:#F2C12E;color:#F2C12E}

.resume-link{transition:border-color .15s,background .15s}
.resume-link:hover{border-color:#F2C12E;background:rgba(242,193,46,.06)}

.email-link:hover{color:#C8361F}

.channel-row{transition:background .15s}
.channel-row:hover .channel-arrow{opacity:1;transform:translateX(4px)}
.channel-arrow{opacity:0;transition:opacity .15s,transform .15s}

.slider-box{position:relative;min-width:0;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:#1a1c20}
.slider-track{display:flex;height:100%;transition:transform .3s ease}
.slider-track > div{flex-shrink:0;height:100%;overflow:hidden}
.slider-track img{width:100%;height:100%;object-fit:contain}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:none;background:rgba(0,0,0,.5);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.slider-nav.prev{left:8px}
.slider-nav.next{right:8px}
.slider-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.slider-dot{width:6px;height:6px;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.35)}
.slider-dot.active{background:#fff}

.belly-slider .slider-nav{background:rgba(60,62,66,.7);color:#B8BABD}
.belly-slider .slider-dot{background:rgba(120,122,126,.5)}
.belly-slider .slider-dot.active{background:#B8BABD}

.belly-slider{position:relative;grid-column:1/-1;aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:#1a1c20}
.belly-slider .slider-track img{object-fit:cover;cursor:zoom-in;transition:transform .2s ease}
.belly-slider .slider-track.zoomed img{cursor:zoom-out}

.modal-overlay{display:none;position:fixed;inset:0;z-index:9998;background:rgba(14,15,18,.96);cursor:zoom-out;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-close{position:fixed;top:24px;right:32px;z-index:9999;font-family:'IBM Plex Mono',monospace;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.08em;cursor:pointer;transition:color .15s}
.modal-close:hover{color:#fff}
.modal-overlay img{max-width:92vw;max-height:92vh;object-fit:contain;border-radius:4px;box-shadow:0 32px 80px rgba(0,0,0,.6)}
.modal-overlay .slider-nav{width:44px;height:44px;font-size:20px;background:rgba(255,255,255,.12);cursor:pointer}
.modal-overlay .slider-nav.prev{left:16px}
.modal-overlay .slider-nav.next{right:16px}
.modal-overlay .slider-nav::before{content:'‹'}
.modal-overlay .slider-nav.next::before{content:'›'}
.modal-overlay.modal-muted .slider-nav{background:rgba(60,62,66,.7);color:#B8BABD}

@media (max-width:900px){
  .cs-split{grid-template-columns:1fr!important;gap:28px!important}
  .cs-herotop{grid-template-columns:1fr!important;gap:32px!important}
  .about-grid{grid-template-columns:1fr!important}
  .contact-grid{grid-template-columns:1fr!important;gap:40px!important}
}

@media (max-width:640px){
  .cs-topheader{padding:28px 20px 20px!important;flex-wrap:wrap;gap:16px}
  .cs-topheader nav{gap:18px!important}
  .cs-topsection{padding:0 20px!important}
  .cs-herotop{gap:24px!important}
  .cs-herotop h1{font-size:32px!important}
  .cs-projindex{padding:0 20px!important}
  .cs-projwrap{padding:8px 20px 0!important}
  .cs-projrow{grid-template-columns:64px 1fr!important;gap:12px!important}
  .cs-projrow > div:nth-child(2), .cs-projrow > div:nth-child(4), .cs-projrow > div:nth-child(5){display:none!important}
  .cs-projthumb{width:64px!important;height:48px!important}
  .cs-accwrap{padding:40px 20px 60px!important}
  .cs-accrow{grid-template-columns:44px 1fr 24px!important;gap:12px!important}
  .cs-accrow div:nth-child(2){font-size:20px!important}
  .cs-accordion-content{margin:20px -20px 0!important}
  .cs-header{padding:40px 20px 48px!important}
  .cs-header h2{font-size:32px!important;line-height:1.08!important}
  .cs-split{padding:44px 20px!important}
  .cs-pair{margin:0 20px!important;grid-template-columns:1fr!important}
  .cs-hero{margin:0 20px!important}
  .cs-result{padding:48px 20px!important}
  .cs-resultgrid{grid-template-columns:1fr!important;gap:24px!important}
  .cs-bellygrid{padding:0 20px!important}
  .cs-bellybtns{padding:0 20px!important;flex-wrap:wrap}
  .cs-metarow{flex-wrap:wrap!important;gap:24px!important}
  .about-grid{padding:0 20px!important}
  .contact-grid{padding:40px 20px!important}
}