/* ============================================================
   V2 — SPOTLIGHT
   Warm jet black, champagne, Bodoni Moda. Original palette.
   Section treatments reworked: panels, arches and rails
   replace the flat stacked bands.
   Self-contained — home.css is dequeued for this template.
   ============================================================ */
:root{
  --jet:#141110; --jet2:#1E1917; --jet3:#272020;
  --champ:#E7C57C; --champ-hi:#F2D79A; --rose:#C98B6B;
  --cream:#F3EDE4; --mute:#9C9187; --line:rgba(243,237,228,.10);
  --display:"Anton", Impact, sans-serif;
  --body:"Space Grotesk", Inter, system-ui, sans-serif;
  --wrap:1240px; --gut:26px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--jet);color:var(--cream);
  font-family:var(--body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* Ambient warmth — keeps the black from reading cold */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 42% at 74% 6%,rgba(231,197,124,.16),transparent 62%),
             radial-gradient(46% 38% at 6% 40%,rgba(201,139,107,.11),transparent 66%)}
body > *{position:relative;z-index:1}

/* ---------- Header ---------- */
.sp-head{position:sticky;top:0;z-index:60;background:rgba(20,17,16,.72);
  backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .3s}
.sp-head.stuck{border-bottom-color:var(--line)}
.sp-head__in{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;padding:16px var(--gut);gap:1rem}
.sp-brand{font-family:var(--display);font-size:1.35rem;letter-spacing:.02em}
.sp-brand i,.sp-brand span{font-style:italic;color:var(--champ)}
.sp-nav{display:none;gap:1.8rem;font-size:.74rem;letter-spacing:.1em;color:var(--mute)}
.sp-nav a{transition:color .25s}
.sp-nav a:hover{color:var(--champ)}
.sp-right{display:flex;align-items:center;gap:.6rem}
.pill{border:1px solid rgba(231,197,124,.45);color:var(--cream);padding:10px 22px;
  border-radius:999px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;transition:.3s}
.pill:hover{background:var(--champ);color:var(--jet);border-color:var(--champ)}
.sp-burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;padding:0}
.sp-burger span{display:block;width:22px;height:1px;background:var(--cream);transition:.3s}
.sp-burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.sp-burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.sp-panel{position:fixed;inset:0;z-index:70;background:rgba(20,17,16,.97);
  backdrop-filter:blur(22px);display:flex;flex-direction:column;justify-content:center;
  gap:.2rem;padding:5rem var(--gut);opacity:0;transition:opacity .3s}
.sp-panel[hidden]{display:none}
.sp-panel.open{opacity:1}
.sp-panel a{font-family:var(--display);font-size:clamp(1.8rem,8vw,2.8rem);
  padding:.35rem 0;border-bottom:1px solid var(--line);transition:.25s}
.sp-panel a:hover{color:var(--champ);padding-left:.5rem}
body.locked{overflow:hidden}

/* ---------- Hero ---------- */
.sp-hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem)}
.sp-heroGrid{display:grid;gap:2.5rem;align-items:center}
.badge,.sp-hero .eyeb{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;
  border-radius:999px;border:1px solid rgba(231,197,124,.35);background:rgba(231,197,124,.08);
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--champ);
  margin-bottom:1.4rem}
.sp-hero h1{font-size:clamp(3rem,8.5vw,6.2rem);line-height:.95}
.sp-hero h1 em{font-style:italic;color:var(--champ)}
.sub{font-size:clamp(.95rem,2vw,1.1rem);line-height:1.7;color:#CFC5B9;
  max-width:38ch;margin:1.4rem 0 2rem}
.sp-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{background:var(--champ);color:var(--jet);padding:15px 30px;border-radius:999px;
  font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;transition:.3s}
.btn:hover{background:var(--cream)}
.btn--ghost{background:none;border:1px solid rgba(243,237,228,.28);color:var(--cream)}
.btn--ghost:hover{border-color:var(--champ);color:var(--champ);background:none}
.sp-portraitWrap{position:relative}
.sp-portraitWrap::before{content:"";position:absolute;inset:-14% -10% auto auto;
  width:min(34vw,380px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(231,197,124,.26),transparent 66%);filter:blur(12px)}
.sp-portrait{position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:220px 220px 20px 20px;background:var(--jet2);
  box-shadow:0 40px 90px rgba(0,0,0,.5)}
.sp-portrait img{width:100%;height:100%;object-fit:cover;object-position:66% 24%;
  filter:grayscale(70%) contrast(1.06) brightness(.92)}
.sp-portrait::after{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(231,197,124,.18),transparent 44%)}

/* ---------- Marquee ---------- */
.sp-marq{border-block:1px solid var(--line);background:rgba(30,25,23,.6);
  overflow:hidden;padding:19px 0}
.sp-marqIn{display:flex;width:max-content;animation:spm 38s linear infinite}
.sp-marq:hover .sp-marqIn{animation-play-state:paused}
.sp-marqSet{display:flex;align-items:center;gap:1.7rem;padding-right:1.7rem;
  font-family:var(--display);font-size:1.2rem;color:#B9AEA2;white-space:nowrap;flex:0 0 auto}
.sp-marqSet i{width:5px;height:5px;border-radius:50%;background:var(--rose);
  display:block;flex:0 0 auto}
@keyframes spm{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS — reworked
   Instead of flat stacked bands, alternate sections sit inside
   rounded panels with a champagne rail down the left edge, and
   headings run as a two-column split with a counter.
   ============================================================ */
.sp-sec{padding:clamp(3.5rem,8vw,6rem) 0;counter-increment:sec}
.sp-sec--raised{background:none}
.sp-sec--raised > .wrap{
  background:linear-gradient(158deg,rgba(243,237,228,.045),rgba(243,237,228,.012));
  border:1px solid var(--line);border-radius:26px;
  padding:clamp(2rem,4.5vw,3.5rem);
  position:relative;overflow:hidden}
/* static left rail removed \u2014 superseded by the travelling border */
.sp-sec--raised > .wrap::after{content:"";position:absolute;right:-14%;top:-30%;
  width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(231,197,124,.09),transparent 66%);pointer-events:none}

.eyeb{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champ);
  margin:0 0 .9rem;display:flex;align-items:center;gap:.85rem}
.eyeb::before{content:counter(sec,decimal-leading-zero);font-family:var(--display);
  font-size:.95rem;color:var(--rose);letter-spacing:0}
.eyeb::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(231,197,124,.5),transparent)}
.sp-sec h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.1;margin:0 0 1.4rem;max-width:18ch}
.sp-sec h2 em{font-style:italic;color:var(--champ)}

/* About */
.sp-about{display:grid;gap:2.5rem}
.sp-about p{color:#CFC5B9;max-width:60ch;margin:0 0 1.1rem}
.sp-fact{display:flex;justify-content:space-between;gap:1rem;padding:14px 0;
  border-bottom:1px solid var(--line);font-size:.85rem}
.sp-fact span:first-child,.sp-fact dt{font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.sp-fact b{font-family:var(--display);font-size:1.2rem;color:var(--champ)}

/* Work — glass tiles */
.grid4{display:grid;gap:1.1rem}
.glass{border:1px solid var(--line);border-radius:20px;padding:2rem 1.7rem;
  background:linear-gradient(155deg,rgba(243,237,228,.05),rgba(243,237,228,.015));
  backdrop-filter:blur(8px);transition:.4s;display:block}
.glass:hover{border-color:rgba(231,197,124,.4);transform:translateY(-5px);
  background:linear-gradient(155deg,rgba(231,197,124,.10),rgba(243,237,228,.02))}
.num{font-family:var(--display);font-size:2.3rem;line-height:1;color:var(--champ);
  display:block;margin-bottom:.7rem}
.glass h3{font-size:1.4rem;margin:0 0 .55rem}
.glass p{font-size:.88rem;line-height:1.7;color:var(--mute);margin:0}

/* Posts — arch-topped, echoing the portrait */
.sp-posts{display:grid;gap:1.1rem}
.sp-post{display:block;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;background:rgba(243,237,228,.02);transition:.4s}
.sp-post:hover{border-color:rgba(231,197,124,.38);transform:translateY(-5px)}
.sp-post__img{aspect-ratio:16/10;overflow:hidden;background:var(--jet2)}
.sp-post__img img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(60%) brightness(.9);transition:.6s}
.sp-post:hover .sp-post__img img{filter:grayscale(0);transform:scale(1.05)}
.sp-post__body{padding:1.4rem 1.4rem 1.6rem}
.sp-post time{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--champ)}
.sp-post h3{font-size:1.25rem;line-height:1.3;margin:.5rem 0 0}

/* Gallery — arched tiles */
.sp-gal{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.sp-gal a{aspect-ratio:3/4;overflow:hidden;background:var(--jet2);
  border-radius:160px 160px 16px 16px;border:1px solid var(--line)}
.sp-gal img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(70%) brightness(.9);transition:.6s}
.sp-gal a:hover img{filter:grayscale(0);transform:scale(1.05)}

/* Press — rail rows */
.sp-press{display:grid;gap:.5rem}
.sp-row{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.1rem;
  padding:1.15rem 1.2rem;border:1px solid var(--line);border-radius:14px;
  background:rgba(243,237,228,.015);transition:.3s;position:relative;overflow:hidden}
.sp-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--champ);transform:scaleY(0);transform-origin:top;transition:transform .4s}
.sp-row:hover{border-color:rgba(231,197,124,.35);background:rgba(231,197,124,.05)}
.sp-row:hover::before{transform:scaleY(1)}
.sp-row__yr{font-family:var(--display);font-size:1.2rem;color:var(--champ)}
.sp-row__pub{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-bottom:4px;display:block}
.sp-row__h{font-family:var(--display);font-size:1.1rem;line-height:1.35;display:block}
.sp-row:hover .sp-row__h{color:var(--champ)}
.sp-row__k{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* Contact */
.sp-contact{display:grid;gap:2.5rem}
.fld{margin-bottom:1.2rem}
.fld label{display:block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-bottom:9px}
.fld input,.fld textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--cream);font-family:var(--body);
  font-size:.95rem;padding:10px 0;transition:.3s}
.fld input:focus,.fld textarea:focus{outline:none;border-bottom-color:var(--champ)}
.fld textarea{resize:vertical;min-height:110px}
.sp-aside{border:1px solid var(--line);border-radius:20px;padding:1.9rem;align-self:start;
  background:linear-gradient(155deg,rgba(231,197,124,.07),rgba(243,237,228,.015))}
.sp-aside .mail,.sp-aside a.mail{font-family:var(--display);font-size:1.25rem;color:var(--champ)}
.sp-socials,.foot-socials,.socials{display:flex;gap:.5rem;margin-top:1.5rem;flex-wrap:wrap}
.sp-socials a,.foot-socials a,.socials a{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:50%;color:var(--mute);transition:.3s}
.sp-socials svg,.foot-socials svg,.socials svg{width:17px;height:17px;display:block;flex:0 0 auto}
/* Safety net: an inline SVG with no CSS match falls back to 300x150.
   Cap anything inside a social row regardless of wrapper class. */
[class*="social"] svg{width:17px;height:17px;max-width:17px;max-height:17px}
.sp-socials a:hover,.foot-socials a:hover,.socials a:hover{color:var(--champ);
  border-color:rgba(231,197,124,.45);transform:translateY(-2px)}

/* Footer */
.sp-foot{border-top:1px solid var(--line);padding:2.2rem 0;background:#100D0C}
.sp-foot__in{display:flex;flex-direction:column;gap:.9rem;align-items:center;
  text-align:center;font-size:.7rem;letter-spacing:.1em;color:var(--mute)}

/* Reveal */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

@media(min-width:768px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .sp-posts{grid-template-columns:repeat(3,1fr)}
  .sp-gal{grid-template-columns:repeat(4,1fr)}
  .sp-about{grid-template-columns:1.5fr .9fr;gap:3.5rem}
  .sp-contact{grid-template-columns:1.1fr .9fr;gap:3rem}
  .sp-row{grid-template-columns:auto 1fr auto;align-items:baseline}
  .sp-foot__in{flex-direction:row;justify-content:space-between;text-align:left}
  .sp-heroGrid{grid-template-columns:1.1fr .9fr;gap:4rem}
}
@media(min-width:1024px){
  .sp-nav{display:flex}
  .sp-burger{display:none}
  .sp-panel{display:none!important}
  .grid4{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:767px){
  :root{--gut:18px}
  .sp-portrait{border-radius:150px 150px 16px 16px}
  .sp-gal a{border-radius:110px 110px 12px 12px}
  .btn,.btn--ghost{width:100%;text-align:center}
  .sp-sec--raised > .wrap{border-radius:18px;padding:1.6rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   TYPE ADAPTATION — Anton + Space Grotesk

   Anton ships one weight, has no italic, and is drawn for
   uppercase at large sizes. The rules below stop the browser
   synthesising an italic, set display type in caps where it
   belongs, and move running text off Anton onto Space Grotesk
   so headlines stay readable rather than shouting.
   ============================================================ */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:-.008em;
  line-height:.94;
}

/* No italic exists — carry the emphasis in colour instead */
h1 em,h2 em,h3 em,
.sp-hero h1 em,.sp-sec h2 em{
  font-style:normal;
  color:var(--champ);
}

.sp-brand{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:1.02rem;
}
.sp-brand i,.sp-brand span{font-style:normal;color:var(--champ)}

.sp-hero h1{
  font-size:clamp(3.1rem,10vw,7.6rem);
  line-height:.86;
  letter-spacing:-.014em;
}
.sp-sec h2{
  font-size:clamp(2.1rem,5vw,3.5rem);
  line-height:.96;
  letter-spacing:-.01em;
  max-width:15ch;
}

/* Service tiles read well in caps */
.glass h3{font-size:1.5rem;line-height:1;letter-spacing:.002em}
.num{font-family:var(--display);font-size:2.1rem;letter-spacing:.01em}

/* Running text belongs on the sans, not on Anton */
.sp-row__h,
.sp-post h3,
.sp-aside .mail,
.sp-aside a.mail,
.sp-marqSet{
  font-family:var(--body);
  text-transform:none;
  letter-spacing:-.005em;
}
.sp-row__h{font-size:1.02rem;line-height:1.4;font-weight:500}
.sp-post h3{font-size:1.14rem;line-height:1.32;font-weight:500}
.sp-aside .mail,.sp-aside a.mail{font-size:1.05rem;font-weight:600;color:var(--champ)}
.sp-marqSet{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* Numerals stay on Anton — that is where it earns its keep */
.sp-row__yr{font-family:var(--display);font-size:1.28rem;letter-spacing:.01em}
.sp-fact b{font-family:var(--display);font-size:1.3rem;letter-spacing:.01em}
.eyeb::before{font-family:var(--display);font-size:.9rem;letter-spacing:.02em}

/* Mobile panel links are caps now, so they need less size */
.sp-panel a{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(1.6rem,7vw,2.4rem);
  letter-spacing:-.005em;
}

/* Space Grotesk sits slightly wider than Inter at the same size */
body{letter-spacing:-.004em}
.sub{max-width:36ch}

@media (max-width:767px){
  .sp-hero h1{font-size:clamp(2.8rem,13vw,4rem);line-height:.9}
  .sp-sec h2{max-width:12ch}
}

/* ============================================================
   AMBIENT MOTION

   Two layers, both transform/opacity only so they stay on the
   compositor and never trigger a repaint:

     1. drifting light blooms   — the existing champagne and
        rose gradients, slowly moving
     2. ghost wordmark          — his name in Anton at 2.5%,
        crossing behind the page

   Desktop only. Phones get the static version: continuous
   animation is a battery cost and most of this audience is
   arriving from a Google search on a handset.

   To remove: delete this block. Nothing above depends on it.
   ============================================================ */

@media (min-width: 900px) and (prefers-reduced-motion: no-preference){

  /* --- 1. Drifting blooms ---------------------------------- */
  /* The static gradients move to their own layer so they can be
     transformed. body::before keeps the base wash underneath. */
  body::after{
    content:"";
    position:fixed;
    inset:-30%;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(38% 32% at 30% 28%, rgba(231,197,124,.16), transparent 64%),
      radial-gradient(32% 28% at 72% 62%, rgba(201,139,107,.13), transparent 66%);
    animation:nzDrift 54s ease-in-out infinite alternate;
    will-change:transform;
  }

  @keyframes nzDrift{
    0%   { transform:translate3d(0,0,0) scale(1); }
    33%  { transform:translate3d(4%,-3%,0) scale(1.08); }
    66%  { transform:translate3d(-3%,4%,0) scale(1.04); }
    100% { transform:translate3d(2%,2%,0) scale(1.1); }
  }

  /* --- 2. Ghost wordmark ----------------------------------- */
  .nz-ghost{
    position:fixed;
    left:0;
    top:38%;
    z-index:0;
    pointer-events:none;
    user-select:none;
    width:100%;
    overflow:hidden;
    line-height:1;
  }
  .nz-ghost span{
    display:inline-block;
    white-space:nowrap;
    font-family:var(--display);
    font-size:clamp(9rem,17vw,15rem);
    text-transform:uppercase;
    letter-spacing:-.02em;
    color:rgba(243,237,228,.025);
    animation:nzGhost 90s linear infinite;
    will-change:transform;
  }

  @keyframes nzGhost{
    from { transform:translate3d(0,0,0); }
    to   { transform:translate3d(-50%,0,0); }
  }

  /* Keep the wordmark out from behind the reading column:
     the section panels sit above it and are opaque enough
     to mask it where text lives. */
  .sp-sec--raised > .wrap{ background-color:rgba(20,17,16,.72); }
  .sp-hero,.sp-sec{ position:relative; z-index:1; }
}

/* Phones and reduced-motion: layers exist but hold still. */
@media (max-width: 899px), (prefers-reduced-motion: reduce){
  body::after{ animation:none; }
}

/* ============================================================
   HERO PORTRAIT — reframed

   The arch was forcing a 2:3 source into a 4:5 box, so it
   cropped into the top of the head and pinched the sides.
   New treatment:
     • frame matches the source ratio, so nothing is cropped
     • arch replaced by a squared frame with a champagne
       outline offset behind it
     • image bleeds past the container on wide screens so it
       reads as photography, not a placed thumbnail
     • vignette bottom-left so the type side stays dominant
   ============================================================ */

.sp-portraitWrap{
  position:relative;
  padding:14px 14px 0 0;          /* room for the offset outline */
}

/* Offset outline sits behind, up and right */
.sp-portraitWrap::after{
  content:"";
  position:absolute;
  inset:0 0 34px 34px;
  border:1px solid rgba(231,197,124,.45);
  pointer-events:none;
  z-index:0;
}

/* Bloom stays, pulled tighter behind the head */
.sp-portraitWrap::before{
  inset:-8% -6% auto auto;
  width:min(28vw,320px);
}

.sp-portrait{
  position:relative;
  z-index:1;
  aspect-ratio:2 / 3;              /* matches the uploaded files */
  border-radius:2px;               /* squared off — no arch */
  overflow:hidden;
  background:var(--jet2);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}

.sp-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 18%;         /* head sits high in frame */
  filter:grayscale(45%) contrast(1.05) brightness(.95);
  transition:filter .9s ease, transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.sp-portrait:hover img{
  filter:grayscale(0) contrast(1.02) brightness(1);
  transform:scale(1.02);
}

/* Warm wash top-right, shadow bottom-left: keeps the headline
   side of the composition heavier than the photo side. */
.sp-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(215deg, rgba(231,197,124,.14), transparent 40%),
    linear-gradient(20deg, rgba(20,17,16,.55), transparent 46%);
}

/* Caption rule along the bottom edge of the frame */
.sp-portrait::before{
  content:"";
  position:absolute;
  left:0;
  right:38%;
  bottom:0;
  height:2px;
  background:var(--champ);
  z-index:2;
}

@media (min-width:1024px){
  /* Let the photograph run past the container toward the edge */
  .sp-portraitWrap{ margin-right:calc(-1 * var(--gut)); }
  .sp-portrait{ aspect-ratio:3 / 4; }
}

@media (min-width:1400px){
  .sp-portraitWrap{ margin-right:-6vw; }
}

@media (max-width:767px){
  .sp-portraitWrap{ padding:10px 10px 0 0; margin-right:0; }
  .sp-portraitWrap::after{ inset:0 0 24px 24px; }
  .sp-portrait{ aspect-ratio:4 / 5; border-radius:2px; }
  .sp-portrait img{ object-position:50% 14%; }
}

/* Gallery follows the portrait: squared, not arched. */
.sp-gal a{border-radius:2px}
@media(max-width:767px){.sp-gal a{border-radius:2px}}

/* ============================================================
   1. GALLERY — drag / snap slider
   Native scroll-snap rather than a library: no JS needed for
   the motion itself, works with touch, trackpad and keyboard,
   and costs nothing in payload. The buttons and progress rail
   are the only scripted parts.
   ============================================================ */
.sp-galWrap{position:relative;margin-top:.5rem}

.sp-gal{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:6px;
  /* let slides run to the edge of the viewport, not the container */
  margin-right:calc(-1 * var(--gut));
  padding-right:var(--gut);
}
.sp-gal::-webkit-scrollbar{display:none}

.sp-slide{
  position:relative;
  flex:0 0 auto;
  width:clamp(210px, 30vw, 320px);
  aspect-ratio:2 / 3;
  margin:0;
  overflow:hidden;
  border-radius:2px;
  background:var(--jet2);
  scroll-snap-align:start;
  border:1px solid var(--line);
}
.sp-slide img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(60%) contrast(1.04) brightness(.93);
  transition:filter .8s ease, transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.sp-slide:hover img{filter:grayscale(0) brightness(1);transform:scale(1.04)}
.sp-slide::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(20,17,16,.72));
}
.sp-slide figcaption{
  position:absolute;left:12px;bottom:10px;z-index:2;
  font-family:var(--display);font-size:.95rem;letter-spacing:.04em;
  color:var(--champ);opacity:.85;
}

/* Controls */
.sp-galNav{
  display:flex;align-items:center;gap:1rem;
  margin-top:1.25rem;
}
.sp-galBtn{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:none;border:1px solid var(--line);
  color:var(--mute);cursor:pointer;
  transition:color .3s ease,border-color .3s ease,background .3s ease;
}
.sp-galBtn svg{width:18px;height:18px}
.sp-galBtn:hover{color:var(--champ);border-color:rgba(231,197,124,.45)}
.sp-galBtn[disabled]{opacity:.3;cursor:default}
.sp-galBtn[disabled]:hover{color:var(--mute);border-color:var(--line)}

.sp-galRail{
  flex:1 1 auto;height:1px;background:var(--line);position:relative;overflow:hidden;
}
.sp-galRail span{
  position:absolute;left:0;top:0;height:100%;width:20%;
  background:var(--champ);
  transition:transform .25s ease, width .25s ease;
}

@media (max-width:767px){
  .sp-slide{width:74vw}
  .sp-galNav{gap:.75rem}
}

/* ============================================================
   2. HERO NAME — the two lines were colliding
   Anton has deep descenders and a tall cap height, so .86
   line-height had "Nadim" and "Zidan" touching.
   ============================================================ */
.sp-hero h1{
  line-height:1.02;
  letter-spacing:-.012em;
}
.sp-hero h1 em,
.sp-hero h1 span{
  display:block;
  margin-top:.06em;
}
@media (max-width:767px){
  .sp-hero h1{line-height:1.04}
}

/* ============================================================
   3. HERO PORTRAIT — pull the colour down
   ============================================================ */
.sp-portrait img{
  filter:grayscale(72%) contrast(1.06) brightness(.9) sepia(.10);
}
.sp-portrait:hover img{
  filter:grayscale(52%) contrast(1.04) brightness(.95) sepia(.06);
}
/* Slightly warmer wash so the desaturation reads as a grade,
   not as a black-and-white photo dropped on a colour page. */
.sp-portrait::after{
  background:
    linear-gradient(215deg, rgba(231,197,124,.17), transparent 42%),
    linear-gradient(20deg, rgba(20,17,16,.58), transparent 48%);
}

/* Social icons: fixed square so the 50% radius stays a circle. */
[class*="social"]{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
[class*="social"] a{flex:0 0 44px;width:44px;height:44px;min-width:44px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%}

/* ============================================================
   TITLE LINE
   The template outputs .sp-sub but only .sub was ever styled,
   so the client's exact title line rendered with no size,
   colour or measure. This is the line she flagged.
   ============================================================ */
.sub,.sp-sub{
  font-family:var(--body);
  font-size:clamp(1rem,2.1vw,1.22rem);
  line-height:1.65;
  font-weight:400;
  color:#CFC5B9;
  max-width:34ch;
  margin:1.5rem 0 2rem;
  letter-spacing:-.004em;
}
/* Lift the role itself out of the sentence around it. */
.sp-sub strong,.sub strong{color:var(--cream);font-weight:600}
@media (max-width:767px){ .sub,.sp-sub{max-width:100%;margin:1.2rem 0 1.6rem} }

/* ============================================================
   LIGHTBOX
   Built from the slides already on the page; no markup needed
   in the template, so nothing server-side can break.
   ============================================================ */
.nz-lb{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,8,8,.94);
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s;
}
.nz-lb.open{opacity:1;visibility:visible}

.nz-lb__stage{
  position:relative;
  width:min(92vw,1100px);
  height:min(84vh,900px);
  display:flex;align-items:center;justify-content:center;
}
.nz-lb__img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  opacity:0;transform:scale(.97);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
}
.nz-lb__img.in{opacity:1;transform:none}

.nz-lb__close{
  position:absolute;top:18px;right:18px;z-index:3;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(243,237,228,.06);
  border:1px solid rgba(243,237,228,.18);
  color:var(--cream);cursor:pointer;
  transition:.3s;
}
.nz-lb__close:hover{background:var(--champ);color:var(--jet);border-color:var(--champ);transform:rotate(90deg)}
.nz-lb__close svg{width:18px;height:18px}

.nz-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(243,237,228,.05);
  border:1px solid rgba(243,237,228,.16);
  color:var(--cream);cursor:pointer;transition:.3s;
}
.nz-lb__nav:hover{background:var(--champ);color:var(--jet);border-color:var(--champ)}
.nz-lb__nav svg{width:20px;height:20px}
.nz-lb__nav--prev{left:max(12px, calc(50vw - 640px))}
.nz-lb__nav--next{right:max(12px, calc(50vw - 640px))}

.nz-lb__count{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--display);font-size:.95rem;letter-spacing:.12em;
  color:var(--champ);
}
.nz-lb__count b{color:var(--cream);font-weight:400}

.nz-lb__hint{
  position:absolute;bottom:22px;right:24px;z-index:3;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,237,228,.32);
}

body.nz-lb-open{overflow:hidden}

/* The slides now announce themselves as openable */
.sp-slide{cursor:zoom-in}
.sp-slide::before{
  content:"";position:absolute;z-index:3;right:10px;top:10px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(20,17,16,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(231,197,124,.35);
  opacity:0;transform:scale(.8);
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.sp-slide:hover::before{opacity:1;transform:none}

@media (max-width:767px){
  .nz-lb__nav{width:44px;height:44px}
  .nz-lb__nav--prev{left:8px}
  .nz-lb__nav--next{right:8px}
  .nz-lb__hint{display:none}
  .nz-lb__stage{width:94vw;height:76vh}
}
@media (prefers-reduced-motion:reduce){
  .nz-lb,.nz-lb__img,.nz-lb__close,.nz-lb__nav{transition:none}
}

/* ============================================================
   CTA SECTION
   Live constellation field on canvas, split headline, magnetic
   button, counters. Hand-rolled rather than a library: the whole
   thing is a few KB and the Lighthouse target is non-negotiable.
   ============================================================ */
.nz-cta{
  position:relative;
  overflow:hidden;
  padding:clamp(5rem,12vw,9rem) 0;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(231,197,124,.10), transparent 62%),
    linear-gradient(180deg, #16120F 0%, #0E0C0B 100%);
  border-block:1px solid var(--line);
  isolation:isolate;
}
.nz-cta__field{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  opacity:.85;
  pointer-events:none;
}
.nz-cta__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 55% at 50% 52%, rgba(14,12,11,.72), transparent 72%);
}
.nz-cta__in{position:relative;z-index:2;text-align:center}

.nz-cta__eyebrow{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--champ);margin:0 0 1.6rem;
}

.nz-cta__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,6.2vw,4.6rem);
  line-height:.98;letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0 auto 1.6rem;
  max-width:17ch;
}
/* Split-text: each word rises through a mask */
.nz-word{display:inline-block;overflow:hidden;vertical-align:top}
.nz-word > i{
  display:inline-block;font-style:normal;
  transform:translateY(105%);
  transition:transform .85s cubic-bezier(.2,.75,.25,1);
}
.nz-cta.seen .nz-word > i{transform:none}

.nz-cta__sub{
  font-family:var(--body);font-size:clamp(.95rem,2vw,1.08rem);
  line-height:1.75;color:#C3B9AD;
  max-width:56ch;margin:0 auto 2.6rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease .45s, transform .8s cubic-bezier(.2,.7,.3,1) .45s;
}
.nz-cta.seen .nz-cta__sub{opacity:1;transform:none}

.nz-cta__actions{
  display:flex;align-items:center;justify-content:center;
  gap:1.6rem;flex-wrap:wrap;
  opacity:0;transform:translateY(14px);
  transition:opacity .8s ease .6s, transform .8s cubic-bezier(.2,.7,.3,1) .6s;
}
.nz-cta.seen .nz-cta__actions{opacity:1;transform:none}

/* Magnetic button — fill wipes up from the base on hover */
.nz-magnet{
  position:relative;display:inline-grid;place-items:center;
  padding:18px 40px;border-radius:999px;
  border:1px solid rgba(231,197,124,.5);
  color:var(--cream);overflow:hidden;
  font-family:var(--body);font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;
  transition:color .35s ease, border-color .35s ease, transform .25s ease-out;
  will-change:transform;
}
.nz-magnet__fill{
  position:absolute;inset:0;z-index:0;
  background:var(--champ);
  transform:translateY(101%);
  transition:transform .5s cubic-bezier(.2,.75,.25,1);
}
.nz-magnet__label{position:relative;z-index:1}
.nz-magnet:hover{color:var(--jet);border-color:var(--champ)}
.nz-magnet:hover .nz-magnet__fill{transform:none}

.nz-cta__mail{
  font-family:var(--body);font-size:.9rem;color:var(--mute);
  border-bottom:1px solid rgba(231,197,124,.35);padding-bottom:2px;
  transition:color .3s ease,border-color .3s ease;
}
.nz-cta__mail:hover{color:var(--champ);border-color:var(--champ)}

/* Stats */
.nz-cta__stats{
  display:flex;justify-content:center;gap:clamp(2rem,7vw,5rem);
  flex-wrap:wrap;margin-top:3.5rem;
  padding-top:2.2rem;border-top:1px solid var(--line);
}
.nz-cta__stat{text-align:center}
.nz-cta__stat b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4vw,2.8rem);color:var(--champ);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.nz-cta__stat span{
  display:block;margin-top:.55rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
}

@media (max-width:767px){
  .nz-cta{padding:4rem 0}
  .nz-cta__title{max-width:13ch}
  .nz-magnet{width:100%;padding:17px 28px}
  .nz-cta__actions{gap:1.2rem}
  .nz-cta__stats{gap:2rem;margin-top:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  .nz-word > i{transform:none}
  .nz-cta__sub,.nz-cta__actions{opacity:1;transform:none}
  .nz-cta__field{display:none}
}

/* ============================================================
   HERO — upgrade
   Name reveal, role rotator, spotlight, status line, scroll cue,
   magnetic buttons. Video-ready: .sp-video inherits the same
   framing and grade as the still, so swapping in footage needs
   no CSS change.
   ============================================================ */

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* --- Name: word-by-word rise through a mask --- */
.sp-name{
  font-family:var(--display);font-weight:400;
  font-size:clamp(3.1rem,10vw,7.6rem);
  line-height:.98;letter-spacing:-.014em;
  text-transform:uppercase;margin:0;
}
.sp-name .nz-word{display:block;overflow:hidden}
.sp-name .nz-word > i{
  display:block;font-style:normal;
  transform:translateY(108%);
  transition:transform 1s cubic-bezier(.19,.8,.24,1);
}
.sp-name .nz-word:nth-child(2) > i{color:var(--champ);transition-delay:.11s}
.sp-hero.ready .sp-name .nz-word > i{transform:none}

/* --- Role rotator --- */
.sp-roles{
  display:block;position:relative;
  height:1.7em;overflow:hidden;margin-bottom:.35rem;
}
.sp-role{
  position:absolute;left:0;top:0;width:100%;
  color:var(--cream);font-weight:600;
  opacity:0;transform:translateY(100%);
  transition:opacity .55s ease, transform .7s cubic-bezier(.19,.8,.24,1);
}
.sp-role.is-on{opacity:1;transform:none}
.sp-role.is-out{opacity:0;transform:translateY(-100%)}
.sp-subTail{display:block;color:#B7ADA2}

/* --- Portrait: video and still share one treatment --- */
.sp-portrait video,
.sp-portrait .sp-video{
  width:100%;height:100%;object-fit:cover;object-position:50% 18%;
  filter:grayscale(72%) contrast(1.06) brightness(.9) sepia(.10);
  display:block;
}
/* Arrival bloom: lands flat, then resolves into its grade */
.sp-heroImg,.sp-video{
  opacity:0;transform:scale(1.04);
  filter:grayscale(100%) contrast(1.02) brightness(.72);
  transition:opacity 1s ease, transform 1.6s cubic-bezier(.19,.8,.24,1),
             filter 1.6s ease;
}
.sp-hero.ready .sp-heroImg,
.sp-hero.ready .sp-video{
  opacity:1;transform:none;
  filter:grayscale(72%) contrast(1.06) brightness(.9) sepia(.10);
}

/* --- Cursor spotlight over the portrait --- */
.sp-spot{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .5s ease;
  background:radial-gradient(160px circle at var(--sx,50%) var(--sy,50%),
    rgba(231,197,124,.22), transparent 68%);
  mix-blend-mode:screen;
}
.sp-portrait:hover .sp-spot{opacity:1}

/* --- Status line --- */
.sp-status{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:1.8rem;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s ease .9s, transform .8s ease .9s;
}
.sp-hero.ready .sp-status{opacity:1;transform:none}
.sp-status i{
  width:6px;height:6px;border-radius:50%;background:#5FBE7D;
  box-shadow:0 0 0 0 rgba(95,190,125,.6);
  animation:nzPulse 2.4s ease-out infinite;
}
@keyframes nzPulse{
  0%{box-shadow:0 0 0 0 rgba(95,190,125,.5)}
  70%{box-shadow:0 0 0 9px rgba(95,190,125,0)}
  100%{box-shadow:0 0 0 0 rgba(95,190,125,0)}
}
.sp-status span{color:var(--champ);font-variant-numeric:tabular-nums}

/* --- Badge: single gold sweep on arrival --- */
.badge{position:relative;overflow:hidden}
.badge::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(231,197,124,.42) 50%,transparent 65%);
  transform:translateX(-120%);
}
.sp-hero.ready .badge::after{
  animation:nzSweep 1.5s cubic-bezier(.2,.7,.3,1) .7s 1 forwards;
}
@keyframes nzSweep{to{transform:translateX(120%)}}

/* --- Buttons: hero matches the CTA --- */
.sp-actions .nz-magnet{
  position:relative;overflow:hidden;
  transition:color .35s ease,border-color .35s ease,background .35s ease,transform .25s ease-out;
  will-change:transform;
}
.sp-actions{
  opacity:0;transform:translateY(12px);
  transition:opacity .8s ease .75s, transform .8s ease .75s;
}
.sp-hero.ready .sp-actions{opacity:1;transform:none}
.badge{opacity:0;transform:translateY(10px);transition:opacity .7s ease .1s,transform .7s ease .1s}
.sp-hero.ready .badge{opacity:1;transform:none}
.sp-sub{opacity:0;transform:translateY(12px);transition:opacity .8s ease .55s,transform .8s ease .55s}
.sp-hero.ready .sp-sub{opacity:1;transform:none}

/* --- Scroll cue --- */
.sp-cue{
  position:absolute;left:50%;bottom:1.6rem;z-index:4;
  transform:translateX(-50%);
  width:1px;height:52px;overflow:hidden;
  background:rgba(243,237,228,.14);
  opacity:0;transition:opacity .7s ease 1.4s;
}
.sp-hero.ready .sp-cue{opacity:1}
.sp-cue span{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,var(--champ));
  animation:nzCue 2.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes nzCue{
  0%{transform:translateY(-100%)}
  55%{transform:translateY(100%)}
  100%{transform:translateY(100%)}
}

.sp-hero{position:relative}

@media (max-width:767px){
  .sp-status{font-size:.6rem;letter-spacing:.1em;margin-top:1.4rem}
  .sp-cue{display:none}
  .sp-roles{height:2.9em}
}

@media (prefers-reduced-motion:reduce){
  .sp-name .nz-word > i,.sp-heroImg,.sp-video,.sp-status,.sp-actions,.badge,.sp-sub{
    transform:none!important;opacity:1!important;
  }
  .sp-heroImg,.sp-video{filter:grayscale(72%) contrast(1.06) brightness(.9) sepia(.10)}
  .sp-cue span,.sp-status i,.badge::after{animation:none}
  .sp-role{transition:none}
}

/* ============================================================
   HERO REEL — Ken Burns crossfade
   Stills behaving like footage: each shot pushes in slowly and
   drifts, crossfading to the next. Cheaper than video, stays
   sharp at any size, and no autoplay restrictions to fight.
   ============================================================ */
.sp-reel{position:absolute;inset:0;overflow:hidden}

.sp-reel__shot{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;
  opacity:0;
  filter:grayscale(72%) contrast(1.06) brightness(.9) sepia(.10);
  transition:opacity 1.6s ease;
  will-change:opacity, transform;
}
.sp-reel__shot.is-on{opacity:1}

/* Motion only runs on the visible shot, so idle frames cost nothing */
.sp-reel__shot.is-on{animation:nzKen 9s ease-out both}
.sp-reel__shot.is-alt.is-on{animation:nzKenAlt 9s ease-out both}

@keyframes nzKen{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.13) translate3d(-1.6%,-1.2%,0)}
}
@keyframes nzKenAlt{
  from{transform:scale(1.13) translate3d(1.4%,-1%,0)}
  to  {transform:scale(1.02) translate3d(0,0,0)}
}

/* Arrival bloom, matching the single-image behaviour */
.sp-reel{opacity:0;transform:scale(1.03);
  transition:opacity 1s ease, transform 1.6s cubic-bezier(.19,.8,.24,1)}
.sp-hero.ready .sp-reel{opacity:1;transform:none}

/* Thin progress bar along the base of the frame */
.sp-reel__bar{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  height:2px;background:rgba(243,237,228,.10);
  opacity:0;transition:opacity .6s ease 1.2s;
}
.sp-hero.ready .sp-reel__bar{opacity:1}
.sp-reel__bar span{
  display:block;height:100%;width:0;
  background:var(--champ);
}
.sp-reel__bar span.run{
  animation:nzReelBar 5s linear forwards;
}
@keyframes nzReelBar{from{width:0}to{width:100%}}

/* Spotlight sits above the reel */
.sp-spot{z-index:4}

@media (prefers-reduced-motion:reduce){
  .sp-reel__shot{animation:none!important;transform:none!important}
  .sp-reel{opacity:1;transform:none}
  .sp-reel__bar{display:none}
}

/* ============================================================
   FILTER TABS — in-place filtering with a sliding indicator
   ============================================================ */
.sp-filter{
  position:relative;
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0 0 1.75rem;
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
.sp-filter__btn{
  position:relative;z-index:1;
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:8px 17px;cursor:pointer;
  font-family:var(--body);font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);
  transition:color .35s ease,border-color .35s ease;
}
.sp-filter__btn span{
  margin-left:.4rem;color:var(--gold-dim,#8A6F34);
  font-variant-numeric:tabular-nums;
}
.sp-filter__btn:hover{color:var(--cream);border-color:rgba(231,197,124,.4)}
.sp-filter__btn.is-on{color:var(--jet);border-color:transparent}
.sp-filter__btn.is-on span{color:rgba(20,17,16,.55)}

/* Champagne pill slides between tabs rather than snapping */
.sp-filter__ink{
  position:absolute;z-index:0;top:0;left:0;height:0;
  background:var(--champ);border-radius:999px;
  transition:transform .5s cubic-bezier(.19,.8,.24,1), width .5s cubic-bezier(.19,.8,.24,1);
  pointer-events:none;
}

/* Rows collapse out rather than disappearing */
.sp-row{
  transition:opacity .45s ease, transform .5s cubic-bezier(.2,.7,.3,1),
             max-height .5s ease, margin .4s ease, padding .4s ease,
             border-color .3s ease, background .3s ease;
  max-height:260px;overflow:hidden;
}
.sp-row.is-out{
  opacity:0;transform:translateY(-6px) scale(.985);
  max-height:0;margin:0;padding-top:0;padding-bottom:0;
  border-width:0;pointer-events:none;
}
.sp-press__empty{
  text-align:center;color:var(--mute);padding:2.5rem 0;margin:0;
  font-size:.95rem;
}

/* ============================================================
   STATEMENT — oversized line that reveals word by word,
   with credential bars that draw in.
   ============================================================ */
.nz-state{
  padding:clamp(4rem,10vw,7rem) 0;
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(231,197,124,.035),transparent 60%);
}
.nz-state__line{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  line-height:1.25;letter-spacing:-.012em;
  text-transform:uppercase;
  margin:0 0 3rem;max-width:26ch;
  color:var(--mute);
}
.nz-state__line .nz-w{
  display:inline-block;
  color:var(--mute);
  transition:color .5s ease;
}
.nz-state__line .nz-w.lit{color:var(--cream)}
.nz-state__line .nz-w.gold{color:var(--champ)}

.nz-bars{display:grid;gap:1.6rem;max-width:640px}
.nz-bar__top{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.6rem;
}
.nz-bar__label{
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
}
.nz-bar__val{
  font-family:var(--display);font-size:1.1rem;color:var(--champ);
  font-variant-numeric:tabular-nums;
}
.nz-bar__track{height:2px;background:var(--line);position:relative;overflow:hidden}
.nz-bar__fill{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--rose),var(--champ));
  transition:width 1.5s cubic-bezier(.19,.8,.24,1);
}

