/* Gruppo Ecosistem - a SUEZ company · one page
   Campaign layout (2026-10-30): the Ecomondo dépliant cover as the hero, white page, blue #163a64,
   the four colours of the group pictogram as accents, rounded cards and pill controls.
   Fonts, tokens, layout and components first (static, complete without JS), then the motion layer
   used by main.js (only under html.js), the micro-interactions and the ring cursor. */

/* ---------- Fonts (OFL, self-hosted; licences in /assets/fonts/) ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-opsz-wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-opsz-wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: "Public Sans";
  src: url("../fonts/public-sans-latin-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin-ext-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

/* ---------- Design tokens ---------- */

:root {
  color-scheme: light;

  /* Main colour (client, 2026-10-30) and its interaction shades */
  --blue: #163A64;             /* 11.87:1 on white */
  --blue-deep: #0E2A4B;        /* pressed / hover fill */
  --blue-soft: #E8EEF5;        /* tinted fills, chips at rest */

  /* Neutrals: white page, ink and muted tinted towards the blue */
  --paper: #FFFFFF;
  --ink: #12233A;              /* body text · 15.7:1 on white */
  --muted: #4C5A6C;            /* secondary text · 7.0:1 on white, 6.3:1 on --surface */
  --surface: #F1F5F7;          /* quiet panels, sky-tinted */
  --line: #DCE3E9;             /* hairlines (decorative, never the only cue) */
  --on-blue: #FFFFFF;
  --on-blue-muted: #C3D1E2;    /* 8.6:1 on --blue */

  /* Group pictogram: the four strokes of the logo, as accents (graphics, never body text) */
  --pict-blue: #3D67A7;
  --pict-green: #00813C;       /* 4.9:1 on white: usable for bold small text */
  --pict-teal: #348C8D;
  --pict-orange: #F3601A;      /* graphics only: 3.0:1 on white */
  --accent: var(--pict-orange); /* the one warm accent: small marks, lines and hover badges, never text */

  /* Company colours, from each company logo (wordmark "eco" part) */
  --ecosistem: #24498F;
  --econet: #00813C;
  --ecotec: #2F7F80;           /* logo teal #348C8D darkened 1 step so the payoff text keeps 4.5:1 */

  /* Campaign sky: sampled from GRUPPO ECOSISTEM-Depliant-cover.psd (vertical gradient) */
  --sky: linear-gradient(180deg, #AFCBD0 0%, #B7D0D4 10%, #C2D8DB 25%, #CBDFE1 40%, #D0E4E5 50%, #D4E6E8 60%, #D8E8E9 75%, #DFECEE 90%, #DEEBED 100%);

  /* Ecomondo 2026 Media Kit (exhibitors) */
  --em-panel: #2F3031;
  --em-mint: #E3F4D5;          /* 12.2:1 on the panel */

  /* Type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;

  --step-hero: clamp(2.5rem, min(1.45rem + 4.2vw, 1.25rem + 6.5vh), 5.25rem); /* 40 -> 84 px, held down on short screens */
  --step-h2: clamp(2rem, 1.55rem + 2vw, 3.5rem);              /* 32 -> 56 px */
  --step-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.625rem);      /* 20 -> 26 px */
  --step-figure: clamp(2.25rem, 1.75rem + 2.2vw, 3.75rem);    /* key figures */
  --step-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);  /* 18 -> 21 px */
  --step-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);       /* 16 -> 17 px */
  --step-small: 0.9375rem;                                    /* 15 px */
  --step-label: 0.75rem;                                      /* 12 px uppercase labels */
  --leading-body: 1.6;

  /* Layout */
  --container: 80rem;          /* 1280 px */
  --gutter: 1.25rem;
  --inset: 0.625rem;           /* hero card inset from the screen edge */
  --radius-xl: 2rem;           /* hero, banners, photo cards */
  --radius-l: 1.5rem;          /* cards */
  --radius-m: 1rem;            /* small cards, table rows */
  --pill: 999px;
  --hairline: 1px;
  --touch: 2.75rem;            /* 44 px minimum target */
  --shadow-card: 0 1px 2px rgba(18, 35, 58, 0.06), 0 12px 32px -12px rgba(18, 35, 58, 0.16);

  --col-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --section-space: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --head-gap: clamp(2rem, 1.5rem + 1.6vw, 3.25rem);
  --header-h: 4rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-press: 80ms;
  --dur-state: 180ms;
  --dur-undraw: 160ms;
  --dur-open: 260ms;
  --dur-draw: 380ms;
  --dur-arrive: 600ms;
}

@media (min-width: 600px) {
  :root { --gutter: 2.5rem; --inset: 0.875rem; }
}

@media (min-width: 900px) {
  :root { --header-h: 4.75rem; --inset: 1.25rem; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-color: #A9B6C4 var(--paper);
  hanging-punctuation: first;
  background: var(--paper);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* switching reduced motion on mid-session must win over the inline value ScrollTrigger may have written */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--blue);
}

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

h1, h2, h3, p, figure, dl, dd { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  color: var(--blue);
  text-wrap: balance;
}

p { text-wrap: pretty; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style-type: "\200B"; /* keeps list semantics in Safari/VoiceOver, unlike list-style: none */
}

address { font-style: normal; }

sub { font-size: 0.62em; line-height: 0; vertical-align: -0.28em; }

strong { font-weight: 650; }

a {
  color: var(--blue);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: opacity var(--dur-state) var(--ease-out), text-decoration-thickness 160ms var(--ease-out), color 160ms var(--ease-out);
}

@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

::selection {
  background: var(--blue);
  color: var(--on-blue);
}

[hidden] { display: none !important; }

.nowrap { white-space: nowrap; }

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

.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.i-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section label: the brief's section names, uppercase, with the four-colour pictogram ring */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}

