/* =====================================================
   Purple Clover — Scrapbook Style
   Fonts: IM Fell English (Baskerville-like) + Special Elite (typewriter)
   Colors: Purple, Green, Cream, Black
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Special+Elite&family=Caveat:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Bebas+Neue&family=Permanent+Marker&family=Big+Shoulders+Display:wght@900&display=swap');

@font-face {
  font-family: 'Built Titling';
  src: url('/fonts/built%20titling%20bd%20it.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Built Titling';
  src: url('/fonts/built%20titling%20bd.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- CSS Variables ---- */
:root {
  --purple-dark:   #4A1A6B;
  --purple-main:   #7B2D8B;
  --purple-light:  #A855C9;
  --purple-pale:   #EDD9F7;
  --purple-mist:   #F5EEFA;
  --green-dark:    #1B5E20;
  --green-main:    #3B7D4A;
  --green-light:   #5CAD6E;
  --green-pale:    #D8F0DC;
  --paper-white:   #FFF8EE;
  --paper-cream:   #F5E6CF;
  --paper-aged:    #EDD9B9;
  --paper-warm:    #FAF0E0;
  --tape-yellow:   rgba(255, 235, 80, 0.62);
  --tape-white:    rgba(255, 255, 255, 0.58);
  --tape-pink:     rgba(255, 182, 200, 0.55);
  --tape-green:    rgba(160, 220, 170, 0.55);
  --text-dark:     #1A1A1A;
  --text-medium:   #3D3D3D;
  --text-muted:    #666;
  --font-bask:     'IM Fell English', 'Baskerville Old Face', Baskerville, 'Book Antiqua', Georgia, serif;
  --font-type:     'Special Elite', 'Courier New', Courier, monospace;
  --font-hand:     'Caveat', cursive;
  --font-body:     'Playfair Display', Georgia, serif;
  --font-punk:     'Bebas Neue', 'Anton', Impact, sans-serif;
  --font-big:      'Big Shoulders Display', 'Anton', Impact, sans-serif;
  --font-built:    'Built Titling', 'Impact', 'Arial Narrow', sans-serif;
  --font-marker:   'Permanent Marker', 'Caveat', cursive;
  --tab-bg:        #A48DCE;
  --tab-bg-hover:  #8B72B8;
  --tab-home-bg:   #5C6B3D;
  --shadow-paper:  2px 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lift:   4px 8px 20px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.10);
  --radius-sm:     4px;
  --radius:        8px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Hide scrollbar everywhere — preserved scroll functionality */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: clip;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge legacy */
}
html::-webkit-scrollbar { display: none; }  /* Chrome / Safari / Opera */

body {
  background-color: var(--paper-white);
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  font-family: var(--font-body);
  color: var(--text-dark);
  margin: 0;
  overflow-x: clip;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar { display: none; }

/* Suppress scrollbar on any element that might overflow */
*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ---- Typography ---- */
h1, h2, h3 { font-family: var(--font-bask); line-height: 1.2; }
h4, h5, h6 { font-family: var(--font-type); }

.typewriter { font-family: var(--font-type); }
.handwriting { font-family: var(--font-hand); font-size: 1.2em; }
.baskerville { font-family: var(--font-bask); }

/* =====================================================
   HEADER & NAVIGATION
   ===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #FFF8EE
    url("data:image/svg+xml,%3Csvg width='500' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.09' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='500' height='120' filter='url(%23p)' opacity='0.055'/%3E%3C/svg%3E");
  overflow: visible;
}
/* Subtle crumpled-paper creases */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(151deg, transparent 0%, transparent 38%, rgba(0,0,0,0.024) 39.5%, rgba(255,255,255,0.22) 40.8%, transparent 43%, transparent 100%),
    linear-gradient(172deg, transparent 0%, transparent 58%, rgba(0,0,0,0.016) 59.5%, rgba(255,255,255,0.14) 60.8%, transparent 63%, transparent 100%),
    linear-gradient(98deg, rgba(0,0,0,0.013) 0%, transparent 30%, rgba(0,0,0,0.009) 100%);
}
.site-header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
}

/* Torn paper bottom edge of header */
.header-torn-edge {
  position: absolute;
  bottom: -17px;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 0;
}
.header-torn-edge svg { display: block; width: 100%; height: 52px; }

.header-inner {
  display: flex;
  align-items: center;
  padding: 0 3rem;
  min-height: 70px;
  max-width: 1600px;
  margin: 0 auto;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

/* Logo */
.site-logo {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
  position: relative;
  z-index: 1010;
  transform: translateY(82px);
}
.site-logo-img {
  height: 160px;
  width: auto;
  display: block;
}

/* =====================================================
   DESKTOP NAV
   ===================================================== */
.main-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

/* =====================================================
   NAV TAB — bazni stil
   ===================================================== */
.nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-built), Impact, sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 1.08rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    text-align: center;
    padding: 0.95rem 2rem;
    min-height: 52px;
    min-width: 120px;
    position: relative;
    cursor: pointer;
    border: none;
    user-select: none;
    transition: transform 0.25s ease;
    background: transparent;
}

    .nav-tab > span {
        display: inline-block;
        position: relative;
        z-index: 3;
    }

    /* =====================================================
   PAPIRNATA POZADINA — suptilno zgužvano
   ===================================================== */
    .nav-tab::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 32%, transparent 34%, transparent 65%, rgba(0, 0, 0, 0.05) 67%, transparent 69% ), radial-gradient(ellipse 50% 60% at 25% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 65%), radial-gradient(ellipse 40% 50% at 78% 80%, rgba(0, 0, 0, 0.13) 0%, transparent 65%), url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), var(--tab-bg);
        background-size: 100% 100%, 100% 100%, 100% 100%, 140px 140px, 100% 100%;
        background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        transition: filter 0.25s ease;
    }

    /* =====================================================
   HOVER
   ===================================================== */
    .nav-tab:hover::before {
        filter: brightness(1.06);
    }

/* =====================================================
   HOME REPLACEMENT TAB
   ===================================================== */
.nav-tab-home::before {
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 32%, transparent 34%, transparent 65%, rgba(0, 0, 0, 0.05) 67%, transparent 69% ), radial-gradient(ellipse 50% 60% at 25% 25%, rgba(255, 255, 255, 0.15) 0%, transparent 65%), radial-gradient(ellipse 40% 50% at 78% 80%, rgba(0, 0, 0, 0.13) 0%, transparent 65%), url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), var(--tab-home-bg);
    background-size: 100% 100%, 100% 100%, 100% 100%, 140px 140px, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

.nav-tab-home:hover::before {
    filter: brightness(1.06);
}

/* =====================================================
   PROJECTS DROPDOWN
   ===================================================== */
.nav-dropdown {
    position: relative;
}

.nav-tab-dd {
    cursor: pointer;
}

    .nav-tab-dd > span::after {
        content: ' ▾';
        font-size: 0.65rem;
        vertical-align: middle;
    }

.nav-dropdown:hover .nav-tab-dd::before {
    filter: brightness(1.06);
}

/* =====================================================
   DROPDOWN MENU
   ===================================================== */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: -10px;
    min-width: 220px;
    background: var(--paper-white);
    border: 1px solid var(--purple-pale);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    padding: 0.5rem 0;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.dropdown-menu.dd-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease, visibility 0s;
}

.dropdown-menu a {
    display: block;
    padding: 0.52rem 1.2rem;
    font-family: var(--font-built), Impact, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dark);
    text-decoration: none;
    text-shadow: none;
    transition: background 0.15s;
    transform-origin: left center;
}

.dropdown-menu a:nth-child(odd)  { transform: rotate(-0.45deg); }
.dropdown-menu a:nth-child(even) { transform: rotate( 0.45deg); }

.dropdown-menu a:hover {
    background: var(--purple-pale);
}

.dropdown-menu .dropdown-divider {
    height: 1px;
    background: var(--purple-pale);
    margin: 0.3rem 0;
}

/* =====================================================
   PER-TAB: SVG MASK + ROTACIJA + DROP-SHADOW
   ===================================================== */

.nav-tear-1 {
    transform: rotate(-2deg);
}

    .nav-tear-1::before {
        -webkit-mask-image: url('/img/shapes/tab-1.svg');
        mask-image: url('/img/shapes/tab-1.svg');
        filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    }

    .nav-tear-1:hover {
        transform: rotate(-2deg) translateY(-3px);
    }

        .nav-tear-1:hover::before {
            filter: drop-shadow(2px 7px 7px rgba(0, 0, 0, 0.30)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)) brightness(1.06);
        }

.nav-tear-2 {
    transform: rotate(1deg);
}

    .nav-tear-2::before {
        -webkit-mask-image: url('/img/shapes/tab-2.svg');
        mask-image: url('/img/shapes/tab-2.svg');
        filter: drop-shadow(-1px 5px 4px rgba(0, 0, 0, 0.23)) drop-shadow(1px 0 1px rgba(0, 0, 0, 0.13));
    }

    .nav-tear-2:hover {
        transform: rotate(1deg) translateY(-3px);
    }

        .nav-tear-2:hover::before {
            filter: drop-shadow(-1px 8px 7px rgba(0, 0, 0, 0.28)) drop-shadow(1px 0 2px rgba(0, 0, 0, 0.15)) brightness(1.06);
        }

.nav-tear-3 {
    transform: rotate(-1deg);
}

    .nav-tear-3::before {
        -webkit-mask-image: url('/img/shapes/tab-3.svg');
        mask-image: url('/img/shapes/tab-3.svg');
        filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, 0.27)) drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.14));
    }

    .nav-tear-3:hover {
        transform: rotate(-1deg) translateY(-3px);
    }

        .nav-tear-3:hover::before {
            filter: drop-shadow(3px 7px 8px rgba(0, 0, 0, 0.32)) drop-shadow(-1px 2px 2px rgba(0, 0, 0, 0.16)) brightness(1.06);
        }

.nav-tear-4 {
    transform: rotate(2deg);
}

    .nav-tear-4::before {
        -webkit-mask-image: url('/img/shapes/tab-4.svg');
        mask-image: url('/img/shapes/tab-4.svg');
        filter: drop-shadow(-2px 4px 4px rgba(0, 0, 0, 0.24)) drop-shadow(2px 0 1px rgba(0, 0, 0, 0.13));
    }

    .nav-tear-4:hover {
        transform: rotate(2deg) translateY(-3px);
    }

        .nav-tear-4:hover::before {
            filter: drop-shadow(-2px 7px 7px rgba(0, 0, 0, 0.28)) drop-shadow(2px 0 2px rgba(0, 0, 0, 0.15)) brightness(1.06);
        }
/* Hero typewriter slogan cursor */
.hero-slogan-cursor {
  display: inline;
  color: rgba(255,255,255,0.9);
  font-weight: normal;
  animation: cursor-blink 0.65s step-end infinite;
  margin-left: 1px;
}
@keyframes cursor-blink {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* Language Toggle — two paper sticker buttons */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}
.lang-btn {
  font-family: var(--font-built), Impact, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: #1A1A1A;
  width: 40px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EAE3D2;
  border: none;
  cursor: pointer;
  text-decoration: none;
  clip-path: polygon(3% 5%, 97% 0%, 100% 95%, 97% 100%, 3% 100%, 0% 95%);
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,0.18));
  transition: all 0.18s;
}
.lang-btn-wrap:first-child { transform: rotate(-1.5deg); }
.lang-btn-wrap:last-child  { transform: rotate(1.2deg); }
/* ── Pencil-circle wrapper & SVG ── */
.lang-btn-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lang-btn {
    position: relative;
    /* Dodaj ostale stilove za dugme ovde (background, border, itd.) */
}

.lang-circle {
    position: absolute;
    inset: -12px -14px;
    width: calc(100% + 28px);
    height: calc(100% + 24px);
    pointer-events: none;
    overflow: visible;
}

.lang-circle-path {
    stroke: #4A2875;
    stroke-width: 2.5; /* Malo podebljano za "hand-drawn" efekat */
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    /* Dužina prilagođena novoj nepravilnoj putanji */
    stroke-dasharray: 350;
    stroke-dashoffset: 350;
}

/* Pokretanje animacije kada je jezik aktivan */
.lang-btn.active-lang + .lang-circle .lang-circle-path,
.lang-btn.active-lang .lang-circle-path {
    animation: drawLangCircle 0.8s 0.15s ease-out both;
}

@keyframes drawLangCircle {
    to {
        stroke-dashoffset: 0;
    }
}

/* Mobile Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--purple-dark);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Modal Menu */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(74,26,107,0.97);
  z-index: 1050;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.mobile-menu-overlay.open { display: flex; }

.mobile-nav-link {
  font-family: var(--font-bask);
  font-size: 2rem;
  color: #fff;
  font-style: italic;
  transition: color 0.2s;
}
.mobile-nav-link:hover { color: var(--purple-pale); }

.mobile-lang {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.mobile-lang a {
  font-family: var(--font-type);
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  transition: all 0.2s;
}
.mobile-lang a.active-lang {
  color: var(--purple-dark);
  background: #fff;
}

.mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

/* =====================================================
   SCRAPBOOK ELEMENTS (reusable across all sections)
   ===================================================== */

/* Tape strips */
.tape {
  position: relative;
  display: inline-block;
  background: var(--tape-yellow);
  padding: 6px 28px;
  transform: rotate(-2.5deg);
  z-index: 2;
}
.tape::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 8px,
    rgba(180,160,0,0.12) 8px,
    rgba(180,160,0,0.12) 9px
  );
  pointer-events: none;
}
.tape-h { transform: rotate(-1deg); }
.tape-v { transform: rotate(90deg); }
.tape-white { background: var(--tape-white); }
.tape-pink  { background: var(--tape-pink); }
.tape-green { background: var(--tape-green); }

/* Torn paper dividers */
.torn-divider {
  position: relative;
  z-index: 1;
  overflow: visible;
  line-height: 0;
}
.torn-divider svg { display: block; width: 100%; }

/* Scrapbook card */
.scrap-card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E"),
    var(--paper-white);
  box-shadow: var(--shadow-paper);
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}
.scrap-card:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: var(--shadow-lift);
}
.scrap-card-rotated { transform: rotate(-1.5deg); }
.scrap-card-rotated:hover { transform: rotate(0deg) translateY(-4px); }

/* Push pin decoration */
.pushpin {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 35%, #cc3366, #991133);
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(0,0,0,0.2);
  z-index: 3;
}
.pushpin::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 10px;
  background: linear-gradient(to bottom, #aaa, #888);
  border-radius: 0 0 2px 2px;
}

/* Sticker/stamp style */
.stamp {
  display: inline-block;
  border: 3px dashed currentColor;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-type);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transform: rotate(2deg);
}

/* Paper tear clip — bottom of a paper element */
.paper-torn-bottom {
  position: relative;
}
.paper-torn-bottom::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 24px;
  background: inherit;
  clip-path: polygon(
    0% 0%, 1.5% 100%, 3% 20%, 5% 90%, 7% 10%, 9% 80%, 11% 5%, 13% 70%,
    15% 15%, 17% 85%, 19% 30%, 21% 95%, 23% 10%, 25% 75%, 27% 20%, 29% 90%,
    31% 5%, 33% 80%, 35% 25%, 37% 100%, 39% 15%, 41% 85%, 43% 40%, 45% 5%,
    47% 95%, 49% 25%, 51% 70%, 53% 10%, 55% 90%, 57% 30%, 59% 85%, 61% 20%,
    63% 75%, 65% 5%, 67% 95%, 69% 35%, 71% 80%, 73% 10%, 75% 90%, 77% 25%,
    79% 100%, 81% 15%, 83% 85%, 85% 40%, 87% 5%, 89% 75%, 91% 20%, 93% 90%,
    95% 10%, 97% 80%, 99% 30%, 100% 0%
  );
  z-index: 1;
}

/* Underline scribble */
.scribble-underline {
  position: relative;
  display: inline-block;
}
.scribble-underline::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -5%;
  width: 110%;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10'%3E%3Cpath d='M0,5 Q10,2 20,5 Q30,8 40,5 Q50,2 60,5 Q70,8 80,5 Q90,2 100,5 Q110,8 120,5 Q130,2 140,5 Q150,8 160,5 Q170,2 180,5 Q190,8 200,5' stroke='%237B2D8B' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* Section labels — magazine cutout sticker style */
.section-label {
  font-family: var(--font-type);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--purple-dark);
  margin-bottom: 0.8rem;
  display: inline-block;
  background: #fff;
  padding: 0.2em 0.85em;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.22), 0 1px 1px rgba(0,0,0,0.08);
  clip-path: polygon(0.8% 4%, 2% 0.5%, 98% 0%, 100% 3%, 99.5% 97%, 97.5% 100%, 1.5% 99%, 0% 96%);
  transform: rotate(-0.6deg);
}

/* Generic magazine cutout sticker label */
.sticker-label {
  display: inline-block;
  background: #fff;
  color: var(--text-dark);
  font-family: var(--font-type);
  padding: 0.25em 0.9em;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.28), 1px 1px 0 rgba(0,0,0,0.08);
  clip-path: polygon(0.5% 3%, 2.5% 0.5%, 97.5% 0%, 100% 2.5%, 99.5% 97.5%, 97% 100%, 2% 99.5%, 0% 97%);
  transform: rotate(-0.8deg);
  position: relative;
  z-index: 1;
}
.sticker-label-alt {
  clip-path: polygon(1.5% 1%, 98.5% 0.5%, 100% 1.5%, 99.5% 99%, 98% 100%, 0.5% 99.5%, 0% 98%, 0.8% 1.5%);
  transform: rotate(0.5deg);
}
.sticker-label-purple { background: var(--purple-mist); color: var(--purple-dark); }
.sticker-label-green  { background: #e8f5e9; color: var(--green-dark); }
.sticker-label-cream  { background: var(--paper-cream); }

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero-section {
    position: relative;
    height: 92vh;
    min-height: 560px;
    overflow: hidden;
    background: var(--purple-dark);
}

/* Slides container */
.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding-top: 5rem;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.15s;
}

    .hero-slide.active {
        opacity: 1;
        z-index: 2;
    }

    .hero-slide.entering {
        z-index: 3;
        opacity: 1;
    }

