/* FDLabs: sito. Valori dal design system FDLabs Dark. */
@font-face { font-family: 'Archivo'; src: url('/assets/fonts/Archivo-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --absolute-black: #000000; --dark-iron: #181818; --charcoal: #202020; --graphite: #494949;
  --pure-white: #ffffff; --smoke: #f5f5f5; --ash: #7d7d7d; --steel: #969696;
  --accent-gold: #ffc000; --dark-gold: #917300; --teal-action: #1eaedb; --link-blue: #3860be;
  --overlay-black: rgba(0, 0, 0, 0.7);
  --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px;
  --radius-0: 0; --radius-2: 2px;
  --content-max: 1200px; --touch-target: 48px;
  --font-sans: Archivo, Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad-x: var(--space-40); --pad-y: var(--space-56);
}
@media (max-width: 1023px) { :root { --pad-y: var(--space-40); } }
@media (max-width: 575px) { :root { --pad-x: var(--space-24); --pad-y: var(--space-48); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--absolute-black); color: var(--pure-white); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pure-white); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--pure-white); color: var(--absolute-black); padding: var(--space-12) var(--space-16); z-index: 100; }
.skip:focus { left: var(--space-16); top: var(--space-16); }

/* Type */
.hero-display, .section-title, .feature-heading, .sub-section, .label, .caption, .nav-menu, .button-standard { text-transform: uppercase; }
.hero-display { font-size: 120px; line-height: 0.92; font-weight: 400; margin: 0; }
.section-title { font-size: 54px; line-height: 1.19; font-weight: 400; margin: 0; }
.sub-section { font-size: 40px; line-height: 1.15; font-weight: 400; margin: 0; }
.feature-heading { font-size: 27px; line-height: 1.37; font-weight: 400; margin: 0; }
.body-large { font-size: 18px; line-height: 1.56; }
.label { font-size: 12px; line-height: 1.83; letter-spacing: 0.96px; font-weight: 400; }
.caption { font-size: 14px; line-height: 1.14; letter-spacing: -0.42px; font-weight: 600; }
.nav-menu { font-size: 14px; font-weight: 400; }
@media (max-width: 1279px) { .hero-display { font-size: 80px; line-height: 1.13; } }
@media (max-width: 767px) { .hero-display { font-size: 54px; line-height: 1.19; } .section-title { font-size: 40px; line-height: 1.15; } }
@media (max-width: 575px) { .hero-display { font-size: 40px; line-height: 1.15; } .section-title { font-size: 32px; } .sub-section { font-size: 27px; line-height: 1.37; } .feature-heading { font-size: 22px; } }

/* Layout */
.wrap { max-width: calc(var(--content-max) + 2 * var(--pad-x)); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--pad-y) 0; border-bottom: 1px solid var(--charcoal); scroll-margin-top: 72px; }
.section-head { margin-bottom: var(--space-40); }
.muted { color: var(--ash); }
.soft { color: var(--smoke); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); border: 0; border-radius: var(--radius-0); font-family: var(--font-sans); text-decoration: none; cursor: pointer; }
.btn--accent { background: var(--accent-gold); color: var(--absolute-black); padding: var(--space-24); font-size: 16px; line-height: 1.5; }
.btn--accent:hover, .btn--accent:active { background: var(--dark-gold); }
.btn--ghost { background: none; color: var(--pure-white); border: 1px solid var(--pure-white); opacity: 0.5; padding: var(--space-16); font-size: 14.4px; line-height: 1; font-weight: 300; letter-spacing: 0.2px; }
.btn--ghost:hover { background: var(--teal-action); opacity: 0.7; }

/* Header */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 20; transition: background-color .2s; }
.site-header.is-solid { background: var(--absolute-black); }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--space-12) var(--pad-x); }
.menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--touch-target); padding: 0 var(--space-8) 0 0; background: none; border: 0; color: var(--pure-white); font-family: var(--font-sans); cursor: pointer; }
.menu-btn svg { display: block; }
.brand { justify-self: center; display: block; }
.brand img { height: 40px; width: auto; }
.langs { justify-self: end; display: flex; gap: var(--space-4); }
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: var(--touch-target); color: var(--ash); text-decoration: none; }
.langs a:hover { color: var(--pure-white); }
.langs a[aria-current="true"] { color: var(--pure-white); text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 575px) { .brand img { height: 32px; } .menu-btn .nav-menu { display: none; } .langs a { min-width: 32px; } }

/* Menu overlay */
.menu { position: fixed; inset: 0; z-index: 30; background: var(--absolute-black); display: flex; flex-direction: column; padding: var(--space-12) var(--pad-x) var(--pad-y); }
.menu[hidden] { display: none; }
.menu .close { align-self: flex-start; }
.menu ul { list-style: none; margin: auto 0; padding: 0; }
.menu li a { display: block; padding: var(--space-8) 0; text-decoration: none; color: var(--pure-white); }
.menu li a:hover { color: var(--smoke); text-decoration: underline; text-underline-offset: 8px; }
.menu .menu-langs { display: flex; gap: var(--space-16); }
.menu .menu-langs a { color: var(--ash); text-decoration: none; min-height: var(--touch-target); display: inline-flex; align-items: center; }
.menu .menu-langs a[aria-current="true"] { color: var(--pure-white); }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--absolute-black); }
.hero-media { position: absolute; inset: 0; background: var(--dark-iron); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--overlay-black), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, var(--overlay-black)); }
.hero-content { position: relative; padding: 96px var(--pad-x) var(--space-56); max-width: var(--content-max); }
.hero .label { color: var(--smoke); margin: 0 0 var(--space-16); }
.hero-lead { max-width: 640px; margin: var(--space-24) auto 0; color: var(--smoke); }
.hero-actions { margin-top: var(--space-32); display: flex; gap: var(--space-16); justify-content: center; flex-wrap: wrap; }
@media (max-width: 767px) { .hero-actions { flex-direction: column; align-items: stretch; } }

/* Studio */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-40); }
.split p { margin: 0 0 var(--space-20); }
.zones { margin-top: var(--space-48); padding-top: var(--space-40); border-top: 1px solid var(--charcoal); }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; gap: var(--space-24); } }

/* Services */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }
.tile { background: var(--charcoal); padding: var(--space-24); }
.tile h3 { margin: 0 0 var(--space-12); }
.tile p { margin: 0; color: var(--smoke); }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .grid-4 { grid-template-columns: 1fr; } }

.pro { margin-top: var(--space-16); background: var(--charcoal); padding: var(--space-32) var(--space-24); display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-24); align-items: start; }
.pro .label { margin: 0 0 var(--space-8); }
.pro h3 { margin: 0; }
.pro p { margin: 0 0 var(--space-24); color: var(--smoke); }
@media (max-width: 767px) { .pro { grid-template-columns: 1fr; } }

/* Method */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); }
.steps .num { display: block; font-size: 54px; line-height: 1; color: var(--ash); margin-bottom: var(--space-16); }
.steps h3 { margin: 0 0 var(--space-12); }
.steps p { margin: 0; color: var(--smoke); }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .steps { grid-template-columns: 1fr; } }

/* Work */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
.card { background: var(--charcoal); display: flex; flex-direction: column; }
.card-media { aspect-ratio: 16 / 9; background: var(--dark-iron); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); }
.card-body .caption { color: var(--steel); margin: 0; }
.card-body h3 { margin: 0; }
.card-body p { margin: 0; color: var(--smoke); }
@media (max-width: 1023px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .cards { grid-template-columns: 1fr; } }

/* Contact */
.contact { display: grid; grid-template-columns: 7fr 5fr; gap: var(--space-56); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }
.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field--full { grid-column: 1 / -1; }
.field .label { color: var(--smoke); }
.input { font: inherit; color: var(--pure-white); background: var(--absolute-black); border: 1px solid var(--ash); border-radius: var(--radius-2); padding: var(--space-12) var(--space-16); min-height: var(--touch-target); width: 100%; }
.input::placeholder { color: var(--steel); }
.input:focus { outline: none; border-color: var(--pure-white); box-shadow: 0 0 0 1px var(--pure-white); }
textarea.input { min-height: 160px; resize: vertical; }
.check { grid-column: 1 / -1; display: flex; gap: var(--space-12); align-items: flex-start; color: var(--smoke); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--pure-white); flex: none; }
.form .btn { grid-column: 1 / -1; justify-self: start; }
.hp { position: absolute; left: -9999px; }
.direct h3 { margin: 0 0 var(--space-24); }
.direct dl { margin: 0; }
.direct dt { color: var(--ash); }
.direct dd { margin: 0 0 var(--space-20); }
.direct a { text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.direct a:hover, .site-footer a:hover, .prose a:hover { color: var(--link-blue); }
@media (max-width: 1023px) { .contact { grid-template-columns: 1fr; gap: var(--space-48); } }
@media (max-width: 575px) { .form { grid-template-columns: 1fr; } .form .btn { justify-self: stretch; } }

/* Footer */
.site-footer { padding: var(--space-56) 0 var(--space-40); background: var(--dark-iron); }
.site-footer .wrap { display: grid; grid-template-columns: auto 1fr; gap: var(--space-56); align-items: start; }
.site-footer img { height: 72px; width: auto; }
.legal { font-size: 14px; line-height: 1.6; color: var(--steel); }
.legal p { margin: 0; }
.legal strong { color: var(--pure-white); font-weight: 400; }
.legal .links { margin-top: var(--space-16); }
@media (max-width: 767px) { .site-footer .wrap { grid-template-columns: 1fr; gap: var(--space-32); } }

/* Simple pages */
.page { padding: 128px 0 var(--pad-y); min-height: 70vh; }
.prose { max-width: 760px; }
.prose h2 { font-size: 22px; font-weight: 400; text-transform: uppercase; margin: var(--space-40) 0 var(--space-12); }
.prose p { margin: 0 0 var(--space-16); color: var(--smoke); }
.prose .muted { color: var(--ash); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }