/* ==========================================================
   NAZA — design tokens & global type  (black-first, sans-led)
   ========================================================== */
:root{
  /* Palette  — locked to ACID */
  --bg:        #050706;
  --bg-1:      #0A0D0B;
  --bg-2:      #10130E;
  --bg-3:      #161B12;
  --ink:       #F1F3EE;
  --ink-2:     #E2E6DA;
  --mute:      #7E8580;
  --mute-2:    #555A52;
  --line:      rgba(241,243,238,0.10);
  --line-2:    rgba(241,243,238,0.18);
  --line-3:    rgba(241,243,238,0.28);
  --accent:    #C8F751;
  --accent-2:  #D9FB7B;
  --invert-bg: #F1F3EE;
  --invert-fg: #050706;

  /* Organic radii */
  --r-blob:    34% 66% 60% 40% / 50% 38% 62% 50%;
  --r-blob-2:  60% 40% 30% 70% / 60% 30% 70% 40%;
  --r-blob-3:  44% 56% 38% 62% / 64% 36% 64% 36%;
  --r-soft:    28px;

  /* Type — locked to BRUTAL (single Space Grotesk voice) */
  --display: "Space Grotesk", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Space Grotesk", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Space Grotesk", "Neue Haas Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad-x: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth; background: var(--bg);}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  line-height:1.55;
  font-size:16px;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-feature-settings: "ss01","ss02","cv11";
}
@media (hover:none){ body{cursor:auto;} }

a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:none;}
@media (hover:none){ button{cursor:pointer;} }

img, svg{display:block; max-width:100%;}

::selection{ background:var(--accent); color:#000; }

/* ---------- Type vocabulary ---------- */
.display{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:0.92;
}
.italic{
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:500;
}
.mono-sm{ font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--mute);
}

.h-section{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(56px, 9.5vw, 168px);
  line-height:0.92;
  letter-spacing:-0.035em;
}

/* ---------- Layout ---------- */
.container{
  width:100%;
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
.section{
  padding-top: clamp(140px, 16vw, 260px);
  padding-bottom: clamp(140px, 16vw, 260px);
  position:relative;
}
/* Section rhythm — generous breathing room between blocks */
#services.section{ padding-bottom: clamp(72px, 9vw, 140px); }
#work > .section{ padding-top: clamp(96px, 11vw, 180px); padding-bottom: clamp(96px, 11vw, 180px); }
#experience.section{ padding-top: clamp(96px, 11vw, 180px); padding-bottom: clamp(96px, 11vw, 180px); }
#skills > .section{ padding-top: clamp(96px, 11vw, 180px); padding-bottom: clamp(96px, 11vw, 180px); }
#education.section{ padding-top: clamp(96px, 11vw, 180px); padding-bottom: clamp(96px, 11vw, 180px); }
#contact > .section{ padding-top: clamp(96px, 11vw, 180px); }
.hairline{ height:1px; background:var(--line-2); width:100%; }
.hairline-ink{ height:1px; background:var(--ink); width:100%; }

/* "invert" no longer used for whole sections, just retained for tiles/buttons */

/* ---------- Custom cursor (desktop only) ---------- */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:1000;
  border-radius:50%;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px; height:6px;
  background:#fff;
  transition: width .25s ease, height .25s ease, background .25s ease;
}
.cursor-ring{
  width:38px; height:38px;
  border:1px solid #fff;
  transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .2s ease;
}
.cursor-ring.is-hover{ width:64px; height:64px; }
.cursor-dot.is-hover{ width:10px; height:10px; }
@media (hover:none){ .cursor-dot,.cursor-ring{display:none;} }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:90;
  padding: 20px var(--pad-x);
  display:flex; align-items:center; justify-content:space-between;
  color:var(--ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 100%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease;
}
.nav .brand{
  display:inline-flex;
  align-items:center;
  height: 36px;
}
.nav .brand img{
  height: 36px;
  width: auto;
  display:block;
}
.nav .links{
  display:flex; gap:36px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:500;
}
.nav a.link{
  position:relative; padding-bottom:4px;
  color: var(--ink);
}
.nav a.link::after{
  content:""; position:absolute; left:0; bottom:0;
  height:1px; width:100%; background:currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s cubic-bezier(.7,0,.2,1);
}
.nav a.link:hover::after{ transform: scaleX(1); transform-origin: left center; }
.nav .status{ display:flex; gap:14px; align-items:center; font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color: var(--ink); }
.nav .status .dot{ width:6px; height:6px; border-radius:50%; background:#3ECF8E; box-shadow:0 0 12px #3ECF8E; }
@media (max-width: 820px){
  .nav .links{ display:none; }
}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; right:0;
  height:1px; background:transparent;
  z-index:95;
}
.progress > span{
  display:block; height:100%;
  background:var(--accent);
  transform-origin:left center;
  transform: scaleX(0);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding: 18px 26px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid var(--line-3);
  border-radius:999px;
  position:relative; overflow:hidden;
  transition: color .4s ease, border-color .4s ease;
  white-space:nowrap;
  color: var(--ink);
}
.btn .arrow{ display:inline-block; transition: transform .4s ease; }
.btn::before{
  content:""; position:absolute; inset:0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.7,0,.2,1);
  z-index:-1;
}
.btn:hover::before{ transform: translateY(0); }
.btn:hover{ color: var(--bg); border-color: var(--ink); }
.btn:hover .arrow{ transform: translateX(4px); }

.btn.primary{
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn.primary::before{ background: var(--accent); }
.btn.primary:hover{ color: var(--ink); border-color: var(--accent); }

.btn.ghost{
  background: transparent;
  color: var(--ink);
}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.marquee .track{
  display:inline-flex;
  gap:48px;
  padding: 28px 0;
  animation: marq 38s linear infinite;
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(46px, 9vw, 120px);
  line-height:1;
  letter-spacing:-0.025em;
}
.marquee .track span{ display:inline-flex; align-items:center; gap:48px; color:var(--ink); }
.marquee .track span .dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); display:inline-block; }
@keyframes marq {
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){ .marquee .track{ animation:none; } }

