/* ==========================================================================
   Unipol Agenzia Messina Fiera — « Studio professionale editoriale, lo Stretto »
   Minimal luxe éditorial : bianco calce, blu Stretto profond, accent limone
   siciliano. Instrument Serif (display) + Libre Franklin (texte).
   Signature : la LINEA DELLO STRETTO (deux rives en un trait SVG, un point
   lumineux au milieu) en filet de titre, horizon du hero, séparateurs.
   Aucune classe custom : ids, classes Bootstrap, pseudo-éléments, attributs.
   ========================================================================== */

:root {
  --m-blu: #12305a;
  --m-blu-2: #1d4a85;
  --m-notte: #0b1e3a;
  --m-limone: #e2cf4a;
  --m-limone-d: #b9a520;
  --m-calce: #f7f5ef;
  --m-sabbia: #ece6d8;
  --m-inchiostro: #1a2433;
  --m-grigio: #5b6472;
  --m-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --m-sans: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --bs-body-font-family: var(--m-sans);
  --bs-body-font-weight: 300;
  --bs-body-color: var(--m-inchiostro);
  --bs-body-bg: var(--m-calce);
  --bs-primary: var(--m-blu);
  --bs-primary-rgb: 18, 48, 90;
  --bs-link-color: var(--m-blu-2);
  --bs-link-color-rgb: 29, 74, 133;
  --bs-link-hover-color: var(--m-blu);
  --bs-link-hover-color-rgb: 18, 48, 90;
  --bs-border-color: rgba(18, 48, 90, 0.14);
  --bs-border-radius: 2px;
  --bs-border-radius-lg: 4px;
  --bs-focus-ring-color: rgba(226, 207, 74, 0.6);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  background: var(--m-calce);
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--m-limone); color: var(--m-notte); }
b, strong { font-weight: 600; color: var(--m-blu); }
a, button, label[for] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--m-limone-d) !important; outline-offset: 3px; }

h1, h2, h3, .h2, .h3, .navbar-brand, .display-1 {
  font-family: var(--m-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--m-blu);
  line-height: 1.05;
}
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
[data-kicker], #lettera > p:first-child {
  font-family: var(--m-sans);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--m-blu-2);
}

/* ---------- Linea dello Stretto (signature) ---------- */
[data-stretto] { display: block; margin-inline: auto; overflow: visible; }
[data-stretto='short'] { width: 132px; height: 16px; }
[data-stretto='wide'] { width: min(100%, 980px); height: 40px; }
[data-stretto] path {
  stroke: var(--m-blu);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400;
  stroke-dashoffset: 0;
  animation: m-draw 2.4s var(--m-ease) both;
}
[data-stretto] path:last-of-type { animation-delay: 0.25s; }
[data-stretto] circle { fill: var(--m-limone); stroke: var(--m-blu); stroke-width: 1; vector-effect: non-scaling-stroke; animation: m-glow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ---------- Navbar fine ---------- */
#testata {
  background: rgba(247, 245, 239, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--bs-border-color);
}
#testata .navbar-brand { font-size: 1.55rem; font-style: italic; }
#testata .nav-link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--m-inchiostro);
  position: relative;
  padding-inline: 0.9rem !important;
}
#testata .nav-link::after {
  content: '';
  position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 1px;
  background: var(--m-blu);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--m-ease);
}
#testata .nav-link:hover::after, #testata .nav-link:focus-visible::after { transform: scaleX(1); }
#testata .navbar-toggler:focus { box-shadow: none; }

/* ---------- Hero éditorial centré ---------- */
#Home h1 {
  font-size: clamp(3rem, 8.6vw, 8.2rem);
  line-height: 0.95;
  max-width: 13ch;
}
#Home h2 {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: var(--m-grigio);
}
#orizzonte {
  height: clamp(300px, 56vh, 640px);
  border-radius: 999px 999px 4px 4px / 260px 260px 4px 4px;
  box-shadow: 0 40px 80px -40px rgba(11, 30, 58, 0.45);
}
#orizzonte img { filter: saturate(0.85) contrast(1.02); transform: scale(1.04); transition: transform 2s var(--m-ease); }
#orizzonte:hover img { transform: scale(1.0); }
#orizzonte::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 48, 90, 0) 55%, rgba(11, 30, 58, 0.45));
  pointer-events: none;
}
#orizzonte::before {
  /* ligne d'horizon limone */
  content: '';
  position: absolute; left: 8%; right: 8%; bottom: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--m-limone), transparent);
  z-index: 1;
}

/* ---------- Chi siamo ---------- */
#Chi { overflow-x: clip; }
#Chi > .container > h2, #Chi h2 { max-width: 18ch; font-style: italic; }
#Chi p { font-size: 1.1rem; }
#Chi .col-lg-6:first-child p:first-child::first-letter {
  font-family: var(--m-serif);
  float: left;
  font-size: 4.6rem;
  line-height: 0.8;
  padding: 0.35rem 0.6rem 0 0;
  color: var(--m-blu);
}
#cornice { padding: 14px; background: #fff; box-shadow: 0 24px 60px -30px rgba(11, 30, 58, 0.35); }
#cornice::after {
  content: '';
  position: absolute; right: -18px; bottom: -18px;
  width: 45%; height: 45%;
  border-right: 1px solid var(--m-limone-d);
  border-bottom: 1px solid var(--m-limone-d);
  pointer-events: none;
}
#cornice img { transition: transform 1.2s var(--m-ease); }
#cornice:hover img { transform: scale(1.04); }

/* ---------- Polizze (onglets) ---------- */
#Servizi { background: #fff; border-block: 1px solid var(--bs-border-color); }
#Servizi .nav-pills { counter-reset: pol; --bs-nav-pills-link-active-bg: var(--m-blu); --bs-nav-pills-border-radius: 2px; }
#Servizi .nav-link {
  counter-increment: pol;
  color: var(--m-inchiostro);
  font-family: var(--m-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  transition: background-color 0.3s var(--m-ease), color 0.3s, padding 0.4s var(--m-ease);
}
#Servizi .nav-link::before {
  content: counter(pol, upper-roman);
  font-family: var(--m-sans);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  width: 2.2rem;
  color: var(--m-grigio);
}
#Servizi .nav-link .bi { font-size: 1.05rem; color: var(--m-blu-2); }
#Servizi .nav-link:hover { padding-left: 1.4rem; background: var(--m-calce); }
#Servizi .nav-link.active { color: #fff; }
#Servizi .nav-link.active::before, #Servizi .nav-link.active .bi { color: var(--m-limone); }
#Servizi .tab-content { min-height: 420px; }
#Servizi .tab-pane > a { min-height: 420px; border-radius: 2px; }
#Servizi .tab-pane img { transition: transform 1.4s var(--m-ease); }
#Servizi .tab-pane > a:hover img { transform: scale(1.04); }
#Servizi .tab-pane > a::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 30, 58, 0.78));
}
#Servizi .tab-pane > a > span { z-index: 1; color: #fff; }
#Servizi .tab-pane .h2 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.6rem); }
#Servizi .tab-pane .bi { color: var(--m-limone); transition: transform 0.4s var(--m-ease); }
#Servizi .tab-pane > a:hover .bi { transform: translate(4px, -4px); }
#Servizi .tab-pane.fade { transition: opacity 0.5s var(--m-ease); }

/* ---------- Team ---------- */
#Team h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
[data-membro] {
  width: 112px; height: 112px;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  font-size: 2.6rem;
  box-shadow: 0 16px 40px -24px rgba(11, 30, 58, 0.4);
  transition: transform 0.5s var(--m-ease), box-shadow 0.5s var(--m-ease);
}
[data-membro]:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(11, 30, 58, 0.5); }

/* ---------- Mission (parallaxe) ---------- */
#Mission { min-height: 640px; background: var(--m-notte); }
#Mission > div:first-child::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 30, 58, 0.2), rgba(11, 30, 58, 0.55));
}
#lettera {
  background: rgba(247, 245, 239, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6);
  border-top: 3px solid var(--m-limone);
}
#lettera h2 { font-style: italic; }
#lettera p:last-child { font-size: 1.08rem; }

/* ---------- Formulaire ---------- */
#Contattaci h2 { font-style: italic; }
#Contattaci .form-control {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(18, 48, 90, 0.35);
  border-radius: 0;
  padding: 0.85rem 0.2rem;
  font-weight: 400;
  transition: border-color 0.3s, background-color 0.3s;
}
#Contattaci .form-control:focus { box-shadow: none; border-bottom-color: var(--m-blu); background: rgba(226, 207, 74, 0.1); }
#Contattaci .form-control::placeholder { color: var(--m-grigio); letter-spacing: 0.02em; }
#Contattaci .form-check-input:checked { background-color: var(--m-blu); border-color: var(--m-blu); }
#Contattaci .form-check-label { font-size: 0.95rem; }

