/* Landing page rework, 2026-09-12.
   Kept in its own file so home.css does not grow further while it is already
   a page-speed problem. Three additions:
     - a result line on each case study card
     - the block that routes to the estimator, replacing the old tier tables
     - a marquee band, which is how the reference sites get life into a page
       without ever taking the scroll away from the reader
   Loaded after home.css, so these rules win where they overlap. */

/* ── result line on a case study card ───────────────────────────── */
.work-v319-card-result {
  display: block;
  max-width: 39rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(239,232,216,.14);
  color: rgba(239,232,216,.82);
  font-size: clamp(0.9rem, 1.02vw, 1rem);
  line-height: 1.64;
}
.work-v319-card-result strong {
  display: block;
  margin-bottom: .28rem;
  color: var(--aqua, #7fc4ad);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The stat labels carry a full sentence now, so they need room to wrap. */
.work-v319-proof .work-v319-stat span:last-child {
  line-height: 1.5;
  text-wrap: pretty;
}

/* ── route to the estimator ─────────────────────────────────────── */
.services-route {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.4rem, 5vw, 3.6rem);
  border-top: 1px solid rgba(239,232,216,.13);
}
.services-route-title {
  margin: .7rem 0 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--cream, #efe8d8);
  max-width: 18ch;
}
.services-route-copy p {
  max-width: 48ch;
  margin: 1.1rem 0 0;
  color: rgba(239,232,216,.72);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  line-height: 1.72;
}
.services-route-actions { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.services-route-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 58px;
  padding: 0 1.7rem;
  background: var(--aqua, #7fc4ad);
  color: #14100c;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 16px;
}
.services-route-link {
  color: rgba(239,232,216,.66);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.services-route-link:hover { color: var(--cream, #efe8d8); }

/* ── marquee band ───────────────────────────────────────────────── */
.dk-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  background: #1c1712;
  border-top: 1px solid rgba(239,232,216,.1);
  border-bottom: 1px solid rgba(239,232,216,.1);
  z-index: 2;

  /* The divider between items. Swap this one value to change the whole band:
     '/'  slash, editorial and current
     '+'  plus, more technical
     '✳'  asterisk, the NordPixel treatment
     '—'  em rule, quietest of the four                                     */
  --dk-divider: '/';
}
.dk-marquee-track {
  display: flex;
  width: max-content;
  gap: 2.4rem;
  animation: dk-marquee-slide 38s linear infinite;
}
.dk-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  color: rgba(239,232,216,.74);
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(0.8rem, 1.1vw, 0.9rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dk-marquee-track span::after {
  content: var(--dk-divider);
  color: var(--aqua, #7fc4ad);
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  line-height: 1;
  opacity: .7;
  flex-shrink: 0;
  transform: translateY(-.04em);
}
@keyframes dk-marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 860px) {
  .services-route { grid-template-columns: 1fr; }
  .services-route-actions { align-items: stretch; }
  .services-route-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-marquee-track { animation: none; transform: none; }
  .dk-marquee { overflow-x: auto; }
}

/* ── blending the approach section into the block above ─────────────
   The photo backdrop used to start at full strength on its first pixel,
   against the flat field of the services header, which read as a hard
   seam across the page. Two changes: the base colour now matches the
   block above so the faded area is continuous, and the photo layer is
   masked so it emerges over roughly 200px instead of switching on. */
.wbw-section {
  background: #eeece8;
}
.wbw-section::before {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0,0,0,.55) clamp(90px, 10vh, 150px),
    #000 clamp(180px, 22vh, 300px),
    #000 calc(100% - 160px),
    rgba(0,0,0,.6) calc(100% - 60px),
    transparent 100%);
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    rgba(0,0,0,.55) clamp(90px, 10vh, 150px),
    #000 clamp(180px, 22vh, 300px),
    #000 calc(100% - 160px),
    rgba(0,0,0,.6) calc(100% - 60px),
    transparent 100%);
}

/* Full-bleed the approach section.
   It now lives inside .services, which carries 2.5rem of horizontal padding,
   so the photo backdrop stopped 40px short of each edge and showed a hard
   vertical cutoff. Same break-out the dark shell already uses: pull the
   section out by the parent padding, then add it back as inner padding so the
   content itself does not move. */
.services > .wbw-section {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: calc(clamp(1.2rem, 4vw, 4rem) + 2.5rem);
  padding-right: calc(clamp(1.2rem, 4vw, 4rem) + 2.5rem);
}

/* ── platform fit: stop hiding the content ──────────────────────────
   These cards swapped their whole face out on hover, so at rest each one
   showed a tag and a single word inside a tall empty rectangle. That is
   the flatness, and on a touch screen there is no hover at all, so the
   recommendation was simply unreachable.

   Now the platform name and its description are always visible, and hover
   or focus reveals the supporting points as a bonus rather than a
   requirement. */
@media (min-width: 761px) {
  .platform-fit .pfcard {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .35rem;
    min-height: 0;
    padding: clamp(1.3rem, 1.6vw, 1.6rem);
  }
  .platform-fit .pfcard-face {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 0;
    opacity: 1;
    transform: none;
  }
  .platform-fit .pfcard-back {
    position: static;
    inset: auto;
    margin: .9rem 0 0;
    padding: 0;
    opacity: 1;
    transform: none;
  }
  /* Only the supporting points wait for interest. */
  .platform-fit .pfcard-points {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height .4s cubic-bezier(.19,1,.22,1), opacity .3s ease, margin .4s ease;
  }
  .platform-fit .pfcard:hover .pfcard-points,
  .platform-fit .pfcard:focus-within .pfcard-points {
    max-height: 10rem;
    opacity: 1;
    margin-top: .85rem;
  }
  /* The face no longer disappears, so cancel the swap. */
  .platform-fit .pfcard:hover .pfcard-face,
  .platform-fit .pfcard:focus-within .pfcard-face { opacity: 1; transform: none; }
  .platform-fit .pfcard:hover .pfcard-back,
  .platform-fit .pfcard:focus-within .pfcard-back { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .platform-fit .pfcard-points { transition: none; }
}

/* The fixed 310-360px height existed because the hidden back panel needed
   somewhere to appear. Content is visible now, so let the cards size to it
   and stay equal via the grid rather than a hardcoded number. */
@media (min-width: 761px) {
  .platform-fit .pfcard { height: auto; align-self: stretch; }
}

/* ── platform fit as a priority picker ─────────────────────────────
   The static rows read as a spec table. Now the priority is the question
   and the platform is the reveal: pick a priority on the left, the fit
   builds itself. On desktop it is a full-width, auto-advancing stage
   where each priority brings its own background scene. Under 900px it
   is a tap-to-open accordion.
   Without JS (.is-ready never lands) everything renders open, stacked. */
.pfx { margin: clamp(1.6rem,3vw,2.6rem) 0 0; border-top: 1px solid rgba(239,232,216,.13); }
.pfx-item { border-bottom: 1px solid rgba(239,232,216,.13); }
.pfx-head { margin: 0; font: inherit; }
.pfx-trigger {
  appearance: none; background: none; border: 0; margin: 0; width: 100%;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  position: relative;
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1rem;
  padding: clamp(1.15rem, 2vw, 1.55rem) 0;
  -webkit-tap-highlight-color: transparent;
}
.pfx-trigger:focus-visible { outline: 2px solid var(--aqua, #7fc4ad); outline-offset: 3px; border-radius: 2px; }
.pfx-text { display: flex; flex-direction: column; gap: .32rem; min-width: 0; }
.pfx-tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(239,232,216,.34); transition: color .35s ease;
}
.pfx-word {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: clamp(1.9rem, 3.3vw, 2.9rem); line-height: 1; letter-spacing: -.04em;
  color: rgba(239,232,216,.3);
  transition: color .35s ease, transform .6s cubic-bezier(.19,1,.22,1);
}
.pfx-trigger:hover .pfx-word { color: rgba(239,232,216,.64); }
.pfx-item.is-active .pfx-word { color: var(--cream, #efe8d8); }
.pfx-item.is-active .pfx-tag { color: var(--aqua, #7fc4ad); }

.pfx-pick { display: flex; align-items: center; gap: .8rem; }
.pfx-pick-name {
  font-weight: 700; font-size: .9rem; letter-spacing: -.01em; color: rgba(127,196,173,.72);
  transition: opacity .3s ease;
}
.pfx-icon {
  position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid rgba(239,232,216,.2);
  transition: background .35s ease, border-color .35s ease, transform .5s cubic-bezier(.19,1,.22,1);
}
.pfx-icon::before, .pfx-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .7rem; height: 1.5px;
  background: rgba(239,232,216,.75); transform: translate(-50%,-50%);
  transition: transform .5s cubic-bezier(.19,1,.22,1), background .35s ease;
}
.pfx-icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.pfx-trigger:hover .pfx-icon { border-color: rgba(127,196,173,.6); }

.pfx-bar {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--aqua, #7fc4ad);
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform .3s ease;
}
.pfx-item.is-active .pfx-bar { --p: 1; transition: transform .7s cubic-bezier(.19,1,.22,1); }
.pfx.is-auto .pfx-bar { transition: none; }

/* panel */
.pfx-panel { display: grid; grid-template-rows: 1fr; }
.pfx-panel-inner { min-height: 0; overflow: hidden; position: relative; }
.pfx-card { position: relative; padding: .2rem 0 1.8rem; }
.pfx-bg, .pfx-hero, .pfx-toggle { display: none; }
.pfx-label {
  margin: 0 0 .3rem; font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239,232,216,.4);
}
.pfx-platform {
  position: relative; z-index: 1; margin: 0 0 .8rem;
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: clamp(1.7rem, 3.2vw, 3.3rem); line-height: .98; letter-spacing: -.045em;
  color: var(--aqua, #7fc4ad);
}
.pfx-or { font-weight: 400; font-style: italic; color: rgba(239,232,216,.45); letter-spacing: -.02em; }
.pfx-desc {
  position: relative; z-index: 1; margin: 0; max-width: 46ch;
  color: rgba(239,232,216,.68); font-size: 1rem; line-height: 1.7;
}
.pfx-pts { position: relative; z-index: 1; list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0; }
.pfx-pts li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .6rem 0; border-top: 1px solid rgba(239,232,216,.1);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(239,232,216,.74);
}

/* enhanced (JS ready): collapse closed panels */
.pfx.is-ready .pfx-panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s cubic-bezier(.19,1,.22,1);
}
.pfx.is-ready .pfx-panel-inner { visibility: hidden; transition: visibility 0s linear .6s; }
.pfx.is-ready .pfx-item.is-active .pfx-panel { grid-template-rows: 1fr; }
.pfx.is-ready .pfx-item.is-active .pfx-panel-inner { visibility: visible; transition: none; }
.pfx.is-ready .pfx-item.is-active .pfx-icon { transform: rotate(45deg); background: var(--aqua, #7fc4ad); border-color: var(--aqua, #7fc4ad); }
.pfx.is-ready .pfx-item.is-active .pfx-icon::before,
.pfx.is-ready .pfx-item.is-active .pfx-icon::after { background: #2a231c; }
.pfx.is-ready .pfx-item.is-active .pfx-pick-name { display: none; }

/* reveal: each piece of the fit rises in, staggered */
@keyframes pfxRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pfxWordIn { from { transform: translateY(105%); } to { transform: none; } }
.pfx.is-ready .pfx-item.is-active .pfx-detail > *:not(.pfx-pts),
.pfx.is-ready .pfx-item.is-active .pfx-pts li,
.pfx.is-ready .pfx-item.is-active .pfx-hero-tag { animation: pfxRise .7s cubic-bezier(.19,1,.22,1) both; }
.pfx.is-ready .pfx-item.is-active .pfx-label    { animation-delay: .08s; }
.pfx.is-ready .pfx-item.is-active .pfx-platform { animation-delay: .14s; }
.pfx.is-ready .pfx-item.is-active .pfx-desc     { animation-delay: .22s; }
.pfx.is-ready .pfx-item.is-active .pfx-pts li:nth-child(1) { animation-delay: .3s; }
.pfx.is-ready .pfx-item.is-active .pfx-pts li:nth-child(2) { animation-delay: .37s; }
.pfx.is-ready .pfx-item.is-active .pfx-pts li:nth-child(3) { animation-delay: .44s; }
.pfx.is-ready .pfx-item.is-active .pfx-pts li:nth-child(4) { animation-delay: .51s; }

/* desktop: a full-width stage. Each priority is a slide with its own
   scene behind it; the four priorities sit along the bottom as tabs with
   a progress line, and the whole thing advances on its own. */
@media (min-width: 900px) {
  .pfx.is-ready {
    --pfx-gutter: max(2.5rem, calc((100vw - 1180px) / 2));
    position: relative; isolation: isolate; overflow: hidden;
    box-sizing: border-box; width: 100vw;
    margin: clamp(1.6rem, 3vw, 2.6rem) 0 0 calc(50% - 50vw);
    padding: 0 var(--pfx-gutter);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: minmax(clamp(500px, 66vh, 700px), auto) auto;
    column-gap: clamp(1rem, 2.2vw, 2.2rem);
    border: 0; background: #1a1511;
  }
  .pfx.is-ready .pfx-item { display: contents; border: 0; }

  /* scenes: one colour world per platform, all drawn in CSS */
  .pfx.is-ready .pfx-item:nth-child(1) {
    --pfx-accent: #f2a25f;
    --pfx-scene:
      radial-gradient(55% 75% at 80% 22%, rgba(242,138,58,.46), transparent 62%),
      radial-gradient(38% 50% at 8% 100%, rgba(190,82,38,.24), transparent 70%),
      repeating-linear-gradient(118deg, transparent 0 46px, rgba(255,196,146,.05) 46px 47px),
      linear-gradient(135deg, #2e1c11 0%, #170f0a 100%);
  }
  .pfx.is-ready .pfx-item:nth-child(2) {
    --pfx-accent: #8fd3b6;
    --pfx-scene:
      radial-gradient(50% 70% at 78% 32%, rgba(127,196,173,.4), transparent 62%),
      radial-gradient(circle at 78% 32%, transparent 0 15rem, rgba(143,211,182,.16) 15rem calc(15rem + 1px), transparent calc(15rem + 2px) 23rem, rgba(143,211,182,.1) 23rem calc(23rem + 1px), transparent calc(23rem + 2px) 31rem, rgba(143,211,182,.06) 31rem calc(31rem + 1px), transparent calc(31rem + 2px)),
      linear-gradient(135deg, #12291f 0%, #0a1611 100%);
  }
  .pfx.is-ready .pfx-item:nth-child(3) {
    --pfx-accent: #9cc2ea;
    --pfx-scene:
      radial-gradient(55% 78% at 84% 24%, rgba(92,142,204,.44), transparent 62%),
      repeating-linear-gradient(0deg, transparent 0 38px, rgba(176,204,238,.055) 38px 39px),
      linear-gradient(135deg, #132033 0%, #0a111b 100%);
  }
  .pfx.is-ready .pfx-item:nth-child(4) {
    --pfx-accent: #ecd6ae;
    --pfx-scene:
      radial-gradient(42% 62% at 76% 40%, rgba(240,222,188,.28), transparent 66%),
      radial-gradient(circle at 76% 40%, rgba(240,222,188,.1) 0 12rem, transparent calc(12rem + 1px)),
      linear-gradient(135deg, #2d2521 0%, #181412 100%);
  }

  /* real work behind the slide: a screenshot of a live project on that
     platform, tinted dark on the text side so the copy stays readable */
  .pfx.is-ready .pfx-item:nth-child(1) { --pfx-shot: url("/assets/images/platform-fit/modelteacher.jpg"); --pfx-tint: 24, 16, 10; }
  .pfx.is-ready .pfx-item:nth-child(4) { --pfx-shot: url("/assets/images/platform-fit/lavallee.jpg"); --pfx-tint: 22, 19, 16; }
  .pfx.is-ready .pfx-item.has-shot .pfx-bg { background: var(--pfx-scene); }
  .pfx.is-ready .pfx-item.has-shot .pfx-bg::before {
    inset: auto; left: 47%; top: clamp(3rem, 9%, 5rem);
    width: min(64vw, 1060px); aspect-ratio: 16 / 10;
    background: var(--pfx-shot) left top / cover no-repeat;
    border-radius: 10px;
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(239,232,216,.14);
    transform-origin: left center;
    transform: perspective(2200px) rotateY(-11deg) translateX(6%);
    opacity: .9;
  }
  .pfx.is-ready .pfx-item.has-shot.is-active .pfx-bg::before {
    transform: perspective(2200px) rotateY(-11deg);
  }
  .pfx.is-ready .pfx-item.has-shot .pfx-bg::after {
    background:
      linear-gradient(to top, rgba(12,10,8,.9) 0%, rgba(12,10,8,0) 38%),
      linear-gradient(90deg, rgba(var(--pfx-tint), 1) 0%, rgba(var(--pfx-tint), .94) 40%, rgba(var(--pfx-tint), .2) 58%, rgba(var(--pfx-tint), 0) 72%);
  }
  /* keep every line of copy on the solid side of the slide */
  .pfx.is-ready .pfx-item.has-shot .pfx-detail { display: block; max-width: 36rem; }
  .pfx.is-ready .pfx-item.has-shot .pfx-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
  .pfx.is-ready .pfx-item.has-shot .pfx-pts li { padding: .7rem 0 0; font-size: .7rem; line-height: 1.35; }
  .pfx.is-ready .pfx-item.has-shot .pfx-pts li:last-child { border-bottom: 0; }

  .pfx.is-ready .pfx-bg {
    display: block; position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    opacity: 0; transition: opacity 1.2s ease;
  }
  .pfx.is-ready .pfx-bg::before {
    content: ""; position: absolute; inset: -4%;
    background: var(--pfx-scene);
    transform: scale(1.08); transition: transform 0s linear 1.2s;
  }
  .pfx.is-ready .pfx-bg::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(to top, rgba(12,10,8,.78) 0%, rgba(12,10,8,0) 40%),
      linear-gradient(to right, rgba(12,10,8,.4) 0%, rgba(12,10,8,0) 60%);
  }
  .pfx.is-ready .pfx-item.is-active .pfx-bg { opacity: 1; z-index: 1; }
  .pfx.is-ready .pfx-item.is-active .pfx-bg::before { transform: scale(1); transition: transform 9s cubic-bezier(.2,.7,.2,1); }

  /* slide content */
  .pfx.is-ready .pfx-panel {
    grid-row: 1; grid-column: 1 / -1; display: block;
    visibility: hidden; transition: visibility 0s linear 1.2s;
  }
  .pfx.is-ready .pfx-item.is-active .pfx-panel { visibility: visible; transition: none; }
  .pfx.is-ready .pfx-panel-inner {
    position: relative; z-index: 2; height: 100%; overflow: visible;
    visibility: inherit; opacity: 0; transition: opacity .4s ease;
  }
  .pfx.is-ready .pfx-item.is-active .pfx-panel-inner { opacity: 1; }
  .pfx.is-ready .pfx-card {
    box-sizing: border-box; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.4rem, 4vw, 3.4rem);
  }
  .pfx.is-ready .pfx-hero { display: block; }
  .pfx.is-ready .pfx-hero-tag {
    margin: 0 0 1.1rem; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: var(--pfx-accent);
  }
  .pfx.is-ready .pfx-hero-word {
    margin: 0; overflow: hidden; padding-bottom: .06em;
    font-family: 'Montserrat', sans-serif; font-weight: 800;
    font-size: clamp(4.5rem, 10.5vw, 10rem); line-height: .92; letter-spacing: -.055em;
    color: var(--cream, #efe8d8);
  }
  .pfx.is-ready .pfx-hero-word span { display: inline-block; }
  .pfx.is-ready .pfx-item.is-active .pfx-hero-word span { animation: pfxWordIn 1s cubic-bezier(.19,1,.22,1) .05s both; }

  .pfx.is-ready .pfx-detail {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem); align-items: end; max-width: 64rem;
  }
  .pfx.is-ready .pfx-label { grid-column: 1; color: rgba(239,232,216,.55); }
  .pfx.is-ready .pfx-platform { grid-column: 1; margin-bottom: .9rem; font-size: clamp(2rem, 3.4vw, 3.2rem); color: var(--pfx-accent); }
  .pfx.is-ready .pfx-desc { grid-column: 1; color: rgba(239,232,216,.8); font-size: 1.05rem; }
  .pfx.is-ready .pfx-pts { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; }
  .pfx.is-ready .pfx-pts li { padding: .75rem 0; border-top-color: rgba(239,232,216,.18); color: rgba(239,232,216,.86); }
  .pfx.is-ready .pfx-pts li:last-child { border-bottom: 1px solid rgba(239,232,216,.18); }
  .pfx.is-ready .pfx-item.is-active .pfx-hero-tag { animation-delay: 0s; }
  .pfx.is-ready .pfx-item.is-active .pfx-label    { animation-delay: .28s; }
  .pfx.is-ready .pfx-item.is-active .pfx-platform { animation-delay: .34s; }
  .pfx.is-ready .pfx-item.is-active .pfx-desc     { animation-delay: .42s; }
  .pfx.is-ready .pfx-item.is-active .pfx-pts li:nth-child(1) { animation-delay: .46s; }
  .pfx.is-ready .pfx-item.is-active .pfx-pts li:nth-child(2) { animation-delay: .53s; }
  .pfx.is-ready .pfx-item.is-active .pfx-pts li:nth-child(3) { animation-delay: .6s; }

  /* tabs along the bottom */
  .pfx.is-ready .pfx-head { grid-row: 2; position: relative; z-index: 3; }
  .pfx.is-ready .pfx-item:nth-child(1) .pfx-head { grid-column: 1; }
  .pfx.is-ready .pfx-item:nth-child(2) .pfx-head { grid-column: 2; }
  .pfx.is-ready .pfx-item:nth-child(3) .pfx-head { grid-column: 3; }
  .pfx.is-ready .pfx-item:nth-child(4) .pfx-head { grid-column: 4; }
  .pfx.is-ready .pfx-trigger {
    display: block; padding: 1.2rem 0 clamp(1.8rem, 3vw, 2.4rem);
    border-top: 1px solid rgba(239,232,216,.22);
  }
  .pfx.is-ready .pfx-pick { display: none; }
  .pfx.is-ready .pfx-tag { color: rgba(239,232,216,.45); }
  .pfx.is-ready .pfx-word { font-size: clamp(1.2rem, 1.7vw, 1.6rem); color: rgba(239,232,216,.5); }
  .pfx.is-ready .pfx-trigger:hover .pfx-word { color: rgba(239,232,216,.88); }
  .pfx.is-ready .pfx-item.is-active .pfx-word { color: var(--cream, #efe8d8); }
  .pfx.is-ready .pfx-item.is-active .pfx-tag { color: var(--pfx-accent); }
  .pfx.is-ready .pfx-bar { top: -1px; bottom: auto; background: var(--pfx-accent); }

  /* pause / play */
  .pfx.is-ready .pfx-toggle {
    display: inline-flex; align-items: center; gap: .6rem;
    position: absolute; z-index: 4; top: clamp(1.4rem, 2.6vw, 2.2rem); right: var(--pfx-gutter);
    padding: .55rem .9rem .55rem .75rem; margin: 0;
    border: 1px solid rgba(239,232,216,.24); border-radius: 99px;
    background: rgba(12,10,8,.28); color: rgba(239,232,216,.82);
    font: 800 .64rem/1 'Montserrat', sans-serif; letter-spacing: .16em; text-transform: uppercase;
    cursor: pointer; transition: border-color .3s ease, color .3s ease;
  }
  .pfx.is-ready .pfx-toggle:hover { border-color: rgba(239,232,216,.6); color: var(--cream, #efe8d8); }
  .pfx.is-ready .pfx-toggle:focus-visible { outline: 2px solid var(--aqua, #7fc4ad); outline-offset: 3px; }
  .pfx-toggle-icon { position: relative; width: .6rem; height: .66rem; }
  .pfx-toggle[data-state="playing"] .pfx-toggle-icon {
    border-left: 2px solid currentColor; border-right: 2px solid currentColor; box-sizing: border-box; width: .5rem;
  }
  .pfx-toggle[data-state="paused"] .pfx-toggle-icon {
    width: 0; height: 0; border-style: solid; border-width: .33rem 0 .33rem .55rem;
    border-color: transparent transparent transparent currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pfx-word, .pfx-bar, .pfx-icon, .pfx-icon::before, .pfx-icon::after,
  .pfx.is-ready .pfx-panel, .pfx.is-ready .pfx-panel-inner,
  .pfx.is-ready .pfx-bg, .pfx.is-ready .pfx-bg::before { transition: none !important; }
  .pfx.is-ready .pfx-item .pfx-bg::before { transform: none !important; }
  .pfx.is-ready .pfx-item.is-active .pfx-detail > *,
  .pfx.is-ready .pfx-item.is-active .pfx-hero-tag,
  .pfx.is-ready .pfx-item.is-active .pfx-hero-word span,
  .pfx.is-ready .pfx-item.is-active .pfx-pts li { animation: none !important; }
}