/* GIAL 2026 — fondamenta: palette, tipografia, intestazione, hero, footer.
   Attivo solo con body[data-ms-layout="gial2026"] (vedi portal/minisite_layouts.py). */

@view-transition { navigation: auto; }

body[data-ms-layout="gial2026"] {
  --g-ink: #2b1d20;
  --g-ink-2: #4b3a3e;
  --g-paper: #fbf7f4;
  --g-paper-2: #f4eae6;
  --g-terra: #7a0b1c;
  --g-terra-2: #a31d33;
  --g-gold: #d2b08f;
  --g-brand: #700000;
  --g-brand-deep: #4d0a14;
  --g-rose: #e9c4c4;
  --g-mist: #f1e4e1;
  --g-line: rgba(43, 29, 32, 0.12);
  --g-display: "Jost", "Avenir Next", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --g-sans: "Inter", "Avenir Next", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
  --g-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* variabili del tema portale ricolorate sul bordeaux del logo: pulsanti, filtri e badge delle pagine collegate */
  --brand: #700000;
  --brand-strong: #560000;
  --brand-rgb: 112, 0, 0;
  --accent: #a31d33;
  --bg: var(--g-paper);
  background: var(--g-paper);
  color: var(--g-ink);
  font-family: var(--g-sans);
  overflow-x: hidden;
}

html:not(#_):not(#_):not(#_) body[data-gial-page] main.page { padding: 0 !important; margin: 0 !important; }
html:not(#_):not(#_):not(#_) body[data-gial-page] main.page > .container { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
body[data-gial-page] .agency-minisite-breadcrumb { display: none; }
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"]:not([data-gial-page]) main.page { padding-top: 112px !important; }

.g-sprite { position: absolute; width: 0; height: 0; }
.g-sprite symbol, .g-card-ico use, .g-ico use { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.g-root { color: var(--g-ink); }
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"], html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] main.page, html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] .g-root { background: var(--g-paper) !important; }
/* Il portale impone color:var(--ink) !important su p/li/span e var(--ink-strong) su titoli:
   per cambiare colore si ridefiniscono le variabili sulla superficie. */
body[data-ms-layout="gial2026"] { --ink: var(--g-ink); --ink-strong: var(--g-ink); }
body[data-ms-layout="gial2026"] :is(.g-cta, .g-marquee, .g-footer, .g-team-card, .g-card--wide, .g-sticky-card, .g-reach-card, .g-menu) { --ink: #fff; --ink-strong: #fff; }
body[data-ms-layout="gial2026"] :is(.g-kicker, .g-listing-price, .g-value-n, .g-service-n, .g-stat em, .g-orbit span, .g-link) { --ink: var(--g-terra); --ink-strong: var(--g-terra); }
body[data-ms-layout="gial2026"] :is(.g-cta, .g-footer, .g-team-card, .g-sticky-card) .g-kicker { --ink: var(--g-rose); --ink-strong: var(--g-rose); }
body[data-ms-layout="gial2026"] .g-footer h3 { --ink: var(--g-gold); --ink-strong: var(--g-gold); }
body[data-ms-layout="gial2026"] :is(.g-story-year, .g-vline-year, .g-step-n, .g-hero-year) { --ink: transparent; --ink-strong: transparent; }
body[data-ms-layout="gial2026"] .g-root :is(h1, h2, h3, p, li, span, strong, em, small, dt, dd, i) { font-family: inherit; }
body[data-ms-layout="gial2026"] .g-root :is(.g-display, .g-h2, .g-card h3, .g-story-card h3, .g-value h3, .g-step h3, .g-service-body h3, .g-office h3, .g-vline-card h3, .g-team-card h3, .g-sticky-card h3) { font-family: var(--g-display); }

body[data-ms-layout="gial2026"] :is(.g-btn--primary, .g-btn--ghost-light) { --ink: #fff; --ink-strong: #fff; }
body[data-ms-layout="gial2026"] :is(.g-btn--light, .g-btn--ghost, .g-nav a) { --ink: var(--g-ink); --ink-strong: var(--g-ink); }
body[data-ms-layout="gial2026"] .g-sticky-card .g-btn--ghost { --ink: #fff; --ink-strong: #fff; }

html:not(#_):not(#_):not(#_) .g-wrap { width: min(1200px, 100% - 48px) !important; margin-left: auto !important; margin-right: auto !important; }

/* Tipografia */
.g-kicker { font: 500 0.74rem/1 var(--g-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-terra); margin: 0 0 18px; }
.g-display { font: 300 clamp(2.5rem, 5.8vw, 5.2rem)/1.04 var(--g-display); letter-spacing: -0.035em; margin: 0; max-width: 16ch; }
.g-display--page { font-size: clamp(2.2rem, 5.4vw, 4.6rem); max-width: 20ch; }
.g-h2 { font: 300 clamp(1.8rem, 3.4vw, 2.8rem)/1.12 var(--g-display); letter-spacing: -0.025em; margin: 0 0 28px; max-width: 22ch; }
.g-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; max-width: 58ch; margin: 28px 0 0; opacity: 0.88; }
.g-copy { font-size: 1.08rem; line-height: 1.75; max-width: 62ch; opacity: 0.9; }
.g-center { text-align: center; }
.g-section-head { margin-bottom: 40px; }

/* Parole animate (data-split) */
.g-js [data-split] .g-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.g-js [data-split] .g-w > i { display: inline-block; font-style: normal; transform: translateY(110%) rotate(3deg); transition: transform 0.9s var(--g-ease); transition-delay: calc(var(--i, 0) * 55ms); }
.g-js [data-split].is-in .g-w > i { transform: none; }

/* Reveal generico */
.g-js [data-reveal] { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 0.9s var(--g-ease), transform 0.9s var(--g-ease), filter 0.9s var(--g-ease); transition-delay: var(--d, 0ms); }
.g-js [data-reveal="zoom"] { transform: scale(0.88); }
.g-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Bottoni */
.g-btn { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font: 600 0.98rem/1 var(--g-sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transform: translate(var(--mx), var(--my)); transition: transform 0.25s var(--g-ease), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.g-btn--primary, .g-btn--primary * { color: #fff !important; }
.g-btn--ghost-light, .g-btn--ghost-light * { color: #fff !important; }
.g-btn--ghost, .g-btn--ghost * , .g-btn--light, .g-btn--light * { color: var(--g-ink) !important; }
.g-sticky-card .g-btn--ghost, .g-sticky-card .g-btn--ghost * { color: #fff !important; }
.g-btn--primary { background: var(--g-brand); color: #fff; box-shadow: 0 12px 30px -10px rgba(112, 0, 0, 0.6); }
.g-btn--primary:hover { background: var(--g-terra-2); box-shadow: 0 18px 40px -12px rgba(112, 0, 0, 0.7); }
.g-btn--ghost { color: var(--g-ink); border-color: var(--g-line); background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); }
.g-btn--ghost:hover { border-color: var(--g-ink); }
.g-btn--ghost-light { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.g-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.g-btn--light { background: #fff; color: var(--g-ink); }
.g-btn--light:hover { background: var(--g-paper-2); }
.g-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.g-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--g-terra); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: gap 0.25s; }
.g-link:hover { gap: 14px; }

/* Intestazione */
.g-header { position: fixed; inset: 0 0 auto 0; z-index: 80; padding: 14px 20px; transition: transform 0.5s var(--g-ease); }
.g-header.is-hidden { transform: translateY(-120%); }
.g-header.is-hidden .g-header-inner { box-shadow: none; }
.g-header-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 8px 12px 8px 16px; border-radius: 999px; background: rgba(246, 241, 231, 0.72); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(13, 24, 21, 0.08); box-shadow: 0 10px 40px -18px rgba(13, 24, 21, 0.4); transition: background 0.4s, box-shadow 0.4s; }
.g-header.is-solid .g-header-inner { background: rgba(246, 241, 231, 0.94); }
.g-brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; color: var(--g-ink); font-weight: 700; }
.g-brand img { height: 40px; width: auto; border-radius: 8px; display: block; }
.g-nav { display: flex; gap: 4px; }
.g-nav a { position: relative; padding: 10px 14px; border-radius: 999px; color: var(--g-ink); text-decoration: none; font-size: 0.93rem; font-weight: 500; transition: background 0.25s; }
.g-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--g-terra); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--g-ease); }
.g-nav a:hover::after, .g-nav a.is-active::after { transform: scaleX(1); }
.g-header-call { padding: 11px 18px; font-size: 0.9rem; }
.g-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--g-line); background: transparent; position: relative; cursor: pointer; }
.g-burger i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--g-ink); transition: transform 0.35s var(--g-ease); }
.g-burger i:first-child { top: 17px; } .g-burger i:last-child { top: 25px; }
.g-burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.g-burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }
.g-progress { position: absolute; left: 36px; right: 36px; bottom: 4px; height: 2px; border-radius: 2px; overflow: hidden; }
.g-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--g-brand), var(--g-gold)); transform: scaleX(0); transform-origin: left; }

/* Menu a tutto schermo + sipario di pagina */
.g-menu { position: fixed; inset: 0; z-index: 70; background: var(--g-brand-deep); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 100px 8vw 40px; clip-path: circle(0 at calc(100% - 50px) 40px); transition: clip-path 0.7s var(--g-ease); }
.g-menu[hidden] { display: flex; visibility: hidden; }
.g-menu.is-open { clip-path: circle(150% at calc(100% - 50px) 40px); visibility: visible; }
.g-menu nav { display: flex; flex-direction: column; gap: 6px; }
.g-menu nav a { font: 500 clamp(2rem, 8vw, 3.4rem)/1.15 var(--g-display); color: #fff; text-decoration: none; opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--g-ease), transform 0.6s var(--g-ease); transition-delay: calc(0.25s + var(--i, 0) * 70ms); }
.g-menu nav a:nth-child(2) { --i: 1; } .g-menu nav a:nth-child(3) { --i: 2; } .g-menu nav a:nth-child(4) { --i: 3; } .g-menu nav a:nth-child(5) { --i: 4; } .g-menu nav a:nth-child(6) { --i: 5; }
.g-menu.is-open nav a { opacity: 1; transform: none; }
.g-menu-foot { margin-top: 36px; opacity: 0.7; line-height: 1.7; }
.g-menu-foot a { color: var(--g-gold); }
.g-curtain { position: fixed; inset: 0; z-index: 200; background: var(--g-brand); pointer-events: none; transform: translateY(0); animation: g-curtain-up 0.9s var(--g-ease) 0.05s forwards; }
@keyframes g-curtain-up { to { transform: translateY(-101%); } }

/* Hero */
.g-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: linear-gradient(180deg, #fffdfc 0%, #f8eeeb 100%); color: var(--g-ink); overflow: hidden; isolation: isolate; }
.g-hero--page { min-height: 72vh; padding-top: 80px; }
.g-hero-inner { position: relative; z-index: 6; padding-block: 140px 160px; }
.g-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.g-hero-logo { display: grid; place-items: center; }
.g-hero-logo img { width: clamp(200px, 27vw, 380px); height: auto; filter: drop-shadow(0 30px 50px rgba(77, 10, 20, 0.28)); animation: g-float 7s ease-in-out infinite; transform-origin: center; }
.g-hero-logo::before { content: ""; position: absolute; width: clamp(260px, 34vw, 480px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(112, 0, 0, 0.25); animation: g-spin 50s linear infinite; }
.g-hero--page .g-hero-inner { padding-block: 120px 130px; }
.g-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.7; }
.g-hero-year { position: absolute; z-index: 2; right: -2vw; bottom: 6%; pointer-events: none; font: 700 clamp(9rem, 28vw, 26rem)/0.8 var(--g-display); color: transparent; -webkit-text-stroke: 1.5px rgba(112, 0, 0, 0.16); letter-spacing: -0.06em; pointer-events: none; white-space: nowrap; }
.g-hero--page .g-hero-year { font-size: clamp(7rem, 20vw, 17rem); }
.g-aurora { position: absolute; inset: -20%; z-index: 0; filter: blur(70px); }
.g-aurora i { position: absolute; border-radius: 50%; opacity: 0.38; animation: g-drift 18s ease-in-out infinite alternate; }
.g-aurora i:nth-child(1) { width: 55vw; height: 55vw; left: -5%; top: -10%; background: radial-gradient(circle, rgba(163, 29, 51, 0.55) 0%, transparent 65%); }
.g-aurora i:nth-child(2) { width: 50vw; height: 50vw; right: -8%; top: 10%; background: radial-gradient(circle, rgba(233, 196, 196, 0.9) 0%, transparent 65%); animation-duration: 22s; animation-delay: -6s; }
.g-aurora i:nth-child(3) { width: 40vw; height: 40vw; left: 30%; bottom: -15%; background: radial-gradient(circle, rgba(210, 176, 143, 0.8) 0%, transparent 65%); animation-duration: 26s; animation-delay: -12s; opacity: 0.45; }
.g-aurora--soft { opacity: 0.6; }
@keyframes g-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(8vw, 6vh) scale(1.2); } }
.g-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.1; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.7'/></svg>"); }
.g-hero[data-spotlight]::after, .g-cta[data-spotlight]::after, .g-world[data-spotlight]::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 40%), rgba(112, 0, 0, 0.07), transparent 60%); }
.g-hills { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: clamp(110px, 18vw, 220px); z-index: 4; pointer-events: none; }
.g-hill--3 { fill: #f4e2e0; } .g-hill--2 { fill: #ecd0cf; } .g-hill--1 { fill: var(--g-paper); }
.g-scroll-hint { position: absolute; z-index: 5; left: 50%; bottom: clamp(70px, 12vw, 130px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.75; color: var(--g-ink); }
.g-scroll-hint i { width: 1px; height: 46px; background: linear-gradient(var(--g-brand), transparent); animation: g-scroll 2s ease-in-out infinite; transform-origin: top; }
@keyframes g-scroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Footer */
.g-footer { background: var(--g-brand-deep); color: rgba(255, 255, 255, 0.82); padding: 90px max(24px, 6vw) 30px; }
.g-footer-top { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1.6fr; gap: 60px; }
.g-footer .g-footer-claim { font-weight: 300; letter-spacing: -0.04em; font: 500 clamp(2rem, 4vw, 3.4rem)/1.1 var(--g-display); color: #fff; margin: 0; }
.g-footer-claim em { color: var(--g-rose); font-style: normal; }
.g-footer .g-footer-sub { margin-top: 14px; opacity: 0.6; }
.g-footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 28px; }
.g-footer-cols p { overflow-wrap: normal; }
.g-footer .g-nowrap { white-space: nowrap; }
.g-footer h3 { font: 600 0.75rem/1 var(--g-sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--g-gold); margin: 0 0 16px; }
.g-footer p { margin: 0 0 10px; line-height: 1.6; font-size: 0.95rem; }
.g-footer a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--g-ease); }
.g-footer a:hover { background-size: 100% 1px; }
.g-footer-bottom { max-width: 1200px; margin: 60px auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.82rem; opacity: 0.6; }

