/* ==========================================================================
   Nomade Italia — Mediterranean & Refined Stylesheet
   ========================================================================== */

:root {
  /* ──────────────────────────────────────────────────────────────────────
     Nomade brand-system tokens (semantic names from brand-colors.css)
     These are the canonical names. Each country lockup defines its own
     palette in its own brand file. The legacy aliases below alias them
     to keep existing CSS rules working unchanged.
     ────────────────────────────────────────────────────────────────────── */
  --italy-notte:  #0B2545;   /* primary ink — Mediterranean night */
  --italy-bosco:  #008C45;   /* tricolore green */
  --italy-rosso:  #CD212A;   /* tricolore red */
  --italy-avorio: #F7F2E8;   /* tricolore ivory */
  --italy-oro:    #F4D35E;   /* warm Tuscan gold accent */
  --italy-bg:     #F4EFE6;   /* page tint */
  --italy-muted:  #5C6470;   /* secondary text */

  /* Legacy aliases — kept so existing rules keep working unchanged */
  --green-deep:   var(--italy-notte);     /* primary ink rebound to navy */
  --green-mid:    var(--italy-bosco);
  --green-soft:   #DCEEDF;
  --yellow:       var(--italy-oro);
  --yellow-soft:  #FBF1C9;
  --yellow-deep:  #C9A21E;                /* darker gold for hover */
  --blue-deep:    var(--italy-notte);
  --blue-soft:    #D9E1EE;
  --blue-mid:     #1F4173;
  --orange:       var(--italy-rosso);
  --ocean:        #1F6FB1;
  --ocean-deep:   var(--italy-notte);
  --sand:         var(--italy-bg);
  --ink:          #14182A;
  --muted:        var(--italy-muted);
  --line:         #E5E2DA;
  --white:        #FFFFFF;

  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 6px rgba(11,37,69,.07);
  --shadow-md: 0 8px 24px rgba(11,37,69,.10);
  --shadow-lg: 0 18px 48px rgba(11,37,69,.18);

  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

img { max-width: 100%; display: block; }

a { color: var(--ocean-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Belt-and-suspenders: any element acting as a button (any class containing "btn",
   nav CTA, form submit buttons, the hero/feature CTAs) must NEVER show an underline,
   even on hover/focus/active. Centralized so future button variants inherit it. */
a[class*="btn"],
a[class*="btn"]:hover,
a[class*="btn"]:focus,
a[class*="btn"]:active,
.nav__cta,
.nav__cta:hover,
.nav__cta:focus,
.nav__cta:active,
button,
button:hover,
input[type="submit"],
input[type="submit"]:hover,
input[type="button"],
input[type="button"]:hover { text-decoration: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--green-deep);
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 4.8vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 2.9vw, 2.3rem); margin-top: 1.8em; font-weight: 600; }
h3 { font-size: 1.25rem; margin-top: 1.4em; font-weight: 600; }
h4 { margin-top: 1.2em; font-weight: 700; font-family: var(--font-sans); letter-spacing: .04em; text-transform: uppercase; font-size: .9rem; }
p  { margin: 0 0 1em; }

/* Reset top margin for headings that are the first child of a container */
:where(.hero, .hero__inner, .container, .article, .article > header, .card, .post-card__body, .text-center, .grid, .callout, .footer-grid > div) > :first-child:where(h1, h2, h3, h4) {
  margin-top: 0;
}

/* Tighten the gap when an eyebrow/pill is the first child and a heading follows it */
.hero__eyebrow + h1,
.hero__eyebrow + h2,
.hero__eyebrow + h3,
.hero__eyebrow + h4 { margin-top: 0; }

/* Compact spacing inside cards regardless of position */
.card h2, .card h3, .card h4 { margin-top: .4em; }
.post-card__body h3 { margin-top: .4em; }
.callout h2, .callout h3, .callout h4 { margin-top: .4em; }

/* Scroll offset so anchor jumps don't hide under sticky nav */
h1[id], h2[id], h3[id] { scroll-margin-top: 120px; }

/* ----- Layout ------------------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section--tight { padding: 48px 0; }
.section--sand { background: var(--sand); }
.section--green { background: var(--green-soft); }
.section--deep { background: var(--green-deep); color: var(--white); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--white); }

/* ----- Header / Nav ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: var(--maxw); margin: 0 auto;
  gap: 16px;
}
.nav__logo img { height: 68px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.nav__links a {
  color: var(--green-deep); font-weight: 600; font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--green-mid); }
.nav__cta {
  background: var(--yellow);
  color: var(--green-deep) !important;
  padding: 10px 20px; border-radius: 999px; font-weight: 700;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--yellow);
}
.nav__cta:hover {
  background: var(--yellow-deep);
  border-color: var(--yellow-deep);
  text-decoration: none !important;
}

.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 8px; width: 44px; height: 44px;
  position: relative; z-index: 60;
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle span {
  display: block; width: 26px; height: 2.5px;
  background: var(--green-deep);
  margin: 5px auto; border-radius: 2px;
  transition: transform .35s cubic-bezier(.4,.01,.165,.99),
              opacity .25s ease,
              background-color .2s ease;
  transform-origin: center;
}
/* Animated hamburger → X */
.nav__toggle.is-active span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav__toggle.is-active span:nth-child(2) {
  opacity: 0; transform: scaleX(0);
}
.nav__toggle.is-active span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 1180px) {
  .nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 10px 0;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 24px; width: 100%; border-bottom: 1px solid var(--line); }
  .nav__cta { margin: 12px 24px; text-align: center; }
  .nav__toggle { display: block; }
}
@media (max-width: 540px) {
  .nav__logo img { height: 60px; }
}

/* ----- Hero --------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,223,0,.30), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(0,156,59,.25), transparent 60%),
    linear-gradient(180deg, #FFF7E8 0%, #DFF3E6 100%);
  padding: 110px 0 96px;
  min-height: 360px;
}
.hero__inner {
  max-width: 980px;
  position: relative;
  z-index: 2;
}
.hero__eyebrow {
  display: inline-block; background: var(--green-deep); color: var(--yellow);
  padding: 6px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px;
}
.hero h1 { margin-bottom: 18px; }
.hero__sub { font-size: 1.2rem; color: var(--muted); max-width: 620px; }
.hero__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ----- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; padding: 14px 24px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; cursor: pointer; border: 0;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--yellow); color: var(--green-deep); box-shadow: var(--shadow-sm); border: 2px solid var(--yellow); }
.btn--primary:hover { background: var(--yellow-deep); border-color: var(--yellow-deep); box-shadow: var(--shadow-md); color: var(--green-deep); }
.btn--ghost { background: var(--white); color: var(--green-deep); border: 2px solid var(--green-deep); }
.btn--ghost:hover { background: var(--green-deep); color: var(--white); }
.btn--green { background: var(--green-deep); color: var(--white); border: 2px solid var(--green-deep); }
.btn--green:hover { background: var(--green-mid); border-color: var(--green-mid); color: var(--white); }
.btn--blue { background: var(--blue-deep); color: var(--white); border: 2px solid var(--blue-deep); }
.btn--blue:hover { background: var(--blue-mid); border-color: var(--blue-mid); color: var(--white); }

/* Mobile: ensure any adjacent .btn siblings (in flex or inline groups)
   stack with breathing room — never touch each other. */
@media (max-width: 540px) {
  .btn { width: 100%; max-width: 100%; text-align: center; }
  .btn + .btn { margin-top: 12px; }
}

/* ----- Cards & Grids ------------------------------------------------------ */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* Keep 3 across at all useful widths — for tightly-related step trios */
.grid--keep-row.grid--3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 540px) {
  .grid--keep-row.grid--3 { grid-template-columns: 1fr; gap: 16px; }
}

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { margin-top: 6px; }
.card__icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-soft); color: var(--green-mid); font-size: 1.4rem;
  margin-bottom: 8px;
}
.card__icon--orange { background: var(--yellow-soft); color: #8a6d00; }
.card__icon--ocean { background: var(--blue-soft); color: var(--blue-deep); }
.card__icon--yellow { background: var(--yellow-soft); color: #8a6d00; }

.card-link {
  display: block; color: inherit;
}
.card-link:hover { text-decoration: none; }

/* ----- Steps ribbon ------------------------------------------------------- */
.steps { counter-reset: step; }
.step {
  position: relative; padding: 28px 28px 28px 92px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 24px; top: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--green-mid); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.step h3 { margin-top: 0; }

/* ----- Checklist ---------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; }
/* Scope card styling to DIRECT children only — nested <ol>/<ul> inside
   .checklist__desc must not inherit the flex-card layout, otherwise their
   text + <strong> + <a> become separate flex items and overlap. */
.checklist > li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 10px; background: var(--white);
  transition: background .15s ease;
}
.checklist > li.is-checked { background: var(--green-soft); }
.checklist > li.is-checked .checklist__label { text-decoration: line-through; color: var(--muted); }
.checklist > li > input[type="checkbox"] {
  width: 22px; height: 22px; accent-color: var(--green-mid); margin-top: 2px;
  flex-shrink: 0; cursor: pointer;
}
.checklist__label { font-weight: 600; display: block; }
.checklist__desc { font-size: .95rem; color: var(--muted); margin-top: 4px; display: block; }
/* Nested ordered/unordered lists inside a checklist item render as normal
   block lists with their markers, not as flex cards. */
.checklist__desc ol,
.checklist__desc ul { margin: 8px 0 0; padding-left: 1.4em; }
.checklist__desc ol > li,
.checklist__desc ul > li {
  display: list-item;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 6px;
}

.progress {
  background: var(--green-soft); border-radius: 999px;
  height: 14px; overflow: hidden; margin-bottom: 14px;
}
.progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--green-mid), var(--orange));
  transition: width .3s ease;
}

/* ----- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; background: var(--white); }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { background: var(--green-soft); color: var(--green-deep); font-weight: 700; }
.tbl tr:last-child td { border-bottom: 0; }

/* ----- FAQ / Accordion --------------------------------------------------- */
details.faq {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 10px; padding: 0 18px;
}
details.faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--green-deep);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
details.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--green-mid); }
details.faq[open] summary::after { content: "–"; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq > p { padding-bottom: 16px; margin: 0; color: var(--muted); }

/* ----- FAQ section (homepage) — card grid with numbered questions -------- */
.faq-section {
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(0,156,59,.08), transparent 60%),
    radial-gradient(700px 360px at 0% 100%, rgba(255,223,0,.10), transparent 60%),
    var(--sand);
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; }
}

.faq-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.faq-card:hover {
  border-color: var(--green-mid);
  box-shadow: 0 6px 24px rgba(14, 59, 46, 0.08);
}
.faq-card[open] {
  border-color: var(--green-mid);
  box-shadow: 0 8px 28px rgba(14, 59, 46, 0.10);
}

.faq-card summary {
  cursor: pointer;
  list-style: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  user-select: none;
}
.faq-card summary::-webkit-details-marker { display: none; }

.faq-card__num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--green-mid);
  letter-spacing: .04em;
  min-width: 28px;
}
.faq-card__q {
  font-weight: 600;
  color: var(--green-deep);
  line-height: 1.35;
  font-size: 1rem;
}
.faq-card__icon {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--green-soft);
  position: relative;
  flex-shrink: 0;
  transition: background-color .2s ease, transform .25s ease;
}
.faq-card__icon::before,
.faq-card__icon::after {
  content: "";
  position: absolute;
  background: var(--green-deep);
  border-radius: 2px;
  left: 50%; top: 50%;
  transition: transform .25s ease, opacity .2s ease;
}
.faq-card__icon::before {  /* horizontal bar */
  width: 12px; height: 2.5px;
  transform: translate(-50%, -50%);
}
.faq-card__icon::after {  /* vertical bar */
  width: 2.5px; height: 12px;
  transform: translate(-50%, -50%);
}
.faq-card[open] .faq-card__icon {
  background: var(--yellow);
  transform: rotate(180deg);
}
.faq-card[open] .faq-card__icon::after {
  opacity: 0;
}

.faq-card__body {
  padding: 0 22px 20px 64px;  /* indent answer beneath question text */
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.65;
}
.faq-card__body p { margin: 0; }
.faq-card__body a { color: var(--green-mid); font-weight: 600; }
.faq-card__body a:hover { color: var(--green-deep); }

@media (max-width: 540px) {
  .faq-card summary { padding: 16px 18px; gap: 12px; }
  .faq-card__num { font-size: 1rem; min-width: 24px; }
  .faq-card__q { font-size: .95rem; }
  .faq-card__body { padding: 0 18px 18px 54px; }
}

/* ----- Callouts ----------------------------------------------------------- */
.callout {
  padding: 18px 20px; border-radius: var(--radius-sm);
  border-left: 4px solid var(--yellow-deep); background: var(--yellow-soft);
  margin: 20px 0;
}
.callout--green { background: var(--green-soft); border-color: var(--green-mid); }
.callout--blue  { background: #E5F5FA; border-color: var(--ocean); }
.callout strong { color: var(--green-deep); }

/* ----- Blog --------------------------------------------------------------- */
.post-card {
  display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.post-card:hover h3 { color: var(--green-mid); }
.post-card, .post-card *,
.post-card:hover, .post-card:hover * { text-decoration: none !important; }
/* Editorial post-card — clean white card, no green cover, small-caps tag */
.post-card__body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}
.post-card__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-mid);
  margin: 0 0 4px;
}
.post-card__body h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--green-deep);
  margin: 0 0 6px;
}
.post-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
  flex: 1;
}
.post-card__readmore {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--green-deep);
  transition: color .15s ease, transform .15s ease;
}
.post-card:hover .post-card__readmore {
  color: var(--green-mid);
  transform: translateX(2px);
}

.article { max-width: 880px; margin: 0 auto; padding: 56px 24px 80px; }
.article header { margin-bottom: 36px; }
.article header .meta { color: var(--muted); font-size: .9rem; margin-bottom: 8px; }
.article h2 { margin-top: 2em; }
.article ul, .article ol { padding-left: 1.4em; }
.article li { margin-bottom: .4em; }
.article .hero-img {
  height: 360px; border-radius: var(--radius);
  background-size: cover; background-position: center;
  margin-bottom: 24px;
}

/* Inline content image (single, full-width inside article column) */
.article figure {
  margin: 28px 0;
}
.article figure img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: block;
}
.article figure figcaption {
  margin-top: 8px;
  font-size: .9rem; color: var(--muted);
  font-style: italic;
}

/* Image gallery — masonry-ish 2 or 3 column */
.article .gallery {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin: 28px 0;
}
.article .gallery--2 { grid-template-columns: repeat(2, 1fr); }
.article .gallery img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
}
@media (max-width: 700px) {
  .article .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Hero with background photo — photo IS the primary visual; light Italian-navy tint overlay */
/* IMPORTANT: background-image is set via inline style on the element so URLs resolve relative to the HTML file. */
.hero--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--green-deep);
  background-image: var(--bg, none);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 460px;
  color: #fff;
}
/* Dark-green gradient — keeps the photo visible while giving headlines the contrast they need */
.hero--photo::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(14, 59, 46, 0.32) 0%,
      rgba(14, 59, 46, 0.45) 55%,
      rgba(14, 59, 46, 0.62) 100%);
  pointer-events: none;
}
/* Content sits above the overlay */
.hero--photo .hero__inner,
.hero--photo > .container,
.hero--photo .container { position: relative; z-index: 2; }
.hero--photo h1,
.hero--photo h2,
.hero--photo h3 {
  color: #ffffff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
}
.hero--photo .hero__sub {
  color: #F4FFF7;
  text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.3);
}
.hero--photo .hero__eyebrow {
  background: var(--green-deep);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  margin-bottom: 10px;
}
/* Darker variant — full overlay used on the homepage final CTA */
.hero--photo.hero--dark::after {
  background: linear-gradient(180deg, rgba(14,59,46,.78), rgba(14,59,46,.55) 60%, rgba(14,59,46,.85));
}
.hero--photo.hero--dark .hero__sub { color: #DFF3E6; }

/* ----- Stat grid (replaces the old orange "At a glance" table) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.stat-grid__title {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 10px;
  margin: 0 0 6px;
  border-bottom: 2px solid var(--green-soft);
}
.stat-grid__title h3 {
  margin: 0; font-size: 1.1rem; color: var(--green-deep);
}
.stat-grid__title .pill {
  background: var(--yellow); color: var(--green-deep);
  font-size: .7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: .08em; text-transform: uppercase;
}
.stat-tile {
  background: var(--green-soft);
  border-radius: var(--radius-sm);
  padding: 14px 14px 16px;
  border-left: 4px solid var(--green-mid);
}
.stat-tile__label {
  display: block;
  font-size: .72rem; font-weight: 800;
  color: var(--green-deep);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.stat-tile__value {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.stat-tile__sub {
  display: block;
  font-size: .85rem; color: var(--muted);
  margin-top: 4px;
}
.stat-tile--accent {
  background: linear-gradient(135deg, var(--green-mid), var(--green-deep));
  border-left-color: var(--yellow);
  color: #fff;
}
.stat-tile--accent .stat-tile__label { color: var(--yellow); }
.stat-tile--accent .stat-tile__value { color: #fff; }
.stat-tile--accent .stat-tile__sub { color: var(--green-soft); }

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ----- Photo strip (homepage feature) ----------------------------------- */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 36px 0;
}
/* Auto-balanced 6-cell layout: first cell taller and spans 2 rows */
.photo-strip > :nth-child(1) {
  grid-row: span 2;
}
.photo-strip__item {
  background-size: cover; background-position: center;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.photo-strip__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.photo-strip > :nth-child(1) { aspect-ratio: auto; }
.photo-strip__item--tall { aspect-ratio: auto; min-height: 320px; }
.photo-strip__item .caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent, rgba(14,59,46,.88));
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
}
@media (max-width: 900px) {
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip > :nth-child(1) { grid-row: auto; aspect-ratio: 16/10; }
}
@media (max-width: 520px) {
  .photo-strip { grid-template-columns: 1fr; }
  .photo-strip__item { aspect-ratio: 16/10; min-height: 0; }
}

/* ----- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--green-deep); color: #C9D8D1;
  padding: 56px 0 32px;
  margin-top: 0;
}
/* Footer uses logo-footer.svg directly (white text, colored mark) — no filter needed */
.site-footer img[src*="logo-footer.svg"] {
  height: 56px !important;
  width: auto;
}
.site-footer h4 { color: var(--yellow); margin-bottom: 14px; font-family: var(--font-sans); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.site-footer a { color: #C9D8D1; }
.site-footer a:hover { color: var(--yellow); }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .85rem; color: #8FA39A;
}

/* ----- Utilities ---------------------------------------------------------- */
.text-center { text-align: center; }
.mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-deep);
  font-size: .8rem; font-weight: 700; letter-spacing: .03em;
}
.tag--orange { background: var(--yellow-soft); color: #8a6d00; }
.tag--ocean  { background: #D6F0F7; color: var(--ocean-deep); }
.disclaimer {
  font-size: .85rem; color: var(--muted); padding: 14px;
  background: #F7F8F7; border-radius: var(--radius-sm); border: 1px dashed var(--line);
}

/* Lead paragraph */
.lead { font-size: 1.15rem; color: var(--muted); }

/* ----- Contact form ----------------------------------------------------- */
.form { max-width: 640px; margin: 0 auto; }
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block; font-weight: 700; font-size: .85rem;
  margin-bottom: 8px; color: var(--green-deep);
  letter-spacing: .04em; text-transform: uppercase;
}
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--white);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(0, 156, 59, 0.18);
}
.form-field textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.form-honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-status {
  padding: 14px 18px; border-radius: 10px; margin-bottom: 20px;
  display: none;
}
.form-status.is-success {
  display: block; background: var(--green-soft);
  border-left: 4px solid var(--green-mid); color: var(--green-deep);
}
.form-status.is-error {
  display: block; background: #FEE2E2;
  border-left: 4px solid #DC2626; color: #991B1B;
}
.form-actions { margin-top: 8px; }
.form-actions .btn { padding: 14px 28px; }

/* ----- Email signup block -------------------------------------------------
   Inline newsletter capture used on the visa guide, checklist, and homepage.
   The form posts to Web3Forms by default — swap action/access_key when you
   migrate to a real ESP (ConvertKit, Beehiiv, Mailchimp, etc.).            */
.signup {
  background: linear-gradient(135deg, var(--green-soft) 0%, #FFF7E8 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 28px;
  margin: 36px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
}
@media (min-width: 720px) {
  .signup { grid-template-columns: 1.2fr 1fr; padding: 32px 36px; gap: 32px; }
}
.signup__copy h3 {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  color: var(--green-deep);
}
.signup__copy p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.55; }
.signup__copy small { display: block; margin-top: 8px; color: var(--muted); font-size: .82rem; }

.signup__form { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) {
  .signup__form { grid-template-columns: 1fr auto; }
}
.signup__form input[type="email"] {
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--ink);
}
.signup__form input[type="email"]:focus {
  outline: none;
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(0,156,59,.15);
}
.signup__form button {
  padding: 12px 22px;
  border: 0;
  background: var(--green-deep);
  color: var(--white);
  font-weight: 700;
  font-size: .95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.signup__form button:hover { background: var(--green-mid); transform: translateY(-1px); }
.signup__form .signup__status { grid-column: 1 / -1; font-size: .9rem; min-height: 1.2em; color: var(--green-deep); }
.signup__status.is-error { color: #B91C1C; }

/* ----- Tools-we-use section (homepage) — clean, accented ------------------ */
.section--tools {
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(0, 156, 59, .06), transparent 60%),
    radial-gradient(700px 360px at 0% 100%, rgba(14, 59, 46, .05), transparent 60%),
    linear-gradient(180deg, #FAFAF7 0%, #F2EFE8 100%);
  position: relative;
  border-top: 3px solid var(--green-deep);
  border-bottom: 3px solid var(--green-deep);
}
.section--tools .card {
  background: var(--white);
  border: 1px solid rgba(14, 59, 46, .08);
  box-shadow: 0 6px 22px rgba(14, 59, 46, .10);
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.section--tools .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(14, 59, 46, .16);
  border-color: var(--green-mid);
}
/* Larger card headings — applies to every .card h3 across the site */
.card h3 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: .4em 0 10px;
  color: var(--green-deep);
  line-height: 1.2;
}
@media (max-width: 540px) {
  .card h3 { font-size: 1.5rem; }
}

/* ----- SafetyWing affiliate promo (brand bar + banner + widget) ---------- */
.safetywing-promo {
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 24px 0;
  overflow: hidden;
}
.safetywing-promo__brand {
  background: #000;
  padding: 14px 22px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.safetywing-promo__brand img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
}
.safetywing-promo__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 22px;
}
@media (min-width: 760px) {
  .safetywing-promo__cols {
    grid-template-columns: 280px 1fr;
    gap: 28px;
    padding: 28px;
  }
  .safetywing-promo__brand img { height: 32px; }
}
.safetywing-promo__banner {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(14, 59, 46, .12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.safetywing-promo__banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 59, 46, .18);
}
.safetywing-promo__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.safetywing-promo__body { display: flex; flex-direction: column; justify-content: center; }

/* ----- Italy regional map (per-city highlight) --------------------------- */
.italy-map-wrap {
  display: flex; gap: 28px; align-items: center;
  background: var(--blue-soft); border-radius: var(--radius);
  padding: 24px; margin: 24px 0 32px;
}
.italy-map-wrap svg { flex-shrink: 0; max-width: 320px; height: auto; }
.italy-map-wrap .legend h3 { margin: 0 0 8px; }
.italy-map-wrap .legend p { margin: 0 0 10px; color: var(--muted); }
.italy-map-wrap .legend .pill {
  display: inline-block; background: var(--italy-rosso); color: #fff;
  padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700;
}
@media (max-width: 700px) {
  .italy-map-wrap { flex-direction: column; align-items: flex-start; }
  .italy-map-wrap svg { max-width: 280px; }
}

