
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-input: var(--border);
  --color-ring: var(--mint);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

:root {
  --background: oklch(0.26 0.105 318);
  --foreground: oklch(0.97 0.012 315);
  --primary: oklch(0.86 0.15 176);
  --primary-foreground: oklch(0.27 0.105 318);
  --muted: oklch(0.46 0.09 316);
  --muted-foreground: oklch(0.83 0.025 310);
  --border: oklch(0.93 0.02 310 / 0.18);
  --mint: oklch(0.86 0.15 176);
  --plum: oklch(0.47 0.17 317);
  --deep-plum: oklch(0.2 0.08 316);
  --cream: oklch(0.97 0.012 315);
  --glass: oklch(0.97 0.012 315 / 0.08);
  --glass-strong: oklch(0.26 0.105 318 / 0.72);
  --shadow: oklch(0.08 0.03 315 / 0.36);
  --radius: 1.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: "DM Sans", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--mint); color: var(--deep-plum); }

.site-shell { min-height: 100vh; overflow: hidden; position: relative; background: radial-gradient(110% 70% at 8% 0%, var(--plum), var(--background) 47%, var(--deep-plum)); }
.site-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
.ambient { position: absolute; pointer-events: none; border-radius: 999px; filter: blur(90px); opacity: .28; }
.ambient-one { width: 28rem; height: 28rem; background: var(--mint); top: -12rem; left: -12rem; animation: float-one 16s ease-in-out infinite; }
.ambient-two { width: 32rem; height: 32rem; background: var(--plum); top: 38rem; right: -18rem; animation: float-two 19s ease-in-out infinite; }
.site-header, main, .footer { width: min(100% - 2.5rem, 72rem); margin-inline: auto; position: relative; z-index: 1; }
.site-header { min-height: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; }
.brand-mark { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--mint) 45%, transparent); background: var(--glass); color: var(--mint); font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; backdrop-filter: blur(16px); }
.brand span:last-child { display: grid; line-height: 1.05; }
.brand strong { font-family: "Fraunces", Georgia, serif; font-size: 1.18rem; font-weight: 600; }
.brand small { margin-top: .25rem; color: color-mix(in oklab, var(--mint) 78%, transparent); text-transform: uppercase; font-size: .59rem; letter-spacing: .16em; }
.main-nav { display: flex; gap: 2rem; color: color-mix(in oklab, var(--cream) 72%, transparent); font-size: .88rem; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: var(--mint); }

