/* ============================================================
   ГРЯЗЕВЫЕ ВУЛКАНЫ АЗЕРБАЙДЖАНА — bespoke L3 thematic site.
   Theme: "Лунная глина" — clay + ochre + stone-grey (light, earthy).
   Display: Fraunces. Body: Manrope. HE: Frank Ruhl Libre + Heebo.
   ============================================================ */

:root{
  --bg:#e9e2d4;          /* clay bg */
  --bg-2:#ded4c0;        /* alt sections */
  --card:#f4eee0;        /* cards */
  --ink:#2c281f;         /* deep earth ink */
  --ink-soft:#615a4b;    /* muted */
  --line:#cbbfa4;        /* hairline */
  --line-soft:#d8cdb4;
  --ochre:#b07c3e;       /* ochre accent */
  --ochre-d:#8d6029;
  --stone:#6f6a5e;       /* stone grey */
  --stone-d:#545046;
  --ember:#c2522a;       /* warm ember (eruptions) */
  --dark:#211d16;        /* footer / bleed / jbar */
  --dark-2:#2b261d;
  --on-dark:#ece3d2;
  --r:12px; --r-lg:18px;
  --shadow:0 18px 48px rgba(44,40,31,.18);
  --shadow-s:0 8px 22px rgba(44,40,31,.12);
  --maxw:1180px; --header-h:64px;
  --f-display:"Fraunces",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(--bg); line-height:1.73; font-size:17px; overflow-x:hidden;
  background-image:radial-gradient(circle at 13% 6%, rgba(176,124,62,.07), transparent 42%), radial-gradient(circle at 87% 94%, rgba(111,106,94,.08), transparent 46%);
}
body::before{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>"); }
.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.1; color:var(--ink); letter-spacing:-.005em; }
::selection{ background:var(--ochre); color:#fff; }

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

/* ===== JBAR (marquee) ===== */
.jbar{ position:fixed; inset-block-start:0; inset-inline:0; z-index:80; height:38px; background:var(--dark); color:var(--on-dark);
  display:flex; align-items:center; gap:.6rem; padding-inline:1rem; font-size:.78rem; border-bottom:1px solid rgba(236,227,210,.1); }
.jbar-logo{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; letter-spacing:.02em; white-space:nowrap; flex:none; }
.jbar-logo b{ color:var(--ochre); }
.jbar-sep{ opacity:.4; flex:none; }
.jbar-marquee{ position:relative; overflow:hidden; flex:1; height:100%; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.jbar-track{ display:inline-flex; gap:3rem; white-space:nowrap; will-change:transform; animation:jbarscroll 42s linear infinite; }
.jbar-track span{ opacity:.85; }
.jbar-marquee:hover .jbar-track{ animation-play-state:paused; }
@keyframes jbarscroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
html[dir="rtl"] .jbar-track{ animation-name:jbarscroll-rtl; }
@keyframes jbarscroll-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* ===== HEADER ===== */
.site-header{ position:fixed; inset-block-start:38px; inset-inline:0; z-index:70; height:var(--header-h);
  background:rgba(233,226,212,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s, background .3s; }
.site-header.scrolled{ box-shadow:var(--shadow-s); background:rgba(233,226,212,.97); }
.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:.6rem; flex:none; }
.brand-mark{ width:28px; height:auto; flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--f-display); font-weight:600; font-size:1.24rem; color:var(--ink); letter-spacing:.005em; }
.brand-tag{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:.22rem; }
.site-nav{ display:flex; gap:.2rem; margin-inline-start:auto; flex-wrap:wrap; }
.site-nav a{ font-family:var(--f-body); font-weight:600; font-size:.92rem; color:var(--ink-soft); padding:.45rem .65rem; border-radius:8px; position:relative; transition:color .2s, background .2s; }
.site-nav a:hover{ color:var(--ink); background:rgba(176,124,62,.1); }
.site-nav a.active{ color:var(--ochre-d); }
.site-nav a.active::after{ content:""; position:absolute; inset-inline:.65rem; inset-block-end:.2rem; height:2px; border-radius:2px; background:var(--ember); }
.lang{ position:relative; flex:none; }
.lang-toggle{ display:inline-flex; align-items:center; gap:.4rem; background:var(--card); border:1px solid var(--line); border-radius:9px; 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(--card); border:1px solid var(--line); border-radius:12px; 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:8px; padding:.5rem .8rem; cursor:pointer; color:var(--ink-soft); font-family:var(--f-body); font-size:.9rem; }
.lang-opt:hover{ background:var(--bg-2); color:var(--ink); }
.lang-opt.is-active{ color:var(--ochre-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; border-radius: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:700; font-size:.94rem; letter-spacing:.01em;
  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(--ochre); color:#fff; box-shadow:var(--shadow-s); }
.btn-primary:hover{ background:var(--ochre-d); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ border-color:currentColor; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); transform:translateY(-2px); }

/* ===== HERO ===== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding:calc(var(--header-h) + 38px + 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(28,24,18,.28) 0%, rgba(28,24,18,.36) 42%, rgba(24,20,14,.88) 100%); }
.hero-inner{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; color:#fff; max-width:50rem; }
.hero .kicker{ color:#e0b878; } .hero .kicker::before{ background:#e0b878; }
.hero h1{ font-size:clamp(2.8rem,2rem+7vw,6.8rem); color:#fff; letter-spacing:-.01em; text-shadow:0 14px 50px rgba(0,0,0,.5); margin:.4rem 0 1rem; }
.hero-sub{ max-width:42rem; font-size:clamp(1.1rem,1rem+.7vw,1.45rem); color:rgba(255,255,255,.94); }
.hero-cta{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; }
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.6); } .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,.7); writing-mode:vertical-rl; }
html[dir="rtl"] .hero-scroll{ writing-mode:vertical-lr; }

/* ===== PAGE HERO ===== */
.page-hero{ position:relative; min-height:56vh; display:flex; align-items:flex-end; padding:calc(var(--header-h) + 38px + 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(28,24,18,.32) 0%, rgba(28,24,18,.42) 50%, rgba(24,20,14,.88) 100%); }
.page-hero .container{ position:relative; }
.page-hero .kicker{ justify-content:center; color:#e0b878; margin-bottom:1rem; } .page-hero .kicker::before{ background:#e0b878; }
.page-hero h1{ font-size:clamp(2.4rem,1.6rem+4vw,4.8rem); color:#fff; text-shadow:0 10px 36px rgba(0,0,0,.5); }
.page-hero p{ max-width:60ch; margin:1.1rem auto 0; color:rgba(255,255,255,.92); font-size:1.1rem; font-style:italic; }

/* ===== SECTIONS ===== */
.sec{ padding:clamp(3.4rem,7vw,6rem) 0; position:relative; z-index:2; }
.sec.alt{ background:var(--bg-2); }
.prose-narrow{ max-width:70ch; 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); }
.prose-narrow h2{ font-family:var(--f-display); font-size:clamp(2rem,1.4rem+2vw,2.9rem); margin:.4rem 0 1.1rem; }

/* alternating image / text rows */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; margin-bottom:clamp(2.6rem,5vw,4.4rem); }
.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); border:1px solid var(--line); }
.frow-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .7s var(--ease); }
.frow-media.wide img{ aspect-ratio:16/10; }
.frow-media.tall img{ aspect-ratio:3/4; }
.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.8rem,1.3rem+1.7vw,2.6rem); margin-bottom:1rem; }
.frow-copy p{ color:var(--ink-soft); margin-bottom:.9rem; }

/* image-card grid (named volcanoes / gallery) */
.bgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media(max-width:900px){ .bgrid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .bgrid{ grid-template-columns:1fr; } }
.bcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-s); transition:transform .35s var(--ease), box-shadow .35s; }
.bcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.bcard-img{ aspect-ratio:16/11; overflow:hidden; }
.bcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.bcard:hover .bcard-img img{ transform:scale(1.06); }
.bcard-body{ padding:1.3rem 1.4rem 1.5rem; }
.bcard .kt{ font-family:var(--f-body); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); display:block; margin-bottom:.35rem; }
.bcard h3{ font-size:1.4rem; color:var(--ink); margin-bottom:.4rem; }
.bcard p{ color:var(--ink-soft); font-size:.93rem; }

/* cards */
.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:900px){ .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, border-color .35s; }
.kcard::before{ content:""; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:3px; background:linear-gradient(90deg,var(--ochre),var(--ember)); transform:scaleX(0); transform-origin:inline-start; transition:transform .4s var(--ease); }
.kcard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--ochre); }
.kcard:hover::before{ transform:scaleX(1); }
.kcard .ci{ font-family:var(--f-display); font-size:1.9rem; font-weight:600; color:var(--ochre-d); 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:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:.5rem; }
.kcard p{ color:var(--ink-soft); font-size:.94rem; }

/* 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:3px solid var(--ochre); }
.statc b{ display:block; font-family:var(--f-display); font-size:clamp(2.1rem,4.5vw,3.2rem); font-weight:600; color:var(--ochre-d); line-height:1.02; }
.statc span{ font-size:.9rem; color:var(--ink-soft); }

/* quote */
.quote{ background:var(--dark); color:#fff; padding:clamp(3.4rem,7vw,5.5rem) 0; }
.quote blockquote{ font-family:var(--f-display); font-weight:500; font-size:clamp(1.7rem,1.2rem+2.4vw,3rem); line-height:1.24; color:#fff; text-align:center; max-width:50rem; margin-inline:auto; font-style:italic; }
.quote .qnote{ text-align:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ochre); margin-top:1.5rem; }

/* image bleed band */
.bleed-band{ position:relative; padding:clamp(3.6rem,7vw,6rem) 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(24,20,14,.9) 26%, rgba(24,20,14,.5)); }
.bleed-band.fire::after{ background:linear-gradient(100deg, rgba(24,15,8,.86) 26%, rgba(60,24,8,.4)); }
.bleed-band .box{ max-width:40rem; color:#fff; }
.bleed-band .kicker{ color:#e0b878; } .bleed-band .kicker::before{ background:#e0b878; }
.bleed-band.fire .kicker{ color:#f0a martian; } .bleed-band.fire .kicker{ color:#eaa15a; }
.bleed-band h2{ color:#fff; margin:.4rem 0 1rem; font-size:clamp(1.9rem,1.3rem+2vw,3rem); }
.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.34rem; font-weight:600; color:var(--ink); }
.acc-q::after{ content:"+"; color:var(--ember); font-size:1.6rem; 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:360px; }
.acc-a p{ color:var(--ink-soft); padding-bottom:1.3rem; }

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

/* ===== FOOTER ===== */
.site-footer{ background:var(--dark); color:var(--on-dark); padding:clamp(3rem,5vw,4.5rem) 0 2rem; position:relative; z-index:2; }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1.3fr; gap:2.4rem; }
.footer-brand .brand-name{ color:#fff; } .footer-brand .brand-tag{ color:rgba(236,227,210,.65); }
.footer-brand p{ color:rgba(236,227,210,.7); font-size:.9rem; max-width:34ch; }
.footer-col h4{ font-family:var(--f-display); font-size:1.2rem; color:var(--ochre); margin-bottom:1rem; }
.footer-col a{ display:block; color:rgba(236,227,210,.8); font-size:.93rem; 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(236,227,210,.14); font-size:.8rem; color:rgba(236,227,210,.5); }
@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:.1s } .reveal.d3{ transition-delay:.2s } .reveal.d4{ transition-delay:.3s }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .jbar-track{ animation:none; } *{ scroll-behavior:auto; } }

/* mobile nav */
@media(max-width:880px){
  .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(--bg); 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.05rem; padding:.7rem .4rem; }
}
@media(max-width:430px){ .jbar-sep, .jbar-marquee{ display:none; } .jbar{ justify-content:center; } }