/* =============================================================
   Suite Farnese — Homepage v2 (approved direction)
   Palette: white + ink + sage (CTAs) + red (identity only)
   ============================================================= */

:root {
  /* Override base background to a clean off-white (not beige) */
  --sf-bone:           #FBFBF9;
  --sf-cream:          #F1F1EE;
  --sf-parchment:      #E5E4DF;

  /* Sage green — the primary functional accent */
  --sf-sage:           #7E8E73;
  --sf-sage-deep:      #5F7155;
  --sf-sage-soft:      #CDD4C3;
  --sf-sage-tint:      #ECEFE5;

  /* Stone grey — for thin lines & dividers */
  --sf-stone:          #C8C5BC;
  --sf-stone-deep:     #8A8780;

  /* Identity red — ONLY for "Caprarola", heart in logo, micro details */
  --sf-red:            #C5302C;
  --sf-red-deep:       #9C1F1B;

  /* Re-route the CTA token (still called "terracotta" in legacy CSS) to sage
     so the entire button system swaps without touching every selector. */
  --sf-terracotta:      var(--sf-sage);
  --sf-terracotta-deep: var(--sf-sage-deep);
  --sf-terracotta-soft: var(--sf-sage-soft);
}

/* ============================================================
   HERO v2 — full-height composition, no scroll needed
   header + headline + dittico all fit in 100vh on desktop
   ============================================================ */
.sf-hero-v2 {
  background: var(--sf-bone);
  color: var(--sf-ink);
  padding: 0;
  isolation: isolate;
  /* Grows naturally to fit headline + dittico. On large viewports it
     fills the first screen; on shorter viewports the dittico stays
     visible (no clipping). */
  /* Header now ~140px tall thanks to compact horizontal logo */
  min-height: calc(100vh - 140px);
  display: grid;
  grid-template-rows: auto 1fr;
}

.sf-h2-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sf-s-5);
  padding: 22px var(--sf-gutter);
  max-width: 1480px;
  margin: 0 auto;
}

.sf-h2-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}
.sf-h2-brand-logo {
  height: clamp(80px, 8vw, 120px);
  width: auto;
  display: block;
  transition: height var(--sf-dur-2) var(--sf-ease);
}

.sf-h2-nav {
  display: flex; gap: 44px;
  list-style: none; margin: 0; padding: 0;
}
.sf-h2-nav a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--sf-ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--sf-dur-1) var(--sf-ease),
              color var(--sf-dur-1) var(--sf-ease);
}
.sf-h2-nav a:hover,
.sf-h2-nav a.is-active {
  color: var(--sf-sage-deep);
  border-bottom-color: var(--sf-sage);
}

.sf-h2-actions {
  display: flex; justify-content: end; align-items: center; gap: 14px;
}

/* Sage buttons — primary filled + secondary outline */
.sf-btn-sage {
  font-family: var(--sf-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px;
  border-radius: 4px;
  border: 1px solid var(--sf-sage);
  background: var(--sf-sage);
  color: var(--sf-white);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--sf-dur-1) var(--sf-ease),
              border-color var(--sf-dur-1) var(--sf-ease),
              color var(--sf-dur-1) var(--sf-ease);
}
.sf-btn-sage:hover {
  background: var(--sf-sage-deep);
  border-color: var(--sf-sage-deep);
}
.sf-btn-sage--white {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}
.sf-btn-sage--white:hover {
  background: rgba(255,255,255,0.15) !important;
}
.sf-btn-sage--ghost {
  background: transparent;
  color: var(--sf-sage-deep);
}
.sf-btn-sage--ghost:hover {
  background: var(--sf-sage-tint);
  color: var(--sf-sage-deep);
  border-color: var(--sf-sage-deep);
}
.sf-btn-sage--sm { padding: 10px 18px; font-size: 13px; }

.sf-h2-lang {
  display: inline-flex; gap: 2px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sf-ink-3);
}
.sf-h2-lang button,
.sf-h2-lang a {
  appearance: none; background: transparent; border: 0;
  padding: 4px 8px;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--sf-dur-1) var(--sf-ease);
}
.sf-h2-lang button[aria-pressed="true"],
.sf-h2-lang a.is-active {
  color: var(--sf-ink);
  font-weight: 700;
}
.sf-h2-lang a:not(.is-active):hover {
  color: var(--sf-ink);
}
.sf-h2-lang span { color: var(--sf-stone); }

/* Headline area — compact, sits above the dittico */
.sf-h2-headline-block {
  text-align: center;
  padding: clamp(14px, 1.8vw, 24px) var(--sf-gutter);
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
  min-height: 0;
  flex-shrink: 0;
}

/* SIDE variant — title left, sub+CTAs right (editorial split) */
.sf-hero-v2--side .sf-h2-headline-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
  text-align: left;
  max-width: 1480px;
  padding: clamp(8px, 1vw, 16px) var(--sf-gutter) clamp(20px, 3vw, 44px);
}
.sf-hero-v2--side .sf-h2-headline {
  /* Sized so the longest line (“Caprarola alla finestra.”, 24 chars)
     wraps comfortably in 2 lines inside the title column. */
  font-size: clamp(44px, 6.4vw, 100px);
  text-align: left;
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.018em;
}
/* EN words are wider; reduce font so both lines fit in 2 (class set by HeroV2 when lang='en') */
.sf-hero-v2--side .sf-h2-headline--en {
  font-size: clamp(36px, 5.4vw, 82px);
}
.sf-hero-v2--side .sf-h2-aside {
  display: flex; flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  align-items: flex-start;
  max-width: 480px;
  padding-bottom: 6px;
}
.sf-hero-v2--side .sf-h2-sub {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
  text-align: left;
  max-width: 44ch;
  margin: 0;
  color: var(--sf-ink-2);
}
.sf-hero-v2--side .sf-h2-cta-row {
  justify-content: flex-start;
  width: 100%;
}
.sf-hero-v2--side .sf-h2-cta-row .sf-btn-sage {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 16px 20px;
  font-size: 14px;
}

/* CENTER variant — stacked, classic */
.sf-hero-v2--center .sf-h2-aside {
  display: contents;
}

.sf-h2-headline {
  font-family: var(--sf-font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--sf-ink);
  text-wrap: balance;
}
.sf-h2-headline .sf-caprarola {
  color: var(--sf-red);
  font-style: normal;
  font-weight: 400;
}
.sf-h2-sub {
  font-family: var(--sf-font-body);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--sf-ink-2);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
  letter-spacing: 0.005em;
}
.sf-h2-cta-row {
  display: flex; gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.sf-h2-cta-row .sf-btn-sage {
  /* Force exactly the same width on both CTA buttons, no matter the label */
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
  justify-content: center;
}

/* ============================================================
   DITTICO — fills remaining viewport space inside the hero
   La Luisella (left) + Le Rondini (right). Names BELOW each photo.
   ============================================================ */
.sf-dittico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 18px);
  background: var(--sf-bone);
  width: 100%;
  margin: 0;
  align-items: stretch;
  min-height: 360px;
}
.sf-dittico-cell {
  display: flex; flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.sf-dittico-cell a {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  min-height: 0; min-width: 0;
  flex: 1;
  overflow: hidden;
}
.sf-dittico-media {
  position: relative;
  flex: 1;
  min-height: 320px;
  overflow: hidden;
  background: var(--sf-cream);
}
.sf-dittico-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Anchor toward the upper portion of the room so the beams / ceiling
     stay visible when the cell is shorter than the photo aspect ratio. */
  object-position: center 38%;
  display: block;
  filter: none;
  transition: transform 700ms var(--sf-ease);
}
.sf-dittico-cell:hover .sf-dittico-media img {
  transform: scale(1.02);
}
.sf-dittico-caption {
  /* BELOW the photo, centered */
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px) clamp(10px, 1.4vw, 18px);
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  flex-shrink: 0;
}
.sf-dittico-name {
  font-family: var(--sf-font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--sf-fs-apt-name);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--sf-ink);
  margin: 0;
  text-shadow: none;
}
.sf-dittico-article { color: inherit; margin-right: 0; }
.sf-dittico-rule {
  width: 64px;
  height: 1px;
  background: var(--sf-sage);
  display: block;
  margin: 0;
  box-shadow: none;
}

/* ============================================================
   VIDEO SECTION — "Suite Farnese in movimento"
   Full-width, autoplay+loop+muted, no native controls, only audio toggle
   ============================================================ */
.sf-vidsec {
  background: var(--sf-bone);
  padding: clamp(80px, 11vw, 160px) 0 0;
}
.sf-vidsec-header {
  text-align: center;
  padding: 0 var(--sf-gutter) clamp(40px, 5vw, 72px);
  max-width: 940px;
  margin: 0 auto;
}
.sf-vidsec-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sf-sage-deep);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 12px;
}
.sf-vidsec-eyebrow::before,
.sf-vidsec-eyebrow::after {
  content: "";
  width: 32px; height: 1px;
  background: var(--sf-sage);
}
.sf-vidsec-title {
  font-family: var(--sf-font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: var(--sf-fs-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--sf-ink);
  margin: 0 0 18px;
}
.sf-vidsec-sub {
  font-size: var(--sf-fs-body);
  line-height: 1.55;
  color: var(--sf-ink-2);
  max-width: 56ch;
  margin: 0 auto;
}

.sf-vidsec-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0F0E0C;
  isolation: isolate;
}
.sf-vidsec-stage video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* DO NOT add overlays — the brief is explicit. */
  pointer-events: none;
}
.sf-vidsec-audio {
  position: absolute;
  right: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 32px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sf-ink);
  border: 1px solid rgba(15, 14, 12, 0.08);
  border-radius: 999px;
  font-family: var(--sf-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--sf-dur-1) var(--sf-ease),
              transform var(--sf-dur-1) var(--sf-ease);
  z-index: 2;
}
.sf-vidsec-audio:hover {
  background: var(--sf-white);
  transform: translateY(-1px);
}
.sf-vidsec-audio[data-on="true"] {
  background: var(--sf-sage);
  color: var(--sf-white);
  border-color: var(--sf-sage);
}
.sf-vidsec-audio[data-on="true"]:hover {
  background: var(--sf-sage-deep);
  border-color: var(--sf-sage-deep);
}
.sf-vidsec-audio-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Placeholder state for missing institutional video */
.sf-vidsec-stage[data-pending="true"] {
  background: var(--sf-cream);
  display: flex; align-items: center; justify-content: center;
}
.sf-vidsec-pending {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(40px, 6vw, 80px);
}
.sf-vidsec-pending-frame {
  text-align: center;
  border: 1px dashed var(--sf-stone);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 52px);
  background: rgba(255,255,255,0.5);
  max-width: 560px;
}
.sf-vidsec-pending-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sf-sage-deep);
  margin-bottom: 18px;
}
.sf-vidsec-pending-title {
  font-family: var(--sf-font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sf-ink);
  margin-bottom: 18px;
}
.sf-vidsec-pending-file {
  font-family: var(--sf-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--sf-ink-2);
  padding: 10px 16px;
  background: var(--sf-bone);
  border: 1px solid var(--sf-line);
  display: inline-block;
  margin-bottom: 18px;
}
.sf-vidsec-pending-hint {
  font-size: 13px;
  color: var(--sf-ink-3);
  line-height: 1.5;
  font-style: italic;
}
.sf-h2-top {
  position: sticky;
  top: 0;
  z-index: var(--sf-z-nav);
  background: rgba(251, 251, 249, 0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--sf-dur-2) var(--sf-ease),
              padding var(--sf-dur-2) var(--sf-ease);
  max-width: none;
  width: 100%;
  padding-inline: var(--sf-gutter);
}
.sf-h2-top[data-scrolled="true"] {
  border-bottom-color: var(--sf-line);
  padding-block: 12px;
}
.sf-h2-top[data-scrolled="true"] .sf-h2-brand-logo { height: clamp(60px, 6vw, 84px); }

/* ============================================================
   Tweak the existing sections for the new palette
   - sage CTA fills (terracotta variable already remapped above)
   - swap dark booking strip to a softer composition
   - alternate red/sage on editorial em keywords
   ============================================================ */