.italy-map .state {
  fill: #fff;
  stroke: #cfd5dd;
  stroke-width: 1.2;
  transition: fill .15s ease;
}
.italy-map .state-label {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 700;
  fill: #5C6470; pointer-events: none;
  text-anchor: middle; dominant-baseline: central;
}
/* Region tints (soft) — North-West, North-East, Centre, South, Islands */
.italy-map .region-NW { fill: #E8EEF7; }
.italy-map .region-NE { fill: #ECEFE3; }
.italy-map .region-C  { fill: #FBF1C9; }
.italy-map .region-S  { fill: #F7E2DA; }
.italy-map .region-I  { fill: #F2E8D8; }
/* Active state — Italian gold with navy border */
.italy-map .state.active {
  fill: var(--italy-oro);
  stroke: var(--italy-notte);
  stroke-width: 2;
}
.italy-map .state.active + .state-label,
.italy-map .state-label.active { fill: var(--italy-notte); }

/* ==========================================================================
   Print styles — Italian Digital Nomad Visa Checklist
   Triggered both from Cmd/Ctrl+P and the "Print / Save as PDF" button on
   checklist.html. Goal: a clean, paper-friendly version that drops the
   chrome (nav, footer, hero image) and renders all 6 phases with proper
   page breaks and visible checkboxes.
   ========================================================================== */
@media print {
  /* Use sensible margins on Letter / A4 */
  @page { margin: 0.6in 0.55in; }

  /* Hide all interactive / decorative chrome */
  .site-header,
  .site-footer,
  .hero,
  .hero--photo,
  .nav,
  .no-print,
  [data-checklist-reset],
  [data-checklist-print] {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Open up the layout — no card chrome, no max widths */
  .section { padding: 0 !important; }
  .container { max-width: 100% !important; padding: 0 !important; }
  .article { max-width: 100% !important; padding: 0 !important; }

  /* Print header: title block above the first phase */
  .checklist-print-header {
    display: block !important;
    border-bottom: 2pt solid #0E3B2E;
    padding-bottom: 10pt;
    margin-bottom: 16pt;
  }
  .checklist-print-header h1 {
    font-family: var(--font-serif);
    font-size: 22pt;
    margin: 0 0 4pt;
    color: #0E3B2E;
  }
  .checklist-print-header p {
    margin: 0;
    font-size: 9.5pt;
    color: #444;
  }
  .checklist-print-header .src {
    font-size: 8.5pt;
    color: #666;
    margin-top: 4pt;
  }

  /* Phase headings stay with their list */
  h2 {
    font-size: 14pt;
    color: #0E3B2E;
    margin: 16pt 0 8pt;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Checklist items: visible boxes, no breaking mid-item */
  .checklist { padding: 0 !important; margin: 0 0 8pt; list-style: none; }
  .checklist li {
    display: block;
    padding: 6pt 0 6pt 22pt;
    border: 0 !important;
    background: transparent !important;
    margin: 0 0 4pt;
    page-break-inside: avoid;
    break-inside: avoid;
    position: relative;
  }
  .checklist input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0; top: 7pt;
    width: 12pt; height: 12pt;
    border: 1.2pt solid #0E3B2E !important;
    border-radius: 2pt;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Show a checkmark for checked items so progress prints correctly */
  .checklist input[type="checkbox"]:checked {
    background: #0E3B2E !important;
  }
  .checklist input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 3pt; top: 0pt;
    width: 4pt; height: 8pt;
    border: solid #fff;
    border-width: 0 1.5pt 1.5pt 0;
    transform: rotate(45deg);
  }
  .checklist label { display: block; cursor: default; }
  .checklist__label {
    display: block;
    font-weight: 700;
    color: #0E3B2E;
    font-size: 11pt;
    margin-bottom: 2pt;
  }
  .checklist__desc {
    display: block;
    font-size: 10pt;
    color: #222;
  }

  /* Reference callouts (FBI links, apostille authorities, sworn translation) */
  .callout {
    border: 0.6pt solid #cfd9d3 !important;
    background: #f6f9f7 !important;
    padding: 10pt 12pt !important;
    margin: 10pt 0 !important;
    border-radius: 4pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .callout strong { color: #0E3B2E; }
  .grid--2 { display: block !important; }
  .grid--2 > div { margin: 0 0 8pt; }

  /* Show URLs after links so the printed copy is actually useful offline */
  .article a[href^="http"]::after,
  .checklist a[href^="http"]::after,
  .callout a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #555;
    word-break: break-all;
  }
  /* …but suppress the URL print-out for in-page anchors and javascript: */
  .article a[href^="#"]::after,
  .checklist a[href^="#"]::after { content: ""; }

  /* Don't print the inline "Open …" buttons inside checklist items — the
     URLs they point to are already shown via the link-after rule above. */
  .checklist .btn { display: none !important; }

  /* Progress bar / footer disclaimer — keep the disclaimer, drop the rest */
  .progress, .progress__bar { display: none !important; }
  .disclaimer {
    margin-top: 14pt;
    padding-top: 8pt;
    border-top: 0.5pt solid #ccc;
    font-size: 8.5pt;
    color: #555;
  }

  /* Page break between roughly the halfway point of the checklist */
  .checklist-pagebreak { page-break-before: always; break-before: page; }

  /* Avoid orphaned phase headers at page bottom */
  h2 + .checklist { page-break-before: avoid; }
}

/* The print header is hidden on screen */
.checklist-print-header { display: none; }

/* ==========================================================================
   ████ BOLD + EDITORIAL DESIGN OVERLAY ████
   This block at the end of the file overrides the earlier visual treatment
   to match the homepage's Bold + Editorial design language (Mockup 4):
   sticky nav with real logo, tricolore frame at top, big Playfair typography
   with italic accents, square uppercase buttons, dark navy footer with gold
   accents, parallax-friendly hero. Applied site-wide via existing class
   structure — no HTML changes required for sub-pages.
   ========================================================================== */

/* Optional design tokens specific to the bold layer */
:root {
  --be-notte:  var(--italy-notte);
  --be-rosso:  var(--italy-rosso);
  --be-bosco:  var(--italy-bosco);
  --be-avorio: var(--italy-avorio);
  --be-oro:    #F4D35E;
  --be-paper:  var(--italy-bg);
  --be-ink:    #14182A;
  --be-muted:  var(--italy-muted);
  --be-serif:  'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --be-sans:   'Inter', system-ui, -apple-system, sans-serif;
}

/* ----- Tricolore frame at top of every page ------------------------------- */
body { background: var(--be-paper); color: var(--be-ink); }
body::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: 4px; z-index: 999;
  background: linear-gradient(90deg,
    var(--be-bosco)  0     33.33%,
    #ffffff          33.33% 66.66%,
    var(--be-rosso)  66.66% 100%);
  pointer-events: none;
}

/* ----- Typography uplift -------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--be-notte);
  letter-spacing: -0.025em;
}
h1 {
  font-family: var(--be-serif);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--be-rosso);
}
h2 {
  font-family: var(--be-serif);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.05;
}
h3 {
  font-family: var(--be-serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.15;
}

/* ----- Site header / Nav: bold treatment --------------------------------- */
.site-header {
  position: sticky; top: 4px; z-index: 50;
  background: var(--be-paper);
  backdrop-filter: none;
  border-bottom: 1px solid rgba(11,37,69,.08);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1440px; margin: 0 auto; gap: 24px;
}
.nav__logo img { height: 65px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; flex-wrap: nowrap; }
.nav__links a {
  color: var(--be-notte) !important;
  font-weight: 600; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
  transition: color .15s ease;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--be-rosso) !important; }
.nav__links a[aria-current="page"]:not(.nav__cta) {
  color: var(--be-rosso) !important;
  border-bottom: 2px solid var(--be-rosso);
  padding-bottom: 4px;
}
/* The CTA looks identical on every page — no active-state treatment.
   Keeping it consistent reads as a stable brand element rather than a
   page-state indicator. */
.nav__cta {
  background: var(--be-paper) !important;
  color: var(--be-notte) !important;
  padding: 12px 24px; border-radius: 0 !important;
  border: 2px solid var(--be-notte) !important;
  font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  box-shadow: none !important;
  transition: all .2s ease;
  text-decoration: none !important;
}
.nav__cta:hover,
.nav__cta:focus,
.nav__cta:active {
  background: var(--be-notte) !important;
  color: var(--be-paper) !important;
  border-color: var(--be-notte) !important;
  text-decoration: none !important;
}
.nav__toggle span { background: var(--be-notte); }
@media (max-width: 1180px) {
  /* Re-assert the mobile drawer behavior — the desktop .nav__links rule
     above this overlay otherwise wins source-order and keeps the menu
     visible at narrow widths. */
  .nav__links {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--be-paper);
    border-top: 1px solid rgba(11,37,69,.08);
    border-bottom: 1px solid rgba(11,37,69,.08);
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(11,37,69,.1);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    z-index: 49;
  }
  .nav__links.is-open { display: flex !important; }
  .nav__links a {
    padding: 16px 28px;
    width: 100%;
    border-bottom: 1px solid rgba(11,37,69,.06);
    font-size: 1rem;
  }
  .nav__links a:last-child { border-bottom: 0; }
  /* Promote the in-drawer Open Checklist link to a prominent red button —
     IDENTICAL rendering to the homepage's mobile pattern. */
  .nav__links .nav__cta,
  .nav__links__cta {
    display: block !important;
    align-self: stretch !important;
    width: auto !important;
    box-sizing: border-box !important;
    background: var(--italy-rosso) !important;
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    font-size: .82rem !important;
    margin: 8px 24px 12px !important;
    padding: 16px 28px !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* Drawer CTA stays red on hover (no navy flash) — matches the homepage's
     mobile drawer pattern. Slightly darker red on hover for press feedback. */
  .nav__links .nav__cta:hover,
  .nav__links__cta:hover,
  .nav__links .nav__cta:focus,
  .nav__links__cta:focus {
    background: #B61923 !important;
    color: #fff !important;
    border-color: #B61923 !important;
  }
  .nav__toggle { display: block !important; }
  /* Lock body scroll when the mobile drawer is open */
  body.has-nav-open { overflow: hidden; }
}
@media (max-width: 540px) { .nav__logo img { height: 54px; } }

/* ----- Hero: bold typographic treatment over photo ----------------------- */
.hero {
  background:
    linear-gradient(180deg, rgba(11,37,69,.12) 0%, rgba(11,37,69,.08) 60%, rgba(11,37,69,0) 100%),
    var(--be-paper);
  padding: 130px 0 110px;
  border-bottom: 4px solid var(--be-notte);
  min-height: 380px;
}
.hero--photo {
  background-color: var(--be-notte);
  background-blend-mode: normal;
}
.hero--photo::before {
  background: linear-gradient(180deg, rgba(11,37,69,.1) 0%, rgba(11,37,69,.45) 100%);
}
.hero__inner {
  max-width: 1100px; padding: 0 32px;
}
.hero__eyebrow {
  background: transparent !important;
  color: var(--be-rosso) !important;
  padding: 0 0 6px !important;
  border-radius: 0 !important;
  font-size: .78rem;
  font-weight: 700; letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 14px;
  border-bottom: 0;
}
.hero__eyebrow::before {
  content: ''; display: inline-block;
  width: 36px; height: 3px; background: var(--be-rosso);
}
.hero--photo .hero__eyebrow {
  color: var(--be-oro) !important;
}
.hero--photo .hero__eyebrow::before { background: var(--be-oro); }
.hero h1 {
  font-family: var(--be-serif);
  font-weight: 700;
  font-size: clamp(2.8rem, 6.5vw, 5.6rem);
  line-height: .95; letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.hero--photo h1 { color: white; }
.hero__sub {
  font-size: 1.18rem; line-height: 1.55;
  color: var(--be-muted); max-width: 720px;
}
.hero--photo .hero__sub { color: rgba(255,255,255,.92); }
.hero__sub strong {
  color: var(--be-notte);
}
.hero--photo .hero__sub strong { color: white; }
.hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; }

/* ----- Buttons: bold square uppercase ------------------------------------ */
.btn {
  display: inline-block; padding: 16px 28px; border-radius: 0 !important;
  font-weight: 700; font-size: .82rem !important;
  letter-spacing: .15em; text-transform: uppercase;
  cursor: pointer; border: 2px solid transparent;
  transition: all .2s ease;
  box-shadow: none !important;
  text-decoration: none !important;
}
.btn:hover,
.btn:focus,
.btn:active { transform: none; text-decoration: none !important; }
.btn--primary {
  background: var(--be-notte) !important;
  color: var(--be-avorio) !important;
  border-color: var(--be-notte) !important;
}
.btn--primary:hover {
  background: var(--be-rosso) !important;
  border-color: var(--be-rosso) !important;
  color: white !important;
}
.btn--ghost {
  background: transparent !important;
  color: var(--be-notte) !important;
  border-color: var(--be-notte) !important;
}
.btn--ghost:hover {
  background: var(--be-notte) !important;
  color: var(--be-avorio) !important;
}
.btn--green {
  background: var(--be-notte) !important;
  color: var(--be-avorio) !important;
  border-color: var(--be-notte) !important;
}
.btn--green:hover {
  background: var(--be-rosso) !important;
  border-color: var(--be-rosso) !important;
  color: white !important;
}
.btn--blue {
  background: var(--be-notte) !important;
  color: var(--be-avorio) !important;
  border-color: var(--be-notte) !important;
}
.btn--blue:hover {
  background: var(--be-rosso) !important;
  border-color: var(--be-rosso) !important;
}

/* ----- Section background tweak ------------------------------------------ */
.section--green {
  background: var(--be-notte);
  color: var(--be-avorio);
}
.section--green h2,
.section--green h3,
.section--green h4 { color: white; }
.section--green p,
.section--green li { color: rgba(255,255,255,.88); }
.section--green .btn--green {
  background: var(--be-oro) !important;
  color: var(--be-notte) !important;
  border-color: var(--be-oro) !important;
}
.section--green .btn--green:hover {
  background: white !important;
  color: var(--be-notte) !important;
  border-color: white !important;
}
.section--sand {
  background: var(--be-paper);
}
.section--tools { background: var(--be-paper); }

/* ----- Stat tile (Why Italy panel) — bold treatment ---------------------- */
.stat-tile {
  background: white !important;
  border: 1px solid rgba(11,37,69,.1) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  box-shadow: none !important;
}
.stat-tile--accent {
  background: var(--be-notte) !important;
  color: white !important;
  border-color: var(--be-notte) !important;
}
.stat-tile--accent .stat-tile__label,
.stat-tile--accent .stat-tile__sub { color: rgba(255,255,255,.8) !important; }
.stat-tile__label {
  font-size: .72rem !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--be-muted) !important;
  font-weight: 600;
}
.stat-tile__value {
  font-family: var(--be-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--be-rosso) !important;
  margin-top: 8px;
}
.stat-tile--accent .stat-tile__value { color: var(--be-oro) !important; }
.stat-tile__sub { font-size: .82rem !important; color: var(--be-muted); }

/* ----- Cards: cleaner, less rounded -------------------------------------- */
.card {
  background: white;
  border: 1px solid rgba(11,37,69,.08) !important;
  border-radius: 4px;
  box-shadow: none;
  transition: all .2s ease;
}
.card:hover {
  border-color: var(--be-oro) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(11,37,69,.08);
}
.card-link { text-decoration: none; color: inherit; }
.card h3 {
  font-family: var(--be-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--be-notte);
}
.card__icon {
  background: var(--be-notte) !important;
  color: var(--be-oro) !important;
  border-radius: 0 !important;
  font-family: var(--be-serif);
  font-weight: 500; font-style: italic;
}
.card__icon--orange { background: var(--be-rosso) !important; color: white !important; }
.card__icon--ocean { background: var(--be-bosco) !important; color: white !important; }

/* ----- Tag chips ---------------------------------------------------------- */
.tag {
  border-radius: 4px;
  font-size: .68rem !important;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700 !important;
  padding: 4px 10px;
}
.tag--orange { background: var(--be-rosso) !important; color: white !important; }
.tag--ocean { background: var(--be-notte) !important; color: white !important; }

/* ----- Post cards (city/culture preview cards) --------------------------- */
.post-card {
  background: white;
  border: 1px solid rgba(11,37,69,.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: all .2s ease;
}
.post-card:hover {
  border-color: var(--be-oro);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(11,37,69,.08);
}
/* Card cover image — used on city listing cards */
.post-card__image {
  position: relative;
  aspect-ratio: 4 / 5;          /* taller portrait crop — matches city galleries */
  overflow: hidden;
  background: var(--be-notte);
}
.post-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
  filter: saturate(.95);
}
.post-card:hover .post-card__image img {
  transform: scale(1.04);
  filter: saturate(1);
}
.post-card__body {
  padding: 24px;
  flex: 1;                       /* fill remaining card height */
  display: flex;
  flex-direction: column;
}
.post-card__body .post-card__readmore { margin-top: auto; }  /* pin to bottom */
.post-card__tag {
  display: inline-block;
  font-size: .65rem; letter-spacing: .15em;
  text-transform: uppercase; font-weight: 700;
  color: var(--be-rosso); margin-bottom: 10px;
}
.post-card h3 {
  font-family: var(--be-serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.1; margin-bottom: 8px;
}
.post-card__readmore {
  display: inline-block; margin-top: 12px;
  font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  color: var(--be-rosso);
}

/* ----- Callouts ----------------------------------------------------------- */
.callout {
  border-radius: 4px;
  border-left-width: 4px !important;
  background: white !important;
  border: 1px solid rgba(11,37,69,.1);
  padding: 24px 28px;
}
.callout--green {
  background: rgba(244,211,94,.08) !important;
  border-left-color: var(--be-oro) !important;
}
.callout--blue {
  background: rgba(11,37,69,.04) !important;
  border-left-color: var(--be-notte) !important;
}

/* ----- Tables ------------------------------------------------------------- */
.tbl th {
  font-family: var(--be-sans);
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; color: var(--be-notte);
  background: rgba(11,37,69,.04);
  border-bottom: 2px solid var(--be-notte);
  padding: 14px 16px; text-align: left;
}
.tbl td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(11,37,69,.08);
  font-size: .95rem;
}

/* ----- FAQ accordion (used on visa page etc.) ---------------------------- */
.faq {
  border-top: 1px solid rgba(11,37,69,.15);
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
}
.faq + .faq { border-top: 0; }
.faq:last-of-type { border-bottom: 1px solid rgba(11,37,69,.15); }
.faq summary {
  font-family: var(--be-serif); font-weight: 500;
  font-size: 1.2rem; line-height: 1.25;
  padding: 24px 0; color: var(--be-notte);
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq[open] { background: rgba(244,211,94,.06); }
.faq[open] summary { border-bottom: 1px solid rgba(11,37,69,.1); padding-bottom: 16px; }
.faq p { padding: 16px 0 24px; color: rgba(11,14,26,.78); line-height: 1.7; }

/* ----- Footer: dark navy with gold accents ------------------------------- */
.site-footer {
  background: var(--be-notte) !important;
  color: rgba(255,255,255,.7) !important;
  padding: 80px 32px 32px;
  font-size: .9rem;
}
.site-footer .container { max-width: 1440px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
.site-footer h4 {
  font-family: var(--be-sans);
  color: var(--be-oro) !important;
  font-size: .72rem !important;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin-bottom: 18px;
}
.site-footer a {
  color: rgba(255,255,255,.7) !important;
  text-decoration: none;
}
/* Only the footer column links are block-level; inline links inside the
   disclaimer paragraph (e.g. "See our Terms of Use") stay inline. */
.site-footer .footer-grid a {
  display: block;
  padding: 4px 0;
}
.site-footer a:hover { color: white !important; }
.site-footer p { color: rgba(255,255,255,.78); }
.site-footer p strong { color: white; }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between;
  margin-top: 56px;
  font-size: .78rem;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom a { display: inline; color: white !important; font-weight: 700; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  /* Match the homepage's mobile nav padding for consistency. */
  .nav { padding: 16px 24px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ----- Article (privacy / terms / etc.) ---------------------------------- */
.article {
  max-width: 880px; margin: 0 auto; padding: 60px 32px 80px;
}
.article h2 {
  margin-top: 2.4em;
  font-family: var(--be-serif);
  font-weight: 700;
}
.article p, .article li { line-height: 1.7; color: rgba(11,14,26,.85); }
.article a { color: var(--be-rosso); border-bottom: 1.5px solid var(--be-rosso); }

/* ----- Email signup block uplift ----------------------------------------- */
.signup {
  background: var(--be-notte) !important;
  color: var(--be-avorio) !important;
  border-radius: 0 !important;
  padding: 48px 40px !important;
  border-left: 4px solid var(--be-oro);
}
.signup h3 {
  color: white !important;
  font-family: var(--be-serif);
  font-weight: 500;
}
.signup p, .signup small { color: rgba(255,255,255,.8) !important; }
.signup__form input {
  background: transparent !important;
  color: white !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(255,255,255,.4) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
}
.signup__form input::placeholder { color: rgba(255,255,255,.5); }
.signup__form button {
  background: var(--be-oro) !important;
  color: var(--be-notte) !important;
  border-radius: 0 !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 12px 24px !important;
}
.signup__form button:hover { background: white !important; }

/* ----- Contact form ------------------------------------------------------ */
.form input, .form select, .form textarea {
  border-radius: 0 !important;
  border: 1.5px solid rgba(11,37,69,.2) !important;
  font-family: var(--be-sans);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--be-rosso) !important;
  outline: 0;
}

/* ----- Disclaimer / fine print -------------------------------------------- */
.disclaimer {
  font-size: .85rem; color: var(--be-muted);
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid rgba(11,37,69,.1);
}

/* Map wrap (Italy SVG region map) ----------------------------------------- */
.italy-map-wrap {
  background: rgba(244,211,94,.08) !important;
  border-radius: 4px;
  border-left: 4px solid var(--be-oro);
}

/* End of Bold + Editorial overlay ----------------------------------------- */

/* ==========================================================================
   ████ BOLD + EDITORIAL — STRONGER TYPOGRAPHY PASS (v2) ████
   Make the homepage's bold blue + red italic identity show up clearly across
   the rest of the site by aggressively strengthening h1/h2 treatments,
   adding a red accent bar before content h2s, and bumping hero scale.
   ========================================================================== */

/* Hero h1 — even more dramatic on subpages with photo backgrounds */
.hero h1 {
  font-family: var(--be-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(3.4rem, 8vw, 9rem) !important;
  line-height: .92 !important;
  letter-spacing: -0.03em !important;
}
.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--be-rosso);
}
.hero--photo h1 em {
  color: var(--be-oro) !important;
}

/* Hero subtitle — bigger, more confident */
.hero__sub {
  font-size: 1.18rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  max-width: 720px !important;
}

/* Body section h2 — add a small red accent bar before each one to echo the
   homepage's section-eyebrow treatment. Excludes nav, footer, and headings
   inside cards/callouts/heroes where the bar would clutter. */
.section h2,
.article h2,
section.section > .container > h2,
section.section > .container .container h2 {
  font-family: var(--be-serif);
  font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--be-notte);
  position: relative;
  padding-top: 24px;
  margin-top: 1.6em;
}
.section h2::before,
.article h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--be-rosso);
}
/* Cards, callouts, hero, footer headings stay clean (no accent bar) */
.card h2, .callout h2, .hero h2, .site-footer h2,
.signup h2, .signup h3,
.faq-card h2, .stat-grid__title h2,
section.section > .container > .text-center > h2 {
  padding-top: 0;
}
.card h2::before, .callout h2::before, .hero h2::before,
.site-footer h2::before, .signup h2::before, .signup h3::before,
section.section > .container > .text-center > h2::before {
  display: none;
}

/* Editorial em accents in body h2 (red italic) */
.section h2 em, .article h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--be-rosso);
}

/* h3 cleanup — slightly bigger, italic accents in red */
h3 em { font-style: italic; color: var(--be-rosso); font-weight: 500; }

/* Lead paragraph — first paragraph after a section <h2> reads as editorial */
.section > .container > p.lead,
.article > p.lead {
  font-size: 1.18rem !important;
  line-height: 1.6 !important;
  color: var(--be-notte) !important;
  font-weight: 400 !important;
}

/* Section eyebrow (small uppercase label above h2) — bolder treatment */
.hero__eyebrow,
.section > .container > .text-center > .hero__eyebrow,
.label-eyebrow {
  font-size: .78rem !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--be-rosso) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.hero__eyebrow::before,
.label-eyebrow::before {
  content: ''; display: inline-block;
  width: 36px; height: 3px;
  background: var(--be-rosso);
}
.hero--photo .hero__eyebrow {
  color: var(--be-oro) !important;
}
.hero--photo .hero__eyebrow::before { background: var(--be-oro); }

/* A "feature" pattern available to subpages — large image + heading layout
   that mirrors the homepage feature blocks. Use class="feature" on a section
   with an inner image and copy. */
.section .container > .grid--2 > div > h2 em,
.section .container > .grid--2 > div > h3 em {
  font-style: italic;
  color: var(--be-rosso);
  font-weight: 500;
}

/* Big-number callout — drop a 9rem Playfair number anywhere via .big-number */
.big-number {
  display: block;
  font-family: var(--be-serif);
  font-weight: 700;
  font-size: clamp(5rem, 12vw, 11rem);
  line-height: .85;
  color: var(--be-notte);
  letter-spacing: -0.05em;
  margin: 0 0 16px;
}
.big-number em {
  font-style: italic;
  color: var(--be-rosso);
}

/* End of v2 typography pass --------------------------------------------- */

/* ======================================================================
   HOMEPAGE-STYLE HERO for subpages (.hero--editorial)
   Replaces the over-darkened photo hero on city/topic pages with the
   2-column type+image treatment used on the homepage.
   ====================================================================== */
.hero--editorial {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 540px;
  border-bottom: 4px solid var(--italy-notte);
  margin: 0;
  padding: 0;
  background: var(--italy-avorio);
}
.hero-edit__type {
  padding: 84px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--italy-avorio);
  position: relative;
}
.hero-edit__type .hero__eyebrow {
  font-size: .82rem; font-weight: 700; letter-spacing: .25em;
  text-transform: uppercase; color: var(--italy-rosso);
  display: inline-flex; align-items: center; gap: 14px;
}
.hero-edit__type .hero__eyebrow::before {
  content: ''; width: 36px; height: 3px; background: var(--italy-rosso);
}
.hero-edit__type h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(3.4rem, 8vw, 9rem) !important;
  line-height: .92 !important;
  letter-spacing: -0.04em !important;
  color: var(--italy-notte) !important;
  margin: 28px 0 !important;
  padding: 0 !important;
}
.hero-edit__type h1::before { display: none !important; }
.hero-edit__type h1 em { font-style: italic; font-weight: 500; color: var(--italy-rosso); }
.hero-edit__type h1 .underline { display: inline-block; position: relative; }
.hero-edit__type h1 .underline::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 10px; background: var(--italy-oro); z-index: -1;
}
.hero-edit__copy {
  font-size: 1.1rem; max-width: 480px;
  color: rgba(11,14,26,.78); line-height: 1.6;
  margin: 0;
}
.hero-edit__copy strong { color: var(--italy-notte); }
.hero-edit__bottom {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; padding-top: 32px; margin-top: 32px;
  border-top: 1px solid rgba(11,37,69,.15);
}
.hero-edit__bottom .btn-primary,
.hero-edit__bottom .btn-ghost {
  display: inline-block; padding: 14px 26px;
  font-size: .76rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; transition: all .2s ease;
  border: 2px solid transparent;
  text-decoration: none;
  border-radius: 0;
}
.hero-edit__bottom .btn-primary { background: var(--italy-notte); color: var(--italy-avorio); border-color: var(--italy-notte); }
.hero-edit__bottom .btn-primary:hover { background: var(--italy-rosso); border-color: var(--italy-rosso); }
.hero-edit__bottom .btn-ghost { background: transparent; color: var(--italy-notte); border-color: var(--italy-notte); }
.hero-edit__bottom .btn-ghost:hover { background: var(--italy-notte); color: var(--italy-avorio); }
.hero-edit__pic {
  background: center/cover no-repeat;
  position: relative;
  min-height: 360px;
}
.hero-edit__pic::after {
  content: ''; position: absolute; right: 28px; bottom: 28px;
  width: 64px; height: 64px;
  background: linear-gradient(135deg,
    var(--italy-bosco) 33%,
    var(--italy-avorio) 33% 66%,
    var(--italy-rosso) 66%);
}

