/* =========================================================
   Wenseslaus Mwita — Portfolio
   Monochrome system inspired by kaiseisadatoki-v4.vercel.app
   ========================================================= */

:root{
  /* theme-adaptive ink/paper — swap in dark mode via [data-theme="dark"] below */
  --ink-rgb: 10,10,10;
  --paper-rgb: 255,255,255;
  --ink: rgb(var(--ink-rgb));
  --paper: rgb(var(--paper-rgb));
  --line: rgba(var(--ink-rgb),0.14);
  --line-strong: rgba(var(--ink-rgb),0.35);
  --dim: rgba(var(--ink-rgb),0.55);
  --gap: clamp(20px, 4vw, 64px);
  --edge: clamp(20px, 5vw, 56px);
  --maxw: 1400px;
  --dur: 0.6s;
  --ease: cubic-bezier(.16,.84,.32,1);
  /* typography tokens — the same two type families are declared identically
     dozens of times throughout this file; centralized here so a font swap
     only needs to happen in one place */
  --font-display: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

[data-theme="dark"]{
  --ink-rgb: 255,255,255;
  --paper-rgb: 10,10,10;
}

/* the fullscreen mobile menu stays permanently dark (black bg / white text) in
   both themes, so it never flashes bright or goes invisible when the page
   background flips. Pinned to the same rgb values these rules always used
   pre-dark-mode — including the derived line/dim tokens, since inherited
   custom properties don't re-resolve on their own from a partial override. */
.overlay{
  --ink-rgb: 10,10,10;
  --paper-rgb: 255,255,255;
  --ink: rgb(var(--ink-rgb));
  --paper: rgb(var(--paper-rgb));
  --line: rgba(var(--ink-rgb),0.14);
  --line-strong: rgba(var(--ink-rgb),0.35);
  --dim: rgba(var(--ink-rgb),0.55);
}

html, body{ transition:background-color 0.4s var(--ease), color 0.4s var(--ease); }

*{ box-sizing:border-box; }
html{ background:var(--paper); scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }

.mono{
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  letter-spacing:0.02em;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--dim);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ink);
  display:inline-block;
}

/* ---------- layout shells ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; }

/* ---------- top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  padding:22px 0;
  mix-blend-mode:difference;
  color:#ffffff;
}
/* reuse the same max-width/centering/edge-padding as .wrap elsewhere, so the
   logo and nav line up on the same left/right edge as body content on wide screens */
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; }
.topbar .brand{ display:flex; flex-direction:column; line-height:1.05; }
.topbar .brand strong{ font-size:15px; font-weight:800; letter-spacing:0.02em; }
.topbar .brand span{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.75; margin-top:3px; }
.topbar-nav{ display:none; align-items:center; gap:34px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; }
.topbar-nav a{ opacity:0.85; transition:opacity 0.3s; }
.topbar-nav a:hover{ opacity:1; }
.topbar-actions{ display:flex; align-items:center; gap:22px; }
.topbar-contact{ border:1px solid currentColor; border-radius:999px; padding:9px 20px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; display:none; }

