/* ============================================================
   Muhammad Awais — portfolio
   "Sticker" — neo-brutalist. Hard 3px borders, offset shadows
   with no blur, flat saturated colour, things tilt when touched.

   The whole system lives in the tokens below. Both themes keep
   the same bright cards and the same yellow nav; only the page
   ground, the body text and the border/shadow colour flip.
   ============================================================ */

:root{
  --paper:#FFFCF0;      /* page ground */
  --ink:#111111;        /* borders, shadows, body text */
  --surface:#FFFFFF;    /* cards that sit on the ground */
  --body:#333333;       /* long-form text */
  --soft:#5A5A55;       /* captions and labels */

  --yellow:#FFD400;
  --cobalt:#2447FF;
  --coral:#FF5C4D;

  /* the four stat cards — bright in both themes, always dark text */
  --c1:#FFD400; --c2:#B5F1CC; --c3:#C9D6FF; --c4:#FFC9C2;
  --on-c:#111111;

  --bd:3px;                       /* border width */
  --sh:6px;                       /* shadow offset */
  --f:"Bricolage Grotesque", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121212;
    --ink:#F5F1E3;
    --surface:#1D1D1A;
    --body:#D9D5C8;
    --soft:#9A968B;
    --c1:#FFD400; --c2:#6BE0A0; --c3:#93AEFF; --c4:#FF8C7E;
    --on-c:#111111;
  }
}
:root[data-theme="dark"]{
  --paper:#121212;
  --ink:#F5F1E3;
  --surface:#1D1D1A;
  --body:#D9D5C8;
  --soft:#9A968B;
  --c1:#FFD400; --c2:#6BE0A0; --c3:#93AEFF; --c4:#FF8C7E;
  --on-c:#111111;
}

/* ============ base ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f); font-size:16px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.05; text-wrap:balance}
p{margin:0}
svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.4}

.shell{width:100%; max-width:1180px; margin:0 auto; padding-inline:clamp(16px,4vw,30px)}
/* Full-bleed, so every divider rule on the page runs edge to edge — the same
   as the ticker, the contact block and the footer. The inner .shell holds the
   content to the grid. */
.section{padding-block:clamp(38px,6vw,72px); border-top:var(--bd) solid var(--ink)}
.section > .shell{padding-inline:clamp(16px,4vw,30px)}

.skip{
  position:absolute; left:-9999px; top:10px; z-index:99;
  background:var(--yellow); color:#111; border:var(--bd) solid #111;
  padding:9px 16px; font-weight:700; box-shadow:4px 4px 0 #111;
}
.skip:focus{left:14px}
:focus-visible{outline:3px solid var(--cobalt); outline-offset:3px}

/* ============ nav ============ */
.nav{
  position:sticky; top:0; z-index:60;
  background:var(--yellow); color:#111;
  border-bottom:var(--bd) solid #111;
}
.nav__in{
  width:100%; max-width:1180px; margin:0 auto;
  padding:11px clamp(16px,4vw,30px);
  display:flex; align-items:center; gap:12px;
}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15.5px; letter-spacing:-.03em}
.brand__mark{
  width:30px; height:30px; flex:0 0 30px; background:#111; color:var(--yellow);
  display:grid; place-items:center; font-size:12px; font-weight:800; letter-spacing:0;
  border:2px solid #111;
}
.brand__name{text-transform:uppercase}

.nav__links{display:flex; gap:8px; margin-left:auto; align-items:center}
.nav__end{display:flex; gap:8px; margin-left:auto; align-items:center}
.nav__links + .nav__end{margin-left:0}

/* the chip is the whole design in miniature: border, offset shadow, tilt */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  border:2px solid #111; background:var(--paper); color:var(--ink);
  padding:6px 13px; font-size:13px; font-weight:700; font-family:inherit;
  box-shadow:3px 3px 0 #111; cursor:pointer;
  transition:transform .14s, box-shadow .14s, background .14s;
}
.chip:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 #111}
.chip:active{transform:translate(1px,1px); box-shadow:2px 2px 0 #111}
.chip--on{background:var(--surface)}
.chip--icon{padding:6px; width:32px; height:32px; justify-content:center}
.chip--icon svg{width:16px; height:16px}
.ic-moon{display:none}
:root[data-theme="dark"] .ic-sun{display:none}
:root[data-theme="dark"] .ic-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ic-sun{display:none}
  :root:not([data-theme="light"]) .ic-moon{display:block}
}
.burger{display:none}

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:var(--bd) solid var(--ink); background:var(--coral); color:#fff;
  padding:13px 26px; font-size:16px; font-weight:800; letter-spacing:-.01em;
  box-shadow:var(--sh) var(--sh) 0 var(--ink); font-family:inherit; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.btn:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink)}
.btn--paper{background:var(--paper); color:var(--ink)}
.btn--blue{background:var(--cobalt); color:#fff}
.btn--yellow{background:var(--yellow); color:#111}
.btn--sm{padding:9px 18px; font-size:14px; box-shadow:4px 4px 0 var(--ink)}
.btn--sm:hover{box-shadow:6px 6px 0 var(--ink)}
.btn__ic{width:18px; height:18px; flex:0 0 18px}
/* On a narrow phone the number won't fit in the button — drop to the label
   alone; the link still opens the right chat. */
@media (max-width:520px){ .wa-num{display:none} }

/* ============ hero ============ */
.hero{padding-block:clamp(34px,6vw,74px) clamp(28px,4vw,48px)}
.kick{
  display:inline-block; border:var(--bd) solid var(--ink); background:var(--cobalt); color:#fff;
  padding:7px 15px; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink); transform:rotate(-1.6deg); margin-bottom:clamp(20px,3vw,30px);
}
.hero__h{font-size:clamp(34px,7.4vw,86px); letter-spacing:-.045em; max-width:19ch; line-height:.98}
.hero__h mark{
  background:var(--yellow); color:#111; padding:0 .1em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.hero__h em{font-style:normal; color:var(--coral)}
.hero__sub{
  margin-top:clamp(20px,3vw,30px); font-size:clamp(16px,1.8vw,19px);
  line-height:1.6; max-width:50ch; color:var(--body);
}
.hero__cta{display:flex; gap:14px; margin-top:clamp(26px,3.4vw,36px); flex-wrap:wrap}
.hero__trust{
  margin-top:clamp(22px,3vw,32px); font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--soft);
}

/* ============================================================
   avatar — the real photo, framed like everything else on the page.
   Base rules first, responsive overrides last: put the media query
   above these and it loses the cascade at equal specificity.
   ============================================================ */
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(210px,25vw,300px);
  gap:clamp(22px,4vw,54px); align-items:center;
}
.avatar{position:relative; width:100%; max-width:300px; justify-self:end}

.avatar__frame{
  aspect-ratio:1; overflow:hidden;
  border:var(--bd) solid var(--ink); background:var(--c3);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  animation:av-float 6s ease-in-out infinite;
  transition:transform .18s, box-shadow .18s;
}
.avatar__frame img{display:block; width:100%; height:100%; object-fit:cover}
.avatar:hover .avatar__frame{
  animation-play-state:paused;
  transform:translate(-3px,-3px) rotate(-1deg); box-shadow:10px 10px 0 var(--ink);
}
/* barely-there drift, so the hero isn't completely static */
@keyframes av-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(-.5deg)}
}

.avatar__bubble{
  position:absolute; top:-16px; left:-12px; z-index:2;
  border:var(--bd) solid var(--ink); background:var(--yellow); color:#111;
  padding:8px 17px; font-size:clamp(15px,1.8vw,20px); font-weight:800; letter-spacing:-.02em;
  box-shadow:4px 4px 0 var(--ink); transform:rotate(-6deg);
  animation:av-pop 6s ease-in-out infinite;
}
@keyframes av-pop{
  0%{transform:rotate(-6deg) scale(1)}
  6%{transform:rotate(-6deg) scale(1.16)}
  16%{transform:rotate(-6deg) scale(1)}
  100%{transform:rotate(-6deg) scale(1)}
}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; gap:clamp(22px,4vw,32px)}
  .avatar{
    order:-1; justify-self:start;
    width:clamp(148px,44vw,200px); max-width:none; margin-left:14px;
  }
  .avatar__bubble{padding:6px 13px; font-size:15px}
}

@media (prefers-reduced-motion: reduce){
  .avatar__frame, .avatar__bubble{animation:none}
}

/* ============ ticker ============ */
.ticker{
  border-top:var(--bd) solid var(--ink); border-bottom:var(--bd) solid var(--ink);
  background:var(--yellow); color:#111; overflow:hidden; padding:11px 0;
}
.ticker__t{display:flex; gap:26px; width:max-content; animation:tick 26s linear infinite}
.ticker__t span{
  display:flex; align-items:center; gap:26px; white-space:nowrap;
  font-size:clamp(15px,2vw,22px); font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
}
.ticker__t span::after{content:"★"; font-size:.6em; color:var(--coral)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============ stats ============ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding-block:clamp(28px,4vw,48px);
}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:430px){ .stats{grid-template-columns:1fr} }
.stat{
  border:var(--bd) solid var(--ink); padding:20px 18px; color:var(--on-c);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  transition:transform .16s, box-shadow .16s;
}
.stat:hover{transform:translate(-3px,-3px) rotate(-1deg); box-shadow:10px 10px 0 var(--ink)}
.stat:nth-child(1){background:var(--c1)}
.stat:nth-child(2){background:var(--c2)}
.stat:nth-child(3){background:var(--c3)}
.stat:nth-child(4){background:var(--c4)}
.stat__n{
  display:block; font-size:clamp(34px,5.4vw,56px); font-weight:800;
  letter-spacing:-.05em; line-height:.92; font-variant-numeric:tabular-nums;
}
.stat__n--word{font-size:clamp(26px,3.6vw,40px)}
.stat p{margin-top:11px; font-size:14px; font-weight:600; line-height:1.4}

/* ============ section headings ============ */
.sec-h{margin-bottom:clamp(24px,3.4vw,40px)}
.sec-h h2{
  display:inline; font-size:clamp(26px,4.6vw,46px); letter-spacing:-.04em;
  border-bottom:7px solid var(--yellow); padding-bottom:2px;
}
.sec-h p{margin-top:18px; font-size:16.5px; color:var(--body); max-width:58ch; line-height:1.6}

/* ============ what I do ============ */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:880px){ .tiles{grid-template-columns:1fr} }
.tile{
  border:var(--bd) solid var(--ink); background:var(--surface);
  padding:22px; box-shadow:var(--sh) var(--sh) 0 var(--ink);
  transition:transform .16s, box-shadow .16s;
}
.tile:hover{transform:translate(-3px,-3px) rotate(.7deg); box-shadow:10px 10px 0 var(--ink)}
.tile__ic{
  width:48px; height:48px; border:2px solid #111; display:grid; place-items:center;
  padding:11px; margin-bottom:18px; color:#111;
}
.tile:nth-child(1) .tile__ic{background:var(--c1)}
.tile:nth-child(2) .tile__ic{background:var(--c2)}
.tile:nth-child(3) .tile__ic{background:var(--c3)}
.tile h3{font-size:21px; margin-bottom:11px; letter-spacing:-.03em}
.tile p{font-size:15px; line-height:1.62; color:var(--body)}

/* ============ work ============ */
.works{display:grid; gap:16px}
.work{
  border:var(--bd) solid var(--ink); background:var(--surface);
  padding:20px 22px; box-shadow:var(--sh) var(--sh) 0 var(--ink);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start;
  transition:transform .16s, box-shadow .16s;
}
.work:hover{transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink)}
@media (max-width:560px){ .work{grid-template-columns:1fr; gap:12px} }
.work__n{
  width:38px; height:38px; flex:0 0 38px; border:2px solid #111;
  background:#111; color:var(--yellow); display:grid; place-items:center;
  font-weight:800; font-size:15px;
}
.work__kick{
  font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--coral); margin-bottom:7px;
}
.work h3{font-size:clamp(18px,2.4vw,25px); letter-spacing:-.032em; margin-bottom:10px; line-height:1.12}
.work p{font-size:15px; line-height:1.65; color:var(--body); max-width:66ch}
.wins{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:16px 0 0}
.wins li{
  border:2px solid var(--ink); background:var(--paper); padding:5px 11px;
  font-size:12.5px; font-weight:700;
}
.wins li b{color:var(--coral)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.tag{
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  padding:4px 11px; font-size:12.5px; font-weight:600;
}

/* ============ story ============ */
.timeline{list-style:none; margin:0; padding:0; display:grid; gap:16px; counter-reset:tl}
.timeline li{
  counter-increment:tl; border:var(--bd) solid var(--ink); padding:20px 22px;
  box-shadow:var(--sh) var(--sh) 0 var(--ink); color:var(--on-c);
  transition:transform .16s, box-shadow .16s;
}
.timeline li:hover{transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink)}
.timeline li:nth-child(1){background:var(--c3)}
.timeline li:nth-child(2){background:var(--c2)}
.timeline li:nth-child(3){background:var(--c1)}
.tl__year{
  display:inline-block; border:2px solid #111; background:#111; color:#FFFCF0;
  padding:4px 12px; font-size:12px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:14px;
}
.timeline h3{font-size:clamp(19px,2.6vw,26px); letter-spacing:-.032em; margin-bottom:11px}
.timeline li > p:last-child{font-size:15px; line-height:1.65; max-width:66ch; font-weight:500}

/* ============ toolbox ============ */
.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:900px){ .tools-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .tools-grid{grid-template-columns:1fr} }
.tools{
  border:var(--bd) solid var(--ink); background:var(--surface); padding:20px;
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
}
.tools h3{font-size:17px; letter-spacing:-.025em; margin-bottom:14px}

/* ============ credentials ============ */
.creds{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
@media (max-width:760px){ .creds{grid-template-columns:1fr} }
.cred{border:var(--bd) solid var(--ink); background:var(--paper); padding:18px 20px}
.cred__label{
  font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--coral); margin-bottom:9px;
}
.cred__main{font-size:19px; font-weight:800; letter-spacing:-.028em}
.cred__sub{margin-top:5px; font-size:14px; color:var(--soft); line-height:1.45; font-weight:500}

/* ============ contact ============ */
.contact{
  border-top:var(--bd) solid var(--ink);
  background:var(--cobalt); color:#fff;
  padding-block:clamp(38px,6vw,72px);
}
.contact h2{font-size:clamp(28px,5.4vw,62px); letter-spacing:-.045em; max-width:22ch}
.contact__sub{margin-top:20px; font-size:clamp(16px,1.8vw,18.5px); line-height:1.6; max-width:48ch; color:#E6E9FF}
.contact__l{display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,3.4vw,38px)}
.contact .btn{border-color:#111}
.contact .btn{box-shadow:var(--sh) var(--sh) 0 #111}
.contact .btn:hover{box-shadow:9px 9px 0 #111}

/* ============ footer ============ */
.foot{border-top:var(--bd) solid var(--ink); padding-block:22px}
.foot__in{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:13.5px; font-weight:600; color:var(--soft);
}

/* ============ reveal ============ */
/* Scoped to .js: if JavaScript never runs, nothing is ever hidden. */
.js [data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .42s ease, transform .48s cubic-bezier(.2,.9,.3,1)}
.js [data-reveal].in{opacity:1; transform:none}

/* ============ résumé preview page ============ */
.cv{padding-block:clamp(30px,5vw,58px) clamp(34px,5vw,64px)}
.cv__head{max-width:62ch; margin-bottom:clamp(26px,4vw,42px)}
.cv__head h1{font-size:clamp(32px,6vw,60px); letter-spacing:-.045em; margin-top:4px}
.cv__sub{margin-top:18px; font-size:17px; color:var(--body); line-height:1.6}
.cv__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px}
.cv__meta{margin-top:20px; font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--soft)}
.paper{display:flex; flex-direction:column; gap:clamp(18px,3vw,30px); align-items:center}
.page{margin:0; width:100%; max-width:850px}
.page img{
  display:block; width:100%; height:auto; background:#fff;
  border:var(--bd) solid var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--ink);
}
.page figcaption{
  margin-top:12px; text-align:center; font-size:12px; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--soft);
}
.cv__foot{
  max-width:850px; margin:clamp(34px,5vw,58px) auto 0; padding-top:28px;
  border-top:var(--bd) solid var(--ink); text-align:center;
}
.cv__foot h2{font-size:clamp(22px,3.4vw,32px); letter-spacing:-.035em}
.cv__links{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:20px}

/* ============ small screens ============ */
@media (max-width:820px){
  :root{--bd:3px; --sh:5px}
  .burger{display:grid}
  .nav__links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:12px clamp(16px,4vw,30px) 16px;
    background:var(--yellow); border-bottom:var(--bd) solid #111;
    display:none;
  }
  .nav__links.open{display:flex}
  .nav__links .chip{
    box-shadow:none; border-width:0 0 2px 0; background:transparent;
    padding:13px 0; font-size:16px; justify-content:flex-start;
  }
  .nav__links .chip:hover{transform:none; box-shadow:none}
  .nav__links .chip:last-child{border-bottom:0}
  .nav__end{margin-left:auto}
}
@media (max-width:400px){
  .nav__end .btn--sm{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1; transform:none}
}

/* ============================================================
   résumé page on small screens
   The home page hides .nav__links behind a burger; this page has no burger,
   so its single back-link has to stay visible. The nav's Download button
   steps aside instead — the page's own Download PDF button is right below.
   ============================================================ */
@media (max-width:820px){
  .nav__links--cv{
    position:static; display:flex; flex-direction:row; align-items:center;
    margin:0 0 0 auto; padding:0; background:none; border-bottom:0;
  }
  .nav__links--cv .chip{
    box-shadow:3px 3px 0 #111; border:2px solid #111; background:var(--paper);
    padding:6px 13px; font-size:13px; white-space:nowrap;
  }
  .nav__links--cv .chip:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 #111}
  .cv-navbtn{display:none}
}