/* RO.CA · sito pubblico «Colore»: blocchi di colore pieno come mani di vernice. Il visitatore sceglie
   una tinta RAL e la pagina si ridipinge con un colpo di rullo; titoli enormi, ritmo da poster. */
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/assets/fonts/unbounded-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/onest-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/assets/fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@property --paint { syntax: "<color>"; inherits: true; initial-value: oklch(0.55 0.215 27); }
@property --paint-ink { syntax: "<color>"; inherits: true; initial-value: oklch(0.99 0 0); }
@property --paint-soft { syntax: "<color>"; inherits: true; initial-value: oklch(0.95 0.03 27); }
html.repaint { transition: --paint 1.1s cubic-bezier(.7, 0, .2, 1), --paint-ink 1.1s cubic-bezier(.7, 0, .2, 1), --paint-soft 1.1s cubic-bezier(.7, 0, .2, 1); }
:root {
  --paint: oklch(0.55 0.215 27);       /* RAL 3020-like, changed by the swatch picker */
  --paint-ink: oklch(0.99 0 0);
  --paint-soft: oklch(0.95 0.03 27);
  --white: oklch(0.99 0.002 270);
  --paper: oklch(0.965 0.004 270);
  --ink: oklch(0.17 0.008 270);
  --ink-2: oklch(0.4 0.01 270);
  --ink-3: oklch(0.55 0.01 270);
  --line: oklch(0.88 0.006 270);
  --c-red: oklch(0.55 0.215 27);
  --c-yellow: oklch(0.86 0.17 92);
  --c-blue: oklch(0.48 0.15 245);
  --c-green: oklch(0.5 0.15 145);
  --c-orange: oklch(0.68 0.2 45);
  --ok: oklch(0.5 0.13 150);
  --warn: oklch(0.6 0.14 70);
  --bad: oklch(0.55 0.2 27);
  --display: "Unbounded", "Arial Black", sans-serif;
  --text: "Onest", system-ui, sans-serif;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
::selection { background: var(--paint); color: var(--paint-ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; margin: 0; text-wrap: balance; }
.u { text-transform: none; }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 600 16px/1 var(--text); padding: 18px 26px; border-radius: 0; border: 0; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate; transition: color .35s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary::before { background: var(--paint); }
.btn-primary:hover { color: var(--paint-ink); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-ghost::before { background: var(--ink); }
.btn-ghost:hover { color: var(--white); }
.on-paint .btn-primary { background: var(--paint-ink); color: var(--paint); }
.on-paint .btn-primary::before { background: var(--ink); }
.on-paint .btn-primary:hover { color: var(--white); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Header */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background .3s, color .3s, box-shadow .3s; color: var(--hdr-ink, var(--ink)); }
.hdr.solid { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 28px; height: 76px; }
.logo { display: inline-flex; align-items: baseline; font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -0.04em; position: relative; }
.logo i { display: inline-block; width: .3em; height: .3em; background: var(--paint); border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translateY(.02em); margin: 0 .06em; transition: background .5s; box-shadow: 0 0 0 2px var(--hdr-ring, transparent); }
.hdr:not(.solid) .logo i { background: var(--paint-ink); }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { font: 600 15px var(--text); padding: 10px 14px; position: relative; }
.nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr .btn { padding: 14px 20px; font-size: 15px; }
.hdr:not(.solid) .btn-primary { background: var(--paint-ink); color: var(--paint); }
.burger { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: var(--ink); color: var(--white); cursor: pointer; }
.burger svg { width: 22px; height: 22px; }
.mnav { display: none; }
@media (max-width: 1020px) {
  .nav, .hdr .btn { display: none; }
  .burger { display: inline-grid; place-items: center; }
  .mnav { display: grid; position: fixed; inset: 0; z-index: 49; background: var(--paint); color: var(--paint-ink); padding: calc(100px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 32px max(20px, env(safe-area-inset-left, 0px)); align-content: start; gap: 2px; clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--ease); }
  .mnav.open { clip-path: inset(0 0 0 0); }
  .mnav a { font-family: var(--display); font-size: 28px; font-weight: 800; padding: 8px 0; }
  .mnav a.sub { font-family: var(--text); font-size: 18px; font-weight: 600; padding-left: 14px; }
  .mnav .btn { margin-top: 18px; }
  .hdr.menu-open { color: var(--paint-ink); background: transparent; box-shadow: none; }
}

/* Hero */
.hero { position: relative; background: var(--paint); color: var(--paint-ink); padding: 130px 0 0; overflow: hidden; transition: background .01s; }
.wipe { position: absolute; inset: 0; z-index: 2; padding: inherit; pointer-events: none; overflow: hidden; background: var(--paint); color: var(--paint-ink); clip-path: inset(0 100% 0 0); visibility: hidden; }
.wipe.go { visibility: visible; }
.wipe *, .wipe *::before, .wipe *::after { animation: none !important; transition: none !important; }
.wipe-edge { position: absolute; top: 0; bottom: 0; left: 0; width: 28px; background: repeating-linear-gradient(180deg, oklch(1 0 0 / 0.28) 0 3px, transparent 3px 9px); box-shadow: 6px 0 14px oklch(0 0 0 / 0.12); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 40px; align-items: end; }
/* The cap keeps «Colore che» on one line in its column at any width. */
.hero h1 { font-size: clamp(3rem, 8.4vw, 7.6rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; }
/* The mask must not cut the descenders, like the g of «protegge». */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .line > span { display: inline-block; animation: lineUp 1s var(--out) both; animation-delay: calc(var(--i) * 110ms + 100ms); }
@keyframes lineUp { from { transform: translateY(105%); } }
.hero-lede { font-size: 19px; max-width: 44ch; margin: 28px 0 0; }
.hero-ppg { display: flex; align-items: center; gap: 16px; margin: 24px 0 0; max-width: 40ch; font-weight: 600; font-size: 16px; line-height: 1.35; }
/* The mark always sits on white, as it is: never on the coat. */
.ppg-chip { flex: none; background: var(--white); padding: 8px 10px; }
.ppg-chip img { height: 42px; width: auto; }
.hero-side { display: grid; gap: 20px; padding-bottom: 8px; }
.frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; transform: rotate(3deg); box-shadow: 18px 18px 0 oklch(0.17 0.008 270 / 0.9); max-width: 100%; }
.frame img { width: 100%; height: 100%; object-fit: cover; animation: reveal 1.2s var(--ease) .3s both; }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); transform: scale(1.15); } }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatches span { font-size: 14px; font-weight: 600; margin-right: 6px; }
.sw { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 -6px 0 oklch(0 0 0 / 0.15), 0 0 0 3px var(--paint-ink); transition: transform .3s var(--out); position: relative; }
.sw:hover { transform: translateY(-3px) scale(1.06); }
.sw[aria-pressed="true"]::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--paint-ink); }
.sw-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.sw-name { font-size: 13px; font-weight: 600; min-width: 14ch; }
.sw-auto { font: 600 13px var(--text); color: inherit; background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sw-auto:hover { text-decoration-thickness: 3px; }
.hero-bar { position: relative; z-index: 1; margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 0; border-top: 2px solid currentColor; }
.callme { display: flex; flex-wrap: wrap; gap: 0; }
.callme input { font: 600 16px var(--text); padding: 16px 18px; border: 2px solid var(--paint-ink); background: transparent; color: var(--paint-ink); min-width: 0; width: 260px; max-width: 100%; }
.callme input::placeholder { color: inherit; opacity: .7; }
.callme input:focus { outline: none; background: oklch(1 0 0 / 0.12); }
.callme .form-msg { flex-basis: 100%; margin-top: 8px; color: inherit !important; }
.hero-acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; } .hero h1 { font-size: clamp(2.2rem, 12.4vw, 7.6rem); } .hero-side { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); align-items: center; gap: 16px 32px; } .frame { grid-row: span 2; } .hero-bar { grid-template-columns: 1fr; } }

/* Ticker */
.ticker { position: relative; display: flex; background: var(--ink); color: var(--white); overflow: hidden; padding: 22px 0; }
.ticker-run { flex: none; display: flex; gap: 40px; padding-right: 40px; animation: tick 34s linear infinite; }
.ticker:hover .ticker-run, .ticker:focus-within .ticker-run, .ticker.paused .ticker-run { animation-play-state: paused; }
.ticker-run > span { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -0.02em; white-space: nowrap; display: inline-flex; align-items: center; gap: 40px; }
.ticker-pause { position: absolute; right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); font: 700 13px var(--text); padding: 8px 12px; background: var(--white); color: var(--ink); border: 0; cursor: pointer; }
.ticker-run > span::after { content: ""; width: .55em; height: .55em; background: var(--paint); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transition: background .5s; }
@keyframes tick { to { transform: translateX(-100%); } }

/* Sections */
.sec { padding-block: clamp(80px, 11vw, 160px); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); gap: 32px; align-items: end; margin-bottom: 52px; }
.sec-head h2 { font-size: clamp(2.2rem, 5.4vw, 5rem); }
.sec-head p { margin: 0; color: var(--ink-2); justify-self: end; max-width: 40ch; }
@media (max-width: 800px) { .sec-head { grid-template-columns: 1fr; } .sec-head p { justify-self: start; } }
.js-reveal .reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--out), transform 1s var(--out); transition-delay: calc(var(--d, 0) * 90ms); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* Sectors: a colour chart. All five stand side by side when they fit; on smaller screens they scroll. */
.rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; cursor: grab; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail.drag { cursor: grabbing; scroll-snap-type: none; }
.rail.drag a { pointer-events: none; }
.scard { flex: 0 0 min(400px, 80vw); scroll-snap-align: start; background: var(--sc); color: var(--sci, var(--white)); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.scard .ph { aspect-ratio: 4 / 5; overflow: hidden; }
.scard .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--out); }
.scard:hover .ph img { transform: scale(1.06); }
.scard h3 { font-size: clamp(1.2rem, 1.55vw, 1.9rem); min-height: 2em; padding: 24px 22px 0; box-sizing: content-box; }
.scard p { padding: 0 22px; margin: 12px 0 0; flex: 1; font-size: 16px; line-height: 1.45; }
.scard .go { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; padding: 18px 22px 24px; }
.scard .go svg { width: 20px; height: 20px; transition: transform .4s var(--out); }
.scard:hover .go svg { transform: translateX(6px); }
.rail-hint { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; }
.rail-hint .arrows { display: flex; gap: 8px; }
.rail-hint button { width: 52px; height: 52px; border: 2px solid var(--ink); background: none; cursor: pointer; display: grid; place-items: center; color: var(--ink); transition: background .2s, color .2s; }
.rail-hint button:hover { background: var(--ink); color: var(--white); }
.rail-hint svg { width: 20px; height: 20px; }
.rail-progress { flex: 1; height: 3px; background: var(--line); position: relative; max-width: 360px; }
.rail-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); width: 20%; transition: left .2s; }
.rail-hint { padding-top: 16px; }
@media (min-width: 1100px) {
  .rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; cursor: auto; scroll-snap-type: none; }
  .rail-hint { display: none; }
}
@media (max-width: 1099px) { .scard h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); } }

/* Statement */
.statement { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 4.4rem); letter-spacing: -0.035em; line-height: 1.08; max-width: 22ch; margin: 0; }
.statement .p1 { color: var(--c-blue); } .statement .p2 { color: var(--c-green); } .statement .p3 { color: var(--paint); transition: color .5s; }
.rename { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 40px; font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.4rem); }
.rename s { color: var(--ink-3); text-decoration-thickness: 4px; text-decoration-color: var(--paint); }
.rename .new { background: var(--paint); color: var(--paint-ink); padding: 6px 16px; transition: background .5s, color .5s; }
.statement-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 48px; align-items: end; }
.statement-row p { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .statement-row { grid-template-columns: 1fr; } }

/* Color-block numbers, with the PPG mark in the widest block */
.blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.blk { padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 36px); min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; background: var(--bc); color: var(--bci, var(--white)); }
.blk b { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.8rem); font-weight: 900; letter-spacing: -0.04em; line-height: .9; font-variant-numeric: tabular-nums; }
.blk b small { font-size: max(.4em, 15px); letter-spacing: 0; margin-left: 6px; }
.blk span { font-weight: 600; max-width: 20ch; }
.blk-ppg { gap: 28px; border-block: 2px solid var(--ink); }
.blk-ppg img { height: clamp(64px, 6vw, 92px); width: auto; align-self: flex-start; }
.blk-ppg strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 1.7vw, 1.6rem); letter-spacing: -0.025em; line-height: 1.12; max-width: 26ch; text-wrap: balance; }
.blk-ppg span { display: block; max-width: 52ch; margin-top: 12px; font-weight: 500; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 900px) {
  .blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blk { min-height: 200px; }
  .blk-ppg { order: -1; grid-column: 1 / -1; }
  .blk:last-child { grid-column: 1 / -1; }
}
@media (max-width: 400px) { .blocks { grid-template-columns: minmax(0, 1fr); } .blk { min-height: 150px; gap: 20px; } }

/* Job-site photos, large and in plain frames: the caption goes under the photo, never on it. */
.works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px) clamp(12px, 1.4vw, 20px); }
.work { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.work .pic { flex: 1; min-height: 0; overflow: hidden; background: var(--paper); }
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.work:hover img { transform: scale(1.03); }
.work figcaption { margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.w-main { grid-column: 1 / 9; grid-row: 1; }
.w-main .pic { aspect-ratio: 16 / 9; }
.w-tall { grid-column: 9 / -1; grid-row: 1 / 3; }
.w-tall .pic { position: relative; }
.w-tall img { position: absolute; inset: 0; }
.w-a { grid-column: 1 / 5; grid-row: 2; }
.w-b { grid-column: 5 / 9; grid-row: 2; }
.w-a .pic, .w-b .pic { aspect-ratio: 4 / 3; }
@media (max-width: 800px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-main, .w-tall { grid-column: 1 / -1; grid-row: auto; }
  .w-a, .w-b { grid-column: auto; grid-row: auto; }
  .w-tall .pic { aspect-ratio: 4 / 5; flex: none; }
}

/* Services: rows painted on hover */
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.svc-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 13rem; gap: 32px; align-items: center; padding: 30px 20px; border-bottom: 2px solid var(--ink); background: linear-gradient(var(--paint), var(--paint)) no-repeat left / 0% 100%; transition: background-size .6s var(--ease), color .4s; }
.svc-row:hover { background-size: 100% 100%; color: var(--paint-ink); }
.svc-row h3 { font-size: clamp(1.4rem, 2.6vw, 2.3rem); }
.svc-row p { margin: 0; opacity: .85; }
.svc-row .ref { font-weight: 700; font-size: 14px; text-align: right; }
@media (max-width: 860px) { .svc-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 12px; } .svc-row .ref { text-align: left; } }

/* References */
.refs { background: var(--ink); color: var(--white); }
.refgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid oklch(1 0 0 / 0.2); border-left: 1px solid oklch(1 0 0 / 0.2); }
.refgrid span { display: grid; place-items: center; text-align: center; min-height: 130px; padding: 16px; border-right: 1px solid oklch(1 0 0 / 0.2); border-bottom: 1px solid oklch(1 0 0 / 0.2); font-family: var(--display); font-weight: 800; font-size: clamp(1rem, 1.8vw, 1.5rem); letter-spacing: -0.02em; transition: background .3s, color .3s; }
.refgrid span:hover { background: var(--paint); color: var(--paint-ink); }
.refs .sec-head p { color: oklch(0.8 0.006 270); }
.refs-cap { color: oklch(0.8 0.006 270); margin-top: 32px; max-width: 80ch; }
@media (max-width: 760px) { .refgrid { grid-template-columns: 1fr 1fr; } }

/* Client teaser */
.client { background: var(--paint); color: var(--paint-ink); transition: background .5s; }
.client .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; }
.client h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); }
.client p { font-size: 18px; margin: 20px 0 30px; max-width: 42ch; }
.ticket { background: var(--white); color: var(--ink); padding: 26px; box-shadow: 16px 16px 0 var(--ink); transform: rotate(-2deg); transition: transform .6s var(--out); }
.client:hover .ticket { transform: rotate(0); }
.ticket h3 { font-size: 1.1rem; margin-bottom: 14px; }
.t-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-top: 2px solid var(--ink); font-size: 15px; }
.t-row b { font-variant-numeric: tabular-nums; }
.t-row span:last-child { grid-column: 1 / -1; font-size: 13px; font-weight: 700; }
@media (max-width: 900px) { .client .wrap { grid-template-columns: 1fr; } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; }
.contact h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); }
.c-list { margin-top: 32px; border-top: 2px solid var(--ink); }
.c-item { padding: 16px 0; border-bottom: 2px solid var(--ink); display: grid; gap: 2px; }
.c-item small { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.c-item b { font-size: 18px; user-select: all; overflow-wrap: anywhere; }
.c-form, .s-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.c-form .full, .s-form .full { grid-column: 1 / -1; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .c-form, .s-form { grid-template-columns: 1fr; } }
.fld { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; }
.fld input, .fld select, .fld textarea { font: 500 16px var(--text); color: var(--ink); background: var(--paper); border: 0; border-bottom: 3px solid var(--ink); padding: 14px 14px; width: 100%; border-radius: 0; transition: background .2s, border-color .2s; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom-color: var(--paint); background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3); }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.chk input { width: 18px; height: 18px; accent-color: var(--ink); margin-top: 3px; flex: none; }
.form-msg { margin: 0; min-height: 1.4em; font-size: 15px; font-weight: 700; }
.form-msg[data-state="ok"] { color: var(--ok); }
.form-msg[data-state="error"] { color: var(--bad); }

/* Footer */
.ftr { background: var(--ink); color: oklch(0.8 0.006 270); padding-block: 72px 40px; }
.ftr .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.ftr .big { grid-column: 1 / -1; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 17vw, 15rem); letter-spacing: -0.04em; line-height: .8; color: var(--white); margin-bottom: 40px; }
.ftr .big i { display: inline-block; width: .26em; height: .26em; background: var(--paint); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); margin: 0 .04em; transition: background .5s; }
.ftr h4 { color: var(--white); margin: 0 0 14px; font-size: 15px; }
.ftr a, .ftr p { display: block; margin: 0 0 8px; font-size: 15px; overflow-wrap: anywhere; }
.ftr a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--paint); text-decoration-thickness: 3px; }
.ftr .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid oklch(1 0 0 / 0.16); padding-top: 24px; font-size: 13.5px; }
@media (max-width: 860px) { .ftr .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pagina settore ---------- */
#sector { --sector: var(--paint); }
/* The text sets the height of the opener and the photo fills it: a tall photo must not stretch the coat. */
.s-hero { --photo: 40%; position: relative; background: var(--sector); color: var(--sector-ink, var(--white)); overflow: hidden; }
.s-hero-in { min-height: clamp(520px, 66svh, 700px); display: flex; flex-direction: column; padding: 118px calc(var(--photo) + clamp(28px, 4vw, 64px)) 64px max(20px, calc((100vw - 1360px) / 2 + 20px)); }
.s-hero-text { container-type: inline-size; margin-top: auto; }
.s-hero-img { position: absolute; top: 76px; right: 0; bottom: 0; width: var(--photo); height: calc(100% - 76px); object-fit: cover; animation: reveal 1.1s var(--ease) both; }
.s-crumbs { display: flex; gap: 8px; font-weight: 600; font-size: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.s-crumbs a:hover { text-decoration: underline; }
/* Sized on its own column and on its longest word (--word, from build.mjs): it can never run under the photo. */
.s-title { font-size: min(6rem, calc(100cqi / (var(--word, 12) * 0.74))); font-weight: 900; letter-spacing: -0.04em; line-height: 1; animation: titleIn .8s var(--out) both; }
@keyframes titleIn { from { opacity: 0; transform: translateY(.14em); } }
.s-lead { font-size: 19.5px; max-width: 44ch; margin: 24px 0 32px; }
.s-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.s-actions .btn-primary { background: var(--white); color: var(--ink); }
.s-actions .btn-primary::before { background: var(--ink); }
.s-actions .btn-primary:hover { color: var(--white); }
.s-specs { margin: 0; background: var(--ink); color: var(--white); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0 max(20px, calc((100vw - 1360px) / 2 + 20px)); }
.s-specs div { padding: 26px 24px 28px 0; border-right: 1px solid oklch(1 0 0 / 0.16); margin-right: 24px; }
.s-specs div:last-child { border-right: 0; }
.s-specs dt { font-size: 13px; font-weight: 700; color: oklch(0.78 0.006 270); }
.s-specs dd { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: -0.02em; line-height: 1.25; }
.s-body { max-width: 1360px; margin: 0 auto; padding: 110px max(20px, env(safe-area-inset-right, 0px)) 80px max(20px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
.s-text p { font-size: 18px; color: var(--ink-2); margin: 0 0 18px; }
.s-text p:first-child { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.38; color: var(--ink); }
.s-products { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.s-product { display: grid; grid-template-columns: 18px 1fr; gap: 16px; padding: 26px 16px; border-bottom: 2px solid var(--ink); background: linear-gradient(var(--sector), var(--sector)) no-repeat left / 0% 100%; transition: background-size .6s var(--ease), color .4s; }
.s-product:hover { background-size: 100% 100%; color: var(--white); }
.s-pn { width: 14px; height: 14px; margin-top: 6px; background: var(--sector); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.s-product:hover .s-pn { background: var(--sector-ink, var(--white)); }
.s-product h2 { font-size: 1.35rem; }
.s-product p { margin: 6px 0 0; }
.s-product .s-spec { font-weight: 700; }
.s-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.s-gallery figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.s-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--out), filter .5s; filter: saturate(.85); }
.s-gallery figure:hover img { transform: scale(1.06); filter: none; }
.s-request { max-width: 1360px; margin: 0 auto; padding: 120px max(20px, env(safe-area-inset-right, 0px)) 90px max(20px, env(safe-area-inset-left, 0px)); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; }
.s-request h2 { font-size: clamp(2rem, 4.4vw, 4rem); }
.s-req-copy p { color: var(--ink-2); margin: 18px 0 0; }
.s-req-contacts { display: grid; gap: 4px; font-weight: 700; color: var(--ink) !important; user-select: all; }
.s-next { max-width: 1360px; margin: 0 auto 0; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 80px max(20px, env(safe-area-inset-left, 0px)); }
.s-others { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.s-others a { padding: 10px 16px; font-weight: 700; font-size: 14.5px; box-shadow: inset 0 0 0 2px var(--ink); }
.s-others a[aria-current] { background: var(--ink); color: var(--white); }
.s-next-link { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 44px; background: var(--ink); color: var(--white); position: relative; overflow: hidden; isolation: isolate; }
.s-next-link::before { content: ""; position: absolute; inset: 0; background: var(--paint); transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); z-index: -1; }
.s-next-link:hover::before { transform: scaleX(1); transform-origin: left; }
.s-next-link b { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 5vw, 4.6rem); letter-spacing: -0.04em; line-height: .95; text-align: right; }
@media (max-width: 900px) { .s-hero-in { min-height: 0; padding: 104px 20px 36px; } .s-hero-img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; } .s-crumbs { margin-bottom: 28px; } .s-specs div { border-right: 0; margin-right: 0; border-bottom: 1px solid oklch(1 0 0 / 0.16); padding: 18px 0; } .s-specs div:last-child { border-bottom: 0; } .s-body, .s-request { grid-template-columns: 1fr; gap: 36px; } .s-gallery { grid-template-columns: 1fr 1fr; } .s-next-link { flex-direction: column; align-items: start; } .s-next-link b { text-align: left; } }


/* Pagine di testo (privacy, 404) */
.page-text { max-width: 860px; margin: 0 auto; padding: 150px max(20px, env(safe-area-inset-right, 0px)) 90px max(20px, env(safe-area-inset-left, 0px)); }
.page-text h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin-bottom: 28px; }
.page-text h2 { font-size: 1.4rem; margin: 40px 0 12px; }
.page-text p, .page-text li { color: var(--ink-2); max-width: 70ch; }
.page-text .todo { background: var(--paint-soft); box-shadow: inset 4px 0 0 var(--paint); padding: 2px 6px; color: var(--ink); }
.hero-404 { min-height: 70vh; display: grid; align-content: center; gap: 24px; }
.hero-404 b { font-family: var(--display); font-weight: 900; font-size: clamp(6rem, 22vw, 16rem); line-height: .8; letter-spacing: -0.04em; color: var(--paint); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.callme .form-msg[data-state="error"], .callme .form-msg[data-state="ok"] { color: inherit; }
.s-hero picture, .s-hero picture img { display: contents; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }
.s-product h2 { line-height: 1.15; }

@media (max-width: 600px) {
  .hero { padding-top: 104px; }
  .hero-in { gap: 22px; }
  .hero-side { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px 18px; }
  .frame { grid-row: span 2; aspect-ratio: 4 / 5; box-shadow: 8px 8px 0 oklch(0.17 0.008 270 / 0.9); }
  .swatches { gap: 8px; }
  .swatches span { flex-basis: 100%; margin: 0 0 2px; }
  .sw { width: 34px; height: 34px; }
  .sw[aria-pressed="true"]::after { inset: -6px; }
  .hero-bar { margin-top: 28px; }
  .callme { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
  .callme input { width: 100%; }
  .callme .form-msg { grid-column: 1 / -1; }
  .ticker-pause { padding: 6px 10px; font-size: 12px; }
}