@import url('https://fonts.googleapis.com/css2?family=Anton+SC&display=swap');

:root{
  --cream:#F1EAD9;
  --cream-2:#E8DEC9;
  --ink:#18130F;
  --ink-soft:#3a332c;
  --crimson:#8C1B1B;
  --crimson-2:#B23A2A;
  --rose:#DDB0A2;
  --line: rgba(24,19,15,0.16);
  --line-strong: rgba(24,19,15,0.35);
  --dark:#100D0B;
  --dark-2:#1a1512;
  --max: 1360px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"Space Mono",monospace;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.nav-open {
  overflow: hidden;
}
::selection{background:var(--crimson); color:var(--cream);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 48px; width:100%;}
.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--crimson);
}
.eyebrow.on-dark{color:var(--crimson-2);}
.mono{font-family:'Space Mono',monospace;}
h1,h2,h3,.display{
  font-family:"Anton SC", sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:0.92;
  text-transform:uppercase;
}
.rule{border:none; border-top:1px solid var(--line); width:100%;}
.rule-strong{border:none; border-top:1.5px solid var(--ink);}
.section{padding:110px 0; position:relative; overflow:hidden;}
.section-head{display:flex; align-items:baseline; gap:18px; margin-bottom:56px;}
.section-head .num{font-family:'Space Mono',monospace; font-size:13px; color:var(--crimson); letter-spacing:0.1em;}
.section-head .rule{flex:1;}
.section-head .label{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.14em; text-transform:uppercase;}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* NAV */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(241,234,217,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:18px 48px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-mark{font-family:'Anton SC',serif; font-weight:200; font-size:24px; letter-spacing:0.04em;}
.nav-menu { display: flex; align-items: center; }
.nav-links{display:flex; gap:36px; list-style:none; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;}
.nav-links a{position:relative; padding-bottom:3px;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--crimson); transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}
.mobile-cta-link { display: none; }
.mobile-resume-link { display: none; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.btn-resume {
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cream);
  background:var(--crimson);
  white-space:nowrap;
  padding: 8px 16px;
  border: 1px solid var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 3px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn-resume:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24,19,15,0.25);
}
.btn-resume svg {
  transition: transform 0.2s ease;
}
.btn-resume:hover svg {
  transform: translateY(2px);
}
.nav-cta{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--crimson); white-space:nowrap; padding: 8px 16px; border: 1px solid var(--crimson); border-radius: 3px; transition: background 0.2s ease, color 0.2s ease;}
.nav-cta:hover { background: var(--crimson); color: var(--cream); }

.nav-toggle{
  display:none; background:transparent; border:none; cursor:pointer;
  width:44px; height:44px; padding:10px; flex-direction:column; justify-content:center; gap:5px;
  z-index:101; margin-right: -10px;
}
.nav-toggle span{
  width:24px; height:2px; background:var(--ink); display:block;
  transition:transform 0.3s ease, opacity 0.3s ease; transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* HERO */

.hero{padding:170px 0 60px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; align-items:center; gap:32px;}
.hero-name{font-size:clamp(44px,8.5vw,132px); word-break:break-word;}
.hero-name .line2{color:var(--ink); display:block; position:relative;}
.hero-role{font-family:'Space Mono',monospace; font-size:15px; letter-spacing:0.08em; text-transform:uppercase; margin-top:22px; color:var(--ink-soft);}
.hero-tags{margin-top:10px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.12em; color:var(--crimson); text-transform:uppercase;}
.hero-visual{position:relative; aspect-ratio:3/4; width:100%;}
.hero-visual .block{position:absolute; inset:0; background:var(--crimson); transform:translate(18px,18px);}
.hero-portrait{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(180deg, rgba(16, 13, 11, 0.35) 0%, rgba(16, 13, 11, 0.75) 100%),
    url('potraita.jpg') center 20% / cover no-repeat;
  border:1px solid var(--line-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; padding: 20px; text-align: center;
}
.hero-portrait .portrait-badge{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.14em; color:var(--crimson-2); text-transform:uppercase; margin-bottom:12px; text-shadow: 0 2px 4px rgba(0,0,0,0.8);}
.hero-portrait .initials{font-family:'Anton SC',serif; font-weight:200; font-size:clamp(70px, 14vw, 120px); color:rgba(241,234,217,0.95); letter-spacing:-0.03em; line-height:1; text-shadow: 0 4px 12px rgba(0,0,0,0.6);}
.hero-portrait .portrait-tag{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; color:rgba(241,234,217,0.65); text-transform:uppercase; margin-top:14px; text-shadow: 0 2px 4px rgba(0,0,0,0.8);}
.hero-bottom{display:flex; justify-content:space-between; align-items:flex-end; margin-top:64px; flex-wrap:wrap; gap:24px;}
.hero-loc{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--ink); display:inline-flex; align-items:center; gap:10px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer; min-height:44px;
}
.btn.primary{background:var(--ink); color:var(--cream);}
.btn.primary:hover{background:var(--crimson); border-color:var(--crimson);}
.btn.ghost:hover{background:var(--ink); color:var(--cream);}
.scroll-cue{writing-mode:vertical-rl; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}

/* INTRO */
.intro-grid{display:grid; grid-template-columns:1.3fr 0.9fr; gap:60px; align-items:center;}
.intro-headline{font-size:clamp(30px,4.6vw,58px);}
.intro-headline .red{color:var(--crimson);}
.intro-sub{margin-top:26px; max-width:480px; font-size:16px; color:var(--ink-soft);}
.intro-flow{display:flex; gap:10px; align-items:center; margin-top:34px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; flex-wrap:wrap;}
.intro-flow span.step{color:var(--ink);}
.intro-flow span.arrow{color:var(--crimson);}
.intro-photo{
  aspect-ratio:4/5;
  background:
    linear-gradient(180deg, rgba(14,12,10,0.2) 0%, rgba(14,12,10,0.85) 100%),
    url('potraita.jpg') center top / cover no-repeat;
  border:1px solid var(--line-strong);
  position:relative; overflow:hidden;
  padding:24px; display:flex; align-items:flex-end;
}
.intro-photo-card {
  position:relative; z-index:2;
  background:rgba(24,19,15,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(241,234,217,0.2);
  padding:20px; color:var(--cream); width:100%;
}
.intro-photo-card .card-badge { font-family:'Space Mono',monospace; font-size:10px; color:var(--crimson-2); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:6px; }
.intro-photo-card .card-title { font-family:'Anton SC',sans-serif; font-size:22px; color:var(--cream); letter-spacing:0.04em; }
.intro-photo-card .card-sub { font-size:12px; color:rgba(241,234,217,0.7); margin-top:4px; line-height:1.4; }
.intro-photo-card .card-metrics { display:flex; gap:20px; margin-top:14px; padding-top:10px; border-top:1px solid rgba(241,234,217,0.15); }
.intro-photo-card .m-val { display:block; font-family:'Anton SC',sans-serif; font-size:18px; color:var(--crimson-2); }
.intro-photo-card .m-lbl { font-family:'Space Mono',monospace; font-size:9px; color:rgba(241,234,217,0.6); text-transform:uppercase; }

/* EXPERIENCE */
.timeline{display:grid; grid-template-columns:120px 1fr; gap:0;}
.tl-row{display:contents;}
.tl-year{font-family:'Anton SC',serif; font-weight:300; font-size:64px; color:var(--ink); position:relative; padding:36px 0;}
.tl-content{border-top:1px solid var(--line); padding:36px 0 36px 40px; position:relative;}
.tl-content:first-of-type{border-top:none;}
.tl-dates{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; color:var(--crimson); text-transform:uppercase;}
.tl-role{font-family:'Anton SC',serif; font-weight:300; font-size:26px; text-transform:uppercase; margin-top:8px;}
.tl-org{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.06em; color:var(--ink-soft); margin-top:4px;}
.tl-desc{margin-top:12px; max-width:520px; color:var(--ink-soft);}
.exp-foot{display:flex; justify-content:space-between; margin-top:40px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); flex-wrap:wrap; gap:12px;}

/* SELECTED WORK */
.work-hero{position:relative; display:grid; grid-template-columns:1fr; margin-bottom:40px;}
.work-stage{position:relative; aspect-ratio:16/8; overflow:hidden; border:1px solid var(--line-strong);}
.work-stage-bg{position:absolute; inset:0; transition:background 0.5s ease;}
.work-stage-overlay{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px;}
.work-stage-title{font-size:clamp(36px,8vw,110px); text-align:center; mix-blend-mode:normal; text-shadow: 0 4px 24px rgba(0,0,0,0.85);}
.work-stage-title .a{color:var(--cream);}
.work-stage-title .b{color:var(--rose);}
.work-info{display:flex; justify-content:space-between; align-items:flex-end; margin-top:24px; gap:20px; flex-wrap:wrap;}
.work-info-left{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); max-width:440px;}
.work-info-left b{color:var(--ink); display:block; font-size:13px; margin-bottom:6px;}
.work-tabs{display:flex; border-top:1px solid var(--ink); margin-top:20px;}
.work-tab{flex:1; padding:22px 20px; border-right:1px solid var(--line); cursor:pointer; transition:background .2s ease; min-height:44px;}
.work-tab:last-child{border-right:none;}
.work-tab:hover{background:var(--cream-2);}
.work-tab.active{background:var(--ink); color:var(--cream);}
.work-tab .n{font-family:'Space Mono',monospace; font-size:12px; color:var(--crimson);}
.work-tab.active .n{color:var(--crimson-2);}
.work-tab .t{font-family:'Anton SC',serif; font-weight:200; font-size:18px; text-transform:uppercase; margin-top:6px;}
.work-tab .cat{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px;}
.work-tab.active .cat{color:var(--rose);}

/* CASE STUDIES */
.case{padding-top:90px; border-top:1px solid var(--line);}
.case:first-child{border-top:none; padding-top:0;}
.case-head{display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start;}
.case-title{font-size:clamp(34px,6vw,80px);}
.case-title .r{color:var(--crimson);}
.case-meta{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--crimson); margin-top:14px;}
.case-desc{margin-top:20px; max-width:480px; color:var(--ink-soft); font-size:16px;}
.case-visual{aspect-ratio:16/10; position:relative; overflow:hidden; border:1px solid var(--line-strong); display:flex; flex-direction:column; justify-content:flex-end; padding:24px;}
.case-visual-badge{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; color:var(--rose); text-transform:uppercase; margin-bottom:8px; text-shadow:0 2px 6px rgba(0,0,0,0.8);}
.case-visual-title{font-family:'Anton SC',serif; font-size:clamp(24px, 4vw, 42px); color:var(--cream); text-transform:uppercase; line-height:1.05; text-shadow:0 4px 14px rgba(0,0,0,0.85);}
.case-visual-tags{font-family:'Space Mono',monospace; font-size:11px; color:rgba(241,234,217,0.85); margin-top:10px; text-transform:uppercase; text-shadow:0 2px 6px rgba(0,0,0,0.8);}

.case-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; border-top:1px solid var(--ink); border-bottom:1px solid var(--line);}
.case-fact{padding:26px 24px 26px 0; border-right:1px solid var(--line);}
.case-fact:last-child{border-right:none;}
.case-fact .k{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--crimson);}
.case-fact .v{font-family:'Anton SC',serif; font-weight:300; font-size:17px; text-transform:uppercase; margin-top:8px; line-height:1.25;}
.case-pillars{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.case-pillars span{font-family:'Anton SC',serif; font-weight:300; font-style:italic; font-size:18px; padding:6px 16px; border:1px solid var(--line); text-transform:uppercase; border-radius:3px; background:rgba(24,19,15,0.03);}
.case-note{margin-top:26px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.05em; color:var(--ink-soft); max-width:520px;}

/* STRATEGY */
.strategy-head{font-size:clamp(32px,6.4vw,86px); max-width:820px;}
.strategy-head .r{color:var(--crimson);}
.strategy-sub{margin-top:24px; max-width:400px; color:var(--ink-soft); font-family:'Space Mono',monospace; font-size:13px; line-height:1.7; float:right; text-transform:none;}
.strategy-steps{display:grid; grid-template-columns:repeat(4,1fr); margin-top:100px; border-top:1px solid var(--ink);}
.step-col{padding:28px 20px 0 0; border-right:1px solid var(--line); position:relative;}
.step-col:last-child{border-right:none;}
.step-num{font-family:'Anton SC',serif; font-weight:200; font-size:40px; color:var(--crimson);}
.step-name{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; margin-top:14px; color:var(--ink);}
.step-items{list-style:none; margin-top:14px; font-size:14px; color:var(--ink-soft);}
.step-items li{padding:4px 0;}
.step-arrow{margin-top:24px; height:1px; background:var(--crimson); position:relative;}
.step-arrow::after{content:'→'; position:absolute; right:-4px; top:-9px; color:var(--crimson);}

/* CONTENT SYSTEM */
.system{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.system-core{aspect-ratio:1; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; position:relative; max-width:340px; width:100%;}
.system-core span{font-family:'Anton SC',serif; font-weight:200; font-size:34px;}
.system-pillars{list-style:none; display:flex; flex-direction:column;}
.system-pillars li{
  display:flex; justify-content:space-between; align-items:center; padding:22px 0; border-bottom:1px solid var(--line);
  font-family:'Anton SC',serif; font-size:28px; font-weight:700; text-transform:uppercase; cursor:default;
  transition:padding-left .2s ease, color .2s ease;
}
.system-pillars li:hover{padding-left:16px; color:var(--crimson);}
.system-pillars li .idx{font-family:'Space Mono',monospace; font-size:12px; color:var(--crimson); font-weight:400;}
.system-formats{margin-top:32px; display:flex; gap:18px; flex-wrap:wrap; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}
.system-formats span::before{content:'— ';}

/* ARCHIVE */
.archive-tabs{display:flex; gap:20px; margin-bottom:44px; flex-wrap:wrap; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;}
.archive-tabs button{background:none; border:none; cursor:pointer; padding:6px 12px; color:var(--ink-soft); font-family:inherit; font-size:inherit; letter-spacing:inherit; min-height:38px; border-radius:3px; transition:all .2s ease;}
.archive-tabs button.active{color:var(--crimson); border-bottom:1.5px solid var(--crimson); background:rgba(140, 27, 27, 0.06);}
.archive-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px;}
.arch-item{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line-strong);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:transform .3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .3s ease;
  border-radius:4px;
}
.arch-item:hover{
  transform:translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.arch-item .arch-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index:1;
}
.arch-item:hover .arch-bg{
  transform:scale(1.06);
}
.arch-item .arch-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(16,13,11,0.25) 0%, rgba(16,13,11,0.85) 100%);
  z-index:2;
  transition:background 0.3s ease;
}
.arch-item:hover .arch-overlay{
  background:linear-gradient(180deg, rgba(16,13,11,0.1) 0%, rgba(16,13,11,0.75) 100%);
}
.arch-item .tag{
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  position:absolute;
  top:16px;
  left:18px;
  z-index:3;
  background:rgba(24,19,15,0.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:3px 9px;
  border-radius:2px;
  border:1px solid rgba(241,234,217,0.25);
  color:var(--cream);
  text-shadow:0 1px 3px rgba(0,0,0,0.8);
}
.arch-item .cap{
  font-family:'Anton SC',serif;
  font-weight:500;
  font-size:16px;
  text-transform:uppercase;
  line-height:1.1;
  position:relative;
  z-index:3;
  color:var(--cream);
  text-shadow:0 2px 10px rgba(0,0,0,0.9);
}
.arch-item.big{grid-column:span 2; grid-row:span 2;}
.arch-item.big .cap{font-size:26px;}
.arch-item.hide{display:none;}

/* VIDEO EDGE - dark */
.dark-section{background:var(--dark); color:var(--cream);}
.dark-section .rule{border-color:rgba(241,234,217,0.15);}
.edge-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center;}
.edge-title{font-size:clamp(32px,6vw,74px); color:var(--cream);}
.edge-title .r{color:var(--crimson-2);}
.edge-sub{margin-top:22px; max-width:420px; color:rgba(241,234,217,0.65);}
.edge-panel{
  border:1px solid rgba(241,234,217,0.18); aspect-ratio:16/10; position:relative;
  background:linear-gradient(160deg,#1a1512,#0a0908); overflow:hidden; padding:24px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.edge-panel .scan{position:absolute; inset:0; background:
  repeating-linear-gradient(0deg, rgba(178,58,42,0.06) 0px, rgba(178,58,42,0.06) 1px, transparent 1px, transparent 34px); pointer-events:none;}
.edge-panel .label{position:absolute; top:16px; left:16px; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; color:var(--crimson-2); text-transform:uppercase;}
.edge-panel .timecode{position:absolute; bottom:16px; right:16px; font-family:'Space Mono',monospace; font-size:11px; color:rgba(241,234,217,0.5);}
.timeline-visual { display:flex; flex-direction:column; gap:12px; margin-top:40px; z-index:2; position:relative; }
.timeline-visual .track { display:flex; align-items:center; gap:10px; font-family:'Space Mono',monospace; font-size:11px; color:rgba(241,234,217,0.5); }
.timeline-visual .clip { padding:8px 14px; background:rgba(140, 27, 27, 0.4); border:1px solid var(--crimson-2); color:var(--cream); font-size:11px; text-transform:uppercase; border-radius:2px; font-family:'Space Mono',monospace; }
.timeline-visual .clip.c2 { background:rgba(221, 176, 162, 0.2); border-color:var(--rose); }
.timeline-visual .clip.c4 { background:rgba(255, 255, 255, 0.1); border-color:rgba(255,255,255,0.2); }

.edge-flow{display:flex; align-items:center; gap:14px; margin-top:40px; font-family:'Space Mono',monospace; font-size:13px; letter-spacing:0.1em; text-transform:uppercase; flex-wrap:wrap;}
.edge-flow .arrow{color:var(--crimson-2);}
.edge-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; border-top:1px solid rgba(241,234,217,0.15); padding-top:20px;}
.edge-tags span{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(241,234,217,0.7); padding:4px 10px; background:rgba(241,234,217,0.06); border-radius:2px;}

/* CAPABILITIES */
.cap-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:flex-start;}
.cap-head{font-size:clamp(32px,5.6vw,68px);}
.cap-head .r{color:var(--crimson);}
.cap-sub{margin-top:20px; max-width:340px; color:var(--ink-soft); font-size:15px;}
.cap-groups{margin-top:36px; display:flex; flex-direction:column; gap:16px;}
.cap-group b{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--crimson); display:block; margin-bottom:6px;}
.cap-group span{display:block; font-size:14px; color:var(--ink-soft); line-height:1.7;}
.cap-list{border-top:1px solid var(--ink);}
.cap-row{display:flex; align-items:center; justify-content:space-between; padding:22px 8px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .2s ease, padding-left .2s ease; min-height:44px;}
.cap-row:hover, .cap-row.active{background:var(--crimson); color:var(--cream); padding-left:20px;}
.cap-row .n{font-family:'Space Mono',monospace; font-size:12px;}
.cap-row .t{font-family:'Anton SC',serif; font-weight:500; font-size:20px; text-transform:uppercase;}
.cap-row .arrow{font-family:'Space Mono',monospace;}

/* WHY DHRUV */
.why-grid{display:grid; grid-template-columns:0.9fr 0.8fr 1fr; gap:40px; align-items:center;}
.why-title{font-size:clamp(30px,5.2vw,64px);}
.why-title .r{color:var(--crimson);}
.why-sub{margin-top:20px; max-width:340px; color:var(--ink-soft);}
.diagram{position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; width:100%; max-width:320px; margin:0 auto;}
.diagram .core{width:46%; aspect-ratio:1; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family:'Anton SC',serif; font-weight:200; font-size:22px; text-transform:uppercase; background:var(--cream); z-index:2;}
.diagram .node{position:absolute; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--crimson);}
.diagram .node.top{top:0;}
.diagram .node.bottom{bottom:0;}
.diagram .node.left{left:0;}
.diagram .node.right{right:0;}
.diagram .line{position:absolute; background:var(--crimson);}
.diagram .line.v1{width:1px; height:27%; top:0; left:50%;}
.diagram .line.v2{width:1px; height:27%; bottom:0; left:50%;}
.diagram .line.h1{height:1px; width:27%; left:0; top:50%;}
.diagram .line.h2{height:1px; width:27%; right:0; top:50%;}
.why-list{display:flex; flex-direction:column;}
.why-item{padding:22px 0; border-bottom:1px solid var(--line);}
.why-item:first-child{border-top:1px solid var(--ink);}
.why-item .h{display:flex; align-items:center; gap:14px; font-family:'Anton SC',serif; font-weight:500; font-size:19px; text-transform:uppercase;}
.why-item .h .n{font-family:'Space Mono',monospace; font-size:12px; color:var(--crimson);}
.why-item p{margin-top:8px; margin-left:34px; color:var(--ink-soft); font-size:14px; max-width:400px;}