.hero { min-height: calc(100vh - 5.5rem); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); padding: 2.5rem 0 5rem; }
.status { width: fit-content; display: flex; align-items: center; gap: .55rem; margin: 0 0 1.5rem; padding: .45rem .8rem; border: 1px solid var(--border); border-radius: 99px; background: var(--glass); color: var(--mint); font-size: .76rem; backdrop-filter: blur(16px); }
.status span { width: .48rem; height: .48rem; border-radius: 50%; background: var(--mint); animation: pulse 2.4s ease-out infinite; }
.eyebrow { margin: 0 0 .8rem; color: var(--mint); text-transform: uppercase; font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
h1, h2, h3 { margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 450; letter-spacing: 0; }
h1 { max-width: 12ch; font-size: clamp(3.5rem, 6.4vw, 5.8rem); line-height: .98; }
h1 em { display: block; color: var(--mint); font-weight: 400; }
.hero-text { max-width: 34rem; margin: 1.6rem 0 0; color: color-mix(in oklab, var(--cream) 70%, transparent); font-size: 1.04rem; line-height: 1.72; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border: 1px solid transparent; border-radius: 99px; padding: .7rem 1.15rem; cursor: pointer; font-size: .88rem; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--mint); color: var(--primary-foreground); box-shadow: 0 12px 35px color-mix(in oklab, var(--mint) 20%, transparent); }
.button-primary:hover { background: var(--cream); }
.button-ghost { border-color: var(--border); background: var(--glass); color: var(--cream); backdrop-filter: blur(16px); }
.button-ghost:hover { background: color-mix(in oklab, var(--cream) 14%, transparent); border-color: color-mix(in oklab, var(--mint) 45%, transparent); }
.rating-line { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 2rem; color: color-mix(in oklab, var(--cream) 55%, transparent); font-size: .82rem; }
.rating-line .stars { color: var(--mint); letter-spacing: .08em; }.rating-line strong { color: var(--cream); }.rating-line i { width: 1px; height: 1.2rem; margin-inline: .65rem; background: var(--border); }
.hero-visual { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4/5; border: 1px solid var(--border); border-radius: 2rem; box-shadow: 0 28px 70px var(--shadow); }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, color-mix(in oklab, var(--deep-plum) 94%, transparent)); }
.hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-visual figcaption { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; display: grid; gap: .3rem; padding: 1.5rem; border-top: 1px solid var(--border); background: var(--glass-strong); backdrop-filter: blur(18px); }
.hero-visual small { color: var(--mint); text-transform: uppercase; font-size: .64rem; font-weight: 700; letter-spacing: .18em; }.hero-visual strong { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; }.hero-visual span { color: color-mix(in oklab, var(--cream) 68%, transparent); font-size: .83rem; }
.highlight-grid, .product-grid, .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.glass-panel, .product-card, .review-card, .visit { border: 1px solid var(--border); background: var(--glass); backdrop-filter: blur(18px); }
.glass-panel { min-height: 8.5rem; display: grid; align-content: center; gap: .35rem; padding: 1.5rem; border-radius: var(--radius); }
.glass-panel strong { color: var(--mint); font-family: "Fraunces", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.55rem); font-weight: 500; }.glass-panel span { color: color-mix(in oklab, var(--cream) 60%, transparent); font-size: .83rem; }
.section { padding: 7rem 0 2rem; scroll-margin-top: 2rem; }
.section-heading { max-width: 40rem; margin-bottom: 2.25rem; }.section-heading h2, .visit h2 { font-size: clamp(2.35rem, 4vw, 3.8rem); line-height: 1.05; }.section-heading > p:last-child { max-width: 34rem; margin: 1rem 0 0; color: color-mix(in oklab, var(--cream) 62%, transparent); line-height: 1.65; }
.product-card { overflow: hidden; border-radius: var(--radius); transition: transform .3s ease, border-color .3s ease; }.product-card:hover { transform: translateY(-5px); border-color: color-mix(in oklab, var(--mint) 48%, transparent); }.product-card img { width: 100%; aspect-ratio: 4/3; display: block; object-fit: cover; }.product-card div { padding: 1.35rem; }.product-card h3 { color: var(--mint); font-size: 1.5rem; }.product-card p { margin: .5rem 0 0; color: color-mix(in oklab, var(--cream) 62%, transparent); font-size: .87rem; line-height: 1.55; }
.review-card { min-height: 18rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; border-radius: var(--radius); }.review-stars { display: flex; align-items: center; gap: .35rem; color: var(--mint); font-size: .78rem; font-weight: 700; }.review-card blockquote { margin: 1.25rem 0 2rem; font-family: "Fraunces", Georgia, serif; font-size: 1.22rem; line-height: 1.42; }.review-card footer { display: flex; align-items: center; gap: .7rem; }.review-card footer > span { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--mint) 16%, transparent); color: var(--mint); font-family: "Fraunces", Georgia, serif; }.review-card footer div { display: grid; gap: .1rem; }.review-card footer strong { font-size: .78rem; }.review-card footer small { color: color-mix(in oklab, var(--cream) 48%, transparent); font-size: .68rem; }
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 7rem; margin-bottom: 6rem; padding: 2rem; border-radius: 2rem; }.address { margin: 1.25rem 0 0; color: color-mix(in oklab, var(--cream) 68%, transparent); line-height: 1.65; }.visit ul { display: grid; gap: .8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }.visit li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; }.visit li svg { color: var(--mint); flex: 0 0 auto; }
.location-art { min-height: 24rem; position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 1.3rem; background: color-mix(in oklab, var(--mint) 8%, var(--deep-plum)); }.location-art::before { content: ""; position: absolute; width: 19rem; height: 19rem; border: 1px solid color-mix(in oklab, var(--mint) 22%, transparent); border-radius: 50%; box-shadow: 0 0 0 4rem color-mix(in oklab, var(--mint) 3%, transparent), 0 0 0 8rem color-mix(in oklab, var(--mint) 3%, transparent); }.map-lines span { position: absolute; height: 2px; width: 140%; left: -20%; background: color-mix(in oklab, var(--mint) 13%, transparent); transform: rotate(var(--r)); }.map-lines span:nth-child(1) { top: 18%; --r: 24deg; }.map-lines span:nth-child(2) { top: 42%; --r: -18deg; }.map-lines span:nth-child(3) { top: 65%; --r: 10deg; }.map-lines span:nth-child(4) { top: 85%; --r: -29deg; }.map-pin { z-index: 1; display: grid; place-items: center; gap: .25rem; padding: 1.25rem 1.6rem; border: 1px solid color-mix(in oklab, var(--mint) 35%, transparent); border-radius: 1rem; background: var(--glass-strong); color: var(--mint); box-shadow: 0 20px 45px var(--shadow); backdrop-filter: blur(16px); }.map-pin strong { color: var(--cream); font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; }.map-pin small { color: color-mix(in oklab, var(--cream) 55%, transparent); }.map-code { position: absolute; bottom: 1rem; left: 1rem; color: color-mix(in oklab, var(--cream) 52%, transparent); font-size: .7rem; }
.footer { min-height: 8rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--border); color: color-mix(in oklab, var(--cream) 55%, transparent); font-size: .78rem; }.footer a { color: var(--mint); }.mobile-route { display: none; }
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }[data-reveal].is-visible { opacity: 1; transform: none; }.entrance { animation: rise .8s cubic-bezier(.22,1,.36,1) both; }.entrance-delay { animation-delay: .12s; }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--mint) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } }
@keyframes float-one { 50% { transform: translate(2rem,-2rem) scale(1.08); } }
@keyframes float-two { 50% { transform: translate(-2rem,2rem) scale(1.06); } }

@media (max-width: 800px) {
  .site-header, main, .footer { width: min(100% - 2rem, 42rem); }
  .main-nav { display: none; }.header-call { min-height: 2.6rem; padding: .55rem .9rem; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 3rem; }.hero-copy { display: grid; justify-items: start; } h1 { font-size: clamp(3.25rem, 14vw, 5rem); }.hero-visual { width: 100%; max-height: 42rem; }.rating-line i { display: none; }
  .highlight-grid { grid-template-columns: 1fr; }.glass-panel { min-height: 6.7rem; }.product-grid, .review-grid { grid-template-columns: 1fr; }.product-card, .review-card { max-width: 34rem; }.section { padding-top: 5rem; }.visit { grid-template-columns: 1fr; gap: 2rem; margin-top: 5rem; padding: 1rem; }.visit-copy { padding: 1rem; }.location-art { min-height: 20rem; }.footer { padding: 2rem 0 6rem; flex-direction: column; align-items: flex-start; gap: .8rem; }.mobile-route { position: fixed; z-index: 10; display: flex; align-items: center; justify-content: center; gap: .5rem; left: 1rem; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); min-height: 3.2rem; border: 1px solid color-mix(in oklab, var(--mint) 35%, transparent); border-radius: 99px; background: color-mix(in oklab, var(--mint) 90%, transparent); color: var(--deep-plum); font-weight: 800; box-shadow: 0 14px 40px var(--shadow); backdrop-filter: blur(16px); }
}
@media (max-width: 430px) { .site-header { min-height: 4.8rem; }.header-call { width: 2.65rem; padding: 0; font-size: 0; }.hero { padding-top: 2rem; }.status { font-size: .68rem; }.actions .button { width: 100%; }.rating-line { align-items: flex-start; }.rating-line > span:last-child { width: 100%; }.hero-visual { border-radius: 1.5rem; }.review-card { min-height: 16rem; }.location-art { min-height: 17rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } }