/* =============================================================================
   Domačija Košak — styles.css
   Framework-free. All design tokens live in :root.

   SCROLL ARCHITECTURE — "cover reveal" (the organic-tools.com principle):
     Every child of .stack is a full-viewport .panel that PINS in place
     (position: sticky; top: 0) while the NEXT panel slides up from the bottom
     and covers it. The pinned panel underneath is the "static image"; the
     incoming panel is the "mask". This is pure CSS — no JS, no clip-path — so
     it is rock-solid and Lenis only smooths the scroll on top of it.
       · .panel--hero   → opening panel (cream + mascot + headline)
       · .panel--media  → full-bleed photo with text over it (intro, manifesto)
       · .panel--split  → half solid-colour text block + half full-bleed photo,
                          sides alternate down the page
     GOTCHA: the scroll ancestor must not create a scroll container, so the body
     uses `overflow-x: clip` (NOT hidden — hidden would break position:sticky).

   Sections:  0 Fonts · 1 Tokens · 2 Reset · 3 Type · 4 Layout · 5 Buttons
              6 Nav · 7 Hero · 8 Stack/Panels · 9 Marquee · 10 Steps · 11 Team
              12 CTA · 13 Order · 14 Contact · 15 Footer · 16 Decor
              17 Reveals/motion · 18 Responsive
   ========================================================================== */

/* 0 ─ FONTS ──────────────────────────────────────────────────────────────── */
@font-face { font-family: "Maison Neue"; src: url("../assets/fonts/maison-neue-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Maison Neue"; src: url("../assets/fonts/maison-neue-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Maison Neue"; src: url("../assets/fonts/maison-neue-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* 1 ─ DESIGN TOKENS ─────────────────────────────────────────────────────────
   Colours sampled from the Košak vector logo + brand posters. */
:root {
  --green:       #47B97B;   /* fresh emerald — mascot, fills, CTAs */
  --green-ill:   #4EB371;   /* flat green of the hand-drawn illustrations (hen/egg) */
  --green-deep:  #2F6B47;   /* darker green — accessible green text, hovers */
  --green-tint:  #DDEFE4;   /* faint green wash — cards, hover states */
  --cream:       #EFE5DF;   /* dominant warm page background */
  --cream-deep:  #E7DACF;   /* deeper cream — alternating blocks, cards */
  --logo-cream:  #E8E0D0;   /* the footer logo's warm off-white — contact accents */
  --ink:         #141414;   /* type + hand-drawn line art */
  --ink-soft:    #534F49;   /* secondary / muted text */
  --white:       #FFFFFF;   /* cards, knockouts, eggs */
  --shell:       #E4CDBE;   /* eggshell-tan accent */

  --bg:          var(--cream);
  --text:        var(--ink);
  --text-muted:  var(--ink-soft);

  --font-display: "Maison Neue", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Maison Neue", "Hanken Grotesk", system-ui, sans-serif;
  --font-serif:   var(--font-display);   /* numerals use Maison Neue too — no Bodoni */

  --fs-eyebrow:  0.8125rem;
  --fs-sm:       0.9375rem;
  --fs-base:     clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-lg:       clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h3:       clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-h2:       clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  --fs-hero:     clamp(2.9rem, 1.4rem + 6.6vw, 6.4rem);
  --fs-num:      clamp(3rem, 2rem + 4.5vw, 5.5rem);

  --lh-tight: 1.02; --lh-snug: 1.18; --lh-body: 1.62; --measure: 63ch;

  --section-y: clamp(4rem, 2.5rem + 7vw, 8.5rem);
  --container: 1240px;
  --gutter: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --radius: clamp(16px, 1vw + 12px, 24px);
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 50px -24px rgba(20, 20, 20, 0.35);
  --shadow-nav: 0 8px 30px -18px rgba(20, 20, 20, 0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-dur: 0.85s;
  --nav-h: 70px;
}

/* 2 ─ RESET / BASE ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* native smooth-scroll is the fallback; Lenis adds .lenis and takes over */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:not(.lenis) { scroll-behavior: auto; } }

body {
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-base);
  line-height: var(--lh-body); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;   /* NOT hidden — hidden would break position:sticky panels */
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* ink ring passes on cream (16:1) and on bright green (9:1); dark backdrops
   (photos, footer, green-deep CTA band) switch to a cream ring below. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.panel--media :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--cream); }
::selection { background: var(--green); color: var(--white); }

.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 200; background: var(--ink); color: var(--cream); padding: 0.6rem 1rem; border-radius: 8px; transition: top 0.2s var(--ease); }
.skip-link:focus { top: 1rem; }

[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* 3 ─ TYPOGRAPHY ───────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); letter-spacing: -0.02em; }
h1 { line-height: var(--lh-tight); letter-spacing: -0.035em; }
p { max-width: var(--measure); }

.eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-deep); display: inline-flex; align-items: center; gap: 0.6em; }
.eyebrow::before { content: ""; width: 1.6em; height: 2px; background: var(--green); display: inline-block; }
.eyebrow--light { color: var(--cream); }
.eyebrow--light::before { background: var(--green); }
/* plain = no leading green rule (used in the hero eyebrow) */
.eyebrow--plain { gap: 0; }
.eyebrow--plain::before { display: none; }

/* 4 ─ LAYOUT ────────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; background: var(--cream); }
.section--band { background: var(--cream-deep); }

.section__head { max-width: 60ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.section__head .eyebrow { justify-content: center; }
.section__head h2 { font-size: var(--fs-h2); margin-top: 1rem; }
.section__head > p { margin: 1.1rem auto 0; color: var(--text-muted); font-size: var(--fs-lg); }
/* left-aligned head (team section) */
.section__head--start { text-align: left; margin-inline: 0; max-width: 64ch; }
.section__head--start .eyebrow { justify-content: flex-start; }
.section__head--start > p { margin-inline: 0; }

/* 5 ─ BUTTONS ───────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--green); --btn-fg: var(--white);
  display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; font-size: var(--fs-sm); letter-spacing: -0.01em;
  padding: 0.85em 1.45em; background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bg); border-radius: var(--radius-pill);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); }
.btn .btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
/* bright brand green (same as the kontakt egg) with ink text — ink on --green is
   ≈7.8:1, so it passes WCAG AA/AAA while matching the other green elements. */
.btn--primary { --btn-bg: var(--green); --btn-fg: var(--ink); }
.btn--primary:hover { --btn-bg: color-mix(in srgb, var(--green) 88%, #000); border-color: color-mix(in srgb, var(--green) 88%, #000); }
/* "Poglej ponudbo" — same dark (ink) as the footer */
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--cream); border-color: var(--ink); }
.btn--ink:hover { --btn-bg: #000; border-color: #000; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--small { padding: 0.6em 1.1em; font-size: var(--fs-eyebrow); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

.text-link { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; color: var(--green-deep); }
.text-link svg { width: 1.1em; transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(4px); }
.text-link--light { color: var(--cream); }
.text-link--light:hover { color: var(--white); }

/* 6 ─ NAV ─────────────────────────────────────────────────────────────────────
   Sits ON TOP of the hero and scrolls away with the page (NOT fixed, no
   hide-on-scroll). Just logo (centred) + language switch. */
.nav { position: absolute; inset: 0 0 auto 0; z-index: 100; }
.nav__inner { max-width: var(--container); margin-inline: auto; padding: clamp(0.6rem, 0.4rem + 0.6vw, 1.05rem) var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
/* lang on the LEFT, spacer on the right — keeps the top-right corner clear for
   the fixed "kontakt" egg button. */
.nav__edge { grid-column: 3; }
.nav__logo { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; }
.nav__logo img { width: clamp(56px, 6.4vw, 80px); height: auto; }
.lang { grid-column: 1; justify-self: start; display: inline-flex; align-items: center; gap: 0.15rem; }
.lang__btn { background: none; border: 0; padding: 0.3rem 0.45rem; font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.1em; color: color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 8px; transition: color 0.2s var(--ease); }
.lang__btn:hover { color: var(--ink); }
.lang__btn.is-active { color: var(--green-deep); }
.lang__sep { color: color-mix(in srgb, var(--ink) 30%, transparent); font-weight: 700; }

/* 7 ─ HERO (first panel in the stack) ─────────────────────────────────────────── */
/* a touch shorter than a viewport so the next photo (couple) already peeks below.
   set via --panel-h (not height:) so it wins regardless of source order. */
/* extra bottom padding lifts the vertically-centred hero content slightly up */
.panel--hero { --panel-h: 85svh; background: var(--cream); display: flex; align-items: center; padding-top: calc(var(--nav-h) + clamp(0.5rem, 2vw, 1.5rem)); padding-bottom: clamp(3rem, 9vh, 7rem); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); width: 100%; }
.hero__eyebrow { margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.panel--hero h1 { font-size: var(--fs-hero); text-transform: lowercase; margin-bottom: clamp(1.1rem, 2vw, 1.6rem); }
/* tilt the whole "meni vedno znese!" ~5° CCW (inner span so the hero
   reveal animation, which sets transform on the h1, doesn't cancel it) */
.hero__title-rot { display: inline-block; transform: rotate(-5deg); transform-origin: left center; }
.panel--hero h1 .punch { position: relative; white-space: nowrap; }
.panel--hero h1 .punch::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; bottom: 0.04em; height: 0.16em; background: var(--green-ill); border-radius: 999px; transform: scaleX(0); transform-origin: left; animation: punchIn 0.9s var(--ease) 0.6s forwards; }
@keyframes punchIn { to { transform: scaleX(1); } }

/* Hero copy animates in on LOAD via pure CSS — it never waits on the
   IntersectionObserver, so the headline is ALWAYS visible even if JS reveals
   are delayed or fail. (The stack panels below reveal by sliding into view.) */
/* slide only (no opacity) so the hero copy is visible even before/without the
   animation running — the headline must NEVER depend on the clock or JS. */
@keyframes riseIn { from { transform: translateY(26px); } to { transform: none; } }
.js .panel--hero .reveal { opacity: 1; transform: none; animation: riseIn var(--reveal-dur) var(--ease) var(--reveal-delay, 0ms) both; }
.hero__sub { font-size: var(--fs-lg); color: var(--text); max-width: 46ch; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero__art { position: relative; display: grid; place-items: center; }
.hero__art-blob { position: absolute; inset: 6% 4% 0 4%; z-index: 0; background: radial-gradient(circle at 50% 40%, var(--green-tint), transparent 70%); }
/* new hen (DOMAČIJA KOKOŠ) already faces left → no scaleX flip. On desktop it is
   anchored to the very bottom of the hero (the border with the next segment) and
   enlarged; on phones it stays in flow above the copy. */
.hero__mascot { position: relative; z-index: 1; width: min(86%, 392px); align-self: end; filter: drop-shadow(0 22px 34px rgba(47, 107, 71, 0.26)); }
@media (min-width: 961px) {
  .hero__art { position: static; }
  .hero__art-blob { display: none; }   /* unscoped once .hero__art is static — drop it on desktop */
  .hero__mascot { position: absolute; right: clamp(5rem, 11vw, 9.5rem); bottom: 0; width: min(34vw, 430px); max-width: none; align-self: auto; }
}
.hero__badge { position: absolute; z-index: 2; right: 4%; top: 6%; width: clamp(64px, 8vw, 104px); height: clamp(64px, 8vw, 104px); display: grid; place-items: center; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow-soft); transform: rotate(-8deg); }
.hero__badge b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -0.03em; }

.scroll-cue { position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.scroll-cue__line { width: 1.5px; height: 42px; background: color-mix(in srgb, var(--ink) 25%, transparent); position: relative; overflow: hidden; border-radius: 2px; }
.scroll-cue__line::after { content: ""; position: absolute; inset: 0; background: var(--green); transform: translateY(-100%); animation: cue 1.9s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 55%, 100% { transform: translateY(100%); } }

/* 8 ─ STACK / PANELS — cover-reveal deck (the organic-tools movement) ──────────
   Every direct child of .stack is a full-viewport .panel that PINS to the top of
   the viewport (position: sticky; top: 0) and freezes there while the NEXT panel
   slides up from below and COVERS it. The pinned panel is the "stuck background";
   the incoming panel is the "mask" scrolling over it. Pure CSS — panels later in
   the DOM paint above earlier ones, so each one covers its predecessor. No JS, no
   clip-path; Lenis only adds momentum on top.
     · one panel = exactly one viewport (height: 100svh), so one panel's worth of
       scroll = one full cover transition (matches organic-tools' pacing).
     · the nav (z-index:100) stays above the deck; the "Kako delamo" section right
       after .stack is the next "card" that scrolls up over the final pinned panel.
   HARD REQUIREMENT: no ancestor in the vertical scroll axis may be a scroll
   container, or sticky silently dies. <body> uses overflow-x: clip (a single-axis
   clip does NOT create a scroll container) and never sets overflow-y. A panel may
   safely clip its OWN overflow (only ancestors of a sticky box matter).
   PHONES / reduced-motion: the deck is switched off (panels become plain stacked
   sections) further down — see Responsive + Reveals/motion. */
.stack { position: relative; z-index: 0; }
.panel {
  position: sticky;
  top: 0;
  /* slightly under one viewport so a sliver of the NEXT panel always peeks at
     the bottom — gives a sense of "what's coming" while still cover-revealing */
  height: var(--panel-h, 90svh);
  overflow: hidden;        /* clip the full-bleed media to the card */
  background: var(--cream);
  isolation: isolate;      /* keep each panel's veil/content z-index self-contained */
}

/* full-bleed media panel: photo fills the frozen card, veil darkens it, text over.
   No sticky/negative-margin tricks anymore — the PANEL itself is the sticky layer,
   so bg + veil just fill it absolutely and the content centres on top. */
.panel--media { color: var(--cream); }
.panel__bg { position: absolute; inset: 0; z-index: 0; }
.panel__bg img { width: 100%; height: 100%; object-fit: cover; }

/* "reverse reveal" segments (#uvod couple photo, #regenerativno pasture): the
   photo is pinned to the viewport (background-attachment: fixed) while the panel
   scrolls NORMALLY (not sticky), so the text + veil travel UP over the stationary
   image. Kept a bit shorter than a full screen. */
.panel--fixedbg { position: relative; height: auto; min-height: 70svh; }
.panel--media.panel--fixedbg > .container { min-height: 70svh; }
.panel--fixedbg .panel__bg { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
.panel--fixedbg .panel__bg img { display: none; }
#uvod .panel__bg { background-image: url("../assets/img/uvod-1600.webp"); }
#regenerativno .panel__bg { background-image: url("../assets/img/regen-1600.webp"); }

/* split panels keep their green/cream text block; the PHOTO half fills its OWN
   half properly (object-fit: cover — framed to the half-screen, no full-screen
   over-crop) and gets a gentle scroll-parallax drift (mediaParallax in main.js).
   The slight upscale gives the drift room without exposing edges. */
.panel--split.panel--fixedbg .panel__media img { transform: translateY(var(--py, 0px)) scale(1.18); will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .panel--split.panel--fixedbg .panel__media img { transform: none; }
}
.panel__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(20,20,20,0.34) 0%, rgba(20,20,20,0.15) 38%, rgba(18,34,22,0.74) 100%); }
.panel__veil--strong { background: linear-gradient(180deg, rgba(20,20,20,0.5) 0%, rgba(18,34,22,0.55) 45%, rgba(18,34,22,0.85) 100%); }
.panel--media > .container { position: relative; z-index: 2; min-height: var(--panel-h, 90svh); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.panel--media > .panel__inner--center { align-items: center; }
.panel__inner { width: 100%; padding-block: clamp(2rem, 6vh, 4rem); }
.panel__inner--center { text-align: center; max-width: 62rem; margin-inline: auto; }
.panel__inner--center .eyebrow { justify-content: center; }
/* left-aligned statement, pulled to the left edge of the container */
.panel__inner--left { text-align: left; max-width: 46rem; margin-right: auto; }
.panel__inner--left .panel__lead { margin: 0; max-width: 24ch; }
.panel__lead { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.4; letter-spacing: -0.015em; max-width: 32ch; margin: clamp(1rem, 2vw, 1.6rem) auto 0; color: var(--cream); }
.panel__lead em { font-style: normal; color: var(--green); font-weight: 700; }
.panel__tag { display: inline-flex; align-items: center; gap: 0.6em; margin-top: clamp(1.4rem, 3vw, 2rem); font-weight: 700; font-size: var(--fs-sm); background: var(--white); color: var(--ink); padding: 0.6em 1.1em; border-radius: var(--radius-pill); box-shadow: var(--shadow-soft); }
.dot { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--green); display: inline-block; }
.panel__quote { font-family: var(--font-display); font-weight: 700; max-width: 22ch; font-size: clamp(1.9rem, 1rem + 4vw, 4rem); line-height: 1.1; letter-spacing: -0.025em; margin: 1.2rem 0; }
.panel__body { max-width: 56ch; color: rgba(239,229,223,0.92); font-size: var(--fs-lg); }
.panel__cite { margin-top: 1.5rem; font-weight: 700; color: var(--green); }

/* split panel: solid-colour text half + full-bleed photo half, side by side,
   each the full height of the frozen card (grid items stretch to the 100svh row).
   The whole panel sticky-stacks as one — no internal pinning. */
.panel--split { display: grid; grid-template-columns: 1fr 1fr; }
.panel__text { display: flex; align-items: center; }
/* bright green block with DARK (ink) text — like organic-tools' black-on-ochre;
   keeps the vibrant brand green while passing WCAG AA (ink on --green ≈ 9:1). */
.panel__text[data-tone="green"] { background: var(--green); color: var(--ink); }
.panel__text[data-tone="green"] .eyebrow { color: var(--ink); }
.panel__text[data-tone="green"] .eyebrow::before { background: var(--ink); }
.panel__text[data-tone="green"] .text-link { color: var(--ink); }
.panel__text[data-tone="green"] .text-link:hover { color: var(--green-deep); }
.panel__text[data-tone="cream"] { background: var(--cream-deep); color: var(--ink); }
.panel__text-in { padding: clamp(2rem, 5.5vw, 5.5rem); max-width: 38rem; margin-inline: auto; width: 100%; }
.panel__text h2 { font-size: var(--fs-h2); margin: clamp(0.9rem, 2vw, 1.3rem) 0 0; }
.panel__copy { font-size: var(--fs-lg); line-height: 1.55; max-width: 44ch; margin-top: clamp(1rem, 2vw, 1.4rem); }
.panel__copy + .text-link, .panel__copy + .btn { margin-top: 1.7rem; }
.panel__media { position: relative; overflow: hidden; background: var(--cream-deep); }
/* absolute fill so the photo always covers the full card height — a grid item's
   height isn't a "definite" length for a child's height:100%, so an in-flow img
   would fall back to its intrinsic ratio and overflow/anchor top. */
.panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__media--ph { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--green-tint), var(--cream-deep)); }
.panel__media--ph img { position: static; width: min(48%, 280px); height: auto; transform: scaleX(-1); object-fit: contain; }
.ph-note { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); }

/* 10 ─ HOW (giant brand watermark baked into the bg · numbered rows over it) ─
   .how__mark = an oversized "Kako / delamo" sitting behind the rows in a flat
   translucent white. It's position:fixed (baked onto the fixed bg photo) and JS
   clips it to the section's on-screen band (howWatermark in main.js), so it's
   revealed from under the section above and never spills over it. Purely
   decorative — the actual heading is the small .how__eyebrow. The section carries
   its own warmer background so it reads distinctly from the team section below. */
/* "kako delamo" workshop photo as the background, under a cream wash so the photo
   reads through while the watermark fill + dark rows stay legible. */
/* dark overlay matching the two full-bleed photo statements (#uvod/#regenerativno);
   the section now reads as a dark photo block → light text + white watermark over it. */
.how { background-color: #16201a; background-image: linear-gradient(rgba(8, 12, 8, 0.58), rgba(8, 12, 8, 0.58)), url("../assets/img/how-bg.webp"); background-size: cover; background-position: center; background-attachment: fixed; position: relative; overflow: hidden; isolation: isolate; color: var(--cream); min-height: 78svh; display: grid; align-content: center; padding-block: clamp(1.5rem, 0.6rem + 1.8vw, 2.75rem); }

.how__mark {
  /* "baked" onto the fixed background photo: the watermark is pinned to the viewport
     (like background-attachment: fixed) so the rows scroll OVER it. JS clips it to the
     section's on-screen band (howWatermark in main.js) so it's revealed from under the
     section above and never spills over it. */
  position: fixed; inset: 0; z-index: 0; margin: 0;
  display: grid; align-content: center; justify-items: start;
  padding-inline: var(--gutter);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: 0.8; letter-spacing: -0.045em; text-align: left;
  pointer-events: none; user-select: none;
  clip-path: inset(50% 0);   /* no-JS fallback → hidden (it's decorative) */
}
.how__mark span {
  display: block; font-size: clamp(2.5rem, 9vw, 8rem);   /* sized to clear the rows on the right */
  color: rgba(255, 255, 255, 0.9);   /* flat white at 90% opacity */
}

.how__inner { position: relative; z-index: 1; }
/* The giant watermark IS the visible title now; keep the real <h2> only for
   screen readers (the section's aria-labelledby still points at it). */
.how__eyebrow { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* numbered rows in a readable column pushed to the right, so the watermark peeks
   around them on the left; hairline dividers keep it clean and editorial. */
.how__list { display: grid; gap: 0; max-width: 44rem; margin-left: auto; }
.how__row { display: grid; grid-template-columns: 1fr auto; gap: clamp(0.85rem, 1.8vw, 1.5rem); align-items: center; padding-block: clamp(0.5rem, 0.9vw, 0.9rem); border-top: 1px solid transparent; }
/* content reads right-aligned, with the tool illustration on the right edge */
.how__rowtxt { order: 1; text-align: right; }
.how__num { order: 2; }
.how__row:last-child { border-bottom: 1px solid transparent; }
/* hand-drawn tool illustration (replaces the old step number). The source files are
   uniform SQUARE canvases with each tool pre-sized/aligned by the user, so they're all
   shown in ONE uniform square box (no per-icon sizing, no trim). No shadow; centred in
   the row box (align-items:center on the row), not pinned to the heading. */
.how__num { display: grid; place-items: center; width: clamp(68px, 7.1vw, 85px); }
.how__num img { width: 100%; height: auto; display: block; }
.how__rowtxt h3 { font-size: var(--fs-h3); margin-bottom: 0.35rem; letter-spacing: -0.02em; color: var(--white); }
.how__rowtxt p { font-size: var(--fs-sm); color: rgba(239, 229, 223, 0.82); max-width: none; }

/* 11 ─ TEAM (compact cards: people/dog in green, hens in plain tiles) ─────────── */
.team__intro { max-width: 56ch; }
/* full-bleed gallery: 6 across, edge-to-edge (breaks out of the .container) so the
   portraits fill the width "border to border". 12 members → 2 tidy rows. */
.team__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.5rem, 0.9vw, 0.9rem); margin-top: clamp(2rem, 4vw, 3rem); width: 100vw; margin-left: calc(50% - 50vw); padding-inline: clamp(0.6rem, 1.5vw, 1.5rem); }
@media (max-width: 1100px) { .team__grid { grid-template-columns: repeat(4, 1fr); } }
.team__card { display: flex; flex-direction: column; border-radius: var(--radius); padding: clamp(0.7rem, 0.9vw, 0.95rem); background: var(--cream-deep); border: 0; transition: transform 0.34s cubic-bezier(0.34, 1.45, 0.64, 1); will-change: transform; }
/* each card drifts in its OWN direction on hover (--tx/--ty/--tr set per card in
   js/main.js renderTeam), instead of all nudging straight up. */
/* needs to out-specify `.js .reveal.is-visible { transform: none }`, else the hover
   transform is cancelled once the card has revealed. */
.js .team__card.reveal:hover { transform: translate(var(--tx, 0px), var(--ty, -5px)) rotate(var(--tr, -2deg)) scale(var(--ts, 1.06)); position: relative; z-index: 3; }
.team__card--lead { background: var(--green); border-color: transparent; color: var(--ink); }
.team__photo { aspect-ratio: 4 / 3; border-radius: calc(var(--radius) - 9px); overflow: hidden; background: var(--cream-deep); margin-bottom: 0.8rem; }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.1; }
.team__blurb { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.35rem; }
.team__card--lead .team__blurb { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.team__more { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.02em; color: var(--green-deep); }

/* 12 ─ CTA BAND ──────────────────────────────────────────────────────────────── */
.cta-band { background: var(--green-deep); color: var(--white); text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-size: var(--fs-h2); text-transform: lowercase; max-width: 18ch; margin: 0 auto 1rem; }
.cta-band p { margin: 0 auto 2rem; max-width: 48ch; font-size: var(--fs-lg); color: rgba(255,255,255,0.94); }
.cta-band__btns { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.cta-band .btn--primary { --btn-bg: var(--ink); --btn-fg: var(--cream); border-color: var(--ink); }
.cta-band .btn--primary:hover { --btn-bg: #000; border-color: #000; }
.cta-band .btn--ghost { --btn-fg: var(--white); border-color: rgba(255,255,255,0.85); }
.cta-band .btn--ghost:hover { background: var(--white); color: var(--green-deep); border-color: var(--white); }

/* 13 ─ ORDER ─────────────────────────────────────────────────────────────────── */
.order__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); max-width: 920px; margin-inline: auto; }
.product-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; }
.product-card__media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: 0.5rem; }
.product-card h3 { font-size: var(--fs-h3); }
.product-card p { font-size: var(--fs-sm); color: var(--text-muted); }
.badge { position: absolute; top: 1rem; left: 1rem; background: var(--ink); color: var(--cream); font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.45em 0.9em; border-radius: var(--radius-pill); }
.order__form { display: grid; gap: 1.1rem; max-width: 640px; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.order__note { text-align: center; max-width: 48ch; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; color: var(--text-muted); }

/* 14 ─ CONTACT + FORMS ───────────────────────────────────────────────────────── */
.contact__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact__details { display: grid; gap: 1.1rem; margin: 0; }
.contact__details dt { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); }
.contact__details dd { font-size: var(--fs-lg); margin: 0; }
.contact__details a:hover { color: var(--green-deep); }
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: var(--fs-sm); }
.field input, .field textarea { font: inherit; padding: 0.85em 1em; border-radius: 14px; width: 100%; border: 2px solid color-mix(in srgb, var(--ink) 16%, transparent); background: var(--white); color: var(--ink); transition: border-color 0.2s var(--ease); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.field textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { font-weight: 700; min-height: 1.3em; }
.form__status[data-state="ok"] { color: var(--green-deep); }
.form__status[data-state="err"] { color: #B4341F; }

/* 15 ─ FOOTER (just the crest + a humble credit line) ───────────────────────────
   Dark ink panel; the cream crest logo and cream-muted text/links match its tone.
   The old 3-column menu was removed per the brief. */
.site-footer { background: var(--ink); color: var(--cream); padding-block: clamp(3rem, 2rem + 5vw, 5rem) 1.8rem; position: relative; z-index: 1; text-align: center; }
.site-footer__top { display: flex; justify-content: center; }
.site-footer .flogo { display: inline-block; width: clamp(150px, 22vw, 230px); }
.site-footer .flogo img { width: 100%; height: auto; opacity: 0.92; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.site-footer .flogo:hover img { opacity: 1; transform: translateY(-2px); }
.site-footer a { color: rgba(239,229,223,0.82); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.site-footer a:hover { color: var(--white); }
.site-footer__bottom { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid rgba(239,229,223,0.15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.5rem; align-items: center; text-align: left; }
.site-footer__bottom small { color: rgba(239,229,223,0.5); font-size: var(--fs-eyebrow); }
.site-footer__credits-wrap { display: inline-flex; align-items: center; gap: 0.55rem; }
.site-footer__credits { display: inline-block; text-align: right; }
.site-footer__credits[hidden] { display: none; }
.site-footer__credits.is-open { animation: credits-in 0.3s var(--ease); }
@keyframes credits-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.site-footer__credits a { color: rgba(239,229,223,0.6); }
/* info toggle that hides/reveals the credits */
.credits-toggle { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid rgba(239,229,223,0.3); background: none; color: rgba(239,229,223,0.55); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.credits-toggle:hover, .credits-toggle[aria-expanded="true"] { color: var(--cream); border-color: rgba(239,229,223,0.6); }
.credits-toggle svg { width: 1rem; height: 1rem; }

/* 16 ─ DECOR ─────────────────────────────────────────────────────────────────── */
/* (The hand-drawn chicken-foot illustrations + the footprint divider were removed.) */

/* 17 ─ REVEALS / MOTION ──────────────────────────────────────────────────────────
   .reveal is hidden only when JS is present (html.js); without JS everything shows.
   Used for the post-stack sections + the hero copy (the stack panels reveal
   themselves by sliding into view, so they don't need it). */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .panel--hero h1 .punch::after { animation: none; transform: scaleX(1); }
  .js .panel--hero .reveal { animation: none; opacity: 1; transform: none; }
  .scroll-cue__line::after { animation: none; }
  .btn, .btn__arrow, .nav { transition: none; }
  /* no card drift / no egg scale when motion is reduced */
  .team__card { transition: none; }
  .team__card:hover { transform: none; }
  .egg-btn:hover, .egg-btn:focus-visible { transform: rotate(9deg); }
  /* Deck OFF: panels stop pinning and become plain, full-height stacked sections
     (no card-over-card cover). Show per-step numerals instead of the sticky one. */
  .panel { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  .steps__num { display: none; }
  .steps__index { display: block; }
}

/* 18 ─ RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav__links { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.4rem; padding: 2rem var(--gutter); background: var(--cream); box-shadow: -20px 0 60px -30px rgba(0,0,0,0.5); transform: translateX(100%); transition: transform 0.4s var(--ease); }
  .nav[data-open="true"] .nav__links { transform: translateX(0); }
  .nav__links a { font-size: 1.3rem; }
  .nav__cta { margin: 0.6rem 0 0; }
  .nav__toggle { display: block; z-index: 110; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 300px; margin-inline: auto; }
  .hero__sub { max-width: none; }

  /* Deck OFF below 960px: panels stop freezing and scroll normally (no cover).
     Avoids mobile 100vh/toolbar quirks and cramped two-column cards. The split
     panels collapse to image-over-text at 820px (block below). */
  .panel { position: relative; height: auto; min-height: 100svh; overflow: visible; }
  .panel--hero { min-height: 100svh; }
}

/* split panels → image on top, text below, still one viewport per panel */
@media (max-width: 820px) {
  .scroll-cue { display: none; }   /* collides with the hero CTA on phones */

  /* phones: drop the pinning — image on top, text below (plain, no clipping).
     .panel__media MUST stay positioned (relative): its photo is position:absolute,
     so a static media box would let the image escape to .stack and cover the page. */
  .panel--split { grid-template-columns: 1fr; grid-template-rows: none; align-items: stretch; }
  .panel--split .panel__media { order: -1; position: relative; height: 50svh; }
  .panel__text { min-height: auto; }
  .panel__text-in { max-width: none; padding: clamp(1.75rem, 7vw, 3rem); }

  /* full-bleed media: bg + veil already fill via the base rules (position:absolute;
     inset:0). With the deck off the panel is a normal section, so the inner container
     keeps doing the vertical centring itself (same as desktop). */
  .panel--media > .container { min-height: 100svh; display: flex; align-items: center; }

  .steps__grid { grid-template-columns: 1fr; gap: 0; }
  .steps__num { display: none; }
  .steps__index { display: block; }
  .steps__item { min-height: auto; }

  .team__grid { grid-template-columns: repeat(3, 1fr); }
  .contact__grid, .order__grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .panel--hero h1 .punch { white-space: normal; }
  .panel--split .panel__media { height: 38svh; }
  /* stop the full-bleed breakout on phones so the cards line up with the heading
     and the rest of the content (same width as every other segment) */
  .team__grid { grid-template-columns: repeat(2, 1fr); width: auto; margin-left: 0; padding-inline: 0; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__credits { text-align: left; }
}

/* 19 ─ PAPER TEXTURE WASH ──────────────────────────────────────────────────────
   The supplied crumpled-paper photo, multiplied over the whole page at 80% so the
   cream/photos get a subtle hand-made grain. Sits below the nav, never catches
   pointer events. */
.paper-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url("../assets/img/paper.webp") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) { .paper-overlay { will-change: auto; } }

/* 20 ─ OFFER TILES (sold-out) + WAITLIST ───────────────────────────────────────
   Two photo tiles side by side, each darkened with a big rotated "razprodano"
   stamp; a small name/email waitlist sits below. */
/* the sold-out note runs long — give it a wider measure so it doesn't wrap cramped */
/* tighter than the default section rhythm: less air above the title and below the
   last element. #ekipa uses the same rhythm so the two segments match. */
#ponudba, #ekipa { padding-block: clamp(3rem, 2rem + 3vw, 6rem); }
#ponudba .section__head { max-width: 80rem; margin-bottom: clamp(1.8rem, 3.5vw, 3rem); }
#order-note { max-width: 72rem; margin-inline: auto; }

/* full container width (no 980px cap) so the two photos are large and "fill the
   grid"; they now sit BELOW the waitlist form (see index.html order). */
.offer__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3.5vw, 3.5rem); margin: clamp(1rem, 2vw, 1.6rem) auto 0; align-items: center; justify-items: start; }
/* each tile is a transparent square cut-out on the LEFT with its text beside it on
   the right (left-aligned). The picture is half its old size; the "Razprodano"
   status now reads as green text in the copy instead of an overlaid stamp. */
.offer-tile { display: flex; flex-direction: row; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); text-align: left; cursor: default; }
.offer-tile__media { position: relative; flex: 0 0 auto; width: clamp(132px, 18vw, 274px); }
/* the eggs photo sits inside its square with a little transparent margin, so it
   reads slightly smaller than the basket — bump it 10% to balance the pair. */
.offer-tile--eggs .offer-tile__media { width: clamp(145px, 19.8vw, 301px); }
.offer-tile__media img { width: 100%; height: auto; display: block; will-change: transform; transition: transform 0.35s var(--ease); }
/* sold out, but still playful: a happy little tilt + pop on hover, like the kontakt egg
   (no "disabled" cursor or shake — it just isn't a clickable button). */
.offer-tile:hover .offer-tile__media img { transform: rotate(-3deg) scale(1.05); }
.offer-tile--eggs:hover .offer-tile__media img { transform: rotate(3deg) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .offer-tile__media img { transition: none; } .offer-tile:hover .offer-tile__media img, .offer-tile--eggs:hover .offer-tile__media img { transform: none; } }
.offer-tile__cap { color: var(--ink); }
.offer-tile__cap h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.offer-tile__cap p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.25rem; max-width: 26ch; }
.offer-tile__status { display: inline-block; margin-top: 0.7rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-sm); color: var(--green-deep); }

.waitlist { max-width: 720px; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; gap: 0.9rem; text-align: center; }
.waitlist__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.8rem; align-items: end; text-align: left; }
.waitlist__btn { white-space: nowrap; }
.waitlist .form__status { text-align: center; }

/* 21 ─ FUN CONTACT CLOSE (bright green + Pišite nam card) ───────────────────────*/
.contact-fun { background: var(--green); color: var(--ink); position: relative; overflow: hidden; }
.contact-fun .section__head h2 { color: var(--ink); }
.contact-fun .section__head > p { color: color-mix(in srgb, var(--ink) 76%, transparent); }
.contact-fun .contact__details dt { color: color-mix(in srgb, var(--ink) 62%, var(--green-deep)); }
.contact-fun .contact__details dd, .contact-fun .contact__details a { color: var(--ink); }
.contact-fun .contact__details a:hover { color: var(--green-deep); }
.contact-card { background: var(--white); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.3rem); box-shadow: var(--shadow-soft); }
.contact-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.02em; margin-bottom: 0.3rem; }

@media (max-width: 820px) {
  .offer__tiles { gap: 1rem; }
  .waitlist__row { grid-template-columns: 1fr; }
  .waitlist__btn { justify-self: stretch; justify-content: center; }
}
@media (max-width: 560px) {
  .offer__tiles { grid-template-columns: 1fr; }
}

/* 22 ─ FLOATING "KONTAKT" EGG (always in the top-right corner) ──────────────────
   The egg art + the word "kontakt" are both tilted a few degrees (the egg sits at
   -9°, the text rides at a slightly different angle) for a hand-made feel. */
.egg-btn {
  position: fixed; z-index: 120;   /* ABOVE the nav (100): the nav sits over the hero
     and its right cell used to overlap the top of the egg, swallowing the hover —
     that's why it "sometimes" didn't react. Keeping the egg on top fixes it. */
  top: clamp(0.5rem, 0.9vw, 0.85rem); right: clamp(0.55rem, 1.1vw, 1rem);
  display: grid; place-items: center;
  width: clamp(78px, 8.6vw, 128px); aspect-ratio: 444 / 600;
  transform: rotate(9deg); transform-origin: center; will-change: transform;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
/* whole bounding box (incl. the transparent corners) is the hit target, so the
   move triggers reliably anywhere on the egg. A touch stronger so it's clearly felt. */
.egg-btn:hover, .egg-btn:focus-visible { transform: rotate(3deg) scale(1.09); }
.egg-btn:active { transform: rotate(6deg) scale(1.03); }
.egg-btn__egg { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.egg-btn__txt {
  grid-area: 1 / 1; position: relative; transform: rotate(-5deg);
  font-family: var(--font-display); font-weight: 700; text-transform: lowercase; letter-spacing: -0.01em;
  font-size: clamp(0.82rem, 1.5vw, 1.2rem); color: var(--ink); pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* hidden while the contact section (its own target) is in view */
.egg-btn.is-hidden { opacity: 0; visibility: hidden; transform: rotate(9deg) scale(0.6) translateY(-12px); pointer-events: none; }

/* TITLE ILLUSTRATIONS — a little hand-drawn veg/animal in front of each heading.
   Green art reads on cream/white; on the bright-green text blocks it would vanish,
   so there it becomes a solid ink stamp matching the ink heading. */
.title-ill {
  display: inline-block; height: 1.55em; width: auto; vertical-align: -0.34em; margin-right: 0.34em;
  filter: drop-shadow(0 6px 9px rgba(47, 107, 71, 0.18));
}
.section__head .title-ill { vertical-align: -0.28em; }
.panel__text[data-tone="green"] .title-ill { filter: brightness(0) saturate(0) opacity(0.82); }

/* The two full-bleed statement panels (#uvod, #regenerativno): centred white text,
   no shadow, and a gentle uniform dark overlay on the photo for contrast. */
.panel--media.panel--fixedbg .panel__bg::after {
  content: ""; position: absolute; inset: 0; background: rgba(8, 12, 8, 0.42);
}
.panel--media .panel__lead,
.panel--media .panel__quote,
.panel--media .panel__body { color: var(--white); text-shadow: none; }

/* CONTACT — looping background video behind the warm "Pridite pogledat…" close.
   A solid (non-gradient) scrim keeps the cream text + footprints legible; the
   white "Pišite nam" card stays readable on its own background. */
.contact-fun--video { isolation: isolate; }
/* lift the content above the video+scrim; the footprints keep their own
   absolute positioning (z-index:1) and already sit above the z-0 background. */
.contact-fun--video > .container { position: relative; z-index: 2; }
.contact-fun__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.contact-fun__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-fun__scrim { position: absolute; inset: 0; background: rgba(16, 38, 23, 0.62); }
/* white text everywhere; labels stay footer-logo beige, links are white → beige on hover */
.contact-fun--video .section__head h2,
.contact-fun--video .section__head > p,
.contact-fun--video .contact__details dd,
.contact-fun--video .contact__details a { color: var(--white); text-shadow: 0 2px 14px rgba(10, 18, 12, 0.5); }
.contact-fun--video .contact__details dt { color: var(--logo-cream); text-shadow: 0 2px 14px rgba(10, 18, 12, 0.5); }
.contact-fun--video .contact__details a:hover { color: var(--logo-cream); }

@media (max-width: 560px) {
  .egg-btn { width: clamp(74px, 19vw, 100px); }
}

/* =============================================================================
   23 ─ MOBILE DESIGN PASS (2026-06-16) — phone-first flat colour bands
   A clean vertical stack: each photo butts STRAIGHT into its colour block
   (green / darker-cream) with NO lighter-cream strip between. That strip was
   leftover height from the deck-off `min-height:100svh` on each split panel —
   the single-column grid pushed the spare height between the photo and the
   block. Dropping the forced height lets the colour band sit flush under the
   photo. Hero hen goes big + full-bleed, cropped off the RIGHT like the IG key
   art. "Kako delamo" shows a normal title above the steps on PHONES only —
   iPad + desktop keep the giant watermark (per the brief).
     ≤820px → split + statement panels (also covers iPad portrait, which already
              stacks, so it's strictly an improvement there)
     ≤640px → phone-only: big hero hen + the "Kako delamo" title swap
   ========================================================================== */
@media (max-width: 820px) {
  /* photo butts straight onto its colour block — kills the lighter-cream gap */
  .panel--split { min-height: 0; }
  /* text sits HIGH in the colour band (big blank colour below it), but nudged
     20px down from the very top so it isn't glued to the image edge. Uniform on
     all 6 fields (the bottom band is identical). */
  .panel--split .panel__text-in {
    padding-top: calc(clamp(1.75rem, 7vw, 3rem) + 20px);
    padding-bottom: calc(clamp(11rem, 52vw, 13.5rem) - 50px);
  }

  /* statement photos (#uvod, #regenerativno): keep the photo, run a full screen,
     and sit the copy HIGH (top-heavy) like the colour segments — not centred. */
  .panel--media.panel--fixedbg > .container {
    min-height: 100svh; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
  }
  .panel--media.panel--fixedbg .panel__inner--center {
    padding-top: clamp(5rem, 13vh, 7rem); padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  /* iOS/Safari don't honour background-attachment:fixed → on REAL phones the
     #uvod / #regenerativno statement photos rendered as a zoomed, mis-placed
     sliver (only the Mac device-simulation looked right). On mobile, drop the
     fixed CSS background and show the real <img> with object-fit:cover — rock
     solid everywhere, and the same approach the split photos already use. */
  #uvod .panel__bg, #regenerativno .panel__bg { background-image: none; }
  .panel--media.panel--fixedbg .panel__bg img {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  /* the Kako-delamo photo has the same fixed-bg bug on tablets → plain scroll */
  .how { background-attachment: scroll; }
}

@media (max-width: 640px) {
  /* HERO — the hen is a big SOLID backdrop *behind* the copy (the user's render):
     it fills the lower half of the hero, and the headline + sub + CTAs all sit on
     top of its green body. Bottom-anchored so the body base fills the bottom and
     bleeds off the bottom + right edges. No mask/fade. */
  .panel--hero { position: relative; overflow: clip; padding-bottom: clamp(1.5rem, 4.5vh, 3rem); }
  .hero__grid { display: block; }                       /* art goes absolute; copy free-flows over it */
  .hero__art {
    position: absolute; left: 0; width: 100vw; max-width: none; z-index: 0;
    top: clamp(11rem, 28vh, 16rem); bottom: 0; margin: 0; overflow: clip; pointer-events: none;
    display: flex; align-items: flex-start; justify-content: flex-start;
  }
  .hero__art-blob { display: none; }
  .hero__mascot {
    width: min(130%, 520px); max-width: none; align-self: flex-start;
    margin: 0 0 0 -10%;          /* nudged left so the face centres + body fills the bottom; back bleeds off the right */
    filter: drop-shadow(0 16px 26px rgba(47, 107, 71, 0.22));
  }
  /* copy sits in front of the hen, over its green body */
  .hero__copy { position: relative; z-index: 1; margin-top: clamp(13rem, 44vh, 20rem); }
  /* over the green body the ghost CTA goes solid white so it reads (per the render) */
  .panel--hero .btn--ghost { background: var(--white); color: var(--ink); border-color: var(--white); }
  .panel--hero .btn--ghost:hover { background: var(--cream); border-color: var(--cream); }

  /* KAKO DELAMO — real title above the steps; hide the giant watermark.
     The <h2> already exists (was sr-only); just promote it to a visible title. */
  .how__mark { display: none; }
  /* empty space above the title + below the last step (~120px) */
  .how { min-height: 0; background-attachment: scroll; padding-block: clamp(6.5rem, 31vw, 8rem); }
  .how__eyebrow {
    position: static; width: auto; height: auto; margin: 0 0 clamp(1.4rem, 6vw, 2rem);
    padding: 0; border: 0; overflow: visible; clip: auto; clip-path: none;
    white-space: normal; font-size: var(--fs-h2); letter-spacing: -0.02em; color: var(--white);
  }
  .how__list { margin-left: 0; max-width: none; }
  .how__row { grid-template-columns: auto 1fr; }
  .how__num { order: 1; }
  .how__rowtxt { order: 2; text-align: left; }
}

/* =============================================================================
   24 ─ iPad PASS (2026-06-17)
   Two device-keyed fixes (keyed off the device, not a raw width, so they land
   on every iPad size + orientation):

   A) NON-MOVING BACKGROUNDS — the #uvod / #regenerativno statement photos and
      the "Kako delamo" watermark photo use `background-attachment: fixed` for the
      "text scrolls over a pinned photo" look. iOS/iPadOS Safari does NOT honour
      `background-attachment: fixed`, so on iPad those panels render as a broken,
      zoomed sliver. On any touch device (no hover + coarse pointer) we drop the
      fixed CSS background and show the real <img> with `object-fit: cover` — the
      same approach the split photos already use, and the same fix the ≤820 block
      already applies to phones. Desktop keeps the pinned-photo effect untouched.

   B) PORTRAIT HEIGHTS — on a portrait iPad every panel was forced to a full
      100svh (the ≤960 deck-off rule), so each slide stood much taller than the
      desktop ("horizontal") rhythm, where the hero is 85svh and the split /
      statement panels are ~70svh. We bring portrait back in line: a shorter hero
      (~60svh) and shorter split / statement panels (~65–70svh), with the split
      copy scaled down to suit the lower cards. The left/right split layout is
      kept (like horizontal). Landscape iPad already matches desktop, so it only
      needs fix (A).
   ========================================================================== */

/* A ─ touch devices: pinned photos → real <img> (iOS background-attachment:fixed
   bug). Covers all iPad sizes + both orientations; harmless on phones (the ≤820
   block already does this). */
@media (hover: none) and (pointer: coarse) {
  #uvod .panel__bg, #regenerativno .panel__bg { background-image: none; }
  .panel--media.panel--fixedbg .panel__bg img {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }
  .how { background-attachment: scroll; }
}

/* B ─ iPad portrait: shorter slides, in line with the horizontal layout. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  /* hero ~60svh (was a full 100svh) — denser, closer to the horizontal hero */
  .panel--hero {
    position: relative; height: auto; min-height: 60svh;
    padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  }
  .hero__art { max-width: 210px; }
  .scroll-cue { display: none; }   /* would collide with the CTAs on the shorter hero */

  /* split panels stay LEFT/RIGHT like horizontal, but ~65svh with smaller copy */
  .panel--split { grid-template-columns: 1fr 1fr; min-height: 65svh; }
  .panel--split .panel__media { order: 0; position: relative; height: auto; }
  .panel__text { min-height: 0; }
  .panel--split .panel__text-in {
    max-width: 34rem;
    padding: clamp(1.4rem, 4vw, 2.5rem);
  }
  .panel__text h2 { font-size: clamp(1.55rem, 0.9rem + 2.2vw, 2.15rem); }
  .panel__copy { font-size: 1.02rem; line-height: 1.5; margin-top: clamp(0.7rem, 1.6vw, 1.1rem); }

  /* statement photos (#uvod / #regenerativno) ~70svh, content centred (horizontal) */
  .panel--media.panel--fixedbg { min-height: 70svh; }
  .panel--media.panel--fixedbg > .container {
    min-height: 70svh;
    justify-content: center; align-items: center;
  }
  .panel--media.panel--fixedbg .panel__inner--center {
    padding-top: clamp(1.75rem, 5vh, 3.25rem);
    padding-bottom: clamp(1.75rem, 5vh, 3.25rem);
  }
}