/* The legacy stylesheet (style.css, still linked for the client pages) paints
   EVERY <footer> dark, centred and padded. This page's closings are ordinary
   blocks, so neutralise that here: same specificity, later file, so every
   per-block rule further down still wins. */
footer {
  padding: 0;
  text-align: inherit;
  border-top: 0;
  background: none;
}

footer p { font-size: inherit; color: inherit; letter-spacing: inherit; }

:root {
  --void: #0a0b0d;
  --shadow: #26282c;
  --paper: #edeff2;
  --muted: #7a8089;
  --edge: rgba(237, 239, 242, .08);
  --home-bg: #0b0b0c;
  --home-paper: #f2efe8;
  --home-muted: #9b9994;
  --home-line-soft: rgba(242, 239, 232, 0.07);
  --home-warm: #c8d8dc;
  --light-cool: 172, 210, 220;
  --light-copper: 181, 88, 37;
  --light-wine: 132, 26, 48;
  --home-mono: 'IBM Plex Mono', monospace;
  --home-sans: 'DM Sans', system-ui, sans-serif;
}

.portfolio-home {
  background: var(--home-bg);
  color: var(--home-paper);
  cursor: auto;
  font-family: var(--home-sans);
  overflow-x: hidden;
}

/* This used to come only from the legacy style.css. Owning it here is
   one less thing blocking that stylesheet's removal. */
.portfolio-home a { color: inherit; text-decoration: none; }

.portfolio-home a,
.portfolio-home button { cursor: pointer; }
.portfolio-home ::selection { background: var(--home-paper); color: var(--home-bg); }
.portfolio-home main {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.portfolio-home main::before {
  position: fixed;
  z-index: 0;
  inset: -18%;
  background:
    radial-gradient(ellipse 38% 28% at 16% 24%, rgba(var(--light-cool), .045), transparent 72%),
    radial-gradient(ellipse 30% 24% at 86% 18%, rgba(var(--light-copper), .025), transparent 74%),
    radial-gradient(ellipse 34% 22% at 72% 82%, rgba(var(--light-wine), .018), transparent 76%);
  content: '';
  filter: blur(28px);
  opacity: .5;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1.03);
  animation: portfolioAmbientField 26s ease-in-out infinite alternate;
}

.portfolio-home main > section { z-index: 1; }

.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--home-bg);
  pointer-events: none;
  transform: translateY(0);
  transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1);
}

.portfolio-home.is-ready .page-curtain { transform: translateY(-100%); }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%;
  height: 2px;
  background: var(--home-warm);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.portfolio-home section {
  position: relative;
  margin: 0 auto;
}

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

.site-nav.is-scrolled {
  background: rgba(11, 11, 12, .72);
  border-color: var(--home-line-soft);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* the fixed chrome follows the surface it is sitting on — see updateNav() */
.site-nav.is-on-light {
  background: rgba(242, 239, 232, .86);
  border-color: rgba(23, 47, 75, .14);
}

.site-nav.is-on-light .site-brand { color: #172f4b; }
.site-nav.is-on-light .site-links a { color: rgba(23, 47, 75, .66); }
.site-nav.is-on-light .site-links a:hover,
.site-nav.is-on-light .site-links a:focus-visible { color: #172f4b; }
.site-nav.is-on-light .site-links a::after { background: #172f4b; }
.site-nav.is-on-light .menu-toggle span { background: #172f4b; }
.scroll-progress.is-on-light { background: rgba(23, 47, 75, .75); }

.site-brand,
.site-links a {
  font-family: var(--home-mono);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

.site-brand {
  color: var(--home-paper);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.site-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 3.5rem);
}

.site-links a {
  position: relative;
  color: var(--home-muted);
  font-size: 0.64rem;
  transition: color 0.25s ease;
}

.site-links a::after {
  position: absolute;
  right: 0;
  bottom: -0.6rem;
  left: 0;
  height: 1px;
  background: var(--home-warm);
  content: '';
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.site-links a:hover,
.site-links a:focus-visible { color: var(--home-paper); }
.site-links a:hover::after,
.site-links a:focus-visible::after { transform: scaleX(1); }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes portfolioAmbientField {
  0% { opacity: .58; transform: translate3d(-2%, -1%, 0) scale(1.01) rotate(-1deg); }
  50% { opacity: .78; transform: translate3d(2%, 2%, 0) scale(1.055) rotate(.6deg); }
  100% { opacity: .66; transform: translate3d(4%, -2%, 0) scale(1.025) rotate(1.2deg); }
}

@media (max-width: 560px) {
  .site-nav { height: 66px; }
  .site-brand { font-size: 0.67rem; }
  .site-links a { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-home *,
  .portfolio-home *::before,
  .portfolio-home *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .page-curtain { display: none; }
  .portfolio-home main::before { animation: none !important; }
}

/* ================================================================
   THE EVIDENCE ASSEMBLY OPENING
   ================================================================ */

.portfolio-home.intro-active { overflow: hidden; }
.portfolio-home.intro-active .site-nav { opacity: 0; pointer-events: none; }

.cinematic-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 36%, rgba(189, 218, 228, .045), transparent 27%),
    radial-gradient(circle at 78% 44%, rgba(133, 164, 176, .028), transparent 26%),
    #020304;
  color: #edf2f3;
  isolation: isolate;
  opacity: 1;
  transition: opacity 502ms cubic-bezier(0.72, 0, 0.18, 1), visibility 502ms;
}

.cinematic-intro::after {
  position: absolute;
  z-index: 0;
  inset: -24%;
  background:
    radial-gradient(ellipse 34% 25% at 20% 72%, rgba(var(--light-cool), .075), transparent 74%),
    radial-gradient(ellipse 28% 22% at 82% 26%, rgba(var(--light-copper), .04), transparent 76%);
  content: '';
  filter: blur(34px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-2%, 0, 0) scale(1.02);
}

.cinematic-intro::before {
  position: absolute;
  z-index: 1;
  top: -24vh;
  left: 50%;
  width: min(78vw, 1180px);
  height: 92vh;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.15) 0%, rgba(255,255,255,.045) 34%, transparent 72%);
  clip-path: polygon(38% 0, 62% 0, 86% 100%, 14% 100%);
  content: '';
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scaleX(.72);
  transform-origin: center top;
}

.cinematic-intro.is-playing::before { animation: overheadLight 10.1655s cubic-bezier(.22,.72,.2,1) both; }
.cinematic-intro.is-playing::after { animation: introAmbientField 8.748s 97ms ease-in-out both; }
.cinematic-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.cinematic-intro[hidden] { display: none !important; }

.cinematic-intro__grain {
  position: absolute;
  inset: -20%;
  z-index: 20;
  background-image:
    repeating-radial-gradient(circle at 22% 31%, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 77% 68%, rgba(255,255,255,.014) 0 1px, transparent 1px 5px);
  background-size: 7px 9px, 11px 13px;
  mix-blend-mode: screen;
  opacity: .35;
  pointer-events: none;
  animation: introGrain 498ms steps(2, end) infinite;
}

.cinematic-intro__meta {
  position: absolute;
  z-index: 30;
  right: clamp(1.25rem, 3vw, 3.6rem);
  left: clamp(1.25rem, 3vw, 3.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, .46);
  font-family: var(--home-mono);
  font-size: clamp(.52rem, .7vw, .68rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
}

.cinematic-intro__meta--top { top: clamp(1.4rem, 4vh, 2.5rem); }

.cinematic-intro__skip {
  padding: .65rem 1rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .62);
  font: inherit;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color 0.2025s ease, border-color 0.2025s ease, background 0.2025s ease;
}

.cinematic-intro__skip:hover,
.cinematic-intro__skip:focus-visible {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  outline: none;
}

.cinematic-intro.is-playing .cinematic-intro__meta {
  animation: introMeta 567ms 146ms cubic-bezier(.2,.72,.2,1) both;
}

.assembly-axis {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(88vw, 1240px);
  height: 1px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.assembly-axis::before,
.assembly-axis span {
  position: absolute;
  inset: 0;
  content: '';
  transform: scaleX(0);
  transform-origin: center;
}

.assembly-axis::before {
  background: linear-gradient(90deg, transparent, rgba(237,242,243,.1) 18%, rgba(237,242,243,.1) 82%, transparent);
}

.assembly-axis span {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92) 50%, transparent);
  box-shadow: 0 0 8px rgba(255,255,255,.58), 0 0 30px rgba(255,255,255,.16);
}

.cinematic-intro.is-playing .assembly-axis {
  animation: assemblyAxisWake 729ms 97ms ease both;
}

.cinematic-intro.is-playing .assembly-axis::before {
  animation: assemblyAxisOpen 745ms 97ms cubic-bezier(.16,.78,.18,1) both;
}

.cinematic-intro.is-playing .assembly-axis span {
  animation: assemblyAxisScan 972ms 194ms cubic-bezier(.16,.78,.18,1) both;
}

.evidence-assembly {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

.assembly-scene {
  position: absolute;
  top: 49%;
  left: 50%;
  width: min(94vw, 1260px);
  padding-inline: clamp(1rem, 4vw, 3.5rem);
  color: #edf2f3;
  text-align: center;
  opacity: 0;
  filter: blur(8px);
  transform: translate(-50%, -50%) scale(.96);
  transform-origin: center;
  will-change: opacity, filter, transform;
  transition: opacity 292ms ease, filter 356ms ease, transform 356ms cubic-bezier(.2,.72,.2,1);
}

.assembly-scene::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(84vw, 1040px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.76) 48%, rgba(255,255,255,.76) 52%, transparent);
  box-shadow: 0 0 10px rgba(255,255,255,.32);
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scaleX(.04);
}

.assembly-scene.is-active {
  z-index: 8;
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}

.assembly-scene.is-past {
  z-index: 1;
  opacity: 0;
  filter: blur(12px);
  transform: translate(-50%, calc(-50% - 58px)) scale(.92);
}

.assembly-scene.is-condensing {
  opacity: 0;
  filter: blur(10px);
  transform: translate(-50%, calc(-50% + 20vh)) scale(.18, .035);
  transition-duration: 292ms;
}

.assembly-scene.is-condensing::after { animation: sceneTrailCollapse 292ms cubic-bezier(.16,.78,.18,1) both; }

/* Each beat has its own stage direction, so the sequence never repeats one entrance. */
.assembly-scene--brands { --trail-angle: -8deg; transform-origin: 20% 50%; }
.assembly-scene--industries { --trail-angle: 90deg; transform-origin: 50% 100%; }
.assembly-scene--markets { --trail-angle: -24deg; transform-origin: 50% 50%; }
.assembly-scene--direction { --trail-angle: 0deg; transform-origin: 50% 50%; }

.assembly-scene--brands.is-future { transform: perspective(1100px) translate(-66%, -50%) rotateY(28deg) rotateZ(-3deg) scale(.8); }
.assembly-scene--industries.is-future { transform: perspective(900px) translate(-50%, -76%) rotateX(-64deg) scaleY(.72); }
.assembly-scene--markets.is-future { clip-path: inset(0 49% 0 49%); transform: translate(-50%, -50%) scale(1.22); }
.assembly-scene--direction.is-future { clip-path: inset(46% 0 46% 0); transform: translate(-50%, -50%) skewX(-9deg) scaleX(1.14); }

.assembly-scene--brands.is-active { animation: sceneBrandsStage 664ms cubic-bezier(.12,.84,.18,1) both; }
.assembly-scene--industries.is-active { animation: sceneIndustriesStage 697ms cubic-bezier(.16,.78,.18,1) both; }
.assembly-scene--markets.is-active { animation: sceneMarketsStage 616ms cubic-bezier(.12,.84,.18,1) both; }
.assembly-scene--direction.is-active { animation: sceneDirectionStage 632ms cubic-bezier(.16,.78,.18,1) both; }

.assembly-scene--brands.is-active.is-condensing { animation: sceneBrandsExit 308ms cubic-bezier(.5,0,.7,.2) both; }
.assembly-scene--industries.is-active.is-condensing { animation: sceneIndustriesExit 308ms cubic-bezier(.5,0,.7,.2) both; }
.assembly-scene--markets.is-active.is-condensing { animation: sceneMarketsExit 308ms cubic-bezier(.5,0,.7,.2) both; }
.assembly-scene--direction.is-active.is-condensing { animation: sceneDirectionExit 308ms cubic-bezier(.5,0,.7,.2) both; }

.assembly-scene__sub {
  display: block;
  color: rgba(237,242,243,.64);
  font-family: var(--home-mono);
  font-size: clamp(.64rem, .8vw, .76rem);
  font-weight: 400;
  letter-spacing: .13em;
  line-height: 1.7;
  text-transform: uppercase;
  opacity: 0;
}

.assembly-scene__sub { max-width: 66ch; margin: clamp(1.15rem, 2.4vh, 1.8rem) auto 0; }

.assembly-scene--brands.is-active .assembly-scene__sub { animation: subFromRight 373ms 243ms cubic-bezier(.2,.72,.2,1) both; }
.assembly-scene--industries.is-active .assembly-scene__sub { animation: subTrackLock 421ms 259ms cubic-bezier(.2,.72,.2,1) both; }
.assembly-scene--markets.is-active .assembly-scene__sub { animation: subFromLeft 373ms 267ms cubic-bezier(.2,.72,.2,1) both; }
.assembly-scene--direction.is-active .assembly-scene__sub { animation: subFromTop 373ms 284ms cubic-bezier(.2,.72,.2,1) both; }

.assembly-scene__core {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(92px, 14vw, 178px);
}

.assembly-scene__core::before {
  position: absolute;
  z-index: 8;
  top: -18%;
  bottom: -18%;
  left: -16%;
  width: 14%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 45%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.1) 56%, transparent);
  content: '';
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-12deg);
}

.assembly-scene--brands.is-active .assembly-scene__core::before { animation: sceneLightPass 745ms 90ms cubic-bezier(.16,.78,.18,1) both; }

.assembly-scene--industries .assembly-scene__core::before {
  top: -72%;
  right: -8%;
  bottom: auto;
  left: -8%;
  width: auto;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.34) 50%, transparent);
  transform: skewY(-3deg);
}

.assembly-scene--industries.is-active .assembly-scene__core::before { animation: sceneLightDrop 664ms 25ms cubic-bezier(.16,.78,.18,1) both; }

.assembly-scene--markets .assembly-scene__core::before {
  top: 50%;
  bottom: auto;
  left: 50%;
  width: 2px;
  height: 190%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.62), transparent);
  transform: translate(-50%, -50%) scaleY(.05);
}

.assembly-scene--markets.is-active .assembly-scene__core::before { animation: sceneLightImpact 551ms 72ms cubic-bezier(.16,.78,.18,1) both; }

.assembly-scene--direction .assembly-scene__core::before { display: none; }

/* 01 — stacked brand experience locks into one sharp statement. */
.brands-lockup { gap: clamp(.8rem, 2vw, 2rem); }

.brands-number,
.brands-word {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .82;
}

.brands-number {
  font-size: clamp(4.2rem, 11vw, 10rem);
  opacity: 0;
  transform: translateX(-12vw) scale(1.32);
}

.brands-word {
  position: relative;
  font-size: clamp(3.2rem, 9.4vw, 8.8rem);
  opacity: 0;
  transform: translateX(9vw);
}

.brands-word::before,
.brands-word::after {
  position: absolute;
  inset: 0;
  content: attr(data-echo);
  color: transparent;
  -webkit-text-stroke: 1px rgba(237,242,243,.22);
  opacity: 0;
  pointer-events: none;
}

.assembly-scene--brands.is-active .brands-number { animation: brandsNumberLock 551ms cubic-bezier(.14,.82,.2,1) both; }
.assembly-scene--brands.is-active .brands-word { animation: brandsWordLock 583ms 57ms cubic-bezier(.14,.82,.2,1) both; }
.assembly-scene--brands.is-active .brands-word::before { animation: brandsEchoTop 502ms 25ms ease both; }
.assembly-scene--brands.is-active .brands-word::after { animation: brandsEchoBottom 502ms 65ms ease both; }

/* 02 — six independent tracks align into one field. */
.industries-lockup strong {
  position: relative;
  z-index: 2;
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(3.2rem, 8.7vw, 8rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .9;
  opacity: 0;
}

.industries-lines {
  position: absolute;
  inset: 6% 2%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(.5rem, 2vw, 2.5rem);
}

.industries-lines i {
  position: relative;
  display: block;
  border-right: 1px solid rgba(237,242,243,.12);
  border-left: 1px solid rgba(237,242,243,.12);
  opacity: 0;
  transform: scaleY(.08);
}

.industries-lines i::after {
  position: absolute;
  right: 0;
  bottom: 50%;
  left: 0;
  height: 1px;
  background: rgba(237,242,243,.4);
  content: '';
}

.assembly-scene--industries.is-active .industries-lockup strong { animation: industriesTitleIn 526ms 122ms cubic-bezier(.16,.78,.18,1) both; }
.assembly-scene--industries.is-active .industries-lines i { animation: industryTrackIn 437ms cubic-bezier(.2,.72,.2,1) both; }
.assembly-scene--industries.is-active .industries-lines i:nth-child(2) { animation-delay: 45ms; }
.assembly-scene--industries.is-active .industries-lines i:nth-child(3) { animation-delay: 90ms; }
.assembly-scene--industries.is-active .industries-lines i:nth-child(4) { animation-delay: 133ms; }
.assembly-scene--industries.is-active .industries-lines i:nth-child(5) { animation-delay: 178ms; }
.assembly-scene--industries.is-active .industries-lines i:nth-child(6) { animation-delay: 223ms; }
.assembly-scene--industries.is-active .industries-lines i:nth-child(7) { animation-delay: 267ms; }

/* 03 — two markets meet at a single point of direction. */
.markets-lockup { gap: clamp(1rem, 3.6vw, 4rem); }

.markets-side,
.markets-cross {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-weight: 900;
  line-height: .85;
  opacity: 0;
}

.markets-side { font-size: clamp(3.5rem, 9.4vw, 8.8rem); letter-spacing: -.065em; }
.markets-cross { font-size: clamp(2rem, 5vw, 4.8rem); font-weight: 300; }
.markets-side--egypt { transform: translateX(-34vw); }
.markets-side--uae { transform: translateX(34vw); }

.assembly-scene--markets.is-active .markets-side--egypt { animation: marketEgyptMeet 583ms cubic-bezier(.14,.82,.2,1) both; }
.assembly-scene--markets.is-active .markets-side--uae { animation: marketUaeMeet 583ms cubic-bezier(.14,.82,.2,1) both; }
.assembly-scene--markets.is-active .markets-cross { animation: marketCrossIn 421ms 259ms cubic-bezier(.16,.78,.18,1) both; }

/* 04 — a noisy brief resolves into a crisp direction. */
.direction-lockup strong { display: block; }
.direction-lockup strong span {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(2.8rem, 7.3vw, 6.9rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .88;
  opacity: 0;
}

.direction-lockup strong span:first-child { color: rgba(237,242,243,.42); }
.direction-lockup::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82vw, 1000px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  box-shadow: 0 0 12px rgba(255,255,255,.45);
  content: '';
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(.05);
}

.assembly-scene--direction.is-active .direction-lockup strong span:first-child { animation: directionBriefIn 535ms cubic-bezier(.16,.78,.18,1) both; }
.assembly-scene--direction.is-active .direction-lockup strong span:last-child { animation: directionResolveIn 616ms 137ms cubic-bezier(.14,.82,.2,1) both; }
.assembly-scene--direction.is-active .direction-lockup::after { animation: directionScan 616ms 72ms cubic-bezier(.2,.72,.2,1) both; }

/* Every scene leaves one precise line behind. */
.assembly-residues {
  position: absolute;
  z-index: 6;
  top: 76%;
  left: 50%;
  width: min(54vw, 680px);
  height: 76px;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.assembly-residue {
  --residue-y: 0px;
  --residue-width: 42%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--residue-width);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,242,243,.58) 12%, rgba(237,242,243,.58) 88%, transparent);
  box-shadow: 0 0 8px rgba(255,255,255,.16);
  opacity: 0;
  transform: translate(-50%, var(--residue-y)) scaleX(.04);
}

.assembly-residue:nth-child(1) { --residue-y: -27px; --residue-width: 31%; }
.assembly-residue:nth-child(2) { --residue-y: -16px; --residue-width: 48%; }
.assembly-residue:nth-child(3) { --residue-y: -5px; --residue-width: 38%; }
.assembly-residue:nth-child(4) { --residue-y: 6px; --residue-width: 56%; }

.assembly-residue.is-built { animation: residueBuild 292ms cubic-bezier(.16,.78,.18,1) both; }

.evidence-assembly.is-assembling .assembly-residues {
  animation: residuesLift 794ms cubic-bezier(.16,.78,.18,1) both;
}

.evidence-assembly.is-assembling .assembly-residue.is-built {
  animation: residueAssemble 850ms cubic-bezier(.16,.78,.18,1) both;
}

.assembly-identity {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  width: min(96vw, 1440px);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.assembly-identity__role {
  display: block;
  margin-bottom: clamp(1rem, 2.4vh, 1.8rem);
  color: rgba(237,242,243,.62);
  font-family: var(--home-mono);
  font-size: clamp(.6rem, .8vw, .76rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
}

.assembly-identity__name {
  position: relative;
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(4.2rem, 10.4vw, 10rem);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .82;
  text-transform: uppercase;
  white-space: nowrap;
}

.assembly-identity__name > span {
  display: block;
  color: #edf2f3;
  clip-path: inset(0 100% 0 0);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 9%, transparent 9% 14%);
  mask-image: repeating-linear-gradient(180deg, #000 0 9%, transparent 9% 14%);
}

.assembly-identity__name::after {
  position: absolute;
  inset: 0;
  color: #edf2f3;
  content: attr(data-text);
  opacity: 0;
  pointer-events: none;
}

.assembly-identity__name::before {
  position: absolute;
  inset: 0;
  color: transparent;
  content: attr(data-text);
  -webkit-text-stroke: 1px rgba(237,242,243,.48);
  clip-path: polygon(0 8%, 100% 8%, 100% 22%, 0 22%, 0 46%, 100% 46%, 100% 60%, 0 60%, 0 78%, 100% 78%, 100% 92%, 0 92%);
  opacity: 0;
  pointer-events: none;
}

.evidence-assembly.is-assembling .assembly-identity { animation: identityStageIn 243ms both; }
.evidence-assembly.is-assembling .assembly-identity__role { animation: identityRoleIn 340ms 454ms ease both; }
.evidence-assembly.is-assembling .assembly-identity__name > span { animation: identitySlicesIn 688ms 72ms cubic-bezier(.16,.78,.18,1) both; }
.evidence-assembly.is-assembling .assembly-identity__name::before { animation: identityEcho 745ms 32ms cubic-bezier(.16,.78,.18,1) both; }
.evidence-assembly.is-assembling .assembly-identity__name::after { animation: identitySolidify 308ms 648ms ease both; }

.cinematic-intro.is-resolving .evidence-assembly,
.cinematic-intro.is-resolving .assembly-axis {
  opacity: 0;
  transition: opacity 340ms ease;
}

.cinematic-intro__final-sweep {
  position: absolute;
  z-index: 15;
  top: 50%;
  left: 50%;
  width: 122vw;
  height: 2px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 10px rgba(255,255,255,.72), 0 0 48px rgba(255,255,255,.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(.04) scaleY(1);
  transform-origin: center;
}

.cinematic-intro.is-resolving .cinematic-intro__final-sweep {
  animation: introFinalSweep 583ms cubic-bezier(.2,.72,.2,1) both;
}

@keyframes introMeta {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes introGrain {
  0% { transform: translate3d(-1%, 0, 0); }
  50% { transform: translate3d(1%, -1%, 0); }
  100% { transform: translate3d(0, 1%, 0); }
}

@keyframes overheadLight {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.72); }
  7% { opacity: .11; }
  52% { opacity: .17; transform: translateX(-50%) scaleX(1); }
  84% { opacity: .1; }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.18); }
}

@keyframes introAmbientField {
  0% { opacity: 0; transform: translate3d(-3%, 1%, 0) scale(1); }
  18% { opacity: .62; }
  54% { opacity: .82; transform: translate3d(2%, -2%, 0) scale(1.055); }
  84% { opacity: .48; }
  100% { opacity: 0; transform: translate3d(4%, 1%, 0) scale(1.02); }
}

@keyframes assemblyAxisWake {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes assemblyAxisOpen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes assemblyAxisScan {
  0% { opacity: 0; transform: scaleX(.03); }
  38% { opacity: 1; transform: scaleX(.42); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes sceneBrandsStage {
  0% { opacity: 0; filter: blur(14px); transform: perspective(1100px) translate(-66%, -50%) rotateY(28deg) rotateZ(-3deg) scale(.8); }
  68% { opacity: 1; filter: blur(0); transform: perspective(1100px) translate(-49%, -50%) rotateY(-2deg) rotateZ(.35deg) scale(1.025); }
  100% { opacity: 1; filter: blur(0); transform: perspective(1100px) translate(-50%, -50%) rotateY(0) rotateZ(0) scale(1); }
}

@keyframes sceneIndustriesStage {
  0% { opacity: 0; filter: blur(10px); transform: perspective(900px) translate(-50%, -76%) rotateX(-64deg) scaleY(.72); }
  62% { opacity: 1; filter: blur(0); transform: perspective(900px) translate(-50%, -48%) rotateX(4deg) scaleY(1.03); }
  100% { opacity: 1; transform: perspective(900px) translate(-50%, -50%) rotateX(0) scaleY(1); }
}

@keyframes sceneMarketsStage {
  0% { opacity: 0; filter: blur(16px); clip-path: inset(0 49% 0 49%); transform: translate(-50%, -50%) scale(1.22); }
  52% { opacity: 1; filter: blur(0); clip-path: inset(0 8% 0 8%); transform: translate(-50%, -50%) scale(.97); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-50%, -50%) scale(1); }
}

@keyframes sceneDirectionStage {
  0% { opacity: 0; filter: blur(14px); clip-path: inset(46% 0 46% 0); transform: translate(-50%, -50%) skewX(-9deg) scaleX(1.14); }
  58% { opacity: 1; filter: blur(0); clip-path: inset(4% 0 4% 0); transform: translate(-50%, -50%) skewX(1.4deg) scaleX(.985); }
  100% { opacity: 1; clip-path: inset(0); transform: translate(-50%, -50%) skewX(0) scaleX(1); }
}

@keyframes sceneBrandsExit {
  from { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; filter: blur(11px); transform: translate(-82%, -54%) rotateZ(-7deg) scale(.2, .055); }
}

@keyframes sceneIndustriesExit {
  from { opacity: 1; filter: blur(0); transform: perspective(900px) translate(-50%, -50%) rotateX(0) scale(1); }
  to { opacity: 0; filter: blur(10px); transform: perspective(900px) translate(-50%, -88%) rotateX(72deg) scale(.3, .04); }
}

@keyframes sceneMarketsExit {
  from { opacity: 1; filter: blur(0); clip-path: inset(0); transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; filter: blur(15px); clip-path: inset(42%); transform: translate(-50%, -50%) rotateZ(-24deg) scale(.08); }
}

@keyframes sceneDirectionExit {
  from { opacity: 1; filter: blur(0); clip-path: inset(0); transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; filter: blur(8px); clip-path: inset(48% 0); transform: translate(-50%, -50%) scale(1.12, .025); }
}

@keyframes subFromRight {
  from { opacity: 0; filter: blur(4px); transform: translateX(44px) skewX(-7deg); }
  to { opacity: 1; filter: blur(0); transform: translateX(0) skewX(0); }
}

@keyframes subTrackLock {
  from { opacity: 0; filter: blur(5px); letter-spacing: .46em; transform: scaleX(1.18); }
  to { opacity: 1; filter: blur(0); letter-spacing: .13em; transform: scaleX(1); }
}

@keyframes subFromLeft {
  from { opacity: 0; filter: blur(4px); transform: translateX(-48px); }
  to { opacity: 1; filter: blur(0); transform: translateX(0); }
}

@keyframes subFromTop {
  from { opacity: 0; filter: blur(4px); transform: translateY(-22px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes sceneLightPass {
  0% { left: -16%; opacity: 0; }
  24% { opacity: .76; }
  72% { opacity: .38; }
  100% { left: 102%; opacity: 0; }
}

@keyframes sceneLightDrop {
  0% { top: -72%; opacity: 0; }
  24% { opacity: .7; }
  72% { opacity: .34; }
  100% { top: 122%; opacity: 0; }
}

@keyframes sceneLightImpact {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleY(.05); }
  42% { opacity: .86; transform: translate(-50%, -50%) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleY(1.18); }
}

@keyframes sceneTrailCollapse {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scaleX(.04); }
  42% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--trail-angle, 0deg)) scaleX(.12); }
}

@keyframes brandsNumberLock {
  0% { opacity: 0; filter: blur(10px); transform: translateX(-12vw) scale(1.32); }
  62% { opacity: 1; filter: blur(0); transform: translateX(.7vw) scale(.98); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes brandsWordLock {
  0% { opacity: 0; filter: blur(8px); transform: translateX(9vw); }
  62% { opacity: 1; filter: blur(0); transform: translateX(-.5vw); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes brandsEchoTop {
  0% { opacity: 0; transform: translate(24px, -28px); }
  42% { opacity: .72; }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes brandsEchoBottom {
  0% { opacity: 0; transform: translate(-22px, 30px); }
  46% { opacity: .52; }
  100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes industryTrackIn {
  0% { opacity: 0; transform: scaleY(.08); }
  56% { opacity: .82; }
  100% { opacity: .34; transform: scaleY(1); }
}

@keyframes industriesTitleIn {
  0% { opacity: 0; letter-spacing: .08em; filter: blur(7px); transform: scaleX(1.12); }
  100% { opacity: 1; letter-spacing: -.06em; filter: blur(0); transform: scaleX(1); }
}

@keyframes marketEgyptMeet {
  0% { opacity: 0; filter: blur(8px); transform: translateX(-34vw); }
  68% { opacity: 1; filter: blur(0); transform: translateX(1.2vw); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes marketUaeMeet {
  0% { opacity: 0; filter: blur(8px); transform: translateX(34vw); }
  68% { opacity: 1; filter: blur(0); transform: translateX(-1.2vw); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes marketCrossIn {
  0% { opacity: 0; filter: blur(8px); transform: rotate(45deg) scale(2.4); }
  60% { opacity: 1; filter: blur(0); transform: rotate(-3deg) scale(.94); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes directionBriefIn {
  0% { opacity: 0; filter: blur(15px); letter-spacing: .13em; transform: translateX(-7vw) skewX(-7deg); }
  100% { opacity: 1; filter: blur(.8px); letter-spacing: -.035em; transform: translateX(0) skewX(-1deg); }
}

@keyframes directionResolveIn {
  0% { opacity: 0; filter: blur(13px); letter-spacing: .16em; transform: translateX(8vw); }
  72% { opacity: 1; filter: blur(0); letter-spacing: -.068em; transform: translateX(-.7vw); }
  100% { opacity: 1; letter-spacing: -.06em; transform: translateX(0); }
}

@keyframes directionScan {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.05); }
  42% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.08); }
}

@keyframes residueBuild {
  0% { opacity: 0; transform: translate(-50%, var(--residue-y)) scaleX(.04); }
  58% { opacity: .9; }
  100% { opacity: .54; transform: translate(-50%, var(--residue-y)) scaleX(1); }
}

@keyframes residuesLift {
  from { top: 76%; transform: translate(-50%, -50%) scale(.78); }
  to { top: 50%; transform: translate(-50%, -50%) scale(1); }
}

@keyframes residueAssemble {
  0% { opacity: .54; transform: translate(-50%, var(--residue-y)) scaleX(1); }
  46% { opacity: 1; }
  100% { opacity: .22; transform: translate(-50%, var(--residue-y)) scaleX(2.55); }
}

@keyframes identityStageIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes identityRoleIn {
  from { opacity: 0; letter-spacing: .34em; transform: translateY(12px); }
  to { opacity: 1; letter-spacing: .2em; transform: translateY(0); }
}

@keyframes identitySlicesIn {
  0% { opacity: 0; filter: blur(10px); clip-path: inset(0 100% 0 0); transform: scaleX(1.08); }
  34% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transform: scaleX(1); }
}

@keyframes identitySolidify {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes identityEcho {
  0% { opacity: 0; filter: blur(8px); transform: translateX(-26px) scaleX(1.08); }
  34% { opacity: .82; }
  72% { opacity: .28; transform: translateX(14px) scaleX(.985); }
  100% { opacity: 0; filter: blur(0); transform: translateX(0) scaleX(1); }
}

@keyframes introFinalSweep {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.04) scaleY(1); }
  34% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1); }
  100% { opacity: .16; transform: translate(-50%, -50%) scaleX(1.06) scaleY(360); }
}

.portfolio-home.content-enter .site-nav { animation: siteNavIn 502ms 130ms ease both; }

@keyframes siteNavIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .cinematic-intro__meta { right: 1rem; left: 1rem; }
  .cinematic-intro__meta > span { max-width: 52%; line-height: 1.55; }
  .cinematic-intro__skip { padding: .58rem .72rem; letter-spacing: .12em; }
  .assembly-axis { width: 94vw; }
  .assembly-scene { top: 48%; width: 100%; padding-inline: 1rem; }
  .assembly-scene.is-condensing { transform: translate(-50%, calc(-50% + 18vh)) scale(.16, .04); }
  .assembly-scene__sub { max-width: 88vw; margin-top: 1rem; font-size: .62rem; letter-spacing: .08em; line-height: 1.65; }
  .assembly-scene__sub--industries br { display: none; }
  .assembly-scene__core { min-height: 94px; }
  .brands-lockup { gap: .55rem; }
  .brands-number { font-size: 17vw; }
  .brands-word { font-size: 14.4vw; }
  .industries-lockup strong { font-size: 13.5vw; }
  .industries-lines { inset: 3% 0; gap: .35rem; }
  .markets-lockup { gap: .6rem; }
  .markets-side { font-size: 14.8vw; }
  .markets-cross { font-size: 8vw; }
  .direction-lockup strong span { font-size: 10.2vw; line-height: .94; }
  .assembly-residues { top: 74%; width: 84vw; }
  .assembly-identity { width: 98vw; }
  .assembly-identity__role { margin-bottom: 1rem; font-size: .52rem; letter-spacing: .14em; }
  .assembly-identity__name { font-size: 13.2vw; letter-spacing: -.075em; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-intro { display: none !important; }
  .portfolio-home.intro-active { overflow: auto; }
  .portfolio-home.intro-active .site-nav { opacity: 1; pointer-events: auto; }
}

/* ================================================================
   ABOUT — FIRST CONTENT SECTION
   ================================================================ */

#about.about-section {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: clamp(110px, 15vh, 170px) clamp(20px, 5vw, 90px) clamp(90px, 12vh, 140px);
  overflow: hidden;
  border-top: 1px solid rgba(237, 239, 242, .08);
  scroll-margin-top: 70px;
  background: #050607;
}

.about-section[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.about-section::before {
  position: absolute;
  z-index: -1;
  top: -34%;
  left: -26%;
  width: 92%;
  height: 62%;
  border-top: 2px solid rgba(221, 241, 248, .58);
  border-radius: 50%;
  filter: blur(.3px) drop-shadow(0 0 18px rgba(185, 222, 235, .22));
  opacity: 0;
  transform: rotate(-7deg) translate3d(-8%, -10%, 0);
  content: '';
  pointer-events: none;
}

.about-section.is-visible::before { animation: aboutLightSweep 1.35s .08s cubic-bezier(.2,.72,.2,1) both; }

.about-section::after {
  position: absolute;
  z-index: 0;
  top: 5%;
  right: -16%;
  width: min(64vw, 940px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--light-cool), .2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(var(--light-cool), .09), transparent 28%),
    radial-gradient(circle at 48% 78%, rgba(var(--light-copper), .075), transparent 24%);
  box-shadow:
    inset 52px 22px 110px rgba(var(--light-cool), .045),
    0 0 80px rgba(var(--light-cool), .04);
  content: '';
  filter: blur(.2px);
  opacity: .62;
  pointer-events: none;
  transform: rotate(-24deg) scaleY(.44);
  animation: ambientOrbit 18s ease-in-out infinite alternate;
}

.about-transition {
  position: absolute;
  z-index: 2;
  top: clamp(34px, 5vh, 58px);
  right: clamp(20px, 5vw, 90px);
  left: clamp(20px, 5vw, 90px);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.about-transition__line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(234, 248, 252, .78), rgba(234, 248, 252, .12) 72%, transparent);
  box-shadow: 0 0 18px rgba(194, 228, 239, .18);
  transform: scaleX(0);
  transform-origin: left center;
}

.about-transition__label {
  flex: 0 0 auto;
  color: var(--home-muted);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-12px);
}

.about-section.is-visible .about-transition__line { animation: aboutLineSweep 1s cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-transition__label { animation: aboutLabelIn .55s .72s ease both; }

.about-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  width: min(100%, 1280px);
  margin: 0 auto;
}

.about-copy { max-width: 680px; }

.about-label {
  margin: 0;
  color: var(--home-muted);
  font-family: var(--home-mono);
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
}

.about-name {
  margin: 1.5rem 0 0;
  color: var(--home-paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(34px, 5.2vw, 74px);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: 1.02;
}

.about-body {
  max-width: 50ch;
  margin: 1.8rem 0 0;
  color: var(--home-muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.8;
}

.about-body + .about-body { margin-top: 1.1rem; }
.about-body strong { color: var(--home-paper); font-weight: 400; }

.about-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  margin: clamp(2.2rem, 5vh, 3.2rem) 0 0;
  padding: 0;
  border-top: 1px solid rgba(237, 239, 242, .08);
  color: var(--home-muted);
  list-style: none;
}

/* five facts in two columns leaves a hole; the last one takes the row. */
.about-facts li:last-child { grid-column: 1 / -1; }

.about-facts li {
  padding: 13px 0;
  border-bottom: 1px solid rgba(237, 239, 242, .08);
  color: var(--home-muted);
  font-family: var(--home-mono);
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
}

/* What she works with, under what she has worked on.
   Two labelled rows in the same mono register as .about-facts, so they
   read as one more fact about the practice rather than a badge wall. */
.about-stack {
  display: grid;
  gap: clamp(1.1rem, 2.4vh, 1.7rem);
  margin: clamp(1.9rem, 4vh, 2.7rem) 0 0;
}

.about-stack__row {
  display: grid;
  grid-template-columns: minmax(0, 108px) minmax(0, 1fr);
  gap: 1rem clamp(1.2rem, 2.4vw, 2rem);
  align-items: baseline;
}

.about-stack__label {
  margin: 0;
  color: rgba(237, 239, 242, .42);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.about-stack__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-stack__tags li {
  padding: 6px 12px;
  border: 1px solid rgba(237, 239, 242, .16);
  border-radius: 999px;
  color: var(--home-muted);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  transition: border-color 320ms ease, color 320ms ease;
}

.about-stack__tags li:hover {
  border-color: rgba(237, 239, 242, .38);
  color: var(--home-paper);
}

/* The software row carries a drawn glyph inside the same chip, so it
   stays one row shape with the AI-tools and platforms rows above it
   rather than becoming a second visual system. The glyphs are drawn
   here in SVG — no vendor logo files, nothing to go stale. */
.about-stack__tags--icon li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
}

/* The software row is marks only — no names beside them. Zainab wants
   the tiles to read the way an app icon reads: a rounded square, the
   tool's own colour, the short name everyone already uses. Drawn here
   in CSS rather than pulled from six vendor logo files, so it stays one
   set at one size and nothing goes stale. --tool is set per tile. */
.about-stack__tags--marks { gap: 10px; }

.about-stack__tags--marks li {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(var(--tool), .34);
  border-radius: 11px;
  background: rgba(var(--tool), .11);
  color: rgb(var(--tool));
  font-family: var(--home-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  transition: border-color 320ms ease, background 320ms ease, transform 420ms cubic-bezier(.2, .76, .2, 1);
}

.about-stack__tags--marks abbr {
  text-decoration: none;
  cursor: default;
}

.about-stack__tags--marks svg {
  width: 20px;
  height: 20px;
  transition: transform 420ms cubic-bezier(.2, .76, .2, 1);
}

.about-stack__tags--marks li:hover svg { transform: scale(1.06); }

/* Real logo files, supplied by Zainab and background-keyed here. They keep
   their own colours (Gemini's spark is a gradient), so the tile only tints
   the ground behind them. */
.about-stack__tags--marks img {
  width: 23px;
  height: 23px;
  object-fit: contain;
  transition: transform 420ms cubic-bezier(.2, .76, .2, 1);
}

.about-stack__tags--marks li:hover img { transform: scale(1.06); }

.about-stack__tags--marks li:hover {
  border-color: rgba(var(--tool), .72);
  background: rgba(var(--tool), .2);
  color: rgb(var(--tool));
  transform: translateY(-2px);
}

@media (max-width: 620px) {
  .about-stack__row { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
}

.about-cta {
  margin: clamp(1.8rem, 4vh, 2.6rem) 0 0;
  color: var(--home-paper);
  font-family: var(--home-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  line-height: 1.6;
  text-transform: uppercase;
}

.about-portrait {
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(100%, 500px);
  margin: 0;
  overflow: visible;
  aspect-ratio: auto;
  background: transparent;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .48));
  clip-path: inset(100% -12% 0 -12%);
}

.about-portrait::before {
  position: absolute;
  z-index: -2;
  top: 8%;
  right: -16%;
  bottom: -2%;
  left: -16%;
  border: 0;
  background: radial-gradient(ellipse at center, rgba(210, 234, 242, .13) 0%, rgba(132, 172, 187, .045) 42%, transparent 72%);
  filter: blur(18px);
  content: '';
}

.about-portrait::after {
  position: absolute;
  z-index: -1;
  right: -10%;
  bottom: 1.5%;
  left: -10%;
  height: 12%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .72), transparent 68%);
  filter: blur(8px);
  content: '';
  pointer-events: none;
}

/* the <picture> wrapper must not become the box the portrait sizes against */
.about-portrait picture { display: contents; }

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  filter: grayscale(.92) saturate(.42) contrast(1.08) brightness(.9) drop-shadow(0 0 16px rgba(211, 235, 243, .05));
  transform: translateY(8%) scale(1.035);
  transform-origin: center bottom;
}

.about-label,
.about-name,
.about-body,
.about-facts,
.about-cta { opacity: 0; transform: translateY(24px); }

.about-portrait { opacity: 0; transform: translateY(72px) scale(.965); }

.about-section.is-visible .about-label { animation: aboutRise 700ms 260ms cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-name { animation: aboutRise 700ms 380ms cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-body:nth-of-type(2) { animation: aboutRise 700ms 500ms cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-body:nth-of-type(3) { animation: aboutRise 700ms 600ms cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-body:nth-of-type(4) { animation: aboutRise 700ms 700ms cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-body:nth-of-type(5) { animation: aboutRise 700ms 800ms cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-facts { animation: aboutRise 700ms 900ms cubic-bezier(.2,.72,.2,1) both; }
.about-section.is-visible .about-portrait { animation: aboutPortraitReveal 1.12s 120ms cubic-bezier(.16,.78,.18,1) both; }
.about-section.is-visible .about-portrait img { animation: aboutPortraitSettle 1.25s 120ms cubic-bezier(.16,.78,.18,1) both; }

@keyframes aboutRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes aboutLineSweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes aboutLabelIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes aboutLightSweep {
  0% { opacity: 0; transform: rotate(-7deg) translate3d(-8%, -10%, 0); }
  38% { opacity: .95; }
  100% { opacity: .42; transform: rotate(-7deg) translate3d(16%, 18%, 0); }
}

@keyframes aboutPortraitReveal {
  from { opacity: 0; clip-path: inset(100% -12% 0 -12%); transform: translateY(72px) scale(.965); }
  to { opacity: 1; clip-path: inset(0 -12% 0 -12%); transform: translateY(0) scale(1); }
}

@keyframes aboutPortraitSettle {
  from { transform: translateY(8%) scale(1.035); }
  to { transform: translateY(0) scale(1); }
}

@keyframes ambientOrbit {
  from { opacity: .48; transform: translate3d(-2%, -1%, 0) rotate(-24deg) scaleY(.44); }
  to { opacity: .72; transform: translate3d(4%, 3%, 0) rotate(-18deg) scaleY(.48); }
}

@media (max-width: 760px) {
  .about-section { min-height: auto; padding-top: 6.8rem; padding-bottom: 6rem; }
  .about-transition { top: 2.2rem; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .about-portrait { justify-self: center; width: min(88%, 360px); }
  .about-facts { grid-template-columns: minmax(0, 1fr); }
  .about-name { font-size: clamp(28px, 8.5vw, 42px); }
  .about-section::after { top: 18%; right: -62%; width: 128vw; opacity: .46; }
}

@media (prefers-reduced-motion: reduce) {
  .about-label,
  .about-name,
  .about-body,
  .about-facts,
  .about-cta,
  .about-portrait,
  .about-portrait img,
  .about-transition__line,
  .about-transition__label { opacity: 1; transform: none; clip-path: none; animation: none !important; }
  .about-section::after { animation: none !important; }
}

@keyframes caseArcDrift {
  from { opacity: .58; transform: translate3d(-2%, -1%, 0) rotate(-18deg); }
  to { opacity: .82; transform: translate3d(3%, 4%, 0) rotate(-13deg); }
}

/* ================================================================
   CASE STUDY SYSTEM — 01 / SFI PROPERTIES
   ================================================================ */

.case {
  --case-page: min(90vw, 1440px);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  overflow: clip;
  border-top: 1px solid var(--edge);
  background:
    radial-gradient(ellipse 46% 18% at 76% 8%, rgba(var(--light-cool), .07), transparent 68%),
    radial-gradient(ellipse 38% 18% at 10% 54%, rgba(var(--light-copper), .04), transparent 72%),
    #080b0e;
  color: var(--paper);
  scroll-margin-top: 70px;
}

.case[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.case::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 7%;
  width: min(46vw, 720px);
  height: min(40vw, 620px);
  background: linear-gradient(148deg, rgba(var(--light-cool), .13), transparent 44%);
  clip-path: polygon(46% 0, 56% 0, 100% 100%, 0 100%);
  content: '';
  filter: blur(28px);
  opacity: .34;
  pointer-events: none;
  transform: translateY(-18%);
}

.case::after {
  position: absolute;
  z-index: -1;
  top: 20%;
  right: -27%;
  width: min(88vw, 1280px);
  aspect-ratio: 1.7;
  border: 1px solid rgba(var(--light-cool), .18);
  border-radius: 50%;
  background: linear-gradient(122deg, rgba(var(--light-cool), .045), transparent 35% 70%, rgba(var(--light-copper), .035));
  box-shadow: inset 40px 20px 120px rgba(var(--light-cool), .025), 0 0 80px rgba(var(--light-cool), .025);
  content: '';
  opacity: .78;
  pointer-events: none;
  transform: rotate(-18deg);
  animation: caseArcDrift 24s ease-in-out infinite alternate;
}

.case-bar,
.case-hero,
.case-story,
.case-work,
.case-result {
  width: var(--case-page);
  margin-inline: auto;
  box-sizing: border-box;
}

/* a hyphenated phrase in display type must not break at the hyphen —
   "founder-/led" reads as two words. */
.nowrap { white-space: nowrap; }

.case-bar {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.4fr auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(8px, .68vw, 10px);
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.case-bar > span:last-child { justify-self: end; }

.case-bar__brand {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  color: var(--paper);
}

.case-bar__brand img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: grayscale(1) brightness(2.05) contrast(1.15);
}

.case-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  min-height: min(880px, 92svh);
  padding-block: clamp(80px, 12vh, 150px);
}

.case-hero__copy { position: relative; z-index: 2; }

.case-kicker,
.case-label,
.case-meta,
.case-role span,
.case-role p,
.case-section-head h3,
.case-proof-shot figcaption {
  font-family: 'IBM Plex Mono', monospace;
}

.case-kicker,
.case-label {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .2em;
  line-height: 1.5;
  text-transform: uppercase;
}

.case-title {
  margin: clamp(1.4rem, 3vh, 2.4rem) 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  /* the long name on this page is PROPERTIES; it has to finish inside its
     own column or it runs into the logo watermark in the next one. */
  font-size: clamp(56px, 8.6vw, 132px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .77;
  text-transform: uppercase;
}

.case-meta {
  margin: clamp(2.2rem, 5vh, 3.8rem) 0 0;
  color: var(--muted);
  font-size: clamp(9px, .82vw, 12px);
  letter-spacing: .08em;
  line-height: 1.65;
}

.case-role {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 1.2rem;
  max-width: 620px;
  margin-top: clamp(2.4rem, 5vh, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--edge);
}

.case-role span,
.case-role p {
  margin: 0;
  font-size: clamp(9px, .8vw, 11px);
  letter-spacing: .08em;
  line-height: 1.7;
  text-transform: uppercase;
}

.case-role span { color: var(--muted); }
.case-role p { color: var(--paper); }

.case-thesis {
  max-width: 19ch;
  margin: clamp(2.4rem, 5vh, 4rem) 0 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.case-thesis span,
.case-thesis strong { display: block; }
.case-thesis span { color: var(--shadow); }
.case-thesis strong { color: var(--paper); font-weight: 800; }

.case-hero__mark {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(58vw, 690px);
  margin: 0;
  overflow: hidden;
}

.case-hero__mark::before {
  position: absolute;
  right: 5%;
  bottom: 8%;
  left: 5%;
  height: 16%;
  background: radial-gradient(ellipse, rgba(237, 239, 242, .22), transparent 68%);
  content: '';
  filter: blur(20px);
  opacity: .44;
  transform: perspective(500px) rotateX(68deg);
}

.case-hero__mark img {
  position: relative;
  z-index: 1;
  width: min(94%, 600px);
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(1.7) contrast(1.1);
  opacity: .24;
}

.case-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--edge);
}

.case-story__chapter {
  padding: clamp(54px, 7vw, 100px) clamp(0px, 3.2vw, 48px) clamp(60px, 8vw, 116px) 0;
}

.case-story__chapter--decision {
  padding-right: 0;
  padding-left: clamp(28px, 4.5vw, 68px);
  border-left: 1px solid var(--edge);
}

.case-prose {
  max-width: 57ch;
  margin-top: clamp(2rem, 4vh, 3.2rem);
}

.case-prose p {
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 300;
  letter-spacing: -.012em;
  line-height: 1.72;
}

.case-prose p + p { margin-top: 1.5rem; }
.case-prose strong { color: var(--paper); font-weight: 600; }

.case-prose .case-pullquote {
  max-width: 17ch;
  margin-bottom: clamp(2.2rem, 4vh, 3.4rem);
  color: var(--paper);
  font-size: clamp(28px, 3.3vw, 54px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.02;
}

.case-work {
  --work-card: clamp(180px, 17vw, 250px);
  padding-block: clamp(86px, 12vw, 180px);
}

.case-section-head {
  display: flex;
  gap: 2rem;
  align-items: end;
  justify-content: space-between;
  padding-bottom: clamp(1.5rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--edge);
}

.case-section-head h3 {
  margin: .8rem 0 0;
  color: var(--paper);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.work-carousel__controls {
  display: inline-flex;
  gap: .65rem;
  align-items: center;
}

.work-carousel__hint,
.work-carousel__status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
}

.work-carousel__hint {
  margin-right: .7rem;
  color: var(--muted);
}

.work-carousel__status {
  display: inline-flex;
  gap: .45rem;
  min-width: 4.6rem;
  color: var(--muted);
}

.work-carousel__status strong {
  color: var(--paper);
  font-weight: 500;
}

.work-carousel__button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(237, 239, 242, .2);
  border-radius: 50%;
  background: rgba(5, 8, 12, .7);
  color: var(--paper);
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.work-carousel__button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.work-carousel__button--autoplay { position: relative; }
.work-carousel__icon--play { display: block; }
.work-carousel__icon--pause { display: none; }
.work-carousel__button--autoplay.is-playing .work-carousel__icon--play { display: none; }
.work-carousel__button--autoplay.is-playing .work-carousel__icon--pause { display: block; }

.work-carousel__button:hover,
.work-carousel__button:focus-visible {
  border-color: rgba(237, 239, 242, .62);
  background: rgba(237, 239, 242, .08);
  transform: translateY(-2px);
}

.work-carousel__button:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
.work-carousel__button:disabled { cursor: default; opacity: .28; transform: none; }

.work-carousel {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, .96), transparent 10% 90%, rgba(5, 6, 7, .96)),
    radial-gradient(ellipse at 50% 42%, rgba(var(--light-cool), .08), transparent 44%),
    radial-gradient(ellipse at 72% 76%, rgba(var(--light-copper), .05), transparent 30%),
    linear-gradient(180deg, rgba(7, 9, 11, .94), rgba(10, 10, 13, .98));
}

.work-carousel::after {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: -32%;
  width: 28%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--light-cool), .86), transparent);
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
}

.work-carousel.is-autoplaying::after {
  animation: carouselRailLight 2.2s linear infinite;
  opacity: 1;
}

.work-carousel__spotlight {
  position: absolute;
  z-index: 0;
  top: 3%;
  bottom: 6%;
  left: 50%;
  width: min(48vw, 680px);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(var(--light-cool), .1), rgba(var(--light-cool), .02) 38%, transparent 72%);
  filter: blur(22px);
  opacity: .82;
  pointer-events: none;
  transform: translateX(-50%);
}

.work-carousel.is-autoplaying .work-carousel__spotlight {
  animation: carouselSpotlightPulse 2.4s ease-in-out infinite;
}

.work-carousel__viewport {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: clamp(2.3rem, 5vw, 5rem) clamp(1.2rem, 2vw, 2rem);
  cursor: grab;
  outline: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
}

.work-carousel.is-autoplaying .work-carousel__viewport { scroll-snap-type: none; }
/* …and for as long as a pointer is held on it, so stopping autoplay never
   snaps the rail out from under a click. See home.js holdSnap(). */
.work-carousel__viewport.is-pointer-held { scroll-snap-type: none; }

.work-carousel__viewport::-webkit-scrollbar { display: none; }

.work-carousel__viewport:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(237, 239, 242, .32);
}

.work-carousel__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.work-grid {
  position: relative;
  display: flex;
  width: max-content;
  gap: clamp(12px, 1.4vw, 22px);
  padding-inline: clamp(18px, 5vw, 72px);
  perspective: 1200px;
}

/* The card is a flat column; only the FRAME rides the arc.
   The stagger used to sit on .work-item, which meant the title and the
   "Read the caption" chip rode it too and every chip landed on a
   different line — "عاوزاهم يكونوا منتظمين وفي نفس السطر بالظبط"
   (2026-08-31). Moving the transform down to .work-frame keeps the fan
   of images and puts every caption and chip back on one baseline.
   The perspective has to come from the transform function now, because
   .work-grid's `perspective` only reaches its direct children. */
.work-item {
  position: relative;
  display: flex;
  flex: 0 0 var(--work-card);
  flex-direction: column;
  margin: 0;
  opacity: .92;
  scroll-snap-align: center;
  transition: opacity 340ms ease, filter 340ms ease;
}

.work-item .work-frame {
  transform-origin: 50% 45%;
  transition: border-color 360ms ease, box-shadow 420ms ease,
              transform 420ms cubic-bezier(.2, .76, .2, 1);
}

.work-item:nth-child(6n + 1) .work-frame { transform: perspective(1200px) translateY(28px) scale(.95) rotateY(3deg); }
.work-item:nth-child(6n + 2) .work-frame { transform: perspective(1200px) translateY(14px) scale(.97) rotateY(1.5deg); }
.work-item:nth-child(6n + 3) .work-frame { transform: perspective(1200px) translateY(3px) scale(.985) rotateY(.5deg); }
.work-item:nth-child(6n + 4) .work-frame { transform: perspective(1200px) translateY(3px) scale(.985) rotateY(-.5deg); }
.work-item:nth-child(6n + 5) .work-frame { transform: perspective(1200px) translateY(14px) scale(.97) rotateY(-1.5deg); }
.work-item:nth-child(6n + 6) .work-frame { transform: perspective(1200px) translateY(28px) scale(.95) rotateY(-3deg); }

.work-item.is-active { z-index: 2; opacity: 1; }

.work-item.is-active .work-frame,
.work-item.is-active:nth-child(6n + 1) .work-frame,
.work-item.is-active:nth-child(6n + 2) .work-frame,
.work-item.is-active:nth-child(6n + 3) .work-frame,
.work-item.is-active:nth-child(6n + 4) .work-frame,
.work-item.is-active:nth-child(6n + 5) .work-frame,
.work-item.is-active:nth-child(6n + 6) .work-frame {
  transform: perspective(1200px) translateY(-8px) scale(1.035) rotateY(0);
}

.work-link {
  position: relative;
  display: block;
  margin-bottom: .95rem;
  color: inherit;
  text-decoration: none;
}

.work-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 14;
  overflow: hidden;
  border: 1px solid rgba(237, 239, 242, .13);
  border-radius: clamp(13px, 1.35vw, 20px);
  background: #0a0e12;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(237, 239, 242, .025);
  transition: border-color 360ms ease, box-shadow 420ms ease;
}

.work-frame::before {
  position: absolute;
  z-index: 1;
  top: -22%;
  bottom: -22%;
  left: -72%;
  width: 54%;
  background: linear-gradient(104deg, transparent 10%, rgba(237, 239, 242, .03) 28%, rgba(255, 255, 255, .58) 50%, rgba(237, 239, 242, .04) 68%, transparent 90%);
  content: '';
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-12deg);
}

.work-item.is-active .work-frame {
  border-color: rgba(237, 239, 242, .42);
  box-shadow: 0 38px 90px rgba(0, 0, 0, .62), 0 0 0 1px rgba(237, 239, 242, .11), 0 0 58px rgba(237, 239, 242, .07);
}

.work-item.is-active .work-frame::before {
  animation: carouselCardLight 820ms 80ms cubic-bezier(.2, .72, .18, 1) both;
}

.work-frame::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .035);
  background: linear-gradient(180deg, rgba(10, 11, 13, .015), rgba(10, 11, 13, .11));
  content: '';
  pointer-events: none;
  transition: opacity 560ms ease;
}

.work-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0) brightness(.96) saturate(.96) contrast(1.03);
  transform: scale(1.01);
  transition: filter 420ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1);
}

.work-item.is-active .work-frame::after { opacity: 0; }

.work-item.is-active .work-frame img {
  filter: grayscale(0) brightness(1.04) saturate(1.02) contrast(1.02);
  transform: scale(1);
}

.work-frame--portrait img { object-position: center top; }
.work-frame--poster img { object-fit: contain; }

.work-caption {
  display: block;
  min-height: 7rem;
  margin-top: 1.05rem;
  opacity: .74;
  transform: translateY(0);
  transition: opacity 340ms ease, transform 420ms ease;
}

.work-item.is-active .work-caption { opacity: 1; transform: translateY(0); }

.work-caption span {
  display: block;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .14em;
  line-height: 1.45;
  text-transform: uppercase;
}

.work-caption strong {
  display: block;
  margin-top: .55rem;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.work-caption p {
  margin: .6rem 0 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
}

.work-link:focus-visible { outline: 1px solid var(--paper); outline-offset: 7px; }

@media (hover: hover) and (pointer: fine) {
  .work-item:not(.is-active) .work-link:hover .work-frame { border-color: rgba(237, 239, 242, .28); }
}

.case-result {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  padding-block: clamp(86px, 12vw, 180px);
  border-top: 1px solid var(--edge);
}

.case-metrics { margin: clamp(2rem, 4vh, 3.2rem) 0 0; }

.case-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .42fr);
  gap: clamp(1.75rem, 3vw, 3.5rem);
  align-items: end;
  padding-block: clamp(1.25rem, 2.2vw, 2rem);
  border-bottom: 1px solid var(--edge);
}

.case-metrics dt {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(42px, 5.4vw, 86px);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.06em;
  line-height: .82;
  white-space: nowrap;
}

.case-metrics > div:nth-child(-n + 2) dt { font-size: clamp(40px, 4.15vw, 64px); }

.case-metrics dd {
  align-self: center;
  justify-self: start;
  margin: 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(9px, .82vw, 12px);
  letter-spacing: .08em;
  line-height: 1.55;
  text-transform: uppercase;
}

.case-result__note {
  max-width: 48ch;
  margin: clamp(2rem, 4vh, 3.4rem) 0 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.65;
}

.case-result__note strong { color: var(--paper); font-weight: 600; }

.case-proof-shot {
  position: relative;
  margin: 0;
  padding: clamp(18px, 2.4vw, 34px);
  border: 1px solid rgba(237, 239, 242, .12);
  background: #0b1015;
  box-shadow: 0 38px 90px rgba(0, 0, 0, .38);
}

.case-proof-shot::before {
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237, 239, 242, .5), transparent);
  content: '';
}

.case-proof-shot figcaption {
  margin-bottom: clamp(1rem, 2vw, 1.8rem);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
}

.case-proof-shot__screens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  align-items: start;
}

.case-proof-shot__screens img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(237, 239, 242, .1);
  background: #fff;
}

.case-reveal {
  opacity: 0;
  transform: translateY(20px);
}

.case-reveal.is-visible { animation: caseRise 680ms cubic-bezier(.2, .72, .2, 1) both; }
.case-reveal--hero.is-visible { animation-delay: 0ms; }
.case-reveal--situation.is-visible { animation-delay: 120ms; }
.case-reveal--decision.is-visible { animation-delay: 280ms; }
.case-reveal--work.is-visible { animation-delay: 400ms; }
.case-reveal--result.is-visible { animation-delay: 560ms; }
.case-reveal--closing.is-visible { animation-delay: 760ms; }

@keyframes caseRise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes carouselCardLight {
  0% { left: -72%; opacity: 0; }
  18% { opacity: .9; }
  72% { opacity: .5; }
  100% { left: 122%; opacity: 0; }
}

@keyframes carouselSpotlightPulse {
  0%, 100% { opacity: .68; transform: translateX(-50%) scale(.96); }
  50% { opacity: .94; transform: translateX(-50%) scale(1.04); }
}

@keyframes carouselRailLight {
  from { transform: translateX(0); }
  to { transform: translateX(470%); }
}

@media (max-width: 980px) {
  .case-bar { grid-template-columns: 1fr 1fr; padding-block: 1rem; }
  .case-bar > span:nth-child(even) { justify-self: end; text-align: right; }
  .case-hero { grid-template-columns: minmax(0, 1fr) minmax(250px, .68fr); }
  .case-title { font-size: clamp(58px, 11vw, 110px); }
  .case-result { grid-template-columns: minmax(0, 1fr); }
  .case-proof-shot { width: min(100%, 760px); box-sizing: border-box; }
}

@media (max-width: 860px) {
  .case-hero {
    /* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to go below the
       min-content of PROPERTIES and pushes the whole column out of the
       case's `overflow: clip` box. */
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
    padding-bottom: 0;
  }

  .case-hero__mark {
    width: min(78vw, 520px);
    min-height: 380px;
    margin-left: auto;
    transform: translateY(-8%);
  }

  .case-story { grid-template-columns: minmax(0, 1fr); }
  .case-story__chapter { padding-right: 0; }
  .case-story__chapter--decision { padding-left: 0; border-top: 1px solid var(--edge); border-left: 0; }
  .case-work { --work-card: clamp(190px, 34vw, 250px); }
}

@media (max-width: 560px) {
  .case { --case-page: calc(100vw - 36px); }
  .case-bar { grid-template-columns: 1fr auto; gap: .75rem 1rem; min-height: 0; }
  .case-bar > span:nth-child(2),
  .case-bar > span:nth-child(3) { display: none; }
  .case-hero { gap: 0; padding-top: 74px; }
  /* 15vw put PROPERTIES 1px past the right edge on a 320px phone.
     13.6vw keeps the longest title on this page inside the column at
     every width without visibly shrinking it. */
  .case-title { font-size: clamp(40px, 13.6vw, 92px); }
  .case-meta { max-width: 28ch; }
  .case-role { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .case-hero__mark { width: min(86vw, 100%); min-height: 330px; margin: -1rem 0 0 auto; }
  .case-section-head { flex-wrap: wrap; align-items: start; gap: 1.2rem; }
  .case-work { --work-card: min(52vw, 230px); }
  .work-carousel__controls { margin-left: auto; }
  .work-carousel__hint { display: none; }
  .work-carousel__status { min-width: 4.2rem; }
  .work-carousel__button { width: 38px; height: 38px; }
  .work-carousel__viewport { padding-top: 2.4rem; }
  .work-caption { min-height: 8rem; }
  .case-metrics > div { grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: start; }
  .case-metrics dt,
  .case-metrics > div:nth-child(-n + 2) dt { font-size: clamp(42px, 15vw, 68px); }
  .case-metrics dd { justify-self: start; }
  .case-proof-shot__screens { grid-template-columns: minmax(0, 1fr); }
  .case::after { top: 32%; right: -88%; width: 180vw; opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .case-reveal,
  .case-reveal.is-visible,
  .work-item,
  .work-item.is-active,
  .work-item .work-frame,
  .work-item.is-active .work-frame,
  .work-frame img {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }

  .work-carousel__viewport { scroll-behavior: auto; }
  .work-frame::before { display: none; }
  .work-carousel__spotlight { animation: none !important; }
  .work-carousel::after { display: none; }
  .case::after { animation: none !important; }
}

/* ================================================================
   CASE STUDY INDEX — 02 / ENGINE COURT
   ================================================================ */

.engine-deck {
  --engine-page: min(90vw, 1440px);
  --engine-red: 207, 65, 70;
  --engine-blue: 82, 137, 255;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  padding-bottom: clamp(110px, 15vw, 220px);
  overflow: hidden;
  border-top: 1px solid var(--edge);
  background:
    radial-gradient(ellipse 42% 28% at 12% 18%, rgba(var(--engine-red), .13), transparent 72%),
    radial-gradient(ellipse 44% 30% at 88% 70%, rgba(var(--engine-blue), .12), transparent 74%),
    #07090d;
  color: var(--paper);
  scroll-margin-top: 70px;
}

.engine-deck[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.engine-deck::after {
  position: absolute;
  z-index: -1;
  top: 24%;
  right: -20%;
  width: min(78vw, 1180px);
  aspect-ratio: 1.9;
  border: 1px solid rgba(var(--engine-blue), .16);
  border-radius: 50%;
  background: linear-gradient(120deg, rgba(var(--engine-blue), .04), transparent 42% 72%, rgba(var(--engine-red), .035));
  content: '';
  opacity: .82;
  pointer-events: none;
  transform: rotate(-14deg);
}

.engine-deck__bar,
.engine-deck__head,
.engine-deck__dots {
  width: var(--engine-page);
  margin-inline: auto;
  box-sizing: border-box;
}

.engine-deck__bar {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(8px, .7vw, 10px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.engine-deck__bar span:first-child { color: var(--paper); }

/* Every other section shows the brand's mark in its header; these two bars
   were the only places in the sequence where the name arrived without it. */
.engine-deck__bar span:first-child,
.penduline-case__bar span:first-child {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
}

.engine-deck__bar span:first-child img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: grayscale(1) brightness(2.05) contrast(1.15);
}

.penduline-case__bar span:first-child img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.engine-deck__head {
  display: flex;
  gap: 3rem;
  align-items: end;
  justify-content: space-between;
  padding-block: clamp(72px, 9vw, 130px) clamp(40px, 6vw, 76px);
}

.engine-deck__head h2 {
  margin: 1.2rem 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(52px, 7vw, 104px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .9;
  text-transform: uppercase;
}

.engine-deck__head > div:first-child > p:nth-of-type(2) {
  max-width: 52ch;
  margin: 2rem 0 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 300;
  line-height: 1.6;
}

.engine-deck__controls {
  display: flex;
  gap: .65rem;
  align-items: center;
}

.engine-deck__controls button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(237, 239, 242, .2);
  border-radius: 50%;
  background: rgba(5, 8, 12, .7);
  color: var(--paper);
  font-size: 18px;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.engine-deck__controls button:hover,
.engine-deck__controls button:focus-visible {
  border-color: rgba(237, 239, 242, .6);
  background: rgba(237, 239, 242, .08);
  transform: translateY(-2px);
}

.engine-deck__controls button:focus-visible,
.engine-deck__dots button:focus-visible,
.engine-card__open:focus-visible,
.engine-card__track:focus-visible,
.engine-chapter__close:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 4px;
}

.engine-deck__viewport {
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: clamp(12px, 2vw, 24px) clamp(22px, 3vw, 38px);
  cursor: grab;
  outline: none;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y;
  /* the rail is full-bleed, so whichever card the scroll position leaves
     under the screen edge was being sliced off square. Fade the two edges
     over the same distance as the rail's own inset, so at rest the first
     card is untouched and only a card genuinely mid-cut dissolves. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 5vw, 120px), #000 calc(100% - clamp(28px, 5vw, 120px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(28px, 5vw, 120px), #000 calc(100% - clamp(28px, 5vw, 120px)), transparent 100%);
}

.engine-deck__viewport::-webkit-scrollbar { display: none; }
.engine-deck__viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.engine-deck__rail {
  display: flex;
  width: max-content;
  gap: clamp(14px, 2vw, 28px);
  padding-inline: max(5vw, calc((100vw - 1440px) / 2));
  perspective: 1300px;
}

.engine-card {
  position: relative;
  flex: 0 0 clamp(330px, 67vw, 980px);
  min-height: clamp(500px, 64vw, 720px);
  overflow: hidden;
  border: 1px solid rgba(237, 239, 242, .13);
  background: #0c1118;
  box-shadow: 0 36px 100px rgba(0, 0, 0, .42);
  opacity: .5;
  scroll-snap-align: center;
  transform: scale(.925) rotateY(-2deg);
  transform-origin: center;
  transition: opacity 420ms ease, transform 560ms cubic-bezier(.2, .76, .2, 1), border-color 420ms ease;
}

.engine-card.is-active {
  z-index: 2;
  border-color: rgba(237, 239, 242, .3);
  opacity: 1;
  transform: scale(1) rotateY(0);
}

.engine-card--cover {
  padding: clamp(24px, 4vw, 58px);
  background:
    linear-gradient(112deg, rgba(237, 239, 242, .025), transparent 36%),
    radial-gradient(ellipse 38% 26% at 78% 22%, rgba(var(--engine-red), .2), transparent 74%),
    linear-gradient(145deg, #090c11, #111018 58%, #0b1017);
}

.engine-card--cover::before,
.engine-card--cover::after {
  position: absolute;
  right: -12%;
  width: 72%;
  aspect-ratio: 2.1;
  border: 1px solid rgba(237, 239, 242, .14);
  border-radius: 50%;
  content: '';
  pointer-events: none;
  transform: rotate(-17deg);
}

.engine-card--cover::before { top: 5%; box-shadow: inset 0 0 60px rgba(var(--engine-red), .05); }
.engine-card--cover::after { bottom: -12%; border-color: rgba(var(--engine-blue), .18); }

.engine-card__meta,
.engine-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(8px, .72vw, 10px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.engine-card__cover-copy {
  position: absolute;
  z-index: 1;
  right: clamp(24px, 4vw, 58px);
  bottom: clamp(76px, 9vw, 120px);
  left: clamp(24px, 4vw, 58px);
}

.engine-card__cover-copy p {
  max-width: 54ch;
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(8px, .78vw, 11px);
  letter-spacing: .08em;
  line-height: 1.6;
  text-transform: uppercase;
}

.engine-card__cover-copy h3 {
  margin: 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(58px, 7vw, 108px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .9;
  text-transform: uppercase;
}

.engine-card__footer {
  position: absolute;
  right: clamp(24px, 4vw, 58px);
  bottom: clamp(24px, 3vw, 42px);
  left: clamp(24px, 4vw, 58px);
}

.engine-card--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-content: space-between;
  padding: clamp(28px, 5vw, 68px);
  background:
    radial-gradient(ellipse at 22% 34%, rgba(var(--engine-red), .1), transparent 36%),
    radial-gradient(ellipse at 82% 70%, rgba(var(--engine-blue), .12), transparent 40%),
    #0b1017;
}

.engine-card__index {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.engine-card__split-copy { align-self: end; }

.engine-card__split-copy h3 {
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .98;
}

.engine-card__split-copy h3 strong { display: block; color: var(--paper); font-weight: 850; }

.engine-card__split-copy > p {
  margin: 2rem 0 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(9px, .85vw, 12px);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.engine-card__split-map {
  display: grid;
  align-self: end;
  border-top: 1px solid var(--edge);
}

.engine-card__track {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: .5rem 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--edge);
  color: inherit;
  text-decoration: none;
  transition: border-color 220ms ease, background 220ms ease;
}

.engine-card__track:hover,
.engine-card__track:focus-visible {
  border-color: rgba(237, 239, 242, .38);
  background: linear-gradient(90deg, rgba(237, 239, 242, .045), transparent);
}

.engine-card__split-map span {
  grid-row: 1 / 3;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
}

.engine-card__split-map strong {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
}

.engine-card__split-map p {
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 300;
  line-height: 1.5;
}

.engine-card__track em {
  grid-column: 2;
  margin-top: .45rem;
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  font-style: normal;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.engine-card--problem { background: #0a0e14; }

.engine-card__open {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.engine-card__image,
.engine-card__shade {
  position: absolute;
  inset: 0;
}

.engine-card__work-preview {
  position: absolute;
  top: 12%;
  right: 3%;
  bottom: 12%;
  display: grid;
  width: 61%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 18px);
  align-items: center;
  padding: clamp(8px, 1vw, 14px);
  perspective: 1200px;
  transform: rotate(2deg);
}

.engine-card__work-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  min-height: 0;
  object-fit: contain;
  border: 1px solid rgba(237, 239, 242, .2);
  border-radius: clamp(8px, 1.1vw, 16px);
  background: #08090c;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .45);
  filter: saturate(.9) brightness(.78) contrast(1.05);
  transform: translateY(2%) rotateY(-4deg);
  transition: filter 520ms ease, transform 700ms cubic-bezier(.2, .76, .2, 1);
}

.engine-card__work-preview img:nth-child(2),
.engine-card__work-preview img:nth-child(4) { transform: translateY(9%) rotateY(-4deg); }

.engine-card__work-note {
  position: absolute;
  z-index: 2;
  top: clamp(26px, 4vw, 56px);
  right: clamp(26px, 4vw, 58px);
  color: rgba(237, 239, 242, .72);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.engine-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) brightness(.55) contrast(1.08);
  transform: scale(1.035);
  transition: filter 600ms ease, transform 800ms cubic-bezier(.2, .76, .2, 1);
}

.engine-card--system .engine-card__image img { object-position: center 82%; }

.engine-card--system .engine-card__image {
  inset: 7% 4%;
  border: 1px solid rgba(237, 239, 242, .14);
  border-radius: clamp(10px, 1.4vw, 20px);
  background: #050914;
}

.engine-card--system .engine-card__image img {
  object-fit: contain;
  object-position: center;
}

.engine-card__shade {
  background:
    linear-gradient(90deg, rgba(3, 5, 8, .94) 0%, rgba(3, 5, 8, .62) 48%, rgba(3, 5, 8, .14) 100%),
    linear-gradient(180deg, transparent 50%, rgba(3, 5, 8, .9));
}

.engine-card--marketing .engine-card__shade {
  background:
    linear-gradient(90deg, rgba(3, 5, 8, .98) 0%, rgba(3, 5, 8, .9) 37%, rgba(3, 5, 8, .18) 72%, rgba(3, 5, 8, .38) 100%),
    linear-gradient(180deg, rgba(3, 5, 8, .08), rgba(3, 5, 8, .82));
  box-shadow: inset 4px 0 0 rgba(var(--engine-red), .74);
}
.engine-card--system .engine-card__shade { box-shadow: inset 4px 0 0 rgba(var(--engine-blue), .78); }

.engine-card__problem-copy {
  position: absolute;
  z-index: 2;
  right: clamp(26px, 4vw, 58px);
  bottom: clamp(32px, 5vw, 70px);
  left: clamp(26px, 4vw, 58px);
}

.engine-card--marketing .engine-card__problem-copy { right: 45%; }

.engine-card__problem-copy small {
  display: block;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.engine-card__problem-copy strong {
  display: block;
  max-width: 13ch;
  margin-top: 1rem;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 850;
  letter-spacing: -.055em;
  line-height: 1;
  text-wrap: balance;
}

.engine-card__cta {
  display: flex;
  width: min(100%, 220px);
  margin-top: clamp(2rem, 5vw, 4.5rem);
  padding-block: .9rem;
  justify-content: space-between;
  border-block: 1px solid rgba(237, 239, 242, .28);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.engine-card__cta b { font-size: 14px; font-weight: 400; transition: transform 240ms ease; }

.engine-card__open:hover .engine-card__image img,
.engine-card__open:focus-visible .engine-card__image img {
  filter: saturate(.95) brightness(.72) contrast(1.04);
  transform: scale(1);
}

.engine-card__open:hover .engine-card__work-preview img,
.engine-card__open:focus-visible .engine-card__work-preview img {
  filter: saturate(1.04) brightness(.94) contrast(1.02);
  transform: translateY(0) rotateY(0);
}

.engine-card__open:hover .engine-card__work-preview img:nth-child(2),
.engine-card__open:hover .engine-card__work-preview img:nth-child(4),
.engine-card__open:focus-visible .engine-card__work-preview img:nth-child(2),
.engine-card__open:focus-visible .engine-card__work-preview img:nth-child(4) { transform: translateY(4%) rotateY(0); }

.engine-card__open:hover .engine-card__cta b,
.engine-card__open:focus-visible .engine-card__cta b { transform: translate(3px, -3px); }

.engine-deck__dots {
  display: flex;
  gap: .65rem;
  margin-top: 1.2rem;
  justify-content: center;
}

.engine-deck__dots button {
  width: 34px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(237, 239, 242, .16);
  transition: width 260ms ease, background 260ms ease;
}

.engine-deck__dots button.is-active { width: 64px; background: var(--paper); }

/* Focused chapters */

.portfolio-home.engine-chapter-open { overflow: hidden; }

.engine-chapter {
  --engine-red: 207, 65, 70;
  --engine-blue: 82, 137, 255;
  position: fixed;
  z-index: 120;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #07090d;
  color: var(--paper);
  display: none;
}

.engine-chapter:target { display: block; animation: engineChapterIn 520ms cubic-bezier(.2, .76, .2, 1) both; }

.engine-chapter--marketing {
  background:
    radial-gradient(ellipse 46% 22% at 12% 8%, rgba(var(--engine-red), .14), transparent 72%),
    radial-gradient(ellipse 34% 20% at 86% 72%, rgba(var(--engine-blue), .07), transparent 74%),
    #080a0e;
}

.engine-chapter--system {
  background:
    radial-gradient(ellipse 48% 24% at 88% 8%, rgba(var(--engine-blue), .14), transparent 74%),
    radial-gradient(ellipse 36% 22% at 12% 78%, rgba(var(--engine-red), .07), transparent 76%),
    #070a10;
}

.engine-chapter__close {
  position: fixed;
  z-index: 20;
  top: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 38px);
  display: inline-flex;
  gap: .8rem;
  align-items: center;
  padding: .75rem 1rem;
  border: 1px solid rgba(237, 239, 242, .22);
  border-radius: 999px;
  background: rgba(5, 8, 12, .78);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.engine-chapter__close span { font-size: 18px; line-height: .7; }

.engine-chapter__scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(237, 239, 242, .24) transparent;
}

.engine-chapter__scroll > * {
  width: min(88vw, 1380px);
  margin-inline: auto;
  box-sizing: border-box;
}

.engine-chapter__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(270px, .55fr);
  gap: clamp(3rem, 8vw, 10rem);
  align-items: end;
  min-height: min(820px, 94svh);
  padding-block: clamp(110px, 15vw, 210px) clamp(76px, 10vw, 140px);
  border-bottom: 1px solid var(--edge);
}

.engine-chapter__hero h3 {
  max-width: 14ch;
  margin: 1.4rem 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(44px, 5.8vw, 82px);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

.engine-chapter__hero h3 strong { font-weight: 880; }

.engine-chapter__hero > p {
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 300;
  line-height: 1.72;
}

.engine-chapter__hero > p strong { color: var(--paper); font-weight: 650; }

.engine-solution-results h4 {
  margin: 1.6rem 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 780;
  letter-spacing: -.045em;
  line-height: 1.06;
}

.engine-solution-results { padding-block: clamp(100px, 14vw, 200px); }

.engine-solution-results__intro {
  display: grid;
  grid-template-columns: minmax(120px, .28fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}

.engine-solution-results__intro h4 { max-width: 20ch; margin-top: 0; }

.engine-solution-results dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(54px, 8vw, 110px) 0 0;
  border-block: 1px solid var(--edge);
}

.engine-solution-results dl > div {
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
  border-left: 1px solid var(--edge);
}

.engine-solution-results dl > div:first-child { padding-left: 0; border-left: 0; }

.engine-solution-results dt {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(30px, 3.8vw, 56px);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.055em;
  line-height: .9;
  white-space: nowrap;
}

.engine-solution-results dd {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.engine-solution-results > p {
  max-width: 58ch;
  margin: clamp(50px, 7vw, 90px) 0 0 auto;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.12;
}

.engine-solution-results > small {
  display: block;
  max-width: 86ch;
  margin: 2.4rem 0 0 auto;
  padding-left: 1rem;
  border-left: 1px solid rgba(var(--engine-red), .52);
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.6;
}

.engine-chapter__proof > span {
  display: block;
  margin-top: 1.3rem;
  color: rgba(var(--engine-blue), .82);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.engine-chapter__proof {
  display: grid;
  grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  padding-block: clamp(100px, 15vw, 210px);
}

.engine-chapter__proof > span { margin-top: .5rem; color: var(--muted); }

.engine-chapter__proof p {
  max-width: 23ch;
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(30px, 4.5vw, 64px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1.04;
}

.engine-chapter__proof strong { color: var(--paper); font-weight: 850; }

/* Engine Court — SFI-format content reel + interactive product story */

.engine-card__cover-copy h3 { font-size: clamp(52px, 6.2vw, 88px); }
.engine-card__problem-copy strong { font-size: clamp(32px, 3.8vw, 52px); }
.engine-chapter__hero h3 { font-size: clamp(40px, 5vw, 74px); }

.engine-content-story { border-top: 0; }











































/* Engine Court profile — editorial phone presentation */






























.engine-content-work {
  --work-card: clamp(190px, 18vw, 270px);
}

.engine-content-work .work-carousel {
  background:
    linear-gradient(90deg, rgba(34, 44, 57, .96), transparent 10% 90%, rgba(34, 44, 57, .96)),
    radial-gradient(ellipse at 48% 42%, rgba(var(--engine-red), .2), transparent 42%),
    radial-gradient(ellipse at 74% 74%, rgba(var(--engine-blue), .16), transparent 30%),
    linear-gradient(180deg, rgba(47, 48, 66, .74), rgba(42, 37, 54, .84));
}

.engine-content-work .work-frame {
  aspect-ratio: 4 / 5;
  background: #243849;
}

.engine-content-work .work-frame img {
  object-fit: contain;
  object-position: center;
}

.engine-content-work .work-caption { min-height: 6.4rem; }
.engine-content-work .work-caption p { max-width: 28ch; }

.engine-product-reveal__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .55fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: end;
}

.engine-product-reveal__head h4,
.engine-workflow-problem__copy h4 {
  margin: 1.2rem 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 320;
  letter-spacing: -.052em;
  line-height: .98;
}

.engine-product-reveal__head > div:last-child > p,
.engine-workflow-problem__copy > p:last-child {
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300;
  line-height: 1.68;
}

.engine-workflow-problem {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  min-height: min(880px, 94svh);
  padding-block: clamp(90px, 12vw, 170px);
  border-bottom: 1px solid var(--edge);
}

.engine-workflow-problem__copy h4 { font-size: clamp(38px, 5vw, 76px); }
.engine-workflow-problem__copy h4 strong { font-weight: 870; }
.engine-workflow-problem__copy > p:last-child { max-width: 37ch; margin-top: 2rem; }

.engine-fragment-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 22px);
  padding: clamp(18px, 3vw, 42px);
  border: 1px solid rgba(237, 239, 242, .1);
  background:
    linear-gradient(135deg, rgba(237, 239, 242, .025), transparent 46%),
    rgba(3, 7, 13, .62);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .38);
}

.engine-fragment-map::after {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 32%;
  height: 1px;
  background: rgba(var(--engine-blue), .65);
  box-shadow: 0 0 26px rgba(var(--engine-blue), .55);
  content: '';
  transform: translate(-50%, -50%) rotate(-36deg);
}

.engine-fragment-map div {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: clamp(150px, 15vw, 220px);
  padding: clamp(18px, 2vw, 30px);
  align-content: space-between;
  border: 1px solid rgba(237, 239, 242, .13);
  background: rgba(7, 10, 16, .92);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
}

.engine-fragment-map div:nth-child(1) { transform: rotate(-2deg) translateY(6px); }
.engine-fragment-map div:nth-child(2) { transform: rotate(1.5deg) translateY(-8px); }
.engine-fragment-map div:nth-child(3) { transform: rotate(1deg) translateY(10px); }
.engine-fragment-map div:nth-child(4) { transform: rotate(-1.5deg) translateY(-4px); }

.engine-fragment-map span,
.engine-fragment-map small {
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.engine-fragment-map strong {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(19px, 2vw, 30px);
  font-weight: 650;
}

.engine-workflow-problem__reveal {
  grid-column: 1 / -1;
  display: flex;
  width: min(100%, 350px);
  margin: 0 auto;
  padding: 1.1rem 0;
  justify-content: space-between;
  border-block: 1px solid rgba(var(--engine-blue), .42);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}

.engine-workflow-problem__reveal span { font-size: 14px; transition: transform 220ms ease; }
.engine-workflow-problem__reveal:hover span { transform: translateY(4px); }

.engine-product-reveal {
  padding-block: clamp(94px, 12vw, 170px);
  scroll-margin-top: 0;
  border-bottom: 1px solid var(--edge);
}

.engine-product-reveal__head h4 strong { font-weight: 880; }

.engine-product-reveal__head a {
  display: flex;
  margin-top: 1.8rem;
  padding-block: .9rem;
  justify-content: space-between;
  border-block: 1px solid rgba(var(--engine-blue), .38);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.engine-product-demo {
  display: grid;
  grid-template-columns: minmax(210px, .28fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(54px, 8vw, 110px);
  align-items: stretch;
}

.engine-product-steps {
  display: grid;
  align-content: stretch;
  border-block: 1px solid var(--edge);
}

.engine-product-steps button {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: .35rem .75rem;
  min-width: 0;
  padding: clamp(16px, 2vw, 26px) .75rem;
  border: 0;
  border-bottom: 1px solid var(--edge);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: color 240ms ease, background 240ms ease, padding-left 240ms ease;
}

.engine-product-steps button:last-child { border-bottom: 0; }
.engine-product-steps button::before { position: absolute; inset: 0 auto 0 0; width: 2px; background: rgba(var(--engine-blue), .88); content: ''; transform: scaleY(0); transition: transform 260ms ease; }
.engine-product-steps button:hover,
.engine-product-steps button:focus-visible,
.engine-product-steps button.is-active { padding-left: 1.2rem; background: rgba(var(--engine-blue), .07); color: var(--paper); }
.engine-product-steps button.is-active::before { transform: scaleY(1); }

.engine-product-steps span,
.engine-product-steps small {
  color: inherit;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.engine-product-steps span { grid-row: 1 / 3; opacity: .65; }

.engine-product-steps strong {
  color: inherit;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 620;
}

.engine-product-steps small { opacity: .55; line-height: 1.45; }

.engine-product-frame {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(237, 239, 242, .18);
  border-radius: clamp(10px, 1.2vw, 18px);
  background: #040710;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .5), 0 0 70px rgba(var(--engine-blue), .07);
}

.engine-product-frame::after {
  position: absolute;
  z-index: 4;
  inset: 33px -20% 0;
  background: linear-gradient(100deg, transparent 0%, rgba(114, 157, 255, .28) 45%, rgba(237, 239, 242, .76) 50%, rgba(114, 157, 255, .2) 55%, transparent 100%);
  content: '';
  opacity: 0;
  pointer-events: none;
  transform: translateX(-80%);
}

.engine-product-frame.is-switching::after { animation: engineProductScan 520ms cubic-bezier(.2, .76, .2, 1); }

.engine-product-frame__top {
  display: flex;
  gap: 7px;
  height: 34px;
  padding-inline: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(237, 239, 242, .1);
  background: #090d17;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: .08em;
}

.engine-product-frame__top > span { width: 6px; height: 6px; border-radius: 50%; background: rgba(237, 239, 242, .22); }
.engine-product-frame__top b { margin-left: .55rem; font-weight: 400; }
.engine-product-frame__top em { margin-left: auto; font-style: normal; }
.engine-product-frame__top i { color: var(--paper); font-style: normal; }

.engine-product-screen {
  position: relative;
  display: grid;
  min-height: clamp(480px, 56vw, 760px);
  place-items: stretch;
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--engine-blue), .1), transparent 46%),
    #040710;
}

.engine-product-panel {
  position: absolute;
  inset: 0;
  display: grid;
  margin: 0;
  padding: clamp(14px, 2vw, 28px);
  grid-template-rows: minmax(0, 1fr) auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.985);
}

.engine-product-panel.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  animation: engineProductPanelIn 520ms cubic-bezier(.2, .76, .2, 1) both;
}

.engine-product-panel img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
  filter: saturate(.92) contrast(1.03);
}

.engine-product-panel figcaption {
  display: grid;
  grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(237, 239, 242, .1);
  font-family: 'Archivo', Arial, sans-serif;
}

.engine-product-panel figcaption strong { color: var(--paper); font-size: clamp(14px, 1.25vw, 19px); font-weight: 620; }
.engine-product-panel figcaption span { color: var(--muted); font-size: clamp(12px, .95vw, 15px); font-weight: 300; line-height: 1.5; }

@keyframes engineProductScan {
  0% { opacity: 0; transform: translateX(-80%); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(80%); }
}

@keyframes engineProductPanelIn {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(14px) scale(.985); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes engineChapterIn {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .engine-card { flex-basis: min(82vw, 760px); }
  .engine-card--split { grid-template-columns: minmax(0, 1fr); }
  .engine-card__split-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .engine-chapter__hero,
  .engine-chapter__proof { grid-template-columns: minmax(0, 1fr); }
  .engine-chapter__hero { align-items: start; min-height: auto; }
  .engine-solution-results__intro { grid-template-columns: minmax(0, 1fr); }
  .engine-solution-results dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engine-solution-results dl > div:nth-child(3) { padding-left: 0; border-top: 1px solid var(--edge); border-left: 0; }
  .engine-solution-results dl > div:nth-child(4) { border-top: 1px solid var(--edge); }
  .engine-product-reveal__head,
  .engine-workflow-problem { grid-template-columns: minmax(0, 1fr); }
  .engine-workflow-problem { min-height: auto; }
  .engine-product-demo { grid-template-columns: minmax(0, 1fr); }
  .engine-product-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .engine-product-steps button { border-right: 1px solid var(--edge); border-bottom: 0; }
  .engine-product-screen { min-height: min(70vw, 680px); }
}

@media (max-width: 560px) {
  .engine-deck { --engine-page: calc(100vw - 36px); padding-bottom: 92px; }
  .engine-deck__bar span:nth-child(2) { display: none; }
  .engine-deck__head { display: block; padding-block: 66px 34px; }
  .engine-deck__head h2 { font-size: clamp(48px, 14vw, 72px); line-height: .94; }
  .engine-deck__controls { margin-top: 2rem; justify-content: flex-end; }
  .engine-card { flex-basis: calc(100vw - 48px); min-height: min(660px, 76svh); }
  .engine-deck__rail { padding-inline: 24px; }
  .engine-card--cover,
  .engine-card--split { padding: 24px; }
  .engine-card__cover-copy { right: 24px; bottom: 82px; left: 24px; }
  .engine-card__cover-copy h3 { font-size: clamp(52px, 16vw, 72px); line-height: .92; }
  .engine-card__footer { right: 24px; bottom: 24px; left: 24px; }
  .engine-card__footer span:last-child { display: none; }
  .engine-card__split-map { grid-template-columns: minmax(0, 1fr); }
  .engine-card__problem-copy strong { font-size: clamp(32px, 9vw, 44px); line-height: 1.04; }
  .engine-card__work-preview { top: 10%; right: -16%; bottom: 22%; width: 78%; grid-template-columns: repeat(2, minmax(0, 1fr)); opacity: .72; }
  .engine-card__work-note { display: none; }
  .engine-card--marketing .engine-card__problem-copy { right: 24px; }
  .engine-card__image img { object-position: center; }
  .engine-card--system .engine-card__image img { object-position: center bottom; }
  .engine-deck__dots button { width: 24px; }
  .engine-deck__dots button.is-active { width: 46px; }
  .engine-chapter__scroll > * { width: calc(100vw - 36px); }
  .engine-chapter__hero { padding-block: 100px 72px; }
  .engine-chapter__hero h3 { font-size: clamp(40px, 10vw, 54px); line-height: 1; }
  .engine-solution-results,
  .engine-chapter__proof { padding-block: 76px; }
  .engine-solution-results dl { grid-template-columns: minmax(0, 1fr); }
  .engine-solution-results dl > div,
  .engine-solution-results dl > div:first-child,
  .engine-solution-results dl > div:nth-child(3) {
    padding-inline: 0;
    border-top: 1px solid var(--edge);
    border-left: 0;
  }
  .engine-solution-results dl > div:first-child { border-top: 0; }
  .engine-workflow-problem,
  .engine-product-reveal { padding-block: 76px; }
  .engine-fragment-map { padding: 10px; }
  .engine-fragment-map div { min-height: 126px; padding: 14px; }
  .engine-product-steps { grid-template-columns: minmax(0, 1fr); margin-right: 0; }
  .engine-product-screen { min-height: min(108vw, 610px); }
  .engine-product-panel { padding: 10px; }
  .engine-product-panel figcaption { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .engine-chapter__proof { gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .engine-card,
  .engine-card.is-active,
  .engine-card__image img,
  .engine-card__open:hover .engine-card__image img,
  .engine-card__work-preview img,
  .engine-card__open:hover .engine-card__work-preview img,
  .engine-chapter:target,
  .engine-product-panel.is-active,
  .engine-product-frame.is-switching::after {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none !important;
  }

  .engine-deck__viewport { scroll-behavior: auto; }
}

/* Reusable profile proof frame */
.profile-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 440px);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: center;
  min-height: min(900px, 92svh);
  padding-block: clamp(76px, 10vw, 150px);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
}

.profile-frame__copy h4 {
  max-width: 10ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 300;
  letter-spacing: -.065em;
  line-height: .92;
}

.profile-frame__copy h4 strong { font-weight: 820; }

.profile-frame__copy > p:last-child {
  max-width: 30ch;
  margin: clamp(1.5rem, 3vw, 2.7rem) 0 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  line-height: 1.6;
}

.profile-frame__device {
  position: relative;
  width: min(100%, 420px);
  /* the frame takes the shape of whatever screenshot goes in it — set
     --shot on the device element so a screenshot from any phone fits
     without object-fit cropping the stats row off the top */
  aspect-ratio: var(--shot, 1179 / 2556);
  justify-self: center;
  overflow: hidden;
  border: 7px solid #20252b;
  border-radius: clamp(38px, 5vw, 58px);
  background: #080b0f;
  box-shadow: 0 44px 110px rgba(0, 0, 0, .62), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 64px rgba(var(--light-cool), .08);
}

.profile-frame__chrome { display: none; }

.profile-frame__screen {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0f14, #05070a);
}

.profile-frame__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

.profile-frame__home {
  position: absolute;
  bottom: 11px;
  left: 50%;
  width: 34%;
  height: 4px;
  border-radius: 999px;
  background: rgba(237, 239, 242, .78);
  transform: translateX(-50%);
}

.profile-frame[data-reveal] .profile-frame__copy,
.profile-frame[data-reveal] .profile-frame__device {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 850ms cubic-bezier(.2, .76, .2, 1);
}

.profile-frame[data-reveal].is-visible .profile-frame__copy,
.profile-frame[data-reveal].is-visible .profile-frame__device {
  opacity: 1;
  transform: none;
}

.profile-frame[data-reveal].is-visible .profile-frame__device { transition-delay: 140ms; }

.work-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: .95rem 0 0;
  overflow: hidden;
  border: 1px solid rgba(237, 239, 242, .13);
  border-radius: 10px;
  background: rgba(237, 239, 242, .13);
}

.work-metrics > div {
  display: flex;
  min-width: 0;
  padding: .65rem .45rem;
  flex-direction: column-reverse;
  background: #090c10;
  text-align: center;
}

.work-metrics dt {
  margin-top: .25rem;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7px;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}

.work-metrics dd {
  margin: 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
}

.work-metrics-note {
  max-width: 66ch;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  padding-inline: 18px;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 900px) {
  .profile-frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .profile-frame__device { width: min(100%, 390px); }
}

@media (max-width: 560px) {
  .engine-chapter__scroll > .profile-frame { width: calc(100vw - 36px); }
  .profile-frame { gap: 3rem; padding-block: 72px; }
  .profile-frame__copy h4 { font-size: clamp(46px, 14vw, 62px); }
  .profile-frame__device { width: min(92vw, 360px); border-width: 5px; border-radius: 40px; }
  .work-metrics-note { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-frame[data-reveal] .profile-frame__copy,
  .profile-frame[data-reveal] .profile-frame__device {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Penduline Baby — case 03 */
.penduline-case {
  --penduline-ink: #172f4b;
  --penduline-deep: #295f91;
  --penduline-blue: #7fcdf2;
  --penduline-sky: #e8e3d7;
  --penduline-paper: #f2efe8;
  --penduline-pink: #da2b89;
  position: relative;
  overflow: hidden;
  padding: 0 clamp(18px, 5vw, 76px);
  /* One paper value, held for the whole case. The single highlight stays
     within a couple of luminance steps so it still reads as one surface. */
  /* the hinges are background layers, not an inset shadow: a shadow with a
     negative spread pulls in horizontally too and leaves pale strips down
     both edges. These ramp full-bleed, so the paper opens out of the dark
     section above and closes back into the dark one below. */
  background:
    linear-gradient(180deg, rgba(11, 11, 12, .40), rgba(11, 11, 12, 0)) top / 100% 96px no-repeat,
    linear-gradient(0deg, rgba(11, 11, 12, .44), rgba(11, 11, 12, 0)) bottom / 100% 128px no-repeat,
    radial-gradient(circle at 12% 6%, rgba(255, 255, 255, .55), transparent 38%),
    var(--penduline-paper);
  color: var(--penduline-ink);
}

.penduline-case::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(23, 47, 75, .11) .7px, transparent .7px);
  background-size: 7px 7px;
  content: '';
  opacity: .15;
  pointer-events: none;
}

.penduline-case > * { position: relative; z-index: 1; }

.penduline-case .case-label { color: rgba(23, 47, 75, .62); }

.penduline-case__bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid rgba(23, 47, 75, .18);
  color: rgba(23, 47, 75, .62);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.penduline-case__bar span:first-child { color: var(--penduline-ink); }

.penduline-hero {
  position: relative;
  display: grid;
  /* the implicit column sizes to max-content otherwise, and PENDULINE's
     min-content then drags the whole hero past the case's clip box. */
  grid-template-columns: minmax(0, 1fr);
  min-height: min(980px, 94svh);
  margin-inline: calc(0px - clamp(18px, 5vw, 76px));
  padding: clamp(70px, 10vw, 150px) clamp(18px, 7vw, 110px) clamp(54px, 7vw, 110px);
  align-content: end;
  overflow: hidden;
  border-bottom: 1px solid rgba(23, 47, 75, .18);
}

.penduline-hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(242, 239, 232, .06), rgba(242, 239, 232, .2) 48%, rgba(242, 239, 232, .98) 86%);
  content: '';
  pointer-events: none;
}

.penduline-hero__worlds {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(9, minmax(150px, 1fr));
  gap: clamp(5px, .6vw, 10px);
  align-items: start;
  padding: clamp(34px, 4vw, 58px) 0 0;
  transform: translateX(-7%) rotate(-3deg) scale(1.08);
  transform-origin: 50% 0;
}

.penduline-hero__worlds img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(34, 91, 132, .16);
}

.penduline-hero__worlds img:nth-child(even) { transform: translateY(12%); }
.penduline-hero__worlds img:nth-child(3n) { transform: translateY(5%); }

.penduline-hero__copy {
  z-index: 2;
  display: flex;
  gap: clamp(1rem, 3vw, 2.7rem);
  align-items: end;
  justify-content: space-between;
}

.penduline-hero__copy h2 {
  margin: .85rem 0 0;
  color: var(--penduline-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(64px, 11vw, 176px);
  font-weight: 820;
  letter-spacing: -.08em;
  line-height: .76;
  text-transform: uppercase;
}

.penduline-hero__copy > p:last-child {
  max-width: 25ch;
  margin: 0 0 .5rem;
  color: rgba(23, 47, 75, .68);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .11em;
  line-height: 1.7;
  text-align: right;
  text-transform: uppercase;
}

.penduline-hero__statement {
  z-index: 2;
  max-width: 52ch;
  margin: clamp(2.5rem, 5vw, 4.8rem) auto 0 0;
  color: rgba(23, 47, 75, .64);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(19px, 2vw, 30px);
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1.35;
  text-align: left;
}

.penduline-hero__statement strong { color: var(--penduline-ink); font-weight: 650; }

/* the statement names the scale; this carries how the storytelling was
   actually run, month by month */
.penduline-hero__note {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin: clamp(1.1rem, 2vw, 1.7rem) auto 0 0;
  color: rgba(23, 47, 75, .58);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 300;
  letter-spacing: -.012em;
  line-height: 1.62;
}

.penduline-role {
  display: grid;
  grid-template-columns: minmax(120px, .25fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: start;
  padding-block: clamp(48px, 7vw, 94px);
  border-bottom: 1px solid rgba(23, 47, 75, .18);
}

.penduline-role span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.penduline-role p {
  max-width: 70ch;
  margin: 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 350;
  letter-spacing: -.025em;
  line-height: 1.45;
}

.penduline-situation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  padding-block: clamp(90px, 13vw, 190px);
}

.penduline-situation__copy h3,
.penduline-decision h3,
.penduline-proof-campaign h3,
.penduline-work__head h3,
.penduline-films h3,
.penduline-result h3 {
  margin: clamp(1.3rem, 3vw, 2.5rem) 0 0;
  color: var(--penduline-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(42px, 5.6vw, 88px);
  font-weight: 320;
  letter-spacing: -.06em;
  line-height: .98;
}

.penduline-situation__copy h3 { max-width: 12ch; }

.penduline-situation__copy > p:not(.case-label) {
  max-width: 58ch;
  margin: 1.4rem 0 0;
  color: rgba(23, 47, 75, .72);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 320;
  line-height: 1.65;
}

.penduline-situation__visual { margin: 0; }

.penduline-situation__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(23, 47, 75, .18);
  border-radius: clamp(24px, 3vw, 42px);
  box-shadow: 0 38px 90px rgba(34, 91, 132, .18);
}

.penduline-situation__visual figcaption {
  max-width: 48ch;
  margin-top: 1rem;
  color: rgba(23, 47, 75, .64);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1.6;
}

.penduline-decision {
  padding-block: clamp(88px, 12vw, 170px);
  border-top: 1px solid rgba(23, 47, 75, .18);
  border-bottom: 1px solid rgba(23, 47, 75, .18);
}

.penduline-decision header { max-width: 850px; }
.penduline-decision h3 strong,
.penduline-work__head h3 strong,
.penduline-result h3 strong { font-weight: 760; }

.penduline-decision ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(3rem, 7vw, 7rem) 0 0;
  padding: 1px;
  list-style: none;
  background: rgba(23, 47, 75, .16);
}

.penduline-decision li {
  min-height: 260px;
  padding: clamp(22px, 3vw, 38px);
  background: rgba(248, 252, 255, .68);
}

.penduline-decision li span,
.penduline-timeline article > span {
  color: rgba(23, 47, 75, .55);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.penduline-decision li strong {
  display: block;
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  letter-spacing: -.035em;
  line-height: 1.1;
}

.penduline-decision li p {
  margin: .8rem 0 0;
  color: rgba(23, 47, 75, .68);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 14px;
  font-weight: 320;
  line-height: 1.55;
}

.penduline-proof-campaign {
  display: grid;
  grid-template-columns: minmax(320px, .86fr) minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  margin-inline: calc(0px - clamp(18px, 5vw, 76px));
  padding: clamp(70px, 9vw, 140px) clamp(18px, 7vw, 110px);
  border-block: 1px solid rgba(23, 47, 75, .16);
}

.penduline-proof-campaign figure { margin: 0; }
.penduline-proof-campaign figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(26px, 4vw, 54px);
  box-shadow: 0 50px 110px rgba(23, 47, 75, .18);
  transform: rotate(-2deg);
}

.penduline-proof-campaign h3 { max-width: 12ch; }
.penduline-proof-campaign h3 strong { font-weight: 780; }

.penduline-proof-campaign div > p:not(.case-label) {
  max-width: 56ch;
  margin: 1.4rem 0 0;
  color: rgba(23, 47, 75, .72);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 320;
  line-height: 1.65;
}

.penduline-work { padding-block: clamp(100px, 14vw, 200px); }

.penduline-work__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}

.penduline-work__head dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(23, 47, 75, .18);
  border-left: 1px solid rgba(23, 47, 75, .18);
}

.penduline-work__head dl div { padding: 1.1rem; border-right: 1px solid rgba(23, 47, 75, .18); border-bottom: 1px solid rgba(23, 47, 75, .18); }
.penduline-work__head dt { font-family: 'Archivo', Arial, sans-serif; font-size: clamp(28px, 3vw, 48px); font-weight: 760; letter-spacing: -.05em; }
.penduline-work__head dd { margin: .35rem 0 0; color: rgba(23, 47, 75, .58); font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .08em; line-height: 1.45; text-transform: uppercase; }

.penduline-timeline {
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  width: 100vw;
  margin: clamp(4rem, 8vw, 8rem) 0 0 calc((100% - 100vw) / 2);
  padding: 0 clamp(18px, 5vw, 76px) 2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 47, 75, .28) transparent;
}

.penduline-timeline article {
  flex: 0 0 clamp(230px, 24vw, 360px);
  margin: 0;
  scroll-snap-align: center;
}

/* the rail reads as one line of work; the old stagger made the eye climb. */
.penduline-timeline article { padding-top: 0; }

.penduline-timeline img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow: 0 24px 60px rgba(34, 91, 132, .16);
}

.penduline-timeline article > span { display: block; margin-top: 1.2rem; }
.penduline-timeline article > strong { display: block; margin-top: .55rem; font-family: 'Archivo', Arial, sans-serif; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.035em; }

.penduline-films {
  margin-inline: calc(0px - clamp(18px, 5vw, 76px));
  padding: clamp(90px, 12vw, 170px) clamp(18px, 5vw, 76px);
  border-top: 1px solid rgba(23, 47, 75, .16);
  color: var(--penduline-ink);
}

.penduline-films .case-label { color: rgba(23, 47, 75, .58); }
.penduline-films h3 { color: var(--penduline-ink); }

.penduline-video-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 24px);
  margin-top: clamp(3rem, 6vw, 6rem);
}

.penduline-video-grid--films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.penduline-video-grid--reels { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }

.penduline-video-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: clamp(18px, 2vw, 30px);
  background: #173552;
  box-shadow: 0 30px 80px rgba(4, 21, 37, .28);
}

.penduline-video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #173552;
}

.penduline-video-card button {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  min-width: 64px;
  min-height: 34px;
  padding: .55rem .8rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(15, 42, 67, .72);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.penduline-video-card figcaption {
  padding: .85rem 1rem 1rem;
  color: rgba(247, 251, 255, .72);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.penduline-reels-label {
  margin: clamp(5rem, 9vw, 9rem) 0 0;
  color: rgba(247, 251, 255, .68);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.penduline-result { padding-block: clamp(100px, 14vw, 200px); }

.penduline-result header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}

.penduline-result header > p:last-child {
  margin: 0;
  color: rgba(23, 47, 75, .68);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 320;
  line-height: 1.65;
}

.penduline-closing {
  display: grid;
  grid-template-columns: minmax(120px, .25fr) minmax(0, 1fr);
  gap: clamp(2rem, 8vw, 9rem);
  padding-block: clamp(90px, 12vw, 170px);
  border-top: 1px solid rgba(23, 47, 75, .18);
}

.penduline-closing > p:last-child {
  max-width: 48ch;
  margin: 0;
  color: rgba(23, 47, 75, .7);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(24px, 3.5vw, 54px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1.15;
}

.penduline-closing strong { color: var(--penduline-ink); font-weight: 680; }

.penduline-case[data-reveal] .penduline-hero__worlds img { opacity: 0; transform: translateY(60px) rotate(3deg); }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img { opacity: 1; transform: none; transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .76, .2, 1); }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(even) { transform: translateY(12%); }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(3n) { transform: translateY(5%); }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(2) { transition-delay: 70ms; }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(3) { transition-delay: 140ms; }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(4) { transition-delay: 210ms; }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(5) { transition-delay: 280ms; }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(6) { transition-delay: 350ms; }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(7) { transition-delay: 420ms; }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(8) { transition-delay: 490ms; }
.penduline-case[data-reveal].is-visible .penduline-hero__worlds img:nth-child(9) { transition-delay: 560ms; }

@media (max-width: 1000px) {
  .penduline-hero__worlds { grid-template-columns: repeat(5, minmax(170px, 1fr)); width: 145%; }
  .penduline-situation,
  .penduline-proof-campaign,
  .penduline-work__head,
  .penduline-result header { grid-template-columns: minmax(0, 1fr); }
  .penduline-situation__visual { width: min(100%, 620px); }
  .penduline-decision ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .penduline-video-grid--films,
  .penduline-video-grid--reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .penduline-case__bar { grid-template-columns: 1fr auto; min-height: 60px; }
  .penduline-case__bar span:nth-child(2) { display: none; }
  .penduline-hero { min-height: 800px; align-content: end; }
  .penduline-hero__worlds { grid-template-columns: repeat(4, 150px); width: 190%; transform: translateX(-19%) rotate(-3deg) scale(1.03); }
  .penduline-hero__copy { display: block; }
  .penduline-hero__copy h2 { font-size: clamp(54px, 16.5vw, 104px); line-height: .78; }
  .penduline-hero__copy > p:last-child { margin-top: 1.5rem; text-align: left; }
  .penduline-hero__statement { margin-left: 0; text-align: left; }
  .penduline-role,
  .penduline-closing { grid-template-columns: minmax(0, 1fr); }
  .penduline-decision ol { grid-template-columns: minmax(0, 1fr); }
  .penduline-decision li { min-height: 220px; }
  .penduline-work__head dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .penduline-video-grid--films,
  .penduline-video-grid--reels { grid-template-columns: minmax(0, 1fr); }
  .penduline-work__head dl { grid-template-columns: 1fr 1fr; }
  .penduline-work__head dt { font-size: 30px; }
  .penduline-case { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .penduline-case[data-reveal] .penduline-hero__worlds img,
  .penduline-case[data-reveal].is-visible .penduline-hero__worlds img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ================================================================
   WORK MAP · THREE SIDES OF THE BRIEF
   ================================================================ */

.work-map {
  width: min(100%, 1600px);
  min-height: 100vh;
  padding: clamp(110px, 14vw, 210px) clamp(18px, 6vw, 96px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 44% 34% at 12% 18%, rgba(143, 198, 210, .12), transparent 72%),
    radial-gradient(ellipse 34% 42% at 92% 58%, rgba(136, 36, 55, .12), transparent 74%),
    linear-gradient(145deg, #11161a 0%, #090b0e 52%, #171014 100%);
  border-block: 1px solid rgba(237, 239, 242, .1);
}

.work-map::before {
  position: absolute;
  inset: -30% -10%;
  background: linear-gradient(112deg, transparent 28%, rgba(205, 231, 237, .05) 45%, transparent 58%);
  content: '';
  pointer-events: none;
  transform: translateX(-42%);
  animation: workMapLight 12s ease-in-out infinite alternate;
}

.work-map__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  align-items: end;
  gap: 2rem 5vw;
  margin-bottom: clamp(52px, 6vw, 92px);
}

.work-map__head .case-label { grid-column: 1 / -1; color: rgba(237, 239, 242, .58); }

.work-map__head h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(54px, 8.7vw, 142px);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .81;
}

.work-map__head > p:not(.case-label) {
  max-width: 34ch;
  margin: 0;
  color: rgba(237, 239, 242, .66);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 23px);
  font-weight: 300;
  line-height: 1.55;
}

.work-map__head > span {
  position: absolute;
  right: 0;
  bottom: -2.4rem;
  color: rgba(237, 239, 242, .42);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.work-map__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(237, 239, 242, .15);
  border-left: 1px solid rgba(237, 239, 242, .15);
}

.work-door {
  position: relative;
  display: grid;
  min-height: clamp(420px, 47vw, 670px);
  overflow: hidden;
  border-right: 1px solid rgba(237, 239, 242, .15);
  border-bottom: 1px solid rgba(237, 239, 242, .15);
  color: var(--paper);
  isolation: isolate;
}

.work-door--product { grid-column: 1 / -1; min-height: clamp(420px, 37vw, 600px); }

.work-door::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 10, .04), rgba(6, 8, 10, .9));
  content: '';
  transition: background 600ms ease;
}

.work-door__index,
.work-door__tag {
  position: absolute;
  z-index: 4;
  top: clamp(18px, 2.2vw, 34px);
  color: rgba(237, 239, 242, .74);
  font-family: var(--home-mono);
  font-size: 11px;
  letter-spacing: .16em;
}

.work-door__index { left: clamp(18px, 2.2vw, 34px); }
.work-door__tag { right: clamp(18px, 2.2vw, 34px); }

.work-door__visual { position: absolute; z-index: 1; inset: 0; }

.work-door__visual img {
  position: absolute;
  width: 56%;
  height: 84%;
  object-fit: cover;
  filter: saturate(.72) brightness(.68) contrast(1.08);
  transition: filter 700ms ease, transform 900ms cubic-bezier(.18, .75, .18, 1);
}

.work-door__visual img:first-child { top: 8%; left: 3%; transform: rotate(-4deg) scale(.98); }
.work-door__visual img:nth-child(2) { right: 2%; bottom: 0; transform: rotate(5deg) scale(.95); }
.work-door--product .work-door__visual img { right: -2%; bottom: -7%; width: 72%; height: 98%; object-position: left top; transform: rotate(-2deg) scale(.96); }

.work-door__copy {
  position: relative;
  z-index: 4;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 4vw, 62px);
}

.work-door__copy small,
.work-door__copy em {
  font-family: var(--home-mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.work-door__copy small { color: rgba(237, 239, 242, .58); }

.work-door__copy strong {
  margin-top: 1rem;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(44px, 6.2vw, 98px);
  font-weight: 760;
  letter-spacing: -.065em;
  line-height: .86;
}

.work-door__copy em {
  margin-top: 2rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(237, 239, 242, .35);
  color: rgba(237, 239, 242, .78);
}

.work-door:hover::after,
.work-door:focus-visible::after { background: linear-gradient(180deg, rgba(6, 8, 10, .01), rgba(6, 8, 10, .76)); }
.work-door:hover .work-door__visual img,
.work-door:focus-visible .work-door__visual img { filter: saturate(1) brightness(.9) contrast(1.02); }
.work-door:hover .work-door__visual img:first-child,
.work-door:focus-visible .work-door__visual img:first-child { transform: rotate(-1.5deg) scale(1.04); }
.work-door:hover .work-door__visual img:nth-child(2),
.work-door:focus-visible .work-door__visual img:nth-child(2) { transform: rotate(2deg) scale(1.02); }
.work-door--product:hover .work-door__visual img,
.work-door--product:focus-visible .work-door__visual img { transform: rotate(0) scale(1.01); }

@keyframes workMapLight {
  from { opacity: .4; transform: translateX(-38%) rotate(-2deg); }
  to { opacity: .95; transform: translateX(34%) rotate(3deg); }
}

/* The category panels reuse the site's existing full-screen dialog language. */

.portfolio-home.practice-panel-open,
.portfolio-home.engine-chapter-open { overflow: hidden; }

.practice-panel {
  position: fixed;
  z-index: 70;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 36% at 84% 20%, rgba(136, 36, 55, .14), transparent 74%),
    radial-gradient(ellipse 38% 30% at 12% 82%, rgba(143, 198, 210, .12), transparent 72%),
    #0d1114;
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 420ms ease, transform 620ms cubic-bezier(.18, .78, .2, 1), visibility 420ms;
}

.practice-panel:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.practice-panel__close {
  position: fixed;
  z-index: 3;
  top: clamp(18px, 3vw, 38px);
  right: clamp(18px, 3vw, 44px);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(237, 239, 242, .18);
  border-radius: 999px;
  background: rgba(13, 17, 20, .68);
  color: rgba(237, 239, 242, .72);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.practice-panel__close span { color: var(--paper); font-size: 18px; line-height: .7; }

.practice-panel__scroll {
  height: 100%;
  padding: clamp(90px, 10vw, 150px) clamp(18px, 7vw, 110px);
  overflow-y: auto;
}

.practice-panel__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: end;
  gap: 3rem 6vw;
  min-height: 54vh;
  padding-bottom: clamp(60px, 8vw, 110px);
}

.practice-panel__hero .case-label { grid-column: 1 / -1; }

.practice-panel__hero h2 {
  margin: 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(70px, 12vw, 190px);
  font-weight: 820;
  letter-spacing: -.08em;
  line-height: .78;
}

.practice-panel__hero > p:not(.case-label) {
  max-width: 35ch;
  margin: 0;
  color: rgba(237, 239, 242, .7);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(17px, 1.6vw, 25px);
  font-weight: 300;
  line-height: 1.52;
}

.practice-panel__hero small {
  grid-column: 2;
  color: rgba(237, 239, 242, .43);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .08em;
}

.practice-panel__brands {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 34px;
  border-block: 1px solid rgba(237, 239, 242, .12);
}

.practice-panel__brands span {
  padding: .7rem 1rem;
  border: 1px solid rgba(237, 239, 242, .14);
  border-radius: 999px;
  color: rgba(237, 239, 242, .72);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.practice-panel__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 22px);
  padding-block: clamp(55px, 8vw, 110px);
}

.practice-panel__gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.practice-panel__gallery img:nth-child(2) { transform: translateY(5%); }

.practice-panel__product { margin: 0; padding-block: clamp(50px, 8vw, 110px); }
.practice-panel__product img { width: 100%; border: 1px solid rgba(237, 239, 242, .14); border-radius: 14px; box-shadow: 0 28px 80px rgba(0, 0, 0, .42); }
.practice-panel__product figcaption { margin-top: 1rem; color: rgba(237, 239, 242, .5); font-family: var(--home-mono); font-size: 10px; letter-spacing: .08em; }

.practice-panel__routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(237, 239, 242, .12);
}

.practice-panel__routes a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 110px;
  padding: 1.5rem;
  border-right: 1px solid rgba(237, 239, 242, .12);
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 400;
}

.practice-panel__routes a:hover,
.practice-panel__routes a:focus-visible { background: var(--paper); color: #0d1114; }

/* ================================================================
   CONTACT
   ================================================================ */

.contact-section {
  width: min(100%, 1600px);
  min-height: 90vh;
  padding: clamp(110px, 14vw, 220px) clamp(18px, 7vw, 110px) 30px;
  background:
    radial-gradient(ellipse 46% 38% at 8% 28%, rgba(143, 198, 210, .12), transparent 74%),
    radial-gradient(ellipse 32% 28% at 92% 76%, rgba(136, 36, 55, .1), transparent 75%),
    #0d1013;
  border-top: 1px solid rgba(237, 239, 242, .1);
}

.contact-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
  align-items: end;
  gap: 3rem 6vw;
}

.contact-section__intro .case-label { grid-column: 1 / -1; }

.contact-section__intro h2 {
  max-width: 12ch;
  margin: 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(60px, 10vw, 160px);
  font-weight: 820;
  letter-spacing: -.075em;
  line-height: .82;
}

.contact-section__intro > p:last-child {
  margin: 0;
  color: rgba(237, 239, 242, .66);
  font-size: clamp(17px, 1.6vw, 25px);
  line-height: 1.5;
}

.contact-section__details { margin-top: clamp(70px, 9vw, 130px); font-style: normal; }

.contact-section__details > a,
.contact-section__details > p {
  display: grid;
  grid-template-columns: minmax(110px, .35fr) minmax(0, 1.65fr);
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: clamp(18px, 2vw, 32px) 0;
  border-top: 1px solid rgba(237, 239, 242, .12);
  color: var(--paper);
}

.contact-section__details > :last-child { border-bottom: 1px solid rgba(237, 239, 242, .12); }

.contact-section__details span {
  color: rgba(237, 239, 242, .44);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact-section__details strong {
  overflow-wrap: anywhere;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(20px, 3.2vw, 52px);
  font-weight: 300;
  letter-spacing: -.025em;
}

.contact-section__details > a:hover strong,
.contact-section__details > a:focus-visible strong { color: rgb(var(--light-cool)); }

.contact-section footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(80px, 12vw, 180px);
  color: rgba(237, 239, 242, .4);
  font-family: var(--home-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .work-map__head,
  .practice-panel__hero,
  .contact-section__intro { grid-template-columns: minmax(0, 1fr); }
  .work-map__head > span { position: static; }
  .work-map__grid { grid-template-columns: minmax(0, 1fr); }
  .work-door--product { grid-column: auto; }
  .work-door { min-height: 500px; }
  .work-door__visual img { width: 66%; }
  .work-door--product .work-door__visual img { width: 118%; height: 72%; }
  .practice-panel__hero .case-label,
  .contact-section__intro .case-label,
  .practice-panel__hero small { grid-column: auto; }
  .practice-panel__hero { min-height: 0; padding-top: 50px; }
  .practice-panel__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .practice-panel__gallery img { min-width: 0; }
  .practice-panel__gallery img:nth-child(2) { transform: none; }
  .practice-panel__routes { grid-template-columns: minmax(0, 1fr); }
  .practice-panel__routes a { min-height: 88px; border-right: 0; border-bottom: 1px solid rgba(237, 239, 242, .12); }
  .contact-section__details > a,
  .contact-section__details > p { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .work-map__head h2 { font-size: clamp(48px, 15vw, 62px); line-height: .85; }
  .work-door { min-height: 440px; }
  .work-door__copy strong { font-size: clamp(48px, 15vw, 65px); }
  .practice-panel__scroll { padding-inline: 18px; }
  .practice-panel__hero h2 { font-size: clamp(64px, 20vw, 88px); }
  .contact-section__intro h2 { font-size: clamp(52px, 16vw, 72px); }
  .contact-section footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .work-map::before { animation: none; }
  .work-door__visual img,
  .practice-panel { transition: none; }
}

/* ================================================================
   Brand index — replaces the three work-map doors.
   The section wrapper (.work-map) and its header are unchanged; only
   the grid inside it is new. Group info sits left, the brands right,
   so every group opens the same way down the page.
   ================================================================ */

.work-map__grid.brand-groups {
  display: grid;
  gap: clamp(64px, 7vw, 110px);
  border: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* ================================================================
   THE WALL
   Every brand and every logo on one screen. The three seats used to
   be three stacked cards, each one a screen tall; they are now one
   rail apiece above a shared seven-column module, so the cells line
   up straight down the page. A seat with fewer brands leaves the
   rest of its row empty on purpose - the gap is what shows the
   agency side is seven brands wide and the one I own is two.
   ================================================================ */

.work-map__grid.brand-wall {
  display: grid;
  gap: clamp(34px, 3.4vw, 54px);
  border: 0;
  grid-template-columns: minmax(0, 1fr);
}

.wall-band {
  display: grid;
  gap: clamp(13px, 1.3vw, 19px);
}

.wall-band__rail {
  display: grid;
  grid-template-columns: auto auto minmax(0, .9fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: clamp(13px, 1.8vw, 30px);
  padding-bottom: clamp(12px, 1.2vw, 17px);
  border-bottom: 1px solid rgba(237, 239, 242, .14);
}

.wall-band__n {
  color: rgba(237, 239, 242, .42);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
}

/* all three marks sit on one optical line, whatever their aspect */
.wall-band__mark {
  display: flex;
  align-items: center;
  height: 36px;
}

.wall-band__mark img {
  max-width: clamp(96px, 9vw, 140px);
  max-height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: .92;
}

.wall-band__mark--own {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.05em;
}

.wall-band__id {
  display: grid;
  gap: .32rem;
}

.wall-band__id h3 {
  margin: 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(19px, 1.75vw, 27px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}

.wall-band__id .case-label {
  margin: 0;
  color: rgba(237, 239, 242, .5);
}

/* the sentence that distinguishes the three seats, tied to its group
   by a hairline instead of the old full card */
.wall-band__line {
  margin: 0;
  padding-left: clamp(14px, 1.6vw, 26px);
  border-left: 1px solid rgba(237, 239, 242, .14);
  color: rgba(237, 239, 242, .74);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 300;
  letter-spacing: -.022em;
  line-height: 1.4;
}

.wall-band__open {
  display: inline-block;
  justify-self: end;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(237, 239, 242, .28);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .3s ease, color .3s ease;
}

.wall-band__open:hover,
.wall-band__open:focus-visible { border-color: var(--paper); }

.wall-band__grid {
  display: grid;
  /* seven fixed columns shared by all three bands: the module is what
     makes it read as one wall rather than three grids */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(9px, .8vw, 14px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the sentence drops to its own row; the open link is pinned to row 1 so it
   cannot widen the number column underneath it */
@media (max-width: 1180px) {
  .wall-band__rail { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: clamp(12px, 1.4vw, 18px); }
  .wall-band__line {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-top: clamp(11px, 1.2vw, 15px);
    padding-left: 0;
    border-top: 1px solid rgba(237, 239, 242, .1);
    border-left: 0;
  }
  .wall-band__open { grid-row: 1; grid-column: 4; }
}

@media (max-width: 1000px) {
  .wall-band__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .wall-band__rail { grid-template-columns: auto minmax(0, 1fr); gap: .8rem 1rem; }
  .wall-band__id,
  .wall-band__line,
  .wall-band__open { grid-row: auto; grid-column: 1 / -1; }
  .wall-band__open { justify-self: start; }
  .wall-band__mark { height: 28px; }
  .wall-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .wall-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- brand cells: logo wall --- */
.brand-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid rgba(237, 239, 242, .12);
  border-radius: 18px;
  background: #1a1a1e;
  transition: border-color .35s ease, background .35s ease, transform .5s cubic-bezier(.2,.75,.2,1);
}

/* two rows instead of absolute positioning: the logo gets whatever height
   is left over and the name always sits below it, so a two-line name can
   no longer land on top of the mark */
.brand-cell > a {
  display: grid;
  /* one row: the mark owns the whole cell and the name arrives on hover.
     Touch devices, which have no hover, get the two-row layout back at the
     bottom of this block. */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  padding: clamp(16px, 1.7vw, 25px);
}

/* the logo sits in the optical centre of the upper two thirds, so every
   mark lands on the same baseline however wide or tall it is */
/* flex, not grid: a percentage height on a grid item in an auto row is
   indeterminate in Chromium, which is exactly how the tall logos escaped
   their frame. In a flex box with a definite height it resolves. */
/* --mark-h caps how tall a mark may stand. Without it object-fit lets a
   portrait logo (GPS) fill the full frame while a wide one (SFI) sits at
   half that, and the row stops reading as one set of equals. */
.brand-cell__logo {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--mark-h, 70%);
  min-height: 0;
  padding-inline: clamp(2px, .4vw, 6px);
}

/* width/height rather than max-*: a percentage max-height inside a grid
   area of indeterminate height is ignored, which is what let the tall
   logos (GPS) blow past the frame and cover the brand name */
.brand-cell__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .84;
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.75,.2,1);
}

/* a brand whose logo file hasn't landed yet: its name, set as a wordmark.
   Deliberate, not a hole — swap in the file and the cell needs no other change. */
.brand-cell--wordmark .brand-cell__logo {
  color: rgba(237, 239, 242, .5);
  transition: opacity .28s ease;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(11px, .92vw, 13px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

/* the name is not printed on the wall. Eleven marks read as one set; the
   name and the category slide up over the mark on hover or keyboard focus.
   It stays in the DOM, so screen readers and search still get it. */
.brand-cell__body {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: .22rem;
  padding: clamp(26px, 2.6vw, 38px) clamp(9px, .9vw, 13px) clamp(11px, 1.1vw, 15px);
  background: linear-gradient(to top, rgba(12, 12, 14, .95) 24%, rgba(12, 12, 14, .74) 64%, rgba(12, 12, 14, 0));
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .34s ease, transform .42s cubic-bezier(.2, .75, .2, 1);
}

.brand-cell:hover .brand-cell__body,
.brand-cell:focus-within .brand-cell__body {
  opacity: 1;
  transform: none;
}

.brand-cell__body strong {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.brand-cell__body small {
  color: rgba(237, 239, 242, .46);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.brand-cell--case { border-color: rgba(237, 239, 242, .2); }

.brand-cell:hover,
.brand-cell:focus-within {
  border-color: rgba(237, 239, 242, .34);
  background: #1f1f24;
  transform: translateY(-3px);
}

.brand-cell:hover .brand-cell__logo img,
.brand-cell:focus-within .brand-cell__logo img { opacity: 1; transform: scale(1.04); }

/* a brand with no logo file shows its name as the mark: fade that out as the
   hover panel arrives instead of showing the same words twice */
.brand-cell--wordmark:hover .brand-cell__logo,
.brand-cell--wordmark:focus-within .brand-cell__logo { opacity: 0; }

/* The wall arrives one mark at a time: fill-mode is backwards, not both, so
   the cell returns to its own computed style when the animation ends and the
   hover lift below is not locked out by a filled-forward transform. */
.brand-wall .brand-cell {
  --cell-i: 0;
  --band-i: 0;
}

.work-map:not(.is-visible) .brand-wall .brand-cell {
  opacity: 0;
  transform: translateY(16px) scale(.984);
}

.work-map.is-visible .brand-wall .brand-cell {
  animation: brandCellIn 620ms cubic-bezier(.16, .78, .18, 1) backwards;
  animation-delay: calc(var(--cell-i) * 58ms + var(--band-i) * 150ms);
}

.brand-wall .wall-band:nth-of-type(2) .brand-cell { --band-i: 1; }
.brand-wall .wall-band:nth-of-type(3) .brand-cell { --band-i: 2; }

.wall-band__grid .brand-cell:nth-child(2) { --cell-i: 1; }
.wall-band__grid .brand-cell:nth-child(3) { --cell-i: 2; }
.wall-band__grid .brand-cell:nth-child(4) { --cell-i: 3; }
.wall-band__grid .brand-cell:nth-child(5) { --cell-i: 4; }
.wall-band__grid .brand-cell:nth-child(6) { --cell-i: 5; }
.wall-band__grid .brand-cell:nth-child(7) { --cell-i: 6; }

@keyframes brandCellIn {
  from { opacity: 0; transform: translateY(16px) scale(.984); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* no hover to reveal the name on, so print it: the two-row cell comes back */
@media (hover: none) {
  .brand-cell > a {
    grid-template-rows: 54% minmax(0, 1fr);
    gap: clamp(7px, .8vw, 12px);
    padding: clamp(13px, 1.3vw, 18px) clamp(12px, 1.2vw, 17px);
  }
  .brand-cell__logo { --mark-h: 100%; }
  .brand-cell__body {
    position: static;
    align-self: center;
    padding: 0;
    background: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-map:not(.is-visible) .brand-wall .brand-cell { opacity: 1; transform: none; }
  .work-map.is-visible .brand-wall .brand-cell { animation-delay: 0s; }
}

/* --- end brand cells --- */

@media (max-width: 900px) {
  .brand-group { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   Getting your bearings.
   Three pieces that answer "what is this, and where am I?":
   the divider that names the index → case-study relationship,
   the hand-off strip between cases, and the nav's current-case line.
   ================================================================ */

.cases-intro {
  width: min(100%, 1600px);
  padding: clamp(90px, 12vw, 170px) clamp(18px, 6vw, 96px);
  border-block: 1px solid rgba(237, 239, 242, .1);
}

.cases-intro__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: end;
  gap: 2rem 5vw;
}

.cases-intro__head .case-label { grid-column: 1 / -1; color: rgba(237, 239, 242, .58); }

.cases-intro__head h2 {
  margin: 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(38px, 6vw, 96px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: .86;
}

.cases-intro__lede {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 320;
  line-height: 1.7;
}

.cases-intro__list {
  margin: clamp(48px, 6vw, 84px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(237, 239, 242, .14);
}

.cases-intro__list li { border-bottom: 1px solid rgba(237, 239, 242, .14); }

.cases-intro__list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.2vw, 1.9rem) 0;
  transition: padding-inline .4s cubic-bezier(.2,.75,.2,1), color .3s ease;
}

.cases-intro__list a:hover,
.cases-intro__list a:focus-visible { padding-inline: clamp(.6rem, 1.4vw, 1.4rem); }

.cases-intro__n {
  color: rgba(237, 239, 242, .42);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
}

.cases-intro__list strong {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -.04em;
}

.cases-intro__list small {
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cases-intro__list em {
  color: rgba(237, 239, 242, .5);
  font-size: 15px;
  font-style: normal;
  transition: transform .4s cubic-bezier(.2,.75,.2,1), color .3s ease;
}

.cases-intro__list a:hover em,
.cases-intro__list a:focus-visible em { color: var(--paper); transform: translateY(4px); }

/* --- the strip between two cases --- */

.case-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  box-sizing: border-box;
  width: min(100%, 1600px);
  padding: clamp(34px, 4.5vw, 58px) clamp(18px, 6vw, 96px);
  border-block: 1px solid rgba(237, 239, 242, .1);
  background: #0b0b0c;
}

.case-handoff__next { display: grid; gap: .45rem; }

.case-handoff__next span {
  color: rgba(237, 239, 242, .5);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.case-handoff__next strong {
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(24px, 3.2vw, 44px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  transition: opacity .3s ease;
}

.case-handoff__next small {
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.case-handoff__next:hover strong,
.case-handoff__next:focus-visible strong { opacity: .74; }

.case-handoff__up {
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(237, 239, 242, .26);
  color: rgba(237, 239, 242, .72);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .3s ease, border-color .3s ease;
}

.case-handoff__up:hover,
.case-handoff__up:focus-visible { border-color: var(--paper); color: var(--paper); }

/* --- where you are, in the nav's dead centre --- */

.site-nav__where {
  position: absolute;
  left: 50%;
  display: flex;
  gap: .7rem;
  align-items: center;
  color: rgba(237, 239, 242, .62);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity .4s ease, transform .4s ease;
}

.site-nav__where.is-shown { opacity: 1; transform: translate(-50%, 0); }
.site-nav__where b { color: var(--paper); font-weight: 500; }
.site-nav.is-on-light .site-nav__where { color: rgba(23, 47, 75, .6); }
.site-nav.is-on-light .site-nav__where b { color: #172f4b; }

@media (max-width: 900px) {
  .cases-intro__head { grid-template-columns: minmax(0, 1fr); }
  .cases-intro__list a { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .cases-intro__list small { display: none; }
  .case-handoff { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .case-handoff__up { justify-self: start; }
  .site-nav__where { display: none; }
}

/* ================================================================
   Per-brand panels. The seven brands without a full case study now
   open a short panel — logo, context, and the actual work — instead
   of a cell that lifts on hover and then does nothing.
   Reuses the practice-panel machinery and its scroll/close styles.
   ================================================================ */

.brand-panel__hero { min-height: 34vh; grid-template-columns: minmax(0, 1fr); }

.brand-panel__hero h2 { font-size: clamp(48px, 8vw, 118px); }

.brand-panel__logo {
  grid-column: 1 / -1;
  width: auto;
  max-width: min(240px, 40vw);
  max-height: 76px;
  margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
  object-fit: contain;
  object-position: left center;
}

.brand-panel__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-panel__gallery img { aspect-ratio: 1 / 1; border-radius: 6px; }
.brand-panel__gallery img:nth-child(2) { transform: none; }

/* a cell with a panel behind it earns the same affordance as a case cell */
.brand-cell--panel { border-color: rgba(237, 239, 242, .18); }

/* …and a cell with nothing behind it must stop pretending it is clickable */
.brand-cell:not(.brand-cell--case):not(.brand-cell--panel):hover,
.brand-cell:not(.brand-cell--case):not(.brand-cell--panel):focus-within {
  border-color: rgba(237, 239, 242, .12);
  background: #1a1a1e;
  transform: none;
}

.brand-cell:not(.brand-cell--case):not(.brand-cell--panel):hover .brand-cell__logo img {
  opacity: .84;
  transform: none;
}

@media (max-width: 760px) {
  .brand-panel__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The panel's own Close control sits where the nav links are, so the links
   step aside while a panel is open — otherwise CLOSE lands on top of CONTACT. */
.portfolio-home.practice-panel-open .site-links,
.portfolio-home.practice-panel-open .site-nav__where {
  opacity: 0;
  pointer-events: none;
}

.portfolio-home.practice-panel-open .site-links { transition: opacity .25s ease; }

/* ================================================================
   A brand section in the scroll sequence. Same shape as the three
   full case studies — bar, header, work — just shorter, so the page
   reads as one continuous run rather than sections plus pop-ups.
   ================================================================ */

/* ------------------------------------------------------------------
   A brand section, rebuilt.
   Zainab, 2026-08-31: "Engine Court شيك أوي والباكجراوند بتاعته، عاوزة كل
   البراندات تكون شيك كدا". Engine Court's presence comes from three
   things, and every brand section now has all three:

   1. Its own atmosphere — two soft radials in that brand's OWN colours
      over near-black, so the section feels like the brand before you
      read a word. --brand-a / --brand-b are set on the section in the
      markup, sampled from her creatives (the same quantise-and-weight
      pass documented in the phone-mockup note).
   2. Full bleed — the ground runs edge to edge; only the content is
      held to the page width. A boxed section can never feel like this.
   3. A structure with named parts — identity, the account, the work —
      instead of one undifferentiated stack.
------------------------------------------------------------------ */
.brand-case {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  padding: 0 0 clamp(90px, 11vw, 160px);
  overflow: hidden;
  border-top: 1px solid var(--edge);
  background:
    radial-gradient(ellipse 44% 30% at 10% 12%, rgba(var(--brand-a), .15), transparent 72%),
    radial-gradient(ellipse 46% 32% at 90% 76%, rgba(var(--brand-b), .13), transparent 74%),
    #07090d;
}

/* the number, ghosted into the ground — the sequence said out loud */
.brand-case::after {
  content: attr(data-n);
  position: absolute;
  z-index: 0;
  top: clamp(26px, 4vw, 58px);
  right: clamp(12px, 4vw, 64px);
  color: rgba(237, 239, 242, .04);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(140px, 19vw, 320px);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .74;
  pointer-events: none;
}

/* box-sizing is content-box across this stylesheet, so the page padding
   has to be inside the width or every block runs 170px past the edge. */
.brand-case > * {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 1600px);
  margin-inline: auto;
  padding-inline: clamp(18px, 6vw, 96px);
}

.brand-case__bar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  min-height: 64px;
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(8px, .68vw, 10px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.brand-case__bar span:first-child { color: var(--paper); }

/* Name on the left, the one line that says what the account is on the
   right — the same split the full cases open with. */
.brand-case__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  padding-block: clamp(62px, 8vw, 118px) clamp(44px, 5.5vw, 72px);
}

.brand-case__id { justify-self: start; }

.brand-case__logo {
  display: block;
  width: auto;
  max-width: min(230px, 38vw);
  max-height: 68px;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  object-fit: contain;
  object-position: left center;
}

.brand-case__head h2 {
  margin: .8rem 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(44px, 7vw, 108px);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .84;
}

.brand-case__meta {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.brand-case__lede {
  max-width: 44ch;
  margin: 0 0 .5rem;
  padding-top: clamp(1.2rem, 2vw, 1.8rem);
  border-top: 1px solid var(--edge);
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 300;
  line-height: 1.52;
}

/* the work opens with a heading of its own, not just a grid */
.brand-case__work {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(1.6rem, 2.6vw, 2.6rem);
  padding-bottom: clamp(1.1rem, 2vw, 1.7rem);
  border-bottom: 1px solid var(--edge);
}

.brand-case__work .case-label { margin: 0; }

.brand-case__count {
  margin: 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.brand-case__gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 20px);
}

.brand-work-card {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: .8rem;
  min-width: 0;
  margin: 0;
}

.brand-work-card .brand-shot { width: 100%; }

.brand-work-card .work-caption-open {
  align-self: start;
  justify-self: start;
  margin-top: 0;
}

.brand-work-card__empty { display: block; min-height: 28px; }

.brand-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  /* The brands do not share one export size: Cady Royal, Gulf Express,
     Dr. Makkiya, Toffee and Oral are 1:1, GPS and Zede Glow are 4:5, and a
     few pieces are wide banners. One hard-coded frame cropped whichever
     group it did not match, so each section declares its own ratio and a
     genuinely landscape piece takes the whole row instead (see .is-wide). */
  aspect-ratio: var(--tile, 1 / 1);
  border: 1px solid rgba(237, 239, 242, .1);
  border-radius: clamp(10px, 1vw, 14px);
  background: #0a0e12;
  transition: border-color 420ms ease, box-shadow 480ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1);
}

/* a landscape piece is a banner, not a tile: give it the full row uncropped */
.brand-case__gallery .is-wide { grid-column: 1 / -1; }
.brand-case__gallery .is-wide .brand-shot,
.brand-case__gallery .brand-shot.is-wide { aspect-ratio: auto; }
.brand-case__gallery .is-wide .brand-shot img,
.brand-case__gallery .brand-shot.is-wide img { height: auto; object-fit: contain; }

.brand-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2, .76, .2, 1);
}

.brand-shot__post {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
}

.brand-shot__post:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -4px;
}

.brand-shot__platform {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(237, 239, 242, .34);
  border-radius: 50%;
  background: rgba(9, 12, 16, .58);
  color: rgba(237, 239, 242, .88);
  backdrop-filter: blur(10px);
  transition: transform 380ms cubic-bezier(.2, .76, .2, 1), border-color 320ms ease,
              background 320ms ease, color 320ms ease;
}

.brand-shot__platform svg { width: 16px; height: 16px; }
.brand-shot__platform--facebook svg { width: 19px; height: 19px; }

.brand-shot__post:hover .brand-shot__platform,
.brand-shot__post:focus-visible .brand-shot__platform {
  border-color: rgba(237, 239, 242, .7);
  background: rgba(237, 239, 242, .15);
  color: #fff;
  transform: scale(1.08);
}

.brand-shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 11, .72));
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}

.brand-shot__n {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 14px;
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1);
  pointer-events: none;
}

@media (hover: hover) {
  .brand-shot:hover {
    border-color: rgba(237, 239, 242, .3);
    box-shadow: 0 26px 60px -22px rgba(0, 0, 0, .75);
    transform: translateY(-4px);
  }
  .brand-shot:hover img { transform: scale(1.06); }
  .brand-shot:hover::after { opacity: 1; }
  .brand-shot:hover .brand-shot__n { opacity: .9; transform: none; }
}

@media (max-width: 1180px) {
  .brand-case__gallery { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .brand-case__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
    align-items: start;
  }
  .brand-case__lede { max-width: none; margin-bottom: 0; }
  .brand-case::after { font-size: clamp(110px, 30vw, 200px); opacity: .8; }
}

@media (max-width: 620px) {
  .brand-case__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The market divider. Egypt and the UAE are the two halves of the work, so
   each half opens with its own full-width marker rather than a quiet label. */
/* border-box, like .brand-case > * — this stylesheet is content-box, so
   width + padding-inline was making these strips 173px wider than the
   viewport. That pushed the document past the window and left a dark
   band down the right of every full-bleed section. */
.seq-break {
  box-sizing: border-box;
  width: min(100%, 1600px);
  padding: clamp(96px, 13vw, 190px) clamp(18px, 6vw, 96px);
  border-block: 1px solid rgba(237, 239, 242, .14);
  background:
    radial-gradient(ellipse 60% 100% at 8% 50%, rgba(143, 198, 210, .07), transparent 70%),
    #0b0b0c;
}

.seq-break .case-label { color: rgba(237, 239, 242, .46); }

.seq-break h3 {
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(44px, 8.5vw, 138px);
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: .84;
}

.seq-break__count {
  margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0 !important;
  padding-top: clamp(1.2rem, 2vw, 1.8rem);
  border-top: 1px solid rgba(237, 239, 242, .14);
  color: rgba(237, 239, 242, .62) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

.seq-break > p:not(.case-label):not(.seq-break__count) {
  max-width: 48ch;
  margin: 1.3rem 0 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 320;
  line-height: 1.7;
}

/* the market, said once more where the brands are listed */
.brand-group__market {
  margin: .9rem 0 0 !important;
  color: rgba(237, 239, 242, .74) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .brand-case__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================
   The feed on a phone. A presentation device, not a fake profile:
   no handle, no follower or post counts — those would be invented.
   Logo, name, the palette taken from the work, and the real grid.
   ================================================================ */

.brand-phone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  padding-bottom: clamp(54px, 7vw, 96px);
}

.brand-phone__device {
  width: clamp(248px, 25vw, 318px);
  padding: 11px;
  border: 1px solid rgba(237, 239, 242, .16);
  border-radius: 42px;
  background: linear-gradient(160deg, #26262b, #131316 46%, #1d1d21);
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.brand-phone__screen {
  position: relative;
  overflow: hidden;
  padding: 26px 12px 12px;
  border-radius: 32px;
  background: #fbfbfc;
}

/* A brand section shows the account itself where a real capture exists.
   The device chrome stays identical to the reconstructed phone beside it —
   only the screen is swapped — so the four real ones and the one still
   waiting on a capture read as the same object at the same size.
   --shot carries the capture's own ratio, because these come off different
   phones and object-fit would otherwise crop the stats row off the top. */
.brand-phone__shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: var(--shot, 1179 / 2556);
  border-radius: 32px;
  background: #05070a;
}

.brand-phone__shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.brand-phone__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 62px;
  height: 15px;
  border-radius: 999px;
  background: #131316;
  transform: translateX(-50%);
}

.brand-phone__head {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 8px 4px 12px;
}

.brand-phone__avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(12, 14, 18, .1);
  border-radius: 50%;
  background: #fff;
}

.brand-phone__avatar img { width: 74%; height: 74%; object-fit: contain; }

.brand-phone__avatar--type {
  border: 0;
  background: var(--tone, #333);
  color: #fff;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

.brand-phone__id { display: grid; gap: 2px; min-width: 0; }
.brand-phone__id strong {
  color: #14161a;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand-phone__id small {
  color: rgba(20, 22, 26, .56);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.brand-phone__palette { display: flex; gap: 9px; padding: 2px 4px 12px; }
.brand-phone__palette i {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(12, 14, 18, .08);
  border-radius: 50%;
  background: var(--c);
}

.brand-phone__tabs {
  display: flex;
  gap: 0;
  justify-content: space-around;
  padding: 7px 0;
  border-top: 1px solid rgba(12, 14, 18, .1);
}
.brand-phone__tabs b,
.brand-phone__tabs i { width: 15px; height: 2px; border-radius: 2px; background: rgba(20, 22, 26, .18); }
.brand-phone__tabs b { background: #14161a; }

.brand-phone__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.brand-phone__grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.brand-phone__note > p:not(.case-label) {
  max-width: 34ch;
  margin: 1rem 0 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 320;
  line-height: 1.7;
}

.brand-phone__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  list-style: none;
}

.brand-phone__swatches li { display: grid; gap: .5rem; justify-items: start; }
.brand-phone__swatches span {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(237, 239, 242, .14);
  border-radius: 8px;
  background: var(--c);
}
.brand-phone__swatches small {
  color: rgba(237, 239, 242, .5);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
}

@media (max-width: 900px) {
  .brand-phone { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 2.4rem; }
  .brand-phone__device { width: min(280px, 74vw); }
}

/* The profile frame inside the Penduline case sits on paper, not on the
   dark ground it was built for, so its copy has to flip to the ink.
   Its proportions are re-cut too: the inherited 10ch headline broke into
   four ragged lines against a wide empty middle, which read as cramped on
   the left and hollow in the centre. */
.penduline-case .profile-frame {
  /* both columns are sized to their content and the pair is centred, so the
     copy is not stranded against the left edge with a dead middle */
  grid-template-columns: minmax(0, 30rem) minmax(280px, 372px);
  justify-content: center;
  gap: clamp(2.5rem, 7vw, 7rem);
  border-color: rgba(23, 47, 75, .18);
}

.penduline-case .profile-frame__copy { max-width: none; }

.penduline-case .profile-frame__copy h4 {
  max-width: 22ch;
  font-size: clamp(36px, 3.7vw, 62px);
  line-height: 1;
}

.penduline-case .profile-frame__copy > p:last-child { max-width: 36ch; }

/* the device is a tall 9:19.5 — cap it so it does not out-run the viewport */
.penduline-case .profile-frame__device { width: min(100%, 372px); }

.penduline-case .profile-frame__copy .case-label { color: rgba(23, 47, 75, .62); }
.penduline-case .profile-frame__copy h4 { color: var(--penduline-ink); }
.penduline-case .profile-frame__copy > p:last-child { color: rgba(23, 47, 75, .72); }

.penduline-case .profile-frame__device {
  border-color: #1a2733;
  box-shadow: 0 44px 110px rgba(23, 47, 75, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ================================================================
   Each working context reads as its own place: its logo, its name,
   and the one line that separates it from the other two — who writes
   the brief. Three headlines in one wall of type did not say that.
   ================================================================ */

.work-map__head h2 em {
  display: block;
  color: rgba(237, 239, 242, .6);
  font-style: normal;
  font-weight: 300;
}

/* ------------------------------------------------------------------
   The account note beside each brand phone.
   The phone shows the grid; this says what the account is and what I
   did on it. Kept to one paragraph and three lines so it never
   out-runs the phone it sits beside.
------------------------------------------------------------------ */
.brand-phone__what {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 300;
  line-height: 1.5;
}

/* What the account itself is: specialism, where it operates, who it talks
   to. Taken from each account's own bio, so the block under "The account"
   describes the account and the list under it describes the work. */
.brand-phone__facts {
  max-width: 52ch;
  margin: clamp(1.2rem, 2.2vw, 1.8rem) 0 0;
  display: grid;
  gap: .75rem;
}

.brand-phone__facts > div {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
  gap: .2rem clamp(.9rem, 1.4vw, 1.5rem);
  align-items: baseline;
  padding-top: .75rem;
  border-top: 1px solid rgba(237, 239, 242, .1);
}

.brand-phone__facts > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.brand-phone__facts dt {
  color: rgba(237, 239, 242, .44);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .15em;
  line-height: 1.9;
  text-transform: uppercase;
}

.brand-phone__facts dd {
  margin: 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .brand-phone__facts > div { grid-template-columns: minmax(0, 1fr); }
}

/* the second label has to breathe away from the facts above it */
.brand-phone__facts + .case-label { margin-top: clamp(1.5rem, 2.6vw, 2.2rem); }
.brand-phone__facts + .case-label + .brand-phone__did { margin-top: clamp(.75rem, 1.2vw, 1.05rem); }

.brand-phone__did {
  max-width: 52ch;
  margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .85rem;
}

.brand-phone__did li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.62;
}

/* a solid dot, not a hairline dash: the thin rule read as a stray mark
   next to the text rather than as a bullet */
.brand-phone__did li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(237, 239, 242, .72);
}

/* The swatch row is gone. Zainab is a content creator, not a brand
   designer — a palette next to her work described the wrong job
   ("الوصف اللي انت كاتبه للبراند والألوان مالهاش علاقة خالص بإني content
   creator", 2026-08-31). What sits there now is what she actually ran on
   the account. The old .brand-phone__swatches rules above are unused. */
.brand-phone__role {
  margin: clamp(1.5rem, 2.6vw, 2.3rem) 0 0;
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--edge);
  color: rgba(237, 239, 242, .5);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
}

/* The Arabic pulled into a line of English keeps its own direction and
   sits at the same optical weight as the sentence around it. */
.brand-phone__did em {
  color: rgba(237, 239, 242, .82);
  font-style: normal;
  unicode-bidi: isolate;
}

/* ------------------------------------------------------------------
   Click a design, see it whole.
   The gallery crops to a square; the overlay shows the real frame at
   full ratio with the line that explains it. Arrow keys and swipe
   move through the brand's set.
------------------------------------------------------------------ */
.brand-case__gallery[data-lightbox] img { cursor: zoom-in; }

.shot-view {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  background: rgba(6, 7, 9, .86);
  backdrop-filter: blur(16px);
  isolation: isolate;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.shot-view::before {
  content: "";
  position: absolute;
  inset: -42px;
  z-index: 0;
  background-image: var(--shot-backdrop-image, none);
  background-position: center;
  background-size: cover;
  opacity: .15;
  filter: blur(34px) saturate(.72) brightness(.58);
  transform: scale(1.08);
  pointer-events: none;
}

.shot-view__figure { position: relative; z-index: 1; }
.shot-view__close,
.shot-view__nav { z-index: 2; }

.shot-view.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 260ms ease;
}

.shot-view__figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  gap: clamp(1.6rem, 3.5vw, 3.5rem);
  align-items: center;
  max-width: 1180px;
  width: 100%;
  margin: 0;
  transform: scale(.97);
  transition: transform 320ms cubic-bezier(.2, .76, .2, 1);
}

.shot-view.is-open .shot-view__figure { transform: none; }

.shot-view__img {
  display: block;
  justify-self: end;
  max-width: 100%;
  max-height: min(78vh, 900px);
  border-radius: 8px;
  background: #14161a;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}

.shot-view__cap { text-align: left; }

.shot-view__cap h4 {
  margin: .9rem 0 0;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.24;
}

.shot-view__note {
  margin: .9rem 0 0;
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.6;
}

.shot-view__caption {
  margin: 1.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--edge);
  color: var(--muted);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 300;
  line-height: 1.75;
  white-space: pre-line;
}

.shot-view__close {
  position: absolute;
  top: clamp(14px, 2.4vw, 30px);
  right: clamp(14px, 2.4vw, 30px);
  padding: 10px 16px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(20, 22, 26, .7);
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.shot-view__close span { margin-left: .5rem; font-size: 15px; }
.shot-view__close:hover { background: rgba(237, 239, 242, .12); }

.shot-view__nav {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: rgba(20, 22, 26, .7);
  color: var(--paper);
  font-size: 18px;
  cursor: pointer;
  transform: translateY(-50%);
}

.shot-view__nav:hover { background: rgba(237, 239, 242, .12); }
.shot-view__nav--prev { left: clamp(10px, 2vw, 26px); }
.shot-view__nav--next { right: clamp(10px, 2vw, 26px); }

@media (max-width: 900px) {
  .shot-view__figure {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    align-content: center;
  }
  .shot-view__img { justify-self: center; max-height: 52vh; }
  .shot-view__nav { top: auto; bottom: 16px; transform: none; }
  .shot-view__close { position: static; justify-self: end; }
}

body.shot-open { overflow: hidden; }

/* ------------------------------------------------------------------
   The card tells you where it goes.
   Every card in this rail opens the post on Instagram, so the frame
   carries the mark rather than a line of instruction text. It sits on
   the glass, brightens when the card is the active one, and lifts on
   hover — the whole card is the target, the badge only names it.
------------------------------------------------------------------ */
.work-frame__go {
  position: absolute;
  z-index: 3;
  right: clamp(10px, 1vw, 14px);
  bottom: clamp(10px, 1vw, 14px);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(237, 239, 242, .22);
  border-radius: 50%;
  background: rgba(9, 12, 16, .5);
  color: rgba(237, 239, 242, .78);
  backdrop-filter: blur(10px);
  transition: transform 420ms cubic-bezier(.2, .76, .2, 1), border-color 380ms ease,
              background 380ms ease, color 380ms ease;
}

.work-frame__go svg { width: 17px; height: 17px; }

.work-item.is-active .work-frame__go {
  border-color: rgba(237, 239, 242, .4);
  color: var(--paper);
}

.work-link:hover .work-frame__go,
.work-link:focus-visible .work-frame__go {
  border-color: rgba(237, 239, 242, .62);
  background: rgba(237, 239, 242, .14);
  color: var(--paper);
  transform: scale(1.08);
}

/* ------------------------------------------------------------------
   "Read the caption".
   The card itself goes to Instagram — Zainab asked for that click
   specifically — so the caption needs its own control. A small white
   chip: one line, never two, and quiet enough that the Instagram badge
   on the frame above stays the loudest thing on the card.
------------------------------------------------------------------ */
.work-caption-open {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  max-width: 100%;
  margin-top: auto;
  align-self: flex-start;
  padding: 6px 13px 6px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: #14161a;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 320ms ease, color 320ms ease, transform 380ms cubic-bezier(.2, .76, .2, 1);
}

.work-caption-open__mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 0;
  opacity: .5;
  transform: translateY(4px);
}

.work-caption-open__label { display: block; }

.work-caption-open:hover,
.work-caption-open:focus-visible {
  background: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.work-caption-open:focus-visible { box-shadow: 0 0 0 3px rgba(237, 239, 242, .28); }

.shot-view__link {
  display: inline-flex;
  align-items: center;
  margin-top: 1.5rem;
  padding: 11px 20px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  color: var(--paper);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 260ms ease, border-color 260ms ease;
}

.shot-view__link[hidden] { display: none; }

.shot-view__link:hover { border-color: rgba(237, 239, 242, .5); background: rgba(237, 239, 242, .1); }

/* A caption is long. Give it room to scroll inside the panel rather than
   letting it push the artwork off the top of the overlay. */
.shot-view__cap {
  max-height: min(78vh, 900px);
  overflow-y: auto;
  scrollbar-width: thin;
}

@media (max-width: 900px) {
  .shot-view__cap { max-height: 34vh; }
}

/* ==================================================================
   THE EGYPT CHAPTER — paper.
   Zainab, 2026-08-31: "عاوزة Toffee kids and oral يبقو بنفس الثيم بتاع
   بندولين بيبي… وشغل الإمارات بثيم تاني". The page is already organised
   by market ([[portfolio-wayfinding]]), so the split is drawn on the
   MARKET, not on "kids work" — Zedé Glow closes this half and it is
   not a kids brand. Everything from the Egypt divider to the
   last Zedé Glow tile shares Penduline's paper, so the case that was a lone
   light chapter is now the middle of a light half.

   `data-tone="light"` is the switch, and every light section carries it —
   Penduline included — so home.js probes one selector and the fixed nav and
   the scroll-progress bar invert over all of it.

   One paper value held across the whole half — the same lesson as the
   Penduline case: drifting between near-whites reads as neglect, not
   as design. The brand's own hue only tints the ground, at a tenth of
   the strength it carries on the dark half.
================================================================== */
:root {
  --paper-ground: #f2efe8;
  --paper-ink: #172f4b;
}

.brand-case[data-tone="light"] {
  border-top-color: rgba(23, 47, 75, .16);
  background:
    radial-gradient(ellipse 44% 30% at 10% 12%, rgba(var(--brand-a), .16), transparent 70%),
    radial-gradient(ellipse 46% 32% at 90% 76%, rgba(var(--brand-b), .14), transparent 72%),
    var(--paper-ground);
  color: var(--paper-ink);
}

.brand-case[data-tone="light"]::after { color: rgba(23, 47, 75, .06); }

.brand-case[data-tone="light"] .brand-case__bar {
  border-bottom-color: rgba(23, 47, 75, .18);
  color: rgba(23, 47, 75, .58);
}

.brand-case[data-tone="light"] .brand-case__bar span:first-child,
.brand-case[data-tone="light"] .brand-case__head h2,
.brand-case[data-tone="light"] .brand-case__lede { color: var(--paper-ink); }

.brand-case[data-tone="light"] .case-label,
.brand-case[data-tone="light"] .brand-case__meta,
.brand-case[data-tone="light"] .brand-case__count,
.brand-case[data-tone="light"] .brand-phone__role { color: rgba(23, 47, 75, .58); }

.brand-case[data-tone="light"] .brand-case__lede,
.brand-case[data-tone="light"] .brand-case__work,
.brand-case[data-tone="light"] .brand-phone__role { border-color: rgba(23, 47, 75, .18); }

.brand-case[data-tone="light"] .brand-phone__did li { color: rgba(23, 47, 75, .76); }
.brand-case[data-tone="light"] .brand-phone__facts > div { border-color: rgba(23, 47, 75, .14); }
.brand-case[data-tone="light"] .brand-phone__facts dt { color: rgba(23, 47, 75, .5); }
.brand-case[data-tone="light"] .brand-phone__facts dd { color: rgba(23, 47, 75, .76); }
.brand-case[data-tone="light"] .brand-phone__did li::before { background: rgba(23, 47, 75, .72); }
.brand-case[data-tone="light"] .brand-phone__did em { color: var(--paper-ink); }

.brand-case[data-tone="light"] .brand-shot {
  border-color: rgba(23, 47, 75, .14);
  background: rgba(23, 47, 75, .06);
}

.brand-case[data-tone="light"] .brand-shot:hover {
  border-color: rgba(23, 47, 75, .3);
  box-shadow: 0 26px 60px -24px rgba(23, 47, 75, .38);
}

/* the market divider that opens the half, and the strips between its
   brands, carry the same paper so the chapter has no dark seams */
.seq-break[data-tone="light"] {
  border-color: rgba(23, 47, 75, .18);
  background:
    radial-gradient(ellipse 60% 100% at 8% 50%, rgba(23, 47, 75, .05), transparent 70%),
    var(--paper-ground);
  color: var(--paper-ink);
}

.seq-break[data-tone="light"] h3 { color: var(--paper-ink); }
.seq-break[data-tone="light"] .case-label { color: rgba(23, 47, 75, .5); }
.seq-break[data-tone="light"] .seq-break__count {
  border-top-color: rgba(23, 47, 75, .18);
  color: rgba(23, 47, 75, .62) !important;
}
.seq-break[data-tone="light"] > p:not(.case-label):not(.seq-break__count) { color: rgba(23, 47, 75, .74); }

.case-handoff[data-tone="light"] {
  border-color: rgba(23, 47, 75, .16);
  background: var(--paper-ground);
}

.case-handoff[data-tone="light"] .case-handoff__next span,
.case-handoff[data-tone="light"] .case-handoff__next small,
.case-handoff[data-tone="light"] .case-handoff__up { color: rgba(23, 47, 75, .6); }

.case-handoff[data-tone="light"] .case-handoff__next strong { color: var(--paper-ink); }

.case-handoff[data-tone="light"] .case-handoff__up { border-color: rgba(23, 47, 75, .22); }

.case-handoff[data-tone="light"] .case-handoff__next:hover strong,
.case-handoff[data-tone="light"] .case-handoff__up:hover { color: var(--paper-ink); }

/* ------------------------------------------------------------------
   Zedé Glow has no Instagram phone in its column — it has a shop.
   She built zedeglow.com herself, so the artefact that belongs there
   is the live site, not a feed. Same column width as the phone beside
   every other brand, so the row keeps its rhythm.
------------------------------------------------------------------ */
.brand-phone--site { align-items: stretch; }

.brand-site {
  display: grid;
  align-content: center;
  gap: .6rem;
  width: clamp(248px, 25vw, 318px);
  min-height: clamp(230px, 22vw, 290px);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(var(--brand-a), .32);
  border-radius: clamp(16px, 1.6vw, 22px);
  background:
    radial-gradient(ellipse 80% 70% at 20% 15%, rgba(var(--brand-b), .2), transparent 70%),
    rgba(var(--brand-a), .07);
  color: inherit;
  text-decoration: none;
  transition: border-color 380ms ease, background 380ms ease, transform 460ms cubic-bezier(.2, .76, .2, 1);
}

.brand-site__label,
.brand-site__note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brand-site__label { color: rgba(23, 47, 75, .5); }
.brand-site__note { color: rgba(23, 47, 75, .55); }

.brand-site__url {
  color: var(--paper-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.brand-site:hover,
.brand-site:focus-visible {
  border-color: rgba(var(--brand-a), .7);
  background:
    radial-gradient(ellipse 80% 70% at 20% 15%, rgba(var(--brand-b), .3), transparent 70%),
    rgba(var(--brand-a), .12);
  transform: translateY(-3px);
}

/* on the dark half the same card would need the paper tokens inverted —
   nothing uses it there yet, but keep it honest if one ever does */
.brand-case:not([data-tone="light"]) .brand-site__url { color: var(--paper); }
.brand-case:not([data-tone="light"]) .brand-site__label,
.brand-case:not([data-tone="light"]) .brand-site__note { color: var(--muted); }

@media (max-width: 900px) {
  .brand-site { width: min(320px, 100%); min-height: 0; }
}

/* ==================================================================
   THE GLASS LAYER
   ------------------------------------------------------------------
   Zainab, 2026-09-01: "اي مكان ممكن يتحط فيه الثيم الزجاجي دا يتحط
   ويبقى شيك اوي … عاوزة يبقى فيه حركات جامدة من النوع دا الاضاءة
   اللي بتطلع من تحت".

   One system, three parts, so the effect reads as a material rather
   than as decoration sprinkled on individual components:

   1. --glass-*  tokens: the panel recipe (tint, hairline, blur, the
      inner top highlight that sells the thickness of the pane).
   2. .glass-underlight: the light rising from below. A blurred blue
      bloom pinned to the bottom edge of a rounded box, drawn on
      ::after BEHIND the content, exactly like the reference card.
   3. .glass-sheen: the diagonal specular pass that runs across a
      panel on hover.

   All of it is opt-in: a class or a token, never a blanket rule, so
   nothing that already works changes shape.
================================================================== */

:root {
  --glass-tint: rgba(237, 239, 242, .055);
  --glass-tint-strong: rgba(237, 239, 242, .09);
  --glass-line: rgba(237, 239, 242, .14);
  --glass-line-lit: rgba(237, 239, 242, .3);
  --glass-blur: 18px;
  /* the underlight. One blue, used everywhere, so every glow on the
     page is visibly the same lamp. */
  --glass-glow: 86, 150, 255;
  --glass-glow-soft: 120, 178, 255;
}

/* the paper half gets its own recipe — the same pane held against a
   light wall reads as ink-tinted, not paper-tinted */
[data-tone="light"] {
  --glass-tint: rgba(23, 47, 75, .045);
  --glass-tint-strong: rgba(23, 47, 75, .075);
  --glass-line: rgba(23, 47, 75, .16);
  --glass-line-lit: rgba(23, 47, 75, .36);
}

/* ---- the pane ---------------------------------------------------- */

.glass-pane {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-line);
  background: var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  transition: border-color 420ms ease, background 420ms ease,
              transform 520ms cubic-bezier(.2, .76, .2, 1),
              box-shadow 520ms ease;
}

/* the top highlight. A 1px inset line that only exists along the upper
   edge is what makes a flat rectangle read as a pane of glass with
   thickness — without it the tint just looks like a grey box. */
.glass-pane::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .16),
    rgba(255, 255, 255, .03) 22%,
    transparent 46%
  );
  content: '';
  pointer-events: none;
}

.glass-pane > * { position: relative; z-index: 1; }

.glass-pane:hover,
.glass-pane:focus-visible {
  border-color: var(--glass-line-lit);
  background: var(--glass-tint-strong);
}

/* ---- the light from below ---------------------------------------- */

/* Pinned to the bottom edge, blurred hard, scaled wider than the box so
   the falloff at the corners is smooth. z-index -1 puts it behind the
   content but still inside the element's own stacking context, which is
   why every user of this needs `isolation: isolate` (.glass-pane has it). */
.glass-underlight { position: relative; isolation: isolate; }

.glass-underlight::after {
  position: absolute;
  z-index: -1;
  right: 6%;
  bottom: -12%;
  left: 6%;
  height: 54%;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 76% 100% at 50% 100%,
    rgba(var(--glass-glow-soft), .8),
    rgba(var(--glass-glow), .42) 44%,
    transparent 76%
  );
  content: '';
  filter: blur(26px);
  opacity: .7;
  pointer-events: none;
  transform: translateZ(0);
  transition: opacity 620ms ease, height 620ms cubic-bezier(.2, .76, .2, 1);
}

.glass-underlight:hover::after,
.glass-underlight:focus-within::after,
.glass-underlight.is-lit::after { height: 74%; opacity: 1; }

/* a slow breath, so a panel sitting still on screen is not dead */
.glass-underlight--breathing::after { animation: glassBreath 7.5s ease-in-out infinite; }

@keyframes glassBreath {
  0%, 100% { opacity: .48; transform: translate3d(0, 0, 0) scaleX(1); }
  50%      { opacity: .8;  transform: translate3d(0, -4px, 0) scaleX(1.06); }
}

/* ---- the sheen ---------------------------------------------------
   The specular pass. Drawn as a moving BACKGROUND on the pane's own
   highlight layer rather than as a wide pseudo-element sliding past
   under `overflow: hidden` — because the underlight above deliberately
   sits outside the box, and an ancestor with `overflow: hidden` would
   clip its bloom into a hard edge. A background-position sweep is
   clipped to the element by definition, so the two can coexist on the
   same card. That is why .glass-sheen sets no overflow at all.
------------------------------------------------------------------ */

.glass-sheen.glass-pane::before {
  background:
    linear-gradient(
      100deg,
      transparent 34%,
      rgba(255, 255, 255, .1) 44%,
      rgba(255, 255, 255, .2) 50%,
      rgba(255, 255, 255, .08) 56%,
      transparent 66%
    ),
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, .16),
      rgba(255, 255, 255, .03) 22%,
      transparent 46%
    );
  background-repeat: no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  transition: background-position 1000ms cubic-bezier(.22, .68, .2, 1);
}

.glass-sheen.glass-pane:hover::before,
.glass-sheen.glass-pane:focus-visible::before { background-position: -60% 0, 0 0; }

@media (prefers-reduced-motion: reduce) {
  .glass-underlight--breathing::after { animation: none; }
  .glass-sheen.glass-pane::before { transition: none; }
}

/* ------------------------------------------------------------------
   The glass applied to what was already here.
   Ordered from smallest to largest so it reads as one pass.
------------------------------------------------------------------ */

/* --- "Read the caption" -------------------------------------------
   Was a solid white pill, which fought the Instagram badge on the
   frame above it for attention. As glass it recedes until you look at
   it, and the underlight gives it the same lamp as everything else. */
.work-caption-open,
.brand-work-card .work-caption-open {
  position: relative;
  isolation: isolate;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--glass-line);
  background: var(--glass-tint-strong);
  color: rgba(237, 239, 242, .92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: border-color 380ms ease, background 380ms ease, color 380ms ease,
              transform 420ms cubic-bezier(.2, .76, .2, 1);
}

/* the pane's top highlight, on the chip's own ::before — it has no
   children to displace, so nothing needs re-stacking */
.work-caption-open::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .2), transparent 58%);
  content: '';
  pointer-events: none;
}

/* the underlight, sitting on the chip's bottom edge */
.work-caption-open::after {
  position: absolute;
  z-index: -2;
  right: 14%;
  bottom: -30%;
  left: 14%;
  height: 90%;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(var(--glass-glow-soft), .75), transparent 72%);
  content: '';
  filter: blur(9px);
  opacity: .38;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.work-caption-open__mark { opacity: .62; }

.work-caption-open:hover,
.work-caption-open:focus-visible {
  border-color: rgba(var(--glass-glow-soft), .5);
  background: rgba(237, 239, 242, .14);
  color: #fff;
  transform: translateY(-2px);
}

.work-caption-open:hover::after,
.work-caption-open:focus-visible::after { opacity: .85; }

.work-caption-open:focus-visible { box-shadow: 0 0 0 3px rgba(var(--glass-glow), .35); }

/* The chip behind "Read the caption" was reading as a slab: a wide glass
   pill plus a blurred glow under it, next to a 197px card. It is a quiet
   secondary control, so it loses the shape entirely and becomes the same
   underlined mono label the rest of the page uses for "open this". */
.work-caption-open,
.brand-work-card .work-caption-open {
  gap: 0;
  padding: 5px 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(237, 239, 242, .3);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(237, 239, 242, .74);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .15em;
  transition: border-color 320ms ease, color 320ms ease;
}

.work-caption-open::before,
.work-caption-open::after { content: none; }

/* the decorative quote mark went with the pill it was sized against */
.work-caption-open__mark { display: none; }

.work-caption-open:hover,
.work-caption-open:focus-visible {
  border-color: var(--paper);
  background: none;
  color: var(--paper);
  transform: none;
}

.work-caption-open:focus-visible { box-shadow: none; outline: 1px solid var(--paper); outline-offset: 5px; }

/* --- the platform badges (Instagram / Facebook) --------------------
   Same circle, now a proper lens: a stronger blur, the top highlight,
   and a glow underneath that lights up with the card. */
.brand-shot__platform {
  isolation: isolate;
  width: 34px;
  height: 34px;
  border-color: var(--glass-line);
  background: rgba(237, 239, 242, .09);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

.brand-shot__platform::after {
  position: absolute;
  z-index: -1;
  inset: 12% -18% -34% -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 78%, rgba(var(--glass-glow-soft), .85), transparent 70%);
  content: '';
  filter: blur(10px);
  opacity: .28;
  transition: opacity 420ms ease;
}

.brand-shot__post:hover .brand-shot__platform,
.brand-shot__post:focus-visible .brand-shot__platform {
  border-color: rgba(var(--glass-glow-soft), .58);
  background: rgba(237, 239, 242, .17);
}

.brand-shot__post:hover .brand-shot__platform::after,
.brand-shot__post:focus-visible .brand-shot__platform::after { opacity: 1; }

/* --- the fixed nav -------------------------------------------------
   It already blurred. Give it the pane's top highlight and a hairline
   of light along the bottom edge, so the bar has an edge instead of
   just fading out. */
.site-nav.is-scrolled {
  background: rgba(11, 11, 12, .58);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 44px -30px rgba(0, 0, 0, .9);
}

.site-nav.is-scrolled.is-on-light {
  background: rgba(242, 239, 232, .66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 44px -34px rgba(23, 47, 75, .5);
}

/* --- the hand-off strips -------------------------------------------
   These are the joints of the whole sequence, so they are the right
   place for the light to rise. Kept subtle: they repeat nine times. */
.case-handoff {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(237, 239, 242, .035), transparent 40%),
    #0b0b0c;
}

.case-handoff::after {
  position: absolute;
  z-index: -1;
  right: 24%;
  bottom: -70%;
  left: 24%;
  height: 150%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(var(--glass-glow), .5), transparent 70%);
  content: '';
  filter: blur(46px);
  opacity: .5;
  pointer-events: none;
  animation: glassBreath 9s ease-in-out infinite;
}

.case-handoff[data-tone="light"]::after {
  background: radial-gradient(ellipse 60% 100% at 50% 100%, rgba(var(--brand-glow, 23, 47, 75), .22), transparent 70%);
  opacity: .4;
}

/* --- the lightbox controls ----------------------------------------- */
.shot-view__close,
.shot-view__nav {
  border-color: var(--glass-line);
  background: rgba(237, 239, 242, .08);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background 320ms ease, border-color 320ms ease, transform 380ms cubic-bezier(.2, .76, .2, 1);
}

.shot-view__close:hover,
.shot-view__nav:hover {
  border-color: rgba(var(--glass-glow-soft), .55);
  background: rgba(237, 239, 242, .16);
}

.shot-view__nav:hover { transform: translateY(-50%) scale(1.07); }

/* --- the Zedé Glow shop card --------------------------------------- */
.brand-site {
  position: relative;
  isolation: isolate;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.brand-site::after {
  position: absolute;
  z-index: -1;
  right: 10%;
  bottom: -6%;
  left: 10%;
  height: 48%;
  border-radius: inherit;
  background: radial-gradient(ellipse 76% 100% at 50% 106%, rgba(var(--brand-a), .5), rgba(var(--brand-b), .3) 46%, transparent 74%);
  content: '';
  filter: blur(26px);
  opacity: .6;
  pointer-events: none;
  transition: opacity 560ms ease, height 560ms cubic-bezier(.2, .76, .2, 1);
}

.brand-site:hover::after,
.brand-site:focus-visible::after { height: 64%; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .case-handoff::after { animation: none; }
}

/* ==================================================================
   THE MENU
   ------------------------------------------------------------------
   Zainab, 2026-09-01: "عاوزاك تحط في البورتفوليو من فوق زراير كدا
   توصلني بكل جزء في البورتفوليو زي Menu كدا لو ضغط عليه مثلا يظهر".

   The three nav links only reached three anchors; the page is one
   numbered sequence of ten brands ([[portfolio-wayfinding]]) with no
   way into the middle of it. This is that way in, and it keeps the
   sequence's own shape — two markets, numbers, the same order — so
   opening the menu teaches the structure instead of flattening it.

   Built as a glass sheet over a blurred page, which is where the
   material earns its keep: you can still see where you were.
================================================================== */

/* same lock the practice panels use */
.portfolio-home.menu-open { overflow: hidden; }

.site-nav__right {
  display: flex;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  align-items: center;
}

.nav-menu-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: .62rem;
  align-items: center;
  padding: 9px 14px 9px 16px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-tint);
  color: var(--home-paper);
  font-family: var(--home-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  cursor: pointer;
  transition: border-color 340ms ease, background 340ms ease, transform 420ms cubic-bezier(.2, .76, .2, 1);
}

.nav-menu-btn::after {
  position: absolute;
  z-index: -1;
  right: 12%;
  bottom: -34%;
  left: 12%;
  height: 88%;
  background: radial-gradient(ellipse 72% 100% at 50% 100%, rgba(var(--glass-glow-soft), .8), transparent 72%);
  content: '';
  filter: blur(11px);
  opacity: .34;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.nav-menu-btn__bars { display: grid; gap: 3px; width: 15px; }
.nav-menu-btn__bars i {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  opacity: .8;
  transition: width 420ms cubic-bezier(.2, .76, .2, 1), opacity 320ms ease;
}
.nav-menu-btn__bars i:nth-child(1) { width: 15px; }
.nav-menu-btn__bars i:nth-child(2) { width: 10px; }
.nav-menu-btn__bars i:nth-child(3) { width: 13px; }

.nav-menu-btn:hover,
.nav-menu-btn:focus-visible {
  border-color: rgba(var(--glass-glow-soft), .5);
  background: var(--glass-tint-strong);
  outline: none;
  transform: translateY(-1px);
}

.nav-menu-btn:hover::after,
.nav-menu-btn:focus-visible::after { opacity: .95; }
.nav-menu-btn:hover .nav-menu-btn__bars i { width: 15px; opacity: 1; }
.nav-menu-btn:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 0 3px rgba(var(--glass-glow), .35); }

/* over the paper half */
.site-nav.is-on-light .nav-menu-btn {
  border-color: rgba(23, 47, 75, .22);
  background: rgba(23, 47, 75, .05);
  color: #172f4b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.site-nav.is-on-light .nav-menu-btn::after { opacity: .18; }

/* --- the sheet ----------------------------------------------------- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  /* the row has to be definite, or the sheet's height:100% resolves against an
     auto row, the sheet grows to its own content, .site-menu__scroll never gets
     anything to scroll, and every row past the fold is clipped away for good. */
  grid-template-rows: minmax(0, 1fr);
  justify-items: end;
  /* the closed sheet is parked 26px right of the viewport so it slides in.
     visibility:hidden still takes part in layout, so without this clip the
     parked sheet widens the document. */
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 460ms ease, visibility 460ms;
  visibility: hidden;
}

.portfolio-home.menu-open .site-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.site-menu__veil {
  position: absolute;
  inset: 0;
  background: rgba(6, 7, 9, .7);
  backdrop-filter: blur(11px) saturate(120%);
  -webkit-backdrop-filter: blur(11px) saturate(120%);
}

.site-menu__sheet {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  width: min(560px, 100%);
  height: 100%;
  border: 0;
  border-left: 1px solid var(--glass-line);
  background:
    radial-gradient(ellipse 120% 46% at 50% 104%, rgba(var(--glass-glow), .3), transparent 72%),
    rgba(13, 15, 19, .89);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: -40px 0 90px -50px rgba(0, 0, 0, .95);
  transform: translateX(26px);
  transition: transform 620ms cubic-bezier(.2, .76, .2, 1);
}

.portfolio-home.menu-open .site-menu__sheet { transform: none; }

/* the light rising up the sheet's own bottom edge */
.site-menu__sheet::after {
  position: absolute;
  z-index: 0;
  right: 8%;
  bottom: -6%;
  left: 8%;
  height: 26%;
  background: radial-gradient(ellipse 70% 100% at 50% 104%, rgba(var(--glass-glow-soft), .5), transparent 72%);
  content: '';
  filter: blur(40px);
  opacity: .8;
  pointer-events: none;
  animation: glassBreath 8s ease-in-out infinite;
}

.site-menu__bar {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 3vw, 30px) clamp(20px, 4vw, 42px);
  border-bottom: 1px solid var(--glass-line);
}

.site-menu__bar .case-label { margin: 0; }

.site-menu__close {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(237, 239, 242, .06);
  color: var(--paper);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 300ms ease, background 300ms ease;
}

.site-menu__close:hover,
.site-menu__close:focus-visible {
  border-color: rgba(var(--glass-glow-soft), .55);
  background: rgba(237, 239, 242, .14);
}

.site-menu__close span { font-size: 14px; }

.site-menu__scroll {
  position: relative;
  z-index: 2;
  overflow-y: auto;
  padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 42px) clamp(48px, 8vw, 80px);
  overscroll-behavior: contain;
}

/* --- the three top-level doors -------------------------------------- */

.site-menu__lead { display: grid; gap: 8px; }

.site-menu__big {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .1rem 1rem;
  align-items: baseline;
  padding: 15px 18px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: rgba(237, 239, 242, .04);
  transition: border-color 340ms ease, background 340ms ease, transform 420ms cubic-bezier(.2, .76, .2, 1);
}

.site-menu__big span {
  grid-row: 1 / span 2;
  color: rgba(237, 239, 242, .38);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .12em;
}

.site-menu__big strong {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.site-menu__big small {
  color: rgba(237, 239, 242, .5);
  font-family: var(--home-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-menu__big:hover,
.site-menu__big:focus-visible {
  border-color: rgba(var(--glass-glow-soft), .45);
  background: rgba(var(--glass-glow), .12);
  outline: none;
  transform: translateX(4px);
}

/* --- a market and its brands ---------------------------------------- */

.site-menu__group { margin-top: clamp(26px, 4vw, 38px); }

.site-menu__market {
  display: grid;
  gap: .18rem;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-line);
}

.site-menu__market span {
  color: rgba(var(--glass-glow-soft), .8);
  font-family: var(--home-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.site-menu__market strong {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 400;
  letter-spacing: -.02em;
}

.site-menu__market small {
  color: rgba(237, 239, 242, .46);
  font-family: var(--home-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-menu__market:hover strong,
.site-menu__market:focus-visible strong { color: rgb(var(--glass-glow-soft)); }

.site-menu__list { margin: 0; padding: 0; list-style: none; }

.site-menu__list a {
  display: grid;
  grid-template-columns: 34px 26px minmax(0, 1fr);
  gap: .05rem .9rem;
  align-items: center;
  padding: 11px 12px 11px 8px;
  border-radius: 12px;
  border-bottom: 1px solid rgba(237, 239, 242, .06);
  transition: background 320ms ease, transform 400ms cubic-bezier(.2, .76, .2, 1);
}

.site-menu__list i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--glass-line);
  border-radius: 9px;
  background: rgba(237, 239, 242, .05);
  overflow: hidden;
}

.site-menu__list i img { width: 76%; height: 76%; object-fit: contain; opacity: .88; }

.site-menu__list span {
  grid-row: 1 / span 2;
  color: rgba(237, 239, 242, .34);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .1em;
}

.site-menu__list strong {
  align-self: end;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.01em;
}

.site-menu__list small {
  align-self: start;
  color: rgba(237, 239, 242, .44);
  font-family: var(--home-mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-menu__list a:hover,
.site-menu__list a:focus-visible {
  background: rgba(var(--glass-glow), .13);
  outline: none;
  transform: translateX(5px);
}

.site-menu__list a:hover i,
.site-menu__list a:focus-visible i { border-color: rgba(var(--glass-glow-soft), .5); }
.site-menu__list a:hover span,
.site-menu__list a:focus-visible span { color: rgb(var(--glass-glow-soft)); }

/* her own brand gets the one warm accent in an otherwise blue sheet —
   the same exception the section itself is ([[portfolio-zede-glow]]) */
.site-menu__mine a:hover,
.site-menu__mine a:focus-visible { background: rgba(211, 38, 85, .16); }
.site-menu__mine a:hover span,
.site-menu__mine a:focus-visible span { color: rgb(233, 172, 129); }

/* the sheet's own row-by-row entrance */
.site-menu__lead > *,
.site-menu__group {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1);
}

.portfolio-home.menu-open .site-menu__lead > *,
.portfolio-home.menu-open .site-menu__group { opacity: 1; transform: none; }
.portfolio-home.menu-open .site-menu__lead > :nth-child(1) { transition-delay: 90ms; }
.portfolio-home.menu-open .site-menu__lead > :nth-child(2) { transition-delay: 150ms; }
.portfolio-home.menu-open .site-menu__lead > :nth-child(3) { transition-delay: 210ms; }
.portfolio-home.menu-open .site-menu__group:nth-of-type(1) { transition-delay: 280ms; }
.portfolio-home.menu-open .site-menu__group:nth-of-type(2) { transition-delay: 350ms; }

@media (max-width: 620px) {
  .site-links { display: none; }
  .site-menu__sheet { width: 100%; border-left: 0; }
  .site-menu__list a { grid-template-columns: 30px 22px minmax(0, 1fr); }
  .site-menu__list i { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu__sheet::after { animation: none; }
  .site-menu__sheet { transform: none; }
  .site-menu__lead > *,
  .site-menu__group { opacity: 1; transform: none; }
}

/* ==================================================================
   CONTACT, REBUILT
   ------------------------------------------------------------------
   Zainab, 2026-09-01, with a reference attached: "عدل صفحة الكونتاكت
   بالشكل اللي انا حطاهولك بس يبقى احسن منه وبثيم البورتفوليو بتاعي".

   Taken from the reference: the two-column split (a very large
   headline left, iconed detail rows right), the dot field, the blue
   bloom behind the headline, and the second "Start a conversation"
   block underneath. (2026-09-25: that second block was merged into the
   intro at her request: one heading, one line of copy, the four cards,
   with the mail card carrying the main glow.)

   Changed, because the reference is a template and this page is not:
   the rows are glass cards with the site's own underlight rather than
   flat icon+text pairs; the dot field is masked so it fades instead of
   stopping on a hard edge; the headline keeps her Archivo weight and
   the -.075em tracking the rest of the page uses; and every row says
   what it is FOR, which the reference's rows do not.

   The old `.contact-section__intro` / `__details` rules above are now
   unused — left in place because the client pages still link this file
   and removing them is a separate, verifiable change.
================================================================== */

.contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* the rule further up still sets `width: min(100%, 1600px)`, and this
     stylesheet is content-box throughout — without this the horizontal
     padding is added on top of the viewport width and the whole document
     scrolls ~200px past the window. Same trap as the full-bleed strips. */
  box-sizing: border-box;
  min-height: 100vh;
  padding: clamp(100px, 12vw, 190px) clamp(18px, 7vw, 110px) clamp(28px, 4vw, 48px);
  background:
    radial-gradient(ellipse 54% 44% at 6% 22%, rgba(var(--glass-glow), .16), transparent 72%),
    radial-gradient(ellipse 34% 30% at 96% 74%, rgba(136, 36, 55, .1), transparent 74%),
    #0b0e12;
}

/* --- the two atmospheres ------------------------------------------- */

/* the dot field. Masked at both ends: in the reference it simply stops,
   and the cut edge is the cheapest-looking thing on that page. */
.contact-dots {
  position: absolute;
  z-index: 0;
  top: 34%;
  left: clamp(18px, 7vw, 110px);
  width: min(360px, 42vw);
  height: min(260px, 30vw);
  background-image: radial-gradient(rgba(237, 239, 242, .3) 1px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: .5;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 74% 78% at 22% 30%, #000, transparent 76%);
  mask-image: radial-gradient(ellipse 74% 78% at 22% 30%, #000, transparent 76%);
}

/* the light from below, at page scale — the same lamp as every card,
   just very large and very slow */
.contact-aurora {
  position: absolute;
  z-index: 0;
  right: 6%;
  bottom: -22%;
  left: 6%;
  height: 58%;
  background:
    radial-gradient(ellipse 52% 100% at 34% 104%, rgba(var(--glass-glow-soft), .34), transparent 70%),
    radial-gradient(ellipse 44% 100% at 74% 108%, rgba(var(--glass-glow), .26), transparent 72%);
  filter: blur(60px);
  opacity: .8;
  pointer-events: none;
  animation: contactAurora 16s ease-in-out infinite alternate;
}

@keyframes contactAurora {
  0%   { opacity: .6;  transform: translate3d(-2%, 2%, 0) scaleX(1); }
  100% { opacity: .95; transform: translate3d(3%, -3%, 0) scaleX(1.1); }
}

.contact-section > *:not(.contact-dots):not(.contact-aurora) { position: relative; z-index: 1; }

/* --- top: headline + cards ----------------------------------------- */

.contact-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.contact-intro .case-label { margin: 0 0 clamp(1.4rem, 3vw, 2.4rem); }

.contact-intro h2 {
  margin: 0;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(64px, 10.5vw, 168px);
  font-weight: 820;
  letter-spacing: -.075em;
  line-height: .82;
}

.contact-intro__sub {
  max-width: 34ch;
  margin: clamp(1.6rem, 3vw, 2.6rem) 0 0;
  color: rgba(237, 239, 242, .62);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.55;
}

.contact-cards {
  display: grid;
  gap: clamp(10px, 1.2vw, 16px);
  font-style: normal;
}

.contact-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: .12rem 1.1rem;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  border-radius: clamp(14px, 1.4vw, 20px);
  color: var(--paper);
}

.contact-card__icon {
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--glass-line);
  border-radius: 15px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
  color: rgba(237, 239, 242, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: border-color 380ms ease, color 380ms ease, transform 460ms cubic-bezier(.2, .76, .2, 1);
}

.contact-card__icon svg { width: 22px; height: 22px; }

.contact-card__label {
  color: rgba(237, 239, 242, .42);
  font-family: var(--home-mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.contact-card__value {
  overflow-wrap: anywhere;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(17px, 1.7vw, 23px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.contact-card__hint {
  color: rgba(237, 239, 242, .4);
  font-family: var(--home-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.contact-card:hover,
.contact-card:focus-visible { transform: translateY(-3px); }

.contact-card:hover .contact-card__icon,
.contact-card:focus-visible .contact-card__icon {
  border-color: rgba(var(--glass-glow-soft), .6);
  color: #fff;
  transform: scale(1.05);
}

.contact-card:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--glass-glow), .34); }

/* the location row is not a link — it keeps the pane and the glow but
   never lifts, so nothing invites a click that does nothing */
.contact-card--static { cursor: default; }
.contact-card--static:hover { transform: none; }
.contact-card--static::after { opacity: .3; }

/* the way back sits under the intro copy, sized to its label */
.contact-intro .contact-ghost {
  display: inline-flex;
  gap: 1.6rem;
  margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
}

/* mail is the main way in, so its card carries the breathing glow and a
   slightly stronger edge than the other three */
.contact-card--primary { border-color: rgba(var(--glass-glow-soft), .42); }

.contact-ghost {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 16px clamp(20px, 2.4vw, 30px);
  border-radius: 999px;
  color: rgba(237, 239, 242, .7);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contact-ghost:hover,
.contact-ghost:focus-visible { color: var(--paper); transform: translateY(-2px); }

.contact-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin-top: clamp(60px, 8vw, 110px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(237, 239, 242, .08);
  color: rgba(237, 239, 242, .38);
  font-family: var(--home-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .contact-top { grid-template-columns: minmax(0, 1fr); }
  .contact-dots { top: auto; bottom: 8%; opacity: .3; }
}

@media (max-width: 520px) {
  .contact-intro h2 { font-size: clamp(52px, 17vw, 76px); }
  .contact-card { grid-template-columns: 44px minmax(0, 1fr); gap: .1rem .9rem; }
  .contact-card__icon { width: 44px; height: 44px; border-radius: 13px; }
  .contact-card__icon svg { width: 19px; height: 19px; }
  .contact-foot { flex-direction: column; gap: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-aurora { animation: none; }
}

/* ==================================================================
   ZEDÉ GLOW, AS A CASE
   ------------------------------------------------------------------
   Zainab, 2026-09-01: "Zede Glow بالنسبالي مش مجرد شغل عاوزين نعملها
   ستوري زي بندولين بيبي وانجين كورت وتحدد أوي اني البراند أونر … والحكاية
   بدأت لما قررت أبني براند خاص بيا علشان أتعلم شئ جديد".

   It was brand 10 as a short `.brand-case`: head, shop card, five
   tiles. It is still a `.brand-case` — that shell owns the paper tone,
   the ghost numeral, the bar and the gallery, and re-implementing all
   of that would only make a second thing to keep in sync — with the
   story chapters slotted between the head and the shop card:

     role → where it started → the five moves → what owning it changed
     → the shop card → the work → what it proves

   which is the Penduline shape (role → situation → decision → work →
   result → closing) told in her own voice, because here she is the
   client. `.zede-*` rather than reusing `.penduline-*`: those rules
   are full of that case's own collage geometry.

   The blue underlight would fight rose on paper, so on the light half
   the lamp becomes the brand's own colour — one token, set once.
================================================================== */

.brand-case[data-tone="light"],
.penduline-case[data-tone="light"] {
  --glass-glow: var(--brand-a);
  --glass-glow-soft: var(--brand-b);
}

/* --- my role -------------------------------------------------------- */

.zede-role {
  display: grid;
  grid-template-columns: minmax(120px, .25fr) minmax(0, 1fr);
  gap: clamp(1rem, 7vw, 8rem);
  align-items: start;
  margin-top: clamp(40px, 5vw, 70px);
  padding-block: clamp(34px, 5vw, 62px);
  border-block: 1px solid rgba(23, 47, 75, .18);
}

.zede-role span {
  color: rgba(23, 47, 75, .58);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.zede-role p {
  max-width: 62ch;
  margin: 0;
  color: var(--paper-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(17px, 1.9vw, 26px);
  font-weight: 350;
  letter-spacing: -.025em;
  line-height: 1.35;
}

/* --- where it started ------------------------------------------------ */

.zede-origin {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  margin-top: clamp(56px, 8vw, 110px);
}

.zede-origin__copy h3 {
  margin: 1.2rem 0 0;
  color: var(--paper-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.zede-origin__copy h3 strong { font-weight: 780; }

.zede-origin__copy p {
  max-width: 52ch;
  margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
  color: rgba(23, 47, 75, .74);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
}

.zede-origin__note {
  padding-left: 1.1rem;
  border-left: 2px solid rgba(var(--brand-a), .6);
  color: var(--paper-ink) !important;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(17px, 1.6vw, 23px) !important;
  font-weight: 400;
  letter-spacing: -.02em;
}

.zede-origin__visual {
  margin: 0;
  border-radius: clamp(14px, 1.4vw, 20px);
}

.zede-origin__visual img {
  display: block;
  width: 100%;
  border: 1px solid rgba(23, 47, 75, .14);
  border-radius: inherit;
  box-shadow: 0 30px 60px -40px rgba(23, 47, 75, .6);
}

.zede-origin__visual figcaption {
  margin-top: 1rem;
  color: rgba(23, 47, 75, .6);
  font-family: var(--home-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  line-height: 1.7;
}

/* --- the five moves --------------------------------------------------- */

.zede-build { margin-top: clamp(70px, 10vw, 140px); }

.zede-build__head h3 {
  margin: 1.1rem 0 0;
  color: var(--paper-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(32px, 4.6vw, 70px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: .98;
}

.zede-build__head h3 strong { font-weight: 780; }

.zede-build__head > p {
  max-width: 50ch;
  margin: 1.4rem 0 0;
  color: rgba(23, 47, 75, .68);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
}

/* Five columns, explicitly. `auto-fit, minmax(268px, 1fr)` fitted four
   at 1440 and left the fifth — the brand going live, the payoff of the
   whole sequence — orphaned on a row of its own. The order is the
   point here, so the row is the layout. */
.zede-build__steps {
  position: relative;
  display: grid;
  /* five narrow columns broke the sentences into one word per line. Three
     wider cards read as a sequence and still keep the order. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
  margin: clamp(34px, 5vw, 58px) 0 0;
  padding: 0;
  list-style: none;
}

/* the thread the five were strung on, back when they sat on one line */
.zede-build__steps::before {
  display: none;
  position: absolute;
  top: -22px;
  right: 6%;
  left: 6%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--brand-a), .45), rgba(var(--brand-b), .45), transparent);
  content: '';
}

.zede-build__steps li {
  display: grid;
  align-content: start;
  gap: .55rem;
  box-sizing: border-box;
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid rgba(23, 47, 75, .16);
  border-radius: clamp(14px, 1.4vw, 20px);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, .22) 60%, transparent),
    rgba(var(--brand-b), .1);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: border-color 420ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1);
}

/* the fifth card is the brand going live — it carries the brand colour
   instead of borrowing it, so the sequence has somewhere to land */
.zede-build__steps li:last-child {
  border-color: rgba(var(--brand-a), .42);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .62), rgba(255, 255, 255, .12) 60%, transparent),
    rgba(var(--brand-a), .14);
}

.zede-build__steps li:hover { border-color: rgba(var(--brand-a), .5); transform: translateY(-4px); }

.zede-step__n {
  color: rgba(var(--brand-a), .85);
  font-family: var(--home-mono);
  font-size: 10px;
  letter-spacing: .22em;
}

.zede-build__steps strong {
  color: var(--paper-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.zede-build__steps p {
  margin: 0;
  color: rgba(23, 47, 75, .72);
  font-size: 14.5px;
  line-height: 1.68;
}

/* --- what owning it changed -------------------------------------------- */

.zede-owner {
  margin-top: clamp(70px, 10vw, 140px);
  padding-block: clamp(40px, 6vw, 80px);
  border-block: 1px solid rgba(23, 47, 75, .18);
}

.zede-owner h3 {
  max-width: 22ch;
  margin: 1.1rem 0 0;
  color: var(--paper-ink);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.04;
}

.zede-owner h3 strong { font-weight: 780; }
.zede-owner h3 em { font-style: italic; font-weight: 400; }

.zede-owner > p {
  max-width: 56ch;
  margin: clamp(1.4rem, 2.6vw, 2.2rem) 0 0;
  color: rgba(23, 47, 75, .72);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.65;
}

/* --- what it proves ------------------------------------------------------ */

.zede-closing {
  margin-top: clamp(56px, 8vw, 110px);
  padding-top: clamp(30px, 4vw, 52px);
  border-top: 1px solid rgba(23, 47, 75, .18);
}

.zede-closing > p:last-child {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  color: rgba(23, 47, 75, .74);
  font-family: 'Archivo', Arial, sans-serif;
  font-size: clamp(21px, 2.6vw, 36px);
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.22;
}

.zede-closing strong { color: var(--paper-ink); font-weight: 700; }

/* the lede now opens on a claim, so its first clause carries weight */
.zede-case .brand-case__lede strong { font-weight: 700; }

@media (max-width: 1180px) {
  .zede-build__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zede-build__steps::before { display: none; }
}

@media (max-width: 900px) {
  .zede-role,
  .zede-origin { grid-template-columns: minmax(0, 1fr); }
  .zede-role { gap: 1rem; }
}

@media (max-width: 620px) {
  .zede-build__steps { grid-template-columns: minmax(0, 1fr); }
}

/* Every menu row lands on a section whose first line is its bar or its
   eyebrow, and the fixed nav is 76px tall — without this the line you
   jumped to sits underneath it. Only the anchors the menu and the nav
   actually target, so nothing else's scroll position moves. */
#about,
#work-map,
#market-uae,
#market-egypt,
#case-sfi,
#case-engine,
#case-penduline,
#brand-cady-royal,
#brand-gps,
#brand-gulf-express,
#brand-makkiya,
#brand-reels-marketing,
#brand-toffee-kids,
#brand-oral,
#brand-zede-glow,
#reels,
#contact { scroll-margin-top: 88px; }

@media (max-width: 560px) {
  #about, #work-map, #market-uae, #market-egypt,
  #case-sfi, #case-engine, #case-penduline,
  #brand-cady-royal, #brand-gps, #brand-gulf-express, #brand-makkiya, #brand-reels-marketing,
  #brand-toffee-kids, #brand-oral, #brand-zede-glow, #reels,
  #contact { scroll-margin-top: 76px; }
}

/* ------------------------------------------------------------------
   Penduline campaign archive.
   The existing campaign rail is now the index: every cover opens the
   complete set of designs without leaving the case study.
------------------------------------------------------------------ */
.penduline-campaign-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--penduline-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
}

.penduline-campaign-card__cover {
  position: relative;
  display: block;
}

.penduline-campaign-card__open {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  min-height: 34px;
  padding: .55rem .75rem;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 999px;
  background: rgba(15, 42, 67, .78);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  backdrop-filter: blur(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.penduline-campaign-card__open svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.penduline-campaign-card > span:not(.penduline-campaign-card__cover) {
  display: flex;
  gap: .8rem;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.2rem;
  color: rgba(23, 47, 75, .55);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.penduline-campaign-card small {
  color: rgba(23, 47, 75, .46);
  font: inherit;
  letter-spacing: .06em;
}

.penduline-campaign-card > strong {
  display: block;
  margin-top: .55rem;
  font-family: Arial, sans-serif;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
  text-align: left;
}

.penduline-campaign-card img {
  transition: transform 280ms cubic-bezier(.2, .76, .2, 1), box-shadow 280ms ease;
}

.penduline-campaign-card:hover img,
.penduline-campaign-card:focus-visible img {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 34px 72px rgba(34, 91, 132, .24);
}

.penduline-campaign-card:hover .penduline-campaign-card__open,
.penduline-campaign-card:focus-visible .penduline-campaign-card__open {
  opacity: 1;
  transform: none;
}

.penduline-campaign-card:focus-visible {
  outline: none;
}

.penduline-campaign-card:focus-visible .penduline-campaign-card__cover {
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow: 0 0 0 4px rgba(23, 47, 75, .24);
}

body.penduline-campaign-open { overflow: hidden; }

.portfolio-home .penduline-campaign-viewer {
  position: fixed;
  inset: 0;
  z-index: 115;
  /* it is a <section>, so the page's section padding was leaking in and
     pushing the sticky head 126px below the top of its own scrollport. */
  padding: 0;
  visibility: hidden;
  opacity: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 85% 5%, rgba(104, 169, 197, .16), transparent 34%),
    #f2efe8;
  color: #173552;
  pointer-events: none;
  margin: 0;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.penduline-campaign-viewer.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 260ms ease;
}

.penduline-campaign-viewer__head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(160px, .5fr) minmax(0, 1fr) 52px;
  gap: clamp(1.2rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(18px, 3vw, 34px) clamp(18px, 5vw, 76px);
  border-bottom: 1px solid rgba(23, 47, 75, .18);
  background: rgba(242, 239, 232, .88);
  backdrop-filter: blur(20px);
}

.penduline-campaign-viewer__back,
.penduline-campaign-viewer__close {
  border: 0;
  background: transparent;
  color: #173552;
  cursor: pointer;
}

.penduline-campaign-viewer__back {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  width: max-content;
  padding: .55rem 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.penduline-campaign-viewer__back svg,
.penduline-campaign-viewer__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.penduline-campaign-viewer__close {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(23, 47, 75, .22);
  border-radius: 50%;
}

.penduline-campaign-viewer__back:hover,
.penduline-campaign-viewer__back:focus-visible,
.penduline-campaign-viewer__close:hover,
.penduline-campaign-viewer__close:focus-visible {
  color: #3181a8;
  outline: none;
}

.penduline-campaign-viewer__head > div > p {
  margin: 0;
  color: rgba(23, 47, 75, .58);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.penduline-campaign-viewer__head h2 {
  margin: .45rem 0 .35rem;
  color: #173552;
  font-family: Arial, sans-serif;
  font-size: clamp(38px, 5.8vw, 86px);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: .95;
}

.penduline-campaign-viewer__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 24px);
  align-items: start;
  max-width: 1720px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 76px) clamp(18px, 5vw, 76px) clamp(70px, 9vw, 140px);
}

.penduline-campaign-post {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(23, 47, 75, .14);
  border-radius: clamp(16px, 1.8vw, 26px);
  background: rgba(255, 255, 255, .54);
  box-shadow: 0 22px 58px rgba(34, 91, 132, .1);
}

.penduline-campaign-post img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, .34);
}

/* the campaign's landscape opener runs the full width, like a cover */
.penduline-campaign-post--wide { grid-column: 1 / -1; }

/* --- the head folds away once you start scrolling the campaign ------- */

.penduline-campaign-viewer__head {
  transition: padding-block 340ms cubic-bezier(.2, .76, .2, 1);
}

.penduline-campaign-viewer__head > div {
  overflow: hidden;
  max-height: 40svh;
  transition: opacity 220ms ease, max-height 340ms cubic-bezier(.2, .76, .2, 1);
}

.penduline-campaign-viewer.is-scrolled .penduline-campaign-viewer__head {
  padding-block: clamp(10px, 1.4vw, 16px);
}

.penduline-campaign-viewer.is-scrolled .penduline-campaign-viewer__head > div {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .penduline-campaign-viewer__head,
  .penduline-campaign-viewer__head > div { transition: none; }
}

.penduline-campaign-post figcaption {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .85rem 1rem 1rem;
  color: rgba(23, 47, 75, .58);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.penduline-campaign-post figcaption strong {
  color: #173552;
  font-weight: 500;
}

@media (hover: none) {
  .penduline-campaign-card__open {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .penduline-campaign-viewer__head {
    grid-template-columns: 1fr auto;
    gap: 1rem;
  }

  .penduline-campaign-viewer__head > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .penduline-campaign-viewer__close {
    grid-column: 2;
    grid-row: 1;
  }

  .penduline-campaign-viewer__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 24px;
  }
}

@media (max-width: 520px) {
  /* Campaign posts stay in a grid on phones — one per row made an 11-post
     campaign an endless scroll and hid the run of the campaign. */
  .penduline-campaign-viewer__gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .penduline-campaign-card > strong { font-size: 24px; }
}


/* ==================================================================
   REELS — one strip under each brand it belongs to.

   Short video is where a content decision is visible in three seconds,
   so it sits with its brand rather than in a gallery of its own.
   Each card uses a locally saved copy of the Instagram cover, so the
   work remains visible when embeds or third-party requests are blocked.
   The whole card stays a plain link to the original post on Instagram.
================================================================== */

.brand-reels {
  width: min(100%, 1600px);
  margin-inline: auto;
  box-sizing: border-box;
  padding: clamp(54px, 7vw, 96px) clamp(18px, 5vw, 76px) clamp(64px, 8vw, 110px);
  border-top: 1px solid var(--edge);
  background: #08090b;
  color: var(--paper);
}

.brand-reels[data-tone="light"] {
  border-top-color: rgba(23, 47, 75, .18);
  background: var(--paper-ground, #f2efe8);
  color: var(--paper-ink, #172f4b);
}

.brand-reels__head {
  display: grid;
  grid-template-columns: minmax(0, .42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
  padding-bottom: clamp(28px, 4vw, 46px);
}

.brand-reels__note {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
}

.brand-reels[data-tone="light"] .brand-reels__note { color: rgba(23, 47, 75, .74); }
.brand-reels[data-tone="light"] .case-label { color: rgba(23, 47, 75, .58); }

.brand-reels__all {
  display: inline-block;
  margin-top: 1.1rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .15em;
  opacity: .7;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 320ms ease;
}

.brand-reels__all:hover,
.brand-reels__all:focus-visible { opacity: 1; }

.brand-reels__grid {
  display: grid;
  grid-template-columns: repeat(var(--reel-cols, 5), minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 20px);
  align-items: start;
}

/* Static work is deliberately separated from the reel strip: no play
   control, no "Watch" label, and every design keeps its export ratio. */
.brand-designs {
  width: min(100%, 1600px);
  margin-inline: auto;
  box-sizing: border-box;
  padding: clamp(54px, 7vw, 96px) clamp(18px, 5vw, 76px) clamp(72px, 9vw, 124px);
  border-top: 1px solid var(--edge);
  background: #08090b;
  color: var(--paper);
}

.brand-designs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}

.brand-design-card {
  min-width: 0;
  margin: 0;
}

.brand-designs__grid .brand-design-card:nth-child(n + 9) { display: none; }
.brand-designs.is-expanded .brand-design-card:nth-child(n + 9) { display: block; }

.brand-designs__more {
  display: flex;
  min-height: 48px;
  margin: clamp(30px, 4vw, 54px) auto 0;
  padding: 0 1.35rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(237, 239, 242, .24);
  border-radius: 999px;
  background: rgba(237, 239, 242, .045);
  color: var(--paper);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color 260ms ease, background 260ms ease, transform 260ms ease;
}

.brand-designs__more:hover,
.brand-designs__more:focus-visible {
  border-color: rgba(237, 239, 242, .58);
  background: rgba(237, 239, 242, .1);
  transform: translateY(-2px);
}

.brand-design-card__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: clamp(12px, 1.25vw, 18px);
  background: #0b0d10;
  transition: border-color 420ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1), box-shadow 480ms ease;
}

.brand-design-card--portrait .brand-design-card__frame { aspect-ratio: 4 / 5; }

.brand-design-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 780ms cubic-bezier(.2, .76, .2, 1);
}

.brand-design-card figcaption {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  padding: .8rem .2rem 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .brand-design-card:hover .brand-design-card__frame {
    border-color: rgba(237, 239, 242, .34);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
    transform: translateY(-4px);
  }

  .brand-design-card:hover img { transform: scale(1.025); }
}

/* --- the card ------------------------------------------------------
   Instagram's own embed drags its whole chrome in with it — the white
   footer, the like count, "Add a comment" — and none of that belongs on
   this page. So the card is ours: the shape of a reel, a play mark, and
   the whole thing is the link. Tapping it opens the reel on Instagram,
   which is where it should be watched anyway.
------------------------------------------------------------------- */

.reel-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.reel-card__frame {
  position: relative;
  display: grid;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--edge);
  border-radius: clamp(14px, 1.6vw, 22px);
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(237, 239, 242, .07), transparent 70%),
    linear-gradient(160deg, #14171c 0%, #0b0d10 60%, #101318 100%);
  transition: border-color 420ms ease, transform 520ms cubic-bezier(.2, .76, .2, 1), box-shadow 480ms ease;
}

.reel-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms cubic-bezier(.2, .76, .2, 1);
}

.reel-card__cover--contain {
  object-fit: contain;
  background: #0b0d10;
}

.reel-card__frame::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(0, 0, 0, .18));
  content: "";
  pointer-events: none;
}

.brand-reels[data-tone="light"] .reel-card__frame {
  border-color: rgba(23, 47, 75, .16);
  background:
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(23, 47, 75, .07), transparent 70%),
    linear-gradient(160deg, #eae6dd 0%, #f2efe8 60%, #e6e2d9 100%);
}

.reel-card__play {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(38px, 3.5vw, 52px);
  height: clamp(38px, 3.5vw, 52px);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(8, 9, 11, .66);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  color: #fff;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: transform 520ms cubic-bezier(.2, .76, .2, 1), border-color 420ms ease, background 420ms ease;
}

.brand-reels[data-tone="light"] .reel-card__play { border-color: rgba(255, 255, 255, .72); }

.reel-card__play svg {
  width: 31%;
  height: 31%;
  fill: currentColor;
  opacity: .94;
  transform: translateX(5%);
}

.reel-card:hover .reel-card__frame,
.reel-card:focus-visible .reel-card__frame {
  border-color: rgba(237, 239, 242, .34);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
  transform: translateY(-4px);
}

.reel-card:hover .reel-card__cover,
.reel-card:focus-visible .reel-card__cover { transform: scale(1.025); }

.brand-reels[data-tone="light"] .reel-card:hover .reel-card__frame,
.brand-reels[data-tone="light"] .reel-card:focus-visible .reel-card__frame {
  border-color: rgba(23, 47, 75, .42);
  box-shadow: 0 30px 70px -44px rgba(23, 47, 75, .5);
}

.reel-card:hover .reel-card__play,
.reel-card:focus-visible .reel-card__play {
  border-color: #fff;
  background: rgba(8, 9, 11, .68);
  transform: scale(1.08);
}

.brand-reels[data-tone="light"] .reel-card:hover .reel-card__play,
.brand-reels[data-tone="light"] .reel-card:focus-visible .reel-card__play {
  background: rgba(8, 9, 11, .68);
}

.reel-card__meta {
  display: flex;
  gap: .8rem;
  justify-content: space-between;
  padding: .8rem .2rem 0;
  color: var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.brand-reels[data-tone="light"] .reel-card__meta { color: rgba(23, 47, 75, .58); }

.reel-card__meta > span:last-child {
  border-bottom: 1px solid currentColor;
  opacity: .75;
  transition: opacity 320ms ease;
}

.reel-card:hover .reel-card__meta > span:last-child,
.reel-card:focus-visible .reel-card__meta > span:last-child { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .brand-design-card__frame,
  .brand-design-card__frame img,
  .reel-card__frame,
  .reel-card__cover,
  .reel-card__play { transition: none; }
  .brand-design-card:hover .brand-design-card__frame,
  .brand-design-card:hover img,
  .reel-card:hover .reel-card__frame { transform: none; }
  .reel-card:hover .reel-card__cover { transform: none; }
}

@media (max-width: 1100px) {
  .brand-reels__head { grid-template-columns: minmax(0, 1fr); }
  .brand-reels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-designs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* Three across from tablet down, so the count never goes UP as the screen
     gets smaller. */
  .brand-reels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-designs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  /* Phones keep the strip reading as a strip: three reels across, the way the
     grid reads on Instagram itself. Collapsing to one column turned every
     thumbnail into a full-width block and lost the "body of work" impression. */
  .brand-reels__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .brand-reels__grid .reel-card__meta { font-size: 9px; letter-spacing: .06em; }
  .brand-reels__grid .reel-card__play { width: 26px; height: 26px; }
}


/* ==================================================================
   AUDIT FIXES
   ================================================================== */

/* The page's <h1> carries the title for search engines and screen
   readers. It is not drawn, because the design opens on the intro
   rather than on a written headline. */
.a11y-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* A full-screen panel brings its own Close control, and it lands in the
   same corner as the site MENU button — the two were drawing on top of
   each other. The site bar steps aside for the whole time a panel is
   open, so the only control in that corner is the panel's own.
   (.site-links and .site-nav__where were already handled for the
   practice panel; the MENU button and the Engine Court chapter were
   not.) */
.portfolio-home.practice-panel-open .site-nav,
.portfolio-home.engine-chapter-open .site-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

/* ==================================================================
   PENDULINE COVER — recomposed
   The old cover cropped the campaign posts against the top edge, then
   left a large empty field under the title, with the section number,
   the name and the market label pulling in three different directions.
   The work now fills the frame as one wall behind the name, and the
   three pieces of copy stack as a single block on the left.
   ================================================================== */

.penduline-hero {
  min-height: min(820px, 86svh);
  padding: clamp(56px, 7vw, 96px) clamp(18px, 5vw, 76px) clamp(48px, 6vw, 84px);
  align-content: end;
}

/* One continuous wall of campaign work, bleeding off both edges, instead
   of a band of posts sliced by the top of the section. */
.penduline-hero__worlds {
  /* Two rows of four keeps every post in its own 4:5 frame — a single row
     across the full height would crop each one to a sliver. The grid is
     taller than the hero on purpose, so the wall bleeds off top and bottom
     instead of ending in a hard edge. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 5px;
  inset: -8% -2% auto -2%;
  height: auto;
  padding: 0;
  transform: none;
  filter: saturate(1.03);
}

.penduline-hero__worlds img {
  min-width: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

.penduline-hero__worlds img:nth-child(even),
.penduline-hero__worlds img:nth-child(3n) { transform: none; }

/* The scrim used to wash the artwork out by 86% down. It now holds the
   images at full strength through the top two-thirds and only turns
   solid where the name actually sits. */
.penduline-hero::after {
  /* The copy sits bottom-left, so the scrim clears a calm column there and
     lets the work stay vivid on the right, rather than bleaching the whole
     lower half the way the original did. */
  background:
    linear-gradient(97deg,
      rgba(242, 239, 232, .97) 0%,
      rgba(242, 239, 232, .93) 26%,
      rgba(242, 239, 232, .55) 44%,
      rgba(242, 239, 232, .06) 62%,
      rgba(242, 239, 232, 0) 100%),
    linear-gradient(180deg,
      rgba(242, 239, 232, .28) 0%,
      rgba(242, 239, 232, 0) 22%,
      rgba(242, 239, 232, 0) 62%,
      rgba(242, 239, 232, .72) 92%,
      rgba(242, 239, 232, .96) 100%);
}

/* Section number, name and market read as one left-aligned block. */
.penduline-hero__copy {
  display: block;
  max-width: 20ch;
}

.penduline-hero__copy .case-label {
  margin: 0 0 .7rem;
  color: rgba(23, 47, 75, .72);
}

.penduline-hero__copy h2 {
  margin: 0;
  font-size: clamp(58px, 9.4vw, 150px);
  line-height: .82;
}

.penduline-hero__copy > p:last-child {
  max-width: 34ch;
  margin: 1.15rem 0 0;
  color: rgba(23, 47, 75, .78);
  text-align: left;
}

@media (max-width: 760px) {
  .penduline-hero { min-height: min(660px, 78svh); }
  .penduline-hero__worlds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    inset: -6% -2% auto -2%;
  }
  /* four posts is the wall on a phone; eight would run far past the frame */
  .penduline-hero__worlds img:nth-child(n + 5) { display: none; }
  .penduline-hero__copy { max-width: none; }
}

/* The opening statement lives inside the hero, so it needs its own calm
   ground rather than running across the campaign wall. */
.penduline-hero__statement {
  position: relative;
  max-width: 34ch;
  padding: 1.1rem 1.4rem 1.1rem 0;
  margin-top: clamp(2rem, 4vw, 3.6rem);
}

.penduline-hero__statement::before {
  position: absolute;
  inset: -18% -14% -22% -40%;
  background: radial-gradient(120% 100% at 22% 50%,
    rgba(242, 239, 232, .99) 0%,
    rgba(242, 239, 232, .95) 46%,
    rgba(242, 239, 232, 0) 100%);
  content: '';
  z-index: -1;
}

@media (max-width: 760px) {
  .penduline-hero__statement { max-width: none; }
  .penduline-hero__statement::before { inset: -14% -20% -20% -20%; }
}

/* ==================================================================
   RELEASE POLISH — accessibility, anchors and mobile readability
   ================================================================== */

:where(section[id], article[id], div[id]) { scroll-margin-top: 78px; }

.about-body { color: rgba(237, 239, 242, .69); }

.zede-closing p,
.case-closing p {
  hyphens: none;
  overflow-wrap: normal;
  text-wrap: balance;
}

.brand-site--offline {
  cursor: default;
  opacity: .78;
}

.brand-site--offline::after { display: none; }

@media (max-width: 760px) {
  .about-grid { grid-template-areas: "copy" "portrait"; }
  .about-copy { order: -1; }

  .site-links a,
  .site-menu__big,
  .site-menu__market,
  .site-menu__list a,
  .brand-reels__all,
  .reel-card__meta > span:last-child,
  .contact-ghost {
    min-height: 44px;
  }

  .site-links a,
  .brand-reels__all,
  .reel-card__meta > span:last-child {
    display: inline-flex;
    align-items: center;
  }

  .work-carousel__button,
  .brand-reels__grid .reel-card__play {
    width: 44px;
    height: 44px;
  }

  .penduline-hero::after {
    background:
      linear-gradient(102deg, rgba(242, 239, 232, .985) 0%, rgba(242, 239, 232, .94) 48%, rgba(242, 239, 232, .18) 78%, transparent 100%),
      linear-gradient(180deg, rgba(242, 239, 232, .18), transparent 35%, rgba(242, 239, 232, .9) 100%);
  }
}

/* Mobile fixes — 25 Sep
   1. The Penduline profile frame kept its two-column desktop grid on phones
      (its case rule outranks the generic mobile rule), which squeezed the
      copy into a one-word-wide column beside the phone. Stack it.
   2. The brand-case top bar wrapped short names onto two lines ("Cady /
      Royal") on phones. The middle meta repeats the line right below the
      title, so it steps aside on small screens. */
@media (max-width: 900px) {
  .penduline-case .profile-frame {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 3rem;
  }
  .penduline-case .profile-frame__device { justify-self: center; }
}

@media (max-width: 560px) {
  .brand-case__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .brand-case__bar span:nth-child(2) { display: none; }
  .brand-case__bar span:first-child { white-space: nowrap; }
}

/* The agency / in-house / product panels sit fixed over the page while
   hidden, so the browser counted their galleries as "in view" and fetched
   them on every first visit (~1.5 MB on a phone). Their images now stay
   unloaded until a panel is opened for the first time. */
.practice-panel:not(.is-primed) img { display: none; }