/* CONTACT */
.contact-section{background:var(--crimson); color:var(--cream);}
.contact-section .rule{border-color:rgba(241,234,217,0.25);}
.contact-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:end;}
.contact-title{font-size:clamp(40px,8.4vw,120px); color:var(--cream);}
.contact-title .soft{color:var(--rose);}
.contact-lead{margin-top:22px; max-width:420px; color:rgba(241,234,217,0.8);}
.contact-cta{margin-top:30px; display:inline-flex; align-items:center; gap:12px; font-family:'Anton SC',serif; font-weight:700; font-size:22px; text-transform:uppercase; border-bottom:2px solid var(--cream); padding-bottom:6px; min-height:44px;}
.contact-card{border:1px solid rgba(241,234,217,0.3); padding:36px;}
.field{padding:16px 0; border-bottom:1px solid rgba(241,234,217,0.25);}
.field .k{font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--rose);}
.field .v{font-family:'Anton SC',serif; font-weight:500; font-size:17px; text-transform:uppercase; margin-top:6px; word-break:break-all;}
.field .v a{border-bottom:1px solid transparent; transition:border-color .2s ease;}
.field .v a:hover{border-color:var(--cream);}
.dl-btn{margin-top:26px; width:100%; text-align:center; padding:16px; border:1px solid var(--cream); font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; display:block; transition:background .2s ease, color .2s ease; min-height:44px;}
.dl-btn:hover{background:var(--cream); color:var(--crimson);}

/* FOOTER */
footer{background:var(--dark); color:var(--cream); padding:70px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.3fr 0.7fr 1fr; gap:40px; padding-bottom:50px;}
.foot-mark{font-size:clamp(36px,6.6vw,80px); color:var(--cream);}
.foot-role{margin-top:14px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(241,234,217,0.6);}
.foot-nav{list-style:none; display:flex; flex-direction:column; gap:14px; font-family:'Anton SC',serif; font-weight:500; font-size:20px; text-transform:uppercase;}
.foot-nav a{color:rgba(241,234,217,0.85);}
.foot-nav a:hover{color:var(--crimson-2);}
.foot-contact{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em; display:flex; flex-direction:column; gap:18px; text-align:right;}
.foot-contact .k{color:rgba(241,234,217,0.5); text-transform:uppercase; margin-bottom:4px;}
.foot-contact a{word-break:break-all;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(241,234,217,0.5); padding-top:24px; border-top:1px solid rgba(241,234,217,0.12); flex-wrap:wrap; gap:12px;}

