/* AISBERG: colori e corsivo dello slogan in tutto il sito.
   Caricato per ultimo, così prevale sugli stili delle singole sezioni.

   I colori sono fissati: azzurro freddo per l'intelligenza artificiale, rame moderno per l'esperienza industriale.
   Il resto è neutro: nero e grigi sul chiaro, bianco sul buio. Niente blu
   nei testi e nei pulsanti; acqua, ghiaccio e stelle delle scene restano. */
/* ── Moved from glacier.css so that only the home changes: the new font for
   the shared nav and footer, and the nav without boxes (logo, "Menu"). The
   other pages keep the nav and type they have. */
.continuation,.g-page,.g-nav,.g-menu{font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif}
.g-footer{font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif}
:root{font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif}
body{background:#000}
/* Nav senza riquadri: il logo vero e "Menu" poggiano direttamente sulla
   pagina; il colore segue lo sfondo (chiaro sulle sezioni scure). */
.g-nav{--nav-ink:#112b3c}
.g-nav-brand,.g-nav-trigger{transition:color .25s ease}
.g-nav .aisberg-logo,.g-menu .aisberg-logo{display:block;width:auto;overflow:visible}
.g-nav-brand{display:flex;align-items:center;min-height:44px;padding:0;background:none;border-radius:0;color:var(--nav-ink)}
.g-nav-brand .aisberg-logo{height:26.6px}
.g-nav-trigger{gap:14px;padding:10px 0 10px 16px;border:0;background:none;border-radius:0;color:var(--nav-ink);font-size:13px;font-weight:500;letter-spacing:.01em}
.g-nav-trigger i{width:22px;height:8px;border-top:1.5px solid;border-bottom:1.5px solid;transition:width .25s ease}
.g-nav-trigger:hover i{width:28px}
.g-nav.is-dark-brand .g-nav-brand{--nav-ink:#f1f7fa}
.g-nav.is-dark-trigger .g-nav-trigger{--nav-ink:#f1f7fa}
@media(max-width:700px){.g-nav-brand .aisberg-logo{height:22.2px}.g-nav-trigger{font-size:12px;gap:12px}}
/* Header, come quello di bendingspoons.com: appena la pagina scorre, dietro
   al logo e a "Menu" compare una barra larga quanto lo schermo, quasi
   trasparente (nero al 10%, bianco al 10% sulle sezioni chiare), che sfoca
   di 16 px la pagina che le passa sotto, senza nessun filo sotto. Quando la pagina sotto cambia colore, la
   tinta della barra si dissolve nella nuova in 0,3 secondi (glacier.js). */
.g-nav{--nav-top:22px;--nav-side:26px}
.g-nav-band{position:absolute;z-index:-1;pointer-events:none;top:calc(-1 * var(--nav-top));left:calc(-1 * var(--nav-side));right:calc(-1 * var(--nav-side));height:calc(100% + 2 * var(--nav-top));
 background:rgb(0 0 0 / .1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;
 transition:opacity .3s ease,background-color .3s cubic-bezier(.4,0,.2,1)}
.g-nav-band.is-light{background:rgb(255 255 255 / .1)}
.g-nav.is-visible.is-scrolled .g-nav-band{opacity:1}
.g-nav-wipe{display:none}
@media(max-width:700px){.g-nav{--nav-top:15px;--nav-side:16px}}
@media(prefers-reduced-motion:reduce){.g-nav,.g-nav-band{transition:none}}
/* ── Menu: a pane of glass under "Menu", in the page's own tone. "Menu" becomes "Chiudi" and the two lines a
   cross; the pane opens from behind the word, downwards, and the sections come out of a blur one after the other,
   as the manifesto's letters. No frame and no black box: it is the page under it, blurred, a little darker on the
   dark sections and a little whiter on the light ones, held only by a soft shadow; its ink, and "Chiudi", follow
   the page's tone as the bar's ink does (glacier.js). The section in view has a dot. */
.g-nav-trigger{position:relative;z-index:1}
.g-nav-label{display:grid;height:1.3em;overflow:hidden;line-height:1.3;text-align:right}
.g-nav-label>span{display:block;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.g-nav.is-menu-open .g-nav-label>span{transform:translate3d(0,-100%,0)}
.g-nav-trigger i{position:relative;border:0}
.g-nav-trigger i::before,.g-nav-trigger i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.g-nav-trigger i::before{top:0}
.g-nav-trigger i::after{bottom:0}
.g-nav.is-menu-open .g-nav-trigger i,.g-nav.is-menu-open .g-nav-trigger:hover i{width:22px}
.g-nav.is-menu-open .g-nav-trigger i::before{transform:translate3d(0,3.25px,0) rotate(45deg) scaleX(.72)}
.g-nav.is-menu-open .g-nav-trigger i::after{transform:translate3d(0,-3.25px,0) rotate(-45deg) scaleX(.72)}
.g-pop{--pop-r:22px;--pop-ink:#f1f7fa;--pop-mute:rgb(241 247 250 / .56);--pop-hover:rgb(255 255 255 / .08);--pop-sel:rgb(255 255 255 / .13);--pop-rule:rgb(255 255 255 / .09);
 position:absolute;z-index:0;top:-12px;right:-16px;display:flex;flex-direction:column;width:276px;box-sizing:border-box;padding:66px 10px 10px;
 background:rgb(22 22 28 / .5);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
 border-radius:var(--pop-r);box-shadow:0 28px 64px -20px rgb(0 0 0 / .6);color:var(--pop-ink);pointer-events:auto;
 font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
 clip-path:inset(0 0 calc(100% - 66px) calc(100% - 128px) round var(--pop-r));opacity:0;
 transition:clip-path .7s cubic-bezier(.16,1,.3,1),opacity .2s ease,background-color .3s ease,color .3s ease}
/* on the light sections: white glass and dark ink */
.g-nav:not(.is-dark-trigger) .g-pop{--pop-ink:#101315;--pop-mute:#5b6266;--pop-hover:rgb(16 19 21 / .055);--pop-sel:#fff;--pop-rule:rgb(16 19 21 / .08);
 background:rgb(250 250 248 / .64);box-shadow:0 28px 64px -22px rgb(16 19 21 / .3)}
.g-pop[hidden]{display:none}
/* open, the clip leaves room around the pane for its shadow */
.g-pop.is-open{clip-path:inset(-40px -40px -80px -40px round var(--pop-r));opacity:1}
.g-pop.is-closing{transition:clip-path .38s cubic-bezier(.5,0,.2,1),opacity .2s ease .17s}
.g-pop a{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;box-sizing:border-box;padding:9px 14px 9px 30px;border-radius:13px;color:inherit;font-size:16.5px;font-weight:450;line-height:1.3;letter-spacing:-.012em;text-decoration:none;
 opacity:0;transform:translate3d(0,8px,0);filter:blur(6px);
 transition:opacity .5s ease calc(.14s + var(--i,0) * .055s),transform .7s cubic-bezier(.16,1,.3,1) calc(.14s + var(--i,0) * .055s),filter .55s ease calc(.14s + var(--i,0) * .055s),background-color .2s ease}
.g-pop.is-open a{opacity:1;transform:none;filter:none}
.g-pop.is-closing a{opacity:0;transform:none;filter:none;transition:opacity .12s ease,background-color .2s ease}
.g-pop a::after{content:"→";color:var(--pop-mute);opacity:0;transform:translate3d(-6px,0,0);transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.g-pop a.is-current::before{content:"";position:absolute;left:14px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:currentColor}
@media(hover:hover){.g-pop a:hover{background:var(--pop-hover)}.g-pop a:hover::after{opacity:1;transform:none}}
.g-pop a:focus-visible{outline:2px solid var(--pop-ink);outline-offset:-2px}
@media(max-width:700px){
 .g-pop{top:-9px;right:-10px;width:252px;padding-top:58px;clip-path:inset(0 0 calc(100% - 58px) calc(100% - 112px) round var(--pop-r))}
 .g-pop.is-open{clip-path:inset(-40px -40px -80px -40px round var(--pop-r))}
 .g-pop a{min-height:46px;padding:10px 14px 10px 30px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){.g-pop,.g-pop a,.g-pop a::after,.g-nav-label>span,.g-nav-trigger i::before,.g-nav-trigger i::after{transition:none}.g-pop a{filter:none}}
@font-face{font-family:"Aisberg Serif";src:url('./assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Aisberg Serif";src:url('./assets/fonts/instrument-serif-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{
 /* The accent colours, taken from the aurora: pervinca for the AI (#BAC3FF,
    the aurora's violet hue) and menta for the industry (#6CE0C2, its green).
    The bright tones are for the dark (d); the light sections take the same
    hues, deeper (l), so they read on white. */
 --ai-d1:#bac3ff;--ai-d2:#afb8f3;--ind-d1:#6ce0c2;--ind-d2:#60d5b7;
 --glow-p:34%;
 --ink:#101315;--ink-soft:#23272a;--ink-muted:#62686c;--ink-faint:#8a8f93;--rule:rgb(16 19 21 / .12);
 --btn:#0b0e10;--btn-hover:#171b1e;
}
:root{
 --ai-l1:#5960ad;--ai-l2:#5157a3;
 --ind-l1:#078f75;--ind-l2:#08856d;
}
/* Light sections use the deep tones... */
:root{
 --ai-1:var(--ai-l1);--ai-2:var(--ai-l2);--ai:var(--ai-l1);
 --ind-1:var(--ind-l1);--ind-2:var(--ind-l2);--ind:var(--ind-l1);
 --ai-glow:color-mix(in srgb,var(--ai-l1) 35%,transparent);--ind-glow:color-mix(in srgb,var(--ind-l1) 35%,transparent);
 --grad-ai:linear-gradient(90deg,var(--ai-1),var(--ai-2));--grad-ind:linear-gradient(90deg,var(--ind-1),var(--ind-2));
}
/* ...the dark ones (intro, projects, buttons) the bright tones, with a soft glow. */
.hero-stage,.numbers,#progetti,#chi-siamo .about-link,.contact-link,.g-nav{
 --ai-1:var(--ai-d1);--ai-2:var(--ai-d2);--ai:var(--ai-d1);
 --ind-1:var(--ind-d1);--ind-2:var(--ind-d2);--ind:var(--ind-d1);
 --ai-glow:color-mix(in srgb,var(--ai-d1) var(--glow-p),transparent);
 --ind-glow:color-mix(in srgb,var(--ind-d1) var(--glow-p),transparent);
 --grad-ai:linear-gradient(90deg,var(--ai-1),var(--ai-2));--grad-ind:linear-gradient(90deg,var(--ind-1),var(--ind-2));
}
/* ── The accent words: Instrument Serif Italic, as Bending Spoons, at the size
   of the text around them. */
.firma{
 font-family:"Aisberg Serif",Georgia,serif;font-weight:400;font-style:italic;font-size:1em;letter-spacing:-.025em;line-height:1;
 display:inline-block;padding:.14em .1em .3em;margin:-.14em -.1em -.3em;
 background-image:var(--grad-ai);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.firma-ind{background-image:var(--grad-ind)}
#progetti .firma,.hero-stage .firma{filter:drop-shadow(0 0 .08em var(--ai-glow))}
#progetti .firma-ind{filter:drop-shadow(0 0 .08em var(--ind-glow))}
#chi-siamo .about-line:has(.firma),.outro-line:has(.firma){padding-top:.2em;padding-bottom:.42em;margin-top:-.2em;margin-bottom:-.42em}

/* ── The slogan is always staggered: first line left, second line right.
   On the phone the Chi siamo title keeps a smaller step. */
#chi-siamo .g-about-title{font-size:clamp(44px,6.2vw,112px)}
#chi-siamo .about-line-indent{padding-left:14%}
@media(max-width:700px){#chi-siamo .g-about-title{font-size:7.3vw}#chi-siamo .about-line-indent{padding-left:1em}}
.slogan-small .ss-1,.slogan-small .ss-2{display:block;white-space:nowrap}
.end-footer-caption.slogan-small{max-width:none}
.slogan-small .ss-2{padding-left:2.1em}
.slogan-small .firma{font-size:1.05em;display:inline-block}
#progetti .ps-intro .firma{font-size:1.3em}

/* ── Neutral text everywhere (no blue). */
.continuation,.g-page,.g-nav,.g-menu{--g-ink:var(--ink);--g-muted:var(--ink-muted)}
.g-nav{--nav-ink:var(--ink)}
.g-nav-brand,.g-nav-trigger{color:var(--nav-ink,var(--ink))}
.g-nav button:focus-visible,.g-menu button:focus-visible,.g-menu a:focus-visible,.home-outro a:focus-visible{outline-color:var(--ink)}

#chi-siamo.about-chapter::before,.home-outro::before{background:none}
#chi-siamo .g-about-title,#chi-siamo .g-about-title .about-line:last-child,#cosa-facciamo h3{color:var(--ink)}
#chi-siamo [data-about-words]{color:var(--ink-soft)}
#chi-siamo .g-origin p{color:var(--ink-muted)}
#chi-siamo .g-origin p span{color:inherit}
#chi-siamo .about-label{color:var(--ink-muted)}
#chi-siamo .about-union-aura{background:radial-gradient(ellipse at 25% 55%,color-mix(in srgb,var(--ai) 10%,transparent),transparent 57%)}
#chi-siamo .about-union-fusion{background:radial-gradient(ellipse,color-mix(in srgb,var(--ai) 32%,transparent),color-mix(in srgb,var(--ai) 10%,transparent) 37%,transparent 72%)}
#chi-siamo .about-union-shadow{background:radial-gradient(ellipse,rgb(16 19 21 / .12),rgb(16 19 21 / .04) 45%,transparent 72%)}

.home-outro{color:var(--ink)}
.outro-line+.outro-line{color:var(--ink)}
.contact-copy p{color:var(--ink-soft)}
.contact-signal-haze{background:radial-gradient(ellipse,color-mix(in srgb,var(--ai) 16.00%,transparent) 0.0%,color-mix(in srgb,var(--ai) 9.60%,transparent) 23.0%,color-mix(in srgb,var(--ai) 3.20%,transparent) 46.0%,color-mix(in srgb,var(--ai) 1.80%,transparent) 51.8%,color-mix(in srgb,var(--ai) 0.80%,transparent) 57.5%,color-mix(in srgb,var(--ai) 0.20%,transparent) 63.3%,color-mix(in srgb,var(--ai) 0.00%,transparent) 69.0%)}
.contact-signal-haze::after{content:"";position:absolute;inset:0;background:url('./assets/dither.png') 0 0/64px 64px;-webkit-mask-image:radial-gradient(ellipse,#000 0,rgb(0 0 0 / .6) 23%,rgb(0 0 0 / .2) 46%,rgb(0 0 0 / .05) 57.5%,transparent 69%);mask-image:radial-gradient(ellipse,#000 0,rgb(0 0 0 / .6) 23%,rgb(0 0 0 / .2) 46%,rgb(0 0 0 / .05) 57.5%,transparent 69%)}
.contact-signal-line{stroke:color-mix(in srgb,var(--ai) 55%,transparent)}
.end-footer-top{border-top-color:var(--rule)}
.end-footer-caption{color:var(--ink-muted)}
.end-footer-bottom{color:var(--ink-muted)}
/* ── Footer: above the big logo the site in four short columns, as on
   Bending Spoons (the three links that were here are now "Azienda"); under
   it the company's legal line, which the law asks of an S.r.l. (art. 2250
   c.c., VAT number on the home). Placeholders (.end-ph) wait for the data. */
.end-footer-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;align-items:start}
.end-footer-caption{grid-column:1/6}
.end-footer-cols{grid-column:7/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 2vw}
.end-footer-col h2{margin:0 0 16px;font-size:13px;font-weight:400;line-height:1.4;letter-spacing:-.005em;color:var(--ink-muted)}
.end-footer-col ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.end-footer-col li{font-size:15px;line-height:1.45;letter-spacing:-.015em;color:var(--ink-soft);overflow-wrap:anywhere}
.end-footer-col a{position:relative;padding-bottom:3px;color:var(--ink-soft);text-decoration:none;transition:color .25s}
.end-footer-col a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ai);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.end-footer-col a:hover,.end-footer-col a:focus-visible{color:var(--ink)}
.end-footer-col a:hover::after,.end-footer-col a:focus-visible::after{transform:scaleX(1)}
.end-ph{color:var(--ink-faint)}
/* Until "Legale" exists, the columns sit on the right, where the three links
   were. */
.end-footer-cols.is-two>:first-child{grid-column:3}
.end-footer-cols.is-three>:first-child{grid-column:2}
.end-footer-bottom:has(.end-legal){align-items:flex-end}
.end-legal{margin:0;max-width:75%;font-size:12px;line-height:1.6;letter-spacing:-.01em;color:var(--ink-muted)}
@media(max-width:1100px){
 .end-footer-caption,.end-footer-cols{grid-column:1/-1}
 .end-footer-cols{margin-top:44px}
}
@media(max-width:700px){
 .end-footer-top{display:block}
 .end-footer-caption{max-width:none}
 /* Phones: Azienda, Contatti and Seguici side by side, each as wide as its
    words, so the footer stays short. */
 .end-footer-cols{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:28px 16px;margin-top:36px}
 .end-footer-cols.is-two{grid-template-columns:repeat(2,auto);justify-content:start;column-gap:48px}
 .end-footer-cols.is-two>:first-child,.end-footer-cols.is-three>:first-child{grid-column:auto}
 .end-footer-col h2{margin-bottom:12px;font-size:12px}
 .end-footer-col li{font-size:14px;overflow-wrap:normal;white-space:nowrap}
 .end-footer-bottom:has(.end-legal){flex-direction:column;align-items:flex-start;gap:14px}
 .end-legal{max-width:none;font-size:11px}
 .end-legal-sep{display:none}
 .end-legal-data{display:block}
}
.end-wordmark{color:var(--ink)}
.end-wordmark-spark::before,.end-wordmark-spark::after{background:linear-gradient(90deg,transparent,var(--ai) 30%,#fff 50%,var(--ai) 70%,transparent)!important}

.origin-reel-toggle,.origin-reel-audio{color:var(--ink)}
.origin-reel-toggle,.origin-reel-audio::before{border-color:var(--rule)}

/* Projects: the water stays, the text turns neutral white and grey. */
#progetti.projects-showcase{--ps-muted:#a7acaf;--ps-body:#e8eaeb;--ps-rule:rgb(255 255 255 / .14);--ps-ice:var(--ai)}
#progetti .ps-glow{background:radial-gradient(closest-side,color-mix(in srgb,var(--ai) 34%,transparent),color-mix(in srgb,var(--ai) 10%,transparent) 50%,transparent)}
#progetti .ps-soon-shape{background:radial-gradient(closest-side,color-mix(in srgb,var(--ai) 26%,transparent),color-mix(in srgb,var(--ai) 8%,transparent) 55%,transparent)}
#progetti .ps-soon-light{background:radial-gradient(closest-side,color-mix(in srgb,var(--ai-1) 60%,transparent),color-mix(in srgb,var(--ai) 18%,transparent) 50%,transparent)}
#progetti .ps-arrow{border-color:rgb(255 255 255 / .25);color:#fff}
#progetti .ps-card:hover .ps-arrow{background-color:color-mix(in srgb,var(--ai) 14%,transparent);border-color:var(--ai);box-shadow:0 0 14px var(--ai-glow)}
#progetti .ps-card:focus-visible,#progetti .ps-btn:focus-visible{outline-color:#fff}
#progetti .ps-item[data-ps-item="aidit"] .ps-kicker{color:var(--ai)}
#progetti .ps-item[data-ps-item="aidit"] .ps-arrow{color:var(--ai);border-color:color-mix(in srgb,var(--ai) 40%,transparent)}
#progetti .ps-soon-word{font-family:"Aisberg Serif",Georgia,serif;font-style:italic;letter-spacing:-.025em;font-size:clamp(34px,3.5vw,60px);color:transparent;background-image:var(--grad-ai);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 .08em var(--ai-glow))}
#progetti .ps-soon-lit{color:#fff;-webkit-text-fill-color:#fff}

/* ── Buttons: black, white text; the + and the line underneath take the colour of their section. */
#chi-siamo .about-link,.contact-link{--btn-accent:var(--ind-d1)}
#cosa-facciamo .about-link,#progetti .ps-btn{--btn-accent:var(--ai-d1)}
#chi-siamo .about-link,#progetti .ps-btn,.contact-link{
 background:var(--btn);border:1px solid rgb(255 255 255 / .06);color:#fff;
 box-shadow:0 6px 18px rgb(0 0 0 / .14);
}
#chi-siamo .about-link::before,#progetti .ps-btn::before,.contact-link::before{
 background:radial-gradient(ellipse at 90% 20%,color-mix(in srgb,var(--btn-accent) 22%,transparent),transparent 70%),var(--btn-hover);
}
#chi-siamo .about-link::after,#progetti .ps-btn::after,.contact-link::after{background:linear-gradient(90deg,transparent,var(--btn-accent),transparent)}
#chi-siamo .about-link:hover,#chi-siamo .about-link:focus-visible,#progetti .ps-btn:hover,#progetti .ps-btn:focus-visible,.contact-link:hover,.contact-link:focus-visible{
 color:#fff;border-color:color-mix(in srgb,var(--btn-accent) 50%,transparent);box-shadow:0 9px 25px rgb(0 0 0 / .22);
}
#chi-siamo .about-link-symbol,#progetti .ps-btn-symbol,.contact-link-symbol{border-left-color:rgb(255 255 255 / .16)}
#chi-siamo .about-link-symbol::before,#chi-siamo .about-link-symbol::after,
#progetti .ps-btn-symbol::before,#progetti .ps-btn-symbol::after,
.contact-link-symbol::before,.contact-link-symbol::after{background:var(--btn-accent)}
#chi-siamo .about-link:hover .about-link-symbol::before,#chi-siamo .about-link:hover .about-link-symbol::after,
#progetti .ps-btn:hover .ps-btn-symbol::before,#progetti .ps-btn:hover .ps-btn-symbol::after,
.contact-link:hover .contact-link-symbol::before,.contact-link:hover .contact-link-symbol::after{box-shadow:0 0 8px var(--btn-accent)}

/* ── AISBERG in numeri: one figure under the other, big and continuous on the
   black of the opening, before the white pages. The figure is in the logo's
   hand and carries the colour of its side (verde acqua for the AI, rosa for
   the industry); the words under it stay minimal. */
.numbers{position:relative;z-index:6;background:#000;color:#fff;padding:64px 0;
 font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
/* As the figures of Bending Spoons, measure for measure: the number in the
   upright serif (185 px), the "+" a step smaller (145 px), the unit in the
   sans (125 px) and the line under it at 32 px; on phones 67, 67, 50, 32. */
.numbers-wrap{max-width:1440px;margin:auto;padding-inline:16px}
.stat{margin:0 auto;padding:40px 0;text-align:center;color:#fff;font-size:50px;line-height:1.2;letter-spacing:-.02em;font-weight:400}
.stat-num,.stat-plus{font-family:"Aisberg Serif",Georgia,serif;font-style:normal;font-weight:400;font-size:67px;line-height:.93;letter-spacing:-.04em;color:var(--ind-1)}
.stat-plus{vertical-align:bottom}
.stat.is-ai .stat-num,.stat.is-ai .stat-plus{color:var(--ai-1)}
.stat-label{display:block;margin-top:10px;font-size:17px;line-height:1.4;letter-spacing:-.01em;color:#fff}
@media(min-width:768px){
 .numbers{padding:104px 0}
 .numbers-wrap{padding-inline:64px}
 .stat{font-size:125px;line-height:.93;letter-spacing:-.06em}
 .stat-num{font-size:185px;line-height:.93;letter-spacing:-.02em}
 .stat-plus{font-size:145px;line-height:.93;letter-spacing:-.02em}
 .stat-label{margin-top:8px;font-size:32px;line-height:1.41;letter-spacing:-.03em}
}
/* Before the figure comes into view (the script arms it). */
.stat.stat-armed{opacity:0;transform:translateY(100px)}

/* ── Footer: the big logo stands on a mirror. Its reflection is the logo
   flipped under it, faint and fading out, like the iceberg on the water. */
/* The mirror line is the letters' baseline: the box starts there, and the
   flipped logo is lifted by the depth of the A's swash, which stays in front. */
.end-wordmark-mirror{position:relative;display:block;height:.55em;margin-top:-.232em;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0 / .9),rgb(0 0 0 / .35) 40%,transparent 92%);mask-image:linear-gradient(to bottom,rgb(0 0 0 / .9),rgb(0 0 0 / .35) 40%,transparent 92%)}
.end-wordmark-mirror-text{display:block;opacity:.16}
.end-wordmark-mirror .aisberg-logo{display:block;height:.977em;width:auto;margin-top:-.212em;overflow:visible;transform:scaleY(-1)}
@media(prefers-reduced-motion:reduce){.end-wordmark-mirror-text{transform:none!important}}

/* ══ The whole home on black: one continuous page after the opening, no frames,
   no cuts. Only the projects are a white page, where the cards travel. ══ */
.continuation{
 --ink:#f1f3f4;--ink-soft:#d3d7da;--ink-muted:#8f969b;--ink-faint:#757c81;--rule:rgb(255 255 255 / .12);
 --g-paper:#000;--g-ink:#f1f3f4;--g-muted:#8f969b;
 --ai-1:var(--ai-d1);--ai-2:var(--ai-d2);--ai:var(--ai-d1);--ind-1:var(--ind-d1);--ind-2:var(--ind-d2);--ind:var(--ind-d1);
 --ai-glow:color-mix(in srgb,var(--ai-d1) var(--glow-p),transparent);--ind-glow:color-mix(in srgb,var(--ind-d1) var(--glow-p),transparent);
 --grad-ai:linear-gradient(90deg,var(--ai-1),var(--ai-2));--grad-ind:linear-gradient(90deg,var(--ind-1),var(--ind-2));
 --btn:#f1f3f4;--btn-hover:#fff;
 background:#000;color:var(--ink);color-scheme:dark}
#chi-siamo.about-chapter,.home-outro,.contact-chapter,.end-footer{background:#000}
.origin-reel-video{background:#000}
.origin-reel-toggle,.origin-reel-audio::before{background:rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .16)}
.origin-reel-toggle:hover{background:rgb(255 255 255 / .18)}

/* Titles made of the page's own words: upright words rise, the word in the
   logo's hand is written by the pen (write-on-scroll.js). */
.wt-title .wt-line{display:block;white-space:nowrap;line-height:0}
.wt-title .wt-line+.wt-line{margin-top:-.2em}
.wt-title .wt-indent{padding-left:14%}
.wt-title .hs-script{margin-left:.05em}
#cosa-facciamo .wt-title{margin:0;font-weight:400}
.contact-title.wt-title .wt-indent{padding-left:.9em}
@media(max-width:700px){.wt-title .wt-indent{padding-left:.8em}}

/* Buttons on black: light, with the "+" in the colour of their side. */
#chi-siamo .about-link,.contact-link{color:#0b0e10;border-color:rgb(0 0 0 / .06);--btn-accent:var(--ind-l1)}
#cosa-facciamo .about-link{--btn-accent:var(--ai-l1)}
#chi-siamo .about-link:hover,#chi-siamo .about-link:focus-visible,.contact-link:hover,.contact-link:focus-visible{color:#000;box-shadow:0 9px 30px rgb(255 255 255 / .08)}
#chi-siamo .about-link-symbol,.contact-link-symbol{border-left-color:rgb(0 0 0 / .14)}

/* Footer on black: the white logo and its reflection. */
.end-wordmark-mirror-text{opacity:.2}
/* Every seven seconds the cursive A of the footer logo is crossed, from
   bottom left to top right, by a band of the AI's violet and, just behind it,
   one of the industry's green (the two colours of the slogan). The bands are
   clipped to the A and also pass in its reflection. They only run while the
   footer is on screen (glacier.js). */
.fw-sweep rect{transform:translate(-507px,1138px);animation:fw-sweep 7s cubic-bezier(.45,0,.2,1) infinite paused}
.fw-sweep .fw-sweep-ind{animation-delay:.45s}
.end-footer.is-sweeping .fw-sweep rect{animation-play-state:running}
@keyframes fw-sweep{0%,10%{transform:translate(-507px,1138px)}32%,100%{transform:translate(921px,-290px)}}
@media(prefers-reduced-motion:reduce){.fw-sweep{display:none}}

/* ── One rhythm for the whole page: the same space between every section and
   the next (half above, half below), the space the opening leaves before the
   figures. Inside a section the spacing is tighter. */
:root{--sec-gap:clamp(130px,calc(var(--lvh,1vh) * 21),220px)}
@media(max-width:700px){:root{--sec-gap:clamp(96px,calc(var(--lvh,1vh) * 15),140px)}}
#chi-siamo.about-chapter{padding:calc(var(--sec-gap) * .5) 0}
#chi-siamo .g-about-title{margin-bottom:0}
#chi-siamo .origin-reel{margin-top:var(--sec-gap)}
#chi-siamo .g-practice{margin-top:var(--sec-gap)}
#contattaci.contact-chapter{padding:calc(var(--sec-gap) * .5 + 35px) 0 calc(var(--sec-gap) * .5);scroll-margin-top:0}
@media(max-width:700px){#contattaci.contact-chapter{padding-top:min(calc(var(--sec-gap) * .5 + 30px),90px)}}
.end-footer{padding-top:calc(var(--sec-gap) * .5)}

#chi-siamo .g-about-copy{grid-column:7/-1}

/* ── Projects: a white page. AIDIT is the feature, with its screen in the
   phone; the two projects to come are two small night skies. The cards arrive
   from right to left, one after another (projects.js). */
#progetti.projects{
 --ink:#101315;--ink-soft:#23272a;--ink-muted:#62686c;--ink-faint:#8a8f93;--rule:rgb(16 19 21 / .12);
 --ai-1:var(--ai-l1);--ai-2:var(--ai-l2);--ai:var(--ai-l1);--ind-1:var(--ind-l1);--ind-2:var(--ind-l2);--ind:var(--ind-l1);
 --grad-ai:linear-gradient(90deg,var(--ai-1),var(--ai-2));--grad-ind:linear-gradient(90deg,var(--ind-1),var(--ind-2));
 position:relative;padding:calc(var(--sec-gap) * .5) 0;background:#f6f6f4;color:var(--ink);color-scheme:light;
 font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif;
 /* The cards slide in from 9vw to the right: keep that outside the page width,
    or phones zoom the whole site out by a few pixels until they arrive. */
 overflow-x:clip}
.pj-wrap{max-width:1700px;margin:0 auto;padding-inline:clamp(24px,5.6vw,110px)}
.pj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 60px;flex-wrap:wrap;margin-bottom:clamp(30px,calc(var(--lvh,1vh) * 6),64px)}
.pj-title{margin:0;font-size:clamp(44px,6.2vw,112px);font-weight:400;color:var(--ink)}
.pj-intro{margin:0 0 .5em;max-width:36ch;font-size:clamp(15px,1.15vw,19px);line-height:1.45;color:var(--ink-muted)}
.pj-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
/* ── Prodotti: every product keeps the same three things in the same places,
   so that scrolling one sees product after product: the name, one line of what
   it does and, top right, the way in (or where it stands). Below, each product
   moves in its own way, on its card's own background: AIDIT's phone rises
   out of the deep blue; Inquell's film melts into its plum (inquell-card.css).
   Side by side on computers, one after the other on phones. The two to come
   stay as they are, below. */
.pj-head{justify-content:center;text-align:center}       /* the section's title in the middle */
.pj-grid{gap:clamp(18px,2.3vw,34px)}                    /* a little more air between the products */
.pj-item-feature,.pj-item-iq{grid-column:1/-1;display:grid;min-width:0}
.pj-prod{--rad:28px;
 position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--rad);overflow:hidden;isolation:isolate;container-type:inline-size;
 color:#fff;text-decoration:none;font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif}
.pj-prod-head{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(8px,1.7cqw,12px) 16px;padding:clamp(20px,4.6cqw,34px) clamp(20px,4.6cqw,34px) 0}
.pj-prod-name{grid-column:1;grid-row:1;margin:0;font-size:clamp(34px,8.4cqw,62px);font-weight:400;line-height:1;letter-spacing:-.045em}
.pj-prod-tag{grid-column:2;grid-row:1;align-self:center;display:inline-flex;align-items:center;gap:.55em;padding:.62em 1em;border-radius:99px;
 font-size:clamp(11px,2.1cqw,14px);font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.pj-prod-text{grid-column:1/-1;grid-row:2;margin:0;max-width:36ch;font-size:clamp(14px,2.6cqw,18px);line-height:1.42;color:rgb(255 255 255 / .74);text-wrap:pretty}
.pj-prod-view{position:relative;flex:1 0 auto;min-height:clamp(320px,calc(var(--lvh,1vh) * 54),540px)}
/* AIDIT: the whole card is one deep blue that sinks into black at the top,
   where the words are; the phone rises from below with the app's real screens.
   Not online yet: where it stands takes the button's place. */
.pj-prod-aidit{background:url('./assets/dither.png') 0 0/64px 64px,radial-gradient(ellipse 95% 75% at 50% 100%,#2d67dc 0,#16449b 30%,#0d2862 55%,#071739 78%,#040b1d 100%)}
.pj-prod-status{border:1px solid rgb(255 255 255 / .26);color:rgb(255 255 255 / .86)}
.pj-prod-status i{width:.5em;height:.5em;border-radius:50%;background:#7eb0ff;box-shadow:0 0 .7em #7eb0ff}
.pj-device{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.pj-glow{position:absolute;left:50%;bottom:0;width:72%;aspect-ratio:1;transform:translate(-50%,28%);background:radial-gradient(closest-side,rgb(126 176 255 / .45),transparent);filter:blur(8px)}
.pj-phone{position:relative;height:90%;aspect-ratio:687/1416;transform:translateY(10%);filter:drop-shadow(0 30px 40px rgb(0 8 30 / .55));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){.pj-prod-aidit:hover .pj-phone{transform:translateY(6%)}}
@media(min-width:961px){.pj-item-feature,.pj-item-iq{grid-column:auto}}
/* The products are simply there, with no entrance (the two to come below
   still slide in). */
.pj-grid .pj-item.pj-item-feature.pj-armed,.pj-grid .pj-item.pj-item-iq.pj-armed{opacity:1;transform:none;transition:none}
/* Until the video shows its first frame, the phone shows that same screen
   (the poster, the lock screen) on deep blue, not a pale screen: no white
   flash when it starts playing. */
.pj-phone .pj-video{background:#0b2a6b url(/assets/aidit/app/aidit-demo-20260929-600.webp) center/cover no-repeat}
.pj-video{position:absolute;left:4.767%;top:2.274%;width:90.46%;height:95.42%;border-radius:13.6% / 6.255%;object-fit:cover;background:#dfe9f6;display:block}
.pj-play{position:absolute;right:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid rgb(255 255 255 / .35);border-radius:999px;background:#f6f6f4;color:#101315;font:500 12px/1.2 "Aisberg Sans",sans-serif;cursor:pointer;box-shadow:0 4px 20px rgb(0 8 30 / .2)}
.pj-play::before{content:"";width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor}
.pj-play[hidden]{display:none}
.pj-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.pj-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pj-soon{position:relative;display:grid;align-content:space-between;gap:28px;min-height:clamp(230px,calc(var(--lvh,1vh) * 32),320px);padding:clamp(22px,2.6vw,38px);border-radius:28px;overflow:hidden;isolation:isolate;background:#030405;color:#fff;
 --ai-1:var(--ai-d1);--ai-2:var(--ai-d2);--ind-1:var(--ind-d1);--ind-2:var(--ind-d2);
 --grad-ai:linear-gradient(90deg,var(--ai-1),var(--ai-2));--grad-ind:linear-gradient(90deg,var(--ind-1),var(--ind-2))}
.pj-soon-sky{position:absolute;inset:0;z-index:-1;background:
 radial-gradient(1.5px 1.5px at 18% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 16%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 38% 70%,#cfe3ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 84% 62%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 55% 38%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 12% 84%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 64% 88%,#dfe9ff 50%,transparent 51%),radial-gradient(1px 1px at 90% 30%,#fff 50%,transparent 51%),
 radial-gradient(1px 1px at 30% 44%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 47% 12%,#e8f0ff 50%,transparent 51%),
 radial-gradient(ellipse 80% 60% at 70% 110%,rgb(255 255 255 / .07),transparent 70%)}
.pj-soon.is-alt .pj-soon-sky{transform:scaleX(-1)}
.pj-soon-word .firma{font-size:clamp(42px,3.8vw,68px)}
.pj-soon-copy{display:grid;gap:6px}
.pj-soon .pj-kicker{font-size:clamp(18px,1.5vw,24px);letter-spacing:-.02em;color:#fff}
.pj-soon-text{max-width:34ch;font-size:14px;line-height:1.45;color:rgb(255 255 255 / .62)}
.pj-item.pj-armed{opacity:0;transform:translate3d(9vw,0,0)}
.pj-item.pj-armed.pj-in{opacity:1;transform:none;transition:opacity .9s ease calc(var(--i,0) * .14s),transform 1.15s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * .14s)}
.pj-foot{display:flex;margin-top:clamp(28px,calc(var(--lvh,1vh) * 5),52px)}
.pj-btn{position:relative;display:inline-flex;align-items:center;gap:28px;min-height:56px;padding:14px 18px 14px 22px;border-radius:9px;background:#0b0e10;color:#fff;text-decoration:none;font-size:14px;transition:background .3s}
.pj-btn:hover,.pj-btn:focus-visible{background:#1a1f22}
.pj-btn:focus-visible{outline:2px solid #0b0e10;outline-offset:3px}
.pj-btn-symbol{position:relative;display:block;width:30px;height:26px;border-left:1px solid rgb(255 255 255 / .16)}
.pj-btn-symbol::before,.pj-btn-symbol::after{content:"";position:absolute;top:50%;left:20px;width:10px;height:1px;background:var(--ai-d1);transform:translate(-50%,-50%);transition:transform .4s}
.pj-btn-symbol::after{transform:translate(-50%,-50%) rotate(90deg)}
.pj-btn:hover .pj-btn-symbol::before{transform:translate(-50%,-50%) rotate(90deg)}
.pj-btn:hover .pj-btn-symbol::after{transform:translate(-50%,-50%) rotate(180deg)}
@media(max-width:700px){
 .pj-head{align-items:flex-start}
 .pj-title{font-size:13vw}
 .pj-grid{grid-template-columns:1fr}
 .pj-grid{grid-template-columns:1fr 1fr;gap:10px}
 .pj-prod{--rad:22px}
 .pj-grid{gap:24px 14px}
 .pj-prod-view{min-height:0;flex:none;aspect-ratio:1.1}
 .pj-phone{height:96%;transform:translateY(12%)}
 @media(hover:hover) and (pointer:fine){.pj-prod-aidit:hover .pj-phone{transform:translateY(9%)}}
 .pj-soon{min-height:0;height:clamp(180px,50vw,220px);gap:10px;padding:16px;border-radius:20px}
 .pj-soon-word .firma{font-size:30px}
 .pj-soon .pj-kicker{font-size:15px}
 .pj-soon-text{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.pj-item.pj-armed{opacity:1;transform:none}.pj-phone{transition:none}}

/* ── Lizzy: on hover, her face as a small line icon, her name in the logo's hand. */
.lizzy-star .lizzy-card{left:24px;top:14px;display:flex;flex-direction:column;align-items:center;line-height:1;letter-spacing:0;color:#eef2f5;transform:translate(-3px,-50%);text-shadow:none}
.lizzy-star.is-hovered .lizzy-card{transform:translate(0,-50%)}
.lizzy-face{display:block;width:19px;height:auto;overflow:visible;filter:drop-shadow(0 0 4px rgb(2 9 15 / .9))}
.lizzy-name{font-family:"Aisberg Serif",Georgia,serif;font-style:italic;font-size:11px;margin-top:1px;white-space:nowrap}

/* ── The living art of the "in arrivo" cards (card-art.js). */
.pj-soon-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.pj-soon.has-art .pj-soon-sky{display:none}
.pj-soon.has-art::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgb(0 0 0 / .28))}
.pj-soon.has-art .pj-soon-word .firma{background-image:none;color:#fff;-webkit-text-fill-color:#fff;filter:none}
.pj-soon.has-art .pj-soon-text{color:rgb(255 255 255 / .82)}
/* The upright words of the titles are pure white, as on Bending Spoons
   (the white Progetti section keeps its dark ink). */
.hs-sans{color:#fff}
#progetti .hs-sans{color:inherit}


/* ── Chi siamo: a pause in black and white before the projects, as on
   Bending Spoons. Three statements; each letter comes out of a blur as the
   paragraph crosses the screen (manifesto.js). Under them a small card,
   with the photos of the two partners, leads to the people and the story. */
.manifesto{position:relative;z-index:6;background:#000;color:#fff;padding:80px 0;font-family:"Aisberg Sans","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.manifesto-wrap{max-width:1440px;margin:0 auto;padding-inline:24px}
.manifesto-p{margin:0 0 48px;font-size:27px;font-weight:400;line-height:1.4;letter-spacing:-.025em;color:#fff}
.manifesto-p:last-of-type{margin-bottom:0}
.manifesto .bt-word{display:inline-block;white-space:nowrap}
.manifesto .bt-char{display:inline-block}
.manifesto-card{display:inline-flex;align-items:center;gap:14px;max-width:100%;margin-top:40px;padding:9px 12px 9px 9px;border-radius:18px;background:rgb(255 255 255 / .05);border:1px solid rgb(255 255 255 / .14);color:#fff;text-decoration:none;transition:background .3s,border-color .3s,opacity .85s ease,transform .85s cubic-bezier(.2,.65,.25,1)}
.mc-photos{display:flex;gap:5px;flex:none}
.mc-photos img{display:block;width:56px;height:42px;object-fit:cover;border-radius:9px}
.mc-text{display:grid;gap:3px;min-width:0}
.mc-kicker{font-size:12px;line-height:1.3;letter-spacing:-.005em;color:rgb(255 255 255 / .6)}
.mc-title{font-size:16px;line-height:1.25;letter-spacing:-.02em}
.mc-title .firma{font-size:1.15em;line-height:1}
.mc-arrow{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:4px;border-radius:50%;background:var(--ind-d1);color:#0b0e10;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mc-arrow svg{width:14px;height:14px}
.manifesto-card:hover,.manifesto-card:focus-visible{background:rgb(255 255 255 / .09);border-color:rgb(255 255 255 / .3)}
.manifesto-card:hover .mc-arrow,.manifesto-card:focus-visible .mc-arrow{transform:translateX(3px)}
.manifesto-card:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:380px){
 .manifesto-card{gap:12px}
 .mc-photos{gap:0}
 .mc-photos img{width:44px;height:33px;border-radius:8px}
 .mc-photos img+img{margin-left:-12px;box-shadow:0 0 0 2px #0d0d0d}
 .mc-title{font-size:15px}
 .mc-arrow{width:30px;height:30px;margin-left:2px}
}
@media(min-width:768px){
 .manifesto{padding:200px 0}
 .manifesto-wrap{padding-inline:64px}
 .manifesto-p{margin-bottom:100px;font-size:64px;line-height:1.2;letter-spacing:-.02em}
 .manifesto-card{margin-top:64px;gap:18px;padding:11px 16px 11px 11px;border-radius:20px}
 .mc-photos img{width:80px;height:60px;border-radius:10px}
 .mc-kicker{font-size:13px}
 .mc-title{font-size:20px}
 .mc-arrow{width:40px;height:40px;margin-left:8px}
}

/* ── Phones: sizes on the measured viewport. --svh and --lvh are set once by
   the script after the opening (again only if the width changes), so the
   toolbar sliding away can't resize or move anything; elsewhere they fall
   back to the usual units. The opening isn't sticky here: it is exactly as
   tall as its section, and a sticky layer only made phones work harder. */
.hero-stage{position:relative;height:var(--scene-viewport-height,calc(var(--lvh,1vh) * 100))}
@supports(height:1svh){
 .intro{height:calc(var(--svh,1svh) * 100)}
 .hero-slogan{top:calc(var(--svh,1svh) * 21)}
 @media(max-width:700px){.hero-slogan{top:calc(var(--svh,1svh) * 17)}}
}
@media(max-width:700px){.hero-slogan{font-size:min(10.5vw,calc(var(--lvh,1vh) * 5.4))}}
/* Words read by screen readers and search engines only (headings drawn as SVG,
   paragraphs split into letters). */
.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}

/* Language switch: last in the menu, two halves of one soft pill, the current language lifted in it; and in the
   footer's legal line. */
.g-pop .g-lang{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:10px 4px 0;padding:4px;border-radius:15px;background:var(--pop-hover)}
.g-pop .g-lang a{justify-content:center;min-height:38px;padding:8px 10px;border-radius:11px;font-size:13.5px;color:var(--pop-mute)}
.g-pop .g-lang a::after{content:none}
.g-pop .g-lang a[aria-current]{color:var(--pop-ink);background:var(--pop-sel);box-shadow:0 1px 3px rgb(0 0 0 / .08)}
@media(hover:hover){.g-pop .g-lang a:not([aria-current]):hover{background:none;color:var(--pop-ink)}}
@media(max-width:700px){.g-pop .g-lang a{min-height:42px;font-size:14px}}
.end-lang{display:flex;flex:none;gap:14px;font-size:12px;line-height:1.6;letter-spacing:-.01em;white-space:nowrap}
.end-lang a{position:relative;padding-bottom:2px;color:var(--ink-muted);text-decoration:none;transition:color .25s}
.end-lang a[aria-current],.end-lang a:hover,.end-lang a:focus-visible{color:var(--ink)}
.end-lang a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5}
@media(max-width:700px){.end-lang{font-size:11px}}

/* ── AISBERG Labs, our Instagram. Last in the menu, under a thin line: the
   lowercase word with "labs" in the colours of the Labs series, which leads to the
   Labs page, and right under it, small, Instagram. */
.g-pop .g-labs{display:flex;flex-direction:column;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--pop-rule)}
.g-labs-mark{font-weight:500;letter-spacing:-.012em;white-space:nowrap}
.g-labs-mark span{background:linear-gradient(90deg,#9a8bff,#e0479f 58%,#ff7a59);padding-right:.06em;margin-right:-.06em;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.g-pop .g-labs-ig{justify-content:flex-start;gap:6px;min-height:0;margin-top:-6px;padding:4px 14px 8px 30px;font-size:13.5px;color:var(--pop-mute)}
.g-pop .g-labs-ig::after{content:none}
.g-labs-ig svg{display:block;width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){.g-pop .g-labs-ig:hover{color:var(--pop-ink);background:none}.g-pop .g-labs-ig:hover svg{transform:translate(1px,-1px)}}
@media(max-width:700px){.g-pop .g-labs-ig{padding:4px 14px 10px 30px;font-size:14px}}

/* ── aisberglabs on the home: a product too, but AISBERG's own, so it is set
   apart by its shape: right under AIDIT and Inquell, as wide as the two of
   them together on computers; on phones it runs from edge to edge, square,
   while the other cards keep their margins and their rounded corners. Like the
   product cards: the name top left (only "labs" in colour), the way in top
   right, then what it is. Below, the studio at work: the editing timeline of a
   video in production, running under the playhead with its timecode (AI video,
   titles, voice, music, subtitles). It moves only while the card is on screen
   (glacier.js), and it has no entrance, like the other two products. */
.pj-item-labs{grid-column:1/-1;display:grid;min-width:0}
.pj-labs{background-color:#0c0a12;
 background-image:
  url('./assets/dither.png'),
  radial-gradient(ellipse 60% 70% at 50% 118%,rgb(224 71 159 / 0.3000) 0.0%,rgb(224 71 159 / 0.1800) 28.0%,rgb(224 71 159 / 0.0600) 56.0%,rgb(224 71 159 / 0.0338) 63.0%,rgb(224 71 159 / 0.0150) 70.0%,rgb(224 71 159 / 0.0037) 77.0%,rgb(224 71 159 / 0) 84.0%),
  radial-gradient(ellipse 42% 60% at 92% -10%,rgb(107 92 255 / 0.3000) 0.0%,rgb(107 92 255 / 0.1800) 28.8%,rgb(107 92 255 / 0.0600) 57.6%,rgb(107 92 255 / 0.0338) 64.8%,rgb(107 92 255 / 0.0150) 72.0%,rgb(107 92 255 / 0.0037) 79.2%,rgb(107 92 255 / 0) 86.4%),
  radial-gradient(ellipse 36% 50% at 4% 110%,rgb(255 122 89 / 0.1600) 0.0%,rgb(255 122 89 / 0.0960) 28.8%,rgb(255 122 89 / 0.0320) 57.6%,rgb(255 122 89 / 0.0180) 64.8%,rgb(255 122 89 / 0.0080) 72.0%,rgb(255 122 89 / 0.0020) 79.2%,rgb(255 122 89 / 0) 86.4%);
 background-size:64px 64px,auto,auto,auto;background-repeat:repeat,no-repeat,no-repeat,no-repeat}
.pj-labs:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
/* "labs" in the series' gradient; the s keeps its whole curve */
.lc-labs{padding-right:.1em;margin-right:-.1em;background:linear-gradient(90deg,#9a8bff,#e0479f 58%,#ff7a59);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lc-go{background:#fff;color:#1b1230;font-weight:600;box-shadow:0 6px 18px rgb(10 0 20 / .25)}
.lc-go svg{width:1em;height:1em;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pj-labs:hover .lc-go svg,.pj-labs:focus-visible .lc-go svg{transform:translateX(3px)}
/* what it is: a line in white, bigger than a product's description, and the description under it */
.pj-labs .lc-say{max-width:none;font-size:clamp(19px,2.9cqw,28px);line-height:1.2;letter-spacing:-.025em;color:#fff}
.pj-labs .lc-desc{grid-row:3;max-width:62ch;color:rgb(255 255 255 / .62)}
.lc-view{position:relative;padding:clamp(24px,2.8vw,38px) clamp(20px,4.6cqw,34px) clamp(22px,2.8vw,34px)}

/* the timeline */
@property --lt-s{syntax:"<integer>";inherits:false;initial-value:0}
@property --lt-f{syntax:"<integer>";inherits:false;initial-value:0}
.lt{--pw:2400px;--th:34px;--hw:134px;position:relative;display:block;border-radius:16px;overflow:hidden;background:rgb(16 14 24 / .92);
 box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08),0 24px 60px rgb(0 0 0 / .35);color:rgb(255 255 255 / .6);font:500 12px/1 "Aisberg Sans","Helvetica Neue",Arial,sans-serif;letter-spacing:-.005em}
.lt svg{display:block}
.lt-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:40px;padding:0 16px;border-bottom:1px solid rgb(255 255 255 / .07)}
.lt-status{display:flex;align-items:center;gap:8px}
.lt-status i{width:7px;height:7px;border-radius:50%;background:#ff5f57;box-shadow:0 0 0 3px rgb(255 95 87 / .16)}
.lt-tc{justify-self:center;font-size:13px;letter-spacing:.06em;color:#fff;font-variant-numeric:tabular-nums;counter-reset:lts var(--lt-s) ltf var(--lt-f)}
.lt-tc::after{content:"00:00:" counter(lts,decimal-leading-zero) ":" counter(ltf,decimal-leading-zero)}
.lt-fmt{justify-self:end}
.lt-body{display:grid;grid-template-columns:var(--hw) minmax(0,1fr)}
.lt-heads{display:flex;flex-direction:column;border-right:1px solid rgb(255 255 255 / .07)}
.lt-head{display:flex;align-items:center;gap:9px;height:var(--th);padding:0 14px;border-bottom:1px solid rgb(255 255 255 / .05)}
.lt-head:last-child{border-bottom:0}
.lt-head b{font-weight:500;white-space:nowrap}
.lt-head svg{flex:none;width:15px;height:15px;fill:none;stroke:rgb(255 255 255 / .7);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.lt-head-ruler{height:24px}
.lt-lanes{position:relative;overflow:hidden}
/* three copies of the same 30 seconds: the second one starts under the playhead, and the run moves by one */
.lt-track{display:flex;width:max-content;margin-left:calc(34% - var(--pw));animation:lt-run 30s linear infinite;animation-play-state:paused}
@keyframes lt-run{to{transform:translate3d(calc(-1 * var(--pw)),0,0)}}
.lt-period{position:relative;flex:none;width:var(--pw);display:flex;flex-direction:column}
.lt-ruler{position:relative;height:24px;border-bottom:1px solid rgb(255 255 255 / .07);
 background:linear-gradient(90deg,rgb(255 255 255 / .2) 1px,transparent 1px) 0 100%/calc(var(--pw) / 30) 6px repeat-x}
.lt-ruler i{position:absolute;top:0;bottom:0;padding:5px 0 0 5px;font-style:normal;font-size:10px;letter-spacing:.04em;color:rgb(255 255 255 / .42);border-left:1px solid rgb(255 255 255 / .22);font-variant-numeric:tabular-nums}
.lt-row{position:relative;height:var(--th);border-bottom:1px solid rgb(255 255 255 / .05)}
.lt-row:last-child{border-bottom:0}
.lt-clip{position:absolute;top:5px;bottom:5px;border-radius:5px;overflow:hidden}
.lt-v1{background:linear-gradient(90deg,rgb(0 0 0 / .22) 1px,transparent 1px) 0 0/calc(var(--pw) / 20) 100%,linear-gradient(180deg,#6d5ef2,#4c40c4);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16)}
.lt-ai{position:absolute;left:7px;top:50%;width:11px;height:11px;transform:translateY(-50%);fill:#fff;filter:drop-shadow(0 0 4px rgb(255 255 255 / .6))}
.lt-v2{background:linear-gradient(180deg,#a463db,#8143bb);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16)}
.lt-t{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:600;font-size:11px;color:#fff}
.lt-a1{background:rgb(224 71 159 / .15);box-shadow:inset 0 0 0 1px rgb(224 71 159 / .42)}
.lt-a2{background:rgb(255 122 89 / .12);box-shadow:inset 0 0 0 1px rgb(255 122 89 / .38)}
.lt-wave{position:absolute;inset:3px 4px;width:calc(100% - 8px);height:calc(100% - 6px)}
.lt-wave path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.lt-a1 .lt-wave path{stroke:#ef6aa8}
.lt-a2 .lt-wave path{stroke:#ff9070}
.lt-st{top:9px;bottom:9px;background:rgb(255 255 255 / .16);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2)}
.lt-playhead{position:absolute;top:0;bottom:0;left:34%;width:1px;background:#fff;box-shadow:0 0 10px rgb(255 255 255 / .55)}
.lt-playhead::before{content:"";position:absolute;left:-5px;top:0;width:11px;height:12px;border-radius:2px 2px 6px 6px;background:#fff}
/* running, only on screen: the timeline under the playhead, the timecode, the red light of production */
.lt-tc{animation:lt-sec 30s steps(30) infinite,lt-frm 1s steps(25) infinite;animation-play-state:paused}
@keyframes lt-sec{from{--lt-s:0}to{--lt-s:30}}
@keyframes lt-frm{from{--lt-f:0}to{--lt-f:25}}
.lt-status i{animation:lt-rec 1.6s ease-in-out infinite;animation-play-state:paused}
@keyframes lt-rec{0%,100%{opacity:1}50%{opacity:.35}}
.pj-labs.is-run .lt-track,.pj-labs.is-run .lt-tc,.pj-labs.is-run .lt-status i{animation-play-state:running}
/* on computers it is exactly as tall as AIDIT and Inquell above it: the height of their row, measured by
   projects.js (without the script, about that); the room this leaves goes above the timeline */
@media(min-width:961px){
 .pj-labs .pj-prod-head{padding-bottom:0}
 .pj-labs{min-height:var(--pj-row,calc(clamp(320px,calc(var(--lvh,1vh) * 54),540px) + 138px))}
 .pj-labs .lc-view{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end}
 .pj-labs .lt{--th:42px}
}
@media(max-width:700px){
 .pj-item-labs{margin-inline:calc(-1 * clamp(24px,5.6vw,110px))}            /* out to the screen's edges */
 .pj-labs{border-radius:0}
 .pj-labs .pj-prod-head,.pj-labs .lc-view{padding-inline:clamp(24px,5.6vw,110px)} /* its words and timeline stay on the page's margins */
 .pj-labs:focus-visible{outline-color:#fff;outline-offset:-6px}
 .pj-labs .lc-say{font-size:20px}
 .lc-view{padding:22px 16px 18px}
 .lt{--pw:1300px;--th:26px;--hw:38px;border-radius:12px;font-size:10.5px}
 .lt-bar{height:34px;padding:0 12px}
 .lt-tc{font-size:11.5px}
 .lt-head{justify-content:center;padding:0}
 .lt-head b{display:none}
 .lt-head svg{width:14px;height:14px}
 .lt-head-ruler,.lt-ruler{height:20px}
 .lt-ruler i{font-size:9px;padding:4px 0 0 4px}
 .lt-clip{top:4px;bottom:4px;border-radius:4px}
 .lt-st{top:7px;bottom:7px}
 .lt-ai{width:9px;height:9px;left:5px}
}
@media(prefers-reduced-motion:reduce){.pj-labs *{animation:none!important;transition:none!important}}

/* Prodotti from the menu: the page stops one pixel into the white, never on the black above it (the bar's blur
   would smear that black into a shadow), and the title always has room under the bar: its letters start
   about 30 px under it (the title's letters begin .29 em below the top of their line) */
#progetti.projects{scroll-margin-top:-1px;padding-top:max(calc(var(--sec-gap) * .5),calc(119px - clamp(12.76px,1.798vw,32.48px)))}
@media(max-width:700px){#progetti.projects{padding-top:max(calc(var(--sec-gap) * .5),calc(103px - 3.77vw))}}

/* the card's way in on narrow phones: "Scopri" (the name is already beside it), so the two never touch */
@media(max-width:430px){.lc-go-name{display:none}}