/* =====================================================
   SLIDE BACKGROUNDS — slike + tamni overlay
   ===================================================== */

/* Fallback brand boje (vide se dok se slika učitava) */
.hero-slide-1 {
    background: #0D3B1A;
}

.hero-slide-2 {
    background: #3E1F00;
}

.hero-slide-3 {
    background: #4A1E77;
}

.hero-slide-4 {
    background: #2D4A3E;
}

    /* ::before = SLIKA (background, ispod overlay-a i teksta) */
    .hero-slide-1::before,
    .hero-slide-2::before,
    .hero-slide-3::before,
    .hero-slide-4::before {
        content: '';
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
        pointer-events: none;
    }

/* Pojedinačne slike za svaki slide */
.hero-slide-1::before {
    background-image: url('/img/nature.webp');
}

.hero-slide-2::before {
    background-image: url('/img/doglover.webp');
}

.hero-slide-3::before {
    background-image: url('/img/art.webp');
}

.hero-slide-4::before {
    background-image: url('/img/selfcare.webp');
}

/* ::after = TAMNI OVERLAY (preko slike, ispod teksta) */
.hero-slide-1::after,
.hero-slide-2::after,
.hero-slide-3::after,
.hero-slide-4::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
    pointer-events: none;
}

/* =====================================================
   SLIDE CONTENT LAYOUT
   ===================================================== */
.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 3rem;
    width: 100%;
}

/* =====================================================
   FIXED SLOGAN — uvek vidljiv
   ===================================================== */
.hero-slogan-wrapper {
    position: absolute;
    top: 4rem;
    right: 4rem;
    z-index: 10;
    text-align: end;
    pointer-events: none;
}

.hero-slogan {
    display: inline-block;
    font-family: var(--font-type);
    font-size: clamp(1rem, 1.2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.88);
    padding: 0.7rem 2.5rem;
    border-radius: 2px;
    max-width: 30vw;
    line-height: 1.2;
}

/* =====================================================
   TORN PAPER OVERLAY AT HERO BOTTOM
   ===================================================== */
.hero-torn-bottom {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    z-index: 5;
    line-height: 0;
}

    .hero-torn-bottom svg {
        display: block;
        width: 100%;
    }

/* Slide text card (scrapbook paper look) */
.slide-paper {
  background: rgba(255,252,245,0.92);
  padding: 2.5rem 2.8rem;
  position: relative;
  box-shadow: 6px 8px 24px rgba(0,0,0,0.3);
  transform: rotate(-1deg);
  border-radius: 2px;
}
.slide-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 40%);
  border-radius: 2px;
  pointer-events: none;
}

.slide-tape {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 80px;
  height: 28px;
  background: var(--tape-yellow);
  z-index: 3;
}
.slide-tape::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 6px,
    rgba(180,160,0,0.15) 6px, rgba(180,160,0,0.15) 7px
  );
}

.slide-eyebrow {
  font-family: var(--font-type);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--purple-dark);
  margin-bottom: 1rem;
  display: inline-block;
  background: #fff;
  padding: 0.22em 0.9em;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.24), 0 1px 1px rgba(0,0,0,0.1);
  clip-path: polygon(0.5% 3%, 3% 0.5%, 97.5% 0%, 100% 2.5%, 99.5% 97%, 97% 100%, 1.5% 99.5%, 0% 97%);
  transform: rotate(-1.2deg);
}
.slide-title {
  font-family: var(--font-bask);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  color: var(--text-dark);
  line-height: 1.15;
  margin-bottom: 1.2rem;
}
.slide-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-medium);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

/* ---- Per-slide visual personalities ---- */

/* Slide 1 — Typewriter / notebook paper */
.hero-slide-1 .slide-paper {
  background:
    repeating-linear-gradient(
      transparent, transparent 1.65rem,
      rgba(80,100,200,0.09) 1.65rem, rgba(80,100,200,0.09) 1.7rem
    ),
    rgba(252, 252, 242, 0.94);
  border-left: 3px solid rgba(200,130,130,0.28);
  transform: rotate(-0.6deg);
}
.hero-slide-1 .slide-title {
  font-family: var(--font-type);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.hero-slide-1 .slide-desc {
  font-family: var(--font-type);
  font-size: 0.9rem;
  line-height: 1.85;
  color: #2a2a2a;
}

/* Slide 2 — Heavy display / Big Shoulders 900 */
.hero-slide-2 .slide-paper {
  background: rgba(255, 251, 240, 0.95);
  transform: rotate(0.9deg);
}
.hero-slide-2 .slide-title {
  font-family: var(--font-big);
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.92;
  margin-bottom: 1.4rem;
  color: #3E1F00;
}
.hero-slide-2 .slide-eyebrow {
  font-family: var(--font-punk);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
}
.hero-slide-2 .slide-desc {
  font-size: 0.95rem;
}

/* Slide 3 — Editorial italic / IM Fell English */
.hero-slide-3 .slide-paper {
  background: rgba(246, 245, 255, 0.94);
  transform: rotate(1.4deg);
}
.hero-slide-3 .slide-title {
  font-family: var(--font-bask);
  font-style: italic;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.18;
  color: #2C1654;
}
.hero-slide-3 .slide-eyebrow {
  font-family: var(--font-bask);
  font-style: italic;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  color: var(--purple-main);
}
.hero-slide-3 .slide-desc {
  font-family: var(--font-bask);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* Slide 4 — Handwritten / Permanent Marker */
.hero-slide-4 .slide-paper {
  background: rgba(255, 252, 228, 0.95);
  transform: rotate(-2.1deg);
}
.hero-slide-4 .slide-title {
  font-family: var(--font-marker);
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  line-height: 1.25;
  color: #1B3A2D;
  margin-bottom: 1rem;
}
.hero-slide-4 .slide-eyebrow {
  font-family: var(--font-hand);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  transform: rotate(-0.5deg);
}
.hero-slide-4 .slide-desc {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 600;
}

/* Slide decorative side */
.slide-deco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-deco-icon {
  font-size: clamp(6rem, 12vw, 10rem);
  opacity: 0.18;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3));
  user-select: none;
}
.slide-deco-ring {
  position: absolute;
  width: 70%;
  height: 70%;
  border: 2px dashed rgba(255,255,255,0.25);
  border-radius: 50%;
  animation: spinSlow 20s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* CTA Button */
.btn-scrap {
  display: inline-block;
  font-family: var(--font-type);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.75rem 2rem;
  background: var(--purple-main);
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  box-shadow: 3px 3px 0 var(--purple-dark);
  text-decoration: none;
}
.btn-scrap:hover {
  background: var(--purple-dark);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--purple-dark);
  color: #fff;
}
.btn-scrap-green {
  background: var(--green-main);
  box-shadow: 3px 3px 0 var(--green-dark);
}
.btn-scrap-green:hover { background: var(--green-dark); box-shadow: 4px 4px 0 var(--green-dark); }

.btn-scrap-outline {
  background: transparent;
  color: var(--purple-main);
  border: 2px solid var(--purple-main);
  box-shadow: none;
}
.btn-scrap-outline:hover {
  background: var(--purple-main);
  color: #fff;
}

/* Hero navigation */
.hero-nav {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.hero-dots { display: flex; gap: 0.6rem; align-items: center; }
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s;
}
.hero-dot.active {
  background: #fff;
  width: 24px;
  border-radius: 5px;
}

.hero-arrow {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.2s;
}
.hero-arrow:hover { background: rgba(255,255,255,0.3); }

/* =====================================================
   TORN PAPER SECTION DIVIDER SVG
   ===================================================== */

.section-torn-bottom {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    line-height: 0;
}

    .section-torn-bottom svg {
        display: block;
        width: 100%;
        height: 65px;
    }

/* =====================================================
   WORK AREAS SECTION
   ===================================================== */

.areas-section {
  padding: 0 2rem 0;
  background: var(--paper-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
}

.section-title {
  font-family: var(--font-punk);
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--purple-dark);
  letter-spacing: 0.04em;
  line-height: 1;
  position: relative;
  display: inline-block;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  max-width: 1300px;
  margin: 0 auto;
}

.area-card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E"),
    var(--paper-white);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-paper);
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
  border-top: 4px solid transparent;
}
.area-card:nth-child(1) { transform: rotate(-1.8deg); }
.area-card:nth-child(2) { transform: rotate(0.4deg); }
.area-card:nth-child(3) { transform: rotate(-0.7deg); }
.area-card:nth-child(4) { transform: rotate(1.6deg); }
.area-card:nth-child(5) { transform: rotate(-0.3deg); }
.area-card:nth-child(6) { transform: rotate(1.9deg); }
.area-card:nth-child(7) { transform: rotate(-1.4deg); }
.area-card:nth-child(8) { transform: rotate(0.6deg); }
.area-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lift); }

.area-card[data-color="green"]  { border-top-color: var(--green-main); }
.area-card[data-color="purple"] { border-top-color: var(--purple-main); }
.area-card[data-color="orange"] { border-top-color: #E07B30; }
.area-card[data-color="teal"]   { border-top-color: #00897B; }
.area-card[data-color="blue"]   { border-top-color: #1565C0; }
.area-card[data-color="rose"]   { border-top-color: #C2185B; }

/* ---- Lexicon Area Entries (homepage) ---- */
.areas-entries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.2rem;
  max-width: 1400px;
  margin: 0 auto;
}
.area-entry {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E"),
    var(--paper-white);
  padding: 2.4rem 2rem 2rem 2.2rem;
  border-left: 5px solid transparent;
  position: relative;
  box-shadow: var(--shadow-paper);
  transition: transform 0.25s, box-shadow 0.25s;
}
/* Desktop: only cards 2 and 5 are tilted — everything else straight */
.area-entry { transform: rotate(0deg); }
.area-entry:nth-child(2) { transform: rotate(2deg); }
.area-entry:nth-child(5) { transform: rotate(-1.8deg); }
.area-entry:hover { transform: rotate(0deg) translateY(-5px); box-shadow: var(--shadow-lift); }
.area-entry:nth-child(1) { border-left-color: #4A8C5C; }
.area-entry:nth-child(2) { border-left-color: #3D7A4E; }
.area-entry:nth-child(3) { border-left-color: #5C9E6A; }
.area-entry:nth-child(4) { border-left-color: #2E6B45; }
.area-entry:nth-child(5) { border-left-color: #6AAD78; }
.area-entry:nth-child(6) { border-left-color: #3F8055; }
.area-entry:nth-child(7) { border-left-color: #527A3E; }
.area-entry:nth-child(8) { border-left-color: #4E9462; }

/* Green tape strips — varied shade, position and count per card */
.area-entry-tape {
  position: absolute;
  height: 19px;
  pointer-events: none;
  z-index: 2;
}
/* Card 1: 2 tapes */
.area-entry:nth-child(1) .area-entry-tape {
  width: 68px; top: -11px; left: 18px; transform: rotate(-2.2deg);
  background: rgba(130, 200, 145, 0.60);
}
.area-entry:nth-child(1)::before {
  content: ''; position: absolute; height: 19px; width: 50px; z-index: 2;
  top: -10px; right: 22px; transform: rotate(2deg); pointer-events: none;
  background: rgba(90, 162, 108, 0.55);
}
/* Card 2: 1 tape centered */
.area-entry:nth-child(2) .area-entry-tape {
  width: 82px; top: -10px; left: 50%; transform: translateX(-50%) rotate(1.8deg);
  background: rgba(100, 178, 118, 0.62);
}
/* Card 3: 2 tapes */
.area-entry:nth-child(3) .area-entry-tape {
  width: 58px; top: -11px; left: 14px; transform: rotate(-3deg);
  background: rgba(148, 215, 162, 0.55);
}
.area-entry:nth-child(3)::before {
  content: ''; position: absolute; height: 19px; width: 65px; z-index: 2;
  top: -10px; right: 16px; transform: rotate(2.5deg); pointer-events: none;
  background: rgba(80, 155, 98, 0.60);
}
/* Card 4: 2 tapes, heavily tilted */
.area-entry:nth-child(4) .area-entry-tape {
  width: 72px; top: -12px; right: 20px; left: auto; transform: rotate(3.5deg);
  background: rgba(95, 168, 112, 0.62);
}
.area-entry:nth-child(4)::before {
  content: ''; position: absolute; height: 19px; width: 56px; z-index: 2;
  top: -10px; left: 28px; transform: rotate(-2deg); pointer-events: none;
  background: rgba(138, 208, 152, 0.55);
}
/* Card 5: 1 tape right */
.area-entry:nth-child(5) .area-entry-tape {
  width: 76px; top: -11px; right: 18px; left: auto; transform: rotate(2deg);
  background: rgba(115, 192, 132, 0.58);
}
/* Card 6: 1 tape */
.area-entry:nth-child(6) .area-entry-tape {
  width: 62px; top: -11px; left: 22px; transform: rotate(-1.6deg);
  background: rgba(105, 180, 120, 0.62);
}
/* Card 7: 2 tapes */
.area-entry:nth-child(7) .area-entry-tape {
  width: 66px; top: -10px; left: 32px; transform: rotate(2deg);
  background: rgba(125, 198, 142, 0.58);
}
.area-entry:nth-child(7)::before {
  content: ''; position: absolute; height: 19px; width: 54px; z-index: 2;
  top: -11px; right: 28px; transform: rotate(-2.5deg); pointer-events: none;
  background: rgba(85, 158, 102, 0.55);
}
/* Card 8: 2 tapes */
.area-entry:nth-child(8) .area-entry-tape {
  width: 74px; top: -12px; left: 12px; transform: rotate(-2.8deg);
  background: rgba(100, 175, 116, 0.62);
}
.area-entry:nth-child(8)::before {
  content: ''; position: absolute; height: 19px; width: 58px; z-index: 2;
  top: -10px; right: 18px; transform: rotate(1.5deg); pointer-events: none;
  background: rgba(145, 210, 160, 0.55);
}
.area-entry-num {
  position: absolute; top: 1rem; right: 1.2rem;
  font-family: var(--font-punk); font-size: 4.5rem;
  color: var(--purple-dark); opacity: 0.07;
  line-height: 1; pointer-events: none; user-select: none;
}
.area-entry-title { margin-bottom: 0.5rem; }
.area-entry-title .punk-word { justify-content: flex-start; }
.area-entry-title .punk-letter { height: 38px; }
.area-entry-subtitle {
  font-family: var(--font-type); font-size: 0.70rem;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--text-muted); margin-bottom: 0.75rem;
}
.area-entry-rule {
  border: none; border-top: 1px solid var(--paper-aged); margin: 0 0 0.85rem;
}
.area-entry-body {
  font-family: var(--font-type); font-size: 0.80rem;
  line-height: 1.68; color: var(--text-dark); margin-bottom: 1rem;
}
.area-entry-tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.1rem;
}
.area-entry-tag {
  font-family: var(--font-built); font-style: italic; font-size: 0.67rem;
  padding: 0.18rem 0.55rem; background: var(--paper-cream);
  border: 1px solid var(--paper-aged); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-medium);
}
/* ── Pencil-drawn CTA button ── */
.area-entry-cta {
  background: transparent;
  color: #2A5C3A;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 0.45rem 1.5rem;
  position: relative;
  transition: color 0.18s, transform 0.18s;
  display: block;
  margin-left: auto;
  width: fit-content;
}
.area-entry-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 36' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='r' x='-10%25' y='-35%25' width='120%25' height='170%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.09' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='2' y='2' width='96' height='32' fill='none' stroke='%232A5C3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' filter='url(%23r)' opacity='0.85'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.area-entry-cta:hover {
  background: transparent;
  color: #1A3D26;
  box-shadow: none;
  transform: translate(-1px, -1px);
}
.area-entry-cta:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 36' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='r2' x='-10%25' y='-35%25' width='120%25' height='170%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.09' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='2' y='2' width='96' height='32' fill='none' stroke='%231A3D26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' filter='url(%23r2)' opacity='1'/%3E%3C/svg%3E");
}

/* ---- Punk Letters ---- */
.punk-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0.5rem 0 1.8rem;
}
.punk-word {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}
.punk-letter {
  height: 52px;
  width: auto;
  display: inline-block;
  vertical-align: bottom;
  filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.18));
}
.punk-letter:nth-child(3n+1) { transform: rotate(-2.2deg) translateY(2px); }
.punk-letter:nth-child(3n+2) { transform: rotate(1.4deg) translateY(-1px); }
.punk-letter:nth-child(3n)   { transform: rotate(-0.7deg) translateY(1px); }
.punk-space { width: 14px; display: inline-block; flex-shrink: 0; }
.area-tape-corner {
  position: absolute;
  top: -10px;
  right: 12px;
  width: 35px;
  height: 22px;
  background: var(--tape-yellow);
  transform: rotate(10deg);
}

/* ---- Letter at section transition ---- */
.letter-at-transition {
  position: relative;
  height: 0;
  overflow: visible;
  z-index: 5;
  pointer-events: none;
}
.letter-img {
  position: absolute;
  right: -11vw;
  top: -350px;
  width: 30vw;
  max-width: none;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(4px 10px 22px rgba(0,0,0,0.58));
}

/* =====================================================
   AREA MODAL — preklopljeno pismo koje se rasklapa
   ===================================================== */

/* Scene wrapper: centers the paper; image is absolutely positioned behind it */
.area-modal-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Background photo — peeks out from behind the left side of the letter */
.area-modal-bg-img {
  position: absolute;
  left: -120px;
  top: 30%;
  transform: translateY(-48%) rotate(-20deg) !important;
  width: 260px;
  height: 260px;
  object-fit: cover;
  filter: grayscale(1);
  box-shadow: 5px 8px 28px rgba(0,0,0,0.45);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
.area-modal-bg-img.img-appear {
  animation: bgImgAppear 2.5s ease-out both;
}
@keyframes bgImgAppear {
  from { opacity: 0; transform: translateY(-48%) rotate(-10deg) scale(0.86) translateX(-16px); }
  to   { opacity: 1; transform: translateY(-48%) rotate(-10deg) scale(1)    translateX(0); }
}
@media (max-width: 720px) {
  .area-modal-bg-img { display: none; }
}

.modal-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.modal-star {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    animation: starTwinkle var(--dur, 2s) var(--delay, 0s) ease-in-out infinite alternate;
}
.modal-star.glow {
    box-shadow: 0 0 5px 2px rgba(255,255,255,0.25);
}
@keyframes starTwinkle {
    0%   { opacity: 0.05; transform: scale(0.5); }
    100% { opacity: var(--max-op, 0.85); transform: scale(1.3); }
}

.area-modal-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, rgba(45,12,75,0.88) 0%, rgba(15,5,35,0.94) 100%);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    perspective: 2000px;
}

    .area-modal-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

/* =====================================================
   PAPER WRAPPER
   ===================================================== */
.area-modal-paper {
    position: relative;
    width: 90vw;
    max-width: 460px;
    background: transparent;
    transform-style: preserve-3d;
    transform-origin: center bottom;
    transform: translateY(20px);
    transition: transform 0.5s ease-out;
    z-index: 1;
    overflow: visible;
    filter: drop-shadow(-12px 6px 24px rgba(0,0,0,0.45));
}

.area-modal-overlay.open .area-modal-paper {
    transform: translateY(0);
}

/* =====================================================
   PAPIR — gornja i donja polovina
   ===================================================== */
.modal-fold-top,
.modal-fold-bot {
    position: relative;
    background: var(--paper-warm);
    min-height: 280px;
    backface-visibility: hidden;
}

/* DONJA POLOVINA — uvek vidljiva */
.modal-fold-bot {
    padding: 2rem 2.5rem 2.5rem;
    z-index: 1;
}

/* GORNJA POLOVINA — preklopljena, animira se na otvaranje */
.modal-fold-top {
    padding: 3rem 2.5rem 2.5rem;
    transform-origin: bottom center;
    transform: perspective(1200px) rotateX(-178deg);
    box-shadow: 8px -14px 44px rgba(0, 0, 0, 0.30);
    z-index: 0;
}

    .modal-fold-top.fold-open {
        animation: paperUnfold 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

@keyframes paperUnfold {
    0% {
        transform: perspective(1200px) rotateX(-178deg);
        box-shadow: 8px -14px 44px rgba(0, 0, 0, 0.30);
    }

    100% {
        transform: perspective(1200px) rotateX(0deg);
        box-shadow: 8px 14px 44px rgba(0, 0, 0, 0.20);
    }
}

/* CREASE — nevidljiv */
.modal-fold-crease {
    display: none;
}

/* =====================================================
   TRAKA — pozicionirana na sredini papira
   ===================================================== */
.area-modal-tape {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -45px;
    width: 90px;
    height: 26px;
    background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.25) 20%, transparent 40%, rgba(255, 255, 255, 0.15) 60%, transparent 80%, rgba(255, 255, 255, 0.20) 100% ), rgba(130, 200, 145, 0.55);
    clip-path: polygon( 2% 0%, 98% 0%, 100% 30%, 99% 60%, 100% 100%, 2% 100%, 0% 70%, 1% 40%, 0% 0% );
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-150px) rotate(-15deg) scale(1.2);
    transform-origin: center;
    z-index: 20;
    pointer-events: none;
}

    .area-modal-tape.tape-stick {
        animation: tapeStick 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
    }