/* ---------- Boutons ---------- */
.btn {
  --bs-btn-font-family: var(--m-sans);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.85rem;
  transition: background-color 0.3s var(--m-ease), color 0.3s, transform 0.3s var(--m-ease), box-shadow 0.3s;
}
.btn-lg { --bs-btn-padding-x: 2.4rem; --bs-btn-padding-y: 1rem; }
.btn-primary {
  --bs-btn-bg: var(--m-blu); --bs-btn-border-color: var(--m-blu); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--m-notte); --bs-btn-hover-border-color: var(--m-notte); --bs-btn-hover-color: var(--m-limone);
  --bs-btn-active-bg: var(--m-notte); --bs-btn-active-border-color: var(--m-notte);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(11, 30, 58, 0.6); }
.btn-outline-primary {
  --bs-btn-color: var(--m-blu); --bs-btn-border-color: rgba(18, 48, 90, 0.35);
  --bs-btn-hover-bg: var(--m-blu); --bs-btn-hover-border-color: var(--m-blu); --bs-btn-hover-color: #fff;
  width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Contatti ---------- */
#scheda { background: #fff; box-shadow: 0 40px 90px -50px rgba(11, 30, 58, 0.45); }
#scheda img[width='500'] { height: 56px; width: auto; }
#scheda address { line-height: 1.95; }
#scheda [data-stretto] { margin-inline: 0; }
#scheda address a { color: var(--m-inchiostro); text-decoration: none; border-bottom: 1px solid var(--m-limone-d); transition: color 0.2s; }
#scheda address a:hover { color: var(--m-blu-2); }
#mappa { min-height: 360px; }
#mappa img { filter: grayscale(0.45) contrast(1.02); transition: filter 0.6s var(--m-ease), transform 1.2s var(--m-ease); }
#mappa:hover img { filter: none; transform: scale(1.03); }

/* ---------- Albo / Compagnia / Documenti (bloc SEO affiché en bas) ---------- */
#albo { background: var(--m-sabbia); }
#sigillo {
  background: var(--m-calce);
  border: 1px solid rgba(18, 48, 90, 0.2);
  outline: 1px solid rgba(18, 48, 90, 0.2);
  outline-offset: -10px;
}
#sigillo > .bi { font-size: 2.2rem; color: var(--m-blu); }
#sigillo h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
#sigillo p:last-child { font-size: 0.98rem; color: var(--m-grigio); }
#compagnia h2, #documenti h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
#compagnia .card { border: 0; background: #fff; box-shadow: 0 20px 50px -34px rgba(11, 30, 58, 0.45); transition: transform 0.5s var(--m-ease); }
#compagnia .card:hover { transform: translateY(-4px); }
#compagnia .card-body { min-height: 150px; }
#compagnia .col-sm-6:last-child .card-body { background: var(--m-blu); }
#compagnia img { max-width: 70%; height: auto; max-height: 64px; width: auto; }
#compagnia figcaption { border-top: 1px solid var(--bs-border-color); }
#compagnia figcaption > span { font-family: var(--m-serif); font-size: 1.35rem; color: var(--m-blu); }
#compagnia figcaption small { color: var(--m-grigio); line-height: 1.8; font-size: 0.88rem; }
#documenti .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: rgba(18, 48, 90, 0.2); }
#documenti a { color: var(--m-inchiostro); text-decoration: none; transition: color 0.2s, padding 0.4s var(--m-ease); }
#documenti a:hover { color: var(--m-blu-2); padding-left: 0.5rem; }
#documenti .bi-file-earmark-pdf { color: var(--m-blu-2); }

/* ---------- Footer ---------- */
#piede { background: var(--m-notte); color: rgba(247, 245, 239, 0.8); }
#piede [data-stretto] path { stroke: rgba(247, 245, 239, 0.6); }
#piede .h3 { color: var(--m-calce); font-size: 2rem; }
#piede a { color: var(--m-calce); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; }
#piede a:hover { color: var(--m-limone); }
#piede a.fs-4 { font-size: 1.4rem !important; }

/* ---------- 404 ---------- */
#vuoto .display-1 { font-size: clamp(6rem, 20vw, 14rem); font-style: italic; }

/* ---------- Animations ---------- */
@keyframes m-draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes m-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  #orizzonte { border-radius: 240px 240px 4px 4px / 140px 140px 4px 4px; }
  #Servizi .tab-content, #Servizi .tab-pane > a { min-height: 300px; }
  #Mission { min-height: 0; }
  #cornice::after { right: -10px; bottom: -10px; }
}
@media (max-width: 575.98px) {
  #testata .navbar-brand { font-size: 1.25rem; }
  [data-membro] { width: 84px; height: 84px; font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}