:root {
  --pf-hero-logo-min: 240px;
  --pf-hero-logo-fluid: 42vw;
  --pf-hero-logo-max: 720px;

  --pf-nav-logo-min: 132px;
  --pf-nav-logo-fluid: 18vw;
  --pf-nav-logo-max: 280px;

  --pf-mark-min: 32px;
  --pf-mark-fluid: 5vw;
  --pf-mark-max: 72px;
}

.pf-hero-logo {
  display: block;
  width: clamp(var(--pf-hero-logo-min), var(--pf-hero-logo-fluid), var(--pf-hero-logo-max));
  height: auto;
}

.pf-nav-logo {
  display: block;
  width: clamp(var(--pf-nav-logo-min), var(--pf-nav-logo-fluid), var(--pf-nav-logo-max));
  height: auto;
}

.pf-mark {
  display: block;
  width: clamp(var(--pf-mark-min), var(--pf-mark-fluid), var(--pf-mark-max));
  height: auto;
}

/* Optional: useful when the transparent logo sits on dark hero artwork */
.pf-logo-safe-zone {
  padding: clamp(16px, 4vw, 56px);
}