/* =========================================================
   Най-вкусния мед — parallax hero
   Pure CSS/JS. One scroll variable (--p, 0→1) drives everything.
   ========================================================= */

:root{
  /* palette */
  --honey-50:#fff8e9;
  --honey-100:#ffefcf;
  --honey-300:#ffd77e;
  --honey-400:#f7bb3c;
  --honey-500:#eda017;
  --honey-600:#d3830a;
  --bark-800:#3a2610;
  --bark-900:#241705;

  /* type */
  --display:"Polypen Sans", "PolySans", "PolySans Neutral", "Onest", "Manrope", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  --sans:"Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --script:"Pacifico", "Caveat", "Segoe Script", "Brush Script MT", cursive;

  --shell:min(1180px, 90vw);

  /* the hill artwork — both parallax planes read from here, so swapping the
     file (e.g. to parallax-image-v2.png) is a one-line change. Any
     replacement should keep the 1672x941 ratio; script.js solves the
     composition from it (see ART_RATIO). */
  --hill-art:url("parallax-image-v4.png");
}

/* PolySans is a retail font (Wonderlust) — there is no CDN to link it from,
   so it is picked up from the machine if installed. To ship it to real
   visitors, drop the woff2 files into fonts/ and uncomment the url() lines:
   the headings switch over with no other change. Until then they render in
   Onest, the fallback in --display (Playfair's replacement, Cyrillic included). */
@font-face{
  font-family:"PolySans";
  src:local("Polypen Sans"), local("PolySans Neutral"), local("PolySans");
  /* , url("fonts/PolySans-Neutral.woff2") format("woff2"); */
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PolySans";
  src:local("Polypen Sans Medium"), local("PolySans Median"), local("PolySans Medium");
  /* , url("fonts/PolySans-Median.woff2") format("woff2"); */
  font-weight:500 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PolySans";
  src:local("Polypen Sans Bold"), local("PolySans Bulky"), local("PolySans Bold");
  /* , url("fonts/PolySans-Bulky.woff2") format("woff2"); */
  font-weight:700 900; font-style:normal; font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* keep the gutter even while the menu locks scrolling, so nothing jumps */
  scrollbar-gutter:stable;
}

/* Firefox only. Chromium ignores every ::-webkit-scrollbar rule the moment
   scrollbar-width or scrollbar-color is set — it swaps to the native Windows
   bar, steppers and all — so these have to stay out of Chrome's way. */
@supports not selector(::-webkit-scrollbar){
  html{
    scrollbar-width:thin;   /* thin has no arrow buttons */
    scrollbar-color:var(--honey-500) rgba(90,60,18,.09);
  }
}

/* WebKit — a thin honey drip down the edge. The transparent border plus
   background-clip:padding-box is what insets the thumb off the track. */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:rgba(90,60,18,.07); }
::-webkit-scrollbar-thumb{
  border-radius:999px;
  border:3px solid transparent;
  background:linear-gradient(180deg,var(--honey-300),var(--honey-500) 52%,var(--honey-600));
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  border-width:2px;
  background:linear-gradient(180deg,var(--honey-400),var(--honey-600));
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:active{ background:var(--honey-600); background-clip:padding-box; }
::-webkit-scrollbar-corner{ background:transparent; }
/* no stepper arrows at the ends — just the bar */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{ display:none; width:0; height:0; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--bark-800);
  background:var(--honey-50);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* anything you can press says so — buttons and inputs default to an arrow,
   and cursor inherits, so nested spans/svg/img inside a link are covered */
a[href], button, summary, label[for], select,
[role="button"], [role="link"], [role="tab"],
input[type="submit"], input[type="button"], input[type="reset"],
input[type="checkbox"], input[type="radio"]{
  cursor:pointer;
}

.wrap{ width:var(--shell); margin-inline:auto; }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:2rem;
  padding:.55rem clamp(1rem, 4vw, 3rem);
  color:#fff;
  transition:background-color .45s ease, box-shadow .45s ease, color .45s ease, padding .45s ease, backdrop-filter .45s ease;
}
.site-header.is-solid{
  background:rgba(255,248,233,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(90,60,18,.10), 0 12px 32px -22px rgba(60,40,10,.6);
  color:var(--bark-800);
  padding-block:.72rem;
}

.brand{ position:relative; z-index:0; display:flex; align-items:center; flex:none; }
/* The badge is cream on transparent and wants a soft shadow to hold its edge
   against the sky. That shadow used to be a drop-shadow filter on the <img>,
   which cost the artwork its sharpness: a filtered element is drawn through
   its own buffer, and on iOS that buffer comes back below screen resolution,
   so the badge landed soft on a 3x phone — the same effect the hover note
   below already ran into on desktop. The badge is an ellipse, so the shadow
   can be an ellipse of its own sitting behind it: same edge, and nothing is
   filtered but empty space. Insets are the alpha bounds of the artwork. */
.brand::before{
  content:""; position:absolute; z-index:-1; inset:9% 5.5%;
  border-radius:50%;
  box-shadow:0 6px 16px rgba(18,48,24,.42);
  transition:box-shadow .45s ease;
  pointer-events:none;
}
.brand__logo{
  height:clamp(66px, 8.4vw, 124px); width:auto;
  /* srcset (see index.html) hands the browser a copy close to this size;
     resampling the 1734px original down this far is what made it crunchy. */
  transition:height .45s ease, transform .45s cubic-bezier(.34,1.42,.5,1);
}
/* lift only — scaling the image makes Chrome stretch a cached raster instead
   of redrawing it, which is what made the badge go soft on hover. The badge
   rises off its shadow rather than carrying it along, so the shadow spreads
   underneath instead of following the lift. */
.brand:hover .brand__logo{ transform:translateY(-3px); }
.brand:hover::before{ box-shadow:0 10px 20px rgba(18,48,24,.5); }
.brand:active .brand__logo{ transform:translateY(0); }
.site-header.is-solid .brand__logo{ height:clamp(52px, 5.2vw, 78px); }
.site-header.is-solid .brand::before{ box-shadow:0 3px 8px rgba(18,48,24,.18); }

.site-nav{ margin-left:auto; display:flex; gap:1.9rem; font-size:.94rem; font-weight:500; }
.site-nav a{ position:relative; opacity:.92; }
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------------------------------------------------------
   Burger + full-screen menu (≤860px)
   --------------------------------------------------------- */
.burger{
  display:none; margin-left:auto; flex:none;
  width:54px; height:54px; padding:0;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.22); color:inherit;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42), 0 10px 24px -14px rgba(20,50,80,.85);
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:background-color .35s ease, transform .35s cubic-bezier(.34,1.42,.5,1), box-shadow .35s ease;
}
.burger:hover{ background:rgba(255,255,255,.3); }
.burger:active{ transform:scale(.9); }
.burger:focus-visible{ outline:3px solid rgba(255,255,255,.92); outline-offset:3px; }
/* the sheet expands underneath the button: a live backdrop blur here has to
   re-blur what is behind it on every frame of the reveal */
html.nav-open .burger{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.site-header.is-solid .burger,
.site-header.is-menu-open .burger{
  background:rgba(211,131,10,.12);
  box-shadow:inset 0 0 0 1px rgba(211,131,10,.32), 0 10px 24px -18px rgba(90,60,18,.7);
}
/* the bar is see-through over the sky, but the menu sheet behind it is cream */
.site-header.is-menu-open{ color:var(--bark-800); }
.site-header.is-menu-open .brand::before{ box-shadow:0 3px 8px rgba(18,48,24,.18); }

.burger__box{ display:block; position:relative; width:24px; height:18px; margin:0 auto; }
.burger__box i{
  position:absolute; left:0; right:0; height:3px; border-radius:2px;
  background:currentColor;
  box-shadow:0 1px 2px rgba(18,48,80,.25);   /* keeps them readable over sky */
  transition:transform .45s cubic-bezier(.6,-.35,.3,1.45), opacity .2s ease .1s;
}
.burger__box i:nth-child(1){ top:0; }
.burger__box i:nth-child(2){ top:50%; margin-top:-1.5px; }
.burger__box i:nth-child(3){ bottom:0; }
/* open → X (bars sit 7.5px above / below the middle) */
.burger[aria-expanded="true"] .burger__box i:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2){ opacity:0; transform:scaleX(0); transition-delay:0s; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
.burger[aria-expanded="true"] .burger__box i{ box-shadow:none; }

/* the sheet itself — a honey circle that grows out of the burger */
.menu{
  position:fixed; inset:0; z-index:55;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(1.6rem,5vh,2.6rem);
  padding:max(15vh,104px) 1.6rem 3rem;
  overflow-y:auto; overscroll-behavior:contain;
  color:var(--bark-800);
  visibility:hidden;
  transition:visibility .38s;
}
html.nav-open .menu{ visibility:visible; }
html.nav-open{ overflow:hidden; }

/* The circle is a scaled layer, not an animated clip-path. A clip-path
   repaints the sheet — its gradient and every line of type on it — once per
   frame, which is what made the open stutter on iOS; a transform is
   composited, so the circle is rasterised once and the GPU moves it from
   there. Its centre sits on the burger, so it has to reach the far corner of
   the viewport: that run is the diagonal, never more than √2 × the longer
   side, and a radius of 150vmax clears it whatever shape the window is.
   z-index:-1 puts it behind the links while staying inside the sheet's own
   stacking context. The ramp belongs to the circle, not to the viewport: a
   viewport-sized gradient leaves the rest of the circle unpainted, and what
   grows out of the burger then reads as a rectangle rather than a wipe. Lit
   from the centre it stays a circle at every scale — cream at the button,
   honey by the time it reaches the far corner, which is about 70% of the
   radius out. */
.menu__wash{
  position:fixed; z-index:-1;
  top:3.3rem; right:3.3rem;
  width:300vmax; height:300vmax; margin:-150vmax -150vmax 0 0;
  border-radius:50%;
  background:radial-gradient(circle closest-side, #fff8e6 0%, #ffeec7 32%, #f9d894 70%);
  transform:scale(0); will-change:transform;
  /* The base rule is the one that runs on the way out, and it has a shape
     problem to solve: the circle is 1.47x wider than it needs to be, so the
     first third of any even-paced close is spent shrinking while still off
     the edges of the screen — nothing moves, and then the whole 860px sweep
     lands in the last 100ms. This curve drops that overshoot almost at once,
     where no one can see it, and gives the rest of the run to the part that
     is actually on screen: the edge then travels in even steps and settles
     into the button instead of snapping to it. */
  transition:transform .38s cubic-bezier(0,.44,.68,.87);
}
html.nav-open .menu__wash{
  transform:scale(1);
  /* front-loaded: the circle has the viewport covered by 100ms and spends
     the rest of the run easing out past the edges, where nothing can see it.
     Nothing clips the links to the circle any more, so the cascade below has
     to start after that point or the first link fades in over the hero
     instead of over the sheet. */
  transition:transform .46s cubic-bezier(.25,.9,.3,1);
}

.menu__links{ display:flex; flex-direction:column; width:min(430px,100%); }
.menu__links a{
  display:block;
  padding:.8rem .3rem;
  font-family:var(--display); font-weight:700; font-size:clamp(1.75rem,8vw,2.6rem);
  line-height:1.15; letter-spacing:-.03em;
  border-bottom:1px solid rgba(90,60,18,.16);
  transition:color .25s ease, padding-left .25s ease, opacity .14s ease;
}
.menu__links a:hover{ color:var(--honey-600); padding-left:.9rem; }
.menu__links a:active{ color:var(--honey-600); padding-left:1.15rem; }
/* the CTA is a .btn too, and .btn is declared further down the sheet — at
   equal specificity that one wins, so the menu's own size has to be claimed
   from inside .menu to stick. Same for the transition: the fade-out has to be
   added here, which means .btn's own three have to be repeated or the button
   stops answering a press. */
.menu .menu__cta{
  padding:1.05rem 2.4rem; font-size:1.05rem;
  transition:opacity .14s ease,
             transform .32s cubic-bezier(.34,1.42,.5,1), box-shadow .32s ease, filter .32s ease;
}

.menu__social{ display:flex; gap:.9rem; transition:opacity .14s ease; }
.menu__social a{
  display:grid; place-items:center; width:48px; height:48px; border-radius:16px;
  color:var(--bark-800);
  background:rgba(255,255,255,.5); border:1px solid rgba(211,131,10,.28);
  transition:transform .35s cubic-bezier(.34,1.42,.5,1), background-color .35s ease, color .35s ease;
}
.menu__social svg{ width:21px; height:21px; }
.menu__social a:hover{ transform:translateY(-4px); background:linear-gradient(160deg,var(--honey-300),var(--honey-500)); }
.menu__social a:active{ transform:scale(.92); }

/* Everything inside staggers in on its own animation rather than on a
   transition. A transition needs its delay to sit on the element for as long
   as the sheet is open, and on .menu__cta that delay landed on the .btn press
   transition as well — the button took the better part of half a second to
   answer a tap. `backwards` fill only, so the finished frame doesn't outrank
   :hover afterwards. The nav has five links: the old ladder stopped at four,
   which left "Пчелинът" on a delay of 0, arriving before the first one.

   The animation only applies while the sheet is open, so the closed state has
   to carry opacity:0 of its own. Without it the links reverted to fully
   opaque the moment the class came off and hung in the air over the page for
   as long as the circle took to shrink. That opacity is transitioned rather
   than switched: on the way out the type dissolves over 140ms, which is done
   well before the circle's edge reaches it, so the sheet empties and only
   then wipes away. On the way in the animation outranks the transition, so
   the cascade below is what plays. */
.menu__links a, .menu__cta, .menu__social{ opacity:0; }
html.nav-open .menu__links a,
html.nav-open .menu__cta,
html.nav-open .menu__social{ opacity:1; animation:menu-in .46s cubic-bezier(.2,.7,.3,1) backwards; }
@keyframes menu-in{ from{ opacity:0; transform:translateY(24px); } }
/* the first of these clears the 100ms the circle needs to reach the corners */
html.nav-open .menu__links a:nth-child(1){ animation-delay:.14s; }
html.nav-open .menu__links a:nth-child(2){ animation-delay:.195s; }
html.nav-open .menu__links a:nth-child(3){ animation-delay:.25s; }
html.nav-open .menu__links a:nth-child(4){ animation-delay:.305s; }
html.nav-open .menu__links a:nth-child(5){ animation-delay:.36s; }
html.nav-open .menu__cta{ animation-delay:.415s; }
html.nav-open .menu__social{ animation-delay:.47s; }

/* the sheet covers the hero — parking the clouds, the sun and the bees for as
   long as it is open leaves the whole frame to the reveal */
html.nav-open .cloud img, html.nav-open .sun, html.nav-open .bee,
html.nav-open .bee i, html.nav-open .bee__wings,
html.nav-open .scroll-cue i::after{ animation-play-state:paused; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
/* Every control answers a press the same way: lift on hover, a glare that
   sweeps across, a ripple out of the pointer, then a short squash.
   The ripple's origin is written by script.js as --rx / --ry. */
.btn{
  --btn-bg:linear-gradient(170deg,var(--honey-300),var(--honey-500) 55%,var(--honey-600));
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.9rem; border-radius:999px;
  background:var(--btn-bg); color:var(--bark-900);
  font-weight:700; font-size:1rem; letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 12px 26px -12px rgba(140,85,0,.75);
  transition:transform .32s cubic-bezier(.34,1.42,.5,1), box-shadow .32s ease, filter .32s ease;
  white-space:nowrap; border:0; font-family:inherit;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
/* lift only: scaling a button also scales its label, so the text creeps
   sideways (and goes soft) for the whole transition */
.btn:hover{ transform:translateY(-3px); filter:brightness(1.06); box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 24px 38px -14px rgba(140,85,0,.9); }
.btn:active{ transform:translateY(1px); filter:brightness(.98); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 14px -10px rgba(140,85,0,.9); transition-duration:.09s; }
.btn:focus-visible{ outline:3px solid rgba(255,255,255,.92); outline-offset:3px; }

/* the glare is an animation, not a transition, so leaving the button snaps it
   back to the start instead of sweeping in reverse */
.btn::before{
  content:""; position:absolute; inset:-1px; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform:translateX(-130%);
}
.btn:hover::before, .btn:focus-visible::before{ animation:btn-sheen .85s cubic-bezier(.3,.7,.3,1); }
@keyframes btn-sheen{ from{ transform:translateX(-130%); } to{ transform:translateX(130%); } }

.btn::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:var(--rx,50%); top:var(--ry,50%);
  width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  opacity:0; transform:scale(0);
  background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 72%);
}
.btn.is-rippling::after{ animation:btn-ripple .6s cubic-bezier(.22,.7,.3,1); }
@keyframes btn-ripple{ from{ opacity:.85; transform:scale(0); } to{ opacity:0; transform:scale(24); } }

.btn--sm{ padding:.6rem 1.25rem; font-size:.9rem; }
.btn--dark{ background:linear-gradient(170deg,#4a3113,var(--bark-900)); color:var(--honey-100); box-shadow:0 14px 30px -16px rgba(0,0,0,.8); }
.btn--dark:hover{ box-shadow:0 24px 42px -18px rgba(0,0,0,.85); }
.btn--dark:active{ box-shadow:0 8px 16px -12px rgba(0,0,0,.9); }
.btn--dark:focus-visible{ outline-color:rgba(58,38,16,.85); }
.btn--dark::before{ background:linear-gradient(105deg, transparent 34%, rgba(255,214,130,.34) 48%, transparent 62%); }
.btn--dark::after{ background:radial-gradient(circle, rgba(255,214,130,.75) 0%, rgba(255,214,130,.32) 45%, rgba(255,214,130,0) 72%); }
.btn--ghost{
  background:rgba(255,255,255,.1); color:var(--bark-800);
  border:1.5px solid rgba(211,131,10,.45);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(255,236,196,.75); border-color:rgba(211,131,10,.75); box-shadow:0 16px 30px -18px rgba(140,85,0,.8); }
.btn--ghost::before{ background:linear-gradient(105deg, transparent 34%, rgba(255,214,130,.5) 48%, transparent 62%); }

/* --- outline pill: white body, honey ink, arrow that leans on hover --- */
.btn--outline{
  gap:1.5rem; padding:.95rem 2.1rem;
  background:#fffdf8; color:var(--honey-600);
  border:1.5px solid rgba(232,163,40,.5);
  box-shadow:0 14px 30px -18px rgba(140,85,0,.7);
}
.btn--outline:hover{ background:#fff; border-color:var(--honey-500); box-shadow:0 24px 42px -20px rgba(140,85,0,.75); }
.btn--outline:active{ box-shadow:0 8px 16px -12px rgba(140,85,0,.8); }
.btn--outline:focus-visible{ outline-color:rgba(211,131,10,.85); }
.btn--outline::before{ background:linear-gradient(105deg, transparent 34%, rgba(255,214,130,.55) 48%, transparent 62%); }
.btn--outline::after{ background:radial-gradient(circle, rgba(240,167,21,.5) 0%, rgba(240,167,21,.22) 45%, rgba(240,167,21,0) 72%); }
.btn__arrow{
  display:grid; place-items:center; line-height:0;
  transition:transform .32s cubic-bezier(.34,1.42,.5,1);
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow{ transform:translateX(5px); }
.btn:active .btn__arrow{ transform:translateX(8px); }
.btn__arrow svg{
  display:block; width:1.28em; height:1.28em;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- ghost link: underline wipes in, arrow leans into its pill --- */
.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem .3rem;
  font-weight:600; font-size:1rem; color:#fff;
  text-shadow:0 2px 10px rgba(20,50,80,.45);
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform .32s cubic-bezier(.34,1.42,.5,1);
}
.link-arrow:hover{ transform:translateY(-2px); }
.link-arrow:active{ transform:translateY(1px); transition-duration:.09s; }
.link-arrow:focus-visible{ outline:3px solid rgba(255,255,255,.92); outline-offset:4px; border-radius:999px; }

.link-arrow__t{ position:relative; }
.link-arrow__t::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--honey-300),#fff);
  box-shadow:0 0 12px rgba(255,205,110,.7);
  transform:scaleX(0); transform-origin:right;
  transition:transform .42s cubic-bezier(.2,.7,.3,1);
}
.link-arrow:hover .link-arrow__t::after,
.link-arrow:focus-visible .link-arrow__t::after{ transform:scaleX(1); transform-origin:left; }

.link-arrow__ico{
  display:grid; place-items:center; width:1.85em; height:1.85em; border-radius:50%;
  line-height:0; text-shadow:none;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.16);
  transition:transform .32s cubic-bezier(.34,1.42,.5,1), background-color .32s ease, border-color .32s ease, box-shadow .32s ease;
}
.link-arrow:hover .link-arrow__ico,
.link-arrow:focus-visible .link-arrow__ico{
  transform:translateX(6px);
  background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.9);
  box-shadow:0 10px 22px -12px rgba(20,50,80,.9);
}
.link-arrow:active .link-arrow__ico{ transform:translateX(10px) scale(.9); }
/* the arrow's ink spans x 5→19 of a 24 box, so it is centred on the circle */
.link-arrow__ico svg{
  display:block; width:.82em; height:.82em;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}

/* =========================================================
   HERO / PARALLAX
   .hero  = scroll track   ·   .hero__stage = pinned viewport
   ========================================================= */
.hero{
  position:relative;
  height:280vh;                 /* how long the effect lasts */
  background:#8ec4e6;
}

.hero__stage{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  isolation:isolate;

  /* ---- scroll progress, written by script.js ---- */
  --p:0;
  /* ---- tuning: travel per layer over the whole scroll ---- */
  --sky-y:-5vh;
  --sun-y:-9vh;
  --cloudf-y:-16vh;
  --cloudm-y:-30vh;
  --title-y:21vh;               /* headline SINKS — recomputed by script.js */
  --cloudn-y:-52vh;
  --haze-y:-24vh;
  /* hill-bottom / hill-y / hill-scale1 are recomputed by script.js so the
     grass line lands on the same spot on any aspect ratio (see fitHill).  */
  --hill-bottom:-30vh;          /* how far the artwork hangs below the fold */
  --hill-y:-42vh;               /* how far it climbs over the whole scroll  */
  --hill-scale1:1.14;           /* how much it grows while climbing         */
  --bee-y:-30vh;
}

.layer{
  position:absolute; inset:0;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  /* every layer is scenery, and the hill / clouds / haze paint ON TOP of the
     headline — without this they swallow every click aimed at its buttons */
  pointer-events:none;
}

/* 1 · sky ------------------------------------------------- */
.layer--sky{
  transform-origin:50% 100%;
  transform:translate3d(0, calc(var(--p) * var(--sky-y)), 0) scale(1.08);
  background:
    radial-gradient(150% 62% at 50% 100%, rgba(255,236,190,.95) 0%, rgba(255,232,176,.55) 26%, rgba(255,240,210,0) 62%),
    linear-gradient(180deg,
      #1c62b2 0%, #2f7bc4 12%, #4e97d4 26%, #79b6e2 40%,
      #a6d2ee 54%, #c9e5f4 66%, #e4f2f8 76%, #f4f2e4 86%, #fbe7bd 96%, #f8dca4 100%);
}

/* 2 · sun ------------------------------------------------- */
.layer--sun{
  transform:translate3d(0, calc(var(--p) * var(--sun-y)), 0);
}
.sun{
  position:absolute; left:58%; top:70%;
  width:min(46vw,620px); aspect-ratio:1; translate:-50% -50%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,240,.95) 0%, rgba(255,246,205,.75) 12%, rgba(255,227,150,.42) 28%, rgba(255,214,130,.18) 46%, rgba(255,210,130,0) 70%);
  filter:blur(2px);
  animation:sun-breathe 9s ease-in-out infinite;
}
@keyframes sun-breathe{ 50%{ transform:scale(1.07); opacity:.88; } }

/* 3–6 · clouds -------------------------------------------- */
.layer--clouds-far{
  transform:translate3d(0, calc(var(--p) * var(--cloudf-y)), 0);
}
.layer--clouds-mid{
  transform:translate3d(0, calc(var(--p) * var(--cloudm-y)), 0);
}
.layer--clouds-near{
  transform:translate3d(0, calc(var(--p) * var(--cloudn-y)), 0);
}

.cloud{ position:absolute; will-change:transform; }
.cloud img{
  width:100%; height:auto;
  filter:brightness(1.06) contrast(1.02) drop-shadow(0 18px 26px rgba(60,110,160,.16));
}

/* Drift lives on the inner <img> so it never fights the layer's scroll
   transform. Both keyframes are explicit, and horizontally flipped clouds use
   the independent `scale` property — animating `transform` against a static
   `scaleX(-1)` makes Chrome interpolate through scaleX(0), which flattens the
   cloud into a vertical white sliver mid-drift. */
@keyframes drift{
  from{ transform:translateX(0); }
  to  { transform:translateX(var(--drift, 12vw)); }
}
.cloud img{ animation:drift var(--dur,120s) linear infinite alternate; }

/* far — small, pale, high up */
.c-f1{ top:9%;  left:6%;  width:clamp(120px,13vw,220px); opacity:.72; }
.c-f2{ top:5%;  left:52%; width:clamp(100px,10vw,180px); opacity:.6;  }
.c-f3{ top:20%; left:78%; width:clamp(130px,14vw,240px); opacity:.66; }
.c-f4{ top:27%; left:26%; width:clamp( 90px, 9vw,160px); opacity:.5;  }
.c-f1 img{ --dur:150s; --drift:9vw;  filter:brightness(1.08) blur(.6px); }
.c-f2 img{ --dur:190s; --drift:-7vw; filter:brightness(1.08) blur(.8px); scale:-1 1; }
.c-f3 img{ --dur:165s; --drift:8vw;  filter:brightness(1.07) blur(.7px); }
.c-f4 img{ --dur:210s; --drift:-6vw; filter:brightness(1.09) blur(1px);  scale:-1 1; }

/* mid — the readable, puffy ones */
.c-m1{ top:14%; left:-4%;  width:clamp(220px,26vw,460px); opacity:.95; }
.c-m2{ top:34%; left:66%;  width:clamp(240px,30vw,530px); opacity:.92; }
.c-m3{ top:47%; left:14%;  width:clamp(190px,22vw,390px); opacity:.85; }
.c-m1 img{ --dur:110s; --drift:11vw; }
.c-m2 img{ --dur:135s; --drift:-9vw; scale:-1 1; }
.c-m3 img{ --dur:125s; --drift:7vw;  }

/* near — big, soft, pass in front of the headline */
.c-n1{ top:52%;  left:-14%; width:clamp(300px,42vw,760px); opacity:.9; }
.c-n2{ top:63%;  left:58%;  width:clamp(340px,46vw,830px); opacity:.86; }
.c-n1 img{ --dur:95s;  --drift:14vw; filter:brightness(1.05) blur(1.4px) drop-shadow(0 20px 30px rgba(60,110,160,.18)); }
.c-n2 img{ --dur:105s; --drift:-12vw; scale:-1 1; filter:brightness(1.05) blur(1.8px) drop-shadow(0 20px 30px rgba(60,110,160,.18)); }

/* 5 · headline -------------------------------------------- */
.layer--title{
  display:flex; align-items:flex-start; justify-content:center;
  padding:16.5vh clamp(1rem,5vw,3rem) 0;
  transform:
    translate3d(0, calc(var(--p) * var(--title-y)), 0)
    scale(calc(1 - var(--p) * .07));
  transform-origin:50% 40%;
}
.title-block{ text-align:center; max-width:min(1200px,94vw); }

/* flex rather than inline-flex: .title next to it is an inline-block, so an
   inline-level eyebrow sits on the same line as the headline as soon as the
   two happen to fit — around 1300px they did, and the kicker landed alongside
   "Най-вкусния" instead of above it. A block-level box always gets its own
   line, and justify-content does the centring that text-align used to. */
.eyebrow{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin:0 0 1.15rem;
  font-size:clamp(.72rem,1.05vw,.86rem); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 12px rgba(20,55,95,.5);
}
.eyebrow i{ width:34px; height:2px; background:var(--honey-300); border-radius:2px; box-shadow:0 0 12px rgba(255,200,90,.8); }

/* brush script, so: no negative tracking, roomier leading for the descenders,
   and inline-block so the swash underneath can measure the text, not the column */
.title{
  position:relative;
  display:inline-block;
  margin:0;
  font-family:var(--script);
  font-weight:400;
  font-size:clamp(2.3rem, 6vw, 6.4rem);
  white-space:nowrap;
  line-height:1.24;
  letter-spacing:0;
  padding-bottom:.16em;
  color:#fffdf7;
  text-shadow:
    0 2px 10px rgba(23,60,100,.30),
    0 18px 46px rgba(23,60,100,.34);
}
/* flat colour, no gradient: any ramp darkens the lower half of the glyphs,
   which is what kept reading as brown against the sky */
.title em{
  font-style:normal; font-weight:400;
  color:#FCCD6B;
  /* the parent's shadow is blue for white type — warm it up here so it
     doesn't cast a cold edge over the gold */
  text-shadow:
    0 2px 10px rgba(120,70,0,.22),
    0 14px 34px rgba(120,70,0,.20);
  padding-inline:.04em;
}
/* the swept underline — one tapered brush stroke, stretched to the headline */
.title__swash{
  /* an <svg> is a replaced element: with width:auto it takes its intrinsic
     size — viewBox ratio x height — and the `right` edge is dropped, which
     left the stroke sitting under the first word only. The width has to be
     stated for preserveAspectRatio="none" to stretch it across the line. */
  position:absolute; left:1.5%; bottom:0;
  width:99.5%; height:.19em;
  fill:url(#swashGold);
  color:#f7bd35;
  filter:drop-shadow(0 4px 10px rgba(140,80,0,.35));
  pointer-events:none;
}

.subtitle{
  margin:1.5rem auto 0; max-width:38ch;
  font-size:clamp(1rem,1.42vw,1.24rem); line-height:1.6; font-weight:500;
  color:#f6fbff;
  text-shadow:0 2px 14px rgba(20,55,95,.5);
}
.title-actions{
  margin-top:2.2rem;
  display:flex; align-items:center; justify-content:center; gap:1.8rem; flex-wrap:wrap;
}
.title-actions a{ pointer-events:auto; }
/* once the hill has climbed over the headline its buttons are invisible —
   stop them collecting clicks meant for the hillside */
.hero__stage.is-buried .title-actions a{ pointer-events:none; }

/* they arrive last, one after the other. `backwards` fill only: with
   `forwards` the finished frame would outrank :hover and kill the lift */
.js .title-actions > *{ animation:action-in .8s cubic-bezier(.2,.7,.3,1) backwards; }
.js .title-actions > *:nth-child(1){ animation-delay:.35s; }
.js .title-actions > *:nth-child(2){ animation-delay:.5s; }
@keyframes action-in{ from{ opacity:0; transform:translateY(18px); } }

/* 7 · horizon haze ---------------------------------------- */
.layer--haze{
  transform:translate3d(0, calc(var(--p) * var(--haze-y)), 0);
  background:linear-gradient(180deg,
    rgba(255,244,214,0) 58%,
    rgba(255,240,200,.10) 68%,
    rgba(255,231,178,.13) 74%,
    rgba(255,226,168,.06) 82%,
    rgba(255,226,168,0) 90%);
  filter:blur(12px);
}

/* 8 · the hill -------------------------------------------- */
/* The artwork is never narrower than the viewport (max(100%, 112vh)) so it
   can't show a side edge, it hangs below the fold by --hill-bottom, and it
   climbs by translating up — scale only ever grows, and grows from the
   bottom edge, so nothing can open a gap underneath it.                    */
.layer--hill-back{
  inset:auto 0 var(--hill-bottom) 0;
  height:210vh;
  background:var(--hill-art) center bottom / max(100%, 112vh) auto no-repeat;
  transform-origin:50% 100%;
  transform:
    translate3d(0, calc(var(--p) * var(--hill-y)), 0)
    scale(calc(1 + var(--p) * (var(--hill-scale1) - 1)));
  /* deliberately filter-free: this layer changes scale on every frame, and a
     filter would force a full re-raster of a full-bleed layer each time */
}

/* 9 · bees ------------------------------------------------ */
.layer--bees{
  transform:translate3d(0, calc(var(--p) * var(--bee-y)), 0);
  pointer-events:none;
}
/* .bee   → crosses the stage horizontally (vw based, so it always crosses)
   .bee i → bobs up/down and banks, giving the flight a little life        */
.bee{
  position:absolute; left:0; top:var(--y,60%);
  width:var(--size,30px);
  animation:cross var(--dur,26s) linear infinite;
  animation-delay:var(--delay,0s);
}
.bee--rtl{ animation-name:cross-rev; }
@keyframes cross{     from{ transform:translateX(-18vw); } to{ transform:translateX(118vw); } }
@keyframes cross-rev{ from{ transform:translateX(118vw); } to{ transform:translateX(-18vw); } }

.bee i{ display:block; animation:bob var(--bob,3.6s) ease-in-out infinite alternate; }
@keyframes bob{
  from{ transform:translateY(-2.4vh) rotate(-8deg); }
  to  { transform:translateY(2.6vh)  rotate(7deg);  }
}

.bee svg{ width:100%; height:auto; transform:scaleX(-1); filter:drop-shadow(0 4px 6px rgba(40,70,30,.28)); }
.bee--rtl svg{ transform:none; }
/* the wings live in <defs> and are cloned by <use>, but custom properties set
   on .bee inherit into that shadow content — so --flap desyncs the four bees */
.bee__wings{
  transform-box:fill-box; transform-origin:50% 92%;
  animation:flap .17s steps(2,end) infinite;
  animation-delay:var(--flap, 0s);
}
@keyframes flap{ 50%{ transform:scaleY(.42) translateY(-.5px); } }

.b1{ --size:34px; --y:64%; --dur:27s; --bob:3.2s; --delay:-3s;  --flap:0s;    }
.b2{ --size:23px; --y:52%; --dur:38s; --bob:4.5s; --delay:-14s; --flap:-.05s; }
.b3{ --size:18px; --y:41%; --dur:46s; --bob:5.2s; --delay:-30s; --flap:-.09s; }
.b4{ --size:28px; --y:71%; --dur:31s; --bob:3.8s; --delay:-21s; --flap:-.03s; }

/* scroll cue ---------------------------------------------- */
.scroll-cue{
  position:absolute; left:50%; bottom:2.4rem; translate:-50% 0; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; text-shadow:0 2px 10px rgba(20,55,95,.55);
  opacity:calc(1 - var(--p) * 3.2);
  transition:opacity .2s linear;
  pointer-events:none;
}
.scroll-cue i{
  width:26px; height:42px; border:2px solid rgba(255,255,255,.8); border-radius:14px;
  position:relative;
}
.scroll-cue i::after{
  content:""; position:absolute; left:50%; top:8px; translate:-50% 0;
  width:4px; height:8px; border-radius:2px; background:#fff;
  animation:wheel 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes wheel{ 0%{opacity:0; transform:translateY(0)} 35%{opacity:1} 75%{opacity:0; transform:translateY(13px)} 100%{opacity:0} }

/* =========================================================
   CONTENT
   ========================================================= */
main{ position:relative; z-index:2; }

/* the header is fixed — keep it off the top of whatever a button jumps to */
#story, #why, #honeys, #place, #order{ scroll-margin-top:clamp(72px, 11vh, 116px); }

/* scroll reveal — scoped to .js so the content is never hidden
   if the script fails to load */
.js [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d, 0s);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

.kicker{
  margin:0 0 .9rem;
  font-size:.78rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--honey-400);
}
.kicker--dark{ color:var(--honey-600); }

.h2{
  margin:0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.95rem,4.2vw,3.3rem); line-height:1.1; letter-spacing:-.03em;
  color:var(--honey-50);
}
.h2--dark{ color:var(--bark-800); }

/* --- story (dark) --- */
.story{
  position:relative; isolation:isolate;
  /* the top pad clears the painted honey drip on the photo's own top edge —
     less than this and the kicker runs into the drips */
  padding:clamp(9rem,18vh,13.5rem) 0 clamp(6rem,12vh,9rem);
  background:radial-gradient(120% 90% at 50% 0%, #4a3013 0%, #2c1c07 45%, #1c1204 100%);
  color:var(--honey-50);
  overflow:hidden;
}
/* cover, anchored to the top: the photo fills the section edge to edge, and
   pinning it top keeps its own painted honey drip on the section's top edge —
   that drip replaces the SVG one that used to sit here. */
.story::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:url("honey_image.png") center top / cover no-repeat;
}
/* scrim — starts fully clear so the honey drip along the top edge is never
   touched, then fades in below it to hold contrast under the copy */
.story::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(22,14,3,0)   0%,
      rgba(22,14,3,0)   21%,
      rgba(24,15,4,.32) 31%,
      rgba(24,15,4,.50) 64%,
      rgba(18,11,2,.88) 100%),
    radial-gradient(56% 33% at 50% 47%, rgba(14,9,2,.55), transparent 76%);
}
.comb{
  position:absolute; inset:0; width:100%; height:100%;
  color:var(--honey-400); opacity:.09; z-index:0;
}
.story__inner{ position:relative; z-index:1; text-align:center; }
.lede{
  margin:1.6rem auto 0; max-width:58ch;
  font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.75; color:#f0e2c6; opacity:.92;
}
.stats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(2rem,7vw,6rem);
  margin:clamp(3rem,6vw,4.5rem) 0 0;
}
/* the headline script, the same face the hero title is set in — so no
   negative tracking, and enough leading for Pacifico's descenders */
.stats dt{
  font-family:var(--script); font-weight:400;
  font-size:clamp(2.2rem,4.2vw,3.35rem); line-height:1.18; letter-spacing:0;
  background:linear-gradient(180deg,#ffe6a4,#f0a51c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats dt small{ font-size:.42em; margin-left:.12em; }
/* The counter writes into .num, which is far narrower at 0 than at its target
   — going 1 → 2 → 3 digits used to widen the whole column and shove the row
   about on every step. .stat__ghost carries the final value invisibly and the
   live number sits on top of it in the same grid cell, so the column starts
   out the width it will end at and nothing moves. */
.stats .stat__val{ display:inline-grid; }
.stats .stat__val > *{ grid-area:1 / 1; text-align:center; }
.stats .stat__ghost{ visibility:hidden; }
/* even-width digits, so the number doesn't jitter inside its reserved box */
.stats dt .num{ font-variant-numeric:tabular-nums; }
.stats dd{ margin:.55rem 0 0; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; color:#d8c49a; }

/* --- why (light) --- */
.why{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(5.5rem,11vh,8.5rem) 0 clamp(6rem,12vh,9rem);
  background:var(--honey-50);
  text-align:center;
}
.why__inner{ position:relative; z-index:1; }

/* corner dressing — all of it decorative, all of it behind the copy */
.why__deco{ position:absolute; inset:0; pointer-events:none; }
/* hangs off the right edge so the trail flies out of the section, the way the
   artwork is drawn — the bee ends up just inside it, level with the kicker */
.why__bee-line{
  position:absolute; top:-.9rem; right:clamp(-118px,-5.6vw,-58px);
  width:clamp(190px,20vw,290px); height:auto;
}

/* gold line-art flowers in the far corner. multiply drops the artwork's own
   white glow, so only the linework lands on the beige */
.why__flowers{
  position:absolute; right:0; bottom:-5%;
  width:clamp(240px,28vw,440px); height:auto;
  opacity:.45; mix-blend-mode:multiply;
}
.why__bloom{
  position:absolute; left:0; bottom:0;
  width:clamp(112px,13vw,190px); height:auto;
  color:rgba(214,150,32,.3);
}

/* =========================================================
   Section-title ornaments
   A ruled label above the headline and a sprig-and-comb flourish under it.
   The rules are painted in currentColor, so they follow whatever the label
   already is, on the light sections and the dark ones alike. The
   flourish is one SVG symbol tinted through --orn-*, so the same drawing
   sits on beige and on the dark walls without a second copy.
   ========================================================= */

/* label with a rule and a dot on each side */
.kicker--ruled{ display:flex; align-items:center; justify-content:center; gap:.95rem; }
.kicker--ruled::before,
.kicker--ruled::after{
  content:""; flex:0 0 auto; width:clamp(36px,6vw,62px); height:7px; opacity:.85;
  background:
    radial-gradient(circle 3.5px at var(--dot) 50%, currentColor 99%, transparent 100%),
    linear-gradient(currentColor 0 0) 0 50% / 100% 2px no-repeat;
}
.kicker--ruled::before{ --dot:calc(100% - 3.5px); }
.kicker--ruled::after{ --dot:3.5px; }
/* the two-column headers are flush left, so the leading rule would push the
   label off the headline's edge — it keeps only the trailing one */
.kicker--start{ justify-content:flex-start; }
.kicker--start::before{ display:none; }

.flourish{ margin:1.15rem 0 0; line-height:0; }
.flourish svg{ display:inline-block; width:clamp(148px,17vw,208px); height:auto; }
/* smaller in the narrower two-column headers, and flush with the headline */
.flourish--start{ text-align:left; }
.flourish--start svg{ width:clamp(132px,13vw,172px); }

/* the dark walls need the linework lifted, or the leaves go to mud */
.story, .honeys, .place{
  --orn-rule:#f0b74d; --orn-stem:#b4cc7c; --orn-leaf:#a7c06b; --orn-comb:#ffc63c;
}

.cards{
  margin-top:clamp(2.6rem,5vw,3.6rem);
  display:grid; gap:clamp(1.1rem,2.2vw,1.9rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.card{
  /* overridden per card in the markup — badge, number pill and rule follow it */
  --accent:var(--honey-500); --accent-soft:#fce1a4; --accent-ink:#b4700a;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  padding:.7rem .7rem 2.4rem;
  background:#fffcf5; border:1px solid rgba(211,131,10,.13); border-radius:26px;
  box-shadow:0 26px 50px -34px rgba(90,60,18,.62);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 38px 64px -32px rgba(90,60,18,.55); border-color:rgba(211,131,10,.32); }

/* the badge hangs out of the photo, so the clipping happens one level down */
.card__media{ position:relative; }
.card__shot{
  display:block; overflow:hidden;
  /* bottom corners are a shallow ellipse: the photo swells down under the badge */
  border-radius:20px 20px 50% 50% / 20px 20px 15% 15%;
}
.card__shot img{
  width:100%; height:auto; aspect-ratio:16 / 10; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__shot img{ transform:scale(1.05); }

.card__ico{
  position:absolute; left:50%; bottom:-30px; z-index:2; translate:-50% 0;
  display:grid; place-items:center; width:60px; height:60px; border-radius:50%;
  background:var(--accent); color:#fff;
  /* the ring is the card's own background, punched out around the badge */
  box-shadow:0 0 0 5px #fffcf5, 0 14px 24px -14px rgba(90,60,18,.9);
  transition:transform .45s cubic-bezier(.34,1.42,.5,1);
}
.card:hover .card__ico{ transform:scale(1.07); }
.card__ico svg{ display:block; width:30px; height:30px; }

.card__body{ padding:3.8rem 1.4rem 0; }
.card__num{
  display:inline-block; padding:.22rem .62rem; border-radius:8px;
  background:var(--accent-soft); color:var(--accent-ink);
  font-size:.76rem; font-weight:800; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.card h3{
  margin:.9rem 0 0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.06rem,1.5vw,1.22rem); letter-spacing:-.01em;
}
.card__dash{ display:block; width:38px; height:3px; margin:.85rem auto; border-radius:999px; background:var(--accent); }
.card p{ margin:0; font-size:.95rem; line-height:1.72; color:#7a6244; }

/* a faint comb in the card's far corner, tinted with that card's accent */
.card__comb{
  position:absolute; right:-8%; bottom:-8%; width:64%; height:48%; z-index:-1;
  color:var(--accent); opacity:.12;
  -webkit-mask-image:radial-gradient(78% 78% at 100% 100%, #000, transparent 76%);
          mask-image:radial-gradient(78% 78% at 100% 100%, #000, transparent 76%);
}

.why__cta{ margin-top:clamp(2.2rem,4.5vw,3.2rem); }

/* --- the jars: four hex shelves on a dark honeycomb wall ---------------
   shelf-hex.png is the four shelves cut out on transparency, so the wall
   itself is CSS: the lighting gradient below was sampled off the original
   render of the scene, which is what keeps the shelves sitting on the same
   surface they were lit against. ---------------------------------------- */
.honeys{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(3.6rem,8vh,6rem) 0 clamp(3.5rem,7vh,5.5rem);
  background:
    linear-gradient(180deg, rgba(10,5,0,0) 0%, rgba(10,5,0,0) 62%, rgba(10,5,0,.42) 100%),
    linear-gradient(90deg,
      #2a1803 0%, #392006 6%, #442608 12%, #4a2a0a 20%, #4b2b0b 28%, #512e0b 36%,
      #4c2b0a 44%, #48290a 50%, #472708 56%, #432508 64%, #392006 72%, #351d04 80%,
      #2f1a03 88%, #241402 94%, #1f1101 100%);
  color:var(--honey-50);
  text-align:center;
}
/* --- decoration. All of it sits behind the copy and is aria-hidden. --- */
.honeys__deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.honeys__deco img{ position:absolute; height:auto; }
/* --- the light burst -------------------------------------------------
   Drawn in CSS rather than painted, so it moves. Each fan is one
   repeating-conic-gradient struck from a point just above the top edge; the
   three pitches (13° / 21° / 6.5°) are deliberately non-multiples, so as
   they drift a couple of degrees against each other the rays never line up
   twice and the beam reads as light rather than as a pattern. The group is
   screened onto the wall, the same way the painted burst was: it only ever
   adds light, so the dark ground it is drawn on drops out. */
.rays{
  position:absolute; top:0; left:50%; translate:-50% 0;
  width:min(1060px, 78%); height:min(620px, 60%);
  mix-blend-mode:screen; pointer-events:none;
}
.rays i{ position:absolute; display:block; }

.rays__fan{
  top:0; left:50%; translate:-50% 0;
  width:200%; height:100%;
  /* the point the rays are struck from, and the point they pivot around */
  transform-origin:50% 0;
  /* light thins out with distance and toward the horizontal */
  -webkit-mask-image:radial-gradient(46% 100% at 50% 0%, #000 0%, rgba(0,0,0,.88) 18%, rgba(0,0,0,.4) 46%, transparent 76%);
          mask-image:radial-gradient(46% 100% at 50% 0%, #000 0%, rgba(0,0,0,.88) 18%, rgba(0,0,0,.4) 46%, transparent 76%);
  will-change:transform, opacity;
}
/* the broad, bright beams */
.rays__fan--a{
  background:repeating-conic-gradient(from 92deg at 50% 0%,
    rgba(255,176,62,0)     0deg,
    rgba(255,190,80,.22)   2.2deg,
    rgba(255,222,146,.38)  3.6deg,
    rgba(255,190,80,.19)   5deg,
    rgba(255,176,62,0)     8deg,
    rgba(255,176,62,0)    13deg);
  filter:blur(7px);
  animation:ray-drift-a 26s ease-in-out infinite alternate;
}
/* fewer, softer, wider — the haze the beams sit in */
.rays__fan--b{
  background:repeating-conic-gradient(from 101deg at 50% 0%,
    rgba(255,162,44,0)    0deg,
    rgba(255,176,60,.20)  3.5deg,
    rgba(255,206,116,.26) 6.5deg,
    rgba(255,176,60,.17)  9.5deg,
    rgba(255,162,44,0)   15deg,
    rgba(255,162,44,0)   21deg);
  filter:blur(16px);
  animation:ray-drift-b 34s ease-in-out infinite alternate;
}
/* fine grain between the beams */
.rays__fan--c{
  background:repeating-conic-gradient(from 96.5deg at 50% 0%,
    rgba(255,206,124,0)    0deg,
    rgba(255,228,168,.15)  1.1deg,
    rgba(255,206,124,0)    2.6deg,
    rgba(255,206,124,0)    6.5deg);
  filter:blur(3px); opacity:.8;
  animation:ray-drift-c 19s ease-in-out infinite alternate;
}

/* the hot core the beams leave from, sitting just off the top edge */
.rays__glow{
  top:-9%; left:50%; translate:-50% 0;
  width:min(600px,62%); aspect-ratio:1.6;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,240,198,.5) 0%, rgba(255,212,124,.27) 34%, rgba(255,186,74,.1) 58%, rgba(255,180,70,0) 74%);
  filter:blur(14px);
  animation:ray-breathe 9s ease-in-out infinite;
}

/* dust caught in the light. Two layers at different speeds, so the near
   motes slide past the far ones instead of the whole field sliding. */
.rays__dust{
  inset:-6% 0 0; opacity:.9;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(circle, rgba(255,244,214,.95) 0 34%, rgba(255,222,160,.35) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,240,206,.85) 0 34%, rgba(255,216,150,.3) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,236,196,.8) 0 34%, rgba(255,212,140,.3) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,246,220,.9) 0 34%, rgba(255,224,164,.3) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,236,196,.75) 0 34%, rgba(255,212,140,.28) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,244,214,.9) 0 34%, rgba(255,222,160,.32) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,238,200,.7) 0 34%, rgba(255,214,146,.26) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,246,220,.85) 0 34%, rgba(255,224,164,.3) 58%, transparent 72%),
    radial-gradient(circle, rgba(255,236,196,.72) 0 34%, rgba(255,212,140,.26) 58%, transparent 72%);
  background-size:9px 9px, 6px 6px, 5px 5px, 8px 8px, 5px 5px, 7px 7px, 4px 4px, 8px 8px, 5px 5px;
  background-position:
    14% 46%, 26% 11%, 34% 63%, 44% 25%, 55% 52%, 62% 9%, 71% 68%, 79% 31%, 89% 57%;
  animation:dust-near 21s ease-in-out infinite alternate, twinkle 5.5s ease-in-out infinite;
}
.rays__dust--far{
  opacity:.55; filter:blur(1.4px);
  background-size:5px 5px, 4px 4px, 3px 3px, 5px 5px, 3px 3px, 4px 4px, 3px 3px, 5px 5px, 3px 3px;
  background-position:
    9% 24%, 21% 59%, 33% 33%, 42% 74%, 52% 18%, 63% 66%, 74% 41%, 84% 78%, 93% 27%;
  animation:dust-far 31s ease-in-out infinite alternate, twinkle 7.7s ease-in-out infinite reverse;
}

/* Each fan pivots a couple of degrees around the point it is struck from and
   fades a little as it goes — that is the whole of the shimmer. Opposite
   directions and prime-ish durations keep the three from ever re-syncing. */
@keyframes ray-drift-a{
  from{ transform:rotate(-2.4deg); opacity:.92; }
  to  { transform:rotate(2.1deg);  opacity:1;   }
}
@keyframes ray-drift-b{
  from{ transform:rotate(3.2deg) scaleY(1);    opacity:.75; }
  to  { transform:rotate(-2.8deg) scaleY(1.06); opacity:1;  }
}
@keyframes ray-drift-c{
  from{ transform:rotate(1.6deg);  opacity:.55; }
  to  { transform:rotate(-1.9deg); opacity:.9;  }
}
@keyframes ray-breathe{ 50%{ transform:scale(1.06); opacity:.82; } }
@keyframes dust-near{
  from{ transform:translate3d(-1.2%, 2.5%, 0); }
  to  { transform:translate3d(1.4%, -3.5%, 0); }
}
@keyframes dust-far{
  from{ transform:translate3d(1%, -1.5%, 0); }
  to  { transform:translate3d(-1.3%, 2.2%, 0); }
}
@keyframes twinkle{ 50%{ opacity:.4; } }
.honeys__leaves{
  top:0; left:0;
  width:clamp(120px, 24vw, 430px);
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.5));
}
.honeys__combo{
  top:-1.5%; right:-2%;
  width:clamp(110px, 20vw, 380px);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
.honeys__sprig{
  left:-2.5%; bottom:0;
  width:clamp(90px, 14vw, 280px);
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
}
.honeys__pine{
  right:-4%; bottom:-1%;
  width:clamp(95px, 15vw, 300px);
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
}
/* scaled up to sit closer to the comb pressed into the wall in the artwork */
.comb--shelf{ color:var(--honey-400); opacity:.08; transform:scale(1.32); }
.honeys__inner{ position:relative; z-index:1; }

.honeys__mark{
  display:block; width:clamp(84px,8vw,118px); height:auto;
  margin:0 auto clamp(.9rem,2vw,1.35rem);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
}
.h2__gold{
  background:linear-gradient(180deg,#ffd77e,#eda017 58%,#d3830a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-lede{
  margin:1.15rem auto 0; max-width:50ch;
  font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.7; color:#e8d7b7; opacity:.88;
}

.jars{
  /* wider than the text shell, the way the shelf wall reads in the artwork */
  --jars-w:min(1420px, 96vw);
  width:var(--jars-w); margin:clamp(2rem,4vw,3.2rem) calc((var(--shell) - var(--jars-w)) / 2) 0;
  display:grid; grid-template-columns:repeat(4,1fr);
  /* no column gap — the four hexagons meet at their corners in the artwork */
  column-gap:0; row-gap:clamp(2rem,4vw,3rem);
  align-items:start;
}
.jar{ position:relative; display:flex; flex-direction:column; }

/* one quarter of the shelf strip. It is still the <button> the lightbox
   listens on, so the whole shelf is the hit area for its jar. */
.jar__shot{
  /* only used where a row breaks — see the narrow layouts at the bottom */
  --edge-mask:linear-gradient(90deg,
    rgba(0,0,0,var(--fl,1)) 0, #000 var(--ml,0%), #000 var(--mr,100%), rgba(0,0,0,var(--fr,1)) 100%);
  position:relative; display:block; width:100%; aspect-ratio:527.25/556;
  appearance:none; border:0; padding:0; margin:0;
  background:url("shelf-hex.png") var(--bx,0%) 0 / 400% 100% no-repeat;
  font:inherit; color:inherit; text-align:inherit;
}
.jar__shot:focus-visible{ outline:3px solid rgba(255,214,130,.85); outline-offset:-6px; }
/* a warm pool of light inside the hexagon, so the jar is lit by the shelf */
.jar__shot::before{
  content:""; position:absolute; z-index:0; inset:10% 16% 20%;
  background:radial-gradient(56% 50% at 50% 60%, rgba(255,183,52,.3), rgba(255,183,52,0) 70%);
  filter:blur(6px);
  transition:opacity .45s ease, transform .45s ease;
}
/* every jar is pre-trimmed to the same 480x612 canvas, so one width and a
   shared bottom offset stand all four on their planks at the same size.
   --jx nudges a jar onto its own hexagon, which the perspective in the
   artwork leaves a few pixels off the tile's centre. */
.jar__shot img{
  position:absolute; z-index:1; left:calc(50% + var(--jx,0%)); bottom:10%;
  width:65%; height:auto; transform:translateX(-50%);
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.5));
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.jar:hover .jar__shot img{
  transform:translate(-50%,-10px);
  filter:drop-shadow(0 26px 22px rgba(0,0,0,.55));
}
.jar:hover .jar__shot::before{ transform:scale(1.12); }

.jar__body{
  display:flex; flex-direction:column; align-items:center;
  padding:0 clamp(.5rem,1.4vw,1rem);
}
.jar__name{
  margin:0 0 .45rem;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.28rem); letter-spacing:-.02em; color:var(--honey-50);
}
/* min-height, so a note that wraps to three lines can't shove one price
   down out of line with the rest of the row */
.jar__note{
  margin:0 0 .8rem; min-height:3.2em; max-width:26ch;
  font-size:.88rem; line-height:1.6; color:#dcc9a6; opacity:.82;
}
.jar__price{ margin:0 0 1rem; }
.jar__price b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.45rem,2.1vw,1.85rem); line-height:1.15; letter-spacing:-.03em;
  background:linear-gradient(180deg,#ffd77e,#eda017 60%,#d3830a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.jar__price small{
  display:block; margin-top:.2rem;
  font-size:.74rem; letter-spacing:.09em; color:#b39c76;
}
.jar__body .btn{ padding:.6rem 1.5rem; font-size:.88rem; }

.honeys__note{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem 1.15rem;
  margin:clamp(2.4rem,5vw,3.4rem) auto 0;
  font-size:.9rem; color:#c7b18a;
}
/* the dot between the two halves — drawn, so it disappears when they wrap */
.honeys__note span + span::before{
  content:""; display:inline-block; vertical-align:middle;
  width:5px; height:5px; margin-right:1.15rem; border-radius:999px;
  background:var(--honey-500);
}

/* --- where we are --- */
.place{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(5rem,10vh,7.5rem) 0 clamp(6rem,12vh,9rem);
  /* the last stop settles the whole bottom edge onto #180e02, which is the
     tone the footer starts from — the two meet with no step to see */
  background:
    linear-gradient(180deg, rgba(247,187,60,0) 84%, rgba(247,187,60,.13) 100%),
    linear-gradient(180deg, rgba(24,14,2,0) 66%, #180e02 100%),
    radial-gradient(120% 95% at 20% 0%, #4a3013 0%, #2c1c07 48%, #1c1204 100%);
  color:var(--honey-50);
}
.comb--place{ color:var(--honey-400); opacity:.07; }

/* inner scrollers on dark ground */
.place ::-webkit-scrollbar-track,
.story ::-webkit-scrollbar-track,
.site-footer ::-webkit-scrollbar-track{ background:rgba(255,215,126,.08); }
/* the apiary illustration, tucked into the bottom corner behind the copy */
.place__scene{
  position:absolute; left:-2.5%; bottom:-40px; z-index:0;
  width:clamp(180px, 24vw, 420px); height:auto;
  opacity:.7; pointer-events:none;
  /* it clears the copy column outright on wide screens; the fade is what
     keeps it out of the way once the shell closes in on the viewport */
  -webkit-mask-image:
    linear-gradient(100deg, #000 45%, rgba(0,0,0,.5) 76%, transparent 96%),
    linear-gradient(180deg, #000 58%, rgba(0,0,0,.4) 86%, transparent 100%);
  mask-image:
    linear-gradient(100deg, #000 45%, rgba(0,0,0,.5) 76%, transparent 96%),
    linear-gradient(180deg, #000 58%, rgba(0,0,0,.4) 86%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.place__inner{
  position:relative; z-index:1;
  display:grid; gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);
  align-items:center;
}
.place__lede{ margin:1.3rem 0 0; max-width:46ch; font-size:1.04rem; line-height:1.75; color:#e6d5b4; }

.place__facts{ margin:1.8rem 0 0; padding:0; list-style:none; display:grid; gap:.85rem; }
.place__facts li{
  display:grid; gap:.15rem;
  padding-left:1.1rem; border-left:2px solid rgba(247,187,60,.45);
  font-size:1rem; font-weight:600; color:var(--honey-50);
}
.place__facts span{
  font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--honey-400);
}

.place__actions{ margin-top:2rem; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
/* white label and arrow on the dark wall; only the underline that wipes in
   on hover stays honey — the base .link-arrow ring is already white, so the
   variant just drops the hero's blue text-shadow and warms the lift */
.link-arrow--dark{ color:#fff; text-shadow:none; }
.link-arrow--dark .link-arrow__t::after{
  background:linear-gradient(90deg,var(--honey-500),var(--honey-300));
  box-shadow:0 0 12px rgba(255,190,70,.55);
}
.link-arrow--dark:hover .link-arrow__ico,
.link-arrow--dark:focus-visible .link-arrow__ico{ box-shadow:0 10px 22px -12px rgba(0,0,0,.9); }

.place__map{
  position:relative; overflow:hidden;
  aspect-ratio:16 / 11; min-height:280px;
  /* A grid item's automatic minimum width is transferred through its
     aspect-ratio from its height. Once min-height wins over the ratio on a
     phone, that minimum comes out wider than the column and the frame hangs
     off the right edge of the page. min-width:0 lets it track the column. */
  min-width:0; max-width:100%;
  border-radius:26px;
  border:1px solid rgba(255,215,126,.28);
  background:linear-gradient(160deg,#3a2610,#241705);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.9);
}
/* the frame is let out past the bottom of its box so overflow:hidden trims
   the 11px line of small print anchored there. Google's logo sits ~19px up,
   so it survives the trim — see the note in index.html. */
.place__map iframe{ display:block; width:100%; height:calc(100% + 13px); border:0; }
.place__pin{
  position:absolute; right:1rem; top:1rem; z-index:2;
  padding:.5rem .9rem; border-radius:999px;
  font-size:.82rem; font-weight:700; color:var(--bark-900);
  background:linear-gradient(160deg,var(--honey-300),var(--honey-500));
  box-shadow:0 12px 24px -12px rgba(0,0,0,.8);
  pointer-events:none;
}

/* --- order form --- */
.order{
  position:relative;
  --pad-y:clamp(4.5rem,9vh,7rem);
  padding:var(--pad-y) 0;
  background:#fef7e8;
}
.order__inner{
  --col-gap:clamp(2rem,4vw,3.4rem);
  position:relative;                 /* containing block for the shot */
  display:grid; gap:var(--col-gap);
  grid-template-columns:minmax(280px,.9fr) minmax(320px,1fr);
  align-items:center;
}
/* the copy is unpositioned, so it would paint under the shot otherwise */
.order__intro{ position:relative; z-index:1; }
.order__lede{ margin:1.2rem 0 0; max-width:44ch; font-size:1.06rem; line-height:1.7; color:#5c3f11; }
.order__perks{ margin:1.6rem 0 0; padding:0; list-style:none; display:grid; gap:.6rem; }
.order__perks li{
  position:relative; padding-left:1.9rem;
  font-size:.96rem; font-weight:600; color:#5c3f11;
}
/* The shot is out of flow: it stands between the copy and the form card and
   rests on the section's bottom edge, with --cut of the slab sliced off by it.
   clip-path does that slicing on the image alone — overflow:hidden on the
   section would also clip the honey picker's panel. */
.order__shot{
  --cut:26px;
  position:absolute; z-index:0;
  /* the perk list is a fixed size while the columns are fluid, so the shot
     holds a floor in px and pulls in faster than the container — that keeps
     the jar clear of the copy instead of scaling straight into it */
  left:clamp(120px,calc(223px - 8.42%),145px); bottom:calc(-1 * (var(--pad-y) + var(--cut)));
  width:min(calc(76% - 210px),720px); max-width:none; height:auto; margin:0;
  clip-path:inset(0 0 var(--cut) 0);
  filter:drop-shadow(0 20px 24px rgba(120,86,26,.2));
}
.order__perks li::before{
  content:""; position:absolute; left:0; top:.16em;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:rgba(58,38,16,.92);
  -webkit-mask:no-repeat center/.62rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
          mask:no-repeat center/.62rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.order__card{
  position:relative;
  padding:clamp(1.6rem,3vw,2.4rem);
  background:linear-gradient(180deg,#fff,#fffaf1);
  border:1px solid rgba(211,131,10,.16); border-radius:28px;
  box-shadow:0 34px 60px -34px rgba(90,60,18,.6), 0 1px 0 #fff inset;
}

/* align-items:end rather than the default stretch: the two fields sharing a
   row have labels of different lengths, and once one of them wraps to a second
   line its input drops below its neighbour's. Bottom-aligning the fields keeps
   the input boxes on one line whatever the labels do. */
.order-form{ display:grid; gap:1.05rem 1.1rem; grid-template-columns:1fr 1fr; align-items:end; }
.order-form[hidden]{ display:none; }   /* display:grid would beat the UA rule */
.field--wide{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field label{ font-size:.82rem; font-weight:700; letter-spacing:.04em; color:#6b532e; }
.field label small{ font-weight:600; color:#9b8461; white-space:nowrap; }

.field input, .field select{
  width:100%; padding:.78rem .95rem;
  font-family:inherit; font-size:.98rem; color:var(--bark-800);
  background:#fff;
  border:1.5px solid rgba(211,131,10,.28); border-radius:14px;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.field input::placeholder{ color:#bfae90; }
.field input:hover, .field select:hover{ border-color:rgba(211,131,10,.5); }
.field input:focus, .field select:focus{
  outline:none; border-color:var(--honey-500);
  box-shadow:0 0 0 4px rgba(247,187,60,.28);
}
/* the browser arrows are useless at this size — the +/- live in the total */
.field input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; padding-right:2.6rem; cursor:pointer; }
.select-wrap::after{
  content:""; position:absolute; right:1rem; top:50%; translate:0 -60%;
  width:.55rem; height:.55rem; pointer-events:none;
  border-right:2px solid var(--honey-600); border-bottom:2px solid var(--honey-600);
  rotate:45deg; transition:translate .25s ease;
}
.select-wrap:hover::after{ translate:0 -35%; }

/* --- custom picker ---------------------------------------------------
   script.js upgrades the native <select> in place: the select stays as the
   value/reset/price source but goes display:none, and the button + listbox
   below take over the interaction. Without JS the native control is what
   renders, so every rule here hangs off .is-custom.                      */
.select-wrap.is-custom{ z-index:1; }
.select-wrap.is-custom > select{ display:none; }
.select-wrap.is-custom::after{ display:none; }
.select-wrap.is-open{ z-index:20; }

.dropdown__trigger{
  position:relative;
  display:flex; align-items:center; gap:.55rem; width:100%;
  padding:.78rem 2.6rem .78rem .95rem;
  font-family:inherit; font-size:.98rem; text-align:left; color:var(--bark-800);
  background:#fff;
  border:1.5px solid rgba(211,131,10,.28); border-radius:14px;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.dropdown__trigger:hover{ border-color:rgba(211,131,10,.5); }
.dropdown__trigger:focus-visible,
.select-wrap.is-open .dropdown__trigger{
  outline:none; border-color:var(--honey-500);
  box-shadow:0 0 0 4px rgba(247,187,60,.28);
}
.dropdown__label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown__label.is-placeholder{ color:#bfae90; }
.dropdown__price{ flex:none; font-weight:700; font-size:.9rem; color:var(--honey-600); }
/* same chevron as the native wrapper's, but it flips when the list opens */
.dropdown__chev{
  position:absolute; right:1rem; top:50%; translate:0 -60%;
  width:.55rem; height:.55rem; pointer-events:none;
  border-right:2px solid var(--honey-600); border-bottom:2px solid var(--honey-600);
  rotate:45deg;
  transition:rotate .3s cubic-bezier(.2,.7,.3,1), translate .3s ease;
}
.select-wrap.is-open .dropdown__chev{ rotate:225deg; translate:0 -25%; }

.dropdown__list{
  position:absolute; left:0; right:0; top:calc(100% + .5rem); z-index:20;
  margin:0; padding:.4rem; list-style:none;
  max-height:min(17rem,46vh); overflow-y:auto; overscroll-behavior:contain;
  background:#fff;
  border:1px solid rgba(211,131,10,.2); border-radius:16px;
  box-shadow:0 26px 46px -22px rgba(90,60,18,.5), 0 2px 8px -5px rgba(90,60,18,.45);
  /* The panel opens by moving its own clip edge, not by transforming the box.
     A translate or a scale here would carry every row with it, so each option
     would slide a few pixels into place as the list appeared — which reads as
     the list settling rather than opening. Clipping leaves the rows exactly
     where they land. The side and bottom insets are negative so the drop
     shadow stays outside the clip and is not cut off. */
  /* visibility rather than [hidden], so the panel can animate both ways and
     still leaves the accessibility tree while it is closed */
  visibility:hidden; opacity:0;
  clip-path:inset(0% -25% 100% -25%);
  transition:opacity .18s ease, clip-path .26s cubic-bezier(.2,.7,.3,1), visibility 0s linear .26s;
}
.select-wrap.is-open .dropdown__list{
  visibility:visible; opacity:1;
  clip-path:inset(-8% -25% -40% -25%);
  transition:opacity .16s ease, clip-path .26s cubic-bezier(.2,.7,.3,1), visibility 0s;
}
/* no room below → the panel drops upward instead, unrolling from its foot */
.select-wrap.is-up .dropdown__list{
  top:auto; bottom:calc(100% + .5rem);
  clip-path:inset(100% -25% 0% -25%);
}
.select-wrap.is-up.is-open .dropdown__list{ clip-path:inset(-40% -25% -8% -25%); }

.dropdown__opt{
  display:flex; align-items:center; gap:.6rem;
  padding:.62rem .75rem; border-radius:10px;
  font-size:.95rem; color:var(--bark-800); cursor:pointer;
  transition:background-color .16s ease;
}
.dropdown__opt + .dropdown__opt{ margin-top:2px; }
.dropdown__opt--empty{ color:#a89170; }
.dropdown__opt__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown__opt__price{ flex:none; font-weight:700; font-size:.88rem; color:var(--honey-600); }
.dropdown__opt.is-active{ background:var(--honey-100); }
.dropdown__opt[aria-selected="true"]{ background:linear-gradient(160deg,var(--honey-100),#ffe3a8); font-weight:700; }
.dropdown__opt__tick{
  flex:none; width:1.05rem; height:1.05rem; opacity:0;
  background:var(--honey-600);
  -webkit-mask:no-repeat center/1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
          mask:no-repeat center/1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  transition:opacity .16s ease;
}
.dropdown__opt[aria-selected="true"] .dropdown__opt__tick{ opacity:1; }

.field__err{
  margin:0; min-height:0; font-size:.8rem; font-weight:600; color:#b3261e;
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .25s ease, max-height .25s ease;
}
.field.is-invalid input, .field.is-invalid select,
.field.is-invalid .dropdown__trigger{
  border-color:#d9584c; background:#fff6f5;
  box-shadow:0 0 0 4px rgba(217,88,76,.16);
}
.field.is-invalid .field__err{ opacity:1; max-height:3em; }
.field.is-invalid{ animation:field-shake .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes field-shake{
  10%,90%{ transform:translateX(-2px); }
  30%,70%{ transform:translateX(3px); }
  50%{ transform:translateX(-3px); }
}

.order-total{
  margin-top:.4rem; padding:1rem 1.1rem;
  background:rgba(255,236,196,.6);
  border:1px dashed rgba(211,131,10,.4); border-radius:16px;
  display:grid; gap:.45rem;
}
.order-total__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; font-size:.92rem; color:#7c6444; }
.order-total__row b{ font-weight:700; color:var(--bark-800); }
.order-total__row--grand{
  margin-top:.35rem; padding-top:.6rem;
  border-top:1px solid rgba(211,131,10,.28);
  font-size:1rem; font-weight:700; color:var(--bark-800);
}
.order-total__row--grand b{
  font-family:var(--display); font-weight:800; font-size:1.45rem; line-height:1.1; letter-spacing:-.03em;
  background:linear-gradient(180deg,#e9a41a,var(--honey-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.order-form__submit{ width:100%; margin-top:.3rem; padding-block:1.05rem; }
.order-form__note{ margin:0; text-align:center; font-size:.76rem; color:#a89170; }

/* --- confirmation --- */
.order-done{ text-align:center; padding:1.2rem 0 .4rem; }
.order-done[hidden]{ display:none; }
.tick{ width:78px; height:78px; margin:0 auto .9rem; display:block; }
.tick__circle{
  fill:none; stroke:var(--honey-500); stroke-width:3;
  stroke-dasharray:151; stroke-dashoffset:151;
}
.tick__mark{
  fill:none; stroke:#1f6b2c; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:36; stroke-dashoffset:36;
}
.order-done.is-in{ animation:done-pop .5s cubic-bezier(.2,.7,.3,1); }
.order-done.is-in .tick__circle{ animation:tick-draw .6s cubic-bezier(.65,0,.45,1) forwards; }
.order-done.is-in .tick__mark{ animation:tick-draw .35s cubic-bezier(.65,0,.45,1) .42s forwards; }
@keyframes tick-draw{ to{ stroke-dashoffset:0; } }
@keyframes done-pop{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
.order-done h3{
  margin:0 0 .5rem; font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(1.45rem,3vw,1.95rem); color:var(--bark-800);
}
.order-done__msg{ margin:0 auto; max-width:34ch; font-size:1rem; line-height:1.6; color:#6b563a; }
.order-done__msg b{ color:var(--bark-800); }
.order-done__sub{ margin:.7rem auto 1.4rem; max-width:34ch; font-size:.88rem; color:#9b8461; }

/* --- footer --- */
.site-footer{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(3.6rem,7vw,5.2rem) 0 1.5rem;
  /* the etching scales to the full width and hangs off the bottom edge; its
     dense corners frame the columns and the clear middle stays behind them.
     100% auto rather than cover, so a tall stacked footer on a phone can't
     scale it up and crop the artwork away at the sides. The scrim on top of
     it falls away toward every edge, so the corner art keeps its contrast,
     the columns get something quiet to sit on, and the top stays clear for
     the glow that carries over the seam from .place. */
  background:
    radial-gradient(78% 92% at 50% 62%, rgba(20,11,2,.58) 0%, rgba(20,11,2,.4) 58%, rgba(20,11,2,0) 100%),
    url("footer-art.png") center bottom / 100% auto no-repeat,
    linear-gradient(180deg, rgba(247,187,60,.13) 0%, rgba(247,187,60,0) 26%),
    linear-gradient(180deg, #180e02 0%, #35220e 22%, #2b1a09 54%, var(--bark-900) 100%);
  color:#c9b18a; font-size:.92rem;
}
/* a horizon rather than a rule. The glow either side of the seam is on the
   two sections' own backgrounds so it runs straight through the join; all
   that is left here is a hairline of honey that dies away at both ends. */
.site-footer::before{
  content:""; position:absolute; z-index:0; inset:0 0 auto 0; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,214,130,0) 0%, rgba(255,214,130,.4) 28%,
                                    rgba(255,214,130,.4) 72%, rgba(255,214,130,0) 100%);
}
.comb--footer{ color:var(--honey-400); opacity:.05; }

.site-footer__inner{
  position:relative; z-index:1;
  display:grid; gap:2.6rem 2rem; align-items:start;
  grid-template-columns:minmax(250px,1.7fr) repeat(3, minmax(140px,1fr));
}
.footer-logo{ height:clamp(78px,8vw,106px); width:auto; }
.foot-brand p{ margin:1.15rem 0 1.5rem; max-width:40ch; line-height:1.75; color:#a8916d; }

.socials{ display:flex; gap:.7rem; }
.socials a{
  display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  color:var(--honey-300);
  background:rgba(255,215,126,.08); border:1px solid rgba(255,215,126,.22);
  transition:transform .35s cubic-bezier(.34,1.42,.5,1), background .35s ease,
             color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.socials svg{ width:20px; height:20px; }
.socials a:hover{
  transform:translateY(-5px) rotate(-5deg); color:var(--bark-900);
  background:linear-gradient(160deg,var(--honey-300),var(--honey-500));
  border-color:transparent; box-shadow:0 16px 26px -14px rgba(255,190,80,.85);
}
.socials a:active{ transform:translateY(0) scale(.92); }
.socials a:focus-visible{ outline:2px solid var(--honey-300); outline-offset:3px; }

.foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:.62rem; }
.foot-col h4{
  margin:0 0 .45rem; font-size:.76rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--honey-400);
}
.foot-col a{
  position:relative; color:#c9b18a;
  transition:color .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.foot-col a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.foot-col a:hover{ color:var(--honey-300); transform:translateX(4px); }
.foot-col a:hover::after{ transform:scaleX(1); transform-origin:left; }
.foot-col a:focus-visible{ outline:2px solid var(--honey-300); outline-offset:4px; border-radius:4px; }
.foot-col span{ color:#8d7a5c; line-height:1.5; }
.foot-col--contact a{ font-weight:600; }

.site-footer__bar{
  position:relative; z-index:1;
  margin-top:clamp(2.6rem,5vw,3.6rem); padding-top:1.5rem;
  border-top:1px solid rgba(255,215,126,.14);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.7rem 1.8rem; font-size:.82rem; color:#8d7a5c;
}
.foot-legal{ display:flex; flex-wrap:wrap; gap:1.3rem; }
.foot-legal a{ transition:color .3s ease; }
.foot-legal a:hover{ color:var(--honey-300); }

/* ---------------------------------------------------------
   Back to top
   --------------------------------------------------------- */
/* Quiet by default: a thin glass disc that sits on the artwork instead of
   competing with it. The honey only comes up on hover. */
.to-top{
  position:fixed; z-index:50;
  right:clamp(1rem,2.5vw,2rem); bottom:clamp(1rem,2.5vw,2rem);
  width:46px; height:46px; padding:0;
  display:grid; place-items:center;
  border:1px solid rgba(255,215,126,.4); border-radius:50%;
  color:var(--honey-300);
  background:rgba(30,19,5,.82);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s,
             background-color .3s ease, border-color .3s ease, color .3s ease;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{
  background:var(--honey-400);
  border-color:var(--honey-400);
  color:var(--bark-900);
}
.to-top:active{ transform:translateY(1px); transition-duration:.09s; }
.to-top:focus-visible{ outline:2px solid var(--honey-300); outline-offset:3px; }
.to-top svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s ease;
}
.to-top:hover svg{ transform:translateY(-2px); }
/* out of the way of the open menu sheet */
html.nav-open .to-top{ opacity:0; visibility:hidden; transform:translateY(12px); }

/* =========================================================
   Legal pages — terms.html / privacy.html
   ---------------------------------------------------------
   Two standalone documents that borrow the site's shell. The header is
   pinned to .is-solid in their markup (there is no hero to scroll past),
   so the hero band below has to clear it on its own.
   ========================================================= */
.legal-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(9rem,17vh,12rem) 0 clamp(3.5rem,7vh,5.5rem);
  background:radial-gradient(120% 95% at 50% 0%, #4a3013 0%, #2c1c07 48%, #1c1204 100%);
  color:var(--honey-50); text-align:center;
}
.legal-hero__inner{ position:relative; z-index:1; }
.legal-hero .lede{ color:#efe0c2; }
.legal-hero__date{
  display:inline-block; margin-top:1.9rem;
  padding:.42rem 1.05rem; border-radius:999px;
  border:1px solid rgba(255,215,126,.28); background:rgba(255,215,126,.07);
  font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--honey-300);
}

.legal-body{
  position:relative;
  padding:clamp(3.4rem,7vw,5.4rem) 0 clamp(4.5rem,9vw,7rem);
  background:var(--honey-50);
}
/* a reading column, not the full 1180px shell — long prose at that width is
   unreadable, and the numbered rail needs the room on the left */
.legal-doc{ width:min(760px, 90vw); margin-inline:auto; }

.legal-sec{ margin-top:clamp(2.4rem,5vw,3.4rem); }
.legal-sec:first-child{ margin-top:0; }
.legal-sec > h2{
  display:flex; align-items:baseline; gap:.85rem;
  margin:0 0 1rem;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.25rem,2.6vw,1.65rem); line-height:1.25; letter-spacing:-.02em;
  color:var(--bark-800);
  scroll-margin-top:7rem;          /* the fixed bar must not cover the jump target */
}
/* the number is a counter, so inserting a clause never means renumbering */
.legal-doc{ counter-reset:legal; }
.legal-sec > h2::before{
  counter-increment:legal; content:counter(legal);
  flex:none; display:grid; place-items:center;
  width:1.95em; height:1.95em; border-radius:50%;
  border:1px solid rgba(211,131,10,.28); background:rgba(247,187,60,.13);
  font-family:var(--sans); font-size:.62em; font-weight:800; letter-spacing:0;
  color:var(--honey-600);
  transform:translateY(-.12em);
}
.legal-sec p{
  margin:0 0 1rem;
  font-size:1rem; line-height:1.8; color:#5d4a30;
}
.legal-sec p:last-child{ margin-bottom:0; }
.legal-sec b, .legal-sec strong{ color:var(--bark-800); font-weight:700; }
.legal-sec a{
  color:var(--honey-600); font-weight:600;
  border-bottom:1px solid rgba(211,131,10,.35);
  transition:color .3s ease, border-color .3s ease;
}
.legal-sec a:hover{ color:var(--bark-800); border-color:var(--bark-800); }

.legal-list{ margin:0 0 1rem; padding:0; list-style:none; }
.legal-list li{
  position:relative; padding-left:1.6rem; margin-bottom:.65rem;
  font-size:1rem; line-height:1.75; color:#5d4a30;
}
.legal-list li::before{
  content:""; position:absolute; left:.1rem; top:.72em;
  width:7px; height:7px; border-radius:2px;
  background:var(--honey-400); transform:rotate(45deg);
}
.legal-list li:last-child{ margin-bottom:0; }

/* the contact card that closes both documents */
.legal-card{
  margin-top:clamp(2.6rem,5vw,3.6rem);
  padding:clamp(1.5rem,3vw,2.1rem);
  border:1px solid rgba(211,131,10,.2); border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,236,196,.5));
}
.legal-card h3{
  margin:0 0 .55rem;
  font-family:var(--display); font-weight:800; font-size:1.15rem; letter-spacing:-.02em;
  color:var(--bark-800);
}
.legal-card p{ margin:0 0 1rem; font-size:.97rem; line-height:1.7; color:#5d4a30; }
.legal-card__rows{ display:grid; gap:.45rem; font-size:.97rem; }
.legal-card__rows a{ font-weight:700; color:var(--honey-600); }
.legal-card__rows a:hover{ color:var(--bark-800); }

/* back to the site, above the numbered clauses */
.legal-back{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:clamp(1.8rem,4vw,2.6rem);
  font-size:.9rem; font-weight:700; color:var(--honey-600);
  transition:color .3s ease, gap .3s ease;
}
.legal-back:hover{ color:var(--bark-800); gap:.75rem; }
.legal-back svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1120px) and (min-width: 861px){
  .site-header{ gap:1.2rem; }
  .site-nav{ gap:1.15rem; font-size:.88rem; }
  .brand__logo{ height:clamp(56px, 7vw, 92px); }
  .header-cta{ padding:.55rem 1.05rem; font-size:.85rem; }
}

@media (max-width: 1020px){
  .site-footer__inner{ grid-template-columns:repeat(2, minmax(150px,1fr)); }
  .foot-brand{ grid-column:1 / -1; }
}

@media (max-width: 900px){
  /* two up, with the odd card centred on the row below */
  .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cards > .card:last-child{ grid-column:1 / -1; width:min(100%,380px); margin-inline:auto; }
  .place__inner{ grid-template-columns:minmax(0,1fr); }
  .place__map{ aspect-ratio:16 / 12; }
}

/* the copy, the shot and the form stop fitting side by side well before the
   rest of the page breaks, so the order section stacks on its own schedule */
@media (max-width: 1100px){
  .order__inner{ grid-template-columns:1fr; }
  .order__intro{ text-align:center; }
  .order__lede{ margin-inline:auto; }
  .order__perks{ justify-items:center; }
  /* the header centres with the column, so the ornaments go back to symmetric */
  .order__intro .kicker--start{ justify-content:center; }
  .order__intro .kicker--start::before{ display:block; }
  .order__intro .flourish--start{ text-align:center; }
  /* stacked: back into the flow, under the copy */
  .order__shot{
    position:static; inset:auto; clip-path:none;
    width:min(100%,540px); margin:clamp(1.5rem,3vw,2.2rem) auto 0;
  }
}

@media (max-width: 860px){
  .site-nav, .header-cta{ display:none; }
  .burger{ display:block; }
  .hero{ height:250vh; }
  .brand__logo{ height:clamp(58px, 16vw, 96px); }
  .site-header.is-solid .brand__logo{ height:clamp(46px, 12vw, 70px); }
  .layer--title{ padding-top:16vh; }
  .title{ white-space:normal; font-size:clamp(2.2rem, 9.6vw, 4.2rem); line-height:1.22; }
  .subtitle br{ display:none; }
  .subtitle{ margin-top:1.1rem; }
  .title-actions{ margin-top:1.6rem; gap:1.1rem; }
  .c-f4, .c-m3{ display:none; }
  /* the hero already has bees; a second flight path this close to the
     headline just crowds it once the column narrows */
  .why__bee-line{ display:none; }
}

@media (max-width: 620px){
  .cards{ grid-template-columns:1fr; }
  .cards > .card:last-child{ grid-column:auto; width:auto; }
  .flourish svg{ width:clamp(132px,38vw,168px); }
  /* three across never fit, and wrapping left a lopsided 2 + 1 with the long
     "надморска височина" label crowding its neighbour. One per row instead:
     the numbers line up down the middle and each label gets its own width. */
  .stats{
    flex-direction:column; align-items:center;
    gap:clamp(1.5rem,6vw,2.1rem);
    margin-top:clamp(2.4rem,8vw,3.2rem);
  }
  .stats > div{ width:100%; }
  .stats dt{ font-size:clamp(2.4rem,13vw,3.1rem); }
  .stats dd{ margin-top:.35rem; font-size:.8rem; letter-spacing:.12em; }
  /* the frame is the tallest thing in the stacked column; give it back the
     height the 16/12 ratio loses at this width */
  .place__map{ aspect-ratio:4 / 3; min-height:260px; }
}

/* short viewports (laptops, landscape phones): the headline block is measured
   in rem but the space above the hill is measured in vh — shrink it to keep
   the whole block clear of the honey jar at rest */
@media (max-height: 820px) and (min-width: 861px){
  .brand__logo{ height:clamp(44px, 4.4vw, 66px); }
  .layer--title{ padding-top:13.5vh; }
  .title{ font-size:clamp(2rem, 5vw, 4.2rem); }
  .eyebrow{ margin-bottom:.8rem; }
  .subtitle{ margin-top:1rem; font-size:1rem; }
  .title-actions{ margin-top:1.5rem; }
}

@media (min-width: 861px){
  .menu{ display:none; }
}

/* --- the shelf wall, narrower ------------------------------------------
   The tiles only rebuild a continuous wall while they sit edge to edge, so
   the grid drops 4 -> 2 -> 1 and the pairs keep butting together. Once a
   tile stands alone its side crops need feathering too, or the strip's own
   left and right edges show against the section background. ------------- */
/* The strip is sliced where two hexagons touch, so every cut edge carries a
   few pixels of its neighbour's corner. Butted together they read as the
   artwork; wherever the row breaks, that edge gets feathered instead. */
@media (max-width: 999px){
  .jars{ --jars-w:min(880px, 96vw); grid-template-columns:repeat(2,1fr); row-gap:clamp(2.4rem,6vw,3.4rem); }
  /* the section grows tall as the grid stacks; the burst is pulled wider and
     shorter to stay a fan instead of stretching into one vertical shaft */
  .rays{ width:min(940px,116%); height:min(460px,34%); }
  .jar__note{ min-height:4.8em; }
  .jars > .jar:nth-child(2) > .jar__shot,
  .jars > .jar:nth-child(3) > .jar__shot{
    -webkit-mask-image:var(--edge-mask); mask-image:var(--edge-mask);
  }
  .jars > .jar:nth-child(2) > .jar__shot{ --fr:0; --mr:96.5%; }
  .jars > .jar:nth-child(3) > .jar__shot{ --fl:0; --ml:3.5%; }
}
@media (max-width: 520px){
  .jars{ --jars-w:min(360px, 92vw); grid-template-columns:1fr; }
  .rays{ width:150%; height:min(360px,20%); }
  .jar__note{ min-height:0; }
  .jars > .jar > .jar__shot{ -webkit-mask-image:var(--edge-mask); mask-image:var(--edge-mask); }
  .jars > .jar:nth-child(1) > .jar__shot{ --fr:0; --mr:96.5%; }
  .jars > .jar:nth-child(2) > .jar__shot{ --fl:0; --ml:3.5%; --fr:0; --mr:96.5%; }
  .jars > .jar:nth-child(3) > .jar__shot{ --fl:0; --ml:3.5%; --fr:0; --mr:96.5%; }
  .jars > .jar:nth-child(4) > .jar__shot{ --fl:0; --ml:3.5%; }
}

/* --- the order form, one field per row ---------------------------------
   Half of the card is about 140px here: the honey picker truncates its own
   placeholder, and "Брой буркани (450 г)" wraps to a second line and drags
   its input out of line with the picker beside it. Both columns become one,
   so every control shares the same left and right edge as the address field
   above them. */
@media (max-width: 520px){
  .order-form{ grid-template-columns:minmax(0,1fr); gap:.95rem; }
  .field{ grid-column:1 / -1; }
}

/* =========================================================
   Jar lightbox
   ========================================================= */
html.lb-open{ overflow:hidden; }

.lightbox{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:clamp(4.5rem,9vh,6rem) clamp(1rem,4vw,3rem) clamp(1.5rem,5vh,3rem);
}
.lightbox[hidden]{ display:none; }
.lightbox__veil{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(58,38,16,.88), rgba(16,10,2,.95));
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox.is-in .lightbox__veil{ opacity:1; }

/* jar on the left, what is in it on the right. Without a facts panel the
   grid collapses to the single media column and the dialog looks as it did. */
.lightbox__fig{
  position:relative; z-index:1; margin:0; min-height:0;
  display:grid; justify-items:center; align-items:center;
  gap:clamp(1.2rem,3vw,2.6rem);
  opacity:0;
  transition:opacity .3s ease;
}
.lightbox.has-facts .lightbox__fig{
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,30vw,400px));
  width:min(1180px, 96vw);
}
.lightbox.is-in .lightbox__fig{ opacity:1; }
.lightbox__media{
  min-width:0; min-height:0;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
/* The stage is sized from the viewport, never from the picture in it, so the
   box is the same before the file arrives, after it arrives, and for a jar of
   a different shape. Nothing below it moves. */
.lightbox__shot{
  flex:none; display:grid; place-items:center;
  width:min(88vw,620px); max-width:100%;
  height:calc(100vh - 15rem);
  height:calc(100dvh - 15rem);
  max-height:720px;
}
.lightbox__img{
  grid-area:1 / 1;
  min-height:0; width:auto; height:auto;
  max-width:100%; max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
  transition:opacity .3s ease;
}
.lightbox__cap{
  flex:none;
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.15rem,2.4vw,1.65rem); color:var(--honey-100); text-align:center;
}
/* --- what is in the jar ------------------------------------------------
   The panel is a scroll container in its own right: on a short window the
   dialog stays put and the composition scrolls inside it, rather than the
   whole dialog growing past the viewport. */
.lightbox__facts{
  align-self:stretch; justify-self:stretch;
  min-width:0; min-height:0; max-height:calc(100vh - 13rem); max-height:calc(100dvh - 13rem);
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(1.1rem,2vw,1.6rem) clamp(1.1rem,2vw,1.5rem);
  background:linear-gradient(180deg, rgba(58,38,16,.62), rgba(30,19,5,.72));
  border:1px solid rgba(247,187,60,.22); border-radius:20px;
  text-align:left; color:#e8d7b7;
}
/* thinner than the page's bar, and the track is inset top and bottom so the
   thumb stays inside the panel's rounded corners instead of running past them */
.lightbox__facts::-webkit-scrollbar{ width:7px; }
.lightbox__facts::-webkit-scrollbar-track{ background:transparent; margin:18px 0; }
.lightbox__facts::-webkit-scrollbar-thumb{
  border-radius:999px; border:1.5px solid transparent;
  background:linear-gradient(180deg,var(--honey-300),var(--honey-500) 55%,var(--honey-600));
  background-clip:padding-box;
}
/* Firefox has no per-side track control; thin + no arrows is the best it does */
@supports not selector(::-webkit-scrollbar){
  .lightbox__facts{ scrollbar-width:thin; scrollbar-color:var(--honey-500) transparent; }
}
.lightbox__facts:focus-visible{ outline:2px solid var(--honey-300); outline-offset:3px; }
.facts__lede{
  margin:0 0 1.2rem; font-size:.92rem; line-height:1.65; color:#f0e2c6;
}
.facts__h{
  margin:0 0 .7rem; padding-bottom:.5rem;
  border-bottom:1px solid rgba(247,187,60,.2);
  font-family:var(--display); font-weight:800;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--honey-300);
}
.facts__h span{ font-weight:600; letter-spacing:.08em; text-transform:none; opacity:.7; }
.facts__h + .facts__h,
.facts__nut + .facts__h{ margin-top:1.4rem; }

.facts__nut{ margin:0; }
.facts__nut > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.4rem 0;
}
.facts__nut > div + div{ border-top:1px solid rgba(255,255,255,.06); }
/* the breakdown rows sit under their total */
.facts__nut > div.is-sub{ padding-left:.9rem; font-size:.86em; opacity:.78; }
.facts__nut dt{ margin:0; font-size:.88rem; color:#d8c49a; }
.facts__nut dd{
  margin:0; flex:none;
  font-weight:700; font-size:.88rem; color:var(--honey-100);
  font-variant-numeric:tabular-nums;
}

.facts__notes{ margin:0; padding:0; list-style:none; display:grid; gap:.6rem; }
.facts__notes li{
  position:relative; padding-left:1.15rem;
  font-size:.85rem; line-height:1.6; color:#dcc9a6;
}
.facts__notes li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:.4rem; height:.44rem; background:var(--honey-400);
  /* a small comb cell, so the bullets belong to the rest of the page */
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* the jars' own copies are only a source for the dialog */
.jar__facts[hidden]{ display:none; }

/* the full-size jars are a couple of MB each, so the stage says it is working.
   It hangs off the stage rather than the figure, so it stays over the picture
   once the composition panel takes half the dialog. */
.lightbox__shot::after{
  content:""; grid-area:1 / 1; width:38px; height:38px;
  border-radius:50%; border:3px solid rgba(255,215,126,.25); border-top-color:var(--honey-300);
  opacity:0; transition:opacity .2s ease;
  animation:lb-spin .8s linear infinite;
}
.lightbox.is-loading .lightbox__shot::after{ opacity:1; }
.lightbox.is-loading .lightbox__img{ opacity:0; }
@keyframes lb-spin{ to{ transform:rotate(360deg); } }

/* the jar and its composition stop fitting side by side: the panel goes under
   the jar and the dialog itself becomes the scroll container */
@media (max-width: 900px){
  .lightbox.has-facts .lightbox__fig{
    grid-template-columns:minmax(0,1fr);
    width:min(560px,94vw);
    align-content:start;
    max-height:calc(100vh - 9rem);
    max-height:calc(100dvh - 9rem);
    overflow-y:auto; overscroll-behavior:contain;
  }
  .lightbox.has-facts .lightbox__shot{
    height:min(46vh,400px);
    height:min(46dvh,400px);
  }
  /* it no longer scrolls on its own — the figure around it does */
  .lightbox.has-facts .lightbox__facts{ max-height:none; overflow:visible; }
}


/* No opacity transition here on purpose: the fade-in lives on the .is-in rule
   below, so when that class comes off the button snaps out with the click
   instead of hanging over the page for the length of the veil's fade. */
.lightbox__x{
  position:absolute; z-index:2;
  top:clamp(.9rem,2.4vh,1.6rem); right:clamp(.9rem,2.4vw,1.6rem);
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,215,126,.34);
  background:rgba(255,255,255,.1); color:var(--honey-100);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.34,1.42,.5,1), background-color .3s ease, border-color .3s ease;
}
.lightbox.is-in .lightbox__x{
  opacity:1; pointer-events:auto;
  transition:opacity .3s ease, transform .35s cubic-bezier(.34,1.42,.5,1), background-color .3s ease, border-color .3s ease;
}
.lightbox__x:hover{ background:rgba(255,215,126,.2); border-color:var(--honey-300); transform:rotate(90deg); }
.lightbox__x:active{ transform:rotate(90deg) scale(.94); }
.lightbox__x:focus-visible{ outline:3px solid rgba(255,236,196,.9); outline-offset:3px; }
.lightbox__x svg{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round;
}

/* =========================================================
   Reduced motion — keep the layering, drop the animation
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cloud img, .sun, .bee, .bee i, .bee__wings, .scroll-cue i::after{ animation:none !important; }
  /* the burst stays, it just stops moving */
  .rays i{ animation:none !important; }
  .js .title-actions > *{ animation:none; }
  .btn::before, .btn::after{ animation:none !important; }
  .btn:hover, .btn:active, .link-arrow:hover, .link-arrow:active{ transform:none; }
  .menu__links a:hover, .menu__links a:active{ padding-left:.3rem; }
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .menu{ transition:visibility .01s; }
  .menu__wash{ transition:none; transform:scale(1); }
  .menu__links a, .menu__social{ transition:none; }
  .menu .menu__cta{ transition:none; }
  html.nav-open .menu__links a,
  html.nav-open .menu__cta,
  html.nav-open .menu__social{ animation:none; }
  .jar:hover, .jar:hover .jar__shot img, .socials a:hover{ transform:none; }
  .lightbox__veil, .lightbox__fig, .lightbox__img{ transition:none; }
  .lightbox__fig{ transform:none; }
  .lightbox__x:hover, .lightbox__x:active{ transform:none; }
  .lightbox.is-in .lightbox__x{ transition:none; }
  .card:hover, .card:hover .card__shot img, .card:hover .card__ico,
  .btn:hover .btn__arrow, .btn:active .btn__arrow{ transform:none; }
  .field.is-invalid{ animation:none; }
  .dropdown__list, .select-wrap.is-up .dropdown__list{ clip-path:none; }
  .dropdown__list{ transition:opacity .01s, visibility 0s linear .01s; }
  .select-wrap.is-open .dropdown__list,
  .select-wrap.is-up.is-open .dropdown__list{ transition:opacity .01s, visibility 0s; clip-path:none; }
  .dropdown__chev{ transition:none; }
  .order-done.is-in, .order-done.is-in .tick__circle, .order-done.is-in .tick__mark{ animation:none; }
  .to-top:hover, .to-top:hover svg{ transform:none; }
  .order-done .tick__circle, .order-done .tick__mark{ stroke-dashoffset:0; }
  .hero{ height:180vh; }
  .hero__stage{ --cloudn-y:-30vh; }
  .bee{ display:none; }
}