/* ============================================================
   Denis Efremov — Portfolio
   Dark · minimalist · cinematic  (palette pulled from hero video)
   ============================================================ */

:root{
  --bg:        #08080a;
  --bg-2:      #0c0b0f;
  --ink:       #F3EFE7;
  --ink-soft:  rgba(243,239,231,.60);
  --ink-faint: rgba(243,239,231,.34);
  --line:      rgba(243,239,231,.12);
  --line-soft: rgba(243,239,231,.07);

  --gold:      #E9A23B;
  --gold-soft: #f2c074;
  --cyan:      #5BB0FF;
  --accent:    var(--gold);

  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Inter", system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1500px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; text-decoration:none; }
b, strong{ color:var(--ink); font-weight:600; }
::selection{ background:var(--gold); color:#000; }
img,canvas{ display:block; }

/* ───────────────── Background & Grain ───────────────── */
.spotlight {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -2;
  background: radial-gradient(circle 800px at var(--x, 50vw) var(--y, 50vh), rgba(233,162,59,0.08), rgba(91,176,255,0.03) 40%, transparent 80%);
  transition: background 0.1s ease-out;
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; will-change:transform; /* static, own layer, no blend-mode → no per-frame recomposite */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,2%)}
  80%{transform:translate(2%,-2%)}
}


/* ───────────────── Scroll progress ───────────────── */
.scroll-progress{
  position:fixed; top:0; left:0; width:100%; height:2px; z-index:300;
  background:var(--line-soft);
}
.scroll-progress span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
  background:linear-gradient(90deg,var(--gold),var(--cyan));
}

/* ───────────────── Preloader ───────────────── */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:flex-end;
  padding:var(--pad);
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ width:100%; max-width:var(--maxw); margin:0 auto; }
.loader__brand{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.2rem,9vw,7rem); letter-spacing:-.02em; line-height:1;
  opacity:0; transition:opacity .5s ease;
}
html.fonts-ready .loader__brand{ opacity:1; }
.loader__brand-denis{
  background:linear-gradient(90deg,var(--gold),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.loader__brand-efremov{
  color:var(--ink); -webkit-text-stroke:0;
}
.loader__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:1.4rem 0 .8rem; color:var(--ink-soft);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.18em;
}
.loader__pct i{ font-style:normal; color:var(--ink); }
.loader__track{ height:1px; background:var(--line); overflow:hidden; }
.loader__track span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--cyan));
  transition:width .25s linear;
}

/* ───────────────── Nav ───────────────── */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.25rem var(--pad);
  /* constant padding — no shrink-on-scroll, so the header never drifts vertically.
     soft scrim instead of mix-blend-mode (blend-mode forces per-frame recomposite → jank). */
  background:transparent;
  transition:background .4s var(--ease), border-bottom .4s var(--ease);
}
.nav.is-scrolled{ background:rgba(8,8,10,.25); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,0.04); }
.nav__brand{
  font-family:var(--display); font-weight:700; font-size:1.65rem; letter-spacing:-.02em; text-transform:uppercase;
  display:flex; align-items:center; gap:.4rem; line-height:1; color:var(--ink); text-decoration:none;
}
.nav__brand-denis{
  background:linear-gradient(90deg,var(--gold),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav__brand-efremov{
  color:var(--ink); -webkit-text-stroke:0;
}
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.4rem); }
.nav__links a{
  font-size:.82rem; letter-spacing:.04em; color:var(--ink); position:relative;
  padding:.3rem 0;
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:.1rem; width:0; height:1px;
  background:currentColor; transition:width .4s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{
  border:1px solid rgba(255,255,255,.45); border-radius:100px;
  padding:.5rem 1.1rem !important;
}
@media (max-width:680px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ───────────────── HERO ───────────────── */
.hero{ position:relative; height:560vh; z-index:5; }
.hero__sticky{
  position:sticky; top:0; height:100vh; width:100%; overflow:hidden;
  background:var(--bg);
}
#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 38%, transparent 40%, rgba(8,8,10,.55) 100%),
    linear-gradient(to top, rgba(8,8,10,.95) 0%, rgba(8,8,10,.25) 32%, transparent 55%);
}

/* corner frame tags */
.hero__frame{ position:absolute; inset:0; pointer-events:none; }
.hero__tag{
  position:absolute; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__tag--tl{ top:6.5rem; left:var(--pad); }
.hero__tag--tr{ top:6.5rem; right:var(--pad); text-align:right; }
.hero__tag--bl{ bottom:2rem; left:var(--pad); }
.hero__tag--br{ bottom:2rem; right:var(--pad); color:var(--gold); }
@media (max-width:680px){ .hero__tag--tr,.hero__tag--bl{ display:none; } }

/* overlay copy */
.hero__overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  padding:0 var(--pad) clamp(7rem,14vh,10rem); /* lifted so the big title clears the scroll hint */
  pointer-events:none;
}
.hero__copy{ position:relative; width:100%; max-width:var(--maxw); margin:0 auto; }
.h-line{ position:absolute; bottom:0; left:0; will-change:transform,opacity; }
.h-line--1{ position:relative; }
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.1rem;
}
.eyebrow i{ width:26px; height:1px; background:var(--gold); display:inline-block; }
.hero__title{
  font-family:var(--display); font-weight:600; line-height:.92;
  font-size:clamp(2.6rem,9.5vw,8rem); letter-spacing:-.03em;
}
.hero__title span{
  -webkit-text-stroke:1px var(--ink); color:transparent;
}
.h-line--2 h2,.h-line--3 h2,.h-line--4 h2{
  font-family:var(--display); font-weight:500; line-height:1;
  font-size:clamp(2.4rem,8.5vw,7rem); letter-spacing:-.02em;
  opacity:0;
}
.h-line em, .h-line--3 em, .h-line .x{ font-style:normal; background:linear-gradient(90deg,var(--gold),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.hero__scrollhint{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); pointer-events:none;
}
.hero__scrollhint i{
  width:1px; height:42px; background:linear-gradient(var(--gold),transparent);
  position:relative; overflow:hidden;
}
.hero__scrollhint i::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:40%;
  background:var(--ink); animation:scrolldot 1.8s var(--ease) infinite;
}
@keyframes scrolldot{ 0%{transform:translateY(-110%)} 100%{transform:translateY(260%)} }

/* ───────────────── Sections shared ───────────────── */
.section{
  position:relative; z-index:5;
  max-width:var(--maxw); margin:0 auto;
  /* Top padding minus the 3.5rem visual height of .section__index. Bottom padding 0 so they don't stack. */
  padding:calc(clamp(7rem,16vh,14rem) - 3.5rem) var(--pad) 0;
}
.section:last-of-type { padding-bottom:clamp(7rem,16vh,14rem); }
.section__index{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:2.2rem;
}
.section__title{
  font-family:var(--display); font-weight:500; line-height:1.18;
  font-size:clamp(1.8rem,4.4vw,3.6rem); letter-spacing:-.02em;
}

/* reveal base */
.reveal{ opacity:0; transform:translateY(34px); will-change:transform,opacity; }
.word{ display:inline-block; opacity:.12; will-change:opacity; transition:opacity .1s; }

/* ───────────────── Manifesto ───────────────── */
.manifesto__text{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.18; letter-spacing:-.015em;
}
.word.is-gold{ color:var(--gold); }
.word.is-cyan{ color:var(--cyan); }

/* ───────────────── About ───────────────── */
.about__grid{
  display:grid; grid-template-columns:1fr 2fr; gap:clamp(2rem,6vw,6rem);
}
.about__lead{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.3; letter-spacing:-.01em;
  margin-bottom:2rem;
}
.about__para{ color:var(--ink-soft); max-width:54ch; font-size:1.02rem; }
.about__stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  margin-top:4rem; padding-top:2.5rem; border-top:1px solid var(--line);
}
.stat b{
  font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,5vw,3.6rem);
  display:block; line-height:1; letter-spacing:-.02em;
}
.stat span{ font-size:.8rem; color:var(--ink-soft); display:block; margin-top:.6rem; }
@media (max-width:780px){
  .about__grid{ grid-template-columns:1fr; }
  .about__stats{ grid-template-columns:1fr; gap:1.6rem; }
}
.about__meta{ color:var(--ink-faint); font-size:.92rem; margin-bottom:2.4rem; }

/* experience strip */
.about__exp{ list-style:none; border-top:1px solid var(--line); }
.about__exp li{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--line);
}
.about__exp b{ font-family:var(--display); font-weight:500; font-size:1.02rem; }
.about__exp span{ color:var(--ink-soft); font-size:.85rem; }
.about__exp em{ font-style:normal; color:var(--ink-faint); font-size:.76rem; letter-spacing:.04em; text-align:right; }
@media (max-width:680px){
  .about__exp li{ grid-template-columns:1fr auto; row-gap:.15rem; padding:.9rem 0; }
  .about__exp span{ grid-column:1; }
  .about__exp em{ grid-row:1; grid-column:2; }
}

/* tools / stack row */
.about__tools{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:3rem; }
.about__tools li{
  font-size:.76rem; letter-spacing:.02em; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem;
}

/* about top row (lead + side panel) */
.about__top{
  display:grid; grid-template-columns:1fr clamp(240px,30vw,320px);
  column-gap:clamp(2.5rem,5vw,5rem); align-items:center;
  margin-bottom:clamp(2.6rem,5vw,4rem);
}
.about__top .about__lead{ margin-bottom:0; grid-column:1; grid-row:1; text-wrap:pretty; }
.about__photo{           /* round; sits on the same row (centered) as the lead */
  grid-column:2; grid-row:1; width:100%; height:auto; display:block;
  border-radius:50%; border:1px solid var(--line);
}
.about__cap{ grid-column:2; grid-row:2; margin-top:1.5rem; text-align:center; }  /* caption under photo, centered */
.about__cap .about__meta{ margin-bottom:.9rem; }
.about__avail{ display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--ink-soft); }
@media (max-width:780px){
  .about__top{ grid-template-columns:1fr; row-gap:1.6rem; align-items:start; }
  .about__lead, .about__photo, .about__cap{ grid-column:1; grid-row:auto; }
  .about__photo{ max-width:260px; }
  .about__cap{ margin-top:0; text-align:left; }
}

/* expertise discipline tags */
.disc__tags{ grid-column:3; display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem; }
.disc__tags span{ font-size:.7rem; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:.28rem .65rem; letter-spacing:.02em; }
@media (max-width:780px){ .disc__tags{ grid-column:1/-1; } }

/* ───────────────── Now ───────────────── */
.now__text{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.8rem,4.4vw,3.6rem); line-height:1.18; letter-spacing:-.015em;
}
.now__services{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem);
  margin-top:clamp(7rem,16vh,14rem); padding-top:clamp(2.5rem,5vh,3.5rem); border-top:1px solid var(--line);
}
.svc__no{ color:var(--gold); font-size:1.2rem; display:block; margin-bottom:1.1rem; }
.svc h3{ font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,2vw,1.55rem); letter-spacing:-.01em; margin-bottom:.75rem; }
.svc p{ color:var(--ink-soft); font-size:.96rem; line-height:1.55; }
.now__cta{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:clamp(2.5rem,5vh,3.5rem);
  font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,2vw,1.6rem); letter-spacing:-.01em;
  border-bottom:1px solid var(--ink-faint); padding-bottom:.4rem;
  transition:gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.now__cta:hover{ color:var(--gold); gap:1rem; border-color:var(--gold); }
.now__cta span{ transition:transform .3s var(--ease); }
.now__cta:hover span{ transform:translateX(4px); }
@media (max-width:780px){ .now__services{ grid-template-columns:1fr; gap:2.2rem; } }

/* open-to-work chip */
.otw{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 auto 1.6rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:999px; padding:.45rem 1rem;
}
.otw__dot{ width:7px; height:7px; border-radius:50%; background:#46d27f; animation:otwpulse 2.4s var(--ease) infinite; }
@keyframes otwpulse{ 0%{ box-shadow:0 0 0 0 rgba(70,210,127,.45);} 70%{ box-shadow:0 0 0 7px rgba(70,210,127,0);} 100%{ box-shadow:0 0 0 0 rgba(70,210,127,0);} }

/* How I work — FAQ */
.faq{ max-width:640px; margin:clamp(3rem,6vh,5rem) auto 0; text-align:left; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.2rem 0; gap:1rem;
  font-family:var(--display); font-weight:500; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--ink-faint); font-size:1.4rem; line-height:1; transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ color:var(--ink-soft); padding:0 0 1.3rem; max-width:60ch; font-size:.96rem; line-height:1.6; }

/* ───────────────── Expertise ───────────────── */
.expertise__head{ margin-bottom:clamp(7rem,16vh,14rem); }
.expertise__head .section__title{ margin-top:1.5rem; }
.expertise__list{ list-style:none; border-top:1px solid var(--line); }
.disc{
  display:grid; grid-template-columns:64px 1.1fr 2fr; gap:1.5rem; align-items:start;
  padding:2.2rem 0; border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.disc__no{
  font-size:.85rem; color:var(--ink-soft);
  width:44px; height:44px;
  border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  letter-spacing:0; padding-top:0; margin-top:-0.4rem;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.disc h3{
  font-family:var(--display); font-weight:500; font-size:clamp(1.4rem,2.8vw,2.1rem);
  letter-spacing:-.01em; transition:transform .5s var(--ease), color .4s;
}
.disc p{ color:var(--ink-soft); max-width:44ch; font-size:.98rem; }
.disc:hover h3{ transform:translateX(14px); color:var(--gold); }
.disc:hover .disc__no{ border-color:var(--gold); color:var(--gold); }
@media (max-width:780px){
  .disc{ grid-template-columns:40px 1fr; }
  .disc p{ grid-column:1/-1; }
}

/* ───────────────── Work ───────────────── */
.work__head{ margin-bottom:clamp(7rem,16vh,14rem); }
.work__head .section__title{ margin-top:1.5rem; }
.work__note{ color:var(--ink-soft); margin-top:1.4rem; max-width:46ch; }
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem); }
.work-card{
  display:block; width:100%; text-align:left; cursor:pointer;
  -webkit-appearance:none; appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit;
}
.work-card__media{
  position:relative; aspect-ratio:4/3; border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(233,162,59,.10), transparent 50%),
    radial-gradient(120% 120% at 90% 90%, rgba(91,176,255,.10), transparent 50%),
    var(--bg-2);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .5s var(--ease), transform .6s var(--ease);
}
.work-card__media img{
  width:100%; height:100%; object-fit:cover; opacity:1;
  transition:transform .8s var(--ease);
}
.work-card__media span{
  font-family:var(--display); font-size:clamp(3rem,7vw,5rem); font-weight:500;
  color:var(--ink-faint); transition:color .5s var(--ease), transform .6s var(--ease);
}
.work-card:hover .work-card__media{ border-color:rgba(233,162,59,.5); }
.work-card:hover .work-card__media span{ color:var(--gold); transform:scale(1.08); }
.work-card:hover .work-card__media img{ transform:scale(1.05); }
.work-card__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:1.1rem; padding-bottom:.4rem;
}
.work-card__meta h3{ font-family:var(--display); font-weight:500; font-size:1.05rem; }
.work-card__meta p{ font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; }

