/* Seconda bozza: colori campionati dal logo nel PDF JOIA. */
:root { --blue: #004AAD; --light-blue: #E1E9F6; --ink: #173A63; --muted: #526781; --paper: #FFFFFF; --sand: #F8F7F3; --serif: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.75 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
em { font-weight: 400; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.shell { max-width: 1280px; padding-inline: 40px; margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; background: white; padding: 12px; }
.skip-link:focus { top: 10px; }
.header { background: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--light-blue); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 108px; gap: 24px; }
.logo { display: block; width: 139px; flex-shrink: 0; }
.navigation { display: flex; gap: 34px; align-items: center; }
.navigation > a { text-decoration: none; font-size: 13px; font-weight: 500; }
.navigation > a:not(.button):hover { color: var(--blue); text-decoration: underline; text-underline-offset: 5px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 35px; padding: 17px 24px; background: var(--blue); color: #fff; text-decoration: none; font-size: 13px; font-weight: 500; border: 1px solid var(--blue); transition: background .2s; }
.button:hover { background: #003A88; }
.button span { font-size: 20px; line-height: 1; }
.button-small { padding: 12px 18px; gap: 25px; }
.menu-toggle { display: none; background: none; border: 0; padding: 12px; width: 44px; height: 44px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: var(--blue); margin-block: 6px; }
.kicker { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--blue); margin-bottom: 25px; }
.hero2 { background: linear-gradient(90deg, var(--sand) 0%, var(--sand) 53%, var(--light-blue) 53%); padding-block: 64px 62px; }
.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center; }
.hero-copy2 .kicker { display: flex; align-items: center; gap: 12px; }
.hero-copy2 .kicker > span { width: 22px; height: 1px; background: var(--blue); }
h1 { font-size: clamp(54px, 5.3vw, 76px); line-height: 1.06; letter-spacing: -.035em; color: var(--blue); }
.intro { max-width: 390px; margin-block: 27px 29px; color: var(--muted); font-size: 14px; }
.hero-signature { display: flex; gap: 13px; align-items: center; margin-top: 42px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.signature-line { height: 1px; flex: 1; max-width: 90px; background: #c6d2e2; }
.hero-photo { position: relative; padding: 16px 16px 0; background: white; border: 1px solid #d4deec; margin-left: 0; }
.hero-photo > img { width: 100%; height: 450px; object-fit: cover; object-position: center; }
.hero-photo figcaption { padding: 22px 7px 25px; }
.hero-photo figcaption span { display: block; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 6px; }
.hero-photo figcaption strong { font: 400 23px/1.3 var(--serif); }
.round-seal { position: absolute; top: -26px; right: -20px; width: 106px; height: 106px; border: 1px solid var(--blue); border-radius: 50%; color: var(--blue); background: var(--light-blue); font-size: 10px; letter-spacing: .12em; text-align: center; line-height: 1.4; display: flex; flex-direction: column; justify-content: center; transform: rotate(12deg); }
.round-seal i { font: italic 23px/1 var(--serif); letter-spacing: 0; }
.brand-band { display: flex; justify-content: center; gap: 48px; align-items: center; background: var(--blue); color: white; padding: 20px 30px; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.brand-band span:nth-child(even) { font-size: 21px; color: #b7d0f0; }
.section { padding-block: 96px; }
h2 { font-size: clamp(34px, 3.7vw, 50px); line-height: 1.18; letter-spacing: -.025em; color: var(--blue); }
.story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; }
.story-text { padding-top: 38px; font-size: 14px; color: var(--muted); }
.story-text p + p { margin-top: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 26px; text-decoration: none; color: var(--blue); font-size: 12px; border-bottom: 1px solid var(--blue); padding-bottom: 7px; }
.story-text .text-link { margin-top: 25px; }
.text-link span { font-size: 20px; }
.atmosphere { background: var(--sand); }
.section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 45px; }
.section-top > p { font-size: 13px; color: var(--muted); max-width: 320px; }
.photo-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; }
.space-photo img { width: 100%; height: 350px; object-fit: cover; }
.space-photo figcaption { padding-top: 18px; }
.space-photo figcaption > span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.space-photo h3 { font-size: 26px; color: var(--blue); margin-top: 6px; }
.identity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 55px; padding-top: 35px; border-top: 1px solid #d8e0e9; }
.detail-number { font: italic 23px var(--serif); color: var(--blue); }
.identity-grid h3 { font-size: 23px; margin: 12px 0; color: var(--blue); }
.identity-grid p { font-size: 13px; color: var(--muted); max-width: 300px; }
.partner2 { background: var(--blue); color: white; padding-block: 85px; position: relative; overflow: hidden; }
.partner-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; position: relative; z-index: 1; }
.partner2 .kicker { color: #c1d6f5; }
.partner2 h2 { color: white; }
.partner-copy { font-size: 14px; }
.partner-copy p + p { margin-top: 16px; }
.button-light { background: white; color: var(--blue); border-color: white; margin-top: 28px; }
.button-light:hover { background: var(--light-blue); }
.partner2 a:focus-visible { outline-color: white; }
.partner-watermark { position: absolute; font: 200px/1 var(--serif); opacity: .06; bottom: -42px; left: 15%; pointer-events: none; }
.contact2 { text-align: center; }
.contact2 > p:not(.kicker) { font-size: 14px; color: var(--muted); margin-top: 26px; }
.contact-email { display: inline-block; font-size: clamp(17px, 2.5vw, 27px); color: var(--blue); text-decoration: none; border-bottom: 1px solid #a0bada; padding-bottom: 10px; margin-top: 25px; overflow-wrap: anywhere; }
.contact-email span { padding-left: 12px; }
.contact-whatsapp { margin-top: 28px; }
.footer2 { border-top: 1px solid var(--light-blue); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 36px; }
.footer-top > p { font: 21px/1.4 var(--serif); color: var(--blue); }
.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid var(--light-blue); padding-block: 20px; font-size: 10px; color: var(--muted); }
@media (max-width: 1000px) {
  .hero-grid { gap: 35px; }
  .hero-photo > img { height: 420px; }
  .story, .partner-grid { gap: 45px; }
  .brand-band { gap: 25px; font-size: 9px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 87px; }
  .shell { padding-inline: 24px; }
  .header-inner { min-height: 84px; }
  .logo { width: 103px; }
  .menu-toggle { display: block; }
  .navigation { display: none; position: absolute; top: 84px; left: 0; right: 0; background: white; padding: 24px; border-bottom: 1px solid var(--light-blue); flex-direction: column; align-items: stretch; gap: 22px; }
  .navigation.open { display: flex; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hero2 { background: var(--sand); padding-block: 43px; }
  .hero-grid, .story, .partner-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero-copy2 .kicker { font-size: 8px; letter-spacing: .12em; }
  h1 { font-size: clamp(49px, 10vw, 72px); }
  .intro { max-width: 440px; }
  .hero-signature { margin-top: 28px; }
  .hero-photo { margin-top: 15px; padding: 10px 10px 0; }
  .hero-photo > img { height: 320px; }
  .hero-photo figcaption strong { font-size: 21px; }
  .round-seal { right: 8px; width: 85px; height: 85px; font-size: 8px; }
  .brand-band { flex-wrap: wrap; gap: 8px 15px; font-size: 8px; padding: 18px 20px; }
  .brand-band span:nth-child(even) { font-size: 15px; }
  .section { padding-block: 60px; }
  .story-text { padding-top: 0; }
  .section-top { display: block; margin-bottom: 30px; }
  .section-top > p { margin-top: 24px; }
  .photo-grid, .identity-grid { grid-template-columns: 1fr; gap: 32px; }
  .space-photo img { height: auto; }
  .identity-grid { margin-top: 38px; }
  .identity-grid p { max-width: none; }
  .partner2 { padding-block: 60px; }
  .partner-grid { gap: 28px; }
  .footer-top { flex-wrap: wrap; gap: 25px; }
  .footer-top > p { font-size: 17px; }
  .footer-top .text-link { font-size: 11px; }
  .footer-bottom { font-size: 9px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }