/* ARKL Group – "technical drawing" look. Mobile-first.
   Palette refined from the client logo (contenuti/): graphite, warm paper, laser orange.
   On paper, brand orange is 2.67:1: decorative only; --accent (same hue, 4.96:1 on --bg-alt) for text/controls.
   On graphite, --laser is 7.81:1: text, links and buttons. Cyan only for the 3D point cloud and small graphics.
   Every text/background pair is measured against WCAG AA. */

/* Montserrat (SIL OFL 1.1, license in /fonts/montserrat-OFL.txt): close to the logo lettering.
   Headings only. "optional" = no swap after first paint: no layout shift, no LCP delay. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("/fonts/montserrat-latin-wght.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;
}

/* JetBrains Mono (SIL OFL 1.1, license in /fonts/jetbrains-mono-OFL.txt): technical labels only
   (eyebrows, HUD, chips, numbers), never paragraphs. Not preloaded: it must not compete with the LCP title. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-wght.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;
}
/* Local fallback with the same character width (0.6 em) as JetBrains Mono: the swap does not reflow labels. */
@font-face {
  font-family: "Mono Fallback";
  src: local("Consolas");
  size-adjust: 109%; /* Consolas is 0.55 em wide; other systems fall through to ui-monospace (0.6 em) */
}

:root {
  --brand-orange: #e38424;   /* logo orange: decorative stripes and marks */
  --brand-gray: #6b6a6f;     /* logo gray */
  --ink: #141417;            /* graphite, almost black: dark sections (also the 3D scene background) */
  --ink-rgb: 20 20 23;       /* same color, for translucent overlays */
  --ink-2: #1e1e23;          /* surfaces on dark (cards, buttons) */
  --ink-line: #34343b;       /* decorative lines on dark */
  --laser: #ff8a2a;          /* laser orange: text, links, buttons and the scan plane on dark */
  --laser-hover: #ffa04d;
  --model: #e4e3df;          /* 3D scenes: white BIM model */
  --model-edge: #46453f;     /* 3D scenes: edges drawn on the white model */
  --cyan: #4fd8eb;           /* technical cyan: 3D point cloud and small graphics only, never text on paper */
  --text: #1b1a18;
  --muted: #5f5d58;          /* warm gray, 5.82:1 on --bg-alt */
  --on-dark: #f5f3ee;
  --on-dark-muted: #b9b5ad;
  --bg: #fcfbf8;             /* warm white */
  --bg-alt: #f2f1ed;         /* small light surfaces only (boxes, image frames): never a whole section */
  --line: #e2dfd8;           /* hairlines on paper (separators, guides): warm neutral, not beige */
  --accent: #9a5716;        /* accessible orange for text and controls on paper */
  --accent-dark: #7f470f;
  --error: #b00020;
  --todo-bg: #fff4ce;
  --todo-border: #c99a00;
  /* RGB triplets: the same palette for translucent layers, rgb(var(--x-rgb) / alpha) */
  --laser-rgb: 255 138 42;
  --brand-orange-rgb: 227 132 36;
  --laser-core: #ffd2a8;     /* hot centre of the laser line */
  --laser-tint: #fff3e6;     /* faint laser glow on paper */
  --laser-tint-rgb: 255 243 230;
  --on-dark-muted-rgb: 185 181 173;
  --accent-rgb: 154 87 22;
  --bg-rgb: 252 251 248;
  --white: #fff;
  --white-rgb: 255 255 255;
  --shadow-rgb: 31 30 34;
  --line-strong: #8a8780;    /* form control borders: 3.6:1 on white (WCAG 1.4.11) */
  /* Line system (docs/brand.md §12): drawing grid on graphite, registration marks, margin guides */
  --grid-line: rgb(var(--white-rgb) / .035);
  --mark: var(--line-strong); /* crosses and dimension ticks: 3.46:1 on --bg, 5.13:1 on --ink */
  --guide: var(--line);       /* dashed margin guides on paper */
  /* Technical drawing: almost square corners for boxes; pills (999px) only for buttons and chips */
  --radius: 4px;
  --radius-sm: 2px;
  --wrap: 74rem;
  --shadow: 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 8px 24px rgb(var(--shadow-rgb) / .08);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Montserrat", var(--font);
  --font-mono: "JetBrains Mono", "Mono Fallback", ui-monospace, monospace;
}

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

html { scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* Short pages (404, errore): main grows so the footer reaches the bottom of the viewport */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
/* The last section takes the free space, so no empty white band between it and the footer */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > :last-child { flex-grow: 1; }

h1, h2, h3,
.nav a, .button, .lead-form legend, .footer-claim { font-family: var(--font-display); }
/* Technical labels in mono, like the annotations of a drawing */
.eyebrow, .stat-value, .benefit-index, .chips li, .formats-label, .footer-heading,
.process-step::before, .hero-scan-hud { font-family: var(--font-mono); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0 0 1rem; }
h1 { font-size: clamp(2.3rem, 6.5vw, 4.25rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.85rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: .5rem; }
p { margin: 0 0 1rem; }

a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent-dark); }
a[href^="tel:"] { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.section-dark :focus-visible { outline-color: var(--laser); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 1.25rem; }
/* .wrap.narrow = centered column (legal and short pages); .narrow inside .wrap = left-aligned text measure (home, chi-siamo) */
.narrow { max-width: 46rem; }

/* Author display rules (.steps { display: flex }) would otherwise override the hidden attribute */
[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  padding: .5rem 1rem;
  background: var(--ink);
  color: var(--on-dark);
  z-index: 100;
}
.skip-link:focus { top: 1rem; }

/* Visible placeholders for missing client content */
.todo {
  background: var(--todo-bg);
  color: var(--text);
  border-left: 4px solid var(--todo-border);
  padding: .25rem .5rem;
  font-size: .95rem;
}

/* ---------- Header ---------- */
/* Sticky on desktop only: on phones it would take two rows of a small screen,
   and the bottom sticky CTA already keeps the quote one tap away. */
.site-header {
  position: relative;
  z-index: 50;
  background: rgb(var(--bg-rgb) / .96);
  border-top: 2px solid var(--brand-orange); /* 2px like every other accent bar */
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  padding-block: .5rem;
}
.brand { display: inline-block; line-height: 0; }
.brand img { display: block; width: 102px; height: 48px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-block; padding: .6rem 0; color: var(--text); font-weight: 600; font-size: .95rem; text-decoration: none; }
.nav a:hover { color: var(--accent); }
.nav .nav-cta {
  padding: .55rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
}
.nav .nav-cta:hover { background: var(--accent); color: var(--white); }
/* Phones: the bottom sticky CTA replaces the header one, so the header stays on two rows */
@media (max-width: 47.99rem) {
  .nav li:has(.nav-cta) { display: none; }
}
/* "Menu" button (js/nav.js), phones only. (scripting: enabled) is known at the first paint, so the folded
   menu causes no layout shift; without JS, or where the feature is unknown, the plain list stays. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 600 .95rem var(--font-display);
  cursor: pointer;
}
/* Three bars that turn into a cross when open */
.nav-toggle::before {
  content: "";
  width: 16px;
  height: 12px;
  background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.nav-toggle[aria-expanded="true"]::before {
  background: linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.nav-toggle:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 47.99rem) and (scripting: enabled) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; }
  /* Open: a panel under the header, one link per row (44px+ targets) */
  .nav.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .25rem 0 .75rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgb(var(--shadow-rgb) / .12);
  }
  .nav.is-open a { display: block; padding: .8rem 1.25rem; font-size: 1.05rem; border-top: 1px solid var(--line); }
}
/* Narrow phones (360 px): tighter nav so "FAQ" does not wrap to a third row */
@media (max-width: 24.99rem) {
  .nav { column-gap: .9rem; }
  .nav a { font-size: .9rem; }
}

/* ---------- Shared section parts ---------- */
.section { padding-block: 4rem; }
/* One light background for every light section: consecutive light sections are separated by a
   hairline, like the sheets of a technical drawing; the dark sections give the page its rhythm. */
.section-alt { background: var(--bg); }
.section:not(.section-dark):not([hidden]) + .section:not(.section-dark) { border-top: 1px solid var(--line); }
.section-dark { background: var(--ink); color: var(--on-dark); }
.section-dark a:not(.button) { color: var(--laser); }
.section-dark a:not(.button):hover { color: var(--laser-hover); }

/* Line system (docs/brand.md §12). --guide-x: the sheet margin, half way between the viewport edge and the
   text column (never under text). Registration cross where the margin meets the top edge of each section:
   it straddles the seam, like the corner marks of a drawing sheet. Decorative, no layout impact. */
.section { position: relative; --guide-x: max(.5rem, calc((100% - var(--wrap)) / 2)); }
.section::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -6px;
  left: calc(var(--guide-x) - 6px);
  width: 13px;
  height: 13px;
  pointer-events: none;
  background:
    linear-gradient(var(--mark) 0 0) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--mark) 0 0) 0 50% / 100% 1px no-repeat;
}
/* Dashed margin guides on paper sections, desktop only (on phones they would hug the screen edge) */
@media (min-width: 48rem) {
  .section:not(.section-dark) {
    background-image:
      linear-gradient(var(--guide) 50%, transparent 0),
      linear-gradient(var(--guide) 50%, transparent 0);
    background-size: 1px 8px;
    background-repeat: repeat-y;
    background-position: var(--guide-x) 0, calc(100% - var(--guide-x)) 0;
  }
}

/* Light -> dark seam (brand.md §12): the laser line of the footer, as a 1px hairline, on the top edge of every
   dark section of a page body. With the home alternation it marks each change of sheet. Static, decorative. */
.section.section-dark::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--laser-rgb) / 0), rgb(var(--laser-rgb) / .85) 18%, var(--laser-core) 50%, rgb(var(--laser-rgb) / .85) 82%, rgb(var(--laser-rgb) / 0));
  box-shadow: 0 0 10px rgb(var(--laser-rgb) / .4), 0 0 26px 2px rgb(var(--laser-rgb) / .12);
}
/* Dark sections of the page body: drawing grid + depth. The graphite lifts slightly towards the top (--ink-2)
   and the laser seam leaves a faint orange glow in the top corner (7% at most: text contrast stays AA). */
.section.section-dark.blueprint {
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(ellipse 60% 22rem at 88% 0, rgb(var(--laser-rgb) / .07), rgb(var(--laser-rgb) / 0) 70%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 18rem);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}

/* Technical drawing grid, pure CSS, decorative */
.blueprint {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; flex: none; width: 1.75rem; height: 2px; background: var(--brand-orange); }
.section-dark .eyebrow { color: var(--laser); }
.section-dark .eyebrow::before { background: var(--laser); }

.section-intro { max-width: 44rem; font-size: 1.15rem; color: var(--muted); margin-bottom: 2.5rem; }
.section-dark .section-intro { color: var(--on-dark-muted); }

/* Proof line (real data only) and closing call to action of a section */
.proof-line { margin: 1.5rem 0 0; font-size: .95rem; color: var(--muted); }
.section-dark .proof-line { color: var(--on-dark-muted); }
.hero .proof-line { margin: 0 0 1.5rem; }
.hero .eyebrow { text-wrap: balance; }
.section-cta { margin: 2rem 0 0; }
.section-cta p { margin: .75rem 0 0; color: var(--muted); }
.section-dark .section-cta p { color: var(--on-dark-muted); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.button:hover { background: var(--accent-dark); color: var(--white); transform: translateY(-1px); }
.button[disabled] { opacity: .6; cursor: progress; transform: none; }
.button-secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
/* Same feedback as the primary button: darker accent, faint accent tint (accent-dark 6.65:1 on the tint) */
.button-secondary:hover { background: rgb(var(--accent-rgb) / .06); color: var(--accent-dark); border-color: var(--accent-dark); }
/* On dark: laser orange background, graphite text (7.81:1) */
.section-dark .button { background: var(--laser); color: var(--ink); }
.section-dark .button:hover { background: var(--laser-hover); color: var(--ink); }
.section-dark .button-ghost { background: transparent; color: var(--on-dark); border-color: var(--ink-line); }
.section-dark .button-ghost:hover { background: var(--ink-2); color: var(--on-dark); border-color: var(--on-dark-muted); }

/* ---------- Hero ---------- */
/* Full-bleed scene (js/hero-3d.js, fallback js/hero-scan.js) behind the text. The canvas is absolutely
   positioned and the space is reserved from the first paint: no layout shift when it starts.
   Phones: the building sits between the proof line and the buttons (Zee, 2026-10-26). Desktop: right half, ~100svh. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 2.5rem 3rem;
}
.hero > .wrap { position: relative; z-index: 1; pointer-events: none; }
.hero-text { position: relative; pointer-events: auto; }
/* Phones: full-bleed shade behind each text block only, so the building between them stays clear and
   the text keeps AA contrast over the scene. Edges fade towards the frame. */
.hero-text::before {
  content: "";
  position: absolute;
  inset: -1.5rem -50vw;
  z-index: -1;
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0), rgb(var(--ink-rgb) / .94) 1.5rem, rgb(var(--ink-rgb) / .94) calc(100% - 1.5rem), rgb(var(--ink-rgb) / 0));
  pointer-events: none;
}
.hero-grid { display: grid; gap: 0; align-items: center; }
.hero h1 { color: var(--white); font-size: clamp(2.2rem, 9.4vw, 3.9rem); text-wrap: balance; }
.lead { font-size: 1.2rem; color: var(--on-dark-muted); max-width: 38rem; margin-bottom: 2rem; }
.hero .lead { font-size: 1.1rem; margin-bottom: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.hero-zone { margin: 0; }
.media-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 1.5rem;
  border: 2px dashed var(--todo-border);
  border-radius: var(--radius);
  background: var(--todo-bg);
  color: var(--text);
  text-align: center;
}
.hero-video { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 20px 60px rgb(var(--shadow-rgb) / .45); }
.video-toggle { margin-top: .75rem; }

.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-scan { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Mouse: the building can be dragged round (js/hero-loop.js bindMouseDrag) */
.hero.is-spinnable .hero-scan { cursor: grab; }
.hero.is-spinning, .hero.is-spinning * { cursor: grabbing; }
/* Above the canvas, below the text: the drawing-sheet grid of the dark sections (on desktop also the
   shade that keeps the text at AA contrast; on phones the shade is .hero-text::before). */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) -1px -1px / 48px 48px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) -1px -1px / 48px 48px;
}
/* Where the building is drawn: the scripts read this rect, so the layout lives here only.
   Phones: in the flow, between the proof line and the buttons. */
.hero-frame {
  position: relative;
  z-index: 1;
  height: clamp(13rem, 34svh, 17rem); /* a little taller than at first (2026-10-27): bigger buildings */
  margin-block: .5rem 3.75rem; /* room below for the building switch */
  pointer-events: none;
}
/* Viewfinder corners around the building (on-dark-muted at 50%) */
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  --c: linear-gradient(rgb(var(--on-dark-muted-rgb) / .5) 0 0) no-repeat;
  background: var(--c) top left / 18px 1px, var(--c) top left / 1px 18px, var(--c) top right / 18px 1px, var(--c) top right / 1px 18px,
    var(--c) bottom left / 18px 1px, var(--c) bottom left / 1px 18px, var(--c) bottom right / 18px 1px, var(--c) bottom right / 1px 18px;
}
.hero-scan-hud { position: absolute; top: .7rem; left: .9rem; margin: 0; font-size: .7rem; }
.hero-scan-hud:empty { visibility: hidden; }
/* Phones: round icon button (the text stays as its accessible name, font-size 0); desktop: text pill. */
.hero-scan-toggle {
  position: absolute;
  top: .25rem;
  right: .25rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / .85);
  color: var(--on-dark-muted);
  font: inherit;
  font-size: 0;
  cursor: pointer;
  pointer-events: auto;
}
/* Pause glyph (two bars); play triangle when paused */
.hero-scan-toggle::before {
  content: "";
  width: 10px;
  height: 12px;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px);
}
.hero-scan-toggle[data-paused="true"]::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  background: none;
}
.hero-scan-toggle:hover { color: var(--on-dark); border-color: var(--on-dark-muted); }
/* Building switch: previous / next arrows around the place name (mono, laser orange) and n/4.
   Phones: just below the frame (inside it, it covered the base of the building); from 64rem: bottom left
   inside the frame. The name has a fixed width (longest place) so the arrows never move. */
.hero-switch {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / .85);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  pointer-events: auto;
}
.hero-switch[hidden] { display: none; }
.hero-switch button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--on-dark-muted);
  cursor: pointer;
}
/* Chevron drawn with two borders: no glyph, same look on every font */
.hero-switch button::before {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 0 1.5px 1.5px;
  transform: translateX(1.5px) rotate(45deg);
}
.hero-switch button[data-step="1"]::before { transform: translateX(-1.5px) rotate(-135deg); }
.hero-switch button:hover { color: var(--on-dark); background: rgb(var(--on-dark-muted-rgb) / .14); }
.hero-switch-name { min-width: 11ch; text-align: center; color: var(--laser); }
.hero-switch-count { margin: 0 .2rem 0 .5rem; color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.hero-switch[aria-busy="true"] { cursor: progress; }

/* Title reveal: each word is a mask */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.word-inner { display: inline-block; }

/* Numbers band at the bottom of the hero */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--ink-line);
}
.stat { display: flex; flex-direction: column; gap: .35rem; }
.stat-value { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 800; line-height: 1; color: var(--laser); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.stat-value.todo { font-size: 1.1rem; align-self: flex-start; letter-spacing: 0; color: var(--text); }
.stat-label { color: var(--on-dark-muted); font-size: .95rem; }

/* ---------- Method / benefits ---------- */
.benefits { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
h2 + .benefits,
h2 + .people { margin-top: 2rem; }
/* Benefit cards: white sheets on paper with viewfinder corners (the mark of the hero frame), soft shadow */
.benefit {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .05);
  --corner: var(--mark);
  isolation: isolate; /* .card-fx (hover glow, z-index -1) paints above the background, below the text */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Same hover as the service cards (Zee, 2026-10-16): the sheet lifts, border and viewfinder corners
   light up in the logo orange, a laser spot runs along the top edge, the glow follows the cursor. */
.benefit:hover,
.benefit.is-focus {
  transform: translateY(-6px);
  border-color: var(--brand-orange);
  box-shadow: 0 2px 4px rgb(var(--shadow-rgb) / .06), 0 22px 48px rgb(var(--shadow-rgb) / .14);
  --corner: var(--brand-orange);
}
/* Top-edge scan: on .card-fx::after, because .benefit::after draws the viewfinder corners */
.benefit .card-fx::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--laser-rgb) / 0), var(--laser-core), rgb(var(--laser-rgb) / 0));
  box-shadow: 0 0 12px 2px rgb(var(--laser-rgb) / .55);
  transform: translateX(-110%);
}
.benefit:hover .card-fx::after,
.benefit.is-focus .card-fx::after { transform: translateX(300%); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
/* Index numbers: one style on the whole site (mono, light weight, accent on paper / laser on graphite).
   The old outlined digits drew the dot inside the mono zero as a ring. */
.benefit-index {
  display: block;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}
.benefit p { color: var(--muted); margin: 0; }

/* Wireframe icons (decorative, aria-hidden): stroke only, accent strokes in orange.
   .tech-icon clips; animations.js reveals the icon top-down by sliding the clip and the svg in
   opposite directions (transform only, no stroke-dashoffset). */
.tech-icon { display: block; flex: none; width: 48px; height: 48px; overflow: hidden; color: var(--muted); }
.tech-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tech-icon .ic-accent { stroke: var(--brand-orange); }
.tech-icon .ic-dots { stroke-width: 2.6; }
.section-dark .tech-icon { color: var(--on-dark-muted); }
.section-dark .tech-icon .ic-accent { stroke: var(--laser); }
.section-dark .tech-icon .ic-dots { stroke: var(--cyan); }

/* Viewfinder corners, the same mark as the hero frame. --corner sets the colour. */
.benefit::after,
.phase-frame::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  --c: linear-gradient(var(--corner, rgb(var(--on-dark-muted-rgb) / .55)) 0 0) no-repeat;
  background: var(--c) top left / 14px 1px, var(--c) top left / 1px 14px, var(--c) top right / 14px 1px, var(--c) top right / 1px 14px,
    var(--c) bottom left / 14px 1px, var(--c) bottom left / 1px 14px, var(--c) bottom right / 14px 1px, var(--c) bottom right / 1px 14px;
}

.benefit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
/* Home 01: large index beside the icon (same digits as the other indexes, at display size) */
.benefit-head .benefit-index { margin: 0; font-size: clamp(3rem, 6vw, 4rem); letter-spacing: -.06em; }
/* "Uncover" reveal (animations.js, js/scan-in.js): a cover the colour of the page, with the laser line on
   its top edge, slides down and uncovers the card; the frame (border) shows first. Hidden without JS. */
.benefit-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: var(--bg);
}
.benefit-scan::before,
.benefit-scan::after { content: ""; position: absolute; left: 0; right: 0; }
/* On paper: logo orange with a hot laser centre and a soft glow (decorative, it crosses the text only for a moment) */
.benefit-scan::before {
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--brand-orange-rgb) / 0), var(--brand-orange) 18%, var(--laser) 50%, var(--brand-orange) 82%, rgb(var(--brand-orange-rgb) / 0));
  box-shadow: 0 0 10px 1px rgb(var(--brand-orange-rgb) / .45), 0 0 24px 3px rgb(var(--brand-orange-rgb) / .15);
}
/* Pages without GSAP (js/scan-in.js): covered while waiting, then the same sweep as a CSS animation */
.scan-pending > .benefit-scan { opacity: 1; }
.is-scanning > .benefit-scan { animation: scan-sweep 1.3s ease-in-out var(--scan-delay, 0s) both; }
@keyframes scan-sweep {
  0% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(100%); }
}
/* Wake above the line, like the scan plane of the hero */
.benefit-scan::after { bottom: 100%; height: 3.5rem; background: linear-gradient(0deg, rgb(var(--brand-orange-rgb) / .1), rgb(var(--brand-orange-rgb) / 0)); }

/* ---------- Services ---------- */
.cards { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.card {
  position: relative;
  isolation: isolate; /* .card-fx (z-index -1) paints above the card background, below the text */
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white); /* white sheet on warm paper */
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .05), 0 6px 18px rgb(var(--shadow-rgb) / .06);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--brand-orange); }
/* Scan on the top rule on hover: a hot laser spot with its glow runs once along the orange line */
.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--laser-rgb) / 0), var(--laser-core), rgb(var(--laser-rgb) / 0));
  box-shadow: 0 0 12px 2px rgb(var(--laser-rgb) / .55);
  transform: translateX(-110%);
  pointer-events: none;
}
/* Hover: the sheet lifts, its border lights up in the logo orange, the index turns accent */
/* .is-focus: the same state on phones, given by scroll to the card in the middle of the screen (animations.js focusCards) */
.card:hover,
.card.is-focus {
  transform: translateY(-6px);
  border-color: var(--brand-orange);
  box-shadow: 0 2px 4px rgb(var(--shadow-rgb) / .06), 0 22px 48px rgb(var(--shadow-rgb) / .14);
}
.card:hover::after,
.card.is-focus::after { transform: translateX(300%); transition: transform .9s cubic-bezier(.3, .7, .2, 1); }
.card:hover .card-index,
.card.is-focus .card-index { color: var(--accent); }
.card p { color: var(--muted); }
.card-note { margin: auto 0 0; padding-top: .5rem; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.card-head .tech-icon { width: 44px; height: 44px; color: var(--text); }
.card-index { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .08em; color: var(--muted); transition: color .25s ease; }
/* Hover layer (desktop with JS): an orange glow that follows the cursor, under the text */
.card-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* Glow: moved by transform from --gx/--gy (animations.js, fine pointer only) */
.card-fx::before {
  content: "";
  position: absolute;
  top: -11rem;
  left: -11rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--brand-orange-rgb) / .14), rgb(var(--brand-orange-rgb) / 0) 65%);
  opacity: 0;
  transform: translate(var(--gx, 50%), var(--gy, 0));
  transition: opacity .35s ease;
}
.card.is-tilt:hover .card-fx::before,
.benefit.is-tilt:hover .card-fx::before,
.card.is-focus .card-fx::before,
.benefit.is-focus .card-fx::before { opacity: 1; }
/* While GSAP drives the tilt, a CSS transform transition would lag behind every frame */
.card.is-tilt, .benefit.is-tilt { transition: translate .4s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease; }
.card.is-tilt:hover, .benefit.is-tilt:hover { transform: none; } /* the lift comes from GSAP (inline transform) */
/* Phones: GSAP owns transform (scroll tilt), so the lift uses the separate translate property */
.card.is-tilt.is-focus, .benefit.is-tilt.is-focus { translate: 0 -6px; }
/* Chi siamo (js/scan-in.js, no GSAP): the inline transform is eased by CSS instead */
.benefit.is-tilt.tilt-css { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, border-color .25s ease; }

.formats, .audience, .services-more { margin-top: 2.5rem; }
/* Secondary services: compact list, lighter than the main cards */
.services-more-list { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.services-more-list li { display: flex; flex-direction: column; padding-top: 1rem; border-top: 1px solid var(--line); }
.services-more-list h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.services-more-list p { margin: 0 0 .5rem; color: var(--muted); }
.formats-label { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: .4rem .9rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: .85rem;
  font-weight: 600;
}
.chips-outline li { background: transparent; color: var(--text); border: 1px solid var(--line); }
/* Audience chips are words, not file formats: display font, not mono */
.audience .chips li { font-family: var(--font-display); font-size: .9rem; }

/* ---------- Scrollytelling: stacked by default, layered and pinned when active ---------- */
.scrolly-view { margin: 0 0 1.5rem; }
.scrolly-view img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.scrolly-view figcaption { margin-top: .5rem; font-weight: 700; }
/* Phases sheet while the real views are missing: one column per phase (image + step), compared side by side.
   A dimension chain joins the columns: 1px line with an oblique tick at the start of each phase (brand.md §12).
   Static by design (no pin). Phones: one phase under the other; 48-64rem: image beside the text. */
.phase-strip { margin: 0; }
.phases {
  --tick: linear-gradient(-45deg, transparent calc(50% - .5px), var(--mark) 0 calc(50% + .5px), transparent 0);
  --chain: 1.95rem;          /* height of the index row; the chain runs along its bottom */
  position: relative;
  display: grid;
  gap: 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: phase;
}
.phases li { position: relative; display: grid; gap: 1rem; align-content: start; padding-top: calc(var(--chain) + 1.25rem); counter-increment: phase; }
.phases li::before {
  content: counter(phase, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--accent);
}
/* Chain segment of this phase: line + oblique tick at its start */
.phases li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--chain) - 6px);
  height: 11px;
  pointer-events: none;
  background: linear-gradient(var(--mark) 0 0) 0 50% / 100% 1px no-repeat, var(--tick) 0 0 / 11px 11px no-repeat;
}
.phases h3 { margin: 0; }
.phases p { color: var(--muted); margin: 0; }
/* Image frame: paper surface; multiply turns the white of the drawings into paper, lines and colours unchanged */
.phase-frame { position: relative; padding: .75rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm); --corner: var(--mark); }
.phase-frame img { display: block; width: 100%; height: auto; aspect-ratio: 528 / 365; object-fit: contain; mix-blend-mode: multiply; }
.phase-strip figcaption { max-width: 46rem; margin-top: 2rem; color: var(--muted); font-size: .95rem; }
/* On graphite (home 02): the drawings hang as paper sheets. The frame keeps its paper surface (so multiply still
   turns the drawings' white into paper), loses the hairline, gains depth; the viewfinder corners move 6px out. */
.section-dark .phases li::before { color: var(--laser); }
.section-dark .phases h3 { color: var(--white); }
.section-dark .phases p,
.section-dark .phase-strip figcaption { color: var(--on-dark-muted); }
.section-dark .phase-frame {
  border-color: transparent;
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .4), 0 16px 40px rgb(var(--shadow-rgb) / .6);
  --corner: rgb(var(--on-dark-muted-rgb) / .55);
}
.section-dark .phase-frame::after { inset: -7px; }
@media (min-width: 48rem) {
  .phases li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; column-gap: 2rem; row-gap: .75rem; }
  .phase-frame { grid-row: 1 / span 2; }
}
/* Desktop: three columns; each segment reaches the next column, a closing tick ends the chain */
@media (min-width: 64rem) {
  .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .phases li { grid-template-columns: none; grid-template-rows: none; row-gap: 1rem; }
  .phase-frame { grid-row: auto; }
  .phases li:not(:last-child)::after { right: -2.5rem; }
  .phases::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(var(--chain) - 6px);
    width: 11px;
    height: 11px;
    margin-right: -5px;
    background: var(--tick);
  }
}
.scrolly.is-active .scrolly-stage { position: relative; height: 100vh; }
.scrolly.is-active .scrolly-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  background: var(--bg-alt);
}

/* ---------- Process (dark): vertical line grown with scaleY ---------- */
.process-grid { display: grid; gap: 2rem; }
.process { position: relative; padding-left: 2.25rem; }
.process-line {
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  left: calc(.725rem - 1px); /* centred on the step markers (1.45rem wide) */
  width: 2px;                /* accent bars are 2px everywhere (eyebrow dash, phase mark, quote note) */
  background: var(--brand-orange); /* decorative: the step numbers carry the information */
  transform-origin: top;
}
.process-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: step; }
.process-step { position: relative; counter-increment: step; }
.process-step::before {
  content: counter(step);
  position: absolute;
  left: -2.25rem;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
}
.process-step p { color: var(--muted); margin-bottom: .5rem; }
.step-time { margin: 0; }
/* On graphite (home 04): laser line and markers, light titles */
.section-dark .process-line { background: var(--laser); }
.section-dark .process-step::before { background: var(--ink); border-color: var(--laser); color: var(--laser); }
.section-dark .process-step h3 { color: var(--white); }
.section-dark .process-step p { color: var(--on-dark-muted); }

/* ---------- Projects: before/after ---------- */
.projects { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2.5rem; }
.project { display: grid; gap: 1.25rem; }
.compare { display: grid; gap: 1rem; }
.compare figure { margin: 0; }
.compare img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.compare figcaption { margin-top: .35rem; font-weight: 700; }
.compare.is-enhanced { position: relative; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.compare.is-enhanced figcaption {
  position: absolute;
  top: .75rem;
  margin: 0;
  padding: .2rem .65rem;
  background: rgb(var(--ink-rgb) / .85);
  color: var(--white);
  border-radius: 999px;
  font-size: .85rem;
}
.compare.is-enhanced .compare-before figcaption { left: .75rem; }
.compare.is-enhanced .compare-after figcaption { right: .75rem; }
.compare.is-enhanced .compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare-range { display: block; width: 100%; margin-top: .75rem; accent-color: var(--accent); min-height: 44px; }

/* ---------- Quote section ---------- */
.quote-grid { display: grid; gap: 2rem; align-items: start; }
/* Client's note on how surfaces are counted, next to the quote form */
.quote-note { border-left: 2px solid var(--accent); padding: .25rem 0 .25rem 1rem; margin: 0 0 1.5rem; }
.checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .65rem; }
/* Regular weight: the orange check carries the emphasis (whole lists in bold read as shouting) */
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--brand-orange);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: .38rem;
  top: .52rem;
  width: .38rem;
  height: .62rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-hint { color: var(--muted); font-size: .95rem; }
.form-card {
  position: relative;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white); /* every card on paper is a white sheet (brand.md §11) */
  box-shadow: var(--shadow);
}
/* Registration marks just outside the corners of the form sheet: the conversion block is "framed" */
.form-card::before {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  --c: linear-gradient(var(--mark) 0 0) no-repeat;
  background: var(--c) top left / 12px 1px, var(--c) top left / 1px 12px, var(--c) top right / 12px 1px, var(--c) top right / 1px 12px,
    var(--c) bottom left / 12px 1px, var(--c) bottom left / 1px 12px, var(--c) bottom right / 12px 1px, var(--c) bottom right / 1px 12px;
}

/* ---------- Form ---------- */
.lead-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lead-form .step { margin-bottom: 1.5rem; }
.lead-form legend { font-weight: 800; font-size: 1.2rem; margin-bottom: 1rem; padding: 0; }
.field { margin-bottom: 1.15rem; }
.field > label { display: block; font-weight: 600; margin-bottom: .35rem; }
.group legend { font-size: 1rem; font-weight: 600; margin-bottom: .35rem; }
.group label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; margin-right: 1rem; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select {
  width: 100%;
  min-height: 50px;
  padding: .65rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--white);
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus-visible,
select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .35); }
input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); }
[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

.consent label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.consent input { flex-shrink: 0; margin-top: .25rem; }

.field-error { color: var(--error); font-size: .95rem; margin: .35rem 0 0; }
.field-help { color: var(--muted); font-size: .9rem; margin: 0 0 .4rem; }
.form-status { font-weight: 700; margin: 0; }
.form-status.is-error { color: var(--error); }
.notice { padding: 1rem; border: 2px solid var(--todo-border); border-radius: var(--radius-sm); }
.cf-turnstile { margin-bottom: 1.25rem; min-height: 65px; }

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Multi-step mode, enabled by form.js only */
.steps { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.steps li { flex: 1; font-size: .85rem; color: var(--muted); }
.steps li.is-done,
.steps li[aria-current="step"] { color: var(--text); }
.steps li[aria-current="step"] { font-weight: 800; }
.is-multistep .step[hidden] { display: none; }
.step-nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

/* Form progress bar (transform only) */
.steps-bar { height: 4px; margin-bottom: .75rem; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.steps-bar span {
  display: block;
  height: 100%;
  background: var(--brand-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

/* ---------- FAQ: native <details>, works without JS ---------- */
.faq { max-width: 52rem; display: grid; gap: .75rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.faq summary {
  position: relative;
  padding: 1.15rem 3.25rem 1.15rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--accent); }
.faq details[open] { border-color: var(--brand-orange); }
.faq details > div { padding: 0 1.25rem 1.25rem; color: var(--muted); }
.faq details > div p:last-child { margin-bottom: 0; }
/* On graphite (home FAQ): --ink-2 panels with --ink-line borders; the open one is outlined in laser */
.section-dark .faq details { background: var(--ink-2); border-color: var(--ink-line); }
.section-dark .faq summary { color: var(--on-dark); }
.section-dark .faq summary::after { color: var(--laser); }
.section-dark .faq summary:hover { color: var(--laser); }
.section-dark .faq details[open] { border-color: var(--laser); }
.section-dark .faq details > div { color: var(--on-dark-muted); }

/* ---------- Inner pages ---------- */
.page-hero { padding-block: 3.5rem; }
.page-hero h1 { color: var(--white); font-size: clamp(2.1rem, 5vw, 3.4rem); }
.page-hero .lead { margin-bottom: 0; }
.page-hero .hero-actions { margin: 2rem 0 0; }
.nav a[aria-current="page"] { color: var(--accent); }

/* About teaser on the home page */
.about-grid { display: grid; gap: 2rem; align-items: center; }
.about-grid img { display: block; width: 100%; max-width: 22rem; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Team */
.people { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.person { position: relative; overflow: hidden; display: grid; gap: 1.25rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.person img { display: block; width: 100%; max-width: 16rem; height: auto; border-radius: var(--radius-sm); }
.person-role { font-weight: 700; color: var(--accent); margin-bottom: .75rem; }

/* Closing call to action band */
.cta-band { text-align: center; }
.cta-band .section-intro { margin-inline: auto; }

/* Long legal texts */
/* Each chapter opens on a section rule: hairline with the orange start mark of the eyebrows (one per chapter) */
.legal h2 {
  position: relative;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h2::before { content: ""; position: absolute; top: -1px; left: 0; width: 1.75rem; height: 2px; background: var(--brand-orange); }
.legal h3 { font-size: 1.05rem; margin-top: 1.5rem; }
/* Text measure: a following h3 needs the same air as a new paragraph group (chi siamo "Strumenti", legal pages) */
.narrow > :is(p, ul) + h3 { margin-top: 2rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: .5rem; }
.toc { margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.toc ol { margin: 0; padding-left: 1.25rem; columns: 2 14rem; }
.toc li { margin-bottom: .35rem; }
/* Company data as a title block: rows ruled by hairlines, like the cartouche of a drawing */
.company-data { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); }
.company-data dt, .company-data dd { padding-block: .5rem; border-top: 1px solid var(--line); }
.company-data dt { font-weight: 700; }
.company-data dd { margin: 0; }
.legal-updated { margin-top: 2.5rem; color: var(--muted); }

/* Thank-you page */
.next-steps { padding-left: 1.25rem; margin: 0 0 1.5rem; }
.next-steps li { margin-bottom: .75rem; }

/* Footer: follow us and partner */
.footer-heading { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
/* Hidden until a social link is restored (avoids an empty grid cell on mobile) */
.footer-follow:not(:has(*)) { display: none; }
.social-links { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.social-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .4rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.social-links a:hover { border-color: var(--accent); color: var(--accent); }

/* Footer links */
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 1rem 0 0; padding: 0; }
/* One link style in the whole footer (service and contact links) */
.footer-links a,
.footer-contacts a,
.footer-origin a { color: var(--on-dark); font-weight: 600; text-decoration-color: rgb(var(--laser-rgb) / .7); }
.footer-links a:is(:hover, :focus-visible),
.footer-contacts a:is(:hover, :focus-visible),
.footer-origin a:is(:hover, :focus-visible) { color: var(--laser); }
.footer-links { padding-top: 1.25rem; border-top: 1px solid var(--ink-line); }

/* ---------- Mobile sticky call to action (hidden by JS when the form is visible) ---------- */
.sticky-cta {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  justify-content: center;
  min-height: 52px;
  align-items: center;
  border-radius: 999px;
  /* Laser orange: stands out on the dark hero and on light sections (graphite text 7.81:1) */
  background: var(--laser);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 30px rgb(var(--shadow-rgb) / .35);
  transition: transform .3s ease, opacity .3s ease;
}
.sticky-cta:hover { color: var(--ink); background: var(--laser-hover); }
.sticky-cta.is-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }

/* ---------- Lenis recommended rules (node_modules/lenis/dist/lenis.css) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Footer ---------- */
/* Graphite with the drawing grid, like the hero; laser line on top (decorative). */
.site-footer {
  position: relative;
  padding-block: 4rem 3.5rem;
  color: var(--on-dark-muted);
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  font-size: .95rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--laser-rgb) / 0), var(--laser) 15%, var(--laser-core) 50%, var(--laser) 85%, rgb(var(--laser-rgb) / 0));
  box-shadow: 0 0 12px 1px rgb(var(--laser-rgb) / .55), 0 0 32px 4px rgb(var(--laser-rgb) / .2);
}
/* Phones: room for the fixed CTA, so it never covers the last footer line */
@media (max-width: 47.99rem) {
  .site-footer:has(~ .sticky-cta) { padding-bottom: 6.5rem; }
}
/* White variant of the vector logo: the grey lettering of the original is unreadable on graphite */
.site-footer img {
  display: block;
  width: 127px;
  height: 60px;
  margin-bottom: 1.75rem;
}
.footer-grid { display: grid; gap: 2rem; }
.footer-claim {
  max-width: 16ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.site-footer strong { color: var(--on-dark); }
.site-footer .footer-heading { color: var(--on-dark-muted); }
.site-footer :focus-visible { outline-color: var(--laser); }

/* ---------- Larger screens ---------- */
@media (min-width: 48rem) {
  .section { padding-block: 6rem; }
  .brand img { width: 127px; height: 60px; }
  .site-header { position: sticky; top: 0; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .benefits { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  /* Four service cards: 2x2 reads better than 3+1 */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .services-more-list { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .process-grid { grid-template-columns: 1fr 1.2fr; grid-template-rows: 1fr auto; gap: 0 4rem; align-items: start; }
  /* 04: the heading stays on top, the CTA drops to the level of the last step, and the scan-room scene
     fills the column between them (.scene-processo, flex: the space is fixed by the layout from the first paint). */
  .process-grid > :first-child { grid-area: 1 / 1; align-self: stretch; display: flex; flex-direction: column; }
  .process { grid-area: 1 / 2 / 3 / 3; }
  .process-grid > .section-cta { grid-area: 2 / 1; align-self: end; margin: 0; }
  .project { grid-template-columns: 1.6fr 1fr; align-items: center; gap: 2.5rem; }
  .compare:not(.is-enhanced) { grid-template-columns: 1fr 1fr; }
  .compare-single:not(.is-enhanced) { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr 1.25fr; gap: 4rem; }
  .form-card { padding: 2.25rem 2rem; }
  .footer-grid { grid-template-columns: 1.25fr 1fr; gap: 4rem; align-items: start; }
  .page-hero { padding-block: 5rem; }
  .about-grid { grid-template-columns: 22rem 1fr; gap: 4rem; }
  .about-grid:not(:has(> img)) { grid-template-columns: 1fr; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .person { grid-template-columns: 11rem 1fr; }
  .person:not(:has(img)) { grid-template-columns: 1fr; }
  .sticky-cta { display: none; }
}

/* Hero side by side from 64rem: below that the text column would leave the building too little room */
@media (min-width: 64rem) {
  /* Hero: one screen tall below the sticky header (~84px), text on the left, building on the right */
  .hero { display: flex; align-items: center; min-height: max(38rem, calc(100svh - 5.25rem)); padding-block: 4rem; }
  /* --frame-left: where the building starts. The text column ends 2rem before it; the shade below is
     at least 92% opaque under the text and fades to 0 just inside the frame. */
  .hero {
    --hero-col: clamp(30rem, 48vw, 38rem);
    --frame-left: max(50%, calc(max(0rem, (100% - var(--wrap)) / 2) + var(--hero-col) + 3.25rem));
  }
  .hero > .wrap { width: 100%; }
  .hero-text { max-width: var(--hero-col); }
  /* Three lines: "Rilievo laser scanner" (21 characters) fits the column at every width */
  .hero h1 { font-size: clamp(2.5rem, 3.85vw, 3.1rem); }
  .hero .lead { font-size: 1.2rem; margin-bottom: 2rem; }
  .hero-stage::after {
    background:
      linear-gradient(90deg, var(--ink) 0, rgb(var(--ink-rgb) / .94) calc(var(--frame-left) - 2rem), rgb(var(--ink-rgb) / 0) calc(var(--frame-left) + 3rem)),
      linear-gradient(0deg, var(--ink) 0, rgb(var(--ink-rgb) / 0) 14%),
      linear-gradient(var(--grid-line) 1px, transparent 1px) -1px -1px / 48px 48px,
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) -1px -1px / 48px 48px;
  }
  /* Second grid column: same top and bottom as the text block (Zee, 2026-10-21), never under it,
     up to the right edge of .wrap. 3.25rem gap = the --frame-left formula above. */
  .hero-text::before { content: none; }
  .hero-grid { grid-template-columns: var(--hero-col) 1fr; column-gap: 3.25rem; align-items: stretch; }
  .hero-text { grid-column: 1; }
  .hero-cta { align-self: start; }
  .hero-frame { grid-column: 2; grid-row: 1 / span 2; height: auto; margin: 0; }
  .hero-scan-toggle { top: auto; bottom: .5rem; right: .5rem; display: inline-flex; gap: .5rem; width: auto; height: auto; min-height: 40px; padding: .35rem .9rem; font-size: .8rem; }
  .hero-scan-toggle::before { flex: none; transform: scale(.8); }
  .hero-switch { top: auto; bottom: .5rem; left: .5rem; }
  /* Phase label in the top-right corner of the frame, dash towards the corner (Zee, 2026-10-16) */
  .hero-scan-hud { left: auto; right: .9rem; flex-direction: row-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .benefit:hover, .button:hover { transform: none; }
  .card:hover::after, .benefit:hover .card-fx::after { transform: translateX(-110%); }
}
.footer-origin { margin: 1rem 0 0; font-size: .9rem; color: var(--on-dark-muted); }

/* ---------- Decorative 3D scenes (js/scene-3d.js): invisible until a scene is live ---------- */
.scene { position: absolute; pointer-events: none; z-index: 0; }
.scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.scene canvas.is-live { opacity: 1; }
.has-scene { position: relative; }
.has-scene > :not(.scene) { position: relative; z-index: 1; }
/* Home §04 "Come lavoriamo" (graphite): the scanned room, "the day of the survey". Never behind text.
   Phones: a band between the intro and the steps, height reserved in CSS (no layout shift).
   Desktop: fills the left column between intro and CTA (flex), at least 16rem.
   Viewfinder corners as in the hero frame; the canvas edges fade (mask on the canvas, not on the corners). */
.scene-processo { position: relative; height: 15rem; margin: -1rem 0 2rem; }
.scene-processo canvas { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.scene-processo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0; /* only around a live scene: no empty viewfinder without WebGL */
  transition: opacity 1.2s ease;
  --c: linear-gradient(rgb(var(--on-dark-muted-rgb) / .5) 0 0) no-repeat;
  background: var(--c) top left / 18px 1px, var(--c) top left / 1px 18px, var(--c) top right / 18px 1px, var(--c) top right / 1px 18px,
    var(--c) bottom left / 18px 1px, var(--c) bottom left / 1px 18px, var(--c) bottom right / 18px 1px, var(--c) bottom right / 1px 18px;
}
.scene-processo:has(canvas.is-live)::before { opacity: 1; }
@media (min-width: 48rem) {
  .scene-processo { flex: 1 1 auto; height: auto; min-height: 16rem; margin: 0 0 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { .scene canvas { transition: none; } }
/* Page headers with a scene (chi siamo, grazie, 404): band under the text on phones, right side on desktop.
   The space is reserved in CSS from the first paint: no layout shift when the scene appears. */
.page-hero.has-scene { padding-bottom: 15rem; }
.scene-page { left: 0; right: 0; bottom: 0; height: 16rem;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
@media (min-width: 48rem) {
  .page-hero.has-scene { padding-bottom: 5rem; min-height: 30rem; display: flex; align-items: center; }
  .page-hero.has-scene > .wrap { width: 100%; }
  .page-hero.has-scene .lead, .page-hero.has-scene h1 { max-width: 34rem; }
  .scene-page { top: 0; height: auto; left: 42%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
}
/* Error page: no scene band on phones, the recovery (phone, "Torna al modulo") must stay above the fold */
@media (max-width: 47.99rem) {
  .page-hero.scene-wide-only { padding-block: 2.25rem; }
  .scene-wide-only .scene-page { display: none; }
  .scene-wide-only + .section { padding-top: 2.25rem; }
}
/* Home §02 after the phases sheet: static 2D drawing "parametric model vs mesh" next to the paragraph on mesh and render.
   Phones: above the paragraph (far from the CTA link). Desktop: to the right of it. Size fixed by the svg
   width/height attributes (aspect ratio known from the first paint: no layout shift). */
.mesh-note { display: grid; gap: 1rem; margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.mesh-figure { max-width: 24rem; }
.mesh-text { max-width: 46rem; }
.mesh-text p { margin: 0; color: var(--muted); }
.mesh-text .section-cta { margin-top: 1.25rem; }
.tech-drawing { display: block; width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tech-drawing .mf-ground { stroke: var(--line-strong); stroke-width: 1; }
.tech-drawing .mf-axis { stroke: var(--line-strong); stroke-width: .8; stroke-dasharray: 3 4; }
.tech-drawing .mf-param { stroke: var(--text); stroke-width: 1.4; }
.tech-drawing .mf-mesh { stroke: var(--line-strong); stroke-width: .7; }
.tech-drawing .mf-ideal { stroke: var(--brand-orange); stroke-width: 1.2; stroke-dasharray: 4 4; }
.tech-drawing .mf-verts { stroke: var(--text); stroke-width: 2.4; }
@media (min-width: 48rem) {
  .mesh-note { grid-template-columns: 1fr minmax(16rem, 22rem); gap: 3rem; align-items: center; margin-top: 4rem; }
  .mesh-text { grid-row: 1; grid-column: 1; }
  .mesh-figure { grid-row: 1; grid-column: 2; }
}
/* Home §03 formats: static diagram "one cloud, three files" before the chips (above them on phones) */
.formats-figure { max-width: 15rem; margin-bottom: 1rem; }
.formats-drawing .fd-cloud { stroke: var(--muted); stroke-width: 2.4; }
.formats-drawing .fd-dots { stroke: var(--muted); stroke-width: 2; }
.formats-drawing .fd-flow { stroke: var(--brand-orange); stroke-width: 1.2; }
.formats-drawing .fd-node { stroke: var(--brand-orange); stroke-width: 4; }
.formats-drawing .fd-sheet { stroke: var(--text); stroke-width: 1.2; }
@media (min-width: 48rem) {
  .formats-row { display: flex; align-items: center; gap: 2rem; }
  .formats-figure { flex: 0 0 15rem; margin: 0; }
}
/* Home §02 on graphite: the mesh drawing and its note */
.section-dark .mesh-note { border-top-color: var(--ink-line); }
.section-dark .mesh-text p { color: var(--on-dark-muted); }
.section-dark .tech-drawing .mf-param,
.section-dark .tech-drawing .mf-verts { stroke: var(--on-dark); }
.section-dark .tech-drawing .mf-ideal { stroke: var(--laser); }
/* Home §02: three render examples under the mesh note */
.render-strip { margin: 2.5rem 0 0; }
.render-strip ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.render-strip img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.render-strip figcaption { margin-top: .75rem; color: var(--on-dark-muted); font-size: .95rem; }
@media (min-width: 48rem) {
  .render-strip ul { grid-template-columns: repeat(3, 1fr); }
}
/* Chips on graphite (component map, brand.md §11) */
.section-dark .chips li { background: var(--ink-2); color: var(--on-dark); border: 1px solid var(--ink-line); }
.section-dark .chips-outline li { background: transparent; }
/* Static image pairs (no slider): same 4:3 frame for 3D view and plan, whole drawing visible on graphite */
.compare:not([data-compare]) img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--ink-2); }
/* Images that open large (js: <dialog class="lightbox">; without JS the link opens the file) */
.zoom { position: relative; display: block; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; }
.zoom::after {
  content: "Ingrandisci";
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: rgb(var(--ink-rgb) / .8);
  color: var(--white);
  font-size: .8rem;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }
.zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.zoom .cloud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lightbox { max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 1rem; border: 0; background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: .75rem; }
.lightbox::backdrop { background: rgb(var(--ink-rgb) / .92); }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close {
  justify-self: end;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--white);
  font: 600 .95rem var(--font-display);
  cursor: pointer;
}
.lightbox-close:hover, .lightbox-close:focus-visible { border-color: var(--laser); color: var(--laser); }
.lightbox-caption { max-width: 60rem; margin: 0; color: var(--on-dark-muted); text-align: center; }
.project-tags { margin: .25rem 0 .9rem; }
.project-tags li { font-size: .8rem; }
/* 05 showcase: three small views of the same corridor (source panels are 318 px wide: never shown much larger) */
.showcase { margin: 2rem 0 0; max-width: 64rem; }
.showcase-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 22rem; margin-inline: auto; }
.showcase-steps img { display: block; width: 100%; height: auto; }
.showcase-label { margin: .5rem 0 0; font: 600 .8rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.showcase figcaption { margin-top: 1rem; color: var(--muted); font-size: .95rem; }
@media (min-width: 48rem) {
  .showcase-steps { grid-template-columns: repeat(3, 1fr); max-width: none; }
}
/* A single view keeps its own proportions (no 4:3 frame) */
.compare.compare-single img { aspect-ratio: auto; }