:root {
  --forest: #203b30;
  --forest-dark: #142a22;
  --cream: #f4f0e7;
  --paper: #fbf9f4;
  --terracotta: #c66b4e;
  --ink: #24312b;
}

html { scroll-behavior: smooth; }
body { font-family: "DM Sans", sans-serif; color: var(--ink); background: var(--paper); }
h1, h2, .brand-name, .stat { font-family: "Playfair Display", serif; }
.section-space { padding: 8rem 0; }
.eyebrow { font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.text-primary-custom { color: var(--terracotta); }

.navbar { padding: 1.25rem 0; transition: background .3s, padding .3s; }
.navbar.scrolled { padding: .75rem 0; background: rgba(20, 42, 34, .96); backdrop-filter: blur(10px); }
.navbar-brand { display: flex; align-items: center; gap: .8rem; color: #fff; }
.brand-logo { width: 52px; height: 52px; padding: 2px; border: 2px solid rgba(255,255,255,.75); border-radius: 50%; background: #fff; object-fit: cover; object-position: center; }
.brand-logo-footer { width: 66px; height: 66px; border-color: rgba(255,255,255,.45); }
.brand-name { font-size: 1.3rem; letter-spacing: .03em; }
.navbar-nav { padding: .35rem .45rem; border: 1px solid rgba(255,255,255,.16); background: rgba(20,42,34,.42); backdrop-filter: blur(8px); }
.navbar .nav-link { position: relative; padding: .55rem .8rem !important; color: #fff; font-size: .94rem; font-weight: 600; letter-spacing: .025em; text-shadow: 0 1px 8px rgba(0,0,0,.45); transition: color .2s ease, background .2s ease; }
.navbar .nav-link::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem; height: 1px; background: #d6aa79; transform: scaleX(0); transition: transform .2s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: #f0c795; background: rgba(255,255,255,.06); }
.navbar .nav-link:hover::after, .navbar .nav-link:focus::after { transform: scaleX(1); }

.hero { min-height: 100svh; position: relative; background: url("../images/HotelVulci-hero.jpg") center/cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,34,27,.82) 0%, rgba(15,34,27,.3) 65%, rgba(15,34,27,.12)), linear-gradient(0deg, rgba(15,34,27,.58), transparent 55%); }
.hero h1 { font-weight: 500; line-height: .98; letter-spacing: -.03em; }
.hero .lead { color: rgba(255,255,255,.82); font-weight: 400; }
.btn { border-radius: 0; font-size: .84rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: .85rem 1.4rem; }
.btn-accent { background: var(--terracotta); color: white; border-color: var(--terracotta); }
.btn-accent:hover { background: #a9543c; color: white; border-color: #a9543c; }
.hero-note { position: absolute; right: 2rem; bottom: 2rem; flex-direction: column; font-size: .68rem; letter-spacing: .18em; opacity: .72; }

.about-section { background: var(--cream); }
.image-frame { padding: 0 2.5rem 2.5rem 0; }
.image-frame::after { content: ""; position: absolute; right: 0; bottom: 0; width: 72%; height: 72%; border: 1px solid #b8ab95; z-index: 0; }
.image-frame img { position: relative; aspect-ratio: 4/5; object-fit: cover; z-index: 1; }
.floating-card { position: absolute; right: 0; bottom: 4.5rem; z-index: 2; width: 155px; padding: 1.5rem; color: #fff; background: var(--forest); }
.floating-card .number { display: block; color: #d6aa79; font: 1.8rem "Playfair Display", serif; margin-bottom: 1.2rem; }
.about-section h2, .gallery-section h2 { color: var(--forest); line-height: 1.08; }
.stat { display: block; color: var(--forest); font-size: 2.4rem; }
.amenities-list { color: var(--forest); font-size: .88rem; }
.amenities-list i { display: inline-block; width: 1.45rem; color: var(--terracotta); }

.features-section { background: var(--paper); }
.features-section h2 { color: var(--forest); line-height: 1.08; }
.feature-card { position: relative; padding: 2.5rem; border: 1px solid #ded7ca; background: var(--cream); transition: transform .3s ease, border-color .3s ease; }
.feature-card:hover { transform: translateY(-6px); border-color: #b8ab95; }
.feature-number { position: absolute; top: 1.5rem; right: 1.5rem; color: #aaa090; font-size: .72rem; letter-spacing: .12em; }
.feature-icon { display: block; color: var(--terracotta); font-size: 1.7rem; margin-bottom: 2.5rem; }
.feature-card h3 { color: var(--forest); font: 1.75rem "Playfair Display", serif; margin-bottom: 1.25rem; }
.feature-card p { color: #68716c; line-height: 1.75; margin: 0; }

.reviews-section { padding: 0 0 8rem; background: var(--paper); }
.reviews-section-bottom { padding-top: 8rem; }
.reviews-panel { position: relative; padding: 5rem 2rem; border: 1px solid #d8cebe; background: var(--cream); overflow: hidden; }
.reviews-panel::before, .reviews-panel::after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(47,71,59,.12); border-radius: 50%; }
.reviews-panel::before { left: -85px; top: -85px; }
.reviews-panel::after { right: -85px; bottom: -85px; }
.reviews-panel h2 { color: var(--forest); line-height: 1.08; }
.reviews-icon { display: block; margin-bottom: 1.5rem; color: var(--terracotta); font-size: 2rem; }
.reviews-copy { max-width: 620px; color: #68716c; line-height: 1.75; }

.gallery-section { background: var(--cream); }
.gallery-item { position: relative; overflow: hidden; background: #ddd5c8; }
.gallery-item img { width: 100%; height: 300px; object-fit: cover; transition: transform .7s ease; }
.gallery-item:hover img { transform: scale(1.025); }
.gallery-item.gallery-tall img { height: 616px; }
.gallery-item.gallery-wide img { height: 380px; }
.gallery-item::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(14,29,23,.65)); }
.gallery-item figcaption { position: absolute; z-index: 1; left: 1.5rem; right: 1.5rem; bottom: 1.3rem; color: #fff; font-size: 1.05rem; display: flex; justify-content: space-between; }
.gallery-item figcaption span { font-size: .75rem; opacity: .65; }

.quote-section { position: relative; padding: 9rem 0; background: var(--forest); overflow: hidden; }
.quote-section::before { content: ""; position: absolute; width: 500px; height: 500px; left: -200px; top: -250px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.02); }
.quote-section h2 { max-width: 850px; font-weight: 500; }
.quote-copy { max-width: 680px; color: rgba(255,255,255,.72); font-size: 1.05rem; line-height: 1.8; }
.quote-icon { display: block; color: #d6aa79; font-size: 1.8rem; margin-bottom: 2rem; }

.location-section { background: var(--cream); }
.location-section h2 { color: var(--forest); line-height: 1.08; }
.map-wrapper { min-height: 480px; padding: 1rem; border: 1px solid #b8ab95; background: var(--paper); }
.map-wrapper iframe { display: block; width: 100%; height: 440px; border: 0; filter: saturate(.75) contrast(.95); }
.map-caption { padding-top: .85rem; color: #707a74; font-size: .75rem; }
.map-caption a { color: var(--forest); text-underline-offset: .18em; }

.footer { background: var(--forest-dark); }
.footer-intro { color: rgba(255,255,255,.65); font: 1.8rem/1.4 "Playfair Display", serif; }
.company-name { color: rgba(255,255,255,.78); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.company-vat { color: rgba(255,255,255,.45); font-size: .78rem; }
.footer-title { color: #d6aa79; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em; }
.footer-links { color: rgba(255,255,255,.62); line-height: 2; font-style: normal; }
.footer a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; }
.footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); }
.footer-bottom a { margin-left: 1.5rem; font-size: .8rem; }

.policy-navbar { position: relative; background: var(--forest-dark); }
.policy-hero { padding: 7rem 0 6rem; background: var(--forest); }
.policy-hero h1 { font-weight: 500; }
.policy-hero .lead { color: rgba(255,255,255,.7); }
.policy-content { background: var(--paper); }
.policy-index { position: sticky; top: 2rem; padding-left: 1.5rem; border-left: 1px solid #c9bfaf; }
.policy-index .nav-link { padding: .45rem 0; color: #66716b; }
.policy-index .nav-link:hover { color: var(--terracotta); }
.policy-article { max-width: 850px; }
.policy-article section { margin-bottom: 4rem; scroll-margin-top: 2rem; }
.policy-article h2 { color: var(--forest); font: 2rem "Playfair Display", serif; margin-bottom: 1.25rem; }
.policy-article p { color: #5f6964; line-height: 1.8; }
.policy-article a { color: #9d4f39; text-underline-offset: .2em; }
.policy-updated { padding-bottom: 1.25rem; border-bottom: 1px solid #ded7ca; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.policy-table { --bs-table-bg: transparent; border-color: #d7cfc2; color: #5f6964; }
.policy-table th { color: var(--forest); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.cookie-notice { position: fixed; z-index: 1080; left: 0; right: 0; bottom: 0; padding: 1rem 0; color: #fff; background: rgba(20,42,34,.98); border-top: 1px solid rgba(255,255,255,.18); box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
.cookie-notice[hidden] { display: none; }
.cookie-notice-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.cookie-notice p { color: rgba(255,255,255,.82); font-size: .88rem; line-height: 1.6; }
.cookie-notice a { color: #f0c795; text-underline-offset: .2em; }
.cookie-notice-button { flex: 0 0 auto; padding: .65rem 1.15rem; color: var(--forest-dark); background: #fff; border-color: #fff; }
.cookie-notice-button:hover, .cookie-notice-button:focus { color: #fff; background: var(--terracotta); border-color: var(--terracotta); }

@media (max-width: 991.98px) {
  .navbar-collapse { margin-top: .8rem; padding: 1rem; background: var(--forest-dark); }
  .navbar-nav { padding: 0; border: 0; background: transparent; backdrop-filter: none; }
  .navbar .nav-link { padding: .75rem .5rem !important; }
  .navbar .nav-link::after { left: .5rem; right: auto; width: 2rem; bottom: .55rem; transform-origin: left; }
  .hero h1 { font-size: clamp(3.5rem, 12vw, 5.5rem); }
  .section-space { padding: 6rem 0; }
}
@media (max-width: 767.98px) {
  .hero { min-height: 760px; }
  .hero h1 { font-size: 3.4rem; }
  .section-space { padding: 4.5rem 0; }
  .image-frame { padding-right: 1.25rem; }
  .floating-card { right: 0; bottom: 2.5rem; }
  .gallery-item.gallery-tall img, .gallery-item.gallery-wide img, .gallery-item img { height: 390px; }
  .quote-section { padding: 6rem 0; }
  .reviews-section { padding-bottom: 4.5rem; }
  .reviews-section-bottom { padding-top: 4.5rem; }
  .reviews-panel { padding: 3.5rem 1.25rem; }
  .map-wrapper { min-height: 380px; }
  .map-wrapper iframe { min-height: 330px; height: 330px; }
  .cookie-notice-inner { align-items: stretch; flex-direction: column; gap: .8rem; }
  .cookie-notice-button { align-self: flex-start; }
}