.label::before {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: conic-gradient(from -45deg, var(--pict-blue) 0 25%, var(--pict-green) 0 50%, var(--pict-orange) 0 75%, var(--pict-teal) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 41%, #000 43%);
  mask: radial-gradient(circle, transparent 0 41%, #000 43%);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--pill);
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 650;
  transform: translateY(-160%);
}

.skip-link:focus-visible { transform: none; }

/* ---------- Buttons: pill with a round arrow badge ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  min-height: 3.25rem;
  padding: 0.375rem 1.5rem;
  border: var(--hairline) solid var(--blue);
  border-radius: var(--pill);
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.button:has(.button__badge) { padding-right: 0.375rem; }

.button__meta { font-weight: 450; color: color-mix(in srgb, currentColor 86%, transparent); }

.button__badge {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  color: var(--blue);
}

.button__badge .icon { width: 1.125rem; height: 1.125rem; }

.button--light {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--blue);
}

.button--light .button__badge {
  background: var(--blue);
  color: var(--on-blue);
}

@media (hover: hover) {
  .button:hover { background: var(--blue-deep); border-color: var(--blue-deep); text-decoration: none; }
  /* the round badge warms to the accent on hover (an icon on orange: graphics, 3:1) */
  .button:hover .button__badge,
  .download:hover .button__badge { background: var(--accent); color: var(--on-blue); }
  .ecomondo .button--light:hover .button__badge { background: var(--em-panel); color: var(--em-mint); }
  .button--light:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
}

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

.site-header {
  position: relative;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: saturate(1.4) blur(14px); }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem;
  padding-block: 0.75rem 0;
}

/* Header controls sit inside the html scroll-padding band (it keeps focused content clear of the sticky
   bar). Without this, focusing one of them makes the browser centre it and the page jumps up. */
.site-header a,
.site-header button { scroll-margin-top: calc(-1 * (var(--header-h) + 1rem)); }

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

.site-header__brand img { height: 2rem; width: auto; transform-origin: left center; }

.site-nav {
  flex-basis: 100%;
  display: flex;
  padding-block: 0.375rem 0.25rem;
  margin-top: 0.5rem;
  border-top: var(--hairline) solid var(--line);
}

.site-nav__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  column-gap: 1rem;
  flex: 1 1 100%;
}

.site-nav__list a,
.lang-switch a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
}

.lang-switch {
  display: flex;
  gap: 0.125rem;
}

.lang-switch a {
  justify-content: center;
  min-width: var(--touch);
  font-size: var(--step-label);
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* English is switched off for now: shown, greyed out, not a link */
.lang-switch__off {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  color: var(--muted);
  font-size: var(--step-label);
  font-weight: 650;
  letter-spacing: 0.12em;
  opacity: 0.45;
  cursor: not-allowed;
}

.lang-switch a[aria-current] {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

@media (hover: hover) {
  .lang-switch a:hover { color: var(--blue); text-decoration: underline; }
}

@media (min-width: 900px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .site-header__inner {
    flex-wrap: nowrap;
    min-height: var(--header-h);
    padding-block: 0;
  }

  .site-header__brand img { height: 2.375rem; }

  .site-nav {
    order: 1;
    flex-basis: auto;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 0.4rem + 1.5vw, 2rem);
    flex: none;
  }

  /* the last chapter is the call to action: a pill, as in the reference UI */
  .site-nav__list li:last-child a {
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: var(--pill);
    background: var(--blue);
    color: var(--on-blue);
  }

  .lang-switch {
    order: 2;
    padding-left: 1rem;
    margin-left: -0.25rem;
  }
}

@media (min-width: 900px) and (hover: hover) {
  .site-nav__list li:last-child a:hover { background: var(--blue-deep); }
}

/* ---------- Hero: the dépliant cover, without logo and text ---------- */

.hero { padding-top: var(--inset); }

/* The arch owns a band at the bottom of the card (--arch-band), reserved as padding: on short screens
   the card grows instead of letting the crest slide behind the buttons. */
.hero__cover {
  --arch-band: 19rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-inline: var(--inset);
  min-height: max(34rem, calc(100svh - var(--header-h) - 3.5rem));
  padding-bottom: calc(var(--arch-band) + 1.5rem);
  border-radius: var(--radius-xl);
  background: #CBDFE1 var(--sky);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform-origin: 50% 100%;
}

/* The arch: the waste-to-grass ring rotated as on the cover (waste on the left, grass on the right),
   wider than the card so both legs leave the frame; only its upper band is ever visible. */
.hero__arch {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--arch-band));
  width: 230%;
  max-width: none;
  height: auto;
  translate: -50% 0;
}

.hero__content {
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  padding-top: clamp(3.25rem, 1.5rem + 6vh, 6.5rem);
  text-align: center;
}

/* opsz 32: the cover's text cut, not the tight display cut; the size is capped by the width of the
   pill line, so «valore concreto» never leaves the card on narrow phones */
.hero__title {
  max-width: 15ch;
  font-size: min(var(--step-hero), calc((100vw - 3.5rem) / 8.2));
  font-variation-settings: "opsz" 32;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--blue);
}

/* "valore concreto": white on the blue pill, as on the cover */
.hero__pill {
  display: inline-block;
  margin-top: 0.06em;
  padding: 0.02em 0.34em 0.08em;
  border-radius: var(--pill);
  background: var(--blue);
  color: var(--on-blue);
  white-space: nowrap;
}

.hero .actions { justify-content: center; }

/* Key figures: under the cover, on the white page */
.hero__figures { padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem) 0; }

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem var(--col-gap);
}

.figure {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding-top: 1rem;
  border-top: var(--hairline) solid var(--line);
}

/* a short warm tick on the rule above each key figure */
.figure::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* numbers share one baseline per row, with or without the «oltre» qualifier */
.figure__value {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(var(--step-figure) + 1.6rem);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
}

.figure__qualifier {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-body);
  font-size: var(--step-small);
  font-weight: 550;
  color: var(--muted);
}

.figure__number {
  font-size: var(--step-figure);
  white-space: nowrap;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}

.figure__unit { font-size: 0.6em; letter-spacing: 0; }

.figure__label {
  max-width: 24ch;
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.45;
}

@media (min-width: 600px) {
  .hero__cover { --arch-band: 24rem; }
  .hero__arch { width: 170%; }
}

@media (min-width: 900px) {
  .hero__cover { --arch-band: clamp(17rem, 21vw, 24rem); }
  .hero__arch { width: 118%; }
  .hero__title { max-width: 16ch; }
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Ecomondo banner ---------- */

.ecomondo { padding-top: var(--section-space); }

.ecomondo__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the body never grows past the card on phones */
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--em-panel);
  color: var(--em-mint);
}

.ecomondo__art { display: block; }

.ecomondo__art img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
  object-position: 50% 42%;
}

.ecomondo__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.25rem;
  padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
}

/* the lazy wordmark reserves its box before it loads, so scroll triggers below never shift */
.ecomondo__mark { display: block; width: min(17.5rem, 100%); }
.ecomondo__mark img { width: 100%; height: auto; }

.ecomondo__title {
  max-width: 14ch;
  font-size: var(--step-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--paper);
}

