/* ============================================================
   madeby404 — STYLES
   Edit visual tokens in :root below. Content lives in
   js/config.js, structure in index.html.
   ============================================================ */

:root {
  /* palette — earthy, no standing accent (see notes) */
  --off-white: #F2EFE6;
  --off-white-2: #EBE7DB;
  --ink: #0A0A0A;
  --ink-60: rgba(10, 10, 10, 0.60);
  --ink-40: rgba(10, 10, 10, 0.40);
  --ink-20: rgba(10, 10, 10, 0.20);
  --hairline: rgba(10, 10, 10, 0.08);
  --hairline-strong: rgba(10, 10, 10, 0.15);
  --hairline-orange: rgba(201, 59, 16, 0.16);  /* hero grid guides */

  /* OPTIONAL ACCENT — currently unused. To activate, set a value
     and apply --accent where wanted. Candidates under discussion:
     indigo #2E3A59 · rust #B33A1E · mud brown #5C4A38 */
  --accent: none;

  /* brand accent — applied sparingly (~10%) */
  --orange: #C93B10;
  --blue:   #2A4CC4;   /* paired brand blue (fluid gradient, pixel edge) */

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  --col-gap: 24px;
  --side-pad: 32px;
  --section-pad: 80px;

  /* 1.25 modular scale (Major Third), base = 1rem = 16px */
  --fs-xs:   1rem;   /* ×1.25^-2 ≈ 10.2px */
  --fs-sm:   0.95rem;    /* ×1.25^-1 = 12.8px */
  --fs-base: 1.2rem;      /* ×1.25^0  = 16px   */
  --fs-md:   1.4rem;   /* ×1.25^1  = 20px   */
  --fs-lg:   1.563rem;  /* ×1.25^2  ≈ 25px   */
  --fs-xl:   1.953rem;  /* ×1.25^3  ≈ 31px   */
  --fs-2xl:  3.052rem;  /* ×1.25^4  ≈ 39px   */
  --fs-3xl:  3.2rem;  /* ×1.25^5  ≈ 49px   */
  --fs-4xl:  3.415rem;  /* ×1.25^6  ≈ 61px   */
  --fs-5xl:  4rem;  /* ×1.25^7  ≈ 76px   */
  --fs-6xl:  5rem;   /* ×1.25^8  ≈ 95px   */
}

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

/* Text selection — brand blue */
::selection      { background: var(--orange); color: #fff; }
::-moz-selection { background: var(--orange); color: #fff; }

html { scroll-behavior: smooth; }

/* Lenis smooth scroll (js/smoothscroll.js) — lets JS own the wheel, and
   disables native smooth-behavior so the two don't fight. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ==================== HERO (FIXED) ==================== */
.hero {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background: var(--off-white);
  z-index: 0;
  overflow: hidden;
}

.hero-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 0 var(--side-pad);
  pointer-events: none;
  z-index: 1;
}
.hero-grid > div { border-left: 1px solid var(--hairline-orange); height: 100%; }
.hero-grid > div:last-child { border-right: 1px solid var(--hairline-orange); }

/* ── Colata wordmark — 70vh centrepiece ──────────────────── */
.wordmark-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1400px);
  height: 70vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
/* The wordmark reacts to touch-and-hold — stop the OS turning that hold into
   a text/image selection or a save-image callout on mobile. */
.wordmark-center,
#colata,
#colata canvas,
#wordmark-fallback {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
#colata {
  position: relative;
  width: 100%;
  /* Aspect ratio matches SVG viewBox: 378.6 × 66 ≈ 5.73:1 */
  aspect-ratio: 378.6 / 66;
  min-height: 48px;
  flex-shrink: 0;
}
#colata canvas { display: block; position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#wordmark-fallback { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: opacity 300ms; }

/* Interaction hint — Geist Mono, recessive */
.colata-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-top: 20px;
  transition: opacity 300ms;
  user-select: none;
  pointer-events: none;
}
.colata-hint--hidden { opacity: 0; }

/* Mobile tooltip look — a small pill above the fold, gently bobbing to
   invite a press. Auto-dismisses after a couple of seconds (see main.js). */
.colata-hint--tooltip {
  position: relative;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--off-white);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  animation: colata-tip-bob 1.8s ease-in-out infinite;
}
.colata-hint--tooltip::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 8px; height: 8px;
  background: var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes colata-tip-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Hero theme switch (driven by JS scroll observer) */
.hero { transition: background 500ms ease; }
.hero.theme-dark { background: var(--ink); }
.hero.theme-dark .colata-hint { color: rgba(242,239,230,0.4); }

/* Hero content layer — sits at edges around the centred wordmark */
.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: var(--side-pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none; /* pass events through to the wordmark */
}
.hero-content a, .hero-content button { pointer-events: auto; }

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 28px;
}

.meta-block {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.meta-block .meta-label { color: var(--ink-40); margin-bottom: 4px; }

.cta-top {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 10px 16px;
  transition: background 180ms, color 180ms;
  white-space: nowrap;
}
.cta-top:hover { background: var(--ink); color: var(--off-white); }

.spec-line { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; text-align: right; line-height: 1.7; color: rgba(242,239,230,0.6); }
.spec-line .spec-label { color: rgba(242,239,230,0.4); }

/* ==================== SCROLL CONTENT ==================== */
.scroll-content {
  position: relative;
  z-index: 10;
  margin-top: 100vh;
  /* No background here — gallery section is transparent, hero shows through.
     Individual sections below carry their own background. */
}
section { padding: var(--section-pad) var(--side-pad); border-bottom: 1px solid var(--ink); background: var(--off-white); }

/* Floating gallery — WebGL flying posters */
.section-carousel {
  position: relative;
  height: 200vh;   /* Extra scroll space so sticky canvas stays in view */
  padding: 0;
  background: transparent;
  border-top: none;
  border-bottom: none;
}
.posters-container {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
}
.posters-container:active {
  cursor: grabbing;
}
.posters-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.posters-skip-btn {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--orange);
  color: #fff;
  border: 1px solid var(--orange);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease, background 180ms, color 180ms, border-color 180ms;
  z-index: 20;
  white-space: nowrap;
}
.posters-skip-btn--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Filled orange at rest; turns white on press / click */
.posters-skip-btn:hover { background: #e0491c; }
.posters-skip-btn:active,
.posters-skip-btn--clicked {
  background: #fff;
  color: var(--orange);
  border-color: #fff;
}

.section-eyebrow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.section-eyebrow .label, .section-eyebrow .index {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
}
.section-eyebrow .label { color: var(--ink); }
.section-eyebrow .index { color: var(--ink-40); }

/* ==================== PROCESS (sticky stack) ==================== */
.section-process {
  padding: var(--section-pad) var(--side-pad) 0;
  min-height: 100vh;
  /* overflow: visible is required for position: sticky on children */
}
.section-process .section-eyebrow {
  max-width: 80vh;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 24px;
  padding: 20px 0;
}

.scroll-stack-wrapper {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
/* Trailing spacer — gives the LAST card room to reach its sticky slot and
   dwell (stack up + hold) just like the others, instead of releasing early. */
.scroll-stack-end { height: 60vh; }

/* Each card sticks at top: i*52px (set via JS) as the user scrolls */
.process-card {
  position: sticky;
  /* top and z-index set per-card by JS */
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -6px 48px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.process-card-tab {
  height: 52px;
  min-height: 52px;
  background: var(--orange);
  color: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--side-pad);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.process-card-step { opacity: 0.6; }

.process-card-body {
  flex: 1;
  background: var(--off-white-2);   /* elevated surface, distinct from page bg */
  padding: 64px var(--side-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-card-subtitle {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-40); margin-bottom: 24px;
}
.process-card-title {
  font-family: var(--font-sans); font-size: var(--fs-2xl); font-weight: 500;
  line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px;
}
.process-card-desc {
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65;
  color: var(--ink-60); max-width: 640px;
}

.process-link {
  display: block;
  max-width: 880px;
  margin: var(--section-pad) auto;
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  width: fit-content;
}
.process-link:hover { color: var(--ink-60); border-color: var(--ink-60); }

/* ==================== FINAL CTA ==================== */
.final-cta { background: var(--ink); color: var(--off-white); padding: 140px var(--side-pad); border-bottom: none; position: relative; overflow: hidden; }
.final-cta-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); align-items: end; }
.final-cta h2 {
  grid-column: 1 / 9;
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-3xl), 7vw, var(--fs-6xl));
  font-weight: 500; line-height: 0.95; letter-spacing: -0.035em;
}
.final-cta-meta {
  grid-column: 9 / 13; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(242, 239, 230, 0.6); line-height: 1.7;
}
.final-cta-button {
  display: inline-block; margin-top: 40px;
  font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--off-white); text-decoration: none; border: 1px solid var(--off-white); padding: 18px 28px;
  transition: background 180ms, color 180ms; grid-column: 1 / 13; width: fit-content;
}
.final-cta-button:hover { background: var(--off-white); color: var(--ink); }

/* ==================== FOOTER ==================== */
footer {
  position: relative;
  background: var(--off-white); color: var(--ink);
  padding: 60px var(--side-pad) 40px;
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em;
  border-top: 1px solid var(--ink);
}
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); margin-bottom: 40px; }
.footer-col .footer-label { color: var(--ink-40); margin-bottom: 12px; }
.footer-col a { display: block; color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.footer-col a:hover { color: var(--ink-60); }
.footer-legal { padding-top: 24px; border-top: 1px solid var(--hairline-strong); display: flex; justify-content: space-between; color: var(--ink-60); }
.footer-legal a { color: var(--ink-60); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); }
/* P.IVA — deliberately tiny, sits under the legal line */
.footer-piva { display: inline-block; margin-left: 8px; font-size: 0.58rem; letter-spacing: 0.04em; color: var(--ink-40); vertical-align: middle; }

/* ==================== MOBILE ==================== */
@media (max-width: 768px) {
  :root { --side-pad: 20px; --section-pad: 60px; }
  .hero { height: 100svh; }
  .hero-grid { display: none; }
  /* Wordmark: tighter container so logo isn't lost in empty space */
  .wordmark-center { width: 92vw; height: 18vh; }
  #colata { min-height: 48px; }
  /* Gallery: allow vertical scroll to pass through (no JS touch-drag on mobile) */
  .posters-container { touch-action: pan-y; }
  .hero-top { flex-direction: column; gap: 16px; }
  .process-card-body { padding: 40px var(--side-pad); }
  .process-card-title { font-size: var(--fs-2xl); }
  .process-link { margin-left: var(--side-pad); }
  .final-cta { padding: 80px var(--side-pad); min-height: auto; }
  .final-cta h2 { grid-column: 1 / 13; }
  .final-cta-meta { grid-column: 1 / 13; text-align: left; margin-top: 24px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-legal { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-frame img { transition: none; }
  html { scroll-behavior: auto; }
}

/* ==================== NOISE OVERLAY ==================== */
.noise-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9990;
  mix-blend-mode: overlay;
  opacity: 0.6;
}

/* ==================== TARGET CURSOR ==================== */
.tc-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}
.tc-dot {
  position: absolute;
  top: 0; left: 0;
  width: 5px; height: 5px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.tc-corner {
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border: 2.5px solid #fff;
  will-change: transform;
  transition: border-color 0.15s;
}
.tc-tl { border-right: none; border-bottom: none; }
.tc-tr { border-left: none;  border-bottom: none; }
.tc-br { border-left: none;  border-top: none;    }
.tc-bl { border-right: none; border-top: none;    }
.tc-cursor.tc-click .tc-dot { transform: translate(-50%, -50%) scale(0.6); }

/* ==================== PRISM BACKGROUND (final CTA) ==================== */
.prism-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Dark veil over prism — multiply-style dimming via opacity overlay */
.prism-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(3, 3, 5, 0.50);
  pointer-events: none;
}
.final-cta-grid { position: relative; z-index: 2; }

/* ==================== STICKER PEEL (footer logo) ==================== */
.footer-sticker-wrap {
  padding-top: 40px;
  border-top: 1px solid var(--hairline-strong);
  display: flex;
  justify-content: center;
  overflow: visible;
}
.sticker {
  position: relative;
  display: inline-block;
  width: 240px;
  transform: rotate(-4deg);
  transform-origin: center bottom;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  /* Stacked drop-shadows: white die-cut edge + page shadow */
  filter:
    drop-shadow(0 0 1px #FAFAF8)
    drop-shadow(0 0 3px #FAFAF8)
    drop-shadow(0 5px 16px rgba(0,0,0,0.18));
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter   0.4s ease;
}
.sticker:hover {
  transform: rotate(-4deg) scale(1.05);
  filter:
    drop-shadow(0 0 1px #FAFAF8)
    drop-shadow(0 0 3px #FAFAF8)
    drop-shadow(0 10px 26px rgba(0,0,0,0.26));
}
.sticker--drag {
  cursor: grabbing !important;
  transform: rotate(-4deg) scale(1.08) !important;
  filter:
    drop-shadow(0 0 1px #FAFAF8)
    drop-shadow(0 0 3px #FAFAF8)
    drop-shadow(0 18px 38px rgba(0,0,0,0.34)) !important;
}
/* Die-cut: white paper backing behind logo, clipped to peel polygon */
.sticker-front {
  display: block;
  background: #FAFAF8;
  padding: 8px 12px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 65%, 70% 100%, 0% 100%);
  transition: clip-path 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  user-select: none;
}
.sticker-front img {
  display: block;
  width: 100%;
  -webkit-user-drag: none;
  pointer-events: none;
}
.sticker:hover .sticker-front {
  clip-path: polygon(0% 0%, 100% 0%, 100% 46%, 48% 100%, 0% 100%);
}
.sticker-flap {
  position: absolute;
  right: 0; bottom: 0;
  width: 56%; height: 60%;
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
  background: linear-gradient(140deg, #e8e4db 0%, #ccc8bf 60%, #bab5ac 100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: inset -4px 4px 12px rgba(0,0,0,0.12), -6px 6px 16px rgba(0,0,0,0.14);
  pointer-events: none;
}
.sticker:hover .sticker-flap { opacity: 1; }

@media (max-width: 768px) {
  .tc-cursor { display: none; }
  .sticker { width: 180px; }
}

/* ==================== INNER PAGES ==================== */

/* ── Global nav — fixed, all pages ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--side-pad);
  height: 56px;
  background: var(--off-white);
  border-bottom: 1px solid var(--hairline-strong);
  transition: background 0.3s, border-color 0.3s, transform 0.35s ease;
}
/* Hidden state — nav slides up out of view (mobile scroll-down) */
.site-header.header-hidden { transform: translateY(-100%); }
.sh-logo {
  display: flex;
  align-items: center;
  height: 18px;
  flex-shrink: 0;
  text-decoration: none;
}
.sh-logo img {
  height: 100%;
  width: auto;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* Inner pages: logo always visible; main page: fades in on scroll */
.sh-logo--visible img,
.site-header.logo-visible .sh-logo img { opacity: 1; }
.sh-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.sh-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-60);
  text-decoration: none;
  transition: color 0.15s;
}
.sh-nav a:hover { color: var(--ink); }
.sh-cta {
  color: var(--ink) !important;
  border: 1px solid var(--hairline-strong);
  padding: 8px 14px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sh-cta:hover {
  background: var(--ink);
  color: var(--off-white) !important;
  border-color: var(--ink);
}
.sh-theme {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-40);
  padding: 6px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}
.sh-theme:hover { color: var(--ink); }

/* Hero-content is replaced by site-header */
.hero-content { display: none; }

/* Dark hero strip */
.pg-hero {
  background: var(--ink);
  color: var(--off-white);
  padding: 96px var(--side-pad) 48px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pg-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(242,239,230,0.45);
  margin-bottom: 28px;
}
.pg-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-2xl), 6vw, var(--fs-5xl));
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.pg-hero-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: rgba(242,239,230,0.6);
  margin-top: 28px;
  max-width: 46ch;
  line-height: 1.55;
}

/* Generic content section */
.pg-section {
  padding: var(--section-pad) var(--side-pad);
  border-bottom: 1px solid var(--ink);
  background: var(--off-white);
}
.pg-section-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px var(--col-gap);
  align-items: start;
}
.pg-section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  padding-top: 4px;
  position: sticky;
  top: 64px; /* clears the site-header */
}

/* ── Form ── */
.pg-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.form-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-40);
}
.form-input,
.form-textarea,
.form-select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-20);
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  outline: none;
  width: 100%;
  border-radius: 0;
  transition: border-color 0.18s;
  -webkit-appearance: none;
  appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-40); }
.form-input:focus,
.form-textarea:focus,
.form-select:focus { border-bottom-color: var(--orange); }
.form-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.form-select { cursor: pointer; }
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--off-white);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 18px 32px;
  cursor: pointer;
  width: fit-content;
  transition: background 0.18s, color 0.18s;
}
.form-submit:hover { background: var(--orange); border-color: var(--orange); }
.form-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
}

/* ── Come-lavoriamo steps ── */
.step-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0 var(--col-gap);
  padding: 72px var(--side-pad);
  border-bottom: 1px solid var(--ink);
  background: var(--off-white);
  align-items: start;
}
.step-row:last-of-type { border-bottom: none; }
.step-meta {
  padding-top: 6px;
  position: sticky;
  top: 76px;
}
.step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-40);
  margin-bottom: 12px;
}
.step-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--orange);
  color: var(--off-white);
  padding: 4px 10px;
}
.step-title {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
.step-desc {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink-60);
  max-width: 58ch;
}
.step-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 40px;
  margin-top: 36px;
}
.step-detail {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-60);
  padding-left: 10px;
  border-left: 2px solid var(--orange);
}

/* ── Contacts ── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px var(--col-gap);
  margin-top: 8px;
}
.contact-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-40);
  margin-bottom: 16px;
}
.contact-value {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
}
.contact-value a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  transition: color 0.15s, border-color 0.15s;
}
.contact-value a:hover { color: var(--orange); border-color: var(--orange); }
.contact-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-40);
  margin-top: 10px;
}

/* ── Inner page CTA block ── */
.pg-cta {
  background: var(--ink);
  color: var(--off-white);
  padding: 100px var(--side-pad);
  border-bottom: none;
}
.pg-cta-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl));
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 40px;
  max-width: 18ch;
}
.pg-cta-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--off-white);
  text-decoration: none;
  border: 1px solid rgba(242,239,230,0.5);
  padding: 18px 28px;
  transition: background 0.18s, color 0.18s;
}
.pg-cta-link:hover { background: var(--off-white); color: var(--ink); }

/* ── Static inner footer (reuses main footer classes) ── */
/* No extra CSS needed — .footer-grid, .footer-col etc. already exist */

/* ==================== CATEGORIES (Evidence Board) ==================== */
.section-categories {
  padding: 0;
  background: var(--ink);
  color: var(--off-white);
  border-top: 1px solid rgba(242,239,230,0.08);
  border-bottom: 1px solid rgba(242,239,230,0.08);
  min-height: 100vh;
}

/* Toolbar */
.cat-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px var(--side-pad);
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(242,239,230,0.08);
}
.cat-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(242,239,230,0.35);
  background: transparent;
  border: 1px solid rgba(242,239,230,0.12);
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cat-btn + .cat-btn { border-left: none; }
.cat-btn:hover,
.cat-btn--active {
  color: var(--off-white);
  border-color: rgba(242,239,230,0.4);
  background: rgba(242,239,230,0.06);
}
.cat-btn-icon { font-size: 11px; line-height: 1; }

/* Drag/scroll hint arrows — mobile slider only (hidden by default) */
.cat-arrows { display: none; margin-left: auto; gap: 8px; }
.cat-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  font-size: 15px;
  line-height: 1;
  color: var(--off-white);
  background: rgba(242,239,230,0.06);
  border: 1px solid rgba(242,239,230,0.22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.cat-arrow:active { background: var(--orange); border-color: var(--orange); }

/* Container */
.cat-container { display: block; }

/* ── Slider mode ── */
.cat--slider {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  height: calc(80vh);
  min-height: 380px;
}
.cat--slider::-webkit-scrollbar { display: none; }

.cat-card {
  position: relative;
  flex: 0 0 clamp(240px, 22vw, 340px);
  height: 100%;
  border-right: 1px solid rgba(242,239,230,0.05);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
/* Left accent bar — scales in on hover */
.cat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
}
.cat-card--on::before { transform: scaleY(1); }

.cat-card-bg {
  --lb: 14px;                                   /* load blur — cleared on .is-loaded */
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(var(--lb)) brightness(0.18) grayscale(0.3);
  transition: filter 0.6s ease, transform 0.6s ease;
}
.cat-card--on .cat-card-bg {
  filter: blur(var(--lb)) brightness(1) grayscale(0);
  transform: scale(1.04);
}
.cat-card-bg.is-loaded, .cat-row-bg.is-loaded { --lb: 0px; }
.cat-card-veil {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,0.94) 0%,
    rgba(10,10,10,0.3) 55%,
    transparent 100%
  );
  z-index: 1;
}
.cat-card-num {
  position: absolute;
  top: 28px; left: 22px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
}
.cat-card-bottom {
  position: absolute;
  bottom: 30px; left: 22px; right: 22px;
  z-index: 3;
}
.cat-card-title {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-lg), 1.8vw, var(--fs-xl));
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--off-white);
  margin-bottom: 6px;
}
.cat-card-cta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(242,239,230,0);
  transition: color 0.35s;
}
.cat-card--on .cat-card-cta { color: rgba(242,239,230,0.55); }

/* Vertical type tag on right side */
.cat-card-vtag {
  position: absolute;
  right: 20px; bottom: 120px;
  z-index: 3;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(242,239,230,0.15);
  transition: color 0.35s;
}
.cat-card--on .cat-card-vtag { color: rgba(242,239,230,0.45); }

/* Mouse-following crosshair */
.cat-card-cross {
  position: absolute;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 4;
  top: 0; left: 0;
}
.cat-card--on .cat-card-cross { opacity: 1; }
.cat-card-cross::before,
.cat-card-cross::after {
  content: '';
  position: absolute;
  background: rgba(242,239,230,0.7);
}
.cat-card-cross::before {
  top: 50%; left: 0;
  width: 100%; height: 1px;
  transform: translateY(-50%);
}
.cat-card-cross::after {
  top: 0; left: 50%;
  width: 1px; height: 100%;
  transform: translateX(-50%);
}

/* ── List mode ── */
.cat--list { display: flex; flex-direction: column; }

.cat-row {
  position: relative;
  border-bottom: 1px solid rgba(242,239,230,0.07);
  overflow: hidden;
  cursor: pointer;
}
.cat-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
}
.cat-row:hover::before { transform: scaleY(1); }

.cat-row-bg {
  --lb: 14px;                                   /* load blur — cleared on .is-loaded */
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(var(--lb)) brightness(0.28);
  transition: opacity 0.45s ease, filter 0.6s ease;
}
.cat-row:hover .cat-row-bg { opacity: 1; }

.cat-row-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px var(--side-pad);
  transition: padding 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
.cat-row:hover .cat-row-inner { padding-top: 30px; padding-bottom: 30px; }

.cat-row-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  flex-shrink: 0;
  width: 52px;
}
.cat-row-name {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-lg), 2.4vw, var(--fs-2xl));
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  flex: 1;
  transition: letter-spacing 0.3s;
}
.cat-row:hover .cat-row-name { letter-spacing: -0.01em; }

.cat-row-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.cat-row-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(242,239,230,0.25);
  transition: color 0.25s;
}
.cat-row:hover .cat-row-tag { color: rgba(242,239,230,0.65); }
.cat-row-arrow {
  font-size: var(--fs-md);
  color: var(--orange);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cat-row:hover .cat-row-arrow { opacity: 1; transform: translateX(0); }

@media (max-width: 768px) {
  /* Breathing room top & bottom so the toolbar clears the nav and the
     next section peeks in — the slider/list switch is no longer buried. */
  .section-categories { min-height: auto; padding: 24px 0 32px; }

  /* Toolbar sits just under the fixed nav (56px) instead of behind it. */
  .cat-toolbar { top: 56px; padding: 12px var(--side-pad); }

  /* Arrows appear in slider mode to signal "drag / scroll". */
  .cat-arrows.cat-arrows--on { display: flex; }

  /* Shorter cards; show ~1¾ cards so the next one clearly peeks. */
  .cat--slider { height: 58vh; min-height: 300px; }
  .cat-card { flex: 0 0 56vw; }
  .cat-card-title { font-size: var(--fs-lg); }
  .cat-row-name { font-size: var(--fs-lg); }
  .cat-row-tag { display: none; }

  /* No hover on touch → show the photos in good light, lighter veil.
     The bottom veil stays only strong enough to keep the title legible. */
  .cat-card-bg { filter: blur(var(--lb)) brightness(0.95) grayscale(0); }
  .cat-card-veil {
    background: linear-gradient(
      to top,
      rgba(10,10,10,0.85) 0%,
      rgba(10,10,10,0.35) 42%,
      rgba(10,10,10,0.05) 100%
    );
  }
  .cat-card-cta { color: rgba(242,239,230,0.55); } /* CTA always readable */
  .cat-card-vtag { color: rgba(242,239,230,0.4); }
  .cat-card-cross { display: none; }               /* no + cursor on mobile */

  /* List rows: reveal the photo by default with a left-side scrim
     so the label stays readable. */
  .cat-row-bg { opacity: 1; filter: blur(var(--lb)) brightness(0.6) grayscale(0); }
  .cat-row-inner {
    background: linear-gradient(
      to right,
      rgba(10,10,10,0.82) 0%,
      rgba(10,10,10,0.45) 60%,
      rgba(10,10,10,0.15) 100%
    );
  }
}

/* ── Inner page mobile ── */
@media (max-width: 768px) {
  .pg-hero { padding: 84px var(--side-pad) 40px; min-height: 40vh; }
  .pg-section-grid { grid-template-columns: 1fr; }
  .pg-section-label { position: static; }
  .form-row { grid-template-columns: 1fr; }
  .step-row { grid-template-columns: 1fr; gap: 0; }
  .step-meta { position: static; padding-bottom: 20px; }
  .step-details { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .sh-nav a:not(.sh-cta) { display: none; }
}

/* ==================== MOBILE NAV (hamburger + icon CTA) ==================== */
/* Hamburger button — injected by site.js, shown on mobile only */
.sh-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: 12px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.sh-burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.sh-burger--open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sh-burger--open span:nth-child(2) { opacity: 0; }
.sh-burger--open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-screen menu overlay */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 88px var(--side-pad) 40px;
  background: var(--off-white);
  opacity: 0;
  transition: opacity 0.28s ease;
}
/* [hidden] must win over the display:flex above, or a closed menu would
   sit invisibly on top of the page and swallow taps. */
.nav-menu[hidden] { display: none; }
.nav-menu--open { opacity: 1; }
.nav-menu-links { display: flex; flex-direction: column; gap: 4px; }
.nav-menu-links a {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.nav-menu-links a[aria-current="page"] { color: var(--orange); }
.nav-menu-theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding: 16px 0;
  background: none;
  border: none;
  border-top: 1px solid var(--hairline-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-60);
  cursor: pointer;
}
.nav-menu-theme-val { color: var(--ink); }

@media (max-width: 768px) {
  .sh-burger { display: flex; }
  .sh-theme  { display: none; }   /* theme toggle lives inside the menu */
  .sh-nav    { display: none; }   /* Preventivo lives inside the menu — logo + ☰ only */
}
@media (min-width: 769px) {
  .nav-menu { display: none; }
}

/* ==================== COME-LAVORIAMO — FLUID GRADIENT HERO ==================== */
.pg-hero--fluid { position: relative; overflow: hidden; background: #0a0a0a; }
.pg-hero--fluid > * { position: relative; z-index: 2; }
.pg-hero--fluid::before {
  content: '';
  position: absolute;
  inset: -35%;
  z-index: 0;
  background:
    radial-gradient(38% 38% at 22% 28%, rgba(201, 59, 16, 0.75), transparent 70%),
    radial-gradient(42% 42% at 78% 22%, rgba(42, 76, 196, 0.72), transparent 70%),
    radial-gradient(46% 46% at 62% 82%, rgba(201, 59, 16, 0.45), transparent 70%),
    radial-gradient(44% 44% at 26% 78%, rgba(42, 76, 196, 0.55), transparent 72%);
  filter: blur(64px);
  animation: pg-fluid 20s ease-in-out infinite alternate;
}
/* Dark veil keeps the light text fully legible over the colour */
.pg-hero--fluid::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 8, 10, 0.5);
}
@keyframes pg-fluid {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0)  scale(1.16) rotate(7deg); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.1)  rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-hero--fluid::before { animation: none; }
}

/* ---- Flowing warped-gradient hero (WebGL, js/herobg.js) ---- */
.pg-hero--flow { position: relative; overflow: hidden; background: #04050a; }
.pg-hero--flow > *:not(.pg-hero-bg) { position: relative; z-index: 2; }
.pg-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pg-hero-bg canvas { display: block; width: 100%; height: 100%; }
/* Dark veil weighted to the lower-left, where the copy sits, so the flow
   reads on the right while the text keeps full contrast. */
.pg-hero--flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,5,10,0.85) 0%, rgba(4,5,10,0.35) 48%, rgba(4,5,10,0.05) 100%),
    linear-gradient(0deg,  rgba(4,5,10,0.75) 0%, rgba(4,5,10,0.0) 50%);
}
/* Orange variant — warm near-black ground + veil */
.pg-hero--flow-orange { background: #0a0603; }
.pg-hero--flow-orange::after {
  background:
    linear-gradient(90deg, rgba(10,6,3,0.85) 0%, rgba(10,6,3,0.35) 48%, rgba(10,6,3,0.05) 100%),
    linear-gradient(0deg,  rgba(10,6,3,0.78) 0%, rgba(10,6,3,0.0) 50%);
}

/* ==================== PREVENTIVO — HERO + STEP FORM ==================== */
/* Hero splits 4 columns: 1/4 intro, 3/4 step form. */
.pg-hero--form {
  display: block;
  min-height: 80vh;
  padding: 112px var(--side-pad) 72px;
}
.pv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px var(--col-gap);
  align-items: start;
}
.pv-intro { grid-column: span 2; }
.pv-formcol { grid-column: span 2; }
.pv-intro .pg-hero-title { font-size: clamp(1.8rem, 2.6vw, 2.6rem); }
.pv-intro .pg-hero-sub { font-size: var(--fs-base); margin-top: 20px; }

/* --- Step form card (always dark: it sits on the dark flow hero) --- */
.stepform {
  --sf-surface: #1B1611;
  --sf-ink: #F2EFE6;
  --sf-ink60: rgba(242,239,230,0.62);
  --sf-ink40: rgba(242,239,230,0.40);
  --sf-line:  rgba(242,239,230,0.18);
  --sf-line08: rgba(242,239,230,0.10);
  --sf-soft:  rgba(201,59,16,0.22);
  color-scheme: dark;
  position: relative;
  background: var(--sf-surface);
  color: var(--sf-ink);
  border: 1px solid var(--sf-line08);
  border-radius: 12px;
  box-shadow: 0 34px 80px -30px rgba(0,0,0,0.7);
  overflow: hidden;
}
.sf-progress { height: 3px; width: 100%; background: var(--sf-line08); }
.sf-progress-fill { height: 100%; width: 0; background: var(--orange);
  transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }
.sf-body { padding: 44px 44px 38px; }

.sf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--sf-ink40); }
.sf-head .sf-num { color: var(--orange); }
.sf-head .sf-rule { flex: 1; height: 1px; background: var(--sf-line08); }

.sf-q { font-size: clamp(var(--fs-2xl), 6vw, var(--fs-3xl)); font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; text-wrap: balance; margin-bottom: 10px; }
.sf-help { color: var(--sf-ink60); font-size: 1.2rem; margin-bottom: 24px; max-width: 52ch; }

.sf-field { margin-bottom: 8px; }
.sf-field > label { display: block; font-family: var(--font-mono); font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-ink40); margin-bottom: 8px; }
.sf-inp {
  width: 100%; background: transparent; border: none; border-bottom: 1.5px solid var(--sf-line);
  padding: 10px 2px; font-family: var(--font-sans); font-size: 1.2rem; color: var(--sf-ink);
  outline: none; border-radius: 0; transition: border-color 0.18s;
}
.sf-inp::placeholder { color: var(--sf-ink40); }
.sf-inp:focus { border-color: var(--orange); }
.sf-textarea { resize: vertical; min-height: 120px; line-height: 1.5; font-size: 1.05rem;
  border: 1.5px solid var(--sf-line); border-radius: 8px; padding: 14px; }
.sf-inp[type=number] { -moz-appearance: textfield; appearance: textfield; }
.sf-inp[type=number]::-webkit-outer-spin-button,
.sf-inp[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.sf-err { display: none; margin-top: 8px; color: var(--orange);
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.sf-invalid .sf-err { display: block; }
.sf-err-cats { display: none; }

/* quantity */
.sf-qty { display: flex; align-items: baseline; gap: 10px; border-bottom: 1.5px solid var(--sf-line); }
.sf-qty:focus-within { border-color: var(--orange); }
.sf-qty .sf-inp { border-bottom: none; font-size: 1.7rem; padding-bottom: 8px; }
.sf-suffix { font-family: var(--font-mono); font-size: 0.9rem; color: var(--sf-ink40); }

/* budget */
.sf-budget { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sf-currency { width: auto; flex: 0 0 auto; border: 1.5px solid var(--sf-line);
  border-radius: 8px; padding: 10px 12px; font-size: 1rem; cursor: pointer;
  background: var(--sf-surface); color: var(--sf-ink); }
.sf-num { flex: 1 1 90px; min-width: 80px; }
.sf-dash { color: var(--sf-ink40); }

/* choice / category chips */
.sf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 6px; }
.sf-cat {
  position: relative; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 14px 15px; background: var(--sf-surface); border: 1.5px solid var(--sf-line);
  border-radius: 9px; font: inherit; font-size: 0.98rem; color: var(--sf-ink); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}
.sf-cat:hover { border-color: var(--sf-ink40); }
.sf-cat:active { transform: scale(0.99); }
.sf-cat--on { border-color: var(--orange); background: var(--sf-soft); }
.sf-key { font-family: var(--font-mono); font-size: 0.7rem; color: var(--sf-ink40);
  border: 1px solid var(--sf-line); border-radius: 4px; padding: 2px 7px; }
.sf-cat--on .sf-key { color: var(--orange); border-color: var(--orange); }

/* Fai da te — highlighted speciality with a glowing gradient outline */
.sf-cat--diy {
  border-color: transparent;
  background:
    linear-gradient(var(--sf-surface), var(--sf-surface)) padding-box,
    linear-gradient(120deg, #C93B10, #2A4CC4, #C93B10) border-box;
  animation: sf-diy-glow 3.2s ease-in-out infinite;
}
/* Once selected it behaves like any other chip — solid fill, no gradient/glow */
.sf-cat--diy.sf-cat--on {
  border: 1.5px solid var(--orange);
  background: var(--sf-soft);
  animation: none;
  box-shadow: none;
}
.sf-cat-tag {
  position: absolute; top: -9px; right: 10px;
  font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: linear-gradient(120deg, #C93B10, #2A4CC4);
  padding: 3px 8px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
@keyframes sf-diy-glow {
  0%, 100% { box-shadow: 0 0 13px -3px rgba(201,59,16,0.5); }
  50%      { box-shadow: 0 0 20px -2px rgba(42,76,196,0.6); }
}

.sf-altro { margin-top: 14px; }
.sf-altro[hidden] { display: none; }

/* Inline notice (e.g. "describe later") */
.sf-note {
  margin: -6px 0 18px;
  padding: 10px 14px;
  border-left: 2px solid var(--orange);
  background: rgba(201, 59, 16, 0.10);
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--sf-ink60);
}

/* actions */
.sf-actions { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.sf-btn { font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 14px 24px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; transition: background 0.16s, color 0.16s, border-color 0.16s, opacity 0.16s; }
.sf-btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.sf-btn-primary:hover { background: #b1330d; }
.sf-btn-ghost { background: transparent; color: var(--sf-ink60); border-color: var(--sf-line); }
.sf-btn-ghost:hover { color: var(--sf-ink); border-color: var(--sf-ink40); }
.sf-spacer { flex: 1; }
.sf-kbd { font-family: var(--font-mono); font-size: 0.68rem; color: var(--sf-ink40); letter-spacing: 0.04em; }
.sf-kbd b { color: var(--sf-ink60); font-weight: 500; }

/* review */
.sf-review { display: flex; flex-direction: column; }
.sf-review-row { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--sf-line08); cursor: pointer; }
.sf-review-row:hover .sf-rv-edit { opacity: 1; }
.sf-rv-label { flex: 0 0 34%; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sf-ink40); padding-top: 2px; }
.sf-rv-val { flex: 1; color: var(--sf-ink); font-size: 1rem; word-break: break-word; }
.sf-rv-val.empty { color: var(--sf-ink40); font-style: italic; }
.sf-rv-edit { font-family: var(--font-mono); font-size: 0.68rem; color: var(--orange); opacity: 0;
  transition: opacity 0.15s; text-transform: uppercase; }

/* consent + captcha */
.sf-consent { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.sf-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-size: 0.85rem; line-height: 1.45; color: var(--sf-ink60); }
.sf-check input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px;
  accent-color: var(--orange); cursor: pointer; }
.sf-captcha { margin-top: 20px; min-height: 0; }
.sf-err-consent, .sf-err-captcha { display: none; margin-top: 4px; }

/* done */
.sf-done { text-align: center; padding: 26px 0 14px; }
.sf-mark { width: 62px; height: 62px; border-radius: 50%; background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto 22px; }
.sf-done h2 { font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: 12px; }
.sf-done p { color: var(--sf-ink60); max-width: 42ch; margin: 0 auto; }

.sf-enter { animation: sf-in 0.36s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes sf-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sf-shake { animation: sf-shake 0.32s; }
@keyframes sf-shake { 10%,90%{transform:translateX(-1px)} 30%,70%{transform:translateX(3px)} 50%{transform:translateX(-5px)} }
@media (prefers-reduced-motion: reduce) {
  .sf-enter, .sf-shake, .sf-progress-fill, .sf-cat--diy { animation: none; transition: none; }
}

@media (max-width: 900px) {
  .pg-hero--form { padding: 96px var(--side-pad) 48px; }
  .pv-grid { grid-template-columns: 1fr; gap: 28px; }
  .pv-intro, .pv-formcol { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .sf-body { padding: 30px 22px 26px; }
  .sf-row2 { grid-template-columns: 1fr; gap: 18px; }
  .sf-cats { grid-template-columns: 1fr 1fr; }
  .sf-kbd { display: none; }
}

/* ==================== FAQ (preventivo) — single-column accordion ==================== */
/* Smooth open/close via grid-template-rows 0fr↔1fr (no JS height measuring). */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--hairline-strong); }
.faq-item:first-child { border-top: 1px solid var(--hairline-strong); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--ink);
}
/* Indicator: orange "+" collapsed → white "×" open (no backing) */
.faq-q::after {
  content: '+';
  flex-shrink: 0;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 1.7rem;
  line-height: 1;
  transition: color 0.2s ease;
}
.faq-item.is-open .faq-q::after { content: '×'; color: #fff; }

.faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a {
  overflow: hidden;
  min-height: 0;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 70ch;
}
.faq-item.is-open .faq-a { padding-bottom: 24px; }
@media (prefers-reduced-motion: reduce) {
  .faq-a-wrap { transition: none; }
}

/* ==================== DARK MODE ==================== */
[data-theme="dark"] {
  --off-white:        #141412;
  --off-white-2:      #1E1C17;
  --ink:              #ECEAE1;
  --ink-60:           rgba(236,234,225,0.60);
  --ink-40:           rgba(236,234,225,0.40);
  --ink-20:           rgba(236,234,225,0.20);
  --hairline:         rgba(236,234,225,0.08);
  --hairline-strong:  rgba(236,234,225,0.18);
  --hairline-orange:  rgba(201, 59, 16, 0.26);
}

/* Sections that are always dark — keep them from inverting.
   Re-pin the light-theme token values inside them so their descendant text
   (which uses var(--off-white) / var(--ink-60) etc.) stays legible on the
   permanently-dark background, exactly as it renders in light mode. */
[data-theme="dark"] .section-categories,
[data-theme="dark"] .final-cta,
[data-theme="dark"] .pg-hero,
[data-theme="dark"] .pg-cta {
  --off-white:       #F2EFE6;
  --off-white-2:     #EBE7DB;
  --ink:             #0A0A0A;
  --ink-60:          rgba(10, 10, 10, 0.60);
  --ink-40:          rgba(10, 10, 10, 0.40);
  --ink-20:          rgba(10, 10, 10, 0.20);
  --hairline:        rgba(10, 10, 10, 0.08);
  --hairline-strong: rgba(10, 10, 10, 0.15);
  background: #0a0a0a;
}
/* Orange tabs are designed for light text — keep it light in dark mode too */
[data-theme="dark"] .process-card-tab,
[data-theme="dark"] .step-tag { color: #F2EFE6; }

/* Hero is already dark in dark mode — keep the carousel backdrop dark too
   (var(--ink) would otherwise flip it light behind the transparent gallery). */
[data-theme="dark"] .hero.theme-dark { background: #0a0a0a; }

/* Wordmark invert in dark mode */
[data-theme="dark"] #colata         { filter: invert(1); }
[data-theme="dark"] #wordmark-fallback { filter: invert(1); }

/* Nav logo invert in dark mode */
[data-theme="dark"] .sh-logo img    { filter: invert(1); }