/* snyxcom homepage layer: loads after site.css on index.html only.

   The simplified homepage keeps what earned its place (header, hero demo, prototype
   cards, accordion, closing call to action) and drops the layers around them: the
   section eyebrows, the three feature splits, the ownership strip, the second pricing
   plate, the six full-size showcase cards and the dark band. Everything new is prefixed
   h- so none of it can collide with the rules the other pages still use in site.css.

   Like the rest of the site there is no prefers-reduced-motion rule here, on purpose. */

/* ---------- Section frame ---------- */
.h-section { padding: 112px 0; }
.h-section--tint { background: var(--color-purple-tint); }
/* pricing and the questions sit on one white run, so the gap between them is a single
   section's worth rather than two */
.h-section--flush { padding-top: 0; }
.faq.h-section { padding-bottom: 112px; }
@media (max-width: 767px) {
  .h-section { padding: 64px 0; }
  .h-section--flush { padding-top: 0; }
  .faq.h-section { padding-bottom: 64px; }
}

/* One heading and at most one grey line. No eyebrow above it, no side paragraph beside it. */
.h-head { padding-inline: var(--col-pad); margin-bottom: 56px; }
.h-head h2 { max-width: 22ch; text-wrap: balance; }
.h-head p { margin-top: 16px; max-width: 54ch; font-size: 17px; line-height: 1.6; color: var(--color-secondary); }
@media (max-width: 767px) {
  .h-head { margin-bottom: 36px; }
}
/* From 1024 the grey line moves up onto the heading's own row, right aligned and sharing the
   heading's baseline. It holds to one line from 1200, where there is room for both. */
@media (min-width: 1024px) {
  .h-head--split { display: flex; align-items: baseline; justify-content: space-between; gap: 12px var(--split-gap); }
  .h-head--split h2 { max-width: none; }
  .h-head--split p { margin-top: 0; max-width: 46ch; text-align: right; }
}
@media (min-width: 1200px) {
  .h-head--split p { max-width: none; white-space: nowrap; }
}

/* ---------- Hero ---------- */
.hero--v3 { padding-bottom: 88px; }
.hero-v3__actions { align-items: center; gap: 16px 28px; }
/* the quiet second way in: same weight as the card links, so it reads as a choice and
   not as a second button */
.h-link {
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-black);
  transition: color 0.2s, border-color 0.2s;
}
.h-link:hover, .h-link:focus-visible { color: var(--color-primary-hover); border-bottom-color: currentColor; }
.h-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 767px) {
  .hero--v3 { padding-bottom: 48px; }
  .hero-v3__actions { align-items: stretch; }
  .h-link { align-self: flex-start; }
}
/* ---------- Load-in: the hero joins the header ---------- */
/* The header builds itself from 0.1s to about 2.1s (site.css). The hero comes in underneath it as
   a second voice: the demo card and the two headline lines first, then the paragraph, the two
   ways in, the person row and last the logo band, each a short soft rise a beat after the one
   before. Done by about 2.7s. The scroll reveal would have shown these as four blocks at once,
   so it is switched off for them here and CSS owns the timing. The parts wait in their start
   state through their delay and return to their own styles when done. Movement uses translate
   and scale, never transform, so hover and the demo are untouched. */
