/* ==========================================================================
   FRONT PAGE ADDENDUM
   Hand-written fixes layered on top of the generated front.css.

   front.css is extracted verbatim from the approved static design and must not
   be edited. Anything the static template needs that the static stylesheet did
   not define lives here instead.

   Enqueued after front.css (see inc/assets.php), front page only.
   ========================================================================== */

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { margin-top: 0; }

/* The hero plate: an empty slot shown as a 16:9 blueprint frame with copper
   corner ticks, matching the design's .slot-frame treatment. */
.slot-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background-color: #E7EAEE;
  background-image:
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    repeating-linear-gradient(to right,  rgba(10,13,20,.055) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(10,13,20,.055) 0 1px, transparent 1px 24px);
  background-size: 28px 2px, 2px 28px, 28px 2px, 2px 28px, auto, auto;
  background-position: left top, left bottom, right top, right bottom, 0 0, 0 0;
  background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}

/* The slot loader injects <picture><source><img></picture> into the empty
   figures. <picture> is display:inline by default, so the design's
   `figure.slot img { height:100% }` has nothing to resolve against and the
   image stops short, leaving a strip of the slot's grey background showing
   under every card image.

   Positioned absolutely rather than sized in percentages: figure.slot is
   already position:relative, so inset:0 fills it exactly regardless of how
   the slot's height was derived (aspect-ratio, --ar, or content). */
figure.slot picture {
  position: absolute;
  inset: 0;
  display: block;
}
figure.slot picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}

/* Scope guard: keep this stylesheet's reach explicit. */
.pcr-frontpage .site-main { display: block; }

/* ==========================================================================
   PROJECT CARDS — clickable, meta overlaid on the artwork
   ==========================================================================
   The design stacks `.work-meta` BELOW `.work-img`. The brief is the case-study
   treatment: the caption floats over the bottom of the image with a scrim, so the
   card stays one 16:9 block instead of growing to twice the height.

   The whole card is now one link (`.work-card__link` in pcr_project_card), so the
   click target is the full card and the hover artwork swap still triggers —
   `:hover` on `.work-card` still matches while the pointer is over the link.

   The scrim lives on `.work-meta` rather than a `figure.slot::after`, because
   that pseudo-element is already the design's blueprint texture. */
/* --------------------------------------------------------------------------
   The brand cut on project cards.

   The design's own tokens are inconsistent: `--chamfer` and `--chamfer-sm` are
   FIVE-point polygons that only cut the bottom-right, while `--chamfer-m` is the
   six-point version that cuts top-left AND bottom-right. Cards need both, so
   the small card gets its own token here rather than editing tokens.css — that
   file is regenerated from the design and a hand edit would be wiped.

   Declared as a token, not a literal, per the design-system rule. */
:root {
  --chamfer-card-sm: polygon(
    14px 0, 100% 0,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    0 100%, 0 14px
  );
}

.work-card,
.pf-card {
  overflow: hidden;
  /* Selected Work cards are ~430px tall so they take the full --chamfer-m;
     the compact archive cards use the smaller cut so it does not eat the
     artwork. */
  clip-path: var(--chamfer-m);
}

.pf-card {
  clip-path: var(--chamfer-card-sm);
}

/* clip-path removes the box-shadow from the hover lift, so the card itself
   moves instead. */
.pf-card:hover,
.work-card:hover {
  transform: translateY(-3px);
}

.work-card__link {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Focus ring on the card link, for keyboard users. */
.work-card__link:focus-visible {
  outline: 2px solid var(--copper-hot);
  outline-offset: -2px;
}

/* Both card types share the overlay positioning. Only padding and scrim
   strength differ below. This was previously applied to `.work-card` alone, so
   the archive grid kept its meta stacked under the image while carrying the
   gradient — a solid dark panel floating below the artwork. */
.work-card .work-meta,
.pf-card .work-meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  border-top: 0;
}

