/* popki.vip — champagne gold on charcoal.
   Written with CSS logical properties throughout, so the Hebrew (RTL) side of
   the site renders from this same file with no direction-specific overrides. */

:root{
  --ink:        #0f0e0d;
  --ink-2:      #16150f;
  --panel:      #1a1813;
  --panel-2:    #211e18;
  --line:       #2e2a22;
  --line-soft:  #24211b;

  --gold:       #c9a961;
  --gold-lt:    #e8cf95;
  --gold-dp:    #8d7338;
  --gold-glow:  rgba(201,169,97,.14);

  --fg:         #f3efe7;
  --fg-mut:     #a9a49a;
  --fg-dim:     #7d786f;

  --serif: "Cormorant", "Frank Ruhl", Georgia, "Times New Roman", serif;
  --sans:  "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --wrap: 1180px;
  --gap: clamp(16px, 2.4vw, 28px);
  --sec: clamp(56px, 8vw, 108px);
  --r: 3px;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0; background:var(--ink); color:var(--fg);
  font:400 17px/1.72 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[dir="rtl"] body{font-size:17px; line-height:1.8}

img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--gold-lt)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}
.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:99;
  background:var(--gold); color:var(--ink); padding:12px 20px; font-weight:600}
.skip:focus{inset-inline-start:0}

/* ---------------------------------------------------------- typography -- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.14;
  margin:0 0 .5em; letter-spacing:.005em; text-wrap:balance}
h1{font-size:clamp(2.15rem,5.4vw,4rem)}
h2{font-size:clamp(1.72rem,3.6vw,2.75rem)}
h3{font-size:clamp(1.24rem,2.1vw,1.6rem)}
h4{font-size:1.1rem; font-family:var(--sans); font-weight:600; letter-spacing:.01em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{line-height:1.28}
p{margin:0 0 1.1em; text-wrap:pretty}
p:last-child{margin-bottom:0}

.eyebrow{
  font:600 .72rem/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
[dir="rtl"] .eyebrow{letter-spacing:.1em}
.eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(to right,var(--gold-dp),transparent)}
[dir="rtl"] .eyebrow::after{background:linear-gradient(to left,var(--gold-dp),transparent)}
.eyebrow.c{justify-content:center}
.eyebrow.c::after{display:none}
.eyebrow.c::before{content:"◆"; color:var(--gold-dp); font-size:.6rem}

.lead{font-size:clamp(1.05rem,1.7vw,1.22rem); color:var(--fg-mut); max-width:64ch}
.muted{color:var(--fg-mut)}
.center{text-align:center}
.gold{color:var(--gold)}

/* --------------------------------------------------------------- rules -- */
.rule{height:1px; background:linear-gradient(to right,transparent,var(--line),transparent); border:0; margin:0}

/* -------------------------------------------------------------- header -- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(15,14,13,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
.hdr-in{display:flex; align-items:center; gap:clamp(14px,2.6vw,34px); min-height:70px}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0}
.brand img{width:38px; height:auto}
.brand-tx{display:flex; flex-direction:column; line-height:1}
.brand-nm{font-family:var(--serif); font-size:1.32rem; font-weight:600;
  color:var(--gold); letter-spacing:.06em}
.brand-sb{font-size:.62rem; color:var(--fg-dim); letter-spacing:.09em; margin-top:4px}
[dir="rtl"] .brand-sb{letter-spacing:0}

.nav{display:flex; gap:clamp(10px,1.7vw,26px); margin-inline-start:auto; align-items:center}
.nav a{color:var(--fg-mut); font-size:.87rem; font-weight:500; white-space:nowrap;
  padding:8px 0; position:relative}
.nav a:hover,.nav a[aria-current]{color:var(--gold)}
.nav a[aria-current]::after{content:""; position:absolute; inset-inline:0; bottom:2px;
  height:1px; background:var(--gold)}

.hdr-cta{display:flex; align-items:center; gap:10px; margin-inline-start:auto}
.lang{color:var(--fg-dim); font-size:.8rem; border:1px solid var(--line);
  padding:7px 12px; border-radius:var(--r)}
.lang:hover{border-color:var(--gold-dp); color:var(--gold)}

.burger{display:none; background:none; border:1px solid var(--line); color:var(--gold);
  width:42px; height:38px; border-radius:var(--r); cursor:pointer; padding:0}
.burger span{display:block; width:18px; height:1.5px; background:currentColor; margin:3.5px auto}

@media (max-width:980px){
  .nav{display:none; position:absolute; inset-inline:0; top:100%; flex-direction:column;
    align-items:stretch; background:var(--ink-2); border-block:1px solid var(--line);
    padding:8px 0; gap:0}
  .nav.open{display:flex}
  .nav a{padding:13px clamp(16px,4vw,32px); font-size:1rem; border-bottom:1px solid var(--line-soft)}
  .nav a:last-child{border-bottom:0}
  .burger{display:block; order:9}
  .hdr-cta{gap:8px}
}
/* The header has five things competing for a 375px row: mark, wordmark,
   subtitle, language pill, phone button and burger. Below 620px the phone and
   language pill are dropped from the bar - the sticky bottom bar already
   carries Call/WhatsApp, and the language switch moves into the nav drawer -
   so nothing has to wrap and the row stops overflowing. */
.nav .nav-lang{display:none}
@media (max-width:620px){
  .hdr-in{min-height:60px; gap:10px}
  .hdr-cta .lang,
  .hdr-cta > .btn{display:none}
  .nav .nav-lang{display:block; color:var(--gold)}
  .brand img{width:32px}
  .brand-nm{font-size:1.12rem; letter-spacing:.04em}
  .brand-sb{font-size:.58rem}
  .brand-tx{min-width:0}
  .brand-nm,.brand-sb{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}
@media (max-width:360px){
  .brand-sb{display:none}
}

/* --------------------------------------------------------------- button -- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:600 .93rem/1 var(--sans); padding:15px 28px; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease}
.btn:active{transform:translateY(1px)}
.btn-g{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dp));
  color:#17140d; font-weight:700}
.btn-g:hover{color:#17140d; filter:brightness(1.08)}
.btn-o{border-color:var(--gold-dp); color:var(--gold); background:transparent}
.btn-o:hover{border-color:var(--gold); background:var(--gold-glow); color:var(--gold-lt)}
.btn-sm{padding:11px 18px; font-size:.84rem}
.btns{display:flex; flex-wrap:wrap; gap:12px}
.btns.c{justify-content:center}

/* ----------------------------------------------------------------- hero -- */
.hero{position:relative; padding-block:clamp(64px,11vw,132px) clamp(52px,8vw,96px);
  overflow:hidden; border-bottom:1px solid var(--line-soft)}
.hero::before{content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(201,169,97,.13), transparent 62%),
    radial-gradient(ellipse 60% 50% at 8% 92%, rgba(201,169,97,.07), transparent 60%)}
.hero > *{position:relative; z-index:1}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:34px}}
.hero h1{margin-bottom:.34em}
.hero h1 em{font-style:normal; color:var(--gold);
  background:linear-gradient(120deg,var(--gold-lt),var(--gold) 60%,var(--gold-dp));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-p{font-size:clamp(1.03rem,1.7vw,1.19rem); color:var(--fg-mut); max-width:56ch; margin-bottom:30px}
.hero-art{position:relative; aspect-ratio:4/5; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.hero-art img{width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.04)}
.hero-art::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,14,13,.78),transparent 52%)}
@media (max-width:900px){.hero-art{aspect-ratio:5/4; max-height:380px}}

.trust{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:28px;
  padding-top:24px; border-top:1px solid var(--line-soft)}
.trust li{list-style:none; font-size:.86rem; color:var(--fg-mut);
  display:flex; align-items:center; gap:8px}
.trust li::before{content:"✦"; color:var(--gold); font-size:.72rem}
.trust{margin:28px 0 0; padding-inline:0}

/* -------------------------------------------------------------- section -- */
.sec{padding-block:var(--sec)}
.sec-alt{background:var(--ink-2); border-block:1px solid var(--line-soft)}
.sec-hd{max-width:70ch; margin-bottom:clamp(30px,4vw,52px)}
.sec-hd.c{margin-inline:auto; text-align:center}

/* ---------------------------------------------------------------- cards -- */
.grid{display:grid; gap:var(--gap)}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:var(--gold-dp); transform:translateY(-3px)}
.card-img{aspect-ratio:4/3; overflow:hidden; background:var(--panel-2)}
.card-img img{width:100%; height:100%; object-fit:cover; filter:saturate(.85)}
.card-bd{padding:24px; display:flex; flex-direction:column; flex:1; gap:10px}
.card-bd h3{margin:0; font-size:1.28rem}
.card-bd h3 a{color:var(--fg)}
.card-bd h3 a:hover{color:var(--gold)}
.card-bd p{margin:0; font-size:.93rem; color:var(--fg-mut); flex:1}
.card-mt{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.78rem; color:var(--fg-dim);
  padding-top:12px; margin-top:auto; border-top:1px solid var(--line-soft)}
.card-mt b{color:var(--gold); font-weight:600}

/* format card: no photo, the type does the work */
.fcard{background:linear-gradient(160deg,var(--panel),var(--ink-2));
  border:1px solid var(--line); border-radius:var(--r); padding:30px 26px;
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease}
.fcard:hover{border-color:var(--gold-dp); transform:translateY(-3px)}
.fcard::before{content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(to right,transparent,var(--gold-dp),transparent); opacity:.7}
.fcard .num{font-family:var(--serif); font-size:2.3rem; color:var(--gold-dp); line-height:1; opacity:.5}
.fcard h3{margin:0; font-size:1.36rem}
.fcard h3 a{color:var(--fg)}
.fcard h3 a:hover{color:var(--gold)}
.fcard p{margin:0; color:var(--fg-mut); font-size:.93rem}
.fcard .go{margin-top:auto; padding-top:14px; font-size:.83rem; font-weight:600;
  color:var(--gold); letter-spacing:.04em}

/* ------------------------------------------------------------ city list -- */
.pills{display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0}
.pills a{display:inline-block; padding:9px 17px; border:1px solid var(--line);
  border-radius:var(--r); font-size:.88rem; color:var(--fg-mut); background:var(--panel)}
.pills a:hover{border-color:var(--gold-dp); color:var(--gold); background:var(--panel-2)}

.reg{margin-bottom:34px}
.reg h3{font-size:1.05rem; font-family:var(--sans); font-weight:600; color:var(--gold);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; font-size:.8rem}

/* -------------------------------------------------------------- prose --- */
.prose{max-width:72ch; font-size:1.03rem}
.prose h2{margin-top:1.9em; padding-top:.2em}
.prose h3{margin-top:1.5em; font-size:1.25rem}
.prose ul,.prose ol{padding-inline-start:1.35em; margin:0 0 1.2em}
.prose li{margin-bottom:.55em}
.prose li::marker{color:var(--gold-dp)}
.prose strong{color:var(--fg); font-weight:600}
.prose blockquote{margin:1.6em 0; padding:20px 26px; background:var(--panel);
  border-inline-start:2px solid var(--gold-dp); border-radius:var(--r); color:var(--fg-mut)}
.prose blockquote p:last-child{margin:0}
.prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-dp)}

.tw{overflow-x:auto; margin:1.5em 0; border:1px solid var(--line); border-radius:var(--r)}
table{border-collapse:collapse; width:100%; font-size:.93rem; min-width:420px}
th,td{padding:13px 16px; text-align:start; border-bottom:1px solid var(--line-soft)}
th{background:var(--panel-2); color:var(--gold); font-weight:600; font-size:.83rem;
  letter-spacing:.06em; text-transform:uppercase}
tr:last-child td{border-bottom:0}

/* ---------------------------------------------------------------- steps -- */
.steps{list-style:none; padding:0; margin:0; counter-reset:s;
  display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.steps li{counter-increment:s; position:relative; padding:28px 24px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.steps li::before{content:"0" counter(s); font-family:var(--serif); font-size:1.9rem;
  color:var(--gold-dp); display:block; margin-bottom:10px; line-height:1}
.steps b{display:block; margin-bottom:7px; font-size:1.02rem; color:var(--fg)}
.steps p{margin:0; font-size:.9rem; color:var(--fg-mut)}

/* ------------------------------------------------------------------ faq -- */
.faq{max-width:80ch; margin-inline:auto}
.faq details{border-bottom:1px solid var(--line); background:transparent}
.faq summary{cursor:pointer; padding:22px 40px 22px 0; font-weight:600; font-size:1.02rem;
  list-style:none; position:relative; color:var(--fg)}
[dir="rtl"] .faq summary{padding:22px 0 22px 40px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; inset-inline-end:6px; top:19px;
  color:var(--gold); font-size:1.5rem; font-weight:300; line-height:1; transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--gold)}
.faq .ans{padding:0 40px 24px 0; color:var(--fg-mut); font-size:.97rem}
[dir="rtl"] .faq .ans{padding:0 0 24px 40px}
.faq .ans p:last-child{margin:0}

/* -------------------------------------------------------------- gallery -- */
.gal{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.gal img{aspect-ratio:3/4; object-fit:cover; width:100%; border-radius:var(--r);
  border:1px solid var(--line); filter:saturate(.8)}

/* -------------------------------------------------------------- reviews -- */
.revs{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rev{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
.rev .st{color:var(--gold); letter-spacing:.2em; font-size:.82rem; margin-bottom:12px}
.rev p{font-size:.95rem; color:var(--fg-mut); margin-bottom:16px}
.rev cite{font-style:normal; font-size:.85rem; color:var(--fg-dim)}
.rev cite b{color:var(--fg); font-weight:600; display:block; font-size:.92rem}

/* ------------------------------------------------------------------ cta -- */
.cta{background:linear-gradient(150deg,var(--panel),var(--ink) 70%);
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(34px,5.5vw,64px);
  text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,var(--gold-glow),transparent 70%)}
.cta > *{position:relative}
.cta h2{margin-bottom:.4em}
.cta p{color:var(--fg-mut); max-width:56ch; margin-inline:auto; margin-bottom:28px}
.cta .ph{display:block; font-family:var(--serif); font-size:clamp(1.6rem,3.4vw,2.3rem);
  color:var(--gold); letter-spacing:.04em; margin-bottom:22px; direction:ltr}

/* -------------------------------------------------------------- crumbs --- */
.crumbs{padding-block:16px; font-size:.82rem; color:var(--fg-dim); border-bottom:1px solid var(--line-soft)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0}
.crumbs li:not(:last-child)::after{content:"/"; margin-inline-start:8px; color:var(--line)}
.crumbs a{color:var(--fg-mut)}
.crumbs a:hover{color:var(--gold)}

/* ------------------------------------------------------------- page hd --- */
.phd{padding-block:clamp(40px,6vw,72px) clamp(26px,3.6vw,40px);
  border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden}
.phd::before{content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 70% at 78% 10%,var(--gold-glow),transparent 65%)}
.phd > *{position:relative}
.phd h1{margin-bottom:.3em}
.phd .lead{margin:0}

/* --------------------------------------------------------------- footer -- */
.ftr{background:var(--ink-2); border-top:1px solid var(--line); padding-block:clamp(44px,6vw,72px) 28px;
  margin-top:0; font-size:.9rem}
.ftr-grid{display:grid; gap:clamp(24px,4vw,44px);
  grid-template-columns:1.4fr repeat(3,minmax(140px,1fr))}
@media (max-width:860px){.ftr-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
.ftr h4{color:var(--gold); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:16px; font-weight:600}
[dir="rtl"] .ftr h4{letter-spacing:.06em}
.ftr ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.ftr a{color:var(--fg-mut)}
.ftr a:hover{color:var(--gold)}
.ftr-ab p{color:var(--fg-dim); font-size:.88rem; max-width:38ch}
.ftr-ph{font-family:var(--serif); font-size:1.5rem; color:var(--gold); direction:ltr;
  display:inline-block; margin-block:8px 4px}
.ftr-bot{margin-top:38px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
  color:var(--fg-dim); font-size:.8rem}
.ftr-bot .age{border:1px solid var(--gold-dp); color:var(--gold); padding:3px 9px;
  border-radius:var(--r); font-weight:600; font-size:.74rem}

/* --------------------------------------------------------- sticky bar --- */
.bar{position:fixed; inset-inline:0; bottom:0; z-index:60; display:none;
  background:rgba(22,21,15,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:9px clamp(10px,3vw,16px);
  gap:9px; padding-bottom:max(9px,env(safe-area-inset-bottom))}
.bar .btn{flex:1; padding:13px 10px; font-size:.87rem}
@media (max-width:760px){.bar{display:flex} body{padding-bottom:74px}}

/* ------------------------------------------------------------- utility --- */
.mt0{margin-top:0}
.stack > * + *{margin-top:var(--gap)}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}