/* one intentional inverted marquee for editorial contrast */
.marquee.invert{
  background: var(--invert-bg);
  border-color: rgba(0,0,0,0.18);
}
.marquee.invert .track span{ color: var(--invert-fg); }
.marquee.invert .track span .dot{ background: var(--invert-fg); }

/* ---------- Section number ---------- */
.snum{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mute);
  font-weight:500;
}
.snum .num{ color:var(--ink); }

/* ---------- Tiles (placeholders) ---------- */
.tile{
  position:relative;
  background: var(--bg-3);
  color:var(--ink);
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--line-2);
}
.tile .fill{ position:absolute; inset:0; }
.tile .hatch{ position:absolute; inset:0; color:var(--ink); opacity:.35; }
.tile .label{
  position:absolute; left:14px; bottom:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink); background:var(--bg);
  padding:6px 9px; border:1px solid var(--line-2);
}
.tile .corner{
  position:absolute; right:14px; top:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--mute);
}
.tile.invert{ background: var(--invert-bg); border-color: transparent; color: var(--invert-fg); }
/* When a tile has an image, fill it edge-to-edge */
.tile-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.tile--has-img{ border-color: transparent; background: #000; }
.tile--has-img .label{
  background: rgba(0,0,0,0.66);
  border-color: rgba(245,243,238,0.18);
  color: #F2EFE9;
  backdrop-filter: blur(4px);
}
.tile--has-img .corner{ color: rgba(245,243,238,0.85); }
.tile.invert .label{ background: var(--invert-bg); border-color: rgba(0,0,0,0.15); color: var(--invert-fg); }
.tile.invert .corner{ color: rgba(0,0,0,0.55); }
.tile.invert .hatch{ color:#000; opacity:.45; }
.tile.accent{ background:var(--accent); color:#fff; border-color:var(--accent); }
.tile.accent .hatch{ color:#fff; opacity:.55; }
.tile.accent .label{ background:var(--accent); border-color: rgba(255,255,255,0.4); color:#fff; }
.tile.accent .corner{ color: rgba(255,255,255,0.75); }

/* ---------- Hero ---------- */
.hero{
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 80px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative;
}
.hero .meta-row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(60px, 12vw, 232px);
  line-height: 0.9;
  letter-spacing:-0.045em;
  margin: 0;
  color: var(--ink);
}
.hero h1 .line{ display:block; overflow:hidden; padding-bottom: 0.04em; }
.hero h1 .inner{ display:inline-block; }
.hero h1 .ampl{
  color: var(--accent);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero .lede{
  max-width: 460px;
  color: var(--ink-2);
  font-size: 16px;
  line-height:1.6;
  font-family: var(--body);
  font-weight: 400;
}
.hero .cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero .float-shape{
  position:absolute; right:var(--pad-x); top:42%;
  width: clamp(180px, 22vw, 320px);
  height: clamp(180px, 22vw, 320px);
  pointer-events:none;
  opacity:.85;
}

.metaStrip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.metaStrip > div{ display:flex; flex-direction:column; gap:6px; }
.metaStrip .k{ font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); font-weight:500; }
.metaStrip .v{ font-family:var(--body); font-size:14px; color:var(--ink); }
@media (max-width: 780px){ .metaStrip{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Services ---------- */
.services{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-top:1px solid var(--line-2);
}
.svc{
  grid-column: span 3;
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  padding: 28px 22px 28px;
  min-height: 280px;
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden;
  transition: background .5s ease, color .5s ease;
  background: var(--bg);
}
.svc:nth-child(4n){ border-right:0; }
.svc .num{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--mute); font-weight:500; }
.svc h3{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(28px, 2.5vw, 40px);
  line-height:1;
  letter-spacing:-0.025em;
  margin: 16px 0 0;
  color: var(--ink);
}
.svc h3 .italic{ color: var(--mute); }
.svc p{ color:var(--mute); font-size:13px; line-height:1.55; margin:0; font-family: var(--body); }
.svc .arrow{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .4s ease;
  color: var(--ink);
}
.svc:hover{ background: var(--ink); color: var(--bg); }
.svc:hover .num{ color: rgba(0,0,0,0.55); }
.svc:hover p{ color: rgba(0,0,0,0.65); }
.svc:hover h3{ color: var(--bg); }
.svc:hover h3 .italic{ color: var(--accent); }
.svc:hover .arrow{ color: var(--bg); transform: translateX(6px); }
@media (max-width: 1100px){
  .svc{ grid-column: span 6; }
  .svc:nth-child(4n){ border-right:1px solid var(--line-2); }
  .svc:nth-child(2n){ border-right:0; }
}
@media (max-width: 640px){
  .svc{ grid-column: span 12; border-right:0 !important; }
}

/* ---------- Work ---------- */
.work-row{
  display:grid;
  grid-template-columns: 80px 1fr 1.1fr 1fr;
  align-items:center;
  gap: 32px;
  padding: 36px 0;
  border-top:1px solid var(--line);
  position:relative;
  color: var(--ink);
  transition: background .35s ease;
}
.work-row:last-child{ border-bottom:1px solid var(--line); }
.work-row .wn{ font-family:var(--mono); font-size:12px; color: var(--mute); letter-spacing:0.16em; font-weight:500; }
.work-row h3{
  font-family:var(--display); font-weight:500;
  font-size: clamp(34px, 4.8vw, 68px);
  line-height:0.96; letter-spacing:-0.035em; margin:0;
  color: var(--ink);
  transition: transform .5s cubic-bezier(.7,0,.2,1), color .35s ease;
}
.work-row .cat{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color: var(--mute); font-weight:500; }
.work-row .desc{ color: var(--ink-2); font-size:14px; line-height:1.55; max-width:34ch; font-family: var(--body); opacity: 0.7; }
.work-row .cta{ justify-self:end; display:flex; align-items:center; gap:14px; color: var(--ink); opacity: 0.6; transition: opacity .3s ease; }
.work-row:hover .cta{ opacity: 1; }
.work-row:hover h3{ transform: translateX(8px); color: var(--accent); }
.work-row .hover-tile{
  position:absolute; pointer-events:none;
  top:50%; left:42%;
  width: 320px; height: 220px;
  transform: translate(-50%, -50%) scale(.96);
  opacity:0;
  transition: opacity .4s ease, transform .4s ease;
  z-index:3;
}
.work-row:hover .hover-tile{ opacity:1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 1024px){
  .work-row{ grid-template-columns: 48px 1fr 1fr; }
  .work-row .desc{ grid-column: 2 / -1; }
  .work-row .cta{ display:none; }
  .work-row .hover-tile{ display:none; }
}
@media (max-width: 640px){
  .work-row{ grid-template-columns: 1fr; gap:10px; padding:24px 0; }
}

/* ---------- About / split ---------- */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items:start;
}
@media (max-width: 880px){ .split{ grid-template-columns: 1fr; } }

.bigQuote{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(34px, 4.6vw, 72px);
  line-height: 1.0;
  letter-spacing:-0.035em;
  color: var(--ink);
}
.bigQuote .italic{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.bigQuote .underline-accent{
  display:inline-block;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: 0 100%;
  padding-bottom: 6px;
}

/* ---------- Experience timeline ---------- */
.exp{
  display:grid;
  grid-template-columns: 120px 1fr 1.4fr 1fr;
  gap: 28px;
  padding: 36px 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.exp:last-child{ border-bottom:1px solid var(--line); }
.exp .yr{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; color:var(--mute); font-weight:500; }
.exp .role{
  font-family:var(--display); font-weight:500;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height:1; letter-spacing:-0.03em;
  color: var(--ink);
}
.exp .org{ font-family:var(--body); font-size:14px; color:var(--mute); margin-top:10px; }
.exp .blurb{ font-size:14px; line-height:1.6; color:var(--ink-2); opacity: 0.75; font-family: var(--body); }
.exp .tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); justify-self:end; font-weight:500; }
@media (max-width: 980px){
  .exp{ grid-template-columns: 80px 1fr; gap:16px; }
  .exp .blurb{ grid-column: 2 / -1; }
  .exp .tag{ grid-column: 2 / -1; justify-self:start; }
}

/* ---------- Skills ---------- */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
}
.skill-block{
  grid-column: span 6;
  border-top:1px solid var(--line);
  padding-top: 22px;
}
.skill-block h4{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(28px, 3vw, 44px);
  margin: 0 0 22px;
  letter-spacing:-0.03em;
  color: var(--ink);
}
.skill-block .row{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.skill-block .chip{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  padding: 10px 16px;
  border:1px solid var(--line-2);
  border-radius:999px;
  color: var(--ink);
  font-weight: 500;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.skill-block .chip:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.skill-block .num{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color: var(--mute); margin-bottom:6px; font-weight:500; }
@media (max-width: 880px){ .skill-block{ grid-column: span 12; } }

/* ---------- Education ---------- */
.edu-list{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0 60px;
}
@media (max-width:760px){ .edu-list{ grid-template-columns:1fr; } }
.edu-row{
  display:grid;
  grid-template-columns: 36px 1fr auto;
  gap: 22px;
  align-items:center;
  padding: 24px 0;
  border-top:1px solid var(--line);
  font-size: 16px;
  transition: padding-left .35s ease;
}
.edu-row:hover{ padding-left: 8px; }
.edu-row .n{ font-family:var(--mono); font-size:11px; color:var(--mute); letter-spacing:0.14em; font-weight:500; }
.edu-row .t{
  font-family:var(--display); font-weight:500;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height:1.15;
  letter-spacing:-0.02em;
  color: var(--ink);
}
.edu-row .o{ font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); font-weight:500; }

/* ---------- Contact ---------- */
.contact h2{
  font-family:var(--display);
  font-weight:500;
  font-size: clamp(64px, 12.5vw, 232px);
  line-height:0.88;
  letter-spacing:-0.05em;
  margin:0;
  color: var(--ink);
}
.contact h2 .italic{ font-family: var(--serif); font-style:italic; font-weight: 400; letter-spacing:-0.02em; }
.contact h2 .accent{ color:var(--accent); }
.contact-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 32px;
  margin-top: 88px;
}
.contact-grid .lbl{
  grid-column: span 3;
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--mute); padding-top: 20px;
  border-top:1px solid var(--line);
  font-weight: 500;
}
.contact-grid .val{
  grid-column: span 9;
  font-family:var(--display); font-weight:500;
  font-size: clamp(28px, 3.6vw, 60px);
  line-height:1; letter-spacing:-0.035em;
  padding-top: 20px;
  border-top:1px solid var(--line);
  color: var(--ink);
}
.contact-grid .val a{ display:inline-flex; align-items:center; gap:14px; transition: color .3s ease; }
.contact-grid .val a .ar{ font-family:var(--mono); font-style:normal; font-size:14px; color: var(--mute); transition: transform .3s ease, color .3s ease; }
.contact-grid .val a:hover{ color: var(--accent); }
.contact-grid .val a:hover .ar{ color: var(--accent); transform: translate(4px,-4px); }
@media (max-width:760px){
  .contact-grid .lbl{ grid-column: span 12; padding-top:14px; }
  .contact-grid .val{ grid-column: span 12; border-top:0; padding-top:8px; }
}

/* ---------- Footer ---------- */
footer.foot{
  border-top:1px solid var(--line);
  padding: 48px var(--pad-x) 40px;
  display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap;
  background: var(--bg);
  color: var(--ink);
}
footer.foot .brand{
  display:flex;
  align-items:flex-end;
  flex: 1 1 auto;
  min-width: 0;
}
footer.foot .brand img{
  width: 100%;
  max-width: 720px;
  height: auto;
  display:block;
}
footer.foot .meta{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--mute);
  display:flex; flex-direction:column; gap:8px; align-items:flex-end; text-align:right;
  font-weight: 500;
}
footer.foot .meta a{ color: var(--ink); transition: color .3s ease; }
footer.foot .meta a:hover{ color: var(--accent); }
footer.foot .phrase{
  max-width:300px;
  font-family:var(--serif); font-style:italic; font-size:20px;
  color: var(--ink-2); line-height:1.35;
}

/* ---------- Utility ---------- */
.col-span-2{ grid-column: span 2; }
.col-span-3{ grid-column: span 3; }
.col-span-4{ grid-column: span 4; }
.col-span-5{ grid-column: span 5; }
.col-span-6{ grid-column: span 6; }
.col-span-7{ grid-column: span 7; }
.col-span-8{ grid-column: span 8; }
.col-span-9{ grid-column: span 9; }
.col-span-10{ grid-column: span 10; }
.col-span-12{ grid-column: span 12; }
.grid-12{ display:grid; grid-template-columns: repeat(12,1fr); gap: 32px; }
.flex{ display:flex; }
.between{ justify-content: space-between; }
.items-end{ align-items:flex-end; }
.items-center{ align-items:center; }
.gap-24{ gap:24px; }
.uppercase{ text-transform:uppercase; }
.muted{ color: var(--mute); }
.accent{ color: var(--accent); }
.text-right{ text-align:right; }

/* grain overlay (subtle film) */
.grain-overlay{
  position:fixed; inset:0; pointer-events:none;
  z-index: 60;
  opacity:.06;
  mix-blend-mode: screen;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ==========================================================
   Intro Loader  (logo + blob)
   ========================================================== */
body.intro-lock{ overflow:hidden; }

.loader{
  position:fixed; inset:0;
  z-index:2000;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  gap: 60px;
  overflow:hidden;
  transition: transform .9s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}
.loader.curtain-up{ transform: translateY(-101%); }

.loader-blob{
  position:absolute;
  width: clamp(420px, 50vw, 720px);
  height: clamp(420px, 50vw, 720px);
  background: radial-gradient(circle at 40% 35%,
    rgba(var(--accent-rgb),0.28) 0%,
    rgba(var(--accent-rgb),0.10) 30%,
    rgba(var(--accent-rgb),0) 65%);
  border-radius: var(--r-blob);
  filter: blur(12px);
  animation: blobMorph 6s ease-in-out infinite;
  z-index: 0;
}

.loader-logo-wrap{
  position: relative;
  z-index: 1;
  display:flex; align-items:center; justify-content:center;
  width: clamp(280px, 60vw, 760px);
}
.loader-logo{
  width: 100%; height: auto;
  display:block;
  clip-path: inset(0 100% 0 0);
  animation: loader-logo-wipe 1.5s cubic-bezier(.6,0,.2,1) .2s forwards;
}
@keyframes loader-logo-wipe{
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

.loader-meta{
  position:absolute; left:0; right:0; bottom: 32px;
  padding: 0 var(--pad-x);
  display:grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items:center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform:uppercase;
  color: var(--mute); font-weight: 500;
  z-index: 2;
}
.loader-line{ display:block; height:1px; background: rgba(245,243,238,0.18); position:relative; overflow:hidden; }
.loader-fill{
  position:absolute; inset:0;
  background: var(--accent);
  transform-origin:left; transform:scaleX(0);
  animation: loader-fill 1.6s cubic-bezier(.6,0,.2,1) .2s forwards;
}
@keyframes loader-fill{ to{ transform:scaleX(1); } }

/* ==========================================================
   Cursor accent glow (desktop only)
   ========================================================== */
.cursor-glow{
  position:fixed; top:0; left:0;
  width: 520px; height: 520px;
  border-radius:50%;
  pointer-events:none;
  z-index: 1;
  background: radial-gradient(circle at center,
    rgba(var(--accent-rgb),0.16) 0%,
    rgba(var(--accent-rgb),0.08) 30%,
    rgba(var(--accent-rgb),0) 70%);
  mix-blend-mode: screen;
  transition: opacity .4s ease;
  transform: translate(-9999px,-9999px);
  will-change: transform;
}
@media (hover: none){ .cursor-glow{ display:none; } }
@media (prefers-reduced-motion: reduce){ .cursor-glow{ display:none; } }

/* ==========================================================
   Parallax shapes
   ========================================================== */
.parallax-layer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 0;
  overflow:visible;
}
.parallax-layer .psh{
  position:absolute;
  will-change: transform;
  opacity: 0.5;
  transition: opacity .4s ease;
}
.psh--ring{
  width: 120px; height: 120px;
  border: 1px solid rgba(245,243,238,0.18);
  border-radius:50%;
}
.psh--ring-lg{
  width: 280px; height: 280px;
  border: 1px solid rgba(245,243,238,0.10);
  border-radius:50%;
}
.psh--dot{
  width: 14px; height: 14px;
  border-radius:50%;
  background: rgba(245,243,238,0.55);
}
.psh--dot.psh--accent{
  background: var(--accent);
  box-shadow: 0 0 40px rgba(var(--accent-rgb),0.45);
}
.psh--cross{
  width: 28px; height: 28px;
  background:
    linear-gradient(rgba(245,243,238,0.45), rgba(245,243,238,0.45)) center / 100% 1px no-repeat,
    linear-gradient(rgba(245,243,238,0.45), rgba(245,243,238,0.45)) center / 1px 100% no-repeat;
}
.psh--bar{
  width: 80px; height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
@media (max-width: 760px){
  .parallax-layer .psh{ opacity: 0.3; }
  .psh--ring-lg{ width: 180px; height: 180px; }
}

/* Lift main content above shapes; do NOT touch fixed-position chrome
   (nav, cursor, parallax-layer, loader, progress) */
#root > main{ position: relative; z-index: 2; }
.cursor-dot, .cursor-ring{ z-index: 1000; }
.progress{ z-index: 1001; }
.loader{ z-index: 2000; }

/* ==========================================================
   Work-row card upgrade — accent glow + number scale
   ========================================================== */
.work-row{
  border-radius: 0;
  transition: padding-left .35s cubic-bezier(.2,.7,.2,1), background .35s ease;
}
.work-row::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  transform: scaleX(0); transform-origin:left center;
  transition: transform .6s cubic-bezier(.7,0,.2,1);
}
.work-row:hover::before{ transform: scaleX(1); }
.work-row:hover{ padding-left: 12px; }
.work-row .wn{
  transition: color .35s ease, transform .4s ease, letter-spacing .35s ease;
  display:inline-block;
}
.work-row:hover .wn{
  color: var(--accent);
  letter-spacing: 0.22em;
  transform: translateX(-4px);
}

/* ==========================================================
   Nav links — letter-spacing expansion on hover
   ========================================================== */
.nav a.link{
  transition: color .35s ease, letter-spacing .35s ease;
}
.nav a.link:hover{
  color: var(--accent);
  letter-spacing: 0.24em;
}

/* ==========================================================
   Contact — animated accent line + email shimmer
   ========================================================== */
.contact{ position:relative; }
.contact::before{
  content:""; position:absolute; left: var(--pad-x); right: var(--pad-x); top: 0;
  height:1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
  opacity: 0.7;
}
.contact h2{
  position: relative;
}
.contact h2 .accent{
  position: relative;
  display: inline-block;
}
.contact h2 .accent::after{
  content:""; position:absolute; left:0; right:6%; bottom: 6px;
  height: 8px; background: var(--accent);
  opacity: 0;
  transform: scaleX(0); transform-origin:left;
  animation: contact-underline 1.4s cubic-bezier(.2,.7,.2,1) .8s forwards;
}
@keyframes contact-underline{
  to{ opacity:.18; transform: scaleX(1); }
}

/* ==========================================================
   Service card tilt on hover (subtle, gpu-friendly)
   ========================================================== */
.svc{
  transform-origin: center;
  transition: background .5s ease, color .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.svc:hover{ transform: scale(1.005); }
.svc::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin:left center;
  transition: transform .6s cubic-bezier(.7,0,.2,1);
}
.svc:hover::after{ transform: scaleX(1); }

/* ==========================================================
   Edu rows — accent dash flares on hover
   ========================================================== */
.edu-row{ position:relative; }
.edu-row::after{
  content:""; position:absolute; left:0; top:0;
  height:1px; width: 0;
  background: var(--accent);
  transition: width .6s cubic-bezier(.7,0,.2,1);
}
.edu-row:hover::after{ width: 100%; }
.edu-row:hover .t{ color: var(--accent); }
.edu-row .t{ transition: color .3s ease; }

/* ==========================================================
   Hero meta strip — subtle shimmer on accent value
   ========================================================== */
.metaStrip .v[style*="--accent"]{ position:relative; }

/* nav blur strengthens on scroll (delegated to inline state) */
@supports not (backdrop-filter: blur(8px)){
  .nav{ background: rgba(0,0,0,0.85); }
}

/* ==========================================================
   ORGANIC LAYER  — blob morph keyframes, fluid motion,
   logo-first hero, wavy dividers
   ========================================================== */

/* blob shapes that slowly morph */
@keyframes blobMorph {
  0%   { border-radius: 34% 66% 60% 40% / 50% 38% 62% 50%; transform: rotate(0deg); }
  25%  { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { border-radius: 44% 56% 38% 62% / 64% 36% 64% 36%; transform: rotate(180deg); }
  75%  { border-radius: 70% 30% 56% 44% / 36% 64% 36% 64%; }
  100% { border-radius: 34% 66% 60% 40% / 50% 38% 62% 50%; transform: rotate(360deg); }
}
@keyframes blobMorph2 {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33%  { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  66%  { border-radius: 50% 50% 60% 40% / 70% 50% 50% 30%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
@keyframes blobDrift {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(20px,-14px,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Override parallax shapes — keep some, add blobs */
.psh--blob{
  width: 280px; height: 280px;
  background: radial-gradient(circle at 35% 30%,
    rgba(var(--accent-rgb),0.10) 0%,
    rgba(var(--accent-rgb),0.04) 40%,
    rgba(var(--accent-rgb),0) 70%);
  border-radius: var(--r-blob);
  animation: blobMorph 22s ease-in-out infinite;
  filter: blur(2px);
}
.psh--blob-lg{
  width: 460px; height: 460px;
  background: radial-gradient(circle at 60% 40%,
    rgba(245,243,238,0.04) 0%,
    rgba(245,243,238,0.02) 40%,
    rgba(245,243,238,0) 70%);
  border-radius: var(--r-blob-2);
  animation: blobMorph2 28s ease-in-out infinite;
  filter: blur(1px);
}
.psh--blob-accent{
  width: 200px; height: 200px;
  background: radial-gradient(circle at 50% 50%,
    rgba(var(--accent-rgb),0.22) 0%,
    rgba(var(--accent-rgb),0.08) 35%,
    rgba(var(--accent-rgb),0) 70%);
  border-radius: var(--r-blob-3);
  animation: blobMorph 18s ease-in-out infinite reverse;
}

@media (prefers-reduced-motion: reduce){
  .psh--blob, .psh--blob-lg, .psh--blob-accent{ animation: none; }
}

/* ==========================================================
   HERO with giant logo centerpiece
   ========================================================== */
.hero--logo{
  min-height: 100vh;
  padding-top: 110px;
  padding-bottom: 64px;
  display:flex;
  flex-direction:column;
  position:relative;
  isolation: isolate;
}
.hero--logo .meta-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:24px; flex-wrap:wrap;
  margin-bottom: 0;
}
.hero-logo-wrap{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding: clamp(20px, 4vw, 60px) 0;
  min-height: 360px;
}
.hero-logo{
  width: clamp(280px, 78vw, 1280px);
  height: auto;
  display:block;
  position: relative;
  z-index: 2;
  /* Drawn-in reveal: clip-path wipes left → right */
  clip-path: inset(0 100% 0 0);
  animation: logo-wipe 1.6s cubic-bezier(.65,0,.2,1) 2.7s forwards;
  filter: drop-shadow(0 0 30px rgba(var(--accent-rgb),0.0));
}
@keyframes logo-wipe{
  0%   { clip-path: inset(0 100% 0 0); filter: drop-shadow(0 0 0px rgba(var(--accent-rgb),0)); }
  60%  { filter: drop-shadow(0 0 30px rgba(var(--accent-rgb),0.25)); }
  100% { clip-path: inset(0 0 0 0); filter: drop-shadow(0 0 14px rgba(var(--accent-rgb),0.08)); }
}
@media (prefers-reduced-motion: reduce){
  .hero-logo{ clip-path: none !important; animation: none !important; }
}
/* echo halo behind logo */
.hero-logo-wrap::before{
  content:"";
  position:absolute;
  width: clamp(360px, 70vw, 920px);
  height: clamp(360px, 70vw, 920px);
  background: radial-gradient(circle at center,
    rgba(var(--accent-rgb),0.18) 0%,
    rgba(var(--accent-rgb),0.06) 25%,
    rgba(var(--accent-rgb),0) 60%);
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  animation: halo-in 1.8s cubic-bezier(.2,.7,.2,1) 3.0s forwards;
  filter: blur(40px);
}
@keyframes halo-in{
  0%   { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}
/* organic blobs behind logo (independent of parallax layer) */
.hero-logo-wrap::after{
  content:"";
  position:absolute;
  width: clamp(420px, 60vw, 780px);
  height: clamp(420px, 60vw, 780px);
  border: 1px solid rgba(245,243,238,0.08);
  border-radius: var(--r-blob);
  animation: blobMorph 24s ease-in-out infinite;
  z-index: 0;
}

.hero-tagline{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  animation: tag-in 1.2s cubic-bezier(.2,.7,.2,1) 3.6s forwards;
}
.hero-tagline .italic{
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: -0.01em;
}
.hero-tagline .accent{ color: var(--accent); }
@keyframes tag-in{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: translateY(0); }
}

.hero--logo .cta{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-top: 36px;
  opacity: 0;
  animation: tag-in 1.2s cubic-bezier(.2,.7,.2,1) 3.95s forwards;
}
.hero--logo .metaStrip{
  margin-top: 64px;
  opacity: 0;
  animation: tag-in 1.2s cubic-bezier(.2,.7,.2,1) 4.2s forwards;
}

/* ==========================================================
   Organic / squishy buttons
   ========================================================== */
.btn{
  border-radius: 999px;
  transition: color .4s ease, border-color .4s ease,
              transform .5s cubic-bezier(.34,1.56,.64,1),
              border-radius .5s cubic-bezier(.34,1.56,.64,1);
}
.btn:hover{
  transform: scale(1.04);
}
.btn:active{ transform: scale(0.97); }
.btn .arrow{ font-family: var(--mono); }

/* ==========================================================
   Soften cards — service & work
   ========================================================== */
.services{ border-top: 0; }
.svc{
  border-radius: 0;
}
.svc::before{
  content:"";
  position:absolute; inset: 12px;
  border: 1px dashed transparent;
  border-radius: var(--r-blob);
  opacity: 0;
  transition: opacity .4s ease, border-color .4s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.svc:hover::before{
  opacity: 0.35;
  border-color: rgba(0,0,0,0.4);
  animation: blobMorph 14s ease-in-out infinite;
}

/* hover-tile (work preview) → blob-shape */
.work-row .hover-tile .tile{
  border-radius: var(--r-blob);
  overflow:hidden;
  animation: blobMorph 18s ease-in-out infinite;
}

/* chips - keep pill but pulse softly on hover */
.skill-block .chip:hover{
  transform: translateY(-2px) scale(1.04);
}

/* ==========================================================
   Wavy SVG section dividers
   ========================================================== */
.wave-divider{
  display:block;
  width:100%;
  height: 60px;
  color: var(--ink);
  opacity: 0.5;
}
.wave-divider svg{ width:100%; height:100%; display:block; }
.wave-divider path{
  stroke: currentColor;
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: wave-draw 2.4s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes wave-draw{ to{ stroke-dashoffset: 0; } }
.wave-divider.accent{ color: var(--accent); opacity: 0.8; }

/* big-quote underline-accent — round it like a brush */
.bigQuote .underline-accent{
  background-size: 100% 10px;
  background-position: 0 95%;
}

/* contact h2 accent — soft rounded brush */
.contact h2 .accent::after{
  border-radius: 6px;
  height: 12px;
  bottom: 2px;
}

/* lift hero-logo above parallax (shapes sit behind everything in hero) */
.hero--logo{ z-index: 2; }

/* responsive hero tweaks */
@media (max-width: 760px){
  .hero-logo-wrap{ min-height: 280px; }
  .hero--logo .meta-row{ font-size: 10px; }
}

/* Service card inline preview — square, slides DOWN from above on hover, static */
.svc{ position: relative; overflow: hidden; }
.svc .svc-content{ position: relative; z-index: 1; }
.svc-preview-inline{
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateY(-101%);
  transition: transform .55s cubic-bezier(.7,0,.2,1);
  pointer-events: none;
  background: var(--bg);
}
.svc:hover .svc-preview-inline{
  transform: translateY(0);
}
.svc-preview-inline .tile{
  width: 100%; height: 100%;
  border-radius: 0;        /* square, not blob */
  animation: none !important;
}
@media (hover: none){ .svc-preview-inline{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .svc-preview-inline{ transition: opacity .25s ease; transform: translateY(0); opacity: 0; }
  .svc:hover .svc-preview-inline{ opacity: 1; }
}

/* ==========================================================
   STUDIO BADGE — rotating circular sticker (bottom-right)
   ========================================================== */
.studio-badge{
  position: fixed;
  right: clamp(18px, 2.8vw, 40px);
  bottom: clamp(18px, 2.8vw, 40px);
  width: clamp(96px, 11vw, 140px);
  height: clamp(96px, 11vw, 140px);
  z-index: 70;
  display: block;
  text-decoration: none;
  color: var(--ink);
  pointer-events: auto;
}
.studio-badge svg{
  width: 100%; height: 100%;
  animation: badge-spin 22s linear infinite;
  will-change: transform;
}
.studio-badge .badge-text{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  fill: var(--ink);
  text-transform: uppercase;
  font-weight: 500;
}
.studio-badge .badge-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--accent);
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.5);
}
.studio-badge::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  pointer-events: none;
}
.studio-badge:hover svg{ animation-duration: 6s; }
.studio-badge:hover .badge-center{ color: var(--ink); text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.9); }
@keyframes badge-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}
@media (max-width: 640px){
  .studio-badge{ width: 84px; height: 84px; right: 14px; bottom: 14px; }
  .studio-badge .badge-text{ font-size: 11px; }
}
@media (prefers-reduced-motion: reduce){
  .studio-badge svg{ animation: none; }
}

/* ==========================================================
   SCRIBBLE — hand-drawn accent stroke
   ========================================================== */
.scribbled{ position: relative; display: inline-block; }
.scribble{
  position: absolute;
  pointer-events: none;
  color: var(--accent);
  opacity: 0;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: scribble-draw 1.4s cubic-bezier(.6,0,.2,1) 4s forwards;
}
/* Scroll-driven scribble — JS sets stroke-dashoffset directly, no autoplay */
.scribble--scroll{
  animation: none !important;
  transition: opacity .6s ease;
}
.scribble--scroll path{
  transition: stroke-dashoffset .55s cubic-bezier(.2,.7,.2,1);
}
.scribble--circle{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 118%;
  height: 150%;
  z-index: -1;
}
.scribble--underline{
  left: 0; right: 0; bottom: -10px;
  width: 100%;
  height: 14px;
}
@keyframes scribble-draw{
  0%   { opacity: 0; stroke-dashoffset: 800; }
  10%  { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce){
  .scribble{ animation: none; opacity: 1; stroke-dashoffset: 0; }
}

/* ==========================================================
   REGISTRATION MARKS — small ┼ at section corners (print cue)
   ========================================================== */
.section::before,
.section::after{
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--mute), var(--mute)) center / 100% 1px no-repeat,
    linear-gradient(var(--mute), var(--mute)) center / 1px 100% no-repeat;
  opacity: 0.4;
  pointer-events: none;
}
.section::before{ top: 14px; left: 14px; }
.section::after{ top: 14px; right: 14px; }
.invert .section::before,
.invert .section::after,
#work .section::before,
#work .section::after,
#skills .section::before,
#skills .section::after,
#contact .section::before,
#contact .section::after{
  background:
    linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat;
  opacity: 0.35;
}
@media (max-width: 640px){
  .section::before, .section::after{ display: none; }
}
.tool-orbit{
  position: relative;
  margin: clamp(40px, 6vw, 100px) auto 0;
  width: min(560px, 92vw);
  aspect-ratio: 1 / 1;
  isolation: isolate;
}
.orbit-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0 4px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(20px, 4vw, 36px);
}

.orbit-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.orbit-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: orbit-spin 38s linear infinite;
  will-change: transform;
}
.orbit-ring__line{
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid var(--line-2);
}
.orbit-ring__dash{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  opacity: 0.7;
}

.orbit-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
.orbit-center__big{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 4.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink);
  max-width: 11ch;
  text-wrap: balance;
}
.orbit-center__big .italic{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.orbit-center__big .accent{ color: var(--accent); }

.tool-chip{
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  /* place each chip on the ring at its angle */
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * (min(560px, 92vw) / 2 - 32px)));
}
.tool-chip__inner{
  /* counter-rotate ring + own angle so chip sits upright */
  transform: rotate(calc(-1 * var(--angle))) rotate(0deg);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--display);
  color: var(--ink);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
  cursor: default;
  position: relative;
  animation: orbit-counter 38s linear infinite;
}
.tool-chip__mono{
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tool-chip__name{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  position: absolute;
  top: calc(100% + 8px);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.tool-chip:hover .tool-chip__inner{
  background: var(--accent);
  color: #050706;
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.45);
  transform: rotate(calc(-1 * var(--angle))) scale(1.18);
}
.tool-chip:hover .tool-chip__name{
  opacity: 1;
  transform: translateY(0);
  color: var(--ink);
}

@keyframes orbit-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}
@keyframes orbit-counter{
  from{ transform: rotate(calc(-1 * var(--angle))) rotate(0deg); }
  to  { transform: rotate(calc(-1 * var(--angle))) rotate(-360deg); }
}

@media (max-width: 760px){
  .tool-orbit{ width: min(380px, 88vw); }
  .tool-chip__inner{ width: 52px; height: 52px; }
  .tool-chip__mono{ font-size: 18px; }
  .tool-chip{
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * (min(380px, 88vw) / 2 - 26px)));
  }
  .orbit-center{ font-size: 9px; }
}

@media (prefers-reduced-motion: reduce){
  .orbit-ring, .orbit-center, .tool-chip__inner{ animation: none !important; }
}
.nav-right{
  display: flex;
  align-items: center;
  gap: 22px;
}
.lang-toggle{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.85;
}
.lang-toggle .lang{
  background: none;
  border: 0;
  padding: 2px 6px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  opacity: 0.55;
  transition: opacity .25s ease, color .25s ease;
}
.lang-toggle .lang:hover{ opacity: 1; }
.lang-toggle .lang.is-active{
  opacity: 1;
  color: var(--accent);
}
.lang-toggle .lang-sep{
  opacity: 0.35;
  font-size: 10px;
  padding: 0 2px;
}
@media (max-width: 820px){
  .nav-right .status{ display: none; }
}
:root{
  /* Energy 100 baseline (see tweaks.jsx for the live formula) */
  --energy: 1;
  --blob-amount: 1;
  --blob-duration: 12s;
  --halo-strength: 1.3;
  --motion-scale: 1.4;
  --cursor-glow-opa: 1;
  --marquee-duration: 28s;
  --accent-rgb: 200, 247, 81;
}

/* Apply energy to blob morphs site-wide */
.psh--blob,
.psh--blob-accent,
.psh--blob-lg,
.work-row .hover-tile .tile,
.svc-preview .tile,
.hero-logo-wrap::after{
  animation-duration: var(--blob-duration) !important;
  animation-play-state: running;
}

/* Halo & glow strength scales with Energy */
.cursor-glow{ opacity: var(--cursor-glow-opa); }
.hero-logo-wrap::before{
  filter: blur(40px);
  opacity: calc(var(--halo-strength) * 1);
}
.psh--blob-accent{
  box-shadow: 0 0 60px rgba(var(--accent-rgb), calc(0.18 * var(--halo-strength)));
}

/* Marquee speed scales with Energy */
.marquee .track{ animation-duration: var(--marquee-duration) !important; }

/* Tone down ALL motion when energy is low (stillness) */
:root[style*="--energy: 0"] .scene-stage,
:root[style*="--energy: 0"] .psh{
  filter: saturate(0.85);
}

/* small "drawn" accent strokes you can sprinkle */
.brush-stroke{
  display:inline-block;
  position: relative;
}
.brush-stroke::after{
  content:""; position:absolute;
  left: -4px; right: -4px; bottom: 0;
  height: 12px;
  background: var(--accent);
  border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
  opacity: 0.25;
  z-index: -1;
  animation: blobMorph 16s ease-in-out infinite;
}

/* ==========================================================
   3D LOGO SCENE  (sticky, scroll-driven)
   ========================================================== */
.scene-3d{
  position: relative;
  height: 320vh;              /* drives scroll length */
  z-index: 2;
}
.scene-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  padding: 110px var(--pad-x) 80px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(var(--accent-rgb),0.10) 0%, rgba(var(--accent-rgb),0) 55%),
    var(--bg);
}

.scene-meta{
  display:grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items:center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform:uppercase;
  color: var(--mute); font-weight: 500;
}
.scene-meta-line{
  display:block; height:1px;
  background: var(--line);
  position:relative; overflow:hidden;
}
.scene-meta-line > span{
  position:absolute; inset:0;
  background: var(--accent);
  transform-origin: left; transform: scaleX(.18);
  transition: transform .6s ease;
}

.scene-perspective{
  perspective: 1400px;
  perspective-origin: 50% 50%;
  display:flex; align-items:center; justify-content:center;
  width: 100%; height: 100%;
  position: relative;
}
.scene-stage{
  position: relative;
  width: clamp(280px, 56vw, 720px);
  height: clamp(280px, 56vw, 720px);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.scene-layer{
  position:absolute;
  top: 50%; left: 50%;
  width: 100%; height: auto;
  transform: translate(-50%,-50%);
  margin-top: -8%;
  pointer-events:none;
  display:block;
  will-change: transform, opacity;
}
.scene-layer img{ width:100%; height:auto; }
/* the actual layers — using filters to differentiate them */
.scene-layer--main{
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.6));
}
.scene-layer--accent{
  filter:
    brightness(0) saturate(100%)
    invert(35%) sepia(82%) saturate(2380%) hue-rotate(348deg) brightness(95%) contrast(95%)
    drop-shadow(0 0 24px rgba(var(--accent-rgb),0.55));
  mix-blend-mode: screen;
}
.scene-layer--ghost{
  opacity: 0.5;
  filter: blur(2px);
}
.scene-layer--ghost2{
  opacity: 0.3;
  filter: blur(5px);
}
.scene-layer--shadow{
  opacity: 0.2;
  filter: blur(14px) brightness(0.5);
}

/* perimeter ring (sits in 3D space) */
.scene-ring{
  position:absolute;
  top:50%; left:50%;
  width: 80%; height: 80%;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotateX(78deg);
  pointer-events:none;
}
.scene-ring::after{
  content:""; position:absolute; inset:-1px;
  border:1px dashed rgba(var(--accent-rgb),0.35);
  border-radius:50%;
  transform: scale(1.18);
}

/* labels orbit around the stage in 3D */
.scene-label{
  position:absolute;
  top:50%; left:50%;
  transform-style: preserve-3d;
  transform-origin: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  margin-left: -60px;
  pointer-events:none;
  backface-visibility: hidden;
  background: rgba(0,0,0,0.6);
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}

.scene-caption{
  display:flex; align-items:flex-end; justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.scene-caption-mono{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform:uppercase;
  color: var(--mute); font-weight: 500;
}
.scene-caption-big{
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: right;
  color: var(--ink);
}
.scene-caption-big .italic{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.scene-caption-big .accent{ color: var(--accent); }

@media (max-width: 760px){
  .scene-3d{ height: 240vh; }
  .scene-stage{ width: 78vw; height: 78vw; }
  .scene-caption{ flex-direction: column; align-items: flex-start; }
  .scene-caption-big{ text-align: left; }
  .scene-label{ font-size: 10px; }
}
@media (prefers-reduced-motion: reduce){
  .scene-3d{ height: 100vh; }
  .scene-stage{ transition: none; }
}

/* ==========================================================
   Behance CTA — full-bleed accent band, single link
   ========================================================== */
.bhv{
  background: var(--accent);
  color: #050706;
  overflow: hidden;
}
.bhv-link{
  display: block;
  text-decoration: none;
  color: inherit;
  padding: clamp(64px, 9vw, 132px) var(--pad-x);
  position: relative;
}
.bhv-top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: clamp(20px, 3vw, 40px);
  border-bottom: 1px solid rgba(5,7,6,0.22);
}
.bhv-eyebrow{
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(5,7,6,0.7);
}
.bhv-big{
  display: flex;
  align-items: flex-start;
  gap: 0.12em;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.9;
  font-size: clamp(78px, 18vw, 280px);
  margin: clamp(28px, 4vw, 56px) 0 clamp(20px, 2.5vw, 36px);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.bhv-ar{
  font-size: 0.34em;
  font-family: var(--mono);
  font-weight: 500;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.bhv-url{
  display: inline-block;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  font-weight: 500;
  color: rgba(5,7,6,0.78);
  position: relative;
}
.bhv-url::after{
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: #050706;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.bhv-link:hover .bhv-big{ transform: translateX(clamp(6px, 1.2vw, 20px)); }
.bhv-link:hover .bhv-ar{ transform: translate(8px, -8px); }
.bhv-link:hover .bhv-url::after{ transform: scaleX(1); }
@media (max-width: 640px){
  .bhv-big{ font-size: clamp(60px, 22vw, 120px); }
}

/* ==========================================================
   Green section modifier — flips a section to the acid band
   (redefines color tokens so descendants invert automatically)
   ========================================================== */
.sec-green{
  background: #C8F751;
  color: #050706;
  --ink:      #050706;
  --ink-2:    #11150e;
  --mute:     rgba(5,7,6,0.6);
  --line:     rgba(5,7,6,0.16);
  --line-2:   rgba(5,7,6,0.26);
  --line-3:   rgba(5,7,6,0.38);
  --accent:   #050706;
  --accent-2: #20270f;
}