/* RESPONSIVE STYLES */
@media (max-width: 980px){
  .wrap{padding:0 24px;}
  .section{padding:80px 0;}
  .section-head{margin-bottom:36px;}
  
  /* Mobile Navigation Drawer */
  .nav-inner { padding: 16px 24px; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }
  .nav-menu {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(241, 234, 217, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 24px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 99;
  }
  .nav-menu.open {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 28px;
    font-size: 20px;
  }
  .btn-resume { display: none; }
  .mobile-cta-link {
    display: block;
    color: var(--crimson);
    font-weight: 700;
  }
  .mobile-resume-link {
    display: block;
    color: var(--crimson);
    font-weight: 700;
  }

  .hero{padding-top:130px;}
  .hero-grid, .intro-grid, .system, .edge-grid, .cap-grid, .why-grid, .contact-grid, .case-head{grid-template-columns:1fr; gap:36px;}
  .hero-visual{aspect-ratio:16/9; max-height:280px;}
  .hero-visual .block{transform:translate(10px, 10px);}
  
  .intro-photo{aspect-ratio:16/9; min-height:240px;}
  .strategy-sub{float:none; max-width:100%; margin-top:16px;}
  .strategy-steps{grid-template-columns:1fr 1fr; margin-top:48px;}
  .strategy-steps .step-col{border-bottom:1px solid var(--line); padding-bottom:24px; padding-right:0; border-right:none;}
  .strategy-steps .step-col:nth-child(odd){border-right:1px solid var(--line); padding-right:20px;}
  .strategy-steps .step-col:nth-child(3), .strategy-steps .step-col:nth-child(4){border-bottom:none;}
  
  .archive-grid{grid-template-columns:repeat(2,1fr);}
  .arch-item.big{grid-column:span 2;}
  
  .work-tabs{
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .work-tab{
    flex: 0 0 220px;
    min-width: 220px;
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  
  .foot-grid{grid-template-columns:1fr; gap:36px;}
  .foot-contact{text-align:left;}
  .case-facts{grid-template-columns:1fr;}
  .case-fact{border-right:none; border-bottom:1px solid var(--line); padding:18px 0;}
  .case-fact:last-child{border-bottom:none;}
  
  .diagram{max-width:280px; margin:20px auto;}
  .diagram .node.left{left:0;}
  .diagram .node.right{right:0;}
}

@media (max-width: 768px) {
  .wrap { padding: 0 18px; }
  .scroll-cue { display: none; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 40px; }
  .hero-ctas { width: 100%; flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  
  .timeline { display: flex; flex-direction: column; gap: 24px; }
  .tl-year { font-size: 40px; padding: 0; color: var(--crimson); }
  .tl-content { border-top: 1px solid var(--line); padding: 16px 0 0 0; }
  .tl-content:first-of-type { border-top: 1px solid var(--line); }
  
  .why-item p { margin-left: 0; }
  .edge-panel { aspect-ratio: 16/9; min-height: 220px; padding: 16px; }
  .contact-card { padding: 20px; }
}

@media (max-width: 600px) {
  .strategy-steps { grid-template-columns: 1fr; gap: 24px; }
  .strategy-steps .step-col { border-right: none !important; padding-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .strategy-steps .step-col:last-child { border-bottom: none !important; }
  .archive-grid { grid-template-columns: 1fr; }
  .arch-item.big { grid-column: span 1; grid-row: span 1; }
  .system-pillars li { font-size: 22px; }
  .contact-cta { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
  .reveal{opacity:1; transform:none;}
}
:focus-visible{outline:2px solid var(--crimson); outline-offset:3px;}

/* CUSTOM CURSOR */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{
  width:6px; height:6px; border-radius:50%; background:var(--crimson);
  transition:opacity .2s ease, background .2s ease;
}
.cursor-ring{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--crimson);
  display:flex; align-items:center; justify-content:center;
  transition:width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1),
             border-color .28s ease, background .28s ease, opacity .2s ease;
}
.cursor-ring .cursor-label{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--cream); opacity:0; transition:opacity .18s ease; white-space:nowrap;
}
body.cursor-active, body.cursor-active *{cursor:none !important;}
body.cursor-hover .cursor-ring{
  width:74px; height:74px; background:var(--crimson); border-color:var(--crimson);
}
body.cursor-hover .cursor-ring .cursor-label{opacity:1;}
body.cursor-hover .cursor-dot{opacity:0;}
body.cursor-down .cursor-ring{width:30px; height:30px;}
body.cursor-dark .cursor-ring{border-color:var(--cream);}
body.cursor-dark .cursor-dot{background:var(--cream);}

@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{display:none !important;}
  body.cursor-active, body.cursor-active *{cursor:auto !important;}
}