/* =============================================================
   Portfolio — case-study index composed on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Namespace: .pf-
   ============================================================= */

/* overflow-x: clip contains the atmosphere blobs and the mobile key
   carousel, which both bleed past the viewport edge on purpose.
   clip (not hidden) so it stays visible on the y axis. */
.pf { --pf-max: var(--container-inner); position: relative; overflow-x: clip; }

/* =============================================================
   ATMOSPHERE — paper canvas + soft glows, per
   docs/ui-guidelines.md → "Soft radial glows (cyan/mint, lime) as
   background atmosphere — not content." Same oklch palette as
   .hero__glow on the home page so this reads as the same canvas.
   Confined to the hero: it fades out before the logo strip so the
   trust-logo row sits on plain paper, not a tinted wash.
   ============================================================= */
.pf-atmos {
  position: absolute; inset: 0 0 auto; z-index: 0;
  height: clamp(460px, 56vh, 680px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 68%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 68%);
}
.pf-atmos span { position: absolute; display: block; }

/* Literal copy of home's hero glow recipe (css/styles.css .hero__glow /
   --lime / --violet), per the "Background glow gradient" rule — Portfolio
   reuses the homepage's own palette (green/cyan, lime, magenta/rose), so
   position, size, timing, keyframe percentage steps, hue-drift deltas,
   alphas, stop percentages AND hues are all identical to home's, unlike
   every other page's own two-hue substitution — see css/resources.css for
   the confirmed-working reference on the general recipe. Height uses vh
   (not home's own vw) since .pf-atmos is capped to a fraction of the
   viewport rather than a full hero, the same exception every shorter-hero
   page needs. */
.pf-atmos__mint {
  top: -24%; right: -42%; width: 100vw; height: 100vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.13 var(--g-h1, 152deg) / 0.85),
    oklch(0.9 0.1 var(--g-h2, 190deg) / 0.4) 46%,
    transparent 72%
  );
  animation:
    pf-glow-morph 11s ease-in-out infinite,
    pf-glow-float 17s ease-in-out infinite;
}
@keyframes pf-glow-morph {
  0%, 100% { --g-h1: 152deg; --g-h2: 190deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  30%      { --g-h1: 188deg; --g-h2: 212deg; --g-w: 66%; --g-h: 42%; --g-x: 60%; --g-y: 40%; }
  62%      { --g-h1: 126deg; --g-h2: 164deg; --g-w: 42%; --g-h: 64%; --g-x: 40%; --g-y: 60%; }
}
@keyframes pf-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: hue-rotate(0deg)  saturate(1); }
  50%      { transform: scale(1.22) translate3d(-8%, 6%, 0); filter: hue-rotate(14deg) saturate(1.1); }
}

/* lime, lower left — lands under the engagement key */
.pf-atmos__lime {
  top: auto; right: auto;
  bottom: -20%; left: -22%; width: 60vw; height: 60vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.92 0.16 var(--g-h1, 120deg) / 0.4),
    transparent 66%
  );
  animation:
    pf-glow-morph-lime 14s ease-in-out -5s infinite,
    pf-glow-float-lime 21s ease-in-out -9s infinite;
}
@keyframes pf-glow-morph-lime {
  0%, 100% { --g-h1: 120deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  40%      { --g-h1: 152deg; --g-w: 68%; --g-h: 56%; --g-x: 60%; --g-y: 42%; }
  72%      { --g-h1: 98deg;  --g-w: 42%; --g-h: 66%; --g-x: 40%; --g-y: 58%; }
}
@keyframes pf-glow-float-lime {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0);    filter: hue-rotate(0deg)   saturate(1); }
  50%      { transform: scale(0.84) translate3d(9%, -7%, 0); filter: hue-rotate(-12deg) saturate(1.12); }
}

/* magenta, a quiet wash behind the title */
.pf-atmos__magenta {
  top: -26%; left: 52%; right: auto; bottom: auto;
  width: 44vw; height: 44vh;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.74 0.18 var(--g-h1, 342deg) / 0.28),
    oklch(0.78 0.13 var(--g-h2, 350deg) / 0.12) 46%,
    transparent 64%
  );
  animation:
    pf-glow-morph-magenta 18s ease-in-out -7s infinite,
    pf-glow-float-magenta 26s ease-in-out -13s infinite;
}
@keyframes pf-glow-morph-magenta {
  0%, 100% { --g-h1: 342deg; --g-h2: 350deg; --g-w: 48%; --g-h: 48%; --g-x: 50%; --g-y: 50%; }
  38%      { --g-h1: 318deg; --g-h2: 334deg; --g-w: 70%; --g-h: 42%; --g-x: 40%; --g-y: 58%; }
  70%      { --g-h1: 2deg;   --g-h2: 304deg; --g-w: 42%; --g-h: 60%; --g-x: 60%; --g-y: 44%; }
}
@keyframes pf-glow-float-magenta {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);      filter: hue-rotate(0deg)   saturate(1);   opacity: 1; }
  45%      { transform: scale(1.28) translate3d(-9%, 5%, 0);   filter: hue-rotate(-10deg) saturate(1.1); opacity: 0.7; }
}

/* Mandatory corner-seam accent, centred exactly on the point where the
   atmosphere box ends, a quiet echo of the green wash. */
.pf-atmos__corner {
  top: auto; left: auto;
  bottom: -37vw; right: -37vw; width: 74vw; height: 74vw;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.9 0.13 var(--g-h1, 152deg) / 0.15),
    transparent 60%
  );
  animation:
    pf-glow-morph-corner 8s ease-in-out -4s infinite,
    pf-glow-float-corner 11s ease-in-out -8s infinite;
}
@keyframes pf-glow-morph-corner {
  0%, 100% { --g-h1: 152deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 174deg; --g-w: 55%; --g-h: 37%; --g-x: 40%; --g-y: 60%; }
}
@keyframes pf-glow-float-corner {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.15) translate3d(9%, -6%, 0); filter: saturate(1.05); }
}

/* Mandatory mobile override: desktop's percentage-based blob positions
   clip away on a narrow screen. */
@media (max-width: 900px) {
  .pf-atmos {
    background:
      radial-gradient(120% 70% at 85% 0%, oklch(0.9 0.13 152 / 0.28), transparent 62%),
      radial-gradient(90% 55% at 10% 35%, oklch(0.9 0.1 190 / 0.19), transparent 58%),
      radial-gradient(80% 50% at 70% 18%, oklch(0.9 0.13 152 / 0.08), transparent 55%),
      var(--color-paper);
  }
  .pf-atmos__mint {
    top: -8%; right: -28%; width: 100vh; height: 100vh; opacity: 1;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.9 0.13 var(--g-h1, 152deg) / 0.45),
      oklch(0.9 0.1 var(--g-h2, 190deg) / 0.22) 42%,
      transparent 70%
    );
  }
  .pf-atmos__lime {
    bottom: 18%; left: -35%; width: 85vh; height: 85vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.92 0.16 var(--g-h1, 120deg) / 0.28),
      transparent 68%
    );
  }
  .pf-atmos__magenta {
    top: 4%; left: 42%; width: 65vh; height: 65vh;
    background: radial-gradient(
      var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
      oklch(0.74 0.18 var(--g-h1, 342deg) / 0.16),
      oklch(0.78 0.13 var(--g-h2, 350deg) / 0.06) 48%,
      transparent 66%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-atmos__mint, .pf-atmos__lime, .pf-atmos__magenta, .pf-atmos__corner { animation: none; }
}

/* content rides above the wash */
.pf > .page-hero,
.pf > .pf-logo-strip,
.pf > .pf-section,
.pf > .section { position: relative; z-index: 1; }

.pf-section { padding: var(--space-7) var(--gutter) 0; }
/* #case-studies is where the case study pages' "All case studies" button
   lands, so it clears the fixed header like every other anchor target. */
#case-studies { scroll-margin-top: calc(var(--header-height) + var(--space-3)); }
.pf > .page-hero {
  padding-bottom: var(--space-5);
}
/* Hero title uses the home hero's size (.hero--offers .hero__masthead
   .hero__title in styles.css), not the shared --fs-h1 page-title size. */
.pf .page-hero__title {
  margin-top: var(--space-4);
  font-size: clamp(2.5rem, calc((100vw - 8rem) / 16.5), 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.pf-logo-strip { padding: 0 0 var(--space-5); }
/* Logo marquee stays in the content column. Do not restore the old 100vw
   bleed — the shared .logos__carousel rule is width 100% of its parent. */
.pf-logo-strip .logos__carousel {
  width: min(1200px, calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
html.nc-reveal .pf [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.nc-reveal .pf [data-reveal].is-in { opacity: 1; transform: none; }
/* Once a case card has revealed, hand it back its own hover transition:
   no reveal delay, and every hover property eases instead of snapping. */
html.nc-reveal .pf .pf-case[data-reveal].is-in {
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease),
    border-color 0.7s var(--ease), box-shadow 0.7s var(--ease),
    color 0.7s var(--ease);
  transition-delay: 0ms;
}
html.nc-reveal .pf a.pf-case[data-reveal].is-in:hover { transform: translateY(-3px); }

/* ---------- Section head — same rhythm as the home page ----------
   kicker + .section__title, centred by the wrapper so the shared
   type scale in styles.css stays the single source of truth. */
.pf-head {
  text-align: center;
  margin-bottom: var(--space-6);
}
.pf-head--key { margin-bottom: var(--space-5); }
.pf-head--sub { margin-top: var(--space-8); }
.pf-head .section__title { margin: var(--space-3) 0 0; }
.pf-head__lead {
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--color-ink-60);
  max-width: 640px;
  margin: var(--space-3) auto 0;
}

/* =============================================================
   CASE ROWS — one card per case study, media + copy
   ============================================================= */
.pf-list {
  display: flex; flex-direction: column;
  gap: var(--space-5);
}

.pf-case {
  position: relative; overflow: clip;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 3vw, 3rem);
  background: var(--color-surface-light);
  border: 1px solid var(--border-ink);
  border-radius: var(--radius-xl);
  color: var(--color-ink);
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
  transition: transform 0.7s var(--ease), border-color 0.7s var(--ease),
    box-shadow 0.7s var(--ease), color 0.7s var(--ease);
}
a.pf-case:hover {
  transform: translateY(-3px);
  border-color: var(--border-ink-strong);
  box-shadow: 0 30px 60px -40px rgba(10, 10, 8, 0.4);
}
/* The whole card is a link: keep its copy ink on hover instead of the
   page link color. Only the "Read the case study" line takes a color. */
a.pf-case:hover,
a.pf-case:focus-visible { color: var(--color-ink); }
.pf-case--flip .pf-case__media { order: -1; }

/* soft accent wash per card. Set --pf-accent-2 as well for a two-tone
   wash (e.g. the FitCook red → orange gradient from its case page). */
.pf-case__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: -40%; right: -12%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 68% 26%,
      color-mix(in srgb, var(--pf-accent-2, var(--pf-accent, var(--color-secondary-green))) 22%, transparent),
      transparent 76%),
    radial-gradient(50% 50% at 28% 70%,
      color-mix(in srgb, var(--pf-accent, var(--color-secondary-green)) 40%, transparent),
      transparent 78%);
  filter: blur(32px);
}
.pf-case--flip .pf-case__glow { right: auto; left: -12%; }
/* Hover: a wider, slightly deeper copy of the same two-tone wash fades in.
   Opacity only, no scaling, so the blurred layer never re-rasterises
   mid-hover and the change stays smooth. */
.pf-case__glow::after {
  content: ""; position: absolute; inset: -22%;
  border-radius: 50%;
  background:
    radial-gradient(50% 50% at 68% 26%,
      color-mix(in srgb, var(--pf-accent-2, var(--pf-accent, var(--color-secondary-green))) 16%, transparent),
      transparent 76%),
    radial-gradient(50% 50% at 28% 70%,
      color-mix(in srgb, var(--pf-accent, var(--color-secondary-green)) 26%, transparent),
      transparent 78%);
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity;
}
a.pf-case:hover .pf-case__glow::after,
a.pf-case:focus-visible .pf-case__glow::after { opacity: 1; }

.pf-case__body,
.pf-case__media { position: relative; z-index: 1; }

/* ---------- Copy side ----------
   Two distinct tiers, deliberately not the same shape:
   1. .pf-signal  — what WE did. Accent dot keyed to the engagement
      key above, sits above the title. This is the classification.
   2. .pf-case__domain — what the PROJECT is. Quiet mono meta row
      under the body copy. Never a pill, so it can't be misread
      as another engagement label. */
.pf-case__signals {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1);
}
.pf-store {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
}
.pf-store img { display: block; width: 22px; height: 22px; }
.pf-signal {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-title); font-size: var(--fs-label);
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink);
  background: var(--glass);
  border: 1px solid var(--border-ink);
  padding: 0.25rem 0.7rem 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
}
.pf-signal::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pf-signal, var(--color-secondary-green));
}

.pf-case__domain {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center;
  gap: 0.5em;
  list-style: none;
  width: 100%;
  margin: var(--space-3) 0 0; padding: 0;
  font-family: var(--font-tag); font-size: var(--fs-tag);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center;
  color: var(--color-ink-35);
}
.pf-case__domain li + li::before {
  content: "·"; margin-right: 0.5em; color: var(--color-ink-25);
}
.pf-case--flip .pf-case__domain {
  justify-content: center;
  text-align: center;
}

/* one step below .section__title so the section head stays dominant */
.pf-case__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.01; letter-spacing: -0.024em;
  margin: var(--space-3) 0 0;
}
.pf-case__body-text {
  font-size: var(--fs-md); line-height: 1.6;
  color: var(--color-ink-60);
  max-width: 46ch;
  margin: var(--space-3) 0 0;
}

.pf-case__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-ink);
}
.pf-metric { display: flex; flex-direction: column; gap: 0.25rem; }
.pf-metric__value {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--color-ink);
}
.pf-metric__label {
  order: -1;
  font-family: var(--font-tag); font-size: var(--fs-tag);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-ink-35);
}

.pf-case__more {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-title); font-size: var(--fs-card-link); font-weight: 600;
  color: var(--color-ink);
  margin-top: var(--space-4);
  transition: color 0.4s var(--ease);
}
.pf-case__more span { transition: transform 0.4s var(--ease); }
/* hover color is the card's own accent, the same color as its glow */
a.pf-case:hover .pf-case__more,
a.pf-case:focus-visible .pf-case__more { color: var(--pf-accent, var(--color-ink)); }
a.pf-case:hover .pf-case__more span { transform: translateX(4px); }

/* ---------- Media side ---------- */
.pf-case__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(240px, 26vw, 360px);
}

/* phone mock */
.pf-phone {
  width: clamp(170px, 17vw, 224px);
  padding: 9px;
  background: var(--color-ink);
  border-radius: 38px;
  box-shadow: 0 40px 70px -34px rgba(10, 10, 8, 0.55);
}
.pf-phone__screen {
  position: relative; overflow: hidden;
  border-radius: 30px;
  background: var(--color-ink-elevated);
}
.pf-phone__screen img { width: 100%; height: auto; display: block; }

/* browser mock */
.pf-browser {
  width: min(100%, 460px);
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 40px 70px -40px rgba(10, 10, 8, 0.36);
}
.pf-browser__bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  background: var(--color-ink);
}
.pf-browser__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.pf-browser__url {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
}
.pf-browser__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pf-browser__shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  display: block;
}
/* The Drouin screenshot has its content centered with even margins on both
   sides, so a left-aligned crop leaves a lopsided gutter. Center it instead. */
#drouin-ti360 .pf-browser__shot img { object-position: top center; }
#emma .pf-browser__shot img { object-position: top center; }

/* =============================================================
   ENGAGEMENT KEY — a quiet horizontal strip, not a panel.
   docs/ui-guidelines.md → "Quiet strip: glass panel, md radius,
   hairline border — one restrained row for supporting facts."
   It classifies the work below; it must not compete with it, so
   it stays ~1/3 the height of a project card and recedes.
   ============================================================= */
/* Five ink cards, deliberately short. Ink so the key reads as a
   distinct register from the paper project cards below it, and so
   the accent dots — the thing that carries meaning — actually sing.
   docs/ui-guidelines.md → "Ink cards: ink surface, light border
   rgba(255,255,255,0.08)"; accents as signals, not decoration. */
.pf-key-group { margin: 0 0 var(--space-7); }
.pf-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  text-align: left;
}
.pf-key__item {
  position: relative; overflow: clip;
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  background: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  transition: border-color 0.3s var(--ease);
}
/* …and the accent bleeding down into the card behind the label, so the
   ink isn't a flat rectangle. Kept low-opacity: atmosphere, not fill. */
.pf-key__item::before {
  content: ""; position: absolute; z-index: 0;
  top: -58%; left: -18%;
  width: 90%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--pf-key-accent, var(--color-secondary-green)) 30%, transparent),
    transparent 70%);
  filter: blur(16px);
}
.pf-key__term { position: relative; z-index: 1; }
.pf-key__item:hover { border-color: rgba(255, 255, 255, 0.18); }

.pf-key__term {
  display: flex; align-items: baseline; gap: 0.5em;
  font-family: var(--font-title); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-on-dark);
  margin: 0;
}
.pf-key__term::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
  transform: translateY(-1px);
  background: var(--pf-key-accent, var(--color-secondary-green));
}
.pf-key-dots { display: none; }

/* ---------- Honest note ---------- */
.pf-note {
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  max-width: 34ch;
  margin: var(--space-8) auto 0;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .pf-key {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-2);
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pf-key::-webkit-scrollbar { display: none; }
  .pf-key__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .pf-key-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: var(--space-3);
  }
  .pf-key-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-ink-25);
    cursor: pointer;
    transition: width 0.22s var(--ease), background 0.22s var(--ease);
  }
  .pf-key-dot.is-active {
    width: 22px;
    background: var(--color-ink);
  }
  .pf-key-dot:focus-visible {
    outline: 2px solid var(--color-active);
    outline-offset: 3px;
  }
}

@media (max-width: 900px) {
  .pf-list { gap: var(--space-3); }
  .pf-case { grid-template-columns: 1fr; }
  .pf-case--flip .pf-case__media { order: 0; }
  .pf-case__media { min-height: 0; margin-top: var(--space-4); }
  .pf-case__glow,
  .pf-case--flip .pf-case__glow { right: -20%; left: auto; top: -30%; width: 70%; }
}

@media (max-width: 560px) {
  .pf-section { padding-top: var(--space-5); }
  .pf .page-hero__title { font-size: clamp(2.75rem, 9vw, 3rem); }
  /* the three metrics stay on ONE row — they scale down rather than wrap,
     so a card never reads as 2 + 1 orphan */
  .pf-case__metrics { gap: 0.625rem; }
  .pf-metric__value {
    /* floor low enough that the longest word value ("Inherited")
       still fits a third of a 320px card */
    font-size: clamp(0.875rem, 4vw, 1.25rem);
    letter-spacing: -0.02em;
  }
  .pf-metric__label {
    font-size: clamp(0.5rem, 2.5vw, 0.6875rem);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  /* a longer value ("iOS & Android") wraps to a second line within its
     own column instead of overflowing into the next metric */
  .pf-metric__value { white-space: normal; }

}


/* ---------- Floating contact button (bottom-right) ---------- */
.pf-float {
  position: fixed;
  right: var(--gutter);
  bottom: var(--space-5);
  z-index: 50;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pf-float.is-hidden {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
@media (max-width: 640px) {
  .pf-float { right: var(--space-3); bottom: var(--space-3); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-float, .pf-case__glow::after { transition: none; }
}