/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --black:#060606;
  --ink:#0c0c0c;
  --depth:#111;
  --surface:#161616;
  --panel:#1c1c1c;
  --panel2:#222;
  --stroke:rgba(255,255,255,0.06);
  --stroke2:rgba(255,255,255,0.11);
  --stroke3:rgba(255,255,255,0.18);
  --white:#fff;
  --off:#f0ece6;
  --silver:#c0bdb8;
  --mid:#787878;
  --dim:rgba(255,255,255,0.32);
  --subtle:rgba(255,255,255,0.18);
  --void:#000;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --display:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --inter:'Inter',system-ui,sans-serif;
}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--black);color:var(--white);font-family:var(--sans);font-weight:400;overflow-x:hidden;line-height:1.6;}
@media(pointer:fine){*{cursor:none!important;}}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid rgba(138,125,240,.8);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){
  #cur,#cur-dot,#cur-ring,#cur-label{display:none!important;}
  @media(pointer:fine){*{cursor:auto!important;}}
}

/* ── CURSOR ── */
#cur{position:fixed;z-index:99999;pointer-events:none;top:0;left:0;}
#cur-dot{
  position:absolute;width:3px;height:3px;background:rgba(255,255,255,.65);border-radius:50%;
  transform:translate(-50%,-50%);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
}
#cur-ring{
  position:fixed;top:0;left:0;z-index:99998;pointer-events:none;
  width:28px;height:28px;border:1px solid rgba(255,255,255,.16);border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .5s var(--ease-out),border-color .5s var(--ease-out),opacity .4s var(--ease-out);
}
body.hov #cur-dot{opacity:0;transform:translate(-50%,-50%) scale(0);}
body.hov #cur-ring{transform:translate(-50%,-50%) scale(1.4);border-color:rgba(255,255,255,.28);}
body.cur-out #cur-dot,body.cur-out #cur-ring{opacity:0;}

/* ── CANVAS BG ── */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9;}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(6,6,6,.94);backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5rem;height:72px;
}
nav::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(138,125,240,.3),
    rgba(255,255,255,.08),
    rgba(138,125,240,.3),
    transparent
  );
  pointer-events:none;
}
.logo{
  font-family:var(--display);font-size:1.5rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;color:var(--white);
  display:flex;align-items:center;gap:.65rem;
}
.logo sub{
  font-family:var(--inter);font-size:.45rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--silver);vertical-align:baseline;
  margin-left:.3rem;
}
.logo-sub{
  font-size:.5rem;letter-spacing:.18em;vertical-align:middle;
  font-family:var(--inter);text-transform:uppercase;color:var(--silver);
  margin-left:.3rem;
}
.nav-avatar{
  width:38px;height:38px;border-radius:50%;
  object-fit:cover;object-position:center 12%;
  border:1.5px solid rgba(138,125,240,.55);
  box-shadow:0 0 0 1px rgba(138,125,240,.12),0 0 14px rgba(138,125,240,.3);
  flex-shrink:0;display:block;transition:box-shadow .3s;
}
.nav-avatar:hover{
  box-shadow:0 0 0 1px rgba(138,125,240,.25),0 0 22px rgba(138,125,240,.5);
}
.nav-links{display:flex;gap:3.5rem;list-style:none;}
.nav-links a{
  font-size:.7rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);transition:color .25s;
}
.nav-links a:hover{color:var(--white);}
.nav-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--white);border:1px solid var(--stroke2);
  padding:.6rem 1.6rem;
  transition:border-color .25s,background .25s;
}
.nav-cta::after{content:'↗';}
.nav-cta:hover{border-color:var(--stroke3);background:rgba(255,255,255,.04);}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
#hero{
  position:relative;z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 480px;
  align-items:center;
  padding:0 5rem;
  gap:5rem;
  border-bottom:1px solid var(--stroke);
}
.hero-left{
  padding:9rem 0 7rem;
  display:flex;flex-direction:column;
  gap:0;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:1rem;
  font-size:.65rem;font-weight:400;letter-spacing:.25em;text-transform:uppercase;
  color:var(--mid);margin-bottom:3rem;
  opacity:0;animation:riseUp .9s .1s cubic-bezier(.16,1,.3,1) forwards;
}
.eyebrow-line{width:32px;height:1px;background:var(--stroke3);}
.hero-h1{
  font-family:var(--display);
  font-size:clamp(5rem,8.5vw,9rem);
  font-weight:300;
  line-height:.92;
  letter-spacing:-.02em;
  margin-bottom:2.8rem;
  opacity:0;animation:riseUp .9s .25s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-h1 span{display:block;}
.hero-h1 .italic{font-style:italic;font-weight:300;color:var(--silver);}
.hero-h1 .bold{font-weight:600;}
.hero-body{
  font-size:.95rem;font-weight:300;color:var(--mid);
  line-height:1.95;max-width:400px;
  margin-bottom:3.5rem;
  opacity:0;animation:riseUp .9s .4s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-actions{
  display:flex;align-items:center;gap:1.5rem;
  margin-bottom:5rem;
  opacity:0;animation:riseUp .9s .52s cubic-bezier(.16,1,.3,1) forwards;
}
.btn-fill{
  display:inline-flex;align-items:center;gap:.65rem;
  background:rgba(255,255,255,.92);color:var(--black);
  padding:.8rem 2.1rem;
  font-size:.67rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  border:none;
  transition:background .55s var(--ease-out),opacity .55s var(--ease-out);
}
.btn-fill:hover{background:var(--white);}
.btn-line{
  display:inline-flex;align-items:center;gap:.65rem;
  background:transparent;color:rgba(255,255,255,.38);
  padding:.8rem 2.1rem;
  font-size:.65rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14);
  transition:color .55s var(--ease-out),border-color .55s var(--ease-out);
}
.btn-line:hover{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.3);}
.hero-metrics{
  display:flex;gap:0;
  border-top:1px solid var(--stroke);
  opacity:0;animation:riseUp .9s .65s cubic-bezier(.16,1,.3,1) forwards;
}
.metric{
  flex:1;padding:2.5rem 0 0;border-right:1px solid var(--stroke);
}
.metric:last-child{border-right:none;}
.metric-n{
  font-family:var(--display);font-size:3.2rem;font-weight:300;
  line-height:1;letter-spacing:-.01em;color:var(--white);
}
.metric-n sup{font-size:1.4rem;font-family:var(--sans);font-weight:400;color:var(--silver);}
.metric-l{
  font-size:.62rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);margin-top:.6rem;
}

/* HERO RIGHT */
.hero-right{
  padding:7rem 0;
  display:flex;justify-content:center;align-items:center;
  opacity:0;animation:riseRight .9s .3s cubic-bezier(.16,1,.3,1) forwards;
}
.photo-wrap{position:relative;width:100%;}
.photo-frame{
  position:relative;overflow:hidden;aspect-ratio:2/3;
  border:1px solid var(--stroke2);
}
.photo-frame img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;filter:contrast(1.08) brightness(.92) saturate(.9);
}
.photo-frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(6,6,6,.92) 100%);
}
.photo-corners span{
  position:absolute;width:18px;height:18px;z-index:3;
}
.pc-tl{top:-1px;left:-1px;border-top:2px solid var(--white);border-left:2px solid var(--white);}
.pc-tr{top:-1px;right:-1px;border-top:2px solid var(--white);border-right:2px solid var(--white);}
.pc-bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--white);border-left:2px solid var(--white);}
.pc-br{bottom:-1px;right:-1px;border-bottom:2px solid var(--white);border-right:2px solid var(--white);}
@keyframes riseUp{
  from{opacity:0;transform:translateY(32px);}
  to{opacity:1;transform:none;}
}
@keyframes riseRight{
  from{opacity:0;transform:translateX(32px);}
  to{opacity:1;transform:none;}
}

/* ══════════════════════════════
   TICKER
══════════════════════════════ */
.ticker{
  position:relative;z-index:1;
  background:var(--surface);border-bottom:1px solid var(--stroke);
  padding:.85rem 0;overflow:hidden;
}
.ticker-track{
  display:flex;gap:4rem;
  animation:tickscroll 25s linear infinite;width:max-content;
}
.ticker-item{
  display:flex;align-items:center;gap:1.5rem;white-space:nowrap;
  font-size:.62rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);
}
.ticker-sep{color:var(--stroke3);font-size:.5rem;}
@keyframes tickscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════
   SECTION BASE
══════════════════════════════ */
.s{position:relative;z-index:1;padding:7rem 5rem;}
.s--ink{background:var(--ink);}
.s--surface{background:var(--surface);}
.s--depth{background:var(--depth);}

.s-label{
  display:flex;align-items:center;gap:.9rem;
  font-size:.62rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mid);margin-bottom:1.8rem;
}
.s-label-line{width:28px;height:1px;background:var(--stroke3);}
.s-num{
  font-family:var(--display);font-size:.75rem;font-weight:300;
  letter-spacing:.1em;color:var(--subtle);
}
.s-h{
  font-family:var(--display);
  font-size:clamp(3.2rem,5.5vw,5.5rem);
  font-weight:300;line-height:.96;
  letter-spacing:-.015em;
}
.s-h b{font-weight:600;display:block;}
.s-h i{font-style:italic;color:var(--silver);display:block;}
.s-h em{font-style:italic;color:var(--silver);}

/* ════════ COMMUNITY (live chat) ════════ */
#community{position:relative;z-index:1;overflow:hidden;padding:9rem 5rem;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke);background:var(--ink);}

.comm-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:url('background2.png');background-size:cover;background-position:center;filter:brightness(.45) saturate(1.1) contrast(1.05);transform:scale(1.05);animation:bgDrift 28s ease-in-out infinite alternate;}
@keyframes bgDrift{0%{transform:scale(1.05) translate(0,0);}100%{transform:scale(1.08) translate(-1.2%,-.6%);}}
.comm-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 60% 75% at 22% 50%,rgba(6,6,6,.78) 0%,rgba(6,6,6,.45) 50%,transparent 80%),radial-gradient(ellipse 65% 80% at 78% 50%,rgba(6,6,6,.55) 0%,rgba(6,6,6,.3) 50%,transparent 80%),linear-gradient(180deg,rgba(6,6,6,.45) 0%,transparent 25%,transparent 75%,rgba(6,6,6,.7) 100%);}

.disc-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.15fr;gap:5rem;align-items:center;max-width:1500px;margin:0 auto;}
.disc-server{display:flex;align-items:center;gap:1rem;margin-bottom:2.5rem;}
.disc-icon{width:62px;height:62px;border-radius:16px;overflow:hidden;flex-shrink:0;border:1px solid rgba(138,125,240,.3);box-shadow:0 8px 24px -8px rgba(138,125,240,.3);background:#1a1a1f;}
.disc-icon img{width:100%;height:100%;object-fit:cover;display:block;}
.disc-server-name{font-family:var(--display);font-size:1.15rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.45rem;}
.disc-pill-sm{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:.58rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);}
.disc-pulse{width:7px;height:7px;border-radius:50%;background:var(--silver);}
.disc-pulse--live{background:#3ba55d;box-shadow:0 0 0 0 rgba(59,165,93,.6);animation:livePulse 2.2s ease-out infinite;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(59,165,93,.55);}70%{box-shadow:0 0 0 8px rgba(59,165,93,0);}100%{box-shadow:0 0 0 0 rgba(59,165,93,0);}}
.disc-h{font-family:var(--serif);font-size:clamp(3rem,5vw,4.8rem);font-weight:300;line-height:.95;letter-spacing:-.02em;margin-bottom:1.6rem;}
.disc-h em{font-style:italic;color:var(--silver);}
.disc-desc{font-family:var(--sans);font-size:.92rem;font-weight:300;color:rgba(255,255,255,.55);line-height:1.85;max-width:420px;margin-bottom:2.4rem;}
.disc-cta{display:inline-flex;align-items:center;gap:.7rem;background:#5865F2;color:#fff;padding:1rem 2.2rem;font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:none;text-decoration:none;transition:background .25s,transform .2s,box-shadow .25s;box-shadow:0 10px 30px -10px rgba(88,101,242,.6);}
.disc-cta:hover{background:#4752c4;transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(88,101,242,.7);}

.disc-card{position:relative;border:1px solid rgba(138,125,240,.18);background:rgba(8,8,12,.78);backdrop-filter:blur(28px) saturate(1.2);-webkit-backdrop-filter:blur(28px) saturate(1.2);overflow:hidden;box-shadow:0 50px 140px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02) inset,0 1px 0 0 rgba(255,255,255,.04) inset;}
.disc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(138,125,240,.4),transparent);z-index:5;pointer-events:none;}
.disc-stats{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--stroke);}
.disc-stat{padding:2rem 1.6rem;border-right:1px solid var(--stroke);position:relative;}
.disc-stat:last-child{border-right:none;}
.disc-stat-val{font-family:var(--serif);font-size:2.6rem;font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--white);}
.disc-stat-val sup{font-size:.95rem;font-family:var(--sans);color:var(--silver);vertical-align:super;}
.disc-stat-label{font-family:var(--display);font-size:.55rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-top:.7rem;}
.disc-stat[data-live]::after{content:'';position:absolute;top:1rem;right:1rem;width:6px;height:6px;border-radius:50%;background:#3ba55d;box-shadow:0 0 0 0 rgba(59,165,93,.6);animation:livePulse 2.2s ease-out infinite;}
.disc-channel{display:flex;align-items:center;gap:.5rem;padding:.95rem 1.4rem;border-bottom:1px solid var(--stroke);font-family:var(--display);font-size:.72rem;font-weight:500;color:var(--silver);}
.disc-hash{color:var(--mid);font-size:.9rem;}
.disc-live{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.52rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3ba55d;}
.disc-live span{width:5px;height:5px;border-radius:50%;background:#3ba55d;animation:livePulse 2.2s ease-out infinite;}

/* Live chat container — fixed height, messages cycle inside */
.disc-msgs{position:relative;height:340px;overflow:hidden;padding:.4rem 0 .2rem;display:flex;flex-direction:column;justify-content:flex-end;}
.disc-msg{display:flex;align-items:flex-start;gap:.85rem;padding:.7rem 1.4rem;border-left:2px solid transparent;flex-shrink:0;transition:background .18s,border-color .18s;animation:msgSlideIn .55s cubic-bezier(.2,.85,.3,1);}
.disc-msg:hover{background:rgba(138,125,240,.05);border-left-color:rgba(138,125,240,.4);}
.disc-msg.leaving{animation:msgFadeOut .5s cubic-bezier(.65,0,.25,1) forwards;}
@keyframes msgSlideIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes msgFadeOut{0%{opacity:1;max-height:120px;padding-top:.7rem;padding-bottom:.7rem;}100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin:0;transform:translateY(-6px);}}

.disc-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#1a1a1f;}
.disc-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.disc-msg-body{flex:1;min-width:0;}
.disc-msg-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.22rem;}
.disc-user{font-family:var(--display);font-size:.8rem;font-weight:600;color:#c9d0ff;}
.disc-user.mod{color:#a78bfa;}
.disc-time{font-family:var(--sans);font-size:.55rem;font-weight:300;color:rgba(255,255,255,.25);letter-spacing:.03em;}
.disc-text{font-family:var(--sans);font-size:.85rem;font-weight:300;color:rgba(255,255,255,.66);line-height:1.5;}

/* Typing indicator */
.disc-typing{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.4rem .8rem;font-family:var(--sans);font-size:.62rem;font-weight:300;color:rgba(255,255,255,.32);font-style:italic;border-top:1px solid var(--stroke);min-height:34px;}
.disc-typing-dots{display:inline-flex;gap:3px;margin-right:.3rem;}
.disc-typing-dots span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);animation:typing 1.4s infinite ease-in-out;}
.disc-typing-dots span:nth-child(2){animation-delay:.2s;}
.disc-typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-3px);opacity:1;}}

@media(max-width:1000px){#community{padding:5rem 2rem;}.disc-wrap{grid-template-columns:1fr;gap:3rem;}.disc-msgs{height:300px;}}

/* ══════════════════════════════
   PORTFOLIO
══════════════════════════════ */
#work .work-hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:4rem;
  padding-bottom:3rem;
  border-bottom:1px solid var(--stroke);
}
.work-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:1px;background:var(--stroke);
  border:1px solid var(--stroke);
}
.wc{
  position:relative;overflow:hidden;background:var(--black);
  transition:background .3s;
}
.wc:nth-child(1){grid-column:span 7;}
.wc:nth-child(2){grid-column:span 5;}
.wc:nth-child(3){grid-column:span 5;}
.wc:nth-child(4){grid-column:span 7;}
.wc-img{
  aspect-ratio:16/9;background:var(--depth);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;
}
.wc-bg-text{
  font-family:var(--display);font-size:5rem;font-weight:300;
  color:rgba(255,255,255,.03);letter-spacing:.1em;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s;
}
.wc:hover .wc-bg-text{transform:scale(1.06);opacity:.015;}
.wc-overlay{
  position:absolute;inset:0;
  background:rgba(6,6,6,.72);backdrop-filter:blur(3px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  opacity:0;transition:opacity .3s;
}
.wc:hover .wc-overlay{opacity:1;}
.wc-play{
  width:56px;height:56px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  transform:scale(.75) translateY(8px);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.wc:hover .wc-play{transform:scale(1) translateY(0);}
.wc-play-tri{width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:16px solid rgba(255,255,255,.85);margin-left:3px;}
.wc-overlay-lbl{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);
  transform:translateY(8px);transition:transform .35s .05s cubic-bezier(.16,1,.3,1);
}
.wc:hover .wc-overlay-lbl{transform:translateY(0);}
.wc-meta{
  padding:1.6rem 2rem;
  border-top:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-between;
}
.wc-cat{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);margin-bottom:.3rem;}
.wc-title{font-family:var(--display);font-size:1.3rem;font-weight:300;letter-spacing:.02em;}
.wc-arr{
  font-size:1rem;color:var(--subtle);
  transition:transform .25s,color .25s;
}
.wc:hover .wc-arr{transform:translate(4px,-4px);color:var(--white);}

/* ══════════════════════════════
   PROCESS (replaces TOOLS)
══════════════════════════════ */

/* ══════════════════════════════
   TESTIMONIALS
══════════════════════════════ */

/* ══════════════════════════════
   CONTACT
══════════════════════════════ */
#contact{
  position:relative;z-index:1;
  background:var(--black);
  overflow:hidden;
}
.contact-wrap{max-width:1300px;margin:0 auto;padding:0 5rem;}
.contact-grid{
  display:grid;grid-template-columns:1fr 1.35fr;
  gap:4rem;align-items:center;
  padding:3.5rem 0 3rem;
}
.contact-h{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.8rem,2.8vw,2.8rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--white);
  margin:1.2rem 0 1.4rem;
}
.contact-desc{
  font-family:var(--sans);font-size:.88rem;font-weight:300;
  color:rgba(255,255,255,.62);line-height:1.85;
  margin-bottom:1.5rem;
}
.contact-meta{
  display:flex;flex-direction:column;gap:.9rem;
  margin-bottom:1.8rem;
  padding-top:1.2rem;
  border-top:1px solid var(--stroke);
}
.contact-meta-row{
  display:flex;align-items:center;justify-content:space-between;
  max-width:320px;
}
.contact-meta-l{
  font-family:var(--display);font-size:.55rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.contact-meta-v{
  font-family:var(--display);font-size:.75rem;font-weight:400;
  color:rgba(255,255,255,.72);
  display:flex;align-items:center;gap:.5rem;
}
.c-avail-dot{
  width:6px;height:6px;border-radius:50%;background:#3ba55d;
  box-shadow:0 0 0 0 rgba(59,165,93,.6);
  animation:livePulse 2.2s ease-out infinite;
}
.contact-right .cform{
  background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.06);
  padding:2.5rem;
}
.csoc-row{
  display:flex;align-items:flex-end;gap:.75rem;
  justify-content:flex-start;
  padding-bottom:0;margin-top:0;
}
.contact-subtext{
  font-size:.88rem;font-weight:300;color:var(--mid);
  margin-top:1.5rem;line-height:1.9;
}
@media(max-width:900px){
  .contact-wrap{padding:0 2rem;}
  .contact-grid{grid-template-columns:1fr;gap:3rem;padding:5rem 0 3rem;}
}
.cform{}
.cfield{
  margin-bottom:0;
  border-bottom:1px solid var(--stroke2);
  transition:border-color .25s;
}
.cfield:focus-within{border-bottom-color:var(--stroke3);}
.cfield input,.cfield textarea{
  width:100%;background:transparent;border:none;
  padding:1.4rem 0;
  font-family:var(--inter);font-size:.95rem;font-weight:300;
  color:var(--white);outline:none;
}
.cfield input::placeholder,.cfield textarea::placeholder{
  color:rgba(255,255,255,.2);font-size:.9rem;
}
.cfield textarea{min-height:120px;resize:none;}
.csend-wrap{margin-top:3rem;text-align:center;}
.cform-status{
  margin-top:1rem;font-size:.82rem;text-align:center;min-height:1.2em;
  transition:opacity .25s;
}
.cform-status:empty{opacity:0;}
.cform-status.success{color:rgba(138,225,150,.9);}
.cform-status.error{color:rgba(255,110,110,.9);}
.csend{
  display:inline-flex;align-items:center;gap:.9rem;
  background:var(--white);color:var(--black);
  padding:1.1rem 3rem;
  font-family:var(--inter);font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  border:none;cursor:pointer;
  transition:background .2s,transform .15s;
}
.csend:hover{background:var(--off);transform:translateY(-2px);}
.csend-ico{
  width:24px;height:24px;background:rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;
}
.csoc-row{
  display:flex;justify-content:center;
  align-items:flex-end;
  gap:.75rem;
  margin-top:3rem;
  padding-bottom:8px;
}
.csoc{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border:1px solid var(--stroke2);
  color:var(--silver);
  text-decoration:none;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),
             color .2s ease,
             border-color .2s ease,
             box-shadow .2s ease;
  transform-origin:bottom center;
  will-change:transform;
  flex-shrink:0;
}
.csoc:hover{
  color:var(--white);
  border-color:var(--stroke3);
  box-shadow:0 8px 32px -8px rgba(138,125,240,.35);
}
.btt{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin-top:4rem;
  font-size:.62rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mid);transition:color .2s;
}
.btt:hover{color:var(--white);}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */

/* ══════════════════════════════
   REVEAL
══════════════════════════════ */
.rev{opacity:0;transform:translateY(36px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.rev.in{opacity:1;transform:none;}
.rev-l{opacity:0;transform:translateX(-30px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1);}
.rev-l.in{opacity:1;transform:none;}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:1100px){
  nav{padding:0 2.5rem;}
  .nav-links{display:none;}
  #hero{grid-template-columns:1fr;padding:5.5rem 2.5rem 4rem;gap:3rem;}
  .hero-h1{font-size:clamp(4rem,9vw,6rem);}
  .hero-right{justify-content:flex-start;}
  .photo-wrap{max-width:300px;}
  .s{padding:5rem 2.5rem;}
  .work-grid{grid-template-columns:1fr;}.wc:nth-child(n){grid-column:span 1;}
}

/* ════════════════════════════════════
   CINEMATIC HERO UPGRADE
════════════════════════════════════ */
#hero{
  position:relative;
  padding:0 6rem;
  gap:5rem;
}

/* — Fluid particles canvas — */
#hero-particles{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.17;
  filter:blur(.6px);
}

/* — Editing UI frame corners — */
.hero-frame-tl,.hero-frame-tr,.hero-frame-bl,.hero-frame-br{
  position:absolute;z-index:5;
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--display);font-size:.62rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid);
  pointer-events:none;
  opacity:0;animation:fadeIn 1.5s 1s var(--ease-out) forwards;
}
.hero-frame-tl{top:32px;left:32px;}
.hero-frame-tr{top:32px;right:32px;}
.hero-frame-bl{bottom:32px;left:32px;}
.hero-frame-br{bottom:32px;right:32px;}
.hf-corner{
  display:inline-block;width:14px;height:14px;
  border:1.5px solid var(--white);
}
.hf-tl{border-right:none;border-bottom:none;}
.hf-tr{border-left:none;border-bottom:none;}
.hf-bl{border-right:none;border-top:none;}
.hf-br{border-left:none;border-top:none;}
.hf-label{white-space:nowrap;font-variant-numeric:tabular-nums;}
.hf-rec{color:var(--white);}
.rec-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#ff3838;margin-right:.45rem;
  animation:recBlink 1.4s ease-in-out infinite;
  box-shadow:0 0 8px rgba(255,56,56,.5);
}
@keyframes recBlink{0%,100%{opacity:1;}50%{opacity:.25;}}
.hf-time{font-variant-numeric:tabular-nums;color:var(--silver);margin-left:.2rem;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* — Scroll cue (right side, vertical) — */
.scroll-cue{
  position:absolute;right:32px;bottom:50%;
  transform:translateY(50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  pointer-events:none;
  opacity:0;animation:fadeIn 1.5s 1.4s var(--ease-out) forwards;
}
.scroll-cue-label{
  font-family:var(--display);font-size:.6rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.scroll-cue-line{
  position:relative;width:1px;height:80px;
  background:var(--stroke2);overflow:hidden;
}
.scroll-cue-dot{
  position:absolute;left:50%;top:0;
  transform:translateX(-50%);
  width:3px;height:14px;background:var(--white);
  animation:scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{top:-14px;opacity:0;}
  20%{opacity:1;}
  80%{opacity:1;}
  100%{top:80px;opacity:0;}
}

/* — Hero eyebrow refined — */
.hero-eyebrow{
  display:flex;align-items:center;gap:1rem!important;
  font-family:var(--display);font-size:.7rem;font-weight:500;
  letter-spacing:.05em;text-transform:none;color:var(--mid);
  margin-bottom:3.5rem;
}
.eyebrow-line{width:28px;height:1px;background:var(--stroke3);}
.eyebrow-dot{
  width:3px;height:3px;border-radius:50%;background:var(--mid);
}

/* — Hero H1 — more impactful — */
.hero-h1{
  font-family:var(--display)!important;
  font-size:clamp(4rem,7.5vw,8rem)!important;
  font-weight:700;line-height:.95;
  letter-spacing:-.045em;
  margin-bottom:2.8rem!important;
}
.hero-line{display:block;overflow:hidden;}
.hero-word{
  display:inline-block;color:var(--white);
  animation:wordRise 1s var(--ease-out) backwards;
}
.hero-line:nth-child(1) .hero-word{animation-delay:.15s;}
.hero-line:nth-child(2) .hero-word{animation-delay:.28s;}
.hero-line:nth-child(3) .hero-word{animation-delay:.41s;}
.hero-h1 .italic{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:.88em;letter-spacing:-.025em;
  background:linear-gradient(180deg,#d8d0ff 0%,rgba(192,189,184,.85) 60%,rgba(192,189,184,.7) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@keyframes wordRise{
  from{opacity:0;transform:translateY(110%);}
  to{opacity:1;transform:none;}
}

/* — Hero body refined — */
.hero-body{
  font-size:1.02rem;font-weight:400;color:rgba(255,255,255,.5);
  line-height:1.7;max-width:440px;
  margin-bottom:3.2rem!important;
  letter-spacing:-.005em;
}

/* — Buttons — */
.btn-arrow{
  display:inline-block;
  transition:transform .35s var(--ease-out);
}
.btn-fill:hover .btn-arrow{transform:translateX(4px);}

/* — Metrics row — sharper — */
.hero-metrics{
  display:flex;gap:0!important;
  border-top:1px solid var(--stroke);
  padding-top:2.2rem!important;
}
.metric{
  flex:1;padding-right:2rem;margin-right:2rem;
  border-right:1px solid var(--stroke);
  position:relative;
}
.metric::before{
  content:'';position:absolute;left:0;top:-2.2rem;
  width:18px;height:1px;background:var(--white);
}
.metric:last-child{border-right:none;margin-right:0;padding-right:0;}
.metric-n{
  font-family:var(--display)!important;
  font-size:2.5rem!important;font-weight:700;
  line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.metric-n sup{
  font-size:.9rem;font-family:var(--display);font-weight:500;
  color:var(--silver);vertical-align:super;
}
.metric-l{
  font-family:var(--display);font-size:.65rem;font-weight:500;
  letter-spacing:.04em;color:var(--mid);
  margin-top:.7rem;
}

/* — Hero right — photo wrap — */
.hero-right{padding:8rem 0 2rem;}
.photo-wrap{
  width:100%;max-width:480px;position:relative;
}

/* — Photo refinements — */
.photo-frame{
  border:none!important;
  position:relative;
}
.photo-frame::before{
  content:'';position:absolute;inset:0;z-index:1;
  border:1px solid var(--stroke3);pointer-events:none;
}
.pc-tl,.pc-tr,.pc-bl,.pc-br{
  width:22px!important;height:22px!important;
  border-width:1.5px!important;
}

/* — Mobile adjustments for new elements — */
@media(max-width:1100px){
  #hero{padding:5rem 2rem 4rem;gap:3rem;}
  .hero-frame-tl,.hero-frame-tr,.hero-frame-bl,.hero-frame-br{
    font-size:.55rem;
  }
  .hero-frame-tl{top:14px;left:14px;}
  .hero-frame-tr{top:14px;right:14px;}
  .hero-frame-bl{bottom:14px;left:14px;}
  .hero-frame-br{display:none;}
  .scroll-cue{display:none;}
  .hf-corner{width:10px;height:10px;}
}
@media(max-width:640px){
  .hero-frame-tl,.hero-frame-tr{font-size:.5rem;gap:.4rem;}
  .hero-frame-tl .hf-label,.hero-frame-tr .hf-label{display:none;}
  .hero-frame-tr .hf-rec{display:flex;}
  .hero-h1{font-size:clamp(3rem,11vw,4.5rem)!important;}
}

/* ════════════════════════════════════
   CINEMATIC PORTFOLIO REDESIGN
════════════════════════════════════ */

/* — Section header with filter — */
#work .work-hd{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:4rem!important;gap:3rem;flex-wrap:wrap;
}
.work-hd-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:1.5rem;
}
.work-filter{
  display:flex;align-items:center;gap:1.2rem;
  padding:.4rem .9rem .4rem 1.1rem;
  background:rgba(255,255,255,.025);
  border:1px solid var(--stroke);
}
.wf-label{
  font-family:var(--display,'Space Grotesk');
  font-size:.55rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
}
.wf-tabs{position:relative;display:flex;gap:0;}
.wf-indicator{
  position:absolute;top:0;bottom:0;left:0;width:0;
  background:var(--white);z-index:0;
  transition:transform .45s cubic-bezier(.65,0,.25,1),
             width .45s cubic-bezier(.65,0,.25,1);
}
.wf-tab{
  position:relative;z-index:1;
  background:transparent;border:none;
  font-family:var(--display,'Space Grotesk');
  font-size:.7rem;font-weight:500;
  padding:.55rem 1rem;cursor:pointer;
  letter-spacing:.02em;
  color:rgba(255,255,255,.45);
  mix-blend-mode:difference;
  transition:color .3s;
}
.wf-tab:hover{color:rgba(255,255,255,.85);}
.wf-tab.active{font-weight:600;color:#000;}

/* — Grid — tighter spacing — */
.work-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:1.2rem!important;background:transparent!important;border:none!important;
}

/* — Card — */
.wc{
  position:relative;overflow:hidden;
  background:var(--ink)!important;
  border:1px solid var(--stroke);
  transition:border-color .35s var(--ease-out);
}
.wc:hover{border-color:var(--stroke3);}
.wc:nth-child(1){grid-column:span 7;}
.wc:nth-child(2){grid-column:span 5;}
.wc:nth-child(3){grid-column:span 5;}
.wc:nth-child(4){grid-column:span 7;}

/* — Thumbnail area — */
.wc-img{
  position:relative;aspect-ratio:16/9;
  background:#0a0a0a!important;
  background-image:
    radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.04) 0%,transparent 60%),
    radial-gradient(ellipse at 70% 60%,rgba(255,255,255,.025) 0%,transparent 50%),
    linear-gradient(135deg,#0c0c0c 0%,#070707 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* — Grain layer — */
.wc-grain{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:.08;mix-blend-mode:overlay;
}

/* — Big bg text — */
.wc-bg-text{
  font-family:var(--display);font-size:8rem;font-weight:900;
  color:rgba(255,255,255,.05);letter-spacing:-.06em;
  position:relative;z-index:1;
  text-transform:uppercase;line-height:1;
  transition:transform .8s var(--ease-out),color .4s;
  user-select:none;
}
.wc:hover .wc-bg-text{
  transform:scale(1.08);
  color:rgba(255,255,255,.08);
}

/* — Top bar (idx + resolution) — */
.wc-top-bar{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;
  font-family:var(--display);font-size:.58rem;font-weight:600;
  letter-spacing:.12em;color:var(--silver);
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%);
}
.wc-idx{color:var(--white);}
.wc-resolution{
  font-variant-numeric:tabular-nums;
  padding:.18rem .5rem;
  background:rgba(0,0,0,.4);
  border:1px solid var(--stroke2);
}

/* — Runtime badge (bottom-right) — */
.wc-runtime{
  position:absolute;bottom:14px;right:14px;z-index:4;
  padding:.32rem .65rem;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  border:1px solid var(--stroke2);
  font-family:var(--display);font-size:.7rem;font-weight:600;
  color:var(--white);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  transition:transform .35s var(--ease-out);
}
.wc:hover .wc-runtime{transform:translateY(-4px);}

/* — Scrubber bar at bottom of thumb — */
.wc-scrubber{
  position:absolute;bottom:0;left:0;right:0;height:2px;z-index:5;
  background:var(--stroke2);
}
.wc-scrubber-fill{
  position:absolute;top:0;left:0;bottom:0;
  width:18%;background:var(--white);
  transition:width 1s var(--ease-out);
}
.wc:hover .wc-scrubber-fill{width:100%;}

/* — Hover overlay — */
.wc-overlay{
  position:absolute;inset:0;z-index:3;
  background:rgba(5,5,5,.75);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  opacity:0;transition:opacity .4s var(--ease-out);
}
.wc:hover .wc-overlay{opacity:1;}

/* — Rule-of-thirds grid in overlay — */
.wc-overlay-grid{
  position:absolute;inset:1.2rem;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:0;pointer-events:none;
}
.wc-overlay-grid span{
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.wc-overlay-grid span:nth-child(3n){border-right:none;}
.wc-overlay-grid span:nth-child(n+7){border-bottom:none;}

/* — Play button — */
.wc-play{
  position:relative;width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  transform:scale(.7);
  transition:transform .5s var(--ease-out);
}
.wc:hover .wc-play{transform:scale(1);}
.wc-play-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
}
.wc-play-ring::before{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(255,255,255,.15);
  animation:playPulse 2s ease-in-out infinite;
}
@keyframes playPulse{
  0%,100%{transform:scale(1);opacity:.6;}
  50%{transform:scale(1.15);opacity:0;}
}
.wc-play-tri{
  width:0;height:0;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:18px solid var(--white);
  margin-left:4px;position:relative;z-index:1;
}
.wc-overlay-lbl{
  font-family:var(--display);font-size:.65rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.7);
  transform:translateY(10px);opacity:0;
  transition:transform .5s .1s var(--ease-out),opacity .5s .1s;
}
.wc:hover .wc-overlay-lbl{transform:none;opacity:1;}

/* — Card meta — */
.wc-meta{
  padding:1.5rem 1.6rem!important;
  border-top:1px solid var(--stroke);
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  background:var(--ink);
}
.wc-meta-left{flex:1;min-width:0;}
.wc-meta-right{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  gap:.8rem;flex-shrink:0;height:100%;
}
.wc-cat{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--mid);margin-bottom:.6rem!important;
}
.wc-cat-dot{
  width:5px;height:5px;border-radius:50%;background:var(--white);
}
.wc-title{
  font-family:var(--display);font-size:1.15rem!important;font-weight:700!important;
  letter-spacing:-.025em!important;line-height:1.25;
  margin-bottom:.8rem;
}
.wc-tags{
  display:flex;gap:.4rem;flex-wrap:wrap;
}
.wc-tags span{
  font-family:var(--display);font-size:.58rem;font-weight:500;
  letter-spacing:.04em;
  color:var(--silver);
  padding:.2rem .55rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
}
.wc-year{
  font-family:var(--display);font-size:.65rem;font-weight:500;
  letter-spacing:.06em;color:var(--mid);
  font-variant-numeric:tabular-nums;
}
.wc-arr{
  font-size:1.2rem;color:var(--mid);
  transition:transform .35s var(--ease-out),color .35s;
  margin-top:auto;
}
.wc:hover .wc-arr{
  transform:translate(5px,-5px);
  color:var(--white);
}


/* — Mobile — */
@media(max-width:1100px){
  #work .work-hd{flex-direction:column;align-items:flex-start;gap:2rem;}
  .work-hd-right{align-items:flex-start;width:100%;}
  .work-filter{overflow-x:auto;}
  .work-grid{grid-template-columns:1fr;gap:1rem!important;}
  .wc:nth-child(n){grid-column:span 1;}
  .wc-bg-text{font-size:5rem;}
}
@media(max-width:640px){
  .wc-meta{padding:1.2rem 1.2rem!important;flex-direction:column;align-items:flex-start;}
  .wc-meta-right{flex-direction:row;width:100%;justify-content:space-between;}
  .wc-top-bar{padding:.7rem .9rem;font-size:.52rem;}
  .wc-runtime{font-size:.62rem;padding:.25rem .55rem;}
  .wc-play{width:58px;height:58px;}
  .wc-title{font-size:1rem!important;}
}

/* ════════════════════════════════════
   TYPOGRAPHY REFINEMENTS
════════════════════════════════════ */

/* Force Cormorant Garamond italic on all serif-italic elements */
.s-h i,.s-h em{
  font-family:var(--serif)!important;
  font-weight:300;
  letter-spacing:.01em;
}
/* Ensure section headings use Space Grotesk at a legible weight */
.s-h{font-weight:400;}
.s-h b{font-weight:700;}

/* Body font smoothing */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* About paragraphs — slightly warmer color, better line-height */
.about-p{
  font-family:var(--sans)!important;
  font-size:.97rem!important;
  color:rgba(255,255,255,.46)!important;
  line-height:1.9!important;
}

/* Nav links — Inter */
.nav-links a{font-family:var(--sans);letter-spacing:.14em;}



/* ════════════════════════════════════
   LUXURY CINEMATIC REFINEMENTS
════════════════════════════════════ */

/* — Reveal animation: spring easing, softer lift — */
.rev,.rev-l{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.65,0,.25,1),transform .9s cubic-bezier(.65,0,.25,1);
}
.rev.in,.rev-l.in{opacity:1;transform:none;}

/* — Nav: tighter height, more restrained labels — */
.nav{height:68px;}
.nav a{
  font-size:.72rem;letter-spacing:.1em;
  color:rgba(255,255,255,.62);
  transition:color .25s var(--ease-out);
}
.nav a:hover{color:rgba(255,255,255,.9);}

/* — Section spacing: consolidated in base rule above — */

/* — Text opacity hierarchy: primary / secondary / muted — */
.s-lead,.about-body p,.about-body{color:rgba(255,255,255,.62);}
.s-sub,.meta,.wc-cat{color:rgba(255,255,255,.38);}

/* — Hero eyebrow: lightweight, airy — */
.h-eye{
  font-family:var(--sans);font-size:.72rem;font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
/* — Hero body: softer, more readable — */
.h-sub{
  color:rgba(255,255,255,.62);
  line-height:1.85;
  font-size:clamp(1rem,1.15vw,1.2rem);
  font-weight:300;
}

/* — Portfolio cards: editorial Cormorant italic titles — */
.wc-title{
  font-family:var(--serif)!important;
  font-style:italic!important;
  font-size:1.25rem!important;
  font-weight:300!important;
  letter-spacing:-.01em!important;
  color:rgba(255,255,255,.88)!important;
}
.wc-cat{
  font-family:var(--sans);font-size:.62rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.32);
}
.wc-year{
  font-family:var(--sans);font-size:.62rem;font-weight:300;
  color:rgba(255,255,255,.22);
}


/* — Contact form: visual enhancement (targets div wrapper correctly) — */
.cfield{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  transition:border-color .3s var(--ease-out),background .3s var(--ease-out);
}
.cfield input,.cfield textarea{
  padding:.9rem 1.2rem;
}
.cfield:focus-within{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.05);
}
.csend{
  background:var(--white)!important;
  border:1px solid var(--white)!important;
  color:var(--black)!important;
  font-family:var(--sans);font-size:.72rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 2.4rem!important;
  transition:background .25s,border-color .25s,color .25s,transform .15s;
  cursor:pointer;
}
.csend:hover{
  background:var(--off)!important;
  border-color:var(--off)!important;
  color:var(--black)!important;
  transform:translateY(-2px);
}

/* — Footer: more refined (superseded by .site-footer below) — */

/* ════════════════════════════════════
   SCROLL PROGRESS — FILM TIMELINE
════════════════════════════════════ */
.sp-strip{
  position:sticky;top:72px;z-index:90;
  background:var(--black);
  border-top:none;
  border-bottom:1px solid rgba(255,255,255,.04);
  height:36px;
  display:flex;align-items:center;
  padding:0 5rem;
}
.sp-track{
  position:relative;
  width:100%;height:1px;
  background:rgba(255,255,255,.07);
}
/* film-strip end markers */
.sp-track::before,.sp-track::after{
  content:'';position:absolute;top:-5px;
  width:1px;height:10px;
  background:rgba(255,255,255,.14);
}
.sp-track::before{left:0;}
.sp-track::after{right:0;}
.sp-fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.62) 100%);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
  box-shadow:0 0 8px rgba(255,255,255,.18),0 0 2px rgba(255,255,255,.35);
}

/* ════════════════════════════════════
   EDITORIAL HERO COMPOSITION
════════════════════════════════════ */

/* — Single-column grid; portrait is removed from flow and anchored absolutely — */
#hero{
  grid-template-columns:1fr !important;
  align-items:start !important;
  gap:0 !important;
  padding:0 0 0 5rem !important;
  min-height:92vh !important;
}

/* — Left block: compressed top/bottom for viewport fit — */
.hero-left{
  padding-top:3.5rem !important;
  padding-bottom:2rem !important;
  max-width:560px !important;
  position:relative !important;
  z-index:2 !important;
}

/* — H1: no stagger drift — */
.hero-line:nth-child(2){
  margin-left:0;
}

/* — Unified editorial block — */
.hero-body{
  margin-left:0 !important;
  max-width:420px !important;
  margin-bottom:2rem !important;
}
.hero-actions{
  margin-left:0 !important;
  margin-bottom:1rem !important;
}
.hero-metrics{
  margin-left:0 !important;
}

/* — Metrics: remove decorative ticks, soften dividers — */
.metric::before{
  display:none !important;
}
.metric{
  padding-top:1rem !important;
  border-right-color:rgba(255,255,255,.07) !important;
}
.hero-metrics{
  border-top-color:rgba(255,255,255,.07) !important;
}

/* — Portrait: absolute, anchored at 50% from left (~720px on 1440).
     Portrait 520px wide → ends at ~1240px, leaving ~200px editorial breathing room on right. — */
.hero-right{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  right:0 !important;
  z-index:1 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding-top:4rem !important;
  padding-left:0 !important;
  padding-right:0 !important;
  padding-bottom:2rem !important;
}
.photo-wrap{
  width:495px !important;
  max-width:495px !important;
  position:relative;
  flex-shrink:0 !important;
}

/* ═══════════════════════════════════════
   ABOUT — CINEMATIC REDESIGN
═══════════════════════════════════════ */
#about{
  padding:2.5rem 5rem 1.5rem !important;
  scroll-margin-top:116px;
}
.ab-wrap{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:4.5rem;
  align-items:start;
}
/* Heading — "Who is" / "Susano?" two-line display */
.ab-h{margin-bottom:1.6rem;line-height:1;}
.ab-h-pre{
  display:block;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2rem,3vw,2.6rem);
  letter-spacing:-.015em;line-height:1;
  color:rgba(255,255,255,.38);margin-bottom:.15rem;
}
.ab-h-name{
  display:block;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(4.5rem,8vw,9rem);
  line-height:.9;letter-spacing:-.025em;color:var(--white);
}
/* Copy */
.ab-lead{
  font-family:var(--sans);font-size:.92rem;font-weight:300;
  color:rgba(255,255,255,.62);line-height:1.78;
  margin-bottom:0;max-width:480px;
}
.ab-lead+.ab-lead{margin-top:1.2rem;}
.ab-rule{
  width:24px;height:1px;background:rgba(255,255,255,.07);
  margin:1.3rem 0;
}
/* Stat rows */
.ab-stats{
  border-top:1px solid rgba(255,255,255,.06);
  margin-bottom:1.3rem;
}
.ab-stat{
  display:flex;align-items:baseline;gap:1.4rem;
  padding:.65rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:opacity .2s;
}
.ab-stat:hover{opacity:.68;}
.ab-sn{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.9rem;line-height:1;color:var(--white);
  letter-spacing:-.02em;min-width:4.5rem;
}
.ab-sn sup{font-size:.5em;color:rgba(255,255,255,.38);}
.ab-sl{
  font-family:var(--display);font-size:.64rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
/* Tools — outlined pill boxes */
.ab-tools{
  display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;
}
.ab-tools-head{
  font-family:var(--display);font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.2);margin-right:.2rem;
  align-self:center;
}
.ab-tool{
  font-family:var(--sans);font-size:.6rem;font-weight:400;
  letter-spacing:.06em;
  color:rgba(255,255,255,.38);
  border:1px solid rgba(255,255,255,.1);
  padding:.28rem .75rem;
  background:rgba(255,255,255,.03);
  transition:color .22s,border-color .22s,background .22s;
}
.ab-tool:hover{
  color:rgba(255,255,255,.7);
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
}
.ab-tool::after{display:none;}
/* Portrait column */
.ab-right{position:relative;margin-top:0;}
.ab-portrait{position:relative;}
.ab-glow{
  position:absolute;inset:-50px;
  background:radial-gradient(ellipse 85% 85% at 50% 45%,rgba(255,255,255,.045),transparent 68%);
  pointer-events:none;z-index:0;
}
.ab-img-frame{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);z-index:1;
}
.ab-img-frame img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  filter:grayscale(12%) contrast(1.07);
}
.ab-pc{position:absolute;width:13px;height:13px;z-index:2;}
.ab-ptl{top:0;left:0;border-top:1.5px solid rgba(255,255,255,.45);border-left:1.5px solid rgba(255,255,255,.45);}
.ab-pbr{bottom:0;right:0;border-bottom:1.5px solid rgba(255,255,255,.45);border-right:1.5px solid rgba(255,255,255,.45);}
/* Float tags — top-left corner, stack outside frame */
.ab-float-tags{
  position:absolute;top:.7rem;left:.7rem;z-index:4;
  display:flex;flex-direction:column;gap:.28rem;
}
.ab-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.32rem .85rem;
  background:rgba(7,7,7,.84);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.07);
  font-family:var(--display);font-size:.57rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
  transition:color .25s,border-color .25s;
}
.ab-tag:hover{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.15);}
.ab-td{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.3);flex-shrink:0;
}

/* — Both diagonal corners: same subtle opacity — */
.hero-frame-tl,.hero-frame-br{
  animation:fadeInDim 1.5s 1.2s var(--ease-out) forwards !important;
}
@keyframes fadeInDim{
  from{opacity:0;}
  to{opacity:.48;}
}

/* ═══════════════════════════════════════
   MOBILE HAMBURGER MENU
═══════════════════════════════════════ */
.nav-burger{
  display:none;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;
  width:36px;height:36px;
  background:none;border:none;padding:0;
  cursor:pointer;
  z-index:200;
  position:relative;
}
.nav-burger span{
  display:block;width:22px;height:1.5px;
  background:rgba(255,255,255,.75);
  transition:transform .35s var(--ease-out),opacity .25s,width .3s var(--ease-out);
  transform-origin:center;
}
/* X state */
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;width:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Overlay */
.mob-menu{
  position:fixed;inset:0;z-index:150;
  background:rgba(6,6,6,.97);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease-out);
}
.mob-menu.open{
  opacity:1;pointer-events:all;
}
.mob-nav{
  display:flex;flex-direction:column;align-items:center;gap:2rem;
  text-align:center;
}
.mob-link{
  font-family:var(--display);font-size:clamp(2rem,7vw,3rem);
  font-weight:300;letter-spacing:-.01em;
  color:rgba(255,255,255,.55);
  transform:translateY(20px);opacity:0;
  transition:color .25s,transform .5s var(--ease-out),opacity .5s var(--ease-out);
}
.mob-menu.open .mob-link{opacity:1;transform:translateY(0);}
.mob-menu.open .mob-link:nth-child(1){transition-delay:.05s;}
.mob-menu.open .mob-link:nth-child(2){transition-delay:.1s;}
.mob-menu.open .mob-link:nth-child(3){transition-delay:.15s;}
.mob-menu.open .mob-link:nth-child(4){transition-delay:.2s;}
.mob-link:hover{color:var(--white);}
.mob-cta{
  margin-top:1rem;
  font-family:var(--display);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.15);
  padding:.75rem 2rem;
  transform:translateY(20px);opacity:0;
  transition:color .25s,border-color .25s,transform .5s var(--ease-out),opacity .5s var(--ease-out);
  transition-delay:.26s;
}
.mob-menu.open .mob-cta{opacity:1;transform:translateY(0);}
.mob-cta:hover{color:var(--white);border-color:rgba(255,255,255,.4);}

@media(max-width:1100px){
  .nav-burger{display:flex;}
  .nav-cta{display:none;}
}

/* ═══════════════════════════════════════
   HERO METRICS — spacing fix
═══════════════════════════════════════ */
.hero-metrics{
  margin-top:2rem !important;
  padding-top:2rem !important;
}

/* ═══════════════════════════════════════
   CONTACT — padding
═══════════════════════════════════════ */
#contact{padding:4rem 5rem 4rem;}
@media(max-width:768px){
  #contact{padding:4rem 1.5rem 3rem !important;}
}


/* ═══════════════════════════════════════
   ABOUT — PREMIUM REFINEMENT
═══════════════════════════════════════ */
/* Heading */
.ab-h{margin-bottom:1.8rem;line-height:1;}
/* Body copy */
.ab-lead{
  max-width:480px;
  line-height:1.9;
  font-size:.88rem;
  color:rgba(255,255,255,.62);
}
.ab-lead+.ab-lead{margin-top:.9rem;}
.ab-lead-2,.ab-lead-3{color:rgba(255,255,255,.62);}
/* Credits line */
.ab-credits{
  font-family:var(--display);font-size:.53rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.18);
  margin-top:1.8rem;line-height:1;
}
/* Float tags: smaller, no dot, no backdrop */
.ab-float-tags{top:.5rem;left:.5rem;gap:.18rem;}
.ab-tag{
  padding:.15rem .48rem;
  background:rgba(5,5,5,.85);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(255,255,255,.07);
  font-size:.44rem;letter-spacing:.12em;
  color:rgba(255,255,255,.28);
  gap:0;
}
.ab-tag:hover{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.12);}
.ab-td{display:none;}
/* Tools row: lighter, minimal */
.ab-tools{gap:.25rem;margin-top:1.5rem !important;}
.ab-tools-head{font-size:.47rem;color:rgba(255,255,255,.14);margin-right:.05rem;}
.ab-tool{
  font-size:.53rem;letter-spacing:.04em;
  color:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.07);
  padding:.15rem .5rem;
  background:none;
}
.ab-tool:hover{
  color:rgba(255,255,255,.48);
  border-color:rgba(255,255,255,.12);
  background:none;
}

/* livePulse retained for c-avail-dot */
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(59,165,93,.55);}
  70%{box-shadow:0 0 0 7px rgba(59,165,93,0);}
  100%{box-shadow:0 0 0 0 rgba(59,165,93,0);}
}


/* ── ABOUT — ambient background + quick facts ── */
#about{position:relative;overflow:hidden;}
.ab-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 50%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 30% 50%,#000 30%,transparent 80%);
  opacity:.7;
}
.ab-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 80% 50%,rgba(138,125,240,.04) 0%,transparent 70%);
}
.ab-wrap{position:relative;z-index:2;}

.ab-quick{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:3rem;padding-top:2rem;
  border-top:1px solid var(--stroke);
  max-width:480px;
}
.ab-q-label{
  font-family:var(--display);font-size:.52rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);margin-bottom:.55rem;
}
.ab-q-val{
  font-family:var(--sans);font-size:.78rem;font-weight:300;
  color:rgba(255,255,255,.78);letter-spacing:.005em;
  display:flex;align-items:center;gap:.45rem;
}
.ab-q-dot{
  width:6px;height:6px;border-radius:50%;background:#3ba55d;
  box-shadow:0 0 0 0 rgba(59,165,93,.6);
  animation:livePulse 2.2s ease-out infinite;
}

.ab-signature{
  margin-top:1.4rem;
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.4rem;letter-spacing:.01em;
  color:rgba(255,255,255,.62);
  text-align:right;padding-right:.3rem;
}

@media(max-width:720px){
  .ab-quick{grid-template-columns:1fr;gap:1.2rem;}
}

/* ── HERO ENHANCEMENTS ── */

/* Film grain overlay (animated) */
#hero{position:relative;overflow:hidden;}
.hero-grain{
  position:absolute;inset:-12%;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.06;mix-blend-mode:overlay;
  animation:grainShift 8s steps(8) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0);}
  20%{transform:translate(-2%,-1%);}
  40%{transform:translate(2%,-2%);}
  60%{transform:translate(-1%,2%);}
  80%{transform:translate(1%,1%);}
  100%{transform:translate(0,0);}
}

/* Make sure hero-left & hero-right sit ABOVE the grain layer */
.hero-left,.hero-right{position:relative;z-index:5;}

/* Start a Project — glowing purple accent button */
.btn-glow{
  position:relative;
  display:inline-flex;align-items:center;
  padding:1rem 1.9rem;
  font-family:'Space Grotesk',sans-serif;
  font-size:.65rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--white);text-decoration:none;
  background:linear-gradient(135deg,rgba(138,125,240,.08),rgba(138,125,240,.02));
  border:1px solid rgba(138,125,240,.45);
  box-shadow:
    0 0 32px -8px rgba(138,125,240,.4),
    0 0 0 0 rgba(138,125,240,.4),
    inset 0 1px 0 0 rgba(255,255,255,.06);
  transition:background .3s,box-shadow .3s,border-color .3s,transform .25s;
  overflow:hidden;
  animation:btnPulse 2.6s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 0 26px -10px rgba(138,125,240,.35),0 0 0 0 rgba(138,125,240,.3),inset 0 1px 0 0 rgba(255,255,255,.06);}
  50%{box-shadow:0 0 56px -6px rgba(138,125,240,.7),0 0 0 6px rgba(138,125,240,.06),inset 0 1px 0 0 rgba(255,255,255,.12);}
}
.btn-glow::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 120% at 50% 100%,rgba(138,125,240,.25),transparent 70%);
  opacity:.6;transition:opacity .3s;
}
.btn-glow:hover::after{opacity:1;}
.btn-glow::before{
  content:'';position:absolute;top:0;left:-100%;height:100%;width:60%;
  background:linear-gradient(90deg,transparent,rgba(138,125,240,.18),transparent);
  animation:btnSweep 4s ease-in-out infinite;
}
@keyframes btnSweep{
  0%{left:-100%;}
  60%{left:160%;}
  100%{left:160%;}
}
.btn-glow:hover{
  background:rgba(138,125,240,.15);
  border-color:rgba(138,125,240,.7);
  transform:translateY(-2px);
}

/* Ken Burns replaced by scroll parallax (JS-driven) */
.photo-frame img{
  transform-origin:center center;
  will-change:transform;
  transition:transform .15s linear;
}

/* ── CONTACT DOTTED SURFACE ── */
#contact-dots{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.65;
}
.contact-overlay{
  position:absolute;inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 55%,transparent 80%),
    linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,.4) 100%);
}
.contact-wrap{position:relative;z-index:10;}

/* — Cinematic vignette over hero — */
#hero::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 110% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%);
}

/* — Hero photo ambient glow (subtle purple bloom) — */
.photo-frame{
  position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 40px 100px -30px rgba(0,0,0,.9),0 0 80px -20px rgba(138,125,240,.18);
  transition:box-shadow .6s var(--ease-out);
}
.photo-frame:hover{
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 50px 120px -30px rgba(0,0,0,.9),0 0 140px -10px rgba(138,125,240,.35);
}

/* ── HERO PREMIUM POLISH ── */
.hero-h1{text-shadow:0 2px 24px rgba(0,0,0,.4);}
.hero-body{text-shadow:0 1px 12px rgba(0,0,0,.5);}
#hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(0,0,0,.5) 0%,transparent 35%,transparent 65%,rgba(0,0,0,.3) 100%);
}
.hero-metrics .metric-n{letter-spacing:-.04em;}
.hero-metrics .metric-l{opacity:.55;}

/* ── COMMUNITY POLISH ── */
.disc-stat{transition:background .35s,transform .35s;}
.disc-stat:hover{background:rgba(138,125,240,.04);}
.disc-stat-val{transition:transform .35s;}
.disc-stat:hover .disc-stat-val{transform:translateY(-2px);}
.disc-pulse--live{
  background:#43b581;
  box-shadow:0 0 0 0 rgba(67,181,129,.7),0 0 8px rgba(67,181,129,.6);
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(67,181,129,.65),0 0 6px rgba(67,181,129,.5);}
  70%{box-shadow:0 0 0 10px rgba(67,181,129,0),0 0 10px rgba(67,181,129,.3);}
  100%{box-shadow:0 0 0 0 rgba(67,181,129,0),0 0 4px rgba(67,181,129,.2);}
}
.disc-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(138,125,240,.06);
  box-shadow:inset 0 60px 80px -60px rgba(138,125,240,.08);
}

/* ── PORTFOLIO POLISH ── */
.wf-indicator{transition:transform .5s cubic-bezier(.65,0,.25,1),width .5s cubic-bezier(.65,0,.25,1);}
.wc{transition:transform .45s cubic-bezier(.65,0,.25,1);}
.wc:hover{transform:translateY(-4px);}
.wc-img{transition:border-color .35s;}
.wc:hover .wc-img{border-color:rgba(255,255,255,.12);}
.wc-title{transition:color .3s;}


/* ── FOOTER (compact redesign) ── */
.site-footer{
  position:relative;
  border-top:1px solid transparent;
  background:transparent;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(138,125,240,.3),rgba(255,255,255,.08),rgba(138,125,240,.3),transparent);
}
.sf-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 5rem;
  flex-wrap:wrap;gap:.8rem;
}
.sf-bar-l,.sf-bar-r{
  display:flex;align-items:center;gap:.7rem;
  flex-wrap:wrap;
}
.footer-avatar{
  width:30px;height:30px;border-radius:50%;
  object-fit:cover;object-position:center 12%;
  border:1px solid rgba(138,125,240,.45);
  box-shadow:0 0 10px rgba(138,125,240,.25);
  flex-shrink:0;display:block;
}
.sf-name{
  font-family:var(--display);font-size:.6rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.sf-slash{color:rgba(138,125,240,.5);font-size:.7rem;}
.sf-craft{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:.82rem;color:rgba(255,255,255,.28);
  letter-spacing:.01em;
}
.sf-where{
  font-family:var(--display);font-size:.55rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.28);
}
.sf-pipe{color:rgba(255,255,255,.15);font-size:.6rem;}
.sf-yr{
  font-family:'Inter',sans-serif;font-size:.55rem;font-weight:300;
  letter-spacing:.04em;color:rgba(255,255,255,.22);
}
@media(max-width:720px){
  .sf-bar{padding:1.2rem 1.6rem;flex-direction:column;align-items:flex-start;gap:.6rem;}
}

/* ── PROCESS 4-CARD GRID ── */
.proc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;margin-top:4.5rem;
  background:var(--stroke);
  border:1px solid var(--stroke);
}
.proc-card{
  background:var(--ink);
  padding:2.5rem 2rem 2.8rem;
  display:flex;flex-direction:column;gap:.7rem;
  position:relative;
  transition:background .35s;
  min-height:280px;
}
.proc-card:hover{background:rgba(255,255,255,.02);}
.proc-card::after{
  content:'';position:absolute;top:0;left:0;
  height:1px;width:0;background:var(--white);
  transition:width .55s cubic-bezier(.65,0,.25,1);
}
.proc-card:hover::after{width:60%;}
.proc-card-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.proc-mono{
  width:42px;height:42px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1rem;font-weight:600;
  letter-spacing:-.02em;color:#fff;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  transition:transform .3s;
}
.proc-card:hover .proc-mono{transform:scale(1.05);}
.proc-mono--pr{background:linear-gradient(135deg,rgba(155,140,255,.18),rgba(155,140,255,.04));border-color:rgba(155,140,255,.22);color:#d8d0ff;}
.proc-mono--ae{background:linear-gradient(135deg,rgba(155,125,255,.16),rgba(155,125,255,.04));border-color:rgba(155,125,255,.22);color:#cabbff;}
.proc-mono--dr{background:linear-gradient(135deg,rgba(255,170,90,.14),rgba(255,170,90,.03));border-color:rgba(255,170,90,.2);color:#ffd9b3;}
.proc-mono--au{background:linear-gradient(135deg,rgba(100,200,150,.14),rgba(100,200,150,.03));border-color:rgba(100,200,150,.2);color:#bcefd1;}
.proc-num{
  font-family:var(--display);font-size:.55rem;font-weight:500;
  letter-spacing:.2em;color:rgba(255,255,255,.28);
}
.proc-name{
  font-family:var(--display);font-size:1.05rem;font-weight:600;
  letter-spacing:-.015em;color:var(--white);
  margin-bottom:.15rem;
}
.proc-phase{
  font-family:var(--display);font-size:.58rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:.8rem;
}
.proc-desc{
  font-family:var(--sans);font-size:.82rem;font-weight:300;
  color:rgba(255,255,255,.62);line-height:1.65;margin:0;
}
@media(max-width:1100px){
  .proc-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:540px){
  .proc-grid{grid-template-columns:1fr;}
  .proc-card{min-height:auto;padding:2rem 1.6rem 2.2rem;}
}

/* ── GLOBAL TYPOGRAPHY LOCK ── */
/* Headings always Space Grotesk unless overridden to serif */
h1,h2,h3,h4,h5,h6{font-family:var(--display);}
/* Paragraphs & inputs always Inter */
p,li,label,input,textarea,select,button{font-family:var(--sans);}
/* Serif italic overrides remain intact via more-specific rules above */
/* Tabular nums on all counters/timecodes */
[data-count],[data-hero],.metric-n,.disc-stat-val,.wc-runtime,.hf-time{
  font-variant-numeric:tabular-nums;
}
/* Antialiasing: already on body — ensure all descendants */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.wc:hover .wc-title{color:#fff;}

/* ── CONTACT FORM LEGIBILITY ── */
.cform{
  position:relative;
  padding:2rem 2.4rem 1.6rem;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.cfield{
  border-bottom:1px solid rgba(255,255,255,.1) !important;
}
.cfield input,.cfield textarea{
  color:rgba(255,255,255,.92) !important;
}
.cfield input::placeholder,.cfield textarea::placeholder{
  color:rgba(255,255,255,.32) !important;
}
.cfield:focus-within{
  border-bottom-color:rgba(255,255,255,.3) !important;
}

/* ═══════════════════════════════════
   TESTIMONIALS — Awwwards column layout
   ═══════════════════════════════════ */

.t-meta{
  display:flex;align-items:center;gap:.7rem;
  margin-top:1.2rem;margin-bottom:0;
  font-family:var(--display);font-size:.58rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
  flex-wrap:wrap;
}
.t-meta-dot{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.22);flex-shrink:0;
}

.tcols-window{
  margin-top:4rem;
  max-height:740px;
  overflow:hidden;
}
.tcols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  align-items:start;
}
.tcol--side{opacity:.72;transition:opacity .6s ease;}
.tcol--center{opacity:1;}
.tcols-window:hover .tcol--side{opacity:.88;}

.tcol-track{
  display:flex;flex-direction:column;gap:0;
  animation:colScrollUp linear infinite;
  will-change:transform;
}
.tcol-set{display:flex;flex-direction:column;gap:1.4rem;padding-bottom:1.4rem;}
@keyframes colScrollUp{
  from{transform:translateY(0);}
  to{transform:translateY(-50%);}
}

.tcol .tcard:hover{
  opacity:1!important;
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.1)!important;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(138,125,240,.12)!important;
}

.tcard{
  background:rgba(255,255,255,.042);
  border:1px solid rgba(255,255,255,.09);
  padding:2rem 1.8rem 1.8rem;
  display:flex;flex-direction:column;gap:0;
  position:relative;overflow:hidden;
  transition:opacity .3s ease,transform .35s cubic-bezier(.65,0,.25,1),border-color .35s,box-shadow .35s;
}
.tcard::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(138,125,240,.5),transparent);
  opacity:0;transition:opacity .4s;
}
.tcard:hover::before{opacity:1;}

.tcard-cat{
  font-family:var(--display);font-size:.5rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-bottom:1.2rem;
}
.tcard-mark{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-weight:300;
  font-size:4rem;line-height:.55;
  color:rgba(255,255,255,.08);
  display:block;margin-bottom:.6rem;margin-left:-.1rem;
  transition:color .35s;
}
.tcard:hover .tcard-mark{color:rgba(138,125,240,.22);}
.tcard-quote{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-size:1rem;font-weight:400;
  color:rgba(255,255,255,.85);
  line-height:1.68;letter-spacing:.006em;
  flex:1;margin-bottom:1.6rem;
  transition:color .35s;
}
.tcard:hover .tcard-quote{color:rgba(255,255,255,.92);}
.tcard-rule{height:1px;background:rgba(255,255,255,.055);margin-bottom:1.4rem;}
.tcard-author{display:flex;align-items:center;gap:.9rem;}
.tcard-avatar{
  width:44px;height:44px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  border:1px solid rgba(255,255,255,.1);
  background:#1a1a1f;position:relative;
  transition:border-color .35s,box-shadow .35s;
}
.tcard-avatar::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(255,255,255,.04);pointer-events:none;
}
.tcard:hover .tcard-avatar{
  border-color:rgba(138,125,240,.35);
  box-shadow:0 0 20px -6px rgba(138,125,240,.3);
}
.tcard-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.tcard-author-info{flex:1;min-width:0;}
.tcard-client{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;}
.tcard-meta{flex:1;min-width:0;}
.tcard-name{
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;font-weight:600;letter-spacing:-.01em;
  color:rgba(255,255,255,.92);margin-bottom:.18rem;
}
.tcard-role{
  font-family:'Inter',sans-serif;
  font-size:.58rem;font-weight:400;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  margin-bottom:.4rem;
}
.tcard-brand{font-size:.7rem;line-height:1;color:rgba(255,255,255,.75);transition:color .3s;}
.tcard:hover .tcard-brand{color:rgba(255,255,255,.95);}
.tcard-brand--mono{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.32em;font-size:.6rem;}
.tcard-brand--serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-style:italic;font-size:.95rem;letter-spacing:-.005em;}
.tcard-brand--wide{font-family:'Space Grotesk',sans-serif;font-weight:300;letter-spacing:.42em;font-size:.52rem;}
.tcard-brand--elegant{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:1rem;letter-spacing:.02em;}
.tcard-brand--script{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:1.05rem;letter-spacing:-.01em;color:rgba(255,255,255,.65);}
.tcard-brand--split{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.18em;font-size:.6rem;}
.tcard-brand--split span{font-weight:300;margin-left:.4em;}
.tcard-brand--lowercase{font-family:'Inter',sans-serif;font-weight:300;font-size:.78rem;letter-spacing:.01em;text-transform:none;}
.tcard-brand--display{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.85rem;letter-spacing:-.02em;}

@media(max-width:900px){
  .tcols{grid-template-columns:1fr 1fr;}
  .tcols .tcol:last-child{display:none;}
  .tcol--side{opacity:.85;}
}
@media(max-width:540px){
  .tcols{grid-template-columns:1fr;}
  .tcols .tcol:first-child{display:none;}
  .tcols .tcol:last-child{display:none;}
  .tcols .tcol:nth-child(2){display:block !important;}
  .tcols-window{max-height:650px;}
  .tcard{padding:1.4rem 1.2rem;}
  .tcard-quote{font-size:.92rem;}
}

/* ── CONTACT HEADING SPACING + LEGIBILITY ── */
.contact-hd{
  margin-bottom:3.5rem !important;
}
.contact-hd-h{
  text-shadow:0 2px 32px rgba(0,0,0,.6);
}

/* Logo avatar variant — square with rounded corners, no circle crop */
.tcard-avatar--logo{
  border-radius:10px !important;
  overflow:hidden;
  background:#1a4bcc;
}
.tcard-avatar--logo img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}

/* ── TESTIMONIALS BACKGROUND ── */
#testimonials{
  position:relative;
  background:var(--ink);
}
#testimonials::before,
#testimonials::after{
  display:none;
}
#testimonials .s-label,
#testimonials .s-h,
#testimonials .tcols-window{
  position:relative;z-index:1;
}

/* ── Social links on cards ── */
.tcard-links{
  display:flex;gap:.45rem;
  margin-top:.6rem;
}
.tcard-link{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4);
  text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
  flex-shrink:0;
}
.tcard-link svg{width:11px;height:11px;flex-shrink:0;}
.tcard-link:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.2);
  transform:scale(1.1);
}
.tcard-link--yt:hover{background:rgba(255,0,0,.15);border-color:rgba(255,0,0,.3);color:#ff4444;}
.tcard-link--tt:hover{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.3);color:#fff;}
.tcard-link--ig:hover{background:rgba(225,48,108,.15);border-color:rgba(225,48,108,.3);color:#e1306c;}

/* ── HERO ATMOSPHERE ── */
#hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 70% at 18% 48%,rgba(88,101,242,.07) 0%,transparent 55%),
    radial-gradient(ellipse 40% 50% at 72% 50%,rgba(138,125,240,.04) 0%,transparent 50%),
    radial-gradient(ellipse 100% 100% at 50% 50%,transparent 40%,rgba(0,0,0,.5) 100%);
}

/* ── TOOLS GLOW ENHANCEMENT ── */
.proc-grid{
  box-shadow:0 0 0 1px rgba(255,255,255,.04),
             0 40px 120px -60px rgba(138,125,240,.12);
}
.proc-mono--pr{box-shadow:0 0 18px -4px rgba(155,140,255,.35);}
.proc-mono--ae{box-shadow:0 0 18px -4px rgba(155,125,255,.3);}
.proc-mono--dr{box-shadow:0 0 18px -4px rgba(255,170,90,.25);}
.proc-mono--au{box-shadow:0 0 18px -4px rgba(100,200,150,.25);}
.proc-card:hover .proc-mono--pr{box-shadow:0 0 28px -4px rgba(155,140,255,.6);}
.proc-card:hover .proc-mono--ae{box-shadow:0 0 28px -4px rgba(155,125,255,.55);}
.proc-card:hover .proc-mono--dr{box-shadow:0 0 28px -4px rgba(255,170,90,.45);}
.proc-card:hover .proc-mono--au{box-shadow:0 0 28px -4px rgba(100,200,150,.45);}
.proc-card:hover{
  background:rgba(255,255,255,.025) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
             0 0 40px -20px rgba(138,125,240,.15);
}

.tcols-window{max-height:620px;}

/* ══════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════ */
.lb-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(4,4,8,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .35s cubic-bezier(.65,0,.25,1);
}
.lb-overlay.open{opacity:1;pointer-events:auto;}
.lb-inner{
  position:relative;
  width:min(92vw,960px);
  aspect-ratio:16/9;
  box-shadow:0 40px 120px -20px rgba(0,0,0,.9),
             0 0 0 1px rgba(255,255,255,.06);
}
.lb-inner iframe{
  width:100%;height:100%;border:none;display:block;
}
.lb-close{
  position:absolute;top:-3rem;right:0;
  width:2.2rem;height:2.2rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.6);font-size:1rem;line-height:1;
  transition:background .2s,color .2s,transform .25s var(--ease-out);
  font-family:var(--sans);
}
.lb-close:hover{
  background:rgba(255,255,255,.16);
  color:#fff;
  transform:rotate(90deg);
}
.lb-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;
  background:rgba(14,12,22,.95);
  border:1px solid rgba(138,125,240,.15);
  text-align:center;
}
.lb-placeholder-title{
  font-family:var(--display);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(138,125,240,.7);
}
.lb-placeholder-sub{
  font-family:var(--serif);font-style:italic;font-size:1rem;
  color:rgba(255,255,255,.28);
}

/* ══════════════════════════════════════════════
   SHOWREEL BUTTON
══════════════════════════════════════════════ */
.btn-reel{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--display);font-size:.62rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  border:1px solid rgba(138,125,240,.3);
  padding:.65rem 1.5rem;
  background:rgba(138,125,240,.07);
  cursor:pointer;margin-top:1.4rem;
  transition:background .3s var(--ease-out),color .3s,border-color .3s,transform .25s var(--ease-out);
}
.btn-reel:hover{
  background:rgba(138,125,240,.15);
  color:rgba(255,255,255,.95);
  border-color:rgba(138,125,240,.55);
  transform:translateY(-2px);
}
.btn-reel svg{flex-shrink:0;opacity:.7;transition:opacity .2s,transform .3s var(--ease-out);}
.btn-reel:hover svg{opacity:1;transform:scale(1.1);}

/* ══════════════════════════════════════════════
   PORTFOLIO — thumbnail image layer
══════════════════════════════════════════════ */
.wc-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;display:block;
  z-index:0;
  transition:transform .8s var(--ease-out),opacity .4s;
}
.wc:hover .wc-thumb{transform:scale(1.04);}
.wc-img-grad{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.28) 0%,
    transparent 45%,
    rgba(0,0,0,.6) 100%
  );
}

/* ══════════════════════════════════════════════
   TESTIMONIALS — stat bar
══════════════════════════════════════════════ */
.t-statbar{
  display:flex;align-items:stretch;
  margin-top:2.2rem;margin-bottom:3.2rem;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.014);
}
.t-stat{
  flex:1;padding:1.4rem 1.6rem;
  border-right:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:.35rem;
}
.t-stat:last-child{border-right:none;}
.t-stat-n{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:2.1rem;line-height:1;letter-spacing:-.02em;
  color:var(--white);
}
.t-stat-n sup{font-size:.55em;font-family:var(--display);font-style:normal;color:var(--silver);}
.t-stat-l{
  font-family:var(--display);font-size:.52rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.35);
}

/* Verified tcard */
.tcard--verified{
  border-color:rgba(138,125,240,.25);
  background:rgba(138,125,240,.035);
  box-shadow:0 0 0 1px rgba(138,125,240,.07) inset,
             0 20px 50px -20px rgba(0,0,0,.75);
  padding:2.2rem 1.8rem 2rem;
}
.tcard--verified::before{opacity:.5!important;}
.tcard-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--display);font-size:.46rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(138,125,240,.9);
  background:rgba(138,125,240,.1);
  border:1px solid rgba(138,125,240,.2);
  padding:.22rem .6rem;
  margin-bottom:.8rem;align-self:flex-start;
}
.tcard-badge-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(138,125,240,.9);
  flex-shrink:0;
}
.tcard-metric{
  font-family:var(--serif);font-style:italic;
  color:rgba(164,155,255,.9);
}

/* Placeholder tcard — intentionally minimal, never broken-looking */
.tcard--placeholder{
  opacity:.28;
  border-style:dashed;
  border-color:rgba(255,255,255,.05);
  background:transparent;
  pointer-events:none;
}
.tcard--placeholder .tcard-mark{color:rgba(255,255,255,.06)!important;}
.tcard--placeholder .tcard-quote,
.tcard--placeholder .tcard-name,
.tcard--placeholder .tcard-role,
.tcard--placeholder .tcard-brand{color:rgba(255,255,255,.18)!important;}
.tcard--placeholder .tcard-avatar{opacity:.18;}

@media(max-width:900px){
  .t-statbar{display:grid;grid-template-columns:1fr 1fr;}
  .t-stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.07);}
  .t-stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.07);}
  .t-stat:nth-last-child(-n+2){border-bottom:none;}
}

/* ══════════════════════════════════════════════
   CONTACT — floating labels
══════════════════════════════════════════════ */
.cfield{position:relative;}
.cfield label{
  position:absolute;left:0;top:1.55rem;
  font-family:var(--sans);font-size:.92rem;font-weight:300;
  color:rgba(255,255,255,.26);
  pointer-events:none;
  transition:top .2s var(--ease-out),font-size .2s var(--ease-out),
             color .2s var(--ease-out),letter-spacing .2s;
}
.cfield input:not(:placeholder-shown) ~ label,
.cfield textarea:not(:placeholder-shown) ~ label,
.cfield input:focus ~ label,
.cfield textarea:focus ~ label{
  top:.32rem;font-size:.56rem;
  color:rgba(255,255,255,.4);
  letter-spacing:.14em;text-transform:uppercase;
}
.cfield input,.cfield textarea{
  padding-top:1.9rem !important;
  padding-bottom:.7rem !important;
}

/* Form elevation + focus glow */
.contact-right .cform{
  transition:box-shadow .4s var(--ease-out);
}
.contact-right .cform:focus-within{
  box-shadow:0 0 0 1px rgba(138,125,240,.3),
             0 0 0 1px rgba(138,125,240,.08) inset,
             0 32px 80px -24px rgba(0,0,0,.7);
}
.cfield:focus-within{
  border-bottom-color:rgba(138,125,240,.45)!important;
}
.csend:hover .csend-ico{transform:translate(2px,-2px);}
.csend .csend-ico{transition:transform .3s var(--ease-out);}
.csend.sent{
  background:rgba(59,165,93,.15)!important;
  color:rgba(59,165,93,.95)!important;
  border:1px solid rgba(59,165,93,.3)!important;
  pointer-events:none;
}
.csend.error{
  background:rgba(220,60,60,.12)!important;
  color:rgba(220,100,100,.9)!important;
}

/* Direct-contact block */
.contact-direct{
  margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid var(--stroke);
}
.contact-direct-l{
  font-family:var(--display);font-size:.52rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.28);margin-bottom:.5rem;
}
.contact-direct-email{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.05rem;letter-spacing:.01em;
  color:rgba(255,255,255,.68);
  text-decoration:none;display:block;
  transition:color .2s;
}
.contact-direct-email:hover{color:var(--white);}

/* csoc-row left-aligned inside contact-left */
#contact .csoc-row{
  justify-content:flex-start;
  margin-top:1.8rem;
}

/* ══════════════════════════════════════════════
   UPGRADE 1 — CINEMATIC PRELOADER
══════════════════════════════════════════════ */
#preloader{
  position:fixed;inset:0;z-index:100000;
  background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.8rem;pointer-events:all;
  transition:opacity .65s var(--ease-out);
}
#preloader.done{opacity:0;pointer-events:none;}
#preloader.hidden{display:none!important;}
#pl-num{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(6rem,14vw,11rem);line-height:1;
  letter-spacing:-.04em;color:var(--white);
  font-variant-numeric:tabular-nums;
  opacity:0;animation:plIn .6s .1s var(--ease-out) forwards;
}
@keyframes plIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
#pl-bar-wrap{
  width:min(340px,62vw);height:1px;
  background:rgba(255,255,255,.09);
  position:relative;overflow:hidden;
  opacity:0;animation:plIn .6s .22s var(--ease-out) forwards;
}
#pl-bar-fill{
  position:absolute;inset:0;width:0%;
  background:linear-gradient(90deg,rgba(138,125,240,.75),rgba(255,255,255,.85));
  transition:width .04s linear;
  box-shadow:0 0 8px rgba(138,125,240,.5);
}
#pl-label{
  font-family:var(--display);font-size:.52rem;font-weight:500;
  letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.2);
  opacity:0;animation:plIn .6s .34s var(--ease-out) forwards;
}
#pl-curtain-t,#pl-curtain-b{
  position:absolute;left:0;right:0;
  background:var(--black);z-index:2;
  transform-origin:top;
  transform:scaleY(0);
}
#pl-curtain-t{top:0;height:52%;transform-origin:top center;}
#pl-curtain-b{bottom:0;height:52%;transform-origin:bottom center;}
#preloader.curtain-out #pl-curtain-t{animation:curtainClose .65s cubic-bezier(.76,0,.24,1) forwards;}
#preloader.curtain-out #pl-curtain-b{animation:curtainClose .65s cubic-bezier(.76,0,.24,1) forwards;}
@keyframes curtainClose{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@media(prefers-reduced-motion:reduce){#preloader{display:none!important;}}

/* ══════════════════════════════════════════════
   UPGRADE 2 — HERO BACKGROUND REEL
══════════════════════════════════════════════ */
#hero-reel{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  z-index:0;
  pointer-events:none;
  mix-blend-mode:luminosity;
  transition:opacity 1.2s var(--ease-out);
}
#hero-reel.reel-ready{opacity:.16;}

/* ══════════════════════════════════════════════
   UPGRADE 3 — FILM GRAIN FULL-PAGE OVERLAY
══════════════════════════════════════════════ */
#grain-overlay{
  position:fixed;inset:-15%;z-index:9989;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:190px 190px;
  opacity:.025;
  mix-blend-mode:overlay;
  animation:grainPan .9s steps(5) infinite;
}
@keyframes grainPan{
  0%{background-position:0 0;}
  20%{background-position:-22px -14px;}
  40%{background-position:16px -8px;}
  60%{background-position:-10px 18px;}
  80%{background-position:8px -20px;}
  100%{background-position:0 0;}
}
@media(prefers-reduced-motion:reduce){#grain-overlay{animation:none;}}

/* ══════════════════════════════════════════════
   UPGRADE 4 — CURSOR LABEL (PLAY / VIEW)
══════════════════════════════════════════════ */
#cur-label{
  position:fixed;top:0;left:0;z-index:99996;pointer-events:none;
  font-family:var(--display);font-size:.46rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);
  background:rgba(6,6,10,.82);
  border:1px solid rgba(255,255,255,.1);
  padding:.22rem .62rem;
  transform:translate(-50%,20px);
  opacity:0;
  transition:opacity .18s;
  white-space:nowrap;
}
#cur-label.cl-show{opacity:1;}

/* ══════════════════════════════════════════════
   UPGRADE 5 — ANIMATED NAV UNDERLINE
══════════════════════════════════════════════ */
.nav-links a{position:relative;}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-4px;
  width:0;height:1px;
  background:var(--white);
  transition:width .38s var(--ease-out);
}
.nav-links a:hover::after{width:100%;}

/* ══════════════════════════════════════════════
   UPGRADE 6 — MAGNETIC BUTTON BASE
══════════════════════════════════════════════ */
.btn-fill,.btn-line,.btn-glow,.nav-cta,.csend{will-change:transform;}

/* ══════════════════════════════════════════════
   UPGRADE 7 — BEFORE/AFTER GRADE SLIDER
══════════════════════════════════════════════ */
.ba-section{
  display:none;
  position:relative;z-index:1;
  padding:7rem 5rem;
  background:var(--ink);
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
}
.ba-section.ba-visible{display:block;}
.ba-inner{max-width:1100px;margin:0 auto;}
.ba-section .s-label{margin-bottom:1.4rem;}
.ba-heading{
  font-family:var(--display);font-size:clamp(2.2rem,4vw,3.8rem);
  font-weight:300;letter-spacing:-.02em;line-height:1;
  margin-bottom:3rem;
}
.ba-heading em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--silver);}
.ba-compare{
  position:relative;width:100%;aspect-ratio:16/9;
  overflow:hidden;cursor:ew-resize;user-select:none;
  border:1px solid var(--stroke2);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.85);
}
.ba-before,.ba-after{position:absolute;inset:0;}
.ba-before img,.ba-after img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;pointer-events:none;
}
.ba-after{clip-path:inset(0 50% 0 0);}
.ba-lbl{
  position:absolute;top:1.1rem;
  font-family:var(--display);font-size:.55rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--white);background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.1);
  padding:.22rem .72rem;z-index:5;
}
.ba-lbl-before{left:1.1rem;}
.ba-lbl-after{right:1.1rem;}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;
  width:2px;background:rgba(255,255,255,.55);
  transform:translateX(-50%);z-index:10;pointer-events:none;
  box-shadow:0 0 12px rgba(255,255,255,.2);
}
.ba-knob{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(8,8,12,.88);
  border:1.5px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 28px rgba(0,0,0,.7);
  transition:border-color .2s var(--ease-out),transform .2s var(--ease-out);
}
.ba-compare.ba-dragging .ba-knob{
  border-color:rgba(255,255,255,.9);
  transform:translate(-50%,-50%) scale(1.1);
}
.ba-caption{
  font-family:var(--sans);font-size:.75rem;font-weight:300;
  color:rgba(255,255,255,.3);line-height:1.7;
  margin-top:1.4rem;text-align:center;
}
@media(max-width:768px){.ba-section{padding:5rem 2rem;}}

/* ══════════════════════════════════════════════
   UPGRADE 8 — CARD VIDEO PREVIEW
══════════════════════════════════════════════ */
.wc-preview{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:1;opacity:0;
  transition:opacity .55s var(--ease-out);
  pointer-events:none;
}
.wc.wc-previewing .wc-preview{opacity:1;}
.wc.wc-previewing .wc-thumb{opacity:0;transition:opacity .55s var(--ease-out);}
.wc.wc-previewing .wc-bg-text{opacity:0;transition:opacity .3s;}

/* ══════════════════════════════════════════════
   UPGRADE 9 — FEATURED TESTIMONIALS LAYOUT
══════════════════════════════════════════════ */
.t-featured{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:2rem;margin-top:3.5rem;
}
.tcard-featured{
  position:relative;overflow:hidden;
  background:rgba(138,125,240,.038);
  border:1px solid rgba(138,125,240,.18);
  padding:3rem 2.6rem 2.6rem;
  display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(138,125,240,.05) inset,
             0 40px 100px -40px rgba(0,0,0,.82);
  transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .45s var(--ease-out);
}
.tcard-featured::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(138,125,240,.55),transparent);
}
.tcard-featured::after{
  content:'';position:absolute;top:0;right:0;
  width:1px;height:100%;
  background:linear-gradient(180deg,rgba(138,125,240,.15),transparent 70%);
}
.tcard-featured:hover{
  border-color:rgba(138,125,240,.38);
  box-shadow:0 0 0 1px rgba(138,125,240,.08) inset,
             0 60px 130px -40px rgba(0,0,0,.92),
             0 0 60px -22px rgba(138,125,240,.14);
  transform:translateY(-5px);
}
.tcard-featured .tcard-badge{margin-bottom:1.5rem;align-self:flex-start;}
.tcard-featured .tcard-mark{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:7rem;line-height:.38;
  color:rgba(138,125,240,.14);
  display:block;margin-bottom:1.3rem;margin-left:-.2rem;
  transition:color .4s;
}
.tcard-featured:hover .tcard-mark{color:rgba(138,125,240,.28);}
.tcard-featured .tcard-quote{
  font-family:var(--serif);font-style:italic;
  font-size:1.18rem;font-weight:300;
  line-height:1.72;letter-spacing:.006em;
  color:rgba(255,255,255,.82);
  flex:1;margin-bottom:2.2rem;
  transition:color .35s;
}
.tcard-featured:hover .tcard-quote{color:rgba(255,255,255,.94);}
.tcard-featured .tcard-metric{color:rgba(164,155,255,.95);}
.tcard-featured .tcard-rule{
  height:1px;background:rgba(138,125,240,.14);
  margin-bottom:2rem;
}
.tcard-featured .tcard-author{display:flex;align-items:center;gap:1.2rem;}
.tcard-featured .tcard-avatar{
  width:56px;height:56px;flex-shrink:0;
  border-radius:50%;overflow:hidden;
  border:1px solid rgba(138,125,240,.28);
  background:#1a1a1f;
  transition:border-color .35s,box-shadow .35s;
}
.tcard-featured:hover .tcard-avatar{
  border-color:rgba(138,125,240,.5);
  box-shadow:0 0 22px -6px rgba(138,125,240,.35);
}
.tcard-featured .tcard-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.tcard-featured .tcard-avatar--logo{border-radius:12px;background:#1a4bcc;}
.tcard-featured .tcard-name{font-size:.9rem;font-weight:600;color:var(--white);}
.tcard-featured .tcard-role{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:.22rem 0 .45rem;}
.tcard-featured .tcard-brand{font-size:.82rem;}
.tcard-featured .tcard-links{margin-top:.65rem;}
@media(max-width:768px){.t-featured{grid-template-columns:1fr;}}

/* ══════════════════════════════════════════════
   POLISH — CARD DEPTH SHADOWS
══════════════════════════════════════════════ */
.wc{
  box-shadow:0 4px 24px -8px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.15);
}
.wc:hover{
  box-shadow:0 24px 72px -20px rgba(0,0,0,.88),
             0 0 0 1px rgba(255,255,255,.06),
             0 0 48px -22px rgba(138,125,240,.12)!important;
}

/* ══════════════════════════════════════════════
   POLISH — CONTACT PANEL DEPTH
══════════════════════════════════════════════ */
.cform{
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,
             0 40px 100px -40px rgba(138,125,240,.06);
}

/* ══════════════════════════════════════════════
   POLISH — LIGHTBOX SCALE ENTRY
══════════════════════════════════════════════ */
.lb-inner{
  transform:scale(.94);opacity:0;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out);
}
.lb-overlay.open .lb-inner{transform:scale(1);opacity:1;}

/* ══════════════════════════════════════════════
   POLISH — BTT HOVER UNDERLINE
══════════════════════════════════════════════ */
.btt{position:relative;overflow:hidden;}
.btt::after{
  content:'';position:absolute;bottom:0;left:50%;right:50%;
  height:1px;background:rgba(255,255,255,.22);
  transition:left .4s var(--ease-out),right .4s var(--ease-out);
}
.btt:hover::after{left:0;right:0;}

/* ══════════════════════════════════════════════
   POLISH — SCROLL MARGIN ANCHORS
══════════════════════════════════════════════ */
#work,#tools,#testimonials,#about,#community,#contact{scroll-margin-top:110px;}

/* ══════════════════════════════════════════════
   POLISH — CONSISTENT EASING ON TRANSITIONS
══════════════════════════════════════════════ */
.wc-overlay{transition:opacity .42s var(--ease-out)!important;}
.disc-msg{transition:background .22s var(--ease-out),border-color .22s var(--ease-out)!important;}
.tcard-featured{transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .45s var(--ease-out)!important;}

/* ══════════════════════════════════════════════
   POLISH — MOBILE REFINEMENTS
══════════════════════════════════════════════ */
@media(max-width:640px){
  .sp-strip{padding:0 1.5rem;}
}
@media(max-width:480px){
  .ba-compare{aspect-ratio:4/3;}
}

/* ══════════════════════════════════════════════
   PORTFOLIO — staggered card reveal + hover depth
══════════════════════════════════════════════ */
.wc.wc-reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),
             border-color .35s var(--ease-out),box-shadow .45s var(--ease-out);
}
.wc.wc-reveal.in{opacity:1;transform:none;}

/* Accent top-line sweep on hover */
.wc::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:1px;z-index:10;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(138,125,240,.6),rgba(255,255,255,.5),rgba(138,125,240,.6),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.wc:hover::before{transform:scaleX(1);}

/* Removed filter UI — hide any stale markup */
.work-hd-right,.work-filter,.wf-tabs,.wf-indicator,.wf-tab{display:none!important;}

/* ══════════════════════════════════════════════
   TOOLS — PIPELINE ANIMATION
══════════════════════════════════════════════ */
.proc-flow-track{
  position:relative;height:2px;
  background:rgba(255,255,255,.04);
  margin-top:3rem;margin-bottom:2rem;overflow:hidden;
}
.proc-flow-needle{
  position:absolute;left:0;top:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg,transparent,rgba(138,125,240,.7),rgba(255,255,255,.85),rgba(138,125,240,.7));
  box-shadow:0 0 14px rgba(138,125,240,.55);
  transition:width .55s cubic-bezier(.16,1,.3,1);
}
.proc-card{
  transition:background .4s var(--ease-out),border-color .4s var(--ease-out),
             transform .4s var(--ease-out),box-shadow .4s var(--ease-out);
}
.proc-card.proc-lit{
  background:rgba(138,125,240,.05)!important;
  border-top:1px solid rgba(138,125,240,.35)!important;
  transform:translateY(-5px)!important;
  box-shadow:0 20px 55px -20px rgba(138,125,240,.22),
             0 0 0 1px rgba(138,125,240,.09) inset!important;
}
.proc-card.proc-lit .proc-mono{transform:scale(1.1);}
.proc-card.proc-lit .proc-mono--pr{box-shadow:0 0 32px -4px rgba(155,140,255,.85)!important;}
.proc-card.proc-lit .proc-mono--ae{box-shadow:0 0 32px -4px rgba(155,125,255,.8)!important;}
.proc-card.proc-lit .proc-mono--dr{box-shadow:0 0 32px -4px rgba(255,170,90,.75)!important;}
.proc-card.proc-lit .proc-mono--au{box-shadow:0 0 32px -4px rgba(100,200,150,.75)!important;}
.proc-card.proc-lit::after{
  width:90%!important;
  background:linear-gradient(90deg,rgba(138,125,240,.65),transparent)!important;
}
@media(prefers-reduced-motion:reduce){
  .proc-flow-track{display:none;}
  .proc-card.proc-lit{transform:none!important;box-shadow:none!important;}
}

/* ══════════════════════════════════════════════
   TESTIMONIALS — 3-column scrolling (restored)
══════════════════════════════════════════════ */
.tcols-window{
  margin-top:3.5rem;
  max-height:680px;
  overflow:hidden;
}
.tcols{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.4rem;align-items:start;
}
.tcol--side{opacity:.72;transition:opacity .6s ease;}
.tcol--center{opacity:1;}
.tcols-window:hover .tcol--side{opacity:.88;}
.tcol-track{
  display:flex;flex-direction:column;gap:0;
  animation:colScrollUp linear infinite;
  will-change:transform;
}
.tcol-set{display:flex;flex-direction:column;gap:1.4rem;padding-bottom:1.4rem;}
@keyframes colScrollUp{
  from{transform:translateY(0);}
  to{transform:translateY(-50%);}
}
.tcol .tcard:hover{opacity:1!important;transform:translateY(-2px);}
/* testimonials mobile — canonical rules above at line ~2059 */

/* ── CONTACT form fill ── */
.contact-right .cform{width:100%;}
.cfield input,.cfield textarea{width:100%;}

/* ══════════════════════════════════════════════
   PORTFOLIO — 5-card layout (1 featured + 4 short)
══════════════════════════════════════════════ */

/* Thumbnail: cover + center crops letterbox bars */
.wc-thumb{
  object-fit:cover;
  object-position:center;
  width:100%;height:100%;
}
/* Fallback text when thumb unavailable */
.wc-bg-fallback{
  font-family:var(--display);font-size:5rem;font-weight:300;
  color:rgba(255,255,255,.05);letter-spacing:.1em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;position:absolute;inset:0;z-index:0;
  user-select:none;
}

/* Featured full-width commercial card */
.wc.wc-featured{
  grid-column:1 / -1;
  border-top:2px solid rgba(138,125,240,.5);
}
.wc.wc-featured .wc-img{aspect-ratio:16/7;}

/* Gold/amber badge for commercial category */
.wc-cat.wc-cat--amber{color:rgba(255,190,80,.85);}
.wc-cat.wc-cat--amber .wc-cat-dot{background:rgba(255,190,80,.85);}

/* ═══════════════════════════════════════════════════
   PORTFOLIO v5 — Unified vertical card wall
═══════════════════════════════════════════════════ */

/* work-grid: plain block container */
#work-grid{
  display:block!important;
  grid-template-columns:unset!important;
  background:none!important;border:none!important;
}

/* Work count */
.work-count{
  font-family:var(--display);font-size:.58rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.3);margin-top:.55rem;
  font-variant-numeric:tabular-nums;
}

/* ── Portfolio wall grid — centered flexbox, no orphan gap ── */
.pw-grid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.2rem;
}
.pw-card{
  flex:0 0 calc(25% - 0.9rem);max-width:calc(25% - 0.9rem);
}
@media(max-width:1200px){
  .pw-card{flex:0 0 calc(33.33% - 0.8rem);max-width:calc(33.33% - 0.8rem);}
}
@media(max-width:768px){
  .pw-grid{gap:.75rem !important;}
  .pw-card{flex:0 0 calc(50% - .38rem) !important;max-width:calc(50% - .38rem) !important;}
  .pw-cat{font-size:.48rem;}
  .pw-title{font-size:.88rem;}
}
@media(max-width:480px){
  .pw-card{flex:0 0 calc(50% - .375rem) !important;max-width:calc(50% - .375rem) !important;}
}

/* ── Vertical card ── */
.pw-card{
  position:relative;overflow:hidden;
  aspect-ratio:9/16;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  background:#070707;
  outline:none;
  /* reveal: start hidden */
  opacity:0;transform:translateY(44px) scale(0.95);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    border-color .3s,box-shadow .35s;
}
.pw-card.in{opacity:1;transform:translateY(0) scale(1);}
.pw-card:hover{
  border-color:rgba(138,125,240,.5);
  box-shadow:0 24px 64px -8px rgba(0,0,0,.8),
             0 0 0 1px rgba(138,125,240,.18),
             0 0 40px -12px rgba(138,125,240,.25);
  transform:translateY(-5px);
}
.pw-card:focus-visible{box-shadow:0 0 0 2px rgba(138,125,240,.55);}

/* Thumbnail */
.pw-thumb{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
  transition:transform .3s var(--ease-out),filter .3s;
}
.pw-card:hover .pw-thumb{transform:scale(1.06);filter:brightness(1.12);}

/* Bottom gradient */
.pw-card::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    to top,
    rgba(14,10,28,.92) 0%,
    rgba(8,6,18,.72) 28%,
    rgba(0,0,0,.18) 55%,
    transparent 75%
  );
  transition:opacity .35s;
}
.pw-card:hover::after{opacity:.92;}

/* Centered play button */
.pw-play-btn{
  position:absolute;top:50%;left:50%;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%) scale(.5);opacity:0;
  transition:transform .3s var(--ease-out),opacity .3s;
  width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,.4);
  box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.pw-card:hover .pw-play-btn{transform:translate(-50%,-50%) scale(1);opacity:1;}

/* Bottom meta */
.pw-meta{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:.7rem .8rem .85rem;pointer-events:none;
}
.pw-cat{
  display:block;
  font-family:var(--display);font-size:.52rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:.28rem;
  line-height:1;
}
.pw-cat::before{content:'· ';color:rgba(138,125,240,.7);}
.pw-title{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:1.08rem;line-height:1.28;
  color:rgba(255,255,255,.95);margin-bottom:.28rem;
  text-shadow:0 1px 14px rgba(0,0,0,.75);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.pw-runtime{
  font-family:monospace;font-size:.69rem;
  color:rgba(255,255,255,.4);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.pw-thumb-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.2rem;font-weight:300;
  color:rgba(255,255,255,.05);letter-spacing:.12em;text-transform:uppercase;
}

/* ── Badges ── */
.pw-badge{
  position:absolute;top:10px;right:10px;z-index:4;
  font-family:var(--display);font-size:.56rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;
  white-space:nowrap;line-height:1.4;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.pw-badge--gold{background:rgba(255,185,60,.88);color:#000;}
.pw-badge--purple{background:rgba(138,125,240,.85);color:#fff;}
.pw-badge--red{background:rgba(210,40,40,.88);color:#fff;}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .pw-card{opacity:1!important;transform:none!important;transition:none!important;}
  .pw-thumb,.pw-play-btn{transition:none!important;}
}

/* ═══════════════════════════════════════════════════
   LIGHTBOX — Vimeo vertical player
═══════════════════════════════════════════════════ */
.lb-inner{
  position:relative;
  width:min(60vw,400px);
  aspect-ratio:9/16;
  max-height:90vh;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 28px 90px -16px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06);
  transform:scale(.96);opacity:0;
  transition:transform .4s var(--ease-out),opacity .4s var(--ease-out);
}
.lb-overlay.open .lb-inner{transform:scale(1);opacity:1;}
/* Keep horizontal sizing if ever needed */
.lb-inner:not(.lb-vertical){
  width:min(92vw,1000px);
  aspect-ratio:16/9;
  max-height:90vh;
  border-radius:14px;
}
@media(max-width:768px){
  .lb-inner,.lb-inner.lb-vertical{width:min(88vw,380px);}
}

.lb-player-wrap{
  position:relative;width:100%;height:100%;
  overflow:hidden;border-radius:inherit;
}
.lb-player-wrap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;display:block;
}
/* ══════════════════════════════════════════════
   MOBILE — 320–768px OPTIMISATION PASS (v2)
══════════════════════════════════════════════ */

/* ── TASK 8: Section padding global ── */
@media(max-width:768px){
  .s{padding:4rem 1.5rem !important;}
  .s-h{font-size:clamp(2.2rem,10vw,3.5rem);}
  .s-label{margin-bottom:1.2rem;}
}
@media(max-width:480px){
  .s{padding:3.5rem 1.2rem !important;}
}

/* ── TASK 10: Nav mobile ── */
@media(max-width:768px){
  nav{padding:.9rem 1.2rem;}
  .nav-avatar{width:30px;height:30px;}
  .logo{font-size:.9rem;gap:.4rem;}
}

/* ── HERO — 2-column layout (photo beside heading) ── */
@media(max-width:768px){
  /* HERO — photo beside heading (2-column) */
  #hero{
    grid-template-columns:1.6fr 1fr !important;
    align-items:stretch !important;
    min-height:auto !important;
    padding:5.5rem 1.2rem 2.5rem !important;
    gap:1.1rem !important;
  }
  .hero-left{
    padding:0 !important; width:100% !important;
    display:flex !important; flex-direction:column !important; justify-content:center !important;
  }
  /* Override the global position:absolute;left:50%;right:0 (set outside any media query) */
  .hero-right{
    position:relative !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:100% !important; max-width:100% !important; padding:0 !important;
    display:flex !important; align-items:stretch !important; justify-content:flex-end !important;
  }
  .photo-wrap{
    width:100% !important; max-width:100% !important; height:100% !important;
    min-height:300px !important; margin:0 !important; flex-shrink:1 !important;
  }
  .photo-frame{ width:100% !important; height:100% !important; }
  .photo-frame img{ width:100% !important; height:100% !important; object-fit:cover !important; }
  .hero-h1{ font-size:clamp(1.7rem,7.5vw,2.7rem) !important; line-height:1.06 !important; }
  .hero-sub{ font-size:.74rem !important; line-height:1.6 !important; max-width:100% !important; }
  .hero-ctas{ flex-direction:column !important; gap:.6rem !important; width:100% !important; }
  .hero-ctas > *{ width:100% !important; justify-content:center !important; text-align:center !important; }
  .hero-metrics{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:0 !important; width:100% !important; }
  .metric-n{ font-size:1.5rem !important; }
  .metric-label{ font-size:.44rem !important; }
}

/* ── TASK 2: About section ── */
@media(max-width:768px){
  /* Override desktop 5rem side padding */
  #about{padding:4rem 1.5rem 3rem !important;}
  /* .ab-wrap is the actual grid class (grid-template-columns:1fr 380px) */
  .ab-wrap{grid-template-columns:1fr !important;gap:2rem !important;}
  /* Portrait column: constrain and center */
  .ab-right{width:100% !important;}
  .ab-portrait{max-width:min(280px,75vw);margin:0 auto;}
  .ab-img-frame{aspect-ratio:3/4;}
  /* Status/quick info row: 2-col instead of 3 */
  .ab-quick{grid-template-columns:1fr 1fr !important;gap:.75rem;}
  .ab-lead{font-size:.9rem;}
}

/* ── TASK 3: Community section ── */
@media(max-width:768px){
  /* .disc-stats is the real class (grid-template-columns:repeat(3,1fr)) */
  .disc-stats{grid-template-columns:1fr 1fr !important;}
  .disc-stat{border-bottom:1px solid rgba(255,255,255,.06);}
  /* .disc-stat-val is the real counter class (d-stat-n doesn't exist) */
  .disc-stat-val{font-size:2rem;}
  .disc-msgs{height:260px !important;}
  .disc-msg{padding:.5rem .75rem;}
}
@media(max-width:480px){
  .disc-stats{grid-template-columns:1fr !important;}
}

/* ── TASK 5: Tools of the craft ── */
@media(max-width:768px){
  .proc-grid{grid-template-columns:repeat(2,1fr) !important;gap:1rem !important;}
  .proc-card{padding:1.4rem 1.2rem;}
}
@media(max-width:480px){
  .proc-grid{grid-template-columns:1fr !important;}
}

/* ── TASK 7: Contact section ── */
@media(max-width:768px){
  .contact-grid{grid-template-columns:1fr !important;gap:2.5rem !important;padding:3rem 0 2rem !important;}
  .contact-desc{font-size:.85rem;}
  .csend-wrap{margin-top:2rem;}
  .csend{width:100%;justify-content:center;padding:1rem 1.5rem;}
  .csoc-row{justify-content:flex-start;}
}

/* ── TASK 9: Footer ── */
@media(max-width:768px){
  footer,.site-footer{flex-direction:column !important;align-items:center !important;gap:1rem;text-align:center;padding:2rem 1.5rem;}
  .sf-bar-l{justify-content:center;}
  .sf-bar-r{text-align:center;font-size:.55rem;}
  .sf-bar{flex-direction:column;align-items:center;gap:1rem;}
}
/* ── TESTIMONIALS: re-assert mobile after second .tcols base declaration (line ~2832) ── */
@media(max-width:900px){
  .tcols{grid-template-columns:1fr 1fr;}
  .tcols .tcol:last-child{display:none;}
  .tcol--side{opacity:.85;}
}
@media(max-width:540px){
  .tcols{grid-template-columns:1fr;}
  .tcols .tcol:first-child{display:none;}
  .tcols .tcol:last-child{display:none;}
  .tcols .tcol:nth-child(2){display:block !important;width:100%;}
  .tcols-window{max-height:650px;}
  .tcard{padding:1.4rem 1.2rem;}
  .tcard-quote{font-size:.92rem;}
}

/* ── CONTACT: remove inner wrap padding on mobile (overrides 900px rule) ── */
@media(max-width:768px){
  .contact-wrap{padding:0 !important;}
}
/* ══════════════════════════════════════════════
   BUG-FIX PASS — 6 critical mobile regressions
══════════════════════════════════════════════ */

/* BUG 1 — About: fixed 380px column overflows phone */
@media(max-width:768px){
  .ab-wrap{grid-template-columns:1fr !important;gap:2.5rem !important;}
  .ab-h-name{font-size:clamp(3rem,14vw,5rem) !important;}
  .ab-h-pre{font-size:clamp(1.2rem,5vw,1.8rem) !important;}
  .ab-img-frame{width:min(260px,70vw) !important;margin:0 auto !important;}
  .ab-right{width:100% !important;}
  .ab-meta-row{flex-direction:column !important;gap:.5rem !important;}
}

/* BUG 2 — Tools: 4-column grid collapses to 2 → 1 */
@media(max-width:768px){
  .proc-grid{grid-template-columns:repeat(2,1fr) !important;gap:1px !important;margin-top:2.5rem !important;}
  .proc-card{padding:1.6rem 1.4rem 1.8rem !important;min-height:200px !important;}
}
@media(max-width:480px){
  .proc-grid{grid-template-columns:1fr !important;}
  .proc-card{min-height:auto !important;}
}

/* BUG 3 — Community stats: 3 columns too narrow below 480px */
@media(max-width:480px){
  .disc-stats{grid-template-columns:1fr !important;}
  .disc-stat{border-right:none !important;border-bottom:1px solid var(--stroke) !important;padding:1.2rem 1rem !important;}
  .disc-stat:last-child{border-bottom:none !important;}
  .disc-stat-val{font-size:2rem !important;}
}

/* BUG 4 — Hero h1 too large below 480px */
/* hero-h1/sub/ctas at 480px — superseded by 2-col hero block below */

/* BUG 5 — Section horizontal padding too large below 480px */
@media(max-width:480px){
  .s{padding:3rem 1.2rem !important;}
  #contact{padding:3rem 1.2rem !important;}
  #community{padding:3rem 1.2rem !important;}
}

/* BUG 6 — Portfolio card label/title cramped below 480px */
@media(max-width:480px){
  .pw-grid{gap:.6rem !important;}
  .pw-title{font-size:.82rem !important;line-height:1.2 !important;}
  .pw-cat{font-size:.46rem !important;}
}
/* ═══════════════════════════════════════════
   MOBILE MASTER FIX — append to end of styles.css
═══════════════════════════════════════════ */

@media(max-width:768px){

  /* 3. SECTION HEADINGS */
  .s-h{
    font-size:clamp(2.4rem,9vw,4rem) !important;
    line-height:.98 !important;
  }

  /* 4. ABOUT */
  #about{ padding:4rem 1.5rem 3rem !important; }
  .ab-wrap{
    grid-template-columns:1fr !important;
    gap:2rem !important;
  }
  .ab-h-name{
    font-size:clamp(2.8rem,13vw,4.5rem) !important;
  }
  .ab-h-pre{
    font-size:clamp(1.1rem,5vw,1.6rem) !important;
  }
  .ab-right{ width:100% !important; }
  .ab-img-frame{
    width:min(260px,70vw) !important;
    margin:0 auto !important;
  }
  .ab-status{
    grid-template-columns:1fr 1fr !important;
    gap:.6rem !important;
  }

  /* 5. COMMUNITY */
  #community{ padding:3.5rem 1.5rem !important; }
  .disc-wrap{
    grid-template-columns:1fr !important;
    gap:2rem !important;
  }
  .disc-stats{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .disc-stat-val{ font-size:1.8rem !important; }
  .disc-msgs{ height:240px !important; }

  /* 6. TOOLS */
  .proc-flow-track{ display:none !important; }
  .proc-grid{
    grid-template-columns:repeat(2,1fr) !important;
    margin-top:2rem !important;
    gap:1px !important;
  }
  .proc-card{
    padding:1.5rem 1.2rem 1.8rem !important;
    min-height:180px !important;
  }

  /* 7. TESTIMONIALS */
  .tcols{ grid-template-columns:1fr !important; }
  .tcols .tcol:first-child{ display:none !important; }
  .tcols .tcols .tcol:last-child{ display:none !important; }
  .tcols .tcol:nth-child(2){ display:block !important; width:100% !important; }
  .tcols-window{ max-height:680px !important; }
  .tcard{ padding:1.4rem 1.2rem !important; }
  .tcard-quote{ font-size:.9rem !important; }

  /* 8. CONTACT */
  #contact{ padding:3.5rem 1.5rem 3rem !important; }
  .contact-grid{
    grid-template-columns:1fr !important;
    gap:2rem !important;
    padding:2rem 0 !important;
  }
  .contact-h{
    font-size:clamp(1.6rem,7vw,2.2rem) !important;
  }
  .csend{
    width:100% !important;
    justify-content:center !important;
  }
  .csoc-row{ justify-content:flex-start !important; }

  /* 9. LIGHTBOX */
  .lb-backdrop{
    padding:0 !important;
    align-items:flex-end !important;
  }
  .lb-inner{
    width:100vw !important;
    max-width:100vw !important;
    border-radius:16px 16px 0 0 !important;
  }
  .lb-inner.lb-vertical{
    width:90vw !important;
    max-width:90vw !important;
    margin:auto !important;
    border-radius:12px !important;
  }

  /* 10. FOOTER */
  .sf-bar{
    padding:1.2rem 1.5rem !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.7rem !important;
  }
  .sf-bar-l{ flex-wrap:wrap !important; }
  .sf-craft{ display:none !important; }
}

/* Extra small phones (≤480px) */
@media(max-width:480px){
  /* #hero padding and .hero-h1 handled by 2-col hero block below */
  .s{ padding:3rem 1.2rem !important; }
  #contact{ padding:3rem 1.2rem !important; }
  #community{ padding:3rem 1.2rem !important; }
  #about{ padding:3rem 1.2rem !important; }
  .s-h{ font-size:clamp(2rem,9vw,3.2rem) !important; }
  .proc-grid{ grid-template-columns:1fr !important; }
  .proc-card{ min-height:auto !important; padding:1.4rem 1rem !important; }
  .pw-grid{ gap:.5rem !important; }
  .pw-title{ font-size:.78rem !important; }
  .disc-stats{ grid-template-columns:1fr !important; }
  .disc-stat{
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    padding:1rem !important;
  }
  .disc-stat:last-child{ border-bottom:none !important; }
}
/* ── HERO 2-COL — tighter at ≤480px ── */
@media(max-width:480px){
  #hero{ grid-template-columns:1.7fr 1fr !important; gap:.8rem !important; padding:4.5rem 1rem 2rem !important; }
  .hero-h1{ font-size:clamp(1.45rem,6.8vw,2.1rem) !important; line-height:1.08 !important; }
  .hero-sub{ font-size:.66rem !important; }
  .hero-ctas > *{ font-size:.56rem !important; padding:.7rem .6rem !important; }
  .metric-n{ font-size:1.05rem !important; }
  .metric-label{ font-size:.38rem !important; }
  .photo-wrap{ min-height:260px !important; }
}
@media(max-width:768px){
  #hero{grid-template-columns:1.5fr 1fr !important;align-items:stretch !important;min-height:auto !important;padding:5.5rem 1.2rem 2.5rem !important;gap:1rem !important;}
  #hero .hero-left{padding:0 !important;display:flex !important;flex-direction:column !important;justify-content:center !important;gap:.5rem !important;}
  #hero .hero-right{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:100% !important;max-width:100% !important;padding:0 !important;display:flex !important;align-items:stretch !important;}
  #hero .photo-wrap{width:100% !important;max-width:100% !important;height:100% !important;min-height:280px !important;margin:0 !important;}
  #hero .photo-frame{width:100% !important;height:100% !important;aspect-ratio:unset !important;}
  #hero .photo-frame img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:center top !important;}
  #hero .hero-h1{font-size:clamp(1.55rem,6.8vw,2.5rem) !important;line-height:1.06 !important;}
  #hero .hero-sub{display:none !important;}
  #hero .hero-eyebrow{display:none !important;}
  #hero .hero-ctas{display:flex !important;flex-direction:column !important;gap:.5rem !important;width:100% !important;}
  #hero .hero-ctas > *,#hero .hero-ctas a,#hero .hero-ctas button,#hero .hero-ctas .btn-glow{width:100% !important;justify-content:center !important;text-align:center !important;padding:.75rem .8rem !important;font-size:.58rem !important;box-sizing:border-box !important;white-space:nowrap !important;}
  #hero .hero-metrics{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:0 !important;margin-top:0 !important;}
  #hero .metric-item{padding:.55rem .2rem !important;}
  #hero .metric-n{font-size:1.2rem !important;}
  #hero .metric-label{font-size:.39rem !important;}
}
@media(max-width:480px){
  #hero{grid-template-columns:1.6fr 1fr !important;padding:4.5rem 1rem 2rem !important;gap:.7rem !important;}
  #hero .hero-h1{font-size:clamp(1.35rem,6.5vw,1.9rem) !important;}
  #hero .photo-wrap{min-height:240px !important;}
}
/* ════════════════════════════════════════════════════════
   SUSANO MOBILE — DEFINITIVE OPTIMIZATION
   Appended last → always wins cascade battles
   Target: 375–428px (iPhone 12/13/14/15 range)
════════════════════════════════════════════════════════ */

/* ── GLOBAL ── */
@media(max-width:768px){
  body{overflow-x:hidden;}
  .s{padding:3.5rem 1.4rem !important;}
  .s-h{font-size:clamp(2.2rem,9vw,3.4rem) !important;line-height:.97 !important;}
  .s-label{margin-bottom:1rem !important;}
  nav{padding:.9rem 1.2rem !important;}
  .nav-avatar{width:32px !important;height:32px !important;}
  .logo{font-size:.88rem !important;gap:.45rem !important;}
}

/* ── HERO: hide photo, full-width clean single-column ── */
@media(max-width:768px){
  #hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:5.5rem 1.4rem 3rem !important;
    gap:0 !important;
    align-items:start !important;
  }
  #hero .hero-right{display:none !important;}
  #hero .hero-left{padding:0 !important;width:100% !important;max-width:100% !important;}
  .hero-frame-tl,.hero-frame-br,.hero-frame-tr{display:none !important;}
  .scroll-cue{display:none !important;}
  .hero-eyebrow{margin-bottom:.8rem !important;font-size:.6rem !important;}
  #hero .hero-h1{
    font-size:clamp(2.8rem,12vw,4.5rem) !important;
    line-height:1.02 !important;
    margin-bottom:1rem !important;
  }
  #hero .hero-sub{
    display:block !important;
    font-size:.84rem !important;
    line-height:1.6 !important;
    max-width:100% !important;
    margin-bottom:1.4rem !important;
    color:rgba(255,255,255,.58) !important;
  }
  #hero .hero-ctas{
    display:flex !important;
    flex-direction:column !important;
    gap:.6rem !important;
    width:100% !important;
    margin-bottom:1.6rem !important;
  }
  #hero .hero-ctas > *,
  #hero .hero-ctas a,
  #hero .hero-ctas button,
  #hero .hero-ctas .btn-glow{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.85rem 1rem !important;
    font-size:.62rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }
  #hero .hero-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:0 !important;
    border-top:1px solid rgba(255,255,255,.07) !important;
    padding-top:.8rem !important;
  }
  #hero .metric-item{padding:.7rem .4rem !important;border-right:1px solid rgba(255,255,255,.06) !important;}
  #hero .metric-item:last-child{border-right:none !important;}
  #hero .metric-n{font-size:1.5rem !important;}
  #hero .metric-label{font-size:.44rem !important;}
}

/* ── ABOUT: fix 380px overflow, stack properly ── */
@media(max-width:768px){
  #about{padding:3.5rem 1.4rem !important;}
  .ab-wrap{grid-template-columns:1fr !important;gap:2rem !important;}
  .ab-h-pre{font-size:clamp(1rem,5vw,1.5rem) !important;}
  .ab-h-name{font-size:clamp(2.8rem,12vw,4.5rem) !important;}
  .ab-right{width:100% !important;}
  .ab-portrait{width:min(260px,70vw) !important;margin:0 auto !important;display:block !important;}
  .ab-img-frame{aspect-ratio:3/4 !important;}
  .ab-quick{grid-template-columns:1fr 1fr !important;gap:1rem !important;}
}

/* ── COMMUNITY (Discord): single column, clean ── */
@media(max-width:768px){
  #community{padding:3.5rem 1.4rem !important;}
  .disc-wrap{grid-template-columns:1fr !important;gap:2.5rem !important;}
  .disc-stats{grid-template-columns:repeat(3,1fr) !important;}
  .disc-stat-val{font-size:1.9rem !important;}
  .disc-msgs{height:260px !important;}
  .disc-h{font-size:clamp(2rem,9vw,3rem) !important;line-height:1.05 !important;}
}

/* ── PORTFOLIO: 2-column vertical cards ── */
@media(max-width:768px){
  #work{padding:3.5rem 1.4rem !important;}
  .pw-grid{gap:.75rem !important;}
  .pw-card{flex:0 0 calc(50% - .38rem) !important;max-width:calc(50% - .38rem) !important;}
  .pw-cat{font-size:.47rem !important;}
  .pw-title{font-size:.82rem !important;line-height:1.22 !important;}
}

/* ── TOOLS: 2-col grid, hide pipeline line ── */
@media(max-width:768px){
  #tools{padding:3.5rem 1.4rem !important;}
  .proc-flow-track{display:none !important;}
  .proc-grid{grid-template-columns:repeat(2,1fr) !important;margin-top:2rem !important;}
  .proc-card{padding:1.6rem 1.3rem 1.8rem !important;min-height:auto !important;}
}

/* ── TESTIMONIALS: center column only ── */
@media(max-width:768px){
  #testimonials{padding:3.5rem 1.4rem !important;}
  .tcols{grid-template-columns:1fr !important;}
  .tcols .tcol:first-child{display:none !important;}
  .tcols .tcol:last-child{display:none !important;}
  .tcols .tcol:nth-child(2){display:block !important;width:100% !important;opacity:1 !important;}
  .tcols-window{max-height:620px !important;}
  .tcard{padding:1.4rem 1.2rem !important;}
  .tcard-quote{font-size:.9rem !important;}
}

/* ── CONTACT: single-column clean form ── */
@media(max-width:768px){
  #contact{padding:3.5rem 1.4rem 3rem !important;}
  .contact-grid{grid-template-columns:1fr !important;gap:2rem !important;padding:2rem 0 !important;}
  .contact-h{font-size:clamp(1.8rem,7.5vw,2.6rem) !important;line-height:1.08 !important;}
  .csend{width:100% !important;justify-content:center !important;}
  .contact-desc{font-size:.84rem !important;}
  .csoc-row{margin-top:1.2rem !important;}
  .contact-direct-email{font-size:.8rem !important;word-break:break-all !important;}
}

/* ── BEFORE/AFTER SLIDER ── */
@media(max-width:768px){
  .ba-section{padding:3rem 1.4rem !important;}
  .ba-compare{width:100% !important;aspect-ratio:16/9 !important;}
  .ba-heading{font-size:clamp(1.8rem,8vw,2.8rem) !important;}
}

/* ── FOOTER ── */
@media(max-width:768px){
  .sf-bar{padding:1.2rem 1.4rem !important;flex-direction:column !important;align-items:flex-start !important;gap:.6rem !important;}
  .sf-bar-r{font-size:.54rem !important;}
  .footer-avatar{width:28px !important;height:28px !important;}
}

/* ── 480px EXTRA SMALL (very small phones) ── */
@media(max-width:480px){
  .s{padding:3rem 1.2rem !important;}
  #hero{padding:5rem 1.2rem 2.5rem !important;}
  #hero .hero-h1{font-size:clamp(2.5rem,11vw,3.8rem) !important;}
  #about,#community,#work,#tools,#testimonials,#contact{padding:3rem 1.2rem !important;}
  .disc-stats{grid-template-columns:1fr !important;}
  .disc-stat{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.06) !important;padding:1rem !important;}
  .disc-stat:last-child{border-bottom:none !important;}
  .proc-grid{grid-template-columns:1fr !important;}
  .pw-grid{gap:.5rem !important;}
  .contact-h{font-size:clamp(1.6rem,7vw,2.2rem) !important;}
  .ab-h-name{font-size:clamp(2.4rem,10vw,3.5rem) !important;}
}
/* ════════════════════════════════════════════════════════
   SUSANO MOBILE — DEFINITIVE OPTIMIZATION
   Appended last → always wins cascade battles
   Target: 375–428px (iPhone 12/13/14/15 range)
════════════════════════════════════════════════════════ */

/* ── GLOBAL ── */
@media(max-width:768px){
  body{overflow-x:hidden;}
  .s{padding:3.5rem 1.4rem !important;}
  .s-h{font-size:clamp(2.2rem,9vw,3.4rem) !important;line-height:.97 !important;}
  .s-label{margin-bottom:1rem !important;}
  nav{padding:.9rem 1.2rem !important;}
  .nav-avatar{width:32px !important;height:32px !important;}
  .logo{font-size:.88rem !important;gap:.45rem !important;}
}

/* ── HERO: hide photo, full-width clean single-column ── */
@media(max-width:768px){
  #hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:5.5rem 1.4rem 3rem !important;
    gap:0 !important;
    align-items:start !important;
  }
  #hero .hero-right{display:none !important;}
  #hero .hero-left{padding:0 !important;width:100% !important;max-width:100% !important;}
  .hero-frame-tl,.hero-frame-br,.hero-frame-tr{display:none !important;}
  .scroll-cue{display:none !important;}
  .hero-eyebrow{margin-bottom:.8rem !important;font-size:.6rem !important;}
  #hero .hero-h1{
    font-size:clamp(2.8rem,12vw,4.5rem) !important;
    line-height:1.02 !important;
    margin-bottom:1rem !important;
  }
  #hero .hero-sub{
    display:block !important;
    font-size:.84rem !important;
    line-height:1.6 !important;
    max-width:100% !important;
    margin-bottom:1.4rem !important;
    color:rgba(255,255,255,.58) !important;
  }
  #hero .hero-ctas{
    display:flex !important;
    flex-direction:column !important;
    gap:.6rem !important;
    width:100% !important;
    margin-bottom:1.6rem !important;
  }
  #hero .hero-ctas > *,
  #hero .hero-ctas a,
  #hero .hero-ctas button,
  #hero .hero-ctas .btn-glow{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.85rem 1rem !important;
    font-size:.62rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }
  #hero .hero-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:0 !important;
    border-top:1px solid rgba(255,255,255,.07) !important;
    padding-top:.8rem !important;
  }
  #hero .metric-item{padding:.7rem .4rem !important;border-right:1px solid rgba(255,255,255,.06) !important;}
  #hero .metric-item:last-child{border-right:none !important;}
  #hero .metric-n{font-size:1.5rem !important;}
  #hero .metric-label{font-size:.44rem !important;}
}

/* ── ABOUT: fix 380px overflow, stack properly ── */
@media(max-width:768px){
  #about{padding:3.5rem 1.4rem !important;}
  .ab-wrap{grid-template-columns:1fr !important;gap:2rem !important;}
  .ab-h-pre{font-size:clamp(1rem,5vw,1.5rem) !important;}
  .ab-h-name{font-size:clamp(2.8rem,12vw,4.5rem) !important;}
  .ab-right{width:100% !important;}
  .ab-portrait{width:min(260px,70vw) !important;margin:0 auto !important;display:block !important;}
  .ab-img-frame{aspect-ratio:3/4 !important;}
  .ab-quick{grid-template-columns:1fr 1fr !important;gap:1rem !important;}
}

/* ── COMMUNITY (Discord): single column, clean ── */
@media(max-width:768px){
  #community{padding:3.5rem 1.4rem !important;}
  .disc-wrap{grid-template-columns:1fr !important;gap:2.5rem !important;}
  .disc-stats{grid-template-columns:repeat(3,1fr) !important;}
  .disc-stat-val{font-size:1.9rem !important;}
  .disc-msgs{height:260px !important;}
  .disc-h{font-size:clamp(2rem,9vw,3rem) !important;line-height:1.05 !important;}
}

/* ── PORTFOLIO: 2-column vertical cards ── */
@media(max-width:768px){
  #work{padding:3.5rem 1.4rem !important;}
  .pw-grid{gap:.75rem !important;}
  .pw-card{flex:0 0 calc(50% - .38rem) !important;max-width:calc(50% - .38rem) !important;}
  .pw-cat{font-size:.47rem !important;}
  .pw-title{font-size:.82rem !important;line-height:1.22 !important;}
}

/* ── TOOLS: 2-col grid, hide pipeline line ── */
@media(max-width:768px){
  #tools{padding:3.5rem 1.4rem !important;}
  .proc-flow-track{display:none !important;}
  .proc-grid{grid-template-columns:repeat(2,1fr) !important;margin-top:2rem !important;}
  .proc-card{padding:1.6rem 1.3rem 1.8rem !important;min-height:auto !important;}
}

/* ── TESTIMONIALS: center column only ── */
@media(max-width:768px){
  #testimonials{padding:3.5rem 1.4rem !important;}
  .tcols{grid-template-columns:1fr !important;}
  .tcols .tcol:first-child{display:none !important;}
  .tcols .tcol:last-child{display:none !important;}
  .tcols .tcol:nth-child(2){display:block !important;width:100% !important;opacity:1 !important;}
  .tcols-window{max-height:620px !important;}
  .tcard{padding:1.4rem 1.2rem !important;}
  .tcard-quote{font-size:.9rem !important;}
}

/* ── CONTACT: single-column clean form ── */
@media(max-width:768px){
  #contact{padding:3.5rem 1.4rem 3rem !important;}
  .contact-grid{grid-template-columns:1fr !important;gap:2rem !important;padding:2rem 0 !important;}
  .contact-h{font-size:clamp(1.8rem,7.5vw,2.6rem) !important;line-height:1.08 !important;}
  .csend{width:100% !important;justify-content:center !important;}
  .contact-desc{font-size:.84rem !important;}
  .csoc-row{margin-top:1.2rem !important;}
  .contact-direct-email{font-size:.8rem !important;word-break:break-all !important;}
}

/* ── BEFORE/AFTER SLIDER ── */
@media(max-width:768px){
  .ba-section{padding:3rem 1.4rem !important;}
  .ba-compare{width:100% !important;aspect-ratio:16/9 !important;}
  .ba-heading{font-size:clamp(1.8rem,8vw,2.8rem) !important;}
}

/* ── FOOTER ── */
@media(max-width:768px){
  .sf-bar{padding:1.2rem 1.4rem !important;flex-direction:column !important;align-items:flex-start !important;gap:.6rem !important;}
  .sf-bar-r{font-size:.54rem !important;}
  .footer-avatar{width:28px !important;height:28px !important;}
}

/* ── 480px EXTRA SMALL (very small phones) ── */
@media(max-width:480px){
  .s{padding:3rem 1.2rem !important;}
  #hero{padding:5rem 1.2rem 2.5rem !important;}
  #hero .hero-h1{font-size:clamp(2.5rem,11vw,3.8rem) !important;}
  #about,#community,#work,#tools,#testimonials,#contact{padding:3rem 1.2rem !important;}
  .disc-stats{grid-template-columns:1fr !important;}
  .disc-stat{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.06) !important;padding:1rem !important;}
  .disc-stat:last-child{border-bottom:none !important;}
  .proc-grid{grid-template-columns:1fr !important;}
  .pw-grid{gap:.5rem !important;}
  .contact-h{font-size:clamp(1.6rem,7vw,2.2rem) !important;}
  .ab-h-name{font-size:clamp(2.4rem,10vw,3.5rem) !important;}
}
/* ═══════════════════════════════════════════════════════════════════
   SUSANO — FINAL MOBILE MASTER v3
   Appended last — highest cascade priority for all mobile rules.
═══════════════════════════════════════════════════════════════════ */

/* ─── 1. NAV: show all links on mobile, 2-row layout (no hamburger) ─── */
@media(max-width:1100px){
  nav{
    flex-wrap:wrap !important;
    height:auto !important;
    padding:.7rem 1.4rem .5rem !important;
    row-gap:0 !important;
    column-gap:.5rem !important;
  }
  /* Row 1: logo left, HIRE ME right */
  .logo{ order:1 !important; flex:1 !important; font-size:1.1rem !important; }
  .logo-sub{ display:none !important; }
  .nav-cta{
    order:2 !important;
    display:flex !important;
    font-size:.54rem !important;
    padding:.5rem .95rem !important;
    white-space:nowrap !important;
  }
  /* Row 2: 4 links centered */
  .nav-links{
    display:flex !important;
    order:3 !important;
    width:100% !important;
    justify-content:center !important;
    gap:1.8rem !important;
    padding:.5rem 0 .45rem !important;
    border-top:1px solid rgba(255,255,255,.06) !important;
    margin-top:.2rem !important;
  }
  .nav-links a{
    font-size:.54rem !important;
    letter-spacing:.12em !important;
    color:rgba(255,255,255,.6) !important;
  }
  .nav-links a:hover{ color:#fff !important; }
  /* Hide hamburger — links are visible */
  .nav-burger{ display:none !important; }
}

/* ─── 2. HERO: portrait beside heading ─── */
@media(max-width:768px){
  #hero{
    grid-template-columns:1.4fr 1fr !important;
    align-items:start !important;
    min-height:auto !important;
    padding:5.5rem 1.4rem 2.5rem !important;
    gap:1rem !important;
  }
  /* Undo all position:absolute overrides */
  #hero .hero-right{
    display:flex !important;
    position:relative !important;
    left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    width:100% !important; max-width:100% !important;
    padding:0 !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  #hero .photo-wrap{
    width:100% !important; max-width:100% !important;
    height:auto !important; min-height:0 !important;
    margin:0 !important;
  }
  #hero .photo-frame{
    width:100% !important;
    height:auto !important;
    aspect-ratio:2/3 !important;
  }
  #hero .photo-frame img{
    width:100% !important; height:100% !important;
    object-fit:cover !important;
    object-position:top center !important;
  }
  /* Left column: no description (too long for narrow col) */
  #hero .hero-left{
    padding:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.5rem !important;
  }
  #hero .hero-sub{ display:none !important; }
  #hero .hero-eyebrow{ font-size:.52rem !important; margin-bottom:.3rem !important; }
  #hero .hero-h1{
    font-size:clamp(1.6rem,7vw,2.5rem) !important;
    line-height:1.05 !important;
  }
  #hero .hero-ctas{
    display:flex !important;
    flex-direction:column !important;
    gap:.5rem !important;
    width:100% !important;
    margin-top:.2rem !important;
  }
  #hero .hero-ctas > *,
  #hero .hero-ctas a,
  #hero .hero-ctas button,
  #hero .hero-ctas .btn-glow{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.7rem .8rem !important;
    font-size:.57rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }
  #hero .hero-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:0 !important;
    border-top:1px solid rgba(255,255,255,.07) !important;
    padding-top:.6rem !important;
    margin-top:.3rem !important;
    grid-column:1/-1 !important;
  }
  #hero .metric-item{
    padding:.6rem .3rem !important;
    border-right:1px solid rgba(255,255,255,.06) !important;
  }
  #hero .metric-item:last-child{ border-right:none !important; }
  #hero .metric-n{ font-size:1.2rem !important; }
  #hero .metric-label{ font-size:.4rem !important; }
  .hero-frame-tl,.hero-frame-br,.hero-frame-tr{ display:none !important; }
  .scroll-cue{ display:none !important; }
}

/* ─── 3. GLOBAL SECTIONS ─── */
@media(max-width:768px){
  .s{ padding:3.5rem 1.4rem !important; }
  .s-h{ font-size:clamp(2.2rem,9vw,3.4rem) !important; line-height:.97 !important; }
  #about{ padding:3.5rem 1.4rem !important; }
  .ab-wrap{ grid-template-columns:1fr !important; gap:2rem !important; }
  .ab-h-name{ font-size:clamp(2.8rem,12vw,4.5rem) !important; }
  .ab-right{ width:100% !important; }
  .ab-portrait{ width:min(260px,70vw) !important; margin:0 auto !important; display:block !important; }
  .ab-img-frame{ aspect-ratio:3/4 !important; }
  .ab-quick{ grid-template-columns:1fr 1fr !important; }
  #community{ padding:3.5rem 1.4rem !important; }
  .disc-wrap{ grid-template-columns:1fr !important; gap:2.5rem !important; }
  .disc-stats{ grid-template-columns:repeat(3,1fr) !important; }
  .disc-msgs{ height:260px !important; }
  #work{ padding:3.5rem 1.4rem !important; }
  .pw-grid{ gap:.75rem !important; }
  .pw-card{ flex:0 0 calc(50% - .38rem) !important; max-width:calc(50% - .38rem) !important; }
  .pw-title{ font-size:.82rem !important; }
  #tools{ padding:3.5rem 1.4rem !important; }
  .proc-flow-track{ display:none !important; }
  .proc-grid{ grid-template-columns:repeat(2,1fr) !important; margin-top:2rem !important; }
  .proc-card{ padding:1.5rem 1.2rem !important; min-height:auto !important; }
  #testimonials{ padding:3.5rem 1.4rem !important; }
  .tcols{ grid-template-columns:1fr !important; }
  .tcols .tcol:first-child,.tcols .tcol:last-child{ display:none !important; }
  .tcols .tcol:nth-child(2){ display:block !important; width:100% !important; opacity:1 !important; }
  .tcard{ padding:1.4rem 1.2rem !important; }
  #contact{ padding:3.5rem 1.4rem 3rem !important; }
  .contact-grid{ grid-template-columns:1fr !important; gap:2rem !important; padding:2rem 0 !important; }
  .contact-h{ font-size:clamp(1.8rem,7.5vw,2.6rem) !important; line-height:1.08 !important; }
  .csend{ width:100% !important; justify-content:center !important; }
  .ba-section{ padding:3rem 1.4rem !important; }
  .sf-bar{ padding:1.2rem 1.4rem !important; flex-direction:column !important; align-items:flex-start !important; gap:.6rem !important; }
}

/* ─── 4. 480px extra small ─── */
@media(max-width:480px){
  .s, #about, #community, #work, #tools, #testimonials, #contact{ padding:3rem 1.2rem !important; }
  #hero{ padding:5rem 1.2rem 2.5rem !important; gap:.75rem !important; }
  #hero .hero-h1{ font-size:clamp(1.4rem,6.5vw,2rem) !important; }
  .disc-stats{ grid-template-columns:1fr !important; }
  .disc-stat{ border-right:none !important; border-bottom:1px solid rgba(255,255,255,.06) !important; padding:.9rem !important; }
  .disc-stat:last-child{ border-bottom:none !important; }
  .proc-grid{ grid-template-columns:1fr !important; }
  .nav-links{ gap:1.2rem !important; }
  .nav-links a{ font-size:.5rem !important; }
}
/* ═══════════════════════════════════════════════════════════
   FINAL MOBILE v4 — single-row nav, tall portrait
═══════════════════════════════════════════════════════════ */

/* ── 1. NAV: single row — logo left, 4 links right, no HIRE ME ── */
@media(max-width:1100px){
  nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:58px !important;
    padding:0 1.4rem !important;
    gap:0 !important;
  }
  .logo{
    flex-shrink:0 !important;
    font-size:1rem !important;
    gap:.45rem !important;
  }
  .logo-sub{ display:none !important; }
  .nav-cta{ display:none !important; }
  .nav-burger{ display:none !important; }
  .nav-links{
    display:flex !important;
    gap:1.6rem !important;
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
    flex-shrink:0 !important;
  }
  .nav-links a{
    font-size:.54rem !important;
    letter-spacing:.11em !important;
    color:rgba(255,255,255,.6) !important;
    white-space:nowrap !important;
  }
  .nav-links a:hover{ color:#fff !important; }
  .nav-avatar{ width:30px !important; height:30px !important; }
}

/* ── 2. HERO: portrait stretches full column height ── */
@media(max-width:768px){
  #hero{
    grid-template-columns:1.15fr 1fr !important;
    align-items:stretch !important;
    min-height:auto !important;
    padding:5rem 1.4rem 2.5rem !important;
    gap:1.1rem !important;
  }
  /* Undo global position:absolute;left:50%;right:0 */
  #hero .hero-right{
    display:flex !important;
    position:relative !important;
    left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    width:100% !important; max-width:100% !important;
    padding:0 !important;
    align-self:stretch !important;
    align-items:stretch !important;
  }
  /* Photo fills full column height */
  #hero .photo-wrap{
    width:100% !important;
    height:100% !important;
    min-height:280px !important;
    margin:0 !important;
    flex:1 !important;
  }
  #hero .photo-frame{
    width:100% !important;
    height:100% !important;
    aspect-ratio:unset !important;
  }
  #hero .photo-frame img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:top center !important;
  }
  /* Left column: compact layout */
  #hero .hero-left{
    padding:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.55rem !important;
    justify-content:flex-start !important;
  }
  #hero .hero-eyebrow{
    font-size:.52rem !important;
    margin-bottom:0 !important;
    opacity:.7 !important;
  }
  #hero .hero-h1{
    font-size:clamp(1.7rem,7.2vw,2.6rem) !important;
    line-height:1.05 !important;
    margin-bottom:.1rem !important;
  }
  /* Keep description but smaller */
  #hero .hero-sub{
    display:block !important;
    font-size:.72rem !important;
    line-height:1.55 !important;
    color:rgba(255,255,255,.52) !important;
    margin-bottom:.2rem !important;
  }
  /* Buttons: stacked, full-width of left column */
  #hero .hero-ctas{
    display:flex !important;
    flex-direction:column !important;
    gap:.45rem !important;
    width:100% !important;
  }
  #hero .hero-ctas > *,
  #hero .hero-ctas a,
  #hero .hero-ctas button,
  #hero .hero-ctas .btn-glow{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.7rem .6rem !important;
    font-size:.56rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }
  /* Stats: span both columns */
  #hero .hero-metrics{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:0 !important;
    border-top:1px solid rgba(255,255,255,.07) !important;
    padding-top:.7rem !important;
    margin-top:.3rem !important;
    width:100% !important;
    align-self:end !important;
  }
  #hero .metric-item{
    padding:.6rem .3rem !important;
    border-right:1px solid rgba(255,255,255,.06) !important;
  }
  #hero .metric-item:last-child{ border-right:none !important; }
  #hero .metric-n{ font-size:1.2rem !important; }
  #hero .metric-label{ font-size:.4rem !important; }
  .hero-frame-tl,.hero-frame-br,.hero-frame-tr,.scroll-cue{ display:none !important; }
}

/* ── 3. ALL OTHER SECTIONS ── */
@media(max-width:768px){
  .s{ padding:3.5rem 1.4rem !important; }
  .s-h{ font-size:clamp(2.2rem,9vw,3.4rem) !important; line-height:.97 !important; }
  #about{ padding:3.5rem 1.4rem !important; }
  .ab-wrap{ grid-template-columns:1fr !important; gap:2rem !important; }
  .ab-h-name{ font-size:clamp(2.8rem,12vw,4.5rem) !important; }
  .ab-right{ width:100% !important; }
  .ab-portrait{ width:min(260px,70vw) !important; margin:0 auto !important; display:block !important; }
  .ab-img-frame{ aspect-ratio:3/4 !important; }
  .ab-quick{ grid-template-columns:1fr 1fr !important; }
  #community{ padding:3.5rem 1.4rem !important; }
  .disc-wrap{ grid-template-columns:1fr !important; gap:2.5rem !important; }
  .disc-stats{ grid-template-columns:repeat(3,1fr) !important; }
  .disc-msgs{ height:260px !important; }
  #work{ padding:3.5rem 1.4rem !important; }
  .pw-grid{ gap:.75rem !important; }
  .pw-card{ flex:0 0 calc(50% - .38rem) !important; max-width:calc(50% - .38rem) !important; }
  .pw-title{ font-size:.82rem !important; }
  #tools{ padding:3.5rem 1.4rem !important; }
  .proc-flow-track{ display:none !important; }
  .proc-grid{ grid-template-columns:repeat(2,1fr) !important; margin-top:2rem !important; }
  .proc-card{ padding:1.5rem 1.2rem !important; min-height:auto !important; }
  #testimonials{ padding:3.5rem 1.4rem !important; }
  .tcols{ grid-template-columns:1fr !important; }
  .tcols .tcol:first-child,.tcols .tcol:last-child{ display:none !important; }
  .tcols .tcol:nth-child(2){ display:block !important; width:100% !important; opacity:1 !important; }
  .tcard{ padding:1.4rem 1.2rem !important; }
  #contact{ padding:3.5rem 1.4rem 3rem !important; }
  .contact-grid{ grid-template-columns:1fr !important; gap:2rem !important; padding:2rem 0 !important; }
  .contact-h{ font-size:clamp(1.8rem,7.5vw,2.6rem) !important; }
  .csend{ width:100% !important; justify-content:center !important; }
  .ba-section{ padding:3rem 1.4rem !important; }
  .sf-bar{ padding:1.2rem 1.4rem !important; flex-direction:column !important; align-items:flex-start !important; gap:.6rem !important; }
}

/* ── 4. 480px extra small ── */
@media(max-width:480px){
  .s,#about,#community,#work,#tools,#testimonials,#contact{ padding:3rem 1.2rem !important; }
  #hero{ padding:4.8rem 1.2rem 2.5rem !important; }
  #hero .hero-h1{ font-size:clamp(1.45rem,6.8vw,2.1rem) !important; }
  #hero .hero-sub{ font-size:.66rem !important; }
  .nav-links{ gap:1.1rem !important; }
  .nav-links a{ font-size:.49rem !important; }
  .disc-stats{ grid-template-columns:1fr !important; }
  .disc-stat{ border-right:none !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
  .proc-grid{ grid-template-columns:1fr !important; }
}

/* ── NAV overflow patch (≤430px: CONTACT was clipping) ── */
@media(max-width:430px){
  nav{
    padding:0 1rem !important;
  }
  .logo{
    font-size:.9rem !important;
  }
  .nav-avatar{ width:26px !important; height:26px !important; }
  .nav-links{
    gap:0.6rem !important;
  }
  .nav-links a{
    font-size:.44rem !important;
  }
}

/* ── NAV patch ≤360px ── */
@media(max-width:360px){
  nav{ padding:0 0.7rem !important; }
  .nav-links{ gap:0.45rem !important; }
  .nav-links a{ font-size:.41rem !important; }
}

/* ═══════════════════════════════════════════════════
   HERO PORTRAIT FIX v5 + HIDE STATS ON MOBILE
═══════════════════════════════════════════════════ */

@media(max-width:768px){

  /* Fix the grid */
  #hero{
    grid-template-columns:1.15fr 1fr !important;
    align-items:stretch !important;
    min-height:auto !important;
    padding:5rem 1.4rem 2.5rem !important;
    gap:1rem !important;
  }

  /* Left column */
  #hero .hero-left{
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.55rem !important;
  }

  /* Portrait column — block, not flex, so photo fills 100% width */
  #hero .hero-right{
    display:block !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    overflow:hidden !important;
    align-self:stretch !important;
  }

  /* Photo wrapper fills the entire right column */
  #hero .photo-wrap{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:300px !important;
    margin:0 !important;
    position:relative !important;
  }

  /* Photo frame fills wrapper */
  #hero .photo-frame{
    display:block !important;
    width:100% !important;
    height:100% !important;
    aspect-ratio:unset !important;
    overflow:hidden !important;
  }

  /* Image fills frame */
  #hero .photo-frame img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:top center !important;
  }

  /* Heading */
  #hero .hero-h1{
    font-size:clamp(1.7rem,7.5vw,2.6rem) !important;
    line-height:1.05 !important;
  }

  /* Description */
  #hero .hero-sub{
    display:block !important;
    font-size:.72rem !important;
    line-height:1.55 !important;
    color:rgba(255,255,255,.52) !important;
  }

  /* Buttons stacked */
  #hero .hero-ctas{
    display:flex !important;
    flex-direction:column !important;
    gap:.45rem !important;
    width:100% !important;
  }
  #hero .hero-ctas > *,
  #hero .hero-ctas a,
  #hero .hero-ctas button,
  #hero .hero-ctas .btn-glow{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.72rem .8rem !important;
    font-size:.57rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  /* HIDE stats (8+, 5K+, 20K+) on mobile */
  #hero .hero-metrics{ display:none !important; }

  /* Hide decorations */
  .hero-frame-tl,.hero-frame-br,.hero-frame-tr,.scroll-cue{ display:none !important; }
}

@media(max-width:480px){
  #hero{ padding:4.8rem 1.2rem 2rem !important; gap:.75rem !important; }
  #hero .hero-h1{ font-size:clamp(1.45rem,7vw,2rem) !important; }
  #hero .hero-sub{ font-size:.66rem !important; }
  #hero .photo-wrap{ min-height:250px !important; }
}

/* ── Hero grid column balance fix ── */
/* Left column was expanding beyond 1.15fr because button/text min-width
   prevented the grid from shrinking it. Capping it lets the portrait
   reach its intended ~40% share. */
@media(max-width:768px){
  #hero .hero-left{
    min-width:0 !important;
    overflow:hidden !important;
  }
  #hero .hero-ctas > *,
  #hero .hero-ctas a,
  #hero .hero-ctas button,
  #hero .hero-ctas .btn-glow{
    min-width:0 !important;
  }
}

/* ── Remove overflow:hidden from hero-left (was clipping buttons) ── */
@media(max-width:768px){
  #hero .hero-left{ overflow:visible !important; }
}

/* ── Hero buttons: correct selector is .hero-actions (not .hero-ctas) ── */
@media(max-width:768px){
  #hero .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:.45rem !important;
    width:100% !important;
  }
  #hero .hero-actions > *,
  #hero .hero-actions a,
  #hero .hero-actions button{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.72rem .8rem !important;
    font-size:.57rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }
}
@media(max-width:480px){
  #hero .hero-actions > *,
  #hero .hero-actions a,
  #hero .hero-actions button{
    font-size:.54rem !important;
    padding:.68rem .6rem !important;
  }
}

/* ═══════════════════════════════════════════
   MOBILE FINAL — hero portrait + all sections
═══════════════════════════════════════════ */

/* NAV: single row, no hamburger */
@media(max-width:1100px){
  nav{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:space-between !important;
    height:58px !important; padding:0 1.4rem !important; gap:0 !important;
  }
  .logo{ flex-shrink:0 !important; font-size:1rem !important; gap:.45rem !important; }
  .logo-sub{ display:none !important; }
  .nav-cta{ display:none !important; }
  .nav-burger{ display:none !important; }
  .nav-links{
    display:flex !important; gap:1.6rem !important;
    list-style:none !important; margin:0 !important; padding:0 !important; flex-shrink:0 !important;
  }
  .nav-links a{ font-size:.54rem !important; letter-spacing:.11em !important; color:rgba(255,255,255,.6) !important; white-space:nowrap !important; }
  .nav-links a:hover{ color:#fff !important; }
  .nav-avatar{ width:30px !important; height:30px !important; }
}

/* HERO: portrait fills right column, no stats */
@media(max-width:768px){
  #hero{
    grid-template-columns:1.15fr 1fr !important;
    align-items:stretch !important; min-height:auto !important;
    padding:5rem 1.4rem 2.5rem !important; gap:1rem !important;
  }
  #hero .hero-left{ padding:0 !important; display:flex !important; flex-direction:column !important; gap:.55rem !important; }
  #hero .hero-right{
    display:block !important; position:relative !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:100% !important; max-width:100% !important; padding:0 !important;
    overflow:hidden !important; align-self:stretch !important;
  }
  #hero .photo-wrap{
    display:block !important; width:100% !important; max-width:none !important;
    height:100% !important; min-height:300px !important; margin:0 !important;
  }
  #hero .photo-frame{ display:block !important; width:100% !important; height:100% !important; aspect-ratio:unset !important; overflow:hidden !important; }
  #hero .photo-frame img{ display:block !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:top center !important; }
  #hero .hero-h1{ font-size:clamp(1.7rem,7.5vw,2.6rem) !important; line-height:1.05 !important; }
  #hero .hero-sub{ display:block !important; font-size:.72rem !important; line-height:1.55 !important; color:rgba(255,255,255,.52) !important; }
  #hero .hero-ctas{ display:flex !important; flex-direction:column !important; gap:.45rem !important; width:100% !important; }
  #hero .hero-ctas > *,#hero .hero-ctas a,#hero .hero-ctas button,#hero .hero-ctas .btn-glow{
    width:100% !important; justify-content:center !important; text-align:center !important;
    padding:.72rem .8rem !important; font-size:.57rem !important; box-sizing:border-box !important; white-space:nowrap !important;
  }
  #hero .hero-metrics{ display:none !important; }
  .hero-frame-tl,.hero-frame-br,.hero-frame-tr,.scroll-cue{ display:none !important; }
}

/* ALL SECTIONS */
@media(max-width:768px){
  .s{ padding:3.5rem 1.4rem !important; }
  .s-h{ font-size:clamp(2.2rem,9vw,3.4rem) !important; line-height:.97 !important; }
  #about{ padding:3.5rem 1.4rem !important; }
  .ab-wrap{ grid-template-columns:1fr !important; gap:2rem !important; }
  .ab-h-name{ font-size:clamp(2.8rem,12vw,4.5rem) !important; }
  .ab-right{ width:100% !important; }
  .ab-portrait{ width:min(260px,70vw) !important; margin:0 auto !important; display:block !important; }
  .ab-img-frame{ aspect-ratio:3/4 !important; }
  .ab-quick{ grid-template-columns:1fr 1fr !important; }
  #community{ padding:3.5rem 1.4rem !important; }
  .disc-wrap{ grid-template-columns:1fr !important; gap:2.5rem !important; }
  .disc-stats{ grid-template-columns:repeat(3,1fr) !important; }
  .disc-msgs{ height:260px !important; }
  #work{ padding:3.5rem 1.4rem !important; }
  .pw-grid{ gap:.75rem !important; }
  .pw-card{ flex:0 0 calc(50% - .38rem) !important; max-width:calc(50% - .38rem) !important; }
  #tools{ padding:3.5rem 1.4rem !important; }
  .proc-flow-track{ display:none !important; }
  .proc-grid{ grid-template-columns:repeat(2,1fr) !important; margin-top:2rem !important; }
  .proc-card{ padding:1.5rem 1.2rem !important; min-height:auto !important; }
  #testimonials{ padding:3.5rem 1.4rem !important; }
  .tcols{ grid-template-columns:1fr !important; }
  .tcols .tcol:first-child,.tcols .tcol:last-child{ display:none !important; }
  .tcols .tcol:nth-child(2){ display:block !important; width:100% !important; opacity:1 !important; }
  .tcard{ padding:1.4rem 1.2rem !important; }
  #contact{ padding:3.5rem 1.4rem 3rem !important; }
  .contact-grid{ grid-template-columns:1fr !important; gap:2rem !important; padding:2rem 0 !important; }
  .contact-h{ font-size:clamp(1.8rem,7.5vw,2.6rem) !important; }
  .csend{ width:100% !important; justify-content:center !important; }
  .sf-bar{ padding:1.2rem 1.4rem !important; flex-direction:column !important; align-items:flex-start !important; gap:.6rem !important; }
}

@media(max-width:480px){
  .s,#about,#community,#work,#tools,#testimonials,#contact{ padding:3rem 1.2rem !important; }
  #hero{ padding:4.8rem 1.2rem 2rem !important; gap:.75rem !important; }
  #hero .hero-h1{ font-size:clamp(1.45rem,6.8vw,2rem) !important; }
  #hero .photo-wrap{ min-height:250px !important; }
  .nav-links{ gap:1.1rem !important; }
  .nav-links a{ font-size:.49rem !important; }
  .disc-stats{ grid-template-columns:1fr !important; }
  .proc-grid{ grid-template-columns:1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO MOBILE — CINEMATIC FULL-SCREEN
   Inspired by: award-winning portfolio heroes (Semplice, Cargo, Awwwards)
   Portrait becomes the full background, text anchored at bottom.
   Correct class names: .hero-body, .hero-actions, .metric, .metric-l
═══════════════════════════════════════════════════════════════════ */

@media(max-width:768px){

  /* Hero: full viewport, block layout */
  #hero{
    display:block !important;
    position:relative !important;
    min-height:100svh !important;
    min-height:100vh !important;
    padding:0 !important;
    gap:0 !important;
    overflow:hidden !important;
  }

  /* Portrait fills entire hero as cinematic background */
  #hero .hero-right{
    position:absolute !important;
    top:0 !important; left:0 !important;
    right:0 !important; bottom:0 !important;
    width:100% !important; height:100% !important;
    max-width:none !important; padding:0 !important;
    display:block !important; z-index:0 !important;
  }
  #hero .photo-wrap{
    display:block !important;
    width:100% !important; height:100% !important;
    max-width:none !important; min-height:0 !important; margin:0 !important;
  }
  #hero .photo-frame{
    display:block !important;
    width:100% !important; height:100% !important;
    aspect-ratio:unset !important; overflow:hidden !important;
  }
  #hero .photo-frame img{
    display:block !important;
    width:100% !important; height:100% !important;
    object-fit:cover !important;
    object-position:center 18% !important;
    filter:brightness(.52) saturate(1.15) !important;
  }

  /* Cinematic gradient — light at top, dark at bottom for text */
  #hero .hero-right::after{
    content:'' !important;
    position:absolute !important; inset:0 !important;
    z-index:1 !important; pointer-events:none !important;
    background:linear-gradient(
      to bottom,
      rgba(6,6,6,.08) 0%,
      rgba(6,6,6,.04) 20%,
      rgba(6,6,6,.28) 50%,
      rgba(6,6,6,.82) 75%,
      rgba(6,6,6,.97) 100%
    ) !important;
  }

  /* Brand purple ambient glow at bottom */
  #hero::before{
    content:'' !important;
    position:absolute !important;
    bottom:0 !important; left:0 !important; right:0 !important; height:55% !important;
    background:radial-gradient(ellipse 100% 65% at 50% 100%, rgba(138,125,240,.13) 0%, transparent 70%) !important;
    z-index:2 !important; pointer-events:none !important;
  }

  /* Text pinned to bottom of hero */
  #hero .hero-left{
    position:absolute !important;
    bottom:0 !important; left:0 !important; right:0 !important;
    z-index:4 !important;
    padding:1.5rem 1.5rem 2.8rem !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.5rem !important;
  }

  /* Eyebrow */
  #hero .hero-eyebrow{
    font-size:.53rem !important;
    letter-spacing:.22em !important;
    opacity:.6 !important;
    margin-bottom:.1rem !important;
  }
  .eyebrow-line{ display:none !important; }

  /* Large impactful heading */
  #hero .hero-h1{
    font-size:clamp(2.9rem,13vw,4.6rem) !important;
    line-height:1.0 !important;
    margin-bottom:.15rem !important;
    text-shadow:0 2px 40px rgba(0,0,0,.5) !important;
  }

  /* Subtitle — correct class is .hero-body */
  #hero .hero-body{
    display:block !important;
    font-size:.75rem !important;
    line-height:1.55 !important;
    color:rgba(255,255,255,.52) !important;
    max-width:88% !important;
    margin-bottom:.1rem !important;
  }

  /* Buttons side by side — correct class is .hero-actions */
  #hero .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    gap:.6rem !important;
    width:100% !important;
    margin-top:.2rem !important;
  }
  #hero .hero-actions > *,
  #hero .hero-actions a,
  #hero .btn-fill,
  #hero .btn-glow{
    flex:1 !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.8rem .5rem !important;
    font-size:.57rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  /* Hide stats — correct class is .hero-metrics > .metric */
  #hero .hero-metrics{ display:none !important; }

  /* Keep REC indicator — cinematic detail */
  .hero-frame-tr{
    position:absolute !important;
    top:1rem !important; right:1.2rem !important;
    z-index:5 !important; display:block !important;
  }
  .hero-frame-tl,.hero-frame-br,.scroll-cue{ display:none !important; }
}

@media(max-width:480px){
  #hero .hero-h1{ font-size:clamp(2.5rem,12.5vw,3.8rem) !important; }
  #hero .hero-left{ padding:1.2rem 1.2rem 2.2rem !important; }
  #hero .hero-body{ font-size:.68rem !important; max-width:95% !important; }
}

/* ── NAV: single row on mobile (correct, no hamburger) ── */
@media(max-width:1100px){
  nav{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:space-between !important;
    height:58px !important; padding:0 1.4rem !important;
  }
  .logo{ flex-shrink:0 !important; font-size:1rem !important; gap:.45rem !important; }
  .logo-sub{ display:none !important; }
  .nav-cta{ display:none !important; }
  .nav-burger{ display:none !important; }
  .nav-links{
    display:flex !important; gap:1.6rem !important;
    list-style:none !important; margin:0 !important; padding:0 !important;
  }
  .nav-links a{
    font-size:.53rem !important; letter-spacing:.11em !important;
    color:rgba(255,255,255,.6) !important; white-space:nowrap !important;
  }
  .nav-links a:hover{ color:#fff !important; }
  .nav-avatar{ width:30px !important; height:30px !important; }
}

/* ── ALL OTHER SECTIONS ── */
@media(max-width:768px){
  .s{ padding:3.5rem 1.4rem !important; }
  .s-h{ font-size:clamp(2.2rem,9vw,3.4rem) !important; line-height:.97 !important; }
  #about{ padding:3.5rem 1.4rem !important; }
  .ab-wrap{ grid-template-columns:1fr !important; gap:2rem !important; }
  .ab-h-name{ font-size:clamp(2.8rem,12vw,4.5rem) !important; }
  .ab-right{ width:100% !important; }
  .ab-portrait{ width:min(260px,70vw) !important; margin:0 auto !important; display:block !important; }
  .ab-img-frame{ aspect-ratio:3/4 !important; }
  .ab-quick{ grid-template-columns:1fr 1fr !important; }
  #community{ padding:3.5rem 1.4rem !important; }
  .disc-wrap{ grid-template-columns:1fr !important; gap:2.5rem !important; }
  .disc-stats{ grid-template-columns:repeat(3,1fr) !important; }
  .disc-msgs{ height:260px !important; }
  #work{ padding:3.5rem 1.4rem !important; }
  .pw-grid{ gap:.75rem !important; }
  .pw-card{ flex:0 0 calc(50% - .38rem) !important; max-width:calc(50% - .38rem) !important; }
  #tools{ padding:3.5rem 1.4rem !important; }
  .proc-flow-track{ display:none !important; }
  .proc-grid{ grid-template-columns:repeat(2,1fr) !important; margin-top:2rem !important; }
  .proc-card{ padding:1.5rem 1.2rem !important; min-height:auto !important; }
  #testimonials{ padding:3.5rem 1.4rem !important; }
  .tcols{ grid-template-columns:1fr !important; }
  .tcols .tcol:first-child,.tcols .tcol:last-child{ display:none !important; }
  .tcols .tcol:nth-child(2){ display:block !important; width:100% !important; opacity:1 !important; }
  .tcard{ padding:1.4rem 1.2rem !important; }
  #contact{ padding:3.5rem 1.4rem 3rem !important; }
  .contact-grid{ grid-template-columns:1fr !important; gap:2rem !important; padding:2rem 0 !important; }
  .contact-h{ font-size:clamp(1.8rem,7.5vw,2.6rem) !important; }
  .csend{ width:100% !important; justify-content:center !important; }
  .sf-bar{ padding:1.2rem 1.4rem !important; flex-direction:column !important; align-items:flex-start !important; gap:.6rem !important; }
}

@media(max-width:480px){
  .s,#about,#community,#work,#tools,#testimonials,#contact{ padding:3rem 1.2rem !important; }
  .disc-stats{ grid-template-columns:1fr !important; }
  .disc-stat{ border-right:none !important; border-bottom:1px solid rgba(255,255,255,.06) !important; }
}

/* ═══════════════════════════════════════════════════════
   HERO + NAV FINAL POLISH
═══════════════════════════════════════════════════════ */

/* 1. Hide custom cursor completely on touch/mobile */
@media(max-width:1100px){
  #cur,#cur-dot,#cur-ring,#cur-label{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* 2. Nav: tighter at all mobile sizes to prevent overflow */
@media(max-width:1100px){
  nav{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center !important; justify-content:space-between !important;
    height:54px !important; padding:0 1.2rem !important; gap:0 !important;
  }
  .logo{ font-size:.92rem !important; gap:.4rem !important; flex-shrink:0 !important; }
  .logo-sub,.nav-cta,.nav-burger{ display:none !important; }
  .nav-links{
    display:flex !important; gap:1.3rem !important;
    list-style:none !important; margin:0 !important; padding:0 !important; flex-shrink:0 !important;
  }
  .nav-links a{
    font-size:.5rem !important; letter-spacing:.09em !important;
    color:rgba(255,255,255,.58) !important; white-space:nowrap !important;
  }
  .nav-links a:hover{ color:#fff !important; }
  .nav-avatar{ width:28px !important; height:28px !important; }
}

/* Extra tight for 375px phones */
@media(max-width:400px){
  .nav-links{ gap:1rem !important; }
  .nav-links a{ font-size:.46rem !important; letter-spacing:.06em !important; }
  nav{ padding:0 1rem !important; }
}

/* 3. Hero: cinematic gradient upgrade with left vignette */
@media(max-width:768px){

  /* More dramatic gradient — movie poster style */
  #hero .hero-right::after{
    background:
      linear-gradient(to right, rgba(6,6,6,.25) 0%, transparent 45%),
      linear-gradient(
        to bottom,
        rgba(6,6,6,.04) 0%,
        rgba(6,6,6,.02) 15%,
        rgba(6,6,6,.22) 45%,
        rgba(6,6,6,.78) 70%,
        rgba(6,6,6,.97) 90%,
        rgba(6,6,6,1) 100%
      ) !important;
  }

  /* Slightly darker image for better contrast */
  #hero .photo-frame img{
    filter:brightness(.48) saturate(1.2) !important;
    object-position:center 15% !important;
  }

  /* Purple glow — stronger */
  #hero::before{
    background:radial-gradient(ellipse 110% 70% at 50% 100%, rgba(138,125,240,.18) 0%, transparent 65%) !important;
  }

  /* Text block refinements */
  #hero .hero-left{
    padding:1.5rem 1.5rem 3rem !important;
    gap:.45rem !important;
  }

  /* Thin accent line above heading — premium detail */
  #hero .hero-eyebrow{
    display:flex !important;
    align-items:center !important;
    gap:.6rem !important;
    font-size:.5rem !important;
    letter-spacing:.22em !important;
    color:rgba(255,255,255,.5) !important;
    margin-bottom:.3rem !important;
  }

  /* Heading */
  #hero .hero-h1{
    font-size:clamp(2.8rem,13vw,4.4rem) !important;
    line-height:1.0 !important;
    text-shadow:0 4px 32px rgba(0,0,0,.6) !important;
  }

  /* Description */
  #hero .hero-body{
    font-size:.73rem !important;
    line-height:1.6 !important;
    color:rgba(255,255,255,.5) !important;
    max-width:92% !important;
  }

  /* Buttons */
  #hero .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    gap:.55rem !important;
    width:100% !important;
    margin-top:.3rem !important;
  }
  #hero .hero-actions > *,
  #hero .hero-actions a,
  #hero .btn-fill,
  #hero .btn-glow{
    flex:1 !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.82rem .4rem !important;
    font-size:.56rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  #hero .hero-metrics{ display:none !important; }

  /* REC indicator stays */
  .hero-frame-tr{
    position:absolute !important; top:3.8rem !important; right:1.2rem !important;
    z-index:5 !important; display:block !important;
  }
  .hero-frame-tl,.hero-frame-br,.scroll-cue{ display:none !important; }
}

@media(max-width:480px){
  #hero .hero-h1{ font-size:clamp(2.5rem,12vw,3.6rem) !important; }
  #hero .hero-left{ padding:1.3rem 1.2rem 2.5rem !important; }
  #hero .hero-body{ font-size:.68rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO MOBILE FINAL — no portrait, centered, dramatic typography
   Particle canvas stays visible as atmospheric background
═══════════════════════════════════════════════════════════════ */

@media(max-width:768px){

  /* HERO: full viewport, single column, content vertically centered */
  #hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    min-height:100svh !important;
    min-height:100vh !important;
    padding:6rem 1.4rem 3rem !important;
    gap:0 !important;
    align-items:center !important;
    position:relative !important;
    overflow:hidden !important;
  }

  /* Hide portrait completely */
  #hero .hero-right{ display:none !important; }

  /* Kill any leftover overlays from previous attempts */
  #hero .hero-right::after,
  #hero .hero-right::before{ display:none !important; }

  /* Subtle purple ambient glow at bottom — cinematic atmosphere */
  #hero::before{
    content:'' !important;
    position:absolute !important;
    bottom:-10% !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:140% !important;
    height:60% !important;
    background:radial-gradient(ellipse at center bottom, rgba(138,125,240,.18) 0%, rgba(138,125,240,.05) 35%, transparent 70%) !important;
    z-index:1 !important;
    pointer-events:none !important;
    display:block !important;
  }

  /* Content column */
  #hero .hero-left{
    position:relative !important;
    width:100% !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.7rem !important;
    z-index:3 !important;
  }

  /* Eyebrow with line accent */
  #hero .hero-eyebrow{
    display:flex !important;
    align-items:center !important;
    gap:.7rem !important;
    font-size:.58rem !important;
    letter-spacing:.22em !important;
    opacity:.7 !important;
    margin-bottom:.3rem !important;
  }
  .eyebrow-line{
    display:inline-block !important;
    width:28px !important; height:1px !important;
    background:rgba(255,255,255,.35) !important;
  }

  /* MASSIVE heading — main focal point */
  #hero .hero-h1{
    font-size:clamp(3.2rem,14.5vw,5.4rem) !important;
    line-height:.96 !important;
    letter-spacing:-.02em !important;
    margin-bottom:.4rem !important;
    text-shadow:0 4px 40px rgba(0,0,0,.4) !important;
  }

  /* Description — generous, readable */
  #hero .hero-body{
    display:block !important;
    font-size:.84rem !important;
    line-height:1.6 !important;
    color:rgba(255,255,255,.58) !important;
    max-width:95% !important;
    margin-bottom:.6rem !important;
  }

  /* CTA buttons side by side */
  #hero .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    gap:.6rem !important;
    width:100% !important;
    margin-top:.4rem !important;
    margin-bottom:1.2rem !important;
  }
  #hero .hero-actions > *,
  #hero .hero-actions a,
  #hero .btn-fill,
  #hero .btn-glow{
    flex:1 !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.9rem .5rem !important;
    font-size:.62rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  /* Stats — bring them back, full-width trust signal */
  #hero .hero-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:0 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    padding-top:1.1rem !important;
    margin-top:.6rem !important;
  }
  #hero .metric{
    padding:.5rem .4rem !important;
    border-right:1px solid rgba(255,255,255,.06) !important;
  }
  #hero .metric:last-child{ border-right:none !important; }
  #hero .metric-n{
    font-size:1.55rem !important;
    font-weight:600 !important;
  }
  #hero .metric-l{
    font-size:.44rem !important;
    letter-spacing:.07em !important;
    color:rgba(255,255,255,.45) !important;
  }

  /* REC indicator — cinematic */
  .hero-frame-tr{
    position:absolute !important;
    top:4.5rem !important;
    right:1.3rem !important;
    z-index:5 !important;
    display:block !important;
  }
  .hero-frame-tl,.hero-frame-br,.scroll-cue{ display:none !important; }
}

@media(max-width:480px){
  #hero{
    padding:5.5rem 1.2rem 2.5rem !important;
  }
  #hero .hero-h1{
    font-size:clamp(2.7rem,13.5vw,4.5rem) !important;
  }
  #hero .hero-body{ font-size:.76rem !important; }
  #hero .metric-n{ font-size:1.3rem !important; }
  #hero .metric-l{ font-size:.4rem !important; }
}

/* ═══════════════════════════════════════════════════════
   HERO + NAV SPACING FIX
═══════════════════════════════════════════════════════ */

/* NAV: logo and links together on left (not space-between) */
@media(max-width:1100px){
  nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    height:54px !important;
    padding:0 1.2rem !important;
    gap:1.8rem !important;
  }
  .logo{
    flex-shrink:0 !important;
    font-size:.9rem !important;
    gap:.4rem !important;
  }
  .logo-sub,.nav-cta,.nav-burger{ display:none !important; }
  .nav-links{
    display:flex !important;
    gap:1.2rem !important;
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
    flex-shrink:1 !important;
    min-width:0 !important;
  }
  .nav-links a{
    font-size:.48rem !important;
    letter-spacing:.08em !important;
    color:rgba(255,255,255,.6) !important;
    white-space:nowrap !important;
  }
  .nav-links a:hover{ color:#fff !important; }
  .nav-avatar{ width:28px !important; height:28px !important; }
}

@media(max-width:400px){
  nav{ gap:1.2rem !important; padding:0 1rem !important; }
  .nav-links{ gap:.95rem !important; }
  .nav-links a{ font-size:.44rem !important; letter-spacing:.06em !important; }
}

/* HERO: natural height, no excess empty space */
@media(max-width:768px){
  #hero{
    display:grid !important;
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding:4rem 1.4rem 3rem !important;
    gap:0 !important;
    align-items:start !important;
    position:relative !important;
    overflow:hidden !important;
  }

  /* Hide portrait */
  #hero .hero-right{ display:none !important; }
  #hero .hero-right::after,
  #hero .hero-right::before{ display:none !important; }

  /* Purple ambient glow - subtle */
  #hero::before{
    content:'' !important;
    position:absolute !important;
    bottom:-15% !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:130% !important;
    height:55% !important;
    background:radial-gradient(ellipse at center bottom, rgba(138,125,240,.16) 0%, rgba(138,125,240,.04) 40%, transparent 75%) !important;
    z-index:1 !important;
    pointer-events:none !important;
    display:block !important;
  }

  /* Content column */
  #hero .hero-left{
    position:relative !important;
    width:100% !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.7rem !important;
    z-index:3 !important;
  }

  /* Eyebrow */
  #hero .hero-eyebrow{
    display:flex !important;
    align-items:center !important;
    gap:.7rem !important;
    font-size:.58rem !important;
    letter-spacing:.22em !important;
    opacity:.7 !important;
    margin-bottom:.3rem !important;
  }
  .eyebrow-line{
    display:inline-block !important;
    width:28px !important; height:1px !important;
    background:rgba(255,255,255,.35) !important;
  }

  /* Heading */
  #hero .hero-h1{
    font-size:clamp(3rem,13vw,4.8rem) !important;
    line-height:.96 !important;
    letter-spacing:-.02em !important;
    margin-bottom:.4rem !important;
    text-shadow:0 4px 30px rgba(0,0,0,.4) !important;
  }

  /* Description */
  #hero .hero-body{
    display:block !important;
    font-size:.8rem !important;
    line-height:1.55 !important;
    color:rgba(255,255,255,.58) !important;
    max-width:95% !important;
    margin-bottom:.5rem !important;
  }

  /* Buttons side by side */
  #hero .hero-actions{
    display:flex !important;
    flex-direction:row !important;
    gap:.6rem !important;
    width:100% !important;
    margin-top:.3rem !important;
    margin-bottom:1rem !important;
  }
  #hero .hero-actions > *,
  #hero .hero-actions a,
  #hero .btn-fill,
  #hero .btn-glow{
    flex:1 !important;
    justify-content:center !important;
    text-align:center !important;
    padding:.85rem .5rem !important;
    font-size:.6rem !important;
    box-sizing:border-box !important;
    white-space:nowrap !important;
  }

  /* Stats */
  #hero .hero-metrics{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:0 !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
    padding-top:1rem !important;
    margin-top:.4rem !important;
  }
  #hero .metric{
    padding:.4rem .3rem !important;
    border-right:1px solid rgba(255,255,255,.06) !important;
  }
  #hero .metric:last-child{ border-right:none !important; }
  #hero .metric-n{
    font-size:1.45rem !important;
    font-weight:600 !important;
  }
  #hero .metric-l{
    font-size:.42rem !important;
    letter-spacing:.07em !important;
    color:rgba(255,255,255,.45) !important;
  }

  /* REC indicator */
  .hero-frame-tr{
    position:absolute !important;
    top:4.2rem !important;
    right:1.3rem !important;
    z-index:5 !important;
    display:block !important;
  }
  .hero-frame-tl,.hero-frame-br,.scroll-cue{ display:none !important; }
}

@media(max-width:480px){
  #hero{
    padding:3.8rem 1.2rem 2.5rem !important;
  }
  #hero .hero-h1{
    font-size:clamp(2.5rem,12vw,4rem) !important;
  }
  #hero .hero-body{ font-size:.72rem !important; }
  #hero .metric-n{ font-size:1.25rem !important; }
  #hero .metric-l{ font-size:.38rem !important; }
}


/* ═══════════════════════════════════════════════════════
   STATS LABEL POLISH — readability
═══════════════════════════════════════════════════════ */

@media(max-width:768px){
  #hero .metric-l{
    font-size:.46rem !important;
    letter-spacing:.08em !important;
    color:rgba(255,255,255,.5) !important;
    margin-top:.15rem !important;
  }
  #hero .metric-n{
    font-size:1.55rem !important;
    font-weight:600 !important;
    letter-spacing:-.01em !important;
  }
}

/* ═══════════════════════════════════════════════════════
   REC INDICATOR — better position (was overlapping eyebrow)
═══════════════════════════════════════════════════════ */

@media(max-width:768px){
  .hero-frame-tr{
    position:absolute !important;
    top:5.5rem !important;
    right:1.2rem !important;
    z-index:5 !important;
    display:block !important;
  }
}