@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  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;
}

:root {
  --ink: #16161C;
  --muted: #5C5C68;
  --meta: #9A9AAB;

  --brand: #2B2BA3;
  --brand-hover: #22228A;
  --navy: #11114A;
  --navy-ink: #14146B;
  --lilac: #A6A6F2;

  --surface: #F2F2F5;
  --placeholder: #E6E6EC;
  --border: #E7E7EC;
  --border-soft: #ECECF1;
  --border-mid: #D6D8DF;
  --hero-bg: #15151A;

  --gutter: 6vw;
  --maxw: 1240px;

  --r-card: 22px;
  --r-panel: 26px;
  --r-band: 32px;
  --r-pill: 999px;

  --mono: ui-monospace, Menlo, Consolas, monospace;

  --hatch: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(0, 0, 0, .022) 11px, rgba(0, 0, 0, .022) 22px);

  /* Ingrobimbo (kids) accent — the only place the palette leaves blue */
  --kids-bg: #FFF8EC;
  --kids-ink: #B5820F;
  --kids-badge: #ECB23C;
  --kids-badge-ink: #1A1208;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* clears the sticky topbar + header on anchor jumps */
}

body {
  font-family: 'Manrope', system-ui, sans-serif;
  background: #fff;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Placeholder slots (drop real photos in here) ---------- */

.ph-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--meta);
}

/* A slot holding a real photo drops the hatch and lets the image fill it. */
.product__media, .post__media, .media-panel, .choice__media { position: relative; overflow: hidden; }

.product__media:has(img),
.post__media:has(img),
.media-panel:has(img),
.choice__media:has(img) {
  background-image: none;
}

.product__media > img,
.post__media > img,
.media-panel > img,
.choice__media > img,
.hero__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The hero scrim must stay above the photo, and its caption above the scrim. */
.hero__media > img { z-index: 0; }
.hero__media::after { z-index: 1; }
.hero__caption { z-index: 2; }

/* ---------- Buttons & link CTAs ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15.5px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.btn--sm { font-size: 13px; padding: 9px 15px; gap: 7px; }
.btn--md { font-size: 16px; padding: 16px 28px; }
.btn--lg { font-size: 17px; padding: 17px 30px; gap: 9px; }
.btn__arrow { font-size: 19px; }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }

.btn--light { background: #fff; color: var(--navy-ink); }
.btn--light:hover { transform: translateY(-2px); }
.btn--light.btn--lg:hover { box-shadow: 0 16px 36px -16px rgba(255, 255, 255, .5); }

.btn--ghost {
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff;
  padding: 16px 28px;
}
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }


/* Sits on the brand-blue CTA band, where --light would compete with the primary action. */
.btn--translucent {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
}
.btn--translucent:hover { background: rgba(255, 255, 255, .24); }

.link-cta {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand);
}
.link-cta--lg { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }

/* ---------- Top bar + header ---------- */

.topbar-wrap { position: sticky; top: 0; z-index: 50; }

.topbar {
  background: var(--navy);
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
  font-weight: 600;
  padding: 9px var(--gutter);
}
.topbar__inner { display: flex; justify-content: flex-end; gap: 14px; }
.topbar a { color: rgba(255, 255, 255, .6); }
.topbar a:hover, .topbar .is-current { color: #fff; }
.topbar__sep { color: rgba(255, 255, 255, .3); }

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 14px;
  padding: 16px var(--gutter);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

/* flex-shrink: 0 — the nav is a nowrap row, so without this the logo is the only
   thing that can give way and it collapses into an illegible smear. */
.header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.header__logo img { height: 20px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3A3A44;
  white-space: nowrap;
}
.nav a:not(.nav__cta):hover { color: var(--brand); }
.nav a[aria-current="page"] { color: var(--brand); }

/* ---------- Submenus ----------
   A group's parent is a button, not a link: the guides declare "Occhiali vista"
   and "Programma fedeltà" as parents of other pages without giving either a page
   of its own. Desktop opens on hover or focus, mobile on click; the button's
   aria-expanded is the single source of truth either way. */

.nav__group { position: relative; }

.nav__parent {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.nav__parent:hover,
.nav__parent[aria-expanded="true"],
.nav__parent[data-holds-current] { color: var(--brand); }

.nav__chev {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .2s;
}
.nav__parent[aria-expanded="true"] .nav__chev { transform: rotate(-135deg) translateY(-1px); }

@media (min-width: 1260px) {
  .nav__sub {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 262px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: 0 26px 50px -22px rgba(20, 20, 80, .3);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 60;
  }

  /* The gap between button and panel would drop the hover, so bridge it. */
  .nav__group::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
  }

  .nav__group:hover .nav__sub,
  .nav__group:focus-within .nav__sub,
  .nav__parent[aria-expanded="true"] + .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .nav__group:hover .nav__chev { transform: rotate(-135deg) translateY(-1px); }

  .nav__sub a {
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.35;
    white-space: normal;
  }
  .nav__sub a:hover { background: var(--surface); }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle__bar {
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero-bg);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, .025) 14px, rgba(255, 255, 255, .025) 28px);
}
.hero__media:has(img) { background-image: none; }

/* Scrim sits above the photo so the headline keeps its contrast. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 8, 20, .86) 0%, rgba(8, 8, 20, .5) 48%, rgba(8, 8, 20, .05) 100%);
}

.hero__caption {
  position: absolute;
  right: 24px;
  bottom: 18px;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .4);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero__content { max-width: 660px; color: #fff; }

.hero--tall { min-height: 600px; }

.hero__title {
  font-size: clamp(42px, 6.4vw, 78px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero__title--sm { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; }

.hero__lead {
  margin-top: 26px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  max-width: 540px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* ---------- Section scaffolding ---------- */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 110px var(--gutter) 30px;
}
.section--narrow { max-width: 1080px; }
.section--center { text-align: center; }
.section--faq { max-width: 1100px; padding: clamp(70px, 9vw, 110px) var(--gutter) 40px; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 14px;
}
.eyebrow--accent { color: var(--lilac); }
.eyebrow--violet { color: #8C8CF0; }
.eyebrow--wide { margin-bottom: 22px; }
.eyebrow--plain { font-size: 14px; letter-spacing: normal; text-transform: none; margin-bottom: 10px; }

.h2 {
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 620px;
}
.h2--xl { font-size: clamp(32px, 4.6vw, 56px); max-width: none; }
.h2--lg { font-size: clamp(30px, 4.4vw, 52px); max-width: none; }
.h2--sm { font-size: clamp(28px, 4vw, 46px); line-height: 1.06; max-width: 600px; }
.h2--loose { line-height: 1.08; }

.section__title--spaced { margin-bottom: 46px; }

.section__lead {
  margin: 24px auto 0;
  max-width: 660px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}
.section__lead--tight { max-width: 540px; font-size: 18px; line-height: 1.55; margin-top: 20px; }
.section__lead--mid { max-width: 560px; font-size: 18px; margin-top: 20px; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 48px;
}
.section__head--center {
  display: block;
  text-align: center;
  margin-bottom: 54px;
}
.section__head--roomy { margin-bottom: 60px; }

.section__aside {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 340px;
}

/* ---------- Perché Ingrovision ---------- */

.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 20px;
  margin-top: 64px;
  text-align: left;
}
.reasons--flush { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.reason { background: var(--surface); border-radius: var(--r-card); padding: 32px; }
.reasons--flush .reason { padding: 34px; }
.reasons--flush .reason__title { font-size: 21px; margin-bottom: 12px; }
.reasons--flush .reason__desc { line-height: 1.6; }
.reason__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.reason__desc { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Products ---------- */

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.product {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.product:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -26px rgba(20, 20, 80, .3); }

/* B2B catalogue cards: outlined rather than filled, and not links. */
.product--outline { background: none; border: 1px solid var(--border); }
.product--outline:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(20, 20, 80, .25); }
.product--outline .product__media { height: 180px; }
.product--outline .product__body { padding: 24px; }
.product--outline .product__desc { margin-bottom: 0; }

.product__media {
  display: flex;
  align-items: flex-end;
  height: 190px;
  padding: 16px;
  background-color: var(--placeholder);
  background-image: var(--hatch);
}

.product__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 26px; }
.product__name { font-size: 19px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 8px; }
.product__desc { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-bottom: 18px; flex: 1; }
.product .link-cta { font-size: 14.5px; }

/* ---------- Split panels (Guardaroba / Fedeltà) ---------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}

.panel { border-radius: var(--r-panel); padding: 46px; }
.panel--surface { background: var(--surface); }
.panel--plain { background: #fff; }
.panel--centered { text-align: center; display: flex; flex-direction: column; align-items: center; }
.panel--centered .panel__desc { margin-bottom: 24px; }
.panel__media { display: block; width: 100%; max-width: 330px; margin-bottom: 4px; }
.panel__media img { width: 100%; height: auto; display: block; }
.panel__title--brand { color: var(--brand); }
.btn--soft { background: rgba(43, 43, 163, .09); color: var(--brand); }
.btn--soft:hover { background: rgba(43, 43, 163, .15); }
.btn--quiet { background: var(--surface); color: var(--ink); }
.btn--quiet:hover { background: #E6E6EC; }
.section--tight { padding-top: 10px; }
.split--tight { align-items: center; margin-top: 8px; }
/* Dark loyalty band: the cards sit on the navy instead of being white plates. */
.section-navy .step { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .16); }
.section-navy .step__title, .section-navy .tile__title { color: #fff; }
.section-navy .step__desc, .section-navy .tile__desc { color: rgba(255, 255, 255, .68); }
.section-navy .step__num { background: rgba(255, 255, 255, .14); color: #fff; }
.section-navy .eyebrow { color: #8FB4FF; }
.section-navy .section--narrow { max-width: 820px; margin: 0 auto; padding: 0; }

/* Side-by-side card: photo and a short checklist, on a light plate. */
.feature-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.4vw, 30px);
}
.feature-card__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 10; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card__lead { margin-top: 12px; font-size: 16px; color: var(--muted); }
.ticks--plain { margin-top: 10px; padding-left: 20px; list-style: disc; font-size: 16px; line-height: 1.9; color: var(--muted); }
.h2--xs { font-size: clamp(22px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
/* A light FAQ inside a dark page: the guide ends the dark treatment before it. */
.section--faq-light { background: #fff; max-width: none; }
.section--faq-light > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.theme-dark .section--faq-light .faq__q,
.theme-dark .section--faq-light .h2 { color: var(--ink); }
.theme-dark .section--faq-light .faq__a { color: var(--muted); }
.theme-dark .section--faq-light .faq__item { border-color: var(--border-soft); }
.theme-dark .section--faq-light .faq__icon { background: var(--surface); color: var(--brand); }
.theme-dark .section--faq-light .eyebrow { color: var(--brand); }
.theme-dark .section--faq-light .info-band { background: var(--surface); border-color: transparent; }
.theme-dark .section--faq-light .info-band__title { color: var(--ink); }
.theme-dark .section--faq-light .info-band__text { color: var(--muted); }
.theme-dark .section--faq-light .info-band .btn--primary { background: var(--copper); }
.btn--dark { background: #14141F; color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.btn--dark:hover { background: #20202E; }
.media-panel--square { aspect-ratio: 1 / 1; }
/* MPO specification block: the badge sits beside the feature cards, as in the guide. */
.eyebrow--light { color: rgba(255, 255, 255, .72); }
.assurances--light { color: rgba(255, 255, 255, .78); }
.partner-mark--center { display: flex; flex-direction: column; align-items: center; gap: 8px; width: auto; margin: 46px auto 0; }
.partner-mark--center img { height: 30px; width: auto; }
.partner-mark__label { font-size: 13px; color: var(--muted); }
.mpo-specs { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 2.5vw, 40px); align-items: start; margin-top: 40px; }
.mpo-specs__badge { display: block; width: clamp(80px, 8vw, 110px); }
.mpo-specs__badge img { width: 100%; height: auto; }
.mpo-specs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; list-style: none; }
.mpo-specs .mpo-card { background: var(--surface); border-color: transparent; padding: 24px 26px; }
.mpo-specs .mpo-card__title { font-size: 17px; margin-bottom: 10px; color: var(--ink); }
.mpo-specs .mpo-card__desc { font-size: 14.5px; color: var(--muted); }
.section--narrow-wide { max-width: 1060px; margin: 0 auto; }
/* Secondary action: the guides draw a white plate with a clearly visible edge,
   so it reads both on white and on a tinted section. */
.btn--outline { background: #fff; color: var(--ink); border: 1px solid #B9BABF; }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 700px) { .mpo-specs { grid-template-columns: 1fr; } }
.points { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
.point { display: flex; align-items: flex-start; gap: 16px; }
.point__icon { flex: none; width: 34px; height: 34px; }
.point__icon img { width: 100%; height: 100%; }
.point__title { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.point__desc { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.tile__photo { display: block; margin-bottom: 20px; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; }
.tile__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The guides let the still life set its own height, so the photo is never
   framed by a strip of empty panel. */
.media-panel--wide { margin-top: 54px; border-radius: 24px; overflow: hidden; }
.media-panel--wide > img { position: static; width: 100%; height: auto; display: block; }
.section__lead--strong { font-weight: 700; color: var(--ink); }
.section__note { margin-top: 22px; font-size: 14.5px; line-height: 1.7; color: var(--muted); }

.media-panel--square img { width: 100%; height: 100%; object-fit: cover; }



.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding: 30px 34px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-card);
}
.callout__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.callout__desc { margin-top: 8px; max-width: 520px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .68); }

.section-navy .note, .section-navy .panel--surface { background: rgba(255, 255, 255, .06); }


.panel--navy { background: var(--navy); color: #fff; }

.panel__title { font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 18px; }
.panel__desc { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-bottom: 28px; }
.panel__desc strong { color: var(--ink); }
.panel--navy .panel__desc { color: rgba(255, 255, 255, .72); }

.loyalty {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px;
  transition: border-color .2s, transform .2s;
}
.loyalty:hover { border-color: var(--brand); transform: translateY(-3px); }

.loyalty__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}
.loyalty__title { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.loyalty__desc { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; flex: 1; }

/* ---------- Blog ---------- */

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}

.post { display: flex; flex-direction: column; }

.post__media {
  display: flex;
  align-items: flex-end;
  height: 200px;
  padding: 14px;
  border-radius: 20px;
  margin-bottom: 18px;
  background-color: var(--placeholder);
  background-image: var(--hatch);
}

.post__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 10px;
}
.post__title { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.post:hover .post__title { color: var(--brand); }

.posts--wide { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 26px; }
.post__media--tall { height: 210px; }
.post__title--lg { font-size: 20px; margin-bottom: 10px; }
.post__excerpt { display: block; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* ---------- Blog: head + featured article ---------- */

.blog-head { padding: 90px var(--gutter) 0; }
.eyebrow--tightish { margin-bottom: 18px; }

.blog-head__title {
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.035em;
  max-width: 760px;
  text-wrap: balance;
}

.section--featured { padding: 50px var(--gutter) 0; }
.section--grid { padding: 80px var(--gutter) 0; }
.section--articles { padding: 56px var(--gutter) 0; }

.blog-head__lead {
  margin-top: 22px;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 560px;
}

/* B2B article cards: outlined product card with a tag instead of a CTA. */
.products--articles { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 26px; }
.product--article:hover { box-shadow: 0 22px 44px -26px rgba(20, 20, 80, .22); }
.product__media--article { height: 190px; padding: 14px; }
.product__body--article { padding: 26px; }

.article__tag {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.article__title { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; margin-bottom: 10px; }

.blog-head__title--wide { max-width: 720px; }

/* ---------- Service rows (B2B servizi) ---------- */

.section--rows { padding: 64px var(--gutter) 0; }
.service-rows { display: flex; flex-direction: column; gap: 16px; }

.service-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  align-items: start;
  background: var(--surface);
  border-radius: 24px;
  padding: clamp(28px, 3.5vw, 44px);
  scroll-margin-top: 120px;
}

.service-row__num {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand);
}

.service-row__title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.service-row__desc { font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 620px; }

.cta-band--dark { background: #0B0B0D; }

/* ---------- Prodotti B2B: jump pills + alternating blocks ---------- */

.blog-head__title--xwide { max-width: 960px; }

.jumps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.jump {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand);
  background: var(--surface);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  transition: background .2s, color .2s;
}
.jump:hover { background: var(--brand); color: #fff; }

.product-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: center;
  padding: 90px var(--gutter) 0;
  scroll-margin-top: 120px;
}

/* Alternate which side the image sits on, but only once there are two columns —
   stacked, the text must always come first. */
@media (min-width: 761px) {
  .product-block:nth-of-type(even) .product-block__text { order: 2; }
}

.eyebrow--brand { color: var(--brand); letter-spacing: .14em; margin-bottom: 14px; }

.product-block__title {
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 18px;
  text-wrap: balance;
}

.product-block__desc { font-size: 16.5px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; max-width: 460px; }
.product-block .benefits { gap: 12px; }

.media-panel--product { height: 400px; border-radius: var(--r-panel); padding: 20px; }

.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 36px;
  align-items: center;
}

.media-panel--featured { height: 360px; border-radius: var(--r-panel); padding: 20px; }

.featured__tag {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.featured__title {
  display: block;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.featured:hover .featured__title { color: var(--brand); }

.featured__excerpt { display: block; font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 460px; }
.featured__cta { margin-top: 22px; }

.section-spacer--sm { height: 80px; }

/* ---------- FAQ ---------- */

.faq__item { border-bottom: 1px solid var(--border); }

.faq__heading { font: inherit; font-weight: inherit; }

.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.faq__q { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }

.faq__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
}
.faq__icon::before { content: '+'; }
.faq__trigger[aria-expanded="true"] .faq__icon::before { content: '\2212'; }

.faq__a {
  padding: 0 4px 28px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 700px;
  white-space: pre-line; /* answers may carry authored line breaks */
}

/* ---------- CTA band ---------- */

.cta-band-wrap { padding: 0 var(--gutter); }
.cta-band-wrap--tall { padding-top: 100px; }
.cta-band-wrap--mid { padding-top: 80px; }
.cta-band--short { padding: clamp(48px, 7vw, 80px); }

.cta-band {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--brand);
  border-radius: var(--r-band);
  padding: clamp(48px, 7vw, 88px);
  text-align: center;
  color: #fff;
}

.cta-band__title {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.cta-band__title--sm { font-size: clamp(30px, 4.6vw, 54px); }
.cta-band__title--xs { font-size: clamp(28px, 4.4vw, 50px); }
.btn--cta-tight { margin-top: 28px; }

.cta-band__lead {
  margin: 22px auto 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}
.cta-band__lead--tight { max-width: 500px; margin-top: 20px; }

.btn--cta { font-size: 16.5px; padding: 16px 30px; gap: 9px; margin-top: 32px; }

.cta-band .btn { margin-top: 36px; }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 36px;
}
.cta-band__actions .btn { margin-top: 0; }

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

.footer {
  margin-top: 90px;
  background: var(--navy);
  color: #fff;
  padding: 80px var(--gutter) 44px;
}

/* Booking bar the guides put above the footer columns on every B2C page. */
.footer__cta {
  max-width: var(--maxw);
  margin: 0 auto clamp(44px, 5vw, 70px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px 26px;
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 3vw, 38px);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-card);
}
.footer__cta-icon { width: 44px; height: 44px; color: var(--brand); }
.footer__cta-icon .icon { width: 100%; height: 100%; }
.footer__cta-title { font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -.02em; }
.footer__cta-text { margin-top: 5px; font-size: 14.5px; color: rgba(255, 255, 255, .62); }
@media (max-width: 720px) {
  .footer__cta { grid-template-columns: auto 1fr; }
  .footer__cta .btn { grid-column: 1 / -1; justify-self: start; }
}

.footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 40px;
}

.footer__logo { display: inline-block; margin-bottom: 18px; }
.footer__logo img { height: 28px; width: auto; }

.footer__payoff { margin-bottom: 20px; font-size: 13px; letter-spacing: .02em; color: rgba(255, 255, 255, .5); }

.footer__blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .6);
  max-width: 230px;
}

.footer__col--contact a { display: flex; align-items: flex-start; gap: 10px; }
.footer__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand); }
.footer__icon .icon { width: 100%; height: 100%; }

.footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.footer__col a { color: rgba(255, 255, 255, .78); }
.footer__col a:hover { color: #fff; }

.footer__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 6px;
}

.footer__bottom {
  max-width: var(--maxw);
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}

.footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }

/* ---------- Split hero / media panels (B2B) ---------- */