.ecomondo__meta {
  font-size: var(--step-lead);
  font-weight: 550;
  color: var(--em-mint);
}

.ecomondo__action { margin-top: 0.5rem; }

.ecomondo .button--light {
  border-color: var(--em-mint);
  background: var(--em-mint);
  color: var(--em-panel);
}

.ecomondo .button--light .button__badge { background: var(--em-panel); color: var(--em-mint); }

.ecomondo :focus-visible { outline-color: var(--em-mint); } /* 12.2:1 on the panel */

@media (max-width: 599px) {
  /* the download label wraps inside the pill instead of pushing the badge out of the card */
  .ecomondo .button { white-space: normal; text-align: left; column-gap: 0.625rem; }
  .ecomondo .button__meta { white-space: nowrap; }
}

@media (hover: hover) {
  .ecomondo .button--light:hover { background: var(--paper); border-color: var(--paper); }
}

@media (min-width: 760px) {
  .ecomondo__card {
    grid-template-columns: minmax(14rem, 0.8fr) 1.6fr;
    min-height: 26rem;
  }

  /* the art fills its column; the text sets the card height */
  .ecomondo__art { position: relative; }
  .ecomondo__art img { position: absolute; inset: 0; height: 100%; object-position: 50% 50%; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section-space) 0; }

.section__head {
  display: grid;
  justify-items: start;
  gap: 1rem;
  margin-bottom: var(--head-gap);
}

.section__title {
  max-width: 22ch;
  font-size: var(--step-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.section__lead {
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--step-lead);
  line-height: 1.5;
}

@media (min-width: 900px) {
  /* title left, lead right: the reference UI's section intros */
  .section__head:has(.section__lead) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--col-gap);
    align-items: end;
  }

  .section__head:has(.section__lead) .label { grid-column: 1 / -1; }
  .section__head:has(.section__lead) .section__lead { padding-bottom: 0.35rem; }
}

/* ---------- Il Gruppo ---------- */

.about {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.about__text {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.about__text .section__title { margin-bottom: 0.75rem; }

.prose {
  display: grid;
  gap: 1rem;
  max-width: 68ch;
  color: var(--ink);
}

.prose p:first-child { font-size: var(--step-lead); line-height: 1.5; }

.strength {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--surface);
}

/* Chi Siamo · La nostra Identità · La nostra Forza (dépliant REV08): three panels, one row on wide screens */
.intro {
  display: grid;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.intro .strength { margin-top: 0; align-content: start; }

/* «Perché noi?» under the row, full width; two columns of reasons on wide screens */
.reasons-block { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.reasons-block .reasons__title { margin-top: 0; margin-bottom: 1rem; }

@media (min-width: 900px) {
  .reasons-block .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}

/* company cards: the logo alone, centred (it already reads «a SUEZ company»; the name stays for screen readers) */
.company > article { grid-template-rows: auto; place-items: center; }
.company__logo { margin-block: 0.25rem; }

.strength__title,
.reasons__title {
  font-size: var(--step-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.strength__text { max-width: 62ch; }

.reasons__title { margin-top: 1.5rem; }

.reasons {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.reason {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: center;
  gap: 0.875rem;
  font-weight: 550;
  line-height: 1.4;
}

.reason__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 13%, var(--paper));
  color: var(--tone);
}

.reason__icon .icon { width: 1rem; height: 1rem; }
.reason__icon .i-stroke { stroke-width: 2; }

.reason--blue { --tone: var(--pict-blue); }
.reason--green { --tone: var(--pict-green); }
.reason--teal { --tone: var(--pict-teal); }
.reason--orange { --tone: #C9470B; } /* pictogram orange, one step darker so the tick reads at 3:1 */

.about__media {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.about__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .about__media {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .about__media img { aspect-ratio: 4 / 5; object-position: 42% 50%; }
}

/* ---------- Timeline ---------- */

.timeline-wrap {
  position: relative;
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.timeline { display: grid; }

.timeline__line { display: none; }

.timeline__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 0 0 2rem 1.75rem;
  border-left: 2px solid var(--line);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  content: "";
  position: absolute;
  left: -0.4375rem;
  top: 0.55rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--blue);
  border-radius: 50%;
  background: var(--paper);
}

.timeline__year {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums lining-nums;
}

.timeline__text { max-width: 30ch; color: var(--muted); font-size: var(--step-small); line-height: 1.45; }

@media (min-width: 900px) {
  .timeline-wrap { padding-top: 0.375rem; }

  .timeline__line {
    display: block;
    position: absolute;
    top: 0.375rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--line);
    transform-origin: left center;
  }

  .timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }

  .timeline__item {
    padding: 1.75rem 0 0;
    border-left: 0;
  }

  .timeline__item::before { left: 0; top: -0.3125rem; }
  .timeline__text { max-width: 22ch; }
}

/* ---------- Image breaks: rounded photo cards ---------- */

.break {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: clamp(26rem, 62svh, 40rem);
  margin-top: var(--section-space);
  border-radius: var(--radius-xl);
  background: var(--blue);
  color: var(--on-blue);
}

.break__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.break__media picture,
.break__media img {
  width: 100%;
  height: 100%;
}

.break__media img { object-fit: cover; }

/* scrim on the text side; the sentence keeps 4.5:1 on any part of the photo */
.break::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 42, 75, 0) 35%, rgba(14, 42, 75, 0.55) 62%, rgba(14, 42, 75, 0.9) 100%);
  pointer-events: none;
}

.break__text {
  max-width: 24ch;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3.25rem);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* Mission (break 1): a small uppercase label over the statement; sized in em, so it grows with it */
.break__label {
  margin-bottom: 0.9em;
  font-family: var(--font-body);
  font-size: 0.3em;
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--on-blue-muted);
}

.break__mission strong { font-weight: 800; }

/* Break 1: the operator portrait. Phones: the photo is the card, face kept in frame.
   Desktop: split card, the sentence on the blue half, the photo on the other. */
.break--one .break__media img { object-position: 50% 22%; }

@media (min-width: 900px) {
  .break--one {
    grid-template-columns: 1fr 1fr;
    align-content: stretch;
    min-height: 36rem;
  }

  .break--one::after { display: none; }

  .break--one .break__media {
    position: relative;
    inset: auto;
    z-index: 0;
    grid-column: 2;
    grid-row: 1;
    overflow: hidden;
    border-radius: calc(var(--radius-xl) - 0.75rem);
    margin: 0.75rem;
  }

  .break--one .break__media img { object-position: 50% 30%; }

  .break--one .break__text {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    max-width: 18ch;
  }

  .break--three .break__text { max-width: 26ch; }
}

/* ---------- Divisions ---------- */

.companies {
  display: grid;
  gap: var(--col-gap);
}

.company > article {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 0.875rem;
  height: 100%;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-l);
  background: var(--paper);
}

.company__logo {
  height: 2.75rem;
  width: auto;
  margin-bottom: 0.5rem;
}

.company__name {
  font-size: var(--step-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.company__payoff {
  color: var(--tone);
  font-weight: 650;
  line-height: 1.4;
}

.company__about {
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.55;
}

.company__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: var(--hairline) solid var(--line);
}

.datum { display: grid; gap: 0.25rem; align-content: start; }

.datum__value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--blue);
  font-variant-numeric: tabular-nums lining-nums;
}

.datum__label { color: var(--muted); font-size: 0.875rem; line-height: 1.4; }

.company__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--touch);
  margin-top: 0.25rem;
  font-weight: 650;
  text-decoration: none;
}

.company__link .icon {
  box-sizing: content-box;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--blue-soft);
}

@media (hover: hover) {
  .company__link:hover { text-decoration: underline; }
}

.company--ecosistem { --tone: var(--ecosistem); }
.company--econet { --tone: var(--econet); }
.company--ecotec { --tone: var(--ecotec); }

@media (min-width: 900px) {
  /* subgrid: logo, name, payoff, text, figures and link sit at the same height in the three cards */
  .companies { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .company { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
  .company > article { grid-row: 1 / -1; grid-template-rows: subgrid; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .company__data { grid-template-columns: 1fr; }
}

@media (min-width: 1200px) {
  .company__data { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* Treatments and services: the dépliant table, filterable by company */
.services {
  margin-top: clamp(3rem, 2.25rem + 3vw, 5rem);
}

.services__head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.services__title {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--touch);
  padding: 0 1.125rem;
  border: var(--hairline) solid var(--line);
  border-radius: var(--pill);
  background: var(--paper);
  color: var(--ink);
  font: 600 0.9375rem/1 var(--font-body);
  cursor: pointer;
}

.chip:not([data-filter="tutte"])::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--tone);
}

.chip--ecosistem { --tone: var(--ecosistem); }
.chip--econet { --tone: var(--econet); }
.chip--ecotec { --tone: var(--ecotec); }

.chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--on-blue);
}

.chip[aria-pressed="true"]::before { background: var(--on-blue); }

@media (hover: hover) {
  .chip[aria-pressed="false"]:hover { border-color: var(--blue); }
}

.services__tables {
  display: grid;
  gap: var(--col-gap);
  align-items: start;
}

/* Each panel is a soft grey column with its name and a count; every row is a white card:
   a small index and the company dots on top, the name below (UI reference, 2026-10-31). */
.service-table {
  position: relative;
  display: block;
  padding: 0.5rem 0.625rem 0.625rem;
  border-radius: calc(var(--radius-xl) + 0.25rem);
  background: #F4F5F7;
  font-size: var(--step-small);
}

.service-table caption {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0.875rem 1rem;
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.service-table__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: 0.375rem;
  border-radius: 0.5rem;
  background: #E6E8EC;
  color: var(--muted);
  font: 600 0.875rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* column headers are for screen readers only: the caption already names each table */
.service-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.service-table tbody {
  display: grid;
  gap: 0.625rem;
  counter-reset: row;
}

.service-table tbody tr {
  counter-increment: row;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num cos" "name name";
  align-items: center;
  row-gap: 0.875rem;
  padding: 1.125rem 1.375rem 1.25rem;
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(18, 35, 58, 0.04);
}

.service-table tbody tr::before {
  content: counter(row, decimal-leading-zero);
  grid-area: num;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.service-table tbody th {
  grid-area: name;
  display: block;
  padding: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* companies: only those that do the job, as dots in the dépliant colours that open into the dépliant
   badges on hover. The top line has a fixed height, so opening them never resizes the card. */
.service-table__co {
  grid-area: cos;
  display: block;
  height: 1.375rem;
  padding: 0;
  text-align: right;
}

.co-dots {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  height: 100%;
}

.co-dots > * { flex: none; }

.co-dot {
  --dot: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  vertical-align: middle;
  width: var(--dot);
  height: var(--dot);
  overflow: hidden;
  border-radius: var(--pill);
  background: var(--tone);
  transition: width var(--dur-open) var(--ease-out), height var(--dur-open) var(--ease-out);
}

.co-dot:has(.co-badge--ecosistem) { --tone: #164383; --w: 95px; --h: 18px; }
.co-dot:has(.co-badge--econet) { --tone: #2D8F54; --w: 72px; --h: 18px; }
.co-dot:has(.co-badge--ecotec) { --tone: #287C7F; --w: 78px; --h: 21px; }

.co-badge {
  display: block;
  flex: none;
  max-width: none;
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease-out);
}

.service-table tbody tr:hover .co-dot { width: var(--w); height: var(--h); }
.service-table tbody tr:hover .co-badge { opacity: 1; transition-delay: 60ms; }

@media (hover: none) {
  .co-dot { width: var(--w); height: var(--h); }
  .co-badge { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .co-dot, .co-badge { transition: none; }
}


@media (max-width: 599px) {
  .service-table { padding-inline: 0.375rem; }
  .service-table tbody tr { padding: 1rem 1.125rem 1.125rem; }
}

/* filtering (main.js sets data-filter on .services) */
.services[data-filter="ecosistem"] tbody tr:not([data-companies~="ecosistem"]),
.services[data-filter="econet"] tbody tr:not([data-companies~="econet"]),
.services[data-filter="ecotec"] tbody tr:not([data-companies~="ecotec"]) { display: none; }

/* a table with nothing left for the chosen company folds away */
.services[data-filter="ecotec"] .service-table:not(:has(tbody tr[data-companies~="ecotec"])),
.services[data-filter="econet"] .service-table:not(:has(tbody tr[data-companies~="econet"])),
.services[data-filter="ecosistem"] .service-table:not(:has(tbody tr[data-companies~="ecosistem"])) { display: none; }

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

@media (min-width: 1100px) {
  .services__tables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Sustainability ---------- */

.pillars {
  display: grid;
  gap: var(--col-gap);
}

.pillar {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.pillar__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.pillar__title::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  border: 3px solid var(--tone);
  border-radius: 50%;
}

.pillar--green { --tone: var(--pict-green); }
.pillar--blue { --tone: var(--pict-blue); }
.pillar--orange { --tone: var(--pict-orange); }

.facts {
  display: grid;
  gap: 1rem;
}

.fact {
  padding-top: 1rem;
  border-top: var(--hairline) solid var(--line);
  line-height: 1.5;
}

.fact:first-child { padding-top: 0; border-top: 0; }

.fact__value {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--blue);
  font-variant-numeric: tabular-nums lining-nums;
}

.fact__name { font-weight: 700; color: var(--blue); }

.source {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.downloads {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border: var(--hairline) solid var(--line);
  border-radius: var(--pill);
  color: var(--ink);
  text-decoration: none;
}

.download__name { font-weight: 650; color: var(--blue); }
.download__meta { color: var(--muted); font-size: var(--step-small); }

.download .button__badge {
  margin-left: auto;
  background: var(--blue);
  color: var(--on-blue);
}

@media (hover: hover) {
  .download:hover { border-color: var(--blue); background: var(--blue-soft); }
}

@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Certifications ---------- */

.section--tinted > .container {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  border-radius: var(--radius-xl);
  background: var(--surface);
  max-width: calc(var(--container) + 2 * var(--gutter));
}

@media (max-width: 599px) {
  .section--tinted > .container { border-radius: 0; }
}

@media (min-width: 600px) {
  /* the panel spans the page like the hero; its content stays on the page grid */
  .section--tinted > .container {
    width: calc(100% - 2 * var(--inset));
    max-width: none;
    padding-inline: max(calc(var(--gutter) - var(--inset)), calc((100% - var(--container)) / 2 - var(--inset)));
  }
}

.badges {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@media (min-width: 600px) {
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.badge {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.25rem;
  padding: 1.25rem 3.75rem 1.25rem 1.375rem;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-m);
  background: var(--paper);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-open) var(--ease-out), box-shadow var(--dur-open) var(--ease-out), border-color var(--dur-state) var(--ease-out);
}

/* Each certificate will link to its PDF (not supplied yet, so the box is not a link): on hover it lifts
   and a round download mark comes in, the same badge as the download buttons. */
.badge__doc {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--dur-state) var(--ease-out), transform var(--dur-open) var(--ease-out), background-color var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}

@media (hover: hover) {
  .badge:hover {
    border-color: color-mix(in srgb, var(--blue) 25%, transparent);
    box-shadow: 0 2px 4px rgba(18, 35, 58, 0.06), 0 20px 40px -16px rgba(18, 35, 58, 0.24);
    transform: translateY(-4px);
  }

  .badge:hover .badge__doc {
    opacity: 1;
    transform: none;
    background: var(--accent);
    color: var(--on-blue);
  }
}

@media (prefers-reduced-motion: reduce) {
  .badge, .badge__doc { transition: opacity var(--dur-state) linear, border-color var(--dur-state) linear; }
  .badge:hover { transform: none; }
  .badge__doc { transform: none; }
}

.badge__norm {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blue);
}

.badge__scope { font-weight: 550; }
.badge__who { color: var(--muted); font-size: var(--step-small); }

.registers {
  display: grid;
  gap: 1.5rem var(--col-gap);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.register { display: grid; gap: 0.5rem; align-content: start; }

.register__title {
  font-size: 1.1875rem;
  line-height: 1.25;
}

.register p { color: var(--muted); font-size: var(--step-small); }

@media (min-width: 900px) {
  .registers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Contacts ---------- */

.section--contacts { padding-bottom: var(--section-space); }

.contacts {
  display: grid;
  gap: var(--col-gap);
}

.contact {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.contact__name {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.375rem); /* the three full names fit one line at desktop widths */
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.contact__name::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--tone);
}

.contact--ecosistem { --tone: var(--ecosistem); }
.contact--econet { --tone: var(--econet); }
.contact--ecotec { --tone: var(--ecotec); }

.contact__address { display: grid; gap: 1rem; }
.contact__place { color: var(--muted); }

.contact__lines { display: grid; gap: 0.25rem; }

.contact__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-weight: 650;
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  /* subgrid: names and addresses line up across the three cards */
  .contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  .contact { grid-row: span 2; grid-template-rows: subgrid; }
}

/* ---------- Footer: a rounded blue card, four columns ---------- */

.site-footer {
  padding: var(--section-space) var(--inset) var(--inset);
  font-size: 0.875rem;
  line-height: 1.55;
}

.site-footer__card {
  border-radius: var(--radius-xl);
  background: var(--blue);
  color: var(--on-blue-muted);
}

.site-footer__inner {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(3rem, 2.5rem + 2.5vw, 5rem) clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* the block is as wide as the claim's longest line; the logo spans exactly that width */
.site-footer__brand { display: grid; gap: 1.25rem; align-content: start; width: fit-content; max-width: 100%; }
.site-footer__logo { width: 100%; height: auto; contain: inline-size; }

.site-footer__claim {
  color: var(--on-blue);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* social profiles: round outlined icons under the claim; the accent warms them on hover */
.social {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.social__link {
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  border: var(--hairline) solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--on-blue);
}

.social__link .icon { width: 1.25rem; height: 1.25rem; }

@media (hover: hover) {
  .social__link:hover { border-color: var(--accent); background: var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .social__link { transition: background-color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out); }
}

.site-footer__head {
  margin-bottom: 0.875rem;
  color: var(--on-blue);
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.legal {
  display: grid;
  gap: 0.125rem;
}

.site-footer__head--next { margin-top: 2rem; }

.site-footer__office { margin-bottom: 0.75rem; max-width: 34ch; }
.site-footer__office-label { display: block; color: var(--on-blue); font-weight: 500; }
.site-footer__tag { display: inline-block; margin-right: 0.4em; color: var(--on-blue-muted); }

/* Links: regular weight, white on the muted text; a thin, translucent underline that fills on hover.
   Rows are compact with a mouse; on touch screens every link keeps its 44 px target. */
.site-footer__contacts,
.site-footer__links { display: grid; gap: 0.125rem; justify-items: start; }

.site-footer__contacts a,
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  color: var(--on-blue);
  font-weight: 450;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-decoration-thickness: 1px;
}

.site-footer__links .icon { width: 0.875rem; height: 0.875rem; }

@media (hover: hover) {
  .site-footer__contacts a:hover,
  .site-footer__links a:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
}

@media (pointer: coarse) {
  .site-footer__contacts a,
  .site-footer__links a { min-height: var(--touch); }
}


.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem;
  border-top: var(--hairline) solid rgba(255, 255, 255, 0.18);
  font-size: 0.875rem;
}

.site-footer :focus-visible { outline-color: var(--on-blue); }

/* four columns: brand · contacts · company details · links; two by two on mid-size screens */
@media (min-width: 700px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}

@media (min-width: 1100px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.75fr); }
}

/* ---------- Legal pages (privacy, accessibility) ---------- */

.legal-page {
  max-width: calc(48rem + 2 * var(--gutter));
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section-space);
}

.legal-page__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-bottom: 2rem;
  border-bottom: var(--hairline) solid var(--line);
}

.legal-page__title {
  font-size: var(--step-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.legal-page__lead { font-size: var(--step-lead); line-height: 1.5; color: var(--ink); }
.legal-page__date { color: var(--muted); font-size: var(--step-small); }

.legal-page__block {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem 0;
}

.legal-page__block + .legal-page__block { border-top: var(--hairline) solid var(--line); }

.legal-page__block h2 {
  font-size: var(--step-h3);
  line-height: 1.2;
}

.legal-page__block p { max-width: 65ch; line-height: var(--leading-body); }

.legal-page__toc {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-l);
  background: var(--surface);
}

.legal-page__toc h2 { font-size: var(--step-h3); }
.legal-page__toc ol { display: grid; gap: 0.125rem; list-style: none; padding: 0; margin: 0; }
.legal-page__toc a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--blue); font-weight: 550; }

.legal-page__list {
  display: grid;
  list-style: upper-alpha;
  gap: 0.75rem;
  max-width: 65ch;
  margin: 0;
  padding-left: 1.75rem;
  line-height: var(--leading-body);
}

.legal-page__list li { display: list-item; padding-left: 0.25rem; }
.legal-page__list li::marker { content: counter(list-item, upper-alpha) ". "; color: var(--blue); font-weight: 700; }

.legal-page__block a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Narrow phones ---------- */

@media (max-width: 359px) {
  :root { --gutter: 1rem; --step-figure: 1.875rem; }
  .hero .actions { flex-direction: column; align-items: center; }
  .button { padding-left: 1.25rem; }
  /* logo and Menu stay on one line (header 64 px, not 108) */
  .site-header__brand img { height: 1.625rem; }
  .js .site-header__inner { column-gap: 0.75rem; }
  .menu-toggle { padding: 0 0.875rem; }
}

/* ---------- Motion layer (main.js; only under html.js) ---------- */

/* Words of the H1 move as blocks for the cover exit */
.js .hero__title .w { display: inline-block; }

/* the pill always takes its own line, as on the cover («Trasformiamo la / sostenibilità in / valore concreto») */
.hero__title .w.hero__pill { display: table; margin-inline: auto; }

/* Header: compacts after the cover; the menu marks the section in view */
.site-header.is-compact .site-header__brand img { transform: scale(0.88); }
.site-header.is-compact { box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(18, 35, 58, 0.25); }

@media (prefers-reduced-motion: no-preference) {
  .site-header { transition: box-shadow 240ms var(--ease-out); }
  .site-header__brand img { transition: transform 240ms var(--ease-out); }
}

.site-nav__list a[aria-current] { color: var(--blue); }

/* Mobile menu: disclosure button (shown by main.js) and panel */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 1.125rem;
  border: var(--hairline) solid var(--blue);
  border-radius: var(--pill);
  background: transparent;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: var(--step-label);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-toggle[aria-expanded="true"] {
  background: var(--blue);
  color: var(--on-blue);
}

@media (max-width: 899px) {
  .js .site-header {
    position: sticky;
    top: 0;
  }

  .js .site-header__inner { padding-block: 0.625rem; }
  .js .site-header__brand { margin-right: auto; }

  /* main.js wraps the nav and the language switch in .site-header__panel: an overlay under the
     header, so opening the menu never moves the page. Without JS the nav stays a plain list. */
  .js .site-header__inner { position: relative; }

  /* Until main.js has built the panel (it adds .has-menu in the same task), the nav and the switch
     stay hidden, so a cold load on a phone never shows them and then collapses (CLS) */
  .js:not(.no-motion) .site-header:not(.has-menu) .site-nav,
  .js:not(.no-motion) .site-header:not(.has-menu) .lang-switch { display: none; } /* a script error adds .no-motion: the list comes back */

  .js .site-header__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: var(--inset);
    right: var(--inset);
    padding: 0.5rem 1.25rem 0.75rem;
    border-radius: var(--radius-l);
    background: var(--paper);
    box-shadow: var(--shadow-card), 0 0 0 1px var(--line);
    visibility: hidden;
  }

  .js .site-header.is-open .site-header__panel { visibility: visible; }
  .js .site-header__panel .site-nav { margin-top: 0; border-top: 0; }
  .js .site-header__panel .lang-switch { border-top: var(--hairline) solid var(--line); padding-top: 0.25rem; }
}

@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  /* the panel drops in from the header and lifts back, faster */
  .js .site-header__panel {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transform-origin: top center;
    transition: opacity var(--dur-undraw) var(--ease-in), transform var(--dur-undraw) var(--ease-in), visibility 0s linear var(--dur-undraw);
  }

  .js .site-header.is-open .site-header__panel {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-open) var(--ease-out), transform var(--dur-open) var(--ease-out), visibility 0s;
  }
}

@media (min-width: 900px) {
  .site-header__panel { display: contents; } /* desktop bar unchanged: nav order 1, lang order 2 */
  .menu-toggle { display: none; }
}

/* Image breaks (motion on): the card is pinned and opens to the full screen while scrolling.
   main.js adds .is-expand and tweens --ix / --iy / --r from the card's position in the grid to 0.
   The panel is full-bleed and one screen tall; padding and clip keep the content inside the window. */
.js .break.is-expand {
  width: auto;
  height: 100svh;
  min-height: 0;
  margin: 0 calc(-1 * var(--bleed, 0px));
  padding: var(--iy, 0px) var(--ix, 0px);
  border-radius: 0;
  clip-path: inset(var(--iy, 0px) var(--ix, 0px) round var(--r, 0px));
}

/* break 1: the sentence scales with the panel (main.js tweens --k from 1 to the panel ratio) */
.js .break--one.is-expand .break__text { font-size: calc(clamp(1.75rem, 1.3rem + 2vw, 3.25rem) * var(--k, 1)); }

/* the pinned wrapper takes the section space the card had */
.js .container:has(> .break.is-expand) { margin-top: var(--section-space); }


/* Image breaks (motion on): the photo settles from a slight zoom inside its frame */
@media (prefers-reduced-motion: no-preference) {
  .js .break__media img { transform-origin: 50% 40%; }
}

/* Timeline on phones: an accent line grows down the rule (main.js scrubs scaleY) */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .timeline__line {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--accent);
    transform-origin: center top;
    z-index: 1;
  }
}

/* Timeline as a horizontal track (class set by main.js on desktop). The wrap bleeds to both screen
   edges; the first and last years still start and end on the grid. */
@media (min-width: 900px) {
  /* the pin writes the column width inline on the wrap: the screen width measured by main.js
     (--wrap-w) wins, so the track is clipped at the screen edges, not at the grid column */
  .timeline-wrap.is-horizontal {
    margin-inline: calc(-1 * var(--bleed, 0px));
    padding-inline: var(--bleed, 0px);
    overflow: hidden;
    width: var(--wrap-w, auto) !important;
    max-width: none !important;
  }

  .timeline-wrap.is-horizontal .timeline {
    grid-template-columns: repeat(5, minmax(16rem, 1fr));
    width: max-content;
    min-width: 100%;
  }

  .timeline-wrap.is-horizontal .timeline__line { background: var(--accent); z-index: 1; }
  .timeline-wrap.is-horizontal::before {
    content: "";
    position: absolute;
    top: 0.375rem;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--line);
  }
}

/* ---------- Micro-interactions ---------- */

/* Press feedback: every control answers the finger within about 100 ms. iOS applies :active only
   because main.js registers a passive touchstart listener. */
.js a[href],
.js button { -webkit-tap-highlight-color: transparent; }

a:active { opacity: 0.85; text-decoration-thickness: 2px; transition-duration: var(--dur-press); }

/* Blocks press by tone and scale, never by fading; the logo link is never altered */
.button:active,
.download:active,
.chip:active,
.skip-link:active,
.site-header__brand:active,
.site-nav__list li:last-child a:active { opacity: 1; }
.button:active { background: var(--blue-deep); }
.button--light:active { background: var(--blue-soft); }
.download:active { border-color: var(--blue); }

@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out), transform var(--dur-state) var(--ease-out); }
  .button__badge .icon,
  .download .button__badge .icon,
  .company__link .icon { transition: transform 260ms var(--ease-out); }
  .download { transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform var(--dur-state) var(--ease-out); }
  .chip { transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform var(--dur-state) var(--ease-out); }
  .menu-toggle { transition: transform var(--dur-state) var(--ease-out); }

  .button:active,
  .chip:active,
  .menu-toggle:active { transform: scale(0.97); transition-duration: var(--dur-press); }
  .download:active { transform: scale(0.99); transition-duration: var(--dur-press); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* the arrow leans into the move: right arrows travel, the download arrow drops */
  .button:hover .button__badge .icon:has(use[href="#i-arrow"]),
  .company__link:hover .icon { transform: translateX(3px); }
  .button:hover .button__badge .icon:has(use[href="#i-download"]),
  .download:hover .button__badge .icon { transform: translateY(2px); }
}

@media (pointer: coarse) {
  /* a scroll that starts on a control cancels :active before anything flashes; release is never delayed */
  a:active,
  button:active { transition-delay: 50ms; }
}

/* Arrival mark: the company you came for. A 3 px stroke in the company colour draws across the top of
   the contact card while its address is the URL target (company card links, shared deep links). */
.contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--tone, var(--blue));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Hover: the card lifts, its border and top stroke take the company colour (same language as the
   certification boxes). */
@media (hover: hover) {
  .contact:hover {
    border-color: var(--tone, var(--blue));
    box-shadow: 0 2px 4px rgba(18, 35, 58, 0.06), 0 20px 40px -16px rgba(18, 35, 58, 0.24);
    transform: translateY(-4px);
  }

  .contact:hover::before { transform: scaleX(1); }
}

/* Arrival: the target card flashes the same mark once, then lets go (it used to stay on for as long
   as the URL kept the #fragment, which read as a stuck hover). */
@keyframes contact-arrive {
  0%, 70% { border-color: var(--tone, var(--blue)); }
  100% { border-color: var(--line); }
}

@keyframes contact-arrive-stroke {
  0% { transform: scaleX(0); }
  25%, 70% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* runs once; "backwards" only, so when it ends the card is ordinary again (hover included) */
.contact:has(.contact__address:target) { animation: contact-arrive 2.8s var(--ease-out) backwards; }
.contact:has(.contact__address:target)::before { animation: contact-arrive-stroke 2.8s var(--ease-out) backwards; }

/* with the script, the mark waits until the scroll has landed (main.js adds .is-arrived) */
.js:not(.no-motion) .contact:has(.contact__address:target):not(.is-arrived) { animation: none; }
.js:not(.no-motion) .contact:has(.contact__address:target):not(.is-arrived)::before { animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .contact { transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-open) var(--ease-out), transform var(--dur-open) var(--ease-out); }
  .contact::before { transition: transform var(--dur-undraw) var(--ease-out); }
  .contact.is-arrived::before { transition: transform var(--dur-arrive) var(--ease-out) 60ms; }
}

@media (prefers-reduced-motion: reduce) {
  .contact:hover { transform: none; }
  .contact:has(.contact__address:target)::before { animation-name: none; }
}

@media (forced-colors: active) {
  .contact::before { forced-color-adjust: none; background: Highlight; }
  /* the chosen filter chip keeps a visible state when the system repaints the page */
  .chip[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .chip[aria-pressed="true"]::before { background: HighlightText; }
}

/* Index (desktop): the current chapter gets a dot under it; hover draws a hairline */
@media (min-width: 900px) and (forced-colors: none) {
  .site-nav__list li:not(:last-child) a { position: relative; }

  .site-nav__list li:not(:last-child) a::after,
  .site-nav__list li:not(:last-child) a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% + 0.85em);
    pointer-events: none;
  }

  .site-nav__list li:not(:last-child) a::after {
    left: calc(50% - 0.1875rem);
    right: auto;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--accent);
    transform: scale(0);
  }

  .site-nav__list li:not(:last-child) a::before {
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
  }

  .site-nav__list li:not(:last-child) a[aria-current]::after { transform: scale(1); }

  @media (prefers-reduced-motion: no-preference) {
    .site-nav__list li:not(:last-child) a::after { transition: transform var(--dur-undraw) var(--ease-out); }
    .site-nav__list li:not(:last-child) a::before { transition: transform var(--dur-undraw) var(--ease-out); }
    .site-nav__list li:not(:last-child) a[aria-current]::after { transition: transform var(--dur-draw) var(--ease-out) 60ms; }
  }
}

@media (min-width: 900px) and (hover: hover) and (forced-colors: none) {
  .site-nav__list li:not(:last-child) a:hover::before,
  .site-nav__list li:not(:last-child) a:focus-visible::before { transform: scaleX(1); transform-origin: left center; }

  .site-nav__list li:not(:last-child) a[aria-current]:hover::before { transform: scaleX(0); }
}

/* Company card: its only action outlines the card in the company colour */
.company > article { transition: border-color var(--dur-state) var(--ease-out), box-shadow var(--dur-state) var(--ease-out); }

@media (hover: hover) {
  .company > article:has(.company__link:hover) { border-color: var(--tone); box-shadow: var(--shadow-card); }
}

.company > article:has(.company__link:focus-visible),
.company > article:has(.company__link:active) { border-color: var(--tone); }

/* Focus settles into register: the outline lands at 7 px and snaps to 3 px */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible { animation: focus-settle var(--dur-state) var(--ease-out); }
  .skip-link { transition: transform var(--dur-state) var(--ease-out); }
}

@keyframes focus-settle { from { outline-offset: 7px; } }

/* Filtered rows arrive instead of popping in */
@media (prefers-reduced-motion: no-preference) {
  .services.is-filtered tbody tr { animation: row-in 280ms var(--ease-out) both; }
}

@keyframes row-in { from { opacity: 0; transform: translateY(4px); } }

/* Timeline nodes register as the drawn accent line reaches them (main.js toggles .is-reached) */
.timeline__item::after {
  content: "";
  position: absolute;
  left: -0.1875rem;
  top: 0.8rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  pointer-events: none;
}

.timeline__item.is-reached::after { transform: scale(1); }
.timeline__item.is-reached::before { background: color-mix(in srgb, var(--accent) 16%, var(--paper)); }

@media (min-width: 900px) {
  .timeline__item::after { left: 0.25rem; top: -0.0625rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .timeline__item::after,
  .timeline__item::before { transition: transform var(--dur-state) var(--ease-out), background-color var(--dur-state) var(--ease-out); }
}

/* ---------- Ring cursor (fine pointers only; pure CSS, identical without JS) ----------
   Default: the open ring. Over anything actionable the missing quarter returns. Ink on light grounds,
   negative on dark ones (photos, the Ecomondo panel, blue fills, the footer). Touch, forced colours
   and increased contrast keep the system cursor. `cursor` inherits its computed value, so every
   surface that redefines --cursor re-declares `cursor`. Keep this block last. */
@media (hover: hover) and (pointer: fine) and (forced-colors: none) and (prefers-contrast: no-preference) {
  :root {
    --cur-ink: url("../../assets/img/cursor/ring-ink.svg") 12 12, auto;
    --cur-ink-act: url("../../assets/img/cursor/ring-ink-act.svg") 12 12, pointer;
    --cur-light: url("../../assets/img/cursor/ring-light.svg") 12 12, auto;
    --cur-light-act: url("../../assets/img/cursor/ring-light-act.svg") 12 12, pointer;
    --cursor: var(--cur-ink);
    --cursor-act: var(--cur-ink-act);
  }

  .ecomondo__card,
  .break,
  .site-footer {
    --cursor: var(--cur-light);
    --cursor-act: var(--cur-light-act);
  }

  /* blue fills take the light ring; white and mint fills the ink one */
  .skip-link,
  .button,
  .chip[aria-pressed="true"],
  .menu-toggle[aria-expanded="true"],
  .site-nav__list li:last-child a { --cursor-act: var(--cur-light-act); }

  .button--light,
  .ecomondo .button--light { --cursor-act: var(--cur-ink-act); }

  html,
  .ecomondo__card,
  .break,
  .site-footer { cursor: var(--cursor); }

  a[href],
  button,
  .menu-toggle,
  .chip { cursor: var(--cursor-act); }

  /* copying an address or a VAT number is a real B2B job: the I-beam returns there only */
  .contact__place,
  .legal { cursor: text; }
}

/* ---------- Ring cursor, live (main.js setupRingCursor) ----------
   The ring drawn by the page: the bottom-right quarter is missing and draws in over anything actionable,
   then retracts. While it is active the system pointer is hidden, except over copyable data (I-beam). */
.has-ring-cursor,
.has-ring-cursor * { cursor: none !important; }

/* (0,2,0) beats `.has-ring-cursor *`: the I-beam reaches the list items inside .legal too */
.has-ring-cursor :is(.contact__place, .legal),
.has-ring-cursor :is(.contact__place, .legal) * { cursor: text !important; }

@media print {
  .ring-cursor { display: none !important; }
}

.ring-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 24px;
  height: 24px;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  --rc-core: #0F1A17; /* ink ring on light grounds, as ring-ink.svg */
  --rc-key: #FFFFFF;
}

.ring-cursor.is-shown { opacity: 1; }
.ring-cursor.is-shown.is-text { opacity: 0; } /* the I-beam takes over on copyable data */
.ring-cursor.is-light { --rc-core: #FFFFFF; --rc-key: #0F1A17; } /* negative on dark grounds, as ring-light.svg */

.ring-cursor path { fill: none; stroke-linecap: round; }
.ring-cursor .rc-key path { stroke: var(--rc-key); stroke-width: 4px; }
.ring-cursor .rc-core path { stroke: var(--rc-core); stroke-width: 2px; }

/* The missing quarter: a dash longer than the arc, offset past its end, so nothing (not even a round cap)
   shows at rest; offset 0 draws it clockwise from the top-right quarter down to the bottom-left one. */
.ring-cursor .rc-q3 { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; }
.ring-cursor.is-act .rc-q3 { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ring-cursor { transition: opacity 120ms var(--ease-out); }
  .ring-cursor .rc-q3 { transition: stroke-dashoffset 180ms var(--ease-in) 40ms; }
  .ring-cursor.is-act .rc-q3 { transition: stroke-dashoffset 320ms cubic-bezier(0.33, 1, 0.68, 1); }
}

/* ---------- Print ---------- */

@media print {
  .site-header { position: static; backdrop-filter: none; }
  .hero__media,
  .break__media,
  .ecomondo__art,
  .filters,
  .menu-toggle { display: none !important; }
  .hero__cover,
  .break,
  .ecomondo__card { min-height: 0; background: none; color: var(--ink); }
  .break::after { display: none; }
  .break__text,
  .ecomondo__title,
  .ecomondo__meta { color: var(--ink); }
}