@media (max-width: 900px) {
  .hero--editorial { grid-template-columns: 1fr; min-height: auto; }
  .hero-edit__type { padding: 56px 28px; }
  .hero-edit__pic { min-height: 320px; order: -1; }
}

/* ======================================================================
   CITY PAGE 2-COL LAYOUT — main content + sidebar with At a glance
   ====================================================================== */
.city-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  max-width: 1180px !important;
  margin: 0 auto;
}
.city-main { min-width: 0; }
.city-main h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  line-height: 1.1 !important;
  color: var(--italy-notte);
  margin: 56px 0 18px !important;
  letter-spacing: -0.02em;
}
.city-main h2:first-child { margin-top: 0 !important; }
.city-main h2 em { font-style: italic; color: var(--italy-rosso); font-weight: 500; }
.city-main h2::before {
  display: block !important;
  content: '' !important;
  width: 40px;
  height: 3px;
  background: var(--italy-rosso);
  margin-bottom: 14px;
}

.city-sidebar {
  position: sticky;
  top: 110px;
  align-self: start;
}
.sidebar-card {
  background: rgba(244,211,94,.08);
  border: 1px solid rgba(11,37,69,.14);
  padding: 0;
}
.sidebar-card__head {
  background: var(--italy-notte);
  color: var(--italy-avorio);
  padding: 22px 24px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.sidebar-card__head h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.7rem !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--italy-avorio) !important;
  font-weight: 700 !important;
}
.sidebar-card__head h3::before { display: none !important; }
.sidebar-card__head .pill {
  background: var(--italy-rosso);
  color: #fff;
  padding: 4px 10px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.city-stats { margin: 0; padding: 6px 24px 18px; }
.city-stats > div {
  padding: 14px 0;
  border-top: 1px solid rgba(11,37,69,.1);
}
.city-stats > div:first-child { border-top: 0; }
.city-stats dt {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--italy-rosso);
  margin: 0 0 4px;
}
.city-stats dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--italy-notte);
  line-height: 1.25;
}
.city-stats dd small {
  display: block;
  font-size: .78rem;
  font-weight: 400;
  color: var(--italy-muted);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .city-layout { grid-template-columns: 1fr; gap: 40px; max-width: 720px !important; }
  .city-sidebar { position: static; }
}

/* ======================================================================
   NUMBERED ROUTE BLOCKS — used on residency.html (and similar pages)
   Mirrors homepage step__num styling for consistency.
   ====================================================================== */
.route-step {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 80px 0;
  border-top: 1px solid rgba(11,37,69,.15);
}
.route-step:last-of-type { border-bottom: 1px solid rgba(11,37,69,.15); }
.route-step__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(6rem, 12vw, 11rem);
  line-height: .85;
  color: var(--italy-notte);
  letter-spacing: -0.05em;
  align-self: start;
  position: sticky;
  top: 120px;
}
.route-step__num em {
  font-style: italic;
  font-weight: 500;
  color: var(--italy-rosso);
}
.route-step__body { min-width: 0; }
.route-step__body h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.8rem, 3.6vw, 3rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--italy-notte) !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.route-step__body h2::before { display: none !important; }
.route-step__body h2 em { font-style: italic; color: var(--italy-rosso); font-weight: 500; }
.route-step__body h2 .it { font-style: italic; color: var(--italy-muted); font-weight: 400; font-size: .7em; display: block; letter-spacing: 0; margin-top: 4px; }
/* Inside a route-step, stack the two-column .grid--2 cards as full-width rows
   (avoids the squished feel when the body column is narrower than the page) */
.route-step__body .grid.grid--2 {
  grid-template-columns: 1fr;
  gap: 24px;
}
.route-step__body .card {
  padding: 28px 32px;
}
@media (max-width: 900px) {
  .route-step { grid-template-columns: 1fr; gap: 16px; padding: 56px 0; }
  .route-step__num { font-size: 7rem; position: static; }
}

/* ======================================================================
   FAQ ACCORDION — homepage style, applied across visa/codice/etc.
   ====================================================================== */
.faq-section {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 32px;
}
.faq-section__head {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 720px;
}
.faq-section__head .label {
  font-size: .82rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--italy-rosso); font-weight: 700;
}
.faq-section__head h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.9rem, 4vw, 3.4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em;
  color: var(--italy-notte) !important;
  margin: 12px 0 12px !important;
  padding: 0 !important;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .faq-section__head h2 { white-space: normal; font-size: 1.7rem !important; }
}
.faq-section__head h2::before { display: none !important; }
.faq-section__head h2 em { font-style: italic; color: var(--italy-rosso); font-weight: 500; }
.faq-section__head p {
  font-size: 1.05rem; color: var(--italy-muted); line-height: 1.65;
  margin: 0;
}
.faq-section__list { display: flex; flex-direction: column; gap: 0; }
.faq-it {
  border-top: 1px solid rgba(11,37,69,.18);
  padding: 0;
  transition: background .2s ease;
}
.faq-it:last-child { border-bottom: 1px solid rgba(11,37,69,.18); }
.faq-it summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  align-items: baseline;
  gap: 24px;
}
.faq-it summary::-webkit-details-marker { display: none; }
.faq-it__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--italy-rosso);
  flex-shrink: 0;
  width: 52px;
}
.faq-it__q {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  color: var(--italy-notte);
  flex-grow: 1;
  letter-spacing: -0.01em;
}
.faq-it__icon {
  font-size: 1.4rem;
  line-height: 0;
  color: var(--italy-notte);
  flex-shrink: 0;
  transition: transform .3s ease;
  width: 22px;
  text-align: center;
}
.faq-it__icon::before { content: '+'; }
.faq-it[open] .faq-it__icon::before { content: '−'; }
.faq-it[open] { background: rgba(244,211,94,.07); }
.faq-it__body {
  padding: 0 24px 28px 76px;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(11,14,26,.78);
}
.faq-it__body p { margin: 0 0 1em; }
.faq-it__body p:last-child { margin-bottom: 0; }
.faq-it__body em { font-style: italic; }
.faq-it__body a {
  color: var(--italy-rosso);
  border-bottom: 1.5px solid var(--italy-rosso);
  font-weight: 600;
}
@media (max-width: 600px) {
  .faq-it__body { padding-left: 0; }
  .faq-it summary { gap: 14px; }
  .faq-it__num { width: 36px; font-size: 1.1rem; }
}

