/* ==========================================================================
   LEMANET — Master Stylesheet
   main.css
   Italian Professional Studio Equipment Rental
   ========================================================================== */

@import url('./fonts.css');

/* ==========================================================================
   01. CSS CUSTOM PROPERTIES — Design Tokens
   ========================================================================== */

:root {
  /* --- Color Palette --- */
  --color-bg:      #0B0B0D; /* Nero Regia — main background */
  --color-surface: #161618; /* Grigio Cabina — cards, sections */
  --color-border:  #2A2A2E; /* Grigio Flight-Case — borders, dividers */
  --color-accent:  #E4FF3A; /* Giallo Tally — CTAs, hover, ON AIR */
  --color-danger:  #FF4D2E; /* Rosso Rec — badges, errors */
  --color-text:    #F4F1EA; /* Bianco Pellicola — warm white */
  --color-muted:   #8A8A8E; /* Grigio Gobo — secondary text */

  /* --- Font Families (also declared in fonts.css) --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-accent:  'Caprasimo', cursive;

  /* --- Spacing Scale --- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;
  --space-3xl: 160px;

  /* --- Grid --- */
  --grid-cols:   12;
  --grid-gutter: 24px;
  --container-max: 1280px;
  --container-pad: 24px;

  /* --- Transitions --- */
  --trans-fast:   150ms ease-out;
  --trans-base:   200ms ease-out;
  --trans-slow:   300ms ease-out;
  --trans-xslow:  500ms ease-out;
  --trans-banner: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Borders --- */
  --border-base: 1px solid var(--color-border);
  --border-accent: 1px solid var(--color-accent);

  /* --- Z-index Scale --- */
  --z-base:     1;
  --z-above:    10;
  --z-header:   100;
  --z-mobile-nav: 200;
  --z-cursor:   9998;
  --z-noise:    9999;
  --z-cookie:   10000;
}

/* ==========================================================================
   02. CSS RESET & BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Film-grain noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  z-index: var(--z-noise);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-border);
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #f0ff6e;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) var(--color-border);
}

/* Selection highlight */
::selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

::-moz-selection {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

/* Base element resets */
img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button,
input,
textarea,
select {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   03. TYPOGRAPHY SCALE
   ========================================================================== */

/* Display — Hero headline, largest text unit */
.text-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 88px;
  line-height: 0.95;
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
}

/* H1 */
.text-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.05;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

/* H2 */
.text-h2 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.15;
  font-optical-sizing: auto;
}

/* H3 */
.text-h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  font-optical-sizing: auto;
}

/* H4 */
.text-h4 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
}

/* Body */
.text-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
}

/* Small */
.text-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
}

/* Technical label */
.text-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.4;
}

/* Monospace body text */
.text-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
}

/* Price display */
.text-price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

/* Muted text modifier */
.text-muted {
  color: var(--color-muted);
}

/* ==========================================================================
   04. LAYOUT UTILITIES
   ========================================================================== */

/* Container */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

/* Section padding */
.section-pad {
  padding-block: 140px;
}

/* 12-column CSS Grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}

/* Common column span utilities */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Flex utilities */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* Section label — clapperboard numbering */
.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 24px;
}

/* Section intro — headline + descriptor group */
.section-intro {
  margin-bottom: 80px;
}

/* Divider */
.divider {
  border: none;
  border-top: var(--border-base);
  margin-block: var(--space-lg);
}

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==========================================================================
   05. ICON UTILITY
   ========================================================================== */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: 20px 0;
  background: var(--color-bg);
  transition: border-bottom 300ms ease-out, backdrop-filter 300ms ease-out, background 300ms ease-out;
}

.site-header.scrolled {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  background: rgba(11, 11, 13, 0.85);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Logo */
.site-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  font-optical-sizing: auto;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

.site-logo__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-left: 3px;
  flex-shrink: 0;
  align-self: center;
  margin-bottom: 2px;
}

/* Primary navigation */
.site-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-nav__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--trans-base);
  position: relative;
  white-space: nowrap;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--trans-base);
}

.site-nav__link:hover {
  color: var(--color-accent);
}

.site-nav__link:hover::after {
  width: 100%;
}

.site-nav__link.active {
  color: var(--color-accent);
}

/* On-air indicator */
.onair-indicator {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.onair-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-danger);
  animation: pulse-onair 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.onair-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

/* Header right group */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* Phone number */
.header-phone {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--trans-base);
  white-space: nowrap;
}

.header-phone:hover {
  color: var(--color-accent);
}

/* Hamburger button */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: calc(var(--z-mobile-nav) + 1);
}

.hamburger__line {
  display: block;
  height: 1px;
  background: var(--color-text);
  transition: all 350ms cubic-bezier(0.23, 1, 0.32, 1);
  transform-origin: center;
}

.hamburger__line:nth-child(1) { width: 28px; }
.hamburger__line:nth-child(2) { width: 20px; }
.hamburger__line:nth-child(3) { width: 24px; }

/* Hamburger open state — transforms to X */
.hamburger.is-open .hamburger__line:nth-child(1) {
  width: 26px;
  transform: translateY(6px) rotate(45deg);
}

.hamburger.is-open .hamburger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.is-open .hamburger__line:nth-child(3) {
  width: 26px;
  transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   07. MOBILE NAVIGATION
   ========================================================================== */

.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: var(--z-mobile-nav);
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  padding: 100px var(--container-pad) 60px;
  overflow-y: auto;
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 48px;
}

.mobile-nav__link {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
  font-optical-sizing: auto;
  transition: color var(--trans-base);
  padding-block: 8px;
  border-bottom: 1px solid transparent;
}

.mobile-nav__link:hover {
  color: var(--color-accent);
}

.mobile-nav__footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav__phone {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.mobile-nav__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
}

/* ==========================================================================
   08. HERO SECTION
   ========================================================================== */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Dark overlay — left-heavy gradient */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11, 11, 13, 0.85) 0%,
    rgba(11, 11, 13, 0.65) 40%,
    rgba(11, 11, 13, 0.20) 70%,
    transparent 100%
  );
  z-index: 1;
}

/* Scanlines effect */
.hero.scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(11, 11, 13, 0.4) 3px,
    rgba(11, 11, 13, 0.4) 4px
  );
  opacity: 0.02;
  pointer-events: none;
  z-index: 2;
}