.work-card .work-meta {
  padding: clamp(56px, 7vw, 88px) clamp(20px, 3vw, 32px) clamp(18px, 2.4vw, 28px);
  /* Solid where the text sits, fading out only above it. A gradient that
     reaches transparency too low leaves the title sitting on bare artwork. */
  background: linear-gradient(
    to top,
    rgba(3, 5, 4, .97) 0%,
    rgba(3, 5, 4, .95) 46%,
    rgba(3, 5, 4, .78) 70%,
    rgba(3, 5, 4, 0) 100%
  );
}

/* The compact archive grid needs a tighter scrim or it swallows the card. */
.pf-card .work-meta {
  padding: clamp(40px, 6vw, 64px) 22px 20px;
  background: linear-gradient(
    to top,
    rgba(3, 5, 4, .97) 0%,
    rgba(3, 5, 4, .92) 52%,
    rgba(3, 5, 4, 0) 100%
  );
}

/* --------------------------------------------------------- capabilities --
   The design gives .tech-plate a 1px glass border AND a clip-path chamfer.
   Clipping cuts the border along the diagonal, so it no longer reads as a card
   edge — it reads as a stray white line down the artwork. The chamfer already
   defines the shape; the border only adds noise. */
.tech-plate {
  border: 0;
}

/* ------------------------------------------------- fabrication artwork --
   Same brand cut as the project cards, so the whole page shares one language.
   .mfg-img is a square-ish plate, so it takes the smaller cut. */
.mfg-img {
  clip-path: var(--chamfer-m);
  border: 0;
}

/* ------------------------------------------------------ section rhythm ----
   `.cta` (the closing contact band) hardcodes its padding as a literal —
   `clamp(80px, 12vw, 160px)` — rather than using a token, so reducing
   --section-pad left it sitting at 160px while every other block dropped to 80.
   Block values only; the horizontal stays 0 as designed. */
.cta {
  padding-block: clamp(48px, 6vw, 80px);
}

/* ==========================================================================
   PROJECT ARCHIVE SECTION — layout, header split, pager
   ==========================================================================
   Owner changes 2026-10-18:
     - the lede moves out from under the heading into its own right-hand column
     - the grid becomes 2 columns, 4 cards per page (pcr_projects_per_page())
     - the pager is restyled to the brand language

   front.css still declares a 3-column `.pf-grid`; that file is generated from
   the design so the override lives here. */

/* --- heading and lede on one row -------------------------------------------
   The design stacks `<h2>` then `<p class="pf-lede">` inside a single
   max-width:62ch block. Splitting it into named grid areas lets the copy sit
   beside the title instead of under it. */
.pf-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "eyebrow eyebrow"
    "title   lede";
  column-gap: clamp(32px, 5vw, 76px);
  align-items: start;
  max-width: none;
}
.pf-head .eyebrow { grid-area: eyebrow; }
.pf-head h2       { grid-area: title; margin-top: 10px; }
.pf-lede          { grid-area: lede; margin: 0; align-self: end; }

@media (max-width: 900px) {
  /* Back to a single column — there is no room for a side-by-side split. */
  .pf-head {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "lede";
    row-gap: 4px;
  }
  .pf-lede { margin-top: 14px; align-self: start; }
}

/* --- two-column grid -------------------------------------------------------- */
.pf-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 620px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- tighter vertical rhythm -----------------------------------------------
   The archive section inherited `padding: var(--section-pad)` on both sides,
   which left a very large void between the last card row, the pager and the
   next section. Trimmed to suit how short this block now is. */
.pf {
  padding-bottom: clamp(40px, 5vw, 72px);
}

/* --- pager ------------------------------------------------------------------
   Numbered pages only — the prev/next arrows and the "1-9 of 30" range were
   removed on owner request. Chamfered boxes in the display face, copper fill on
   the current page. */
.pf-pager {
  gap: 8px;
  margin-top: clamp(28px, 3vw, 44px);
}

.pf-pager .pager__num {
  min-width: 46px;
  height: 46px;
  padding: 0 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-light);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  clip-path: var(--chamfer-sm);
  transition: color .22s var(--ease), border-color .22s var(--ease),
              background-color .22s var(--ease);
}

.pf-pager .pager__num:hover {
  border-color: var(--copper);
  color: var(--ink);
}

.pf-pager .pager__num[aria-current="page"] {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff;
}

/* Ellipsis between page groups. */
.pf-pager .pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 46px;
  color: var(--ink-mute);
}

@media (max-width: 620px) {
  .pf-pager { gap: 5px; margin-top: 24px; }
  .pf-pager .pager__num { min-width: 40px; height: 40px; font-size: .9375rem; }
  .pf-pager .pager__gap { min-width: 16px; height: 40px; }
}

/* --------------------------------------------------------------------------
   REVIEW FLAG

   The design's caption was `<strong>name</strong><span>Country · 5 stars</span>`.
   The country span now leads with a 20x14 flag served from flagcdn.com. It is
   decorative — the country name sits right beside it — so it carries an empty
   alt and is not announced twice.
   -------------------------------------------------------------------------- */
.review .r-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review .r-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.review .r-flag {
  width: 20px;
  height: 14px;
  /* Flags are 3:2; the box is 20x14 which is very slightly tall. Cropping to
     the real ratio keeps the flag from looking stretched. */
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(10, 13, 20, .10);
  flex-shrink: 0;
}

/* A seller reply sits under the quote on the testimonials page. */
.review .r-response {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--copper);
  background: var(--base);
  color: var(--ink-light);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.review .r-response strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 4px;
}

/* The rating now sits beside the star row instead of in the caption. */
.review .stars {
  display: flex;
  align-items: center;
  gap: 9px;
}
.review .stars__icons {
  display: inline-flex;
  gap: 3px;
}
.review .stars__value {
  color: var(--ink-light);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   CLIPPED TOP EDGE
   `.rail-wrap` is a horizontal scroller, and per CSS an `overflow-x: auto`
   forces the block axis to clip too. The cards' box-shadow and top border were
   being shaved off by the scroller — the bottom survived only because
   `.rail` happens to carry `padding-bottom`.
   The fix is padding on the scroller plus an equal negative margin, so the
   shadow has room to paint without changing the layout gap.
   -------------------------------------------------------------------------- */
.rail-wrap {
  padding-top: 24px;
  margin-top: -24px;
}

/* --------------------------------------------------------------------------
   Navigation moved below the cards, centred.
   The markup change is made in the generator — see gen_front_write.py — so
   `.test-nav` is a sibling of `.rail-wrap` rather than trapped inside
   `.test-actions`.
   -------------------------------------------------------------------------- */
.test-nav {
  justify-content: center;
  margin-top: clamp(28px, 3vw, 44px);
}

@media (max-width: 900px) {
  .rail-wrap { padding-top: 16px; margin-top: -16px; }
  .test-nav  { margin-top: 24px; }
}

/* ==========================================================================
   HERO REFINEMENTS

   Two separate problems, both coming from rules the design wrote but never
   tested at the width it renders at.

   1. .hero-badge carries `margin: 22px -20px 0 0` and `rotate(3deg)`. The
      negative right margin pushes it past the plate's chamfered corner, so it
      reads as a clipping bug rather than a deliberate sticker. Desktop fix:
      cancel both, and anchor it INSIDE the plate's bottom-right corner.

   2. The design's mobile rule for the badge is `bottom: -20px; right: 16px` —
      offsets for an absolutely positioned element, but the badge is
      `position: relative`. They do nothing, so the badge inherits the desktop
      `-20px` right margin inside a flex column and hangs off the phone's edge.

   Breakpoint is 900px, matching the design's own hero media query. Using a
   different value here left an 860-900px band with the old broken layout.
   ========================================================================== */

.hero-badge {
  /* Cancel the design's outward nudge and tilt — those were the only two things
     actually wrong with it. Everything else is the design's own styling, left
     intact: --ink ground, no border, no chamfer, 12px/18px padding, a 15px/700
     display "4.5★" and an 11px/700 uppercase RATING in --support. An earlier
     pass added a copper border, a copper label and a chamfer clip here; that was
     invented, not designed, and it is what made the badge look wrong. */
  margin: 0 clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 20px) 0;
  transform: none;

  /* Anchor it inside the plate's bottom-right corner so it reads as a
     deliberate sticker instead of straddling the chamfered edge. */
  justify-self: end;
  align-self: end;
}

.hero-badge strong {
  font-size: 15px;
  font-weight: 700;
}

.hero-badge .mono-label {
  color: var(--support);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   Mobile / tablet. .hero-grid becomes a flex column here.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* The plate is a decorative blueprint frame with NO artwork (it renders with
     .is-empty). At 1/1 on a phone it was a screenful of empty grey pushing the
     lede and both CTAs below the fold. Drop it — it carries no content. */
  .hero-visual { display: none; }

  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + 32px);
    padding-bottom: clamp(44px, 9vw, 72px);
    overflow-x: clip;
  }

  /* Flex column: explicit order, no reliance on source order. */
  .hero-title { order: 1; }
  .hero-badge { order: 2; }
  .hero-sub   { order: 3; }

  /* Badge becomes a centred horizontal trust chip. Cancel every desktop
     placement value, since none of them mean anything in a flex column. The
     design's own visual treatment (ground, padding, type) is untouched. */
  .hero-badge {
    align-self: center;
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    margin: 24px auto 0;
  }

  .hero-sub { margin-top: 22px; }
  .hero-sub p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 22px;
    max-width: 46ch;
  }

  /* Full-width stacked CTAs — the primary action should be reachable with one
     thumb and never clipped at 320px. */
  .hero-cta {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    gap: 10px;
  }
  .hero-cta .btn { width: 100%; min-height: 52px; }
}

/* Very narrow phones: the lede at 1rem still forces awkward wraps in the
   display face. Ease the headline and stop the CTA row breaking awkwardly. */
@media (max-width: 380px) {
  .hero-badge { margin-top: 20px; }
  .hero-sub p { font-size: .9375rem; }
}

/* ==========================================================================
   GRID CARD TITLE + "LOAD MORE"
   front.css sets `.pf-card .work-meta h3` to 1.0625rem, which reads small next
   to the 16:9 artwork above it. front.css is generated, so the bump lives here.
   ========================================================================== */
.pf-card .work-meta h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.pf-more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-2xl);
}
.pf-more__btn {
  min-width: 190px;
  justify-content: center;
}
.pf-more__btn.is-busy { opacity: .6; pointer-events: none; }

/* ==========================================================================
MOBILE - CARD HEIGHT + CTA BUTTON GAP
   The project cards float their meta over the artwork. On a phone the 16:9
   frame is too short, so the title lands on the board itself. Give the frame
   more height and the scrim more room, and stop the closing band's two
   buttons from sitting flush against each other.
   ========================================================================== */
@media (max-width: 900px) {

  .work-card .work-img,
  .pf-card .work-img {
    aspect-ratio: 4 / 3;
  }

  .work-card .work-meta {
    padding-top: clamp(84px, 26vw, 120px);
  }

  .pf-card .work-meta {
    padding-top: clamp(70px, 22vw, 100px);
  }
}

@media (max-width: 620px) {

  .work-card .work-img,
  .pf-card .work-img {
    aspect-ratio: 1 / 1;
  }

}

/* The closing band stacks its two buttons. As inline-flex siblings they
   share a line box, and the taller box of the next line overlaps the one
   above it - the two buttons sat on top of each other on a phone. Making
   them block-level with an explicit gap fixes it. */
@media (max-width: 900px) {
  .cta .container > a.btn {
    display: flex;
    width: min(100%, 300px);
    margin-inline: auto;
  }
  .cta .container > a.btn + a.btn {
    margin-top: 12px;
  }
}

/* ==========================================================================
   HERO HEADLINE - TITLE CASE
   The design set the headline in full caps with tight display tracking
   (-.028em), which is correct for caps and too tight once the words are
   mixed case. The tracking is eased so the capital letters do not collide.
   ========================================================================== */
.hero-title {
  letter-spacing: -0.015em;
}

/* ==========================================================================
   MOBILE HERO - RATING CHIP
   The 4.5 star badge is a sticker on the artwork plate on desktop. The plate
   is hidden on a phone, so the badge was left floating between the headline
   and the paragraph, which read as a stray block rather than a trust mark.

   It now sits under the CTAs, centred and sized as a compact chip, so the
   order on a phone is: headline, promise, actions, then proof.

   `.hero-sub` and `.hero-badge` are flex children of `.hero-grid`, and the
   hero becomes a flex column at 900px, so this is an order swap - the badge
   moves after `.hero-sub` (order 3) and `.hero-sub` moves up to order 2.
   ========================================================================== */
@media (max-width: 900px) {

  .hero-sub { order: 2; }
  .hero-badge { order: 3; }

  .hero-badge {
    width: fit-content;
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    padding: 10px 16px;
    margin: 22px auto 0;
  }
}

/* ==========================================================================
   HERO - COPY LEFT, A DECK OF PROJECT CARDS RIGHT

   The design stacked a centred headline ON TOP of an empty 16:9 plate, so the
   hero read as placeholder grey art behind the type. It is now two columns:
   the copy on the left, and on the right a portrait deck of featured boards.

   The markup change is one block in front-page.php: the copy is wrapped in
   .hero-copy so the rating chip, headline and lede stack in source order, and
   the plate renders pcr_hero_showcase(). Everything below is a placement or
   type override, so the design's own ground and components are reused.
   ========================================================================== */

/* --- Edge rails -----------------------------------------------------------
   The design baked the circuit artwork into the left and right edges of one
   wide hero-bg.webp and painted it `cover`. That only lines up at a single
   aspect ratio: on a short laptop the frame floated inside the page, and on a
   phone it collapsed into two chopped strips halfway down the hero.

   The artwork now ships as two separate rails, each pinned to its own edge and
   scaled by HEIGHT only, while .hero reserves the same width as inline
   padding (plus 16px of air). The frame therefore always runs the full height
   of the hero, never crops, never floats - and the copy can never sit on top
   of it. */
.hero {
  background-image: none;
  background-color: var(--base);
  --hero-rail: clamp(64px, 10.54vh, 150px);
  padding-inline: calc(var(--hero-rail) + 16px);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--hero-rail);
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: .5;
  pointer-events: none;
}

.hero::before {
  left: 0;
  background-image: url('../img/hero-rail-left.webp');
}

.hero::after {
  right: 0;
  background-image: url('../img/hero-rail-right.webp');
}

/* Under this width the two rails would take more than a quarter of every line
   and squeeze the copy into a narrow column, so the hero drops them. */
@media (max-width: 720px) {
  .hero {
    padding-inline: 0;
  }

  .hero::before,
  .hero::after {
    display: none;
  }
}

.hero > .container {
  position: relative;
  z-index: 1;
}

/* --- The copy column ------------------------------------------------------ */
.hero-copy {
  grid-column: 1 / 7;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  text-align: left;
}

/* Rating leads the column: social proof before the claim. */
.hero-badge {
  order: 0;
  align-self: flex-start;
  flex-direction: row;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  padding: 8px 14px;
  transform: none;
}

/* Two lines instead of three - "Design Services" stays together - and sized
   so it does not need a third line at tablet widths either. */
.hero-title {
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
}

.hero-title > span {
  display: block;
}

/* front.css sets `.hero-title span { display: block }`, which would drop the
   accent word onto its own line inside the second span. */
.hero-title .accent {
  display: inline;
  color: var(--copper);
}

.hero-sub {
  margin-top: clamp(18px, 2vw, 28px);
  text-align: left;
}

.hero-sub p {
  margin: 0 0 24px;
  max-width: 46ch;
}

.hero-cta {
  justify-content: flex-start;
}

/* --- Service index --------------------------------------------------------
   The hero used to end on the two buttons, which left the copy column ~130px
   shorter than the plate and gave the four service pages no entry point above
   the fold. Four text links restore the column height and carry the internal
   links the homepage owes those pages. */
.hero-index {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: clamp(26px, 2.8vw, 36px);
  padding-top: clamp(16px, 1.8vw, 20px);
  border-top: 1px solid var(--line);
}

.hero-index .mono-label {
  margin-right: 16px;
  color: var(--ink-mute);
}

.hero-index a {
  position: relative;
  margin-left: 15px;
  padding-left: 15px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-light);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-io);
}

.hero-index a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--copper);
}

.hero-index a:hover,
.hero-index a:focus-visible {
  color: var(--copper);
}

a.hero-badge {
  text-decoration: none;
}

a.hero-badge:hover {
  background: var(--graphite);
}

/* --- The deck ------------------------------------------------------------- */
.hero-visual.hero-showcase {
  grid-column: 8 / 13;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  position: relative;
  /* Landscape deck: the column width sets the size and 3:2 keeps the board
     artwork reading as a project card rather than a portrait tile. */
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  background: transparent;
  clip-path: none;
  overflow: visible;
}

/* The stack is made of the real slides: depth 1 and 2 are the next two boards
   in the deck, fanned out bottom-right. The painted white plates that used to
   sit here showed nothing; the deck now previews the work that is coming and
   rotates the front card to the back on every tick. */
.hero-slides {
  position: absolute;
  inset: 0;
  overflow: visible;
  clip-path: none;
  background: transparent;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  clip-path: var(--chamfer-m);
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translate(52px, 52px) scale(.88) rotate(4.8deg);
  transform-origin: 50% 50%;
  text-decoration: none;
  will-change: transform, opacity;
  /* visibility switches after the move so the outgoing board does not blink
     out, and instantly on the way in (see the depth rules below). */
  transition:
    transform .65s cubic-bezier(.22, .61, .36, 1),
    opacity .4s var(--ease) .15s,
    visibility 0s linear .65s;
}

/* Front board. */
.hero-slide[data-depth="0"] {
  z-index: 30;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}

/* The next two boards, peeking out behind it. They keep the front card's size
   and are only offset, so the exposed strip is the next board's own artwork.
   The hairline gives the dark images an edge against the dark card in front. */
.hero-slide[data-depth="1"] {
  z-index: 20;
  opacity: 1;
  visibility: visible;
  transform: translate(18px, 18px) rotate(1deg);
  border: 1px solid rgba(244, 245, 247, .3);
  transition-delay: 0s;
  pointer-events: none;
}

.hero-slide[data-depth="2"] {
  z-index: 10;
  opacity: 1;
  visibility: visible;
  transform: translate(36px, 36px) rotate(2deg);
  border: 1px solid rgba(244, 245, 247, .22);
  transition-delay: 0s;
  pointer-events: none;
}

/* Deeper boards park at the back-card position and fade out there, so the
   outgoing front card visibly lands at the back of the stack instead of
   flying off it. They stay inside the viewport while hidden. */
.hero-slide[data-depth="3"],
.hero-slide[data-depth="4"],
.hero-slide[data-depth="5"] {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate(36px, 36px) rotate(2deg);
  pointer-events: none;
}

/* Hovering or keyboard-focusing the deck opens the fan so both upcoming
   boards are readable. The plate sits close to the right edge, so the fan
   opens mostly downward - the bottom has the room and the stack still reads
   as cards. The rotation timer is already paused while the pointer is over
   the plate, so the deck holds still while it is open. */
.hero-visual.hero-showcase:hover .hero-slide[data-depth="1"],
.hero-visual.hero-showcase:focus-within .hero-slide[data-depth="1"] {
  transform: translate(24px, 36px) rotate(.8deg);
}

.hero-visual.hero-showcase:hover .hero-slide[data-depth="2"],
.hero-visual.hero-showcase:focus-within .hero-slide[data-depth="2"] {
  transform: translate(40px, 60px) rotate(1.6deg);
}

.hero-visual.hero-showcase:hover .hero-slide[data-depth="1"],
.hero-visual.hero-showcase:hover .hero-slide[data-depth="2"],
.hero-visual.hero-showcase:focus-within .hero-slide[data-depth="1"],
.hero-visual.hero-showcase:focus-within .hero-slide[data-depth="2"] {
  transition-duration: .35s, .35s, 0s;
}

.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 7s linear, filter .35s var(--ease);
}

/* Slow push-in while a board is on screen. */
.hero-slide.is-active img {
  transform: scale(1.05);
}

/* Keeps the caption legible over a bright board, and darkens the artwork on
   hover so the arrow reads clearly. */
.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(3, 5, 4, .92) 0%,
    rgba(3, 5, 4, .58) 26%,
    rgba(3, 5, 4, .10) 58%,
    rgba(3, 5, 4, 0) 100%
  );
  transition: background-color .3s var(--ease);
}

.hero-slide:hover::after,
.hero-slide:focus-visible::after {
  background-color: rgba(3, 5, 4, .38);
}

.hero-slide-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 28px;
  transition: opacity .35s var(--ease);
}

.hero-slide-cat {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper-hot);
}

.hero-slide-title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: #fff;
}

/* The whole card is a link, but nothing said so. A copper disc fades up over
   the board on hover - it is the only round shape in the system and it is
   reserved for this call to action. */
.hero-slide-go {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: var(--copper);
  color: #fff;
  font-size: 1.375rem;
  line-height: 1;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
  box-shadow: 0 10px 24px -10px rgba(3, 5, 4, .7);
}

.hero-slide:hover .hero-slide-go,
.hero-slide:focus-visible .hero-slide-go {
  opacity: 1;
  transform: scale(1);
}

/* Only the front board carries its caption and arrow; on the cards behind they
   would show as fragments at the exposed edge. */
.hero-slide:not([data-depth="0"]) .hero-slide-cap,
.hero-slide:not([data-depth="0"]) .hero-slide-go {
  opacity: 0;
}

.hero-slide-count {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 40;
  padding: 5px 9px;
  background: rgba(3, 5, 4, .68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
}

@media (max-width: 1180px) {
  .hero-copy {
    grid-column: 1 / 7;
    /* Keeps the lede clear of the plate: at this width the two columns sit
       close together and 40ch of body copy used to run under the artwork. */
    padding-right: 28px;
  }

  .hero-visual.hero-showcase {
    grid-column: 7 / 13;
    /* Width-driven here. Sizing from the height made the card wider than its
       six-column track, so it spilled back over the copy. */
    height: auto;
    width: 100%;
  }

  .hero-sub p {
    max-width: 40ch;
  }
}

/* --------------------------------------------------------------------------
   Phone: the hero is a flex column at the design's own 900px breakpoint, so
   the copy centres and the deck drops below it. The plate used to be hidden
   here because it was an empty grey square; it carries the work now.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-copy {
    grid-column: auto;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  .hero-badge {
    order: 0;
    align-self: center;
    margin: 0 0 20px;
  }

  .hero-title,
  .hero-sub {
    text-align: center;
  }

  .hero-sub p {
    max-width: 44ch;
    margin-inline: auto;
  }

  .hero-cta {
    justify-content: center;
  }

  .hero-index {
    justify-content: center;
    margin-top: 24px;
  }

  .hero-index .mono-label {
    display: none;
  }

  .hero-index a:first-of-type {
    margin-left: 0;
    padding-left: 0;
  }

  .hero-index a:first-of-type::before {
    display: none;
  }

  .hero-visual.hero-showcase {
    display: block;
    order: 2;
    grid-column: auto;
    height: auto;
    width: 100%;
    max-width: 340px;
    /* A little taller on a phone so the deck still has presence. */
    aspect-ratio: 4 / 3;
    margin: 34px auto 0;
  }

  .hero-slide[data-depth="1"] {
    transform: translate(9px, 9px) rotate(1deg);
  }

  .hero-slide[data-depth="2"] {
    transform: translate(18px, 18px) rotate(2deg);
  }

  .hero-visual.hero-showcase:hover .hero-slide[data-depth="1"],
  .hero-visual.hero-showcase:focus-within .hero-slide[data-depth="1"] {
    transform: translate(14px, 22px) rotate(.8deg);
  }

  .hero-visual.hero-showcase:hover .hero-slide[data-depth="2"],
  .hero-visual.hero-showcase:focus-within .hero-slide[data-depth="2"] {
    transform: translate(26px, 40px) rotate(1.6deg);
  }

  /* No hover on touch, so the arrow is always visible here. */
  .hero-slide-go {
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    font-size: 1.125rem;
    opacity: 1;
    transform: scale(1);
  }

  .hero-slide-cap {
    padding: 22px 24px;
  }

  .hero-slide-count {
    top: 14px;
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide img,
  .hero-slide-go {
    transition: none;
  }

  .hero-slide.is-active img {
    transform: none;
  }
}