/* ============================================================
   PAGES — work.css / about.css / contact.css combined
   ============================================================ */

.page-hero{ padding:clamp(3.2rem,7vw,5.5rem) 0 clamp(2.2rem,4vw,3.2rem); }
.page-hero h1{ font-size:clamp(2.2rem,5.5vw,3.6rem); max-width:18ch; }
.page-hero h1 .acc{ color:var(--acc); }
.page-hero p{ font-size:clamp(.98rem,1.8vw,1.15rem); color:var(--ink2); max-width:56ch; margin-top:1.1rem; line-height:1.7; }

.sec{ padding:clamp(3rem,6vw,5rem) 0; }
.sec + .sec{ box-shadow:0 -1px 0 var(--line); }
.sec-head{ max-width:56ch; margin-bottom:2.4rem; }
.sec-head h2{ font-size:clamp(1.5rem,3.4vw,2.2rem); }
.sec-head p{ font-size:.96rem; color:var(--muted); margin-top:.75rem; line-height:1.7; }

/* ============================================================
   WORK PAGE
   ============================================================ */
.wp-context{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.wp-context p{ font-size:.97rem; color:var(--ink2); line-height:1.8; max-width:52ch; }
.wp-context p+p{ margin-top:.9rem; }
.sector-list{ display:flex; flex-direction:column; }
.sector-item{ display:flex; align-items:center; justify-content:space-between; padding:.95rem 0; box-shadow:0 1px 0 var(--line); font-size:.9rem; font-weight:500; }
.sector-item:first-child{ box-shadow:0 -1px 0 var(--line), 0 1px 0 var(--line); }
.sector-yr{ font-size:.76rem; color:var(--muted); font-family:var(--f-mono); }
@media(max-width:700px){ .wp-context{ grid-template-columns:1fr; gap:2rem; } }

.proj-full{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); margin-bottom:1.1rem; overflow:hidden; transition:background .3s; }
.proj-full-grid{ display:grid; grid-template-columns:minmax(320px, 44%) 1fr; }
.proj-cover{ background:var(--bg2); overflow:hidden; }
.proj-cover img{ width:100%; height:100%; object-fit:cover; min-height:260px; }
.proj-body{ padding:1.8rem 2rem; }
.proj-num{ font-family:var(--f-mono); font-size:.78rem; color:var(--acc); display:block; margin-bottom:.5rem; }
.proj-body h2{ font-size:clamp(1.35rem,3vw,1.9rem); }
.proj-role{ font-size:.8rem; color:var(--muted); margin-top:.4rem; display:block; }
.lock-badge{
  display:inline-flex; align-items:center; gap:.35em;
  font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  color:#92400E; background:#FEF3C7; padding:.28em .7em; border-radius:100px;
  letter-spacing:.01em; margin-top:.6rem;
}
[data-theme="dark"] .lock-badge{ color:#FCD34D; background:#3D2E0A; }
.lock-badge svg{ width:10px; height:10px; flex-shrink:0; }
.nda-modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,8,20,.55);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.nda-modal-overlay.open{ opacity:1; pointer-events:auto; }
.nda-modal-wrap{ position:relative; }
.nda-modal{
  background:var(--surface); border-radius:20px; box-shadow:var(--shadow-lg);
  max-width:440px; width:100%; padding:2.2rem 2.1rem;
  transform:translateY(14px) scale(.97); transition:transform .3s var(--ease);
}
.nda-modal-overlay.open .nda-modal{ transform:translateY(0) scale(1); }
.nda-modal-icon{
  width:44px; height:44px; border-radius:50%; background:var(--acc-s);
  display:flex; align-items:center; justify-content:center; color:var(--acc); margin-bottom:1.1rem;
}
.nda-modal-icon svg{ width:19px; height:19px; }
.nda-modal h3{ font-size:1.2rem; font-weight:800; letter-spacing:-.01em; }
.nda-modal p{ font-size:.92rem; color:var(--ink2); line-height:1.7; margin-top:.8rem; }
.nda-modal-actions{ display:flex; gap:.7rem; margin-top:1.5rem; flex-wrap:wrap; align-items:center; }
.nda-modal-close{
  position:absolute; top:1.1rem; right:1.1rem;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line2);
  background:var(--surface); color:var(--ink2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, border-color .2s;
  font-size:.9rem; line-height:1;
}
.nda-modal-close:hover{ background:var(--acc); color:#fff; border-color:var(--acc); }
body.modal-open{ overflow:hidden; }
.proj-body p.desc{ font-size:.94rem; color:var(--ink2); line-height:1.78; margin-top:1rem; max-width:62ch; }
.proj-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.proj-tag{ font-size:.7rem; font-weight:600; color:var(--muted); background:var(--bg2); padding:.28em .75em; border-radius:100px; }
.proj-cta{ display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; font-weight:600; color:#0F47FF; margin-top:1.3rem; }
@media(max-width:680px){ .proj-full-grid{ grid-template-columns:1fr; } .proj-cover img{ min-height:180px; } }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-split{ display:grid; grid-template-columns:.62fr 1.38fr; gap:3.5rem; align-items:start; }
.about-avatar-lg{
  width:100%; aspect-ratio:1; border-radius:var(--r); background:var(--bg2); overflow:hidden;
  box-shadow:var(--shadow-lg); position:sticky; top:80px; transition:background .3s;
}
.about-avatar-lg img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(6%); }
.about-text h2{ font-size:clamp(1.5rem,3.2vw,2.1rem); margin-bottom:1.2rem; }
.about-text p{ font-size:.97rem; color:var(--ink2); line-height:1.82; max-width:60ch; }
.about-text p+p{ margin-top:.9rem; }
.about-facts{ margin-top:1.8rem; display:flex; flex-direction:column; gap:0; }
.fact-row{ display:grid; grid-template-columns:130px 1fr; gap:.6rem; padding:.65rem 0; box-shadow:0 1px 0 var(--line); font-size:.88rem; }
.fact-row:first-child{ box-shadow:0 -1px 0 var(--line), 0 1px 0 var(--line); }
.fact-k{ font-family:var(--f-mono); font-size:.76rem; color:var(--muted); }
.fact-v{ color:var(--ink2); }
.fact-v a{ color:#0F47FF; }
.about-actions{ margin-top:2.6rem; }
.about-actions .btn .dl-ico{ font-size:.85em; transition:transform .25s var(--ease); }
.about-actions .btn:hover .dl-ico{ transform:translateY(2px); }
@media(max-width:720px){ .about-split{ grid-template-columns:1fr; gap:2rem; } .about-avatar-lg{ position:static; max-width:180px; } }

/* Experience timeline */
.exp-timeline{ display:flex; flex-direction:column; gap:.7rem; }
.exp-item{
  background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm);
  padding:1.5rem 1.8rem; display:grid; grid-template-columns:150px 1fr; gap:1.6rem; transition:background .3s;
}
.exp-item:hover{ box-shadow:var(--shadow-md); }
.exp-date{ font-family:var(--f-mono); font-size:.76rem; color:var(--muted); line-height:1.5; }
.exp-role h3{ font-size:1rem; font-weight:700; }
.exp-co{ font-size:.8rem; color:var(--acc); font-weight:600; margin-top:.2rem; display:block; }
.exp-role p.desc{ font-size:.88rem; color:var(--muted); margin-top:.6rem; line-height:1.7; }
.exp-skills{ display:flex; flex-wrap:wrap; gap:.32rem; margin-top:.7rem; }
.exp-skill{ font-size:.68rem; color:var(--muted); background:var(--bg2); padding:.22em .6em; border-radius:100px; }
@media(max-width:640px){ .exp-item{ grid-template-columns:1fr; gap:.6rem; } }

/* Education */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.process-card{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:1.7rem 1.5rem; transition:box-shadow .25s, transform .25s var(--ease); }
.process-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.process-card .pn{ font-family:var(--f-mono); font-size:.78rem; color:var(--acc); display:block; margin-bottom:.7rem; }
.process-card h3{ font-size:1.02rem; font-weight:700; margin-bottom:.55rem; letter-spacing:-.01em; }
.process-card p{ font-size:.88rem; color:var(--muted); line-height:1.65; }
@media(max-width:900px){ .process-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .process-grid{ grid-template-columns:1fr; } }
.edu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.edu-card{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:1.6rem 1.7rem; }
.edu-card h4{ font-size:1rem; font-weight:700; }
.edu-card .edu-sub{ font-size:.82rem; color:var(--acc); font-weight:600; margin-top:.3rem; display:block; }
.edu-card .edu-yr{ font-family:var(--f-mono); font-size:.76rem; color:var(--muted); margin-top:.5rem; display:block; }
@media(max-width:640px){ .edu-grid{ grid-template-columns:1fr; } }

/* Skills */
.skill-cloud{ display:flex; flex-wrap:wrap; gap:.55rem; }
.skill-chip{ font-size:.85rem; font-weight:500; color:var(--ink2); background:var(--surface); box-shadow:var(--shadow-sm); padding:.55em 1.1em; border-radius:100px; transition:box-shadow .2s, transform .2s var(--ease); }
.skill-chip:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); color:var(--acc); }
.skill-subhead{
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:1.6rem 0 .9rem;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-hero{ padding:clamp(3.2rem,7vw,5.5rem) 0 clamp(2.2rem,4vw,3.2rem); }
.contact-hero h1{ font-size:clamp(2.2rem,5.5vw,3.6rem); max-width:18ch; }
.contact-hero h1 .acc{ color:var(--acc); }
.contact-hero p{ font-size:clamp(.98rem,1.8vw,1.15rem); color:var(--ink2); max-width:56ch; margin-top:1.1rem; line-height:1.7; }
.contact-split{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
.contact-links{ display:flex; flex-direction:column; gap:.7rem; }
.contact-form{ display:flex; flex-direction:column; gap:1.2rem; }
.cf-field{ display:flex; flex-direction:column; gap:.5rem; }
.cf-field label{ font-family:var(--f-mono); font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.cf-field input, .cf-field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r);
  padding:.9rem 1.1rem; font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:var(--faint); }
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-s); }
.cf-field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.cf-submit{ align-self:flex-start; border:none; cursor:pointer; }
.cf-status{ font-size:.85rem; color:var(--ink2); min-height:1.2em; margin:0; }
.cf-status.success{ color:#16A34A; }
.cf-status.error{ color:#DC2626; }
[data-theme="dark"] .cf-status.success{ color:#4ADE80; }
[data-theme="dark"] .cf-status.error{ color:#F87171; }
@media(max-width:820px){ .contact-split{ grid-template-columns:1fr; gap:2.2rem; } }
.c-link{ background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:1.3rem 1.6rem; display:flex; align-items:center; justify-content:space-between; transition:box-shadow .25s, transform .25s var(--ease); color:var(--ink); }
.c-link:hover{ box-shadow:var(--shadow-lg); transform:translateX(4px); }
.c-link:hover .c-arr{ color:var(--acc); }
.c-label{ font-family:var(--f-mono); font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.3rem; }
.c-val{ font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.c-arr{ font-size:1.05rem; color:var(--faint); transition:color .2s; }

.avail-strip{ display:flex; flex-direction:column; gap:1.8rem; }
.avail-badge{ display:inline-flex; align-items:center; gap:.5em; font-size:.8rem; font-weight:600; background:var(--bg2); padding:.5em 1.1em; border-radius:100px; margin-bottom:1.3rem; }
.avail-badge::before{ content:''; width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.2); display:block; }
.avail-strip h3{ font-size:clamp(1.3rem,2.8vw,1.85rem); margin-bottom:.85rem; }
.avail-strip p{ font-size:.95rem; color:var(--ink2); line-height:1.75; max-width:44ch; }
.avail-list{ display:flex; flex-direction:column; gap:.5rem; width:100%; max-width:560px; }
.avail-row{ background:var(--surface); border-radius:var(--r-sm); box-shadow:var(--shadow-sm); padding:.85rem 1.1rem; display:flex; align-items:center; justify-content:space-between; font-size:.88rem; font-weight:500; }
.badge-open{ font-size:.68rem; font-weight:700; color:#166534; background:#DCFCE7; padding:.25em .7em; border-radius:100px; }
[data-theme="dark"] .badge-open{ background:#0F3320; color:#4ADE80; }
@media(max-width:640px){ .avail-strip{ gap:1.5rem; } }