:root{
  --ink:#0b0b0c;
  --surface:rgba(255,255,255,0.035);
  --surface-2:rgba(255,255,255,0.06);
  --text:#f3f1ee;
  --muted:#9c9aa1;
  --body:#c9c7c3;
  --line: rgba(255,255,255,0.09);
  --line-soft: rgba(255,255,255,0.06);
  --coral:#ff2f8a;
  --grad-a:#f61b7f;
  --grad-b:#c90070;
  --grad-c:#e14a30;
  --grad-d:#ffa353;
  --grad-e:#fff1b8;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:8px;
  --maxw:1360px;
  --font-head:'General Sans', 'Inter', sans-serif;
  /* section overrides (used inside .light-section — now a dark variant, kept the name to avoid touching markup) */
  --l-bg:#121114;
  --l-text:#f3f1ee;
  --l-muted:#9c9aa1;
  --l-body:#c9c7c3;
  --l-line: rgba(255,255,255,0.1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:clip; max-width:100%;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',-apple-system,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-0.02em;margin:0;}
p{margin:0;}
button{font-family:inherit;}

/* grain overlay */
body::after{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:0.05;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:999;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 64px;}

/* ---------- hero gradient field — scoped to the hero only, this is where the gradient is fullest ---------- */
.gradient-field{
  position:absolute; inset:0; top:0; left:0; right:0;
  height:100%; width:100%;
  z-index:0; overflow:hidden; pointer-events:none;
}
.gradient-field .wash{
  position:absolute; inset:-10% -15%;
  background: linear-gradient(160deg,
    var(--grad-a) 0%,
    var(--grad-b) 32%,
    var(--grad-c) 64%,
    var(--grad-d) 100%
  );
  opacity:0.62;
  animation: washShift 40s ease-in-out infinite alternate;
}
@keyframes washShift{
  0%{ transform: translateY(0) scale(1.02); }
  100%{ transform: translateY(-2%) scale(1.06); }
}
.gradient-field span{
  position:absolute;
  border-radius:50%;
  filter: blur(110px);
  opacity:0.55;
  will-change:transform;
}
.gradient-field .g1{ top:2%;   left:4%;  width:60vw; height:60vw; background:var(--grad-a); animation: floatA 22s ease-in-out infinite alternate; }
.gradient-field .g2{ top:16%;  left:52%; width:54vw; height:54vw; background:var(--grad-d); animation: floatB 26s ease-in-out infinite alternate; }
.gradient-field .g3{ top:34%;  left:-4%; width:56vw; height:56vw; background:var(--grad-b); animation: floatA 24s ease-in-out infinite alternate-reverse; }
.gradient-field .g4{ top:50%;  left:44%; width:60vw; height:60vw; background:var(--grad-c); animation: floatB 20s ease-in-out infinite alternate; }
.gradient-field .g5{ top:68%;  left:0%;  width:56vw; height:56vw; background:var(--grad-e); opacity:0.32; animation: floatA 28s ease-in-out infinite alternate; }
.gradient-field .g6{ top:84%;  left:46%; width:58vw; height:58vw; background:var(--grad-a); opacity:0.45; animation: floatB 25s ease-in-out infinite alternate-reverse; }
@keyframes floatA{ 0%{ transform: translate(0,0) scale(1); } 100%{ transform: translate(3%,4%) scale(1.15); } }
@keyframes floatB{ 0%{ transform: translate(0,0) scale(1); } 100%{ transform: translate(-4%,-3%) scale(1.12); } }

.page{position:relative; z-index:1;}

/* ---------- "light" sections (portfolio grid, skills) — dark surface, one localized glow ---------- */
.light-section{
  position:relative; z-index:2;
  background:var(--l-bg);
  color:var(--l-text);
  padding:120px 5vw;
  overflow:hidden;
}
.light-section .wrap{position:relative; z-index:1;}
.light-section .tag-pill.light{color:var(--l-muted);}
.light-section h2{color:var(--l-text);}
.light-section h2 .dim{color:#726f68;}
.proj-glow{
  position:absolute; top:-18%; left:-12%; width:44%; height:62%;
  background:radial-gradient(circle, var(--grad-d) 0%, var(--grad-c) 50%, transparent 72%);
  filter:blur(110px); opacity:0.32; z-index:0; pointer-events:none;
}
.skills-glow{
  position:absolute; bottom:-22%; right:-10%; width:44%; height:66%;
  background:radial-gradient(circle, var(--grad-a) 0%, var(--grad-b) 50%, transparent 72%);
  filter:blur(110px); opacity:0.32; z-index:0; pointer-events:none;
}

/* ---------- tag pill (used across many blocks) ---------- */
.tag-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:20px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted);
}
.tag-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--coral); flex-shrink:0;}
.tag-pill.light{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:var(--l-muted);}

/* ---------- icon badge (small pictogram squares) ---------- */
.icon-badge{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:var(--coral);
}
.icon-badge.light{background:rgba(255,255,255,0.06); border-color:var(--l-line); color:var(--coral);}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 64px;
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 32px rgba(0,0,0,0.22);
}
.nav .logo{font-family:'Inter',sans-serif; font-weight:700; font-size:15px; letter-spacing:0.06em;}
.nav-links{
  display:flex; gap:min(9vw,140px); align-items:center;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a{font-size:14px;font-weight:500;color:var(--text);opacity:0.85;transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.nav-right{display:flex;align-items:center;gap:16px;}
.nav-cta{padding:10px 20px; font-size:13px;}
.nav-icon-btn{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.16);color:#fff;flex-shrink:0;
}
.nav-icon-btn.nav-mail-btn{display:none;}
.nav-icon-btn svg{width:16px;height:16px;}
.nav-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:4px;}
.nav-toggle svg{width:22px;height:22px;}

