/* ===========================================================
   Akanksha Pagare — portfolio
   Design system: "Poster Sheet" — dark ground, poster collage,
   Helvetica display + Lato labels.
   =========================================================== */

@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/lato-700.woff2') format('woff2')}

:root{
  --ink:#101014; --panel:#17171d; --panel2:#1c1c23; --line:#2b2b33;
  --peri:#a5a9ff; --verm:#ff4b2e; --gold:#ffd24a;
  --bone:#f0eee6; --mut:#8e8e9b;
  --disp:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --label:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--disp);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--peri);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(16,16,20,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;height:62px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}
nav ul{display:flex;gap:26px;list-style:none;font-family:var(--label);
  font-size:11px;letter-spacing:.16em}
nav ul a{color:var(--mut)}
nav ul a:hover,nav ul a[aria-current="page"]{color:var(--peri)}

/* ---------- home hero ---------- */
.hero{position:relative;padding:70px 0 40px;overflow:hidden}
.h-type .l1,.h-type .l2,.h-type .l3{font-size:clamp(58px,9.1vw,150px);font-weight:800;
  letter-spacing:-.05em;line-height:.88;text-transform:uppercase}
.h-type .l2{color:transparent;-webkit-text-stroke:1.8px var(--peri);padding-left:.46em}
.h-type .amp{color:var(--verm);-webkit-text-stroke:0}
.h-tag{display:inline-flex;align-items:center;margin-top:24px;background:var(--gold);color:var(--ink);
  border-radius:99px;padding:12px 20px 11px;font-family:var(--label);font-size:15px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;transform:rotate(-2deg)}
