/* Rifiniture trasversali di leggibilita, navigazione e resilienza responsive. */
:root {
  --oc-focus: #9b7900;
  --oc-mobile-gutter: 20px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main,
section,
article,
div {
  min-width: 0;
}

:where(h1, h2, h3) {
  text-wrap: balance;
}

:where(p, li, dd, blockquote) {
  text-wrap: pretty;
}

:where(p, li, dd, a, button, label, strong, span) {
  overflow-wrap: break-word;
}

section[id],
article[id],
form[id] {
  scroll-margin-top: 118px;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--oc-focus);
  outline-offset: 4px;
}

.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.mobile-nav-cta {
  display: none !important;
}

.button,
button[type="submit"] {
  min-height: 48px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  max-width: 100%;
}

textarea {
  resize: vertical;
}

dialog {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 94px;
  }

  section[id],
  article[id],
  form[id] {
    scroll-margin-top: 94px;
  }

  .menu-toggle {
    display: inline-grid;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    color: var(--navy);
  }

  .links {
    z-index: 60;
    max-height: calc(100dvh - 78px);
    gap: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px var(--oc-mobile-gutter) 22px;
    border-bottom: 1px solid var(--line);
  }

  .links a {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
  }

  .links a:hover,
  .links a:focus-visible,
  .links a.active {
    background: #f4f1e4;
  }

  .links .mobile-nav-cta {
    display: flex !important;
    justify-content: space-between;
    margin-top: 8px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
  }

  body.menu-open {
    overflow: hidden;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 48px;
    font-size: 16px;
  }

  textarea {
    min-height: 132px;
  }

  footer a {
    min-height: 42px;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-grid > div:first-child {
    grid-column: auto;
  }

  .footer-grid a {
    width: fit-content;
    max-width: 100%;
  }

  .footer-bottom {
    align-items: flex-start;
    gap: 14px;
  }
}

@media (max-width: 480px) {
  :root {
    --oc-mobile-gutter: 16px;
  }

  .wrap {
    width: calc(100% - 32px);
  }

  .nav > .button {
    display: none;
  }

  .nav {
    gap: 10px;
  }

  .brand {
    width: 140px;
  }

  h1 {
    overflow-wrap: normal;
    word-break: normal;
  }

  .button {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 350px) {
  .brand {
    width: 126px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Scala fluida v43: piu spazio utile sui monitor grandi, senza allungare i testi. */
:root {
  --oc-shell-max: 1680px;
  --oc-reading-max: 72ch;
  --oc-fluid-gutter: clamp(40px, 6vw, 112px);
}

body {
  font-size: clamp(16px, calc(15px + .18vw), 18px);
}

.wrap {
  width: min(var(--oc-shell-max), calc(100% - var(--oc-fluid-gutter)));
}

.nav {
  gap: clamp(18px, 1.7vw, 34px);
}

.brand {
  width: clamp(170px, 10vw, 196px);
}

.links {
  gap: clamp(18px, 1.7vw, 34px);
  font-size: clamp(14px, calc(12px + .18vw), 16px);
}

.button,
button[type="submit"] {
  font-size: clamp(.9rem, calc(.86rem + .1vw), 1rem);
}

/* Home: testo commerciale piu presente e card meno minute. */
.alt-hero-lead,
.alt-section-head p,
.alt-seller-copy > p,
.alt-process-intro p,
.alt-reviews-head p,
.alt-guides-head p,
.alt-local p {
  font-size: clamp(1.05rem, calc(1rem + .22vw), 1.22rem);
}

.alt-home :where(.alt-audience, .alt-image-caption span, .alt-listings-head span, .alt-proof-link span, .alt-final-card span) {
  font-size: clamp(.72rem, calc(.68rem + .08vw), .8rem);
}

.alt-home :where(.alt-seller-points small, .alt-reassurance, .alt-review-author small) {
  font-size: clamp(.78rem, calc(.74rem + .08vw), .86rem);
}

.alt-buyer .card h3 { font-size: clamp(1.18rem, 1.35vw, 1.45rem); }
.alt-buyer .card-body,
.alt-process-grid p,
.alt-review-card blockquote { font-size: clamp(1rem, calc(.96rem + .12vw), 1.1rem); }

/* Pagine editoriali e guide: layout largo, colonna di lettura protetta. */
.editorial-page .wrap,
.article-page .wrap {
  max-width: 1540px;
}

.editorial-hero-copy > p,
.advice-hero .editorial-hero-copy > p,
.article-lead {
  font-size: clamp(1.08rem, calc(1rem + .22vw), 1.24rem);
}

.article-layout {
  grid-template-columns: minmax(0, var(--oc-reading-max)) minmax(320px, 360px);
  justify-content: space-between;
  gap: clamp(44px, 6vw, 104px);
}

.article-content {
  max-width: var(--oc-reading-max);
}

.article-content > p:first-child { font-size: clamp(1.18rem, calc(1.1rem + .18vw), 1.32rem); }
.article-content p,
.article-content li { font-size: clamp(1.06rem, calc(1rem + .13vw), 1.16rem); }
.article-toc a { font-size: .9rem; }
.article-sidebar-contact p { font-size: .88rem; }
.article-sidebar-contact .button { font-size: .86rem; }
.article-related-card span { font-size: .98rem; }
.article-lead-copy p { font-size: 1.08rem; }
.article-lead-copy .article-action-points li { font-size: 1rem; }
.article-lead-form label { font-size: .82rem; }
.article-lead-privacy { font-size: .78rem !important; }
.article-lead-form-note,
.article-lead-status { font-size: .76rem !important; }

/* Vendita, immobili e case vendute: copy e dati leggibili anche a distanza. */
.selling-page main p,
.sold-page main p,
.listings-page main p {
  font-size: max(1rem, 16px);
}

.selling-page main small,
.sold-page main small,
.listings-page main small {
  font-size: max(.78rem, 12.5px);
  line-height: 1.5;
}

.sold-hero .lead,
.listings-hero-copy > p {
  font-size: clamp(1.06rem, calc(1rem + .2vw), 1.22rem);
}

.listing-results-intro,
.listing-dialog-description,
.portfolio-copy p,
.manifest-heading > p,
.portfolio-heading > p,
.selling-page .reviews-heading > p {
  font-size: clamp(1rem, calc(.96rem + .12vw), 1.1rem);
  line-height: 1.68;
}

.listing-card-body { font-size: 1rem; }
.listing-decision-point strong,
.listing-decision-point p { font-size: .86rem; }
.property-contact-form .listing-privacy { font-size: .8rem; }

/* Contatti: informazioni operative e moduli con una scala piu accessibile. */
.contact-hero-copy > p,
.contact-section-head > p,
.office-copy > p,
.form-intro > p {
  font-size: clamp(1.05rem, calc(1rem + .18vw), 1.18rem);
}

.console-head,
.console-channel small,
.direct-card small,
.path-index,
.office-copy dt,
.contact-form label:not(.privacy-check) {
  font-size: clamp(.75rem, calc(.71rem + .06vw), .82rem);
}

.direct-card p,
.path-card .path-detail,
.form-signal { font-size: clamp(.88rem, calc(.84rem + .08vw), .96rem); }
.privacy-check { font-size: .82rem; }
.form-submit p { font-size: .76rem; }

/* Il visual della home puo arrivare davvero al bordo anche con il nuovo contenitore. */
.hero-photo {
  margin-right: calc((100vw - min(var(--oc-shell-max), calc(100vw - var(--oc-fluid-gutter)))) / -2);
}

@media (min-width: 1440px) {
  .alt-hero-grid,
  .sold-hero-grid,
  .listings-hero-grid,
  .contact-hero-layout,
  .editorial-hero-grid,
  .article-hero-grid {
    gap: clamp(64px, 6vw, 112px);
  }

  .article-hero-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(430px, .72fr);
  }

  .article-final-card--lead {
    grid-template-columns: minmax(0, 1fr) minmax(370px, 430px);
  }
}

@media (max-width: 1199px) {
  :root { --oc-fluid-gutter: 64px; }
  .wrap { width: calc(100% - 64px); }
  .brand { width: 150px; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 310px; }
}

@media (max-width: 900px) {
  :root { --oc-fluid-gutter: 48px; }
  .wrap { width: calc(100% - 48px); }
  .article-layout { grid-template-columns: 1fr; }
  .article-content { max-width: 760px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 40px); }
  .brand { width: 145px; }
  .links { gap: 2px; font-size: 15px; }
  .hero-photo { margin-right: -20px; }
  .article-content p,
  .article-content li { font-size: 1.06rem; }
  .selling-page main p,
  .sold-page main p,
  .listings-page main p { font-size: 1rem; }
}

@media (max-width: 480px) {
  .wrap { width: calc(100% - 32px); }
  .hero-photo { margin-right: -16px; }
}

/* Rifinitura responsive v44: proporzioni continue tra mobile, laptop e monitor ampi. */
:root {
  --oc-shell-max: 1840px;
  --oc-fluid-gutter: clamp(32px, 4vw, 76px);
  --oc-section-space: clamp(72px, 7vw, 126px);
  --oc-display-1: clamp(3rem, 3.8vw, 4.85rem);
  --oc-display-2: clamp(2.35rem, 3.15vw, 4rem);
  --oc-display-3: clamp(1.35rem, 1.55vw, 1.85rem);
}

.wrap {
  width: min(var(--oc-shell-max), calc(100% - var(--oc-fluid-gutter)));
}

:where(.alt-home, .selling-page, .sold-page, .listings-page, .contact-page, .editorial-page) main h1,
.article-page .article-hero h1 {
  font-size: var(--oc-display-1);
  line-height: 1.01;
  letter-spacing: -.052em;
  text-wrap: balance;
}

:where(.alt-home, .selling-page, .sold-page, .listings-page, .contact-page, .editorial-page) main h2,
.article-page :where(.article-content, .article-related, .article-final-card) h2 {
  font-size: var(--oc-display-2);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}

:where(.alt-home, .selling-page, .sold-page, .listings-page, .contact-page, .editorial-page) main h3 {
  font-size: var(--oc-display-3);
  line-height: 1.16;
  text-wrap: balance;
}

/* Le testate più scenografiche avevano scale autonome: le ricondurremo
   a una misura leggibile anche sui laptop, senza impoverire i monitor ampi. */
.selling-page .sale-cinema .cinema-copy h1.hero-title-price,
.sold-page .sold-hero h1,
.listings-page .listings-hero h1,
.contact-page .contact-hero h1,
.editorial-page .editorial-hero h1,
.advice-page .advice-hero .editorial-hero-copy h1 {
  font-size: clamp(3rem, 4.5vw, 4.55rem);
  line-height: 1.01;
}

.about-page .editorial-hero h1 {
  max-width: 15.5ch;
}

.advice-page .advice-hero .editorial-hero-copy h1 {
  max-width: 13ch;
}

:where(.alt-section, .selling-page main > section, .sold-page main > section,
  .listings-page main > section, .contact-page main > section,
  .editorial-page main > section) {
  padding-block: var(--oc-section-space);
}

/* Home: testata e processo distribuiti sullo spazio reale del monitor. */
.alt-hero-grid {
  grid-template-columns: minmax(430px, .96fr) minmax(500px, 1.04fr);
  gap: clamp(44px, 4.5vw, 88px);
}

.alt-hero h1 {
  max-width: 15ch;
}

.alt-section-head,
.alt-reviews-head,
.alt-guides-head {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  gap: clamp(36px, 4vw, 78px);
}

.alt-section-head h2,
.alt-reviews-head h2,
.alt-guides-head h2,
.alt-process-intro h2 {
  max-width: 20ch;
}

.alt-process-intro {
  max-width: min(1180px, 82vw);
}

.alt-process-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: clamp(16px, 1.4vw, 28px);
}

.alt-process-grid article {
  min-height: clamp(250px, 18vw, 310px);
  padding: clamp(28px, 2.2vw, 40px);
}

.alt-process-grid h3 {
  margin-top: clamp(28px, 2.5vw, 46px);
}

.alt-process-grid p {
  max-width: 42ch;
}

.alt-review-grid,
.direct-grid,
.advice-trust-grid {
  gap: clamp(16px, 1.45vw, 28px);
}

/* Vendita: introduzione compatta, card piene e dati leggibili. */
.selling-page .sale-method .method-layout {
  grid-template-columns: minmax(360px, .7fr) minmax(0, 1.3fr);
  gap: clamp(42px, 4.6vw, 86px);
}

.selling-page .sale-method .method-intro h2 {
  max-width: 13.5ch;
  font-size: clamp(2.7rem, 3vw, 3.55rem);
  line-height: 1.015;
}

.selling-page .sale-method .method-intro h2 br {
  display: none;
}

.selling-page .sale-method .method-intro p {
  max-width: 48ch;
  font-size: clamp(1.02rem, 1.05vw, 1.16rem);
}

@media (min-width: 981px) {
  .selling-page .method-stack .method-card {
    min-height: clamp(360px, 27vw, 410px);
    padding: clamp(30px, 2.35vw, 42px);
  }

  .selling-page .method-stack h3 {
    max-width: 18ch;
    font-size: clamp(1.8rem, 2vw, 2.4rem);
  }

  .selling-page .method-details {
    grid-template-columns: .95fr 1.18fr .95fr;
    margin-top: auto;
  }

  .selling-page .method-details div {
    padding: clamp(15px, 1.25vw, 22px);
  }

  .selling-page .method-details dd {
    font-size: clamp(.86rem, .83vw, .98rem);
  }
}

/* Pagine operative e istituzionali: colonne elastiche, non rigide. */
.sold-hero-grid,
.listings-hero-grid,
.contact-hero-layout,
.editorial-hero-grid {
  gap: clamp(42px, 4.6vw, 88px);
}

.contact-hero-layout {
  grid-template-columns: minmax(440px, 1.05fr) minmax(440px, .95fr);
}

.contact-section-head,
.manifest-heading,
.portfolio-heading,
.reviews-heading,
.editorial-heading {
  gap: clamp(34px, 4vw, 76px);
}

.paths-grid,
.price-compare,
.listing-guides-cards,
.advice-compass,
.guide-list,
.owner-guide-grid,
.article-related-grid {
  gap: clamp(16px, 1.5vw, 28px);
}

.path-card,
.price-card,
.guide-card,
.owner-guide-card,
.article-related-card {
  height: 100%;
}

/* Guide e articoli: pagina ampia, ma testo protetto da righe troppo lunghe. */
.editorial-page .wrap,
.article-page .wrap {
  max-width: 1680px;
}

.article-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, .66fr);
  gap: clamp(48px, 5vw, 96px);
}

.article-hero h1 {
  max-width: 18ch;
}

.article-layout {
  grid-template-columns: minmax(0, 78ch) minmax(310px, 370px);
  gap: clamp(48px, 6vw, 112px);
}

.article-content {
  max-width: 78ch;
}

.article-content p,
.article-content li {
  font-size: clamp(1.06rem, .98rem + .18vw, 1.2rem);
  line-height: 1.75;
}

.article-content h2 {
  max-width: 24ch;
}

@media (max-width: 1240px) {
  :root {
    --oc-fluid-gutter: 56px;
    --oc-display-1: clamp(2.85rem, 4.5vw, 4.25rem);
    --oc-display-2: clamp(2.2rem, 3.65vw, 3.55rem);
  }

  .alt-hero-grid,
  .sold-hero-grid,
  .listings-hero-grid,
  .contact-hero-layout,
  .editorial-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
  }

  .selling-page .sale-method .method-layout {
    grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr);
    gap: 44px;
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 48px;
  }
}

@media (max-width: 980px) {
  :root { --oc-fluid-gutter: 44px; }

  .alt-hero-grid,
  .sold-hero-grid,
  .listings-hero-grid,
  .contact-hero-layout,
  .editorial-hero-grid,
  .selling-page .sale-method .method-layout,
  .article-hero-grid,
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .alt-section-head,
  .alt-reviews-head,
  .alt-guides-head,
  .contact-section-head,
  .manifest-heading,
  .portfolio-heading,
  .reviews-heading,
  .editorial-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .alt-process-grid,
  .direct-grid,
  .advice-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alt-process-grid article:last-child,
  .direct-grid > :last-child,
  .advice-trust-grid > :last-child {
    grid-column: 1 / -1;
  }

  .article-content {
    max-width: 76ch;
  }
}

@media (max-width: 760px) {
  :root {
    --oc-fluid-gutter: 36px;
    --oc-section-space: clamp(58px, 16vw, 82px);
    --oc-display-1: clamp(2.35rem, 11vw, 3.35rem);
    --oc-display-2: clamp(2rem, 9.5vw, 2.9rem);
    --oc-display-3: clamp(1.3rem, 6vw, 1.65rem);
  }

  .wrap {
    width: calc(100% - 36px);
  }

  .alt-hero h1,
  .selling-page .sale-method .method-intro h2,
  .article-hero h1,
  .article-content h2 {
    max-width: none;
  }

  .alt-process-intro {
    max-width: none;
  }

  .alt-process-grid,
  .direct-grid,
  .advice-trust-grid,
  .paths-grid,
  .price-compare,
  .listing-guides-cards,
  .advice-compass,
  .guide-list,
  .owner-guide-grid,
  .article-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alt-process-grid article:last-child,
  .direct-grid > :last-child,
  .advice-trust-grid > :last-child {
    grid-column: auto;
  }

  .alt-process-grid article {
    min-height: 0;
    padding: 26px 23px;
  }

  .article-content p,
  .article-content li {
    font-size: 1.05rem;
    line-height: 1.72;
  }
}

@media (max-width: 420px) {
  :root { --oc-fluid-gutter: 30px; }
  .wrap { width: calc(100% - 30px); }
}

/* Le due porte di ingresso alle guide devono restare editoriali, non occupare
   quasi un'intera schermata sui monitor larghi. */
.alt-guide-card {
  min-height: clamp(360px, 30vw, 500px);
}

/* Desktop compatto e browser con zoom elevato.
   A 125–150% il viewport CSS assomiglia a un tablet orizzontale: manteniamo
   gerarchia desktop, ma riduciamo altezza, spazi e massa visiva delle card. */
@media (min-width: 761px) and (max-width: 1240px) {
  :root {
    --oc-fluid-gutter: clamp(38px, 5vw, 56px);
    --oc-section-space: clamp(62px, 7vw, 88px);
    --oc-display-1: clamp(2.65rem, 4.4vw, 3.55rem);
    --oc-display-2: clamp(2.15rem, 3.6vw, 3rem);
    --oc-display-3: clamp(1.28rem, 1.9vw, 1.55rem);
  }

  .alt-section-head h2,
  .alt-reviews-head h2,
  .alt-guides-head h2,
  .alt-process-intro h2 {
    max-width: 17ch;
  }

  .alt-process-grid article {
    min-height: 230px;
    padding: clamp(24px, 3vw, 32px);
  }

  .alt-guide-card {
    min-height: clamp(340px, 38vw, 430px);
  }

  .alt-guide-copy {
    left: clamp(24px, 3.2vw, 36px);
    right: clamp(24px, 3.2vw, 36px);
    bottom: clamp(24px, 3.2vw, 36px);
  }

  .alt-guide-copy h3 {
    font-size: clamp(1.65rem, 2.7vw, 2.35rem);
  }

  .selling-page .method-stack .method-card {
    min-height: 330px;
  }

  .article-content p,
  .article-content li {
    font-size: 1.06rem;
  }
}

@media (min-width: 761px) and (max-height: 700px) {
  :root { --oc-section-space: clamp(54px, 6vw, 76px); }

  .alt-hero,
  .sold-hero,
  .listings-hero,
  .contact-hero,
  .editorial-hero,
  .advice-hero {
    min-height: auto;
  }

  .alt-guide-card {
    min-height: clamp(320px, 55vh, 390px);
  }
}

@media (max-width: 760px) {
  .alt-guide-card {
    min-height: clamp(400px, 112vw, 470px);
  }
}

@media (max-width: 420px) {
  .alt-guide-card { min-height: 400px; }
}

/* Rifinitura v50: cornice editoriale più ariosa sui monitor larghi.
   Il contenuto non corre fino ai bordi, ma conserva spazio utile su laptop,
   tablet e browser con zoom elevato. */
:root {
  --oc-shell-max: 1640px;
  --oc-fluid-gutter: clamp(48px, 5.5vw, 104px);
}

.wrap {
  width: min(var(--oc-shell-max), calc(100% - var(--oc-fluid-gutter)));
}

@media (min-width: 1800px) {
  :where(.alt-home, .selling-page, .sold-page, .listings-page, .contact-page, .editorial-page) main > section {
    padding-inline: clamp(0px, 1vw, 18px);
  }
}

@media (max-width: 1240px) {
  :root { --oc-fluid-gutter: 56px; }
  .wrap { width: calc(100% - 56px); }
}

@media (max-width: 980px) {
  :root { --oc-fluid-gutter: 44px; }
  .wrap { width: calc(100% - 44px); }
}

@media (max-width: 760px) {
  :root { --oc-fluid-gutter: 36px; }
  .wrap { width: calc(100% - 36px); }
}

@media (max-width: 420px) {
  :root { --oc-fluid-gutter: 30px; }
  .wrap { width: calc(100% - 30px); }
}