:root {
  --ink: #170822;
  --plum: #3b0d4f;
  --purple: #74228d;
  --teal: #06a9b8;
  --teal-dark: #047787;
  --ice: #eaf9fb;
  --paper: #fbfaf8;
  --white: #fff;
  --muted: #655d69;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow: 0 24px 70px rgba(23, 8, 34, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; background: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: fixed; z-index: 20; inset: 0 0 auto; min-height: 90px; padding: 12px clamp(22px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; gap: 30px; color: var(--white); transition: .3s ease; }
.site-header.scrolled { min-height: 72px; color: var(--ink); background: rgba(251,250,248,.94); box-shadow: 0 1px 0 rgba(23,8,34,.1); backdrop-filter: blur(15px); }
.brand { display: flex; width: clamp(145px, 13vw, 180px); text-decoration: none; }
.brand img { width: 100%; height: auto; max-height: 72px; object-fit: contain; filter: drop-shadow(0 3px 12px rgba(23,8,34,.35)); transition: filter .3s ease; }
.scrolled .brand img { filter: drop-shadow(0 2px 4px rgba(23,8,34,.12)); }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); font-size: 13px; font-weight: 750; }
.site-nav a { text-decoration: none; }
.site-nav > a:not(.nav-cta) { position: relative; }
.site-nav > a:not(.nav-cta)::after { content: ''; position: absolute; inset: auto 0 -7px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: .2s ease; }
.site-nav > a:hover::after, .site-nav > a:focus-visible::after { transform: scaleX(1); }
.nav-cta { border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: 12px 20px; }
.scrolled .nav-cta { color: var(--white); border-color: var(--purple); background: var(--purple); }
.menu-toggle { display: none; border: 0; background: none; color: currentColor; }

.hero { position: relative; min-height: min(900px, 100svh); display: grid; align-items: center; overflow: hidden; color: var(--white); background: var(--ink); }
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,5,30,.94) 0%, rgba(28,8,48,.72) 32%, rgba(20,8,35,.1) 67%, rgba(20,8,35,.32) 100%), linear-gradient(0deg, rgba(10,3,18,.52), transparent 50%); }
.hero-content { position: relative; z-index: 2; width: min(650px, 88vw); margin-left: clamp(24px, 8vw, 132px); padding: 130px 0 90px; }
.eyebrow { margin: 0 0 14px; color: var(--teal); font-size: 12px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.hero .eyebrow { color: #66e6e5; }
.hero h1 { max-width: 620px; margin: 0; font: 700 clamp(55px, 7.3vw, 112px)/.84 var(--serif); letter-spacing: -.065em; text-wrap: balance; }
.hero h1 em { color: #77e4df; font-weight: 400; }
.hero-copy { max-width: 550px; margin: 28px 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: rgba(255,255,255,.84); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button { min-height: 50px; padding: 15px 23px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 999px; font-size: 13px; font-weight: 850; letter-spacing: .02em; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #71ebea; outline-offset: 4px; }
.button-primary { color: var(--white); background: linear-gradient(100deg, var(--purple), #9a2b9b); box-shadow: 0 12px 30px rgba(70,10,91,.3); }
.button-primary:hover { box-shadow: 0 16px 38px rgba(70,10,91,.42); }
.button-quiet { border: 1px solid rgba(255,255,255,.5); color: var(--white); background: rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.hero-promise { display: flex; gap: 30px; margin: 36px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.hero-promise li:not(:last-child)::after { content: '◆'; margin-left: 30px; color: #68dfdc; font-size: 7px; }
.scroll-cue { position: absolute; z-index: 3; right: 38px; bottom: 34px; color: rgba(255,255,255,.75); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; writing-mode: vertical-rl; }

.section { padding: clamp(82px, 10vw, 150px) clamp(24px, 6vw, 96px); }
.intro { background: var(--paper); }
.section-heading { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-heading h2, .story h2, .opening h2 { margin: 0; font: 700 clamp(39px, 5vw, 70px)/.98 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.section-heading > p:last-child { max-width: 570px; margin: 18px auto 0; color: var(--muted); line-height: 1.7; }
.category-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.category { position: relative; min-height: 420px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 3px 3px 34px 3px; color: var(--white); text-decoration: none; isolation: isolate; transition: transform .25s ease, box-shadow .25s ease; }
.category:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.category::before, .category::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; }
.category::before { width: 280px; height: 280px; right: -100px; top: 45px; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 0 35px rgba(255,255,255,.04), 0 0 0 70px rgba(255,255,255,.035); }
.category::after { width: 160px; height: 160px; right: -55px; bottom: -70px; background: rgba(255,255,255,.07); }
.category-collect { background: #281037; }
.category-shop { background: #086d7b; }
.category-snack { background: #6f1a77; }
.category-belong { background: #142c49; }
.category-number { font: 700 12px var(--sans); opacity: .7; }
.category-icon { width: 82px; height: 82px; margin: auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; background: rgba(255,255,255,.09); backdrop-filter: blur(6px); }
.category-icon svg { width: 44px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.category-copy strong { display: block; margin-bottom: 9px; font: 700 32px/1 var(--serif); }
.category-copy small { display: block; min-height: 36px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.5; }
.category-arrow { position: absolute; right: 24px; bottom: 24px; font-size: 20px; }

.story { min-height: 720px; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--ice); }
.story-art { position: relative; min-height: 620px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #c9f1f2, transparent 38%), linear-gradient(155deg, #10243e, #321044 76%); }
.story-art::after { content: ''; position: absolute; inset: auto -8% -18% -8%; height: 52%; background: repeating-linear-gradient(115deg, transparent 0 13px, rgba(7,150,165,.22) 14px 18px), #111d33; clip-path: polygon(0 40%, 12% 23%, 18% 50%, 27% 14%, 38% 46%, 49% 18%, 59% 51%, 69% 17%, 81% 46%, 92% 12%, 100% 42%, 100% 100%, 0 100%); }
.moon { position: absolute; top: 14%; left: 19%; width: 210px; aspect-ratio: 1; border-radius: 50%; background: #cff8f5; box-shadow: 0 0 90px rgba(99,232,226,.4); }
.mushroom { position: absolute; z-index: 2; width: 180px; height: 240px; bottom: 10%; }
.mushroom::before { content: ''; position: absolute; width: 180px; height: 90px; border-radius: 90px 90px 30px 30px; background: radial-gradient(circle at 30% 35%, white 0 5px, transparent 6px), radial-gradient(circle at 68% 30%, white 0 8px, transparent 9px), radial-gradient(circle at 54% 68%, white 0 5px, transparent 6px), #762484; box-shadow: inset 0 -12px 0 #08a3b5; }
.mushroom::after { content: ''; position: absolute; width: 53px; height: 155px; left: 66px; top: 75px; background: linear-gradient(90deg, #5cdae0, #a7ffff 48%, #31aebb); clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); }
.mushroom-one { left: 10%; transform: rotate(-8deg); }
.mushroom-two { right: 6%; bottom: 2%; transform: scale(.7) rotate(8deg); }
.story-sign { position: absolute; z-index: 4; top: 25%; right: 12%; padding: 18px 30px; color: var(--ink); background: #73dce0; border: 5px solid var(--ink); box-shadow: 8px 8px 0 rgba(255,255,255,.14); font: italic 700 25px/1.05 var(--serif); transform: rotate(5deg); }
.story-copy { padding: clamp(60px, 8vw, 130px); align-self: center; }
.story-lead { margin: 30px 0 20px; color: var(--ink); font: 500 clamp(19px, 2vw, 25px)/1.5 var(--serif); }
.story-copy > p:not(.eyebrow):not(.story-lead) { color: var(--muted); line-height: 1.75; }
.story-values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.story-values span { padding: 9px 13px; border: 1px solid rgba(23,8,34,.18); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.opening { position: relative; overflow: hidden; background: var(--paper); }
.opening::before { content: ''; position: absolute; width: 520px; aspect-ratio: 1; right: -110px; top: -150px; border: 1px solid rgba(4,119,135,.13); border-radius: 50%; box-shadow: 0 0 0 55px rgba(4,119,135,.035), 0 0 0 110px rgba(116,34,141,.025); }
.opening-card { position: relative; max-width: 1000px; margin: 0 auto; padding: clamp(45px, 7vw, 90px); text-align: center; color: var(--white); background: var(--plum); border-radius: 2px 2px 60px 2px; box-shadow: var(--shadow); }
.opening-card::before { content: '?'; position: absolute; left: 5%; top: -14%; color: rgba(111,229,226,.1); font: italic 300 280px/1 var(--serif); }
.opening .eyebrow { color: #6ee5e2; }
.opening-card > p:not(.eyebrow):not(.fine-print) { max-width: 620px; margin: 22px auto 30px; color: rgba(255,255,255,.74); line-height: 1.7; }
.fine-print { margin: 18px 0 0; color: rgba(255,255,255,.46); font-size: 11px; }

.brand-signature { position: relative; min-height: 280px; padding: 48px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: minmax(40px, 1fr) minmax(250px, 500px) auto minmax(40px, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); overflow: hidden; color: var(--white); background: linear-gradient(135deg, #08717f, #0a8793 48%, #087785); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(20,5,34,.18); isolation: isolate; }
.brand-signature::before { content: ''; position: absolute; z-index: -1; width: 480px; aspect-ratio: 1; left: 50%; top: 50%; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.025), 0 0 0 120px rgba(33,8,54,.035); transform: translate(-50%, -50%); }
.brand-signature img { width: 100%; max-height: 170px; object-fit: contain; opacity: .76; filter: saturate(.45) contrast(1.35) brightness(.88) drop-shadow(0 2px 0 rgba(255,255,255,.12)) drop-shadow(0 13px 18px rgba(13,43,56,.3)); mix-blend-mode: luminosity; }
.brand-signature p { max-width: 230px; margin: 0; color: rgba(255,255,255,.86); font: italic 500 clamp(20px, 2.2vw, 31px)/1.25 var(--serif); text-wrap: balance; }
.brand-signature-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4)); }
.brand-signature-rule:last-child { background: linear-gradient(90deg, rgba(255,255,255,.4), transparent); }
.site-footer { padding: 70px clamp(24px, 7vw, 110px) 32px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 25px 50px; align-items: end; color: rgba(255,255,255,.7); background: #11091d; }
.footer-brand { width: 106px; height: 106px; object-fit: contain; }
.site-footer p { margin: 0; font-size: 13px; }
.footer-links { display: flex; gap: 25px; font-size: 12px; font-weight: 800; }
.site-footer small { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.12); font-size: 10px; }
.verity-credit { grid-column: 1 / -1; justify-self: center; margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.48); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transition: color .2s ease; }
.verity-credit:hover { color: var(--white); }
.verity-credit img { width: 32px; height: 32px; object-fit: contain; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category { min-height: 350px; }
  .story { grid-template-columns: 1fr; }
  .story-art { min-height: 520px; }
  .brand-signature { grid-template-columns: minmax(30px, 1fr) minmax(260px, 430px) minmax(190px, auto) minmax(30px, 1fr); }
}

@media (max-width: 720px) {
  .site-header { min-height: 76px; padding: 10px 20px; }
  .brand { width: 150px; }
  .menu-toggle { position: relative; z-index: 22; width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; }
  .menu-toggle span:not(.sr-only) { width: 23px; height: 2px; background: currentColor; transition: .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { 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); }
  .site-nav { position: fixed; inset: 0; padding: 130px 28px 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; color: var(--white); background: var(--ink); font: 700 32px/1 var(--serif); transform: translateX(100%); transition: transform .3s ease; }
  .site-nav.open { transform: none; }
  .nav-cta { margin-top: auto; font: 800 13px var(--sans); border-color: var(--teal); background: var(--purple); }
  .site-header.menu-open { color: var(--white); }
  .hero { min-height: 820px; align-items: end; }
  .hero-image { object-position: 64% center; opacity: .66; }
  .hero-wash { background: linear-gradient(0deg, rgba(16,5,28,.98) 5%, rgba(25,6,40,.72) 58%, rgba(20,8,35,.08) 100%); }
  .hero-content { width: auto; margin: 0; padding: 130px 24px 86px; }
  .hero h1 { font-size: clamp(52px, 16vw, 76px); }
  .hero-copy { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .hero-promise { gap: 0; justify-content: space-between; font-size: 9px; }
  .hero-promise li:not(:last-child)::after { content: ''; margin: 0; }
  .scroll-cue { display: none; }
  .section { padding: 78px 20px; }
  .section-heading { text-align: left; }
  .category-grid { grid-template-columns: 1fr; }
  .category { min-height: 270px; }
  .category-icon { width: 70px; height: 70px; margin: 0 auto; }
  .story-art { min-height: 420px; }
  .moon { width: 150px; }
  .mushroom-one { left: 0; bottom: 2%; transform: scale(.75) rotate(-8deg); }
  .mushroom-two { right: -7%; }
  .story-sign { right: 6%; font-size: 20px; }
  .story-copy { padding: 70px 24px; }
  .opening-card { padding: 54px 24px; border-radius: 2px 2px 36px 2px; }
  .brand-signature { min-height: 300px; padding: 54px 24px; grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .brand-signature img { max-width: 350px; max-height: 130px; margin: 0 auto; }
  .brand-signature p { max-width: none; }
  .brand-signature-rule { width: min(180px, 50vw); justify-self: center; }
  .brand-signature-rule:last-child { display: none; }
  .site-footer { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
  .footer-links { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}