.h-meta{margin-top:38px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.h-meta p{font-size:clamp(18px,1.7vw,22px);line-height:1.5;max-width:56ch;color:#d9d7ce}
.h-meta p.clients{font-size:17px;letter-spacing:-.005em;color:var(--bone)}
.h-meta p.clients .k{color:var(--mut)}

/* Full-bleed poster row. Each card keeps its own aspect ratio — height is set,
   width follows the image — so nothing is ever cropped. */
.h-imgs{--side-pad:clamp(18px,3vw,56px);--h:clamp(150px,17vw,280px);
  margin-top:56px;width:calc(100vw - (var(--side-pad) * 2));
  margin-left:calc(50% - 50vw + var(--side-pad));
  display:flex;justify-content:center}
/* .h-row shrink-wraps the cards, so the stickers anchor to the cluster, not the viewport */
.h-row{position:relative;display:flex;align-items:center}
.h-imgs .ph{flex:0 0 auto;border-radius:8px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);border:1px solid var(--line)}
/* max-width:none overrides the global img cap, which would otherwise shrink these */
.h-imgs .ph img{width:auto;height:100%;max-width:none;display:block}
.ph.p1{height:calc(var(--h)*.9);transform:rotate(-1.6deg)}
.ph.p2{height:var(--h);margin-left:-38px;transform:rotate(1.2deg);z-index:3}
.ph.p3{height:calc(var(--h)*.85);margin-left:-38px;transform:rotate(-1deg);z-index:2}
.ph.p4{height:calc(var(--h)*.65);margin-left:-42px;transform:rotate(2.4deg);z-index:4}
.stick{position:absolute;z-index:6;font-family:var(--label);font-size:11px;
  letter-spacing:.12em;background:var(--gold);color:var(--ink);padding:9px 15px;
  border-radius:99px;transform:rotate(-4deg);font-weight:700;white-space:nowrap}
.stick.s1{left:26%;top:-24px}
.stick.s2{right:0;bottom:4%;background:var(--peri);transform:rotate(3deg)}

/* ---------- section heads ---------- */
section{padding:84px 0 0}
.shead{display:flex;align-items:center;gap:18px;margin-bottom:32px}
.shead h2{font-size:clamp(30px,4vw,54px);font-weight:800;letter-spacing:-.04em;
  text-transform:uppercase}
.shead .rule{flex:1;height:1px;background:var(--line)}
.shead .count{font-family:var(--label);font-size:11px;letter-spacing:.2em;color:var(--mut)}

/* ---------- featured brief ---------- */
.pp-brief{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;margin-bottom:36px}
.pp-brief p{font-size:15.5px;line-height:1.6;color:#c9c8c0;max-width:56ch}
.lbl{font-family:var(--label);font-size:10px;letter-spacing:.22em;color:var(--peri);
  display:block;margin-bottom:10px;text-transform:uppercase}

/* ---------- poster cards ---------- */
.posters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.poster{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:3/3.6;
  border:1px solid var(--line);transition:transform .25s ease}
.poster:hover{transform:translateY(-6px) rotate(-.5deg)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* wide covers letterbox onto their own backdrop instead of cropping the title.
   Set --fit-bg inline to match the artwork so the bars disappear. */
.poster.fit img{object-fit:contain;background:var(--fit-bg,#131313)}
/* very wide covers keep their left edge, where the headline lives */
.poster.anchor-left img{object-position:left center}
.poster .tag{position:absolute;top:14px;left:14px;background:var(--ink);color:var(--bone);
  font-family:var(--label);font-size:10px;letter-spacing:.16em;padding:7px 11px;
  border-radius:99px;border:1px solid var(--line)}
.poster .tx{position:absolute;left:0;right:0;bottom:0;padding:50px 18px 18px;
  background:linear-gradient(transparent,rgba(16,16,20,.94))}
.poster h4{font-size:20px;font-weight:800;letter-spacing:-.02em}
.poster p{font-size:12px;color:#c3c2ba;margin-top:4px}

/* ---------- work wall ---------- */
.wall{columns:3;column-gap:14px}
.card{break-inside:avoid;margin-bottom:14px;border-radius:8px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);
  transition:transform .25s,border-color .25s;display:block}
.card:hover{transform:translateY(-4px);border-color:#3a3a45}
.card .tx{padding:14px 16px}
.card .meta{font-family:var(--label);font-size:10px;letter-spacing:.16em;
  color:var(--mut);margin-bottom:6px;text-transform:uppercase}
.card h4{font-size:15px;font-weight:700}
.card p{font-size:12px;color:var(--mut);margin-top:4px;line-height:1.5}

/* ---------- capability stickers ---------- */
.capwall{display:flex;flex-wrap:wrap;gap:12px}
.capstick{font-size:clamp(16px,2vw,24px);font-weight:800;text-transform:uppercase;
  letter-spacing:-.01em;padding:14px 22px;border-radius:99px;border:1.5px solid var(--line);
  color:var(--bone);transform:rotate(var(--r,0deg))}
.capstick:nth-child(3n){background:var(--peri);color:var(--ink);border-color:var(--peri);--r:-1.6deg}
.capstick:nth-child(4n){background:var(--verm);color:var(--ink);border-color:var(--verm);--r:1.4deg}
.capstick:nth-child(5n){--r:-1deg}

/* ---------- quote ---------- */
.quote{position:relative;border:1px solid var(--line);border-radius:10px;
  padding:56px 48px;margin-top:84px;background:var(--panel);overflow:hidden}
.quote .big{position:absolute;right:-30px;top:-60px;font-size:280px;font-weight:800;
  color:#1d1d25;line-height:1;pointer-events:none;user-select:none}
.quote blockquote{position:relative;font-size:clamp(24px,3.2vw,42px);font-weight:700;
  letter-spacing:-.03em;line-height:1.15;max-width:26ch;text-wrap:balance}
.quote blockquote em{font-style:normal;color:var(--peri)}
.quote .row{position:relative;display:flex;align-items:center;gap:16px;margin-top:32px}
.quote .row img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.quote .who{font-family:var(--label);font-size:11px;letter-spacing:.18em;
  color:var(--mut);line-height:1.9}
.quote .who b{color:var(--bone)}

/* ===========================================================
   CASE STUDY PAGES
   =========================================================== */
.back{display:inline-block;font-family:var(--label);font-size:11px;letter-spacing:.18em;
  color:var(--mut);padding:34px 0 0}
.back:hover{color:var(--peri)}

.cs-hero{padding:26px 0 0}
.cs-eyebrow{font-family:var(--label);font-size:11px;letter-spacing:.22em;
  color:var(--verm);margin-bottom:20px;text-transform:uppercase}
.cs-hero h1{font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:-.045em;
  line-height:.92;text-wrap:balance;max-width:16ch}
.cs-hero h1 em{font-style:normal;color:var(--peri)}
.cs-sub{font-size:clamp(18px,1.8vw,23px);line-height:1.5;color:#d9d7ce;
  max-width:60ch;margin-top:26px}

.cs-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:44px}
.cs-facts div{background:var(--ink);padding:20px 22px}
.cs-facts dt{font-family:var(--label);font-size:10px;letter-spacing:.2em;
  color:var(--mut);text-transform:uppercase;margin-bottom:8px}
.cs-facts dd{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.4}

.cs-body{padding:76px 0 0}
.cs-block{max-width:72ch}
.cs-block + .cs-block{margin-top:38px}
.cs-block h2{font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.03em;
  margin-bottom:16px;text-wrap:balance}
.cs-block h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.cs-block p{font-size:16.5px;line-height:1.65;color:#cfcdc4}
.cs-block p + p{margin-top:16px}
.cs-block p b,.cs-block strong{color:var(--bone);font-weight:700}
.cs-block ol,.cs-block ul{margin-top:14px;padding-left:0;list-style:none;
  display:flex;flex-direction:column;gap:10px}
.cs-block ol li,.cs-block ul li{font-size:16px;line-height:1.6;color:#cfcdc4;
  padding-left:26px;position:relative}
.cs-block ol{counter-reset:s}
.cs-block ol li{counter-increment:s}
.cs-block ol li::before{content:counter(s);position:absolute;left:0;top:1px;
  font-family:var(--label);font-size:11px;color:var(--verm);font-weight:700}
.cs-block ul li::before{content:"";position:absolute;left:4px;top:10px;width:6px;height:6px;
  border-radius:50%;background:var(--peri)}

.cs-quote{border-left:2px solid var(--verm);padding-left:22px;margin:38px 0;
  max-width:72ch;font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;
  line-height:1.3;text-wrap:balance}

/* galleries */
.gal{margin-top:56px;display:grid;gap:16px;align-items:start}
.gal.one{grid-template-columns:1fr}
.gal.two{grid-template-columns:repeat(2,1fr)}
.gal.three{grid-template-columns:repeat(3,1fr)}
.gal figure{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  overflow:hidden}
.gal img,.gal video{width:100%;height:auto}
.gal figcaption{font-family:var(--label);font-size:11px;letter-spacing:.14em;
  color:var(--mut);padding:12px 16px;border-top:1px solid var(--line);text-transform:uppercase}
.gal.posters6{grid-template-columns:repeat(3,1fr)}
.gal.posters6 figure{background:none;border:0}
.gal.posters6 img{border-radius:8px;border:1px solid var(--line)}

.band{margin-top:70px;padding:44px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.band h2{font-size:clamp(26px,3.6vw,48px);font-weight:800;letter-spacing:-.04em;
  text-transform:uppercase;text-wrap:balance}
.band h2 em{font-style:normal;color:var(--peri)}

.results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.results div{border:1px solid var(--line);border-radius:8px;padding:26px 24px;
  background:var(--panel)}
.results .n{font-size:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-.04em;
  color:var(--peri);font-variant-numeric:tabular-nums}
.results .k{font-family:var(--label);font-size:11px;letter-spacing:.18em;
  color:var(--mut);margin-top:8px;text-transform:uppercase}

.linkout{display:inline-flex;align-items:center;gap:10px;font-family:var(--label);
  font-size:12px;letter-spacing:.16em;border:1px solid var(--line);border-radius:99px;
  padding:12px 20px;margin-top:26px;text-transform:uppercase}
.linkout:hover{background:var(--peri);color:var(--ink);border-color:var(--peri)}

/* next project */
.nextp{margin-top:90px;border-top:1px solid var(--line);padding-top:30px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.nextp .k{font-family:var(--label);font-size:11px;letter-spacing:.2em;color:var(--mut)}
.nextp a{font-size:clamp(24px,3.4vw,44px);font-weight:800;letter-spacing:-.035em;
  text-transform:uppercase}
.nextp a:hover{color:var(--peri)}

/* ---------- about page ---------- */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start}
.about-grid .portrait{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.about-grid .portrait img{filter:grayscale(1) contrast(1.05)}
.beliefs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px}
.belief{border:1px solid var(--line);border-radius:8px;padding:28px 26px;background:var(--panel)}
.belief .k{font-family:var(--label);font-size:10px;letter-spacing:.2em;color:var(--verm);
  text-transform:uppercase;margin-bottom:14px}
.belief h3{font-size:21px;font-weight:800;letter-spacing:-.025em;margin-bottom:10px;
  text-wrap:balance}
.belief p{font-size:14.5px;line-height:1.6;color:#c3c2ba}

/* ---------- experience page ---------- */
.role{display:grid;grid-template-columns:220px 1fr;gap:40px;padding:38px 0;
  border-top:1px solid var(--line)}
.role .co h3{font-size:26px;font-weight:800;letter-spacing:-.03em}
.role .co .what{font-size:13px;color:var(--mut);line-height:1.6;margin-top:10px}
.role .co .when{font-family:var(--label);font-size:11px;letter-spacing:.16em;
  color:var(--verm);margin-top:14px}
.role .body h4{font-size:20px;font-weight:800;letter-spacing:-.02em}
.role .body .paren{font-size:15px;color:var(--mut);font-weight:400;margin-top:2px}
.role .body ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:14px}
.role .body ul li{font-size:15px;line-height:1.6;color:#cfcdc4;padding-left:20px;position:relative}
.role .body ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--peri)}
.role .body ul li b{color:var(--bone)}
.keyproj{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.keyproj p{font-size:14px;line-height:1.65;color:#b9b8b1}
.keyproj p + p{margin-top:10px}
.keyproj b{color:var(--bone)}
.award{margin-top:18px;border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:6px;padding:16px 18px;background:var(--panel)}
.award p{font-size:13.5px;line-height:1.6;color:#c3c2ba}
.award b{color:var(--gold)}

.contact{margin-top:70px;border-top:1px solid var(--line);padding-top:40px}
.contact .k{font-family:var(--label);font-size:11px;letter-spacing:.2em;color:var(--mut)}
.contact a.mail{display:block;margin-top:14px;font-size:clamp(26px,4.4vw,58px);
  font-weight:800;letter-spacing:-.04em}
.contact a.mail:hover{color:var(--peri)}

/* ---------- footer ---------- */
footer{margin-top:90px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:26px 22px;font-family:var(--label);font-size:11px;letter-spacing:.16em;color:var(--mut)}
footer a:hover{color:var(--peri)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .pp-brief{grid-template-columns:1fr}
  .cs-facts{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .role{grid-template-columns:1fr;gap:20px}
  .results{grid-template-columns:1fr}
}
@media(max-width:900px){
  .posters,.gal.two,.gal.three,.gal.posters6{grid-template-columns:1fr}
  .poster{aspect-ratio:16/10}
  .wall{columns:2}
  .beliefs{grid-template-columns:1fr}
  /* below 900px the row becomes a horizontal scroller so cards stay uncropped */
  .h-imgs{width:auto;margin-left:0;justify-content:flex-start;
    overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .h-imgs .ph{transform:none}
  .ph.p1,.ph.p2,.ph.p3,.ph.p4{height:var(--h)}
  .ph.p2,.ph.p3,.ph.p4{margin-left:12px}
  .stick{display:none}
  .gal.posters6{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .wall{columns:1}
  .cs-facts{grid-template-columns:1fr}
  .gal.posters6{grid-template-columns:1fr}
  .quote{padding:36px 24px}
  nav ul{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}