@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Manrope:wght@400;500;600;700&display=swap');
@import url('../design-tokens.css');

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-background); color: var(--color-foreground); font: 400 1rem/1.6 var(--font-body); }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--color-espresso); color: var(--color-porcelain); padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.shell { width: min(100% - 2.5rem, 76rem); margin-inline: auto; }
.eyebrow { margin: 0 0 .7rem; color: var(--color-gold); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.display { font: 600 clamp(2.5rem, 8vw, 5.25rem)/.94 var(--font-display); letter-spacing: -.035em; margin: 0; }
.section-title { font: 600 clamp(2.25rem, 5vw, 4rem)/1 var(--font-display); letter-spacing: -.025em; margin: 0; }
.lede { max-width: 38rem; color: var(--color-muted-foreground); font-size: 1.05rem; }
.section { padding: 5rem 0; }
.section--champagne { background: var(--color-champagne); }
.button { align-items: center; border: 1px solid transparent; border-radius: var(--button-radius); display: inline-flex; gap: .55rem; justify-content: center; min-height: 3rem; padding: .75rem 1.25rem; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-normal) ease; }
.button:hover { transform: translateY(-2px); }
.button--gold { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.button--gold:hover { background: var(--button-primary-hover-bg); }
.button--outline { border-color: var(--color-gold); color: var(--color-gold); }
.button--outline:hover { background: var(--color-gold); color: var(--color-porcelain); }
.site-header { left: 0; padding: 1rem 0; position: fixed; right: 0; top: 0; transition: background-color .2s ease, box-shadow .2s ease; z-index: 10; }
.site-header.is-scrolled { background: rgb(255 249 240 / .96); box-shadow: 0 1px 0 rgb(100 65 38 / .12); backdrop-filter: blur(12px); }
.nav { align-items: center; display: flex; justify-content: space-between; }
.nav-brand img { height: auto; max-height: 2.35rem; object-fit: contain; width: min(9rem, 38vw); }
.nav-toggle { background: none; border: 0; color: var(--color-espresso); min-height: 44px; min-width: 44px; padding: .65rem; }
.nav-toggle span { background: currentColor; display: block; height: 2px; margin: 5px 0; width: 22px; }
.nav-links { background: var(--color-porcelain); display: none; inset: 5.8rem 1.25rem auto; padding: 1rem; position: absolute; box-shadow: var(--shadow-card); }
.nav-links.is-open { display: grid; gap: .25rem; }
.nav-links a { border-radius: .4rem; font-size: .86rem; font-weight: 700; padding: .8rem; }
.nav-links a:hover { background: var(--color-champagne); }
.nav-cta { display: none; }
.hero { min-height: min(49rem, 100svh); overflow: hidden; padding-top: 5.7rem; position: relative; }
.hero::after { background: linear-gradient(90deg, rgb(44 27 18 / .87), rgb(44 27 18 / .59) 62%, rgb(44 27 18 / .18)); content: ''; inset: 0; position: absolute; }
.hero-media { height: 100%; inset: 0; position: absolute; width: 100%; }
.hero-media img { height: 100%; object-fit: cover; object-position: 57% center; width: 100%; }
.hero-content { color: var(--color-porcelain); padding: 9rem 0 5rem; position: relative; text-shadow: 0 2px 18px rgb(44 27 18 / .25); z-index: 1; }
.hero .eyebrow { color: #f6d984; }
.hero .lede { color: #fff4e2; margin: 1.4rem 0 2rem; }
.hero-note { align-items: center; display: flex; font-size: .78rem; gap: .45rem; margin-top: 2.25rem; }
.hero-note::before { background: #f6d984; content: ''; height: 1px; width: 2rem; }
.story { display: grid; gap: 2.5rem; }
.story-copy { align-self: center; }
.story-quote { color: var(--color-espresso); font: 600 clamp(1.6rem, 3.3vw, 2.5rem)/1.18 var(--font-display); margin: 1.75rem 0; }
.image-frame { background: var(--color-champagne); overflow: hidden; padding: .6rem; }
.image-frame img { aspect-ratio: 1 / 1.06; object-fit: cover; width: 100%; }
.section-heading { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
.products { display: grid; gap: 1rem; }
.product-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--duration-normal) ease, transform var(--duration-normal) ease; }
.product-card:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); }
.product-image { background: var(--color-champagne); overflow: hidden; }
.product-image img { aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s ease; width: 100%; }
.product-card:hover .product-image img { transform: scale(1.035); }
.product-body { display: flex; flex: 1; flex-direction: column; padding: 1.15rem; }
.product-body h3 { font: 600 1.7rem/1.05 var(--font-display); margin: 0; }
.product-body p { color: var(--color-muted-foreground); font-size: .9rem; margin: .6rem 0 1rem; }
.product-size { color: var(--color-cocoa); font-size: .75rem; font-weight: 700; letter-spacing: .08em; margin-top: auto; text-transform: uppercase; }
.text-button { background: none; border: 0; color: var(--color-gold); font-weight: 700; margin-top: 1rem; padding: .4rem 0; text-align: left; }
.benefits, .ritual { display: grid; gap: 1rem; }
.benefit, .ritual-step { border-top: 1px solid var(--color-sand); padding: 1.25rem 0; }
.benefit-number, .ritual-number { align-items: center; border: 1px solid var(--color-gold); border-radius: 50%; color: var(--color-gold); display: inline-flex; font: 600 1.2rem/1 var(--font-display); height: 2.5rem; justify-content: center; width: 2.5rem; }
.benefit h3, .ritual-step h3 { font: 600 1.75rem/1.1 var(--font-display); margin: .8rem 0 .4rem; }
.benefit p, .ritual-step p { color: var(--color-muted-foreground); margin: 0; }
.ritual-panel { background: var(--color-espresso); color: var(--color-porcelain); padding: 2.2rem; }
.ritual-panel .eyebrow { color: #f6d984; }
.ritual .ritual-step { border-color: rgb(243 228 197 / .3); }
.newsletter { background: linear-gradient(135deg, var(--color-gold), #7d4b0c); color: var(--color-porcelain); padding: 3rem 0; }
.newsletter-inner { display: grid; gap: 1.5rem; }
.newsletter h2 { font: 600 clamp(2rem, 5vw, 3.4rem)/1 var(--font-display); margin: 0; }
.newsletter p { margin: .75rem 0 0; }
.inline-form { display: grid; gap: .7rem; }
.inline-form input { background: var(--color-porcelain); border: 0; border-radius: var(--radius-control); min-height: 3rem; padding: .75rem 1rem; }
.inline-form .button { background: var(--color-espresso); color: var(--color-porcelain); }
.contact-layout { display: grid; gap: 2.5rem; }
.contact-details { background: var(--color-champagne); padding: 1.75rem; }
.contact-details h3 { font: 600 2rem/1.1 var(--font-display); margin: 0 0 1.25rem; }
.contact-details a { color: var(--color-espresso); font-weight: 700; }
.contact-details p { margin: .35rem 0 1.4rem; }
.contact-details .contact-line, .contact-details .contact-pay { margin: .45rem 0; }
.contact-details .contact-label { color: var(--color-gold); display: inline-block; font-weight: 700; letter-spacing: .04em; margin-right: .65rem; min-width: 3.6rem; }
.contact-details .contact-pay { border-top: 1px solid var(--color-sand); margin-top: 1.1rem; padding-top: .95rem; }
.contact-details .contact-pay strong { display: block; font-size: .8rem; letter-spacing: .05em; margin-bottom: .3rem; text-transform: uppercase; }
.form-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 1.25rem; }
.form-card button[type="submit"] { margin-top: 1rem; }
.form-grid { display: grid; gap: 1rem; }
label { color: var(--color-cocoa); display: grid; font-size: .82rem; font-weight: 700; gap: .4rem; }
input, select, textarea { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-control); color: var(--color-foreground); min-height: 3rem; padding: .7rem .85rem; width: 100%; }
textarea { min-height: 8rem; resize: vertical; }
.form-message { border-radius: var(--radius-control); margin: 0 0 1rem; padding: .85rem 1rem; }
.form-message--success { background: #eaf3e5; color: #284120; }
.form-message--error { background: #f9e7e4; color: #751e18; }
.hp { height: 1px; left: -9999px; overflow: hidden; position: absolute; width: 1px; }
.visually-hidden { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0 0 0 0); white-space: nowrap; }
.site-footer { background: var(--color-espresso); color: var(--color-porcelain); padding: 3.5rem 0 1.5rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer-logo { height: auto; max-width: 13rem; object-fit: contain; width: 100%; }
.footer-links { display: grid; gap: .55rem; }
.footer-links a:hover, .footer-contact a:hover { color: #f6d984; }
.footer-bottom { border-top: 1px solid rgb(243 228 197 / .24); color: #dbcba9; font-size: .78rem; margin-top: 2.5rem; padding-top: 1.25rem; }

@media (min-width: 640px) { .products { grid-template-columns: repeat(2, 1fr); } .inline-form { grid-template-columns: 1fr auto; } }
@media (min-width: 768px) { .shell { width: min(100% - 5rem, 76rem); } .section { padding: 7rem 0; } .nav-toggle { display: none; } .nav-links { align-items: center; background: none; box-shadow: none; display: flex; gap: .1rem; inset: auto; padding: 0; position: static; } .nav-links a { padding: .6rem .55rem; } .nav-cta { display: inline-flex; } .story { grid-template-columns: .85fr 1fr; gap: 5rem; } .products { grid-template-columns: repeat(3, 1fr); } .benefits, .ritual { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .ritual-panel { padding: 4rem; } .newsletter-inner { align-items: center; grid-template-columns: 1fr 1fr; } .contact-layout { grid-template-columns: .75fr 1.25fr; } .form-grid--two { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (min-width: 1024px) { .nav-links { gap: .55rem; } .nav-links a { padding: .65rem .8rem; } .hero-content { padding: 12rem 0 7rem; } .hero .lede { font-size: 1.15rem; } .products { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .product-body { padding: 1.4rem; } .form-card { padding: 2rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }