/* ==========================================================================
   Primestein GmbH — Swiss/minimal corporate system
   Tokens -> base -> layout -> components. Light mode only by design:
   trade partners print and forward these pages.
   ========================================================================== */

/* Fonts are served from this site, not from Google, so no visitor data leaves
   the host. Both are variable fonts: one file covers weights 400–600. */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("lexend-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("source-sans-3-latin.woff2") format("woff2");
}

:root {
  /* Color */
  --c-primary:        #0F172A;
  --c-on-primary:     #FFFFFF;
  --c-secondary:      #334155;
  --c-accent:         #0369A1;
  --c-accent-hover:   #075985;
  --c-on-accent:      #FFFFFF;
  --c-bg:             #F8FAFC;
  --c-fg:             #020617;
  --c-card:           #FFFFFF;
  --c-muted:          #E8ECF1;
  --c-muted-fg:       #475569;
  --c-border:         #E2E8F0;
  --c-border-strong:  #CBD5E1;
  --c-ring:           #0369A1;

  /* Warm tones. Deliberately confined to the hero wash and the illustration:
     every control on the page stays navy/blue, so the warmth reads as
     atmosphere rather than as a second brand colour competing for attention. */
  --c-warm-bg:        #FDF8F0;
  --c-warm-bg-2:      #FCF6EE;
  --c-kraft-top:      #F4E6CE;
  --c-kraft-front:    #E8D4B2;
  --c-kraft-side:     #D8BE97;
  --c-kraft-inner:    #B2906A;

  /* Type */
  --f-display: "Lexend", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  /* Spacing — spacious scale */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  --radius: 6px;
  --maxw: 1180px;
  --nav-h: 72px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--c-primary);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.005em; }

p { margin: 0 0 var(--s-2); max-width: 68ch; }

a { color: var(--c-accent); text-underline-offset: 3px; }
a:hover { color: var(--c-accent-hover); }

:focus-visible {
  outline: 3px solid var(--c-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: #0369A1; color: #fff; }

.skip-link {
  position: absolute; left: var(--s-2); top: -100px;
  z-index: 100;
  background: var(--c-primary); color: var(--c-on-primary);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
  transition: top 150ms ease;
}
.skip-link:focus { top: var(--s-2); color: var(--c-on-primary); }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-3); }

section { padding: var(--s-7) 0; }
section + section { border-top: 1px solid var(--c-border); }

.eyebrow {
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted-fg);
  margin: 0 0 var(--s-2);
}

.lead { font-size: 1.12rem; color: var(--c-secondary); }
.muted { color: var(--c-muted-fg); }
.small { font-size: 0.9rem; }
.num { font-variant-numeric: tabular-nums; }

/* Placeholder token the owner replaces before launch */
.ph {
  background: #FEF9C3;
  border-bottom: 1px dashed #A16207;
  padding: 0 0.2em;
  color: #422006;
  font-style: normal;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
}

.nav {
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-4);
}

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-display);
  font-weight: 600; font-size: 1.05rem;
  color: var(--c-primary); text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand:hover { color: var(--c-primary); }
.brand-mark {
  width: 28px; height: 28px; flex: none;
  background: var(--c-primary);
  border-radius: 4px;
  display: grid; place-items: center;
  color: #fff; font-size: 0.85rem; font-weight: 600;
  font-family: var(--f-display);
}
.brand-suffix { font-weight: 400; color: var(--c-muted-fg); }

.nav-links {
  display: flex; align-items: center; gap: var(--s-3);
  margin-left: auto;
  list-style: none; padding: 0; margin-block: 0;
}
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-secondary); text-decoration: none;
  font-size: 0.95rem; font-weight: 500;
  transition: color 200ms ease;
}
.nav-links a:hover { color: var(--c-primary); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0 1.4rem;
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 0.95rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: #1E293B; color: var(--c-on-primary); }
.btn-secondary {
  background: transparent; color: var(--c-primary);
  border-color: var(--c-border-strong);
}
.btn-secondary:hover { border-color: var(--c-primary); color: var(--c-primary); background: #fff; }
.btn-sm { min-height: 44px; padding: 0 1.1rem; font-size: 0.9rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

/* ---------- Hero ---------- */

/* A warm band behind the opening, fading into the page background so there is
   no visible seam where it ends. */
.hero {
  padding: var(--s-7) 0 var(--s-6);
  background:
    radial-gradient(
      88% 100% at 76% 30%,
      rgba(233, 199, 146, 0.32) 0%,
      rgba(233, 199, 146, 0.12) 45%,
      rgba(233, 199, 146, 0) 78%
    ),
    linear-gradient(180deg, var(--c-warm-bg) 0%, var(--c-warm-bg-2) 58%, var(--c-bg) 100%);
}
/* The sticky header sits over that band, so it warms up to match. */
.site-header { background: rgba(253, 248, 240, 0.9); }
.hero-grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: start;
}
.hero-flag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-display); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-secondary);
  border: 1px solid var(--c-border-strong);
  background: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  margin-bottom: var(--s-3);
}
/* German flag: three horizontal bands, black over red over gold. */
.flag-bars { display: inline-flex; flex-direction: column; width: 18px; height: 12px; border-radius: 2px; overflow: hidden; flex: none; }
.flag-bars i { flex: 1; }
.flag-bars i:nth-child(1) { background: #000000; }
.flag-bars i:nth-child(2) { background: #DD0000; }
.flag-bars i:nth-child(3) { background: #FFCE00; }

.hero-note {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--c-border);
  font-size: 0.9rem; color: var(--c-muted-fg);
  list-style: none; padding-left: 0;
}
.hero-note li { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Hero illustration — drawn inline, sized by its column. */
.hero-art { display: block; }
.hero-art svg { width: 100%; height: auto; display: block; }
/* Aerial perspective: the far pallet also loses a little contrast overall,
   which no amount of lighter fills alone achieves convincingly. */
.hero-art .pk-back { opacity: 0.62; }
/* .pk.pk-back outranks the shared .pk animation rule further down the file,
   which would otherwise animate this group back to full opacity. */
.js .hero-art.in .pk.pk-back { animation-name: pk-in-back; }
@keyframes pk-in-back {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 0.62; transform: none; }
}

/* ---------- Stats ---------- */

.stats {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat { border-left: 2px solid var(--c-accent); padding-left: var(--s-2); }
.stat-value {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  font-weight: 600; color: var(--c-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1; display: block;
}
.stat-label { font-size: 0.9rem; color: var(--c-muted-fg); margin-top: 0.35rem; display: block; }

/* ---------- Section head ---------- */

.sec-head { max-width: 62ch; margin-bottom: var(--s-5); }
.sec-head p { margin-bottom: 0; }

/* ---------- Card grids ---------- */

.grid-3 { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-2 { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-4);
  transition: border-color 220ms ease;
}
.card:hover { border-color: var(--c-border-strong); }
.card p:last-child { margin-bottom: 0; }
.card .icon { color: var(--c-primary); margin-bottom: var(--s-2); display: block; }
.card p { font-size: 0.97rem; color: var(--c-muted-fg); }

/* Audience card */
.aud { display: flex; flex-direction: column; }
.aud h3 { margin-bottom: var(--s-1); }
.aud .aud-for {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-accent); font-family: var(--f-display); font-weight: 600;
  margin-bottom: var(--s-2);
}
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.checklist li {
  display: grid; grid-template-columns: 20px 1fr; gap: 0.7rem;
  font-size: 0.97rem; color: var(--c-secondary);
}
.checklist svg { margin-top: 5px; color: var(--c-accent); flex: none; }

/* ---------- Process ---------- */

.steps { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { padding-top: var(--s-3); border-top: 2px solid var(--c-primary); }
.step-n {
  font-family: var(--f-display); font-size: 0.8rem; font-weight: 600;
  color: var(--c-accent); font-variant-numeric: tabular-nums;
  display: block; margin-bottom: 0.4rem;
}
.step h3 { margin-bottom: 0.4rem; }
.step p { font-size: 0.95rem; color: var(--c-muted-fg); margin-bottom: 0; }

/* ---------- Compliance panel ---------- */

.panel {
  background: var(--c-primary);
  color: #E2E8F0;
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.panel h2, .panel h3 { color: #fff; }
.panel p { color: #CBD5E1; }
.panel .eyebrow { color: #94A3B8; }
.panel .checklist li { color: #E2E8F0; }
.panel .checklist svg { color: #7DD3FC; }
.panel a { color: #7DD3FC; }
.panel .ph { background: #1E3A5F; color: #E0F2FE; border-bottom-color: #7DD3FC; }

.doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.doclist li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.18);
  font-size: 0.97rem;
}
.doclist li:last-child { border-bottom: 0; }
.doclist svg { color: #7DD3FC; flex: none; }

/* ---------- Contact ---------- */

.contact-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.contact-card dl { margin: 0; display: grid; gap: var(--s-3); }
.contact-card dt {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-muted-fg); font-family: var(--f-display); font-weight: 600;
  margin-bottom: 0.2rem;
}
.contact-card dd { margin: 0; color: var(--c-primary); font-size: 1rem; }
.contact-card address { font-style: normal; line-height: 1.6; }

.contact-card .copy-note {
  margin: var(--s-2) 0 0; min-height: 1.5em;
  color: var(--c-accent); font-weight: 500;
  opacity: 0; transition: opacity 200ms ease;
}
.contact-card .copy-note.show { opacity: 1; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--c-card);
  border-top: 1px solid var(--c-border);
  padding: var(--s-5) 0 var(--s-4);
  font-size: 0.92rem;
}
.footer-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: var(--s-4);
}
.footer-grid h3 {
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-muted-fg); margin-bottom: var(--s-2);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
/* min-height keeps every footer link above the 24px pointer-target minimum */
.footer-grid ul a,
.contact-card a,
.footer-bottom a {
  display: inline-flex; align-items: center; min-height: 32px;
}
.footer-grid a { color: var(--c-secondary); text-decoration: none; }
.footer-grid a:hover { color: var(--c-primary); text-decoration: underline; }
.footer-grid address { font-style: normal; color: var(--c-muted-fg); line-height: 1.7; }
.footer-bottom {
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-3);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  color: var(--c-muted-fg); font-size: 0.87rem;
}

/* ---------- Legal pages ---------- */

.legal { padding: var(--s-6) 0; }
.legal-body { max-width: 74ch; }
.legal-body h2 { font-size: 1.35rem; margin-top: var(--s-5); }
.legal-body h3 { margin-top: var(--s-4); }
.legal-body ul { padding-left: 1.2rem; color: var(--c-secondary); }
.legal-body li { margin-bottom: 0.4rem; }
.legal-body p { color: var(--c-secondary); }
.backlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; font-size: 0.93rem; text-decoration: none;
}
.notice {
  background: #FEF9C3; border: 1px solid #FDE047; border-radius: var(--radius);
  padding: var(--s-3); margin-bottom: var(--s-4);
  color: #422006; font-size: 0.93rem;
}
.notice p { color: #422006; margin-bottom: 0; max-width: none; }
.notice strong { font-family: var(--f-display); }

/* ---------- Motion ---------- */

/* The resting (hidden) state lives in CSS, not in script, so nothing can flash
   in before JS marks it. It applies only under .js, which the <head> sets when
   JS is present and motion is welcome. --d is the per-item stagger delay. */
/* :where() keeps this list at the specificity of .js alone, so the .in rule
   below always wins regardless of how deep a selector in the list is. */
.js :where(
  .hero-flag,
  .hero h1,
  .hero .lead,
  .hero .btn-row,
  .hero-note,
  .sec-head,
  .card,
  .stat,
  .step,
  .contact-card,
  .hero-art,
  .wrap > p.small.muted
) {
  opacity: 0;
  /* Rises and grows into place. 0.97 is deliberately small: at this size the
     eye reads it as depth, not as a zoom, and text stays crisp. */
  transform: translateY(16px) scale(0.97);
}

.js .in {
  opacity: 1;
  transform: none;
  /* Transform runs slightly longer than the fade, so the growth is still
     finishing as the element reaches full opacity. That reads as settling
     into place rather than as two separate effects. */
  transition:
    opacity 500ms cubic-bezier(0.22, 0.61, 0.24, 1) var(--d, 0ms),
    transform 640ms cubic-bezier(0.18, 0.74, 0.22, 1) var(--d, 0ms);
}

/* The hero is the first thing seen, so it travels a touch further. */
.js :where(.hero-flag, .hero h1, .hero .lead, .hero .btn-row, .hero-note, .hero-art) {
  transform: translateY(20px) scale(0.96);
}

/* ---------- Page build-up on open ----------
   These are CSS animations rather than JS-driven transitions on purpose: an
   animation with `both` always runs to completion, so even if the script below
   never executes, the page still ends up fully assembled and readable. */

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.js body { animation: page-in 300ms ease-out both; }

@keyframes header-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.js .site-header { animation: header-in 460ms cubic-bezier(0.18, 0.74, 0.22, 1) 30ms both; }

/* Nav items arrive one after another, left to right. */
@keyframes nav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.js .nav-links li { animation: nav-in 420ms cubic-bezier(0.22, 0.61, 0.24, 1) both; }
.js .nav-links:not(.nav-cta) li:nth-child(1) { animation-delay: 170ms; }
.js .nav-links:not(.nav-cta) li:nth-child(2) { animation-delay: 215ms; }
.js .nav-links:not(.nav-cta) li:nth-child(3) { animation-delay: 260ms; }
.js .nav-cta li { animation-delay: 305ms; }

/* The boxes stack themselves, bottom row first.
   --d is inherited from .hero-art, so they always follow the card itself. */
@keyframes pk-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.js .hero-art.in .pk {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pk-in 520ms cubic-bezier(0.18, 0.74, 0.22, 1) both;
  animation-delay: calc(var(--d, 0ms) + 110ms + var(--i) * 58ms);
}
@keyframes glow-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.js .hero-art.in .pk-glow {
  animation: glow-in 900ms ease-out both;
  animation-delay: calc(var(--d, 0ms) + 60ms);
}

/* The trust row under the buttons ticks in item by item. */
.js .hero-note.in li { animation: nav-in 380ms cubic-bezier(0.22, 0.61, 0.24, 1) both; }
.js .hero-note.in li:nth-child(1) { animation-delay: calc(var(--d, 0ms) + 120ms); }
.js .hero-note.in li:nth-child(2) { animation-delay: calc(var(--d, 0ms) + 200ms); }
.js .hero-note.in li:nth-child(3) { animation-delay: calc(var(--d, 0ms) + 280ms); }

/* Sticky header gains a hairline shadow once the page has moved. */
.site-header { transition: box-shadow 250ms ease, background-color 250ms ease; }
.site-header.scrolled {
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.04), 0 4px 16px rgba(2, 6, 23, 0.06);
}

/* Nav follows the section you are reading. */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  height: 2px;
  background: var(--c-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.24, 1);
}
.nav-links a.active { color: var(--c-primary); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-cta a::after { display: none; }

/* Cards lift very slightly on hover — enough to feel alive, not enough to bounce. */
.card {
  transition:
    border-color 220ms ease,
    transform 220ms cubic-bezier(0.22, 0.61, 0.24, 1),
    box-shadow 220ms ease;
}
.card:hover {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.03), 0 8px 24px rgba(2, 6, 23, 0.07);
}

/* The figures count as the page's most "alive" element, so they get the
   clearest growth of the set. */
.js .stat.in .stat-value {
  animation: figure-in 700ms cubic-bezier(0.18, 0.74, 0.22, 1) var(--d, 0ms) backwards;
}
@keyframes figure-in {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* The accent rule beside each figure draws itself in. */
.stat { position: relative; border-left: 0; }
.stat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--c-accent);
  transform: scaleY(0);
  transform-origin: top center;
}
.js .stat::before { transition: transform 620ms cubic-bezier(0.22, 0.61, 0.24, 1) calc(var(--d, 0ms) + 120ms); }
.stat.in::before, html:not(.js) .stat::before { transform: scaleY(1); }

/* Process steps draw their top rule the same way. */
.step { position: relative; border-top: 0; padding-top: var(--s-3); }
.step::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: left center;
}
.js .step::before { transition: transform 620ms cubic-bezier(0.22, 0.61, 0.24, 1) calc(var(--d, 0ms) + 120ms); }
.step.in::before, html:not(.js) .step::before { transform: scaleX(1); }

/* Buttons acknowledge the press. */
.btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .in { transition: none; }
  .js body,
  .js .site-header,
  .js .nav-links li,
  .js .stat.in .stat-value,
  .js .hero-art.in .pk,
  .js .hero-art.in .pk-glow,
  .js .hero-note.in li { animation: none; }
  .stat::before { transform: scaleY(1); transition: none; }
  .step::before { transform: scaleX(1); transition: none; }
  .card:hover { transform: none; }
  .nav-links a.active::after { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Breakpoints ---------- */

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.12fr 0.88fr; gap: var(--s-5); align-items: center; }
  .panel { padding: var(--s-7) var(--s-6); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  section { padding: var(--s-6) 0; }
  .nav { gap: var(--s-2); }
  .nav-links { display: none; }
  .nav-links.nav-cta { display: flex; }
  /* Decorative, so it yields space to the text on a phone. */
  .hero-grid { gap: var(--s-4); }
  .hero-art svg { max-width: 290px; margin: 0 auto; }
  .panel { padding: var(--s-5) var(--s-3); }
}


/* =====================================================================
   Wider palette — each block gets its own colour so numbers, actions
   and key facts are recognisable at a glance. Every text/background
   pair here was checked for WCAG AA contrast (4.5:1 for body text).
   ===================================================================== */
:root {
  --c-blue:        #0369A1;  --c-blue-tint:  #E0EFF8;
  --c-rose:        #BE185D;  --c-rose-tint:  #FCE7F1;
  --c-teal:        #0F766E;  --c-teal-tint:  #DDF2EF;
  --c-amber:       #A1480A;  --c-amber-tint: #FDF0DC;
  --c-amber-glow:  #FBBF24;  /* for figures on the dark band only */
}

/* Actions: blue, so they never read as body text. */
.btn-primary { background: var(--c-blue); }
.btn-primary:hover { background: #075985; }

/* Alternating section backgrounds separate the blocks. */
#distribution, #process { background: #FFFFFF; }
#contact {
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-warm-bg) 100%);
}

/* Icons sit on a tinted tile instead of floating on white. */
.card .icon {
  width: 46px; height: 46px; padding: 10px;
  border-radius: 12px;
  background: var(--c-blue-tint); color: var(--c-blue);
}
#distribution .card { background: var(--c-bg); }

/* Categories: one colour each, carried by the top edge and the icon tile. */
.cat-beauty, .cat-tech, .cat-home { border-top: 3px solid; }
.cat-beauty { border-top-color: var(--c-rose); }
.cat-beauty .icon { background: var(--c-rose-tint); color: var(--c-rose); }
.cat-tech   { border-top-color: var(--c-blue); }
.cat-home   { border-top-color: var(--c-teal); }
.cat-home .icon { background: var(--c-teal-tint); color: var(--c-teal); }

/* ---- Partner cards: brands in blue, suppliers in amber ---- */
.aud-brands, .aud-suppliers { border-top: 3px solid; }
.aud-brands    { border-top-color: var(--c-blue); }
.aud-suppliers { border-top-color: var(--c-amber); }
.aud-brands .aud-for, .aud-suppliers .aud-for {
  display: inline-block; align-self: flex-start;
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.aud-brands .aud-for    { background: var(--c-blue-tint);  color: var(--c-blue); }
.aud-suppliers .aud-for { background: var(--c-amber-tint); color: var(--c-amber); }
.aud-suppliers .checklist svg { color: var(--c-amber); }

/* ---- Process: numbered circles ---- */
.step::before { background: var(--c-border); }
.step-n {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-blue); color: #FFFFFF;
  font-size: 0.9rem; margin-bottom: var(--s-2);
}

/* The nav link colour used to override the header button, leaving grey text
   on a dark button (about 1.9:1). The button keeps its own colours here. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: #FFFFFF; }
.nav-links a.btn-primary { background: var(--c-blue); }
.nav-links a.btn-primary:hover { background: #075985; }

/* Phones: compact cards. The icon sits beside the heading instead of above
   it, so each card is roughly half as tall and a section fits in a swipe. */
@media (max-width: 760px) {
  #categories .card,
  #distribution .card {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 18px;
  }
  #categories .card .icon,
  #distribution .card .icon {
    grid-row: span 2;
    width: 40px; height: 40px; padding: 8px;
    margin: 0;
  }
  #categories .card h3,
  #distribution .card h3 { margin: 8px 0 4px; }
  #categories .grid-3,
  #distribution .grid-3 { gap: 12px; }
  .sec-head { margin-bottom: var(--s-4); }
}