.hero-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 56px;
  align-items: center;
  padding-top: 90px;
}
.hero-split--reverse { gap: 48px; }
.hero-split--reverse > div:first-child { order: -1; }

.hero-split__title {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hero-split__lead {
  margin-top: 26px;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 500px;
}

.hero-split__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.hero-split__heading { margin-bottom: 22px; }
.hero-split__body { font-size: 17px; line-height: 1.6; color: var(--muted); margin-bottom: 30px; max-width: 480px; }

.media-panel {
  display: flex;
  align-items: flex-end;
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(0, 0, 0, .022) 13px, rgba(0, 0, 0, .022) 26px);
}
.media-panel .ph-caption { font-size: 11px; letter-spacing: .09em; }
.media-panel--hero { height: 440px; border-radius: 28px; padding: 22px; }
.media-panel--split { height: 340px; border-radius: var(--r-panel); padding: 20px; }
.media-panel--portrait { height: auto; aspect-ratio: 5 / 7; }

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

.stats-section { padding-top: 30px; padding-bottom: 30px; }
.stats-section--head { padding-top: 64px; padding-bottom: 0; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 28px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 38px 0;
}

.stat__value { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.stat__label { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ---------- Dark section (B2B servizi) ---------- */

.section-dark { background: #0B0B0D; color: #fff; margin-top: 100px; }
.section-dark__inner { max-width: var(--maxw); margin: 0 auto; padding: 100px var(--gutter); }

.section-dark__center {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 100px) var(--gutter);
  text-align: center;
}

.section-dark__lead {
  margin: 24px auto 0;
  max-width: 600px;
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  overflow: hidden;
}

.service { background: #0B0B0D; padding: 38px 34px; }
.service__num { display: block; font-size: 13px; font-weight: 700; color: #8C8CF0; margin-bottom: 16px; }
.service__title { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 12px; }
.service__title--sm { font-size: 20px; }
.service__desc { display: block; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .62); }

/* ---------- Centred page head ---------- */

.page-head { max-width: 960px; margin: 0 auto; text-align: center; padding: 100px var(--gutter) 0; }

.page-head__title {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.page-head__lead {
  margin: 26px auto 0;
  max-width: 600px;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.55;
  color: var(--muted);
}
.page-head__lead strong { color: var(--ink); }
.page-head__title--sm { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; }
.page-head__lead--sm { max-width: 560px; font-size: clamp(18px, 2.1vw, 21px); }
.page-head__lead--wide { max-width: 620px; }

.section--flush { padding: 70px var(--gutter) 0; }
.section--flush-top { padding: 100px var(--gutter) 0; }

.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.reason--sm .reason__desc { font-size: 15px; }
.reason__title--sm { font-size: 19px; letter-spacing: -.015em; }

/* ---------- Loyalty plans ---------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }

.plan {
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: clamp(32px, 4vw, 48px);
}
.plan--kids { background: var(--kids-bg); }

.plan__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 16px;
}
.plan--kids .plan__tag { color: var(--kids-ink); }

.plan__title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.plan__desc { font-size: 16px; line-height: 1.6; color: var(--muted); margin-bottom: 26px; }

.benefits { display: flex; flex-direction: column; gap: 14px; }

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
}

.benefit__check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  margin-top: 1px;
}

.benefits--dot { gap: 10px; }
.benefits--dot .benefit__check { width: 6px; height: 6px; background: var(--ink); font-size: 0; margin-top: 8px; }
.plan--kids .benefit__check { background: var(--kids-badge); color: var(--kids-badge-ink); }

.notice-section { max-width: 900px; margin: 0 auto; padding: 70px var(--gutter) 0; text-align: center; }

.notice {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 28px 32px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* The guide runs this line full width, with the Lucca skyline drawn beside it. */
.notice-section--wide { max-width: none; padding: 0; }
.notice-section--wide .notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  max-width: none;
  border-radius: 0;
  padding: 30px var(--gutter);
  text-align: left;
}
.notice__mark { flex: none; width: clamp(150px, 16vw, 230px); height: auto; }
.notice-section--wide .notice > span { max-width: 560px; }
@media (max-width: 620px) {
  .notice-section--wide .notice { flex-direction: column; text-align: center; }
}

/* ---------- Numbered ladder (inside a panel) ---------- */

.ladder { display: flex; flex-direction: column; gap: 20px; margin-top: 6px; list-style: none; }
.rung { display: flex; gap: 16px; align-items: flex-start; }

.rung__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  font-weight: 800;
  font-size: 15px;
}

.rung__title { display: block; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.rung__desc { display: block; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .68); }

.media-panel--tall { min-height: 380px; border-radius: var(--r-panel); padding: 22px; }

/* ---------- Steps (numbered path) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 20px;
  list-style: none;
  counter-reset: none;
}

.steps--chain { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.h2--chain { max-width: 640px; margin-bottom: 52px; }

.step { background: var(--surface); border-radius: var(--r-card); padding: 32px; }
.steps--chain .step { padding: 34px; }

/* The Vista Plus guide lays the four stages as full-width rows: icon, number, copy. */
/* Row of icon claims inside a photo band, as the Vista Plus guide sets them. */
.claims { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 46px); margin-top: 32px; list-style: none; }
.claim { display: flex; align-items: center; gap: 11px; max-width: 200px; }
@media (min-width: 900px) {
  /* the guide keeps the three claims on one line under the copy */
  .claims { flex-wrap: nowrap; gap: 26px; }
  .claim { max-width: none; }
}
.claim__icon { flex: none; width: 34px; height: 34px; }
.claim__icon img { width: 100%; height: 100%; }
.claim__label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; }
.hero__link { display: inline-block; margin-top: 18px; color: #fff; }

.steps-rows { display: flex; flex-direction: column; gap: 16px; margin-top: clamp(36px, 4vw, 56px); list-style: none; }
.step-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.6vw, 38px);
}
.step-row__icon { width: 46px; height: 46px; flex: none; }
.step-row__icon img { width: 100%; height: 100%; }
.step-row__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.step-row__title { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.step-row__desc { margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--ink); }
@media (max-width: 620px) {
  .step-row { grid-template-columns: auto 1fr; row-gap: 12px; }
  .step-row__icon { grid-row: span 2; width: 38px; height: 38px; }
}

/* Cards laid over the photo of a light hero: small plates, icon then number. */
.steps--over {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 18px;
  margin-top: clamp(40px, 5vw, 70px);
  list-style: none;
}
.step--sm { padding: 22px 20px 24px; background: #fff; box-shadow: 0 20px 40px -30px rgba(20, 20, 80, .45); }
.step--sm .step__num { width: 26px; height: 26px; font-size: 13px; margin-bottom: 0; }
.step__icon { display: block; width: 44px; height: 44px; margin-bottom: 18px; }
.step__icon img { width: 100%; height: 100%; }
.step--sm { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.step__title--sm { font-size: 16px; line-height: 1.3; }

.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 20px;
}

.step__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.step__desc { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* ---------- Booking form ---------- */

.form-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 56px;
  align-items: center;
  padding-bottom: 20px;
}

.form-section__lead {
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 440px;
}

.perks { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }

.perk {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.perk__check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
}

.form {
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form__title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Contatti ---------- */

.form-section--top { align-items: start; padding-top: 80px; }
.section-spacer { height: 90px; }

.contact__title {
  font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.contact__lead {
  margin-top: 22px;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 460px;
}

.contacts { display: flex; flex-direction: column; gap: 18px; margin-top: 38px; }
.contact { display: flex; gap: 14px; align-items: center; }

.contact__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  font-size: 19px;
}

.contact__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.contact__value { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); }
a.contact__value:hover { color: var(--brand); }

.media-panel--map { height: 220px; margin-top: 34px; border-radius: var(--r-card); padding: 18px; }

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__field { display: flex; flex-direction: column; gap: 6px; }

.form__label { font-size: 13px; font-weight: 700; color: var(--muted); }

.form__input {
  padding: 15px 18px;
  border-radius: 12px;
  border: 1px solid #DADAE3;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  width: 100%;
}
.form__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.form__select { color: var(--muted); }
.form__textarea { resize: vertical; }

.form__input[aria-invalid="true"] { border-color: #C0392B; }
.form__error { font-size: 13px; font-weight: 600; color: #C0392B; }
.form__error--summary { padding: 12px 14px; background: #FDECEA; border-radius: 10px; }

.form__submit {
  margin-top: 4px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 16px;
  border: none;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
.form__submit:hover { background: var(--brand-hover); }

.form__legal { font-size: 12.5px; color: var(--meta); line-height: 1.5; text-align: center; }

.form__done { text-align: center; padding: 40px 10px; }
.form__done-icon { font-size: 40px; margin-bottom: 14px; }
.form__done-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.form__done-text { font-size: 16px; color: var(--muted); line-height: 1.55; }

/* ---------- Splash (home: choose B2B / B2C) ---------- */

.splash { min-height: 100vh; display: flex; flex-direction: column; }

.splash__header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.splash__logo { display: inline-flex; align-items: center; }
.splash__header .splash__logo img { height: 28px; width: auto; }

.splash__nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.splash__sep { color: #D6D6DE; }
.splash__nav-active { color: #1A1A70; }

.splash__main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) var(--gutter) clamp(18px, 2.5vh, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.splash__intro { max-width: 920px; }
.splash__eyebrow { letter-spacing: .18em; margin-bottom: 16px; }

.splash__title {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -.035em;
  color: #15151C;
}

.splash__lead {
  margin-top: 18px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 560px;
}

.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 24px;
  margin-top: clamp(24px, 4vh, 48px);
}

.choice {
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.choice--dark { background: #0B0B0D; color: #fff; }
.choice--light { background: var(--surface); color: #15151C; }
.choice--dark:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .45); }
.choice--light:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -28px rgba(20, 20, 80, .28); }

.choice__media {
  display: flex;
  align-items: flex-end;
  height: clamp(110px, 16vh, 180px);
  padding: 20px;
}
.choice--dark .choice__media {
  background-color: var(--hero-bg);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255, 255, 255, .03) 12px, rgba(255, 255, 255, .03) 24px);
}
.choice--dark .ph-caption { font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .4); }
.choice--light .choice__media {
  background-color: #E4E4EA;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(0, 0, 0, .025) 12px, rgba(0, 0, 0, .025) 24px);
}
.choice--light .ph-caption { font-size: 11px; letter-spacing: .1em; }

.choice__body { padding: 24px 30px 28px; }

.choice__tag {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.choice--dark .choice__tag { color: #8C8CF0; }
.choice--light .choice__tag { color: var(--brand); }

.choice__name { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }

.choice__desc { display: block; font-size: 14.5px; line-height: 1.5; margin-bottom: 18px; }
.choice--dark .choice__desc { color: rgba(255, 255, 255, .62); }
.choice--light .choice__desc { color: var(--muted); }

.choice__cta { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; }
.choice--dark .choice__cta { color: #fff; }
.choice--light .choice__cta { color: var(--brand); }

.splash__footer {
  padding: 18px var(--gutter);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
  color: var(--meta);
  font-size: 14px;
}
.splash__footer .splash__logo img { height: 22px; width: auto; }

/* ---------- Responsive ---------- */

@media (max-width: 1259px) {
  .nav-toggle { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 18px 30px -20px rgba(20, 20, 80, .35);
    font-size: 16px;
    white-space: normal;
  }
  .nav:not(.is-open) { display: none; }
  .nav a:not(.nav__cta) { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  .nav__cta { justify-content: center; margin-top: 18px; font-size: 15px; padding: 14px 20px; }

  .header { position: relative; flex-wrap: nowrap; }

  /* Stacked menu: a group becomes an accordion row rather than a floating panel. */
  .nav__parent {
    width: 100%;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 16px;
    font-weight: 600;
  }

  .nav__sub { display: none; padding: 4px 0 10px 14px; }
  .nav__parent[aria-expanded="true"] + .nav__sub { display: flex; flex-direction: column; }
  .nav__sub a:not(.nav__cta) { font-size: 15px; padding: 11px 0; border-bottom: none; color: var(--muted); }
  .nav__sub a[aria-current="page"] { color: var(--brand); }
}

@media (min-width: 761px) {
  /* Sticky only once the form sits beside the copy; stacked, it would trap the page. */
  .form--sticky { position: sticky; top: 130px; }
}

@media (max-width: 760px) {
  .section { padding-top: 80px; }
  .form-section, .hero-split { gap: 34px; }
  .contact__lead, .form-section__lead { max-width: none; }
  .hero { min-height: 560px; padding: 90px 0; }
  .hero__caption { display: none; }
  .panel { padding: 34px; }
  .loyalty { padding: 32px; }
  .reason { padding: 26px; }
  .footer { padding-top: 60px; }
  .footer__grid { gap: 34px; }
  .section__head { margin-bottom: 36px; }
  .faq__q { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   Occhiali personalizzati — the richest page: colour bands, hover slider,
   MPO tech section. Tokens below are local to this page's palette.
   ========================================================================== */

:root {
  --magenta-a: #6E1E78;
  --magenta-b: #A81F63;
  --magenta-c: #C21F5E;
  --magenta-ink: #7A1A52;
  --yellow: #ECB23C;
  --yellow-ink: #1A1208;
  --yellow-body: #3A2A10;
  --tech-bg: #06060A;
  --tech-panel: #0E0E16;
}

/* ---------- Full-width colour bands (text | media) ---------- */

.band {
  overflow: hidden;
  /* Where the page container's content edge falls, so band copy lines up with
     the sections above and below while the photo still bleeds to the viewport. */
  --page-inset: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}

.band__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  align-items: stretch;
}

.band__text {
  padding: clamp(48px, 6vw, 92px) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.band__media {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  overflow: hidden;
}
.band__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.band--magenta { background: linear-gradient(125deg, var(--magenta-a) 0%, var(--magenta-b) 55%, var(--magenta-c) 100%); color: #fff; }
.band__media--magenta {
  background-color: rgba(0, 0, 0, .12);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, .05) 14px, rgba(255, 255, 255, .05) 28px);
}
.band__media--magenta:has(img) { background-image: none; }
.band__media--magenta .ph-caption { color: rgba(255, 255, 255, .6); font-size: 11px; letter-spacing: .09em; }

.band--yellow { background: var(--yellow); color: var(--yellow-ink); margin-top: clamp(70px, 9vw, 120px); }
.band__media--yellow {
  min-height: 420px;
  background-color: rgba(0, 0, 0, .08);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(0, 0, 0, .05) 14px, rgba(0, 0, 0, .05) 28px);
}
.band__media--yellow:has(img) { background-image: none; }
.band__media--yellow .ph-caption { color: rgba(0, 0, 0, .5); font-size: 11px; letter-spacing: .09em; }

.band--black { background: #0B0B0D; color: #fff; margin-top: clamp(70px, 9vw, 120px); }
.band__media--black {
  min-height: 480px;
  background-color: #141417;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, .03) 14px, rgba(255, 255, 255, .03) 28px);
}
.band__media--black:has(img) { background-image: none; }
.band__media--black .ph-caption { color: rgba(255, 255, 255, .4); font-size: 11px; letter-spacing: .09em; }

.band__kicker { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 255, 255, .85); margin-bottom: 18px; }
.band__title { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.band__title--sm { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.03em; }
.band__claim { margin-top: 22px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; }
.band__body { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 460px; }
.band__body--yellow { margin-top: 24px; font-size: 17px; color: var(--yellow-body); max-width: 420px; }
.band__body--dark { margin-top: 22px; font-size: 17px; color: rgba(255, 255, 255, .72); max-width: 440px; }
.band__emphasis { margin-top: 16px; font-size: 17.5px; line-height: 1.5; font-weight: 700; max-width: 430px; }
.band__cta { align-self: flex-start; margin-top: 32px; }

.band .btn--cta { align-self: flex-start; margin-top: 34px; }
.btn--on-magenta { background: #fff; color: var(--magenta-ink); }
.btn--on-magenta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .4); }

/* Media first on wide screens; stacked, text still leads. Once side by side the
   copy takes the container inset on its outer edge and the gutter on the inner. */
@media (min-width: 761px) {
  .band__media--first { order: -1; }

  .band__inner:not(:has(.band__media--first)) > .band__text {
    padding-left: var(--page-inset);
    padding-right: var(--gutter);
  }
  .band__inner:has(.band__media--first) > .band__text {
    padding-left: var(--gutter);
    padding-right: var(--page-inset);
  }
}

/* ---------- Centred prose sections ---------- */

.prose-section { max-width: 900px; margin: 0 auto; text-align: center; padding: clamp(70px, 9vw, 120px) var(--gutter) 0; }
.prose-section--narrow { max-width: 820px; padding-top: clamp(70px, 9vw, 110px); }
.prose-section--brand { max-width: 860px; padding-top: clamp(60px, 8vw, 100px); }

.prose__title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
.prose__title--sm { font-size: clamp(28px, 4vw, 48px); }
.prose__lead { margin: 28px auto 0; max-width: 640px; font-size: 18px; line-height: 1.65; color: var(--muted); }
.prose__lead--sm { margin-top: 26px; max-width: 620px; font-size: 17.5px; }
.prose__lead--tight { margin-top: 18px; }
.prose__lead strong { color: var(--ink); }
.prose__emphasis { margin: 20px auto 0; max-width: 600px; font-size: 18px; line-height: 1.55; font-weight: 700; color: var(--ink); }
.prose-section .btn--cta { margin-top: 34px; }

.brand-mark { font-size: clamp(44px, 7vw, 86px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }

.media-panel--light { background-color: var(--surface); }

.assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px;
  margin-top: 42px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.assurances__dot { color: #D6D6DE; }

/* ---------- Hover slider (still life -> worn) ----------
   The design drove this with JS hover state; CSS :hover does the same with no
   script. Touch devices simply keep the still-life face, as in the design. */

.slider-section { padding: clamp(60px, 8vw, 96px) 0 0; }

.slider__head {
  max-width: 1280px;
  margin: 0 auto 34px;
  padding: 0 var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.eyebrow--slider { margin-bottom: 12px; }
.slider__title { font-size: clamp(26px, 3.6vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; }
.slider__hint { font-size: 14.5px; color: var(--muted); font-weight: 600; }

.slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 6px var(--gutter) 24px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}
.slider::-webkit-scrollbar { height: 8px; }
.slider::-webkit-scrollbar-thumb { background: #D6D6DE; border-radius: var(--r-pill); }

.slide { flex: none; width: 320px; scroll-snap-align: start; }

.slide__frames { position: relative; height: 380px; border-radius: var(--r-card); overflow: hidden; }

.slide__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  transition: opacity .4s ease;
}
.slide__face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The still lifes are wide shots of the whole frame: cropping them to the card would
   cut the temples off, so they sit whole on the card's light plate. */
.slide__face--still > img { object-fit: contain; padding: 22px; }

/* Eschenbach aids: the product shot swaps for the same aid in real use, the way
   the designer paired the two files in each slide show folder. */
.offer__media--swap { position: relative; display: block; overflow: hidden; }
.offer__face { position: absolute; inset: 0; transition: opacity .4s ease; }
.offer__face > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer__face--use { opacity: 0; }
.offer__media--swap[aria-pressed="true"] .offer__face:not(.offer__face--use) { opacity: 0; }
.offer__media--swap[aria-pressed="true"] .offer__face--use { opacity: 1; }
@media (hover: hover) {
  .offer__media--swap:hover .offer__face:not(.offer__face--use) { opacity: 0; }
  .offer__media--swap:hover .offer__face--use { opacity: 1; }
}
/* Both swaps are buttons now, so they need the element reset and a visible focus ring. */
.slide__frames, .offer__media--swap {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  appearance: none;
}
.slide__frames:focus-visible, .offer__media--swap:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.swap__on { display: none; }
[aria-pressed="true"] .swap__on { display: inline; }
[aria-pressed="true"] .swap__off { display: none; }

.offer__hint {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  transition: opacity .3s;
}
@media (hover: hover) { .offer__media--swap:hover .offer__hint { opacity: .35; } }

.slide__face--still {
  opacity: 1;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(0, 0, 0, .022) 12px, rgba(0, 0, 0, .022) 24px);
}
.slide__face--worn {
  opacity: 0;
  background-color: var(--hero-bg);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255, 255, 255, .03) 12px, rgba(255, 255, 255, .03) 24px);
}
.slide__face--worn .ph-caption { color: rgba(255, 255, 255, .55); font-size: 11px; }
.slide__face:has(img) { background-image: none; }

.slide__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  padding: 7px 13px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  transition: opacity .3s;
  z-index: 2;
}

.slide__frames[aria-pressed="true"] .slide__face--still { opacity: 0; }
.slide__frames[aria-pressed="true"] .slide__face--worn { opacity: 1; }
@media (hover: hover) {
  .slide__frames:hover .slide__face--still { opacity: 0; }
  .slide__frames:hover .slide__face--worn { opacity: 1; }
}
@media (hover: hover) { .slide__frames:hover .slide__badge { opacity: .35; } }

.slide__name { margin-top: 24px; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.slide__sub { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 6px; }

/* ---------- Statement hero (La differenza) ---------- */

.hero--statement { margin-top: clamp(70px, 9vw, 120px); min-height: 560px; }
.hero__media--soft::after { background: linear-gradient(95deg, rgba(8, 8, 16, .85) 0%, rgba(8, 8, 16, .45) 55%, rgba(8, 8, 16, 0) 100%); }
.hero__content--narrow { max-width: 520px; }
.hero__title--md { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.03em; }
.hero__intro { margin-top: 24px; font-size: 17px; color: rgba(255, 255, 255, .78); }
.hero__list { margin: 16px 0 0; padding-left: 22px; font-size: 17px; line-height: 1.9; list-style: disc; }
.hero__closing { margin-top: 24px; font-size: 18px; font-weight: 700; line-height: 1.45; }

/* ---------- Pull quote ---------- */

.quote-section { max-width: 900px; margin: 0 auto; text-align: center; padding: clamp(70px, 9vw, 110px) var(--gutter) 0; }
.quote {
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}
.quote--sm { margin-top: 24px; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.55; color: var(--muted); }
.quote strong { font-weight: 800; color: var(--ink); }

.section__lead--short { max-width: 480px; margin-top: 18px; font-size: 18px; }
.panel__title--sm { font-size: 24px; }

/* ---------- MPO tech section ---------- */

.mpo { margin-top: clamp(70px, 9vw, 120px); background: var(--tech-bg); color: #fff; }
.mpo__head { max-width: 1040px; margin: 0 auto; padding: clamp(60px, 8vw, 100px) var(--gutter) 0; text-align: center; }
.mpo__title { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }

.media-panel--mpo {
  height: clamp(240px, 32vw, 380px);
  margin-top: 48px;
  border-radius: 24px;
  justify-content: center;
  padding: 20px;
  background-color: var(--tech-panel);
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(70, 110, 255, .22), transparent 62%),
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, .025) 14px, rgba(255, 255, 255, .025) 28px);
}
.media-panel--mpo .ph-caption { color: rgba(255, 255, 255, .5); font-size: 11px; letter-spacing: .09em; }

.mpo__lead { margin: 48px auto 0; max-width: 580px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .72); }
.mpo__emphasis { margin: 18px auto 0; max-width: 560px; font-size: 16.5px; font-weight: 700; }
.mpo__claim { margin: 30px auto 0; font-size: clamp(22px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; }

.mpo__features {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}
.mpo-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-card); padding: 34px; }
.mpo-card__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.mpo-card__desc { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .66); }

.mpo__split {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 90px) var(--gutter) clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px;
  align-items: center;
}
.mpo__subtitle { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.mpo__body { margin-top: 22px; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); max-width: 420px; }
.mpo__cta { margin-top: 30px; }
.mpo__cta:hover { background: #3a3ac4; transform: translateY(-2px); }

.mpo__lenses { display: flex; flex-direction: column; gap: 14px; }
.mpo-pill {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-pill);
  padding: 16px 26px;
  font-size: 15.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}
.mpo-pill strong { color: #fff; font-weight: 800; }

@media (max-width: 760px) {
  .mpo-pill { border-radius: 18px; }
  .slide { width: 260px; }
  .slide__frames { height: 320px; }
}

/* Sartoriali Vista: flat hero (no extra top padding), tighter eyebrow. */
.hero-split--flat { padding-top: 80px; padding-bottom: 30px; }
.eyebrow--tight { margin-bottom: 20px; }
.contact__lead--wide { max-width: 480px; }
.section--features { max-width: 1080px; padding: 90px var(--gutter) 10px; }
.cta-band-wrap--slim { padding-top: 70px; }

/* ==========================================================================
   Shared blocks that repeat across every B2C page of the designs:
   the centres/contact info band, the "Vuoi approfondire?" box and reviews.
   ========================================================================== */

.icon { width: 100%; height: 100%; display: block; }

/* ---------- Info band (centri · telefono · FAQ fallback) ---------- */

.section--info { padding: 56px var(--gutter) 0; }

.info-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 30px 48px;
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: clamp(28px, 3.4vw, 40px);
}

/* The FAQ fallback pairs one column with a button, so it must not split evenly. */
.info-band--cta {
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 56px;
}

.info-band__col { display: flex; gap: 16px; align-items: flex-start; }

.info-band__icon {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--ink);
  margin-top: 1px;
}