/* Il portale colora i footer: nel tema il piè di pagina resta scuro */
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] .g-footer { background: var(--g-brand-deep) !important; color: rgba(255, 255, 255, 0.84) !important; border: 0 !important; box-shadow: none !important; }
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] .g-footer a { color: inherit !important; }

/* Pulsante principale su superfici bordeaux: bianco con testo bordeaux (mai bordeaux su bordeaux) */
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] :is(.g-cta, .g-sticky-card, .g-team-card, .g-reach-card, .g-menu) .g-btn--primary { background: #fff !important; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.35); }
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] :is(.g-cta, .g-sticky-card, .g-team-card, .g-reach-card, .g-menu) .g-btn--primary, html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] :is(.g-cta, .g-sticky-card, .g-team-card, .g-reach-card, .g-menu) .g-btn--primary * { color: var(--g-brand) !important; }
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] :is(.g-cta, .g-sticky-card) .g-btn--primary:hover { background: var(--g-rose) !important; }
/* Titoli del piè di pagina leggibili */
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] .g-footer h3 { color: var(--g-rose) !important; font-weight: 500; }
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] .g-footer .g-kicker { color: var(--g-rose) !important; }
html:not(#_):not(#_):not(#_) body[data-ms-layout="gial2026"] .g-footer { margin-top: 0 !important; }

/* Hero su telefono: testo sopra, logo sotto e piu' piccolo */
@media (max-width: 860px) {
  .g-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .g-hero-logo { order: -1; justify-content: start; justify-items: start; }
  .g-hero-logo img { width: clamp(110px, 30vw, 170px); }
  .g-hero-logo::before { display: none; }
  .g-hero-inner { padding-block: 110px 140px; }
  .g-display { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .g-lead { font-size: 1.02rem; }
  .g-actions { gap: 10px; }
  .g-btn { padding: 14px 22px; }
  .g-scroll-hint { display: none; }
}