.theme-toggle{
  width:36px; height:36px; border:1px solid currentColor; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.theme-toggle svg{ width:15px; height:15px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:flex; }

.menu-btn{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
.menu-btn .lines{ display:flex; flex-direction:column; gap:4px; width:22px; }
.menu-btn .lines span{ height:1px; background:currentColor; display:block; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.menu-btn.is-open .lines span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.menu-btn.is-open .lines span:nth-child(2){ opacity:0; }
.menu-btn.is-open .lines span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (min-width:921px){
  .topbar-nav{ display:flex; }
  .topbar-contact{ display:inline-flex; }
  .menu-btn{ display:none; }
}

/* ---------- overlay nav ---------- */
.overlay{
  position:fixed; inset:0; z-index:50;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:100px var(--edge) 40px;
  transform:translateY(-100%);
  transition:transform 0.7s var(--ease);
}
.overlay.is-open{ transform:translateY(0); }
.overlay-nav{ display:flex; flex-direction:column; gap:6px; }
.overlay-nav li{ border-top:1px solid rgba(var(--paper-rgb),0.14); }
.overlay-nav li:last-child{ border-bottom:1px solid rgba(var(--paper-rgb),0.14); }
.overlay-nav a{
  display:flex; align-items:baseline; gap:18px;
  padding:18px 2px;
  font-size:clamp(32px, 7vw, 68px);
  font-weight:800; letter-spacing:-0.01em; text-transform:lowercase;
  transition:opacity var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.overlay-nav a .num{ font-family:var(--font-mono); font-size:14px; color:var(--dim); font-weight:400; }
.overlay-nav a:hover{ opacity:0.55; padding-left:16px; }
.overlay-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); }
.overlay-foot ul{ display:flex; gap:18px; flex-wrap:wrap; }
.overlay-foot a:hover{ color:var(--paper); }

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
  padding:14px 0;
}
.marquee .track{ display:inline-flex; animation:marquee 30s linear infinite; }
.marquee .track span{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  padding:0 22px; color:var(--dim); display:inline-flex; align-items:center; gap:22px;
}
.marquee .track span::after{ content:"—"; color:var(--line-strong); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- hero ---------- */
.hero{ padding:168px 0 64px; }
.hero .kicker{ margin-bottom:26px; }
.hero h1{
  font-size:clamp(40px, 8.4vw, 70px);
  line-height:0.94; letter-spacing:-0.02em; font-weight:800;
  margin:0 0 28px; text-transform:uppercase;
}
.hero .lede{ display:flex; gap:var(--gap); flex-wrap:wrap; align-items:flex-end; justify-content:space-between; margin-top:36px; }
.hero .tagline{ font-size:clamp(15px,2vw,20px); max-width:840px; line-height:1.55; color:var(--ink); }
.hero .tagline b{ font-weight:700; }
.meta-row{ display:flex; flex-wrap:wrap; gap:34px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line); }
.meta-item{ display:flex; flex-direction:column; gap:6px; }
.meta-item .label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); }
.meta-item .value{ font-size:14px; font-weight:600; }
.clock::after{ content: attr(data-time); }

.scroll-cue{
  position:fixed; right:var(--edge); bottom:30px; z-index:40;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; color:var(--dim);
}
.scroll-cue .stick{ width:1px; height:46px; background:var(--line-strong); position:relative; overflow:hidden; }
.scroll-cue .stick::after{ content:""; position:absolute; top:0; left:0; width:100%; height:14px; background:var(--ink); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%{ transform:translateY(-20px);} 50%{ transform:translateY(46px);} 100%{ transform:translateY(-20px);} }

/* ---------- section header ---------- */
.section{ padding:96px 0; }
.section-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(34px,6vw,64px); font-weight:800; letter-spacing:-0.01em; margin:14px 0 0; text-transform:lowercase; }
.section-head .sub{ max-width:420px; font-size:14px; color:var(--dim); line-height:1.6; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--ink); border-radius:999px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.solid{ background:var(--ink); color:var(--paper); }
.btn.solid:hover{ background:var(--paper); color:var(--ink); }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:opacity var(--dur); }
.link-arrow:hover{ opacity:0.5; }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--paper); color:var(--ink); padding:160px 0 0; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; padding-bottom:56px; }
.footer-cta h3{ font-size:clamp(28px,5vw,52px); font-weight:800; text-transform:lowercase; max-width:520px; line-height:1.06; margin:0 0 26px; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col .h{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--dim); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; }
.footer-col a:hover{ opacity:0.6; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding:26px 0 32px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--dim); }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--gap); align-items:start; }
.monogram{
  aspect-ratio:4/5; border:1px solid var(--line-strong); border-radius:14px;
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.monogram span{ font-size:clamp(60px,9vw,140px); font-weight:800; letter-spacing:-0.03em; }
.monogram .corner{ position:absolute; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); }
.monogram .corner.tl{ top:18px; left:18px; }
.monogram .corner.br{ bottom:18px; right:18px; text-align:right; }
.info-block{ padding:26px 0; border-top:1px solid var(--line); }
.info-block:last-child{ border-bottom:1px solid var(--line); }
.info-block .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.info-block .v{ font-size:15px; line-height:1.7; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ border:1px solid var(--line-strong); border-radius:999px; padding:6px 14px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; }

.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.value-card{ padding:36px 30px 0; border-top:1px solid var(--line); }
.value-card .n{ font-family:var(--font-mono); font-size:12px; color:var(--dim); margin-bottom:22px; display:block; }
.value-card h4{ font-size:22px; font-weight:800; text-transform:lowercase; margin:0 0 14px; }
.value-card p{ font-size:14px; line-height:1.7; color:var(--dim); padding-bottom:36px; }

/* ---------- work page ---------- */
.project-card{ padding:52px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.project-card:last-child{ border-bottom:1px solid var(--line); }
.project-info .num{ font-family:var(--font-mono); font-size:12px; color:var(--dim); margin-bottom:14px; display:block; }
.project-info h3{ font-size:clamp(30px,4.4vw,48px); font-weight:800; text-transform:lowercase; letter-spacing:-0.01em; margin:0 0 16px; }
.project-info p{ font-size:14px; line-height:1.7; color:var(--dim); max-width:440px; margin:0 0 22px; }
.project-meta{ display:flex; gap:28px; flex-wrap:wrap; margin-bottom:26px; }
.project-meta div .label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); margin-bottom:4px; }
.project-meta div .value{ font-size:13px; font-weight:700; }

/* wireframe tile — stands in for a full-color screenshot */
.wire{
  border:1px solid var(--line-strong); border-radius:12px; aspect-ratio:16/11;
  position:relative; overflow:hidden; background:var(--paper);
  display:flex; flex-direction:column;
}
.wire .wire-bar{ height:34px; border-bottom:1px solid var(--line-strong); display:flex; align-items:center; gap:6px; padding:0 14px; }
.wire .wire-bar i{ width:6px; height:6px; border-radius:50%; border:1px solid var(--line-strong); }
.wire .wire-body{ flex:1; padding:14px; display:grid; gap:8px; }
.wire.kanban .wire-body{ grid-template-columns:repeat(3,1fr); }
.wire.kanban .wcol{ border:1px dashed var(--line-strong); border-radius:6px; display:flex; flex-direction:column; gap:6px; padding:6px; }
.wire.kanban .wcol i{ height:16px; border:1px solid var(--line); border-radius:4px; display:block; }
.wire.table .wrow{ height:14px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.wire.table .wrow::before{ content:""; width:22%; height:6px; background:var(--line-strong); margin-right:auto; }
.wire.cards .wire-body{ grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; }
.wire.cards .wcard{ border:1px solid var(--line-strong); border-radius:6px; }
.wire.timeline .wire-body{ grid-template-columns:1fr; align-content:center; gap:14px; padding-left:24px; position:relative; }
.wire.timeline .wire-body::before{ content:""; position:absolute; left:10px; top:6px; bottom:6px; width:1px; background:var(--line-strong); }
.wire.timeline .tstep{ position:relative; padding-left:16px; }
.wire.timeline .tstep::before{ content:""; position:absolute; left:-24px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--ink); }
.wire.timeline .tstep i{ display:block; height:8px; width:60%; background:var(--line-strong); border-radius:3px; }
.wire.hero-search .wire-body{ align-items:center; justify-content:center; text-align:center; gap:10px; }
.wire.hero-search .sbar{ height:30px; width:70%; margin:0 auto; border:1px solid var(--line-strong); border-radius:999px; }
.wire.hero-search .schips{ display:flex; gap:8px; justify-content:center; }
.wire.hero-search .schips i{ width:44px; height:18px; border:1px solid var(--line-strong); border-radius:6px; }
.wire.form .wire-body{ grid-template-columns:1fr 1fr; align-content:start; }
.wire.form .field{ grid-column:span 2; height:16px; border:1px solid var(--line-strong); border-radius:4px; }
.wire.form .field.half{ grid-column:span 1; }
.wire .wire-caption{ position:absolute; bottom:10px; left:14px; font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); }

/* screenshot tile — plain wrapper around a real exported mockup image. No
   browser-chrome is added in code; the window/dots/title-bar look is baked
   into the screenshot itself (exported from the Figma presentation-mockup
   frames), including transparent rounded corners, so it blends onto the
   page background in both light and dark mode without a matching CSS frame. */
.shot-tile{ display:block; transition:opacity 0.3s var(--ease); }
a.shot-tile:hover{ opacity:0.88; }
.shot-tile img{ display:block; width:100%; height:auto; }

/* device mockup — a minimalist laptop silhouette for "feature" screenshots
   (work.html project cards, homepage hero). Deliberately flat/line-art, not
   photorealistic, so it matches the site's monochrome system: bezel and
   deck use --ink, which itself flips between themes the same way solid
   buttons already do, so the "laptop" reads as black in light mode and
   white in dark mode rather than looking wrong in one of them. */
.device-mockup{ display:block; width:100%; transition:opacity 0.3s var(--ease); }
a.device-mockup:hover{ opacity:0.9; }
.device-mockup .dm-screen{
  border:1.6% solid var(--ink); border-bottom-width:1.6%;
  border-radius:2.2% 2.2% 5px 5px; background:var(--ink); overflow:hidden;
}
.device-mockup .dm-screen img{ display:block; width:100%; height:auto; }
.device-mockup .dm-base{
  height:12px; margin:0 -4.5%; background:var(--line-strong);
  border-radius:0 0 8px 8px; position:relative;
}
.device-mockup .dm-base::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:14%; height:4px; background:var(--dim); border-radius:0 0 4px 4px;
}

.screen-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px; margin-top:20px; }
.screen-item .lbl{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; }
.screen-item .lbl .t{ font-size:14px; font-weight:700; }
.screen-item .lbl a{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--dim); border-bottom:1px solid var(--line-strong); }
.screen-item .lbl a:hover{ color:var(--ink); }
.screen-item p.cap{ font-size:12.5px; color:var(--dim); line-height:1.6; margin:8px 0 0; }

/* ---------- case study page ---------- */
.cs-hero{ padding:168px 0 60px; }
.cs-hero .kicker{ margin-bottom:22px; }
.cs-hero h1{ font-size:clamp(38px,8vw,104px); line-height:0.96; font-weight:800; text-transform:lowercase; letter-spacing:-0.02em; margin:0 0 24px; }
.cs-hero .dek{ font-size:clamp(15px,2vw,19px); max-width:680px; line-height:1.6; color:var(--dim); }
.cs-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:52px; padding-top:26px; border-top:1px solid var(--line); }
.cs-meta div .label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; }
.cs-meta div .value{ font-size:14px; font-weight:700; line-height:1.5; }

.cs-block{ padding:70px 0; border-top:1px solid var(--line); }
.cs-block .num-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); margin-bottom:20px; }
.cs-block h2{ font-size:clamp(26px,4vw,40px); font-weight:800; text-transform:lowercase; letter-spacing:-0.01em; max-width:760px; margin:0 0 26px; }
.cs-block .cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.cs-block p{ font-size:15px; line-height:1.8; color:rgba(var(--ink-rgb),0.82); margin:0 0 18px; }
.cs-block ul.bullets{ display:flex; flex-direction:column; gap:14px; }
.cs-block ul.bullets li{ font-size:14.5px; line-height:1.7; padding-left:24px; position:relative; color:rgba(var(--ink-rgb),0.82); }
.cs-block ul.bullets li::before{ content:"—"; position:absolute; left:0; color:var(--dim); }
.impact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0; margin-top:10px; }
.impact-stat{ padding:26px 24px 26px 0; border-top:1px solid var(--line); }
.impact-stat .num{ font-size:clamp(30px,4vw,46px); font-weight:800; letter-spacing:-0.02em; }
.impact-stat .lbl{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); margin-top:8px; }

/* ---------- process flow diagram (case studies) ---------- */
/* Used where a case study's workflow is genuinely sequential/decision-based
   (Fortuna's intake-to-compliance pipeline, Zeus's AI-matching pipeline) —
   not added to every case study, only where it clarifies a real process. */
.flow-diagram{ display:flex; align-items:stretch; gap:0; margin-top:36px; }
.flow-step{
  flex:1 1 0; min-width:0;
  border:1px solid var(--line-strong); border-radius:12px;
  padding:22px 20px; display:flex; flex-direction:column; gap:8px;
}
.flow-step .fn{ font-family:var(--font-mono); font-size:11px; color:var(--dim); }
.flow-step h4{ font-size:15.5px; font-weight:800; text-transform:lowercase; margin:0; letter-spacing:-0.01em; }
.flow-step p{ font-size:12.5px; line-height:1.6; color:var(--dim); margin:0; }
.flow-arrow{ flex:0 0 30px; display:flex; align-items:center; justify-content:center; color:var(--line-strong); font-size:16px; }
.flow-arrow::after{ content:"→"; }

/* ---------- journey map (before/after) ---------- */
/* Used where a case study is really about a lived process changing over
   time (Solis's request journey) rather than a single tool's workflow.
   Dashed borders = friction in the old process; solid = the resolved one —
   reuses the dashed-border language already established by .testi-card
   rather than introducing new accent colors into a black-and-white system. */
.journey-map{ margin-top:36px; display:flex; flex-direction:column; gap:26px; }
.journey-row{ display:flex; gap:20px; align-items:flex-start; }
.journey-row-label{ flex:0 0 84px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim); padding-top:22px; }
.journey-steps{ flex:1; display:flex; gap:14px; flex-wrap:wrap; }
.journey-step{ flex:1 1 160px; border:1px solid var(--line-strong); border-radius:12px; padding:18px; }
.journey-row.is-before .journey-step{ border-style:dashed; }
.journey-step h5{ font-size:14px; font-weight:800; margin:0 0 6px; text-transform:lowercase; letter-spacing:-0.01em; }
.journey-step p{ font-size:12px; line-height:1.6; color:var(--dim); margin:0; }
.journey-arrow{ display:none; }

.cs-nav{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.cs-nav a{ padding:44px var(--edge); }
.cs-nav a.prev{ border-right:1px solid var(--line); text-align:left; }
.cs-nav a.next{ text-align:right; }
.cs-nav .d{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
.cs-nav .t{ font-size:clamp(22px,3.6vw,34px); font-weight:800; text-transform:lowercase; }
.cs-nav a:hover .t{ opacity:0.5; }

/* ---------- resume page ---------- */
.timeline-item{ padding:40px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:180px 1fr; gap:32px; }
.timeline-item:last-child{ border-bottom:1px solid var(--line); }
.timeline-item .when{ font-family:var(--font-mono); font-size:12px; color:var(--dim); }
.timeline-item h3{ font-size:20px; font-weight:800; margin:0 0 4px; text-transform:lowercase; }
.timeline-item .co{ font-family:var(--font-mono); font-size:12px; color:var(--dim); margin-bottom:16px; }
.timeline-item ul.bullets{ display:flex; flex-direction:column; gap:10px; }
.timeline-item ul.bullets li{ font-size:13.5px; line-height:1.7; padding-left:20px; position:relative; color:rgba(var(--ink-rgb),0.82); }
.timeline-item ul.bullets li::before{ content:"—"; position:absolute; left:0; color:var(--dim); }

.skills-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px 60px; }
.skill-col .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim); margin-bottom:14px; }

/* ---------- contact ---------- */
.contact-hero{ padding:168px 0 40px; }
.contact-hero h1{ font-size:clamp(40px,8vw,110px); font-weight:800; text-transform:lowercase; letter-spacing:-0.02em; margin:0 0 24px; }
.contact-big-link{ display:block; font-size:clamp(26px,5.6vw,58px); font-weight:800; letter-spacing:-0.01em; padding:30px 0; border-top:1px solid var(--line); }
.contact-big-link:last-of-type{ border-bottom:1px solid var(--line); }
.contact-big-link:hover{ opacity:0.5; }

/* ---------- hero: word-reveal + status pill + featured case ---------- */
.reveal-line{ overflow:hidden; display:block; }
.reveal-line .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.08em; }
.reveal-line .word span{ display:inline-block; transform:translateY(112%); transition:transform 0.85s var(--ease); }
.reveal-line.in .word span{ transform:translateY(0); }

.status-pill{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line-strong); border-radius:999px; padding:10px 18px 10px 14px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; }
.status-pill .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,0.18); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.hero-feature{ margin-top:56px; border:1px solid var(--line-strong); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:1.15fr 1fr; }
.hero-feature .hf-visual{
  border-right:1px solid var(--line-strong); border-radius:0; aspect-ratio:auto;
  display:flex; align-items:center; justify-content:center; min-height:340px;
  padding:36px; background:var(--paper);
}
.hero-feature .hf-visual .device-mockup{ width:100%; max-width:480px; }
.hero-feature .hf-info{ padding:34px; display:flex; flex-direction:column; justify-content:space-between; gap:26px; }
.hero-feature .hf-info .hf-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dim); }
.hero-feature .hf-info h3{ font-size:clamp(22px,3vw,30px); font-weight:800; text-transform:lowercase; margin:10px 0 0; }
.hero-feature .hf-info p{ font-size:13.5px; line-height:1.7; color:var(--dim); margin:14px 0 0; }

/* ---------- process rhythm ---------- */
.process{ padding:150px 0 0; }
.process-line{ padding:46px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:120px 1fr; gap:28px; align-items:baseline; }
.process .process-line:last-child{ border-bottom:1px solid var(--line); }
.process-line .idx{ font-family:var(--font-mono); font-size:12px; color:var(--dim); }
.process-line h3{ font-size:clamp(22px,3.4vw,32px); font-weight:800; text-transform:lowercase; margin:0 0 10px; }
.process-line p{ font-size:14px; color:var(--dim); line-height:1.7; max-width:520px; margin:0; }

/* ---------- work: sticky scrollytelling ---------- */
.ss-work{ padding:150px 0 0; }

/* ---------- homepage section rhythm: consistent 100px gap between sections ---------- */
.section#services, .section#about, .section#recognition{ padding:150px 0 0; }
.ss-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--gap); align-items:start; }
.ss-sticky{ position:sticky; top:110px; }
.ss-visual-caption{ display:flex; justify-content:space-between; margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim); }
.ss-list{ display:flex; flex-direction:column; }
.ss-case{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding:40px 0; opacity:0.32; transition:opacity 0.5s var(--ease); }
.ss-case.active{ opacity:1; }
.ss-case .num{ font-family:var(--font-mono); font-size:12px; color:var(--dim); margin-bottom:14px; display:block; }
.ss-case h3{ font-size:clamp(28px,4.4vw,46px); font-weight:800; text-transform:lowercase; letter-spacing:-0.01em; margin:0 0 16px; }
.ss-case p{ font-size:14px; line-height:1.75; color:var(--dim); max-width:440px; margin:0 0 22px; }
.ss-case-meta{ display:flex; gap:32px; flex-wrap:wrap; margin-bottom:22px; }
.ss-case-meta div .label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); margin-bottom:4px; }
.ss-case-meta div .value{ font-size:13px; font-weight:700; }

/* ---------- services accordion ---------- */
.accordion{ display:flex; flex-direction:column; }
.accordion .acc-item{ border-top:1px solid var(--line); }
.accordion .acc-item:last-child{ border-bottom:1px solid var(--line); }
.acc-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 0; cursor:pointer; width:100%; text-align:left; }
.acc-head .acc-num{ font-family:var(--font-mono); font-size:12px; color:var(--dim); width:36px; flex-shrink:0; }
.acc-head h3{ font-size:clamp(24px,4vw,40px); font-weight:800; text-transform:lowercase; letter-spacing:-0.01em; margin:0; flex:1; }
.acc-head .acc-plus{ width:34px; height:34px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; transition:transform 0.5s var(--ease); }
.acc-head .acc-plus::before, .acc-head .acc-plus::after{ content:""; position:absolute; background:var(--ink); }
.acc-head .acc-plus::before{ width:12px; height:1px; }
.acc-head .acc-plus::after{ width:1px; height:12px; transition:transform 0.4s var(--ease); }
.acc-item.open .acc-head .acc-plus::after{ transform:scaleY(0); }
.acc-item.open .acc-head .acc-plus{ transform:rotate(180deg); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.55s var(--ease); }
.acc-item.open .acc-body{ grid-template-rows:1fr; }
.acc-body-inner{ overflow:hidden; }
.acc-content{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); padding:0 0 40px 46px; }
.acc-content p{ font-size:14.5px; line-height:1.8; color:var(--dim); margin:0 0 18px; }

/* ---------- about: sticky reveal (replaces agency "team" section) ---------- */
.about-ss{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--gap); align-items:start; }
.about-ss-sticky{ position:sticky; top:110px; }
.about-ss-lines{ display:flex; flex-direction:column; }
.about-ss-line{ min-height:32vh; display:flex; align-items:center; border-top:1px solid var(--line); }
.about-ss-lines .about-ss-line:last-child{ border-bottom:1px solid var(--line); }
.about-ss-line p{ font-size:clamp(20px,3vw,32px); font-weight:700; line-height:1.3; letter-spacing:-0.01em; margin:0; opacity:0.3; transition:opacity 0.5s var(--ease); }
.about-ss-line p b{ font-weight:800; }
.about-ss-line.active p{ opacity:1; }

/* ---------- recognition: badges + testimonial placeholder ---------- */
.badge-row{ display:flex; flex-wrap:wrap; gap:10px; }
.badge-row .chip{ padding:9px 16px; }
.testi-carousel{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.testi-carousel::-webkit-scrollbar{ display:none; }
.testi-card{ flex:0 0 min(420px,86vw); scroll-snap-align:start; border:1px dashed var(--line-strong); border-radius:14px; padding:30px; display:flex; flex-direction:column; justify-content:space-between; min-height:220px; }
.testi-card .tq{ font-size:14px; line-height:1.7; color:var(--dim); font-style:italic; }
.testi-card .tid{ display:flex; justify-content:space-between; align-items:baseline; margin-top:20px; font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--dim); }
.testi-nav{ display:flex; gap:10px; margin-top:24px; }
.testi-nav button{ width:38px; height:38px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background 0.3s, color 0.3s; }
.testi-nav button:hover{ background:var(--ink); color:var(--paper); }

/* ---------- footer: giant outline wordmark ---------- */
.footer-note{ font-size:13.5px; line-height:1.8; color:var(--dim); max-width:340px; }

/* giant wordmark, clipped to its top half so it reads as cut off by the very
   bottom edge of the page once you've scrolled all the way down */