@keyframes hero-in-soft { from { opacity: 0; translate: 0 24px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes hero-in-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-in-pop { from { opacity: 0; translate: 0 10px; scale: 0.92; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes hero-in-card { from { opacity: 0; translate: 36px 28px; scale: 0.965; } to { opacity: 1; translate: 0 0; scale: 1; } }
.hero-v3__line { display: block; }
.js-reveal .hero-v3__copy[data-reveal] { opacity: 1; translate: none; transition: none; }
.hero-v3__line { animation: hero-in-soft 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards; }
.hero-v3__line + .hero-v3__line { animation-delay: 0.48s; }
.hero-v3__subcopy { animation: hero-in-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s backwards; }
.hero-v3__actions .btn { animation: hero-in-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) 1s backwards; }
.hero-v3__actions .h-link { animation: hero-in-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.14s backwards; }
/* The card, the person row and the logo band only join at the two-column desktop layout, where
   they are on screen at load. Below that the hero stacks and they keep the scroll reveal. */
@media (min-width: 1024px) {
  .js-reveal .hero-v3__demo[data-reveal],
  .js-reveal .hero-v3__person[data-reveal],
  .js-reveal .logo-band.is-chorus [data-reveal] { opacity: 1; translate: none; transition: none; }
  .hero-v3__demo { animation: hero-in-card 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s backwards; }
  .hero-v3__person img { animation: hero-in-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) 1.3s backwards; }
  .hero-v3__person p { animation: hero-in-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.42s backwards; }
  .logo-band.is-chorus .logo-band__copy { animation: hero-in-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.5s backwards; }
  .logo-band.is-chorus .logo-band__grid img { animation: hero-in-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.62s backwards; }
  .logo-band.is-chorus .logo-band__grid img:nth-child(2) { animation-delay: 1.7s; }
  .logo-band.is-chorus .logo-band__grid img:nth-child(3) { animation-delay: 1.78s; }
  .logo-band.is-chorus .logo-band__grid img:nth-child(4) { animation-delay: 1.86s; }
  .logo-band.is-chorus .logo-band__grid img:nth-child(5) { animation-delay: 1.94s; }
  .logo-band.is-chorus .logo-band__grid img:nth-child(6) { animation-delay: 2.02s; }
}
/* The hero's circle of curved text turns a little as the page loads: it starts ten degrees clockwise
   and eases back to where it has always sat, so it moves counter-clockwise about the centre of the
   curved text while the copy and card come in. The image sat on .hero as a background, which cannot
   be rotated, so from 1024 it is drawn on a layer of its own at the same size and position as
   `background-size: cover` gave it (the full width, top left, cropped at the bottom). The centre of
   the text circle is at 77.3% across and 60.6% down the image. At rest nothing has changed, and
   below 1024 the hero keeps its plain background. */
@keyframes hero-bg-turn { from { transform: rotate(10deg); } to { transform: rotate(0deg); } }
@media (min-width: 1024px) {
  .hero--v3 { position: relative; overflow: clip; background-image: none; }
  .hero--v3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1477 / 1353;
    background: url("/assets/img/shape3-min-scaled.png?v=20261105") 0 0 / 100% 100% no-repeat;
    transform-origin: 77.3% 60.6%;
    animation: hero-bg-turn 3.4s cubic-bezier(0.22, 0.6, 0.2, 1) 0.1s backwards;
    pointer-events: none;
  }
  .hero--v3 > .container { position: relative; }
}
/* the caption is one line now, so it sits level with its pin */
.demo-card__note { align-items: center; }
.demo-card__note-text strong { font-weight: 500; }

/* ---------- Work ---------- */
/* The work section is the last thing before the white quote band, so it closes tighter than the
   others: the tiles' shadow room under the open row plus 48px, not a full section of air. */
#work.h-section { padding-bottom: 48px; }
@media (max-width: 767px) {
  #work.h-section { padding-bottom: 40px; }
}
/* no meta row above the title any more, so it starts at the card's own padding */
.pcard--featured .pcard__title { margin-top: 0; }
/* The pair shares one set of rows for its text (title, question, try this, links) as well as
   for the picture, so a title that wraps in one card cannot push that card's lines out of
   step with the other. site.css already shares the head and the picture; this goes one
   level further and shares the lines inside the head. */
@media (min-width: 900px) {
  .featured { grid-template-rows: auto auto auto auto 1fr; }
  .pcard--featured { grid-row: span 5; }
  .pcard--featured .pcard__head { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; }
  .pcard--featured .pcard__media { grid-row: 5; }
}
.featured { margin-top: 0; }
/* pcard--link: the whole card is the prototype link. The link's ::after stretches over the
   card, picture included, so there is one tab stop and one name, and nothing inside the
   card is separately clickable. The ring and the press go on the card, not the link text. */
.pcard--link { cursor: pointer; }
.pcard--link .pcard__proto { -webkit-tap-highlight-color: transparent; }
.pcard--link .pcard__proto::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.pcard--link .pcard__proto:focus-visible { outline: none; }
.pcard--link:has(.pcard__proto:focus-visible) {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
  transform: translateY(-6px);
  box-shadow: 0 30px 70px -14px rgba(17, 16, 19, 0.32);
}
.pcard--link:hover .pcard__proto { color: #fff; border-bottom-color: currentColor; }
/* scale, not transform: transform eases over 0.45s for the lift, a press should land at once */
.pcard--link:active { scale: 0.985; }
.pcard--link:active .pcard__go { opacity: 1; transform: scale(0.9); background: var(--color-primary-hover); }

/* The other six sit behind one row. It is the site's own accordion (site.js opens and closes
   it, so the height eases) with the six project tiles inside, in the same colours as the two
   featured cards above them. Closed, the row previews the colours; open, the tiles rise in one
   after another. Less than the old showcase: no pills, no tag lines, a shorter tile and a
   gentler stagger. */
.h-more { margin: 64px var(--col-pad) 0; border-top: 1px solid rgba(17, 16, 19, 0.14); }
.h-more:not(.is-open) { border-bottom: 1px solid rgba(17, 16, 19, 0.14); }
.h-more__heading { margin: 0; font: inherit; letter-spacing: normal; }
.h-more__summary {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 26px 0;
  text-align: left;
  font-family: var(--font-title);
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-black);
  transition: color 0.2s;
}
.h-more__summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .h-more__summary:hover { color: var(--color-primary); }
}
.h-more__label { margin-right: auto; }
/* red so the counts stand out against the black row labels */
.h-more__count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-black);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0;
  vertical-align: 3px;
  white-space: nowrap;
}
.h-more__count { background: var(--color-primary); }
/* Closed, the row shows the six projects as small thumbnails in their tile colours. They sit
   in an even row with no overlap. Under the pointer they lift one after another in a quick
   wave. They fade out once the row is open and the tiles themselves are there. */
.h-more__thumbs { display: flex; align-items: center; gap: 8px; transition: opacity 0.4s ease; }
.h-thumb {
  display: block;
  width: 62px;
  height: 40px;
  border: 2px solid var(--card);
  border-radius: 9px;
  overflow: hidden;
  background: var(--card);
  transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s;
  transition-delay: calc(var(--i) * 35ms);
}
.h-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.h-more__summary:hover .h-thumb, .h-more__summary:focus-visible .h-thumb {
  translate: 0 -5px;
  box-shadow: 0 10px 18px -8px rgba(17, 16, 19, 0.45);
}
.h-more.is-open .h-more__thumbs { opacity: 0; }
/* While the pointer stays on a closed row the thumbnails dance: after the first lift each one has a
   move of its own (a bob, a tilt, a jiggle, a sway, a hop, a shimmy) on its own clock, with durations
   that share no factor, so they drift out of step and read as random rather than as a wave. The
   moves are transforms, so they ride on top of the lift, which is the translate property. The
   process row has three thumbnails and gets the first three moves. */
@keyframes h-thumb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes h-thumb-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 70% { transform: rotate(6deg); } }
@keyframes h-thumb-jiggle { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3px, -4px) rotate(-3deg); } 45% { transform: translate(3px, -1px) rotate(2deg); } 70% { transform: translate(-2px, -5px) rotate(-1deg); } }
@keyframes h-thumb-sway { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(5px) rotate(4deg); } }
@keyframes h-thumb-hop { 0%, 60%, 100% { transform: translateY(0) scale(1); } 20% { transform: translateY(-10px) scale(1.06); } 40% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1); } }
@keyframes h-thumb-shimmy { 0%, 100% { transform: translateX(0) scale(1); } 25% { transform: translateX(-3px) scale(1.05); } 50% { transform: translateX(3px) scale(0.97); } 75% { transform: translateX(-2px) scale(1.03); } }
@media (hover: hover) and (pointer: fine) {
  .h-more:not(.is-open) .h-more__summary:hover .h-thumb { animation: 1.3s ease-in-out 0.9s infinite; }
  .h-more:not(.is-open) .h-more__summary:hover .h-thumb:nth-child(1) { animation-name: h-thumb-bob; animation-duration: 1.3s; }
  .h-more:not(.is-open) .h-more__summary:hover .h-thumb:nth-child(2) { animation-name: h-thumb-tilt; animation-duration: 1.7s; animation-delay: 1.1s; }
  .h-more:not(.is-open) .h-more__summary:hover .h-thumb:nth-child(3) { animation-name: h-thumb-jiggle; animation-duration: 1.9s; animation-delay: 1s; }
  .h-more:not(.is-open) .h-more__summary:hover .h-thumb:nth-child(4) { animation-name: h-thumb-sway; animation-duration: 2.3s; animation-delay: 1.25s; }
  .h-more:not(.is-open) .h-more__summary:hover .h-thumb:nth-child(5) { animation-name: h-thumb-hop; animation-duration: 2.9s; animation-delay: 0.95s; }
  .h-more:not(.is-open) .h-more__summary:hover .h-thumb:nth-child(6) { animation-name: h-thumb-shimmy; animation-duration: 1.1s; animation-delay: 1.4s; }
}

/* The collapse is hidden as well as folded, so the six links are out of the tab order while
   closed. Every accordion on the page gets this, the questions included. */
.accordion-collapse { visibility: hidden; transition: height 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.35s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0s linear 0.35s; }
.accordion-item.is-open > .accordion-collapse { visibility: visible; transition-delay: 0s; }
.h-more .accordion-collapse { transition: height 0.6s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.4s ease, visibility 0s linear 0.6s; }
.h-more.is-open > .accordion-collapse { transition-delay: 0s; }
/* room for the tiles' shadows, which the folded box would otherwise clip */
@media (min-width: 768px) {
  .h-more .accordion-collapse { margin-inline: -16px; }
  .h-more .accordion-body { padding-inline: 16px; }
}
@media (min-width: 1024px) {
  .h-more .accordion-collapse { margin-inline: -44px; }
  .h-more .accordion-body { padding-inline: 44px; }
}
.h-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
/* site.css zeroes the bottom padding of the last accordion on a page, which here ended the folded
   box exactly at the lower edge of the tiles and cut their shadows off in a hard line. The longer
   selector puts the room back. */
.h-more .accordion-body.h-tiles { padding-top: 28px; padding-bottom: 68px; }
.h-tiles .pcard { height: 400px; }
.h-tiles .pcard__head { padding: 28px 28px 0; }
.h-tiles .pcard__title { margin-top: 0; font-size: clamp(1.25rem, 1.55vw, 1.5rem); line-height: 1.15; }
/* the accordion body sets its paragraphs to the page's dark text, which beat the card's own light
   ink and left this line black on colour */
.h-tiles .pcard__claim { margin-top: 10px; font-size: 14px; max-width: none; color: rgba(251, 250, 244, 0.88); }
.h-tiles .pcard__media { margin: 22px 0 0 28px; }
.h-tiles .pcard__go { right: 18px; bottom: 18px; width: 44px; height: 44px; }
/* The screenshot used to end in a hard crop at the card's edge. It now dissolves into the card's
   colour along the foot, on the featured pair and the six tiles alike. The fade at the head
   is the one site.css already draws; it is repeated here because this rule replaces it. */
.pcard--featured .pcard__media::after,
.h-tile .pcard__media::after {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--card) 55%, transparent) 0%, transparent 45%),
    linear-gradient(to top, var(--card) 0%, color-mix(in srgb, var(--card) 72%, transparent) 16%, transparent 46%);
}
/* the middle column sits lower, as it did on the old showcase but by 40px and not 72 */
@media (min-width: 1024px) {
  .h-tiles > :nth-child(3n+2) { margin-top: 40px; }
}
/* each tile rises in on its own beat once the row is open */
.h-tile {
  opacity: 0;
  translate: 0 36px;
  scale: 0.95;
  transition: opacity 0.5s ease, translate 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
}
.h-more.is-open .h-tile {
  opacity: 1;
  translate: none;
  scale: 1;
  transition-delay: calc(var(--i) * 80ms + 160ms), calc(var(--i) * 80ms + 160ms), calc(var(--i) * 80ms + 160ms), 0s, 0s;
}
/* Each tile is one click into its prototype, the same way as the featured pair above: the
   card is an article, the "Explore the prototype" link stretches over it (pcard--link, above)
   and the head is static so that stretch reaches the card's edges, not the head's. The case
   study is the second, smaller visit: a pill in the tile's foot, above the stretched link,
   named after its project so six of them do not read alike. */
.h-tile .pcard__head { position: static; }
.h-tiles .pcard__links { padding-top: 14px; }
.h-tiles .pcard__links a { font-size: 15px; }
.h-tiles .pcard__media { margin-top: 18px; }
.pcard__case {
  position: absolute;
  left: 28px;
  bottom: 25px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(251, 250, 244, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(251, 250, 244, 0.24);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.pcard__case:hover, .pcard__case:focus-visible { background: #fff; color: var(--color-black); box-shadow: none; }
.pcard__case:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
/* hovering the pill is not hovering the prototype, so the go disc stays down and the link
   text keeps its resting colour */
@media (hover: hover) and (pointer: fine) {
  .h-tile:has(.pcard__case:hover) .pcard__go { opacity: 0; transform: translateY(8px) scale(0.9); }
  .h-tile:has(.pcard__case:hover) .pcard__go::before,
  .h-tile:has(.pcard__case:hover) .pcard__go::after { animation: none; }
  .h-tile:has(.pcard__case:hover) .pcard__proto { color: var(--ink); border-bottom-color: color-mix(in srgb, currentColor 55%, transparent); }
}
@media (max-width: 1023px) {
  .h-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .h-more { margin-inline: 0; }
  .h-more__summary { font-size: 1.3rem; }
  .h-more__thumbs { display: none; }
}
@media (max-width: 599px) {
  .h-more { margin-top: 48px; }
  .h-tiles { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .h-more .accordion-body.h-tiles { padding-bottom: 40px; }
}

/* ---------- How it works: three steps as cards ---------- */
/* The icon sits left of the title at a size that carries the card, drawn in black with one red
   part moving. All three loop on the same 3.4s cycle as the icons in the process accordion. The
   tick and the drop come from site.css; the magnifier reuses the tick's draw for its top line. The
   foot row (sample link and week pill) is hidden for now, so a card is the icon, the title and copy. */
#how-it-works .h-head h2 { max-width: none; }
.h-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-inline: var(--col-pad);
}
.h-step {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 26px;
  border-radius: 20px;
  background: var(--color-plate);
  border: 1px solid rgba(17, 16, 19, 0.06);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
}
.js-reveal .h-step[data-reveal] {
  transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms), transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s;
}
@media (hover: hover) and (pointer: fine) {
  .h-step:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -28px rgba(17, 16, 19, 0.3); }
  .h-step:hover .h-step__badge { transform: scale(1.07) rotate(-3deg); }
}
.h-step__head { display: flex; align-items: center; gap: 18px; }
.h-step__badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: var(--color-black);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-step__icon { width: 72px; height: 72px; overflow: visible; }
.h-step__title { margin: 0; font-size: 1.75rem; letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.h-step .h-step__text { max-width: none; margin-top: 18px; font-size: 16.5px; line-height: 1.6; color: var(--color-text); text-wrap: balance; }
.h-step__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 22px; }
.h-step__foot[hidden] { display: none; }
.h-step__when {
  flex: 0 0 auto;
  padding: 5px 13px;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  white-space: nowrap;
}
@media (max-width: 899px) {
  .h-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 767px) {
  .h-steps { padding-inline: 0; }
  .h-step { padding: 24px 22px 22px; }
  .h-step__badge, .h-step__icon { width: 60px; height: 60px; }
}

/* ---------- Pricing: three equal cards, no plate behind them ---------- */
.h-plans, .h-terms {
  --pricing-title: clamp(1.5rem, 1.5435vw + 0.25rem, 1.5435rem);
  --pricing-title-lh: 1.2;
  --pricing-lede: 14.76px;
  --pricing-lede-lh: 1.6;
  --pricing-body: 15.58px;
  --pricing-body-lh: 1.6;
  --pricing-small: 14.76px;
  --pricing-small-lh: 1.5;
}
.h-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  padding-inline: var(--col-pad);
}
/* site.css puts every package card on row 1 to the last from 768 up, for the old side-by-side pair.
   Under 1024 these stack, so each card goes back to taking its own row. */
.h-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; grid-row: auto; margin: 0; height: 100%; }
/* Spacing is tight above the figure (title, lead-in and price read as one group) and open around
   the rule, so the rule separates the group from the bullets instead of sitting on top of the price. */
.h-plan.pricing-card { padding: 28px 30px 26px; }
.h-plan .pricing-card__title { margin-bottom: 0; font-size: var(--pricing-title); letter-spacing: -0.03em; line-height: var(--pricing-title-lh); }
.h-plan .pricing-card__subtitle { margin-top: 8px; max-width: none; text-wrap: pretty; }
/* the figure once, with a small muted label on its baseline; the label wraps as a unit */
.h-plan .pricing-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 16px; }
.h-plan .pricing-card__price > .usd, .h-plan .pricing-card__price > .gbp { display: contents; }
/* narrow cards: the small label under the figure takes its own line, so a long one in one card cannot
   push its price out of step with the others. From 1280 it sits on the figure's line (below). */
.h-plan .pricing-card__price .pricing-card__price-label:last-child { flex: 0 0 100%; }
.h-plan .pricing-card__list { margin-top: 26px; margin-bottom: 22px; padding-top: 24px; border-top: 1px solid rgba(17, 16, 19, 0.12); align-self: stretch; gap: 8px; }
.h-plan.pricing-card--dark .pricing-card__list { border-top-color: rgba(255, 255, 255, 0.14); }
.h-plan .pricing-card__list li { align-items: flex-start; }
.h-plan.pricing-card--dark .pricing-card__list .icon { color: var(--color-primary); }
/* the credit, the stop clause and the at-cost note: one small line at the foot of each card */
.h-plan__foot {
  align-self: stretch;
  margin-top: auto;
  text-wrap: pretty;
  max-width: none;
  font-size: var(--pricing-small);
  line-height: var(--pricing-small-lh);
  color: var(--color-secondary);
}
.h-plan.pricing-card--dark .h-plan__foot { color: #BEBEBE; }
.h-terms {
  margin-top: 36px;
  padding-inline: var(--col-pad);
  max-width: none;
  font-size: var(--pricing-small);
  line-height: var(--pricing-small-lh);
  color: var(--color-secondary);
}
/* Each card is one link to the booking calendar. A tester tapped the cards expecting them to go
   somewhere, so now they do: the title carries the link and its ::after stretches over the card, which
   gives one tab stop and one accessible name per card. A small arrow after the title says it opens
   something, on phones too. On a fine pointer the card lifts the way the step cards and the featured
   cards do, and the title takes the brand red; the dark card keeps its white title and lifts only.
   The focus ring sits on the whole card. The arrow is outside the subgrid rows, inside the h3, so the
   shared rows are untouched. */
.h-plan { transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s; }
.h-plan__link { color: inherit; text-decoration: none; }
.h-plan__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.h-plan__link:focus-visible { outline: none; }
.h-plan:has(.h-plan__link:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.h-plan__arrow { display: inline-block; margin-left: 0.35em; font-size: 0.72em; color: var(--color-secondary); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s; }
.h-plan.pricing-card--dark .h-plan__arrow { color: #BEBEBE; }
@media (hover: hover) and (pointer: fine) {
  .h-plan:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -28px rgba(17, 16, 19, 0.3); }
  .h-plan.pricing-card--dark:hover { box-shadow: 0 28px 56px -28px rgba(17, 16, 19, 0.6); }
  .h-plan:hover .h-plan__link { color: var(--color-primary); }
  .h-plan.pricing-card--dark:hover .h-plan__link { color: #fff; }
  .h-plan:hover .h-plan__arrow { transform: translate(3px, -3px); color: var(--color-primary); }
}
/* From 1024 the three cards share one set of rows (title, lead-in, price, list, foot), so the prices,
   the rules and the foot lines sit level whatever the length of any one card's copy. */
@media (min-width: 1024px) {
  .h-plans { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .h-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-items: start; }
  .h-plan__foot { align-self: start; margin-top: 0; }
}
/* three narrow columns between 1024 and 1280 need a tighter card, the way the old pair did */
@media (min-width: 1024px) and (max-width: 1279px) {
  .h-plan.pricing-card { padding: 26px 22px 24px; }
  .h-plan .pricing-card__price { font-size: 2.6rem; }
  .h-plan .pricing-card__list li { font-size: 14.2px; }
  .h-plan .pricing-card__subtitle, .h-plan__foot { font-size: 14px; }
}
/* laptop widths: the same card with a little less padding and type so the bullets hold one line */
@media (min-width: 1280px) and (max-width: 1439px) {
  .h-plan.pricing-card { padding: 28px 24px 26px; }
  .h-plan .pricing-card__list li { font-size: 14.6px; }
  .h-plan .pricing-card__subtitle, .h-plan__foot { font-size: 14.2px; }
}
/* from 1280 the term and VAT note sit on the figure's line: "From £5,000  4+ weeks, ex VAT" */
@media (min-width: 1280px) {
  .h-plan .pricing-card__price { flex-wrap: nowrap; gap: 0 10px; }
  .h-plan .pricing-card__price .pricing-card__price-label:last-child { flex: 0 1 auto; margin-left: 6px; white-space: nowrap; }
}
@media (max-width: 1023px) {
  .h-plans { grid-template-columns: minmax(0, 1fr); }
}
/* tablet and small laptop: the cards stack but each one uses its width, the figure and lead-in on the
   left and the bullets beside them, instead of a 640px column with a gap down the right */
@media (min-width: 768px) and (max-width: 1023px) {
  .h-plan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: none; column-gap: 48px; align-content: start; align-items: start; justify-items: start; }
  .h-plan > .pricing-card__title, .h-plan > .pricing-card__subtitle, .h-plan > .pricing-card__price { grid-column: 1; }
  .h-plan > .pricing-card__list { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding-top: 0; border-top: 0; align-self: center; }
  .h-plan > .h-plan__foot { grid-column: 1 / -1; justify-self: stretch; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(17, 16, 19, 0.12); }
  .h-plan.pricing-card--dark > .h-plan__foot { border-top-color: rgba(255, 255, 255, 0.14); }
}
@media (max-width: 767px) {
  .h-plans { max-width: 640px; margin-inline: auto; padding-inline: 0; }
  .h-terms { padding-inline: 0; }
  .h-plan.pricing-card { padding: 28px 24px; }
  .h-plan .pricing-card__price { font-size: 2.9rem; }
}

/* ---------- Questions: the heading beside the list, the animated question mark under it (site.css .faq__mark) ---------- */
.faq .h-head, .faq__head h2 { max-width: none; }

/* ---------- Meet Myles ---------- */
.h-about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px calc(var(--split-gap) * 2);
  align-items: center;
  padding-inline: var(--col-pad);
}
.h-about .walkthrough__media { height: auto; aspect-ratio: 16 / 9; box-shadow: 0 24px 64px -24px rgba(17, 16, 19, 0.35); }
.h-about__cap { margin-top: 14px; font-size: 14px; color: var(--color-secondary); }
.h-about__cap span { margin-left: 6px; font-family: var(--font-mono); font-size: 13px; }
.h-about__text > p { margin-top: 20px; font-size: 17.22px; line-height: 1.6; color: var(--color-text); }
.h-about__text h2 + p { margin-top: 24px; }
@media (max-width: 899px) {
  .h-about { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .h-about { padding-inline: 0; }
}

/* The testimonial keeps its sweep and its quote mark but drops to a size that sits
   beside a paragraph instead of shouting over it. The mark was white on the old dark
   band, so on the tint it takes the brand red at the same faint strength. */
.h-quote-band { padding: 104px 0 0; }
.h-quote-band + .h-section { padding-top: 96px; }
.h-quote { flex: none; margin: 0 var(--col-pad); padding: 0; }
.h-quote blockquote { max-width: 40ch; font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin-bottom: 28px; }
.h-quote .testimonial__mark { color: rgba(236, 22, 22, 0.07); font-size: clamp(9rem, 15vw, 15rem); }
@media (max-width: 767px) {
  .h-quote-band { padding-top: 64px; }
  .h-quote-band + .h-section { padding-top: 64px; }
  .h-quote { margin: 0; }
}

/* ---------- After the cards: the one action ---------- */
.h-plans-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 40px var(--col-pad) 0; }
.h-plans-cta p { font-size: 14.76px; color: var(--color-secondary); }
@media (max-width: 767px) {
  .h-plans-cta { margin-inline: 0; }
}

/* ---------- Meet Myles: the band takes a walk as it scrolls in ---------- */
/* The three row blocks and the testimonial are on the scroll reveal, but none of them fades as a
   block any more. Their parts come in one after another, short and soft, done inside 1.6s: the
   picture slides in from the left and the play disc pops onto it, the heading rises out of a slight
   blur and the leaf drops onto its full stop, the line and the button follow, the slate claps once
   on arrival, the record line rises last. Under it the big quote mark drifts in with a slight turn,
   the quote rises, the underline sweeps and the name fades in. Movement uses translate, scale and
   opacity, so the hover transforms and the slate's own loop are untouched. Without script nothing
   here applies and the band simply shows. */
@keyframes meet-in-media { from { opacity: 0; translate: -28px 0; scale: 0.96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes meet-in-soft { from { opacity: 0; translate: 0 18px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes meet-in-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes meet-in-pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes meet-in-drop { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
@keyframes meet-in-mark { from { opacity: 0; translate: -16px 12px; rotate: -8deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.js-reveal .meet__row > [data-reveal], .js-reveal .meet .testimonial[data-reveal] { opacity: 1; translate: none; transition: none; }
.js-reveal .meet__media[data-reveal]:not(.is-visible) .walkthrough__media,
.js-reveal .meet__text[data-reveal]:not(.is-visible) > *,
.js-reveal .meet__record[data-reveal]:not(.is-visible),
.js-reveal .meet .testimonial[data-reveal]:not(.is-visible) > * { opacity: 0; }
.meet__media.is-visible .walkthrough__media { animation: meet-in-media 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.meet__media.is-visible .walkthrough__play { animation: meet-in-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.55s both; }
.meet__text.is-visible h2 { animation: meet-in-soft 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.meet__text.is-visible .meet__leaf { animation: meet-leaf-sway 4.8s cubic-bezier(0.645, 0.045, 0.355, 1) infinite, meet-in-drop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.75s both; }
.meet__text.is-visible > p { animation: meet-in-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.meet__text.is-visible > .btn { animation: meet-in-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.65s both; }
/* :where keeps this under the hover clap's specificity, so the hover rule wins the cascade. The
   arrival clap has its own keyframes name on purpose: browsers match a running animation by name, so
   with the hover clap's name here the finished arrival clap was simply carried over on hover and
   nothing replayed. Same frames as slate-clap in site.css, under a name the hover never uses. */
@keyframes slate-clap-in { 0% { transform: rotate(0deg); } 30% { transform: rotate(-27deg); } 56% { transform: rotate(-27deg); } 72% { transform: rotate(5deg); } 86% { transform: rotate(-2deg); } 100% { transform: rotate(0deg); } }
:where(.meet__text.is-visible) .slate-arm { animation: slate-clap-in 0.85s cubic-bezier(0.32, 0.06, 0.2, 1) 1.1s 1 both, slate-chop 3.4s cubic-bezier(0.32, 0.06, 0.2, 1) 1.95s infinite; }
.meet__record.is-visible { animation: meet-in-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both; }
.meet .testimonial.is-visible .testimonial__mark { animation: meet-in-mark 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.meet .testimonial.is-visible blockquote { animation: meet-in-rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
.meet .testimonial.is-visible .testimonial__attribution { animation: meet-in-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
.meet .testimonial .highlight { transition-delay: 0.95s; }

/* ---------- Meet Myles: the record line ---------- */
/* "Recent work at ... Full record on mylesholman.com" used to sit in the half-width text column, where it
   broke mid-link onto a second line. It now spans the whole band under the picture and the text, so it
   holds to one line wherever there is room, and the link never breaks where there is not. */
.meet__record { grid-column: 1 / -1; max-width: none; margin: 28px 0 0; padding-inline: var(--col-pad); font-size: 17.22px; line-height: 1.6; color: var(--color-white-bf); }
.meet__record a.link { white-space: nowrap; }
.meet__record a.link:hover { color: #fff; }

/* ---------- Closing ---------- */
.closing-cta__text h2 { text-wrap: balance; }
/* the grey the page used for this line is 4.29:1 on white, just under AA */
.closing-cta__text p { color: var(--color-secondary); }
/* the line holds to one row beside the heading where there is room; the avatar is gone, the hero already shows Myles */
@media (min-width: 1024px) {
  .closing-cta__text p { max-width: none; }
}
/* The two grey lines are one size, and from 1024 they share a row: heading and button on the
   first, "Bring the rough idea" and the async line on the second, so they start level. */
/* Even space above and below (it was 88 over 64, so the dark band above felt further away than the
   survey bar below). The right column is held to 340px so the async line wraps to two lines and
   ends level with the two-line lead-in beside it, instead of one long line that left the right
   side short and pushed the left into a narrow column with a wide gap between. */
.closing-cta { padding-block: 72px; }
.closing-cta__text p,
.closing-cta__small { font-size: 17.22px; line-height: 1.6; color: var(--color-secondary); }
@media (min-width: 1024px) {
  .closing-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    column-gap: var(--split-gap);
    row-gap: 14px;
    align-items: center;
  }
  .closing-cta__text, .closing-cta__action { display: contents; }
  .closing-cta__text h2 { grid-column: 1; grid-row: 1; margin: 0; }
  .closing-cta__text p { grid-column: 1; grid-row: 2; margin: 0; align-self: start; max-width: 52ch; }
  .closing-cta__action > .btn { grid-column: 2; grid-row: 1; justify-self: start; }
  .closing-cta__meta { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .closing-cta__small { margin: 0; }
}
@media (max-width: 767px) {
  .closing-cta { padding-block: 48px; }
}

/* ---------- Survey ask: a full-width soft alert bar above the footer ---------- */
.h-ask {
  background: color-mix(in srgb, var(--color-primary) 7%, #fff);
  border-block: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.h-ask__inner { display: flex; align-items: center; gap: 16px; padding-block: 18px; }
.h-ask__inner p { margin: 0; max-width: none; font-size: 16px; line-height: 1.5; color: var(--color-text); }
.h-ask__inner a {
  color: var(--color-black);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.h-ask__inner a:hover, .h-ask__inner a:focus-visible { color: var(--color-primary-hover); }
/* a red chat badge with a slow pulse, the same idiom as the play button */
.h-ask__icon {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}
.h-ask__icon svg { width: 20px; height: 20px; }
.h-ask__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-primary);
  z-index: -1;
}
/* The bar arrives with a bit of play when it scrolls in: the badge drops in from above, overshoots and
   wags like a notification, the line slides in beside it a beat later and the link gives a small pop
   once the badge has settled. The pulse only starts after the landing. The bar is on the scroll reveal
   (site.js adds .is-visible) but the bar itself never fades; only its parts move. Without script the
   bar simply shows and the pulse runs as before. */
.js-reveal .h-ask[data-reveal] { opacity: 1; translate: none; transition: none; }
.js-reveal .h-ask[data-reveal]:not(.is-visible) .h-ask__icon,
.js-reveal .h-ask[data-reveal]:not(.is-visible) .h-ask__inner p { opacity: 0; }
html:not(.js-reveal) .h-ask__icon::after,
.h-ask.is-visible .h-ask__icon::after { animation: h-ask-pulse 2.8s ease-out 1.4s infinite; }
.h-ask.is-visible .h-ask__icon {
  animation: h-ask-drop 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.3) both, h-ask-wag 0.7s ease-in-out 0.8s both;
}
.h-ask.is-visible .h-ask__inner p { animation: h-ask-slide 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.h-ask.is-visible .h-ask__inner a { display: inline-block; animation: h-ask-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) 1.1s both; }
@keyframes h-ask-drop {
  0% { opacity: 0; translate: 0 -34px; scale: 0.5; }
  60% { opacity: 1; translate: 0 5px; scale: 1.1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes h-ask-wag { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 11deg; } 60% { rotate: -7deg; } 80% { rotate: 3deg; } }
@keyframes h-ask-slide { from { opacity: 0; translate: -16px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes h-ask-pop { 0% { scale: 1; } 50% { scale: 1.08; } 100% { scale: 1; } }
.h-ask__icon { isolation: isolate; }
@keyframes h-ask-pulse {
  0%   { transform: scale(1); opacity: 0.35; }
  70%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 767px) {
  .h-ask__inner { align-items: flex-start; padding-block: 16px; }
  .h-ask__inner p { font-size: 15px; }
}

/* ---------- More on the process ---------- */
/* The detail the old How it works section carried, behind the same kind of row as the work
   tiles. Each block is a title and a subtitle with its animated icon at the head of the
   subtitle, beside the picture. The icons keep their loops from site.css (.sd-flag, .sd-tick,
   .sd-trend, .sd-arrow and .hv-drop), which run whenever they are on screen. */
.h-more--process { margin-top: 64px; }
.h-more .accordion-body.h-proc { padding-top: 36px; padding-bottom: 8px; }
.h-proc__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px var(--split-gap);
  align-items: center;
  margin-bottom: 56px;
}
/* the icon sits left of the title at the same size as the step cards above, black with one red
   part moving. The paragraph runs under both */
.h-proc__head { display: flex; align-items: center; gap: 18px; }
.h-proc__badge { flex: 0 0 auto; display: grid; place-items: center; width: 72px; height: 72px; color: var(--color-black); }
.h-proc__icon { width: 72px; height: 72px; overflow: visible; }
.h-proc__title { font-size: clamp(1.75rem, 2.4vw, 2.25rem); letter-spacing: -0.035em; line-height: 1.1; text-wrap: balance; }
.h-proc .h-proc__body { max-width: 50ch; margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--color-text); text-wrap: balance; }
.h-proc .h-proc__links { display: flex; flex-wrap: wrap; gap: 10px 28px; max-width: none; margin-top: 18px; }
.h-proc__media img { width: 100%; height: auto; border-radius: 16px; }
@media (min-width: 900px) {
  .h-proc__item:nth-child(even) .h-proc__media { order: -1; }
}
@media (max-width: 899px) {
  .h-proc__item { grid-template-columns: minmax(0, 1fr); margin-bottom: 44px; }
  .h-proc__item .h-proc__media { order: 2; }
}
@media (max-width: 767px) {
  .h-more .accordion-body.h-proc { padding-top: 28px; padding-bottom: 0; }
  .h-proc__badge, .h-proc__icon { width: 60px; height: 60px; }
}
/* the handover bar keeps its own look from site.css. It sits flush with the row above it.
   Its two lines take back their own sizes from the accordion body's paragraph rule */
.h-proc .handover { margin-inline: 0; }
.h-proc .handover__title { max-width: none; font-size: 21px; font-weight: 500; line-height: 1.3; color: var(--color-black); }
.h-proc .handover__sub { max-width: 68ch; font-size: 15.5px; line-height: 1.6; color: var(--color-secondary); }
/* site.css turns the bar into one slim row from 1440, which gives the copy about 250px beside five
   tags. Inside the accordion the copy gets the first row and the tags sit under it, at every width. */
@media (min-width: 768px) {
  .h-proc .handover { flex-wrap: wrap; align-items: center; column-gap: 24px; padding: 28px 32px; }
  .h-proc .handover__body { flex: 1 1 320px; min-width: 0; }
  .h-proc .handover__list { flex: 1 1 100%; margin-top: 0; padding-left: 96px; border-left: 0; flex-wrap: wrap; gap: 10px 14px; }
  /* the same large black and red icon as the blocks above, no white disc behind it */
  .h-proc .handover__badge { width: 72px; height: 72px; background: none; border: 0; }
  .h-proc .handover__icon { width: 72px; height: 72px; stroke-width: 1.5; color: var(--color-black); }
}
/* the closed row's thumbnails for this one are the three drawings, framed in plain grey */
.h-thumb--plain { --card: #D8D8DE; background: #fff; }
.h-thumb--plain img { object-fit: cover; object-position: center; }
/* the blocks and the handover bar rise in one after another when the row opens */
.h-rise {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.5s ease, translate 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-more.is-open .h-rise {
  opacity: 1;
  translate: none;
  transition-delay: calc(var(--i) * 110ms + 160ms);
}