@media (max-width:767px){
  .sp-filter{gap:.4rem}
  .sp-filter__btn{padding:7px 13px;font-size:.62rem}
  .nz-state__line{max-width:100%;font-size:clamp(1.3rem,5.5vw,1.8rem)}
  .nz-bars{gap:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .sp-filter__ink,.sp-row,.nz-bar__fill,.nz-state__line .nz-w{transition:none}
}

/* ============================================================
   FAILSAFE
   Anything that starts hidden must only do so while JS is
   confirmed running. A thrown error in one script used to
   leave whole paragraphs invisible.
   ============================================================ */
html:not(.nz-js) .rv,
html:not(.nz-js) .nz-cta__sub,
html:not(.nz-js) .nz-cta__actions,
html:not(.nz-js) .sp-name .nz-word > i,
html:not(.nz-js) .nz-word > i{
  opacity:1 !important;
  transform:none !important;
  clip-path:none !important;
}
html:not(.nz-js) .sp-fact::after{width:100%}

/* ============================================================
   SCROLL PERFORMANCE PASS

   Causes of the stutter, in order of cost:
     1. two fixed, continuously animating full-viewport layers
        (ghost wordmark + drifting blooms) — these repaint the
        whole screen on every scroll frame
     2. backdrop-filter at 18-22px on a sticky header, which is
        re-blurred each frame as content moves beneath it
     3. mix-blend-mode on the portrait spotlight
     4. no containment, so the browser re-lays-out long sections

   The ambient layers are removed rather than tuned: on a shared
   host they cost more than they add. Restorable — the original
   rules are in nz-backups/variants.
   ============================================================ */

/* 1. Kill the animated fixed layers */
body::after{animation:none !important;}

/* Keep a static warm wash: same look, zero per-frame cost */
body::before{
  animation:none !important;
  opacity:.10;
}

/* 2. Cheaper header blur. 10px is visually near-identical to 22
      and roughly a third of the work. */
.sp-head{backdrop-filter:blur(10px) saturate(115%);}
.sp-panel{backdrop-filter:blur(12px);}

/* 3. Blend modes are expensive; a plain overlay reads the same */
.sp-spot{mix-blend-mode:normal;}

/* 4. Containment: the browser can skip layout and paint for
      sections that are nowhere near the viewport. Intrinsic
      sizes stop the scrollbar jumping. */
@supports (content-visibility: auto){
  #work, #updates, #statement, #press, #gallery, #cta, #contact{
    content-visibility:auto;
    contain-intrinsic-size:auto 800px;
  }
}

/* 5. Promote only what actually moves, and only while it moves */
.sp-reel__shot{backface-visibility:hidden;}
.sp-reel__shot:not(.is-on){will-change:auto;}
.sp-portrait,.sp-portraitWrap{contain:paint;}

/* 6. Long lists benefit from layout containment */
.sp-press,.sp-posts,.grid4{contain:layout style;}

/* 7. Stop the marquee forcing layout — it only ever transforms */
.sp-marqIn{will-change:transform;backface-visibility:hidden;}

/* 8. The gallery rail scrolls natively; keep it off the main thread */
.sp-gal{overscroll-behavior-x:contain;}

/* ============================================================
   PRELOADER
   Covers the first paint while fonts and the hero image decode,
   then lifts. Doubles as a jank fix: nothing animates until the
   page has actually settled.
   ============================================================ */
.nz-pre{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:var(--jet);
  transition:opacity .7s ease .15s, visibility .7s .15s;
}
.nz-pre.done{opacity:0;visibility:hidden;pointer-events:none}
body.nz-loading{overflow:hidden}

.nz-pre__in{display:grid;justify-items:center;gap:1.6rem;width:min(78vw,320px)}

/* Monogram: the two initials draw their stroke in */
.nz-pre__mark{
  width:74px;height:74px;
}
.nz-pre__mark svg{width:100%;height:100%;display:block;overflow:visible}
.nz-pre__mark .ring{
  fill:none;stroke:rgba(231,197,124,.28);stroke-width:1;
}
.nz-pre__mark .glyph{
  fill:none;stroke:var(--champ);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:nzDraw 1.5s cubic-bezier(.4,0,.2,1) forwards;
}
.nz-pre__mark .glyph.two{animation-delay:.28s}
.nz-pre__mark .sweep{
  fill:none;stroke:var(--champ);stroke-width:1;
  stroke-dasharray:1 5;opacity:.5;
  transform-origin:50% 50%;
  animation:nzSpin 3.4s linear infinite;
}
@keyframes nzDraw{to{stroke-dashoffset:0}}
@keyframes nzSpin{to{transform:rotate(360deg)}}

.nz-pre__name{
  font-family:var(--display);
  font-size:.82rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--cream);
  padding-left:.42em;
  opacity:0;animation:nzFadeUp .9s ease .5s forwards;
}
@keyframes nzFadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* Progress rail */
.nz-pre__rail{
  width:100%;height:1px;background:rgba(243,237,228,.12);
  position:relative;overflow:hidden;
}
.nz-pre__rail i{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--rose),var(--champ));
  transition:width .35s ease;
}
.nz-pre__pct{
  font-family:var(--body);font-size:.6rem;letter-spacing:.22em;
  color:var(--mute);font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  .nz-pre__mark .glyph{animation:none;stroke-dashoffset:0}
  .nz-pre__mark .sweep{animation:none}
  .nz-pre__name{animation:none;opacity:1}
}


/* ============================================================
   UPDATES — editorial list
   The three-up grid put near-identical photographs side by side,
   which made the repetition the first thing you noticed. As a
   list the writing leads, and only one image is ever on screen,
   shown on hover.
   ============================================================ */
.nz-notes{
  border-top:1px solid var(--line);
  position:relative;
  z-index:1;
}

.nz-note{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:1.4rem;
  padding:1.9rem .4rem;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left .45s cubic-bezier(.2,.7,.3,1);
}

/* Gold wash sweeps in from the left on hover */
.nz-note::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(231,197,124,.075),transparent 62%);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}
.nz-note:hover::before{opacity:1}
.nz-note:hover{padding-left:1.3rem}

.nz-note__num{
  font-family:var(--display);
  font-size:.95rem;
  color:var(--gold-dim,#8A6F34);
  padding-top:.35rem;
  transition:color .35s ease;
}
.nz-note:hover .nz-note__num{color:var(--champ)}

.nz-note__main{display:block;min-width:0}

.nz-note__meta{
  display:flex;align-items:center;gap:.7rem;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--champ);
  margin-bottom:.55rem;
}
.nz-note__meta i{
  width:3px;height:3px;border-radius:50%;
  background:var(--gold-dim,#8A6F34);display:block;
}
.nz-note__meta span{color:var(--mute)}

.nz-note__title{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.35rem,2.9vw,2.05rem);
  line-height:1.14;
  letter-spacing:-.012em;
  text-transform:uppercase;
  color:var(--cream);
  max-width:22ch;
  transition:color .35s ease;
}
.nz-note:hover .nz-note__title{color:var(--champ)}

.nz-note__ex{
  display:block;
  margin-top:.7rem;
  font-size:.9rem;
  line-height:1.7;
  color:var(--mute);
  max-width:52ch;
}

.nz-note__go{
  display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);
  color:var(--mute);
  margin-top:.3rem;
  transition:color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.2,.7,.3,1);
}
.nz-note__go svg{width:16px;height:16px}
.nz-note:hover .nz-note__go{
  color:var(--champ);
  border-color:rgba(231,197,124,.45);
  transform:translate(3px,-3px);
}

/* Thumbnail inline on touch, hidden on desktop */
.nz-note__mob{display:none}

/* Floating preview that trails the cursor */
.nz-peek{
  position:fixed;
  top:0;left:0;
  z-index:5;
  width:250px;
  aspect-ratio:16/11;
  overflow:hidden;
  border:1px solid rgba(231,197,124,.3);
  pointer-events:none;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.9) rotate(-3deg);
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.nz-peek.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(-3deg)}
.nz-peek img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(55%) contrast(1.05) brightness(.92);
}

.nz-notes__foot{
  margin-top:2rem;display:flex;justify-content:flex-end;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
}
.nz-notes__foot a{
  color:var(--champ);
  border-bottom:1px solid var(--gold-dim,#8A6F34);
  padding-bottom:2px;
  transition:border-color .3s ease;
}
.nz-notes__foot a:hover{border-color:var(--champ)}

@media (max-width:767px){
  .nz-note{
    grid-template-columns:auto 1fr;
    gap:.9rem;
    padding:1.4rem .2rem;
  }
  .nz-note:hover{padding-left:.2rem}
  .nz-note__go{display:none}
  .nz-note__title{max-width:100%;font-size:1.28rem}
  .nz-note__ex{font-size:.86rem}
  .nz-note__mob{
    display:block;grid-column:1 / -1;
    margin-top:1rem;aspect-ratio:16/9;overflow:hidden;
    border:1px solid var(--line);
  }
  .nz-note__mob img{
    width:100%;height:100%;object-fit:cover;
    filter:grayscale(55%) brightness(.92);
  }
  .nz-peek{display:none}
}

@media (hover:none){ .nz-peek{display:none} }

@media (prefers-reduced-motion:reduce){
  .nz-note,.nz-note__go,.nz-peek{transition:none}
}

/* ============================================================
   ABOUT — portrait, pull-quote, drop cap, sign-off
   The right column was half empty and the prose ran as three
   flat paragraphs. A portrait fills the column, the quote gives
   the text a break, the drop cap anchors it.
   ============================================================ */

.sp-about__col{display:grid;gap:2rem;align-content:start}

/* --- Portrait --- */
.nz-aboutPortrait{
  position:relative;
  margin:0;
  aspect-ratio:3/4;
  overflow:visible;
}
.nz-aboutPortrait img{
  width:100%;height:100%;
  object-fit:cover;object-position:56% 20%;
  filter:grayscale(74%) contrast(1.06) brightness(.9) sepia(.08);
  transition:filter .8s ease, transform 1s cubic-bezier(.2,.7,.3,1);
  position:relative;z-index:1;
}
.nz-aboutPortrait:hover img{filter:grayscale(38%) brightness(.96);transform:scale(1.015)}

/* Offset champagne frame, matching the hero treatment */
.nz-aboutPortrait__frame{
  position:absolute;
  inset:14px -14px -14px 14px;
  border:1px solid rgba(231,197,124,.4);
  z-index:0;
  pointer-events:none;
}

/* --- Drop cap --- */
.nz-drop::first-letter{
  float:left;
  font-family:var(--display);
  font-size:3.9rem;
  line-height:.78;
  margin:.1em .16em 0 0;
  color:var(--champ);
}

/* --- Pull-quote --- */
.nz-quote{
  margin:2rem 0;
  padding:0 0 0 1.6rem;
  border-left:2px solid var(--champ);
  position:relative;
}
.nz-quote p{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.25rem,2.5vw,1.75rem);
  line-height:1.25;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--cream);
  max-width:24ch;
}


@media (max-width:899px){
  .sp-about__col{gap:1.6rem}
  .nz-aboutPortrait{aspect-ratio:4/3}
  .nz-aboutPortrait__frame{inset:10px -10px -10px 10px}
  .nz-quote{margin:1.6rem 0;padding-left:1.1rem}

}

@media (prefers-reduced-motion:reduce){
  .nz-aboutPortrait img{transition:none}
  .nz-aboutPortrait:hover img{transform:none}
}

/* ============================================================
   STATEMENT — two columns with the overlap diagram
   The right column was empty and the section had already used
   enough photography. This states the argument visually rather
   than decorating around it.
   ============================================================ */
.nz-state__grid{display:grid;gap:3rem;align-items:center}
.nz-state__left{min-width:0}

.nz-venn{display:grid;justify-items:center;gap:1.1rem}
.nz-venn svg{width:min(340px,100%);height:auto;display:block;overflow:visible}

/* Rings draw themselves in */
.nz-venn__ring{
  fill:none;
  stroke-width:1.2;
  stroke-dasharray:553;
  stroke-dashoffset:553;
}
.nz-venn__ring--a{stroke:rgba(231,197,124,.55)}
.nz-venn__ring--b{stroke:rgba(201,139,107,.55)}
.nz-venn.in .nz-venn__ring--a{animation:nzVennDraw 1.6s cubic-bezier(.4,0,.2,1) forwards}
.nz-venn.in .nz-venn__ring--b{animation:nzVennDraw 1.6s cubic-bezier(.4,0,.2,1) .28s forwards}
@keyframes nzVennDraw{to{stroke-dashoffset:0}}

