/* ────────────────────────────────────────────────────────────
   CAILURA — STYLESHEET
   ──────────────────────────────────────────────────────────── */

/* Self-hosted variable fonts (SIL OFL 1.1 — see fonts/OFL-*.txt).
   Same files and axis ranges Google Fonts served previously
   (Familjen Grotesk 400–700, Instrument Sans 400–600), latin + latin-ext. */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/familjen-grotesk-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;
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/familjen-grotesk-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-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;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-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;
}

:root {
  --ink: #1F242A;
  --ink-2: #5F646B;
  --ink-3: #8A8F96;
  --paper: #FFFFFF;
  --sand: #F4F2EE;
  --sand-2: #EAE6DF;
  --acc: #E07A25;
  --acc-dk: #C26518;
  --acc-dk2: #9C4F11;
  --acc-lt: #F5943E;
  --acc-wash: #FBEFE4;
  --line: #E2DED7;
  --line-2: #CFCAC1;
  --maxw: 1120px;
  --error: #D32F2F;
  --success: #388E3C;
  --header-h: 65px;
}

@media (max-width: 880px) {
  :root {
    --header-h: 56px;
  }
}

/* Anchor targets reached via header nav / CTA links: offset the native
   scroll landing spot by the sticky header's height (+ a little breathing
   room) so a section's heading is never left underneath it. */
#servizi,
#consegne,
#metodo,
#mercati,
#chi-e-cailura,
#faq,
#prenota {
  scroll-margin-top: calc(var(--header-h) + 14px);
}

* {
  box-sizing: border-box;
}

/* ── Grid overflow safety net ──
   CSS Grid items default to min-width:auto, so any child with wide
   intrinsic content (a table, a long nowrap label, an SVG with an
   explicit viewBox) can force its own track — and with it .wrap, the
   section, and the page — wider than the viewport instead of shrinking
   to fit. This resets that default across every multi-column grid on
   the page so content reflows within its track instead of pushing the
   page into horizontal scroll. Harmless on desktop: it only lowers the
   *minimum* size a track is allowed to shrink to, it never changes a
   track's actual (content-driven) width when there's room to spare. */
.cols > *,
.dgrid > *,
.indep-grid > *,
.about-grid > *,
.callband-grid > *,
.origins-grid > *,
.scenario-grid > *,
.method-stages > *,
.stats > *,
.cf-grid > * {
  min-width: 0;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Scroll reveal (fade-up, JS-driven, progressive enhancement) ── */
@media (prefers-reduced-motion: no-preference) {
  .has-js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .has-js .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
}

/* ── Skip to content ── */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  background: var(--ink);
  color: #FFF;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 2px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

h1, h2, h3, h4 {
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  line-height: 1.1;
}

p {
  margin: 0;
}

/* ── Layout ── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* acc-dk, not acc: at this size the lighter orange fails AA contrast on white */
  color: var(--acc-dk);
  font-weight: 600;
  margin: 0;
}

.h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  margin-top: 10px;
}

.lede {
  color: var(--ink-2);
  font-size: 18px;
  max-width: 62ch;
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 26px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  border-radius: 2px;
}

.btn-1 {
  background: var(--acc);
  color: #FFF;
  border-color: var(--acc);
}

.btn-1:hover {
  background: var(--acc-dk);
  border-color: var(--acc-dk);
}

.btn-2 {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}

.btn-2:hover {
  border-color: var(--ink);
}

.btn-3 {
  background: #FFF;
  color: var(--ink);
  border-color: #FFF;
}

.btn-3:hover {
  background: var(--sand-2);
  border-color: var(--sand-2);
}

.btn-4 {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--ink);
  color: #FFF;
  border-color: var(--ink);
  border-radius: 0;
  margin-top: 4px;
}

.btn-4:hover {
  background: #363c44;
  border-color: #363c44;
}

/* ── Header ── */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.has-js .site-head {
  background: rgba(255, 255, 255, 0.7);
  border-bottom-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.has-js .site-head.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  margin-right: auto;
  color: var(--ink);
}