/* placeholder "Under Construction" cards */
.work-card--placeholder{ cursor:default; pointer-events:none; }
.work-card--placeholder .work-card__media{
  border:1px dashed rgba(255,255,255,.08);
  background:var(--bg-2);
}
.work-card--placeholder .work-card__placeholder-inner{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.work-card--placeholder .work-card__placeholder-icon{
  width:32px; height:32px; opacity:.2;
  border:2px solid var(--ink-soft); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation:wc-pulse 2.4s ease-in-out infinite;
}
.work-card--placeholder .work-card__placeholder-icon::before{
  content:"+"; font-family:var(--display); font-size:1.1rem; color:var(--ink-soft);
}
.work-card--placeholder .work-card__placeholder-label{
  font-family:var(--display); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
}
@keyframes wc-pulse{
  0%,100%{ opacity:.2; transform:scale(1); }
  50%{ opacity:.4; transform:scale(1.1); }
}

@media (max-width:900px){ .work__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .work__grid{ grid-template-columns:1fr; } }

/* ───────────────── Contact ───────────────── */
.contact{ text-align:center; padding-top:clamp(8rem,16vh,14rem); }
.contact__title{
  font-family:var(--display); font-weight:500; line-height:1.04;
  font-size:clamp(2.4rem,7vw,6rem); letter-spacing:-.025em; margin-bottom:3rem;
}
.contact__title em{ font-style:normal; background:linear-gradient(90deg,var(--gold),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.contact__mail{
  display:inline-block; font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,4vw,2.6rem); letter-spacing:-.01em;
  padding-bottom:.3rem; border-bottom:1px solid var(--line);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.contact__mail:hover{ color:var(--gold); border-color:var(--gold); }
.contact__socials{
  display:flex; justify-content:center; flex-wrap:wrap; gap:2rem;
  margin-top:3.5rem;
}
.contact__socials a{
  font-size:.82rem; letter-spacing:.06em; color:var(--ink-soft);
  position:relative; transition:color .4s;
}
.contact__socials a:hover{ color:var(--ink); }

/* ───────────────── Footer ───────────────── */
.footer{
  position:relative; z-index:5;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  max-width:var(--maxw); margin:0 auto;
  padding:2.5rem var(--pad); border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em;
}
.footer i{ font-style:normal; }

@media (max-width:680px){
  .footer{ flex-direction:column; align-items:flex-start; }
}

/* ───────────────── Mobile fixes ───────────────── */
@media (max-width:680px){
  .hero__scrollhint{ display:none; }   /* was overlapping the big title */
  .eyebrow{ font-size:.66rem; letter-spacing:.16em; }
  .hero__overlay{ padding-bottom:clamp(2.5rem,6vh,5rem); }
}

/* ───────────────── Project overlay (case-study window) ───────────────── */
.project-overlay{ position:fixed; inset:0; z-index:500; display:none; }
.project-overlay.is-open{ display:block; }
.project-overlay__scrim{
  position:absolute; inset:0; background:#070709; opacity:0;
  /* solid (no backdrop-filter): fixed+backdrop-filter flickers on scroll and shows the homepage behind */
}
.project{
  position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); color:var(--ink);
}
@media (min-width:920px){
  .project{
    inset:2.6vh 2.6vw; border-radius:22px; border:1px solid var(--line);
    box-shadow:0 50px 140px rgba(0,0,0,.65);
  }
}
.project__bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem var(--pad); border-bottom:1px solid var(--line);
  background:rgba(12,12,14,.96);   /* solid bar, no backdrop-filter (was flickering as content scrolled under) */
  position:relative; z-index:2;
}
.project__close{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:none; cursor:pointer; position:relative; flex:0 0 auto;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.project__close:hover{ border-color:var(--gold); background:rgba(233,162,59,.08); }
.project__close span{ position:absolute; top:50%; left:50%; width:15px; height:1.5px; background:var(--ink); }
.project__close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.project__close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
.project__index{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.project__mark{ font-family:var(--display); font-weight:600; font-size:.9rem; margin-left:auto; }
.project__scroll{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }

.project__hero,.project__meta,.project__body,.project__next{
  max-width:var(--maxw); margin-inline:auto; width:100%;
}
.project__hero{ padding:clamp(2.5rem,7vw,5.5rem) var(--pad) clamp(1.5rem,3vw,2.5rem); }
.project__eyebrow{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.project__title{ font-family:var(--display); font-weight:600; line-height:1; letter-spacing:-.025em; font-size:clamp(2.6rem,8vw,6rem); }
.project__lead{ font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,2.4vw,1.9rem); line-height:1.3; color:var(--ink-soft); margin-top:1.4rem; max-width:100%; }

.project__cover,.project__figure,.project__gallery .g{
  border:1px solid var(--line); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 120% at 18% 8%, rgba(233,162,59,.14), transparent 52%),
    radial-gradient(120% 120% at 92% 92%, rgba(91,176,255,.14), transparent 52%),
    var(--bg-2);
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.project__cover img,.project__figure img,.project__gallery .g img, .project__gallery .g video, .project__cover video, .project__cover lottie-player, .project__figure lottie-player, .project__gallery .g lottie-player { width:100%; height:auto; display:block; object-fit:cover; -webkit-transform: translateZ(0); transform: translateZ(0); }
.project__cover span,.project__figure span,.project__gallery .g span{
  font-family:var(--display); font-weight:500; color:var(--ink-faint);
}
.project__cover{ margin-top:clamp(2rem,4vw,3.5rem); border-radius:16px; overflow:hidden; }
.project__cover span{ font-size:clamp(4rem,12vw,9rem); }

.project__meta{
  padding:clamp(2rem,4vw,3rem) var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.project__meta .m b{ display:block; font-weight:400; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5rem; }
.project__meta .m span{ font-family:var(--display); font-size:1.05rem; }
@media (max-width:680px){ .project__meta{ grid-template-columns:1fr 1fr; gap:1.4rem 1rem; } }

.project__body{ padding:clamp(3rem,7vw,6rem) var(--pad) clamp(1rem,2vw,2rem); }
.project__block{ margin-bottom:clamp(3rem,6vw,5rem); }
.project__block h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.01em; margin-bottom:1.1rem; }
.project__block p{ color:var(--ink-soft); max-width:100%; font-size:1.05rem; line-height:1.7; }
.project__figure{ margin-top:1.8rem; border-radius:14px; }
.project__figure span{ font-size:clamp(2rem,6vw,4rem); }
.project__gallery{ display:flex; flex-direction:column; gap:1.5rem; }
.project__gallery .g{ width:100%; border-radius:12px; overflow:hidden; }
.project__gallery .g span{ font-size:2rem; }
@media (max-width:680px){ .project__gallery{ gap:1rem; } }
.project__results{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; padding-top:2.5rem; border-top:1px solid var(--line); }
.project__results .r b{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,4vw,3rem); display:block; line-height:1; letter-spacing:-.02em; }
.project__results .r span{ font-size:.82rem; color:var(--ink-soft); display:block; margin-top:.5rem; }
@media (max-width:680px){ .project__results{ grid-template-columns:1fr; gap:1.6rem; } }

.project__next{ display:flex; flex-direction:column; gap:.5rem; padding:clamp(2.5rem,5vw,4rem) var(--pad); border-top:1px solid var(--line); cursor:pointer; }
.project__next span{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
.project__next strong{ font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,4vw,3rem); letter-spacing:-.02em; transition:color .3s var(--ease), transform .4s var(--ease); }
.project__next:hover strong{ color:var(--gold); transform:translateX(10px); }

body.no-scroll{ overflow:hidden; }

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .word{ opacity:1 !important; }
}

/* ───────────────── Blog & Journal ───────────────── */
.latest-posts{ padding-top:calc(clamp(7rem,16vh,14rem) - 3.5rem) var(--pad) 0; }
.latest-posts__head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:clamp(4rem,8vh,6rem);
}
.latest-posts__head .section__title{ margin-top:1.5rem; }
.latest-posts__view-all{
  font-family:var(--display); font-weight:500; font-size:1.05rem;
  border-bottom:1px solid var(--ink-faint); padding-bottom:.4rem;
  transition:gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:.5rem;
}
.latest-posts__view-all:hover{ color:var(--gold); gap:1rem; border-color:var(--gold); }
.latest-posts__view-all span{ transition:transform .3s var(--ease); }
.latest-posts__view-all:hover span{ transform:translateX(4px); }

