:root {
  --orange: #e5552e; --yellow: #f4b926; --green: #37a86a; --blue: #3a8bc2;
  --ink: #23323a; --cream: #fffaf3; --paper: #fffdf9; --line: rgba(35,50,58,.14);
  --display: 'Fredoka', sans-serif; --body: 'DM Sans', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--body); overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section-pad { padding: 124px 0; }
.site-noise { position: fixed; inset: 0; pointer-events: none; opacity: .038; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); }
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 112px; }
.brand { width: 178px; display: block; }
.brand img { width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; gap: 32px; font-size: 13px; font-weight: 600; }
.main-nav > a:not(.nav-cta) { opacity: .72; transition: opacity .2s ease; }
.main-nav > a:not(.nav-cta):hover { opacity: 1; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 13px 18px; border-radius: 999px; transition: transform .2s ease, background .2s ease; }
.nav-cta:hover { transform: translateY(-2px); background: var(--orange); }
.menu-toggle { display: none; border: 0; background: transparent; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px auto; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.hero { min-height: 760px; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 145px; background: radial-gradient(circle at 82% 35%, rgba(58,139,194,.10), transparent 29%), var(--cream); }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 78px; align-items: center; position: relative; z-index: 2; }
.hero-copy { max-width: 600px; }
.eyebrow { margin: 0 0 20px; text-transform: uppercase; letter-spacing: .18em; font-size: 11px; font-weight: 700; color: var(--orange); }
.eyebrow-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); margin-right: 7px; }
.eyebrow-green { color: var(--green); }.eyebrow-orange { color: var(--orange); }.eyebrow-blue { color: var(--blue); }.eyebrow-yellow { color: #b27c00; }.eyebrow-white { color: rgba(255,255,255,.78); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; }
h1 { font-size: clamp(52px, 7vw, 94px); line-height: .98; margin-bottom: 30px; max-width: 690px; }
h1 em { color: var(--orange); font-style: normal; }
.hero-lead { max-width: 460px; font-size: 18px; line-height: 1.6; color: rgba(35,50,58,.72); }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 38px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 21px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 13px 25px rgba(35,50,58,.12); }
.button-primary { background: var(--orange); color: #fff; }.button-primary:hover { background: #cc4522; }
.button-outline { border: 1px solid var(--ink); margin-top: 18px; }.button-outline:hover { background: var(--ink); color: #fff; }
.button-light { background: #fff; color: var(--ink); }.button-light:hover { background: var(--yellow); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 5px; }
.text-link i { transition: transform .2s; }.text-link:hover i { transform: translateX(4px); }
.hero-note { display: flex; align-items: center; gap: 10px; color: rgba(35,50,58,.5); font-size: 11px; margin-top: 70px; text-transform: uppercase; letter-spacing: .13em; }
.note-line { width: 36px; height: 1px; background: var(--blue); }
.hero-visual { position: relative; width: min(100%, 540px); justify-self: end; }
.hero-frame { position: relative; overflow: hidden; border-radius: 210px 210px 24px 24px; background: #f2e5d1; box-shadow: 0 22px 60px rgba(35,50,58,.16); transition: transform .45s ease; }
.hero-frame img, .hero-frame video { width: 100%; height: 580px; object-fit: cover; object-position: center; display: block; }
.hero-sticker { position: absolute; right: 20px; bottom: 24px; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: var(--yellow); color: var(--ink); transform: rotate(9deg); font-family: var(--display); font-size: 15px; line-height: 1.05; text-align: center; }
.hero-sticker span:last-child { color: var(--orange); }
.floating-block { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; font-size: 28px; font-family: var(--display); color: #fff; box-shadow: 0 14px 24px rgba(35,50,58,.16); animation: float 4s ease-in-out infinite; }
.floating-block-orange { left: -25px; top: 25%; background: var(--orange); }.floating-block-blue { right: -22px; top: 12%; background: var(--blue); animation-delay: -1.5s; }
@keyframes float { 50% { transform: translateY(-13px) rotate(7deg); } }
.hero-shape { position: absolute; border-radius: 50%; opacity: .26; }.hero-shape-a { width: 170px; height: 170px; background: var(--yellow); left: -72px; bottom: 18%; }.hero-shape-b { width: 22px; height: 22px; background: var(--green); right: 8%; top: 20%; }
.scroll-cue { position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 11px; color: rgba(35,50,58,.46); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }.scroll-cue span { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: blink 1.8s infinite; } @keyframes blink { 50% { opacity: .15; } }
.manifesto { background: var(--paper); }.manifesto-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8vw; }.section-index { font-family: var(--display); color: var(--orange); font-size: 22px; padding-top: 10px; }.section-index span { display: block; margin-top: 14px; color: rgba(35,50,58,.4); font: 700 10px var(--body); letter-spacing: .15em; text-transform: uppercase; }
h2 { font-size: clamp(42px, 5.3vw, 76px); line-height: .99; margin-bottom: 26px; }.manifesto-copy > p:not(.eyebrow) { max-width: 590px; font-size: 17px; color: rgba(35,50,58,.68); line-height: 1.7; }
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; border-top: 1px solid var(--line); margin-top: 60px; padding-top: 22px; }.principles > div { display: flex; flex-direction: column; gap: 18px; }.principles strong { color: var(--orange); font-size: 11px; }.principles span { font-family: var(--display); font-size: 19px; line-height: 1.05; }.principles small { color: rgba(35,50,58,.43); font: 500 10px var(--body); letter-spacing: .02em; }
.color-break { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }.color-word { padding: 28px 10px; text-align: center; font: 500 clamp(21px,3vw,43px) var(--display); color: #fff; }.color-orange { background: var(--orange); }.color-yellow { background: var(--yellow); color: var(--ink); }.color-green { background: var(--green); }.color-blue { background: var(--blue); }
.curation { background: var(--cream); }.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 62px; }.section-heading h2 { max-width: 590px; margin-bottom: 0; }.section-heading > p { max-width: 330px; color: rgba(35,50,58,.63); line-height: 1.65; margin-bottom: 4px; }.curation-grid { display: grid; grid-template-columns: 1.25fr .85fr .85fr; gap: 20px; align-items: start; }.curation-card { background: #fff; border-radius: 17px; overflow: hidden; box-shadow: 0 7px 25px rgba(35,50,58,.05); }.card-image { overflow: hidden; background: #eee4d4; }.card-image img { width: 100%; height: 255px; object-fit: cover; transition: transform .5s; }.card-large .card-image img { height: 405px; }.curation-card:hover .card-image img { transform: scale(1.04); }.card-meta { padding: 22px 23px 25px; }.card-meta > span { color: var(--orange); font-size: 11px; font-weight: 700; }.card-meta h3 { margin: 13px 0 8px; font-size: 23px; }.card-meta p { color: rgba(35,50,58,.58); line-height: 1.5; font-size: 13px; margin-bottom: 0; }.curation-footer { display: flex; align-items: center; gap: 20px; margin-top: 42px; }.curation-footer p { max-width: 370px; color: rgba(35,50,58,.58); font-size: 12px; line-height: 1.5; margin: 0; }.curation-footer .text-link { margin-left: auto; }.tiny-mark { width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; background: var(--green); }
.store-film { background: #f4eadc; }.store-film-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 48px; }.store-film-head h2 { max-width: 600px; margin-bottom: 0; }.store-film-head > p { max-width: 325px; color: rgba(35,50,58,.63); line-height: 1.65; margin-bottom: 3px; }.store-film-main { position: relative; height: min(58vw, 590px); min-height: 340px; overflow: hidden; border-radius: 24px; background: #e7d6bd; }.store-film-main video { width: 100%; height: 100%; object-fit: contain; display: block; background: #e7d6bd; }.film-caption { position: absolute; left: 25px; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 11px 14px; background: rgba(255,255,255,.89); border-radius: 999px; font-size: 11px; font-weight: 700; }.film-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: blink 1.8s infinite; }.store-film-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }.mini-film { position: relative; height: 225px; overflow: hidden; border-radius: 18px; background: #e7d6bd; }.mini-film video { width: 100%; height: 100%; object-fit: contain; display: block; background: #e7d6bd; }.mini-film span { position: absolute; left: 17px; bottom: 16px; padding: 8px 11px; border-radius: 999px; background: rgba(255,255,255,.89); font: 700 11px var(--body); }
.story { background: #f4eadc; }.story-grid { display: grid; grid-template-columns: .94fr 1fr; gap: 10vw; align-items: center; }.story-image-wrap { position: relative; }.story-image { width: 100%; height: 630px; object-fit: cover; border-radius: 220px 220px 20px 20px; }.image-caption { position: absolute; left: -24px; bottom: 25px; max-width: 190px; padding: 15px 17px; background: var(--blue); color: #fff; font: 500 14px/1.1 var(--display); transform: rotate(-4deg); }.story-copy > p:not(.eyebrow) { max-width: 480px; color: rgba(35,50,58,.65); line-height: 1.7; font-size: 16px; }.story-copy h2 { max-width: 480px; }
.gallery { background: var(--paper); }.gallery-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 55px; }.gallery-head h2 { max-width: 570px; margin-bottom: 0; }.gallery-grid { display: grid; grid-template-columns: 1.1fr .8fr .7fr; grid-auto-rows: 225px; gap: 15px; }.gallery-item { position: relative; overflow: hidden; border-radius: 16px; background: #eee4d4; }.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }.gallery-item:hover img { transform: scale(1.05); }.gallery-wide { grid-column: span 2; }.gallery-tall { grid-row: span 2; }.gallery-item span { position: absolute; left: 18px; bottom: 18px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 11px; font-weight: 700; }
.visit { padding-top: 70px; background: var(--paper); }.visit-panel { min-height: 440px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 65px 7vw; background: var(--green); border-radius: 25px; overflow: hidden; position: relative; }.visit-panel:after { content: ''; position: absolute; width: 320px; height: 320px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; right: 20%; top: -38%; }.visit-copy { position: relative; z-index: 1; max-width: 560px; color: #fff; }.visit-copy h2 { font-size: clamp(40px, 5vw, 69px); }.visit-copy p:not(.eyebrow) { color: rgba(255,255,255,.82); line-height: 1.6; max-width: 450px; } .visit-address { display: flex; align-items: flex-start; gap: 10px; max-width: 500px; margin: 20px 0 24px; color: #fff; font-size: 13px; line-height: 1.55; } .visit-address i { margin-top: 3px; flex: 0 0 auto; }.visit-art { width: 260px; height: 260px; position: relative; z-index: 1; flex: 0 0 260px; }.visit-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 10px solid rgba(255,255,255,.34); }
.site-footer { background: var(--paper); padding: 72px 0 42px; }.footer-inner { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: center; border-top: 1px solid var(--line); padding-top: 35px; }.footer-brand { width: 145px; }.footer-inner p { color: rgba(35,50,58,.54); font-size: 13px; margin: 0; }.footer-links { display: flex; gap: 18px; justify-content: end; font-size: 12px; font-weight: 600; }.footer-links a:hover { color: var(--orange); }.footer-inner small { grid-column: 1/-1; color: rgba(35,50,58,.42); font-size: 10px; margin-top: 25px; }
.whatsapp-float { animation: whatsappPulse 2.2s infinite; position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 50; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 19px; border-radius: 999px; background: #25d366; color: #fff; font: 700 13px var(--body); box-shadow: 0 14px 25px rgba(14, 91, 47, .24); transition: transform .2s ease, box-shadow .2s ease; }.whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(14, 91, 47, .32); }.whatsapp-icon-wrapper { width: 28px; height: 28px; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transform: none !important; rotate: 0deg !important; }.whatsapp-icon-wrapper i, .whatsapp-float i, .whatsapp-float svg, .whatsapp-float svg path { display: block; transform: none !important; rotate: 0deg !important; }.whatsapp-icon-wrapper i { font-size: 27px; line-height: 1; } @keyframes whatsappPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(37,211,102,.43); } 50% { box-shadow: 0 0 0 12px rgba(37,211,102,0); } }
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .8s ease, transform .8s ease; }.reveal-delay-1 { transition-delay: .12s; }.reveal-delay-2 { transition-delay: .22s; }.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) { .container { width: min(100% - 36px, 680px); }.header-inner { min-height: 88px; }.brand { width: 142px; }.menu-toggle { display: block; position: relative; z-index: 41; }.main-nav { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 100px 30px 50px; background: var(--cream); opacity: 0; pointer-events: none; transform: translateY(-12px); transition: opacity .25s, transform .25s; }.main-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }.main-nav > a:not(.nav-cta) { padding: 16px 5px; font: 500 31px var(--display); opacity: 1; border-bottom: 1px solid var(--line); }.main-nav .nav-cta { margin-top: 19px; width: max-content; padding: 14px 19px; }.menu-toggle[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; }.menu-toggle[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }.hero { min-height: auto; padding: 135px 0 95px; }.hero-grid, .manifesto-grid, .story-grid { grid-template-columns: 1fr; gap: 58px; }.hero-copy { max-width: 600px; }.hero-visual { justify-self: center; max-width: 520px; }.hero-frame img, .hero-frame video { height: min(110vw, 560px); }.manifesto-grid { gap: 15px; }.section-index { padding-top: 0; }.store-film-head { display: block; }.store-film-head > p { margin-top: 22px; }.store-film-main { height: min(62vw, 520px); }.story-image-wrap { max-width: 520px; }.story-image { height: min(120vw, 600px); }.gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }.gallery-wide { grid-column: span 2; }.gallery-tall { grid-row: span 1; }.visit-panel { padding: 50px 35px; }.visit-art { width: 190px; height: 190px; flex-basis: 190px; }.footer-inner { grid-template-columns: 1fr 1fr; }.footer-links { justify-content: start; }.footer-inner small { grid-column: 1/-1; } }
@media (max-width: 560px) { .container { width: calc(100% - 32px); }.section-pad { padding: 84px 0; } h1 { font-size: clamp(47px, 14vw, 68px); }.hero-lead { font-size: 16px; }.hero-actions { gap: 20px; margin-top: 30px; }.hero-note { margin-top: 44px; }.floating-block { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }.floating-block-orange { left: -13px; }.floating-block-blue { right: -10px; }.hero-frame { border-radius: 130px 130px 17px 17px; }.hero-frame img, .hero-frame video { height: 430px; }.hero-sticker { width: 83px; height: 83px; font-size: 12px; right: 12px; bottom: 14px; }.principles { grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 40px; }.color-word { padding: 19px 3px; font-size: 18px; }.section-heading, .gallery-head { display: block; margin-bottom: 38px; }.section-heading > p { margin-top: 23px; }.curation-grid { grid-template-columns: 1fr; }.card-large .card-image img, .card-image img { height: 270px; }.curation-footer { display: block; }.curation-footer .text-link { margin-top: 20px; }.tiny-mark { margin-bottom: 15px; }.store-film-main { height: 330px; min-height: 0; border-radius: 18px; }.store-film-secondary { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }.mini-film { height: 190px; border-radius: 14px; }.story-image { height: 430px; border-radius: 130px 130px 18px 18px; }.image-caption { left: 5px; bottom: 12px; font-size: 12px; max-width: 165px; }.gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 165px; gap: 9px; }.gallery-wide { grid-column: span 2; }.gallery-item span { left: 10px; bottom: 10px; font-size: 9px; padding: 7px 9px; }.visit { padding-top: 35px; }.visit-panel { min-height: auto; display: block; padding: 44px 25px 30px; }.visit-copy h2 { font-size: 44px; }.visit-art { margin: 38px auto 0; width: 180px; height: 180px; }.footer-inner { grid-template-columns: 1fr; gap: 21px; }.footer-links { flex-wrap: wrap; }.footer-inner small { grid-column: auto; margin-top: 8px; }.whatsapp-float { right: max(15px, env(safe-area-inset-right)); bottom: max(15px, env(safe-area-inset-bottom)); min-height: 52px; padding: 11px 15px; }.whatsapp-label { display: none; }.whatsapp-icon-wrapper { width: 29px; height: 29px; flex-basis: 29px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }