/* ============================================================
   HPM Consult — Brand Tokens & Global Styles
   ============================================================ */

/* Lokal gehostete Google Fonts (DSGVO: kein Request an Google-Server).
   Variable Fonts — dieselbe Datei deckt alle deklarierten Schnitte ab. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand colors */
  --hpm-red: #C7001C;
  --hpm-red-dark: #9a0015;
  --hpm-red-light: #FAE6E9;
  --hpm-grey: #616464;
  --hpm-grey-light: #F4F4F4;
  --hpm-grey-border: #E5E5E5;
  --hpm-dark: #1A1A1A;
  --hpm-white: #FFFFFF;

  /* Typography */
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale (8pt base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Section padding */
  --section-py: clamp(80px, 10vw, 128px);
  --container-px: clamp(20px, 5vw, 64px);
  --container-max: 1320px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
}

/* ============================================================
   Reset & base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--hpm-dark);
  background: var(--hpm-white);
  font-weight: 400;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--hpm-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 6vw, 76px); }
h2 { font-size: clamp(32px, 4.2vw, 56px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hpm-red);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--hpm-red);
}

.lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--hpm-grey);
}

/* ============================================================
   Layout
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.section { padding: var(--section-py) 0; }
.section--tight { padding: calc(var(--section-py) * 0.6) 0; }
.section--grey { background: var(--hpm-grey-light); }
.section--dark { background: var(--hpm-grey-light); color: var(--hpm-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--hpm-dark); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.btn .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.btn:hover .arrow { transform: translateX(4px); }

/* Shimmer Button (Primary CTA) */
.btn--primary {
  color: var(--hpm-white);
  background: linear-gradient(135deg, var(--hpm-red) 0%, var(--hpm-red-dark) 100%);
  box-shadow: 0 6px 18px -6px rgba(199, 0, 28, 0.5);
}

.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(250, 230, 233, 0.0) 20%,
    rgba(250, 230, 233, 0.45) 50%,
    rgba(250, 230, 233, 0.0) 80%,
    transparent 100%
  );
  animation: shimmer 3.2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  60% { left: 140%; }
  100% { left: 140%; }
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(199, 0, 28, 0.6);
}

.btn--secondary {
  color: var(--hpm-dark);
  background: transparent;
  border: 1.5px solid var(--hpm-dark);
}

.btn--secondary:hover {
  background: var(--hpm-dark);
  color: var(--hpm-white);
}

.btn--ghost-light {
  color: var(--hpm-white);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn--ghost-light:hover {
  background: var(--hpm-white);
  color: var(--hpm-dark);
  border-color: var(--hpm-white);
}

.btn--sm { padding: 12px 20px; font-size: 12px; }

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  padding: 20px 0;
  box-sizing: border-box;
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  padding: 12px 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--hpm-grey);
  letter-spacing: -0.02em;
}

.logo__mark {
  font-size: 28px;
  line-height: 1;
  color: var(--hpm-grey);
}

.logo__mark .accent { color: var(--hpm-red); }

.logo__sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hpm-grey);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav__link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--hpm-grey);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s ease;
}

.nav__link:hover { color: var(--hpm-red); }

.nav__link.is-active { color: var(--hpm-dark); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--hpm-red);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--hpm-grey);
}

.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  color: var(--hpm-grey);
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}

.lang-switch__btn.is-active {
  color: var(--hpm-dark);
  opacity: 1;
}

.lang-switch__sep {
  color: var(--hpm-grey-border);
  margin: 0 2px;
}

.nav__menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--hpm-dark);
}

/* Cloned CTA only appears inside the open mobile dropdown */
.nav__cta-mobile { display: none; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--hpm-dark);
  overflow: hidden;
  padding: 140px 0 80px;
  background: #f1efec;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1428515613728-6b4607e44363?w=1920&q=85");
  background-size: cover;
  background-position: center;
  filter: brightness(1.22) saturate(0.95);
  z-index: -2;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(248,247,245,0.95) 0%, rgba(248,247,245,0.82) 45%, rgba(248,247,245,0.55) 100%),
    linear-gradient(180deg, rgba(248,247,245,0.55) 0%, rgba(248,247,245,0.35) 40%, rgba(248,247,245,0.75) 100%),
    radial-gradient(ellipse at 78% 28%, rgba(199, 0, 28, 0.10), transparent 60%);
  z-index: -1;
}

.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(20,20,20,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  z-index: -1;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}

.hero__inner {
  position: relative;
  max-width: 1080px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border: 1px solid rgba(20,20,20,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
  position: relative;
  overflow: hidden;
}

.hero__badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hpm-red);
  box-shadow: 0 0 0 4px rgba(199,0,28,0.25);
}

/* Animated shiny text */
.shiny-text {
  background: linear-gradient(
    110deg,
    rgba(20,20,20,0.78) 30%,
    rgba(20,20,20,1) 50%,
    rgba(20,20,20,0.78) 70%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shiny 5s linear infinite;
}

@keyframes shiny {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.hero h1 {
  color: var(--hpm-dark);
  font-size: clamp(44px, 6.8vw, 84px);
  line-height: 1.05;
}

.hero h1 .rotate-wrap {
  display: inline-block;
  position: relative;
  min-width: 1ch;
}

.hero h1 .rotate-word {
  display: inline-block;
  color: var(--hpm-red);
  position: relative;
}

.hero h1 .rotate-word::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 6px;
  background: linear-gradient(90deg, var(--hpm-red), transparent);
  opacity: 0.4;
}

.hero__sub {
  margin-top: var(--space-6);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.6;
  color: rgba(20,20,20,0.72);
  max-width: 640px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero__ctas .btn--secondary {
  color: var(--hpm-dark);
  border-color: rgba(20,20,20,0.32);
}

.hero__ctas .btn--secondary:hover {
  background: var(--hpm-white);
  color: var(--hpm-dark);
  border-color: var(--hpm-white);
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(20,20,20,0.55);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(20,20,20,0.5), transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--hpm-red));
  animation: scrollDown 2.2s infinite ease-in;
}

@keyframes scrollDown {
  0% { top: -40px; }
  100% { top: 40px; }
}

/* ============================================================
   Stats
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hpm-grey-border);
  border-bottom: 1px solid var(--hpm-grey-border);
}

.stat {
  padding: var(--space-8) var(--space-5);
  text-align: left;
  border-right: 1px solid var(--hpm-grey-border);
  position: relative;
}

.stat:last-child { border-right: none; }

.stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 5.5vw, 72px);
  line-height: 1;
  color: var(--hpm-dark);
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.stat__suffix { color: var(--hpm-red); }

.stat__label {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hpm-grey);
}

/* ============================================================
   Featured case study
   ============================================================ */
.case-study {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
.case-study__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 460px;
}
.case-study__media image-slot,
.case-study__media .fill-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.case-study__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
}
.case-study__block h3 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hpm-red);
  margin-bottom: 10px;
}
.case-study__block p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--hpm-dark);
}
.case-study__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--space-7);
  border-top: 1px solid var(--hpm-grey-border);
}
.case-study__metric {
  padding: var(--space-6) var(--space-5) 0 0;
  border-right: 1px solid var(--hpm-grey-border);
}
.case-study__metric:last-child { border-right: none; }
.case-study__metric-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hpm-dark);
}
.case-study__metric-label {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hpm-grey);
}
@media (max-width: 860px) {
  .case-study { grid-template-columns: 1fr; }
  .case-study__media { min-height: 300px; }
  .case-study__metrics { grid-template-columns: repeat(2, 1fr); }
  .case-study__metric:nth-child(2) { border-right: none; }
  .case-study__metric:nth-child(3),
  .case-study__metric:nth-child(4) { border-top: 1px solid var(--hpm-grey-border); padding-top: var(--space-5); }
}

/* ============================================================
   Section heads
   ============================================================ */
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-8);
}

.section-head__title { max-width: 560px; }
.section-head__title .eyebrow { margin-bottom: var(--space-4); }
.section-head__intro {
  max-width: 480px;
  color: var(--hpm-grey);
  font-size: 17px;
  line-height: 1.7;
}

/* ============================================================
   Services Bento Grid
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: var(--space-5);
}

.service-card {
  --spot-x: 50%;
  --spot-y: 50%;
  grid-column: span 2;
  background: var(--hpm-white);
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  isolation: isolate;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--spot-x) var(--spot-y),
    rgba(199, 0, 28, 0.10),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.service-card:hover::before { opacity: 1; }
.service-card:hover { border-color: rgba(199, 0, 28, 0.4); transform: translateY(-2px); }

/* First card spans wider as bento feature */
.service-card--feature {
  grid-column: span 3;
  grid-row: span 2;
  background: var(--hpm-grey-light);
  color: var(--hpm-dark);
  border-color: var(--hpm-grey-border);
  background-image:
    linear-gradient(180deg, rgba(244,244,244,0.62) 0%, rgba(244,244,244,0.90) 100%),
    url("https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=1200&q=80");
  background-size: cover;
  background-position: center;
}

.service-card--feature h3, .service-card--feature .service-card__desc { color: var(--hpm-dark); }
.service-card--feature .service-card__desc { color: var(--hpm-grey); }
.service-card--feature .service-card__num { color: var(--hpm-grey); }
.service-card--feature .service-card__icon { background: var(--hpm-red-light); color: var(--hpm-red); border-color: rgba(199,0,28,0.2); }

.service-card--wide { grid-column: span 3; }

.service-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.service-card__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--hpm-grey);
  opacity: 0.7;
}

.service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--hpm-red-light);
  border: 1px solid rgba(199,0,28,0.12);
  color: var(--hpm-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-card__desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--hpm-grey);
  max-width: 420px;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--hpm-red);
  margin-top: auto;
}

.service-card--feature .service-card__link { color: var(--hpm-dark); }

/* ============================================================
   References / Marquee
   ============================================================ */
.marquee {
  display: flex;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.marquee__row {
  display: flex;
  gap: var(--space-5);
  animation: marquee 50s linear infinite;
  flex-shrink: 0;
  padding-right: var(--space-5);
}

.marquee:hover .marquee__row { animation-play-state: paused; }

.marquee--reverse .marquee__row { animation-direction: reverse; animation-duration: 60s; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.marquee__item {
  width: 360px;
  height: 240px;
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: var(--hpm-grey-light);
}

.marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.marquee__item:hover img { transform: scale(1.05); }

.marquee__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
  color: var(--hpm-white);
}

.marquee__caption-cat {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}

.marquee__caption-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.marquee__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ============================================================
   Legacy Story
   ============================================================ */
.legacy {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}

.legacy__media {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hpm-grey-light);
}

.legacy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legacy__badge {
  position: absolute;
  left: -20px;
  bottom: 32px;
  background: var(--hpm-white);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-md);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.3);
  max-width: 240px;
}

.legacy__badge-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--hpm-red);
  line-height: 1;
  letter-spacing: -0.02em;
}

.legacy__badge-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hpm-grey);
  margin-top: 8px;
}

.legacy__body p {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--hpm-grey);
}

.legacy__body p + p { margin-top: var(--space-5); }

.legacy__body strong { color: var(--hpm-dark); font-weight: 600; }

.legacy__quote {
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 3px solid var(--hpm-red);
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--hpm-dark);
  letter-spacing: -0.01em;
}

.legacy__cite {
  display: block;
  margin-top: var(--space-4);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hpm-grey);
}

/* Text reveal effect (legacy) */
.reveal-text {
  background-image: linear-gradient(
    to right,
    var(--hpm-dark) 0%,
    var(--hpm-dark) var(--reveal, 0%),
    var(--hpm-grey-border) var(--reveal, 0%),
    var(--hpm-grey-border) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-image 0.05s linear;
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.testimonial {
  background: var(--hpm-white);
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}

.testimonial__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.7;
  color: var(--hpm-red);
  opacity: 0.15;
  font-style: italic;
}

.testimonial__quote {
  font-size: 17px;
  line-height: 1.65;
  color: var(--hpm-dark);
  flex: 1;
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hpm-grey-border);
}

.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hpm-grey-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--hpm-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.testimonial__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--hpm-dark);
  line-height: 1.3;
}

.testimonial__role {
  font-size: 13px;
  color: var(--hpm-grey);
}

/* ============================================================
   CTA Banner
   ============================================================ */
.cta-banner {
  position: relative;
  padding: var(--space-10) var(--container-px);
  background: var(--hpm-red-light);
  color: var(--hpm-dark);
  overflow: hidden;
  border-radius: var(--r-xl);
  margin: 0 var(--container-px);
}

.cta-banner__inner {
  position: relative;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.cta-banner__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(199,0,28,0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}

.cta-banner__glow {
  position: absolute;
  width: 600px; height: 600px;
  right: -200px; top: -200px;
  background: radial-gradient(circle, rgba(199,0,28,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.cta-banner h2 {
  color: var(--hpm-dark);
  font-size: clamp(34px, 4vw, 56px);
}

.cta-banner__sub {
  margin-top: var(--space-5);
  color: var(--hpm-grey);
  font-size: 18px;
}

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
}

.cta-banner__actions .btn { width: 100%; }

.cta-banner__contact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--hpm-grey);
  font-size: 14px;
}

.cta-banner__contact a {
  color: var(--hpm-red);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Secondary button inside the (now light) CTA banner */
.cta-banner .btn--ghost-light {
  color: var(--hpm-dark);
  border-color: rgba(20,20,20,0.28);
}
.cta-banner .btn--ghost-light:hover {
  background: var(--hpm-dark);
  color: var(--hpm-white);
  border-color: var(--hpm-dark);
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--hpm-white);
  border-top: 1px solid var(--hpm-grey-border);
  padding: var(--space-9) 0 var(--space-6);
}

.footer__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--hpm-dark);
  max-width: 18ch;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--hpm-grey-border);
  text-wrap: balance;
}
.footer__tagline .rotate-wrap { display: inline-block; position: relative; min-width: 1ch; }
.footer__tagline .rotate-word { display: inline-block; color: var(--hpm-red); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--hpm-grey-border);
}

.footer__col h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hpm-dark);
  margin-bottom: var(--space-5);
}

.footer__lead {
  margin-top: var(--space-5);
  font-size: 14.5px;
  color: var(--hpm-grey);
  line-height: 1.65;
  max-width: 320px;
}

.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: 10px; }
.footer__links a {
  font-size: 14.5px;
  color: var(--hpm-grey);
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--hpm-red); }

.footer__contact-line {
  font-size: 14.5px;
  color: var(--hpm-grey);
  margin-bottom: 8px;
}

.footer__contact-line strong { color: var(--hpm-dark); font-weight: 600; }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
  font-size: 13px;
  color: var(--hpm-grey);
}

.footer__legal {
  display: flex;
  gap: var(--space-5);
}

.footer__legal a { color: var(--hpm-grey); transition: color 0.2s; }
.footer__legal a:hover { color: var(--hpm-red); }

.footer__social {
  display: flex;
  gap: var(--space-3);
}

.footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hpm-grey-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hpm-grey);
  transition: all 0.2s;
}

.footer__social a:hover {
  background: var(--hpm-red);
  border-color: var(--hpm-red);
  color: var(--hpm-white);
}

/* ============================================================
   Blur Fade entrance
   ============================================================ */
.blur-fade {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.blur-fade.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ============================================================
   Page Hero (for sub-pages)
   ============================================================ */
.page-hero {
  position: relative;
  padding: 200px 0 var(--space-9);
  background: var(--hpm-grey-light);
  overflow: hidden;
  border-bottom: 1px solid var(--hpm-grey-border);
}

.page-hero__inner {
  position: relative;
  max-width: 880px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hpm-grey);
  margin-bottom: var(--space-5);
}

.breadcrumb a { color: var(--hpm-grey); }
.breadcrumb a:hover { color: var(--hpm-red); }
.breadcrumb__sep { color: var(--hpm-grey-border); }
.breadcrumb__current { color: var(--hpm-dark); }

.page-hero h1 {
  font-size: clamp(40px, 5vw, 64px);
}

.page-hero__sub {
  margin-top: var(--space-5);
  font-size: 19px;
  line-height: 1.6;
  color: var(--hpm-grey);
  max-width: 640px;
}

/* ============================================================
   Service detail (alternating rows)
   ============================================================ */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--hpm-grey-border);
}

.service-row:last-child { border-bottom: none; }

.service-row--reverse .service-row__media { order: 2; }

.service-row__media {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hpm-grey-light);
  position: relative;
}

.service-row__media img {
  width: 100%; height: 100%; object-fit: cover;
}

.service-row__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--hpm-red);
  margin-bottom: var(--space-3);
}

.service-row__body h2 { margin-bottom: var(--space-4); }

.service-row__body p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--hpm-grey);
  margin-bottom: var(--space-5);
}

.bullet-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-3);
}

.bullet-list li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  color: var(--hpm-dark);
}

.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 14px;
  height: 2px;
  background: var(--hpm-red);
}

.li-opt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid rgba(199, 0, 28, 0.35);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--hpm-red);
  vertical-align: 2px;
  white-space: nowrap;
}

/* ============================================================
   Projects
   ============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--hpm-grey-border);
}

.filter-bar__btn {
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--hpm-grey);
  border: 1px solid var(--hpm-grey-border);
  border-radius: 999px;
  transition: all 0.2s;
  background: var(--hpm-white);
}

.filter-bar__btn:hover {
  border-color: var(--hpm-dark);
  color: var(--hpm-dark);
}

.filter-bar__btn.is-active {
  background: var(--hpm-dark);
  color: var(--hpm-white);
  border-color: var(--hpm-dark);
}

.filter-bar__count {
  margin-left: 4px;
  opacity: 0.5;
  font-weight: 500;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.project-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: var(--hpm-grey-light);
  aspect-ratio: 4/5;
}

.project-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover img { transform: scale(1.06); }

.project-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  color: var(--hpm-white);
  gap: 6px;
}

.project-card__cat {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.project-card__title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.project-card__meta {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-top: 4px;
  display: flex;
  gap: var(--space-3);
}

.project-card__cta {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hpm-white);
  color: var(--hpm-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
}

.project-card:hover .project-card__cta {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   About page CEO block
   ============================================================ */
.ceo {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-8);
  align-items: center;
}

.ceo__media {
  aspect-ratio: 4/5;
  background: var(--hpm-grey-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
}

.ceo__media img { width: 100%; height: 100%; object-fit: cover; }

.ceo__name {
  font-size: clamp(32px, 3.4vw, 44px);
  margin-bottom: var(--space-3);
}

.ceo__role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hpm-red);
  margin-bottom: var(--space-5);
}

.ceo__bio p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--hpm-grey);
  margin-bottom: var(--space-4);
}

.ceo__links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Values cards */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.value-card {
  background: var(--hpm-white);
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
  padding: var(--space-8) var(--space-7);
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
}

.value-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hpm-red), rgba(199,0,28,0.15));
}

.value-card__big {
  position: absolute;
  top: var(--space-5);
  right: var(--space-6);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 84px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hpm-red-light);
  pointer-events: none;
}

.value-card__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hpm-red);
  position: relative;
}

.value-card h3 {
  margin: var(--space-6) 0 var(--space-4);
  font-size: 28px;
  position: relative;
}

.value-card p {
  color: var(--hpm-grey);
  font-size: 16.5px;
  line-height: 1.7;
  position: relative;
}

/* Memberships */
.memberships {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-7);
  background: var(--hpm-white);
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
}

.memberships__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--hpm-grey);
  padding: 12px 24px;
  border: 1px dashed var(--hpm-grey-border);
  border-radius: var(--r-sm);
}

/* ============================================================
   Contact form
   ============================================================ */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}

.contact__info {
  position: sticky;
  top: 120px;
}

.contact__info-item {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--hpm-grey-border);
}

.contact__info-item:last-of-type { border-bottom: none; }

.contact__info-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hpm-grey);
  margin-bottom: 6px;
}

.contact__info-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--hpm-dark);
  letter-spacing: -0.01em;
}

.contact__info-value a:hover { color: var(--hpm-red); }

/* Border Beam */
.beam-card {
  position: relative;
  background: var(--hpm-white);
  border-radius: var(--r-lg);
  padding: var(--space-7);
  overflow: hidden;
  isolation: isolate;
}

.beam-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  padding: 1.5px;
  background:
    conic-gradient(
      from var(--beam-angle, 0deg),
      transparent 0deg,
      transparent 270deg,
      var(--hpm-red) 320deg,
      var(--hpm-red-light) 360deg,
      transparent 360deg
    );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: beamRotate 8s linear infinite;
}

@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes beamRotate {
  0% { --beam-angle: 0deg; }
  100% { --beam-angle: 360deg; }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--full { grid-column: span 2; }

.form-field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hpm-grey);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 14px 16px;
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-sm);
  background: var(--hpm-white);
  color: var(--hpm-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--hpm-red);
  box-shadow: 0 0 0 4px rgba(199,0,28,0.08);
}

.form-field textarea { min-height: 140px; resize: vertical; }

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.form-consent {
  font-size: 13px;
  color: var(--hpm-grey);
  max-width: 380px;
  line-height: 1.5;
}

.form-consent a { color: var(--hpm-dark); text-decoration: underline; }

/* Honeypot — unsichtbar fuer Menschen (auch fuer Screenreader dank
   aria-hidden auf dem Wrapper), aber fuer simple Formular-Bots im DOM
   vorhanden und ausfuellbar. Kein display:none/visibility:hidden, da
   manche Bots das erkennen und das Feld dann korrekt leer lassen. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success {
  background: rgba(34,139,34,0.1);
  color: #1e6b1e;
  border: 1px solid rgba(34,139,34,0.25);
}
.form-status.is-error {
  background: var(--hpm-red-light);
  color: var(--hpm-red-dark);
  border: 1px solid rgba(199,0,28,0.25);
}

.map-placeholder {
  margin-top: var(--space-7);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hpm-grey-light);
  aspect-ratio: 16/9;
  position: relative;
  background-image:
    linear-gradient(45deg, var(--hpm-grey-border) 25%, transparent 25%),
    linear-gradient(-45deg, var(--hpm-grey-border) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--hpm-grey-border) 75%),
    linear-gradient(-45deg, transparent 75%, var(--hpm-grey-border) 75%);
  background-size: 32px 32px;
  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder__pin {
  background: var(--hpm-white);
  border: 1px solid var(--hpm-grey-border);
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--hpm-dark);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.map-placeholder__pin .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--hpm-red);
  box-shadow: 0 0 0 4px rgba(199,0,28,0.2);
}

/* Real embedded map */
.map-embed{
  margin-top: var(--space-7);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hpm-grey-border);
  aspect-ratio: 16/9;
  background: var(--hpm-grey-light);
}
.map-embed iframe{width:100%;height:100%;border:0;display:block;}

/* ============================================================
   Global reach map (animated pins)
   ============================================================ */
.globe{position:relative;background:var(--hpm-grey-light);border:1px solid var(--hpm-grey-border);border-radius:var(--r-xl);overflow:hidden;padding:clamp(40px,6vw,72px) clamp(20px,5vw,64px);}
.globe__head{text-align:center;max-width:680px;margin:0 auto clamp(24px,4vw,48px);position:relative;z-index:2;}
.globe__head .eyebrow{color:var(--hpm-red);}
.globe__head h2{color:var(--hpm-dark);margin-top:14px;}
.globe__head p{color:var(--hpm-grey);margin-top:16px;font-size:16.5px;line-height:1.6;}
.globe__map{position:relative;width:100%;max-width:1000px;margin:0 auto;}
.globe__map img{width:100%;height:auto;display:block;filter:grayscale(1) brightness(.75) contrast(1.1);opacity:.16;}
/* Europe-cropped map: same equirectangular source, zoomed to the European bounding box */
.globe__map--europe{aspect-ratio:44/15;}
.globe__map--europe .globe__canvas{position:absolute;inset:0;background:url("world-location-map.svg") no-repeat;background-size:818.18% 1200%;background-position:53.80% 20.61%;filter:grayscale(1) brightness(1.04) contrast(.97);opacity:.6;}
/* Worldwide row (cities shown below, not on the Europe map) */
.globe__worldwide{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;max-width:780px;margin:14px auto 0;position:relative;z-index:2;}
.globe__worldwide-label{font-family:var(--font-head,inherit);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--hpm-grey);}

/* Labeled project pins */
.globe__pin{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:2;cursor:default;}
.globe__pin:focus{outline:none;}
.globe__dot{position:relative;width:11px;height:11px;border-radius:50%;background:var(--hpm-red);box-shadow:0 0 9px rgba(199,0,28,.7);opacity:0;transform:scale(.2);transition:opacity .5s ease, transform .6s cubic-bezier(.2,1.25,.4,1);transition-delay:calc(var(--i,0)*36ms);}
.globe.is-revealed .globe__dot{opacity:1;transform:scale(1);}
.globe__dot::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%);}
.globe.is-revealed .globe__dot::after{animation:globePulse 2.6s ease-out infinite;animation-delay:calc(var(--i,0)*36ms + .55s);}
.globe__pin:hover,.globe__pin:focus-visible{z-index:20;}
.globe__pin:hover .globe__dot,.globe__pin:focus-visible .globe__dot{transform:scale(1.5);background:var(--hpm-red-dark);box-shadow:0 0 14px rgba(199,0,28,.55);}
/* Secondary pins — additional project locations, quieter so the anchor cities lead */
.globe__pin--sec{width:20px;height:20px;}
.globe__pin--sec .globe__dot{width:6px;height:6px;background:rgba(199,0,28,.62);box-shadow:0 0 5px rgba(199,0,28,.4);}
.globe__pin--sec .globe__dot::after{animation:none !important;}
.globe__pin--sec:hover .globe__dot,.globe__pin--sec:focus-visible .globe__dot{transform:scale(2);background:var(--hpm-red-dark);box-shadow:0 0 12px rgba(199,0,28,.55);}
/* Permanent label for anchor cities */
.globe__name{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--font-head,inherit);font-weight:600;font-size:12px;letter-spacing:.04em;color:var(--hpm-dark);opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--i,0)*36ms + .3s);pointer-events:none;}
.globe__pin--left .globe__name{left:auto;right:calc(100% + 6px);}
.globe.is-revealed .globe__name{opacity:1;}
/* Hover tooltip */
.globe__tip{position:absolute;top:calc(100% + 7px);left:50%;transform:translate(-50%,5px);min-width:140px;max-width:240px;background:#fff;color:var(--hpm-dark,#1a1a1a);border:1px solid var(--hpm-grey-border);border-radius:10px;padding:9px 13px;box-shadow:0 12px 30px rgba(20,20,20,.16);text-align:left;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:30;}
.globe__tip::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#fff;}
.globe__tip b{display:block;font-family:var(--font-head,inherit);font-weight:700;font-size:13.5px;line-height:1.3;}
.globe__tip span{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:rgba(20,20,20,.62);}
.globe__pin:hover .globe__tip,.globe__pin:focus-visible .globe__tip{opacity:1;transform:translate(-50%,0);}
/* City chips legend */
.globe__cities{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;max-width:780px;margin:clamp(28px,4vw,44px) auto 0;position:relative;z-index:2;}
.globe__chip{font-family:var(--font-head,inherit);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--hpm-grey);border:1px solid var(--hpm-grey-border);background:#fff;border-radius:999px;padding:6px 13px;white-space:nowrap;}
.globe__chip--intl{color:var(--hpm-red);border-color:rgba(199,0,28,.45);background:var(--hpm-red-light);}
@keyframes globePulse{0%{box-shadow:0 0 0 0 rgba(199,0,28,.5);}70%{box-shadow:0 0 0 13px rgba(199,0,28,0);}100%{box-shadow:0 0 0 0 rgba(199,0,28,0);}}
@media(prefers-reduced-motion:reduce){.globe__dot{transition:none;}.globe.is-revealed .globe__dot::after{animation:none;}}

/* ============================================================
   Project detail
   ============================================================ */
.project-detail {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.project-detail__media {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hpm-grey-light);
}

.project-detail__media img { width: 100%; height: 100%; object-fit: cover; }

.project-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-6);
  padding: var(--space-6);
  background: var(--hpm-grey-light);
  border-radius: var(--r-lg);
}

.project-meta__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hpm-grey);
  margin-bottom: 4px;
}

.project-meta__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--hpm-dark);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.project-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-md);
}

/* Image slot helpers (user-fillable, drag-and-drop) */
.fill-slot { display: block; width: 100%; height: 100%; }
image-slot.ref-card__media { aspect-ratio: 4 / 3; width: 100%; height: auto; }

/* ============================================================
   Client / Reference wall
   ============================================================ */
.bullet-list--2col {
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-6);
}

.pillar-detail {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--hpm-grey-border);
}
.pillar-detail:last-child { border-bottom: none; }

.pillar-detail__head {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-7);
}

.pillar-detail__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--hpm-red);
  margin-bottom: var(--space-4);
}

.pillar-detail__lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--hpm-grey);
}

.pillar-detail__media {
  aspect-ratio: 16/9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hpm-grey-light);
  margin-bottom: var(--space-7);
}
.pillar-detail__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   All-in-One — interactive dish (turnkey = many trades, one result)
   ============================================================ */
.aio { position: relative; background: #0a0a0b; cursor: default; }
.aio__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.aio__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,9,.74) 0%, rgba(8,8,9,0) 30%, rgba(8,8,9,0) 60%, rgba(8,8,9,.82) 100%),
    linear-gradient(90deg, rgba(8,8,9,.5) 0%, rgba(8,8,9,0) 38%);
}
/* intro — top-left */
.aio__intro { position: absolute; left: clamp(18px,3.2vw,34px); top: clamp(16px,3vw,30px); z-index: 6; max-width: 52%; }
.aio__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.66);
  display: inline-flex; align-items: center; gap: 10px;
}
.aio__eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--hpm-red); }
.aio__title {
  margin-top: 12px; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px,2.5vw,30px); line-height: 1.12; letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.aio__title b { color: var(--hpm-red); font-weight: 700; }

/* leader lines */
.aio__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.aio__line {
  fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.25; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1;
}
.aio.is-in .aio__line { animation: aioDraw .72s cubic-bezier(.45,0,.2,1) forwards; animation-delay: calc(var(--d) * 320ms + .15s); }
@keyframes aioDraw { to { stroke-dashoffset: 0; } }
.aio__line.is-hi { stroke: var(--hpm-red); stroke-width: 1.7; }

/* placed dots (on the spoon) */
.aio__node { position: absolute; z-index: 5; transform: translate(-50%, -50%); }
.aio__dot {
  position: relative; display: block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--hpm-red); box-shadow: 0 0 0 4px rgba(255,255,255,.16), 0 0 13px 2px rgba(199,0,28,.7);
  transform: scale(0); transition: transform .3s cubic-bezier(.2,1.3,.4,1), box-shadow .3s;
}
.aio.is-in .aio__dot { animation: aioPop .5s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: calc(var(--d) * 320ms + .55s); }
@keyframes aioPop { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.aio__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(199,0,28,.5); opacity: 0;
}
.aio.is-in .aio__dot::after { animation: aioPulse 2.8s ease-out infinite; animation-delay: calc(var(--d) * 320ms + 1.1s); opacity: 1; }
@keyframes aioPulse { 0%{box-shadow:0 0 0 0 rgba(199,0,28,.45);} 70%{box-shadow:0 0 0 15px rgba(199,0,28,0);} 100%{box-shadow:0 0 0 0 rgba(199,0,28,0);} }
.aio__node.is-hi .aio__dot { transform: scale(1.55); box-shadow: 0 0 0 5px rgba(255,255,255,.26), 0 0 20px 4px rgba(199,0,28,.9); }

/* outer labels */
.aio__label {
  position: absolute; z-index: 6; display: flex; align-items: baseline; gap: 8px;
  cursor: default; opacity: 0;
  -webkit-tap-highlight-color: transparent;
}
.aio.is-in .aio__label { animation: aioLab .55s ease forwards; animation-delay: calc(var(--d) * 320ms + .42s); }
@keyframes aioLab { from { opacity: 0; } to { opacity: 1; } }
.aio__label.dir-l { transform: translate(-100%, -50%); flex-direction: row-reverse; }
.aio__label.dir-r { transform: translate(0, -50%); }
.aio__label.dir-u { transform: translate(-50%, -100%); }
.aio__label-n {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em;
  color: var(--hpm-red);
}
.aio__label-t {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .01em;
  font-size: clamp(14px, 1.7vw, 18px); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.7);
  white-space: normal; max-width: 10em; line-height: 1.2;
}
.aio__label:hover .aio__label-t { color: #fff; }
.aio__label.is-hi .aio__label-t { color: #fff; }

/* thesis — bottom-right */
.aio__meta {
  position: absolute; right: clamp(18px,3.2vw,34px); bottom: clamp(16px,3vw,28px); z-index: 6;
  text-align: right; font-family: var(--font-display);
  color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.5;
}
.aio__meta b { display: block; color: #fff; font-size: clamp(16px,1.9vw,21px); letter-spacing: -.01em; text-transform: none; margin-top: 2px; }

@media (max-width: 680px) {
  .aio__intro { max-width: 66%; }
  .aio__label-t { font-size: 13.5px; }
  .aio__meta { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .aio__photo { animation: none; transform: scale(1.04); }
  .aio__line { stroke-dashoffset: 0 !important; animation: none !important; }
  .aio__dot { transform: scale(1) !important; animation: none !important; }
  .aio__dot::after { animation: none !important; opacity: 0 !important; }
  .aio__label { opacity: 1 !important; animation: none !important; }
}

.aio__sub {
  margin-top: 9px; font-family: var(--font-body); font-weight: 400;
  font-size: clamp(13px,1.5vw,15px); line-height: 1.45; color: rgba(255,255,255,.82); max-width: 26ch;
}
/* Light variant — for a light-background dish photo (dark text) */
.aio--light { background: #e9ece2; }
.aio--light .aio__eyebrow { color: var(--hpm-grey); }
.aio--light .aio__eyebrow::before { background: var(--hpm-red); }
.aio--light .aio__title,
.aio--light .aio__sub,
.aio--light .aio__label-t { color: var(--hpm-dark); text-shadow: 0 1px 9px rgba(255,255,255,.92), 0 0 3px rgba(255,255,255,.85); }
.aio--light .aio__title b { color: var(--hpm-red); }
.aio--light .aio__label-n { color: var(--hpm-red); }
.aio--light .aio__line { stroke: rgba(26,26,26,.5); }
.aio--light .aio__line.is-hi { stroke: var(--hpm-red); }
.aio--light .aio__meta { color: rgba(26,26,26,.62); text-shadow: 0 1px 9px rgba(255,255,255,.9); }
.aio--light .aio__meta b { color: var(--hpm-dark); }
.aio--light .aio__scrim {
  background:
    radial-gradient(130% 90% at 10% 14%, rgba(255,255,255,.6), rgba(255,255,255,0) 44%),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(255,255,255,.32));
}

/* Sector reference card (honest — client name + sector, no fabricated metrics) */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.ref-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hpm-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ref-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.28); border-color: rgba(199,0,28,0.35); }

.ref-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  background: var(--hpm-grey-light);
  overflow: hidden;
}
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.ref-card:hover .ref-card__media img { transform: scale(1.05); }

.ref-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ref-card__cat {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hpm-red);
}

.ref-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--hpm-dark);
}

.ref-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hpm-grey);
  flex: 1;
}

.ref-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--hpm-grey-border);
}

.ref-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.03em;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--hpm-red-light);
  color: var(--hpm-red);
  white-space: nowrap;
}

/* Client logo/name wall (homepage marquee replacement, text wordmarks) */
.client-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 0 var(--space-7);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--hpm-grey);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.7;
  transition: color 0.2s, opacity 0.2s;
}
.client-mark:hover { color: var(--hpm-red); opacity: 1; }

.marquee--text {
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee--text .marquee__row { gap: 0; animation-duration: 42s; }

/* ============================================================
   Client logo wall — real client logos
   ============================================================ */
.logo-wall{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:8px;}
.logo-wall__item{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--hpm-grey-border,#e7e4df);border-radius:12px;padding:26px 22px;min-height:118px;transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;}
.logo-wall__item:hover{border-color:rgba(199,0,28,.35);box-shadow:0 10px 30px rgba(20,20,20,.07);transform:translateY(-2px);}
.logo-wall__item img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s ease, opacity .3s ease;}
.logo-wall__item:hover img{filter:grayscale(0);opacity:1;}
.logo-wall__item--dual{gap:20px;}
.logo-wall__item--dual img{max-height:46px;}
@media(max-width:900px){.logo-wall{grid-template-columns:repeat(3,1fr);gap:14px;}.logo-wall__item{min-height:104px;padding:20px 16px;}}
@media(max-width:560px){.logo-wall{grid-template-columns:repeat(2,1fr);}.logo-wall__item img{max-height:52px;}}

/* Sector list (about / references summary) */
.sectors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hpm-grey-border);
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sector {
  background: var(--hpm-white);
  padding: var(--space-6);
}
.sector__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hpm-red);
  margin-bottom: var(--space-4);
}
.sector__clients { list-style: none; padding: 0; margin: 0; }
.sector__clients li {
  font-size: 15px;
  color: var(--hpm-dark);
  padding: 5px 0;
}

/* ============================================================
   Blog
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hpm-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0,0,0,0.3); }

.blog-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--hpm-grey-light); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }

.blog-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }

.blog-card__meta {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hpm-red);
}
.blog-card__meta .muted { color: var(--hpm-grey); }

.blog-card__title { font-size: 21px; line-height: 1.25; }
.blog-card__excerpt { font-size: 15px; color: var(--hpm-grey); line-height: 1.65; flex: 1; }

.blog-card__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--hpm-dark);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.blog-card__featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
}
.blog-card__featured .blog-card__media { aspect-ratio: auto; height: 100%; min-height: 300px; }
.blog-card__featured .blog-card__cover { height: 100%; }
.blog-card__featured .blog-card__media image-slot { width: 100%; height: 100%; }

.blog-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hpm-grey);
  padding: 4px 10px;
  border: 1px solid var(--hpm-grey-border);
  border-radius: 999px;
}
.blog-card a.blog-card__cover{display:block;overflow:hidden;}
.blog-card__cat{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hpm-red);}

/* ============================================================
   Article (blog post) reading layout
   ============================================================ */
.article{max-width:740px;margin:0 auto;}
.article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hpm-red);margin-bottom:20px;}
.article__meta .muted{color:var(--hpm-grey);}
.article__hero{margin:clamp(28px,4vw,44px) 0;border-radius:var(--r-lg,16px);overflow:hidden;background:var(--hpm-grey-light);aspect-ratio:16/9;}
.article__hero image-slot{display:block;width:100%;height:100%;}
.article__lede{font-size:clamp(19px,2.1vw,22px);line-height:1.6;color:var(--hpm-dark);font-weight:500;margin-bottom:1.1em;}
.article__body{font-size:17.5px;line-height:1.78;color:#33312e;}
.article__body p{margin-bottom:1.15em;text-wrap:pretty;}
.article__body h2{font-size:clamp(22px,2.6vw,28px);line-height:1.25;margin:1.6em 0 .55em;}
.article__body h3{font-size:clamp(18px,2vw,21px);line-height:1.3;margin:1.5em 0 .5em;color:var(--hpm-dark);}
.article__body ul{list-style:none;margin:0 0 1.3em;padding:0;display:flex;flex-direction:column;gap:12px;}
.article__body ul li{position:relative;padding-left:30px;line-height:1.6;}
.article__body ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--hpm-red);}
.article__body strong{color:var(--hpm-dark);font-weight:600;}
.article__cta{max-width:740px;margin:clamp(40px,6vw,64px) auto 0;}
.article__back{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--hpm-grey);}
.article__back:hover{color:var(--hpm-red);}

/* ============================================================
   FAQ accordion
   ============================================================ */
.faq {
  max-width: 820px;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--hpm-grey-border);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--hpm-dark);
}
.faq__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--hpm-grey-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hpm-red);
  transition: transform 0.3s ease, background 0.3s, border-color 0.3s;
  position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: opacity 0.3s ease;
}
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after { width: 1.5px; height: 12px; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); background: var(--hpm-red); border-color: var(--hpm-red); color: #fff; }
.faq__item.is-open .faq__icon::after { opacity: 0; }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}
.faq__a-inner {
  padding: 0 0 var(--space-6);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--hpm-grey);
  max-width: 680px;
}

/* ============================================================
   Animated hero (21st.dev-style: grid + beams + spotlight)
   ============================================================ */
.page-hero--anim {
  background: linear-gradient(180deg, #ffffff 0%, var(--hpm-grey-light) 100%);
  isolation: isolate;
}
.page-hero--anim .page-hero__inner { position: relative; z-index: 2; }
/* text keeps the default dark page-hero colours — readable on the light hero */

.hero-anim__layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.hero-anim__grid {
  background-image:
    linear-gradient(to right, rgba(20,20,20,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,20,20,0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 0%, transparent 80%);
  animation: gridDrift 22s linear infinite;
}
@keyframes gridDrift { to { background-position: 52px 52px; } }

.hero-anim__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.34;
}
.hero-anim__orb--1 {
  width: 420px; height: 420px;
  left: -120px; top: -140px;
  background: radial-gradient(circle, rgba(199,0,28,0.9), transparent 65%);
  animation: orbFloat1 16s ease-in-out infinite;
}
.hero-anim__orb--2 {
  width: 360px; height: 360px;
  right: -100px; bottom: -160px;
  background: radial-gradient(circle, rgba(199,0,28,0.55), transparent 65%);
  animation: orbFloat2 19s ease-in-out infinite;
}
@keyframes orbFloat1 {
  50% { transform: translate(70px, 50px) scale(1.12); }
}
@keyframes orbFloat2 {
  50% { transform: translate(-60px, -40px) scale(1.08); }
}

.hero-anim__beam {
  top: -20%; bottom: -20%;
  width: 38%;
  left: -45%;
  background: linear-gradient(100deg, transparent, rgba(199,0,28,0.22) 45%, rgba(255,180,190,0.10) 50%, rgba(199,0,28,0.22) 55%, transparent);
  filter: blur(26px);
  transform: skewX(-12deg);
  animation: beamSweep 8s ease-in-out infinite;
}
@keyframes beamSweep {
  0% { left: -45%; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 140%; opacity: 0; }
}

.hero-anim__spot {
  background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(199,0,28,0.20), transparent 60%);
  transition: background 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero-anim__grid, .hero-anim__orb, .hero-anim__beam { animation: none; }
}

/* ============================================================
   Legal pages
   ============================================================ */
.legal-content {
  max-width: 820px;
  margin: 0 auto;
}
.legal-content h2 {
  font-size: 26px;
  margin: var(--space-8) 0 var(--space-4);
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-size: 18px;
  margin: var(--space-6) 0 var(--space-3);
}
.legal-content p,
.legal-content li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--hpm-grey);
}
.legal-content p + p { margin-top: var(--space-4); }
.legal-content strong { color: var(--hpm-dark); font-weight: 600; }
.legal-content ul { padding-left: 22px; margin: var(--space-4) 0; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--hpm-red); text-decoration: underline; text-underline-offset: 2px; }
.legal-note {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background: var(--hpm-grey-light);
  border-left: 3px solid var(--hpm-red);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--hpm-grey);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-bottom: 1px solid var(--hpm-grey-border); }
  .stat:nth-child(2) { border-right: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card,
  .service-card--feature,
  .service-card--wide { grid-column: span 1; grid-row: auto; }
  .testimonials { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .sectors { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .blog-card__featured { grid-column: span 2; grid-template-columns: 1fr; }
  .pillar-detail__head { grid-template-columns: 1fr; gap: var(--space-5); }
  .legacy { grid-template-columns: 1fr; }
  .legacy__badge { left: 16px; bottom: 16px; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .cta-banner__inner { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .service-row { grid-template-columns: 1fr; }
  .service-row--reverse .service-row__media { order: 0; }
  .ceo { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .contact__info { position: static; }
  .project-detail { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
}

/* Mobile navigation switches to the hamburger dropdown at 1100px —
   raised from the old 720px because the full desktop nav (logo + 5
   links + lang switch + CTA) genuinely needs ~1100px to fit without
   wrapping/overflowing; 720px left it broken at tablet/small-laptop
   widths (946px viewport overflowed to 1103px). */
@media (max-width: 1100px) {
  .nav__menu-toggle { display: inline-flex; }
  .nav__right .btn--sm { display: none; }

  /* Mobile dropdown menu */
  .nav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    padding: 8px var(--container-px) 20px;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,0.18);
    border-top: 1px solid var(--hpm-grey-border);
  }
  .nav__links.is-open { display: flex; }
  .nav__links .nav__link {
    padding: 16px 2px;
    font-size: 17px;
    border-bottom: 1px solid var(--hpm-grey-border);
  }
  .nav__links .nav__link.is-active { color: var(--hpm-red); }
  .nav__links .nav__link.is-active::after { display: none; }
  .nav__links .nav__cta-mobile {
    display: inline-flex;
    margin-top: 16px;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: none; }
  .services-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: span 1; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); }
  .footer__bottom { flex-direction: column; gap: var(--space-4); align-items: flex-start; }
  .projects-grid { grid-template-columns: 1fr; }
  .ref-grid { grid-template-columns: 1fr; }
  .sectors { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card__featured { grid-column: span 1; }
  .bullet-list--2col { grid-template-columns: 1fr; }
  .marquee__item { width: 280px; height: 200px; }
  .legacy__quote { font-size: 17px; }
  .project-gallery { grid-template-columns: 1fr 1fr; }
  .cta-banner { margin: 0 var(--space-3); padding: var(--space-8) var(--space-5); }
  .cta-banner__actions .btn { width: 100%; }

  /* Headline sizing so long German compounds never overflow */
  .hero h1 { font-size: clamp(34px, 9vw, 46px); overflow-wrap: anywhere; }
  .page-hero h1 { font-size: clamp(32px, 8.5vw, 44px); overflow-wrap: anywhere; }
  .hero__sub { font-size: 16px; }
  .value-card { min-height: 0; padding: var(--space-7) var(--space-6); }
  .value-card__big { font-size: 64px; top: var(--space-4); right: var(--space-5); }
  .legacy__badge { padding: var(--space-4) var(--space-5); }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 30px; }
  .page-hero h1 { font-size: 28px; }
  .logo__sub { display: none; }
  .lang-switch { font-size: 12px; }
}

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%) translateY(24px);
  width: min(960px, calc(100vw - 32px));
  z-index: 2000;
  background: var(--hpm-white);
  border: 1px solid var(--hpm-grey-border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -16px rgba(26, 26, 26, 0.28), 0 4px 12px rgba(26, 26, 26, 0.08);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s;
}
.cookie-consent.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.cookie-consent::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-5);
  bottom: var(--space-5);
  width: 3px;
  background: var(--hpm-red);
  border-radius: 0 2px 2px 0;
}
.cookie-consent__body { flex: 1; min-width: 0; }
.cookie-consent__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--hpm-dark);
  margin-bottom: 4px;
}
.cookie-consent__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hpm-grey);
}
.cookie-consent__text a {
  color: var(--hpm-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-consent__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}
.cookie-consent__actions .btn { white-space: nowrap; }

@media (max-width: 720px) {
  .cookie-consent {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5);
    bottom: 12px;
  }
  .cookie-consent__actions { flex-direction: column-reverse; }
  .cookie-consent__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Services — editorial cards with media header (v2)
   ============================================================ */
.svc2-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:56px;
}
.svc2{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--hpm-grey-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  text-decoration:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
}
.svc2:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 56px -24px rgba(26,26,26,.32);
  border-color:rgba(199,0,28,.35);
}
.svc2__media{position:relative;height:230px;overflow:hidden;background:var(--hpm-grey-light);}
.svc2__media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transform:scale(1.02);
  transition:filter .55s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.svc2:hover .svc2__media img{filter:grayscale(0) contrast(1);transform:scale(1.09);}
.svc2__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,26,26,.12) 0%, rgba(26,26,26,0) 38%, rgba(26,26,26,.6) 100%);
}
.svc2__pill{
  position:absolute;left:22px;top:18px;z-index:1;
  font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--hpm-red);padding:5px 11px;border-radius:999px;
}
.svc2__num{
  position:absolute;left:22px;bottom:12px;z-index:1;
  font-family:var(--font-display);font-weight:800;font-size:56px;line-height:.8;letter-spacing:-.03em;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.svc2__bar{position:relative;height:3px;width:100%;background:var(--hpm-grey-border);overflow:hidden;}
.svc2__bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--hpm-red);transition:width .55s cubic-bezier(.16,1,.3,1);}
.svc2:hover .svc2__bar::after{width:100%;}
.svc2__body{padding:28px 30px 30px;display:flex;flex-direction:column;flex:1;}
.svc2__title{font-family:var(--font-display);font-weight:700;font-size:23px;letter-spacing:-.01em;margin:0 0 10px;color:var(--hpm-dark);}
.svc2__desc{font-size:15px;line-height:1.6;color:var(--hpm-grey);margin:0 0 20px;}
.svc2__list{list-style:none;margin:0 0 24px;padding:18px 0 0;border-top:1px solid var(--hpm-grey-border);}
.svc2__list li{position:relative;padding-left:24px;font-size:14px;line-height:1.45;color:var(--hpm-dark);font-weight:500;margin-bottom:11px;}
.svc2__list li:last-child{margin-bottom:0;}
.svc2__list li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;border-radius:2px;background:var(--hpm-red);}
.svc2__link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--hpm-dark);transition:gap .3s,color .3s;}
.svc2:hover .svc2__link{color:var(--hpm-red);gap:14px;}

/* ============================================================
   Story timeline
   ============================================================ */
.timeline{position:relative;max-width:780px;margin:56px auto 0;}
.timeline::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--hpm-red), var(--hpm-grey-border));}
.tl-item{position:relative;padding:0 0 42px 64px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute;left:10px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--hpm-red);box-shadow:0 0 0 5px rgba(199,0,28,.08);}
.tl-year{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--hpm-red);line-height:1;margin-bottom:8px;}
.tl-title{font-family:var(--font-display);font-weight:700;font-size:19px;margin:0 0 8px;color:var(--hpm-dark);}
.tl-text{font-size:15.5px;line-height:1.65;color:var(--hpm-grey);}
.tl-text strong{color:var(--hpm-dark);font-weight:600;}

/* Partner note */
.partner-note{
  display:flex;align-items:center;gap:20px;
  margin-top:48px;padding:24px 28px;
  background:var(--hpm-grey-light);border:1px solid var(--hpm-grey-border);border-radius:var(--r-lg);
  max-width:780px;margin-left:auto;margin-right:auto;
}
.partner-note__mark{
  flex-shrink:0;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--hpm-red);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.02em;
}
.partner-note__text{font-size:15px;line-height:1.6;color:var(--hpm-grey);}
.partner-note__text strong{color:var(--hpm-dark);font-weight:700;}

/* ============================================================
   Careers
   ============================================================ */
.jobs{display:flex;flex-direction:column;gap:16px;margin-top:8px;}
.job{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:26px 30px;background:#fff;border:1px solid var(--hpm-grey-border);border-radius:var(--r-lg);
  transition:border-color .3s, transform .3s, box-shadow .3s;
}
.job:hover{border-color:rgba(199,0,28,.35);transform:translateX(5px);box-shadow:0 16px 38px -24px rgba(26,26,26,.28);}
.job__info h3{font-size:20px;margin:0 0 10px;}
.job__meta{display:flex;gap:9px;flex-wrap:wrap;}
.job__tag{font-size:12.5px;color:var(--hpm-grey);background:var(--hpm-grey-light);border:1px solid var(--hpm-grey-border);padding:4px 11px;border-radius:999px;font-weight:500;}
.job__cta{flex-shrink:0;}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
.perk{padding:28px;background:#fff;border:1px solid var(--hpm-grey-border);border-radius:var(--r-lg);}
.perk__icon{width:46px;height:46px;border-radius:var(--r-md);background:var(--hpm-red-light);color:var(--hpm-red);display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;}
.perk h3{font-size:18px;margin:0 0 8px;}
.perk p{font-size:14.5px;color:var(--hpm-grey);line-height:1.6;}
@media(max-width:900px){
  .svc2-grid{grid-template-columns:1fr;}
  .perks{grid-template-columns:1fr;}
  .job{flex-direction:column;align-items:flex-start;gap:18px;}
}

/* ============================================================
   Innovation & sustainability (dark feature section)
   ============================================================ */
.innov{background:var(--hpm-grey-light);color:var(--hpm-dark);border-radius:var(--r-xl);overflow:hidden;position:relative;padding:clamp(44px,6vw,80px) clamp(22px,5vw,72px);}
.innov::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 460px at 88% -8%, rgba(199,0,28,.08), transparent 60%);pointer-events:none;}
.innov__head{position:relative;z-index:1;max-width:760px;}
.innov__head .eyebrow{color:var(--hpm-red);}
.innov__head h2{color:var(--hpm-dark);margin-top:14px;}
.innov__head p{color:var(--hpm-grey);margin-top:18px;font-size:17px;line-height:1.65;}
.innov__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(36px,4vw,56px);}
.icard{display:flex;flex-direction:column;padding:30px 26px;background:#fff;border:1px solid var(--hpm-grey-border);border-radius:var(--r-lg);transition:background .4s, border-color .4s, transform .4s, box-shadow .4s;}
.icard:hover{background:#fff;border-color:rgba(199,0,28,.45);box-shadow:0 14px 36px -16px rgba(20,20,20,.18);transform:translateY(-4px);}
.icard__icon{width:50px;height:50px;border-radius:var(--r-md);background:var(--hpm-red);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:22px;}
.icard__kicker{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hpm-red);margin-bottom:8px;}
.icard h3{font-size:21px;color:var(--hpm-dark);margin:0 0 12px;letter-spacing:-.01em;}
.icard p{font-size:14.5px;line-height:1.6;color:var(--hpm-grey);margin:0 0 20px;}
.icard__tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px;}
.icard__tags span{font-size:12px;font-weight:500;color:var(--hpm-grey);background:var(--hpm-grey-light);border:1px solid var(--hpm-grey-border);padding:4px 10px;border-radius:999px;}
@media(max-width:1040px){.innov__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.innov__grid{grid-template-columns:1fr;}}

/* ============================================================
   Family-business promise band
   ============================================================ */
.promise{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;}
.promise__body .eyebrow{color:var(--hpm-red);}
.promise__body h2{margin-top:14px;}
.promise__body p{margin-top:18px;color:var(--hpm-grey);font-size:16.5px;line-height:1.7;}
.promise__list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:18px;}
.promise__list li{display:flex;gap:16px;align-items:flex-start;}
.promise__ic{flex-shrink:0;width:42px;height:42px;border-radius:var(--r-md);background:var(--hpm-red-light);color:var(--hpm-red);display:inline-flex;align-items:center;justify-content:center;}
.promise__t{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--hpm-dark);margin-bottom:3px;}
.promise__d{font-size:14.5px;color:var(--hpm-grey);line-height:1.55;}
.promise__media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;background:var(--hpm-grey-light);}
.promise__media img{width:100%;height:100%;object-fit:cover;}
.promise__quote{position:absolute;left:0;right:0;bottom:0;padding:32px 28px 26px;background:linear-gradient(transparent, rgba(26,26,26,.82));color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1.4;}
.promise__quote cite{display:block;margin-top:10px;font-style:normal;font-weight:500;font-size:13px;color:rgba(255,255,255,.75);}
@media(max-width:860px){.promise{grid-template-columns:1fr;}.promise__media{aspect-ratio:16/10;max-height:420px;}}

/* ============================================================
   Job accordion (full listings)
   ============================================================ */
.job{flex-wrap:wrap;cursor:pointer;}
.job__head{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;}
.job__toggle{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--hpm-grey-border);background:#fff;color:var(--hpm-dark);display:inline-flex;align-items:center;justify-content:center;transition:background .3s,color .3s,transform .3s;}
.job:hover .job__toggle{background:var(--hpm-red);color:#fff;border-color:var(--hpm-red);}
.job__toggle svg{transition:transform .35s cubic-bezier(.16,1,.3,1);}
.job.is-open .job__toggle svg{transform:rotate(45deg);}
.job__detail{width:100%;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s cubic-bezier(.16,1,.3,1), opacity .4s, margin .4s;}
.job.is-open .job__detail{max-height:1400px;opacity:1;margin-top:24px;}
.job__detail-inner{padding-top:24px;border-top:1px solid var(--hpm-grey-border);display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.job__block h4{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--hpm-red);margin:0 0 12px;}
.job__block ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.job__block li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--hpm-dark);}
.job__block li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--hpm-red);}
.job__intro{grid-column:1/-1;font-size:15.5px;line-height:1.65;color:var(--hpm-grey);margin:0;}
.job__apply{grid-column:1/-1;margin-top:4px;}
@media(max-width:680px){.job__detail-inner{grid-template-columns:1fr;}.job__head{gap:14px;}}