.footer-word-clip{
  overflow:hidden;
  height:clamp(34px,7.4vw,116px);
}
.footer-word{
  font-size:clamp(60px,14vw,220px); font-weight:900; letter-spacing:-0.03em;
  text-transform:lowercase; color:transparent; -webkit-text-stroke:1px rgba(var(--ink-rgb),0.35);
  text-align:center; margin:0; line-height:0.75; user-select:none;
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .about-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .project-card{ grid-template-columns:1fr; }
  .screen-grid{ grid-template-columns:1fr; }
  .cs-meta{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ flex-direction:column; }
  .timeline-item{ grid-template-columns:1fr; gap:10px; }
  .skills-grid{ grid-template-columns:1fr; }
  .cs-nav{ grid-template-columns:1fr; }
  .cs-nav a.prev{ border-right:none; border-bottom:1px solid var(--line); }
  .scroll-cue{ display:none; }
  .hero-feature{ grid-template-columns:1fr; }
  .hero-feature .hf-visual{ border-right:none; border-bottom:1px solid var(--line-strong); min-height:0; aspect-ratio:auto; padding:24px; }
  .ss-grid{ grid-template-columns:1fr; }
  .ss-sticky{ position:relative; top:0; margin-bottom:20px; }
  .process-line{ grid-template-columns:1fr; gap:10px; }
  .acc-content{ grid-template-columns:1fr; padding-left:0; }
  .about-ss{ grid-template-columns:1fr; }
  .about-ss-sticky{ position:relative; top:0; margin-bottom:20px; }
  .badge-row{ gap:8px; }
  .flow-diagram{ flex-direction:column; }
  .flow-arrow{ height:26px; }
  .flow-arrow::after{ content:"↓"; }
  .journey-row{ flex-direction:column; gap:10px; }
  .journey-row-label{ padding-top:0; }
}

@media (max-width: 600px){
  .wrap{ padding:0 0px; }
  .hero{ padding:132px 0 48px; }
  .cs-hero, .contact-hero{ padding:132px 0 40px; }
  .section{ padding:64px 0; }
  .process, .ss-work, .section#services, .section#about, .section#recognition{ padding:64px 0 0; }
  .topbar{ padding:16px 0px; }
  .overlay{ padding:88px 18px 30px; }
  .overlay-nav a{ font-size:clamp(28px,10vw,44px); padding:14px 2px; }
  .meta-row{ gap:20px 28px; }
  .lede{ align-items:flex-start !important; }
  .hero-feature .hf-info{ padding:22px; }
  .cs-meta{ grid-template-columns:1fr 1fr; gap:18px 24px; }
  .impact-grid{ grid-template-columns:1fr 1fr; }
  .process-line{ padding:30px 0; }
  .ss-case{ min-height:auto; padding:32px 0; }
  .about-ss-line{ min-height:auto; padding:20px 0; }
  .acc-content{ gap:16px; padding-bottom:28px; }
  .acc-head{ padding:24px 0; gap:14px; }
  .acc-head h3{ font-size:22px; }
  .testi-card{ padding:22px; min-height:190px; }
  .footer-top{ gap:44px; }
  .footer-cols{ gap:36px; }
  .footer-word-clip{ height:clamp(22px,9vw,44px); }
  .contact-big-link{ font-size:clamp(18px,7vw,26px) !important; }
  .cs-nav a{ padding:30px 20px; }
}

/* =========================================================
   Custom cursor — a single small dot with a bit of stroke
   weight to it. Uses mix-blend-mode:difference so it
   auto-inverts against whatever's underneath (light or dark
   sections, images, buttons) without any theme-specific color
   logic. JS only activates this on fine-pointer, motion-OK
   devices, and adds .has-custom-cursor to <html>. ==== */
@media (pointer: fine){
  html.has-custom-cursor,
  html.has-custom-cursor a,
  html.has-custom-cursor button{ cursor:none; }

  /* Hovering something clickable hands back to the native pointer. */
  html.has-custom-cursor.cursor-native,
  html.has-custom-cursor.cursor-native a,
  html.has-custom-cursor.cursor-native button{ cursor:pointer; }
}

.cursor-dot{
  position:fixed;
  top:0; left:0;
  width:50px; height:50px;
  pointer-events:none;
  z-index:9999;
  border-radius:50%;
  background:#2435ea;
  mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity 0.2s ease;
}

.cursor-dot.is-visible{ opacity:1; }