/* =====================================================================
   Your Wine Journey — promo landing (prygody.in.ua)
   ===================================================================== */

:root{
  --maroon:#700018;
  --maroon-dark:#4f0011;
  --gold:#EA8700;
  --cream:#F4EAD1;
  --cream-soft:#FBF4E2;
  --ink:#3A2418;
  --ink-soft:#6b5240;

  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:'Jost', 'Segoe UI', sans-serif;

  --radius-pill:999px;
  --radius-lg:28px;
  --shadow:0 10px 30px rgba(112,0,24,.15);

  --container:clamp(320px, 92vw, 1800px);
  --header-h:clamp(72px, 8vw, 92px);
}

@media (min-width:2400px){ :root{ --container:2000px; } }
@media (min-width:3800px){ :root{ --container:2400px; } }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  /*
    One single instance of the texture, sized to cover just the current
    viewport (background-attachment:fixed) rather than the whole (very
    tall) document — that keeps it near its native 1920x1080 resolution
    at normal zoom instead of a huge upscale, and avoids visible tiling:
    the source image's edges aren't tonally matched (top is noticeably
    darker than the bottom, left darker than right), so background-repeat
    produced an ugly seam every 1080px. Kept off on touch/mobile below,
    where `fixed` compositing is unreliable — a tight native-size tile is
    the safer trade-off there since seams are far less noticeable on a
    narrow screen.
  */
  background-color:var(--cream);
  background-image:url('Resource/Back(full).png');
  background-repeat:repeat;
  background-size:1920px 1080px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:901px){
  body{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
  }
}
img{ max-width:100%; display:block; }
ul{ margin:0; }
a{ color:inherit; }
button{ font:inherit; }
h1,h2,h3,h4,p{ margin:0; }

.sprite-defs{ position:absolute; width:0; height:0; overflow:hidden; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--maroon); color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

section{ position:relative; padding-block:clamp(56px,8vw,120px); overflow:hidden; }
section[id], .site-footer{ scroll-margin-top:var(--header-h); }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px);
  position:relative;
  z-index:2;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:clamp(.7rem,.9vw,.8rem); font-weight:600; color:var(--gold); margin:0 0 10px;
}
.eyebrow--light{ color:var(--gold); }
.section-title{
  font-family:var(--font-display); font-weight:700; color:var(--maroon);
  font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.15; margin:0 0 18px;
}
.section-title--light{ color:#fff; }
.section-lead{
  font-size:clamp(.95rem,1.1vw,1.1rem); color:var(--ink-soft); max-width:62ch; line-height:1.65; margin:0;
}
.section-lead--light{ color:rgba(255,255,255,.78); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:600; font-size:clamp(.85rem,1vw,1rem);
  letter-spacing:.02em; padding:clamp(12px,1.4vw,16px) clamp(22px,2.6vw,34px);
  border-radius:var(--radius-pill); border:2px solid transparent; cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--maroon); border-color:var(--maroon); color:#fff; box-shadow:0 10px 26px rgba(112,0,24,.28); }
.btn-primary:hover{ background:var(--maroon-dark); border-color:var(--maroon-dark); }
.btn-outline{ background:transparent; border-color:var(--maroon); color:var(--maroon); }
.btn-outline:hover{ background:var(--maroon); color:#fff; }

/* ---------- decor: vine corners & side art ---------- */
.vine-corner{ position:absolute; width:clamp(70px,9vw,130px); height:auto; opacity:.85; z-index:1; pointer-events:none; }
.vine-corner--tl{ top:18px; left:12px; }
.vine-corner--br{ bottom:18px; right:12px; transform:scale(-1); }

/*
  Flush against the section's edge, full section height, width auto —
  for a replaced element (img) with height set and width:auto, the browser
  derives width from the image's own intrinsic ratio, so nothing gets
  cropped by object-fit (an explicit aspect-ratio property here fought
  with the image's intrinsic size instead of cooperating with it, so it's
  deliberately left off).
*/
.side-art{
  position:absolute; top:0; height:100%; right:0;
  width:auto;
  object-fit:cover; object-position:top center;
  opacity:.9; pointer-events:none; z-index:0; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to left, black 55%, transparent 100%);
  mask-image:linear-gradient(to left, black 55%, transparent 100%);
}
.side-art--how{
  /*
    Decor2.svg is already drawn facing the right way for the left side —
    no transform:scaleX(-1) here. Just re-anchor to the left edge and
    flip the fade direction so it stays opaque at the true left edge and
    fades out approaching the text (the base .side-art rule fades the
    opposite way, tuned for its right-anchored placement).
  */
  left:0; right:auto;
  -webkit-mask-image:linear-gradient(to right, black 55%, transparent 100%);
  mask-image:linear-gradient(to right, black 55%, transparent 100%);
}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-header{
  position:sticky; top:0; z-index:80; background:var(--maroon);
  box-shadow:0 2px 14px rgba(0,0,0,0);
  transition:box-shadow .25s ease;
}
.site-header.is-scrolled{ box-shadow:0 2px 14px rgba(0,0,0,.18); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block:clamp(12px,1.6vw,18px);
}
.logo{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,1.4vw,1.3rem);
}
.logo-icon{ filter:brightness(0) invert(1); }
.logo-icon--light{ filter:brightness(0) invert(1); opacity:.9; }

.main-nav{ display:flex; align-items:center; gap:clamp(20px,2vw,40px); }
.main-nav ul{
  display:flex; gap:clamp(16px,1.8vw,32px); list-style:none; padding:0; margin:0;
}
.main-nav ul a{
  text-decoration:none; color:#f2dede; font-size:clamp(.8rem,.95vw,.92rem);
  text-transform:uppercase; letter-spacing:.06em; font-weight:500; transition:color .2s ease;
}
.main-nav ul a:hover{ color:#fff; }
.nav-cta{ display:none; }

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:transparent; border:none; cursor:pointer; padding:0;
}
.burger span{ display:block; width:24px; height:2px; background:#fff; transition:transform .3s ease, opacity .3s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{
  position:fixed; inset:0; background:rgba(20,8,4,.5); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.nav-overlay.is-visible{ opacity:1; pointer-events:auto; }

@media (max-width:880px){
  .header-cta{ display:none; }
  .burger{ display:flex; }
  .main-nav{
    position:fixed; top:0; right:0; height:100dvh; width:min(340px,86vw);
    background:var(--maroon-dark); transform:translateX(100%);
    transition:transform .35s ease; z-index:75; padding:104px 30px 40px;
    flex-direction:column; align-items:flex-start; gap:32px; overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:22px; }
  .main-nav ul a{ font-size:1.05rem; }
  .nav-cta{ display:inline-flex; }
}

/* =====================================================================
   HERO
   ===================================================================== */
   .hero {
    position: relative;
    display: flex;
    align-items: center;
    padding-block: clamp(48px, 7vw, 96px);
    min-height: min(calc(100vh - var(--header-h)), 900px);
    /* Если на hero висит background-color/background-image, 
       mix-blend-mode начинает работать прямо внутри него! */
    background-color: transparent; 
  }
  
  .hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  
  .hero-content {
    max-width: 640px;
  }
  
  .sunburst {
    width: clamp(110px, 11vw, 180px);
    height: auto;
    display: block;
    margin-bottom: clamp(6px, 1vw, 14px);
  }
  .sun-rays path {
    opacity: .85;
  }
  
  .hero-title {
    width: clamp(260px, 32vw, 540px);
    height: auto;
    margin-bottom: clamp(20px, 2.6vw, 32px);
  }
  
  .hero-text {
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 46ch;
    margin: 0 0 clamp(26px, 3vw, 38px);
  }
  
  .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  
  /* 
     ГЛАВНЫЙ ФИКС:
     Делаем .hero-art фоновым слоем с z-index: 0, 
     а изоляцию вешаем на сам .hero, чтобы multiply применялся к фону hero/body
  */
  .hero-art {
    position: absolute;
    top: clamp(0px, 2vw, 0px);
    right: clamp(0px, 2vw, 0px);
    bottom: clamp(0px, 2vw, 0px);
    height: auto;
    width: 60%;
    pointer-events: none;
    /* no z-index here on purpose: it would create a stacking context that
       blocks mix-blend-mode on the children below from seeing the page
       background behind it. .hero-inner's own z-index:2 already keeps the
       text on top regardless of DOM order, so this isn't needed. */
  }
  
  .hero-art-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: right center;
    mix-blend-mode: multiply;
    /* Резервная маска, если браузер блокирует blend-mode: растворяет левый край */
    -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
    mask-image: linear-gradient(to left, black 70%, transparent 100%);
  }
  
  .hero-stamp {
    position: absolute;
    left: 10%;
    top: 12%;
    width: clamp(140px, 15vw, 240px);
    transform: rotate(-6deg);
    mix-blend-mode: multiply;
    z-index: 2;
  }
  
  /* =====================================================================
     АДАПТИВ (Мобильные и планшеты)
     ===================================================================== */
  @media (max-width: 1080px) {
    .hero {
      min-height: auto;
    }
  
    .hero-art {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  
    .hero-art-img {
      object-position: right center;
      /* На мобилке делаем прозрачнее, чтобы текст читался */
      opacity: 0.4;
    }
  
    .hero-stamp {
      left: auto;
      right: 5%;
      top: 5%;
      width: clamp(90px, 20vw, 130px);
    }
  
    .side-art {
      display: none;
    }
  }
  
  @media (max-width: 480px) {
    .hero-actions {
      flex-direction: column;
      align-items: stretch;
    }
  }
/* =====================================================================
   ABOUT + BRANDS
   ===================================================================== */
.about-inner{ max-width:900px; }
.brands{ margin-top:clamp(36px,5vw,56px); max-width:900px; margin-inline:auto; text-align:center; }
.brands-label{
  font-family:var(--font-display); font-weight:700; color:var(--maroon);
  font-size:clamp(1.5rem,2.4vw,2.1rem); margin:0 0 10px;
}
.brands-sublead{
  font-size:clamp(.9rem,1vw,1rem); color:var(--ink-soft); margin:0 auto 18px; max-width:52ch;
}
.brands-divider{
  display:block; width:64px; height:3px; margin:0 auto clamp(28px,4vw,44px);
  background:var(--gold); border-radius:2px;
}
.brand-circles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(28px,4vw,44px) clamp(16px,2.4vw,28px); list-style:none; padding:0; margin:0;
}
.brand-circle{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.brand-circle img{
  width:clamp(104px,11vw,144px); aspect-ratio:1; border-radius:50%; background:var(--cream-soft);
  border:2px solid var(--maroon); object-fit:contain; padding:clamp(16px,1.7vw,22px); box-shadow:var(--shadow);
  transition:transform .25s ease;
}
.brand-circle:hover img{ transform:translateY(-4px) scale(1.03); }
.brand-name{
  font-family:var(--font-display); font-weight:700; color:var(--maroon);
  font-size:clamp(1rem,1.2vw,1.15rem); margin:0; line-height:1.3;
}
.brand-desc{
  font-family:var(--font-sans); font-size:clamp(.8rem,.95vw,.9rem); color:var(--ink-soft);
  line-height:1.55; margin:0; max-width:30ch;
}
.brand-circle span{
  font-family:var(--font-sans); font-weight:600; letter-spacing:.02em;
  font-size:clamp(.62rem,.9vw,.76rem); color:var(--maroon); line-height:1.2;
}

/* =====================================================================
   HOW TO PARTICIPATE
   ===================================================================== */
.how-inner{ max-width:1080px; }
.how-layout{
  display:flex; gap:clamp(32px,5vw,80px); align-items:center; flex-wrap:wrap;
  margin-top:clamp(30px,4vw,56px);
}
.passport-wrap{
  flex:0 1 clamp(180px,22vw,320px); width:clamp(180px,22vw,320px);
  margin-inline:auto;
}
.passport-art{
  width:100%; display:block;
  filter:drop-shadow(0 20px 40px rgba(112,0,24,.18));
}
.steps{ flex:1 1 380px; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:clamp(20px,2.6vw,30px); }
.step{ display:flex; gap:16px; align-items:flex-start; }
.step-num{
  font-family:var(--font-display); font-size:clamp(1.4rem,2vw,1.9rem); font-weight:700;
  color:var(--gold); line-height:1; flex-shrink:0; min-width:2.2ch;
}
.step h3{ font-family:var(--font-display); font-size:clamp(1.05rem,1.4vw,1.3rem); color:var(--maroon); margin:0 0 4px; }
.step p{ margin:0; color:var(--ink-soft); font-size:clamp(.9rem,1vw,1rem); line-height:1.55; }
.step--reward .reward-emblem{ width:clamp(76px,8vw,110px); margin-top:12px; }

/* =====================================================================
   STORES
   ===================================================================== */
.stores-inner{ max-width:1080px; }
.store-grid{
  list-style:none; padding:0; margin-top:clamp(30px,4vw,48px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(18px,2.4vw,28px);
}
.store-card{
  background:var(--cream-soft); border:1px solid rgba(112,0,24,.15); border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,32px); box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.store-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(112,0,24,.2); }
.store-icon svg{ width:32px; height:32px; fill:var(--maroon); }
.store-card h3{ font-family:var(--font-display); color:var(--maroon); margin:14px 0 4px; font-size:1.1rem; }
.store-card p{ margin:0 0 14px; color:var(--ink-soft); font-size:.92rem; }
.store-link{ color:var(--maroon); font-weight:600; text-decoration:none; font-size:.9rem; }
.store-link:hover{ text-decoration:underline; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-inner{ max-width:820px; }
.accordion{ margin-top:clamp(24px,3vw,40px); display:flex; flex-direction:column; gap:4px; }
.accordion-item{ border-bottom:1px solid rgba(112,0,24,.2); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:none; border:none; padding:18px 4px; font-family:var(--font-display);
  font-size:clamp(1rem,1.3vw,1.15rem); color:var(--maroon); cursor:pointer; text-align:left;
}
.accordion-icon{ width:20px; height:20px; position:relative; flex-shrink:0; }
.accordion-icon::before, .accordion-icon::after{
  content:""; position:absolute; background:var(--maroon); top:50%; left:50%; transform:translate(-50%,-50%);
}
.accordion-icon::before{ width:14px; height:2px; }
.accordion-icon::after{ width:2px; height:14px; transition:transform .3s ease; }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordion-panel p{ margin:0 0 18px; color:var(--ink-soft); padding-right:30px; line-height:1.6; }

/* =====================================================================
   RULES
   ===================================================================== */
.rules-inner{ display:flex; gap:clamp(32px,5vw,72px); flex-wrap:wrap; align-items:flex-start; max-width:1080px; }
.rules-text{ flex:1 1 380px; }
.rules-list{
  margin-top:clamp(16px,2vw,24px); padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:12px;
}
.rules-list li{ position:relative; padding-left:28px; color:var(--ink-soft); line-height:1.55; }
.rules-list li::before{
  content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--gold);
}
.rules-qr{ flex:0 0 220px; text-align:center; margin-inline:auto; }
.rules-qr-card{ background:var(--maroon); border-radius:24px; padding:22px; box-shadow:var(--shadow); }
.rules-qr-card img{ width:100%; height:auto; }
.rules-qr p{ margin:14px 0 6px; color:var(--ink-soft); font-size:.9rem; }
.link-underline{ color:var(--maroon); font-weight:600; text-decoration:underline; text-underline-offset:4px; }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.final-cta{ background:var(--maroon); color:var(--cream); text-align:center; padding-block:clamp(48px,7vw,96px); }
.final-cta-inner{ max-width:640px; }
.final-cta h2{ font-family:var(--font-display); font-size:clamp(1.6rem,3.4vw,2.6rem); margin:0 0 12px; color:#fff; }
.final-cta p{ margin:0 0 28px; opacity:.85; }
.final-cta .btn-primary{ background:var(--cream); color:var(--maroon); box-shadow:0 10px 26px rgba(0,0,0,.25); }
.final-cta .btn-primary:hover{ background:#fff; }

/* =====================================================================
   FOOTER / MAP
   ===================================================================== */
.site-footer{ background:var(--maroon-dark); color:var(--cream); padding-top:clamp(48px,6vw,80px); }

.footer-map-wrap{
  position:relative; margin-top:clamp(24px,3vw,40px);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:28px; padding:clamp(16px,2.4vw,32px);
}
.footer-map{ width:100%; height:auto; display:block; overflow:visible; }
.map-route{ fill:none; stroke:var(--gold); stroke-width:3; stroke-dasharray:1 14; stroke-linecap:round; opacity:.8; }

.map-pin{ cursor:pointer; }
.map-pin .pin-outline{ fill:var(--cream-soft); stroke:var(--maroon-dark); stroke-width:4; transition:stroke .25s ease; }
.map-pin .pin-dot{ fill:var(--maroon-dark); transition:opacity .25s ease; }

/*
  Wine-fill effect: a wavy liquid body rises from below the pin up to its
  vertical midpoint (50%) on hover, plus a thin "pour" stream from the top
  opening down to that same level. The wave shape itself is a repeating
  path (#pin-wave in the sprite defs) that scrolls sideways on a loop for
  a moving-liquid look; the outer group only handles the rise/fall.
*/
.pin-liquid{
  transform-box:fill-box; transform-origin:center; transform:translateY(60px);
  transition:transform .85s cubic-bezier(.3,1.2,.36,1);
}
/*
  .pin-body is a plain, always-solid rect that sits under the wave and
  never animates — it's what's left visible once the wave layer on top of
  it fades out, i.e. the "calm flat surface" the wave settles into.
*/
.pin-body{ fill:#8C1030; }
.pin-wave-shape{
  fill:#8C1030; opacity:1;
  transition:opacity .35s ease;
}
.map-pin:hover .pin-wave-shape,
.map-pin:focus-visible .pin-wave-shape{
  opacity:0;
  transition:opacity .55s ease-in-out .8s;
}
/* tapered, gently wobbly stream instead of a straight bar, with a glossy
   cylindrical-light gradient (dark wine at the edges, a bright core down
   the middle) so it reads as liquid rather than a flat shape */
.pin-pour-shape{ fill:url(#pin-wine-grad); }
.pin-pour{
  transform-box:fill-box; transform-origin:top; transform:scaleY(0);
  clip-path:inset(0% 0 0 0);
}
.map-pin:hover .pin-liquid,
.map-pin:focus-visible .pin-liquid{ transform:translateY(5px); }
/*
  The pour stream shouldn't just stay stuck there forever once the glass
  is full — it grows in quickly (scaleY, anchored at the top opening),
  holds while the liquid is still rising, then retracts once it's done —
  a clip-path inset animated from the top down "erases" it top-to-bottom
  (the tap shutting off and the last of the stream draining away),
  rather than the whole stream fading out evenly all at once.
*/
.map-pin:hover .pin-pour,
.map-pin:focus-visible .pin-pour{ animation:pin-pour-stream 1.3s ease-out forwards; }
@keyframes pin-pour-stream{
  0%{ transform:scaleY(0); clip-path:inset(0% 0 0 0); }
  22%{ transform:scaleY(1); clip-path:inset(0% 0 0 0); }
  60%{ transform:scaleY(1); clip-path:inset(0% 0 0 0); }
  100%{ transform:scaleY(1); clip-path:inset(100% 0 0 0); }
}
/* a quick splash burst right where the stream lands (~.22 x 1.3s ≈ .28s
   in), independent of the stream's own scale/clip so it doesn't get
   stretched along with it — just a fast pop and fade */
.pin-splash{
  fill:#C23A5C; opacity:0;
  transform-box:fill-box; transform-origin:center; transform:scale(.4);
}
.map-pin:hover .pin-splash,
.map-pin:focus-visible .pin-splash{ animation:pin-splash-pop .6s ease-out .28s forwards; }
@keyframes pin-splash-pop{
  0%{ opacity:0; transform:scale(.4); }
  35%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.3); }
}
/*
  Runs only while the liquid is actually rising (matches .pin-liquid's
  .85s transition — 2 laps of a 24-unit-wide wave at .42s/lap ≈ .84s),
  then stops dead on the last frame (animation-fill-mode:forwards) instead
  of looping forever — the surface should go calm once the pour is done.
*/
.map-pin:hover .pin-wave-motion,
.map-pin:focus-visible .pin-wave-motion{
  animation:pin-wave-scroll .42s linear 2;
  animation-fill-mode:forwards;
}
@keyframes pin-wave-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-24px); }
}
.map-pin:hover .pin-outline,
.map-pin:focus-visible .pin-outline{ stroke:var(--gold); }
.map-pin:hover .pin-dot,
.map-pin:focus-visible .pin-dot{ opacity:0; }
.map-pin:focus-visible{ outline:none; }

.map-tooltip{
  position:absolute; pointer-events:none; background:#fff; color:var(--ink);
  padding:10px 14px; border-radius:12px; font-size:.85rem; line-height:1.4;
  box-shadow:0 14px 34px rgba(0,0,0,.3); transform:translate(-50%, calc(-100% - 16px));
  white-space:nowrap; z-index:5; transition:opacity .15s ease;
}
.map-tooltip strong{ display:block; color:var(--maroon); font-family:var(--font-display); margin-bottom:2px; }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  margin-top:clamp(40px,5vw,64px); padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
}
.logo--light{ color:#fff; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:18px; }
.footer-nav a{ color:rgba(255,255,255,.75); text-decoration:none; font-size:.9rem; }
.footer-nav a:hover{ color:#fff; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none;
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
}
.footer-social a:hover{ background:rgba(255,255,255,.14); }
.footer-copy{ margin-top:24px; text-align:center; font-size:.82rem; color:rgba(255,255,255,.6); }
.footer-copy a{ color:var(--gold); text-decoration:none; }
.footer-copy a:hover{ text-decoration:underline; }

.legal-notice{
  width:100%; margin-top:clamp(16px,2.5vw,28px); background:#fff; line-height:0;
}
.legal-notice img{
  width:100%; height:auto; display:block;
}

@media (max-width:640px){
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* =====================================================================
   MODAL
   ===================================================================== */
.modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:20px; visibility:hidden; opacity:0; transition:opacity .25s ease, visibility .25s ease;
}
.modal[aria-hidden="false"]{ visibility:visible; opacity:1; }
.modal-overlay{ position:absolute; inset:0; background:rgba(58,36,24,.55); backdrop-filter:blur(2px); }
.modal-dialog{
  position:relative; background:var(--cream-soft); border-radius:28px;
  padding:clamp(28px,4vw,44px); max-width:440px; width:100%;
  box-shadow:0 30px 80px rgba(0,0,0,.35); max-height:90vh; overflow-y:auto;
  transform:translateY(20px) scale(.96); transition:transform .3s ease;
}
.modal[aria-hidden="false"] .modal-dialog{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%;
  border:none; background:transparent; color:var(--maroon); font-size:1.6rem; cursor:pointer; line-height:1;
}
.modal-close:hover{ background:rgba(112,0,24,.08); }
.modal-lead{ color:var(--ink-soft); margin:0 0 20px; font-size:.92rem; }

#registerForm{ display:flex; flex-direction:column; gap:14px; }
#registerForm label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color:var(--ink-soft); font-weight:600; }
#registerForm input{
  border:1.5px solid rgba(112,0,24,.25); border-radius:14px; padding:12px 14px;
  font-family:var(--font-sans); font-size:.95rem; color:var(--ink); background:#fff;
}
#registerForm input:focus{ outline:none; border-color:var(--maroon); }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-check{
  flex-direction:row !important; align-items:flex-start; gap:10px !important;
  font-weight:400 !important; cursor:pointer;
}
.form-check input[type="checkbox"]{
  flex-shrink:0; width:18px; height:18px; margin-top:2px; accent-color:var(--maroon); cursor:pointer;
}
.form-check span{ font-size:.85rem; line-height:1.45; color:var(--ink-soft); }
.form-check a{ color:var(--maroon); font-weight:600; }
.form-submit{ margin-top:6px; }
.form-msg{ min-height:1.2em; font-size:.85rem; margin:0; }
.form-msg.is-success{ color:#2f6b33; }
.form-msg.is-error{ color:#a4222c; }

/* =====================================================================
   MISC RESPONSIVE TWEAKS
   ===================================================================== */
@media (max-width:640px){
  .brand-circles{ grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); }
  .modal-dialog{ padding:26px 20px; }
}
@media (max-width:760px){
  .side-art{ display:none; }
  .vine-corner{ width:70px; }
}