.brand span {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.brand .b1 {
  font-weight: 700;
  color: var(--acc);
}

.brand .b2 {
  font-weight: 400;
  color: var(--ink);
}

.nav a.lk {
  text-decoration: none;
  font-size: 15.5px;
  color: var(--ink-2);
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav a.lk:hover {
  color: var(--ink);
}

.nav .btn {
  padding: 10px 18px;
  font-size: 15px;
}

@media (max-width: 880px) {
  .nav a.lk {
    display: none;
  }
}

/* ── Mobile header: compact single-row layout ──
   Below 880px the text links are already hidden above, leaving brand +
   primary CTA + menu toggle. Desktop sizing (34px logo, 21px wordmark,
   10px/18px CTA padding) is too tall for a sticky mobile header, so this
   shrinks every piece just enough to keep one clean row down to 360px
   while keeping CTA + toggle at a ~44px touch target via min-height. */
@media (max-width: 880px) {
  .nav {
    gap: 8px;
    padding: 9px 0;
    padding-top: max(9px, env(safe-area-inset-top));
  }

  .brand {
    gap: 8px;
  }

  .brand svg {
    width: 26px;
    height: 26px;
  }

  .brand span {
    font-size: 16px;
  }

  .nav .btn {
    padding: 0 13px;
    font-size: 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  .menu-toggle {
    padding: 0 12px;
    font-size: 12px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Mobile menu toggle ── */
.menu-toggle {
  display: none;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 9px 16px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.menu-toggle:hover {
  border-color: var(--ink);
}

/* ── Mobile menu panel ── */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.mobile-menu-lk {
  display: block;
  padding: 18px 24px;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.15s ease;
}

.mobile-menu-lk:hover,
.mobile-menu-lk:focus-visible {
  color: var(--acc);
}

@media (max-width: 880px) {
  .menu-toggle {
    display: inline-block;
  }

  .mobile-menu:not([hidden]) {
    display: flex;
  }
}

/* ── Hero ── */
.hero {
  padding: 40px 0 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero .cols {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: center;
}

/* ── Hero: mobile reading order, CSS-only ──
   Required mobile order is eyebrow → headline → paragraph → container
   scene → primary CTA → secondary CTA → microcopy → Procurement Review,
   which doesn't match the DOM (needed for the desktop two-column grid +
   full-bleed 3D panel). display:contents "dissolves" .wrap/.cols/the
   text column below 941px — those wrappers stop generating a box, so
   their children (and .hero-3d, already a direct child of .hero) all
   become direct flex items of .hero itself, at which point `order`
   places them correctly. Nothing moves in the DOM, so this needs no JS
   and can't get the order wrong depending on script timing/caching on a
   real device — the previous approach reparented .hero-3d via nav.js,
   which is exactly the kind of thing that can silently fail to run. */
@media (max-width: 940px) {
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }

  .hero .wrap,
  .hero .cols,
  .hero .cols > div:first-child {
    display: contents;
  }

  .hero .eyebrow-cai { order: 1; margin-bottom: 10px; }
  .hero h1 { order: 2; }
  .hero .sub { order: 3; margin-top: 10px; }
  .hero-3d { order: 4; }
  .hero .cta { order: 5; margin-top: 18px; }
  .hero .micro { order: 6; margin-top: 8px; }
  .hero .doc { order: 7; margin: 18px 0 0; }
}

.hero .eyebrow-cai {
  margin: 0 0 12px;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.35;
  color: var(--ink);
  font-weight: 600;
}

.hero .eyebrow-cai .ci-init {
  /* acc-dk, not acc: at this size the lighter orange fails AA contrast on white */
  color: var(--acc-dk);
  font-weight: 700;
}

.hero h1 {
  font-size: clamp(33px, 4.9vw, 56px);
  max-width: 18ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--acc);
}

.hero .sub {
  margin-top: 12px;
  font-size: clamp(18px, 2.1vw, 21px);
  color: var(--ink-2);
  max-width: 44ch;
}

.hero .cta {
  margin-top: 22px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.hero .micro {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-3);
}

@media (max-width: 640px) {
  .hero .cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero .cta .btn {
    width: 100%;
    text-align: center;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Hero: Procurement Review — slightly larger presence than elsewhere ── */
.hero .doc .dhead {
  padding: 16px 18px;
}

.hero .doc .dhead b {
  font-size: 14.5px;
}

.hero .doc table {
  font-size: 12.5px;
}

.hero .doc th {
  font-size: 10.5px;
  padding: 11px 18px 8px;
}

.hero .doc td {
  padding: 9px 18px;
}

.hero .doc .dfoot {
  padding: 15px 18px;
}

.hero .doc .dfoot span {
  font-size: 12px;
}

.hero .doc .dfoot b {
  font-size: 22px;
}

@media (max-width: 640px) {
  /* Five columns at desktop padding don't fit a phone's content width —
     this is the actual source of the reported "Procurement Review
     extends outside the viewport" bug, not something overflow-x:hidden
     would fix. Tighten padding/type first; the .hero .cols > * min-width
     fix above stops any residual overflow from being able to widen the
     page.

     This is also the Hero's compact "proof" moment now (see the Hero
     mobile-order block above): all four rows stay — no data is dropped
     here, only its footprint — via tighter row padding/line-height
     rather than shrinking text past what the 480px-wide .doc mobile
     rule elsewhere on the page already uses as its floor. */
  .hero .doc .dhead {
    padding: 10px 12px;
  }

  .hero .doc .dhead b {
    font-size: 12.5px;
  }

  .hero .doc table {
    font-size: 10.5px;
  }

  .hero .doc th {
    font-size: 8.5px;
    padding: 6px 8px 5px;
  }

  .hero .doc td {
    padding: 5px 8px;
  }

  .hero .doc .dfoot {
    padding: 9px 12px;
  }

  .hero .doc .dfoot b {
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  /* Below 420px even the tightened 5-column table is too dense to stay
     readable without zooming. Dropping "Categoria" keeps the columns
     that carry the section's actual point — what you pay vs. the market
     price and the resulting delta — fully legible instead of shrinking
     every column until none of them are. */
  .hero .doc thead th:nth-child(2),
  .hero .doc tbody td:nth-child(2) {
    display: none;
  }

  .hero .doc th,
  .hero .doc td {
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* ── Hero: 3D container scene ──
   Full-bleed panel (breaks out of .wrap's max-width) that meets the
   Hero's bottom border directly — the water must never show a gap
   below it. The gradient here is both the pre-WebGL paint (visible
   immediately, and permanently if WebGL is unavailable) and what shows
   through at the canvas's edges once js/hero-container-scene.js takes
   over, so its colors match the water shader's palette. */
.hero-3d {
  position: relative;
  width: 100%;
  height: clamp(320px, 44vw, 560px);
  margin-top: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(220, 230, 236, 0) 0%, #DCE6EC 45%, #C7D5DD 100%);
}

.hero-3d-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Fades the scene toward the page's white ground near the top-left
     (where it would otherwise read as a hard rectangular card) while
     keeping the full bottom edge opaque so the water always meets the
     Hero's border with no gap. */
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 6% 0%, transparent 0%, transparent 18%, #000 62%);
  mask-image: radial-gradient(ellipse 60% 75% at 6% 0%, transparent 0%, transparent 18%, #000 62%);
}

/* ── Hero: pull the 3D panel up into the row so it starts inside the
   first viewport. The row's left column (headline) is much taller than
   the Procurement Review card, leaving unused vertical space on the
   right — the panel rises into that space. .wrap is raised above the
   panel via z-index so the headline/CTA/card always render over it
   regardless of vertical overlap; the panel's own top-left mask keeps
   its opaque content (water/container) clear of the copy either way. */
@media (min-width: 941px) {
  .hero .wrap {
    position: relative;
    z-index: 2;
  }

  .hero .doc {
    align-self: start;
    margin-top: 56px;
  }

  .hero-3d {
    height: 420px;
    margin-top: -190px;
    z-index: 1;
  }
}

/* Below 941px display:contents (see the Hero mobile-order block above)
   pulls .hero-3d out of its full-bleed desktop slot and into flow as an
   ordinary flex item between the sub headline and the CTAs, without
   moving anything in the DOM. In flow it needs its own contained
   sizing: capped and centered instead of spanning edge-to-edge. */
@media (max-width: 940px) {
  .hero-3d {
    max-width: 90vw;
    margin: 18px auto 0;
    height: clamp(220px, 54vw, 380px);
    border-radius: 4px;
  }
}

@media (max-width: 640px) {
  .hero-3d {
    height: clamp(190px, 56vw, 270px);
  }
}

/* ── Document mockup ── */
.doc {
  background: #FFF;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -22px rgba(31, 36, 42, 0.34);
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
}

.doc .dhead {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.doc .dhead b {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.chip {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 7px;
  background: var(--sand-2);
  color: var(--ink-2);
  border-radius: 2px;
}

.chip.ex {
  background: var(--acc-wash);
  color: var(--acc-dk);
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.doc th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-3);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px 7px;
}

.doc td {
  padding: 8px 16px;
  border-top: 1px solid var(--line);
}

.doc td.n {
  text-align: right;
  white-space: nowrap;
}

.doc .dn {
  color: #1B7F5F;
  font-weight: 700;
}

.doc .dfoot {
  margin-top: auto;
  padding: 13px 16px;
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.doc .dfoot span {
  font-size: 11px;
  color: var(--ink-2);
}

.doc .dfoot b {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 20px;
  color: var(--acc);
  letter-spacing: -0.02em;
}

@media (max-width: 480px) {
  /* Same root cause as the Hero's Procurement Review table (side padding
     × column count outgrowing a phone's content width), applied to every
     other .doc table on the page — deliverables, "what we don't do",
     company profile — instead of just the one that was reported. */
  .doc th,
  .doc td {
    padding-left: 10px;
    padding-right: 10px;
  }

  .doc th {
    font-size: 8.5px;
  }

  .doc table {
    font-size: 10.5px;
  }
}

.hero .doc {
  transform: rotate(-1.1deg);
}

/* ── Hero: entrance sequence ──
   Base rules above already render the finished, static composition —
   the safe state for no-JS browsers and prefers-reduced-motion. When JS
   is present and motion is allowed, the block below hides each step's
   starting point so animations.js can run the full sequence via the Web
   Animations API (see initHeroSequence). The 3D scene (.hero-3d) has no
   equivalent hidden-start rule here — it manages its own visibility via
   js/hero-container-scene.js, since the container starts off-canvas by
   camera framing rather than CSS opacity. */
@media (prefers-reduced-motion: no-preference) {
  .has-js .hero .eyebrow-cai,
  .has-js .hero h1,
  .has-js .hero .sub,
  .has-js .hero .cta,
  .has-js .hero .micro {
    opacity: 0;
    transform: translateY(10px);
  }

  .has-js .hero .doc {
    opacity: 0;
    transform: translateY(20px) rotate(-1.1deg);
  }

  .has-js .hero .doc tbody tr {
    opacity: 0;
    transform: translateY(6px);
  }

  .has-js .hero .doc .dfoot b {
    opacity: 0;
  }
}

/* ── Paths ── */
.paths {
  position: relative;
  padding: 68px 0 72px;
  background: var(--sand);
  overflow: hidden;
}

.paths-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
  pointer-events: none;
}

.paths .wrap {
  position: relative;
  z-index: 1;
}

.paths-title {
  font-size: clamp(28px, 4vw, 42px);
  color: var(--acc);
  text-align: center;
  max-width: 20ch;
  margin: 0 auto;
  letter-spacing: -0.01em;
}

.route-system {
  margin-top: 40px;
}

/* ── Mobile carousel system ──
   Shared by all four mobile carousels below 901px: "Non parti dallo
   stesso punto di tutti." (.scenario-grid), "Servizi e prezzi"
   (.svc-paths), "Cosa ricevi" (.dgrid) and "Il Metodo CAILURA"
   (.method-stages). Each keeps its own class/grid (or, for Servizi,
   its own nested svc-path/svc-path-row wrappers) for desktop, and picks
   up .mcarousel-track/.mcarousel-slide for a native CSS scroll-snap
   carousel on mobile instead of a long vertical stack. One interaction
   language, one JS module (see nav.js) driving all four dot rows, so
   every carousel feels like the same component. */
@media (max-width: 900px) {
  .mcarousel {
    margin: 0 -24px;
  }

  /* Specificity note: the track is always .mcarousel > [.scenario-grid|
     .svc-paths|.dgrid|.method-stages].mcarousel-track, so every rule
     below is qualified with the .mcarousel parent — that beats the
     later, unscoped .scenario-grid/.dgrid/.method-stages base rules
     (equal class-count selectors would otherwise resolve by source
     order, and those base rules are declared further down the file). */
  .mcarousel > .mcarousel-track {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    list-style: none;
    gap: 14px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 7vw 6px;
  }

  .mcarousel > .mcarousel-track::-webkit-scrollbar {
    display: none;
  }

  .mcarousel > .mcarousel-track:focus-visible {
    outline: 3px solid var(--acc);
    outline-offset: -3px;
  }

  /* Descendant (not direct-child) combinator: in "Servizi e prezzi" the
     slide (.flip-card) sits two DOM levels below the track
     (.svc-paths > .svc-path > .svc-path-row > .flip-card) — those
     wrappers dissolve via display:contents below so flip-card renders
     as a flex item of the track, but a ">" selector still only matches
     real DOM parent/child pairs, so this has to reach through them. */
  .mcarousel .mcarousel-slide {
    flex: 0 0 86vw;
    max-width: 420px;
    scroll-snap-align: center;
  }

  .mcarousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
  }

  /* Real <button> control (see nav.js). The button box stays exactly
     the size of the visible dot so the tight small-dot row looks the
     same as before; ::before expands the actual tappable area to a
     ~40px touch target without affecting layout, since an absolutely
     positioned pseudo-element is out of flow. */
  .mcarousel-dot {
    position: relative;
    width: 6px;
    height: 6px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--line-2);
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
  }

  .mcarousel-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 40px;
    transform: translate(-50%, -50%);
  }

  .mcarousel-dot.is-active {
    background: var(--acc);
    transform: scale(1.35);
  }

  /* Counter the active dot's 1.35x scale so its hit area stays 24px wide
     and never overlaps a neighbouring target. */
  .mcarousel-dot.is-active::before {
    width: 17.7px;
  }

  .mcarousel-dot:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 3px;
  }
}

@media (min-width: 900.02px) {
  .mcarousel-dots {
    display: none;
  }
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.scenario {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 12px 22px -18px rgba(31, 36, 42, 0.35);
}

.sc-corner {
  position: absolute;
  top: -2px;
  left: -1px;
  width: 9px;
  height: 9px;
  background: var(--acc);
}

.sc-n {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  opacity: 0.13;
  letter-spacing: 0;
}

.sc-icon-box {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 2px rgba(31, 36, 42, 0.06);
  margin-bottom: 2px;
}

.sc-icon {
  color: var(--acc-dk);
}

.scenario h3 {
  font-size: 19.5px;
  position: relative;
  z-index: 1;
}

.scenario p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

.sc-anchor {
  display: none;
}

@media (min-width: 901px) {
  .sc-anchor {
    display: block;
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 9px;
    height: 9px;
    border: 2px solid var(--acc);
    background: var(--sand);
    transform: translateX(-50%) rotate(45deg);
  }
}

/* Below 901px .scenario-grid is a horizontal carousel track (see the
   mobile carousel system above), not a stacked column — grid-template-
   columns/grid-column no longer apply, only the card's own look does. */
@media (max-width: 900px) {
  .scenario {
    padding: 20px 20px 22px;
  }
}

@media (max-width: 640px) {
  .sc-n {
    top: 14px;
    right: 14px;
    font-size: 13px;
    font-weight: 700;
    opacity: 1;
    color: var(--paper);
    background: var(--ink);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Connector + destination ── */
.paths .connector.reveal,
.paths .mini-converge.reveal {
  transition-delay: 0.1s;
}

.connector {
  height: clamp(56px, 7vw, 82px);
  margin: -2px 0 0;
}

.connector svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.c-base {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.25;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-base:nth-child(2) {
  transition-delay: 0.08s;
}

.c-base:nth-child(3) {
  transition-delay: 0.16s;
}

.c-accent {
  fill: none;
  stroke: var(--acc);
  stroke-width: 2.25;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.4s ease 0.85s;
}

.connector.is-in .c-accent,
.mini-converge.is-in .c-accent {
  opacity: 1;
}

.c-node-ring {
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  transition: opacity 0.4s ease 1s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s;
}

.connector.is-in .c-node-ring {
  opacity: 0.55;
  transform: scale(1);
}

.c-node {
  fill: var(--acc);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.3s ease 0.92s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.92s;
}

.connector.is-in .c-node,
.mini-converge.is-in .c-node {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 900px) {
  .connector {
    display: none;
  }
}

.mini-converge {
  display: none;
}

@media (max-width: 900px) {
  .mini-converge {
    display: block;
    width: 74px;
    height: 40px;
    margin: 22px auto 0;
  }

  .mini-converge svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
}

.destination {
  position: relative;
  margin: 0 auto 0;
  max-width: 600px;
  text-align: center;
  border: 1.5px solid var(--acc);
  background: var(--paper);
  padding: 28px 32px 24px;
  box-shadow: 0 18px 34px -22px rgba(224, 122, 37, 0.45);
}

@media (max-width: 900px) {
  .destination {
    margin-top: 8px;
  }
}

.dest-node {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--acc);
  border: 1.5px solid var(--sand);
  box-shadow: 0 2px 6px -2px rgba(224, 122, 37, 0.4);
}

@media (min-width: 901px) {
  .dest-node::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 10px;
    background: var(--acc);
    transform: translateX(-50%);
  }
}

.dest-statement {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 24px);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 6px;
}

.dest-div {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--acc);
  margin: 16px auto;
}

.dest-closing {
  text-align: center;
  max-width: 50ch;
  margin: 0 auto;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

.dest-closing b {
  color: var(--acc-dk);
  font-weight: 700;
}

@media (max-width: 640px) {
  .destination {
    padding: 24px 22px 22px;
  }

  .dest-closing {
    font-size: 15px;
  }
}

/* ── Independence section ("what we don't do") ── */
.indep {
  padding: 64px 0 60px;
  background: var(--sand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.indep-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 940px) {
  .indep-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Left column */
.indep-h {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: -6px 0 0;
}

.indep-h em {
  font-style: normal;
  color: var(--acc);
}

.indep-intro {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.55;
  max-width: 46ch;
}

.indep-metric {
  margin-top: 30px;
}

.indep-metric-rule {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  margin-bottom: 18px;
}

.indep-zero {
  display: block;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(88px, 11vw, 148px);
  line-height: 0.85;
  color: var(--acc);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.indep-metric-label {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}

.indep-metric-note {
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 40ch;
}

/* Right column: document panel */
.indep-doc {
  border-top: 2px solid var(--ink);
  transform: rotate(-1deg);
  font-size: 12px;
  /* The left column (headline + giant "0" metric) runs taller than
     this document mockup, so align-items:start on .indep-grid left a
     large empty gap below the card. Centering it in its row balances
     that space instead of stacking it all underneath. */
  align-self: center;
}

.indep-doc .dhead {
  padding: 15px 16px;
}

.indep-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.indep-doc th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-3);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px 7px;
}

.indep-doc td {
  padding: 9px 16px;
  border-top: 1px solid var(--line);
}

.indep-doc td.st {
  text-align: right;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ink-2);
}

.indep-doc .dfoot b {
  font-variant-numeric: tabular-nums;
}

/* Relationship axis */
.indep-axis {
  margin-top: 38px;
  display: grid;
  grid-template-columns: minmax(140px, 210px) 1fr minmax(140px, 210px);
  gap: 0 24px;
}

.indep-node {
  padding: 14px 0;
  border-top: 2px solid var(--line-2);
}

.indep-node b {
  display: block;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.indep-node span {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.indep-node-fornitore {
  text-align: right;
}

.indep-axis-line {
  align-self: end;
  padding-bottom: 14px;
  text-align: center;
}

.indep-axis-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.indep-axis-svg {
  display: block;
  width: 100%;
  height: 16px;
  color: var(--ink-2);
}

.indep-axis-svg line,
.indep-axis-svg path {
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

/* Cailura node — outside the transaction, anchored under Cliente */
.indep-cailura {
  grid-column: 1;
  grid-row: 2;
  margin-top: 22px;
  padding-left: 2px;
  position: relative;
}

.indep-cailura-connector {
  position: absolute;
  top: -20px;
  left: 8px;
  width: 1px;
  height: 20px;
  background: var(--acc);
}

.indep-cailura-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.indep-cailura-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  background: var(--acc);
}

.indep-cailura-card p {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.indep-cailura-card b {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  color: var(--acc-dk);
}

.indep-cailura-note {
  margin: 6px 0 0 19px;
  font-size: 13px;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .indep-axis {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .indep-node,
  .indep-cailura {
    grid-column: 1;
  }

  .indep-cailura {
    grid-row: auto;
    margin-top: 6px;
  }

  .indep-node-fornitore {
    text-align: left;
  }

  .indep-axis-line {
    border-top: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    padding: 10px 0;
  }

  .indep-axis-svg {
    display: none;
  }

  .indep-cailura-connector {
    display: none;
  }

  .indep-doc th,
  .indep-doc td {
    padding-inline: 10px;
  }

  .indep-doc td.st {
    white-space: normal;
  }
}

/* ── Services ──
   Three service paths (svc-path), each a row of flip cards (flip-card)
   joined by a technical route connector (svc-route) reusing the same
   c-base/c-accent/c-node line-draw language as .connector in ── Paths ──.
   Front and back faces overlap in the same CSS Grid area (both share
   grid-column/grid-row 1); JS measures whichever face is active and
   writes its height onto .flip-card-viewport so the card animates to
   that face's natural height. This grid+3D-flip layer is gated behind
   .has-js; without JS both faces render stacked in normal flow, so no
   content is ever unreachable. */
.services {
  padding: 82px 0;
}

.svc-paths {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.svc-path-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.svc-path-label {
  margin: 0;
}

.svc-path-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.svc-path-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

/* When a card in the row is expanded, its back face is often taller
   than its sibling's front face. Stop stretching so the collapsed
   sibling keeps its own natural height instead of ballooning to match
   (which used to leave a large empty area inside it). The connector
   stays self-stretched so it can still center its icon vertically. */
.svc-path-row.has-expanded-card {
  align-items: flex-start;
}

.svc-path-row.has-expanded-card .svc-route {
  align-self: stretch;
}

/* Desktop/tablet row sizing only: below 901px .svc-path-row is
   display:contents (see the Services mobile carousel rules further
   down), so it no longer establishes a flex context for these cards to
   size within — but the selector would still match and, at equal
   specificity, beat the carousel's own slide-width rule by source
   order if left unguarded here. */
@media (min-width: 901px) {
  .svc-path-row .flip-card {
    flex: 1 1 0;
    min-width: 0;
  }

  .svc-path-row-single .flip-card {
    flex: 1 1 100%;
  }
}

.svc-route {
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-route svg {
  display: block;
  overflow: visible;
}

.svc-route svg.svc-route-h {
  width: 56px;
  height: 16px;
}

.svc-route svg.svc-route-v {
  display: none;
}

.svc-route .c-base,
.svc-route .c-accent {
  stroke-width: 1.7;
}

.svc-route .c-node {
  r: 2.4;
}

/* ── Services: mobile carousel ──
   Below 901px "Servizi e prezzi" becomes one horizontal carousel across
   all five service cards instead of three stacked path rows: .svc-path/
   .svc-path-row/.svc-path-row-single dissolve via display:contents so
   each .flip-card (already tagged .mcarousel-slide, see the mobile
   carousel system above) renders as a direct flex item of the
   .svc-paths.mcarousel-track. The connecting route arrows don't carry
   over into a swipeable list of alternatives, and the per-path group
   header ("Prima di iniziare", …) is replaced by the same text surfacing
   inside each card as .fc-kicker, so nothing here is otherwise lost. */
@media (max-width: 900px) {
  .svc-path,
  .svc-path-row,
  .svc-path-row-single {
    display: contents;
  }

  .svc-path-head,
  .svc-route {
    display: none;
  }

  /* .svc-path-row/.svc-path-row-single dissolving via display:contents
     means the track's own default align-items:stretch (flex-direction:
     row) still applies to the .flip-card slides directly. Stretch grows
     every slide to the track's tallest item — including an off-screen
     card that's currently expanded — leaving a large empty gap under
     shorter collapsed cards. Slides size to their own natural height
     instead; width already comes from .mcarousel-slide's flex-basis, not
     from stretch, so nothing here affects sizing along the scroll axis. */
  .mcarousel > .svc-paths.mcarousel-track {
    align-items: flex-start;
  }

  .svc-paths.mcarousel-track .flip-card {
    align-self: flex-start;
  }
}

/* ── Flip cards ── */
.flip-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ink);
  box-shadow: 0 14px 30px -20px rgba(31, 36, 42, 0.32);
}

.flip-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -1px;
  width: 8px;
  height: 8px;
  background: var(--acc);
  pointer-events: none;
}

.has-js .flip-card {
  cursor: pointer;
  perspective: 1400px;
}

.flip-card:focus-within {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
}

/* Dynamic-height layer: JS measures the active face (front.scrollHeight
   or back.scrollHeight) and writes it as this element's inline height,
   so opening/closing a card animates to the natural height of whichever
   face is showing instead of both faces sharing one fixed height. The
   grid-overlap trick below still makes the two faces occupy the same
   cell (so the row auto-sizes to the taller of the two); overflow:hidden
   here just crops that shared cell down to the height JS has set. */
.has-js .flip-card-viewport {
  overflow: hidden;
  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card-inner {
  position: relative;
  height: 100%;
}

.has-js .flip-card-inner {
  display: grid;
  align-items: start;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.has-js .flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-face {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  gap: 14px;
}

.has-js .flip-card-face {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.has-js .flip-card-back {
  transform: rotateY(180deg);
}

html:not(.has-js) .flip-card-back {
  border-top: 1px dashed var(--line-2);
}

html:not(.has-js) .fc-hint {
  display: none;
}

/* front face */
.flip-card-front {
  padding: 26px 24px 22px;
  gap: 20px;
}

.fc-front-main {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Carries the desktop path group's label ("Prima di iniziare", …) into
   the card itself — needed once the mobile carousel (≤900px) dissolves
   .svc-path-head, since a standalone carousel slide has no other way to
   show which path it belongs to. Hidden on desktop, where the group
   header above the row already says it once for the whole row. */
.fc-kicker {
  display: none;
}

@media (max-width: 900px) {
  .fc-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acc-dk);
  }
}

.fc-name {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.fc-promise {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

.fc-front-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fc-price {
  margin: 0;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.05;
  color: var(--acc);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.fc-vat {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  font-variant-numeric: normal;
}

.fc-micro {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3);
}

.fc-hint {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--acc-dk);
  transition: color 0.15s ease;
}

/* Focus is shown on the whole card (.flip-card:focus-within) so the
   button doesn't also draw the browser's default ring on top of it. */
.fc-hint:focus-visible {
  outline: none;
}

.fc-hint-close {
  margin-top: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.fc-hint svg {
  transition: transform 0.2s ease;
}

.has-js .flip-card:hover .fc-hint,
.has-js .flip-card:focus-within .fc-hint {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.has-js .flip-card:hover .fc-hint svg,
.has-js .flip-card:focus-within .fc-hint svg {
  transform: translateX(3px);
}

/* back face */
.flip-card-back {
  gap: 0;
}

.fc-back-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.fc-back-head .fc-back-title {
  margin: 0;
}

.fc-back-title {
  position: relative;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  padding-bottom: 13px;
}

.fc-back-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--acc);
}

.fc-back-groups {
  display: flex;
  flex-direction: column;
}

.fc-group {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.fc-group:first-child {
  padding-top: 0;
  border-top: none;
}

.fc-group-label {
  margin: 0 0 9px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--acc-dk2);
}

.fc-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fc-bullets li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.fc-bullets li:last-child {
  margin-bottom: 0;
}

.fc-bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--acc-dk);
}

.fc-note-block {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--sand);
  border-left: 3px solid var(--line-2);
}

.fc-note-label {
  margin: 0 0 5px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.fc-note-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.fc-note-block.is-accent {
  background: var(--acc-wash);
  border-left-color: var(--acc);
}

.fc-note-block.is-accent .fc-note-text {
  color: var(--acc-dk);
}

.fc-note-block.is-important {
  background: var(--sand-2);
  border-left-color: var(--ink);
}

.fc-note-block.is-important .fc-note-label {
  color: var(--ink);
}

.fc-pricing-note {
  margin-top: 14px;
  padding: 16px;
  background: var(--sand);
  border-left: 3px solid var(--acc);
}

.fc-pricing-note .fc-group-label {
  margin-bottom: 10px;
  font-weight: 900;
  color: var(--acc-dk2);
}

.fc-pricing-note p:not(.fc-group-label) {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.fc-factors {
  list-style: none;
  margin: 10px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fc-factors li {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px 9px;
}

.fc-cta {
  margin-top: 18px;
  align-self: flex-start;
  font-size: 14px;
  padding: 11px 20px;
}

@media (min-width: 781px) {
  .flip-card-wide .flip-card-front {
    flex-direction: row;
    align-items: center;
    padding: 32px 30px;
    gap: 30px;
  }

  .flip-card-wide .fc-front-main {
    flex: 1 1 auto;
  }

  .flip-card-wide .fc-front-foot {
    flex: 0 0 240px;
    margin-top: 0;
    padding-top: 0;
    padding-left: 26px;
    border-top: none;
    border-left: 1px solid var(--line);
    text-align: right;
  }

  .flip-card-wide .fc-front-foot .fc-hint {
    justify-content: flex-end;
  }

  .flip-card-wide .fc-back-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  .flip-card-wide .fc-group {
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }

  .flip-card-wide .fc-group:nth-child(-n + 2) {
    padding-top: 0;
    border-top: none;
  }
}

/* ── Deliverables ── */
.deliver {
  padding: 82px 0;
  background: var(--sand);
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 36px;
  align-items: stretch;
}

@media (max-width: 620px) {
  /* auto-fit's 300px track floor already collapses this to one column
     well above this breakpoint, but the floor itself is a fixed desktop
     value — replacing it with an explicit 1fr removes any risk of it
     forcing a track wider than a narrow phone's viewport. */
  .dgrid {
    grid-template-columns: 1fr;
  }
}

/* Barely-perceptible per-card tilt — a variation cue, not a collage motif */
.dgrid > .dwrap:nth-child(1) { --tilt: -0.3deg; }
.dgrid > .dwrap:nth-child(2) { --tilt: 0.25deg; }
.dgrid > .dwrap:nth-child(3) { --tilt: -0.2deg; }

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

.dwrap .doc {
  flex: 1;
  position: relative;
  z-index: 0;
  transform: rotate(var(--tilt, 0deg));
}

/* Second sheet underneath, peeking at the edge — a working document resting on another, not a card shadow */
.dwrap .doc::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 100%;
  height: 100%;
  background: var(--sand-2);
  border: 1px solid var(--line);
  z-index: -1;
}

.dwrap .doc:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: 0 20px 40px -20px rgba(31, 36, 42, 0.32);
}

.dwrap .dcap {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  min-height: 5.2em;
}

.dwrap .dcap-n {
  flex-shrink: 0;
  padding-top: 1px;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.dwrap .dlabel {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.dwrap .dlabel b {
  color: var(--ink);
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  display: block;
  font-size: 15px;
  margin-bottom: 2px;
}

@media (max-width: 900px) {
  /* Below 900px "Cosa ricevi" is a horizontal document-deck carousel
     (see the mobile carousel system above) — each .dwrap is a fixed-
     width slide, so the tilt + second-sheet-peeking effect that reads
     as a collage risk at full document width is safe to keep here: it
     stays inside the slide's own bounds instead of stacking against a
     full-bleed column. */
  .dwrap .dcap {
    min-height: 0;
  }

  .dwrap .doc::before {
    top: 2px;
    left: 2px;
  }
}

/* Reveal settle: documents ease from a faint extra tilt to their resting angle */
@media (prefers-reduced-motion: no-preference) {
  .has-js .dwrap.reveal .doc {
    transform: rotate(calc(var(--tilt, 0deg) * 3));
  }

  .has-js .dwrap.reveal.is-in .doc {
    transform: rotate(var(--tilt, 0deg));
  }
}

.agenda .row {
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
}

.agenda .row .t {
  font-variant-numeric: tabular-nums;
  color: var(--acc-dk);
  font-weight: 700;
  flex-shrink: 0;
  width: 42px;
}

.agenda .row .w {
  color: var(--ink-2);
}

.agenda .day {
  padding: 9px 16px;
  background: var(--sand);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

.score .row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
}

.score .row .lb {
  flex: 1;
  color: var(--ink-2);
}

.score .bar {
  width: 74px;
  height: 7px;
  background: var(--sand-2);
  flex-shrink: 0;
}

.score .bar i {
  display: block;
  height: 100%;
  background: var(--acc);
}

.score .row .v {
  width: 26px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ── Method ── */
.method {
  padding: 82px 0;
}

.method-stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 32px;
  row-gap: 0;
  margin: 48px 0 0;
  padding: 0;
}

.method-stage {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--ink-3);
  transition: border-color 0.25s ease;
}

.method-stage:hover,
.method-stage:focus-visible {
  border-top-color: var(--acc);
}

.method-stage:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 6px;
}

.method-node {
  position: absolute;
  top: -5px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  transition: background 0.25s ease;
}

.method-stage:hover .method-node,
.method-stage:focus-visible .method-node {
  background: var(--acc);
}

.method-num {
  display: block;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(44px, 4.6vw, 70px);
  line-height: 1;
  color: var(--line-2);
  margin: 0 0 14px;
  transition: color 0.3s ease;
}

.method-stage:hover .method-num,
.method-stage:focus-visible .method-num {
  color: rgba(138, 143, 150, 0.45);
}

.method-tag {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc-dk);
  margin: 0 0 8px;
  transition: color 0.25s ease;
}

.method-stage:hover .method-tag,
.method-stage:focus-visible .method-tag {
  color: var(--acc);
}

.method-title {
  font-size: 20px;
  margin: 0 0 11px;
}

.method-copy {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.64;
  margin: 0;
  max-width: 30ch;
}

/* Below 901px .method-stages is a horizontal carousel track (see the
   mobile carousel system near .scenario-grid) instead of the desktop
   4-up timeline or a tall stacked column — each slide keeps the
   desktop card's own look (top border + number), which reads better as
   a self-contained carousel card than the stacked left-rail variant did. */
@media (max-width: 900px) {
  .method-stage {
    padding: 24px 22px 22px;
    border-top: 2px solid var(--line-2);
    background: var(--paper);
    box-shadow: 0 12px 22px -18px rgba(31, 36, 42, 0.2);
  }

  .method-node {
    display: none;
  }

  .method-num {
    font-size: clamp(38px, 9vw, 48px);
    margin-bottom: 10px;
  }

  .method-copy {
    max-width: none;
  }
}

/* ── Origins / Markets (3D globe) ── */
.origins {
  padding: 84px 0;
  background: var(--ink);
  color: #FFF;
  overflow: hidden;
}

.origins h2 {
  color: #FFF;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 10px;
}

.origins-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  grid-template-areas:
    "eyebrow globe"
    "headline globe"
    "lede globe"
    "markets globe"
    "outro globe";
  column-gap: 56px;
  row-gap: 0;
  align-items: center;
}

.origins-eyebrow { grid-area: eyebrow; }
.origins-h2 { grid-area: headline; }
.origins-lede { grid-area: lede; }
.origins-markets { grid-area: markets; }
.origins-outro { grid-area: outro; }
.origins-globe { grid-area: globe; }

.origins .lede {
  color: rgba(255, 255, 255, 0.62);
  font-size: 15.5px;
  max-width: 46ch;
}

/* Market selector (accessible control; also drives the globe) */
.market-select {
  display: flex;
  flex-direction: column;
  margin-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.market {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin: 0;
  padding: 14px 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  position: relative;
  text-align: left;
  transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.market::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acc-lt);
  transform: translateY(-50%) scale(0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.market-flag {
  font-size: 0.85em;
  opacity: 0.85;
}

.market:hover,
.market:focus-visible {
  color: #FFF;
}

.market.is-active {
  color: var(--acc-lt);
  padding-left: 16px;
}

.market.is-active::before {
  transform: translateY(-50%) scale(1);
}

.origins-close {
  margin-top: 30px;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  color: #FFF;
  letter-spacing: -0.01em;
}

.origins-criteria {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13.5px;
  letter-spacing: 0.01em;
}

.origins-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  font-size: 14.5px;
  max-width: 46ch;
}

/* Globe */
.origins-globe {
  display: flex;
  justify-content: center;
  align-items: center;
}

.globe-stage {
  position: relative;
  width: min(600px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 44% 40%, #12161b 0%, #0d1013 68%, #0a0d10 100%);
}

.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  cursor: grab;
}

.globe-canvas:active {
  cursor: grabbing;
}

.globe-label {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translate(-50%, 100%);
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--acc-lt);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.globe-label.is-visible {
  opacity: 1;
}

@media (max-width: 940px) {
  .origins-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "headline"
      "lede"
      "globe"
      "markets"
      "outro";
    row-gap: 32px;
    column-gap: 0;
  }

  .globe-stage {
    width: min(420px, 84vw);
  }
}

@media (max-width: 600px) {
  .market {
    font-size: 17px;
    padding: 12px 2px;
  }
}

/* ── Chi è Cailura ── */
.proof {
  padding: 48px 0;
}

.about-h {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.about-h-lead {
  font-size: clamp(32px, 5.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.about-h-num {
  color: var(--acc);
}

.about-h-rest {
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.about-intro {
  margin-top: 10px;
  max-width: 58ch;
}

.about-intro-note {
  margin-top: 6px;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

.about-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 940px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.flow-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.flow-steps .flow-final {
  color: var(--acc-dk);
}

.flow-steps .flow-arrow {
  color: var(--line-2);
  font-weight: 400;
}

.about-text {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 48ch;
}

/* Company record */
.about-doc {
  border-top: 2px solid var(--ink);
}

.about-doc .dhead {
  padding: 8px 14px;
}

.about-doc table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.about-doc td {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.about-doc tr:first-child td {
  border-top: none;
}

.about-doc td.k {
  width: 38%;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3);
  white-space: nowrap;
}

.about-doc td.v {
  font-size: 14px;
  color: var(--ink);
}

@media (max-width: 600px) {
  .about-doc td {
    padding: 9px 14px;
  }

  .about-doc td.k {
    white-space: normal;
  }
}

.about-manifesto {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--acc);
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(23px, 3.2vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 56ch;
}

.stats {
  margin-top: 22px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-variant-numeric: tabular-nums;
}

.stats.stats-3 {
  grid-template-columns: repeat(3, 1fr);
}

.stat {
  padding: 18px 24px;
  border-left: 1px solid var(--line);
}

.stat:first-child {
  padding-left: 0;
  border-left: none;
}

.stat b {
  display: block;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stat:first-child b {
  font-size: clamp(42px, 5.6vw, 68px);
  color: var(--acc);
}

.stats-3 .stat:first-child b {
  font-size: clamp(32px, 3.8vw, 48px);
  color: var(--ink);
}

.stat-label {
  display: block;
  margin-top: 8px;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat-desc {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--ink-2);
}

@media (max-width: 700px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .stat {
    padding: 20px 16px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .stat:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }

  .stat:nth-last-child(-n+2) {
    border-bottom: none;
  }

  .stats.stats-3 {
    grid-template-columns: 1fr;
  }

  .stats-3 .stat {
    padding: 18px 0;
    border-left: none;
    border-bottom: 1px solid var(--line);
  }

  .stats-3 .stat:last-child {
    border-bottom: none;
  }
}

@media (max-width: 420px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .stat {
    padding: 16px 0;
    border-left: none !important;
    border-bottom: 1px solid var(--line);
  }

  .stat:last-child {
    border-bottom: none;
  }
}

/* ── Call to action band ── */
.callband {
  background: var(--acc);
  color: #FFF;
  padding: 64px 0;
}

.callband h2 {
  color: #FFF;
  max-width: 15ch;
}

.callband a {
  color: inherit;
}

.callband-grid {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 56px;
  align-items: start;
}

/* ── Left column: pitch ── */
.callband-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.callband-lede {
  margin-top: 16px;
  font-size: 17px;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.94);
}

.callband-agenda {
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  list-style: none;
}

.callband-agenda li {
  display: flex;
  gap: 16px;
  padding: 13px 0;
}

.callband-agenda li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.callband-agenda-n {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  padding-top: 2px;
}

.callband-agenda-t {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
}

.callband-agenda-d {
  margin-top: 4px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 42ch;
}

/* ── Right column: booking panel ── */
.callband-right {
  background: var(--sand);
  padding: 28px 30px;
}

.callband-book-heading {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.callband-book-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 42ch;
}

/* Calendly inline widget mount (deliberately NOT the class "calendly-inline-widget":
   Calendly's widget.js auto-initialises that class on its own, which would
   bypass js/consent.js's explicit, consent-gated init) — no card/shadow/rounding around it, so it
   reads as part of the sand panel rather than an embedded SaaS card.
   It bleeds edge-to-edge within the panel (cancelling .callband-right's own
   side padding) to cut the dead gutter around the calendar; text elements
   above/below keep the panel's normal inset. */
.calendly-mount {
  width: calc(100% + 60px);
  margin-left: -30px;
  margin-right: -30px;
  min-width: 280px;
  height: 640px;
  margin-top: 12px;
}

.calendly-mount iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.callband-fallback {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
}

.callband-fallback a {
  color: var(--ink);
  text-decoration: underline;
}

/* Pre-launch privacy guard: stands in for the Calendly widget while
   LEGAL_READY is false, keeping the booking panel visually present. */
.callband-prelaunch {
  margin-top: 12px;
  padding: 48px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.callband-prelaunch a {
  color: var(--ink);
  text-decoration: underline;
}

.callband-micro {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: center;
}

.callband-micro a {
  color: inherit;
  text-decoration: underline;
}

.callband-email {
  margin-top: 18px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.callband-email a {
  color: var(--ink-2);
  text-decoration: underline;
}

@media (max-width: 940px) {
  .callband-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .callband {
    padding: 52px 0;
  }

  .callband-right {
    padding: 22px;
  }

  /* Calendly's mobile layout stacks month picker, day list and time slots
     vertically, so it needs more height than the desktop side-by-side view.
     Side bleed matches .callband-right's mobile padding (22px) above. */
  .calendly-mount {
    width: calc(100% + 44px);
    margin-left: -22px;
    margin-right: -22px;
    height: 780px;
  }
}

/* ── FAQ ── */
.faq {
  padding: 82px 0;
  border-top: 1px solid var(--line);
}

.faq .list {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  position: relative;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 14px;
  font-size: 27px;
  font-weight: 400;
  color: var(--acc);
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq summary:hover {
  color: var(--acc);
}

.faq .a {
  padding: 0 0 24px;
  color: var(--ink-2);
  font-size: 16.5px;
  max-width: 70ch;
}

/* ── Premium hover interactions ── */
.doc,
.flip-card,
.scenario {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}

.doc:hover,
.has-js .flip-card:hover,
.scenario:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(31, 36, 42, 0.28);
}

.has-js .flip-card:hover,
.scenario:hover {
  position: relative;
  z-index: 1;
}

.scenario:hover {
  border-color: var(--line-2);
}

.doc:hover {
  box-shadow: 0 22px 48px -20px rgba(31, 36, 42, 0.4);
}

.hero .doc:hover {
  transform: rotate(-1.1deg) translateY(-3px);
}

.indep-doc:hover {
  transform: rotate(-1deg) translateY(-3px);
}

/* ── Footer ── */
.site-foot {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 56px 0 28px;
  font-size: 14.5px;
}

.site-foot .top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 0.85fr;
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 900px) {
  .site-foot .top {
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-foot .top {
    grid-template-columns: 1fr;
  }
}

.foot-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.foot-logo span {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.foot-logo .b1 {
  font-weight: 700;
  color: var(--acc-lt);
}

.foot-logo .b2 {
  font-weight: 400;
  color: #FFF;
}

.foot-lede {
  max-width: 30ch;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.82);
}

.foot-sub {
  max-width: 30ch;
  margin: 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
}

.site-foot h4 {
  color: #FFF;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 13px;
  font-weight: 700;
}

.site-foot a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  display: block;
  padding: 3px 0;
  transition: color 0.15s ease;
}

.site-foot a:hover {
  color: #FFF;
}

.foot-contact p {
  margin: 0 0 3px;
}

.foot-hours-label {
  margin-top: 14px !important;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45) !important;
}

.foot-text {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.foot-urgent span {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.lk-placeholder {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.35) !important;
}

.lk-placeholder:hover {
  color: rgba(255, 255, 255, 0.35) !important;
}

.ph-tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 7px;
  padding: 1px 5px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.45);
}

.site-foot .bot {
  padding-top: 22px;
  display: flex;
  gap: 12px 24px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
}

.site-foot .bot a {
  display: inline;
  padding: 0;
}

.ph {
  background: rgba(224, 122, 37, 0.16);
  border-bottom: 1px dashed var(--acc);
  padding: 0 3px;
}

.site-foot .ph {
  background: rgba(245, 148, 62, 0.18);
  color: rgba(255, 255, 255, 0.75);
}

/* ── Homepage footer (control-panel redesign) ──
   Scoped to .cai-footer / .cf-* so the legal-page footers above
   (.site-foot / .foot-*) are left completely untouched. */
.cai-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding: 64px 0 0;
  font-size: 14.5px;
}

.cf-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1.35fr 0.9fr;
  gap: 0;
  padding-bottom: 40px;
}

.cf-area {
  padding: 0 32px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.cf-area:first-child {
  padding-left: 0;
  border-left: none;
}

.cf-area:last-child {
  padding-right: 0;
}

@media (max-width: 900px) {
  .cf-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }
  .cf-area:nth-child(odd) {
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width: 560px) {
  .cf-grid {
    grid-template-columns: 1fr;
    row-gap: 22px;
    padding-bottom: 28px;
  }
  .cf-area {
    padding: 0 0 20px;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .cf-area:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  .cf-brand { order: 1; }
  .cf-contact { order: 2; }
  .cf-nav { order: 3; }
  .cf-social { order: 4; }
}

.cf-label {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
}

.cf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc-lt);
  margin-right: 9px;
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .cf-dot {
    animation: cf-pulse 2.6s ease-in-out infinite;
  }
}

@keyframes cf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Brand */
.cf-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
}

.cf-logo span {
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.cf-logo .b1 {
  font-weight: 700;
  color: var(--acc-lt);
}

.cf-logo .b2 {
  font-weight: 400;
  color: #FFF;
}

.cf-statement {
  max-width: 30ch;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

.cf-techline {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.cf-sep {
  color: var(--acc-lt);
  margin: 0 9px;
}

/* Esplora */
.cf-nav {
  display: flex;
  flex-direction: column;
}

.cf-nav a {
  position: relative;
  display: inline-block;
  width: fit-content;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.cf-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 100%;
  height: 1px;
  background: var(--acc-lt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.cf-nav a:hover,
.cf-nav a:focus-visible {
  color: #FFF;
}

.cf-nav a:hover::after,
.cf-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Contatti */
.cf-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.15s ease;
}

.cf-row:last-of-type {
  border-bottom: none;
}

.cf-row-static {
  cursor: default;
  margin-top: 4px;
}

/* Orari now sits outside .cf-quick as its own row (see the mobile
   redesign below), so it's no longer the last .cf-row of its parent
   for :last-of-type to catch — state its own border explicitly instead
   of relying on that selector still matching by accident. */
.cf-hours {
  border-bottom: none;
}

.cf-ico {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.15s ease;
}

a.cf-row:hover,
a.cf-row:focus-visible {
  color: #FFF;
}

a.cf-row:hover .cf-ico,
a.cf-row:focus-visible .cf-ico {
  color: var(--acc-lt);
}

.cf-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cf-row-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.cf-row-value {
  font-size: 14.5px;
  line-height: 1.4;
}

.cf-afterhours {
  margin-top: 9px;
  padding-left: 12px;
  border-left: 2px solid var(--acc);
}

.cf-afterhours-label {
  margin: 0 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acc-lt);
}

.cf-afterhours-text {
  margin: 0;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

/* Social */
.cf-social-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cf-social-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}

a.cf-social-item:hover,
a.cf-social-item:focus-visible {
  color: #FFF;
}

a.cf-social-item:hover .cf-mono,
a.cf-social-item:focus-visible .cf-mono {
  color: var(--acc-lt);
  border-color: var(--acc-lt);
}

.cf-social-item.is-pending {
  color: rgba(255, 255, 255, 0.64);
  cursor: default;
}

.cf-mono {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.cf-sico {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Per-icon optical correction: the four brand glyphs don't share the
   same ink coverage inside a 24x24 viewBox, so sizes are nudged
   individually to read as one consistent visual weight. */
.cf-sico-linkedin {
  width: 17px;
  height: 17px;
}

.cf-sico-instagram {
  width: 15px;
  height: 15px;
}

.cf-sico-facebook {
  width: 17px;
  height: 17px;
}

.cf-social-item.is-pending .cf-mono {
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.58);
}

.cf-social-name {
  font-size: 14px;
}

/* Bottom bar */
.cf-bottom {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
}

.cf-copy {
  color: rgba(255, 255, 255, 0.5);
}

.cf-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.cf-legal a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.15s ease;
}

.cf-legal a:hover,
.cf-legal a:focus-visible {
  color: #FFF;
}

@media (max-width: 560px) {
  .cf-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

.cf-company-line {
  padding: 0 0 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.32);
}

/* ── Mobile footer redesign ──
   A designed terminal section — brand band, a contact action band,
   navigation, social and a deliberate dark-bottom legal strip — rather
   than the desktop 4-column grid just stacked and squashed vertically.
   Deliberately placed after every base .cf-* rule above so these
   overrides win on selector-order, not just the max-width:560px
   condition matching. Desktop is untouched by this block. */
@media (max-width: 560px) {
  .cai-footer {
    padding-top: 40px;
  }

  .cf-label {
    margin-bottom: 12px;
  }

  /* ── Top brand band ── Prominent wordmark, positioning line, and a
     short technical accent rule under the stack — restrained, but
     enough to read as a deliberate opening band rather than a logo
     dropped above a link list. */
  .cf-area.cf-brand {
    padding-bottom: 22px;
  }
  .cf-logo {
    margin-bottom: 14px;
  }
  .cf-logo span {
    font-size: 21px;
  }
  .cf-statement {
    margin-bottom: 14px;
    font-size: 14.5px;
  }
  .cf-techline {
    position: relative;
    padding-top: 14px;
  }
  .cf-techline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 2px;
    background: var(--acc);
  }

  /* ── Explore ── compact 2-column link grid instead of 6 full-width
     rows, with a hairline between the two rows of links so the block
     reads as a small grid rather than loose text. */
  .cf-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 0;
  }
  .cf-nav a {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cf-nav a:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  /* ── Contact action band ── Three compact full-width cards stacked
     vertically (Email / Telefono / WhatsApp), each icon-left with
     label+value beside it — not three narrow columns. Full mobile
     width means the phone number has ample room to sit at a normal
     readable size on one line; a squared left accent bar (not a
     rounded card) keeps the technical/editorial visual language
     rather than a generic SaaS card look. This is the only
     `.cf-quick` rule in the stylesheet and it only fires under
     max-width:560px, so desktop is untouched. */
  .cf-quick {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 8px;
  }
  .cf-quick .cf-row {
    flex-direction: row;
    align-items: center;
    gap: 13px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 2px solid var(--acc);
    background: rgba(255, 255, 255, 0.04);
    min-width: 0;
  }
  .cf-quick .cf-ico {
    width: 18px;
    height: 18px;
    margin-top: 0;
    color: var(--acc-lt);
  }
  .cf-quick .cf-row-text {
    min-width: 0;
  }
  .cf-quick .cf-row-label {
    font-size: 10.5px;
  }
  .cf-quick .cf-row-value {
    font-size: 16px;
    line-height: 1.3;
  }
  .cf-quick .cf-row-tel .cf-row-value {
    white-space: nowrap;
  }

  /* Orari: a quiet utility line, not a fourth tile — icon + label/value
     inline, muted color, no border/background of its own. */
  .cf-hours {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 2px;
    color: rgba(255, 255, 255, 0.55);
  }
  .cf-hours .cf-ico {
    width: 13px;
    height: 13px;
    margin-top: 0;
    color: rgba(255, 255, 255, 0.4);
  }
  .cf-hours .cf-row-label {
    font-size: 10px;
  }
  .cf-hours .cf-row-value {
    font-size: 12px;
    line-height: 1.3;
  }
  .cf-afterhours {
    margin-top: 10px;
  }

  /* ── Social ── one compact horizontal strip, icon above name. Two
     active networks, grouped from the left edge with a fixed gap so the
     row lines up with the rest of the footer instead of floating. */
  .cf-social-row {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 28px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .cf-social-item {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 6px 0;
  }
  .cf-mono {
    width: 32px;
    height: 32px;
    border-color: rgba(245, 148, 62, 0.3);
  }
  .cf-social-name {
    font-size: 10.5px;
    text-align: left;
    overflow-wrap: anywhere;
  }

  /* ── Legal bottom strip ── A deliberate dark-bottom ending rather
     than the same background trailing off: a tonal shift plus the
     existing top border mark it as its own closing band. */
  .cf-bottom {
    margin-top: 6px;
    padding: 16px 0 4px;
    background: rgba(0, 0, 0, 0.16);
  }
  .cf-company-line {
    padding-top: 10px;
    background: rgba(0, 0, 0, 0.16);
  }
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

figure {
  margin: 0;
}

/* ── Mobile vertical rhythm ──
   Desktop's ~64–84px section padding, generous internal gaps and
   sometimes-stacked-to-one-column grids are tuned for a slow scroll on
   a wide viewport — stacked straight down on a phone they read as the
   desktop page compressed into one long column rather than a page
   designed for a phone. This section works section-by-section: outer
   padding down to a ~48–72px rhythm, then the internal gaps, oversized
   margins and one-column-by-default stacks that were adding length
   without adding anything the phone reader actually needed. */
@media (max-width: 640px) {
  /* Starting point (carousel intro) */
  .paths {
    padding: 48px 0 52px;
  }

  .route-system {
    margin-top: 28px;
  }

  /* Quello che non facciamo — tighten the gaps between headline / intro
     / giant zero / document / Cliente-Fornitore axis without touching
     the composition itself. */
  .indep {
    padding: 44px 0 40px;
  }

  .indep-grid {
    gap: 26px;
  }

  .indep-intro {
    margin-top: 12px;
  }

  .indep-metric {
    margin-top: 20px;
  }

  .indep-metric-rule {
    margin-bottom: 12px;
  }

  .indep-metric-note {
    margin-top: 6px;
  }

  .indep-axis {
    margin-top: 24px;
  }

  .indep-node {
    padding: 10px 0;
  }

  .indep-cailura {
    margin-top: 4px;
  }

  /* Services — carousel (see the mobile carousel system above): tighten
     the heading-to-carousel gap and each card's own internal padding. */
  .services {
    padding: 52px 0;
  }

  .svc-paths {
    margin-top: 24px;
  }

  .flip-card-face,
  .flip-card-front {
    padding: 22px 20px 20px;
    gap: 16px;
  }

  .fc-name {
    font-size: 24px;
  }

  .fc-front-foot {
    padding-top: 14px;
  }

  /* Document deck — carousel (see the mobile carousel system above):
     same heading-to-carousel tightening, proof itself stays untouched. */
  .deliver {
    padding: 52px 0;
  }

  .dgrid {
    margin-top: 22px;
  }

  .dwrap .dcap {
    margin-top: 12px;
    padding-top: 10px;
  }

  /* Metodo CAILURA (now a carousel — see .mcarousel rules) */
  .method {
    padding: 52px 0;
  }

  .method-stages {
    margin-top: 26px;
  }

  /* Markets / globe — cinematic but controlled: cap the globe smaller
     than the 84vw/420px desktop-tablet size so it reads as a strong
     visual moment instead of a section-filling one, and tighten the
     copy/market-list rhythm around it. */
  .origins {
    padding: 52px 0;
  }

  .origins-grid {
    row-gap: 22px;
  }

  .globe-stage {
    width: min(300px, 78vw);
  }

  .market-select {
    margin-top: 20px;
  }

  .origins-outro {
    margin-top: 4px;
  }

  .origins-close {
    margin-top: 4px;
  }

  .origins-note {
    margin-top: 16px;
    padding-top: 14px;
  }

  /* Experience / credibility — let the three headline metrics sit in
     one compact row instead of stacking full-width; the intro/manifesto
     text keeps its normal max-width/line-height, just with less dead
     air around it. */
  .proof {
    padding: 40px 0;
  }

  .about-intro {
    margin-top: 8px;
  }

  .stats {
    margin-top: 18px;
  }

  .stats.stats-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-3 .stat {
    padding: 14px 8px 14px 0;
    border-left: none;
    border-bottom: none;
  }

  .stats-3 .stat + .stat {
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }

  .stats-3 .stat b {
    font-size: clamp(24px, 7vw, 32px);
  }

  .stat-desc {
    font-size: 11.5px;
  }

  .about-grid {
    margin-top: 24px;
  }

  .about-manifesto {
    margin-top: 10px;
    padding-top: 10px;
  }

  /* Orange CTA — a conversion moment, not another long chapter. */
  .callband {
    padding: 48px 0;
  }

  .callband-lede {
    margin-top: 10px;
  }

  .callband-agenda {
    margin-top: 22px;
    padding-top: 16px;
  }

  .callband-agenda li {
    padding: 10px 0;
  }

  .callband-micro {
    margin-top: 10px;
  }

  .callband-email {
    margin-top: 12px;
  }

  /* FAQ — already close to right; just tighten the list's own rhythm. */
  .faq {
    padding: 52px 0;
  }

  .faq .list {
    margin-top: 22px;
  }

  .faq summary {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .faq .a {
    padding-bottom: 20px;
  }
}

/* ────────────────────────────────────────────────────────────
   CONSENT — banner, preferences dialog, footer control, booking gate
   (markup is injected by js/consent.js)
   ──────────────────────────────────────────────────────────── */

/* Footer "Preferenze cookie" control: a <button> that reads like the
   neighbouring legal links (inherits their colour, size and spacing). */
.cookie-prefs-link {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.cookie-prefs-link:hover,
.cookie-prefs-link:focus-visible {
  color: #FFF;
}

/* Banner: fixed to the bottom, never wider than the viewport. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--paper);
  border-top: 3px solid var(--acc);
  box-shadow: 0 -6px 24px rgba(31, 36, 42, 0.12);
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
}

.consent-banner-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px 28px;
}

.consent-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.consent-text a,
.consent-note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.consent-btn {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Accetta / Rifiuta / Salva share ONE style: equal weight, no nudging. */
.consent-btn-choice {
  min-width: 108px;
  background: var(--ink);
  color: #FFF;
}

.consent-btn-choice:hover {
  background: #363c44;
  border-color: #363c44;
}

.consent-btn-manage {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}

.consent-btn-manage:hover {
  border-color: var(--ink);
}

/* Dialog */
html.consent-lock {
  overflow: hidden;
}

.consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(31, 36, 42, 0.55);
}

.consent-panel {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border-top: 3px solid var(--acc);
  box-shadow: 0 18px 48px rgba(31, 36, 42, 0.28);
  padding: 22px 24px 24px;
}

.consent-panel:focus {
  outline: none;
}

.consent-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.consent-title {
  margin: 0;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.consent-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -12px 0 0;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

.consent-close:hover {
  color: var(--acc-dk2);
}

.consent-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.consent-rows {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.consent-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.consent-row-main {
  min-width: 0;
}

.consent-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.consent-row-name {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
}

.consent-row-status {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acc-dk2);
}

.consent-row-desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Switch: a real checkbox (role="switch") stretched over a drawn track. */
.consent-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  margin-top: 2px;
}

.consent-switch input {
  position: absolute;
  top: -9px;        /* 44px tap target around the 26px track */
  left: 0;
  width: 100%;
  height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.consent-switch input:disabled {
  cursor: not-allowed;
}

.consent-switch-track {
  position: absolute;
  inset: 0;
  background: var(--line-2);
  border-radius: 13px;
  transition: background 0.15s ease;
}

.consent-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #FFF;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(31, 36, 42, 0.3);
  transition: transform 0.15s ease;
}

.consent-switch input:checked + .consent-switch-track {
  background: var(--acc-dk);
}

.consent-switch input:checked + .consent-switch-track::after {
  transform: translateX(20px);
}

.consent-switch input:disabled + .consent-switch-track {
  opacity: 0.55;
}

.consent-switch input:focus-visible + .consent-switch-track {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
}

.consent-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.consent-panel-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

/* Booking gate: stands in for the Calendly widget until it is enabled. */
.callband-gate {
  margin-top: 12px;
  padding: 40px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-align: center;
}

.callband-gate-t {
  margin: 0;
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
}

.callband-gate-d {
  margin: 8px auto 0;
  max-width: 40ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.callband-gate-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.callband-gate-actions .consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.callband .callband-gate-actions a.consent-btn-manage {
  color: var(--ink);
}

@media (max-width: 720px) {
  .consent-banner-in {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 16px 18px;
  }

  /* Rifiuta / Accetta stay side by side at equal width; Gestisci below. */
  .consent-actions .consent-btn-choice {
    flex: 1 1 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .consent-actions .consent-btn-manage {
    flex: 1 1 100%;
  }

  .consent-panel {
    padding: 18px 18px 20px;
  }

  .callband-gate {
    padding: 32px 18px;
  }

  .callband-gate-actions {
    flex-direction: column;
  }

  .callband-gate-actions .consent-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consent-switch-track,
  .consent-switch-track::after {
    transition: none;
  }
}