/* Bella Agroturizëm · concept by KERA Tech Solutions
   Rebuilt section by section after Ellmerer's Hof (ellmerers-hof.com):
   white page, charcoal #43413E, one script display face tilted -6deg, gradient circles that grow on scroll,
   blob-masked slides, jelly "point" buttons, a morphing charcoal footer wave and a blob menu overlay. */

:root {
  --ink: #1d1d1b;
  --char: #43413E;
  --green: #8C9645;          /* header theme (the reference's #989f4b, nudged toward vine leaves) */
  --sun-a: #F2B66E;          /* circle 1: apricot -> terracotta roof tile (reference: #ecb273 -> #f66b6b) */
  --sun-b: #E0644E;
  --grape-a: rgba(160, 118, 204, .6);  /* circle 2: grape (reference: #009ee2 blue) */
  --grape-b: #6A3F9E;
  --script: 'Sacramento', 'Segoe Script', cursive;
  --sans: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --logo: 'Lilita One', 'Arial Black', sans-serif;
  --ease: cubic-bezier(.76, 0, .24, 1);
  --back: cubic-bezier(.34, 1.56, .64, 1);
  --anti: cubic-bezier(.36, 0, .66, -.56);
  --gx: 70px;                /* container-fluid side padding */
  --hdr: 135px;
}
@media (max-width: 991.98px) { :root { --gx: 50px; } }
@media (max-width: 767.98px) { :root { --gx: 20px; --hdr: 105px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
img { -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1rem; }
ul { list-style: none; margin: 0; padding: 0; }
address { font-style: normal; }
.defs { position: absolute; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 10000; background: var(--char); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--char); outline-offset: 4px; border-radius: 4px; }
.footer :focus-visible, .menu :focus-visible { outline-color: #fff; }

/* ---------- type: the reference's BeautyStyle script, always tilted -6deg ---------- */
h1, h2, h3, .h1, .h2, .h3 { font-family: var(--script); font-weight: 400; line-height: 1.2; margin: 0 0 .5rem; -webkit-text-stroke: .35px currentColor; }
.h1, .h2, .h3, .tilt, h2, h3 { transform: rotate(-6deg); }
.h1 { font-size: calc(2rem + 3.57vw); }
.h2 { font-size: calc(1.86rem + 1.94vw); }
.h3 { font-size: calc(1.83rem + 1.53vw); }
@media (min-width: 1200px) { .h1 { font-size: 4.675rem; } .h2 { font-size: 3.3rem; } .h3 { font-size: 2.975rem; } }
p { font-size: 1.375rem; font-weight: 600; }

/* ---------- links: strike-through that draws in on hover (reference a:before) ---------- */
.lnk, .social-links a, .f-lower a, .f-end a, .badge a { position: relative; display: inline-block; }
.lnk::before, .social-links a::before, .f-lower a::before, .f-end a::before, .badge a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: .08em; margin-top: -.04em;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 100%;
  transition: transform .25s var(--ease); will-change: transform; z-index: 1; pointer-events: none;
}
.social-links a::before { height: .15em; margin-top: -.075em; }
.lnk:hover::before, .social-links a:hover::before, .f-lower a:hover::before, .f-end a:hover::before, .badge a:hover::before { transform: scaleX(1); transform-origin: 0 0; }
.lnk.active::before { transform: scaleX(1); transform-origin: 0 0; }
.lnk.active:hover::before { transform: scaleX(0); transform-origin: 100% 100%; }

/* ---------- reveal: framer-motion variants of the reference (y .5rem, scale .7 -> 1, back-out) ---------- */
.js .rv { opacity: 0; transform: translateY(.5rem) scale(.7); transition: opacity .25s var(--back), transform .25s var(--back); }
.js .rv.in { opacity: 1; transform: none; transition-duration: .5s; transition-delay: calc(.2s + .05s * var(--i, 0)); }
html.js:not(.js-ready) .rv { animation: rvFallback .01s 3.5s forwards; }
@keyframes rvFallback { to { opacity: 1; transform: none; } }

/* ---------- loader ---------- */
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 9999; background: #fff; transition: opacity .45s ease; animation: loaderOut .4s 3s forwards; }
.loaded .loader { opacity: 0; pointer-events: none; }
@keyframes loaderOut { to { opacity: 0; visibility: hidden; } }

/* ---------- fixed logo (EH -> BA) + header bar ---------- */
.logo-fixed { position: fixed; left: 50px; top: 0; padding-top: 44px; z-index: 998; transition: transform .25s var(--ease); }
.logo-mark { display: block; width: 58px; }
.logo-mark svg { width: 100%; height: auto; }
@media (hover: hover) { .logo-mark:hover { animation: shake 2s infinite; } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
.wa-mini { position: absolute; left: 100%; top: 46px; margin-left: 18px; width: 30px; height: 30px; color: var(--char); }
.wa-mini svg { width: 100%; height: 100%; }
@media (min-width: 992px) { .wa-mini { display: none; } }
@media (max-width: 767.98px) { .logo-fixed { left: 20px; padding-top: 30px; } .logo-mark { width: 50px; } .wa-mini { top: 36px; margin-left: 14px; width: 28px; height: 28px; } }

.site-header {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--hdr); padding-top: 50px; z-index: 5;
  background: #fff; text-align: center; font-family: var(--script); font-size: 31px; line-height: 1.2;
  color: var(--green); transition: transform .25s var(--ease); will-change: transform;
}
.hnav { display: inline-flex; align-items: baseline; transform: rotate(-6deg); }
.js .hnav { transform: scale(.5) rotate(-6deg); opacity: 0; transition: transform .25s var(--anti), opacity .25s var(--anti); }
.js .ready .hnav { transform: scale(1) rotate(-6deg); opacity: 1; transition: transform .5s var(--back) .7s, opacity .5s var(--back) .7s; }
.hnav-mid { padding: 0 3rem; }
.hnav .lnk { -webkit-text-stroke: .3px currentColor; }
.lg-short { display: none; }
.menu-btn::before { display: none; }
.menu-btn::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 79px; height: 11px; margin-left: -39.5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 79 11'%3E%3Cpath d='M2 8.6C14 6.2 30 4.1 46 3.4c10-.4 21 .1 31 1.2-9 .1-20 .2-30 .9C33 6.5 18 8.1 4 10.1Z' fill='%238C9645' opacity='.85'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transition: transform .25s var(--ease);
}
.menu-btn:hover::after { transform: translateY(-4px); }
body.nav-up:not(.menu-open) .site-header, body.nav-up:not(.menu-open) .logo-fixed, body.nav-up:not(.menu-open) .reserve-fixed { transform: translateY(-140px); }
@media (max-width: 767.98px) {
  .site-header { padding-top: 40px; font-size: 28px; }
  .site-header .hnav { position: absolute; right: 8px; width: calc(100% - 117px); justify-content: center; }
  .hnav-mid { padding: 0 1.2rem; }
  .lg-long { display: none; } .lg-short { display: inline; }
}

/* reserve: a small jelly point at top right (desktop) */
.reserve-fixed { position: fixed !important; right: 46px; top: 20px; z-index: 6; transition: transform .25s var(--ease); }
@media (max-width: 991.98px) { .reserve-fixed { display: none !important; } }

/* ---------- point link: charcoal jelly circle with tilted script (reference PointLink) ---------- */
.point { --d: 210px; position: relative; display: flex; align-items: center; justify-content: center; width: var(--d); height: var(--d); margin: 0 auto; text-decoration: none; }
.point::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blob, var(--char)); z-index: 0; transition: transform .35s var(--back); }
.point.has-blob::after { display: none; }
.point:hover::after { transform: scale(1.04); }
.point canvas { position: absolute; left: 50%; top: 50%; width: calc(var(--d) * 1.5); height: calc(var(--d) * 1.5); transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.point > span { position: relative; z-index: 2; color: #fff; font-family: var(--script); font-size: 43px; line-height: 50px; text-align: center; transform: rotate(-6deg); -webkit-text-stroke: .3px #fff; }
.point--sm > span { font-size: 27px; line-height: 30px; }
@media (max-width: 991.98px) { .point:not(.point--sm) { --d: 170px !important; } .point:not(.point--sm) > span { font-size: 34px; line-height: 42px; } }
@media (max-width: 767.98px) { .point:not(.point--sm) { --d: 132px !important; } .point:not(.point--sm) > span { font-size: 30px; line-height: 38px; } }

/* ---------- page stack (widget-container) ---------- */
.widgets { position: relative; z-index: 0; padding-top: var(--hdr); overflow-x: clip; }
.widgets > section { padding: 75px 0; }
.widgets > section.hero { padding-top: 0; }
.widgets > section.blobs { padding: 0; }
@media (max-width: 767.98px) { .widgets > section { padding: 56px 0; } }

/* ---------- hero (FullwidthImage) ---------- */
.hero { padding-left: var(--gx) !important; padding-right: var(--gx) !important; }
.hero-box { position: relative; width: min(100%, calc((100vw - 2 * var(--gx) + 45px) * .83333 - 45px)); margin: 0 auto 40px; }
@media (max-width: 991.98px) { .hero { padding-left: 0 !important; padding-right: 0 !important; } .hero-box { width: 100%; } }
@media (max-width: 767.98px) { .hero-box { margin-bottom: 36vw; } }
.hero-img { position: relative; width: 100%; padding-bottom: 57%; }
.hero-parallax { position: absolute; inset: 0; }
.hero-parallax img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 992px) {
  .js .hero-parallax { -webkit-mask-image: url(../img/cloud-texture.png); mask-image: url(../img/cloud-texture.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 0%; mask-size: 0%; transition: -webkit-mask-size 2s ease, mask-size 2s ease; }
  .js .hero.is-in .hero-parallax { -webkit-mask-size: 200%; mask-size: 200%; }
  html.js:not(.js-ready) .hero-parallax { animation: heroFallback .01s 3.5s forwards; }
}
@keyframes heroFallback { to { -webkit-mask-size: 200%; mask-size: 200%; opacity: 1; } }
@media (max-width: 991.98px) {
  .js .hero-parallax { opacity: 0; transition: opacity .5s ease; }
  .js .hero.is-in .hero-parallax { opacity: 1; }
  html.js:not(.js-ready) .hero-parallax { animation: heroFallback .01s 3.5s forwards; }
}
.hot { position: absolute; z-index: 3; display: block; border-radius: 40% 50% 45% 55%; }
.hot-1 { left: 38%; top: 47%; width: 26%; height: 15%; }
.hot-2 { left: 69%; top: 34%; width: 14%; height: 38%; }
.hot-3 { left: 7%; top: 40%; width: 24%; height: 30%; }
@media (max-width: 767.98px) { .hot { pointer-events: none; } }

.hero-logo { position: absolute; z-index: 2; left: 50%; bottom: -13%; width: 33%; margin-left: -16.5%; padding-bottom: 23.5359%; pointer-events: none; }
@media (max-width: 991.98px) { .hero-logo { width: 40%; margin-left: -20%; padding-bottom: 28.528%; bottom: -15%; } }
@media (max-width: 767.98px) { .hero-logo { width: 68%; margin-left: -34%; padding-bottom: 48.498%; bottom: -66%; } }
.hero-logo .wm { position: absolute; left: 0; top: 0; width: 100%; height: auto; filter: drop-shadow(0 2px 0 rgba(67,65,62,.15)); }
.hero-tag { position: absolute; left: 0; bottom: 4%; width: 100%; text-align: center; font-family: var(--script); color: var(--char); }
.hero-tag > div { position: relative; }
.hero-tag span { display: block; width: 100%; white-space: nowrap; font-size: 3.02vw; line-height: 1.25; -webkit-text-stroke: .35px currentColor; transform: translateY(0) rotate(-6deg); transition: transform .5s var(--ease) .25s, opacity .5s var(--ease) .25s; }
.hero-tag span ~ span { position: absolute; left: 0; top: 100%; opacity: 0; }
.hero-logo.h1 .hero-tag span, .hero-logo.h2 .hero-tag span, .hero-logo.h3 .hero-tag span { transform: translateY(-100%) rotate(-6deg); opacity: 0; transition-delay: 0s; }
.hero-logo.h1 .hero-tag span:nth-child(2), .hero-logo.h2 .hero-tag span:nth-child(3), .hero-logo.h3 .hero-tag span:nth-child(4) { opacity: 1; }
@media (max-width: 991.98px) { .hero-tag span { font-size: 5.4vw; } }
@media (max-width: 767.98px) { .hero-tag span { font-size: 8.6vw; } .hero-tag { bottom: 0; } }
/* logo pop (LogoShow) */
.js .hero-logo .wm, .js .hero-tag { transform: scale(.6); opacity: 0; transition: transform .5s var(--anti), opacity .5s var(--anti); }
.js .hero.logo-show .hero-logo .wm, .js .hero.logo-show .hero-tag { transform: scale(1); opacity: 1; transition: transform .5s var(--back), opacity .5s var(--back); }
.js .hero.logo-show .hero-tag { transition-delay: .1s; }
html.js:not(.js-ready) .hero-logo .wm, html.js:not(.js-ready) .hero-tag { animation: rvFallback .01s 3.5s forwards; }

/* ---------- image fader: 1/2/3 + 3D card stack ---------- */
.fader-col { width: min(100% - 2 * var(--gx), 852px); margin: 0 auto; text-align: center; }
@media (max-width: 1199.98px) { .fader-col { width: min(100% - 2 * var(--gx), 960px); } }
.fader-nav { display: flex; justify-content: center; align-items: baseline; margin-bottom: .5rem; font-family: var(--script); font-size: 48px; line-height: 1.2; color: var(--ink); }
.fader-nav .lnk { -webkit-text-stroke: .35px currentColor; padding: 0 .08em; }
.fn-item:not(:last-child)::after { content: "/"; display: inline-block; padding: 0 .25em; }
.stack-wrap { position: relative; width: 100%; padding-bottom: 63.15%; margin: 80px auto 0; }
.stack { position: absolute; inset: 0; display: block; width: 100%; cursor: pointer; }
.js .stack { transform: scale(0); transition: transform .25s var(--ease); }
.js .stack.show { transform: scale(1); }
html.js:not(.js-ready) .stack { animation: rvFallback .01s 3.5s forwards; }
.card { position: absolute; inset: 0; display: block; overflow: hidden; background: #eee; }
.card img { position: absolute; left: -60px; top: -60px; width: calc(100% + 120px); height: calc(100% + 120px); max-width: none; object-fit: cover; }
@media (max-width: 767.98px) { .stack-wrap { margin-top: 48px; } .fader-nav { font-size: 42px; } }

/* ---------- text block ---------- */
.textblock { padding-left: 20px !important; padding-right: 20px !important; }
.tb-col { max-width: 865px; margin: 0 auto; text-align: center; }
.tb-col > .rv:first-child h2 { margin-bottom: 3rem; }
.tb-text { padding-top: .5rem; margin-bottom: 3rem; }
.tb-links { display: flex; flex-wrap: wrap; justify-content: center; }
.tb-links > .rv { margin: 1.5rem 3rem; }
@media (max-width: 767.98px) { p { font-size: 1.2rem; } .tb-links > .rv { margin: .5rem 1rem; } }
.textblock--quotes blockquote { margin: 0; }
.textblock--quotes .tb-text { margin-bottom: 2.4rem; }
.textblock--quotes .sig { margin: .4rem 0 0; }
.badge { font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; margin: -1rem 0 2rem; }
.badge a { color: var(--char); }

/* ---------- circles that grow with scroll (Leistungen_circle) ---------- */
.circle-holder { position: relative; width: 100%; }
.spacer { height: 150px; }
@media (max-width: 991.98px) { .spacer { height: 50px; } }
.circle { --D: 60px; position: absolute; left: 50%; top: 150px; width: var(--D); height: var(--D); margin-left: calc(var(--D) / -2); border-radius: 50%; transform-origin: 50% 0; z-index: -1; will-change: transform; }
@media (max-width: 991.98px) { .circle { top: 50px; } }
.circle--sun { background-image: linear-gradient(172deg, var(--sun-a), var(--sun-b)); }
.circle--grape { background-image: linear-gradient(0deg, var(--grape-b) 8%, var(--grape-a)); }

/* ---------- blob slider sections (Leistungen / Produkte) ---------- */
.blobs-inner { min-height: calc(100vw - 600px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 150px var(--gx) 0; text-align: center; }
@media (max-width: 991.98px) { .blobs-inner { padding-top: 90px; } }
@media (max-width: 767.98px) { .blobs-inner { padding-top: 70px; } }
.blobs-title { margin-bottom: 3rem; padding-bottom: 3rem; }
@media (max-width: 767.98px) { .blobs-title { padding-bottom: 0; } .blobs-title .h1 { font-size: 60px; padding: 0 30px; } }
.slider { position: relative; width: 55.4vw; margin: 0 auto; outline: none; }
@media (max-width: 991.98px) { .slider { width: 64vw; } }
@media (max-width: 767.98px) { .slider { width: 72vw; } .track { column-gap: 24px; } }
.track { display: flex; column-gap: 50px; touch-action: pan-y; cursor: grab; will-change: transform; }
.slider.dragging .track { cursor: grabbing; }
.slide { position: relative; flex: 0 0 100%; min-width: 0; user-select: none; }
.slide .bg { width: 100%; padding-bottom: 90%; background-repeat: no-repeat; background-size: contain; transition: transform .5s var(--ease); }
.slide .content { position: absolute; left: 0; top: 0; width: 100%; padding-bottom: 90%; z-index: 2; pointer-events: none; overflow: hidden;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transform: scale(.9); transition: transform .5s var(--ease); }
.slide .content .par { position: absolute; inset: -7%; }
.slide .content img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .5s var(--ease); }
.slide:nth-child(4n+1) .bg { background-image: url(../img/blob-1.svg); background-position: center 30%; }
.slide:nth-child(4n+1) .content { -webkit-mask-image: url(../img/blob-1.svg); mask-image: url(../img/blob-1.svg); -webkit-mask-position: center 30%; mask-position: center 30%; }
.slide:nth-child(4n+2) .bg { background-image: url(../img/blob-2.svg); background-position: center top; }
.slide:nth-child(4n+2) .content { -webkit-mask-image: url(../img/blob-2.svg); mask-image: url(../img/blob-2.svg); -webkit-mask-position: center top; mask-position: center top; }
.slide:nth-child(4n+3) .bg { background-image: url(../img/blob-3.svg); background-position: center 30%; }
.slide:nth-child(4n+3) .content { -webkit-mask-image: url(../img/blob-3.svg); mask-image: url(../img/blob-3.svg); -webkit-mask-position: center 30%; mask-position: center 30%; }
.slide:nth-child(4n+4) .bg { background-image: url(../img/blob-4.svg); background-position: center 60%; }
.slide:nth-child(4n+4) .content { -webkit-mask-image: url(../img/blob-4.svg); mask-image: url(../img/blob-4.svg); -webkit-mask-position: center 60%; mask-position: center 60%; }
.slide .logo { position: absolute; left: 50%; bottom: 0; width: 45%; margin-left: -22.5%; z-index: 3; transition: transform .5s var(--ease); }
.slide .logo .wm { width: 100%; height: auto; }
.slide .logo > .rv:last-child { position: absolute; left: 0; top: 93%; width: 100%; }
.slide .logo h3 { margin: 0 0 0 -12.5%; width: 125%; text-align: center; font-size: 3.95vw; line-height: 1.05; color: #353734; }
@media (min-width: 1400px) { .slide .logo h3 { font-size: 68px; } }
@media (max-width: 991.98px) { .slide .logo { width: 56%; margin-left: -28%; } .slide .logo h3 { font-size: 5.4vw; } }
@media (max-width: 767.98px) { .slide .logo { width: 64%; margin-left: -32%; } .slide .logo h3 { font-size: 8.4vw; width: 140%; margin-left: -20%; } }
@media (hover: hover) {
  .slide .logo:hover { transform: scale(1.1); }
  .slide .logo:hover + .rv .bg, .slide .logo:hover + .rv .content { transform: scale(.8); }
  .slide .logo:hover + .rv .content { transform: scale(.72); }
  .slide .logo:hover + .rv .content img { transform: scale(1.2); }
}
.blobs-link { margin-top: 3rem; padding-bottom: 1rem; }
@media (max-width: 767.98px) { .blobs-link { margin-top: 5.5rem; } }

/* ---------- footer: logo above a morphing charcoal wave ---------- */
.footer { position: relative; z-index: 2; margin-top: 70px; padding-top: 30vw; padding-bottom: 60px; color: #fff; }
.footer::after { content: ""; position: absolute; left: 0; width: 100%; top: calc(30vw - 5px); height: calc(100% - 30vw + 5px); background: var(--char); z-index: -1; }
.footer-wave { position: absolute; left: 0; top: 0; width: 100%; height: 30vw; overflow: hidden; z-index: -1; }
.footer-wave svg { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
@media (max-width: 991.98px) { .footer { margin-top: 160px; } .footer-wave svg { width: 200%; transform: translateY(-6%); } }
@media (max-width: 767.98px) { .footer { margin-top: 200px; } .footer-wave svg { width: 300%; transform: translateY(-10%) translateX(-5%); } }
.footer-logo-row { position: relative; width: calc(100% - 2 * var(--gx)); max-width: none; margin: 0 auto; }
.footer-logo { position: absolute; left: calc(8.333% + 22px); bottom: 0; margin-bottom: 18vw; width: 25vw; max-width: 362px; color: var(--char); }
.footer-logo .wm { width: 100%; height: auto; }
.footer-tag { margin: .6rem 0 0; font-family: var(--script); font-weight: 400; font-size: 2.6vw; line-height: 1.2; text-align: center; -webkit-text-stroke: .3px currentColor; }
@media (min-width: 1440px) { .footer-tag { font-size: 37px; } }
@media (max-width: 991.98px) { .footer-logo { left: 50%; transform: translateX(-50%); margin-bottom: 20vw; width: 326px; } .footer-logo.rv.in { transform: translateX(-50%); } .js .footer-logo.rv:not(.in) { transform: translateX(-50%) translateY(.5rem) scale(.7); } .footer-tag { font-size: 36px; } }
@media (max-width: 767.98px) { .footer-logo { width: 75%; } .footer-tag { font-size: 8vw; } }

.footer-line { display: flex; align-items: flex-start; margin: -5vw 0 170px; text-align: center; }
.f-left { width: 30%; margin-left: 16.25%; }
.f-right { width: 30%; margin-left: 15.15%; }
@media (max-width: 991.98px) {
  .footer-line { flex-direction: column; margin-bottom: 40px; margin-top: 0; padding: 0 var(--gx); }
  .f-left, .f-right { width: min(100%, 520px); margin: 0 auto; }
  .f-right { margin-top: 5rem; }
}
.f-square { position: relative; width: 100%; padding-bottom: 100%; overflow: hidden; margin: 3rem 0 0; }
.f-square img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-left h2 { margin: 2.6rem 0 1.5rem; color: #fff; }
.social-links a, .social-links span, .f-list li { font-size: 1rem; text-transform: uppercase; font-weight: 600; letter-spacing: .01em; }
.f-list { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.f-nav { font-family: var(--script); font-size: 65px; line-height: 1.1; }
.f-nav ul { display: flex; flex-direction: column; align-items: center; }
.f-nav li:not(:last-child) { margin-bottom: 120px; }
.f-nav a { -webkit-text-stroke: .35px currentColor; }
@media (max-width: 991.98px) { .f-nav { font-size: 70px; } .f-nav li:not(:last-child) { margin-bottom: 80px; } }
@media (max-width: 767.98px) { .f-nav { font-size: 58px; } .f-nav li:not(:last-child) { margin-bottom: 52px; } }
.f-lower { margin-top: 3rem; text-transform: uppercase; font-weight: 600; font-size: 1rem; line-height: 1.55; }
.f-social { display: flex; flex-wrap: wrap; justify-content: center; margin: 1.5rem 0; }
.f-social a { margin: 0 1rem; }
.f-end { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 1rem; font-size: 13px; font-weight: 600; }
.f-end > div { margin: .2rem .9rem; }
@media (max-width: 767.98px) { .f-end { font-size: 12px; } .f-lower { font-size: 14px; } }

/* ---------- menu overlay: green blob drops in from the top (Header_menuBG + efMain) ---------- */
.menu-bg { position: fixed; z-index: 20; width: 153.61vw; height: 113.51779vw; right: 0; bottom: 50px; opacity: 0; pointer-events: none;
  transform: translate(26.8vw, calc(56.76vw - 100vh + 50px));
  visibility: hidden; transition: transform .8s var(--anti), opacity .2s .6s, visibility 0s .8s; }
.menu-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.menu-open .menu-bg { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: transform .8s var(--back), opacity .2s 0s, visibility 0s 0s; }
@media (orientation: portrait) {
  .menu-bg { width: 250vh; height: 184.75vh; transform: translate(calc(23% - 50vw), calc(-100vh + 50px)); }
  .menu-open .menu-bg { transform: translate(23%, 0); }
}
.menu { position: fixed; top: 0; right: 0; width: 100%; height: calc(100vh - 250px); z-index: 23; text-align: center; color: #fff; pointer-events: none; visibility: hidden; transition: visibility 0s .8s; }
.menu-open .menu { visibility: visible; transition-delay: 0s; }
@media (max-width: 767.98px) { .menu { height: calc(100vh - 190px); } }
.menu nav { position: relative; width: 100%; height: 100%; padding-top: 50px; }
.menu ul { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.menu li { font-family: var(--script); font-size: clamp(38px, 6.4vh, 64px); line-height: 1.1; transform: scale(.6) rotate(-6deg) translateY(50%); opacity: 0; transition: transform .5s var(--anti), opacity .5s var(--anti); }
.menu li a, .menu li button { pointer-events: auto; -webkit-text-stroke: .35px currentColor; }
.menu-open .menu li { transform: scale(1) rotate(-6deg) translateY(0); opacity: 1; transition-timing-function: var(--back); }
.menu li:last-child { font-family: var(--sans); }
.menu-open .menu li:last-child { transform: none; }
.menu li.social-links { display: flex; justify-content: center; gap: 1.6rem; }
.menu li.social-links a { -webkit-text-stroke: 0; }
.menu-open .menu li:nth-child(1) { transition-delay: 0s; } .menu-open .menu li:nth-child(2) { transition-delay: .05s; }
.menu-open .menu li:nth-child(3) { transition-delay: .1s; } .menu-open .menu li:nth-child(4) { transition-delay: .15s; }
.menu-open .menu li:nth-child(5) { transition-delay: .2s; } .menu-open .menu li:nth-child(6) { transition-delay: .25s; }
.menu-open .menu li:nth-child(7) { transition-delay: .3s; }
.menu li:nth-last-child(2) { transition-delay: .05s; } .menu li:nth-last-child(3) { transition-delay: .1s; }
.menu li:nth-last-child(4) { transition-delay: .15s; } .menu li:nth-last-child(5) { transition-delay: .2s; }
.menu li:nth-last-child(6) { transition-delay: .25s; } .menu li:nth-last-child(7) { transition-delay: .3s; }

/* ---------- concept toast ---------- */
.toast { position: fixed; left: 20px; bottom: 20px; z-index: 60; max-width: min(360px, calc(100vw - 40px)); padding: 14px 46px 14px 18px; border-radius: 16px; background: var(--char); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .35s var(--back), transform .35s var(--back); }
.toast.show { opacity: 1; transform: none; }
.toast p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.45; }
.toast-x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 30px; color: #fff; }
.toast-x:hover { background: rgba(255,255,255,.12); }

/* ---------- cursor: small difference dot (fine pointers only) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; display: none; }
.cursor i { display: block; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; mix-blend-mode: difference; transition: transform .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) and (pointer: fine) { .cursor.on { display: block; mix-blend-mode: difference; } }
.cursor.hover i { transform: scale(1.4); background: transparent; box-shadow: inset 0 0 0 1px #fff; }

/* ---------- reduced motion: everything visible, no transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv, .js .hero-logo .wm, .js .hero-tag, .js .stack, .js .hnav { opacity: 1 !important; transform: none !important; }
  .js .hnav { transform: rotate(-6deg) !important; }
  .js .hero-parallax { -webkit-mask-size: 200% !important; mask-size: 200% !important; opacity: 1 !important; }
  .js .loader { display: none; }
  .cursor { display: none !important; }
}