/* ══════════════════════════════════════════════════════════════════════════
   Aegean Sunset Villas — shared stylesheet (all pages)
   Palette sampled from the photographs: the Aegean blue of every exterior,
   the warm stone of the walls, and white. Photographs are never dimmed or
   tinted; the only gradient on the site sits under the hero video type.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --white:#FFFFFF; --wash:#EDF4F9; --sand:#F5EFE4;
  --ink:#0F2B3D; --body:#2C4657; --muted:#55707F;
  --blue:#0B6E9E; --blue-deep:#0A5F89; --sky:#7FC4E8;
  --line:#D6E4EE; --line-warm:#E8DFCE;
  --err:#B3261E; --err-bg:#FDF1F0;
  --on-ink:#C3D6E2; --on-ink-dim:#8FAABC;
  --viewer:#091A24;
  --wa:#1F7A4D; --wa-deep:#186139;
  --display:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --gut:1.375rem;
  --t-micro:.8125rem; --t-base:1.0625rem; --t-lg:1.375rem;
  --shell:min(100%, 80.75rem);
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media (min-width:60rem){ :root{ --shell:min(100%, 83rem); } }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--body);font-family:var(--sans);
  font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);margin:0;
  line-height:1.04;letter-spacing:-.032em;text-wrap:balance}
p{margin:0}
a{color:inherit}
::selection{background:var(--sky);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
:root{scrollbar-color:var(--line) var(--white);accent-color:var(--blue)}
input,select,textarea,button{font:inherit;color:inherit}
input,textarea{caret-color:var(--blue)}
.shell{width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:60rem){ .shell{padding-inline:2.5rem} }
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:.75rem 1.25rem;z-index:100}
.skip:focus{left:.75rem;top:.75rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:3.25rem;padding:.85rem 1.7rem;border-radius:100px;border:2px solid transparent;
  font-weight:600;font-size:var(--t-base);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),
    border-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-fill{background:var(--blue);color:#fff}
.btn-fill:hover{background:var(--blue-deep)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--wash)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.btn-sm{min-height:2.75rem;padding:.6rem 1.15rem;font-size:var(--t-base)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.wa{background:var(--wa);color:#fff}
.wa:hover{background:var(--wa-deep)}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:background-color .3s,border-color .3s}
.hdr[data-stuck="true"]{border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:1.1rem;min-height:4.5rem}
.brand{margin-right:auto;display:inline-flex;align-items:center;gap:.7rem;
  text-decoration:none;color:var(--ink);padding-block:.6rem}
.brand img{height:2.6rem;width:auto}
.brand b{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.02em;
  line-height:1.05}
.nav{display:none;gap:1.6rem;align-items:center}
@media (min-width:64rem){.nav{display:flex}}
.nav a{text-decoration:none;font-size:var(--t-base);color:var(--body);padding:.35rem 0;
  position:relative}
.nav > a::after,.drop-btn::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--blue);border-radius:2px;transform:scaleX(0);
  transform-origin:left;transition:transform .25s var(--ease)}
.nav > a:hover::after,.nav > a[aria-current="page"]::after,
.drop:hover .drop-btn::after,.drop-btn[aria-expanded="true"]::after{transform:scaleX(1)}
.nav a:hover{color:var(--blue)}
.nav a[aria-current="page"]{color:var(--blue);font-weight:600}

/* Dropdown: The villas */
.drop{position:relative}
.drop-btn{position:relative;display:inline-flex;align-items:center;gap:.35rem;
  background:none;border:0;padding:.35rem 0;cursor:pointer;font-size:var(--t-base);
  color:var(--body)}
.drop-btn:hover{color:var(--blue)}
.drop-btn[data-here="true"]{color:var(--blue);font-weight:600}
.drop-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.drop:hover .drop-btn svg,.drop-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + .65rem);left:50%;transform:translate(-50%,6px);
  min-width:11rem;text-align:center;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 44px rgba(15,43,61,.14);padding:.5rem;
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),
    visibility 0s linear .22s}
.drop:hover .drop-menu,.drop:focus-within .drop-menu,
.drop-btn[aria-expanded="true"] + .drop-menu{opacity:1;visibility:visible;
  transform:translate(-50%,0);transition-delay:0s}
.drop-menu a{display:block;padding:.65rem .9rem;border-radius:7px;text-decoration:none;
  color:var(--ink);font-weight:600}
.drop-menu a span{display:block;font-weight:400;font-size:var(--t-micro);color:var(--muted)}
.drop-menu a:hover{background:var(--wash);color:var(--blue)}
.drop-menu a[aria-current="page"]{color:var(--blue)}

/* Mobile menu */
@media (max-width:47.99rem){.hdr-cta{display:none}}
.menu-btn{display:grid;place-items:center;width:2.9rem;height:2.9rem;border:0;
  background:none;cursor:pointer;color:var(--ink);border-radius:100px}
.menu-btn:hover{background:var(--wash)}
@media (min-width:64rem){.menu-btn{display:none}}
.menu-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round}
.hdr[data-clear="true"]:not([data-stuck="true"]) .menu-btn{color:#fff}
.hdr[data-clear="true"]:not([data-stuck="true"]) .menu-btn:hover{background:rgba(255,255,255,.14)}
.mnav{position:fixed;inset:0;z-index:80;background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px);display:flex;flex-direction:column;
  padding:5.5rem var(--gut) 2rem;overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility 0s linear .28s}
.mnav[data-open="true"]{opacity:1;visibility:visible;transition-delay:0s}
.mnav a{text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:700;
  font-size:1.9rem;letter-spacing:-.02em;padding:.55rem 0;
  display:flex;align-items:baseline;gap:.75rem}
.mnav a small{font-family:var(--sans);font-weight:400;font-size:var(--t-micro);
  color:var(--muted);letter-spacing:0}
.mnav a[aria-current="page"]{color:var(--blue)}
.mnav .mnav-sub{margin:.4rem 0 .8rem 1.1rem;display:flex;flex-direction:column}
.mnav .mnav-sub a{font-size:1.35rem;padding:.4rem 0}
.mnav .mnav-cta{margin-top:auto;padding-top:1.6rem;display:flex;flex-direction:column;gap:.6rem}
.mnav-x{position:absolute;top:.95rem;right:.9rem;width:2.9rem;height:2.9rem;border:0;
  border-radius:100px;background:var(--wash);color:var(--ink);cursor:pointer;
  display:grid;place-items:center}
.mnav-x svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
body[data-lock="true"]{overflow:hidden}

/* Transparent header over the home hero */
.hdr[data-clear="true"]{position:fixed;left:0;right:0;background:transparent;backdrop-filter:none}
.hdr[data-clear="true"] .brand,.hdr[data-clear="true"] .nav a,
.hdr[data-clear="true"] .drop-btn{color:#fff}
.hdr[data-clear="true"] .nav a:hover,.hdr[data-clear="true"] .drop-btn:hover{color:var(--sky)}
/* The dropdown card itself is always white — its links stay ink, whatever the header state */
.hdr[data-clear="true"] .nav .drop-menu a{color:var(--ink)}
.hdr[data-clear="true"] .nav .drop-menu a:hover{color:var(--blue)}
.hdr[data-clear="true"] .nav .drop-menu a[aria-current="page"]{color:var(--blue)}
.hdr[data-clear="true"] .btn-fill{background:#fff;color:var(--ink)}
.hdr[data-clear="true"] .logo-grey{display:none}
.hdr[data-clear="true"] .logo-white{display:block}
.hdr .logo-white{display:none}
.hdr .logo-grey{display:block}
/* Once scrolled, the fixed header regains its white ground */
.hdr[data-clear="true"][data-stuck="true"]{background:rgba(255,255,255,.93);backdrop-filter:blur(14px)}
.hdr[data-clear="true"][data-stuck="true"] .brand{color:var(--ink)}
.hdr[data-clear="true"][data-stuck="true"] .nav a{color:var(--body)}
.hdr[data-clear="true"][data-stuck="true"] .nav a:hover{color:var(--blue)}
.hdr[data-clear="true"][data-stuck="true"] .drop-btn{color:var(--body)}
.hdr[data-clear="true"][data-stuck="true"] .drop-btn:hover{color:var(--blue)}
.hdr[data-clear="true"][data-stuck="true"] .nav .drop-menu a{color:var(--ink)}
.hdr[data-clear="true"][data-stuck="true"] .nav .drop-menu a:hover{color:var(--blue)}
.hdr[data-clear="true"][data-stuck="true"] .btn-fill{background:var(--blue);color:#fff}
.hdr[data-clear="true"][data-stuck="true"] .logo-white{display:none}
.hdr[data-clear="true"][data-stuck="true"] .logo-grey{display:block}

/* ── Home hero: full-bleed video ─────────────────────────────────────────── */
.vhero{position:relative;min-height:100svh;display:grid;place-items:center;
  overflow:hidden;background:var(--ink)}
.static .vhero{min-height:46rem}
.vhero video,.vhero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* A slow breath of scale keeps the opening frame alive */
@media (prefers-reduced-motion:no-preference){
  .vhero video,.vhero .poster{animation:kenburns 30s var(--ease) infinite alternate}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
  .js .vhero-in > *{opacity:0;transform:translateY(18px);
    animation:rise .85s var(--ease) forwards}
  .js .vhero-in > :nth-child(1){animation-delay:.15s}
  .js .vhero-in > :nth-child(2){animation-delay:.34s}
  .js .vhero-in > :nth-child(3){animation-delay:.52s}
  @keyframes rise{to{opacity:1;transform:none}}
}
.vhero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,26,36,.30) 0%,rgba(9,26,36,0) 32%,
    rgba(9,26,36,0) 55%,rgba(9,26,36,.44) 100%)}
.vhero-in{position:relative;z-index:2;text-align:center;padding:7rem var(--gut) 5.5rem;
  display:flex;flex-direction:column;align-items:center;gap:1.6rem;
  width:100%;max-width:52rem}
.vhero-logo{width:min(15rem,52vw);height:auto;
  filter:drop-shadow(0 2px 18px rgba(9,26,36,.35))}
.vhero h1{color:#fff;font-size:clamp(1.55rem,3.6vw,2.5rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.25;max-width:min(24ch,100%);margin-inline:auto;
  text-shadow:0 1px 22px rgba(9,26,36,.45)}
.vhero-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:.4rem}
.vhero-cue{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);z-index:2;
  color:#fff;opacity:.85;display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;
  text-decoration:none;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.vhero-cue svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .vhero-cue svg{animation:cue 2.2s var(--ease) infinite}
  @keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
}

/* ── Page hero (inner pages): clean photo, title on white above ──────────── */
.phead{padding:2.6rem 0 1.9rem}
.phead .crumb{font-size:var(--t-micro);color:var(--muted);margin-bottom:.9rem}
.phead .crumb a{color:var(--muted);text-decoration:none}
.phead .crumb a:hover{color:var(--blue)}
.phead h1{font-size:clamp(2.5rem,6vw,4rem)}
.phead .lede{margin-top:.9rem;font-size:var(--t-lg);color:var(--muted);max-width:56ch}
.pshot{margin:0;background:var(--wash)}
.pshot img{width:100%;max-height:72vh;object-fit:cover}

/* ── Facts bar: a slow, seamless ticker under the hero ───────────────────── */
.facts{background:var(--ink);color:#fff;overflow:hidden}
.facts-track{display:flex;width:max-content}
.facts-run{display:flex;align-items:baseline;padding:1.2rem 0;font-size:var(--t-base)}
.facts b{font-family:var(--display);font-weight:700;font-size:var(--t-lg);
  letter-spacing:-.02em;margin-right:.4rem}
.facts .rate{color:var(--sky)}
.facts span{color:var(--on-ink);display:inline-flex;align-items:baseline;white-space:nowrap}
.facts-run > span::after{content:"";align-self:center;width:5px;height:5px;
  border-radius:50%;background:var(--on-ink-dim);margin:0 2.2rem;flex:none}
@media (prefers-reduced-motion:no-preference){
  .facts-track{animation:facts-marquee 36s linear infinite}
  .facts-track:hover{animation-play-state:paused}
  @keyframes facts-marquee{to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .facts-track{width:100%;justify-content:center}
  .facts-run{flex-wrap:wrap;justify-content:center;row-gap:.5rem}
  .facts-run[aria-hidden="true"]{display:none}
}
/* Legacy single-row layout kept for any page that still uses .facts-in */
.facts-in{display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;padding:1.15rem 0;
  font-size:var(--t-base);align-items:baseline}

/* ── Sections ────────────────────────────────────────────────────────────── */
section{scroll-margin-top:5rem}
.band{padding:4rem 0}
@media (min-width:60rem){.band{padding:5.5rem 0}}
.band-wash{background:var(--wash)}
.band-sand{background:var(--sand)}
.band-ink{background:var(--ink);color:var(--on-ink)}
.band-ink h2{color:#fff}
.h2{font-size:clamp(2rem,5vw,3.2rem);max-width:22ch}
.lede{margin-top:.9rem;font-size:var(--t-lg);color:var(--muted);max-width:54ch}
.head-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.25rem;margin-bottom:2.25rem}
.big{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.6vw,1.8rem);
  line-height:1.3;letter-spacing:-.018em;color:var(--ink)}

/* ── Intro statement ─────────────────────────────────────────────────────── */
.state{max-width:56rem}
.state-wide{max-width:none}
.state h2{font-size:clamp(2.3rem,5.6vw,3.7rem)}
.state h2 em{font-style:normal;color:var(--blue)}
.state .cols{display:grid;gap:1.5rem 3rem;margin-top:2rem}
@media (min-width:48rem){.state .cols{grid-template-columns:1fr 1fr}}
.state .cols p + p{margin-top:1rem}
.state-flex{display:grid;gap:2rem;margin-top:2.25rem}
@media (min-width:60rem){.state-flex{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:4rem;align-items:center}}
.state-text p + p{margin-top:1.1rem}
.state-text .big{margin-bottom:1.4rem}
.state-shot{border-radius:8px}
.state-shot img{aspect-ratio:3/2;width:100%;height:auto;max-height:none;object-fit:cover}

/* ── Tiles & galleries ───────────────────────────────────────────────────── */
.tile{margin:0;position:relative;overflow:hidden;border-radius:4px;background:var(--wash);
  aspect-ratio:4/3}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tile button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.tile button:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.tile img{transition:none}.tile button:hover img{transform:none}}
.grid3{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:48rem){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid4{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:48rem){.grid4{grid-template-columns:repeat(4,1fr)}}
.gallery-grid{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:48rem){.gallery-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid .tile:nth-child(7n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}
.more{display:flex;justify-content:center;margin-top:1.75rem}

/* ── Villa cards ─────────────────────────────────────────────────────────── */
.three{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:48rem){.three{grid-template-columns:repeat(3,1fr)}}
.villa{background:#fff;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line);text-decoration:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),
    transform .3s var(--ease)}
.band-wash .villa,.band-sand .villa{border-color:transparent}
.villa:hover{border-color:var(--sky);box-shadow:0 10px 34px rgba(15,43,61,.10)}
.villa .shot{aspect-ratio:4/3;overflow:hidden;background:var(--wash)}
.villa .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.villa:hover .shot img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.villa .shot img{transition:none}.villa:hover .shot img{transform:none}}
.villa-b{padding:1.35rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.villa h3{font-size:1.6rem}
.villa .sub{font-size:var(--t-base);color:var(--muted)}
.villa .go{margin-top:auto;padding-top:.8rem;color:var(--blue);font-weight:600;
  display:inline-flex;align-items:center;gap:.4rem}
.villa .go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.villa:hover .go svg{transform:translateX(3px)}

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.75rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:#fff;
  border:1px solid var(--line);border-radius:100px;padding:.55rem 1rem;font-size:var(--t-base);
  color:var(--body)}
.band-sand .chip{border-color:var(--line-warm)}
.chip svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── Couples / families split ────────────────────────────────────────────── */
.duo{display:grid;gap:1.25rem;margin-top:2.25rem}
@media (min-width:48rem){.duo{grid-template-columns:1fr 1fr;gap:1.5rem}}
.duo-card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.band-wash .duo-card{border-color:transparent}
.duo-card .shot{aspect-ratio:16/9;overflow:hidden;background:var(--wash)}
.duo-card .shot img{width:100%;height:100%;object-fit:cover}
.duo-card .body{padding:1.5rem 1.6rem 1.7rem}
.duo-card h3{font-size:var(--t-lg)}
.duo-card p{margin-top:.6rem;color:var(--body)}

/* ── Reviews ─────────────────────────────────────────────────────────────── */
.say{display:grid;gap:1.25rem;margin-top:2.25rem}
@media (min-width:48rem){.say{grid-template-columns:1.3fr 1fr 1fr}}
.quote{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.6rem;
  display:flex;flex-direction:column;gap:.8rem}
.band-wash .quote{border-color:transparent}
.quote blockquote{margin:0;font-size:var(--t-base);color:var(--body)}
.quote .who{font-size:var(--t-micro);color:var(--muted)}
.score{display:flex;align-items:baseline;gap:.65rem}
.score b{font-family:var(--display);font-weight:700;font-size:2.6rem;color:var(--ink);
  letter-spacing:-.03em}
.score span{color:var(--muted);font-size:var(--t-base)}

/* ── Distances / location ────────────────────────────────────────────────── */
.dist{display:grid;gap:0 3rem;grid-template-columns:1fr;margin-top:1.75rem;
  list-style:none;padding:0}
@media (min-width:48rem){.dist{grid-template-columns:1fr 1fr}}
.dist li{display:flex;align-items:baseline;gap:.75rem;padding:.8rem 0;
  border-bottom:1px solid var(--line)}
.band-sand .dist li{border-bottom-color:var(--line-warm)}
.dist .n{font-family:var(--display);font-weight:700;color:var(--ink);font-size:var(--t-lg);
  letter-spacing:-.02em;white-space:nowrap;min-width:4.2rem}
.dist .p{flex:1;color:var(--body);font-size:var(--t-base)}
.dist .t{color:var(--muted);font-size:var(--t-micro);white-space:nowrap}
.map{margin-top:2.5rem;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:26rem;border:0}
.spots{display:grid;gap:1.25rem;margin-top:2.25rem;grid-template-columns:1fr}
@media (min-width:48rem){.spots{grid-template-columns:repeat(3,1fr)}}
.spot{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.5rem 1.6rem}
.band-wash .spot{border-color:transparent}
.spot h3{font-size:1.2rem}
.spot .d{font-size:var(--t-micro);color:var(--blue);font-weight:600;margin-top:.2rem}
.spot p{margin-top:.55rem;font-size:var(--t-base);color:var(--body)}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{margin-top:2rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:1rem;
  justify-content:space-between;padding:1.15rem 0;font-family:var(--display);font-weight:700;
  color:var(--ink);font-size:1.15rem;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;color:var(--blue);font-size:1.5rem;line-height:1;
  transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 1.25rem;max-width:62ch;color:var(--body)}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta-band{text-align:center}
.cta-band h2{font-size:clamp(2rem,5vw,3rem);max-width:none}
.cta-band p{margin:.9rem auto 0;max-width:44ch;color:var(--on-ink)}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.9rem}

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-wrap{display:grid;gap:2.5rem;margin-top:2.25rem}
@media (min-width:60rem){.form-wrap{grid-template-columns:1.35fr .8fr;gap:4rem}}
.grid{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
.f-full{grid-column:1/-1}
.field label{display:block;font-size:var(--t-base);font-weight:600;color:var(--ink);margin-bottom:.4rem}
.req{color:var(--blue)}
.opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:3.25rem;padding:.75rem .95rem;
  background:#fff;border:1.5px solid var(--line);border-radius:8px;
  transition:border-color .18s,box-shadow .18s}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(11,110,158,.14)}
.field [aria-invalid="true"]{border-color:var(--err);background:var(--err-bg)}
.hint{font-size:var(--t-micro);color:var(--muted);margin-top:.35rem}
.err{display:none;font-size:var(--t-micro);color:var(--err);margin-top:.35rem;gap:.35rem}
.err[data-on="true"]{display:flex}
.err svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none;margin-top:.2rem}
.tel{display:flex;gap:.5rem}
.tel select{flex:0 0 8rem;min-width:0}
.tel input{flex:1;min-width:0}
.summary{display:none;border:1.5px solid var(--err);background:var(--err-bg);border-radius:8px;
  padding:1rem 1.15rem;margin-bottom:1.25rem}
.summary[data-on="true"]{display:block}
.summary p{font-weight:700;color:var(--err);font-size:var(--t-base)}
.summary ul{margin:.45rem 0 0;padding-left:1.1rem;font-size:var(--t-base);color:var(--err)}
.send{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.send .btn{flex:1 1 14rem}
.send svg{width:19px;height:19px;flex:none}
.peek{margin-top:1.25rem}
.peek summary{cursor:pointer;font-size:var(--t-base);color:var(--muted);padding:.4rem 0}
.peek summary:hover{color:var(--ink)}
.peek pre{margin:.75rem 0 0;padding:1.15rem;background:var(--wash);border-radius:8px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--t-micro);
  line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--body)}
.status{margin-top:1.1rem;font-size:var(--t-base);color:var(--muted)}
.status[data-ok="true"]{color:var(--wa-deep);font-weight:600}
.aside{background:var(--wash);border-radius:10px;padding:1.75rem;align-self:start}
.band-wash .aside{background:#fff}
.aside h3{font-size:var(--t-lg)}
.aside p{margin-top:.6rem;font-size:var(--t-base);color:var(--muted)}
.aside-btns{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem}
.aside-btns .btn{width:100%}
.aside-btns .wa{background:transparent;color:var(--wa-deep);border-color:var(--wa)}
.aside-btns .wa:hover{background:rgba(31,122,77,.08)}
.aside address{margin-top:1.25rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-style:normal;font-size:var(--t-base);color:var(--muted)}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ft{background:var(--ink);color:var(--on-ink);padding:3rem 0 2rem;font-size:var(--t-base)}
.ft a{color:var(--on-ink)}
.ft a:hover{color:#fff}
.ft-top{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;justify-content:space-between}
.ft h4{font-family:var(--display);font-weight:700;color:#fff;font-size:var(--t-lg);margin:0 0 .5rem;
  letter-spacing:-.02em}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:inline-block;padding:.32rem 0;text-decoration:none}
.ft .ft-logo{height:5.4rem;width:auto;margin-bottom:.9rem;opacity:.92}
.ft-btm{border-top:1px solid rgba(255,255,255,.16);margin-top:2rem;padding-top:1.35rem;
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  align-items:baseline;font-size:var(--t-micro)}
/* Studio signature. Always lowercase, always one word: "the" Arial, "fixer" Arial Black. */
.credit{display:inline-flex;align-items:baseline;text-decoration:none;white-space:pre;
  font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:var(--t-micro);
  color:var(--on-ink-dim);padding:.3rem 0;transition:color .25s var(--ease)}
.credit .mark2{color:#fff;white-space:nowrap}
.credit .the{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:400}
.credit .fixer{font-family:"Arial Black","Arial Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-weight:900}
.credit:hover,.credit:hover .mark2{color:var(--sky)}

/* ── Lightbox ────────────────────────────────────────────────────────────── */
.lb{border:0;padding:0;width:100vw;height:100dvh;max-width:100vw;max-height:100vh;
  background:var(--viewer);overflow:hidden}
.lb::backdrop{background:var(--viewer)}
.lb figure{margin:0;width:100%;height:100%;display:grid;place-items:center;padding:3.75rem 1rem 4rem}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:3px}
.lb button{position:absolute;width:3rem;height:3rem;border-radius:100px;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;
  display:grid;place-items:center;backdrop-filter:blur(6px)}
.lb button:hover{background:rgba(255,255,255,.28)}
.lb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
#lb-x{top:1rem;right:1rem}
#lb-p{left:1rem;top:50%;transform:translateY(-50%)}
#lb-n{right:1rem;top:50%;transform:translateY(-50%)}
#lb-c{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);color:var(--on-ink);
  font-size:var(--t-base)}

/* ── Sticky mobile bar ───────────────────────────────────────────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.6rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .3s var(--ease)}
.bar[data-on="true"]{transform:none}
.bar .btn{flex:1}
@media (min-width:48rem){.bar{display:none}}
@media (max-width:47.99rem){body{padding-bottom:4.75rem}}
@media (prefers-reduced-motion:reduce){.bar{transition:none}}

/* ── Reveal ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .rv[data-in="true"]{opacity:1;transform:none}
  /* Tiles inside a revealed block enter one after another */
  .js .rv .tile{opacity:0;transform:translateY(18px) scale(.985);
    transition:opacity .55s var(--ease),transform .55s var(--ease);
    transition-delay:calc(var(--i,0)*55ms)}
  .js .rv[data-in="true"] .tile{opacity:1;transform:none}
  /* Facts bar figures slide in one by one */
  .js .facts .rv-i{display:inline-flex;opacity:0;transform:translateY(10px);
    transition:opacity .5s var(--ease),transform .5s var(--ease);
    transition-delay:calc(var(--i,0)*70ms)}
  .js .facts.rv[data-in="true"] .rv-i{opacity:1;transform:none}
}

/* ── Gentle parallax on wide photographs ─────────────────────────────────── */
.pshot{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .js .pshot img{transform:translateY(var(--plx,0)) scale(1.1);will-change:transform}
}

/* ── CTA band: a slow drift of light ─────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden}
.cta-band .shell{position:relative;z-index:1}
.cta-band::before{content:"";position:absolute;width:52rem;height:52rem;border-radius:50%;
  background:radial-gradient(circle,rgba(127,196,232,.20),transparent 62%);
  top:-24rem;left:-14rem;pointer-events:none}
.cta-band::after{content:"";position:absolute;width:44rem;height:44rem;border-radius:50%;
  background:radial-gradient(circle,rgba(11,110,158,.28),transparent 60%);
  bottom:-22rem;right:-12rem;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .cta-band::before{animation:drift 16s ease-in-out infinite alternate}
  .cta-band::after{animation:drift 19s ease-in-out infinite alternate-reverse}
  @keyframes drift{from{transform:translate(0,0)}to{transform:translate(6rem,2.5rem)}}
}

/* ── Cards breathe on hover ──────────────────────────────────────────────── */
.quote{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.quote:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,43,61,.08)}
.spot{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.spot:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,43,61,.08)}
.villa{will-change:transform}
.villa:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){
  .villa:hover,.quote:hover,.spot:hover{transform:none}
}