/* ==========================================================================
   Wagenia — site styles
   Palette taken from the 9 colours of the logo rosette.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Logo lettering (DicotBold) — subset to the letters of WAGENIA only. */
@font-face {
  font-family: "Dicot";
  src: url("../fonts/dicot-bold.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}

:root {
  /* Logo colours (c1–c9) */
  --c1: #db5a35; /* orange */
  --c2: #f2c112; /* yellow */
  --c3: #403730; /* dark brown */
  --c4: #6c5e52; /* brown */
  --c5: #9a8e80; /* taupe */
  --c6: #545f76; /* slate */
  --c7: #7a8baa; /* blue */
  --c8: #aeb9cc; /* light blue */
  --c9: #80ac3a; /* green */

  --ink: #231e1a;
  --ink-muted: #5f554c;
  --paper: #ffffff;
  --sand: #f6f3ee;
  /* Header colours — chosen with HEADER_COLOR in index.php ('green' / 'blue'). */
  --header-bg: #ecf3e1;                      /* light tint of the logo's green triangle */
  --header-bg-glass: rgb(236 243 225 / 95%); /* same, slightly see-through */
  --header-hover: #dce9c8;                   /* slightly deeper, for menu hover */
  --line: #e5ded4;
  --primary: #4a7419;
  --primary-hover: #3d6114;
  --primary-on-dark: #9fc75c;
  --night: #1f2430;
  --night-text: #c9c2b8;
  --focus: #db5a35;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-brand: "Dicot", var(--font-body);

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgb(35 30 26 / 6%), 0 8px 24px rgb(35 30 26 / 8%);
  --gutter: 16px;
  --header-h: 72px;
  --logo-size: 56px;   /* mobile */
  --brand-size: 26px;
  --section-y: clamp(56px, 8vw, 104px);
}

@media (min-width: 640px) {
  :root { --gutter: 24px; --header-h: 96px; --logo-size: 76px; --brand-size: 34px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.1875rem; color: var(--ink); }

a { color: var(--primary); text-underline-offset: 0.2em; }
a:hover { color: var(--primary-hover); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
main:focus { outline: none; }

ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: #fff; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

.placeholder { color: var(--ink-muted); font-style: italic; }

/* ---------- Rounded triangle marker (the logo's shape) ---------- */
.tri {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--c, var(--c9));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 3h14.8c2.3 0 3.3 1.7 2.2 3.7l-7.4 12.8c-1.2 2-3.1 2-4.3 0L2.4 6.7C1.3 4.7 2.3 3 4.6 3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 3h14.8c2.3 0 3.3 1.7 2.2 3.7l-7.4 12.8c-1.2 2-3.1 2-4.3 0L2.4 6.7C1.3 4.7 2.3 3 4.6 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tri-lg { width: 30px; height: 30px; }
.c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); }
.c4 { --c: var(--c4); } .c5 { --c: var(--c5); } .c6 { --c: var(--c6); }
.c7 { --c: var(--c7); } .c8 { --c: var(--c8); } .c9 { --c: var(--c9); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); color: #fff; }
.btn-secondary { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-ghost { border-color: rgb(255 255 255 / 70%); color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--ink); }

/* ---------- Header ---------- */
/* HEADER_COLOR = 'blue': light tint of the logo's lightest blue triangle. */
.header-blue {
  --header-bg: #eaeef5;
  --header-bg-glass: rgb(234 238 245 / 95%);
  --header-hover: #d8dfeb;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg-glass);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}
.header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand-logo { width: 44px; height: 44px; }
.brand-name {
  font-family: var(--font-brand);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase; /* WAGENIA is always written in capitals */
}

/* Header logo: rosette + "Wagenia" with "Reliable Diagnostics" underneath,
   both lines exactly the same width. The tagline size is a fixed ratio of the
   name size (measured from the two fonts); justify absorbs the last pixel. */
.site-header .brand, .logo-lockup { gap: 14px; }
.site-header .brand-logo, .logo-lockup .brand-logo { width: var(--logo-size); height: var(--logo-size); }
.brand-text {
  display: inline-flex;
  flex-direction: column;
  width: max-content;
}
.site-header .brand-name, .logo-lockup .brand-name { font-size: var(--brand-size); }
.brand-tagline {
  display: block;
  margin-top: calc(var(--brand-size) * -0.11); /* tightest gap under WAGENIA (≈2px) */
  font-family: var(--font-body);
  font-size: calc(var(--brand-size) * 0.412);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-align: justify;
  text-align-last: justify;
  color: var(--ink-muted);
}

.spectrum { display: flex; height: 6px; }
.spectrum i { flex: 1; }
.spectrum i:nth-child(1) { background: var(--c9); color: var(--c9); }
.spectrum i:nth-child(2) { background: var(--c1); color: var(--c1); }
.spectrum i:nth-child(3) { background: var(--c2); color: var(--c2); }
.spectrum i:nth-child(4) { background: var(--c3); color: var(--c3); }
.spectrum i:nth-child(5) { background: var(--c4); color: var(--c4); }
.spectrum i:nth-child(6) { background: var(--c5); color: var(--c5); }
.spectrum i:nth-child(7) { background: var(--c6); color: var(--c6); }
.spectrum i:nth-child(8) { background: var(--c7); color: var(--c7); }
.spectrum i:nth-child(9) { background: var(--c8); color: var(--c8); }

.nav-list { display: flex; gap: 4px; }
.nav-link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.nav-link:hover { background: var(--header-hover); color: var(--ink); }
.nav-link[aria-current="page"] {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--primary);
  border-radius: 0;
}

.nav-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.lang-switch:hover { background: var(--header-hover); color: var(--ink); }
.btn-login {
  min-height: 44px;
  padding: 8px 18px;
  border-color: var(--ink);
  color: var(--ink);
  font-size: 0.9375rem;
}
.btn-login:hover { background: var(--ink); color: #fff; }

.nav-toggle { display: none; }

@media (min-width: 960px) {
  .site-nav { display: flex; align-items: center; gap: 24px; }
}

/* Mobile navigation (the menu is always reachable without JavaScript) */
@media (max-width: 959.98px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: 600 0.9375rem/1 var(--font-body);
    cursor: pointer;
  }
  .nav-toggle-icon, .nav-toggle-icon span, .nav-toggle-icon::before, .nav-toggle-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .nav-toggle-icon { position: relative; background: none; }
  .nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-icon::before { top: -6px; }
  .nav-toggle-icon::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon span { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

  .site-nav {
    width: 100%;
    padding: 8px 0 20px;
  }
  .header-bar { flex-wrap: wrap; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-link { padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.125rem; }
  .nav-link:hover { background: none; }
  .nav-link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--primary); padding-left: 16px; }
  .nav-actions { justify-content: space-between; padding-top: 16px; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(82vh, 760px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--night);
}
.hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(20 18 16 / 58%) 0%, rgb(20 18 16 / 36%) 45%, rgb(20 18 16 / 0%) 100%),
    linear-gradient(0deg, rgb(20 18 16 / 30%) 0%, transparent 50%);
}
.hero-inner {
  display: grid;
  gap: 32px;
  padding-block: clamp(64px, 12vw, 120px) clamp(40px, 6vw, 72px);
}
.hero-copy { max-width: 40rem; }
.hero .eyebrow { color: var(--primary-on-dark); }
.hero h1 { color: #fff; }
.hero-lead { font-size: 1.1875rem; color: rgb(255 255 255 / 88%); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* "40 ans à votre service" badge
   Entrance in 3D, ring of the 9 logo colours drawn around the number while it
   counts up (count-up in site.js), then a light sweep. Tilts on hover. */
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

.hero-badge { perspective: 900px; width: fit-content; }
.badge-card {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 30px 14px 14px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(255 255 255 / 18%), rgb(255 255 255 / 6%));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 25%);
  overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
  animation: badge-in 1.1s cubic-bezier(.2, .9, .25, 1.15) .35s both;
}
.badge-card.is-ready { animation: none; } /* entrance done: hover tilt takes over */
.badge-card::after { /* light sweep */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 40%) 50%, transparent 65%);
  transform: translateX(-130%);
  animation: badge-sheen 1.3s ease-in-out 2.4s forwards;
  pointer-events: none;
}
.badge-medal {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
}
.badge-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    var(--c9) 0 40deg, var(--c1) 0 80deg, var(--c2) 0 120deg, var(--c3) 0 160deg, var(--c4) 0 200deg,
    var(--c5) 0 240deg, var(--c6) 0 280deg, var(--c7) 0 320deg, var(--c8) 0 360deg);
  /* ring shape + progressive drawing (--ring goes 0 → 360deg) */
  -webkit-mask:
    radial-gradient(circle, transparent 0 58%, #000 59%),
    conic-gradient(from -90deg, #000 var(--ring), transparent 0);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, transparent 0 58%, #000 59%) intersect,
    conic-gradient(from -90deg, #000 var(--ring), transparent 0);
  animation: badge-ring-draw 1.8s cubic-bezier(.3, .7, .2, 1) .7s both, badge-ring-spin 40s linear 2.5s infinite;
}
.badge-medal::before { /* dark disc behind the number */
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / 16%), rgb(20 18 16 / 55%) 70%);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 35%);
}
.badge-num {
  position: relative;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: #fff;
}
.badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.badge-unit, .badge-label, .badge-since { animation: badge-text-in .7s ease-out both; }
.badge-unit {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  animation-delay: 1s;
}
.badge-label { font-size: 1.0625rem; animation-delay: 1.15s; }
.badge-since {
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c2);
  animation-delay: 1.3s;
}

@keyframes badge-in {
  from { opacity: 0; transform: translateY(40px) rotateX(75deg) scale(.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes badge-ring-draw { from { --ring: 0deg; } to { --ring: 360deg; } }
@keyframes badge-ring-spin { to { rotate: 360deg; } }
@keyframes badge-sheen { to { transform: translateX(130%); } }
@keyframes badge-text-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 639.98px) {
  .badge-medal { width: 76px; height: 76px; }
  .badge-num { font-size: 2.1rem; }
  .badge-unit { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .badge-card, .badge-card::after, .badge-ring, .badge-unit, .badge-label, .badge-since { animation: none !important; }
  .badge-card::after { display: none; }
}

@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section-sand { background: var(--sand); }
.section-head { max-width: 44rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p:last-child { color: var(--ink-muted); margin-bottom: 0; }

/* Domain cards */
.domain-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.domain-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.domain-card img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.domain-card:hover { color: var(--ink); box-shadow: var(--shadow); }
.domain-card:hover img { transform: scale(1.03); }
.domain-body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 22px;
  background: var(--paper);
}
.domain-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}
.domain-title .tri { margin-top: 3px; }
.domain-more { margin-top: auto; color: var(--primary); font-weight: 600; font-size: 0.9375rem; }

/* About + facts */
.about-grid { display: grid; gap: 48px; }
.about-copy { max-width: 42rem; }
.about-copy p:not(.lead):not(.eyebrow) { color: var(--ink-muted); }
.facts { display: grid; gap: 16px; margin: 0; align-content: start; }
.fact {
  display: flex;
  flex-direction: column-reverse;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--paper);
  border-top: 4px solid var(--c, var(--c9));
}
.fact:nth-child(1) { --c: var(--c9); }
.fact:nth-child(2) { --c: var(--c2); }
.fact:nth-child(3) { --c: var(--c6); }
.fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
}
.fact dt { color: var(--ink-muted); }
@media (min-width: 960px) {
  .about-grid { grid-template-columns: 1.6fr 1fr; gap: 72px; }
}

/* CTA band */
.cta-band { background: #3c4860; color: #fff; }
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(40px, 6vw, 64px);
}
.cta-inner h2 { color: #fff; margin-bottom: 6px; }
.cta-inner p { margin: 0; color: rgb(255 255 255 / 82%); }

/* ---------- Inner page banner ---------- */
.page-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 34vw, 400px);
  color: #fff;
  background: var(--night);
}
.page-banner-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Van banner: keep the van (right side of the photo) in view on narrow screens. */
.page-banner-img--banner-support { object-position: 85% 50%; }
/* Contact banner: keep the person (right side of the photo) and her face in view. */
.page-banner-img--banner-contact { object-position: 68% 22%; }
/* Services banner: keep the top of the photo (the man's head) on wide, short screens. */
.page-banner-img--banner-services { object-position: 60% 0; }
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(20 18 16 / 58%) 0%, rgb(20 18 16 / 32%) 55%, rgb(20 18 16 / 0%) 100%);
}
.page-banner-inner { padding-block: 48px 40px; }
.page-banner .eyebrow { color: var(--primary-on-dark); }
.page-banner h1 { color: #fff; margin-bottom: 0.3em; }
.page-banner-intro { max-width: 40rem; margin: 0; font-size: 1.125rem; color: rgb(255 255 255 / 88%); }

/* Keeps white text legible over the lighter photo overlays. */
.hero-copy, .badge-text, .page-banner:not(.page-banner-plain) .page-banner-inner { text-shadow: 0 1px 3px rgb(0 0 0 / 35%), 0 2px 18px rgb(0 0 0 / 45%); }

.page-banner-plain { min-height: 0; color: var(--ink); background: var(--sand); }
.page-banner-plain::before { display: none; }
.page-banner-plain h1 { color: var(--ink); }
.page-banner-plain .eyebrow { color: var(--primary); }

/* ---------- Product / service cards ---------- */
.cat-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.cat-card {
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.cat-card .tri { margin-bottom: 18px; }
.cat-card h2, .cat-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.cat-card p { margin: 0; color: var(--ink-muted); font-size: 1rem; }
.cat-card:target { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(74 116 25 / 25%); }

/* Services: split layout */
.split { display: grid; gap: 32px; }
.split-head .tri { margin-bottom: 16px; }
.split-head p { color: var(--ink-muted); max-width: 32rem; }
.list-title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 16px; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1.4fr; gap: 72px; }
}

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list li {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.9375rem;
}

.step-list { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step-list li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.step-list li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c6);
  min-width: 2ch;
}

/* Support plans */
.plan-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--night);
  color: #fff;
}
.plan:nth-child(2) { background: var(--c6); }
.plan-name {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
}
.plan-text { color: rgb(255 255 255 / 85%); }

/* Contact cards */
.contact-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.contact-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.contact-card {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.contact-card:target { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(74 116 25 / 25%); }
.contact-card-title { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin-bottom: 18px; }
.contact-list { margin: 0; display: grid; gap: 14px; }
.contact-list dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-list dd { margin: 2px 0 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.contact-list a { color: var(--ink); font-weight: 500; text-decoration-color: var(--line); }
.contact-list a:hover { color: var(--primary); }

/* Legal */
.prose { max-width: 48rem; }
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-muted); }
.legal-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.legal-list div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.legal-list dt { color: var(--ink-muted); }
.legal-list dd { margin: 0; }
@media (max-width: 539.98px) {
  .legal-list div { grid-template-columns: 1fr; gap: 2px; }
}

/* Notice pages (errors, login placeholder) */
.notice-page { padding-block: clamp(64px, 12vw, 140px); }
.notice-panel { max-width: 34rem; margin-inline: auto; text-align: center; }
.logo-lockup { display: inline-flex; align-items: center; margin-bottom: 28px; text-align: left; }
/* Sign-in page background: lab photo (bgol_splash_0406.jpg) under a light black
   gradient, content on a frosted panel. */
.login-page {
  --login-shade: linear-gradient(160deg, rgb(0 0 0 / 22%) 0%, rgb(0 0 0 / 38%) 50%, rgb(0 0 0 / 60%) 100%);
  display: grid;
  align-items: start; /* dialog at the top, small margin */
  min-height: calc(100vh - var(--header-h));
  padding-block: 28px 64px;
  background: var(--login-shade), url("../img/login-bg-lab-960.webp") center / cover no-repeat, #2a3340;
}
@media (min-width: 960px) {
  .login-page { background: var(--login-shade), url("../img/login-bg-lab-1622.webp") center / cover no-repeat, #2a3340; }
}
.login-page .notice-panel {
  padding: 40px 32px 36px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 24px;
  background: rgb(255 255 255 / 20%);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 50px rgb(20 30 45 / 18%);
}
.login-page .notice-panel p { color: var(--ink); }

/* Sign-in page: green slice of the logo turning on itself (animation inside the SVG),
   with WAGENIA in black centred on top (the name may extend beyond the triangle). */
.login-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  max-width: 100%;
  margin: 0 auto 28px;
}
.login-mark-img { grid-area: 1 / 1; width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgb(35 30 26 / 16%)); }
.login-mark-name {
  grid-area: 1 / 1;
  position: relative;
  font-size: 38px;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 639.98px) {
  .login-mark { width: 140px; }
  .login-mark-name { font-size: 29px; }
}
.notice-panel p { color: var(--ink-muted); }
.notice-code {
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  color: var(--c1) !important;
}
.notice-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.debug {
  margin-top: 48px;
  padding: 20px;
  border: 1px solid var(--c1);
  border-radius: var(--radius-sm);
  background: #fff8f5;
  font-size: 0.875rem;
}
.debug summary { font-weight: 600; cursor: pointer; }
.debug pre { overflow-x: auto; white-space: pre-wrap; font-size: 0.8125rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--night-text); font-size: 0.9375rem; }
.site-footer a { color: var(--night-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid;
  gap: 40px;
  padding-block: 64px 40px;
}
.brand-light, .brand-light:hover { color: #fff !important; text-decoration: none !important; }
.footer-brand p { margin: 16px 0 0; max-width: 22rem; }
.footer-years strong { color: #fff; font-family: var(--font-display); font-size: 1.125rem; }
.footer-nav {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.footer-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-title a { color: var(--primary-on-dark); }
.footer-nav ul { display: grid; gap: 8px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 0.875rem;
}
.footer-bottom p { margin: 0; }
.footer-meta { display: flex; gap: 24px; }
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 2.4fr; gap: 64px; }
}

/* ---------- Christmas season ----------
   Active when <body> has .is-xmas (XMAS_* settings in index.php).
   - Christmas icons float in and out at random over the photo banners
     (placed by site.js), behind the text.
   - The colour strip under the header becomes a garland of twinkling bulbs
     hanging over the top of the page. */
.login-page { position: relative; isolation: isolate; }
.xmas-sky {
  position: absolute;
  inset: 0;
  z-index: -1;            /* above the photo and its shade, below the text */
  overflow: hidden;
  pointer-events: none;
}
.xmas-icon {
  position: absolute;
  width: var(--size, 36px);
  height: var(--size, 36px);
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 6px rgb(0 0 0 / 35%));
}
.xmas-icon.is-on { animation: xmas-float var(--dur, 8s) ease-in-out both; }
@keyframes xmas-float {
  0%   { opacity: 0;   transform: translate(-50%, -30%) scale(.55) rotate(calc(var(--rot, 10deg) * -1)); }
  22%  { opacity: .95; }
  50%  {               transform: translate(-50%, -60%) scale(1) rotate(0deg); }
  78%  { opacity: .95; }
  100% { opacity: 0;   transform: translate(-50%, -90%) scale(.8) rotate(var(--rot, 10deg)); }
}

/* Garland: two bulbs per colour segment, hanging under the strip. */
.is-xmas .spectrum { position: relative; z-index: 2; overflow: visible; pointer-events: none; }
.is-xmas .spectrum i { position: relative; }
.is-xmas .spectrum i::before,
.is-xmas .spectrum i::after {
  content: "";
  position: absolute;
  top: calc(100% - 1px);   /* hang just under the strip */
  width: 9px;
  height: 13px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  border-top: 3px solid #5f554c;        /* the bulb's little cap */
  color: var(--bulb-a);
  background: currentColor;
  box-shadow: 0 0 4px 1px currentColor;
  animation: xmas-bulb 2.6s ease-in-out infinite;
}
.is-xmas .spectrum i::before { left: 25%; }
.is-xmas .spectrum i::after { left: 70%; color: var(--bulb-b); animation-delay: 1.3s; }
/* Bright festive bulb colours (the strip itself keeps the logo colours). */
.is-xmas .spectrum i:nth-child(5n+1) { --bulb-a: #9fd04a; --bulb-b: #ff4d3d; }
.is-xmas .spectrum i:nth-child(5n+2) { --bulb-a: #ffd23f; --bulb-b: #5cb8ff; }
.is-xmas .spectrum i:nth-child(5n+3) { --bulb-a: #fff4d6; --bulb-b: #9fd04a; }
.is-xmas .spectrum i:nth-child(5n+4) { --bulb-a: #ff4d3d; --bulb-b: #ffd23f; }
.is-xmas .spectrum i:nth-child(5n+5) { --bulb-a: #5cb8ff; --bulb-b: #fff4d6; }
.is-xmas .spectrum i:nth-child(2)::before { animation-delay: .3s; }
.is-xmas .spectrum i:nth-child(3)::before { animation-delay: .6s; }
.is-xmas .spectrum i:nth-child(4)::before { animation-delay: .9s; }
.is-xmas .spectrum i:nth-child(5)::before { animation-delay: 1.2s; }
.is-xmas .spectrum i:nth-child(6)::before { animation-delay: 1.5s; }
.is-xmas .spectrum i:nth-child(7)::before { animation-delay: 1.8s; }
.is-xmas .spectrum i:nth-child(8)::before { animation-delay: 2.1s; }
.is-xmas .spectrum i:nth-child(9)::before { animation-delay: 2.4s; }
.is-xmas .spectrum i:nth-child(even)::after { animation-delay: .5s; }
@keyframes xmas-bulb {
  0%, 100% { opacity: .55; box-shadow: 0 0 3px 0 currentColor; }
  50%      { opacity: 1;   box-shadow: 0 0 14px 5px currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  .xmas-sky { display: none; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .cta-band, .hero-img, .page-banner-img { display: none; }
  .hero, .page-banner { color: #000; background: none; min-height: 0; }
  .hero::before, .page-banner::before { display: none; }
  .hero h1, .page-banner h1 { color: #000; }
}