:root{
  /* —— paper / light canvas —— */
  --paper:      #FBF7F1;
  --paper-2:    #FFFDFA;
  --paper-warm: #F6EFE6;
  --wash-edge:  rgba(60,46,52,.08);

  /* —— petal washes —— */
  --blush:      #F6C9D6;
  --blush-deep: #E59BB4;
  --lilac:      #D9C7EE;
  --lilac-deep: #B79BE0;
  --butter:     #FBE6A8;
  --butter-deep:#F4CF74;
  --sage:       #CFE1C2;
  --sage-deep:  #A7C795;
  --sky:        #C8E2EC;
  --sky-deep:   #9BCAD9;

  /* —— ink / accents —— */
  --ink:        #3A2C32;
  --ink-soft:   #6E5A62;
  --bloom:      #C2477E;
  --bloom-deep: #9C2F62;
  --grape:      #6E4FA0;

  /* —— spacing scale —— */
  --s-1:.5rem; --s-2:.85rem; --s-3:1.25rem; --s-4:2rem;
  --s-5:3rem;  --s-6:4.5rem; --s-7:6.5rem;  --s-8:9rem;

  /* —— radii (organic, never sharp) —— */
  --r-sm:14px; --r-md:22px; --r-lg:34px; --r-xl:48px;
  --r-blob:62% 38% 55% 45% / 55% 48% 52% 45%;

  /* —— shadows: soft, tinted, watercolour-diffuse —— */
  --shadow-sm: 0 4px 18px -8px rgba(120,70,95,.22);
  --shadow-md: 0 22px 50px -24px rgba(120,70,95,.30);
  --shadow-lg: 0 44px 90px -38px rgba(108,79,160,.34);
  --ring:      0 0 0 1px var(--wash-edge);

  /* —— layout / motion —— */
  --maxw: 1200px;
  --gutter: clamp(1.2rem, 4vw, 2.6rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.34,1.4,.5,1);

  /* —— type —— */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
   AKVARELL-AED — global / shared
   Watercolour garden: light paper, painterly washes, soft serif.
   ============================================================ */

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-body);
  color:var(--ink);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
  /* LIGHT atmospheric paper: layered watercolour blooms over warm paper */
  background-color:var(--paper);
  background-image:
    radial-gradient(46rem 36rem at 12% -4%, rgba(246,201,214,.55), transparent 60%),
    radial-gradient(40rem 34rem at 96% 8%, rgba(217,199,238,.50), transparent 62%),
    radial-gradient(50rem 40rem at 88% 64%, rgba(251,230,168,.40), transparent 60%),
    radial-gradient(44rem 38rem at 4% 86%, rgba(207,225,194,.50), transparent 62%),
    radial-gradient(60rem 50rem at 50% 120%, rgba(200,226,236,.45), transparent 60%);
  background-attachment:fixed;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
:focus-visible{ outline:2.5px solid var(--bloom); outline-offset:3px; border-radius:4px; }

/* —— grain / paper-tooth overlay (very faint, keeps it artisanal) —— */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* —— container convention —— */
.container,
.section-head,
.products__grid,
.products__cta,
.upcoming__inner,
.contact__inner,
.footer__inner{
  width:min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline:auto;
}

/* ============================================================
   REVEAL (global hook — do not duplicate elsewhere)
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(34px) scale(.985);
  filter:blur(6px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  will-change:opacity, transform;
}
.reveal.in{
  opacity:1;
  transform:none;
  filter:blur(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ============================================================
   SHARED TYPE
   ============================================================ */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body);
  font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--bloom); margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; width:1.9em; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--bloom), var(--butter-deep));
}
/* legacy light-modifier kept harmless: on our LIGHT sections it just darkens slightly */
.eyebrow--light{ color:var(--grape); }

.section-title{
  font-family:var(--f-display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:1.02;
  font-size:clamp(2.2rem, 5.2vw, 3.8rem);
  letter-spacing:-.015em;
  color:var(--ink);
}
.section-title em{
  font-style:italic;
  color:var(--bloom);
  position:relative;
}
/* legacy --light modifier must NOT turn text near-white on our light bg */
.section-title--light{ color:var(--ink); }

.section-intro{
  max-width:50ch; margin-top:1.25rem;
  font-size:clamp(1.02rem,1.6vw,1.12rem);
  color:var(--ink-soft);
}
.section-intro--light{ color:var(--ink-soft); }

.section-head{ margin-bottom:3.4rem; max-width:62ch; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--f-body); font-weight:700; font-size:.95rem;
  letter-spacing:.01em; padding:.95em 1.85em; border-radius:100px;
  cursor:pointer; white-space:nowrap; border:1.5px solid transparent;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease), background .4s var(--ease), color .35s, box-shadow .4s, border-color .35s;
}
.btn::after{ /* soft sheen sweep */
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(130%); }

.btn--solid{
  background:linear-gradient(135deg, var(--bloom), var(--bloom-deep));
  color:#fff; box-shadow:var(--shadow-sm);
}
.btn--solid:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.btn--ghost{
  background:rgba(255,255,255,.5);
  border-color:var(--bloom);
  color:var(--bloom-deep);
  backdrop-filter:blur(4px);
}
.btn--ghost:hover{
  background:var(--bloom); color:#fff; transform:translateY(-3px);
  border-color:var(--bloom); box-shadow:var(--shadow-sm);
}
/* legacy ghost-light: still readable on our light washes */
.btn--ghost-light{
  background:rgba(255,255,255,.65);
  border-color:var(--grape); color:var(--grape);
}
.btn--ghost-light:hover{ background:var(--grape); color:#fff; transform:translateY(-3px); }

/* ============================================================
   LIGHTBOX (global gallery hook)
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,5vw,4rem);
  background:radial-gradient(60% 60% at 50% 40%, rgba(110,79,160,.30), rgba(58,44,50,.62));
  backdrop-filter:blur(10px) saturate(1.1);
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox img{
  max-width:min(92vw,1000px); max-height:86vh;
  border-radius:var(--r-md);
  box-shadow:0 40px 100px -30px rgba(30,16,24,.7);
  border:6px solid #fff;
  transform:scale(.94); transition:transform .5s var(--ease-soft);
}
.lightbox.open img{ transform:scale(1); }
.lightbox__close{
  position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem);
  width:52px; height:52px; border-radius:50%;
  border:none; cursor:pointer;
  background:#fff; color:var(--bloom-deep);
  font-size:2rem; line-height:1; display:grid; place-items:center;
  box-shadow:var(--shadow-md);
  transition:transform .35s var(--ease), background .3s, color .3s;
}
.lightbox__close:hover{ transform:rotate(90deg) scale(1.06); background:var(--bloom); color:#fff; }

/* ============================================================
   SECTION: nav
   ============================================================ */
/* ============================================================
   NAV — Akvarell-aed (floats over LIGHT hero; always legible ink)
   JS hooks: #nav.scrolled · .nav__links.open · #burger.active
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  padding:clamp(.7rem,1.8vw,1.15rem) 0;
  transition:padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);
}
/* frosted wash layer — invisible at rest, paints in on scroll */
.nav__wash{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0;
  background:rgba(251,247,241,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
          backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:opacity .45s var(--ease), border-color .45s var(--ease);
}
.nav.scrolled{ padding:clamp(.45rem,1.1vw,.7rem) 0; box-shadow:var(--shadow-sm); }
.nav.scrolled .nav__wash{ opacity:1; border-bottom-color:var(--wash-edge); }

.nav__inner{
  width:min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.2rem;
}

/* —— brand —— */
.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  position:relative;
}
.brand__mark{
  display:grid; place-items:center;
  width:2.85rem; height:2.85rem; border-radius:50%;
  color:var(--bloom);
  background:radial-gradient(circle at 38% 32%, #fff, var(--blush) 135%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), var(--shadow-sm);
  transition:transform .5s var(--ease-soft), color .35s, box-shadow .4s;
}
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); color:var(--bloom-deep); }
.brand__text{ display:grid; line-height:1; }
.brand__name{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.5rem); letter-spacing:-.01em;
  color:var(--ink);
}
.brand__sub{
  font-family:var(--f-body);
  font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.3rem;
}

/* —— links —— */
.nav__links{
  display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2rem);
}
.nav__links > a{
  position:relative;
  font-family:var(--f-body); font-weight:600; font-size:.96rem;
  color:var(--ink); padding:.3rem 0;
  transition:color .3s var(--ease);
}
/* fine underline that paints in left-to-right on hover */
.nav__links > a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-.05rem; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--bloom), var(--butter-deep));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links > a:not(.nav__cta):hover{ color:var(--bloom-deep); }
.nav__links > a:not(.nav__cta):hover::after{ transform:scaleX(1); }

/* —— CTA pill: blush→butter gradient outline, fills with bloom on hover —— */
.nav__cta{
  position:relative; overflow:hidden;
  font-weight:700; font-size:.92rem;
  padding:.6em 1.4em; border-radius:100px;
  color:var(--bloom-deep);
  background:
    linear-gradient(var(--paper-2), var(--paper-2)) padding-box,
    linear-gradient(120deg, var(--blush), var(--butter-deep) 60%, var(--blush)) border-box;
  border:1.6px solid transparent;
  box-shadow:var(--shadow-sm);
  transition:color .35s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(135deg, var(--bloom), var(--bloom-deep));
  opacity:0; transition:opacity .4s var(--ease);
}
.nav__cta::after{ /* sheen sweep */
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform:translateX(-130%); transition:transform .7s var(--ease);
}
.nav__cta:hover{ color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.nav__cta:hover::before{ opacity:1; }
.nav__cta:hover::after{ transform:translateX(130%); }

/* —— burger (three --ink lines morph to X) —— */
.nav__burger{
  display:none;
  position:relative; z-index:2;
  width:2.85rem; height:2.85rem; border-radius:50%;
  border:1px solid var(--wash-edge);
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background .3s, box-shadow .3s, transform .3s var(--ease);
}
.nav__burger:hover{ box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.nav__burger span{
  display:block; width:20px; height:2px; border-radius:2px;
  background:var(--ink);
  transition:transform .4s var(--ease-soft), opacity .3s var(--ease);
}
.nav__burger.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.active span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.nav__burger.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   RESPONSIVE — phone/tablet drop panel
   ============================================================ */
@media (max-width:840px){
  .nav__burger{ display:flex; }

  .nav__links{
    position:absolute; top:calc(100% + .6rem); right:var(--gutter);
    flex-direction:column; align-items:stretch; gap:.35rem;
    width:min(20rem, calc(100vw - var(--gutter) * 2));
    padding:1.1rem;
    background:rgba(255,253,250,.92);
    -webkit-backdrop-filter:blur(16px) saturate(1.1);
            backdrop-filter:blur(16px) saturate(1.1);
    border:1px solid var(--wash-edge);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-md);
    opacity:0; visibility:hidden; transform:translateY(-12px) scale(.98);
    transform-origin:top right;
    transition:opacity .35s var(--ease), transform .4s var(--ease-soft), visibility .35s;
  }
  .nav__links.open{ opacity:1; visibility:visible; transform:none; }

  .nav__links > a{
    text-align:center; padding:.75rem 1rem; border-radius:var(--r-sm);
    font-size:1.02rem;
    transition:background .3s var(--ease), color .3s var(--ease);
  }
  .nav__links > a:not(.nav__cta)::after{ display:none; }
  .nav__links > a:not(.nav__cta):hover{ background:rgba(246,201,214,.3); }

  .nav__cta{ margin-top:.4rem; }
}

@media (max-width:640px){
  .brand__sub{ display:none; }
  .brand__mark{ width:2.55rem; height:2.55rem; }
}

/* ============================================================
   SECTION: hero
   ============================================================ */
/* ============================================================
   HERO — Akvarell-aed
   Light watercolour paper, painterly washes, blobby photo frame,
   editorial index tick + conic flower-mark eyebrow + sticker badge.
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(8.5rem,16vh,11rem) 0 clamp(4rem,9vh,7rem);
  overflow:hidden;
  isolation:isolate;
}

/* keep heavy content inside the ~1200px area; gutters stay clear for vines */
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}

/* —— watercolour blobs (all LIGHT, multiply blend) —— */
.hero__blob{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(46px); opacity:.85; mix-blend-mode:multiply;
  pointer-events:none;
}
.hero__blob--blush{
  width:42vw; height:42vw; max-width:560px; max-height:560px;
  left:-8vw; top:2vh;
  background:radial-gradient(circle at 40% 40%, var(--blush), transparent 68%);
  animation:hero-float 16s var(--ease) infinite alternate;
}
.hero__blob--butter{
  width:34vw; height:34vw; max-width:440px; max-height:440px;
  right:-6vw; top:-4vh;
  background:radial-gradient(circle at 50% 50%, var(--butter), transparent 70%);
  animation:hero-float 19s var(--ease) infinite alternate-reverse;
}
.hero__blob--sky{
  width:30vw; height:30vw; max-width:400px; max-height:400px;
  right:14vw; bottom:-8vh;
  background:radial-gradient(circle at 50% 50%, var(--sky), transparent 70%);
  animation:hero-float 22s var(--ease) infinite alternate;
}
@keyframes hero-float{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(2.5rem,-1.8rem,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){ .hero__blob{ animation:none; } }

/* —— eyebrow: conic multicolour flower-mark replaces the plain dash —— */
.hero__eyebrow{ position:relative; }
.hero__eyebrow::before{ display:none; } /* drop the shared dash; use the bloom mark */
.hero__mark{
  position:relative; width:1.25em; height:1.25em; flex:none;
  border-radius:50%;
  background:
    conic-gradient(from 0deg,
      var(--bloom) 0 20%, var(--butter-deep) 20% 40%,
      var(--sage-deep) 40% 60%, var(--sky-deep) 60% 80%,
      var(--lilac-deep) 80% 100%);
  box-shadow:inset 0 0 0 .18em var(--paper-2), 0 0 0 2px rgba(194,71,126,.16);
}
.hero__mark::after{ /* petunia "eye" centre */
  content:""; position:absolute; inset:38%;
  border-radius:50%; background:var(--bloom);
}

/* —— text column —— */
.hero__title{
  font-family:var(--f-display);
  font-weight:380;
  font-optical-sizing:auto;
  font-size:clamp(2.7rem,6.2vw,4.6rem);
  line-height:1.04; letter-spacing:-.02em;
  color:var(--ink); margin:.4rem 0 1.5rem;
}
.hero__accent{
  font-style:italic; color:var(--bloom);
  position:relative; white-space:nowrap;
}
.hero__accent::after{ /* hand-painted underline wash */
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.04em; height:.42em;
  z-index:-1; border-radius:50%;
  background:linear-gradient(90deg, var(--blush), var(--butter-deep) 60%, var(--blush));
  opacity:.7; transform:rotate(-1deg);
}
.hero__lead{
  max-width:46ch; font-size:clamp(1.05rem,1.7vw,1.18rem);
  color:var(--ink-soft); margin-bottom:2rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:1.6rem; }
.hero__note{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.92rem; color:var(--ink-soft);
  background:rgba(255,255,255,.55); border:1px solid var(--wash-edge);
  padding:.5rem 1rem; border-radius:100px; backdrop-filter:blur(4px);
}
.hero__dot{
  width:.7rem; height:.7rem; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, var(--butter-deep), var(--bloom));
  box-shadow:0 0 0 4px rgba(194,71,126,.14);
}

/* —— media column: blobby gallery-framed photo + floating badge —— */
.hero__media{ position:relative; }

/* editorial index tick (No. 01 — Suvi 2026) running along the top edge */
.hero__index{
  position:absolute; top:-1.7rem; right:.4rem; z-index:3;
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-body);
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.hero__index::before{
  content:""; width:2.4em; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--bloom));
}

.hero__frame{
  position:relative;
  border-radius:46% 54% 48% 52% / 54% 46% 54% 46%;
  overflow:hidden;
  background:#fff;
  padding:10px;
  box-shadow:var(--shadow-lg);
  transform:rotate(1.4deg);
  transition:transform .6s var(--ease);
}
.hero__frame::before{ /* painterly inner edge */
  content:""; position:absolute; inset:10px; z-index:2; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.hero__frame img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:44% 56% 46% 54% / 56% 44% 56% 44%;
}
.hero__media:hover .hero__frame{ transform:rotate(0deg) scale(1.012); }

/* sticker-tilt badge — pinned to board, straightens on hover */
.hero__tag{
  position:absolute; left:-1.5rem; bottom:1.8rem; z-index:3;
  display:grid; gap:.1rem;
  background:var(--paper-2);
  padding:1rem 1.3rem; border-radius:var(--r-md);
  box-shadow:var(--shadow-md); border:1px solid var(--wash-edge);
  transform:rotate(-2.5deg);
  transition:transform .5s var(--ease-soft), box-shadow .5s var(--ease);
  animation:hero-bob 6s var(--ease) infinite alternate;
}
.hero__media:hover .hero__tag{ transform:rotate(0deg); box-shadow:var(--shadow-lg); }
.hero__tag-mark{ color:var(--bloom); font-size:1.1rem; line-height:1; }
.hero__tag span{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.hero__tag strong{ font-family:var(--f-display); font-weight:500; font-size:1.15rem; color:var(--ink); }
@keyframes hero-bob{ from{ transform:translateY(0) rotate(-2.5deg); } to{ transform:translateY(-9px) rotate(-2.5deg); } }
@media (prefers-reduced-motion: reduce){ .hero__tag{ animation:none; } }

/* —— scroll cue —— */
.hero__scroll{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  width:26px; height:42px; border-radius:100px;
  border:2px solid rgba(194,71,126,.45);
  display:grid; place-items:start center; padding-top:7px;
}
.hero__scroll span{
  width:5px; height:9px; border-radius:3px; background:var(--bloom);
  animation:hero-scroll 1.7s var(--ease) infinite;
}
@keyframes hero-scroll{ 0%{ transform:translateY(0); opacity:1; } 70%{ transform:translateY(13px); opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .hero__scroll span{ animation:none; } }

@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__media{ max-width:460px; margin-inline:auto; }
  .hero__index{ right:0; }
  .hero__tag{ left:0; }
}
@media (max-width:640px){
  .hero{ padding-top:7rem; }
  .hero__frame{ transform:none; }
  .hero__index{ top:-1.4rem; }
}

/* ============================================================
   SECTION: values
   ============================================================ */
/* ===== VALUES (light alternating band — paper-warm + sage washes) ===== */
.values{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(4.5rem,9vh,7rem) 0;
  /* soft band that melts into the surrounding wash — no hard seam */
  background:linear-gradient(180deg,
    rgba(246,239,230,0) 0%,
    rgba(246,239,230,.9) 9%,
    rgba(246,239,230,.9) 91%,
    rgba(246,239,230,0) 100%);
}

/* —— sage watercolour blobs bleeding in from corners —— */
.values__blob{
  position:absolute; z-index:0; border-radius:50%;
  filter:blur(54px); opacity:.7; mix-blend-mode:multiply; pointer-events:none;
}
.values__blob--a{
  width:38vw; height:38vw; max-width:520px; max-height:520px;
  left:-12vw; top:6vh;
  background:radial-gradient(circle at 50% 50%, var(--sage), transparent 68%);
  animation:values-drift 20s var(--ease) infinite alternate;
}
.values__blob--b{
  width:32vw; height:32vw; max-width:440px; max-height:440px;
  right:-10vw; bottom:-10vh;
  background:radial-gradient(circle at 50% 50%, var(--sage-deep), transparent 70%);
  animation:values-drift 24s var(--ease) infinite alternate-reverse;
}
@keyframes values-drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(2rem,-1.6rem,0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce){ .values__blob{ animation:none; } }

.values__inner{ position:relative; z-index:1; }
.values .section-head{ margin-bottom:clamp(2.6rem,5vw,3.6rem); }

/* —— grid: 4 → 2 → 1 —— */
.values__grid{
  list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1.3rem,2.4vw,1.9rem);
}

/* —— full-bleed photo cards with a floating frosted text panel —— */
.value{
  position:relative; isolation:isolate;
  border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:3/4;
  box-shadow:var(--shadow-md);
  border:1px solid var(--wash-edge);
  --v-accent:var(--bloom);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.value:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.value__photo{ position:absolute; inset:0; z-index:0; }
.value__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease); }
.value:hover .value__photo img{ transform:scale(1.07); }
/* soft accent wash over the photo top so cards read on-palette */
.value::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--v-accent), transparent 40%);
  opacity:.16; mix-blend-mode:multiply;
}

.value__panel{
  position:absolute; left:.75rem; right:.75rem; bottom:.75rem; z-index:2;
  background:rgba(255,253,250,.86);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
          backdrop-filter:blur(10px) saturate(1.15);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-md);
  padding:1.55rem 1.15rem 1.2rem;
  box-shadow:0 16px 32px -18px rgba(60,46,52,.55);
  transition:transform .5s var(--ease);
}
.value:hover .value__panel{ transform:translateY(-4px); }
/* organic number badge straddling the panel's top edge */
.value__num{
  position:absolute; top:-1.15rem; left:1.1rem;
  width:2.45rem; height:2.45rem; display:grid; place-items:center;
  font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.18rem;
  color:#fff; background:var(--v-accent);
  border-radius:60% 40% 55% 45% / 55% 50% 50% 45%;
  box-shadow:0 9px 18px -6px var(--v-accent), inset 0 0 0 1px rgba(255,255,255,.4);
  transition:transform .55s var(--ease-soft), border-radius .55s var(--ease-soft);
}
.value:hover .value__num{ transform:rotate(-8deg) scale(1.08); border-radius:48% 52% 42% 58% / 52% 44% 56% 48%; }

.value__title{
  font-family:var(--f-display); font-weight:600;
  font-size:1.16rem; line-height:1.14; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:.4rem;
}
.value__desc{ font-size:.88rem; line-height:1.5; color:var(--ink-soft); }

/* per-card accent colours */
.value--blush{  --v-accent:#D45F86; }
.value--butter{ --v-accent:#CB9529; }
.value--sage{   --v-accent:#74A257; }
.value--sky{    --v-accent:#5795AE; }

@media (max-width:980px){
  .values__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .values__grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
}

/* ============================================================
   SECTION: products
   ============================================================ */
/* ===== PRODUCTS — Akvarell-aed ===== */
.products{
  position:relative;
  padding:clamp(4.5rem,9vh,7rem) 0;
  isolation:isolate;
}

/* —— soft watercolour blobs bleeding from the gutters (light) —— */
.prod__blob{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(58px); opacity:.6; mix-blend-mode:multiply; pointer-events:none;
}
.prod__blob--blush{
  width:38vw; height:38vw; max-width:480px; max-height:480px;
  left:-12vw; top:6%;
  background:radial-gradient(circle at 50% 50%, var(--blush), transparent 68%);
}
.prod__blob--butter{
  width:34vw; height:34vw; max-width:440px; max-height:440px;
  right:-12vw; bottom:2%;
  background:radial-gradient(circle at 50% 50%, var(--butter), transparent 70%);
}

/* —— head + editorial running rule —— */
.prod__head{ max-width:64ch; }
.prod__rule{
  display:flex; align-items:center; gap:1rem;
  margin-top:1.8rem;
  font-family:var(--f-body);
  font-size:.7rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}
.prod__rule-tick{ white-space:nowrap; }
.prod__rule-tick--right{ color:var(--bloom); }
.prod__rule-line{
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--wash-edge), rgba(194,71,126,.4), var(--wash-edge));
}

/* —— grid —— */
.products__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,2.6vw,2.2rem);
  align-items:start;
}
/* asymmetric editorial stagger — middle card drops slightly */
.prod-card--offset{ margin-top:clamp(0px,3vw,2.6rem); }

.prod-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--wash-edge);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.prod-card::before{ /* faint watercolour wash that blooms in on hover */
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:radial-gradient(80% 50% at 50% 0%, rgba(246,201,214,.35), transparent 70%);
  transition:opacity .5s var(--ease);
}
.prod-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); }
.prod-card:hover::before{ opacity:1; }

/* —— rainbow top-edge bar (fuksia → päike → leht) —— */
.prod-card__bar{
  position:absolute; inset:0 0 auto; height:5px; z-index:3;
  background:linear-gradient(90deg, var(--bloom), var(--butter-deep) 50%, var(--sage-deep));
  transform-origin:left; transform:scaleX(.5);
  opacity:.85;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.prod-card:hover .prod-card__bar{ transform:scaleX(1); opacity:1; }

.prod-card__media{ position:relative; overflow:hidden; }
.prod-card__media img{
  width:100%; aspect-ratio:4/3.4; object-fit:cover;
  transition:transform .8s var(--ease);
}
.prod-card:hover .prod-card__media img{ transform:scale(1.06); }
.prod-card__media::after{ /* soft painterly bottom fade */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(255,253,250,.55), transparent 38%);
}

/* —— tilted sticker price pill (straightens on hover) —— */
.prod-card__price{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--f-body); font-weight:700; font-size:.92rem; letter-spacing:.01em;
  color:var(--ink);
  background:linear-gradient(135deg, var(--butter), var(--butter-deep));
  padding:.45em 1em; border-radius:100px;
  box-shadow:2px 3px 0 rgba(156,47,98,.18), var(--shadow-sm);
  border:1.5px solid rgba(255,255,255,.7);
  transform:rotate(-3deg);
  transition:transform .4s var(--ease-soft);
}
.prod-card:hover .prod-card__price{ transform:rotate(0); }

/* —— editorial plate number —— */
.prod-card__num{
  position:absolute; bottom:.85rem; right:1rem; z-index:2;
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:1.05rem; letter-spacing:.02em;
  color:var(--paper-2);
  text-shadow:0 1px 6px rgba(58,44,50,.4);
}

.prod-card__body{
  position:relative; z-index:1;
  padding:1.5rem 1.6rem 1.8rem;
  display:flex; flex-direction:column; gap:.75rem; flex:1;
}
.prod-card__title{
  font-family:var(--f-display); font-weight:500; font-size:1.5rem;
  line-height:1.1; color:var(--ink); letter-spacing:-.01em;
}
.prod-card__desc{ font-size:.98rem; color:var(--ink-soft); flex:1; }
.prod-card__tag{
  align-self:flex-start; margin-top:.2rem;
  font-size:.78rem; font-weight:600; letter-spacing:.05em;
  color:var(--grape);
  background:rgba(217,199,238,.4);
  border:1px solid rgba(183,155,224,.5);
  padding:.4em .9em; border-radius:100px;
}

/* —— CTA strip (light, washed) —— */
.products__cta{
  position:relative; overflow:hidden;
  margin-top:clamp(2.8rem,5.5vw,4rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1.8rem,4vw,2.6rem) clamp(1.8rem,4vw,3rem);
  border-radius:var(--r-xl);
  background:
    linear-gradient(120deg, rgba(246,201,214,.55), rgba(251,230,168,.5) 55%, rgba(207,225,194,.55));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--shadow-sm);
}
.products__cta-glow{
  position:absolute; width:30rem; height:30rem; border-radius:50%; z-index:0;
  right:-8rem; top:-12rem; filter:blur(50px); opacity:.6; mix-blend-mode:multiply;
  background:radial-gradient(circle, var(--blush), transparent 70%);
}
.products__cta-mark{
  position:relative; z-index:1;
  font-size:1.6rem; line-height:1; color:var(--bloom);
  flex:0 0 auto;
  animation:prod-spin 14s linear infinite;
}
@keyframes prod-spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .products__cta-mark{ animation:none; } }
.products__cta p{
  position:relative; z-index:1; flex:1 1 18rem;
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.25; color:var(--ink);
  max-width:34ch;
}
.products__cta .btn{ position:relative; z-index:1; }

@media (max-width:980px){
  .products__grid{ grid-template-columns:1fr 1fr; }
  .prod-card--offset{ margin-top:0; }
  .prod-card:last-child{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .products__grid{ grid-template-columns:1fr; }
  .prod-card:last-child{ grid-column:auto; }
  .prod__rule-tick--right{ display:none; }
  .products__cta{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ============================================================
   SECTION: upcoming
   ============================================================ */
/* ===== UPCOMING (LIGHT & colourful — was dark) ===== */
.upcoming{
  position:relative; overflow:hidden;
  padding:clamp(5rem,10vh,7.5rem) 0;
  isolation:isolate;
}

/* a LIGHT lilac→blush→butter watercolour wash band */
.upcoming__wash{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40rem 30rem at 10% 0%, rgba(217,199,238,.65), transparent 60%),
    radial-gradient(36rem 30rem at 92% 18%, rgba(246,201,214,.6), transparent 62%),
    radial-gradient(40rem 34rem at 70% 110%, rgba(251,230,168,.55), transparent 60%),
    linear-gradient(180deg, rgba(255,253,250,0), rgba(251,247,241,.35));
}

/* extra floating watercolour blobs for depth (light, multiply) */
.upcoming__blob{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(50px); opacity:.7; mix-blend-mode:multiply; pointer-events:none;
}
.upcoming__blob--lilac{
  width:30vw; height:30vw; max-width:400px; max-height:400px;
  left:-7vw; top:24%;
  background:radial-gradient(circle at 50% 50%, var(--lilac), transparent 70%);
  animation:upcoming-float 20s var(--ease) infinite alternate;
}
.upcoming__blob--butter{
  width:26vw; height:26vw; max-width:340px; max-height:340px;
  right:-6vw; bottom:-6%;
  background:radial-gradient(circle at 50% 50%, var(--butter), transparent 70%);
  animation:upcoming-float 24s var(--ease) infinite alternate-reverse;
}
@keyframes upcoming-float{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(2rem,-1.6rem,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){ .upcoming__blob{ animation:none; } }

/* —— head with editorial running rule —— */
.upcoming__head{ position:relative; }
.upcoming__rule{
  display:flex; align-items:center; gap:.7rem;
  margin-top:1.4rem;
  font-family:var(--f-body);
  font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grape);
}
.upcoming__rule::after{
  content:""; flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--lilac-deep), transparent);
  opacity:.7;
}
.upcoming__rule-mark{ color:var(--bloom); font-size:.95rem; letter-spacing:0; }

/* —— grid —— */
.upcoming__grid{
  list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,2.6vw,2rem);
}

/* —— full-bleed photo cards with a floating frosted panel (matches Values) —— */
.upcoming__item{
  position:relative; isolation:isolate;
  border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:5/6;
  box-shadow:var(--shadow-md);
  border:1px solid var(--wash-edge);
  --u-accent:var(--grape);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.upcoming__item:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.upcoming__photo{ position:absolute; inset:0; z-index:0; }
.upcoming__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease); }
.upcoming__item:hover .upcoming__photo img{ transform:scale(1.07); }
.upcoming__item::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--u-accent), transparent 42%);
  opacity:.18; mix-blend-mode:multiply;
}

.upcoming__panel{
  position:absolute; left:.75rem; right:.75rem; bottom:.75rem; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem;
  background:rgba(255,253,250,.86);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
          backdrop-filter:blur(10px) saturate(1.15);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-md);
  padding:1.7rem 1.25rem 1.25rem;
  box-shadow:0 16px 32px -18px rgba(60,46,52,.55);
  transition:transform .5s var(--ease);
}
.upcoming__item:hover .upcoming__panel{ transform:translateY(-4px); }

/* organic blob icon badge straddling the panel top edge */
.upcoming__icon{
  position:absolute; top:-1.35rem; left:1.15rem;
  width:2.9rem; height:2.9rem; display:grid; place-items:center;
  color:#fff; background:var(--u-accent);
  border-radius:60% 40% 55% 45% / 52% 50% 50% 48%;
  box-shadow:0 11px 20px -7px var(--u-accent), inset 0 0 0 1px rgba(255,255,255,.35);
  transition:transform .55s var(--ease-soft), border-radius .55s var(--ease-soft);
}
.upcoming__item:hover .upcoming__icon{ transform:rotate(-7deg) scale(1.07); border-radius:46% 54% 44% 56% / 54% 44% 56% 46%; }
.upcoming__icon svg{ display:block; }

.upcoming__title{
  font-family:var(--f-display); font-weight:600; font-size:1.3rem;
  letter-spacing:-.01em; color:var(--ink);
}
.upcoming__desc{ font-size:.92rem; line-height:1.5; color:var(--ink-soft); }

/* status pill on the photo, top-right */
.upcoming__badge{
  position:absolute; top:1rem; right:1rem; z-index:3;
  font-family:var(--f-body);
  font-size:.64rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--u-accent);
  background:rgba(255,253,250,.9);
  border:1px solid rgba(255,255,255,.8);
  padding:.42em 1em; border-radius:100px;
  box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

/* per-card accent colours (wine / juice / surprise) */
.up--wine{  --u-accent:#8A5FC0; }
.up--juice{ --u-accent:#CB9529; }
.up--more{  --u-accent:#C2477E; }

@media (max-width:980px){
  .upcoming__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
}
@media (max-width:640px){
  .upcoming__item{ padding:2.2rem 1.5rem 1.8rem; }
}

/* ============================================================
   SECTION: story
   ============================================================ */
/* ===== STORY (light paper, cool sky note) ===== */
.story{
  position:relative;
  padding:clamp(4.5rem,9vh,7rem) 0;
  overflow:hidden;
  isolation:isolate;
}

/* —— watercolour washes (LIGHT, decorative) —— */
.story__wash{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(50px); opacity:.85; mix-blend-mode:multiply;
  pointer-events:none;
}
.story__wash--sky{
  width:46vw; height:46vw; max-width:620px; max-height:620px;
  left:-9vw; top:8%;
  background:radial-gradient(circle at 45% 45%, var(--sky), transparent 68%);
  animation:story-float 20s var(--ease) infinite alternate;
}
.story__wash--butter{
  width:34vw; height:34vw; max-width:440px; max-height:440px;
  right:-6vw; bottom:-6%;
  background:radial-gradient(circle at 50% 50%, var(--butter), transparent 70%);
  animation:story-float 24s var(--ease) infinite alternate-reverse;
}
@keyframes story-float{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(2rem,-1.6rem,0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce){ .story__wash{ animation:none; } }

/* —— layout —— */
.story__grid{
  display:grid; grid-template-columns:.95fr 1.05fr;
  gap:clamp(2.4rem,5vw,5rem); align-items:center;
}

/* —— media column —— */
.story__media{ position:relative; }
.story__frame{
  position:relative;
  background:#fff;
  padding:12px;
  border-radius:48% 52% 46% 54% / 52% 46% 54% 48%;
  box-shadow:var(--shadow-lg);
  transform:rotate(-1.5deg);
  transition:transform .6s var(--ease);
}
.story__frame::before{ /* painterly inner edge */
  content:""; position:absolute; inset:12px; z-index:2; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.story__frame img{
  width:100%; aspect-ratio:4/4.5; object-fit:cover;
  border-radius:46% 54% 44% 56% / 54% 44% 56% 46%;
}
.story__media:hover .story__frame{ transform:rotate(0deg) scale(1.012); }

/* floating cream badge (hand-pinned, straightens on hover) */
.story__badge{
  position:absolute; left:-1.4rem; bottom:1.6rem; z-index:3;
  display:grid; gap:.05rem;
  background:var(--paper-2);
  padding:.95rem 1.25rem;
  border-radius:var(--r-md);
  border:1px solid var(--wash-edge);
  box-shadow:var(--shadow-md);
  transform:none;
  transition:transform .5s var(--ease-soft);
  animation:story-bob 6.5s var(--ease) infinite alternate;
}
.story__media:hover .story__badge{ transform:translateY(-3px); }
.story__badge-mark{ color:var(--bloom); font-size:1.05rem; line-height:1; margin-bottom:.15rem; }
.story__badge-top{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.story__badge-place{
  font-family:var(--f-display); font-weight:500; font-size:1.2rem;
  color:var(--ink); line-height:1.05;
}
@keyframes story-bob{ from{ transform:translateY(0); } to{ transform:translateY(-7px); } }
@media (prefers-reduced-motion: reduce){ .story__badge{ animation:none; } }

/* editorial running plate caption (top-right tick) */
.story__plate{
  position:absolute; top:.6rem; right:-.4rem; z-index:3;
  font-family:var(--f-body);
  font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grape);
  background:rgba(255,253,250,.78);
  border:1px solid var(--wash-edge);
  padding:.4em .85em; border-radius:100px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(4px);
  transform:rotate(2deg);
}

/* —— text column —— */
.story__title{ margin:.25rem 0 1.4rem; max-width:18ch; }
.story__title em{ color:var(--bloom); font-style:italic; }

.story__p{
  max-width:52ch; margin-bottom:1.15rem;
  font-size:clamp(1.02rem,1.6vw,1.12rem);
  color:var(--ink-soft);
}
.story__p:last-of-type{ margin-bottom:0; }

.story__actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }

.story__sign{
  display:flex; align-items:center; gap:.85rem;
  margin-top:1.8rem;
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:1.1rem; color:var(--ink);
}
.story__sign-line{
  width:2.4rem; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--bloom), var(--butter-deep));
}

@media (max-width:980px){
  .story__grid{ grid-template-columns:1fr; gap:3rem; }
  .story__media{ max-width:460px; margin-inline:auto; order:-1; }
  .story__frame{ transform:rotate(0deg); }
  .story__title{ max-width:none; }
}
@media (max-width:640px){
  .story__badge{ left:0; }
  .story__plate{ right:.4rem; }
}

/* ============================================================
   SECTION: gallery
   ============================================================ */
/* ===== GALLERY (LIGHT paper-warm band, painterly hang) ===== */
.gallery{
  position:relative; overflow:hidden;
  padding:clamp(4.5rem,9vh,7rem) 0;
  /* soft band that melts into the surrounding wash — no hard seam */
  background:linear-gradient(180deg,
    rgba(246,239,230,0) 0%,
    rgba(246,239,230,.9) 9%,
    rgba(246,239,230,.9) 91%,
    rgba(246,239,230,0) 100%);
  isolation:isolate;
}
/* soft sage + blush watercolour washes bleeding from the corners */
.gallery__wash{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(34rem 28rem at 4% 6%, rgba(207,225,194,.55), transparent 60%),
    radial-gradient(32rem 28rem at 96% 14%, rgba(246,201,214,.5), transparent 62%),
    radial-gradient(38rem 32rem at 80% 108%, rgba(251,230,168,.45), transparent 60%);
  mix-blend-mode:multiply;
}

.gallery__head{ margin-bottom:clamp(2.4rem,5vw,3.4rem); }

/* running editorial hairline rule (No./caption) */
.gallery__rule{
  display:flex; align-items:center; gap:.9rem;
  margin-top:1.6rem; max-width:34rem;
}
.gallery__rule-tick{
  font-family:var(--f-body); font-weight:700;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grape); white-space:nowrap;
}
.gallery__rule-line{
  flex:1; height:1px;
  background:linear-gradient(90deg, var(--wash-edge), rgba(167,199,149,.6), var(--wash-edge));
}
.gallery__rule-cap{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:.95rem; color:var(--ink-soft); white-space:nowrap;
}

/* —— true masonry: full photos, never cropped (subjects always in frame) —— */
.gallery__grid{
  columns:3;
  column-gap:clamp(1rem,2vw,1.4rem);
}
.gallery__item{
  position:relative; break-inside:avoid; cursor:zoom-in;
  margin:0 0 clamp(1rem,2vw,1.4rem);
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--paper-2);
  border:1px solid var(--wash-edge);
  box-shadow:var(--shadow-sm);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.gallery__item img{
  width:100%; height:auto; display:block;
  border-radius:inherit;
  transition:transform .8s var(--ease);
}
/* blush bloom overlay that fades in on hover */
.gallery__item::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit; opacity:0;
  background:radial-gradient(90% 60% at 50% 100%, rgba(194,71,126,.28), transparent 62%);
  transition:opacity .5s var(--ease);
}
/* 'vaata' cue petal */
.gallery__cue{
  position:absolute; z-index:3; right:.9rem; bottom:.9rem;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  font-size:1.05rem; line-height:1; color:var(--bloom-deep);
  background:rgba(255,253,250,.92);
  border-radius:50%;
  box-shadow:var(--shadow-sm);
  transform:scale(.4); opacity:0;
  transition:transform .45s var(--ease-soft), opacity .4s var(--ease);
}
.gallery__item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item:hover::after{ opacity:1; }
.gallery__item:hover .gallery__cue{ transform:scale(1); opacity:1; }

/* "see all photos" button under the grid */
.gallery__more{
  margin-top:clamp(2.4rem,5vw,3.4rem);
  display:flex; justify-content:center;
}

@media (max-width:980px){ .gallery__grid{ columns:2; } }
@media (max-width:560px){
  .gallery__grid{ columns:1; max-width:440px; margin-inline:auto; }
  .gallery__rule{ flex-wrap:wrap; }
}

/* ============================================================
   SECTION: contact
   ============================================================ */
/* ===== CONTACT (LIGHT & colourful — was dark) ===== */
.contact{
  position:relative; overflow:hidden;
  padding:clamp(5rem,10vh,7.5rem) 0;
  isolation:isolate;
}

/* layered light blush→butter→sage watercolour wash */
.contact__wash{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38rem 30rem at 88% 8%, rgba(246,201,214,.65), transparent 60%),
    radial-gradient(34rem 30rem at 6% 30%, rgba(251,230,168,.55), transparent 62%),
    radial-gradient(40rem 34rem at 70% 110%, rgba(207,225,194,.6), transparent 60%),
    linear-gradient(180deg, rgba(251,247,241,.6), rgba(255,253,250,.4));
}
/* soft floating painterly blobs (multiply, blurred — stay LIGHT) */
.contact__blob{
  position:absolute; z-index:-1; border-radius:50%;
  filter:blur(48px); opacity:.7; mix-blend-mode:multiply; pointer-events:none;
}
.contact__blob--blush{
  width:30vw; height:30vw; max-width:380px; max-height:380px;
  right:-6vw; top:-6vh;
  background:radial-gradient(circle at 45% 45%, var(--blush), transparent 68%);
  animation:contact-float 18s var(--ease) infinite alternate;
}
.contact__blob--sage{
  width:26vw; height:26vw; max-width:340px; max-height:340px;
  left:-7vw; bottom:-9vh;
  background:radial-gradient(circle at 50% 50%, var(--sage), transparent 70%);
  animation:contact-float 22s var(--ease) infinite alternate-reverse;
}
@keyframes contact-float{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-2rem,1.6rem,0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){ .contact__blob{ animation:none; } }

.contact__inner{
  display:grid; grid-template-columns:1.25fr .85fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}

.contact__text .section-title{ margin-top:.2rem; }
.contact__lead{
  max-width:46ch; margin:1.3rem 0 2rem;
  font-size:clamp(1.04rem,1.6vw,1.15rem); color:var(--ink-soft);
}

/* —— detail rows: cream chips with pastel-haloed icons —— */
.contact__list{ list-style:none; display:grid; gap:1rem; margin-bottom:2rem; }
.contact__row{
  display:grid; grid-template-columns:auto 1fr; gap:1.05rem; align-items:center;
  padding:1rem 1.2rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(4px);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.contact__row:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

.contact__ico{
  width:2.9rem; height:2.9rem; flex:none;
  display:grid; place-items:center; border-radius:50%;
  color:var(--bloom-deep);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), var(--shadow-sm);
}
.contact__ico svg{ width:1.45rem; height:1.45rem; }
.contact__ico--pin{ background:radial-gradient(circle at 38% 32%, #fff, var(--blush) 130%); color:var(--bloom-deep); }
.contact__ico--phone{ background:radial-gradient(circle at 38% 32%, #fff, var(--sage) 130%); color:#4d7a44; }
.contact__ico--mail{ background:radial-gradient(circle at 38% 32%, #fff, var(--lilac) 130%); color:var(--grape); }

.contact__field{ display:grid; gap:.15rem; min-width:0; }
.contact__label{
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bloom);
}
.contact__value{ font-size:1.04rem; color:var(--ink); line-height:1.5; }
.contact__value em{ color:var(--ink-soft); font-size:.92em; font-style:italic; }
a.contact__value{ transition:color .3s; position:relative; width:max-content; max-width:100%; }
a.contact__value::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--bloom), var(--butter-deep));
  transition:right .4s var(--ease);
}
a.contact__value:hover{ color:var(--bloom-deep); }
a.contact__value:hover::after{ right:0; }

.contact__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* —— image card (hand-pinned to board) —— */
.contact__card{
  position:relative;
  background:var(--paper-2);
  border:1px solid rgba(255,255,255,.8);
  border-radius:var(--r-lg);
  padding:.9rem .9rem 1.4rem;
  box-shadow:var(--shadow-md);
  transform:rotate(1.6deg);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.contact__card:hover{ transform:rotate(0); box-shadow:var(--shadow-lg); }
.contact__pin{
  position:absolute; top:-.7rem; left:50%; transform:translateX(-50%) rotate(-8deg);
  z-index:3; width:2rem; height:2rem; display:grid; place-items:center;
  font-size:1rem; line-height:1; color:var(--bloom);
  background:var(--paper-2); border-radius:50%;
  box-shadow:var(--shadow-sm); border:1px solid var(--wash-edge);
}
.contact__card-frame{
  position:relative;
  border-radius:var(--r-md); overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.contact__cap{
  position:absolute; left:.7rem; bottom:.7rem; z-index:2;
  font-family:var(--f-body);
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
  background:rgba(255,253,250,.82);
  padding:.32em .8em; border-radius:100px;
  border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(4px);
}
.contact__card-frame img{
  width:100%; aspect-ratio:4/4.4; object-fit:cover;
  transition:transform .8s var(--ease);
}
.contact__card:hover .contact__card-frame img{ transform:scale(1.04); }
.contact__cardnote{ text-align:center; padding-top:1rem; display:grid; gap:.2rem; }
.contact__cardnote strong{ font-family:var(--f-display); font-weight:500; font-size:1.25rem; color:var(--ink); }
.contact__cardnote span{ font-size:.95rem; color:var(--ink-soft); }

@media (max-width:980px){
  .contact__inner{ grid-template-columns:1fr; }
  .contact__card{ max-width:380px; margin-inline:auto; }
}
@media (max-width:640px){
  .contact__row{ padding:.9rem 1rem; }
}

/* ============================================================
   SECTION: footer
   ============================================================ */
/* ===== FOOTER (LIGHT & colourful — was dark) ===== */
.footer{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* generous TOP padding — a grapevine garland injects across the footer top */
  padding:clamp(6rem,12vh,8.5rem) 0 clamp(2.5rem,5vh,3.4rem);
  /* lightest section: paper-2 fading up into paper, NEVER dark */
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 42%, var(--paper-2) 100%);
}
/* faint top hairline echoing the painted edge */
.footer::before{
  content:"";
  position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, var(--wash-edge) 18%, var(--wash-edge) 82%, transparent);
}

/* —— hand-painted sage watercolour garland wash along the top —— */
.footer__wash{
  position:absolute; inset:0 0 auto; height:60%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(26rem 14rem at 16% -2%, rgba(207,225,194,.62), transparent 64%),
    radial-gradient(22rem 13rem at 84% 2%, rgba(207,225,194,.5), transparent 66%),
    radial-gradient(24rem 16rem at 52% -6%, rgba(167,199,149,.4), transparent 62%),
    radial-gradient(20rem 14rem at 38% 4%, rgba(246,201,214,.32), transparent 68%),
    radial-gradient(20rem 14rem at 70% 6%, rgba(251,230,168,.3), transparent 68%);
  mix-blend-mode:multiply;
  -webkit-mask:linear-gradient(180deg, #000 40%, transparent);
          mask:linear-gradient(180deg, #000 40%, transparent);
}

/* —— scattered pastel dots flourish —— */
.footer__dot{
  position:absolute; z-index:-1; border-radius:50%;
  pointer-events:none; opacity:.7;
  filter:blur(.3px);
  animation:footer-twinkle 7s var(--ease) infinite alternate;
}
.footer__dot--blush{
  width:.7rem; height:.7rem; left:9%; top:30%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--blush-deep));
  box-shadow:0 0 0 5px rgba(246,201,214,.22);
}
.footer__dot--butter{
  width:.55rem; height:.55rem; left:24%; top:62%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--butter-deep));
  animation-delay:.8s;
}
.footer__dot--sage{
  width:.6rem; height:.6rem; right:14%; top:34%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--sage-deep));
  box-shadow:0 0 0 5px rgba(207,225,194,.24);
  animation-delay:1.6s;
}
.footer__dot--lilac{
  width:.5rem; height:.5rem; right:27%; top:66%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--lilac-deep));
  animation-delay:2.4s;
}
.footer__dot--sky{
  width:.5rem; height:.5rem; left:48%; top:24%;
  background:radial-gradient(circle at 35% 35%, #fff, var(--sky-deep));
  animation-delay:3.2s;
}
@keyframes footer-twinkle{
  from{ transform:translateY(0) scale(1); opacity:.55; }
  to{ transform:translateY(-7px) scale(1.12); opacity:.85; }
}
@media (prefers-reduced-motion: reduce){ .footer__dot{ animation:none; } }

/* —— layout —— */
.footer__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1.4rem;
}

/* —— brand —— */
.footer__brandwrap{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.footer__mark{
  display:grid; place-items:center;
  width:3rem; height:3rem; border-radius:50%;
  font-size:1.3rem; line-height:1; color:var(--bloom);
  background:radial-gradient(circle at 38% 32%, #fff, var(--blush) 130%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), var(--shadow-sm);
  transition:transform .5s var(--ease-soft);
}
.footer__inner:hover .footer__mark{ transform:rotate(-12deg) scale(1.06); }
.footer__brand{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.9rem,4vw,2.5rem); line-height:1;
  letter-spacing:-.015em; color:var(--ink);
}
.footer__meta{
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* —— nav links with painted left-to-right underline —— */
.footer__nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1.2rem,3vw,2.4rem); margin-top:.4rem;
}
.footer__link{
  position:relative;
  font-size:1rem; font-weight:600; color:var(--ink);
  padding-bottom:.2rem;
  transition:color .3s var(--ease);
}
.footer__link::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--bloom), var(--butter-deep));
  transition:right .4s var(--ease);
}
.footer__link:hover{ color:var(--bloom-deep); }
.footer__link:hover::after{ right:0; }

/* —— hairline rule —— */
.footer__rule{
  width:min(100%, 22rem); height:1px; margin-top:.6rem;
  background:linear-gradient(90deg, transparent, var(--wash-edge) 20%, var(--wash-edge) 80%, transparent);
}

/* —— copyright —— */
.footer__copy{
  font-size:.86rem; color:var(--ink-soft); letter-spacing:.01em;
}
.footer__copy em{
  font-style:italic; font-family:var(--f-display); color:var(--bloom);
  font-size:1.02em;
}

@media (max-width:640px){
  .footer__nav{ gap:1rem 1.6rem; }
  .footer__dot--lilac,
  .footer__dot--sky{ display:none; }
}

/* ===== integration patches ===== */
@media (max-width:980px){ .gallery__item--tall{ grid-row:span 1; } }

/* ============================================================
   SECTION: findus (Kust meid leida — Google map)
   ============================================================ */
.findus{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(4.5rem,9vh,7rem) 0;
}
.findus__wash{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(34rem 26rem at 4% 0%, rgba(200,226,236,.5), transparent 60%),
    radial-gradient(30rem 26rem at 98% 100%, rgba(207,225,194,.45), transparent 62%);
  mix-blend-mode:multiply;
}
.findus .section-head{ margin-bottom:clamp(2.2rem,4.5vw,3.2rem); }

.findus__grid{
  display:grid; grid-template-columns:.82fr 1.18fr;
  gap:clamp(1.4rem,3vw,2.2rem); align-items:stretch;
}

.findus__info{
  display:flex; flex-direction:column; gap:1.25rem;
  background:rgba(255,253,250,.72);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
          backdrop-filter:blur(8px) saturate(1.1);
  border:1px solid var(--wash-edge);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.3rem);
  box-shadow:var(--shadow-sm);
}
.findus__row{ display:flex; gap:.95rem; align-items:flex-start; }
.findus__ico{
  flex:none; width:2.7rem; height:2.7rem; display:grid; place-items:center;
  color:#fff; background:var(--bloom);
  border-radius:60% 40% 55% 45% / 55% 50% 50% 45%;
  box-shadow:0 9px 18px -6px var(--bloom);
}
.findus__row:nth-of-type(2) .findus__ico{ background:var(--grape); box-shadow:0 9px 18px -6px var(--grape); }
.findus__label{
  display:block; font-family:var(--f-body);
  font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:.25rem;
}
.findus__val{ font-family:var(--f-display); font-size:1.12rem; line-height:1.25; color:var(--ink); }
.findus__note{ font-size:.92rem; line-height:1.55; color:var(--ink-soft); }
.findus__info .btn{ margin-top:auto; align-self:flex-start; }

.findus__map{
  position:relative; min-height:380px;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--wash-edge);
  box-shadow:var(--shadow-md);
}
.findus__map iframe{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; filter:saturate(1.02);
}
.findus__pin{
  position:absolute; top:1rem; left:1rem; z-index:2;
  font-family:var(--f-body); font-size:.74rem; font-weight:800;
  letter-spacing:.04em; color:var(--bloom-deep);
  background:rgba(255,253,250,.92);
  border:1px solid rgba(255,255,255,.8);
  padding:.5em 1em; border-radius:100px;
  box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  pointer-events:none;
}

@media (max-width:860px){
  .findus__grid{ grid-template-columns:1fr; }
  .findus__map{ min-height:0; aspect-ratio:4/3; }
}

/* ============================================================
   PRELOADER — a flower that blooms petal-by-petal onto the carpel
   (the petals ARE the progress — no bar, no percentages)
   ============================================================ */
body.loading{ overflow:hidden; }

.loader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background:
    radial-gradient(58rem 40rem at 50% 32%, #FFFDFA, rgba(251,247,241,0) 62%),
    radial-gradient(40rem 32rem at 14% 8%, rgba(246,201,214,.5), transparent 60%),
    radial-gradient(38rem 30rem at 88% 92%, rgba(207,225,194,.45), transparent 60%),
    var(--paper);
  transition:opacity .85s var(--ease), visibility .85s var(--ease);
}
.loader--done{ opacity:0; visibility:hidden; }

.loader__inner{ display:grid; justify-items:center; gap:1.5rem; transition:transform .85s var(--ease); }
.loader--done .loader__inner{ transform:scale(1.14); }

.loader__flower{
  width:clamp(160px, 32vw, 230px); height:auto; overflow:visible;
  filter:drop-shadow(0 20px 32px rgba(166,50,95,.20));
  animation:ld-breathe 3.6s ease-in-out 2.3s infinite;
}

/* soft glow behind the bloom */
.loader__glow{
  transform-box:view-box; transform-origin:60px 60px; opacity:0;
  animation:ld-glow 2.2s var(--ease) .1s forwards;
}
@keyframes ld-glow{ 0%{opacity:0; transform:scale(.55);} 60%{opacity:.9;} 100%{opacity:.72; transform:scale(1);} }

/* the carpel / pistil appears first */
.loader__carpel{
  transform-box:view-box; transform-origin:60px 60px; transform:scale(0);
  animation:ld-pop .6s var(--ease-soft) .1s forwards;
}
.loader__stamens circle{ opacity:0; animation:ld-fadein .4s ease .55s forwards; }

/* petals are added one-by-one, growing out of the carpel */
.loader__petal{
  transform-box:view-box; transform-origin:60px 60px;
  transform:scale(0); opacity:0;
  animation:ld-petal .6s var(--ease-soft) forwards;
  animation-delay:calc(.4s + var(--i) * .1s);
}
.loader__petal--out{ fill:url(#ldPetalOuter); }
.loader__petal--in{  fill:url(#ldPetalInner); }

@keyframes ld-pop{ 0%{transform:scale(0);} 70%{transform:scale(1.14);} 100%{transform:scale(1);} }
@keyframes ld-petal{ 0%{transform:scale(0); opacity:0;} 55%{opacity:1;} 78%{transform:scale(1.09);} 100%{transform:scale(1); opacity:1;} }
@keyframes ld-fadein{ to{opacity:1;} }
@keyframes ld-breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }

.loader__word{
  font-family:var(--f-display); font-weight:500; font-size:clamp(1.4rem,3.4vw,1.75rem);
  letter-spacing:.01em; color:var(--green);
  opacity:0; animation:ld-rise .8s var(--ease) 1s forwards;
}
.loader__cap{
  font-family:var(--f-body); font-weight:700; font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--bloom);
  opacity:0; animation:ld-rise .8s var(--ease) 1.25s forwards;
}
.loader__cap span{ animation:ld-dots 1.4s steps(4) infinite; }
@keyframes ld-rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@keyframes ld-dots{ 0%{opacity:.2;} 50%{opacity:1;} 100%{opacity:.2;} }

@media (prefers-reduced-motion: reduce){
  .loader__petal,.loader__carpel,.loader__glow{ animation:none; opacity:1; transform:none; }
  .loader__stamens circle{ animation:none; opacity:1; }
  .loader__flower{ animation:none; }
  .loader__word,.loader__cap{ animation:none; opacity:1; }
  .loader__cap span{ animation:none; }
}