/* =========================================================================
   MORAMARCO — Design System & Site Styles
   Brand colors extracted from official Brand Identity (Moramarco Group):
     Ink   #12161a   Green #056a55   Sage #73a69c   Cream #d7d5cb
   Typography: Poppins (display/geometric, matches brand wordmark) + Inter (body)
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts (self-hosted for performance + no third-party requests pre-consent)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
  /* The 5 colors below are the ONLY hex values sampled directly, pixel by
     pixel, from the client-supplied Brand Identity PDF — nothing here is
     approximated or "close enough". Every other color/tint/shade used
     anywhere in this stylesheet is a pure alpha (rgba) or brightness
     filter derived from these 5 values: no additional hex is ever
     introduced. See README → "Brand identity compliance" for the audit. */
  --ink: #12161a;    /* sampled from brand PDF p.2  (MORAMARCO, white-on-dark bg) */
  --green: #056a55;  /* sampled from brand PDF p.11 (MORAMARCO, on green bg) */
  --sage: #73a69c;   /* sampled from brand PDF p.19 (icon mark accent, on green bg) */
  --cream: #d7d5cb;  /* sampled from brand PDF p.15 (MORAMARCO, cream-on-green bg) */
  --white: #ffffff;  /* sampled from brand PDF p.1  (MORAMARCO, black-on-white bg) */

  /* RGB triplets of the exact 5 colors above, for rgba()-based tints —
     used instead of inventing new hex shades for hover/tint/border states. */
  --ink-rgb: 18, 22, 26;
  --green-rgb: 5, 106, 85;
  --sage-rgb: 115, 166, 156;
  --cream-rgb: 215, 213, 203;

  --ink-70: rgba(var(--ink-rgb), 0.7);
  --ink-45: rgba(var(--ink-rgb), 0.45);
  --green-light: rgba(var(--green-rgb), 0.1);   /* exact green, translucent — icon badges, focus rings */
  --border: rgba(var(--ink-rgb), 0.14);          /* exact ink, translucent — hairline borders */

  --bg: var(--white);
  --surface: rgba(var(--cream-rgb), 0.32);       /* exact cream, translucent over white — alternate section wash */
  --text: var(--ink);
  --text-muted: var(--ink-70);

  --font-display: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --container: 1200px;
  --content-max: 780px;   /* shared cap for intro/lede text columns (.section-head, .prose) */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --shadow-sm: 0 1px 3px rgba(18, 22, 26, 0.08);
  --shadow-md: 0 12px 32px -12px rgba(18, 22, 26, 0.28);
  --shadow-lg: 0 24px 60px -20px rgba(18, 22, 26, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 620ms;

  --header-h: 84px;
}

/* -------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
p { margin: 0 0 var(--space-4); }
svg { display: block; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--ink);
  color: var(--white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus {
  top: var(--space-4);
}

:focus-visible {
  outline: 3px solid var(--sage);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.section {
  padding-block: var(--space-9);
}
.section--surface { background: var(--surface); }
.section--ink { background: var(--ink); color: var(--white); }
.section--green { background: var(--green); color: var(--white); }
.section-head {
  max-width: var(--content-max);
  margin-bottom: var(--space-7);
}
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--space-3);
}
.section--ink .eyebrow, .section--green .eyebrow { color: var(--sage); }
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
.lede {
  font-size: 1.125rem;
  color: var(--text-muted);
}
.section--ink .lede, .section--green .lede { color: rgba(255,255,255,0.82); }

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

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}
.btn-primary:hover { background: var(--white); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-solid {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn-solid:hover { filter: brightness(0.88); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent;
  color: var(--green);
  border-color: var(--border);
}
.btn-ghost:hover { border-color: var(--green); background: var(--green-light); }
.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------------------
   Header — "liquid glass" (glassmorphism over brand green)
   Solid --green is the no-backdrop-filter fallback (older browsers, and
   the @supports gate below covers Safari via the -webkit- prefix); the
   glass treatment layers on top only where backdrop-filter is supported.

   The blur/tint lives on a ::before layer rather than on .site-header
   itself: a backdrop-filter (like transform/filter) on an element turns
   it into the positioning containing block for any position:fixed
   descendant, which would hijack the mobile .main-nav flyout (fixed,
   nested inside the header) and break its full-viewport positioning.
   Keeping .site-header itself free of filter/backdrop-filter/transform
   avoids that trap.
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--white);
  isolation: isolate;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green);
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: linear-gradient(180deg, rgba(var(--green-rgb), 0.68), rgba(var(--green-rgb), 0.52));
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
}
.site-header.is-scrolled::before {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--shadow-md);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled::before {
    background: linear-gradient(180deg, rgba(var(--green-rgb), 0.82), rgba(var(--green-rgb), 0.68));
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
  }
}
@media (max-width: 640px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* Lighter blur radius on small/less powerful devices to keep scroll smooth. */
    .site-header::before,
    .site-header.is-scrolled::before {
      -webkit-backdrop-filter: blur(10px) saturate(150%);
      backdrop-filter: blur(10px) saturate(150%);
    }
  }
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
}
/* Exact "MM / SYSTEM CONSULTING" lockup, traced from the client's Brand
   Identity PDF (p.18, cream-on-green variant) — rendered at the color the
   source specifies for a green background, never retyped in a substitute
   font. See README → "Brand identity compliance". */
.brand__logo {
  height: 34px;
  width: auto;
  display: block;
  color: var(--cream);
}
.brand--footer .brand__logo { color: var(--cream); }

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.main-nav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  position: relative;
  color: var(--white);
  z-index: 1;
  transition: color var(--dur-2) var(--ease);
}
/* Soft glass pill that blooms behind the label on hover/focus — purely
   decorative (absolute, negative inset) so it never touches layout. */
.main-nav__link::before {
  content: "";
  position: absolute;
  inset: -8px -14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  z-index: -1;
  pointer-events: none;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .main-nav__link::before {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
.main-nav__link:hover::before,
.main-nav__link:focus-visible::before { opacity: 1; transform: scale(1); }
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--cream);
  transition: right var(--dur-2) var(--ease);
}
.main-nav__link:hover::after,
.main-nav__link:focus-visible::after,
.main-nav__link[aria-current="page"]::after { right: 0; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-pill);
  padding: 5px;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lang-switch {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.lang-switch:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255,255,255,0.5); }
.lang-switch a {
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.75);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.lang-switch a:hover:not([aria-current="true"]) {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}
.lang-switch a[aria-current="true"] {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(var(--ink-rgb), 0.18);
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--white);
  padding: var(--space-2);
}
.nav-toggle__box { width: 24px; height: 18px; position: relative; }
.nav-toggle__box span {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 8px; }
.nav-toggle__box span:nth-child(3) { top: 16px; }
.site-header[data-nav-open="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header[data-nav-open="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.site-header[data-nav-open="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: linear-gradient(rgba(var(--ink-rgb), 0.22), rgba(var(--ink-rgb), 0.22)), var(--green);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding: var(--space-6) var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
    overflow-y: auto;
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .main-nav {
      background: linear-gradient(rgba(var(--ink-rgb), 0.35), rgba(var(--ink-rgb), 0.35)), rgba(var(--green-rgb), 0.75);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      backdrop-filter: blur(16px) saturate(160%);
    }
  }
  .site-header[data-nav-open="true"] .main-nav {
    opacity: 1; transform: translateY(0); visibility: visible;
  }
  .main-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .main-nav__link { font-size: 1.3rem; }
  .nav-toggle { display: inline-flex; }
}

