/* Home page. A walk down the factory aisle (drawn by walk.js), the two materials, the working cycle,
   a filterable product range, the ordering journey, sectors and brands. */

/* ---------- The factory walk ----------
   The view holds still while the page scrolls under it, so scrolling walks down the aisle. Without the
   script, or with reduced motion, it is one view of the aisle with the words over it. */
.walk { position: relative; }
.walk__view {
  position: relative; overflow: hidden; isolation: isolate;
  height: max(32rem, calc(100svh - var(--header-h)));
  background: var(--sky);
}
/* about six screens of scrolling, so the walk is unhurried */
.walk.is-live { height: calc(max(32rem, calc(100svh - var(--header-h))) + 680svh); }
.walk.is-live .walk__view { position: sticky; top: var(--header-h); }
.walk__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.walk__view.is-pointing .walk__canvas { cursor: pointer; }
.walk__view::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 46%, transparent 55%, rgb(10 5 20 / 0.55));
}

/* The words stand at the entrance; walk.js slides them away as you start walking.
   On wide screens they sit in a column on the left and the aisle opens up to their right. */
.walk__copy {
  position: absolute; inset: 0 0 4.5rem; z-index: 2;
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: 1.5rem var(--gutter);
  pointer-events: none;
}
.walk.is-live .walk__copy { will-change: transform, opacity; }
.walk.is-walking .walk__copy { visibility: hidden; }
.walk__copy::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: min(74rem, 140vw); height: 100%; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(22 12 40 / 0.92) 55%, rgb(22 12 40 / 0.7) 75%, transparent);
}
.walk__copy a { pointer-events: auto; }
.hero__kicker {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
  font-size: clamp(0.6875rem, 0.62rem + 0.3vw, 0.875rem); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre);
}
.hero__kicker::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
.hero__title {
  margin-inline: auto; max-width: 11ch;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  line-height: 0.98; letter-spacing: -0.032em; font-weight: 700;
}
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__title .w > span {
  display: inline-block; padding-bottom: 0.08em;
  background: linear-gradient(180deg, #FFF6EC 35%, #FFC3A0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede {
  margin: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) auto 0; max-width: 40ch;
  font-size: var(--text-0); line-height: 1.55; font-weight: 340; color: var(--on-ink-soft);
}
.hero__actions { justify-content: center; margin-top: 1.75rem; }
.hero__facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem;
  margin-top: 1.75rem; font-size: 0.9375rem; color: var(--on-ink-soft);
}
.hero__facts li { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__facts svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--ochre); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; flex: none; }
@media (max-width: 63.99rem), (max-height: 46rem) { .hero__facts { display: none; } }
@media (min-width: 64rem) and (min-aspect-ratio: 1/1) {
  .walk__copy {
    justify-items: start; text-align: left;
    padding-left: max(var(--gutter), calc((100% - var(--max)) / 2));
  }
  .walk__copy::before {
    left: 0; top: 0; bottom: -4.5rem; width: auto; height: auto; right: 0; translate: none;
    background: linear-gradient(90deg, rgb(19 10 36 / 0.95) 0, rgb(19 10 36 / 0.9) 32%, rgb(19 10 36 / 0.72) 45%, rgb(19 10 36 / 0.25) 57%, transparent 68%);
  }
  .hero__title, .hero__lede { margin-inline: 0; }
  .hero__lede { max-width: 36ch; font-size: var(--text-1); line-height: 1.5; }
  .hero__actions { justify-content: flex-start; }
  .hero__facts { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 244 232 / 0.16); }
}

/* Headline: each word is released from the mould line, then the type cures */
.motion .hero__title .w > span { animation: word-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--wi) * 85ms + 120ms) both; }
.motion .hero__kicker, .motion .hero__lede, .motion .hero__actions, .motion .hero__facts { animation: rise-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.motion .hero__lede { animation-delay: 0.6s; }
.motion .hero__actions { animation-delay: 0.75s; }
.motion .hero__facts { animation-delay: 0.9s; }
@keyframes word-up { from { translate: 0 105%; } to { translate: 0 0; } }

/* Where you are, and a way past */
.walk__hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem 1.5rem;
  padding: 0.9rem var(--gutter) 1rem;
  background: linear-gradient(rgb(19 10 36 / 0), rgb(19 10 36 / 0.8));
  font-size: var(--text--1);
}
.walk:not(.is-live) .walk__hud { display: none; }
.walk__skip { justify-self: start; }
.walk__now { justify-self: center; display: grid; gap: 0.15rem; text-align: center; color: var(--on-ink-soft); }
.walk__bay { font-weight: 640; color: var(--lime); }
.walk__pair:empty { display: none; }
.walk__quote { justify-self: end; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.walk.is-walking .walk__quote { visibility: visible; opacity: 1; transition: opacity 0.3s ease; }
.walk__progress {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 2px;
  background: var(--pink); transform-origin: left; transform: scaleX(0);
}
@media (max-width: 40rem) {
  .walk__hud { grid-template-columns: 1fr auto; }
  .walk__now { grid-column: 1 / -1; grid-row: 1; }
  .walk__quote { padding-block: 0.6rem; }
}

/* The map of the walk on the bar: a mark for each stop (walk.js) */
.walk__map { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 0; }
.walk__stop {
  position: absolute; top: 0; width: 1.5rem; height: 1.5rem; translate: -50% -50%;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.walk__stop::before {
  content: ""; position: absolute; inset: 0.45rem; border-radius: 50%;
  background: var(--night); border: 2px solid rgb(255 244 232 / 0.55);
  transition: inset 0.3s var(--ease-out, ease), background-color 0.3s ease, border-color 0.3s ease;
}
.walk__stop.is-past::before { background: var(--pink); border-color: var(--pink); }
.walk__stop.is-here::before { inset: 0.25rem; background: var(--ochre); border-color: var(--lime); }
.walk__stop::after {
  content: attr(data-name); position: absolute; bottom: calc(100% + 0.25rem); left: 50%; translate: -50% 0;
  padding: 0.15rem 0.45rem; white-space: nowrap; pointer-events: none;
  font-size: 0.75rem; font-weight: 640; color: var(--lime); background: rgb(19 10 36 / 0.92);
  opacity: 0; transition: opacity 0.2s ease;
}
.walk__stop:is(:hover, :focus-visible)::after { opacity: 1; }
.walk__stop:focus-visible { outline: 2px solid var(--ochre); outline-offset: 0; }

/* Name tags over the factory, placed by walk.js: a shipping tag tied to its piece by a string.
   They are page elements rather than part of the canvas, so the words stay sharp on every screen. */
.walk__tags { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.walk__strings { position: absolute; inset: 0; width: 100%; height: 100%; }
.walk__string { fill: none; stroke: var(--ochre); stroke-width: 1.8; stroke-linecap: round; }
.walk__arrow { fill: var(--ochre); }
.walk__ring { fill: none; stroke: var(--ochre); stroke-width: 1.5; }
.walk__tag {
  --point: 1.1rem; /* the pointed end, with the hole 0.75rem in */
  position: absolute; left: 0; top: 0; isolation: isolate;
  display: grid; gap: 0.3rem;
  padding: 0.6rem 1rem 0.65rem calc(var(--point) + 0.9rem);
  color: var(--ink); text-decoration: none; white-space: nowrap;
  visibility: hidden; will-change: transform, opacity;
}
.walk__tag.is-on { visibility: visible; }
a.walk__tag.is-on { pointer-events: auto; }
.walk__tag--right { padding: 0.6rem calc(var(--point) + 0.9rem) 0.65rem 1rem; }
.walk__tag--left { transform-origin: 0.75rem 50%; }
.walk__tag--right { transform-origin: calc(100% - 0.75rem) 50%; }
/* the card and its shadow share the tag's shape: a pointed end, and the site's chamfered corner */
.walk__tag::before, .walk__tag::after { content: ""; position: absolute; inset: 0; }
.walk__tag--left::before, .walk__tag--left::after {
  clip-path: polygon(var(--point) 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, var(--point) 100%, 0 66%, 0 34%);
}
.walk__tag--right::before, .walk__tag--right::after {
  clip-path: polygon(6px 0, calc(100% - var(--point)) 0, 100% 34%, 100% 66%, calc(100% - var(--point)) 100%, 0 100%, 0 6px);
}
.walk__tag::before { z-index: -2; translate: 2px 6px; background: rgb(8 4 18 / 0.4); }
/* the card, with its punched hole and the ring round it */
.walk__tag::after { z-index: -1; --hole: 0.75rem 50%; background: radial-gradient(circle at var(--hole), #1A1030 0 3.5px, var(--ochre) 4px 5.5px, var(--lime) 6px); }
.walk__tag--right::after { --hole: calc(100% - 0.75rem) 50%; }
/* pointed at, or reached from the keyboard: an ochre edge */
.walk__tag:is(:hover, .is-marked)::before { inset: -2.5px; translate: none; background: var(--ochre); }
.walk__tag-kicker {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(36 20 58 / 0.62);
}
.walk__tag-chip { padding: 0.05rem 0.3rem; border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); letter-spacing: 0.06em; }
.walk__tag-chip[data-material="grc"] { background: var(--stipple) var(--stone); }
.walk__tag-chip[data-material="frp"] { background: var(--gel); }
.walk__tag-name { font-size: clamp(1.0625rem, 0.75rem + 0.85vw, 1.625rem); font-weight: 680; line-height: 1.1; }
a.walk__tag .walk__tag-name::after { content: " \203A"; color: #E2702E; }
a.walk__tag:is(:hover, .is-marked) .walk__tag-name { text-decoration: underline 2px; text-decoration-color: var(--ochre); text-underline-offset: 0.18em; }
@media (max-width: 37.5rem) {
  .walk__tag { --point: 0.95rem; gap: 0.2rem; padding: 0.45rem 0.65rem 0.5rem calc(var(--point) + 0.65rem); }
  .walk__tag--right { padding: 0.45rem calc(var(--point) + 0.65rem) 0.5rem 0.65rem; }
  .walk__tag-kicker { font-size: 0.5625rem; gap: 0.3rem; }
  .walk__tag-name { font-size: 0.9375rem; }
}

/* ---------- Two materials ----------
   GRC and FRP either side of a small casting bay, where the same arch stands in both materials.
   The line between them follows the range input (home.js), and pointing at either side swings it over. */
@property --split { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }
.duo { display: grid; gap: 1.25rem; }
@media (min-width: 64rem) { .duo { grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem) minmax(0, 1fr); } }

.duo__side {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  color: var(--ink);
  transition: translate 0.4s var(--ease-out, ease), box-shadow 0.4s ease;
}
.duo__side--grc { background: var(--stipple) var(--stone); }
.duo__side--frp { background: var(--gel); }
.duo__side:hover { translate: 0 -4px; box-shadow: 0 1.5rem 2.5rem -1.75rem rgb(36 20 58 / 0.6); }
.duo__title { display: grid; gap: 0.35rem; margin-bottom: 0.25rem; }
.duo__code { font-size: clamp(3.5rem, 2.4rem + 3.4vw, 5.25rem); line-height: 0.85; font-weight: 780; letter-spacing: -0.04em; }
.duo__name { font-size: var(--text-1); font-weight: 620; line-height: 1.25; }
.duo__side > p { max-width: 46ch; }
.duo__label {
  margin-top: 0.5rem;
  font-size: 0.75rem; font-weight: 720; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(36 20 58 / 0.72);
}
.duo__recipe { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.duo__recipe li { padding: 0.35rem 0.75rem; font-size: 0.9375rem; font-weight: 620; background: var(--lime); border: 1.5px solid var(--ink); }
.duo__side--frp .duo__recipe li { background: #E3F4F1; }
.duo__traits { display: grid; gap: 0.45rem; font-weight: 620; }
.duo__traits li { display: flex; align-items: center; gap: 0.65rem; }
.duo__traits li::before {
  content: ""; flex: none; width: 0.85rem; height: 0.45rem; margin: 0 0.1rem 0.2rem;
  border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); rotate: -45deg;
}
.duo__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: auto; padding-top: 1rem; }
.duo .text-link { text-decoration-color: var(--ink); }
.duo .text-link:hover { text-decoration-thickness: 3px; }
/* A gloss sweeps across the FRP side */
.duo__side--frp::after {
  content: ""; position: absolute; inset: -20% auto -20% -40%; width: 30%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.55), transparent);
  transform: skewX(-18deg) translateX(-100%);
}
.motion .duo__side--frp::after { animation: gloss 6s ease-in-out 1.5s infinite; }
.motion .duo__side--frp:hover::after { animation-duration: 1.6s; }
@keyframes gloss { 0%, 70% { transform: skewX(-18deg) translateX(-100%); } 100% { transform: skewX(-18deg) translateX(560%); } }
/* The ingredients drop in one after another */
.motion .duo__recipe:not(.in-view) li { opacity: 0; translate: 0 -0.6rem; }
.motion .duo__recipe.in-view li { transition: opacity 0.4s ease, translate 0.5s var(--ease-out, ease); transition-delay: calc(var(--i) * 110ms + 200ms); }

/* The casting bay: the arch on its plinth against the sunset */
.duo__bay {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.75rem;
  margin: 0; padding: 1.25rem 1.25rem 1rem;
  background: var(--sky); color: var(--lime);
}
@media (max-width: 63.99rem) { .duo__bay { order: -1; } }
.duo__tags { display: flex; justify-content: space-between; font-size: var(--text--1); font-weight: 760; letter-spacing: 0.1em; }
.duo__tags span:last-child { color: var(--gel); }
.duo__compare { position: relative; min-height: 24rem; --split: 50%; transition: --split 0.7s var(--ease-out, ease); }
.duo__compare.is-dragging { transition: none; }
.duo__sun {
  position: absolute; left: 50%; top: 4%; width: min(86%, 19rem); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: var(--sun);
  -webkit-mask: var(--sun-stripes); mask: var(--sun-stripes);
}
.duo__compare::before {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 7%;
  background: linear-gradient(#3A2058, #24143A); border: 1.5px solid rgb(255 244 232 / 0.6); border-bottom: 0;
}
.duo__compare::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px; background: var(--lime); }
.duo__art {
  position: absolute; inset: 0; padding: 6% 16% 7%;
  display: flex; align-items: flex-end; justify-content: center;
  --px: 1.6; --pxd: 1; --void: #3E1850;
}
.duo__art .drawing { width: 100%; height: 100%; }
.duo__art--grc { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.duo__art--frp { clip-path: inset(0 0 0 var(--split)); }
.duo__handle { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--split); width: 2px; translate: -1px 0; background: var(--lime); pointer-events: none; }
.duo__handle::after {
  content: "\2039\00A0\203A"; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--lime); color: var(--ink); font-size: 1.25rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0.5rem 1.25rem rgb(12 6 22 / 0.5);
}
.duo__compare:has(.duo__range:focus-visible) .duo__handle::after { outline: 3px solid var(--ochre); outline-offset: 3px; }
.duo__range {
  position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
.duo__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2.75rem; height: 24rem; }
.duo__range::-moz-range-thumb { width: 2.75rem; height: 24rem; border: 0; }
.duo__caption { text-align: center; font-size: var(--text--1); color: var(--on-ink-soft); }
/* Once the arch is cast, the line sweeps across to show what it does; it stops once you take over */
.motion .duo__compare:has(.drawing):has(.in-view) { animation: duo-hint 2.8s var(--ease-in-out, ease-in-out) 2.4s backwards; }
.motion .duo.is-touched .duo__compare { animation: none; }
@keyframes duo-hint { 0%, 100% { --split: 50%; } 30% { --split: 18%; } 68% { --split: 82%; } }

/* ---------- How it's made ---------- */
.how { position: relative; }

/* ---------- Product range ---------- */
.range__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.range__intro { display: grid; gap: 1rem; }
.range__intro p { color: var(--ink-soft); max-width: 50ch; }
.filter { position: relative; display: inline-flex; padding: 4px; border: 2px solid var(--ink); background: var(--lime); }
.filter button {
  position: relative; z-index: 1; min-width: 4.75rem; min-height: 2.75rem; padding: 0.4rem 1rem;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  font-weight: 640; font-size: 1rem; font-variation-settings: "SHRP" 100;
  transition: color 0.3s ease;
}
.filter button[aria-pressed="true"] { color: var(--lime); }
.filter:not(.is-ready) button[aria-pressed="true"] { background: var(--ink); }
.filter__thumb { position: absolute; top: 4px; bottom: 4px; left: var(--tx, 4px); width: var(--tw, 0); background: var(--ink); transition: left 0.4s cubic-bezier(0.65, 0, 0.35, 1), width 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.filter :focus-visible { outline-offset: 2px; }

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 12rem; grid-auto-flow: dense; gap: 0.75rem; }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 13.5rem; } }
@media (min-width: 72rem) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 14rem; gap: 1rem; } }
.tile { view-transition-name: var(--vt); }
.tile--xl { grid-column: span 2; grid-row: span 2; }
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile[hidden] { display: none; }
.tile a { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--ink); text-decoration: none; background: var(--cement); --void: var(--cement); }
.tile[data-material="frp"] a { background: #D9F0EC; --void: #D9F0EC; }
.tile__art { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding: 1.25rem 1.25rem 0; border-bottom: 2px solid var(--ink); }
.tile__art .drawing { width: 100%; height: 100%; max-width: calc(var(--w) * 1.1px); max-height: calc(var(--h) * 1.1px); transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile__cap { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; }
.tile__cap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ochre); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile__name { font-weight: 620; font-variation-settings: "SHRP" 100; line-height: 1.25; }
.tile__tag { flex: none; font-size: 0.8125rem; font-weight: 640; padding: 0.1rem 0.45rem; border: 1.5px solid currentColor; }
.tile a:is(:hover, :focus-visible) .tile__cap::before { transform: scaleX(1); }
.tile a:is(:hover, :focus-visible) .tile__art .drawing { translate: 0 -8px; }
.tile a:focus-visible { outline-offset: 3px; }
::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
html.is-filtering::view-transition-old(root), html.is-filtering::view-transition-new(root) { animation: none; }
html.is-filtering .site-header { view-transition-name: none; }

/* ---------- Ordering journey ---------- */
.journey { position: relative; display: grid; gap: 2rem; --icon: 3.5rem; }
.journey::before, .journey::after { content: ""; position: absolute; }
.journey::before { left: calc(var(--icon) / 2 - 1px); top: 0; bottom: 0; width: 2px; background: var(--ink); transform-origin: top; }
.journey::after { left: calc(var(--icon) / 2 - 6px); top: 0; width: 12px; height: 12px; background: var(--pink); border: 2px solid var(--ink); opacity: 0; }
.journey__step { position: relative; display: grid; grid-template-columns: var(--icon) 1fr; column-gap: 1.25rem; align-items: start; align-content: start; }
.journey__step h3, .journey__step p { grid-column: 2; }
.journey__step p { color: var(--ink-soft); margin-top: 0.35rem; }
.journey__icon { grid-row: 1 / span 2; position: relative; z-index: 1; width: var(--icon); height: var(--icon); display: grid; place-items: center; background: var(--lime); border: 2px solid var(--ink); }
.journey__icon svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
@media (min-width: 64rem) {
  .journey { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
  .journey::before { left: 0; right: 0; top: calc(var(--icon) / 2 - 1px); bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .journey::after { top: calc(var(--icon) / 2 - 6px); left: 0; }
  .journey__step { grid-template-columns: 1fr; row-gap: 1rem; }
  .journey__step h3, .journey__step p { grid-column: 1; }
  .journey__icon { grid-row: auto; }
}
.motion .journey:not(.in-view)::before { transform: scale(0); }
.motion .journey::before { transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.motion .journey:not(.in-view) .journey__icon { scale: 0.4; opacity: 0; }
.motion .journey .journey__icon { transition: scale 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 0.22s + 0.3s), opacity 0.3s ease calc(var(--i) * 0.22s + 0.3s); }
.motion .journey.in-view::after { animation: token-down 8s linear 1.6s infinite; }
.motion .journey.in-view .journey__icon { animation: lit 8s linear calc(var(--i) * 1.6s + 1.6s) infinite; }
@media (min-width: 64rem) { .motion .journey.in-view::after { animation-name: token-across; } }
@keyframes token-across { 0% { left: 0; opacity: 1; } 80% { left: calc(100% - 12px); opacity: 1; } 88%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes token-down { 0% { top: 0; opacity: 1; } 80% { top: calc(100% - 12px); opacity: 1; } 88%, 100% { top: calc(100% - 12px); opacity: 0; } }
@keyframes lit { 0% { background: var(--ochre); } 12%, 100% { background: var(--lime); } }

/* ---------- Sectors ---------- */
.rows { border-top: 2px solid var(--ink); }
.row a {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 0.4rem 1.5rem; align-items: center;
  padding: 1.35rem 0.25rem; border-bottom: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
  transition: color 0.35s ease, padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.row a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--night) 0%, #3E1850 65%, #7A2A5A 100%); transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.row__name { grid-column: 1; font-size: var(--text-2); }
.row__text { grid-column: 1; color: var(--ink-soft); transition: color 0.35s ease; max-width: 52ch; }
.row__art { grid-column: 2; grid-row: 1 / span 2; height: 4.5rem; display: flex; align-items: flex-end; justify-content: center; --void: var(--lime); transition: translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.row__art .drawing { width: 100%; height: 100%; }
.row a:is(:hover, :focus-visible) { color: var(--lime); }
.row a:is(:hover, :focus-visible)::before { transform: scaleY(1); }
.row a:is(:hover, :focus-visible) .row__text { color: var(--on-ink-soft); }
.row a:is(:hover, :focus-visible) .row__art { --void: #3E1850; translate: 0 -6px; }
.row a:focus-visible { outline-color: var(--ochre); outline-offset: -3px; }
@media (min-width: 56rem) {
  .row a { grid-template-columns: 5fr 6fr 7rem; padding: 1.5rem 0.25rem; }
  .row__name { font-size: var(--text-3); }
  .row__text { grid-column: 2; grid-row: 1; }
  .row__art { grid-column: 3; grid-row: 1; height: 5.5rem; }
  .row a:is(:hover, :focus-visible) { padding-inline: 1.5rem; }
}

/* ---------- Brands on dark ---------- */
.brands-sec { background: radial-gradient(60% 60% at 85% 40%, rgb(255 140 90 / 0.18), transparent 70%), linear-gradient(180deg, var(--night) 0%, #2E1547 60%, var(--plum) 100%); }
.brands-sec .brand-index > div { border-color: rgb(255 244 232 / 0.18); }
.brands-sec .brand-index dt { color: var(--lime); }
.brands-sec .brand-index dd { color: var(--on-ink-soft); }
.brands-sec .brand-index dd a { color: var(--lime); }
.brands-sec .brands-intro__text > p { color: var(--on-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .duo__side--frp::after { animation: none !important; }
}