.sf-apt-media-tag,
.sf-card-idx,
.sf-borgo-row-idx,
.sf-chapter-num {
  color: var(--sf-sage-deep);
}

/* Editorial keywords — all red (identity accent across the page) */
.sf-intro-display em,
.sf-intro-headline em,
.sf-borgo-text h2 em,
.sf-booking-title em,
.sf-apt-title em,
.sf-consigli-title em,
.sf-confirm-title em {
  color: var(--sf-red);
}
.sf-apt-eyebrow::before { background: var(--sf-sage); }

/* Unify the two apartment spreads so both images get the same size as
   La Luisella (the smaller 5fr column).
   La Luisella (odd) keeps its rtl flow so image lands on the right and
   the body text alignment stays identical to before.
   Le Rondini (even) overrides its previous wide-image column to 5fr too. */
.sf-apartments .sf-apt-spread {
  grid-template-columns: 5fr 7fr;
}
.sf-apartments .sf-apt-spread:nth-child(odd) {
  grid-template-columns: 5fr 7fr;
  direction: rtl;
}
.sf-apartments .sf-apt-spread:nth-child(odd) > * { direction: ltr; }

.sf-kw-red {
  color: var(--sf-red);
  font-weight: 500;
}
.sf-kw-sage {
  color: var(--sf-sage-deep);
  font-weight: 500;
}

/* Hide the old hero entirely (we render v2 instead) */
.sf-hero { display: none; }

/* Hide the edge meta — the brief doesn't want labels on the side */
.sf-edge-meta { display: none !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .sf-h2-nav { gap: 24px; }
  .sf-h2-brand-logo { height: clamp(64px, 7vw, 90px); }
}

/* Hamburger button — hidden on desktop */
.sf-h2-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--sf-c-ink);
}
.sf-h2-ham-line {
  display: block; width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.sf-h2-ham-line--1.open { transform: translateY(6.5px) rotate(45deg); }
.sf-h2-ham-line--2.open { opacity: 0; }
.sf-h2-ham-line--3.open { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu drawer */
.sf-h2-mobile-menu {
  position: fixed; inset: 0;
  z-index: calc(var(--sf-z-nav, 1000) - 1);
  background: #faf9f7;
  padding: 100px var(--sf-gutter, 20px) 48px;
  display: flex; flex-direction: column; gap: 40px;
  overflow-y: auto;
}
.sf-h2-mobile-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.sf-h2-mobile-links li { border-bottom: 1px solid #e8e4de; }
.sf-h2-mobile-links a {
  display: block; padding: 20px 0;
  font-size: clamp(24px, 7vw, 36px);
  font-family: var(--sf-ff-display, Georgia, serif); font-weight: 300;
  color: var(--sf-c-ink, #1a1a1a); text-decoration: none;
}
.sf-h2-mobile-bottom {
  display: flex; flex-direction: column; gap: 16px; margin-top: auto;
}
.sf-h2-mobile-bottom .sf-btn-sage { width: 100%; justify-content: center; text-align: center; }
.sf-h2-mobile-bottom .sf-h2-lang { font-size: 28px; gap: 0; font-family: var(--sf-ff-display, Georgia, serif); font-weight: 300; }
.sf-h2-mobile-bottom .sf-h2-lang a,
.sf-h2-mobile-bottom .sf-h2-lang button { padding: 8px 10px; }

@media (max-width: 880px) {
  .sf-h2-top {
    grid-template-columns: auto auto;
    padding: 14px var(--sf-gutter);
  }
  .sf-h2-nav { display: none; }
  .sf-h2-actions { gap: 10px; }
  .sf-h2-actions .sf-h2-lang { display: none; }
  .sf-h2-book-btn { display: none; }
  .sf-h2-hamburger { display: flex; }
  .sf-h2-brand-logo { height: 80px; }
  .sf-h2-top[data-scrolled="true"] .sf-h2-brand-logo { height: 64px; }

  /* Mobile hero: vertical stack but still tries to fit in viewport gracefully.
     min-height: auto allows it to extend if needed (the headline must remain
     fully readable on small screens). */
  .sf-hero-v2 { height: auto; min-height: auto; grid-template-rows: auto auto; }

  .sf-h2-headline-block { padding: 32px var(--sf-gutter) 24px; gap: 16px; }
  /* On mobile we collapse the side variant into a single stack — no split */
  .sf-hero-v2--side .sf-h2-headline-block {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 18px;
    padding: 32px var(--sf-gutter) 24px;
  }
  .sf-hero-v2--side .sf-h2-headline { text-align: center; font-size: clamp(34px, 9vw, 52px); }
  .sf-hero-v2--side .sf-h2-aside {
    border-left: 0; padding-left: 0;
    max-width: none; align-items: center;
  }
  .sf-hero-v2--side .sf-h2-sub { text-align: center; }
  .sf-hero-v2--side .sf-h2-cta-row { justify-content: center; }
  .sf-h2-headline {
    font-size: clamp(34px, 9vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.02em;
  }
  .sf-h2-sub {
    font-size: 14px;
    line-height: 1.5;
    max-width: 36ch;
  }
  .sf-h2-cta-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .sf-h2-cta-row .sf-btn-sage { justify-content: center; }

  /* Stack the strip as two compact photos on mobile, each at fixed height */
  .sf-dittico { grid-template-columns: 1fr; height: auto; }
  .sf-dittico-cell + .sf-dittico-cell {
    border-top: 1px solid var(--sf-line);
  }
  .sf-dittico-media { position: relative; aspect-ratio: 4/3; min-height: 240px; flex: 0 0 auto; }
  .sf-dittico-cell a { height: auto; }
  .sf-dittico-caption {
    padding: 20px var(--sf-gutter) 14px;
  }
  .sf-dittico-name { font-size: clamp(28px, 8vw, 38px); }

  /* Video section */
  .sf-vidsec-title { font-size: clamp(28px, 7.4vw, 40px); }
  .sf-vidsec-sub { font-size: 14px; }
  .sf-vidsec-audio {
    right: 14px; bottom: 14px;
    padding: 9px 14px 9px 12px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .sf-h2-headline { font-size: clamp(32px, 11vw, 44px); }
  .sf-vidsec-stage { aspect-ratio: 4/3; }
  .sf-h2-brand-logo { height: 52px; }
  .sf-h2-brand .sf-h2-brand-tag { display: none; }
}

/* ============================================================
   Sage CTA hover for the existing button system
   (sf-btn--primary uses --sf-terracotta which we remapped to sage)
   ============================================================ */
.sf-btn--primary {
  background: var(--sf-sage);
  border-radius: 4px;
}
.sf-btn--primary:hover {
  background: var(--sf-sage-deep);
}

/* Quick-form CTA buttons stay sage too */
.sf-quick-form .sf-btn--primary { background: var(--sf-sage); }
.sf-quick-form .sf-btn--primary:hover { background: var(--sf-sage-deep); }

/* ============================================================
   Pentagon symbol — decorative background element
   ============================================================ */
@keyframes sf-drift {
  0%   { transform: translate(calc(-50% - 100px), -50%); }
  50%  { transform: translate(calc(-50% + 80px), -50%); }
  100% { transform: translate(calc(-50% - 100px), -50%); }
}
@keyframes sf-zoom {
  0%, 100% { scale: 0.76; }
  50%       { scale: 1.26; }
}
@keyframes sf-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sf-pentagon-wrapper {
  position: absolute;
  top: 50%;
  left: 26%;
  pointer-events: none;
  z-index: 0;
  animation: sf-drift 32s ease-in-out infinite, sf-zoom 22s ease-in-out infinite;
}
.sf-pentagon-symbol {
  display: block;
  width: clamp(220px, 28vw, 360px);
  height: auto;
  color: #c8c2b8;
  opacity: 0.18;
  transform-origin: 50% 50%;
  animation: sf-spin 28s linear infinite;
}
.sf-h2-headline-block { position: relative; overflow: visible; }
@media (max-width: 768px) {
  .sf-pentagon-wrapper { top: 30%; left: 50%; }
}

/* The booking strip keeps the ink background but adds a sage glow */
.sf-booking::before {
  background: radial-gradient(circle at center, rgba(126, 142, 115, 0.20), transparent 70%);
}