@keyframes tapeStick {
    0% {
        opacity: 0;
        transform: translateY(-150px) rotate(-15deg) scale(1.2);
        box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05);
    }

    35% {
        opacity: 0.7;
        transform: translateY(-40px) rotate(-8deg) scale(1.1);
        box-shadow: 0 12px 18px rgba(0, 0, 0, 0.10);
    }

    70% {
        opacity: 0.9;
        transform: translateY(8px) rotate(0deg) scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
    }

    85% {
        opacity: 0.95;
        transform: translateY(-2px) rotate(-2deg) scale(1);
        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.20);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(-1.5deg) scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.15);
    }
}

/* =====================================================
   SADRŽAJ — startuje nevidljiv
   ===================================================== */
.area-modal-title,
.area-modal-subtitle,
.area-modal-num,
.area-modal-body,
.area-modal-tags,
.area-modal-footer,
.area-modal-close {
    opacity: 0;
}

    /* Typewriter blinking cursor */
    .area-modal-title.tw-active::after {
        content: '\258C';
        animation: twBlink 0.6s step-end infinite;
        font-size: 0.75em;
        vertical-align: baseline;
        margin-left: 2px;
    }

@keyframes twBlink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* =====================================================
   CLOSE BUTTON
   ===================================================== */
.area-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.2rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 0.25rem 0.5rem;
    transition: color 0.15s;
    font-family: var(--font-type);
    z-index: 5;
}

    .area-modal-close:hover {
        color: var(--purple-dark);
    }

/* =====================================================
   BROJ
   ===================================================== */
.area-modal-num {
    display: none;
}

/* =====================================================
   TEXT STILOVI
   ===================================================== */
.area-modal-title {
    font-family: var(--font-punk);
    font-size: 2.8rem;
    color: var(--purple-dark);
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 0.5rem;
    min-height: 3.4rem;
}

.area-modal-subtitle {
    font-family: var(--font-type);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    min-height: 1.1rem;
}

.area-modal-body {
    font-family: var(--font-type);
    font-size: 0.88rem;
    line-height: 1.82;
    color: var(--text-dark);
    margin-bottom: 1.2rem;
    min-height: 4rem;
}

.area-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.8rem;
}

.area-modal-tag {
    font-family: var(--font-built);
    font-style: italic;
    font-size: 0.67rem;
    padding: 0.18rem 0.55rem;
    background: var(--paper-cream);
    border: 1px solid var(--paper-aged);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-medium);
}

.area-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px dashed var(--paper-aged);
}

.modal-deco {
    position: absolute;
    bottom: 40px;
    right: -70px;
    width: 140px;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    filter: drop-shadow(-6px 4px 14px rgba(0,0,0,0.22));
    transition: none;
}
.modal-deco.deco-appear {
    animation: decoAppear 1.2s 0.1s ease-out both;
}
@keyframes decoAppear {
    from { opacity: 0; transform: translateY(18px) scale(0.88); }
    to   { opacity: 0.88; transform: translateY(0) scale(1); }
}

.area-modal-footer .btn-scrap {
    background: transparent;
    color: #2A5C3A;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: 0.04em;
    padding: 0.45rem 1.5rem;
    position: relative;
    transition: color 0.18s, transform 0.18s;
}
.area-modal-footer .btn-scrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 36' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='r' x='-10%25' y='-35%25' width='120%25' height='170%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.09' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='2' y='2' width='96' height='32' fill='none' stroke='%232A5C3A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' filter='url(%23r)' opacity='0.85'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    pointer-events: none;
}
.area-modal-footer .btn-scrap:hover {
    background: transparent;
    color: #1A3D26;
    box-shadow: none;
    transform: translate(-1px, -1px);
}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 600px) {
    .modal-fold-top {
        padding: 2.5rem 1.4rem 2rem;
        min-height: 220px;
    }

    .modal-fold-bot {
        padding: 1.5rem 1.4rem 2rem;
        min-height: 220px;
    }

    .area-modal-title {
        font-size: 2rem;
    }

    .area-modal-tape {
        width: 70px;
        height: 22px;
        margin-top: -11px;
        margin-left: -35px;
    }

    .letter-img {
        width: 240px;
        right: -80px;
        top: -70px;
    }
}

/* =====================================================
   PROJECTS / WORKSHOPS PREVIEW SECTION
   ===================================================== */

.preview-section {
  padding: 5rem 2rem 0 2rem;
  background-color: #FEFEF4;
  background-image:
    linear-gradient(rgba(80,100,200,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,100,200,0.055) 1px, transparent 1px),
    linear-gradient(rgba(80,100,200,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80,100,200,0.022) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  position: relative;
  overflow: visible;
}

.preview-torn-top {
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 3;
}
.preview-torn-top svg {
  display: block;
  width: 100%;
  height: 56px;
}

/* Editorial mix heading */
.editorial-heading {
  position: relative;
  text-align: center;
  margin: 0.5rem 0 2.5rem;
  line-height: 1;
}
.editorial-bg-word {
  display: block;
  font-family: var(--font-punk);
  font-size: clamp(5.5rem, 16vw, 13rem);
  color: rgba(74,26,107,0.17);
  letter-spacing: 0.1em;
  line-height: 0.88;
  user-select: none;
  pointer-events: none;
  text-shadow: 2px 3px 0 rgba(74,26,107,0.06);
}
.editorial-fg-word {
  display: block;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  color: var(--purple-dark);
  margin-top: -1.2rem;
  position: relative;
  z-index: 1;
}
.editorial-fg-word em {
  font-style: normal;
  color: var(--green-dark);
}

.preview-section .section-header { margin-bottom: 1rem; }
.preview-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 5rem;
}
.preview-tab {
  font-family: var(--font-type);
  font-size: 0.85rem;
  padding: 0.5rem 1.4rem;
  border: 2px solid var(--purple-main);
  color: var(--purple-main);
  background: transparent;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.preview-tab.active, .preview-tab:hover {
  background: var(--purple-main);
  color: #fff;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
}

/* ---- Limit to max 3 cards ---- */
.preview-grid .project-card:nth-child(n+4) { display: none; }

.project-card {
  box-shadow: 5px 8px 22px rgba(0,0,0,0.17), 0 1px 4px rgba(0,0,0,0.08);
  overflow: visible;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
/* Dog-ear fold via border triangle — no overflow:hidden needed */
.project-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 26px 26px;
  border-color: transparent transparent rgba(0,0,0,0.12) transparent;
  pointer-events: none;
}

/* Card 1 — Yellow, tape */
.project-card:nth-child(1) {
  background: #FFF9C4;
  transform: rotate(-1.4deg);
  border-radius: 2px 4px 3px 1px;
}
/* Card 2 — Green, pin */
.project-card:nth-child(2) {
  background: #C8EEC9;
  transform: rotate(0.8deg);
  border-radius: 3px 1px 4px 2px;
}
/* Card 3 — Pink, two strips */
.project-card:nth-child(3) {
  background: #FFD6E7;
  transform: rotate(-0.6deg);
  border-radius: 1px 3px 2px 4px;
}
/* Card 3 second tape strip via ::before */
.project-card:nth-child(3)::before {
  content: '';
  position: absolute;
  top: -14px;
  right: 18px;
  width: 48px;
  height: 22px;
  background: rgba(255,255,255,0.68);
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
  transform: rotate(7deg);
  z-index: 3;
}

.project-card:hover { transform: rotate(0deg) translateY(-10px) !important; box-shadow: 6px 14px 32px rgba(0,0,0,0.22); z-index: 2; }

/* ---- TAPE (card 1) ---- */
.project-card-tape {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 80px;
  height: 28px;
  background: rgba(255,220,40,0.80);
  box-shadow: 0 2px 7px rgba(0,0,0,0.22);
  z-index: 3;
}

/* ---- PIN (card 2) — round tack head ---- */
.project-card:nth-child(2) .project-card-tape {
  width: 20px;
  height: 20px;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #e05555, #8B1A1A);
  box-shadow: 0 3px 8px rgba(0,0,0,0.40), inset 0 1px 2px rgba(255,255,255,0.25);
}

/* ---- TWO STRIPS (card 3) — left strip ---- */
.project-card:nth-child(3) .project-card-tape {
  left: 16px;
  top: -14px;
  width: 48px;
  height: 22px;
  transform: rotate(-6deg);
  background: rgba(255,160,190,0.75);
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}

.project-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.project-card-img-placeholder {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--purple-pale), var(--green-pale));
}

.project-card-body {
  padding: 1.5rem 1.8rem 1.8rem;
}
.project-card-category {
  font-family: var(--font-type);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--purple-main);
  margin-bottom: 0.5rem;
}
.project-card-title {
  font-family: var(--font-bask);
  font-size: 1.2rem;
  color: var(--text-dark);
  margin-bottom: 0.7rem;
  line-height: 1.35;
}
.project-card-desc {
  font-size: 0.9rem;
  color: var(--text-medium);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.preview-cta {
  text-align: center;
  margin-top: 4rem;
  padding-bottom:5rem;
}

/* =====================================================
   CONTACT SECTION
   ===================================================== */

.contact-section {
  padding: 5rem 2rem;
  background: var(--paper-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
  position: relative;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

.contact-info {
  position: relative;
}
.contact-info-card {
  background: var(--purple-dark);
  padding: 2.8rem 2.5rem 3rem;
  box-shadow: 6px 8px 28px rgba(74,26,107,0.35);
  transform: rotate(-1.8deg);
  position: relative;
  overflow: hidden;
}
/* Big decorative background letter */
.contact-info-card::before {
  content: '?';
  position: absolute;
  bottom: -0.5rem;
  right: -0.5rem;
  font-family: var(--font-punk);
  font-size: 14rem;
  color: rgba(255,255,255,0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.contact-info-card .pushpin { left: 50%; }

.contact-info h3 {
  font-family: var(--font-hand);
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  margin-bottom: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
}
.contact-info p {
  font-family: var(--font-type);
  font-size: 0.88rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.85;
  margin-bottom: 1.4rem;
}
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-built);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.04em;
}
.contact-info-item .icon { font-size: 1.1rem; }

/* Contact heading */
.contact-heading-wrap {
  margin: 0.5rem 0 2rem;
  text-align: center;
}
.contact-heading {
  font-family: var(--font-hand);
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 700;
  color: var(--purple-dark);
  line-height: 0.9;
  display: inline-block;
  transform: rotate(-1.5deg);
}

/* Contact form — lined notebook paper */
.contact-form {
  background-color: #F9FAFF;
  background-image:
    linear-gradient(rgba(100,140,220,0.18) 1px, transparent 1px),
    linear-gradient(90deg, transparent 46px, rgba(210,65,65,0.30) 46px, rgba(210,65,65,0.30) 48px, transparent 48px);
  background-size: 100% 30px, 100% 100%;
  background-position: 0 55px, 0 0;
  padding: 2.5rem 2.5rem 4.5rem 4rem;
  box-shadow: 5px 7px 24px rgba(0,0,0,0.17), -2px 2px 6px rgba(0,0,0,0.07);
  position: relative;
  transform: rotate(1.3deg);
  border-top: none;
}
/* Inputs styled as notebook lines */
.contact-form .form-control {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(100,140,220,0.35);
  border-radius: 0;
  padding: 0.4rem 0.2rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--text-dark);
  box-shadow: none;
  transition: border-color 0.2s;
}
.contact-form .form-control:focus {
  outline: none;
  border-bottom-color: var(--purple-main);
  background: transparent;
  box-shadow: none;
}
.contact-form textarea.form-control {
  resize: none;
  border: none;
  border-bottom: 1.5px solid rgba(100,140,220,0.35);
  line-height: 30px;
  background: transparent;
  min-height: 120px;
}
.contact-form .form-label {
  font-family: var(--font-built);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--purple-dark);
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  display: block;
}
.contact-form .tape {
  position: absolute;
  top: -13px;
  right: 30px;
}
.contact-form .tape {
  position: absolute;
  top: -13px;
  right: 30px;
}

.form-group { margin-bottom: 1.4rem; }
.form-label {
  display: block;
  font-family: var(--font-type);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-medium);
  margin-bottom: 0.4rem;
}
.form-control {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid #ddd;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--paper-warm);
  transition: border-color 0.2s;
  outline: none;
}
.form-control:focus {
  border-color: var(--purple-main);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(123,45,139,0.1);
}
textarea.form-control { resize: vertical; min-height: 120px; }

.form-success {
  background: var(--green-pale);
  border: 1px solid var(--green-main);
  color: var(--green-dark);
  padding: 1rem;
  font-family: var(--font-type);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  border-radius: 2px;
}

/* =====================================================
   BLOG PREVIEW SECTION
   ===================================================== */

.blog-preview-section {
  padding: 0 2rem 5rem 2rem;
  background: var(--paper-warm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
  position: relative;
}

.blog-preview-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 1.8rem;
  max-width: 1300px;
  margin: 0 auto 2.5rem;
  align-items: start;
}

.blog-card-featured {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E"),
    var(--paper-white);
  box-shadow: var(--shadow-paper);
  position: relative;
  transform: rotate(-0.5deg);
  transition: transform 0.25s, box-shadow 0.25s;
}
.blog-card-featured:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lift); }
.blog-card-featured .pushpin { top: -10px; left: 30px; }

.blog-card-featured-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.blog-card-featured-img-placeholder {
  width: 100%;
  height: 260px;
  background: linear-gradient(135deg, var(--purple-pale), var(--purple-mist));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}
.blog-featured-body { padding: 1.8rem 2rem 2rem; }
.blog-card-date {
  font-family: var(--font-type);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.blog-card-title {
  font-family: var(--font-bask);
  font-size: 1.3rem;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 0.8rem;
}
.blog-card-featured .blog-card-title { font-size: 1.6rem; }
.blog-card-desc {
  font-size: 0.9rem;
  color: var(--text-medium);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.blog-card-small {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E"),
    var(--paper-white);
  box-shadow: var(--shadow-paper);
  padding: 1.4rem;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}
.blog-card-small:nth-child(2) { transform: rotate(1.2deg); }
.blog-card-small:nth-child(3) { transform: rotate(-0.8deg); }
.blog-card-small:nth-child(4) { transform: rotate(0.6deg); }
.blog-card-small:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-lift); }

