/* Graphik — licensed font. Files go in assets/fonts/ (see README there).
   Missing files fall back silently to Inter. */
@font-face{font-family:'Graphik';src:url('../assets/fonts/Graphik-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('../assets/fonts/Graphik-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('../assets/fonts/Graphik-Semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('../assets/fonts/Graphik-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================================
   Riya Jain — Portfolio
   Type: Inter (swap the two font variables below if your Figma file
   uses a different family — everything is driven from these tokens).
   ========================================================================== */

:root{
  --font-body:'Graphik','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Graphik','Inter Tight','Inter',-apple-system,sans-serif;

  --ink:#202020;          /* body text (sampled from exports) */
  --ink-strong:#141414;   /* headlines */
  --muted:#979797;        /* secondary text */
  --muted-2:#8a8a8a;
  --accent:#5B6CFF;       /* “sometimes 1/2 product manager” highlight */
  --line:#ebebeb;
  --bg:#ffffff;

  --wide:1261px;          /* homepage card width (measured) */
  --content:880px;        /* case-study column (measured) */
  --radius-card:24px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
strong,b{font-weight:600;color:var(--ink-strong)}

.wide{max-width:var(--wide);margin:0 auto;padding:0 24px}
.content{max-width:var(--content);margin:0 auto;padding:0 24px}

/* ------------------------------------------------------------------ header */
.site-header{padding:34px 0 0}
.site-header .wide{display:flex;align-items:center;justify-content:space-between}
.identity{display:flex;align-items:center;gap:12px}
.identity img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.identity .name{font-size:15px;font-weight:600;color:var(--ink-strong);line-height:1.25}
.identity .role{font-size:13px;color:var(--muted);line-height:1.25}
.header-nav{display:flex;align-items:center;gap:22px}
.header-nav .nav-link{font-size:14px;font-weight:500;color:var(--ink-strong)}
.header-nav .nav-link:hover{opacity:.65}
.header-nav .nav-link.active{text-decoration:underline;text-underline-offset:4px}
.linkedin{display:inline-flex}
.linkedin svg{width:21px;height:21px;fill:#0A66C2}
.linkedin:hover{opacity:.8}

/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:43px;padding:0 22px;
  border-radius:999px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;
  transition:transform .15s ease,opacity .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:#171717;color:#fff}
.btn-dark:hover{opacity:.9}
.btn-light{background:#fff;color:var(--ink-strong);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.btn .arrow{font-size:15px;transform:translateY(-.5px)}

/* --------------------------------------------------------------- home hero */
.hero{padding:92px 0 0;text-align:center}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(34px,4.6vw,47px);
  line-height:1.22;font-weight:600;letter-spacing:-.02em;color:var(--ink-strong);
  max-width:640px;margin:0 auto;
}
.hero .sub{margin-top:22px;font-size:13.5px;color:var(--muted)}
.hero .sub .accent{color:var(--accent)}
.hero .actions{margin-top:30px;display:flex;justify-content:center;gap:12px}

/* ------------------------------------------------------------ home projects */
.project{padding-top:148px}
.project-intro{display:grid;grid-template-columns:1fr 46%;column-gap:4%;align-items:start}
.project-label{padding-top:2px}

.label-bar{display:flex;gap:14px}
.label-bar .bar{width:3px;background:#171717;border-radius:2px}
.label-bar .txt{font-size:17px;font-weight:600;line-height:1.3;color:var(--ink-strong)}

.label-lockup{display:flex;align-items:center;gap:13px}
.label-lockup img.mark{width:46px;height:46px;object-fit:contain}
.label-lockup img.mark-sm{width:40px;height:40px;object-fit:contain}
.label-lockup .nm{font-size:17px;font-weight:600;color:var(--ink-strong);line-height:1.2}
.label-lockup .tag{font-size:12.5px;color:var(--muted);line-height:1.3;margin-top:2px}
.label-wordmark img{height:32px;width:auto}

.project-copy p{font-size:15px;line-height:1.68;color:var(--ink)}
.project-copy p+p{margin-top:14px}
.case-link{display:inline-block;margin-top:16px;font-size:14.5px;font-weight:500;
  color:var(--ink-strong);text-decoration:underline;text-underline-offset:4px}
.case-link:hover{opacity:.65}

.showcase{margin-top:46px;border-radius:var(--radius-card);overflow:hidden;
  background:#f4f4f5;display:block}
.showcase video,.showcase img{width:100%;height:auto}

/* ------------------------------------------------------------- home footer */
.footer-home{padding:180px 0 96px}
.footer-home .grid{display:grid;grid-template-columns:1fr 46%;column-gap:4%;align-items:start}
.big-line{
  font-family:var(--font-display);
  font-size:clamp(44px,6.2vw,80px);line-height:1.06;font-weight:600;
  letter-spacing:-.025em;color:var(--ink-strong);
}
.footer-home .bio p{font-size:14.5px;line-height:1.72;color:var(--ink)}
.footer-home .bio p+p{margin-top:16px}
.footer-home .actions{margin-top:26px;display:flex;gap:12px}

/* ------------------------------------------------------------- case pages */
.case-title{
  font-family:var(--font-display);
  font-size:clamp(30px,4vw,44px);line-height:1.28;font-weight:600;
  letter-spacing:-.02em;color:var(--ink-strong);text-align:center;
  max-width:760px;margin:44px auto 48px;
}
.case-hero{margin-bottom:72px}
.case-hero img{width:100%}

.case-body h2{font-size:20px;font-weight:600;color:var(--ink-strong);
  margin:54px 0 14px;line-height:1.35}
.case-body h3{font-size:15px;font-weight:600;color:var(--ink-strong);
  margin:22px 0 6px}
.case-body p{font-size:15px;line-height:1.7;margin-bottom:14px}
.case-body ul,.case-body ol{margin:0 0 14px 22px}
.case-body li{font-size:15px;line-height:1.65;margin-bottom:4px}
.case-body .tight p{margin-bottom:6px}

.shot{width:100%;margin-top:30px}
.shot+.shot{margin-top:12px}
.shot-caption{font-size:14px;color:var(--muted-2);margin:26px 0 -18px}

.pager{display:flex;justify-content:space-between;align-items:center;
  margin:76px 0 0;font-size:15px;color:#9a9a9a}
.pager a{color:#8f8f8f;font-weight:500}
.pager a:hover{color:var(--ink-strong)}
.pager .spacer{flex:1}

/* --------------------------------------------------------- case/film footer */
.footer-case{padding:120px 0 80px}
.footer-case .row{display:flex;justify-content:space-between;align-items:center;gap:32px}
.footer-case .big-line{font-size:clamp(34px,4.4vw,46px)}

/* --------------------------------------------------------------- film page */
.film-sub{text-align:center;font-size:14px;color:var(--muted);margin:-30px auto 44px;max-width:560px}
.film-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;
  overflow:hidden;background:#000}
.film-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-meta{margin-top:64px}
.credits{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.credits li{display:flex;justify-content:space-between;gap:24px;padding:13px 2px;
  border-bottom:1px solid var(--line);font-size:14.5px}
.credits li span:first-child{color:var(--muted);min-width:180px}
.credits li span:last-child{font-weight:500;color:var(--ink-strong)}
.ext-link{display:inline-block;margin-top:22px;font-size:14.5px;font-weight:500;
  text-decoration:underline;text-underline-offset:4px}
.ext-link:hover{opacity:.65}

/* --------------------------------------------------------------- responsive */
@media (max-width:900px){
  .project-intro,.footer-home .grid{grid-template-columns:1fr;row-gap:26px}
  .project{padding-top:96px}
  .footer-home{padding:120px 0 72px}
  .footer-case .row{flex-direction:column;align-items:flex-start}
  .case-title{margin-top:34px}
}
@media (max-width:560px){
  .hero{padding-top:64px}
  .hero .actions{flex-direction:column;align-items:center}
  .header-nav{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}

/* ---- exec case: caption cards with in-app videos ---- */
.media-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.media-row .media-card{margin-top:0}
.media-card{background:#FBF9FE;border-radius:20px;padding:26px;margin-top:30px}
.media-card .cap{font-size:15px;line-height:1.55;color:#6b6b6b;max-width:600px;margin:0 0 22px}
.media-card video{display:block;width:100%;border-radius:14px;background:#101014}
.media-card video.phone{max-width:58%;margin:0 auto;border-radius:22px}
.media-card video+video{margin-top:18px}
video.shot{display:block;border-radius:0;background:transparent}
@media (max-width:900px){
  .media-row{grid-template-columns:1fr}
  .media-card video.phone{max-width:74%}
}
.media-card video.v-mobile{display:none}
@media (max-width:560px){
  .media-card video.v-desktop{display:none}
  .media-card video.v-mobile{display:block}
}


/* ---- AI film poster facade ---- */
.film-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#000;display:block}
.film-poster img{width:100%;height:100%;object-fit:cover;display:block}
.film-poster .play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;
  background:rgba(12,12,14,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease}
.film-poster:hover .play{transform:scale(1.07);background:rgba(12,12,14,.78)}
.film-poster .play svg{width:30px;height:30px;margin-left:5px}

/* ---- homepage click-to-play players ---- */
.showcase.player{position:relative;cursor:pointer}
.playbtn{position:absolute;inset:0;margin:auto;z-index:2;width:70px;height:70px;border-radius:50%;
  border:0;cursor:pointer;background:rgba(12,12,14,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,opacity .25s ease,background .2s ease}
.showcase.player:hover .playbtn{transform:scale(1.06);background:rgba(12,12,14,.78)}
.playbtn svg{width:27px;height:27px}
.playbtn .i-play{margin-left:5px}
.playbtn .i-pause{display:none;margin:0}
.player.playing .playbtn{opacity:0;pointer-events:none}
.player.playing:hover .playbtn{opacity:1;pointer-events:auto}
.player.playing .i-play{display:none}
.player.playing .i-pause{display:block}
@media (hover:none){.player.playing .playbtn{opacity:0}}

/* ---- official logo lockups in project labels ---- */
.label-img{display:block;width:auto}
.h-studio{height:44px}
.h-startwise{height:46px}
.h-bolt{height:36px}