/* =======================================================================
   Pawfect Dogcare — base layout chrome
   Header, footer, language switch, theme toggle, container, links,
   typography defaults. Section/component styling lives in pawfect.css.
   ======================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light dark;
  /* Prevent horizontal overscroll bounce on iOS — the carousel /
     hero use full-bleed widths, and a bounce there exposes empty
     gutter that reads as broken. */
  overscroll-behavior-x: none;
  /* Disable iOS's automatic text-size adjustment on orientation
     change so the type stays at the size we shipped. */
  -webkit-text-size-adjust: 100%;
  /* Smooth scrolling for in-page anchor jumps (the "Konzept lesen"
     link in the hero, etc.). Respects prefers-reduced-motion. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* View Transitions API: scope the cross-fade to <main> so the
   sticky header and the footer stay put across navigations.
   Giving header / main / footer their own view-transition-names
   makes the API treat each as a distinct group: only the main
   group runs the fade animation, the header + footer groups
   default to "no animation" because we never declare one for
   them, and they appear continuous between old and new view. */
.pf-header { view-transition-name: pf-header; }
main       { view-transition-name: pf-main; }
.pf-footer { view-transition-name: pf-footer; }

::view-transition-old(pf-main) {
  animation: pf-view-fade-out 160ms var(--pf-ease) both;
}
::view-transition-new(pf-main) {
  animation: pf-view-fade-in 240ms var(--pf-ease-out) both;
}
@keyframes pf-view-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes pf-view-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] { color-scheme: dark; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--pf-font-body);
  font-size:   var(--pf-text-base);
  line-height: var(--pf-leading-normal);
  color: var(--pf-ink-900);
  background: var(--pf-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  /* No auto Bindestriche / Trennstriche anywhere in body copy —
     Julia explicitly does not want line-break hyphens on this
     site. CSS `hyphens` is the read side of the browser's
     hyphenation engine; turning it off here suppresses
     auto-insertion in every block-level element. */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  /* touch-action: manipulation kills the iOS double-tap-to-zoom
     gesture without touching single-tap latency. Paired with the
     viewport meta (user-scalable=no) and the gesture-event
     blockers in pawfect.js, this fully suppresses pinch + double
     tap zoom on phones — iOS Safari ignores user-scalable=no on
     its own, so the CSS + JS belt-and-braces is required. */
  touch-action: manipulation;
  transition: background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}

h1, h2, h3, h4 {
  font-family: var(--pf-font-display);
  font-weight: 460;
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-leading-tight);
  margin: 0;
  color: var(--pf-ink-900);
}
h1 { font-size: var(--pf-text-hero); }
h2 { font-size: var(--pf-text-3xl); }
h3 { font-size: var(--pf-text-xl); }
h4 { font-size: var(--pf-text-md); }
p  { margin: 0; }
a  { color: var(--pf-rust-700); text-decoration: none; transition: color var(--pf-dur) var(--pf-ease); }
a:hover { color: var(--pf-rust-500); }
[data-theme="dark"] a { color: var(--pf-rust-300); }
[data-theme="dark"] a:hover { color: var(--pf-rust-200); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ── Container ─────────────────────────────────────────────────────── */
.pf-container {
  width: 100%;
  max-width: var(--pf-page-max);
  margin: 0 auto;
  padding-inline: var(--pf-gutter);
}

/* ── Header ────────────────────────────────────────────────────────── */
.pf-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav tools";
  align-items: center;
  gap: var(--pf-5);
  padding: var(--pf-4) var(--pf-gutter);
  background: color-mix(in srgb, var(--pf-bg) 80%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--pf-border);
}
.pf-header > .pf-brand { grid-area: brand; }
.pf-header > .pf-nav   { grid-area: nav; }
.pf-header__tools      { grid-area: tools; }

.pf-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-3);
  color: var(--pf-ink-900);
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-lg);
  letter-spacing: var(--pf-tracking-display);
}
.pf-brand:hover { color: var(--pf-ink-900); }
.pf-brand__mark {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--pf-r-md);
  background: var(--pf-bg);
  display: grid; place-items: center;
  color: var(--pf-rust-700);
  box-shadow: var(--pf-glass-shadow);
  overflow: visible;
  flex-shrink: 0;
}
.pf-brand__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 2px;
}
[data-theme="dark"] .pf-brand__logo { filter: brightness(1.05) contrast(0.95); }
/* Small paw badge floating bottom-right of the logo mark — keeps
   the paw glyph in the lockup without competing with the wordmark
   logo, and adds the autumn rust accent at a tiny scale. */
.pf-brand__paw {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--pf-rust-500);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px -2px rgba(184, 90, 54, 0.55);
}
.pf-brand__text {
  /* Force the wordmark and subtitle to stay on a single line each.
     "Pawfect Dogcare" must never wrap to two rows, even on the
     narrowest phone — that's been the recurring breakage on
     mobile. */
  display: block;
  white-space: nowrap;
  line-height: 1.1;
}
.pf-brand__text small {
  display: block;
  white-space: nowrap;
  font-family: var(--pf-font-body);
  font-size: 10px;
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-ink-500);
  margin-top: 2px;
}

.pf-nav {
  display: flex;
  justify-content: center;
  gap: var(--pf-3);
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
}
/* Nav row: icon + body (title + description). Description stays
   invisible on desktop unless the row is hovered, at which point a
   CSS-only tooltip appears below. The burger panel on mobile
   strips the tooltip behaviour and reveals the description inline. */
.pf-nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  color: inherit;
  padding: var(--pf-2) var(--pf-3);
  border-radius: var(--pf-r-pill);
  transition: background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}
.pf-nav__item:hover { color: var(--pf-ink-900); background: var(--pf-bg-soft); }
.pf-nav__item[aria-current="page"] {
  color: var(--pf-rust-700);
  background: var(--pf-rust-50);
}
[data-theme="dark"] .pf-nav__item[aria-current="page"] {
  color: var(--pf-rust-200);
  background: rgba(184, 90, 54, 0.18);
}
.pf-nav__ico {
  display: inline-flex;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  color: var(--pf-rust-700);
  flex-shrink: 0;
}
[data-theme="dark"] .pf-nav__ico { color: var(--pf-rust-300); }
.pf-nav__body { display: inline-flex; flex-direction: column; line-height: 1.2; }
.pf-nav__title { font-weight: 500; }
/* Desktop: description is the tooltip body. Hidden, lifted into
   place on hover with a small fade-in. */
.pf-nav__desc {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  padding: 6px 10px;
  background: var(--pf-ink-900);
  color: var(--pf-cream-50);
  font-size: 11px;
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--pf-r-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pf-dur) var(--pf-ease), transform var(--pf-dur) var(--pf-ease);
  z-index: 60;
  box-shadow: 0 8px 24px -8px rgba(58, 32, 18, 0.4);
}
.pf-nav__desc::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px; height: 8px;
  background: var(--pf-ink-900);
}
.pf-nav__item:hover .pf-nav__desc,
.pf-nav__item:focus-visible .pf-nav__desc {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme="dark"] .pf-nav__desc { background: var(--pf-cream-100); color: var(--pf-ink-900); }
[data-theme="dark"] .pf-nav__desc::before { background: var(--pf-cream-100); }

.pf-header__tools {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
}

/* Language switcher pill */
.pf-lang {
  display: inline-flex;
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-pill);
  padding: 2px;
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
}
.pf-lang a {
  color: var(--pf-ink-500);
  padding: 4px 10px;
  border-radius: var(--pf-r-pill);
  transition: background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}
.pf-lang a[aria-current="true"] {
  color: var(--pf-ink-900);
  background: var(--pf-bg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Theme toggle */
.pf-theme-toggle {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--pf-r-pill);
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  color: var(--pf-ink-700);
  cursor: pointer;
  transition: background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}
.pf-theme-toggle:hover { color: var(--pf-ink-900); background: var(--pf-bg-strong); }
.pf-theme-toggle .pf-theme-toggle__sun  { display: none; }
.pf-theme-toggle .pf-theme-toggle__moon { display: grid; }
[data-theme="dark"] .pf-theme-toggle .pf-theme-toggle__sun  { display: grid; }
[data-theme="dark"] .pf-theme-toggle .pf-theme-toggle__moon { display: none; }

/* Glass pill — translucent CTA used for "Mein Bereich" in the
   header and any other "secondary glass" affordance. Mirrors the
   blur + warm-tint of the hero eyebrow pill so the two read as
   the same visual language. */
.pf-glass-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  padding: 6px 14px;
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--pf-r-pill);
  color: var(--pf-rust-700);
  background: color-mix(in srgb, var(--pf-rust-100) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-rust-300) 60%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition:
    transform var(--pf-dur-fast) var(--pf-ease),
    background var(--pf-dur) var(--pf-ease),
    color var(--pf-dur) var(--pf-ease);
}
.pf-glass-pill:hover {
  transform: translateY(-1px);
  color: var(--pf-rust-700);
  background: color-mix(in srgb, var(--pf-rust-200) 80%, transparent);
}
[data-theme="dark"] .pf-glass-pill {
  color: var(--pf-rust-200);
  background: color-mix(in srgb, var(--pf-rust-700) 35%, transparent);
  border-color: color-mix(in srgb, var(--pf-rust-500) 40%, transparent);
}
[data-theme="dark"] .pf-glass-pill:hover {
  color: var(--pf-rust-100);
  background: color-mix(in srgb, var(--pf-rust-600) 45%, transparent);
}

/* Hamburger + settings gear (mobile) */
.pf-burger,
.pf-settings-btn {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: var(--pf-r-pill);
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  color: var(--pf-ink-700);
  cursor: pointer;
}
.pf-settings-btn[aria-expanded="true"] {
  color: var(--pf-rust-700);
  background: var(--pf-rust-50);
}
[data-theme="dark"] .pf-settings-btn[aria-expanded="true"] {
  color: var(--pf-rust-200);
  background: rgba(184, 90, 54, 0.2);
}

/* Settings popover — mobile-only floating pill anchored under the
   gear button. Carries the lang switch + theme toggle that used
   to live in the bottom-right mobilebar. Animated cross-fade with
   a slight downward translate so it reads as opening from the
   gear icon. */
.pf-settings-pop {
  display: none;
  position: fixed;
  top: 76px;
  right: var(--pf-gutter);
  z-index: 59;
  padding: 8px;
  background: color-mix(in srgb, var(--pf-cream-50) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-rust-300) 35%, transparent);
  border-radius: var(--pf-r-xl);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 32px -12px rgba(58, 32, 18, 0.25);
  flex-direction: column;
  align-items: center;
  gap: var(--pf-2);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition: opacity 200ms var(--pf-ease), transform 200ms var(--pf-ease-out), visibility 0s linear 200ms;
}
[data-theme="dark"] .pf-settings-pop {
  background: color-mix(in srgb, var(--pf-cream-200) 80%, transparent);
  border-color: color-mix(in srgb, var(--pf-rust-500) 30%, transparent);
}
.pf-settings-pop[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 200ms var(--pf-ease), transform 200ms var(--pf-ease-out), visibility 0s linear 0s;
}
.pf-settings-pop .pf-lang {
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 2px;
}
.pf-settings-pop .pf-lang a { padding: 4px 10px; }
.pf-settings-pop .pf-theme-toggle { background: transparent; border: none; }


/* ── Podcast dock ────────────────────────────────────────────────────
   Floating Spotify-branded FAB that opens a slide-up panel with
   the Hundekompass episode embedded. Lives at the document root
   (outside <main>), so an htmx hx-boost swap leaves the iframe
   undisturbed and the audio keeps playing while the visitor
   navigates between konzept / team / preise / etc.
   ----------------------------------------------------------------- */
.pf-podcast {
  position: fixed;
  right: max(var(--pf-5), env(safe-area-inset-right, 0px));
  bottom: max(var(--pf-5), env(safe-area-inset-bottom, 0px));
  z-index: 70;
}
.pf-podcast__fab {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  padding: 12px 18px;
  background: #1db954;
  color: #fff;
  border: none;
  border-radius: var(--pf-r-pill);
  font-size: var(--pf-text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    0 10px 28px -10px rgba(29, 185, 84, 0.6),
    0 1px 0 0 rgba(255,255,255,0.25) inset;
  transition: transform var(--pf-dur-fast) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease);
}
.pf-podcast__fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -10px rgba(29, 185, 84, 0.75); }
.pf-podcast__fab[data-open="true"] { background: var(--pf-ink-700); }
[data-theme="dark"] .pf-podcast__fab[data-open="true"] { background: var(--pf-ink-300); }
.pf-podcast__fab-text { white-space: nowrap; }

/* Slide-up panel: hidden by default below the viewport, transitions
   into place when [data-open="true"]. Uses transform so it stays
   hardware-accelerated. */
.pf-podcast__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--pf-3));
  width: clamp(280px, 92vw, 420px);
  padding: var(--pf-4);
  background: var(--pf-bg);
  border: 1px solid var(--pf-border-strong);
  border-radius: var(--pf-r-xl);
  box-shadow:
    0 24px 56px -12px rgba(58, 32, 18, 0.45),
    0 2px 0 0 rgba(255,255,255,0.4) inset;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 360ms var(--pf-ease-out),
    opacity 300ms var(--pf-ease-out);
  transform-origin: bottom right;
}
[data-theme="dark"] .pf-podcast__panel {
  box-shadow:
    0 24px 56px -12px rgba(0, 0, 0, 0.65),
    0 1px 0 0 rgba(255,255,255,0.05) inset;
}
.pf-podcast[data-open="true"] .pf-podcast__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.pf-podcast__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pf-3);
  margin-bottom: var(--pf-3);
}
.pf-podcast__title {
  display: block;
  font-family: var(--pf-font-display);
  font-size: var(--pf-text-md);
  color: var(--pf-ink-900);
}
.pf-podcast__sub {
  display: block;
  font-size: 11px;
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-ink-500);
  margin-top: 2px;
}
.pf-podcast__close {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pf-bg-soft);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-r-pill);
  color: var(--pf-ink-700);
  cursor: pointer;
  flex-shrink: 0;
}
.pf-podcast__frame {
  width: 100%;
  border: 0;
  border-radius: var(--pf-r-md);
  display: block;
}

/* Mobile podcast dock keeps its bottom-right anchor; without the
   mobilebar there is no neighbour to clear, so the FAB sits at
   the safe-area-inset corner with a compact icon-only button. */
@media (max-width: 880px) {
  .pf-podcast__fab-text { display: none; }
  .pf-podcast__fab { padding: 14px; }
}

/* ── Footer ────────────────────────────────────────────────────────── */
.pf-footer {
  margin-top: var(--pf-11);
  background: var(--pf-bg-soft);
  border-top: 1px solid var(--pf-border);
}
.pf-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr) 1fr;
  gap: var(--pf-8);
  padding-block: var(--pf-9) var(--pf-7);
}
.pf-footer__brand .pf-brand { margin-bottom: var(--pf-4); }
.pf-footer__lede {
  font-size: var(--pf-text-sm);
  color: var(--pf-ink-700);
  max-width: 28ch;
  line-height: 1.55;
}
.pf-footer__col h4 {
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-xs);
  letter-spacing: var(--pf-tracking-wide);
  text-transform: uppercase;
  color: var(--pf-ink-500);
  margin-bottom: var(--pf-4);
}
.pf-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--pf-2);
  font-size: var(--pf-text-sm);
}
.pf-footer__col a { color: var(--pf-ink-700); }
.pf-footer__col a:hover { color: var(--pf-rust-600); }
[data-theme="dark"] .pf-footer__col a { color: var(--pf-ink-700); }

.pf-social {
  display: inline-flex;
  gap: var(--pf-2);
}
.pf-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--pf-r-pill);
  background: var(--pf-bg);
  border: 1px solid var(--pf-border);
  color: var(--pf-ink-700);
  transition: transform var(--pf-dur) var(--pf-ease), background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}
.pf-social a:hover {
  transform: translateY(-2px);
  background: var(--pf-rust-500);
  color: #fff;
}

.pf-footer__bottom {
  border-top: 1px solid var(--pf-border);
  padding-block: var(--pf-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pf-6);
  font-size: var(--pf-text-xs);
  color: var(--pf-ink-500);
  flex-wrap: wrap;
}

/* The trademark row inside the burger drop-down is mobile-only;
   on desktop the page footer carries the lockup. Use the doubled
   class selector to outrank the generic .hb-trademark rule below
   that sets display: inline-flex — without this bump, the
   trademark leaked into the desktop horizontal nav bar. */
.pf-nav__trademark.hb-trademark { display: none; }
@media (max-width: 880px) {
  .pf-nav__trademark.hb-trademark { display: inline-flex; }
}

/* HB Labs "Crafted by" trademark — locked to Inter via tokens so it
   reads as HB Labs regardless of the page's display family. */
.hb-trademark {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-2);
  font-family: var(--hb-font-sans);
  font-size: var(--pf-text-xs);
  letter-spacing: 0.04em;
  color: var(--pf-ink-500);
}
.hb-trademark:hover { color: var(--pf-ink-900); }
.hb-trademark__logo { height: 16px; width: auto; }
.hb-trademark__name {
  font-family: var(--hb-font-sans);
  font-weight: 500;
  color: var(--pf-ink-700);
  letter-spacing: 0.02em;
}
.hb-trademark:hover .hb-trademark__name { color: var(--pf-ink-900); }
[data-theme="dark"] .hb-trademark__name { color: var(--pf-ink-700); }
[data-theme="dark"] .hb-trademark:hover .hb-trademark__name { color: var(--pf-ink-900); }
.hb-trademark__logo--light { display: inline-block; }
.hb-trademark__logo--dark  { display: none; }
[data-theme="dark"] .hb-trademark__logo--light { display: none; }
[data-theme="dark"] .hb-trademark__logo--dark  { display: inline-block; }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  /* Mobile chrome v3 — three rules:
       1. The header keeps the brand on the left (single line) and
          the burger on the right. Nothing else. The Mein Bereich
          glass pill rides along on the same row when it fits.
       2. Lang switch + theme toggle drop out of the header and
          render as a separate floating bar pinned to the bottom
          centre of the screen. Always visible, always reachable.
       3. The primary nav slides down from the burger button. */
  .pf-header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand tools tools";
    padding-block: var(--pf-3);
    gap: var(--pf-3);
  }
  .pf-header > .pf-nav { grid-area: unset; }
  .pf-header__tools {
    justify-content: flex-end;
    width: 100%;
  }
  /* Mobile-only: hide everything in the tools row except the
     Mein Bereich CTA and the burger. Lang + theme migrate to the
     floating bottom bar (.pf-mobilebar). */
  .pf-header__tools .pf-lang,
  .pf-header__tools .pf-theme-toggle,
  .pf-header__cta { display: none; }
  /* Mobile chrome surfaces lang + theme via the gear popover,
     not inline in the header. */
  .pf-settings-btn { display: inline-flex; }
  .pf-settings-pop { display: flex; }
  /* Burger drop-down: vertical list of full-width items with the
     icon, title and description all visible (no tooltip on mobile
     — the description is part of the row). */
  .pf-nav__item {
    width: 100%;
    border-radius: var(--pf-r-md);
    padding: var(--pf-3) var(--pf-4);
    gap: var(--pf-3);
  }
  .pf-nav__desc {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    white-space: normal;
    padding: 0;
    background: transparent;
    color: var(--pf-ink-500);
    text-transform: none;
    font-size: var(--pf-text-xs);
    letter-spacing: 0;
    box-shadow: none;
    font-weight: 400;
  }
  /* Critical override — without this, tapping an item triggers
     :focus-visible, which inherited the desktop tooltip transform
     (translateX(-50%)) and slid the description halfway off to
     the left. Forcing transform: none in every state keeps the
     description in place on mobile. */
  .pf-nav__item:hover .pf-nav__desc,
  .pf-nav__item:focus-visible .pf-nav__desc,
  .pf-nav__item:active .pf-nav__desc {
    transform: none;
    opacity: 1;
  }
  .pf-nav__desc::before { display: none; }
  /* Anchor both title and description to the start so a focused
     row keeps the same alignment as an idle one. */
  .pf-nav__body { align-items: flex-start; }
  /* Animated burger drop-down. We keep display: flex always so the
     transition has something to animate against; visibility +
     opacity + transform gate the visible state. max-height jumps
     stop the panel from intercepting clicks when closed. */
  .pf-nav {
    display: flex;
    position: absolute; left: 0; right: 0; top: 100%;
    background: color-mix(in srgb, var(--pf-bg) 96%, transparent);
    border-bottom: 1px solid var(--pf-border);
    padding: var(--pf-4) var(--pf-gutter);
    flex-direction: column;
    align-items: stretch;
    gap: var(--pf-2);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    max-height: 0;
    overflow: hidden;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition:
      opacity 220ms var(--pf-ease),
      transform 280ms var(--pf-ease-out),
      max-height 320ms var(--pf-ease-out),
      visibility 0s linear 320ms;
  }
  .pf-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 70vh;
    transition:
      opacity 220ms var(--pf-ease),
      transform 280ms var(--pf-ease-out),
      max-height 320ms var(--pf-ease-out),
      visibility 0s linear 0s;
  }
  /* Stagger each row sliding in so the menu feels like it
     unfolds. Increasing delays per row; the parent's opacity
     gate the whole thing until [data-open]. */
  .pf-nav[data-open="true"] .pf-nav__item {
    animation: pf-nav-row 320ms var(--pf-ease-out) both;
  }
  .pf-nav[data-open="true"] .pf-nav__item:nth-child(1) { animation-delay: 40ms; }
  .pf-nav[data-open="true"] .pf-nav__item:nth-child(2) { animation-delay: 80ms; }
  .pf-nav[data-open="true"] .pf-nav__item:nth-child(3) { animation-delay: 120ms; }
  .pf-nav[data-open="true"] .pf-nav__item:nth-child(4) { animation-delay: 160ms; }
  .pf-nav[data-open="true"] .pf-nav__item:nth-child(5) { animation-delay: 200ms; }
  @keyframes pf-nav-row {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pf-nav, .pf-nav__item { transition: none !important; animation: none !important; }
  }
  /* HB Labs trademark row inside the burger drop-down. Sits at
     the bottom of the panel, separated from the nav items by a
     thin divider. Stays in the same Inter wordmark + mono lockup
     as the page footer for visual continuity. */
  .pf-nav__trademark {
    margin-top: var(--pf-3);
    padding-top: var(--pf-4);
    border-top: 1px solid var(--pf-border);
    justify-content: center;
    width: 100%;
  }
  .pf-burger { display: inline-flex; }
  .pf-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--pf-6); }
  .pf-footer__brand { grid-column: 1 / -1; }
  .pf-mobilebar { display: inline-flex; }
}
@media (max-width: 520px) {
  .pf-footer__inner { grid-template-columns: 1fr; }
  .pf-footer__bottom { justify-content: center; text-align: center; }
  .pf-brand { font-size: var(--pf-text-md); }
}