/* =============================================================
   Aurelio's Artpartment — Ortigia
   Cinematic premium site · black & signal-yellow
   Elegant · soft · rounded
   ============================================================= */

/* ---------- Tokens ---------- */
:root{
  /* core palette (warm near-black + warm white + signal yellow) */
  --ink:        #16140F;
  --ink-2:      #1F1C16;
  --ink-3:      #2A261E;
  --paper:      #FBFAF5;
  --paper-2:    #F1EDE2;
  --paper-3:    #E6E0D2;
  --stone:      #9A958A;
  --stone-2:    #6E6A60;

  /* yellow — unified to the logo's yellow (#FDF855) */
  --yellow:     #FDF855;
  --yellow-deep:#CFA319;
  --yellow-soft:#FEFBBE;

  --ink-rgb: 22,20,15;
  --paper-rgb: 251,250,245;

  /* type — overridden by Tweaks (serif / sans / mix) */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-eyebrow: "Manrope", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;

  /* shape — soft rounded */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 44px;
  --r-pill: 999px;

  --shadow-soft: 0 2px 8px rgba(22,20,15,.05), 0 18px 50px -24px rgba(22,20,15,.30);
  --shadow-float: 0 30px 80px -40px rgba(22,20,15,.55), 0 8px 24px -16px rgba(22,20,15,.35);
  /* recovered from design tokens (referenced by apartment.css) */
  --shadow-deep: 0 60px 120px -40px rgba(0,0,0,0.65);
  --bone: #E2DCCE;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-cinema: cubic-bezier(0.77, 0, 0.175, 1);

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 84px);

  --nav-h: 78px;
}

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--yellow); color:var(--ink); }

/* ---------- Type helpers ---------- */
.display{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking);
  line-height:1.02;
}
.eyebrow{
  font-family:var(--font-eyebrow);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:clamp(10px,1.1vw,12px);
  font-weight:600;
}
.ital{ font-style:italic; }
.yel{ color:var(--yellow-deep); }
.serif-quote{ font-family:var(--font-display); font-style:italic; }

/* language visibility */
[data-lang="it"] .en{ display:none; }
[data-lang="en"] .it{ display:none; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }

/* =============================================================
   NAV
   ============================================================= */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease);
}
.nav__inner{
  width:100%; max-width:1480px; margin-inline:auto;
  padding-inline:clamp(18px,4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__brand{ display:flex; align-items:center; gap:13px; }
.nav__brand img{ height:42px; width:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.nav__brand b{
  font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:.01em;
  color:#fff; line-height:1; transition:color .4s var(--ease);
}
.nav__brand b i{ font-style:normal; color:var(--yellow); }
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{
  position:relative; font-size:15.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.9); transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; background:var(--yellow);
  transition:width .35s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:16px; }

.lang{
  display:inline-flex; align-items:center; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.28); overflow:hidden; backdrop-filter:blur(6px);
}
.lang button{
  padding:7px 13px; font-size:12px; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.7);
  transition:.3s var(--ease);
}
.lang button[aria-pressed="true"]{ background:var(--yellow); color:var(--ink); }

.abtn{
  display:inline-flex; align-items:center; gap:9px; border-radius:var(--r-pill);
  padding:13px 24px; font-size:13.5px; font-weight:700; letter-spacing:.02em;
  transition:transform .4s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;
}
.abtn--solid{ background:var(--yellow); color:var(--ink); box-shadow:0 12px 30px -14px var(--yellow-deep); }
.abtn--solid:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -16px var(--yellow-deep); }
.abtn--ghost{ border:1.4px solid rgba(255,255,255,.4); color:#fff; }
.abtn--ghost:hover{ background:#fff; color:var(--ink); transform:translateY(-2px); }
.abtn--ink{ background:var(--ink); color:var(--paper); }
.abtn--ink:hover{ transform:translateY(-2px); background:var(--ink-3); }
.abtn svg{ width:16px; height:16px; }

/* nav scrolled state */
.site-nav.is-stuck{
  background:rgba(251,250,245,.86);
  backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(22,20,15,.08), 0 20px 40px -30px rgba(22,20,15,.4);
}
.site-nav.is-stuck .nav__brand b{ color:var(--ink); }
.site-nav.is-stuck .nav__links a{ color:rgba(22,20,15,.7); }
.site-nav.is-stuck .nav__links a:hover{ color:var(--ink); }
.site-nav.is-stuck .lang{ border-color:rgba(22,20,15,.18); }
.site-nav.is-stuck .lang button{ color:rgba(22,20,15,.55); }
.site-nav.is-stuck .lang button[aria-pressed="true"]{ background:var(--yellow); color:var(--ink); }
.site-nav.is-stuck .abtn--ghost{ border-color:rgba(22,20,15,.28); color:var(--ink); }
.site-nav.is-stuck .abtn--ghost:hover{ background:var(--ink); color:#fff; }

/* mobile menu toggle */
.nav__burger{ display:none; width:46px; height:46px; border-radius:var(--r-pill);
  align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.3); }
.nav__burger span{ display:block; width:18px; height:2px; background:#fff; position:relative; transition:.3s; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#fff; transition:.3s; }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }
.site-nav.is-stuck .nav__burger{ border-color:rgba(22,20,15,.2); }
.site-nav.is-stuck .nav__burger span,.site-nav.is-stuck .nav__burger span::before,.site-nav.is-stuck .nav__burger span::after{ background:var(--ink); }

/* =============================================================
   HERO
   ============================================================= */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--ink); }
.hero__stage{ position:absolute; inset:0; }
.hero__layer{ position:absolute; inset:-8% ; will-change:transform; }
.hero__layer img{ width:100%; height:100%; object-fit:cover; }
.hero__photo{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:kenburns 26s var(--ease) infinite alternate;
  will-change:transform;
}

/* hero living drop-slot (cinematic default) */
.hero__layer--slot{ animation:none; }
.hero__layer--slot:has(image-slot[data-filled]){ animation:kenburns 26s var(--ease) infinite alternate; will-change:transform; }
.hero image-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero image-slot::part(frame){ background:linear-gradient(135deg, #1b1812 0%, #100e0a 100%); }
.hero image-slot::part(ring){ border-color:rgba(253,248,85,.34); }
.hero image-slot::part(empty){ color:rgba(251,250,245,.62); }
@media (prefers-reduced-motion: reduce){ .hero__layer--slot:has(image-slot[data-filled]){ animation:none; } }
@keyframes kenburns{
  0%{ transform:scale(1.08) translate(0,0); }
  100%{ transform:scale(1.2) translate(-2%,-2%); }
}
.hero__scrim{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(22,20,15,.55) 0%, rgba(22,20,15,.12) 32%, rgba(22,20,15,.30) 64%, rgba(22,20,15,.86) 100%),
    radial-gradient(120% 80% at 50% 12%, transparent 40%, rgba(22,20,15,.45) 100%);
}
.hero__content{
  position:relative; z-index:5; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(60px,11vh,120px);
}
.hero__eyebrow{ color:var(--yellow); margin-bottom:22px; display:flex; align-items:center; gap:14px; }
.hero__eyebrow::before{ content:""; width:42px; height:1.5px; background:var(--yellow); display:inline-block; }
.hero h1{
  color:var(--paper);
  font-size:clamp(48px, 9.2vw, 138px);
  line-height:.92;
  max-width:14ch;
  text-shadow:0 18px 60px rgba(0,0,0,.45);
}
.hero h1 .strike{ position:relative; color:rgba(251,250,245,.42); font-size:.46em; vertical-align:.16em; letter-spacing:.01em; }
.hero h1 .strike::after{
  content:""; position:absolute; left:-3%; right:-3%; top:52%; height:.12em; border-radius:2px;
  background:var(--yellow); transform:rotate(-4deg);
  box-shadow:0 4px 16px -4px var(--yellow-deep);
}
.hero h1 em{ font-style:italic; color:var(--yellow); }
.hero__sub{
  margin-top:26px; max-width:46ch; color:rgba(251,250,245,.84);
  font-size:clamp(15px,1.5vw,19px); line-height:1.55;
}
.hero__cta{ margin-top:36px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__meta{
  position:absolute; right:var(--gut); bottom:clamp(60px,11vh,120px); z-index:5;
  display:flex; flex-direction:column; gap:18px; align-items:flex-end; text-align:right;
}
@media (max-width:860px){ .hero__meta{ display:none; } }
.hero__meta .chip{
  font-size:12px; font-weight:600; letter-spacing:.04em; color:rgba(251,250,245,.9);
  border:1px solid rgba(255,255,255,.24); border-radius:var(--r-pill); padding:9px 16px;
  backdrop-filter:blur(8px); background:rgba(255,255,255,.06);
}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:5;
  color:rgba(251,250,245,.7); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-cue .line{ width:1px; height:46px; background:linear-gradient(rgba(251,250,245,.7),transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.3); opacity:.3 } 50%{ transform:scaleY(1); opacity:.9 } }

/* hero crossfade slides (slider layout) */
.hero__slides .hero__photo{ opacity:0; transition:opacity 1.6s var(--ease); animation:none; }
.hero__slides .hero__photo.is-active{ opacity:1; animation:kenburns 12s var(--ease) infinite alternate; }

/* hero split layout */
.hero[data-layout="split"] .hero__content{ display:grid; }
/* hero split layout */
.hero[data-layout="split"] .hero__content{ justify-content:center; }
.hero[data-layout="split"] .hero__content .wrap{ max-width:min(640px, 92vw); margin-left:0; margin-right:auto; }
.hero[data-layout="split"] .hero h1{ font-size:clamp(44px,6.4vw,104px); }
.hero[data-layout="split"] .hero__meta{ display:none; }
.hero__panel{ position:absolute; inset:0; right:46%;
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%); z-index:1; }
.hero__halfphoto{ position:absolute; inset:-6% -6% -6% 50%; background-size:cover; background-position:center;
  animation:kenburns 26s var(--ease) infinite alternate; will-change:transform; z-index:0;
  clip-path:polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.hero[data-layout="split"] .hero__scrim{
  background:linear-gradient(90deg, var(--ink) 0%, rgba(22,20,15,.6) 40%, transparent 60%); }
@media (max-width:760px){
  .hero__panel{ right:0; opacity:.55; }
  .hero__halfphoto{ inset:-6%; clip-path:none; }
  .hero[data-layout="split"] .hero__scrim{ background:linear-gradient(180deg, rgba(22,20,15,.55), rgba(22,20,15,.86)); }
}
/* hero mosaic layout */
.hero__mosaic{ position:absolute; inset:0; display:grid; gap:8px;
  grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:1fr 1fr; }
.hero__mosaic .cell{ overflow:hidden; }
.hero__mosaic .cell:first-child{ grid-row:1 / span 2; }
.hero__mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform 8s var(--ease); }
.hero__mosaic .cell:hover img{ transform:scale(1.08); }

/* =============================================================
   INTRO / CONCEPT
   ============================================================= */
.intro{ padding:clamp(90px,13vh,170px) 0 clamp(60px,8vh,110px); background:var(--paper); }
.intro__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,6vw,90px); align-items:end; }
@media (max-width:900px){ .intro__grid{ grid-template-columns:1fr; gap:34px; } }
.intro h2{ font-size:clamp(34px,5.2vw,76px); line-height:1.02; }
.intro h2 em{ font-style:italic; color:var(--yellow-deep); }
.intro__lead{ color:var(--stone-2); font-size:clamp(16px,1.7vw,20px); max-width:42ch; }
.intro__lead p+p{ margin-top:18px; }
.intro__stats{ display:flex; gap:clamp(24px,4vw,56px); margin-top:clamp(46px,7vh,80px); flex-wrap:wrap; }
.stat .n{ font-family:var(--font-display); font-weight:600; font-size:clamp(38px,5vw,62px); line-height:1; }
.stat .n i{ font-style:normal; color:var(--yellow-deep); }
.stat .l{ font-size:12.5px; color:var(--stone-2); letter-spacing:.04em; margin-top:6px; }
.stat+.stat{ border-left:1px solid var(--paper-3); padding-left:clamp(24px,4vw,56px); }

/* witty marquee */
.marquee{ overflow:hidden; padding:clamp(34px,5vh,60px) 0; border-block:1px solid var(--paper-3); margin-top:clamp(50px,7vh,90px); }
.marquee__track{ display:flex; gap:42px; width:max-content; animation:scroll-x 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{ font-family:var(--font-display); font-style:italic; font-size:clamp(22px,3vw,40px); color:var(--ink); white-space:nowrap; display:inline-flex; align-items:center; gap:42px; }
.marquee span::after{ content:"✦"; color:var(--yellow); font-style:normal; font-size:.5em; }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }

/* =============================================================
   SCENES (rooms)
   ============================================================= */
.scenes{ background:var(--ink); color:var(--paper); padding:clamp(70px,9vh,130px) 0 clamp(80px,11vh,150px); }
.scenes__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:clamp(40px,6vh,70px); }
.scenes__head .eyebrow{ color:var(--yellow); }
.scenes__head h2{ color:var(--paper); font-size:clamp(32px,4.6vw,64px); line-height:1; margin-top:14px; }
.scenes__head p{ color:rgba(251,250,245,.6); max-width:34ch; font-size:15px; }
@media (max-width:760px){ .scenes__head{ flex-direction:column; align-items:flex-start; } }

.scene{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  min-height:clamp(440px,72vh,760px);
  display:flex; align-items:flex-end;
  box-shadow:var(--shadow-float);
  isolation:isolate;
  scroll-margin-top:100px;
}
.scene + .scene{ margin-top:clamp(26px,4vh,56px); }
.scene__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.scene__media .swiper, .scene__media .swiper-wrapper, .scene__media .swiper-slide{ height:100%; }
.scene__bg{ position:absolute; inset:-6%; background-size:cover; background-position:center; will-change:transform; }
.scene__media img{ width:100%; height:100%; object-fit:cover; }
.scene .swiper-slide-active img{ animation:kenburns 9s var(--ease) infinite alternate; }
@media (prefers-reduced-motion: reduce){ .scene .swiper-slide-active img{ animation:none; } }
.scene__media image-slot{ position:absolute; inset:0; width:100%; height:100%; --radius:0; }
.scene__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(110deg, rgba(22,20,15,.82) 0%, rgba(22,20,15,.40) 42%, rgba(22,20,15,.05) 72%, transparent 100%),
             linear-gradient(0deg, rgba(22,20,15,.70), transparent 46%); }
.scene__inner{ position:relative; z-index:3; padding:clamp(28px,5vw,64px); max-width:640px; will-change:transform; }
.scene__no{ font-family:var(--font-display); font-style:italic; color:var(--yellow); font-size:clamp(15px,1.6vw,18px); letter-spacing:.04em; }
.scene__inner h3{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:clamp(34px,5.4vw,72px); line-height:.98; margin:6px 0 16px; }
.scene__quote{ display:inline-flex; align-items:center; gap:12px; margin-bottom:16px; }
.scene__quote .q{ font-family:var(--font-display); font-style:italic; color:#fff; font-size:clamp(17px,2vw,24px); }
.scene__quote .star{ color:var(--yellow); font-size:13px; letter-spacing:2px; }
.scene__inner p{ color:rgba(251,250,245,.86); font-size:clamp(14.5px,1.5vw,17px); max-width:46ch; }
.scene__tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.scene__tags span{ font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(251,250,245,.92);
  border:1px solid rgba(255,255,255,.26); border-radius:var(--r-pill); padding:7px 14px; backdrop-filter:blur(6px); background:rgba(255,255,255,.05); }

/* swiper chrome on scene */
.scene .swiper-pagination{ z-index:6; bottom:18px !important; left:auto !important; right:26px; width:auto !important; }
.scene .swiper-pagination-bullet{ background:#fff; opacity:.45; width:8px; height:8px; transition:.3s; }
.scene .swiper-pagination-bullet-active{ opacity:1; background:var(--yellow); width:24px; border-radius:5px; }
.scene__nav{ position:absolute; z-index:6; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; background:rgba(22,20,15,.4); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px); color:#fff; transition:.3s var(--ease); opacity:0; }
.scene:hover .scene__nav{ opacity:1; }
.scene__nav:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.scene__nav--next{ right:22px; } .scene__nav--prev{ right:84px; }
.scene__nav svg{ width:20px; height:20px; }
.scene__nav.swiper-button-disabled{ opacity:0 !important; }

/* drop-hint badge for empty slots */
.scene__hint{ position:absolute; z-index:5; top:22px; left:22px; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  color:var(--ink); background:var(--yellow); border-radius:var(--r-pill); padding:7px 14px; box-shadow:var(--shadow-soft); }

/* =============================================================
   HOUSE OVERVIEW (homepage) + ROOM TEASER GRID
   ============================================================= */
.house{ background:var(--ink); color:var(--paper); padding:clamp(70px,9vh,130px) 0 clamp(80px,11vh,150px); }
.house .scenes__head{ margin-bottom:clamp(34px,5vh,56px); }
.house__feature{ margin-bottom:clamp(22px,3vh,40px); }
.house__feature .scene__inner .abtn{ margin-top:24px; }

.room-grid__kicker{ display:flex; align-items:center; gap:16px; margin:clamp(34px,5vh,56px) 0 clamp(18px,2.4vh,26px);
  font-family:var(--font-eyebrow); text-transform:uppercase; letter-spacing:.24em; font-size:12px; font-weight:700; color:rgba(251,250,245,.55); }
.room-grid__kicker::after{ content:""; flex:1; height:1px; background:rgba(251,250,245,.16); }

.room-grid{ columns:3; column-gap:clamp(12px,1.4vw,20px); }
@media (max-width:1024px){ .room-grid{ columns:2; } }
@media (max-width:560px){ .room-grid{ columns:1; } }
.rcard{ position:relative; display:block; break-inside:avoid; margin-bottom:clamp(12px,1.4vw,20px);
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-float); background:var(--ink-2); isolation:isolate; }
.rcard img{ display:block; width:100%; height:auto; transition:transform .9s var(--ease); }
.rcard:hover img{ transform:scale(1.06); }
.rcard__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(20,18,13,.9) 4%, rgba(20,18,13,.25) 46%, transparent 72%); }
.rcard__label{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(16px,1.5vw,22px); }
.rcard__no{ font-family:var(--font-display); font-style:italic; color:var(--yellow); font-size:13px; letter-spacing:.03em; }
.rcard__name{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:clamp(22px,2vw,27px); line-height:1.02; margin:3px 0 6px; }
.rcard__q{ font-family:var(--font-display); font-style:italic; color:rgba(251,250,245,.78); font-size:14px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rcard__arrow{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; background:rgba(22,20,15,.5); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px); color:#fff; opacity:0; transform:translateY(-6px); transition:.4s var(--ease); }
.rcard:hover .rcard__arrow{ opacity:1; transform:none; background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.rcard__arrow svg{ width:17px; height:17px; }
.rcard__drop{ position:absolute; top:14px; left:14px; z-index:3; font-size:10.5px; font-weight:700; letter-spacing:.03em;
  color:var(--ink); background:var(--yellow); border-radius:var(--r-pill); padding:5px 11px; }

/* =============================================================
   APARTMENT PAGE — sub hero + back link
   ============================================================= */
.apt-hero{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + clamp(50px,9vh,96px)) 0 clamp(50px,8vh,90px); }
.apt-hero::before{ content:""; position:absolute; inset:0; opacity:.14;
  background-image:radial-gradient(circle at 1px 1px, var(--yellow) 1px, transparent 0); background-size:26px 26px; }
.apt-hero .wrap{ position:relative; }
.apt-back{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(251,250,245,.7); margin-bottom:26px; transition:.3s var(--ease); }
.apt-back:hover{ color:var(--yellow); gap:13px; }
.apt-back svg{ width:16px; height:16px; }
.apt-hero .eyebrow{ color:var(--yellow); }
.apt-hero h1{ font-family:var(--font-display); font-weight:var(--display-weight); letter-spacing:var(--display-tracking);
  color:#fff; font-size:clamp(40px,7vw,96px); line-height:.96; margin:14px 0 16px; }
.apt-hero h1 em{ font-style:italic; color:var(--yellow); }
.apt-hero p{ color:rgba(251,250,245,.7); max-width:46ch; font-size:clamp(15px,1.6vw,18px); }
.apt-scenes{ background:var(--ink); color:var(--paper); padding:clamp(20px,3vh,40px) 0 clamp(80px,11vh,150px); }

/* =============================================================
   ORTIGIA
   ============================================================= */
.ortigia{ background:var(--paper); padding:clamp(80px,12vh,160px) 0; overflow:hidden; }
.ortigia__head{ max-width:var(--maxw); margin:0 auto clamp(36px,5vh,60px); padding-inline:var(--gut);
  display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.ortigia__head .eyebrow{ color:var(--yellow-deep); }
.ortigia__head h2{ font-size:clamp(34px,5vw,68px); line-height:1; margin-top:14px; }
.ortigia__head h2 em{ font-style:italic; color:var(--yellow-deep); }
.ortigia__head p{ color:var(--stone-2); max-width:36ch; font-size:15.5px; }
@media (max-width:760px){ .ortigia__head{ flex-direction:column; align-items:flex-start; } }

.places{ padding-left:var(--gut); }
.places .swiper{ overflow:visible; }
.place{
  width:clamp(280px,32vw,400px); background:var(--paper); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-soft); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  border:1px solid var(--paper-3);
}
.place:hover{ transform:translateY(-8px); box-shadow:var(--shadow-float); }
.place__media{ position:relative; aspect-ratio:4/3.2; overflow:hidden; background:var(--paper-2); }
.place__media image-slot{ width:100%; height:100%; --radius:0; }
.place__media .tag{ position:absolute; top:14px; left:14px; z-index:2; font-size:11px; font-weight:700; letter-spacing:.04em;
  background:rgba(22,20,15,.78); color:#fff; padding:6px 12px; border-radius:var(--r-pill); backdrop-filter:blur(6px); }
.place__media .walk{ position:absolute; bottom:14px; right:14px; z-index:2; font-size:11.5px; font-weight:700;
  background:var(--yellow); color:var(--ink); padding:6px 12px; border-radius:var(--r-pill); }
.place__body{ padding:22px 24px 26px; }
.place__body h3{ font-family:var(--font-display); font-weight:600; font-size:26px; line-height:1.05; }
.place__body p{ color:var(--stone-2); font-size:14.5px; margin-top:9px; }
.ortigia__controls{ max-width:var(--maxw); margin:clamp(30px,4vh,46px) auto 0; padding-inline:var(--gut); display:flex; gap:12px; align-items:center; }
.ortigia__controls .dot{ width:46px; height:46px; border-radius:var(--r-pill); border:1.4px solid var(--paper-3); display:flex; align-items:center; justify-content:center; transition:.3s var(--ease); }
.ortigia__controls .dot:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.ortigia__controls .dot svg{ width:20px; height:20px; }
.ortigia__controls .hint{ margin-left:auto; font-size:12.5px; color:var(--stone); letter-spacing:.04em; }

/* =============================================================
   BOOKING STRIP
   ============================================================= */
.cta-strip{ background:var(--ink); color:var(--paper); padding:clamp(70px,11vh,140px) 0; position:relative; overflow:hidden; }
.cta-strip::before{ content:""; position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(circle at 1px 1px, var(--yellow) 1px, transparent 0); background-size:26px 26px; }
.cta-strip .wrap{ position:relative; text-align:center; }
.cta-strip .eyebrow{ color:var(--yellow); }
.cta-strip h2{ font-size:clamp(36px,6vw,90px); line-height:1; color:#fff; margin:16px 0 10px; }
.cta-strip h2 em{ font-style:italic; color:var(--yellow); }
.cta-strip p{ color:rgba(251,250,245,.7); max-width:48ch; margin:0 auto 32px; font-size:clamp(15px,1.6vw,18px); }
.cta-strip .hero__cta{ justify-content:center; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer{ background:#0F0E0A; color:rgba(251,250,245,.7); padding:clamp(60px,9vh,100px) 0 32px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:540px){ .footer__top{ grid-template-columns:1fr; } }
.footer__brand img{ height:54px; margin-bottom:18px; }
.footer__brand p{ font-size:14px; max-width:30ch; line-height:1.6; }
.footer__col h4{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); margin-bottom:18px; font-weight:700; }
.footer__col a, .footer__col span{ display:block; font-size:14.5px; color:rgba(251,250,245,.66); margin-bottom:11px; transition:.3s var(--ease); }
.footer__col a:hover{ color:#fff; }
.socials{ display:flex; gap:12px; margin-top:8px; }
.socials a{ width:44px; height:44px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.16); margin:0; transition:.35s var(--ease); }
.socials a:hover{ background:var(--yellow); border-color:var(--yellow); transform:translateY(-3px); }
.socials a:hover svg{ fill:var(--ink); }
.socials svg{ width:19px; height:19px; fill:rgba(251,250,245,.8); transition:.35s var(--ease); }
.footer__bottom{ margin-top:clamp(40px,6vh,64px); padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.footer__bottom small{ font-size:12.5px; color:rgba(251,250,245,.45); }
.footer__legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer__legal button{ font-size:12.5px; color:rgba(251,250,245,.6); transition:.3s var(--ease); letter-spacing:.02em; }
.footer__legal button:hover{ color:var(--yellow); }

/* =============================================================
   COOKIE BANNER
   ============================================================= */
.cookie{
  position:fixed; z-index:90; left:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px);
  max-width:560px; background:rgba(20,18,13,.94); backdrop-filter:blur(18px); color:var(--paper);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); padding:22px 24px;
  box-shadow:var(--shadow-float); transform:translateY(140%); transition:transform .7s var(--ease-out);
}
.cookie.is-in{ transform:translateY(0); }
.cookie h5{ font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:6px; }
.cookie p{ font-size:13.5px; color:rgba(251,250,245,.74); line-height:1.55; }
.cookie p a{ color:var(--yellow); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.cookie__row{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.cookie .abtn{ padding:11px 20px; font-size:13px; }
.cookie .abtn--text{ color:rgba(251,250,245,.7); padding:11px 14px; }
.cookie .abtn--text:hover{ color:#fff; }

/* =============================================================
   SweetAlert custom theme
   ============================================================= */
.swal2-popup.aurelio-modal{
  border-radius:var(--r-lg) !important; padding:40px clamp(24px,4vw,48px) 36px !important;
  font-family:var(--font-body) !important; background:var(--paper) !important; color:var(--ink) !important;
  box-shadow:var(--shadow-float) !important; max-width:680px !important;
}
.aurelio-modal .swal2-title{ font-family:var(--font-display) !important; font-weight:600 !important;
  font-size:clamp(28px,4vw,42px) !important; color:var(--ink) !important; text-align:left !important; padding:0 !important; line-height:1.05; }
.aurelio-modal .swal2-html-container{ text-align:left !important; margin:18px 0 0 !important; color:var(--stone-2) !important;
  font-size:14.5px !important; line-height:1.62 !important; max-height:56vh; overflow:auto; }
.aurelio-modal .legal h4{ font-family:var(--font-display); color:var(--ink); font-size:19px; margin:22px 0 6px; font-weight:600; }
.aurelio-modal .legal p{ margin-bottom:8px; }
.aurelio-modal .legal .eyebrow{ color:var(--yellow-deep); display:block; margin-bottom:14px; }
.aurelio-modal .swal2-actions{ margin-top:26px !important; justify-content:flex-start !important; gap:12px; }
.aurelio-modal .swal2-confirm{ background:var(--yellow) !important; color:var(--ink) !important; border-radius:var(--r-pill) !important;
  padding:13px 28px !important; font-weight:700 !important; box-shadow:none !important; }
.aurelio-modal .swal2-cancel{ background:transparent !important; color:var(--stone-2) !important; border-radius:var(--r-pill) !important;
  padding:13px 24px !important; font-weight:700 !important; }
.swal2-container.aurelio-bg{ backdrop-filter:blur(6px); background:rgba(22,20,15,.55) !important; }

/* =============================================================
   REVEAL ANIMATIONS
   ============================================================= */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal-clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease-out); }
.reveal-clip.in-view{ clip-path:inset(0 0 0 0); }

/* =============================================================
   MOBILE MENU — handled by the Bootstrap Offcanvas (.offcanvas.mobile-menu,
   bridge section below). The old fullscreen-overlay rules were REMOVED: they
   set opacity:0/visibility:hidden toggled by .is-open, but Bootstrap uses
   .show — so the offcanvas stayed invisible (transparent panel).
   ============================================================= */

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:980px){
  .nav__links{ display:none; }
  .nav__right .abtn--ghost{ display:none; }
  .nav__burger{ display:flex; }
}
@media (max-width:640px){
  :root{ --nav-h:66px; }
  .nav__brand b{ font-size:16px; }
  .nav__brand img{ height:36px; }
  .hero h1{ font-size:clamp(42px,13vw,72px); }
  .scene{ min-height:520px; }
  .scene__inner{ max-width:100%; }
  .lang button{ padding:6px 10px; font-size:11px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* =============================================================
   BOOTSTRAP BRIDGE — Aurelio's Artpartment
   Themes Bootstrap 5 components (offcanvas / modal / carousel)
   to the cinematic black & yellow look, and adds the bits that
   replace Swiper (Ortigia scroll-track) and the landmark slots.
   Loaded AFTER bootstrap.min.css so these rules win.
   ============================================================= */

/* keep bespoke header above Bootstrap's navbar reboot, no extra padding */
.site-nav{ padding:0; }
.site-nav .nav__inner{ min-height:var(--nav-h); }

/* ---- Bootstrap Offcanvas → fullscreen dark mobile menu ---- */
.offcanvas.mobile-menu{ width:100% !important; background:rgba(16,14,9,.72);
  color:#fff; border:0; z-index:1090;
  -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3); }
.offcanvas.mobile-menu .offcanvas-body{ display:flex; flex-direction:column;
  justify-content:center; gap:4px; padding:0 var(--gut); }
.offcanvas.mobile-menu a{ font-family:var(--font-display); font-size:clamp(32px,9vw,56px);
  color:#fff; padding:10px 0; text-transform:uppercase; letter-spacing:.04em; transition:.3s var(--ease); }
.offcanvas.mobile-menu a:hover{ color:var(--yellow); padding-left:12px; }
.offcanvas.mobile-menu .lang{ margin-top:34px; align-self:flex-start;
  border-color:rgba(255,255,255,.28); }
.offcanvas.mobile-menu .btn-close{ position:absolute; top:22px; right:var(--gut);
  width:1.2em; height:1.2em; filter:invert(1) grayscale(1); opacity:.85; z-index:2; }

/* ---- Bootstrap Carousel inside the feature scene ---- */
.scene__media .carousel,
.scene__media .carousel-inner,
.scene__media .carousel-item{ height:100%; }
.scene__media .carousel-item img{ width:100%; height:100%; object-fit:cover; }
.scene .carousel-item.active img{ animation:kenburns 9s var(--ease) infinite alternate; }
@media (prefers-reduced-motion:reduce){ .scene .carousel-item.active img{ animation:none; } }
.scene .carousel-indicators{ left:auto; right:26px; bottom:16px; margin:0; z-index:6; justify-content:flex-end; }
.scene .carousel-indicators [data-bs-target]{ width:8px; height:8px; border-radius:50%;
  background:#fff; opacity:.45; border:0; transition:.3s var(--ease); }
.scene .carousel-indicators .active{ opacity:1; background:var(--yellow); width:24px; border-radius:5px; }

/* ---- Bootstrap Modal → the elegant "aurelio" modal (legal + booking) ---- */
.modal-content.aurelio-modal{ background:var(--paper); color:var(--ink); border:0;
  border-radius:var(--r-lg); box-shadow:var(--shadow-float); overflow:hidden; }
.aurelio-modal .modal-header{ border:0; padding:34px clamp(24px,4vw,48px) 0; align-items:flex-start; }
.aurelio-modal .modal-title{ font-family:var(--font-display); font-weight:600;
  font-size:clamp(26px,4vw,40px); line-height:1.05; color:var(--ink); }
.aurelio-modal .modal-body{ padding:18px clamp(24px,4vw,48px) 4px; color:var(--stone-2);
  font-size:14.5px; line-height:1.62; max-height:60vh; overflow:auto; }
.aurelio-modal .modal-footer{ border:0; justify-content:flex-start; gap:12px;
  padding:22px clamp(24px,4vw,48px) 34px; }
.aurelio-modal .btn-close{ margin:0; padding:18px; }
.modal-backdrop.show{ opacity:.55; backdrop-filter:blur(6px); }

/* ---- Ortigia: scroll-snap track replaces the Swiper carousel ---- */
.places{ padding:0; }
.places__track{ display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px var(--gut) 22px;
  -ms-overflow-style:none; scrollbar-width:none; }
.places__track::-webkit-scrollbar{ display:none; }
.places__track .place{ scroll-snap-align:start; flex:0 0 auto; }

/* ---- Landmark placeholders (no landmark photos shipped in the handoff) ---- */
.place__ph{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:20px;
  background:radial-gradient(120% 120% at 50% 0%, var(--ink-3) 0%, var(--ink) 72%);
  color:rgba(251,250,245,.5); }
.place__ph::after{ content:""; position:absolute; inset:0; opacity:.10;
  background-image:radial-gradient(circle at 1px 1px, var(--yellow) 1px, transparent 0);
  background-size:22px 22px; }
.place__ph svg{ width:38px; height:38px; color:var(--yellow); opacity:.9; position:relative; z-index:1; }
.place__ph .lbl{ position:relative; z-index:1; font-family:var(--font-eyebrow);
  text-transform:uppercase; letter-spacing:.26em; font-size:10.5px; color:rgba(251,250,245,.46); }

/* small helper so Bootstrap's reboot links inside legal copy stay on-theme */
.aurelio-modal a{ color:var(--yellow-deep); text-decoration:underline; text-underline-offset:3px; }

/* ---- Hero slider (Swiper) — gradient overlay, smooth ken-burns, pagination ---- */
.hero__swiper{ position:absolute; inset:0; width:100%; height:100%; }
.hero__swiper .swiper-wrapper,
.hero__swiper .swiper-slide{ height:100%; }
/* Static hero slides — no ken-burns / parallax movement (owner request).
   Only the fade crossfade between photos remains. */
.hero__swiper .hero__photo{ position:absolute; inset:0; animation:none; }

/* Stronger faded overlay (sfumato) — keeps white/ yellow text legible even
   over the bright white-wall slides */
.hero__scrim{
  position:absolute; inset:0; z-index:2;   /* Swiper puts .hero__swiper at z-index:1 — sit above the slides */
  background:
    linear-gradient(180deg, rgba(22,20,15,.58) 0%, rgba(22,20,15,.22) 32%, rgba(22,20,15,.52) 64%, rgba(22,20,15,.94) 100%),
    linear-gradient(90deg, rgba(22,20,15,.80) 0%, rgba(22,20,15,.44) 40%, rgba(22,20,15,.08) 70%, transparent 86%),
    linear-gradient(0deg, rgba(22,20,15,.22), rgba(22,20,15,.22));
}

/* Hero pagination bullets */
.hero .swiper-pagination{ position:absolute; left:0; right:0; bottom:clamp(98px,12vh,120px);
  width:auto; display:flex; gap:10px; justify-content:center; z-index:6; }
.hero .swiper-pagination-bullet{ width:9px; height:9px; margin:0 !important; opacity:1;
  background:rgba(251,250,245,.5); border:1px solid rgba(255,255,255,.45);
  border-radius:var(--r-pill); transition:.35s var(--ease); }
.hero .swiper-pagination-bullet:hover{ background:rgba(251,250,245,.85); }
.hero .swiper-pagination-bullet-active{ background:var(--yellow); border-color:var(--yellow); width:28px; }

/* ---- Floating WhatsApp button (contatto diretto) ---- */
.wa-float{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:75;
  width:58px; height:58px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); animation:wapulse 2.8s var(--ease) infinite; }
.wa-float:hover{ transform:translateY(-3px) scale(1.05); color:#fff; }
.wa-float svg{ width:30px; height:30px; fill:#fff; }
@keyframes wapulse{
  0%{ box-shadow:0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 14px 30px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion:reduce){ .wa-float{ animation:none; } }

/* =============================================================
   v5 — bullets, animated burger, offcanvas effects, responsive
   ============================================================= */

/* Hero pagination bullets — evident, full yellow theme */
.hero .swiper-pagination-bullet{ width:11px; height:11px; background:rgba(253,248,85,.45);
  border:1px solid rgba(253,248,85,.85); box-shadow:0 2px 8px rgba(0,0,0,.45); opacity:1; }
.hero .swiper-pagination-bullet:hover{ background:rgba(253,248,85,.8); }
.hero .swiper-pagination-bullet-active{ background:var(--yellow); border-color:var(--yellow); width:32px;
  box-shadow:0 0 0 3px rgba(253,248,85,.28), 0 2px 10px -1px var(--yellow-deep); }

/* Animated hamburger → morphs to X when open */
.nav__burger span{ transition:background .2s var(--ease); }
.nav__burger span::before,.nav__burger span::after{ transition:transform .32s var(--ease), top .32s var(--ease); }
.nav__burger.is-open span{ background:transparent !important; }
.nav__burger.is-open span::before{ top:0; transform:rotate(45deg); }
.nav__burger.is-open span::after{ top:0; transform:rotate(-45deg); }
.nav__burger.is-open{ background:var(--yellow) !important; border-color:var(--yellow) !important;
  box-shadow:0 8px 24px -8px rgba(253,248,85,.6); }
.nav__burger.is-open span::before,.nav__burger.is-open span::after{ background:var(--ink); height:2.5px; }

/* Offcanvas — modern staggered entrance */
.offcanvas.mobile-menu .offcanvas-body > *{ opacity:0; transform:translateY(20px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.offcanvas.mobile-menu.show .offcanvas-body > *{ opacity:1; transform:none; }
.offcanvas.mobile-menu.show .offcanvas-body > *:nth-child(1){ transition-delay:.10s; }
.offcanvas.mobile-menu.show .offcanvas-body > *:nth-child(2){ transition-delay:.16s; }
.offcanvas.mobile-menu.show .offcanvas-body > *:nth-child(3){ transition-delay:.22s; }
.offcanvas.mobile-menu.show .offcanvas-body > *:nth-child(4){ transition-delay:.28s; }
.offcanvas.mobile-menu.show .offcanvas-body > *:nth-child(5){ transition-delay:.34s; }

/* Language switcher — 4 languages */
.lang button{ padding:7px 11px; }
@media (max-width:520px){ .lang button{ padding:6px 9px; font-size:11px; } }
/* On phone/tablet the language lives in the offcanvas — keep the top bar clean */
@media (max-width:980px){ .site-nav .nav__right .lang{ display:none; } }

/* ---- Responsive: tablet & phone (portrait + landscape) ---- */
@media (max-width:1024px){
  .nav__links{ gap:22px; }
  .nav__links a{ font-size:14px; letter-spacing:.10em; }
}
@media (max-width:600px){
  .hero h1{ font-size:clamp(40px,12.5vw,62px); }
  .abtn{ padding:12px 20px; font-size:13px; }
  .hero__cta{ gap:10px; }
  .footer__author{ display:inline-block; }
}
/* landscape phones — short viewport */
@media (max-height:600px) and (orientation:landscape){
  .hero{ min-height:480px; }
  .scroll-cue{ display:none; }
  .hero .swiper-pagination{ bottom:18px; }
}

/* footer author credit (Application Web) */
.footer__author{ color:rgba(251,250,245,.62); border-bottom:1px solid rgba(253,248,85,.5); transition:.3s var(--ease); }
.footer__author:hover{ color:var(--yellow); }

/* =============================================================
   v6 fixes — hero height, visible bullets, working modern burger
   ============================================================= */

/* Taller hero slider */
.hero{ min-height:760px; }

/* Hero pagination — dark pill backdrop so the yellow bullets pop on any slide */
.hero .swiper-pagination{ left:50%; right:auto; transform:translateX(-50%); width:max-content;
  bottom:clamp(74px,10vh,100px); background:rgba(12,12,13,.40); padding:9px 15px;
  border-radius:var(--r-pill); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.hero .swiper-pagination-bullet{ width:11px; height:11px; margin:0 !important; opacity:1;
  background:rgba(253,248,85,.5); border:1px solid rgba(253,248,85,.9); box-shadow:none; }
.hero .swiper-pagination-bullet:hover{ background:rgba(253,248,85,.85); }
.hero .swiper-pagination-bullet-active{ background:var(--yellow); border-color:var(--yellow); width:30px;
  box-shadow:0 0 10px -1px var(--yellow); }

/* Modern burger: when the menu is open the top bar floats ABOVE the offcanvas
   so the 3 lines visibly morph into an X (which also closes the menu). */
.site-nav.menu-open{ z-index:1095; background:transparent !important; box-shadow:none !important; }
.site-nav.menu-open .nav__brand b{ color:#fff; }
.site-nav.menu-open .nav__burger{ border-color:var(--yellow); }
.offcanvas.mobile-menu .btn-close{ display:none; }  /* the morphing burger is the close control */
.nav__burger{ position:relative; z-index:2; transition:border-color .3s var(--ease); }

/* =============================================================
   v9 — mobile logo (logo only, enlarged) + transparent logo
   ============================================================= */
.nav__brand img{ transition:height .3s var(--ease); }
@media (max-width:768px){
  :root{ --nav-h:104px; }
  .nav__brand b{ display:none; }            /* show only the logo on mobile */
  .nav__brand img{ height:92px; }           /* ~3x bigger */
  .site-nav .nav__inner{ padding-inline:18px; }
}
@media (max-width:380px){
  .nav__brand img{ height:78px; }
  :root{ --nav-h:92px; }
}

/* Hide the playful English room-card quotes on the home grid (professional tone) */
.rcard__q{ display:none; }

/* =============================================================
   v14 — Ortigia place photos + unified yellow titles
   ============================================================= */
.place__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease); }
.place:hover .place__media img{ transform:scale(1.05); }

/* Unified YELLOW titles (logo yellow). Bright on dark sections, deep gold on
   light sections for legibility. !important to win over apartment.css order. */
.house h2, .house h2 em,
.cta-strip h2, .cta-strip h2 em,
.gallery h2,
.mapsec__head h2,
.apt-hero h1, .apt-hero h1 em,
.scene__inner h3,
.rcard__name{ color:var(--yellow) !important; }

.intro h2, .intro h2 em,
.ortigia__head h2, .ortigia__head h2 em,
.overview h2, .overview h2 em,
.booking__head h2, .booking__head h2 em,
.reviews__intro h2,
.amenities__title,
.acard__title,
.place__body h3{ color:#000000 !important; }   /* titles on light sections → black (readable) */

/* =============================================================
   v19 — Local services (map section) + tax note
   ============================================================= */
.services{ max-width:var(--maxw); margin:clamp(28px,4vh,46px) auto 0; padding-inline:var(--gut); }
.services__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.4vw,28px); color:var(--yellow); margin-bottom:18px; }
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.svc{ display:flex; flex-direction:column; gap:5px; padding:14px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.svc:hover{ background:rgba(253,248,85,.12); border-color:var(--yellow); transform:translateY(-2px); }
.svc__cat{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--yellow); font-weight:700; }
.svc__name{ font-family:var(--font-display); font-size:18px; color:#fff; line-height:1.15; }
.svc__walk{ font-size:12.5px; color:rgba(255,255,255,.6); }
.svc-pin span{ display:block; width:16px; height:16px; border-radius:50%; background:var(--yellow);
  border:2px solid #16140F; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.booking-tax{ margin-top:10px; font-size:13.5px; color:var(--stone-2); }
.booking-tax:empty{ display:none; }

/* v20 — Google Maps button under the map address */
.mapsec__gmaps{ margin-top:16px; }