/* ============================================================
   SEA BREEZE — presentational resort site (standalone).
   Theme: "Лазурный берег" — light, Caspian turquoise + white + gold.
   Display: Cormorant Garamond. Body: Manrope. HE: Frank Ruhl Libre + Heebo.
   ============================================================ */

:root{
  --sand:#f7f5ef;        /* page bg, light */
  --sand-2:#efe9dc;      /* alt sections */
  --white:#ffffff;
  --card:#ffffff;
  --ink:#16323b;         /* deep teal ink */
  --ink-soft:#5a6e76;    /* muted */
  --line:#e4ddcd;
  --line-soft:#efe9db;
  --azure:#1b9aae;       /* Caspian turquoise */
  --azure-d:#147487;
  --azure-l:#e3f3f4;
  --gold:#c2a14e;        /* gold accent */
  --gold-d:#9c7e30;
  --dark:#10262c;        /* footer / bleed / jbar */
  --r:10px; --r-lg:18px;
  --shadow:0 18px 48px rgba(20,60,70,.14);
  --shadow-s:0 8px 22px rgba(20,60,70,.1);
  --maxw:1200px; --header-h:66px;
  --f-display:"Cormorant Garamond",Georgia,serif;
  --f-body:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html[lang="he"]{ --f-display:"Frank Ruhl Libre",serif; --f-body:"Heebo",sans-serif; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--f-body); color:var(--ink); background:var(--sand); line-height:1.7; font-size:17px; overflow-x:hidden; }
.container{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.08; color:var(--ink); }
::selection{ background:var(--azure); color:#fff; }

.kicker{ font-family:var(--f-body); font-weight:700; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--azure-d); display:inline-flex; align-items:center; gap:.7rem; }
.kicker::before{ content:""; width:2rem; height:1px; background:var(--gold); display:inline-block; }
.section-head{ max-width:56rem; margin-bottom:2.6rem; }
.section-head h2{ font-size:clamp(2.1rem,1.4rem+2.6vw,3.4rem); margin-top:.5rem; }

/* ===== JBAR (slim static top strip) ===== */
.jbar{ background:var(--dark); color:#eaf5f5; height:38px; display:flex; align-items:center; justify-content:center; gap:.7rem; padding-inline:1rem; font-size:.78rem; letter-spacing:.02em; }
.jbar-logo{ font-family:var(--f-display); font-weight:700; letter-spacing:.06em; color:#fff; white-space:nowrap; }
.jbar-logo b{ color:var(--gold); font-weight:700; }
.jbar-sep{ color:var(--gold); }
.jbar-txt{ opacity:.86; }
@media(max-width:560px){ .jbar-txt{ display:none; } }

/* ===== HEADER ===== */
.site-header{ position:sticky; inset-block-start:0; z-index:70; height:var(--header-h);
  background:rgba(247,245,239,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s; }
.site-header.scrolled{ box-shadow:var(--shadow-s); background:rgba(247,245,239,.96); }
.header-inner{ height:100%; width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; display:flex; align-items:center; gap:1.2rem; }
.brand{ display:inline-flex; align-items:center; gap:.65rem; flex:none; }
.brand-mark{ width:34px; height:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--f-display); font-weight:700; font-size:1.4rem; color:var(--ink); letter-spacing:.04em; }
.brand-tag{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:.2rem; }
.site-nav{ display:flex; gap:.15rem; margin-inline-start:auto; flex-wrap:wrap; }
.site-nav a{ font-family:var(--f-body); font-weight:600; font-size:.9rem; color:var(--ink-soft); padding:.45rem .75rem; border-radius:7px; position:relative; transition:color .2s, background .2s; }
.site-nav a:hover{ color:var(--ink); background:var(--azure-l); }
.site-nav a.active{ color:var(--azure-d); }
.site-nav a.active::after{ content:""; position:absolute; inset-inline:.75rem; inset-block-end:.2rem; height:2px; background:var(--gold); }
.lang{ position:relative; flex:none; }
.lang-toggle{ display:inline-flex; align-items:center; gap:.4rem; background:var(--white); border:1px solid var(--line); border-radius:8px; padding:.4rem .6rem; cursor:pointer; color:var(--ink); font-family:var(--f-body); font-weight:600; font-size:.82rem; }
.lang-toggle svg{ width:16px; height:16px; }
.lang-menu{ position:absolute; inset-block-start:calc(100% + .4rem); inset-inline-end:0; background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:.3rem; display:none; min-width:7rem; z-index:5; }
.lang-menu.open{ display:block; }
.lang-opt{ display:block; width:100%; text-align:start; background:transparent; border:0; border-radius:7px; padding:.5rem .8rem; cursor:pointer; color:var(--ink-soft); font-family:var(--f-body); font-size:.88rem; }
.lang-opt:hover{ background:var(--azure-l); color:var(--ink); }
.lang-opt.is-active{ color:var(--azure-d); font-weight:700; }
.nav-burger{ display:none; width:42px; height:38px; background:transparent; border:0; cursor:pointer; position:relative; flex:none; }
.nav-burger span, .nav-burger::before, .nav-burger::after{ content:""; position:absolute; inset-inline:8px; height:2px; background:var(--ink); transition:.3s; }
.nav-burger span{ inset-block-start:18px; } .nav-burger::before{ inset-block-start:12px; } .nav-burger::after{ inset-block-start:24px; }
.nav-burger.open span{ opacity:0; } .nav-burger.open::before{ transform:translateY(6px) rotate(45deg); } .nav-burger.open::after{ transform:translateY(-6px) rotate(-45deg); }

/* ===== BUTTONS ===== */
.btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--f-body); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  padding:.85rem 1.7rem; border-radius:999px; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s, background .25s; border:2px solid transparent; }
.btn-primary{ background:var(--azure); color:#fff; box-shadow:var(--shadow-s); }
.btn-primary:hover{ background:var(--azure-d); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ border-color:currentColor; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }

/* ===== HERO ===== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:calc(var(--header-h) + 3rem) 0 clamp(3rem,7vw,6rem); overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-3; background:center/cover no-repeat; }
.hero::after{ content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, rgba(8,30,36,.15) 0%, rgba(8,30,36,.2) 40%, rgba(8,30,36,.78) 100%); }
.hero-inner{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; color:#fff; max-width:52rem; }
.hero .kicker{ color:#ffe9ad; } .hero .kicker::before{ background:#ffe9ad; }
.hero h1{ font-size:clamp(3.4rem,2rem+8vw,8rem); color:#fff; letter-spacing:.02em; text-shadow:0 14px 50px rgba(0,0,0,.4); margin:.4rem 0 1rem; line-height:1; }
.hero-sub{ max-width:44rem; font-size:clamp(1.15rem,1rem+.8vw,1.5rem); color:rgba(255,255,255,.95); font-weight:300; }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.hero .btn-ghost{ color:#fff; } .hero .btn-ghost:hover{ background:#fff; color:var(--ink); }
.hero-scroll{ position:absolute; inset-block-end:1.4rem; inset-inline-end:clamp(1rem,3vw,2.4rem); z-index:1; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.8); writing-mode:vertical-rl; }
html[dir="rtl"] .hero-scroll{ writing-mode:vertical-lr; }

/* ===== PAGE HERO ===== */
.page-hero{ position:relative; min-height:58vh; display:flex; align-items:flex-end; padding:calc(var(--header-h) + 3rem) 0 clamp(2.4rem,5vw,4rem); overflow:hidden; isolation:isolate; text-align:center; }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,30,36,.2) 0%, rgba(8,30,36,.3) 50%, rgba(8,30,36,.7) 100%); }
.page-hero .container{ position:relative; }
.page-hero .kicker{ justify-content:center; color:#ffe9ad; margin-bottom:1rem; } .page-hero .kicker::before{ background:#ffe9ad; }
.page-hero h1{ font-size:clamp(2.6rem,1.6rem+4.5vw,5.4rem); color:#fff; text-shadow:0 10px 36px rgba(0,0,0,.4); }
.page-hero p{ max-width:60ch; margin:1.1rem auto 0; color:rgba(255,255,255,.94); font-size:1.12rem; font-weight:300; }

/* ===== SECTIONS ===== */
.sec{ padding:clamp(3.4rem,7vw,6rem) 0; position:relative; z-index:2; }
.sec.alt{ background:var(--sand-2); }
.prose-narrow{ max-width:68ch; margin:0 auto; }
.prose-narrow.center{ text-align:center; }
.prose-narrow p{ color:var(--ink-soft); margin-bottom:1.1rem; }
.prose-narrow p strong{ color:var(--ink); }
.lead{ font-size:1.2rem; color:var(--ink); font-weight:300; }
.prose-narrow h2{ font-family:var(--f-display); font-size:clamp(2rem,1.3rem+2.4vw,3rem); margin:.3rem 0 1.1rem; }

/* alternating image / text rows */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:center; margin-bottom:clamp(2.6rem,5vw,4.6rem); }
.frow:last-child{ margin-bottom:0; }
.frow:nth-child(even) .frow-media{ order:2; }
@media(max-width:820px){ .frow{ grid-template-columns:1fr; } .frow:nth-child(even) .frow-media{ order:0; } }
.frow-media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.frow-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .7s var(--ease); }
.frow-media:hover img{ transform:scale(1.04); }
.frow-copy .kicker{ margin-bottom:.7rem; }
.frow-copy h2{ font-family:var(--f-display); font-size:clamp(1.9rem,1.2rem+1.9vw,2.7rem); margin-bottom:1rem; }
.frow-copy p{ color:var(--ink-soft); margin-bottom:.9rem; }

/* cards (catalog of buildings / amenities) */
.kgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.kgrid.two{ grid-template-columns:repeat(2,1fr); }
.kgrid.four{ grid-template-columns:repeat(4,1fr); }
@media(max-width:920px){ .kgrid, .kgrid.four{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .kgrid, .kgrid.two, .kgrid.four{ grid-template-columns:1fr; } }
.kcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.7rem; box-shadow:var(--shadow-s); position:relative; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s; }
.kcard::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:4px; background:linear-gradient(90deg,var(--azure),var(--gold)); transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease); }
.kcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.kcard:hover::before{ transform:scaleX(1); }
.kcard .ci{ font-family:var(--f-display); font-size:1.9rem; font-weight:700; color:var(--azure); line-height:1; margin-bottom:.4rem; }
.kcard h3{ font-size:1.4rem; color:var(--ink); margin-bottom:.4rem; }
.kcard .kt{ font-family:var(--f-body); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-d); display:block; margin-bottom:.5rem; }
.kcard p{ color:var(--ink-soft); font-size:.93rem; }

/* stat row */
.statrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
@media(max-width:720px){ .statrow{ grid-template-columns:1fr 1fr; } }
.statc{ text-align:center; padding-top:1.1rem; border-top:2px solid var(--azure); }
.statc b{ display:block; font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.8rem); font-weight:700; color:var(--azure-d); line-height:1; }
.statc span{ font-size:.88rem; color:var(--ink-soft); }

/* quote */
.quote{ background:var(--dark); color:#eaf5f5; padding:clamp(3.4rem,7vw,5.5rem) 0; }
.quote blockquote{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.8rem,1.1rem+2.6vw,3.2rem); line-height:1.22; color:#fff; text-align:center; max-width:52rem; margin-inline:auto; font-style:italic; }
.quote .qnote{ text-align:center; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:1.5rem; }

/* image bleed band */
.bleed-band{ position:relative; padding:clamp(4rem,8vw,7rem) 0; overflow:hidden; isolation:isolate; }
.bleed-bg{ position:absolute; inset:0; z-index:-2; background:center/cover no-repeat; }
.bleed-band::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(8,30,36,.86) 26%, rgba(8,30,36,.45)); }
.bleed-band .box{ max-width:40rem; color:#fff; }
.bleed-band .kicker{ color:#ffe9ad; } .bleed-band .kicker::before{ background:#ffe9ad; }
.bleed-band h2{ color:#fff; margin:.5rem 0 1rem; font-size:clamp(2rem,1.3rem+2.2vw,3.2rem); }
.bleed-band p{ color:rgba(255,255,255,.92); margin-bottom:1.6rem; }

/* FAQ accordion */
.acc{ max-width:820px; margin:1.6rem auto 0; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{ width:100%; text-align:start; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem 0; background:none; border:0; cursor:pointer; font-family:var(--f-display); font-size:1.4rem; font-weight:600; color:var(--ink); }
.acc-q::after{ content:"+"; color:var(--azure); font-size:1.5rem; flex:none; transition:transform .3s; }
.acc-item.open .acc-q::after{ transform:rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc-item.open .acc-a{ max-height:340px; }
.acc-a p{ color:var(--ink-soft); padding-bottom:1.3rem; }

.note-line{ font-size:.88rem; line-height:1.7; color:var(--ink-soft); border-inline-start:3px solid var(--gold); background:var(--sand-2); border-radius:var(--r); padding:1.1rem 1.3rem; max-width:62rem; }

/* ===== FOOTER ===== */
.site-footer{ background:var(--dark); color:#cfe2e3; padding:clamp(3rem,5vw,4.5rem) 0 2rem; position:relative; z-index:2; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:2.4rem; }
.footer-brand .brand-name{ color:#fff; } .footer-brand .brand-tag{ color:rgba(207,226,227,.6); }
.footer-brand p{ color:rgba(207,226,227,.7); font-size:.9rem; max-width:34ch; }
.footer-col h4{ font-family:var(--f-display); font-size:1.2rem; color:var(--gold); margin-bottom:1rem; }
.footer-col a{ display:block; color:rgba(207,226,227,.82); font-size:.92rem; padding:.28rem 0; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(207,226,227,.15); font-size:.8rem; color:rgba(207,226,227,.55); }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* reveal */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d2{ transition-delay:.08s } .reveal.d3{ transition-delay:.16s } .reveal.d4{ transition-delay:.24s }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } *{ scroll-behavior:auto; } }

/* mobile nav */
@media(max-width:900px){
  .nav-burger{ display:block; margin-inline-start:auto; }
  .lang{ order:-1; }
  .site-nav{ position:fixed; inset-block-start:calc(38px + var(--header-h)); inset-inline:0; flex-direction:column; gap:.2rem; background:var(--sand); border-bottom:1px solid var(--line); padding:1rem clamp(1rem,3vw,2rem); margin:0; box-shadow:var(--shadow); clip-path:inset(0 0 100% 0); transition:clip-path .35s var(--ease); }
  .site-nav.open{ clip-path:inset(0 0 0 0); }
  .site-nav a{ font-size:1.1rem; padding:.7rem .4rem; }
}