/* ================================================================
   AWS NASSER — v3 "LIQUID STUDIO"
   All-new design system. Magnetto/Zenrixa structure, silver studio
   base, amber signal color, deliberate glassmorphism layer.
   Rhythm: 8pt grid · 1200px container · repeated section header.
   ================================================================ */

:root {
  /* surfaces */
  --paper:     #EDEEF0;                 /* page base — silver */
  --paper-2:   #E4E5E8;
  --ink:       #0E0E10;
  --ink-2:     #55565C;
  --ink-3:     #8A8B92;
  --line:      rgba(14, 14, 16, 0.08);

  /* signal */
  --sig:       #FF7A1A;                 /* amber-orange */
  --sig-soft:  #F5A623;
  --sig-ink:   #D96200;                 /* accessible on light */
  --sig-grad:  linear-gradient(120deg, #FF7A1A, #F5A623);

  /* glass */
  --glass:     rgba(255, 255, 255, 0.52);
  --glass-hi:  rgba(255, 255, 255, 0.78);
  --glass-bd:  rgba(255, 255, 255, 0.85);
  --glass-dk:  rgba(20, 20, 22, 0.45);
  --blur:      saturate(1.6) blur(20px);

  /* geometry */
  --r-xs: 12px; --r-sm: 18px; --r-md: 26px; --r-lg: 36px; --r-xl: 44px;
  --wrap: 1200px;

  /* type */
  --fd: 'Clash Display', 'Inter', sans-serif;
  --fb: 'Inter', sans-serif;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-1: 0 1px 2px rgba(14,14,16,0.05), 0 6px 20px rgba(14,14,16,0.06);
  --shadow-2: 0 4px 12px rgba(14,14,16,0.06), 0 24px 60px rgba(14,14,16,0.12);
  --shadow-3: 0 10px 30px rgba(14,14,16,0.10), 0 60px 120px rgba(14,14,16,0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--fb);
  font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--sig); color: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

/* ---------------- ambient background ---------------- */
.amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.amb i { position: absolute; border-radius: 50%; filter: blur(130px); }
.amb i:nth-child(1) { width: 55vw; height: 55vw; left: -18vw; top: -20vw; background: radial-gradient(circle, rgba(255,122,26,0.09), transparent 65%); }
.amb i:nth-child(2) { width: 46vw; height: 46vw; right: -14vw; top: 42vh; background: radial-gradient(circle, rgba(14,14,16,0.06), transparent 65%); }
.amb i:nth-child(3) { width: 50vw; height: 50vw; left: 20vw; bottom: -28vw; background: radial-gradient(circle, rgba(255,122,26,0.06), transparent 65%); }

/* ================================================================
   FLOATING GLASS NAVBAR
   ================================================================ */
.gnav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(var(--wrap), calc(100% - 24px));
  z-index: 100;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 18px;
  border-radius: 100px;
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.4s var(--ease), background 0.4s;
}
.gnav.scrolled { background: var(--glass-hi); box-shadow: var(--shadow-2); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fd); font-weight: 600; font-size: 1.05rem; }
.brand svg { width: 32px; height: 32px; border-radius: 10px; }
.brand i { font-style: normal; font-size: 0.55em; vertical-align: super; color: var(--ink-3); }
.gnav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.gnav-links a {
  position: relative; font-size: 0.88rem; font-weight: 500; color: var(--ink-2);
  padding: 8px 15px; border-radius: 100px; transition: color 0.25s, background 0.25s;
}
.gnav-links a:hover { color: var(--ink); background: rgba(255,255,255,0.65); }
.gnav-clock { display: flex; align-items: baseline; gap: 7px; font-size: 0.72rem; color: var(--ink-3); margin-right: 6px; white-space: nowrap; }
.gnav-clock b { font-size: 0.82rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.gnav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; font-size: 0.85rem; font-weight: 600;
  padding: 11px 22px; border-radius: 100px; transition: all 0.3s var(--ease);
}
.gnav-cta:hover { background: #000; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(14,14,16,0.25); }
.gnav-burger { display: none; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.6); border: 1px solid var(--glass-bd); position: relative; }
.gnav-burger i, .gnav-burger::before, .gnav-burger::after {
  content: ""; position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: var(--ink); transition: 0.3s;
}
.gnav-burger::before { top: 16px; } .gnav-burger i { top: 20px; } .gnav-burger::after { top: 24px; }

/* mobile glass sheet */
.gsheet {
  position: fixed; inset: 74px 12px auto; z-index: 99; display: none;
  flex-direction: column; gap: 4px; padding: 14px;
  border-radius: var(--r-md); background: var(--glass-hi);
  border: 1px solid var(--glass-bd); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-2);
}
.gsheet.open { display: flex; }
.gsheet a { padding: 13px 16px; border-radius: 14px; font-weight: 500; }
.gsheet a:active { background: rgba(255,255,255,0.8); }

/* ================================================================
   HERO — rounded silver canvas
   ================================================================ */
.hero { padding: 84px 12px 0; min-height: 100svh; display: flex; }
.hero-canvas {
  position: relative; flex: 1; overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 60% at 50% 18%, #FAFAF9 0%, transparent 60%),
    linear-gradient(178deg, #F4F4F3 0%, #E9EAEC 40%, #D6D8DC 80%, #CCCED3 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), var(--shadow-2);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  padding: clamp(28px, 4vw, 60px);
  padding-bottom: 120px;
}
/* faint blueprint grid */
.hero-canvas::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background:
    linear-gradient(rgba(14,14,16,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,14,16,0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.hero-word {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font-family: var(--fd); font-weight: 600;
  font-size: clamp(5rem, 16vw, 14.5rem); line-height: 0.78; white-space: nowrap;
  background: linear-gradient(180deg, rgba(14,14,16,0.26), rgba(14,14,16,0.06) 60%, transparent 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none; z-index: 3;
}
.hero-fig {
  position: absolute; left: 52%; bottom: 0; transform: translateX(-50%);
  width: clamp(340px, 48vw, 760px); z-index: 2; pointer-events: none; will-change: transform;
}
.hero-fig img { width: 100%;
  filter: drop-shadow(0 40px 60px rgba(14,14,16,0.35));
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
}

/* rotating circular badge riding the figure */
.orbit {
  position: absolute; left: calc(52% + clamp(150px, 19vw, 330px)); bottom: clamp(170px, 20vw, 310px);
  width: 108px; height: 108px; z-index: 4; pointer-events: none;
}
.orbit svg { width: 100%; height: 100%; animation: spin 16s linear infinite; }
.orbit svg text { font-size: 8.4px; letter-spacing: 0.24em; fill: var(--ink-2); text-transform: uppercase; font-weight: 600; }
.orbit::after {
  content: "↗"; position: absolute; inset: 34px; display: grid; place-items: center;
  background: var(--ink); color: #fff; border-radius: 50%; font-size: 1rem;
  box-shadow: 0 10px 24px rgba(14,14,16,0.3);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* left column */
.hero-left { position: relative; z-index: 5; max-width: 560px; }
/* soft scrim keeps the headline legible where the dark figure passes behind it */
.hero-left::before {
  content: ""; position: absolute; inset: -12% -26% -12% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 38% 50%, rgba(244,244,244,0.92) 0%, rgba(240,240,241,0.6) 45%, transparent 78%);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); padding: 9px 16px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 3px rgba(255,122,26,0.18); }
.hero-h1 {
  margin-top: 26px;
  font-family: var(--fd); font-weight: 500; letter-spacing: -0.025em; line-height: 1.02;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
}
.hero-h1 .row { display: block; overflow: hidden; }
.hero-h1 .row em { display: block; font-style: normal; translate: 0 110%; animation: riseUp 0.9s var(--ease) forwards; animation-delay: var(--d, 0s); }
.hero-h1 .sig { color: var(--sig-ink); }
@keyframes riseUp { to { translate: 0 0; } }
.hero-sub { margin-top: 22px; max-width: 400px; color: var(--ink-2); font-size: 1rem; }
.hero-ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* buttons */
.btn-ink, .btn-frost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: 100px; font-weight: 600; font-size: 0.95rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
  will-change: transform;
}
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 14px 30px rgba(14,14,16,0.22); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(14,14,16,0.3); }
.btn-ink .pip { width: 26px; height: 26px; border-radius: 50%; background: var(--sig-grad); display: grid; place-items: center; font-size: 0.8rem; color: #1a1205; }
.btn-frost {
  color: var(--ink); background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-1);
}
.btn-frost:hover { background: var(--glass-hi); transform: translateY(-2px); }
.btn-frost svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.magnetic { will-change: transform; }

/* trust row under CTAs */
.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.avatars { display: flex; }
.avatars span {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
  background: var(--sig-grad); display: grid; place-items: center;
  font-size: 0.6rem; font-weight: 700; color: #fff; margin-left: -8px;
}
.avatars span:first-child { margin-left: 0; background: var(--ink); }
.hero-trust p { font-size: 0.8rem; color: var(--ink-2); line-height: 1.45; }
.hero-trust b { color: var(--ink); }

/* right column — glass widgets */
.hero-right { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; }
.gcard {
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.66), rgba(255,255,255,0.34));
  border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-2);
}
.gcard-slide { display: flex; align-items: center; gap: 16px; padding: 18px 20px; min-width: 250px; }
.gcard-slide .tile { width: 54px; height: 54px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 22px rgba(14,14,16,0.22); }
.gcard-slide .tile svg { width: 100%; height: 100%; }
.gcard-slide .txt span { display: block; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 2px; }
.gcard-slide .txt b { font-family: var(--fd); font-weight: 500; font-size: 1.1rem; line-height: 1.15; }
.gcard-slide .dots { margin-left: auto; display: flex; flex-direction: column; gap: 5px; }
.gcard-slide .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(14,14,16,0.2); }
.gcard-slide .dots i.on { background: var(--ink); height: 14px; border-radius: 3px; }

.gcard-now { padding: 16px 20px; min-width: 250px; }
.gcard-now .cap { display: flex; align-items: center; gap: 8px; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.gcard-now .cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #35C759; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.gcard-now p { font-size: 0.85rem; margin-top: 6px; color: var(--ink-2); }
.gcard-now p b { color: var(--ink); }

.hero-partners { text-align: right; margin-top: 6px; }
.hero-partners .cap { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 10px; }
.hero-partners .logos { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; max-width: 300px; }
.hero-partners img { height: 18px; opacity: 0.5; filter: grayscale(1) contrast(0.65); transition: 0.3s; }
.hero-partners img:hover { opacity: 1; filter: none; }

/* hero bottom bar */
.hero-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px clamp(24px, 4vw, 52px);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(14,14,16,0.5);
  background: linear-gradient(transparent, rgba(204,206,211,0.95) 70%);
}
.hero-bar .mid { display: flex; gap: 26px; }
.hero-bar a { transition: color 0.25s; } .hero-bar a:hover { color: var(--ink); }
.bounce { animation: bounce 2.4s ease-in-out infinite; display: inline-block; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ================================================================
   GLASS STAT STRIP — overlaps hero bottom edge
   ================================================================ */
.statstrip { position: relative; z-index: 10; margin-top: -64px; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding: 18px; border-radius: var(--r-lg);
  background: var(--glass-hi); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-2);
}
.stat {
  padding: 24px 22px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.9);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-1); }
.stat b { font-family: var(--fd); font-weight: 600; font-size: 2.4rem; line-height: 1; display: block; margin-top: 10px; }
.stat b em { font-style: normal; background: var(--sig-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat > span { display: block; margin-top: 8px; font-size: 0.84rem; color: var(--ink-2); }
.stat-ic { width: 28px; height: 28px; fill: none; stroke: var(--sig-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ================================================================
   SECTION HEADER SYSTEM (repeats everywhere → alignment)
   ================================================================ */
.sec { padding: 128px 0 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.sec-head .l { max-width: 640px; }
.overline {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 16px;
}
.overline::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--sig-grad); }
.sec-title { font-family: var(--fd); font-weight: 500; letter-spacing: -0.02em; line-height: 1.04; font-size: clamp(2rem, 4.2vw, 3.4rem); }
.sec-title .sig { color: var(--sig-ink); }
.sec-idx { font-family: var(--fd); font-size: 0.95rem; color: var(--ink-3); white-space: nowrap; padding-bottom: 8px; }
.sec-idx b { color: var(--ink); }
.sec-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; padding-bottom: 8px; border-bottom: 2px solid var(--sig); transition: gap 0.3s; }
.sec-link:hover { gap: 14px; }

/* ================================================================
   MARQUEE (ink ribbon)
   ================================================================ */
.ribbon { margin-top: 28px; background: var(--ink); color: #EDEDEA; overflow: hidden; padding: 18px 0; transform: rotate(-1.2deg) scale(1.02); }
.ribbon-track { display: inline-flex; gap: 48px; white-space: nowrap; animation: slide 30s linear infinite; }
.ribbon-track span { font-family: var(--fd); font-weight: 500; font-size: 1rem; display: inline-flex; align-items: center; gap: 48px; }
.ribbon-track span::after { content: "✦"; color: var(--sig); font-size: 0.75rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ================================================================
   EXPERIENCE — glass accordion cards
   ================================================================ */
#xp-list { display: flex; flex-direction: column; gap: 14px; }
.svc {
  border-radius: var(--r-md); overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.35s var(--ease), background 0.35s;
}
.svc:hover { box-shadow: var(--shadow-2); }
.svc.open { background: var(--glass-hi); }
.svc-head { width: 100%; display: flex; align-items: center; gap: 26px; text-align: left; padding: 24px 26px; color: var(--ink); }
.svc-head .num {
  flex-shrink: 0; min-width: 86px; text-align: center;
  font-size: 0.72rem; font-weight: 600; line-height: 1.35; color: var(--ink-2);
  background: rgba(255,255,255,0.7); border: 1px solid var(--glass-bd);
  padding: 8px 12px; border-radius: 100px; font-variant-numeric: tabular-nums;
}
.svc-head h3 { flex: 1; font-family: var(--fd); font-weight: 500; font-size: clamp(1.05rem, 2.2vw, 1.45rem); }
.svc-head h3 .dim { color: var(--ink-3); font-size: 0.62em; font-weight: 400; }
.svc-head .plus {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.25rem; font-weight: 300;
  background: rgba(255,255,255,0.75); border: 1px solid var(--glass-bd); color: var(--ink-2);
  transition: all 0.4s var(--ease);
}
.svc.open .plus { background: var(--sig-grad); color: #fff; transform: rotate(45deg); border-color: transparent; }
.svc-body { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); }
.svc-body-inner { padding: 0 26px 28px 138px; color: var(--ink-2); max-width: 860px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.svc-tags span { font-size: 0.72rem; font-weight: 600; color: var(--sig-ink); background: rgba(255,122,26,0.1); border: 1px solid rgba(255,122,26,0.18); border-radius: 100px; padding: 5px 13px; }

/* ================================================================
   PORTFOLIO — fan deck + glass segmented filter + grid
   ================================================================ */
.fan-stage { position: relative; height: clamp(380px, 42vw, 520px); margin-top: 8px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.fan-stage::after {
  content: ""; position: absolute; left: 50%; bottom: -46%; width: 160%; height: 60%;
  transform: translateX(-50%); background: var(--paper);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -34px 70px rgba(237,238,240,0.95); z-index: 150; pointer-events: none;
}
.fan-card {
  position: absolute; left: 50%; top: 24px;
  width: clamp(200px, 23vw, 290px); aspect-ratio: 3 / 4.3;
  margin-left: calc(clamp(200px, 23vw, 290px) / -2);
  border-radius: 22px; overflow: hidden; cursor: pointer; background: #101012;
  box-shadow: var(--shadow-3);
  border: 1px solid rgba(255,255,255,0.25);
  transform-origin: 50% calc(100% + var(--fan-radius, 46vw));
  will-change: transform;
}
.fan-card img { width: 100%; height: 100%; object-fit: cover; }
.fan-card .fc-cap {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  background: rgba(20,20,22,0.5); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; opacity: 0; translate: 0 6px; transition: 0.35s var(--ease);
}
.fan-card:hover .fc-cap { opacity: 1; translate: 0 0; }
.fan-card .fc-cap b { font-family: var(--fd); font-weight: 500; font-size: 0.86rem; }
.fan-card .fc-cap span { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.fan-card .fc-play {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px);
  display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.fan-card .fc-play::before { content: ""; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent #101012; margin-left: 2px; }
.fan-hint { text-align: center; font-size: 0.68rem; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 16px; }
.fan-nav { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.fan-nav button {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  font-size: 1rem; color: var(--ink); box-shadow: var(--shadow-1); transition: all 0.3s var(--ease);
}
.fan-nav button:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

/* segmented glass filter */
.seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 6px;
  border-radius: 100px; background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-1);
  margin-top: 64px;
}
.seg button {
  padding: 10px 20px; border-radius: 100px; font-size: 0.86rem; font-weight: 500; color: var(--ink-2);
  transition: all 0.3s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--ink); color: #fff; font-weight: 600; box-shadow: 0 8px 18px rgba(14,14,16,0.22); }

.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.pf-item {
  position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  background: #101012; aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-1); border: 1px solid rgba(255,255,255,0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pf-item.tall { aspect-ratio: 3 / 4; grid-row: span 2; }
.pf-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.pf-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.pf-item:hover img { transform: scale(1.05); }
.pf-item.hidden { display: none; }
.pf-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; padding: 7px 13px; border-radius: 100px;
  background: rgba(20,20,22,0.45); border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pf-cap {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-radius: 16px;
  background: rgba(20,20,22,0.5); border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff;
}
.pf-cap b { font-family: var(--fd); font-weight: 500; font-size: 0.95rem; display: block; }
.pf-cap span { font-size: 0.72rem; opacity: 0.65; display: block; }
.pf-cap .go { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.14); display: grid; place-items: center; font-size: 0.8rem; transition: 0.3s; }
.pf-item:hover .go { background: var(--sig); color: #16100a; }
.pf-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%) scale(0.9);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(8px);
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0; transition: 0.35s var(--ease);
}
.pf-item:hover .pf-play, .pf-item[data-video] .pf-play { opacity: 1; transform: translate(-50%, -60%) scale(1); }
.pf-play::before { content: ""; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #101012; margin-left: 3px; }

/* video lightbox — glass chrome */
.vlightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 4vmin; background: rgba(10,10,12,0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.vlightbox.open { display: flex; }
.vlightbox .vbox { width: min(1360px, 96vw); aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 60px 140px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.14); }
.vlightbox iframe, .vlightbox .vbox img { width: 100%; height: 100%; border: 0; object-fit: contain; }
.vlightbox .vclose {
  position: absolute; top: 24px; right: 28px; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px); color: #fff; font-size: 1.2rem; transition: 0.3s;
}
.vlightbox .vclose:hover { background: rgba(255,255,255,0.28); transform: rotate(90deg); }
.vlightbox .vmeta {
  position: absolute; left: 34px; bottom: 26px; color: #fff; z-index: 2; pointer-events: none;
  padding: 12px 18px; border-radius: 16px; background: rgba(20,20,22,0.5);
  border: 1px solid rgba(255,255,255,0.16); backdrop-filter: blur(12px);
}
.vlightbox .vmeta b { font-family: var(--fd); font-size: 1.05rem; font-weight: 500; display: block; }
.vlightbox .vmeta span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }

/* ================================================================
   PROMPTS TEASER — glass index cards
   ================================================================ */
.prompt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 28px; border-radius: var(--r-md); overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.pcard .idx { position: absolute; top: 18px; right: 22px; font-family: var(--fd); font-size: 2rem; font-weight: 600; color: rgba(14,14,16,0.08); }
.pcard-cat { align-self: flex-start; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sig-ink); background: rgba(255,122,26,0.1); border: 1px solid rgba(255,122,26,0.18); border-radius: 100px; padding: 6px 13px; }
.pcard h3 { font-family: var(--fd); font-weight: 500; font-size: 1.2rem; }
.pcard p { color: var(--ink-2); font-size: 0.9rem; flex: 1; }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--ink-3); }
.pcard-foot .go { color: var(--ink); font-weight: 600; transition: 0.25s; }
.pcard:hover .go { color: var(--sig-ink); transform: translateX(4px); }
.center-cta { text-align: center; margin-top: 44px; }

/* ================================================================
   ABOUT — portrait plate + copy
   ================================================================ */
.about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.about-plate { position: relative; }
.about-plate .ph {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--glass-bd); box-shadow: var(--shadow-3);
  background: linear-gradient(160deg, #1a1a1c, #2c2c30);
}
.about-plate .ph img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about-plate .handle {
  position: absolute; bottom: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 600; color: #fff;
  padding: 9px 16px; border-radius: 100px;
  background: rgba(20,20,22,0.5); border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.about-plate .handle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #35C759; }
.about-plate .years {
  position: absolute; top: -22px; right: -18px; z-index: 2;
  padding: 16px 20px; border-radius: 20px; text-align: center;
  background: var(--glass-hi); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-2);
}
.about-plate .years b { font-family: var(--fd); font-size: 1.7rem; font-weight: 600; display: block; background: var(--sig-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-plate .years span { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.about-copy p { margin-top: 16px; color: var(--ink-2); }
.about-copy .lead { color: var(--ink); font-size: 1.12rem; }
.about-copy a.sig { color: var(--sig-ink); font-weight: 600; }
.about-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ================================================================
   TOOLKIT — glass chip marquee
   ================================================================ */
.chips-marquee { overflow: hidden; margin-top: 8px; padding: 8px 0 4px; }
.chips-track { display: inline-flex; gap: 12px; animation: slide 38s linear infinite; padding-left: 24px; }
.tchip {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  padding: 13px 20px; border-radius: 100px;
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-1);
}
.tchip b { font-family: var(--fd); font-weight: 600; font-size: 0.92rem; }
.tchip span { font-size: 0.72rem; color: var(--ink-3); }
.tchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sig-grad); }

/* clients row */
.clients { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 56px; padding: 44px 0 0; }
.clients img { height: 30px; opacity: 0.55; filter: grayscale(1) contrast(0.7); transition: 0.3s; }
.clients img:hover { opacity: 1; filter: none; }
.clients .inv { filter: grayscale(1) invert(1) contrast(0.6); }
.clients .inv:hover { filter: invert(1); }

/* ================================================================
   TESTIMONIALS — quote plates
   ================================================================ */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testi {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 26px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-1); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.testi:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); }
.testi::before { content: "“"; position: absolute; top: 6px; right: 22px; font-family: var(--fd); font-size: 4.4rem; line-height: 1; color: rgba(255,122,26,0.16); }
.testi .stars { color: var(--sig); letter-spacing: 3px; font-size: 0.82rem; }
.testi q { quotes: none; font-size: 0.97rem; flex: 1; color: var(--ink); }
.testi .who { display: flex; align-items: center; gap: 12px; }
.testi .who .av { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; }
.testi .who b { display: block; font-size: 0.9rem; line-height: 1.3; }
.testi .who span { font-size: 0.76rem; color: var(--ink-3); }

/* ================================================================
   PROCESS — connected steps
   ================================================================ */
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.proc-grid::before {
  content: ""; position: absolute; top: 44px; left: 8%; right: 8%; height: 0;
  border-top: 2px dashed rgba(14,14,16,0.14); z-index: 0;
}
.proc { position: relative; z-index: 1; text-align: left; padding: 0 8px; }
.proc .disc {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--glass-hi); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-1);
  margin-bottom: 22px; transition: transform 0.35s var(--ease);
}
.proc:hover .disc { transform: translateY(-4px) rotate(-4deg); }
.proc .disc svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.proc .disc .n {
  position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sig-grad); color: #1a1205; font-size: 0.72rem; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 6px 14px rgba(255,122,26,0.4);
}
.proc h3 { font-family: var(--fd); font-weight: 500; font-size: 1.12rem; margin-bottom: 6px; }
.proc p { color: var(--ink-2); font-size: 0.88rem; max-width: 240px; }

/* ================================================================
   FAQ — separate glass rows
   ================================================================ */
.faq-list { max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.faq {
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-1);
}
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; text-align: left; padding: 20px 24px; font-family: var(--fd); font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.faq-q .plus { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.75); border: 1px solid var(--glass-bd); color: var(--ink-2); font-weight: 300; transition: 0.4s var(--ease); }
.faq.open .plus { background: var(--sig-grad); color: #fff; transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); }
.faq-a p { padding: 0 24px 22px; color: var(--ink-2); max-width: 700px; }

/* ================================================================
   CONTACT + FOOTER — dark rounded panel (mirrors hero)
   ================================================================ */
.contact-shell { padding: 128px 12px 12px; }
.ink-panel {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at 80% 0%, rgba(255,122,26,0.14), transparent 60%),
    linear-gradient(165deg, #17171A 0%, #0E0E10 60%, #0A0A0C 100%);
  color: #ECECEA; box-shadow: var(--shadow-3);
  padding: clamp(48px, 6vw, 90px) clamp(24px, 5vw, 80px) 0;
}
.ink-panel::before {
  content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 20%, transparent 100%);
}
.contact-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-info .overline { color: rgba(236,236,234,0.55); }
.contact-info h2 { font-family: var(--fd); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.contact-info h2 .sig { background: var(--sig-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-info p { color: rgba(236,236,234,0.6); margin: 20px 0 28px; max-width: 420px; }
.contact-mail { display: inline-flex; align-items: center; gap: 12px; font-family: var(--fd); font-size: 1.25rem; font-weight: 500; color: #fff; border-bottom: 2px solid var(--sig); padding-bottom: 4px; transition: gap 0.3s; }
.contact-mail:hover { gap: 18px; }
.contact-socials { display: flex; gap: 10px; margin-top: 32px; }
.contact-socials a {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px); transition: all 0.3s var(--ease);
}
.contact-socials a svg { width: 17px; height: 17px; fill: #ECECEA; }
.contact-socials a:hover { background: var(--sig); transform: translateY(-3px); }
.contact-socials a:hover svg { fill: #16100a; }

.cform {
  position: relative; border-radius: var(--r-md); padding: clamp(22px, 3vw, 36px);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cform .field { margin-bottom: 12px; }
.cform input, .cform textarea {
  width: 100%; padding: 15px 18px; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font-family: inherit; font-size: 0.92rem; outline: none; transition: 0.25s;
}
.cform input::placeholder, .cform textarea::placeholder { color: rgba(236,236,234,0.4); }
.cform input:focus, .cform textarea:focus { border-color: var(--sig); background: rgba(255,255,255,0.09); box-shadow: 0 0 0 3px rgba(255,122,26,0.18); }
.cform textarea { min-height: 120px; resize: vertical; }
.btn-sig {
  display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center;
  padding: 16px 28px; border-radius: 100px; font-weight: 700; font-size: 0.95rem;
  background: var(--sig-grad); color: #16100a; transition: all 0.3s var(--ease);
}
.btn-sig:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255,122,26,0.35); }

/* footer inside ink panel */
.foot { position: relative; margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid rgba(255,255,255,0.1); padding: 30px 0 90px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; font-size: 0.82rem; color: rgba(236,236,234,0.5); }
.foot-links { display: flex; gap: 22px; }
.foot-links a { transition: color 0.25s; } .foot-links a:hover { color: #fff; }
.foot-word {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  font-family: var(--fd); font-weight: 600; line-height: 0.75; white-space: nowrap;
  font-size: clamp(4rem, 13vw, 11rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  pointer-events: none; user-select: none;
}

/* ================================================================
   SHARED — reveal, cursor, instagram embed frame
   ================================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.insta-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: center; }
.insta-wrap iframe { width: 100%; height: 460px; border: 1px solid var(--glass-bd); border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-1); }
.insta-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.insta-cta p { color: var(--ink-2); font-size: 0.9rem; }

.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 6px; height: 6px; background: var(--ink); }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(14,14,16,0.3); transition: width 0.25s, height 0.25s, border-color 0.25s; }
body.cursor-hot .cursor-ring { width: 54px; height: 54px; border-color: var(--sig); }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ribbon-track, .chips-track, .orbit svg, .bounce { animation: none; }
  .hero-h1 .row em, .hz-in { animation: none; translate: 0 0; opacity: 1; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1080px) {
  .gnav-links, .gnav-clock { display: none; }
  .gnav-burger { display: block; margin-left: auto; }
  .gnav-cta { display: none; }
  .hero-canvas { grid-template-columns: 1fr; align-items: start; padding-bottom: 58vw; }
  .hero-fig { width: min(72vw, 620px); }
  .gnav-theme { margin-left: auto; }
  .gnav-burger { margin-left: 0; }
  .hero-right { align-items: flex-start; margin-top: 26px; }
  .hero-partners { text-align: left; } .hero-partners .logos { justify-content: flex-start; }
  .orbit { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pf-grid, .prompt-grid, .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
  .proc-grid::before { display: none; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .insta-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sec { padding-top: 88px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 36px; }
  .hero { padding-top: 76px; }
  .hero-canvas { display: flex; flex-direction: column; border-radius: 30px; padding: 22px 18px 14px; }
  .hero-left { order: 1; }
  .hero-fig { position: relative; order: 2; left: auto; bottom: auto; transform: none !important; translate: none !important; width: 100%; max-width: 480px; margin: 18px auto -14px; z-index: 2; }
  .hero-fig::before { content: "NASSER"; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); font-family: var(--fd); font-weight: 600; font-size: 23vw; line-height: 0.8; white-space: nowrap; background: linear-gradient(180deg, rgba(14,14,16,0.28), rgba(14,14,16,0.06) 70%, transparent); -webkit-background-clip: text; background-clip: text; color: transparent; z-index: -1; }
  .hero-word { display: none; }
  .hero-right { order: 3; margin-top: 20px; }
  .hero-bar { position: static; order: 4; margin-top: 22px; padding: 12px 4px 0; font-size: 0.58rem; background: none; border-top: 1px solid var(--line); } .hero-bar .mid { gap: 12px; }
  .statstrip { margin-top: -40px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .stat { padding: 18px 16px; } .stat b { font-size: 1.9rem; }
  .pf-grid, .prompt-grid, .testi-grid, .proc-grid { grid-template-columns: 1fr; }
  .pf-item.tall { grid-row: auto; aspect-ratio: 4/3; }
  .svc-head { padding: 18px 16px; gap: 14px; } .svc-head .num { min-width: 68px; font-size: 0.62rem; }
  .svc-body-inner { padding: 0 18px 22px; }
  .cform .row2 { grid-template-columns: 1fr; }
  .fan-stage { height: 64vw; min-height: 320px; }
  .seg { width: 100%; justify-content: center; }
}


/* ================================================================
   === ADD-ONS === theme toggle · CV scroll section · dark mode
   ================================================================ */

/* nav theme toggle */
.gnav-theme {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.6); border: 1px solid var(--glass-bd);
  transition: background 0.3s, transform 0.3s var(--ease);
}
.gnav-theme:hover { transform: rotate(18deg); }
.gnav-theme svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; grid-area: 1 / 1; }
.gnav-theme .ic-sun { display: none; }
[data-theme="dark"] .gnav-theme .ic-sun { display: block; }
[data-theme="dark"] .gnav-theme .ic-moon { display: none; }

/* CV scroll-reveal section (sticky — scroll drives the text) */
.cvscroll { position: relative; height: 210vh; --progress: 0; }
.cv-pin { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.cv-line {
  margin-top: 22px; max-width: 1020px;
  font-family: var(--fd); font-weight: 500; letter-spacing: -0.02em; line-height: 1.24;
  font-size: clamp(1.55rem, 3.4vw, 2.9rem); color: var(--ink);
}
.cv-line .cw {
  display: inline-block; margin-right: 0.27em;
  --wp: clamp(0, calc(var(--progress, 0) * (var(--total, 60) + 6) - var(--i, 0)), 1);
  opacity: calc(0.08 + 0.92 * var(--wp));
  transform: translateY(calc((1 - var(--wp)) * 0.45em));
}
.cv-line em { font-style: normal; color: var(--sig-ink); }
.cv-foot { display: flex; align-items: center; gap: 22px; margin-top: 40px; flex-wrap: wrap; }
.cv-pct { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cv-pct b { color: var(--ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .cvscroll { height: auto; padding: 100px 0 40px; }
  .cv-line .cw { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 700px) {
  .cvscroll { height: 170vh; }
  .cv-line { font-size: 1.42rem; }
}

/* -------------------- dark theme (testing) -------------------- */
[data-theme="dark"] {
  --paper: #101013; --paper-2: #16161A;
  --ink: #EDEDEA; --ink-2: #A6A7AE; --ink-3: #8C8D96;
  --line: rgba(255,255,255,0.09);
  --sig-ink: #FFA45C;
  --glass: rgba(28,28,32,0.55); --glass-hi: rgba(34,34,38,0.85); --glass-bd: rgba(255,255,255,0.12);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.35);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.35), 0 24px 60px rgba(0,0,0,0.5);
  --shadow-3: 0 10px 30px rgba(0,0,0,0.45), 0 60px 120px rgba(0,0,0,0.6);
}
[data-theme="dark"] ::selection { background: var(--sig); color: #16100A; }
[data-theme="dark"] .amb i:nth-child(2) { background: radial-gradient(circle, rgba(255,255,255,0.04), transparent 65%); }
[data-theme="dark"] .gnav-links a:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .gnav-cta { background: #EDEDEA; color: #0E0E10; }
[data-theme="dark"] .btn-ink { color: #0E0E10; box-shadow: 0 14px 30px rgba(0,0,0,0.4); }
[data-theme="dark"] .btn-ink:hover { box-shadow: 0 20px 44px rgba(0,0,0,0.55); }
[data-theme="dark"] .gnav-cta:hover { background: #FFFFFF; }
[data-theme="dark"] .gnav-burger, [data-theme="dark"] .gnav-theme { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .gsheet a:active { background: rgba(255,255,255,0.1); }
[data-theme="dark"] .hero-canvas {
  background:
    radial-gradient(80% 60% at 50% 18%, #232327 0%, transparent 60%),
    linear-gradient(178deg, #1B1B1F 0%, #161619 40%, #121215 80%, #0E0E11 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-2);
}
[data-theme="dark"] .hero-canvas::before {
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 72px 72px;
}
[data-theme="dark"] .hero-word { background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.05) 60%, transparent 90%); -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"] .hero-fig::before { background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.04) 70%, transparent); -webkit-background-clip: text; background-clip: text; }
[data-theme="dark"] .hero-left::before { background: radial-gradient(60% 55% at 38% 50%, rgba(19,19,23,0.92) 0%, rgba(19,19,23,0.6) 45%, transparent 78%); }
[data-theme="dark"] .hero-fig img { filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6)); }
[data-theme="dark"] .hero-bar { background: linear-gradient(transparent, rgba(10,10,12,0.92) 70%); color: rgba(237,237,234,0.5); }
[data-theme="dark"] .orbit::after { background: var(--sig); color: #16100A; }
[data-theme="dark"] .orbit svg text { fill: var(--ink-2); }
[data-theme="dark"] .avatars span { border-color: #1A1A1E; }
[data-theme="dark"] .avatars span:first-child { background: #EDEDEA; color: #0E0E10; }
[data-theme="dark"] .gcard { background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)); }
[data-theme="dark"] .gcard-slide .dots i { background: rgba(255,255,255,0.25); }
[data-theme="dark"] .gcard-slide .dots i.on { background: var(--sig); }
[data-theme="dark"] .stat { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
[data-theme="dark"] .svc-head .num, [data-theme="dark"] .svc-head .plus, [data-theme="dark"] .faq-q .plus { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .seg button.active { background: #EDEDEA; color: #0E0E10; box-shadow: 0 8px 18px rgba(0,0,0,0.4); }
[data-theme="dark"] .fan-nav button:hover { background: #EDEDEA; color: #0E0E10; }
[data-theme="dark"] .ribbon { background: #050506; }
[data-theme="dark"] .pcard .idx { color: rgba(255,255,255,0.07); }
[data-theme="dark"] .proc-grid::before { border-top-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .testi .who .av { background: #EDEDEA; color: #0E0E10; }
[data-theme="dark"] .hero-partners img, [data-theme="dark"] .clients img { filter: grayscale(1) invert(1) contrast(0.7); opacity: 0.6; }
[data-theme="dark"] .hero-partners img:hover, [data-theme="dark"] .clients img:hover { filter: invert(1); opacity: 1; }
[data-theme="dark"] .clients .inv { filter: grayscale(1) contrast(0.7); }
[data-theme="dark"] .clients .inv:hover { filter: none; }
[data-theme="dark"] .cursor-dot { background: #EDEDEA; }
[data-theme="dark"] .cursor-ring { border-color: rgba(255,255,255,0.4); }
[data-theme="dark"] .fan-stage::after { box-shadow: 0 -34px 70px rgba(16,16,19,0.95); }


/* ================================================================
   === V4 === hero refit · dark-only nav · video thumbs · forms
   Appended last so it wins. Light-theme rules above are now inert
   because <html> carries data-theme="dark" permanently.
   ================================================================ */

/* ---- nav: clock + theme toggle are gone from the DOM ---- */
@media (max-width: 1080px) { .gnav-burger { margin-left: auto; } }

/* ---- HERO REFIT ----------------------------------------------
   The cutout source is LANDSCAPE (1160x909 of actual content), so
   sizing it by width left the face small and the top of the hero
   empty. It now sits in a fixed-HEIGHT frame and scales by height,
   overflowing sideways — the frame fades out at its left/right
   edges so the wider shoulders dissolve instead of being visibly
   cut. Result: the face carries the frame and he melts into the
   stat cards instead of being chopped by them.
   The NASSER wordmark also moves BEHIND him — it used to paint on
   top of his jacket, which is what made the old hero look broken. */
.hero-word { z-index: 1; }
.hero-fig {
  left: 62%; bottom: 0;
  /* width is DERIVED from height (0.93:1). The image, scaled to
     height:100%, is always ~39% wider than this frame, so the 15%
     edge fade below only ever eats overflow — never real shoulder. */
  height: min(76%, 650px);
  aspect-ratio: 0.93; width: auto; max-width: 44vw;
  overflow: hidden;
  z-index: 3;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.hero-fig img {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: auto; height: 100%; max-width: none;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 99%);
}
/* rotating badge now sits BEHIND him, half-tucked behind a shoulder */
.orbit {
  z-index: 2;
  left: calc(62% - clamp(170px, 21vw, 300px));
  bottom: clamp(110px, 12vw, 168px);
}

@media (max-width: 1080px) {
  .hero-fig { left: 54%; height: min(50vw, 520px); max-width: 66vw; }
  .orbit { left: auto; right: clamp(14px, 4vw, 40px); bottom: clamp(150px, 32vw, 280px); }
}
@media (max-width: 700px) {
  /* stacked block again: no frame, no side fade */
  .hero-fig {
    position: relative; left: auto; bottom: auto;
    width: 100%; max-width: 440px; height: auto; aspect-ratio: auto;
    overflow: visible; z-index: 2;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-fig img {
    position: static; left: auto; top: auto; transform: none;
    width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
  }
  .orbit { display: none; }
}

/* ---- video previews in the gallery --------------------------- */
.vthumb .vprev {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  opacity: 0; transition: opacity 0.7s var(--ease);
  pointer-events: none; z-index: 1;
}
.vthumb.vprev-on .vprev { opacity: 1; }
.vthumb.vprev-on > img { opacity: 0; transition: opacity 0.7s var(--ease); }
.pf-tag, .pf-cap, .pf-play, .fc-cap, .fc-play { z-index: 2; }
/* orientation comes from the Vimeo oEmbed dimensions */
.pf-item.vthumb[data-ar] { aspect-ratio: var(--ar); }

/* ---- lightbox sizes itself to the real video shape ----------- */
.vlightbox .vbox {
  aspect-ratio: var(--vb-ar, 16 / 9);
  width: auto; height: 84vh; max-width: 94vw;
}
@media (max-width: 900px) {
  .vlightbox .vbox { width: 94vw; height: auto; max-height: 84vh; }
}

/* ---- LinkedIn recommendation cards -------------------------- */
.testi-src {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.testi-src svg { width: 13px; height: 13px; fill: #0A66C2; }
[data-placeholder] {
  outline: 1px dashed rgba(255,122,26,0.5); outline-offset: 4px;
  border-radius: 3px; opacity: 0.72;
}

/* ---- contact form status ------------------------------------- */
.form-note {
  margin-top: 12px; font-size: 0.82rem; min-height: 1.2em;
  color: var(--ink-2); transition: color 0.3s;
}
.form-note.ok  { color: #35C759; }
.form-note.err { color: #FF5A4E; }
.cform.sending button[type="submit"] { opacity: 0.55; pointer-events: none; }


/* ================================================================
   === V5 === bigger hero figure · Behance case covers · honeypot
   ================================================================ */

/* hero figure scaled up to match the approved mock */
.hero-fig { height: min(88%, 800px); max-width: 47vw; }
@media (max-width: 1080px) { .hero-fig { height: min(58vw, 620px); max-width: 72vw; } }

/* Behance case plates — typographic covers (swap in real art via Admin → Media) */
.pf-item.is-case { aspect-ratio: 4 / 3; }
.pf-item.is-case .case-cover {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  padding: 22px 22px 64px;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(255,122,26,0.16) 0%, transparent 55%),
    linear-gradient(155deg, #1B1B1F 0%, #131316 60%, #0E0E10 100%);
}
.pf-item.is-case[data-tags="podcasts"] .case-cover {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(120,140,255,0.14) 0%, transparent 55%),
    linear-gradient(155deg, #1B1B1F 0%, #131316 60%, #0E0E10 100%);
}
.pf-item.is-case[data-tags="campaigns"] .case-cover {
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(255,90,78,0.15) 0%, transparent 55%),
    linear-gradient(155deg, #1B1B1F 0%, #131316 60%, #0E0E10 100%);
}
.case-cover .case-k {
  position: absolute; top: 14px; right: 14px;
  color: rgba(237,237,234,0.75);
  padding: 5px 11px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06);
}
.case-cover b {
  font-family: var(--fd); font-weight: 500; font-size: clamp(1.2rem, 1.8vw, 1.65rem);
  line-height: 1.1; color: #EDEDEA; max-width: 90%;
}
.case-cover .case-s { font-size: 0.72rem; color: rgba(237,237,234,0.55); }
.pf-item.is-case:hover .case-cover b { color: #fff; }
/* the little Bē chip should read as the platform mark */
.case-cover .case-k { text-transform: none; letter-spacing: 0.06em; font-size: 0.72rem; }

/* honeypot — invisible to people, tempting to bots */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}


/* ================================================================
   === V6 === uniform gallery grid
   Video tiles used to take their true aspect ratio (16:9, 9:16,
   21:9) and vertical ones span two rows, which left ragged gaps.
   Force ONE shape for every tile so the negative space is even.
   True aspect ratio still drives the deck and the lightbox.
   ================================================================ */
.pf-grid .pf-item,
.pf-grid .pf-item.tall,
.pf-grid .pf-item.vthumb[data-ar],
.pf-grid .pf-item.is-case {
  aspect-ratio: 4 / 3;
  grid-row: auto;
}


/* ================================================================
   === V9 === the status chip now lives INSIDE the <h1> so the
   heading carries real search terms. These three lines keep it
   pixel-identical to when it was a sibling above the heading.
   ================================================================ */
.hero-h1 { margin-top: 0; }
.hero-h1 .chip {
  font-family: var(--fb);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; line-height: 1.2;
  margin-bottom: 26px;
}


/* ================================================================
   === V10 === the caption bar was claiming ~27% of each tile.
   Slimmer padding, a tighter type scale and a smaller arrow give
   the artwork back roughly a third of the space it lost.
   ================================================================ */
.pf-cap {
  left: 8px; right: 8px; bottom: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  gap: 8px;
  background: rgba(16,16,19,0.58);
}
.pf-cap > div { min-width: 0; }
.pf-cap b {
  font-size: 0.84rem; line-height: 1.24;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-cap span {
  font-size: 0.66rem; line-height: 1.25; opacity: 0.62;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-cap .go { width: 26px; height: 26px; font-size: 0.68rem; }

/* the pill above it shrinks to match, so the two chrome elements
   stay in proportion on the smaller tiles */
.pf-tag { top: 10px; left: 10px; font-size: 0.58rem; padding: 5px 11px; }

@media (max-width: 700px) {
  .pf-cap { padding: 7px 11px; border-radius: 11px; }
  .pf-cap b { font-size: 0.8rem; }
  .pf-cap span { font-size: 0.63rem; }
  .pf-cap .go { width: 24px; height: 24px; }
}


/* ================================================================
   === V11 === the tilted ribbon is deliberately scaled 1.02 so its
   rotated ends never show a gap, which pushed the page ~15px wider
   than the viewport. Clip that overflow rather than shrink the
   ribbon. `clip` (not `hidden`) so the sticky nav and the fixed
   lightbox are not trapped in a new scroll container.
   ================================================================ */
html, body { overflow-x: clip; }


/* ================================================================
   === V12 === "Live from @awsnassertech".
   A compact one-row strip of squares, deliberately smaller than the
   portfolio tiles above it so it reads as a footnote to the work
   rather than a second gallery.
   ================================================================ */
#social { padding-top: 104px; }
#social .sec-head { align-items: flex-end; margin-bottom: 28px; }
/* a closing strip, not a headline section — the display size steps down so
   the header does not out-shout the 182px tiles underneath it */
#social .sec-title { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.ig-follow { display: inline-flex; align-items: center; gap: 9px; }
.ig-follow svg { width: 17px; height: 17px; }

.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.ig-item {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  background: #101012;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
a.ig-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3);
  border-color: rgba(255,255,255,0.3);
}
.ig-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
a.ig-item:hover img { transform: scale(1.07); }

/* caption rises on hover — same glass language as the gallery captions */
.ig-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 12px 11px;
  font-family: var(--fb); font-size: 0.66rem; line-height: 1.35;
  color: #fff;
  background: linear-gradient(transparent, rgba(10,10,12,0.88));
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
a.ig-item:hover .ig-cap { opacity: 1; transform: translateY(0); }

/* reel / carousel marker */
.ig-kind {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(16,16,19,0.6); border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ig-kind svg { width: 11px; height: 11px; fill: #fff; stroke: none; }

/* loading shimmer, so the strip is never an empty shelf */
.ig-skel {
  background: linear-gradient(100deg, #14141a 30%, #1d1d24 50%, #14141a 70%);
  background-size: 240% 100%;
  animation: ig-sheen 1.5s linear infinite;
}
@keyframes ig-sheen { to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) { .ig-skel { animation: none; } }

@media (max-width: 1100px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
                             #social .sec-head { align-items: flex-start; } }