/* =========================================================
   Muhammad Sohail — portfolio
   Palette pulled from the work itself: jobsite yellow,
   pure ink, warm workspace grey.
   ========================================================= */

@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-var.woff2') format('woff2-variations'),
      url('../fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#E8E6E0;
  --paper-2:#DFDCD4;
  --ink:#000000;
  --signal:#F2B705;
  --rule:#C7C3B8;
  --dim:#6E6A60;
  --white:#FFFFFF;

  --shell: clamp(1.25rem, 5vw, 5rem);
  --max: 1560px;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* the hidden attribute must beat any display rule below */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

::selection{ background:var(--signal); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

/* ---------- shared type ---------- */
.section-head{
  font-variation-settings:'wdth' 68,'wght' 800;
  font-size:clamp(2rem,1rem + 4vw,4rem);
  line-height:.96;
  letter-spacing:-.01em;
  margin:0 0 2.5rem;
  text-transform:uppercase;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  background:var(--ink);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}

.wall{
  position:absolute; inset:-8% -2%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.1rem;
  opacity:.42;
}
.wall-col{
  display:flex; flex-direction:column; gap:1.1rem;
  will-change:transform;
  animation:drift 90s linear infinite;
}
.wall-col:nth-child(2){ animation-duration:118s; animation-direction:reverse; }
.wall-col:nth-child(3){ animation-duration:76s; }
.wall-col:nth-child(4){ animation-duration:132s; animation-direction:reverse; }
.wall-col:nth-child(5){ animation-duration:98s; }
.wall-col img{ width:100%; height:auto; filter:grayscale(.15) contrast(1.02); }

@keyframes drift{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(0,-50%,0); }
}
@media (prefers-reduced-motion: reduce){
  .wall-col{ animation:none; }
}

.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(0,0,0,.985) 0%, rgba(0,0,0,.95) 40%, rgba(0,0,0,.72) 72%, rgba(0,0,0,.88) 100%),
    radial-gradient(120% 75% at 12% 88%, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 70%);
}

.hero-inner{
  position:relative;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--shell) clamp(3rem,7vh,6rem);
}

.slab{ max-width:56rem; }

.slab-kicker{
  margin:0 0 1.5rem;
  color:var(--signal);
  font-size:.9rem;
  font-variation-settings:'wdth' 100,'wght' 600;
  letter-spacing:.02em;
}

.slab-name{
  margin:0;
  display:flex; flex-direction:column;
  color:var(--white);
  font-variation-settings:'wdth' 64,'wght' 900;
  font-size:clamp(3.4rem,2rem + 11vw,11rem);
  line-height:.82;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.slab-name span:last-child{ color:var(--signal); }

.slab-role{
  margin:1.75rem 0 0;
  max-width:36ch;
  color:#E4E2DC;
  font-size:clamp(1.05rem,.95rem + .5vw,1.4rem);
  line-height:1.45;
  font-variation-settings:'wdth' 100,'wght' 500;
}

.ledger{
  display:flex; flex-wrap:wrap;
  margin:2.25rem 0 0;
  border-top:1px solid rgba(255,255,255,.25);
}
.ledger-cell{
  padding:1rem 2.25rem 0 0;
  margin-right:2.25rem;
  border-right:1px solid rgba(255,255,255,.18);
}
.ledger-cell:last-child{ border-right:0; margin-right:0; padding-right:0; }
.ledger-cell b{
  display:block;
  color:var(--white);
  font-variation-settings:'wdth' 78,'wght' 800;
  font-size:2.1rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.ledger-cell span{
  display:block; margin-top:.3rem;
  color:#9C988E; font-size:.82rem;
}

.slab-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem; }

.btn{
  display:inline-block;
  padding:.95rem 2rem;
  font-variation-settings:'wdth' 92,'wght' 700;
  font-size:.98rem;
  text-decoration:none;
  border:2px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-signal{ background:var(--signal); color:var(--ink); }
.btn-signal:hover{ background:var(--white); }
.btn-ghost{ border-color:rgba(255,255,255,.45); color:var(--white); }
.btn-ghost:hover{ border-color:var(--signal); color:var(--signal); }
.btn-video{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  background:rgba(242,183,5,.12);
  border-color:var(--signal);
  color:var(--signal);
}
.btn-video:hover{
  background:var(--signal);
  color:var(--ink);
  border-color:var(--signal);
}
.btn-icon{ flex-shrink:0; }

/* =========================================================
   STATEMENT
   ========================================================= */
.statement{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(4rem,10vh,8rem) var(--shell);
}
.statement-grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.statement-lead p:first-child{
  margin:0 0 1.5rem;
  font-variation-settings:'wdth' 88,'wght' 600;
  font-size:clamp(1.4rem,1rem + 1.9vw,2.5rem);
  line-height:1.18;
  letter-spacing:-.01em;
  max-width:22ch;
}
.statement-body{
  margin:0 0 1.15rem;
  max-width:62ch;
  color:#2A2823;
}
.statement-side{ display:grid; gap:2.5rem; }
.capability h2{
  margin:0 0 1rem;
  padding-bottom:.6rem;
  border-bottom:2px solid var(--ink);
  font-variation-settings:'wdth' 90,'wght' 700;
  font-size:1.05rem;
}
.cap-list{ margin:0; padding:0; list-style:none; }
.cap-list li{
  padding:.6rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.98rem;
}
.cap-note{ margin:0; color:var(--dim); max-width:34ch; }
.cap-drive-link{
  display:inline-block;
  color:var(--ink);
  font-variation-settings:'wdth' 96,'wght' 700;
  text-decoration:underline;
  text-decoration-color:var(--signal);
  text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.cap-drive-link:hover{
  color:#000;
  text-decoration-color:var(--ink);
}

/* =========================================================
   INDEX BAR
   ========================================================= */
.index{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-top:2px solid var(--signal);
}
.index-inner{
  display:flex; align-items:center; gap:1.25rem;
  max-width:var(--max); margin:0 auto;
  padding:.85rem var(--shell);
}
.index-label{
  flex:none;
  color:#8D8981;
  font-size:.82rem;
  font-variation-settings:'wdth' 100,'wght' 600;
}
.chips{
  display:flex; gap:.4rem;
  flex-wrap:wrap;
  scrollbar-width:none;
  padding-bottom:1px;
}
@media (max-width: 1240px){
  .chips{ flex-wrap:nowrap; overflow-x:auto; }
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none;
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:#DEDBD3;
  font:inherit;
  font-size:.88rem;
  font-variation-settings:'wdth' 96,'wght' 500;
  padding:.42rem 1rem;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{ border-color:var(--signal); color:var(--signal); }
.chip[aria-pressed="true"]{
  background:var(--signal); border-color:var(--signal); color:var(--ink);
  font-variation-settings:'wdth' 96,'wght' 700;
}
.index-vault-link{
  margin-left:auto;
  flex:none;
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(242,183,5,.14);
  border:1px solid var(--signal);
  color:var(--signal);
  font-size:.84rem;
  font-variation-settings:'wdth' 96,'wght' 600;
  padding:.42rem .95rem;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.index-vault-link:hover{
  background:var(--signal);
  color:var(--ink);
}

/* =========================================================
   WORK
   ========================================================= */
.work{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--shell) clamp(3rem,8vh,6rem);
}

.brand{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2.5rem,6vh,5rem) 0;
  border-bottom:1px solid var(--rule);
}
.brand:last-child{ border-bottom:0; }

.brand-meta{ position:sticky; top:5rem; align-self:start; }
.brand-name{
  margin:0 0 .75rem;
  font-variation-settings:'wdth' 76,'wght' 800;
  font-size:clamp(1.5rem,1.1rem + 1vw,2rem);
  line-height:1.02;
  letter-spacing:-.005em;
}
.brand-facts{ margin:0 0 1rem; padding:0; list-style:none; }
.brand-facts li{
  display:flex; gap:.6rem;
  padding:.35rem 0;
  border-top:1px solid var(--rule);
  font-size:.85rem;
  color:#33312B;
}
.brand-facts li b{
  flex:none; width:4.4rem;
  color:var(--dim);
  font-variation-settings:'wdth' 100,'wght' 500;
}
.brand-note{
  margin:0;
  font-size:.94rem;
  line-height:1.55;
  color:#2A2823;
}

.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(15rem,100%),1fr));
  gap:clamp(.65rem,1.4vw,1.1rem);
  align-content:start;
}

.tile{
  position:relative;
  display:block;
  padding:0; border:0;
  background:var(--white);
  cursor:zoom-in;
  overflow:hidden;
  font:inherit;
  text-align:left;
}
.tile img{
  width:100%; height:auto;
  transition:opacity .2s ease;
}
.tile:hover img{ opacity:.82; }
.tile-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.7rem .8rem;
  background:linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,0));
  color:var(--white);
  font-size:.8rem;
  line-height:1.3;
  opacity:0;
  transform:translateY(.4rem);
  transition:opacity .18s ease, transform .18s ease;
}
.tile:hover .tile-cap,
.tile:focus-visible .tile-cap{ opacity:1; transform:none; }

.empty{ padding:4rem 0; color:var(--dim); }

/* =========================================================
   VIDEO VAULT
   ========================================================= */
.video-vault{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(3rem,8vh,6rem) var(--shell);
}

.video-vault-card{
  background:var(--ink);
  color:var(--white);
  padding:clamp(2rem,5vw,3.75rem);
  border-left:4px solid var(--signal);
  position:relative;
  overflow:hidden;
  background-image:radial-gradient(circle at 90% 12%, rgba(242,183,5,.14) 0%, transparent 48%);
}

.video-vault-topbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:2rem; padding-bottom:1.25rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.vault-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--signal);
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 96,'wght' 700;
}

.vault-pulse{
  width:8px; height:8px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 0 0 rgba(242,183,5,.7);
  animation:vaultPulse 2s infinite;
}

@keyframes vaultPulse{
  0%{ box-shadow:0 0 0 0 rgba(242,183,5,.7); }
  70%{ box-shadow:0 0 0 8px rgba(242,183,5,0); }
  100%{ box-shadow:0 0 0 0 rgba(242,183,5,0); }
}

.vault-status-chip{
  color:#9C988E;
  font-size:.82rem;
  font-variation-settings:'wdth' 100,'wght' 500;
}

.video-vault-body{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.vault-kicker{
  color:var(--signal);
  font-size:.86rem;
  font-variation-settings:'wdth' 100,'wght' 600;
  margin:0 0 .75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.video-vault-title{
  margin:0 0 1rem;
  font-variation-settings:'wdth' 74,'wght' 800;
  font-size:clamp(1.8rem,1.2rem + 2.5vw,3.2rem);
  line-height:1.04;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--white);
}

.video-vault-desc{
  color:#CFCCC4;
  font-size:clamp(.95rem,.9rem + .25vw,1.08rem);
  line-height:1.6;
  margin:0 0 1.75rem;
  max-width:56ch;
}

.video-vault-tags{
  display:flex; flex-wrap:wrap; gap:.5rem;
}

.v-tag{
  display:inline-block;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  color:#E8E6E0;
  font-size:.8rem;
  padding:.35rem .75rem;
  font-variation-settings:'wdth' 96,'wght' 500;
}

.video-vault-action-box{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column; gap:1.1rem;
  text-align:center;
}

.vault-metric b{
  display:block;
  color:var(--signal);
  font-variation-settings:'wdth' 78,'wght' 800;
  font-size:2.2rem; line-height:1;
}

.vault-metric span{
  display:block;
  margin-top:.35rem;
  color:#9C988E;
  font-size:.82rem;
}

.btn-vault{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 1.75rem;
  font-size:1.02rem;
  cursor:pointer;
}

.vault-subtext{
  margin:0;
  color:#78746C;
  font-size:.78rem;
  line-height:1.4;
}

/* =========================================================
   HISTORY
   ========================================================= */
.history{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(4rem,10vh,7rem) var(--shell);
  border-top:2px solid var(--ink);
}
.roles{ margin:0; padding:0; list-style:none; }
.role{
  display:grid;
  grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);
  padding:1.75rem 0;
  border-top:1px solid var(--rule);
}
.role:last-child{ border-bottom:1px solid var(--rule); }
.role-years{
  color:var(--dim);
  font-size:.92rem;
  font-variant-numeric:tabular-nums;
  padding-top:.2rem;
}
.role-body h3{
  margin:0 0 .25rem;
  font-variation-settings:'wdth' 88,'wght' 700;
  font-size:clamp(1.1rem,1rem + .5vw,1.45rem);
  line-height:1.2;
}
.role-org{ margin:0 0 .6rem; color:var(--dim); font-size:.92rem; }
.role-body p:last-child{ margin:0; max-width:60ch; color:#2A2823; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  background:var(--signal);
  color:var(--ink);
}
.contact-inner{
  display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(3.5rem,9vh,6.5rem) var(--shell);
}
.portrait{
  width:100%; height:auto;
  border-radius:50%;
  background:var(--white);
}
.contact-copy h2{
  margin:0 0 1rem;
  font-variation-settings:'wdth' 74,'wght' 800;
  font-size:clamp(1.9rem,1rem + 4vw,4rem);
  line-height:.98;
  letter-spacing:-.015em;
}
.contact-note{ margin:0 0 2rem; max-width:44ch; color:#3A3218; }
.contact-list{ margin:0; padding:0; list-style:none; max-width:34rem; }
.contact-list li{
  display:flex; align-items:baseline; gap:1rem;
  padding:.7rem 0;
  border-top:1px solid rgba(0,0,0,.28);
  font-size:1.02rem;
}
.contact-list li span:first-child{
  flex:none; width:6rem;
  color:#4A4020; font-size:.85rem;
}
.contact-list a{
  font-variation-settings:'wdth' 96,'wght' 600;
  text-decoration:none;
  border-bottom:2px solid rgba(0,0,0,.3);
}
.contact-list a:hover{ border-bottom-color:var(--ink); }
.contact-list .plain{ font-variation-settings:'wdth' 96,'wght' 600; }

.foot{
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:space-between;
  max-width:var(--max);
  margin:0 auto;
  padding:1.25rem var(--shell) 2rem;
  border-top:1px solid rgba(0,0,0,.28);
  font-size:.85rem;
  color:#4A4020;
}
.foot a{ text-decoration:none; border-bottom:1px solid rgba(0,0,0,.35); }

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:120;
  background:rgba(0,0,0,.96);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
}
.lightbox[hidden]{ display:none; }

.lb-figure{
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  gap:1rem;
  max-height:100%;
}
.lb-figure img{
  max-height:78svh;
  width:auto;
  object-fit:contain;
  background:#111;
}
.lb-cap{ text-align:center; color:#CFCCC4; font-size:.9rem; }
.lb-cap b{
  display:block; color:var(--signal);
  font-variation-settings:'wdth' 90,'wght' 700;
  font-size:1rem; margin-bottom:.15rem;
}
.lb-cap em{ display:block; font-style:normal; color:#78746C; font-size:.8rem; margin-top:.35rem; }

.lb-close,.lb-nav{
  position:absolute;
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  cursor:pointer;
  font-family:var(--display);
  line-height:1;
  transition:background .15s ease, border-color .15s ease;
}
.lb-close:hover,.lb-nav:hover{ background:rgba(255,255,255,.12); border-color:var(--signal); }
.lb-close{ top:1rem; right:1rem; width:2.9rem; height:2.9rem; font-size:1.7rem; }
.lb-nav{ top:50%; transform:translateY(-50%); width:2.9rem; height:4.4rem; font-size:2rem; }
.lb-prev{ left:1rem; }
.lb-next{ right:1rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  .wall{ grid-template-columns:repeat(4,1fr); }
  .statement-grid{ grid-template-columns:1fr; gap:3rem; }
  .brand{ grid-template-columns:1fr; }
  .brand-meta{ position:static; max-width:46rem; }
  .contact-inner{ grid-template-columns:minmax(0,10rem) minmax(0,1fr); }
  .video-vault-body{ grid-template-columns:1fr; gap:2.5rem; }
}

@media (max-width: 760px){
  .wall{ grid-template-columns:repeat(3,1fr); gap:.7rem; }
  .wall-col{ gap:.7rem; }
  .ledger-cell{ padding-right:1.25rem; margin-right:1.25rem; }
  .ledger-cell b{ font-size:1.6rem; }
  .index-inner{ flex-wrap:wrap; gap:.75rem; }
  .index-vault-link{ margin-left:0; width:100%; justify-content:center; }
  .video-vault{ padding:clamp(2.5rem,6vh,4rem) var(--shell); }
  .role{ grid-template-columns:1fr; gap:.35rem; }
  .contact-inner{ grid-template-columns:1fr; }
  .portrait{ width:8.5rem; }
  .tiles{ grid-template-columns:repeat(auto-fill, minmax(min(11rem,46%),1fr)); }
  .tile{ background:transparent; }
  .tile-cap{
    position:static;
    opacity:1; transform:none;
    background:none;
    color:#43413A;
    padding:.45rem .1rem .1rem;
    font-size:.74rem;
    display:block;
    line-height:1.32;
  }
  .lb-nav{ width:2.4rem; height:3.4rem; font-size:1.6rem; }
  .lb-prev{ left:.4rem; }
  .lb-next{ right:.4rem; }
}

@media (max-width: 480px){
  .wall{ grid-template-columns:repeat(2,1fr); }
  .slab-actions .btn{ flex:1 1 auto; text-align:center; }
}