/* The overlap breathes very slowly */
.nz-venn__lens{opacity:0}
.nz-venn.in .nz-venn__lens{animation:nzVennLens 6s ease-in-out 1.4s infinite}
@keyframes nzVennLens{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* A marker travelling the left ring */
.nz-venn__orbit{transform-origin:130px 150px;opacity:0}
.nz-venn.in .nz-venn__orbit{
  opacity:1;
  animation:nzVennSpin 14s linear 1.6s infinite;
}
@keyframes nzVennSpin{to{transform:rotate(360deg)}}
.nz-venn__dot{fill:var(--champ)}

/* Labels */
.nz-venn__label,
.nz-venn__sub{
  font-family:var(--body);
  font-size:9px;
  font-weight:600;
  letter-spacing:.22em;
  fill:var(--mute);
  opacity:0;
}
.nz-venn__mid{
  font-family:var(--display);
  font-size:19px;
  letter-spacing:.02em;
  fill:var(--cream);
  opacity:0;
}
.nz-venn__rule{stroke:rgba(231,197,124,.45);stroke-width:1;opacity:0}

.nz-venn.in .nz-venn__label{animation:nzVennFade .8s ease 1.5s forwards}
.nz-venn.in .nz-venn__mid{animation:nzVennFade .8s ease 1.75s forwards}
.nz-venn.in .nz-venn__rule,
.nz-venn.in .nz-venn__sub{animation:nzVennFade .8s ease 1.95s forwards}
@keyframes nzVennFade{to{opacity:1}}

.nz-venn__note{
  margin:0;
  max-width:30ch;
  text-align:center;
  font-size:.72rem;
  line-height:1.6;
  letter-spacing:.04em;
  color:var(--mute);
}

@media (min-width:960px){
  .nz-state__grid{grid-template-columns:1.25fr .75fr;gap:4rem}
}
@media (max-width:959px){
  .nz-venn{margin-top:1rem}
  .nz-venn svg{width:min(300px,88%)}
}

@media (prefers-reduced-motion:reduce){
  .nz-venn__ring{stroke-dashoffset:0;animation:none !important}
  .nz-venn__lens,.nz-venn__orbit{animation:none !important;opacity:.8}
  .nz-venn__label,.nz-venn__mid,.nz-venn__sub,.nz-venn__rule{opacity:1;animation:none !important}
}

/* ============================================================
   PANEL BORDER — travelling gold
   Replaces the static left-edge rail on the three panelled
   sections (What I do, Selected appearances, Start a
   conversation). A gold arc now runs continuously around all
   four sides, following the rounded corners.

   Method: a conic gradient rotated via an animated custom
   property, masked so only the 2px border ring shows. Masking
   keeps it a border rather than a glow over the content.
   ============================================================ */

@property --nz-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

/* Retire the old static left line */
.sp-sec--raised > .wrap::before{
  content:"";
  position:absolute;
  inset:0;                 /* must not be overridden \u2014 top/bottom:auto
                              dropped it to the content box, which drew a
                              second rounded box inside the panel */
  width:auto;
  height:auto;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(
    from var(--nz-angle),
    transparent 0deg,
    transparent 286deg,
    rgba(201,139,107,.25) 300deg,
    rgba(231,197,124,.70) 328deg,
    #FFF3D6 344deg,
    var(--champ-hi,#F2D79A) 352deg,
    rgba(231,197,124,.35) 357deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:nzBorderRun 6s linear infinite;
  pointer-events:none;
  z-index:0;
}

@keyframes nzBorderRun{
  to{--nz-angle:360deg}
}

/* The panel's own hairline stays underneath, so the travelling
   arc reads as a highlight moving along an existing edge. */
.sp-sec--raised > .wrap{
  border-color:var(--line);
}

/* Content must sit above the ring */
.sp-sec--raised > .wrap > *{position:relative;z-index:1;}

/* Stagger the three panels so they are not in lockstep */
#gallery.sp-sec--raised > .wrap::before{animation-delay:-2s;}
#contact.sp-sec--raised > .wrap::before{animation-delay:-4s;}

/* Browsers without @property get a fixed gold arc rather than
   nothing — still a border, just not moving. */
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .sp-sec--raised > .wrap::before{
    background:linear-gradient(180deg,transparent,var(--champ),transparent);
    animation:none;
    -webkit-mask:none;
    mask:none;
    padding:0;
    width:2px;
    left:0;
    top:12%;
    height:76%;
  }
}

@media (prefers-reduced-motion:reduce){
  .sp-sec--raised > .wrap::before{animation:none;}
}

/* ------------------------------------------------------------
   Border ring: sit above the panel contents.
   In the Contact panel the edges were clear so the ring showed.
   In What I do and Gallery the inner grid and the slider (which
   deliberately overflows to the right) covered the edge, so only
   parts of the ring were visible. It is 2px at the very edge and
   pointer-events:none, so nothing is blocked by raising it.
   ------------------------------------------------------------ */
.sp-sec--raised > .wrap::before{z-index:5;}
.sp-sec--raised > .wrap > *{z-index:1;}
/* Keep the gallery's overflow inside the panel so it cannot
   run over the right-hand edge of the border. */
#gallery .sp-gal{margin-right:0;padding-right:0;}
#gallery .sp-galWrap{overflow:hidden;border-radius:2px;}

/* ------------------------------------------------------------
   Preloader name: larger, with Zidan in gold so it reads as
   the logo rather than a caption. Tracking eased slightly \u2014
   .42em at a bigger size was pulling the words apart.
   ------------------------------------------------------------ */
.nz-pre__name{
  font-size:clamp(1.05rem,3.4vw,1.45rem);
  letter-spacing:.3em;
  padding-left:.3em;
  color:var(--cream);
  white-space:nowrap;
}
.nz-pre__name span{color:var(--champ);}
@media (max-width:420px){
  .nz-pre__name{font-size:1rem;letter-spacing:.24em;padding-left:.24em;}
}

/* ============================================================
   RESPONSIVE PASS — home-2
   Covers everything added since the original breakpoints: the
   hero reel, role rotator, notes list, about portrait and
   pull-quote, statement diagram, press filter, panel borders,
   CTA and preloader.
   Appended last so it wins over anything earlier.
   ============================================================ */

/* ---------- TABLET: 768 – 1023 ---------- */
@media (min-width:768px) and (max-width:1023px){
  /* The split hero squeezes both halves at this width */
  .sp-heroGrid{grid-template-columns:1fr;gap:2.5rem}
  .sp-portraitWrap{max-width:460px;margin-inline:auto}
  .sp-hero h1{font-size:clamp(3.2rem,9vw,5rem)}
  .sp-sub{max-width:46ch}

  .grid4{grid-template-columns:repeat(2,1fr)}
  .sp-about{grid-template-columns:1fr;gap:2.5rem}
  .sp-about__col{max-width:520px}
  .nz-state__grid{grid-template-columns:1fr;gap:2.5rem}
  .nz-venn{max-width:340px;margin-inline:auto}
  .sp-contact{grid-template-columns:1fr;gap:2.5rem}
  .sp-aside{max-width:520px}
}

/* ---------- PHONE: up to 767 ---------- */
@media (max-width:767px){

  /* Hero -------------------------------------------------- */
  .sp-hero{padding-top:1.5rem}
  .sp-heroGrid{gap:2rem}

  /* Reel: the frame drives the height, images fill it */
  .sp-portrait{aspect-ratio:4/5}
  .sp-reel{position:absolute;inset:0}
  .sp-reel__shot{object-position:52% 16%}
  .sp-reel__bar{height:2px}

  /* Role rotator: the longest role wraps to two lines at this
     width, so a fixed height clipped it */
  .sp-roles{height:auto;min-height:3.4em}
  .sp-role{position:relative;display:none}
  .sp-role.is-on{display:block;position:relative}
  .sp-role.is-out{display:none}

  .sp-status{flex-wrap:wrap;line-height:1.5}
  .badge{font-size:.52rem;letter-spacing:.12em;line-height:1.5}

  /* Panels ------------------------------------------------ */
  .sp-sec--raised > .wrap{
    padding:1.5rem 1.15rem;
    border-radius:16px;
  }
  .sp-sec--raised > .wrap::before{padding:1.5px}

  /* Notes list -------------------------------------------- */
  .nz-note{padding:1.25rem .1rem}
  .nz-note__num{font-size:.8rem;padding-top:.2rem}
  .nz-note__meta{font-size:.56rem;letter-spacing:.14em;gap:.5rem}
  .nz-note__title{font-size:1.18rem;line-height:1.2}
  .nz-note__ex{font-size:.82rem;line-height:1.6}
  .nz-note__mob{margin-top:.85rem}

  /* About -------------------------------------------------- */
  .sp-about__col{gap:1.4rem}
  .nz-aboutPortrait{aspect-ratio:3/2}
  .nz-aboutPortrait img{object-position:56% 22%}
  .nz-drop::first-letter{font-size:3rem;margin-right:.12em}
  .nz-quote p{font-size:1.1rem;max-width:100%}


  /* Statement ---------------------------------------------- */
  .nz-state__line{font-size:clamp(1.25rem,5.2vw,1.7rem);max-width:100%}
  .nz-venn svg{width:min(260px,80%)}
  .nz-venn__note{font-size:.66rem;max-width:26ch}
  .nz-bar__label{font-size:.6rem;letter-spacing:.12em}
  .nz-bar__val{font-size:1rem}

  /* Press filter: one scrolling row beats four wrapped rows */
  .sp-filter{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:.75rem;
  }
  .sp-filter::-webkit-scrollbar{display:none}
  .sp-filter__btn{flex:0 0 auto;padding:7px 12px;font-size:.58rem;letter-spacing:.1em}
  .sp-filter__ink{display:none}   /* position breaks once the row scrolls */
  .sp-filter__btn.is-on{background:var(--champ);color:var(--jet);border-color:var(--champ)}

  .sp-row{padding:1rem .85rem}
  .sp-row__h{font-size:.98rem}
  .sp-row__yr{font-size:1.05rem}

  /* Marquee ------------------------------------------------ */
  .sp-marqSet{font-size:.68rem;gap:1.1rem;padding-right:1.1rem}

  /* CTA ---------------------------------------------------- */
  .nz-cta__title{font-size:clamp(1.8rem,7.5vw,2.4rem);max-width:100%}
  .nz-cta__sub{font-size:.9rem}
  .nz-cta__stats{gap:1.5rem}
  .nz-cta__stat b{font-size:1.6rem}
  .nz-cta__stat span{font-size:.54rem;letter-spacing:.14em}

  /* Gallery ------------------------------------------------ */
  .sp-slide{width:76vw}
  .sp-slide figcaption{font-size:.82rem;left:10px;bottom:8px}

  /* Contact ------------------------------------------------ */
  .sp-aside{padding:1.4rem}
  .fld input,.fld textarea{font-size:16px}   /* stops iOS zooming on focus */
}

/* ---------- SMALL PHONES: up to 380 ---------- */
@media (max-width:380px){
  :root{--gut:16px}
  .sp-hero h1{font-size:2.5rem}
  .sp-brand{font-size:.92rem;letter-spacing:.08em}
  .pill{padding:8px 14px;font-size:.58rem}
  .nz-note__title{font-size:1.06rem}
  .sp-sec h2{font-size:1.65rem}
  .nz-cta__stats{gap:1.1rem}
  .nz-pre__in{width:min(86vw,280px)}
}

/* ---------- LANDSCAPE PHONES ---------- */
@media (max-height:520px) and (orientation:landscape){
  .sp-hero{min-height:auto;padding:5rem 0 3rem}
  .sp-portrait{aspect-ratio:16/9}
  .sp-panel{justify-content:flex-start;overflow-y:auto;padding-top:4.5rem}
  .sp-panel a{font-size:1.3rem;padding:.2rem 0}
  .nz-pre__in{gap:1rem}
}

/* ---------- TOUCH ---------- */
@media (hover:none){
  /* Hover-only affordances must not be the only route */
  .nz-note__go{opacity:.7}
  .sp-slide{cursor:default}
  .nz-magnet{transform:none !important}
  /* Minimum tap targets */
  .sp-filter__btn{min-height:40px}
  .nz-note{min-height:64px}
  .sp-galBtn{width:46px;height:46px}
}

/* ============================================================
   NAVBAR MONOGRAM + NUMBERED SECTION NAVIGATOR
   Nav links removed from the header; the numbered rail on the
   right now carries section navigation on desktop, and the
   existing drawer still covers mobile.
   ============================================================ */

/* --- Monogram beside the wordmark --- */
.sp-brand{display:inline-flex;align-items:center;gap:.6rem}
.sp-brand__mark{
  display:block;
  width:30px;height:30px;
  flex:0 0 auto;
}
.sp-brand__mark svg{width:100%;height:100%;display:block;overflow:visible}
.sp-brand__mark .ring{
  fill:none;stroke:rgba(231,197,124,.32);stroke-width:1.6;
  transition:stroke .4s ease;
}
.sp-brand__mark .glyph{
  fill:none;stroke:var(--champ);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.sp-brand:hover .sp-brand__mark .ring{stroke:var(--champ)}
.sp-brand__txt{display:inline-block}

/* Header no longer has a centre column */
.sp-head__in{justify-content:space-between}

/* --- Numbered navigator --- */
.nz-steps{
  position:fixed;
  right:clamp(14px,2vw,28px);
  top:50%;
  transform:translateY(-50%);
  z-index:55;
}
.nz-steps ol{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:.15rem;
}
.nz-steps a{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.7rem;
  padding:.42rem 0;
  color:var(--mute);
  transition:color .35s ease;
}
.nz-steps b{
  font-family:var(--display);
  font-size:.82rem;
  font-weight:400;
  letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  position:relative;
  padding-right:.9rem;
  transition:color .35s ease;
}
/* Tick to the right of each number, grows when active */
.nz-steps b::after{
  content:"";
  position:absolute;
  right:0;top:50%;
  width:10px;height:1px;
  background:currentColor;
  opacity:.45;
  transition:width .4s cubic-bezier(.19,.8,.24,1),opacity .35s ease;
}
/* Label slides out on hover */
.nz-steps span{
  font-family:var(--body);
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
  max-width:0;
  overflow:hidden;
  opacity:0;
  transition:max-width .45s cubic-bezier(.19,.8,.24,1),opacity .3s ease;
  order:-1;
}
.nz-steps a:hover span,
.nz-steps a:focus-visible span{max-width:9rem;opacity:1}
.nz-steps a:hover{color:var(--cream)}

.nz-steps a.is-on{color:var(--champ)}
.nz-steps a.is-on b::after{width:22px;opacity:1}

@media (max-width:1023px){
  /* Drawer covers navigation below desktop */
  .nz-steps{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nz-steps a,.nz-steps b::after,.nz-steps span{transition:none}
}

/* ============================================================
   CONTACT — mobile
   The fields were bare full-width underlines, which at 375px
   read as three stretched lines rather than a form. On mobile
   they get proper containers; desktop keeps the underline
   treatment, which works there because the column is narrow.
   ============================================================ */
@media (max-width:767px){

  .sp-contact{gap:1.75rem}

  /* Fields as contained boxes */
  .sp-contact .fld{margin-bottom:.85rem}
  .sp-contact .fld label{
    font-size:.56rem;
    letter-spacing:.16em;
    margin-bottom:6px;
    color:var(--mute);
  }
  .sp-contact .fld input,
  .sp-contact .fld textarea{
    border:1px solid var(--line);
    border-bottom:1px solid var(--line);
    border-radius:10px;
    background:rgba(243,237,228,.02);
    padding:12px 14px;
    font-size:16px;              /* keeps iOS from zooming */
    line-height:1.4;
  }
  .sp-contact .fld input:focus,
  .sp-contact .fld textarea:focus{
    border-color:rgba(231,197,124,.45);
    background:rgba(231,197,124,.04);
  }
  .sp-contact .fld textarea{min-height:96px}

  .sp-contact form .btn{
    width:100%;
    text-align:center;
    margin-top:.35rem;
    padding:15px 20px;
  }

  /* Aside: stop it reading as a second full-width slab */
  .sp-contact .sp-aside{
    padding:1.25rem;
    border-radius:14px;
  }
  .sp-contact .sp-aside .mail{
    font-size:.95rem;
    line-height:1.4;
    display:inline-block;
    word-break:break-word;       /* long address must not force a stretch */
    max-width:100%;
  }
  .sp-contact .sp-aside p{
    font-size:.82rem !important;
    line-height:1.6;
    margin-top:1rem !important;
  }

  /* Icons centred so the box does not feel bottom-heavy on one side */
  .sp-contact .socials{
    justify-content:flex-start;
    gap:.45rem;
    margin-top:1.2rem;
  }
  .sp-contact .socials a{width:40px;height:40px}
  .sp-contact .socials svg{width:16px;height:16px}

  /* Heading sits tighter to the form */
  .sp-contact h2{margin-bottom:1.1rem}
}

@media (max-width:380px){
  .sp-contact .sp-aside{padding:1.1rem}
  .sp-contact .sp-aside .mail{font-size:.88rem}
}


/* ============================================================
   GHOST WORDMARK \u2014 page-wide
   One absolutely positioned layer inside <main>, so it scrolls
   with the page rather than being repainted against a fixed
   viewport. Bands are generated to fill the page height and
   only animate while they are actually on screen.
   ============================================================ */
/* kill-switch removed \u2014 the fixed band is intentional again */

.nz-hasghost{position:relative;}
.nz-hasghost > section,
.nz-hasghost > div:not(.nz-ghostwrap){position:relative;z-index:1;}

.nz-ghostwrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}

.nz-gband{
  position:absolute;
  left:0;right:0;
  overflow:hidden;
  line-height:1;
  contain:paint;
}
.nz-gband__run{
  display:inline-flex;
  white-space:nowrap;
  transform:translate3d(0,0,0);
}
/* Only bands in view animate \u2014 class toggled by observer */
.nz-gband.run .nz-gband__run{
  will-change:transform;
  animation:nzBandRun 68s linear infinite;
}
.nz-gband.rev.run .nz-gband__run{animation-direction:reverse;animation-duration:82s;}

.nz-gband__run span{
  font-family:var(--display);
  font-size:clamp(4.5rem,13vw,11rem);
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:rgba(243,237,228,.028);
  padding-right:.3em;
}
.nz-gband__run span:nth-child(3n){color:rgba(231,197,124,.034);}

@keyframes nzBandRun{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}
}

@media (prefers-reduced-motion:reduce){
  .nz-gband.run .nz-gband__run{animation:none;}
}
@media (max-width:767px){
  .nz-gband__run span{font-size:clamp(3.2rem,20vw,5.5rem);}
  .nz-gband.run .nz-gband__run{animation-duration:52s;}
}

/* ============================================================
   GHOST WORDMARK \u2014 single fixed band
   One line of the name held on screen behind the content,
   scrolling horizontally. Fixed, so it is always present.

   Kept cheap by three things: it animates transform only, it
   is promoted to its own compositor layer, and paint is
   contained. The earlier stutter came mainly from the two
   full-viewport gradient blooms that were also fixed and
   animating \u2014 those stay off.
   ============================================================ */
.nz-ghost{
  position:fixed;
  left:0;
  right:0;
  top:38%;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  line-height:1;
  contain:strict;
  height:clamp(4.5rem,13vw,11rem);
}

.nz-ghost__run{
  display:inline-flex;
  white-space:nowrap;
  will-change:transform;
  backface-visibility:hidden;
  animation:nzGhostRun 70s linear infinite;
}
.nz-ghost__run span{
  font-family:var(--display);
  font-size:clamp(4.5rem,13vw,11rem);
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:rgba(243,237,228,.016);
  padding-right:.3em;
}
.nz-ghost__run span:nth-child(3n){color:rgba(231,197,124,.020);}

@keyframes nzGhostRun{
  from{transform:translate3d(0,0,0);}
  to  {transform:translate3d(-50%,0,0);}
}

/* Content sits above it */
body > header,
body > main,
body > footer{position:relative;z-index:1;}
body > header{z-index:60;}
/* Overlays stay fixed; set stacking only, never position */
body > .sp-panel{z-index:70;}
body > .nz-pre{z-index:9999;}

@media (prefers-reduced-motion:reduce){
  .nz-ghost__run{animation:none;}
}
@media (max-width:767px){
  .nz-ghost{top:42%;height:clamp(3rem,20vw,5.5rem);}
  .nz-ghost__run span{font-size:clamp(3rem,20vw,5.5rem);}
  .nz-ghost__run{animation-duration:52s;}
}

/* ============================================================
   MOBILE DRAWER \u2014 keep the close control visible
   The panel is z-index 70 and the header 60, so opening the
   drawer covered the burger. Its bars already animate into an
   X, but they were underneath the overlay. Header now sits
   above the panel so the same button closes it.
   ============================================================ */
body > header,
.sp-head{z-index:80;}

/* While open, the header chrome would double up against the
   overlay \u2014 strip it back to just the mark and the button. */
body.locked .sp-head{
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
body.locked .pill{opacity:0;pointer-events:none;transition:opacity .25s ease;}

/* Make the X unmistakable while open */
.sp-burger[aria-expanded="true"]{
  border:1px solid rgba(231,197,124,.4);
  border-radius:50%;
}
.sp-burger[aria-expanded="true"] span{background:var(--champ);}

/* The drawer starts below the header row */
.sp-panel{padding-top:6rem;}

/* ============================================================
   GHOST BUTTON + MAGNET
   .nz-magnet turns its label near-black on hover because a
   gold fill slides up behind it. The outlined button has no
   fill element, so that rule left the text black on black.
   Outlined buttons keep the champagne treatment instead.
   ============================================================ */
.btn--ghost.nz-magnet:hover,
.btn--ghost.nz-magnet:focus-visible{
  color:var(--champ);
  border-color:var(--champ);
  background:rgba(231,197,124,.06);
}
.btn--ghost.nz-magnet:hover .nz-magnet__label{color:var(--champ);}

/* Solid magnet buttons are unaffected \u2014 they do have a fill */
.nz-magnet--solid:hover .nz-magnet__label{color:var(--jet);}

/* ============================================================
   BRAND WORDMARK \u2014 two tone
   The older rule targeted .sp-brand span, which since the
   monogram was added also matches the wrapper around the whole
   wordmark \u2014 so both words went gold. Nadim is bone, Zidan is
   champagne, matching the preloader.
   ============================================================ */
.sp-brand__txt{color:var(--cream);}
.sp-brand__txt i{font-style:normal;color:var(--champ);}
/* Neutralise the broad rule for the wrapper only */
.sp-brand > span.sp-brand__txt{color:var(--cream);}

/* ------------------------------------------------------------
   Drop cap: carry the letter that follows in the same face.
   The 'A' was display type sitting straight against body type,
   which broke the word. The 's' now matches it \u2014 same font and
   colour, lowercase, sized to sit on the same baseline as the
   line it belongs to.
   ------------------------------------------------------------ */
.nz-drop__s{
  font-family:var(--display);
  font-size:1.5rem;
  line-height:1;
  color:var(--champ);
  letter-spacing:.005em;
  padding-right:.04em;
}
@media (max-width:767px){
  .nz-drop__s{font-size:1.28rem;}
}

/* ------------------------------------------------------------
   Drop cap: 'As' floats as one unit
   Previously the 'A' was ::first-letter and the 's' sat in the
   text flow, so the word split across two type sizes. Both
   letters now live in one floated span and the copy wraps
   around them. The plain 'As' is kept for screen readers.
   ------------------------------------------------------------ */
.nz-drop::first-letter{
  float:none;
  font-size:inherit;
  line-height:inherit;
  margin:0;
  color:inherit;
  font-family:inherit;
}
.nz-drop__s{all:unset;}

.nz-drop__cap{
  float:left;
  display:flex;
  align-items:baseline;
  font-family:var(--display);
  font-size:3.9rem;
  line-height:.78;
  color:var(--champ);
  margin:.10em .16em 0 0;
  letter-spacing:-.01em;
}
.nz-drop__cap i{
  font-style:normal;
  font-size:.34em;
  line-height:1;
  padding-left:.02em;
}

@media (max-width:767px){
  .nz-drop__cap{font-size:3rem;margin-right:.14em;}
}

/* ============================================================
   DISCLAIMER
   Sits above the footer on every page. Deliberately quiet:
   it has to be present and legible, not compete with the work.
   ============================================================ */
.nz-disclaimer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--line);
  background:rgba(20,17,16,.6);
  padding:1.5rem 0;
}
.nz-disclaimer__in{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gut);
  display:flex;
  align-items:flex-start;
  gap:1rem;
}
.nz-disclaimer__tag{
  flex:0 0 auto;
  font-family:var(--body);
  font-size:.56rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--champ);
  padding-top:.15rem;
}
.nz-disclaimer p{
  margin:0;
  font-family:var(--body);
  font-size:.72rem;
  line-height:1.65;
  color:var(--mute);
  max-width:88ch;
}
@media (max-width:767px){
  .nz-disclaimer{padding:1.15rem 0;}
  .nz-disclaimer__in{flex-direction:column;gap:.5rem;}
  .nz-disclaimer p{font-size:.68rem;}
}

/* ------------------------------------------------------------
   Disclaimer: single line, more prominent
   Was wrapping to two lines and reading as small print. Now a
   gold-bordered band, centred, on one line where it fits.
   ------------------------------------------------------------ */
.nz-disclaimer{
  border-top:1px solid rgba(231,197,124,.30);
  border-bottom:1px solid rgba(231,197,124,.30);
  background:linear-gradient(180deg,rgba(231,197,124,.055),rgba(231,197,124,.02));
  padding:1rem 0;
}
.nz-disclaimer__in{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  text-align:center;
}
.nz-disclaimer__tag{
  flex:0 0 auto;
  padding:5px 11px;
  border:1px solid rgba(231,197,124,.45);
  border-radius:999px;
  font-size:.55rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--champ);
  padding-top:5px;
}
.nz-disclaimer p{
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:none;
  font-size:.8rem;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.01em;
  color:#CFC5B9;
}
/* Only the NFA/DYOR opener carries the gold */
.nz-disclaimer p b{color:var(--champ);font-weight:700;letter-spacing:.06em;}

/* Below this width one line is not honest \u2014 let it wrap, centred */
@media (max-width:1100px){
  .nz-disclaimer p{white-space:normal;text-overflow:clip;}
}
@media (max-width:767px){
  .nz-disclaimer{padding:.9rem 0;}
  .nz-disclaimer__in{flex-direction:column;gap:.55rem;}
  .nz-disclaimer p{font-size:.72rem;}
}

/* ------------------------------------------------------------
   Wordmark alignment
   The monogram and the name were set independently, so the
   mark sat larger than the cap height beside it and the two
   did not share a baseline. Both now key off one size.
   ------------------------------------------------------------ */
.sp-brand{
  --mark:34px;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  line-height:1;
}
.sp-brand__mark{
  width:var(--mark);
  height:var(--mark);
  flex:0 0 var(--mark);
}
.sp-brand__txt{
  font-family:var(--display);
  font-size:1.18rem;
  line-height:1;
  letter-spacing:.085em;
  text-transform:uppercase;
  padding-top:.06em;      /* optical: caps sit high in Anton */
}
.sp-brand__txt i{padding-left:.12em;}

/* Preloader: same relationship, larger */
.nz-pre__mark{width:78px;height:78px;}
.nz-pre__name{
  font-size:clamp(1.1rem,3.4vw,1.5rem);
  letter-spacing:.26em;
  padding-left:.26em;
  line-height:1;
}

@media (max-width:767px){
  .sp-brand{--mark:28px;gap:.45rem;}
  .sp-brand__txt{font-size:1rem;letter-spacing:.07em;}
}
@media (max-width:380px){
  .sp-brand{--mark:25px;}
  .sp-brand__txt{font-size:.9rem;}
}

/* ------------------------------------------------------------
   Arabic press rows
   Arabic headlines need RTL flow and a face that renders the
   script properly \u2014 Anton has no Arabic glyphs, so the row
   falls back to a system Arabic stack.
   ------------------------------------------------------------ */
.sp-row.is-ar{direction:rtl;text-align:right;}
.sp-row.is-ar .sp-row__h,
.sp-row.is-ar .sp-row__pub{
  font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
  letter-spacing:0;
}
.sp-row.is-ar .sp-row__h{font-size:1.05rem;line-height:1.75;}
.sp-row.is-ar .sp-row__pub{font-size:.66rem;letter-spacing:.06em;}
/* Year and kind stay left-to-right inside the RTL row */
.sp-row.is-ar .sp-row__yr,
.sp-row.is-ar .sp-row__k{direction:ltr;unicode-bidi:isolate;}
@media (max-width:767px){
  .sp-row.is-ar .sp-row__h{font-size:.98rem;line-height:1.7;}
}

/* Category tag in the updates list */
.nz-note__cat{
  font-style:normal;
  color:var(--champ);
  letter-spacing:.16em;
}

/* ============================================================
   BITCOIN VISUALS
   Drawn as SVG rather than a pasted logo, so the weight and
   colour match the rest of the site. Three placements:
     1. a slowly turning glyph behind the statement diagram
     2. small marks separating items in the press marquee
     3. a watermark in the CTA field
   ============================================================ */

/* --- 1. Statement: large ghost glyph --- */
.nz-btc{
  position:absolute;
  right:-4%;
  top:50%;
  transform:translateY(-50%);
  width:min(30vw,300px);
  z-index:0;
  pointer-events:none;
  opacity:.5;
}
.nz-btc svg{width:100%;height:auto;display:block;overflow:visible}
.nz-btc__ring{
  fill:none;
  stroke:rgba(231,197,124,.16);
  stroke-width:1;
}
.nz-btc__dash{
  fill:none;
  stroke:rgba(231,197,124,.22);
  stroke-width:1;
  stroke-dasharray:3 9;
  transform-origin:50% 50%;
  animation:nzBtcSpin 58s linear infinite;
}
.nz-btc__glyph{
  fill:rgba(231,197,124,.10);
}
@keyframes nzBtcSpin{to{transform:rotate(360deg)}}

.nz-state{position:relative;overflow:hidden}
.nz-state__grid{position:relative;z-index:1}

/* --- 2. Marquee separators --- */
.sp-marqSet .nz-btc-dot{
  display:inline-flex;
  align-items:center;
  width:14px;
  height:14px;
  flex:0 0 auto;
  color:var(--rose);
  opacity:.85;
}
.sp-marqSet .nz-btc-dot svg{width:100%;height:100%;display:block}

/* --- 3. CTA watermark --- */
.nz-cta__btc{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(46vw,520px);
  z-index:1;
  pointer-events:none;
  opacity:.5;
}
.nz-cta__btc svg{width:100%;height:auto;display:block}
.nz-cta__btc .nz-btc__glyph{fill:rgba(231,197,124,.055)}
.nz-cta__btc .nz-btc__ring{stroke:rgba(231,197,124,.10)}

@media (max-width:959px){
  .nz-btc{right:-12%;width:min(46vw,240px);opacity:.35}
}
@media (max-width:767px){
  .nz-btc{display:none}
  .nz-cta__btc{width:70vw;opacity:.4}
}
@media (prefers-reduced-motion:reduce){
  .nz-btc__dash{animation:none}
}

/* ------------------------------------------------------------
   Bitcoin in Press & features
   Sits left, behind the list, opposite the statement glyph so
   the two do not stack on the same side of the page. Raised a
   little in opacity \u2014 the earlier ones were too faint to read.
   ------------------------------------------------------------ */
.nz-hasbtc{position:relative;overflow:hidden;}
.nz-hasbtc > .wrap{position:relative;z-index:1;}

.nz-btc--press{
  left:-6%;
  right:auto;
  top:52%;
  width:min(26vw,260px);
  opacity:.75;
}

/* The originals were barely visible \u2014 lift them */
.nz-btc__glyph{fill:rgba(231,197,124,.13);}
.nz-btc__ring{stroke:rgba(231,197,124,.22);}
.nz-btc__dash{stroke:rgba(231,197,124,.28);}
.nz-cta__btc .nz-btc__glyph{fill:rgba(231,197,124,.075);}
.nz-cta__btc .nz-btc__ring{stroke:rgba(231,197,124,.14);}

/* Marquee marks were too small to register */
.sp-marqSet .nz-btc-dot{width:17px;height:17px;opacity:1;color:var(--champ);}

@media (max-width:959px){
  .nz-btc--press{left:-14%;width:min(40vw,200px);opacity:.5;}
}
@media (max-width:767px){
  .nz-btc--press{display:none;}
}

/* ------------------------------------------------------------
   Bitcoin glyph centring
   The path occupies roughly x 21.7-66 and y 24.5-80.6 inside a
   100x100 viewBox, so its own centre is about (44, 52.5) rather
   than (50, 50). Nudged to sit concentric with the rings.
   ------------------------------------------------------------ */
.nz-btc__glyph{
  transform:translate(6.1px,-2.4px);
}
/* The small marquee marks use the same path, same correction */
.nz-btc-dot svg path{
  transform:translate(6.1px,-2.4px);
}

/* ============================================================
   HERO NAME \u2014 letter animation
   Letters rise individually through masks on load, a gold
   shimmer passes across the name every so often, and letters
   lift as the cursor passes. Transform and background-position
   only, so it stays cheap.
   ============================================================ */
.sp-name .nz-word{display:inline-block;white-space:nowrap;}
.sp-name .nz-word[data-w="1"]{display:block;}

.sp-name .nz-ltr{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  line-height:1;
  padding-bottom:.06em;   /* room for descenders inside the mask */
}
.sp-name .nz-ltr > i{
  display:inline-block;
  font-style:normal;
  transform:translateY(112%);
  transition:transform .9s cubic-bezier(.19,.8,.24,1);
  will-change:transform;
}
.sp-hero.ready .sp-name .nz-ltr > i{transform:none;}

/* Second line keeps the champagne colour */
.sp-name .nz-word[data-w="1"] .nz-ltr > i{color:var(--champ);}

}

@media (prefers-reduced-motion:reduce){
  .sp-name .nz-ltr > i{transform:none;transition:none;}
  .sp-hero.ready .sp-name{animation:none;background:none;}
}

/* Glow wave across the name.
   A background-clip shimmer cannot show over opaque letters, so
   the highlight travels letter to letter instead. text-shadow on
   small elements, which is cheap. */
@keyframes nzLtrGlow{
  0%, 55%, 100%{ text-shadow:none; }
  70%{ text-shadow:0 0 24px rgba(255,243,214,.55), 0 0 7px rgba(255,243,214,.30); }
  85%{ text-shadow:0 0 10px rgba(255,243,214,.18); }
}
.sp-hero.ready .sp-name .nz-ltr > i{
  animation:nzLtrGlow 2s ease-in-out infinite;
}
.sp-name .nz-ltr:nth-child(1) > i{animation-delay:0s}
.sp-name .nz-ltr:nth-child(2) > i{animation-delay:.045s}
.sp-name .nz-ltr:nth-child(3) > i{animation-delay:.09s}
.sp-name .nz-ltr:nth-child(4) > i{animation-delay:.135s}
.sp-name .nz-ltr:nth-child(5) > i{animation-delay:.18s}
.sp-name .nz-word[data-w="1"] .nz-ltr:nth-child(1) > i{animation-delay:.225s}
.sp-name .nz-word[data-w="1"] .nz-ltr:nth-child(2) > i{animation-delay:.27s}
.sp-name .nz-word[data-w="1"] .nz-ltr:nth-child(3) > i{animation-delay:.315s}
.sp-name .nz-word[data-w="1"] .nz-ltr:nth-child(4) > i{animation-delay:.36s}
.sp-name .nz-word[data-w="1"] .nz-ltr:nth-child(5) > i{animation-delay:.405s}

@media (prefers-reduced-motion:reduce){
  .sp-hero.ready .sp-name .nz-ltr > i{animation:none;text-shadow:none;}
}



/* ============================================================
   NZ MASK
   The portrait is clipped inside thick N and Z letterforms, so
   the photograph only shows through the monogram. Filled paths
   rather than strokes \u2014 strokes would show slivers of image.
   ============================================================ */
.nz-mask{
  position:relative;
  margin:0 auto;
  width:min(300px,80%);
}
.nz-mask__svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.55));
}
.nz-mask__img{
  filter:grayscale(78%) contrast(1.12) brightness(.95);
  transition:filter .9s ease;
}
.nz-mask:hover .nz-mask__img{filter:grayscale(25%) contrast(1.05) brightness(1);}

/* Letterform edges catch a thin gold line */
.nz-mask__outline rect{
  stroke:rgba(231,197,124,.55);
  stroke-width:6;
}

.nz-mask__cap{
  margin-top:1.1rem;
  text-align:center;
  font-family:var(--body);
  font-size:.58rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mute);
}

@media (max-width:899px){ .nz-mask{width:min(250px,66%);} }
@media (max-width:767px){ .nz-mask{width:min(210px,58%);margin-bottom:1.4rem;} }

/* Inline monogram: N and Z side by side, so the mark reads as
   a wide lockup rather than a tall stack. */
.nz-mask--inline{width:100%;max-width:none;}
@media (max-width:899px){ .nz-mask--inline{width:100%;} }
@media (max-width:767px){ .nz-mask--inline{width:100%;margin-bottom:1.2rem;} }

/* ============================================================
   ABOUT \u2014 three columns
   Text left, monogram centred, text and facts right. The mark
   is the axis of the section rather than something parked in
   a sidebar.
   ============================================================ */
.nz-about3{
  display:grid;
  gap:2.5rem;
  align-items:center;
}
.nz-about3__left p,
.nz-about3__right p{max-width:44ch;}
.nz-about3__mid{display:flex;justify-content:center;}

/* Reset the sidebar width \u2014 the mask now sizes to its column */
.nz-about3 .nz-mask{width:100%;max-width:300px;margin:0 auto;}

.nz-about3__right .sp-facts{margin-top:1.6rem;}
.nz-about3__right .nz-quote{margin-top:0;}


@media (min-width:1024px){
  .nz-about3{
    grid-template-columns:1fr minmax(240px,.85fr) 1fr;
    gap:3rem;
  }
}
@media (min-width:768px) and (max-width:1023px){
  /* Two columns with the mark spanning underneath */
  .nz-about3{grid-template-columns:1fr 1fr;gap:2.25rem;align-items:start;}
  .nz-about3__mid{grid-column:1 / -1;order:3;}
  .nz-about3 .nz-mask{max-width:240px;}
}
@media (max-width:767px){
  .nz-about3{gap:1.75rem;}
  .nz-about3__mid{order:3;}
  .nz-about3 .nz-mask{max-width:200px;}
  .nz-about3__left p,.nz-about3__right p{max-width:100%;}
}

/* ------------------------------------------------------------
   NZ mask: travelling gold outline
   A dim gold edge sits on the letterforms permanently, and a
   bright dash runs around the perimeter using stroke-dashoffset
   \u2014 the same technique as the panel border, but following the
   letter shapes.
   ------------------------------------------------------------ */
.nz-mask__edge{pointer-events:none;}

/* Permanent thin edge */
.nz-mask__base{
  fill:none;
  stroke:rgba(231,197,124,.35);
  stroke-width:2;
  stroke-linejoin:round;
}

/* The travelling dash */
.nz-mask__run{
  fill:none;
  stroke:var(--champ-hi,#F2D79A);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(231,197,124,.55));
  /* dash: a short lit run, a long dark gap */
  stroke-dasharray:150 1250;
  animation:nzMaskRun 6s linear infinite;
}
.nz-mask__run--z{animation-delay:-3s;}

@keyframes nzMaskRun{
  from{stroke-dashoffset:1400;}
  to{stroke-dashoffset:0;}
}

@media (prefers-reduced-motion:reduce){
  .nz-mask__run{animation:none;stroke-dasharray:none;opacity:.5;}
}

/* ------------------------------------------------------------
   About columns: equal height, both aligned to the top
   The grid was centring its items, so the shorter left column
   floated to the middle while the right began at the top. Both
   now start level and fill the same height.
   ------------------------------------------------------------ */
@media (min-width:1024px){
  .nz-about3{align-items:stretch;}
  .nz-about3__left,
  .nz-about3__right{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    height:100%;
  }
  /* The monogram stays vertically centred against them */
  .nz-about3__mid{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
  }
  /* Last element in each column takes the slack, so the two
     columns finish level rather than one running short. */
  .nz-about3__left > *:last-child{margin-bottom:auto;}
  .nz-about3__right > *:last-child{margin-top:auto;}
}

/* ============================================================
   WHAT I DO — EXPANDING PANELS
   Five layers behind the copy so no panel reads as empty:
   grid, light streak, oversized motif, ghost numeral, vignette.
   Replaces the four flat glass tiles.
   ============================================================ */
.nz-exp{display:flex;gap:10px;height:480px}

.nz-exp__p{
  position:relative;flex:1;border-radius:18px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);isolation:isolate;outline:none;
  background:linear-gradient(158deg,#221C18 0%,#171310 55%,#110E0C 100%);
  transition:flex .7s cubic-bezier(.19,.8,.24,1),border-color .5s;
}
.nz-exp__p.is-on{flex:3.4;border-color:rgba(231,197,124,.45)}
.nz-exp__p:focus-visible{border-color:var(--champ)}

/* 1. fine grid */
.nz-exp__p::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(243,237,228,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243,237,228,.035) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  opacity:.75;
}

/* 2. diagonal light streak */
.nz-exp__p::after{
  content:"";position:absolute;inset:-30% -60% auto -60%;height:150%;z-index:0;
  pointer-events:none;
  background:linear-gradient(112deg,
    transparent 34%,
    rgba(231,197,124,.16) 46%,
    rgba(255,243,214,.28) 50%,
    rgba(201,139,107,.14) 55%,
    transparent 66%);
  transform:translateY(-14%) rotate(-6deg);
  opacity:.55;
  transition:opacity .7s ease, transform 1.2s cubic-bezier(.19,.8,.24,1);
}
.nz-exp__p.is-on::after{opacity:1;transform:translateY(2%) rotate(-6deg)}

/* 3. oversized motif */
.nz-exp__art{
  position:absolute;z-index:0;pointer-events:none;
  right:-14%;top:50%;width:78%;transform:translateY(-50%);opacity:.5;
  transition:opacity .7s ease, right .9s cubic-bezier(.19,.8,.24,1),
             width .9s cubic-bezier(.19,.8,.24,1);
}
.nz-exp__p.is-on .nz-exp__art{opacity:.85;right:4%;width:38%}
.nz-exp__art svg{width:100%;height:auto;display:block;overflow:visible}
.nz-exp__art .stroke{fill:none;stroke:rgba(231,197,124,.30);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round}
.nz-exp__art .fill{fill:rgba(231,197,124,.07)}
.nz-exp__art .dash{fill:none;stroke:rgba(231,197,124,.22);stroke-width:1;
  stroke-dasharray:3 9;transform-origin:50% 50%;
  animation:nzArtSpin 46s linear infinite}
@keyframes nzArtSpin{to{transform:rotate(360deg)}}

/* 4. ghost numeral */
.nz-exp__ghost{
  position:absolute;z-index:0;pointer-events:none;
  left:-.06em;bottom:-.28em;
  font-family:var(--display);font-size:13rem;line-height:.75;
  color:rgba(243,237,228,.045);
  transition:color .6s ease, transform .9s cubic-bezier(.19,.8,.24,1);
}
.nz-exp__p.is-on .nz-exp__ghost{color:rgba(231,197,124,.075);transform:translateX(.04em)}

/* 5. vignette */
.nz-exp__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,17,16,.10) 0%, rgba(20,17,16,.55) 55%, rgba(17,14,12,.94) 100%),
    radial-gradient(90% 60% at 15% 100%, rgba(17,14,12,.85), transparent 70%);
}

/* content */
.nz-exp__in{position:relative;z-index:2;height:100%;padding:1.8rem 1.6rem;
  display:flex;flex-direction:column;justify-content:flex-end}
.nz-exp__num{position:absolute;top:1.4rem;left:1.6rem;font-family:var(--display);
  font-size:1rem;color:var(--champ);letter-spacing:.04em}
.nz-exp__t{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.5rem;line-height:1.02;margin:0;white-space:nowrap;
  transform-origin:left bottom;transition:.6s cubic-bezier(.19,.8,.24,1)}
.nz-exp__p:not(.is-on) .nz-exp__t{position:absolute;bottom:1.6rem;
  left:calc(1.6rem + 1.15em);transform:rotate(-90deg);color:#BDB3A8}
.nz-exp__p.is-on .nz-exp__t{color:var(--cream);font-size:2rem;
  white-space:normal;max-width:13ch}
.nz-exp__body{max-width:36ch;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease .2s,transform .6s cubic-bezier(.19,.8,.24,1) .2s}
.nz-exp__p.is-on .nz-exp__body{opacity:1;transform:none}
.nz-exp__body p{font-size:.92rem;line-height:1.72;color:#CFC5B9;margin:.9rem 0 1.2rem}
.nz-exp__cta{display:inline-flex;align-items:center;gap:.6rem;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--champ);
  border:1px solid rgba(231,197,124,.4);border-radius:999px;padding:9px 18px;
  transition:background .35s,color .35s}
.nz-exp__cta:hover{background:var(--champ);color:var(--jet)}
.nz-exp__cta i{font-style:normal;transition:transform .4s}
.nz-exp__cta:hover i{transform:translateX(4px)}

.nz-exp__rail{position:absolute;left:0;top:0;bottom:0;width:2px;z-index:3;opacity:0;
  background:linear-gradient(180deg,transparent,var(--champ),transparent);
  transition:opacity .5s;animation:nzRailPulse 3s ease-in-out infinite}
.nz-exp__p.is-on .nz-exp__rail{opacity:1}
@keyframes nzRailPulse{0%,100%{opacity:.35}50%{opacity:1}}

@media (max-width:900px){
  .nz-exp{flex-direction:column;height:auto}
  .nz-exp__p{flex:none;min-height:104px}
  .nz-exp__p.is-on{min-height:360px}
  .nz-exp__p:not(.is-on) .nz-exp__t{position:static;transform:none;color:var(--cream)}
  .nz-exp__ghost{font-size:8rem}
  .nz-exp__art{width:52%;right:-8%}
  .nz-exp__p.is-on .nz-exp__art{width:44%;right:2%}
}

@media (prefers-reduced-motion:reduce){
  .nz-exp__p,.nz-exp__art,.nz-exp__body,.nz-exp__t,.nz-exp__p::after{transition:none}
  .nz-exp__art .dash,.nz-exp__rail{animation:none}
}

/* ============================================================
   PRESS GLOBE
   The publication names form the sphere; nothing inside it but a
   Bitcoin mark and a hairline wireframe. Names come from the
   press CPT, so the globe grows as coverage is added.
   ============================================================ */
.nz-globeSec{overflow:hidden}

.nz-sph{
  position:relative;
  width:100%;
  max-width:620px;
  aspect-ratio:1;
  margin:1rem auto 0;
  touch-action:pan-y;
  cursor:grab;
}
.nz-sph:active{cursor:grabbing}

.nz-sph__glow{
  position:absolute;inset:14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,197,124,.07),transparent 68%);
}

/* wireframe, leaning on its axis */
.nz-sph__wire{position:absolute;inset:6%;pointer-events:none;transform:rotateZ(-16deg)}
.nz-sph__wire svg{width:100%;height:100%;display:block;overflow:visible}
.wire-out{fill:none;stroke:rgba(231,197,124,.26);stroke-width:.7}
.wire-lat{fill:none;stroke:rgba(231,197,124,.14);stroke-width:.6}
.wire-long{fill:none;stroke:rgba(231,197,124,.16);stroke-width:.6}
.wire-axis{stroke:rgba(231,197,124,.20);stroke-width:.7;stroke-dasharray:2 6}

.nz-sph__pin{fill:var(--champ)}
.nz-sph__pulse{fill:none;stroke:var(--champ);stroke-width:1;
  animation:nzPinPulse 3.2s ease-out infinite}
@keyframes nzPinPulse{0%{opacity:.85;r:2}70%{opacity:0;r:14}100%{opacity:0;r:14}}

/* the names */
.nz-sph__stage{position:absolute;inset:0;transform:rotateZ(-16deg)}
.nz-sph__i{
  position:absolute;left:50%;top:50%;white-space:nowrap;
  font-family:var(--body);
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#B5ABA0;will-change:transform,opacity;transition:color .3s;
}
.nz-sph__i.gold{color:var(--champ)}
.nz-sph__i.ar{font-family:"Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;
  letter-spacing:0;font-size:.9rem;text-transform:none}
.nz-sph__i:hover{color:var(--champ-hi)}
/* counter-rotate so the words stay level despite the lean */
.nz-sph__i > i{display:inline-block;font-style:normal;transform:rotateZ(16deg)}

/* bitcoin at the core */
.nz-sph__core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(90px,20%,150px);pointer-events:none;
}
.nz-sph__core svg{width:100%;height:auto;display:block;overflow:visible}
.btc-glyph{fill:rgba(231,197,124,.30);transform:translate(6.1px,-2.4px)}
.btc-ring{fill:none;stroke:rgba(231,197,124,.28);stroke-width:1.2}
.btc-dash{fill:none;stroke:rgba(231,197,124,.20);stroke-width:1;
  stroke-dasharray:2 7;transform-origin:50% 50%;
  animation:nzBtcSpin 40s linear infinite}
@keyframes nzBtcSpin{to{transform:rotate(-360deg)}}

.nz-sph__hint{
  text-align:center;margin:1.4rem 0 0;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,237,228,.3);
}

@media (max-width:767px){
  .nz-sph{max-width:340px}
  .nz-sph__i{font-size:.56rem;letter-spacing:.08em}
  .nz-sph__i.ar{font-size:.7rem}
}

@media (prefers-reduced-motion:reduce){
  .btc-dash,.nz-sph__pulse{animation:none}
  .nz-sph__hint{display:none}
}

/* ============================================================
   INTERIOR PAGES (v2)
   Shared shell for What I do, Gallery and Contact so they sit in
   the same design system as the homepage.
   ============================================================ */
.nz-page{position:relative;z-index:1}

/* --- page hero --- */
.nz-pageHero{padding:clamp(7rem,14vh,10rem) 0 clamp(2.5rem,6vw,4rem)}
.nz-pageHero__t{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.2rem,6vw,4.4rem);line-height:.98;letter-spacing:-.015em;
  margin:0 0 1.2rem;max-width:18ch;color:var(--cream);
}
.nz-pageHero__sub{
  margin:0;max-width:56ch;font-size:clamp(.95rem,1.9vw,1.1rem);
  line-height:1.75;color:var(--mute);
}

/* ============================================================
   WHAT I DO
   ============================================================ */
.nz-svc{border-top:1px solid var(--line)}
.nz-svc__row{
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem;
  padding:2.6rem .3rem;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .45s cubic-bezier(.2,.7,.3,1);
}
.nz-svc__row::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(231,197,124,.06),transparent 60%);
  transition:opacity .4s;
}
.nz-svc__row:hover::before{opacity:1}
.nz-svc__row:hover{padding-left:1.1rem}

.nz-svc__num{
  font-family:var(--display);font-size:1rem;color:var(--champ);
  padding-top:.4rem;
}
.nz-svc__main{min-width:0}
.nz-svc__main h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.05;margin:0 0 .7rem;
  color:var(--cream);
}
.nz-svc__lead{
  margin:0 0 .9rem;font-size:clamp(1rem,2vw,1.15rem);line-height:1.6;
  color:var(--champ);max-width:48ch;
}
.nz-svc__main p{margin:0 0 1.1rem;font-size:.94rem;line-height:1.78;
  color:var(--mute);max-width:62ch}
.nz-svc__list{
  list-style:none;margin:0 0 1.4rem;padding:0;
  display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  max-width:64ch;
}
.nz-svc__list li{
  position:relative;padding-left:1.2rem;font-size:.86rem;color:#BDB3A8;
}
.nz-svc__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--champ);opacity:.7;
}
.nz-svc__cta{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--champ);border-bottom:1px solid rgba(231,197,124,.35);
  padding-bottom:3px;transition:border-color .3s;
}
.nz-svc__cta:hover{border-color:var(--champ)}
.nz-svc__cta i{font-style:normal;transition:transform .35s}
.nz-svc__cta:hover i{transform:translateX(4px)}

/* ============================================================
   GALLERY
   ============================================================ */
.nz-grid{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  grid-auto-rows:220px;
}
.nz-grid__i{
  position:relative;margin:0;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);cursor:pointer;outline:none;
  transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.3,1);
}
.nz-grid__i.is-tall{grid-row:span 2}
.nz-grid__i img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(70%) contrast(1.06) brightness(.9);
  transition:filter .7s ease,transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.nz-grid__i:hover,.nz-grid__i:focus-visible{
  border-color:rgba(231,197,124,.45);transform:translateY(-4px);
}
.nz-grid__i:hover img,.nz-grid__i:focus-visible img{
  filter:grayscale(15%) brightness(1);transform:scale(1.05);
}
.nz-grid__veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(20,17,16,.75));
}
.nz-grid__no{
  position:absolute;left:12px;bottom:10px;font-family:var(--display);
  font-size:.85rem;color:var(--champ);opacity:.85;pointer-events:none;
}
.nz-empty{color:var(--mute);font-size:.9rem}

/* lightbox */
.nz-lb{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:rgba(12,10,9,.95);backdrop-filter:blur(8px);
}
.nz-lb[hidden]{display:none}
.nz-lb__stage{max-width:88vw;max-height:84vh}
.nz-lb__stage img{max-width:88vw;max-height:84vh;display:block;
  border:1px solid rgba(231,197,124,.25)}
.nz-lb__x{
  position:absolute;top:18px;right:20px;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--cream);font-size:1.5rem;line-height:1;cursor:pointer;
  transition:.3s;
}
.nz-lb__x:hover{border-color:var(--champ);color:var(--champ)}
.nz-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(20,17,16,.6);color:var(--cream);font-size:1.6rem;
  line-height:1;cursor:pointer;transition:.3s;
}
.nz-lb__nav:hover{border-color:var(--champ);color:var(--champ)}
.nz-lb__nav--prev{left:16px}
.nz-lb__nav--next{right:16px}
.nz-lb__count{
  position:absolute;bottom:20px;left:0;right:0;text-align:center;
  font-size:.62rem;letter-spacing:.2em;color:var(--mute);
}

/* ============================================================
   CONTACT
   ============================================================ */
.nz-contact{display:grid;gap:2.5rem}
@media(min-width:900px){
  .nz-contact{grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:start}
}
.nz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.nz-contact .fld{margin-bottom:1.1rem}
.nz-contact .fld label{
  display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin-bottom:7px;
}
.nz-contact .fld input,
.nz-contact .fld select,
.nz-contact .fld textarea{
  width:100%;background:rgba(243,237,228,.02);
  border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--cream);font-family:var(--body);
  font-size:16px;line-height:1.45;transition:border-color .3s,background .3s;
}
.nz-contact .fld textarea{resize:vertical;min-height:130px}
.nz-contact .fld input:focus,
.nz-contact .fld select:focus,
.nz-contact .fld textarea:focus{
  outline:none;border-color:rgba(231,197,124,.5);
  background:rgba(231,197,124,.04);
}
.nz-contact .btn{width:100%;text-align:center;margin-top:.4rem}

.nz-note{
  border:1px solid;border-radius:12px;padding:1rem 1.2rem;margin-bottom:1.4rem;
  font-size:.88rem;line-height:1.6;
}
.nz-note--ok{border-color:rgba(231,197,124,.45);background:rgba(231,197,124,.07);color:var(--cream)}
.nz-note--bad{border-color:rgba(201,139,107,.5);background:rgba(201,139,107,.08);color:var(--cream)}
.nz-note a{color:var(--champ);text-decoration:underline}

.nz-contact__side{
  border:1px solid var(--line);border-radius:20px;padding:1.8rem;
  background:linear-gradient(155deg,rgba(243,237,228,.04),rgba(243,237,228,.012));
}
.nz-contact__block{padding-bottom:1.1rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--line)}
.nz-contact__block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.nz-contact__k{
  margin:0 0 .35rem;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);
}
.nz-contact__v{
  margin:0;display:block;font-size:1rem;line-height:1.5;color:var(--cream);
  word-break:break-word;
}
a.nz-contact__v{color:var(--champ);transition:opacity .3s}
a.nz-contact__v:hover{opacity:.75}

/* ============================================================
   SHARED PAGE CTA
   ============================================================ */
.nz-cta2{text-align:center}
.nz-cta2 h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.05;margin:0 0 .8rem;
  color:var(--cream);
}
.nz-cta2 p{margin:0 auto 1.6rem;max-width:46ch;font-size:.95rem;
  line-height:1.7;color:var(--mute)}

/* footer, shared */
.sp-foot{border-top:1px solid var(--line);padding:2rem 0;position:relative;z-index:1}
.sp-foot__in{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between;font-size:.68rem;letter-spacing:.06em;
  color:var(--mute)}

@media(max-width:767px){
  .nz-pageHero{padding:6.5rem 0 2rem}
  .nz-svc__row{grid-template-columns:auto 1fr;gap:.9rem;padding:1.9rem .2rem}
  .nz-svc__row:hover{padding-left:.2rem}
  .nz-grid{grid-auto-rows:180px;gap:8px}
  .nz-lb__nav{width:40px;height:40px}
  .nz-contact__side{padding:1.3rem}
}

/* ============================================================
   ABOUT PAGE (v2)
   ============================================================ */
.nz-ab{display:grid;gap:2.5rem;align-items:start}
@media(min-width:900px){
  .nz-ab{grid-template-columns:minmax(240px,.8fr) 1.2fr;gap:3.5rem}
}
.nz-ab__mask .nz-mask{width:100%;max-width:280px;margin:0 auto}
.nz-ab__lede .lede{
  font-size:clamp(1.05rem,2.2vw,1.28rem);line-height:1.62;
  color:var(--cream);margin:0 0 1.4rem;max-width:52ch;
}
.nz-ab__lede p{font-size:.95rem;line-height:1.8;color:var(--mute);max-width:56ch}
.nz-ab__lede .sp-facts{margin-top:1.8rem}

.nz-ab__h{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.02;margin:0 0 1.8rem;
  color:var(--cream);max-width:18ch;
}
.nz-ab__cols{display:grid;gap:1.6rem}
@media(min-width:768px){.nz-ab__cols{grid-template-columns:1fr 1fr;gap:2.5rem}}
.nz-ab__cols p{margin:0;font-size:.95rem;line-height:1.8;color:var(--mute)}

.nz-ab__quote{margin:2.4rem 0;max-width:38ch}
.nz-ab__quote p{font-size:clamp(1.15rem,2.6vw,1.7rem)}

.nz-ab__pubs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.6rem}
.nz-ab__pub{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;transition:.35s;
}
.nz-ab__pub:hover{color:var(--champ);border-color:rgba(231,197,124,.45);
  background:rgba(231,197,124,.05)}

@media(max-width:899px){
  .nz-ab__mask .nz-mask{max-width:220px}
  .nz-ab__quote{margin:1.8rem 0;max-width:100%}
}

/* ============================================================
   PRESS PAGE + UPDATES ARCHIVE + SINGLE POST (v2)
   ============================================================ */

/* --- stats row --- */
.nz-prStats{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2.2rem;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.nz-prStats b{display:block;font-family:var(--display);font-size:2.4rem;
  line-height:1;color:var(--champ)}
.nz-prStats span{display:block;margin-top:.4rem;font-size:.56rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* --- filter row, shared by press and updates --- */
.nz-prFilter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.2rem}
.nz-prFilter__b{
  font-family:var(--body);font-size:.6rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);background:transparent;
  border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;cursor:pointer;transition:.35s;
}
.nz-prFilter__b:hover{color:var(--cream);border-color:rgba(231,197,124,.35)}
.nz-prFilter__b.is-on{background:var(--champ);color:var(--jet);
  border-color:var(--champ)}

/* --- year heading --- */
.nz-prYear{margin-bottom:2.6rem}
.nz-prYear__h{display:flex;align-items:center;gap:1rem;margin:0 0 .4rem;
  font-family:var(--display);font-weight:400;font-size:1.15rem;
  color:var(--champ);letter-spacing:.04em}
.nz-prYear__h::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(231,197,124,.35),transparent)}

/* --- press row --- */
.nz-prRow{
  display:grid;grid-template-columns:1fr auto;gap:.3rem 1.4rem;
  padding:1.5rem .3rem;border-bottom:1px solid var(--line);
  position:relative;transition:padding-left .45s cubic-bezier(.2,.7,.3,1);
}
.nz-prRow::before{content:"";position:absolute;inset:0;opacity:0;
  pointer-events:none;transition:opacity .4s;
  background:linear-gradient(90deg,rgba(231,197,124,.06),transparent 60%)}
a.nz-prRow:hover::before{opacity:1}
a.nz-prRow:hover{padding-left:1.1rem}
.nz-prRow__pub{grid-column:1;font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--champ)}
.nz-prRow__h{grid-column:1;font-size:clamp(1rem,2.2vw,1.35rem);
  line-height:1.4;color:var(--cream);transition:color .35s}
a.nz-prRow:hover .nz-prRow__h{color:var(--champ)}
.nz-prRow__meta{grid-column:2;grid-row:1 / span 2;display:flex;
  align-items:center;gap:.9rem;align-self:center}
.nz-prRow__meta em{font-style:normal;font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}
.nz-prRow__go{display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);color:var(--mute);
  transition:.4s}
.nz-prRow__go svg{width:14px;height:14px}
a.nz-prRow:hover .nz-prRow__go{color:var(--champ);
  border-color:rgba(231,197,124,.45);transform:translate(3px,-3px)}

/* Arabic rows */
.nz-prRow.is-ar{direction:rtl;text-align:right}
.nz-prRow.is-ar .nz-prRow__h,
.nz-prRow.is-ar .nz-prRow__pub{
  font-family:"Noto Naskh Arabic","Geeza Pro",Tahoma,sans-serif;
  letter-spacing:0}
.nz-prRow.is-ar .nz-prRow__h{line-height:1.75}
.nz-prRow.is-ar .nz-prRow__meta{direction:ltr}

.nz-prEmpty{color:var(--mute);font-size:.9rem;padding:2rem 0}

/* --- pagination --- */
.nz-pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
  margin-top:2.6rem}
.nz-pager .page-numbers{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 .6rem;
  border:1px solid var(--line);border-radius:999px;
  font-size:.7rem;color:var(--mute);transition:.35s}
.nz-pager .page-numbers:hover{color:var(--cream);
  border-color:rgba(231,197,124,.35)}
.nz-pager .page-numbers.current{background:var(--champ);color:var(--jet);
  border-color:var(--champ)}

/* --- single post --- */
.nz-post__head .eyeb a{color:var(--champ)}
.nz-post__meta{display:flex;align-items:center;gap:.8rem;margin:0;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute)}
.nz-post__meta i{width:3px;height:3px;border-radius:50%;
  background:var(--gold-dim,#8A6F34);display:block}
.nz-post__shot{margin:0 0 2.6rem;overflow:hidden;border-radius:18px;
  border:1px solid var(--line)}
.nz-post__shot img{width:100%;height:auto;display:block;
  filter:grayscale(45%) contrast(1.04) brightness(.94)}
.nz-post__body{max-width:68ch;margin:0 auto}
.nz-post__body p{font-size:1.03rem;line-height:1.85;color:#CFC5B9;
  margin:0 0 1.4rem}
.nz-post__body h2,.nz-post__body h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  color:var(--cream);margin:2.2rem 0 .9rem;line-height:1.1}
.nz-post__body h2{font-size:1.6rem}
.nz-post__body h3{font-size:1.25rem}
.nz-post__body a{color:var(--champ);text-decoration:underline}
.nz-post__body blockquote{margin:1.8rem 0;padding-left:1.4rem;
  border-left:2px solid var(--champ)}
.nz-post__body blockquote p{color:var(--cream);font-size:1.15rem}
.nz-post__body ul,.nz-post__body ol{color:#CFC5B9;line-height:1.8;
  padding-left:1.2rem;margin:0 0 1.4rem}
.nz-post__foot{max-width:68ch;margin:2.6rem auto 0;padding-top:1.6rem;
  border-top:1px solid var(--line)}
.nz-post__foot .nz-svc__cta i{margin-right:.2rem}

@media (max-width:767px){
  .nz-prStats{gap:1.6rem}
  .nz-prStats b{font-size:1.8rem}
  .nz-prRow{grid-template-columns:1fr;padding:1.2rem .2rem}
  .nz-prRow__meta{grid-column:1;grid-row:auto;margin-top:.5rem}
  a.nz-prRow:hover{padding-left:.2rem}
  .nz-post__body p{font-size:.97rem}
}

/* ============================================================
   STATEMENT STAGE
   Replaces the overlap diagram. The cut-out portrait stands in
   front; every graphic layer sits behind him so nothing crosses
   the photograph.
   ============================================================ */
.nz-stage{
  position:relative;
  width:100%;
  max-width:470px;
  margin:0 auto;
  aspect-ratio:1/1.18;
}
.nz-stage__l{position:absolute;inset:0;pointer-events:none}
.nz-stage__l svg{width:100%;height:100%;display:block;overflow:visible}

/* glow pool, breathing */
.nz-stage__glow{
  position:absolute;left:50%;top:46%;width:88%;aspect-ratio:1;z-index:0;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,197,124,.20),rgba(231,197,124,.05) 45%,transparent 68%);
  animation:nzStageBreathe 7s ease-in-out infinite;
}
@keyframes nzStageBreathe{
  0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
}

/* faint grid */
.nz-stage__grid{z-index:0;opacity:.5}
.nz-stage__grid line{stroke:rgba(243,237,228,.05);stroke-width:1}

/* dashed rings, opposite directions */
.nz-stage__outer{z-index:1}
.nz-stage__outer .o1{
  fill:none;stroke:rgba(231,197,124,.16);stroke-width:1.2;stroke-dasharray:3 10;
  transform-origin:200px 200px;animation:nzStageSpin 70s linear infinite;
}
.nz-stage__outer .o2{
  fill:none;stroke:rgba(201,139,107,.13);stroke-width:1;stroke-dasharray:2 14;
  transform-origin:200px 200px;animation:nzStageSpin 95s linear infinite reverse;
}
@keyframes nzStageSpin{to{transform:rotate(360deg)}}

/* the monogram */
.nz-stage__mark{z-index:2}
.mk-base{
  fill:none;stroke:rgba(231,197,124,.20);stroke-width:13;
  stroke-linejoin:round;stroke-linecap:round;
}
.mk-run{
  fill:none;stroke:url(#nzStageGold);stroke-width:13;
  stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 14px rgba(231,197,124,.55));
  stroke-dasharray:170 1000;
}
.mk-n{animation:nzStageRun 5.5s linear infinite}
.mk-z{animation:nzStageRun 5.5s linear infinite;animation-delay:-2.75s}
@keyframes nzStageRun{from{stroke-dashoffset:1170}to{stroke-dashoffset:0}}

.mk-spark{fill:#FFF3D6;filter:drop-shadow(0 0 8px rgba(255,243,214,.9))}

/* floor pool so he is grounded */
.nz-stage__floor{
  position:absolute;left:50%;bottom:2%;width:70%;height:8%;z-index:3;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(231,197,124,.22),transparent 70%);
  filter:blur(6px);
}

/* him, in front of everything */
.nz-stage__man{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  height:97%;width:auto;z-index:5;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.72)) contrast(1.05) saturate(.94);
}


@media (max-width:959px){
  .nz-stage{max-width:340px;margin-top:1.5rem}
}
@media (max-width:767px){
  .nz-stage{max-width:280px}
  .mk-base,.mk-run{stroke-width:10}
}

@media (prefers-reduced-motion:reduce){
  .nz-stage__glow,.nz-stage__outer .o1,.nz-stage__outer .o2,
  .mk-n,.mk-z,.mk-spark{animation:none}
}

/* ============================================================
   ABOUT PAGE \u2014 v3
   Same devices as the homepage: portrait against the mark,
   raised panels, photo mask.
   ============================================================ */
.nz-abHero{padding:clamp(6rem,12vh,8.5rem) 0 clamp(2rem,5vw,3.5rem)}
.nz-abHero__in{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){
  .nz-abHero__in{grid-template-columns:1.05fr .95fr;gap:3.5rem}
}
.nz-abHero__t{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.1rem,5.4vw,4rem);line-height:.98;letter-spacing:-.015em;
  margin:0 0 1.2rem;max-width:16ch;color:var(--cream);
}
.nz-abHero__sub{
  margin:0;max-width:50ch;font-size:clamp(.98rem,2vw,1.15rem);
  line-height:1.75;color:var(--mute);
}

/* facts as a row of blocks, not a list */
.nz-abFacts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;
  margin:2.2rem 0 0;padding-top:1.6rem;border-top:1px solid var(--line);
}
@media(min-width:520px){.nz-abFacts{grid-template-columns:repeat(4,1fr)}}
.nz-abFacts dt{
  font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.35rem;
}
.nz-abFacts dd{
  margin:0;font-size:.86rem;line-height:1.4;color:var(--cream);
}
.nz-abFacts b{color:var(--champ);font-weight:400;font-family:var(--display);
  font-size:1.05rem}

.nz-abHero__stage .nz-stage{max-width:430px}

/* story */
.nz-abH{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.02;margin:0 0 1.6rem;
  color:var(--cream);max-width:18ch;
}
.nz-abStory{display:grid;gap:2rem}
@media(min-width:860px){.nz-abStory{grid-template-columns:1fr 1fr;gap:3rem}}
.nz-abStory .lede{
  font-size:clamp(1.02rem,2.1vw,1.2rem);line-height:1.65;
  color:var(--cream);margin:0 0 1.2rem;
}
.nz-abStory p{margin:0 0 1.2rem;font-size:.95rem;line-height:1.82;color:var(--mute)}
.nz-abQuote{margin:2.2rem 0 0;max-width:40ch}
.nz-abQuote p{font-size:clamp(1.15rem,2.6vw,1.75rem)}

/* mask + closing */
.nz-abSplit{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){
  .nz-abSplit{grid-template-columns:minmax(220px,.75fr) 1.25fr;gap:3.5rem}
}
.nz-abSplit__mask .nz-mask{width:100%;max-width:270px;margin:0 auto}
.nz-abSplit__copy p{margin:0 0 1.2rem;font-size:.95rem;line-height:1.82;
  color:var(--mute);max-width:56ch}
.nz-abSplit__k{
  margin:1.8rem 0 .8rem !important;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--champ);
}

@media(max-width:959px){
  .nz-abHero{padding-top:5.5rem}
  .nz-abHero__stage .nz-stage{max-width:300px}
  .nz-abSplit__mask .nz-mask{max-width:210px}
}

/* ============================================================
   PAGE CTA \u2014 rebuilt
   The heading inherited a max-width from the section rules with
   no auto margins, so text-align:center centred the text inside
   a narrow box pinned left. Hence heading left, body centred.
   ============================================================ */
.nz-cta2{
  text-align:center;
  padding:clamp(1rem,4vw,2.5rem) 0;
  display:grid;
  justify-items:center;
  gap:0;
}
.nz-cta2 .eyeb{
  justify-content:center;
  margin-bottom:1rem;
}
.nz-cta2 .eyeb::after{display:none}
.nz-cta2 h2{
  max-width:20ch !important;
  margin:0 auto .9rem !important;
  text-align:center;
  font-size:clamp(1.9rem,4.6vw,3rem);
  line-height:1.02;
}
.nz-cta2 p{
  max-width:44ch;
  margin:0 auto 1.9rem !important;
  text-align:center;
  font-size:.98rem;
  line-height:1.7;
  color:var(--mute);
}

/* hairline above the button, so the block has structure */
.nz-cta2__rule{
  width:64px;height:1px;margin:0 auto 1.9rem;
  background:linear-gradient(90deg,transparent,var(--champ),transparent);
}

.nz-cta2__row{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;align-items:center;
}
.nz-cta2 .btn{margin:0}
.nz-cta2__alt{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .3s,border-color .3s;
}
.nz-cta2__alt:hover{color:var(--champ);border-color:rgba(231,197,124,.45)}

/* ============================================================
   WHAT I DO \u2014 page
   Alternating raised panels, each with its motif and ghost
   numeral, so the page has the same weight as the homepage.
   ============================================================ */
.nz-widHero{padding:clamp(6rem,12vh,8.5rem) 0 clamp(2rem,5vw,3rem)}
.nz-widHero__t{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:.95;letter-spacing:-.015em;
  margin:0 0 1.2rem;color:var(--cream);
}
.nz-widHero__t span{color:var(--champ)}
.nz-widHero__sub{margin:0;max-width:58ch;font-size:clamp(.98rem,2vw,1.12rem);
  line-height:1.75;color:var(--mute)}

.nz-widStats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;
  margin-top:2.4rem;padding-top:1.8rem;border-top:1px solid var(--line);
}
@media(min-width:640px){.nz-widStats{grid-template-columns:repeat(4,1fr)}}
.nz-widStats b{display:block;font-family:var(--display);font-size:2.2rem;
  line-height:1;color:var(--champ)}
.nz-widStats span{display:block;margin-top:.45rem;font-size:.55rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* service panels */
.nz-widSec{padding-top:1.6rem;padding-bottom:1.6rem}
.nz-wid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){
  .nz-wid{grid-template-columns:.8fr 1.2fr;gap:3rem}
  .nz-wid.is-flip .nz-wid__art{order:2}
  .nz-wid.is-flip .nz-wid__copy{order:1}
}

.nz-wid__art{position:relative;display:grid;place-items:center;min-height:200px}
.nz-wid__art svg{width:min(210px,64%);height:auto;display:block;overflow:visible;
  position:relative;z-index:1}
.nz-wid__art .stroke{fill:none;stroke:rgba(231,197,124,.42);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.nz-wid__art .fill{fill:rgba(231,197,124,.09)}
.nz-wid__art .dash{fill:none;stroke:rgba(231,197,124,.24);stroke-width:1;
  stroke-dasharray:3 9;transform-origin:50% 50%;
  animation:nzWidSpin 52s linear infinite}
@keyframes nzWidSpin{to{transform:rotate(360deg)}}
.nz-wid__ghost{
  position:absolute;z-index:0;font-family:var(--display);
  font-size:clamp(7rem,16vw,11rem);line-height:1;
  color:rgba(243,237,228,.045);pointer-events:none;
}

.nz-wid__n{
  margin:0 0 .5rem;font-family:var(--display);font-size:.9rem;
  letter-spacing:.06em;color:var(--champ);
}
.nz-wid__copy h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.5rem);line-height:1.04;margin:0 0 .8rem;
  color:var(--cream);
}
.nz-wid__lead{
  margin:0 0 1rem;font-size:clamp(1rem,2vw,1.15rem);line-height:1.6;
  color:var(--champ);max-width:46ch;
}
.nz-wid__copy > p{margin:0 0 1.3rem;font-size:.94rem;line-height:1.8;
  color:var(--mute);max-width:60ch}
.nz-wid__list{
  list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:60ch;
}
.nz-wid__list li{position:relative;padding-left:1.2rem;font-size:.85rem;
  color:#BDB3A8}
.nz-wid__list li::before{content:"";position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--champ);opacity:.75}

/* how it works */
.nz-steps3{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:820px){.nz-steps3{grid-template-columns:repeat(3,1fr)}}
.nz-step3{
  border:1px solid var(--line);border-radius:18px;padding:1.8rem 1.5rem;
  background:linear-gradient(155deg,rgba(243,237,228,.045),rgba(243,237,228,.012));
  transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.3,1);
}
.nz-step3:hover{border-color:rgba(231,197,124,.4);transform:translateY(-4px)}
.nz-step3__n{display:block;font-family:var(--display);font-size:1.6rem;
  color:var(--champ);margin-bottom:.7rem;line-height:1}
.nz-step3 h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.15rem;margin:0 0 .5rem;color:var(--cream)}
.nz-step3 p{margin:0;font-size:.88rem;line-height:1.7;color:var(--mute)}