.latest-posts__grid, .blog-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem);
}
.latest-posts__grid-item, .blog-grid__item{
  display:flex; height:100%; width:100%;
}
@media (max-width:960px){
  .latest-posts__grid, .blog-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .latest-posts__grid, .blog-grid{ grid-template-columns:1fr; }
  .latest-posts__head{ flex-direction:column; align-items:flex-start; gap:1.5rem; }
}

.blog-card{
  display:flex; flex-direction:column; height:100%; width:100%; text-align:left;
  border-radius:16px; border:1px solid var(--line);
  background:var(--bg-2);
  padding:0; margin:0;
  overflow:hidden;
  font:inherit; color:inherit;
  cursor:pointer;
  text-decoration:none;
  -webkit-appearance:none; appearance:none;
  transition:border-color .5s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease);
}
.blog-card:hover{
  border-color:rgba(233,162,59,.4);
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.blog-card:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}
.blog-card__media{
  aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line);
  background:var(--bg);
}
.blog-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.blog-card:hover .blog-card__media img{
  transform:scale(1.05);
}
.blog-card__content{
  padding:clamp(1.2rem,2.5vw,2rem);
  display:flex; flex-direction:column; flex-grow:1;
}
.blog-card__meta{
  display:flex; gap:.8rem; align-items:center; margin-bottom:1.2rem;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint);
}
.blog-card__meta span:nth-child(2){ color:var(--gold); }
.blog-card__title{
  font-family:var(--display); font-weight:500; font-size:clamp(1.2rem,2.2vw,1.6rem);
  line-height:1.25; margin-bottom:1rem; color:var(--ink);
  transition:color .3s var(--ease);
}
.blog-card:hover .blog-card__title{ color:var(--gold); }
.blog-card__excerpt{
  color:var(--ink-soft); font-size:.94rem; line-height:1.6; margin-bottom:1.8rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  flex-grow:1;
}
.blog-card__read-more{
  font-size:.8rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-soft); display:flex; align-items:center; gap:.4rem;
  margin-top:auto;
  transition:color .3s;
}
.blog-card:hover .blog-card__read-more{ color:var(--gold); }
.blog-card__read-more span{ transition:transform .3s var(--ease); }
.blog-card:hover .blog-card__read-more span{ transform:translateX(4px); }

/* active link in nav */
.nav__links a.active{
  color:var(--gold);
  font-weight:500;
}
.nav__links a.active::after{
  width:100% !important;
  background:var(--gold) !important;
}

/* Paginator */
.blog-paginator {
  display:flex; justify-content:center; align-items:center; gap:1.2rem;
  margin-top:clamp(3rem,6vh,5rem); width:100%;
}
.paginator-btn {
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  font-family:var(--display); font-size:.85rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.6rem 1.4rem; border-radius:8px; cursor:pointer;
  transition:all .3s var(--ease);
}
.paginator-btn:hover:not(:disabled) {
  border-color:var(--gold); color:var(--gold); background:rgba(233,162,59,.03);
}
.paginator-btn:disabled {
  opacity:.25; cursor:not-allowed;
}
.paginator-page {
  font-family:var(--display); font-size:.95rem; color:var(--ink);
  font-weight:500; letter-spacing:.05em; padding:0 1rem;
}