/* =========================================================
   Mustafa Khaled — Portfolio
   Minimal dark, editorial, image-forward
   ========================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Tokens ---------- */
:root {
  --bg:        #0c0c0c;
  --bg-soft:   #0d0d10;
  --bg-card:   #101014;
  --fg:        #f0efed;
  --fg-dim:    #a3a2a8;
  --muted:     #82828d;   /* 5.1:1 on --bg; #6e6e77 measured 3.87:1 and failed WCAG AA */
  --line:      rgba(244, 242, 238, .11);
  --line-soft: rgba(244, 242, 238, .06);
  --accent:    #e2c38a;
  --kicker:    #ffbfff;   /* blueberry-studio.com kicker colour, measured rgb(255,191,255) */

  --font-sans:  'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut:  clamp(20px, 4.4vw, 64px);
  --maxw: 1600px;
  --sect: clamp(64px, 6.75vw, 120px);   /* blueberry-studio.com runs 99-144px; was 190px and left big voids */

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: 'ss01' 1, 'cv05' 1;
}
body.is-locked { overflow: hidden; }

::selection { background: var(--fg); color: var(--bg); }

/* Keyboard focus. There was no visible ring at all before this; tabbing the page
   moved an invisible cursor. Scoped to :focus-visible so mouse clicks stay clean. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.card:focus-visible, .dcard:focus-visible, .pill-btn:focus-visible { outline-offset: 5px; }

/* Grain overlay */
body::after {
  content: '';
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9998;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) }
  20% { transform: translate(-3%, 4%) }
  40% { transform: translate(4%, -2%) }
  60% { transform: translate(-2%, -4%) }
  80% { transform: translate(3%, 2%) }
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sect); position: relative; }
section[id], .contact[id] { scroll-margin-top: 84px; }
.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Type ---------- */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

h1, h2, h3, h4 { font-weight: 500; line-height: .95; letter-spacing: -.035em; }

.h-display {
  font-size: clamp(2.4rem, 6.9vw, 6.9rem);
  line-height: .86;
  letter-spacing: -.048em;
  font-weight: 500;
}
.h-xl { font-size: clamp(2.4rem, 7.2vw, 6.5rem); line-height: .92; letter-spacing: -.042em; }
/* Section heading, matched to blueberry-studio.com: Geist Light, ~44px @1440 */
.h-sec {
  font-size: clamp(2.1rem, 4vw, 4rem);      /* 64px @1600, matched to blueberry-studio.com */
  font-weight: 400; letter-spacing: -.025em; line-height: .95; margin: 0;
}
.sect-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pill-btn {
  border: 1px solid #1e1e1e; border-radius: 999px; padding: 13px 22px;
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--fg); white-space: nowrap; flex-shrink: 0;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.pill-btn:hover { border-color: rgba(240,239,237,.4); background: rgba(240,239,237,.05); }
.h-lg { font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; }
.h-md { font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em; }
.lead {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -.018em;
  color: var(--fg-dim);
  font-weight: 400;
}
.body-t { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.62; color: var(--fg-dim); }

/* ---------- Reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

[data-reveal-mask] { overflow: hidden; display: block; }
[data-reveal-mask] > * {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal-mask].in > * { transform: none; }

/* ---------- Preloader ---------- */
.preload {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: grid; place-items: center;
  transition: transform 1.05s var(--ease-io), opacity .5s ease .55s;
}
.preload.done { transform: translateY(-101%); opacity: 0; pointer-events: none; }
.preload__inner { text-align: center; padding-inline: var(--gut); }
.preload__logo {
  width: clamp(190px, 30vw, 340px); height: auto; display: block; margin: 0 auto;
  opacity: 0; animation: fadeUp .9s var(--ease) .15s forwards;
}
.preload__count {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .18em; color: var(--muted);
  margin-top: 18px;
}
.preload__bar { width: min(280px, 60vw); height: 1px; background: var(--line); margin: 22px auto 0; overflow: hidden; }
.preload__bar i { display: block; height: 100%; width: 0%; background: var(--fg); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

/* ---------- Cursor ----------
   Mustafa's white pixel hand, from his own artwork (Mustafa-Mouse svg.ai), on
   everything, links and buttons included. While the mouse button is held it
   flips to its inverted copy (black hand, light outline): :active matches the
   pressed element and all its ancestors, so it works anywhere with no JS.
   1x and 2x PNGs keep it crisp on retina; the hotspot is the fingertip.
   !important because several components set cursor: pointer themselves. */
html, html * { cursor: url("/assets/cursor-hand.png") 4 2, auto !important; cursor: image-set(url("/assets/cursor-hand.png") 1x, url("/assets/cursor-hand@2x.png") 2x) 4 2, auto !important; }
html:active, html :active { cursor: url("/assets/cursor-hand-down.png") 4 2, auto !important; cursor: image-set(url("/assets/cursor-hand-down.png") 1x, url("/assets/cursor-hand-down@2x.png") 2x) 4 2, auto !important; }
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, [contenteditable="true"]) { cursor: text !important; }
html :is(button, input):disabled { cursor: not-allowed !important; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  padding-block: 20px;
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
  padding-block: 13px;
}
.nav.hide { transform: translateY(-110%); }
.nav { transition: transform .55s var(--ease), background-color .5s var(--ease), backdrop-filter .5s, padding .5s var(--ease), border-color .5s; }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand {
  display: inline-flex; align-items: center; gap: 13px;
  font-weight: 500; letter-spacing: -.035em; font-size: 1.12rem;
  white-space: nowrap; position: relative; padding-block: 2px;
  transition: opacity .35s var(--ease);
}
/* Arabic logotype — مصطفى خالد */
.brand__logo {
  height: 40px; width: auto; display: block; flex-shrink: 0;
  transition: opacity .35s var(--ease);
}

.brand::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease);
}
.brand:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav__link {
  font-size: 13.5px; letter-spacing: -.01em; color: var(--fg-dim);
  position: relative; transition: color .35s var(--ease);
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;      /* 44px hit area, no visual change */
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Instagram + LinkedIn icons beside Contact. 44px hit area around a 20px icon;
   pulled together so the pair reads as one group next to the text link. */
.nav__icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  color: var(--fg-dim); transition: color .3s var(--ease);
}
.nav__icon + .nav__icon { margin-left: calc(-1 * clamp(18px, 2.4vw, 38px) + 2px); }
.nav__icon:hover { color: var(--fg); }
.nav__icon:focus-visible { outline: 2px solid var(--kicker); outline-offset: -4px; border-radius: 8px; }
/* Small phones: logo + icons + Contact + Portfolio don't fit on one line. The
   same links sit in the contact section, so the icons step out here. */
@media (max-width: 560px) { .nav__icon { display: none; } }

/* Portfolio button — the one loud element on the page. Solid --kicker pink, the
   same pink the kickers and the headline hover already use, so it reads as part
   of the palette rather than a sticker. Near-black text on it: 14.9:1. */
.nav__cta {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--kicker); color: #0c0c0c;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.012em;
  white-space: nowrap; flex-shrink: 0;
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.nav__cta-x { font-size: 1.05em; line-height: 1; transition: transform .35s var(--ease); }
.nav__cta:hover { background: #ffd9ff; }
.nav__cta:hover .nav__cta-x { transform: translate(2px, -2px); }
.nav__cta:focus-visible { outline: 2px solid var(--kicker); outline-offset: 3px; }

/* Narrow screens: the logo, Contact and the button stop fitting on one line
   around 430px. Tighten the button rather than dropping either nav item. */
@media (max-width: 480px) {
  .nav__links { gap: 12px; }
  .nav__cta { padding: 0 15px; font-size: 12.5px; gap: 5px; }
}

.nav__meta { display: flex; align-items: center; gap: 10px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); position: relative; }
.dot::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: .5; animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.6); opacity: .7 } 100% { transform: scale(1.7); opacity: 0 } }

.burger { display: none; width: 40px; height: 40px; place-items: center; }
.burger i { display: block; width: 20px; height: 1px; background: var(--fg); position: relative; transition: background-color .3s; }
.burger i::before, .burger i::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: var(--fg);
  transition: transform .45s var(--ease);
}
.burger i::before { top: -6px; } .burger i::after { top: 6px; }
body.menu-open .burger i { background: transparent; }
body.menu-open .burger i::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger i::after  { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 890;
  background: var(--bg-soft);
  padding: 110px var(--gut) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu__list a {
  display: block; font-size: clamp(2.2rem, 9vw, 4.2rem); letter-spacing: -.045em;
  line-height: 1.06; padding-block: 6px; color: var(--fg-dim); transition: color .3s, transform .5s var(--ease);
}
.menu__list a:hover { color: var(--fg); transform: translateX(10px); }
.menu__foot { display: flex; flex-wrap: wrap; gap: 20px 32px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 84px 32px; overflow: hidden;
}
.hero__grid { position: relative; z-index: 3; width: 100%; }
.hero__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 33vw, 470px);
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;               /* portrait runs the full height of the row */
}

/* Left column: headline at the top, scroll cue pinned to the bottom */
.hero__type {
  min-width: 0;
  display: flex; flex-direction: column;
}
.hero__title + .hero__blurb { margin-top: clamp(16px, 2.1vw, 26px); }
.hero__blurb + .hero__strip { margin-top: clamp(18px, 2.3vw, 28px); }
.hero__strip + .scroll-cue { margin-top: auto; padding-top: clamp(20px, 2.6vw, 34px); }

.hero__portrait {
  position: relative; overflow: hidden; border-radius: 8px;
  background: var(--bg-card);
  min-height: clamp(360px, 58vh, 660px);
  align-self: stretch;
}
.hero__portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  filter: grayscale(1) contrast(1.05) brightness(.9);
  transition: filter .8s var(--ease), transform 1.4s var(--ease);
}
.hero__portrait:hover img { filter: grayscale(1) contrast(1.07) brightness(1); transform: scale(1.03); }
.hero__portrait::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,.05) 0%, rgba(8,8,10,.32) 68%, rgba(8,8,10,.8) 100%);
}
.hero__portrait figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  font-size: 10px; letter-spacing: .14em; color: var(--fg-dim);
}

@media (max-width: 900px) {
  .hero__cols { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .hero__type { display: block; }
  .hero__strip + .scroll-cue { margin-top: clamp(18px, 2.4vw, 28px); padding-top: 0; }
  .hero__portrait {
    order: -1; min-height: 0;
    width: clamp(150px, 44vw, 230px); aspect-ratio: 1372 / 1600;
  }
}
}

.hero__title { position: relative; perspective: 900px; }

/* Kinetic headline — each letter rises and rotates into place on reveal */
.kin .word { display: inline-block; white-space: nowrap; transform-style: preserve-3d; }
.kin .sp { display: inline-block; width: .26em; }
.kin .ch {
  display: inline-block;
  transform-origin: 50% 90%;
  opacity: 0;
  transform: translateY(.62em) rotateX(-72deg);
  transition:
    opacity .55s cubic-bezier(.22,1,.36,1),
    transform .85s cubic-bezier(.22,1,.36,1),
    color .3s ease;
  transition-delay: calc(var(--c) * 26ms + 120ms);
  will-change: transform, opacity;
}
.kin.in .ch { opacity: 1; transform: none; }

/* Magnetic field — letters bend toward the pointer and bond together around it.

   Every value here is driven from JS as a plain number in a custom property,
   never as an inline `transform`. That matters: the entrance transition owns
   `transform` until the stagger finishes, and a second writer would fight it.
   The field only switches on with .settled, which JS adds after the entrance.

   The transform transition is dropped here on purpose. Smoothing happens once,
   in the rAF lerp; layering a CSS transition on top of it just adds lag.

   The warm tint is --kicker, the pink already measured off blueberry-studio.com,
   not the gold --accent. */
@media (hover: hover) and (pointer: fine) {
  .kin.settled {
    /* The bulge stays under the cursor. Letters left flat at z:0 are untouched
       by perspective-origin, so only the lifted ones respond. */
    perspective-origin: var(--fx, 50%) var(--fy, 50%);
  }
  .kin.settled .ch {
    transition: color .5s var(--ease);
    transform:
      translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), calc(var(--mz, 0) * 1px))
      rotateY(calc(var(--ry, 0) * 1deg))
      rotateX(calc(var(--rx, 0) * 1deg))
      scale(calc(1 + var(--ms, 0)));
    color: color-mix(in oklab, var(--kicker) calc(var(--mg, 0) * 100%), var(--fg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kin .ch { opacity: 1; transform: none; transition: none; }
}
.hero__title .line { display: block; white-space: nowrap; transform-style: preserve-3d; }
.hero__title .indent { padding-left: clamp(0px, 15vw, 220px); }

.hero__foot {
  margin-top: clamp(28px, 3.6vw, 50px);
  display: grid;
  grid-template-columns: minmax(0, 44ch) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
.hero__blurb { max-width: 46ch; font-size: clamp(1rem, 1.34vw, 1.26rem); line-height: 1.5; }

/* ---------- Hero deck — the recent-work cards ---------- */
.hero__strip { perspective: 1500px; perspective-origin: 30% 45%; }

/* A fanned deck, not a row of loose thumbnails: one composed object, so it
   stops competing with the work grid directly below it. */
.hero__deck {
  display: flex; align-items: flex-end;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
  will-change: transform;
  padding-bottom: 4px;
}

/* Spotlight deck: every card keeps its cover, one card at a time steps forward
   in full colour while the rest sit back, dimmed and desaturated. No flipping,
   so a card never turns into an empty panel. */
.dcard {
  display: block; position: relative; overflow: hidden; border-radius: 8px;
  width: clamp(84px, 9.6vw, 152px); aspect-ratio: 3/4;
  opacity: 0; animation: floatIn 1.1s var(--ease) forwards;
  animation-delay: calc(.55s + var(--i) * .08s);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
  will-change: transform;
  z-index: 1; background: var(--bg-card);
}
/* floatIn fills `transform` for the element's life and would pin the card; JS
   adds .is-in once the entrance ends, handing transform back to these rules. */
.dcard.is-in { animation: none; opacity: 1; }
.dcard + .dcard { margin-left: clamp(-34px, -3vw, -18px); }
.dcard:nth-child(1) { transform: rotate(-2.4deg); }
.dcard:nth-child(2) { transform: rotate(-1.1deg); }
.dcard:nth-child(3) { transform: rotate(.2deg); }
.dcard:nth-child(4) { transform: rotate(1.5deg); }
.dcard:nth-child(5) { transform: rotate(2.8deg); }

.dcard img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.45) brightness(.62);
  transition: filter .6s var(--ease), transform 1.2s var(--ease);
}
.dcard::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,8,10,0) 45%, rgba(8,8,10,.55) 100%);
  opacity: .9; transition: opacity .6s var(--ease);
}
.dcard__n {
  position: absolute; left: 10px; top: 9px; z-index: 2;
  font-size: 10px; color: var(--fg); opacity: 0;
  transition: opacity .45s var(--ease);
}

/* the live card: forward, straight, full colour */
.dcard:hover, .dcard:focus-visible, .dcard.is-active {
  transform: translateY(-16px) rotate(0deg) scale(1.06);
  z-index: 5;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.dcard:hover img, .dcard:focus-visible img, .dcard.is-active img {
  filter: saturate(1) brightness(1); transform: scale(1.03);
}
.dcard:hover::after, .dcard:focus-visible::after, .dcard.is-active::after { opacity: .35; }
.dcard:hover .dcard__n, .dcard:focus-visible .dcard__n, .dcard.is-active .dcard__n { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dcard, .dcard img { transition: none; }
  .dcard:hover, .dcard.is-active { transform: rotate(0deg); }
}

.hero__deck-cap { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; min-height: 1em; }
.hero__deck-cap .label { transition: opacity .3s var(--ease); }
.hero__deck-cap.is-swapping .label { opacity: 0; }

.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue span {
  width: 1px; height: 38px; position: relative; overflow: hidden;
  background: linear-gradient(var(--fg), transparent);
}
.scroll-cue span::after {
  content: ''; position: absolute; top: -100%; left: 0; width: 1px; height: 100%;
  background: var(--accent); animation: cue 1.9s var(--ease-io) infinite;
}

@keyframes floatIn { from { opacity: 0; transform: translateY(28px) } to { opacity: 1 } }
@keyframes cue { to { top: 100% } }

@media (max-width: 1000px) { .hero__deck { justify-content: flex-start; } }
@media (max-width: 560px)  { .dcard:nth-child(5) { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dcard, .dcard:hover, .dcard.is-active { transform: none; }
  .dcard + .dcard { margin-left: 10px; }
  .scroll-cue span::after { animation: none; }
}

/* ---------- Marquee ---------- */
.marquee { border-block: 1px solid var(--line); padding-block: 22px; overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 0; animation: slide 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > span {
  display: inline-flex; align-items: center; gap: clamp(24px, 4vw, 54px);
  padding-right: clamp(24px, 4vw, 54px);
  font-size: clamp(1.3rem, 3vw, 2.4rem); letter-spacing: -.035em; font-weight: 500;
}
.marquee__track i { font-style: normal; color: var(--muted); }

@keyframes slide { to { transform: translateX(-50%) } }

/* ---------- Section head ---------- */
.sect-head { padding-bottom: clamp(30px, 4vw, 56px); }
.sect-head__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sect-head__meta { flex-shrink: 0; }


/* ---------- Work grid (Blueberry-style: uniform 2-up, square crops) ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.work-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { display: block; }
.card__media {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--bg-card);
  margin-bottom: clamp(10px, 1vw, 16px);
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: saturate(.92);
}
.card:hover .card__media img { transform: scale(1.04); filter: saturate(1.04); }

.card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__title {
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 400; letter-spacing: -.02em; line-height: 1.1;
  color: var(--fg);
}
.card__year {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; color: var(--muted); flex-shrink: 0;
}
.card__tags {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .04em; color: var(--muted);
}

@media (max-width: 1000px) {
  .work-grid, .work-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 660px) {
  .work-grid, .work-grid--3 { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.about-grid__l { grid-column: 1 / 6; position: sticky; top: 110px; }
.about-grid__r { grid-column: 1 / 13; }
@media (max-width: 900px) { .about-grid__l, .about-grid__r { grid-column: 1 / -1; position: static; } }

.portrait {
  position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 4/5;
  background: var(--bg-card); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.portrait__fallback {
  position: absolute; z-index: 0;
  font-size: clamp(4rem, 9vw, 7rem); letter-spacing: -.06em; font-weight: 500; line-height: 1;
  color: var(--fg);
}
.portrait img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}
.portrait__tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  background: rgba(8,8,10,.6); backdrop-filter: blur(10px);
  padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line);
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); margin-top: clamp(40px, 6vw, 76px); }
.stat { background: var(--bg); padding: clamp(20px, 2.6vw, 34px) clamp(14px, 1.6vw, 22px); }
.stat__v { font-size: clamp(1.9rem, 3.6vw, 3.2rem); letter-spacing: -.045em; font-weight: 500; line-height: 1; }
.stat__l { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.35; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Services ---------- */
.svc { border-top: 1px solid var(--line); }
.svc__row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(14px, 2.4vw, 38px);
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease);
}
.svc__row:hover { padding-left: clamp(6px, 1.4vw, 20px); }
.svc__n { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; padding-top: 6px; }
.svc__t { font-size: clamp(1.25rem, 2.3vw, 1.95rem); letter-spacing: -.032em; line-height: 1.1; font-weight: 500; }
.svc__d { color: var(--fg-dim); font-size: 15px; line-height: 1.6; max-width: 48ch; }
@media (max-width: 820px) {
  .svc__row { grid-template-columns: 40px 1fr; }
  .svc__d { grid-column: 2; }
}

/* ---------- Capabilities ---------- */
.cap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.cap__head { position: sticky; top: 110px; }

.cap__body { min-width: 0; }

.pills { display: flex; flex-wrap: wrap; gap: clamp(9px, 1vw, 14px); }
.pill {
  border: 1px solid var(--line); border-radius: 100px;
  padding: 11px 20px; font-size: clamp(13px, 1.05vw, 15.5px);
  letter-spacing: -.012em; color: var(--fg); line-height: 1.2;
  transition: border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.pill:hover { border-color: rgba(244,242,238,.32); background: rgba(244,242,238,.04); transform: translateY(-2px); }

.cap__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(34px, 4.4vw, 56px);
  padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
}
.cap__k { margin-bottom: 12px; }
.cap__v { font-size: 15.5px; line-height: 1.62; color: var(--fg); }

@media (max-width: 900px) {
  .cap { grid-template-columns: 1fr; gap: 30px; }
  .cap__head { position: static; }
  .cap__facts { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- About ---------- */
.about-quote {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.22;
  letter-spacing: -.02em; color: var(--fg); margin-top: 16px;
}

/* ---------- Experience ---------- */
.exp__row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  gap: 12px clamp(16px, 3vw, 40px); align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--line);
}
.exp__role { font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -.025em; font-weight: 500; }
.exp__org { color: var(--fg-dim); font-size: 15px; }
.exp__org b { font-weight: 500; color: var(--fg); }
.exp__when { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .06em; white-space: nowrap; }
@media (max-width: 700px) {
  .exp__row { grid-template-columns: 1fr; gap: 6px; }
  .exp__when { grid-row: 1; }
}

/* ---------- Contact ---------- */
.contact { padding-block: var(--sect); }
.big-link {
  display: block; font-size: clamp(1.3rem, 5.6vw, 4.6rem); line-height: 1.05;
  letter-spacing: -.04em; font-weight: 500;
  white-space: nowrap;               /* never orphan ".com" onto its own line */
  position: relative; overflow: hidden;
}
.big-link span { display: block; transition: transform .7s var(--ease); }
.big-link span:last-child { position: absolute; inset: 0; color: var(--accent); transform: translateY(102%); }
.big-link:hover span:first-child { transform: translateY(-102%); }
.big-link:hover span:last-child { transform: none; }

.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.social {
  background: var(--bg); padding: clamp(20px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 8px;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.social:hover { background: var(--fg); color: var(--bg); }
.social:hover .social__h { color: rgba(8,8,10,.6); }
.social__l { font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: -.02em; font-weight: 500; }
.social__h { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: .05em; transition: color .45s; }
@media (max-width: 760px) { .social-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Method — matched to blueberry-studio.com @1600px ---------- */
/* One section kicker everywhere: pink mono caps, no number, no rule —
   matched to blueberry-studio.com, where the kickers read "The Core",
   "Selected Work", "What we do", "Method". */
.kicker {
  display: block;
  font-family: var(--font-mono); font-size: 15px; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--kicker); margin: 0 0 18px;
}

/* 67px below the heading @1600, measured on blueberry-studio.com. The heading
   lost its own margin when all section headings were unified onto .h-sec. */
.steps {
  list-style: none; margin: clamp(34px, 4.2vw, 67px) 0 0; padding: 0;
  display: flex; align-items: flex-start;
}
.step {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative;
}
/* the connector line, drawn behind the dots */
.step__track {
  position: relative; width: 100%;
  height: clamp(44px, 4.4vw, 56px);
  display: flex; align-items: center; justify-content: center;
}
.step__track::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: rgba(255,255,255,.22);
}
.step:first-child .step__track::before { left: 50%; }
.step:last-child  .step__track::before { right: 50%; }

.step__dot {
  position: relative; z-index: 1;
  width: clamp(44px, 4.4vw, 56px); height: clamp(44px, 4.4vw, 56px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  background: #000; border: 1px solid rgba(255,255,255,.22);
  color: rgba(240,239,237,.45);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.step.is-active .step__dot,
.step:hover .step__dot,
.step:focus-within .step__dot {
  background: var(--fg); border-color: var(--fg); color: #0a0a0a;
}
/* 01 is only the resting state. As soon as the pointer is anywhere in the
   row, the highlight follows it and the default steps back. */
.steps:hover .step.is-active:not(:hover) .step__dot {
  background: #000; border-color: rgba(255,255,255,.22); color: rgba(240,239,237,.45);
}

.step__t {
  font-size: clamp(1.5rem, 3vw, 3rem);      /* 48px @1600 */
  font-weight: 500; letter-spacing: -.02em; line-height: 1.05;
  margin: clamp(18px, 2vw, 30px) 0 0;
}
.step__d {
  font-size: 14px; line-height: 1.7; color: rgba(240,239,237,.5);
  margin: clamp(10px, 1.2vw, 16px) 0 0; max-width: 26ch;
}

@media (max-width: 900px) {
  .steps { flex-wrap: wrap; gap: 36px 0; }
  .step { flex: 1 1 44%; }
  .step__track::before { display: none; }
}
@media (max-width: 520px) {
  .step { flex: 1 1 100%; }
}

/* ---------- Let's talk ---------- */
.talk { margin-bottom: clamp(32px, 5vw, 56px); }
.h-sec.talk { margin-top: 0; }
.talk-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
@media (max-width: 900px) { .talk-grid { grid-template-columns: 1fr; gap: 40px; } }

.talk-form { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
.field { display: block; border: 0; padding: 0; margin: 0; }
.field > .label, .field > legend { display: block; margin-bottom: 10px; padding: 0; }
.field input[type=text], .field input[type=email], .field textarea {
  width: 100%; background: none; color: var(--fg);
  border: 0; border-bottom: 1px solid #1e1e1e;
  padding: 14px 0; font: inherit; font-size: 19px; letter-spacing: -.015em;
  outline: none; border-radius: 0;
  transition: border-color .35s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #4d4d55; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.field textarea { resize: vertical; min-height: 96px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { width: 100%; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check span {
  display: inline-block; border: 1px solid var(--line); border-radius: 100px;
  padding: 10px 18px; font-size: 14px; cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.chip-check input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.talk-send { align-self: flex-start; cursor: pointer; }
/* Send is solid --kicker pink, matching the Portfolio button in the nav: the
   two actions that matter share one colour. Dark text on pink is 13.2:1. */
.btn.talk-send { background: var(--kicker); border-color: var(--kicker); color: #0c0c0c; font-weight: 500; }
.btn.talk-send::before { background: #ffd9ff; }
.btn.talk-send:hover { color: #0c0c0c; border-color: #ffd9ff; }
.btn.talk-send:focus-visible { outline: 2px solid var(--kicker); outline-offset: 3px; }
.btn.talk-send:disabled { opacity: .6; cursor: progress; }
.talk-status { min-height: 1.2em; margin: 0; }
.talk-status[data-state="ok"]   { color: #8ee7a0; }
.talk-status[data-state="err"]  { color: #ff8080; }

.talk-side { display: flex; flex-direction: column; gap: clamp(22px, 2.8vw, 32px); }
/* Arabic logotype in the empty corner under the links, pinned to the bottom.
   The aside stretches to the form's height so margin-top:auto has room to push. */
.talk-grid > .talk-side { align-self: stretch; }
.talk-logo { margin-top: auto; align-self: flex-end; width: clamp(150px, 15vw, 230px); height: auto; opacity: .92; padding-top: 28px; }
@media (max-width: 900px) { .talk-logo { align-self: flex-start; } }
.talk-meta .label { display: block; margin-bottom: 8px; }
.talk-mail {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); letter-spacing: -.025em; color: var(--fg);
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: border-color .35s var(--ease);
}
.talk-mail:hover { border-bottom-color: var(--accent); }
.talk-v { font-size: 15.5px; color: var(--fg); margin: 0; }
/* Columns follow the number of links (set as --n in render.js, max 3). A fixed
   3 left an empty grey cell when only Instagram and LinkedIn were listed. */
.talk-side .social-grid { grid-template-columns: repeat(var(--n, 3), 1fr); }
@media (max-width: 520px) { .talk-side .social-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { padding-block: 40px 34px; border-top: 1px solid var(--line); }
.footer__in { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; transition: opacity .3s; }
.to-top:hover { opacity: .6; }
.foot-wa { display: inline-flex; align-items: center; min-height: 44px; transition: color .3s var(--ease); }
.foot-wa:hover { color: var(--kicker); }

/* ---------- Project page ---------- */
.p-hero { padding-block: clamp(130px, 17vh, 210px) clamp(36px, 5vw, 60px); }
.p-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-bottom: clamp(20px, 3vw, 34px); }
.chip {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; color: var(--fg-dim);
}
.p-cover { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 16/9; background: var(--bg-card); }
.p-cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .p-cover { aspect-ratio: 4/3; } }

.back-link { display: inline-block; margin-bottom: clamp(24px, 4vw, 44px); }

.p-meta { padding-block: clamp(56px, 8vw, 110px) clamp(40px, 6vw, 80px); }
.p-meta__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px) clamp(40px, 6vw, 120px);
}
.p-meta__grid .span-2 { grid-column: span 2; }
.p-meta__k { margin-bottom: 12px; }
.p-meta__v { font-size: 17px; line-height: 1.65; color: var(--fg); }
.p-meta__story { font-size: 18px; line-height: 1.7; color: var(--fg-dim); max-width: 70ch; }
@media (max-width: 760px) {
  .p-meta__grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 36px); }
  .p-meta__grid .span-2 { grid-column: auto; }
}

.p-gallery { padding-bottom: clamp(60px, 9vw, 130px); }

.pull {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.24; letter-spacing: -.02em;
  padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--accent);
  color: var(--fg); max-width: 34ch;
}

.more-work { border-top: 1px solid var(--line); }

/* ---------- Events ---------- */
/* Film on the left, words on the right. text-wrap: pretty stops a paragraph
   ending on a single orphan word, which is what "taste." was doing. */
.ev--withfilm { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
@media (max-width: 900px) { .ev--withfilm { grid-template-columns: 1fr; } }
.ev__player { position: sticky; top: 96px; }
@media (max-width: 900px) { .ev__player { position: static; } }
.yt {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  position: relative; overflow: hidden; border-radius: 8px;
  aspect-ratio: 16 / 9; background: var(--bg-card);
}
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.yt:hover img { transform: scale(1.03); opacity: .85; }
.yt__play {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px;
  border-radius: 50%; background: rgba(12,12,12,.6); border: 1px solid rgba(240,239,237,.55);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.yt__play::after { content: ''; position: absolute; left: 24px; top: 18px; border-left: 19px solid var(--fg); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.yt:hover .yt__play { background: var(--kicker); border-color: var(--kicker); }
.yt:hover .yt__play::after { border-left-color: #0c0c0c; }
.yt__cap { display: block; margin-top: 12px; color: var(--fg-dim); }
/* Place lines: small and white, so they read as a quiet caption under the title
   rather than competing with it. The pin sits on the first line when the text
   wraps, which is why this aligns to the top and not the centre. */
.place { display: inline-flex; align-items: flex-start; gap: 5px; color: var(--fg); font-size: 10px; letter-spacing: .12em; }
.place .pin { flex-shrink: 0; width: 11px; height: 11px; margin-top: 1px; opacity: .8; }
.ev__player .place { margin-top: 6px; }
.yt iframe, .ev__player iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; display: block; }
.ev__text p { text-wrap: pretty; }

.ev__text { max-width: 70ch; }
.ev__places { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(22px, 2.6vw, 34px) 0 0; padding: 0; }
.ev__places .pill { white-space: nowrap; }
.ev__awards { margin-top: clamp(34px, 4vw, 56px); }
.ev__awards-h { display: block; margin-bottom: 18px; }
/* Two grouped columns instead of twelve full-width rows: half the height, and
   the split says what each line is without repeating the word. */
.ev__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(26px, 3vw, 54px); }
.ev__grp-h {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
  color: var(--fg); font-weight: 400;
}
.ev__grp-h i { font-style: normal; color: var(--muted); }
.ev__list { list-style: none; margin: 0; padding: 0; }
.ev__row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.ev__yr { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); padding-top: 3px; }
.ev__body { display: block; min-width: 0; }
.ev__nm { display: block; font-size: 16px; line-height: 1.35; letter-spacing: -.012em; color: var(--fg); }
.ev__meta { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }

/* Films: covers lifted from the reels, each card opens the post on Instagram.
   Portrait 4:5 keeps the vertical reels intact and the one landscape clip fills. */
.ev__films { margin-top: clamp(32px, 3.8vw, 54px); }
.ev__filmrow {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(12px, 1.4vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.film { display: block; }
.film__shot {
  /* Every card the same shape and filled edge to edge. The covers themselves
     have had their letterbox bars trimmed, so nothing shows black strips. */
  position: relative; display: block; overflow: hidden; border-radius: 8px;
  background: var(--bg-card); aspect-ratio: 4 / 5;
}
.film__shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.film:hover .film__shot img { transform: scale(1.04); opacity: .85; }
.film__play {
  position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50%; background: rgba(12,12,12,.55); backdrop-filter: blur(2px);
  border: 1px solid rgba(240,239,237,.5);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.film__play::after {
  content: ''; position: absolute; left: 16px; top: 12px;
  border-left: 13px solid var(--fg); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.film:hover .film__play { background: var(--kicker); border-color: var(--kicker); }
.film:hover .film__play::after { border-left-color: #0c0c0c; }
.film__t { display: block; margin-top: 12px; font-size: 15px; letter-spacing: -.012em; color: var(--fg); }
.film__m { display: flex; margin-top: 6px; color: var(--fg); }

.ev__strip {
  display: grid; gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(30px, 3.6vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ev__shot { margin: 0; }
.ev__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 8px; background: var(--bg-card); }
.ev__shot figcaption { display: block; margin-top: 10px; color: var(--muted); }

/* ---------- Case-study blocks ---------- */
.blocks { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 64px); }

.blk--text { max-width: 68ch; margin-inline: auto; width: 100%; }
.blk__h {
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 300;
  letter-spacing: -.03em; line-height: 1.12; margin: 0 0 .5em;
}
.blk__p { font-size: 18px; line-height: 1.7; color: var(--fg-dim); margin: 0 0 1em; }
.blk__p:last-child { margin-bottom: 0; }

.blk--image { margin: 0; }
.blk--image img, .blk--image video {
  width: 100%; height: auto; display: block; border-radius: 8px; background: var(--bg-card);
}
.blk--image.is-narrow { max-width: 780px; margin-inline: auto; }
.blk--image.is-wide { width: 100vw; margin-inline: calc(50% - 50vw); }
.blk--image.is-wide img, .blk--image.is-wide video { border-radius: 0; }
.blk__cap { display: block; margin-top: 12px; color: var(--muted); }

.blk--grid {
  display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.blk--grid figure { margin: 0; }
.blk--grid { align-items: start; }
.blk--grid img, .blk--grid video {
  /* Whole image, never cropped. Grids used to force a 4:3 crop, which cut the
     sides off 16:9 slides like brand guideline pages. */
  width: 100%; height: auto; display: block;
  border-radius: 8px; background: var(--bg-card);
}
@media (max-width: 760px) { .blk--grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px) { .blk--grid { grid-template-columns: 1fr; } }

/* Full bleed. Every case-study image and grid runs edge to edge of the window,
   whatever width the block was given in /admin. */
.p-gallery { container-type: inline-size; }
.blk--image, .blk--image.is-narrow, .blk--image.is-wide, .blk--grid {
  /* cqw, not vw. The gallery section is the container and its width already
     excludes the desktop scrollbar; 100vw included it and pushed every image
     7.5px off the left edge. Pure CSS, so there is no load timing to get wrong. */
  width: 100cqw; max-width: none;
  margin-inline: calc(50% - 50cqw);
}
.blk--image img, .blk--image video,
.blk--grid img, .blk--grid video { border-radius: 0; }
.blk--image .blk__cap { padding-inline: var(--gut); }

.blk--quote { max-width: 34ch; margin-inline: auto; }
.blk__cite { display: block; margin-top: 14px; font-style: normal; color: var(--muted); }

.blk--spacer { height: var(--h, 60px); }
@media (max-width: 760px) { .gallery figure.half { grid-column: span 12; } }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 9500; background: rgba(6,6,8,.94);
  backdrop-filter: blur(8px); display: grid; place-items: center; padding: 5vh 4vw;
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
}
.lb.on { opacity: 1; pointer-events: auto; }
.lb img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 3px; }
.lb__close { position: absolute; top: 22px; right: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; }
.lb__nav { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; align-items: center; }
.lb__nav button { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; cursor: pointer; opacity: .7; }
.lb__nav button:hover { opacity: 1; }

/* ---------- Utilities ---------- */
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrap-g { flex-wrap: wrap; gap: 14px 26px; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: clamp(22px, 3vw, 38px); } .mt-l { margin-top: clamp(40px, 6vw, 80px); }
.mb-m { margin-bottom: clamp(22px, 3vw, 38px); }
.dim { color: var(--muted); }
.acc { color: var(--accent); }
.max-60 { max-width: 60ch; } .max-50 { max-width: 50ch; } .max-44 { max-width: 44ch; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 100px;
  padding: 13px 24px; font-size: 14px; letter-spacing: -.01em;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fg);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover { color: var(--bg); border-color: var(--fg); }
.btn:hover::before { transform: none; }

@media (max-width: 880px) {
  .hero__foot { grid-template-columns: 1fr; }
  .hero__title .indent { padding-left: 0; }
}


/* ---------- WhatsApp chat ----------
   A round button in the corner opens a small card with one action. Nothing
   pops up on its own. Dark card in the site palette; the button is the only
   off-white element, so it reads as the thing to press. */
.wa {
  position: fixed; z-index: 850;
  right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.wa__fab {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--fg); color: #0c0c0c;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.wa__fab svg { width: 28px; height: 28px; }
.wa__fab:hover { transform: translateY(-2px); background: #fff; }
.wa__fab:focus-visible, .wa__close:focus-visible, .wa__go:focus-visible { outline: 2px solid var(--kicker); outline-offset: 3px; }

.wa__card {
  width: min(330px, calc(100vw - 36px));
  background: #141418; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden;
  transform-origin: bottom right;
  animation: waIn .32s var(--ease);
}
.wa__card[hidden] { display: none; }
@keyframes waIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.wa__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 12px 16px 18px; background: #1c1c21; border-bottom: 1px solid var(--line);
}
.wa__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex-shrink: 0; background: var(--bg-card); }
.wa__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.wa__who strong { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--fg); }
.wa__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-dim); }
.wa__status i { width: 7px; height: 7px; border-radius: 50%; background: #25d366; flex-shrink: 0; }
.wa__close {
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  color: var(--fg-dim); font-size: 24px; line-height: 1; border-radius: 50%;
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.wa__close:hover { color: var(--fg); background: rgba(240,239,237,.06); }

.wa__body { padding: 20px 18px 18px; }
.wa__body p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--fg-dim); }
.wa__go {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; border-radius: 999px;
  background: var(--fg); color: #0c0c0c; font-size: 15px; font-weight: 500;
  transition: background-color .3s var(--ease);
}
.wa__go:hover { background: #fff; }

/* Keep the footer's last line clear of the round button. */
.footer { padding-bottom: 98px; }

@media (prefers-reduced-motion: reduce) {
  .wa__card { animation: none; }
  .wa__fab, .wa__fab:hover { transition: none; transform: none; }
}
@media print { .wa { display: none; } }