/* New ideas for the home page (prototype, 1 Oct 2026). Only the three new sections are styled here;
   everything else uses the site's styles.css unchanged. */

/* Paper, softened (Anna, 2 Oct 2026: "definitely softer"): #F8EFE6 had the yellowest hue in the palette
   (OKLCH 68 against about 55) and read as beige beside black and white. Per the brand book (drop chroma,
   never cool), Paper here is #F4F0ED: same lightness, chroma 0.006, hue 55. Prototype first; the brand
   book and styles.css follow once she has seen it across the page. */
:root { --paper: #F4F0ED; }   /* now also in styles.css for every page (7 Oct); kept here for the prototype history */

/* ============================================================
   1. The promise as a letterbox (Anna's pick, 2 Oct 2026, from five compositions: Now, On the grid, Bleed,
   Split title, Letterbox). A 2.39:1 frame across the page's column, her mark crossing its top edge, the
   headline crossing its foot (Paper over the footage, on a scrim only where the words are), then the
   line. It sits on the same column as every section below it, which is what the old split lacked.
   ============================================================ */
.stamp {
  --stamp-title: clamp(2.5rem, 4.6vw, 3.75rem);   /* 4 Oct 2026: section titles cap below the hero headline, which stays the loudest */
  padding-block: clamp(4.5rem, 8vw, 7.5rem) clamp(3rem, 6vw, 5rem);   /* the band below is gone (10 Oct): some air before What I make, not a full empty section */
  background: var(--black); color: var(--paper);
}
.stamp__frame { position: relative; margin: 0; aspect-ratio: 2.39 / 1; }
.stamp__clip { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.stamp__clip img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 55% 50%; }
.stamp__clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 12 11 / 0.75), rgb(14 12 11 / 0) 45%); }   /* a scrim only where the headline crosses */
/* The words: the headline's first line sits on the picture, the rest on the page, flush with the column */
.stamp__words { position: relative; z-index: 3; margin-top: calc(var(--stamp-title) * -1.12); }
.stamp__title { margin: 0; max-width: 16ch; font-size: calc((var(--stamp-title)) * 1.2); line-height: 1.02; letter-spacing: -0.03em; color: var(--paper); }
.stamp__rule { display: block; width: min(100%, 34rem); height: 1px; margin: clamp(1.5rem, 3vw, 2.5rem) 0 var(--s-5); background: rgb(248 239 230 / 0.35); }
.stamp__lead { max-width: 36ch; margin: 0; color: var(--paper); font-size: calc((var(--step-1)) * 1.2); text-wrap: balance; }
.stamp__title { text-wrap: balance; max-width: 26ch; }   /* room for "Show what sets you apart." on one line (10 Oct) */
/* Under the hairline (10 Oct 2026): the promise on the left, the clients on the right, starting on the same axis as
   the FAQ's right column. Names stacked in plain type: proof without adjectives. Phones stack the two. */
.stamp .stamp__rule { width: 100%; }
.stamp__below { display: block; }
.stamp__label { margin: 0 0 var(--s-3); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.stamp__clients ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.stamp__clients li { font-size: calc((var(--step-0)) * 1.2); color: var(--paper); }
.stamp__clients a { color: var(--paper); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui); }
@media (hover: hover) and (pointer: fine) { .stamp__clients a:hover { color: var(--oat); border-bottom-color: var(--oat); } }
.stamp__clients a:focus-visible { outline: 1px solid var(--oat); outline-offset: 3px; }
@media (max-width: 48rem) { .stamp__below { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* The new mark in the header over the hero: taller than the ribbon (1000 x 374 against 1000 x 279),
   so it is set narrower to stand the same height. */
.site-header--hero:not(.is-stuck) .wordmark__mark { width: clamp(6rem, 8.2vw, 8.6rem); }

/* ============================================================
   What video does, as a slim band under the promise (2 Oct 2026): her three points, numbered, in three
   columns of type with a hairline above each. It explains the promise without making it taller.
   ============================================================ */
.video-does { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.video-does__title {
  margin: 0 0 clamp(var(--s-6), 3vw, var(--s-7)); max-width: none;
  font-family: inherit; font-size: calc((var(--step--2)) * 1.2); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay);
}
.video-does__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--s-6), 4vw, var(--s-9)); margin: 0; padding: 0; list-style: none; }
.video-does__list li { padding-top: var(--s-5); border-top: 1px solid var(--rule-on-black); }
.video-does__no { display: block; font-family: var(--display); font-size: calc((var(--step-1)) * 1.2); color: var(--clay); }
.video-does__list h3 { margin: var(--s-3) 0; max-width: 18ch; font-size: calc((var(--step-2)) * 1.2); line-height: 1.15; color: var(--paper); }
.video-does__list p { margin: 0; max-width: 36ch; font-size: calc((var(--step--1)) * 1.2); line-height: 1.6; color: var(--oat); }
@media (max-width: 48rem) { .video-does__list { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   2. What I make as panels, after White Desert: three pictures side by side. The open one is wide and
   in colour, with the service underneath; the others are narrow, soft and black and white. With a mouse,
   pointing at one opens it at once; tapping or the keyboard opens it too (v2.js).
   Built the way White Desert's are, which is what makes theirs smooth (read from their code, 1 Oct 2026):
   each photograph keeps one size and the panel is a window onto it, so nothing is re-drawn as it widens;
   the black and white is a layer over the photograph (a backdrop filter) that fades away, rather than a
   filter re-rendered on every frame; and the words keep their width and only fade. On a laptop v2.js runs
   it with their timings: width 0.75s expo.out, the layer 0.2s expo.out, the words 0.75s. Phones stack
   the panels (section 9).
   ============================================================ */
.panels__row { display: flex; height: min(76svh, 44rem); container-type: inline-size; }   /* panels touch: no lines between them (Anna, 1 Oct) */
.panel { position: relative; overflow: hidden; min-width: 0; flex: 1 1 0; background: var(--ink); }
.panel.is-open { flex-grow: 4.2; }
/* The photograph is as wide as an open panel and centred in its window, so it never resizes */
.panel__img { position: absolute; top: 0; left: 50%; width: 68cqw; max-width: none; height: 100%; object-fit: cover; translate: -50% 0; }   /* max-width: none, or the site's img rule caps it at the panel */
/* The clip sits on the photograph with the same geometry, and shows only once it is playing (see styles.css, footage layers) */
.panel__film { position: absolute; top: 0; left: 50%; width: 68cqw; max-width: none; height: 100%; object-fit: cover; translate: -50% 0; opacity: 0.001; transition: opacity var(--t-slow) var(--ease); }
.panel__film.is-playing { opacity: 1; }
/* Black and white, darker and soft: a layer over the photograph that fades away when the panel opens */
.panel__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgb(14 12 11 / 0.01);   /* a backdrop filter needs something painted */
  -webkit-backdrop-filter: grayscale(1) brightness(0.55);   /* no blur (8 Oct): blurring moving video made */
  backdrop-filter: grayscale(1) brightness(0.55);           /* the page stutter and the closed films look soft */
}
.panel.is-open .panel__veil { opacity: 0; }
/* The whole closed panel is its button; its name sits at the foot */
.panel__open {
  position: absolute; inset: 0; z-index: 2; cursor: pointer;
  display: flex; align-items: flex-end; padding: var(--s-5);
  border: 0; background: none; color: var(--paper); text-align: left;
  font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); line-height: 1.1;
}
.panel__open span { transition: opacity 200ms var(--ease); }
.panel.is-open .panel__open { pointer-events: none; }
.panel.is-open .panel__open span { opacity: 0; }
/* The open panel's words, on a veil at its foot, as wide as an open panel so they never re-wrap */
.panel__body {
  position: absolute; left: 0; bottom: 0; z-index: 3; width: 68cqw;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) var(--s-5);   /* the words hug the left edge (Anna, 4 Oct 2026) */
  /* Two scrims so the words read over moving footage: one up from the foot, one in from the left, where the words sit */
  background:
    radial-gradient(ellipse 85% 100% at 0% 100%, rgb(14 12 11 / 0.6) 0%, rgb(14 12 11 / 0.3) 50%, rgb(14 12 11 / 0) 80%),   /* fades upward too, so no hard edge where the words begin (7 Oct) */
    linear-gradient(to top, rgb(14 12 11 / 0.92) 0%, rgb(14 12 11 / 0.7) 50%, rgb(14 12 11 / 0) 100%);
  opacity: 0; pointer-events: none;
}
.panel.is-open .panel__body { opacity: 1; pointer-events: auto; }
.panel__body h3 { margin: 0 0 var(--s-4); font-size: calc((var(--step-4)) * 1.2); color: var(--paper); }
.panel__body p { max-width: 42ch; margin: 0; color: var(--paper); }
.panel__types { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.panel__types li { font-size: calc((var(--step--1)) * 1.2); color: var(--oat); }
.panel__types li:not(:last-child)::after { content: "\00B7"; margin-left: var(--s-3); color: var(--clay); }   /* the dot trails its item, so a wrapped line never starts with one (7 Oct) */
.panel__link { display: inline-block; margin-top: var(--s-6); font-size: calc((var(--step--1)) * 1.2); color: var(--paper); border-bottom: 1px solid var(--oat); padding-bottom: 2px; }

/* ============================================================
   3. Recent work sideways, after Tandjung Sari: each project a photograph beside an Umber panel. On a
   laptop, motion.js (the existing film strip) holds the section and scrolling moves the strip sideways;
   on a phone the strip swipes.
   ============================================================ */
.work2__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }   /* the headline takes the width; the link sits at the end */
.work2__head h2 { margin-top: var(--s-3); max-width: 24ch; }
.work2__all { display: inline-block; margin-top: var(--s-4); font-size: calc((var(--step--1)) * 1.2); color: var(--paper); border-bottom: 1px solid var(--clay); padding-bottom: 2px; }
.work2__rail { grid-auto-columns: min(46vw, 42rem); gap: var(--s-5); margin-top: var(--s-6); padding-inline-start: var(--x0); scroll-padding-inline-start: var(--x0); }   /* starts on the content edge, under its label (7 Oct audit) */
.story {
  scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  min-height: min(60svh, 34rem);
  background: var(--ink); color: var(--paper); text-decoration: none;
}
.story__photo { position: relative; overflow: hidden; background: var(--ink); }
.story__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__panel { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-3); padding: clamp(1.25rem, 2.5vw, 2.25rem); }
.story__meta { font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.story h3 { margin: 0; font-size: calc((var(--step-3)) * 1.2); line-height: 1.05; color: var(--paper); }
.story p { margin: 0; font-size: calc((var(--step--1)) * 1.2); color: var(--paper); }
.story__more { margin-top: var(--s-3); align-self: flex-start; font-size: calc((var(--step--1)) * 1.2); border-bottom: 1px solid rgb(248 239 230 / 0.6); padding-bottom: 2px; }
.story--text { grid-template-columns: minmax(0, 1fr); background: var(--ink); }
.story--text h3 { font-size: calc((var(--step-4)) * 1.2); }
.story--end { grid-template-columns: minmax(0, 1fr); background: none; color: var(--paper); }
.story--end .story__panel { justify-content: center; }
.story--end h3 { color: var(--paper); font-size: calc((var(--step-4)) * 1.2); border-bottom: 1px solid var(--clay); align-self: flex-start; padding-bottom: 4px; }
@media (hover: hover) and (pointer: fine) {
  .story__more, .story--end h3 { transition: border-color var(--t-fast) var(--ease); }
  .story:hover .story__more { border-color: var(--paper); }
  .story--end:hover h3 { border-color: var(--paper); }
}

/* ============================================================
   Phones
   ============================================================ */
@media (max-width: 48rem) {
  .stamp { padding-block: var(--s-8) var(--s-4); }
  .stamp__frame { aspect-ratio: 4 / 3; }
  .stamp__words { margin-top: calc(var(--stamp-title) * -1.1); }

  .panels__row { flex-direction: column; height: auto; container-type: normal; }
  .panel { flex: none; height: 5.5rem; transition: height 600ms cubic-bezier(0.65, 0, 0.35, 1); }
  .panel.is-open { height: auto; min-height: 30rem; display: flex; flex-direction: column; justify-content: flex-end; }   /* grows with its words, so the title is never cut off (7 Oct audit) */
  .panel.is-open .panel__body { position: relative; }
  .panel__img, .panel__film { left: 0; width: 100%; translate: none; }
  .panel__body { right: 0; width: auto; }
  .panel__veil, .panel__body { transition: opacity 300ms var(--ease-ui); }
  .panel__open { align-items: center; }

  .work2__head { grid-template-columns: minmax(0, 1fr); }
  .work2__rail { grid-auto-columns: 84vw; }
  .story { grid-template-columns: minmax(0, 1fr); grid-template-rows: 15rem auto; min-height: 0; }
  .story--text, .story--end { grid-template-rows: auto; min-height: 15rem; }
}

/* ============================================================
   5. How it works as a journey, after White Desert's route map: one line from brief to delivery, a tick at
   each stop, each stop led by its fact set large. The line draws across as the section arrives.
   ============================================================ */
.journey__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--s-5); margin-bottom: clamp(var(--s-8), 7vw, var(--s-10)); }
.journey__head h2 { margin: 0; }
.journey__route {
  position: relative; list-style: none; margin: 0; padding: var(--s-7) 0 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(var(--s-5), 3vw, var(--s-7));   /* the first stop's fact is the longest */
}
.journey__route::before, .journey__route::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
.journey__route::before { background: rgb(248 239 230 / 0.18); }            /* the track */
.journey__route::after { background: var(--oat); transform-origin: left; }  /* the line, drawn over it */
.journey__stop { position: relative; }
.journey__stop::before { content: ""; position: absolute; left: 0; top: calc(-1 * var(--s-7) - 7px); width: 1px; height: 15px; background: var(--oat); }
.journey__step { display: block; margin-bottom: var(--s-4); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay); }
.journey__fact { display: block; margin-bottom: var(--s-4); font-family: var(--display); font-weight: 400; font-size: calc((clamp(2rem, 3vw, 2.75rem)) * 1.2); line-height: 1; letter-spacing: -0.03em; color: var(--paper); }
.journey__stop p { margin: 0; max-width: 30ch; color: var(--oat); }
/* 11 Oct 2026, Anna: "when i get to this section the progress is already filled". Scroll-linked, the line finished
   before the scroll settled on the section; now it draws once, when the whole route is on screen (home.js). */
@media (prefers-reduced-motion: no-preference) {
  .journey__route.will-draw::after { scale: 0 1; }
  .journey__route.will-draw.is-drawn::after { scale: 1 1; transition: scale 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.35s; }   /* the transition only on the way in, so hiding it at load is instant */
}
@keyframes journey-draw { from { scale: 0 1; } to { scale: 1 1; } }

/* ============================================================
   6. Why work with me, after Vander: a staggered title, the four reasons as type between hairlines (no
   icons). The strip of five frames under it came out on 4 Oct 2026: every frame had already been seen higher up the page.
   ============================================================ */
.why2__title { margin: 0 0 clamp(var(--s-8), 6vw, var(--s-10)); max-width: none; font-size: calc((var(--step-4)) * 1.2); line-height: 0.98; letter-spacing: -0.025em; }   /* the 48px h2 of 26 Sep, not 60px (7 Oct audit) */
.why2__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(var(--s-7), 6vw, var(--s-10)); }
.why2__grid article { padding: var(--s-6) 0 var(--s-7); border-top: 1px solid var(--rule-on-black); }
.why2__grid h3 { margin: 0 0 var(--s-3); font-size: calc((var(--step-3)) * 1.2); line-height: 1.1; color: var(--paper); }
.why2__grid p { margin: 0; max-width: 42ch; color: var(--oat); }
.why2__actions { margin-top: var(--s-4); }

/* ============================================================
   7. Testimonials, after Tengile: one quote set large across the page. With more than one, every client
   is named in a row underneath, like credits, and clicking a name shows their words (v2.js). Nothing
   turns over on its own. The quotes share one grid cell, so the section is as tall as the longest quote
   and never jumps when you switch. Without the script, or with ?quotes=all, they are listed instead.
   ============================================================ */
.words { padding-block: clamp(6rem, 12vw, 11rem); }
.words__quote, .words__quote blockquote { margin: 0; }
.words__quote p { margin: 0; font-family: var(--display); font-size: calc((clamp(1.75rem, 2.9vw, 2.75rem)) * 1.2); line-height: 1.14; letter-spacing: -0.02em; color: var(--paper); text-wrap: pretty; }
.words__quote figcaption { margin-top: var(--s-7); }
.words__quote cite { font-style: normal; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oat); }
.words__quote cite b { margin-right: 0.8em; font-weight: 600; color: var(--paper); }

/* Listed: the first quote large, the others in columns under it */
.words:not(.words--tabs) .words__quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(var(--s-6), 4vw, var(--s-9)); row-gap: clamp(var(--s-8), 6vw, var(--s-10)); }
.words:not(.words--tabs) .words__quote:first-child { grid-column: 1 / -1; }
.words:not(.words--tabs) .words__quote + .words__quote { padding-top: var(--s-5); border-top: 1px solid var(--rule-on-black); }
.words:not(.words--tabs) .words__quote + .words__quote p { font-size: calc((var(--step-2)) * 1.2); line-height: 1.3; letter-spacing: -0.01em; }
.words:not(.words--tabs) .words__quote + .words__quote figcaption { margin-top: var(--s-5); }

/* One at a time */
.words--tabs .words__quotes { display: grid; }
.words--tabs .words__quote {
  grid-area: 1 / 1; align-self: end;   /* a shorter quote sits on the names, the spare room goes above */
  opacity: 0; visibility: hidden; translate: 0 0.4rem;
  transition: opacity 280ms var(--ease-ui), translate 280ms var(--ease-ui), visibility 0s linear 280ms;
}
.words--tabs .words__quote.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.words--tabs .words__quote figcaption {   /* the row of names says who; kept for screen readers */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.words__names {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--s-5);
  margin-top: clamp(var(--s-8), 6vw, var(--s-10));
}
.words__name {
  position: relative; display: grid; align-content: start; gap: var(--s-2);
  padding: var(--s-4) 0 var(--s-2); border: 0; border-top: 1px solid var(--rule-on-black); background: none;
  font: inherit; text-align: left; color: var(--clay); cursor: pointer;
  transition: color var(--t-fast) var(--ease-ui);
}
.words__name::before {   /* the selected client's rule, drawn in Paper from the left */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--paper);
  scale: 0 1; transform-origin: left; transition: scale 420ms var(--ease-ui);
}
.words__name[aria-selected="true"] { color: var(--paper); }
.words__name[aria-selected="true"]::before { scale: 1 1; }
.words__no { font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); line-height: 1; }
.words__name b, .words__org { font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }
.words__name b { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .words__name:hover { color: var(--paper); } }
.words__name:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .words--tabs .words__quote { translate: none; transition: opacity 200ms linear, visibility 0s linear 200ms; }
  .words__name::before { transition: none; }
}

/* ============================================================
   8. FAQ: the title held on the left while the questions scroll past on the right.
   ============================================================ */
.faq2__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: start; }
.faq2__head { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.faq2__head h2 { margin: 0; }

/* ============================================================
   9. The closing, after Warm & Fuzzy's ending: a full-width frame behind the last line and both buttons.
   ============================================================ */
.finale { position: relative; overflow: hidden; display: grid; align-items: end; min-height: min(80svh, 46rem); background: var(--ink); color: var(--paper); }
.finale__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finale__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgb(14 12 11 / 0.86) 0%, rgb(14 12 11 / 0.4) 55%, rgb(14 12 11 / 0.15) 100%); }
.finale__inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(4rem, 9vw, 8rem); }
.finale h2 { margin: 0; max-width: 14ch; font-size: calc((var(--step-4)) * 1.2); color: var(--paper); }   /* 48px, as every h2 (7 Oct audit) */
.finale p { max-width: 48ch; margin: var(--s-5) 0 var(--s-6); color: var(--paper); }

/* Phones, for sections 4 to 9 */
@media (max-width: 48rem) {
  .journey__route { grid-template-columns: minmax(0, 1fr); padding-top: 0; row-gap: 0; }
  .journey__route::before, .journey__route::after, .journey__stop::before { display: none; }
  .journey__stop { padding: var(--s-5) 0 var(--s-6); border-top: 1px solid rgb(248 239 230 / 0.25); }
  .why2__grid { grid-template-columns: minmax(0, 1fr); }
  .faq2__grid { grid-template-columns: minmax(0, 1fr); }
  .faq2__head { position: static; }
  .words__names { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-3); }
  .words:not(.words--tabs) .words__quotes { grid-template-columns: minmax(0, 1fr); }
}

/* What I make, for anyone who asks for less motion: the panels switch without moving (v2.js does the same on a laptop) */
@media (prefers-reduced-motion: reduce) {
  .panel, .panel__veil, .panel__body { transition: none; }
}

/* Copy pass, 2 Oct 2026: statement headlines */
.video-does__line { margin: var(--s-4) 0 0; max-width: 52ch; color: var(--oat); }
.why2__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.words__title { margin: 0 0 clamp(var(--s-7), 5vw, var(--s-9)); max-width: 22ch; font-size: calc((clamp(2rem, 4vw, 3rem)) * 1.2); line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); }
@media (max-width: 48rem) { .why2__grid { grid-template-columns: minmax(0, 1fr); } }
.why2__lead { margin: calc(var(--s-6) * -1) 0 var(--s-8); max-width: 60ch; color: var(--oat); }

/* Hero, 3 Oct 2026: the card and side thumbnails go; "Films for" stays still and the services roll up
   beneath it, each one in time with the film behind (home.js follows the carousel's active slide). */
.hero--carousel .hero__frame, .hero--carousel .hero__caption, .hero--carousel .hero__thumbs { display: none !important; }
.hero__lead { margin: 0; }
.hero__services {
  --line: 1.08em;
  position: relative; height: calc(var(--line) * 3); overflow: hidden; margin: 0 0 var(--s-8); padding: 0; list-style: none;
  font-family: var(--display); font-size: calc((clamp(1.75rem, 3.2vw, 2.75rem)) * 1.2); line-height: var(--line); letter-spacing: -0.03em;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
          mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.hero__services li {
  height: var(--line); color: var(--paper); opacity: 0.28;
  translate: 0 calc(var(--line) * (0 - var(--i, 0)));
  transition: translate 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms ease;
}
.hero__services li.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__services li { transition: none; } }
.hero__services button { all: unset; cursor: pointer; }
.hero__services button:focus-visible { outline: 1px solid var(--paper); outline-offset: 4px; }
@media (hover: hover) { .hero__services li:not(.is-on):hover { opacity: 0.65; } }

/* A market fact under a panel (4 Oct 2026): small, with its source named, like a footnote in a magazine */
.panel__body .panel__fact { margin: var(--s-6) 0 0; max-width: 46ch; font-size: calc((var(--step--1)) * 1.2); line-height: 1.5; color: var(--paper); }
.panel__num { display: block; margin-bottom: var(--s-1); font-family: var(--display); font-size: calc((var(--step-3)) * 1.2); line-height: 1; letter-spacing: -0.02em; color: var(--paper); }   /* the figure reads first, as a serif numeral (7 Oct) */
.panel__fact cite { display: block; margin-top: var(--s-1); font-style: normal; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--oat); }
/* The open panel's service list and figure, in a row under the panels (laptop; home.js moves them here) */
.panels__notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; padding-top: var(--s-5); margin-top: var(--s-5); border-top: 1px solid rgb(220 195 176 / 0.22); }
.panels__notes:empty { display: none; }
.panels__notes .panel__types { margin: 0; }
.panels__notes .panel__fact { margin: 0; justify-self: end; max-width: 40ch; color: var(--paper); }
@media (max-width: 48rem) { .panels__notes { display: none; } }


/* Video in numbers, under the promise (10 Oct 2026): three verified figures in a row, serif numerals over a hairline,
   each with its source named. Phones stack them. */
.stamp__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.stamp__stats li { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid rgb(248 239 230 / 0.2); }
.stamp__num { font-family: var(--display); font-weight: 400; font-size: calc((var(--step-4)) * 1.2); line-height: 1; letter-spacing: -0.02em; color: var(--paper); }
.stamp__stats span { font-size: calc((var(--step--1)) * 1.2); line-height: 1.5; color: var(--paper); max-width: 32ch; }
.stamp__stats cite { font-style: normal; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); max-width: 34ch; }
@media (max-width: 48rem) { .stamp__stats { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-7); } }

/* Promise, 10 Oct 2026 (Anna picked "Proposed, 56px"): headline and lead side by side, crossing the photo's foot together;
   the long rule is gone, so only the three short rules above the stats remain; bigger numerals; sources short and linked. */
.stamp__top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-6); align-items: end; }
.stamp__top .stamp__lead { max-width: 30ch; padding-bottom: 0.35em; }
.stamp .stamp__stats { margin-top: clamp(3rem, 6vw, 5rem); }
.stamp .stamp__stats li { padding-top: var(--s-5); gap: var(--s-3); }
.stamp .stamp__num { font-size: calc((clamp(2.75rem, 4.2vw, 3.5rem)) * 1.2); letter-spacing: -0.03em; }
.stamp .stamp__stats cite { color: #C9A891; }
.stamp .stamp__stats cite a { color: inherit; text-decoration: none; border-bottom: 1px solid rgb(180 145 123 / 0.4); }
.stamp .stamp__stats cite a:hover, .stamp .stamp__stats cite a:focus-visible { color: var(--oat); border-color: currentColor; }
@media (max-width: 48rem) { .stamp__top { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .stamp__top .stamp__lead { padding: 0; } }

/* 10 Oct 2026 (Anna picked "A" in prototypes/promise-title): the second sentence of the promise in Times italic, the payoff. */
.stamp__payoff { font-style: italic; }
/* 10 Oct 2026: the lead sat across the photo's bottom edge (the edge cut between its lines). Two lines now, beside
   "Be known for it.", so it starts below the photo; the headline is the only thing that crosses the edge. */
.stamp__top { grid-template-columns: auto minmax(0, 1fr); }
.stamp__top .stamp__title { max-width: none; }
.stamp__top .stamp__lead { max-width: 25rem; justify-self: end; text-wrap: balance; padding: 0; margin-bottom: calc(var(--stamp-title) * -0.36); }   /* two lines are taller than one headline line, so it hangs a little below the baseline to clear the photo */
@media (max-width: 48rem) { .stamp__top { grid-template-columns: minmax(0, 1fr); } .stamp__top .stamp__lead { justify-self: start; padding: 0; margin-bottom: 0; } }
/* 10 Oct 2026: the longer lead ("…So is the business behind them.") holds two lines from 1024px up with a 2rem gap and
   no width cap; below that it would wrap to three and cross the photo, so it drops under the headline instead. */
.stamp__top { gap: 2rem; }
.stamp__top .stamp__lead { max-width: none; }
@media (max-width: 64rem) {
  .stamp__top { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .stamp__top .stamp__lead { justify-self: start; max-width: 34rem; margin-bottom: 0; }
}
/* 10 Oct 2026 (Anna, prototypes/promise-corner #c1): the lead moves into the photo's top-right corner, the headline
   stays bottom-left, so the two sit at opposite corners of the frame. A small, soft darkening from that corner keeps
   it legible over the leaves (Anna: smaller than the prototype's). Phones: the photo is too small, so the lead drops
   under the headline as before. */
@media (min-width: 48.0625rem) {
  .stamp .inner { position: relative; }
  .stamp .stamp__words { position: static; }
  .stamp .stamp__title, .stamp .stamp__stats { position: relative; z-index: 3; }
  .stamp .stamp__top { grid-template-columns: minmax(0, 1fr); }
  .stamp .stamp__top .stamp__lead {
    position: absolute; z-index: 2;
    top: clamp(1.25rem, 2.6vw, 2.25rem); right: calc(var(--gutter) + clamp(1.25rem, 2.6vw, 2.25rem));
    max-width: 17rem; margin: 0; padding: 0; justify-self: auto;
    font-size: calc((var(--step-0)) * 1.2); line-height: 1.5; color: var(--paper); text-wrap: balance;
  }
  .stamp__clip::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 33% 42% at 100% 0%, rgb(14 12 11 / 0.7), rgb(14 12 11 / 0) 100%); }
}

/* 11 Oct 2026, section bands (Anna, from prototypes/section-bands v4): one dark theme in two tints, Black and Ink,
   alternating so each chapter starts with a visible change; About stays Paper, the page's one light moment.
   Umber was tried on the testimonial and rejected ("reminds me of poo colour" on a big screen): never a large field.
   The Recent work cards are Ink by design, so on the Ink band they turn Black to stay visible as cards. */
.stamp, .section.panels, .section.words, .section.faq2 { background: var(--black); }
.section.work2, .section.why2, .section.journey { background: var(--ink); }
.section.work2 .story, .section.work2 .story__photo, .section.work2 .story--text { background: var(--black); }
.section.work2 .story--end { background: none; }

/* 11 Oct 2026 (taste review): no dots between service names (they wrapped badly on phones); space separates them. */
.panel__types { gap: var(--s-1) var(--s-5); }
.panel__types li:not(:last-child)::after { content: none; }

/* ===== 11 Oct 2026: the new home page (from prototypes/home-v3 and prototypes/finale, Anna's picks) ===== */
/* Promise on Ink; its photo fades are re-tinted so the image meets the band without an edge */
.stamp { background: var(--ink); }
.stamp__clip { background: var(--ink); }
.stamp__clip::after { background: linear-gradient(to top, rgb(26 21 18 / 0.75), rgb(26 21 18 / 0) 45%); }
.stamp__clip::before { background: radial-gradient(ellipse 33% 42% at 100% 0%, rgb(26 21 18 / 0.7), rgb(26 21 18 / 0) 100%); }
/* Recent work back to its design: Ink cards on Black */
.section.work2 { background: var(--black); }
.section.work2 .story, .section.work2 .story__photo, .section.work2 .story--text { background: var(--ink); }
.section.work2 .story--end { background: none; }
/* Testimonial over a dimmed still of the event it describes; the words stay on the dark left */
.section.words { position: relative; isolation: isolate; background: var(--black) url("assets/testimonial-room.jpg") 78% 40% / cover no-repeat; padding-block: clamp(6rem, 12vw, 10rem); }
.section.words::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(14 12 11 / 0.94) 0%, rgb(14 12 11 / 0.86) 42%, rgb(14 12 11 / 0.45) 72%, rgb(14 12 11 / 0.25) 100%); }
.words__full { margin: 0; max-width: 38rem; }
.words__pull { margin: 0; color: var(--paper); }   /* Times regular at the site's heading size, like every h2 */
.words__full blockquote { margin: var(--s-6) 0 0; }
.words__full blockquote p { margin: 0; font-family: var(--sans); font-size: calc((var(--step-0)) * 1.2); line-height: 1.6; color: var(--paper); max-width: 34ch; }
.words__full figcaption { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgb(248 239 230 / 0.25); }
.words__full cite { font-style: normal; font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); }
.words__full cite b { font-weight: 600; margin-right: 0.8em; }
@media (max-width: 48rem) { .section.words::before { background: rgb(14 12 11 / 0.82); } }
/* How it works as a film strip: one frame of her work above each step */
.section.journey { background: var(--ink); }
.journey__frame { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin: 0 0 var(--s-4); }
@media (max-width: 48rem) { .journey__frame { aspect-ratio: 16 / 9; } }
/* The ending: What should your audience feel? */
.section.feel { --feel-y: clamp(2.5rem, 6svh, 4rem); background: var(--black); padding-block: var(--feel-y); }
/* 11 Oct 2026, Anna: "take into account the height of the monitors... i can't see the title question". The whole ending fits one
   screen under the sticky header: the question, the words and the link share the left column, and the frame takes its height from
   the screen (4:5, never taller than the window), so the title is never above the fold while the frame fills it. */
.feel__wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(var(--s-7), 6vw, var(--s-10)); align-items: center; min-height: calc(100svh - var(--header-h) - 2 * var(--feel-y)); }
.feel #feel-title { font-size: calc((clamp(2.5rem, 4.6vw, 3.75rem)) * 1.2); line-height: 1.02; letter-spacing: -0.03em; }   /* the promise's title size: this question is the page's last headline */
.feel__sub { max-width: 38ch; margin: var(--s-3) 0 clamp(1rem, 3svh, 2rem); color: var(--oat); font-size: calc((var(--step-0)) * 1.2); }
.feel__list { list-style: none; margin: 0; padding: 0; }
.feel__list button { all: unset; cursor: default; display: block; font-family: var(--display); font-size: calc((clamp(1.25rem, min(1.9vw, 3.2svh), 1.75rem)) * 1.2); line-height: 1.2;   /* 11 Oct: about half the question's size, so the question leads (Anna: "the title is the same size as the feelings") */ letter-spacing: -0.03em; color: var(--paper); opacity: 0.35; transition: opacity 300ms ease; }
.feel__list button.is-on { opacity: 1; }
.feel__list button:focus-visible { outline: 1px solid var(--oat); outline-offset: 4px; }
.feel__stage { position: relative; height: min(68svh, 38rem);   /* 11 Oct: a frame beside the words, not a wall; Anna: "is the video size intentional to be so big?" */ aspect-ratio: 4 / 5; background: var(--ink); overflow: hidden; }
.feel__cell { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; }
.feel__cell.is-on { opacity: 1; }
.feel__cell img, .feel__cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feel__cell video { opacity: 0; transition: opacity 300ms ease; }
.feel__cell.is-live video { opacity: 1; }
.feel__go { margin: clamp(1.25rem, 4svh, 2.5rem) 0 0; }
.feel__go a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--clay); padding-bottom: 2px; font-size: calc((var(--step-0)) * 1.2); }
@media (max-width: 48rem) { .feel__wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); min-height: 0; } .feel__text { display: contents; } .feel__go { order: 1; margin: 0; } .feel__stage { height: auto; max-height: none; width: 100%; aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .feel__list button, .feel__cell, .feel__cell video { transition: none; } }

/* 11 Oct 2026 (Anna: colour boxes flashed for a second on Back before turning black and white). The closed
   panels were greyed by a backdrop-filter layer, which browsers can skip for a frame when they restore a page
   from memory. Now the photo and clip themselves are greyed, so a closed panel is never painted in colour. */
.panel__veil { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
.panel .panel__img, .panel .panel__film { filter: grayscale(1) brightness(0.55); }
.panel .panel__img { transition: filter 350ms var(--ease); }
.panel .panel__film { transition: opacity var(--t-slow) var(--ease), filter 350ms var(--ease); }
.panel.is-open .panel__img, .panel.is-open .panel__film { filter: none; }
@media (prefers-reduced-motion: reduce) { .panel .panel__img, .panel .panel__film { transition: none; } }

/* ============================================================
   Fit to the screen (11 Oct 2026). Anna: "when designing the height of each section, take into account the height of
   the monitors". The scroll settles each section under the sticky header, so the part that matters (title plus its
   pictures) must fit 100svh minus the header. Pictures give way first; type and widths stay as set on 26 Sep.
   ============================================================ */
@media (min-width: 48.0625rem) {
  .stamp { padding-block: clamp(2.5rem, min(8vw, 9svh), 7.5rem) clamp(2.5rem, min(6vw, 7svh), 5rem); }
  .stamp__frame { aspect-ratio: auto; height: min(calc((min(100vw, 76rem) - 2 * var(--gutter)) / 2.39), calc(100svh - var(--header-h) - 27rem)); min-height: 15rem; }
  .panels__row { height: min(76svh, 44rem, calc(100svh - var(--header-h) - 2 * var(--section-y) - 5.5rem)); min-height: 24rem; }
  .journey__head { margin-bottom: clamp(var(--s-6), min(7vw, 7svh), var(--s-10)); }
  .journey__frame { aspect-ratio: auto; height: min(calc((min(100vw, 76rem) - 2 * var(--gutter) - 3 * clamp(1.5rem, 3vw, 3rem)) / 4.3 * 4 / 3), calc(100svh - var(--header-h) - 2 * var(--section-y) - 20rem)); min-height: 9rem; }
  .work2 .story { min-height: min(60svh, 34rem, calc(100svh - var(--header-h) - var(--section-y) - 12rem)); }
}

/* How it works as type (11 Oct 2026): no photos, four equal columns, a tick for every stop */
.journey__route { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); }   /* the first fact is the longest */
.journey__fact { font-size: calc((clamp(2rem, 3vw, 2.75rem)) * 1.2); margin-bottom: var(--s-5); white-space: nowrap; }
.journey__stop p { max-width: 24ch; }
@media (max-width: 48rem) { .journey__route { grid-template-columns: minmax(0, 1fr); } }

/* Testimonial, 11 Oct 2026. Anna: "the text feels too wrapped" and "prioritise the name of the company over who gave
   the recommendation". The quote runs wider (two lines for the pull, about four for the body), and the company leads
   the credit in Times; the person and role follow, small. Tech Data's logo can replace the name once Dom sends it. */
.words__full { max-width: 54rem; }
.words__pull { max-width: 26ch; text-wrap: balance; }
.words__full blockquote p { max-width: 64ch; font-size: calc((var(--step-1)) * 1.2); line-height: 1.55; text-wrap: pretty; }
.words__full figcaption { flex-wrap: wrap; align-items: baseline; column-gap: var(--s-5); row-gap: var(--s-2); }
.words__co { font-family: var(--display); font-size: calc((var(--step-2)) * 1.2); line-height: 1; letter-spacing: -0.01em; color: var(--paper); }
.words__full cite { color: var(--oat); }
.words__full cite b { color: var(--paper); }

/* What I make, 11 Oct 2026, after White Desert's trips row (measured at 1440x820: row 1416 wide, open card four closed
   cards wide, title top-left at 42px, closed cards blurred). Anna's verdicts that day: keep the boxes ("I love the current
   format of boxes"); the row edge to edge; closed boxes blurred in muted colour, names upright and bigger; "What I make"
   one line at nearly hero size, the one heading allowed above the 4 Oct cap; "Includes" inside the open box. Fits one
   screen under the header on an 820px laptop; 704px tall on a big screen. Phones keep the stacked panels as before. */
.panels { overflow-x: clip; container-type: inline-size; }   /* the section is the measure for the full-width row, so the scrollbar can't skew it */
.panels__row { height: min(68svh, 40rem, calc(100svh - var(--header-h) - 2 * var(--section-y) - 5.5rem)); }
@media (min-width: 48.0625rem) {
  .panels .inner.stack-l { gap: 0; }
  #uses .head { margin-bottom: 0; position: relative; z-index: 2; pointer-events: none; }   /* back on the column edge with every other heading (11 Oct); the boxes still run wide */
  #uses .head h2 { margin: 0 0 clamp(0.75rem, 2svh, 1.25rem); padding-inline: 0;   /* 11 Oct: its own line above the boxes, not over them (Anna: "the title is overlapping the boxes"); inset like the names below */
    font-size: calc((clamp(3rem, 6.2vw, 5.75rem)) * 1.2); line-height: 0.95; letter-spacing: -0.035em; white-space: nowrap; text-shadow: 0 2px 40px rgb(14 12 11 / 0.5); }
  .panels__row { height: min(calc(100svh - var(--header-h) - 15rem), 44rem); }
  .panel.is-open { flex-grow: 4; }
  /* closed boxes: the footage's own colour, dimmed and blurred (the blur is on the still itself, never a backdrop filter
     over playing video, the 8 Oct rule), scaled 5% so the soft edge stays inside the box; it clears as the box opens */
  .panel .panel__img, .panel .panel__film { filter: saturate(0.85) brightness(0.75) blur(10px); transform: scale(1.05); transition: filter 500ms ease, transform 500ms ease; }
  .panel.is-open .panel__img, .panel.is-open .panel__film { filter: none; transform: none; }
  .panel__open { align-items: flex-start; padding: clamp(1.25rem, 2.6vw, 2.5rem) 0.6rem; background: linear-gradient(to bottom, rgb(14 12 11 / 0.55), rgb(14 12 11 / 0) 45%); }
  .panel__open span { font-size: calc((clamp(1.2rem, 1.55vw, 2rem)) * 1.2); line-height: 1.02; letter-spacing: -0.025em; overflow-wrap: normal; }   /* sized so "videography" stays whole in a column-width closed box */   /* "videography" whole from 1024px wide */
  /* the open box: its title top-left, the sentence, Includes and link at the foot; as wide as the box (4 of 8 shares) */
  .panel__body { inset: 0; width: 50cqw; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
    padding: clamp(1.25rem, 2.6vw, 2.5rem) clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.6vw, 2.5rem);
    background: linear-gradient(to bottom, rgb(14 12 11 / 0.55), rgb(14 12 11 / 0) 35%), linear-gradient(to top, rgb(14 12 11 / 0.85) 0%, rgb(14 12 11 / 0.45) 35%, rgb(14 12 11 / 0) 60%); }
  .panel__body h3 { margin: 0 0 auto; font-size: calc((clamp(2.25rem, 3vw, 2.75rem)) * 1.2); line-height: 1.02; letter-spacing: -0.03em; max-width: 14ch; }
  .panel__body > p:not(.panel__fact) { margin-top: var(--s-5); max-width: 40ch; }
}
/* "Includes": a hairline, a small label, then the list in Paper at body size, dots between */
.panel__types { display: flex; flex-wrap: wrap; gap: var(--s-1) 0; margin: var(--s-4) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid rgb(248 239 230 / 0.28); }
.panel__types::before { content: "Includes"; flex-basis: 100%; margin-bottom: var(--s-1); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--oat); }
.panel__types li { font-size: calc((var(--step-0)) * 1.2); line-height: 1.45; color: var(--paper); }
.panel__types li:not(:last-child)::after { content: "\00B7" !important; margin: 0 0.6em; color: var(--clay); }
.panel__body .panel__fact { margin-top: var(--s-4); }
.panel__body .panel__fact .panel__num { display: inline; margin: 0 0.3em 0 0; font-size: calc((var(--step-2)) * 1.2); }
.panel__body .panel__link { margin-top: var(--s-4); }


/* 11 Oct 2026 (Anna): "put includes as list on the right". On a laptop the open box splits at its foot: the sentence and
   link on the left, "Includes" as a list down the right, one item per line between hairlines. */
@media (min-width: 48.0625rem) {
  .panel__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10.5rem, 0.62fr); grid-template-rows: 1fr auto auto auto; column-gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
  .panel__body h3 { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  .panel__body > p:not(.panel__fact) { grid-column: 1; grid-row: 2; }
  .panel__body .panel__fact { grid-column: 1; grid-row: 3; }
  .panel__body .panel__link { grid-column: 1; grid-row: 4; justify-self: start; }
  .panel__types { grid-column: 2; grid-row: 2 / 5; display: block; margin: 0; padding: 0; border: 0; }
  .panel__types::before { display: block; padding-bottom: var(--s-2); border-bottom: 1px solid rgb(248 239 230 / 0.35); }
  .panel__types li { padding: 0.45rem 0; border-bottom: 1px solid rgb(248 239 230 / 0.18); line-height: 1.3; }
  .panel__types li:not(:last-child)::after { content: none !important; }
}
.panels__else { margin: var(--s-5) 0 0; color: var(--oat); font-size: calc((var(--step-0)) * 1.2); }
.panels__else a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--clay); padding-bottom: 2px; }

/* 11 Oct 2026: with body text at 18px, the longest open box (Hotels, stays and experiences: a two-line title and five
   Includes) ran into its title on a 720px-tall laptop. The title may take one line, and the list tightens on short screens. */
@media (min-width: 48.0625rem) {
  .panel__body h3 { max-width: 22ch; }
}
@media (min-width: 48.0625rem) and (max-height: 50rem) {
  .panel__types li { padding: 0.25rem 0; line-height: 1.25; }
  .panel__body { padding-top: 1.25rem; padding-bottom: 1.25rem; }
  .panel__body h3 { font-size: calc((2.125rem) * 1.2); }
}

/* One column (11 Oct 2026, Anna: going full, centred, wide, half-sliding, centred "feels very awkward"). Only the hero
   is full screen; every section after it shares the column's two edges. */
.work2__window { overflow: clip; padding-inline: 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); }
.work2 .work2__rail { padding-inline-start: 0; scroll-padding-inline-start: 0; }
.section.words { background: var(--black); }
.section.words::before { content: none; }
.words > .inner { background:
    linear-gradient(90deg, rgb(14 12 11 / 0.94) 0%, rgb(14 12 11 / 0.86) 42%, rgb(14 12 11 / 0.45) 72%, rgb(14 12 11 / 0.25) 100%),
    url("assets/testimonial-room.jpg") 78% 40% / cover no-repeat;
  background-clip: content-box; background-origin: content-box; }
.words .words__full { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem); }

/* The ending as a cinema (11 Oct 2026). Anna: "a cinema is much better", "add some UI to buttons", "make Tell me what
   you're working on bigger, and maybe some part italic", "definitely make feel in italic". */
.section.cine { background: var(--black); padding-block: clamp(2rem, 5svh, 3.5rem); }
.cine > .inner { min-height: calc(100svh - var(--header-h) - 2 * clamp(2rem, 5svh, 3.5rem)); display: flex; flex-direction: column; justify-content: center; }
.cine__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); margin-bottom: clamp(1rem, 3svh, 1.75rem); }
.cine__head h2 { margin: 0; font-size: calc((clamp(2.5rem, 4.6vw, 3.75rem)) * 1.2); line-height: 1.02; letter-spacing: -0.03em; color: var(--paper); }
.cine__head h2 em { font-style: italic; padding-right: 0.04em; }
.cine__head p { margin: 0; max-width: 30ch; color: var(--oat); text-align: right; }
.cine__screen { position: relative; aspect-ratio: 2.39 / 1; max-height: calc(100svh - var(--header-h) - 22rem); width: 100%; overflow: hidden; background: var(--ink); }
.cine__cell { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms ease; }
.cine__cell.is-on { opacity: 1; }
.cine__cell img, .cine__cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine__cell video { opacity: 0; transition: opacity 300ms ease; }
.cine__cell.is-live video { opacity: 1; }
/* The feelings as buttons: a hairline over each like a tab, the chosen one's drawn in Paper; the words lift on hover */
.cine__words { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.cine__words button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: clamp(0.75rem, 2svh, 1.1rem) 0 0;
  border-top: 1px solid rgb(248 239 230 / 0.18); font-family: var(--display); font-size: calc((clamp(1.15rem, 1.6vw, 2rem)) * 1.2); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--paper); opacity: 0.4; transition: opacity 200ms ease, border-color 200ms ease; }
.cine__words button.is-on { opacity: 1; border-top: 2px solid var(--paper); padding-top: calc(clamp(0.75rem, 2svh, 1.1rem) - 1px); }
@media (hover: hover) and (pointer: fine) { .cine__words button:hover { opacity: 0.85; border-top-color: rgb(248 239 230 / 0.5); } }
.cine__words button:focus-visible { outline: 1px solid var(--oat); outline-offset: 4px; }
.cine__words button:active { transform: scale(0.98); }
/* The one next step, set as a line of display type */
.cine__go { margin: clamp(1.25rem, 4svh, 2.5rem) 0 0; }
.cine__go a { display: inline-block; font-family: var(--display); font-size: calc((clamp(1.75rem, 2.8vw, 2.75rem)) * 1.2); line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--clay); padding-bottom: 0.12em; transition: border-color 200ms ease; }
.cine__go a em { font-style: italic; }
.cine__go a span { display: inline-block; margin-left: 0.3em; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .cine__go a:hover { border-bottom-color: var(--paper); } .cine__go a:hover span { transform: translateX(0.2em); } }
@media (max-width: 48rem) {
  .cine__head { grid-template-columns: minmax(0, 1fr); }
  .cine__head p { text-align: left; }
  .cine__screen { aspect-ratio: 4 / 5; max-height: none; }
  .cine__words { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); }
  .cine__words button { font-size: calc((1.35rem) * 1.2); padding-bottom: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) { .cine__cell, .cine__cell video, .cine__words button, .cine__go a span { transition: none; } }

/* 11 Oct 2026 (Anna): "the words seem to be unproportionally placed". Even gaps between the words instead of equal
   columns: the first word starts on the screen's left edge, the last ends on its right, each tab line as wide as its
   word. Nine feelings now (Inspiration added). Phones keep two per row. */
@media (min-width: 48.0625rem) {
  .cine__words { display: flex; justify-content: space-between; gap: var(--s-4); }
  .cine__words button { width: auto; }
}

/* 11 Oct 2026 (Anna): "some text, e.g. this, is too wrapped". With body text at 18px, measures set in rem or narrow ch
   now broke into short lines. Each block gets room for longer lines. */
.cine__head p { max-width: 48ch; }
@media (min-width: 48.0625rem) {
  .stamp .stamp__top .stamp__lead { max-width: 23rem; }
  .panel__body { grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 0.5fr); column-gap: clamp(1rem, 2vw, 2rem); padding-right: clamp(1.25rem, 2vw, 2rem); }
}
.stamp .stamp__stats span { max-width: 36ch; text-wrap: pretty; }
.journey__stop p { max-width: none; }

/* The next step as its own section (11 Oct 2026), on Ink so it reads as a band after the cinema */
.section.next { background: var(--ink); padding-block: clamp(4rem, 12svh, 8rem); }
.next__go { margin: 0; }
.next__go a { display: inline-block; font-family: var(--display); font-size: calc((clamp(2.5rem, 4.6vw, 3.75rem)) * 1.2); line-height: 1.05; letter-spacing: -0.03em; color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--clay); padding-bottom: 0.1em; transition: border-color 200ms ease; }
.next__go a em { font-style: italic; }
.next__go a span { display: inline-block; margin-left: 0.3em; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .next__go a:hover { border-bottom-color: var(--paper); } .next__go a:hover span { transform: translateX(0.15em); } }
.next__go a:focus-visible { outline: 1px solid var(--oat); outline-offset: 6px; }
@media (max-width: 48rem) { .next__go a { display: inline; font-size: calc((2.25rem) * 1.2); } }
@media (prefers-reduced-motion: reduce) { .next__go a span { transition: none; } }
.next__go { max-width: none; }
@media (min-width: 48.0625rem) { .next__go a { white-space: nowrap; } }

/* Testimonials (11 Oct 2026): a label saying what the section is, and a swipeable track with dots that appear only when
   there is more than one testimonial (home.js). */
.words__label { display: block; margin-bottom: var(--s-5); color: var(--oat); }
.words__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.words__track::-webkit-scrollbar { display: none; }
.words__track > .words__full { scroll-snap-align: start; }
.words__dots { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.words__dots[hidden] { display: none; }
.words__dots button { all: unset; cursor: pointer; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(248 239 230 / 0.3); transition: background-color 200ms ease, transform 160ms ease-out; }
.words__dots button[aria-current="true"] { background: var(--paper); }
.words__dots button:active { transform: scale(0.9); }
.words__dots button:focus-visible { outline: 1px solid var(--oat); outline-offset: 3px; }
.words > .inner .words__label { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem) 0; margin-bottom: 0; }
.words > .inner .words__dots { padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); margin-top: 0; }
.words .words__track .words__full { padding-top: var(--s-5); }

/* 11 Oct 2026 (Anna): "you can't see that what clients say, it should be outside the image". The label sits above the
   framed photo on the plain ground, like RECENT WORK; the photo frames the testimonials only. */
.words > .inner { background: none; }
.words__track { background:
    linear-gradient(90deg, rgb(14 12 11 / 0.94) 0%, rgb(14 12 11 / 0.86) 42%, rgb(14 12 11 / 0.45) 72%, rgb(14 12 11 / 0.25) 100%),
    url("assets/testimonial-room.jpg") 78% 40% / cover no-repeat; }
.words > .inner .words__label { padding: 0; margin-bottom: var(--s-4); }
.words .words__track .words__full { padding-top: clamp(2.5rem, 6vw, 5rem); }
.words > .inner .words__dots { padding: 0; margin-top: var(--s-4); }
/* "no, this looks really bad on the page": the next step and the footer read as one block on Ink, with no black strip */
.section.next { margin-bottom: 0; border-bottom: 1px solid rgb(248 239 230 / 0.08); }

/* 11 Oct 2026 (Anna): "WHAT CLIENTS SAY is too small, it needs to be consistent with other headings". It is the section's
   h2 now, set like Questions worth asking; the pull quote steps down a size so the heading leads. */
.words > .inner .words__label { margin: 0 0 clamp(var(--s-5), 4svh, var(--s-7)); font-family: var(--display); font-size: calc((var(--step-4)) * 1.2); line-height: 1.05; letter-spacing: -0.02em; text-transform: none; color: var(--paper); font-weight: 400; }
.words__pull { margin: 0; font-family: var(--display); font-size: calc((clamp(1.75rem, 2.8vw, 2.5rem)) * 1.2); line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); max-width: 26ch; text-wrap: balance; }
.section.words { padding-block: var(--section-y); }   /* the heading added height; the section still fits one screen */
/* 11 Oct 2026 (Anna): "What I make is not consistent now". Back to the site's heading size, like every other section */
#uses .head h2 { font-size: calc((var(--step-4)) * 1.2); line-height: 1.05; letter-spacing: -0.02em; text-shadow: none; white-space: normal; margin-bottom: clamp(var(--s-5), 4svh, var(--s-7)); }
/* 11 Oct 2026 (Anna): "make them consistent". Every section heading on the home page at the site's h2 size (48px on a
   laptop), the promise and the ending included; only the hero headline is larger. */
.stamp { --stamp-title: var(--step-4); }
.cine__head h2 { font-size: calc((var(--step-4)) * 1.2); line-height: 1.05; letter-spacing: -0.02em; }

/* 11 Oct 2026 (Anna): the next step "looks bad in terms of taste: underline, italic, big font, some arrow and nothing
   else". One heading at the site's size with italic as its only device, and two plain buttons beside it. */
.section.next { padding-block: clamp(3.5rem, 9svh, 6rem); }
.next__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-6); }
.next__title { margin: 0; font-size: calc((var(--step-4)) * 1.2); line-height: 1.05; letter-spacing: -0.02em; color: var(--paper); }
.next__title em { font-style: italic; }
.next__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
@media (max-width: 48rem) { .next__row { grid-template-columns: minmax(0, 1fr); } }
/* 11 Oct 2026 (Anna): "I miss more shadow images like the beginning of the page". The promise's warm branch shadow returns
   at the close, mirrored and cropped differently so it reads as the same light, not the same photo; it fades into Ink on
   the left, where the heading sits, so the words stay on a dark ground. */
.section.next { background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 30%, rgb(26 21 18 / 0.72) 55%, rgb(26 21 18 / 0.35) 100%),
    url("assets/shadow-close.jpg") right center / cover no-repeat, var(--ink); }
@media (max-width: 48rem) { .section.next { background: linear-gradient(180deg, rgb(26 21 18 / 0.85), rgb(26 21 18 / 0.6)), url("assets/shadow-close.jpg") 70% center / cover no-repeat, var(--ink); } }
.section.next { padding-block: clamp(5.5rem, 18svh, 10rem); }   /* 11 Oct: "a bit too narrow": a taller band, so the light has room */

/* 11 Oct 2026 (Anna picked them from the Unsplash board, prototypes/shadows): 17, palm fronds, graded to golden hour as
   light in darkness, closes the page; 12, soft window light, sits behind How it works, the one section without pictures.
   Both stay under dark fades where the words sit. Unsplash licence: free for commercial use. */
.section.next { background:
    linear-gradient(90deg, var(--ink) 0%, rgb(26 21 18 / 0.92) 28%, rgb(26 21 18 / 0.45) 58%, rgb(26 21 18 / 0.1) 100%),
    url("assets/shadow-palm-golden.jpg") right center / cover no-repeat, var(--ink); }
.section.journey { background:
    linear-gradient(180deg, rgb(26 21 18 / 0.9) 0%, rgb(26 21 18 / 0.82) 45%, rgb(26 21 18 / 0.93) 100%),
    url("assets/light-window.jpg") center / cover no-repeat, var(--ink); }
@media (max-width: 48rem) { .section.next { background: linear-gradient(180deg, rgb(26 21 18 / 0.88), rgb(26 21 18 / 0.55)), url("assets/shadow-palm-golden.jpg") 70% center / cover no-repeat, var(--ink); } }
/* 11 Oct 2026 (Anna: "where is it"): both lights were too dim to notice. Lighter fades, so the light reads at a glance */
.section.next { background:
    linear-gradient(90deg, var(--ink) 0%, rgb(26 21 18 / 0.85) 25%, rgb(26 21 18 / 0.2) 55%, rgb(26 21 18 / 0) 100%),
    url("assets/shadow-palm-golden.jpg") right 30% / cover no-repeat, var(--ink); }
.section.journey { background:
    linear-gradient(180deg, rgb(26 21 18 / 0.78) 0%, rgb(26 21 18 / 0.6) 50%, rgb(26 21 18 / 0.82) 100%),
    url("assets/light-window.jpg") center / cover no-repeat, var(--ink); }
/* 11 Oct 2026 (Anna): "I didn't ask you to replace it!" The close keeps the promise's mirrored branch shadow; the new
   photos are additions elsewhere, never replacements. */
.section.next { background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 30%, rgb(26 21 18 / 0.72) 55%, rgb(26 21 18 / 0.35) 100%),
    url("assets/shadow-close.jpg") right center / cover no-repeat, var(--ink); }
@media (max-width: 48rem) { .section.next { background: linear-gradient(180deg, rgb(26 21 18 / 0.85), rgb(26 21 18 / 0.6)), url("assets/shadow-close.jpg") 70% center / cover no-repeat, var(--ink); } }
/* 11 Oct 2026 (Anna, on the window light: "not convinced, we could find a better one"): How it works gets her own pick,
   17, the palm fronds graded to golden hour; the light falls on the right, the words sit on the dark left. */
.section.journey { background:
    linear-gradient(90deg, rgb(14 12 11 / 0.92) 0%, rgb(14 12 11 / 0.72) 40%, rgb(14 12 11 / 0.35) 75%, rgb(14 12 11 / 0.2) 100%),
    url("assets/shadow-palm-golden.jpg") right center / cover no-repeat, var(--black); }

/* 11 Oct 2026 (Anna: "i don't like this brown"). Back to the brand book's rule: Black #0E0C0B is the ground of every
   section; Ink #1A1512 only inside things (cards, frames, the boxes behind footage). Sections are told apart by space and
   by the warm light images, not by colour bands. */
.stamp, .section.work2, .section.words, .section.cine, .person--light.person--dark { background: var(--black); }
.person--light.person--dark { --person-ground: var(--black); }
.section.next { background:
    linear-gradient(90deg, var(--black) 0%, var(--black) 30%, rgb(14 12 11 / 0.72) 55%, rgb(14 12 11 / 0.35) 100%),
    url("assets/shadow-close.jpg") right center / cover no-repeat, var(--black); }
@media (max-width: 48rem) { .section.next { background: linear-gradient(180deg, rgb(14 12 11 / 0.85), rgb(14 12 11 / 0.6)), url("assets/shadow-close.jpg") 70% center / cover no-repeat, var(--black); } }

/* 11 Oct 2026 (Anna): on one continuous Black "you can't tell where new information starts". Each section after the
   promise opens with a hairline across the column, the editorial way to start a new story; the spacing either side of
   it is the same everywhere. */
main > section.section:not(.stamp), main > .pin-spacer > section.section { position: relative; }
main > section.section:not(.stamp)::before, main > .pin-spacer > section.section::before {
  content: ""; position: absolute; top: 0; height: 1px; z-index: 1; pointer-events: none;
  left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: rgb(248 239 230 / 0.14);
}
.stamp { padding-bottom: var(--section-y); }
/* 11 Oct 2026 (Anna): the section hairlines "don't look good"; removed */
main > section.section:not(.stamp)::before, main > .pin-spacer > section.section::before { content: none; }
/* 11 Oct 2026 (Anna): "having additional colour looks odd when I go to About me". The Recent work cards' text panels were
   the last brown blocks on the page; they sit on Black now, so each card is its photo and its words. */
.section.work2 .story, .section.work2 .story--text { background: var(--black); }
/* 11 Oct 2026 (Anna): "no, panels were ok" (Ink back on the Recent work cards); "it looks odd having nothing on About me".
   About gets warm light too: the soft window light (her 12) falls across the ground behind the name, dark where the words sit. */
.section.work2 .story, .section.work2 .story--text { background: var(--ink); }
.person.person--light.person--dark { background:
    linear-gradient(90deg, rgb(14 12 11 / 0.82) 0%, rgb(14 12 11 / 0.55) 45%, rgb(14 12 11 / 0.88) 80%, var(--black) 100%),
    url("assets/light-window.jpg") 20% center / cover no-repeat, var(--black); }
/* 11 Oct 2026 (Anna): the window light behind About is "definitely not" in line with the taste skill; removed */
.person.person--light.person--dark { background: var(--black); }
/* 11 Oct 2026 (Anna): "this is the About me section, all I want is a clear separation from the rest". Separation by space
   only, nothing added: About takes a whole screen of its own, its content centred in it, with a pause above and below
   about twice the gap between other sections. */
@media (min-width: 48.0625rem) {
  main > section.person { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; padding-block: clamp(8rem, 22svh, 12rem); margin-block: clamp(3rem, 8svh, 5rem); }
  main > section.person > .inner { width: 100%; }
}
/* 11 Oct 2026 (Anna): the words in the open box were "hard to read". The footage is dimmed a little (no blur, no crop),
   and the wash behind the sentence and Includes is deeper. */
@media (min-width: 48.0625rem) {
  .panel.is-open .panel__img, .panel.is-open .panel__film { filter: brightness(0.78); }
  .panel__body { background:
      linear-gradient(to bottom, rgb(14 12 11 / 0.6), rgb(14 12 11 / 0) 32%),
      linear-gradient(to top, rgb(14 12 11 / 0.9) 0%, rgb(14 12 11 / 0.65) 40%, rgb(14 12 11 / 0.15) 70%, rgb(14 12 11 / 0) 85%); }
}
/* "I don't see any changes": 78% was too subtle. The open footage at 60%, and the wash reaches higher behind the words */
@media (min-width: 48.0625rem) {
  .panel.is-open .panel__img, .panel.is-open .panel__film { filter: brightness(0.6); }
  .panel__body { background:
      linear-gradient(to bottom, rgb(14 12 11 / 0.65), rgb(14 12 11 / 0) 30%),
      linear-gradient(to top, rgb(14 12 11 / 0.92) 0%, rgb(14 12 11 / 0.75) 45%, rgb(14 12 11 / 0.3) 75%, rgb(14 12 11 / 0) 90%); }
}
/* 11 Oct 2026 (Anna): "much better, now make the font a little bit smaller", the open box's words a step down */
@media (min-width: 48.0625rem) {
  .panel__body h3 { font-size: calc((clamp(2rem, 2.6vw, 2.4rem)) * 1.2); }
  .panel__body > p:not(.panel__fact) { font-size: calc((var(--step--1)) * 1.2); line-height: 1.55; }
  .panel__types li { font-size: calc((var(--step--1)) * 1.2); }
  .panel__body .panel__link { font-size: calc((var(--step--1)) * 1.2); }
}
/* "I don't see changes": a clearer step down */
@media (min-width: 48.0625rem) {
  .panel__body h3 { font-size: calc((clamp(1.75rem, 2.2vw, 2.1rem)) * 1.2); }
  .panel__body > p:not(.panel__fact), .panel__types li, .panel__body .panel__link { font-size: calc((0.9375rem) * 1.2); line-height: 1.5; }
}
/* "the titles can be made bigger": the open box's title back up to about 40px; the smaller body text stays */
@media (min-width: 48.0625rem) { .panel__body h3 { font-size: calc((clamp(2.25rem, 2.8vw, 2.6rem)) * 1.2); } }

/* 11 Oct 2026 (Anna): "the image needs to change when you change the testimonials". Each testimonial carries its own
   photo from that client's job (Tech Data: the partner event; Nearo: the podcast), so it slides in with the words. */
.words__track { background: none; }
.words__track > .words__full { background:
    linear-gradient(90deg, rgb(14 12 11 / 0.94) 0%, rgb(14 12 11 / 0.86) 42%, rgb(14 12 11 / 0.5) 72%, rgb(14 12 11 / 0.3) 100%),
    var(--bg) var(--pos, center) / cover no-repeat, var(--black); }
/* "the image looks a bit short": a taller frame, the words centred in it; still one screen with its heading */
.words__track > .words__full { min-height: min(calc(100svh - var(--header-h) - 15rem), 40rem); display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.words__track > .words__full { min-height: min(calc(100svh - var(--header-h) - 11rem), 46rem); }
/* "the image seems to be more to the left": the frame runs the column's full width; only the words keep a reading width */
.words__track > .words__full { max-width: none; width: 100%; }
.words__track > .words__full > * { max-width: 54rem; }
/* The carousel says so: counter, longer markers, arrows */
.words__dots { align-items: center; gap: var(--s-4); margin-top: var(--s-5); }
.words__dots button:not(.words__arrow) { width: 2.5rem; height: 2px; border-radius: 0; background: rgb(248 239 230 / 0.25); }
.words__dots button[aria-current="true"] { background: var(--paper); }
.words__count { font-family: var(--display); font-size: calc((var(--step-1)) * 1.2); color: var(--paper); margin-right: var(--s-3); min-width: 3ch; }
.words__arrow { all: unset; cursor: pointer; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid rgb(248 239 230 / 0.3); font-size: calc((1.1rem) * 1.2); color: var(--paper); transition: border-color 200ms ease, transform 160ms ease-out; }
.words__arrow:first-of-type { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .words__arrow:hover { border-color: var(--paper); } }
.words__arrow:active { transform: scale(0.96); }
.words__arrow:focus-visible { outline: 1px solid var(--oat); outline-offset: 3px; }
/* "this is too messy": the row is the counter and two arrows only; the markers go, and the arrows lose the dot styling */
.words__dots button:not(.words__arrow) { display: none; }
.words__dots .words__arrow { all: unset; box-sizing: border-box; cursor: pointer; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid rgb(248 239 230 / 0.3); border-radius: 0; background: none; font-size: calc((1.05rem) * 1.2); line-height: 1; color: var(--paper); transition: border-color 200ms ease, transform 160ms ease-out; }
.words__dots .words__arrow:first-of-type { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .words__dots .words__arrow:hover { border-color: var(--paper); } }
.words__dots { gap: var(--s-3); }
.words__count { margin-right: 0; }

/* Client logos in the credit (11 Oct 2026), white, the height of the company name; Tech Data's waits for Dom's current file */
.words__logo { display: block; height: 1.9rem; width: auto; opacity: 0.92; }