/* =====================================================================
   Villa Dequinz — Infinity Hideaway
   Design system & styles
   Palette derived from the brand logo: slate #48606C + azure #6C9CC0
   ===================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600&display=swap');

/* ---------- Design tokens ---------- */
:root{
  /* brand colours */
  --ink:        #26343b;
  --slate:      #48606c;
  --slate-700:  #3a4e58;
  --slate-800:  #2d3d45;
  --azure:      #6c9cc0;
  --azure-600:  #517fa6;
  --azure-700:  #416a8f;
  --azure-100:  #e7f0f6;
  --azure-050:  #f2f7fb;

  /* neutrals */
  --paper:      #ffffff;
  --sand:       #f7f4ef;
  --mist:       #eef1f3;
  --line:       rgba(38,52,59,.12);
  --line-soft:  rgba(38,52,59,.08);

  /* text */
  --text:       #2c3a42;
  --text-soft:  #5d6b72;
  --text-mut:   #8a959b;
  --on-dark:    rgba(255,255,255,.92);
  --on-dark-soft: rgba(255,255,255,.72);

  /* type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* metrics */
  --container: 1240px;
  --container-narrow: 940px;
  --radius: 6px;
  --radius-lg: 14px;
  --shadow-sm: 0 6px 22px rgba(38,52,59,.08);
  --shadow-md: 0 18px 50px rgba(38,52,59,.14);
  --shadow-lg: 0 30px 80px rgba(38,52,59,.20);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 82px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--text);
  background:var(--paper);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:var(--booking-bar-h, 0px);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:500; line-height:1.12; letter-spacing:.005em; }

/* ---------- Typography ---------- */
.display{ font-family:var(--serif); font-weight:500; }
h1,h2,h3{ font-family:var(--serif); color:var(--ink); }
h1{ font-size:clamp(2.6rem,6vw,4.6rem); font-weight:500; }
h2{ font-size:clamp(2rem,4.4vw,3.2rem); }
h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--azure-600);
  margin-bottom:1.1rem;
}
.eyebrow.on-dark{ color:var(--azure); }
.lead{
  font-size:1.18rem;
  color:var(--text-soft);
  font-weight:300;
  line-height:1.75;
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:28px; }
.container.narrow{ max-width:var(--container-narrow); }
.section{ padding:clamp(64px,9vw,128px) 0; }
.section.tight{ padding:clamp(48px,6vw,80px) 0; }
.section.sand{ background:var(--sand); }
.section.mist{ background:var(--mist); }
.section.dark{ background:var(--slate-800); color:var(--on-dark); }
.section.dark h1,.section.dark h2,.section.dark h3{ color:#fff; }

.section-head{ max-width:720px; margin-bottom:clamp(38px,5vw,66px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ color:var(--text-soft); margin-top:1rem; font-weight:300; font-size:1.1rem; }

/* ---------- Buttons (pill = logo motif) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:1.05em 2.1em; border-radius:100px; border:1.5px solid transparent;
  transition:all .35s var(--ease); cursor:pointer; white-space:nowrap;
}
.arw{ width:1.15em; height:1.15em; flex:none; }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn-primary{ background:var(--azure-600); color:#fff; box-shadow:0 10px 30px rgba(81,127,166,.32); }
.btn-primary:hover{ background:var(--azure-700); transform:translateY(-2px); box-shadow:0 16px 40px rgba(65,106,143,.4); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--azure-600); color:var(--azure-700); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline-light:hover{ background:#fff; color:var(--slate-800); border-color:#fff; }
.btn-light{ background:#fff; color:var(--slate-800); }
.btn-light:hover{ background:var(--azure-100); transform:translateY(-2px); }
.btn-sm{ padding:.75em 1.5em; font-size:.74rem; }

.text-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--azure-700); border-bottom:1px solid transparent; padding-bottom:2px;
  transition:.3s var(--ease);
}
.text-link .arw{ width:1.35em; height:1.35em; transition:transform .3s var(--ease); }
.text-link:hover{ color:var(--azure-600); }
.text-link:hover .arw{ transform:translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:200; height:var(--header-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; z-index:2; position:relative; }
.brand img{ height:40px; width:auto; display:block; transition:opacity .35s var(--ease); }
.brand .logo-color{ position:absolute; top:50%; left:0; transform:translateY(-50%); opacity:0; }

.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  position:relative; font-size:.78rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; padding:.6em .95em; color:var(--on-dark); white-space:nowrap;
  transition:color .3s var(--ease);
}
/* legibility of transparent header over bright hero frames */
.site-header:not(.solid) .brand img{ filter:drop-shadow(0 2px 14px rgba(20,30,36,.5)); }
.site-header:not(.solid) .nav a{ text-shadow:0 1px 14px rgba(20,30,36,.55); }
.nav a::after{
  content:''; position:absolute; left:.95em; right:.95em; bottom:.35em; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a.active::after{ transform:scaleX(1); }
.header-cta{ display:flex; align-items:center; gap:14px; }

/* scrolled / solid header (also default on interior pages) */
.site-header.solid{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line-soft),0 10px 30px rgba(38,52,59,.06); height:70px; }
.site-header.solid .brand .logo-white{ opacity:0; }
.site-header.solid .brand .logo-color{ opacity:1; }
.site-header.solid .nav a{ color:var(--text); }
.site-header.solid .nav a.active{ color:var(--azure-700); }

/* mobile toggle */
.nav-toggle{ display:none; background:none; border:0; width:44px; height:44px; position:relative; z-index:210; }
.nav-toggle span{ position:absolute; left:9px; right:9px; height:2px; background:var(--on-dark); transition:.35s var(--ease); }
.site-header.solid .nav-toggle span,.nav-open .nav-toggle span{ background:var(--ink); }
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
.nav-open .nav-toggle span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; }

/* hero background slideshow (video + Ken Burns images) */
.hero-slider .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.8s var(--ease); }
.hero-slider .hero-slide.active{ opacity:1; }
.hero-slide img,.hero-slide video{ width:100%; height:100%; object-fit:cover; }
.hero-slide.kenburns img{ transform:scale(1.04); transform-origin:center; will-change:transform; }
.hero-slide.kenburns.active img{ animation:kenburns 9s ease-out forwards; }
.hero-slide.kb-tl.active img{ transform-origin:22% 20%; }
.hero-slide.kb-br.active img{ transform-origin:78% 80%; }
.hero-slide.kb-tr.active img{ transform-origin:80% 22%; }
.hero-slide.kb-bl.active img{ transform-origin:20% 82%; }
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.16); } }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(24,34,41,.66) 0%,rgba(28,40,48,.30) 45%,rgba(24,34,41,.74) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-top:var(--header-h); }
.hero-inner .eyebrow{ color:#fff; opacity:.9; }
.hero h1{ color:#fff; max-width:14ch; text-shadow:0 2px 30px rgba(20,30,36,.35); }
.hero .lead{ color:var(--on-dark); max-width:52ch; margin-top:1.4rem; font-size:1.25rem; }
.hero-actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:16px; }
.scroll-cue{
  position:absolute; left:50%; bottom:calc(var(--booking-bar-h, 0px) + 22px); transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:rgba(255,255,255,.8); font-size:.64rem; letter-spacing:.28em; text-transform:uppercase;
}
.scroll-cue .mouse{ width:22px; height:36px; border:1.5px solid rgba(255,255,255,.6); border-radius:12px; position:relative; }
.scroll-cue .mouse::after{ content:''; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px; background:#fff; transform:translateX(-50%); animation:wheel 1.8s infinite; }
@keyframes wheel{ 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0; transform:translate(-50%,10px);} 100%{opacity:0;} }

/* page hero (interior) */
.page-hero{ position:relative; min-height:64vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden; }
.page-hero .hero-media::after{ background:linear-gradient(180deg,rgba(30,42,50,.35) 0%,rgba(30,42,50,.2) 40%,rgba(30,42,50,.78) 100%); }
.page-hero-inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(40px,6vw,72px); padding-top:calc(var(--header-h) + 30px); }
.page-hero h1{ color:#fff; }
.page-hero .lead{ color:var(--on-dark); max-width:56ch; margin-top:1rem; }
.breadcrumb{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:1rem; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Split (image + text) ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.split.wide-media{ grid-template-columns:1.15fr .85fr; }
.split .media{ position:relative; }
.split .media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); object-fit:cover; }
.split.reverse .media{ order:2; }
.split .body h2{ margin-bottom:1.1rem; }
.media-frame{ position:relative; }
.media-frame .badge{
  position:absolute; bottom:-22px; left:-22px; background:var(--paper);
  padding:18px 24px; border-radius:var(--radius); box-shadow:var(--shadow-md); text-align:center;
}
.media-frame .badge .n{ font-family:var(--serif); font-size:2.2rem; color:var(--azure-700); line-height:1; }
.media-frame .badge .l{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-mut); margin-top:4px; }

/* stacked media */
.media-stack{ position:relative; }
.media-stack .m2{ position:absolute; width:52%; right:-6%; bottom:-14%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:6px solid #fff; }

/* ---------- Feature list ---------- */
.feature-list{ display:grid; gap:14px; margin-top:1.6rem; }
.feature-list li{ display:flex; align-items:flex-start; gap:14px; font-size:1.02rem; color:var(--text-soft); }
.feature-list .tick{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--azure-100); color:var(--azure-700); display:grid; place-items:center; margin-top:2px; }
.feature-list .tick svg{ width:13px; height:13px; }

/* ---------- Stats row ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ text-align:center; padding:20px; }
.stat .n{ font-family:var(--serif); font-size:clamp(2.6rem,4vw,3.4rem); color:var(--ink); line-height:1; }
.section.dark .stat .n{ color:#fff; }
.stat .l{ margin-top:.5rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mut); }
.section.dark .stat .l{ color:var(--on-dark-soft); }

/* ---------- Cards grid ---------- */
.grid{ display:grid; gap:26px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  display:flex; flex-direction:column; height:100%;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card .card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.card:hover .card-media img{ transform:scale(1.06); }
.card .card-body{ padding:28px; display:flex; flex-direction:column; flex:1; }
.card .card-body h3{ font-size:1.35rem; margin-bottom:.6rem; }
.card .card-body p{ color:var(--text-soft); font-size:.96rem; font-weight:300; }
.card .card-foot{ margin-top:auto; padding-top:18px; }
.card .kicker{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--azure-600); font-weight:600; margin-bottom:.7rem; }
.card .meta{ font-size:.82rem; color:var(--text-mut); display:flex; align-items:center; gap:8px; margin-top:12px; }
.card .meta svg{ width:15px; height:15px; color:var(--azure-600); }

/* service / experience card with overlay caption on hover */
.tile{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-sm); }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.tile:hover img{ transform:scale(1.08); }
.tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,42,50,0) 38%,rgba(28,40,47,.86) 100%); }
.tile .tile-body{ position:absolute; inset:auto 0 0 0; z-index:2; padding:26px; color:#fff; }
.tile .tile-body h3{ color:#fff; font-size:1.5rem; }
.tile .tile-body .tile-kicker{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--azure); font-weight:600; margin-bottom:.4rem; }
.tile .tile-body .go{ display:inline-flex; align-items:center; gap:.5em; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin-top:12px; opacity:0; transform:translateY(8px); transition:.4s var(--ease); }
.tile:hover .tile-body .go{ opacity:1; transform:translateY(0); }

/* numbered detail block (services / experiences long copy) */
.detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; padding:clamp(30px,5vw,54px) 0; }
.detail.reverse .detail-media{ order:2; }
.detail-media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); aspect-ratio:4/3; object-fit:cover; }
.detail + .detail{ border-top:1px solid var(--line-soft); }
.detail .info-row{ display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:1.4rem; }
.detail .info-row .item{ display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--text-soft); }
.detail .info-row svg{ width:16px; height:16px; color:var(--azure-600); flex:none; }

/* ---------- Gallery ---------- */
.gallery-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:44px; }
.gallery-filters button{
  background:transparent; border:1px solid var(--line); color:var(--text-soft);
  padding:.6em 1.4em; border-radius:100px; font-size:.74rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; transition:.3s var(--ease);
}
.gallery-filters button:hover{ border-color:var(--azure-600); color:var(--azure-700); }
.gallery-filters button.active{ background:var(--slate-800); border-color:var(--slate-800); color:#fff; }

.masonry{ columns:3; column-gap:18px; }
.masonry .g-item{ break-inside:avoid; margin-bottom:18px; border-radius:var(--radius); overflow:hidden; cursor:pointer; position:relative; box-shadow:var(--shadow-sm); }
.masonry .g-item img{ width:100%; transition:transform .8s var(--ease); }
.masonry .g-item::after{ content:''; position:absolute; inset:0; background:rgba(38,52,59,0); transition:.4s var(--ease); }
.masonry .g-item:hover::after{ background:rgba(38,52,59,.18); }
.masonry .g-item .zoom{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:2; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; opacity:0; transition:.4s var(--ease); }
.masonry .g-item:hover .zoom{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.masonry .g-item .zoom svg{ width:18px; height:18px; color:var(--slate-800); }
.g-item[hidden]{ display:none; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:400; background:rgba(24,33,38,.94); display:none; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:86vh; border-radius:6px; box-shadow:0 30px 90px rgba(0,0,0,.5); }
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; transition:.3s var(--ease);
}
.lightbox .lb-close:hover,.lightbox .lb-prev:hover,.lightbox .lb-next:hover{ background:rgba(255,255,255,.22); }
.lightbox .lb-close{ top:24px; right:24px; }
.lightbox .lb-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox .lb-next{ right:24px; top:50%; transform:translateY(-50%); }
.lightbox svg{ width:22px; height:22px; }

/* ---------- Territory ---------- */
.territory-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; box-shadow:var(--shadow-sm); }
.territory-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.territory-card:hover img{ transform:scale(1.07); }
.territory-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,42,50,0) 30%,rgba(26,37,44,.88) 100%); }
.territory-card .tc-body{ position:relative; z-index:2; padding:28px; color:#fff; }
.territory-card .tc-body .dist{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--azure); font-weight:600; margin-bottom:.4rem; }
.territory-card .tc-body h3{ color:#fff; font-size:1.5rem; margin-bottom:.4rem; }
.territory-card .tc-body p{ color:rgba(255,255,255,.82); font-size:.92rem; font-weight:300; }

/* ---------- Accordion (FAQ / rules) ---------- */
.accordion{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{ width:100%; background:none; border:0; text-align:left; padding:24px 44px 24px 0; position:relative; font-family:var(--serif); font-size:1.22rem; color:var(--ink); transition:color .3s var(--ease); }
.acc-head:hover{ color:var(--azure-700); }
.acc-head .ico{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:22px; height:22px; }
.acc-head .ico::before,.acc-head .ico::after{ content:''; position:absolute; background:var(--azure-600); border-radius:2px; transition:.35s var(--ease); }
.acc-head .ico::before{ left:0; right:0; top:10px; height:2px; }
.acc-head .ico::after{ top:0; bottom:0; left:10px; width:2px; }
.acc-item.open .acc-head .ico::after{ transform:scaleY(0); }
.acc-item.open .acc-head{ color:var(--azure-700); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc-body-inner{ padding:0 44px 26px 0; color:var(--text-soft); font-weight:300; font-size:1rem; }

/* ---------- Booking / contact ---------- */
.booking-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.booking-media{ position:relative; min-height:460px; }
.booking-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.booking-form{ background:var(--paper); padding:clamp(34px,4vw,54px); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mut); font-weight:600; margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; padding:.95em 1.1em; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--sans); font-size:.95rem; color:var(--text); background:#fdfdfc; transition:.3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--azure-600); box-shadow:0 0 0 3px var(--azure-050); }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.contact-item{ text-align:center; padding:20px; }
.contact-item .ci-ico{ width:56px; height:56px; border-radius:50%; background:var(--azure-100); color:var(--azure-700); display:grid; place-items:center; margin:0 auto 16px; }
.contact-item .ci-ico svg{ width:22px; height:22px; }
.contact-item h4{ font-family:var(--serif); font-size:1.25rem; color:var(--ink); margin-bottom:.3rem; }
.contact-item p{ color:var(--text-soft); font-size:.95rem; }
.contact-item a:hover{ color:var(--azure-700); }

.map-embed{ width:100%; border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); min-height:380px; filter:grayscale(.2) contrast(1.02); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; }
.cta-band .cta-media{ position:absolute; inset:0; }
.cta-band .cta-media img{ width:100%; height:100%; object-fit:cover; }
.cta-band .cta-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(45,61,69,.92),rgba(65,106,143,.78)); }
.cta-band .cta-inner{ position:relative; z-index:2; text-align:center; padding:clamp(64px,9vw,120px) 0; color:#fff; }
.cta-band h2{ color:#fff; max-width:20ch; margin:0 auto 1rem; }
.cta-band p{ color:var(--on-dark); max-width:56ch; margin:0 auto 2rem; font-weight:300; font-size:1.1rem; }

/* ---------- Note / disclaimer ---------- */
.note{ background:var(--azure-050); border-radius:var(--radius-lg); padding:clamp(26px,3vw,38px); }
.note h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--azure-700); margin-bottom:1rem; display:flex; align-items:center; gap:10px; }
.note h4 svg{ width:18px; height:18px; }
.note p{ font-size:.92rem; color:var(--text-soft); font-weight:300; }

/* pull quote */
.pullquote{ text-align:center; max-width:900px; margin-inline:auto; }
.pullquote p{ font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.5rem); font-weight:400; font-style:italic; color:var(--ink); line-height:1.35; }
.pullquote .attrib{ font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--azure-600); font-style:normal; margin-top:1.4rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--slate-800); color:var(--on-dark-soft); padding:clamp(56px,7vw,88px) 0 34px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:44px; }
.site-footer .f-brand img{ height:44px; margin-bottom:18px; }
.site-footer .f-brand p{ font-size:.92rem; font-weight:300; max-width:34ch; }
.site-footer h5{ font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:20px; font-weight:600; }
.site-footer .f-links a{ display:block; padding:6px 0; font-size:.92rem; color:var(--on-dark-soft); transition:color .3s var(--ease); }
.site-footer .f-links a:hover{ color:#fff; }
.site-footer .f-contact li{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:.92rem; }
.site-footer .f-contact svg{ width:17px; height:17px; color:var(--azure); flex:none; margin-top:3px; }
.site-footer .f-contact a:hover{ color:#fff; }
.socials{ display:flex; gap:12px; margin-top:20px; }
.socials a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition:.3s var(--ease); }
.socials a:hover{ background:var(--azure-600); border-color:var(--azure-600); }
.socials svg{ width:17px; height:17px; color:#fff; }
.footer-bottom{ margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.8rem; color:rgba(255,255,255,.5); }
.footer-bottom a:hover{ color:#fff; }

/* NB: la barra di prenotazione Lodgify (variabili colore, posizione fissa e layout
   orizzontale) è definita INLINE in ogni pagina — vedi booking_bar() in build.py —
   così resta funzionante e colorata anche se questo foglio di stile non venisse
   caricato dal server. Qui restano solo gli agganci che dipendono dalla sua altezza:
   body{padding-bottom} e .scroll-cue (più su, via --booking-bar-h). */

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

/* small helpers */
.center{ text-align:center; }
.mt-cta{ margin-top:2.4rem; }
.divider-word{ display:flex; align-items:center; gap:18px; color:var(--text-mut); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; }
.divider-word::before,.divider-word::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:38px; }
  .masonry{ columns:2; }
  .grid.cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:6px;
    background:rgba(255,255,255,.98); backdrop-filter:blur(10px);
    transform:translateX(100%); transition:transform .5s var(--ease); z-index:205;
  }
  .nav-open .nav{ transform:none; }
  .nav a{ color:var(--ink) !important; font-size:1.05rem; padding:.7em 1em; }
  .nav a::after{ display:none; }
  .header-cta .btn{ display:none; }
  .split,.split.wide-media{ grid-template-columns:1fr; gap:34px; }
  .split.reverse .media{ order:0; }
  .detail,.detail.reverse .detail-media{ grid-template-columns:1fr; }
  .detail.reverse .detail-media{ order:0; }
  .detail-media{ order:-1; }
  .booking-wrap{ grid-template-columns:1fr; }
  .booking-media{ min-height:260px; }
  .grid.cols-3,.grid.cols-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .contact-grid{ grid-template-columns:1fr; }
  .media-stack .m2{ position:static; width:100%; margin-top:16px; border-width:0; }
}
@media (max-width:560px){
  .container{ padding-inline:20px; }
  .masonry{ columns:1; }
  .field-row{ grid-template-columns:1fr; }
  .hero .lead{ font-size:1.08rem; }
  .footer-top{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}