/* VEIO / editorial light — 17 September 2026 */
:root {
  color-scheme: light;
  --ink:#fff; --ink-soft:#f6f6f3; --panel:#fff; --panel-2:#eeefeb;
  --ivory:#171b18; --paper:#313932; --mist:#536057; --muted:#657067;
  --copper:#764329; --gold:#805031; --gold-light:#764329; --green:#183e31;
  --line:rgba(23,27,24,.17); --line-soft:rgba(23,27,24,.1); --line-gold:rgba(118,67,41,.36);
  --display:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:"Avenir Next","Segoe UI",Arial,sans-serif;
}
html,body { background:#fff; color:var(--ivory); }
body::before { display:none; }
.system-copy .mockup-note { font-size:.85rem; line-height:1.5; color:#617067; margin-top:1.6rem; }
::selection { background:#e5ded3; color:#17291f; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #295d48; outline-offset:5px; }
[id] { scroll-margin-top:100px; }
header,header.scrolled { background:rgba(255,255,255,.96); border-color:var(--line); backdrop-filter:blur(12px); }
.brand { font-size:.875rem; letter-spacing:.09em; }
.brand-mark { background:#fff; border:0; }
nav a { color:#424c44; font-size:.875rem; letter-spacing:0; text-transform:none; }
.nav-cta { border-color:#243b2d; border-radius:4px; }
.menu-button { background:#fff; color:#171b18; }
.button { font-size:.9rem; text-transform:none; letter-spacing:0; font-weight:600; border-radius:4px; }
.button.primary { background:#183e31; border-color:#183e31; color:#fff; }
.button.primary:hover { background:#24573f; border-color:#24573f; }
.button.secondary:hover { background:#f0f3ee; border-color:#31543e; }
main section { padding-block:clamp(4rem,7vw,7.5rem); }
.hero { min-height:0; padding-top:calc(var(--header) + 4rem); padding-bottom:4.5rem; overflow:visible; }
.hero-grid { grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr); align-items:center; gap:clamp(2rem,5vw,6rem); }
.hero-copy { padding-top:0; }
.eyebrow { color:#566459; font-size:.8rem; text-transform:none; font-weight:500; letter-spacing:.015em; margin-bottom:1.5rem; }
.eyebrow::before { width:24px; background:#536e5d; }
h1 { max-width:12ch; font-size:clamp(3.2rem,5.8vw,6.6rem); line-height:1.02; letter-spacing:-.045em; }
h2 { font-size:clamp(2.7rem,4.9vw,5.2rem); line-height:1.04; letter-spacing:-.035em; }
h1 em,h2 em { color:#764329; }
.hero-lede { color:#536057; max-width:44ch; font-size:1.1rem; line-height:1.65; margin-top:1.6rem; }
.hero-lede strong { font-weight:500; color:#23372b; }
.hero-actions { margin-top:1.8rem; }
.hero-footnote { margin:1.4rem 0 0; color:#657067; font-size:.875rem; }
.hero-visual { margin:0; min-width:0; perspective:1400px; }
.hero-image-frame { overflow:hidden; border-radius:3px 3px 80px 3px; transform:rotateY(-5deg); box-shadow:0 26px 60px rgba(16,39,27,.14); transition:transform .5s; }
.hero-image-frame img { width:100%; height:auto; aspect-ratio:1672/941; object-fit:contain; }
.hero-visual:hover .hero-image-frame { transform:rotateY(0); }
@supports (animation-timeline:scroll()) {
  @media (min-width:901px) and (prefers-reduced-motion:no-preference) {
    .hero-image-frame { animation:hero-perspective linear both; animation-timeline:scroll(); animation-range:0px 650px; }
    @keyframes hero-perspective { from { transform:perspective(1400px) rotateY(-5deg) translateY(0); } to { transform:perspective(1400px) rotateY(3deg) translateY(25px); } }
  }
}
.hero-visual figcaption { display:flex; justify-content:space-between; gap:1rem; padding-top:1.25rem; font-size:.8rem; color:#617067; }
.scroll-cue { display:none; }
.ticker { background:#f4f5f2; }
.ticker-track { color:#4b5d50; animation:none; width:100%; flex-wrap:wrap; justify-content:center; gap:1rem 2rem; padding-inline:1rem; }
.ticker-track span { font-size:.8rem; letter-spacing:.04em; }
.ticker-track span:nth-child(n+7) { display:none; }
.ticker-track span::after { color:#7c5940; }
.proof-strip { padding-block:0; }
.proof-grid { grid-template-columns:1.1fr repeat(3,1fr); }
.proof-intro,.proof-item { padding:1.6rem; min-height:135px; }
.proof-intro { font-size:1.8rem; }
.proof-item strong { font-size:2.4rem; color:#213f2e; }
.proof-item span { font-size:.875rem; }
.section-index { font-size:.8rem; font-weight:500; letter-spacing:.03em; text-transform:none; }
.section-copy { font-size:1.0625rem; }
.solutions { background:#fff; }
.lane-tabs { gap:.5rem; padding:0; background:transparent; }
.lane-tab { min-height:60px; border:1px solid #d6ddd5; background:#fff; color:#4e5b52; font-size:.9rem; letter-spacing:0; text-transform:none; border-radius:5px; }
.lane-tab[aria-selected="true"] { background:#183e31; color:#fff; }
.lane-tab:hover { color:#17291f; background:#edf2ec; }
.lane-tab[aria-selected="true"]:hover { color:#fff; background:#24573f; }
.lane-panel { background:#fff; border:0; }
.lane-intro { grid-template-columns:.45fr 1fr; border:0; padding:1.6rem 0 2rem; }
.lane-intro span { font-size:.875rem; letter-spacing:.02em; }
.lane-intro p { font-size:clamp(1.5rem,2.1vw,2.3rem); line-height:1.25; }
.package-grid { gap:1.2rem; }
.package,.package:last-child { border:1px solid #dce2da; border-radius:8px; background:#fff; padding:clamp(1.1rem,1.8vw,2rem); min-height:0; }
.package:hover { background:#fff; box-shadow:0 14px 35px rgba(21,50,32,.08); transform:translateY(-3px); }
.package-code { font-size:.78rem; letter-spacing:.01em; text-transform:none; }
.package h3 { font-size:clamp(1.85rem,2.35vw,2.5rem); line-height:1.12; margin-top:.3rem; }
.package p,.package ul { color:#536057; font-size:1rem; line-height:1.5; }
.package-price { font-size:.875rem; }
.package-price strong { font-size:1.75rem; }
.scope-details { border-block:1px solid #dce2da; margin:0 0 1.4rem; padding:.8rem 0; }
.scope-details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:.7rem; color:#23412e; font-size:.9rem; font-weight:600; }
.scope-details summary::before { content:"+"; font-size:1.2rem; }
.scope-details[open] summary::before { content:"−"; }
.scope-details h4 { margin:1.3rem 0 .5rem; font-size:.9rem; color:#293c2e; }
.scope-details p,.scope-details ul { font-size:.9rem; margin-bottom:1rem; }
.package-visual { height:auto!important; aspect-ratio:4/3; margin:1rem 0 1.7rem; background:linear-gradient(140deg,#edf1ea,#e1e6df); border:1px solid #d6ddd3; box-shadow:none; border-radius:5px; perspective:1000px; }
.package-visual::before { opacity:.25; background-image:linear-gradient(#78907f22 1px,transparent 1px),linear-gradient(90deg,#78907f22 1px,transparent 1px); }
.package-visual::after { content:"Mockup dimostrativo"; color:#465c4b; font-size:.65rem; letter-spacing:0; right:8px; bottom:8px; }
.pv-orb { display:none; }
.pv-browser { top:12%; width:76%; height:auto!important; aspect-ratio:16/10; background:#1d3026; box-shadow:0 14px 24px #20372930; }
.pv-phone { width:25%; height:auto!important; aspect-ratio:390/844; right:6%; bottom:13%; box-shadow:0 12px 20px #20372933; }
.pv-title { line-height:1.05; font-size:clamp(.95rem,1.3vw,1.4rem); }
.pv-badge { box-shadow:0 8px 16px #20372922; }
.price-note { font-size:.875rem; color:#5c695f; line-height:1.6; margin-top:1.5rem; max-width:105ch; }
.scope-guide { margin-top:3rem; padding:2rem 0; border-block:1px solid #dce2da; }
.scope-guide h3 { font-family:var(--display); font-size:2rem; font-weight:400; }
.scope-guide > div { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.scope-guide p { font-size:1rem; color:#536057; margin:0; }
.scope-guide strong { display:block; color:#283e2e; margin-bottom:.5rem; }
.system { background:#f3f5f0; }
.system-list li { font-size:1rem; }
.system-list span { font-size:.875rem; }
.device-stage { min-height:0; aspect-ratio:6/5; }
.browser-mock { inset:5% auto auto 0; width:88%; height:auto; aspect-ratio:16/10; box-shadow:0 25px 50px #183e3126; }
.hotel-ui { height:calc(100% - 36px); }
.phone-mock { width:27%; aspect-ratio:390/844; right:2%; bottom:9%; box-shadow:0 20px 38px #183e3138; }
.hotel-copy { padding:6%; }
.hotel-copy h3 { font-size:clamp(2rem,3.1vw,3.6rem); line-height:.98; }
.hotel-copy p { font-size:.7rem; }
.reputation-card { width:34%; left:3%; bottom:8%; background:#fff; color:#183e31; box-shadow:0 16px 32px #183e3126; }
.rep-lines i { background:#d6ddd4; }
.capability-row h3 { line-height:1.06; }
.capability-row ul { font-size:1rem; }
.capability-number { font-size:.875rem; }
.work { background:#f7f8f5; }
.work-intro { margin-bottom:3rem; }
.work-intro p { font-size:1.1rem; max-width:65ch; }
.showroom-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; margin-bottom:5rem; }
.showroom-grid figure { margin:0; }
.showroom-grid a { display:block; background:#edf0e9; padding:clamp(1rem,3vw,3rem); border-radius:6px; }
.showroom-grid img { width:100%; height:clamp(310px,38vw,550px); object-fit:contain; filter:drop-shadow(0 16px 18px #1b2e1926); transition:transform .4s; }
.showroom-grid a:hover img { transform:translateY(-5px); }
.showroom-grid figcaption { display:flex; justify-content:space-between; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.showroom-grid strong { font-family:var(--display); font-size:1.5rem; font-weight:400; }
.showroom-grid span { font-size:.875rem; color:#657067; align-self:center; }
.case,.case:nth-child(even) { grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); min-height:0; gap:2.7rem; align-items:center; padding-block:3rem; border-color:#d6ddd3; }
.case:nth-child(even) .case-media { order:0; }
.case-media { display:block; min-height:0; aspect-ratio:1672/941; background:#edf0e9; border-radius:6px; }
.case-media img { width:100%; height:100%; object-fit:contain; object-position:center; transform:none!important; will-change:auto; }
.case-media::after { display:none; }
.case-copy { border:0; background:transparent; padding:0; min-height:0; }
.case-top span { font-size:.8rem; text-transform:none; letter-spacing:.03em; }
.case h3 { max-width:none; font-size:clamp(2.5rem,3.7vw,4rem); letter-spacing:-.03em; line-height:1.04; margin-bottom:1.2rem; }
.case-copy p { max-width:none; font-size:1rem; }
.case-scope { margin:1rem 0 1.4rem; font-size:.875rem; gap:.4rem; }
.case-scope li::after { content:none; }
.case-open { display:inline-flex; gap:2rem; min-height:44px; align-items:center; color:#183e31; text-underline-offset:6px; font-weight:600; }
.work-note { font-size:.875rem; line-height:1.6; }
.method { padding-top:5rem; }
.step h3 { line-height:1.1; }
.step p { font-size:1rem; }
.difference-box { border-color:#d7ddd2; }
.difference-copy,.difference-point { background:#fff; }
.difference-point p { color:#536057; font-size:1rem; }
.difference-point h3 { line-height:1.1; }
.contact,footer { background:#f1f4ee; color:#171b18; }
.contact-copy > p { color:#536057; }
.contact-note,.form-note,.form-status { font-size:.875rem; }
form { border:1px solid #cdd5c8; background:#fff; box-shadow:0 20px 45px #19331e0d; }
form .button { color:#fff; background:#183e31; border-color:#183e31; }
label { font-size:.875rem; text-transform:none; letter-spacing:0; }
input,select,textarea { border-radius:3px; background:#fff; }
.brief-output { font-size:.9rem; overflow-wrap:anywhere; }
.footer-brand,.footer-meta,footer small { font-size:.875rem; letter-spacing:.02em; }
.reveal { opacity:1; transform:none; }
.case-dialog { padding:0; width:min(1080px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); border:1px solid #dce2da; border-radius:10px; color:#171b18; background:white; overscroll-behavior:contain; }
.case-dialog::backdrop { background:rgba(15,30,21,.5); backdrop-filter:blur(5px); }
.dialog-bar { position:sticky; top:0; z-index:2; background:#fff; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 1.5rem; border-bottom:1px solid #dce2da; }
.dialog-bar button { min-width:44px; min-height:44px; border:1px solid #cdd5c8; border-radius:50%; background:#fff; font-size:1.5rem; cursor:pointer; }
.case-detail { padding:clamp(1.3rem,4vw,3rem); }
.case-detail h1,.case-detail h2 { max-width:none; font-size:clamp(2.2rem,5vw,4.5rem); line-height:1.07; margin:.8rem 0 1.5rem; }
.case-detail > img { width:100%; height:auto; object-fit:contain; margin-block:2rem; border-radius:5px; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem 3rem; margin-block:2.5rem; }
.detail-grid h2 { font-size:1.75rem; }
.detail-grid p,.detail-grid li { color:#536057; }
.detail-status { font-size:.875rem; color:#764329; }
.project-page { max-width:1100px; margin:0 auto; padding:2rem 1rem 5rem; }
.project-page > nav { position:static; display:flex; justify-content:space-between; padding:1rem 0; background:#fff; }
.project-page a { color:#183e31; }
.project-page p { line-height:1.65; }
.project-page{max-width:1440px;padding:2rem max(3.5vw,18px) 6rem}
.project-page .case-detail>h1{font-family:Georgia,"Palatino Linotype",serif;font-size:clamp(3.4rem,8vw,8rem);letter-spacing:-.04em;line-height:1.03;margin:3rem 0 2rem}
.project-page .case-detail>p{max-width:72ch;font-size:1.1rem}
.project-page .case-detail>img{margin:3rem 0;border-radius:0}
.project-page .detail-status,.case-detail h1 em,.case-detail h2 em{color:inherit;font-style:normal}
.project-page .detail-grid{gap:3rem 5rem;margin:4rem 0}
@media(max-width:1120px) { .proof-grid { grid-template-columns:repeat(3,1fr); }.proof-intro{grid-column:1/-1;min-height:0}.hero-grid{gap:2rem} }
@media(max-width:900px) {
  nav { background:#fff; }
  .hero-grid,.case,.case:nth-child(even) { grid-template-columns:1fr; }
  .hero { padding-top:calc(var(--header) + 2rem); }
  .hero-copy { padding-top:0; }.hero-visual{max-width:740px}
  h1{max-width:15ch;font-size:clamp(3rem,8vw,5.5rem)}
  .hero-image-frame { transform:none; }
  .package-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .package p,.package ul { font-size:.95rem; }
  .system-layout { gap:2rem; }
  .device-stage{max-width:760px;width:100%;margin:auto;aspect-ratio:6/5}
  .hotel-copy h3{font-size:clamp(2.5rem,7vw,5rem)}
  .case{gap:1.5rem}
}
@media(max-width:700px) {
  .shell{width:calc(100% - 2rem)} .hero{padding-bottom:3rem}
  h1{font-size:clamp(3rem,11.2vw,4.7rem);line-height:1.04}
  .hero-actions{display:flex}.hero-actions .button{width:auto;flex:1 1 180px}
  .hero-visual figcaption{font-size:.75rem;flex-wrap:wrap}
  .proof-grid{grid-template-columns:1fr}.proof-intro,.proof-item{min-height:110px}
  .proof-item strong{font-size:2.25rem}.proof-item span{max-width:none;margin-top:.6rem}
  .lane-tabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.lane-tab{min-width:0;padding:.8rem .5rem;min-height:64px}
  .lane-intro{grid-template-columns:1fr;gap:.6rem}
  .package-grid{grid-template-columns:1fr}.package{padding:1.4rem}
  .package-visual{max-width:440px;width:100%;align-self:center}
  .pv-title{font-size:1.55rem}.pv-phone{width:24%}
  .scope-guide > div,.detail-grid{grid-template-columns:1fr;gap:1.5rem}
  .showroom-grid{gap:1rem}.showroom-grid a{padding:.5rem}.showroom-grid img{height:260px}
  .showroom-grid figcaption{display:grid;gap:.2rem}.showroom-grid span{font-size:.8rem}
  .case h3{font-size:2.8rem}.case-media{min-height:0}.case-copy{min-height:0;padding:0}
  .device-stage{aspect-ratio:1.1}.phone-mock{width:30%;right:0;bottom:8%}.reputation-card{width:46%;bottom:6%;left:0}
  .browser-mock{width:94%;inset:4% auto auto 0;aspect-ratio:16/11}
  .hotel-ui{grid-template-columns:1fr}.hotel-copy p{font-size:.8rem;max-width:65%}.hotel-copy h3{font-size:2.7rem}
  .case-dialog{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:14px 14px 0 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-image-frame,.pv-browser,.pv-phone{transform:none!important}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Standalone project pages follow the same open, full-width presentation. */
.project-page{max-width:none;width:100%;padding-inline:0}
.project-page>nav,.project-page .case-detail>h1,.project-page .case-detail>p,.project-page .detail-grid,.project-page .case-detail>.case-open{width:min(1320px,calc(100% - 7vw));margin-inline:auto}
.project-page .case-detail>img{width:100%;height:auto;object-fit:contain;border-radius:0}
.project-page .case-detail>.case-open{display:flex}
@media(max-width:700px){.project-page>nav,.project-page .case-detail>h1,.project-page .case-detail>p,.project-page .detail-grid,.project-page .case-detail>.case-open{width:calc(100% - 36px)}.project-page .case-detail>h1{font-size:3.5rem}}