/* ---- Tokens ---- */
:root{
  /* Brand */
  --navy:        #1f3c5f;
  --navy-700:    #1a3252;
  --navy-900:    #12263d;
  --navy-soft:   #2c5180;
  --orange:      #ef8b00;
  --orange-600:  #e07e00;
  --orange-soft: #fbf0df;
  --gold:        #fbbc04;
  --green:       #2f8f5b;

  /* Neutrals (toni caldi/neutri) */
  --ink:        #232a32;
  --ink-soft:   #4a525c;
  --muted:      #79828d;
  --line:       #e7e9ee;
  --line-soft:  #eef0f4;
  --bg:         #ffffff;
  --bg-alt:     #f5f6f8;
  --bg-navy-tint:#f3f6fa;

  /* Radii */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --pill: 999px;

  /* Shadows (soft) */
  --sh-xs: 0 1px 2px rgba(24,40,64,.06);
  --sh-sm: 0 2px 8px rgba(24,40,64,.07);
  --sh:    0 8px 24px rgba(24,40,64,.09);
  --sh-lg: 0 18px 48px rgba(24,40,64,.14);

  /* Layout */
  --maxw: 1200px;
  --gut: clamp(18px, 4vw, 40px);

  --head: 'Albert Sans', system-ui, sans-serif;
  --body: 'Mulish', system-ui, sans-serif;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--head); color:var(--navy); margin:0; line-height:1.12; font-weight:800; letter-spacing:-.015em; text-wrap:balance; }
/*
   Il colore del testo di corpo sta QUI, sul paragrafo, non nei contenitori.

   Prima `p` non diceva niente sul colore e ogni paragrafo prendeva quello del
   body — `--ink`, il colore dei titoli. A rimediare erano i contenitori:
   `.prose p`, `.pagehead p`, `.zone-card__body p`… ognuno ripeteva
   `color:var(--ink-soft)`. Funzionava finché un paragrafo capitava dentro uno
   di quei contenitori: fuori (dentro una griglia, per dire) usciva più scuro
   di tutti gli altri del sito, e la pagina si correggeva con una classe in più.
   Era successo su Dove siamo, ed era l'unico paragrafo diverso di tutto il sito.

   Con il colore sul paragrafo il caso normale è giusto da solo, e chi vuole un
   altro colore lo dichiara — che è la parte esplicita, non quella implicita.

   ⚠️ Un colore scritto su `p` batte quello EREDITATO da un contenitore scuro
   (una dichiarazione diretta vince sempre sull'ereditarietà, a qualunque
   specificità). Una fascia scura deve quindi ridire `inherit` sui suoi
   paragrafi: `.bg-navy` lo fa qui sotto, ed è il posto da cui copiare quando
   se ne aggiunge un'altra. Il footer e il blocco contatti non ne hanno
   bisogno: l'unico loro paragrafo (.foot-assoc__t) ha già un colore suo, il
   resto sono link e span, che questa regola non tocca.
*/
p{ margin:0 0 1rem; text-wrap:pretty; color:var(--ink-soft); }
::selection{ background:var(--orange); color:#fff; }

/* ---- Inline icon sizing (safety: prevent oversized SVGs) ---- */
.pcard__zone svg{ width:15px; height:15px; flex:none; }
.detail-zone svg{ width:17px; height:17px; flex:none; }
.topbar a svg{ width:15px; height:15px; flex:none; }
.foot-social a svg{ width:18px; height:18px; }
.btn svg{ width:1.05em; height:1.05em; flex:none; }
.readmore svg, .article-tag svg{ width:15px; height:15px; flex:none; }
.drawer .btn svg{ width:18px; height:18px; }

/* ---- Layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block: clamp(48px, 7vw, 96px); }
.section--tight{ padding-block: clamp(36px,5vw,64px); }
.bg-alt{ background:var(--bg-alt); }
.bg-navy{ background:var(--navy); color:#fff; }
.bg-navy h1,.bg-navy h2,.bg-navy h3{ color:#fff; }
/*
   Su fondo scuro il paragrafo torna a ereditare: vedi la nota su `p`.

   `:where(.bg-navy)` e non `.bg-navy` per una ragione misurata. Scritta come
   `.bg-navy p` la regola vale (0,1,1) e batte QUALSIASI classe messa sul
   paragrafo: i due sommari su fondo blu (.hp-val-testo in home,
   .ar-band-testo in architetto) passavano da #cdd8e6 a bianco pieno, cioè
   perdevano il colore che il design gli aveva dato. `:where()` azzera la
   specificità della parte fra parentesi, quindi la regola pesa quanto `p` —
   basta a vincere sul colore di corpo perché viene dopo, e non basta a
   scavalcare una classe. Che è esattamente il confine giusto.
*/
:where(.bg-navy) p{ color:inherit; }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:.6rem; }