.blog-card-small-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 1rem;
}
.blog-card-small-img-placeholder {
  width: 100%;
  height: 120px;
  background: var(--green-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.blog-cta { text-align: center; }

/* =====================================================
   FOOTER
   ===================================================== */

.site-footer {
  background: #18062E;
  color: rgba(255,255,255,0.85);
  position: relative;
  padding-top: 0;
}

.footer-torn-top {
  line-height: 0;
  margin-bottom: -2px;
}

.footer-inner {
  padding: 3.5rem 2rem 2rem;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* Giant background watermark */
.footer-bg-word {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Built Titling', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3.5rem, 11vw, 8rem);
  color: rgba(255,255,255,0.025);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.04em;
  z-index: 0;
}

/* Brand + Social — top row */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 2.8rem;
  position: relative;
  z-index: 1;
}
.footer-brand {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
}
.footer-logo-link { display: inline-block; text-decoration: none; flex-shrink: 0; }
.footer-brand-logo { height: 90px; width: auto; display: block; opacity: 0.9; }
.footer-brand-text { flex: 1; min-width: 0; }
.footer-brand-name {
  font-family: var(--font-built);
  font-weight: 700;
  font-style: italic;
  font-size: 1.5rem;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.footer-brand-desc {
  font-family: var(--font-type);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  max-width: 300px;
}

/* Tape strips holding footer to page */
.footer-tape-hold {
  position: absolute;
  height: 26px;
  background: rgba(255,220,40,0.28);
  border: 1px solid rgba(255,220,40,0.45);
  z-index: 10;
  pointer-events: none;
}
.footer-tape-hold-1 { top: -11px; left: 8%;  width: 115px; transform: rotate(-2.2deg); }
.footer-tape-hold-2 { top: -7px;  right: 13%; width: 90px;  transform: rotate(1.6deg);  }

/* Back to top — scrapbook stamp style */
.back-to-top {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  background: var(--green-main);
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  color: #fff;
  cursor: pointer;
  z-index: 1040;          /* below the mobile menu overlay (1050) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-built);
  font-size: 0.46rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1),
              background 0.2s, box-shadow 0.2s;
}
.back-to-top span { display: none; }   /* just the arrow — less prominent */
.back-to-top .bi { font-size: 0.95rem; line-height: 1; }
.back-to-top.visible {
  opacity: 0.85;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.back-to-top:hover {
  background: var(--green-dark);
  box-shadow: 0 5px 16px rgba(0,0,0,0.3);
  transform: translateY(-3px) scale(1.07);
  opacity: 1;
}
.back-to-top:active { transform: translateY(0) scale(0.96); }
.footer-social-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
  flex-shrink: 0;
}
.footer-social-heading {
  font-family: var(--font-built);
  font-style: italic;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin: 0;
}
.footer-social { display: flex; gap: 0.65rem; }
.footer-social-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, transform 0.22s;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
}
.footer-social-link:hover {
  background: var(--purple-main);
  border-color: var(--purple-main);
  color: #fff;
  transform: translateY(-3px);
}
.footer-email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-type);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-email-link:hover { color: rgba(255,255,255,0.85); }

/* Divider */
.footer-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}

/* Links grid — 3 columns */
.footer-links-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.footer-col { position: relative; }
.footer-tape-label {
  display: inline-block;
  background: rgba(255,220,40,0.15);
  border: 1px solid rgba(255,220,40,0.22);
  font-family: var(--font-built);
  font-weight: 700;
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(255,220,100,0.85);
  letter-spacing: 0.1em;
  padding: 0.2rem 0.8rem;
  margin-bottom: 1.1rem;
  transform: rotate(-1deg);
}
.footer-links { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-link {
  font-family: var(--font-type);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
  text-decoration: none;
}
.footer-link:hover { color: #fff; }
.footer-cat-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.footer-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.22rem 0.6rem;
  border-radius: 2px;
  font-family: var(--font-built);
  font-weight: 700;
  font-style: italic;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: transform 0.15s, filter 0.15s;
}
.footer-cat-tag:hover { filter: brightness(1.2); transform: translateY(-1px); }
.footer-contact-item { display: flex; align-items: center; gap: 0.5rem; }
.footer-contact-icon { font-size: 1rem; opacity: 0.55; flex-shrink: 0; }

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.footer-copy { font-family: var(--font-type); font-size: 0.75rem; color: rgba(255,255,255,0.3); }
.footer-made { font-family: var(--font-type); font-size: 0.75rem; color: rgba(255,255,255,0.3); }

/* =====================================================
   ABOUT PAGE
   ===================================================== */

.about-hero {
  background: linear-gradient(160deg, var(--purple-dark) 0%, var(--purple-main) 100%);
  padding: 5rem 2rem 3rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.about-hero-title {
  font-family: var(--font-bask);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-style: italic;
  margin-bottom: 1rem;
}
.about-hero-sub {
  font-family: var(--font-type);
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  max-width: 600px;
  margin: 0 auto;
}

.about-intro-section {
  padding: 4rem 2rem;
  background: var(--paper-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
}
.about-section {
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.about-intro-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  align-items: start;
}
.about-intro-text h2 {
  font-family: var(--font-built);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--purple-dark);
  margin-bottom: 1.4rem;
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.about-intro-text p {
  font-family: var(--font-type);
  font-size: 0.97rem;
  color: var(--text-medium);
  line-height: 1.85;
  margin-bottom: 1.2rem;
}
.about-deco-card {
  background: #FFF9D0;
  padding: 1.8rem;
  box-shadow: 4px 6px 18px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(0,0,0,0.04);
  transform: rotate(-1.8deg);
  position: relative;
  font-family: var(--font-hand);
  font-size: 1.18rem;
  color: #2a1800;
  line-height: 1.65;
}
.about-deco-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 78px;
  height: 21px;
  background: rgba(255,220,40,0.32);
  border: 1px solid rgba(255,220,40,0.5);
}
.about-deco-card:nth-child(2) { transform: rotate(1.2deg); }

/* =====================================================
   ANIMATIONS — HOMEPAGE & ABOUT
   ===================================================== */

/* ── 1. PROJECT CARDS: dealt like playing cards ── */
.preview-section:not(.anim-in) .project-card { opacity: 0; }
.preview-section.anim-in .project-card {
  animation: dealCard 0.8s both cubic-bezier(0.25, 1.05, 0.4, 1);
}
.preview-section.anim-in .project-card:nth-child(1){ animation-delay:0.00s; --cr:-3deg; --cy:36px; }
.preview-section.anim-in .project-card:nth-child(2){ animation-delay:0.09s; --cr: 3deg; --cy:42px; }
.preview-section.anim-in .project-card:nth-child(3){ animation-delay:0.18s; --cr:-2deg; --cy:36px; }
.preview-section.anim-in .project-card:nth-child(4){ animation-delay:0.27s; --cr: 3deg; --cy:44px; }
.preview-section.anim-in .project-card:nth-child(5){ animation-delay:0.36s; --cr:-3deg; --cy:38px; }
.preview-section.anim-in .project-card:nth-child(6){ animation-delay:0.45s; --cr: 2deg; --cy:40px; }
@keyframes dealCard {
  0%   { opacity:0; translate:0 var(--cy,40px); rotate:var(--cr,0deg); scale:0.96; }
  100% { opacity:1; translate:0 0; rotate:0deg; scale:1; }
}

/* ── 2. BLOG FEATURED CARD: gentle settle ── */
.blog-card-featured[data-anim]:not(.anim-in){ opacity:0; }
.blog-card-featured.anim-in {
  animation: settleDown 0.85s 0.05s cubic-bezier(0.25, 1.05, 0.4, 1) both;
}
@keyframes settleDown {
  0%   { opacity:0; translate:0 -34px; rotate:-2.5deg; scale:0.97; }
  100% { opacity:1; translate:0 0; rotate:0deg; scale:1; }
}

/* ── 3. CONTACT INFO CARD: slide in from left ── */
.contact-info-card[data-anim]:not(.anim-in){ opacity:0; }
.contact-info-card.anim-in {
  animation: slideInLeft 0.85s 0.1s cubic-bezier(0.25, 1.05, 0.4, 1) both;
}
@keyframes slideInLeft {
  0%   { opacity:0; translate:-46px 0; scale:0.97; rotate:-2deg; }
  100% { opacity:1; translate:0 0; scale:1; rotate:0deg; }
}

/* ── 4. STICKERS — gentle settle-in.
   NOTE: these never touch opacity, so a sticker can never get
   stuck invisible even if its reveal trigger is delayed. ── */
section.anim-in > .sticker-slam {
  animation:
    stkInRight 1.1s 0.1s cubic-bezier(0.25, 0.9, 0.3, 1) both,
    sticker-sway 8s 1.3s ease-in-out infinite;
}
@keyframes stkInRight {
  0%   { translate:50px -16px; rotate:-9deg; scale:0.9; }
  100% { translate:0 0; rotate:0deg; scale:1; }
}

section.anim-in > .sticker-fling {
  animation:
    stkInLeft 1.15s 0.12s cubic-bezier(0.25, 0.9, 0.3, 1) both,
    sticker-float 7s 1.3s ease-in-out infinite;
}
@keyframes stkInLeft {
  0%   { translate:-50px 20px; rotate:10deg; scale:0.9; }
  100% { translate:0 0; rotate:0deg; scale:1; }
}

section.anim-in > .sticker-spin {
  animation:
    stkInTurn 1.25s 0.14s cubic-bezier(0.25, 0.9, 0.3, 1) both,
    sticker-sway 9s 1.4s ease-in-out infinite;
}
@keyframes stkInTurn {
  0%   { translate:18px 18px; rotate:-34deg; scale:0.84; }
  100% { translate:0 0; rotate:0deg; scale:1; }
}

/* ── 5. ABOUT — sticky note settles in ── */
.about-deco-card[data-anim]:not(.anim-in){ opacity:0; }
.about-deco-card.anim-in {
  animation: noteSettle 0.9s 0.08s cubic-bezier(0.25, 1.05, 0.4, 1) both;
}
.about-deco-card:nth-child(2).anim-in { animation-delay:0.28s; }
@keyframes noteSettle {
  0%   { opacity:0; translate:40px -22px; rotate:7deg; scale:0.92; }
  100% { opacity:1; translate:0 0; rotate:0deg; scale:1; }
}

/* ── 6. ABOUT — fact notes ease in ── */
.about-fact-note[data-anim]:not(.anim-in){ opacity:0; }
.about-fact-note.anim-in {
  animation: factEase 0.75s var(--del,0s) cubic-bezier(0.25, 1.15, 0.4, 1) both;
}
@keyframes factEase {
  0%   { opacity:0; scale:1.3; rotate:-5deg; }
  60%  { opacity:1; }
  100% { opacity:1; scale:1; rotate:0deg; }
}

/* About areas tags */
.about-areas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.about-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  font-family: var(--font-built);
  font-size: 0.9rem;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  position: relative;
  cursor: default;
  opacity: 0;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.22);
  transform: translateY(16px) rotate(var(--rot, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s;
}
.about-area-tag .bi { font-size: 1em; vertical-align: -0.1em; margin-right: 0.35em; opacity: 0.92; }
.about-area-tag::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 15px;
  background: rgba(255,220,40,0.3);
  border: 1px solid rgba(255,220,40,0.5);
}
.about-areas-grid.anim-in .about-area-tag {
  animation: areaTagIn 0.48s var(--delay, 0s) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes areaTagIn {
  from { opacity: 0; transform: translateY(18px) rotate(var(--rot, 0deg)) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    rotate(var(--rot, 0deg)) scale(1); }
}
.about-area-tag:hover {
  transform: translateY(-4px) rotate(0deg) scale(1.06) !important;
  box-shadow: 5px 7px 18px rgba(0,0,0,0.28);
  z-index: 3;
}

/* About facts strip */
.about-facts-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3.5rem;
  justify-content: center;
}
.about-fact-note {
  background: var(--paper-white);
  box-shadow: var(--shadow-paper);
  padding: 1.4rem 1.8rem;
  text-align: center;
  min-width: 130px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.about-fact-number {
  font-family: 'Built Titling', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.9rem;
  color: var(--purple-dark);
  line-height: 1;
}
.about-fact-label {
  font-family: var(--font-type);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Values section */
.values-section {
  padding: 4rem 2rem;
  background: var(--paper-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E");
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 2.5rem auto 0;
}
.value-card {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E"),
    var(--paper-white);
  padding: 2rem 1.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-paper);
  border-top: 4px solid var(--purple-main);
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
  overflow: visible;
}
.value-card::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 72px;
  height: 20px;
  background: rgba(255,220,40,0.32);
  border: 1px solid rgba(255,220,40,0.5);
}
.value-card:nth-child(1) { transform: rotate(-1.8deg); border-top-color: var(--purple-main); }
.value-card:nth-child(2) { transform: rotate(0.4deg);  border-top-color: var(--green-main); }
.value-card:nth-child(3) { transform: rotate(-0.7deg); border-top-color: #C2185B; }
.value-card:nth-child(4) { transform: rotate(1.6deg);  border-top-color: #1565C0; }
.value-card:nth-child(5) { transform: rotate(-0.3deg); border-top-color: #E07B30; }
.value-card:nth-child(6) { transform: rotate(1.9deg);  border-top-color: #00897B; }
.value-card:nth-child(7) { transform: rotate(-1.2deg); border-top-color: #D32F2F; }
.value-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-lift); }
.value-card-emoji { font-size: 2.4rem; margin-bottom: 0.8rem; color: var(--purple-main); }
.value-card-emoji .bi { line-height: 1; }
.value-card h3 {
  font-family: var(--font-built);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 700;
  color: var(--purple-dark);
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}
.value-card p { font-family: var(--font-type); font-size: 0.87rem; color: var(--text-medium); line-height: 1.75; text-align: left; }

/* Team section */
.team-section {
  padding: 5rem 2rem;
  background: var(--paper-warm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 3rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
}
.team-card {
  background: var(--paper-white);
  box-shadow: 5px 8px 24px rgba(0,0,0,0.14);
  overflow: visible;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-card:first-child { transform: rotate(-1deg); }
.team-card:last-child  { transform: rotate(0.8deg); }
.team-card:hover { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 8px 18px 38px rgba(0,0,0,0.2); }
.team-card-photo {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
.team-card-photo-placeholder {
  width: 100%;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  background: linear-gradient(135deg, var(--purple-pale), var(--purple-mist));
}
.team-card-body { padding: 1.8rem 2rem 2rem; }
.team-card-name {
  font-family: var(--font-built);
  font-size: 1.6rem;
  font-style: italic;
  font-weight: 700;
  color: var(--purple-dark);
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}
.team-card-role {
  font-family: var(--font-type);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-main);
  margin-bottom: 1rem;
}
.team-card-bio {
  font-family: var(--font-type);
  font-size: 0.88rem;
  color: var(--text-medium);
  line-height: 1.8;
}

/* Mission/Vision */
.mission-section {
  padding: 5rem 2rem;
  background: var(--purple-dark);
  color: #fff;
  text-align: center;
}
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
}
.mission-box {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 2.5rem;
  border-radius: 2px;
}
.mission-box h3 {
  font-family: var(--font-bask);
  font-size: 1.4rem;
  font-style: italic;
  margin-bottom: 1rem;
  color: var(--purple-pale);
}
.mission-box p {
  font-family: var(--font-type);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
}

/* =====================================================
   PROJECTS / BLOG DETAIL PAGES
   ===================================================== */

.detail-hero {
  padding: 5.5rem 2rem 4.5rem;
  background: #0E0320;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}
.detail-hero-mosaic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120vw;
  height: 120%;
  object-fit: cover;
  z-index: 0;
  filter: blur(10px) grayscale(0.4);
}
.detail-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(175deg, rgba(14,3,32,0.55) 0%, rgba(14,3,32,0.90) 100%);
  z-index: 1;
}
.detail-hero-inner {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.detail-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-type);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.2rem;
}
.detail-eyebrow a { color: var(--purple-pale); text-decoration: none; }
.detail-eyebrow a:hover { color: #fff; }
.detail-cat-badge {
  font-family: 'Built Titling', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #fff;
  padding: 0.18rem 0.7rem;
  border-radius: 2px;
  text-transform: uppercase;
}
.detail-title {
  font-family: 'Built Titling', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  color: #fff;
}
.detail-date {
  font-family: var(--font-type);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
}

.detail-body {
  max-width: 920px;
  margin: 3.5rem auto;
  padding: 0 2rem;
}

/* Content blocks */
.content-block { margin-bottom: 2.8rem; }
.content-block-text {
  font-family: var(--font-bask);
  font-size: 1.08rem;
  color: var(--text-dark);
  line-height: 1.88;
}
.content-block-text p + p { margin-top: 1em; }
.content-block-img {
  width: 100%;
  box-shadow: var(--shadow-paper);
  margin: 0.5rem 0;
}
.content-block-img-caption {
  font-family: var(--font-type);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}
.content-block-video {
  position: relative;
  padding-top: 56.25%;
  background: #000;
}
.content-block-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* References */
.references-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px dashed var(--purple-pale);
}
.references-section h3 {
  font-family: var(--font-bask);
  font-size: 1.3rem;
  color: var(--purple-dark);
  margin-bottom: 1.2rem;
}
.reference-item {
  margin-bottom: 1rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--purple-light);
}
.reference-item h4 {
  font-family: var(--font-type);
  font-size: 0.9rem;
  color: var(--purple-dark);
  margin-bottom: 0.2rem;
}
.reference-item p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }
.reference-item a { color: var(--purple-main); text-decoration: underline; }

/* =====================================================
   LIST PAGES (Projects, Blog etc.)
   ===================================================== */

/* Editorial header — replaces old hero */
.page-editorial-header {
  padding: 3.5rem 2rem 1.5rem;
  position: relative;
  z-index: 2;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}
.page-editorial-bg-word {
  position: absolute;
  bottom: -0.18em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Built Titling', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(5rem, 19vw, 13rem);
  color: rgba(74,26,107,0.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.page-editorial-fg { position: relative; z-index: 1; }
.page-editorial-label {
  display: block;
  font-family: var(--font-type);
  font-size: 0.72rem;
  color: var(--purple-main);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.page-editorial-title {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  color: var(--purple-dark);
  line-height: 1.05;
}

/* Filter bar */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    gap: 0.45rem;
    padding: 1.2rem 2rem 1.2rem;
    background: var(--paper-white);
    justify-content: center;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.42rem 1.05rem;
  font-family: 'Built Titling', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.92);
  background: #4A1A6B;
  border: none;
  border-radius: 2px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: transform 0.15s, filter 0.15s;
}
.filter-btn:hover { filter: brightness(1.2); transform: translateY(-2px); color: #fff; }
.filter-btn.active { outline: 2px solid white; outline-offset: 2px; filter: brightness(1.15); }

/* Per-category colors */
.filter-btn[data-cat="sustainability"] { background: #2D7D32; }
.filter-btn[data-cat="animals"]        { background: #BF360C; }
.filter-btn[data-cat="art"]            { background: #880E4F; }
.filter-btn[data-cat="inclusion"]      { background: #00695C; }
.filter-btn[data-cat="mental"]         { background: #1A237E; }
.filter-btn[data-cat="education"]      { background: #E65100; }
.filter-btn[data-cat="youth"]          { background: #B71C1C; }
.filter-btn[data-cat="humanitarian"]   { background: #4A148C; }

.list-body {
  padding: 3rem 2rem 4rem;
  background: var(--paper-warm);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
  min-height: 50vh;
}
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
}

/* Blog index — 3-column grid, featured spans 2 */
.blog-index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.blog-list-featured {
  grid-column: span 2;
}

/* =====================================================
   RELATED BLOCK (bottom of detail pages)
   Sliders: same-type top (2 or 4 visible) + two-col sliders
   ===================================================== */

/* Torn paper top divider */
.related-torn-top {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  line-height: 0;
  margin-bottom: -2px;
}
.related-torn-top svg { display: block; width: 100%; height: 55px; }

.related-block {
  background: var(--paper-cream);
  padding: 0 2rem 3.5rem;
}
.related-block-inner {
  max-width: 1100px;
  margin: 1.5rem auto 0;
}

/* Slider nav rows */
.related-slider-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.related-same-label {
  font-family: var(--font-type);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}
.slider-nav { display: flex; gap: 0.3rem; }
.slider-btn {
  background: var(--paper-white);
  border: 1.5px solid var(--purple-pale);
  color: var(--purple-dark);
  font-size: 1.15rem;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.08);
  line-height: 1;
  padding: 0;
}
.slider-btn:hover:not(:disabled) { background: var(--purple-pale); border-color: var(--purple-light); }
.slider-btn:disabled { opacity: 0.28; cursor: default; }
.slider-nav-sm .slider-btn { width: 22px; height: 22px; font-size: 0.9rem; }

/* Top same-type slider */
.related-slider-section { margin-bottom: 2.2rem; }
.related-slider-wrap { overflow: hidden; }
.related-slider-track {
  display: flex;
  gap: 1.2rem;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
}
.related-slider-wrap[data-per="4"] .related-same-card { flex: 0 0 calc(25% - 0.9rem); }
.related-slider-wrap[data-per="2"] .related-same-card { flex: 0 0 calc(50% - 0.6rem); }

.related-same-card {
  background: var(--paper-white);
  box-shadow: var(--shadow-paper);
  text-decoration: none;
  color: inherit;
  display: block;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
}
.related-same-card:nth-child(odd)  { transform: rotate(-0.4deg); }
.related-same-card:nth-child(even) { transform: rotate( 0.3deg); }
.related-same-card:hover { transform: translateY(-4px) rotate(0); box-shadow: var(--shadow-lift); }
.related-same-img { width: 100%; height: 160px; object-fit: cover; display: block; }
.related-same-placeholder {
  width: 100%; height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--purple-pale), var(--purple-mist));
}
.related-same-body { padding: 0.85rem 1rem 1rem; }
.related-same-title {
  font-family: var(--font-bask);
  font-size: 0.95rem;
  color: var(--purple-dark);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.related-same-date { font-family: var(--font-type); font-size: 0.68rem; color: var(--text-muted); }

/* Bottom two columns with sliders */
.related-two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  border-top: 1px dashed rgba(74,26,107,0.1);
  padding-top: 1.8rem;
}
.related-col-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--purple-pale);
}
.related-col-heading {
  font-family: var(--font-built);
  font-weight: 700;
  font-style: normal;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--purple-dark);
}
.related-col-slider-wrap { overflow: hidden; }
.related-col-slider-track {
  display: flex;
  gap: 0.65rem;
  transition: transform 0.42s cubic-bezier(.4,0,.2,1);
}
.related-col-slider-track .related-col-item {
  flex: 0 0 calc(50% - 0.325rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  border-bottom: none;
}
.related-col-item {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}
.related-col-item:hover { opacity: 0.75; }
.related-col-img { width: 100%; height: 65px; object-fit: cover; display: block; }
.related-col-placeholder {
  width: 100%; height: 65px;
  background: var(--purple-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.related-col-title {
  font-family: var(--font-bask);
  font-size: 0.75rem;
  color: var(--text-dark);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.3rem;
}

@media (max-width: 700px) {
  .blog-index-grid { grid-template-columns: 1fr; }
  .blog-list-featured { grid-column: span 1; }
  .related-slider-wrap[data-per="4"] .related-same-card,
  .related-slider-wrap[data-per="2"] .related-same-card { flex: 0 0 calc(100% - 0.6rem); }
  .related-two-cols { grid-template-columns: 1fr; }
  .related-col-slider-track .related-col-item { flex: 0 0 100%; }
}

/* =====================================================
   DECORATIVE STICKERS & TEXTURE
   ===================================================== */

@keyframes sticker-sway {
  0%, 100% { transform: rotate(var(--sr, -5deg)); }
  50%       { transform: rotate(calc(var(--sr, -5deg) + 8deg)); }
}
@keyframes sticker-float {
  0%, 100% { transform: translateY(0) rotate(var(--sr, 0deg)); }
  50%       { transform: translateY(-10px) rotate(calc(var(--sr, 0deg) + 4deg)); }
}
.deco-sticker {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.deco-sticker img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 6px 14px rgba(0,0,0,0.22));
}
.deco-sway  { animation: sticker-sway  8s ease-in-out infinite; }
.deco-float { animation: sticker-float 7s ease-in-out infinite; }

@media (max-width: 700px) {
  .deco-sticker { display: none; }
}

/* =====================================================
   MISSION & VISION HOMEPAGE SECTION
   ===================================================== */
.mv-section {
  position: relative;
  padding: 7rem 2rem 8rem;
  background: #0f051e;
}
.mv-bg-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.mv-bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.mv-bg1 {
  background-image: url('/img/bg1.webp');
  z-index: 0;
  filter: blur(10px) brightness(0.22) saturate(0.5);
}
.mv-bg2 {
  background-image: url('/img/bg2.webp');
  z-index: 1;
  opacity: 0.28;
  mix-blend-mode: screen;
  filter: blur(8px) brightness(0.45);
}
.mv-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,5,30,0.72) 0%, rgba(40,15,70,0.58) 100%);
  z-index: 2;
}
/* torn top edge: the cream "paper" tears DOWN into the section, revealing the
   real (textured) MV background below — so the seam reads as one whole. */
.mv-torn-top {
  position: absolute;
  top: -1px;
  left: -2px;
  width: calc(100% + 4px);
  height: 72px;
  z-index: 4;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}
.mv-torn-top svg { display: block; width: 100%; height: 100%; }
.mv-content {
  position: relative;
  z-index: 3;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.mv-cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 1rem 0;
}
.mv-card {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  background: linear-gradient(158deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.045) 100%);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 2.9rem 2.6rem 2.7rem;
  color: #fff;
  width: 380px;
  max-width: 90vw;
  flex-shrink: 0;
  text-align: left;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  cursor: default;
}
/* colored accent bar + soft inner top-glow per card identity */
.mv-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  z-index: 5;
}
.mv-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 110px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.mv-card > * { position: relative; z-index: 1; }
.mv-card-mission::before { background: linear-gradient(90deg, var(--green-main), var(--green-light)); }
.mv-card-vision::before  { background: linear-gradient(90deg, var(--purple-main), var(--purple-light)); }
.mv-card-mission::after { background: radial-gradient(120% 90% at 50% 0%, rgba(92,173,110,0.28), transparent 70%); }
.mv-card-vision::after  { background: radial-gradient(120% 90% at 50% 0%, rgba(168,85,201,0.30), transparent 70%); }
.mv-card-mission .mv-card-eyebrow { color: var(--green-light); border-bottom-color: rgba(92,173,110,0.30); }
.mv-card-vision  .mv-card-eyebrow { color: var(--purple-light); border-bottom-color: rgba(168,85,201,0.32); }
.mv-card-mission {
  transform: translateY(22px) rotate(-4.5deg);
  z-index: 1;
  margin-right: -55px;
  box-shadow: 3px 8px 36px rgba(0,0,0,0.6);
}
.mv-card-vision {
  transform: rotate(3.5deg);
  z-index: 2;
  box-shadow: 8px 16px 50px rgba(0,0,0,0.68);
}
.mv-card-mission:hover {
  z-index: 3;
  transform: rotate(-1.5deg) translateY(8px) scale(1.04);
  box-shadow: 6px 18px 60px rgba(0,0,0,0.78);
}
.mv-card-vision:hover {
  z-index: 3;
  transform: rotate(1deg) scale(1.04);
  box-shadow: 12px 26px 68px rgba(0,0,0,0.82);
}
.mv-card-eyebrow {
  font-family: var(--font-bask);
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mv-header { text-align: center; margin-bottom: 3.5rem; }
.mv-header-title {
  font-family: var(--font-built);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  margin: 0;
}
.mv-header-amp {
  font-family: var(--font-bask);
  font-style: italic;
  font-size: 0.65em;
  opacity: 0.55;
  margin: 0 0.25em;
  vertical-align: middle;
}
.mv-card-heading {
  font-family: var(--font-built);
  font-style: italic;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.mv-card p {
  font-family: var(--font-type);
  font-size: 0.88rem;
  line-height: 1.78;
  color: rgba(255,255,255,0.8);
  margin: 0;
}
@media (max-width: 700px) {
  .mv-cards { flex-direction: column; align-items: center; }
  .mv-card { width: 100%; max-width: 480px; margin: 0 !important; transform: none !important; box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important; }
  .mv-card + .mv-card { margin-top: -20px !important; }
}

/* =====================================================
   ADMIN PANEL
   ===================================================== */

/* clean, modern sans for the whole admin tool (scoped — public site keeps its fonts) */
.admin-bar, .admin-body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.admin-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1.6rem;
  background: linear-gradient(100deg, var(--purple-dark), var(--purple-main));
  box-shadow: 0 2px 16px rgba(40,15,70,0.28);
}
.admin-bar h1 {
  font-family: inherit; flex: 1; min-width: 0;
  font-size: 0.98rem; font-weight: 700; color: #fff; letter-spacing: 0.01em;
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-bar a {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  font-size: 0.82rem; font-weight: 600; color: #fff; text-decoration: none;
  padding: 0.45rem 0.95rem; border-radius: 999px;
  background: rgba(255,255,255,0.15); transition: background 0.2s;
}
.admin-bar a:hover { color: #fff; background: rgba(255,255,255,0.28); }

.admin-body {
  padding: 2rem 1.6rem 4rem;
  max-width: 1200px; margin: 0 auto; min-height: 100vh;
}

/* TABS — segmented pill bar, scrollable on small screens */
.admin-tabs {
  display: flex; gap: 0.35rem; margin-bottom: 1.8rem; padding: 0.35rem;
  background: #fff; border: 1px solid #ece7dd; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20,10,40,0.04), 0 6px 22px rgba(20,10,40,0.07);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; flex: 0 0 auto;
  font-size: 0.85rem; font-weight: 600; padding: 0.6rem 1.15rem; cursor: pointer;
  border: none; background: transparent; color: var(--text-muted);
  border-radius: 999px; transition: all 0.18s;
}
.admin-tab:hover { color: var(--purple-dark); background: var(--purple-mist); }
.admin-tab.active {
  color: #fff; background: linear-gradient(100deg, var(--purple-main), var(--purple-dark));
  box-shadow: 0 4px 12px rgba(123,45,139,0.32);
}
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; animation: adminFade 0.25s ease both; }
@keyframes adminFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* TABLE — card with rounded corners */
.admin-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.88rem;
  background: #fff; border: 1px solid #ece7dd; border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,10,40,0.04), 0 6px 22px rgba(20,10,40,0.07);
}
.admin-table th {
  background: #faf8f4; padding: 0.85rem 1.1rem; text-align: left;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); border-bottom: 1px solid #ece7dd;
}
.admin-table td {
  padding: 0.9rem 1.1rem; border-bottom: 1px solid #f0ece3; color: var(--text-dark); vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr { transition: background 0.15s; }
.admin-table tbody tr:hover td { background: #faf7f2; }

.badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 0.28rem 0.7rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-published { background: #e3f4e7; color: #1b7a3d; }
.badge-draft { background: #efeae0; color: var(--text-muted); }

.admin-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.btn-admin {
  font-size: 0.78rem; font-weight: 600; padding: 0.42rem 0.9rem; border-radius: 8px;
  border: none; cursor: pointer; text-decoration: none; display: inline-block;
  transition: transform 0.12s, background 0.15s;
}
.btn-admin:hover { transform: translateY(-1px); }
.btn-edit { background: var(--purple-mist); color: var(--purple-dark); }
.btn-edit:hover { background: var(--purple-pale); }
.btn-delete { background: #fdecee; color: #c62828; }
.btn-delete:hover { background: #fbd9dd; }
.btn-new {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; font-weight: 700; padding: 0.7rem 1.3rem;
  background: linear-gradient(100deg, var(--purple-main), var(--purple-dark)); color: #fff;
  border: none; border-radius: 10px; cursor: pointer; margin-bottom: 1.3rem; text-decoration: none;
  box-shadow: 0 4px 14px rgba(123,45,139,0.28); transition: transform 0.14s, box-shadow 0.14s;
}
.btn-new:hover { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(123,45,139,0.36); color: #fff; }

/* Content builder */
.builder-area { min-height: 120px; }
.builder-block {
  background: #faf8f4; border: 1px solid #ece7dd; border-radius: 10px;
  margin-bottom: 0.9rem; overflow: hidden;
}
.builder-block-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #f1ece3; padding: 0.55rem 0.9rem; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); cursor: move;
}
.builder-block-body { padding: 1rem; }
.builder-block-body .form-group { margin-bottom: 0.8rem; }
.builder-block-body label { font-size: 0.75rem; font-weight: 600; }

.builder-add-buttons { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.btn-add-block {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600;
  padding: 0.5rem 1rem; border: 1px dashed #c7bda8; background: #fff; color: var(--text-dark);
  cursor: pointer; border-radius: 9px; transition: all 0.15s;
}
.btn-add-block:hover { border-color: var(--purple-main); background: var(--purple-mist); color: var(--purple-dark); }

.admin-form-section {
  background: #fff; padding: 1.8rem 2rem; border: 1px solid #ece7dd; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,10,40,0.04), 0 6px 22px rgba(20,10,40,0.07); margin-bottom: 1.6rem;
}
.admin-form-section h3 {
  font-family: inherit; font-size: 1.1rem; font-weight: 700; color: var(--purple-dark);
  margin: 0 0 1.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid #ece7dd;
}
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.admin-form-grid .form-group-full { grid-column: 1 / -1; }

/* admin-scoped modern inputs (public site .form-control is untouched) */
.admin-body .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.4rem; }
.admin-body .form-control {
  font-family: inherit; font-size: 0.92rem; padding: 0.6rem 0.8rem;
  border: 1px solid #ddd6c9; border-radius: 9px; background: #fcfbf9; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-body .form-control:focus { outline: none; border-color: var(--purple-main); box-shadow: 0 0 0 3px rgba(123,45,139,0.14); background: #fff; }

/* Tab switcher for EN/SR */
.lang-tabs { display: flex; gap: 0; margin-bottom: 0.5rem; }
.lang-tab {
  font-size: 0.75rem; font-weight: 600; padding: 0.32rem 0.85rem;
  border: 1px solid #ece7dd; background: #faf8f4; cursor: pointer; color: var(--text-muted);
}
.lang-tab:first-child { border-radius: 8px 0 0 8px; }
.lang-tab:last-child  { border-radius: 0 8px 8px 0; border-left: none; }
.lang-tab.active { background: var(--purple-main); color: #fff; border-color: var(--purple-main); }
.lang-panel { display: none; }
.lang-panel.active { display: block; }

/* admin bar right-side links group */
.admin-bar-links { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

/* ===== ADMIN LOGIN ===== */
.admin-login-body {
  margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(168,85,201,0.5), transparent 55%),
    radial-gradient(110% 80% at -10% 110%, rgba(20,10,40,0.5), transparent 55%),
    linear-gradient(135deg, var(--purple-dark), #1a0b2e);
}
.admin-login-card {
  width: 100%; max-width: 380px; background: #fff; border-radius: 18px;
  padding: 2.4rem 2.2rem 2rem; box-shadow: 0 24px 60px rgba(10,2,25,0.5);
  display: flex; flex-direction: column; text-align: center;
}
.admin-login-logo img { height: 64px; width: auto; margin: 0 auto 0.6rem; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18)); }
.admin-login-title { font-family: inherit; font-size: 1.35rem; font-weight: 700; color: var(--purple-dark); margin: 0; }
.admin-login-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-muted); margin: 0.2rem 0 1.6rem; }
.admin-login-error { background: #fdecee; color: #c62828; font-size: 0.82rem; font-weight: 600; padding: 0.6rem 0.8rem; border-radius: 9px; margin-bottom: 1.1rem; text-align: left; }
.admin-login-field { text-align: left; margin-bottom: 1rem; }
.admin-login-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.35rem; }
.admin-login-field input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.95rem; padding: 0.7rem 0.85rem;
  border: 1px solid #ddd6c9; border-radius: 10px; background: #fcfbf9;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-login-field input:focus { outline: none; border-color: var(--purple-main); box-shadow: 0 0 0 3px rgba(123,45,139,0.16); background: #fff; }
.admin-login-btn {
  margin-top: 0.4rem; font-family: inherit; font-size: 0.95rem; font-weight: 700; color: #fff; cursor: pointer;
  border: none; border-radius: 11px; padding: 0.8rem 1rem;
  background: linear-gradient(100deg, var(--purple-main), var(--purple-dark));
  box-shadow: 0 6px 18px rgba(123,45,139,0.34); transition: transform 0.14s, box-shadow 0.14s;
}
.admin-login-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(123,45,139,0.42); }
.admin-login-back { margin-top: 1.2rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.admin-login-back:hover { color: var(--purple-dark); }

/* ===== ADMIN responsive ===== */
@media (max-width: 768px) {
  .admin-bar { padding: 0.7rem 0.9rem; gap: 0.6rem; }
  .admin-bar h1 { font-size: 0.82rem; }
  .admin-bar a { font-size: 0.8rem; padding: 0.4rem 0.7rem; }
  .admin-bar a .bar-txt { display: none; }   /* compact: just the ← arrow on phones */
  .admin-body { padding: 1.2rem 0.8rem 3rem; }
  .admin-form-section { padding: 1.2rem 1rem; }
  .admin-form-grid { grid-template-columns: 1fr; }

  /* table rows become stacked cards (uses data-label on each <td>) */
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table { border: none; background: transparent; box-shadow: none; overflow: visible; }
  .admin-table thead { display: none; }
  .admin-table tbody tr {
    background: #fff; border: 1px solid #ece7dd; border-radius: 12px; margin-bottom: 1rem; padding: 0.5rem 0;
    box-shadow: 0 1px 2px rgba(20,10,40,0.04), 0 6px 18px rgba(20,10,40,0.06);
  }
  .admin-table tbody tr:hover td { background: transparent; }
  .admin-table td { border: none; border-bottom: 1px dashed #f0ece3; padding: 0.5rem 1rem; }
  .admin-table tbody tr td:last-child { border-bottom: none; }
  .admin-table td::before {
    content: attr(data-label); display: block; margin-bottom: 0.15rem;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
  }
  .admin-table td:empty { display: none; }
}

/* =====================================================
   UTILITY / SPACING
   ===================================================== */

.container-main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.text-center { text-align: center; }
.text-purple { color: var(--purple-main); }
.text-green  { color: var(--green-main); }
.text-muted  { color: var(--text-muted); }

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
  font-family: var(--font-type);
  font-size: 0.9rem;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 1100px) {
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .areas-entries { grid-template-columns: 1fr; }
  .preview-grid { grid-template-columns: 1fr 1fr; }
  .blog-preview-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { flex-direction: column; gap: 2rem; }
  .footer-social-col { align-items: flex-start; }
  .footer-links-grid { grid-template-columns: 1fr 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .footer-bg-word { font-size: clamp(2.5rem, 8vw, 5rem); }
}

@media (max-width: 860px) {
  .main-nav, .lang-toggle { display: none; }
  .hamburger { display: flex; }

  .hero-content { grid-template-columns: 1fr; padding: 0 1.5rem; }
  .slide-deco { display: none; }
  .slide-paper { transform: none; padding: 2rem 1.8rem; }
  .hero-slide { padding-top: 2rem; }
  .hero-slide-2 .slide-title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-slide-4 .slide-desc { font-size: 1rem; }

  .contact-grid { grid-template-columns: 1fr; }
  .about-intro-grid { grid-template-columns: 1fr; }
  .mission-grid { grid-template-columns: 1fr; }
  .blog-preview-grid { grid-template-columns: 1fr; }
  .blog-list-featured { grid-column: 1; }
}

@media (max-width: 600px) {
  .header-inner { padding: 0.5rem 1rem; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .areas-entries { gap: 1.4rem; }
  .area-entry-title .punk-letter { height: 30px; }
  .preview-grid { grid-template-columns: 1fr; }
  .hero-section { height: 85vh; }
  .hero-slogan { padding: 0.5rem 1rem; font-size: 0.95rem; }
  .footer-links-grid { grid-template-columns: 1fr; }
  .admin-body { padding: 1rem; }
  .admin-form-section { padding: 1.2rem; }
  .preview-section, .areas-section, .blog-preview-section,
  .contact-section, .team-section, .values-section { padding: 3rem 1rem; }
}

/* ============================================
   ENVELOPE SEND ANIMATION
   ============================================ */

.env-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 2, 30, 0.94);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.env-overlay.active {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}

.env-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  pointer-events: none;
}

.env-wrap {
  position: relative;
  width: 340px;
  height: 220px;
  transform: scale(0) rotate(-8deg);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
}
.env-wrap.env-visible {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.env-body {
  position: absolute;
  inset: 0;
  background: #ebe0c5;
  border-radius: 4px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.55), 0 8px 22px rgba(0,0,0,0.35);
  overflow: hidden;
}

/* Zatvoreni flap - V oblik na vrhu */
.env-flap-closed {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 110px;
  background: linear-gradient(170deg, #e8dcbd 0%, #ddd0ad 100%);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12));
}

/* Bočni preklopi */
.env-seam-left {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, rgba(0,0,0,0.04), transparent);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.env-seam-right {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(-90deg, rgba(0,0,0,0.04), transparent);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Pečat - centriran na koverti */
.env-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  margin-top: -46px;
  margin-left: -46px;
  object-fit: contain;
  border-radius: 4px;
  padding: 6px;
  opacity: 0;
  transform: rotate(-8deg) scale(0.3);
  z-index: 10;
  pointer-events: none;
}
.env-stamp.stamp-hit {
  animation: stampPress 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}

@keyframes stampPress {
  0%   { opacity: 0; transform: rotate(-8deg) translateY(-30px) scale(1.7); }
  35%  { opacity: 1; transform: rotate(-8deg) translateY(5px) scale(0.86); }
  60%  { opacity: 1; transform: rotate(-8deg) translateY(-2px) scale(1.08); }
  85%  { opacity: 1; transform: rotate(-8deg) translateY(1px) scale(0.97); }
  100% { opacity: 1; transform: rotate(-8deg) translateY(0) scale(1); }
}

/* Success text */
.env-success {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  color: transparent;
  text-align: center;
  line-height: 1.55;
  transition: color 0.7s;
  min-height: 3.5rem;
}
.env-success.visible { color: rgba(255,255,255,0.92); }
.env-success strong {
  display: block;
  font-size: 1.75rem;
  margin-bottom: 0.2rem;
}

.env-hint {
  font-family: var(--font-type);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.07em;
  margin: 0;
  text-transform: lowercase;
}

/* ============================================================
   ★   PURPLE CLOVER — BRUTAL SCRAPBOOK UPGRADE LAYER   ★
   Appended override layer. Keeps existing palette, cranks
   contrast + texture, adds xerox/halftone, hard-ink shadows,
   ransom poster menu, letter-send animation, harder scroll-ins,
   and a mobile-first pass. 'Anton' is injected by site.js.
   ============================================================ */

:root{
  --ink:#0c0a07;
  --ink-soft:#161210;
  --neon-pop:#fff200;            /* used sparingly, behind black */
  --font-brutal:'Anton','Bebas Neue','Big Shoulders Display',Impact,sans-serif;
  --hard:5px 5px 0 var(--ink);
  --hard-lg:9px 9px 0 var(--ink);
  --hard-purple:6px 6px 0 var(--purple-dark);
  --hard-green:6px 6px 0 var(--green-dark);
}

/* ---- 1. GLOBAL XEROX / PHOTOCOPY ATMOSPHERE ---- */
body{
  background-color:var(--paper-white);
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.075'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.018) 0 2px, transparent 2px 7px);
}
body::after{
  content:'';
  position:fixed; inset:0; z-index:6000; pointer-events:none;
  mix-blend-mode:multiply; opacity:0.5;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.10) 1px, transparent 1.4px) 0 0/5px 5px,
    radial-gradient(120% 80% at 50% 50%, transparent 58%, rgba(0,0,0,0.16) 100%);
}

/* ---- 2. HARD-INK SHADOWS + COPY-EDGE on key paper objects ---- */
.area-entry, .value-card, .project-card, .mv-card, .contact-info-card,
.team-card, .about-deco-card, .blog-card-featured{
  box-shadow:var(--hard) !important;
  border:2.5px solid var(--ink);
}
.slide-paper{ box-shadow:var(--hard-lg) !important; border:2.5px solid var(--ink); }
.area-entry:hover, .value-card:hover, .project-card:hover, .mv-card:hover,
.contact-info-card:hover{
  box-shadow:var(--hard-lg) !important;
}
.contact-form{ border:2.5px solid var(--ink); box-shadow:var(--hard-lg) !important; }

/* ---- 3. BUTTONS: slam-press ---- */
.btn-scrap{
  border:2.5px solid var(--ink) !important;
  box-shadow:4px 4px 0 var(--ink) !important;
  border-radius:1px !important;
  font-family:var(--font-type);
  font-weight:700;
  transition:transform .08s cubic-bezier(.2,1.6,.4,1), box-shadow .08s, background .2s;
}
.btn-scrap:hover{ transform:translate(-2px,-2px) rotate(-1deg); box-shadow:7px 7px 0 var(--ink) !important; }
.btn-scrap:active{ transform:translate(4px,4px) rotate(0deg); box-shadow:0 0 0 var(--ink) !important; }

/* ---- 4. SECTION TITLES: heavier + halftone slab behind label ---- */
.section-label{
  display:inline-block;
  background:var(--ink); color:var(--paper-white) !important;
  font-family:var(--font-type); font-weight:700;
  padding:5px 16px; letter-spacing:.18em; text-transform:uppercase;
  transform:rotate(-1.4deg);
  box-shadow:3px 3px 0 rgba(123,45,139,.9);
}
.contact-heading, .mv-header-title, .editorial-fg-word{
  text-shadow:4px 4px 0 var(--ink), -1px -1px 0 var(--ink);
}
.punk-letter{ filter:drop-shadow(2px 3px 0 rgba(12,10,7,.55)) !important; }
.punk-word:hover .punk-letter{ animation:ransomJitter .4s steps(2) infinite; }
@keyframes ransomJitter{
  0%{transform:rotate(-3deg) translateY(1px);}
  50%{transform:rotate(2.4deg) translateY(-2px);}
  100%{transform:rotate(-1.5deg) translateY(1px);}
}

/* ---- 5. HEADER / NAV brutalization ---- */
.site-header{ border-bottom:none; }
.nav-tab{ text-shadow:2px 2px 0 var(--ink) !important; }
.nav-tab:hover{ animation:tabBuzz .28s steps(2) 2; }
@keyframes tabBuzz{ 0%{transform:translateY(-3px) rotate(-2deg);}50%{transform:translateY(-3px) rotate(2deg);}100%{transform:translateY(-3px) rotate(0);} }
.lang-btn{ border:2px solid var(--ink) !important; box-shadow:2px 2px 0 var(--ink); }
.hamburger span{ background:var(--ink) !important; height:4px !important; border-radius:0 !important; }

/* =====================================================================
   6. ★ BRUTAL MODAL MENU — full-screen PASTE-UP / RANSOM POSTER WALL
   ===================================================================== */
.mobile-menu-overlay{
  background:#0c0a07 !important;
  overflow:hidden;
  gap:0 !important;
  justify-content:center;
  background-image:radial-gradient(120% 70% at 50% -10%, rgba(123,45,139,.55), transparent 60%) !important;
}
.mm-wall{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 1.6px) 0 0/6px 6px,
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 18px, transparent 18px 38px);
}
.mm-poster{
  position:absolute; z-index:1; pointer-events:none;
  font-family:var(--font-brutal); text-transform:uppercase;
  color:#0c0a07; background:var(--paper-cream);
  padding:.35em .7em; letter-spacing:.04em; line-height:.9;
  box-shadow:4px 4px 0 rgba(0,0,0,.6);
  opacity:0; transform:scale(.4) rotate(var(--r,0deg));
  border:2px solid #0c0a07;
}
.mm-poster.alt{ background:var(--purple-main); color:#fff; border-color:#fff; }
.mm-poster.alt2{ background:var(--neon-pop); color:#0c0a07; }
.mm-poster.ink{ background:#0c0a07; color:#fff; border-color:#fff; }
.mobile-menu-overlay.open .mm-poster{ animation:posterSlap .5s var(--pd,0s) cubic-bezier(.18,1.5,.32,1) forwards; }
@keyframes posterSlap{
  0%{opacity:0; transform:scale(2.1) rotate(calc(var(--r,0deg) - 18deg)); filter:blur(7px);}
  60%{opacity:1; filter:blur(0);}
  100%{opacity:.9; transform:scale(1) rotate(var(--r,0deg));}
}
.mobile-menu-overlay .mm-nav{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.mobile-menu-overlay .mobile-nav-link{
  position:relative; z-index:5;
  display:flex; flex-wrap:wrap; justify-content:center; gap:3px;
  font-family:var(--font-brutal);
  font-size:clamp(2.4rem,12vw,4.2rem);
  font-style:normal; line-height:.85;
  opacity:0; transform:translateY(40px) rotate(-3deg);
}
.mobile-menu-overlay.open .mobile-nav-link{
  animation:linkSlam .5s calc(.35s + var(--i,0)*.09s) cubic-bezier(.18,1.5,.32,1) forwards;
}
@keyframes linkSlam{
  0%{opacity:0; transform:translateY(80px) rotate(-9deg) scale(.7); filter:blur(6px);}
  60%{opacity:1; filter:blur(0);}
  100%{opacity:1; transform:translateY(0) rotate(-1.5deg) scale(1);}
}
.mobile-menu-overlay .mobile-nav-link:hover{ color:#fff; }
.mm-r{
  display:inline-block; padding:.02em .14em; color:#0c0a07;
  background:var(--paper-cream);
  box-shadow:2px 2px 0 rgba(0,0,0,.55);
  transform:rotate(var(--lr,0deg));
}
.mm-r.b{ background:#0c0a07; color:var(--paper-white); }
.mm-r.p{ background:var(--purple-main); color:#fff; }
.mm-r.g{ background:var(--green-main); color:#fff; }
.mm-r.y{ background:var(--neon-pop); color:#0c0a07; }
.mobile-nav-link:hover .mm-r{ animation:ransomJitter .35s steps(2) infinite; }
.mobile-menu-overlay .mobile-lang{ position:relative; z-index:5; margin-top:2rem; }
.mobile-menu-overlay .mobile-lang a{
  font-family:var(--font-type); border:2px solid #fff; border-radius:0;
  box-shadow:3px 3px 0 rgba(0,0,0,.6); transform:rotate(-2deg);
}
.mobile-menu-overlay .mobile-lang a:last-child{ transform:rotate(2deg); }
.mobile-close{
  z-index:9; font-family:var(--font-brutal); font-size:1.5rem !important;
  width:40px; height:40px; background:var(--neon-pop) !important; color:#0c0a07 !important;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid #0c0a07 !important; box-shadow:3px 3px 0 rgba(0,0,0,.7);
  transform:rotate(4deg); transition:transform .12s;
}
.mobile-close:hover{ transform:rotate(-6deg) scale(1.08); }

/* =====================================================================
   7. ★ LETTER → LOGO SEAL → SHRINK AWAY  (clean envelope, one piece)
   ===================================================================== */
.env-overlay{ background:rgba(12,2,30,0.94) !important; }
.env-overlay .modal-stars{ position:absolute; inset:0; z-index:0; }
.env-scene{ position:relative; z-index:2; }
/* retire the old closed-flap / fly / seal-ring / streak pieces */
.env-body, .env-flap-closed, .env-seam-left, .env-seam-right,
.env-flap-anim, .env-wax, .env-seal-ring, .env-streak{ display:none !important; }

/* wrap = envelope + stamp appear and vanish AS ONE */
.env-wrap{ width:320px; height:208px; transform:none; transition:none; opacity:0; }
.env-overlay.active .env-wrap{
  opacity:1;
  animation: wrapShow .4s .12s both, wrapVanish .6s 1.95s cubic-bezier(.5,0,.75,0) forwards;
}
@keyframes wrapShow{ from{opacity:0; transform:scale(.82) rotate(-3deg);} to{opacity:1; transform:scale(1) rotate(0);} }
@keyframes wrapVanish{ 0%{opacity:1; transform:scale(1) rotate(0);} 100%{opacity:0; transform:scale(0) rotate(7deg);} }

/* the envelope: clean SVG — white body, cream flap, thin dark lines */
.env-letter{
  position:absolute; left:50%; top:50%; width:320px; height:208px; margin:-104px 0 0 -160px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 208'%3E%3Crect x='4' y='4' width='312' height='200' rx='10' fill='%23fdfcf9' stroke='%230c0a07' stroke-width='3'/%3E%3Cpath d='M9 197 L160 116 L311 197' fill='none' stroke='%230c0a07' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M9 13 L160 122 L311 13 Z' fill='%23f0e9db' stroke='%230c0a07' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  filter:drop-shadow(6px 11px 22px rgba(0,0,0,.4));
  transform-origin:center center; z-index:8; opacity:1;
  border:none; box-shadow:none; padding:0; overflow:visible;
}

/* logo as a SEAL pressed into the centre (just the "hit"; the wrap does the vanish) */
.env-stamp{
  position:absolute !important; left:50% !important; top:50% !important;
  width:96px !important; height:96px !important; margin:0 !important;
  padding:0 !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%,-50%); transform-origin:center center;
  z-index:12; opacity:0; pointer-events:none;
  filter:drop-shadow(2px 4px 6px rgba(0,0,0,.45));
  background:none !important; border:none !important;
}
.env-overlay.active .env-stamp{ animation:sealPress .5s .75s cubic-bezier(.2,1.7,.4,1) forwards; }
@keyframes sealPress{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(3) rotate(-14deg); filter:blur(4px); }
  55%{ opacity:1; transform:translate(-50%,-50%) scale(.9) rotate(-5deg); filter:blur(0); }
  75%{ transform:translate(-50%,-50%) scale(1.06) rotate(-7deg); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-6deg); }
}

/* =====================================================================
   8. ★ MORE / HARDER SCROLL-IN ANIMATIONS
   site.js adds .js-anim to <html> (no JS = content stays visible).
   ===================================================================== */
.js-anim [data-anim] .section-header{ opacity:0; }
[data-anim].anim-in .section-header{ opacity:1; animation:headerPunch .5s .05s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes headerPunch{ 0%{opacity:0; transform:translateY(26px) scale(.92) rotate(-1.5deg); filter:blur(4px);} 60%{filter:blur(0);} 100%{opacity:1; transform:none;} }

.js-anim .areas-section .area-entry{ opacity:0; }
.areas-section.anim-in .area-entry{ opacity:1; animation:entrySlam .6s cubic-bezier(.18,1.5,.32,1) both; }
.areas-section.anim-in .area-entry:nth-child(1){ animation-delay:.10s; --er:0deg; }
.areas-section.anim-in .area-entry:nth-child(2){ animation-delay:.20s; --er:2deg; }
.areas-section.anim-in .area-entry:nth-child(3){ animation-delay:.30s; --er:0deg; }
.areas-section.anim-in .area-entry:nth-child(4){ animation-delay:.40s; --er:0deg; }
.areas-section.anim-in .area-entry:nth-child(5){ animation-delay:.50s; --er:-1.8deg; }
.areas-section.anim-in .area-entry:nth-child(6){ animation-delay:.60s; --er:0deg; }
.areas-section.anim-in .area-entry:nth-child(7){ animation-delay:.70s; --er:0deg; }
.areas-section.anim-in .area-entry:nth-child(8){ animation-delay:.80s; --er:0deg; }
@keyframes entrySlam{
  0%{opacity:0; transform:translateY(-60px) rotate(calc(var(--er,0deg) - 10deg)) scale(.7); filter:blur(7px);}
  55%{opacity:1; filter:blur(0); transform:translateY(6px) rotate(var(--er,0deg)) scale(1.03);}
  100%{opacity:1; transform:translateY(0) rotate(var(--er,0deg)) scale(1);}
}
.values-section.anim-in .value-card{ animation:throwNote .6s var(--vd,0s) cubic-bezier(.18,1.5,.32,1) both; }
.values-grid .value-card:nth-child(2){ --vd:.08s; } .values-grid .value-card:nth-child(3){ --vd:.16s; }
.values-grid .value-card:nth-child(4){ --vd:.24s; } .values-grid .value-card:nth-child(5){ --vd:.32s; }
.values-grid .value-card:nth-child(6){ --vd:.40s; } .values-grid .value-card:nth-child(7){ --vd:.48s; }
.mv-section.anim-in .mv-card-mission{ animation:throwNoteMission .65s .05s cubic-bezier(.18,1.5,.32,1) both; }
.mv-section.anim-in .mv-card-vision{ animation:throwNoteVision .65s .22s cubic-bezier(.18,1.5,.32,1) both; }

/* =====================================================================
   9. ★ MOBILE-FIRST RESPONSIVE — make it slap on a phone
   ===================================================================== */
@media (max-width:768px){
  .header-inner{ padding:0 1rem; min-height:62px; gap:.5rem; }
  .main-nav{ display:none; }
  .hamburger{ display:flex; margin-left:auto; }
  .site-logo{ transform:translateY(34px); }
  .site-logo-img{ height:92px; }
  .lang-toggle{ gap:8px; }

  .hero-slogan{ font-size:1rem; padding:0 1rem; }
  .slide-paper{ padding:1.4rem 1.3rem 1.6rem; }
  .hero-slide-1 .slide-title,
  .hero-slide-2 .slide-title,
  .hero-slide-3 .slide-title,
  .hero-slide-4 .slide-title{ font-size:clamp(1.9rem,9vw,2.8rem); line-height:.96; }
  .slide-desc{ font-size:.96rem !important; line-height:1.6 !important; }

  .areas-entries{ grid-template-columns:1fr !important; gap:1.6rem; padding:0 1rem; }
  .area-entry{ padding:1.1rem 1.1rem 1.3rem !important; }
  .section-title, .punk-heading{ padding-left:1rem; padding-right:1rem; }
  .punk-letter{ height:38px !important; }

  .preview-grid{ grid-template-columns:1fr !important; padding:0 1rem; }
  .contact-grid{ grid-template-columns:1fr !important; gap:2rem; padding:0 1rem; }
  .contact-section, .areas-section, .preview-section, .values-section,
  .team-section, .blog-preview-section{ padding-left:.6rem; padding-right:.6rem; }

  .deco-sticker{ width:90px !important; opacity:.5 !important; }

  .mv-cards{ grid-template-columns:1fr !important; gap:1.4rem; }
  .team-grid{ grid-template-columns:1fr !important; }
  /* About: somewhat narrower value + team cards, centered */
  .values-grid .value-card{ width:320px; max-width:100%; justify-self:center; }
  .team-grid .team-card{ width:340px; max-width:100%; justify-self:center; }
  /* About: headphones sticker removed on phones.
     Compound selector (2 classes) so it beats the later .deco-sticker{display:block} rule. */
  .deco-sticker.about-headphones-sticker{ display:none !important; }
  /* About: the "Naše vrednosti" sticker rides OVER the cards (highest z), not behind them.
     The section must not clip it, and it must out-rank the cards' z-index:1. */
  .values-section{ overflow:visible !important; }
  .deco-sticker.values-front-sticker{ z-index:60 !important; opacity:1 !important; }
  .footer-top{ flex-direction:column; gap:1.5rem; }
  .footer-links-grid{ grid-template-columns:1fr !important; }

  .area-entry,.value-card,.project-card,.mv-card,.contact-info-card,
  .contact-form,.slide-paper{ box-shadow:4px 4px 0 var(--ink) !important; }

  .env-scene{ transform:scale(.82); }
  .area-modal-paper{ width:94vw !important; }
}

@media (max-width:430px){
  .hero-slide-1 .slide-title,.hero-slide-2 .slide-title,
  .hero-slide-3 .slide-title,.hero-slide-4 .slide-title{ font-size:clamp(1.7rem,8.5vw,2.3rem); }
  .mobile-menu-overlay .mobile-nav-link{ font-size:clamp(2.1rem,13vw,3.2rem); }
  .section-label{ font-size:.66rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}

/* ============================================================
   ★  REFINEMENTS PASS (feedback) — calmer grain, mobile polish,
      calmer menu, fewer tilts. Appended last → wins.
   ============================================================ */

/* (a) Kill the speckled halftone dots; keep only a soft vignette
   so the navbar/torn edges don't show black dots. */
body::after{
  background:
    radial-gradient(125% 85% at 50% 50%, transparent 60%, rgba(0,0,0,0.14) 100%) !important;
  opacity:0.55 !important;
  mix-blend-mode:normal !important;
}

/* define throwNote (used by value scroll-ins) so it isn't a no-op */
@keyframes throwNote{
  0%   { opacity:0; transform:translateY(34px) rotate(-4deg) scale(.92); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
/* MV cards: throw in AND settle CROOKED (desktop) — keeps the tilt after the anim */
@keyframes throwNoteMission{
  0%   { opacity:0; transform:translateY(40px) rotate(-9deg) scale(.9); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(22px) rotate(-4.5deg) scale(1); }
}
@keyframes throwNoteVision{
  0%   { opacity:0; transform:translateY(40px) rotate(8deg) scale(.9); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(0) rotate(3.5deg) scale(1); }
}
.values-section:not(.anim-in) .value-card,
.mv-section:not(.anim-in) .mv-card{ opacity:0; }

/* ---- About / cards: not EVERYTHING crooked ---- */
.value-card{ transform:none; }
.value-card:nth-child(3n){ transform:rotate(-1.2deg); }
.value-card:nth-child(5n){ transform:rotate(1deg); }
.team-card:first-child{ transform:none; }
.team-card:last-child{ transform:none; }
.about-deco-card{ transform:rotate(-1deg); }
.about-deco-card:nth-child(2){ transform:rotate(1deg); }
.about-area-tag{ --rot:0deg; }
.about-area-tag:nth-child(3n){ --rot:-1.4deg; }
.about-area-tag:nth-child(4n){ --rot:1.4deg; }

/* =====================================================================
   ★  MOBILE MENU — calmer: heading-style links with breathing room,
      B&W blurred sticker backdrop (replaces the busy poster wall).
   ===================================================================== */
.mm-wall{ background:none !important; opacity:1 !important; }
.mm-sticker{
  position:absolute; pointer-events:none; user-select:none;
  filter:grayscale(1) blur(2px) brightness(1.4) contrast(.9);
  opacity:.18;
  z-index:0;
  transform:rotate(var(--mr,0deg));
  animation: mmDrift var(--mmdur,11s) ease-in-out infinite;
  animation-delay: var(--mmdelay, 0s);
}
@keyframes mmDrift{
  0%,100%{ transform:rotate(var(--mr,0deg)) translate(0,0); }
  50%    { transform:rotate(calc(var(--mr,0deg) + 3deg)) translate(7px,-9px); }
}
.mobile-menu-overlay{
  gap:1.7rem !important;
  background-image:radial-gradient(120% 70% at 50% -10%, rgba(123,45,139,.30), transparent 62%) !important;
}
.mobile-menu-overlay .mobile-nav-link{
  display:block !important;
  font-family:var(--font-built), Impact, sans-serif !important;
  font-style:italic; font-weight:700;
  font-size:clamp(1.7rem,8vw,2.7rem) !important;
  letter-spacing:.05em; line-height:1 !important;
  color:var(--paper-cream) !important;
  text-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1.5deg);
}
.mobile-menu-overlay .mobile-nav-link:nth-child(even){ transform:rotate(1.5deg); }
.mobile-menu-overlay .mobile-nav-link:hover{ color:var(--neon-pop) !important; }
.mm-poster{ display:none !important; }   /* no more text scraps */

/* =====================================================================
   ★  MOBILE POLISH (<=768px)
   ===================================================================== */
@media (max-width:768px){
  /* (1/2) torn-paper dividers: render taller so the displaced grain
     reads as a few soft bumps instead of a squished line of specks */
  /* no header bottom border on phones */
  .site-header{ border-bottom:none !important; }
  /* header torn edge: stretch the SVG to 500vw so the jagged wave flattens out;
     clip it so there is no horizontal scroll */
  .header-torn-edge{ overflow:hidden !important; }
  .header-torn-edge svg{ height:58px !important; width:500vw !important; max-width:none !important; }
  /* section torn dividers flattened the same way as the header (500vw) */
  .section-torn-top, .section-torn-bottom, .preview-torn-top, .footer-torn-top, .mv-torn-top{ overflow:hidden !important; }
  .section-torn-top svg,
  .section-torn-bottom svg,
  .preview-torn-top svg,
  .mv-torn-top svg,
  .footer-torn-top svg{ height:60px !important; width:500vw !important; max-width:none !important; }
  .hero-torn-bottom svg{ height:76px !important; }

  /* (3) HERO: full-screen image (100vh) with the SAME overlay as desktop +
     torn-paper bottom; the note is glued onto the bottom of the photo (~15% overlap) */
  .hero-section{ height:auto !important; min-height:0 !important; background:var(--paper-cream); }
  .hero-slides{ height:78vh; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3.5vh)); }
  .hero-content{ display:none !important; }              /* image-only slider on phones */
  /* image focus to the RIGHT */
  /* per-slide horizontal focus */
  .hero-slide-1::before{ background-position:70% center !important; }
  .hero-slide-3::before{ background-position:57% center !important; }
  .hero-slide-2::before,.hero-slide-4::before{ background-position:75% center !important; }
  /* overlay intentionally NOT overridden here → inherits the desktop rgba(0,0,0,.6) */
  /* slogan / typewriter a touch higher, centered */
  .hero-slogan-wrapper{ top:12vh !important; left:1rem !important; right:1rem !important; text-align:center !important; }
  .hero-slogan{ max-width:none !important; font-size:.95rem !important; padding:.35rem .8rem !important;
    background:rgba(12,10,7,.34); border-radius:2px; backdrop-filter:blur(2px); }
  /* random twinkling sparkles over the photo, tinted to the active slide colour */
  .hero-sparkles{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
  .hero-spark-star{
    position:absolute; line-height:0; opacity:0; transform:scale(0);
    text-shadow:0 0 6px currentColor, 0 0 12px currentColor;
    animation:sparkPop 1.5s ease-in-out forwards;
  }
  @keyframes sparkPop{
    0%   { opacity:0;  transform:scale(0)    rotate(0deg); }
    25%  { opacity:1;  transform:scale(1.15) rotate(12deg); }
    60%  { opacity:.85; }
    100% { opacity:0;  transform:scale(.2)   rotate(45deg); }
  }
  /* slide dots sitting just above the note */
  .hero-nav{ top:50vh !important; bottom:auto !important; }
  /* no torn paper on mobile — gentle slant on the image bottom instead */
  .hero-torn-bottom{ display:none !important; }
  /* sticky note = the active slide's actual .slide-paper (cloned in by JS with
     the hero-slide-N class), so it is styled IDENTICALLY to the desktop card.
     The note itself is just a transparent positioning wrapper, glued ~22% over. */
  .hero-mobile-note{
    display:block !important; position:relative; z-index:6;
    margin:-22vh 1.1rem 2rem;
    background:transparent !important;
    border:none !important; box-shadow:none !important; padding:0 !important;
  }
  .hero-mobile-note::before, .hero-mobile-note::after{ content:none !important; }
  .hero-mobile-note .slide-paper{ width:100%; }
  /* reserve a constant note area so a longer/shorter slide note never shifts
     the content below it (the note sits in-flow; min-height keeps the page stable) */
  .hero-mobile-note{ min-height:46vh; }
  .hero-mobile-note .slide-desc{
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* (4) the decorative "letter" under the hero must not show on phones */
  .letter-at-transition, .letter-img{ display:none !important; }

  /* (5) area cards: mostly flat (a few tilted), bigger gap */
  .areas-entries{ gap:2.4rem !important; }
  .areas-entries .area-entry{ transform:none !important; }
  .areas-entries .area-entry:nth-child(3n){ transform:rotate(-1.4deg) !important; }
  .areas-section.anim-in .area-entry{ --er:0deg !important; }
  .areas-section.anim-in .area-entry:nth-child(3n){ --er:-1.4deg !important; }

  /* (6) stickers FULLY visible on phones (opacity 1), behind content, gently animated,
     clipped to the section so they never cause sideways scroll */
  .deco-sticker{ display:block !important; opacity:1 !important; z-index:0 !important; width:104px !important; }
  .areas-section, .preview-section, .contact-section,
  .blog-preview-section, .mv-section, .team-section, .values-section{ overflow:clip; }
  .area-entry, .project-card, .value-card, .blog-card-featured,
  .blog-card-small, .contact-info-card, .contact-form, .mv-card, .team-card{
    position:relative; z-index:1;
  }

  /* tighten the gap between the hero and the "what we do" section */
  .hero-mobile-note{ margin-bottom:.5rem !important; }
  .areas-section{ padding-top:0 !important; }
  .areas-section .section-torn-top{ margin-bottom:.8rem !important; }

  /* back-to-top: smaller on phones (z-index already keeps it below the menu) */
  .back-to-top{ width:34px !important; height:34px !important; bottom:14px !important; right:14px !important; left:auto !important; gap:0 !important; }
  .back-to-top span{ display:none !important; }
  .back-to-top .bi{ font-size:0.85rem !important; }
}

/* =====================================================================
   ★  AREA MODAL — photo + sticker (esp. mobile)
   ===================================================================== */
/* Decorative sticker stamped on the letter — shown on all sizes */
.area-modal-sticker{
  position:absolute; top:-40px; right:-14px; width:104px; height:auto;
  z-index:6; pointer-events:none; user-select:none;
  transform:rotate(9deg);
  filter:drop-shadow(2px 5px 10px rgba(0,0,0,0.4));
  opacity:0;
  animation:mstkPop .5s 1.95s cubic-bezier(.2,1.7,.4,1) forwards, sticker-float 7s 2.6s ease-in-out infinite;
}
@keyframes mstkPop{
  0%{ opacity:0; transform:rotate(-18deg) scale(.3); }
  60%{ opacity:1; transform:rotate(12deg) scale(1.12); }
  100%{ opacity:1; transform:rotate(9deg) scale(1); }
}

@media (max-width:720px){
  .area-modal-scene{ width:94vw; max-width:430px; }
  .area-modal-paper{ width:100% !important; max-width:none !important; margin-top:70px !important; border:none !important; }

  /* photo sits BEHIND the letter, black & white, pushed up so it peeks high; no frame */
  .area-modal-bg-img{
    display:block !important;
    position:absolute !important;
    left:50% !important; top:50% !important;
    width:90% !important; height:auto !important; max-width:none !important;
    transform:translate(-50%,-100%) rotate(-5deg) !important;
    object-fit:cover;
    filter:grayscale(1) contrast(1.05) !important;
    border:none !important;
    box-shadow:4px 6px 18px rgba(0,0,0,.45);
    opacity:1 !important;
    z-index:0 !important;
  }
  .area-modal-bg-img.img-appear{ animation:bgBehind .6s .1s ease-out both !important; }
  @keyframes bgBehind{
    0%  { opacity:0; transform:translate(-50%,-108%) rotate(-8deg) scale(.92); }
    100%{ opacity:1; transform:translate(-50%,-100%) rotate(-5deg) scale(1); }
  }
  /* sticker OVER the letter, bottom-left corner, a bit lower */
  .area-modal-sticker{ top:auto !important; bottom:-36px !important; left:-12px !important; right:auto !important; width:92px; z-index:7; }

  /* reduced padding + SEAMLESS: no tape, no fold shadow, no dashed footer line —
     the two halves read as one compact paper */
  .modal-fold-top{ padding:1.3rem 1.2rem .5rem !important; min-height:0 !important; box-shadow:none !important; border:none !important; }
  .modal-fold-bot{ padding:.3rem 1.2rem 1.3rem !important; min-height:0 !important; border:none !important; }
  .area-modal-tape{ display:none !important; }
  .area-modal-title{ font-size:2.1rem !important; min-height:0 !important; }
  .area-modal-body{ min-height:0 !important; margin-bottom:.6rem !important; }
  .modal-deco{ display:none; }
  .area-modal-footer{ justify-content:center !important; border-top:none !important; padding-top:.2rem !important; }
  .area-modal-footer .btn-scrap{ font-size:.95rem; padding:.4rem 1rem; }
}

/* CTA on the area cards: center it on phones so the pencil box never
   spills past the card edge */
@media (max-width:768px){
  .area-entry-cta{ margin:0 auto !important; }
}

/* hero message note: desktop hides it (mobile rule above uses !important) */
.hero-mobile-note{ display:none; }

/* =====================================================================
   ★  OUR WORK (Projekti & Radionice) — mobile polish
   ===================================================================== */
@media (max-width:768px){
  /* no bottom margin/padding on phones */
  .preview-section{ margin-bottom:0 !important; padding-bottom:0 !important; }

  /* drop the big "shadow" heading (PROJEKTI + & Radionice) on phones */
  .preview-section .editorial-heading{ display:none !important; }
  .preview-section .section-header{ margin-bottom:1.4rem; }

  /* cards: FIXED, uniform size (image + clamped body), centered */
  .preview-grid{ gap:1.7rem; }
  .preview-grid .project-card{ width:300px !important; max-width:88vw; margin-left:auto !important; margin-right:auto !important; }
  .preview-grid .project-card-img,
  .preview-grid .project-card-img-placeholder{ height:150px !important; }
  .preview-grid .project-card-body{ padding:.9rem 1.1rem 1rem !important; height:120px; overflow:hidden; }
  .preview-grid .project-card-title{ font-size:1.02rem; margin-bottom:.35rem; }
  .preview-grid .project-card-desc{
    font-size:.85rem; margin-bottom:0;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }

  /* tabs: stacked, centered, spaced — bold display-font pills, two colours */
  .preview-tabs{ flex-direction:column; align-items:center; gap:.75rem; margin-bottom:2.2rem; }
  .preview-tab{
    width:82%; max-width:300px; border-radius:30px !important;
    padding:.75rem 1.4rem;
    font-family:var(--font-built), Impact, sans-serif !important; font-style:italic; font-weight:700;
    font-size:1rem; letter-spacing:.09em; text-transform:uppercase;
    border:2.5px solid var(--purple-main); background:transparent; color:var(--purple-main);
    box-shadow:none; transition:transform .15s ease, box-shadow .2s, background .2s, color .2s;
  }
  .preview-tab.active{ background:linear-gradient(135deg,var(--purple-light),var(--purple-dark)); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(123,45,139,.45); transform:translateY(-1px) scale(1.02); }
  .preview-tab[data-tab="workshops"]{ border-color:var(--green-main); color:var(--green-main); }
  .preview-tab[data-tab="workshops"].active{ background:linear-gradient(135deg,var(--green-light),var(--green-dark)); color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(59,125,74,.45); }

  /* CTAs: stacked, centered, spaced — striking gradient pills with arrow + shine */
  .preview-cta{ display:flex !important; flex-direction:column; align-items:center; gap:.9rem; margin-top:2.4rem; }
  .preview-cta .btn-scrap{
    width:82% !important; max-width:300px !important; margin:0 !important;
    border:none !important; border-radius:30px !important; text-align:center;
    padding:.92rem 1.4rem !important; color:#fff !important;
    font-family:var(--font-built), Impact, sans-serif !important; font-style:italic; font-weight:700;
    font-size:1rem !important; letter-spacing:.08em; text-transform:uppercase;
    background:linear-gradient(135deg, var(--purple-light), var(--purple-dark)) !important;
    box-shadow:0 7px 18px rgba(74,26,107,.42) !important;
    position:relative; overflow:hidden;
    transition:transform .15s ease, box-shadow .2s !important;
  }
  .preview-cta .btn-scrap::after{ content:' \2192'; }   /* arrow */
  .preview-cta .btn-scrap::before{
    content:''; position:absolute; top:0; left:-65%; width:48%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-18deg); animation:btnShine 3.6s ease-in-out infinite;
  }
  @keyframes btnShine{ 0%,100%{ left:-65%; } 55%{ left:135%; } }
  .preview-cta .btn-scrap:active{ transform:translateY(1px) !important; }
  .preview-cta .btn-scrap:last-child{
    background:linear-gradient(135deg, var(--green-light), var(--green-dark)) !important;
    box-shadow:0 7px 18px rgba(27,94,32,.42) !important;
  }
}

/* =====================================================================
   ★  CONTACT + BLOG PREVIEW — mobile polish
   ===================================================================== */
@media (max-width:768px){
  /* CONTACT: allow stickers to ride up past the top edge (no horizontal scroll) */
  .contact-section{ overflow-x:clip !important; overflow-y:visible !important; }

  /* CONTACT: remove the faint "?" watermark (the shadow text) */
  .contact-info-card::before{ content:none !important; }

  /* "Reach out!" info card — not tilted */
  .contact-info-card{ transform:none !important; }

  /* "Kontakt" heading as plain text (no drop-shadow) */
  .contact-heading{ text-shadow:none !important; }

  /* form — not tilted, full 100vw width, no side margins/padding, bigger gap above */
  .contact-form{
    transform:none !important;
    width:auto !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    margin-top:1.9rem !important;
    padding-left:0 !important; padding-right:0 !important;
    border-left:none !important; border-right:none !important;
    box-shadow:0 -2px 12px rgba(0,0,0,.12) !important;
  }
  /* fields pushed right of the red notebook margin line */
  .contact-form .form-group, .contact-form .admin-form-grid{ padding-left:3.9rem !important; padding-right:1.3rem !important; }
  /* Name/Email live inside .admin-form-grid → kill their inner padding so all
     four fields line up at the same left edge (no double indent) */
  .contact-form .admin-form-grid .form-group{ padding-left:0 !important; padding-right:0 !important; }
  /* send button centered */
  .contact-form .btn-scrap{ display:block !important; margin:1.4rem auto 0 !important; }
  /* inputs at 16px so iOS/Android don't auto-zoom on focus */
  .form-control{ font-size:16px !important; }

  /* BLOG preview: no top padding / margin */
  .blog-preview-section{ padding-top:0 !important; margin-top:0 !important; }

  /* blog cards a touch narrower, centered */
  .blog-preview-grid .blog-card-featured,
  .blog-preview-grid .blog-card-small{ max-width:330px; width:100%; margin-left:auto !important; margin-right:auto !important; }
}

/* =====================================================================
   ★  MISSION & VISION — mobile: separated, prettier cards
   ===================================================================== */
@media (max-width:768px){
  .mv-section{ padding:4.6rem 1.1rem 5.4rem !important; }
  .mv-content{ max-width:100% !important; }
  .mv-header{ margin-bottom:2.3rem !important; }
  .mv-header-title{ font-size:clamp(1.8rem,8.5vw,2.9rem) !important; letter-spacing:0.01em !important; white-space:nowrap; }
  .mv-header-amp{ margin:0 0.12em !important; }

  /* stack with real breathing room between the two cards */
  .mv-cards{ flex-direction:column; align-items:center; gap:1.9rem !important; padding:.4rem 0 0 !important; }
  .mv-card + .mv-card{ margin-top:0 !important; }

  .mv-card{
    width:100% !important; max-width:430px !important; margin:0 !important;
    padding:2.1rem 1.7rem 2.2rem !important;
    background:rgba(255,255,255,0.09) !important;
    border:1px solid rgba(255,255,255,0.17) !important;
    border-radius:4px !important;
    box-shadow:0 14px 36px rgba(0,0,0,0.55) !important;
    position:relative; overflow:hidden;
  }
  /* colored accent bar across the top of each card */
  .mv-card::before{
    content:''; position:absolute; left:0; right:0; top:0; height:4px; z-index:1;
  }
  /* gentle opposite tilts for that scrapbook feel */
  .mv-card-mission{ transform:rotate(-1.4deg) !important; }
  .mv-card-vision{ transform:rotate(1.4deg) !important; }
  .mv-card-mission::before{ background:linear-gradient(90deg,var(--green-main),var(--green-light)); }
  .mv-card-vision::before{ background:linear-gradient(90deg,var(--purple-main),var(--purple-light)); }

  /* tint the eyebrow + its divider to match each card */
  .mv-card-mission .mv-card-eyebrow{ color:var(--green-light) !important; border-bottom-color:rgba(92,173,110,0.32) !important; }
  .mv-card-vision .mv-card-eyebrow{ color:var(--purple-light) !important; border-bottom-color:rgba(168,85,201,0.34) !important; }
  .mv-card-eyebrow{ font-size:.72rem !important; }
  .mv-card-heading{ font-size:1.05rem !important; }
  .mv-card p{ font-size:.93rem !important; line-height:1.75 !important; }
}

/* =====================================================================
   ★  STANDALONE "AREA OF WORK" PAGES
   Each is a big sticky note whose full-page colour matches its hero slide
   background (green / yellow / purple / blue) and whose TYPOGRAPHY matches
   that slide's personality. Reached only from the hero buttons.
   Inline vars: --page --accent --accent-dark --tape
   ===================================================================== */
.areapage{
  position:relative;
  overflow:hidden;
  padding:4rem 1.5rem 6rem;
  background:
    radial-gradient(125% 80% at 82% -12%, rgba(255,255,255,.38), transparent 55%),
    radial-gradient(110% 75% at -10% 115%, rgba(0,0,0,.12), transparent 55%),
    var(--page);
}
/* faint paper grain so the flat colour never looks digital */
.areapage::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.6; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
/* oversized watermark glyph (clipped by the section) */
.areapage-deco{
  position:absolute; top:-2.8rem; right:-1.5rem; z-index:0;
  font-size:clamp(11rem,30vw,23rem); line-height:1;
  color:var(--accent-dark); opacity:.12;
  transform:rotate(-12deg);
  pointer-events:none; user-select:none;
}
.areapage-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; }

.areapage-back{
  display:block; width:fit-content;
  margin:0 0 1.9rem auto;          /* push to the right edge of the column */
  font-family:var(--font-type);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--accent-dark); text-decoration:none;
  padding:.42rem .95rem;
  background:#fff; box-shadow:2px 3px 8px rgba(0,0,0,.22);
  transform:rotate(1deg);
  transition:transform .2s ease, box-shadow .2s ease;
}
.areapage-back:hover{ transform:rotate(1deg) translateY(-2px); box-shadow:3px 5px 13px rgba(0,0,0,.3); }

.areapage-note{
  position:relative;
  background:rgba(255,252,245,0.98);
  padding:3.2rem 2.7rem 3rem;
  box-shadow:8px 12px 36px rgba(0,0,0,.32);
  transform:rotate(-.5deg);
  border-radius:2px;
}
.areapage-note::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 38%);
}
.areapage-tape{
  position:absolute; top:-15px; left:50%;
  transform:translateX(-50%) rotate(-1.5deg);
  width:130px; height:30px; background:var(--tape);
  box-shadow:0 2px 5px rgba(0,0,0,.12);
}
.areapage-tape::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent, transparent 6px,
    rgba(0,0,0,0.06) 6px, rgba(0,0,0,0.06) 7px);
}
.areapage-eyebrow{
  position:relative; z-index:1; display:inline-block;
  font-family:var(--font-type); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.18em;
  color:#fff; background:var(--accent);
  padding:.32em 1em; margin-bottom:1.1rem;
  transform:rotate(-1.2deg);
  box-shadow:2px 3px 8px rgba(0,0,0,.22);
}
.areapage-title{
  position:relative; z-index:1;
  font-family:var(--font-bask);
  font-size:clamp(2rem,5vw,3.4rem);
  color:var(--accent-dark); line-height:1.12; margin:0 0 1.3rem;
}
.areapage-intro{
  position:relative; z-index:1;
  font-family:var(--font-body); font-weight:600;
  font-size:1.12rem; line-height:1.7; color:var(--text-dark);
  margin:0 0 1.6rem;
}
.areapage-body{
  position:relative; z-index:1;
  font-family:var(--font-type);
  font-size:1rem; line-height:1.95; color:#2a2a2a; margin:0 0 1.2rem;
}
/* image placeholders — client drops real photos in later */
.areapage-img{
  position:relative; z-index:1; overflow:hidden;
  border-radius:3px;
  background:rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.2);
}
.areapage-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.areapage-img figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.7rem .8rem .45rem;
  font-family:var(--font-type); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em;
  color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.6));
}
.areapage-img-lg{ aspect-ratio:16/9; margin:1.7rem 0; }
.areapage-img-row{ display:flex; gap:1.2rem; margin:1.7rem 0; }
.areapage-img-row .areapage-img{ flex:1; aspect-ratio:4/3; }

.areapage-cta{
  position:relative; z-index:1; display:inline-block; margin-top:1.5rem;
  font-family:var(--font-built); font-style:italic; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none;
  color:#fff; background:var(--accent);
  padding:.85rem 1.8rem; box-shadow:3px 3px 0 var(--accent-dark);
  transition:transform .15s ease, box-shadow .15s ease;
}
.areapage-cta:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--accent-dark); }

/* ---------- per-area PERSONALITY (matches each hero slide) ---------- */

/* 1 — Sustainability · GREEN · typewriter notebook */
.areapage--sustainability .areapage-note{
  background:
    repeating-linear-gradient(transparent, transparent 1.9rem,
      rgba(80,100,200,0.07) 1.9rem, rgba(80,100,200,0.07) 1.95rem),
    rgba(252,252,242,0.98);
  border-left:3px solid rgba(200,130,130,0.3);
  transform:rotate(-.6deg);
}
.areapage--sustainability .areapage-title,
.areapage--sustainability .areapage-intro,
.areapage--sustainability .areapage-body{ font-family:var(--font-type); }
.areapage--sustainability .areapage-title{ font-size:clamp(1.7rem,4.2vw,2.7rem); line-height:1.25; }
.areapage--sustainability .areapage-intro{ font-weight:400; font-size:1.02rem; }

/* 2 — Animals · YELLOW · heavy display */
.areapage--animals .areapage-note{ transform:rotate(.9deg); background:rgba(255,251,240,0.98); }
.areapage--animals .areapage-title{
  font-family:var(--font-big); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.4rem,6.5vw,4.4rem); line-height:.92; letter-spacing:.01em;
}
.areapage--animals .areapage-eyebrow{ font-family:var(--font-punk); font-size:.82rem; letter-spacing:.22em; }

/* 3 — Art · PURPLE · editorial italic */
.areapage--art .areapage-note{ transform:rotate(1.3deg); background:rgba(246,245,255,0.97); }
.areapage--art .areapage-title{ font-family:var(--font-bask); font-style:italic; line-height:1.16; }
.areapage--art .areapage-eyebrow{
  font-family:var(--font-bask); font-style:italic; text-transform:none;
  letter-spacing:.06em; font-size:.92rem;
}
.areapage--art .areapage-intro,
.areapage--art .areapage-body{ font-family:var(--font-bask); font-style:italic; font-size:1.1rem; line-height:1.65; }
.areapage--art .areapage-intro{ font-weight:400; }

/* 4 — Self-care · BLUE · handwritten marker */
.areapage--mental .areapage-note{ transform:rotate(-1.8deg); background:rgba(252,253,255,0.98); }
.areapage--mental .areapage-title{ font-family:var(--font-marker); font-size:clamp(2rem,5vw,3.2rem); line-height:1.2; }
.areapage--mental .areapage-eyebrow{ font-family:var(--font-hand); font-weight:700; text-transform:none; font-size:1rem; letter-spacing:.04em; }
.areapage--mental .areapage-intro,
.areapage--mental .areapage-body{ font-family:var(--font-hand); font-weight:600; font-size:1.22rem; line-height:1.5; color:#243; }
.areapage--mental .areapage-intro{ color:var(--accent-dark); }

@media (max-width:768px){
  .areapage{ padding:2.4rem 1rem 4rem; }
  .areapage-note{ padding:2.4rem 1.4rem 2.4rem; }
  .areapage--sustainability .areapage-note,
  .areapage--animals .areapage-note,
  .areapage--art .areapage-note,
  .areapage--mental .areapage-note{ transform:rotate(-.6deg); }
  .areapage-title{ font-size:clamp(1.8rem,9vw,2.6rem); }
  .areapage--animals .areapage-title{ font-size:clamp(2.2rem,11vw,3.2rem); }
  .areapage-deco{ font-size:clamp(9rem,38vw,14rem); top:-1.5rem; right:-2rem; }
  .areapage-img-row{ flex-direction:column; }
  .areapage-img-row .areapage-img{ aspect-ratio:16/10; }
}

/* =====================================================================
   ★  TEAM CARD email link (About)
   ===================================================================== */
.team-card-email{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1rem;
  font-family:var(--font-type); font-size:.82rem; font-weight:600;
  color:var(--purple-main); text-decoration:none; word-break:break-all;
  transition:color .15s, transform .15s;
}
.team-card-email:hover{ color:var(--purple-dark); transform:translateX(2px); }
.team-card-email .bi{ font-size:.95em; flex-shrink:0; }

/* =====================================================================
   ★  Inputs at 16px on phones → iOS/Android never zoom on focus
   ===================================================================== */
@media (max-width:768px){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),
  textarea, select, .form-control{ font-size:16px !important; }
}

/* =====================================================================
   ★  404 / NOT FOUND — ransom punk letters with a gentle float
   ===================================================================== */
.nf-page{
  position:relative; min-height:70vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:4rem 1.2rem 5rem; gap:.4rem;
}
.nf-letters{ display:flex; align-items:flex-end; justify-content:center; gap:.4rem; margin-bottom:1.4rem; }
.nf-letter{
  height:clamp(80px,18vw,170px); width:auto; display:block;
  filter:drop-shadow(3px 5px 0 rgba(12,10,7,.5));
  transform:rotate(var(--r,0deg));
  animation:nfFloat 3.4s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
@keyframes nfFloat{
  0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); }
  50%{ transform:translateY(-12px) rotate(calc(var(--r,0deg) * -1)); }
}
.nf-eyebrow{
  font-family:var(--font-type); text-transform:uppercase; letter-spacing:.2em;
  font-size:.8rem; color:var(--purple-main); margin:0 0 .3rem;
}
.nf-title{
  font-family:var(--font-built); font-style:italic; font-weight:700;
  font-size:clamp(1.6rem,5vw,2.6rem); color:var(--ink); margin:0 0 .6rem; text-transform:uppercase;
}
.nf-text{
  font-family:var(--font-type); font-size:1rem; line-height:1.7;
  color:var(--text-medium); max-width:480px; margin:0 auto 1.8rem;
}
.nf-actions{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }