/* ===========================================================================
   Shared design floor for husseindeeb: tokens, type, chrome, components.
   Extracted from index.html so the homepage and the Startklar product page
   cannot drift apart. Page-specific rules stay in each page's own <style>.
   ========================================================================= */
/* ===========================================================================
   HUSSEIN DEEB — v2
   Grammar: object theatre. A dark stage; one object at a time is brought into
   the light, does something, and leaves. Type never sits on an object.
   Signature: the field thins.
   ========================================================================= */

:root {
  --sc-canvas:     #0A0A0C;
  --sc-surface:    #131317;
  --sc-ink:        #FFFFFF;
  --sc-ink-soft:   #9A9AA0;
  --sc-accent:     #FF5C28;
  --sc-accent-ink: #0A0A0C;

  --sc-font-display: "Manrope", system-ui, sans-serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;
  --sc-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --sc-shadow-color: 20 40% 2%;
  --sc-measure: 56ch;
  --sc-maxw: 88rem;
  /* room reserved for the fixed margin index, so copy never runs under it */
  --rail-clear: 0rem;
}

body { font-weight: 300; letter-spacing: -0.005em; }

/* Display: light, huge, tight. Hierarchy from size and weight, never a second
   face. The mono is for labels and meta only. */
.d {
  font-family: var(--sc-font-display);
  font-weight: 200;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}
.d--xl { font-size: clamp(2.5rem, 7.4vw, 7.2rem); }
.d--lg { font-size: clamp(2rem, 4.6vw, 3.75rem); }
.d--md { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.025em; line-height: 1.02; }
.d em { font-style: normal; font-weight: 500; }
.d i  { font-style: normal; color: var(--sc-accent); }

.mono {
  font-family: var(--sc-font-mono);
  font-size: clamp(0.66rem, 0.62rem + 0.16vw, 0.76rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.lede { font-size: clamp(1rem, 0.95rem + 0.4vw, 1.28rem); color: var(--sc-ink-soft); line-height: 1.6; max-width: 44ch; }
.body { color: var(--sc-ink-soft); line-height: 1.7; max-width: var(--sc-measure); }
.body + .body { margin-top: var(--sc-5); }
.body strong { color: var(--sc-ink); font-weight: 500; }

/* --------------------------------------------------- the aurora bloom ----
   Hero only. This is the single colour event on the page; everything after it
   is monochrome plus the accent. */
.bloom {
  position: absolute; inset: -20% -10% auto -10%; height: 130%;
  pointer-events: none; z-index: 0; filter: blur(72px) saturate(120%);
  opacity: 0.78;
  background:
    radial-gradient(34% 42% at 62% 30%, #FF5C28 0%, rgba(255,92,40,0) 70%),
    radial-gradient(28% 38% at 78% 22%, #C2185B 0%, rgba(194,24,91,0) 72%),
    radial-gradient(32% 40% at 86% 58%, #FFB020 0%, rgba(255,176,32,0) 72%),
    radial-gradient(40% 46% at 96% 34%, #6A2BD9 0%, rgba(106,43,217,0) 76%);
  /* Keep the bloom off the text column entirely. Masking the light away from
     the type beats laying anything over the type. */
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 26%, #000 52%);
}
@media (prefers-reduced-motion: reduce) { .bloom { filter: blur(70px); } }

/* A faint measured grid, as in both references. Structure, not decoration. */
.grid-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: clamp(70px, 9vw, 150px) clamp(70px, 9vw, 150px);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 88%);
}

/* ------------------------------------------------------- the field ------
   Fixed for the life of the page. Objects are pushed by the pointer and leave
   one per chapter. Decorative only: nothing here carries meaning. */

/* ---------------------------------------------------------- chrome ------ */
.tick {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 90;
  background: var(--sc-accent); transform: scaleX(0); transform-origin: 0 50%;
}
.idx {
  position: fixed; z-index: 80; left: clamp(0.8rem, 2vw, 1.9rem); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 0.62rem;
}
.idx a { text-decoration: none; display: flex; align-items: center; gap: 0.6rem;
  color: color-mix(in oklab, var(--sc-ink) 52%, transparent);
  transition: color 200ms var(--sc-ease-out); }
.idx a b { display: block; width: 0.85rem; height: 1px; background: currentColor; flex: none;
  transition: width 380ms var(--sc-ease-out); }
.idx a span { font-family: var(--sc-font-mono); font-size: 0.62rem; letter-spacing: 0.15em;
  text-transform: uppercase; opacity: 0; translate: -4px 0;
  transition: opacity 200ms var(--sc-ease-out), translate 200ms var(--sc-ease-out); }
.idx a:is(:hover, :focus-visible) { color: var(--sc-ink); }
.idx a:is(:hover, :focus-visible) span { opacity: 1; translate: 0 0; }
.idx a[aria-current="true"] { color: var(--sc-accent); }
.idx a[aria-current="true"] b { width: 2.1rem; }
.idx a[aria-current="true"] span { opacity: 1; translate: 0 0; }
.count { position: fixed; z-index: 80; right: clamp(0.8rem, 2vw, 1.9rem); top: 50%; translate: 0 -50%;
  writing-mode: vertical-rl; font-family: var(--sc-font-mono); font-size: 0.62rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.count em { font-style: normal; color: var(--sc-accent); }

@media (max-width: 900px) {
  .idx { top: auto; bottom: 0; left: 0; right: 0; translate: none; flex-direction: row;
    gap: 1.1rem; padding: 0.7rem var(--sc-gutter);
    background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
    border-top: 1px solid var(--sc-hairline); overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
  .idx::-webkit-scrollbar { display: none; }
  .idx a b { display: none; }
  .idx a span { opacity: 1; translate: 0 0; white-space: nowrap; }
  .count { display: none; }
  main { padding-bottom: 3.4rem; }
}

/* The upper half of the spacing scale, opened up. Everything from the second
   section down was reading as compressed; the small steps stay where they are so
   type and controls keep their tight relationships. */
:root {
  --sc-6: 2.5rem;
  --sc-7: 4rem;
  --sc-8: 5.5rem;
  --sc-9: 8rem;
}

/* ---------------------------------------------------------- layout ------ */
/* Full-bleed band inside a padded section: for things that belong to the screen
   rather than to the text column. */
.bleed { position: relative; z-index: 2; }

/* One ramp for every sliding row, so they all leave the same way. */
/* The rows are centred on the screen, so on the left they pass under the fixed
   folio index. The fade holds fully transparent for exactly the width the index
   reserves before it starts ramping in, so nothing ever reads through it. Below
   940px --rail-clear is 0 and the index moves to the bottom, so the ramp simply
   starts at the edge. */
:root { --edge-fade: linear-gradient(to right,
          transparent 0,
          transparent var(--rail-clear),
          #000 calc(var(--rail-clear) + 10%),
          #000 88%,
          transparent 100%); }

.wrap { width: min(var(--sc-maxw), 100% - var(--sc-gutter) * 2); margin-inline: auto;
  padding-inline-start: var(--rail-clear); }
@media (min-width: 940px) { :root { --rail-clear: 7.5rem; } }
.act { position: relative; z-index: 3; }
.pad { padding-block: clamp(3.6rem, 6.5vw, 7.5rem); }

/* Hero */
.hero { display: grid; align-content: center; grid-template-columns: minmax(0, 1fr); }
.hero__in { position: relative; z-index: 4; }
/* On a phone the buttons stack, so the second one lands exactly where the
   portrait sits. The hero reserves that corner instead of fighting for it. */
@media (max-width: 900px) { .hero__in { padding-bottom: 0; } }
/* A floating object drifting behind the small mono line measured 2.38:1.
   Density goes exactly where the copy is and nowhere else, so the bloom and
   the objects keep their full contrast everywhere they are not needed. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to right,
    var(--sc-canvas) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 40%, transparent) 54%,
    transparent 70%);
}
@media (max-width: 900px) {
  .hero__scrim { background: linear-gradient(to top,
    var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 52%, transparent 84%); }
}
.hero .mono { margin: 0 0 var(--sc-6); }
.hero .lede { margin: var(--sc-6) 0 0; }
/* Box to the ink. A full-width block reaches across the frame into the bloom
   even when the text sits in the left third, and contrast is measured over the
   box, not over the glyphs. */
.hero .mono, .hero .d--xl, .hero .lede, .hero__acts { width: max-content; max-width: min(100%, 46rem); }
/* The lede has to end before the portrait begins, and the portrait is
   proportionally widest on a narrow desktop — hence the bands. Above 1280
   there is room for the full measure. */
@media (min-width: 940px)  { .hero .lede { max-width: min(100%, 25rem); } }
@media (min-width: 1100px) { .hero .lede { max-width: min(100%, 31rem); } }
@media (min-width: 1280px) { .hero .lede { max-width: min(100%, 36rem); } }
.hero .d--xl { max-width: min(100%, 22ch); font-size: clamp(2.6rem, 6.2vw, 6.2rem); }

/* The portrait sits bottom right and rotates on scroll to the working shot.
   Driven by --sc-p, so it reverses on the way back up for free. The flip
   completes by p 0.8, then holds while the pin releases. */
.port {
  position: fixed; z-index: 5; right: clamp(1rem, 4vw, 4rem);
  bottom: clamp(1rem, 4vh, 3rem);
  width: clamp(16.2rem, 27.5vw, 29.6rem); aspect-ratio: 3/4;
  perspective: 1400px;
  --port-bleed: 46%;
  /* --port-liftk: 1 = sitting in the bleed, 0 = whole frame on screen. Default 1
     so the resting composition is right even before the script runs. */
  transform: translateY(calc(var(--port-bleed) * var(--port-liftk, 1)
                            + var(--port-exit, 0px) + var(--port-float, 0px)));
  transition: none;
  will-change: transform;
}
.port__tilt {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--ptx, 0deg)) rotateY(var(--pty, 0deg)) scale(var(--pts, 1));
}
.port__sheen {
  position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  transform: translateZ(2px);                       /* in front of whichever face shows */
  background: radial-gradient(40% 44% at var(--pgx, 50%) var(--pgy, 50%),
              color-mix(in oklab, var(--sc-accent) 20%, transparent), transparent 72%);
  opacity: 0; transition: opacity 0.45s ease; mix-blend-mode: screen;
}
.port:hover .port__sheen { opacity: 1; }
.port__inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(calc(var(--port-turn, 0) * 180deg));
}
.port__face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; backface-visibility: hidden; border-radius: 3px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.8);
  transition: box-shadow 0.45s ease;
}
.port:hover .port__face {
  box-shadow: 0 30px 80px -18px color-mix(in oklab, var(--sc-accent) 30%, transparent);
}
.port__face--b { transform: rotateY(180deg); object-position: 50% 32%; }
.port__face--a { object-position: 50% 22%; }   /* keep the face high, the bleed eats the bottom */
/* Between 1100 and 1600 the headline is at its widest relative to the screen and
   the portrait has nowhere to grow into, so it buys its extra size from the
   right margin instead. */
@media (min-width: 1100px) and (max-width: 1599px) {
  .port { right: clamp(1.5rem, 2.4vw, 3rem); }
}
/* Just above the mobile breakpoint the two hero buttons run their widest
   relative to the column, so the portrait sits a little deeper here. */
@media (min-width: 901px) and (max-width: 1099px) {
  .port { --port-bleed: 54%; width: clamp(15rem, 25.5vw, 29.6rem); }
}
@media (min-width: 1600px) {
  .port {
    right: max(4rem, calc((100vw - var(--sc-maxw)) / 2 - 4rem));
    width: clamp(29.6rem, 20vw, 30.5rem);
  }
}
@media (min-width: 1750px) { .port { width: 32rem; } }

.port figcaption {
  position: absolute; right: 0; bottom: -1.5rem;
  text-align: right; white-space: normal; max-width: 100%;
  font-size: 0.58rem; letter-spacing: 0.12em; opacity: 0.65;
}
@media (prefers-reduced-motion: reduce) {
  .port { --port-liftk: 0; }
  .port__tilt { transform: none; }
  .port__sheen { display: none; }
  .port__inner { transform: none; }
  .port__face--b { display: none; }
}
@media (max-width: 900px) {
  .port { --port-bleed: 50%; right: 0.9rem; bottom: 4.2rem; width: clamp(11.1rem, 44.4vw, 16.2rem); }
  /* Between 1100 and 1600 the headline is at its widest relative to the screen and
   the portrait has nowhere to grow into, so it buys its extra size from the
   right margin instead. */
@media (min-width: 1100px) and (max-width: 1599px) {
  .port { right: clamp(1.5rem, 2.4vw, 3rem); }
}
/* Just above the mobile breakpoint the two hero buttons run their widest
   relative to the column, so the portrait sits a little deeper here. */
@media (min-width: 901px) and (max-width: 1099px) {
  .port { --port-bleed: 54%; width: clamp(15rem, 25.5vw, 29.6rem); }
}
@media (min-width: 1600px) {
  .port {
    right: max(4rem, calc((100vw - var(--sc-maxw)) / 2 - 4rem));
    width: clamp(29.6rem, 20vw, 30.5rem);
  }
}
@media (min-width: 1750px) { .port { width: 32rem; } }

.port figcaption { display: none; }
}

.cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: var(--sc-7);
  padding: 1.05rem 2rem; border-radius: 100px;
  background: linear-gradient(135deg, #FF9A4D 0%, var(--sc-accent) 46%, #E8481B 100%);
  color: #140602;
  font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm);
  letter-spacing: 0.01em; text-transform: none; text-decoration: none; white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,225,205,0.75),
    inset 0 -1px 0 rgba(90,20,0,0.35),
    0 2px 6px rgba(0,0,0,0.5),
    0 14px 34px -8px rgba(255,92,40,0.55);
  transition: transform 140ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
/* The glow is a separate blurred layer, so it can bloom without smearing the label. */
.cta::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, #FFB06B, var(--sc-accent) 50%, #FF3D00);
  filter: blur(13px); opacity: 0.55;
  transition: opacity 220ms var(--sc-ease-out);
}
.cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,225,205,0.85), 0 3px 8px rgba(0,0,0,0.5), 0 20px 46px -8px rgba(255,92,40,0.7); }
.cta:hover::before { opacity: 0.9; }
.cta:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .cta::before { opacity: 0.4; } }

/* A territory: label, headline, copy, then the object alone. No box. */
.terr { display: grid; gap: var(--sc-6); }
@media (min-width: 940px) {
  .terr__head { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--sc-9); align-items: end; }
}
.terr figure { margin: var(--sc-6) 0 0; }
/* He said the plates were taking the whole screen. Big, but always with ground
   visible around them, and offset rather than centred so the page keeps a rhythm. */
.terr figure { width: min(100%, 72ch); max-width: 74%; }
.terr--right figure { margin-inline-start: auto; }
/* Ultra-wide: cropped top and bottom so it runs the full measure as a thin band. */
.terr--wide figure { width: 100%; max-width: 100%; }
.terr--wide img { aspect-ratio: 24/7; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 900px) { .terr figure { max-width: 100%; } .terr--wide img { aspect-ratio: 16/9; } }
.terr img { width: 100%; height: auto; border-radius: 2px; }
.cap { margin-top: var(--sc-4); display: flex; gap: var(--sc-4); flex-wrap: wrap; align-items: baseline; }
.cap .mono { color: var(--sc-accent); }
.cap p { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 46ch; }

