/* ======= iMac ======= */
.imac{container-type:inline-size;margin:0;width:100%}
.imac-hd{position:relative;background:linear-gradient(180deg,#F1F2F4,#E3E5E9);border-radius:2.1cqw 2.1cqw 0 0;padding:2.4cqw 2.4cqw 0;box-shadow:0 0 0 1px rgba(0,0,0,.12),inset 0 1px 0 #fff,0 3cqw 7cqw rgba(0,0,0,.28)}
.imac-hd::before{content:"";position:absolute;left:50%;top:.9cqw;width:.7cqw;height:.7cqw;border-radius:50%;background:#2B2F36;transform:translateX(-50%)}
.imac-screen{position:relative;aspect-ratio:16/9;background:#fff;border-radius:.5cqw;overflow:hidden;box-shadow:0 0 0 .22cqw #0B0D10}
.imac-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.imac-screen.contain{background:radial-gradient(60% 70% at 18% 8%,#2F8398 0%,transparent 62%),radial-gradient(55% 65% at 92% 92%,#1E5878 0%,transparent 60%),linear-gradient(135deg,#0D2E3E,#154159);display:grid;place-items:center}
.win{width:90%;background:#fff;border-radius:1.1cqw;overflow:hidden;box-shadow:0 2.4cqw 6cqw rgba(0,0,0,.5),0 0 0 .12cqw rgba(255,255,255,.28)}
.win-bar{height:2.7cqw;background:linear-gradient(#F6F6F6,#E4E4E6);display:flex;gap:.85cqw;align-items:center;padding:0 1.3cqw}
.win-bar i{width:1.15cqw;height:1.15cqw;border-radius:50%;background:#FF5F57}.win-bar i:nth-child(2){background:#FEBC2E}.win-bar i:nth-child(3){background:#28C840}
.imac-screen .win img{display:block;width:100%;height:auto;object-fit:initial}
.imac-chin{height:11.5cqw;background:linear-gradient(180deg,#E3E5E9,#D2D5DB);border-radius:0 0 2.1cqw 2.1cqw;box-shadow:0 0 0 1px rgba(0,0,0,.12),inset 0 -1px 0 rgba(255,255,255,.6)}
.imac-neck{width:15cqw;height:12cqw;margin:0 auto;background:linear-gradient(90deg,#B7BBC2,#E9EBEE 46%,#C6CAD0);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}
.imac-foot{width:31cqw;height:1.7cqw;margin:0 auto;background:linear-gradient(180deg,#D9DCE1,#B3B8BF);border-radius:.9cqw .9cqw .4cqw .4cqw;box-shadow:0 2.4cqw 3.6cqw rgba(0,0,0,.3)}
.pin{position:absolute;left:1.2cqw;top:calc(2.4cqw + var(--y) * .005625 * (100cqw - 4.8cqw));transform:translate(-50%,-50%);display:grid;place-items:center;width:3cqw;height:3cqw;border-radius:50%;background:var(--teal);color:#fff;font:700 1.5cqw var(--mono);box-shadow:0 0 0 .4cqw #fff,0 .6cqw 1.6cqw rgba(0,0,0,.35);z-index:2}

/* ======= iPhone ======= */
.iphone{container-type:inline-size;margin:0;width:100%;padding-inline:1.4%}
.ip-body{position:relative;aspect-ratio:9/19.5;background:#0E1114;border-radius:15.5cqw;padding:2.5cqw;box-shadow:0 0 0 .55cqw #444A52,0 0 0 1cqw #1A1D21,inset 0 0 0 .35cqw #636A72,0 4cqw 9cqw rgba(0,0,0,.34)}
.ip-body::before{content:"";position:absolute;left:-1.7cqw;top:20cqw;width:1.1cqw;height:6.5cqw;border-radius:.6cqw 0 0 .6cqw;background:#2A2E34;box-shadow:0 11cqw 0 #2A2E34,0 21cqw 0 #2A2E34}
.ip-body::after{content:"";position:absolute;right:-1.7cqw;top:33cqw;width:1.1cqw;height:15cqw;border-radius:0 .6cqw .6cqw 0;background:#2A2E34}
.ip-screen{position:relative;height:100%;border-radius:13cqw;overflow:hidden;background:#F1F6F7;display:flex;flex-direction:column}
.ip-status{flex:0 0 10.4cqw;display:flex;justify-content:space-between;align-items:flex-end;padding:0 8.6cqw 1.4cqw;font:700 4.5cqw var(--body);color:#0F1A1C;background:#F1F6F7}
.ip-status span svg{display:block;height:3.4cqw;width:auto}
.iphone .ip-screen img{flex:1 1 0;min-height:0;width:100%;object-fit:cover;object-position:50% 100%;display:block}
.ip-island{position:absolute;top:2.6cqw;left:50%;transform:translateX(-50%);width:28cqw;height:8cqw;border-radius:4.2cqw;background:#000}
.ip-home{position:absolute;bottom:1.7cqw;left:50%;transform:translateX(-50%);width:34cqw;height:1.2cqw;border-radius:1cqw;background:#0F1A1C;opacity:.85}

/* ======= anteprime lavori (home, elenco, scheda) ======= */
.dv{position:relative;background:#04121A;background-image:radial-gradient(70% 90% at 85% 0%,#0D3A48,transparent 70%),radial-gradient(50% 60% at 0% 100%,color-mix(in srgb,var(--pa,#14788A) 22%,transparent),transparent 70%);border-radius:10px;padding:clamp(16px,3.4vw,38px) clamp(16px,3.4vw,38px) 0;overflow:hidden}
.dv-mac{width:84%;transition:transform .3s}.dv-mac .imac-foot{box-shadow:none}
.dv-ph{position:absolute;right:5%;bottom:7%;width:15%}
.dv.big{max-width:1000px;margin:0 auto}
.wk:hover .dv-mac,.slide:hover .dv-mac{transform:translateY(-4px)}
@media (max-width:860px){.dv-ph{width:19%;right:4%}}
@media (prefers-reduced-motion:reduce){.dv-mac{transition:none}}
/* titoli dei lavori nel carattere delle storie (Instrument Serif) */
.wk-t h3,.slide h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(30px,3.2vw,44px);line-height:1.05;letter-spacing:-.005em}
.wk-t .more,.slide .more{font-family:var(--body)}

/* a capo: niente parole sole in fondo (orfane), righe bilanciate dove il testo è breve */
p,li,dd,dt,blockquote,figcaption,td{text-wrap:pretty}
h1,h2,h3,h4,.h2,.big,.h1c,.big2,.lead,.lead-l,.lead-r,.eyebrow,.eyebrow-l,.mono,.kind-badge,.wk-t p,.slide p,.kv dd,.callouts span,.cmp li span,.pts span,.cols p,.cl-cols li,.chips li,.qt p,.cta-band p,.cta-band h2,.stats p,.btn{text-wrap:balance}
.cta-band .lead,.cta-simple p{max-width:34em;margin-inline:auto}

/* logo in alto: il mese in lettere accanto al nome */
.wm-m{align-self:flex-end;margin:0 0 3px 2px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);min-width:0}
.mark .lf.step{fill:#E9D46B;opacity:1}
@media (max-width:420px){.wm-m{display:none}}
.wm-m{min-width:11ch}

/* sigle dei mesi nelle foglie dell'anello grande */
.mark .lt{font:400 3.1px var(--body);letter-spacing:.03em;text-transform:none;text-anchor:middle;dominant-baseline:central;fill:#15201C;opacity:.16;pointer-events:none}
/* la rotazione dell'anello è guidata da app.js (stesso orologio delle sigle) */
.mark.spin>g{animation:none!important}

/* rifiniture di movimento (guida Emil Kowalski): risposta al tocco, uscita ease-out, durate brevi */
.btn{transition:transform .15s cubic-bezier(.23,1,.32,1),filter .15s ease-out,background-color .15s ease-out}
.btn:active{transform:scale(.97)}
.btn:focus-visible,.wm:focus-visible,.lang a:focus-visible,nav a:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;border-radius:6px}
.dv-mac,.mk-desk{transition-duration:.22s;transition-timing-function:cubic-bezier(.23,1,.32,1)}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:none;transform:none}}


/* schede prezzi: linee allineate, un solo font */
.line{display:flex!important;flex-direction:column;gap:12px}
.line p{flex:1;min-height:0!important}
.line-price{margin-top:0!important}
.lp-from,.lp-s{font:400 14px var(--body)!important;color:var(--soft)}
.lp-s{margin-top:-4px}

/* sempre compreso: griglia allineata alle schede */
.inc3{display:grid;gap:20px;margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.inc3-h{display:grid;grid-template-columns:1fr 2fr;gap:16px;align-items:baseline}
.inc3-h h3{margin:0;font-size:22px}.inc3-h p{margin:0;color:var(--soft)}
.inc3-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.inc3-l li{display:grid;align-content:start;gap:2px;padding:14px 0 14px 26px;border-top:1px solid var(--line);position:relative}
.inc3-l li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:10px;border-radius:50%;background:#5E7A5A}
.inc3-l b{font-weight:600}.inc3-l span{color:var(--soft);font-size:15px}
@media(max-width:860px){.inc3-h,.inc3-l{grid-template-columns:1fr}}

/* Il nome: una frase grande, compatta */
.name{padding-top:56px!important;padding-bottom:56px!important}
.name h2{font-size:clamp(20px,2vw,24px)!important;margin:0 0 14px}
.name p{font:400 clamp(21px,2.4vw,28px)/1.42 var(--body)!important;letter-spacing:-.01em;max-width:44ch!important;color:var(--ink)}

.mark .lf{transition:fill .28s ease,opacity .28s ease}
@media (prefers-reduced-motion:reduce){.mark .lf{transition:none}}