@media(max-width:899px){
  .nz-widSec{padding-top:1rem;padding-bottom:1rem}
  .nz-wid__art{min-height:150px}
  .nz-wid__art svg{width:min(150px,46%)}
}
@media(prefers-reduced-motion:reduce){.nz-wid__art .dash{animation:none}}

/* ============================================================
   SINGLE UPDATE \u2014 v2
   ============================================================ */
/* reading progress */
.nz-prog{position:fixed;left:0;top:0;right:0;height:2px;z-index:75;
  background:rgba(243,237,228,.06);pointer-events:none}
.nz-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--rose),var(--champ));will-change:transform}

/* full-bleed hero */
.nz-sgHero{position:relative;padding:clamp(8rem,20vh,13rem) 0 clamp(2.5rem,6vw,4rem);
  overflow:hidden;isolation:isolate}
.nz-sgHero__bg{position:absolute;inset:0;z-index:-1}
.nz-sgHero__bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(55%) contrast(1.05) brightness(.5);
  transform:scale(1.04)}
.nz-sgHero__veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,17,16,.55) 0%,rgba(20,17,16,.82) 55%,var(--jet) 100%)}
.nz-sgHero__in{position:relative}
.nz-sgHero__crumb{margin:0 0 1.1rem;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);display:flex;gap:.6rem;align-items:center}
.nz-sgHero__crumb a{color:var(--champ)}
.nz-sgHero__crumb i{font-style:normal;opacity:.5}
.nz-sgHero__t{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,5.4vw,4rem);line-height:1;letter-spacing:-.015em;
  margin:0 0 1.2rem;max-width:20ch;color:var(--cream);
  text-shadow:0 4px 30px rgba(0,0,0,.6);
}
.nz-sgHero__meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.nz-sgHero__meta i{width:3px;height:3px;border-radius:50%;
  background:var(--champ);display:block;opacity:.7}

/* body + share rail */
.nz-sgWrap{display:grid;gap:2rem;padding-top:clamp(2rem,5vw,3.5rem)}
@media(min-width:1000px){
  .nz-sgWrap{grid-template-columns:64px minmax(0,1fr);gap:3rem;
    max-width:calc(68ch + 64px + 3rem)}
}
.nz-sgShare{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
@media(min-width:1000px){
  .nz-sgShare{position:sticky;top:110px;align-self:start;
    flex-direction:column;align-items:center;gap:.5rem;height:max-content}
}
.nz-sgShare__k{font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.2rem}
.nz-sgShare a,.nz-sgShare__copy{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--mute);background:transparent;
  cursor:pointer;transition:.35s}
.nz-sgShare a svg,.nz-sgShare__copy svg{width:15px;height:15px}
.nz-sgShare a:hover,.nz-sgShare__copy:hover{color:var(--champ);
  border-color:rgba(231,197,124,.45);transform:translateY(-2px)}
.nz-sgShare__copy.is-done{color:var(--jet);background:var(--champ);
  border-color:var(--champ)}

.nz-sgBody{max-width:68ch}
.nz-sgBody > p:first-of-type{font-size:1.12rem;line-height:1.75;color:var(--cream)}
.nz-sgBody p{font-size:1.02rem;line-height:1.85;color:#CFC5B9;margin:0 0 1.4rem}
.nz-sgBody h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,3vw,1.9rem);line-height:1.1;color:var(--cream);
  margin:2.6rem 0 1rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.nz-sgBody h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.2rem;color:var(--cream);margin:1.8rem 0 .7rem}
.nz-sgBody ul,.nz-sgBody ol{margin:0 0 1.5rem;padding-left:1.3rem;color:#CFC5B9}
.nz-sgBody li{margin-bottom:.6rem;line-height:1.75;font-size:.98rem}
.nz-sgBody li::marker{color:var(--champ)}
.nz-sgBody strong{color:var(--cream)}
.nz-sgBody a{color:var(--champ);text-decoration:underline;text-underline-offset:3px}
.nz-sgBody blockquote{
  margin:2rem 0;padding:1.4rem 1.6rem;border-left:2px solid var(--champ);
  background:linear-gradient(90deg,rgba(231,197,124,.06),transparent);
  border-radius:0 12px 12px 0}
.nz-sgBody blockquote p{margin:0;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:clamp(1.05rem,2.4vw,1.4rem);
  line-height:1.3;color:var(--cream)}

.nz-sgTags{display:flex;flex-wrap:wrap;gap:.45rem;margin:2.2rem 0 0;
  padding-top:1.6rem;border-top:1px solid var(--line)}

/* author */
.nz-sgAuthor{display:grid;gap:1.2rem;margin-top:2rem;padding:1.6rem;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(155deg,rgba(243,237,228,.045),rgba(243,237,228,.012))}
@media(min-width:560px){.nz-sgAuthor{grid-template-columns:88px 1fr;gap:1.4rem;
  align-items:start}}
.nz-sgAuthor__pic{display:block;width:88px;height:88px;border-radius:50%;
  overflow:hidden;border:1px solid rgba(231,197,124,.35)}
.nz-sgAuthor__pic img{width:100%;height:100%;object-fit:cover;
  object-position:56% 18%;filter:grayscale(55%)}
.nz-sgAuthor__k{margin:0 0 .2rem;font-size:.52rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute)}
.nz-sgAuthor__n{margin:0 0 .5rem;font-family:var(--display);font-size:1.15rem;
  text-transform:uppercase;color:var(--cream)}
.nz-sgAuthor__b{margin:0 0 .9rem;font-size:.86rem;line-height:1.7;color:var(--mute)}

@media(max-width:999px){
  .nz-sgShare{justify-content:flex-start;padding-bottom:.6rem;
    border-bottom:1px solid var(--line)}
  .nz-sgShare__k{margin:0 .3rem 0 0}
}

/* ------------------------------------------------------------
   About \u2014 the vision
   Replaces the facts list. Set as a statement rather than a
   data panel, since it is the closing thought of the section.
   ------------------------------------------------------------ */
.nz-vision{
  margin-top:1.8rem;padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.nz-vision__k{
  margin:0 0 .7rem !important;
  font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champ);
}
.nz-vision__p{
  margin:0 !important;
  font-size:clamp(.96rem,1.9vw,1.08rem);
  line-height:1.72;color:var(--cream);max-width:46ch;
}

/* Supporting second line inside a display heading. Set smaller
   and in champagne so the two lines read as statement plus
   qualifier rather than one long headline. */
.nz-h2sub{
  display:block;
  margin-top:.35em;
  font-size:.52em;
  line-height:1.2;
  color:var(--champ);
  letter-spacing:0;
}
@media (max-width:767px){ .nz-h2sub{font-size:.58em} }

/* ============================================================
   WHAT I DO PANELS \u2014 mobile fix
   The light streak is sized for a 480px desktop panel
   (height:150%, inset:-30% -60%). On a 104px closed strip it
   covered the whole panel at .55 opacity and washed the copy
   out, which read as an empty box. Tamed below 900px, and the
   closed panels now carry a visible tap affordance.
   ============================================================ */
@media (max-width:900px){

  /* 1. streak scaled to the actual panel height */
  .nz-exp__p::after{
    inset:0;
    height:100%;
    opacity:.30;
    transform:none;
    background:linear-gradient(112deg,
      transparent 30%,
      rgba(231,197,124,.14) 48%,
      rgba(255,243,214,.20) 52%,
      transparent 70%);
  }
  .nz-exp__p.is-on::after{opacity:.5;transform:none}

  /* 2. grid was masked to the top only, which on a short panel
     left it invisible */
  .nz-exp__p::before{
    -webkit-mask-image:none;
            mask-image:none;
    opacity:.4;
    background-size:26px 26px;
  }

  /* 3. closed panel: title readable, plus a plus sign so it is
     obvious the row opens */
  .nz-exp__p{min-height:74px;border-radius:14px}
  .nz-exp__in{padding:1.1rem 1.1rem;justify-content:center}
  .nz-exp__p:not(.is-on) .nz-exp__t{
    position:static;transform:none;color:var(--cream);
    font-size:1.15rem;white-space:normal;max-width:16ch;
  }
  .nz-exp__num{top:auto;bottom:1.1rem;left:1.1rem;font-size:.8rem}
  .nz-exp__p::marker{content:none}
  .nz-exp__p .nz-exp__plus{
    position:absolute;right:1.1rem;top:1.1rem;z-index:4;
    width:26px;height:26px;display:grid;place-items:center;
    border:1px solid rgba(231,197,124,.35);border-radius:50%;
    color:var(--champ);font-size:.9rem;line-height:1;
    transition:transform .4s ease,background .3s;
  }
  .nz-exp__p.is-on .nz-exp__plus{
    transform:rotate(45deg);background:rgba(231,197,124,.12);
  }

  /* 4. open panel sizes to its content rather than a fixed 360 */
  .nz-exp__p.is-on{min-height:0}
  .nz-exp__p.is-on .nz-exp__in{padding:1.3rem 1.1rem 1.5rem}
  .nz-exp__p.is-on .nz-exp__t{font-size:1.45rem;max-width:18ch}
  .nz-exp__body{max-width:100%}
  .nz-exp__body p{font-size:.9rem;margin:.7rem 0 1rem}

  /* 5. motif kept well clear of the text */
  .nz-exp__art{width:38%;right:-6%;opacity:.35}
  .nz-exp__p.is-on .nz-exp__art{width:32%;right:-2%;opacity:.5}
  .nz-exp__ghost{font-size:5.5rem;bottom:-.18em}
}

/* ============================================================
   WHAT I DO PANELS \u2014 mobile: all four open
   No accordion on small screens. Every panel shows its copy at
   once, so nothing depends on hover or a tap. The is-on class is
   ignored below 900px.
   ============================================================ */
@media (max-width:900px){

  .nz-exp{flex-direction:column;height:auto;gap:12px}

  /* every panel behaves as open, is-on or not */
  .nz-exp__p,
  .nz-exp__p.is-on{
    flex:none;
    min-height:0;
    border-radius:16px;
    border-color:rgba(231,197,124,.28);
  }

  /* the streak is sized for a 480px desktop panel; scale it down
     or it covers a short panel entirely and washes out the copy */
  .nz-exp__p::after,
  .nz-exp__p.is-on::after{
    inset:0;height:100%;transform:none;opacity:.34;
    background:linear-gradient(112deg,
      transparent 28%,
      rgba(231,197,124,.14) 48%,
      rgba(255,243,214,.20) 53%,
      transparent 72%);
  }

  /* the grid was masked to the top 78%, invisible on a short panel */
  .nz-exp__p::before{
    -webkit-mask-image:none;mask-image:none;
    opacity:.4;background-size:26px 26px;
  }

  .nz-exp__in{padding:1.4rem 1.2rem 1.6rem;justify-content:flex-start}

  /* titles horizontal and full size, never rotated */
  .nz-exp__p .nz-exp__t,
  .nz-exp__p:not(.is-on) .nz-exp__t,
  .nz-exp__p.is-on .nz-exp__t{
    position:static;transform:none;
    color:var(--cream);
    font-size:1.42rem;line-height:1.05;
    white-space:normal;max-width:18ch;
  }

  /* copy always visible */
  .nz-exp__body,
  .nz-exp__p.is-on .nz-exp__body{
    opacity:1;transform:none;max-width:100%;
  }
  .nz-exp__body p{font-size:.9rem;line-height:1.7;margin:.8rem 0 1.1rem}

  /* the number was absolutely positioned and colliding with the
     title; as a block in normal flow it cannot overlap */
  .nz-exp__num{
    position:static;
    display:block;
    margin:0 0 .55rem;
    font-size:.85rem;
    line-height:1;
  }

  /* rail on every panel, not only the open one */
  .nz-exp__rail,
  .nz-exp__p.is-on .nz-exp__rail{opacity:1}

  /* motif kept clear of the text */
  .nz-exp__art,
  .nz-exp__p.is-on .nz-exp__art{
    width:34%;right:-4%;opacity:.4;
  }
  .nz-exp__ghost,
  .nz-exp__p.is-on .nz-exp__ghost{
    font-size:5.5rem;bottom:-.2em;color:rgba(231,197,124,.06);
  }

  .nz-exp__p{cursor:default}
}

/* Homepage contact form: same treatment as /contact/, plus the
   topic select the old placeholder form never had. */
.nz-hform select{
  width:100%;background:rgba(243,237,228,.02);
  border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;color:var(--cream);font-family:var(--body);
  font-size:16px;line-height:1.45;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--champ) 50%),
                   linear-gradient(135deg,var(--champ) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  transition:border-color .3s;
}
.nz-hform select:focus{outline:none;border-color:rgba(231,197,124,.5)}
.nz-hform select option{background:#1E1917;color:var(--cream)}
.nz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Homepage press list shows the first eight; this is the route to
   the full library, which was previously only reachable from the
   nav. Hidden while a filter is active, since the count then
   refers to the filtered set. */
.sp-press__more{display:flex;justify-content:center;margin-top:1.8rem}
.sp-press__more .btn{display:inline-flex;align-items:center;gap:.6rem}
.sp-press__more i{font-style:normal;transition:transform .35s}
.sp-press__more .btn:hover i{transform:translateX(4px)}

/* ============================================================
   ABOUT PORTRAIT \u2014 NZ over the full photo
   The photograph is no longer clipped into the letterforms; it
   is shown whole and the mark is drawn on top, so his face is
   always readable at any size.
   ============================================================ */
.nz-frame{
  position:relative;
  margin:0 auto;
  width:100%;
  max-width:340px;
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:4px;
  border:1px solid rgba(231,197,124,.22);
}
.nz-frame__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 16%;
  filter:grayscale(58%) contrast(1.06) brightness(.92);
  transition:filter .9s ease, transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.nz-frame:hover .nz-frame__img{
  filter:grayscale(22%) contrast(1.03) brightness(1);
  transform:scale(1.03);
}

/* keeps the photo in the palette and the gold legible over it */
.nz-frame__wash{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(200deg,rgba(231,197,124,.13),transparent 48%),
    linear-gradient(0deg,rgba(20,17,16,.62),transparent 58%);
}

.nz-frame__mark{position:absolute;inset:0;z-index:2;pointer-events:none;display:block}
.nz-frame__mark svg{width:100%;height:100%;display:block;overflow:visible}

.nz-frame__base{
  fill:none;stroke:rgba(231,197,124,.45);stroke-width:5;
  stroke-linejoin:round;stroke-linecap:round;
}
.nz-frame__run{
  fill:none;stroke:var(--champ-hi,#F2D79A);stroke-width:5;
  stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(231,197,124,.8));
  stroke-dasharray:140 1200;
  animation:nzFrameRun 5.5s linear infinite;
}
.nz-frame__run--z{animation-delay:-2.75s}
@keyframes nzFrameRun{from{stroke-dashoffset:1340}to{stroke-dashoffset:0}}

.nz-frame__cap{
  position:absolute;left:0;right:0;bottom:.8rem;z-index:3;
  text-align:center;font-size:.55rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--mute);
}

@media (max-width:899px){
  .nz-frame{max-width:280px}
  .nz-frame__base,.nz-frame__run{stroke-width:4}
}
@media (prefers-reduced-motion:reduce){
  .nz-frame__run{animation:none}
  .nz-frame:hover .nz-frame__img{transform:none}
}

/* The vision now opens the column rather than closing it, so the
   separating rule above it is dropped and the facts below take
   their own. */
.nz-vision--lead{margin-top:0;padding-top:0;border-top:0}
.nz-about3__right .sp-facts{margin-top:1.8rem;padding-top:1.6rem;
  border-top:1px solid var(--line)}

/* ------------------------------------------------------------
   The vision \u2014 set like the pull-quote it replaced
   The block that was removed opened with a large Anton line and
   ran into body copy. This matches that, so the column keeps the
   same shape.
   ------------------------------------------------------------ */
.nz-vision--lead .nz-vision__k{
  display:block;
  margin:0 0 .9rem !important;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.25rem,2.8vw,1.85rem);
  line-height:1.2;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:var(--cream);
  padding-left:1.6rem;
  border-left:2px solid var(--champ);
}
.nz-vision--lead .nz-vision__p{
  font-family:var(--body);
  font-size:.95rem;
  line-height:1.8;
  color:var(--mute);
  max-width:46ch;
}

/* ============================================================
   WHAT I DO PAGE \u2014 mobile
   The art column was a 150px block holding a ghost numeral set at
   7rem-plus and absolutely positioned, so it overflowed into the
   copy and left a tall empty gap above each card. On small screens
   the motif becomes a compact badge on the same line as the number
   and the ghost is dropped.
   ============================================================ */
@media (max-width:899px){

  .nz-widSec > .wrap{padding-left:1.15rem;padding-right:1.15rem}
  .nz-wid{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:'art head' 'copy copy';
    align-items:center;
    column-gap:.9rem;
    row-gap:1rem;
  }

  /* motif as a small badge, not a column */
  .nz-wid__art{
    grid-area:art;
    min-height:0;
    width:52px;height:52px;
    display:grid;place-items:center;
    border:1px solid rgba(231,197,124,.28);
    border-radius:50%;
    background:rgba(231,197,124,.05);
    flex:0 0 auto;
  }
  .nz-wid__art svg{width:26px;height:26px}
  .nz-wid__ghost{display:none}   /* was overflowing into the copy */

  /* number and title share the top row beside the badge */
  .nz-wid__copy{grid-area:copy;display:contents}
  .nz-wid__n{
    grid-area:head;
    align-self:end;
    margin:0 !important;
    font-size:.72rem;
    letter-spacing:.14em;
  }
  .nz-wid__copy h2{
    grid-area:head;
    align-self:start;
    margin:1.1rem 0 0 !important;
    font-size:1.32rem;
    line-height:1.08;
  }

  /* everything else stacks full width underneath */
  .nz-wid__lead,
  .nz-wid__copy > p,
  .nz-wid__list,
  .nz-wid__copy .nz-svc__cta{grid-column:1 / -1}
  .nz-wid__lead{font-size:1rem;line-height:1.55;margin:.2rem 0 .8rem;max-width:100%}
  .nz-wid__copy > p{font-size:.9rem;line-height:1.75;margin:0 0 1rem;max-width:100%}
  .nz-wid__list{
    grid-template-columns:1fr;
    gap:.4rem;margin:0 0 1.1rem;max-width:100%;
  }
  .nz-wid__list li{font-size:.83rem}
}

@media (max-width:380px){
  .nz-wid__art{width:44px;height:44px}
  .nz-wid__art svg{width:22px;height:22px}
  .nz-wid__copy h2{font-size:1.18rem}
}

/* ============================================================
   WHAT I DO PAGE \u2014 mobile cards
   Matches the homepage panels: motif bleeding off the right, a
   ghost numeral behind, number above the title, copy beneath.
   The desktop alternating layout is untouched.
   ============================================================ */
@media (max-width:899px){

  .nz-widSec{padding-top:.6rem;padding-bottom:.6rem}
  .nz-widSec > .wrap{
    padding:1.5rem 1.2rem 1.7rem;
    border-radius:16px;
    overflow:hidden;
    position:relative;
  }

  /* faint grid, as on the homepage panels */
  .nz-widSec > .wrap::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(243,237,228,.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(243,237,228,.032) 1px, transparent 1px);
    background-size:26px 26px;
    opacity:.5;
  }

  .nz-wid{
    display:block;
    position:relative;
    z-index:1;
  }

  /* motif bleeds off the right edge, low opacity */
  .nz-wid__art{
    position:absolute;
    top:50%;right:-14%;
    transform:translateY(-50%);
    width:44%;min-height:0;
    display:block;
    opacity:.4;
    z-index:0;
    pointer-events:none;
  }
  .nz-wid__art svg{width:100%;height:auto}

  /* ghost numeral behind, bottom-left, kept inside the card */
  .nz-wid__ghost{
    display:block;
    position:absolute;
    left:-.04em;bottom:-.22em;
    font-size:5.5rem;line-height:.8;
    color:rgba(231,197,124,.06);
    z-index:0;pointer-events:none;
  }

  .nz-wid__copy{position:relative;z-index:2;max-width:88%}
  .nz-wid__n{margin:0 0 .5rem !important;font-size:.85rem}
  .nz-wid__copy h2{font-size:1.42rem;line-height:1.05;margin:0 0 .7rem;max-width:16ch}
  .nz-wid__lead{font-size:.98rem;line-height:1.6;margin:0 0 .8rem;max-width:100%}
  .nz-wid__copy > p{font-size:.89rem;line-height:1.75;margin:0 0 1rem;max-width:100%}
  .nz-wid__list{grid-template-columns:1fr;gap:.4rem;margin:0 0 1.2rem;max-width:100%}
  .nz-wid__list li{font-size:.83rem}
}

@media (max-width:380px){
  .nz-wid__copy{max-width:100%}
  .nz-wid__copy h2{font-size:1.24rem}
  .nz-wid__art{width:52%;right:-20%;opacity:.3}
  .nz-wid__ghost{font-size:4.5rem}
}

/* ------------------------------------------------------------
   What I do cards \u2014 clear the header
   The motif was vertically centred and the ghost numeral sat
   directly behind the number and title, so three elements
   stacked in the same corner. Motif moves to the top right and
   shrinks; the ghost numeral goes, since the real number is
   right there anyway.
   ------------------------------------------------------------ */
@media (max-width:899px){
  .nz-wid__art{
    top:.9rem;
    right:-8%;
    transform:none;
    width:30%;
    max-width:120px;
    opacity:.26;
  }
  .nz-wid__ghost{display:none}
  .nz-wid__copy{max-width:100%}
  .nz-wid__n{position:relative;z-index:3}
  .nz-wid__copy h2{max-width:13ch;position:relative;z-index:3}
}
@media (max-width:380px){
  .nz-wid__art{width:34%;max-width:96px;right:-10%;opacity:.22}
  .nz-wid__copy h2{max-width:12ch}
}

/* ------------------------------------------------------------
   What I do cards \u2014 simplified to match the homepage panel
   Number, title, copy, pill button. The motif and ghost numeral
   are dropped on mobile; at this width they crowded the header
   rather than adding anything.
   ------------------------------------------------------------ */
@media (max-width:899px){

  .nz-wid__art,
  .nz-wid__ghost{display:none !important}

  .nz-widSec > .wrap::after{opacity:.32}

  .nz-wid__copy{max-width:100%}
  .nz-wid__n{margin:0 0 .5rem !important;font-size:.85rem}
  .nz-wid__copy h2{max-width:14ch;margin:0 0 .9rem}
  .nz-wid__lead{
    font-size:.95rem;line-height:1.7;color:#CFC5B9;
    margin:0 0 1rem;max-width:100%;
  }

  /* the capability list is detail the homepage card does not carry;
     keep it, but quieter and tighter */
  .nz-wid__list{margin:0 0 1.3rem}

  /* enquire as a pill, exactly like the homepage panels */
  .nz-wid__copy .nz-svc__cta{
    display:inline-flex;align-items:center;gap:.6rem;
    border:1px solid rgba(231,197,124,.4);
    border-bottom:1px solid rgba(231,197,124,.4);
    border-radius:999px;
    padding:10px 20px;
    font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--champ);
    transition:background .35s,color .35s;
  }
  .nz-wid__copy .nz-svc__cta:hover{background:var(--champ);color:var(--jet)}
}

/* ============================================================
   GALLERY PAGE LIGHTBOX \u2014 fix
   Two rule sets share the .nz-lb name: the homepage slider's,
   which starts at opacity:0/visibility:hidden and needs an .open
   class, and this page's, which only toggles the hidden
   attribute. The inherited opacity and visibility meant the
   overlay covered the screen invisibly while body.locked stopped
   scrolling \u2014 the page appeared to freeze.
   ============================================================ */
/* scoped to the gallery page's lightbox only \u2014 the homepage
   slider uses .nz-lb.open and must stay hidden until opened */
.nz-lb--grid:not([hidden]){
  opacity:1 !important;
  visibility:visible !important;
}
.nz-lb--grid[hidden]{display:none !important}

/* A full-screen blurred backdrop is expensive on mobile GPUs and
   can stutter badly; the background is nearly opaque anyway. */
@media (max-width:899px){
  .nz-lb--grid{backdrop-filter:none;background:rgba(10,8,8,.97)}
}

/* ------------------------------------------------------------
   Lightbox arrows \u2014 contrast fix
   Two .nz-lb__nav:hover rules exist from the two lightboxes: one
   fills the circle gold with dark text, the other turns the text
   gold. The later won for colour, giving a gold glyph on a gold
   circle. On touch the hover state also sticks after a tap.
   ------------------------------------------------------------ */
.nz-lb--grid .nz-lb__nav,
.nz-lb--grid .nz-lb__x{
  background:rgba(20,17,16,.72);
  border:1px solid rgba(231,197,124,.4);
  color:var(--champ);
  font-family:var(--body);
  display:grid;place-items:center;
  line-height:1;
}

/* hover only where a real pointer exists */
@media (hover:hover) and (pointer:fine){
  .nz-lb--grid .nz-lb__nav:hover,
  .nz-lb--grid .nz-lb__x:hover{
    background:var(--champ);
    border-color:var(--champ);
    color:#141110;
  }
}

/* on touch, only the moment of the press changes */
@media (hover:none){
  .nz-lb--grid .nz-lb__nav:hover,
  .nz-lb--grid .nz-lb__x:hover{
    background:rgba(20,17,16,.72);
    border-color:rgba(231,197,124,.4);
    color:var(--champ);
  }
  .nz-lb--grid .nz-lb__nav:active,
  .nz-lb--grid .nz-lb__x:active{
    background:var(--champ);
    color:#141110;
  }
  /* bigger targets, clear of the edges */
  .nz-lb--grid .nz-lb__nav{width:46px;height:46px;font-size:1.5rem}
  .nz-lb--grid .nz-lb__nav--prev{left:10px}
  .nz-lb--grid .nz-lb__nav--next{right:10px}
  .nz-lb--grid .nz-lb__x{width:46px;height:46px;top:12px;right:12px}
}

/* ------------------------------------------------------------
   Step rail focus
   The browser's default focus box was drawing a rectangle
   around the number and the expanded label after a click.
   Keyboard focus now gets a rounded champagne ring instead.
   ------------------------------------------------------------ */
.nz-steps a{outline:none}
.nz-steps a:focus-visible{
  outline:1px solid rgba(231,197,124,.6);
  outline-offset:5px;
  border-radius:999px;
}

/* ------------------------------------------------------------
   Statement stage without the portrait
   The cut-out has been removed at the client's request, so the
   NZ mark, rings and glow now carry the space alone. The mark is
   brought up in weight and the floor pool goes, since there is no
   longer a figure standing on it.
   ------------------------------------------------------------ */
.nz-stage__floor{display:none}

/* the mark was sized to sit behind a figure; on its own it can
   hold more presence */
.mk-base{stroke:rgba(231,197,124,.26);stroke-width:15}
.mk-run{stroke-width:15}
.nz-stage__glow{width:80%;opacity:1}
.nz-stage__outer .o1{stroke:rgba(231,197,124,.22)}
.nz-stage__outer .o2{stroke:rgba(201,139,107,.18)}

/* the stage was 1:1.18 to fit a full-length figure; without one
   a square keeps the mark centred rather than floating high */
.nz-stage{aspect-ratio:1;max-width:420px}

@media (max-width:767px){
  .nz-stage{max-width:300px}
  .mk-base,.mk-run{stroke-width:12}
}

/* About closing section now uses the same frame as the homepage */
.nz-abSplit__mask .nz-frame{width:100%;max-width:320px;margin:0 auto}
@media(max-width:899px){
  .nz-abSplit__mask .nz-frame{max-width:260px}
}

/* Homepage gallery shows the first eight; this is the route to the
   full set, matching the press section's button. */
.sp-gal__more{display:flex;justify-content:center;margin-top:1.6rem}
.sp-gal__more .btn{display:inline-flex;align-items:center;gap:.6rem}
.sp-gal__more i{font-style:normal;transition:transform .35s}
.sp-gal__more .btn:hover i{transform:translateX(4px)}

/* ============================================================
   THE BOOK — ABC Crypto
   3D cover with a spine and a sweeping sheen, travelling gold
   border, bitcoin watermark. Matches the raised panels.
   ============================================================ */
@property --nz-bk-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

.nz-bk{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);border-radius:26px;
  background:linear-gradient(158deg,#221C18 0%,#171310 55%,#110E0C 100%);
  padding:clamp(2rem,4.5vw,3.4rem);
}

/* travelling gold border */
.nz-bk::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--nz-bk-angle),
    transparent 0deg, transparent 286deg,
    rgba(201,139,107,.25) 300deg, rgba(231,197,124,.7) 328deg,
    #FFF3D6 344deg, var(--champ-hi,#F2D79A) 352deg,
    rgba(231,197,124,.35) 357deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:nzBkRun 7s linear infinite;pointer-events:none;z-index:5;
}
@keyframes nzBkRun{to{--nz-bk-angle:360deg}}

/* faint grid */
.nz-bk::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(243,237,228,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,237,228,.03) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 78%);
}

/* bitcoin watermark */
.nz-bk__btc{position:absolute;right:-6%;bottom:-14%;width:min(38%,320px);z-index:0;
  opacity:.5;pointer-events:none}
.nz-bk__btc svg{width:100%;height:auto;display:block}
.nz-bk__btc .r{fill:none;stroke:rgba(231,197,124,.12);stroke-width:1.2}
.nz-bk__btc .d{fill:none;stroke:rgba(231,197,124,.16);stroke-width:1;stroke-dasharray:2 8;
  transform-origin:50% 50%;animation:nzBkSpin 46s linear infinite}
.nz-bk__btc .g{fill:rgba(231,197,124,.09);transform:translate(6.1px,-2.4px)}
@keyframes nzBkSpin{to{transform:rotate(-360deg)}}

.nz-bk__grid{position:relative;z-index:2;display:grid;gap:2.2rem;align-items:center}
@media(min-width:860px){.nz-bk__grid{grid-template-columns:.4fr .6fr;gap:3.2rem}}

/* ---- cover ---- */
.nz-bk__shot{position:relative;justify-self:center;width:min(300px,82%);perspective:1200px}
.nz-bk__inner{position:relative;transform-style:preserve-3d;
  transform:rotateY(-14deg) rotateX(3deg);
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.nz-bk:hover .nz-bk__inner{transform:rotateY(-6deg) rotateX(1deg) translateY(-8px)}
.nz-bk__inner img{width:100%;height:auto;display:block;border-radius:3px;
  box-shadow:0 40px 70px rgba(0,0,0,.7),0 0 0 1px rgba(231,197,124,.3)}
.nz-bk__spine{position:absolute;top:0;bottom:0;left:-14px;width:14px;
  background:linear-gradient(90deg,#0D0B0A,#241E1A);
  transform:rotateY(-88deg);transform-origin:right center;border-radius:2px 0 0 2px}
.nz-bk__sheen{position:absolute;inset:0;border-radius:3px;overflow:hidden;pointer-events:none}
.nz-bk__sheen::after{content:"";position:absolute;top:-60%;left:-120%;width:60%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(14deg);animation:nzBkSheen 6.5s ease-in-out infinite}
@keyframes nzBkSheen{0%,72%{left:-120%}100%{left:170%}}
.nz-bk__glow{position:absolute;inset:-22% -16%;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(231,197,124,.24),transparent 66%);
  filter:blur(6px);animation:nzBkBreathe 7s ease-in-out infinite}
@keyframes nzBkBreathe{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.nz-bk__floor{position:absolute;left:8%;right:8%;bottom:-26px;height:26px;
  background:radial-gradient(ellipse,rgba(231,197,124,.2),transparent 70%);filter:blur(5px)}

/* ---- copy ---- */
.nz-bk__tag{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champ);
  border:1px solid rgba(231,197,124,.4);border-radius:999px;padding:7px 15px;
  margin-bottom:1.2rem}
.nz-bk__tag i{width:6px;height:6px;border-radius:50%;background:#5BD07A;
  box-shadow:0 0 8px rgba(91,208,122,.8);animation:nzBkPulse 2.2s ease-in-out infinite}
@keyframes nzBkPulse{0%,100%{opacity:1}50%{opacity:.35}}

.nz-bk__t{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,4.6vw,3.3rem);line-height:.98;margin:0 0 .4rem;color:var(--cream)}
.nz-bk__t em{font-style:normal;color:var(--champ)}
.nz-bk__sub{margin:0 0 1.2rem;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:clamp(1rem,2.2vw,1.3rem);letter-spacing:.02em;
  color:var(--champ)}
.nz-bk__p{margin:0 0 1.5rem;font-size:.95rem;line-height:1.8;color:var(--mute);max-width:52ch}

.nz-bk__list{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:.6rem;max-width:48ch}
.nz-bk__list li{position:relative;padding-left:1.7rem;font-size:.88rem;color:#CFC5B9;
  line-height:1.5}
.nz-bk__list li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;
  border-radius:50%;border:1px solid rgba(231,197,124,.45)}
.nz-bk__list li::after{content:"";position:absolute;left:5px;top:.52em;width:5px;height:5px;
  border-radius:50%;background:var(--champ)}

.nz-bk__row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.nz-bk__row .btn{position:relative;overflow:hidden}
.nz-bk__row .btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.6rem}
.nz-bk__row .btn i{font-style:normal;transition:transform .35s}
.nz-bk__row .btn:hover i{transform:translateX(4px)}
.nz-bk__alt{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  border-bottom:1px solid var(--line);padding-bottom:3px;transition:.3s}
.nz-bk__alt:hover{color:var(--champ);border-color:rgba(231,197,124,.45)}

@media(max-width:859px){
  .nz-bk__inner{transform:none}
  .nz-bk:hover .nz-bk__inner{transform:translateY(-4px)}
  .nz-bk__spine{display:none}
  .nz-bk__btc{width:56%;right:-16%;bottom:-8%;opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .nz-bk::before,.nz-bk__btc .d,.nz-bk__sheen::after,
  .nz-bk__glow,.nz-bk__tag i{animation:none}
}

/* ------------------------------------------------------------
   Step rail and the floating book button share the right edge
   The rail grew from 7 to 8 items and is centred, so on a short
   viewport its lower numbers reached into the float. The rail is
   lifted above centre and tightened; on very short screens it
   steps aside entirely.
   ------------------------------------------------------------ */
.nz-steps{
  top:44%;
}

@media (max-height:820px){
  .nz-steps ol{gap:0}
  .nz-steps b{font-size:.72rem}
  .nz-steps a{padding:5px 0}
}


/* ============================================================
   MY BOOK PAGE
   ============================================================ */
.nz-bpHero{position:relative;overflow:hidden;
  padding:clamp(6.5rem,13vh,9.5rem) 0 clamp(3rem,6vw,4.5rem)}
.nz-bpHero__btc{position:absolute;left:-10%;top:8%;width:min(46%,460px);
  z-index:0;opacity:.4;pointer-events:none}
.nz-bpHero__btc svg{width:100%;height:auto;display:block}
.nz-bpHero__btc .r{fill:none;stroke:rgba(231,197,124,.1);stroke-width:1.2}
.nz-bpHero__btc .d{fill:none;stroke:rgba(231,197,124,.14);stroke-width:1;
  stroke-dasharray:2 8;transform-origin:50% 50%;animation:nzBkSpin 60s linear infinite}
.nz-bpHero__btc .g{fill:rgba(231,197,124,.07);transform:translate(6.1px,-2.4px)}

.nz-bpHero__in{position:relative;z-index:1;display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){
  .nz-bpHero__in{grid-template-columns:1.05fr .95fr;gap:3.5rem}
}
.nz-bpHero__t{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3rem,8vw,6rem);line-height:.9;margin:0 0 .3rem;color:var(--cream)}
.nz-bpHero__t em{font-style:normal;color:var(--champ)}
.nz-bpHero__sub{margin:0 0 1.3rem;font-family:var(--display);font-weight:400;
  text-transform:uppercase;font-size:clamp(1.1rem,2.6vw,1.6rem);color:var(--champ)}
.nz-bpHero__lede{margin:0 0 1.8rem;font-size:clamp(1rem,2vw,1.15rem);
  line-height:1.7;color:var(--mute);max-width:46ch}
.nz-bpHero__row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.nz-bpHero__row .btn{position:relative;overflow:hidden}
.nz-bpHero__row .btn span{position:relative;z-index:2;display:inline-flex;
  align-items:center;gap:.6rem}
.nz-bpHero__row .btn i{font-style:normal;transition:transform .35s}
.nz-bpHero__row .btn:hover i{transform:translateX(4px)}
.nz-bpHero__tagline{margin:1.6rem 0 0;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champ)}

/* cover, larger than the homepage one */
.nz-bpHero__shot{position:relative;justify-self:center;width:min(340px,84%);
  perspective:1300px}
.nz-bpHero__shot .nz-bk__inner{transform:rotateY(-16deg) rotateX(4deg)}
.nz-bpHero__shot:hover .nz-bk__inner{transform:rotateY(-7deg) rotateX(1deg) translateY(-10px)}

/* about */
.nz-bpAbout{display:grid;gap:2rem}
@media(min-width:900px){.nz-bpAbout{grid-template-columns:.8fr 1.2fr;gap:3.5rem}}
.nz-bpAbout__body .lede{font-size:clamp(1.02rem,2.1vw,1.18rem);line-height:1.7;
  color:var(--cream);margin:0 0 1.2rem}
.nz-bpAbout__body p{font-size:.95rem;line-height:1.85;color:var(--mute);
  margin:0 0 1.2rem;max-width:62ch}

/* what you will learn */
.nz-bpList{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  counter-reset:none}
@media(min-width:860px){.nz-bpList{grid-template-columns:1fr 1fr;gap:.7rem 2rem}}
.nz-bpList li{display:flex;gap:1rem;align-items:flex-start;
  padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(150deg,rgba(243,237,228,.04),rgba(243,237,228,.01));
  transition:border-color .4s,transform .5s cubic-bezier(.2,.7,.3,1)}
.nz-bpList li:hover{border-color:rgba(231,197,124,.4);transform:translateY(-3px)}
.nz-bpList__n{flex:0 0 auto;font-family:var(--display);font-size:.95rem;
  color:var(--champ);line-height:1.3}
.nz-bpList__t{font-size:.9rem;line-height:1.6;color:#CFC5B9}

/* author */
.nz-bpAuthor{display:grid;gap:2.5rem;align-items:start}
@media(min-width:900px){
  .nz-bpAuthor{grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:3.5rem}
}
.nz-bpAuthor__pic .nz-frame{max-width:300px;margin:0 auto}
.nz-bpAuthor__copy p{font-size:.94rem;line-height:1.85;color:var(--mute);
  margin:0 0 1.2rem;max-width:62ch}

/* closing buy */
.nz-bpBuy{text-align:center;display:grid;justify-items:center}
.nz-bpBuy h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.02;margin:0 auto .8rem;
  max-width:20ch;color:var(--cream)}
.nz-bpBuy p{margin:0 auto 1.6rem;max-width:42ch;font-size:.98rem;
  line-height:1.7;color:var(--mute)}
.nz-bpBuy .btn{position:relative;overflow:hidden}
.nz-bpBuy .btn span{position:relative;z-index:2;display:inline-flex;
  align-items:center;gap:.6rem}
.nz-bpBuy .btn i{font-style:normal;transition:transform .35s}
.nz-bpBuy .btn:hover i{transform:translateX(4px)}

@media(max-width:899px){
  .nz-bpHero__btc{width:80%;left:-24%;top:4%;opacity:.25}
  .nz-bpHero__shot{width:min(260px,72%)}
  .nz-bpHero__shot .nz-bk__inner{transform:none}
}

/* Route from the homepage book section through to the full page,
   set as a ghost button so the Amazon button stays primary. */
.nz-bk__more{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-size:.63rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:14px 24px;border-radius:999px;
  color:var(--champ);background:transparent;
  border:1px solid rgba(231,197,124,.42);
  transition:background .35s,color .35s,border-color .35s;
}
.nz-bk__more:hover{
  background:rgba(231,197,124,.12);
  border-color:rgba(231,197,124,.75);
  color:var(--cream);
}
.nz-bk__more i{font-style:normal;transition:transform .35s}
.nz-bk__more:hover i{transform:translateX(4px)}

/* ============================================================
   404 PAGE
   ============================================================ */
.nz-404__hero{position:relative;overflow:hidden;
  padding:clamp(7rem,16vh,11rem) 0 clamp(3rem,6vw,4.5rem);
  min-height:62vh;display:flex;align-items:center}
.nz-404__mark{position:absolute;right:-8%;top:50%;transform:translateY(-50%);
  width:min(44%,460px);z-index:0;opacity:.55;pointer-events:none}
.nz-404__mark svg{width:100%;height:auto;display:block;overflow:visible}
.nz-404__ring{fill:none;stroke:rgba(231,197,124,.14);stroke-width:1.2;
  stroke-dasharray:3 10;transform-origin:50% 50%;
  animation:nz404Spin 80s linear infinite}
.nz-404__ring--2{stroke:rgba(201,139,107,.12);stroke-dasharray:2 14;
  animation:nz404Spin 110s linear infinite reverse}
@keyframes nz404Spin{to{transform:rotate(360deg)}}
.nz-404__glyph{fill:none;stroke:rgba(231,197,124,.18);stroke-width:13;
  stroke-linejoin:round;stroke-linecap:round}
.nz-404__run{fill:none;stroke:var(--champ);stroke-width:13;
  stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 12px rgba(231,197,124,.45));
  stroke-dasharray:170 1000;animation:nz404Run 5.5s linear infinite}
.nz-404__run--z{animation-delay:-2.75s}
@keyframes nz404Run{from{stroke-dashoffset:1170}to{stroke-dashoffset:0}}

.nz-404__in{position:relative;z-index:1}
.nz-404__t{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,7vw,5rem);line-height:.95;letter-spacing:-.015em;
  margin:0 0 1rem;max-width:14ch;color:var(--cream)}
.nz-404__t span{color:var(--champ)}
.nz-404__sub{margin:0 0 2rem;max-width:44ch;
  font-size:clamp(.98rem,2vw,1.12rem);line-height:1.7;color:var(--mute)}

.nz-404__search{display:flex;align-items:center;gap:.5rem;max-width:420px;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(243,237,228,.03);padding:5px 5px 5px 20px;margin:0 0 2rem;
  transition:border-color .35s}
.nz-404__search:focus-within{border-color:rgba(231,197,124,.5)}
.nz-404__search input{flex:1;min-width:0;background:transparent;border:0;
  outline:none;color:var(--cream);font-family:var(--body);font-size:16px;
  padding:10px 0}
.nz-404__search input::placeholder{color:var(--mute)}
.nz-404__search button{flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;border:0;border-radius:50%;background:var(--champ);
  color:#141110;cursor:pointer;transition:.35s}
.nz-404__search button svg{width:17px;height:17px}
.nz-404__search button:hover{background:#F2D79A;transform:scale(1.05)}

.nz-404__links{display:flex;flex-wrap:wrap;gap:.5rem}
.nz-404__links a{font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--line);
  border-radius:999px;padding:10px 18px;transition:.35s}
.nz-404__links a:hover{color:var(--jet);background:var(--champ);
  border-color:var(--champ)}

@media (max-width:899px){
  .nz-404__mark{width:86%;right:-30%;opacity:.28}
  .nz-404__hero{min-height:0}
  .nz-404__glyph,.nz-404__run{stroke-width:10}
}
@media (prefers-reduced-motion:reduce){
  .nz-404__ring,.nz-404__run{animation:none}
}

/* search results heading */
.nz-srch__q{color:var(--champ)}
.nz-pageHero__t .nz-srch__q{word-break:break-word}