@charset "UTF-8";
/* ============================================================
   Amir Waliyuddin — Portfolio
   Dark, technical, static. No framework, no build step.
   ============================================================ */

:root {
  /* surfaces */
  --bg:            #070a0f;
  --bg-rgb:        7, 10, 15;
  --bg-soft:       #0b1018;
  --bg-soft-rgb:   11, 16, 24;
  --panel:         #0e151f;
  --panel-2:       #121b27;
  --line:          #1d2836;
  --line-soft:     #16202c;

  /* ink */
  --ink:           #e8eef6;
  --ink-2:         #a8b6c8;
  --ink-3:         #6f8094;

  /* accent */
  --acc:           #38bdf8;
  --acc-2:         #22d3ee;
  --acc-dim:       rgba(56, 189, 248, 0.12);
  --acc-line:      rgba(56, 189, 248, 0.32);

  /* type — one family throughout */
  --sans:  "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* same family, used for the small tracked-out technical labels */
  --label: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* metrics */
  --max:   1180px;
  --gutter: 24px;
  --nav-h: 68px;
  --r-sm:  8px;
  --r:     14px;
  --r-lg:  20px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--acc); color: #04080d; }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 104px 0; position: relative; }
.section--tight { padding: 80px 0; }

/* A hairline that fades out at both ends — soft enough not to cut the page,
   present enough to mark where one section ends. Sits at the top of every
   section, so the first one falls on the hero boundary.
   `.contact` already uses ::before for its glow layer, hence ::after here. */
.section::after,
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.07) 18%,
    rgba(255, 255, 255, 0.07) 82%,
    transparent
  );
}

.eyebrow {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acc);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--acc);
  flex: none;
}

.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head h2 {
  font-size: clamp(28px, 4.2vw, 40px);
  margin-bottom: 14px;
}
.section-head p { color: var(--ink-2); font-size: 16.5px; }

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--acc);
  color: #04080d;
  padding: 10px 18px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7, 10, 15, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 15.5px;
  flex: none;
}
.brand__mark {
  height: 26px;
  width: auto;
  flex: none;
}
.brand__sub { color: var(--ink-3); font-weight: 400; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  padding: 8px 13px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--ink); background: rgba(255,255,255,0.045); }
.nav__links a.is-active { color: var(--acc); }

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 11px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.7px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 56px) 0 72px;
  overflow: hidden;
}

/* Each glow is a circle sized farthest-corner, so its real radius is the
   diagonal, not half its height — tuning them one by one is guesswork. Mask
   the whole layer instead and every one of them fades on the same curve. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.4) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.4) 92%, transparent 100%);
}

#net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
}
.hero__glow--a {
  width: 620px; height: 620px;
  right: -140px; top: -120px;
  background: radial-gradient(circle, rgba(56,189,248,0.16), transparent 68%);
}
.hero__glow--b {
  width: 660px; height: 540px;
  left: -140px; bottom: 40px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.17), transparent 68%);
}
.hero__glow--c {
  width: 540px; height: 440px;
  left: 24%; bottom: 70px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.15), transparent 70%);
}

.hero .wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: center;
}
/* grid items default to min-width:auto — without this a long word widens the column */
.hero__copy { min-width: 0; }

.hero h1 {
  font-size: clamp(40px, 7.4vw, 72px);
  letter-spacing: -0.035em;
  margin-bottom: 8px;
}
.hero h1 .ln { display: block; }
.hero h1 .ln--accent {
  background: linear-gradient(100deg, var(--acc) 0%, var(--acc-2) 55%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__role {
  font-family: var(--label);
  font-size: clamp(13.5px, 1.8vw, 15.5px);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  margin: 18px 0 22px;
}
.hero__role b { color: var(--ink); font-weight: 500; }
.hero__role .sep { color: var(--acc); opacity: 0.6; padding: 0 6px; }

.hero__lede {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 54ch;
  margin-bottom: 34px;
}
.hero__lede strong { color: var(--ink); font-weight: 600; }

.btn-row { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 44px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.22s, background 0.22s, border-color 0.22s;
}
.btn svg { flex: none; }
.btn--primary {
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  color: #04080d;
  box-shadow: 0 10px 30px -12px rgba(56, 189, 248, 0.6);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(56, 189, 248, 0.75); }
.btn--ghost {
  /* transparent rather than removed, so it keeps the same box as .btn--primary */
  border-color: transparent;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
.btn--ghost:hover {
  color: var(--acc);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}
/* dividers drawn as insets rather than a 1px gap, so nothing opaque is needed
   behind the cells and the blur stays continuous across the whole strip */
.stat { padding: 18px 16px; position: relative; }
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: rgba(255, 255, 255, 0.085);
}
.stat:first-child::before { display: none; }
.stat__n {
  font-family: var(--label);
  font-size: 26px;
  font-weight: 700;
  color: var(--acc);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.stat__l {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 6px;
  line-height: 1.5;
  min-height: 2em;
}

/* portrait */
.portrait { position: relative; justify-self: center; width: 100%; max-width: 430px; }
.portrait__ring {
  position: absolute;
  inset: 6% 2% 0 2%;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 50% 42%, rgba(56,189,248,0.3), rgba(56,189,248,0.05) 55%, transparent 72%);
  filter: blur(26px);
}
.portrait img {
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, 0.6));
  /* the source headshot is cropped at the shoulders — dissolve that hard edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.55) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, 0.55) 92%, transparent 100%);
}
/* ============================================================
   ABOUT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.about-copy p + p { margin-top: 18px; }
.about-copy p { color: var(--ink-2); font-size: 16.5px; }
.about-copy strong { color: var(--ink); font-weight: 600; }

.glass-aura--facts {
  inset: -34px -28px;
  background:
    radial-gradient(300px 260px at 18% 10%, rgba(56, 189, 248, 0.19), transparent 64%),
    radial-gradient(280px 300px at 92% 42%, rgba(129, 140, 248, 0.17), transparent 64%),
    radial-gradient(300px 280px at 30% 92%, rgba(34, 211, 238, 0.13), transparent 64%);
}

.facts {
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.facts li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 20px;
  font-size: 14.5px;
}
/* inset to match the cell padding, so the rule stops short of the glass edge */
.facts li::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.085);
}
.facts li:last-child::after { display: none; }
.facts dt, .facts .k {
  color: var(--ink-3);
  font-family: var(--label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 3px;
  flex: none;
}
.facts .v { text-align: right; font-weight: 500; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--acc-line), var(--line) 22%, var(--line) 78%, transparent);
}

.tl-item { position: relative; padding-bottom: 46px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.tl-item--now::before {
  border-color: var(--acc);
  box-shadow: 0 0 0 5px rgba(56, 189, 248, 0.12);
}

.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 4px;
}
.tl-head h3 { font-size: 20px; }
.tl-when {
  font-family: var(--label);
  font-size: 12px;
  font-weight: 600;
  color: var(--acc);
  background: var(--acc-dim);
  border: 1px solid var(--acc-line);
  padding: 3px 11px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tl-when--past { color: var(--ink-3); background: transparent; border-color: var(--line); }
.tl-org {
  color: var(--ink-2);
  font-size: 14.5px;
  margin-bottom: 14px;
  display: block;
}
.tl-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 15px;
  margin-bottom: 8px;
}
.tl-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 6px;
  height: 1px;
  background: var(--acc);
  opacity: 0.8;
}

/* ============================================================
   CAPABILITIES — editorial index, not cards.
   Full-width hairline rows: discipline on the left, prose and
   the technology line on the right.
   ============================================================ */
.caps { border-top: 1px solid var(--line); }

.cap {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 44px;
  row-gap: 14px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background 0.4s var(--ease);
}
.cap__media { grid-column: 1; grid-row: 1 / 3; }
.cap__title { grid-column: 2; grid-row: 1; }
.cap__body  { grid-column: 2; grid-row: 2; }

/* The four source images come from different worlds — photo, 3D render and flat
   illustration. A shared crop, a desaturation and a light accent tint pull them
   into one system; hover hands the original back. */
.cap__media {
  margin: 0;
  position: relative;
  isolation: isolate;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  /* Dissolve the right edge into the page so the image hands off to the text
     instead of stopping at a hard border. Masking the figure (not the img)
     takes the tint layer with it. */
  --fade: linear-gradient(to right,
            #000 0%,
            #000 46%,
            rgba(0, 0, 0, 0.72) 68%,
            rgba(0, 0, 0, 0.3) 85%,
            rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
}
.cap__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.58) contrast(1.04) brightness(0.86);
  transition: filter 0.55s var(--ease), transform 0.8s var(--ease);
}
.cap__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acc);
  mix-blend-mode: color;
  opacity: 0.3;
  transition: opacity 0.55s var(--ease);
  pointer-events: none;
}
.cap:hover .cap__media img { filter: none; transform: scale(1.035); }
.cap:hover .cap__media::after { opacity: 0; }
.cap::before {
  content: "";
  position: absolute;
  left: -24px;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--acc);
  transition: width 0.45s var(--ease);
}
.cap:hover { background: rgba(255, 255, 255, 0.013); }
.cap:hover::before { width: 24px; }

.cap__title {
  font-size: 21px;
  letter-spacing: -0.022em;
  padding-top: 1px;
  transition: color 0.3s;
}
.cap:hover .cap__title { color: var(--acc); }

.cap__body p {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 47ch;
}

.cap__tech {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 2.05;
}
.cap__tech {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 4px;
}
.cap__tech li { display: inline-flex; align-items: baseline; white-space: nowrap; }
.cap__tech li:not(:last-child)::after {
  content: "·";
  color: var(--ink-3);
  margin: 0 11px;
}

/* ============================================================
   EDUCATION — same hairline rhythm, dates in the left column
   ============================================================ */
.edu { border-top: 1px solid var(--line); }

.edu__item {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 10px 44px;
  padding: 34px 0 32px;
  border-bottom: 1px solid var(--line);
}
/* logo sits above the date in the left rail, matching the Capabilities rail */
.edu__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.edu__logo {
  height: 96px;
  width: auto;
  /* both marks carry a white outline, so they read on the dark ground */
}
.edu__when {
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.edu__item h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 7px;
  max-width: 52ch;
}
.edu__org { color: var(--acc); font-size: 15px; font-weight: 500; }
.edu__former {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 5px;
}
.edu__desc {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 47ch;          /* ~70 characters, same measure as Capabilities */
}

/* ============================================================
   CLOUD — scope + agencies
   ============================================================ */
/* the only section with a different base tone — fade it in and out so the
   change of ground reads as a gradient, not a seam */
.cloud-band {
  background:
    radial-gradient(1100px 420px at 85% 420px, rgba(56, 189, 248, 0.08), transparent 65%),
    linear-gradient(
      to bottom,
      rgba(var(--bg-soft-rgb), 0) 0%,
      rgba(var(--bg-soft-rgb), 1) 15%,
      rgba(var(--bg-soft-rgb), 1) 85%,
      rgba(var(--bg-soft-rgb), 0) 100%
    );
}

/* ------------------------------------------------------------------
   GLASS — shared material
   backdrop-filter blurs what sits BEHIND an element, so frosted glass
   over a flat background renders as nothing at all. Every .glass card
   must sit inside a .glass-stage that carries a .glass-aura; the aura
   is the colour the cards refract. Flatten it and the glass vanishes.
   ------------------------------------------------------------------ */
.glass-stage {
  position: relative;
  isolation: isolate;
}
.glass-stage--scope { margin-bottom: 72px; }

.glass-aura {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(34px);
}

.glass {
  /* no outline — the material is the blur, the fill and the top sheen */
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 12px 34px -14px rgba(0, 0, 0, 0.72);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease);
}
/* Only cards opt into the lift — a facts panel that jumps under the cursor
   reads as a broken button. */
.glass--lift:hover {
  background: rgba(255, 255, 255, 0.085);
  /* grows as well as lifts; z-index keeps it over the siblings it now overlaps */
  transform: translateY(-3px) scale(1.03);
  z-index: 2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 42px -14px rgba(0, 0, 0, 0.8);
}

/* Hairlines *inside* a glass panel are the iOS grouped-list pattern and are
   not an outline — they are set in white alpha so they read as etched, not drawn. */
.glass-rule { background: rgba(255, 255, 255, 0.085); }

/* Firefox before 103 and anything else without the filter: keep it readable
   rather than letting a near-transparent card sit on a bright aura. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(16, 24, 36, 0.88); }
  .glass-aura { opacity: 0.45; }
}

/* ---- scope grid ---- */
.glass-aura--scope {
  inset: -34px -30px;
  background:
    radial-gradient(400px 300px at 11% 14%, rgba(56, 189, 248, 0.40), transparent 63%),
    radial-gradient(360px 280px at 70% 7%,  rgba(129, 140, 248, 0.34), transparent 64%),
    radial-gradient(420px 300px at 44% 44%, rgba(34, 211, 238, 0.26), transparent 64%),
    radial-gradient(340px 260px at 93% 38%, rgba(168, 85, 247, 0.26), transparent 64%),
    radial-gradient(300px 240px at 14% 84%, rgba(56, 189, 248, 0.26), transparent 64%);
}

.scope {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* ten items over three columns leaves one on its own — put it under the middle */
.scope > :last-child { grid-column: 2; }
.scope__item { position: relative; padding: 24px 22px; display: flex; gap: 15px; }

.scope__n {
  font-family: var(--label);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--acc);
  padding-top: 3px;
  width: 22px;
  flex: none;
}
.scope__item h3 { font-size: 15.5px; margin-bottom: 6px; }
.scope__item p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* mirrored hues so the two glass grids in this section don't read as a repeat */
.glass-aura--agency {
  inset: -92px 0;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background:
    radial-gradient(360px 260px at 7% 22%,  rgba(129, 140, 248, 0.44), transparent 64%),
    radial-gradient(380px 270px at 40% 84%, rgba(56, 189, 248, 0.37), transparent 64%),
    radial-gradient(360px 260px at 64% 10%, rgba(34, 211, 238, 0.35), transparent 64%),
    radial-gradient(340px 250px at 95% 58%, rgba(168, 85, 247, 0.37), transparent 64%);
}

.agency-stage {
  --nav-gutter: 80px;   /* clear lane for the arrows, outside the cards */
}

.agency-track {
  position: relative;
  z-index: 1;
  --visible: 5;         /* keep this odd */
  --gap: 11px;
  display: flex;
  gap: var(--gap);
  margin-inline: var(--nav-gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;          /* the script decides when to animate */
  /* the hover lift and the card shadow both live outside the card box */
  padding-block: 26px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.agency-track::-webkit-scrollbar { display: none; }
.agency-track:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }

.agency {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  scroll-snap-align: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
  padding: 18px;
  display: flex;
  flex-direction: column;
  transform: scale(var(--card-s, 1));
  opacity: var(--card-o, 1);
}
/* No hover state on these: the cards are not links, and changing transform on
   hover re-promotes the card to a new compositing layer, which made Chrome
   re-raster neighbours and leave a bright seam on an earlier card. */

/* Painted over the track rather than masking it: a mask on an ancestor makes a
   backdrop root, which would cut the cards off from the aura behind them. */
.agency-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--nav-gutter) + 26px);
  z-index: 2;
  pointer-events: none;
}
.agency-fade--l {
  left: 0;
  background: linear-gradient(to right, rgba(var(--bg-soft-rgb), 1), rgba(var(--bg-soft-rgb), 0));
}
.agency-fade--r {
  right: 0;
  background: linear-gradient(to left, rgba(var(--bg-soft-rgb), 1), rgba(var(--bg-soft-rgb), 0));
}

.agency-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 10px 26px -12px rgba(0, 0, 0, 0.8);
  transition: background 0.25s var(--ease), color 0.25s, transform 0.25s var(--ease);
}
.agency-nav:hover { background: rgba(255, 255, 255, 0.15); color: var(--acc); }
.agency-nav:active { transform: scale(0.94); }
.agency-nav--prev { left: 0; }
.agency-nav--next { right: 0; }
.agency__plate {
  background: #fff;
  border-radius: 10px;
  aspect-ratio: 26 / 17;
  display: grid;
  place-items: center;
  padding: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.agency__plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.agency__code {
  font-family: var(--label);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.agency__name {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: 3px;
}
.agency__tag {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 0;
  font-family: var(--label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acc);
  border: 0;
  background: rgba(56, 189, 248, 0.16);
  padding: 3px 9px;
  border-radius: 7px;
}
.agency__name { margin-bottom: 12px; }

.note {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.7;
  max-width: 76ch;
  border-left: 2px solid var(--line);
  padding-left: 16px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  text-align: center;
}
/* A background layer is painted to the element's box and stops there. On its
   own masked layer the glow fades out before the edge at any section height,
   which a tuned percentage cannot promise once the text rewraps. */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 400px at 50% 14%, rgba(56, 189, 248, 0.15), transparent 70%),
    radial-gradient(560px 320px at 34% 54%, rgba(129, 140, 248, 0.15), transparent 70%),
    radial-gradient(520px 300px at 72% 74%, rgba(34, 211, 238, 0.13), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}
.contact .wrap { position: relative; z-index: 2; max-width: 760px; }
.contact h2 {
  font-size: clamp(30px, 5.2vw, 48px);
  margin-bottom: 18px;
  letter-spacing: -0.035em;
}
.contact p { color: var(--ink-2); font-size: 17px; margin-bottom: 34px; }
.contact .btn-row { justify-content: center; margin-bottom: 0; }

.contact-strip {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
}
.contact-strip > div {
  padding: 20px 28px;
  flex: 1 1 200px;
  position: relative;
}
.contact-strip > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: rgba(255, 255, 255, 0.085);
}
.contact-strip > div:first-child::before { display: none; }
.contact-strip .k {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.contact-strip .v { font-size: 14.5px; font-weight: 500; }
.contact-strip .v--mail {
  font-family: var(--label);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.contact-strip > div:first-child { flex-basis: 280px; }
.contact-strip a.v:hover { color: var(--acc); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  padding: 34px 0;
  background: var(--bg);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
}
.footer p { font-size: 13px; color: var(--ink-3); }
.footer .to-top {
  font-family: var(--label);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.footer .to-top:hover { color: var(--acc); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 0.75s var(--ease), translate 0.75s var(--ease);
  will-change: opacity, translate;
}
.reveal.is-in { opacity: 1; translate: 0 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .portrait { max-width: 330px; order: -1; }
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 40px); }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 880px) {
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: rgba(7, 10, 15, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    padding: 14px var(--gutter) 22px;
    transform: translateY(-14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 13px 10px; font-size: 15.5px; border-radius: 10px; }
  .burger { display: block; }
}

@media (max-width: 1120px) {
  .agency-track { --visible: 3; }
}

@media (max-width: 940px) {
  .scope { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope > :last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  .scope { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cap, .edu__item { grid-template-columns: 1fr; gap: 16px; }
  .cap { padding: 30px 0 32px; }
  .cap::before { display: none; }
  .cap__title { font-size: 19px; }
  .edu__when { padding-top: 0; }
  /* unwind the explicit placement so the rows simply stack */
  .cap__media, .cap__title, .cap__body { grid-column: 1; grid-row: auto; }
  .cap__media {
    max-width: 420px;
    border-radius: 6px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .glass-aura { inset: -24px 0; }
  .glass-aura--agency { inset: -74px 0; }
  /* swiping is the control on a phone; the arrows just take up room */
  /* a 28px backdrop blur across twenty cards is heavy for phone GPUs */
  .glass {
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

@media (max-width: 760px) {
  /* phone: swipe is the control, so the arrows and their lane go, and one
     whole card fills the track */
  .agency-nav { display: none; }
  .agency-stage { --nav-gutter: 0px; }
  .agency-track { --visible: 1; }

  .section { padding: 76px 0; }
  .section-head { margin-bottom: 38px; }

  /* two columns: vertical rules only on the right-hand cell, horizontal on row 2 */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd)::before { display: none; }
  .stat:nth-child(n + 3)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.085);
  }

  /* stacked: the rule moves from the left edge to the top edge */
  .contact-strip > div { flex-basis: 100%; }
  .contact-strip > div::before {
    left: 24px;
    right: 24px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .facts li { flex-direction: column; gap: 4px; }
  .facts .v { text-align: left; }
}

@media (max-width: 460px) {
  :root { --gutter: 16px; }
  .btn { width: 100%; justify-content: center; }
  .hero__lede { font-size: 16px; }
  .brand__sub { display: none; }
  .timeline { padding-left: 24px; }
  .tl-item::before { left: -24px; }
}

@media print {
  .nav, #net, .hero__glow, .btn-row, .footer .to-top { display: none !important; }
  body { background: #fff; color: #111; }
  .reveal { opacity: 1; translate: none; }
  /* no self-starting motion, and no scaling tied to scroll position */
  .agency { transform: none !important; opacity: 1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; translate: none; }
}