/* ============================================================
   Nehal Darjee — Brand Filmmaker Portfolio
   Design tokens + global styles
   ============================================================ */

:root{
  --ink:#0B0B0C;
  --paper:#F7F5F1;

  --surface-0:#111110;   /* trust bar / marquee strip bg on dark */
  --surface-1:#141413;   /* process step cards, faq cards */
  --surface-2:#1a1a18;   /* testimonial cards */
  --surface-3:#161513;   /* video thumb placeholder bg */
  --surface-4:#121211;   /* hero base */

  --accent:#E0402C;
  --accent-hi:#FF5B3F;

  --line-d:#26221F;
  --line-l:#E3DFD7;

  --text-hi:#F5F5F0;     /* headings on dark */
  --text-mid:#B8B8B2;    /* body on dark */
  --text-dim:#8f8f89;    /* eyebrow / secondary on dark */
  --text-faint:#5f5f5a;  /* footnote on dark */
  --text-ghost:#3d3a37;

  --text-ink:#0B0B0C;    /* headings on paper */
  --text-ink-mid:#6B6B67;/* body on paper */

  --radius-frame:4px;    /* footage/stills — sharp, viewfinder-like, not a soft app-card corner */
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:100px;

  --ease-soft:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-hi);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hi)}
h1,h2,h3,p{margin:0}
button{font-family:inherit}

/* honor reduced-motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

.wrap{max-width:1312px;margin:0 auto;padding:0 64px}
@media (max-width:1100px){.wrap{padding:0 40px}}
@media (max-width:640px){.wrap{padding:0 22px}}

.eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:22px;font:600 12px/1 'Manrope',sans-serif;letter-spacing:.04em;color:var(--text-dim)}
.eyebrow .dot{width:14px;height:14px;background:var(--accent);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font:700 10px/1 'Manrope',sans-serif;flex:none}
.eyebrow.on-light{color:var(--text-ink-mid)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:15px 28px;border-radius:var(--radius-pill);
  font:700 13px/1 'Manrope',sans-serif;letter-spacing:.02em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .28s var(--ease-soft),box-shadow .28s ease,filter .28s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(-1px) scale(.985)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{color:#fff;transform:translateY(-3px) scale(1.03);box-shadow:0 12px 28px rgba(224,64,44,.28)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{color:var(--ink);transform:translateY(-3px) scale(1.03);box-shadow:0 12px 24px rgba(0,0,0,.18)}
.btn-outline{border-color:var(--line-d);color:var(--text-mid);background:transparent;padding:10px 18px}
.btn-outline:hover{color:#fff;border-color:var(--accent)}
.btn-tab{padding:10px 18px;font:600 12px/1 'Manrope',sans-serif;border-radius:var(--radius-pill);border:1px solid var(--line-d);color:var(--text-mid);background:transparent;transition:border-color .25s ease,color .25s ease,background .25s ease}
.btn-tab:hover{color:#fff;border-color:var(--accent)}
.btn-tab.is-active{background:var(--text-hi);color:var(--ink);border-color:var(--text-hi)}
.btn-sm{padding:11px 20px;font:700 12px/1 'Manrope',sans-serif}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 64px;background:rgba(11,11,12,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-d);
  transition:box-shadow .3s ease,padding .3s ease;
}
.nav.is-scrolled{box-shadow:0 12px 30px rgba(0,0,0,.35);padding-top:16px;padding-bottom:16px}
@media (max-width:1100px){.nav{padding:18px 40px}}
@media (max-width:640px){.nav{padding:16px 22px}}

.brand{display:flex;align-items:center;gap:9px;font:700 15px/1 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--text-hi)}
.brand img{width:23px;height:23px;object-fit:contain;filter:brightness(0) invert(1)}

.nav-right{display:flex;align-items:center;gap:40px}
.nav-links{display:flex;gap:34px;font:500 13px/1 'Manrope',sans-serif}
.nav-links a{color:var(--text-mid)}
.nav-links a:hover,.nav-links a.is-active{color:#fff}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;background:none;border:0;cursor:pointer;padding:0}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--text-hi);border-radius:2px;transition:transform .3s var(--ease-soft),opacity .3s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobile{
  position:fixed;inset:0;top:0;z-index:49;background:rgba(8,8,9,.98);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;visibility:hidden;pointer-events:none;
}
.nav-mobile.is-open{pointer-events:auto}
.nav-mobile a{font:700 26px/1 'Manrope',sans-serif;color:var(--text-hi)}
.nav-mobile a.is-active{color:var(--accent)}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-right .btn-primary{display:none}
}
@media (min-width:901px){
  .nav-mobile{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;background:var(--surface-4)}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:url('../assets/images/hero_background_gradient.png');
  background-size:cover;background-position:center;
  opacity:.16;mix-blend-mode:screen;
}
.hero::after{content:"";position:absolute;inset:0;background:rgba(11,11,12,.68)}
.hero-inner{position:relative;z-index:1;width:100%;max-width:1060px;padding:120px 64px 96px}
@media (max-width:1100px){.hero-inner{padding:110px 40px 80px}}
@media (max-width:640px){.hero-inner{padding:96px 22px 64px}}

.hero h1{font:800 72px/.98 'Manrope',sans-serif;letter-spacing:-.02em;color:var(--text-hi)}
.hero h1 em{font-style:normal;color:var(--accent)}
@media (max-width:900px){.hero h1{font-size:52px}}
@media (max-width:640px){.hero h1{font-size:38px;line-height:1.06}}

.hero p{margin-top:20px;max-width:640px;font:400 17px/1.55 'Manrope',sans-serif;color:var(--text-mid)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}

/* ---------- marquee / trust bar ---------- */
.marquee-strip{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);background:var(--surface-0);overflow:hidden;padding:22px 0}
.marquee-strip.testimonials{padding:90px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track:hover{animation-play-state:paused}

.trust-set{display:flex;gap:56px;padding-right:56px;align-items:baseline}
.trust-set b{font:700 15px/1 'Manrope',sans-serif;color:var(--text-hi)}
.trust-set b span{color:#888;font-weight:500;font-size:12px;letter-spacing:.04em}
.trust-dot{color:var(--accent)}

/* ---------- stats strip ---------- */
.stats{background:var(--paper);color:var(--text-ink);padding:56px 64px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;max-width:1312px;margin:0 auto}
.stat-num{font:800 40px/1 'Manrope',sans-serif}
.stat-label{font:600 12px/1.4 'Manrope',sans-serif;color:var(--text-ink-mid);margin-top:8px}
@media (max-width:640px){.stats{padding:40px 22px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}.stat-num{font-size:32px}}

/* ---------- section shells ---------- */
.section{padding:110px 0}
.section-tight{padding:64px}
@media (max-width:1100px){.section{padding:80px 0}}
@media (max-width:640px){.section{padding:56px 0}.section-tight{padding:40px 22px}}

.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px}
.section-head h2{font:800 44px/1 'Manrope',sans-serif;letter-spacing:-.01em}
.section-head p{max-width:360px;font:400 15px/1.6 'Manrope',sans-serif;color:var(--text-dim)}
@media (max-width:800px){.section-head{flex-direction:column;align-items:flex-start;gap:16px}.section-head h2{font-size:32px}}

.section.on-dark h2{color:var(--text-hi)}
.section.on-light{background:var(--paper);color:var(--text-ink)}
.section.on-light .section-head p{color:var(--text-ink-mid)}

/* ---------- process ---------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{
  background:var(--surface-1);border:1px solid var(--line-d);border-radius:var(--radius-lg);
  padding:32px 26px 36px;
  transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft),box-shadow .4s ease,border-color .4s ease;
}
.proc:hover .step{opacity:.4}
.proc .step:hover{opacity:1;transform:translateY(-10px);box-shadow:0 22px 50px rgba(0,0,0,.5);border-color:rgba(224,64,44,.55)}
.step-num{font:700 13px/1 'Manrope',sans-serif;color:var(--accent)}
.step-title{margin-top:48px;font:800 23px/1.15 'Manrope',sans-serif;color:var(--text-hi)}
.step p{margin-top:14px;font:400 14px/1.6 'Manrope',sans-serif;color:var(--text-dim)}
@media (max-width:900px){.proc{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.proc{grid-template-columns:1fr}}

/* ---------- video tiles ---------- */
.vt{position:relative;border-radius:var(--radius-frame);overflow:hidden;background:var(--surface-3);cursor:pointer;display:block}
.vt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-soft)}
.vt:hover img{transform:scale(1.04)}
.vt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.vt .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .3s ease}
.vt:hover .play{opacity:1}
.vt .play.lg{width:52px;height:52px;background:rgba(11,11,12,.72);font-size:16px}
.vt .play.md{width:46px;height:46px;background:rgba(11,11,12,.72);font-size:14px}
.vt .play.sm{width:44px;height:44px;background:rgba(224,64,44,.92);font-size:14px;z-index:2;opacity:1}

.yt-16x9{aspect-ratio:16/9}
.reel-9x16{aspect-ratio:9/16}

/* always-on YouTube embeds (long-form) + broken-embed fallback */
.yt-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-frame);overflow:hidden;background:var(--surface-3)}
.yt-embed iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.yt-embed[hidden]{display:none}
.yt-fallback[hidden]{display:none}
.yt-fallback .play{opacity:1}

/* self-hosted hover-to-play video reels */
.vt[data-video-src] .vt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s ease}
.vt[data-video-src] .vt-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .3s ease;pointer-events:none;background:var(--surface-3)}
.vt.is-playing .vt-thumb{opacity:0}
.vt.is-playing .vt-video{opacity:1}
.vt.is-playing .play.sm{opacity:0;pointer-events:none}
.vt-mute{position:absolute;right:10px;bottom:10px;z-index:4;width:32px;height:32px;border-radius:50%;border:0;background:rgba(11,11,12,.72);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,background .2s ease}
.vt-mute svg{width:16px;height:16px;display:block}
.vt.is-playing .vt-mute{opacity:1;pointer-events:auto}
.vt-mute:hover{background:var(--accent)}

.work-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:40px}
.work-card-meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px}
.work-card-meta .title{font:700 15px/1 'Manrope',sans-serif;color:var(--text-ink)}
.work-card-meta .link{font:700 12px/1 'Manrope',sans-serif}

.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.reel-card-meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.reel-card-meta .title{font:600 14px/1 'Manrope',sans-serif;color:var(--text-ink)}
@media (max-width:900px){.work-preview-grid{grid-template-columns:1fr}.reel-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- case studies ---------- */
.cs-list-wrap{display:flex;flex-direction:column;gap:14px}

.cs-card{background:var(--surface-1);border:1px solid var(--line-d);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .3s ease}
.cs-card:hover{border-color:rgba(224,64,44,.35)}
.cs-card.is-open{border-color:rgba(224,64,44,.5)}

.cs-row{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:26px 28px;background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit}

.cs-client{min-width:0}
.cs-name{font:800 22px/1.15 'Manrope',sans-serif;color:var(--text-hi)}
.cs-role{margin-top:6px;max-width:480px;font:600 11px/1.5 'Manrope',sans-serif;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim)}

.cs-stats{display:flex;align-items:center;gap:40px;flex:none}
.cs-stat{text-align:right}
.cs-stat-num{font:800 30px/1 'Manrope',sans-serif;color:var(--accent)}
.cs-stat-label{margin-top:6px;font:600 11px/1 'Manrope',sans-serif;letter-spacing:.03em;color:var(--text-dim)}

.cs-toggle{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-d);display:flex;align-items:center;justify-content:center;font:400 20px/1 'Manrope',sans-serif;color:var(--text-mid);transition:transform .35s var(--ease-soft),border-color .3s ease,color .3s ease}
.cs-card.is-open .cs-toggle{transform:rotate(45deg);border-color:var(--accent);color:var(--accent)}

.cs-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease-soft)}
.cs-card.is-open .cs-panel{grid-template-rows:1fr}
.cs-panel-inner{overflow:hidden;min-height:0}
.cs-panel-content{margin-top:2px;padding:30px 28px 36px;border-top:1px solid var(--line-d)}

.cs-section{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.cs-section + .cs-section{margin-top:36px}
.cs-col{flex:1;min-width:0}
.cs-col-label{font:700 13px/1 'Manrope',sans-serif;letter-spacing:.02em;color:var(--accent);margin-bottom:14px}
.cs-col p{font:400 14px/1.65 'Manrope',sans-serif;color:var(--text-dim)}
.cs-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cs-list li{position:relative;padding-left:18px;font:400 14px/1.6 'Manrope',sans-serif;color:var(--text-dim)}
.cs-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:var(--accent)}

.cs-section-images{flex:none}

.cs-images{display:flex;flex-wrap:wrap;gap:10px}
.cs-images img{width:110px;height:196px;border-radius:var(--radius-frame);object-fit:contain;cursor:zoom-in;transition:transform .3s ease;background:var(--surface-3)}
.cs-images img:hover{transform:translateY(-3px)}
@media (max-width:480px){.cs-images img{width:100px;height:178px}}

@media (max-width:800px){
  .cs-row{position:relative;flex-wrap:wrap;padding:22px 60px 22px 22px}
  .cs-stats{width:100%;justify-content:flex-start;gap:28px}
  .cs-toggle{position:absolute;top:22px;right:22px}
  .cs-section{flex-direction:column;gap:20px}
  .cs-role{max-width:none}
  .cs-panel-content{padding-left:22px;padding-right:22px}
}

.cs-lightbox{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(8,8,9,.92);opacity:0;visibility:hidden;pointer-events:none;padding:40px;transition:opacity .25s ease,visibility .25s ease}
.cs-lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.cs-lightbox img{max-width:min(560px,90vw);max-height:80vh;border-radius:var(--radius-md);object-fit:contain;transform:scale(.94);transition:transform .3s var(--ease-soft)}
.cs-lightbox.is-open img{transform:scale(1)}

/* ---------- testimonials ---------- */
.t-card{
  flex:none;box-sizing:border-box;height:340px;
  background:var(--surface-2);border:1px solid var(--line-d);border-radius:var(--radius-lg);
  padding:32px;display:flex;flex-direction:column;justify-content:space-between;
}
.t-card p{font:500 17px/1.5 'Manrope',sans-serif;color:var(--text-hi)}
.t-person{display:flex;align-items:center;gap:12px}
.t-person img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.t-person .name{font:700 13px/1.3 'Manrope',sans-serif;color:var(--text-hi)}
.t-person .role{font:400 12px/1.5 'Manrope',sans-serif;color:var(--text-dim)}
.t-track{display:flex;gap:24px;padding-right:24px;align-items:stretch}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:860px;margin:0 auto}
.faq{background:var(--surface-1);border:1px solid var(--line-d);border-radius:14px;padding:22px 26px;transition:border-color .3s ease}
.faq:hover{border-color:rgba(224,64,44,.45)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;font:700 18px/1.4 'Manrope',sans-serif;color:var(--text-hi);list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .sign{transition:transform .3s var(--ease-soft);flex:none;font:400 24px/1 'Manrope',sans-serif;color:var(--accent)}
.faq[open] .sign{transform:rotate(45deg)}
.faq p{margin:16px 0 4px;max-width:760px;font:400 15px/1.65 'Manrope',sans-serif;color:var(--text-dim)}
@media (max-width:640px){.faq summary{font-size:16px}}

/* ---------- contact / CTA band ---------- */
.contact{position:relative;padding:150px 64px;overflow:hidden;border-top:1px solid var(--line-d);text-align:center;background:var(--ink)}
.contact::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(50% 65% at 12% 8%,rgba(224,64,44,.14),transparent 60%),
    radial-gradient(45% 60% at 92% 15%,rgba(224,64,44,.10),transparent 65%),
    radial-gradient(80% 120% at 50% 100%,rgba(224,64,44,.22),rgba(11,11,12,.95) 70%);
}
.contact::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
.contact-inner{position:relative;z-index:1}
.contact h2{font:800 60px/1.08 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--text-hi)}
.contact h2 em{font-style:normal;color:var(--accent)}
.contact p{margin:24px auto 0;max-width:460px;font:400 16px/1.6 'Manrope',sans-serif;color:var(--text-mid)}
.contact .btn{margin-top:40px;padding:18px 34px}
@media (max-width:640px){.contact{padding:96px 22px}.contact h2{font-size:36px}}

/* ---------- footer ---------- */
.site-footer{padding:44px 64px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-d);background:var(--ink)}
.site-footer a{font:600 13px/1 'Manrope',sans-serif;color:var(--text-mid)}
.footer-social{display:flex;gap:28px;font:600 13px/1 'Manrope',sans-serif}
.footer-back{font:600 12px/1 'Manrope',sans-serif;color:var(--text-faint) !important}
@media (max-width:640px){.site-footer{padding:32px 22px;flex-direction:column;text-align:center}}

/* ---------- page header (work / about) ---------- */
.page-head{max-width:1312px;margin:0 auto;padding:88px 64px 44px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.page-head h1{font:800 66px/1 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--text-hi)}
.page-head-stats{display:flex;gap:56px;padding-bottom:10px;flex-wrap:wrap}
.page-head-stats .n{font:800 32px/1 'Manrope',sans-serif;color:var(--text-hi)}
.page-head-stats .n.accent{color:var(--accent)}
.page-head-stats .l{font:600 11px/1 'Manrope',sans-serif;letter-spacing:.04em;color:var(--text-dim);margin-top:10px}
@media (max-width:640px){.page-head{padding:88px 22px 32px}.page-head h1{font-size:42px}}

.filter-row{max-width:1312px;margin:0 auto;padding:0 64px 24px;display:flex;gap:10px;border-bottom:1px solid var(--line-d);flex-wrap:wrap}
@media (max-width:640px){.filter-row{padding:0 22px 20px}}

.subsection-label{max-width:1312px;margin:0 auto;padding:56px 64px 20px;font:600 12px/1 'Manrope',sans-serif;letter-spacing:.02em;color:var(--text-dim)}
.subsection-label.bordered{border-top:1px solid var(--line-d);padding-top:56px}
@media (max-width:640px){.subsection-label{padding:40px 22px 16px}}

.grid-block{max-width:1312px;margin:0 auto;padding:24px 64px 80px}
@media (max-width:640px){.grid-block{padding:20px 22px 56px}}

.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.yt-card-meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px}
.yt-card-meta .title{font:600 14px/1 'Manrope',sans-serif;color:var(--text-hi)}
.yt-soon{aspect-ratio:16/9;border-radius:var(--radius-frame);background:linear-gradient(150deg,#201f1d,#131211);border:1px dashed var(--line-d);display:flex;align-items:center;justify-content:center;font:400 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--text-ghost)}
@media (max-width:900px){.yt-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.yt-grid{grid-template-columns:1fr}}

.reels-grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.reels-grid-6 .title{font:600 12.5px/1 'Manrope',sans-serif;color:var(--text-hi)}
.reels-grid-6 .link{font:700 11px/1 'Manrope',sans-serif}
@media (max-width:1100px){.reels-grid-6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.reels-grid-6{grid-template-columns:repeat(2,1fr)}}

/* ---------- about page ---------- */
.about-grid{max-width:1312px;margin:0 auto;padding:88px 64px 100px;display:grid;grid-template-columns:340px 1fr;gap:72px}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;padding:64px 40px 80px;gap:40px}}
@media (max-width:640px){.about-grid{padding:56px 22px 64px}}

.about-photo{width:340px;height:420px;border-radius:var(--radius-frame);overflow:hidden;background:var(--surface-3)}
.about-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.about-photo{width:100%;max-width:340px;height:auto;aspect-ratio:340/420}}

.about-side-meta{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.about-side-meta .email{font:600 13px/1 'Manrope',sans-serif;color:var(--text-hi)}
.about-side-meta .loc{font:400 13px/1 'Manrope',sans-serif;color:var(--text-dim)}
.about-side-meta .socials{display:flex;gap:18px;margin-top:6px;font:600 13px/1 'Manrope',sans-serif}
.about-side-meta .socials a{color:var(--text-mid)}

.about-copy h1{margin:0;max-width:640px;font:800 46px/1.18 'Manrope',sans-serif;letter-spacing:-.01em;color:var(--text-hi)}
.about-copy>p{margin-top:24px;max-width:600px;font:400 16px/1.65 'Manrope',sans-serif;color:var(--text-mid)}

.exp-label{font:600 12px/1 'Manrope',sans-serif;letter-spacing:.02em;color:var(--text-dim);margin-bottom:28px}
.exp-list{border-top:1px solid var(--line-d)}
.exp-row{display:grid;grid-template-columns:150px 1fr;gap:32px;padding:24px 0;border-bottom:1px solid var(--line-d);align-items:baseline}
.exp-row .when{font:600 13px/1 'Manrope',sans-serif;color:var(--text-dim)}
.exp-row .when.now{color:var(--accent)}
.exp-role{font:700 18px/1.3 'Manrope',sans-serif;color:var(--text-hi)}
.exp-role span{font:400 13px/1 'Manrope',sans-serif;color:var(--text-dim)}
.exp-desc{margin-top:8px;font:400 13px/1.55 'Manrope',sans-serif;color:var(--text-dim)}
.exp-date{margin-top:8px;font:600 11px/1 'Manrope',sans-serif;letter-spacing:.04em;color:var(--text-faint)}
@media (max-width:640px){.exp-row{grid-template-columns:1fr;gap:6px}}