/* ============================================================
   AvG by the Sea — Bel Air Apartments, Mamaia Nord
   Paleta este preluată din logo.
   ============================================================ */

:root{
  --cream:#FCF9EF;
  --cream-2:#F4EFE1;
  --sand:#F3E7CD;
  --sand-2:#EADCBC;
  --sea-deep:#0B2A39;
  --paper:#FFFFFF;
  --ink:#12384A;
  --brand:#1E5A78;
  --brand-d:#154257;
  --wave:#5EBCD8;
  --wave-l:#CDEAF4;
  --sun:#F5B731;
  --gold:#D89A3C;
  --muted:#4F6B7A;
  --line:rgba(30,90,120,.16);
  --shadow:0 1px 2px rgba(18,56,74,.06), 0 12px 32px -12px rgba(18,56,74,.22);
  --shadow-lg:0 2px 4px rgba(18,56,74,.06), 0 28px 60px -20px rgba(18,56,74,.34);
  --r:14px;
  --r-lg:22px;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth; scroll-padding-top:88px;
  /* păstrează locul barei de derulare: altfel, când se blochează derularea
     (ecranul de intrare, lightbox), pagina se lățește brusc și tot textul sare */
  scrollbar-gutter:stable;
}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit}
[hidden]{display:none !important}

.wrap{width:min(1120px, 100% - 40px); margin-inline:auto}

/* ------------------------------------------------- tipografie */
.h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(28px, 4.2vw, 44px);
  line-height:1.14;
  letter-spacing:-.015em;
  margin:.15em 0 .5em;
  max-width:22ch;
}
.h2--light{color:#fff}
.h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(21px, 2.6vw, 28px);
  line-height:1.22;
  margin:2.6rem 0 .6rem;
}
.kicker{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}
.kicker--light{color:var(--sun)}
.lede{font-size:clamp(17px,1.9vw,19.5px); color:var(--muted); max-width:66ch; margin:0 0 1.2rem}
.lede--light{color:rgba(255,255,255,.82)}
.note{font-size:14.5px; color:var(--muted); max-width:70ch; margin-top:1.6rem}

/* ---------------------------------------------------- butoane */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.78rem 1.35rem;
  border:1px solid transparent;
  border-radius:999px;
  font:inherit; font-size:15.5px; font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:19px; height:19px; flex:none}
.btn--gold{background:var(--sun); color:#3D2A05; box-shadow:0 8px 20px -10px rgba(245,183,49,.9)}
.btn--gold:hover{background:#FFC64B}
.btn--wa{background:#25D366; color:#07321A; box-shadow:0 8px 20px -10px rgba(37,211,102,.9)}
.btn--wa:hover{background:#33e074}
.btn--ghost{border-color:currentColor; color:var(--brand); background:transparent}
.btn--ghost:hover{background:rgba(30,90,120,.07)}
.btn--link{background:var(--brand); color:#fff}
.btn--link:hover{background:var(--brand-d)}
.btn--big{padding:.95rem 1.7rem; font-size:16.5px}
.hero .btn--ghost{color:#fff; border-color:rgba(255,255,255,.6)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.14)}

/* ----------------------------------------------------- splash */
.splash{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(1000px 620px at 50% -12%, var(--wave-l), transparent 62%),
    var(--cream);
  display:grid; place-items:center;
  padding:28px 20px;
  overflow-y:auto;
  animation:fade .35s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.splash__inner{text-align:center; max-width:760px; width:100%}
.splash__logo{width:min(190px, 44vw); margin:0 auto 6px; border-radius:18px}
.splash__langs{display:flex; gap:8px; justify-content:center; margin:4px 0 22px}
.langbtn{
  border:1px solid var(--line); background:var(--paper); color:var(--brand);
  border-radius:999px; padding:.42rem 1.05rem;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:.16s ease;
}
.langbtn:hover{border-color:var(--brand)}
.langbtn.is-on{background:var(--brand); color:#fff; border-color:var(--brand)}
.splash__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(24px,4.4vw,36px); line-height:1.16; margin:0 0 .25em;
}
.splash__sub{color:var(--muted); margin:0 0 26px}
.splash__choices{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.choice{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:30px 22px 26px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  cursor:pointer; font:inherit; color:inherit;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.choice:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--wave)}
.choice__icon{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; margin-bottom:4px;
}
.choice__icon svg{width:28px; height:28px}
.choice--buy  .choice__icon{background:rgba(245,183,49,.18); color:var(--gold)}
.choice--rent .choice__icon{background:rgba(94,188,216,.22); color:var(--brand)}
.choice__label{font-family:var(--serif); font-size:22px; font-weight:700}
.choice__note{font-size:14px; color:var(--muted); line-height:1.45; max-width:24ch}
.splash__foot{font-size:13.5px; color:var(--muted); margin-top:22px}

@media (max-width:620px){
  .splash__choices{grid-template-columns:1fr}
  .choice{flex-direction:row; text-align:left; align-items:center; gap:1rem; padding:18px}
  .choice__icon{flex:none; margin:0}
  .choice__label{font-size:19px}
  .choice__note{max-width:none}
  .choice > span:not(.choice__icon){align-self:flex-start}
}

/* ----------------------------------------------------- header */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(252,249,239,.86);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
body.is-scrolled .hdr{border-bottom-color:var(--line); box-shadow:0 8px 24px -22px rgba(18,56,74,.7)}
.hdr__row{display:flex; align-items:center; gap:18px; min-height:70px}
.hdr__brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.hdr__brand img{width:40px; height:40px; border-radius:10px}
.hdr__brandtxt{display:flex; flex-direction:column; line-height:1.15}
.hdr__brandtxt b{font-family:var(--serif); font-size:16px; color:var(--brand)}
.hdr__brandtxt i{font-style:normal; font-size:11.5px; letter-spacing:.06em; color:var(--muted)}
.hdr__nav{display:flex; gap:22px; margin-left:auto}
.hdr__nav a{
  text-decoration:none; font-size:15px; font-weight:500; color:var(--ink);
  padding:6px 0; border-bottom:2px solid transparent; transition:.16s ease;
}
.hdr__nav a:hover{color:var(--brand); border-bottom-color:var(--wave)}
.hdr__tools{display:flex; align-items:center; gap:10px}
.switch{display:inline-flex; background:rgba(30,90,120,.08); border-radius:999px; padding:3px}
.switch button{
  border:0; background:transparent; color:var(--muted);
  font:inherit; font-size:13.5px; font-weight:600;
  padding:.36rem .8rem; border-radius:999px; cursor:pointer;
  transition:.16s ease; white-space:nowrap;
}
.switch button.is-on{background:var(--paper); color:var(--brand); box-shadow:0 1px 3px rgba(18,56,74,.16)}
.switch--lang button{padding:.36rem .62rem}
.hdr__wa{padding:.5rem 1rem; font-size:14px}
.hdr__burger{display:none; flex:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer}
.hdr__burger span{width:22px; height:2px; background:var(--brand); border-radius:2px}

@media (max-width:1040px){
  .hdr__nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:8px 20px 16px;
  }
  .hdr.is-open .hdr__nav{display:flex}
  .hdr__nav a{padding:12px 0; border-bottom:1px solid var(--line)}
  .hdr__burger{display:flex}
  .hdr__tools{margin-left:auto}
  .hdr__wa span{display:none}
  .hdr__wa{padding:.5rem .7rem}
}
@media (max-width:560px){
  .hdr__brandtxt{display:none}
  .hdr__wa{display:none}
  .hdr__row{gap:10px}
  .hdr__tools{gap:8px}
  .switch button{padding:.34rem .58rem; font-size:12.5px}
  .switch--lang button{padding:.34rem .46rem}
}

/* ------------------------------------------------------- hero */
.hero{position:relative; display:flex; align-items:flex-end; min-height:min(88vh, 760px); overflow:hidden}
.hero__media{position:absolute; inset:0; background:linear-gradient(160deg, var(--brand) 0%, #0E2E3E 62%, #071E2A 100%)}
.hero__media img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease}
.hero__media.is-ready img{opacity:1}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(7,30,42,.92) 0%, rgba(7,30,42,.55) 42%, rgba(7,30,42,.18) 100%);
}
.hero__body{position:relative; z-index:1; padding:120px 0 clamp(74px,9vw,124px); color:#fff}
.hero__eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sun); margin:0 0 .8rem;
}
.hero__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(32px, 5.6vw, 60px); line-height:1.07; letter-spacing:-.02em;
  margin:0 0 .45em; max-width:20ch;
}
.hero__lede{font-size:clamp(16px,1.9vw,19px); color:rgba(255,255,255,.86); max-width:56ch; margin:0 0 1.8rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.9rem}

.facts{
  list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:0; padding:0;
}
.facts li{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r);
  padding:.6rem 1rem;
  backdrop-filter:blur(6px);
  min-width:96px;
}
.facts b{display:block; font-family:var(--serif); font-size:22px; line-height:1.15}
.facts b em{font-style:normal; font-size:14px; opacity:.75}
.facts span{font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.72)}

/* --------------------------------------------------- secțiuni */
.sec{position:relative; padding:clamp(56px, 8vw, 104px) 0}

/* granulație fină de nisip, peste fundalurile deschise */
.sec::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:multiply;
}
.sec--dark::before{display:none}
.sec > .wrap{position:relative; z-index:1}

.sec--tint{background:linear-gradient(180deg, var(--cream-2), var(--cream))}
.sec--sand{background:linear-gradient(180deg, var(--sand) 0%, var(--sand) 58%, var(--cream) 100%)}
.sec--dark{
  background:linear-gradient(150deg, var(--brand) 0%, #113B4E 70%, var(--sea-deep) 100%);
  color:#fff;
}

/* spațiu pentru valurile care se suprapun peste marginea secțiunii */
.sec--wave-bottom{padding-bottom:calc(clamp(56px,8vw,104px) + clamp(52px,7vw,112px))}
.sec--wave-top{padding-top:calc(clamp(56px,8vw,104px) + clamp(52px,7vw,112px))}
/* secțiunea dinaintea unui val nu mai are nevoie de spațiu jos */
.sec:has(+ .sec--wave-top){padding-bottom:clamp(24px,3vw,48px)}

/* ------------------------------------------------------- valuri */
.waves{
  position:absolute; left:0; right:0; bottom:-1px; z-index:0;
  height:clamp(52px,7vw,112px); overflow:hidden; line-height:0;
}
.waves--top{bottom:auto; top:-1px; transform:scaleY(-1)}
.waves svg{width:100%; height:100%; display:block}
.waves__back{fill:var(--wave); opacity:.4}
.waves__front{fill:var(--cream)}
.waves--sand .waves__front{fill:var(--sand)}
.waves--sea  .waves__front{fill:var(--cream)}

@keyframes drift{from{transform:translateX(0)} to{transform:translateX(-360px)}}
.waves__back{animation:drift 19s linear infinite}
.waves__front{animation:drift 13s linear infinite reverse}

/* ------------------------------------------------------- preț */
.price{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:clamp(24px,3.4vw,38px);
  display:grid; gap:22px;
  grid-template-columns:minmax(240px,.9fr) 1.1fr;
  align-items:start;
}
.price__main{border-right:1px solid var(--line); padding-right:24px}
.price__num{
  display:block;
  font-family:var(--serif); font-weight:700;
  font-size:clamp(34px,5vw,50px); line-height:1.05; letter-spacing:-.02em;
  color:var(--brand);
}
.price__num i{font-style:normal; font-size:.42em; color:var(--muted); font-family:var(--sans); font-weight:600; letter-spacing:0}
.price__num em{font-style:normal; font-size:.36em; color:var(--muted); font-family:var(--sans); font-weight:600}
.price__vat{display:block; margin-top:.6rem; font-size:14px; color:var(--muted)}
.price__incl{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.price__incl li{position:relative; padding-left:1.9rem; font-size:16px}
.price__incl li::before{
  content:""; position:absolute; left:0; top:.34em;
  width:1.1rem; height:1.1rem; border-radius:50%;
  background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D2A05' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/68% no-repeat;
}
.price__cta{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); padding-top:22px}

@media (max-width:760px){
  .price{grid-template-columns:1fr}
  .price__main{border-right:0; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:20px}
}

/* ------------------------------------------------------ carduri */
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; margin-top:1.4rem}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 22px 24px;
  box-shadow:0 1px 2px rgba(18,56,74,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.card h3{
  font-family:var(--serif); font-size:19px; font-weight:600; margin:0 0 .45em;
  color:var(--brand);
}
.card h3{margin-top:0}
.card p{margin:0; font-size:15.5px; color:var(--muted); line-height:1.6}

/* ------------------------------------------------------ dotări */
.amen{
  list-style:none; margin:1.2rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:.65rem 28px;
}
.amen li{position:relative; padding-left:1.8rem; font-size:16px}
.amen li::before{
  content:""; position:absolute; left:.15rem; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--wave);
}

/* ------------------------------------------------ catalog foto */
.gal__head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.gal__head .h2{margin-bottom:.3em}
.gal__count{
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .5rem;
}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin:.4rem 0 1.4rem}
.chip{
  border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--brand);
  border-radius:999px; padding:.4rem .95rem;
  font:inherit; font-size:14px; font-weight:600; cursor:pointer;
  transition:.16s ease;
}
.chip:hover{border-color:var(--brand)}
.chip.is-on{background:var(--brand); color:#fff; border-color:var(--brand)}
.chip span{opacity:.6; font-weight:500; margin-left:.35rem}

.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:12px; margin-top:.4rem;
}
.shot{
  padding:0; border:0; background:var(--sand-2);
  border-radius:var(--r); overflow:hidden; cursor:zoom-in;
  aspect-ratio:4/3; position:relative;
}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.shot:hover img{transform:scale(1.05)}
.shot:focus-visible{outline:3px solid var(--brand); outline-offset:2px}
.shot--lead{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}
@media (max-width:640px){ .shot--lead{grid-column:span 1; grid-row:span 1; aspect-ratio:4/3} }

.gal__more{margin:1.4rem 0 0; text-align:center}

/* ----------------------------------------------------- detalii */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:start; margin-top:1.4rem}
.split--single{grid-template-columns:minmax(0,620px)}
@media (max-width:880px){ .split{grid-template-columns:1fr} }

.tbl{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.tbl caption{caption-side:top; text-align:left; font-size:13.5px; color:var(--muted); padding-bottom:.6rem}
.tbl th, .tbl td{padding:.68rem 1rem; text-align:left; font-size:15.5px; border-bottom:1px solid var(--line)}
.tbl th{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; background:var(--cream-2)}
.tbl td:last-child{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.tbl__sub td{font-weight:600; background:rgba(94,188,216,.08)}
.tbl__tot td{font-weight:700; color:var(--brand); background:rgba(94,188,216,.16); border-bottom:0}

.spec{margin:1.6rem 0; display:grid; gap:0}
.spec > div{display:flex; justify-content:space-between; gap:18px; padding:.6rem 0; border-bottom:1px solid var(--line)}
.spec dt{font-size:13.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0}
.spec dd{margin:0; font-size:15.5px; font-weight:500; text-align:right}

.plan{margin:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.plan img{width:100%; border-radius:8px}
.plan figcaption{font-size:13.5px; color:var(--muted); margin-top:.7rem; text-align:center}

/* ---------------------------------------------------- recenzii */
.score{display:flex; align-items:center; gap:16px; margin:1.2rem 0 1.6rem}
.score__badge{
  width:64px; height:64px; flex:none;
  background:#003580; color:#fff; border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:24px; font-weight:700;
}
.score b{display:block; font-family:var(--serif); font-size:20px}
.score span{font-size:15px; color:var(--muted)}
.quote{
  margin:0; padding:24px 26px;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--sun);
  border-radius:var(--r); box-shadow:var(--shadow);
  max-width:72ch;
}
.quote p{margin:0 0 .9rem; font-size:17.5px; line-height:1.6}
.quote footer{font-size:14px; color:var(--muted)}

/* ---------------------------------------- întrebări frecvente */
.rev__links{display:flex; flex-wrap:wrap; gap:12px; margin:1.6rem 0 0}

.faq{margin-top:1.4rem; display:grid; gap:10px; max-width:80ch}
.faq__item{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:0 20px; box-shadow:0 1px 2px rgba(18,56,74,.05);
}
.faq__item summary{
  cursor:pointer; list-style:none; padding:16px 28px 16px 0; position:relative;
  font-family:var(--serif); font-size:18px; font-weight:600; color:var(--brand);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:""; position:absolute; right:4px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--wave); border-bottom:2px solid var(--wave);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq__item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__item summary:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:6px}
.faq__item p{margin:0 0 18px; color:var(--muted); font-size:16px; max-width:70ch}

/* ----------------------------------------------------- contact */
.contact{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,52px); align-items:center}
.contact__actions{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.contact__actions .btn{width:100%; justify-content:center}
.contact__hours{font-size:14px; color:rgba(255,255,255,.7); margin:.2rem 0 0}
@media (max-width:820px){ .contact{grid-template-columns:1fr} }

/* ------------------------------------------------------ footer */
.foot{background:#0C2C3B; color:rgba(255,255,255,.72); padding:28px 0; font-size:14px}
.foot__row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between}
.foot__row img{width:40px; height:40px; border-radius:9px; background:var(--cream); padding:3px}
.foot__row p{margin:0}
.foot__switch a{color:var(--wave); text-decoration:none}
.foot__switch a:hover{text-decoration:underline}

/* --------------------------------------------------- lightbox */
.lb{position:fixed; inset:0; z-index:110; background:rgba(7,30,42,.985); display:grid; place-items:center; padding:24px}
.lb__img{max-width:min(1200px,94vw); max-height:86vh; object-fit:contain; border-radius:8px}
.lb__close, .lb__nav{
  position:absolute; background:rgba(255,255,255,.12); color:#fff;
  border:0; border-radius:999px; cursor:pointer; line-height:1;
  transition:background .16s ease;
}
.lb__close:hover, .lb__nav:hover{background:rgba(255,255,255,.26)}
.lb__close{top:18px; right:18px; width:44px; height:44px; font-size:28px}
.lb__nav{top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:34px}
.lb__nav--prev{left:14px}
.lb__nav--next{right:14px}
.lb__count{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.75); font-size:14px}
.lb__caption{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:15px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; max-width:80vw; text-align:center;
}

/* --------------------------------------------------------- fab */
.fab{
  display:none;
  position:fixed; right:16px; bottom:16px; z-index:50;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#07321A;
  place-items:center;
  box-shadow:0 10px 26px -8px rgba(7,50,26,.7);
}
.fab svg{width:28px; height:28px}
@media (max-width:560px){ .fab{display:grid} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .waves__back, .waves__front{animation:none}
}