:root { --paper:#f7f5f0; --white:#fffefb; --ink:#1c1b18; --muted:#716e68; --line:#dcd8d0; --bronze:#8b6d4f; --clay:#b9684c; --forest:#28433c; --serif:"Cormorant Garamond", Georgia, serif; --sans:"Manrope", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } .skip-link { position:fixed; top:-100px; left:16px; z-index:20; padding:12px 16px; color:white; background:var(--ink); } .skip-link:focus { top:16px; }
.site-header { height:82px; max-width:1440px; margin:auto; padding:0 4.8vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid transparent; position:absolute; top:0; left:0; right:0; z-index:5; }
.wordmark { font-size:16px; letter-spacing:.12em; font-weight:700; } .wordmark span { color:var(--clay); }.desktop-nav { display:flex; gap:32px; font-size:12px; text-transform:uppercase; letter-spacing:.1em; }.desktop-nav a { position:relative; }.desktop-nav a:after { content:""; position:absolute; height:1px; background:var(--ink); bottom:-5px; left:0; width:0; transition:width .25s ease; }.desktop-nav a:hover:after { width:100%; }.header-link,.text-link { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; }.header-link span,.text-link span { font-size:18px; margin-left:7px; color:var(--clay); }
.hero { position:relative; overflow:hidden; min-height:900px; padding:177px 4.8vw 44px; max-width:1440px; margin:auto; }.hero-grid { position:absolute; inset:0 4.8vw; background:linear-gradient(90deg,transparent 33.3%,rgba(28,27,24,.07) 33.3%,rgba(28,27,24,.07) calc(33.3% + 1px),transparent calc(33.3% + 1px),transparent 66.6%,rgba(28,27,24,.07) 66.6%,rgba(28,27,24,.07) calc(66.6% + 1px),transparent calc(66.6% + 1px)); pointer-events:none; }.eyebrow,.kicker { position:relative; margin:0; color:var(--bronze); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.hero h1 { position:relative; z-index:1; max-width:1120px; margin:28px 0 0; font:600 clamp(4.2rem,8.7vw,8.9rem)/.86 var(--serif); letter-spacing:-.055em; }.hero h1 em { color:var(--clay); font-weight:500; }.hero-bottom { position:relative; z-index:2; max-width:348px; margin:55px 0 0 34%; }.hero-bottom p { margin:0; color:#55524c; font-size:15px; }.hero-bottom .button { margin-top:24px; }.button { border:0; min-height:52px; display:inline-flex; align-items:center; gap:28px; justify-content:center; padding:0 21px; font-size:12px; letter-spacing:.08em; font-weight:700; text-transform:uppercase; transition:transform .2s ease,background .2s ease; }.button:hover { transform:translateY(-3px); }.button-dark { color:var(--white); background:var(--ink); }.button-dark span,.button-light span { font-size:18px; color:var(--clay); }.hero-art { position:absolute; z-index:1; right:4.8vw; bottom:75px; width:min(39vw,510px); height:365px; }.art-card { position:absolute; }.art-card-main { width:78%; height:93%; right:0; bottom:0; padding:25px; background:var(--forest); color:#e9e3d6; overflow:hidden; }.art-card-main span,.art-card-note { font-size:10px; letter-spacing:.14em; }.art-card-main strong { position:relative; z-index:1; display:block; margin-top:74px; font:500 clamp(2.7rem,4.5vw,4.4rem)/.85 var(--serif); letter-spacing:-.045em; }.art-card-main i { position:absolute; width:270px; height:270px; right:-80px; bottom:-95px; border:1px solid rgba(255,255,255,.55); border-radius:50%; }.art-card-main i:after { content:""; position:absolute; inset:38px; border:1px solid rgba(255,255,255,.28); border-radius:50%; }.art-card-note { z-index:1; top:10%; left:0; padding:17px; background:var(--clay); color:#f8eee5; line-height:1.35; }.art-orb { position:absolute; z-index:2; width:77px; height:77px; bottom:27px; left:0; border-radius:50%; background:var(--paper); border:1px solid var(--ink); }.scroll-cue { position:absolute; bottom:43px; left:4.8vw; display:flex; align-items:center; gap:11px; color:var(--muted); font-size:9px; letter-spacing:.12em; }.scroll-cue span { width:33px; height:1px; background:var(--clay); }
@media (min-width: 801px) and (max-width: 1100px) { .hero { min-height:800px; }.hero-bottom { max-width:300px; margin-left:29%; }.hero-art { width:32vw; height:300px; bottom:58px; }.art-card-main strong { margin-top:58px; font-size:3rem; } }
.section-space { max-width:1440px; margin:auto; padding:142px 4.8vw; }.intro { display:grid; grid-template-columns:1fr 2fr 1fr; gap:30px; border-top:1px solid var(--line); }.section-number { margin:0; color:var(--bronze); font-size:11px; font-weight:700; letter-spacing:.1em; }.intro h2,.section-head h2,.method h2,.contact h2 { margin:23px 0 0; font:600 clamp(3rem,5.4vw,5.5rem)/.91 var(--serif); letter-spacing:-.045em; }.intro-copy { align-self:end; margin:0; color:#55524c; font-size:15px; }
.comparison { padding-top:68px; }.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:58px; }.section-head h2 { margin:0; flex:0 1 62%; }.comparison-frame { position:relative; height:clamp(350px,52vw,650px); overflow:hidden; background:#f2eee5; user-select:none; }.after-side,.before-side { position:absolute; inset:0; overflow:hidden; }.after-side { background:#d4c3a7; }.before-side { z-index:2; width:50%; border-right:1px solid var(--white); }.browser-bar { height:42px; display:flex; align-items:center; gap:6px; padding:0 15px; background:#f7f6f3; color:#73716c; font-size:8px; letter-spacing:.08em; }.browser-bar i { display:block; width:6px; height:6px; border:1px solid #87847e; border-radius:50%; }.browser-bar span { margin:auto; padding-right:35px; }.after-layout { height:calc(100% - 82px); position:relative; }.after-photo { position:absolute; inset:0 38% 0 0; overflow:hidden; background:linear-gradient(#b3c8cb 0 53%,#8d9c72 53%); }.sun { position:absolute; top:18%; left:24%; width:80px; height:80px; border-radius:50%; background:#f7e8ba; }.arch { position:absolute; bottom:-9%; width:34%; height:72%; background:#c8b492; border-radius:180px 180px 0 0; box-shadow:0 0 0 12px rgba(246,238,217,.4) inset; }.arch-one { left:18%; }.arch-two { left:48%; height:57%; }.tree { position:absolute; bottom:-6%; right:-2%; width:32%; height:60%; background:#526c48; clip-path:polygon(50% 0,68% 27%,61% 27%,91% 70%,65% 70%,79% 100%,17% 100%,35% 70%,9% 70%,39% 27%,32% 27%); }.after-copy { position:absolute; z-index:1; top:0; bottom:0; left:62%; right:6%; display:flex; flex-direction:column; justify-content:center; }.after-copy span,.after-copy small { font-size:9px; font-weight:700; letter-spacing:.15em; }.after-copy strong { margin:15px 0 42px; font:600 clamp(2rem,4vw,4.5rem)/.84 var(--serif); letter-spacing:-.055em; }.after-copy b { color:var(--clay); font-size:17px; }.after-footer { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#28433c; color:#e9e3d6; font-size:8px; letter-spacing:.12em; }.old-browser { height:61px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:#d4d4d4; color:#123a82; font-family:Arial,sans-serif; }.old-browser b { font-size:17px; }.old-browser span { font-size:8px; }.old-content { height:calc(100% - 90px); padding:17px 12%; text-align:center; background:#f7f7f7; font-family:Arial,sans-serif; }.old-image { height:55%; background:linear-gradient(130deg,#6b8360,#d8c9a8 55%,#8da1b2); border:2px outset #aaa; }.old-content h3 { margin:12px 0 4px; color:#123a82; font-size:17px; }.old-content p { font-size:11px; }.old-content button { padding:6px 11px; color:white; background:#0c479c; border:2px outset #6184ba; font-size:10px; }.old-footer { height:29px; padding-top:8px; color:#fff; background:#0d458f; text-align:center; font:9px Arial,sans-serif; }.comparison-handle { position:absolute; z-index:4; top:0; bottom:0; left:50%; transform:translateX(-50%); width:1px; background:var(--white); display:flex; align-items:center; justify-content:center; gap:2px; }.comparison-handle:before { content:""; position:absolute; width:42px; height:42px; border-radius:50%; border:1px solid var(--white); background:var(--ink); }.comparison-handle span { z-index:1; color:var(--white); font:24px/1 var(--serif); }.comparison-range { position:absolute; z-index:5; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; }.comparison-label { position:absolute; z-index:3; top:59px; padding:7px 10px; background:var(--white); font-size:9px; font-weight:700; letter-spacing:.1em; }.comparison-label small { color:var(--muted); }.label-before { left:18px; }.label-after { right:18px; }.comparison-caption { display:flex; justify-content:space-between; gap:20px; margin-top:15px; color:var(--muted); font-size:11px; }.comparison-caption p { margin:0; }.comparison-caption span { color:var(--ink); font-size:10px; font-weight:700; letter-spacing:.1em; }.comparison-caption b { color:var(--clay); font-size:16px; }
.projects { padding-top:60px; }.projects-head { align-items:end; }.projects-head h2 { flex:auto; }.project-grid { display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:18px; }.project-card { min-width:0; }.project-visual { height:485px; position:relative; overflow:hidden; }.project-hotel .project-visual { background:#aebd9f; }.vertical-copy { position:absolute; z-index:3; top:25px; right:21px; writing-mode:vertical-rl; font-size:9px; font-weight:700; letter-spacing:.13em; }.hotel-sun { position:absolute; width:200px; height:200px; border-radius:50%; top:10%; right:16%; background:#edcf92; }.hotel-hill { position:absolute; bottom:-6%; border-radius:50% 50% 0 0; }.hill-a { width:100%; height:53%; background:#668067; transform:rotate(-5deg); }.hill-b { width:95%; height:30%; left:-10%; background:#466655; }.hotel-house { position:absolute; z-index:2; bottom:13%; left:33%; width:37%; height:31%; background:#efe7d2; border-top:9px solid #a05f48; }.hotel-house i { display:inline-block; width:14%; height:29%; margin:18% 8%; background:#43584c; }.project-hotel b { position:absolute; z-index:3; left:25px; bottom:21px; color:white; font:600 3rem/.8 var(--serif); letter-spacing:-.06em; }.project-stone .project-visual { background:#d4ccc0; }.stone-lines { position:absolute; inset:-40px; opacity:.65; background:repeating-linear-gradient(114deg,transparent 0 38px,#8b8178 39px 41px,transparent 42px 97px),repeating-linear-gradient(20deg,transparent 0 71px,#aaa095 72px 73px,transparent 74px 130px); }.stone-panel { position:absolute; left:20px; right:20px; bottom:20px; padding:18px; color:#efe9df; background:#423c38; }.stone-panel span { font-size:9px; letter-spacing:.1em; }.stone-panel b { display:block; margin-top:54px; font:500 2.7rem/.85 var(--serif); letter-spacing:-.05em; }.project-clinic .project-visual { display:flex; align-items:center; justify-content:center; background:#d6ddd6; color:#28433c; }.clinic-orbit { position:absolute; border:1px solid #547368; border-radius:50%; }.orbit-a { width:115%; height:45%; transform:rotate(-26deg); }.orbit-b { width:58%; height:105%; transform:rotate(39deg); }.clinic-center { position:relative; z-index:1; width:105px; height:105px; border-radius:50%; display:grid; place-items:center; background:#28433c; color:#e8eee6; font:600 4.5rem/1 var(--serif); }.project-clinic .project-visual > span { position:absolute; bottom:23px; left:22px; font-size:10px; font-weight:700; letter-spacing:.14em; }.project-meta { padding:16px 3px 6px; }.project-meta span { color:var(--bronze); font-size:10px; font-weight:700; letter-spacing:.1em; }.project-meta h3 { margin:7px 0; font:600 2.1rem/1 var(--serif); letter-spacing:-.04em; }.project-meta p { margin:0; max-width:310px; color:var(--muted); font-size:13px; }
.method { padding-top:90px; }.method-top { display:flex; justify-content:space-between; gap:30px; align-items:end; }.method-top h2 { margin:0; flex-basis:62%; }.method-list { margin:70px 0 0; padding:0; list-style:none; border-top:1px solid var(--ink); }.method-list li { display:grid; grid-template-columns:1fr 2fr auto; gap:30px; align-items:center; padding:26px 0; border-bottom:1px solid var(--line); transition:padding .25s ease; }.method-list li:hover { padding-left:12px; }.method-list span { color:var(--bronze); font-size:12px; font-weight:700; }.method-list h3 { margin:0; font:600 2.2rem/1 var(--serif); letter-spacing:-.04em; }.method-list p { margin:4px 0 0; max-width:440px; color:var(--muted); font-size:14px; }.method-list b { color:var(--clay); font-size:24px; font-weight:400; }
.contact { position:relative; overflow:hidden; padding:138px 19vw 130px; background:var(--ink); color:#f4f0e9; }.contact .kicker { color:#c6a585; }.contact h2 { max-width:900px; margin-top:28px; }.contact > p:not(.kicker) { max-width:460px; margin:27px 0 39px; color:#c1bdb5; }.contact-stamp { position:absolute; right:-52px; top:47px; width:202px; height:202px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-content:center; color:rgba(255,255,255,.45); text-align:center; font-size:10px; letter-spacing:.13em; transform:rotate(17deg); }.contact-stamp span { margin-top:8px; font-size:8px; }.contact-form { max-width:650px; }.contact-form label { display:block; margin-bottom:10px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }.contact-form > div { display:flex; border-bottom:1px solid #8f8b84; }.contact-form input { flex:1; min-width:0; padding:17px 0; border:0; outline:0; color:var(--white); background:transparent; font:500 1.55rem var(--serif); }.contact-form input::placeholder { color:#817d76; }.contact-form input:focus { box-shadow:0 2px 0 var(--clay); }.button-light { color:var(--ink); background:#eee8de; align-self:center; }.form-note { min-height:22px; margin:11px 0 0; color:#c6a585; font-size:12px; }
.site-footer { max-width:1440px; margin:auto; display:flex; justify-content:space-between; gap:15px; padding:24px 4.8vw; color:var(--muted); font-size:10px; letter-spacing:.1em; }.site-footer small { margin-left:10px; color:#9b978f; font-size:8px; }.site-footer a { color:var(--ink); font-weight:700; }.reveal { animation:enter .7s both cubic-bezier(.22,1,.36,1); }.reveal-delay-1 { animation-delay:.12s; }.reveal-delay-2 { animation-delay:.24s; } @keyframes enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media (max-width: 800px) { .site-header { height:70px; padding:0 22px; }.desktop-nav,.header-link { display:none; }.hero { min-height:0; padding:133px 22px 28px; }.hero-grid { inset:0 22px; background:linear-gradient(90deg,transparent 50%,rgba(28,27,24,.06) 50%,rgba(28,27,24,.06) calc(50% + 1px),transparent calc(50% + 1px)); }.hero h1 { max-width:calc(100vw - 44px); margin-top:20px; font-size:clamp(3rem,11.5vw,3.55rem); line-height:.9; letter-spacing:-.06em; overflow-wrap:anywhere; hyphens:auto; }.desktop-break { display:none; }.hero-bottom { display:block; margin:34px 0 0; }.hero-bottom p { max-width:315px; font-size:14px; }.hero-bottom .button { margin-top:22px; }.hero-art { position:relative; right:auto; bottom:auto; width:100%; height:260px; margin-top:34px; }.art-card-main { padding:16px; }.art-card-main strong { margin-top:52px; font-size:3.1rem; }.art-orb { width:48px; height:48px; }.scroll-cue { position:relative; bottom:auto; left:auto; margin-top:29px; }.section-space { padding:84px 22px; }.intro { display:block; }.intro > .section-number { margin-bottom:41px; }.intro h2,.section-head h2,.method h2,.contact h2 { font-size:clamp(3rem,13vw,4.3rem); overflow-wrap:anywhere; }.intro-copy { margin-top:32px; max-width:330px; }.section-head,.projects-head,.method-top { display:block; margin-bottom:37px; }.section-head h2,.method-top h2 { margin-top:25px; }.comparison { padding-top:24px; }.comparison-frame { height:430px; margin:0 -22px; }.after-photo { inset:0 25% 0 0; }.after-copy { left:68%; right:4%; }.after-copy strong { margin:13px 0 27px; font-size:2.5rem; }.after-footer span:nth-child(2) { display:none; }.before-side { width:50%; }.old-browser b { font-size:12px; }.old-browser span { font-size:6px; }.old-content { padding:12px 7%; }.old-content h3 { font-size:13px; }.old-content p,.old-content button { font-size:8px; }.comparison-label { top:52px; }.comparison-caption { display:block; }.comparison-caption span { display:block; margin-top:12px; }.projects { padding-top:22px; }.projects-head .text-link { display:inline-block; margin-top:26px; }.project-grid { display:block; }.project-card { margin-bottom:48px; }.project-visual { height:420px; }.project-stone .project-visual,.project-clinic .project-visual { height:340px; }.method { padding-top:35px; }.method-list { margin-top:40px; }.method-list li { grid-template-columns:30px 1fr auto; gap:12px; }.method-list h3 { font-size:1.9rem; }.method-list p { font-size:13px; }.contact { padding:90px 22px 82px; }.contact h2 { font-size:clamp(3.2rem,13vw,4.5rem); }.contact-form > div { display:block; border:0; }.contact-form input { width:100%; border-bottom:1px solid #8f8b84; }.contact-form .button { width:100%; margin-top:16px; }.contact-stamp { right:-85px; top:19px; }.site-footer { padding:19px 22px; flex-wrap:wrap; }.site-footer small { display:block; margin:5px 0 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.reveal { animation:none; }.button,.method-list li,.desktop-nav a:after { transition:none; } }

/* Keep the primary conversion path available on the smallest screens. */
@media (max-width:800px) { .desktop-nav { display:none; }.header-link { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 10px; border:1px solid rgba(28,27,24,.22); background:rgba(248,246,241,.72); font-size:0; }.header-link::before { content:"Analisi"; font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.header-link span { margin-left:0; font-size:16px; } }

/* A visible keyboard path across the public site. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--clay); outline-offset:4px; }

/* Vezolino: structured hero composition and signature system */
:root { --serif:"Bodoni Moda", Didot, Georgia, serif; --vezolino-blue:#183956; --vezolino-blue-light:#d8e5e9; }
.hero { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(300px,.8fr); grid-template-rows:1fr auto; column-gap:clamp(28px,4vw,64px); row-gap:24px; align-items:end; min-height:900px; }
.hero-copy { position:relative; z-index:1; grid-column:1; grid-row:1; align-self:center; padding-bottom:32px; }
.hero h1 { max-width:900px; }
.hero-title-mobile { display:none; }
.hero-bottom { max-width:352px; margin:50px 0 0; }
.hero-art { position:relative; z-index:1; right:auto; bottom:auto; width:100%; height:370px; display:grid; grid-column:2; grid-row:1; grid-template-columns:27% 1fr; grid-template-rows:20% 1fr 22%; align-self:end; }
.art-card { position:relative; }
.art-card-note { z-index:1; top:auto; left:auto; grid-column:1; grid-row:1; align-self:center; padding:16px 10px; background:var(--clay); }
.art-card-main { grid-column:2; grid-row:1 / 4; width:auto; height:auto; right:auto; bottom:auto; padding:24px; background:var(--vezolino-blue); }
.art-card-main strong { margin-top:76px; }
.art-orb { position:relative; z-index:1; grid-column:1; grid-row:3; align-self:end; justify-self:start; bottom:auto; left:auto; }
.scroll-cue { position:relative; grid-column:1; grid-row:2; bottom:auto; left:auto; align-self:end; }
.assurance { max-width:1440px; margin:0 auto; padding:18px 4.8vw; display:grid; grid-template-columns:1.4fr 1fr auto; align-items:center; gap:28px; color:var(--white); background:var(--vezolino-blue); }
.assurance p,.assurance ul { margin:0; }.assurance p { font:500 clamp(1.5rem,2.2vw,2.2rem)/1 var(--serif); letter-spacing:-.03em; }.assurance ul { display:flex; gap:18px; padding:0; list-style:none; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }.assurance li + li:before { content:"/"; margin-right:18px; color:#87a5b4; }.assurance > span { color:#9ab4c0; font-size:9px; letter-spacing:.12em; }
.project-clinic .project-visual { background:var(--vezolino-blue); color:var(--vezolino-blue-light); }.project-clinic .clinic-orbit { border-color:#8aabb7; }.project-clinic .clinic-center { background:var(--vezolino-blue-light); color:var(--vezolino-blue); }
.button span { display:inline-block; transition:transform .22s ease; }.button:hover span { transform:translate(3px,-3px); }.text-link { position:relative; padding-bottom:5px; }.text-link:after { content:""; position:absolute; right:0; bottom:0; left:0; height:1px; background:var(--vezolino-blue); transform:scaleX(.25); transform-origin:left; transition:transform .25s ease; }.text-link:hover:after { transform:scaleX(1); }
.project-visual { transition:transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease; }.project-card:hover .project-visual { transform:translateY(-5px); box-shadow:0 22px 35px rgba(28,27,24,.12); }.project-card:hover .hotel-sun { transform:scale(1.12); }.hotel-sun { transition:transform .5s cubic-bezier(.22,1,.36,1); }.project-card:hover .stone-lines { transform:scale(1.06) rotate(2deg); }.stone-lines { transition:transform .5s cubic-bezier(.22,1,.36,1); }.project-card:hover .clinic-orbit { transform:rotate(18deg) scale(1.05); }.clinic-orbit { transition:transform .5s cubic-bezier(.22,1,.36,1); }
.reveal-on-scroll { opacity:0; transform:translateY(22px); transition:opacity .58s ease, transform .58s cubic-bezier(.22,1,.36,1); }.reveal-on-scroll.is-visible { opacity:1; transform:translateY(0); }.project-grid .project-card:nth-child(2) { transition-delay:70ms; }.project-grid .project-card:nth-child(3) { transition-delay:140ms; }
@media (min-width:801px) and (max-width:1100px) { .hero { grid-template-columns:minmax(0,1.55fr) minmax(250px,.8fr); min-height:800px; }.hero-art { height:315px; }.hero h1 { font-size:clamp(4.1rem,8vw,6.4rem); } }
@media (max-width:800px) { .hero { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; min-height:0; gap:28px; }.hero-copy { grid-column:1; grid-row:1; align-self:auto; padding-bottom:0; }.hero-title-desktop { display:none; }.hero-title-mobile { display:block; }.hero-bottom { max-width:315px; margin-top:34px; }.hero-art { grid-column:1; grid-row:2; width:100%; height:260px; margin:0; }.art-card-note { padding:14px 8px; }.art-card-main { padding:16px; }.art-card-main strong { margin-top:46px; font-size:clamp(2.15rem,9.5vw,2.7rem); }.scroll-cue { grid-column:1; grid-row:3; margin-top:0; }.assurance { grid-template-columns:1fr; gap:14px; padding:24px 22px; }.assurance ul { gap:12px; flex-wrap:wrap; }.assurance li + li:before { margin-right:12px; }.assurance > span { display:none; } }
@media (prefers-reduced-motion:reduce) { .reveal-on-scroll { opacity:1; transform:none; transition:none; }.button span,.project-visual,.hotel-sun,.stone-lines,.clinic-orbit { transition:none; } }

/* Product interfaces: project previews and in-site demonstrations */
.project-visual.browser-mockup { display:flex; flex-direction:column; border:1px solid rgba(28,27,24,.16); box-shadow:0 14px 28px rgba(28,27,24,.08); }
.mini-browser { height:32px; flex:0 0 32px; display:flex; align-items:center; gap:5px; padding:0 10px; font:600 7px/1 var(--sans); letter-spacing:.06em; }
.mini-browser i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.55; }.mini-browser span { margin-left:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cyber-mockup { background:#0b101b; color:#cfdbec; }.cyber-mockup .mini-browser { border-bottom:1px solid rgba(207,219,236,.13); color:#aebacf; }.cyber-ui { min-height:0; flex:1; display:grid; grid-template-columns:42px 1fr; }.cyber-side { display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:15px; border-right:1px solid rgba(207,219,236,.12); }.cyber-side b { color:#d9a16f; font:700 12px/1 var(--sans); }.cyber-side span { width:12px; height:1px; background:#7b8ba4; }.cyber-side .is-active { background:#57d1ad; box-shadow:0 0 9px #57d1ad; }.cyber-content { padding:15px 16px; }.cyber-top,.cyber-stats { display:flex; justify-content:space-between; gap:8px; font-size:8px; letter-spacing:.06em; }.cyber-top small { color:#57d1ad; font-size:7px; }.cyber-score { display:flex; justify-content:space-between; align-items:end; padding:19px 0 15px; }.cyber-score small,.cyber-stats small { display:block; color:#8190a8; font-size:7px; }.cyber-score strong { display:block; margin-top:4px; color:#f2f5fa; font:600 clamp(2rem,3vw,3.1rem)/.85 var(--sans); letter-spacing:-.08em; }.cyber-score em { color:#57d1ad; font-size:.37em; font-style:normal; }.score-ring { width:39px; height:39px; display:grid; place-items:center; border:1px solid #57d1ad; border-radius:50%; color:#57d1ad; font-size:6px; letter-spacing:.08em; }.cyber-chart { position:relative; height:68px; display:flex; align-items:end; gap:5px; overflow:hidden; border-top:1px solid rgba(207,219,236,.13); border-bottom:1px solid rgba(207,219,236,.13); background:repeating-linear-gradient(90deg,transparent 0 24%,rgba(207,219,236,.08) 24.5% 25%); }.cyber-chart i { width:9%; background:#2e4e71; }.cyber-chart i:nth-child(1){height:21%}.cyber-chart i:nth-child(2){height:44%}.cyber-chart i:nth-child(3){height:30%}.cyber-chart i:nth-child(4){height:65%}.cyber-chart i:nth-child(5){height:52%}.cyber-chart i:nth-child(6){height:82%}.cyber-chart b { position:absolute; left:0; right:0; bottom:18%; height:1px; background:#57d1ad; transform:rotate(-8deg); transform-origin:left; }.cyber-stats { padding-top:13px; color:#e6eef8; }.cyber-stats > span { font-size:12px; }
.hotel-mockup { background:#d4c6aa; color:#30463b; }.hotel-mockup .mini-browser { background:#f5f1e8; border-bottom:1px solid rgba(48,70,59,.16); }.hotel-ui { position:relative; display:flex; min-height:0; flex:1; flex-direction:column; overflow:hidden; }.hotel-ui-nav,.clinic-ui-nav { display:flex; justify-content:space-between; gap:6px; padding:12px 14px; font-size:7px; letter-spacing:.07em; }.hotel-ui-nav b { font:600 11px/1 var(--serif); letter-spacing:0; }.hotel-ui-nav span { opacity:.75; white-space:nowrap; }.hotel-ui-scene { position:relative; flex:1; min-height:0; overflow:hidden; background:linear-gradient(#b7c3a7 0 53%,#798c6f 53%); }.hotel-ui-scene:after { content:""; position:absolute; right:-5%; bottom:-17%; width:72%; height:58%; border-radius:200px 200px 0 0; background:#4f6b59; box-shadow:-180px 80px 0 -35px #355442; }.hotel-ui-sun { position:absolute; z-index:1; top:16%; left:27%; width:72px; height:72px; border-radius:50%; background:#eed28f; }.hotel-ui-arch { position:absolute; z-index:2; bottom:11%; left:39%; width:33%; height:43%; border-radius:90px 90px 0 0; background:#eee4cf; box-shadow:inset 0 9px #bd7255; }.hotel-ui-scene p { position:absolute; z-index:4; bottom:10px; left:13px; margin:0; color:#f8f5ef; font:500 1.75rem/.84 var(--serif); }.booking-preview { position:absolute; z-index:5; right:10px; bottom:11px; display:grid; gap:6px; width:44%; padding:10px; background:rgba(248,245,239,.95); box-shadow:0 8px 18px rgba(26,42,31,.18); }.booking-preview small { color:#68726a; font-size:7px; }.booking-preview button,.clinic-ui button { min-height:27px; border:0; color:#f8f5ef; background:#334b3f; font:700 7px/1 var(--sans); letter-spacing:.05em; text-transform:uppercase; }
.clinic-mockup { background:#edf1ed; color:#233e39; }.clinic-mockup .mini-browser { color:#6c7975; border-bottom:1px solid #d2dad4; }.clinic-ui { display:flex; min-height:0; flex:1; flex-direction:column; }.clinic-ui-nav { border-bottom:1px solid #d2dad4; }.clinic-ui-nav b { color:#21594e; font-size:8px; letter-spacing:.09em; }.clinic-ui-nav span { color:#6f7e79; white-space:nowrap; }.clinic-ui-main { flex:1; display:grid; grid-template-columns:1fr .9fr; gap:10px; padding:18px 14px 12px; }.clinic-ui-main > div small { color:#4f786e; font-size:7px; font-weight:700; letter-spacing:.1em; }.clinic-ui-main strong { display:block; margin:7px 0; font:600 clamp(1.35rem,2vw,2rem)/.93 var(--serif); letter-spacing:-.04em; }.clinic-ui-main p { margin:0; color:#65736e; font-size:8px; line-height:1.45; }.clinic-ui-main form { align-self:end; display:grid; gap:7px; padding:10px; background:white; box-shadow:0 6px 14px rgba(26,54,47,.08); }.clinic-ui-main label,.clinic-ui-main form span { color:#63736e; font-size:7px; }.privacy-preview { padding:9px 14px; color:#e4f0e6; background:#276558; font-size:7px; font-weight:700; letter-spacing:.06em; }
.project-demo-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:17px; padding:0; border:0; color:var(--ink); background:transparent; font:700 10px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }.project-demo-link span { color:var(--clay); font-size:16px; transition:transform .2s ease; }.project-demo-link:hover span { transform:translate(3px,-3px); }.project-demo-link:focus-visible,.modal-close:focus-visible,.demo-canvas button:focus-visible,.demo-canvas input:focus-visible,.demo-canvas select:focus-visible { outline:2px solid var(--clay); outline-offset:3px; }
.demo-modal { width:min(1120px,calc(100% - 32px)); max-height:min(760px,calc(100dvh - 32px)); margin:auto; padding:0; border:0; color:var(--ink); background:transparent; overflow:visible; }.demo-modal::backdrop { background:rgba(9,15,22,.76); backdrop-filter:blur(7px); }.demo-modal-shell { overflow:auto; max-height:inherit; background:#f6f3ed; box-shadow:0 28px 90px rgba(0,0,0,.42); }.demo-modal-top { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border-bottom:1px solid var(--line); }.demo-modal-top p { margin:0; color:var(--bronze); font-size:10px; font-weight:700; letter-spacing:.12em; }.modal-close { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; font:300 28px/1 var(--sans); cursor:pointer; transition:transform .2s ease,background .2s ease; }.modal-close:hover { color:white; background:var(--ink); transform:rotate(90deg); }.demo-panel { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr); gap:clamp(26px,5vw,74px); align-items:center; padding:clamp(30px,5vw,70px); }.demo-intro h2 { margin:18px 0; font:600 clamp(2.6rem,5vw,5rem)/.89 var(--serif); letter-spacing:-.055em; }.demo-intro > p:not(.kicker) { max-width:340px; color:#5e5b55; font-size:14px; }.demo-intro .button { margin-top:9px; }.demo-feedback { min-height:20px; margin:12px 0 0; color:#566860; font-size:12px; }.demo-canvas { min-width:0; overflow:hidden; box-shadow:0 14px 40px rgba(28,27,24,.13); }.demo-cyber-canvas { min-height:390px; padding:27px; color:#d7e3f4; background:#0c1422; }.canvas-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.canvas-kpis span { padding:14px; border:1px solid rgba(215,227,244,.15); color:#8fa2bd; font-size:8px; letter-spacing:.09em; }.canvas-kpis strong { display:block; margin-top:9px; color:#f4f7fb; font:600 1.75rem/1 var(--sans); letter-spacing:-.06em; }.canvas-chart { position:relative; display:flex; align-items:end; gap:4%; height:180px; margin-top:18px; padding:24px 10px 0; border:1px solid rgba(215,227,244,.15); background:repeating-linear-gradient(0deg,transparent 0 25%,rgba(215,227,244,.07) 25.5% 26%); }.canvas-chart span { position:absolute; top:12px; left:14px; color:#8fa2bd; font-size:8px; letter-spacing:.1em; }.canvas-chart i { width:8%; background:#284967; }.canvas-chart i:nth-of-type(1){height:31%}.canvas-chart i:nth-of-type(2){height:49%}.canvas-chart i:nth-of-type(3){height:36%}.canvas-chart i:nth-of-type(4){height:72%}.canvas-chart i:nth-of-type(5){height:56%}.canvas-chart i:nth-of-type(6){height:87%}.canvas-chart b { position:absolute; right:5%; bottom:47%; left:5%; height:2px; background:#56d4ad; transform:skewY(-9deg); }.canvas-status { margin-top:18px; color:#56d4ad; font-size:10px; font-weight:700; letter-spacing:.07em; }.demo-hotel-canvas { min-height:390px; color:#f9f6ef; background:#73886e; }.demo-hotel-nav,.demo-clinic-nav { display:flex; justify-content:space-between; gap:10px; padding:20px 23px; font-size:9px; letter-spacing:.08em; }.demo-hotel-nav { color:#32483d; background:#f4eee2; }.demo-hotel-nav b { font:600 15px/1 var(--serif); }.demo-hotel-hero { position:relative; height:210px; overflow:hidden; padding:28px 23px; background:linear-gradient(#b5c5a8 0 55%,#526b57 55%); }.demo-hotel-hero:before { content:""; position:absolute; top:30px; left:30%; width:122px; height:122px; border-radius:50%; background:#efd28f; }.demo-hotel-hero:after { content:""; position:absolute; right:13%; bottom:-10px; width:37%; height:66%; border-radius:150px 150px 0 0; background:#ece0c8; box-shadow:inset 0 12px #b4654e; }.demo-hotel-hero p { position:relative; z-index:1; max-width:290px; margin:0; color:#fbf6ed; font:500 clamp(2rem,4vw,3.6rem)/.84 var(--serif); letter-spacing:-.04em; }.demo-hotel-hero span { position:absolute; z-index:2; bottom:24px; left:23px; font-size:9px; font-weight:700; letter-spacing:.1em; }.availability-form { display:grid; grid-template-columns:1fr 1fr .8fr 1.25fr; gap:1px; padding:16px; background:#f7f3eb; }.availability-form label { display:grid; gap:5px; padding:8px; color:#617067; font-size:8px; font-weight:700; letter-spacing:.07em; }.availability-form input,.availability-form select,.appointment-form input,.appointment-form select { min-width:0; border:0; color:var(--ink); background:transparent; font:500 13px var(--sans); }.availability-form button,.appointment-form button { min-height:44px; align-self:end; border:0; color:#f8f5ed; background:#30483d; font:700 9px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; cursor:pointer; }.demo-hotel-canvas .demo-feedback { margin:0; padding:0 16px 16px; color:#30483d; background:#f7f3eb; }.demo-clinic-canvas { min-height:390px; color:#203a34; background:#edf2ee; }.demo-clinic-nav { border-bottom:1px solid #cbd7d0; background:#fbfdfb; }.demo-clinic-nav b { color:#206151; font-size:10px; }.appointment-form { display:grid; gap:13px; max-width:390px; margin:44px auto 18px; padding:28px; background:white; box-shadow:0 12px 28px rgba(28,68,57,.1); }.appointment-form label { color:#49685f; font-size:10px; font-weight:700; letter-spacing:.06em; }.appointment-form input,.appointment-form select { min-height:34px; border-bottom:1px solid #cad8d0; }.privacy-badge { width:max-content; max-width:calc(100% - 32px); margin:0 auto; padding:9px 12px; color:#16604e; border:1px solid #83b9a9; font-size:9px; font-weight:700; letter-spacing:.06em; }.privacy-badge span { color:#8cb6aa; }.demo-clinic-canvas .demo-feedback { margin:14px 0 0; padding-bottom:15px; text-align:center; }
@media (max-width:800px) { .project-visual.browser-mockup { height:355px; }.project-grid .project-card { margin-bottom:54px; }.mini-browser { height:34px; flex-basis:34px; }.project-demo-link { margin-top:12px; }.demo-modal { width:calc(100% - 18px); max-height:calc(100dvh - 18px); }.demo-modal-top { height:58px; padding:0 14px; }.demo-panel { display:block; padding:30px 20px; }.demo-intro { margin-bottom:30px; }.demo-intro h2 { font-size:clamp(2.7rem,13vw,4rem); }.demo-cyber-canvas,.demo-hotel-canvas,.demo-clinic-canvas { min-height:0; }.demo-cyber-canvas { padding:18px; }.canvas-chart { height:140px; }.demo-hotel-nav,.demo-clinic-nav { padding:15px; }.demo-hotel-nav span,.demo-clinic-nav span { display:none; }.demo-hotel-hero { height:175px; }.availability-form { grid-template-columns:1fr 1fr; padding:10px; }.availability-form label:nth-child(3) { grid-column:1 / -1; }.availability-form button { grid-column:1 / -1; }.appointment-form { margin:25px 16px 18px; padding:20px; }.clinic-ui-main { padding:16px 12px 10px; }.clinic-ui-main strong { font-size:1.3rem; }.clinic-ui-main form { padding:7px; } }
@media (prefers-reduced-motion:reduce) { .modal-close,.project-demo-link span { transition:none; } }
.booking-preview-action,.clinic-preview-action { display:grid; min-height:27px; place-items:center; color:#f8f5ef; background:#334b3f; font:700 7px/1 var(--sans); letter-spacing:.05em; text-transform:uppercase; }
.clinic-preview-form { align-self:end; display:grid; gap:7px; padding:10px; background:white; box-shadow:0 6px 14px rgba(26,54,47,.08); }.clinic-preview-form span:not(.clinic-preview-action),.clinic-preview-form label { color:#63736e; font-size:7px; }.clinic-preview-action { color:#f8f5ef !important; }
@media (max-width:800px) { .clinic-preview-form { padding:7px; } }
.project-hotel .project-visual.hotel-mockup { background:#d9c9aa url("assets/casa-luminosa-preview.png") left top/cover no-repeat; }.hotel-mockup .mini-browser { position:relative; z-index:1; color:#334b3f; background:rgba(248,245,238,.94); border-bottom-color:rgba(48,70,59,.16); }.hotel-mockup .hotel-ui { display:none; }.project-preview-link:focus-visible { outline:2px solid var(--vezolino-blue); outline-offset:4px; }
.project-clinic .project-visual.clinic-mockup { display:block; background:#dce8e1 url("assets/clinica-medica-preview.png") center top/cover no-repeat; }.clinic-mockup .mini-browser { position:relative; z-index:1; color:#55746b; background:rgba(247,248,244,.94); border-bottom-color:rgba(20,60,58,.14); }.clinic-mockup .clinic-ui { display:none; }
.project-cyber .project-visual.cyber-mockup { display:block; background:#06100e url("assets/cyberreflex-preview.png") center top/cover no-repeat; }.cyber-mockup .mini-browser,.cyber-mockup .cyber-ui { display:none; }

/* Casa Luminosa case study: diagnosis and actual product view, no illustrative comparison */
.comparison-case { display:grid; grid-template-columns:minmax(290px,.68fr) minmax(0,1.32fr); border:1px solid var(--ink); background:#f5f2eb; }.case-diagnosis { display:flex; min-width:0; min-height:655px; flex-direction:column; padding:31px; color:#e7eee8; background:#183a56; }.case-topline { display:flex; justify-content:space-between; gap:12px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.31); font-size:9px; font-weight:700; letter-spacing:.1em; }.case-topline span:last-child { color:inherit; opacity:.68; text-align:right; }.case-kicker { margin:58px 0 0; color:#e1ad83; font-size:9px; font-weight:700; letter-spacing:.12em; }.case-diagnosis h3,.case-result h3 { margin:17px 0 0; font:500 clamp(3rem,4.4vw,5.1rem)/.82 var(--serif); letter-spacing:-.06em; }.case-diagnosis h3 em,.case-result h3 em { color:#e6ad7b; font-style:italic; }.case-intro { max-width:300px; margin:25px 0 0; color:#c8d6d3; font-size:13px; line-height:1.58; }.case-diagnosis-list { margin:auto 0 0; border-top:1px solid rgba(255,255,255,.28); }.case-diagnosis-list div { display:grid; grid-template-columns:37px 1fr; gap:9px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.28); }.case-diagnosis-list dt { color:#e1ad83; font-size:9px; font-weight:700; letter-spacing:.08em; }.case-diagnosis-list dd { margin:0; color:#e3ece7; font-size:12px; line-height:1.4; }.case-result { min-width:0; padding:31px; }.case-result .case-topline { border-color:var(--line); color:#635f57; }.case-result-heading { display:flex; justify-content:space-between; gap:36px; align-items:end; }.case-result-heading h3 { margin-top:14px; color:var(--ink); }.case-result-heading > p { max-width:208px; margin:0 0 4px; color:var(--muted); font-size:12px; line-height:1.5; }.case-browser { display:block; margin-top:49px; overflow:hidden; border:1px solid rgba(28,27,24,.19); background:#d2c5ac; box-shadow:0 18px 36px rgba(28,27,24,.15); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease; }.case-browser:hover { box-shadow:0 28px 46px rgba(28,27,24,.19); transform:translateY(-5px); }.case-browser-bar { display:flex; align-items:center; gap:6px; min-height:38px; padding:0 13px; color:#69665e; background:#f7f5ef; font-size:8px; letter-spacing:.06em; }.case-browser-bar i { width:6px; height:6px; border-radius:50%; background:#a9aaa5; }.case-browser-bar b { margin-left:5px; font-size:8px; font-weight:600; }.case-browser-bar small { margin-left:auto; color:#a05e48; font-size:8px; font-weight:700; letter-spacing:.08em; }.case-browser img { display:block; width:100%; height:auto; aspect-ratio:1.39 / 1; object-fit:cover; object-position:center top; }.case-evidence { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:20px 0 0; padding:0; list-style:none; }.case-evidence li { min-height:55px; padding:11px 0 0; border-top:1px solid var(--line); color:#494740; font-size:10px; line-height:1.45; }.case-evidence span { display:block; margin-bottom:6px; color:var(--clay); font-size:9px; font-weight:700; }.comparison-caption a { color:var(--ink); font-size:10px; font-weight:700; letter-spacing:.1em; }.comparison-caption a b { color:var(--clay); font-size:16px; }
.comparison-title-mobile { display:none; }
@media (max-width:800px) { .comparison { padding-top:24px; }.comparison-title-desktop { display:none; }.comparison-title-mobile { display:inline; }.comparison .section-head h2 { font-size:clamp(2.65rem,11vw,3.35rem); line-height:.88; }.comparison-case { display:block; margin:0; }.case-diagnosis,.case-result { min-height:0; padding:23px 20px; }.case-diagnosis .case-kicker { margin-top:43px; }.case-diagnosis h3,.case-result h3 { font-size:clamp(2.65rem,11vw,3.5rem); }.case-diagnosis-list { margin-top:43px; }.case-result-heading { display:block; }.case-result-heading > p { margin:22px 0 0; }.case-browser { margin-top:34px; }.case-browser-bar small { font-size:7px; }.case-evidence { grid-template-columns:1fr; gap:0; }.case-evidence li { min-height:0; display:grid; grid-template-columns:34px 1fr; gap:8px; padding:11px 0; }.case-evidence span { margin:0; }.comparison-caption { margin-top:16px; }.comparison-caption a { margin-top:13px; } }

/* Selected projects: one shared canvas for three real product previews */
.project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.project-visual { height:auto; aspect-ratio:1 / 1; border:1px solid rgba(28,27,24,.16); box-shadow:0 14px 30px rgba(28,27,24,.07); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease; }.project-visual:hover { box-shadow:0 23px 38px rgba(28,27,24,.14); transform:translateY(-5px); }.project-visual.browser-mockup .mini-browser { display:none; }.project-materia .project-visual.materia-mockup { background:#3a3024 url("assets/materia-forma-card.png") center top/cover no-repeat; }.materia-mockup .cyber-ui { display:none; }.project-hotel .project-visual.hotel-mockup { background:#d9c9aa url("assets/casa-luminosa-card.png") center top/cover no-repeat; }.project-clinic .project-visual.clinic-mockup { background:#dce8e1 url("assets/clinica-medica-card.png") center top/cover no-repeat; }.project-meta { padding-top:19px; }.project-meta p { min-height:40px; }.project-demo-link { margin-top:14px; }
@media (max-width:800px) { .project-grid { display:block; }.project-visual,.project-stone .project-visual,.project-clinic .project-visual { height:auto; aspect-ratio:1 / 1; }.project-meta p { min-height:0; } }

/* Final mobile navigation safeguard: the contact route must never disappear. */
@media (max-width:800px) { .site-header .desktop-nav { display:none; }.site-header .header-link { display:inline-flex !important; align-items:center; gap:6px; min-height:36px; padding:0 10px; border:1px solid rgba(28,27,24,.22); background:rgba(248,246,241,.72); font-size:0; }.site-header .header-link::before { content:"Analisi"; font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }.site-header .header-link span { margin-left:0; font-size:16px; } }

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--clay); outline-offset:4px; }