/* Awais Ali Shah — portfolio
   Type: Archivo (structure) + Source Serif 4 (prose)
   Palette: charcoal ink, paper white, sand, one vermilion accent */

:root{
  --ink:#17181C;
  --ink-2:#5A5E66;
  --ink-3:#6E727A;
  --paper:#FFFFFF;
  --sand:#F3F0EA;
  --accent:#E8502A;
  --accent-deep:#C33D19;
  --rule:#DEDAD2;
  --rule-dark:#33353B;
  --shell:min(1180px, 92vw);
  --step:clamp(72px, 9vw, 132px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:19px;
  line-height:1.62;
  font-optical-sizing:auto;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,.sans,.nav,.record,.btn,.eyebrow,.stat,.tag,.lede{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}

h1,h2,h3{margin:0;letter-spacing:-0.028em;font-weight:800;line-height:1.02}
h1{font-size:clamp(44px,5.4vw,70px)}
h2{font-size:clamp(34px,4.6vw,58px)}
h3{font-size:clamp(24px,2.5vw,31px);line-height:1.16;letter-spacing:-0.02em}
h4{font-size:20px;font-weight:700;letter-spacing:-0.01em;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.shell{width:var(--shell);margin:0 auto}
.sec{padding:var(--step) 0;border-top:1px solid var(--rule)}
.sec-first{border-top:0}
.sec-sand{background:var(--sand);border-top:0}
.sec-ink{background:var(--ink);color:#EFEDE8;border-top:0}
.sec-ink h2,.sec-ink h3{color:#fff}

.eyebrow{
  font-size:18px;font-weight:700;letter-spacing:0.01em;
  color:var(--accent);margin:0 0 16px;
}
.sec-ink .eyebrow{color:#FF8A5C}

.lede{font-size:clamp(21px,2.3vw,26px);line-height:1.42;font-weight:500;letter-spacing:-0.015em;color:var(--ink)}
.sec-ink .lede{color:#EFEDE8}
.prose{max-width:66ch}
.muted{color:var(--ink-2)}
.sec-ink .muted{color:#A9ADB5}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  width:var(--shell);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:68px;gap:24px;
}
.brand{
  font-weight:800;font-size:19px;letter-spacing:-0.03em;
  text-decoration:none;white-space:nowrap;
}
.brand span{color:var(--accent)}
.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav-links a{
  font-size:16px;font-weight:600;text-decoration:none;color:var(--ink-2);
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-size:16px;font-weight:700;letter-spacing:-0.01em;
  padding:14px 24px;text-decoration:none;border:1.5px solid var(--ink);
  background:var(--ink);color:#fff;
}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.sec-ink .btn-ghost{color:#fff;border-color:#6A6E76}

/* ---------- accent closer ----------
   One full colour moment per page, on the closing call to action. */
.sec-accent{background:var(--accent);color:#FFF4F0;border-top:0}
.sec-accent h2,.sec-accent h3{color:#fff}
.sec-accent .eyebrow{color:#FFD9CC}
.sec-accent .lede{color:#FFF4F0}
.sec-accent .muted{color:#FFD9CC}
.sec-accent .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.sec-accent .btn-ghost:hover{background:#fff;color:var(--accent);border-color:#fff}
.sec-accent .stats{background:var(--accent-deep);border-color:var(--accent-deep)}
.sec-accent .stat{background:var(--accent-deep)}
.sec-accent .stat span{color:#FFD4C6}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* ---------- hero ---------- */
.hero{padding:clamp(56px,7vw,92px) 0 clamp(44px,5vw,60px)}
.hero h1{max-width:20ch}
.hero .lede{margin-top:26px;max-width:58ch}
.hero-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:end}
.hero-split h1{max-width:16ch}
.hero-split .lede{margin-top:0;max-width:44ch}
.hero-split .btn-row{margin-top:26px}
@media (max-width:900px){.hero-split{grid-template-columns:minmax(0,1fr);align-items:start}.hero-split h1{max-width:none}}

/* ledger of results */
.record{border-top:2px solid var(--ink);margin-top:clamp(46px,6vw,72px)}
.record-row{
  display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.record-co{font-weight:700;font-size:17px;letter-spacing:-0.01em}
.record-what{font-size:17px;color:var(--ink-2);font-weight:500}
.record-num{
  font-size:clamp(24px,3vw,35px);font-weight:800;letter-spacing:-0.035em;
  text-align:right;font-variant-numeric:tabular-nums;
}
.record-num em{font-style:normal;color:var(--accent)}

/* ---------- work cards ---------- */
.cases{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:44px}
.case{
  background:var(--paper);padding:34px 32px;display:grid;
  grid-template-columns:1fr auto;gap:20px;align-items:start;text-decoration:none;
}
.case:hover{background:#FAF8F4}
.case-role{font-size:17px;font-weight:700;color:var(--accent);margin:0 0 10px;font-family:"Archivo",sans-serif}
.case p{font-size:18px;color:var(--ink-2);max-width:60ch;margin:12px 0 0}
.case-go{font-family:"Archivo",sans-serif;font-size:16px;font-weight:700;color:var(--ink-3);white-space:nowrap;padding-top:6px;border-bottom:2px solid var(--rule);display:inline-flex;align-items:center;gap:9px}
.case:hover .case-go{border-bottom-color:var(--accent)}
.case:hover .case-go{color:var(--accent)}

/* ---------- generic grids ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,58px)}
.two-side{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,38px)}
.stack>*+*{margin-top:16px}

/* ---------- capability blocks ---------- */
.cap{border-top:1px solid var(--rule);padding:30px 0;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.cap:first-of-type{border-top:2px solid var(--ink)}
.cap-list{margin:0;padding:0;list-style:none;font-size:18px}
.cap-list li{padding:7px 0 7px 20px;position:relative;color:var(--ink-2)}
.cap-list li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:1.5px;background:var(--accent)}
.cap-proof{font-size:17px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);color:var(--ink);font-weight:600;font-family:"Archivo",sans-serif;letter-spacing:-0.01em}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule-dark);border:1px solid var(--rule-dark);margin-top:44px}
.stat{background:var(--ink);padding:26px 22px}
.stat b{display:block;font-size:clamp(30px,3.7vw,44px);font-weight:800;letter-spacing:-0.035em;color:#fff;line-height:1}
.stat span{display:block;margin-top:10px;font-size:16px;font-weight:500;color:#A9ADB5;line-height:1.35}

/* ---------- case study sections ---------- */
.study{padding:var(--step) 0;border-top:1px solid var(--rule)}
.study-alt{background:var(--sand)}
.study-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.study-head h2{max-width:15ch}
.study-meta{margin:22px 0 0;padding:0;list-style:none;font-family:"Archivo",sans-serif;font-size:16px}
.study-meta li{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--rule)}
.study-meta li b{min-width:88px;font-weight:700}
.study-meta li span{color:var(--ink-2);font-weight:500}

.shots{margin-top:clamp(36px,5vw,58px);display:grid;gap:clamp(22px,3vw,34px)}
.shots-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shot figure{margin:0}
.shot img{border:1px solid var(--rule);background:var(--sand);padding:10px}
.shot figcaption{font-size:16px;color:var(--ink-2);margin-top:10px;line-height:1.45}
/* Even row: sources have different proportions, so crop them to one shape
   and the captions line up instead of stepping down the row. */
.shots-even .shot img{aspect-ratio:16/10;object-fit:cover;width:100%}
.shot figcaption a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--accent);white-space:nowrap}
.shot figcaption a:hover{color:var(--accent)}

/* ---------- before / after slider ---------- */
.ba{margin-top:clamp(32px,4vw,50px)}
.ba-frame{
  position:relative;overflow:hidden;border:1px solid var(--rule);
  aspect-ratio:16/9;background:var(--sand);touch-action:pan-y;
}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.ba-top{clip-path:inset(0 50% 0 0)}
.ba-handle{
  position:absolute;top:0;bottom:0;width:2px;background:var(--accent);left:50%;
  transform:translateX(-1px);pointer-events:none;
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  margin:-22px 0 0 -22px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(255,255,255,.85);
}
.ba-tag{
  position:absolute;top:14px;font-family:"Archivo",sans-serif;font-size:14px;font-weight:700;
  background:rgba(23,24,28,.86);color:#fff;padding:5px 10px;pointer-events:none;
}
.ba-tag-l{left:14px}
.ba-tag-r{right:14px}
.ba-range{width:100%;margin-top:14px;accent-color:var(--accent)}
.ba-hint{font-size:16px;color:var(--ink-2);margin-top:8px}

/* ---------- links list ---------- */
.links{margin:34px 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.links li{border-bottom:1px solid var(--rule)}
.links a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:17px 0;text-decoration:none;font-family:"Archivo",sans-serif;
  font-size:18px;font-weight:600;letter-spacing:-0.01em;
}
.links a:hover{color:var(--accent)}
.links small{font-family:"Archivo",sans-serif;font-size:15px;font-weight:500;color:var(--ink-3);white-space:nowrap}

/* ---------- contact ---------- */
.contact-list{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.contact-list li{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;padding:19px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.contact-list b{font-family:"Archivo",sans-serif;font-size:16px;font-weight:700;display:flex;align-items:center;gap:11px}
.contact-list a{font-family:"Archivo",sans-serif;font-weight:600;font-size:19px;letter-spacing:-0.015em;text-decoration:none;border-bottom:1.5px solid var(--accent)}
.contact-list a:hover{color:var(--accent)}
/* The LinkedIn handle is one long unbreakable token; let it break rather
   than push the page wider than the screen. */
.contact-list a,.contact-list span{overflow-wrap:anywhere}
.contact-list span{font-family:"Archivo",sans-serif;font-weight:600;font-size:19px;letter-spacing:-0.015em}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#A9ADB5;padding:56px 0 44px;font-size:16px}
.foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot a{color:#EFEDE8;text-decoration:none;font-family:"Archivo",sans-serif;font-weight:600;font-size:16px}
.foot a:hover{color:var(--accent)}
.foot-nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-note{font-family:"Archivo",sans-serif;font-size:15px;color:#71757D;margin-top:30px}

/* ---------- fit band ---------- */
.fit{
  margin-top:clamp(38px,5vw,56px);padding-top:clamp(26px,3vw,34px);
  border-top:1px solid var(--rule);
}
.fit-roles{margin:0 0 18px;display:flex;flex-wrap:wrap;gap:9px}
.fit-roles .tag{margin:0;border-color:var(--ink);color:var(--ink);font-weight:700}
.fit-note{font-size:18px;color:var(--ink-2);margin:0;max-width:66ch}

/* ---------- icons ----------
   Monoline, square caps and mitred joins so they sit in the same geometry
   as the rules and borders rather than looking like imported clip art. */
.ico{
  width:30px;height:30px;display:block;
  fill:none;stroke:var(--accent);stroke-width:1.75;
  stroke-linecap:square;stroke-linejoin:miter;
}
.cap-ico{width:40px;height:40px;stroke-width:1.6;margin-bottom:18px}
.ico-sm{width:20px;height:20px;stroke-width:1.9}
.ico-arrow{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:square;stroke-linejoin:miter;
  transition:transform .18s ease;
}
.case:hover .ico-arrow{transform:translateX(4px)}

/* ---------- misc ---------- */
.note{
  border-left:2px solid var(--accent);padding:2px 0 2px 20px;
  font-size:18px;color:var(--ink-2);max-width:62ch;margin-top:26px;
}
.tag{
  display:inline-block;font-size:16px;font-weight:600;color:var(--ink-2);
  border:1px solid var(--rule);padding:5px 11px;margin:0 7px 7px 0;
}
.anchor{scroll-margin-top:132px}

/* ---------- section rail ---------- */
.rail{
  position:sticky;top:68px;z-index:40;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rule);
}
.rail-in{
  width:var(--shell);margin:0 auto;
  display:flex;gap:28px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail-in::-webkit-scrollbar{display:none}
.rail a{
  font-family:"Archivo",sans-serif;font-size:15px;font-weight:700;
  letter-spacing:-0.01em;color:var(--ink-3);text-decoration:none;
  padding:15px 0;white-space:nowrap;border-bottom:2px solid transparent;
}
.rail a:hover{color:var(--ink)}
.rail a.is-current{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:900px){
  .rail{position:static}
  .rail-in{gap:20px}
  .anchor{scroll-margin-top:20px}
}

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

@media (max-width:900px){
  .two,.three,.two-side,.study-head,.cap,.shots-2,.shots-3{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .record-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 14px}
  .record-what{grid-column:1 / -1;order:3;font-size:16px}
  .record-num{order:2;font-size:24px}
  .record-co{font-size:16px}
  .nav-in{height:auto;padding:14px 0;flex-direction:column;align-items:flex-start;gap:12px}
  .nav-links{gap:20px}
  .case{grid-template-columns:minmax(0,1fr)}
  .case-go{padding-top:0}
  body{font-size:18px}
}

@media (max-width:560px){
  .contact-list li{grid-template-columns:minmax(0,1fr);gap:3px}
  .contact-list b{color:var(--ink-2)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}