/* ============================================================
   nsikakobong.ubom — portfolio shared styles
   Tokens, primitives, components, responsive rules.
   ============================================================ */

:root{
  /* Base & elevation */
  --bg:#07080B;
  --surface:#0E1016;
  --surface-2:#14171F;
  --glass:rgba(255,255,255,0.03);
  --glass-border:rgba(255,255,255,0.08);
  --border-subtle:#1A1D24;
  --border-strong:#2A2E37;

  /* Text */
  --text:#F6F7FB;
  --text-2:#A6ADBB;
  --text-muted:#8B93A0;
  --text-faint:#5A6373;

  /* Accents */
  --accent:#22D3EE;
  --accent-2:#7C7CFF;
  --accent-grad:linear-gradient(100deg,#22D3EE,#7C7CFF);
  --accent-border:rgba(34,211,238,0.30);
  --accent-soft:rgba(34,211,238,0.10);

  /* Elevation */
  --shadow-1:0 4px 20px rgba(0,0,0,0.35);
  --shadow-2:0 12px 40px rgba(0,0,0,0.45);
  --glow-edge:0 0 0 1px var(--accent-border), 0 12px 40px rgba(34,211,238,0.10);

  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"Manrope", system-ui, -apple-system, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw:1200px;
  /* Fluid horizontal padding: 20px on 360-wide phones, 64px on 1440+ desktops, smoothly scaling between */
  --pad-x:clamp(1.25rem, 0.5rem + 3.5vw, 4rem);

  /* Fluid type scale — replaces breakpoint-step font-size overrides with smooth clamp() scaling */
  --fs-hero:clamp(2.5rem, 1.5rem + 4vw, 5.25rem);        /* 40 → 84 */
  --fs-display:clamp(2.5rem, 1.5rem + 3vw, 4.5rem);      /* 40 → 72 */
  --fs-h2:clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);       /* 28 → 40 */
  --fs-h2-cs:clamp(1.5rem, 1.125rem + 1.2vw, 2.125rem);  /* 24 → 34 */
  --fs-h3:clamp(1.375rem, 1.125rem + 0.7vw, 1.75rem);    /* 22 → 28 */
  --fs-body-lg:clamp(1rem, 0.9375rem + 0.4vw, 1.1875rem);/* 16 → 19 */
  --fs-body:clamp(0.9375rem, 0.875rem + 0.2vw, 1rem);    /* 15 → 16 */
  --fs-code-lg:clamp(4.5rem, 2.5rem + 7vw, 7.5rem);      /* 72 → 120 */

  /* Easing: true ease-out-quint — confident exponential deceleration, no bounce */
  --ease-out-soft:cubic-bezier(0.22, 1, 0.36, 1);
}

*{box-sizing:border-box}
html{scroll-padding-top:96px;scroll-behavior:smooth;overflow-x:clip}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:15px;line-height:1.65;font-weight:400}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#0A1416}

img{max-width:100%;display:block}
button{font:inherit;color:inherit}

/* Global focus-visible — refined for the dark surface */
*:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}
.prose{max-width:720px}

/* ============================================================
   PREMIUM PRIMITIVES — atmosphere & material
============================================================ */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bloom{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:-1}
.bloom--cyan{background:radial-gradient(ellipse at center,rgba(34,211,238,0.14),rgba(34,211,238,0) 62%)}
.bloom--indigo{background:radial-gradient(ellipse at center,rgba(124,124,255,0.12),rgba(124,124,255,0) 64%)}
.glass{
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-border);
}
.grad-text{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* At-a-glance index card — glassy key/value panel (hero + About). Layout
   (position/width) is set per-page; this owns the shared look. */
.index-card{border-radius:10px;padding:24px 26px;box-shadow:var(--shadow-1)}
.index-card .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.index-card .v{font-family:var(--serif);font-size:21px;line-height:1.15;margin:3px 0 16px}
.index-card .v:last-child{margin-bottom:0}
.index-card .v.avail{color:var(--accent)}

/* Agent-network motif — slow node pulse + faint drift; CSS-only */
.node-net{position:absolute;pointer-events:none;z-index:0;opacity:.6}
.node-net line{stroke:rgba(124,124,255,0.22);stroke-width:1}
.node-net circle{fill:var(--surface);stroke:rgba(34,211,238,0.45)}
.node-net circle.lit{fill:var(--accent);filter:drop-shadow(0 0 6px rgba(34,211,238,0.7))}
@keyframes nn-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes nn-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.node-net{animation:nn-drift 9s var(--ease-out-soft) infinite}
.node-net circle.lit{animation:nn-pulse 3.4s var(--ease-out-soft) infinite}
.node-net circle.lit:nth-of-type(2){animation-delay:1.2s}

/* Scroll reveal — fade-up as elements enter the viewport */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out-soft),transform .7s var(--ease-out-soft)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================
   NAV
============================================================ */
.topbar{position:sticky;top:0;z-index:50;background:transparent;transition:background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease}
.topbar.scrolled{background:rgba(10,10,11,0.48);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--border-subtle)}
.topbar > .shell{transition:padding .25s ease}

.nav{position:relative;display:flex;justify-content:space-between;align-items:center;padding:32px 0 0;height:88px;gap:24px}
.nav .brand{font-family:var(--mono);font-size:13px;color:var(--text);letter-spacing:.01em;display:inline-flex;align-items:center;gap:10px;transition:color .18s ease}
.nav .brand:hover{color:var(--accent)}
.nav .brand:hover .dot{box-shadow:0 0 0 4px rgba(34,211,238,0.16)}
.nav .brand .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);transition:box-shadow .2s ease}
.nav ul{list-style:none;display:flex;gap:36px;margin:0;padding:0;font-size:14px;align-items:center}
.nav a{position:relative;color:var(--text-2);transition:color .18s ease;padding:6px 2px}
.nav a::after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:0;background:currentColor;transition:width .26s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after,.nav a.active::after{width:100%}
.nav a:hover,.nav a[aria-current="page"],.nav a.active{color:var(--text)}
.nav a.contact{color:var(--accent)}
.nav a.contact:hover{color:var(--accent);filter:brightness(1.1)}
.nav a.contact[aria-current="page"]{color:var(--accent)}
.nav .menu-btn{display:none;background:transparent;border:1px solid var(--border-strong);border-radius:4px;width:44px;height:44px;color:var(--text);cursor:pointer;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px}
.nav .menu-btn:hover{border-color:var(--accent-border)}

/* ============================================================
   BUTTONS
============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:500;font-size:14px;height:48px;padding:0 22px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:transform .18s ease, border-color .18s ease, filter .18s ease, color .18s ease;white-space:nowrap;flex-shrink:0;text-decoration:none}
.btn .arrow{font-family:var(--mono);font-size:14px;transition:transform .2s ease}
.btn-primary{background:var(--accent-grad);color:#04141A;border:0;box-shadow:0 8px 30px rgba(34,211,238,0.22),inset 0 1px 0 rgba(255,255,255,0.25)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary .arrow{position:relative;display:inline-block;color:transparent;overflow:hidden;width:14px;height:1em;line-height:1;transition:none}
.btn-primary .arrow::before,
.btn-primary .arrow::after{content:"→";position:absolute;top:50%;left:0;color:#0A1416;font-family:var(--mono);font-size:14px;line-height:1;transition:transform .34s cubic-bezier(.45,0,.2,1)}
.btn-primary .arrow::before{transform:translate(0,-50%)}
.btn-primary .arrow::after{transform:translate(-160%,-50%)}
.btn-primary:hover .arrow::before{transform:translate(160%,-50%)}
.btn-primary:hover .arrow::after{transform:translate(0,-50%)}
.btn-secondary{background:var(--glass);color:var(--text);border:1px solid var(--glass-border);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-secondary:hover{border-color:var(--accent-border)}
.btn-secondary .arrow{font-size:13px}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   PRIMITIVES — eyebrow, tag, category, section header
============================================================ */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.eyebrow.dotless::before{content:none}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(34,211,238,.10)}
.eyebrow.muted{color:var(--text-muted)}
.eyebrow.muted::before{background:var(--text-muted);box-shadow:none}

.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;height:24px;padding:0 10px;border-radius:2px;border:1px solid var(--accent-border);color:var(--accent)}
.tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tag.muted{color:var(--text-muted);border-color:var(--border-strong)}
.tag.muted .dot{background:var(--text-muted)}
.tag.warn{color:#E0B25E;border-color:rgba(224,178,94,.30)}
.tag.warn .dot{background:#E0B25E}

.cat{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.cat .n{color:var(--text-2)}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--border-subtle);padding-bottom:22px;margin-bottom:36px}
.section-head h2{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);line-height:1.15;margin:0;letter-spacing:-0.007em}
.section-head .right{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:18px;flex-shrink:0}

/* ============================================================
   PROJECT SPREADS — editorial magazine layout
   Replaces card-style boxes with full-width rows anchored by a big
   italic serif numeral. Hover/focus draws a cyan rule across the top
   and brightens the supporting elements.
============================================================ */
.projects{display:flex;flex-direction:column;border-top:1px solid var(--border-subtle)}

.project{
  position:relative;
  display:grid;
  grid-template-columns:clamp(72px, 11vw, 150px) 1fr;
  gap:clamp(24px, 3.5vw, 48px);
  --row-inset:clamp(14px, 2vw, 28px);
  padding:clamp(32px, 4vw, 56px) var(--row-inset);
  margin:0 calc(-1 * var(--row-inset));
  border-bottom:1px solid var(--border-subtle);
  border-radius:14px;
  isolation:isolate;
  transition:transform .35s var(--ease-out-soft), box-shadow .35s var(--ease-out-soft), background-color .35s var(--ease-out-soft);
}

/* Hover/focus: lift into a glass panel with a soft accent glow */
.project:hover,
.project:focus-within{
  transform:translateY(-2px);
  background:var(--glass);
  box-shadow:var(--glow-edge);
}

/* A cyan→indigo line draws across the top edge — scaleX, not width, to stay GPU-composited */
.project::before{
  content:'';
  position:absolute;
  top:-1px;
  left:var(--row-inset);
  right:var(--row-inset);
  height:1px;
  background:var(--accent-grad);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s var(--ease-out-soft);
  pointer-events:none;
  z-index:1;
}
.project:hover::before,
.project:focus-within::before{transform:scaleX(1)}

/* Top meta row spans both columns */
.project .row-meta{
  grid-column:1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:clamp(20px, 3vw, 36px);
}
.project .row-meta-cat{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  transition:color .3s var(--ease-out-soft);
}
.project:hover .row-meta-cat,
.project:focus-within .row-meta-cat{color:var(--text-2)}

/* The big italic numeral — the editorial moment */
.project .num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(72px, 11vw, 160px);
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--text-faint);
  align-self:start;
  user-select:none;
  transition:color .4s var(--ease-out-soft);
}
.project:hover .num,
.project:focus-within .num{color:var(--text)}

/* Content column */
.project .body{display:flex;flex-direction:column;gap:16px;min-width:0}

.project h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px, 3.2vw, 44px);
  line-height:1.08;
  letter-spacing:-0.014em;
  margin:0;
  color:var(--text);
}

/* Editorial punctuation rule under title — expands + cyan on hover */
.project .rule{
  width:72px;
  height:1px;
  background:var(--border-strong);
  margin:6px 0 4px;
  transform:scaleX(0.583);
  transform-origin:left center;
  transition:background-color .35s var(--ease-out-soft), transform .5s var(--ease-out-soft);
}
.project:hover .rule,
.project:focus-within .rule{background:var(--accent-2);transform:scaleX(1)}

.project .lede{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(16px, 1.1vw, 18px);
  line-height:1.55;
  color:var(--text-2);
  max-width:58ch;
  margin:0;
}

.project .stack{
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-muted);
  letter-spacing:.02em;
  line-height:1.7;
  max-width:64ch;
}
.project .stack .sep{color:var(--text-faint);padding:0 8px}

.project .cta{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  align-self:flex-end;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  transition:color .3s var(--ease-out-soft);
}
.project:hover .cta,
.project:focus-within .cta{color:var(--accent)}
.project .cta .arrow{
  font-family:var(--mono);
  font-size:13px;
  margin-left:12px;
  transition:transform .3s var(--ease-out-soft);
}
.project:hover .cta .arrow,
.project:focus-within .cta .arrow{transform:translateX(6px)}

/* Cover anchor covers the whole row for click affordance */
.project a.cover{position:absolute;inset:0;z-index:2}
.project a.cover:focus-visible{outline:2px solid var(--accent);outline-offset:-8px}

/* Mobile: stack the columns; numeral becomes a smaller "issue stamp" above the content */
@media (max-width: 640px){
  .project{
    grid-template-columns:1fr;
    gap:14px;
    padding:36px 0;
  }
  .project .row-meta{margin-bottom:18px}
  .project .num{
    font-size:56px;
    color:var(--text-2);
    line-height:0.9;
  }
  .project .body{gap:14px}
  .project .cta{align-self:flex-start;margin-top:12px}
  .project .stack{font-size:11px}
}

/* ============================================================
   FOOTER
============================================================ */
footer.site{margin-top:160px;border-top:1px solid var(--border-subtle);padding:40px 0 64px;position:relative}
footer.site .row{display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--mono);font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
footer.site a{color:var(--text-2);transition:color .15s ease}
footer.site a:hover{color:var(--accent)}
footer.site .right{display:flex;gap:6px;align-items:center}
footer.site .email-link{display:inline-flex;align-items:center;gap:10px}
footer.site .email-link .email-ico{width:14px;height:14px;flex-shrink:0;color:inherit;display:block}
footer.site .ico-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--text-2);transition:color .2s ease, transform .2s ease;border-radius:3px}
footer.site .ico-link:hover{color:var(--accent);transform:translateY(-2px)}
footer.site .ico-link svg{width:16px;height:16px;display:block}
footer.site .ico-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
footer.site .meta{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============================================================
   AT-A-GLANCE (case studies)
============================================================ */
.glance{background:var(--glass);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border:1px solid var(--glass-border);border-radius:6px;padding:32px 36px;font-family:var(--mono);font-size:12.5px;color:var(--text-2);box-shadow:var(--shadow-1)}
.glance dl{display:grid;grid-template-columns:160px 1fr;row-gap:14px;column-gap:32px;margin:0}
.glance dt{color:var(--text-muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding-top:1px}
.glance dd{margin:0;color:var(--text);font-size:12.5px;line-height:1.55}
.glance dd em{color:var(--text-2);font-style:normal}
.glance dd .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle;transform:translateY(-1px)}

/* ============================================================
   CASE STUDY NAV (prev/next)
============================================================ */
.csnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:96px;padding-top:48px;border-top:1px solid var(--border-subtle)}
.csnav a{display:block;border:1px solid var(--glass-border);border-radius:6px;padding:24px 28px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-1);transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.csnav a:hover{border-color:var(--accent-border);transform:translateY(-2px);box-shadow:var(--glow-edge)}
.csnav .label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.csnav .title{font-family:var(--serif);font-size:24px;margin-top:10px;line-height:1.2}
.csnav a.next{text-align:right}
.csnav a.next .label{justify-content:flex-end}
.csnav a.disabled{opacity:.35;pointer-events:none}

/* ============================================================
   CASE STUDY HEADER CTAS (View live, etc.)
============================================================ */
.cs-header .cs-ctas{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}

/* ============================================================
   FORMS (contact page)
============================================================ */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.field input,
.field textarea{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:4px;padding:14px 16px;outline:none;transition:border-color .18s ease, background-color .18s ease;width:100%;font-weight:400}
.field input::placeholder,
.field textarea::placeholder{color:var(--text-muted)}
.field input:focus,
.field textarea:focus{border-color:var(--accent-border)}
.field input:focus-visible,
.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field textarea{resize:vertical;min-height:160px;font-family:var(--sans)}

.form-status{font-family:var(--mono);font-size:12px;line-height:1.5;padding:12px 14px;border-radius:4px;border:1px solid var(--border-subtle);background:var(--surface);color:var(--text-2);letter-spacing:.02em}
.form-status:empty{display:none}
.form-status.sending{color:var(--text-2)}
.form-status.success{color:var(--accent);border-color:var(--accent-border)}
.form-status.error{color:#E0B25E;border-color:rgba(224,178,94,.30)}

/* ============================================================
   CONTACT CHANNELS (icon cards for direct-link methods)
============================================================ */
.channel{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:6px;box-shadow:var(--shadow-1);transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;color:inherit}
.channel:hover{border-color:var(--accent-border);transform:translateY(-2px);box-shadow:var(--glow-edge)}
.channel .icon{width:22px;height:22px;color:var(--text-2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .2s ease}
.channel:hover .icon{color:var(--accent)}
.channel .icon svg{width:100%;height:100%;display:block}
.channel .meta{display:flex;flex-direction:column;min-width:0}
.channel .meta .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3px}
.channel .meta .value{font-family:var(--sans);font-size:14.5px;color:var(--text);line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.channel .ext{margin-left:auto;color:var(--text-muted);font-family:var(--mono);font-size:14px;transition:transform .2s ease, color .2s ease;flex-shrink:0}
.channel:hover .ext{color:var(--accent);transform:translateX(3px)}

/* ============================================================
   RESPONSIVE
============================================================ */

/* Tablet — 1024 and below */
@media (max-width: 1024px){
  .nav{padding-top:24px;height:80px}
  .nav ul{gap:28px}
}

/* Tablet — 768 and below */
@media (max-width: 820px){
  .glance{padding:24px 26px}
  .glance dl{grid-template-columns:140px 1fr;row-gap:12px}
  .csnav{margin-top:72px;padding-top:36px}
}

/* Mobile — 560 and below */
@media (max-width: 560px){
  body{font-size:15px}

  .nav{padding-top:20px;height:72px}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(10,10,11,0.92);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);flex-direction:column;gap:0;padding:8px 0;z-index:30}
  .nav.open ul{display:flex}
  .nav.open ul li{border-bottom:1px solid var(--border-subtle)}
  .nav.open ul li:last-child{border-bottom:0}
  .nav.open ul a{display:block;padding:16px 0;font-size:16px;color:var(--text-2)}
  .nav.open ul a.contact{color:var(--accent)}
  .nav.open ul a::after{display:none}
  .nav .menu-btn{display:inline-flex}

  .section-head{padding-bottom:18px;margin-bottom:28px}
  .section-head .right{font-size:10px;gap:12px}

  .glance{padding:22px 22px}
  .glance dl{grid-template-columns:1fr;row-gap:6px}
  .glance dt{padding-top:8px}

  .csnav{grid-template-columns:1fr;gap:10px}
  .csnav a.next{text-align:left}
  .csnav a.next .label{justify-content:flex-start}

  footer.site{margin-top:96px;padding:24px 0 48px}
  footer.site .row{flex-direction:column;align-items:flex-start;gap:14px}
  footer.site .meta{flex-direction:column;gap:6px}

  .btn{height:44px;padding:0 18px}
}

/* ============================================================
   PAGE-LOAD ENTRANCE ANIMATIONS
   Subtle staggered fade-up on first paint. Respects prefers-reduced-motion.
============================================================ */
@keyframes fade-up{
  from{opacity:0;transform:translateY(14px)}
  to  {opacity:1;transform:none}
}

/* Hero (index.html) — atmospheric depth + cinematic entrance */
.shell .hero{position:relative;isolation:isolate}

/* Subtle radial atmosphere behind hero — slow fade-in, stays */
.hero::before{
  content:'';
  position:absolute;
  top:-10%;
  right:-15%;
  width:600px;
  max-width:80vw;
  height:520px;
  background:radial-gradient(ellipse at center, rgba(34,211,238,0.06) 0%, rgba(34,211,238,0) 62%);
  filter:blur(24px);
  pointer-events:none;
  z-index:-1;
  opacity:0;
  animation:hero-atmosphere 2.4s var(--ease-out-soft) .15s forwards;
}
@keyframes hero-atmosphere{to{opacity:1}}

/* Headline lines — focus reveal: blur clears as line rises */
@keyframes hero-line-focus{
  from{opacity:0;transform:translateY(0.45em);filter:blur(6px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}

/* Status line, sub, CTAs use the shared fade-up; headline uses focus-reveal */
.hero .hero-status,
.hero .sub,
.hero .ctas{opacity:0;animation:fade-up .9s var(--ease-out-soft) forwards}
.hero h1 .l{opacity:0;animation:hero-line-focus 1.1s var(--ease-out-soft) forwards}

.hero .hero-status{animation-delay:.12s}
.hero h1 .l:nth-child(1){animation-delay:.32s}
.hero h1 .l:nth-child(2){animation-delay:.5s}
.hero h1 .l:nth-child(3){animation-delay:.68s}
.hero .sub{animation-delay:1.25s}
.hero .ctas{animation-delay:1.45s}

/* Case study header (3 case-*.html pages) — cat → h1 → subtitle → CTAs */
.cs-header > *{opacity:0;animation:fade-up .85s var(--ease-out-soft) forwards}
.cs-header > *:nth-child(1){animation-delay:.08s}
.cs-header > *:nth-child(2){animation-delay:.2s}
.cs-header > *:nth-child(3){animation-delay:.34s}
.cs-header > *:nth-child(4){animation-delay:.48s}

/* About (about.html) — h1 then five paragraphs */
.about h1,
.about > p{opacity:0;animation:fade-up .85s var(--ease-out-soft) forwards}
.about h1{animation-delay:.08s}
.about > p:nth-of-type(1){animation-delay:.22s}
.about > p:nth-of-type(2){animation-delay:.32s}
.about > p:nth-of-type(3){animation-delay:.42s}
.about > p:nth-of-type(4){animation-delay:.52s}
.about > p:nth-of-type(5){animation-delay:.65s}

/* Contact (contact.html) — eyebrow → h1 → sub → body */
.contact-page .head > *,
.contact-page .contact-body{opacity:0;animation:fade-up .85s var(--ease-out-soft) forwards}
.contact-page .head .eyebrow{animation-delay:.08s}
.contact-page .head h1{animation-delay:.22s}
.contact-page .head .sub{animation-delay:.4s}
.contact-page .contact-body{animation-delay:.58s;animation-duration:1s}

/* 404 (404.html) — code → label → h1 → p → links */
.notfound > *{opacity:0;animation:fade-up .85s var(--ease-out-soft) forwards}
.notfound .code{animation-delay:.08s}
.notfound .label{animation-delay:.22s}
.notfound h1{animation-delay:.32s}
.notfound p{animation-delay:.44s}
.notfound .links{animation-delay:.58s}

/* Reduced motion: kill scroll smoothing, transitions, AND every entrance animation. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .hero .hero-status, .hero h1 .l, .hero .sub, .hero .ctas,
  .cs-header > *,
  .about h1, .about > p,
  .contact-page .head > *, .contact-page .contact-body,
  .notfound > *{opacity:1 !important;transform:none !important;filter:none !important}
  .hero::before{opacity:1 !important}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}