/* ---------- glass button ---------- */
.btn-glass{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px;
  border-radius:30px;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 30px rgba(0,0,0,0.3);
  color:#fff; font-weight:600; font-size:14px;
  cursor:pointer; transition:transform .25s ease, background .25s ease;
  position:relative; overflow:hidden;
}
.btn-glass:hover{background:rgba(255,255,255,0.18); transform:translateY(-2px);}
/* shimmer sweep — a thin band of light glides across the glass on hover */
.btn-glass::before{
  content:""; position:absolute; top:0; left:-45%; width:35%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform:skewX(-18deg); pointer-events:none;
  transition:left .65s cubic-bezier(.22,.7,.3,1);
}
.btn-glass:hover::before{left:135%;}
.btn-glass.no-pad{padding:14px 26px;}

/* =====================================================================
   HERO — big ghost wordmark + bleeding portrait, copy bottom-right
   ===================================================================== */
.hero-riwa{
  position:relative;
  aspect-ratio:1440/640;
  min-height:560px;
  max-height:800px;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
  transform:scale(1.08);
  animation:heroKenBurns 2.8s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroKenBurns{ from{transform:scale(1.08);} to{transform:scale(1);} }
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(9,9,10,0.62) 0%, rgba(9,9,10,0.22) 32%, rgba(9,9,10,0) 58%);
}
.hero-label{
  position:absolute; left:5vw; bottom:6%; z-index:3;
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em;
  color:#fff; white-space:nowrap;
  opacity:0; animation:heroFadeUp .7s ease .2s forwards;
}
.hero-riwa-inner{
  position:absolute; z-index:3; right:5vw; bottom:9%;
  width:min(340px,30vw);
}
@keyframes heroFadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }
.hero-eyebrow{font-family:var(--font-head); font-size:16px; font-weight:500; letter-spacing:0.01em; color:#edebe5; margin-bottom:12px;}
.hero-eyebrow span{display:inline-block; opacity:0; transform:translateY(20px); animation:heroFadeUp .7s ease forwards;}
.hero-eyebrow span:nth-child(1){animation-delay:.4s;}
.hero-eyebrow span:nth-child(2){animation-delay:.5s;}
.hero-eyebrow span:nth-child(3){animation-delay:.6s;}
.hero-eyebrow span:nth-child(4){animation-delay:.7s;}
.hero-riwa-inner p{font-size:15px; color:#fff; font-weight:300; line-height:1.5; margin-bottom:24px; opacity:0; animation:heroFadeUp .7s ease .85s forwards;}
.hero-riwa-inner .btn-glass{opacity:0; animation:heroFadeUp .7s ease 1s forwards;}

.sparkle{position:absolute; color:rgba(255,255,255,0.55); font-size:16px; z-index:2; animation:twinkle 3.2s ease-in-out infinite;}
.sparkle.s2{animation-delay:.8s;}
.sparkle.s3{animation-delay:1.6s;}
.sparkle.s4{animation-delay:2.2s;}
@keyframes twinkle{0%,100%{opacity:0.25; transform:scale(0.85);}50%{opacity:0.9; transform:scale(1.1);}}

/* =====================================================================
   INSERT.LINK — dedicated dark block with right-side gradient bleed
   ===================================================================== */
.dark-flow{
  position:relative; z-index:2; overflow:hidden;
  background:linear-gradient(165deg, #0b0b0c 0%, #1c0a12 20%, #0e0a0d 38%, #1a0b09 58%, #0b0b0c 78%, #170a10 100%);
  background-size:260% 260%;
  animation:darkFlowMove 26s ease-in-out infinite;
}
@keyframes darkFlowMove{0%{background-position:15% 10%;} 50%{background-position:85% 90%;} 100%{background-position:15% 10%;}}
.dark-flow .numbers-block, .dark-flow .il-block, .dark-flow .light-section{background:transparent; overflow:visible;}
.il-block{position:relative; z-index:2; padding:130px 5vw; overflow:hidden;}
.il-block .il-glow{
  position:absolute; top:-10%; right:-10%; width:56%; height:110%;
  background:radial-gradient(circle, var(--grad-a) 0%, var(--grad-c) 45%, transparent 72%);
  filter:blur(90px); opacity:0.35; z-index:0; pointer-events:none;
}
.il-head{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:70px; flex-wrap:wrap;}
.il-head h2{font-size:clamp(34px,5vw,64px); line-height:1.0; max-width:640px;}
.il-head h2 .dim{color:rgba(255,255,255,0.4);}
.il-head p{font-size:16px; color:var(--body); max-width:440px; margin-top:0;}

.il-cards{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr);}
.il-card{
  padding:0 26px; position:relative;
  border-left:1px solid var(--line-soft);
}
.il-card:first-child{padding-left:0; border-left:none;}
.il-card .icon-badge{margin-bottom:22px;}
.il-card .eyebrow-sm{font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.il-card h4{font-size:17px; color:#fff; margin-bottom:10px;}
.il-card p{font-size:13.5px; color:var(--muted); line-height:1.5;}
.il-card .big-num{
  position:absolute; right:14px; bottom:-6px; font-size:60px; font-weight:700; font-family:var(--font-head);
  color:rgba(255,255,255,0.05); z-index:-1; line-height:1;
}

.il-visual{
  position:relative; z-index:1; margin-top:70px;
  aspect-ratio:16/8; overflow:hidden;
  clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px);
}
.il-visual img{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) brightness(0.65);}
.il-visual video{width:100%; height:100%; object-fit:cover; filter:saturate(0.85) brightness(0.65); display:block;}
.il-visual .il-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,0.35) 0%, rgba(11,11,12,0.75) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  text-align:center; padding:20px;
}
.il-visual h3{font-size:clamp(22px,4vw,42px); color:#fff; max-width:820px; line-height:1.08;}
.il-hover-video{cursor:pointer;}
.il-hover-video .il-play-hint{
  position:absolute; top:24px; left:28px; z-index:2;
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.75); display:flex; align-items:center; gap:8px;
}
.il-hover-video .il-play-hint::before{content:"▸"; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.16); font-size:9px;}

/* ---------- Insert.Link — extended case content (description, conference, screenshots) ---------- */
.il-more{position:relative; z-index:1; margin-top:56px; max-width:760px;}
.il-more p{font-size:15.5px; color:var(--body); line-height:1.65;}
.il-more p + p{margin-top:14px;}

.il-conf{position:relative; z-index:1; margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:640px;}
.il-conf figure{margin:0;}
.il-conf img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:14px; filter:saturate(0.92) brightness(0.94); border:1px solid var(--line-soft);}
.il-conf figcaption{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.4;}

.il-shots{position:relative; z-index:1; margin-top:56px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.il-shot{height:180px; border-radius:10px; overflow:hidden; border:1px solid var(--line-soft); background:var(--surface);}
.il-shot img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.il-shots-cap{position:relative; z-index:1; font-size:12px; color:var(--muted); margin-top:14px;}

/* =====================================================================
   MY PROJECTS — light, sparse, asymmetric grid
   ===================================================================== */
.projects-head{margin-bottom:60px;}
.projects-head h2{font-size:clamp(36px,6vw,72px); line-height:0.96; margin-bottom:0;}
.projects-head p{font-size:15.5px; color:var(--l-body); max-width:420px;}

.proj-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:26px;}
.proj-card{grid-column:span 3; display:flex; flex-direction:column;}
.proj-card .p-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--l-line); margin-bottom:14px;
}
.proj-card .p-head .p-name{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--l-text);}
.proj-card .p-head .p-name .dot{width:6px;height:6px;border-radius:2px;background:var(--coral);}
.proj-card .p-head .p-tag{font-size:11px; color:var(--l-muted); font-family:'Courier New',monospace;}
.proj-card .thumb{
  width:100%; border-radius:2px; overflow:hidden;
  background:linear-gradient(135deg, var(--surface-2), var(--surface));
  border:1px solid var(--l-line);
  filter:grayscale(1);
}
.proj-card .thumb img{width:100%; height:100%; object-fit:cover;}
.proj-card .p-cap{font-size:12.5px; color:var(--l-muted); margin-top:12px; max-width:320px;}

.proj-grid .pc1{grid-column:span 3;}
.proj-grid .pc1 .thumb{aspect-ratio:4/5;}
.proj-grid .pc2{grid-column:span 3; margin-top:90px;}
.proj-grid .pc2 .thumb{aspect-ratio:16/11;}
.proj-grid .pc3{grid-column:span 2; margin-top:20px;}
.proj-grid .pc3 .thumb{aspect-ratio:3/4;}
.proj-grid .pc4{grid-column:span 4; margin-top:-40px;}
.proj-grid .pc4 .thumb{aspect-ratio:16/10;}
.proj-grid .pc5{grid-column:span 4; margin-top:60px;}
.proj-grid .pc5 .thumb{aspect-ratio:16/9;}
.proj-grid .pc6{grid-column:span 2; margin-top:100px;}
.proj-grid .pc6 .thumb{aspect-ratio:3/4;}

/* =====================================================================
   DESIGN SYSTEMS — Editorial.Link, Shared.Domains, Listicle + shared system
   ===================================================================== */
.dsys-glow{
  position:absolute; top:-16%; right:-12%; width:46%; height:64%;
  background:radial-gradient(circle, var(--grad-a) 0%, var(--grad-b) 50%, transparent 72%);
  filter:blur(110px); opacity:0.3; z-index:0; pointer-events:none;
}
.dsys-cover{
  position:relative; z-index:1; margin-bottom:90px;
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(150deg, var(--grad-b) 0%, var(--grad-c) 45%, var(--grad-d) 100%);
  padding:52px 5vw;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.dsys-cover-logos{display:flex; align-items:center; gap:34px; flex-wrap:wrap;}
.dsys-cover-logos img{height:30px; width:auto; filter:brightness(0) invert(1); opacity:0.95;}
.dsys-cover-text{max-width:360px;}
.dsys-cover-text h3{font-size:clamp(20px,2.6vw,28px); color:#fff; line-height:1.15; margin-bottom:10px;}
.dsys-cover-text p{font-size:13.5px; color:rgba(255,255,255,0.85); line-height:1.5;}

.dsys-grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.dsys-card{
  background:#18171a; border:1px solid var(--l-line); border-radius:var(--radius-md);
  padding:28px 24px; display:flex; flex-direction:column; gap:16px;
  text-decoration:none; transition:transform .25s ease, border-color .25s ease;
}
.dsys-card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,0.28);}
.dsys-logo{height:24px; width:auto; max-width:120px; object-fit:contain; filter:brightness(0) invert(1); opacity:0.95;}
.dsys-card p{font-size:13px; color:var(--l-muted); line-height:1.55; flex:1;}
.dsys-video{
  position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden; margin:-4px -4px 4px;
  border:1px solid var(--l-line); cursor:pointer;
}
.dsys-video video{width:100%; height:100%; object-fit:cover; display:block;}
.dsys-video .il-play-hint{top:10px; left:12px; font-size:9.5px;}
.dsys-video .il-play-hint::before{width:16px; height:16px; font-size:7px;}
.dsys-card-mockup{position:relative; overflow:visible; padding-top:150px;}
.dsys-mockup{
  position:absolute; top:-46px; left:50%; transform:translateX(-50%);
  width:88%; z-index:2; pointer-events:none;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,0.5));
}
.dsys-mockup img{width:100%; height:auto; display:block;}
.dsys-link{font-size:12px; font-weight:600; color:var(--grad-d);}
.dsys-card-system{background:linear-gradient(155deg, var(--grad-a) 0%, var(--grad-b) 30%, var(--grad-c) 60%, var(--grad-d) 100%);}
.dsys-card-system p{color:rgba(255,255,255,0.85);}
.dsys-card-system .dsys-link{color:#fff;}
.dsys-badge{
  width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; flex-shrink:0; color:#fff;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.3);
}
.dsys-card-system h4{font-size:16px; color:#fff;}

/* =====================================================================
   FREELANCE PROJECTS — chaotic/masonry grid on an animated dark gradient
   ===================================================================== */
@keyframes freelanceGradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.freelance-section{
  background:linear-gradient(120deg, #0b0b0c 0%, #2b0f1a 24%, #7a2a1a 50%, #1c0e16 76%, #0b0b0c 100%);
  background-size:400% 400%;
  animation:freelanceGradientMove 8s ease infinite;
  color:var(--text);
}
.freelance-section .proj-glow{opacity:0.22;}
.freelance-section .tag-pill.light{background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.16); color:rgba(255,255,255,0.75);}
.freelance-section h2{color:#fff;}
.freelance-section h2 .dim{color:rgba(255,255,255,0.4);}
.freelance-section .projects-head p{color:rgba(255,255,255,0.7);}

.freelance-grid{position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,1fr); gap:88px; text-align:left;}
.fl-card{
  grid-column:span 3; align-self:start;
  text-decoration:none; display:flex; flex-direction:column; gap:16px;
  background:rgba(255,255,255,0.06); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.16); border-radius:var(--radius-md);
  padding:26px; transition:transform .25s ease, border-color .25s ease;
}
.fl-card:hover{transform:translateY(-4px); border-color:rgba(255,255,255,0.32);}
.fl-card:nth-child(1){margin-top:0;}
.fl-card:nth-child(2){grid-column:span 3; margin-top:130px;}
.fl-card:nth-child(3){grid-column:span 4; margin-top:20px;}
.fl-card:nth-child(4){grid-column:span 2; margin-top:96px;}

.fl-video{position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; cursor:pointer; border:1px solid rgba(255,255,255,0.14);}
.fl-video video{width:100%; height:100%; object-fit:cover; display:block;}
.fl-card .p-head{border-bottom-color:rgba(255,255,255,0.14);}
.fl-card .p-head .p-name{color:#fff;}
.fl-card .p-head .p-tag{color:rgba(255,255,255,0.55);}
.fl-card .p-cap{max-width:none; color:rgba(255,255,255,0.65);}
.fl-card .btn-glass{align-self:flex-start; margin-top:4px;}

/* =====================================================================
   SKILLS — light, staggered stack with torn right edge
   ===================================================================== */
.skills-light{padding-top:70px;}
.skills-block-inner{display:flex; gap:60px; align-items:flex-start; flex-wrap:wrap;}
.skills-left{flex:1; min-width:260px; position:sticky; top:48px; align-self:flex-start;}
.skills-left h2{font-size:clamp(34px,4.6vw,58px); line-height:1.0;}
.skills-stack{flex:1.3; min-width:320px; display:flex; flex-direction:column; gap:22px;}
.skill-card{
  background:#18171a; padding:26px 46px 26px 26px; position:relative;
  border:1px solid var(--l-line);
  box-shadow:0 1px 3px rgba(0,0,0,0.2), 0 10px 30px -14px rgba(0,0,0,0.5);
  clip-path: polygon(0% 0%, 96% 0%, 100% 7%, 95% 14%, 100% 21%, 95% 28%, 100% 35%, 95% 42%, 100% 49%, 95% 56%, 100% 63%, 95% 70%, 100% 77%, 95% 84%, 100% 91%, 95% 98%, 100% 100%, 0% 100%);
}
.skill-card .row{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.skill-card .num{font-size:12px; color:var(--l-muted); font-family:'Courier New',monospace;}
.skill-card h4{font-size:18px; color:var(--l-text); margin-bottom:8px;}
.skill-card p{font-size:13.5px; color:var(--l-muted); max-width:380px;}

/* =====================================================================
   ABOUT — full-width B&W banner + broken-up copy + values list
   ===================================================================== */
.about-banner{width:100%; aspect-ratio:21/7; overflow:hidden;}
.about-banner img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; filter:grayscale(1) contrast(1.05);}
.about-dark{position:relative; z-index:2; padding:90px 5vw 110px; overflow:hidden;}
.about-dark .wrap{position:relative; z-index:1;}
.about-glow{
  position:absolute; top:-25%; left:-10%; width:48%; height:75%;
  background:radial-gradient(circle, var(--grad-c) 0%, var(--grad-d) 48%, transparent 72%);
  filter:blur(100px); opacity:0.34; z-index:0; pointer-events:none;
}
.about-copy{display:flex; gap:60px; flex-wrap:wrap; margin-bottom:80px;}
.about-copy p{font-size:clamp(19px,2.4vw,26px); color:var(--text); line-height:1.35; max-width:540px; flex:1; min-width:280px; font-family:var(--font-head); font-weight:500;}
.about-values{border-top:1px solid var(--line-soft); padding-top:44px; display:flex; gap:60px; flex-wrap:wrap;}
.about-values .av-label{flex:0 0 200px;}
.about-values .av-list{flex:1; min-width:280px; display:flex; flex-direction:column; gap:34px;}
.about-values .av-item h4{font-size:16px; color:#fff; margin-bottom:8px;}
.about-values .av-item p{font-size:14px; color:var(--muted); max-width:520px; line-height:1.55;}

/* =====================================================================
   NUMBERS — "Numbers don't lie" style proof strip
   ===================================================================== */
.numbers-block{position:relative; z-index:2; padding:120px 5vw; overflow:hidden;}
.numbers-block .wrap{position:relative; z-index:1;}
.numbers-glow{
  position:absolute; bottom:-28%; right:-10%; width:46%; height:80%;
  background:radial-gradient(circle, var(--grad-a) 0%, var(--grad-b) 50%, transparent 72%);
  filter:blur(100px); opacity:0.32; z-index:0; pointer-events:none;
}
.numbers-top{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; margin-bottom:56px;}
.numbers-top h2{font-size:clamp(38px,7vw,84px); line-height:0.94;}
.numbers-top p{font-size:15px; color:var(--body); max-width:340px; text-align:right;}
.numbers-rule{border-top:1px dashed var(--line); margin-bottom:46px;}
.numbers-row{display:grid; grid-template-columns:repeat(4,1fr); gap:30px;}
.numbers-row .n-item{border-left:1px solid var(--line-soft); padding-left:22px;}
.numbers-row .n-item:first-child{border-left:none; padding-left:0;}
.numbers-row .n-val{font-family:var(--font-head); font-weight:700; font-size:clamp(38px,4.4vw,58px); line-height:1; color:#fff;}
.numbers-row .n-val .accent{color:inherit; font-weight:inherit;}
.numbers-row .n-cap{font-size:13px; color:var(--muted); margin-top:10px; max-width:180px;}

/* =====================================================================
   CONTACT / FOOTER — vivid gradient, styled fields, timezone widget
   ===================================================================== */
footer{position:relative; z-index:2; padding:130px 5vw 60px; overflow:hidden;}
.footer-grad{
  position:absolute; inset:0; z-index:-1; background:#08080a;
}
.footer-grad::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 42% 38% at 14% 10%, var(--grad-a) 0%, transparent 68%),
    radial-gradient(ellipse 38% 34% at 90% 14%, var(--grad-d) 0%, transparent 66%),
    radial-gradient(ellipse 50% 42% at 50% 108%, var(--grad-c) 0%, transparent 70%),
    radial-gradient(ellipse 34% 30% at 96% 92%, var(--grad-b) 0%, transparent 66%),
    radial-gradient(ellipse 30% 26% at 2% 88%, var(--grad-e) 0%, transparent 64%);
  background-repeat:no-repeat;
  background-size:220% 220%, 220% 220%, 240% 240%, 200% 200%, 200% 200%;
  filter:blur(10px);
  opacity:0.85;
  animation:footerBloom 26s ease-in-out infinite;
}
.footer-grad::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:0.16;
  mix-blend-mode:overlay;
  pointer-events:none;
}
@keyframes footerBloom{
  0%{background-position:0% 0%, 100% 0%, 50% 100%, 100% 100%, 0% 100%;}
  50%{background-position:25% 20%, 75% 30%, 40% 85%, 85% 75%, 15% 80%;}
  100%{background-position:0% 0%, 100% 0%, 50% 100%, 100% 100%, 0% 100%;}
}
footer .cta-label{color:rgba(255,255,255,0.85);}
footer .tag-pill{background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.3); color:#fff;}
footer .tag-pill .dot{background:#fff;}
footer h2{font-size:clamp(42px,7.5vw,90px); color:#fff; line-height:0.96; margin:22px 0 26px;}
.footer-top{display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:40px; margin-bottom:70px;}
.footer-top .f-copy{align-self:start;}
.footer-top .f-copy p{font-size:15px; color:rgba(255,255,255,0.85); margin-top:18px; line-height:1.55; max-width:380px;}
.footer-fields{max-width:460px; margin-left:auto; align-self:start;}
.footer-field{padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.3); position:relative;}
.footer-field .fl{font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.65); margin-bottom:6px;}
.footer-field a, .footer-field .fv{font-size:17px; color:#fff; font-weight:500;}
.footer-field a:hover{opacity:0.8;}
.footer-cta-row{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:34px; flex-wrap:wrap;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
  padding-top:60px; margin-top:60px; border-top:1px solid rgba(255,255,255,0.22);
}
.tz-widget{display:flex; gap:36px; flex-wrap:wrap;}
.tz-item{display:flex; align-items:center; gap:10px;}
.tz-item .tz-dot{width:7px;height:7px;border-radius:50%;background:#fff; flex-shrink:0;}
.tz-item .tz-time{font-family:'Courier New',monospace; font-size:13px; font-weight:700; color:#fff;}
.tz-item .tz-place{font-size:11px; color:rgba(255,255,255,0.75); letter-spacing:0.04em;}
.footer-legal{font-size:11px; color:rgba(255,255,255,0.6); max-width:280px; text-align:right;}
.footer-legal a{text-decoration:underline;}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- staggered children (numbers row, il-cards, dsys-grid, freelance-grid, skills-stack) ---------- */
.stagger-item{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.stagger-item.in-view{opacity:1; transform:translateY(0);}
.stagger-item:nth-child(1){transition-delay:.05s;}
.stagger-item:nth-child(2){transition-delay:.15s;}
.stagger-item:nth-child(3){transition-delay:.25s;}
.stagger-item:nth-child(4){transition-delay:.35s;}
/* freelance grid follows its own masonry offsets (card 1, 3, 4, 2 top-to-bottom), not DOM order */
.freelance-grid .fl-card:nth-child(1){transition-delay:.05s;}
.freelance-grid .fl-card:nth-child(3){transition-delay:.15s;}
.freelance-grid .fl-card:nth-child(4){transition-delay:.25s;}
.freelance-grid .fl-card:nth-child(2){transition-delay:.35s;}
.count-num{font-variant-numeric:tabular-nums;}

/* ---------- scale-in reveal (Insert.Link demo visual) ---------- */
.reveal-scale{opacity:0; transform:scale(0.94); transition:opacity .8s ease, transform .8s cubic-bezier(.16,.8,.24,1);}
.reveal-scale.in-view{opacity:1; transform:scale(1);}

/* ---------- clip unroll reveal (Design Systems gradient banner) ---------- */
.reveal-clipx{clip-path:inset(0 100% 0 0); transition:clip-path .9s cubic-bezier(.22,.9,.3,1);}
.reveal-clipx.in-view{clip-path:inset(0 0 0 0);}

/* ---------- footer CTA one-time pulse, fired after the heading rises into view ---------- */
@keyframes ctaPulseOnce{
  0%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 30px rgba(0,0,0,0.3), 0 0 0 0 rgba(255,255,255,0);}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 30px rgba(0,0,0,0.3), 0 0 0 10px rgba(255,255,255,0.12);}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 30px rgba(0,0,0,0.3), 0 0 0 0 rgba(255,255,255,0);}
}
.footer-cta-row .btn-glass.pulse-once{animation:ctaPulseOnce 1.6s ease-out 1;}

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

/* ---------- case study pages ---------- */
.cs-header{padding:150px 64px 50px; position:relative; z-index:2; overflow:hidden;}
.cs-header-glow{
  position:absolute; top:-30%; right:-15%; width:60%; height:130%;
  background:radial-gradient(circle, var(--grad-a) 0%, var(--grad-c) 45%, transparent 72%);
  filter:blur(100px); opacity:0.4; z-index:0; pointer-events:none;
}
.cs-header .tag, .cs-header h1, .cs-header .sub{position:relative; z-index:1;}
.cs-header .tag{font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--grad-d); margin-bottom:18px;}
.cs-header h1{font-size:clamp(38px,6.5vw,64px); color:#fff; margin-bottom:20px; line-height:1.02;}
.cs-header .sub{font-size:17px; color:var(--body); max-width:640px;}

.overview-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding:36px 64px; margin:20px 0 20px; position:relative; z-index:2;
}
.overview-strip .item .label{font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.overview-strip .item .val{font-size:13.5px; font-weight:500; color:var(--text);}

/* ---------- case-study color-block sections (freelance cases) ---------- */
.cs-block{padding:76px 64px; position:relative; z-index:2; overflow:hidden; margin-top:6px;}
.cs-block-inner{max-width:1120px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.cs-block .eyebrow{font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:16px; opacity:0.8;}
.cs-block h3{font-size:clamp(24px,3vw,32px); line-height:1.16; margin-bottom:16px;}
.cs-block p{font-size:15.5px; line-height:1.62; max-width:460px;}
.cs-block-img{border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -18px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);}
.cs-block-img img{width:100%; height:auto; display:block;}

.cs-block.dark{background:#0b0b0c; color:var(--body);}
.cs-block.dark .eyebrow{color:var(--grad-d);}
.cs-block.dark h3{color:#fff;}

.cs-block.plain{background:#17161a; color:var(--body);}
.cs-block.plain .eyebrow{color:var(--grad-d);}
.cs-block.plain h3{color:#fff;}

.cs-block.accent{background:linear-gradient(135deg, var(--grad-c) 0%, var(--grad-b) 100%);}
.cs-block.accent .eyebrow{color:rgba(20,6,3,0.62);}
.cs-block.accent h3{color:#1a0705;}
.cs-block.accent p{color:rgba(20,6,3,0.8);}
.cs-block.accent .cs-block-img{box-shadow:0 30px 60px -18px rgba(0,0,0,0.35);}

.cs-block.warm{background:linear-gradient(135deg, var(--grad-d) 0%, var(--grad-e) 100%);}
.cs-block.warm .eyebrow{color:rgba(30,16,3,0.58);}
.cs-block.warm h3{color:#241304;}
.cs-block.warm p{color:rgba(30,16,3,0.78);}
.cs-block.warm .cs-block-img{box-shadow:0 30px 60px -18px rgba(0,0,0,0.3);}

.cs-block-full{padding:0; position:relative; z-index:2; overflow:hidden;}
.cs-block-full img{width:100%; height:auto; display:block;}
.cs-block-full .cs-block-full-cap{padding:16px 64px; font-size:12.5px; color:var(--muted); background:#0b0b0c;}

/* =========================================================
   CS2 — editorial case-study template (bold, asymmetric)
   ========================================================= */
.cs2{position:relative; z-index:2;}
.cs2-section{position:relative; overflow:hidden; padding:100px 64px;}
.cs2-section.tight{padding:64px 64px;}
.cs2-inner{max-width:1360px; margin:0 auto; position:relative; z-index:2;}

.cs2-dark{background:#0b0b0c; color:var(--body);}
.cs2-light{background:#f2efe9; color:#0e0d0c;}
.cs2-accent{background:linear-gradient(125deg, var(--grad-c) 0%, var(--coral) 55%, var(--grad-b) 100%); color:#fff;}

/* eyebrow / corner label */
.cs2-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  margin-bottom:18px; opacity:0.7;
}
.cs2-eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}

/* oversized editorial headline */
.cs2-mega{
  font-family:var(--font-head); font-weight:700; letter-spacing:-0.03em;
  font-size:clamp(52px,9.5vw,150px); line-height:0.92; margin:0 0 20px;
}
.cs2-mega.small{font-size:clamp(38px,6vw,88px);}
.cs2-sub{font-size:clamp(15px,1.6vw,18px); line-height:1.55; max-width:480px; opacity:0.86;}

/* hero */
.cs2-hero{
  padding:150px 64px 90px; position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--grad-a) 0%, var(--grad-c) 18%, var(--grad-b) 38%, var(--grad-d) 58%, var(--grad-e) 74%, var(--grad-a) 100%);
  background-size:500% 500%;
  animation:cs2GradientMove 16s ease infinite;
}
@keyframes cs2GradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.cs2-hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,7,8,0.32) 0%, rgba(8,7,8,0.5) 55%, rgba(8,7,8,0.72) 100%); z-index:1;}
.cs2-hero-inner{position:relative; z-index:2;}
.cs2-hero .cs2-mega{color:#fff; text-shadow:0 6px 40px rgba(0,0,0,0.35);}
.cs2-hero-meta{
  display:flex; flex-wrap:wrap; gap:36px; margin-top:56px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,0.2);
}
.cs2-hero-meta .item .label{font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:6px;}
.cs2-hero-meta .item .val{font-size:14px; font-weight:500; color:#fff;}

/* asymmetric two-part grid: 12 columns, use per-block spans */
.cs2-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:28px; align-items:center;}
.cs2-c5{grid-column:span 5;}
.cs2-c6{grid-column:span 6;}
.cs2-c7{grid-column:span 7;}
.cs2-c8{grid-column:span 8;}
.cs2-c4{grid-column:span 4;}

/* tilted / offset image cards */
.cs2-card{border-radius:14px; overflow:hidden; box-shadow:0 40px 80px -24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);}
.cs2-card img{width:100%; height:auto; display:block;}
.cs2-tilt{transform:rotate(0deg);}
.cs2-tilt-r{transform:rotate(0deg);}
.cs2-offset-up{margin-top:-40px;}
.cs2-offset-down{margin-top:40px;}

.cs2-stat-big{font-family:var(--font-head); font-weight:700; font-size:clamp(46px,6vw,84px); line-height:1; letter-spacing:-0.02em;}
.cs2-stat-cap{font-size:12.5px; margin-top:8px; opacity:0.75; max-width:200px;}
.cs2-stat-row{display:flex; gap:56px; flex-wrap:wrap;}

/* full-bleed photo block w/ split overlay headline */
.cs2-photo{position:relative; min-height:64vh; display:flex; align-items:flex-end; overflow:hidden;}
.cs2-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.cs2-photo-scrim{position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,5,6,0.82) 0%, rgba(6,5,6,0.15) 55%, rgba(6,5,6,0.5) 100%); z-index:1;}
.cs2-photo-content{position:relative; z-index:2; width:100%; padding:0 64px 56px;}
.cs2-photo .cs2-mega{color:#fff; max-width:900px;}

/* mobile screens showcase */
.cs2-mobile-row{display:flex; gap:32px; justify-content:center; flex-wrap:wrap; margin-top:56px;}
.cs2-phone{width:220px; flex-shrink:0;}
.cs2-phone-frame{
  border-radius:26px; overflow:hidden; border:6px solid #1a1a1a; background:#1a1a1a;
  box-shadow:0 30px 60px -18px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
  max-height:460px;
}
.cs2-phone-frame img{width:100%; height:auto; display:block;}
.cs2-phone-cap{margin-top:14px; font-size:12.5px; text-align:center; opacity:0.75;}

/* pull quote / outcome block */
.cs2-quote{max-width:820px;}
.cs2-quote .cs2-mega{font-size:clamp(28px,3.6vw,46px); line-height:1.2;}

/* responsive */
@media (max-width: 980px){
  .cs2-section{padding:64px 40px;}
  .cs2-section.tight{padding:44px 40px;}
  .cs2-hero{padding:120px 40px 60px;}
  .cs2-grid{grid-template-columns:1fr; gap:36px;}
  .cs2-c5,.cs2-c6,.cs2-c7,.cs2-c8,.cs2-c4{grid-column:auto;}
  .cs2-tilt,.cs2-tilt-r{transform:rotate(0deg);}
  .cs2-offset-up,.cs2-offset-down{margin-top:0;}
  .cs2-photo{min-height:52vh;}
  .cs2-photo-content{padding:0 40px 40px;}
  .cs2-stat-row{gap:36px;}
  .cs2-phone{width:170px;}
  .cs2-phone-frame{max-height:360px;}
}
@media (max-width: 640px){
  .cs2-section{padding:52px 22px;}
  .cs2-section.tight{padding:36px 22px;}
  .cs2-hero{padding:110px 22px 48px;}
  .cs2-hero-meta{gap:22px 28px;}
  .cs2-photo-content{padding:0 22px 32px;}
  .cs2-mobile-row{gap:22px;}
  .cs2-phone{width:150px;}
  .cs2-phone-frame{max-height:320px; border-width:5px;}
}

.cs-section{padding:56px 64px 0; max-width:900px; position:relative; z-index:2;}
.cs-section p{font-size:16.5px; color:var(--body); margin-bottom:18px; max-width:780px;}
.cs-list{list-style:none; padding:0; margin:0;}
.cs-list li{display:flex; gap:12px; font-size:15px; color:var(--body); margin-bottom:10px; max-width:740px;}
.cs-list li::before{content:"—"; color:var(--grad-d); flex-shrink:0;}

.screens-grid{
  padding:56px 64px 0; position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.screen-card{display:flex; flex-direction:column; gap:12px;}
.screen-card .browser-frame{border-radius:12px; overflow:hidden; box-shadow:0 24px 60px -18px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);}
.screen-card .bar{height:22px; background:#e8e7e4; display:flex; align-items:center; gap:5px; padding:0 10px;}
.screen-card .bar span{width:6px;height:6px;border-radius:50%;background:#c9c7c3;}
.screen-card img{width:100%; height:230px; display:block; object-fit:cover; object-position:top center;}
.screen-card .label{font-size:11px; font-weight:700; color:var(--grad-d); letter-spacing:0.06em; text-transform:uppercase;}
.screen-card .cap{font-size:12.5px; color:var(--muted);}

/* ---------- case-study conference gallery ---------- */
.conf-gallery{
  padding:56px 64px 0; position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
}
.conf-gallery figure{margin:0; display:flex; flex-direction:column; gap:10px;}
.conf-gallery img{width:100%; height:280px; object-fit:cover; border-radius:12px; box-shadow:0 24px 60px -18px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); display:block;}
.conf-gallery figcaption{font-size:12.5px; color:var(--muted);}

.cs-footer-spacer{height:60px;}
.cs-footer{position:relative; z-index:2;}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .wrap, section, .nav, .cs-header, .overview-strip, .cs-section, .screens-grid, .conf-gallery{padding-left:40px; padding-right:40px;}
  .screens-grid{grid-template-columns:repeat(2,1fr);}

  .cs-block{padding:56px 40px;}
  .cs-block-inner{grid-template-columns:1fr; gap:30px;}
  .cs-block-full .cs-block-full-cap{padding:14px 40px;}

  .hero-riwa{aspect-ratio:auto; min-height:calc(100vh - 73px); max-height:none; display:flex; flex-direction:column; justify-content:flex-end; padding:110px 40px 50px; overflow:hidden;}
  .hero-riwa-inner{position:relative; z-index:3; right:auto; bottom:auto; width:100%; order:1; margin-bottom:22px;}
  .hero-label{position:relative; z-index:3; left:auto; bottom:auto; order:2;}

  .il-block{padding:90px 40px;}
  .il-cards{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .il-card{border-left:none; padding-left:0;}
  .il-card:nth-child(even){padding-left:26px; border-left:1px solid var(--line-soft);}

  .light-section{padding:90px 40px;}
  .proj-grid{grid-template-columns:repeat(4,1fr);}
  .proj-grid .pc1,.proj-grid .pc2,.proj-grid .pc3,.proj-grid .pc4,.proj-grid .pc5,.proj-grid .pc6{grid-column:span 2; margin-top:0;}

  .il-shots{grid-template-columns:repeat(3,1fr);}
  .il-conf{max-width:none;}
  .dsys-cover{padding:40px 40px; margin-bottom:56px;}
  .dsys-grid{grid-template-columns:repeat(2,1fr);}
  .dsys-card-mockup{padding-top:130px;}
  .freelance-grid{grid-template-columns:repeat(2,1fr); gap:44px;}
  .fl-card,.fl-card:nth-child(1),.fl-card:nth-child(2),.fl-card:nth-child(3),.fl-card:nth-child(4){grid-column:span 1; margin-top:0;}

  .skills-block-inner{flex-direction:column;}
  .skills-left{position:static;}

  .about-dark{padding:70px 40px 90px;}
  .about-copy{gap:30px;}
  .about-values{flex-direction:column; gap:30px;}

  .numbers-block{padding:90px 40px;}
  .numbers-row{grid-template-columns:repeat(2,1fr); row-gap:30px;}

  footer{padding:100px 40px 50px;}
  .footer-fields{margin-left:0;}
  .footer-top{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .wrap, section, .nav, .cs-header, .overview-strip, .cs-section, .screens-grid, .conf-gallery{padding-left:22px; padding-right:22px;}
  .conf-gallery{grid-template-columns:1fr;}
  .cs-block{padding:44px 22px;}
  .cs-block-full .cs-block-full-cap{padding:14px 22px;}
  .nav{padding-top:20px; padding-bottom:20px; padding-left:22px; padding-right:22px;}
  .nav-links{
    position:fixed; inset:0 0 0 auto; top:0; height:100vh; width:78vw; max-width:320px;
    background:rgba(11,11,12,0.97); backdrop-filter:blur(20px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:30px;
    padding:40px; transform:translateX(100%); transition:transform .35s ease;
    border-left:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:20px;}
  .nav-toggle{display:block;}
  .nav-cta{display:none;}
  .nav-icon-btn.nav-mail-btn{display:flex;}

  .hero-riwa{padding:100px 22px 40px;}

  .il-block{padding:70px 22px;}
  .il-cards{grid-template-columns:1fr; row-gap:30px;}
  .il-card, .il-card:nth-child(even){border-left:none; padding-left:0;}
  .il-visual{aspect-ratio:4/5; clip-path:polygon(30px 0,100% 0,100% 100%,0 100%,0 30px);}

  .light-section{padding:70px 22px;}
  .proj-grid{grid-template-columns:1fr 1fr; gap:16px;}
  .proj-grid .pc1,.proj-grid .pc2,.proj-grid .pc3,.proj-grid .pc4,.proj-grid .pc5,.proj-grid .pc6{grid-column:span 1;}

  .il-shots{grid-template-columns:repeat(2,1fr);}
  .il-shot{height:120px;}
  .il-conf{grid-template-columns:1fr 1fr; gap:14px;}
  .dsys-cover{flex-direction:column; align-items:flex-start; padding:32px 24px; margin-bottom:44px;}
  .dsys-cover-logos{gap:22px;}
  .dsys-cover-logos img{height:22px;}
  .dsys-grid{grid-template-columns:1fr;}
  .dsys-card-mockup{padding-top:120px;}
  .dsys-mockup{top:-34px; width:82%;}
  .freelance-grid{grid-template-columns:1fr; gap:36px;}
  .fl-card,.fl-card:nth-child(1),.fl-card:nth-child(2),.fl-card:nth-child(3),.fl-card:nth-child(4){grid-column:span 1; margin-top:0;}

  .skill-card{padding:20px 30px 20px 20px;}

  .about-banner{aspect-ratio:16/7;}
  .about-dark{padding:60px 22px 70px;}
  .about-values .av-label{flex:none;}

  .numbers-block{padding:70px 22px;}
  .numbers-top{flex-direction:column; align-items:flex-start;}
  .numbers-top p{text-align:left;}
  .numbers-row{grid-template-columns:1fr 1fr; gap:24px;}
  .numbers-row .n-item{border-left:none; padding-left:0;}

  footer{padding:70px 22px 40px;}
  .footer-cta-row{flex-direction:column; align-items:flex-start; gap:18px;}
  .footer-bottom{flex-direction:column; align-items:flex-start;}
  .footer-legal{text-align:left;}
}