/* -------------------------------------------------------------------------
   Hero (matches provided layout mockup)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
  background: var(--ink);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(115,166,156,0.35), transparent 60%),
    linear-gradient(120deg, rgba(5,106,85,0.92), rgba(18,22,26,0.94)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px);
}
.hero__mark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  color: rgba(255,255,255,0.06);
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-8);
}
.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.6rem + 6.5vw, 6.2rem);
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0 0 var(--space-4);
}
.hero__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.35rem);
  letter-spacing: 0.02em;
  color: var(--cream);
  max-width: 640px;
  margin-bottom: var(--space-6);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.hero__meta {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-6);
  z-index: 1;
  display: flex;
  gap: var(--space-2);
}
.hero__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.hero__dot--active { background: var(--cream); }

@media (max-width: 640px) {
  .hero__meta { display: none; }
}

/* -------------------------------------------------------------------------
   Stats
   ------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  color: var(--green);
  line-height: 1;
}
.section--ink .stat__num, .section--green .stat__num { color: var(--cream); }
.stat__label {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  color: var(--text-muted);
}
.section--ink .stat__label, .section--green .stat__label { color: rgba(255,255,255,0.75); }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   Cards grids (values / services / portfolio)
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  height: 100%;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green);
  margin-bottom: var(--space-4);
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 {
  /* The card itself is always white regardless of the section it sits in
     (e.g. .section--ink), so its title needs its own dark color rather
     than inheriting the section's light-on-dark default — otherwise it's
     white text on a white card. */
  color: var(--text);
  /* Reserves room for the longest title in this grid across IT/EN copy
     ("Home Appliances & Industrial Washing Machines" wraps to 5 lines at
     the narrowest card width this grid reaches) so titles of varying
     length never push the paragraph below to a different start height
     across the row. */
  min-height: 5.75em;
  margin-bottom: var(--space-2);
}
.card p { color: var(--text-muted); margin-bottom: 0; }

/* -------------------------------------------------------------------------
   CTA banner
   ------------------------------------------------------------------------- */
.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}
.cta-banner h2 { margin-bottom: var(--space-2); }
.cta-banner p { color: rgba(255,255,255,0.75); margin: 0; max-width: 42ch; }

/* -------------------------------------------------------------------------
   Footer (matches mockup: green bar / icon / socials / url / ask us)
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--green);
  color: var(--white);
}
.site-footer__top {
  padding-block: var(--space-8);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.site-footer__brand p {
  color: rgba(255,255,255,0.78);
  max-width: 32ch;
}
.site-footer h3 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: var(--space-4);
}
.site-footer__links li { margin-bottom: var(--space-3); }
.site-footer__links a { color: rgba(255,255,255,0.82); transition: color var(--dur-1) var(--ease); }
.site-footer__links a:hover { color: var(--white); }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-block: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.footer-mark svg { width: 34px; height: 34px; color: var(--cream); }
.footer-mark__text { font-size: 0.7rem; line-height: 1.3; color: rgba(255,255,255,0.75); }
.social-list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.social-list a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.social-list a:hover { background: rgba(255,255,255,0.14); border-color: var(--white); }
.social-list svg { width: 17px; height: 17px; }
.ask-us {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
}
.ask-us__icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
}
.ask-us__icon svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* -------------------------------------------------------------------------
   Team (Contatti page)
   ------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  width: 100%;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.team-card__avatar {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(150deg, var(--green), var(--ink));
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
}
.team-card__avatar img,
.chairman-card__avatar img,
.modal__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card__body { padding: var(--space-5); }
.team-card__role { color: var(--green); font-weight: 600; font-size: 0.9rem; margin-bottom: var(--space-2); }
.team-card__more {
  /* Same color/border/hover formula as .btn-ghost (the site's secondary
     CTA), scaled down to fit a compact card rather than reusing .btn's
     full padding. Explicit transparent background: the bare <button>
     reset (line ~176) only sets font/cursor, so without this the UA's
     default light-gray button face shows through — invisible on the
     regular card (dark green text still reads) but nearly illegible
     for --invert's white text on the dark .chairman-card. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--green);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  margin-top: var(--space-3);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.team-card__more svg { width: 14px; height: 14px; transition: transform var(--dur-1) var(--ease); }
.team-card__more:hover,
.team-card__more:focus-visible {
  border-color: var(--green);
  background: var(--green-light);
}
.team-card:hover .team-card__more svg,
.team-card__more:focus-visible svg { transform: translateX(4px); }
/* Same trigger, tuned for the dark .chairman-card background */
.team-card__more--invert { color: var(--white); border-color: rgba(255,255,255,0.4); }
.team-card__more--invert:hover,
.team-card__more--invert:focus-visible {
  border-color: var(--white);
  background: rgba(255,255,255,0.12);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 22, 26, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
}
.modal-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-7);
  position: relative;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--dur-2) var(--ease);
}
.modal-overlay[data-open="true"] .modal { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  display: grid;
  place-items: center;
}
.modal__close svg { width: 18px; height: 18px; }
.modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.modal__avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, var(--green), var(--ink));
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.modal__role { color: var(--green); font-weight: 600; }
.modal__bio p { margin: 0 0 var(--space-3); }
.modal__bio p:last-child { margin-bottom: 0; }
.modal__bio h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin: var(--space-4) 0 var(--space-2);
}
.modal__bio ul { margin: 0 0 var(--space-3); padding-left: 1.15rem; list-style: disc; }
.modal__bio li { margin-bottom: var(--space-2); }
.modal__bio li:last-child { margin-bottom: 0; }
.modal__linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-weight: 600;
  color: var(--ink);
}
.modal__linkedin[hidden] { display: none; }
.modal__linkedin svg { width: 18px; height: 18px; color: var(--green); }

/* -------------------------------------------------------------------------
   Contact page: info + form + map
   ------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.info-list { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-6); }
.info-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.info-item__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
}
.info-item__icon svg { width: 20px; height: 20px; }
.info-item h3 { margin-bottom: 2px; font-size: 1rem; }
.info-item p { margin: 0; color: var(--text-muted); }
.info-item a { color: var(--text-muted); }
.info-item a:hover { color: var(--green); }

.map-frame {
  border: 0;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-md);
  filter: grayscale(0.15);
}

.brochure-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px dashed var(--sage);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-6);
}
.brochure-box__text h3 { margin-bottom: var(--space-1); }
.brochure-box__text p { margin: 0; color: var(--text-muted); }

/* Form */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { margin-bottom: var(--space-5); }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: var(--space-2);
}
.field .required { color: var(--green); }
.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-light);
  outline: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.field small.error {
  display: none;
  color: #b3261e;
  font-size: 0.82rem;
  margin-top: var(--space-2);
}
.field.has-error input,
.field.has-error textarea { border-color: #b3261e; }
.field.has-error small.error { display: block; }
.field--checkbox { display: flex; align-items: flex-start; gap: var(--space-3); }
.field--checkbox input { width: auto; margin-top: 4px; }
.field--checkbox label { font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; }
.field--checkbox a { color: var(--green); text-decoration: underline; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  display: none;
  font-weight: 600;
}
.form-status.is-visible { display: block; }
.form-status--success { background: var(--green-light); color: var(--ink); }
.form-status--error { background: #fbe9e7; color: #b3261e; }

/* -------------------------------------------------------------------------
   Page hero (inner pages, e.g. Contatti)
   ------------------------------------------------------------------------- */
.page-hero {
  /* Shared standard height for every inner-page hero (Chi Siamo, Contatti,
     …) so they read as one consistent banner across the site, rather than
     each stretching or shrinking to its own copy length. Deliberately
     shorter than the homepage's full-impact split hero (820px) — the
     homepage hero is a distinct, higher-drama moment, while inner pages
     get a confident but secondary title band. */
  min-height: 420px;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--white);
  padding-block: var(--space-8);
}
.page-hero .eyebrow { color: var(--sage); }
.page-hero p { color: rgba(255,255,255,0.78); max-width: 60ch; }

/* -------------------------------------------------------------------------
   Dual-Soul Hero (Home) — Industrial / Luxury Events split
   ------------------------------------------------------------------------- */
.hero--dual {
  position: relative;
  min-height: min(92vh, 820px);
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
  background: var(--ink);
}
.hero__split {
  position: absolute;
  inset: 0;
  display: flex;
}
.hero__split-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
}
/* Real photography sits as the bottom-most layer, underneath the exact
   same brand-tint gradients used before — the gradients now double as a
   readability scrim over the photo instead of being the whole background.
   Photo credit: client-provided images, see assets/images/hero/. */
.hero__split-panel--industrial {
  background-image:
    linear-gradient(160deg, rgba(5,106,85,0.58), rgba(18,22,26,0.68)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 30px),
    url("/assets/images/hero/industrial-division.webp");
  background-size: auto, auto, cover;
  background-position: 0 0, 0 0, 75% 35%;
  background-repeat: no-repeat;
}
.hero__split-panel--events {
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(215,213,203,0.55) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 65%, rgba(215,213,203,0.4) 0, transparent 60%),
    radial-gradient(1px 1px at 45% 80%, rgba(215,213,203,0.5) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(215,213,203,0.45) 0, transparent 60%),
    radial-gradient(1px 1px at 10% 70%, rgba(215,213,203,0.4) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 15%, rgba(215,213,203,0.45) 0, transparent 60%),
    linear-gradient(200deg, rgba(18,22,26,0.66), rgba(5,106,85,0.56)),
    url("/assets/images/hero/luxury-event-team.webp");
  background-size: auto, auto, auto, auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 65% 30%;
  background-repeat: no-repeat;
}
.hero__split-divider {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(215,213,203,0.35);
  z-index: 1;
}
.hero__panel-tag {
  position: absolute;
  bottom: var(--space-6);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
/* Aligned to the shared .container guide (144px at 1440px viewport) rather
   than the raw viewport edge, so the tags visually close the composition on
   the same grid the header and every section below it use. */
.hero__split-panel--industrial .hero__panel-tag {
  left: calc(max(0px, (100vw - var(--container)) / 2) + var(--space-5));
}
.hero__split-panel--events .hero__panel-tag {
  right: calc(max(0px, (100vw - var(--container)) / 2) + var(--space-5));
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-8);
  text-align: center;
  margin-inline: auto;
}
.hero__content-inner {
  max-width: 780px;
  margin-inline: auto;
  background: rgba(18, 22, 26, 0.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-6);
}
.hero--dual .eyebrow { justify-content: center; color: var(--sage); }
.hero__wordmark--dual {
  margin-bottom: var(--space-4);
}
/* Exact "MORAMARCO" wordmark, traced from the client's Brand Identity PDF
   (p.2, white-on-dark variant) — never retyped in a substitute font. */
.hero__wordmark-svg {
  height: clamp(2.1rem, 1.3rem + 3.4vw, 4.2rem);
  width: auto;
  display: block;
  margin: 0 auto var(--space-2);
  color: var(--white);
}
.hero__wordmark-sub {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.75rem + 1.3vw, 1.6rem);
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-wrap: balance;
}
.hero__tagline--dual {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  color: rgba(255,255,255,0.88);
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.hero__actions--dual {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.hero__actions--dual .btn svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .hero__split { flex-direction: column; }
  .hero__split-divider { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; }
  .hero--dual { min-height: min(96vh, 760px); }
  /* Stacked panels: anchor the industrial tag to the split's OUTER top
     edge instead of the shared inner edge at its panel's own bottom
     (= the split's vertical midpoint). The manifesto card is vertically
     centered and can grow taller than the split at narrow widths once
     its text wraps onto more lines, burying a mid-height tag underneath
     it — the events tag already sits at the split's outer bottom edge
     and was never affected, this mirrors the same safe anchor for it. */
  .hero__split-panel--industrial .hero__panel-tag {
    top: var(--space-6);
    bottom: auto;
  }
}

/* -------------------------------------------------------------------------
   Division sections (Industrial / Luxury Events)
   ------------------------------------------------------------------------- */
.division-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .division-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .division-grid { grid-template-columns: 1fr; } }

/* Partner logo strip */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  margin-block: var(--space-7);
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.partner-strip__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.5);
  filter: grayscale(1);
  transition: color var(--dur-2) var(--ease), filter var(--dur-2) var(--ease);
  white-space: nowrap;
}
/* Hover feedback only on the items that are actual links — the plain-text
   partner name (no link provided) stays visually static. */
a.partner-strip__item:hover { color: var(--white); filter: grayscale(0); }

/* Events division — lighter, editorial tone within the same brand palette */
.events-section {
  background: var(--surface);
}
.events-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 900px) { .events-layout { grid-template-columns: 1fr; gap: var(--space-6); } }
.events-visual {
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  /* Same luxury-event photo as the hero's events panel, reused here as
     the bottom layer under the existing star-field + brand gradient —
     ::after (frame) and __mark (watermark) below still sit above it. */
  background-image:
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,0.9) 0, transparent 60%),
    radial-gradient(2px 2px at 75% 35%, rgba(255,255,255,0.7) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 65%, rgba(255,255,255,0.8) 0, transparent 60%),
    radial-gradient(2px 2px at 85% 80%, rgba(255,255,255,0.6) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 85%, rgba(255,255,255,0.7) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 10%, rgba(255,255,255,0.6) 0, transparent 60%),
    linear-gradient(155deg, rgba(5,106,85,0.58) 0%, rgba(18,22,26,0.66) 100%),
    url("/assets/images/hero/luxury-event-team.webp");
  background-size: auto, auto, auto, auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 62% 28%;
  background-repeat: no-repeat;
  position: relative;
}
.events-visual::after {
  content: "";
  position: absolute; inset: 18px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: calc(var(--radius-lg) - 8px);
}

/* -------------------------------------------------------------------------
   Compliance badges
   ------------------------------------------------------------------------- */
/* Extra vertical/horizontal weight for this section only — it sits between
   two visually dense sections (Eventi, Contatto) and otherwise reads as a
   thin transitional strip rather than a section in its own right. */
.section--certifications {
  padding-block: calc(var(--space-9) + var(--space-6));
}
.section--certifications .section-head {
  margin-bottom: var(--space-8);
}
.section--certifications .badge-row {
  gap: var(--space-5);
}
.section--certifications .badge-chip {
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.badge-chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  color: var(--text);
  background: var(--white);
}
.section--ink .badge-chip, .section--green .badge-chip {
  border-color: rgba(255,255,255,0.3);
  color: var(--white);
  background: rgba(255,255,255,0.06);
}

/* -------------------------------------------------------------------------
   Select field (contact forms)
   ------------------------------------------------------------------------- */
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312161a' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}
.field select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-light);
  outline: none;
}

/* -------------------------------------------------------------------------
   Footer legal line
   ------------------------------------------------------------------------- */
.footer-legal {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
}
.footer-legal a { color: rgba(255,255,255,0.85); text-decoration: underline; }
.footer-legal a:hover { color: var(--white); }

/* -------------------------------------------------------------------------
   Chi Siamo / Governance
   ------------------------------------------------------------------------- */
.prose { max-width: var(--content-max); }
.prose p { color: var(--text-muted); }
.prose h2, .prose h3 { color: var(--text); margin-top: var(--space-7); }
.prose ul { margin: var(--space-4) 0; padding-left: 1.2rem; list-style: disc; }
.prose ul li { color: var(--text-muted); margin-bottom: var(--space-2); }

/* -------------------------------------------------------------------------
   Editorial grid — narrative column + typographic "aside" column, used to
   let Chi Siamo's intro blocks span the full 144–1296 guide instead of
   sitting in a single narrow .prose column. 12-col grid, ratio set per
   block via modifier; single column below 900px (same breakpoint already
   used by .events-layout for the same narrative+aside pattern).
   ------------------------------------------------------------------------- */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.editorial-grid__main { grid-column: span 7; }
.editorial-grid__aside { grid-column: span 5; }
.editorial-grid--8-4 .editorial-grid__main { grid-column: span 8; }
.editorial-grid--8-4 .editorial-grid__aside { grid-column: span 4; }
.editorial-grid--5-7 .editorial-grid__main { grid-column: span 5; }
.editorial-grid--5-7 .editorial-grid__aside { grid-column: span 7; }
.editorial-grid__main p { color: var(--text-muted); }
/* .eyebrow already carries its own brand color; keep it winning over the
   generic muted-paragraph rule above when nested directly in the main
   column (Filosofia, Garanzie, Contatto-hub all open with an eyebrow). */
.editorial-grid__main .eyebrow { color: var(--green); }
@media (max-width: 900px) {
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-grid__main, .editorial-grid__aside { grid-column: 1 / -1; }
}
/* Hairline separating each thematic block within Chi Siamo's intro —
   marks a real topic change (intro -> vision -> India), not decoration. */
.editorial-grid--divider {
  border-top: 1px solid var(--border);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
}

/* Proposal 1 — Company Intro aside: stat/label pairs, no card chrome */
.editorial-facts { display: flex; flex-direction: column; gap: var(--space-6); }
.editorial-facts__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
  margin: 0;
}
.editorial-facts__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-1) 0 0;
}

/* Proposal 2 — Vision aside: manifesto headline + minimal label list */
.editorial-manifesto__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 var(--space-5);
  line-height: 1.1;
}
.editorial-manifesto__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.editorial-manifesto__list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Proposal 3 — Europe/India aside: headline + existing INECO TECH facts.
   Plain flex column (no fixed height) so a future photo/map can be added
   as a first child without restructuring. */
.editorial-bridge { display: flex; flex-direction: column; gap: var(--space-5); }
.editorial-bridge__headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.editorial-bridge__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.editorial-bridge__list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-muted);
}
.editorial-bridge__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   Company Portfolio — full-grid partner directory (2 rows: global partners,
   Italian network), replacing the narrow .prose list. Hairlines only:
   between the two rows, and between columns within a row (echoes the
   multi-column partner list already used in the client's own brochure).
   ------------------------------------------------------------------------- */
.portfolio-directory { display: flex; flex-direction: column; }
.portfolio-directory__row {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-7);
  align-items: start;
}
.portfolio-directory__row:first-child { padding-top: 0; }
.portfolio-directory__row + .portfolio-directory__row { border-top: 1px solid var(--border); }
.portfolio-directory__row--pair { grid-template-columns: repeat(2, 1fr); }
.portfolio-directory__row--quad { grid-template-columns: repeat(4, 1fr); }
.portfolio-directory__kicker {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--space-5);
}
.portfolio-directory__intro {
  grid-column: 1 / -1;
  max-width: var(--content-max);
  color: var(--text-muted);
  margin: calc(var(--space-5) * -1) 0 var(--space-5);
}
.portfolio-directory__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.portfolio-directory__desc { color: var(--text-muted); margin: 0; }

@media (min-width: 561px) {
  .portfolio-directory__item { position: relative; }
  /* left hairline: every item but the first in a single-row (quad) layout;
     every "right column" item in a 2-col (pair) layout */
  .portfolio-directory__row--quad .portfolio-directory__item:not(:first-child)::before,
  .portfolio-directory__row--pair .portfolio-directory__item:nth-child(2n)::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: calc(var(--space-6) / -2);
    width: 1px;
    background: var(--border);
  }
  /* top hairline: second-row items when a --pair row wraps 4 items into 2x2 */
  .portfolio-directory__row--pair .portfolio-directory__item:nth-child(n+3)::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--space-6) / -2);
    height: 1px;
    background: var(--border);
  }
}
@media (max-width: 900px) {
  .portfolio-directory__row--quad { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .portfolio-directory__row--pair,
  .portfolio-directory__row--quad { grid-template-columns: 1fr; }
  .portfolio-directory__item:not(:first-child) {
    border-top: 1px solid var(--border);
    padding-top: var(--space-6);
    margin-top: var(--space-6);
  }
  .portfolio-directory__item::before,
  .portfolio-directory__item::after { display: none; }
}

.division-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 760px) { .division-overview { grid-template-columns: 1fr; } }
.division-overview__card {
  border-radius: var(--radius-md);
  padding: var(--space-6);
  color: var(--white);
}
.division-overview__card--industrial { background: linear-gradient(160deg, var(--green), var(--ink)); }
.division-overview__card--events { background: linear-gradient(160deg, var(--ink), var(--green)); }
.division-overview__card h3 { color: var(--white); }
.division-overview__card p { color: rgba(255,255,255,0.82); }
.division-overview__card a { color: var(--cream); font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }

.chairman-card {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-bottom: var(--space-8);
}
@media (max-width: 620px) { .chairman-card { flex-direction: column; text-align: center; gap: var(--space-4); } }
.chairman-card__avatar {
  width: 96px; height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(150deg, var(--sage), var(--green));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
}
.chairman-card__role { color: var(--sage); font-weight: 600; margin-bottom: var(--space-2); }
.chairman-card p:last-child { margin-bottom: 0; color: rgba(255,255,255,0.8); }

.division-team-head {
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
}
.division-team-head h3 { margin-bottom: var(--space-1); }
.division-team-head p { color: var(--text-muted); margin: 0; }

.team-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.team-teaser__avatars {
  display: flex;
}
.team-teaser__avatars span {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--green), var(--ink));
  color: var(--cream);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid var(--white);
  margin-left: -12px;
}
.team-teaser__avatars span:first-child { margin-left: 0; }
.team-teaser__text { flex: 1; min-width: 220px; }
.team-teaser__text h3 { margin-bottom: var(--space-1); }
.team-teaser__text p { margin: 0; color: var(--text-muted); }

/* -------------------------------------------------------------------------
   Utilities
   ------------------------------------------------------------------------- */
.flow > * + * { margin-top: var(--space-4); }
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }