/* ============================================================
   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{
  position: relative;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 100px;
  padding: .5rem 1.1rem !important;
  overflow: hidden;
  z-index: 1;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  z-index: -1;
}
.nav__cta:hover {
  border-color: transparent;
  color: var(--bg) !important;
}
.nav__cta:hover::before {
  opacity: 1;
}
@media (max-width:680px){
  .nav__links a:not(.nav__cta){ display:none; }
}

/* ───────────────── HERO ───────────────── */
.hero{ position:relative; height:400vh; z-index:5; }
html.hero-static .hero{ height:100vh; }
.hero__sticky{
  position:sticky; top:0; height:100vh; width:100%; overflow:hidden;
  background:var(--bg);
}
.hero__poster,#hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__poster{ display:block; }
.hero__poster img{ display:block; width:100%; height:100%; object-fit:cover; }
#hero-canvas{ visibility:hidden; }
.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{ width: 100%; 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:16/10; 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:grid; grid-template-columns:minmax(0,1fr) minmax(7.5rem,.9fr);
  align-items:start; gap:clamp(.7rem,1.6vw,1.4rem);
  margin-top:1.1rem; padding-bottom:.4rem;
}
.work-card__meta h3{
  min-height:2.7em;
  font-family:var(--display); font-weight:500; font-size:1.05rem; line-height:1.35;
}
.work-card__meta p{
  min-height:2.9em;
  font-size:.78rem; line-height:1.45; color:var(--ink-soft); letter-spacing:.04em;
}
.work-card:focus-visible{ outline:2px solid var(--gold); outline-offset:8px; border-radius:16px; }

/* 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; } }

/* ───────────────── Journal subscription ───────────────── */
.newsletter{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.82fr); gap:clamp(2.5rem,7vw,8rem);
  align-items:start; padding-top:clamp(8rem,16vh,14rem);
}
.newsletter__copy{ max-width:40rem; }
.newsletter__title{
  font-family:var(--display); font-weight:500; line-height:1.02;
  font-size:clamp(2.7rem,6vw,5.8rem); letter-spacing:-.035em; margin-top:1.5rem;
}
.newsletter__title em{
  font-style:normal; background:linear-gradient(100deg,var(--gold),var(--cyan));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.newsletter__lead{ max-width:33rem; margin-top:1.6rem; color:var(--ink-soft); font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.65; }
.newsletter__form{
  padding:clamp(1.4rem,3vw,2.2rem); border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(145deg,rgba(233,162,59,.055),transparent 42%),var(--bg-2);
}
.newsletter__field{ display:flex; flex-direction:column; gap:.7rem; }
.newsletter__field label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.newsletter__field input{
  width:100%; min-height:52px; box-sizing:border-box; border:1px solid var(--line); border-radius:9px;
  background:rgba(0,0,0,.17); color:var(--ink); font:inherit; padding:0 1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.newsletter__field input::placeholder{ color:var(--ink-faint); }
.newsletter__field input:focus-visible{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(233,162,59,.14); }
.newsletter__consent{ display:flex; align-items:flex-start; gap:.7rem; margin-top:1.1rem; color:var(--ink-soft); font-size:.82rem; line-height:1.45; text-align:left; cursor:pointer; }
.newsletter__consent input{ width:18px; height:18px; flex:0 0 auto; margin:.08rem 0 0; accent-color:var(--gold); }
.newsletter__consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.newsletter__consent a:hover{ color:var(--gold); }
.newsletter__submit{
  width:100%; min-height:52px; margin-top:1.4rem; border:1px solid var(--gold); border-radius:9px;
  display:flex; justify-content:space-between; align-items:center; padding:0 1rem;
  background:var(--gold); color:#08080a; font-family:var(--display); font-size:1rem; font-weight:600;
  cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease);
}
.newsletter__submit:hover{ transform:translateY(-2px); background:#f0b654; }
.newsletter__submit:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.newsletter__form[aria-busy="true"] .newsletter__submit{ opacity:.62; cursor:wait; transform:none; }
.newsletter__note,.newsletter__status{ margin:1rem 0 0; font-size:.78rem; line-height:1.5; color:var(--ink-faint); }
.newsletter__status{ min-height:1.25em; }
.newsletter__status.is-success{ color:#bfe8cc; }
.newsletter__status.is-error{ color:#f3a7a0; }
.newsletter__honey{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
@media (max-width:760px){ .newsletter{ grid-template-columns:1fr; gap:2rem; } }

/* ───────────────── 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; overflow:hidden; isolation:isolate; }
.project-overlay.is-open{ display:block; }
.project-overlay__scrim{
  position:absolute; z-index:0; inset:0; background:#070709; opacity:0;
  /* solid (no backdrop-filter): fixed+backdrop-filter flickers on scroll and shows the homepage behind */
}
.project{
  position:fixed; z-index:1; 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:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.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;
  overscroll-behavior:contain; -webkit-overflow-scrolling:auto; scrollbar-gutter:stable;
}

.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__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.project__action{
  display:inline-flex; align-items:center; gap:.55rem; padding:.7rem 1rem;
  border:1px solid var(--line); border-radius:999px; color:var(--ink);
  font-size:.78rem; letter-spacing:.04em; transition:color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.project__action:hover{ color:var(--gold); border-color:var(--gold); background:rgba(233,162,59,.08); }
.project__action:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* App Store proof point for shipped macOS projects */
.project__store-proof{
  display:none; grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr); gap:clamp(1.5rem,4vw,4rem);
  align-items:center; margin-top:clamp(2.5rem,5vw,4.5rem); padding:clamp(1.25rem,3vw,2.2rem);
  border:1px solid rgba(255,255,255,.1); border-radius:22px; overflow:hidden;
  background:
    radial-gradient(100% 140% at 0% 0%, rgba(255,255,255,.1), transparent 55%),
    radial-gradient(100% 120% at 100% 100%, rgba(91,176,255,.13), transparent 58%),
    rgba(255,255,255,.035);
  box-shadow:0 26px 70px rgba(0,0,0,.24);
}
.project__store-proof.is-visible{ display:grid; }
.project__store-copy{ min-width:0; padding:.25rem 0; }
.project__store-kicker{ margin:0 0 .85rem; color:var(--gold); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }
.project__store-copy h2{ margin:0; font-family:var(--display); font-size:clamp(1.65rem,3vw,2.6rem); line-height:1.05; letter-spacing:-.025em; font-weight:600; }
.project__store-copy > p:not(.project__store-kicker){ margin:1rem 0 1.5rem; color:var(--ink-soft); font-size:.98rem; line-height:1.6; max-width:30rem; }
.project__store-link{
  display:inline-flex; align-items:center; gap:.7rem; min-height:54px; padding:.6rem .85rem .6rem .72rem;
  border:1px solid rgba(255,255,255,.18); border-radius:13px; background:#f5f5f7; color:#0b0b0d;
  box-shadow:0 12px 28px rgba(0,0,0,.28); transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.project__store-link:hover{ color:#0b0b0d; background:#fff; transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.38); }
.project__store-link:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.project__store-apple{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif; font-size:2rem; line-height:1; letter-spacing:-.08em; }
.project__store-link-copy{ display:flex; flex-direction:column; gap:.08rem; line-height:1; }
.project__store-link-copy small{ color:#0b0b0d; font-family:var(--display); font-size:.57rem; font-weight:500; letter-spacing:.01em; }
.project__store-link-copy strong{ color:#0b0b0d; font-family:var(--display); font-size:1.08rem; font-weight:600; letter-spacing:-.035em; }
.project__store-arrow{ margin-left:.25rem; font-size:1.05rem; opacity:.55; }
.project__store-shot{ margin:0; min-width:0; }
.project__store-shot img{ width:100%; height:auto; display:block; filter:drop-shadow(0 30px 36px rgba(0,0,0,.58)); }
@media (max-width:760px){
  .project__store-proof{ grid-template-columns:1fr; gap:1.5rem; }
  .project__store-shot{ order:-1; }
}

.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__gallery--pickly{
  --pickly-gallery-columns:3;
  display:grid; grid-template-columns:repeat(var(--pickly-gallery-columns),minmax(0,1fr));
  align-items:start; gap:clamp(.7rem,1.8vw,1.4rem);
  margin:clamp(2rem,4vw,3.25rem) 0;
}
.project__gallery--posters{ --pickly-gallery-columns:3; max-width:1120px; margin-inline:auto; }
.project__gallery--screens{ --pickly-gallery-columns:3; max-width:1120px; margin-inline:auto; }
.project__gallery--onboarding{ --pickly-gallery-columns:3; max-width:1120px; margin-inline:auto; }
.project__gallery-divider{
  grid-column:1/-1; display:flex; align-items:baseline; flex-wrap:wrap; gap:.8rem 1.2rem;
  padding:.25rem 0 .15rem; margin-top:.35rem; border-top:1px solid var(--line);
}
.project__gallery-divider span{
  color:var(--ink-faint); font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; white-space:nowrap;
}
.project__gallery-divider strong{
  color:var(--ink-soft); font-family:var(--display); font-size:clamp(1.05rem,1.8vw,1.35rem); font-weight:500; letter-spacing:-.01em;
}
.project__gallery--pair .project__gallery-card:first-child{ grid-column:2; }
.project__gallery--pair .project__gallery-card:nth-child(2){ grid-column:3; }
.project__gallery-card{
  min-width:0; margin:0; overflow:hidden; border:1px solid rgba(255,255,255,.1);
  border-radius:14px; background:#090a09; box-shadow:0 18px 44px rgba(0,0,0,.22);
}
.project__gallery--screens .project__gallery-card,
.project__gallery--onboarding .project__gallery-card{
  border-color:rgba(255,255,255,.16); border-radius:26px; padding:6px;
  background:#050505; box-shadow:0 22px 52px rgba(0,0,0,.32);
}
.project__gallery-card img{
  display:block; width:100%; height:auto; object-fit:contain;
}
.project__gallery--screens .project__gallery-card img,
.project__gallery--onboarding .project__gallery-card img{ border-radius:20px; }
.project__gallery--screens .project__gallery-card figcaption{
  min-height:2.8rem; display:flex; align-items:center; padding:.55rem .75rem;
  border-top:1px solid rgba(255,255,255,.08); color:var(--ink-soft);
  font-size:.72rem; letter-spacing:.03em;
}
.project__gallery--pickly:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; }
@media (max-width:1000px) and (min-width:761px){
  .project__gallery--posters,.project__gallery--screens,.project__gallery--onboarding{ --pickly-gallery-columns:2; max-width:720px; }
  .project__gallery--pair .project__gallery-card:first-child,
  .project__gallery--pair .project__gallery-card:nth-child(2){ grid-column:auto; }
}
@media (max-width:760px){
  .project__gallery--pickly{
    display:grid; grid-auto-flow:column; grid-template-columns:none;
    grid-auto-columns:min(76vw,320px); gap:.85rem; overflow-x:auto; overflow-y:hidden;
    margin-inline:calc(-1 * var(--pad)); padding:.2rem var(--pad) 1rem;
    scroll-padding-inline:var(--pad); scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; scrollbar-width:none;
  }
  .project__gallery--pickly::-webkit-scrollbar{ display:none; }
  .project__gallery--pickly .project__gallery-card{ grid-column:auto; scroll-snap-align:start; }
  .project__gallery--posters .project__gallery-divider{ display:none; }
  .project__gallery--screens{ grid-auto-columns:min(68vw,280px); }
  .project__gallery--onboarding{ grid-auto-columns:min(68vw,280px); }
}
.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); }

html.no-scroll{ overflow:hidden !important; }
body.no-scroll{
  position:fixed; inset:0; width:100%; overflow:hidden;
  top:var(--scroll-lock-top, 0px); overscroll-behavior:none;
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .hero{ height:100vh; }
  .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;
}

/* ───────────────── SEO Dashboard ───────────────── */
.seo-header {
  margin-bottom: 3rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2rem;
}
.seo-header__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}
.seo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }

@media (max-width: 1024px) {
  .col-8, .col-4, .col-6 { grid-column: span 12; }
}

.seo-card {
  background: rgba(243, 239, 231, 0.03);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.2rem;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.seo-card:hover {
  border-color: rgba(243, 239, 231, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.seo-card__title {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.seo-card__title svg {
  color: var(--gold);
}

/* KPI Indicators */
.seo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}
.seo-kpi {
  padding: 1.5rem;
  background: rgba(243, 239, 231, 0.01);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.seo-kpi__val {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.seo-kpi__label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Interactive SVG Chart Elements */
.health-gauge-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
  position: relative;
}
.health-gauge__circle {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.2s var(--ease);
}
.health-gauge__value {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--ink);
}
.health-gauge__pct {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gold);
}
.health-gauge__lbl {
  margin-top: 1.5rem;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

/* List of Badges & Status */
.seo-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.seo-badge--pass {
  color: #22C55E;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.15);
}
.seo-badge--warn {
  color: var(--gold);
  background: rgba(233, 162, 59, 0.08);
  border: 1px solid rgba(233, 162, 59, 0.15);
}
.seo-badge--fail {
  color: #EF4444;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Recommendations Feed */
.rec-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rec-item {
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 12px;
  background: rgba(243, 239, 231, 0.015);
  border: 1px solid var(--line-soft);
  align-items: flex-start;
  transition: border-color 0.3s var(--ease);
}
.rec-item:hover {
  border-color: rgba(243, 239, 231, 0.12);
}
.rec-item__icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.rec-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.rec-item__title {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
}
.rec-item__desc {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Bubble/Tag Cloud for Keywords */
.cloud-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.bubble-tag {
  font-family: var(--body);
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: rgba(243, 239, 231, 0.02);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  cursor: default;
  transition: all 0.3s var(--ease);
}
.bubble-tag:hover {
  border-color: var(--gold);
  color: var(--ink);
  background: rgba(233, 162, 59, 0.05);
  box-shadow: 0 0 15px rgba(233, 162, 59, 0.1);
  transform: translateY(-1px);
}
.bubble-tag--active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(233, 162, 59, 0.08);
}

/* Collapsible Audit List Table */
.audit-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.audit-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(243, 239, 231, 0.015);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.audit-row:hover {
  border-color: rgba(243, 239, 231, 0.18);
}
.audit-row__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.8rem;
  cursor: pointer;
  user-select: none;
}
.audit-row__title {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
  font-size: 1.05rem;
  flex-grow: 1;
  margin-right: 2rem;
}
.audit-row__stats {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-shrink: 0;
}
.audit-row__chevron {
  transition: transform 0.3s var(--ease);
  color: var(--ink-faint);
}
.audit-row.active .audit-row__chevron {
  transform: rotate(180deg);
  color: var(--gold);
}
.audit-row__details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
  border-top: 0px solid var(--line);
  background: rgba(0, 0, 0, 0.15);
}
.audit-row.active .audit-row__details {
  border-top-width: 1px;
}
.audit-row__details-inner {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.audit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-soft);
  gap: 2rem;
}
.audit-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.audit-item__label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.audit-item__title {
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
}
.audit-item__desc {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.audit-item__val {
  font-family: var(--body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: right;
  max-width: 50ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Custom horizontal stacked bar chart */
.stacked-bar {
  height: 12px;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  background: var(--line);
  margin-bottom: 1.5rem;
}
.stacked-bar__segment {
  height: 100%;
  transition: width 0.5s var(--ease);
}
.stacked-bar__segment--pass { background: #22C55E; }
.stacked-bar__segment--warn { background: var(--gold); }
.stacked-bar__segment--fail { background: #EF4444; }

.stacked-bar-legend {
  display: flex;
  gap: 1.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.stacked-bar-legend__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.stacked-bar-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Filter controls */
.filter-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.filter-btn {
  background: rgba(243, 239, 231, 0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-btn:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.filter-btn.active {
  background: rgba(233, 162, 59, 0.06);
  border-color: var(--gold);
  color: var(--gold);
}

/* ───────────────── Contact Form ───────────────── */
.contact-form {
  width: 100%;
  max-width: 640px;
  margin: 4.5rem auto 0 auto;
  text-align: left;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) {
  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.contact-form__group {
  position: relative;
  margin-bottom: 2rem;
}
.contact-form__input {
  width: 100%;
  padding: 0.8rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(243,239,231,0.15);
  font-family: var(--font);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.4s var(--ease);
}
.contact-form__input::placeholder {
  color: transparent;
}
.contact-form__label {
  position: absolute;
  left: 0;
  top: 0.8rem;
  font-size: 1rem;
  color: var(--ink-soft);
  pointer-events: none;
  transition: transform 0.4s var(--ease), font-size 0.4s var(--ease), color 0.4s var(--ease);
  transform-origin: 0 0;
}
.contact-form__input:focus ~ .contact-form__label,
.contact-form__input:not(:placeholder-shown) ~ .contact-form__label {
  transform: translateY(-1.2rem) scale(0.8);
  color: var(--gold);
}
.contact-form__input:focus {
  border-bottom-color: var(--gold);
}
textarea.contact-form__input {
  resize: none;
}
.contact-form__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 1.2rem 2rem;
  background: transparent;
  border: 1px solid rgba(243,239,231,0.15);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.contact-form__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: 1;
}
.contact-form__submit span {
  position: relative;
  z-index: 2;
  transition: color 0.4s var(--ease), font-weight 0.4s var(--ease);
}
.contact-form__submit:hover {
  border-color: transparent;
  transform: translateY(-2px);
}
.contact-form__submit:hover span {
  color: var(--bg);
  font-weight: 600;
}
.contact-form__submit:hover::before {
  opacity: 1;
}
.contact-form__submit:active {
  transform: translateY(0);
}
.contact-form__spinner {
  display: none;
  position: relative;
  z-index: 2;
  width: 1.2rem;
  height: 1.2rem;
  animation: rotate-spinner 2s linear infinite;
}
.contact-form__spinner circle {
  stroke: var(--ink);
  stroke-linecap: round;
  animation: dash-spinner 1.5s ease-in-out infinite;
}
@keyframes rotate-spinner {
  100% { transform: rotate(360deg); }
}
@keyframes dash-spinner {
  0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}
.contact-form.is-sending .contact-form__spinner {
  display: block;
}
.contact-form.is-sending .contact-form__submit {
  pointer-events: none;
  border-color: rgba(243,239,231,0.1);
}
.contact-form.is-sending .contact-form__submit::before {
  opacity: 0.1;
}
.contact-form__status {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.contact-form__status.is-visible {
  opacity: 1;
}
.contact-form__status.is-success {
  color: #22C55E;
}
.contact-form__status.is-error {
  color: #EF4444;
}

/* ───────────────── Static journal articles ───────────────── */
.article-page {
  position: relative;
  z-index: 1;
  padding: clamp(7rem, 12vw, 10rem) var(--pad) clamp(5rem, 10vw, 9rem);
}
.article-shell { width: min(100%, 860px); margin: 0 auto; }
.article-back {
  display: inline-flex;
  margin-bottom: clamp(2.25rem, 6vw, 4rem);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.article-back:hover { color: var(--gold); transform: translateX(-4px); }
.article-title {
  max-width: 15ch;
  margin: .75rem 0 1.25rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.5rem, 6.8vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .98;
}
.article-deck {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.65;
}
.article-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 2.5rem; }
.article-tags span {
  padding: .4rem .7rem;
  border: 1px solid rgba(233,162,59,.38);
  border-radius: 999px;
  color: var(--gold-soft);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.article-cover { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #060607; }
.article-cover img { display: block; width: 100%; aspect-ratio: 1.4 / 1; object-fit: cover; }
.article-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 clamp(3.5rem, 8vw, 6rem);
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.article-meta div { min-width: 0; }
.article-meta dt { margin-bottom: .35rem; color: var(--gold); font-family: var(--mono); font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; }
.article-meta dd { margin: 0; color: var(--ink-soft); font-size: .9rem; overflow-wrap: anywhere; }
.article-prose { width: min(100%, 720px); }
.article-prose h2 {
  margin: clamp(3rem, 7vw, 5rem) 0 1.15rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.65rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.05;
}
.article-prose p { margin: 0 0 1.35rem; color: var(--ink-soft); font-size: clamp(1.04rem, 1.8vw, 1.17rem); line-height: 1.78; white-space: pre-line; }
.article-sources { width: min(100%, 720px); margin-top: clamp(4rem, 10vw, 7rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.article-sources ol { display: grid; gap: .9rem; margin: 1.35rem 0 0; padding-left: 1.35rem; color: var(--ink-soft); }
.article-sources li { padding-left: .2rem; line-height: 1.5; }
.article-sources a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.article-sources a:hover { color: var(--gold); }
.article-sources span { color: rgba(243,239,231,.5); }
@media (max-width: 640px) {
  .article-page { padding-top: 6.5rem; }
  .article-meta { grid-template-columns: 1fr; gap: .8rem; }
  .article-cover { border-radius: 12px; }
}