.info-band__title {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--brand);
  margin-bottom: 8px;
}

.info-band__text { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.info-band__text strong { color: var(--ink); font-weight: 700; }
.info-band__note { color: var(--meta); }
.info-band__link { display: inline-block; margin-top: 12px; font-size: 14.5px; }

/* ---------- "Vuoi approfondire?" ---------- */

.readmore {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 26px 48px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: clamp(26px, 3vw, 34px) clamp(26px, 3.4vw, 40px);
}

/* Wide enough for the pointer list to keep one line per article. */
@media (min-width: 900px) { .readmore:not(.readmore--boxed) { grid-template-columns: auto minmax(0, 1fr); } }

.readmore__intro { display: flex; gap: 18px; align-items: flex-start; }

.readmore__icon { flex: none; width: 36px; height: 36px; color: var(--ink); margin-top: 2px; }

.readmore__title { font-size: 17px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 6px; }
.readmore__lead { font-size: 14.5px; line-height: 1.5; color: var(--muted); }

.readmore__list { display: flex; flex-direction: column; gap: 14px; }
.readmore__list a {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.readmore--cta .readmore__list a { font-style: italic; }
.readmore__list a:hover { color: var(--brand); }

/* Inside a column of copy: no heading, one column, the CTA after each title. */
.readmore--boxed { grid-template-columns: 1fr; gap: 12px; margin-top: 30px; padding: 18px 20px; border-color: var(--border-mid); }
.readmore--boxed .readmore__icon { width: 26px; height: 26px; }
.readmore--boxed .readmore__intro { gap: 14px; align-items: center; }
.readmore--boxed .readmore__title { margin-bottom: 0; }
.readmore__cta { color: var(--brand); }

/* ---------- Reviews ---------- */

.section--reviews { padding-top: clamp(80px, 9vw, 110px); }

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}

.review {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 34px 32px 30px;
}

.review__stars {
  display: flex;
  justify-content: center;
  gap: 5px;
  color: var(--brand);
  margin-bottom: 22px;
}
.review__stars .icon { width: 17px; height: 17px; }

.review__tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--meta);
  text-align: center;
  margin-bottom: 16px;
}

.review__mark { display: block; width: 20px; height: 20px; color: var(--brand); margin-bottom: 14px; }

.review__text {
  flex: 1;
  font-size: 15.5px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 26px;
}

.review__author { display: flex; align-items: center; gap: 12px; }

.review__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.review__name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.review__role { font-size: 13.5px; color: var(--muted); }

/* ---------- Rating strip ---------- */

.rating {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px clamp(48px, 9vw, 140px);
  margin-top: 52px;
}

.rating__score { display: grid; grid-template-columns: auto auto; gap: 4px 18px; align-items: center; }
.rating__value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.rating__stars { display: flex; gap: 6px; color: var(--brand); }
.rating__stars svg { width: 21px; height: 21px; }
.rating__label { grid-column: 1 / -1; font-size: 15.5px; color: var(--ink); }

.rating__link { display: grid; justify-items: start; gap: 10px; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.rating__link:hover { color: var(--brand); }
.rating__icon { width: 30px; height: 30px; }
.rating__arrow { margin-left: 14px; }

@media (max-width: 760px) {
  .info-band--cta { grid-template-columns: 1fr; align-items: start; }
}

/* ==========================================================================
   Page header — one full-bleed photo with the copy over it, same height on
   every page. The guide pages are all built this way; --focus per page carries
   the crop from where the designer placed the photo in the guide.
   ========================================================================== */

.pagehead {
  position: relative;
  display: flex;
  align-items: center;
  /* 0.625 x width is the ratio the guide holds on every page. */
  min-height: clamp(520px, 62vw, 900px);
  overflow: hidden;
  background: var(--surface);
}

.pagehead__media { position: absolute; inset: 0; }
.pagehead__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}
.pagehead__media .ph-caption { position: absolute; left: 22px; bottom: 18px; }

/* The supplied photographs already carry the wash on their copy side — it was
   built into them for exactly this layout. So this only tops it up enough to
   hold the text on any screen, rather than washing the picture a second time. */
.pagehead::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(242, 242, 245, .55) 0%,
    rgba(242, 242, 245, .38) 26%,
    rgba(242, 242, 245, .12) 42%,
    rgba(242, 242, 245, 0) 56%);
}

/* Blog covers are plain photographs, so the header has to lay its own wash over
   the copy side instead of relying on one baked into the picture. */
.pagehead--wash::after {
  background: linear-gradient(90deg,
    rgba(246, 246, 248, .96) 0%,
    rgba(246, 246, 248, .90) 30%,
    rgba(246, 246, 248, .55) 48%,
    rgba(246, 246, 248, 0) 66%);
}
.pagehead--dark.pagehead--wash::after {
  background: linear-gradient(90deg,
    rgba(8, 8, 18, .88) 0%,
    rgba(8, 8, 18, .76) 30%,
    rgba(8, 8, 18, .40) 50%,
    rgba(8, 8, 18, 0) 68%);
}

/* The sport photo arrived as a plain shot rather than a composed guide page, so
   it carries no wash of its own and needs a full one to hold the copy. */
.pagehead--sport::after {
  background: linear-gradient(90deg,
    rgba(246, 246, 248, .93) 0%,
    rgba(246, 246, 248, .82) 28%,
    rgba(246, 246, 248, .46) 47%,
    rgba(246, 246, 248, 0) 65%);
}

/* The children's header is the exception: its photo is bright throughout, so the
   white copy the guide puts on it needs a real scrim of its own. */
.pagehead--dark::after {
  background: linear-gradient(90deg,
    rgba(8, 8, 18, .74) 0%,
    rgba(8, 8, 18, .58) 26%,
    rgba(8, 8, 18, .20) 46%,
    rgba(8, 8, 18, 0) 62%);
}

.pagehead__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--gutter);
}

.pagehead__content { max-width: 470px; }

.pagehead__eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--brand);
  margin-bottom: 16px;
}
.pagehead--dark .pagehead__eyebrow { color: #8FB4FF; }
.pagehead--warm .pagehead__eyebrow { color: var(--copper); }
.pagehead--warm .pagehead__link { color: var(--copper); }
.pagehead--sport .pagehead__eyebrow { color: var(--sport); }
.pagehead--sport .pagehead__link { color: var(--sport); }

.pagehead__title {
  font-size: clamp(34px, 3.5vw, 50px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.pagehead--dark .pagehead__title { color: #fff; }

.pagehead__claim {
  margin-top: 18px;
  font-size: clamp(17px, 1.9vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}
.pagehead--dark .pagehead__claim { color: #fff; }

.pagehead__body {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 430px;
}
.pagehead__body strong { color: var(--ink); font-weight: 700; }
.pagehead--dark .pagehead__body { color: rgba(255, 255, 255, .84); }
.pagehead--dark .pagehead__body strong { color: #fff; }

.pagehead__meta { margin-top: 20px; font-size: 14px; color: var(--muted); }
.pagehead--dark .pagehead__meta { color: rgba(255, 255, 255, .72); }
.pagehead__eyebrow a { color: inherit; }
.pagehead__eyebrow a:hover { text-decoration: underline; }

.pagehead__badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.pagehead--dark .badge { background: rgba(255, 255, 255, .16); color: #fff; }

.pagehead__note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
.pagehead__note-icon { flex: none; width: 26px; height: 26px; color: var(--ink); }
.pagehead--dark .pagehead__note { color: rgba(255, 255, 255, .8); }
.pagehead--dark .pagehead__note-icon { color: #fff; }

.pagehead .btn--cta { margin-top: 30px; }
.pagehead__link { display: inline-block; margin-top: 20px; }
.pagehead--dark .pagehead__link { color: #fff; }

/* On phones the copy goes above the photograph instead of over it.
   The pictures keep their left half washed out for the desktop overlay, so the
   mobile frame is square: at these sources that lands on the subject and leaves
   the empty wash out of shot, and since the crop is no taller than the file it
   is purely horizontal — each page's --focus still decides what stays in. */
@media (max-width: 760px) {
  .pagehead {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .pagehead::after { content: none; }

  .pagehead__inner { order: 1; padding-bottom: clamp(36px, 7vw, 50px); }
  .pagehead__content { max-width: none; }

  .pagehead__media { position: relative; order: 2; inset: auto; aspect-ratio: 1 / 1; }
  .pagehead__media > img { display: block; }

  /* Copy written to sit on a scrim keeps a plate of its own once it is off the photo. */
  .pagehead--dark { background: #0B0B18; }
}

/* ---------- Light band (text | photo, edge to edge) ---------- */

/* The guides also use the band with the photograph inset in a rounded card rather
   than bled to the edge; it is the dominant treatment on the Vista Plus pages. */
.band--boxed .band__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(48px, 6vw, 84px) var(--gutter);
  align-items: center;
}
.band--boxed .band__inner > .band__text { padding: 0; }
.band--boxed .band__title { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; }
@media (min-width: 900px) {
  /* the guide gives the copy the wider half, so the heading keeps its four lines */
  .band--boxed .band__inner { grid-template-columns: 42fr 58fr; }
}
.band--boxed .band__media { min-height: 0; aspect-ratio: 4 / 5; border-radius: var(--r-card); padding: 0; }
.band--boxed.band--even .band__title { font-size: clamp(34px, 4vw, 52px); }
.band__media--tall { aspect-ratio: 10 / 11; }
@media (min-width: 900px) { .band--boxed.band--even .band__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .band--boxed .band__media { aspect-ratio: 4 / 3; } }

.band--light { background: var(--surface); color: var(--ink); }
.band--light .band__kicker { color: var(--brand); }
.band--light .band__body { color: var(--muted); }
.band--light .band__body strong { color: var(--ink); }
.band--light .band__emphasis { color: var(--ink); }
.band--spaced { margin-top: clamp(70px, 9vw, 120px); }

.band__media--light {
  background-color: var(--placeholder);
  background-image: var(--hatch);
}
.band__media--light:has(img) { background-image: none; }
.band__media--hero { min-height: clamp(380px, 46vw, 580px); }

/* A band stretches its photo to the height of the copy beside it, so a landscape
   shot gets cropped to a narrow vertical slice. When the subject is not centred
   in the file, pull the crop towards it or the face lands on the edge. */
.band__media--subject-right > img { object-position: 85% center; }
.band__media--subject-left > img { object-position: 15% center; }

/* The page-opening band gives its copy a little more of the split, so the
   headline keeps the three-line break of the design. */
.band__title--hero { font-size: clamp(36px, 3.5vw, 50px); line-height: 1.04; }
@media (min-width: 761px) {
  .band--hero .band__inner { grid-template-columns: 54fr 46fr; }
}

.band__link { align-self: flex-start; margin-top: 22px; }

/* ---------- Full-bleed light section ---------- */

.section-surface { background: var(--surface); margin-top: clamp(70px, 9vw, 110px); }
.section-surface .readmore { background: #fff; border-color: transparent; }

/* ---------- Icon tiles ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 20px;
}

.tile {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: 28px 26px 26px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .2s;
}
.tile:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(20, 20, 80, .28);
}

.tile__icon { width: 34px; height: 34px; color: var(--ink); margin-bottom: 22px; }
.tile__title { font-size: 18px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 10px; }
.tile__desc { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-bottom: 20px; flex: 1; }
.tile .link-cta { font-size: 14.5px; }

/* ---------- Four-up photo cards ---------- */

.posts--quad { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 20px; }
.posts--quad .post__media { height: 180px; }
.post__cta { margin-top: 14px; }
.post:hover .post__cta { color: var(--brand-hover); }

/* ---------- Specialist worlds (overlay photo cards) ---------- */

.worlds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.worlds__minor { margin-top: 20px; }

.world {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 340px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--hero-bg);
  color: #fff;
}
.world > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Scrim above the photo so the overlaid copy keeps its contrast. */
.world::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(8, 8, 18, .82) 0%, rgba(8, 8, 18, .45) 55%, rgba(8, 8, 18, .08) 100%);
}

.world__body { position: relative; z-index: 1; padding: 36px 34px; max-width: 400px; }
.world__title { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 14px; }
.world__desc { display: block; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .8); margin-bottom: 22px; }
.world__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.world:hover .world__cta { gap: 12px; }

/* ---------- Icon rows beside a claim ---------- */

.split--wide { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 56px; align-items: center; }
.section__lead--flush { margin-left: 0; margin-right: 0; max-width: 460px; font-size: 17px; }

.traits { display: flex; flex-direction: column; gap: 20px; margin-top: 34px; }
.trait { display: flex; gap: 16px; align-items: flex-start; }
.trait__icon { flex: none; width: 30px; height: 30px; color: var(--ink); margin-top: 2px; }
.trait__title { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 3px; }
.trait__desc { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.trait__list { margin: 6px 0 6px 18px; list-style: disc; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.lead-list { margin: 10px 0 0 20px; list-style: disc; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- 2x2 photo grid ---------- */

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.photo-grid__cell {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(150px, 19vw, 210px);
  padding: 14px;
  overflow: hidden;
  background-color: var(--placeholder);
  background-image: var(--hatch);
}
.photo-grid__cell:has(img) { background-image: none; }
.photo-grid__cell > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Uppercase claim badges ---------- */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}
.badges--center { justify-content: center; margin-top: 38px; }

.badge {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand);
  background: rgba(43, 43, 163, .07);
  border-radius: var(--r-pill);
  padding: 9px 16px;
}

/* A tile that only states a fact — no link, so no lift on hover. */
.tile--static { cursor: default; }
.tile--static:hover { transform: none; border-color: var(--border-soft); box-shadow: none; }
.tile--num .tile__head { gap: 12px; margin-bottom: 10px; }
.tile--num .tile__title { margin-bottom: 0; }
.tile__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
}

/* ---------- Team pull quote ---------- */

.section--testimony { padding-top: clamp(70px, 9vw, 110px); padding-bottom: 88px; }

.testimony {
  display: grid;
  gap: 28px 36px;
  align-items: center;
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: clamp(30px, 3.4vw, 44px) clamp(28px, 3.2vw, 42px);
}
.testimony--portrait { grid-template-columns: 1fr 264px; }

.testimony__photo {
  position: relative;
  display: block;
  width: 264px;
  height: 264px;
  border-radius: 50%;
  overflow: hidden;
  /* The guide hangs the portrait off the card's lower edge. */
  margin-bottom: -74px;
  background-color: var(--placeholder);
  background-image: var(--hatch);
}
.testimony__photo:has(img) { background-image: none; }
.testimony__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.testimony__text {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}

.testimony__author { margin-top: 26px; font-size: 14.5px; }
.testimony__name { font-weight: 800; letter-spacing: -.01em; }
.testimony__role { color: var(--muted); }
@media (min-width: 761px) { .testimony__author { margin-left: 108px; } }

/* Flush lead inside a two-column claim — the centred margins would break the grid. */
.prose__lead--flush { margin-left: 0; margin-right: 0; max-width: 520px; }
.prose__lead--flush + .prose__lead--flush { margin-top: 18px; }

/* A step whose number carries a phase label above the title (OGGI / PRIORITÀ / …). */
.step__kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}

/* Centred action closing a grid of cards. */
.section__action { margin-top: 48px; text-align: center; }
.section__action .btn { margin-top: 0; }

.section__aside-cta { margin-top: 22px; }

/* Catalogue download the guide draws as a bordered card. */
.bookcard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3vw, 46px);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: clamp(22px, 2.4vw, 30px);
}
.bookcard__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 5 / 3; }
.bookcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bookcard__title { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.bookcard__body { margin-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.bookcard__cta { justify-self: center; margin-top: 32px; }
.bookcard--dark { background: #545454; border-color: transparent; }
.bookcard__kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); margin-bottom: 8px; }
.bookcard--dark .bookcard__title, .bookcard--dark .bookcard__body { color: #fff; }
.btn--book { text-transform: uppercase; font-style: italic; letter-spacing: .02em; }
.btn__arrow--lead { margin: 0 4px 0 0; }

/* Google pointer beside a single review card, as the guide draws it. */
.review-cta { display: flex; align-items: center; gap: 14px; }
.review-cta__icon { flex: none; width: 30px; height: 30px; }
.review-cta__title { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.015em; }
.review-cta__label { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.review-cta:hover .review-cta__title { color: var(--brand); }

/* ---------- Hero with a light wash instead of a dark scrim ---------- */

.hero--light { background: var(--surface); }

.hero__media--wash::after {
  background: linear-gradient(100deg,
    rgba(255, 255, 255, .95) 0%,
    rgba(255, 255, 255, .92) 30%,
    rgba(255, 255, 255, .6) 44%,
    rgba(255, 255, 255, 0) 58%);
}

.hero__content--ink { color: var(--ink); }
.hero__content--ink .hero__lead { color: var(--muted); }
.hero__content--ink .hero__lead strong { color: var(--ink); }
.hero__content--ink .hero__closing { color: var(--ink); }
.hero__content--ink .hero-note { color: var(--muted); }

/* ---------- One-line article pointer ---------- */

.readmore-inline {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}

.readmore-inline__icon { flex: none; width: 28px; height: 28px; color: var(--ink); }
.readmore-inline__text { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.readmore-inline__cta { font-size: 14.5px; font-weight: 700; color: var(--brand); white-space: nowrap; }
.readmore-inline__cta:hover { color: var(--brand-hover); }

.readmore-inline--boxed {
  max-width: none;
  margin: 30px 0 0;
  padding: 16px 20px;
  justify-content: flex-start;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
}
.readmore-inline--boxed .readmore-inline__icon { display: none; }

/* The guide also draws the pointer as a centred pill under a full-width block. */
.readmore-inline--pill {
  max-width: max-content;
  margin: 34px auto 0;
  padding: 14px 26px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
}
.readmore-inline--pill .readmore-inline__icon { display: none; }
.theme-dark .readmore-inline--pill { border-color: var(--sart-line); }
.band--light .readmore-inline--boxed { border-color: var(--border-mid); }
.readmore-inline--boxed .readmore-inline__text, .readmore-inline--boxed .readmore-inline__cta,
.readmore-inline--flush .readmore-inline__text, .readmore-inline--flush .readmore-inline__cta { font-style: italic; }

/* Inside a hero panel the pointer sits left, tight under the actions. */
.hero__content .readmore-inline { max-width: none; margin: 26px 0 0; padding: 0; justify-content: flex-start; }

/* Inside a column of copy: icon beside the text, the call to action beneath it. */
.readmore-inline--flush {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
  max-width: none;
  margin: 26px 0 0;
  padding: 0;
}
.readmore-inline--flush .readmore-inline__icon { grid-row: span 2; }

/* Boxed pointer with a sentence or a photo: a small card, picture or icon on the left. */
.readmore-inline--lead,
.readmore-inline--photo {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  max-width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: 40px auto 0;
  padding: 22px 26px;
  background: var(--surface);
  border: 0;
}
.readmore-inline--lead .readmore-inline__icon { display: block; width: 40px; height: 40px; }
.readmore-inline__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.readmore-inline__media {
  flex: none;
  position: relative;
  width: 200px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--placeholder);
}
.readmore-inline__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.readmore-inline__lead { font-size: 15px; line-height: 1.5; color: var(--muted); }
.readmore-inline--lead .readmore-inline__text, .readmore-inline--lead .readmore-inline__cta,
.readmore-inline--photo .readmore-inline__text, .readmore-inline--photo .readmore-inline__cta { font-style: normal; }
.readmore-inline--photo .readmore-inline__text { font-size: 17px; }
.split .readmore-inline--lead, .band__text .readmore-inline--lead,
.split .readmore-inline--photo, .band__text .readmore-inline--photo { max-width: none; margin: 28px 0 0; }

@media (max-width: 560px) {
  .readmore-inline--photo { flex-direction: column; align-items: stretch; }
  .readmore-inline__media { width: 100%; }
}

.media-panel--map { background-image: none; }
.media-panel--map > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.review-places a { font-weight: 700; color: var(--brand); white-space: nowrap; }
.review-places a:hover { color: var(--brand-hover); }

/* Most guides number their questions. */
.faq--numbered { counter-reset: faq; }
.faq--numbered .faq__q::before { counter-increment: faq; content: counter(faq) '. '; }
.faq__more { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.faq__more a { font-weight: 700; font-style: italic; color: var(--ink); }

/* The guides print the number in the phone column; the tap-to-call link only earns its place on a phone. */
@media (min-width: 761px) { .info-band__link--tel { display: none; } }

/* Article teasers with their own photo. */
.posts--teasers { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 22px; }
.posts--teasers .post__media { height: 190px; }
.posts--teasers .post__body { padding: 22px 22px 24px; }
.posts--teasers .post__title { font-size: 17px; }
.posts--teasers .post__excerpt { margin-top: 8px; }
.section__head + .posts--teasers { margin-top: 34px; }

/* ---------- Small extras ---------- */

.eyebrow--warm { color: var(--yellow); }

.section__mark { display: block; width: 24px; height: 24px; color: var(--brand); margin-bottom: 20px; }

/* Five-up rows: the wider default track leaves a fifth card orphaned on its own line. */
.tiles--flush { margin-top: 48px; grid-template-columns: repeat(auto-fit, minmax(min(185px, 100%), 1fr)); }
.tile__icon--wide { width: auto; height: 26px; }
.tile__icon--wide .icon { width: auto; height: 100%; }

.traits--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 28px;
}

/* ---------- Product rows (lens ranges, aids) ---------- */

.offers { display: flex; flex-direction: column; gap: 20px; }

.offer {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 0 40px;
  align-items: center;
  background: #fff;
  border-radius: var(--r-panel);
  overflow: hidden;
}

.offer__media {
  position: relative;
  display: block;
  align-self: stretch;
  min-height: 240px;
  background-color: var(--placeholder);
  background-image: var(--hatch);
}
.offer__media:has(img) { background-image: none; }
.offer__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.offer__body { padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px) clamp(28px, 3.4vw, 44px) 0; }

.offer__kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.offer__title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.offer__desc { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 520px; }
.offer__cta { display: inline-block; margin-top: 22px; }

.notice--spaced { margin-top: 48px; }

/* A tag reading as a caption under the title rather than a kicker above it. */
.post__tag--after { margin: 6px 0 0; }

.marks--tight { columns: 2; column-gap: 32px; font-size: 16px; line-height: 1.7; }

/* The claim sits under the product name rather than above it. */
.offer__kicker--after { margin: 0 0 12px; color: var(--ink); text-transform: none; letter-spacing: normal; font-size: 16.5px; }

/* A group heading that carries its icon inline. */
.group-head { display: flex; align-items: center; gap: 16px; }
.group-head__icon { flex: none; width: 34px; height: 34px; }

.partner-mark { display: block; width: 190px; margin: 34px auto 0; }
.partner-mark .icon { width: 100%; height: auto; }

/* ---------- Loyalty tiers on a navy field ---------- */

.section-navy { background: var(--navy); color: #fff; margin-top: clamp(70px, 9vw, 110px); }
.section-navy .h2, .section-navy .note__title { color: #fff; }
.section-navy .section__lead { color: rgba(255, 255, 255, .72); }

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 22px;
}

.tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-card);
  padding: 30px 26px 0;
  overflow: hidden;
}

.tier__icon { width: 34px; height: 34px; margin-bottom: 18px; }
.tier__window { font-size: 13.5px; font-weight: 800; color: var(--lilac); margin-bottom: 6px; }

.tier__value { font-size: 62px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.tier__value span { font-size: 34px; font-weight: 700; }

.tier__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lilac);
  margin-top: 8px;
}

.tier__desc { font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); margin-top: 18px; }

.tier__media {
  position: relative;
  display: block;
  width: calc(100% + 52px);
  margin: 22px -26px 0;
  height: 150px;
}
.tier__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px 40px;
  margin-top: 54px;
}
.note { display: flex; gap: 14px; align-items: flex-start; }
.note__icon { flex: none; width: 28px; height: 28px; }
.note__title { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.note__desc { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .62); }

/* Icons on the navy field follow the same rule as the dark theme. */
.section-navy .icon:not(.icon--light),
.strip--navy .icon:not(.icon--light) { filter: invert(1); }

/* ---------- Referral badge ---------- */

.bonus {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 22px 26px;
}
/* ==========================================================================
   Blog: index, topic archives and the article itself.
   ========================================================================== */

/* ---------- Article body: one narrow, readable column ---------- */

/* The reading column is stated as the width of the text itself: the box adds the
   gutter on top, so side padding never eats into it. */
.article {
  --reading: 800px;
  max-width: calc(var(--reading) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(56px, 7vw, 86px) var(--gutter) 0;
}

.article__h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 46px 0 18px;
}
.article__h2:first-child { margin-top: 0; }

.article__p { font-size: 17.5px; line-height: 1.72; color: #33333D; margin-bottom: 18px; }
.article__p strong { color: var(--ink); font-weight: 700; }

.article__list {
  margin: 0 0 20px;
  padding-left: 24px;
  list-style: disc;
  font-size: 17.5px;
  line-height: 1.7;
  color: #33333D;
}
.article__list li { margin-bottom: 7px; }
.article__list strong { color: var(--ink); }

.article__meta {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--meta);
  margin-top: 26px;
}
.article__meta--center { margin-top: 18px; }

/* ---------- The closing invitation of each article ---------- */

/* Same 800px as the reading column, so the card's edges line up with the text. */
.article-cta {
  max-width: 800px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: clamp(30px, 4vw, 46px);
}
.article-cta__title { font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.article-cta__body .article__p:last-child { margin-bottom: 0; }
.article-cta .btn { margin-top: 26px; }

/* ---------- Topic tiles on the index ---------- */

.tiles--topics { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

.tile--topic { justify-content: flex-start; }
.tile__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tile--topic .tile__icon { width: 38px; height: 38px; margin-bottom: 0; }
.tile--topic .tile__title { margin-bottom: 0; }

.tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.tile__arrow { color: var(--brand); font-size: 17px; }
.tile--topic:hover .tile__arrow { transform: translateX(3px); }

/* ---------- Article cards ---------- */

.post--card {
  height: 100%;
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.post--card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -26px rgba(20, 20, 80, .3); }
.post--card .post__media { margin-bottom: 0; border-radius: 0; }
.post__body { display: flex; flex-direction: column; flex: 1; padding: 26px 26px 28px; }
.post__tag--brand { color: var(--brand); }
.post__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 18px; }
.post__foot .article__meta { margin-top: 0; }
.post--card .post__excerpt { flex: 1; }

.jumps--center { justify-content: center; margin-top: 0; }

/* ---------- Topic filters + pager ---------- */

.section--topics { padding-bottom: 0; }

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.filters .jump { display: inline-flex; align-items: center; gap: 8px; }
.filters .jump.is-current { background: var(--brand); color: #fff; }

.jump__count {
  font-size: 12px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(43, 43, 163, .1);
  color: var(--brand);
}
.jump:hover .jump__count,
.jump.is-current .jump__count { background: rgba(255, 255, 255, .22); color: #fff; }

.list-meta {
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--meta);
  margin-bottom: 40px;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 52px;
}

.pager__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--brand);
}
.pager__step:hover { color: var(--brand-hover); }
.pager__step.is-disabled { color: #C4C4CE; }

.pager__pages { display: flex; align-items: center; gap: 6px; }

.pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  transition: background .2s, color .2s;
}
.pager__page:hover { background: var(--surface); }
.pager__page.is-current { background: var(--brand); color: #fff; }

.pager__gap { color: var(--meta); padding: 0 2px; }

@media (max-width: 560px) {
  .pager__step span[aria-hidden] { display: none; }

  /* "Prenota il Controllo della Vista Plus" is wider than a phone; nowrap made it
     drag the whole page into horizontal scroll. */
  .btn { white-space: normal; text-align: center; }
  .btn--cta, .btn--lg, .btn--md { padding-left: 22px; padding-right: 22px; }
}

.notes--three { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.changes-head { margin-top: 72px; margin-bottom: 0; }
.section__lead--center-note { margin-top: 40px; text-align: center; }

.bonus__icon { flex: none; width: 42px; height: 42px; }
.bonus__value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.bonus__label { font-size: 14px; color: var(--muted); margin-top: 2px; }

@media (max-width: 700px) {
  .offer { grid-template-columns: 1fr; }
  .offer__media { min-height: 200px; }
  .offer__body { padding: 28px; }
}

/* ---------- Side-by-side lens comparison ---------- */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px 40px;
}

.compare__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.compare__side--good .compare__label { color: var(--brand); }

.compare__media {
  position: relative;
  display: block;
  height: clamp(200px, 26vw, 300px);
  border-radius: var(--r-card);
  overflow: hidden;
  background-color: var(--placeholder);
  background-image: var(--hatch);
}
.compare__media:has(img) { background-image: none; }
.compare__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.checks { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.checks li { display: flex; gap: 12px; align-items: center; font-size: 15px; line-height: 1.45; color: var(--muted); }
.checks__mark { flex: none; width: 19px; height: 19px; color: var(--brand); }

/* ==========================================================================
   Officine VG atelier — the sartoriale page is dark end to end. Tokens below
   are local to it, as with the colour bands further up.
   ========================================================================== */

:root {
  --sart-bg: #0A0A20;
  --sart-panel: #12122E;
  --sart-line: rgba(255, 255, 255, .12);
  --copper: #C0855A;
  --copper-hover: #A96F46;

  /* The sport guide page uses its own red for the eyebrow and the CTA,
     sampled from the design: the designer confirmed it is deliberate. */
  --sport: #FF3131;
  --sport-hover: #E11D1D;
}

.theme-dark main { background: var(--sart-bg); color: #fff; }

.theme-dark .h2,
.theme-dark .prose__title,
.theme-dark .band__title,
.theme-dark .slider__title,
.theme-dark .faq__q { color: #fff; }

.theme-dark .section__lead,
.theme-dark .prose__lead,
.theme-dark .lead-list,
.theme-dark .slide__sub,
.theme-dark .faq__a { color: rgba(255, 255, 255, .68); }

.theme-dark .section__lead strong,
.theme-dark .prose__lead strong { color: #fff; }

.theme-dark .eyebrow { color: rgba(255, 255, 255, .55); }
.theme-dark .slide__name { color: #fff; }

.theme-dark .tile,
.theme-dark .readmore,
.theme-dark .info-band,
.theme-dark .notice {
  background: var(--sart-panel);
  border-color: var(--sart-line);
  color: #fff;
}
.theme-dark .tile__title, .theme-dark .readmore__title, .theme-dark .info-band__title { color: #fff; }
.theme-dark .tile__desc,
.theme-dark .readmore__lead,
.theme-dark .info-band__text,
.theme-dark .notice { color: rgba(255, 255, 255, .66); }
.theme-dark .info-band__text strong { color: #fff; }
.theme-dark .readmore__list a { color: #fff; }
.theme-dark .readmore__list a:hover,
.theme-dark .link-cta,
.theme-dark .readmore-inline__cta { color: var(--copper); }
.theme-dark .readmore-inline__text { color: #fff; }

/* The designer's icons come in two flavours: black artwork, and artwork already
   drawn light on its own dark plate (.icon--light, tagged in includes/icon.php).
   Each needs inverting on the surface it was NOT drawn for. Dark surfaces are
   listed once below — :where() keeps them at zero specificity so the light-page
   default can be overridden by the rule that follows it. */
:where(.theme-dark main, .section-navy, .strip--navy, .band--black, .world, .hero:not(.hero--light), .mpo) .icon:not(.icon--light) {
  filter: invert(1);
}

.icon--light { filter: invert(1); }

:where(.theme-dark main, .section-navy, .strip--navy, .band--black, .world, .hero:not(.hero--light), .mpo) .icon--light {
  filter: none;
}

.theme-dark .faq__item { border-color: var(--sart-line); }
.theme-dark .faq__icon { background: var(--sart-panel); color: var(--copper); }
.theme-dark .testimony { background: var(--surface); }
.theme-dark .testimony__text, .theme-dark .testimony__name { color: var(--ink); }
.theme-dark .slide__face--still { background-color: var(--sart-panel); }

.btn--copper { background: var(--copper); color: #14100C; }
.btn--copper:hover { background: var(--copper-hover); color: #fff; }

.btn--sport { background: var(--sport); color: #fff; }
.btn--sport:hover { background: var(--sport-hover); }

/* ---------- Dark strip of three claims under the hero ---------- */

/* The guide sets this strip apart from the atelier navy with a warm grey. */
.strip { background: #545454; }
/* Icons that ship with their own dark plate: on this grey the plate would show,
   so screen it away and keep only the white artwork. */
.strip .icon--light { mix-blend-mode: screen; }

.strip__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 30px var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 26px 40px;
}

.strip__item { display: flex; gap: 14px; align-items: flex-start; }
.strip__icon { flex: none; width: 30px; height: 30px; }

.strip__title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.strip__desc { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); }

/* The loyalty page runs the same strip on a solid navy field, label only. */
.strip--navy { background: var(--navy); border-block: none; color: #fff; }
.strip__inner--compact {
  padding: 22px var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 18px 24px;
}
.strip__item--inline { align-items: center; gap: 12px; }
.strip__title--plain {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0;
}
.strip--navy .strip__icon { width: 28px; height: 28px; }

/* A band one step lighter than the page, for the copy that introduces the path. */
/* The one light break in the atelier page: the guide paints it off-white. */
.band--pale { background: #F4F3F6; color: var(--ink); }
.band--pale .band__body { color: #3B3B46; }
.theme-dark .band--pale .band__title,
.band--pale .band__body strong { color: var(--ink); }
.band__media--first.band__media { background-color: rgba(255, 255, 255, .04); }

.atelier-mark { display: block; width: clamp(220px, 24vw, 292px); height: auto; margin-top: 40px; }
.atelier-mark--center { margin-inline: auto; }

/* "Esempi di progettazione sartoriali": the label sits over the photograph. */
.section__label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: 22px;
}
.example { position: relative; aspect-ratio: 9 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--sart-panel); }
.example__media { position: absolute; inset: 0; }
.example__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.example__body { position: relative; padding: clamp(22px, 2.4vw, 30px); }
.example__title { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.example__desc { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); max-width: 24ch; }

/* ---------- Frame complaints, as outlined pills ---------- */

.symptoms { display: flex; flex-direction: column; gap: 14px; }

.symptom {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--sart-line);
  border-radius: var(--r-pill);
  padding: 14px 26px 14px 18px;
  background: rgba(255, 255, 255, .03);
}
.symptom__icon { flex: none; width: 28px; height: 28px; }
.symptom__label { font-size: 14.5px; font-weight: 700; line-height: 1.35; }

/* Each pill steps in a little, the way the design staggers them. */
.symptom:nth-child(2) { margin-left: 14px; }
.symptom:nth-child(3) { margin-left: 28px; }
.symptom:nth-child(4) { margin-left: 20px; }
.symptom:nth-child(5) { margin-left: 34px; }

/* ---------- Recommended-reading card ---------- */

.advice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px 24px;
  align-items: center;
  background: var(--sart-panel);
  border: 1px solid var(--sart-line);
  border-radius: var(--r-card);
  padding: 26px 32px;
  transition: border-color .2s;
}
.advice:hover { border-color: var(--copper); }

.advice__icon { width: 32px; height: 32px; }
.advice__kicker {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 8px;
}
.advice__title { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.advice__title:not(:last-child) { margin-bottom: 5px; }
.advice__desc { display: block; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.advice__cta { font-size: 14.5px; font-weight: 700; color: var(--copper); white-space: nowrap; }

/* ---------- Four-up photo strip (the sartoriale stages) ---------- */

.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 2px;
  margin-top: 2px;
}

.photo-strip__cell {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: clamp(220px, 26vw, 340px);
  padding: 14px;
  overflow: hidden;
  background-color: var(--sart-panel);
}
.photo-strip__cell > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.badges--warm .badge { color: var(--copper); background: rgba(192, 133, 90, .12); }

.marks { margin: 16px 0 20px; padding-left: 22px; list-style: disc; font-size: 17px; line-height: 1.8; color: rgba(255, 255, 255, .78); }

@media (max-width: 760px) {
  .symptom { margin-left: 0 !important; }
  .advice { grid-template-columns: auto 1fr; }
  .advice__cta { grid-column: 2; }
}

@media (max-width: 620px) {
  .testimony--portrait { grid-template-columns: 1fr; }
  .testimony__photo { width: 180px; height: 180px; margin-bottom: 0; justify-self: center; }
  .section--testimony { padding-bottom: 30px; }
}