/* Impact: text left, image right. Nothing clever. */
.split { display: grid; gap: var(--sc-7); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sc-9); } }
.split img { width: 100%; height: auto; border-radius: 2px; }
.pair { display: grid; gap: var(--sc-5); margin-top: var(--sc-8); }
@media (min-width: 760px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair img { width: 100%; height: auto; border-radius: 2px; }

/* The components. Two tiers: four decisions that carry the system, then three
   that follow from them. Staggered sizes and offsets, no equal cells, no boxes. */
.comp { display: grid; gap: var(--sc-6) var(--sc-6); }
@media (min-width: 940px) {
  .comp--one { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .comp--one > :nth-child(1) { grid-column: 1 / span 3; }
  .comp--one > :nth-child(2) { grid-column: 4 / span 3; margin-top: var(--sc-7); }
  .comp--one > :nth-child(3) { grid-column: 7 / span 3; }
  .comp--one > :nth-child(4) { grid-column: 10 / span 3; margin-top: var(--sc-7); }
  .comp--two { grid-template-columns: repeat(12, 1fr); align-items: start; margin-top: var(--sc-6); }
  .comp--two > :nth-child(1) { grid-column: 1 / span 4; }
  .comp--two > :nth-child(2) { grid-column: 5 / span 4; margin-top: var(--sc-6); }
  .comp--two > :nth-child(3) { grid-column: 9 / span 4; }
}
.comp figure { margin: 0; }
.comp img { width: 100%; height: auto; border-radius: 2px; }
.comp figcaption { margin-top: var(--sc-3); }
.comp .mono { display: block; color: var(--sc-ink); }
.comp p { margin: var(--sc-1) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55; }
.comp--two figcaption .mono { color: var(--sc-ink-soft); }


/* Work: each entry grows past its own bounds to full bleed, then releases.
   No boxes anywhere: the image IS the entry. */
.work { display: grid; gap: clamp(1.6rem, 2.8vw, 3.4rem); }
.entry { display: grid; gap: var(--sc-4); }
.entry__media {
  --g: 0;
  /* Grows, but never to full bleed. Caps at 82% so ground always frames it. */
  width: calc(66% + var(--g) * 16%);
  margin-inline: auto;
  transform: scale(calc(0.965 + var(--g) * 0.035));
  transition: none; will-change: transform, width;
}
.entry__media img { width: 100%; height: auto; aspect-ratio: 5/2; max-height: 56vh; object-fit: cover; border-radius: calc(6px - var(--g) * 6px); }
@media (prefers-reduced-motion: reduce) { .entry__media { width: 78%; transform: none; } }
.entry__meta { display: flex; gap: var(--sc-5); flex-wrap: wrap; align-items: baseline; justify-content: space-between; }

/* Answers: plain type on space. Definitively not an accordion of boxes. */
/* A real <details> accordion: keyboard and screen-reader correct with no JS.
   Hairlines only, no boxes anywhere. */
.qa-stage { display: block; }
.qa { display: grid; max-width: 62rem; }
.qa details { border-top: 1px solid var(--sc-hairline); }
.qa details:last-of-type { border-bottom: 1px solid var(--sc-hairline); }
.qa summary {
  list-style: none; cursor: pointer; padding: var(--sc-5) 0;
  display: flex; align-items: baseline; gap: var(--sc-5);
  font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 300; letter-spacing: -0.02em;
  transition: color 160ms var(--sc-ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--sc-accent); }
.qa summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--sc-font-mono); font-size: 1.1rem; color: var(--sc-accent);
  transition: transform 220ms var(--sc-ease-out);
}
.qa details[open] summary::after { content: "+"; transform: rotate(45deg); }
.qa details p {
  margin: 0 0 var(--sc-6); padding-right: var(--sc-8);
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.7; max-width: 52ch;
}

/* A testimonial slot. Deliberately, visibly empty until a real named quote
   exists. No invented praise. */
.quote { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-5); }
.quote blockquote { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.7rem); font-weight: 200; letter-spacing: -0.02em; line-height: 1.3; color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.quote figcaption { margin-top: var(--sc-4); }
.quote .mono { color: color-mix(in oklab, var(--sc-accent) 60%, transparent); }

/* Peak: the clip full bleed, copy in the margin. Type never on the object. */
/* He wants the clip held right back so it reads as atmosphere, not spectacle.
   A full, even veil over the whole frame -- this is the one place a full-frame
   overlay is the point rather than a contrast patch. The corner scrim under the
   type stays on top of it. */
.peak__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.peak__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: color-mix(in oklab, var(--sc-canvas) 68%, transparent);
}
.peak__copy {
  position: absolute; z-index: var(--sc-z-copy);
  left: calc(var(--sc-gutter) + var(--rail-clear)); bottom: clamp(3rem, 12vh, 8rem);
  width: max-content; max-width: min(30rem, 74vw);
}
@media (max-width: 900px) { /* He wants the clip held right back so it reads as atmosphere, not spectacle.
   A full, even veil over the whole frame -- this is the one place a full-frame
   overlay is the point rather than a contrast patch. The corner scrim under the
   type stays on top of it. */
.peak__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: color-mix(in oklab, var(--sc-canvas) 68%, transparent);
}
.peak__copy { bottom: 5.5rem; right: var(--sc-gutter); width: auto; max-width: none; } }

/* Close: the field is gone, one mark left. */
.close { display: grid; align-content: center; grid-template-columns: minmax(0, 1fr); }
.ask { font-size: clamp(1.7rem, 3.7vw, 3.1rem); font-weight: 200; letter-spacing: -0.025em;
  line-height: 1.2; max-width: 22ch; margin: 0 0 var(--sc-7); }
.ask a { color: var(--sc-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
.ask a:hover { text-decoration-thickness: 2px; }
.meta { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); list-style: none; margin: 0; padding: 0; }
.meta a { color: inherit; }
.meta a:hover { color: var(--sc-ink); }

/* The giant mark. Full bleed, clipped by the viewport, as the last thing. */
.mark { margin-top: clamp(3rem, 8vw, 7rem); }
/* Scroll-driven, so it reverses on the way back up with no extra code: the wipe
   simply runs backwards as --sc-p falls. A PNG can only be masked, not drawn --
   a true stroke-by-stroke draw needs the vector Hussein is sending. */
.mark svg { width: min(66vw, 32rem, 56vh); height: auto; color: var(--sc-ink); overflow: visible; }
/* Filled letterforms, not strokes, so they cannot be "drawn". They arrive one
   after another instead. Timed, not scroll-mapped: the close is a pinned act, so
   once it pins the mark stops moving and a scroll-driven write has nothing left
   to run on. Eased transitions also read far smoother than a per-frame clamp. */
.mark :is(path, rect, polygon) {
  fill: currentColor;
  opacity: 0;
  transform: translateY(0.4em) scale(0.92);
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: opacity 380ms var(--sc-ease-out), transform 560ms var(--sc-ease-out);
  /* leaving: unwrite from the end backwards */
  transition-delay: calc((var(--n, 25) - var(--i, 0)) * 12ms);
}
.mark.is-written :is(path, rect, polygon) {
  opacity: 1;
  transform: none;
  /* arriving: write from the start forwards */
  transition-delay: calc(var(--i, 0) * 30ms);
}
@media (prefers-reduced-motion: reduce) {
  .mark :is(path, rect, polygon) { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) { .entry__media { width: calc(88% + var(--g) * 10%); } }
/* A phone stacks everything the desktop lays out side by side, so the page grew
   to 15.6vh. Cap the plates rather than shrink the type. */
@media (max-width: 760px) {
  .comp { grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-4); }
  .comp p { display: none; }          /* the label carries it at this size */
  .comp--two { margin-top: var(--sc-5); }
  .pair { grid-template-columns: 1fr 1fr; gap: var(--sc-3); }
}
@media (max-width: 700px) {
  .d--lg { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .terr figure { margin-top: var(--sc-6); }
}

/* ------------------------------------------------ shared with the product page */
/* THE MANIFEST. The one dense thing on the site. Volume is the argument, so it
   is set small and tight and given no decoration whatsoever. */
.manifest { display: grid; gap: var(--sc-7) var(--sc-6); margin-top: var(--sc-8); }
@media (min-width: 700px)  { .manifest { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .manifest { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.manifest h3 { margin: 0 0 var(--sc-4); padding-bottom: var(--sc-3); border-bottom: 1px solid var(--sc-hairline); }
.manifest ul { list-style: none; margin: 0; padding: 0; }
.manifest li {
  font-family: var(--sc-font-mono); font-size: 0.76rem; line-height: 2.1;
  color: color-mix(in oklab, var(--sc-ink) 72%, transparent);
}
.manifest li::before { content: "· "; color: var(--sc-accent); }

.lang { display: inline-flex; gap: 0.15rem; align-items: center; }
.lang button {
  background: none; border: 0; cursor: pointer; padding: 0.3rem 0.5rem;
  font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: color-mix(in oklab, var(--sc-ink) 45%, transparent);
  transition: color 160ms var(--sc-ease-out);
}
.lang button:hover { color: var(--sc-ink); }
.lang button[aria-pressed="true"] { color: var(--sc-accent); }
.lang span { color: color-mix(in oklab, var(--sc-ink) 25%, transparent); }

/* The language switch. Fixed on the homepage, in the bar on the product page. */
.lang--float { position: fixed; z-index: 85; top: 0.9rem; right: clamp(0.9rem, 2.4vw, 2.2rem); }
@media (max-width: 900px) { .lang--float { top: 0.6rem; right: 0.7rem; } }

/* Safety net: anything still waiting on a reveal becomes visible the moment it
   takes focus, so a keyboard user can never land on an invisible control. */
[data-sc-in]:focus-visible,
[data-sc-in]:focus-within { opacity: 1 !important; }

/* ============================================================ THE WALL =====
   A drifting field of the deliverables, rotated and heavily darkened, sitting
   behind the type. Built from images rather than video: the reference does the
   same and it costs a fraction of the weight. Rows drift in opposite directions
   so the loop never announces itself.
   When real project shots arrive they drop straight in as more tiles. */
.wall { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.wall__rot {
  position: absolute; inset: -22% -14%;
  transform: rotate(-8deg);
  display: grid; gap: clamp(0.7rem, 1.4vw, 1.4rem);
  align-content: center;
}
.wall__row { display: flex; gap: clamp(0.7rem, 1.4vw, 1.4rem); width: max-content; }
.wall__row img {
  width: clamp(9rem, 15vw, 15rem); height: auto; flex: none;
  border-radius: 3px; opacity: 0.9;
}
.wall__row--a { animation: wall-a 68s linear infinite; }
.wall__row--b { animation: wall-b 84s linear infinite; }
.wall__row--c { animation: wall-a 96s linear infinite; }
@keyframes wall-a { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes wall-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .wall__row--a, .wall__row--b, .wall__row--c { animation: none; }
}
/* The veil. Without it the wall competes with the headline and nothing reads. */
.wall__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 42%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 30%, var(--sc-canvas) 100%);
}

/* The conveyor: the homepage version. One band, not a rotated field, so the two
   pages share a world without repeating a device. */
.belt { position: relative; overflow: hidden; margin: var(--sc-7) 0 0; padding-block: var(--sc-3); }
.belt__row { display: flex; gap: var(--sc-5); width: max-content; animation: wall-a 58s linear infinite; }
.belt__row img { width: clamp(7rem, 11vw, 11rem); height: auto; flex: none; border-radius: 3px; opacity: 0.55; }
.belt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--sc-canvas) 0%, transparent 16%, transparent 84%, var(--sc-canvas) 100%);
}
@media (prefers-reduced-motion: reduce) { .belt__row { animation: none; } }

/* The manifest arrives like something being printed: fast, in order, once. */


/* ================================================== THE BLOOM RETURNS =====
   The hero bloom was deliberately the page's only colour event. Repeating it
   verbatim would turn it into wallpaper. So it comes back once, changed: at the
   offer, the same four lights CONVERGE toward one point as you scroll in,
   instead of spreading across the frame. Many becoming one, in light -- which is
   the section's own argument.

   Driven by the section's position in the viewport, so it swells on approach and
   recedes on the way out rather than just sitting there. Masked to the upper
   band so it never lands under the dense manifest type, which is the most
   fragile text on the page. */
.bloom--offer {
  position: absolute; inset: -28% -12% auto -12%; height: 96%;
  z-index: 0; pointer-events: none;
  filter: blur(84px) saturate(118%);
  opacity: calc(var(--offer-p, 0) * 0.72);
  --s: calc(1 - var(--offer-p, 0) * 0.58);     /* approach, but never fully merge */
  background:
    radial-gradient(30% 38% at calc(50% - var(--s) * 26%) calc(46% - var(--s) * 12%), #FF5C28 0%, rgba(255,92,40,0) 70%),
    radial-gradient(26% 34% at calc(50% + var(--s) * 18%) calc(40% - var(--s) * 16%), #C2185B 0%, rgba(194,24,91,0) 72%),
    radial-gradient(28% 36% at calc(50% + var(--s) * 30%) calc(54% + var(--s) * 10%), #FFB020 0%, rgba(255,176,32,0) 72%),
    radial-gradient(34% 40% at calc(50% - var(--s) * 14%) calc(58% + var(--s) * 18%), #6A2BD9 0%, rgba(106,43,217,0) 76%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.55) 46%, transparent 74%);
}
@media (prefers-reduced-motion: reduce) { .bloom--offer { opacity: 0.3; --s: 0.5; } }

/* A primary and a quieter secondary action, side by side. Two ways to act on
   the same section without a second button competing with the first. */
.row-cta { display: flex; align-items: center; gap: var(--sc-6); flex-wrap: wrap; }
.quiet-cta {
  font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--sc-ink-soft); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.quiet-cta:hover { color: var(--sc-ink); }
/* The index labels were hover-only on desktop, which made the navigation
   effectively invisible until you went looking for it. */
.idx a span { opacity: 0.72; translate: 0 0; }
.idx a:is(:hover, :focus-visible) span { opacity: 1; }


/* ================================================ THE WORD TICKER ========
   All nineteen items running past as type, two rows crossing in opposite
   directions. Sits above the image carousel: the words say what is included,
   the pictures say what it looks like. Typography only -- no icons, no chips,
   no boxes.
   ======================================================================== */
.ticker { position: relative; overflow: hidden; margin-top: var(--sc-8);
  display: grid; gap: clamp(0.4rem, 0.9vw, 0.8rem);
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade); }
.ticker__row { display: flex; width: max-content; align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem); }
.ticker__row--l { animation: tick-l 30s linear infinite; }
.ticker__row--r { animation: tick-r 38s linear infinite; }
@keyframes tick-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes tick-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* WCAG 2.2.2 -- motion running past five seconds needs a way to stop it. */
.ticker:hover .ticker__row,
.ticker:focus-within .ticker__row { animation-play-state: paused; }
.ticker i {
  position: relative; display: inline-block;
  font-style: normal; white-space: nowrap;
  transition: color 0.28s ease, transform 0.28s ease, text-shadow 0.28s ease;
  font-family: var(--sc-font-display); font-weight: 200;
  font-size: clamp(0.9rem, 1.4vw, 1.25rem); letter-spacing: -0.015em;
  color: color-mix(in oklab, var(--sc-ink) 80%, transparent);
}
/* The separator is drawn, not written. It used to be an <em> inside the
   translated element, so i18n's textContent write deleted every one of them the
   moment the page loaded in German. */
.ticker i::after {
  content: "·"; margin-left: 0.55em;
  color: var(--sc-accent); opacity: 0.55;
}
.ticker i:hover {
  color: var(--sc-accent);
  transform: translateY(-2px);
  text-shadow: 0 0 24px color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
.ticker i:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ticker__row { animation: none; width: auto; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); }
  .ticker { -webkit-mask-image: none; mask-image: none; }
}

/* ============================================ THE OFFER CAROUSEL ==========
   One row of the work itself, sliding. Replaces the counts and the word ticker:
   two marquees in one section fought each other, and images say "all of this"
   faster than an enumeration does. The full readable list lives on the product
   page, which is where people actually read.
   Masked at the edges rather than overlaid -- the offer bloom sits behind this,
   and an overlay in the canvas colour draws a visible rectangle on it.
   ======================================================================== */
.reel { position: relative; overflow: hidden; margin-top: var(--sc-6);
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade); }
.reel__row { display: flex; width: max-content; gap: clamp(0.9rem, 1.8vw, 1.8rem);
  animation: reel-l 64s linear infinite; }
@keyframes reel-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* WCAG 2.2.2 -- motion running past five seconds needs a way to stop it. */
.reel:hover .reel__row, .reel:focus-within .reel__row { animation-play-state: paused; }
.reel img {
  width: clamp(13rem, 22vw, 21rem); height: auto; aspect-ratio: 5 / 4;
  object-fit: cover; flex: none;
  border-radius: 3px; opacity: 0.92;
}
@media (prefers-reduced-motion: reduce) {
  .reel__row { animation: none; width: auto; flex-wrap: wrap; }
  .reel { -webkit-mask-image: none; mask-image: none; }
  .reel img { width: clamp(9rem, 30vw, 16rem); }
}

/* ---------------------------------------------------- the closing object ---
   The monogram as a physical thing, standing in the street, rather than a
   button. It is the whole call to action: the link is the object.
   Tilt is pointer-driven, so nothing moves on its own and no pause control is
   owed; on a touch screen and under reduced motion it is simply a still image.
   ------------------------------------------------------------------------- */
@media (min-width: 940px) {
  .close__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--sc-9); align-items: center;
  }
}

.tiltobj {
  display: block; text-decoration: none; color: inherit;
  perspective: 1100px; margin: var(--sc-7) 0 0;
  max-width: min(22rem, 76vw);
}
@media (min-width: 940px) {
  .tiltobj { margin-top: 0; max-width: min(30rem, 29vw); margin-inline-start: auto; }
}

.tiltobj__in {
  position: relative; display: block; border-radius: 4px; overflow: hidden;
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) scale(var(--ts, 1));
  transform-style: preserve-3d;
  box-shadow: 0 26px 70px -26px rgba(0, 0, 0, 0.9);
  transition: box-shadow 0.45s ease;
}
.tiltobj:hover .tiltobj__in,
.tiltobj:focus-visible .tiltobj__in {
  box-shadow: 0 34px 90px -24px color-mix(in oklab, var(--sc-accent) 34%, transparent);
}
.tiltobj img { display: block; width: 100%; height: auto; }

/* A sheen that tracks the pointer, so the surface reads as lit rather than
   as a picture being rotated. */
.tiltobj__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38% 42% at var(--gx, 50%) var(--gy, 50%),
              color-mix(in oklab, var(--sc-accent) 30%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.45s ease;
  mix-blend-mode: screen;
}
.tiltobj:hover .tiltobj__sheen,
.tiltobj:focus-visible .tiltobj__sheen { opacity: 1; }

.tiltobj__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sc-4);
  margin-top: var(--sc-4); color: var(--sc-ink-soft);
  transition: color 0.3s ease;
}
.tiltobj__label em { font-style: normal; color: var(--sc-accent); }
.tiltobj:hover .tiltobj__label, .tiltobj:focus-visible .tiltobj__label { color: var(--sc-ink); }
.tiltobj:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 10px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .tiltobj__in { transform: none; transition: none; }
  .tiltobj__sheen { display: none; }
}


/* ------------------------------------------------------- bar and footer ---
   The bar belongs to every page that is not the homepage; the footer to all of
   them. Both live here so the three pages cannot drift apart.
   ------------------------------------------------------------------------ */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-5);
  padding: var(--sc-4) var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sc-hairline);
}
.bar a { color: inherit; text-decoration: none; }
.bar__back { display: inline-flex; align-items: center; gap: 0.55rem; }
.bar__back:hover { color: var(--sc-accent); }

.foot {
  position: relative; z-index: 6;
  border-top: 1px solid var(--sc-hairline);
  background: var(--sc-canvas);
  padding-block: var(--sc-6);
}
/* Two tiers: how to reach him, then the small print. */
.foot__top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: var(--sc-5) var(--sc-7);
  padding-bottom: var(--sc-5); margin-bottom: var(--sc-5);
  border-bottom: 1px solid var(--sc-hairline);
}
.foot__contact, .foot__social {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sc-3) var(--sc-6); list-style: none; margin: 0; padding: 0;
}
.foot__social { gap: var(--sc-4); }
.foot__social a {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--sc-hairline); border-radius: 50%;
  color: var(--sc-ink-soft);
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.foot__social a:hover, .foot__social a:focus-visible {
  color: var(--sc-accent); border-color: var(--sc-accent); transform: translateY(-2px);
}
.foot__in {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: var(--sc-3) var(--sc-7);
}
.foot p { margin: 0; color: var(--sc-ink-soft); }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--sc-6); }
.foot a {
  color: var(--sc-ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.foot a:hover, .foot a:focus-visible { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }

/* ------------------------------------------------------------- documents ---
   Impressum and Datenschutz. Deliberately plain: these are read, not performed.
   ------------------------------------------------------------------------ */
.doc { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem); }
.doc h1 {
  font-family: var(--sc-font-display); font-weight: 200;
  font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em;
  line-height: 1.02; margin: 0 0 var(--sc-7);
}
.doc h2 {
  font-size: var(--sc-t-lg); font-weight: 400; letter-spacing: -0.02em;
  margin: var(--sc-8) 0 var(--sc-3);
  padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p, .doc li, .doc address {
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.75;
  max-width: 68ch; margin: 0 0 var(--sc-4); font-style: normal;
}
.doc ul { padding-left: 1.1rem; margin: 0 0 var(--sc-4); }
.doc a { color: var(--sc-accent); }

/* Anything still to be supplied. Loud on purpose: this must not reach a server
   looking like finished copy. */
.todo {
  color: var(--sc-accent); border-bottom: 1px dashed currentColor;
  font-style: normal;
}
.doc__notice {
  border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent);
  border-radius: 4px; padding: var(--sc-4) var(--sc-5);
  margin-bottom: var(--sc-8); max-width: 68ch;
}
.doc__notice p { margin: 0; color: var(--sc-ink); }


/* ============================================================ THE TIMELINE ==
   The process runs down the page with the reader instead of sideways against
   them. One rail, four markers; the rail fills as you descend and each marker
   lights as it is passed, so the graphic reports your own position.
   --tl-fill is written by the rig in index.html and reverses on the way back up.
   ========================================================================= */
.tl {
  --tl-x: 0.55rem;
  --tl-fill: 0;
  position: relative; list-style: none; margin: var(--sc-8) 0 0; padding: 0;
}
.tl::before, .tl::after {
  content: ""; position: absolute; left: var(--tl-x); top: 0.6rem; width: 1px;
}
.tl::before { bottom: 0.6rem; background: var(--sc-hairline); }
.tl::after {
  height: calc(var(--tl-fill) * 100%);
  background: linear-gradient(to bottom,
              color-mix(in oklab, var(--sc-accent) 25%, transparent), var(--sc-accent));
}
.tl__step {
  position: relative;
  padding-left: calc(var(--tl-x) + 2.4rem);
  padding-bottom: var(--sc-8);
}
.tl__step:last-child { padding-bottom: 0; }
@media (min-width: 940px) {
  .tl__step {
    display: grid; align-items: start; gap: var(--sc-7);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}
.tl__dot {
  position: absolute; left: calc(var(--tl-x) - 5px); top: 0.42rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--sc-canvas); border: 1px solid var(--sc-hairline);
  transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.tl__step.is-on .tl__dot {
  background: var(--sc-accent); border-color: var(--sc-accent);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--sc-accent) 16%, transparent);
}
.tl__n { margin: 0; color: color-mix(in oklab, var(--sc-ink) 45%, transparent);
  transition: color 0.45s ease; }
.tl__step.is-on .tl__n { color: var(--sc-accent); }
.tl__h {
  margin: var(--sc-2) 0 var(--sc-3);
  font-family: var(--sc-font-display); font-weight: 200;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.05;
}
.tl__p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
  line-height: 1.7; max-width: 46ch; }
.tl__img { width: 100%; height: auto; border-radius: 3px; margin-top: var(--sc-4); opacity: 0.9; }
@media (min-width: 940px) { .tl__img { margin-top: 0; } }
.tl__end {
  margin: var(--sc-8) 0 0; padding-left: calc(var(--tl-x) + 2.4rem);
  color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.7; max-width: 52ch;
}
.tl__end .mono { display: block; margin-bottom: var(--sc-2); color: var(--sc-accent); }

/* =============================================================== THE WALL ===
   Client marks, one flat white at low opacity. Half of these ship as dark
   artwork that would be invisible on this ground and the rest are two dozen
   brand palettes; a single colour is the only version that reads as a set.
   Uniform boxes, so a wide wordmark cannot dominate a compact one.
   ========================================================================= */
.logos {
  position: relative; overflow: hidden;
  margin-top: var(--sc-7); margin-bottom: var(--sc-6);
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade);
}
.logos { display: grid; row-gap: clamp(1.4rem, 2.4vw, 2.4rem); }
.logos__row {
  display: flex; width: max-content; align-items: center;
  gap: clamp(2.2rem, 4.5vw, 4.5rem);
  animation-duration: var(--secs, 74s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Rows pull against each other, at three different speeds so they never lock
   into step. */
.logos__row--l { animation-name: logos-l; }
.logos__row--r { animation-name: logos-r; }
@keyframes logos-l { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes logos-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* WCAG 2.2.2 -- motion running past five seconds needs a way to stop it. */
.logos:hover .logos__row, .logos:focus-within .logos__row { animation-play-state: paused; }
.logos img {
  flex: none;
  height: clamp(1.9rem, 2.8vw, 2.6rem);
  width: clamp(6.5rem, 10vw, 9.5rem);
  object-fit: contain; object-position: center;
  opacity: 0.5; transition: opacity 0.3s ease;
}
.logos img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .logos__row { animation: none; width: auto; flex-wrap: wrap; gap: var(--sc-5) var(--sc-6); }
  .logos { -webkit-mask-image: none; mask-image: none; }
  /* Standing still, the loop repeats are just the same logo three more times. */
  .logos img[aria-hidden] { display: none; }
}

/* ================================================================ THE WORK ==
   Five sites standing on a lit floor: one facing the reader, the rest turned
   away into the dark. Depth is real perspective rather than a scale trick, so
   the cards foreshorten the way objects do.
   ========================================================================= */
.stage3d {
  user-select: none; -webkit-user-select: none;
  --card-w: clamp(17rem, 46vw, 56rem);
  position: relative; margin-top: var(--sc-8);
  perspective: 1800px; perspective-origin: 50% 42%;
}
/* The outer cards run to the edges and would otherwise print straight through
   the fixed folio index. Overlays rather than a mask: masking this element
   would flatten the preserve-3d subtree and kill the perspective. The ground
   here is flat canvas, so a gradient in the canvas colour is invisible. */
.stage3d::before, .stage3d::after {
  content: ""; position: absolute; top: -2rem; bottom: -2rem; width: 22vw;
  max-width: 22rem; z-index: 20; pointer-events: none;
}
.stage3d::before {
  left: 0;
  background: linear-gradient(to right, var(--sc-canvas) 0,
              var(--sc-canvas) calc(var(--rail-clear) - 1rem), transparent 100%);
}
.stage3d::after {
  right: 0;
  background: linear-gradient(to left, var(--sc-canvas) 0, transparent 100%);
}
.deck {
  position: relative; list-style: none; margin: 0 auto; padding: 0;
  width: var(--card-w);
  height: calc(var(--card-w) * 0.5 + 1.6rem);
  transform-style: preserve-3d;
}
.deck__card {
  position: absolute; inset: 0;
  transition: transform 620ms var(--sc-ease-out, cubic-bezier(.22,.61,.36,1)),
              opacity 620ms ease;
  will-change: transform, opacity;
}
.deck__hit {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; color: inherit;
}
.deck__hit:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 8px; border-radius: 8px; }

/* The stylised browser. It replaces the real chrome, which on these captures was
   a WordPress admin bar with the client's own login in it. */
.brow {
  position: relative; display: block; border-radius: 7px; overflow: hidden;
  background: #17171a; border: 1px solid var(--sc-hairline);
  box-shadow: 0 30px 80px -24px rgba(0,0,0,0.95);
  transition: box-shadow 620ms ease, border-color 620ms ease;
}
.brow__bar {
  display: flex; align-items: center; gap: 0.34rem;
  height: 1.6rem; padding-inline: 0.7rem;
  background: #202024; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.brow__bar i {
  width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-ink) 22%, transparent);
}
/* The frame is the browser viewport; the tall page image lives inside it and
   travels. On hover of the front card it scrolls to the bottom and back, which
   is user-triggered, so nothing autoplays and no pause control is owed.
   --end is the exact offset that lands the last row on the frame floor, worked
   out per image from its own proportions, so it never overshoots. */
.brow__view {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 2 / 1; background: #0e0e10;
}
.brow__view img {
  position: absolute; top: 0; left: 0;
  display: block; width: 100%; height: auto;
  -webkit-user-drag: none;
}
.brow__view--still img { position: static; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 0; }

.deck__card.is-now .deck__hit:hover .brow__view img,
.deck__card.is-now .deck__hit:focus-visible .brow__view img {
  animation: pgscroll var(--dur, 6s) ease-in-out infinite alternate;
}
@keyframes pgscroll {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--end, -80%)); }
}

/* The one in front is lit from below, the way the others are not. */
.deck__card.is-now .brow {
  border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent);
  box-shadow: 0 36px 90px -20px rgba(0,0,0,0.95),
              0 16px 70px -4px color-mix(in oklab, var(--sc-accent) 50%, transparent);
}
/* The light rakes along the bottom edge, which is what sells it as an object
   standing on a floor rather than a picture pasted on the page. */
.deck__card.is-now .brow::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -1px; height: 2px;
  background: linear-gradient(to right, transparent,
              color-mix(in oklab, var(--sc-accent) 95%, transparent) 22%,
              color-mix(in oklab, var(--sc-accent) 95%, transparent) 78%, transparent);
  box-shadow: 0 0 26px 5px color-mix(in oklab, var(--sc-accent) 60%, transparent);
}
.stage3d__pool {
  position: absolute; left: 50%; bottom: -5.5rem;
  width: calc(var(--card-w) * 1.35); height: 11rem; transform: translateX(-50%);
  background: radial-gradient(52% 58% at 50% 0%,
              color-mix(in oklab, var(--sc-accent) 46%, transparent), transparent 74%);
  filter: blur(30px); pointer-events: none; z-index: 0;
}

/* ------------------------------------------------------------- the controls */
.work__bar {
  position: relative; z-index: 5;
  display: grid; align-items: center; justify-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sc-4) var(--sc-5); margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.work__arrow {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--sc-hairline); border-radius: 50%;
  background: none; color: var(--sc-ink-soft); cursor: pointer;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.work__arrow:hover, .work__arrow:focus-visible {
  color: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.06);
}
.work__now { text-align: center; }
.work__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 200;
  font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: -0.03em;
  color: var(--sc-accent);
}
.work__svc { margin: var(--sc-2) 0 var(--sc-4); color: var(--sc-ink-soft); }
.work__visit {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--sc-ink); text-decoration: none;
  border: 1px solid var(--sc-hairline); border-radius: 999px;
  padding: 0.6rem 1.2rem;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.work__visit:hover, .work__visit:focus-visible {
  color: var(--sc-accent); border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 9%, transparent);
}
.work__dots { grid-column: 1 / -1; display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.work__dots button {
  width: 0.5rem; height: 0.5rem; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 32%, transparent);
  background: none; transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.work__dots button[aria-current="true"] {
  background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.25);
}
.work__hint { grid-column: 1 / -1; color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }

/* --------------------------------------------------------- the three notes */
.work__notes { list-style: none; margin: clamp(3rem,6vw,5rem) 0 0; padding: 0; display: grid; gap: var(--sc-6); }
@media (min-width: 760px) { .work__notes { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sc-7); } }
.work__notes li { border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-4); }
.work__notes .mono { display: block; margin-bottom: var(--sc-2); color: var(--sc-ink); }
.work__notes span:last-child { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.65; }

/* ------------------------------------------------------------- the rest ---- */
.work__more { margin: clamp(3rem,6vw,5rem) 0 var(--sc-5); color: var(--sc-accent); }
.gridwork { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-6); }
@media (min-width: 620px) { .gridwork { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 940px) { .gridwork { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sc-7) var(--sc-6); } }
.gridwork a { display: block; text-decoration: none; color: inherit; }
.gridwork > li > a > img {
  width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 0;
  border-radius: 4px; border: 1px solid var(--sc-hairline);
  opacity: 0.72; transition: opacity .3s ease, border-color .3s ease, transform .3s ease;
}
.gridwork a:hover > img, .gridwork a:focus-visible > img {
  opacity: 1; border-color: color-mix(in oklab, var(--sc-accent) 50%, transparent);
  transform: translateY(-3px);
}
.gw__n { display: block; margin-top: var(--sc-3); font-size: var(--sc-t-base); }
.gw__d { display: block; margin-top: 0.15rem; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.gridwork a:hover .gw__n { color: var(--sc-accent); }

/* Who a project was made with. Two states, one line: the studio lockup for the
   work that ran through Digital Sun, a plain word for his own. The lockup is
   the real two-colour mark, not the white knockout the logo band uses -- at
   this size the red arm is the only thing that reads as a logo rather than a
   grey smudge. */
.gw__by, .credit {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: var(--sc-3);
  font-family: var(--sc-font-mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink) 42%, transparent);
}
.gw__by img, .credit__ds {
  height: 0.82rem; width: auto; display: block; flex: none;
  aspect-ratio: auto; object-fit: contain; border: 0; border-radius: 0;
  opacity: 0.86;
}
.gridwork a:hover .gw__by img { opacity: 1; }
/* The solo note carries no mark, so it gets a rule to sit against instead. */
.gw__by:not(.gw__by--ds)::after, .credit__t--solo::after,
.credit__t--solo::before {
  content: ""; flex: none; width: 2.4rem; height: 1px;
  background: var(--sc-hairline);
}
.credit { margin: 0 0 var(--sc-4); justify-content: center; }
.credit__t--solo { display: flex; align-items: center; gap: 0.5rem; }
.credit__ds { height: 0.95rem; }

@media (prefers-reduced-motion: reduce) {
  .deck__card { transition: none; }
  .brow__view img { animation: none !important; }
  .brow, .gridwork img { transition: none; }
}


/* ------------------------------------------------------- the two ways in ---
   WhatsApp is the loud one because it is the one people actually use; the
   address is there for anyone who would rather write properly.
   ------------------------------------------------------------------------ */
.close__cta { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin: var(--sc-7) 0 var(--sc-6); }
.bigcta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.5rem; border-radius: 100px;
  font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out),
              color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.bigcta svg { flex: none; }
.bigcta--wa {
  background: linear-gradient(135deg, #FF9A4D 0%, var(--sc-accent) 46%, #E8481B 100%);
  color: #140602; font-family: var(--sc-font-display); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,225,205,0.75),
              0 2px 6px rgba(0,0,0,0.5),
              0 14px 34px -8px rgba(255,92,40,0.55);
}
.bigcta--wa:hover, .bigcta--wa:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,225,205,0.75),
              0 2px 6px rgba(0,0,0,0.5),
              0 20px 46px -8px rgba(255,92,40,0.75);
}
.bigcta--mail {
  border: 1px solid var(--sc-hairline); color: var(--sc-ink-soft);
}
.bigcta--mail:hover, .bigcta--mail:focus-visible {
  color: var(--sc-accent); border-color: var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 8%, transparent);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------ the face ----
   Laid over the monogram rather than beside it, with a ring of the page's own
   ground around it so it reads as lifted off the object behind.
   ------------------------------------------------------------------------ */
.close__art { position: relative; }
.me {
  position: absolute; z-index: 3; margin: 0;
  left: clamp(-2.5rem, -2vw, -1rem); bottom: clamp(1rem, 4vw, 3.2rem);
  width: clamp(5.5rem, 11vw, 9.5rem); aspect-ratio: 1;
}
.me img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 0.5rem var(--sc-canvas),
              0 0 0 calc(0.5rem + 1px) color-mix(in oklab, var(--sc-accent) 38%, transparent),
              0 22px 46px -14px rgba(0,0,0,0.95);
  transition: transform 320ms var(--sc-ease-out), box-shadow 320ms ease;
}
.close__art:hover .me img {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 0 0 0.5rem var(--sc-canvas),
              0 0 0 calc(0.5rem + 1px) var(--sc-accent),
              0 26px 54px -14px rgba(0,0,0,0.95);
}
@media (max-width: 939px) {
  .me { left: auto; right: 0.5rem; bottom: -1rem; }
}


/* The pair of hero actions. The second is a door, not a call: outlined, quiet,
   and it leaves the site, so it says so. */
.hero__acts {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sc-4) var(--sc-5); margin-top: var(--sc-6);
}
.hero__acts .cta { margin-top: 0; }
.cta2 {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--sc-ink-soft); text-decoration: none;
  font-size: var(--sc-t-sm); white-space: nowrap;
  padding: 0.95rem 1.4rem; border-radius: 100px;
  border: 1px solid var(--sc-hairline);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.cta2 em { font-style: normal; opacity: 0.7; }
.cta2:hover, .cta2:focus-visible {
  color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
  transform: translateY(-2px);
}
.cta2:hover em { opacity: 1; }


/* The second hero paragraph sits under the first at the same measure. */
.lede--second { margin-top: var(--sc-4); }
/* The ask that follows the projects, before the roster. */
.work__ask { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.work__ask .cta { margin-top: 0; }


/* The bare roster band. Same mechanism as the named wall, just quieter and with
   room of its own between two sections. */
.logos--band { margin-block: clamp(4rem, 12vh, 9rem) clamp(2rem, 6vh, 5rem); }

/* Just above the mobile breakpoint the problem section runs taller and the
   portrait needs longer to finish, so the band waits a little further down. */


.logos--band img { opacity: 0.38; }
.logos--band img:hover { opacity: 0.85; }

/* ---------------------------------------------------------- the brandmark ---
   Top left on every screen, aligned with the folio index below it. The SVG is
   an <img>, so it cannot take currentColor — the filter turns the dark artwork
   white and the hover warms it to the accent. */
.brandmark {
  position: fixed; z-index: 85;
  left: clamp(0.8rem, 2vw, 1.9rem);
  top: clamp(0.9rem, 2.4vh, 1.6rem);
  display: block; line-height: 0;
  opacity: 0.9; transition: opacity 0.25s ease, filter 0.25s ease;
}
.brandmark img {
  display: block; width: auto;
  height: clamp(1.5rem, 2.6vw, 1.9rem);
  filter: brightness(0) invert(1);
}
.brandmark:hover, .brandmark:focus-visible { opacity: 1; }
.brandmark:hover img, .brandmark:focus-visible img {
  filter: brightness(0) saturate(100%) invert(47%) sepia(72%) saturate(3200%) hue-rotate(348deg) brightness(101%) contrast(101%);
}
.brandmark:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: 4px; }
@media (max-width: 940px) {
  /* No side rail here to keep it clear of the copy, so it belongs to the top of
     the page rather than to the viewport. */
  .brandmark { position: absolute; top: 1.15rem; }
}

/* ============================================================== CONSENT ====
   Bottom-left, deliberately not a full-screen wall. Reject and Accept are the
   same size and weight: under German practice refusing has to be as easy as
   agreeing, so there is no dimmed "reject" and no pre-ticked box.
   ========================================================================= */
.cc {
  position: fixed; z-index: 200; inset: auto auto clamp(1rem, 3vh, 2rem) clamp(1rem, 3vw, 2rem);
  width: min(30rem, calc(100vw - 2rem));
  animation: cc-in 420ms var(--sc-ease-out, cubic-bezier(.22,.61,.36,1)) both;
}
@keyframes cc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cc__box {
  background: color-mix(in oklab, var(--sc-canvas) 94%, transparent);
  backdrop-filter: blur(18px);
  border: 1px solid var(--sc-hairline); border-radius: 8px;
  padding: var(--sc-5); box-shadow: 0 26px 70px -22px rgba(0,0,0,0.95);
}
.cc__h { margin: 0 0 0.6rem; font-size: 0.68rem; color: var(--sc-accent); }
.cc__b { margin: 0 0 var(--sc-4); font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); }
.cc__list { list-style: none; margin: 0 0 var(--sc-4); padding: 0; display: grid; gap: 0.55rem; }
.cc__list label { display: flex; gap: 0.65rem; align-items: flex-start; cursor: pointer; }
.cc__list input { margin-top: 0.22rem; accent-color: var(--sc-accent); flex: none; }
.cc__list input:disabled { opacity: 0.5; cursor: default; }
.cc__list b { display: block; font-weight: 500; font-size: var(--sc-t-sm); color: var(--sc-ink); }
.cc__list i { display: block; font-style: normal; font-size: 0.78rem; line-height: 1.5;
  color: color-mix(in oklab, var(--sc-ink) 42%, transparent); }
.cc__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cc__btn {
  flex: 1 1 auto; min-width: 7rem; cursor: pointer;
  padding: 0.7rem 0.9rem; border-radius: 100px;
  border: 1px solid var(--sc-hairline); background: none;
  color: var(--sc-ink-soft); font-family: inherit; font-size: 0.82rem;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.cc__btn:hover, .cc__btn:focus-visible { color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.cc__btn--yes {
  background: linear-gradient(135deg, #FF9A4D 0%, var(--sc-accent) 46%, #E8481B 100%);
  border-color: transparent; color: #140602; font-weight: 700;
}
.cc__btn--yes:hover, .cc__btn--yes:focus-visible { color: #140602; box-shadow: 0 10px 26px -8px rgba(255,92,40,0.6); }
.cc__link { display: inline-block; margin-top: var(--sc-4); font-size: 0.7rem;
  color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.cc__link:hover { color: var(--sc-accent); }
@media (prefers-reduced-motion: reduce) { .cc { animation: none; } }
/* Nothing to decide, so the panel is narrower and carries one action. */
.cc--notice { width: min(26rem, calc(100vw - 2rem)); }
.cc--notice .cc__acts { margin-top: var(--sc-4); }
.cc--notice .cc__btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Focused by script so the tab order starts inside the panel, never by keyboard
   — so it should not paint a ring around the whole box. */
.cc__box:focus { outline: none; }

/* =========================================================== MOBILE PASS ===
   Everything below applies only to a phone. The desktop composition is signed
   off and is left alone.
   ========================================================================= */
@media (max-width: 900px) {
  /* The mark and the first line were four pixels apart. */
  /* Top-aligned on a phone, and at least a screen tall. The section is no
     longer pinned here (see the de-pin script), so this is a plain block that
     grows with its content -- the portrait is allowed to run past the fold.

     Dropping the act also drops `.sc-stage`, and with it the `overflow: clip`
     that used to hold the backdrop in. The bloom is deliberately wider than the
     frame (inset -10% each side) so its light has somewhere to fall off, and
     without a clip those 39px became a sideways scroll on the whole page. The
     section clips instead. `clip` rather than `hidden`: it does not create a
     scroll container, so nothing inside can be pinned to it by accident. */
  #top { overflow: clip; }
  .hero { align-content: start; min-height: 100svh; }
  .hero__in { padding-top: 6.4rem; padding-bottom: 3.4rem; }  /* logo clearance / section rail */
  .hero__acts { margin-top: var(--sc-5); }

  /* Both actions on one line: the second label is long, so the pair shrinks
     rather than stacking. */
  .hero__acts { flex-wrap: nowrap; gap: 0.5rem; width: 100%; max-width: none; }
  .hero__acts .cta,
  .hero__acts .cta2 {
    padding: 0.72rem 0.95rem; font-size: 0.72rem; white-space: nowrap;
  }
  .hero__acts .cta2 { gap: 0.35rem; }

  /* In the hero column, not on the viewport: the rig moves the node in here on
     a phone and then leaves it alone. Laid out by CSS only, so there is nothing
     to recompute against a sticky stage and nothing to jump. Full width and a
     landscape crop -- the tall 3/4 frame had to shrink to about a third of the
     screen to fit under the buttons, which is why it read as a stamp. */
  .port {
    position: relative; inset: auto;   /* not static: the faces inside are absolute */
    width: 100%; aspect-ratio: 4 / 5;
    margin: var(--sc-6) 0 0;
    --port-bleed: 0%; --port-liftk: 0;
    transform: none; will-change: auto; perspective: none;
  }
  .port__inner { transform: none; }
  .port__face--b { display: none; }
  .port__face--a { object-position: 50% 22%; }   /* the crop is wide now, hold the face */

  /* The point section was mostly empty above the copy. */
  .peak__copy { top: 50%; bottom: auto; transform: translateY(-50%); }
  /* The top third of the still is dead black. On a portrait screen `cover`
     crops the width, not the height, so all of that emptiness stays in frame.
     Overscale the image and pull it up so the lit band lands behind the type. */
  .peak__bg { height: 150%; top: -28%; bottom: auto; }
}

/* Shorter phones get smaller type in the hero column, but nothing has to be
   made to fit a single viewport any more -- the section scrolls. */
@media (max-width: 900px) and (max-height: 800px) {
  .hero .mono { margin-bottom: var(--sc-5); }
  .hero .lede { margin-top: var(--sc-5); font-size: 0.9rem; }
  .hero__in { padding-top: 5.6rem; }
}

/* The photograph in the close, a little larger. */
.me { width: clamp(6.5rem, 13vw, 11rem); }
@media (max-width: 939px) { .me { width: clamp(6.5rem, 26vw, 9rem); } }

/* ------------------------------------------------------------- WhatsApp ---- */
.wafab {
  position: fixed; z-index: 90;
  right: clamp(0.9rem, 2vw, 1.6rem); bottom: clamp(1rem, 2.4vh, 1.6rem);
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem;
  border-radius: 50%; color: #140602; text-decoration: none;
  background: linear-gradient(135deg, #FF9A4D 0%, var(--sc-accent) 46%, #E8481B 100%);
  box-shadow: inset 0 1px 0 rgba(255,225,205,0.7),
              0 8px 22px -6px rgba(0,0,0,0.7),
              0 12px 34px -8px rgba(255,92,40,0.55);
  transition: transform 200ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out);
}
.wafab:hover, .wafab:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255,225,205,0.7),
              0 10px 26px -6px rgba(0,0,0,0.7),
              0 18px 46px -8px rgba(255,92,40,0.8);
}
.wafab:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 4px; }
@media (max-width: 900px) {
  /* clear of the section bar along the bottom */
  .wafab { bottom: 3.5rem; width: 3.1rem; height: 3.1rem; }
}
@media (prefers-reduced-motion: reduce) { .wafab { transition: none; } }