/* =========================================================================
   Abdelrhman Shokry - portfolio
   Palette: off-black base, bone text, one accent (burnt coral). Locked.
   Radius rule: media and cards 16px, buttons and tags are full pills,
                nothing else gets a corner. Applied everywhere.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  --bg:        #0b0b0c;
  --bg-2:      #121214;
  --bg-3:      #17171a;
  --fg:        #f2f0eb;
  --fg-dim:    #a3a29c;
  --fg-faint:  #85837c;
  --line:      rgba(242, 240, 235, .13);
  --line-soft: rgba(242, 240, 235, .07);
  --accent:    #ff5c36;
  --accent-ink:#140603;          /* text sitting on top of the accent */
  --shadow:    0 30px 80px rgba(0, 0, 0, .55);

  --r-card: 16px;
  --r-pill: 999px;

  --wrap: 1400px;
  --gut: clamp(20px, 4.5vw, 72px);
  --sec: clamp(88px, 13vh, 168px);

  --ease: cubic-bezier(.16, 1, .3, 1);

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f4f2ed;
    --bg-2:      #eae7e0;
    --bg-3:      #e2ded5;
    --fg:        #121212;
    --fg-dim:    #56544f;
    --fg-faint:  #6b6860;
    --line:      rgba(18, 18, 18, .16);
    --line-soft: rgba(18, 18, 18, .08);
    --accent:    #bf3410;        /* darkened for AA on a light ground */
    --accent-ink:#fff7f4;
    --shadow:    0 30px 80px rgba(18, 18, 18, .14);
  }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Touch: kill the 300ms tap delay and the double-tap-zoom heuristic so the
   first tap on a card actually navigates instead of only lighting it up. */
a, button, [role="button"] { touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.6;
  font-weight: 400;
  /* Fallback for browsers without `clip`. See the @supports below: on iOS,
     `overflow-x: hidden` here makes the body itself the scrolling box, and a
     body scroller gets no momentum at all - the page stops dead the moment
     you lift your finger, and taps inside it are unreliable. */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* `clip` hides the same overflow but does NOT create a scroll container, so
   the document stays the scroller and native momentum comes back. */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}
body.is-locked { overflow: hidden; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

/* ---------- type ---------- */
.h2 {
  font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 500;
  max-width: 16ch;
}
.h3 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 500;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
p { max-width: 68ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: .95rem 1.7rem;
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid { background: var(--accent); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { transform: translateY(-2px); }
}
.btn--ghost { border-color: var(--line); color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { border-color: var(--fg); transform: translateY(-2px); }
}
.btn:active { transform: scale(.98); }

/* ---------- tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .02em;
  padding: .35rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-dim);
}

/* =========================================================================
   Media placeholders. Drop a real file at the printed path and it takes over.
   ========================================================================= */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background-color: var(--bg-2);
  background-image:
    repeating-linear-gradient(135deg, var(--line-soft) 0 1px, transparent 1px 11px);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.media img {
  /* absolute rather than a grid item: a percentage height on a centred grid
     item does not resolve, so the image used to overflow its own frame. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.media.is-filled img { opacity: 1; }
.media.is-filled { background-image: none; }
.media.is-filled .media__hint { display: none; }

.media__hint {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: center;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--fg-faint);
  padding: 1rem;
  pointer-events: none;
}
.media__hint b {
  font-weight: 500;
  color: var(--fg-dim);
  word-break: break-all;
}

.media--tall     { aspect-ratio: 6 / 7; }
.media--wide     { aspect-ratio: 16 / 10; }
.media--cinema   { aspect-ratio: 16 / 9; }
.media--bleed    { aspect-ratio: auto; height: 100%; width: 100%; border: 0; border-radius: 0; }
.media--thumb    { aspect-ratio: 3 / 2; }

/* =========================================================================
   Preloader
   ========================================================================= */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: grid;
  place-items: center;
}
.preloader__inner { display: grid; place-items: center; gap: 1.5rem; }
.preloader__logo {
  width: clamp(84px, 14vw, 150px);
  color: var(--fg);
  /* the wipe is driven by GSAP through this custom property */
  clip-path: inset(0 100% 0 0);
}
.preloader__logo svg { width: 100%; height: auto; }
.preloader__count {
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--fg-faint);
}
.preloader__count::after { content: "%"; }
.preloader.is-done { pointer-events: none; }

/* =========================================================================
   Nav
   ========================================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--gut);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line-soft); }

.nav__brand { display: flex; align-items: center; gap: .7rem; }
.mark { width: 28px; height: auto; color: var(--fg); flex: none; }
.nav__name {
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__links a {
  font-size: .88rem;
  color: var(--fg-dim);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--fg); }
}

.nav__toggle { display: none; padding: 10px; margin-right: -10px; }
.nav__toggle-box { display: block; width: 24px; }
.nav__toggle-box i {
  display: block;
  height: 1.5px;
  background: var(--fg);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__toggle-box i + i { margin-top: 6px; }
.nav__toggle[aria-expanded="true"] i:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 72px 0 0;
  z-index: 55;
  background: var(--bg);
  padding: clamp(24px, 6vw, 48px) var(--gut) calc(var(--gut) + 20px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; gap: .4rem; }
.menu__links a {
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: -.04em;
  line-height: 1.15;
  font-weight: 500;
}
.menu__foot {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-family: var(--f-mono);
  font-size: .8rem;
  color: var(--fg-dim);
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: clamp(104px, 12vh, 152px);
  padding-bottom: clamp(48px, 8vh, 96px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.hero__title {
  font-size: clamp(2.9rem, .4rem + 7vw, 7.5rem);
  line-height: .92;
  letter-spacing: -.045em;
  font-weight: 500;
  margin: 1.4rem 0 0;
}
.hero__title span { display: block; }
.hero__title span:last-child { color: var(--accent); }
.hero__sub {
  margin-top: 1.6rem;
  max-width: 46ch;
  color: var(--fg-dim);
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.2rem; }

/* =========================================================================
   Stack marquee (one per page)
   ========================================================================= */
.strip {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 30px) 0;
}
.strip__track { display: flex; width: max-content; will-change: transform; }
.strip__set { display: flex; align-items: center; padding-right: 0; }
.strip__set span {
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em;
  font-weight: 500;
  color: var(--fg-faint);
  padding-inline: clamp(18px, 3vw, 46px);
  white-space: nowrap;
}
.strip__set span:nth-child(3n+1) { color: var(--fg); }

/* =========================================================================
   About
   ========================================================================= */
.about { padding-block: var(--sec); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
/* The heading holds while the body reads. The figures live outside this grid
   on purpose: a sticky grid item is bounded by the grid container, so keeping
   them in here let the heading ride down over them. */
.about__lead { position: sticky; top: 120px; align-self: start; }
.about__lead .h2 { max-width: 13ch; }
.about__body { display: grid; gap: 1.3rem; color: var(--fg-dim); }
.about__body p { max-width: 58ch; }

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(24px, 5vw, 64px);
  padding-top: clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.figures__item dt {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: .8rem;
}
.figures__item dd {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 500;
}

/* =========================================================================
   Work grid
   ========================================================================= */
.work { padding-block: var(--sec) 0; }
.work__head { margin-bottom: clamp(32px, 5vw, 64px); }
.work__head .eyebrow { margin-bottom: 1rem; }
.work__grid { row-gap: clamp(48px, 7vw, 104px); }

.card { grid-column: span var(--span, 6); }
.card__link { display: block; }
.card__meta { padding-top: 1.5rem; display: grid; gap: .85rem; justify-items: start; }
.card__meta h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
}
.card__meta p { color: var(--fg-dim); max-width: 56ch; }
.card__go {
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--fg-faint);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .25s var(--ease);
}
.card__go i { font-size: 1rem; transition: transform .3s var(--ease); }
.card .media { transition: border-color .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card__link:hover .media { border-color: var(--fg-faint); }
  .card__link:hover .card__go { color: var(--accent); }
  .card__link:hover .card__go i { transform: translate(3px, -3px); }
  .card__link:hover .media img { transform: scale(1.2); }
}
.card .media img { transition: opacity .6s var(--ease), transform .8s var(--ease); }

/* the two full-width cards get their copy beside the image, not under it */
.card[style*="--span:12"] .card__meta {
  padding-top: 1.8rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 1rem clamp(24px, 5vw, 64px);
}
.card[style*="--span:12"] .card__meta h3 { grid-row: span 3; align-self: center; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); }
.card[style*="--span:12"] .card__meta p,
.card[style*="--span:12"] .card__meta .tags,
.card[style*="--span:12"] .card__meta .card__go { grid-column: 2; }

/* =========================================================================
   Horizontal pan
   ========================================================================= */
.pan {
  position: relative;
  overflow: hidden;
  margin-top: var(--sec);
  border-top: 1px solid var(--line-soft);
}
.pan__track {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(56px, 9vh, 120px) var(--gut);
  min-height: min(78vh, 720px);
  width: max-content;
}
.pan__intro {
  width: min(78vw, 460px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: clamp(16px, 3vw, 48px);
}
.pan__intro p { color: var(--fg-dim); margin-top: 1rem; }

.slab {
  width: min(72vw, 340px);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-2);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  a.slab:hover { transform: translateY(-6px); border-color: var(--fg-faint); }
}
.slab__name {
  font-size: 1.5rem;
  letter-spacing: -.03em;
  font-weight: 500;
  line-height: 1.1;
}
.slab__desc { color: var(--fg-dim); font-size: .95rem; }
.slab__url {
  margin-top: auto;
  font-family: var(--f-mono);
  font-size: .74rem;
  color: var(--fg-faint);
  word-break: break-all;
}
@media (hover: hover) and (pointer: fine) {
  a.slab:hover .slab__url { color: var(--accent); }
}
.slab--soon { background: transparent; border-style: dashed; }

/* cover thumb inside a slab, same hover language as the featured cards */
.slab .media { margin-bottom: .2rem; }
.slab .media img { transition: opacity .6s var(--ease), transform .8s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  a.slab:hover .media { border-color: var(--fg-faint); }
  a.slab:hover .media img { transform: scale(1.06); }
}

/* Touch devices get a brief press state rather than a stuck hover state. */
@media (hover: none) {
  .card__link:active .media { border-color: var(--fg-faint); }
  .card__link:active .card__go { color: var(--accent); }
  a.slab:active { border-color: var(--fg-faint); transform: translateY(-2px); }
  a.slab:active .slab__url { color: var(--accent); }
}
.slab--soon { justify-content: center; }

/* =========================================================================
   Capabilities
   ========================================================================= */
.build { padding-block: var(--sec); }
.build__h { margin-bottom: clamp(32px, 5vw, 64px); }
.clusters {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.cluster {
  display: grid;
  gap: 1.1rem;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--bg-2);
}
.cluster h3 {
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  letter-spacing: -.03em;
  font-weight: 500;
  line-height: 1.15;
}
.cluster p { color: var(--fg-dim); font-size: .96rem; }
.cluster--lead p { font-size: 1rem; }
/* one tile carries colour so the grid is not three grey boxes */
.cluster--accent {
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 62%),
    var(--bg-3);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

/* =========================================================================
   NileQuest feature, diagonal clip-path
   ========================================================================= */
.feature {
  position: relative;
  isolation: isolate;
  padding-block: clamp(120px, 18vh, 220px);
  clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 calc(100% - 4vw));
}
.feature__bg { position: absolute; inset: -8% 0; z-index: -2; }
.feature__bg .media { height: 100%; }
/* the artwork carries this section, so no scrim over it. Only the very top and
   bottom feather out, so the diagonal clip does not cut a hard edge. */
.feature__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    var(--bg) 0%,
    transparent 14%,
    transparent 86%,
    var(--bg) 100%);
}
.feature__inner { display: flex; align-items: center; gap: clamp(24px, 4vw, 72px); }
/* the lockup ships as its own file, so it sits in the clear half beside the
   panel instead of being cropped out from under it. */
.feature__logo {
  margin-left: auto;
  flex: none;
  width: clamp(150px, 17vw, 250px);
  height: auto;
  /* the lockup's type is white and the gradient behind it goes pale, in both
     themes. A soft shadow lifts it without recolouring the brand. */
  filter: drop-shadow(0 2px 20px rgba(0, 0, 0, .38));
}
.feature__card {
  max-width: 640px;
  display: grid;
  gap: 1.1rem;
  padding: clamp(26px, 3vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  /* smoked glass, now that it sits directly on the artwork. brightness() in the
     backdrop does the darkening instead of an opaque tint, so the colour and
     shape behind still read through while the text keeps its contrast. */
  background: color-mix(in srgb, var(--bg) 28%, transparent);
  border-color: color-mix(in srgb, var(--fg) 20%, transparent);
  backdrop-filter: blur(30px) saturate(160%) brightness(.38);
  -webkit-backdrop-filter: blur(30px) saturate(160%) brightness(.38);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--fg) 16%, transparent),
    var(--shadow);
}
/* the artwork is bright, so the body copy comes up off --fg-dim in here */
.feature__card p { color: color-mix(in srgb, var(--fg) 82%, transparent); }

/* light mode reads dark-on-light, so the glass has to frost the artwork up
   rather than smoke it down. Same panel, mirrored brightness. */
@media (prefers-color-scheme: light) {
  .feature__card {
    background: color-mix(in srgb, var(--bg) 40%, transparent);
    border-color: color-mix(in srgb, var(--fg) 22%, transparent);
    backdrop-filter: blur(30px) saturate(115%) brightness(1.85);
    -webkit-backdrop-filter: blur(30px) saturate(115%) brightness(1.85);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent),
      var(--shadow);
  }
  .feature__card p { color: color-mix(in srgb, var(--fg) 88%, transparent); }
}
.feature__kicker { font-family: var(--f-mono); font-size: .78rem; color: var(--accent); }
.feature__card p { font-size: .97rem; }
.feature__card .feature__kicker { color: var(--accent); }

@media (prefers-reduced-transparency: reduce) {
  .feature__card { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* =========================================================================
   Experience rows
   ========================================================================= */
.cv { padding-block: var(--sec); }
.cv__h { margin-bottom: clamp(36px, 6vw, 72px); }
.cv__group { margin-bottom: clamp(40px, 6vw, 80px); }
.cv__group:last-child { margin-bottom: 0; }
.cv__label {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-weight: 400;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
}
.row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(12px, 3vw, 48px);
  padding-block: clamp(18px, 2.4vw, 30px);
}
.row + .row { border-top: 1px solid var(--line-soft); }
.row__when { font-family: var(--f-mono); font-size: .78rem; color: var(--fg-faint); padding-top: .3rem; }
.row__what h4 {
  font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
  letter-spacing: -.025em;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .5rem;
}
.row__what p { color: var(--fg-dim); font-size: .96rem; }

/* =========================================================================
   Contact
   ========================================================================= */
.contact {
  padding-block: var(--sec);
  border-top: 1px solid var(--line);
}
.contact .eyebrow { margin-bottom: 1.2rem; }
.contact__title {
  font-size: clamp(2.4rem, .8rem + 8vw, 8rem);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 500;
}
.contact__title span { display: block; }
.contact__title span:last-child { color: var(--accent); }
.contact__grid {
  margin-top: clamp(36px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.contact__note { color: var(--fg-faint); font-size: .88rem; margin-top: 1rem; }
.contact__list { display: grid; gap: 0; }
.contact__list li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.contact__list li:last-child { border-bottom: 1px solid var(--line-soft); }
.contact__list span {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.contact__list a { word-break: break-word; transition: color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .contact__list a:hover { color: var(--accent); }
}

/* =========================================================================
   Footer
   ========================================================================= */
.foot { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(20px, 4vw, 48px);
  font-family: var(--f-mono);
  font-size: .76rem;
  color: var(--fg-faint);
}
.foot__inner p { margin: 0; }
.mark--foot { width: 22px; color: var(--fg-faint); }
.foot__lang { margin-left: auto; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .clusters { grid-template-columns: 1fr 1fr; }
  .cluster--lead { grid-column: span 2; }
  .card[style*="--span:12"] .card__meta { grid-template-columns: minmax(0, 1fr); }
  .card[style*="--span:12"] .card__meta h3 { grid-row: auto; }
  .card[style*="--span:12"] .card__meta p,
  .card[style*="--span:12"] .card__meta .tags,
  .card[style*="--span:12"] .card__meta .card__go { grid-column: 1; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .hero { min-height: auto; padding-top: 120px; }
  .feature__logo { display: none; }
  .hero__title { margin-top: 1rem; }
  .work__grid { grid-template-columns: 1fr; }
  .card { grid-column: 1 / -1; }
  .card .media { aspect-ratio: 4 / 3; }
  .figures { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 5vw, 40px); }
  .about__grid { grid-template-columns: 1fr; }
  .about__lead { position: static; }
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* every remaining asymmetric grid collapses to one column */
  .clusters { grid-template-columns: 1fr; }
  .cluster--lead { grid-column: 1; }

  .row { grid-template-columns: 1fr; gap: .5rem; }
  .row__when { padding-top: 0; }

  .contact__list li { grid-template-columns: 1fr; gap: .25rem; }

  .feature { clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw)); }
  .foot__lang { margin-left: 0; }
  .nav__name { display: none; }
}

@media (max-width: 520px) {
  .hero__cta .btn { flex: 1 1 100%; }
  .figures { grid-template-columns: 1fr; }
}

/* =========================================================================
   Reduced motion: everything lands in its final state, nothing loops
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .preloader__logo { clip-path: none; }
}

/* =========================================================================
   Split-text masks (built by JS). The padding reserve is what stops
   descenders in words like "something" from being clipped by the mask.
   ========================================================================= */
.msk {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.msk__in { display: block; will-change: transform; }
.msk-line { display: block; }

/* Horizontal pan falls back to a plain swipeable row on small screens */
@media (max-width: 768px) {
  .pan { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .pan__track { min-height: auto; padding-block: clamp(48px, 8vh, 80px); }
  .pan__intro, .slab { scroll-snap-align: start; }
}