/* Intestazione di sezione: blocco di titoli a sinistra, bottone a destra.
   Nella consegna era dichiarata nel <style> della sola index.html, ma veniva
   usata anche in articolo.html e dettaglio.html — dove quindi non aveva stile
   (le due colonne si impilavano). È vocabolario condiviso a tutti gli effetti:
   sta qui, e home/articolo/scheda immobile la usano senza ridichiararla. */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:clamp(24px,3vw,40px); flex-wrap:wrap; }
.sec-head .eyebrow{ margin-bottom:.5rem; }

/* Eyebrow / kicker (tocco prestigio) */
.eyebrow{
  font-family:var(--head); font-weight:700; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--orange-600);
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 .9rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--orange); border-radius:2px; }
.bg-navy .eyebrow{ color:var(--gold); }
.center .eyebrow{ justify-content:center; }

/* Display headings scale */
.h-hero{ font-size:clamp(2.1rem, 5.2vw, 3.7rem); }
.h-1{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
.h-2{ font-size:clamp(1.5rem, 3vw, 2.1rem); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-soft); line-height:1.6; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  --bg:var(--orange); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--head); font-weight:700; font-size:1rem; letter-spacing:.005em;
  padding:.6em 1.2em; border-radius:var(--pill); border:1.5px solid transparent;
  background:var(--bg); color:var(--fg); transition:.18s ease;
  box-shadow:var(--sh-xs); white-space:nowrap;
}
.btn{ font-size:.94rem; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh); }
.btn--orange{ --bg:var(--orange); --fg:#fff; }
.btn--orange:hover{ background:var(--orange-600); }
.btn--navy{ --bg:var(--navy); --fg:#fff; }
.btn--navy:hover{ background:var(--navy-700); }
.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--line); box-shadow:none; }
.btn--ghost:hover{ border-color:var(--navy); background:#fff; }
.btn--light{ background:#fff; color:var(--navy); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); box-shadow:none; }
.btn--outline-light:hover{ background:#fff; color:var(--navy); }
.btn--sm{ padding:.6em 1.1em; font-size:.9rem; }
.btn--lg{ padding:1em 1.9em; font-size:1.08rem; }
.btn--block{ width:100%; }

/* =====================================================================
   TOP BAR + HEADER / NAV
   ===================================================================== */
.topbar{ background:var(--navy-900); color:#dfe6f0; font-size:.86rem; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:1rem; }
.topbar a{ color:#fff; white-space:nowrap; }
.topbar__promo{ min-width:0; }
.topbar__promo .txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar__promo{ display:inline-flex; align-items:center; gap:.5em; }
.topbar__promo .tag{ background:var(--orange); color:#fff; font-weight:700; font-family:var(--head); font-size:.7rem; letter-spacing:.05em; padding:.18em .6em; border-radius:var(--pill); text-transform:uppercase; }
.topbar__promo a{ text-decoration:underline; text-underline-offset:2px; color:var(--gold); font-weight:600; }
.topbar__right{ display:flex; align-items:center; gap:1.4rem; }
.topbar__right a{ display:inline-flex; align-items:center; gap:.45em; font-weight:600; }
.topbar__right .pill{ border:1px solid rgba(255,255,255,.35); border-radius:var(--pill); padding:.28em .9em; }
.topbar__right .pill:hover{ background:var(--orange); border-color:var(--orange); }

header.site{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.8); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; min-height:78px; }
/* 56px da scrivania: il logo è vettoriale, quindi cresce senza sgranarsi. */
.nav__logo img{ height:56px; width:auto; }
/* 32px fra una voce e l'altra (chiesti dal cliente). Le voci hanno anche un
   padding proprio di .85em per lato, che serve alla pastiglia dello stato
   attivo e al bersaglio del clic: lo stacco che si vede fra due parole è
   quindi 32px più quei due padding. */
.nav__links{ display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; }
.nav__links > li{ position:relative; }
.nav__links > li > a{
  display:inline-flex; align-items:center; gap:.35em;
  font-family:var(--head); font-weight:600; font-size:.98rem; color:var(--ink);
  padding:.6em .85em; border-radius:var(--r-sm); transition:.15s;
}
.nav__links > li > a:hover,.nav__links > li.active > a{ color:var(--navy); background:var(--bg-navy-tint); }
.nav__links a .chev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6; }
.nav__cta{ display:flex; align-items:center; gap:.7rem; }

/* Dropdown */
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-lg); padding:.5rem; opacity:0; visibility:hidden;
  transform:translateY(6px); transition:.16s; z-index:70;
}
.nav__links > li:hover .dropdown,.nav__links > li:focus-within .dropdown{ opacity:1; visibility:visible; transform:none; }
.dropdown a{ display:block; padding:.6em .8em; border-radius:var(--r-sm); font-weight:600; font-size:.95rem; color:var(--ink-soft); }
.dropdown a:hover{ background:var(--bg-navy-tint); color:var(--navy); }
.dropdown small{ display:block; font-weight:500; font-size:.8rem; color:var(--muted); font-family:var(--body); }

/* Hamburger */
.hamb{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; align-items:center; justify-content:center; }
.hamb span{ width:22px; height:2px; background:var(--navy); border-radius:2px; transition:.2s; }
body.menu-open .hamb span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .hamb span:nth-child(2){ opacity:0; }
body.menu-open .hamb span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:#fff; z-index:90; transform:translateX(100%); transition:.26s cubic-bezier(.4,0,.2,1); box-shadow:var(--sh-lg); overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.2rem; }
.drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; }
.drawer__head img{ height:40px; }
.drawer__close{ width:42px; height:42px; border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; font-size:1.3rem; color:var(--navy); }
.drawer a.m-link{ padding:.85em .4em; font-family:var(--head); font-weight:600; font-size:1.1rem; color:var(--ink); border-bottom:1px solid var(--line-soft); }
.drawer a.m-link:hover{ color:var(--orange-600); }
.drawer .m-sub{ font-size:.92rem; font-weight:600; color:var(--ink-soft); padding:.55em 1.1em; }
.scrim{ position:fixed; inset:0; background:rgba(18,38,61,.45); z-index:80; opacity:0; visibility:hidden; transition:.26s; }
body.menu-open .drawer{ transform:none; }
body.menu-open .scrim{ opacity:1; visibility:visible; }

/* =====================================================================
   IMAGE PLACEHOLDER (stock sostituibile) — label etichetta
   ===================================================================== */
.imgph{ position:relative; overflow:hidden; background:var(--bg-alt); }
.imgph img{ width:100%; height:100%; object-fit:cover; }
.imgph__fallback{ position:absolute; inset:0; display:none; place-items:center; background:
   repeating-linear-gradient(135deg,#e9edf3 0 12px,#eef2f7 12px 24px); }
.imgph__fallback span{ font-family:ui-monospace,monospace; font-size:.8rem; color:#9aa6b4; }
.imgph__tag{
  position:absolute; left:10px; bottom:10px; z-index:3;
  background:rgba(18,38,61,.78); color:#fff; backdrop-filter:blur(3px);
  font-family:ui-monospace,monospace; font-size:.66rem; letter-spacing:.02em;
  padding:.34em .6em; border-radius:6px; display:inline-flex; align-items:center; gap:.45em; max-width:calc(100% - 20px);
}
.imgph__tag::before{ content:"⌖"; opacity:.8; }

/* ---- FAQ (accordion + FAQPage schema) ---- */
.faq-h{ font-family:var(--head); font-weight:800; color:var(--navy); font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 1.3rem; }
.faq-list{ display:flex; flex-direction:column; gap:.7rem; max-width:920px; }
.faq-item{ border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--sh-xs); overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.1rem 1.3rem; font-family:var(--head); font-weight:700; color:var(--navy); font-size:1.05rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-ic{ position:relative; width:18px; height:18px; flex:none; }
.faq-ic::before,.faq-ic::after{ content:""; position:absolute; background:var(--orange); border-radius:2px; transition:transform .2s; }
.faq-ic::before{ top:8px; left:0; width:18px; height:2px; }
.faq-ic::after{ left:8px; top:0; width:2px; height:18px; }
.faq-item[open] .faq-ic::after{ transform:scaleY(0); }
.faq-a{ padding:0 1.3rem 1.2rem; color:var(--ink-soft); }
.faq-a p{ margin:0; line-height:1.65; }

/* =====================================================================
   PROPERTY CARD
   ===================================================================== */
.grid-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:.2s; box-shadow:var(--sh-xs); }
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:#dfe3ea; }
.pcard__media{ position:relative; aspect-ratio:16/10; }
.pcard__media .imgph{ position:absolute; inset:0; }
.pcard__badge{ position:absolute; top:12px; right:12px; z-index:4; font-family:var(--head); font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; padding:.4em .8em; border-radius:var(--pill); color:#fff; box-shadow:var(--sh-sm); }
.b-novita{ background:var(--navy); }
/* Giallo con testo nero: è l'unico dei quattro badge a non usare il bianco,
   perché su questo fondo il bianco non avrebbe contrasto sufficiente. */
.b-venduto{ background:#faee32; color:#000; }
.b-occasione{ background:var(--orange); }
.b-affitto{ background:var(--green); }
.pcard__plan{ position:absolute; right:12px; bottom:12px; z-index:4; background:rgba(255,255,255,.92); color:var(--ink-soft); font-size:.72rem; font-weight:600; padding:.3em .65em; border-radius:6px; }
.pcard__body{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.pcard__title{ font-size:1.12rem; font-weight:700; color:var(--navy); margin:0 0 .15rem; }
.pcard__zone{ font-size:.86rem; color:var(--muted); display:flex; align-items:center; gap:.35em; margin-bottom:.9rem; }
.pcard__specs{ display:flex; gap:1.1rem; padding:.85rem 0; border-top:1px solid var(--line-soft); margin-top:auto; color:var(--ink-soft); font-size:.92rem; font-weight:600; }
/* Immobile senza locali, bagni né metratura: la riga resta, alta come se il
   testo ci fosse, così il piede della card (Affitto / € …) si allinea con
   quello delle card accanto. Lo spazio unificatore dà esattamente l'altezza di
   una riga di testo, senza numeri da tenere aggiornati a mano. */
.pcard__specs--vuota::before{ content:"\00a0"; }
.pcard__specs span{ display:inline-flex; align-items:center; gap:.38em; }
.pcard__specs svg{ width:18px; height:18px; color:var(--navy-soft); }
.pcard__foot{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--line-soft); padding-top:.9rem; }
.pcard__foot .lbl{ font-size:.8rem; color:var(--muted); }
.pcard__price{ font-family:var(--head); font-weight:800; font-size:1.3rem; color:var(--navy); }
.pcard__price .mo{ font-size:.8rem; font-weight:600; color:var(--muted); }

/* =====================================================================
   FILTER BAR
   ===================================================================== */
.filterbar{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:1rem 1.1rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:.32em; flex:1; min-width:150px; }
.field label{ font-family:var(--head); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.field select,.field input{ font-family:var(--body); font-size:.98rem; color:var(--ink); padding:.7em .85em; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; transition:.15s; width:100%; }
.field select:focus,.field input:focus{ outline:none; border-color:var(--navy-soft); box-shadow:0 0 0 3px rgba(44,81,128,.12); }

/* La freccia della tendina: disegnata da noi, non dal browser.

   Quella nativa la disegna il sistema operativo appiccicata al bordo destro —
   fuori dal padding, che vale solo per il testo — e non c'è modo di spostarla:
   non è un elemento, non ha box, nessuna proprietà CSS la raggiunge. L'unico
   modo di darle aria è toglierla (appearance:none) e rimetterne una nostra
   come sfondo, che il padding lo rispetta.

   In cambio si guadagna una freccia identica su Chrome, Firefox e Safari, con
   lo stesso chevron della testata «Filtri» qui accanto; il padding destro
   allargato è lo spazio che le si riserva, perché un'opzione lunga non ci
   finisca sotto. */
.field select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:2.6em;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5l6-6' stroke='%2379828d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95em center;
  background-size:12px 8px;
}
/* appearance:none toglie ANCHE il grigio con cui il browser segna una tendina
   disabilitata: «Prezzo max» senza contratto scelto sarebbe sembrata attiva.
   Va quindi ridichiarato a mano. */
.field select:disabled{
  background-color:var(--bg-alt); color:var(--muted); cursor:not-allowed;
  opacity:1; /* Safari iOS smorza di suo i controlli disabilitati: qui basta il grigio. */
}
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ font-family:var(--head); font-weight:600; font-size:.9rem; padding:.5em 1.05em; border-radius:var(--pill); border:1.5px solid var(--line); background:#fff; color:var(--ink-soft); transition:.15s; }
.chip:hover{ border-color:var(--navy-soft); color:var(--navy); }
.chip.is-active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.result-bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.8rem; margin:1.4rem 0; }
.result-bar .count{ font-family:var(--head); font-weight:700; color:var(--navy); }

/* =====================================================================
   REVIEWS / GOOGLE WIDGET
   ===================================================================== */
.stars{ display:inline-flex; gap:1px; color:var(--gold); }
.stars svg{ width:1em; height:1em; }
.gwidget{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:1.5rem; display:flex; align-items:center; justify-content:center; gap:1.4rem; flex-wrap:wrap; }
.gwidget .g-logo{ font-family:var(--head); font-weight:700; font-size:1.25rem; }
.gwidget .g-logo b:nth-child(1){color:#4285F4} .gwidget .g-logo b:nth-child(2){color:#EA4335} .gwidget .g-logo b:nth-child(3){color:#FBBC05} .gwidget .g-logo b:nth-child(4){color:#4285F4} .gwidget .g-logo b:nth-child(5){color:#34A853} .gwidget .g-logo b:nth-child(6){color:#EA4335}
.gwidget .score{ font-family:var(--head); font-weight:800; font-size:1.7rem; color:var(--ink); }
.gwidget .stars{ font-size:1.4rem; }
.gwidget .cnt{ color:var(--muted); font-size:.95rem; }
.rcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; box-shadow:var(--sh-xs); display:flex; flex-direction:column; gap:.55rem; }
.rcard__head{ display:flex; align-items:center; gap:.7rem; }
.rcard__av{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--head); font-weight:700; }
.rcard__name{ font-family:var(--head); font-weight:700; font-size:.98rem; color:var(--ink); }
.rcard__date{ font-size:.8rem; color:var(--muted); }
.rcard__txt{ font-size:.95rem; color:var(--ink-soft); }
.rcard__txt a{ color:var(--muted); }

/* Floating google badge (come l'attuale, ma elegante) */
.gbadge{ position:fixed; left:18px; bottom:18px; z-index:40; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:.7rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.1rem; }
.gbadge .score{ font-family:var(--head); font-weight:800; font-size:1.15rem; color:var(--ink); display:flex; align-items:center; gap:.4em; }
.gbadge .stars{ font-size:.95rem; }
.gbadge small{ font-size:.72rem; color:var(--muted); }
.gbadge__close{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:.85rem; line-height:1; }

/* =====================================================================
   FORMS
   ===================================================================== */
.form{ display:flex; flex-direction:column; gap:.95rem; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:.95rem; }
.form input,.form select,.form textarea{ font-family:var(--body); font-size:1rem; color:var(--ink); padding:.85em 1em; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; width:100%; transition:.15s; }
.form input::placeholder,.form textarea::placeholder{ color:#9aa4b0; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--navy-soft); box-shadow:0 0 0 3px rgba(44,81,128,.12); }
.form textarea{ min-height:120px; resize:vertical; }
.form .req{ color:var(--orange-600); }
.check{ display:flex; gap:.6em; align-items:flex-start; font-size:.92rem; color:var(--ink-soft); }
.check input{ width:18px; height:18px; margin-top:.2em; accent-color:var(--orange); flex:none; }
.radio-row{ display:flex; flex-direction:column; gap:.5rem; }
.radio-row label{ display:flex; gap:.6em; align-items:center; font-size:.95rem; color:var(--ink-soft); }
.radio-row input{ width:18px; height:18px; accent-color:var(--orange); }
.form-note{ font-size:.82rem; color:var(--muted); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none; }

/* Card panel */
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:clamp(1.3rem,3vw,2rem); }
.panel--navy{ background:var(--navy); color:#fff; border-color:transparent; }
.panel--navy h2,.panel--navy h3{ color:#fff; }
.panel--orange{ background:var(--orange); color:#fff; border-color:transparent; }
.panel--orange h2,.panel--orange h3{ color:#fff; }

/* =====================================================================
   FOOTER
   ===================================================================== */
footer.site{ background:var(--navy-900); color:#c7d2e0; padding-block:clamp(40px,5vw,64px) 28px; font-size:.95rem; }
footer.site a{ color:#c7d2e0; }
footer.site a:hover{ color:#fff; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:clamp(24px,4vw,48px); }
.foot-col h4{ color:#fff; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 1rem; font-weight:700; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.foot-contact{ display:flex; flex-direction:column; gap:.4rem; line-height:1.55; }
.foot-logo img{ height:48px; margin-bottom:1rem; filter:brightness(0) invert(1); opacity:.95; }
.foot-fimaa{ background:#fff; border-radius:8px; padding:.4rem; width:84px; }
.foot-social{ display:flex; gap:.6rem; margin-top:1rem; }
.foot-social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition:.15s; }
.foot-social a:hover{ background:var(--orange); border-color:var(--orange); }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.4rem; padding-top:1.4rem; display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between; color:#92a2b6; font-size:.84rem; }

/* Sticky mobile CTA */
.mcta{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(24,40,64,.1); padding:.6rem .8rem; gap:.6rem; }
.mcta .btn{ flex:1; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .topbar__promo .txt{ display:none; }
}
@media (max-width:1000px){
  .nav__links, .nav__cta .btn{ display:none; }
  .hamb{ display:flex; }
  .grid-cards{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .topbar__promo{ display:none; }
  .grid-cards{ grid-template-columns:1fr; }
  .form .row{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .mcta{ display:flex; }
  body.has-mcta{ padding-bottom:74px; }
  .gbadge{ left:12px; bottom:84px; padding:.55rem .8rem; }
}

/* prose pages */
.prose{ max-width:760px; }
.prose h2{ font-size:clamp(1.5rem,3vw,2rem); margin:2.2rem 0 .8rem; }
.prose h3{ font-size:1.25rem; color:var(--navy); margin:1.6rem 0 .5rem; }
.prose p{ color:var(--ink-soft); }
.prose ul{ color:var(--ink-soft); padding-left:1.2rem; }
.prose li{ margin-bottom:.5rem; }
.prose strong{ color:var(--ink); }
.svc-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.2rem; }
.svc-list li{ padding:1rem 1.1rem; border-radius:var(--r-sm); color:var(--ink-soft); font-weight:500; }
.svc-list li:nth-child(odd){ background:var(--bg-alt); }

/* =====================================================================
   INNER PAGE SHARED
   ===================================================================== */
.pagehead{ background:var(--bg-navy-tint); border-bottom:1px solid var(--line); padding-block:clamp(28px,4vw,52px); }
.breadcrumb{ display:flex; gap:.5em; align-items:center; font-size:.85rem; color:var(--muted); margin-bottom:.7rem; flex-wrap:wrap; }
.breadcrumb a:hover{ color:var(--navy); }
.breadcrumb .sep{ opacity:.5; }
.pagehead h1{ font-size:clamp(1.9rem,4vw,2.8rem); }
.pagehead p{ color:var(--ink-soft); max-width:60ch; margin:.7rem 0 0; }

.layout-2col{ display:grid; grid-template-columns:1fr 360px; gap:clamp(28px,4vw,56px); align-items:start; }
.layout-2col--wide{ grid-template-columns:1fr 420px; }
.sticky-side{ position:sticky; top:100px; display:flex; flex-direction:column; gap:1.2rem; }
.reviews-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.reviews-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); }
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,30px); }
.team-card .imgph{ aspect-ratio:3/3.4; border-radius:var(--r); margin-bottom:.8rem; position:relative; overflow:hidden; }
.team-card h4{ font-size:1.1rem; }
.team-card .role{ color:var(--orange-600); font-size:.86rem; font-weight:600; font-family:var(--head); }
.info-row{ display:flex; gap:.7em; align-items:flex-start; padding:.55rem 0; color:var(--ink-soft); }
.info-row svg{ width:20px; height:20px; color:var(--navy-soft); flex:none; margin-top:.15em; }

@media (max-width:900px){
  .layout-2col,.layout-2col--wide{ grid-template-columns:1fr; }
  .sticky-side{ position:static; }
  .reviews-grid-4,.reviews-grid-3{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .reviews-grid-4,.reviews-grid-3,.team-grid{ grid-template-columns:1fr; }
}