/* Timecode badge — top-right */
.hero-timecode {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  z-index: 3;
}

/* Hero content block */
.hero-content {
  position: relative;
  z-index: 3;
  padding-bottom: 80px;
  width: 100%;
}

/* Headline */
.hero-headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 88px;
  line-height: 0.95;
  color: var(--color-text);
  font-optical-sizing: auto;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  max-width: 820px;
}

/* Accent word wrapper (for SVG underline) */
.hero-headline .accent-word {
  position: relative;
  display: inline-block;
  color: var(--color-text);
}

/* SVG underline — animates in */
.hero-underline {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 12px;
  overflow: visible;
  pointer-events: none;
}

.hero-underline path,
.hero-underline line {
  stroke: var(--color-accent);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw-line 1.2s ease-out 1.5s forwards;
}

/* Subtitle */
.hero-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  max-width: 520px;
  color: var(--color-text);
  opacity: 0.85;
  margin-bottom: 0;
}

/* CTA row */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Stats column — bottom-right */
.hero-stats {
  position: absolute;
  bottom: 80px;
  right: 40px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: right;
}

.hero-stat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
}

.hero-stat strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}

/* Blinking cursor for typed effect */
.blink-cursor::after {
  content: '▋';
  animation: blink 1s step-end 6;
  display: inline-block;
  margin-left: 2px;
  color: var(--color-accent);
}

/* ==========================================================================
   09. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 200ms ease-out;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

/* Primary — Giallo Tally */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: #f0ff6e;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-primary:active {
  background: #d4ef2a;
  transform: scale(0.98);
}

/* Secondary — outlined */
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}

.btn-secondary:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* Ghost — minimal */
.btn-ghost {
  background: transparent;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  padding: 12px 24px;
}

.btn-ghost:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* Arrow element */
.btn-arrow {
  display: inline-block;
  transition: transform 200ms ease-out;
  font-style: normal;
}

/* Full-width variant */
.btn-full {
  width: 100%;
  justify-content: center;
}

/* Large variant */
.btn-lg {
  padding: 18px 36px;
  font-size: 13px;
}

/* ==========================================================================
   10. ADVANTAGE CARDS — Sezione 01
   ========================================================================== */

.advantages-section {
  background: var(--color-bg);
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

.card-advantage {
  background: var(--color-surface);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
  transition: transform var(--trans-slow);
}

.card-advantage::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-advantage:hover::after {
  width: 100%;
}

.card-advantage:hover {
  transform: translateY(-4px);
}

.card-advantage-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  position: absolute;
  top: 24px;
  right: 24px;
}

.card-advantage-icon {
  color: var(--color-accent);
  margin-bottom: 24px;
  font-size: 32px;
  display: flex;
  align-items: center;
}

.card-advantage-icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--color-accent);
}

.card-advantage-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  font-optical-sizing: auto;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.2;
}

.card-advantage-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ==========================================================================
   11. CATALOG TILES — Sezione 02 (Bento Grid)
   ========================================================================== */

.catalog-section {
  background: var(--color-bg);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 380px 280px;
  gap: 16px;
}

/* Tile 1: Illuminazione — large, col 1–7, row 1–2 */
.catalog-tile--illuminazione {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
}

/* Tile 2: Audio — col 8–12, row 1 */
.catalog-tile--audio {
  grid-column: 8 / span 5;
  grid-row: 1;
}

/* Tile 3: Video — col 8–12, row 2 (split) */
.catalog-tile--video {
  grid-column: 8 / span 5;
  grid-row: 2;
}

/* 2nd row variant: Fondali col 1–4, Altro col 5–12 */
.catalog-grid--extended {
  grid-template-rows: 380px 280px 280px;
}

.catalog-tile--fondali {
  grid-column: 1 / span 4;
  grid-row: 3;
}

.catalog-tile--altro {
  grid-column: 5 / span 8;
  grid-row: 3;
}

/* Tile base styles */
.catalog-tile {
  position: relative;
  overflow: hidden;
  cursor: none;
}

.catalog-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1);
  transition: filter 500ms ease-out, transform 500ms ease-out;
}

.catalog-tile:hover img {
  filter: grayscale(0);
  transform: scale(1.03);
}

/* Tile overlay — gradient + content */
.catalog-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 11, 13, 0.92) 0%,
    rgba(11, 11, 13, 0.4) 50%,
    rgba(11, 11, 13, 0.1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transition: background 300ms ease-out;
}

.catalog-tile:hover .catalog-tile-overlay {
  background: linear-gradient(
    to top,
    rgba(11, 11, 13, 0.95) 0%,
    rgba(11, 11, 13, 0.6) 50%,
    rgba(11, 11, 13, 0.2) 100%
  );
}

/* Category label — top-left */
.catalog-tile-category {
  position: absolute;
  top: 24px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  z-index: 2;
}

/* Tile title */
.catalog-tile-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 32px;
  font-optical-sizing: auto;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 8px;
}

.catalog-tile--illuminazione .catalog-tile-title {
  font-size: 44px;
}

/* Tile CTA — appears on hover */
.catalog-tile-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  margin-top: 8px;
}

.catalog-tile:hover .catalog-tile-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   12. PACKAGE CARDS — Sezione 03
   ========================================================================== */

.packages-section {
  background: var(--color-bg);
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
  align-items: start;
}

.card-package {
  background: var(--color-surface);
  padding: 48px;
  position: relative;
  overflow: hidden;
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.card-package:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(228, 255, 58, 0.08);
}

/* Featured ribbon — "PIÙ RICHIESTO" */
.card-package--featured {
  border: 1px solid var(--color-accent);
}

.card-package--featured::before {
  content: 'PIÙ RICHIESTO';
  position: absolute;
  top: 28px;
  right: -36px;
  width: 150px;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 6px 0;
  transform: rotate(45deg);
  line-height: 1.2;
}

/* Package header */
.card-package-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 36px;
  font-optical-sizing: auto;
  color: var(--color-text);
  line-height: 1.1;
  margin-bottom: 8px;
}

.card-package-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--color-muted);
  line-height: 1.5;
}

/* Price block */
.card-package-price-block {
  margin-top: 32px;
}

.card-package-price {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: -0.03em;
}

.card-package--featured .card-package-price {
  color: var(--color-accent);
}

.card-package-price-unit {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 6px;
  display: block;
}

/* Divider */
.card-package-divider {
  border: none;
  border-top: 1px dashed var(--color-border);
  margin-block: 28px;
}

/* Feature list */
.card-package-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.card-package-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

.card-package-feature-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

/* ==========================================================================
   13. WORKS GALLERY — Sezione 04
   ========================================================================== */

.works-section {
  background: var(--color-bg);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 300px;
  gap: 16px;
}

/* Grid layout */
.work-item:nth-child(1) { grid-column: span 8; grid-row: span 2; }
.work-item:nth-child(2) { grid-column: span 4; }
.work-item:nth-child(3) { grid-column: span 4; }
.work-item:nth-child(4) { grid-column: span 4; }
.work-item:nth-child(5) { grid-column: span 4; }
.work-item:nth-child(6) { grid-column: span 6; }
.work-item:nth-child(7) { grid-column: span 6; }

.work-item {
  position: relative;
  overflow: hidden;
  cursor: none;
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms ease-out;
}

.work-item:hover img {
  transform: scale(1.05);
}

/* Hover overlay */
.work-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 13, 0.85);
  opacity: 0;
  transition: opacity 400ms ease-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 32px;
}

.work-item:hover .work-overlay {
  opacity: 1;
}

/* Equipment list in overlay */
.work-equipment-list {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.work-equipment-list li::before {
  content: '— ';
  color: var(--color-accent);
}

/* Category tag */
.work-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  z-index: 2;
  background: rgba(11, 11, 13, 0.6);
  padding: 4px 8px;
  backdrop-filter: blur(4px);
}

/* Work title */
.work-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  font-optical-sizing: auto;
  color: var(--color-text);
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  line-height: 1.2;
  transition: opacity 400ms ease-out;
}

.work-item:hover .work-title {
  opacity: 0;
}

/* Work meta */
.work-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 8px;
}

/* Register marks — croci di registro */
.register-mark {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 3;
}

.register-mark--tl {
  top: 12px;
  left: 12px;
  border-top: 1px solid rgba(228, 255, 58, 0.4);
  border-left: 1px solid rgba(228, 255, 58, 0.4);
}

.register-mark--tr {
  top: 12px;
  right: 12px;
  border-top: 1px solid rgba(228, 255, 58, 0.4);
  border-right: 1px solid rgba(228, 255, 58, 0.4);
}

.register-mark--bl {
  bottom: 12px;
  left: 12px;
  border-bottom: 1px solid rgba(228, 255, 58, 0.4);
  border-left: 1px solid rgba(228, 255, 58, 0.4);
}

.register-mark--br {
  bottom: 12px;
  right: 12px;
  border-bottom: 1px solid rgba(228, 255, 58, 0.4);
  border-right: 1px solid rgba(228, 255, 58, 0.4);
}

/* ==========================================================================
   14. PROCESS STEPS — Sezione 05
   ========================================================================== */

.process-section {
  background: var(--color-bg);
  overflow: hidden;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

/* Connecting SVG path */
.process-line-svg {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  height: 40px;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.process-line {
  stroke: var(--color-accent);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s ease-out;
}

.process-line.drawn {
  stroke-dashoffset: 0;
}

/* Individual step */
.process-step {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 32px 48px;
  z-index: 1;
}

.process-step:first-child {
  padding-left: 0;
}

.process-step:last-child {
  padding-right: 0;
}

/* Ghost number */
.step-number {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 180px;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-border);
  line-height: 1;
  pointer-events: none;
  display: block;
  margin-bottom: -40px;
  letter-spacing: -0.05em;
  font-optical-sizing: auto;
}

.step-content {
  position: relative;
  z-index: 1;
}

.step-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--color-accent);
}

.step-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  font-optical-sizing: auto;
  color: var(--color-text);
  margin-bottom: 12px;
  line-height: 1.2;
}

.step-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ==========================================================================
   15. TESTIMONIAL SLIDER — Sezione 06
   ========================================================================== */

.testimonials-section {
  background: var(--color-bg);
  overflow: hidden;
}

.testimonials-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
}

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

.slider-arrow {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--trans-base);
  line-height: 1;
}

.slider-arrow:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.slider-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Slider viewport */
.testimonials-viewport {
  overflow: hidden;
}

.testimonials-track {
  display: flex;
  gap: 24px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonials-track:active {
  cursor: grabbing;
}

/* Individual card */
.testimonial-card {
  flex-shrink: 0;
  width: calc(33.333% - 16px);
  background: var(--color-surface);
  padding: 48px;
  display: flex;
  flex-direction: column;
}

/* Opening quote mark */
.quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 96px;
  color: var(--color-accent);
  line-height: 0.6;
  display: block;
  margin-bottom: 24px;
  font-optical-sizing: auto;
}

/* Quote text */
.quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--color-text);
  font-optical-sizing: auto;
  margin-bottom: auto;
  padding-bottom: 32px;
}

/* One accent word per testimonial */
.quote-emphasis {
  font-family: var(--font-accent);
  font-style: normal;
  color: var(--color-accent);
}

/* Reviewer info */
.reviewer-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  margin-top: 0;
}

.reviewer-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.reviewer-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reviewer-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text);
}

.reviewer-role {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-muted);
}

.reviewer-company {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-top: 2px;
}

/* ==========================================================================
   16. CONTACT SECTION
   ========================================================================== */

.contact-section {
  background: var(--color-bg);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Contact info column */
.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-info-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 48px;
  font-optical-sizing: auto;
  color: var(--color-text);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

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

.contact-info-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-info-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  display: block;
  margin-bottom: 4px;
}

.contact-info-value {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.5;
}

.contact-info-value a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--trans-base);
}

.contact-info-value a:hover {
  color: var(--color-accent);
}

/* === FORM === */
.contact-form {
  display: flex;
  flex-direction: column;
}

/* Floating-label field */
.form-field {
  position: relative;
  margin-bottom: 32px;
}

.form-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  padding: 16px 0 12px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color 250ms ease-out;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus {
  border-bottom-color: var(--color-accent);
}

.form-label {
  position: absolute;
  top: 16px;
  left: 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 14px;
  pointer-events: none;
  transition: transform 250ms ease-out, font-size 250ms ease-out, color 250ms ease-out;
  transform-origin: left center;
}

.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label {
  transform: translateY(-22px) scale(0.85);
  color: var(--color-accent);
  transform-origin: left;
}

/* Textarea variant */
.form-input--textarea {
  resize: vertical;
  min-height: 100px;
  padding-top: 20px;
}

/* Select variant */
.form-input--select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A8E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 24px;
}

/* GDPR checkbox */
.form-gdpr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}

.form-gdpr input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.form-gdpr-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.55;
}

.form-gdpr-label a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  transition: color var(--trans-base), text-decoration-color var(--trans-base);
}

.form-gdpr-label a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* Form feedback messages */
.form-success {
  display: none;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 16px 0;
  align-items: center;
  gap: 10px;
}

.form-success.visible {
  display: flex;
}

.form-error {
  display: none;
  color: var(--color-danger);
  font-family: var(--font-body);
  font-size: 13px;
  margin-top: 8px;
}

.form-error.visible {
  display: block;
}

/* Field-level error */
.field-error {
  color: var(--color-danger);
  font-family: var(--font-body);
  font-size: 12px;
  margin-top: 6px;
  display: none;
}

.field-error.visible {
  display: block;
}

.form-input.has-error {
  border-bottom-color: var(--color-danger);
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-bg);
  padding: 120px 0 48px;
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

/* Giant wordmark */
.footer-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 220px;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-surface);
  display: block;
  margin-bottom: 80px;
  overflow: hidden;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-optical-sizing: auto;
  white-space: nowrap;
  user-select: none;
}

/* 4-column grid */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 80px;
}

.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 24px;
  display: block;
}

.footer-brand-desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 28px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--trans-base);
  line-height: 1.4;
}

.footer-nav-link:hover {
  color: var(--color-text);
}

/* Footer contact info */
.footer-contact-item {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 10px;
  line-height: 1.5;
}

.footer-contact-item a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--trans-base);
}

.footer-contact-item a:hover {
  color: var(--color-text);
}

/* Social icons row */
.footer-socials {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.footer-social-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  text-decoration: none;
  transition: all var(--trans-base);
}

.footer-social-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom-text {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

.footer-legal-links {
  display: flex;
  gap: 24px;
}

.footer-legal-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--trans-base);
}

.footer-legal-link:hover {
  color: var(--color-text);
}

/* ==========================================================================
   18. CUSTOM CURSOR
   ========================================================================== */

/* Hide default cursor on supported devices */
@media (hover: hover) and (pointer: fine) {
  body:has(.catalog-tile:hover),
  body:has(.work-item:hover) {
    cursor: none;
  }

  .catalog-tile,
  .work-item {
    cursor: none;
  }
}

.custom-cursor {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 1px solid rgba(244, 241, 234, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms ease-out, width 300ms cubic-bezier(0.16, 1, 0.3, 1), height 300ms cubic-bezier(0.16, 1, 0.3, 1), background 300ms ease-out;
  will-change: transform;
  mix-blend-mode: difference;
}

.custom-cursor--expanded {
  width: 96px;
  height: 96px;
  background: rgba(228, 255, 58, 0.1);
  border-color: var(--color-accent);
}

.custom-cursor--hidden {
  opacity: 0;
}

.custom-cursor-label {
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.custom-cursor--expanded .custom-cursor-label {
  opacity: 1;
}

/* Cursor dot (inner) */
.custom-cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: var(--color-text);
  border-radius: 50%;
  will-change: transform;
  transition: transform 80ms linear;
}

/* ==========================================================================
   19. COOKIE BANNER
   ========================================================================== */

.cookie-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-cookie);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 28px 32px;
  max-width: 440px;
  width: calc(100% - 48px);
  transform: translateY(120%);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-banner.visible {
  transform: translateY(0);
}

.cookie-banner-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 20px;
  font-optical-sizing: auto;
  color: var(--color-text);
  margin-bottom: 10px;
  line-height: 1.2;
}

.cookie-banner-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-muted);
  margin-bottom: 24px;
}

.cookie-banner-text a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* All three cookie buttons have equal visual weight */
.btn-cookie {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--trans-base);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

.btn-cookie:hover {
  border-color: var(--color-text);
}

/* Accetta — slightly highlighted but same pattern */
.btn-cookie--accept {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-cookie--accept:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* ==========================================================================
   20. CATALOG PAGE — attrezzature.php
   ========================================================================== */

.catalog-page {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  padding-top: 120px;
}

/* Filter sidebar */
.filter-sidebar {
  position: sticky;
  top: 100px;
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  background: var(--color-surface);
  padding: 32px;
}

.filter-sidebar-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 28px;
  display: block;
}

.filter-group {
  margin-bottom: 32px;
}

.filter-group-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 14px;
  display: block;
}

/* Styled checkboxes */
.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.filter-option input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.filter-option-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--trans-fast);
}

.filter-option:hover .filter-option-label {
  color: var(--color-accent);
}

.filter-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  margin-left: auto;
}

.filter-group-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: 32px;
}

/* Range slider */
.filter-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  border-radius: 0;
  outline: none;
  margin: 12px 0;
}

.filter-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  cursor: pointer;
}

.filter-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Equipment grid */
.equipment-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-content: start;
}

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

/* Equipment card */
.equipment-card {
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--trans-slow), box-shadow var(--trans-slow);
}

.equipment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.equipment-card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.equipment-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
  transition: filter var(--trans-xslow), transform var(--trans-xslow);
}

.equipment-card:hover .equipment-card-img img {
  filter: grayscale(0);
  transform: scale(1.04);
}

.equipment-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.equipment-card-category {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
}

.equipment-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  font-optical-sizing: auto;
  color: var(--color-text);
  line-height: 1.2;
}

.equipment-card-specs {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  line-height: 1.6;
}

.equipment-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.equipment-card-price {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: -0.01em;
}

.equipment-card-price-unit {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--color-muted);
  display: block;
}

/* Equipment availability badge */
.availability-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
}

.availability-badge--available {
  color: var(--color-accent);
  border: 1px solid rgba(228, 255, 58, 0.3);
}

.availability-badge--unavailable {
  color: var(--color-danger);
  border: 1px solid rgba(255, 77, 46, 0.3);
}

/* Toolbar above grid */
.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.catalog-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

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

.catalog-sort label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}

.sort-select {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.sort-select:focus {
  border-color: var(--color-accent);
}

/* ==========================================================================
   21. WORKS PAGE — lavori.php
   ========================================================================== */

.works-page {
  padding-top: 120px;
}

/* Filter tabs */
.works-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--color-border);
}

.works-filter-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  padding: 14px 24px;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color var(--trans-base);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.works-filter-tab:hover {
  color: var(--color-text);
}

.works-filter-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* Magazine-style grid */
.works-magazine-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.works-magazine-grid .work-item:nth-child(1)  { grid-column: span 8; aspect-ratio: 16/9; }
.works-magazine-grid .work-item:nth-child(2)  { grid-column: span 4; aspect-ratio: 3/4; }
.works-magazine-grid .work-item:nth-child(3)  { grid-column: span 4; aspect-ratio: 4/3; }
.works-magazine-grid .work-item:nth-child(4)  { grid-column: span 4; aspect-ratio: 4/3; }
.works-magazine-grid .work-item:nth-child(5)  { grid-column: span 4; aspect-ratio: 4/3; }
.works-magazine-grid .work-item:nth-child(6)  { grid-column: span 6; aspect-ratio: 16/9; }
.works-magazine-grid .work-item:nth-child(7)  { grid-column: span 6; aspect-ratio: 16/9; }
.works-magazine-grid .work-item:nth-child(8)  { grid-column: span 12; aspect-ratio: 21/9; }

/* ==========================================================================
   22. PAGE HERO — compact (inner pages)
   ========================================================================== */

.page-hero {
  height: 50vh;
  min-height: 400px;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.page-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(11, 11, 13, 0.85) 0%,
    rgba(11, 11, 13, 0.5) 60%,
    rgba(11, 11, 13, 0.2) 100%
  );
  z-index: 1;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: 60px;
  width: 100%;
}

.page-hero__breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  margin-bottom: 16px;
  display: block;
}

.page-hero__breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--trans-base);
}

.page-hero__breadcrumb a:hover {
  color: var(--color-text);
}

.page-hero__breadcrumb span {
  margin-inline: 8px;
  opacity: 0.5;
}

.page-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 64px;
  font-optical-sizing: auto;
  color: var(--color-text);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   23. LEGAL PAGES
   ========================================================================== */

.legal-page {
  padding-top: 120px;
  padding-bottom: 120px;
}

.legal-content {
  max-width: 720px;
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
}

.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin-top: 2em;
  margin-bottom: 0.75em;
}

.legal-content h1 {
  font-style: italic;
  font-weight: 600;
  font-size: 48px;
  font-optical-sizing: auto;
  margin-top: 0;
  line-height: 1.1;
}

.legal-content h2 {
  font-weight: 700;
  font-size: 28px;
  font-style: normal;
}

.legal-content h3 {
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
}

.legal-content p {
  margin-bottom: 1.2em;
  color: var(--color-muted);
}

.legal-content p strong {
  color: var(--color-text);
  font-weight: 500;
}

.legal-content a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-border);
  transition: color var(--trans-base), text-decoration-color var(--trans-base);
}

.legal-content a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.legal-content ul,
.legal-content ol {
  margin-bottom: 1.2em;
  padding-left: 24px;
}

.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }

.legal-content li {
  margin-bottom: 0.5em;
  color: var(--color-muted);
}

/* Company data table */
.legal-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
}

.legal-data-table tr {
  border-bottom: 1px solid var(--color-border);
}

.legal-data-table tr:last-child {
  border-bottom: none;
}

.legal-data-table th,
.legal-data-table td {
  padding: 12px 0;
  text-align: left;
  vertical-align: top;
}

.legal-data-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  width: 200px;
  padding-right: 24px;
}

.legal-data-table td {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
}

.legal-updated {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
  margin-bottom: 48px;
  display: block;
}

/* ==========================================================================
   24. FAQ ACCORDION
   ========================================================================== */

.faq-section {
  background: var(--color-bg);
}

.faq-list {
  max-width: 800px;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  color: var(--color-text);
  line-height: 1.4;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: color var(--trans-base);
}

.faq-question:hover {
  color: var(--color-accent);
}

.faq-question:hover .faq-arrow {
  border-color: var(--color-accent);
}

/* Arrow icon */
.faq-arrow {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color var(--trans-base);
  color: var(--color-muted);
}

.faq-arrow svg {
  width: 14px;
  height: 14px;
}

.faq-item.is-open .faq-arrow {
  transform: rotate(180deg);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.faq-item.is-open .faq-question {
  color: var(--color-accent);
}

/* Collapsible answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-answer-inner {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: var(--color-muted);
  padding-bottom: 24px;
  max-width: 640px;
}

.faq-answer-inner a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   25. ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* ON AIR dot pulse */
@keyframes pulse-onair {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Cursor blink — runs 6 iterations = ~3 blinks at 1s each */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* SVG path draw-in */
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* Fade up — intersection observer trigger */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger entrance */
@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Banner slide up */
@keyframes slide-up-banner {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Shimmer loading */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Rotate spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Scale in */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   26. SCROLL-TRIGGERED ANIMATION CLASSES
   ========================================================================== */

/* Default state — invisible, shifted */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* In-view state — JS adds this class via IntersectionObserver */
.animate-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children via delay */
.animate-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.animate-stagger.in-view > *:nth-child(1)  { transition-delay: 0ms;   opacity: 1; transform: none; }
.animate-stagger.in-view > *:nth-child(2)  { transition-delay: 80ms;  opacity: 1; transform: none; }
.animate-stagger.in-view > *:nth-child(3)  { transition-delay: 160ms; opacity: 1; transform: none; }
.animate-stagger.in-view > *:nth-child(4)  { transition-delay: 240ms; opacity: 1; transform: none; }
.animate-stagger.in-view > *:nth-child(5)  { transition-delay: 320ms; opacity: 1; transform: none; }
.animate-stagger.in-view > *:nth-child(6)  { transition-delay: 400ms; opacity: 1; transform: none; }

/* Word reveal — each word wrapped in span */
.word-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.word-reveal.in-view span:nth-child(1)  { transition-delay: 0ms;   opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(2)  { transition-delay: 60ms;  opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(3)  { transition-delay: 120ms; opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(4)  { transition-delay: 180ms; opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(5)  { transition-delay: 240ms; opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(6)  { transition-delay: 300ms; opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(7)  { transition-delay: 360ms; opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(8)  { transition-delay: 420ms; opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(9)  { transition-delay: 480ms; opacity: 1; transform: none; }
.word-reveal.in-view span:nth-child(10) { transition-delay: 540ms; opacity: 1; transform: none; }

/* Scale reveal */
.animate-scale-in {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.animate-scale-in.in-view {
  opacity: 1;
  transform: scale(1);
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-border) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0;
}

/* ==========================================================================
   27. UTILITY CLASSES
   ========================================================================== */

.hidden { display: none !important; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }

.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.no-underline { text-decoration: none; }

.color-accent  { color: var(--color-accent); }
.color-danger  { color: var(--color-danger); }
.color-muted   { color: var(--color-muted); }
.color-text    { color: var(--color-text); }

.bg-surface { background: var(--color-surface); }
.bg-bg      { background: var(--color-bg); }

.border-base   { border: var(--border-base); }
.border-accent { border: var(--border-accent); }
.border-t      { border-top: var(--border-base); }
.border-b      { border-bottom: var(--border-base); }

.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }

.mb-0  { margin-bottom: 0; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.mb-48 { margin-bottom: 48px; }
.mb-64 { margin-bottom: 64px; }
.mb-80 { margin-bottom: 80px; }

.mt-auto { margin-top: auto; }

/* Accent background chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  background: rgba(228, 255, 58, 0.1);
  border: 1px solid rgba(228, 255, 58, 0.3);
  color: var(--color-accent);
}

.chip--danger {
  background: rgba(255, 77, 46, 0.1);
  border-color: rgba(255, 77, 46, 0.3);
  color: var(--color-danger);
}

.chip--neutral {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-muted);
}

/* Danger badge */
.badge-danger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  background: var(--color-danger);
  color: #fff;
}

/* ==========================================================================
   28. RESPONSIVE — 1200px (Large breakpoint)
   ========================================================================== */

@media (max-width: 1200px) {
  :root {
    --container-pad: 32px;
  }

  .text-display,
  .hero-headline {
    font-size: 72px;
  }

  .footer-wordmark {
    font-size: 160px;
  }

  .step-number {
    font-size: 140px;
  }

  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .packages-grid {
    gap: 20px;
  }

  .card-package {
    padding: 36px;
  }

  .testimonial-card {
    width: calc(50% - 12px);
  }
}

/* ==========================================================================
   29. RESPONSIVE — 992px (Medium breakpoint)
   ========================================================================== */

@media (max-width: 992px) {
  .site-nav {
    display: none;
  }

  .header-phone {
    display: none;
  }

  .onair-indicator {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .text-display,
  .hero-headline {
    font-size: 60px;
  }

  .text-h1,
  .page-hero__title {
    font-size: 44px;
  }

  .text-h2 {
    font-size: 30px;
  }

  .hero-stats {
    display: none;
  }

  .section-pad {
    padding-block: 100px;
  }

  /* Catalog bento — 2 column */
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .catalog-tile--illuminazione { grid-column: span 2; grid-row: auto; height: 320px; }
  .catalog-tile--audio         { grid-column: span 1; grid-row: auto; height: 220px; }
  .catalog-tile--video         { grid-column: span 1; grid-row: auto; height: 220px; }
  .catalog-tile--fondali       { grid-column: span 1; grid-row: auto; height: 220px; }
  .catalog-tile--altro         { grid-column: span 1; grid-row: auto; height: 220px; }

  /* Works grid */
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }
  .work-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .work-item:nth-child(2),
  .work-item:nth-child(3),
  .work-item:nth-child(4),
  .work-item:nth-child(5),
  .work-item:nth-child(6),
  .work-item:nth-child(7) { grid-column: span 1; grid-row: span 1; }

  /* Process steps — 2 cols */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }

  .process-line-svg {
    display: none;
  }

  /* Testimonials */
  .testimonial-card {
    width: calc(80% - 12px);
  }

  /* Contact */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  /* Footer grid */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-wordmark {
    font-size: 120px;
    margin-bottom: 60px;
  }

  /* Catalog page layout */
  .catalog-page {
    flex-direction: column;
    gap: 32px;
    padding-top: 100px;
  }

  .filter-sidebar {
    position: static;
    width: 100%;
    min-width: unset;
  }

  .equipment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Packages */
  .packages-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   30. RESPONSIVE — 768px (Small breakpoint)
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --grid-gutter: 16px;
  }

  .text-display,
  .hero-headline {
    font-size: 44px;
    letter-spacing: -0.01em;
  }

  .text-h1,
  .page-hero__title {
    font-size: 36px;
  }

  .text-h2 {
    font-size: 26px;
  }

  .text-h3 {
    font-size: 22px;
  }

  .text-price {
    font-size: 42px;
  }

  .card-package-price {
    font-size: 42px;
  }

  .section-pad {
    padding-block: 80px;
  }

  /* Hero adjustments */
  .hero-subtitle {
    font-size: 16px;
    max-width: 100%;
  }

  .hero-content {
    padding-bottom: 60px;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Advantages: 1 col */
  .advantages-grid {
    grid-template-columns: 1fr;
  }

  /* Catalog bento: 1 col */
  .catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-tile--illuminazione,
  .catalog-tile--audio,
  .catalog-tile--video,
  .catalog-tile--fondali,
  .catalog-tile--altro {
    grid-column: span 1;
    height: 260px;
  }

  /* Packages: 1 col */
  .packages-grid {
    grid-template-columns: 1fr;
  }

  /* Works: 1 col */
  .works-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .work-item:nth-child(1)  { grid-column: span 1; grid-row: span 1; }

  /* Works magazine */
  .works-magazine-grid,
  .works-magazine-grid .work-item {
    grid-column: span 1;
    aspect-ratio: 4/3;
  }

  .works-magazine-grid {
    grid-template-columns: 1fr;
  }

  /* Process: 1 col */
  .process-steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .step-number {
    font-size: 100px;
  }

  /* Testimonials: 1 card */
  .testimonial-card {
    width: calc(90vw - 48px);
    padding: 32px;
  }

  .quote-text {
    font-size: 18px;
  }

  .quote-mark {
    font-size: 72px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .footer-wordmark {
    font-size: 80px;
    margin-bottom: 48px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer-legal-links {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Contact info heading */
  .contact-info-heading {
    font-size: 36px;
  }

  /* Equipment grid: 1 col */
  .equipment-grid {
    grid-template-columns: 1fr;
  }

  /* Cookie banner */
  .cookie-banner {
    bottom: 0;
    right: 0;
    left: 0;
    max-width: 100%;
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  /* Legal */
  .legal-content h1 {
    font-size: 36px;
  }

  .legal-data-table th {
    width: 140px;
  }

  /* Page hero */
  .page-hero {
    height: 40vh;
    min-height: 300px;
  }

  /* Testimonials header */
  .testimonials-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

/* ==========================================================================
   31. RESPONSIVE — 576px (Extra small)
   ========================================================================== */

@media (max-width: 576px) {
  :root {
    --container-pad: 20px;
  }

  .text-display,
  .hero-headline {
    font-size: 36px;
  }

  .page-hero__title {
    font-size: 30px;
  }

  .hero-timecode {
    display: none;
  }

  .btn {
    padding: 12px 22px;
    font-size: 11px;
  }

  .card-advantage {
    padding: 28px 24px;
  }

  .card-package {
    padding: 28px 24px;
  }

  .card-package-price {
    font-size: 36px;
  }

  .contact-info-heading {
    font-size: 30px;
  }

  .testimonial-card {
    padding: 28px 24px;
    width: 88vw;
  }

  .footer-wordmark {
    font-size: 60px;
    -webkit-text-stroke-width: 0.5px;
  }

  .site-footer {
    padding-top: 80px;
  }

  .filter-sidebar {
    padding: 24px;
  }

  .catalog-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .works-filter-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .works-filter-tabs::-webkit-scrollbar {
    display: none;
  }

  .section-intro {
    margin-bottom: 48px;
  }

  /* Advantage card icons */
  .card-advantage-icon {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .card-advantage-icon svg {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   32. PRINT STYLES
   ========================================================================== */

@media print {
  body::before,
  .site-header,
  .mobile-nav,
  .custom-cursor,
  .custom-cursor-dot,
  .cookie-banner,
  .hero-timecode {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .hero {
    height: auto;
    padding: 48px 0;
  }

  .hero-bg,
  .hero-overlay {
    display: none;
  }
}

/* ==========================================================================
   33. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-fade-up,
  .animate-scale-in,
  .animate-stagger > *,
  .word-reveal span {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-underline path,
  .hero-underline line {
    stroke-dashoffset: 0;
    animation: none;
  }

  .onair-dot {
    animation: none;
  }
}

/* ==========================================================================
   34. HIGH CONTRAST MODE
   ========================================================================== */

@media (forced-colors: active) {
  .btn-primary {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .onair-dot {
    forced-color-adjust: none;
    background: Mark;
  }

  .site-header {
    border-bottom: 1px solid ButtonText;
  }
}

/* ============================================================
   SUPPLEMENTAL STYLES — Page-specific & missing components
   ============================================================ */

/* Section surface variant */
.section--surface {
    background: var(--color-surface);
}

/* ── Legal Pages ── */
.legal-main {
    padding-top: 80px; /* below fixed header */
}

.legal-hero {
    padding: 80px 0 60px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}

.legal-hero .section-label {
    margin-bottom: 16px;
}

/* ── Page Hero (inner pages compact) ── */
.page-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 60px;
    padding-top: 140px;
}

.page-hero-content .section-label {
    margin-bottom: 16px;
    display: block;
}

.page-hero .hero-subtitle {
    margin-top: 20px;
    max-width: 480px;
}

/* ── Works Pages ── */
.works-filter-bar {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    position: sticky;
    top: 72px;
    z-index: 50;
    padding: 0;
}

.filter-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 20px 24px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 200ms, border-color 200ms;
    flex-shrink: 0;
}

.filter-btn:hover {
    color: var(--color-text);
}

.filter-btn.active {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.works-archive {
    min-height: 60vh;
}

.works-grid-full {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.works-grid-full .work-item {
    grid-column: span 4;
    min-height: 320px;
}

.works-grid-full .work-item--wide {
    grid-column: span 8;
    min-height: 380px;
}

.work-desc-hover {
    margin-top: 8px;
    color: var(--color-muted);
    line-height: 1.5;
}

.cta-collab {
    max-width: 640px;
}

/* ── Come Funziona — Process Extended ── */
.process-steps--detailed {
    display: flex;
    flex-direction: column;
    gap: 64px;
    margin-top: 64px;
    position: relative;
}

.process-steps--detailed::before {
    content: '';
    position: absolute;
    left: 48px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, var(--color-border), transparent);
}

.process-step-detailed {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 48px;
    align-items: start;
}

.process-step-num {
    position: relative;
}

.step-number-large {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-border);
    display: block;
    user-select: none;
}

.process-step-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 22px;
    color: var(--color-text);
    margin-bottom: 16px;
}

.process-step-desc {
    color: var(--color-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}

.process-step-details {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.process-step-details li {
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-muted);
    padding-left: 20px;
    position: relative;
}

.process-step-details li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.payment-item {
    padding: 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.payment-icon {
    display: block;
    margin-bottom: 20px;
}

.payment-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 12px;
}

/* ── Contact Page Specific ── */
.contact-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 0;
}

.contact-mode-card {
    display: flex;
    flex-direction: column;
    padding: 40px 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: border-color 300ms, transform 300ms;
}

.contact-mode-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
}

.contact-mode-icon {
    margin-bottom: 24px;
}

.contact-mode-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 12px;
}

.contact-mode-cta {
    margin-top: auto;
    padding-top: 24px;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.contact-items-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
}

.contact-responsabile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    margin-top: 40px;
}

.responsabile-avatar {
    width: 48px;
    height: 48px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-accent);
    flex-shrink: 0;
}

.responsabile-name {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 4px;
}

.responsabile-role {
    color: var(--color-muted);
    font-size: 13px;
}

.responsabile-email {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 13px;
}

.map-placeholder {
    margin-top: 32px;
    height: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-placeholder-inner {
    text-align: center;
}

/* ── Packages Page Specific ── */
.packages-intro {
    text-align: center;
    margin-bottom: 0;
}

.package-detail {
    border-top: 1px solid var(--color-border);
}

.package-detail--alt {
    background: var(--color-surface);
}

.package-detail-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: start;
}

.package-detail-info {
    position: sticky;
    top: 96px;
}

.package-detail-header {
    margin-bottom: 32px;
}

.package-detail-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    margin: 8px 0 8px;
}

.package-detail-tagline {
    font-size: 15px;
    color: var(--color-muted);
    font-style: italic;
}

.package-detail-price-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
}

.package-price-large {
    font-family: var(--font-mono);
    font-size: 64px;
    font-weight: 500;
    line-height: 1;
}

.package-scenarios {
    margin-bottom: 32px;
}

.scenario-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scenario-tag {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.badge-recommended {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-bg);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    margin-bottom: 8px;
}

.package-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.package-features-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: 40px;
}

.package-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.package-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
}

.package-feature-item .feature-check {
    flex-shrink: 0;
    margin-top: 2px;
}

.package-faq .faq-item {
    border-top: none;
    border-bottom: 1px solid var(--color-border);
}

.custom-package-inner {
    max-width: 720px;
}

.custom-package-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 64px;
    padding-top: 64px;
    border-top: 1px solid var(--color-border);
}

.custom-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Catalog Page Layout ── */
.catalog-section {
    padding-top: 64px;
}

.catalog-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 64px;
    align-items: start;
}

.equipment-section {
    min-width: 0;
}

.equipment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
}

.sort-select {
    background: transparent;
    border: none;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    outline: none;
    padding: 4px 8px;
}

.sort-select option {
    background: var(--color-surface);
    color: var(--color-text);
}

.filter-divider {
    height: 1px;
    background: var(--color-border);
    margin: 24px 0;
}

.filter-group-title {
    color: var(--color-muted);
    margin-bottom: 16px;
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.filter-cta-box {
    padding: 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    margin-top: 24px;
}

.equipment-count {
    color: var(--color-muted);
}

.equipment-cat-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(11,11,13,0.85);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 4px 8px;
}

.quote-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    padding: 0;
    width: auto;
    max-width: 600px;
}

.quote-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 16px 24px;
}

.advice-section {}

.advice-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.advice-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    margin-top: 0;
    align-self: center;
}

/* ── Btn ghost ── */
.btn-ghost {
    background: transparent;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 14px 28px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: border-color 200ms, color 200ms;
}

.btn-ghost:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

/* ── Added classes referenced in html ── */
.contact-email,
.mobile-email {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 14px;
}

.mobile-phone {
    display: block;
    font-size: 20px;
    color: var(--color-text);
    text-decoration: none;
    margin-bottom: 8px;
}

.footer-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--color-border);
    color: var(--color-muted);
    padding: 2px 6px;
    vertical-align: middle;
    margin-left: 4px;
}

.footer-link--whatsapp {
    color: #25D366 !important;
}

.link-muted {
    color: var(--color-muted);
    text-decoration: none;
}

.link-muted:hover {
    color: var(--color-text);
}

/* ── Responsive additions ── */
@media (max-width: 1200px) {
    .package-detail-grid {
        grid-template-columns: 320px 1fr;
        gap: 48px;
    }
    .package-detail-info {
        position: static;
    }
    .custom-package-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-modes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .catalog-layout {
        grid-template-columns: 1fr;
    }
    .filter-sidebar {
        position: static;
    }
    .filter-sidebar-inner {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .process-steps--detailed {
        gap: 40px;
    }
    .process-steps--detailed::before {
        display: none;
    }
    .process-step-detailed {
        grid-template-columns: 80px 1fr;
        gap: 24px;
    }
    .step-number-large {
        font-size: 64px;
    }
    .package-detail-grid {
        grid-template-columns: 1fr;
    }
    .payment-grid {
        grid-template-columns: 1fr;
    }
    .works-grid-full .work-item {
        grid-column: span 6;
    }
    .works-grid-full .work-item--wide {
        grid-column: span 12;
    }
    .advice-inner {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .page-hero-content {
        padding-top: 100px;
        padding-bottom: 40px;
    }
    .works-grid-full .work-item,
    .works-grid-full .work-item--wide {
        grid-column: span 12;
        min-height: 260px;
    }
    .works-filter-bar {
        top: 64px;
    }
    .contact-modes {
        grid-template-columns: 1fr;
    }
    .package-detail-name {
        font-size: 40px;
    }
    .package-price-large {
        font-size: 48px;
    }
    .custom-package-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .process-step-detailed {
        grid-template-columns: 1fr;
    }
    .process-step-num {
        display: none;
    }
    .filter-sidebar-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .legal-hero {
        padding: 60px 0 40px;
    }
    .contact-mode-card {
        padding: 24px;
    }
    .package-features-card {
        padding: 24px;
    }
    .custom-package-stats {
        grid-template-columns: 1fr 1fr;
    }
    .advice-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .quote-bar {
        left: 16px;
        right: 16px;
        transform: none;
        max-width: none;
        bottom: 16px;
    }
}

/* ==========================================================================
   MISSING CLASS PATCH — Legal sections, FAQ, buttons, form elements
   ========================================================================== */

/* Legal sections — used in condizioni-generali, note-legali, privacy, cookie */
.legal-section {
    padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
}
.legal-section:last-child {
    border-bottom: none;
    padding-bottom: 80px;
}
.legal-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.legal-section p {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.75;
    color: var(--color-muted);
    margin-bottom: 16px;
}
.legal-section p:last-child {
    margin-bottom: 0;
}
.legal-section ul,
.legal-section ol {
    margin: 16px 0 16px 24px;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.75;
}
.legal-section li {
    margin-bottom: 8px;
}
.legal-section strong {
    color: var(--color-text);
    font-weight: 500;
}

/* FAQ category title — used in come-funziona.php */
.faq-category-title {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-top: 64px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

/* Button size variants */
.btn-sm {
    padding: 10px 20px;
    font-size: 10px;
    letter-spacing: 0.12em;
}
.btn-sm .btn-arrow {
    font-size: 12px;
}

/* Form group container */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

/* Form element aliases — PHP templates use these class names */
.form-textarea {
    resize: vertical;
    min-height: 120px;
    padding-top: 20px;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpolyline points='64,96 128,160 192,96' stroke='%238A8A8E' stroke-width='16' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

/* Checkbox styles for GDPR consent */
.form-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: transparent;
    margin-top: 2px;
}

.form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.form-checkbox-text {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-muted);
}

.form-checkbox-text a.form-link {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 200ms;
}
.form-checkbox-text a.form-link:hover {
    text-decoration-color: var(--color-accent);
}

@media (max-width: 768px) {
    .legal-section {
        padding: 36px 0;
    }
    .legal-section h2 {
        font-size: 1.125rem;
    }
    .faq-category-title {
        margin-top: 48px;
    }
}