/* ======================================================================
   CITY GALLERY — large editorial photo blocks embedded inside city pages
   Each cell is a button that opens the lightbox.
   ====================================================================== */
.city-gallery {
  margin: 64px 0 48px;
}
.city-gallery__head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
  border-top: 1px solid rgba(11,37,69,.15);
  padding-top: 28px;
}
.city-gallery__label {
  font-size: .76rem; letter-spacing: .25em;
  text-transform: uppercase; font-weight: 700;
  color: var(--italy-rosso);
}
.city-gallery__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--italy-muted);
  margin: 0;
}
.city-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.city-gallery__cell {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: zoom-in;
  border: 0;
  padding: 0;
  background: var(--italy-notte);
  margin: 0;
  display: block;
  width: 100%;
  text-align: left;
}
.city-gallery__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease, opacity .3s ease;
}
.city-gallery__cell:hover img { transform: scale(1.04); }
.city-gallery__cell:focus { outline: 3px solid var(--italy-oro); outline-offset: 2px; }
.city-gallery__cell::after {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  background: rgba(11,37,69,.55) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15 3h6v6h-2V6.41l-5.29 5.3-1.42-1.42L17.59 5H15V3zM3 15h2v3.59l5.29-5.3 1.42 1.42L6.41 20H9v2H3v-7z"/></svg>') center/18px no-repeat;
  border-radius: 0;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.city-gallery__cell:hover::after { opacity: 1; }
.city-gallery__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 18px 16px;
  background: linear-gradient(to top, rgba(11,37,69,.85) 0%, rgba(11,37,69,0) 100%);
  color: #fff;
  font-size: .92rem;
  letter-spacing: .02em;
  line-height: 1.35;
  text-transform: none;
}
.city-gallery__caption em { font-style: italic; opacity: .85; font-weight: 400; }
@media (max-width: 540px) {
  .city-gallery__grid { gap: 8px; }
  .city-gallery__caption { font-size: .82rem; padding: 16px 14px 12px; }
}

/* Lightbox (fullscreen image viewer) */
.lightbox {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(11,14,26,.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 32px;
  animation: lb-fade .25s ease;
}
.lightbox.is-open { display: flex; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox__caption {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  text-align: center;
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  padding: 0 32px;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.lightbox__close {
  position: absolute;
  top: 24px; right: 24px;
  background: transparent;
  border: 2px solid rgba(255,255,255,.6);
  color: #fff;
  width: 48px; height: 48px;
  font-size: 1.4rem;
  cursor: pointer;
  border-radius: 0;
  transition: all .2s ease;
  font-weight: 300;
  line-height: 1;
}
.lightbox__close:hover {
  background: var(--italy-rosso);
  border-color: var(--italy-rosso);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  width: 56px; height: 56px;
  font-size: 1.6rem;
  cursor: pointer;
  border-radius: 0;
  transition: all .2s ease;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__nav:hover {
  background: var(--italy-rosso);
  border-color: var(--italy-rosso);
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__counter {
  position: absolute;
  top: 32px; left: 32px;
  color: rgba(255,255,255,.7);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
}
@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.2rem; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox__counter { top: 18px; left: 18px; font-size: .65rem; }
  .lightbox__caption { bottom: 14px; font-size: .9rem; }
}

/* =========================================================================
   GDPR / ePrivacy cookie consent banner — appears bottom-fixed on first visit
   until the user clicks Accept analytics or Decline.
   ========================================================================= */
#nm-cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--be-notte, #0B2545);
  color: var(--be-paper, #F7F2E8);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  padding: 18px 22px;
  z-index: 9999;
  animation: nm-cookie-rise .35s ease-out;
  font-family: 'Inter', sans-serif;
}
@keyframes nm-cookie-rise {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#nm-cookie-banner.is-dismissed {
  transform: translateY(24px);
  opacity: 0;
  transition: transform .25s ease-in, opacity .25s ease-in;
}
.nm-cookie-banner__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.nm-cookie-banner__copy {
  margin: 0;
  flex: 1 1 380px;
  font-size: .92rem;
  line-height: 1.55;
  color: #E7EDF3;
}
.nm-cookie-banner__copy a {
  color: var(--be-oro, #F4D35E);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nm-cookie-banner__copy a:hover { color: #fff; }
.nm-cookie-banner__buttons {
  display: flex;
  gap: 10px;
  flex: none;
}
.nm-cookie-banner__btn {
  display: inline-block;
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none !important;
}
.nm-cookie-banner__btn--decline {
  background: transparent;
  color: #E7EDF3;
  border-color: rgba(231, 237, 243, 0.45);
}
.nm-cookie-banner__btn--decline:hover {
  border-color: #E7EDF3;
  background: rgba(255,255,255,0.06);
}
.nm-cookie-banner__btn--accept {
  background: var(--be-rosso, #CD212A);
  color: #fff;
  border-color: var(--be-rosso, #CD212A);
}
.nm-cookie-banner__btn--accept:hover {
  background: #B61923;
  border-color: #B61923;
}
@media (max-width: 720px) {
  #nm-cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 16px 18px; }
  .nm-cookie-banner__inner { gap: 14px; }
  .nm-cookie-banner__copy { font-size: .88rem; flex-basis: 100%; }
  .nm-cookie-banner__buttons { width: 100%; }
  .nm-cookie-banner__btn { flex: 1; text-align: center; padding: 12px 14px; }
}